/* Layout: Kopfzeile mit Firmenname und Reiter, Tageswahl mit Wochenleiste,
   darunter Raster (14 Räume x Stunden) bzw. 10 Platzkarten, darunter "Meine Buchungen". */
:root{
  /* Markenfarben nach der neuen Website: tiefes Grün, Creme, Gold */
  --paper:#F3EFE6; --surface:#FBF9F4; --ink:#14261E; --ink-2:#4F6357; --line:#DDD6C4; --line-strong:#BFB596; --hover:#ECE6D6;
  --accent:#1B4D3A; --accent-ink:#F7F3EA; --head:#0F2D21;
  --gold:#C8AE7D; --gold-ink:#7E5F25;
  --mine:#D4B26C; --mine-ink:#2A1F08;
  --busy:#DCE8E0; --busy-ink:#123528; --past:#E6E1D3;
  --ok:#1B7A4B; --danger:#B3261E; --danger-bg:#FBE9E7;
  --frame:rgba(18,53,40,.22); --veil:rgba(10,26,19,.62); --bg-img:none; --logo-s:url(img/logo-klein-dunkelgold.svg?v=16); --logo-l:url(img/logo-dunkelgold.svg?v=16);
  color-scheme:light;
  --f-logo:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --f-display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#133A2B; --surface:#194333; --ink:#F3EFE6; --ink-2:#AFC6B9; --line:rgba(205,173,113,.24); --line-strong:rgba(205,173,113,.55); --hover:#21503D;
    --accent:#CDAD71; --accent-ink:#123528; --head:#F3EFE6;
    --gold:#C8AE7D; --gold-ink:#D6BF8F;
    --mine:#CDAD71; --mine-ink:#241B07;
    --busy:#25503F; --busy-ink:#E6EFE9; --past:#1D4535;
    --ok:#7FD6A5; --danger:#FF8A80; --danger-bg:#3F1F1D;
    --frame:rgba(205,173,113,.38); --veil:rgba(6,20,14,.74);
    --bg-img:radial-gradient(ellipse 90% 70% at 50% 18%, #225E47 0%, #1A4A38 48%, #143A2B 100%); --logo-s:url(img/logo-klein-gold.svg?v=16); --logo-l:url(img/logo-gold.svg?v=16);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#133A2B; --surface:#194333; --ink:#F3EFE6; --ink-2:#AFC6B9; --line:rgba(205,173,113,.24); --line-strong:rgba(205,173,113,.55); --hover:#21503D;
  --accent:#CDAD71; --accent-ink:#123528; --head:#F3EFE6;
  --gold:#C8AE7D; --gold-ink:#D6BF8F;
  --mine:#CDAD71; --mine-ink:#241B07;
  --busy:#25503F; --busy-ink:#E6EFE9; --past:#1D4535;
  --ok:#7FD6A5; --danger:#FF8A80; --danger-bg:#3F1F1D;
  --frame:rgba(205,173,113,.38); --veil:rgba(6,20,14,.74);
  --bg-img:radial-gradient(ellipse 90% 70% at 50% 18%, #225E47 0%, #1A4A38 48%, #143A2B 100%); --logo-s:url(img/logo-klein-gold.svg?v=16); --logo-l:url(img/logo-gold.svg?v=16);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{
  background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.45;
  padding-block:20px 48px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.wrap{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:.01em; text-wrap:balance}

/* Kopf */
.top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 24px}
.brand{display:flex; flex-direction:column; min-width:0}
.brand .eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.brand h1{font-size:40px; line-height:1; text-transform:uppercase; color:var(--accent)}
.status{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.status i{width:8px; height:8px; border-radius:50%; background:var(--ink-2); display:inline-block}
.status.live i{background:var(--ok)}
.status.demo i{background:var(--mine)}

.tabs{display:flex; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--surface); width:100%; max-width:460px}
.tabs button{flex:1; border:0; background:transparent; padding:11px 14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0}
.tabs button span.n{font-family:var(--f-mono); font-size:12px; color:var(--ink-2)}
.tabs button[aria-selected="true"]{background:var(--accent); color:var(--accent-ink)}
.tabs button[aria-selected="true"] span.n{color:inherit; opacity:.85}
.tabs button + button{border-left:1px solid var(--line)}

.banner{background:var(--surface); border:1px dashed var(--line); border-radius:6px; padding:10px 14px; font-size:13px; color:var(--ink-2)}
.banner strong{color:var(--ink)}

/* Tageswahl */
.daybar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.daynav{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.daynav h2{font-size:30px; line-height:1.1; min-width:0}
.daynav .today-tag{font-family:var(--f-body); font-size:12px; font-weight:600; background:var(--accent); color:var(--accent-ink); border-radius:4px; padding:2px 8px; margin-left:6px; vertical-align:middle; letter-spacing:.04em; text-transform:uppercase}
.btn{border:1px solid var(--line); background:var(--surface); padding:9px 14px; border-radius:6px; font-weight:500}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff; font-weight:600}
.btn.sm{padding:5px 10px; font-size:13px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.iconbtn{width:40px; height:40px; padding:0; display:inline-grid; place-items:center; font-size:20px; line-height:1}
#date-in{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:8px 10px; height:40px}

.strip{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.strip button{border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:8px 2px; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0}
.strip button small{font-size:11px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em}
.strip button b{font-family:var(--f-display); font-size:24px; line-height:1.05}
.strip button em{font-style:normal; font-size:11px; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.strip button[aria-current="date"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.strip button[aria-current="date"] small,.strip button[aria-current="date"] em{color:inherit; opacity:.9}
.strip button[disabled]{opacity:.4; cursor:not-allowed}

.summary{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
.summary p{margin:0; color:var(--ink-2)}
.summary p b{color:var(--ink); font-variant-numeric:tabular-nums}

/* Raumraster */
.scroller{overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.board{min-width:900px}
.row{display:grid; grid-template-columns:112px repeat(var(--n,13), minmax(0,1fr)); align-items:stretch}
.row + .row{border-top:1px solid var(--line)}
.row.head{background:var(--paper)}
.lab{position:sticky; left:0; z-index:2; background:var(--surface); display:flex; align-items:center; padding:0 12px; font-family:var(--f-display); font-weight:600; font-size:19px; border-right:1px solid var(--line)}
.row.head .lab{background:var(--paper); font-family:var(--f-body); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.hh{padding:8px 0; text-align:center; font-family:var(--f-mono); font-size:12px; color:var(--ink-2); border-left:1px solid var(--line)}
.slot{min-height:46px; border:0; border-left:1px solid var(--line); background:transparent; padding:0; display:grid; place-items:center; color:var(--ink-2); min-width:0}
.slot.free span{opacity:0; font-size:18px}
.slot.free:hover{background:var(--hover)}
.slot.free:hover span{opacity:1; color:var(--accent)}
.slot.free[disabled]{background:repeating-linear-gradient(135deg, transparent 0 6px, var(--past) 6px 7px); cursor:not-allowed}
.slot.free[disabled]:hover span{opacity:0}
.bh{padding:7px 0; text-align:center; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border-left:1px solid var(--line)}
.slot.free.blk span{opacity:.7; font-size:12px; font-weight:500}
.slot.free.blk:hover span{opacity:1; color:var(--accent)}
.slot.free.blk[disabled]:hover span{opacity:.7; color:inherit}
.slot.busy{margin:3px 2px; border:0; border-radius:5px; background:var(--busy); color:var(--busy-ink); text-align:left; padding:4px 8px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:0; overflow:hidden; line-height:1.2}
.slot.busy b{font-weight:600; font-size:13px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slot.busy small{font-size:11px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85}
.slot.busy:hover{filter:brightness(.96)}
.slot.mine{background:var(--mine); color:var(--mine-ink)}

/* Parkplätze */
.spots{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.spot{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:12px 14px 14px; text-align:left; display:flex; flex-direction:column; gap:4px; min-width:0}
.spot .pn{font-family:var(--f-display); font-weight:700; font-size:46px; line-height:.9; display:flex; align-items:baseline; gap:4px}
.spot .pn small{font-size:14px; font-weight:600; letter-spacing:.1em; color:var(--ink-2); text-transform:uppercase}
.spot .st{font-weight:600; font-size:14px; display:flex; align-items:center; gap:7px}
.spot .st i{width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block; flex:none}
.spot .sub{font-family:var(--f-mono); font-size:13px; min-height:1.4em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spot.free:hover{background:var(--hover); border-color:var(--accent)}
.spot.free[disabled]{background:repeating-linear-gradient(135deg, transparent 0 6px, var(--past) 6px 7px); cursor:not-allowed}
.spot.busy{background:var(--busy); color:var(--busy-ink); border-color:transparent}
.spot.busy .st i{background:var(--busy-ink)}
.spot.busy .pn small{color:inherit; opacity:.8}
.spot.mine{background:var(--mine); color:var(--mine-ink); border-color:transparent}
.spot.mine .st i{background:var(--mine-ink)}
.spot.mine .pn small{color:inherit; opacity:.8}

/* Meine Buchungen */
.mine-box{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:10px}
.mine-box h3{font-size:22px}
.mine-box ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.mine-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.mine-item:first-child{border-top:0}
.mine-acts{display:flex; gap:8px; flex-wrap:wrap}
.mine-item .go{border:0; background:transparent; padding:0; text-align:left; display:flex; flex-wrap:wrap; gap:2px 12px; align-items:baseline; min-width:0}
.mine-item .go strong{font-family:var(--f-display); font-size:20px}
.mine-item .go span{color:var(--ink-2); font-variant-numeric:tabular-nums}
.empty{margin:0; color:var(--ink-2)}
.rules{font-size:13px; color:var(--ink-2); margin:0}

/* Dialog */
.overlay{position:fixed; inset:0; background:rgba(8,16,12,.6); display:grid; place-items:center; padding:16px; z-index:50; overflow:auto}
.dialog{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; width:100%; max-width:520px; padding:22px; display:flex; flex-direction:column; gap:14px}
.dialog h2{font-size:30px; color:var(--accent)}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
label.f{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--ink-2); min-width:0}
label.f.wide{grid-column:1/-1}
label.f select,label.f input{border:1px solid var(--line); background:var(--paper); border-radius:6px; padding:9px 10px; height:42px; font-weight:400; color:var(--ink); min-width:0; width:100%}
label.f input.plate{font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.04em}
.hint{margin:0; padding:9px 12px; border-radius:6px; font-size:14px; background:var(--hover); color:var(--ink)}
.hint.err{background:var(--danger-bg); color:var(--danger)}
.actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
.facts{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0}
.facts dt{color:var(--ink-2); font-size:13px; padding-top:2px}
.facts dd{margin:0; font-weight:500; min-width:0; overflow-wrap:anywhere}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:8px; font-weight:500; z-index:60; max-width:calc(100% - 32px)}

@media (max-width:640px){
  .brand h1{font-size:34px}
  .daynav h2{font-size:25px}
  .dialog{padding:18px}
}
@media (prefers-reduced-motion: no-preference){
  .slot,.spot,.btn{transition:background-color .12s, filter .12s}
}

/* Anmeldung und Verwaltung */
.top-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:0}
.userbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 14px; font-size:13px; color:var(--ink-2)}
.userbar b{color:var(--ink); font-weight:600}
.linkbtn{border:0; background:transparent; padding:6px 0; color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.auth{max-width:440px; margin:6vh auto 0; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:24px; display:flex; flex-direction:column; gap:14px}
.auth h2{font-size:32px; color:var(--accent)}
.auth p{margin:0; color:var(--ink-2)}
.auth .fields{grid-template-columns:1fr}
.dialog.wide{max-width:660px}
.ulist{display:flex; flex-direction:column}
.urow{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line)}
.urow:first-child{border-top:0}
.urow .who{min-width:0}
.urow .who strong{display:block; overflow-wrap:anywhere}
.urow .who > span{color:var(--ink-2); font-size:13px; font-family:var(--f-mono)}
.tag{display:inline-block; font-family:var(--f-body); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle}
.urow .btns{display:flex; flex-wrap:wrap; gap:6px}
.inline{display:flex; gap:8px; flex-wrap:wrap; width:100%}
.inline input{flex:1; min-width:150px; border:1px solid var(--line); background:var(--paper); border-radius:6px; padding:8px 10px; height:38px; color:var(--ink)}
label.chk{display:flex; gap:8px; align-items:center; font-weight:500; color:var(--ink); font-size:14px}
label.chk input{width:auto; height:auto}
.subhead{font-size:20px; margin-top:4px}
.pwrow{display:flex; gap:8px; align-items:flex-end}
.pwrow label.f{flex:1}
@media (max-width:640px){ .top-right{align-items:flex-start} .userbar{justify-content:flex-start} }
.dialog form, .auth form{display:flex; flex-direction:column; gap:14px}

.tag.rec{background:var(--busy); color:var(--busy-ink); box-shadow:inset 0 0 0 1px var(--line)}
.urow select{border:1px solid var(--line); background:var(--paper); border-radius:6px; padding:5px 8px; height:34px; color:var(--ink)}

/* Meldungen und E-Mail */
.notices .notice{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--mine); border-radius:8px; padding:12px 14px}
.notice .nbody{min-width:0; flex:1 1 320px}
.notice ul{margin:6px 0 0; padding-left:18px}
.notice li{margin:2px 0; overflow-wrap:anywhere}
.notice li.more{list-style:none; margin-left:-18px; color:var(--ink-2)}
.notice time, .nlist time{color:var(--ink-2); font-size:13px; white-space:nowrap}
.notice .nbtns{display:flex; gap:8px; flex-wrap:wrap}
.nlist{list-style:none; margin:0; padding:0; max-height:50vh; overflow:auto}
.nlist li{display:flex; flex-direction:column; gap:2px; padding:9px 0 9px 14px; border-top:1px solid var(--line); border-left:4px solid transparent; overflow-wrap:anywhere}
.nlist li:first-child{border-top:0}
.nlist li.new{border-left-color:var(--mine); font-weight:500}
.chk{display:flex; gap:10px; align-items:center}
.chk input{width:18px; height:18px; accent-color:var(--accent)}
.urow .who .ml{display:block; font-style:normal; color:var(--ink-2); font-size:13px; overflow-wrap:anywhere}

/* ===== Markenstil: angelehnt an die neue Website (Serifenschrift, Gold, schmale Linien, eckige Formen) ===== */
body{background-color:var(--paper); background-image:var(--bg-img); background-attachment:fixed}
body::before,body::after{content:""; position:fixed; pointer-events:none; border:1px solid var(--frame); z-index:1}
body::before{inset:10px}
body::after{inset:16px; opacity:.55}
body{padding-block:34px 56px; padding-left:max(34px, env(safe-area-inset-left, 0px)); padding-right:max(34px, env(safe-area-inset-right, 0px))}
@media (max-width:760px){
  body::after{display:none}
  body::before{inset:6px}
  body{padding-block:22px 40px; padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px))}
}
h1,h2,h3{font-weight:400; letter-spacing:0}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* Kopf mit Monogramm */
.brand{flex-direction:row; align-items:center; gap:16px}
.brand .mark{flex:none; width:58px; height:58px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-style:italic; font-size:25px; color:var(--gold-ink); padding-right:2px}
.brand h1{font-size:46px; line-height:1; text-transform:none; color:var(--head); font-weight:400}
.brand .sub{display:flex; align-items:center; gap:12px; margin-top:9px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-2); font-weight:500}
.brand .sub::before,.brand .sub::after{content:""; height:1px; width:30px; background:var(--gold)}
.brand .sub::after{width:18px; opacity:.6}
@media (max-width:640px){ .brand h1{font-size:34px} .brand .mark{width:46px; height:46px; font-size:20px} .brand .sub{letter-spacing:.2em; font-size:10px} }

/* Schaltflächen: eckig, Großbuchstaben, schmale Linie */
.btn{border-radius:0; border:1px solid var(--line-strong); background:transparent; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:600; padding:11px 18px}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent); filter:brightness(1.08)}
.btn.danger{border-radius:0}
.btn.sm{padding:6px 12px; font-size:11px}
.iconbtn{padding:0; font-size:20px; letter-spacing:0}
.linkbtn{text-transform:none; letter-spacing:.02em; font-weight:500; color:var(--accent); text-decoration-color:var(--gold)}
:root:not([data-theme="dark"]) .linkbtn{color:var(--head)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .linkbtn{color:var(--accent)} }

/* Flächen: eckig mit schmalen Linien */
.tabs,.banner,.scroller,.spot,.mine-box,.auth,.notices .notice,.hint,.toast,.strip button,#date-in,label.f select,label.f input,.inline input,.urow select{border-radius:0}
.dialog{border-radius:0; border-color:var(--line-strong); box-shadow:inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--line)}
.dialog,.auth{padding:30px}
@media (max-width:640px){ .dialog,.auth{padding:24px} }
.overlay{background:var(--veil)}
.tabs{border-color:var(--line-strong); max-width:480px}
.tabs button{text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:600; padding:13px 14px}
.tabs button + button{border-left-color:var(--line-strong)}
.tabs button[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--gold)}
.scroller,.spot,.mine-box,.strip button,#date-in,label.f select,label.f input,.inline input,.urow select{border-color:var(--line-strong)}
.row + .row,.hh,.slot,.bh,.lab,.mine-item,.urow,.nlist li{border-color:var(--line)}
.daynav h2{font-size:34px; line-height:1.1}
.daynav .today-tag{border-radius:0; background:transparent; color:var(--gold-ink); border:1px solid var(--gold); letter-spacing:.16em; font-weight:600; padding:2px 8px}
.strip button b{font-weight:400; font-size:26px}
.strip button small{letter-spacing:.16em}
.strip button[aria-current="date"]{box-shadow:inset 0 -3px 0 var(--gold)}
.row.head .lab,.bh{letter-spacing:.18em}
.bh{color:var(--gold-ink)}
.lab{font-weight:400; font-size:20px}
.slot.busy{border-radius:0; margin:3px 3px}
.slot.mine,.spot.mine{box-shadow:inset 3px 0 0 rgba(0,0,0,.18)}
.spot{padding:14px 16px 16px}
.spot .pn{font-weight:400; font-size:50px}
.spot .pn small{letter-spacing:.22em}
.spot.free:hover{border-color:var(--gold)}
.mine-box h3{font-size:26px}
.mine-item .go strong{font-weight:400; font-size:22px}
.subhead,.dialog h2,.auth h2{font-weight:400}
.dialog h2{font-size:32px; color:var(--head)}
.dialog h2::after,.auth h2::after{content:""; display:block; width:44px; height:1px; background:var(--gold); margin-top:12px}
.auth{border-color:var(--line-strong); box-shadow:inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--line)}
.auth .brand{flex-direction:column; align-items:flex-start; gap:14px}
.auth .brand h1{font-size:40px}
label.f{letter-spacing:.06em; text-transform:uppercase; font-size:11px; font-weight:600}
label.f input,label.f select{text-transform:none; letter-spacing:0; font-size:15px}
label.f input.plate{text-transform:uppercase; letter-spacing:.06em}
.tag{border-radius:0; letter-spacing:.14em}
.tag.rec{box-shadow:inset 0 0 0 1px var(--gold); background:transparent; color:var(--gold-ink)}
.notices .notice{border-left:4px solid var(--gold); border-color:var(--line-strong); border-left-color:var(--gold)}
.toast{background:var(--head); color:var(--paper); border:1px solid var(--gold); letter-spacing:.02em}
:root[data-theme="dark"] .toast{color:#123528}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .toast{color:#123528} }
.status.live i{background:var(--ok)}
.hint{background:var(--hover)}
.rules{letter-spacing:.01em}
label.f.bl{grid-column:1/-1}
@media (max-width:640px){
  .tabs button{letter-spacing:.06em; font-size:11px; padding:13px 6px; gap:6px}
  .strip{gap:4px}
  .strip button small{letter-spacing:.08em}
  .strip button em{font-size:10px; letter-spacing:0}
  .btn{padding:11px 14px}
}

/* Serifenschrift nur im Logo, sonst klare Schrift ohne Serifen */
.brand .mark,.brand h1{font-family:var(--f-logo)}
h1,h2,h3{font-weight:600; letter-spacing:-.01em}
.brand h1{font-weight:400; letter-spacing:0}
.daynav h2{font-size:30px; font-weight:600}
.strip button b{font-weight:600; font-size:23px}
.lab{font-weight:600; font-size:16px}
.spot .pn{font-weight:600; font-size:46px}
.mine-box h3{font-size:22px}
.mine-item .go strong{font-weight:600; font-size:18px}
.subhead,.dialog h2,.auth h2{font-weight:600}
.dialog h2{font-size:26px}
.auth h2{font-size:26px}
@media (max-width:640px){ .daynav h2{font-size:24px} }

/* Umschalter hell/dunkel: Sonne, halb gefüllt, oben rechts in der Ecke */
body{position:relative}
.themebtn{position:absolute; top:30px; right:34px; z-index:3; width:44px; height:44px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--gold-ink); cursor:pointer}
.themebtn svg{display:block; transition:transform .45s ease}
.themebtn[data-mode="dark"] svg{transform:rotate(180deg)}
.themebtn:hover{background:var(--hover)}
.top{padding-right:58px}
@media (max-width:760px){ .themebtn{top:18px; right:14px} .top{padding-right:50px} }
@media (prefers-reduced-motion: reduce){ .themebtn svg{transition:none} }
@media (max-width:640px){
  .brand .sub{white-space:nowrap; gap:8px; letter-spacing:.14em; font-size:10px}
  .brand .sub::before{width:16px}
  .brand .sub::after{display:none}
  .brand{gap:12px}
}

/* Logo (Bildmarke Herz-Held) statt Siegel; im Hellen dunkelgold, im Dunklen gold */
.brand .mark{width:56px; height:59px; border:0; border-radius:0; background:var(--logo-s) center/contain no-repeat; font-size:0; padding:0; display:block; flex:none}
.auth .brand .mark{width:80px; height:85px; background-image:var(--logo-l)}
@media (max-width:640px){ .brand .mark{width:44px; height:46px} .auth .brand .mark{width:70px; height:74px} }
.brand .mark{width:62px; height:65px}
@media (max-width:640px){ .brand .mark{width:48px; height:50px} }

/* Fußzeile */
body{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
.wrap{width:100%}
.site-foot{margin-top:auto; padding-top:36px; text-align:center; font-size:12px; letter-spacing:.08em; color:var(--ink-2); position:relative; z-index:2}
.site-foot a{color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}
.site-foot{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 6px}
.site-foot a:hover{color:var(--head)}