/* Treffpunkt – edle Gestaltung mit Jahreszeiten.
   Die Jahreszeit steht in <html data-season="winter|fruehling|sommer|herbst"> (gesetzt von season.js).
   Layout: schmale App-Spalte auf ruhigem, saisonal getöntem Grund; Karten als helles Milchglas. */
:root{
  --f-display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:18px;
  --glass:rgba(255,255,255,.64);
  --glass-strong:rgba(255,255,255,.88);
  --shadow:0 1px 2px rgba(20,28,45,.05),0 10px 30px -12px rgba(20,28,45,.16);
  --glow:rgba(120,140,170,.18);
  --flake:#ffffff; --flake-edge:rgba(60,95,140,.42);
}

/* ---------- Jahreszeiten: helle Farben ---------- */
:root[data-season="winter"]{
  --bg:#E9EEF4; --surface:#FFFFFF; --sunk:#E1E8F0; --ink:#132036; --muted:#566379; --line:#D3DCE7;
  --accent:#2D5B88; --accent-soft:#DCE6F1; --on-accent:#FFFFFF;
  --glow:rgba(150,185,225,.45);
}
:root[data-season="fruehling"]{
  --bg:#EFF3EC; --surface:#FFFFFF; --sunk:#E4EBE0; --ink:#1C2A21; --muted:#5A6A5E; --line:#D6E0D2;
  --accent:#4E7A55; --accent-soft:#DDEAD9; --on-accent:#FFFFFF;
  --glow:rgba(240,190,205,.42);
}
:root[data-season="sommer"]{
  --bg:#EEF4F3; --surface:#FFFFFF; --sunk:#E0ECEA; --ink:#13292B; --muted:#516A6C; --line:#D2E2E0;
  --accent:#17717F; --accent-soft:#D6ECEE; --on-accent:#FFFFFF;
  --glow:rgba(255,214,140,.42);
}
:root[data-season="herbst"]{
  --bg:#F1EEEB; --surface:#FFFFFF; --sunk:#E9E3DE; --ink:#2A1D1F; --muted:#6E5D5E; --line:#E2D9D3;
  --accent:#7B2F3E; --accent-soft:#F0DFE2; --on-accent:#FFFFFF;
  --glow:rgba(222,150,90,.32);
}

/* ---------- Jahreszeiten: dunkle Farben ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --glass:rgba(22,26,36,.72); --glass-strong:rgba(26,31,43,.92); --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6); --flake-edge:rgba(255,255,255,0) }
  :root[data-season="winter"]:not([data-theme="light"]){ --bg:#0D131D; --surface:#151C29; --sunk:#1B2433; --ink:#E6ECF5; --muted:#9AA8BC; --line:#263247; --accent:#8DB5E2; --accent-soft:#1E2E45; --on-accent:#0D131D; --glow:rgba(90,130,190,.25) }
  :root[data-season="fruehling"]:not([data-theme="light"]){ --bg:#0F1511; --surface:#161E18; --sunk:#1C261F; --ink:#E5EEE6; --muted:#9DB0A1; --line:#27352B; --accent:#9CCB9F; --accent-soft:#1F3224; --on-accent:#0F1511; --glow:rgba(190,110,140,.18) }
  :root[data-season="sommer"]:not([data-theme="light"]){ --bg:#0C1516; --surface:#131E20; --sunk:#192729; --ink:#E2EFEF; --muted:#94ADAF; --line:#22373A; --accent:#78C7D2; --accent-soft:#163236; --on-accent:#0C1516; --glow:rgba(200,160,80,.18) }
  :root[data-season="herbst"]:not([data-theme="light"]){ --bg:#161012; --surface:#1E1719; --sunk:#271E20; --ink:#F1E7E8; --muted:#B3A1A3; --line:#3A2C2F; --accent:#E3A0AC; --accent-soft:#3A2228; --on-accent:#161012; --glow:rgba(200,110,60,.18) }
}
:root[data-theme="dark"]{ --glass:rgba(22,26,36,.72); --glass-strong:rgba(26,31,43,.92); --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6); --flake-edge:rgba(255,255,255,0) }
:root[data-theme="dark"][data-season="winter"]{ --bg:#0D131D; --surface:#151C29; --sunk:#1B2433; --ink:#E6ECF5; --muted:#9AA8BC; --line:#263247; --accent:#8DB5E2; --accent-soft:#1E2E45; --on-accent:#0D131D; --glow:rgba(90,130,190,.25) }
:root[data-theme="dark"][data-season="fruehling"]{ --bg:#0F1511; --surface:#161E18; --sunk:#1C261F; --ink:#E5EEE6; --muted:#9DB0A1; --line:#27352B; --accent:#9CCB9F; --accent-soft:#1F3224; --on-accent:#0F1511; --glow:rgba(190,110,140,.18) }
:root[data-theme="dark"][data-season="sommer"]{ --bg:#0C1516; --surface:#131E20; --sunk:#192729; --ink:#E2EFEF; --muted:#94ADAF; --line:#22373A; --accent:#78C7D2; --accent-soft:#163236; --on-accent:#0C1516; --glow:rgba(200,160,80,.18) }
:root[data-theme="dark"][data-season="herbst"]{ --bg:#161012; --surface:#1E1719; --sunk:#271E20; --ink:#F1E7E8; --muted:#B3A1A3; --line:#3A2C2F; --accent:#E3A0AC; --accent-soft:#3A2228; --on-accent:#161012; --glow:rgba(200,110,60,.18) }

/* ---------- Grund und Hintergrund-Animation ---------- */
body{
  background:
    radial-gradient(1100px 520px at 50% -140px,var(--glow),transparent 70%),
    var(--bg);
  background-attachment:fixed;
  font-size:15.5px;line-height:1.55;letter-spacing:.005em;
  transition:background-color .6s ease;
}
#season-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
main,.toast{position:relative;z-index:1}
.toast{position:fixed}
body::before{background:var(--glass-strong)}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:-.005em;line-height:1.08}
.hero h1,.profile-head h1{font-size:clamp(2.2rem,5.6vw,3.2rem);font-weight:400}
h2{font-size:clamp(1.55rem,3.4vw,1.9rem);font-weight:400}
h3{font-size:1.32rem;font-weight:400}
.hero{gap:10px;padding-top:12px}
.hero p{font-size:1.02rem;max-width:56ch}
.field label,.lbl,.cat,.grp,.day .wd,.plan .date span{letter-spacing:.12em;font-weight:600}
.num,.price{font-family:var(--f-mono)}

/* ---------- Kopfzeile ---------- */
.top{background:var(--glass-strong);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.brand b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;letter-spacing:0}
.tabs{background:transparent;border:1px solid var(--line);padding:3px}
.tabs button{font-weight:500;padding:6px 14px}
.tabs button[aria-current="page"]{background:var(--accent);color:var(--on-accent);box-shadow:none}

/* ---------- Flächen ---------- */
.card,.plan,.ticket,.genbox,.empty,.groupbox{backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2)}
.card,.plan,.ticket{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card{padding:24px;gap:18px}
.genbox{background:color-mix(in srgb,var(--accent-soft) 70%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:var(--r)}
.empty{background:var(--glass);border:1px dashed var(--line);border-radius:var(--r)}
.empty b{font-family:var(--f-display);font-weight:400;font-size:1.35rem}
.notice{border-radius:14px}
.plan{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.plan:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.plan .date{border-radius:14px;width:56px;height:60px}
.plan .date b{font-family:var(--f-display);font-weight:400;font-size:1.8rem}
.ticket.lead{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.ticket.chosen{box-shadow:0 0 0 2px var(--good),var(--shadow)}
.t-stub{border-left:1px dashed var(--line)}
.ticket::before,.ticket::after{background:var(--bg)}
.price{font-weight:500;font-size:1.75rem;letter-spacing:-.02em}
.banner{border-radius:var(--r);border:1px solid color-mix(in srgb,var(--good) 30%,transparent)}
.banner h3{font-size:1.6rem}
.leg{background:color-mix(in srgb,var(--sunk) 80%,transparent);border-radius:12px}
.day{background:var(--glass);border-radius:16px;transition:transform .2s ease,background-color .2s ease}
.day:hover{transform:translateY(-2px)}
.day .dn{font-family:var(--f-display);font-weight:400;font-size:1.7rem}
.groupbox{background:var(--glass)}

/* ---------- Bedienelemente ---------- */
.btn{border-radius:999px;padding:9px 18px;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;background:var(--glass-strong)}
.btn:active{transform:scale(.98)}
.btn.sm{border-radius:999px;padding:6px 13px}
.btn.primary{font-weight:600;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn.primary:hover{filter:none;background:color-mix(in srgb,var(--accent) 88%,var(--ink))}
.btn.ghost{background:transparent}
.chip{background:var(--glass-strong);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.field input,.field select,.field textarea,.grow,.sel,.genbox .row input{background:var(--glass-strong);border-radius:12px;border-color:var(--line);transition:border-color .2s ease,box-shadow .2s ease}
.field input:focus,.field select:focus,.field textarea:focus,.grow:focus,.sel:focus,.genbox .row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.vote{border-radius:999px}
.vote button{background:var(--glass-strong)}
.seg{background:transparent;border:1px solid var(--line);border-radius:999px}
.seg button{border-radius:999px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.bar{height:4px}
.toast{border-radius:999px;padding:10px 20px}

/* Auswahl der Jahreszeit im Profil */
.season-pick{display:flex;flex-wrap:wrap;gap:8px}

@media (prefers-reduced-motion: reduce){
  .plan,.day,.btn{transition:none}
  .plan:hover,.day:hover{transform:none}
}