/* Drill Pass – Gestaltung nach freigegebenem Entwurf 5 (Formensprache der Website:
   kantig, große helle Versal-Überschriften mit gelber zweiter Zeile, Laufband, dünne gelbe Linien). */
:root{
  --night:#05090d; --deep:#081017; --panel:#0b141c; --line:#1b2a36; --line2:#2a3e4d;
  --text:#f2f1ec; --muted:#8b99a4; --lime:#d9ff35; --ink:#0a1200;
  --sky:#4cc9f0; --coral:#ff7a59; --alert:#ff4d5e;
  --cond:"Barlow Condensed",Barlow,system-ui,sans-serif;
  --body:Barlow,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--text)}
body{font:17px/1.5 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
button,textarea,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.wrap{max-width:600px;margin:0 auto;padding:0 20px;position:relative}


/* Laufband wie auf der Website */
.ticker{background:var(--lime);color:var(--ink);overflow:hidden;white-space:nowrap}
.ticker div{display:inline-flex;gap:28px;padding:6px 0;font:700 11px var(--body);letter-spacing:.22em;text-transform:uppercase;animation:tick 40s linear infinite}
.ticker div span::before{content:"◆";margin-right:28px;font-size:8px;vertical-align:2px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none}}

/* Kopf */
.top{display:flex;align-items:center;gap:12px;padding:16px 0}
.top .adm{font:700 12px var(--body);letter-spacing:.3em;text-transform:uppercase;color:#05090d;background:var(--lime);padding:3px 8px}
.top .me{margin-left:auto;font-size:14px;color:var(--muted)}

section.screen{display:none}
section.screen.on{display:block}

/* Foto-Kopf: Trainingsfoto transparent im Hintergrund */
.hero{position:relative;isolation:isolate;padding:8px 0 30px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--bg,url(/img/hero-eltern.jpg)) var(--pos,center 40%)/cover no-repeat;opacity:.55;filter:grayscale(.15) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(5,9,13,.55) 0%,rgba(5,9,13,.35) 40%,var(--night) 100%),
  linear-gradient(90deg,rgba(5,9,13,.85) 0%,rgba(5,9,13,.1) 75%)}
.eyebrow{display:flex;align-items:center;gap:12px;font:700 11px var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--lime);margin:22px 0 14px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--lime)}
.headline{font:300 54px/.92 var(--body);letter-spacing:-.01em;text-transform:uppercase;margin:0 0 16px}
.headline span{display:block;color:var(--lime);font-weight:400}
.sub{color:#cfd6db;margin:0 0 22px;max-width:40ch}

/* "Nächstes Training" – Kasten wie "1:1 Training mit System" */
.next{display:flex;align-items:stretch;background:rgba(5,9,13,.82);border:1px solid var(--line2);max-width:420px}
.next i{width:3px;background:var(--lime);flex:none}
.next div{padding:12px 16px}
.next small{display:block;font:700 10px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.next b{display:block;font:600 26px/1.15 var(--cond);margin-top:2px}
.next em{font-style:normal;color:var(--muted);font-size:14px}

/* Freie Termine: Tag als Abschnitt, Zeiten als Zeilen (keine Karten) */
.day{margin:6px 0 34px}
.dayhead{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.dayhead b{font:700 56px/.8 var(--cond);color:var(--lime)}
.dayhead div{font:600 13px var(--body);letter-spacing:.18em;text-transform:uppercase}
.dayhead div small{display:block;font:400 13px var(--body);letter-spacing:.04em;text-transform:none;color:var(--muted);margin-top:2px}
.slot{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;width:100%;text-align:left;padding:16px 0 16px 0;border-bottom:1px solid var(--line);transition:padding .18s}
.slot::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--lime);transform:scaleY(0);transition:transform .18s}
.slot:hover,.slot:focus-visible{padding-left:14px}
.slot:hover::before,.slot:focus-visible::before{transform:scaleY(1)}
.slot .time{font:600 36px/1 var(--cond);white-space:nowrap}
.slot .time i{font-style:normal;font-size:16px;color:var(--muted);margin-left:6px;font-weight:500}
.slot .who{grid-column:1;font-size:14px;color:var(--muted)}
.slot .durs{grid-row:1/3;grid-column:2;display:flex;gap:6px}
.dur{font:700 15px var(--cond);letter-spacing:.04em;padding:8px 10px;border:1.5px solid var(--lime);color:var(--lime)}
.dur.solid{background:var(--lime);color:var(--ink)}

/* Buchungsfenster */
.sheet{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:rgba(2,5,8,.8)}
.sheet.on{display:flex}
.panel{width:100%;max-width:600px;background:var(--deep);border-top:3px solid var(--lime);padding:22px 20px calc(20px + env(safe-area-inset-bottom))}
.panel .big{font:700 56px/1 var(--cond)}
.panel .meta{margin:4px 0 18px;color:var(--muted)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{padding:12px;border:1.5px solid var(--line2);color:var(--muted);font-size:14px;text-align:left}
.seg button b{display:block;font:700 30px/1 var(--cond);color:var(--text)}
.seg button[aria-checked=true]{border-color:var(--lime);background:rgba(217,255,53,.08);color:var(--lime)}
.seg button[aria-checked=true] b{color:var(--lime)}
.seg button:disabled{opacity:.3;cursor:not-allowed}
.segnote{font-size:14px;color:var(--muted);margin:8px 0 16px;min-height:1.3em}
.segnote strong{color:var(--lime);font-weight:600}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted)} .facts dd{margin:0;font-weight:500}
.notice{border-left:3px solid var(--coral);padding:2px 0 2px 12px;font-size:14px;margin:0 0 18px;color:#e9c9c0}
/* Hauptknopf wie auf der Website: gelb, kantig, schwarzes Pfeil-Quadrat */
.cta{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 8px 8px 20px;background:var(--lime);color:var(--ink);font:700 14px var(--body);letter-spacing:.16em;text-transform:uppercase;min-height:58px}
.cta svg{width:42px;height:42px;background:var(--ink);padding:12px;flex:none}
.cta:hover{box-shadow:0 0 0 4px rgba(217,255,53,.18)}
.cta:disabled{opacity:.5;cursor:default;box-shadow:none}
.back{display:block;width:100%;padding:14px;margin-top:4px;color:var(--muted);text-align:center;font-size:15px}

/* Gebucht */
.ticket{border:1px solid var(--line2);margin:24px 0;background:var(--deep)}
.ticket .when{display:flex;justify-content:space-between;align-items:end;padding:18px;border-bottom:1px dashed var(--line2)}
.ticket .when b{font:700 40px/1 var(--cond)}
.ticket .when span{font:700 12px var(--body);letter-spacing:.2em;color:var(--lime);text-transform:uppercase}
.ticket dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;padding:16px 18px;margin:0}
.ticket dt{color:var(--muted)} .ticket dd{margin:0}

/* Meine Termine */
.appt{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.appt .d b{display:block;font:700 44px/.85 var(--cond);color:var(--lime)}
.appt .d small{display:block;font:600 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.appt .t{font:600 26px/1.1 var(--cond)}
.appt p{margin:2px 0 10px;color:var(--muted);font-size:15px}
.mark{display:inline-block;font:700 10px var(--body);letter-spacing:.18em;text-transform:uppercase;padding:3px 7px;vertical-align:5px;margin-left:8px}
.mark.soon{background:var(--lime);color:var(--ink)} .mark.moved{background:var(--sky);color:#04202b}
.textlink{font:600 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);border-bottom:1px solid var(--lime);padding-bottom:2px}
.textlink:disabled{color:var(--muted);border-color:transparent;cursor:not-allowed}
.appt .locked{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:14px;color:var(--coral)}
.past{opacity:.45}.past .d b{color:var(--text)}

label{display:block;font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
textarea{width:100%;background:var(--deep);border:1px solid var(--line2);padding:12px;margin-bottom:18px;resize:vertical}
.sent{display:none;border-left:3px solid var(--lime);padding:4px 0 4px 14px;margin-bottom:18px}
.sent b{color:var(--lime)}

/* ADMIN */
.admin .wrap{max-width:1180px}
.adminhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.adminhead .headline{font-size:44px;margin:0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line2);font:600 13px var(--body);letter-spacing:.12em;text-transform:uppercase}
.btn:hover{border-color:var(--lime)}
.btn.primary{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn.export{border-color:var(--lime);color:var(--lime)}
.btn svg{width:16px;height:16px}
.btn .sq{width:10px;height:10px;flex:none}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.band{position:relative;height:120px;margin:0 0 22px;overflow:hidden;border:1px solid var(--line)}
.band::before{content:"";position:absolute;inset:0;background:url(/img/fotos/stangen.jpg) center 45%/cover;opacity:.45}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--night) 10%,rgba(5,9,13,.2) 70%)}
.band div{position:relative;z-index:1;padding:22px 24px}
.band b{display:block;font:300 34px/1 var(--body);text-transform:uppercase}
.band small{color:var(--muted)}
.stats{display:flex;gap:28px;margin-top:10px}
.stats span{font-size:13px;color:var(--muted)} .stats b{font:700 24px var(--cond);color:var(--lime);display:inline;margin-right:6px}
.export{border:1px solid var(--lime);background:var(--deep);padding:18px;margin:0 0 18px;max-width:640px}
.export h3{margin:0 0 12px;font:300 26px/1 var(--body);text-transform:uppercase}
.export p{color:var(--muted);font-size:14px;margin:12px 0 16px}
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick button{padding:7px 12px;border:1px solid var(--line2);font-size:14px;color:var(--muted)}
.quick button[aria-pressed=true]{border-color:var(--lime);color:var(--lime)}
.range{display:flex;gap:12px;margin-top:12px}
.range label{margin:0;font-size:11px}
.range input{display:block;margin-top:6px;background:var(--panel);border:1px solid var(--line2);padding:8px;color-scheme:dark}
.export .cta{max-width:380px}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;margin:0 0 14px}
.legend span{display:flex;align-items:center;gap:8px}
.sw{width:16px;height:16px;flex:none}
.sw.free{border:1px solid #2ec4a0;background:rgba(46,196,160,.35)}
.sw.book{background:var(--lime)} .sw.int{background:var(--sky)} .sw.block{background:var(--coral)}
.conflict{border-left:4px solid var(--alert);padding:12px 16px;margin:0 0 18px;background:rgba(255,77,94,.08)}
.conflict h3{margin:0 0 4px;font:600 20px var(--cond)}
.conflict .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.conflict .opts button{padding:8px 12px;border:1px solid var(--line2);font-size:14px}
.conflict .opts button.danger{border-color:var(--alert);color:#ffb3ba}
.board{overflow-x:auto;border:1px solid var(--line);background:var(--deep)}
.grid{display:grid;grid-template-columns:58px repeat(7,minmax(128px,1fr));min-width:960px}
.gh{padding:10px 12px;border-left:1px solid var(--line);border-bottom:1px solid var(--line2)}
.gh b{font:700 13px var(--body);letter-spacing:.18em;text-transform:uppercase}
.gh small{display:block;font:700 24px/1 var(--cond);color:var(--muted);margin-top:2px}
.col{position:relative;border-left:1px solid var(--line);height:calc(var(--hours) * var(--px))}
.col::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--px));pointer-events:none}
.times{position:relative;height:calc(var(--hours) * var(--px))}
.times span{position:absolute;left:10px;font:600 14px var(--cond);color:var(--muted);padding-top:4px}
.win{--tc:#2ec4a0;position:absolute;left:4px;right:4px;border:1px solid var(--tc);background:color-mix(in srgb,var(--tc) 40%,transparent)}
.win small{position:absolute;bottom:4px;left:6px;font-size:11px;color:#eafff8}
.blk{position:absolute;left:8px;right:8px;padding:4px 8px;font-size:13px;line-height:1.25;overflow:hidden}
.blk b{display:block;font:700 15px var(--cond)}
.blk.book{background:var(--lime);color:var(--ink)}
.blk.int{background:var(--sky);color:#04202b}
.blk.block{background:var(--coral);color:#2b0a03}

.foot{font-size:12px;color:var(--muted);text-align:center;padding:36px 20px}
@media (prefers-reduced-motion:no-preference){
  .sheet.on .panel{animation:up .24s cubic-bezier(.2,.8,.2,1)}
  @keyframes up{from{transform:translateY(30px)}to{transform:none}}
}
@media (min-width:700px){ .headline{font-size:68px} }

/* ================= Echte App: Ergänzungen ================= */
[hidden]{display:none!important}
body{min-height:100vh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
body.noapp{padding-bottom:env(safe-area-inset-bottom)}
input,select{font:inherit;color:inherit}
.field{margin:0 0 18px}
.field input,.field select{width:100%;background:var(--deep);border:1px solid var(--line2);padding:13px 12px;color-scheme:dark;border-radius:0}
.field input:focus,.field select:focus,textarea:focus{border-color:var(--lime);outline:none}
.hint{font-size:14px;color:var(--muted);margin:-8px 0 18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
@media (max-width:420px){.row3{grid-template-columns:1fr 1fr}.row3 .field:first-child{grid-column:1/3}}

/* Meldungen */
.msg{border-left:3px solid var(--line2);background:var(--deep);padding:12px 14px;margin:0 0 18px;font-size:15px}
.msg.ok{border-color:var(--lime)} .msg.bad{border-color:var(--alert);color:#ffd0d5}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom));z-index:60;max-width:min(560px,calc(100% - 32px));background:var(--deep);border:1px solid var(--line2);border-left:3px solid var(--lime);padding:12px 16px;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.bad{border-left-color:var(--alert)}
.loading{padding:40px 0;color:var(--muted);text-align:center}
.empty{border:1px dashed var(--line2);padding:22px 18px;color:var(--muted);margin:10px 0 30px}
.empty b{display:block;color:var(--text);font:600 22px var(--cond);margin-bottom:4px}

/* Untere Navigation (wie App) */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(5,9,13,.96);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(8px)}
.tabs .in{max-width:600px;margin:0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.admin-mode .tabs .in{max-width:1180px}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 12px;color:var(--muted);text-decoration:none;font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;border-top:2px solid transparent;margin-top:-1px}
.tabs a svg{width:22px;height:22px}
.tabs a[aria-current=page]{color:var(--lime);border-top-color:var(--lime)}
.tabs .badge{display:inline-block;min-width:18px;padding:1px 5px;background:var(--coral);color:#2b0a03;font-size:11px;letter-spacing:0;margin-left:2px}

/* Kinderwahl */
.kids{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.kids button{padding:9px 14px;border:1.5px solid var(--line2);color:var(--muted);font:600 15px var(--body)}
.kids button[aria-pressed=true]{border-color:var(--lime);color:var(--lime);background:rgba(217,255,53,.08)}

/* Konto */
.list{border-top:1px solid var(--line);margin:0 0 26px}
.list > div,.list > button{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 0;border-bottom:1px solid var(--line)}
.list small{display:block;color:var(--muted);font-size:14px}
.list .go{color:var(--lime);font:600 13px var(--body);letter-spacing:.14em;text-transform:uppercase;flex:none}
h2.sec{font:600 13px var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:28px 0 10px}

/* Anmelden */
.auth .hero{padding-bottom:10px}
.auth form{max-width:440px}
.linkbtn{color:var(--muted);text-decoration:underline;font-size:15px;padding:6px 0}

/* Admin */
.admin-mode .wrap{max-width:1180px}
.weeknav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.weeknav .btn{padding:9px 12px}
.blk.req{outline:2px solid var(--coral);outline-offset:-2px}
.win.draft{border:1px dashed var(--tc);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tc) 22%,transparent) 0 6px,transparent 6px 12px)}
.win.draft small{color:var(--tc)}
.win{cursor:pointer}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:0 0 26px}
.card{border:1px solid var(--line2);background:var(--deep);padding:16px}
.card h3{margin:0 0 4px;font:600 22px/1.15 var(--cond)}
.card p{margin:4px 0 12px;color:var(--muted);font-size:15px}
.card .quote{color:var(--text);border-left:2px solid var(--line2);padding-left:10px}
.card .opts{display:flex;flex-wrap:wrap;gap:8px}
.btn.danger{border-color:var(--alert);color:#ffb3ba}
.btn:disabled{opacity:.5;cursor:default}
.panel h3{margin:0 0 14px;font:300 30px/1 var(--body);text-transform:uppercase}
.tickedit{display:grid;gap:8px;margin:0 0 14px;max-width:560px}
.tickedit div{display:grid;grid-template-columns:1fr auto;gap:8px}
.tickedit input{background:var(--deep);border:1px solid var(--line2);padding:11px 12px}
.tickedit button{padding:0 14px;border:1px solid var(--line2);color:var(--muted)}
.preview{margin:0 0 18px;max-width:560px;border:1px solid var(--line)}

a.btn,a.cta,a.back,a.textlink{text-decoration:none}
a.btn{color:var(--text)} a.cta{color:var(--ink)} a.back{color:var(--muted)} a.textlink{display:inline-block;color:var(--lime)}
.tabs a span{white-space:nowrap}.tabs .badge{font-style:normal}

.blk.book{box-shadow:inset 4px 0 0 var(--tc,transparent)}
.win small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 10px)}
.blk[data-occ]{cursor:pointer}.blk[data-occ]:hover,.blk[data-occ]:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
#sheet .panel{max-height:92vh;overflow:auto}
.dur.ask{border-style:dashed;border-color:var(--sky);color:var(--sky)}
/* Installieren & Einladung */
.inst{border:1px solid var(--line2);background:var(--deep);padding:18px;margin:0 0 24px;display:flex;flex-direction:column;gap:6px}
.inst b{font:600 22px/1.15 var(--cond)}
.inst span{color:var(--muted);font-size:15px}
.inst.ok{border-color:var(--lime)}
.steps{list-style:none;padding:0;margin:8px 0;display:grid;gap:10px}
.steps li{display:flex;gap:12px;align-items:center;font-size:16px}
.steps i{flex:none;width:28px;height:28px;display:grid;place-items:center;background:var(--lime);color:var(--ink);font:700 15px var(--cond);font-style:normal}
.check{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:15px;color:var(--text);margin:0 0 18px}
.check input{margin-top:4px;flex:none;width:18px;height:18px}
.linkbox{font:600 15px/1.4 var(--body);word-break:break-all;background:var(--ink);border:1px dashed var(--lime);padding:12px;color:var(--lime);user-select:all;margin:6px 0 12px}
details.more{margin:0 0 26px}
details.more summary{cursor:pointer;color:var(--muted);font-size:15px;padding:8px 0}
.kidchip{display:inline-block;margin:4px 6px 0 0;padding:3px 8px;border:1px solid var(--line2);color:var(--text);font-size:13px}
.kidchip.off{color:var(--muted);border-style:dashed}
.kidrow{border-left:2px solid var(--line2);padding-left:12px;margin:0 0 6px}