/*
Theme Name:   Musikverein Söllingen
Theme URI:    https://musikverein-soellingen.de
Author:       Marvin Kraft
Description:  Eigenes Theme für den Musikverein Söllingen 1919 e. V. Orange und Ink aus dem Vereinslogo, große Typografie, freigestellte Studiofotos über mix-blend-mode. Schriften werden lokal ausgeliefert.
Version:      1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mvs
Tags:         verein, blasmusik, custom-menu, featured-images, translation-ready
*/

/* ---------- Schriften, lokal ausgeliefert (kein Google-CDN) ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-400-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:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-400-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:700;font-display:swap;src:url('assets/fonts/archivo-700-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:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/archivo-700-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:800;font-display:swap;src:url('assets/fonts/archivo-800-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:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/archivo-800-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:900;font-display:swap;src:url('assets/fonts/archivo-900-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:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/archivo-900-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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400-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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-400-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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500-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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-500-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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600-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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-600-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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-700-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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-700-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;}

/* ==========================================================================
   Musikverein Söllingen 1919 e.V. — Design System
   Marke: Orange #F07D00 / Ink #1D1D1B (aus dem Vereinslogo)
   ========================================================================== */

/* ---------- Tokens ---------------------------------------------------- */
:root{
  --ink:        #14110d;
  --ink-800:    #201b15;
  --ink-600:    #3a3128;
  --ink-400:    #6b6055;

  --paper:      #faf6ef;
  --paper-2:    #f0e8dc;
  --paper-3:    #e4d9c8;

  --orange:     #f07d00;
  --orange-hi:  #ff9a2e;
  --orange-deep:#c96400;
  /* UX-07: Orange auf hellem Grund. Nachgemessen gegen --paper (#faf6ef):
     #f07d00 = 2,55:1, #c96400 = 3,67:1, #a04f00 = 5,40:1.
     Gegen --paper-2 (#f0e8dc): #a04f00 = 4,78:1 — die Eyebrows der
     getoenten Abschnitte muessen dort ebenfalls durchkommen.
     Kleintext braucht 4,5:1 -> --orange-text.
     Grossschrift ab 24 px braucht 3:1 -> --orange-deep reicht und
     bleibt naeher an der Marke. Flaechenfarbe bleibt immer #f07d00. */
  --orange-text:#a04f00;

  --line:       rgba(20,17,13,.13);
  --line-dark:  rgba(250,246,239,.16);

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap:  1280px;
  --gut:   clamp(1.25rem, 4vw, 4rem);

  --r-sm: 4px;
  --r-md: 14px;
  --r-lg: 28px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:.92;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
/* Kein eigenes ::selection mehr. Orange markierter Text sieht nicht nach
   Markierung aus, sondern nach Fehler — die Vorgabe des Browsers ist das,
   was Leute kennen. */
/* UX-08: Ein rein oranger Ring misst auf Creme 2,55:1 und faellt unter die
   3:1 aus WCAG 1.4.11. Zweifarbig loest das ohne Ruecksicht auf den Grund:
   dunkler Kern (17,5:1 auf hell) plus oranger Schein (6,85:1 auf dunkel).
   Auf dunklen Flaechen kippt der Kern auf Papier (17,5:1). */
:focus-visible{
  outline:3px solid #14110d;
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(240,125,0,.55);
  border-radius:2px;
}
/* Der Schluss-CTA ist orange, nicht dunkel: dort bleibt der dunkle Kern
   (6,85:1), ein heller Ring kaeme auf 2,55:1. */
.dark :focus-visible,
.phead :focus-visible,
.ftr :focus-visible,
.lb :focus-visible,
.hdr--invers:not(.is-stuck) :focus-visible,
body.nav-open .nav :focus-visible{
  outline-color:#faf6ef;
}

/* ---------- Layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
/* 10vw ergab auf 2000 px Fensterbreite 200 px, gedeckelt auf 144 — zwei
   gestapelte Abschnitte standen damit fast 300 px auseinander. Der Faktor ist
   jetzt flacher und der Deckel niedriger. */
.section{padding-block:clamp(3.5rem,5.5vw,6.5rem)}
.section--tight{padding-block:clamp(2.5rem,4vw,3.5rem)}
.dark{background:var(--ink);color:var(--paper)}
.dark h1,.dark h2,.dark h3{color:var(--paper)}
.tinted{background:var(--paper-2)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--orange);color:#14110d;padding:.75rem 1.25rem;border-radius:var(--r-sm)}

/* ---------- Typo-Bausteine -------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange-text);margin-bottom:1.25rem;
}
.eyebrow::before{content:"";width:2rem;height:3px;background:var(--orange);display:block}
/* Auf dunklem Grund misst #f07d00 6,85:1 und bleibt. */
.dark .eyebrow,.phead .eyebrow,.cta .eyebrow{color:var(--orange)}

.display{
  font-size:clamp(2.5rem,10vw,7.5rem);
  line-height:.82;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.h1{font-size:clamp(2.5rem,7vw,5.5rem);line-height:.9;text-transform:uppercase}
.h2{font-size:clamp(2rem,5.2vw,4rem);line-height:.92;text-transform:uppercase}
.h3{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.05}
.h4{font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase}

.lead{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.55;color:var(--ink-600);max-width:56ch}
.dark .lead{color:rgba(250,246,239,.72)}
.measure{max-width:62ch}

.hl{color:var(--orange-deep)}
.dark .hl,.phead .hl{color:var(--orange)}
.outline{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
}
.dark .outline{-webkit-text-stroke-color:var(--paper)}
@supports not (-webkit-text-stroke:1px black){.outline{color:var(--orange-deep)}}
.dark .outline,.phead .outline{color:var(--orange)}

/* ---------- Buttons --------------------------------------------------- */
.btn{
  --bg:var(--orange); --fg:#14110d;
  display:inline-flex;align-items:center;gap:.7rem;
  background:var(--bg);color:var(--fg);
  font-family:var(--font-display);font-weight:800;
  font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border-radius:100px;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;
  box-shadow:0 2px 0 rgba(0,0,0,.1);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px -10px rgba(240,125,0,.65)}
.btn:active{transform:translateY(-1px)}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{--bg:var(--ink);--fg:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.dark .btn--ghost{--fg:var(--paper);box-shadow:inset 0 0 0 2px rgba(250,246,239,.4)}
.dark .btn--ghost:hover{--bg:var(--paper);--fg:var(--ink)}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem}

/* Auf schmalen Geraeten duerfen lange Beschriftungen umbrechen. „Spenden-
   bescheinigung anfragen" war mit nowrap 398 px breit und stand damit in
   einem 390-px-Fenster ueber dem Rand. */
@media (max-width:480px){
  .btn{white-space:normal;text-align:left}
  .btn-row{width:100%}
  .btn-row .btn{max-width:100%}
}
/* Ein Absatz, der nichts als eine Schaltflaeche enthaelt, bekommt denselben
   Abstand wie eine .btn-row. Sonst klebt er mit dem normalen Absatzabstand von
   1em am Kasten darueber — und im Editor vergisst man die Klasse leicht. */
.prose > p:has(> .btn:only-child){margin-top:2.25rem}

.tlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--orange-text);
}
.dark .tlink,.phead .tlink,.cta .tlink{color:var(--orange)}
.tlink .arw{transition:transform .3s var(--ease)}
.tlink:hover .arw{transform:translateX(5px)}

/* ---------- Header ---------------------------------------------------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:1.15rem;
  transition:background .3s var(--ease),padding .3s var(--ease),box-shadow .3s var(--ease);
}
.hdr.is-stuck{
  background:rgba(250,246,239,.93);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  box-shadow:inset 0 -1px 0 var(--line);
  padding-block:.6rem;
}
/* Kein justify-content:space-between mehr. Es verteilt den freien Platz auf
   *alle* Lücken — auf 1990 px klafften zwischen Menü, Instagram und Lupe
   jeweils über hundert Pixel. Stattdessen schiebt margin-left:auto am Menü
   den gesamten Rest hinter das Logo; Menü und Werkzeuge sitzen dann rechts
   beieinander, getrennt durch genau eine Lücke. */
.hdr__in{display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem)}
.hdr__werkzeuge{display:flex;align-items:center;gap:.15rem;flex:none}

.brand{display:flex;align-items:center;flex:none;text-decoration:none}
/* Auf 1800 px stand ein 40-px-Logo neben einer 88-px-Ueberschrift und wirkte
   verloren. Die Hoehe waechst jetzt mit der Fensterbreite mit, bleibt auf dem
   Telefon aber bei den bisherigen 40 px. */
.brand img{height:clamp(40px,2.9vw,54px);width:auto;transition:height .3s var(--ease)}
.hdr.is-stuck .brand img{height:clamp(32px,2.2vw,42px)}
/* Zwei Logofassungen liegen im Markup, sichtbar ist immer genau eine.
   Die Auswahl muss spezifischer sein als `.brand img`, sonst gewinnt
   deren display-Angabe und beide stehen nebeneinander. */
.brand .brand__dunkel{display:block}
.brand .brand__hell{display:none}

.nav{display:flex;align-items:center;margin-left:auto}
.nav__liste{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__liste > li{position:relative}
.nav a{
  position:relative;display:block;text-decoration:none;
  font-family:var(--font-display);font-weight:700;
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.55rem .8rem;
  color:var(--ink-600);
  transition:color .2s;
}
.nav a:hover{color:var(--ink)}
.nav__liste > li > a::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__liste > li > a:hover::after,
.nav__liste > li > a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--orange-text)}

/* Auf Seiten mit dunklem Kopfbereich, solange die Leiste transparent ist.
   Bewusst nur die oberste Ebene: das Untermenü liegt auf einer hellen Fläche
   und braucht dunkle Schrift, sonst ist es unlesbar. */
.hdr--invers:not(.is-stuck) .nav__liste > li > a{color:rgba(250,246,239,.82)}
.hdr--invers:not(.is-stuck) .nav__liste > li > a:hover{color:var(--paper)}
.hdr--invers:not(.is-stuck) .nav__liste > li > a[aria-current="page"]{color:var(--orange)}
.hdr--invers:not(.is-stuck) .brand .brand__dunkel{display:none}
.hdr--invers:not(.is-stuck) .brand .brand__hell{display:block}

/* Der interne Bereich ist kein Seiteninhalt — optisch abgesetzt */
.nav__liste > li.menu-item--extern{
  margin-left:.7rem;padding-left:.95rem;
  border-left:1px solid var(--line);
}
.nav__liste > li.menu-item--extern > a{color:var(--ink-400)}
.nav__liste > li.menu-item--extern > a:hover{color:var(--orange-text)}
.nav__liste > li.menu-item--extern > a::after{
  content:"\2197";position:static;display:inline;
  width:auto;height:auto;background:none;transform:none;
  margin-left:.28em;font-size:.95em;opacity:.55;
}
.hdr--invers:not(.is-stuck) .nav__liste > li.menu-item--extern{border-left-color:var(--line-dark)}
.hdr--invers:not(.is-stuck) .nav__liste > li.menu-item--extern > a{color:rgba(250,246,239,.55)}

/* ---------- Untermenü ------------------------------------------------------ */
.nav__liste li.menu-item-has-children > a::before{
  content:"";position:absolute;right:.1rem;top:50%;
  width:5px;height:5px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.5;
}
.nav__liste li.menu-item-has-children > a{padding-right:1.4rem}

.nav__liste .sub-menu{
  position:absolute;top:100%;left:0;min-width:13rem;
  list-style:none;margin:0;padding:.35rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 24px 48px -28px rgba(20,17,13,.6);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  z-index:20;
}
.nav__liste li:hover > .sub-menu,
.nav__liste li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav__liste .sub-menu a{
  display:block;padding:.55rem .9rem;border-radius:8px;
  font-size:.76rem;letter-spacing:.09em;
  color:var(--ink-600);
}
.nav__liste .sub-menu a:hover{color:var(--orange-text)}
.nav__liste .sub-menu a::after{display:none}
.nav__liste .sub-menu a:hover,
.nav__liste .sub-menu a[aria-current="page"]{background:var(--paper-2);color:var(--orange-text)}

/* ---------- Instagram im Kopfbereich ----------------------------------- */
.soztaste{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  color:var(--ink-600);transition:color .2s,background .2s;
}
.soztaste svg{width:21px;height:21px}
.soztaste:hover{color:var(--orange-text);background:var(--paper-2)}
.hdr--invers:not(.is-stuck) .soztaste{color:rgba(250,246,239,.82)}
.hdr--invers:not(.is-stuck) .soztaste:hover{color:var(--orange);background:rgba(250,246,239,.12)}
@media (max-width:420px){.soztaste,.suchtaste{width:40px;height:40px}}

/* ---------- Suche im Kopfbereich (UX-14) ------------------------------- */
.suchtaste{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  color:var(--ink-600);transition:color .2s,background .2s;
}
.suchtaste svg{width:20px;height:20px;fill:currentColor}
.suchtaste:hover{color:var(--ink);background:var(--paper-2)}
.hdr--invers:not(.is-stuck) .suchtaste{color:rgba(250,246,239,.82)}
.hdr--invers:not(.is-stuck) .suchtaste:hover{color:var(--paper);background:rgba(250,246,239,.12)}

.suche-overlay{
  position:fixed;inset:0;z-index:150;
  background:rgba(20,17,13,.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:start center;
  padding:clamp(4rem,14vh,9rem) var(--gut) 2rem;
}
.suche-overlay[hidden]{display:none}
.suche-overlay__in{width:100%;max-width:38rem;position:relative}
.suche-overlay .suche{width:100%}
.suche-overlay .suche input[type="search"]{
  background:var(--paper);color:var(--ink);border-color:transparent;
  font-size:1.0625rem;padding:1.1rem 1.5rem;
}
.suche-overlay__zu{
  position:absolute;right:0;top:-3.25rem;
  width:44px;height:44px;border-radius:50%;font-size:1.75rem;line-height:1;
  color:var(--paper);background:rgba(250,246,239,.1);
  border:1px solid rgba(250,246,239,.2);
  display:grid;place-items:center;
}
.suche-overlay__zu:hover{background:var(--orange);border-color:var(--orange);color:#14110d}
@media (prefers-reduced-motion:reduce){.suche-overlay{backdrop-filter:none}}

.burger{display:none;width:46px;height:46px;border-radius:50%;place-items:center;background:var(--ink);color:var(--paper)}
.burger span{display:block;width:20px;height:2px;background:currentColor;position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:.3s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{top:0;transform:rotate(45deg)}
body.nav-open .burger span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1050px){
  .burger{display:grid;position:relative;z-index:3}

  /* Im Mobilmenü ist .nav position:fixed und damit aus dem Flexfluss — das
     margin-left:auto der Desktopfassung schiebt dann nichts mehr, und die
     Werkzeuggruppe säße direkt neben dem Logo. Hier übernimmt sie das
     Schieben selbst. */
  .hdr__werkzeuge{margin-left:auto}

  .nav{
    position:fixed;inset:0;background:var(--ink);color:var(--paper);
    flex-direction:column;
    clip-path:circle(0% at calc(100% - 3rem) 3rem);
    transition:clip-path .6s var(--ease);
    /* UX-01: Auf niedrigen Displays (iPhone SE, Querformat) ist die Liste
       hoeher als das Panel. Zentrieren wuerde oben und unten abschneiden,
       ohne dass man scrollen kann. Also oben anfangen und scrollbar machen. */
    justify-content:flex-start;
    height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0;
  }
  /* Feste Blende oben: sonst verschwindet gescrollter Text hinter der
     Schliessen-Taste, statt sauber unter einer Kante zu enden. */
  body.nav-open .nav::before{
    content:"";position:fixed;top:0;left:0;right:0;height:5.25rem;
    background:var(--ink);z-index:2;pointer-events:none;
  }

  .nav__liste{
    flex-direction:column;gap:0;width:100%;align-items:stretch;
    padding:5.25rem var(--gut) max(3rem,8vh);
  }

  /* Hauptpunkte: linksbuendig, mit Trennlinie — so ist auf einen Blick zu
     sehen, was Ebene eins ist und was dazugehoert. Zentriert sah alles
     gleich wichtig aus. */
  .nav__liste > li{border-top:1px solid rgba(250,246,239,.12)}
  .nav__liste > li:first-child{border-top:0}
  .nav__liste > li > a{
    display:block;padding:1.05rem 0 .95rem;
    font-family:var(--font-display);font-weight:900;
    font-size:1.375rem;letter-spacing:.01em;text-transform:uppercase;
    color:var(--paper);
  }
  .nav__liste > li > a[aria-current="page"]{color:var(--orange)}

  /* Im Vollbildmenue klappt nichts auf — Unterpunkte stehen eingerueckt
     direkt unter ihrem Hauptpunkt. */
  .nav__liste .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;
    display:block;padding:0 0 .85rem;margin:-.35rem 0 0;
  }
  .nav__liste .sub-menu li{border:0}
  .nav__liste .sub-menu a{
    display:block;padding:.5rem 0 .5rem 1.25rem;
    position:relative;
    font-family:var(--font-display);font-weight:700;
    font-size:1rem;letter-spacing:.04em;text-transform:uppercase;
    color:rgba(250,246,239,.62);background:none;
  }
  .nav__liste .sub-menu a::before{
    content:"";position:absolute;left:0;top:50%;
    width:.5rem;height:1px;background:rgba(250,246,239,.32);
  }
  .nav a:hover,.nav__liste .sub-menu a:hover{color:var(--orange)}
  .nav__liste .sub-menu a[aria-current="page"]{color:var(--orange);background:none}

  .nav__liste li.menu-item-has-children > a::before{display:none}
  .nav__liste li.menu-item-has-children > a{padding-right:0}

  /* Die MVS-Cloud ist kein Menuepunkt wie die anderen — sie fuehrt aus der
     Seite heraus und richtet sich an Mitglieder. */
  .nav__liste > li.menu-item--extern{
    /* margin-left und padding-left stammen aus der Desktopfassung, wo der
       Punkt durch eine senkrechte Linie abgesetzt ist. Hier saesse er sonst
       als einziger eingerueckt. */
    border-left:0;padding-left:0;margin-left:0;margin-top:1.25rem;
    border-top:1px solid rgba(250,246,239,.12);
  }
  .nav__liste > li.menu-item--extern > a{
    font-size:1rem;letter-spacing:.06em;color:rgba(250,246,239,.55);
  }
  .nav__liste > li.menu-item--extern > a::after{display:none}

  body.nav-open .nav{clip-path:circle(150% at calc(100% - 3rem) 3rem)}
  .nav a::after{display:none}
}

/* ---------- Hero ------------------------------------------------------ */
.hero{
  position:relative;
  background:var(--paper);
  /* Platz für die feste Kopfzeile, damit das Bild darunter beginnt */
  padding-top:clamp(4.75rem,8.5vh,6rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}
.hero::before{display:none}
.hero__blocks{display:none}

/* Randlos über die volle Breite — nicht als Kasten in der Spalte.
   UX-10: Die Hoehe haengt jetzt an der Fensterhoehe statt an der Breite.
   Mit 26rem schob das Band die Buttonzeile bei 1440x900 auf 989 px und
   damit unter die Falz. */
/* Das Bild ist 3600x1224 (2,94:1), die Leiste ist rund 5,5:1 — es wird also
   immer beschnitten. Nachgemessen liegen die Personen zwischen 48,5 % und
   99,5 % der Bildhöhe; darüber ist nur das orange Logo.

   Die Höhe hängt jetzt an der Fenster*breite* statt an der Höhe: bei 18vw
   bleibt das Seitenverhältnis der Leiste über alle Breiten gleich, und mit
   object-position unten wird immer derselbe untere Streifen gezeigt — also
   genau die Kapelle. Vorher hing die Höhe an vh und die Breite an vw; auf
   einem breiten, flachen Fenster wurde der Ausschnitt so schmal, dass die
   Köpfe der hinteren Reihe angeschnitten waren.

   Ab etwa 2900 px Fensterbreite greift der Deckel und es schneidet wieder. */
.hero__bild img{
  display:block;width:100%;
  height:clamp(200px,18vw,520px);
  object-fit:cover;object-position:50% 100%;
}

.hero__in{padding-top:clamp(1rem,2vw,1.5rem)}

/* UX-10: Auf niedrigen Fenstern - Laptops mit 1440x800 und darunter -
   reicht der Platz fuer die 120-px-Stufe nicht, ohne die Buttonzeile
   unter die Falz zu schieben. Ab 880 px Fensterhoehe bleibt die volle
   Groesse aus der Typo-Skala stehen, darunter eine Stufe kleiner. */
@media (min-width:760px) and (max-height:880px){
  .hero .display{font-size:clamp(3rem,6.4vw,5.75rem)}
  .hero h1{margin-bottom:1.25rem}
  .hero .lead{margin-bottom:1rem}
}

.hero__kicker{
  display:inline-flex;align-items:center;gap:.75rem;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-display);font-weight:700;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.55rem 1.1rem;border-radius:100px;margin-bottom:1.1rem;
}
.hero__kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.hero h1{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;animation:riseIn 1s var(--ease) both}
.hero h1 .ln:nth-child(2) > span{animation-delay:.09s}
@keyframes riseIn{from{transform:translateY(105%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero h1 .ln>span{animation:none}}

.hero__unten{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  margin-top:clamp(1rem,2vh,1.75rem);
}
/* Die Buttonzeile ist die eigentliche Handlungsaufforderung — sie darf
   nicht durch Abstaende aus dem ersten Sichtbereich rutschen. */
.hero .btn-row{margin-top:clamp(1rem,2.4vh,1.6rem)}
@media (max-width:900px){.hero__unten{grid-template-columns:1fr}}

.hero__meta{display:flex;flex-wrap:wrap;gap:1.75rem;margin:0;padding-top:1.25rem;border-top:1px solid var(--line)}
.hero__meta div{min-width:130px}
.hero__meta dt{font-family:var(--font-display);font-weight:800;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-400);margin-bottom:.3rem}
.hero__meta dd{margin:0;font-family:var(--font-display);font-weight:900;font-size:1.15rem;letter-spacing:-.01em}

@media (max-width:760px){
  /* Schmale Geräte: hier ist die Leiste hochkantiger als das Bild, es wird
     links und rechts beschnitten statt oben und unten. */
  .hero__bild img{height:clamp(13rem,44vw,18rem);object-position:50% 100%}
}

/* ---------- Zahlen ----------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--paper);padding:clamp(1.75rem,3.5vw,2.75rem) 1.25rem;text-align:center}
.tinted .stat{background:var(--paper-2)}
.stat b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.75rem,6.5vw,4.75rem);line-height:.9;letter-spacing:-.05em;
  color:var(--orange-deep);
}
.dark .stat b{color:var(--orange)}
.stat small{display:block;margin-top:.6rem;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-400);font-weight:600}
/* „ab“ und „+“ gehören zur Aussage, sollen aber die Zahl nicht überlagern */
.stat__vor,.stat__nach{font-size:.4em;letter-spacing:.01em}
.stat__vor{margin-right:.16em;vertical-align:.62em}
.stat__nach{margin-left:.02em;vertical-align:.62em}

/* ---------- Termine ---------------------------------------------------- */
.ev{border-top:1px solid var(--line-dark);position:relative}
.ev:last-child{border-bottom:1px solid var(--line-dark)}

/* Jede Terminzeile beginnt mit einem Taktstrich. Eigene Feste bekommen
   stattdessen das Wiederholungszeichen — dick, duenn, zwei Punkte —, weil sie
   jedes Jahr wiederkommen. Das Zeichen sagt damit etwas, was vorher nur eine
   orange Hinterlegung war.
   Gezeichnet aus Verlaeufen statt aus Einzelelementen: vier Hintergruende auf
   einem Pseudoelement, damit im Markup nichts dazukommt. */
.ev::before{
  content:"";position:absolute;z-index:2;
  left:0;top:.75rem;bottom:.75rem;width:1px;
  background:rgba(250,246,239,.3);
}
.ev--hell::before{background:rgba(20,17,13,.22)}

.ev--hi::before{
  width:12px;background:none;
  background-image:
    linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange)),
    radial-gradient(circle at center, var(--orange) 44%, transparent 46%),
    radial-gradient(circle at center, var(--orange) 44%, transparent 46%);
  background-repeat:no-repeat;
  background-size:3px 100%, 1px 100%, 4px 4px, 4px 4px;
  background-position:0 0, 5px 0, 8px 33%, 8px 67%;
}

.ev__a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  /* Links mehr Polster als rechts: dort steht der Taktstrich beziehungsweise
     das Wiederholungszeichen, sonst saesse das Datum darauf. */
  padding:clamp(1.4rem,2.6vw,2.1rem) clamp(.5rem,2vw,1.5rem) clamp(1.4rem,2.6vw,2.1rem) clamp(1.4rem,3vw,1.9rem);
  text-decoration:none;position:relative;transition:color .35s var(--ease);
  /* Der orange Hover-Balken liegt auf z-index:-1. Ohne eigenen
     Stapelkontext malt er hinter die Flaeche des Abschnitts und war
     damit nie zu sehen — auf dem dunklen Abschnitt der Startseite
     verschwand die Zeile beim Ueberfahren komplett. isolation legt
     einen eigenen Kontext an: der Balken sitzt jetzt ueber der
     Abschnittsflaeche und unter der Schrift.
     (Kein Konflikt mit mix-blend-mode — in der Terminzeile liegt
     kein freigestelltes Bild.) */
  isolation:isolate;
}
.ev__a::before{
  content:"";position:absolute;inset:0;background:var(--orange);
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease);z-index:-1;
}
.ev__a:hover::before{transform:scaleY(1)}
.ev__a:hover{color:#14110d}
.ev__a:hover .ev__date small,.ev__a:hover .ev__place,
.ev--hell .ev__a:hover .ev__place{color:rgba(20,17,13,.8)}
.ev__a:hover .ev__date b{color:#14110d}
.ev__date{text-align:center;min-width:5.5rem}
.ev__date b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4vw,3rem);line-height:.9;color:var(--orange-deep);transition:color .35s}
.dark .ev__date b{color:var(--orange)}
.ev__date small{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-400);margin-top:.25rem;transition:color .35s}
.dark .ev__date small{color:rgba(250,246,239,.5)}
.ev__name{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(1.25rem,2.8vw,2.1rem);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.ev__place{display:block;margin-top:.4rem;font-family:var(--font-body);font-weight:400;font-size:.9rem;letter-spacing:.02em;text-transform:none;color:rgba(250,246,239,.55)}
/* Terminliste auf hellem Grund. Frueher stand die Farbe als style-Attribut
   in der Zeile — die schlug dann jede Hover-Regel, und beim Ueberfahren
   blieb der Ort in #6b6055 auf Orange stehen (2,23:1). */
.ev--hell .ev__place{color:var(--ink-400)}
.ev__go{font-size:1.6rem;flex:none;opacity:.35;transition:opacity .3s,transform .35s var(--ease)}
.ev__a:hover .ev__go{opacity:1;transform:translateX(6px)}
/* Die orange Hinterlegung ist entfallen — das Wiederholungszeichen links
   markiert das eigene Fest jetzt praeziser und leiser. */
.ev__tag{
  display:block;width:fit-content;background:var(--orange);color:#14110d;
  font-family:var(--font-display);font-weight:800;font-size:.63rem;
  letter-spacing:.15em;text-transform:uppercase;padding:.25rem .6rem;border-radius:3px;
  margin-bottom:.5rem;
}
@media (max-width:640px){
  .ev__a{grid-template-columns:auto 1fr;row-gap:.5rem}
  .ev__go{display:none}
}

/* ---------- Plakat des naechsten Fests ----------------------------------- */
/* Haengt schief an der Wand wie ein echtes Plakat und richtet sich beim
   Ueberfahren auf. Die Neigung ist klein genug, dass sie nicht albern wirkt,
   und gross genug, dass man sie sieht. */
.plakat__in{
  display:grid;
  grid-template-columns:minmax(0,300px) 1fr;
  gap:clamp(1.75rem,5vw,4rem);
  align-items:center;
}
.plakat__bild{
  display:block;
  transform:rotate(-2.2deg);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  box-shadow:0 22px 45px -22px rgba(0,0,0,.75);
  /* Das Plakat ist ein Bild, kein Text — der Rahmen darf es nicht beschneiden. */
  border:6px solid var(--paper);
  background:var(--paper);
}
.plakat__bild img{display:block;width:100%;height:auto}
.plakat__bild:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 30px 60px -25px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){
  .plakat__bild{transform:none;transition:none}
  .plakat__bild:hover{transform:none}
}

/* Datum und Ort tragen die eigentliche Aussage — gross und in der
   Ueberschriftenschrift, nicht als Kleingedrucktes unter dem Titel. */
.plakat__wann{
  margin:1.25rem 0 .35rem;
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.05;letter-spacing:-.02em;
  color:var(--orange);
}
.plakat__wo{
  margin:0;font-size:1.05rem;color:rgba(250,246,239,.72);
}

@media (max-width:760px){
  .plakat__in{grid-template-columns:1fr;justify-items:start}
  .plakat__bild{max-width:70vw;margin-inline:auto}
  .plakat__text{width:100%}
}

/* ---------- Karten ------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(1rem,2vw,1.75rem)}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.tinted .card{background:var(--paper)}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -35px rgba(20,17,13,.55);border-color:transparent}
.card__img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.card__img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;filter:brightness(1.05) contrast(1.04);transition:transform .8s var(--ease)}
/* Der Blend-Trick gilt nur für die freigestellten Studiofotos auf hellgrauem
   Grund. Ein normales Foto würde damit absaufen — Himmel und helle Flächen
   werden gegen die Kartenfläche multipliziert und kippen ins Schmutzige. */
.card__img--foto img{mix-blend-mode:normal;filter:none}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{padding:clamp(1.5rem,2.5vw,2rem);display:flex;flex-direction:column;flex:1}
/* Karten im Fließtext */
.prose .cards{margin:2.5rem 0}
.cards--schmal{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.prose .card{text-decoration:none}
.prose .card h2,.prose .card h3{margin:0 0 .7rem;color:var(--ink)}
.prose .card p{margin-bottom:0}

.card__no{
  font-family:var(--font-display);font-weight:900;font-size:.75rem;letter-spacing:.2em;
  color:var(--orange-text);margin-bottom:.75rem;
}
.card h2,.card h3{margin-bottom:.7rem}
.card p{color:var(--ink-600);font-size:.97rem;flex:1}
.card .tlink{margin-top:1.35rem}

/* ---------- Split-Feature ----------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split--rev .split__media{order:2}
@media (max-width:900px){.split--rev .split__media{order:0}}
.split__media{position:relative}
.split__media img{width:100%;mix-blend-mode:multiply;filter:brightness(1.06) contrast(1.04)}
.dark .split__media img{mix-blend-mode:normal;border-radius:var(--r-md)}
.split__badge{
  position:absolute;right:0;bottom:0;
  background:var(--orange);color:#14110d;padding:1.15rem 1.5rem;border-radius:var(--r-md);
  font-family:var(--font-display);font-weight:900;line-height:1;text-align:center;
  box-shadow:0 20px 40px -20px rgba(240,125,0,.8);
}
.split__badge b{display:block;font-size:2.4rem;letter-spacing:-.04em}
.split__badge small{display:block;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.4rem;opacity:.9}

/* ---------- Zeitstrahl --------------------------------------------------- */
.tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;background:var(--line-dark);margin-top:3.5rem}
.tl__i{background:var(--ink);padding:clamp(1.5rem,2.5vw,2rem)}
.tl__i b{display:block;font-family:var(--font-display);font-weight:900;font-size:2.1rem;letter-spacing:-.03em;color:var(--orange);margin-bottom:.6rem}
.tl__i p{font-size:.92rem;color:rgba(250,246,239,.65);margin:0}

/* ---------- Personen ----------------------------------------------------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1rem}
.person{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.4rem 1.25rem;transition:border-color .3s,transform .35s var(--ease);
  display:flex;flex-direction:column;
}
.person:hover{transform:translateY(-4px);border-color:var(--orange)}
/* Der Name bekommt auf jeder Karte zwei Zeilen Platz, ob er sie braucht oder
   nicht: „Ann Kathrin Reichenbacher" bricht um, „Frank Dürr" nicht. Ohne die
   feste Höhe beginnt das Amt auf jeder Karte woanders, und mit margin-top:auto
   sitzt es immer auf derselben Grundlinie — dadurch sind alle Karten gleich
   hoch und das Raster steht ruhig. */
.person b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:1.05rem;letter-spacing:-.01em;
  line-height:1.2;min-height:2.5em;
}
.person span{
  display:block;margin-top:auto;padding-top:.55rem;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-text);font-weight:600;
}

/* ---------- CTA ---------------------------------------------------------- */
.cta{background:var(--orange);color:#14110d;position:relative;overflow:hidden}
.cta::after{
  content:"";position:absolute;inset:auto -10% -60% auto;width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 62%);
}
.cta__in{position:relative;z-index:2;text-align:center}
.cta h2{color:#14110d;margin-bottom:1.25rem}
.cta p{color:rgba(20,17,13,.88);max-width:52ch;margin-inline:auto;font-size:1.15rem}
.cta .btn{--bg:var(--ink);--fg:var(--paper)}
.cta .btn:hover{box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.cta .btn--ghost{--bg:transparent;--fg:#14110d;box-shadow:inset 0 0 0 2px rgba(20,17,13,.55)}
.cta .btn--ghost:hover{--bg:var(--ink);--fg:var(--paper)}
.cta .btn-row{justify-content:center}

/* ---------- Info-Kasten --------------------------------------------------- */
.box{
  background:var(--paper-2);border-radius:var(--r-lg);
  padding:clamp(1.75rem,3vw,2.5rem);border:1px solid var(--line);
}
.dark .box{background:var(--ink-800);border-color:var(--line-dark)}
.box dl{display:grid;gap:.9rem;margin:0}
.box .row{display:flex;justify-content:space-between;gap:1.5rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.dark .box .row{border-color:var(--line-dark)}
.box .row:last-child{border:0;padding-bottom:0}
.box dt{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400);font-weight:600;flex:none}
.dark .box dt{color:rgba(250,246,239,.5)}
.box dd{margin:0;font-family:var(--font-display);font-weight:800;text-align:right;letter-spacing:-.01em}

/* ---------- Prosa ---------------------------------------------------------- */
/* Fließtext bleibt auf Lesebreite, Bausteine dürfen die volle Spalte nutzen.
   Die Begrenzung sitzt deshalb an den Textelementen, nicht am Block selbst —
   sonst stecken Karten und Personenraster in 68 Zeichen fest. */
.prose{max-width:none}
.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > blockquote,
.prose > figure,
.prose > table,
.prose > dl{max-width:68ch}
.prose > .cards,
.prose > .people,
.prose > .gal{max-width:none}
.prose > .box{max-width:min(100%,42rem)}
.prose > .split{max-width:none;margin:clamp(2.5rem,5vw,4rem) 0}
.prose > blockquote{max-width:52ch}

/* Die freigestellten Gruppen brauchen keinen Blend-Modus mehr */
.prose .split__media img{mix-blend-mode:normal;filter:none}
.prose .split h2{margin-top:0}
.prose .split p:last-child{margin-bottom:0}

/* Zitat als Ruhepunkt zwischen den Textblöcken */
.prose blockquote{
  margin:clamp(2.5rem,5vw,3.5rem) 0;
  padding:0 0 0 1.75rem;
  border-left:4px solid var(--orange);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.25;letter-spacing:-.015em;
  color:var(--ink);
}
.prose h3{margin:2.75rem 0 .9rem;color:var(--orange-deep)}
.prose h3:first-child{margin-top:0}
.prose ul{padding-left:1.1rem;margin:0 0 1.25rem}
.prose li{margin-bottom:.55rem}
.prose strong{font-weight:700}

/* ---------- Seitenkopf (Unterseiten) --------------------------------------- */
/* Feste Mindesthoehe und Inhalt unten buendig. Vorher wuchs das Band mit
   seinem Inhalt — beim schnellen Wechsel zwischen Seiten sprang die
   Ueberschrift jedes Mal woanders hin. Jetzt liegt die letzte Zeile des Titels
   und damit die Notenzeile samt Taktstrich auf jeder Seite auf derselben
   Hoehe. Nur ein mehrzeiliger Titel laesst das Band nach oben wachsen; das
   Polster oben haelt ihn von der festen Kopfzeile weg. */
.phead{
  min-height:clamp(15rem,26vh,19rem);
  display:flex;align-items:flex-end;
  padding-top:clamp(7rem,12vh,9rem);
  padding-bottom:clamp(2rem,2.6vw,2.75rem);
  background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
}
.phead::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0 30px,rgba(250,246,239,.05) 30px 32px);
  mask-image:linear-gradient(to right,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(to right,#000,transparent 70%);
}
.phead__in{position:relative;z-index:2}
.phead .lead{color:rgba(250,246,239,.72)}
.phead .h1{color:var(--paper)}
/* Gruppenbild auf der Kante: der obere Teil liegt im dunklen Kopfbereich,
   der untere auf Papier. Der Studioschatten der Freistellung fällt dadurch
   auf hellen Grund und wirkt wie ein normaler Schlagschatten. */
.phead__figur{
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut);
  display:flex;justify-content:flex-end;
  margin-top:clamp(-11rem,-11vw,-6rem);
  /* Auch nach unten ziehen, sonst schiebt die Figur den Text weg. Bewusst
     nicht die volle Höhe — sonst läuft der Fließtext bei mittleren Breiten
     unter die Gruppe. */
  margin-bottom:clamp(-6rem,-6vw,-2rem);
  position:relative;z-index:3;pointer-events:none;
}
.phead__figur img{
  height:clamp(10rem,19vw,17rem);width:auto;max-width:52%;
  object-fit:contain;object-position:bottom;
}
@media (max-width:900px){
  /* Auf schmalen Geräten würde die Gruppe den Text überlagern */
  .phead__figur{display:none}
}

/* Der erste Abschnitt nach dem Kopfbereich braucht oben keine volle Sektionshöhe —
   sonst steht man vor einer leeren Fläche, bevor der Text kommt. */
.phead + .section,
.phead__figur + .section{padding-top:clamp(1.25rem,2.5vw,2rem)}

/* Der erste Abschnitt nach dem Kopfband traegt oft nur eine Zeile — einen
   Hinweis, einen Link. Danach noch einmal die volle Abschnittshoehe zu
   oeffnen, reisst ein Loch: auf 1800 px standen dort rund hundert Pixel Luft.
   Der Nachfolger ruecht deshalb naeher heran. */
.phead + .section + .section,
.phead__figur + .section + .section{padding-top:clamp(1.75rem,3vw,2.75rem)}

/* ---------- Kopfband, Fassung „Notenzeile" (A1) -------------------------
   Fünf Linien im Abstand eines Notensystems liegen hinter der Überschrift,
   und die Überschrift unterbricht sie dort, wo ihre Buchstaben stehen. Der
   Bruch entsteht aus der Schrift selbst: der innere <span> trägt dieselbe
   Farbe wie das Band als Hintergrund. Keine Maske, kein zweites Element,
   und bei zwei Zeilen bricht es dank box-decoration-break sauber.

   Vorerst nur auf Terminseiten (phead--noten wird nur dort gesetzt). Soll es
   überall gelten, bekommt page.php dieselbe Klasse und denselben span. */
/* Alles in em, damit das Verhaeltnis zur Schrift ueber alle Fensterbreiten
   gleich bleibt — mit festen Pixeln wanderte die unterste Linie beim
   Vergroessern der Ueberschrift in die Buchstaben hinein.

   --nl-grund ist nachgemessen, nicht geschaetzt: die Grundlinie der Versalien
   liegt bei Archivo 900 mit line-height .9 genau .116em ueber der Unterkante
   der Zeile. Gemessen mit einem nullbreiten Element, das auf der Grundlinie
   sitzt. Meine erste Schaetzung von .20em war der Grund, warum die Linie
   durch die Schrift lief.

   --nl-luft ist der Abstand, den die unterste Linie unter der Grundlinie
   halten soll. Daraus ergibt sich die Lage des ganzen Systems. */
.phead--noten{
  --nl-hoehe:.62em;
  --nl-grund:.116em;
  --nl-luft:.09em;
}

/* Das Linienraster des Grundzustands ersetzen, nicht ergänzen. */
.phead--noten::before{
  background:none;
  mask-image:none;-webkit-mask-image:none;
}
.phead--noten{border-bottom:1px solid var(--line-dark)}

/* Fassung A3: den einen orangen Akzent trägt der Taktstrich, nicht das Datum.
   Deshalb entfällt der Strich vor dem Datum, und das Datum selbst wird grau. */
.phead--noten .eyebrow{margin-bottom:.9rem;color:rgba(250,246,239,.46)}
.phead--noten .eyebrow::before{display:none}

/* Die Brotkrume soll auffindbar sein, nicht sichtbar. */
.phead--noten .crumb{color:rgba(250,246,239,.34);margin-bottom:1.6rem}

.phead--noten .phead__titel{position:relative}
/* 100vw über left:50% funktioniert, weil .wrap mittig sitzt — die Mitte der
   Überschrift ist damit die Mitte des Fensters. .phead hat overflow:hidden,
   die Scrollleistenbreite läuft also nicht über. */
.phead--noten .phead__titel::before{
  content:"";position:absolute;z-index:0;
  /* Auf der letzten Zeile ausrichten statt mittig im Titelblock: bei einer
     Zeile ist das dasselbe, bei mehreren sitzt der Titel dann auf dem System
     statt es in der Mitte zu durchschneiden. 0.45em ist die halbe Zeilenhoehe
     bei line-height .9 — der Versatz haengt damit an der Schriftgroesse und
     stimmt ueber die ganze clamp-Spanne.
     A3: das System beginnt an der Textkante und laeuft nach rechts aus dem
     Bild. Die 100vw ragen ueber den Rand hinaus, .phead schneidet sie ab. */
  /* Unterkante des Systems = Grundlinie minus Luft; die halbe Hoehe kommt
     durch translateY(50%) wieder dazu. */
  left:0;bottom:calc(var(--nl-hoehe) / 2 + var(--nl-grund) - var(--nl-luft));transform:translateY(50%);
  width:100vw;height:var(--nl-hoehe);
  /* Fuenf Linien, vier Zwischenraeume: die Schrittweite ist genau ein
     Viertel der Hoehe abzueglich der letzten Linie. */
  background:repeating-linear-gradient(to bottom,
    rgba(250,246,239,.26) 0 1px, transparent 1px calc((var(--nl-hoehe) - 1px) / 4));
  pointer-events:none;
}
.phead--noten .phead__titel > span{
  position:relative;z-index:1;
  display:inline;
  background:var(--ink);
  padding:0 .32em 0 .38em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Der Taktstrich beginnt das System, wie er in Noten einen Takt beginnt.
   z-index 2 legt ihn ueber den Hintergrund des Titels — sonst deckte ihn
   dessen linke Polsterung zu. Er ist der einzige farbige Punkt im Band. */
/* Dasselbe Element traegt zwei Dinge: den Taktstrich links und die *unterste*
   Linie des Systems, die als Einzige unter der Ueberschrift durchlaeuft statt
   von ihr unterbrochen zu werden — sie wirkt dadurch wie eine Unterstreichung.
   Beides liegt auf z-index 2, also ueber dem Hintergrund des Titels; die vier
   oberen Linien bleiben auf z-index 0 darunter und werden weiter ausgespart. */
.phead--noten .phead__titel::after{
  content:"";position:absolute;z-index:2;
  left:0;bottom:calc(var(--nl-hoehe) / 2 + var(--nl-grund) - var(--nl-luft));transform:translateY(50%);
  width:100vw;height:var(--nl-hoehe);
  background-image:
    /* Doppelstrich am Anfang: dick, Luecke, duenn — das Spiegelbild des
       Schlussstrichs in der Fusszeile, der duenn, Luecke, dick steht. Die
       Seite beginnt und endet damit im selben Zeichen, nur andersherum. */
    linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange)),
    /* Deutlich kraeftiger als die vier oberen Linien: sie laeuft als Einzige
       unter der Ueberschrift durch und soll dort als Unterstreichung lesen,
       nicht als Systemlinie, die zufaellig sichtbar geblieben ist. */
    linear-gradient(rgba(250,246,239,.5),rgba(250,246,239,.5));
  background-repeat:no-repeat;
  background-size:3px 100%, 1px 100%, 100% 2px;
  background-position:0 0, 5px 0, 0 100%;
  pointer-events:none;
}

.crumb{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,246,239,.56);margin-bottom:1.25rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--orange)}

/* ---------- Galerie --------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1rem}
.gal figure{margin:0;background:var(--paper-2);border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/2}
.gal img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;filter:brightness(1.05) contrast(1.04);transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}

/* ---------- Footer ----------------------------------------------------------- */
/* Das Notensystem schliesst die Seite.
   Oben oeffnet jede Unterseite mit fuenf Linien hinter dem Titel; hier laufen
   dieselben fuenf Linien noch einmal durch und werden rechts von einem
   Schlussstrich beendet — duenn, Luecke, dick, und zwar *senkrecht*, wie er in
   Noten auch steht. Ein waagerechter Doppelstrich quer ueber die Seite war der
   erste Versuch; der liest sich als zwei orange Linien und nicht als Zeichen.
   Die Linien beginnen und enden an der Textkante, damit sie mit der Fusszeile
   fluchten statt randlos zu laufen. */
.ftr{
  position:relative;
  background-color:var(--ink);color:rgba(250,246,239,.7);
  padding-block:calc(clamp(3.5rem,7vw,5.5rem) + 3.25rem) 2rem;
  --rand:max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  --sys-oben:clamp(1.75rem,3vw,2.6rem);
  --sys-hoehe:49px;
}
.ftr::before{
  content:"";position:absolute;pointer-events:none;
  /* Links am Fensterrand beginnen, rechts an der Textkante enden — dort
     steht der Schlussstrich. Das System laeuft also in die Seite hinein und
     wird am Ende geschlossen, statt beidseitig zu schweben. */
  top:var(--sys-oben);left:0;right:var(--rand);height:var(--sys-hoehe);
  background:repeating-linear-gradient(to bottom,
    rgba(250,246,239,.17) 0 1px, transparent 1px 12px);
}
/* Der Schlussstrich sitzt am rechten Ende des Systems, wo er hingehoert.
   Er ist der einzige orange Punkt der Fusszeile. */
.ftr::after{
  content:"";position:absolute;pointer-events:none;
  top:var(--sys-oben);right:var(--rand);width:6px;height:var(--sys-hoehe);
  background-image:
    linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;
  background-size:1px 100%, 3px 100%;
  background-position:0 0, 3px 0;
}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,4vw,3rem)}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
/* UX-21: Die Spaltenueberschriften stehen als h2 im Markup, damit die
   Gliederung nicht von h2 auf h4 springt. Optisch aendert das nichts. */
.ftr h2,.ftr h4{color:var(--paper);margin-bottom:1.1rem;font-size:.78rem;letter-spacing:.18em}
.ftr a{text-decoration:none;transition:color .2s}
.ftr a:hover{color:var(--orange)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.94rem}
.ftr__logo{height:52px;width:auto;margin-bottom:1.25rem}
.ftr__soc{display:flex;gap:.6rem;margin-top:1.5rem;align-items:center;flex-wrap:wrap}
.ftr__soc .kennung{font-size:.94rem;letter-spacing:.01em}
/* :not(.kennung) ist der Punkt. Ohne das erwischt die Regel auch den
   Textlink „@mvs_1919“ — der bekam dann einen 42x42-Kreis verpasst, in dem
   der Name nicht Platz hat und über den Rand hinauslief. */
.ftr__soc a:not(.kennung){
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-dark);transition:.3s var(--ease);
}
.ftr__soc a:not(.kennung):hover{background:var(--orange);border-color:var(--orange);color:#14110d;transform:translateY(-3px)}
.ftr__soc a.kennung{text-decoration:none}
.ftr__soc a.kennung:hover{color:var(--orange)}
.ftr__soc svg{width:18px;height:18px;fill:currentColor}
.ftr__btm{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.75rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.85rem;color:rgba(250,246,239,.56);
}
.ftr__btm nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.ftr__recht{display:flex;gap:1.25rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}

/* ---------- Scroll-Reveal ------------------------------------------------------ */
/* UX-05: Die Startopazitaet haengt an html.js. Ohne JavaScript wird die
   Klasse nie gesetzt, die Regel greift nicht, und alles bleibt sichtbar -
   vorher blieben Terminliste, Karten und Schluss-CTA dauerhaft unsichtbar.
   Dauer von .8s auf .45s, Versatz von 28 px auf 14 px, Staffelung halbiert:
   sonst steht ein voll sichtbarer Block noch bei opacity 0. */
html.js [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
html.js [data-rv].in{opacity:1;transform:none}
html.js [data-rv][data-d="1"]{transition-delay:.05s}
html.js [data-rv][data-d="2"]{transition-delay:.1s}
html.js [data-rv][data-d="3"]{transition-delay:.15s}
@media (prefers-reduced-motion:reduce){html.js [data-rv]{opacity:1;transform:none;transition:none;transition-delay:0s}}

/* ---------- Print --------------------------------------------------------------- */
@media print{
  .hdr,.ticker,.ftr__soc,.btn-row{display:none}
  body{background:#fff;color:#000}
}

/* =========================================================================
   WordPress-spezifisch
   ====================================================================== */

/* ---------- Barrierefreiheit ---------------------------------------------- */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;white-space:nowrap;
}
.screen-reader-text:focus{
  clip-path:none;height:auto;width:auto;position:static;
  background:var(--orange);color:#14110d;padding:.75rem 1.25rem;
}

/* ---------- Suche ---------------------------------------------------------- */
.suche{display:flex;gap:.6rem;flex-wrap:wrap}
.suche input[type="search"]{
  flex:1;min-width:12rem;
  font:inherit;color:var(--ink);
  background:var(--paper);border:2px solid var(--line);border-radius:100px;
  padding:.9rem 1.4rem;transition:border-color .2s;
}
.suche input[type="search"]:focus{border-color:var(--ink-600)}
.dark .suche input[type="search"]{background:var(--ink-800);color:var(--paper);border-color:var(--line-dark)}

/* Trefferzahl ueber den Suchergebnissen (UX-14) */
.treffer{
  font-family:var(--font-display);font-weight:800;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-400);margin:0 0 1.75rem;
}
.card__no .vergangen{
  display:inline-block;margin-left:.5rem;padding:.1rem .45rem;
  border-radius:2px;background:var(--paper-2);color:var(--ink-600);
  font-size:.9em;letter-spacing:.1em;
}

/* =========================================================================
   Formulare (UX-02, UX-04)
   Werte aus Abschnitt 07 des Prüfberichts: Beschriftung dauerhaft über dem
   Feld, „(Pflicht)" ausgeschrieben, Prüfung erst beim Verlassen des Feldes.
   ====================================================================== */
.fmr{max-width:38rem;margin-top:2.5rem}
.fmr__titel{font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase;margin-bottom:1rem}
.fmr__hinweis{font-size:.92rem;color:var(--ink-400);margin-bottom:1.75rem}

.fmr__feld{margin-bottom:1.5rem}
.fmr__feld--kurz{max-width:11rem}

.fmr__label{
  display:block;margin-bottom:.4rem;
  font-family:var(--font-body);font-weight:600;
  font-size:.8125rem;letter-spacing:.02em;color:var(--ink-600);
}
.fmr__pflicht{font-weight:400;color:var(--ink-400)}

.fmr input[type="text"],
.fmr input[type="email"],
.fmr input[type="tel"],
.fmr input[type="date"],
.fmr select,
.fmr textarea{
  width:100%;font:inherit;font-size:1.0625rem;
  color:var(--ink);background:var(--paper);
  /* Abschnitt 07 nennt rgba(20,17,13,.28) — nachgemessen sind das 1,87:1
     gegen das Papier und damit unter den 3:1, die WCAG 1.4.11 fuer die
     Umrandung eines Bedienelements verlangt. .5 ergibt 3,46:1. */
  border:1px solid rgba(20,17,13,.5);border-radius:8px;
  padding:0 1rem;height:56px;
  transition:border-color .2s,box-shadow .2s;
}
.fmr textarea{height:auto;padding:1rem;line-height:1.6;resize:vertical}
.fmr select{appearance:none;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%233a3128' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px}
.fmr input:hover,.fmr select:hover,.fmr textarea:hover{border-color:var(--ink-600)}
.fmr input:focus,.fmr select:focus,.fmr textarea:focus{
  border-color:var(--ink);border-width:2px;padding-inline:calc(1rem - 1px);
  outline:none;box-shadow:0 0 0 4px rgba(240,125,0,.45);
}
.fmr textarea:focus{padding:calc(1rem - 1px)}

/* Fehlerzustand */
.fmr__feld.ist-fehler input,
.fmr__feld.ist-fehler select,
.fmr__feld.ist-fehler textarea{border-color:#a51c1c;border-width:2px;padding-inline:calc(1rem - 1px)}
.fmr__fehler{
  margin:.45rem 0 0;font-size:.9375rem;color:#a51c1c;
  display:flex;gap:.4rem;align-items:flex-start;
}
.fmr__fehler[hidden]{display:none}
.fmr__notiz{margin:.4rem 0 0;font-size:.875rem;color:var(--ink-400)}

/* Kontrollkästchen */
.fmr__haken{display:flex;gap:.75rem;align-items:flex-start}
.fmr__haken input{width:24px;height:24px;flex:none;margin-top:.15rem;accent-color:var(--orange-text)}
.fmr__haken label{font-size:.95rem;line-height:1.5;color:var(--ink)}

/* Sammelmeldung über dem Formular */
.fmr__sammel{
  border-left:4px solid #a51c1c;background:rgba(165,28,28,.07);
  padding:1rem 1.25rem;border-radius:0 8px 8px 0;margin-bottom:1.75rem;
}
.fmr__sammel p{margin:0 0 .5rem}
.fmr__sammel ul{margin:0;padding-left:1.2rem;font-size:.95rem}
.fmr__sammel a{color:#8f1717;text-underline-offset:3px}

.fmr__ab{margin-top:.5rem}
.fmr__datenschutz{margin-top:1.25rem;font-size:.875rem;color:var(--ink-400)}
.fmr__datenschutz a{color:var(--orange-text);text-underline-offset:3px}

/* Honigtopf: für Menschen weg, für Maschinen da */
.fmr__topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Lageplan ------------------------------------------------------- */
.karte{margin:clamp(2rem,4vw,3.25rem) 0}
.karte__link{display:block;border-radius:var(--r-md);overflow:hidden;position:relative}
.karte__link img{
  width:100%;height:auto;display:block;
  mix-blend-mode:normal;filter:none;
  transition:transform .5s var(--ease);
}
.karte__link:hover img{transform:scale(1.02)}
/* .prose figcaption zentriert und steht spaeter in der Datei - deshalb hier
   mit derselben Verschachtelung, sonst gewinnt die allgemeine Regel. */
.karte figcaption,
.prose .karte figcaption{margin-top:.75rem;font-size:.85rem;color:var(--ink-400);text-align:left}
.karte figcaption a{color:var(--orange-text);text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.karte__link img{transition:none}.karte__link:hover img{transform:none}}

/* ---------- Blättern ------------------------------------------------------- */
.pagination,.nav-links{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.page-numbers{
  display:grid;place-items:center;min-width:2.75rem;height:2.75rem;padding-inline:.75rem;
  font-family:var(--font-display);font-weight:800;font-size:.9rem;
  border-radius:100px;text-decoration:none;border:2px solid var(--line);
  transition:.25s var(--ease);
}
.page-numbers:hover{border-color:var(--orange);color:var(--orange-text)}
.page-numbers.current{background:var(--orange);border-color:var(--orange);color:#14110d}
.screen-reader-text + .nav-links{margin-top:0}

/* ---------- Redaktionelle Inhalte aus dem Editor ---------------------------- */
.prose > *:first-child{margin-top:0}
.prose h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:2.75rem 0 1rem;text-transform:uppercase}
.prose .card h2.h3{font-size:clamp(1.35rem,2.4vw,1.9rem);text-transform:none;margin:0 0 .7rem}
.prose h2:first-child{margin-top:0}
.prose h4{margin:2rem 0 .75rem;color:var(--orange-text)}
.prose a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
/* Schaltflächen im Fließtext sind keine Textlinks. Ohne diese Ausnahme erben
   sie Orange und Unterstreichung — orange Schrift auf orangem Grund, die
   Beschriftung ist dann schlicht unsichtbar. */
.prose a.btn,
.prose a.btn:hover,
.prose a.tlink,
.prose a.tlink:hover{text-decoration:none}
.prose a.btn{color:var(--fg)}
.prose a.tlink{color:var(--orange-text)}
/* Mehrere Schaltflächen nebeneinander */
.prose .btn-row{margin-top:2rem}
.prose blockquote{
  margin:2rem 0;padding:1.25rem 0 1.25rem 1.75rem;
  border-left:4px solid var(--orange);
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.4;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose figure{margin:2.5rem 0}
/* Bilder aus der Mediathek im Fliesstext. Kein Blend-Modus: das sind
   normale Fotos, keine freigestellten Studioaufnahmen. */
.prose .mvs-bild{margin:clamp(2rem,4vw,3.25rem) 0}
/* In der zweispaltigen Aufteilung traegt die Spalte den Abstand schon. */
.prose .split__media .mvs-bild{margin:0}
.prose .mvs-bild img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-md);
  mix-blend-mode:normal;filter:none;
}
.prose .mvs-bild figcaption{
  margin-top:.75rem;font-size:.85rem;color:var(--ink-400);text-align:left;
}
.dark .prose .mvs-bild figcaption,
.prose .mvs-bild.auf-dunkel figcaption{color:rgba(250,246,239,.65)}
.prose figure img{border-radius:var(--r-md)}
.prose figcaption{margin-top:.75rem;font-size:.85rem;color:var(--ink-400);text-align:center}
.prose table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.95rem}
.prose th,.prose td{padding:.85rem 1rem;border-bottom:1px solid var(--line);text-align:left}
.prose th{font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400)}
.prose hr{border:0;border-top:1px solid var(--line);margin:3rem 0}
.prose code{background:var(--paper-2);padding:.15em .45em;border-radius:4px;font-size:.9em}
/* Breite Inhalte dürfen ausbrechen, aber nie die Seite schieben */
.prose .alignwide,.prose .alignfull{max-width:none;width:auto}
.prose .alignfull{margin-inline:calc(50% - 50vw);width:100vw}
.prose table,.prose pre{overflow-x:auto;display:block}

/* Bilder aus dem Editor: kein Blend-Modus, sonst kippen fremde Fotos */
.prose img{mix-blend-mode:normal;border-radius:var(--r-md)}

/* ---------- The Events Calendar: ins Vereinsdesign holen -------------------- */
/* UX-06: Die Tokens standen bereits hier, nur nicht die, die das Plugin
   an den auffaelligen Stellen wirklich benutzt. Gemessen blieben acht
   Elemente in #334aff stehen — die Schaltflaeche "Zum Kalender
   hinzufuegen" haengt an --tec-color-button-primary, nicht an
   --tec-color-accent-primary. */
.tribe-common,
.tribe-events,
.tribe-events-pg-template,
.single-tribe_events,
.post-type-archive-tribe_events{
  --tec-color-accent-primary:var(--orange);
  --tec-color-accent-primary-hover:var(--orange-deep);
  --tec-color-accent-primary-active:var(--orange-deep);
  --tec-color-background-events-bar:var(--paper-2);
  --tec-color-link-primary:var(--ink);
  --tec-color-link-accent:var(--orange-text);
  --tec-color-link-accent-hover:var(--orange-deep);
  --tec-font-family-sans-serif:var(--font-body);
  --tec-color-text-primary:var(--ink);
  --tec-color-text-secondary:var(--ink-600);
  /* Die Schaltflaechen-Tokens - hier sass das Restblau */
  --tec-color-button-primary:var(--orange-text);
  --tec-color-button-primary-hover:var(--orange-deep);
  --tec-color-button-primary-active:var(--orange-deep);
  --tec-color-button-secondary:var(--ink);
  --tec-color-border-active:var(--ink);
  --tec-color-text-events-title:var(--ink);
  --tec-color-text-event-date:var(--ink-600);
}

/* Verweise ohne eigene Klasse — etwa die Terminkategorie in der
   Randspalte — erben sonst das Plugin-Blau. */
.tribe-events-single a:not([class]),
.tribe-events-event-meta a:not([class]),
.tribe-events-event-categories a{color:var(--orange-text);text-underline-offset:3px}
.tribe-events-single a:not([class]):hover,
.tribe-events-event-categories a:hover{color:var(--orange-deep)}

/* Den Titel des Plugins gibt es nicht mehr — er ist ueber
   tribe/events/single-event/title.php im Theme abgeschaltet, damit es
   auch fuer Screenreader bei genau einer h1 bleibt. */
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4,
.tribe-events-single h1,
.tribe-events-single h2{
  font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;
}
.tribe-common button,
.tribe-common .tribe-common-c-btn{border-radius:100px}
/* Das Beitragsbild eines Termins ist bei uns das Plakat, und Plakate sind
   hochkant. TEC gibt ihm die volle Spaltenbreite — im A-Format ergibt das auf
   dem Desktop über 1700 px Höhe, man scrollt am Plakat entlang statt es
   anzusehen. Auf eine Breite begrenzen, die auf einen Blick draufpasst, und
   linksbündig zur Textspalte stellen. */
.tribe-events-event-image{margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.tribe-events-event-image img{
  display:block;width:auto;height:auto;
  max-width:min(100%,340px);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
/* Ohne sizes-Angabe nimmt der Browser 100vw an und laedt die 1087-px-Fassung
   fuer einen 340-px-Platz. Der Hinweis wird in functions.php gesetzt. */

/* TEC bringt eigene Abstände mit — Platz zum Kopfbereich schaffen */
.tribe-events-pg-template{
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut);
  padding-block:clamp(3rem,6vw,5rem);
}
.single-tribe_events .tribe-events-pg-template{padding-top:clamp(2rem,4vw,3rem)}
.post-type-archive-tribe_events .tribe-events-pg-template{padding-top:clamp(8rem,14vh,10rem)}

/* Der eigene Kopfbereich haengt sich per tribe_events_before_html in die
   Ausgabe und landet damit *innerhalb* von .tribe-events-pg-template — das ist
   auf eine Spaltenbreite begrenzt und eingerueckt. Das dunkle Band war dadurch
   nur so breit wie der Text, und darueber blieb ein heller Streifen stehen, auf
   dem das Negativ-Logo der Kopfzeile unlesbar wurde (weisse Schrift auf Creme).
   Hier bricht es auf die volle Fensterbreite aus und beginnt ganz oben.
   width:100vw statt calc(50% - 50vw), weil der Elternteil eine Polsterung hat —
   translateX zentriert unabhaengig davon. body{overflow-x:hidden} faengt die
   Scrollleistenbreite ab. */
/* !important ist hier kein Faulheitsfehler: The Events Calendar setzt die
   Polsterung seines Containers selbst mit !important. Ohne dasselbe Mittel
   bleibt oben ein 40 px hoher heller Streifen ueber dem dunklen Band stehen. */
.single-tribe_events .tribe-events-pg-template{padding-top:0 !important}
.tribe-events-pg-template > .phead{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  margin-bottom:clamp(2rem,4vw,3rem);
}

/* UX-06: Der Ruecklink "Alle Veranstaltungen" lag bei top 40 px und damit
   unter der 83 px hohen festen Kopfzeile — er ueberlagerte das Logo.
   Gleiches gilt fuer jedes Sprungziel auf der Seite. */
html{scroll-padding-top:96px}
*[id]{scroll-margin-top:96px}
.single-tribe_events .tribe-events-back,
.tribe-events-back{padding-top:1.5rem}
.tribe-events-back a{
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--orange-text);
}

/* ---------- Admin-Leiste nicht über die feste Kopfzeile legen --------------- */
.admin-bar .hdr{top:32px}
@media (max-width:782px){.admin-bar .hdr{top:46px}}

/* =========================================================================
   Bildergalerie und Lichtbox
   ====================================================================== */

.album__kopf{
  display:flex;align-items:end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.album__anzahl{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-400);
}

.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:.6rem}
.gal__feld{
  display:block;padding:0;border:0;margin:0;cursor:zoom-in;
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);
  background:var(--paper-2);position:relative;
}
.gal__feld img{
  width:100%;height:100%;object-fit:cover;display:block;
  mix-blend-mode:normal;filter:none;
  transition:transform .5s var(--ease),opacity .3s;
}
.gal__feld:hover img{transform:scale(1.05)}
.gal__feld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,13,.25),transparent 45%);
  opacity:0;transition:opacity .3s;
}
.gal__feld:hover::after{opacity:1}
/* Der Ring liegt mit 2 px Versatz ausserhalb der Kachel, also auf der
   hellen Seitenflaeche - dort gilt der dunkle Kern aus der globalen Regel. */
.gal__feld:focus-visible{outline-offset:2px}

/* ---------- Lichtbox ---------------------------------------------------- */
body.lb-offen{overflow:hidden}
.lb{
  position:fixed;inset:0;z-index:200;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);padding:clamp(1rem,4vw,3rem);
  background:rgba(12,10,8,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  /* UX-16: visibility darf nicht mitlaufen. Solange sie animiert wurde,
     stand der Kasten beim Oeffnen noch auf hidden — focus() greift dort
     nicht, und der Fokus blieb auf der Miniatur im Hintergrund stehen.
     Jetzt schaltet sie beim Oeffnen sofort und beim Schliessen erst nach
     der Ueberblendung. */
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),visibility 0s linear .25s;
}
.lb.ist-auf{opacity:1;visibility:visible;transition:opacity .25s var(--ease),visibility 0s}
.lb__inhalt{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;min-width:0}
.lb__inhalt img{
  max-width:100%;max-height:78vh;width:auto;height:auto;
  border-radius:var(--r-sm);box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.lb__inhalt figcaption{
  color:rgba(250,246,239,.72);font-size:.9rem;text-align:center;max-width:60ch;
}
.lb button{
  color:var(--paper);background:rgba(250,246,239,.09);
  border:1px solid rgba(250,246,239,.18);border-radius:50%;
  width:clamp(2.75rem,6vw,3.5rem);aspect-ratio:1;
  display:grid;place-items:center;font-size:1.6rem;line-height:1;
  transition:background .2s,transform .2s var(--ease);
}
.lb button:hover{background:var(--orange);border-color:var(--orange);color:#14110d;transform:scale(1.06)}
.lb__zu{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);font-size:1.9rem}
.lb__zaehler{
  position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  margin:0;color:rgba(250,246,239,.6);
  font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.16em;
}
@media (max-width:640px){
  .lb{grid-template-columns:1fr}
  .lb__vor,.lb__zurueck{position:absolute;top:50%;transform:translateY(-50%)}
  .lb__vor{left:.6rem}
  .lb__zurueck{right:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .lb,.lb button,.gal__feld img{transition:none}
}