/* Boje: Hinweis auf das Spiel SQL Server Iceberg im Hero der Startseite (Prototyp, Plaene/Startseite-Iceberg-Boje.md).
   Release nur mit assets/data/boje.json "freigegeben": true. Wird nicht blockierend geladen; bis dahin halten
   die Elemente ihr hidden-Attribut (kein Aufblitzen ungestalteter Inhalte, kein Layoutsprung: alles absolut positioniert). */

/* ---------- Desktop: Plakette unten rechts auf dem Hafenfoto ---------- */
.boje{position:absolute;z-index:1;right:clamp(24px,3.2vw,64px);bottom:clamp(28px,6vh,72px);width:248px;
  display:block;color:#fff;text-decoration:none;border-radius:18px;-webkit-tap-highlight-color:transparent}
.boje-glas{display:block;padding:9px 9px 13px;border-radius:18px;background:linear-gradient(180deg,rgba(10,43,66,.42),rgba(5,28,44,.62));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 50px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  transition:border-color .3s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.boje:hover .boje-glas{border-color:rgba(240,125,26,.6);transform:translateY(-3px);box-shadow:0 28px 60px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.boje:focus-visible{outline:none}
.boje:focus-visible .boje-glas{outline:2px solid var(--orange);outline-offset:3px}

/* Bildfläche: SVG (Stufe A) oder Canvas (Stufe B) */
.boje-bild{position:relative;display:block;width:228px;height:128px;border-radius:11px;overflow:hidden;
  background:linear-gradient(180deg,rgba(156,203,234,.10) 0%,rgba(156,203,234,.02) 30%,rgba(3,22,36,.0) 30%)}
.boje-bild svg,.boje-bild canvas{position:absolute;inset:0;width:228px;height:128px;display:block}
.boje-bild canvas{opacity:0;transition:opacity 1.4s var(--ease)}
.boje[data-stufe="b"] .boje-bild canvas{opacity:1}
.boje-svg-weg{transition:opacity 1.4s var(--ease)}
.boje[data-stufe="b"] .boje-svg-weg{opacity:0}

/* Text */
.boje-text{display:block;padding:10px 6px 0}
.boje-kicker{display:flex;align-items:center;gap:8px;font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9ccbea}
.boje-kicker::before{content:"";width:16px;height:2px;background:var(--orange)}
.boje-titel{display:block;margin-top:7px;font:600 1.14rem/1.1 var(--display);letter-spacing:.005em;color:#fff}
.boje-frage{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;font:500 .86rem/1.3 var(--text);color:#cfe3f1}
.boje-frage .arr{color:var(--orange);font-weight:700;transition:transform .3s var(--ease)}
.boje:hover .boje-frage .arr{transform:translateX(4px)}

/* Tiefenanzeige (läuft synchron zum sinkenden Punkt) */
@property --boje-m{syntax:'<integer>';inherits:false;initial-value:0}
.boje-tiefe{position:absolute;left:7px;top:29px;font:600 .62rem/1 var(--mono);color:#ffb680;letter-spacing:.02em;
  counter-reset:bm var(--boje-m);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.boje-tiefe::after{content:counter(bm) "\2009m"}

/* ---------- Bewegung (nur ohne reduzierte Bewegung) ---------- */
/* Ein Zyklus = 9 s: Punkt sinkt von der Wasserlinie bis 448 m, blendet unten aus und oben wieder ein (keine Haltephase). */
@keyframes boje-sinken{0%{transform:translateY(0);opacity:0}7%{opacity:1}90%{opacity:1}100%{transform:translateY(82px);opacity:0}}
@keyframes boje-zaehlen{0%{--boje-m:0;opacity:0}7%{opacity:1}90%{opacity:1}100%{--boje-m:448;opacity:0}}
@keyframes boje-welle{to{transform:translateX(-40px)}}
@keyframes boje-schaukeln{0%{transform:translateY(-1.2px) rotate(-.7deg)}100%{transform:translateY(1.2px) rotate(.7deg)}}
@keyframes boje-ein{from{opacity:0;transform:translateY(14px)}}
@keyframes boje-tiefe-weg{to{translate:0 82px}}
@media (prefers-reduced-motion:no-preference){
  .boje-glas{animation:boje-ein .9s var(--ease) .5s both}
  .boje-punkt{animation:boje-sinken 9s linear infinite}
  .boje-tiefe{animation:boje-zaehlen 9s linear infinite,boje-tiefe-weg 9s linear infinite}
  .boje-welle{animation:boje-welle 3.2s linear infinite}
  .boje-welle-2{animation-duration:4.6s}
  .boje-berg{transform-box:view-box;transform-origin:126px 34px;animation:boje-schaukeln 3.6s ease-in-out infinite alternate}
}
/* Statisch: Punkt in mittlerer Tiefe, Anzeige ohne Zahl */
@media (prefers-reduced-motion:reduce){
  .boje-punkt{transform:translateY(46px)}
  .boje-tiefe{display:none}
}

/* ---------- Ausblenden beim Weiterscrollen (Hero-Inhalt weicht in den ersten ~30 % der Hero-Strecke) ---------- */
@keyframes boje-weg{to{opacity:0;visibility:hidden}}
@supports (animation-timeline:scroll()){
  .boje,.boje-zeile{animation:boje-weg linear both;animation-timeline:scroll(root block);animation-range:0 28vh}
}

/* ---------- Mobil und schmale Fenster: eine Textzeile unter den Knöpfen, ohne Animation ----------
   Sie steht dort, wo sonst der Scroll-Hinweis sitzt (zwischen Knöpfen und Hinweis ist auf Telefonen kein Platz), und ersetzt ihn.
   Absolut positioniert: kein Layoutsprung, wenn boje.css erst nach dem ersten Bild ankommt. Niedrige Fenster: keine Boje. */
.boje-zeile{display:none}
@media (max-width:960px),(max-height:639px){.boje{display:none}}
@media (max-width:960px) and (min-height:560px){
  .boje-zeile{position:absolute;z-index:2;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;
    max-width:calc(100vw - 32px);white-space:nowrap;padding:8px 14px;border-radius:999px;font:500 .8rem/1.2 var(--text);color:#e4eef5;
    text-decoration:none;background:rgba(5,28,44,.5);border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .hero-sticky:has(.boje-zeile) .scroll-hint{display:none}
  .boje-zeile b{font-weight:600;color:#fff}
  .boje-zeile .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(240,125,26,.25);flex:none}
  .boje-zeile .arr{color:var(--orange);font-weight:700}
  .boje-zeile:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
}
@media (max-width:380px){.boje-zeile{font-size:.74rem;padding:7px 12px}}