@font-face{font-family:Jakarta;src:url(/fonts/PlusJakartaSans.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--nacht:#070b12;--tief:#0d1624;--meer:#1d4766;--orange:#ff8a2b;--glut:#ffb067;--creme:#f6ebdd;--t:246,235,221;--linie:rgba(246,235,221,.14);--karte:rgba(246,235,221,.06);--gruen:#59d38c;--rot:#ff7a59;--gelb:#ffcf5c;--bg:#070b12;--akz:#ff8a2b;--r:20px;--sa:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:light){:root{--bg:#f8f2e9;--tief:#efe6d8;--creme:#101a2b;--t:16,26,43;--linie:rgba(16,26,43,.14);--karte:rgba(16,26,43,.05);--akz:#a8460a;--gruen:#16804a;--rot:#c23a1b;--gelb:#8a6400}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--creme);font:16px/1.5 Jakarta,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;overscroll-behavior-y:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
a{color:var(--glut)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Anmeldung */
.login{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:22px;padding:calc(24px + var(--sa)) 24px calc(24px + var(--sb));text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,#060a14 0%,#0e2038 40%,#1d4766 68%,#b8593a 90%,#ff8a2b 100%);color:#f6ebdd}
.login h1{font-size:34px}.login p{margin:0;opacity:.85}
.szene{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;pointer-events:none}
.szene .sonne{transform-origin:720px 470px;animation:aufgang 2.8s cubic-bezier(.2,.8,.2,1) both}.szene .glut{transform-origin:720px 470px;animation:puls 5s ease-in-out infinite}
.szene .sterne circle{fill:#fff3d6;animation:twinkle 3.4s ease-in-out infinite}.szene .sterne circle:nth-child(2n){animation-delay:1.1s}.szene .sterne circle:nth-child(3n){animation-delay:2s}
.welle{animation:wogen 26s linear infinite}.w1{fill:#173a58}.w2{fill:#0d2236;animation-duration:34s;animation-direction:reverse}.w3{fill:#070b12;animation-duration:44s}
@keyframes wogen{to{transform:translateX(-1440px)}}@keyframes aufgang{from{transform:translateY(130px);opacity:0}to{transform:none;opacity:1}}@keyframes puls{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
.login>*:not(.szene){position:relative;z-index:1}
.pin-felder{display:flex;gap:12px;justify-content:center;margin:4px 0}.pin-felder i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(246,235,221,.6);transition:.15s}.pin-felder i.an{background:#ff8a2b;border-color:#ff8a2b;transform:scale(1.15)}
.pad{display:grid;grid-template-columns:repeat(3,72px);gap:14px}
.pad button{height:72px;border-radius:50%;border:1px solid rgba(246,235,221,.3);background:rgba(7,11,18,.45);backdrop-filter:blur(8px);font-size:26px;font-weight:700;color:#f6ebdd;cursor:pointer;transition:transform .1s,background .15s}
.pad button:active{transform:scale(.92);background:rgba(255,138,43,.4)}.pad .leer{visibility:hidden}
.fehler{color:var(--rot);font-weight:700;min-height:1.5em}.login .fehler{color:#ffb4a0}

/* Gerüst */
.huelle{padding:calc(14px + var(--sa)) 0 calc(96px + var(--sb));max-width:720px;margin:0 auto}
.kopf{position:relative;margin:0 14px 18px;border-radius:26px;overflow:hidden;padding:22px 20px 24px;min-height:150px;background:linear-gradient(180deg,#0e2038 0%,#1d4766 55%,#b8593a 100%);color:#f6ebdd;isolation:isolate}
.kopf .szene{height:100%;opacity:.95;z-index:-1}.kopf h1{font-size:28px}.kopf p{margin:8px 0 0;opacity:.9}
.kopf .ring{position:absolute;right:16px;top:16px;width:64px;height:64px}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}.ring .bg{stroke:rgba(246,235,221,.25)}.ring .fg{stroke:#ff8a2b;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}.ring text{fill:#f6ebdd;font-size:18px;font-weight:800;text-anchor:middle;dominant-baseline:central}
.abschnitt{padding:0 14px}.abschnitt>h2{font-size:15px;letter-spacing:.14em;color:var(--glut);margin:26px 4px 12px;display:flex;align-items:center;gap:10px}.abschnitt>h2 .n{background:var(--orange);color:#1a0d00;border-radius:999px;padding:1px 9px;font-size:12px;letter-spacing:0}
.leer-hinweis{border:1px dashed var(--linie);border-radius:var(--r);padding:26px 20px;text-align:center;color:rgba(var(--t),.75)}.leer-hinweis b{display:block;font-size:18px;color:var(--creme);margin-bottom:6px}

/* Tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;padding:8px 6px calc(8px + var(--sb));background:rgba(13,22,36,.88);backdrop-filter:blur(16px);border-top:1px solid var(--linie);max-width:720px;margin:0 auto}
@media(prefers-color-scheme:light){.tabs{background:rgba(248,242,233,.9)}}
.tabs button{flex:1;display:grid;justify-items:center;gap:3px;padding:6px 2px;background:none;border:0;border-radius:14px;color:rgba(var(--t),.7);font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer;position:relative}
.tabs button svg{width:25px;height:25px}.tabs button[aria-current=page]{color:var(--orange)}.tabs .punkt{position:absolute;top:2px;right:calc(50% - 20px);background:var(--orange);color:#1a0d00;border-radius:999px;font-size:10px;min-width:17px;padding:0 4px;line-height:17px}

/* Karten */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;margin-bottom:16px;animation:rein .5s both}
.karte:nth-child(2){animation-delay:.07s}.karte:nth-child(3){animation-delay:.14s}.karte:nth-child(4){animation-delay:.21s}
@keyframes rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.medien{position:relative;background:#0d1624;aspect-ratio:4/5;max-height:420px;display:grid;place-items:center;overflow:hidden}
.medien video,.medien img{width:100%;height:100%;object-fit:cover;display:block}
.medien .scroller{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;height:100%}.medien .scroller>*{flex:0 0 100%;scroll-snap-align:center}
.medien .fehlt{padding:24px;text-align:center;color:rgba(246,235,221,.7)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 0}.chip{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--linie);border-radius:999px;padding:4px 11px;color:rgba(var(--t),.85)}.chip.ki{border-color:var(--glut);color:var(--glut)}.chip.zeit{border-color:var(--gruen);color:var(--gruen)}
.inhalt{padding:12px 16px 16px;display:grid;gap:12px}
.inhalt h3{font-size:20px}
label.feld{display:grid;gap:6px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--t),.75)}
textarea,input[type=text],input[type=datetime-local],input[type=time],select{width:100%;border:1px solid var(--linie);background:rgba(var(--t),.05);border-radius:14px;padding:12px 14px;font-size:16px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--creme)}
textarea{min-height:120px;resize:vertical;line-height:1.5}
.schalter{display:flex;gap:18px;flex-wrap:wrap}.schalter label{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;cursor:pointer}.schalter input{width:22px;height:22px;accent-color:var(--orange)}
.regeln{display:grid;gap:8px}.regel{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.4}
.regel::before{font-weight:800;flex:0 0 auto}.regel.rot{background:rgba(255,122,89,.14);border:1px solid rgba(255,122,89,.45)}.regel.rot::before{content:"✕";color:var(--rot)}
.regel.gelb{background:rgba(255,207,92,.1);border:1px solid rgba(255,207,92,.35)}.regel.gelb::before{content:"!";color:var(--gelb)}
.regel.gruen{background:rgba(89,211,140,.12);border:1px solid rgba(89,211,140,.4)}.regel.gruen::before{content:"✓";color:var(--gruen)}
.knoepfe{display:grid;gap:10px;padding-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;border:1px solid var(--linie);background:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:13.5px;cursor:pointer;transition:transform .1s,opacity .2s;text-decoration:none;color:var(--creme)}
.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--orange);border-color:var(--orange);color:#1a0d00}.btn.text{border:0;min-height:44px;color:rgba(var(--t),.75)}.btn.gefahr{color:var(--rot)}
.reihe2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.klein{font-size:13px;color:rgba(var(--t),.72)}
.haken{width:84px;height:84px;margin:0 auto}.haken circle{stroke:var(--gruen);stroke-width:4;fill:none;stroke-dasharray:240;stroke-dashoffset:240;animation:zeichne .6s .05s forwards}.haken path{stroke:var(--gruen);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:zeichne .4s .5s forwards}
@keyframes zeichne{to{stroke-dashoffset:0}}
.fertig{text-align:center;padding:30px 20px}.fertig h2{margin-top:14px}

/* Kalender, Listen */
.tag{margin-bottom:14px}.tag h3{font-size:13px;letter-spacing:.12em;color:var(--glut);margin:0 4px 8px;display:flex;justify-content:space-between}.tag h3 span{color:rgba(var(--t),.6)}
.zeile{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--linie);border-radius:16px;background:var(--karte);margin-bottom:8px;cursor:pointer;width:100%;text-align:left}
.zeile .p{width:11px;height:11px;border-radius:50%;background:var(--glut)}.zeile .p.freigegeben{background:var(--gruen)}.zeile .p.bereit_zum_posten{background:var(--orange);animation:puls2 1.6s infinite}.zeile .p.veroeffentlicht{background:rgba(var(--t),.35)}.zeile .p.pruefung{background:var(--gelb)}.zeile .p.aenderung,.zeile .p.angefordert,.zeile .p.entwurf{background:var(--meer)}
@keyframes puls2{50%{transform:scale(1.5);opacity:.6}}
.zeile b{display:block}.zeile small{color:rgba(var(--t),.72)}.zeile .st{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--t),.7)}
.filter{display:flex;gap:8px;overflow-x:auto;padding:0 14px 6px;scrollbar-width:none}.filter button{flex:0 0 auto;border:1px solid var(--linie);background:none;border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer;color:rgba(var(--t),.85)}.filter button[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#1a0d00}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.kpi{border:1px solid var(--linie);border-radius:var(--r);padding:16px;background:var(--karte)}.kpi b{display:block;font-size:30px;line-height:1.1;color:var(--glut)}.kpi span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgba(var(--t),.75)}
.blatt{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);display:grid;align-items:end;animation:ein .2s both}.blatt>div{background:var(--bg);max-width:720px;width:100%;margin:0 auto;border-radius:26px 26px 0 0;max-height:92vh;overflow:auto;padding:20px 16px calc(24px + var(--sb));border:1px solid var(--linie);animation:hoch .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes ein{from{opacity:0}}@keyframes hoch{from{transform:translateY(40px)}}
.blatt .zu{float:right;border:0;background:var(--karte);width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer}
.vorschlaege{display:flex;flex-wrap:wrap;gap:8px}.vorschlaege button{border:1px solid var(--linie);background:var(--karte);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:14px}
.gruppe{border:1px solid var(--linie);border-radius:var(--r);padding:16px;background:var(--karte);display:grid;gap:12px;margin-bottom:14px}.gruppe h3{font-size:14px;letter-spacing:.12em;color:var(--glut)}
#toast{position:fixed;left:50%;bottom:calc(92px + var(--sb));transform:translate(-50%,20px);background:#0d1624;color:#f6ebdd;border:1px solid rgba(246,235,221,.25);padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;font-weight:600;font-size:14px;text-align:center}#toast.an{opacity:1;transform:translate(-50%,0)}#toast.fehler{border-color:var(--rot)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.welle,.szene *{animation:none!important}}
.slide{display:grid;place-items:center;padding:28px;font-weight:800;font-size:22px;line-height:1.25;text-align:center;background:linear-gradient(135deg,#1d4766,#0d1624);color:#f6ebdd;min-height:100%;width:100%}
.kopf h1{padding-right:78px}.medien video{background:#000;object-fit:contain}

.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.look{position:relative;border:2px solid var(--linie);border-radius:14px;overflow:hidden;padding:0;background:#0d1624;cursor:pointer;aspect-ratio:9/16;display:block}
.look img{width:100%;height:100%;object-fit:cover;display:block}.look span{position:absolute;left:0;right:0;bottom:0;padding:18px 6px 6px;font-size:11px;font-weight:700;line-height:1.2;color:#f6ebdd;background:linear-gradient(transparent,rgba(7,11,18,.85));text-align:left}
.look[aria-pressed=true]{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,43,.35)}.look[aria-pressed=true]::after{content:"✓";position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#1a0d00;display:grid;place-items:center;font-weight:800}