/* Farbwelt: KI Schmiede (Cyan-Teal #0097B2, Marine #0A0F1E, Inter) */
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root { --bg:#F4F7FA; --fg:#0A0F1E; --card:#FFFFFF; --muted:#4A5568; --line:#DDE3ED; --accent:#0097B2; --accent-dark:#006F85; --accent-light:#E0F7FB; --glow:#00E5FF; --btn-from:#0097B2; --btn-to:#00C8E0; --btn-fg:#FFFFFF; --btn-shadow:rgba(0,151,178,.35); --warn:#B45309; --bad:#B91C1C; --ok:#1A7F4B; --radius:10px; --radius-lg:16px; }
@media (prefers-color-scheme: dark) { :root { --bg:#0A0F1E; --fg:#E8EEF5; --card:#111A2E; --muted:#9AA8BC; --line:#1F2C48; --accent:#22D3EE; --accent-dark:#00BCD4; --accent-light:#0E2A3A; --btn-from:#00BCD4; --btn-to:#00E5FF; --btn-fg:#030D1A; --btn-shadow:rgba(0,229,255,.35); --warn:#F59E0B; --bad:#F87171; --ok:#4ADE80; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 'Inter',system-ui,-apple-system,Segoe UI,sans-serif; -webkit-font-smoothing:antialiased; }
main { max-width:640px; margin:0 auto; padding:16px; padding-bottom:env(safe-area-inset-bottom,16px); }
header { position:relative; overflow:hidden; margin:0 0 16px; padding:22px 20px; border-radius:var(--radius-lg); color:#fff; background:linear-gradient(160deg,#0A0F1E 0%,#06304A 100%); }
header::after { content:''; position:absolute; right:-40px; top:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(0,229,255,.35),transparent 70%); pointer-events:none; }
header h1 { position:relative; margin:0; font-size:1.8rem; font-weight:800; letter-spacing:-.02em; }
header h1 .logo-schau { color:var(--glow); }
header p { position:relative; margin:4px 0 0; color:rgba(255,255,255,.78); }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn { display:inline-block; padding:12px 20px; border-radius:var(--radius); border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; font-weight:600; cursor:pointer; text-align:center; }
.btn.primary { background:linear-gradient(135deg,var(--btn-from) 0%,var(--btn-to) 100%); border-color:transparent; color:var(--btn-fg); box-shadow:0 4px 20px var(--btn-shadow); }
.btn.primary:hover:not(:disabled) { filter:brightness(.92); transform:translateY(-1px); }
.btn { transition:transform .15s, filter .15s; }
:focus-visible { outline:3px solid var(--glow); outline-offset:2px; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
.btn:disabled { opacity:.6; cursor:wait; }
#analyze { width:100%; margin-top:12px; }
figure { margin:16px 0 0; }
#preview { width:100%; max-height:60vh; object-fit:contain; border-radius:14px; background:var(--card); border:1px solid var(--line); }
#controls { margin-top:14px; }
label[for=hint] { font-size:.9rem; color:var(--muted); }
input[type=text], input[type=password] { width:100%; padding:11px 12px; margin-top:4px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; }
#status { min-height:1.5em; color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius-lg); padding:14px 16px; margin:14px 0; }
.card h2 { margin:0 0 6px; font-size:1.15rem; }
.card h4 { margin:12px 0 2px; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.card ul { margin:4px 0; padding-left:20px; }
.summary { font-size:1.05rem; }
.place { font-weight:700; font-size:1.1rem; margin:0; }
.latin { font-style:italic; color:var(--muted); margin:0; }
.badge { display:inline-block; padding:2px 10px; border-radius:99px; border:1px solid var(--accent); background:var(--accent-light); font-size:.8rem; font-weight:600; color:var(--accent-dark); margin:4px 0; }
.badge.health-gesund { color:var(--ok); border-color:var(--ok); background:transparent; }
.badge.health-auffaellig { color:var(--warn); border-color:var(--warn); background:transparent; }
.badge.health-krank { color:var(--bad); border-color:var(--bad); background:transparent; }
.notes, .fine { font-size:.85rem; color:var(--muted); }
details { margin-top:20px; }
#camera-box { margin-top:16px; }
#video { width:100%; max-height:65vh; background:#000; border-radius:14px; object-fit:cover; }
#camera-box .actions { margin-top:10px; }
.check { display:flex; gap:8px; align-items:center; margin-top:12px; } .check input { width:20px; height:20px; }
#loading { display:flex; align-items:center; gap:10px; margin:16px 0 4px; font-weight:600; }
#loading[hidden] { display:none; }
#elapsed { color:var(--muted); font-weight:400; font-variant-numeric:tabular-nums; }
.dots { display:inline-flex; gap:5px; }
.dots i { width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--glow)); animation:bounce 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay:.15s; }
.dots i:nth-child(3) { animation-delay:.3s; }
@keyframes bounce { 0%,80%,100% { transform:translateY(0); opacity:.4; } 40% { transform:translateY(-7px); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation:none; opacity:.8; } }
details.card { padding:0; }
details.card > summary, details.inner > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:13px 16px; }
details.card > summary::-webkit-details-marker, details.inner > summary::-webkit-details-marker { display:none; }
details.card > summary::after, details.inner > summary::after { content:'+'; margin-left:auto; color:var(--accent); font-weight:700; font-size:1.2rem; }
details[open] > summary::after { content:'\2212'; }
details.card > :not(summary) { margin-left:16px; margin-right:16px; }
details.card > :last-child { margin-bottom:14px; }
.sub { color:var(--muted); font-size:.9rem; }
.group { font-size:1.05rem; margin:22px 2px 0; }
details.inner { border-top:1px solid var(--line); margin:8px 0 0; }
details.inner > summary { padding:11px 0; font-weight:600; }
details.card > details.inner { margin-left:0; margin-right:0; padding:0 16px; }
details.inner > :not(summary) { margin-bottom:10px; }
.badge { margin:0; }
.mode { border:1px solid var(--line); border-radius:12px; margin:14px 0 0; padding:6px 12px 10px; }
.mode legend { font-size:.85rem; color:var(--muted); padding:0 6px; }
.mode label { display:flex; gap:8px; align-items:center; padding:6px 0; }
.mode input { width:20px; height:20px; }
.mode small { color:var(--muted); }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.gate { padding:18px 18px 14px; }
.gate .lead { font-size:1.1rem; font-weight:600; margin:0 0 12px; }
.gate h3 { font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:18px 0 4px; }
#gate-form { display:flex; gap:10px; }
#gate-form input { flex:1; margin-top:0; min-width:0; }
.error { color:var(--bad); min-height:1.4em; margin:8px 0 0; font-weight:600; }
.info { margin:4px 0; padding-left:20px; color:var(--muted); font-size:.92rem; }
.info li { margin:3px 0; }
.link { background:none; border:0; padding:10px 0; margin-top:8px; color:var(--accent-dark); font:inherit; text-decoration:underline; cursor:pointer; }