/* Menni Becken: Großbild (becken.php) und Becken-Modus im Studio (studio.php?becken=…).
   Alle Klassen mit Präfix bk-, weil menni.css und seiten.css gleichnamige Klassen haben. Keine externen Schriften. */

@font-face{
  font-family:Archivo; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url("../fonts/archivo.woff2") format("woff2");
}
@font-face{
  font-family:"Permanent Marker"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/permanent-marker-latin.woff2") format("woff2");
}

.bk-vh{ position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0 }
.bk-symbole{ position:absolute; width:0; height:0; overflow:hidden }

/* ---------- Gemeinsame Knöpfe ---------- */
.bk-pille{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px;
  border:2px solid #8B004A; border-radius:999px; background:#8B004A; color:#fff; text-decoration:none;
  font:inherit; font-weight:750; font-size:1rem; line-height:1.1; cursor:pointer; touch-action:manipulation;
}
.bk-pille--rand{ background:transparent; color:#8B004A }
.bk-pille:focus-visible, .bk-knopf:focus-visible, .bk-rund:focus-visible, .bk-welt:focus-visible,
.bk-band button:focus-visible, .bk-code-feld:focus-visible{ outline:3px solid #1D1419; outline-offset:3px }

/* ---------- Großbild ---------- */
html:has(.bk-seite), .bk-seite{ height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:#0a3d6b }
.bk{
  --bk-rand:clamp(10px, 2.2vmin, 36px);
  --bk-qr:clamp(104px, 25vmin, 340px);
  position:fixed; inset:0; overflow:hidden; color:#1D1419;
  font-family:Archivo, system-ui, -apple-system, "Segoe UI", sans-serif; font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent;
}
.bk *, .bk *::before, .bk *::after{ box-sizing:border-box }
.bk :where(p, h2, ul){ margin:0; padding:0 }
.bk :where(ul){ list-style:none }
.bk [hidden]{ display:none !important }
.bk-szene{ position:absolute; inset:0 }
.bk-knopf svg, .bk-rund svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; flex:none }

/* Tafel mit QR-Code und Raumcode: aus 3 bis 4 m lesbar (Code rund 8 % der Bildhöhe) */
.bk-tafel{
  position:absolute; right:var(--bk-rand); bottom:var(--bk-rand); z-index:3;
  display:flex; align-items:center; gap:clamp(10px, 2.2vmin, 32px);
  max-width:calc(100% - 2 * var(--bk-rand));
  padding:clamp(10px, 1.8vmin, 26px); background:#F2EFE7; border-radius:clamp(16px, 2.6vmin, 34px);
  box-shadow:0 14px 40px rgba(10,20,40,.35), 0 2px 8px rgba(10,20,40,.2);
}
.bk-qr{ width:var(--bk-qr); height:var(--bk-qr); flex:none; background:#fff; border-radius:clamp(8px, 1.2vmin, 16px); overflow:hidden }
.bk-qr svg, .bk-weiter__qr svg{ display:block; width:100%; height:100%; stroke:none }
.bk-tafel__text{ display:grid; gap:clamp(4px, 1vmin, 14px); min-width:0 }
.bk-tafel__titel{
  justify-self:start; transform:rotate(-1.5deg);
  font-size:clamp(1rem, 3.4vmin, 2.8rem); line-height:1; font-weight:800; font-variation-settings:"wdth" 72, "wght" 800;
  text-transform:uppercase; background:#8B004A; color:#F2EFE7; padding:.3em .55em .2em; border-radius:.3em;
}
.bk-tafel__schritt{ font-size:clamp(.82rem, 2vmin, 1.45rem); line-height:1.25; font-weight:600 }
.bk-tafel__adresse{ font-size:clamp(.82rem, 2vmin, 1.45rem); line-height:1.2; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bk-code{ display:grid; gap:2px }
.bk-code__label{ font-size:clamp(.72rem, 1.8vmin, 1.3rem); font-weight:750; color:#6E5C64; text-transform:uppercase; letter-spacing:.08em }
.bk-code__wert{
  font-size:clamp(1.9rem, 8.2vmin, 6.6rem); line-height:1; font-weight:850; font-variation-settings:"wght" 850;
  letter-spacing:.04em; font-variant-numeric:tabular-nums; white-space:nowrap; color:#1D1419;
}

/* Knöpfe oben rechts, Hinweis oben links; beide blenden sich nach 5 s ohne Bewegung aus */
.bk-leiste{ position:absolute; top:var(--bk-rand); right:var(--bk-rand); z-index:4; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; transition:opacity .4s ease }
.bk-knopf{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; min-width:48px; padding:0 18px;
  border:0; border-radius:999px; background:rgba(242,239,231,.94); color:#1D1419;
  font:inherit; font-weight:750; font-size:1rem; cursor:pointer; box-shadow:0 6px 18px rgba(10,20,40,.25); touch-action:manipulation;
}
.bk-knopf[aria-pressed="true"], .bk-knopf[aria-expanded="true"]{ background:#8B004A; color:#F2EFE7 }
.bk-info{
  position:absolute; top:var(--bk-rand); left:var(--bk-rand); z-index:2; max-width:min(44ch, 46vw);
  padding:10px 18px; border-radius:22px; background:rgba(29,20,25,.74); color:#F2EFE7;
  font-size:clamp(.85rem, 1.7vmin, 1.2rem); line-height:1.3; font-weight:600; transition:opacity .4s ease;
}
.bk-info:empty{ display:none }
.bk--ruhig{ cursor:none }
.bk--ruhig .bk-leiste, .bk--ruhig .bk-info{ opacity:0; pointer-events:none }

/* Aufklapper */
.bk-pop{
  position:absolute; z-index:5; top:calc(var(--bk-rand) + 60px); right:var(--bk-rand);
  width:min(27rem, calc(100% - 2 * var(--bk-rand))); max-height:calc(100% - 2 * var(--bk-rand) - 64px); overflow:auto; overscroll-behavior:contain;
  display:grid; gap:12px; padding:20px; background:#F2EFE7; border-radius:24px; box-shadow:0 18px 48px rgba(10,20,40,.4);
}
.bk-pop__titel{ font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; margin-top:4px }
.bk-pop__hinweis{ font-size:.95rem; line-height:1.4; color:#4a3b42 }
.bk-welten{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px }
.bk-welt{
  display:grid; gap:6px; width:100%; padding:6px 6px 10px; border:2px solid transparent; border-radius:16px; background:#fff;
  font:inherit; font-weight:750; color:#1D1419; cursor:pointer; text-align:center;
}
.bk-welt img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:11px; background:#E7E2D6 }
.bk-welt[aria-pressed="true"]{ border-color:#8B004A }
.bk-tiere{ display:grid; gap:8px }
.bk-tier{ display:grid; grid-template-columns:64px 1fr 48px; align-items:center; gap:12px; padding:6px; background:#fff; border-radius:16px }
.bk-tier img{ width:64px; height:52px; object-fit:contain }
.bk-tier__name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bk-rund{ display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; background:#F2EFE7; color:#8B004A; cursor:pointer }
.bk-weiter{ display:flex; flex-wrap:wrap; align-items:center; gap:14px }
.bk-weiter__qr{ width:132px; height:132px; flex:none; background:#fff; border-radius:12px; overflow:hidden }
.bk-weiter__knoepfe{ display:grid; gap:8px; flex:1 1 12rem }
.bk-weiter__knoepfe .bk-pille{ text-align:center; padding:8px 16px }

/* Ohne WebGL: Liste der eingetroffenen Tiere */
.bk-ersatz{
  position:absolute; left:var(--bk-rand); bottom:var(--bk-rand); z-index:2; display:flex; gap:10px; max-width:45%;
  overflow-x:auto; padding:10px; background:rgba(242,239,231,.88); border-radius:20px;
}
.bk-ersatz img{ display:block; width:clamp(64px, 12vmin, 150px); height:auto; max-height:clamp(64px, 12vmin, 150px); object-fit:contain }

/* Neues Tier: kurze Ansage */
.bk-ansage{
  position:absolute; z-index:3; left:50%; top:12%; transform:translateX(-50%);
  max-width:calc(100% - 2 * var(--bk-rand)); padding:.35em .9em .4em; border-radius:999px;
  background:rgba(29,20,25,.72); color:#F2EFE7; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:"Permanent Marker", "Marker Felt", "Chalkboard SE", cursive; font-weight:400; font-size:clamp(1.3rem, 5.4vmin, 4.4rem); line-height:1.1;
  opacity:0; pointer-events:none;
}
.bk-ansage.ist-an{ animation:bk-ansage 3.2s ease both }
@keyframes bk-ansage{
  0%{ opacity:0; transform:translate(-50%, 14px) scale(.96) }
  12%, 82%{ opacity:1; transform:translate(-50%, 0) scale(1) }
  100%{ opacity:0; transform:translate(-50%, -6px) }
}
.bk-status{ position:absolute; z-index:3; left:50%; bottom:var(--bk-rand); transform:translateX(-50%); max-width:min(40ch, 60%) }
.bk-status:not(:empty){ padding:8px 16px; border-radius:16px; background:rgba(29,20,25,.8); color:#F2EFE7; font-weight:600; text-align:center }
.bk--statisch .bk-status{ left:auto; right:var(--bk-rand); transform:none; bottom:calc(var(--bk-rand) * 2 + var(--bk-qr) + 24px) }

@media (max-width: 760px){
  .bk-knopf{ padding:0 12px }
  .bk-knopf__text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  .bk-info{ top:calc(var(--bk-rand) + 58px); max-width:calc(100% - 2 * var(--bk-rand)) }
}
@media (orientation: portrait) and (max-width: 560px){
  .bk-tafel{ left:var(--bk-rand); justify-content:center }
}
@media (prefers-reduced-motion: reduce){
  .bk-ansage.ist-an{ animation:none; opacity:1 }
  .bk-leiste, .bk-info{ transition:none }
}

/* ---------- Studio: Band oben, Dialoge, Meldung ---------- */
/* --bk-band-h misst studio-becken.js (das Band wächst, wenn der Fehlertext zweizeilig wird) */
html.bk-band-an .studio{ top:var(--bk-band-h, calc(52px + env(safe-area-inset-top, 0px))); --s-o:0px }
.bk-band{
  position:fixed; top:0; left:0; right:0; z-index:1001; box-sizing:border-box;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px;
  min-height:calc(52px + env(safe-area-inset-top, 0px));
  padding:calc(4px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px));
  background:#1D1419; color:#F2EFE7;
  font:600 1rem/1.2 Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bk-band[hidden]{ display:none }
.bk-band p{ margin:0 }
.bk-band__text strong{ font-weight:850; letter-spacing:.04em; font-size:1.15em }
.bk-band__knopf{
  min-height:44px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:inherit;
  font:inherit; cursor:pointer; touch-action:manipulation;
}
.bk-band__knopf strong{ text-decoration:underline; text-underline-offset:3px }
.bk-band__knopf--rand{ border:2px solid rgba(242,239,231,.6) }
.bk-band__zu{ width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:inherit; font-size:1.6rem; line-height:1; cursor:pointer }
.bk-band .bk-code-form{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px }
.bk-band .bk-code-form[hidden]{ display:none }
.bk-band .bk-pille{ min-height:44px }
.bk-band .bk-code-fehler{ flex-basis:100%; text-align:center; color:#ffd5e6 }

.bk-code-feld{
  width:7.4em; min-height:44px; padding:4px 10px; border:2px solid #6E5C64; border-radius:12px; background:#fff; color:#1D1419;
  font:850 1.35rem/1 Archivo, system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase; text-align:center;
}
.bk-code-feld::placeholder{ color:#b3a7ad; font-weight:700 }
.bk-code-fehler{ margin:0; font-weight:650; line-height:1.3 }
.bk-code-fehler[hidden]{ display:none }

.bk-dialog, .bk-meldung{
  position:fixed; inset:0; z-index:1100; box-sizing:border-box; display:grid; place-items:center;
  padding:max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background:rgba(29,20,25,.5); color:#1D1419;
  font:400 1rem/1.4 Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bk-meldung{ background:rgba(242,239,231,.94) }
.bk-dialog__karte, .bk-meldung__karte{
  box-sizing:border-box; display:grid; gap:16px; justify-items:center; text-align:center;
  width:min(27rem, 100%); padding:26px 22px; border-radius:26px; background:#F2EFE7; box-shadow:0 18px 48px rgba(29,20,25,.3);
}
.bk-meldung__karte{ box-shadow:none; background:transparent }
.bk-dialog__titel{
  margin:0; transform:rotate(-1.5deg); padding:.32em .6em .22em; border-radius:.32em; background:#8B004A; color:#F2EFE7;
  font-size:1.35rem; line-height:1; font-weight:800; font-variation-settings:"wdth" 72, "wght" 800; text-transform:uppercase;
}
.bk-dialog__text{ margin:0; font-size:1.05rem }
.bk-dialog__knoepfe{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px }
.bk-dialog .bk-code-form{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px }
.bk-dialog .bk-code-fehler{ flex-basis:100%; color:#8B004A }
.bk-meldung__gross{
  margin:0; color:#8B004A; transform:rotate(-2deg);
  font-family:"Permanent Marker", "Marker Felt", "Chalkboard SE", cursive; font-size:clamp(1.9rem, 8vw, 2.8rem); line-height:1.1;
}
.bk-meldung__klein{ margin:0; font-size:1.1rem; font-weight:600 }
.bk-meldung--klein{ inset:auto 16px calc(96px + env(safe-area-inset-bottom, 0px)) 16px; background:none; pointer-events:none }
.bk-meldung--klein .bk-meldung__klein{ padding:12px 20px; border-radius:999px; background:#1D1419; color:#F2EFE7; box-shadow:0 10px 28px rgba(29,20,25,.3) }