/* ============================================================
   Club Suizo Costa Blanca – Design-System
   Umsetzung nach «Web Design Manual», 2. Fassung, 25. August 2026
   Gestaltungskonzept: Peter Althaus · Technische Umsetzung: Jsabelle Wipf

   Bezugsgrössen: Desktop 1920 px (10 Spalten) · Mobil 360 px (7 Spalten)
   Skalierung: Raster flüssig in vw, Schriftgrössen über clamp()
   ============================================================ */

/* ---------- 1. Schriften ---------------------------------- */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  /* Nur für die Tagzahl der Kalenderkacheln – Entwurf: Roboto Black 77 */
  font-family: "Roboto";
  src: url("../fonts/Roboto-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("../fonts/RobotoSlab-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("../fonts/RobotoSlab-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- 2. Tokens ------------------------------------- */

:root {
  /* Primärfarben gemäss Manual, Seite 6 */
  --gelb:        #FFE52B;
  --rot:         #E4002B;
  --gelb-hell:   #FFF7BF;   /* = 30 % Gelb auf Weiss */
  --schwarz:     #000000;
  --weiss:       #FFFFFF;
  --grau-linie:  #000000;

  /* Spaltensystem Desktop: 1920 px, 10 Spalten à 140 px,
     Seitenrand 80 px, Spaltenabstand 40 px */
  --pad:   4.166667vw;   /*  80 px */
  --gut:   2.083333vw;   /*  40 px */
  --col:   7.291667vw;   /* 140 px */

  /* Typografie Desktop – Werte aus dem Manual bei 1920 px Breite.
     clamp() hält die Schrift auf schmalen Bildschirmen lesbar. */
  /* Die Titelgrössen des Entwurfs (120 / 77 / 60 / 44 bei 1920 px)
     sind auf eine Präsentationsseite gezeichnet, nicht auf ein
     Browserfenster. Ein Faktor steuert sie gemeinsam.
     Gemessen auf einem MacBook (Fensterbreite 1792 px) ergibt
     .56:  Seitentitel 63 · Haupttitel 40 · Zitat 31 · Titel 23.
     Das ist die Grösse, die auf dem Bildschirm stimmig wirkt.     */
  --t-skala:        .56;

  --t-seitentitel:  clamp(calc(44px * var(--t-skala)), calc(6.250000vw * var(--t-skala)), calc(120px * var(--t-skala)));
  --t-haupttitel:   clamp(calc(30px * var(--t-skala)), calc(4.010417vw * var(--t-skala)), calc( 77px * var(--t-skala)));
  --t-zitat:        clamp(calc(24px * var(--t-skala)), calc(3.125000vw * var(--t-skala)), calc( 60px * var(--t-skala)));
  --t-titel:        clamp(calc(21px * var(--t-skala)), calc(2.291667vw * var(--t-skala)), calc( 44px * var(--t-skala)));
  /* Fliesstext: bewusst grosszügig, Beschluss Kickoff «gut lesbar für
     die Hauptzielgruppe 70+». 19 px auf dem MacBook, nach oben 21.  */
  --t-text:         clamp(16px, 1.062500vw, 21px);

  /* Zeilenabstände als Verhältnis (Manual: optisch harmonisch
     hat Vorrang vor der exakten Übernahme der Werte) */
  --zab-seitentitel: 0.975;  /* 117/120 */
  --zab-haupttitel:  1.065;  /*  82/77  */
  --zab-zitat:       1.100;  /*  66/60  */
  --zab-titel:       1.182;  /*  52/44  */
  --zab-slogan:      1.091;  /*  48/44  */
  --zab-text:        1.391;  /*  32/23  */

  /* Vertikale Rhythmusstufen (Desktop, in px des Entwurfs) */
  --v-header:    11.979167vw; /* 230 */

  /* Die grossen Vertikalabstände des Entwurfs sind auf 1920 px
     gezeichnet und wirken im Browser zu luftig. Ein Faktor steuert
     sie gemeinsam: 1 = Entwurf, kleiner = enger.                 */
  --v-skala:     .62;
  --v-bild:      .90;   /* Abstand Bild zu Überschrift, milder */
  --v-400:       calc(20.833333vw * var(--v-skala)); /* 400 */
  --v-350:       calc(18.229167vw * var(--v-skala)); /* 350 */
  --v-250:       calc(13.020833vw * var(--v-skala)); /* 250 */
  --v-120:        6.250000vw; /* 120 */
  --v-110:        5.729167vw; /* 110 */
  --v-100:        5.208333vw; /* 100 */

  --btn-h:        5.729167vw; /* 110 */
  --btn-w:       16.666667vw; /* 320 = 2 Spalten + 1 Abstand */

  --linie: 1px;
}

/* ---------- 3. Grundlagen --------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: "Roboto", system-ui, sans-serif;
  /* Beschluss Kickoff 14.05.2026, Punkt 5: Fliesstext Roboto Medium,
     begründet mit der Lesbarkeit für die Hauptzielgruppe 70+.
     Das Manual setzt den Fliesstext in Light; der Beschluss geht vor.
     Navigation und Fussbereich bleiben leicht, wie gezeichnet.      */
  font-weight: 500;
  font-size: var(--t-text);
  line-height: var(--zab-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Bedienelemente bleiben in Light */
.header__nav, .header__sprache, .footer, .ruecknav, .kachel__titel,
.akk__frage, .kal-kachel__ort { font-weight: 300; }
.footer__marke, .footer__rubrik, .footer__zwischen { font-weight: 500; }

img, svg { display: block; max-width: 100%; }
/* Bilder mit gesetztem aspect-ratio dürfen die HTML-Höhe nicht erben */
.block__bild, .bild-links, .kachel__bild, .zitat__bild, .banner__bild,
.seitenkopf__bild, .vk__bild, .galerie__bild, .banner__deko { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 calc(var(--zab-text) * 1em) 0; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
}

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

/* ---------- 4. Spaltensystem ------------------------------ */

.raster {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--gut);
  padding-inline: var(--pad);
  width: 100%;
}

/* Spaltenzuweisungen – Bezeichnung nach Startspalte/Endspalte */
.sp-2-5   { grid-column: 2 / 5; }
.sp-3-11  { grid-column: 3 / 11; }
.sp-4-10  { grid-column: 4 / 10; }
.sp-4-11  { grid-column: 4 / 11; }
.sp-5-8   { grid-column: 5 / 8; }
.sp-6-10  { grid-column: 6 / 10; }
.sp-1-4   { grid-column: 1 / 4; }
.sp-2-8   { grid-column: 2 / 8; }
.sp-2-10  { grid-column: 2 / 10; }

/* Raster-Hilfe zum Prüfen: <body class="raster-zeigen"> */
.raster-zeigen::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right,
      rgba(228,0,43,.18) 0, rgba(228,0,43,.18) var(--col),
      transparent var(--col), transparent calc(var(--col) + var(--gut)));
  background-position: var(--pad) 0;
  background-size: calc(100% - 2 * var(--pad)) 100%;
  background-repeat: no-repeat;
}

/* ---------- 5. Typografie-Klassen ------------------------- */

.spitzmarke {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-text);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  line-height: var(--zab-text);
  margin: 0;
}

/* Haupttitel: Zeile 1 um eine Spalte + Spaltenabstand eingezogen,
   Folgezeilen bündig – asymmetrische Komposition, Manual S. 18 */
.haupttitel {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 500;
  font-size: var(--t-haupttitel);
  line-height: var(--zab-haupttitel);
  color: var(--rot);
  text-indent: calc(var(--col) + var(--gut));
  margin: 0;
  hyphens: manual;
}

.grundtext {
  font-size: var(--t-text);
  line-height: var(--zab-text);
}

.seitentitel {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-seitentitel);
  line-height: var(--zab-seitentitel);
  color: var(--weiss);
  margin: 0;
}

.titel-44 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: var(--zab-titel);
  margin: 0;
}

/* ---------- 6. Header ------------------------------------- */

.header {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  z-index: 100;
  height: var(--v-header);
  background: var(--weiss);
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--gut);
  padding-inline: var(--pad);
  align-items: center;
}

.header__logo {
  grid-column: 2 / 3;
  justify-self: start;
  width: 8.854167vw;                 /* 170 */
  margin-inline-start: -0.760417vw;  /* Entwurfsposition x 245,4 */
}
.header__logo img { width: 100%; height: auto; }

.header__mitte {
  grid-column: 3 / 9;
  display: flex;
  align-items: center;
  font-size: var(--t-text);
}

.header__nav {
  display: flex;
  align-items: center;
}
.header__nav a { position: relative; padding-block: .3em; }
.header__nav a[aria-current="page"] { color: var(--rot); font-weight: 500; }
/* Startseite: «Start» wird im Entwurf nicht farbig hervorgehoben */
.header__nav a[data-stumm] { color: var(--schwarz); font-weight: 300; }
.header__nav a:hover { color: var(--rot); }

/* ---------- 6b. Hauptnavigation mit Untermenüs -------------
   Abweichung vom Manual: Der Entwurf kennt nur fünf Punkte und
   erschliesst die vier Themenseiten ausschliesslich über das rote
   Trapez der Startseite. Vorstandsbeschluss ist ein durchgängiges
   Hauptmenü mit Untermenüs. Die Kopfgeometrie bleibt unverändert. */

.nav {
  display: flex;
  align-items: center;
  gap: 1.666667vw;                   /* 32 */
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__punkt { position: relative; }

.nav__kopf { display: flex; align-items: center; gap: .3em; }

.nav__schalter {
  background: none;
  border: 0;
  padding: .3em 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.nav__schalter:hover { color: var(--rot); }
.nav__pfeil { width: .55em; height: auto; transition: transform .2s ease; }
.nav__punkt[data-offen="true"] .nav__pfeil { transform: rotate(180deg); }

.nav__unter {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -1.1em;
  z-index: 10;
  min-width: 11.5em;
  background: var(--weiss);
  list-style: none;
  margin: 0;
  padding: 1.2em 1.1em 1.1em;
  display: none;
  box-shadow: 0 .4vw 1.4vw rgba(0, 0, 0, .10);
}
.nav__unter::before {
  content: "";
  display: block;
  border-block-start: var(--linie) solid var(--rot);
  margin-block-end: .7em;
}
.nav__punkt:hover > .nav__unter,
.nav__punkt:focus-within > .nav__unter,
.nav__punkt[data-offen="true"] > .nav__unter { display: block; }

.nav__unter a {
  display: block;
  padding-block: .42em;
  white-space: nowrap;
}
.nav__unter a:hover { color: var(--rot); }
.nav__unter a[aria-current="page"] { color: var(--rot); font-weight: 500; }

.header__sprache {
  margin-inline-start: auto;
  padding-inline-start: 2.5vw;
  display: flex; align-items: center; gap: .55em;
}
.header__sprache span { color: var(--schwarz); }
.header__sprache a:hover { color: var(--rot); }

.header__cta { grid-column: 9 / 11; justify-self: stretch; }

/* Burger nur mobil */
.header__burger { display: none; }

/* Inhalt startet unter dem fixierten Header */
.seite { padding-block-start: var(--v-header); }

/* ---------- 7. Buttons ------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-w);
  height: var(--btn-h);
  background: var(--gelb);
  color: var(--schwarz);
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 500;
  font-size: var(--t-text);
  line-height: 1;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: filter .18s ease;
}
.btn:hover { filter: brightness(.93); }
.btn--breit { width: 100%; }

/* ---------- 8. Hero / Herobilder -------------------------- */

.hero {
  position: relative;
  width: 100vw;
  overflow: hidden;
}
.hero--start   { height: 47.916667vw; }  /* 920 */
.hero--thema   { height: 29.947917vw; }  /* 575 */
.hero--unter   { height: 18.750000vw; }  /* 360 */

.hero__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__titel {
  position: absolute;
  inset-inline-start: calc(var(--pad) + var(--col) + var(--gut));
  margin-inline-start: -0.45vw;  /* optischer Randausgleich grosser Titel */
}
.hero--start .hero__titel { inset-block-start: 16.7vw; }
.hero--thema .hero__titel { inset-block-start: 11.9vw; }
.hero--unter .hero__titel { inset-block-start:  9.0vw; }

/* ---------- 9. Rotes Trapez mit Bereichsnavigation -------- */

/* Herobild und Trapez bilden zusammen den Startbereich. Der Bezugs-
   punkt muss hier liegen, sonst rechnet das Trapez gegen den Seiten-
   anfang und schiebt sich unter den fixierten Kopfbereich.
   Entwurf: Trapezoberkante y 290 = Heroanfang 230 + 60.            */
.startbereich { position: relative; }

.trapez {
  position: absolute;
  inset-block-start: 3.125vw;   /* 60 */
  inset-inline-end: 0;
  width: 46.109375vw;           /* 885,3 */
  height: 35.760417vw;          /* 686,6 */
  background: var(--rot);
  /* Polygon exakt aus der Entwurfsdatei übernommen */
  clip-path: polygon(0% 0%, 100% 14.10%, 100% 92.29%, 33.11% 100%);
}

.trapez__inhalt {
  position: absolute;
  inset-block-start: 6.40625vw;  /* 123 ab Trapezoberkante */
  inset-inline-start: 34.49%;    /* = Spalte 8 (x 1340) bei 1920 px */
  width: 26.041667vw;            /* 500 */
  color: var(--weiss);
}
.trapez__text {
  font-weight: 500;
  font-size: var(--t-text);
  line-height: var(--zab-text);
  margin: 0 0 2.0vw 0;
}
.trapez__nav { list-style: none; margin: 0; padding: 0; }
.trapez__nav li {
  height: 3.854167vw;            /* 74 */
  border-block-start: var(--linie) solid currentColor;
}
.trapez__nav li:last-child { border-block-end: var(--linie) solid currentColor; }
.trapez__nav a {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: var(--t-titel);
  transition: padding-inline-end .2s ease;
}
.trapez__nav a:hover { padding-inline-end: .6vw; }
.pfeil { width: 1.6vw; height: auto; flex: none; }

/* ---------- 10. Informationsblock ------------------------- */

.block__spitzmarke { grid-column: 4 / 11; margin-block-end: 0.21vw; }
.block__titel      { grid-column: 3 / 11; }
.block__text       { grid-column: 6 / 10; grid-row: 3; margin-block-start: 5.390625vw; }
.block__bild       { grid-column: 1 / 4; grid-row: 3; align-self: start;
                     width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
                     margin-block-start: calc(17.484375vw * var(--v-skala)); }

/* Vertikale Abstände der Blöcke, Werte aus den Referenzseiten,
   über --v-skala gemeinsam gestrafft                            */
/* Nach einem Herobild oder Seitenkopf braucht die Überschrift mehr
   Luft als zwischen zwei Textblöcken – daher eigener, milderer Faktor. */
.block--einstieg   { padding-block-start: calc(12.786458vw * var(--v-bild)); }  /* 245,5 */
.block--kacheln    { padding-block-start: calc(19.296875vw * var(--v-skala)); }  /* 370,5 */
.block--akkordeon  { padding-block-start: calc(17.994792vw * var(--v-skala)); }  /* 345,5 */
.block--mitglied   { padding-block-start: calc(17.843750vw * var(--v-skala)); }  /* 342,6 */

/* ---------- 11. Kachelnavigation -------------------------- */

.kacheln {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--gut);
  /* Reihenabstand grösser als der Abstand Titel zu Bild (44), damit
     eine Überschrift sichtbar zum Bild darunter gehört und nicht zum
     Bild darüber.                                                   */
  row-gap: 4.166667vw;                                      /* 80 */
  margin-block-start: calc(11.208333vw * var(--v-skala) * .7);
}
/* Vier Kacheln pro Reihe statt zwei. Der Entwurf zeichnet zwei à 500,
   das lässt rechts ein Drittel leer und macht die Seiten sehr lang.
   Die Lage wird hier gesetzt und überschreibt die sp-Klassen im HTML. */
.kacheln .kachel:nth-child(4n+1) { grid-column: 2 / 4; }
.kacheln .kachel:nth-child(4n+2) { grid-column: 4 / 6; }
.kacheln .kachel:nth-child(4n+3) { grid-column: 6 / 8; }
.kacheln .kachel:nth-child(4n)   { grid-column: 8 / 10; }

.kachel { position: relative; }
.kachel__titel {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: var(--t-titel);
  line-height: 1;
  border-block-start: var(--linie) solid var(--grau-linie);
  padding-block-start: 1.1vw;
  margin: 0 0 1.5vw 0;
}
/* Der Entwurf zeichnet quadratische Kacheln à 500 px. Bei vier pro
   Reihe sind sie 295 breit und damit auch 295 hoch – die Gruppen
   wirken dadurch wie Hauptinhalt statt wie Navigation. Ein liegendes
   Format von 4:3 nimmt ein Viertel der Höhe weg, ohne dass vom Bild
   etwas Wesentliches wegfällt.                                      */
.kachel__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.kachel .btn {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: var(--gut);
  /* Auf der schmaleren Kachel mitwachsend statt fest 320 breit */
  width: auto;
  height: calc(var(--btn-h) * .78);
  padding-inline: 1.3vw;
}

/* ---------- 12. Inhaltsboxen ------------------------------ */

/* Einzug links = Spaltenabstand (40 px); oberer Abstand in Leerzeilen */
.box {
  background: var(--gelb-hell);
  padding-inline: var(--gut);
  padding-block: calc(2 * var(--zab-text) * 1em) calc(2 * var(--zab-text) * 1em);
}
/* Eine Box, die allein in einem Abschnitt steht, hing bisher ohne
   Abstand am Text darüber. Die Boxen innerhalb von .boxen regeln
   ihren Abstand selbst und sind hier ausgenommen.                 */
.raster:not(.boxen) > .box { margin-block-start: calc(13.020833vw * var(--v-skala)); }

.box--aktion { padding-block-start: calc(3 * var(--zab-text) * 1em); }
.box--klein  { padding-block-start: calc(2 * var(--zab-text) * 1em); }
.box__titel {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: var(--zab-titel);
  margin: 0 0 var(--t-text) 0;   /* 1 Leerzeile nach dem Titel */
}
.box__text { font-size: var(--t-text); line-height: var(--zab-text); }
.box .btn { margin-block-start: 2.5vw; }
.box--rechts { display: flex; flex-direction: column; align-items: flex-end; }
.box--rechts > * { align-self: flex-start; }
.box--rechts .btn { align-self: flex-end; }

/* ---------- 13. Zitat ------------------------------------- */

.zitat__aussage {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 500;
  font-size: var(--t-zitat);
  line-height: var(--zab-zitat);
  margin: 0 0 1.8vw 0;
}
.zitat__signatur {
  font-size: var(--t-text);
  line-height: var(--zab-text);
}
.zitat__signatur strong { font-weight: 500; }

/* ---------- 14. Akkordeon --------------------------------- */

.akkordeon { grid-column: 4 / 10; margin-block-start: calc(8.354167vw * var(--v-skala)); }  /* 160,4 */
.akk {
  border-block-start: var(--linie) solid var(--rot);
}
.akk:last-child { border-block-end: var(--linie) solid var(--rot); }
.akk__frage {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gut);
  list-style: none;
  cursor: pointer;
  padding-block: 2.604688vw;
  font-size: var(--t-text);
  line-height: var(--zab-text);
  font-weight: 300;
}
.akk__frage::-webkit-details-marker { display: none; }
.akk__pfeil { width: 1.85vw; height: auto; flex: none; transition: transform .25s ease; }
.akk[open] .akk__pfeil { transform: rotate(180deg); }
.akk__antwort {
  font-weight: 500;
  font-size: var(--t-text);
  line-height: var(--zab-text);
  padding-block-end: 2.604688vw;
  max-width: 88%;
}

/* ---------- 15. Club-Banner ------------------------------- */

.banner { position: relative;
  margin-block-start: calc(12.687500vw * var(--v-skala));
  padding-block-end: calc(25.541667vw * var(--v-skala)); }
.banner__bild {
  grid-column: 4 / 10;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}
.banner__trapez {
  position: absolute;
  inset-block-start: 24.583333vw;    /* 472 ab Bildoberkante */
  inset-inline-end: 13.520833vw;     /* bündig mit der Bildkante */
  width: 44.885417vw;    /* 861,8 */
  height: 34.812500vw;   /* 668,4 */
  background: var(--rot);
  clip-path: polygon(0% 0%, 100% 14.09%, 100% 92.28%, 33.11% 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block-start: 8.750000vw;     /* 168 ab Trapezoberkante */
  padding-inline-start: 14.671875vw;   /* 281,7 – Text auf x 1080 */
  padding-inline-end: var(--gut);
  color: var(--weiss);
}
.banner__marke {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: var(--zab-slogan);
  margin: 0;
}
.banner__slogan {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: var(--t-titel);
  line-height: var(--zab-slogan);
  margin: 0;
}
.banner__trapez .btn { margin-block-start: 3.869792vw; }  /* Button auf y 8370 */
.banner__deko {
  position: absolute;
  inset-inline-start: 11.635417vw;   /* 223,4 */
  inset-block-start: 24.739583vw;    /* 475 ab Bildoberkante */
  width: 10.9375vw;                  /* 210 */
  height: auto;
}

/* ---------- 16. Kontaktformular --------------------------- */

.formular {
  grid-column: 3 / 11;
  background: var(--gelb-hell);
  padding-inline: var(--gut);
  padding-block: 5.0vw;   /* 3 Leerzeilen */
}
.formular__deko {
  position: absolute;
  inset-inline-start: -20.625000vw;   /* x 224,4 bei 1920 px */
  inset-block-start: 57.489583vw;     /* 967,8 ab Formularoberkante */
  width: 10.937500vw;                 /* 210 */
  height: auto;
}

.formular__titel {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: var(--zab-titel);
  margin: 0 0 3.2vw 0;
}
.feld {
  display: block;
  border: 0;
  border-block-end: var(--linie) solid var(--schwarz);
  background: transparent;
  width: 100%;
  font: inherit;
  font-size: var(--t-text);
  padding: 0 0 .35em 0;
  margin-block-end: 3.2vw;
  color: var(--schwarz);
}
.feld:focus { outline: none; border-block-end-width: 2px; }
.feld__label {
  display: block;
  font-size: var(--t-text);
  line-height: var(--zab-text);
  margin-block-end: .35em;
}
textarea.feld { min-height: 11vw; resize: vertical; }
.formular__senden { display: flex; justify-content: center; margin-block-start: var(--v-120); }
.formular__hinweis { font-size: var(--t-text); line-height: var(--zab-text); margin-block-start: 2vw; }
.einwilligung {
  display: flex; gap: .8em; align-items: flex-start;
  font-size: var(--t-text); line-height: var(--zab-text);
  margin-block-start: 1.5vw;
}
.einwilligung input { margin-block-start: .35em; accent-color: var(--rot); }
.einwilligung a { text-decoration: underline; }

/* ---------- 17. Rücknavigation ---------------------------- */

.ruecknav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--gut);
  padding-inline: var(--pad);
  align-items: center;
  height: var(--v-110);
  width: 100%;
  margin-block-start: calc(12.937500vw * var(--v-skala));   /* 248,4 */
}
.ruecknav::before,
.ruecknav::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 48.958333vw;                /* 0 bis 940 */
  height: var(--linie);
  background: var(--schwarz);
}
.ruecknav::before { inset-block-start: 0; }
.ruecknav::after  { inset-block-end: 0; }
.ruecknav--drei::before,
.ruecknav--drei::after { width: 67.708333vw; }   /* 0 bis 1300 */

.ruecknav a {
  display: inline-flex; align-items: center; gap: 1.8vw;
  font-weight: 500;
  font-size: var(--t-text);
  white-space: nowrap;
}
.ruecknav a:nth-of-type(1) { grid-column: 2 / 4; }
.ruecknav a:nth-of-type(2) { grid-column: 4 / 6; }
.ruecknav a:nth-of-type(3) { grid-column: 6 / 8; }
.ruecknav svg { width: 1.7vw; height: auto; }

/* ---------- 18. Fussbereich -------------------------------
   Abweichung vom Manual: Der Entwurf zeichnet 826 px Höhe,
   zweispaltig, mit sehr grossen Innenabständen. Beschluss Kickoff
   14.05.2026, Punkt 4: «Footer schlank halten, möglichst wenig Platz
   wegnehmen.» Umgesetzt ist eine dreispaltige, knappe Fassung mit
   denselben Inhalten.                                            */

.footer {
  background: var(--gelb-hell);
  margin-block-start: var(--v-400);
  padding-block: 3.125vw;               /* 60 oben und unten */
  font-size: var(--t-text);
}
.footer--knapp { margin-block-start: calc(10.364583vw * var(--v-skala)); }

.footer__marke-sp { grid-column: 2 / 5; }
.footer__adresse  { grid-column: 5 / 8; }
.footer__schluss  { grid-column: 8 / 11; }

.footer__marke {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: var(--zab-slogan);
  color: var(--rot);
  margin: 0;
}
.footer__slogan {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: var(--t-titel);
  line-height: var(--zab-slogan);
  margin: 0;
}
.footer :where(p) { margin: 0; }
.footer__rubrik { font-weight: 500; color: var(--rot); }
.footer__abstand { height: calc(var(--zab-text) * 1em); }

.footer__rechtliches { font-weight: 500; color: var(--rot); margin: 0; }
.footer__rechtliches a:hover { text-decoration: underline; }
.footer__copyright { margin-block-start: calc(var(--zab-text) * 1em) !important; }

.footer__zwischen { margin-block-start: calc(2 * var(--zab-text) * 1em) !important; }
.footer__social { display: flex; gap: 1.1vw; margin-block-start: .7vw; }
.footer__social a {
  display: grid; place-items: center;
  width: 2.291667vw; height: 2.291667vw;   /* 44 */
  border-radius: 50%;
  background: var(--rot);
}
.footer__social svg { width: 55%; height: auto; fill: var(--weiss); }

/* ---------- 19. Rechtstexte (Datenschutz / Impressum) ----- */

.recht { padding-block: var(--v-250) var(--v-400); }
.recht__titel {
  grid-column: 3 / 11;
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 500;
  font-size: var(--t-haupttitel);
  line-height: var(--zab-haupttitel);
  margin: 0 0 var(--v-120) 0;
}
.recht__abschnitt {
  grid-column: 5 / 10;
  position: relative;
  margin-block-start: calc(3 * var(--zab-text) * 1em);
}
.recht__nr {
  position: absolute;
  inset-inline-start: calc(-1 * (var(--col) + var(--gut)));
  color: var(--rot);
  font-weight: 500;
}
.recht__abschnitt h2 {
  font-size: var(--t-text);
  line-height: var(--zab-text);
  font-weight: 500;
  color: var(--rot);
  margin: 0 0 var(--zab-text) 0;
}
.recht__abschnitt h3 {
  font-size: var(--t-text);
  line-height: var(--zab-text);
  font-weight: 500;
  margin: var(--zab-text) 0 0 0;
}

/* ---------- 20. Kalender ---------------------------------- */

/* Anlasskacheln: 500 × 500, drei pro Reihe, Reihenabstand 110.
   Spaltenlage 2–5, 5–8, 8–11 ergibt sich aus span 3 ab Spalte 2.    */
.kalender {
  row-gap: 5.729167vw;              /* 110 */
  margin-block-start: var(--v-250);
}
.kal-kachel {
  grid-column: span 3;
  /* Quadrat als Mindestmass – längere Angaben dürfen die Kachel
     wachsen lassen, das Raster gleicht die Reihe aus.          */
  min-block-size: 26.041667vw;      /* 500 */
  min-inline-size: 0;               /* Rasterfeld gilt, nicht der Inhalt */
  overflow-wrap: break-word;
  padding: 2.083333vw;              /* 40 */
  color: var(--weiss);
  display: flex;
  flex-direction: column;
}
.kal-kachel:nth-child(3n+1) { grid-column: 2 / 5; }
.kal-kachel:nth-child(3n+2) { grid-column: 5 / 8; }
.kal-kachel:nth-child(3n)   { grid-column: 8 / 11; }

.kal-kachel__monat {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-text);         /* 23 */
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--schwarz);
  margin: 0;
}
.kal-kachel__tag {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: 4.010417vw;            /* 77 */
  line-height: 1.1;
  margin: .18em 0 0 0;
}
.kal-kachel__anlass {
  margin-block-start: 2.5vw;        /* 48 – Entwurf: Titeloberkante auf 209 */
}
.kal-kachel__titel {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);        /* 44 */
  line-height: 1.136;               /* Zeilenabstand 50 bei 44 */
  margin: 0;
}
.kal-kachel__ort {
  font-family: "Roboto Slab", serif;
  font-weight: 300;
  font-size: var(--t-titel);
  line-height: 1.136;
  color: var(--schwarz);
  margin: 0;
}
.kal-kachel__zeit {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: 1.136;
  margin: .79em 0 0 0;              /* Abstand Ort → Zeit: 35 bei 44 */
}
/* Ganze Kachel anklickbar, wenn ein Ziel hinterlegt ist */
.kal-kachel a { color: inherit; display: block; }
.kal-kachel a:hover .kal-kachel__titel { text-decoration: underline; }
.kalender__mehr { margin-block-start: var(--v-120); }
.fruehling-1 { background: #8EDB5A; } .fruehling-2 { background: #6CCB3D; } .fruehling-3 { background: #4CAF24; }
.sommer-1    { background: #2FC7C9; } .sommer-2    { background: #24B6B3; } .sommer-3    { background: #1FA59F; }
.herbst-1    { background: #F4B400; } .herbst-2    { background: #F28C00; } .herbst-3    { background: #D96C1A; }
.winter-1    { background: #8EC5DF; } .winter-2    { background: #66A8D1; } .winter-3    { background: #3E90C2; }

/* ---------- 20b. Wischer (Intro-Animation) ----------------
   Ablauf nach Manual S. 20–23. Das Costa-Blanca-Bild ist bereits
   der Hintergrund des ersten Hero-Slides; der Wischer führt direkt
   in den Slider über und ist kein eigenständiger Bildschirm.       */

.hero--start { --wischer: 0; }

/* Phase 1: Overlay (20–25 % Schwarz) über dem Costa-Blanca-Bild */
.wischer-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .22);
  z-index: 3;
  pointer-events: none;
}

/* Gelbes Trapez – Ausgangszustand, fährt nach oben aus dem Bild */
.trapez-gelb {
  position: absolute;
  inset-block-start: 7.796875vw;   /* 149,7 ab Heroanfang */
  inset-inline-start: 22.916667vw; /* 440 */
  width: 46.109375vw;              /* 885,3 */
  height: 35.755208vw;             /* 686,5 */
  background: var(--gelb);
  clip-path: polygon(0% 7.71%, 66.89% 0%, 100% 100%, 0% 85.90%);
  z-index: 4;
  pointer-events: none;
}

/* Im Wischer-Modus starten Header, Titel, Trapez und Slidertexte unsichtbar.
   Das Attribut sitzt auf <body>, damit auch der Header erfasst wird. */
[data-wischer="laeuft"] .header,
[data-wischer="laeuft"] .hero__titel,
[data-wischer="laeuft"] .slider__titel,
[data-wischer="laeuft"] .trapez { opacity: 0; }

[data-wischer="laeuft"] .trapez-gelb     { animation: wischer-gelb     .70s cubic-bezier(.4,0,.2,1) .10s both; }
[data-wischer="laeuft"] .trapez          { animation: wischer-rot      .70s cubic-bezier(.4,0,.2,1) .10s both; }
[data-wischer="laeuft"] .wischer-overlay { animation: wischer-overlay  .30s ease .80s both; }
[data-wischer="laeuft"] .header          { animation: wischer-auf      .40s ease 1.00s both; }
[data-wischer="laeuft"] .slider__titel[data-aktiv="true"],
[data-wischer="laeuft"] .hero__titel     { animation: wischer-auf      .40s ease 1.10s both; }
[data-wischer="laeuft"] .trapez__inhalt  { animation: wischer-auf      .40s ease 1.20s both; }

@keyframes wischer-gelb {
  from { transform: translateY(0); }
  to   { transform: translateY(-140%); }
}
@keyframes wischer-rot {
  from { opacity: 1; transform: translateY(-125%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wischer-overlay {
  from { opacity: 1; } to { opacity: 0; }
}
@keyframes wischer-auf {
  from { opacity: 0; } to { opacity: 1; }
}

/* Ohne Wischer (Rücknavigation, wiederkehrende Besucher):
   Startseite lädt sofort mit dem Bild-Slider. */
[data-wischer="aus"] .trapez-gelb,
[data-wischer="aus"] .wischer-overlay { display: none; }

@media (prefers-reduced-motion: reduce) {
  .trapez-gelb, .wischer-overlay { display: none; }
  [data-wischer="laeuft"] .header,
  [data-wischer="laeuft"] .hero__titel,
  [data-wischer="laeuft"] .trapez,
  [data-wischer="laeuft"] .trapez__inhalt { opacity: 1; animation: none; }
}

/* ---------- 20c. Hero-Slider ------------------------------ */

.slider__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.slider__slide[data-aktiv="true"] { opacity: 1; }
.slider__slide img {
  width: 100%; height: 100%; object-fit: cover;
}
.slider__titel {
  position: absolute;
  inset-inline-start: calc(var(--pad) + var(--col) + var(--gut));
  inset-block-start: 16.7vw;
  margin-inline-start: -0.45vw;
  z-index: 5;
  opacity: 0;
  transition: opacity .6s ease;
}
.slider__titel[data-aktiv="true"] { opacity: 1; }



/* ---------- 21. Dezente Animationen ----------------------- */

.einblenden {
  opacity: 0;
  transform: translateY(2.2vw);
  transition: opacity .9s ease, transform .9s ease;
  will-change: opacity, transform;
}
.einblenden.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .einblenden { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   22. Mobil-Fassung – 360 px, 7 Spalten
   ============================================================ */



/* ---------- 23. Druck ------------------------------------- */

@media print {
  .header, .trapez, .ruecknav, .banner__trapez { position: static; }
  .seite { padding-block-start: 0; }
  .einblenden { opacity: 1; transform: none; }
}

/* ============================================================
   24. Unterseiten (Ebene 3)
   Reduzierter Seitenkopf, Zitat, kleine Inhaltsboxen,
   dreiteilige Rücknavigation – nach den Referenzseiten
   ============================================================ */

.seitenkopf {
  padding-block-start: 6.770833vw;   /* 130 ab Header */
}
.seitenkopf__text { grid-column: 2 / 8; grid-row: 1; margin-block-start: 1.875vw; }
.seitenkopf__titel {
  color: var(--schwarz);
  margin-block-start: 1.588542vw;
  margin-inline-start: -0.343750vw;  /* optischer Randausgleich */
}
.seitenkopf__bild {
  grid-column: 8 / 11;
  grid-row: 1;
  align-self: start;
  width: 100%;
  aspect-ratio: 500 / 315;
  object-fit: cover;
}

/* Grossformatiges Bild, links über den Seitenrand hinaus */
.bild-links {
  grid-column: 1 / 5;
  width: 39.583333vw;                /* 760 */
  margin-inline-start: calc(-1 * var(--pad));
  aspect-ratio: 8 / 5;
  object-fit: cover;
  grid-row: 3;
  margin-block-start: 6.177083vw;
}

/* ---------- Zitat ----------------------------------------- */

.zitat {
  position: relative;
  margin-block-start: calc(21.927083vw * var(--v-skala));   /* 421 */
  align-items: start;
}
.zitat::before {                      /* gelbe Fläche bis zum Seitenrand */
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 13.541667vw;                /* 260 */
  background: var(--gelb);
}
.zitat__bild {
  grid-column: 2 / 6;
  position: relative;
  width: 35.416667vw;                /* 680 */
  aspect-ratio: 5 / 8;
  object-fit: cover;
}
.zitat__inhalt { grid-column: 6 / 10; }
.zitat__aussage { margin-block-start: 6.109375vw; }   /* 117,3 ab Bildoberkante */
.zitat__signatur { margin-block-start: 5.677083vw; margin-inline-start: 9.427083vw; }

/* ---------- Inhaltsbox klein mit Aktion ------------------- */

.boxen { margin-block-start: calc(18.281250vw * var(--v-skala)); row-gap: var(--v-120); }

.box-klein {
  border-block-start: var(--linie) solid var(--schwarz);
  padding-block-start: 2.708333vw;   /* 52 */
}
.box-klein__pfeil {
  width: 3.286458vw;                 /* 63,1 */
  height: 1.895833vw;                /* 36,4 */
  margin-inline-start: auto;
}
.box-klein__flaeche {
  position: relative;
  background: var(--gelb-hell);      /* 30 % CI-Gelb, Manual S. 6 */
  aspect-ratio: 1 / 1;
  margin-block-start: 1.651042vw;    /* 31,7 */
  padding-inline: var(--gut);
  padding-block-start: 4.505208vw;   /* 86,5 – 2 Leerzeilen */
}
.box-klein__titel {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: var(--zab-titel);
  margin: 0;
}
.box-klein__text {
  font-size: var(--t-text);
  line-height: var(--zab-text);
  margin-block-start: 2.541667vw;    /* 1 Leerzeile */
}
.box-klein .btn {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: var(--gut);
}

/* ---------- Rücknavigation mit drei Zielen ---------------- */




/* Informationsblock auf Unterseiten: Abstand ab Seitenkopf */
.block--unterseite { padding-block-start: 12.682292vw; }
.sp-4-7  { grid-column: 4 / 7; }
.sp-7-10 { grid-column: 7 / 10; }


/* Korrekturen */
figure { margin: 0; }
blockquote { margin: 0; }
.bild-links { max-width: none; }

/* ============================================================
   25. Vorstandskacheln
   ============================================================ */

.vorstand__titel {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: var(--t-titel);
  line-height: 1;
  margin: 0;
}
.vorstand { margin-block-start: calc(20.989583vw * var(--v-skala)); }        /* 403 */
/* Vier Porträts pro Reihe, gleiche Lage wie die Kachelnavigation.
   Der Entwurf zeichnet zwei à 500; das macht die Seite sehr lang und
   passt nicht zum Rest. Die Lage überschreibt die sp-Klassen im HTML. */
.vorstand__gitter { margin-block-start: 4.166667vw; row-gap: 7.8vw; }
.vorstand__gitter .vk:nth-child(4n+1) { grid-column: 2 / 4; }
.vorstand__gitter .vk:nth-child(4n+2) { grid-column: 4 / 6; }
.vorstand__gitter .vk:nth-child(4n+3) { grid-column: 6 / 8; }
.vorstand__gitter .vk:nth-child(4n)   { grid-column: 8 / 10; }

.vk__bild { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #CCCCCC; }
.vk__flaeche {
  background: var(--gelb);
  min-height: 9.0vw;                                 /* vorher fix 320 */
  padding: 1.1vw var(--gut) 1.1vw;
}
.vk__name  { font-weight: 500; margin: 0; }
.vk__rolle { margin: 0; }

/* ============================================================
   26. Kontaktformulare
   ============================================================ */

.block--formularkopf { padding-block-start: 10.182292vw; }   /* 195,5 */

.formular-bereich { display: block; position: relative; }
.formular {
  background: var(--gelb-hell);                      /* 30 % CI-Gelb */
  padding-inline: var(--gut);
  padding-block: 7.109375vw 5.0vw;                   /* 136,5 */
  margin-block-start: 7.187500vw;                    /* 138 */
}
.formular__deko {
  position: absolute;
  inset-inline-start: -20.625000vw;   /* x 224,4 bei 1920 px */
  inset-block-start: 57.489583vw;     /* 967,8 ab Formularoberkante */
  width: 10.937500vw;                 /* 210 */
  height: auto;
}

.formular__titel {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: var(--zab-slogan);
  margin: 0 0 6.984375vw 0;                          /* 134 */
}
.feld__label {
  display: block;
  font-size: var(--t-text);
  line-height: var(--zab-text);
  margin: 0;
}
.feld {
  display: block;
  width: 100%;
  height: 2.395833vw;                                /* 46 */
  border: 0;
  border-block-end: var(--linie) solid var(--schwarz);
  background: transparent;
  font: inherit;
  font-size: var(--t-text);
  color: var(--schwarz);
  padding: 0;
  margin-block-end: 3.750000vw;                      /* 72 – Feldraster 150 */
  border-radius: 0;
}
.feld:focus { outline: none; border-block-end-width: 2px; }
.feld--nachricht { height: 10.416667vw; resize: vertical; }   /* 200 */
.formular__senden {
  display: flex;
  justify-content: center;
  margin-block-start: 6.250000vw;                    /* 120 */
}
.formular__hinweis {
  margin-block-start: 2vw;
  font-size: var(--t-text);
  text-align: center;
}
.einwilligung {
  display: flex; gap: .8em; align-items: flex-start;
  font-size: var(--t-text); line-height: var(--zab-text);
  margin-block-start: 1.5vw;
}
.einwilligung input { margin-block-start: .35em; accent-color: var(--rot); inline-size: 1.1em; block-size: 1.1em; }
.einwilligung a { text-decoration: underline; }

.ruecknav--vier::before,
.ruecknav--vier::after { width: 86.458333vw; }       /* 0 bis 1660 */
.ruecknav a:nth-of-type(4) { grid-column: 8 / 10; }

/* ============================================================
   27. PDF-Viewer
   ============================================================ */

.pdfbereich { margin-block-start: calc(14.583333vw * var(--v-skala)); }
.pdfbereich__titel {
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: var(--t-titel);
  line-height: 1;
  margin: 0 0 2.083333vw 0;
}
/* Die Lage steht hier direkt an der Komponente, nicht nur über die
   Hilfsklasse sp-2-10 im HTML. Sonst landet der Viewer in einer
   einzelnen Rasterspalte (129 px) und PDF.js zeichnet die Seiten
   briefmarkengross. */
.pdf-viewer { grid-column: 2 / 10; background: #F2F2F2; padding: var(--gut); }
.pdf-viewer__buehne {
  display: flex;
  gap: 0.5vw;
  justify-content: center;
  align-items: flex-start;
  min-height: 20vw;
}
.pdf-viewer__seite {
  max-width: 100%;
  height: auto;
  background: var(--weiss);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.pdf-viewer__steuerung {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2vw;
  margin-block-start: var(--gut);
  font-size: var(--t-text);
}
.pdf-viewer__steuerung button {
  font: inherit;
  font-size: var(--t-text);
  min-width: 2.5vw;
  padding: .3em .7em;
  border: var(--linie) solid var(--schwarz);
  background: var(--weiss);
  cursor: pointer;
}
.pdf-viewer__steuerung button:hover { background: var(--gelb); }
.pdf-angaben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gut);
  margin-block-start: var(--gut);
  font-size: var(--t-text);
}
.pdf-angaben__download { font-weight: 500; color: var(--rot); text-decoration: underline; }

/* Dokumente, die schon fertige Doppelseiten enthalten (die Revista),
   zeichnet der Viewer auf schmalen Geräten breiter als das Fenster.
   Darum darf die Leinwand dort weder gekappt noch gestaucht werden,
   sonst wäre eine Heftseite keine 180 px breit. Geschoben wird über
   overflow-x der Bühne. */
[data-pdf-doppelseite="nein"] .pdf-viewer__buehne { overflow-x: auto; }
[data-pdf-doppelseite="nein"] .pdf-viewer__seite  { max-width: none; flex: none; }

/* Ausgabenliste der Revista */
.ausgaben {
  grid-column: 2 / 10;
  list-style: none;
  margin: var(--gut) 0 0 0;
  padding: 0;
  font-size: var(--t-text);
  line-height: var(--zab-text);
}
.ausgaben li {
  display: flex;
  flex-wrap: wrap;
  gap: .4em var(--gut);
  align-items: baseline;
  border-block-start: var(--linie) solid var(--grau-linie);
  padding-block: .9em;
}
.ausgaben li:last-child { border-block-end: var(--linie) solid var(--grau-linie); }
.ausgaben__heft   { font-weight: 500; min-inline-size: 9em; }
.ausgaben__umfang { margin-inline-start: auto; }
.ausgaben a { color: var(--rot); text-decoration: underline; }

.hervor { font-weight: 500; }



/* ============================================================
   28. Rechtstexte, Kalender, Galerie
   ============================================================ */

.recht__titel-hell { font-weight: 300; }
.recht__spanisch { font-weight: 300; margin: 0 0 calc(2 * var(--zab-text) * 1em) 0; }
.recht__abschnitt p { margin: 0 0 calc(var(--zab-text) * 1em) 0; }
.recht__abschnitt h3 + p { margin-block-start: 0; }

mark.offen {
  background: var(--gelb);
  color: var(--schwarz);
  padding: .1em .3em;
  font-weight: 500;
}

.kalender__jahreszeit {
  grid-column: 1 / -1;
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: var(--t-titel);
  line-height: 1;
  margin: var(--v-120) 0 var(--gut) 0;
}
.kal-kachel__hinweis { font-size: var(--t-text); margin: 0; opacity: .85; }

.galerie { row-gap: var(--gut); margin-block-start: var(--v-250); }
.galerie__bild { object-fit: cover; width: 100%; }
.galerie__bild--quer    { grid-column: span 6; aspect-ratio: 8 / 5; }
.galerie__bild--quadrat { grid-column: span 4; aspect-ratio: 1 / 1; }
.galerie__bild--hoch    { grid-column: span 4; aspect-ratio: 5 / 8; }



/* ---------- 29. Feinschliff ------------------------------- */

.pdf-viewer { overflow-x: auto; }
.pdf-viewer__buehne { max-width: 100%; }
.pdf-viewer__seite { max-width: 100%; }

/* Aktionsbalken «Mitglied werden» – nur in der Mobil-Fassung sichtbar */
.cta-balken { display: none; }


/* ---------- 29b. Faktenblock «Auf einen Blick» ------------
   Aufbau wie die Inhaltsbox: hellgelbe Fläche, Einzug gleich
   dem Spaltenabstand, Titel in Roboto Medium.               */

.fakten {
  background: var(--gelb-hell);
  padding-inline: var(--gut);
  padding-block: calc(3 * var(--zab-text) * 1em) calc(2 * var(--zab-text) * 1em);
  margin-block-start: var(--v-350);
}
.fakten__titel {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--t-titel);
  line-height: var(--zab-titel);
  margin: 0 0 calc(var(--zab-text) * 1em) 0;
}
.fakten__liste { margin: 0; }
.fakten__zeile {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: var(--gut);
  padding-block: calc(.5 * var(--zab-text) * 1em);
  border-block-start: var(--linie) solid rgba(0, 0, 0, .18);
}
.fakten__zeile:first-child { border-block-start: 0; }
.fakten__zeile dt { font-weight: 500; }
.fakten__zeile dd { margin: 0; }
.fakten__zeile a { text-decoration: underline; }
.fakten__hinweis {
  margin-block-start: calc(var(--zab-text) * 1em);
  font-size: var(--t-text);
}

/* ---------- 29c. Nummernliste ------------------------------
   Für die Service-Seiten: Bezeichnung links, Nummer oder Link
   rechts. Auch innerhalb des Akkordeons verwendbar.          */

.nummern { margin: 0 0 2.604688vw 0; }
.nummern__zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gut);
  padding-block: calc(.5 * var(--zab-text) * 1em);
  border-block-start: var(--linie) solid rgba(0, 0, 0, .18);
  font-size: var(--t-text);
  line-height: var(--zab-text);
}
.nummern__zeile:first-child { border-block-start: 0; }
.nummern__zeile dt { font-weight: 300; }
.nummern__zeile dd { margin: 0; font-weight: 500; text-align: end; }
.nummern__zeile a { text-decoration: underline; }
.akk__antwort + .nummern { margin-block-start: calc(-.5 * var(--zab-text) * 1em); }
.fakten .nummern { margin-block-end: 0; }

/* ============================================================
   30. MOBIL-FASSUNG
   Bezugsgrösse 360 px, 7 Spalten à 37 px,
   Seitenrand links 15 px / rechts 14 px, Spaltenabstand 12 px.
   Alle Werte aus den Mobil-Referenzseiten ausgemessen.
   Steht bewusst am Schluss, damit die Regeln die Desktop-
   Fassung zuverlässig überschreiben.
   ============================================================ */

@media (max-width: 899px) {

  /* ---------- 30.1 Tokens -------------------------------- */

  :root {
    --pad:   4.166667vw;   /* 15 */
    --pad-r: 3.888889vw;   /* 14 */
    --gut:   3.333333vw;   /* 12 */
    --col:  10.277778vw;   /* 37 */

    --t-seitentitel:  clamp(22px,  6.666667vw, 30px);  /* 24 */
    --t-hero:         clamp(40px, 12.500000vw, 54px);  /* 45 – nur Startseite */
    --t-haupttitel:   clamp(22px,  6.666667vw, 30px);  /* 24 */
    --t-zitat:        clamp(14px,  3.888889vw, 17px);  /* 14 */
    --t-titel:        clamp(14px,  3.888889vw, 17px);  /* 14 */
    --t-text:         clamp(14px,  3.888889vw, 17px);  /* 14 */
    --t-spitzmarke:   clamp(11px,  3.055556vw, 13px);  /* 11 */

    --zab-seitentitel: 1.000;
    --zab-hero:        1.000;  /* 45/45 */
    --zab-haupttitel:  1.167;  /* 28/24 */
    --zab-zitat:       1.357;  /* 19/14 */
    --zab-titel:       1.357;
    --zab-slogan:      1.143;  /* 16/14 */
    --zab-text:        1.357;  /* 19/14 */

    --v-header:  26.388889vw;  /*  95 */
    --btn-h:     11.111111vw;  /*  40 */
    --btn-w:     40.833333vw;  /* 147 */
  }

  /* ---------- 30.2 Raster -------------------------------- */

  .raster {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding-inline: var(--pad) var(--pad-r);
  }

  /* Standard: Inhalte stehen in Spalte 2 bis 7 */
  .sp-2-5, .sp-2-10, .sp-3-11, .sp-4-10, .sp-4-11, .sp-5-8,
  .sp-6-10, .sp-1-4, .sp-2-8, .sp-4-7, .sp-7-10,
  /* Ausnahme: das Formular läuft fast über die volle Breite */
  .block__spitzmarke, .block__text,
  .akkordeon, .recht__abschnitt,
  .footer__marke-sp, .footer__adresse, .footer__schluss {
    grid-column: 2 / 8;
  }

  /* Der Haupttitel läuft über die volle Breite, erste Zeile eingezogen */
  .block__titel, .recht__titel { grid-column: 1 / -1; }
  .haupttitel { text-indent: calc(var(--col) + var(--gut)); }  /* 49 */

  /* ---------- 30.3 Header -------------------------------- */

  .header {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding-inline: var(--pad) var(--pad-r);
    height: var(--v-header);
    align-items: start;
  }

  .header__logo {
    grid-column: 2 / 4;
    width: 20.833333vw;                /* 75 */
    margin-inline-start: -2.083333vw;  /* Entwurfsposition x 56,5 */
    margin-block-start: 2.777778vw;    /* 10 */
  }

  .header__mitte { display: contents; }

  .header__sprache {
    grid-column: 5 / 7;
    justify-self: start;
    margin-inline-start: 0;
    margin-block-start: 10.555556vw;   /* Grundlinie auf y 49,4 */
    font-size: var(--t-text);
    gap: .75em;
  }

  .header__cta { display: none; }      /* wird zum Balken auf dem Herobild */

  .header__burger {
    display: grid;
    grid-column: 7 / 8;
    justify-self: end;
    justify-items: end;
    align-content: start;
    margin-block-start: 12.638889vw;   /* erste Linie auf y 45,6 */
    width: 10.277778vw;                /* 37 */
    height: auto;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  /* Gestaffelte Linien nach Entwurf: 27,6 / 37 / 27,6 */
  .header__burger span {
    display: block;
    height: 1px;
    background: var(--schwarz);
    transition: transform .25s ease, opacity .25s ease, width .25s ease;
  }
  .header__burger span:nth-child(1) { width: 7.666667vw; }   /* 27,6 rechtsbündig */
  .header__burger span:nth-child(2) { width: 10.277778vw; }  /* 37 */
  .header__burger span:nth-child(3) { width: 7.666667vw; margin-inline-end: auto; }
  .header__burger span + span { margin-block-start: 2.222222vw; }  /* 9 - 1 */
  .header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(2.5vw) rotate(45deg); width: 10.277778vw; }
  .header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-2.5vw) rotate(-45deg); width: 10.277778vw; margin-inline-end: 0; }

  /* Hamburgermenü */
  .header__nav {
    position: fixed;
    inset-block-start: var(--v-header);
    inset-inline: 0;
    background: var(--weiss);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5vw var(--pad-r) 8vw var(--pad);
    border-block-start: 1px solid var(--rot);
    transform: translateY(-130%);
    transition: transform .3s ease;
    z-index: 90;
  }
  .header__nav[data-offen="true"] { transform: none; }
  .header__nav {
    max-block-size: calc(100vh - var(--v-header));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Untermenüs klappen auf dem Handy auf, statt zu überlagern */
  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav__punkt { position: static; }
  .nav__kopf {
    justify-content: space-between;
    gap: 0;
    border-block-end: 1px solid var(--rot);
  }
  .nav__kopf > a {
    flex: 1 1 auto;
    padding-block: 3.6vw;
    font-size: var(--t-titel);
  }
  .nav__schalter { padding: 3.6vw 0 3.6vw 6vw; }
  .nav__pfeil { width: 3.888889vw; }

  .nav__unter {
    position: static;
    box-shadow: none;
    min-width: 0;
    padding: 1.5vw 0 3.5vw 5vw;
  }
  .nav__unter::before { display: none; }
  /* Auf dem Handy öffnet nur der Schalter – kein Hover, kein Fokus */
  .nav__punkt:hover > .nav__unter,
  .nav__punkt:focus-within > .nav__unter { display: none; }
  .nav__punkt[data-offen="true"] > .nav__unter { display: block; }
  .nav__unter a {
    padding-block: 2.6vw;
    font-size: var(--t-text);
    white-space: normal;
  }

  /* ---------- 30.3b Kalenderkacheln ----------------------
     Entwurf: 135 x 135, zwei pro Reihe auf Spalte 2 und 5,
     Reihenabstand 40, Innenabstand 12.                      */

  .kalender { row-gap: 11.111111vw; }          /* 40 */
  .kal-kachel {
    grid-column: span 3;
    min-block-size: 37.5vw;                    /* 135 */
    padding: 3.333333vw;                       /* 12 */
  }
  .kal-kachel:nth-child(odd)  { grid-column: 2 / 5; }
  .kal-kachel:nth-child(even) { grid-column: 5 / 8; }
  .kal-kachel__monat {
    font-size: clamp(10px, 3.055556vw, 12px);   /* 11 */
    letter-spacing: .06em;
  }
  .kal-kachel__tag {
    font-size: clamp(24px, 7.777778vw, 30px);   /* 28 */
    line-height: 1.07;
    margin-block-start: .1em;
  }
  .kal-kachel__titel,
  .kal-kachel__ort,
  .kal-kachel__zeit {
    font-size: clamp(11px, 3.333333vw, 13px);   /* 12 */
    line-height: 1.167;                         /* Zeilenabstand 14 */
  }
  .kal-kachel__anlass { margin-block-start: .9vw; }
  .kal-kachel__zeit   { margin-block-start: .62em; }
  .kalender__mehr { grid-column: 2 / 8; margin-block-start: 11.111111vw; }

  /* ---------- 30.4 Herobereich und Aktionsbalken --------- */

  .hero--start { height: 166.666667vw; }   /* 600 */
  .hero--thema,
  .hero--unter { height: 62.500000vw; }    /* 225 */

  .hero__titel,
  .slider__titel {
    inset-inline-start: var(--pad);
    inset-block-start: 21.805556vw;        /* 78,5 ab Heroanfang */
    inset-block-end: auto;
    margin-inline-start: 0;
    font-size: var(--t-seitentitel);
    line-height: var(--zab-seitentitel);
  }
  .hero--start .slider__titel,
  .hero--start .hero__titel {
    font-size: var(--t-hero);
    line-height: var(--zab-hero);
    inset-inline-start: 16.944444vw;       /* 61 */
    inset-block-start: 100.750000vw;       /* 362,7 ab Heroanfang */
    inset-block-end: auto;
  }

  /* Gelber Aktionsbalken über die volle Breite, auf dem Bild liegend */
  .cta-balken {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;                    /* Themenseiten: unten */
    height: var(--btn-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gelb);
    color: var(--schwarz);
    font-family: "Roboto Slab", Georgia, serif;
    font-weight: 500;
    font-size: var(--t-text);
    z-index: 6;
  }
  .hero--start .cta-balken {               /* Startseite: oben */
    inset-block-start: 0;
    inset-block-end: auto;
  }

  /* ---------- 30.5 Trapez-Navigation --------------------- */

  /* Das rote Trapez liegt auch mobil auf dem Herobild */
  .startbereich { position: relative; display: block; }
  .trapez {
    position: absolute;
    inset-block-start: 39.500000vw;        /* 142,2 ab Heroanfang */
    inset-inline-start: 31.611111vw;       /* 113,8 */
    inset-inline-end: 0;
    width: 68.388889vw;                    /* 246,2 */
    height: 53.027778vw;                   /* 190,9 */
    padding: 0;
    clip-path: polygon(0% 0%, 100% 14.10%, 100% 92.29%, 33.11% 100%);
  }
  .trapez__inhalt {
    position: absolute;
    inset-block-start: 11.333333vw;        /* erste Linie auf y 278 */
    inset-inline-start: 34.61%;            /* Text auf x 199 */
    width: 40.833333vw;                    /* 147 */
  }
  .trapez__text { display: none; }         /* im Mobil-Entwurf nicht vorgesehen */
  .trapez__nav li { height: 8.333333vw; }  /* 30 */
  .trapez__nav a { font-size: 5vw; }       /* 18 */
  .pfeil { width: 5vw; }

  /* ---------- 30.6 Seitenkopf der Unterseiten ------------ */

  .seitenkopf { padding-block-start: 11.388889vw; }   /* Bild auf y 136 */
  .seitenkopf__text {
    grid-column: 1 / 5;
    grid-row: 1;
    margin-block-start: 0;
  }
  .seitenkopf__text .spitzmarke { margin-block-start: 2.638889vw; }
  .seitenkopf__titel {
    margin-block-start: 2.5vw;
    margin-inline-start: 0;
    font-size: var(--t-seitentitel);
    line-height: var(--zab-seitentitel);
  }
  .seitenkopf__bild {
    grid-column: 5 / 8;
    grid-row: 1;
    align-self: start;
    width: 41.388889vw;                    /* 149, läuft rechts über den Rand */
    max-width: none;
    aspect-ratio: 149 / 94;
  }

  /* ---------- 30.7 Blöcke und Bilder --------------------- */

  .block--einstieg    { padding-block-start: 25.833333vw; }  /*  93 ab Hero */
  .block--unterseite  { padding-block-start: 22.222222vw; }  /*  80 */
  .block--kacheln     { padding-block-start: 36.111111vw; }  /* 130 */
  .block--akkordeon   { padding-block-start: 24.250000vw; }  /*  87,3 */
  .block--mitglied    { padding-block-start: 33.333333vw; }  /* 120 */
  .block--formularkopf{ padding-block-start: 25.833333vw; }

  .block__spitzmarke {
    font-size: var(--t-spitzmarke);
    margin-block-end: 1.944444vw;
  }
  /* Der Textblock löst sich auf, damit das Bild nach dem ersten
     Absatz stehen kann – wie in den Mobil-Referenzseiten. */
  .block__text { display: contents; }
  .block__text > p {
    grid-column: 2 / 8;
    grid-row: auto;
    order: 2;
    margin-block: 0 calc(var(--zab-text) * 1em);
  }
  .block__text > p:first-child { order: 0; margin-block-start: 3.611111vw; }
  .block__text > p:last-child  { margin-block-end: 0; }

  /* Grossformatiges Bild: läuft links über den Seitenrand hinaus */
  .block__bild {
    order: 1;
    grid-column: 1 / 6;
    grid-row: auto;
    align-self: start;
    width: 55.277778vw;                    /* 199 */
    max-width: none;
    aspect-ratio: 1 / 1;
    margin-inline-start: calc(-1 * var(--pad));
    margin-block: 2.583333vw 13.611111vw;  /* 9,3 / 49 */
  }
  .bild-links {
    order: 1;
    grid-column: 1 / 7;
    grid-row: auto;
    align-self: start;
    width: 78.333333vw;                    /* 282 */
    max-width: none;
    margin-inline-start: 0;
    margin-block: 6.666667vw 13.611111vw;
    aspect-ratio: 282 / 178;
  }
  .block__spitzmarke { order: -2; }
  .block__titel { order: -1; }

  /* ---------- 30.8 Kachelnavigation (zwei pro Reihe) ----- */

  .kacheln {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--gut);
    row-gap: 22.222222vw;                  /* 80 */
    margin-block-start: 11.138889vw;       /* 40,1 */
  }
  /* Mobil zwei pro Reihe. Gleiche Spezifität wie die Desktopregeln,
     sonst gewinnen diese und die Kacheln fallen aus dem Raster.    */
  .kacheln .kachel:nth-child(odd)  { grid-column: 2 / 5; }
  .kacheln .kachel:nth-child(even) { grid-column: 5 / 8; }
  .kachel__titel {
    font-size: var(--t-titel);
    padding-block-start: 3.888889vw;
    margin-block-end: 2.5vw;
  }
  .kachel .btn {
    position: static;
    width: 100%;
    margin-block-start: 0;
  }

  /* ---------- 30.9 Akkordeon ----------------------------- */

  .akkordeon { margin-block-start: 12.750000vw; }   /* 45,9 */
  .akk__frage {
    padding-block: 5.555556vw;                       /* Raster 60 */
    gap: var(--gut);
  }
  .akk__pfeil { width: 4.166667vw; }                 /* 15 */
  .akk__antwort { padding-block-end: 5.555556vw; max-width: 100%; }

  /* ---------- 30.10 Inhaltsboxen ------------------------- */

  .box {
    padding-inline: var(--gut);
    padding-block: calc(2 * var(--zab-text) * 1em);
  }
  .box--aktion, .box--klein { padding-block-start: calc(2 * var(--zab-text) * 1em); }

  /* Die Boxen wechseln die Seite – rhythmische Wellenbewegung */
  .fakten { grid-column: 2 / 8; margin-block-start: 22.222222vw; padding-block: 11.111111vw 8.333333vw; }
  .fakten__titel { font-size: var(--t-titel); }
  .fakten__zeile { grid-template-columns: 1fr; gap: 0; }
  .nummern { margin-block-end: 6.944444vw; }
  .nummern__zeile { grid-template-columns: 1fr; gap: 0; }
  .nummern__zeile dd { text-align: start; }

  .boxen { margin-block-start: 32.638889vw; row-gap: 10.833333vw; }
  .box-klein {
    position: relative;
    border-block-start: 1px solid var(--schwarz);
    padding-block-start: 11.111111vw;      /* 40 bis zur Fläche */
  }
  .box-klein:nth-of-type(odd)  { grid-column: 3 / 8; }   /* rechtsbündig */
  .box-klein:nth-of-type(even) { grid-column: 2 / 7; }   /* linksbündig */
  .box-klein__pfeil {
    display: block;
    position: absolute;
    inset-block-start: 4.444444vw;
    inset-inline-end: 0;
    width: 7.777778vw;                     /* 28 */
    height: 4.444444vw;                    /* 16 */
  }
  .box-klein__flaeche {
    aspect-ratio: 1 / 1;
    margin-block-start: 0;
    padding-inline: var(--gut);
    padding-block-start: 10.555556vw;      /* 38 */
  }
  .box-klein__titel { font-size: var(--t-titel); }
  .box-klein__text { margin-block-start: 5.277778vw; }
  .box-klein .btn { inset-inline-end: var(--gut); width: 47.777778vw; }  /* 172 */

  /* ---------- 30.11 Zitat -------------------------------- */

  .zitat {
    margin-block-start: 29.250000vw;       /* 105,3 */
    position: relative;
  }
  .zitat::before {
    display: block;
    width: 17.777778vw;                    /* 64 – gelbe Fläche links */
    inset-block: 0 auto;
    height: 81.944444vw;                   /* 295 */
  }
  .zitat__bild {
    grid-column: 2 / 6;
    width: 51.222222vw;                    /* 184 */
    aspect-ratio: 5 / 8;
  }
  .zitat__inhalt { grid-column: 2 / 8; }
  .zitat__aussage {
    margin-block-start: 9.722222vw;        /* 35 unter dem Bild */
    font-size: var(--t-zitat);
    line-height: var(--zab-zitat);
  }
  .zitat__signatur {
    margin-block-start: 8.333333vw;
    margin-inline-start: 27.222222vw;      /* Signatur auf Spalte 4 */
  }

  /* ---------- 30.12 Club-Banner -------------------------- */

  .banner { margin-block-start: 46.277778vw; padding-block-end: 45.777778vw; }
  .banner__bild {
    grid-column: 2 / 8;
    width: 82.222222vw;                    /* 296, läuft rechts über den Rand */
    max-width: none;
  }
  .banner__deko {
    display: block;
    inset-inline-start: auto;
    inset-inline-end: 14.166667vw;
    inset-block-start: -18.333333vw;
    width: 16.666667vw;                    /* 60 */
  }
  .banner__trapez {
    position: absolute;
    inset-inline-start: 22.222222vw;       /* 80 */
    inset-inline-end: auto;
    inset-block-start: 36.861111vw;        /* 132,7 ab Bildoberkante */
    width: 77.777778vw;                    /* 280 */
    height: auto;
    clip-path: polygon(0% 0%, 100% 14.10%, 100% 92.29%, 33.11% 100%);
    padding-block: 12.222222vw 8.333333vw;
    padding-inline-start: 29.464286vw;     /* Text auf x 162,5 */
    padding-inline-end: var(--gut);
    justify-content: flex-start;
  }
  .banner__marke  { font-size: var(--t-titel); line-height: var(--zab-slogan); }
  .banner__slogan { font-size: var(--t-titel); line-height: var(--zab-slogan); }
  .banner__trapez .btn { margin-block-start: 9.722222vw; width: 40.833333vw; }

  /* ---------- 30.13 Rücknavigation ----------------------- */
  /* Rechtsbündiger Block, ein Ziel pro Zeile */

  .ruecknav {
    display: block;
    position: relative;
    height: auto;
    padding-inline: 0;
    margin-block-start: 22.222222vw;      /* 80 */
    border: 0;
  }
  .ruecknav::before, .ruecknav::after { display: none; }
  .ruecknav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 41.388889vw;              /* 149 */
    margin-inline-start: auto;
    margin-inline-end: 0;
    height: 11.111111vw;                   /* 40 */
    border-block-start: 1px solid var(--schwarz);
    font-size: var(--t-text);
  }
  .ruecknav a:last-of-type { border-block-end: 1px solid var(--schwarz); }
  .ruecknav svg { width: 5.5vw; }

  /* ---------- 30.14 Kontaktformular ---------------------- */

  .formular-bereich { grid-column: 1 / -1; }
  .formular {
    margin-block-start: 35.333333vw;       /* 127,2 */
    padding-inline: 3.472222vw;            /* 12,5 */
    padding-block: 10.555556vw 8.333333vw;
  }
  .formular__deko { display: none; }
  .formular__titel {
    font-size: var(--t-titel);
    line-height: var(--zab-titel);
    margin-block-end: 11.944444vw;         /* 43 */
  }
  .feld {
    height: 8.000000vw;                    /* Feldraster 47,7 */
    min-height: 0;
    margin-block-end: 0;
  }
  .feld--nachricht { height: 30.000000vw; margin-block-end: 2vw; }
  .formular__senden { margin-block-start: 11.111111vw; }
  .formular__senden .btn { width: 64.722222vw; }   /* 233 */
  .einwilligung { margin-block-start: 5.5vw; }

  /* ---------- 30.15 Vorstandskacheln --------------------- */

  .vorstand { margin-block-start: 22.222222vw; }
  .vorstand__titel { grid-column: 2 / 8; font-size: var(--t-titel); }
  .vorstand__gitter { margin-block-start: 8.333333vw; row-gap: 16.666667vw; }
  .vorstand__gitter .vk:nth-child(odd)  { grid-column: 2 / 5; }
  .vorstand__gitter .vk:nth-child(even) { grid-column: 5 / 8; }
  .vk__flaeche { height: auto; padding: 3.333333vw var(--gut) 5.555556vw; }
  .vk__name, .vk__rolle { font-size: var(--t-text); line-height: var(--zab-text); }

  /* ---------- 30.16 Fussbereich -------------------------
     Auch mobil knapp gehalten. Die drei Spalten stehen unter-
     einander, die Reihenfolge folgt dem Entwurf.             */

  .footer--knapp,
  .footer { margin-block-start: 22.222222vw; padding-block: 11.111111vw; }

  .footer__marke-sp, .footer__adresse, .footer__schluss { display: contents; }
  .footer__marke-sp > *, .footer__adresse > *, .footer__schluss > * {
    grid-column: 2 / 8;
  }
  .footer__marke       { order: 0; }
  .footer__slogan      { order: 1; }
  .footer__adresse > * { order: 2; }
  .footer__zwischen    { order: 3; margin-block-start: 8.333333vw !important; }
  .footer__social      { order: 4; }
  .footer__rechtliches { order: 5; margin-block-start: 8.333333vw; }
  .footer__copyright   { order: 6; }

  .footer__marke,
  .footer__slogan {
    font-size: var(--t-titel);
    line-height: var(--zab-titel);
  }
  .footer__rubrik:first-of-type { margin-block-start: 8.333333vw; }
  .footer__social { gap: 3.5vw; margin-block-start: 2.8vw; }
  .footer__social a { width: 9.166667vw; height: 9.166667vw; }

  /* ---------- 30.17 Rechtstexte, Kalender, Galerie ------- */

  .recht { padding-block: 22.222222vw 33.333333vw; }
  .recht__titel { font-size: var(--t-seitentitel); line-height: var(--zab-haupttitel); margin-block-end: 11.111111vw; }
  .recht__abschnitt { padding-inline-start: 13.888889vw; }
  .recht__nr { inset-inline-start: 0; }

  /* (alte Monatskachel-Regel entfernt – siehe 30.3b Kalenderkacheln) */
  .kalender__jahreszeit { font-size: var(--t-titel); }

  .galerie__bild--quer,
  .galerie__bild--quadrat,
  .galerie__bild--hoch { grid-column: 1 / -1; }

  /* ---------- 30.18 PDF-Viewer --------------------------- */

  .pdfbereich { margin-block-start: 22.222222vw; }
  .pdfbereich__titel, .pdf-viewer, .pdf-angaben, .ausgaben { grid-column: 1 / -1; }
  .ausgaben__umfang { margin-inline-start: 0; }
  .pdf-viewer__seite--rechts { display: none; }   /* Mobil zwingend Einzelseite */
  .pdf-angaben { flex-direction: column; gap: 2vw; }
  .pdf-viewer__steuerung button { min-width: 11vw; }

  /* ---------- 30.19 Sonstiges ---------------------------- */

  .seitentitel, .haupttitel { overflow-wrap: break-word; hyphens: auto; }
  .raster-zeigen::after { display: none; }
  .trapez-gelb {
    inset-block-start: 27.8vw;
    inset-inline-start: 8vw;
    width: 84vw;
    height: 65vw;
  }
}