/* ══════════════════════════════════════════════════════════════════════════
   GEZEITEN — Designsystem liekedelers.de
   Ein Ort, drei Lichter. Eine Linie, die teilt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften ────────────────────────────────────────────────────────────
   Archivo, Newsreader und JetBrains Mono liegen auf dem eigenen Server.
   Vorher kamen sie von fonts.gstatic.com — damit ging die IP-Adresse jedes
   Besuchers an Google, bevor er irgendetwas entscheiden konnte. Das LG
   Muenchen I hat genau dafuer 2022 Schadensersatz zugesprochen (3 O 17493/20),
   weil es mit dem lokalen Hosten eine zumutbare Alternative gibt.

   Es sind dieselben Schriftdateien und dieselben Achsenbereiche wie zuvor,
   nur der Lieferweg ist ein anderer. Am Schriftbild aendert sich nichts.
   Lizenz: SIL Open Font License 1.1, siehe fonts/OFL-*.txt
   ------------------------------------------------------------------------ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-ext-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrainsmono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrainsmono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* „hidden" heißt versteckt — auch wenn eine Regel wie #gate{display:flex} etwas
   anderes sagt. Ohne diese Zeile blieb das Mitglieder-Tor nach gültiger Nummer
   stehen und das Society-Kästchen „Antrag vorbereitet" war von Anfang an zu sehen
   (gefunden 10.10.2026). */
[hidden]{display:none!important}

:root{
  --signal:#FF4A17;
  --signal-tief:#D9330A;
  --see:#123A2E;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  /* Lesetext — eine echte Textserife. Der Gegenklang zur harten Plakatschrift.
     Zurück auf Grotesk? Nur diese eine Zeile tauschen. */
  --grot:'Newsreader',Georgia,'Times New Roman',serif;
  --vf-text:'opsz' 16;
  /* Plakat — Archivo, schmal gestellt. Bleibt, wie es war. */
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --vf-plakat:'wdth' 62;
  --vf-mittel:'wdth' 82;
  /* Das Gefühlte — dieselbe Familie, kursiv und größer gesetzt */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --vf-gross:'opsz' 60;
  --max:1560px;
  --e:cubic-bezier(.16,1,.3,1);
  --gut:clamp(1.3rem,4vw,4rem);
}

/* ── TAG — Salz, Papier, Nordlicht ───────────────────────────────────────
   Bewusst OHNE Attributselektor: Das ist die Grundpalette. Steht in
   data-licht etwas Unbekanntes oder gar nichts, sieht die Seite trotzdem
   vollständig aus, statt in undefinierte Variablen zu laufen.
   ─────────────────────────────────────────────────────────────────────── */
html,
html[data-licht="tag"]{
  --grund:#E9E4D8; --grund2:#DED8C8; --karte:#F1EDE3;
  --tinte:#121309; --mild:#3A3B31; --leise:#5E5F54;
  --linie:rgba(18,19,9,.26); --linie-zart:rgba(18,19,9,.13);
  --signal-schrift:#B82806;   /* Orange, das auf Papier lesbar bleibt */
  --bild:1; --dunst:.34; --kalgrund:%23E9E4D8;
  --kalfilter:brightness(.93) sepia(.3) saturate(.72) hue-rotate(-6deg);
}
/* ── ABEND — die Lampen gehen an ───────────────────────────────────────── */
html[data-licht="abend"]{
  --grund:#241E18; --grund2:#1B1611; --karte:#2E271F;
  --tinte:#F7F1E4; --mild:#D6CDBB; --leise:#A79C88;
  --linie:rgba(247,241,228,.28); --linie-zart:rgba(247,241,228,.14);
  --signal-schrift:#FF7A4D;
  --bild:.9; --dunst:.58;
  --kalfilter:invert(.86) hue-rotate(180deg) saturate(.75) sepia(.14);
  --kalgrund:%23ffffff;
}
/* ── NACHT — Ebbe, alles still ─────────────────────────────────────────── */
/* 15.10.2026 (Mirko: „im Nacht-Modus schwer lesbar“): Schrift heller, Kopfbild
   deutlich dunkler (--dunst .66 → .38). Vorher war das Foto nachts heller als
   abends — genau verkehrt herum. */
html[data-licht="nacht"]{
  --grund:#070A0D; --grund2:#04070A; --karte:#0E1318;
  --tinte:#F1F5F7; --mild:#CDD5DB; --leise:#9DA9B2;
  --linie:rgba(220,228,232,.26); --linie-zart:rgba(220,228,232,.14);
  --signal-schrift:#FF6238;
  --bild:.66; --dunst:.38;
  --kalfilter:invert(.97) hue-rotate(180deg) saturate(.6);
  --kalgrund:%23ffffff;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--grund);color:var(--tinte);
  font-family:var(--grot);font-variation-settings:var(--vf-text);
  font-weight:400;font-size:18.5px;line-height:1.58;letter-spacing:0;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .9s var(--e),color .9s var(--e);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--signal);color:#fff}
/* Der Fokusrahmen lief auf --signal. Im Tagmodus ergibt das Messing auf
   hellem Papier nur 1,9:1 — WCAG 1.4.11 verlangt fuer solche Umrisse 3:1.
   --signal-schrift ist genau dafuer da: dieselbe Farbe, aber so abgedunkelt,
   dass sie auf hellem Grund traegt. In Abend und Nacht ist sie hell und
   traegt dort ebenso. */
:focus-visible{outline:2px solid var(--signal-schrift);outline-offset:3px}
section[id],div[id]{scroll-margin-top:5rem}
main[id]{scroll-margin-top:5rem}

/* Sprunglink - unsichtbar, bis jemand mit der Tastatur ankommt. Ohne ihn
   muesste man sich bei jedem Seitenwechsel erneut durch Kopfzeile und
   Lichtschalter tabben (WCAG 2.4.1, Stufe A). */
.sprung{position:absolute;left:-9999px;top:0;z-index:300;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--signal);color:#12212B;padding:.85rem 1.4rem;border:0}
.sprung:focus{left:var(--gut);top:.7rem;outline:2px solid var(--tinte);outline-offset:2px}

body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;opacity:.04;mix-blend-mode:overlay;
}

/* ── DER TEILSTRICH ────────────────────────────────────────────────────── */
.teilstrich{position:fixed;left:50%;top:0;bottom:0;width:1px;background:var(--linie-zart);
  z-index:2;pointer-events:none;transition:background .9s var(--e)}
@media(max-width:900px){.teilstrich{display:none}}

/* ── KOPF ──────────────────────────────────────────────────────────────── */
header.kopf{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--gut);
  backdrop-filter:blur(16px);
  background:color-mix(in srgb,var(--grund) 80%,transparent);
  border-bottom:1px solid var(--linie-zart);
}
.marke{display:flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-variation-settings:'wdth' 68;
  font-weight:800;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.marke .wort{display:inline-block}
/* Das Apostroph darf die Sperrung nicht auseinanderziehen */
.marke .wort i{color:var(--signal);font-style:normal;letter-spacing:0;margin:0 -.05em 0 -.09em}
.marke .siegel{width:30px;height:30px;flex:none;border-radius:50%;
  transition:transform .5s var(--e)}
.marke:hover .siegel{transform:rotate(-8deg)}
.kopf nav{display:flex;gap:1.3rem;align-items:center}
.kopf nav a{font-family:var(--mono);font-size:.74rem;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mild);padding-bottom:2px;
  border-bottom:1px solid transparent;transition:.3s var(--e)}
.kopf nav a:hover,.kopf nav a[aria-current]{color:var(--tinte);border-color:var(--signal)}
.lichtschalter{display:flex;border:1px solid var(--linie);padding:.2rem}
.lichtschalter button{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.26rem .55rem;color:var(--leise);transition:.25s}
.lichtschalter button:hover{color:var(--tinte)}
.lichtschalter button[aria-pressed="true"]{background:var(--signal);color:#fff}
@media(max-width:1040px){.kopf nav a.verstecken{display:none}}

/* ── WASSERLINIE ───────────────────────────────────────────────────────── */
.wasserlinie{
  position:fixed;left:0;right:0;bottom:0;z-index:59;height:30px;
  display:flex;align-items:center;gap:.85rem;padding:0 var(--gut);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mild);background:color-mix(in srgb,var(--grund) 88%,transparent);
  backdrop-filter:blur(16px);border-top:1px solid var(--linie-zart);
  overflow:hidden;white-space:nowrap;
}
.wasserlinie .pegel{position:absolute;left:0;bottom:0;height:5px;background:var(--signal);
  transition:width 1.2s var(--e)}
.wasserlinie b{color:var(--tinte);font-weight:500}
@media(max-width:760px){.wasserlinie .opt{display:none}}
/* Handy: Ohne Beschriftung sah der orange Balken wie ein Fortschritt der
   Öffnungszeit aus. Darum steht rechts kurz „Wasser ↓ 23 %" — Pfeil statt
   „ablaufend", damit es in eine Zeile passt. */
.wl-pfeil{display:none}
@media(max-width:760px){
  .wasserlinie #wlTide{display:inline;margin-left:auto}
  .wl-lang{display:none}
  .wl-pfeil{display:inline}
}

/* ── RASTER ────────────────────────────────────────────────────────────── */
.bahn{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}
.zwei{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--gut)*2);align-items:start}
@media(max-width:900px){.zwei{grid-template-columns:1fr;row-gap:2.4rem}}
section{position:relative;padding:clamp(4.5rem,11vh,9rem) 0}

.nummer{position:absolute;top:clamp(2rem,6vh,5rem);left:-.02em;
  font-family:var(--display);font-variation-settings:var(--vf-plakat);font-weight:900;
  font-size:clamp(7rem,17vw,16rem);line-height:.72;color:var(--tinte);
  opacity:.07;pointer-events:none;user-select:none;z-index:0}

.zeile{display:flex;align-items:center;gap:1rem;font-family:var(--mono);font-size:.78rem;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-schrift);
  margin-bottom:1.5rem}
.zeile::after{content:'';flex:1;height:1px;background:var(--linie)}

h1,h2{font-family:var(--display);font-variation-settings:'wdth' 66;font-weight:800;
  line-height:.92;letter-spacing:-.005em;text-transform:uppercase}
h2{font-size:clamp(2.5rem,6vw,5.2rem);margin-bottom:1.5rem}
h3{font-family:var(--display);font-variation-settings:'wdth' 82;font-weight:650;
  font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5rem}
p{max-width:47ch;color:var(--mild);margin-bottom:1.15rem}
p strong,p b{color:var(--tinte);font-weight:600}
a.tlink{color:var(--tinte);border-bottom:1px solid var(--signal);transition:.25s}
a.tlink:hover{color:var(--signal)}
.gross{font-variation-settings:'opsz' 36;font-size:clamp(1.3rem,2vw,1.7rem);
  line-height:1.32;letter-spacing:-.005em;font-weight:500;color:var(--tinte);max-width:38ch}
em,.kursiv{font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:var(--vf-gross)}

/* ── LOG ───────────────────────────────────────────────────────────────── */
.log{font-family:var(--mono);font-size:.82rem;font-weight:400;letter-spacing:.02em;
  line-height:1.6}
.log dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.4rem}
.log dt{color:var(--leise);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;
  padding-top:.2rem;white-space:nowrap}
.log dd{color:var(--tinte);border-bottom:1px solid var(--linie-zart);padding-bottom:.45rem}
.log-klein{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise)}

/* ── BILD ──────────────────────────────────────────────────────────────── */
figure{position:relative;overflow:hidden}
/* Fotos sind seit 08.10.2026 als warmes Schwarzweiß gespeichert — kein Graufilter mehr, sonst kippt der Ton ins Kalte */
figure img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04);
  opacity:var(--bild);transition:opacity .9s var(--e),transform 1.4s var(--e)}
figure:hover img{transform:scale(1.03)}
figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--leise);margin-top:.6rem}

/* ── KNÖPFE ────────────────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;padding:.85rem 1.5rem;
  border:1px solid var(--tinte);color:var(--tinte);position:relative;overflow:hidden;
  isolation:isolate;transition:color .4s var(--e),border-color .4s;cursor:pointer}
.knopf::before{content:'';position:absolute;inset:0;background:var(--signal);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--e);z-index:-1}
/* Schrift auf Orange ist dunkel — Warnschild-Logik, und deutlich besser lesbar als Weiß */
.knopf:hover{color:#121309;border-color:var(--signal)}
.knopf:hover::before{transform:scaleY(1)}
.knopf.voll{background:var(--signal);border-color:var(--signal);color:#121309;font-weight:500}
.knopf.voll::before{background:#121309}
.knopf.voll:hover{color:var(--signal);border-color:#121309}

/* ── FORMULARE ─────────────────────────────────────────────────────────── */
.feld{margin-bottom:1.1rem}
.feld label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leise);margin-bottom:.4rem}
.feld input,.feld textarea,.feld select{
  width:100%;padding:.85rem 1rem;background:var(--karte);border:1px solid var(--linie);
  color:var(--tinte);font-family:var(--grot);font-size:1rem;transition:border-color .25s}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--signal)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
.feld .pflicht{color:var(--signal)}
.formhinweis{font-family:var(--mono);font-size:.74rem;line-height:1.75;color:var(--leise);
  margin-top:.9rem}
.formhinweis a{color:var(--tinte);border-bottom:1px solid var(--signal)}
.formmeldung{font-family:var(--mono);font-size:.78rem;padding:.8rem 1rem;margin-top:1rem;
  border-left:2px solid var(--signal);background:var(--karte);color:var(--tinte)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--mono);
  font-size:.74rem;line-height:1.6;color:var(--mild);margin-bottom:1.1rem}
.check input{margin-top:.25rem;accent-color:var(--signal);width:16px;height:16px;flex:none}

/* Radio-Wahl (für mich / als Geschenk) */
.wahl{display:flex;flex-wrap:wrap;gap:.6rem}
.wahl label{display:flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1px solid var(--linie);padding:.6rem .9rem;flex:1 1 auto;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;transition:.25s var(--e)}
.wahl label:hover{border-color:var(--signal)}
.wahl input{accent-color:var(--signal);width:15px;height:15px;flex:none}
.wahl input:checked + span{color:var(--tinte)}
.wahl label:has(input:checked){border-color:var(--signal);
  background:color-mix(in srgb,var(--signal) 10%,transparent)}

/* Feldgruppe */
fieldset.block{border:0;border-top:1px solid var(--linie-zart);padding:1.4rem 0 0;margin:1.6rem 0 0}
fieldset.block legend{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal-schrift);padding:0 .7rem 0 0}

/* ── KALENDER ──────────────────────────────────────────────────────────── */
.kalender{border:1px solid var(--linie);background:var(--karte);margin-top:1.6rem;
  position:relative}
.kalender iframe{display:block;width:100%;height:520px;border:0;filter:var(--kalfilter);
  transition:filter .9s var(--e)}
/* Das hidden-Attribut setzt display:none — aber die Regel darueber ist
   staerker und haette es ueberstimmt. Dann haengt unter dem Hinweiskasten ein
   leerer 520-Pixel-Block. Deshalb hier ausdruecklich zuruecknehmen. */
.kalender iframe[hidden]{display:none}
.kalenderkopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1rem;border-bottom:1px solid var(--linie-zart);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--leise)}
@media(max-width:900px){.kalender iframe{height:440px}}

/* ── KALENDERSPERRE (Zwei-Klick) ───────────────────────────────────────────
   Der Google-Kalender laedt erst auf ausdruecklichen Klick. Bis dahin steht
   hier ein Kasten, der erklaert warum. Technisch: die Adresse steht am iframe
   als data-src, nicht als src — dadurch faengt der Browser gar nicht erst an,
   etwas zu Google zu schicken.
   ───────────────────────────────────────────────────────────────────────── */
/* Keine Mindesthoehe. Der Kasten ist so hoch wie sein Inhalt — ein halbleerer
   520-Pixel-Block sieht kaputt aus. Dass die Seite beim Laden des Kalenders
   waechst, ist in Ordnung: Das passiert nach einem Klick, den jemand bewusst
   gemacht hat, und genau dort schaut er auch hin. */
.kalsperre{padding:1.8rem 1.6rem;background:var(--karte)}
.kalsperre .kalworum{font-family:var(--display);font-variation-settings:'wdth' 84;
  font-weight:700;font-size:1.15rem;letter-spacing:.01em;color:var(--tinte);
  margin:0 0 .9rem;max-width:none}
.kalsperre .kaltext{font-size:.96rem;color:var(--mild);max-width:46ch;margin:0 0 .9rem}
.kalsperre .knopf{align-self:flex-start;margin-top:.6rem}
.kalsperre .kalmerken{display:flex;align-items:center;gap:.55rem;margin-top:1.1rem;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--leise);
  cursor:pointer}
.kalsperre .kalmerken input{accent-color:var(--signal);width:1rem;height:1rem}
.kalsperre .kalklein{font-family:var(--mono);font-size:.72rem;line-height:1.85;
  letter-spacing:.03em;color:var(--leise);max-width:52ch;
  margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--linie-zart)}
.kalsperre .kalklein a{color:var(--signal-schrift);border-bottom:1px solid var(--linie)}
@media(max-width:900px){.kalsperre{padding:1.5rem 1.2rem}}

/* ── REVEAL ────────────────────────────────────────────────────────────── */
/* WICHTIG: Versteckt wird nur, wenn Javascript nachweislich läuft (Klasse
   „animiert" auf <html>). Ein reines .auf{opacity:0} wäre ein Single Point of
   Failure — käme gezeiten.js nicht an, wäre der halbe Inhalt unsichtbar und
   niemand wüsste warum. Inhalt geht vor Animation. */
html.animiert .auf{opacity:0;transform:translateY(20px);
  transition:opacity 1s var(--e),transform 1s var(--e)}
html.animiert .auf.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html.animiert .auf{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── STATUS-CHIP ───────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--linie);
  padding:.42rem .85rem;color:var(--tinte)}
.punkt{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none;
  box-shadow:0 0 0 0 var(--signal);animation:puls 2.4s infinite}
.punkt.zu{background:var(--leise);animation:none;box-shadow:none}
/* Der Chip trägt jetzt einen ganzen Satz. Auf schmalen Geräten darf er
   umbrechen — aber nie mitten im Statuswort. */
.chip .stat{white-space:nowrap}
@keyframes puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 70%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ── SEITENKOPF (Unterseiten) ──────────────────────────────────────────── */
.seitenkopf{padding-top:calc(clamp(4.5rem,11vh,9rem) + 3rem)}
.seitenkopf h1{font-size:clamp(2.8rem,9vw,7.5rem);margin-bottom:1.2rem}
.seitenkopf .untertitel{font-family:var(--serif);font-style:italic;
  font-variation-settings:var(--vf-gross);
  font-size:clamp(1.15rem,2.2vw,1.7rem);color:var(--tinte);max-width:26ch}

/* ── KARTEN (Shop etc.) ────────────────────────────────────────────────── */
.karten{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie-zart);
  border:1px solid var(--linie-zart);margin-top:3rem}
@media(max-width:900px){.karten{grid-template-columns:1fr}}
.karte{background:var(--grund);padding:2.2rem 1.9rem;display:flex;flex-direction:column;
  transition:background .4s var(--e)}
.karte:hover{background:var(--grund2)}
.karte h3{margin-bottom:.9rem;font-size:1.35rem}
.karte .knopf{margin-top:auto;align-self:flex-start}
.karte ul{list-style:none;margin:0 0 1.6rem}
.karte li{font-family:var(--mono);font-size:.76rem;color:var(--leise);line-height:2;
  border-bottom:1px solid var(--linie-zart)}

/* ── PROSA (Impressum, Datenschutz) ────────────────────────────────────── */
.prosa{max-width:70ch}
.prosa h2{font-size:clamp(1.2rem,2vw,1.6rem);font-variation-settings:var(--vf-mittel);font-weight:700;
  line-height:1.2;margin:2.8rem 0 .9rem;padding-top:1.4rem;border-top:1px solid var(--linie-zart)}
.prosa h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prosa p{max-width:none;font-size:1rem;line-height:1.75}
.prosa ul,.prosa ol{margin:0 0 1.2rem 1.2rem}
/* Listen so groß und so hell wie der Fließtext — vorher erbten sie 18,5 px statt 16 px
   und standen in --mild: auf dem Handy wirkte das wie zwei Schriften. */
.prosa li{margin-bottom:.4rem;font-size:1rem;line-height:1.75}
.prosa a{color:var(--tinte);border-bottom:1px solid var(--signal)}
.prosa strong{color:var(--tinte)}
/* Technische Namen (Speicherschlüssel u. ä.): dieselbe Mono wie überall auf der
   Seite und etwas kleiner — vorher sprang hier die Systemschrift des Telefons ein. */
code{font-family:var(--mono);font-size:.82em;letter-spacing:0;font-weight:400}
.prosa code{color:var(--mild);overflow-wrap:anywhere}

/* ── ZITAT ─────────────────────────────────────────────────────────────── */
.zitat{padding-block:clamp(4.5rem,13vh,10rem)}
.zitat q{font-family:var(--serif);font-style:italic;font-variation-settings:var(--vf-plakat);quotes:none;
  font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.08;display:block;max-width:17ch}
.zitat .quelle{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--leise);margin-top:2rem;display:block}

/* ── FUSS ──────────────────────────────────────────────────────────────── */
footer.fuss{border-top:1px solid var(--linie-zart);padding:4rem 0 5.5rem;margin-top:3rem}
.fussraster{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media(max-width:900px){.fussraster{grid-template-columns:1fr 1fr}}
/* Die Spaltenüberschriften im Fuß sind h2, nicht h4: sie folgen im Dokument
   auf die h2 der Abschnitte, ein Sprung auf h4 hätte die Gliederung zerrissen.
   Die globale Überschriftenregel wird hier vollständig zurückgenommen. */
.fuss h2{font-variation-settings:normal;line-height:1.4;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--leise);font-weight:400;margin-bottom:.9rem}
.fuss li{list-style:none;font-family:var(--mono);font-size:.8rem;color:var(--mild);
  line-height:1.55;letter-spacing:.01em;margin-bottom:.6rem}
.fuss li a:hover{color:var(--signal)}
/* Zusammengehöriges bricht nicht auseinander („3.1. offen" allein in einer Zeile).
   Spans statt geschützter Leerzeichen: Nach dem Gedankenstrich darf der Browser
   sonst trotzdem umbrechen. */
.nb{white-space:nowrap}
.schluss{font-family:var(--display);font-variation-settings:var(--vf-plakat);font-weight:900;
  font-size:clamp(3rem,13vw,12rem);line-height:.8;text-transform:uppercase;opacity:.1;
  margin-top:4rem;user-select:none}
/* Das Siegel im Fuß — größer, aber ruhig */
.siegelfuss{display:flex;align-items:center;gap:1.4rem;margin-top:3.5rem;
  padding-top:2rem;border-top:1px solid var(--linie-zart)}
.siegelfuss img{width:86px;height:86px;flex:none;border-radius:50%;
}
.siegelfuss p{margin:0;max-width:34ch;font-family:var(--mono);font-size:.76rem;
  line-height:1.8;color:var(--leise);letter-spacing:.04em}


/* ══════════════════════════════════════════════════════════════════════════
   MOBIL — hier zählt jedes Pixel

   Die meisten Gäste schauen im Urlaub aufs Telefon, nicht auf einen Rechner.
   Das Problem: In einer Zeile brauchen Marke, Navigation und Lichtschalter
   deutlich mehr Platz, als ein Telefon hat.

   Eine ausklappbare Menütaste wäre die übliche Antwort — sie braucht aber
   Javascript, und dann hinge die Navigation wieder an einer Datei, die auch
   ausbleiben kann. Deshalb die einfachere Lösung: Unterhalb von 860 Pixeln
   ist die Kopfzeile nicht mehr fest angeheftet, sondern scrollt mit. Sie darf
   dann zweizeilig werden. Der Inhalt bekommt den ganzen Schirm, die
   Wasserlinie unten bleibt als feste Orientierung.
   ══════════════════════════════════════════════════════════════════════════ */

/* Lange Adressen und Wortungetüme dürfen die Seite nicht aufreißen */
/* Lange Adressen und Wortungetüme dürfen die Seite nicht aufreißen.
   ABER: Überschriften bleiben ausdrücklich außen vor. Ein erzwungener Umbruch
   mitten im Wort macht aus „VORTÄUSCHT" ein „VORTÄUSCH / T." — das sah aus wie
   ein Satzfehler. Überschriften trennen deshalb mit Bindestrich (hyphens),
   das ist im Deutschen die richtige Antwort auf ein zu langes Wort. */
p,li,dd,dt,figcaption,a,.log,.prosa{overflow-wrap:break-word}
  /* Kurze Woerter gar nicht trennen und nie naeher als vier Zeichen an
     einem Wortende — das verhindert Silbenreste wie „Kuur-\nhuus" und
     schuetzt nebenbei die Markennamen im Fliesstext. */
  p,li,dd,dt,figcaption,.prosa{hyphenate-limit-chars:10 4 4}
h1,h2,h3,h4{overflow-wrap:normal;hyphens:none;-webkit-hyphens:none}

/* Wasserlinie über dem iOS-Balken halten */
.wasserlinie{height:calc(30px + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px)}
footer.fuss{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}

@media(max-width:860px){
  header.kopf{position:static;flex-wrap:wrap;row-gap:.7rem;
    padding:1rem var(--gut) .85rem;backdrop-filter:none;background:var(--grund)}
  .marke{flex:1 1 100%;font-size:.88rem;letter-spacing:.1em;white-space:normal}
  .marke .siegel{width:28px;height:28px}
  .kopf nav{flex:1 1 100%;flex-wrap:wrap;gap:.1rem 1.5rem;align-items:center}
  /* Tap-Ziele: mindestens 44 Pixel hoch, sonst trifft man mit dem Daumen daneben */
  .kopf nav a{min-height:44px;display:inline-flex;align-items:center;
    font-size:.78rem;padding-bottom:0}
  .kopf nav a:hover,.kopf nav a[aria-current]{border-color:transparent;
    color:var(--signal-schrift)}
  .lichtschalter{margin-left:auto}
  .lichtschalter button{min-height:38px;padding:.35rem .75rem;font-size:.7rem}

  /* Ein bildschirmfüllender Kopf ist auf dem Telefon verschenkter Platz */
  .seitenkopf{padding-top:2.2rem}
  section{padding:3.4rem 0}
  section[id],div[id]{scroll-margin-top:1rem}
  .nummer{font-size:5.5rem;top:1rem;opacity:.05}
}

@media(max-width:640px){
  /* Zweispaltige Logbücher werden einspaltig — sonst wird die rechte Spalte
     zur Silbenwurst aus zwei Wörtern je Zeile */
  .log dl{grid-template-columns:1fr;gap:0}
  .log dt{padding-top:1rem;font-size:.71rem}
  .log dd{padding-bottom:.55rem;margin-top:.2rem}

  .karte{padding:1.8rem 1.4rem}
  .prosa .nr{grid-template-columns:2.1rem 1fr;gap:0 .3rem}
  .zitat q{max-width:none}
  .schluss{font-size:2.6rem;line-height:1;margin-top:2.6rem}
  .siegelfuss{gap:1rem;margin-top:2.4rem}
  .siegelfuss img{width:64px;height:64px}
  .wasserlinie{font-size:.66rem;gap:.55rem;letter-spacing:.08em}
  .knopf{padding:.9rem 1.3rem;font-size:.74rem}
  /* Der Kalender im Agenda-Modus braucht auf dem Telefon weniger Höhe,
     scrollt aber selbst — deshalb nicht kleiner als nötig */
  .kalender iframe{height:400px}
  .kalenderkopf{flex-wrap:wrap;gap:.4rem;font-size:.68rem}
  .wahl label{flex:1 1 100%}
}

@media(max-width:480px){
  .fussraster{grid-template-columns:1fr;gap:1.6rem}
  .marke{font-size:.8rem;letter-spacing:.08em}
  .kopf nav{gap:.1rem 1.1rem}
  .kopf nav a{font-size:.73rem}
  .chip{font-size:.68rem;padding:.38rem .7rem}
}

/* ── MUSTERBRIEF ───────────────────────────────────────────────────────────
   Früher standen hier Punktreihen aus 50 Zeichen. Auf einem Telefon ist so
   eine Reihe ein einziges unteilbares Wort und reißt die Seite auf.
   Jetzt: Beschriftung plus eine gezeichnete Linie. Bricht sauber um,
   lässt sich ausdrucken und von Hand ausfüllen.
   ─────────────────────────────────────────────────────────────────────────── */
.musterbrief{font-family:var(--mono);font-size:.84rem;line-height:1.85}
.musterbrief p{font-family:var(--mono);font-size:.84rem;line-height:1.85;
  max-width:none;color:var(--tinte)}
.musterbrief .anschrift{color:var(--mild);margin-bottom:1.4rem}
.linien{list-style:none;margin:1.4rem 0 1.2rem;padding:0}
.linien li{margin-bottom:1.25rem}
.linien span{display:block;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise);margin-bottom:.35rem}
.linien i{display:block;height:1.5rem;border-bottom:1px solid var(--linie);
  font-style:normal}
.musterbrief .klein{font-size:.72rem;color:var(--leise);margin:0}

/* Höhenangaben in vh sind auf dem Telefon eine Falle: 13vh sind auf einem
   hohen Schirm über 110 Pixel — oben und unten. Zwischen zwei Abschnitten
   entsteht so ein Loch von über 200 Pixeln, durch das man erst mal
   hindurchscrollt. Auf dem Telefon deshalb feste, knappe Werte. */
@media(max-width:860px){
  .zitat,.zitatbuehne{padding-block:clamp(2.2rem,7vh,4rem)}
}

/* ══ MOBILE ÜBERSCHRIFTEN UND NAVIGATION — Korrektur ══════════════════════

   Zwei Fehler aus dem ersten Mobil-Umbau:

   1) Die Überschriften tragen fest gesetzte Zeilenbreiten (max-width in ch).
      Auf dem Rechner ist das die Gestaltung — kurze, harte Zeilen neben einer
      zweiten Spalte. Einspaltig auf dem Telefon steht die Spalte aber allein,
      der Platz wäre da, und die Breitenbremse erzwingt trotzdem eine Trennung:
      „EINE PER-SON", „BÜCHER, DIE ETWAS SA-GEN". Also weg damit — die
      Überschrift darf die volle Spalte nutzen. Das !important ist nötig, weil
      die Breiten als style-Attribut direkt im HTML stehen.

   2) Die Nebenlinks der Navigation waren ab 1120 bzw. 1040 Pixeln ausgeblendet
      — sinnvoll, solange alles in eine Zeile musste. Seit die Kopfzeile
      zweizeilig umbricht, ist der Platz da. Auf liekedelers blieb sonst nur
      „Member's Room" stehen, Shop und Termine fehlten ganz.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  h1,h2,h3{max-width:none!important}
  /* Silbentrennung NUR hier. Am Rechner ist genug Platz — dort hat sie die
     Wortmarke zerlegt („DE-LER'S“). Marken werden nie getrennt. */
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}
  .wortmarke,.marke,.schluss,.laufband{hyphens:none;-webkit-hyphens:none}
  .seitenkopf h1{font-size:clamp(2.3rem,7.4vw,3.4rem)}
  h2{font-size:clamp(2rem,6.4vw,3rem)}
  .kopf nav a.verstecken{display:inline-flex}
}

/* Seit die Nebenlinks mobil wieder mitkommen, stehen auf der Startseite sieben
   Einträge in der Navigation (seit 08.10.2026 mit „Kladde"). Ab hier deshalb
   enger gesetzt, damit sie in höchstens zwei Zeilen passen statt in drei.
   Nachgerechnet mit der echten Schrift: bei 360 und 375 px Breite zwei Zeilen,
   erst unter 360 px drei. Wer hier lockert oder einen achten Eintrag dazunimmt,
   rechnet neu. */
@media(max-width:620px){
  .kopf nav{gap:.15rem 1rem}
  .kopf nav a{font-size:.72rem;letter-spacing:.06em}
}
@media(max-width:480px){
  .kopf nav{gap:.15rem .75rem}
  .kopf nav a{font-size:.68rem;letter-spacing:.04em}
}


/* ── Wasserzeichen ───────────────────────────────────────────────────────────
   Das Signet liegt fest im Hintergrund und scrollt nicht mit: Die Seite
   bewegt sich darüber hinweg wie Papier über einem Wasserzeichen im Bogen.

   Es liegt über dem Hero-Grund, aber unter allem Inhalt — `.bahn` trägt
   z-index:1 und steht später im Quelltext, deckt das Zeichen also überall ab.
   Läge es dahinter, würde es beim Scrollen an der Unterkante des Heros
   schlagartig freigelegt: eine harte waagerechte Kante, die durchs Bild wandert.
   So läuft es durchgehend durch, vom ersten Bildschirm bis zum Fuß.

   Mittig statt rechts: Das Zeichen ist symmetrisch gebaut, ein angeschnittener
   Rand macht daraus ein Fragment. In der Mitte bleibt es ein Zeichen.

   Der Bildpfad geht von dieser Datei aus, nicht von der Seite: ../images/…
   Das Element steht auf Startseite, Shop und Member’s Room. Auf den vier
   Rechtsseiten fehlt es absichtlich — dort steht zu viel Fließtext.
   ───────────────────────────────────────────────────────────────────────── */
.wasserzeichen{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url(../images/signet-strich.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:auto 96vh;
  opacity:.05}
html[data-licht="abend"] .wasserzeichen,
html[data-licht="nacht"] .wasserzeichen{filter:invert(1);opacity:.065}
html[data-licht="nacht"] .wasserzeichen{opacity:.045}
@media(max-width:860px){
  .wasserzeichen{background-size:auto 54vh;opacity:.045}
}