: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; }


#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:'IBM Plex Mono', 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; }

  .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; }

  .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(.85rem * var(--ts)); 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;
}
#ov-karte.handy .kd-rechner {
  font-family:var(--s-regie); font-size:calc(.62rem * var(--ts)); 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; }
#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; }
#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(10.5px * 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:'IBM Plex Mono', 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(.62rem * var(--ts)); 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){
  #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; } }
}