/* =========================================================================
   Hutschelhexen Bad Bergzabern e.V. – Designkonzept (statisch)
   -------------------------------------------------------------------------
   Herleitung: Holzlarve (Lindenholz, Augenränder gelb/grün), rotes
   Kopftuch, Feuer des Hexensprungs, Kerbschnitt des Schnitzers.
   Schriften selbst gehostet (SIL OFL 1.1), kein externer Server.
   Navigation: Verhalten nach dem Vorbild quadro.1qn.de (3 Stufen,
   schrumpfende Kopfleiste, Untermenü per Maus/Tastatur/Doppeltipp,
   Burger bis 760 px mit allen Ebenen offen), eigene Gestaltung.
   QUADRONET® Internetlösungen, 27.10.2026
   ========================================================================= */

/* ----- Schriften -------------------------------------------------------- */
/* Henny Penny gibt es nur in einem Schnitt. Die Gewichtsspanne 100–900 sorgt
   dafür, dass Überschriften mit font-weight 700/800 kein künstliches Fett bekommen.
   size-adjust 87 %: Henny Penny läuft rund 15 % breiter als die zuvor geplante
   Grenze Gotisch; so bleiben alle Größen und Umbrüche des Entwurfs gültig. */
@font-face{font-family:'Henny Penny';font-style:normal;font-weight:100 900;font-display:swap;size-adjust:87%;src:url(../Fonts/henny-penny-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;src:url(../Fonts/alegreya-latin-400-normal.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:'Alegreya';font-style:normal;font-weight:400;font-display:swap;src:url(../Fonts/alegreya-latin-ext-400-normal.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:'Alegreya';font-style:italic;font-weight:400;font-display:swap;src:url(../Fonts/alegreya-latin-400-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:'Alegreya';font-style:italic;font-weight:400;font-display:swap;src:url(../Fonts/alegreya-latin-ext-400-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:'Alegreya';font-style:normal;font-weight:700;font-display:swap;src:url(../Fonts/alegreya-latin-700-normal.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:'Alegreya';font-style:normal;font-weight:700;font-display:swap;src:url(../Fonts/alegreya-latin-ext-700-normal.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:'Alegreya Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url(../Fonts/alegreya-sans-sc-latin-500-normal.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:'Alegreya Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url(../Fonts/alegreya-sans-sc-latin-ext-500-normal.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:'Alegreya Sans SC';font-style:normal;font-weight:700;font-display:swap;src:url(../Fonts/alegreya-sans-sc-latin-700-normal.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:'Alegreya Sans SC';font-style:normal;font-weight:700;font-display:swap;src:url(../Fonts/alegreya-sans-sc-latin-ext-700-normal.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}

/* ----- Farben und Maße --------------------------------------------------
   Kontraste gegen Ruß: Lindenholz 14,1 · Asche 7,9 · Kante 4,8 ·
   Glutrot 5,5 · Augengelb 11,2 · Augengrün 5,2.
   Auf Kopftuchrot: Tuchschrift 5,6. */
:root{
  --russ:#110E0C; --kohle:#1B1612; --rinde:#2A211A; --fuge:#3A2E25;
  --kante:#8C7C68; --linde:#EADBC2; --asche:#B5A48C;
  --tuch:#B42019; --tuch-dunkel:#951A14; --tuch-schrift:#F5EBDD;
  --glut:#E85A4A; --gelb:#E9C14B; --gruen:#6E8F3A;

  --display:'Henny Penny',Georgia,serif;
  --text:'Alegreya',Georgia,'Times New Roman',serif;
  --kapit:'Alegreya Sans SC','Gill Sans','Segoe UI',sans-serif;

  --breite:1360px;
  --rand:clamp(16px,4vw,40px);
  --kerb:28px;                       /* abgeschrägte Bildecken */
  --anker:107px;                     /* Kopfhöhe, setzt hexen.js – Vorgaben = gemessene Werte, */
  --dauer:.15s;                      /* sonst springt die klebende Bühne beim Messen (CLS) */
}
@media (max-width:1180px){:root{--anker:149px}}
@media (max-width:760px) and (scripting:enabled){:root{--anker:73px}}
@media (prefers-reduced-motion:reduce){:root{--dauer:0s}}

/* ----- Grundlagen ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--anker) + 16px);   /* WCAG 2.4.11: Fokus nie unter der Kopfleiste */
  background:var(--russ);color-scheme:dark;
}
body{margin:0;background:var(--russ);color:var(--linde);font:400 1.1875rem/1.6 var(--text);font-variant-numeric:lining-nums}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,.termin__titel{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
a{color:var(--linde)}
strong{font-weight:700}
::selection{background:var(--tuch);color:var(--tuch-schrift)}

/* Fokus wie ein Hexenauge: gelber Ring, grüner Hof (WCAG 2.4.7 / 2.4.13) */
:focus-visible{outline:2px solid var(--gelb);outline-offset:0;box-shadow:0 0 0 5px var(--gruen)}
:focus:not(:focus-visible){outline:none}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sprung{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;background:var(--gelb);color:var(--russ);font:700 1rem var(--kapit);text-decoration:none}
.sprung:focus{top:12px}

.wrap{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}

/* ----- Typografie ------------------------------------------------------- */
.t-h1{font:800 clamp(3.25rem,9vw,8.25rem)/1.02 var(--display);letter-spacing:-.005em}
.t-h1--seite{font-size:clamp(3.25rem,8vw,7.25rem)}
.t-h2{font:700 clamp(2.5rem,5vw,4rem)/1.08 var(--display)}
.t-h2--gross{font-size:clamp(2.75rem,5.5vw,4.75rem);line-height:1.05}
.t-h3{font:700 1.5625rem/1.25 var(--text)}
.t-klein{font:500 1rem/1.4 var(--kapit);letter-spacing:.04em;color:var(--asche)}
.t-lead{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.5;max-width:34ch}
.t-neben{color:var(--asche)}
.fliess > * + *{margin-top:1em}
.fliess{max-width:68ch}
.fliess h2{font:700 clamp(2rem,3.6vw,2.75rem)/1.12 var(--display);margin-top:1.4em}
.fliess h3{font:700 1.5rem/1.3 var(--text);margin-top:1.4em}

/* ----- Links und Knöpfe ------------------------------------------------- */
.link{color:var(--linde);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--kante);transition:color var(--dauer),text-decoration-color var(--dauer)}
.link:hover{color:var(--gelb);text-decoration-color:var(--gelb);text-decoration-thickness:2px}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:2px;font:700 1.0625rem/1 var(--kapit);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background-color var(--dauer),color var(--dauer)}
@supports (corner-shape:bevel){.knopf{border-radius:10px;corner-shape:bevel}}
.knopf svg{flex:none}
.knopf--tuch{background:var(--tuch);color:var(--tuch-schrift)}
.knopf--tuch:hover{background:var(--tuch-dunkel);color:#fff}
.knopf--holz{background:transparent;color:var(--linde);box-shadow:inset 0 0 0 2px var(--linde)}
.knopf--holz:hover{background:var(--linde);color:var(--russ)}
.knopf--holz:focus-visible{box-shadow:inset 0 0 0 2px var(--linde),0 0 0 5px var(--gruen)}
.knopf--hell{background:var(--tuch-schrift);color:#7A140F}
.knopf--hell:hover{background:var(--russ);color:var(--tuch-schrift)}
.knopf--breit{width:100%}
.knopf[disabled]{background:var(--rinde);color:var(--asche);box-shadow:inset 0 0 0 1px var(--kante);cursor:not-allowed}

.chip{min-height:44px;padding:0 18px;border:1px solid var(--kante);border-radius:999px;background:transparent;color:var(--linde);font:500 1.0625rem/1 var(--kapit);cursor:pointer;transition:border-color var(--dauer),color var(--dauer),background-color var(--dauer)}
.chip:hover{border-color:var(--gelb);color:var(--gelb)}
.chip[aria-pressed="true"]{background:var(--linde);border-color:var(--linde);color:var(--russ)}

/* =========================================================================
   Kopfleiste und Navigation
   ab 1181 px   eine Zeile: Logo · Menü · Mond
   761–1180 px  Logo und Mond oben, Menü darunter (Umbruch nur als Notnagel)
   bis  760 px  Burger – nur wenn Skripte laufen, sonst bleibt die
                umbrechende Fassung stehen und alles ist erreichbar
   ========================================================================= */
@property --kopf{syntax:'<number>';inherits:true;initial-value:1}

.kopf{
  --kopf:1;
  position:sticky;top:0;z-index:50;
  background:var(--russ);
  border-bottom:1px solid var(--fuge);
}
.kopf__reihe{
  max-width:var(--breite);margin-inline:auto;padding:calc(4px + 10px * var(--kopf)) var(--rand);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);
}
.kopf__marke{flex:none;display:block;line-height:0;border-radius:2px}
.kopf__marke img{height:calc(46px + 32px * var(--kopf));width:auto}

.kopf__navi{margin-left:auto;min-width:0}
.navi{display:flex;flex-wrap:nowrap;gap:clamp(14px,1.8vw,30px);list-style:none;margin:0;padding:0}
.navi > li{position:relative;flex:0 0 auto}

/* Hauptpunkt */
.np{
  position:relative;display:flex;align-items:center;gap:.45em;
  min-height:48px;padding:0 2px;
  font:500 1.125rem/1 var(--kapit);letter-spacing:.03em;
  color:var(--linde);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color var(--dauer),border-color var(--dauer);
}
.np .pf{width:.42em;height:.42em;border-right:1.5px solid var(--asche);border-bottom:1.5px solid var(--asche);transform:translateY(-.15em) rotate(45deg);transition:transform var(--dauer)}
@media (hover:hover){
  .np:hover{color:var(--gelb);border-bottom-color:var(--gelb)}
  .np:hover .pf{border-color:var(--gelb)}
}
/* Aktiver Zweig: die Spitze des Kopftuchs unter dem Punkt */
.navi > li.ist-aktiv > .np::after{
  content:"";position:absolute;left:50%;bottom:-11px;width:16px;height:10px;
  translate:-50% 0;background:var(--tuch);
  clip-path:polygon(0 0,100% 0,50% 100%);
}

/* Untermenü: Maus per :hover, Tastatur per :focus-within,
   Touch per li.ist-offen (hexen.js: 1. Tipp öffnet, 2. Tipp öffnet die Seite) */
.unter{
  position:absolute;left:-18px;top:100%;z-index:6;
  min-width:240px;margin:0;padding:8px 0;list-style:none;
  background:var(--kohle);border:1px solid var(--kante);border-top:3px solid var(--tuch);
  opacity:0;visibility:hidden;
  transition:opacity var(--dauer),visibility var(--dauer);
}
.navi > li:last-child > .unter{left:auto;right:-18px}
.navi > li.hat-unter:focus-within > .unter,
.navi > li.hat-unter.ist-offen > .unter{opacity:1;visibility:visible}
@media (hover:hover){.navi > li.hat-unter:hover > .unter{opacity:1;visibility:visible}}
.navi > li.hat-unter.ist-zu > .unter{opacity:0;visibility:hidden}
.navi > li.hat-unter:focus-within > .np .pf,
.navi > li.hat-unter.ist-offen > .np .pf{transform:translateY(.1em) rotate(225deg)}
@media (hover:hover){.navi > li.hat-unter:hover > .np .pf{transform:translateY(.1em) rotate(225deg)}}

.unter a{
  position:relative;display:flex;align-items:center;min-height:44px;padding:8px 22px 8px 34px;
  font:400 1.125rem/1.3 var(--text);color:var(--linde);text-decoration:none;
  transition:background-color var(--dauer),color var(--dauer);
}
@media (hover:hover){.unter a:hover{background:var(--rinde);color:var(--gelb)}}
.unter a[aria-current="page"]::before{
  content:"";position:absolute;left:12px;top:50%;width:11px;height:8px;translate:0 -50%;
  background:var(--tuch);clip-path:polygon(0 0,100% 0,50% 100%);
}

/* Mond im Kopf (erscheint nur mit Skript) */
.kopf__mond{flex:none;display:flex;align-items:center;gap:10px;font:500 .9375rem/1.2 var(--kapit);color:var(--asche)}
.kopf__mond svg{width:26px;height:26px}

/* Fuß des Burger-Panels, nur im Burger sichtbar */
.navi__fuss{display:none}

/* Burger-Knopf */
.burger{
  display:none;margin-left:auto;align-items:center;gap:10px;min-height:48px;padding:0 16px;
  background:transparent;color:var(--linde);border:0;box-shadow:inset 0 0 0 2px var(--linde);border-radius:2px;
  font:700 1.0625rem/1 var(--kapit);letter-spacing:.04em;cursor:pointer;
}
@supports (corner-shape:bevel){.burger{border-radius:10px;corner-shape:bevel}}
.burger:focus-visible{box-shadow:inset 0 0 0 2px var(--linde),0 0 0 5px var(--gruen)}
.burger .b-zu{display:none}
html.nav-offen .burger .b-auf{display:none}
html.nav-offen .burger .b-zu{display:block}

/* Schrumpfen beim Scrollen: reines CSS, nur wo der Browser es kann
   und Bewegung erwünscht ist. Sonst bleibt die Leiste groß. */
@keyframes kopf-schrumpft{from{--kopf:1}to{--kopf:0}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .kopf{animation:kopf-schrumpft 1s linear both;animation-timeline:scroll(root block);animation-range:0 240px}
  }
}

/* Mittlere Breite: Logo und Mond oben, Menü darunter */
@media (max-width:1180px){
  .kopf__reihe{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:calc(2px + 6px * var(--kopf))}
  .kopf__marke{grid-column:1;grid-row:1;justify-self:start}
  .kopf__mond{grid-column:2;grid-row:1}
  .kopf__navi{grid-column:1 / -1;grid-row:2;margin:0}
  .navi{flex-wrap:wrap;column-gap:clamp(14px,2.6vw,30px)}
  .kopf__marke img{height:calc(40px + 24px * var(--kopf))}
}

/* Telefon: Burger. Das Panel braucht top UND bottom, sonst hat es
   keine Höhe und overflow-y greift nicht. */
@media (max-width:760px) and (scripting:enabled){
  .kopf__reihe{display:flex;padding-block:8px}
  .kopf__marke img{height:56px}
  .kopf__mond{margin-left:auto}
  .kopf__mond .mond-text{display:none}
  .burger{display:inline-flex;margin-left:0}
  .kopf__navi{
    position:fixed;left:0;right:0;top:var(--anker);bottom:0;margin:0;
    background:var(--russ);border-top:1px solid var(--kante);
    overflow-y:auto;overscroll-behavior:contain;
    padding:8px 0 calc(32px + env(safe-area-inset-bottom));
    visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility .2s;
  }
  html.nav-offen .kopf__navi{visibility:visible;opacity:1;pointer-events:auto}
  /* KEIN overflow:hidden auf html/body: zusammen mit overflow-x:clip wird body
     sonst zum Scroll-Container, der klebende Kopf rutscht samt Schließen-Knopf
     aus dem Bild und die Seite springt. Gesperrt wird per Skript (touchmove/wheel).
     Unter dem offenen Menü nichts mehr zeichnen: verhindert, dass Bühne,
     Canvas und Mischmodi auf iOS durch das Panel scheinen, und spart Rechenzeit */
  html.nav-offen #inhalt,html.nav-offen .fuss{visibility:hidden}
  .kopf__navi{z-index:60;isolation:isolate;-webkit-overflow-scrolling:touch}
  .navi{flex-direction:column;flex-wrap:nowrap;gap:0}
  .navi > li{width:100%}
  .np{min-height:56px;padding:0 16px 0 46px;font-size:1.5rem;border-bottom:1px solid var(--fuge)}
  .np .pf{display:none}
  .navi > li.ist-aktiv > .np{background:var(--rinde);color:var(--tuch-schrift)}
  .navi > li.ist-aktiv > .np::after{left:16px;bottom:auto;top:50%;translate:0 -50%;width:18px;height:12px}
  /* Alle Ebenen offen – auf dem Telefon die verlässlichste Form */
  /* visibility:INHERIT, nicht visible: ein „visible“ am Kind hebt das hidden des
     geschlossenen Panels auf – die Untermenü-Links liegen dann unsichtbar (opacity 0)
     über dem Inhalt und fangen jeden Tipp ab. */
  .unter{position:static;min-width:0;padding:0;border:0;background:var(--kohle);opacity:1;visibility:inherit}
  .navi > li.hat-unter > .unter,.navi > li.hat-unter:focus-within > .unter,.navi > li.hat-unter.ist-offen > .unter,
  .navi > li.hat-unter:hover > .unter,.navi > li.hat-unter.ist-zu > .unter{opacity:1;visibility:inherit}
  .unter a{min-height:48px;padding-left:54px;border-bottom:1px solid var(--rinde)}
  .unter a[aria-current="page"]::before{left:30px}
  .navi__fuss{display:flex;align-items:center;gap:14px;margin-top:24px;padding:0 16px;font-size:1rem;line-height:1.45;color:var(--asche)}
  .navi__fuss svg{width:44px;height:44px;flex:none}
  .navi__fuss strong{color:var(--gelb)}
}

/* =========================================================================
   Bausteine
   ========================================================================= */

/* Abschnitte: bewusst unterschiedliche Abstände */
.ab{padding-block:clamp(64px,8vw,112px)}
.ab--eng{padding-block:clamp(40px,5vw,64px)}
.ab--weit{padding-block:clamp(72px,9vw,128px)}
.flaeche{background:var(--kohle);border-block:1px solid var(--fuge)}
.kopfzeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 40px;margin-bottom:36px}
.zweispalt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:24px clamp(32px,6vw,96px);align-items:end}

/* Bühne der Startseite */
.buehne{position:relative;overflow:hidden}
.buehne__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,88px) clamp(56px,7vw,104px)}
.buehne__text{position:relative;z-index:1}
.buehne__aktion{margin-top:36px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.korn{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.07;mix-blend-mode:screen}

/* Bilder mit Kerbschnitt-Ecken */
.kerbbild{clip-path:polygon(var(--kerb) 0,calc(100% - var(--kerb)) 0,100% var(--kerb),100% calc(100% - var(--kerb)),calc(100% - var(--kerb)) 100%,var(--kerb) 100%,0 calc(100% - var(--kerb)),0 var(--kerb))}
.kerbbild--klein{--kerb:18px}
.bild-quer{width:100%;aspect-ratio:4/3;object-fit:cover}
.bildzeile{margin-top:12px;font:500 .9375rem/1.4 var(--kapit);color:var(--asche)}

/* Nächte bis zum Hexensprung */
.naechte{margin-top:44px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;max-width:520px;padding:22px 0;border-block:1px solid var(--kante)}
.naechte__zahl{grid-row:span 2;font:700 5.5rem/.85 var(--display);color:var(--gelb)}
.naechte__was{font:700 1.1875rem/1.3 var(--kapit);letter-spacing:.03em}
.naechte__wann{font-size:1.0625rem;line-height:1.45;color:var(--asche)}
.naechte:not(.ist-gezaehlt){grid-template-columns:1fr}
.naechte:not(.ist-gezaehlt) .naechte__zahl{display:none}

/* Kerbschnitt-Fries */
.fries{height:22px;overflow:hidden}
.fries svg{width:100%;height:22px}

/* Brandstempel (Datum) und Plakette (Startnummer) */
.stempel{flex:none;width:88px;height:88px;border-radius:50%;border:2px solid var(--kante);box-shadow:inset 0 0 0 5px var(--russ),inset 0 0 0 6px var(--kante);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center}
.stempel__tag{font:700 2.125rem/1 var(--display)}
.stempel__mon{margin-top:3px;font:500 .875rem/1 var(--kapit)}
.plakette{justify-self:start;display:inline-flex;flex-direction:column;align-items:center;padding:8px 14px;border:2px solid var(--gelb);border-radius:50%/40%;color:var(--gelb);line-height:1}
.plakette__k{font:500 .8125rem/1 var(--kapit)}
.plakette__n{font:700 1.875rem/1 var(--display)}
.ohne-nr{justify-self:start;font:500 .9375rem/1.3 var(--kapit);color:var(--asche)}

/* Terminliste */
.termine{list-style:none;margin:0;padding:0;border-top:1px solid var(--kante)}
.termin{display:grid;grid-template-columns:96px minmax(0,1.3fr) minmax(0,1.4fr) 104px;gap:16px 28px;align-items:center;padding:24px 0;border-bottom:1px solid var(--kante)}
.termin--kurz{grid-template-columns:96px minmax(0,1fr) auto}
.termin__titel{font:700 1.5rem/1.25 var(--text)}
.termin__info{margin-top:4px;font-size:1.0625rem;color:var(--asche)}
.zeiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px}
.zeiten dt{font:500 .875rem/1.2 var(--kapit);letter-spacing:.03em;color:var(--asche)}
.zeiten dd{margin:0;font-size:1.25rem;font-variant-numeric:tabular-nums lining-nums}
.zeiten dd.offen{color:var(--asche)}
@media (max-width:900px){
  .termin,.termin--kurz{grid-template-columns:88px minmax(0,1fr)}
  .termin > .zeiten,.termin > .plakette,.termin > .ohne-nr{grid-column:2}
}
@media (max-width:480px){
  .termin,.termin--kurz{grid-template-columns:68px minmax(0,1fr);gap:12px 16px}
  .stempel{width:68px;height:68px;box-shadow:inset 0 0 0 4px var(--russ),inset 0 0 0 5px var(--kante)}
  .stempel__tag{font-size:1.625rem}
  .stempel__mon{font-size:.75rem}
  .termin__titel{font-size:1.25rem}
  .zeiten{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
  .naechte__zahl{font-size:4.25rem}
}
.monat{font:700 3rem/1 var(--display);margin-bottom:8px}

/* Rote Fläche mit Kopftuch-Spitze */
.tuch{background:var(--tuch);color:var(--tuch-schrift);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--spitze,64px)),50% 100%,0 calc(100% - var(--spitze,64px)))}
.tuch a:not(.knopf){color:var(--tuch-schrift)}
.narrenruf{padding:clamp(56px,7vw,96px) var(--rand) clamp(110px,12vw,160px);text-align:center}
.narrenruf p{font:700 1rem/1.08 var(--display)}
.narrenruf span{display:block}
.narrenruf .r1{font-size:clamp(2rem,4vw,3.25rem)}
.narrenruf .r2{font-size:clamp(2.75rem,5.6vw,4.75rem);margin-top:8px}
.narrenruf .r3{font-size:clamp(3.25rem,8.4vw,7.25rem);margin-top:8px}
.narrenruf .unterzeile{margin-top:28px;font:500 1.0625rem/1 var(--kapit);letter-spacing:.05em}
.hexensprung{--spitze:48px;padding:40px clamp(20px,4vw,48px) 96px}
.hexensprung__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px 48px;align-items:start}
.hexensprung h3{margin-top:10px;font:800 clamp(3.5rem,7vw,6rem)/1.02 var(--display)}
.hexensprung dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:1.25rem}
.hexensprung dt{padding-top:4px;font:500 1rem/1.3 var(--kapit)}
.hexensprung dd{margin:0}
.hexensprung .gross{font:700 2.25rem/1 var(--display)}

/* Masken-Ablauf */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:40px 32px;align-items:end}
.ablauf img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ablauf__text{margin-top:18px;display:flex;gap:14px;align-items:baseline}
.ablauf__nr{font:700 2.75rem/1 var(--display);color:var(--gelb)}
.ablauf__was{display:block;font:700 1.125rem/1.3 var(--kapit);letter-spacing:.03em}
.ablauf__wie{font-size:1.0625rem;color:var(--asche)}

/* Chronik-Leiste */
.jahre{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px 28px}
.jahre li{border-top:2px solid var(--linde);padding-top:18px}
.jahre li.feuer{border-top-color:var(--tuch)}
.jahre__jahr{font:700 3.25rem/1 var(--display)}
.jahre li.feuer .jahre__jahr{color:var(--glut)}
.jahre__text{margin-top:12px;font-size:1.0625rem;line-height:1.55}

/* Bilder-Mosaik */
.mosaik{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-auto-rows:260px;gap:12px}
.mosaik a{position:relative;display:block;text-decoration:none;overflow:hidden}
.mosaik img{width:100%;height:100%;object-fit:cover}
.mosaik .hoch{grid-row:span 2}
.mosaik .quer{grid-column:span 2}
@media (max-width:660px){.mosaik .quer{grid-column:auto}.mosaik .hoch{grid-row:auto}}
.mosaik__titel{position:absolute;left:0;bottom:0;padding:10px 16px;background:var(--russ);font:500 1rem/1.3 var(--kapit);color:var(--linde);transition:color var(--dauer)}
.mosaik a:hover .mosaik__titel{color:var(--gelb)}

/* Zitat / Gästebuch-Vorschau */
.stimme{padding-left:28px;border-left:2px solid var(--kante)}
.stimme blockquote{margin-top:14px;font-style:italic;font-size:1.5rem;line-height:1.45}
.stimme figcaption{margin-top:14px;font-size:1.0625rem;color:var(--asche)}

/* Seitenkopf der Unterseiten */
.seitenkopf{position:relative;overflow:hidden;border-bottom:1px solid var(--fuge)}
.seitenkopf__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.seitenkopf .wrap{position:relative;padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,72px)}
.krumen{font:500 1rem/1.4 var(--kapit)}
.krumen ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0;padding:0}
.krumen li + li::before{content:"/";margin-right:8px;color:var(--asche)}
.seitenkopf h1{margin-top:18px}
.seitenkopf .t-lead{margin-top:22px;max-width:52ch}

/* Hinweis */
.hinweis{display:flex;gap:16px;align-items:flex-start;padding:18px 22px;background:var(--kohle);border:1px solid var(--kante)}
.hinweis svg{flex:none;width:28px;height:28px;margin-top:2px}

/* Gästebuch */
.eintrag{padding:32px 0;border-top:1px solid var(--kante)}
.eintrag__text{font-size:1.25rem;line-height:1.65}
.eintrag__text::first-letter{float:left;margin:6px 14px 0 0;font:800 4.75rem/.78 var(--display);color:var(--glut)}
.eintrag__wer{clear:both;margin-top:18px;font-size:1.0625rem;color:var(--asche)}
.eintrag__wer strong{color:var(--linde)}
.seiten{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:28px;border-top:1px solid var(--kante)}
.seiten a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--kante);font:700 1.0625rem var(--kapit);color:var(--linde);text-decoration:none}
.seiten a:hover{border-color:var(--gelb);color:var(--gelb)}
.seiten a[aria-current="page"]{background:var(--linde);border-color:var(--linde);color:var(--russ)}
.spalten{display:flex;flex-wrap:wrap;gap:64px clamp(40px,6vw,96px);align-items:flex-start}
.spalten__haupt{flex:999 1 560px;min-width:0}
.spalten__neben{flex:1 1 400px;min-width:0}
.kasten{background:var(--kohle);border:1px solid var(--fuge);padding:clamp(24px,3vw,40px)}

/* Formulare */
.formular{display:flex;flex-direction:column;gap:22px;margin-top:28px}
.feld label,.feld .label{display:block;margin-bottom:8px;font:700 1.0625rem/1.3 var(--kapit);letter-spacing:.03em}
.pflicht{font-weight:500;color:var(--asche)}
.eingabe{display:block;width:100%;min-height:52px;padding:12px 14px;background:var(--russ);color:var(--linde);border:1px solid var(--kante);border-radius:2px;font:400 1.1875rem/1.5 var(--text);transition:border-color var(--dauer)}
.eingabe:hover{border-color:var(--asche)}
.eingabe:focus-visible{border-color:var(--gelb)}
textarea.eingabe{resize:vertical;min-height:168px}
select.eingabe{appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--linde) 50%),linear-gradient(135deg,var(--linde) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.eingabe[aria-invalid="true"]{border:2px solid var(--glut)}
.hilfe{display:block;margin-top:6px;font-size:1rem;line-height:1.4;color:var(--asche)}
.fehler{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:1rem;line-height:1.4;color:var(--glut)}
.fehler svg{flex:none;width:18px;height:18px;margin-top:2px}
.fehler[hidden]{display:none}
.wahl{display:flex;gap:14px;align-items:flex-start}
.wahl input{flex:none;width:24px;height:24px;margin:3px 0 0;accent-color:var(--tuch)}
.wahl label{font:400 1.0625rem/1.5 var(--text);margin:0}
.fehlerliste{padding:18px 20px;border:2px solid var(--glut);background:var(--kohle)}
.fehlerliste[hidden]{display:none}
.fehlerliste h3{font:700 1.125rem/1.3 var(--kapit);color:var(--glut)}
.fehlerliste ul{margin:10px 0 0;padding-left:22px;font-size:1.0625rem}
.erfolg{padding:18px 20px;border:2px solid var(--gruen);background:var(--kohle)}
.erfolg[hidden]{display:none}
.honig{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Vorstand */
.aemter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 40px;margin:0}
.aemter div{padding:20px 0;border-top:1px solid var(--kante)}
.aemter dt{font:500 1rem/1.3 var(--kapit);letter-spacing:.04em;color:var(--asche)}
.aemter dd{margin:6px 0 0;font:700 1.375rem/1.3 var(--text)}

/* Bildergalerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;list-style:none;margin:0;padding:0}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover}
.galerie figcaption{margin-top:8px;font-size:1rem;color:var(--asche)}

/* Fuß */
.fuss{border-top:1px solid var(--fuge)}
.fuss__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px 48px;padding-block:64px 40px}
.fuss h2{margin-bottom:12px;font:700 1.125rem/1.3 var(--kapit);letter-spacing:.04em}
.fuss p{font-size:1.0625rem;line-height:1.7;color:var(--asche)}
.fuss__leiste{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-block:20px 32px;border-top:1px solid var(--fuge);font-size:1rem;color:var(--asche)}
.fuss__leiste ul{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none;margin:0;padding:0}
.fuss__leiste a{display:inline-flex;align-items:center;min-height:44px}

/* Mikrodesign-Tafel */
.farben{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:32px 24px;list-style:none;margin:0;padding:0}
.farben__feld{height:96px;border:1px solid var(--fuge)}
.farben p{margin-top:10px;font-size:1rem;line-height:1.45}
.zustaende{display:grid;grid-template-columns:200px repeat(4,minmax(0,1fr));gap:28px 24px;align-items:center}
@media (max-width:900px){.zustaende{grid-template-columns:1fr 1fr}}
.schau{outline:2px solid var(--gelb)!important;box-shadow:0 0 0 5px var(--gruen)!important}
.mondreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:24px;list-style:none;margin:0;padding:0}
.mondreihe li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font:500 .9375rem/1.3 var(--kapit);color:var(--asche)}
.mondreihe svg{width:64px;height:64px}
.zeichen{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:32px 16px;list-style:none;margin:0;padding:0}
.zeichen li{display:flex;flex-direction:column;align-items:center;gap:10px;font:500 .9375rem var(--kapit);color:var(--asche)}
.zeichen svg{width:40px;height:40px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;animation-timeline:auto!important}}
@media (forced-colors:active){.navi > li.ist-aktiv > .np{border-bottom-color:Highlight}.stempel,.plakette{border-color:CanvasText}}