/* Saunafreunde Schwarzwald e.V. — sauna-fds.de
   Gestaltung: dunkle „Abend in der Kelo“-Bänder (Tannengrün, Glut) für Kopf, Live-Plan und Fuß,
   dazwischen helles Nebelgrün zum Lesen. Schriften Vollkorn + Archivo, selbst ausgeliefert. */

@font-face { font-family: "Vollkorn"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/vollkorn.woff2") format("woff2"); }
@font-face { font-family: "Vollkorn"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/vollkorn-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/archivo.woff2") format("woff2"); }

:root {
  --papier: #eef2ed;
  --flaeche: #fbfcfa;
  --tinte: #16231b;
  --leise: #53625a;
  --linie: #d2dbd3;
  --tanne: #1f4430;
  --glut: #b94f17;
  --gut: #2f6b3d;

  /* Abend-Bänder: feste Farben in beiden Themen */
  --nacht: #0e1612;
  --nacht-2: #1a3024;
  --nacht-3: #22402e;
  --nebel: #e8eee9;
  --nebel-2: #b6c5ba;
  --holz: #d4aa7d;
  --glut-hell: #ee8146;

  --display: "Vollkorn", Georgia, "Times New Roman", serif;
  --text: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rand: clamp(16px, 4vw, 32px);
  --breite: 72rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0f1813;
    --flaeche: #16221b;
    --tinte: #e3ebe5;
    --leise: #a0b1a5;
    --linie: #2b3b31;
    --tanne: #95c9a3;
    --glut: #f08a4c;
    --gut: #8fd19e;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.6 var(--text); font-variant-numeric: lining-nums; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tanne); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--glut-hell); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.005em; font-variant-numeric: lining-nums; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 1rem; top: -4rem; background: var(--glut-hell); color: #1a0d05; padding: .6rem 1rem; border-radius: 6px; z-index: 10; font-weight: 600; }
.sprung:focus { top: 1rem; }

.rahmen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.lesbar { max-width: 68ch; }
.etikett { font: 600 .74rem/1 var(--text); letter-spacing: .13em; text-transform: uppercase; color: var(--leise); }
.leise { color: var(--leise); }
.zahl { font-variant-numeric: lining-nums tabular-nums; }

/* ── Kopf ─────────────────────────────────────────────────── */
.kopf { background: var(--nacht); color: var(--nebel); border-bottom: 1px solid rgba(232, 238, 233, .08); }
.kopf .rahmen { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }
.marke { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; min-width: 0; }
.marke img { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.marke b { display: block; font: 600 1.08rem/1.1 var(--display); }
.marke small { display: block; font: 500 .68rem/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--nebel-2); }
.navi { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.navi a { color: var(--nebel-2); text-decoration: none; font-size: .95rem; font-weight: 500; }
.navi a:hover, .navi a[aria-current="page"] { color: #fff; }
.navi a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--glut-hell); text-underline-offset: 8px; text-decoration-thickness: 2px; }
.app-knopf { border: 1px solid rgba(232, 238, 233, .32); border-radius: 999px; padding: .5rem .95rem; color: #fff !important; font-weight: 600 !important; white-space: nowrap; }
.app-knopf:hover { border-color: var(--glut-hell); }
.menue { display: none; margin-left: auto; position: relative; }
.menue summary { list-style: none; cursor: pointer; border: 1px solid rgba(232, 238, 233, .3); border-radius: 8px; padding: .45rem .8rem; font-weight: 600; font-size: .9rem; color: #fff; }
.menue summary::-webkit-details-marker { display: none; }
.menue[open] summary { background: var(--nacht-3); }
.menue nav { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20; background: var(--nacht-2); border: 1px solid rgba(232, 238, 233, .12); border-radius: 12px; padding: .5rem; min-width: 14rem; display: grid; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
.menue nav a { color: var(--nebel); text-decoration: none; padding: .7rem .85rem; border-radius: 8px; font-weight: 500; }
.menue nav a:hover, .menue nav a[aria-current="page"] { background: rgba(255, 255, 255, .06); color: #fff; }
@media (max-width: 860px) {
  .navi { display: none; }
  .menue { display: block; }
}

/* ── Startbild ────────────────────────────────────────────── */
.held { background: var(--nacht); color: var(--nebel); }
.held .rahmen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 5vw, 4rem); }
.held .augenbraue { font: 600 .74rem/1 var(--text); letter-spacing: .15em; text-transform: uppercase; color: var(--holz); }
.held h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; margin: .75rem 0 1rem; letter-spacing: -.02em; }
.held h1 em { font-style: italic; font-weight: 400; color: var(--holz); }
.held p { font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 34rem; color: var(--nebel); }
.held figure { margin: 0; position: relative; }
.held figure img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 14px; }
.held figcaption { margin-top: .55rem; font-size: .8rem; color: var(--nebel-2); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.knopf { display: inline-block; padding: .78rem 1.15rem; border-radius: 9px; font-weight: 600; font-size: .95rem; text-decoration: none; }
.knopf.glut { background: var(--glut-hell); color: #1a0d05; }
.knopf.glut:hover { background: #f39462; }
.knopf.hohl { border: 1px solid rgba(232, 238, 233, .38); color: #fff; }
.knopf.hohl:hover { border-color: #fff; }
@media (max-width: 860px) {
  .held .rahmen { grid-template-columns: 1fr; }
}
/* Am Handy zuerst sagen, wer wir sind und was als Nächstes kommt — das Foto steht weiter unten bei den Saunen */
@media (max-width: 600px) {
  .held figure { display: none; }
  .held .rahmen { padding-bottom: 1.5rem; }
  .marke b { font-size: 1rem; }
}

/* ── Live-Band ────────────────────────────────────────────── */
.live { background: var(--nacht); color: var(--nebel); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.live .rahmen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1px; }
.live .feld { background: var(--nacht-2); padding: clamp(1.2rem, 3vw, 1.8rem); display: grid; gap: 1rem; align-content: start; }
.live .feld:first-child { border-radius: 14px 0 0 14px; }
.live .feld + .feld { background: var(--nacht-3); border-radius: 0 14px 14px 0; }
@media (max-width: 860px) {
  .live .rahmen { grid-template-columns: 1fr; }
  .live .feld:first-child { border-radius: 14px 14px 0 0; }
  .live .feld + .feld { border-radius: 0 0 14px 14px; }
}
.feldkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; font: 600 .74rem/1 var(--text); letter-spacing: .13em; text-transform: uppercase; color: var(--nebel-2); }
.puls { display: inline-flex; align-items: center; gap: .45rem; color: #a5e6b8; }
.puls::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5fd486; box-shadow: 0 0 0 3px rgba(95, 212, 134, .2); }
.live .stand { font: 500 .78rem/1.4 var(--text); letter-spacing: 0; text-transform: none; color: var(--nebel-2); }
.live a { color: var(--holz); }
.festname { font: 600 clamp(1.7rem, 4vw, 2.1rem)/1.05 var(--display); color: #fff; }
.festname em { font-style: italic; font-weight: 400; color: var(--holz); }
.festdatum { color: var(--nebel); font-size: 1rem; }
.countdown { display: flex; align-items: baseline; gap: .5rem; }
.countdown strong { font: 600 3rem/1 var(--display); color: var(--glut-hell); font-variant-numeric: lining-nums tabular-nums; }
.countdown span { color: var(--nebel-2); }
.live .klein { font-size: .88rem; color: var(--nebel-2); }
.live .trenner { border-top: 1px solid rgba(232, 238, 233, .1); padding-top: .8rem; }

/* Aufguss-Zeilen: im dunklen Live-Band und im hellen Wochenplan */
.aufguesse { list-style: none; margin: 0; padding: 0; display: grid; }
.aufguss { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline; padding-block: .75rem; border-top: 1px solid var(--trenn, var(--linie)); }
.aufguss:first-child { border-top: 0; padding-top: 0; }
.aufguss time { font: 600 1.35rem/1.15 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.aufguss .tagkurz { display: block; font: 600 .68rem/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--holz); }
.aufguss b { display: block; font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.aufguss .zeile { font-size: .88rem; color: var(--leise); }
.aufguss .grad { font: 600 .82rem/1 var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--leise); }
.aufguss.vom-bad b { font-weight: 500; }
.aufguss.vom-bad { opacity: .78; }
.pille { display: inline-block; font: 600 .7rem/1 var(--text); letter-spacing: .04em; padding: .25rem .45rem; border-radius: 999px; vertical-align: .12em; margin-left: .35rem; white-space: nowrap; }
.pille.laeuft { background: rgba(95, 212, 134, .18); color: #2f8a4c; }
.pille.thema { background: rgba(212, 170, 125, .22); color: #7a4d1e; }
.dunkel .aufguss { --trenn: rgba(232, 238, 233, .1); }
.dunkel .aufguss time, .dunkel .aufguss b { color: #fff; }
.dunkel .aufguss .zeile, .dunkel .aufguss .grad { color: var(--nebel-2); }
.dunkel .pille.laeuft { color: #a5e6b8; }
.dunkel .pille.thema { background: rgba(212, 170, 125, .18); color: var(--holz); }
@media (prefers-color-scheme: dark) {
  .pille.laeuft { color: #a5e6b8; }
  .pille.thema { color: var(--holz); }
}
.hinweis { border: 1px dashed var(--linie); border-radius: 10px; padding: 1rem 1.1rem; color: var(--leise); }
.dunkel .hinweis { border-color: rgba(232, 238, 233, .2); color: var(--nebel-2); }

/* ── Abschnitte auf Papier ───────────────────────────────── */
.abschnitt { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.abschnitt + .abschnitt { padding-top: 0; }
.abschnitt-kopf { display: grid; gap: .55rem; margin-bottom: 1.6rem; }
.abschnitt-kopf.zeile-mit-link { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.abschnitt-kopf p { color: var(--leise); max-width: 62ch; }

.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.vier > div { display: grid; gap: .4rem; align-content: start; border-top: 2px solid var(--tinte); padding-top: .9rem; }
.vier h3 { font-size: 1.2rem; }
.vier p { color: var(--leise); font-size: .97rem; }
@media (max-width: 900px) { .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vier { grid-template-columns: 1fr; } }

.saunen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.sauna { margin: 0; display: grid; gap: .7rem; align-content: start; }
.sauna img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; }
.sauna h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sauna h3 span { font: 600 1rem/1 var(--text); color: var(--glut); font-variant-numeric: tabular-nums; }
.sauna p { color: var(--leise); font-size: .97rem; }
@media (max-width: 700px) { .saunen { grid-template-columns: 1fr; } }

.mitmachen-band { background: linear-gradient(115deg, #2a1a10, #3d2615 60%, #2a1a10); color: #f3e6d8; border-radius: 16px; padding: clamp(1.4rem, 4vw, 2.4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2rem; align-items: center; }
.mitmachen-band h2 { color: #fff; }
.mitmachen-band p { color: #e6cdb3; margin-top: .4rem; }
.mitmachen-band .knoepfe { margin-top: 0; }
.mitmachen-band .knopf.hohl { border-color: rgba(255, 255, 255, .35); }
@media (max-width: 760px) { .mitmachen-band { grid-template-columns: 1fr; } }

/* ── Unterseiten ──────────────────────────────────────────── */
.seitenkopf { background: var(--nacht); color: var(--nebel); }
.seitenkopf .rahmen { padding-block: clamp(2.2rem, 6vw, 4rem); display: grid; gap: .8rem; }
.seitenkopf .augenbraue { font: 600 .74rem/1 var(--text); letter-spacing: .15em; text-transform: uppercase; color: var(--holz); }
.seitenkopf h1 { color: #fff; }
.seitenkopf p { max-width: 60ch; font-size: 1.1rem; }
.unternavi { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; }
.unternavi a { color: var(--nebel-2); font-size: .92rem; }

.text { display: grid; gap: 1rem; }
.text h2 { margin-top: .8rem; }
.text h3 { margin-top: .4rem; }
.text ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.text address { font-style: normal; }
.zwei { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.zwei img { border-radius: 12px; width: 100%; }
@media (max-width: 820px) { .zwei { grid-template-columns: 1fr; } }

.arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.art { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 1.15rem 1.2rem 1.25rem; display: grid; gap: .45rem; align-content: start; }
.art p { color: var(--leise); font-size: .97rem; }
@media (max-width: 900px) { .arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .arten { grid-template-columns: 1fr; } }

.tabelle-huelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font: 600 .74rem/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
tbody th { font: 600 1rem/1.4 var(--text); letter-spacing: 0; text-transform: none; color: var(--tinte); }
td.zahl, th.zahl { white-space: nowrap; }

.wochenplan { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.plantag { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 1rem 1.15rem 1.1rem; display: grid; gap: .7rem; align-content: start; }
.plantag h3 { font-size: 1.15rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.plantag h3 small { font: 600 .72rem/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--glut); }
.plantag .aufguss time { font-size: 1.15rem; }

.festliste { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linie); }
.festliste li { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; gap: .3rem 1.2rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--linie); }
.festliste .wann { font: 600 1.05rem/1.2 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.festliste .motto { font: 600 1.25rem/1.2 var(--display); }
.festliste .motto em { font-style: italic; font-weight: 400; }
.festliste .naechstes { color: var(--glut); font-weight: 600; font-size: .85rem; white-space: nowrap; }
@media (max-width: 640px) { .festliste li { grid-template-columns: 1fr; } }

.zeitstrahl { list-style: none; margin: 0; padding: 0; display: grid; border-left: 2px solid var(--linie); }
.zeitstrahl li { position: relative; padding: 0 0 1.4rem 1.4rem; display: grid; gap: .2rem; }
.zeitstrahl li::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--papier); border: 2px solid var(--glut); }
.zeitstrahl .wann { font: 600 .78rem/1.2 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--glut); }
.zeitstrahl b { font: 600 1.1rem/1.3 var(--display); }
.zeitstrahl p { color: var(--leise); font-size: .96rem; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: .45rem; align-content: start; }
.karte p { color: var(--leise); font-size: .96rem; }

.konto { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 1.1rem 1.2rem; display: grid; gap: .3rem; }
.konto .iban { font: 600 1.15rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; overflow-wrap: anywhere; }

.recht { display: grid; gap: 1.1rem; max-width: 70ch; }
.recht h2 { font-size: 1.45rem; margin-top: 1rem; }
.recht h3 { font-size: 1.1rem; margin-top: .3rem; }
.recht ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

/* ── Fuß ──────────────────────────────────────────────────── */
.fuss { background: var(--nacht); color: var(--nebel-2); margin-top: clamp(2.5rem, 6vw, 4rem); font-size: .92rem; }
.fuss .rahmen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2rem; padding-block: 2.5rem 2rem; }
.fuss b { color: var(--nebel); font-weight: 600; display: block; margin-bottom: .35rem; }
.fuss a { color: var(--nebel); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fuss address { font-style: normal; }
.fuss .unten { grid-column: 1 / -1; border-top: 1px solid rgba(232, 238, 233, .1); padding-top: 1.1rem; font-size: .82rem; }
@media (max-width: 760px) { .fuss .rahmen { grid-template-columns: 1fr; } }
.ohne-abstand { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }