@font-face{font-family:Fraunces;src:url(/schrift/fraunces-latin-400-normal.woff2)format('woff2');
 font-weight:400;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;src:url(/schrift/fraunces-latin-600-normal.woff2)format('woff2');
 font-weight:600;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;src:url(/schrift/fraunces-latin-700-normal.woff2)format('woff2');
 font-weight:700;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/schrift/inter-latin-400-normal.woff2)format('woff2');
 font-weight:400;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/schrift/inter-latin-500-normal.woff2)format('woff2');
 font-weight:500;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/schrift/inter-latin-600-normal.woff2)format('woff2');
 font-weight:600;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(/schrift/inter-latin-700-normal.woff2)format('woff2');
 font-weight:700;font-style:normal;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*,*::before,*::after{box-sizing:border-box}
:root{
  --papier:#fbf8f3; --karte:#fff; --sand:#f4eee4; --sand2:#efe7d9;
  --linie:#e4dbcc; --linie2:#d5c9b4;
  --tinte:#191612; --tinte2:#575048; --tinte3:#877d70;
  --loden:#2a4739; --loden2:#38614d; --loden3:#e8efe9;
  --messing:#a97c25; --messing2:#f4ead4;
  --rot:#9d3223; --rot2:#f9ebe7;
  --nacht:#14120f;
  --serif:Fraunces,"Iowan Old Style","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rand:12px; --rand-s:6px;
  --schatten:0 1px 2px rgba(25,22,18,.04),0 8px 24px -12px rgba(25,22,18,.14);
  --schatten2:0 2px 4px rgba(25,22,18,.05),0 18px 40px -18px rgba(25,22,18,.22);
  --breit:1220px; --schmal:720px;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* Der Regionsfilter setzt hidden auf die Zeilen. Ohne diese Regel gewinnt
   .zeile{display:grid} gegen das display:none des Browsers - dann klappt
   der Filter sichtbar nichts weg. Am 01.09.2026 genau so passiert. */
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;
  letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--messing2)}
:focus-visible{outline:2px solid var(--loden);outline-offset:3px;border-radius:3px}

/* ---------------------------------------------------------------- Raster */
.hu{width:100%;max-width:var(--breit);margin:0 auto;padding:0 24px}
.hu-schmal{max-width:var(--schmal)}
.abschnitt{padding:88px 0}
.abschnitt-s{padding:56px 0}
.sand{background:var(--sand)}
.dunkel{background:var(--nacht);color:#efe9df}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}

/* --------------------------------------------------------- Ueberschriften */
.augen{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--messing);margin:0 0 14px}
.dunkel .augen{color:#d9b978}
.kopfzeile{margin-bottom:38px;max-width:640px}
.kopfzeile h1,.kopfzeile h2{font-size:clamp(28px,3.4vw,42px)}
.kopfzeile p{margin:14px 0 0;color:var(--tinte2);font-size:18px}
.kopfzeile-reihe{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:38px}
.kopfzeile-reihe .kopfzeile{margin-bottom:0}

/* ---------------------------------------------------------------- Knoepfe */
.knopf{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;
  background:var(--loden);color:#fff;text-decoration:none;font-weight:600;font-size:15px;
  border:1px solid var(--loden);transition:background .16s,transform .16s,box-shadow .16s}
.knopf:hover{background:var(--loden2);transform:translateY(-1px);box-shadow:var(--schatten)}
.knopf-hell{background:#fff;color:var(--tinte);border-color:rgba(255,255,255,.85)}
.knopf-hell:hover{background:#fff;color:var(--loden)}
.knopf-rand{background:transparent;color:var(--tinte);border-color:var(--linie2)}
.knopf-rand:hover{background:var(--karte);color:var(--loden);border-color:var(--loden)}
.hero .knopf-rand{color:#fff;border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.hero .knopf-rand:hover{background:rgba(255,255,255,.16);color:#fff;
  border-color:rgba(255,255,255,.85)}
.dunkel .knopf-rand{color:#efe9df;border-color:rgba(255,255,255,.3)}
.dunkel .knopf-rand:hover{background:rgba(255,255,255,.08);color:#fff}
.mehr{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;
  color:var(--loden);text-decoration:none;border-bottom:1px solid transparent;transition:.16s}
.mehr:hover{border-bottom-color:var(--loden)}
.mehr svg{transition:transform .16s}
.mehr:hover svg{transform:translateX(3px)}

/* ------------------------------------------------------------------ Kopf */
.kopf{position:sticky;top:0;z-index:60;background:var(--papier);
  border-bottom:1px solid var(--linie);transition:background .25s,border-color .25s}
.kopf-ueber{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent}
.kopf-ueber .marke,.kopf-ueber .nav a{color:#fff}
.kopf-ueber .marke b{color:#fff}
.kopf-ueber .marke i{color:#e8c583}
/* Der Menueknopf erbte seine Farbe vom Koerper und war damit dunkel - auf dem
   Kopfbild der Startseite also unsichtbar, solange nicht gescrollt war (gemeldet
   01.09.2026 vom Handy). Marke und Menuepunkte waren hier schon auf Weiss
   gesetzt, der Knopf nicht. */
.kopf-ueber .nav-schalter{color:#fff}
.kopf-fest{background:rgba(251,248,243,.97);backdrop-filter:saturate(1.4)blur(10px);
  border-bottom-color:var(--linie)}
/* Beim Scrollen bleibt .kopf-ueber am Element stehen und faerbt Marke und Menue weiter
   weiss – auf dem hellen Grund von .kopf-fest waere beides unsichtbar. Deshalb hier
   zurueck auf die Tintenfarben. Die Reihenfolge zaehlt: diese Regeln muessen NACH den
   .kopf-ueber-Regeln stehen. */
.kopf-ueber.kopf-fest .marke,.kopf-ueber.kopf-fest .marke b{color:var(--tinte)}
.kopf-ueber.kopf-fest .marke i{color:var(--messing)}
.kopf-ueber.kopf-fest .nav a{color:var(--tinte2)}
.kopf-ueber.kopf-fest .nav a:hover{color:var(--tinte);background:rgba(0,0,0,.04)}
.kopf-ueber.kopf-fest .nav a.an{color:var(--loden);background:none;font-weight:600}
.kopf-ueber.kopf-fest .nav-schalter{color:var(--tinte)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:28px;height:70px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);
  font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--tinte);white-space:nowrap}
.marke i{font-style:normal;color:var(--messing)}
.marke svg{flex:none}
.nav{display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;color:var(--tinte2);font-size:15px;font-weight:500;
  padding:9px 13px;border-radius:8px;transition:color .15s,background .15s;white-space:nowrap}
.nav a:hover{color:var(--tinte);background:rgba(0,0,0,.04)}
.kopf-ueber .nav a:hover{background:rgba(255,255,255,.14)}
.nav a.an{color:var(--loden);font-weight:600}
.kopf-ueber .nav a.an{color:#fff;background:rgba(255,255,255,.16)}
.nav-schalter{display:none;background:none;border:0;padding:8px;cursor:pointer;color:inherit}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative;min-height:min(88vh,760px);display:flex;flex-direction:column;
  justify-content:flex-end;color:#fff;overflow:hidden;background:var(--nacht)}
.hero>.hu{width:100%}
.hero-fuss-hu{position:relative;z-index:2}
.hero-bild{position:absolute;inset:0}
.hero-bild img{width:100%;height:100%;object-fit:cover}
.hero-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.62)0%,rgba(10,9,8,.24)32%,rgba(10,9,8,.5)62%,rgba(10,9,8,.88)100%)}
.hero-innen{position:relative;z-index:2;padding:150px 0 60px;max-width:800px}
.hero h1{font-size:clamp(38px,6.2vw,74px);font-weight:600;letter-spacing:-.028em;
  line-height:1.03;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero-lead{margin:22px 0 0;font-size:clamp(17px,1.9vw,21px);line-height:1.55;
  color:rgba(255,255,255,.9);max-width:600px}
.hero-augen{color:#e8c583;margin-bottom:18px}
.hero-knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-fuss{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);
  padding:18px 0;font-size:14px;color:rgba(255,255,255,.75);
  display:flex;gap:8px 26px;flex-wrap:wrap;align-items:center}
.hero-fuss b{color:#fff;font-weight:600}
.hero-fuss .pkt{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}

/* Kleinerer Kopfbereich fuer Unterseiten */
.hero-s{min-height:min(58vh,480px)}
.hero-s .hero-bild::after{background:linear-gradient(180deg,rgba(10,9,8,.78)0%,
  rgba(10,9,8,.46)38%,rgba(10,9,8,.6)70%,rgba(10,9,8,.9)100%)}
.hero-s .hero-innen{padding:130px 0 46px}
.hero-s h1{font-size:clamp(31px,4.6vw,54px)}

/* ------------------------------------------------------------------ Karte */
.gitter{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.kk{display:flex;flex-direction:column;background:var(--karte);border-radius:var(--rand);
  overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--linie);
  transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.kk:hover{transform:translateY(-3px);box-shadow:var(--schatten2);border-color:var(--linie2)}
.kk-bild{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand2)}
.kk-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kk:hover .kk-bild img{transform:scale(1.035)}
.kk-text{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;min-width:0}
.kk-ort{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte3);margin-bottom:7px}
.kk h3{font-size:20px;line-height:1.2;margin-bottom:9px}
.kk-datum{font-size:15px;color:var(--tinte2);font-variant-numeric:tabular-nums;margin-top:auto}
.kk-datum b{color:var(--tinte);font-weight:600}
.kk-fahne{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(20,18,15,.72);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:999px;letter-spacing:.02em}
.kk-fahne.laeuft{background:var(--rot)}
.punkt{width:6px;height:6px;border-radius:50%;background:#fff;
  animation:pulsen 2.2s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:1}50%{opacity:.35}}

/* Grosse Aufmacherkarte */
.kk-gross .kk-bild{aspect-ratio:16/10}
.kk-gross h3{font-size:26px}
.kk-gross .kk-text{padding:24px 26px 26px}
.kk-lead{font-size:15px;color:var(--tinte2);line-height:1.55;margin:0 0 14px}

/* ------------------------------------------------------- Terminliste */
.monat{margin-top:52px}
.monat:first-child{margin-top:0}
.monat-kopf{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;
  border-bottom:2px solid var(--tinte);margin-bottom:4px}
.monat-kopf h3{font-size:24px}
.monat-kopf span{font-size:13.5px;color:var(--tinte3);font-weight:500}
.zeile{display:grid;grid-template-columns:76px 104px minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:15px 4px;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;
  transition:background .15s;min-width:0;position:relative}
.zeile:hover{background:var(--karte)}
.zeile:hover .zeile-name{color:var(--loden)}
.zeile-bild{width:76px;height:56px;border-radius:var(--rand-s);overflow:hidden;background:var(--sand2)}
.zeile-bild img{width:100%;height:100%;object-fit:cover}
.zeile-datum{font-variant-numeric:tabular-nums;line-height:1.15}
.zeile-datum .tag{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.02em}
.zeile-datum .wt{font-size:12px;color:var(--tinte3);text-transform:uppercase;letter-spacing:.07em;
  font-weight:600;margin-bottom:2px}
.zeile-datum .bis{font-size:12.5px;color:var(--tinte2);margin-top:1px;white-space:nowrap}
.zeile-mitte{min-width:0}
.zeile-name{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;
  line-height:1.25;transition:color .15s}
.zeile-meta{font-size:14px;color:var(--tinte2);margin-top:3px;
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.zeile-rechts{display:flex;align-items:center;gap:12px;color:var(--tinte3)}
.marke-s{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px;background:var(--sand2);color:var(--tinte2);white-space:nowrap}
.marke-s.laeuft{background:var(--rot2);color:var(--rot)}
.marke-s.grob{background:var(--messing2);color:#8a6518}
.pfeil{flex:none;opacity:.35;transition:transform .18s,opacity .18s}
.zeile:hover .pfeil{opacity:.85;transform:translateX(3px)}

/* ------------------------------------------------------------ Filter */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;
  padding-bottom:4px}
.filter button{font:inherit;font-size:14px;font-weight:500;padding:8px 16px;border-radius:999px;
  border:1px solid var(--linie2);background:transparent;color:var(--tinte2);cursor:pointer;
  transition:.15s;white-space:nowrap}
.filter button:hover{border-color:var(--tinte3);color:var(--tinte)}
.filter button[aria-pressed=true]{background:var(--loden);border-color:var(--loden);color:#fff}

/* ------------------------------------------------------ Landkarte */
.landkarte{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:center}
.landkarte>div:first-child>svg,.kasten svg.lk,.kartenblatt>svg{
  width:100%;height:auto;display:block;overflow:visible}
.lk-flaeche{fill:#fff;stroke:var(--linie2);stroke-width:1.1;stroke-linejoin:round}
.lk-punkt{cursor:pointer;transition:r .15s}
.lk-punkt circle{transition:transform .15s,fill .15s}
.lk-punkt:hover circle.pin{fill:var(--rot)}
.lk-stadt{font-family:var(--sans);font-size:10px;font-weight:600;fill:var(--tinte2);
  paint-order:stroke;stroke:var(--papier);stroke-width:2.5px;stroke-linejoin:round}
.lk-liste{font-size:15px}
.lk-liste h3{font-size:20px;margin-bottom:14px}
.lk-liste ul{list-style:none;margin:0;padding:0}
.lk-liste li{padding:7px 0;border-bottom:1px solid var(--linie)}
.lk-liste a{text-decoration:none;color:var(--tinte2);display:flex;justify-content:space-between;
  gap:12px;transition:color .15s}
.lk-liste a:hover{color:var(--loden)}
.lk-liste b{font-weight:500;color:var(--tinte)}
.lk-liste span{color:var(--tinte3);font-size:13.5px;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- Regionen */
.region{position:relative;display:block;border-radius:var(--rand);overflow:hidden;
  text-decoration:none;color:#fff;aspect-ratio:4/3;background:var(--nacht)}
.region img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.region:hover img{transform:scale(1.05)}
.region::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.05)35%,rgba(10,9,8,.82)100%)}
.region-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px}
.region-text h3{font-size:22px;color:#fff}
.region-text p{margin:4px 0 0;font-size:13.5px;color:rgba(255,255,255,.78)}

/* ------------------------------------------------------ Detailseite */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:60px;align-items:start}
.fliess{font-size:17.5px;line-height:1.72;color:#2b2620;max-width:66ch}
.fliess h2{font-size:27px;margin:44px 0 16px}
.fliess h2:first-child{margin-top:0}
.fliess h3{font-size:20px;margin:30px 0 10px}
.fliess ul{margin:0 0 1.2em;padding-left:1.15em}
.fliess li{margin-bottom:.42em}
.fliess a{color:var(--loden);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(42,71,57,.35)}
.fliess a:hover{text-decoration-color:var(--loden)}
.vorspann{font-size:20.5px;line-height:1.6;color:var(--tinte);font-weight:400;
  margin-bottom:30px;max-width:60ch}

.zitat{margin:36px 0;padding:26px 30px;background:var(--loden3);border-radius:var(--rand);
  border-left:3px solid var(--loden)}
.zitat p{font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--loden);margin:0;
  font-weight:500}
.zitat .augen{color:var(--loden2);margin-bottom:9px}

.merkmale{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 0;padding:0;list-style:none}
.merkmale li{display:inline-flex;align-items:center;gap:8px;background:var(--karte);
  border:1px solid var(--linie);border-radius:999px;padding:8px 15px;font-size:14.5px;
  color:var(--tinte2);margin:0}
.merkmale li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--messing);flex:none}

.tipps{list-style:none;margin:0;padding:0;counter-reset:t}
.tipps li{counter-increment:t;position:relative;padding:0 0 0 46px;margin-bottom:16px;
  font-size:16.5px;line-height:1.6;color:#2b2620}
.tipps li::before{content:counter(t);position:absolute;left:0;top:1px;width:28px;height:28px;
  border-radius:50%;background:var(--loden);color:#fff;font-family:var(--sans);font-size:13px;
  font-weight:700;display:flex;align-items:center;justify-content:center}

/* Seitenspalte */
.spalte{position:sticky;top:92px;display:flex;flex-direction:column;gap:20px}
.kasten{background:var(--karte);border:1px solid var(--linie);border-radius:var(--rand);
  padding:22px 24px}
.kasten h3{font-size:17px;margin-bottom:14px}
.kasten-dunkel{background:var(--loden);color:#fff;border-color:var(--loden)}
.kasten-dunkel h3{color:#fff}
.naechster{font-size:14px;color:rgba(255,255,255,.72);margin-bottom:6px}
.naechster-datum{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.15;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.countdown{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);
  font-size:14.5px;color:rgba(255,255,255,.88)}
.countdown b{font-size:18px;font-weight:600;color:#fff}

.fakten{list-style:none;margin:0;padding:0;font-size:15px}
.fakten li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--linie)}
.fakten li:last-child{border-bottom:0;padding-bottom:0}
.fakten dt,.fakten .b{color:var(--tinte3);flex:none}
.fakten .w{text-align:right;font-weight:500;min-width:0}

/* Termintabelle */
.termine{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 8px}
.termine th{text-align:left;font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinte3);
  padding:0 14px 9px 0;border-bottom:1px solid var(--linie2)}
.termine td{padding:14px 14px 14px 0;border-bottom:1px solid var(--linie);vertical-align:baseline;
  font-variant-numeric:tabular-nums}
.termine tr:last-child td{border-bottom:0}
.termine .jahr{font-family:var(--serif);font-size:19px;font-weight:600}
.termine .zeit{font-weight:500}

/* Fragen */
.frage{border-bottom:1px solid var(--linie)}
.frage summary{cursor:pointer;list-style:none;padding:17px 40px 17px 0;position:relative;
  font-family:var(--serif);font-size:18.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--tinte);transition:color .15s}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--loden)}
.frage summary::after{content:"";position:absolute;right:6px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--tinte3);border-bottom:2px solid var(--tinte3);
  transform:rotate(45deg);transition:transform .2s}
.frage[open] summary::after{transform:rotate(-135deg);top:29px}
.frage-text{padding:0 40px 20px 0;font-size:16.5px;line-height:1.65;color:#3a342d;max-width:64ch}
.frage-text p:last-child{margin-bottom:0}

/* Video ohne Fremdzugriff (erst auf Klick) */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--rand);overflow:hidden;
  background:var(--nacht);cursor:pointer;border:0;padding:0;width:100%;display:block}
.video img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .25s,transform .5s}
.video:hover img{opacity:.85;transform:scale(1.02)}
.video-knopf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;pointer-events:none}
.video-knopf .kreis{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.video-knopf .kreis svg{margin-left:4px}
.video-knopf small{font-size:13px;background:rgba(20,18,15,.7);padding:5px 12px;border-radius:999px;
  backdrop-filter:blur(4px)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-hinweis{font-size:13px;color:var(--tinte3);margin-top:10px}

/* Bildnachweis am Bild */
.bildquelle{font-size:12px;color:var(--tinte3);margin-top:8px;line-height:1.5}
.bildquelle a{color:var(--tinte3)}

/* ------------------------------------------------------------ Anzeigen */
.anzeige{margin:56px 0;text-align:center}
.anzeige-schild{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte3);margin-bottom:10px}
.anzeige-platz{min-height:96px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--linie2);border-radius:var(--rand-s);color:var(--tinte3);font-size:13px;
  background:rgba(255,255,255,.5)}

/* ---------------------------------------------------------------- Krumen */
.krumen{font-size:13.5px;color:var(--tinte3);padding:16px 0}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.krumen a{color:var(--tinte2);text-decoration:none}
.krumen a:hover{color:var(--loden);text-decoration:underline}
.krumen li+li::before{content:"›";margin-right:8px;color:var(--linie2)}
.krumen-hell{color:rgba(255,255,255,.6)}
.krumen-hell a{color:rgba(255,255,255,.85)}
.krumen-hell li+li::before{color:rgba(255,255,255,.4)}

/* ------------------------------------------------------------------ Fuss */
.fuss{background:var(--nacht);color:#b7afa4;padding:72px 0 34px;font-size:14.5px;margin-top:0}
/* Der Saisonhinweis unter dem Kopfbild einer Rubrikseite. Bewusst gross und
   ruhig gesetzt: er ist die kuerzeste Antwort auf die haeufigste Frage
   ("wann ist eigentlich Zeit dafuer") und soll vor der Terminliste gelesen
   werden, nicht daneben. */
.saison{max-width:760px;margin:38px 0 0;padding:20px 24px;border-left:3px solid var(--messing);
        background:var(--sand);font-size:1.06rem;line-height:1.62;color:var(--tinte)}
@media(max-width:640px){.saison{margin-top:26px;padding:16px 18px;font-size:1rem}}

/* Ortsseite: die Feste einer Stadt nach Art gruppiert. Steht vor dem
   Kalender, weil "was gibt es hier" schneller zu beantworten ist als eine
   chronologische Liste, in der Weihnachtsmarkt und Starkbierfest ein halbes
   Jahr auseinanderliegen. */
.ort-rubriken{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px}
.ort-rubrik h3{font-size:1.12rem;margin:0 0 10px;padding-bottom:8px;
  border-bottom:2px solid var(--linie2);display:flex;align-items:baseline;gap:8px}
.ort-rubrik h3 span{font-size:.85rem;font-weight:500;color:var(--tinte3)}
.ort-rubrik ul{list-style:none;margin:0 0 12px;padding:0}
/* Umbrechend, nicht quetschend: Ein langer Festname wie "Mittelalterlicher
   Weihnachtsmarkt am Wittelsbacherplatz" schob das Datum sonst in den Namen.
   Der Name darf die Zeile fuellen, das Datum rutscht bei Bedarf darunter und
   bleibt dort rechtsbuendig. */
.ort-rubrik li a{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;
  padding:9px 2px;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit}
.ort-rubrik li a:hover{background:var(--sand)}
.ort-rubrik li b{flex:1 1 11rem;font-weight:600;line-height:1.35}
.ort-rubrik li span{flex:0 0 auto;margin-left:auto;
  font-size:.86rem;color:var(--tinte2);white-space:nowrap}
@media(max-width:520px){
  .ort-rubrik li b{flex-basis:100%}
  .ort-rubrik li span{margin-left:0}
}

/* Verzeichnis A–Z. Die Sprungleiste bleibt beim Scrollen oben stehen: bei 199
   Eintraegen ist der Weg zurueck zum Buchstaben sonst weit. */
.az-sprung{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:5px;
  padding:14px 0;margin-bottom:10px;background:var(--papier);border-bottom:1px solid var(--linie)}
.az-sprung a{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 7px;border:1px solid var(--linie2);
  border-radius:var(--rand-s);font-weight:600;font-size:.92rem;color:var(--tinte2);
  text-decoration:none}
.az-sprung a:hover{background:var(--loden);border-color:var(--loden);color:#fff}
.az-block{margin-top:34px;scroll-margin-top:76px}
.az-block>h2{font-size:1.5rem;margin:0 0 10px;padding-bottom:7px;
  border-bottom:2px solid var(--linie2)}
.az-liste{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.az-liste a{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  padding:11px 4px;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit}
.az-liste a:hover{background:var(--sand)}
.az-liste b{font-weight:600;line-height:1.35}
/* Ort und Art stehen in derselben Zeile unter dem Namen, der Termin rechts
   daneben - so bleibt die Zeile auch bei langen Festnamen zweizeilig. */
.az-ort,.az-art{grid-column:1;font-size:.88rem;color:var(--tinte2)}
.az-art{color:var(--tinte3)}
.az-termin{grid-column:2;grid-row:1 / span 3;align-self:center;
  font-size:.88rem;color:var(--tinte2);white-space:nowrap;text-align:right}
@media(max-width:820px){.az-liste{grid-template-columns:1fr}}
@media(max-width:520px){
  .az-termin{grid-column:1;grid-row:auto;text-align:left;align-self:start}
}
/* Weiterfuehrung unter der Startseiten-Terminliste. */
.weiter{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}

.fuss-gitter{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:38px;margin-bottom:52px}
.fuss h4{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#7d746a;margin:0 0 15px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:9px}
.fuss a{color:#cfc7bc;text-decoration:none;transition:color .15s}
.fuss a:hover{color:#fff}
.fuss-marke{font-family:var(--serif);font-size:22px;font-weight:700;color:#fff;
  margin-bottom:12px;display:block;text-decoration:none;letter-spacing:-.02em}
.fuss-marke i{font-style:normal;color:#d9b978}
.fuss-text{max-width:34ch;line-height:1.65;color:#948b81}
.fuss-unten{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#7d746a}
.fuss-unten a{color:#948b81}

/* ------------------------------------------------------------- Kleiner */
@media(max-width:1080px){
  .detail{grid-template-columns:1fr;gap:44px}
  .spalte{position:static;flex-direction:row;flex-wrap:wrap}
  .spalte>*{flex:1 1 260px}
  .landkarte{grid-template-columns:1fr;gap:32px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss-gitter{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:820px){
  body{font-size:16.5px}
  .abschnitt{padding:62px 0}
  .g3,.g2{grid-template-columns:1fr}
  .nav{position:fixed;inset:70px 0 auto;background:var(--papier);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 18px 22px;border-bottom:1px solid var(--linie);
    box-shadow:var(--schatten2);display:none}
  .nav.offen{display:flex}
  .nav a{padding:13px 8px;border-bottom:1px solid var(--linie);border-radius:0;font-size:16px;
    color:var(--tinte2)!important}
  .nav a:last-child{border-bottom:0}
  .nav-schalter{display:block}
  .hero-innen{padding:118px 0 40px}
  .zeile{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px 2px;
    grid-template-areas:"bild mitte";align-items:center}
  .zeile-bild{grid-area:bild;width:64px;height:64px}
  .zeile-mitte{grid-area:mitte}
  .zeile-datum{display:none}
  .zeile-rechts{display:none}
  .zeile-meta{font-size:13.5px}
  .zeile-meta .m-datum{font-weight:600;color:var(--tinte)}
  .fliess{font-size:17px}
  .vorspann{font-size:18.5px}
  .filter{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    margin-left:-24px;margin-right:-24px;padding:0 24px 6px}
  .filter::-webkit-scrollbar{display:none}
}
@media(max-width:560px){
  .hu{padding:0 18px}
  .g4{grid-template-columns:1fr}
  .fuss-gitter{grid-template-columns:1fr;gap:30px}
  .hero-fuss{font-size:13px;gap:6px 16px}
  .kasten{padding:19px 20px}
  .zitat{padding:20px 22px}
  .zitat p{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .kopf,.fuss,.anzeige,.filter,.video{display:none}
  body{background:#fff}
}