/* Optik aus dem Prototyp. Schriften bewusst ohne Google Fonts (Datenschutz): Georgia / Systemschrift. */
:root{--bg:#f7f2ee;--text:#44241a;--muted:#6e5047;--accent:#9e5444;--accent-dark:#874536;--soft:#fbe9e3;--line:#ecdcd3;--card:#fffdfb;--ok-bg:#e9f3ea;--ok:#24502d;--err-bg:#fbe4df;--err:#8a2c1b}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:radial-gradient(circle at 0% 0%,rgba(240,200,184,.55),rgba(247,242,238,0) 38%),radial-gradient(circle at 100% 100%,rgba(232,190,170,.5),rgba(247,242,238,0) 40%),var(--bg);background-attachment:fixed;font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{width:100%;max-width:480px;margin:0 auto;padding:0 16px 48px;display:flex;flex-direction:column}
.stack{display:flex;flex-direction:column;gap:20px}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:40px}
.intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.create{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.h1{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:32px;font-weight:600;line-height:1.15}
.h2{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:600}
.h1 em{color:var(--accent);font-weight:500}
.muted{color:var(--muted)}
.small{font-size:14px}
.logo-big{width:156px;height:156px;border-radius:50%;box-shadow:0 12px 40px rgba(68,36,26,.12)}
.card{background:var(--card);border-radius:28px;overflow:hidden;box-shadow:0 10px 30px rgba(68,36,26,.08);display:flex;flex-direction:column}
.cardimg{width:100%;height:190px;object-fit:cover;display:block}
.cardbody{padding:20px;display:flex;flex-direction:column;gap:14px;flex-grow:1}
.badge{flex-shrink:0;background:var(--soft);color:#7d3f31;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:800}
.quote{background:var(--bg);border-radius:16px;padding:14px 16px;font-size:15px;line-height:1.5;color:#5a3d34}
.eyebrow{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:999px;border:0;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s;width:100%;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
:focus-visible{outline:3px solid #d98e84;outline-offset:2px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(158,84,68,.28)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-primary:disabled{background:#d9c6be;box-shadow:none;cursor:not-allowed}
.btn-soft{background:var(--soft);color:var(--text)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid #e6d3ca}
.btn-sm{min-height:44px;font-size:15px;padding:0 16px;width:auto}
.icon-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.voice{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 16px;border-radius:20px;background:var(--card);cursor:pointer;color:var(--text);border:1.5px solid var(--line)}
.voice input{position:absolute;opacity:0;pointer-events:none}
.voice:has(input:checked){border:2px solid var(--accent);box-shadow:0 6px 18px rgba(158,84,68,.16)}
.voice:has(input:focus-visible){outline:3px solid #d98e84;outline-offset:2px}
.vicon{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:22px}
.field{width:100%;border:1.5px solid #e6d3ca;border-radius:16px;background:#fff;padding:14px 16px;font-family:inherit;font-size:17px;color:var(--text)}
textarea.field{min-height:150px;resize:vertical;line-height:1.5}
label{font-size:15px;font-weight:700}
.step{margin:0;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800}
.step span{width:30px;height:30px;border-radius:50%;background:var(--text);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.panel{background:var(--card);border-radius:24px;box-shadow:0 8px 24px rgba(68,36,26,.06);padding:20px}
.playbtn{width:60px;height:60px;flex-shrink:0;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;background:var(--accent);font-size:22px}
.playbtn:disabled{background:#d9c6be;cursor:not-allowed}
.bigplay{width:140px;height:140px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:54px;cursor:pointer;box-shadow:0 12px 40px rgba(158,84,68,.35)}
details{border-bottom:1px solid var(--line)}details:last-child{border-bottom:0}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:800;font-size:17px;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
details[open] .plus{transform:rotate(45deg)}
.plus{transition:transform .2s;color:var(--accent);font-size:24px;line-height:1}
details p{margin:0 0 18px;font-size:16px;line-height:1.55;color:#5a3d34}
.pulse{animation:pl 2.2s ease-in-out infinite}
@keyframes pl{0%,100%{box-shadow:0 0 0 0 rgba(217,142,132,.55)}50%{box-shadow:0 0 0 22px rgba(217,142,132,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.notice{display:flex;align-items:center;gap:12px;background:var(--ok-bg);color:var(--ok);border-radius:18px;padding:14px 16px;font-weight:700;font-size:15px}
.notice.err{background:var(--err-bg);color:var(--err)}
.hidden{display:none !important}
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 0 12px;gap:12px}
header nav{flex-wrap:wrap}
.kidimg{width:100%;max-width:420px;height:min(38vh,320px);object-fit:cover;border-radius:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:44px;height:44px;border-radius:50%}
.brand span{font-family:'Playfair Display',Georgia,serif;font-size:22px;font-weight:600}
.brand b{color:#b56a59;font-weight:600}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.ki{font-size:13px;color:var(--muted)}
footer{margin-top:40px;text-align:center;font-size:13px;color:var(--muted)}
/* Admin */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:0 4px 14px rgba(68,36,26,.05)}
.kpi b{display:block;font-size:26px;font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:var(--muted)}
.meter{height:14px;border-radius:999px;background:var(--soft);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:999px}
.meter.warn i{background:#c0392b}
.bars{display:flex;align-items:flex-end;gap:3px;height:90px}
.bars i{flex:1;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}
@media (min-width:700px){.wrap{max-width:1120px;padding:0 32px 64px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.h1{font-size:40px}.cardimg{height:230px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:56px;padding-top:64px}.intro{align-items:flex-start;text-align:left}.logo-big{width:96px;height:96px}.h1{font-size:46px}}
@media (min-width:960px){.create{grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start}.side{position:sticky;top:16px}}