*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;background:#efeee9;touch-action:pan-x pan-y;}
body{
  height:100%;min-height:-webkit-fill-available;touch-action:pan-x pan-y;
  background:#efeee9;font-family:'Fraunces',serif;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
}
/* Contain-Modus (gerahmt ODER Querformat): vertikal zentriert statt oben angeheftet */
body.contained{align-items:center;}
/* Feste Design-Fläche: 390×844, wird per JS (scaleApp) gleichmäßig auf jede
   Bildschirmgröße skaliert → identische Anordnung/Proportion überall. */
#device-shell{
  position:relative;flex-shrink:0;
  width:390px;height:844px;
  background:#efeee9;
  overflow:clip;
  transform-origin:top center;
}
/* Contain-Modus: Fläche ist immer komplett sichtbar → von der Mitte aus skalieren */
body.contained #device-shell{transform-origin:center center;}
/* Alle vormals "position:fixed" Vollbild-Ebenen sind jetzt IMMER absolut
   relativ zur festen Design-Fläche (nicht mehr zum echten Viewport). */
#paper-top,#paper-bottom,#intro,#booting,#arRoot,#tapHint,#scanClose,#scanResult,
#galClose,#gallery,#product,#exhibitionModal,#sketches,#aboutMe{
  position:absolute !important;
}
/* Gerahmt (großer Bildschirm/Desktop): Handy-Mockup-Optik */
body.framed{
  background:#e6e3dc repeating-linear-gradient(0deg,transparent 0 37px,rgba(70,90,120,.07) 37px 38px);
  padding:40px;box-sizing:border-box;
}
body.framed #device-shell{
  border-radius:52px;
  box-shadow:
    0 0 0 10px #1c1c1e,
    0 0 0 12px #3a3a3c,
    0 0 0 13px rgba(255,255,255,.04),
    0 60px 120px rgba(0,0,0,.38),
    0 20px 50px rgba(0,0,0,.18);
}
/* Dynamic Island */
body.framed #device-shell::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:126px;height:36px;background:#1c1c1e;border-radius:0 0 22px 22px;
  z-index:99999;pointer-events:none;
}
/* Home Indicator */
body.framed #device-shell::after{
  content:'';position:absolute;
  bottom:10px;left:50%;transform:translateX(-50%);
  width:130px;height:5px;
  background:rgba(0,0,0,.32);border-radius:10px;
  z-index:99999;pointer-events:none;
}

/* ===================== STARTSEITE ===================== */
/* Papier-Hintergrund: zwei Hälften, splitten beim Kamera-Start */
/* Beide Elemente decken den vollen Bildschirm ab; clip-path teilt sie in der Mitte.
   So stimmt das Linienmuster an der Schnittstelle garantiert überein (kein iOS-fixed-Bug). */
#paper-top,#paper-bottom{
  position:fixed;top:0;left:0;right:0;bottom:-60px;z-index:8998;
  background-color:#efeee9;
  background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(70,90,120,.12) 37px 38px);
}
#paper-top   {clip-path:inset(0 0 50% 0);}
#paper-bottom{clip-path:inset(50% 0 -60px 0);}
#paper-top.gone,#paper-bottom.gone{display:none;}
#paper-top.crumpling{animation:paperSplitUp 0.58s cubic-bezier(0.55,0,1,0.45) forwards;}
#paper-bottom.crumpling{animation:paperSplitDown 0.58s cubic-bezier(0.55,0,1,0.45) forwards;}
@keyframes paperSplitUp{
  0%  {transform:translateY(0);}
  16% {transform:translateY(2%);}
  100%{transform:translateY(-118%) rotate(0.3deg);}
}
@keyframes paperSplitDown{
  0%  {transform:translateY(0);}
  16% {transform:translateY(-2%);}
  100%{transform:translateY(118%) rotate(-0.3deg);}
}

#intro{inset:0;z-index:9000;overflow:hidden;transition:opacity .5s ease;display:flex;align-items:flex-start;justify-content:center;}
#intro.hide{opacity:0;pointer-events:none;}
#intro-inner{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;
  padding:calc(env(safe-area-inset-top) + 8px) 24px calc(env(safe-area-inset-bottom) + 10px);
  text-align:center;color:#111;width:100%;transform-origin:top center;}

.introtop{display:flex;flex-direction:column;align-items:center;width:100%;justify-content:center;margin-top:-8px;}
.intro-banner-img{width:132%;height:auto;display:block;max-width:132%;margin-left:-2%;mix-blend-mode:multiply;pointer-events:auto;cursor:pointer;}
.intro-lang-row{width:100%;display:flex;justify-content:flex-start;padding-left:18px;margin-top:-24px;position:relative;z-index:5;}
.ig-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
.ig-icon{width:44px;height:44px;object-fit:contain;flex-shrink:0;}
.ig-handle{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;color:#111;}
.introbottom{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;position:relative;z-index:5;margin-top:40px;}

#intro h1{font-size:30px;font-weight:900;letter-spacing:-0.02em;line-height:1.15;min-height:1em;}
#intro h1 small{display:block;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#9a8f80;margin-bottom:8px;font-family:'IBM Plex Mono',monospace;}
.tag{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#555;line-height:1.5;max-width:300px;margin:2px auto 0;}
.tag:empty{margin:0;}

/* Logo statt Text-Titel */
.logo{display:block;width:auto;height:auto;max-width:280px;max-height:100px;margin:0 auto;}
.gallogo{max-width:265px;max-height:130px;margin-top:-10px;}
.gallogo-big{max-width:274px;max-height:140px;}
.gallogo-fog{max-width:255px;max-height:150px;margin-top:-8px;margin-left:auto;margin-right:auto;}
.gallogo-split{max-width:274px;max-height:135px;margin-top:-10px;}
.hidden{display:none !important;}

/* Mittelbereich: Handy mit Marker + Katze */
.scancard{position:relative;width:100%;max-width:360px;flex:0 0 auto;height:4px;display:flex;align-items:center;justify-content:center;}
.phone3d{position:relative;width:82px;aspect-ratio:138/214;height:auto;border:3px solid #111;border-radius:clamp(12px,4vw,20px);background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.14);animation:bob 3.4s ease-in-out infinite;transition:background .5s,border-color .5s,box-shadow .5s;}
.phone3d::before{content:"";position:absolute;top:5.1%;left:50%;transform:translateX(-50%);width:18.8%;height:4px;border-radius:3px;background:#111;transition:background .5s;}
.screen{position:absolute;top:12.1%;left:9.4%;right:9.4%;bottom:7%;}
.marker{display:none;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:66px;height:60px;}
.marker i{position:absolute;background:#111;border-radius:3px;}
.marker i:nth-child(1){left:0;top:0;width:21px;height:21px;}
.marker i:nth-child(2){left:40px;top:3px;width:21px;height:21px;}
.marker i:nth-child(3){left:47px;top:31px;width:12px;height:12px;}
.marker i:nth-child(4){left:9px;top:35px;width:21px;height:21px;}
.mshadow{position:absolute;left:50%;top:74%;transform:translateX(-50%);width:74px;height:9px;background:rgba(0,0,0,.16);filter:blur(4px);border-radius:50%;}
/* Intro-Banner Navigation */
#intro-logo-wrap{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;}
/* Sticker-Wrapper: Positionierung */
.peekcat-wrap{position:absolute;right:-140px;top:74px;pointer-events:none;z-index:4;transform:translateY(-54%) rotate(-32deg);}
.peekcat{width:210px;height:auto;display:block;filter:drop-shadow(0 6px 9px rgba(0,0,0,.12));pointer-events:auto;cursor:pointer;transition:opacity .18s;}

/* Language-Badge: steht jetzt an der Stelle des früheren Instagram-Links */
.lang-badge{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:#f5ef3a;border:2.5px solid #111;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:#111;
  cursor:pointer;opacity:1;pointer-events:auto;
  z-index:6;box-shadow:2px 3px 0 rgba(0,0,0,.18);
  user-select:none;-webkit-user-select:none;
}

/* Sprechblase über dem Handy — SVG-Form, nahtloser Schwanz */
.speech-bubble{
  position:absolute;top:38px;left:50%;
  transform:translateX(-42%) scale(0.82) rotate(-2deg);
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .28s cubic-bezier(0.34,1.56,0.64,1);
  z-index:6;display:inline-block;
}
.sb-shape{
  display:block;width:278px;height:auto;
  filter:drop-shadow(2px 4px 0 rgba(0,0,0,.13));
}
.sb-text{
  position:absolute;
  top:26px;left:14px;right:56px;bottom:10px;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  font-family:'Fraunces',serif;font-size:16px;font-weight:900;
  letter-spacing:0.04em;color:#111;
  text-align:center;line-height:1.28;
  overflow:hidden;
}
#catText{min-width:0;max-width:100%;white-space:normal;word-break:break-word;overflow-wrap:break-word;}
.speech-bubble.show{opacity:1;transform:translateX(-42%) scale(1) rotate(-2deg);}

/* Banner-Sprechblase (erscheint nach Tap auf das Banner-Bild) */
#bannerBubble{
  position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 16%);
  transform:translateX(-50%) scale(0.9) rotate(-1deg);
  width:88%;max-width:320px;
  opacity:0;pointer-events:none;
  transition:opacity .28s,transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index:10;
}
#bannerBubble.show{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1) rotate(-1deg);}
.bb-body{
  background:#fffef5;border:3.5px solid #111;
  border-radius:14px 16px 15px 13px/13px 15px 16px 14px;
  padding:16px 18px 14px;position:relative;
  box-shadow:3px 5px 0 rgba(0,0,0,.14);
}
.bb-body::before{
  content:'';position:absolute;
  top:-17px;left:50%;transform:translateX(-50%);
  border:10px solid transparent;border-bottom-color:#111;
}
.bb-body::after{
  content:'';position:absolute;
  top:-11px;left:50%;transform:translateX(-50%);
  border:8px solid transparent;border-bottom-color:#fffef5;
}
.bb-body .bb-text{
  font-family:'Fraunces',serif;font-size:17px;font-weight:900;
  letter-spacing:0.01em;color:#111;line-height:1.45;
  margin:0;display:block;min-height:1.45em;
}
.bb-cursor{display:inline-block;-webkit-animation:cursor-blink .7s step-end infinite;animation:cursor-blink .7s step-end infinite;color:#111;margin-left:1px;vertical-align:baseline;}
@-webkit-keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
.bb-choices{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.bb-choices.hidden{display:none;}
.bb-choice{
  width:100%;background:#fffef5;color:#111;
  border:2.5px solid #111;
  border-radius:10px 12px 11px 9px/9px 11px 12px 10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;font-weight:600;
  padding:10px 14px;text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-transition:opacity .12s;
  transition:opacity .12s;
  -webkit-appearance:none;appearance:none;
}
.bb-choice:nth-child(1){background:#111;color:#fffef5;}
.bb-choice:active{opacity:0.6;}

/* Dimm-Effekt wenn Sprechblase aktiv (opacity statt filter:blur – iOS-Safari-kompatibel) */
.introtop,.scancard,.introbottom{
  -webkit-transition:opacity .3s ease;
  transition:opacity .3s ease;
}
#intro.banner-focus .scancard,
#intro.banner-focus .introbottom{opacity:0.12;pointer-events:none;}
#intro.cat-focus .introtop,
#intro.cat-focus .introbottom{opacity:0.12;pointer-events:none;}

/* About Me Seite */
#aboutMe{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9400;
  background:#faf8f5 repeating-linear-gradient(180deg,transparent 0 37px,rgba(70,90,120,.06) 37px 38px);
  display:none;-webkit-flex-direction:column;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#aboutMe.show{display:-webkit-flex;display:flex;}
#aboutMeClose{position:absolute;top:calc(24px + env(safe-area-inset-top));right:28px;z-index:9401;width:30px;height:30px;border-radius:50%;background:#d42020;color:#fff;font-size:15px;font-weight:700;line-height:1;cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;border:2.5px solid #fff;box-shadow:0 0 0 2px #111;}

/* ---- Über mich: Inhalt ---- */
.about-scroll{padding:calc(78px + env(safe-area-inset-top)) 22px calc(48px + env(safe-area-inset-bottom) + var(--crop-pad,0px));text-align:left;color:#111;}
.about-title{font-family:'Fraunces',serif;font-size:28px;font-weight:900;letter-spacing:-0.02em;margin-bottom:20px;}

/* Zitat: wie eine angeklebte Notiz */
.about-quote{position:relative;font-family:'Fraunces',serif;font-style:italic;font-size:14.5px;line-height:1.55;
  color:#2b271f;background:#fffef5;border:3px solid #111;
  border-radius:4px 18px 6px 18px/14px 6px 18px 6px;
  padding:20px 20px 20px 22px;margin:0 0 26px;
  box-shadow:3px 5px 0 rgba(0,0,0,.14);transform:rotate(-1.1deg);}

/* Bio-Fließtext: Karte im Notizzettel-Look mit Initial */
.about-bio{background:#fff;border:2.5px solid #111;border-radius:20px 16px 22px 15px/16px 22px 15px 20px;
  padding:20px 20px 6px;margin:0 0 24px;box-shadow:2px 3px 0 rgba(0,0,0,.08);}
.about-bio p{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.65;color:#222;margin:0 0 14px;}
.about-bio p:first-of-type::first-letter{font-family:'Fraunces',serif;font-size:40px;font-weight:900;float:left;line-height:.78;padding:3px 7px 0 0;color:#111;}

.about-subtitle{font-family:'Fraunces',serif;font-size:18px;font-weight:800;line-height:1.5;margin:4px 0 16px;}
.about-subtitle .hl{background:rgba(255,189,89,.55);padding:2px 3px;border-radius:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* Werdegang: nummerierte Stempel-Badges */
.about-steps{display:flex;flex-direction:column;gap:14px;margin:0 0 28px;}
.about-step{display:flex;gap:13px;align-items:flex-start;}
.step-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#ffbd59;border:2.5px solid #111;
  display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;
  box-shadow:1.5px 2px 0 rgba(0,0,0,.16);margin-top:1px;}
.about-step div{font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.55;color:#222;padding-top:4px;}
.about-step strong{display:block;font-family:'Fraunces',serif;font-size:15px;font-weight:700;color:#111;margin-bottom:2px;}

/* Ausstellungs-Timeline mit Linie + Punkten */
.about-timeline{position:relative;padding-left:22px;margin-top:2px;}
.about-timeline::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:#ddd7c9;}
.about-year{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:#fff;background:#111;padding:4px 13px;border-radius:20px;margin:22px 0 12px;box-shadow:2px 2px 0 rgba(0,0,0,.16);}
.about-year:first-child{margin-top:0;}
.about-station{position:relative;background:#fff;border:2px solid #111;
  border-radius:15px 12px 16px 11px/11px 16px 12px 15px;
  padding:11px 14px;margin:0 0 10px;box-shadow:2px 3px 0 rgba(0,0,0,.08);}
.about-station::before{content:'';position:absolute;left:-21px;top:17px;width:9px;height:9px;border-radius:50%;
  background:#ffbd59;border:2px solid #111;}
.station-date{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:#9a8f80;margin-bottom:3px;}
.station-name{font-family:'Fraunces',serif;font-size:14px;font-weight:700;line-height:1.4;color:#111;}
.station-media:empty{display:none;}

/* Echte Ausstellungen (statt Event/Party) gelb eingefärbt */
.about-station.exhibit{background:#fff3d6;border-color:#111;}
.about-station.exhibit::before{background:#ffbd59;box-shadow:0 0 0 3px rgba(255,189,89,.35);}

/* Video-Play-Button (nur Icon) + aufklappendes Fenster */
.station-media:not(:empty){margin-top:10px;}
.station-play{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;
  background:#111;color:#fff;border:2px solid #111;border-radius:50%;padding:0;cursor:pointer;
  box-shadow:2px 3px 0 rgba(0,0,0,.16);transition:transform .15s,background .2s;}
.station-play:active{transform:translateY(1px);box-shadow:1px 1px 0 rgba(0,0,0,.16);}
.station-play.is-open{background:#d42020;border-color:#111;}
.station-play .play-icon{font-size:13px;line-height:1;transform:translateX(1px);}
.station-play.is-open .play-icon{font-size:12px;transform:none;}
.station-video-wrap{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .48s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
.station-video-wrap.open{grid-template-rows:1fr;opacity:1;}
.station-video-inner{overflow:hidden;min-height:0;}
.station-video-inner video{width:100%;display:block;border-radius:10px;border:2px solid #111;margin-top:10px;}

/* Foto am Seitenende: blendet sich dynamisch beim Herunterscrollen ein und wächst vom Boden aus */
.about-photo-bottom{display:block;width:220px;max-width:72%;height:auto;margin:36px auto calc(-48px - env(safe-area-inset-bottom));
  transform-origin:center bottom;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.35));
  opacity:0;transform:translateY(70px) scale(.6);will-change:opacity,transform;}

@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-7px) rotate(2deg);}}

/* Buttons */
.btn{background:#111;color:#fff;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500;padding:13px 28px;border-radius:40px;box-shadow:0 7px 20px rgba(0,0,0,.22);transition:transform .15s,background .2s;}
.btn:active{transform:scale(.97);background:#000;}
.btn.cam{min-width:248px;}
/* Einstiege: Galerie / Instagram / Über mich – gleiche Pillenform, leicht
   im Zickzack versetzt (mehr Dynamik, nutzt die Breite besser aus) statt
   stur untereinander. "Über mich" etwas größer als eigenständiger Abschluss. */
#galleryBtn,#instagramBtn,#aboutMeBtn{color:#111!important;border:2px solid #111;border-radius:46px 40px 48px 41px/42px 46px 40px 48px;box-shadow:2px 3px 0 rgba(0,0,0,.10);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
#instagramBtn,#aboutMeBtn{background:#fcfbf8!important;}
#instagramBtn:active,#aboutMeBtn:active{background:#f0f0f0!important;color:#111!important;translate:0 1px;box-shadow:1px 1px 0 rgba(0,0,0,.12);}
#galleryBtn,#instagramBtn{padding:15px 26px;font-size:14px;min-width:200px;}
#sketchesBtn{display:none;}
#aboutMeBtn{padding:19px 34px;font-size:19px;font-weight:700;}
#galleryBtn{transform:translateX(-56px);}
#instagramBtn{transform:translateX(24px);}
#aboutMeBtn{transform:translateX(-56px);}
#instagramBtn:active{transform:translateX(24px) translateY(1px);}
#aboutMeBtn:active{transform:translateX(-56px) translateY(1px);}
/* Primäre Aktion: Galerie ansehen (Akzentfarbe passend zum Banner-Badge) */
#galleryBtn{background:#ffbd59!important;border:2.5px solid #111;box-shadow:0 6px 16px rgba(0,0,0,.18);font-weight:700;}
#galleryBtn:active{background:#ffb03e!important;color:#111!important;transform:translateX(-56px) translateY(1px);box-shadow:0 2px 6px rgba(0,0,0,.14);}
#sketches{position:fixed;inset:0;z-index:9400;background:#fff;display:none;flex-direction:column;}
#sketches.show{display:flex;}
#sketchesClose{position:absolute;top:calc(24px + env(safe-area-inset-top));right:28px;z-index:9401;width:30px;height:30px;border-radius:50%;background:#d42020;color:#fff;font-size:15px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;border:2.5px solid #fff;box-shadow:0 0 0 2px #111;}

/* Code-Eingabe als Klebeband + rundes OK */
#codeRow{display:flex;align-items:center;gap:12px;width:100%;max-width:340px;}
.tape{flex:1;position:relative;transform:rotate(-1.2deg);}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:16px;background:rgba(221,209,175,.55);}
.tape::before{left:-7px;transform:skewX(-14deg);}
.tape::after{right:-7px;transform:skewX(-14deg);}
#codeInput{position:relative;z-index:1;width:100%;border:none;outline:none;background:rgba(222,210,176,.92);padding:16px 14px;font-family:'IBM Plex Mono',monospace;font-size:15px;color:#6a5f45;text-align:center;box-shadow:0 2px 7px rgba(0,0,0,.08);}
#codeInput::placeholder{color:#8c8064;}
#codeGo{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:#111;color:#fff;border:none;font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.2);}
#codeGo:active{transform:scale(.95);}

#questNote{display:none;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#2b6;letter-spacing:.04em;}
body.headset #questNote{display:block;}
.err{color:#a11;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.6;max-width:300px;}

/* ===================== KAMERA-STATUS ===================== */
#booting{position:fixed;inset:0;z-index:8000;background:#000;color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
#booting.show{display:flex;}
.spin{width:34px;height:34px;border:3px solid rgba(255,255,255,.15);border-left-color:#fff;border-radius:50%;animation:rot .8s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}
#booting p{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em;}
#arRoot{position:fixed;inset:0;z-index:1;}
/* A-Frame / AR.js eigene UI komplett ausblenden */
.a-enter-vr,.a-enter-ar,.a-enter-vr-button,.a-enter-ar-button,
.a-loader-title,.a-orientation-modal,.a-enter-ar-modal,
.a-dialog,.a-dialog-allow-button,.a-dialog-deny-button,
.rs-gui,[data-aframe-inspector]{display:none !important;}
#tapHint{position:fixed;left:50%;top:calc(18px + env(safe-area-inset-top));transform:translateX(-50%);z-index:9150;background:rgba(0,0,0,.7);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:10px 22px;border-radius:30px;opacity:0;transition:opacity .4s;pointer-events:none;}
#tapHint.show{opacity:1;}
#scanClose{position:fixed;top:calc(16px + env(safe-area-inset-top));left:16px;z-index:9200;width:40px;height:40px;border:none;background:rgba(0,0,0,.5);color:#fff;font-size:24px;line-height:1;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#scanClose.show{display:flex;}
#scanResult{position:fixed;bottom:0;left:0;right:0;z-index:9100;padding:20px 24px calc(env(safe-area-inset-bottom) + 24px);background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column;align-items:center;transform:translateY(110%);transition:transform .45s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;}
#scanResult.show{transform:translateY(0);pointer-events:auto;}
#scanResultBtn{width:100%;max-width:340px;background:#fff;color:#111;border:none;cursor:pointer;font-family:'Fraunces',serif;font-size:20px;font-weight:900;padding:18px 28px;border-radius:40px;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .15s,background .2s;}
#scanResultBtn:active{transform:scale(.97);background:#eee;}

/* ===================== GALERIE ===================== */
#gallery{position:fixed;inset:0;z-index:9400;background:#faf8f5;display:none;flex-direction:column;overflow:hidden;}
#gallery.show{display:flex;}
#gallery h2{font-size:26px;font-weight:900;color:#111;letter-spacing:-0.01em;text-align:center;}
.gal-header{display:flex;align-items:center;width:100%;padding:env(safe-area-inset-top) 8px 0;}
.gal-nav{flex:1;display:flex;align-items:center;justify-content:center;height:220px;padding:8px 6px 6px;}
.gal-header.compact{justify-content:center;gap:10px;}
.gal-header.compact .gal-nav{flex:none;height:auto;padding:24px 4px 28px;}
.gal-title-wrap{display:flex;flex-direction:column;align-items:center;width:100%;}
.gal-arrow{flex-shrink:0;width:44px;height:44px;padding:4px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:center;}
.gal-arrow:active{transform:scale(.88);}
.gal-arrow svg{width:32px;height:32px;display:block;}
.gwrap{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:stretch;width:100%;padding-bottom:calc(env(safe-area-inset-bottom) + 14px + var(--crop-pad,0px));}
#gal-content{display:flex;flex-direction:column;width:100%;transition:opacity .22s ease;}
.gal-desc{margin:-30px 20px 24px;padding:14px 18px;border:2.5px solid #111;border-radius:18px 16px 20px 17px/17px 20px 16px 18px;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.6;color:#111;background:#fcfbf8;display:none;position:relative;z-index:2;}
.gal-desc.visible{display:block;}
.type-cursor{display:inline;color:#111;animation:type-blink 1.1s ease-in-out infinite;}
@keyframes type-blink{0%,100%{opacity:1}45%,55%{opacity:0}}
#gcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px;width:100%;padding:8px 12px 0;}
.gcard{cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .15s;width:100%;}
.gcard-full{grid-column:1/-1;}
.gcard-sticker{pointer-events:none;display:flex;align-items:center;justify-content:flex-start;background:transparent;border:none !important;box-shadow:none !important;overflow:visible;}
.gcard-sticker img{box-shadow:none !important;border:none !important;filter:none !important;width:100% !important;max-width:100% !important;transform:scale(2.5) translate(-28%, 20%);transform-origin:left center;}
.gcard:active{transform:scale(.97);}
.gcard.no-open{cursor:default;}
.gcard.no-open:active{transform:none;}
.gcard img{width:100% !important;height:auto !important;max-width:100%;border-radius:0;box-shadow:0 8px 20px rgba(0,0,0,.16);display:block;filter:saturate(1.22) contrast(1.06) brightness(0.85);border:3px solid #111;}
.gcard img.plain{border:none;box-shadow:none;border-radius:0;filter:none;}
.gcard model-viewer{--poster-color:transparent;--progress-bar-color:transparent;background:transparent;pointer-events:none;display:block;}
.gcard model-viewer::part(default-progress-bar){display:none;}
.gcard .gt{margin-top:12px;font-size:18px;font-weight:600;color:#111;}
.empty{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#9a8f80;line-height:1.6;text-align:center;}
#galClose{position:absolute;top:calc(24px + env(safe-area-inset-top));right:28px;z-index:9401;width:30px;height:30px;border-radius:50%;background:#d42020;color:#fff;font-size:15px;font-weight:700;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;border:2.5px solid #fff;box-shadow:0 0 0 2px #111;}
#galClose.show{display:flex;}
#gal-cursor{position:absolute;left:-80px;top:300px;z-index:9450;width:30px;height:30px;pointer-events:none;filter:drop-shadow(1px 2px 3px rgba(0,0,0,.5));transition:left .88s cubic-bezier(.4,0,.22,1),top .88s cubic-bezier(.4,0,.22,1);}
#gal-cursor.gal-cur-click svg{animation:gal-cur-click .24s ease-out;}
@keyframes gal-cur-click{0%,100%{transform:scale(1)}45%{transform:scale(.65)}}

/* ===================== EXHIBITION-MODAL ===================== */
#exhibitionModal{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:24px;}
#exhibitionModal.show{display:flex;}
.exh-card{background:#111;border-radius:14px;width:100%;max-width:342px;position:relative;padding:44px 12px 12px;box-shadow:0 24px 64px rgba(0,0,0,.5);}
#exhClose{position:absolute;top:10px;right:12px;width:30px;height:30px;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:20px;line-height:1;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#exhClose:active{background:rgba(255,255,255,.3);}
.exh-video-wrap{width:100%;border-radius:6px;overflow:hidden;background:#000;}
.exh-video-wrap video{width:100%;height:auto;display:block;}
.exh-video-wrap iframe{width:100%;aspect-ratio:16/9;height:auto;border:none;display:block;}
.exhibition-btn{margin:0 20px 28px;display:block;background:#111;color:#fff;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;letter-spacing:.08em;padding:16px 44px;border-radius:40px;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .15s,background .2s;}
.exhibition-btn:active{transform:scale(.97);background:#000;}
.exh-btn-row{display:flex;gap:12px;align-items:center;justify-content:center;margin:0 20px 28px;}
.exh-play-btn{width:54px;height:54px;border-radius:50%;background:#111;color:#fff;border:none;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;padding-left:4px;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .15s,background .2s;flex-shrink:0;}
.exh-play-btn:active{transform:scale(.92);background:#000;}
.exh-flyer-btn{background:#fcfbf8;color:#111;border:2.5px solid #111;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;letter-spacing:.06em;padding:14px 28px;border-radius:40px;box-shadow:2px 3px 0 rgba(0,0,0,.10);transition:transform .15s;}
.exh-flyer-btn:active{transform:scale(.97);}
.exhibition-btn-overlay{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;border:1.5px solid rgba(255,255,255,.35);cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.1em;padding:8px 18px;border-radius:20px;white-space:nowrap;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s;}
.exhibition-btn-overlay:active{background:rgba(0,0,0,.9);}
.exh-nav{display:none;align-items:center;justify-content:center;gap:16px;padding:14px 0 2px;}
.exh-nav.show{display:flex;}
.exh-nav-btn{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:18px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.exh-nav-btn:active{background:rgba(255,255,255,.28);}
#exhDot{color:rgba(255,255,255,.55);font-family:'IBM Plex Mono',monospace;font-size:13px;min-width:40px;text-align:center;}

/* ===================== PRODUKT-/DETAILSEITE ===================== */
#product{position:fixed;inset:0;z-index:9600;background:#faf8f5;display:none;flex-direction:column;align-items:center;overflow-y:auto;padding:0 24px calc(104px + env(safe-area-inset-bottom) + var(--crop-pad,0px));}
#product.show{display:flex;}
#prodClose{position:absolute;top:calc(24px + env(safe-area-inset-top));right:28px;z-index:9401;width:30px;height:30px;border-radius:50%;background:#d42020;color:#fff;font-size:15px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;border:2.5px solid #fff;box-shadow:0 0 0 2px #111;}
#prodViewer{width:100%;flex:1;min-height:0;--poster-color:transparent;--progress-bar-color:transparent;background:#faf8f5;}
#prodViewer::part(default-progress-bar){display:none;}
#prodThumbImg{display:none;width:100%;flex:1;min-height:0;max-height:100%;object-fit:contain;}
#prodThumbImg.show{display:block;}
#prodViewer.hidden{display:none;}
#prodTitle{font-size:28px;font-weight:900;color:#111;letter-spacing:-0.02em;margin:6px 0 4px;text-align:center;}
#prodTitle:empty{margin:0;}
#prodSub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#9a8f80;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
#prodSub:empty{margin:0;}
#prodDim{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#666;margin-bottom:8px;text-align:center;}
#prodDim:empty{margin:0;}
#prodDesc{font-family:'Fraunces',serif;font-size:15px;color:#3a3a3a;line-height:1.5;max-width:340px;text-align:center;margin-bottom:20px;}
#prodDesc:empty{margin-bottom:12px;}
.actions{display:flex;gap:12px;align-items:stretch;width:100%;max-width:340px;}
#arBtn{flex:0 0 auto;background:#fff;color:#111;border:2px solid #111;border-radius:40px;padding:16px 34px;font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;letter-spacing:.1em;cursor:pointer;transition:transform .15s,background .2s,color .2s;}
#arBtn:active{transform:scale(.97);background:#111;color:#fff;}
#arBtn.hidden{display:none;}
#buyBtn{flex:1;background:#111;color:#fff;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;letter-spacing:.06em;padding:16px 0;border-radius:40px;box-shadow:0 6px 18px rgba(0,0,0,.16);transition:transform .15s,background .2s;}
#buyBtn:active{transform:scale(.97);background:#000;}
#buyBtn.hidden{display:none;}
#prodCredit{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;color:#b3a99a;text-align:center;}
#prodCredit:empty{margin:0;}

/* Scan-Animation übers Handy */
.scanline{position:absolute;left:8px;right:8px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(17,17,17,.6),transparent);box-shadow:0 0 9px rgba(17,17,17,.4);animation:sweep 2.6s ease-in-out infinite;}
@keyframes sweep{0%{top:16%;opacity:0;}12%{opacity:1;}50%{top:80%;opacity:1;}88%{opacity:0;}100%{top:16%;opacity:0;}}

/* Pfeile auf Kamera & Galerie */
.introbottom{position:relative;}
.arrow{position:absolute;pointer-events:none;z-index:3;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));}
.arrow[hidden]{display:none;}
#arrowCam{width:82px;left:-22px;top:-38px;}
#arrowGal{width:64px;left:18px;bottom:10px;}

/* Hinweis-Pfeile + Scan-Animation */
.arrow{position:absolute;pointer-events:none;z-index:4;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));}
/* arrowCam sitzt über dem Button und zeigt schräg nach unten-links auf "Galerie ansehen" */
#arrowCam{top:-46px;left:180px;width:60px;animation:nudgeA 1.7s ease-in-out infinite;}
/* arrowGal (gespiegelt) zeigt von unten-rechts nach oben auf "Über mich" */
#arrowGal{bottom:10px;right:64px;left:auto;width:64px;animation:nudgeB 1.7s ease-in-out infinite;}
@keyframes nudgeA{0%,100%{transform:scaleX(-1) translate(0,0);}50%{transform:scaleX(-1) translate(4px,6px);}}
@keyframes nudgeB{0%,100%{transform:scaleX(-1) translate(0,0);}50%{transform:scaleX(-1) translate(4px,-6px);}}
.scanline{display:none;position:absolute;left:9%;right:9%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(17,17,17,.55),transparent);top:18%;animation:sweep 2.3s ease-in-out infinite;}
@keyframes sweep{0%{top:18%;opacity:0;}14%{opacity:1;}50%{top:72%;opacity:1;}86%{opacity:0;}100%{top:18%;opacity:0;}}

/* ===================== KAMERA-AKTIVIERUNGS-ANIMATION ===================== */
#intro.activating .introtop{
  transform:translateY(-115%);
  transition:transform 0.5s cubic-bezier(0.55,0,1,0.45);
}
#intro.activating .introbottom{
  transform:translateY(115%);
  transition:transform 0.5s cubic-bezier(0.55,0,1,0.45);
}
#intro.activating .peekcat-wrap,
#intro.activating .screen,
#intro.activating .phone3d{
  opacity:0;
  transition:opacity 0.15s;
}
#intro.activating .phone3d{
  opacity:0;
  transition:opacity 0.15s;
}
#intro.no-transition{transition:none !important;}

/* ===================== KAMERA-SCANNING-MODUS ===================== */
/* Intro bleibt sichtbar; nur der Handy-Bereich in der Mitte ist transparent */
#intro.scanning{pointer-events:none;align-items:center;}
#intro.scanning .introtop{display:none;}
#intro.scanning .introbottom{display:none;}
#intro.scanning .peekcat-wrap{display:none;}
#intro.scanning .lang-badge{display:none;}
/* Scancard zentrieren wenn alles andere ausgeblendet */
#intro.scanning #intro-inner{justify-content:center;padding-top:0 !important;padding-bottom:0 !important;}
#intro.scanning .scancard{height:380px !important;}
#intro.scanning .phone3d{width:150px !important;border-color:rgba(255,255,255,.9) !important;}
#intro.scanning .phone3d{
  background:transparent;
  border-color:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 8px 24px rgba(0,0,0,.35);
}
#intro.scanning .phone3d::before{background:rgba(255,255,255,.9);}
#intro.scanning .marker{display:block;}
#intro.scanning .marker i{background:rgba(255,255,255,.8);}
#intro.scanning .mshadow{opacity:0;}
#intro.scanning .scanline{
  display:block;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  box-shadow:0 0 8px rgba(255,255,255,.45);
}
#intro.scanning #bannerBubble{opacity:0 !important;pointer-events:none !important;}
/* Sprechblase im Scan-Modus: unter dem Handy, über dem Kamera-Feed */
#intro.scanning .speech-bubble{
  top:305px;left:50%;bottom:auto;
  transform:translateX(-48%) scale(0.82) rotate(-2deg);
  pointer-events:none;
}
#intro.scanning .speech-bubble.show{
  opacity:1;
  transform:translateX(-48%) scale(1) rotate(-2deg);
}

/* ===================== GERAHMT: Handy-Mockup auf großem Bildschirm =====================
   Betrifft NUR die dekorative Rahmung (Dynamic Island/Home Indicator brauchen
   etwas Padding). Anordnung/Proportion der App selbst bleiben überall gleich
   (siehe feste Design-Fläche + scaleApp() oben). */
body.framed #intro-inner{padding-top:56px !important;padding-bottom:50px !important;}
body.framed .introtop{min-height:220px !important;}
body.framed #tapHint{top:58px !important;}
body.framed #galClose{top:50px !important;}
body.framed #sketchesClose{top:50px !important;}
body.framed #prodClose{top:50px !important;}
body.framed .gal-header{padding:36px 8px 0 !important;}
body.framed .gwrap{margin-bottom:22px !important;}