:root{color-scheme:light;--green:#ad201b;--ink:#242424;--muted:#656565;--paper:#ffffff;--line:#e2e2e2;--accent:#f9e8e6}*{box-sizing:border-box}body{margin:0;background:#fafafa;color:var(--ink);font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}header{background:white;color:var(--ink);border-top:8px solid var(--green);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:20px max(20px,calc((100% - 820px)/2));gap:16px}header a{color:var(--ink);text-decoration:none;font-weight:800;font-size:24px;letter-spacing:-1px}header a span{display:block;font-size:11px;letter-spacing:1px;font-weight:400}.badge{font-size:10px;letter-spacing:1.5px;border:1px solid #ad201b;padding:5px 9px;border-radius:30px;white-space:nowrap}main{max-width:700px;margin:auto;padding:38px 20px 20px}h1{font-size:clamp(34px,7vw,52px);letter-spacing:-2px;line-height:1.12;margin:8px 0 18px}h2{font-size:27px;line-height:1.2;letter-spacing:-.7px;margin:8px 0 16px}h3{font-size:24px;margin:20px 0 0}p{margin:0 0 16px}.intro{color:var(--muted);max-width:440px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.8px;margin:0}.demo{font-size:12px;background:#f4f4f4;border-left:3px solid var(--green);padding:12px 14px;margin:24px 0}nav ol{display:flex;list-style:none;padding:0;gap:8px;margin:24px 0}nav li{flex:1;border-top:3px solid var(--line);padding-top:8px;font-size:12px;color:var(--muted)}nav li.active{border-color:var(--green);font-weight:750;color:var(--green)}nav li span{margin-left:3px}.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:28px;box-shadow:0 10px 30px #00000008}button{width:100%;min-height:50px;border-radius:10px;font:inherit;font-weight:650;padding:13px 16px;cursor:pointer;touch-action:manipulation}.primary{background:var(--green);color:white;border:1px solid var(--green);margin-top:12px}.primary:disabled{background:#e5e5e5;color:#666;border-color:#e5e5e5;cursor:default}.secondary{background:transparent;color:var(--green);border:1px solid var(--line);margin-top:12px}button:hover:enabled{filter:brightness(.94)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #ad201b;outline-offset:3px}.recorder{text-align:center;padding:28px 0 14px}.mic{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:var(--accent);color:var(--green);font-size:42px}.recording .mic{background:#f4cfcc;animation:pulse 1.8s infinite}@keyframes pulse{50%{box-shadow:0 0 0 12px #ad201b22}}.muted{font-size:13px;color:var(--muted)}label{display:block;font-weight:650;margin-bottom:8px}textarea,select{width:100%;font:inherit;color:var(--ink);background:white;border:1px solid #b9b9b9;border-radius:8px;padding:14px}textarea{resize:vertical;min-height:260px}.notice{font-size:13px;background:#fff4d7;padding:12px;border-radius:8px;margin-top:14px}.recipient{background:#f4f4f4;border-radius:9px;padding:14px;margin:20px 0;overflow-wrap:anywhere}.recipient span{display:block;font-size:10px;letter-spacing:1px}.recipient strong{font-size:16px}.paper{border:1px solid var(--line);padding:22px;background:white;box-shadow:0 3px 8px #00000008}.paper-top{display:flex;justify-content:space-between;gap:10px;font-size:11px;border-bottom:1px solid var(--line);padding-bottom:12px}.paper-top strong{font-size:18px}#preview-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.8}.check{display:flex;align-items:flex-start;gap:12px;font-size:14px;margin:22px 0 8px}.check input{width:22px;height:22px;flex-shrink:0;accent-color:var(--green)}details{margin-top:24px;font-size:13px}summary{cursor:pointer;padding:8px 0}details label{margin-top:14px}.footer-note{text-align:center;font-size:11px;color:var(--muted);margin:24px 0}footer{max-width:660px;margin:0 auto;padding:18px 20px 30px;border-top:1px solid var(--line);font-weight:800;font-size:13px;display:flex;justify-content:space-between;gap:10px}footer span{font-weight:400;color:var(--muted)}dialog{max-width:440px;width:calc(100% - 32px);border:1px solid var(--line);border-radius:16px;padding:24px;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#00000077}[hidden]{display:none!important}@media(max-width:400px){main{padding:28px 14px 14px}.card{padding:20px}nav li{font-size:10px}nav li span{margin-left:0}h2{font-size:24px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* KOI WORLD: weiss, anthrazit und vom Referenzbild angenähertes Rot. */
header a span{color:var(--green);letter-spacing:.4px;font-size:12px}header a{letter-spacing:.5px;font-size:26px}.badge{color:var(--green)}h2:focus{outline:none}h2:focus-visible{outline:2px solid var(--green);outline-offset:5px}.paper-top strong{color:var(--green)}

.brand-logo{display:block;width:240px;max-width:100%;height:auto}header a{min-width:0}header a span{margin-top:8px}.report-logo{display:block;width:160px;max-width:55%;height:auto;object-fit:contain}.paper-top{align-items:center}@media(max-width:400px){.brand-logo{width:190px}.badge{font-size:9px;padding:5px 7px}}