/* =====================================================================
   FOLDING TO YOU · geraet.css — MASCHINELL ERZEUGTER AUSZUG.

   Enthalten sind, in dieser Reihenfolge: das Geraet der Fabi-Erinnerung
   (Overlay, Panel, Opener samt Zerfall, Karton) aus site/fine/
   styles-dark.css; das Ausgraben (Kiste von oben, Fundleiste,
   Zeitungsblaetter, Dinge) aus derselben Quelle samt fines komplettem
   Handy-Block; und die Traumglaeser (Bild, Punkte, Einladungen,
   Buchstabenflug) aus site/spiel/styles-dark.css, dem Original.
   Alles auf Lauras Einzel-Ja vom 24.08.26.

   NICHT VON HAND PFLEGEN: bei Aenderungen in den Quellen neu ziehen.
   Die Kommentare der Quellen stehen NICHT mehr hier (eine Bereinigung
   am 24.08.26 musste kopflose Kommentarreste entfernen, die der
   Block-Schneider erzeugt hatte, und nahm alle Kommentare mit); wer
   das Warum einer Regel sucht, liest sie in der Quelldatei nach.
   Nur der :root-Kopf darunter ist eigen: fines Massvariablen mit
   ihren Werten, dazu die fuers Ausgraben und die Traumglaeser
   gebrauchten. */

:root{
  --scale:1.33;
  --ding:1;
  --wgross:1.32;
  --knopf-rand:calc(16px + env(safe-area-inset-bottom, 0px));
  --fussmin:calc(var(--knopf-rand) + 76px);
  
  --graphit:#999;
  --licht:#faf8f1;
  --inv-skala:1;
  --rot:0deg;
  --wk:18px;
  --schrift-lesen:var(--s-lesen);
  --strich-punkt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10,3 C15,3 17,6 17,10 C17,15 14,17 10,17 C5,17 3,14 3,10 C3,6 6,3 10,3 Z' fill='black'/></svg>");
}

  
  .overlay {
    position:fixed; inset:0; background:rgba(8,8,8,.92);
    display:none; align-items:safe center; justify-content:safe center; z-index:400; overflow-y:auto;
  }

  .overlay.aktiv { display:flex; }

  .panel {
    background:#0a0a0a; border:2px solid #444;   
    border-radius:14px; overflow:hidden;   
    
    zoom: calc(var(--scale) * var(--ding));   
    aspect-ratio:24 / 34; width:auto;   
    height:min(34rem, calc(80vh / var(--scale) / var(--ding)), calc(92vw / var(--scale) / var(--ding) * 34 / 24));
    height:min(34rem, calc(80dvh / var(--scale) / var(--ding)), calc(92vw / var(--scale) / var(--ding) * 34 / 24));
    display:flex; flex-direction:column;
    font-size:.88rem;
    
    font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }

  
  .panel { position:relative; }

  
  .overlay {
    position:fixed; inset:0; background:rgba(8,8,8,.92);
    display:none; align-items:safe center; justify-content:safe center; z-index:400; overflow-y:auto;
  }

  .overlay.aktiv { display:flex; }

  
  #ov-handy.aktiv { flex-direction:column; gap:.75rem; padding:14px 8px 72px; }

  .nachricht .wer, .nachricht .meta, .zeittrenner, .panelkopf {
    font-variant-numeric:tabular-nums;
  }

  .panelkopf {
    padding:.8rem 1rem; border-bottom:1px solid #2a2a2a;
    color:#666; font-size:.72rem; letter-spacing:.14em;
    display:flex; justify-content:space-between; align-items:center;
  }

  .panelkopf button { padding:.25rem .7rem; font-size:.7rem; }

  .zeittrenner { text-align:center; color:#3f3f3f; font-size:.68rem; letter-spacing:.14em; margin:.7rem 0 .1rem; }

  #kistenbox {
    width:calc(340px * var(--scale)); height:calc(243px * var(--scale)); margin:0 auto; position:relative;
  }

  
  .kartonbild { position:absolute; inset:0; width:100%; height:100%; display:block;
    user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }

  .kartonface {
    position:absolute; left:17%; right:17%; top:30%;
    display:flex; flex-direction:column; align-items:center; gap:.2rem;
  }

  .kartonface .edding { white-space:nowrap; font-size:calc(1.02rem * var(--scale) * var(--ding)); }

  
  .kartonbild .o-ecke { transition:transform .3s; transform-box:fill-box; transform-origin:right bottom; }

  #kistenbox:hover .kartonbild .o-ecke { transform:rotate(-9deg) translateY(-2px); }

@media (prefers-reduced-motion: reduce){
 .kartonbild .o-ecke { transition:none; }
}

  
  #kistenbox.gross { width:calc(460px * var(--scale)); height:calc(329px * var(--scale)); }

  #kistenbox.gross .dbsticker { width:calc(257px * var(--scale)); position:relative; top:calc(33px * var(--scale)); }

  #kistenbox.gross .kartonface .edding { font-size:calc(1.55rem * var(--scale) * var(--ding)); position:relative; top:calc(16px * var(--scale)); }

  #kistenbox.invertiert .edding { color:#5a5a5a; }

@media (max-width: 700px){
    #kistenbox.gross { width:min(92vw, calc(460px * var(--scale))); height:auto; aspect-ratio:460 / 329; }
    #kistenbox.gross .dbsticker { width:85%; top:6.6vw; }
    #kistenbox.gross .kartonface .edding { font-size:calc(5vw * var(--ding)); top:3.2vw; }
    
    #kistenbox.gross #kband { left:-2.4vw; right:-2.4vw; }
}

  
  #kistenbox.schuh { width:calc(340px * var(--scale)); height:calc(204px * var(--scale)); }

  
  #kistenbox.schuh #kband { top:42%; height:calc(16px * var(--scale)); }

  
  .edding {
    color:#999; font-size:calc(1.15rem * var(--scale) * var(--ding)); letter-spacing:0;
    font-family:'Caveat', cursive; font-weight:500;
  }

  
  #kband {
    position:absolute; left:calc(-12px * var(--scale)); right:calc(-12px * var(--scale)); top:70%;
    height:calc(24px * var(--scale));
    background:#0d0d0d;
    border-top:calc(1.6px * var(--scale)) solid #8a8a8a;
    border-bottom:calc(1.6px * var(--scale)) solid #8a8a8a;
    display:flex; align-items:center; justify-content:center;
    color:#6f6f6f; font-size:calc(.55rem * var(--scale) * var(--ding)); letter-spacing:.3em;
    cursor:grab; touch-action:none;
    transition:opacity .5s;
  }

  
  #kband.lockt { animation:kbandAtmet 1.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
 #kband.lockt { animation:none; }
}

  .fghandystatus{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    padding:.32rem .95rem; font-size:.62rem; letter-spacing:.04em; color:#8a8a8a;
    font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    border-bottom:1px solid #202020; position:relative; z-index:6;
  }

  .fghandystatus .fguhr, .fghandystatus .fgakku{ font-variant-numeric:tabular-nums; }

  .fghandystatus svg{ display:block; }

  
  .tipppunkte {
    align-self:flex-start; width:max-content;
    background:#101010; border:1px solid #262626; border-radius:10px;
    padding:.3rem .7rem .45rem; margin:.15rem 0;
    display:flex; gap:.5rem; color:#8a8a8a;
    font-size:2.1rem; line-height:.55;   
  }

  .tipppunkte span { animation:punktwelle 1.2s ease-in-out infinite; }

  .tipppunkte span:nth-child(2) { animation-delay:.2s; }

  .tipppunkte span:nth-child(3) { animation-delay:.4s; }

@media (prefers-reduced-motion: reduce){
    .tipppunkte span { animation:none; opacity:.6; }
}

  .osend.haltend { width:44px; height:44px; overflow:hidden; }

  .osend.haltend svg { position:relative; z-index:1; }

  #handy-panel.schwarz { background:#060606; border-color:#222; }

  #handy-panel.schwarz > * { visibility:hidden; }

 
  #handy-panel.schwarz::before { opacity:0; }

  .ocursor {
    display:inline-block; width:1.5px; height:1.05em; margin-left:1px;
    vertical-align:-2px; background:#ddd;
    animation:stroboCursor 1.05s steps(1) infinite;
  }

 
  .ocursor.tot { animation:none; opacity:1; }

                  
  .ochat { flex:1; display:flex; flex-direction:column; padding:.9rem; position:relative; overflow:hidden; }

  .ofeld {
    margin-top:auto; position:relative;
    border:1px solid #2c2c2c; border-radius:14px; padding:.55rem .85rem;
    font-size:.85rem; cursor:default;
    transition:transform .15s ease, border-color .25s;
    user-select:none; -webkit-user-select:none; touch-action:manipulation;
  }

  .ofeld .oph { color:#666; }

  .ofeld.hebt { transform:translateY(-1px); }

.obanner{ position:absolute; top:.5rem; left:.5rem; right:.5rem;
    background:#1a1a1a; border:1px solid #333; border-radius:14px;
    padding:.7rem .9rem; cursor:pointer;
    transform:translateY(-140%); transition:transform .26s ease; z-index:3;
    box-shadow:0 12px 28px rgba(0,0,0,.55); }

 
  .obanner.da{ transform:translateY(0); }

  .obanner.winkt{ animation:oBannerAtmet 2.8s ease-in-out infinite; }

  .obanner.winkt.dringlich{ animation-duration:1.5s; }

@media (prefers-reduced-motion: reduce){
 .obanner.winkt{ animation:none; border-color:#7a7a7a; }
}

  .ob-wer{ display:block; font-size:.7em; color:#888; margin-bottom:.28rem; letter-spacing:.1em; }

  .ob-z{ display:block; color:#ddd; font-size:.82rem; line-height:1.45; }

  
  
  .overlauf{
    flex:1 1 auto; min-height:0; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end; gap:.42rem;
  }

  .oalt{
    flex:0 0 auto; align-self:flex-start; max-width:78%;
    background:#171717; border-radius:16px 16px 16px 5px;
    padding:.5rem .72rem; color:#6a6a6a;
    font-size:.8rem; line-height:1.5;
  }

  .oalt.mein{ align-self:flex-end; background:#262626; color:#8a8a8a; border-radius:16px 16px 5px 16px; }

  .oaltwort{
    display:inline-block; height:.46em; border-radius:2px;
    background:currentColor; opacity:.5;
    margin:0 .3em .28em 0; vertical-align:middle;
  }

  .oalt.mein .oaltwort{ opacity:.55; }

  .wgel{
    align-self:flex-start; max-width:84%;
    margin-top:.5rem;   
    
    border:1px solid #333; border-radius:16px 16px 16px 5px;
    padding:.5rem .75rem;
    color:#555; font-style:italic; font-size:.82rem; line-height:1.45;
  }

  .wgelzeile{ display:flex; align-items:center; gap:.45rem; }

  .wgelzeile svg{ flex:0 0 auto; opacity:.75; }

  
  .wgeltext{ flex:1 1 auto; min-width:0; }

  .wgelzeit{ display:block; text-align:right; font-style:normal; color:#3d3d3d;
    font-size:.72em; letter-spacing:.06em;
    font-variant-numeric:tabular-nums; margin-top:.2rem; }

  .osend{
    flex:0 0 auto; width:34px; height:34px; border-radius:50%;
    border:1px solid #2c2c2c; background:none; color:#4a4a4a; padding:0;
    display:flex; align-items:center; justify-content:center; cursor:default;
    transition:color .45s ease, border-color .45s ease, background .45s ease;
  }

  .osend svg{ display:block; }

  .osend.scharf{ cursor:pointer; color:#ededed; border-color:#dcdcdc; background:rgba(255,255,255,.06); }

  .osend.winkt{ animation:oSendAtmet 2.8s ease-in-out infinite; }

  .osend.winkt.dringlich{ animation-duration:1.5s; }

@media (prefers-reduced-motion: reduce){
    .osend.winkt{ animation:none; box-shadow:0 0 12px 1px rgba(225,225,225,.18); }
}

  
  .obst { display:inline-block; white-space:pre; transition:transform 1.6s ease-in, opacity 1.6s ease-in; }

  .obst.faellt { transform:translateY(140px); opacity:0; }

  
  .oplatte { transition:transform 1.1s ease-in, opacity 1.1s ease-in; will-change:transform, opacity; }

  .oplatte.faellt    { transform:translateY(210px) rotate(3deg);  opacity:0; }

  .oplatte.li.faellt { transform:translateY(210px) rotate(-3deg); opacity:0; }

   
  .panel.orahmenfall { transition:transform 1.2s ease-in, opacity 1.2s ease-in; }

  .panel.orahmenfall.faellt { transform:translateY(240px) rotate(-2deg); opacity:0; }

   
  .panel.ostatusfall::before { transform:translateY(-46px) rotate(-4deg); opacity:0; transition:transform .9s ease-in, opacity .9s ease-in; }

  

  
  .oszurueck {   
    color:#8a8a8a; cursor:pointer; font-size:1.25em; line-height:1;
    padding:0 .45rem 0 .05rem; margin-right:.15rem;
    user-select:none; -webkit-user-select:none;
  }

  .oszurueck:hover { color:#ddd; }

  .oszurueck.tipp { color:#ddd; animation:osheimpuls 1.5s ease-in-out 3; }

@media (prefers-reduced-motion: reduce){
 .oszurueck.tipp { animation:none; opacity:1; }
}

  
  .handystatus {
    display:flex; align-items:center; justify-content:space-between;
    padding:.32rem .95rem; font-size:.62rem; letter-spacing:.04em; color:#8a8a8a;   
    font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    border-bottom:1px solid #202020;
  }

  .handystatus .hs-e { font-size:.66rem; font-weight:600; color:#8a8a8a; }

body:has(#ov-handy.aktiv) #inventar{ display:none; }


/* DER KOPFSTREIFEN GILT AUCH FUERS GERAET (Laura, 26.08.26: "1 immer").
   Das Handy lag als Vollbild unter Fragezeichen und Neustart, die auf
   z-index 560 daraufkleben: die zwei Knoepfe standen mitten im Chatkopf
   und nahmen ihm die Tipps weg. Jetzt beginnt das Geraet unter
   demselben Streifen, unter dem auch die Buehne beginnt (--kopf in
   styles.css, dort steht die Rechnung).

   IMMER, nicht nur im Demo-Bau: sonst zeigte Lauras Werkbank ein
   anderes Handy als die Demo, und genau das soll --kopf verhindern.
   Die Sicherheitszone kommt OBEN DRAUF und nicht in die Rechnung, wie
   in der Szene; sie steht jetzt hier am Overlay und nicht mehr im
   Panel, sonst zaehlte sie zweimal. Der Streifen selbst ist der Grund
   des Spiels.

   Die Hoehe wird wie zuvor durch --scale und --ding geteilt: das Panel
   traegt zoom, seine CSS-Pixel sind kleiner als die des Schirms. */
#ov-handy.aktiv { padding:calc(var(--kopf) + env(safe-area-inset-top, 0px)) 0 0; gap:0; align-items:stretch; justify-content:flex-start; background:var(--grund); overflow:hidden; }

#ov-handy .panel {
  width:calc(100vw / var(--scale) / var(--ding));
  height:calc((100vh - var(--kopf) - env(safe-area-inset-top, 0px)) / var(--scale) / var(--ding));
  height:calc((100dvh - var(--kopf) - env(safe-area-inset-top, 0px)) / var(--scale) / var(--ding));
  max-height:none; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none;
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) / var(--scale) / var(--ding));
  box-sizing:border-box;
}

html:has(#ov-handy.aktiv) #topbar { opacity:0; pointer-events:none; transition:opacity .25s ease; }


html:has(#klickhinweis.an) #ov-handy.aktiv .panel { padding-bottom:calc(var(--knopf-rand) + 42px * var(--wgross)); box-sizing:border-box; }


#ov-handy .panel { animation:handyHoch .32s cubic-bezier(.32,.72,0,1) both; }

@media (prefers-reduced-motion: reduce){
 #ov-handy .panel { animation:none; }
}


#ov-handy .handystatus { min-height:30px; padding:0 1.1rem; font-size:.78rem; letter-spacing:.04em; color:#7a7a7a; border-bottom:0; justify-content:space-between; }


#ov-handy .panelkopf { padding:.4rem 1rem; border-bottom:1px solid #1d1d20; justify-content:flex-start; gap:.7rem; color:#e6e3dc; font-size:1rem; letter-spacing:.02em; min-height:60px; height:60px; box-sizing:border-box; }

#ov-handy .panelkopf > span:not(.oszurueck):not(.shzurueck) { order:2; font-weight:600; }
#ov-handy .panelkopf .oszurueck { order:0; font-size:3rem; line-height:0; width:44px; height:44px; display:grid; place-items:center; margin-left:-.6rem; padding:0 0 .25rem; color:#c8c8c8; }

   

#ov-handy .panelkopf:has(#fkopf)::before {
  content:''; order:1; flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:#1e1e22; border:1px solid #2e2e33;
}

@media (max-width:700px){
  #fotogeraet .fghandystatus { min-height:30px; border-bottom:0; font-size:.78rem; color:#7a7a7a; }
  #fotogeraet .fghandystatus .fguhr { color:#a8a8a8; }
}

@media (max-width: 700px){
  #kistenbox:not(.gross) { width:min(92vw, calc(340px * var(--scale))); height:auto; aspect-ratio:340 / 243; }
  #kistenbox:not(.gross) .dbsticker { width:85%; }
  #kistenbox:not(.gross) .kartonface .edding { font-size:min(calc(1.02rem * var(--scale) * var(--ding)), 5.2vw); }
  
  #kistenbox.schuh { width:min(92vw, calc(340px * var(--scale))); height:auto; aspect-ratio:340 / 204; }

  #kistenbox.schuh #kband { left:-2.4vw; right:-2.4vw; }
}


#ov-handy.aktiv.blendet .panel { animation:handyBlende 1.3s ease-out both; }

#ov-handy.aktiv.abblende { transition:opacity 1.2s ease; opacity:0; }


#ov-handy .panelkopf.a-kopf { font-size:.9rem; }


#ov-handy .panelkopf.a-kopf::before { display:none !important; }

#ov-handy .panelkopf .a-profil { order:1; flex:0 0 auto; width:44px; height:44px; margin:-3px 0; padding:3px; border:0; background:transparent; cursor:pointer; }

#ov-handy .panelkopf .a-profil svg { width:38px; height:38px; border-radius:50%; background:#1e1e22; border:1px solid #2e2e33; display:block; }


#ov-handy .panelkopf .hk-name { display:flex; flex-direction:column; line-height:1.15; }

#ov-handy .panelkopf .hk-status { font-size:.74rem; font-weight:400; color:#7a7a7a; letter-spacing:.02em; margin-top:.15rem; }

#ov-handy .panelkopf.app::before { display:none !important; }


#ov-handy .panelkopf.app > span { font-size:.78rem; font-weight:500; letter-spacing:.08em; line-height:1.35; }

#ov-handy .panelkopf.app > span.oszurueck { font-size:3rem; letter-spacing:0; line-height:0; }


#ov-handy .panelkopf > span.a-profil.a-kopfbild { order:1; font-weight:400; cursor:default; }


#ov-handy .panelkopf.a-kopf:has(.oszurueck) { gap:.45rem; }

#ov-handy .panelkopf.a-kopf .oszurueck { margin-left:-.9rem; margin-right:-.3rem; }


#ov-handy .panelkopf.a-kopf:has(.oszurueck) .hk-name { min-width:0; }

#ov-handy .panelkopf.a-kopf:has(.oszurueck) .hk-status { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  @keyframes kbandAtmet { 50% { opacity:.72; transform:scaleY(1.06); } }

  @keyframes punktwelle { 0%, 60%, 100% { opacity:.25; } 30% { opacity:1; } }

  
  @keyframes oBannerAtmet{
    0%,100%{ border-color:#333;    box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 0 0 rgba(225,225,225,0); }
    50%    { border-color:#7a7a7a; box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 16px 0 rgba(225,225,225,.16); }
  }

  @keyframes oSendAtmet{
    0%,100%{ box-shadow:0 0 0 0 rgba(225,225,225,0); }
    50%    { box-shadow:0 0 15px 1px rgba(225,225,225,.20); }
  }

  @keyframes osheimpuls { 0%,100% { opacity:.45; } 50% { opacity:1; } }

  
  @keyframes stroboCursor { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }

@keyframes handyHoch { from { transform:translateY(6%); opacity:.6; } to { transform:none; opacity:1; } }

@keyframes handyBlende { from { opacity:0; transform:none; } to { opacity:1; transform:none; } }

@keyframes hkPuls { 0%,100% { opacity:.55; transform:scale(.9); } 50% { opacity:1; transform:scale(1.15); } }


  .namensbalken.ruckelt{ animation:wRuck .26s ease; }

@media (prefers-reduced-motion: reduce){
    .namensbalken.ruckelt{ animation:none; }
}

  #objekte .blackbox.gesehen { opacity:.55; }

  .objektlabel { font-size:calc(.68rem * var(--scale)); letter-spacing:.14em; color:#666; text-align:center; margin-top:calc(-4px * var(--scale)); }

  .dbsticker { display:block; width:calc(190px * var(--scale)); height:auto; transform:rotate(-1.8deg); opacity:.85; margin-top:-.1rem; }

@media (max-width: 760px){
    #ov-karte .kwisch {
      position:absolute; top:50%; transform:translate(0, -50%);
      display:flex; align-items:center; justify-content:center;
      width:32px; height:46px;
      color:#5a5852;                        
      
      filter:drop-shadow(0 0 2px #f2efe8) drop-shadow(0 0 5px rgba(242,239,232,.85));
      opacity:.9; transition:opacity .3s ease;
      pointer-events:none; z-index:3;
    }
    #ov-karte .kwisch.aus { opacity:0; }
    #ov-karte .kwisch.lockt { animation:kwischtick 2.4s ease-in-out infinite; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce){
    #ov-karte .kwisch.lockt { animation:none; }
}

  
  .haltenziel > .objektlabel {
    margin-top:calc(.5rem * var(--scale));
    margin-bottom:calc(.4rem * var(--scale));
  }

  .ruckelt { animation:shruckeln .1s; }

@media (prefers-reduced-motion: reduce){
    .ruckelt { animation:none; }
}

@media (max-width:600px){
    
    #sortier .objektlabel {
      font-size:calc(.5rem * var(--scale)); letter-spacing:.06em;
      line-height:1.3;
    }
}

@media (pointer: coarse){
    
    .kblatt { inset:-4% -3%; }
    
    .kauffalt-label { font-size:.7rem; }
}

   

  
  .kausgrab { display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:.3rem 0; }

  .kablage { display:flex; gap:.45rem; justify-content:center; flex-wrap:wrap; min-height:calc(80px * var(--scale)); }

  .kslot {
    width:calc(64px * var(--scale)); height:calc(78px * var(--scale));
    border:1px dashed #3a3a3a; border-radius:4px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
    transition:border-color .35s ease;
  }

  .kslot.voll { border-color:transparent; }

  .kslot .objektbild { transform:scale(.68); transform-origin:center; }

  .kslot .objektlabel { font-size:calc(.55rem * var(--scale)); letter-spacing:.1em; }

  .kabgelegt { display:flex; flex-direction:column; align-items:center; gap:.15rem; cursor:pointer; }

  .kabgelegt.gesehen { opacity:.55; }

  .kzeile { min-height:1.15rem; font-size:.78rem; color:#777; font-style:italic; text-align:center; }

  
  .kzeile-unten {
    min-height:3.2em; max-width:34rem; padding:0 1rem;
    display:flex; align-items:flex-start; justify-content:center; text-align:center;
    opacity:0; transition:opacity .22s ease;
  }

  .kzeile-unten.an { opacity:1; }

@media (prefers-reduced-motion: reduce){
 .kzeile-unten { transition:none; }
}

  .kbox { position:relative; width:min(92vw, calc(340px * var(--scale))); height:calc(240px * var(--scale)); }

  .kwand { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

  .kinnen { position:absolute; left:8%; top:11%; right:8%; bottom:10%; }

  
  .kding {
    position:absolute; transform:translate(-50%,-50%) rotate(var(--rot, 0deg));
    touch-action:none; cursor:grab; will-change:transform;
  }

  .kding.traegt { cursor:grabbing; filter:drop-shadow(0 7px 9px rgba(0,0,0,.6)); z-index:200 !important; }

  .kding.fliegt { transition:transform .4s cubic-bezier(.2,.9,.3,1.18); }

  .kding.heim   { transition:transform .27s ease; }

  .kding.ruckelt { animation:kruckel .2s ease 2; }

  
  .kblatt {
    position:absolute; inset:-2% -3%;
    background:#101010; border:1px solid #262626; border-radius:3px;
    transform:rotate(var(--kn, -1.4deg));
    transition:transform .3s ease;
    z-index:150; touch-action:none; cursor:grab;
  }

  .kblatt svg { position:absolute; inset:0; width:100%; height:100%; }

  .kblatt .knick { transition:opacity .35s ease; }

  .kblatt .knick.glatt { opacity:0 !important; }

  .kblatt.bereit { animation:kblattpuls 1.8s ease-in-out infinite; }

  .kblatt.weg {
    transition:transform .45s ease, opacity .45s ease;
    transform:translate(-130%, -14%) rotate(-14deg) !important;
    opacity:0;
  }

  
  .kzeitung { position:absolute; left:9%; right:9%; top:16%; pointer-events:none; }

  .kzeitung .zkopf {
    color:#1a1a1a; padding-bottom:.24rem; margin-bottom:.34rem;
    border-bottom:1.5px solid #1a1a1a;
    transition:color 1s ease, border-color 1s ease;
  }

  
  .kzeitung .zdatum { font-size:calc(.5rem * var(--ding)); letter-spacing:.06em; text-align:right; white-space:nowrap; margin-bottom:.14rem; }

 
  
  .kzeitung .zmast { font-size:.82rem; letter-spacing:.12em; text-align:center; font-weight:500; white-space:nowrap; overflow:hidden; }

  .kzeitung .zkopf.scharf { color:#c8c8c8; border-color:#3d3d3d; }

  .kzeitung .kwisch { display:block; height:.42rem; background:#1b1b1b; border-radius:2px; margin:.3rem 0; }

@media (prefers-reduced-motion: reduce){
    .kding, .kding.fliegt, .kding.heim, .kblatt, .kblatt.weg, .kblatt .knick { transition:none !important; animation:none !important; }
.kding.ruckelt { animation:none !important; }
    .kblatt.bereit { animation:none !important; border-color:#575757; }
}

  

  
  .kslot { width:calc(74px * var(--scale)); }

  
  .kabgelegt { width:calc(74px * var(--scale)); }

  .kabgelegt .objektlabel {
    font-size:calc(.6rem * var(--scale)); letter-spacing:.06em; text-align:center;   
    line-height:1.15; white-space:normal; max-width:80px;
    
    word-break:normal; overflow-wrap:normal;
  }

  .objektunter {
    display:block; margin-top:.08rem; text-align:center;
    font-size:calc(.56rem + 2pt); line-height:1.18; color:#7a7a7a; font-style:italic;   
    white-space:normal; max-width:80px;
  }

  .kabgelegt.dockt { animation:kdock .36s ease; }

  .kslot.einrast { animation:kslotquittung .5s ease; }

  .kabgelegt.wartet { animation:kwartet 2.4s ease-in-out infinite; }

  .kabgelegt.wartet.gesehen { animation:none; filter:none; }

  
  .kauffalt {
    width:74px; min-height:78px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
    opacity:.45; transition:opacity .45s ease;
  }

  .kauffalt-bild { transform:scale(.62); }

  .kauffalt-label { font-size:.5rem; letter-spacing:.14em; color:#7a7a7a; opacity:0; transition:opacity .45s ease; }

  .kauffalt.bereit { opacity:1; }

  .kauffalt.bereit .kauffalt-label { opacity:1; }

  .kauffalt.bereit .kauffalt-bild rect { stroke:#6c6c6c; }

  .kauffalt.bereit .kauffalt-bild { animation:kauffaltpuls 1.8s ease-in-out infinite; }

  .kauffalt.belegt { opacity:.22; }

  .kauffalt.belegt .kauffalt-label { opacity:0; }

  
  .kding.entfaltet { transition:transform .6s ease !important; z-index:400 !important; }

  .kding.entfaltet svg line { opacity:0; transition:opacity .45s ease; }

  .kabgelegt.stupst { animation:kstups .22s ease 2 !important; }

  
  .knamenzeile { display:none; }

@media (prefers-reduced-motion: reduce){
    .kabgelegt.dockt, .kslot.einrast, .kauffalt.bereit .kauffalt-bild { animation:none !important; }
    
    .kabgelegt.wartet { animation:none !important;
      filter:drop-shadow(0 0 9px rgba(4,173,191,.8)) drop-shadow(0 0 18px rgba(4,173,191,.4)); }
    .kding.entfaltet { transition:none !important; }
    .kabgelegt.stupst { animation:none !important; }
}

@media (max-width: 600px){
    .kausgrab > .kzeile       { order:1; }
    .kausgrab > .kbox         { order:2; }
    .kausgrab > .kablage      { order:3; }
    .kausgrab > .knamenzeile  { order:4; }
    .kausgrab > .kzeile-unten { order:5; }
    .kausgrab { gap:.45rem; }
    
    
    .kablage { flex-wrap:wrap; gap:6px; padding:0 6px; width:100%; min-height:0; justify-content:center; }
    .kslot   { flex:0 0 calc((100% - 12px) / 3); min-width:0; width:auto; height:76px; }
    .kslot .objektbild { width:100%; height:auto; max-height:60px; transform:none; }
    .kabgelegt { width:100%; height:100%; justify-content:center; gap:0; }
    
    .kabgelegt .objektlabel, .kabgelegt .objektunter { display:none; }
    .kauffalt { flex:0 0 calc((100% - 12px) / 3); min-width:0; width:auto; min-height:0; height:76px; }
    .kauffalt-label { display:none; }
   
    .kauffalt-bild { transform:none; width:92%; height:auto; }
   
    
    @keyframes kauffaltpulsklein { 0%,100% { transform:scale(1); } 50% { transform:scale(1.1); } }
    .kauffalt.bereit .kauffalt-bild { animation:kauffaltpulsklein 1.8s ease-in-out infinite; }
    
    .knamenzeile {
      display:block; width:100%; min-height:2.6em; padding:0 .6rem; text-align:center;
      font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:calc(.68rem * var(--ts)); letter-spacing:.14em; color:#9a9a9a;
      opacity:0; transition:opacity .2s ease;
    }
    .knamenzeile.an { opacity:1; }
    .knamenzeile i {
      display:block; margin-top:.1rem;
      font-family:var(--schrift-lesen); font-style:italic; letter-spacing:0;
      font-size:calc(.78rem * var(--ts)); color:#7a7a7a;
    }
    
    .kbox { height:min(calc(240px * var(--scale)), 46vh); }
    .kinnen .kding .objektbild   { height:min(calc(96px * var(--scale)), 16vh) !important; width:auto !important; }
    .kinnen .kdbrief .objektbild { height:min(96px, 12vh) !important; width:auto !important; }
}

@media (max-width: 600px) and (max-height: 640px){
    .kausgrab { gap:.28rem; }
    .kbox     { height:36vh; }
    .kslot, .kauffalt { height:56px; }
   
    .kslot .objektbild { max-height:44px; }
    .knamenzeile { min-height:2em; font-size:calc(.62rem * var(--ts)); }
    .knamenzeile i { font-size:calc(.72rem * var(--ts)); }
}

@media (max-width:700px){
  #sortier .objektlabel { font-size:calc(.75rem * var(--scale)); letter-spacing:.08em; margin-top:.35rem; }
}

#ov-karte .kwisch { width:44px; height:44px; color:transparent; filter:none; animation:none !important; opacity:1; }

:root { --walblau:#04adbf; }

  @keyframes wRuck{ 0%,100%{transform:translateY(.12em) translateX(0)} 25%{transform:translateY(.12em) translateX(-2px)}
    55%{transform:translateY(.12em) translateX(2px)} 80%{transform:translateY(.12em) translateX(-1px)} }

  @keyframes shruckeln { 50% { transform:translateX(3px); } }

  @keyframes kwackel {
    0%   { margin-top:0; }
    40%  { margin-top:3px; }
    70%  { margin-top:-1px; }
    100% { margin-top:0; }
  }

  @keyframes kruckel { 0%,100% { margin-left:0; } 25% { margin-left:-3px; } 75% { margin-left:3px; } }

  @keyframes kblattpuls { 0%,100% { border-color:#262626; } 50% { border-color:#575757; } }

  
  @keyframes kdock {
    0%   { transform:scale(1.12); }
    30%  { transform:scale(.95) translateX(-1.5px); }
    52%  { transform:scale(1.02) translateX(1.5px); }
    74%  { transform:scale(.99) translateX(-1px); }
    100% { transform:scale(1) translateX(0); }
  }

  @keyframes kslotquittung { 0% { border-color:#8f8f8f; } 100% { border-color:transparent; } }

  
  @keyframes kwartet {
    0%, 100% { transform:translateX(0) scale(1);
               filter:drop-shadow(0 0 5px rgba(4,173,191,.45)); }
    42%      { transform:translateX(-.7px) scale(1.045);
               filter:drop-shadow(0 0 11px rgba(4,173,191,.95)) drop-shadow(0 0 22px rgba(4,173,191,.5)); }
    58%      { transform:translateX(.7px) scale(1.045);
               filter:drop-shadow(0 0 11px rgba(4,173,191,.95)) drop-shadow(0 0 22px rgba(4,173,191,.5)); }
  }

  @keyframes kauffaltpuls { 0%,100% { transform:scale(.62); } 50% { transform:scale(.7); } }

  
  @keyframes kstups { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }

@keyframes tutDingpuls { 0%,100% { opacity:.5; } 50% { opacity:1; } }

@keyframes wklecksZieh { 0% { opacity:0; transform:translateX(0); } 15% { opacity:1; } 60% { opacity:1; transform:translateX(var(--wk)); } 100% { opacity:0; transform:translateX(calc(var(--wk) * 1.3)); } }


  
  .traumbild { position:relative; width:min(calc(360px * var(--scale)), 86vw, 100%); aspect-ratio:340 / 190; margin:2vh auto 0; opacity:0; transition:opacity 1.6s ease, filter .55s ease; }

  .traumbild.da { opacity:1; }

  .traumbild.aufglimmen { filter:brightness(1.55); }

               
  .traumbild svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

  /* LAURAS GLAESER SIND FLAECHE, NICHT STRICH (26.08.26). Illustrator
     hat ihre Umrisse in gefuellte Formen verwandelt; die Farbe sitzt
     darum am fill, nicht am stroke, und Lauras schwankende Strichbreite
     bleibt erhalten. Es ist dieselbe Farbe wie ueberall im Bild.
     DER STROKE IST DIE STELLSCHRAUBE FUER DIE STRICHSTAERKE. Ein stroke
     auf einer Flaeche liegt zur Haelfte innen, zur Haelfte aussen; die
     innere Haelfte verschwindet unter der Fuellung. Also aendert er die
     sichtbare Linie um genau seine Breite — in HELL macht er sie
     breiter, in GRUNDFARBE frisst er sie von beiden Raendern schmaler.
     Er ist non-scaling-stroke, die Breite ist damit immer dieselbe
     Anzahl Bildpunkte, egal wie gross das Bild gerade steht.
     Der Weg bis hierher (Laura, 26.08.26): 0,4 hell war das
     Mindestmass gegen das Flimmern am Telefon, dann zweimal "0,25px
     duenner" — 0,4 hell, 0,15 hell, jetzt 0,10 in Grundfarbe. Lauras
     Fuellung selbst ist damit unterschritten: die Linie ist duenner,
     als sie sie gezeichnet hat. */
  .traumbild .tr-strich path { fill:#c4ccd4; stroke:var(--grund); stroke-width:.1; vector-effect:non-scaling-stroke; }

  .traumbild .tr-bank    { fill:none; stroke:#b9c1c9; stroke-width:1.4; vector-effect:non-scaling-stroke; }

  /* die zwei anderen Kanten der Bank (26.08.26). Hinten ist weiter weg
     und darum schwaecher, unten liegt die Lippe im eigenen Schatten. */
  .traumbild .tr-bank-hinten { stroke:#8b95a0; stroke-width:.9; opacity:.55; }

  .traumbild .tr-bank-lippe  { stroke:#8b95a0; stroke-width:1;  opacity:.7; }

  .traumbild .tr-pool { animation:traumpool var(--pd,11s) ease-in-out var(--pp,0s) infinite; }

  .traumbild .tr-feld { position:absolute; pointer-events:none; }
.traumbild .tr-fly { position:absolute; width:0; height:0; }
.traumbild .tr-driftx { animation:traumdx var(--dx,7s) ease-in-out infinite; }
.traumbild .tr-drifty { animation:traumdy var(--dy,11s) ease-in-out infinite; }
.traumbild .tr-glow { --sz:1; width:calc(3px * var(--sz)); height:calc(3px * var(--sz)); border-radius:50%; background:var(--c,#fff); box-shadow:0 0 calc(5.4px * var(--sz)) calc(1.6px * var(--sz)) var(--ch, rgba(255,255,255,.5)); animation:traumglow var(--gd,5s) ease-in-out var(--gp,0s) infinite; }

  .traumbild .tr-fly.funkel .tr-glow { animation:traumfunkel .38s ease-out; }

  .sf .tr-fly {
    position:absolute; width:0; height:0; pointer-events:none;
    animation:sfaus .25s ease-out both;   
  }

  .sf .tr-driftx, .sf .tr-drifty, .sf .tr-glow { pointer-events:none; }

  .sf .tr-driftx { animation:traumdx var(--dx,9s) ease-in-out infinite; }

  .sf .tr-drifty { animation:traumdy var(--dy,9s) ease-in-out infinite; }

  
  .sf .tr-glow {
    --sz:1; width:calc(3px * var(--sz)); height:calc(3px * var(--sz));
    border-radius:50%; background:var(--c,#e07b2f);
    box-shadow:0 0 calc(6px * var(--sz)) calc(1.8px * var(--sz)) var(--ch, rgba(224,123,47,.62));
    animation:sfglow var(--gd,7s) ease-in-out var(--gp,0s) infinite;
  }

  
  .sf .tr-fly.funkel .tr-glow { animation:sffunkel .4s ease-out; }

@media (prefers-reduced-motion: reduce){
    .sf .tr-fly { animation:sfein .5s ease both; }
    .sf .tr-driftx, .sf .tr-drifty { animation:none; }
    .sf .tr-glow { animation:none; opacity:.95; }
}

  
  .traumbild .tr-fly.aus .tr-glow { animation:traumflare .7s ease forwards; }

  .traumbild.konturenweg .tr-strich, .traumbild.konturenweg .tr-bank { opacity:0; transition:opacity 1.2s ease; }

  .traumbild.poolsweg .tr-pool { animation:none; opacity:0 !important; transition:opacity .8s ease; }

  

  
  .traumbild .tr-glas.ei-hop    { animation:eiHop 1.3s ease-in-out infinite; }

  .traumbild .tr-glas.ei-wipp   { animation:eiWipp 2.3s ease-in-out infinite; }

  .traumbild .tr-glas.ei-vibr   { animation:eiVibr .26s linear infinite; }

  .traumbild .tr-glas.ei-schieb { animation:eiSchieb 2.6s ease-in-out infinite; }

  
  .traumbild .tr-feld.nudge { animation:feldNudge .8s ease-out; }

  
  .traumbild .tf-hit { position:absolute; pointer-events:none; cursor:default; }

  .traumbild .tf-hit.aktiv { pointer-events:auto; cursor:pointer; }

  
  .tf-buehne { width:min(33rem, 92vw); margin:5vh auto 0; }

  .tf-gruppe { margin:0 0 1.7rem; }

  .tf-gruppe:last-child { margin-bottom:0; }

  .tf-satz { text-align:center; }

  .tf-zeile { margin:.2rem 0; line-height:1.72; font-size:calc(1.05rem * var(--ts)); color:#dcdcdc; }

  .tf-zeile.weg { opacity:0; transition:opacity 1s ease; }

  .tf-buchstabe.tf-hl.glanz { animation:traumschimmer 2.2s ease-out; }

  
  .tf-flug { position:fixed; inset:0; pointer-events:none; z-index:120; }

  .tf-fliegend { position:fixed; transform:translate(-50%,-50%); }

  .tf-fliegend b { display:inline-block; font-weight:400; font-family:var(--schrift-lesen); font-size:calc(1.05rem * var(--ts)); line-height:1; will-change:transform,opacity; }

  
  .traumbild.ruhig .tr-driftx, .traumbild.ruhig .tr-drifty { animation:none; }

  .traumbild.ruhig .tr-glow { animation:traumrm 10s ease-in-out infinite; }

  .traumbild.ruhig .tr-pool { animation:none; opacity:.09; }

  .traumbild.ruhig .tr-glas.ei-hop, .traumbild.ruhig .tr-glas.ei-wipp,
  .traumbild.ruhig .tr-glas.ei-vibr, .traumbild.ruhig .tr-glas.ei-schieb,
  .traumbild.ruhig .tr-feld.nudge { animation:none; }

@media (prefers-reduced-motion: reduce){
    .traumbild .tr-glas.ei-hop, .traumbild .tr-glas.ei-wipp,
    .traumbild .tr-glas.ei-vibr, .traumbild .tr-glas.ei-schieb,
    .traumbild .tr-feld.nudge { animation:none; }
}

  .traumbild .tr-glas { transform-box:fill-box; transform-origin:50% 100%; }

@keyframes traumpool { 0%,100% { opacity:.05; } 50% { opacity:.12; } }

  @keyframes traumdx { 0%,100% { transform:translateX(calc(-1 * var(--ax,6px))); } 50% { transform:translateX(var(--ax,6px)); } }

  @keyframes traumdy { 0% { transform:translateY(var(--ay,6px)); } 45% { transform:translateY(calc(-1.6 * var(--ay,6px))); } 100% { transform:translateY(var(--ay,6px)); } }

  @keyframes traumglow { 0%,100% { opacity:.5; box-shadow:0 0 calc(4.4px * var(--sz)) calc(1.1px * var(--sz)) var(--ch); } 50% { opacity:1; box-shadow:0 0 calc(9px * var(--sz)) calc(3px * var(--sz)) var(--ch); } }

  @keyframes traumfunkel { 0% { opacity:.7; } 35% { opacity:1; box-shadow:0 0 calc(13px * var(--sz)) calc(5px * var(--sz)) var(--ch); transform:scale(1.7); } 100% { opacity:.7; transform:scale(1); } }

   
  
  @keyframes sfaus {
    from { transform:translateY(var(--sfy,4px)) scale(0); opacity:0; }
    to   { transform:translateY(0) scale(1); opacity:1; }
  }

  
  @keyframes sfglow {
    0%,100% { opacity:.82; box-shadow:0 0 calc(5px * var(--sz)) calc(1.3px * var(--sz)) var(--ch); }
    50%     { opacity:1;   box-shadow:0 0 calc(10px * var(--sz)) calc(3px * var(--sz)) var(--ch); }
  }

  @keyframes sffunkel {
    0%   { opacity:.8; }
    35%  { opacity:1; box-shadow:0 0 calc(14px * var(--sz)) calc(4.6px * var(--sz)) var(--ch); transform:scale(1.8); }
    100% { opacity:.8; transform:scale(1); }
  }

  @keyframes sfein { from { opacity:0; } to { opacity:1; } }

  @keyframes traumflare { 0% { opacity:.7; } 22% { opacity:1; box-shadow:0 0 calc(11px * var(--sz)) calc(4px * var(--sz)) var(--ch); transform:scale(1.4); } 100% { opacity:0; box-shadow:0 0 0 0 var(--ch); transform:scale(.6); } }

  @keyframes eiHop {
    0%,100% { transform:translateY(0); } 28% { transform:translateY(-5px); }
    48% { transform:translateY(0); } 60% { transform:translateY(-2px); } 72% { transform:translateY(0); }
  }

  @keyframes eiWipp {
    0%,100% { transform:rotate(0deg); } 25% { transform:rotate(-3.4deg); } 75% { transform:rotate(3.4deg); }
  }

  @keyframes eiVibr {
    0%,100% { transform:translate(0,0); } 20% { transform:translate(-1px,.5px); }
    40% { transform:translate(1px,-.5px); } 60% { transform:translate(-1px,-.5px); } 80% { transform:translate(1px,.5px); }
  }

  @keyframes eiSchieb {
    0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); }
    45% { transform:translateX(0); } 65% { transform:translateX(6px); } 90% { transform:translateX(0); }
  }

  @keyframes feldNudge { 0% { filter:brightness(1); } 38% { filter:brightness(2.05); } 100% { filter:brightness(1); } }

  @keyframes traumschimmer { 0% { filter:brightness(1); } 40% { filter:brightness(1.6); } 100% { filter:brightness(1); } }

  @keyframes traumrm { 0%,100% { opacity:.55; } 50% { opacity:1; } }

  @keyframes trwackel {
    0%, 34%, 72%, 100% { transform:rotate(0deg); }
    39% { transform:rotate(-1.7deg); }
    46% { transform:rotate(1.5deg); }
    53% { transform:rotate(-1.2deg); }
    60% { transform:rotate(.9deg); }
    66% { transform:rotate(-.5deg); }
  }

  .harmonika { display:flex; flex-direction:column; gap:.8rem; }

  .absatz {
    border-left:1px solid #3a3a3a;
    padding-left:1.2rem;
    color:#cfcfcf;
    font-size:calc(1.125rem * var(--ts));
    line-height:1.7;
  }

  .absatz s { color:#5a5a5a; }

  .absatz.streifen {
    max-height:1.55em;
    overflow:hidden;
    opacity:.38;
    border-top:1px dashed #3a3a3a;
    cursor:pointer;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .psbrief {
    position:relative; width:250px; padding:1.15rem 1.1rem 1.3rem;
    zoom:var(--ding);
    background:#e9e6df; color:#26241f;
    transform:rotate(-2.2deg);
    box-shadow:0 10px 22px rgba(0,0,0,.42), 0 2px 5px rgba(0,0,0,.3);
    font-family:'Caveat', cursive; font-weight:500;
    font-size:1.24rem; line-height:1.35; letter-spacing:0;
  }

  .psbrief::before, .psbrief::after {
    content:''; position:absolute; top:0; bottom:0; width:2px;
    background:linear-gradient(90deg, rgba(0,0,0,.10), rgba(255,255,255,.55));
  }

  .psbrief::before { left:33.3%; }
  .psbrief::after  { left:66.6%; }

  .psbrief span { position:relative; z-index:2; display:block; }

  @media (prefers-reduced-motion: reduce){ .psbrief { transform:none; } }

  .nachricht {
    max-width:80%; line-height:1.45;
    border:none; background:#171717;
    padding:.5rem .8rem;
    border-radius:16px 16px 16px 5px;
  }

  .nachricht .wer { color:#666; font-size:.66rem; letter-spacing:.08em; margin-bottom:.15rem; }

  .nachricht .text { color:#e2e2e2; }

  .nachricht.eigene { align-self:flex-end; text-align:left; background:#262626; border-radius:16px 16px 5px 16px; }

  .nachricht .meta { color:#666; font-size:.64rem; font-style:normal; margin-top:.25rem; opacity:.7; }

  .nachricht.eigene .meta { text-align:right; }

  @keyframes chatAtmet {
    0%, 100% { background:transparent; box-shadow:none; }
    50%      { background:#1c1c22;    box-shadow:0 0 12px rgba(230,227,220,.14); }
  }

  .a-weiter { display:block; color:#7a7a7a; font-size:.72rem; letter-spacing:.06em; margin-bottom:.25rem; }

  .a-foto { margin-top:.5rem; width:min(220px, 100%); }

  .nachricht .a-foto svg { width:100%; height:auto; }

  .a-fotogrund { background:linear-gradient(180deg, #7b7b83 0%, #5c5c64 100%); border-radius:10px; padding:14px 18px 8px; display:grid; place-items:center; }

  .a-fotogrund img { width:82%; height:auto; display:block; }

  .nachricht .a-foto img.a-fotoecht {
    display:block; width:100%; height:auto;
    border-radius:10px; border:1px solid #3a3a3a;
    filter:grayscale(1);
  }

  .nachricht .a-foto.a-fotoklein { width:110px; max-width:100%; }

#ov-karte {
  position:fixed; inset:0; z-index:400;
  background:rgba(8,8,8,.94);
  display:flex; align-items:safe center; justify-content:safe center; overflow-y:auto;
  opacity:0; transition:opacity .25s ease;
}
#ov-karte.aktiv { opacity:1; }
#ov-karte .kartenbox {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  width:min(92vw, calc(860px * var(--scale)), calc((92vh - 4rem) * 776 / 521));
  width:min(92vw, calc(860px * var(--scale)), calc((92dvh - 4rem) * 776 / 521));
  will-change:transform;
}
#ov-karte .kartensvg { display:block; width:100%; height:auto; }
#ov-karte .kartenfenster { width:100%; }
@media (max-width: 760px){
  #ov-karte .kartenfenster {
    overflow:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    max-height:calc(94vh - 6rem);
    max-height:calc(94dvh - 6rem);
    touch-action:pan-x pan-y;
  }
  #ov-karte .kartenfenster .kartensvg { width:230%; }
  #ov-karte .kartensvg .marker .klickkasten { animation:kartekasten 2.6s ease-in-out infinite; }
  @keyframes kartekasten {
    0%,100% { stroke-width:1.6; opacity:.85; }
    50%     { stroke-width:2.5; opacity:1; }
  }
  #ov-karte .kartensvg .marker .punkt {
    transform-box:fill-box; transform-origin:center;
    animation:kartepunkt 2.6s ease-in-out infinite;
  }
  @keyframes kartepunkt { 50% { transform:scale(1.55); } }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce){
  #ov-karte .kartensvg .marker .punkt { animation:none; }
  #ov-karte .kartensvg .marker .klickkasten { animation:none; stroke-width:2.1; }
}
#ov-karte .karte-dreh { display:none; }
#ov-karte.handy { flex-direction:column; gap:.6rem; }
#ov-karte.handy .karte-dreh { order:-1; }
#ov-karte.handy .karte-dreh {
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:30px 24px 26px; text-align:center;
}
#ov-karte.handy .kd-wort {
  font-family:var(--s-regie); font-size:calc(var(--barlow) * .85); letter-spacing:.14em;
  text-transform:uppercase; color:#b4b4b4;
}
#ov-karte.handy .kd-handy {
  display:block; width:34px; height:60px; border:2px solid #8a8a8a; border-radius:7px; position:relative;
  animation:kdHandyDrehen 3.2s ease-in-out infinite;
}
/* die Rechner-Zeile unter der Anweisung: leiser als sie, damit die
   Anweisung die Ansage bleibt und das hier nur der Hinweis ist, wo am
   Rechner die Hand fehlt. Steht nur im Rahmen (game.js baut sie dort). */
#ov-karte.handy .kd-rechner {
  font-family:var(--s-regie); font-size:calc(var(--barlow) * .62); letter-spacing:.14em;
  text-transform:uppercase; color:#6f6f6f; margin-top:-10px;
}
#ov-karte.handy .karte-dreh { cursor:pointer; }
#ov-karte.handy .kd-handy::after { content:''; position:absolute; left:50%; bottom:5px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#8a8a8a; }
@keyframes kdHandyDrehen { 0%,25% { transform:rotate(0); } 55%,80% { transform:rotate(-90deg); } 100% { transform:rotate(0); } }
#ov-karte.handy.zurueck .kd-handy { animation-name:kdHandyZurueck; }
@keyframes kdHandyZurueck { 0%,25% { transform:rotate(-90deg); } 55%,80% { transform:rotate(0); } 100% { transform:rotate(-90deg); } }
@media (prefers-reduced-motion: reduce){
  #ov-karte.handy .kd-handy { animation:none; transform:rotate(-90deg); }
  #ov-karte.handy.zurueck .kd-handy { animation:none; transform:rotate(0); }
}
#ov-karte.handy:not(.liegt) .kartenfenster { display:none; }
#ov-karte.handy:not(.liegt) .kartenbox { width:auto; }
#ov-karte.handy:not(.liegt) .kartenlage { display:none; }
/* HOCHKANT STEHT NUR DIE ANWEISUNG (Laura, 25.08.26): "wenn man das
   Handy querdrehen muss, dann darf da nicht noch der Button zumachen
   stehen, weil sonst klicken Menschen auf zumachen und dann kommen sie
   gar nicht bis zur Kartenszene". Also faellt ZUMACHEN weg, solange das
   Blatt zugeklappt ist; quer kommt es zurueck. Die anderen Ausgaenge
   (Tipp daneben, Escape, Zurueck-Geste) sperrt game.js, sonst waere das
   Loch nur verschoben. Der einzige Weg weiter ist das Drehen. */
#ov-karte.handy:not(.liegt) .kartenzu { display:none; }
#ov-karte.handy.liegt {
  align-items:center; justify-content:center; overflow:hidden; z-index:520;
  height:100vh;
  height:100svh; bottom:auto;
}
#ov-karte.handy.liegt .kartenbox { width:auto; height:100vh; height:100svh; gap:0; display:block; }
#ov-karte.handy.liegt .kartenfenster { height:100%; }
#ov-karte.handy.liegt .kartensvg { height:100%; width:auto; max-width:100vw; }
/* ZUMACHEN SITZT UNTEN RECHTS (Laura, 26.08.26: "zumachen wandert nach
   unten rechts"). Oben rechts lag es millimetergenau unter dem
   Fragezeichen (dasselbe top 10 / right 12, nur auf z-index 560): der
   Tipp auf den einzigen Ausgang der Karte ging an die Meldung. Die
   liegende Karte bekommt als einziges Geraet KEINEN Kopfstreifen, sie
   braucht jeden Pixel Hoehe; hier weicht der Knopf aus, nicht die
   Karte. Unten rechts, weil links unten der Daumen der anderen Hand
   liegt und die Karte dort ihre Punkte hat. */
#ov-karte.handy.liegt .kartenzu {
  position:absolute; top:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); right:calc(12px + env(safe-area-inset-right, 0px)); z-index:4;
  background:#f2efe8; border-color:#5a5852; color:#5a5852;
}
#ov-karte.handy.liegt .karte-dreh { display:none; }
#ov-karte.handy.liegt.zurueck .karte-dreh {
  display:flex; position:absolute; inset:0; z-index:5; justify-content:center;
  background:rgba(8,8,8,.9);
}
#ov-karte.handy.liegt.zurueck .kartenlage { display:none; }
#ov-karte.handy.liegt.tiefe .kartenbox { filter:none; }
#ov-karte.handy.liegt .stadtkarte.nebenpunkt { position:absolute; margin:0; padding:10px 14px; max-width:240px; }
#ov-karte.handy.liegt .stadtkarte.nebenpunkt .sk-titel { font-size:calc(20px * var(--scale) / 1.33); }
#ov-karte.handy.liegt .kartensvg .marker .klickkasten { animation:kartekastenQ 2.6s ease-in-out infinite; }
@keyframes kartekastenQ { 0%,100% { stroke-width:1.6; opacity:.85; } 50% { stroke-width:2.5; opacity:1; } }
#ov-karte.handy.liegt .kartensvg .marker .punkt { transform-box:fill-box; transform-origin:center; animation:kartepunktQ 2.6s ease-in-out infinite; }
@keyframes kartepunktQ { 50% { transform:scale(1.55); } }
@media (prefers-reduced-motion: reduce){
  #ov-karte.handy.liegt .kartensvg .marker .klickkasten { animation:none; stroke-width:2.1; }
  #ov-karte.handy.liegt .kartensvg .marker .punkt { animation:none; }
}
#ov-karte .kartenbox { transition:filter .18s ease; }
#ov-karte.tiefe .kartenbox { filter:blur(2px) brightness(.82); }
#ov-karte .kartenlage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
#ov-karte .stadtkarte {
  pointer-events:auto; zoom:var(--ding);
  width:fit-content; max-width:min(calc(70vw / var(--ding)), calc(280px * var(--scale)));
  padding:14px 18px; text-align:center;
  background:#fbf7ee; border:none; border-radius:1px;
  box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38);
  font-family:'Patrick Hand', cursive; color:#1f1d1a;
  --kipp:rotate(-1.4deg);
  opacity:0; transform:var(--kipp) scale(.96); transition:opacity .14s ease, transform .14s ease;
}
#ov-karte .stadtkarte.auf { opacity:1; transform:var(--kipp) scale(1); }
#ov-karte .stadtkarte.still { transition:none; transform:var(--kipp); }
#ov-karte .stadtkarte.rueckblick { max-width:min(calc(82vw / var(--ding)), calc(410px * var(--scale))); text-align:left; }
#ov-karte .stadtkarte.rueckblick .sk-titel { text-align:center; }
#ov-karte .sk-lauf { margin-top:.4rem; display:grid; }
#ov-karte .sk-r {
  grid-area:1 / 1;
  font-size:calc(15.5px * var(--scale)); line-height:1.45;
  color:#1f1d1a;
  opacity:0; transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease;
}
#ov-karte .sk-r.kommt { transform:translateY(4px); }
#ov-karte .sk-r.da {
  opacity:1; transform:none;
  transition:opacity .26s ease .14s, transform .26s ease .14s;
}
#ov-karte .sk-r.ich { color:#6e6a62; }
#ov-karte .stadtkarte.rueckblick .sk-pfeil {
  width:26px; height:26px; margin:.45rem 0 0 auto;
  color:#6e6a62;
  display:flex; align-items:center; justify-content:center;
  animation:skWeiter 1.4s ease-in-out infinite;
}
#ov-karte .stadtkarte.rueckblick .sk-pfeil svg { width:15px; height:auto; display:block; }
@keyframes skWeiter { 50% { opacity:.25; } }
#ov-karte .stadtkarte.lockt { cursor:pointer; animation:skLockt 2s ease-in-out infinite; }
@keyframes skLockt {
  0%,100% { box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38), 0 0 0 0 rgba(31,29,26,0); }
  50%     { box-shadow:0 1px 2px rgba(16,14,10,.26), 0 9px 20px rgba(0,0,0,.38), 0 0 0 3px rgba(31,29,26,.16); }
}
#ov-karte .stadtkarte.still.lockt { animation:none; }
#ov-karte .stadtkarte.still .sk-r { transition:none; transform:none; }
#ov-karte .stadtkarte.still.rueckblick .sk-pfeil { animation:none; }
#ov-karte .sk-titel { font-size:calc(20px * var(--scale)); line-height:1.25; }
#ov-karte .sk-mehr { margin-top:.6rem; font-family:var(--s-regie); font-size:calc(11px * var(--scale)); letter-spacing:.16em; color:#6e6a62; }
#ov-karte .sk-zeile { font-size:calc(16px * var(--scale)); line-height:1.35; margin-top:.15rem; }
#ov-karte .sk-gross { font-size:calc(34px * var(--scale)); line-height:1.1; margin-top:.1rem; }
#ov-karte .sk-kringelwort { position:relative; display:inline-block; }
#ov-karte .sk-kringel { position:absolute; left:-14%; width:128%; top:50%; height:calc(30px * var(--scale)); transform:translateY(-50%) rotate(-2deg); overflow:visible; pointer-events:none; }
#ov-karte .sk-kringel path { fill:none; stroke:#ef6aa8; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
#ov-karte .sk-strichwort { position:relative; display:inline-block; }
#ov-karte .sk-strich { position:absolute; left:-6%; width:112%; top:50%; height:8px; transform:translateY(-50%) rotate(-3deg); overflow:visible; }
#ov-karte .sk-strich path { fill:none; stroke:#2a2723; stroke-width:1.6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.kartenzu {
  font-size:calc(.68rem * var(--scale)); letter-spacing:.2em;
  padding:.4rem 1.4rem; background:#0a0a0a; border:1px solid #333; color:#777; cursor:pointer;
}
.kartenzu:hover { border-color:#888; color:#ddd; }
.kartenrolle { display:flex; gap:2.4rem; justify-content:center; flex-wrap:wrap; padding:.6rem 0; position:relative; }
.kartenrolle .blackbox.ding { width:calc(150px * var(--scale)); }
.karteziehbar { cursor:grab; touch-action:none; }
.karteziehbar:active { cursor:grabbing; }
@keyframes kartetick { 0%,100% { transform:none; } 38% { transform:translateY(-3px) rotate(-1.6deg); } }
.kartenrolle .tickt { animation:kartetick .32s ease; }
@media (prefers-reduced-motion: reduce){
  #ov-karte { transition:none; }
  #ov-karte .stadtkarte { transition:none; transform:var(--kipp); }
  #ov-karte .sk-r { transition:none; transform:none; }
  #ov-karte .stadtkarte.rueckblick::after,
  #ov-karte .stadtkarte.lockt, #ov-karte .stadtkarte.lockt::after { animation:none; }
  .kartenrolle .tickt { animation:none; }
}
.kartenrolle .blackbox {
  background:transparent; border:none; color:#777;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.3rem;
  font-size:.72rem; letter-spacing:.14em;
  user-select:none; -webkit-user-select:none;
}

#kegel {
  position:fixed; inset:0; pointer-events:none; z-index:300;
  display:none;
  background:radial-gradient(ellipse var(--kegel-w, calc(330px * var(--scale))) var(--kegel-h, calc(330px * var(--scale)))
    at var(--kx, 50%) var(--ky, 50%),
    rgba(8,8,8,0) 0, rgba(8,8,8,0) var(--kegel-kern, 56.5%), rgba(8,8,8,.89) 100%);
  transition:opacity .6s ease;
}
body.dunkel #kegel { display:block; }

.funke {
  width:16px; height:16px; border:2px solid #9aa6b0; border-radius:50%;
  cursor:pointer; background:rgba(200,212,224,.14);
  box-shadow:0 0 5px 1px rgba(200,214,228,.32);
  animation:funkeLeben var(--fdur, 4.6s) ease-in-out var(--fdelay, 0s) infinite;
  will-change:transform;
}
@keyframes funkeLeben {
  0%   { transform:translate(0,0) scale(1); }
  20%  { transform:translate(var(--fx1,0), var(--fy1,0)) scale(1.28); }
  45%  { transform:translate(var(--fx2,0), var(--fy2,0)) scale(.9); }
  70%  { transform:translate(var(--fx3,0), var(--fy3,0)) scale(1.16); }
  100% { transform:translate(0,0) scale(1); }
}
.funke:hover { box-shadow:0 0 8px 2px rgba(222,234,246,.5); }
.funke.still {
  animation:none; transform:scale(1);
  background:#fff; border-color:#fff; box-shadow:0 0 9px 3px rgba(255,255,255,.55);
  pointer-events:none;
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
@media (prefers-reduced-motion: reduce){ .funke { animation:none; } }
@media (pointer:coarse){
  .funke::after { content:''; position:absolute; inset:-14px; border-radius:50%; }
}

#walbogen {
  width:calc(130px * var(--scale)); height:calc(90px * var(--scale)); margin:0 auto;
  transition:width .7s ease, height .7s ease;
  touch-action:none; text-align:center;
  cursor:default; position:relative;
}
#walbogen.offen1 { width:calc(190px * var(--scale)); height:calc(160px * var(--scale)); }
#walbogen.offen2 { width:calc(240px * var(--scale)); height:calc(240px * var(--scale)); }
#walbogen.offen3 { width:calc(300px * var(--scale)); height:calc(320px * var(--scale)); }
#walbogen.als-svg { border-color:transparent; color:transparent; }
#walbogen.ziehbar { cursor:grab; }
#walbogen.ziehbar:active { cursor:grabbing; }

.bogenhalter { display:flex; justify-content:center; position:relative; }

#k1zettel {
  position:fixed; inset:0; z-index:420; pointer-events:none;
  transition:opacity .8s ease;
}
#k1zettel.weg { opacity:0; }
.k1streifen {
  position:absolute; left:50%; width:min(27rem, calc(82vw / var(--ding)));
  zoom:var(--ding);
  background:#e8e2d4; color:#1e1b16;
  font-family:'Patrick Hand', cursive;
  font-size:1.12rem; line-height:1.45; letter-spacing:.01em;
  padding:.6rem .95rem;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1);
  clip-path:polygon(0% 6%,4% 0%,17% 5%,31% 1%,46% 6%,60% 1%,74% 5%,88% 0%,100% 5%,
                    100% 95%,89% 100%,73% 95%,58% 100%,43% 95%,28% 100%,14% 95%,3% 100%,0% 94%);
}
.k1streifen.da { opacity:1; }
.k1streifen.k1klein {
  width:min(13rem, calc(30vw / var(--ding))); padding:.3rem .5rem;
  font-size:.74rem; opacity:0;
}
.k1streifen.k1klein.da { opacity:.94; }
@media (prefers-reduced-motion: no-preference){
  .k1streifen {
    transition:opacity .55s ease, transform .6s cubic-bezier(.2,.8,.3,1),
               left .6s cubic-bezier(.2,.8,.3,1), top .6s cubic-bezier(.2,.8,.3,1),
               width .6s ease, font-size .6s ease;
  }
}
@media (prefers-reduced-motion: reduce){
  .k1streifen { transition:opacity .2s ease; }
}

#dunkelraum {
  position:fixed; inset:0; z-index:360; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse var(--funk-w, 264px) var(--funk-h, 264px) at var(--kx,50%) var(--ky,50%), #000 0, #000 62.5%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse var(--funk-w, 264px) var(--funk-h, 264px) at var(--kx,50%) var(--ky,50%), #000 0, #000 62.5%, rgba(0,0,0,0) 100%);
  transition:opacity .6s ease;
}
body:not(.dunkel) #dunkelraum { opacity:0; }
#dunkelraum .funke {
  position:absolute; pointer-events:auto;
  transition:box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
#dunkelraum .staubk {
  position:absolute; border-radius:50%;
  background:#343434; opacity:.55; pointer-events:none;
  animation:staubDrift var(--sdur,10s) ease-in-out var(--sdelay,0s) infinite;
}
@keyframes staubDrift {
  0%,100% { transform:translate(0,0); }
  50%     { transform:translate(var(--sx,0), var(--sy,0)); }
}
@media (prefers-reduced-motion: reduce){ #dunkelraum .staubk { display:none; } }

.walruck { animation:walruck .38s ease; }
@keyframes walruck {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  30%     { transform:translate(0, calc(7px * var(--scale))) rotate(1.4deg); }
  62%     { transform:translate(0, calc(2px * var(--scale))) rotate(-.9deg); }
}

#schwarmraum { position:fixed; inset:0; z-index:361; pointer-events:none; transition:opacity .6s ease; }
body:not(.dunkel) #schwarmraum { opacity:0; }
.funkeKlein {
  position:absolute; border-radius:50%;
  background:rgba(216,228,242,.92);
  box-shadow:0 0 calc(7px * var(--scale)) calc(1px * var(--scale)) rgba(205,220,240,.45);
  opacity:.35;
  transition:opacity .45s ease;
  animation:funkeLeben var(--fdur,5s) ease-in-out var(--fdelay,0s) infinite;
  will-change:transform;
}
.funkeIhr {
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(224,123,47,.95);
  box-shadow:0 0 calc(11px * var(--scale)) calc(2px * var(--scale)) rgba(224,123,47,.62);
  opacity:.72;
  animation:funkeLeben var(--fdur,5s) ease-in-out var(--fdelay,0s) infinite;
  will-change:transform;
}
.funkeKlein.imlicht { opacity:1; }
.funkeKlein.weg { opacity:0 !important; transition:opacity 1.8s ease; }
.bonfetzen {
  position:absolute; z-index:3; pointer-events:none;
  width:calc(44px * var(--scale)); height:calc(11px * var(--scale));
  background:#dfddd6; border-radius:1px;
}
.bonmini {
  position:absolute; left:50%; top:52%; z-index:2; pointer-events:none;
  width:calc(34px * var(--scale)); height:calc(22px * var(--scale));
  background:#c9c6bd; border-radius:1px;
  background-image:repeating-linear-gradient(0deg, transparent 0 4px, rgba(60,60,60,.35) 4px 5px);
  transform:translate(-50%,-160%) rotate(-4deg); opacity:0;
  transition:transform .7s ease, opacity .7s ease;
}
.bonmini.liegt { transform:translate(-50%,-50%) rotate(-4deg); opacity:.9; }
@media (prefers-reduced-motion: reduce){
  .funkeKlein { animation:none; opacity:.25; }
  .funkeIhr { animation:none; opacity:.42; }
  .walruck { animation:none; }
  .bonmini { transition:none; }
}

#bonslots, #bonpool { display:flex; flex-direction:column; gap:.35rem; padding:.5rem 0; }
.bonslot { height:calc(36px * var(--ding)); width:min(calc(270px * var(--ding)), 90%); margin:0 auto; border:1px dashed #333; position:relative; }
.slothint {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#3f3f3f; font-size:calc(.62rem * var(--ding)); letter-spacing:.2em;
  pointer-events:none;
}
.bonslot .bonstreifen { margin:0; }
.bonstreifen {
  height:calc(36px * var(--ding)); width:min(calc(270px * var(--ding)), 90%); margin:0 auto;
  border:1px solid #4a4a4a; background:#0c0c0c;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none;
  font-family:ui-monospace, monospace;
  font-size:calc(.72rem * var(--ding)); color:#ccc;
  font-variant-numeric:tabular-nums; letter-spacing:.06em;
  white-space:pre;
}
.bonstreifen.fest { cursor:default; border-color:#666; }
.haltebalken {
  position:absolute; left:0; bottom:0; height:4px; width:0;
  background:#cfcfcf; pointer-events:none; z-index:4;
}
.haltend { border-color:#999 !important; }
.gehalten { border-color:#eee !important; }
.geist { opacity:.5; filter:blur(.4px); transition:opacity .9s, filter .9s; }
.bonstreifen .geist { opacity:.44; filter:blur(1.45px); }
.geist.entwickelt { opacity:.95; filter:blur(0); }

.kurbelbox { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.4rem 0; }
.kurbelknopf {
  width:calc(128px * var(--scale)); height:calc(128px * var(--scale)); position:relative;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.kurbelknopf:active { cursor:grabbing; }
.kurbelknopf:focus { outline:none; }
.kurbelknopf:focus-visible { outline:1px solid #888; outline-offset:6px; }
.kurbelsvg { width:100%; height:100%; display:block; overflow:visible; }
.kurbelsvg .ring-bg   { fill:none; stroke:#2a2a2a; stroke-width:4; }
.kurbelsvg .ring-fort { fill:none; stroke:#ccc; stroke-width:4; stroke-linecap:round; }
.kurbelsvg .nabe      { fill:#0a0a0a; stroke:#3a3a3a; stroke-width:2; }
.kurbelsvg .griff line   { stroke:#999; stroke-width:4; stroke-linecap:round; }
.kurbelsvg .griff .knauf { fill:#111; stroke:#ddd; stroke-width:3; }
.kurbelknopf.fertig .ring-fort { stroke:#fff; }
.kurbelknopf.fertig .griff line, .kurbelknopf.fertig .griff .knauf { stroke:#fff; }
.kurbeltext { color:#777; font-size:calc(.62rem * var(--scale)); letter-spacing:.2em; text-align:center; }

.ausloeserbox { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.4rem 0; }
.ausloeserknopf {
  width:calc(110px * var(--scale)); height:calc(110px * var(--scale));
  cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none;
}
.ausloeserknopf:focus { outline:none; }
.ausloeserknopf:focus-visible { outline:1px solid #888; outline-offset:6px; }
.ausloesersvg { width:100%; height:100%; display:block; }
.ausloesersvg .fassung    { fill:none; stroke:#2a2a2a; stroke-width:4; }
.ausloesersvg .gewinde    { fill:#0d0d0d; stroke:#3a3a3a; stroke-width:1.5; }
.ausloesersvg .kappe      { fill:#111; stroke:#999; stroke-width:2.5; transition:transform .12s, fill .12s; transform-box:fill-box; transform-origin:center; }
.ausloesersvg .kappenrand { fill:none; stroke:#3a3a3a; stroke-width:1; transition:transform .12s; transform-box:fill-box; transform-origin:center; }
.ausloeserknopf:hover .kappe { stroke:#ccc; }
.ausloeserknopf.gedrueckt .kappe, .ausloeserknopf.gedrueckt .kappenrand { transform:scale(.88); }
.ausloeserknopf.gedrueckt .kappe { fill:#0a0a0a; }
.ausloeserknopf.ausgeloest { opacity:.5; cursor:default; pointer-events:none; }

#blitz {
  position:fixed; inset:0; background:#fff;
  opacity:0; pointer-events:none; z-index:800;
}
#blitz.an { opacity:1; }
#blitz.aus { opacity:0; transition:opacity .7s; }

#fotogeraet{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:240;
  aspect-ratio:24 / 34; width:auto;
  height:min(724px, 94dvh, calc(92vw * 34 / 24));
  background:#0a0a0a; border:2px solid #444; border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  text-shadow:0 0 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.85), 0 1px 14px rgba(0,0,0,.7);
}
#fotogeraet.sinkt{
  opacity:0; transform:translate(-50%,-50%) translateY(26px) scale(.97);
  transition:opacity .8s ease, transform .8s ease;
  pointer-events:none;
}
.fghandystatus{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:.32rem .95rem; font-size:.62rem; letter-spacing:.04em; color:#8a8a8a;
  font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  border-bottom:1px solid #202020; position:relative; z-index:6;
}
.fghandystatus .fguhr, .fghandystatus .fgakku{ font-variant-numeric:tabular-nums; }
.fghandystatus svg{ display:block; }
.fgkopf{
  flex:0 0 auto; position:relative; z-index:6;
  display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
  padding:.5rem .95rem .35rem;
  font-family:var(--s-regie);
  font-size:calc(var(--barlow) * .62); letter-spacing:.18em; text-transform:uppercase;
  color:#c9c9c9;
}
.fgkopf .fgmonat{ color:#8f8f8f; }
.fginnen{ position:relative; flex:1 1 auto; min-height:0; }
.fgbild{ position:absolute; inset:0; z-index:1; overflow:hidden;
         pointer-events:none; background:var(--buehne); }
.fgbild .fglage{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:min(100%, calc(38rem * var(--scale)));
  opacity:0; transition:opacity 1.5s ease;
  -webkit-mask-image:radial-gradient(118% 104% at 50% 50%, #000 52%, transparent 100%);
          mask-image:radial-gradient(118% 104% at 50% 50%, #000 52%, transparent 100%);
}
.fgbild .fglage.da{ opacity:1; }
.fgbild .fglage img, .fgbild .fglage video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1);
}
.fgbild .fgschleier{
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(122% 80% at 50% 40%,
    rgba(8,8,8,.36) 0%, rgba(8,8,8,.80) 64%, rgba(8,8,8,.95) 100%);
}
.fgdruck{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.fgdruck > *{ pointer-events:auto; }
.fginnen > .ausloeserbox{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  padding:0 0 1.1rem;
  background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
}
.fginnen > .ausloeserbox .ausloeserknopf{ width:84px; height:84px; }
.fginnen > .ausloeserbox .kurbeltext{ font-size:.62rem; color:#e8e8e8; }
@media (prefers-reduced-motion: reduce){
  #fotogeraet.sinkt{ transition:none; }
  .fgbild .fglage{ transition:none; }
}
.frdruck {
  position:absolute; z-index:4;
  background:none; border:0; padding:0; margin:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.frdruck:focus { outline:none; }
.frdruck:focus-visible { outline:1px solid #999; outline-offset:3px; }
.frring {
  position:absolute; left:60%; top:56%; transform:translate(-50%,-50%);
  width:13px; height:13px; border-radius:50%;
  border:1px solid #141414;
  opacity:.28;
  animation:frringatmet 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes frringatmet {
  0%, 100% { opacity:.30; transform:translate(-50%,-50%) scale(1); }
  50%      { opacity:.78; transform:translate(-50%,-50%) scale(1.13); }
}
.frdruck.gedrueckt { cursor:default; pointer-events:none; }
.frdruck.gedrueckt .frring { opacity:0; animation:none; transition:opacity .5s ease; }
@media (prefers-reduced-motion: reduce){
  .frring { animation:none; opacity:.42; }
}
@media (max-width:700px){
  /* derselbe Kopfstreifen wie beim Handy (Laura, 26.08.26): Kamera und
     Fotorolle sind dasselbe Geraet in Vollbild, ihr Akku lag bisher
     unter dem Wort NEUSTART. Die Sicherheitszone steckt im top und
     nicht mehr im padding, sonst zaehlte sie zweimal. */
  #fotogeraet {
    left:0; top:calc(var(--kopf) + env(safe-area-inset-top, 0px)); transform:none; width:100vw;
    height:calc(100vh - var(--kopf) - env(safe-area-inset-top, 0px));
    height:calc(100dvh - var(--kopf) - env(safe-area-inset-top, 0px));
    aspect-ratio:auto;
    border:0; border-radius:0; z-index:400;
    box-sizing:border-box;
    animation:handyHoch .32s cubic-bezier(.32,.72,0,1) both;
  }
  #fotogeraet.sinkt { transform:translateY(6%) scale(1); }
  #fotogeraet .fghandystatus { min-height:30px; border-bottom:0; font-size:.78rem; color:#7a7a7a; }
  #fotogeraet .fghandystatus .fguhr { color:#a8a8a8; }
  #fotogeraet .fgkopf { padding:.6rem 1.1rem .5rem; font-size:calc(.7rem * var(--ts)); border-bottom:1px solid #1d1d20; }
  .fginnen > .ausloeserbox { padding-bottom:calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
  @media (prefers-reduced-motion: reduce){ #fotogeraet { animation:none; } }
}