/* Eigene Seiten von booking.funck.gmbh (Anmeldung, Verwaltung, Absage, Vorschau).
   Farbwelt und Schrift wie funck.gmbh: Nacht/Stahl, Beton/Kalk, Glut als einziger Akzent, Archivo variabel. */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(/marke/archivo-standard-normal.woff2) format('woff2-variations'); }
@font-face { font-family:'Archivo'; font-style:italic; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(/marke/archivo-standard-italic.woff2) format('woff2-variations'); }

:root {
  --nacht:#12171d; --stahl:#1c242d; --stahl-hell:#2a3540; --beton:#e4e2dd; --kalk:#f2f1ee;
  --glut:#f2a93b; --glut-tief:#d98a17; --kuehlturm:#8c98a3;
  --grund:var(--kalk); --karte:#fff; --text:#1a1f24; --leise:#545e67; --linie:#d6d3cc;
  --akzent:var(--glut-tief); --akzent-flaeche:var(--glut); --akzent-text:var(--nacht); --ok:#2e7d4f; --fehler:#b3261e;
  --feld:var(--kalk);
}
@media (prefers-color-scheme: dark) {
  :root { --grund:var(--nacht); --karte:var(--stahl); --text:#edece8; --leise:#aeb7bf; --linie:var(--stahl-hell);
          --akzent:var(--glut); --ok:#6fcf97; --fehler:#ff8a80; --feld:var(--nacht); }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--grund); color:var(--text); font:16px/1.55 'Archivo', system-ui, sans-serif; }
a { color:var(--akzent); text-underline-offset:3px; }
code { font-size:.9em; background:var(--feld); padding:1px 5px; border-radius:4px; }

.karte { max-width:640px; margin:48px auto; padding:32px; background:var(--karte); border:1px solid var(--linie); border-radius:14px; }
.breit { max-width:1100px; }
h1, h2 { font-stretch:125%; font-style:italic; letter-spacing:-.01em; }
h1 { margin:0 0 14px; font-size:1.6rem; font-weight:800; }
h2 { margin:30px 0 10px; font-size:1.1rem; font-weight:750; }

.knopf, button { background:var(--akzent-flaeche); color:var(--akzent-text); border:0; border-radius:10px; padding:11px 20px;
  font:inherit; font-weight:700; cursor:pointer; transition:background .15s, transform .15s; }
.knopf:hover, button:hover { background:var(--glut-tief); }
.knopf:active, button:active { transform:translateY(1px); }
button.leise { background:transparent; color:var(--akzent); border:1px solid currentColor; padding:6px 12px; }
button.leise:hover { background:var(--akzent-flaeche); color:var(--akzent-text); border-color:var(--akzent-flaeche); }
:focus-visible { outline:2px solid var(--glut); outline-offset:2px; }

.fehler { color:var(--fehler); font-weight:600; }
.ok { color:var(--ok); font-weight:600; }
input, select, textarea { font:inherit; color:inherit; background:var(--feld); border:1px solid var(--linie); border-radius:8px; padding:8px 10px; }
input:focus, select:focus, textarea:focus { border-color:var(--glut); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--glut) 25%, transparent); }
input[type=checkbox], input[type=radio] { accent-color:var(--glut); width:auto; }
label { display:block; margin:12px 0 4px; font-weight:600; }
table { width:100%; border-collapse:collapse; margin:8px 0; }
th, td { text-align:left; padding:8px; border-bottom:1px solid var(--linie); vertical-align:top; }
th { font-size:.8rem; color:var(--leise); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
nav.menue { display:flex; flex-wrap:wrap; gap:6px 20px; margin:-4px 0 22px; padding-bottom:12px; border-bottom:1px solid var(--linie); }
nav.menue a { text-decoration:none; font-weight:650; color:var(--leise); }
nav.menue a:hover, nav.menue a.an { color:var(--text); box-shadow:inset 0 -2px 0 var(--glut); }
.zeile { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.klein { font-size:.85rem; color:var(--leise); }
.tb { --tb-akzent:var(--glut); --tb-akzent-text:var(--nacht); }
table.liste form { margin:0; }
.knopf-klein { display:inline-block; padding:6px 14px; border-radius:999px; background:var(--glut); color:var(--nacht); font-weight:700; font-size:.88rem; text-decoration:none; white-space:nowrap; }
.knopf-klein:hover { background:var(--glut-tief); }
.aktionen { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin:22px 0; }
.aktion { display:grid; gap:10px; align-content:start; padding:18px; border:1px solid var(--linie); border-radius:12px; background:color-mix(in srgb, var(--glut) 3%, transparent); }
.aktion h3 { margin:0; font-stretch:125%; font-style:italic; font-size:1.05rem; }
.aktion .klein, .aktion label { margin:0; }
.aktion button { justify-self:start; }
.aktion-gefahr { border-color:color-mix(in srgb, var(--fehler) 45%, var(--linie)); }
.aktion-gefahr button { background:var(--fehler); color:#fff; }
.aktion-gefahr button:hover { background:color-mix(in srgb, var(--fehler) 80%, #000); }
.neu-kasten { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; margin:10px 0 18px; padding:16px;
  border:1px dashed var(--linie); border-radius:12px; background:color-mix(in srgb, var(--glut) 4%, transparent); }
.neu-kasten .felder { display:flex; flex-wrap:wrap; gap:10px 14px; flex:1; }
.neu-kasten label { margin:0; display:grid; gap:4px; font-size:.85rem; }
.neu-kasten .breit-feld { flex:1; min-width:180px; }
.neu-kasten .breit-feld input { width:100%; }
input[type=date] { color-scheme:light dark; }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height:100svh; display:grid; place-items:center; padding:24px 16px; background:var(--nacht); color:#edece8;
  background-image:
    radial-gradient(60% 50% at 85% 110%, color-mix(in srgb, var(--glut) 22%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 0%, color-mix(in srgb, var(--kuehlturm) 12%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.025) 79px 80px); }
.anmeldung .tafel { width:100%; max-width:400px; padding:38px 34px 30px; background:color-mix(in srgb, var(--stahl) 92%, transparent);
  border:1px solid var(--stahl-hell); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.45); position:relative; overflow:hidden; }
.anmeldung .tafel::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--glut), var(--glut-tief)); }
.anmeldung .logo { display:block; width:150px; height:auto; margin:0 0 26px; }
.anmeldung h1 { font-size:1.75rem; margin:0 0 4px; color:#edece8; }
.anmeldung .unter { margin:0 0 24px; color:#aeb7bf; font-size:.95rem; }
.anmeldung label { margin:16px 0 6px; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:#aeb7bf; font-weight:650; }
.anmeldung input { width:100%; padding:12px 14px; background:var(--nacht); border-color:var(--stahl-hell); color:#edece8; border-radius:10px; }
.anmeldung button { width:100%; margin-top:24px; padding:13px; font-size:1rem; background:var(--glut); color:var(--nacht); }
.anmeldung button:hover { background:var(--glut-tief); }
.anmeldung button.leise { background:transparent; color:#aeb7bf; border:1px solid var(--stahl-hell); margin-top:10px; }
.anmeldung button.leise:hover { color:#edece8; border-color:#aeb7bf; background:transparent; }
.wahl-liste { display:grid; gap:8px; margin-top:6px; }
.wahl { margin:0 !important; text-transform:none !important; letter-spacing:0 !important; cursor:pointer; }
.wahl input { position:absolute; opacity:0; }
.wahl span { display:block; padding:12px 14px; border:1px solid var(--stahl-hell); border-radius:10px; color:#edece8; font-size:1rem; font-weight:600; transition:border-color .2s, background .2s; }
.wahl:hover span { border-color:var(--glut); }
.wahl input:checked + span { border-color:var(--glut); background:rgba(242,169,59,.12); box-shadow:inset 3px 0 0 var(--glut); }
.wahl input:focus-visible + span { outline:2px solid var(--glut); outline-offset:2px; }
.anmeldung .fehler { margin:0 0 6px; padding:10px 12px; border-radius:8px; color:#ffb4ab; background:rgba(179,38,30,.18); border:1px solid rgba(255,138,128,.3); font-size:.92rem; }
.anmeldung .fuss { margin:22px 0 0; text-align:center; font-size:.8rem; color:var(--kuehlturm); }

/* ---------- Öffentliche Buchungsseite ---------- */
.buchung { min-height:100svh; display:flex; flex-direction:column; background:var(--nacht); color:#edece8;
  background-image:
    radial-gradient(55% 45% at 90% 100%, color-mix(in srgb, var(--glut) 18%, transparent), transparent 70%),
    radial-gradient(45% 35% at 0% 0%, color-mix(in srgb, var(--kuehlturm) 10%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.022) 79px 80px); }
.buchung a { color:var(--glut); }
.buchung .kopf { display:flex; justify-content:space-between; align-items:center; width:100%; max-width:1100px; margin:0 auto; padding:22px clamp(16px,4vw,40px); }
.buchung .kopf-logo img { display:block; width:120px; height:auto; }
.fahnen-vorrat { position:absolute; width:0; height:0; overflow:hidden; }
/* Sprachwahl als Dropdown (<details>): Pille mit Fahne + Kürzel, Panel mit allen Sprachen, aktive mit Haken.
   Geht ohne JS; /sprachwahl.js schließt bei Klick daneben und mit Escape. */
.sprachwahl { position:relative; }
.sprachwahl summary { list-style:none; display:flex; align-items:center; gap:9px; padding:7px 10px 7px 12px; cursor:pointer; user-select:none;
  border:1px solid rgba(237,236,232,.16); border-radius:999px; background:rgba(237,236,232,.04); color:#edece8;
  font-size:.85rem; transition:border-color .2s, background .2s; }
.sprachwahl summary::-webkit-details-marker { display:none; }
.sprachwahl summary:hover, .sprachwahl[open] summary { border-color:rgba(242,169,59,.6); background:rgba(242,169,59,.07); }
.sprachwahl .sprache-kurz { font-weight:750; letter-spacing:.06em; }
.sprachwahl .pfeil { width:16px; height:16px; fill:none; stroke:#aeb7bf; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.sprachwahl[open] .pfeil { transform:rotate(180deg); stroke:var(--glut); }
.sprachwahl .fahne { width:22px; height:15px; border-radius:2.5px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.sprachwahl .sprache-liste { position:absolute; right:0; top:calc(100% + 10px); z-index:20; min-width:210px; padding:6px;
  background:var(--stahl); border:1px solid var(--stahl-hell); border-radius:14px; box-shadow:0 22px 50px rgba(0,0,0,.5);
  animation:sprache-auf .18s cubic-bezier(.2,.8,.2,1); }
.sprachwahl .sprache-liste::before { content:''; position:absolute; top:-6px; right:22px; width:10px; height:10px; background:var(--stahl);
  border-left:1px solid var(--stahl-hell); border-top:1px solid var(--stahl-hell); transform:rotate(45deg); }
@keyframes sprache-auf { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
.sprachwahl .sprache-liste a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:#aeb7bf; text-decoration:none; font-size:.92rem; position:relative; }
.sprachwahl .sprache-liste a b { font-weight:600; flex:1; }
.sprachwahl .sprache-liste a .fahne { width:26px; height:18px; }
.sprachwahl .sprache-liste a:hover, .sprachwahl .sprache-liste a:focus-visible { background:rgba(242,169,59,.1); color:#edece8; outline:none; }
.sprachwahl .sprache-liste a.ist-aktiv { color:#edece8; }
.sprachwahl .sprache-liste a.ist-aktiv b { color:var(--glut); }
.sprachwahl .haken { width:18px; height:18px; fill:none; stroke:var(--glut); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce) { .sprachwahl .sprache-liste { animation:none; } .sprachwahl .pfeil { transition:none; } }
.buchung .buehne { flex:1; width:100%; max-width:1100px; margin:0 auto; padding:clamp(12px,4vw,40px) clamp(16px,4vw,40px) 56px; }
.buchung .dachzeile { margin:0 0 6px; color:var(--glut); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; }
.buchung h1 { font-size:clamp(2rem, 5vw, 3.2rem); line-height:1.05; margin:0 0 12px; color:#edece8; }
.buchung .einleitung { margin:0 0 30px; max-width:560px; color:#aeb7bf; font-size:1.05rem; }
.buchung .widget-flaeche { padding:clamp(18px,3vw,32px); background:color-mix(in srgb, var(--stahl) 92%, transparent);
  border:1px solid var(--stahl-hell); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.35); position:relative; overflow:hidden; }
.buchung .widget-flaeche::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--glut), var(--glut-tief)); }
.buchung .tb { max-width:none; --tb-text:#edece8; --tb-leise:#aeb7bf; --tb-flaeche:rgba(255,255,255,.035); --tb-linie:var(--stahl-hell);
  --tb-akzent:var(--glut); --tb-akzent-text:var(--nacht); --tb-radius:12px; }
.buchung .tb input:not([type=radio]), .buchung .tb textarea { background:var(--nacht); }
.buchung .fuss-leiste { display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; padding:22px 16px 28px; color:var(--kuehlturm); font-size:.85rem; }
.buchung .fuss-leiste a { color:var(--kuehlturm); text-decoration:none; }
.buchung .fuss-leiste a:hover { color:#edece8; }

@media (max-width:640px) {
  .karte { margin:0; border-radius:0; border:0; padding:22px 16px; }
  td, th { padding:6px 4px; }
  .anmeldung .tafel { padding:30px 22px 24px; }
}
.buchung .tb-fertig-titel { font-stretch:125%; font-style:italic; font-size:2.1rem; color:#edece8; }