*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--surface);color:var(--ink);font:400 var(--text-body)/1.618 var(--font-sans);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;margin:0 0 var(--space-13)}
h1{font-size:var(--text-h3)}
h2{font-size:var(--text-h4)}
p{margin:0 0 var(--space-13)}
a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
[hidden]{display:none!important}

.kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-13);padding:var(--space-13) var(--space-21);border-bottom:var(--hairline) solid var(--line)}
.logo{height:28px;width:auto}
.kopf-titel{font-size:var(--text-small);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.fortschritt{height:4px;background:var(--line)}
.fortschritt-balken{height:100%;width:0;background:var(--accent);transition:width .3s ease}
.inhalt{max-width:560px;margin:0 auto;padding:var(--space-21) var(--space-21) var(--space-89)}
.honig{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.label{display:block;font-size:var(--text-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-8)}
.schritt-nr{color:var(--ink-muted);font-size:var(--text-small);margin-bottom:var(--space-8)}
.leise{color:var(--ink-muted);font-size:var(--text-small)}

.feld{margin-bottom:var(--space-21)}
.feld input,.feld select,.feld textarea{width:100%;height:55px;border:0;border-bottom:2px solid var(--accent);border-radius:0;background:transparent;font:inherit;color:inherit;padding:0;outline:0;-webkit-appearance:none;appearance:none}
.feld textarea{height:110px;padding-top:var(--space-8);resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-bottom-color:var(--dunkelblau)}
.feld-reihe{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-13)}
.code-eingabe{font-family:var(--font-display)!important;font-size:var(--text-h3)!important;letter-spacing:.3em;text-align:center}
.haken{display:flex;gap:var(--space-13);align-items:flex-start;margin-bottom:var(--space-21);font-size:var(--text-small)}
.haken input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.fehler{color:var(--ink);border-left:4px solid var(--accent);padding:var(--space-8) var(--space-13);margin-bottom:var(--space-21);background:#fff4f1}

.rc-btn{display:inline-flex;align-items:stretch;height:var(--button-height);padding:0;border:0;border-radius:0;font:600 13px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;width:100%;justify-content:space-between}
.rc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rc-btn:disabled{opacity:.4;cursor:not-allowed}
.rc-btn-label{display:flex;align-items:center;padding:0 var(--space-21);white-space:nowrap}
.rc-btn-pfeil{display:grid;place-items:center;width:var(--button-height);border-left:var(--hairline) dashed currentColor}
.rc-btn-primary{background:var(--accent);color:var(--on-accent)}
.rc-btn-secondary{background:var(--dunkelblau);color:var(--weiss)}
.rc-btn-secondary .rc-btn-pfeil{border-left-style:solid}
.knopf-leise{background:none;border:0;padding:var(--space-13) 0;font:600 13px/1.8 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px;cursor:pointer}
.knoepfe{display:grid;gap:var(--space-13);margin-top:var(--space-21)}
.auswahl{display:grid;gap:var(--space-8);margin-bottom:var(--space-21)}
.auswahl button{height:55px;border:var(--hairline) solid var(--line);border-radius:0;background:var(--weiss);font:inherit;color:inherit;text-align:left;padding:0 var(--space-21);cursor:pointer}
.auswahl button[aria-pressed="true"]{border:2px solid var(--accent);font-weight:600}

.karte-box{border:var(--hairline) solid var(--line);border-radius:var(--radius-8);padding:var(--space-21);margin-bottom:var(--space-21)}
.szene{margin:0 0 var(--space-21)}
.szene svg{display:block;width:100%;height:auto;border-radius:var(--radius-8)}
.szene figcaption{margin-top:var(--space-8);font-size:var(--text-small);color:var(--ink-muted)}
.hinweis-scharf{font-size:var(--text-small);border-left:4px solid var(--dunkelblau);padding:var(--space-8) var(--space-13);margin-bottom:var(--space-21)}

.fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);margin-bottom:var(--space-13)}
.foto{position:relative;aspect-ratio:1;border-radius:var(--radius-8);overflow:hidden;background:var(--line)}
.foto img,.foto video{width:100%;height:100%;object-fit:cover;display:block}
.foto button{position:absolute;top:4px;right:4px;width:28px;height:28px;border:0;border-radius:0;background:var(--dunkelblau);color:var(--weiss);font-size:16px;line-height:28px;padding:0;cursor:pointer}
.foto .marke{position:absolute;left:0;right:0;bottom:0;background:var(--dunkelblau);color:var(--weiss);font-size:10px;padding:2px 4px;text-align:center}
.foto-leer{border:2px dashed var(--line);background:none}

#karte{height:58vh;min-height:320px;border-radius:var(--radius-8);margin-bottom:var(--space-13);z-index:0}
.flaeche{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-13)}
.flaeche strong{font-family:var(--font-display);font-size:var(--text-h3)}
.punkt-marker{width:22px;height:22px;background:var(--accent);border:3px solid var(--weiss);border-radius:50%}

.messwert{font-family:var(--font-display);font-size:var(--text-h1);line-height:1;margin:var(--space-21) 0 var(--space-8)}
.waage-reihe{display:flex;gap:var(--space-21);align-items:center;margin:var(--space-13) 0 var(--space-21)}
.waage-reihe .messwert{margin-top:0}
.wasserwaage{position:relative;flex:none;width:55px;height:233px;border:2px solid var(--dunkelblau);border-radius:28px;background:#f3f4f5;overflow:hidden}
.wasserwaage i{position:absolute;left:8px;right:8px;height:2px;background:var(--dunkelblau);opacity:.5}
.wasserwaage i:first-child{top:calc(50% - 22px)}
.wasserwaage i:nth-child(2){top:calc(50% + 20px)}
.wasserwaage span{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--accent);transition:transform .1s linear}

.zusammenfassung dt{font-size:var(--text-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-top:var(--space-13)}
.zusammenfassung dd{margin:0}

.qr{display:inline-block;padding:var(--space-13);border:var(--hairline) solid var(--line);border-radius:var(--radius-8);margin:var(--space-13) 0}

.kamera{position:fixed;inset:0;background:#000;z-index:10;display:flex;flex-direction:column}
.kamera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kamera-oben{position:relative;padding:calc(env(safe-area-inset-top) + var(--space-13)) var(--space-21) var(--space-13);background:rgba(5,29,38,.8);color:var(--weiss)}
.kamera-auftrag{font-weight:600}
.kamera-ruhe{display:inline-block;margin-top:var(--space-8);font-size:var(--text-small);padding:2px var(--space-8);background:var(--weiss);color:var(--dunkelblau)}
.kamera-ruhe.ruhig{background:var(--accent);color:var(--weiss)}
.kamera-meldung{position:relative;margin:auto var(--space-21) 0;padding:var(--space-13) var(--space-21);background:var(--weiss);color:var(--dunkelblau);border-radius:var(--radius-8)}
.kamera-meldung .knoepfe{margin-top:var(--space-13)}
.kamera-unten{position:relative;margin-top:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--space-21) var(--space-21) calc(env(safe-area-inset-bottom) + var(--space-34));background:rgba(5,29,38,.8)}
.kamera-meldung:not([hidden])+.kamera-unten{margin-top:var(--space-13)}
.kamera-neben{background:none;border:0;color:var(--weiss);font:600 13px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;justify-self:start}
.kamera-info{justify-self:end;text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--text-small)}
.ausloeser{width:76px;height:76px;border-radius:50%;border:4px solid var(--weiss);background:none;padding:6px;cursor:pointer}
.ausloeser span{display:block;width:100%;height:100%;border-radius:50%;background:#8a9599;transition:background .2s}
.ausloeser.bereit span{background:var(--accent)}
.ausloeser.aufnahme span{border-radius:8px;background:var(--accent)}
.zusammenfassung .knopf-leise{margin-left:var(--space-8);padding:4px 0}

/* Animationen der Beispielbilder (Klassen aus illustrationen/szenen.py) */
.szene .gc-folge{opacity:0;animation:gc-folge 8s linear infinite}
@keyframes gc-folge{0%,23%{opacity:1}25%,100%{opacity:0}}
.szene .gc-blitz{opacity:0;animation:gc-blitz 2s ease-out infinite}
@keyframes gc-blitz{0%{opacity:0}8%{opacity:.9}30%,100%{opacity:0}}
.szene .gc-zeichnen{stroke-dasharray:100;animation:gc-zeichnen 6s linear infinite}
@keyframes gc-zeichnen{0%{stroke-dashoffset:100}53%,100%{stroke-dashoffset:0}}
.szene .gc-flaeche{opacity:0;animation:gc-flaeche 6s ease infinite}
@keyframes gc-flaeche{0%,55%{opacity:0}62%,95%{opacity:.3}100%{opacity:0}}
.szene .gc-punkt{opacity:0;animation:gc-punkt 6s ease infinite}
@keyframes gc-punkt{0%{opacity:0}4%,95%{opacity:1}100%{opacity:0}}
.szene .gc-ergebnis{opacity:0;animation:gc-ergebnis 6s ease infinite}
@keyframes gc-ergebnis{0%,60%{opacity:0}66%,95%{opacity:1}100%{opacity:0}}
.szene .gc-ablegen{animation:gc-ablegen 6s ease-in-out infinite}
@keyframes gc-ablegen{0%,8%{transform:translateY(-26px);opacity:0}14%{opacity:1}40%,95%{transform:translateY(0);opacity:1}100%{opacity:0}}
.szene .gc-bogen{opacity:0;animation:gc-ergebnis 6s ease infinite}
.szene .gc-blinken{animation:gc-blinken 1.6s ease-in-out infinite}
@keyframes gc-blinken{0%,100%{opacity:1}50%{opacity:.25}}
.szene .gc-welle{opacity:0;animation:gc-welle 1.8s ease-out infinite}
@keyframes gc-welle{0%{opacity:0}30%{opacity:1}70%,100%{opacity:0}}
.szene .gc-ring{transform-box:fill-box;transform-origin:center;animation:gc-ring 1.5s ease-out infinite}
@keyframes gc-ring{0%{transform:scale(.6)}40%,100%{transform:scale(1)}}
.szene .gc-signal{animation:gc-blinken 1.2s ease-in-out infinite}
.szene .gc-heben{animation:gc-heben 3s ease-in-out infinite}
@keyframes gc-heben{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.szene .gc-rec{animation:gc-blinken 1s steps(2,jump-none) infinite}
@media (prefers-reduced-motion:reduce){.szene *{animation:none!important;opacity:1}.szene .gc-folge:not(:first-of-type){opacity:0!important}}