/*
 * Struktur-Stylesheet — Afro Soleil FSE
 * ============================================================
 * Enthaelt Aufbau, Raster, Breakpoints und die gemessenen
 * Barrierefreiheits-Regeln des Vorgaenger-Themes, unveraendert
 * uebernommen, damit die geprueften Kontrast- und Klickziel-Werte
 * nicht neu erarbeitet werden muessen.
 *
 * WICHTIG: In dieser Datei steht KEIN Inhaltstext. Farben, Schriften
 * und Abstaende werden nicht mehr hier definiert, sondern in theme.json
 * — dadurch sind sie im Website-Editor sichtbar und aenderbar.
 *
 * Der folgende Block ist die Bruecke zwischen beiden Welten: Die
 * gewachsenen Variablennamen (--paper, --ink, …) zeigen jetzt auf die
 * theme.json-Werte. So bleiben die ~1900 nachfolgenden Regeln
 * unveraendert gueltig, ohne dass ihre gemessenen Kontrastwerte durch
 * ein manuelles Umschreiben verfaelscht werden koennten.
 * ============================================================ */
:root{
  /* Flaechen */
  --head:var(--wp--preset--color--head);
  --cta:var(--wp--preset--color--cta);
  --hero-dark:var(--wp--preset--color--hero-dark);
  --hero-top:var(--wp--preset--color--hero-top);
  --hero-mid:var(--wp--preset--color--hero-mid);
  --bench:var(--wp--preset--color--bench);
  --paper:var(--wp--preset--color--paper);
  --card:var(--wp--preset--color--card);
  --panel-top:var(--wp--preset--color--panel-top);
  --panel-bot:var(--wp--preset--color--panel-bot);
  --field:var(--wp--preset--color--field);
  --send:var(--wp--preset--color--send);
  --bottom:var(--wp--preset--color--bottom);
  --foot:var(--wp--preset--color--foot);
  /* Text */
  --nav:var(--wp--preset--color--nav);
  --eyebrow:var(--wp--preset--color--eyebrow);
  --h1a:var(--wp--preset--color--h1a);
  --h1b:var(--wp--preset--color--h1b);
  --lead:var(--wp--preset--color--lead);
  --ink:var(--wp--preset--color--ink);
  --accent:var(--wp--preset--color--accent);
  --card-title:var(--wp--preset--color--card-title);
  --panel-title:var(--wp--preset--color--panel-title);
  --panel-sub:var(--wp--preset--color--panel-sub);
  --braun-tief:var(--wp--preset--color--braun-tief);
  --text-braun:var(--wp--preset--color--text-braun);
  --terrakotta:var(--wp--preset--color--terrakotta);
  --creme-hell:var(--wp--preset--color--creme-hell);
  --gold-hell:var(--wp--preset--color--gold-hell);
  --cta-hover:var(--wp--preset--color--cta-hover);
  /* Raster */
  --frame:var(--wp--custom--raster--frame);
  --content:var(--wp--custom--raster--content);
  --rail:var(--wp--custom--raster--rail);
  /* Schriften */
  --f-display:var(--wp--preset--font-family--display);
  --f-text:var(--wp--preset--font-family--text);
  /* Typografie-Skala */
  --fs-xs:var(--wp--preset--font-size--xs);
  --fs-s:var(--wp--preset--font-size--s);
  --fs-m:var(--wp--preset--font-size--m);
  --fs-l:var(--wp--preset--font-size--l);
  --fs-xl:var(--wp--preset--font-size--xl);
  /* h1/h2 direkt statt ueber das Preset: WordPress verwirft Preset-
     Definitionen, deren Groesse selbst ein clamp() ist - die Variable kam
     leer an, die font-Kurzform wurde ungueltig und Schlagzeilen fielen
     auf 15px Barlow zurueck. Werte woertlich aus v33. */
  --fs-h2:clamp(20px,2vw,26px);
  --fs-h1:clamp(26px,3.2vw,42px);
  /* Abstands-Rhythmus */
  --sp-1:var(--wp--preset--spacing--10);
  --sp-2:var(--wp--preset--spacing--20);
  --sp-3:var(--wp--preset--spacing--30);
  --sp-4:var(--wp--preset--spacing--40);
  --sp-5:var(--wp--preset--spacing--50);
  --pad-band:var(--wp--custom--pad-band);
  /* Hero-Stimmung: Grundzustand ist Goldgelb (Nutzerentscheid 27.08.2026).
     Die Alternative "Sonnenuntergang" liegt als Stilvariante in styles/. */
  --hero-a:var(--wp--custom--hero--a);
  --hero-b:var(--wp--custom--hero--b);
  --hero-h1a:var(--wp--custom--hero--h1a);
  --hero-h1b:var(--wp--custom--hero--h1b);
  --hero-eye:var(--wp--custom--hero--eye);
  --hero-lead:var(--wp--custom--hero--lead);
  --hero-trust:var(--wp--custom--hero--trust);
}


/* ============================================================
   Gemessene Werte aus der Vorlage (mockup-spec.md)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:#0a0703;color:var(--ink);
  font:400 15px/1.5 var(--f-text);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Tastaturbedienung sichtbar machen */
:focus-visible{outline:3px solid #FFD470;outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:#000;padding:12px 18px;font-weight:700}
.skip:focus{left:8px;top:8px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Rahmen mit Ornamentleisten (Vorlage: x 0-56 und 1080-1135)
   ============================================================ */
.frame{max-width:var(--frame);margin:0 auto;position:relative;background:var(--foot)}
.frame::before,.frame::after{content:"";position:absolute;top:0;bottom:0;width:var(--rail);
  background-repeat:repeat-y;background-size:var(--rail) auto;z-index:2;pointer-events:none}
.frame::before{left:0;background-image:var(--orn-l)}
/* Rechtes Musterband ist das gespiegelte linke. Der urspruengliche rechte
   Ausschnitt war angeschnitten (55x132 statt 56x150), die Rauten liefen am
   Rand ins Leere und die schmale Zierleiste sass auf der falschen Seite. */
.frame::after{right:0;background-image:var(--orn-l);transform:scaleX(-1)}
.inner{margin:0 var(--rail)}

/* ============================================================
   Kopfleiste  (Vorlage y 0-48)
   ============================================================ */
.head{background:var(--head);min-height:48px;display:flex;align-items:center;gap:20px;padding:0 12px}
.brand img{height:36px;width:auto}
/* V16: zwei Listen nebeneinander - Hauptpunkte und, abgesetzt, das Rechtliche. */
.nav{margin-left:auto;display:flex;align-items:center;gap:20px}
/* V23: Sprachwahl als Flagge mit Ausklappmenue.
   Der Knopf zeigt die aktuelle Sprache, das Menue die uebrigen.
   position:relative auf dem Rahmen, damit die Liste darunter haengt. */
.sprachwahl{position:relative;padding-left:19px;
  border-left:1px solid rgba(219,207,171,.3)}
.nav .sprachwahl__knopf{display:inline-flex;align-items:center;gap:7px;
  min-height:30px;padding:4px 6px;background:none;border:0;cursor:pointer;
  color:#DBCFAB;font:700 10.5px/1 var(--f-display);letter-spacing:.08em}
.sprachwahl__knopf:hover,.sprachwahl__knopf:focus-visible{color:#fff}
.sprachwahl__knopf[aria-expanded="true"]{color:var(--gold-hell)}
.flagge{display:block;width:22px;height:14px;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.35);border-radius:1px}
.sprachwahl__pfeil{font-size:9px;line-height:1;transition:transform .18s ease}
@media (prefers-reduced-motion:reduce){ .sprachwahl__pfeil{transition:none} }
.sprachwahl__knopf[aria-expanded="true"] .sprachwahl__pfeil{transform:rotate(180deg)}

/* Mit .nav davor, weil ".nav ul" (0,2,1) sonst display:flex durchsetzt und
   die Liste waagerecht legt - gemessen 212x28 statt untereinander. */
.nav .sprachwahl__liste{display:block;position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:172px;margin:0;padding:5px;gap:0;list-style:none;
  background:var(--braun-tief);border:1px solid rgba(255,201,120,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.4)}
.sprachwahl__liste[hidden]{display:none}
.sprachwahl__liste li{border:0}
/* Wieder mit .nav davor: ".nav a" steht spaeter in der Datei und gewinnt
   bei gleicher Genauigkeit (0,1,1) - die Eintraege waren dadurch 26 statt
   38 px hoch und trugen die Grossbuchstaben der Hauptnavigation. */
.nav .sprachwahl__liste a{display:flex;align-items:center;gap:10px;
  min-height:38px;padding:8px 10px;text-decoration:none;
  font:400 13px/1.35 var(--f-text);letter-spacing:0;text-transform:none;
  color:var(--creme-hell)}
.nav .sprachwahl__liste a:hover,.nav .sprachwahl__liste a:focus-visible{
  background:rgba(255,201,120,.16);color:#fff}
.nav ul{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
/* Navigationsschrift: in V15 um rund ein Sechstel angehoben (9,5 -> 11 px und
   die beiden Breakpoints entsprechend). Der Platz dafuer entsteht dadurch, dass
   "Presse" aus dem Hauptmenue genommen wurde - die Seite bleibt ueber den
   Fussbereich und die Formationsseiten erreichbar. */
.nav a{font:600 11px/1 var(--f-display);letter-spacing:.085em;text-transform:uppercase;color:var(--nav);
  padding:6px 2px;display:inline-block}
.nav a:hover{color:#fff}
.nav .sub-menu{display:none}
.btn-cta{background:var(--cta);color:#FFE9D6;font:700 10px/1 var(--f-display);letter-spacing:.08em;
  text-transform:uppercase;padding:0 14px;border:0;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:var(--sp-1);min-height:30px}
.btn-cta:hover{background:var(--cta-hover)}
.burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--nav);
  color:var(--nav);min-width:44px;min-height:44px;font-size:18px;cursor:pointer}

/* ============================================================
   Hero  (Vorlage y 48-305) - Foto rechts, Vignette links per Verlauf
   ============================================================ */
.hero{position:relative;min-height:320px;display:flex;align-items:center;
  background:var(--hero-dark);overflow:visible}
.hero__photo{position:absolute;inset:0 0 0 auto;width:66%;height:100%;object-fit:cover;
  object-position:left center;
  /* Linke Fotokante weich ausblenden - sonst harter Schnitt zur Textseite */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 9%,rgba(0,0,0,.85) 20%,#000 32%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 9%,rgba(0,0,0,.85) 20%,#000 32%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--hero-dark) 0%,rgba(43,30,13,.92) 24%,
             rgba(43,30,13,.55) 38%,rgba(70,40,15,.18) 52%,rgba(70,40,15,0) 64%)}
:root{--hero-einzug:39px}
.hero__in{position:relative;z-index:1;padding:28px 20px 10px 39px;max-width:442px}
.eyebrow{margin:0 0 11px;font:700 15px/1 var(--f-display);letter-spacing:.2em;
  text-transform:uppercase;color:var(--eyebrow)}
.hero h1{margin:0;font:700 41px/1.024 var(--f-display);letter-spacing:-.01em;text-transform:uppercase}
.hero h1 .a{color:var(--h1a);display:block}
.hero h1 .b{color:var(--h1b);display:block}
.hero__lead{margin:0 0 2px;max-width:378px;font:500 14px/1.35 var(--f-text);color:var(--lead)}
.btnrow{display:flex;flex-wrap:wrap;gap:19px}
.btn{display:inline-flex;align-items:center;gap:var(--sp-1);font:700 10px/1 var(--f-display);
  letter-spacing:.08em;text-transform:uppercase;padding:0 9px;min-height:32px;
  border:0;cursor:pointer}
/* Vorlage: 32px hohe Buttons. Auf Touch-Geraeten auf 44px angehoben (WCAG 2.5.8). */
@media (pointer:coarse){.btn,.btn-cta,.more{min-height:44px}}
.btn--fill{background:var(--cta);color:#FFE3CE}
.btn--fill:hover{background:var(--cta-hover)}
.btn--ghost{background:transparent;color:#D8C089;border:1px solid #8A6A2C}
.btn--ghost:hover{border-color:#D8C089;color:#F0DCA8}
.trust{display:flex;align-items:center;gap:11px;margin-top:4px;color:#C0A76B;
  font:500 11px/1.35 var(--f-text)}

/* ============================================================
   Vorteilsleiste  (Vorlage y 305-348)
   ============================================================ */
.bench{background:var(--bench);display:grid;grid-template-columns:repeat(4,1fr)}
.bench div{padding:6px 11px;border-right:1px solid rgba(70,35,9,.28);
  display:flex;flex-direction:column;justify-content:center;min-height:43px}
.bench div:last-child{border-right:0}
.bench b{display:block;font:700 11px/1.2 var(--f-text);color:var(--ink)}
.bench span{display:block;font:400 9.5px/1.25 var(--f-text);color:#5A3A16}

/* ============================================================
   Hauptbereich: linke Spalte 751px + Booking 255px (Vorlage x 56/807/825/1080)
   ============================================================ */
.main{display:grid;grid-template-columns:minmax(0,751fr) minmax(0,255fr);
  gap:18px;background:var(--paper);align-items:start}
.col-l{padding:0}
.sec-head{padding:8px 10px 0}
/* Hierarchie-Fix (Audit): H2 war mit 15,5px kleiner als die H3-Kartentitel
   (17,5px) - die Sektionsueberschrift liegt jetzt eine Stufe darueber. */
.sec-head h2{margin:0;font:700 18px/1 var(--f-display);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.sec-head p{margin:4px 0 0;font:400 11px/1.3 var(--f-text);color:#2A1A08}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:9px 10px 0}
.card{background:var(--card);border:1px solid #C08442;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:336/220;height:auto;object-fit:cover}
.card__b{padding:6px 9px 8px;display:flex;flex-direction:column;flex:1;gap:4px}
.card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-1)}
.card h3{margin:0;font:700 17.5px/.95 var(--f-display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--card-title);text-wrap:balance}
.card__sub{font:600 9px/1.15 var(--f-text);color:#4A2A0C;margin:2px 0 0}
.card p{margin:0;font:400 9.5px/1.3 var(--f-text);color:var(--text-braun);flex:1}
.card__meta{margin:0;padding:0;list-style:none;text-align:right;
  font:400 7.5px/1.4 var(--f-text);color:#5A3A16;max-width:96px}
.more{font:700 8.5px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;
  color:var(--terrakotta);border:1px solid #B98040;padding:0 9px;align-self:flex-start;
  display:inline-flex;gap:6px;min-height:24px;align-items:center} /* 22->24px: WCAG 2.5.8 */
.more:hover{background:var(--terrakotta);color:#FFEBD2}

/* Info-Zeile (Vorlage y 549-656; seit Auslagerung des Workshop-Bands einspaltig) */
.inforow{display:grid;grid-template-columns:1fr;gap:12px;margin:10px 10px 12px}
.box{border:1px solid #B4783A;padding:8px 10px}
.box h2{margin:0 0 8px;font:700 13px/1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.box ul{margin:0;padding:0;list-style:none;columns:2;font:400 9.5px/1.6 var(--f-text);color:var(--text-braun)}
.box li::before{content:"✦";color:#A8340F;margin-right:5px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.thumb{position:relative;display:block}
.thumb img{width:100%;height:150px;object-fit:cover}
.thumb::after{content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:15px;text-shadow:0 1px 6px #000}
.thumb span{display:block;font:400 10px/1.3 var(--f-text);color:var(--text-braun);margin-top:5px}
.box--ws{position:relative;overflow:hidden;color:#F2DDB0;border-color:#7A4A1C}
.box--ws img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.box--ws::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2A1508 0%,rgba(42,21,8,.82) 62%,rgba(42,21,8,.35) 100%)}
.box--ws > *{position:relative;z-index:1}
.box--ws h2{color:#F0C063}
.box--ws p{margin:0 0 7px;font:400 9.5px/1.4 var(--f-text)}
.box--ws .more{color:#F0C063;border-color:#A5722E}
.box--ws .more:hover{background:#F0C063;color:#2A1508}

/* Booking-Panel (Vorlage x 825-1080, Verlauf #470C01 -> #340A01) */
/* align-self:start statt stretch: das Panel richtet sich nach seinem
   eigenen Inhalt. Vorher wuchs es auf die Hoehe der linken Spalte -
   seit dort der Kuenstlerbereich steht, war das Nachrichtenfeld
   801 px hoch und das Panel 1332 px. */
.book{background:linear-gradient(180deg,var(--panel-top) 0%,var(--panel-bot) 100%);
  color:#F3D9A8;padding:14px 14px 16px;align-self:start;
  display:flex;flex-direction:column}
.book h2{margin:0;font:700 18.5px/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;color:var(--panel-title)}
.book > p{margin:5px 0 12px;font:400 11px/1.35 var(--f-text);color:var(--panel-sub)}
/* Formular kompakt (konsolidiert: fruehere Basis- und "kompakter"-Werte
   zusammengefuehrt, es gelten die zuletzt gueltigen Masse).
   Zeilen des Anfrageformulars (2-spaltig):
   1 Pflichtfeld-Legende | 2 Name/E-Mail | 3 Eventart/Datum | 4 Ort
   5 Nachricht (waechst) | 6 Absenden | 7 Datenschutzhinweis
   Die Statusmeldung wird per order ans Formularende sortiert (s. u.) und
   belegt eine implizite Zeile NACH dem Raster - sie verschiebt die
   1fr-Nachrichtenzeile nicht mehr, egal ob sie erscheint oder nicht. */
.book form{display:grid;grid-template-columns:1fr 1fr;gap:6px 9px;flex:0 0 auto;
  align-content:stretch;grid-template-rows:repeat(4,min-content) 1fr min-content min-content}
.book form p{margin:0}
.book label{display:block;margin-bottom:2px;font:700 9px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#E8BE7F}
.book .wide{grid-column:1/-1}
.book input,.book select,.book textarea{width:100%;margin-top:4px;border:0;background:var(--field);
  color:#33200A;font:400 12px/1.3 var(--f-text);padding:6px 9px;min-height:32px}
.book textarea{resize:vertical;min-height:46px}
.book button{grid-column:1/-1;background:var(--send);color:#fff;border:0;cursor:pointer;
  font:700 12px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;
  padding:11px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.book button:hover{background:#E06D08}
/* Kontrast-Fix (Audit): #C9A06A war 3,87:1 gegen das obere Verlaufsende
   #7E2C0F -> #E8C79A = 5,80:1 (gegen #601E09: 7,75:1) */
/* order: Die Statusmeldung steht im Markup VOR den Feldern und schob dort
   eine Zeile ein - dann bekam "Ort" das 1fr statt der Nachricht. Per order
   rueckt sie ans Ende (nach den Absenden-Knopf, vor den Hinweis) in eine
   implizite Zeile hinter dem Raster; die Zeilenzaehlung der Vorlage bleibt
   dadurch in jedem Zustand gueltig. */
.book .note{grid-column:1/-1;order:2;margin:2px 0 0;font:400 9px/1.35 var(--f-text);color:#E8C79A}
.book .msg{grid-column:1/-1;order:1;margin:0;padding:8px 10px;font:600 11px/1.4 var(--f-text)}
.book .msg--ok{background:#1F4D18;color:#D6F5CC}
.book .msg--err{background:#5A1508;color:#FFD9CC}

/* Untere Zeile (Vorlage y 656-739) */
.strip{display:grid;grid-template-columns:64px 1fr 1fr 194px;background:var(--bottom);color:#EBD3A4}
.strip img{width:100%;height:100%;object-fit:cover}
.quote{padding:12px 14px;border-right:1px solid rgba(229,165,27,.22)}
.quote h2{margin:0 0 6px;font:700 13px/1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:#F0C063}
.quote blockquote{margin:0;font:italic 400 11px/1.45 Georgia,serif;color:#E4CB9A}
/* Kontrast-Fix (Audit): #C69C5C war 3,94:1 auf #6E3113 -> #D4A868 = 4,55:1 */
.quote cite{display:block;margin-top:5px;font:600 10px/1 var(--f-text);font-style:normal;color:#D4A868}
.promise{padding:12px 14px}
.promise h2{margin:0 0 9px;font:700 13.5px/1 var(--f-display);letter-spacing:.07em;
  text-transform:uppercase;color:#F0C063;text-align:center}
.promise ul{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:0;padding:0;list-style:none}
.promise li{font:400 9.5px/1.35 var(--f-text);border-left:1px solid rgba(229,165,27,.35);padding:3px 7px}

/* Footer (Vorlage y 739-833). Konsolidiert: Social-Icons einmal (38px,
   SVG statt Textzeichen), Emblem 96px - die Grid-Spalte ist passend
   verbreitert, damit das Emblem nicht mehr ueber seine Spur ragt. */
.foot{background:var(--foot);color:#EBCF9A;display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr 96px;gap:18px;padding:16px 14px;align-items:start}
.foot img.logo{height:38px;width:auto}
.foot h2{margin:0 0 7px;font:700 12px/1 var(--f-display);letter-spacing:.06em;
  text-transform:uppercase;color:#E0A93C}
.foot a,.foot p{font:400 11px/1.7 var(--f-text);margin:0}
.foot ul{margin:0;padding:0;list-style:none;columns:2}
.foot .social{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.foot .social a{display:grid;place-items:center;width:38px;height:38px;min-height:38px;
  border:1px solid #B98634;border-radius:50%;color:#E9C177;font-size:13px}
.foot .social a:hover{background:#E9C177;color:#121006}
.foot .social svg{display:block}
.foot .emblem{width:96px;height:auto;justify-self:end}
/* Kontrast-Fix (Audit): #8A6C3C war 4,11:1 auf #0A0703 -> #9A7A45 = 5,02:1 */
/* V18: Copyright-Zeile traegt jetzt die Rechtsverweise. Schrift von 10,5 auf
   12 px angehoben und die Links deutlich heller (13,3:1 statt 5,0:1) - sie
   sind eine Pflichtangabe und keine Fussnote. */
.copy{background:#0A0703;color:#B08A4E;padding:11px 16px;
  font:400 12px/1.4 var(--f-text);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 20px}
.copy p{margin:0}
.copy__recht{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;padding:0;list-style:none}
.copy__recht a{display:inline-flex;align-items:center;min-height:26px;
  color:#EBCF9A;text-decoration:underline;text-underline-offset:3px;font-size:12.5px}
.copy__recht a:hover,.copy__recht a:focus-visible{color:#fff}

/* ============================================================
   Unterseiten
   ============================================================ */
/* .page-head und .crumbs entfernt (Audit): kein Markup mehr - Seitenkopf ist
   jetzt .seitenkopf, Breadcrumbs werden nicht ausgegeben. */

.page-wrap{background:var(--paper);padding:clamp(22px,3.5vw,40px) var(--pad-band)}
.page-body{max-width:74ch;margin:0 auto;background:#FFF7E7;border:1px solid #DFB477;
  padding:clamp(20px,3vw,36px) clamp(18px,3vw,40px)}
/* Erster Absatz als Anleser (Typo-Skala: --fs-*) */
.page-body > p:first-of-type{font:500 var(--fs-l)/1.6 var(--f-text);color:var(--text-braun)}
.page-body h2{margin:30px 0 12px;font:700 var(--fs-h2)/1.15 var(--f-display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--accent);padding-bottom:7px;border-bottom:2px solid #E3B778}
.page-body h2:first-child{margin-top:0}
.page-body h3{margin:22px 0 8px;font:700 var(--fs-l)/1.25 var(--f-display);letter-spacing:.03em;
  text-transform:uppercase;color:#8A4410}
.page-body p,.page-body li{font:400 var(--fs-m)/1.7 var(--f-text);color:var(--braun-tief)}
.page-body ul{list-style:none;padding:0;margin:12px 0}
.page-body ul li{position:relative;padding-left:22px;margin:5px 0}
.page-body ul li::before{content:"✦";position:absolute;left:0;top:0;color:#A8340F}
.page-body ol{padding-left:22px;margin:12px 0}
.page-body ol li{margin:5px 0}
.page-body a{color:#93300E;text-decoration:underline;text-underline-offset:2px}
.page-body a:hover{color:#5E1D08}
.page-body strong{color:#4A1F06}
.page-body blockquote{margin:18px 0;padding:14px 18px;background:#F7E3BE;border-left:4px solid #B9702A;
  font:italic 400 15px/1.6 Georgia,serif;color:#4A2A0C}
.page-body img{margin:16px 0;border:1px solid #DFB477}
.page-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.page-body th,.page-body td{border:1px solid #DFB477;padding:8px 10px;text-align:left}
.page-body th{background:#F2D6A8;font-weight:700}
.page-body hr{border:0;border-top:1px solid #DFB477;margin:26px 0}

/* Weiterlesen */
.weiter{max-width:74ch;margin:22px auto 0}
.weiter h2{margin:0 0 10px;font:700 14px/1 var(--f-display);letter-spacing:.09em;
  text-transform:uppercase;color:#7A3A12}
.weiter ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none}
.weiter a{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-1);
  background:#FFF7E7;border:1px solid #DFB477;padding:12px 14px;min-height:48px;
  font:700 12px/1.25 var(--f-text);color:#5E2A0C}
.weiter a:hover{background:#8A2008;color:#FFEFD8;border-color:#8A2008}

/* Abschluss-Aufruf */
.page-cta{background:linear-gradient(100deg,#3B2711 0%,#6E3113 100%);color:#F4DDB2;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:24px var(--pad-band)}
.page-cta .eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.16em;color:var(--gold-hell)}
.page-cta h2{margin:0 0 6px;font:700 clamp(20px,2.4vw,28px)/1.1 var(--f-display);
  text-transform:uppercase;color:var(--creme-hell)}
.page-cta p{margin:0;font:400 14px/1.5 var(--f-text);max-width:52ch}
.page-cta__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.page-cta__tel{font:700 15px/1 var(--f-text);color:var(--gold-hell);border-bottom:1px solid rgba(240,188,114,.5);
  min-height:24px;display:inline-flex;align-items:center} /* 2.5.8 Zielgroesse */
.page-cta__tel:hover{color:var(--creme-hell)}
@media (max-width:700px){
  .weiter ul{grid-template-columns:1fr}
  .page-cta{flex-direction:column;align-items:flex-start}
  .page-body > p:first-of-type{font-size:16px}
}

/* ============================================================
   Responsiv - unterhalb der Entwurfsbreite bricht das Layout um
   ============================================================ */
@media (max-width:1134px){
  .frame::before,.frame::after{display:none}
  .inner{margin:0}
}
@media (max-width:1000px){
  .main{grid-template-columns:1fr;gap:0}
  .col-l{padding:16px 14px}
  .book{padding:18px 14px 22px}
  .hero__photo{width:52%}
  .hero h1{font-size:38px}
  .strip{grid-template-columns:1fr 1fr}
  .strip img{display:none}
  .foot{grid-template-columns:repeat(3,1fr)}
  .foot .emblem{display:none}
}
@media (max-width:820px){
  .burger{display:inline-block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--head);display:none;
    padding:8px 14px 14px;z-index:20;margin:0}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav li{border-top:1px solid rgba(219,207,171,.18)}
  .nav a{display:block;padding:13px 2px;font-size:14.5px;min-height:44px}
  /* V16: im aufgeklappten Menue steht das Rechtliche untereinander am Ende,
     mit voller Klickflaeche - der seitliche Trennstrich ergibt hier keinen Sinn. */
  /* Im aufgeklappten Menue gibt es kein "darunter schweben": die Sprachen
     stehen einfach als weitere Zeilen darin. */
  .sprachwahl{padding-left:0;border-left:0;border-top:1px solid rgba(219,207,171,.18)}
  /* .nav davor, sonst gewinnt die Grundregel (0,2,1) und der Knopf bleibt
     30 px hoch, waehrend alle anderen Menuepunkte 44 px haben. */
  .nav .sprachwahl__knopf{width:100%;justify-content:flex-start;min-height:44px;
    padding:12px 2px;font-size:12.5px}
  .nav .sprachwahl__liste{position:static;top:auto;right:auto;min-width:0;padding:0;
    background:none;border:0;box-shadow:none}
  .nav .sprachwahl__liste a{min-height:44px;padding:11px 2px 11px 10px}
  .head{position:relative;flex-wrap:wrap;padding:8px 14px}
  .btn-cta{order:2}
  .bench{grid-template-columns:repeat(2,1fr)}
  /* Mobil: Foto oben als eigener Streifen, Text darunter.
     Vorher stand der Text ueber einer leeren Farbflaeche und das Foto
     wirkte abgetrennt darunter. */
  .hero{min-height:auto;flex-direction:column;display:flex}
  .hero__photo{position:relative;inset:auto;width:100%;height:230px;
    object-fit:cover;object-position:center 28%;
    -webkit-mask-image:none;mask-image:none}
  .hero::after{display:none}
  :root{--hero-einzug:16px}
  .hero__in{max-width:none;padding:20px 16px 24px;width:100%}
  .hero h1{font-size:34px}
  .hero__lead{max-width:none}
  /* Badge: siehe konsolidierte 820px-Regel beim Basisblock des Siegels */
  /* Buttons kompakt nebeneinander statt breit gestapelt */
  .btnrow{gap:9px}
  .btn{padding:0 13px;font-size:11px;min-height:44px;flex:0 1 auto}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .bench{grid-template-columns:1fr}
  .book form{grid-template-columns:1fr}
  .book .wide{grid-column:auto}
  .strip{grid-template-columns:1fr}
  .promise ul{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .foot ul{columns:1}
  .hero h1{font-size:29px}
  .page-wrap{padding:26px 16px}
  .page-wrap h1{font-size:28px}
}

/* ============================================================
   Mobil: Lesbarkeit und Klickziele haben Vorrang vor der
   Entwurfsgroesse. Unterhalb 820px sind alle Bedienelemente
   mindestens 44px hoch (WCAG 2.5.8) und Fliesstext >= 14px.
   ============================================================ */
@media (max-width:820px){
  .btn,.btn-cta,.more,.book button,.nav a{min-height:44px}
  .more{padding:0 14px;font-size:11px}
  .btn,.btn-cta{padding:0 16px;font-size:12px}
  .card p{font-size:14px;line-height:1.45}
  .card h3{font-size:22px}
  .card__sub{font-size:12px}
  .card__meta{font-size:11px;max-width:none;text-align:left}
  .card__top{flex-direction:column;gap:2px}
  .bench b{font-size:14px}
  .bench span{font-size:12px}
  .bench div{padding:11px 14px;min-height:auto}
  .box ul{font-size:13px;line-height:1.9}
  .box h2,.quote h2,.promise h2{font-size:16px}
  .box--ws p{font-size:13px}
  .sec-head h2{font-size:23px}
  .sec-head p{font-size:14px}
  .thumb span{font-size:11px}
  .thumb img{height:70px}
  .promise li{font-size:12px}
  .foot a,.foot p{font-size:14px}
  .book label{font-size:11px}
  .book input,.book select,.book textarea{font-size:16px;min-height:44px}
  .book button{min-height:48px}
  .card img{aspect-ratio:16/10}
}


/* ============================================================
   Desktop-Staffelung
   Die Vorlage ist 1135px breit; 1:1 uebernommen wirkt sie auf
   heutigen Monitoren gestaucht (Navigation 9,5px, Buttons 10px).
   Ab 1200px waechst der Rahmen und die Typografie proportional
   mit - die Proportionen des Entwurfs bleiben dabei erhalten.
   ============================================================ */
@media (min-width:1200px){
  :root{--rail:63px}
  .head{min-height:54px;gap:24px;padding:0 16px}
  .brand img{height:41px}
  .nav ul{gap:29px}
  .nav a{font-size:12.3px}
  .btn-cta{font-size:11.3px;min-height:34px;padding:0 16px}
  .hero{min-height:400px}
  :root{--hero-einzug:44px}
  .hero__in{padding:32px 22px 12px 44px;max-width:498px}
  .eyebrow{font-size:16.9px;margin-bottom:12px}
  .hero h1{font-size:46px}
  .hero__lead{font-size:15.8px;max-width:426px}
  .btn{font-size:11.3px;min-height:36px;padding:0 11px}
  .trust{font-size:12.4px}
  .bench div{min-height:48px;padding:7px 13px}
  .bench b{font-size:12.4px} .bench span{font-size:10.7px}
  .sec-head{padding:10px 12px 0}
  .sec-head h2{font-size:20.5px} .sec-head p{font-size:12.4px}
  .cards{gap:var(--sp-2);margin:11px 12px 0}
  .card img{aspect-ratio:336/220}
  .card__b{padding:8px 11px 10px}
  .card h3{font-size:19.7px} .card__sub{font-size:10.2px}
  .card p{font-size:10.7px} .card__meta{font-size:8.5px;max-width:108px}
  .more{font-size:9.6px;min-height:25px;padding:0 11px}
  .inforow{gap:var(--sp-2);margin:12px 12px 14px}
  .box{padding:10px 12px}
  .box h2{font-size:14.7px} .box ul{font-size:10.7px}
  .thumb img{height:178px} .thumb span{font-size:11px}
  .box--ws p{font-size:10.7px}
  .book{padding:16px 16px 18px}
  .book h2{font-size:20.9px} .book > p{font-size:12.4px}
  .book label{font-size:10.2px}
  .book input,.book select,.book textarea{font-size:13.5px}
  .book input,.book select{min-height:34px;padding:7px 10px}
  .book textarea{min-height:52px}
  .book button{font-size:13.5px;min-height:42px}
  .quote{padding:14px 16px} .quote h2{font-size:14.7px}
  .quote blockquote{font-size:12.4px} .quote cite{font-size:11.3px}
  .promise{padding:14px 16px} .promise h2{font-size:15.2px}
  .promise li{font-size:10.7px}
  .foot{padding:18px 16px;gap:20px;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr 112px}
  .foot .emblem{width:112px}
  .foot h2{font-size:13.5px} .foot a,.foot p{font-size:12.4px}
  .copy{font-size:11.8px}
}
@media (min-width:1400px){
  :root{--rail:68px}
  .head{min-height:61px} .brand img{height:46px}
  .nav a{font-size:13.5px} .nav ul{gap:33px}
  .btn-cta{font-size:12.7px;min-height:38px;padding:0 18px}
  .hero{min-height:460px}
  :root{--hero-einzug:50px}
  .hero__in{padding:36px 24px 14px 50px;max-width:560px}
  .eyebrow{font-size:19px} .hero h1{font-size:52px}
  .hero__lead{font-size:17.8px;max-width:480px}
  .btn{font-size:12.7px;min-height:40px;padding:0 13px}
  .trust{font-size:14px}  .bench div{min-height:54px} .bench b{font-size:14px} .bench span{font-size:12px}
  .sec-head h2{font-size:23px} .sec-head p{font-size:14px}
  .card img{aspect-ratio:336/220}
  .card h3{font-size:22.2px} .card__sub{font-size:11.5px}
  .card p{font-size:12px} .card__meta{font-size:9.5px;max-width:122px}
  .more{font-size:10.8px;min-height:28px}
  .box h2{font-size:16.5px} .box ul{font-size:12px}
  .thumb img{height:205px}
  .box--ws p{font-size:12px}
  .book h2{font-size:23.5px} .book > p{font-size:14px}
  .book label{font-size:11.5px}
  .book input,.book select,.book textarea{font-size:15px}
  .book input,.book select{min-height:37px}
  .book textarea{min-height:58px}
  .book button{font-size:15px;min-height:46px}
  .quote h2{font-size:16.5px} .quote blockquote{font-size:14px}
  .promise h2{font-size:17px} .promise li{font-size:12px}
  .foot h2{font-size:15px} .foot a,.foot p{font-size:14px}
}
@media (min-width:1650px){
  :root{--rail:73px}
}
@media (min-width:1900px){
  :root{--rail:79px}
}

/* (Der fruehere "Anfrageformular kompakter"-Fixblock ist in die
   Basisdefinitionen und die Desktop-Staffelung eingearbeitet.) */

/* ============================================================
   Randlos ab Desktop-Breite
   Die Ornamentleisten der Vorlage sitzen am Seitenrand, nicht um
   einen zentrierten Kasten herum. Ab 1200px fuellt der Rahmen
   deshalb die volle Fensterbreite; erst jenseits 2000px wird
   begrenzt, damit Textzeilen nicht unlesbar lang werden.
   ============================================================ */
@media (min-width:1200px){
  :root{--frame:100%}
  .frame{max-width:2000px}
}

/* "100 % Live"-Siegel: ragt bewusst ueber die Herokante, damit es nicht
   angeschnitten wirkt. Freigestellt als Kreis mit Alphakanal. */
.hero__badge{position:absolute;right:3%;bottom:-34px;width:104px;height:auto;z-index:6;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
@media (min-width:1200px){.hero__badge{width:118px;bottom:-38px}}
@media (min-width:1400px){.hero__badge{width:132px;bottom:-42px}}
/* Mobil sitzt das Siegel an der Fotounterkante, nicht in der Leiste darunter.
   (Konsolidiert: vorher zwei widerspruechliche 820px-Bloecke, in denen top
   UND bottom gleichzeitig gesetzt waren; massgeblich ist top + 82px.) */
@media (max-width:820px){.hero__badge{width:82px;right:14px;bottom:auto;top:186px}}

/* Hero hoeher als in der Vorlage (dort 257px): sonst schneidet object-fit
   das Foto stark an. Hoehen so gewaehlt, dass kaum noch Bild verlorengeht. */
@media (min-width:1650px){ .hero{min-height:500px} }
@media (min-width:1900px){ .hero{min-height:540px} }

/* ============================================================
   Hero-Stimmungen. Alle fuenf Saetze sind kontrastgeprueft
   (H1 >= 3:1, Fliesstext >= 4.5:1). Umschaltbar im Customizer.
   Hinweis: Sobald der Grund orange ist, kann die orange
   Akzentzeile der Vorlage nicht bleiben - sie wird zu Gold.
   ============================================================ */
/* Trust-Punkte drehen mit der Stimmung mit (vorher fest verdrahtete
   Mockup-Farben #C79A3C/#4A2A0C, die nur zur dunklen Vorlage passten) */


/* Fotokante an den helleren Grund anpassen: frueher und weicher einblenden */

/* Goldgelb: heller Grund, deshalb dunkle Schrift statt heller.
   Alle Werte gegen #D8891F geprueft (H1 6.17/3.28, Text 5.05-6.17). */
.hero .btn--ghost:hover{background:#431904;color:#FFE9C4;border-color:#431904}
.hero .btn--fill{background:#8A2008;color:#FFF0DC}
.hero .btn--fill:hover{background:#A02A0C}
.hero__badge{filter:drop-shadow(0 6px 18px rgba(80,35,5,.45))}
.hero__photo{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 14%,rgba(0,0,0,.78) 30%,#000 44%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 14%,rgba(0,0,0,.78) 30%,#000 44%)}

/* Sehr schmale Geraete: Buttons duerfen umbrechen, bleiben aber schmal */
@media (max-width:420px){
  .hero__photo{height:200px}
  .hero__badge{width:68px;top:158px;right:12px}
  .hero h1{font-size:29px}
  .btn{width:100%;justify-content:flex-start}
}

/* Portraet-Hero (hero-hif.jpg, 1942x809, Verhaeltnis 2.40).
   Gesicht liegt mittig, deshalb Bildausschnitt leicht nach rechts geschoben,
   damit es nicht in die linke Ausblendung faellt. */
.hero__photo{object-position:58% center}
@media (max-width:820px){ .hero__photo{object-position:center 42%} }

/* Logo aus dem Customizer darf hoeher sein, bleibt aber in der Kopfleiste */
.brand-logo{height:36px;width:auto;max-width:220px;object-fit:contain}
@media (min-width:1200px){.brand-logo{height:41px}}
@media (min-width:1400px){.brand-logo{height:46px}}
.foot .brand-logo{height:38px;max-width:200px}

/* ============================================================
   Workshops als eigenes Band (Abweichung vom Entwurf: dort nur
   eine kleine Kachel in der Info-Zeile, die visuell unterging).
   Konsolidiert: die drei historischen Schichten (Grundband,
   volle Breite, Lesbarkeits-Abdunklung) sind hier zu EINER
   Fassung zusammengefuehrt; es gelten die zuletzt gueltigen
   Werte (Textseite #33200C, Schrift aufgehellt, 10,3-13,9:1).
   ============================================================ */
.ws{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  margin:0;background:linear-gradient(100deg,#3B2711 0%,#6E3113 100%);
  color:#F4DDB2;border-top:1px solid #8A4A1E;border-bottom:1px solid #8A4A1E;
  overflow:hidden}
.ws__media{position:relative;min-height:240px}
.ws__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ws__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(51,32,12,0) 45%,rgba(51,32,12,.72) 78%,var(--braun-tief) 100%)}
.ws__body{padding:18px 20px 20px;background:var(--braun-tief);position:relative;z-index:1}
.ws__body .eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.17em}
.ws__body h2{margin:0 0 8px;font:700 clamp(20px,2.2vw,27px)/1.08 var(--f-display);
  letter-spacing:.01em;text-transform:uppercase;color:var(--creme-hell);max-width:28ch}
.ws__lead{margin:0 0 12px;font:400 14px/1.55 var(--f-text);color:#FBEBD0;max-width:60ch}
.ws__list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1) 16px;
  margin:0 0 14px;padding:0;list-style:none}
.ws__list li{position:relative;padding-left:18px;font:400 12px/1.4 var(--f-text);color:#EBD4AC}
.ws__list li::before{content:"✦";position:absolute;left:0;top:1px;color:var(--gold-hell)}
.ws__list b{display:block;font:700 13px/1.3 var(--f-text);color:#FFF1D8}
.ws__list span{color:#EBD4AC}

@media (min-width:1200px){
  .ws{grid-template-columns:minmax(0,44%) minmax(0,1fr)}
  .ws__media{min-height:280px}
  .ws__body{padding:26px 30px}
  .ws__lead{font-size:15px}
  .ws__list li{font-size:12.5px}
  .ws__list b{font-size:13.5px}
}
@media (min-width:1400px){ .ws__media{min-height:320px} }
@media (max-width:1100px){ .ws__list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  .ws{grid-template-columns:1fr}
  .ws__media{min-height:180px}
  .ws__list{grid-template-columns:1fr}
  .ws__lead{font-size:15px}
  .ws__list li{font-size:14px}
  .ws__list b{font-size:15px}
}

/* Workshop-Band gegen die Hero-Variantenfarben absichern.
   Die Variantenregeln faerben Kleinzeile und Outline-Button global ein;
   hier gewinnt bewusst die hoehere Spezifitaet (drei Klassen). */
.ws .ws__body .eyebrow{color:var(--gold-hell)}
.ws .btnrow .btn--ghost{color:#FFD79A;border-color:rgba(255,215,154,.6);background:transparent}
.ws .btnrow .btn--ghost:hover{background:#FFD79A;color:var(--braun-tief);border-color:#FFD79A}
.ws .btnrow .btn--fill{background:#B93607;color:#FFF0E2}
.ws .btnrow .btn--fill:hover{background:var(--cta-hover)}

/* ------------------------------------------------------------
   Anfragebereich: Formular endet auf Kartenhoehe, darunter fuellt
   "Fuer welche Events?" die freie dunkle Flaeche. Media nutzt
   dadurch die volle Breite der linken Spalte.
   (.book selbst ist im Basisblock bereits flex-Spalte.)
   ------------------------------------------------------------ */
.book__events{margin-top:14px;padding-top:16px;border-top:1px solid rgba(255,201,120,.28)}
.book__events h3{margin:0 0 9px;font:700 14px/1 var(--f-display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-hell)}
.book__events ul{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;
  margin:0;padding:0;list-style:none}
.book__events li{position:relative;padding-left:16px;font:400 12px/1.45 var(--f-text);color:#F7E3C0}
.book__events li::before{content:"✦";position:absolute;left:0;top:0;color:var(--gold-hell)}

/* Media ueber die volle Spaltenbreite */
.inforow .box#media{padding:12px 14px}
@media (min-width:1200px){ .book__events li{font-size:12.5px} }
@media (max-width:1000px){ .book__events{margin-top:20px} }
@media (max-width:760px){
  .thumbs{grid-template-columns:1fr}
  .thumb img{height:170px}
  .book__events ul{grid-template-columns:1fr}
  .book__events li{font-size:14px}
}

/* ------------------------------------------------------------
   Anfrageformular: Das Nachrichtenfeld waechst in die freie Flaeche,
   statt eine Luecke ueber "Fuer welche Events?" stehen zu lassen.
   Das Formular selbst dehnt sich (flex/Zeilenraster: siehe Basisblock),
   die Textarea-Zeile nimmt den Rest.
   ------------------------------------------------------------ */
.book form .msg-field{display:flex;flex-direction:column;min-height:0}
/* Feste, ruhige Hoehe statt Mitwachsen. rows=3 im HTML und 801 px am
   Bildschirm passten nicht zusammen. */
.book form .msg-field textarea{flex:0 0 auto;min-height:104px;height:104px;max-height:200px}
@media (min-width:1200px){ .book form .msg-field textarea{min-height:120px;height:120px} }
@media (min-width:1400px){ .book form .msg-field textarea{min-height:136px;height:136px} }
@media (max-width:1000px){
  .book form{flex:0 0 auto;align-content:start;grid-template-rows:none}
  .book form .msg-field textarea{min-height:110px;height:auto}
}

/* Zwei-Klick-Video: lokale Vorschauflaeche, kein Kontakt zu YouTube vor dem Klick */
.ytfacade{margin:0;aspect-ratio:16/9;background:linear-gradient(135deg,#3B2711,#6E3113);
  border:1px solid #8A4A1E;position:relative;overflow:hidden}
.ytfacade iframe{width:100%;height:100%;border:0;display:block}
.ytfacade__btn{position:absolute;inset:0;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);
  background:transparent;border:0;cursor:pointer;color:var(--creme-hell);padding:14px;text-align:center}
.ytfacade__btn:hover{background:rgba(255,201,120,.08)}
.ytfacade__play{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:#B93607;color:#FFF0E2;font-size:20px;padding-left:4px}
.ytfacade__btn:hover .ytfacade__play{background:var(--cta-hover)}
.ytfacade__label{font:700 14px/1.25 var(--f-display);letter-spacing:.05em;text-transform:uppercase}
.ytfacade__btn small{font:400 10.5px/1.35 var(--f-text);color:#E4C89A;max-width:34ch}
.videogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin:14px 0}
@media (max-width:900px){ .videogrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .videogrid{grid-template-columns:1fr} }

/* ============================================================
   Barrierefreiheit WCAG 2.1/2.2 AA
   ============================================================ */
/* 2.5.8 Zielgroesse: alle Bedienelemente mind. 24px hoch.
   Betraf Fussnavigation, Kontaktangaben und Rechtstext-Links (waren 11-17px). */
.foot a,.foot .social a,.copy a{min-height:24px;display:inline-flex;align-items:center}
.foot ul li{margin:2px 0}
/* Fliesstext-Links bleiben inline und damit umbruchfaehig (dokumentierte
   Absicht). Die 24px-Trefferflaeche entsteht ueber vertikales Padding, das
   bei inline-Elementen die Zeilenhoehe nicht veraendert. */
.page-body a{display:inline;padding:4px 0}
.foot a{padding:3px 0}
/* Weitere kleine Ziele (Audit): Terminlisten-Titel, Inhaltslinks.
   15px Barlow -> Inhaltsflaeche 17,5px + 2x4px = 25,5px. */
.zone-inhalt p a,.zone-inhalt li a,.termin__titel a{padding:4px 0}
/* Hinweis-/Datenschutzlinks in Formularen: EINE Regel fuer alle vier
   Fundstellen. Die Trefferhoehe eines inline-Links ist NICHT die
   line-height, sondern die Schrift-Inhaltsflaeche. Barlow hat laut hhea
   ascent 1000 / descent -200 bei 1000 upem, also exakt das 1,2-fache der
   Schriftgroesse. Messung v6: 12px -> 14,4 + 2x4 = 22px -> zu klein.
   Mit 8px Padding:
     .kontakt__form .note a / .bestellform .note a  12px   -> 14,4 + 16 = 30,4px
     .player__hinweis a                             11,5px -> 13,8 + 16 = 29,8px
     .book .note a / .note-link                      9px   -> 10,8 + 16 = 26,8px
   Alle sicher ueber 24px. display:inline bleibt, damit die Links im
   Absatz mitfliessen und umbrechen koennen; das transparente Padding
   vergroessert nur die Trefferflaeche, nicht die Zeilenhoehe. */
.book .note a,.note-link,.kontakt__form .note a,.bestellform .note a,
.player__hinweis a{display:inline;padding:8px 0}

/* 1.4.11 Fokusindikator auch auf hellen Flaechen sichtbar */
:focus-visible{outline:3px solid #FFD470;outline-offset:2px;
  box-shadow:0 0 0 5px rgba(0,0,0,.45)}
.page-body :focus-visible,.bench :focus-visible,.card :focus-visible,
.kontakt__form :focus-visible,.bestellform :focus-visible,
.album :focus-visible,.weiter :focus-visible{
  outline-color:#7A1E05;box-shadow:0 0 0 5px rgba(255,255,255,.7)}

/* 1.4.12 Textabstaende duerfen vom Nutzer erhoeht werden, ohne Inhalt zu kappen */
.card p,.ws__lead,.page-body p,.box ul,.book__events li{overflow-wrap:break-word}
.card,.box,.ws__body,.book__events{min-height:0}

/* 1.4.10 Reflow: keine feste Breite unter 320px erzwingen */
@media (max-width:400px){
  .frame,.inner,.main,.col-l{min-width:0}
  .page-body{padding:16px 14px}
}
/* 3.3.2 Legende fuer Pflichtfelder */
.book .pflichtlegende{grid-column:1/-1;margin:0 0 2px;font:400 10.5px/1.4 var(--f-text);color:#E8C79A}
@media (min-width:1200px){ .book .pflichtlegende{font-size:11.5px} }
/* Fussnavigation lag bei 23px - eine Zeilenhoehe zu knapp fuer 2.5.8 */
.foot ul li a{min-height:26px;padding:4px 0;line-height:1.5}
/* 2.5.8: Kopfnavigation lag bei 23px */
.nav a{min-height:26px;padding:6px 3px;display:inline-flex;align-items:center}

/* ============================================================
   Galerien: EIN System fuer beide Kontexte (.page-body und
   .zone-inhalt - die Seiten aus page.php tragen beide Klassen).
   Vorher existierten zwei konkurrierende Bloecke mit !important;
   es gilt der zuletzt gewinnende Stand: festes 3er-Raster,
   Goldrahmen, dazu Hover mit Lupe aus dem ersten System.
   Die !important bleiben noetig, weil WordPress Inline-Breiten
   und ID-basierte Rahmenstyles in die Galerie schreibt.
   ============================================================ */
.page-body .gallery,.zone-inhalt .gallery{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 26px}
.page-body .gallery br,.zone-inhalt .gallery br{display:none}
.page-body .gallery-item,.zone-inhalt .gallery-item{margin:0!important;width:auto!important;float:none!important}
.page-body .gallery-icon,.zone-inhalt .gallery-icon{margin:0}
.page-body .gallery-item a,.zone-inhalt .gallery-item a{display:block;position:relative;overflow:hidden;
  border:1px solid #DFB477;background:#EBD3A4;aspect-ratio:4/3;min-height:0}
.page-body .gallery-item img,.zone-inhalt .gallery-item img{width:100%!important;height:100%!important;
  aspect-ratio:4/3;object-fit:cover;border:1px solid #D8A867!important;display:block;
  transition:transform .35s ease,filter .35s ease}
@media (prefers-reduced-motion:reduce){
  .page-body .gallery-item img,.zone-inhalt .gallery-item img{transition:none}}
.page-body .gallery-item a:hover img,.zone-inhalt .gallery-item a:hover img,
.page-body .gallery-item a:focus-visible img,
.zone-inhalt .gallery-item a:focus-visible img{transform:scale(1.06);filter:brightness(1.08)}
/* Lupensymbol beim Ueberfahren */
.page-body .gallery-item a::after,.zone-inhalt .gallery-item a::after{
  content:"⌕";position:absolute;right:8px;bottom:8px;
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:rgba(51,32,12,.82);color:#FFD79A;font-size:15px;
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.page-body .gallery-item a:hover::after,.zone-inhalt .gallery-item a:hover::after,
.page-body .gallery-item a:focus-visible::after,
.zone-inhalt .gallery-item a:focus-visible::after{opacity:1;transform:none}
.page-body .gallery-caption,.zone-inhalt .gallery-caption{
  font:400 12px/1.4 var(--f-text);color:#6A4620;margin:4px 0 0;padding:5px 2px 0}
@media (max-width:640px){
  .page-body .gallery,.zone-inhalt .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   Workshops-Seite (eigene Vorlage)
   ============================================================ */
/* .ws-head entfernt (Audit): Workshops-Seite nutzt jetzt .seitenkopf. */

.ws-angebote{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#C08442;
  border-bottom:1px solid #C08442}
.ws-angebote article{background:var(--card);padding:18px 16px 20px}
.ws-angebote h2{margin:0 0 6px;font:700 var(--fs-m)/1.15 var(--f-display);letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent)}
.ws-angebote p{margin:0;font:400 12.5px/1.5 var(--f-text);color:var(--text-braun)}
@media (max-width:900px){ .ws-angebote{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .ws-angebote{grid-template-columns:1fr} }

/* Fliesstext der Seite luftiger gliedern (H3 unter H2: Typo-Skala) */
.ws-text h3{margin:28px 0 10px;font:700 var(--fs-l)/1.15 var(--f-display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--accent);padding-bottom:6px;border-bottom:2px solid #E3B778}
.ws-text h4{margin:18px 0 6px;font:700 14px/1.2 var(--f-display);letter-spacing:.06em;
  text-transform:uppercase;color:#8A4410}
.ws-text > p:first-of-type{font:500 var(--fs-l)/1.6 var(--f-text);color:var(--text-braun)}

.ws-presse{max-width:74ch;margin:22px auto 0}
.ws-presse h2{margin:0 0 12px;font:700 var(--fs-m)/1 var(--f-display);letter-spacing:.08em;
  text-transform:uppercase;color:#7A3A12}
.ws-presse__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ws-presse figure{margin:0;background:#FFF7E7;border:1px solid #DFB477;border-left:4px solid #B9702A;
  padding:14px 16px}
.ws-presse blockquote{margin:0 0 6px;font:italic 400 15px/1.5 Georgia,serif;color:#4A2A0C}
.ws-presse figcaption{font:700 11px/1 var(--f-text);letter-spacing:.05em;
  text-transform:uppercase;color:#8A4410}
@media (max-width:700px){ .ws-presse__grid{grid-template-columns:1fr} }

/* Workshops: Text nicht allein in der Flaeche stehen lassen -
   daneben eine Infospalte, die mitscrollt. */
.ws-fakten{background:var(--braun-tief);color:#F7E3C0;border:1px solid #8A4A1E;
  padding:18px 18px 20px;position:sticky;top:16px}
.ws-fakten h2{margin:0 0 12px;font:700 var(--fs-m)/1 var(--f-display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-hell)}
.ws-fakten dl{margin:0;display:grid;gap:10px}
.ws-fakten dt{font:700 10.5px/1 var(--f-display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-hell);margin-bottom:3px}
.ws-fakten dd{margin:0;font:400 var(--fs-s)/1.5 var(--f-text);color:#F7E3C0}
.ws-fakten__cta{margin:16px 0 10px}
.ws-fakten__cta .btn{width:100%;justify-content:center}
.ws-fakten__tel{margin:0;font:400 12.5px/1.5 var(--f-text);color:#E0BE8C;
  border-top:1px solid rgba(255,201,120,.28);padding-top:10px}
.ws-fakten__tel a{color:#FFD79A;font-weight:700;border-bottom:1px solid rgba(255,215,154,.5);
  min-height:24px;display:inline-flex;align-items:center}
@media (max-width:900px){
  .ws-fakten{position:static}
  .ws-fakten dl{grid-template-columns:1fr 1fr;gap:12px 18px}
}
@media (max-width:520px){ .ws-fakten dl{grid-template-columns:1fr} }
/* .ws-grid .page-body entfernt (Audit): Text sitzt jetzt in .zone-inhalt. */

/* ============================================================
   Gemeinsamer Seitenkopf aller Unterseiten (ersetzt .page-head).
   Konsolidiert: die vier historischen Generationen (Basis,
   Hero-Komposition, Kompakt, 1380px-Flucht) sind hier zu EINER
   Fassung zusammengefuehrt - es gelten die zuletzt gueltigen Werte.
   ============================================================ */
.seitenkopf{position:relative;min-height:236px;display:flex;align-items:center;
  overflow:hidden;background:var(--hero-a,#2B1E0D);color:#F7E2BB}
/* Bildkomposition wie der Startseiten-Hero: Foto rechts (66%),
   blendet nach links aus, der Text steht davor. */
.seitenkopf img{position:absolute;inset:0 0 0 auto;width:66%;height:100%;object-fit:cover;
  object-position:58% center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 9%,rgba(0,0,0,.85) 20%,#000 32%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 9%,rgba(0,0,0,.85) 20%,#000 32%)}
.seitenkopf::after{content:"";position:absolute;inset:0;pointer-events:none;
  /* Gleicher Verlauf wie im Startseiten-Hero: waagerecht, ueber die
     Hero-Variablen gesteuert - passt so zu jeder Hero-Stimmung. */
  background:linear-gradient(100deg,
    var(--hero-a,#2B1E0D) 0%, var(--hero-a,#2B1E0D) 20%,
    color-mix(in srgb,var(--hero-b,#46280F) 62%,transparent) 38%,
    color-mix(in srgb,var(--hero-b,#46280F) 18%,transparent) 52%,
    transparent 64%)}
/* Kompakt und in der 1380px-Flucht aller Baender; Schrift folgt den
   Hero-Variablen (sonst stuende z. B. dunkle Goldschrift auf Dunkel). */
.seitenkopf__in{position:relative;z-index:1;width:100%;max-width:1380px;
  margin-left:auto;margin-right:auto;padding:20px var(--pad-band) 22px}
.seitenkopf .eyebrow{margin:10px 0 6px;font-size:12px;letter-spacing:.17em;
  color:var(--hero-eye,var(--gold-hell));max-width:34ch}
.seitenkopf h1{margin:0 0 10px;font:700 var(--fs-h1)/1.06 var(--f-display);
  letter-spacing:.01em;text-transform:uppercase;color:var(--hero-h1a,var(--creme-hell));max-width:34ch}
.seitenkopf__lead{margin:0;font:400 var(--fs-m)/1.55 var(--f-text);
  color:var(--hero-lead,#FBEBD0);max-width:34ch}
@media (min-width:1200px){ .seitenkopf{min-height:272px} .seitenkopf__lead{font-size:16px} }
@media (max-width:600px){ .seitenkopf{min-height:230px} }
@media (max-width:820px){
  /* Schmale Fenster: Foto oben, Text darunter - wie beim Hero.
     Panelgrund folgt der Hero-Stimmung (vorher fest #2C2317, das stand
     bei sunset/terra/deep stimmungsfremd unter dem Foto). */
  .seitenkopf{flex-direction:column;align-items:stretch;min-height:0}
  .seitenkopf img{position:relative;inset:auto;width:100%;height:190px;
    object-position:center 30%;-webkit-mask-image:none;mask-image:none}
  .seitenkopf::after{display:none}
  .seitenkopf__in{max-width:none;padding:18px 16px 22px;background:var(--hero-a,#2C2317)}
}

/* ============================================================
   Bilder als Stilmittel im Fliesstext
   ============================================================ */
.bildband{position:relative;margin:26px 0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-1)}
.bildband img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #DFB477}
.bildband--zwei{grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){ .bildband,.bildband--zwei{grid-template-columns:1fr} }

/* Freigestelltes Motiv neben dem Text */
.bild-neben{float:right;width:min(42%,300px);margin:4px 0 16px 22px}
.bild-neben img{width:100%;border:1px solid #DFB477}
.bild-neben figcaption{font:400 11px/1.4 var(--f-text);color:#6A4620;padding-top:5px}
.bild-neben--links{float:left;margin:4px 22px 16px 0}
@media (max-width:600px){ .bild-neben,.bild-neben--links{float:none;width:100%;margin:16px 0} }

/* Zitat mit Bildhintergrund als Rhythmuswechsel */
.zitatband{position:relative;margin:28px 0;padding:30px clamp(18px,4vw,44px);
  color:var(--creme-hell);overflow:hidden;background:var(--braun-tief)}
.zitatband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.zitatband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(51,32,12,.88),rgba(110,49,19,.62))}
.zitatband blockquote{position:relative;z-index:1;margin:0;max-width:44ch;
  font:italic 400 clamp(16px,2vw,20px)/1.5 Georgia,serif}
.zitatband cite{position:relative;z-index:1;display:block;margin-top:10px;font-style:normal;
  font:700 11px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hell)}

/* ============================================================
   Kontakt & Booking
   ============================================================ */
.kontakt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,320px);gap:var(--sp-3);
  max-width:1080px;margin:0 auto;padding:clamp(22px,3.5vw,40px) var(--pad-band);
  background:var(--paper);align-items:start}
.kontakt__form{background:#FFF7E7;border:1px solid #DFB477;padding:clamp(20px,3vw,34px)}
.kontakt__form h2{margin:0 0 8px;font:700 var(--fs-h2)/1.1 var(--f-display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--accent)}
.kontakt__intro{margin:0 0 18px;font:400 var(--fs-m)/1.6 var(--f-text);color:var(--text-braun);max-width:56ch}
.kontakt__form form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.kontakt__form form p{margin:0}
.kontakt__form .wide,.kontakt__form .pflichtlegende,
.kontakt__form button,.kontakt__form .note,.kontakt__form .msg{grid-column:1/-1}
.kontakt__form .pflichtlegende{margin:0;font:400 var(--fs-xs)/1.4 var(--f-text);color:#6A4620}
.kontakt__form label{display:block;margin-bottom:4px;font:700 11px/1 var(--f-display);
  letter-spacing:.08em;text-transform:uppercase;color:#7A3A12}
.kontakt__form input,.kontakt__form select,.kontakt__form textarea{width:100%;
  border:1px solid #C99A5C;background:#FFFCF4;color:var(--braun-tief);
  font:400 15px/1.4 var(--f-text);padding:10px 11px;min-height:44px}
.kontakt__form textarea{resize:vertical;min-height:150px}
.kontakt__form button{background:var(--cta);color:#FFF0E2;border:0;cursor:pointer;
  font:700 14px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;
  padding:15px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.kontakt__form button:hover{background:var(--cta-hover)}
.kontakt__form .note{margin:0;font:400 var(--fs-xs)/1.5 var(--f-text);color:#6A4620}
.kontakt__form .note a{color:#93300E;text-decoration:underline}

.kontakt__info{display:grid;gap:var(--sp-2)}
.kontakt__karte{background:var(--braun-tief);color:#F7E3C0;border:1px solid #8A4A1E;padding:18px}
.kontakt__karte h2{margin:0 0 12px;font:700 var(--fs-m)/1 var(--f-display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-hell)}
.kontakt__karte dl{margin:0;display:grid;gap:10px}
.kontakt__karte dt{font:700 10.5px/1 var(--f-display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-hell);margin-bottom:2px}
.kontakt__karte dd{margin:0;font:400 14px/1.5 var(--f-text)}
.kontakt__karte a{color:#FFD79A;border-bottom:1px solid rgba(255,215,154,.45);
  min-height:24px;display:inline-flex;align-items:center}
.kontakt__karte--hell{background:#FDEDCE;color:var(--text-braun);border-color:#C08442}
.kontakt__karte--hell h2{color:var(--accent)}
.kontakt__liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kontakt__liste li{position:relative;padding-left:20px;font:400 var(--fs-s)/1.45 var(--f-text)}
.kontakt__liste li::before{content:"✦";position:absolute;left:0;top:0;color:#A8340F}
.kontakt__liste b{display:block;font:700 14px/1.3 var(--f-text);color:var(--terrakotta)}
.kontakt__karte--social .social{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:0}
.kontakt__karte--social .social a{background:rgba(255,201,120,.12);border:1px solid rgba(255,201,120,.45);
  padding:7px 12px;font:700 11px/1 var(--f-text);letter-spacing:.05em;min-height:34px}
.kontakt__karte--social .social a:hover{background:var(--gold-hell);color:var(--braun-tief)}
@media (max-width:900px){
  .kontakt{grid-template-columns:1fr}
  .kontakt__form form{grid-template-columns:1fr}
  .kontakt__form .wide{grid-column:auto}
}

/* ============================================================
   Kopfleiste bleibt beim Scrollen stehen (alle Seiten)
   z-index 40: ueber den Ornamentleisten (2) und dem Hero-Siegel (6)
   ============================================================ */
.head{position:sticky;top:0;z-index:40;
  background:var(--head);
  box-shadow:0 2px 0 rgba(255,201,120,.18), 0 10px 26px rgba(0,0,0,.38)}
/* Sprungziele nicht unter der Leiste verstecken */
html{scroll-padding-top:64px}
:target{scroll-margin-top:64px}
@media (min-width:1200px){ html{scroll-padding-top:70px} :target{scroll-margin-top:70px} }
@media (min-width:1400px){ html{scroll-padding-top:76px} :target{scroll-margin-top:76px} }
/* Mobiles Ausklappmenue haengt an der fixierten Leiste */
@media (max-width:820px){ .nav{z-index:41} }
/* Sehr niedrige Fenster: Leiste nicht kleben, sonst bleibt kaum Inhalt */
@media (max-height:420px){ .head{position:static} }

/* (Die frueheren Nachtrags-Bloecke zum Seitenkopf sind in den
   konsolidierten Basisblock weiter oben eingearbeitet.) */

/* ============================================================
   DREI LAYOUT-SYSTEME
   Gleiches Markup, drei Anordnungen. Umschaltbar im Customizer
   ("Layout-System"), wirkt ueber die Body-Klasse layout-*.
   Gemeinsame Bausteine jeder Unterseite:
     .seitenkopf  .zone-merkmale  .zone-haupt (.zone-inhalt + .zone-info)
     .zone-bilder  .zitatband  .page-cta
   ============================================================ */
.zone-haupt{max-width:1080px;margin:0 auto;padding:clamp(22px,3.5vw,40px) var(--pad-band)}
.zone-inhalt{background:#FFF7E7;border:1px solid #DFB477;padding:clamp(20px,3vw,36px)}
.zone-info{display:grid;gap:var(--sp-2);align-content:start}
.zone-merkmale{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#C08442}
.zone-merkmale > *{background:var(--card);padding:16px 15px}
.zone-bilder{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1);
  max-width:1080px;margin:0 auto;padding:0 var(--pad-band) clamp(22px,3vw,34px)}
.zone-bilder img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #C08442}
@media (max-width:900px){ .zone-merkmale{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .zone-merkmale,.zone-bilder{grid-template-columns:1fr} }

/* ---------- A: Feste Zonen ---------- */
.layout-zonen .zone-haupt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:var(--sp-3);align-items:start}
.layout-zonen .zone-inhalt{padding-left:clamp(18px,4vw,52px);padding-right:clamp(18px,4vw,52px)}
@media (max-width:900px){ .layout-zonen .zone-haupt{grid-template-columns:1fr} }

/* ---------- B: Wechselnde Baender ---------- */
.layout-baender .zone-haupt{display:block;max-width:none;padding:0;background:var(--paper)}
.layout-baender .zone-inhalt{max-width:74ch;margin:0 auto;border:0;background:transparent;
  padding:clamp(26px,4vw,48px) var(--pad-band)}
.layout-baender .zone-info{max-width:1080px;margin:0 auto;
  grid-template-columns:repeat(3,1fr);gap:var(--sp-2);
  padding:clamp(24px,3.5vw,40px) var(--pad-band);background:var(--braun-tief)}
.layout-baender .zone-merkmale{background:#2C2317;gap:0}
.layout-baender .zone-merkmale > *{background:transparent;color:#F7E3C0;
  border-right:1px solid rgba(255,201,120,.22)}
.layout-baender .zone-merkmale > *:last-child{border-right:0}
.layout-baender .zone-merkmale h2,.layout-baender .zone-merkmale h3{color:var(--gold-hell)}
.layout-baender .zone-merkmale p{color:#EBD4AC}
.layout-baender .zone-bilder{max-width:none;padding:0;gap:0}
.layout-baender .zone-bilder img{border:0;aspect-ratio:16/10}
@media (max-width:900px){ .layout-baender .zone-info{grid-template-columns:1fr} }

/* ---------- C: Magazin-Raster ----------
   Konsolidiert mit dem frueheren "FEHLERBEHEBUNG"-Nachtrag: der Rahmen
   laeuft ueber die volle Breite, das 12er-Innenraster sitzt zentriert
   (aeussere 1fr-Spalten), Inhalt in Spalte 2-9, Infospalte 11-13. */
.layout-magazin .zone-haupt{display:grid;grid-template-columns:
  minmax(0,1fr) repeat(12,minmax(0,72px)) minmax(0,1fr);gap:0 18px;
  max-width:none;padding-left:0;padding-right:0}
.layout-magazin .zone-haupt > *{max-width:1180px}
.layout-magazin .zone-inhalt{grid-column:2/10;background:transparent;border:0;
  padding:clamp(24px,3vw,40px) 0;margin-left:auto;padding-left:var(--pad-band)}
.layout-magazin .zone-info{grid-column:11/14;margin-top:clamp(24px,3vw,40px);
  margin-right:auto;padding-right:var(--pad-band)}
.layout-magazin .zone-bilder{max-width:1180px;grid-template-columns:repeat(12,1fr);gap:18px;
  padding-left:var(--pad-band);padding-right:var(--pad-band)}
.layout-magazin .zone-bilder img:nth-child(1){grid-column:1/6;aspect-ratio:3/2}
.layout-magazin .zone-bilder img:nth-child(2){grid-column:6/10;aspect-ratio:1;margin-top:34px}
.layout-magazin .zone-bilder img:nth-child(3){grid-column:10/13;aspect-ratio:2/3}
.layout-magazin .zone-merkmale{max-width:1180px;margin:0 auto;background:transparent;gap:18px;
  padding:0 var(--pad-band) 8px}
.layout-magazin .zone-merkmale > *{border:1px solid #C08442}
@media (max-width:900px){
  .layout-magazin .zone-haupt{grid-template-columns:1fr;padding:0 var(--pad-band)}
  .layout-magazin .zone-inhalt,.layout-magazin .zone-info{grid-column:auto;padding-left:0;padding-right:0}
  .layout-magazin .zone-bilder{grid-template-columns:1fr}
  .layout-magazin .zone-bilder img{grid-column:auto!important;margin-top:0!important;aspect-ratio:4/3}
}

/* Einzelansichten (Typo-Skala: --fs-*).
   Merkmal-Kacheln (h2/h3/p) werden im Merkmalsband-Block weiter unten
   gestylt - die alte, komplett uebersteuerte Erstfassung ist entfernt. */
.zone-inhalt > p:first-of-type{font:500 var(--fs-l)/1.6 var(--f-text);color:var(--text-braun)}
.zone-inhalt h2{margin:26px 0 10px;font:700 var(--fs-h2)/1.15 var(--f-display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--accent);padding-bottom:6px;border-bottom:2px solid #E3B778}
.zone-inhalt p,.zone-inhalt li{font:400 var(--fs-m)/1.7 var(--f-text);color:var(--braun-tief)}
/* Zeilenlaenge: Fliesstext-Bausteine im Inhaltsbereich behalten den
   74ch-Deckel, auch wenn die Spalte selbst breiter ist (Audit: sonst
   ~90-95 Zeichen pro Zeile). Raster-Bausteine (Alben, Termin-Detail,
   Galerien, Formulare) bleiben unbegrenzt. */
.zone-inhalt > p,.zone-inhalt > ul,.zone-inhalt > ol,.zone-inhalt > h2,
.zone-inhalt > h3,.zone-inhalt > h4,.zone-inhalt > blockquote,
.zone-inhalt > table,.termin-detail__text{max-width:74ch}
/* Ohne !important: der Kontext-Selektor schlaegt .zone-inhalt p regulaer */
.zone-inhalt .termin-datum{font:700 18px/1.3 var(--f-display);color:var(--accent)}
.zone-inhalt .termin-ort{color:#6A4620}
.kontakt__liste b a{border-bottom:1px solid rgba(122,42,12,.4)}

/* ============================================================
   Musik-Seite: Alben, Tracklisten, Abspielbereich, Bestellformular
   ============================================================ */
.alben{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:16px 0 30px}
.album{background:#FFFCF4;border:1px solid #DFB477;display:flex;flex-direction:column;overflow:hidden}
.album__cover{width:100%;aspect-ratio:1;object-fit:cover;border-bottom:1px solid #DFB477}
.album__kopf{padding:12px 14px 8px}
/* 19px statt 21px: bleibt unter dem H2-Minimum (20px) - Hierarchie H2 > H3 */
.album__kopf h3{margin:0;font:700 19px/1.05 var(--f-display);letter-spacing:.02em;
  text-transform:uppercase;color:var(--card-title)}
.album__artist{margin:3px 0 0;font:600 11.5px/1.3 var(--f-text);color:#6A4620}
.album__preis{margin:7px 0 0;font:700 15px/1 var(--f-text);color:var(--terrakotta)}
.album__preis small{display:block;font:400 10.5px/1.4 var(--f-text);color:#6A4620;margin-top:2px}
.album__tracks{list-style:none;margin:0;padding:4px 8px 8px;counter-reset:t;flex:1}
.album__tracks li{counter-increment:t}
.track{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:var(--sp-1);width:100%;
  background:transparent;border:0;cursor:pointer;text-align:left;padding:7px 6px;min-height:36px;
  font:400 13px/1.3 var(--f-text);color:var(--braun-tief);border-bottom:1px solid rgba(223,180,119,.5)}
.album__tracks li:last-child .track{border-bottom:0}
.track:hover,.track:focus-visible{background:#F7E3BE}
.track__play{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#B93607;color:#FFF0E2;font-size:9px;padding-left:2px}
.track:hover .track__play{background:var(--cta-hover)}
.track__name{font-weight:600}
.track__zeit{font-size:11.5px;color:#6A4620;font-variant-numeric:tabular-nums}
.track--ohne{cursor:default;color:#6A4620;grid-template-columns:22px 1fr auto}
.track--ohne:hover{background:transparent}
.album__cta{margin:0 14px 14px}

.player{margin:0 0 30px;background:var(--braun-tief);border:1px solid #8A4A1E;padding:14px}
.player__titel{font:700 14px/1.2 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--gold-hell)}
.player__zu{background:transparent;border:1px solid rgba(255,201,120,.5);color:#FFD79A;cursor:pointer;
  font:700 11px/1 var(--f-text);letter-spacing:.05em;padding:0 12px;min-height:34px;
  display:inline-flex;align-items:center;gap:7px}
.player__zu:hover{background:#FFD79A;color:var(--braun-tief)}
.player__rahmen{aspect-ratio:16/9;background:#1C1408}
.player__rahmen iframe{width:100%;height:100%;border:0;display:block}
.player__hinweis{margin:9px 0 0;font:400 11.5px/1.45 var(--f-text);color:#E0BE8C}
.player__hinweis a{color:#FFD79A;text-decoration:underline}

.bestellform{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:14px}
.bestellform p{margin:0}
.bestellform .wide,.bestellform .pflichtlegende,.bestellform button,.bestellform .note{grid-column:1/-1}
.bestellform .pflichtlegende{font:400 var(--fs-xs)/1.4 var(--f-text);color:#6A4620}
.bestellform label{display:block;margin-bottom:4px;font:700 11px/1 var(--f-display);
  letter-spacing:.08em;text-transform:uppercase;color:#7A3A12}
.bestellform input,.bestellform select,.bestellform textarea{width:100%;border:1px solid #C99A5C;
  background:#FFFCF4;color:var(--braun-tief);font:400 15px/1.4 var(--f-text);padding:10px 11px;min-height:44px}
.bestellform textarea{resize:vertical}
.bestellform button{background:var(--cta);color:#FFF0E2;border:0;cursor:pointer;
  font:700 14px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;padding:15px;
  min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.bestellform button:hover{background:var(--cta-hover)}
.bestellform .note{font:400 var(--fs-xs)/1.5 var(--f-text);color:#6A4620}
.bestellform .note a{color:#93300E;text-decoration:underline}
@media (max-width:700px){ .bestellform{grid-template-columns:1fr} .bestellform .wide{grid-column:auto} }
/* (Social-Icon-Regeln in den Footer-Basisblock konsolidiert.) */

/* Seitenkopf im Goldgelb-Hero: H1/Lead/Panelgrund folgen bereits den
   Hero-Variablen (dunkle Schrift, D8891F-Grund). Nur die Kleinzeile
   braucht einen dunkleren Sonderwert als --hero-eye. */
.seitenkopf .eyebrow{color:#5A1403}          /* 4,89:1 statt 3,73:1 */

/* FEHLERBEHEBUNG: In Layout C war .zone-inhalt transparent, der Bereich
   darunter aber ohne helle Flaeche -> dunkler Text auf dunklem Grund.
   Der Hauptbereich bekommt in ALLEN Layouts die Papierfarbe.
   (Die uebrigen Magazin-Nachtraege sind in den C-Block eingearbeitet.) */
.zone-haupt{background:var(--paper)}

/* ============================================================
   MUSIK-SEITE: heller Seitengrund + mitlaufender Player
   ============================================================ */

/* 1. Seitengrund hell statt #2C2317. Der Footer behaelt sein Dunkel,
      damit der Seitenabschluss ueber alle Seiten gleich bleibt. */
/* Der helle Seitengrund gilt seit v8 fuer ALLE Unterseiten (siehe unten). */

/* 2. Beide Spalten oben buendig. Im Magazin-Raster schiebt eine
      margin-top die Seitenspalte sonst nach unten. */
.page-template-page-musik .zone-info{margin-top:0}
.page-template-page-musik .zone-inhalt > h2:first-child{margin-top:0}
.page-template-page-musik .zone-info > :first-child{margin-top:0}

/* 3. Der Player laeuft beim Scrollen mit, damit er neben den Titeln
      stehen bleibt (Optik angelehnt an die alten Profil-Player). */
.player--dock{position:sticky;top:77px;margin:0;background:linear-gradient(180deg,#3E2610 0%,#2A1808 100%);
  border:1px solid #8A4A1E;box-shadow:0 10px 26px rgba(40,20,4,.28)}
.player--dock .player__label{margin:0;padding:7px 12px;background:linear-gradient(180deg,#9C4413 0%,#7A2F08 100%);
  font:700 11px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--creme-hell);
  border-bottom:1px solid #6E2C0C}
.player--dock .player__rahmen{aspect-ratio:16/9;background:#150E04;display:grid;place-items:center}
.player__leer{margin:0;text-align:center;font:700 13px/1.5 var(--f-display);letter-spacing:.1em;
  text-transform:uppercase;color:#C79A62}
.player__leer span{font:400 11.5px/1.5 var(--f-text);letter-spacing:0;text-transform:none;color:#A98253}
.player--dock .player__titel{display:block;padding:10px 12px 0;font:700 14px/1.3 var(--f-display);
  letter-spacing:.04em;text-transform:uppercase;color:#FFD79A}
.player__steuer{display:flex;gap:var(--sp-1);padding:10px 12px;align-items:center}
.player__nav,.player--dock .player__zu{min-height:38px;min-width:44px;padding:0 12px;cursor:pointer;
  background:#4A2A10;border:1px solid #9A5624;color:#FFD79A;
  font:700 12px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.player__nav{font-size:15px}
.player--dock .player__zu{margin-left:auto}
.player__nav:hover:not(:disabled),.player--dock .player__zu:hover:not(:disabled){background:#FFD79A;color:#2A1808;border-color:#FFD79A}
.player__nav:disabled,.player--dock .player__zu:disabled{opacity:.45;cursor:default}
.player--dock .player__hinweis{margin:0;padding:0 12px 11px}

/* 4. Laufender Titel in der Liste markieren */
.track--aktiv{background:#F6C87E}
.track--aktiv .track__name{font-weight:700;color:#4A1F06}
.track--aktiv .track__play{color:#9A3A0C}

/* 5. Fragen-Block unter dem Bestellformular */
.bestellfragen{margin:26px 0 0;padding:18px 20px;background:var(--card);border:1px solid #E0B87A}
.bestellfragen h2{margin:0 0 10px}
.bestellfragen__cta{margin:12px 0 0}

@media (max-width:900px){
  /* Auf schmalen Geraeten steht der Player ueber den Alben statt daneben */
  .page-template-page-musik .zone-haupt{display:flex;flex-direction:column}
  .page-template-page-musik .musik__spalte{order:-1}
  .player--dock{position:static}
}

/* Der Player gehoert neben die Titel - unabhaengig vom gewaehlten
   Layout-System. In Layout B liegt die Seitenspalte sonst als eigenes
   Band unter dem Inhalt, der Player waere dann 3000 px entfernt.
   Deshalb bekommt die Musikseite eine eigene Zweispaltigkeit, die alle
   drei Systeme ueberschreibt. Kein align-items:start - die Spalte muss
   volle Hoehe behalten, sonst hat position:sticky keinen Spielraum. */
body.page-template-page-musik .zone-haupt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,336px);
  gap:clamp(18px,2.4vw,34px)}
body.page-template-page-musik .zone-inhalt{grid-column:1;max-width:none;margin:0;padding:0;background:transparent;border:0}
body.page-template-page-musik .zone-info{grid-column:2;margin:0;padding:0;background:transparent;
  max-width:none;display:grid;grid-template-columns:1fr;gap:var(--sp-2);align-content:start}

@media (max-width:900px){
  body.page-template-page-musik .zone-haupt{display:flex;flex-direction:column;padding:clamp(18px,4vw,28px) clamp(16px,4vw,24px)}
  body.page-template-page-musik .musik__spalte{order:-1}
  body.page-template-page-musik .player--dock{position:static}
}

/* ============================================================
   TERMINE: Liste mit Plakat, Detailseite
   ============================================================ */
.termine{list-style:none;margin:18px 0 30px;padding:0;display:grid;gap:var(--sp-2)}
.termin{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;
  background:var(--card);border:1px solid #E0B87A;padding:14px;align-items:start}
.termin__plakat{display:block;background:#EAD3A6;aspect-ratio:3/4;overflow:hidden;position:relative}
.termin__plakat img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.termin:hover .termin__plakat img{transform:scale(1.04)}
.termin__kein-plakat{position:absolute;inset:0;display:grid;place-items:center;
  font-size:34px;color:#B98C4E}
.termin__text{min-width:0}
.termin__datum{margin:0 0 4px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.termin__tag{font:700 26px/1 var(--f-display);color:#9C3A0C}
.termin__monat{font:700 13px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--terrakotta)}
.termin__jahr{font:400 13px/1 var(--f-text);color:#6A4620}
.termin__zeit{margin-left:auto;font:700 12px/1 var(--f-display);letter-spacing:.08em;
  background:#F2BE76;color:#4A1F06;padding:5px 8px}
.termin__titel{margin:0 0 3px;font:700 clamp(17px,1.5vw,21px)/1.25 var(--f-display);
  letter-spacing:.02em;text-transform:uppercase}
.termin__titel a{color:#750E04;text-decoration:none}
.termin__titel a:hover,.termin__titel a:focus-visible{text-decoration:underline}
.termin__ort{margin:0 0 6px;font:600 13.5px/1.45 var(--f-text);color:var(--terrakotta)}
.termin__anriss{margin:0 0 8px;font:400 14px/1.55 var(--f-text);color:var(--text-braun)}
.termin__marken{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.termin__marke{font:700 11px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;
  color:#5A1403;background:#F6D9A8;border:1px solid #D8A867;padding:5px 8px}
.termin__mehr{margin:0}
.termine__leer{margin:14px 0 24px;padding:16px 18px;background:var(--card);
  border:1px dashed #C79A62;font:400 var(--fs-m)/1.6 var(--f-text);color:var(--text-braun)}

@media (max-width:640px){
  .termin{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px}
  .termin__zeit{margin-left:0}
}

/* Detailseite: Plakat und Terminkarte nebeneinander, Beschreibung darunter
   ueber volle Breite; unter 720px alles untereinander.

   Frueher standen hier drei gleichwertige Bloecke (Merkmalsband, Eckdaten-
   Liste, Schaltflaechenzeile) - dieselben Angaben teils doppelt, und die
   Schaltflaechen weit unter dem Text ohne Bezug zu den Daten. Jetzt fuehrt
   eine Karte: Datum zuerst, darunter Ort und Einlass, darunter die
   Hauptschaltflaeche. */
.termin-detail{display:grid;
  grid-template-columns:minmax(180px,250px) minmax(0,1fr);
  grid-template-areas:"plakat karte" "text text";
  gap:clamp(18px,2.4vw,32px);margin:0 0 30px;align-items:start}
.termin-detail__plakat{grid-area:plakat;margin:0}
.termin-detail__plakat img{width:100%;height:auto;display:block;margin:0;border:1px solid #D8A867}
.termin-detail__plakat figcaption{margin:6px 0 0;font:400 12px/1.5 var(--f-text);color:#6A4620}

/* Terminkarte -------------------------------------------------------- */
.termin-karte{grid-area:karte;background:var(--card);border:1px solid #E0B87A;
  border-left:4px solid var(--cta);padding:clamp(16px,2vw,22px);
  display:grid;gap:14px;align-content:start;max-width:46ch}
.termin-karte__zeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  align-items:start}
.termin-karte__sinnbild{color:var(--terrakotta);margin-top:2px;flex:none}
.termin-karte__inhalt{display:grid;gap:1px;min-width:0}
.termin-karte__label{font:700 10.5px/1.4 var(--f-display);letter-spacing:.14em;
  text-transform:uppercase;color:var(--terrakotta)}
/* Das Datum ist die meistgesuchte Angabe und darf deshalb hervorstechen. */
.termin-karte__wert{font:400 var(--fs-m)/1.45 var(--f-text);color:var(--text-braun)}
.termin-karte__zeile:first-child .termin-karte__wert{font-weight:600;
  font-size:calc(var(--fs-m) * 1.12);color:var(--braun-tief)}
.termin-karte__zusatz{font:400 var(--fs-s)/1.45 var(--f-text);color:#6A4620}

/* Eine klare Hauptschaltflaeche statt drei gleichrangiger nebeneinander.
   flex:none verhindert zudem, dass die Beschriftung aus der Flaeche laeuft -
   genau das passierte vorher in der schmalen Schaltflaechenzeile. */
.termin-karte__aktion{display:grid;gap:9px;margin-top:2px}
.termin-karte__haupt{width:100%;justify-content:center;min-height:44px;flex:none;
  white-space:nowrap;font-size:11px}
.termin-karte__neben{margin:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.termin-karte__neben a{font:600 12.5px/1.5 var(--f-text);color:var(--terrakotta);
  text-decoration:underline;text-underline-offset:3px;min-height:24px;
  display:inline-flex;align-items:center}
.termin-karte__neben a:hover{color:var(--cta-hover)}

.termin-detail__text{grid-area:text;min-width:0}
.termin-detail__text > :first-child{margin-top:0}
.termin-detail__text > :last-child{margin-bottom:0}
.termin-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-2);margin:12px 0 24px}

/* (WordPress-Galerie: siehe konsolidiertes Galerie-System weiter oben.) */

@media (max-width:640px){
  .termin-detail{grid-template-columns:1fr;
    grid-template-areas:"plakat" "karte" "text"}
  .termin-detail__plakat{max-width:260px}
  .termin-karte{max-width:none}
}
.termin__offen{font:700 12px/1.3 var(--f-display);letter-spacing:.1em;text-transform:uppercase;
  color:#5A1403;background:#F2BE76;padding:6px 9px;display:inline-block}
.termin--offen{border-style:dashed}

/* Musik: drei Alben nebeneinander plus Player = vier Spalten.
   Dafuer darf der Inhaltsbereich breiter werden als auf den Textseiten. */
@media (min-width:1180px){
  body.page-template-page-musik .zone-haupt{grid-template-columns:minmax(0,1fr) 320px}
  body.page-template-page-musik .alben{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:901px) and (max-width:1179px){
  body.page-template-page-musik .alben{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Termin-Detailseite: drei Spalten brauchen Platz. Der Inhaltsbereich der
   Textseiten ist dafuer zu schmal - die Textspalte fiel auf 0 px zusammen.
   Deshalb hier derselbe breite Rahmen wie auf der Musikseite, und die
   Dreispaltigkeit erst ab einer Breite, in der sie wirklich aufgeht. */
@media (min-width:1180px){
  body.single-afro_event .zone-haupt{max-width:1380px;
    grid-template-columns:minmax(0,1fr) 320px;display:grid;
    gap:clamp(18px,2.4vw,34px);margin:0 auto;background:var(--paper);
    /* Innenrand: ohne ihn klebten Plakat und Text an der Kastenkante. */
    padding:clamp(26px,3vw,40px) var(--pad-band)}
  body.single-afro_event .zone-inhalt{grid-column:1;max-width:none;margin:0;padding:0;background:transparent}
  body.single-afro_event .zone-info{grid-column:2;margin:0;padding:0;background:transparent;
    max-width:none;display:grid;grid-template-columns:1fr;gap:var(--sp-2);align-content:start}
}
/* Eine gemeinsame Bandbreite fuer alle vollflaechigen Baender. Vorher hatten
   Kopf, Merkmalsband, Text und Pressestimmen vier verschiedene linke Kanten
   (68 / 203 / 253 / 306 px) - das wirkte willkuerlich. */
:root{--band-breite:1080px}
.layout-magazin{--band-breite:1180px}
.zone-merkmale,.ws-presse{max-width:var(--band-breite);margin-left:auto;margin-right:auto}
.ws-presse{padding:clamp(22px,3vw,36px) var(--pad-band);background:var(--paper)}
.ws-presse__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-2);margin:14px 0 16px}

/* (Seitenkopf-Farben, Kompaktmasse und 1380px-Flucht: in den
   konsolidierten Basisblock eingearbeitet.) */

/* ------------------------------------------------------------
   Merkmalsband vereinheitlicht. Vorher: Icons, viel Hoehe und
   dunkle Schultern links und rechts, weil das Band schmaler war
   als der Hero darueber. Jetzt volle Hero-Breite, flacher, ohne
   Icons - zwei klare Breiten statt vier (Band voll, Text mittig).
   ------------------------------------------------------------ */
.zone-merkmale > *{padding:13px clamp(14px,1.6vw,22px)}
.zone-merkmale h2,.zone-merkmale h3{margin:0 0 4px;
  font:700 var(--fs-m)/1.25 var(--f-display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--terrakotta)}
.zone-merkmale p{margin:0;font:400 var(--fs-s)/1.45 var(--f-text);color:var(--text-braun)}

/* Eine linke Kante fuer alles: Hero-Text, Merkmalsband und Inhalt sitzen
   im selben zentrierten Raster (Seitenkopf: siehe Basisblock). */
.layout-magazin .zone-merkmale{max-width:var(--band-breite)}
/* (Die frueheren Sonderbloecke "Musik/Termin auf 1380px" und
   "Terminseiten-Merkmalsband" sind ersatzlos entfallen: der Block
   "EIN RASTER FUER ALLE UNTERSEITEN" unten setzt dieselben Werte
   spaeter bei gleicher oder hoeherer Wirkung.) */

/* Der Herotext haengt bewusst NICHT an --band-breite. Als er das tat, begann
   er auf jeder Seite woanders, weil Musik und Termine ein breiteres Raster
   nutzen. Eine feste Kante fuer alle Seiten ist ruhiger als eine, die sich
   pro Vorlage verschiebt. */

/* ============================================================
   EIN RASTER FUER ALLE UNTERSEITEN
   Vorher liefen Musik und Termine auf 1380 px, alle anderen auf
   1080/1180 px - dadurch begannen Baender und Text je nach Seite
   an anderer Stelle. Ab hier gilt ueberall dieselbe Geometrie:
     Aussenkante der Baender  = 1380 px zentriert
     Innenkante des Inhalts   = +44 px Innenrand
   Die Layout-Systeme unterscheiden sich weiterhin in der inneren
   Anordnung, nicht mehr in den Aussenkanten.
   ============================================================ */
@media (min-width:1180px){
  body:not(.home){--band-breite:1380px}
  body:not(.home) .zone-merkmale,
  body:not(.home) .ws-presse,
  body:not(.home) .zone-haupt{max-width:1380px;margin-left:auto;margin-right:auto}
  body:not(.home) .zone-haupt{padding:clamp(26px,3vw,40px) var(--pad-band);
    background:var(--paper)}
  /* FEHLERBEHEBUNG (27.08.2026): Diese Regel entfernte bislang AUCH das
     Innenpolster von .zone-inhalt (padding-left/right:0) - das war nur fuer
     Layouts richtig, bei denen .zone-haupt selbst der sichtbare Kasten ist
     (z.B. Musik-Seite, die dafuer bereits eine eigene, spezifischere Regel
     hat). Auf allen anderen Unterseiten (Standardvorlage, Biographie,
     Kontakt, Termine/Konzerte) TRAEGT .zone-inhalt selbst Hintergrund und
     Rahmen (siehe Grundregel oben) - ohne eigenes Innenpolster stiess der
     Text direkt an dessen Rand. Nur Breite/Aussenrand werden hier
     zurueckgesetzt, das Innenpolster bleibt der Grundregel ueberlassen. */
  body:not(.home) .zone-inhalt{max-width:none;margin-left:0;margin-right:0}
  body:not(.home).layout-magazin .zone-merkmale{max-width:1380px}
  body:not(.home).layout-baender .zone-haupt{padding:clamp(26px,3vw,40px) var(--pad-band)}
  body:not(.home).layout-baender .zone-info{max-width:none;margin:0}
}
@media (min-width:1180px){
  /* Bilderreihe in die gemeinsame 1380px-Flucht: linke Kante trifft
     Inhaltskasten/Hero, symmetrischer Innenrand (gleich der .zone-haupt). */
  body:not(.home) .zone-bilder{max-width:1380px;margin-left:auto;margin-right:auto;
    padding-left:var(--pad-band);padding-right:var(--pad-band)}
}

/* ============================================================
   AUDIT-KORREKTUREN (bewusst am Dateiende: bei gleicher Spezifitaet
   gewinnen sie so per Quelltext-Reihenfolge gegen die frueheren Regeln)
   ============================================================ */

/* (2) CTA-Kleinzeile behaelt ihre Goldfarbe, auch wenn eine Hero-Stimmung
   aktiv ist. Sonst zog 
/* (3a) Ghost-Button-Hover in den Hero-Stimmungen wieder wirksam machen.
   
/* (3b) Ghost-Button im Inhalt (Papiergrund) stimmungsunabhaengig dunkel:
   #5A1403 auf var(--paper) #F8D89D = 9,96:1. Beim Hover invertiert
   (heller Text auf dunklem Grund). body-Praefix hebt die Spezifitaet auf
   (0,2,1), damit die Regel body .zone-inhalt .btn--ghost:hover,
/* (.termin-detail__aktionen ist hier entfallen: Die Terminkarte nutzt keine
   Ghost-Buttons mehr, ihre Nebenwege sind unterstrichene Textlinks.) */
body .page-body .btn--ghost:hover{background:#5A1403;color:var(--creme-hell);border-color:#5A1403}

/* (3c) Ausgefuellte Buttons behalten ihre helle Beschriftung, auch im
   Inhaltsbereich. Die Linkfarbe .page-body a (#93300E, Spezifitaet 0,1,1)
   schlug bisher .btn--fill (0,1,0) - die Beschriftung stand dadurch
   dunkelbraun auf Orange (#93300E auf #B93607 = rund 1,3:1, praktisch
   unlesbar). Betraf jeden ausgefuellten Button im Textbereich, nicht nur
   Termine. Wiederhergestellt wird der vorgesehene Wert #FFE3CE auf
   var(--cta) - ohne die gemessenen Linkfarben selbst anzutasten. */
body .page-body a.btn--fill{color:#FFE3CE}

/* (4) Statusmeldungen auch ausserhalb von .book (Musik-, Kontaktseite).
   .book behaelt seine engere Optik (hoehere Spezifitaet gewinnt).
   Kontrast: --ok 8,3:1, --err 10,4:1. */
.msg--ok{background:#1F4D18;color:#D6F5CC}
.msg--err{background:#5A1508;color:#FFD9CC}
.msg--ok,.msg--err{padding:10px 12px;font:600 14px/1.45 var(--f-text)}

/* (5) "Weiterlesen" liegt in page.php direkt in .zone-haupt. Im Magazin-
   Raster (14 Spalten) muss es in die Inhaltsspalte (2/10), sonst faellt es
   in die schmale Gutter-Spalte. In Layout A (Zonen) unter den Text in die
   Inhaltsspalte, nicht in die 300px-Infospalte. */
.layout-magazin .zone-haupt > .weiter{grid-column:2/10}
.layout-zonen .zone-haupt > .weiter{grid-column:1/2}
@media (max-width:900px){
  .layout-magazin .zone-haupt > .weiter{grid-column:auto}
}

/* (7) CTA-Inhalt auf dieselbe 1380px-Flucht wie alle Baender bringen.
   Der dunkle Verlauf bleibt vollflaechig; nur der Textinhalt wird ueber
   den Innenabstand zentriert (Bandbreite 1380px, Innenrand 44px wie
   .zone-haupt). Unter 1380px greift der bisherige Rand. */
.page-cta{padding-left:max(var(--pad-band),calc((100% - 1380px)/2 + 44px));
  padding-right:max(var(--pad-band),calc((100% - 1380px)/2 + 44px))}
/* Nachtrag Audit-Fix 5: .weiter erbt margin:auto aus der Altregel und
   zentriert sich dadurch im Spaltenbereich statt links zu fluchten. */
body:not(.home) .zone-haupt > .weiter{margin-left:0;margin-right:0}

/* Querschnitt V6 */
/* Ehemalige Inline-Styles aus den Templates, als sprechende Klassen
   gebuendelt - Werte 1:1 uebernommen, Optik unveraendert. */
/* single.php: Anfrage-Karte in der Infospalte */
.karte-lead{margin:0 0 12px;font:400 13px/1.5 var(--f-text)}
.karte-aktion{margin:0 0 10px}
.karte-tel{margin:0;font:400 12.5px/1.5 var(--f-text);color:#E0BE8C}
.btn--voll{width:100%;justify-content:center}
/* front-page.php: Media-Box, Datenschutz-Link im Formularhinweis,
   Referenzen-Link auf dunklem Grund. Der Gold-Modifier gilt auch im
   Hover, weil das Inline-Attribut vorher ebenfalls den Hover uebersteuerte. */
.box__mehr{margin:9px 0 0}
.note-link{color:#E8BE7F;text-decoration:underline}
.quote__mehr{margin:8px 0 0}
.more--gold,.more--gold:hover{color:#F0C063;border-color:#A5722E}

/* ============================================================
   V8: EINHEITLICHER SEITENGRUND
   Bisher war der helle Grund #F2BE76 nur auf der Musikseite
   verdrahtet, alle anderen Unterseiten hatten die dunklen
   Schultern #2C2317. Beim Seitenwechsel sprang dadurch die
   Umfeldfarbe. Jetzt tragen alle Unterseiten denselben Grund.
   Die Startseite bleibt ausgenommen: sie ist der pixelgenaue
   Nachbau der Vorlage und wird nicht angetastet.
   Auf dem Grund selbst steht kein Text - Kopf, Merkmalsband,
   Inhaltskasten, Abschlussband und Fuss bringen eigene Flaechen
   mit, deshalb aendert sich an keinem Kontrast etwas.
   ============================================================ */
body:not(.home) .frame{background:#F2BE76}

/* Das Merkmalsband trennt seine Kacheln bisher mit einer Fugenfarbe,
   die gegen den dunklen Grund gedacht war. Auf hellem Grund wirkt sie
   als harter Rahmen - deshalb die Fuge an den neuen Grund angleichen. */
body:not(.home) .zone-merkmale{background:#D8A867}

/* Der Fuss behaelt sein Dunkel und schliesst die Seite ab; damit die
   Kante zum hellen Grund nicht hart bricht, bekommt er eine ruhige
   Oberkante in der Rahmenfarbe. */
body:not(.home) .foot{border-top:3px solid #D8A867}

/* ============================================================
   V9: VITA ALS ZEITSTRAHL
   Die Biographie lag als flache Aufzaehlung vor. Hier bekommt
   sie eine Achse: links die Jahreszahl, daneben eine Marke auf
   der durchgehenden Linie, rechts der Inhalt.
   ============================================================ */

/* Vorspann: Aussage links, Portraet rechts */
.vita-vorspann{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);
  gap:clamp(18px,2.6vw,34px);align-items:start;margin:0 0 var(--sp-4)}
.vita-vorspann__text{font:400 clamp(17px,1.5vw,20px)/1.6 var(--f-text);color:#43290F}
.vita-vorspann__text p{margin:0;max-width:34ch;font:inherit}
.vita-vorspann__text p::first-letter{float:left;font:700 3.1em/0.82 var(--f-display);
  color:#9C3A0C;margin:2px 10px 0 0}
.vita-vorspann__bild{margin:0}
.vita-vorspann__bild img{width:100%;height:auto;display:block;border:1px solid #D8A867;
  filter:saturate(1.04)}

/* Die Achse */
.vita{list-style:none;margin:var(--sp-3) 0 var(--sp-4);padding:0}
/* Die Linie ist ein Rasterfeld in derselben Spalte wie die Marke und wird
   mittig ausgerichtet. Damit sitzt sie IMMER exakt unter dem Punkt - eine
   per calc() geschaetzte Position lag bei geaenderter Spurbreite daneben. */
.vita__station{display:grid;grid-template-columns:var(--vita-spur, 96px) 16px minmax(0,1fr);
  align-items:start;gap:0 var(--sp-2);padding:0 0 var(--sp-3);position:relative}
.vita__station::before{content:"";grid-column:2;grid-row:1/-1;justify-self:center;
  width:2px;height:100%;background:#D8A867}
.vita__station:first-child::before{background:linear-gradient(180deg,rgba(216,168,103,0) 0%,#C0731F 18px,#D8A867 100%)}
.vita__station:last-child::before{background:linear-gradient(180deg,#D8A867 0%,rgba(216,168,103,0) 100%)}
.vita__station:last-child{padding-bottom:0}

.vita__jahr{grid-column:1;margin:0;text-align:right;
  font:700 clamp(15px,1.35vw,19px)/1.25 var(--f-display);letter-spacing:.02em;
  color:#8A2A10;padding-top:2px}
/* Der Punkt sitzt exakt auf der Linie */
.vita__marke{grid-column:2;grid-row:1;position:relative;z-index:1;width:16px;height:16px;margin-top:5px;border-radius:50%;
  background:#F8D89D;border:3px solid #9C3A0C;box-shadow:0 0 0 4px var(--paper)}
.vita__inhalt{grid-column:3;min-width:0;background:var(--card);border:1px solid #E0B87A;
  padding:var(--sp-2) clamp(14px,1.6vw,20px)}
.vita__inhalt > :first-child{margin-top:0}
.vita__inhalt > :last-child{margin-bottom:0}
.vita__inhalt p{font:400 var(--fs-m)/1.6 var(--f-text);color:#43290F;margin:0 0 8px;max-width:70ch}
.vita__inhalt ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.vita__inhalt li{position:relative;padding-left:20px;
  font:400 var(--fs-m)/1.55 var(--f-text);color:#43290F;max-width:68ch}
.vita__inhalt li::before{content:"✦";position:absolute;left:0;top:0;color:#B4541A;font-size:12px;line-height:1.7}

/* Erste und letzte Station betonen: Anfang und Gegenwart */
.vita__station:first-child .vita__marke{background:#9C3A0C;border-color:#5A1403}
.vita__station:last-child .vita__marke{background:#9C3A0C;border-color:#5A1403}
.vita__station:last-child .vita__inhalt{border-color:#C0731F}

@media (min-width:1180px){ .vita{--vita-spur:118px} }
@media (max-width:760px){
  /* Schmale Geraete: Jahr ueber den Inhalt, Achse an den linken Rand */
  .vita__station{grid-template-columns:16px minmax(0,1fr);gap:0 var(--sp-2);
    padding-bottom:var(--sp-3)}
  .vita__station::before{grid-column:1;grid-row:1/-1}
  .vita__jahr{grid-column:2;grid-row:1;text-align:left;margin:0 0 6px}
  .vita__marke{grid-column:1;grid-row:1}
  .vita__inhalt{grid-column:2;grid-row:2}
  .vita-vorspann{grid-template-columns:1fr}
  .vita-vorspann__bild{max-width:260px}
}
@media (prefers-reduced-motion:reduce){ .vita__inhalt{transition:none} }

/* Links in der HELLEN Infokarte: Sie erbten die goldene Linkfarbe #FFD79A,
   die fuer die dunkle Karte gedacht ist - auf Creme #FDEDCE ergab das 1,18:1,
   also faktisch unsichtbar. Dunkler Ton, geprueft: #8A2A10 = 7,52:1.
   Unterstrich als zusaetzliche Kennzeichnung, damit der Link nicht allein
   ueber die Farbe erkennbar ist. */
.kontakt__karte--hell a{color:#8A2A10;text-decoration:underline;text-underline-offset:2px}
.kontakt__karte--hell a:hover,
.kontakt__karte--hell a:focus-visible{color:#5A1403}
.kontakt__karte--hell .kontakt__liste b a{color:#8A2A10}

/* ============================================================
   V20: BEREICH "ÜBER DEN KÜNSTLER"
   Oben Text neben Bild, darunter eine Trennueberschrift und zwei
   Kaesten mit einem runden "oder" dazwischen. Alle Inhalte kommen
   aus der Datenbank - hier steht ausschliesslich Gestaltung.
   Punktlinien und Trenner sind CSS-Verlaeufe, keine Bilder: sie
   skalieren mit und kosten keinen zusaetzlichen Abruf.
   ============================================================ */
/* Linke Fluchtlinie identisch mit dem Herotext: beide nutzen
   --hero-einzug, das an jedem Breakpoint neben .hero__in gesetzt wird.
   Vorher begann der Bereich 50 px weiter links als die Ueberschrift
   darueber - das las sich wie zwei verschiedene Raster. */
.kuenstler{padding:clamp(26px,3.4vw,50px) clamp(16px,2vw,30px)
  clamp(10px,1.6vw,22px) var(--hero-einzug,39px)}

.kuenstler__oben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(22px,3vw,46px);align-items:start}
.kuenstler__eyebrow{margin:0 0 4px;font:700 var(--fs-m)/1.2 var(--f-display);
  letter-spacing:.16em;text-transform:uppercase;color:var(--terrakotta)}
.kuenstler__name{margin:0;font:700 clamp(30px,4vw,52px)/1 var(--f-display);
  letter-spacing:.01em;text-transform:uppercase;color:var(--accent)}
/* Eigener, dunklerer Ton: --cta (#B93607) erreicht auf dem Sandton des
   Bereichs nur 4,26:1. 18 px fett liegt knapp unter der Schwelle fuer
   "grosse Schrift", also gilt 4,5:1 - #AF3206 kommt auf 4,66:1. */
.kuenstler__rolle{margin:10px 0 0;font:700 clamp(14px,1.35vw,18px)/1.3 var(--f-display);
  letter-spacing:.11em;text-transform:uppercase;color:#AF3206}
.kuenstler__strich{width:62px;height:4px;margin:14px 0 0;background:var(--eyebrow)}
.kuenstler__fliess{margin-top:var(--sp-3)}
.kuenstler__fliess p{margin:0 0 var(--sp-3);font:400 var(--fs-m)/1.75 var(--f-text);color:var(--ink)}
.kuenstler__fliess p:last-child{margin-bottom:0}
.kuenstler__signatur{margin:var(--sp-2) 0 0;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.05em}
.kuenstler__btn{margin:var(--sp-3) 0 0}
.kuenstler__btn:last-child{margin-bottom:0}

/* Strichrahmen wie im Entwurf: Abstand zum Foto, damit die Linie sichtbar
   bleibt und nicht am Motiv klebt. */
.kuenstler__bild{margin:0;padding:7px;border:2px dashed rgba(185,54,7,.55)}
.kuenstler__bild img{display:block;width:100%;height:auto;
  max-height:clamp(280px,38vw,470px);object-fit:cover;object-position:center 30%}

/* Trennueberschrift: Punktlinien links und rechts, mittig der Text.
   Ueber Grid statt Pseudoelement-Gefrickel - so bleibt der Text mittig,
   egal wie lang er ist. */
.kuenstler__trenner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  margin:clamp(28px,3.4vw,46px) 0 clamp(20px,2.4vw,30px)}
.kuenstler__trenner::before,.kuenstler__trenner::after{content:"";height:5px;
  background-image:radial-gradient(circle,rgba(185,54,7,.6) 1.5px,transparent 1.6px);
  background-size:12px 5px;background-repeat:repeat-x}
.kuenstler__trenner span{font:700 clamp(15px,1.5vw,20px)/1.2 var(--f-display);
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap}

.kuenstler__wahl{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.12fr);
  align-items:stretch;gap:0}
.kuenstler__kasten{display:flex;gap:clamp(12px,1.6vw,20px);
  background:var(--card);border:1px solid #E7C68F;
  padding:clamp(16px,2vw,26px)}
/* align-self:flex-start: der Rahmen ums Symbol wurde sonst auf die volle
   Kastenhoehe gestreckt (101x298 statt 101x141) und liess unter dem
   Zeichen 157 px Leerraum stehen. */
.kuenstler__symbol{flex:0 0 clamp(64px,7vw,104px);align-self:flex-start;
  margin:0;color:var(--cta)}
.kuenstler__symbol img{display:block;width:100%;height:auto}
.kuenstler__svg{display:block;width:100%;height:auto}
.kuenstler__kastentext{min-width:0}
.kuenstler__kasten h4{margin:0;font:700 clamp(17px,1.8vw,23px)/1.2 var(--f-display);
  letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
/* Genauer adressiert als noetig aussieht: ".kuenstler__kasten p" ist
   spezifischer als eine einzelne Klasse und faerbte die Unterzeile sonst
   dunkelbraun statt orange - gemessen war sie farblich nicht vom
   Fliesstext zu unterscheiden. */
.kuenstler__kasten p.kuenstler__unter{margin:6px 0 var(--sp-2);
  font:700 var(--fs-s)/1.35 var(--f-display);
  letter-spacing:.09em;text-transform:uppercase;color:#AF3206}
.kuenstler__kasten p{margin:0 0 var(--sp-2);font:400 var(--fs-m)/1.65 var(--f-text);color:var(--ink)}

/* Das runde "oder" sitzt zwischen den Kaesten und ueberlappt beide
   Kanten - deshalb negative Aussenabstaende statt einer eigenen Spalte. */
.kuenstler__oder{align-self:center;margin:0 -21px;z-index:2;position:relative}
.kuenstler__oder span{display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--braun-tief);
  color:var(--gold-hell);font:700 var(--fs-xs)/1 var(--f-display);
  letter-spacing:.1em;text-transform:uppercase}

.kuenstler__projekte{list-style:none;margin:var(--sp-2) 0 0;padding:0}
.kuenstler__projekte li{border-bottom:1px solid rgba(138,42,16,.28)}
.kuenstler__projekte a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:34px;padding:5px 0;text-decoration:none;
  font:700 var(--fs-m)/1.4 var(--f-text);color:var(--text-braun)}
.kuenstler__projekte a:hover,.kuenstler__projekte a:focus-visible{color:var(--accent)}
.kuenstler__projekte .pfeil{color:var(--cta);font-size:1.2em;line-height:1}

@media (max-width:900px){
  .kuenstler__oben{grid-template-columns:1fr}
  /* Untereinander ergibt die mittlere Spalte keinen Sinn: das "oder"
     rueckt zwischen die Kaesten, nicht mehr daneben. */
  .kuenstler__wahl{grid-template-columns:1fr}
  .kuenstler__oder{margin:-21px auto;justify-self:center}
  .kuenstler__trenner{gap:10px}
}

/* ============================================================
   V15: BANNER "EHEMALIGE FORMATION"
   Ein Streifen ueber die volle Breite, direkt unter dem Hero und
   damit vor allen Inhalten - auch fuer Screenreader, die der
   Quelltextfolge folgen. Farben aus der Palette: --braun-tief auf
   --gold-hell ergibt 10,2:1 und liegt damit deutlich ueber der
   AA-Schwelle. Bewusst kein Rot: der Hinweis ordnet ein, er warnt
   nicht.
   ============================================================ */
.ehemalig-banner{background:var(--braun-tief);border-top:1px solid rgba(255,201,120,.35);
  border-bottom:1px solid rgba(255,201,120,.35)}
.ehemalig-banner p{max-width:1380px;margin:0 auto;
  padding:clamp(10px,1.4vw,15px) clamp(20px,3vw,44px);
  display:flex;align-items:center;gap:11px;
  font:700 var(--fs-s)/1.35 var(--f-display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-hell)}
.ehemalig-banner svg{flex:0 0 auto;width:17px;height:17px;fill:currentColor}

/* V17: Die kleinen Marken auf den Kacheln sind wieder entfallen. Der Hinweis
   steht jetzt ausschliesslich als Banner auf der Besetzungsseite selbst. */

/* ============================================================
   V10: BESETZUNGSBAND statt dekorativem Bildstreifen
   Vorher: derselbe Dreierstreifen auf jeder Einzelseite, im
   Magazin-Raster in 12 Spalten versetzt gestaffelt (515/408/302
   breit, unterschiedlich hoch, nicht buendig) - wirkte verloren.
   Jetzt: gleich grosse Kacheln, die zu den Besetzungen fuehren.
   ============================================================ */
.besetzungsband{max-width:1380px;margin:0 auto;padding:var(--sp-4) clamp(20px,3vw,44px);
  background:var(--paper)}
.besetzungsband h2{margin:0 0 var(--sp-2);font:700 var(--fs-h2)/1.2 var(--f-display);
  letter-spacing:.02em;text-transform:uppercase;color:#750E04}
.besetzungsband__liste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-2)}
.besetzungsband__liste li{min-width:0}
.besetzungsband__liste a{display:block;text-decoration:none;background:var(--card);
  border:1px solid #E0B87A;height:100%}
.besetzungsband__liste img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .35s ease}
@media (prefers-reduced-motion:reduce){ .besetzungsband__liste img{transition:none} }
.besetzungsband__liste a:hover img,
.besetzungsband__liste a:focus-visible img{transform:scale(1.03)}
.besetzungsband__liste a:hover,.besetzungsband__liste a:focus-visible{border-color:#B4541A}
.besetzungsband__name{display:block;padding:12px 14px 0;
  font:700 var(--fs-l)/1.25 var(--f-display);letter-spacing:.02em;text-transform:uppercase;
  color:#8A2A10}
.besetzungsband__unter{display:block;padding:3px 14px 14px;
  font:400 var(--fs-s)/1.5 var(--f-text);color:#43290F}

/* ============================================================
   V11: PRESSESTIMMEN ALS ZITATWAND
   Vorher 31.000 Zeichen als durchgehende Folge aus Ueberschrift
   und Absaetzen. Jetzt: Zitate als Karten, nach Bereich
   gruppiert, lange Artikel zum Aufklappen.
   ============================================================ */

.presse-anriss{font:400 clamp(16px,1.4vw,19px)/1.6 var(--f-text);color:#43290F;
  max-width:60ch;margin:0 0 var(--sp-3)}

/* Sprungmarken zu den Bereichen */
.presse-sprung{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--sp-4)}
.presse-sprung a{display:inline-block;padding:8px 14px;min-height:24px;
  background:var(--card);border:1px solid #D8A867;text-decoration:none;
  font:700 12px/1.4 var(--f-display);letter-spacing:.09em;text-transform:uppercase;
  color:#8A2A10}
.presse-sprung a:hover,.presse-sprung a:focus-visible{background:#8A2A10;color:#FFEFD6;
  border-color:#8A2A10}

.presse-gruppe{margin:0 0 var(--sp-5)}
.presse-gruppe > h2{margin:0 0 var(--sp-2);padding-bottom:8px;
  border-bottom:2px solid #D8A867;scroll-margin-top:90px}

/* Die Wand: Karten unterschiedlicher Hoehe nebeneinander.
   Spalten statt Raster, damit kurze Zitate keine Luecken reissen. */
.presse-wand{columns:2;column-gap:var(--sp-2)}
@media (max-width:820px){ .presse-wand{columns:1} }

.presse-karte{break-inside:avoid;margin:0 0 var(--sp-2);padding:var(--sp-2) clamp(16px,1.8vw,22px);
  background:var(--card);border:1px solid #E0B87A;position:relative}
/* Kein dekoratives Anfuehrungszeichen: Die Originaltexte bringen ihre eigenen
   mit, ein zusaetzliches stand doppelt davor. Stattdessen ein farbiger Balken
   als ruhige Kennzeichnung. */
.presse-karte{border-left:4px solid #C0731F}
.presse-karte blockquote{margin:0;padding:0;border:0;background:none}
.presse-karte blockquote p{margin:0 0 8px;font:400 var(--fs-m)/1.62 var(--f-text);color:#43290F}
.presse-karte blockquote p:last-child{margin-bottom:0}
.presse-karte figcaption{margin:10px 0 0;
  font:700 12.5px/1.4 var(--f-display);letter-spacing:.08em;text-transform:uppercase;
  color:#8A2A10}
.presse-karte figcaption::before{content:"— "}

/* Lange Artikel: Quelle sichtbar, Text auf Wunsch */
.presse-karte--lang{background:#F6DFB4;border-color:#C0731F}
.presse-karte--lang summary{cursor:pointer;list-style:none}
.presse-karte--lang summary::-webkit-details-marker{display:none}
.presse-karte__quelle{display:block;font:700 var(--fs-l)/1.3 var(--f-display);
  letter-spacing:.02em;color:#750E04}
.presse-karte__mehr{display:inline-block;margin-top:5px;min-height:24px;
  font:700 12px/24px var(--f-display);letter-spacing:.08em;text-transform:uppercase;
  color:#8A2A10;text-decoration:underline;text-underline-offset:3px}
.presse-karte--lang summary::after{content:" ▾";color:#8A2A10}
.presse-karte--lang details[open] summary::after{content:" ▴"}
.presse-karte--lang details[open] .presse-karte__mehr{color:#6A4620;text-decoration:none}
.presse-karte--lang blockquote{margin-top:var(--sp-2);padding-top:var(--sp-2);
  border-top:1px solid #D8A867}
.presse-karte--lang summary:focus-visible{outline:3px solid #7A1E05;outline-offset:2px}

.presse-hinweis{margin:var(--sp-3) 0 0;padding-top:var(--sp-2);border-top:1px solid #D8A867;
  font:400 var(--fs-s)/1.55 var(--f-text);color:#6A4620;max-width:70ch}

/* Referenzkarten: heller abgesetzt, Anlass unter dem Namen */
.presse-karte--ref{border-left-color:#8A2A10;background:#F6DFB4}
.presse-karte__anlass{display:block;margin-top:2px;
  font:400 12px/1.45 var(--f-text);letter-spacing:0;text-transform:none;color:#6A4620}

/* ============================================================
   V12: FORMATIONSSEITEN MIT LEBEN
   Die Beitraege tragen nur ~450 Zeichen. Die Seite holt sich
   Fotos, Alben und Pressestimmen dazu - hier deren Gestaltung.
   ============================================================ */

/* Einleitung: Text links, Pressestimme als Blickfang rechts */
.form-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  gap:clamp(18px,2.4vw,32px);align-items:start;margin:0 0 var(--sp-4)}
.form-kopf__text > :first-child{margin-top:0}
.form-kopf__text p{font:400 clamp(16px,1.4vw,18px)/1.65 var(--f-text);color:#43290F;max-width:62ch}
@media (max-width:860px){ .form-kopf{grid-template-columns:1fr} }

.form-stimme{background:#F6DFB4;border-left:4px solid #C0731F;padding:var(--sp-2) clamp(14px,1.6vw,20px)}
.form-stimme blockquote{margin:0;padding:0;border:0;background:none}
.form-stimme blockquote p{margin:0;font:400 var(--fs-m)/1.6 var(--f-text);color:#43290F}
.form-stimme__quelle{margin:10px 0 0;font:700 12px/1.4 var(--f-display);letter-spacing:.09em;
  text-transform:uppercase;color:#8A2A10}
.form-stimme__quelle::before{content:"— "}

/* Bildband der Besetzung */
.form-bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--sp-1);margin:var(--sp-2) 0 var(--sp-4)}
.form-bilder a{display:block;overflow:hidden;border:1px solid #D8A867}
.form-bilder img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .35s ease}
.form-bilder a:hover img,.form-bilder a:focus-visible img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .form-bilder img{transition:none} }

/* Alben dieser Besetzung */
.form-alben{display:grid;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3)}
.form-album{display:grid;grid-template-columns:minmax(120px,168px) minmax(0,1fr);
  gap:var(--sp-2);background:var(--card);border:1px solid #E0B87A;padding:var(--sp-2)}
.form-album > img{width:100%;height:auto;display:block;border:1px solid #D8A867}
.form-album__text{min-width:0}
.form-album__text h3{margin:0 0 8px;font:700 var(--fs-l)/1.25 var(--f-display);
  letter-spacing:.02em;text-transform:uppercase;color:#750E04}
.form-album__text h3 span{font-weight:400;color:#6A4620}
.form-album__text p{margin:10px 0 0}
@media (max-width:560px){ .form-album{grid-template-columns:1fr} .form-album > img{max-width:200px} }

/* Der Abspielbereich sitzt in der Seitenspalte unter den Eckdaten und laeuft
   beim Scrollen mit - wie auf der Musikseite. */
.single-afro_formation .player--dock{position:sticky;top:77px;margin:0}
@media (max-width:900px){ .single-afro_formation .player--dock{position:static} }

.form-presse{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-2);margin:var(--sp-2) 0}

/* Die vier Kreise neben der Vertrauenszeile sind entfallen - sie waren reine
   Zierde ohne Aussage. Die Zeile steht jetzt fuer sich. */
.trust{gap:0}

/* ============================================================
   V22: EINWILLIGUNGSBANNER
   Unten angeheftet, volle Breite, ueber allem. Bewusst KEIN
   abdunkelnder Vorhang ueber der Seite: die Inhalte bleiben
   lesbar, niemand wird zur Entscheidung genoetigt.
   Beide Schaltflaechen sind gleich gross und gleich auffaellig -
   Ablehnen darf nicht schwerer sein als Zustimmen.
   ============================================================ */
.einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--braun-tief);color:var(--creme-hell);
  border-top:3px solid var(--eyebrow);
  box-shadow:0 -8px 28px rgba(0,0,0,.35)}
.einwilligung[hidden]{display:none}
.einwilligung__in{max-width:1180px;margin:0 auto;
  padding:clamp(14px,1.8vw,22px) clamp(16px,3vw,32px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,32px)}
.einwilligung__text{flex:1 1 420px;min-width:0}
.einwilligung__text h2{margin:0 0 6px;font:700 var(--fs-l)/1.25 var(--f-display);
  letter-spacing:.04em;text-transform:uppercase;color:var(--gold-hell)}
.einwilligung__text p{margin:0;font:400 var(--fs-s)/1.6 var(--f-text);color:var(--creme-hell)}
.einwilligung__mehr{margin-top:6px !important}
.einwilligung__mehr a{color:var(--gold-hell);text-decoration:underline;text-underline-offset:3px}
.einwilligung__mehr a:hover,.einwilligung__mehr a:focus-visible{color:#fff}
.einwilligung__wahl{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px}
/* Gleiche Mindestbreite fuer beide: kein optisches Uebergewicht. */
.einwilligung__wahl .btn{min-width:186px;justify-content:center;min-height:44px}
/* Drei Klassen tief adressiert, weil .einwilligung .einwilligung__wahl .btn--ghost:hover,
.einwilligung .einwilligung__wahl .btn--ghost:focus-visible{
  background:var(--gold-hell);color:var(--braun-tief);border-color:var(--gold-hell)}
/* Zustimmen etwas heller, damit beide klar ueber 4,5:1 liegen. */
.einwilligung .einwilligung__wahl .btn--fill{background:#A82F05;color:#FFF1E2}

/* Widerruf in der Rechtszeile - sieht aus wie die Links daneben,
   ist aber eine Schaltflaeche, weil sie nirgendwohin fuehrt. */
.copy__einw{background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;min-height:26px;
  color:#EBCF9A;text-decoration:underline;text-underline-offset:3px;
  font:400 12.5px/1.4 var(--f-text)}
.copy__einw:hover,.copy__einw:focus-visible{color:#fff}

@media (max-width:700px){
  .einwilligung__wahl{width:100%}
  .einwilligung__wahl .btn{flex:1 1 auto;min-width:0}
}

/* Cookie-Tabelle in der Datenschutzerklaerung. Auf schmalen Schirmen
   scrollt sie in sich selbst, statt die Seite breiter zu machen. */
.page-body .ds-cookies{width:100%;border-collapse:collapse;margin:var(--sp-2) 0 var(--sp-3);
  font:400 var(--fs-s)/1.55 var(--f-text)}
.page-body .ds-cookies th,.page-body .ds-cookies td{
  border:1px solid rgba(138,42,16,.3);padding:8px 10px;text-align:left;vertical-align:top}
.page-body .ds-cookies th{background:rgba(138,42,16,.1);font-weight:700;color:var(--accent)}
.page-body .ds-cookies code{font-size:.94em;word-break:break-all}
@media (max-width:640px){
  .page-body .ds-cookies{display:block;overflow-x:auto;white-space:nowrap}
  .page-body .ds-cookies td,.page-body .ds-cookies th{white-space:normal;min-width:9em}
}


/* ============================================================
   Hero-Stimmung — MUSS am Ende stehen
   ============================================================
   Diese Regeln standen zunaechst am Anfang der Datei und wurden dadurch
   von den weiter unten folgenden Grundregeln ueberschrieben (gleiche
   Spezifitaet, spaeteres Vorkommen gewinnt). Sichtbare Folge: Die
   Schlagzeile stand dunkelbraun auf braunem Grund und war praktisch
   unlesbar.

   Im Vorgaenger-Theme lag derselbe Block ebenfalls hinter den
   Grundregeln — dort ueber eine body-Klasse, hier klassenfrei ueber
   die Tokens aus theme.json.
   ============================================================ */

/* Die Hero-Stimmung haengt nicht mehr an einer body-Klasse aus dem
   Customizer, sondern an den Tokens oben — dadurch greift sie ohne
   Sonderregel und ist im Website-Editor umschaltbar. */
.hero{background:var(--hero-a)}
.hero::after{
  background:linear-gradient(100deg,var(--hero-a) 0%,var(--hero-a) 22%,
    color-mix(in srgb,var(--hero-b) 70%,transparent) 40%,
    color-mix(in srgb,var(--hero-b) 22%,transparent) 54%,
    transparent 66%)}
.hero h1 .a{color:var(--hero-h1a)}
.hero h1 .b{color:var(--hero-h1b)}
.eyebrow{color:var(--hero-eye)}
.hero__lead{color:var(--hero-lead)}
.trust{color:var(--hero-trust)}
.btn--ghost{color:var(--hero-lead);border-color:color-mix(in srgb,var(--hero-lead) 55%,transparent)}
/* Kleinzeile im Seitenkopf braucht auf hellem Grund einen dunkleren
   Sonderwert als --hero-eye (gemessen 4,89:1 statt 3,73:1). */
.seitenkopf .eyebrow{color:var(--wp--custom--hero--eyebrow-kopf)}

/* ============================================================
   Anpassungen fuer den Blockeditor-Aufbau
   ============================================================
   Zwei Bereiche erwarten im Vorgaenger-Theme ein festes Raster mit einer
   bestimmten Anzahl direkter Kindelemente. Der Blockeditor erzeugt dort
   eine andere Verschachtelung, weshalb das Raster ins Leere griff und die
   Inhalte zerfielen (Zitat lief einwortig senkrecht, Fusszeile zerlegt).

   Statt die Raster umzubauen — und damit die gemessenen Abstaende zu
   verlieren — werden sie hier auf die tatsaechlich vorhandenen Elemente
   umgestellt.
   ============================================================ */

/* Referenzen + Leistungsversprechen: vier Spalten wie im Vorgaenger
   (Zierbild, Zitat, Versprechen, Zierbild). Die Zierbilder sind
   Gestaltungs-Assets und kommen als ::before/::after-Rasterzellen aus
   inc/rahmen.php - dort sind die Theme-Bildadressen bekannt. Die
   Original-Rasterregel (Zeile ~312) bleibt unveraendert gueltig. */
.strip::before,.strip::after{content:"";background-size:cover;background-position:center}
.strip::before{background-image:var(--strip-l)}
.strip::after{background-image:var(--strip-r)}
@media (max-width:900px){
  .strip::before,.strip::after{display:none}
}

/* Fusszeile: im Vorgaenger sechs feste Spalten. Der Blockeditor legt die
   Spalten in einen eigenen Behaelter, deshalb greift das Raster eine Ebene
   tiefer. */
.foot{display:block}
.foot .wp-block-columns{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:18px;align-items:start;margin:0}
.foot .wp-block-column{margin:0}
@media (max-width:900px){
  .foot .wp-block-columns{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot .wp-block-columns{grid-template-columns:1fr}
}
/* Rechtszeile am Fuss ueber die volle Breite (V18: bewusst dort, mit
   13,3:1 Kontrast — nicht in die Hauptnavigation zurueckverlegen). */
.foot .copy{margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(233,193,119,.25)}