/* Erzeugt aus dem Frontmatter von design/DESIGN.md. Nicht von Hand aendern:
   die Werte kommen aus den Tokens, jede Aenderung dort ist ein Richtungswechsel.

   Die Bildsprache folgt dem Prototyp SRC-016, den SRC-002 als verbindliche
   Vorlage bezeichnet: Vollbild-Header mit zwei Verlaeufen, dunkelgruene
   Baender als Zaesur, Vortraege als Zeilen statt Karten, grosse ruhige
   Serifentypografie. Zwei Dinge des Prototyps gelten hier nicht: seine
   Webfonts (Georgia und Systemschrift stattdessen, siehe ADR-0001) und seine
   ueberholten Farbwerte. */
:root {
  --tiefgruen: #1D6446;
  --dunkelgruen: #133F2D;
  --salbei: #4B725E;
  --gold: #C5A059;
  --golddunkel: #8A6D2F;
  --creme: #FCFBF7;
  --sand: #F1EADC;
  --linie: #E4E2DA;
  --schwarz: #1A1A1A;
  --grau: #5C5A54;
  --tiefgruen-rgb: 29, 100, 70;
  --dunkelgruen-rgb: 19, 63, 45;
  --salbei-rgb: 75, 114, 94;
  --gold-rgb: 197, 160, 89;
  --golddunkel-rgb: 138, 109, 47;
  --creme-rgb: 252, 251, 247;
  --sand-rgb: 241, 234, 220;
  --linie-rgb: 228, 226, 218;
  --schwarz-rgb: 26, 26, 26;
  --grau-rgb: 92, 90, 84;
  --schrift-serif: Georgia, 'Times New Roman', serif;
  --schrift-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 32px);
  --abschnitt-y: clamp(64px, 9vw, 110px);
  --textbreite: 68ch;
  /* Steht als Token bereit, wird seit dem 01.09.2026 von keiner Flaeche mehr
     benutzt: Die Pille am Presseweg war die letzte und ist entfallen. Der Wert
     bleibt im Frontmatter, dessen Aenderung waere ein Richtungswechsel. */
  --knopf-radius: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--schwarz);
  font-family: var(--schrift-system);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border-radius: 0; }
a { color: var(--tiefgruen); }
:focus-visible { outline: 2px solid var(--golddunkel); outline-offset: 2px; }

.huelle { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.schmal { max-width: 680px; }
.abschnitt { padding: var(--abschnitt-y) 0; }
/* Impressum, Datenschutz und die Fehlerseite tragen beide Klassen an einem
   Element. Die Kurzform oben setzt den seitlichen Abstand dabei auf null und
   schlaegt .huelle, weil sie spaeter steht: Der Text klebte am Fensterrand.
   Gefunden am 01.09.2026 beim Bau der Fehlerseite. */
.abschnitt.huelle { padding-left: var(--gutter); padding-right: var(--gutter); }
/* Auf Impressum, Datenschutz und Fehlerseite folgen Ueberschriften und
   Absaetze unmittelbar aufeinander, ohne Raster dazwischen. Ohne diese Regel
   klebt jede Zwischenueberschrift am Absatz darueber. */
.abschnitt.huelle h3 { margin-top: 44px; margin-bottom: 12px; }
.abschnitt.huelle h2 + h3 { margin-top: 32px; }
.abschnitt.huelle p + p { margin-top: 14px; }
.abschnitt.huelle .fein { margin-top: 14px; max-width: var(--textbreite); }
.abschnitt.huelle .rahmen { margin-top: 8px; }
.abschnitt--sand { background: var(--sand); }
.abschnitt--dunkel { background: var(--dunkelgruen); color: var(--creme); }
.abschnitt--dunkel h2 { color: var(--creme); }
.abschnitt--dunkel .kicker { color: var(--sand); }
/* Auf Sand faellt Golddunkel auf 4,07 und damit unter die Schwelle fuer
   normalen Text. Die Regel dagegen steht seit dem Design-Lock in
   design/DESIGN.md; umgesetzt war sie in dieser Fassung nicht. Nachgetragen
   am 31.08.2026 bei der Durchsicht der fuenf Fassungen. */
.abschnitt--sand .kicker { color: var(--tiefgruen); }

h1, h2, h3 { font-family: var(--schrift-serif); font-weight: 400; margin: 0; }
h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.15;
  color: var(--tiefgruen);
  letter-spacing: -0.4px;
  margin-bottom: 32px;
}
h3 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; color: var(--tiefgruen); }

p { max-width: var(--textbreite); margin: 0; }
p + p { margin-top: 22px; }

.kicker {
  font-family: var(--schrift-system);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--golddunkel);
  margin: 0 0 26px;
}
.fein { font-size: 14px; line-height: 1.5; color: var(--grau); }
.gross { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; }

/* Knoepfe. Scharfkantig wie in SRC-016. Die frueher hier gesetzte Vollrundung
   war eine Fehlableitung aus dem Prototyp: Dort ist der Knopf eckig, rund war
   allein die Pille am Presseweg. Korrigiert am 01.09.2026, und am selben Tag
   ist auch die Pille gefallen. Jede Flaeche der Seite ist jetzt scharfkantig. */
.knopf {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
}
.knopf--primaer { background: var(--tiefgruen); color: var(--creme); }
.knopf--primaer:hover { background: var(--dunkelgruen); }
.knopf--sekundaer { border-color: var(--tiefgruen); color: var(--tiefgruen); }
.knopf--sekundaer:hover { border-color: var(--salbei); color: var(--salbei); }
.knopf--hell { border-color: rgba(var(--creme-rgb), 0.55); color: var(--creme); }
.knopf--hell:hover { border-color: var(--creme); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* 01 Kopf. Vollbild mit zwei Schleiern: einer nimmt die Bildunterkante nach
   Dunkelgruen, der andere dunkelt die linke Seite ab, damit die Schrift auf
   jedem Motiv liegt und der Kernsatz ohne Scrollen lesbar ist. */
/* Die Hoehe waechst auf breiten Schirmen mit. Feste 760px hiessen bei 2560
   Punkten Breite ein Verhaeltnis von 3,3 zu 1 gegen ein Bild von 1,5 zu 1:
   sichtbar blieben 45 Prozent der Bildhoehe, und weil Caroles Kopf zwischen
   9 und 40 Prozent sitzt, war genau der Kopf zu sehen und sonst nichts.
   46vw haelt den Ausschnitt auf breiten Schirmen bei rund 64 Prozent, also
   Kopf bis Huefte. Unterhalb von etwa 1650 Punkten aendert sich nichts, dort
   bleiben die 760px die groessere Zahl. 84vh deckelt weiterhin nach oben,
   damit der Kernsatz ohne Scrollen lesbar bleibt. */
.kopf { position: relative; overflow: hidden; height: min(84vh, max(760px, 46vw)); min-height: 560px; background: var(--dunkelgruen); }
.kopf > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 20%; }
.kopf .schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--dunkelgruen-rgb), 0.24) 0%,
    rgba(var(--dunkelgruen-rgb), 0) 22%,
    rgba(var(--dunkelgruen-rgb), 0) 44%,
    rgba(var(--dunkelgruen-rgb), 0.58) 76%,
    rgba(var(--dunkelgruen-rgb), 0.94) 93%,
    var(--dunkelgruen) 100%);
}
.kopf .schleier2 {
  position: absolute; inset: 0;
  background: linear-gradient(92deg,
    rgba(var(--dunkelgruen-rgb), 0.80) 0%,
    rgba(var(--dunkelgruen-rgb), 0.44) 30%,
    rgba(var(--dunkelgruen-rgb), 0) 54%);
}
.kopf .inhalt { position: absolute; inset: auto 0 0 0; padding-bottom: 72px; color: var(--creme); }
.kopf .spalte { max-width: 540px; }
.kopf .marke { font-size: 11px; letter-spacing: 4.4px; text-transform: uppercase; margin: 0 0 20px; opacity: 0.9; }
.kopf h1 { font-size: clamp(42px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.8px; }
.kopf .satz { font-family: var(--schrift-serif); font-style: italic; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.24; color: var(--sand); margin-top: 30px; max-width: none; }

/* Zahlenband. Die Trennstriche sind Gold als Linie, nie als Schrift. */
.zahlen { background: var(--dunkelgruen); color: var(--creme); padding: 44px 0 48px; }
.zahlen .rolle {
  max-width: 900px; margin: 0 auto 40px; padding-bottom: 32px;
  text-align: center; font-size: clamp(11px, 1vw, 12px);
  letter-spacing: 2.6px; text-transform: uppercase; line-height: 2;
  font-weight: 600; color: var(--sand);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.3);
}
.zahlen .reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 32px; text-align: center; }
.zahlen .reihe > div + div { border-left: 1px solid rgba(var(--gold-rgb), 0.3); }
.zahlen b { display: block; font-family: var(--schrift-serif); font-size: clamp(30px, 3.2vw, 44px); line-height: 1; color: var(--creme); margin-bottom: 10px; }
.zahlen span { font-size: 13px; letter-spacing: 0.9px; line-height: 1.6; color: var(--sand); }

/* 02 Beweisleiste als Reihe von Marken-Plaketten. Bis zum 01.09.2026 war das
   eine Zeile aus Textlinks, die sich als Fussnote las. Jeder Beleg hat jetzt
   eine eigene Flaeche mit Rahmen: gleich hoch, gleich breit, damit Logo und
   Wortmarke nebeneinander stehen koennen, ohne dass die Reihe kippt. */
.beweis { padding: 52px 0 56px; text-align: center; border-bottom: 1px solid var(--linie); }
.beweis .lab { font-size: 10px; letter-spacing: 3.2px; text-transform: uppercase; color: var(--grau); font-weight: 600; margin: 0 0 28px; max-width: none; }
/* Drei Spalten auf breiten Schirmen, zwei Reihen zu drei Plaketten. Sechs in
   einer Reihe waren moeglich, solange dort Wortmarken standen; mit den echten
   Logos nicht mehr: Der Schriftzug "Healthcare Marketing" hat 9 zu 1, in einer
   164 Punkte breiten Spalte waere er 15 Punkte hoch und unleserlich neben dem
   fast quadratischen Zeichen von Bild der Frau. */
.beweis__liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; }
.plakette {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 100%; min-height: 124px; padding: 24px 20px;
  background: var(--creme); border: 1px solid var(--linie);
  text-decoration: none; color: var(--salbei);
}
.plakette:hover { border-color: var(--gold); background: var(--sand); }
.plakette .wortmarke { font-family: var(--schrift-serif); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.2; color: var(--salbei); }
.plakette:hover .wortmarke { color: var(--tiefgruen); }
/* Ein gemeinsamer Kasten statt einer gemeinsamen Hoehe: Die sechs Logos gehen
   von 9 zu 1 bis fast quadratisch. Ueber max-height und max-width fuellt das
   breite Wortzeichen die Spalte und das hohe die Zeile, und keines wird
   verzerrt. Graustufen und Deckkraft nehmen ihnen die Buntheit, wie SRC-002
   es fuer diese Stelle verlangt; beim Ueberfahren kommen sie zurueck. */
.plakette img { max-height: 48px; max-width: 82%; width: auto; height: auto; filter: grayscale(1); opacity: 0.7; }
.plakette:hover img { filter: grayscale(0); opacity: 1; }
.plakette .hinweis { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--grau); }

/* 03 Die grosse Idee */
.idee p:last-of-type { font-family: var(--schrift-serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.22; color: var(--tiefgruen); margin-top: 34px; }

/* Vollbild-Band als Zaesur, mit dem Kernsatz darauf wie in SRC-016. Der
   Schleier laeuft nur im unteren Drittel zu: Er traegt die Schrift, ohne das
   Motiv zuzudecken. */
.band { position: relative; overflow: hidden; line-height: 0; background: var(--dunkelgruen); }
.band img { width: 100%; }
.band .schleier {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--dunkelgruen-rgb), 0) 30%,
    rgba(var(--dunkelgruen-rgb), 0.34) 52%,
    rgba(var(--dunkelgruen-rgb), 0.76) 72%,
    rgba(var(--dunkelgruen-rgb), 0.9) 100%);
}
.band .zit { position: absolute; left: 0; right: 0; bottom: 11%; padding: 0 clamp(24px, 4vw, 60px); text-align: center; }
.band .zit q {
  quotes: none; display: block; font-family: var(--schrift-serif); font-style: italic;
  font-size: clamp(22px, 3.6vw, 54px); line-height: 1.14; color: var(--creme);
  letter-spacing: -0.3px; max-width: 26ch; margin: 0 auto;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.6);
}
.band .zit .wer {
  margin: 20px auto 0; max-width: none; font-family: var(--schrift-serif); font-style: italic;
  font-size: clamp(12px, 1.2vw, 18px); letter-spacing: 0.6px; line-height: 1.5;
  color: var(--sand); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* 04 Vortraege als Zeilen, nicht als Karten */
.format { display: grid; grid-template-columns: 66px 1fr 270px; gap: 38px; padding: 40px 0; border-top: 1px solid var(--linie); align-items: start; }
.format:last-of-type { border-bottom: 1px solid var(--linie); }
.format .nr { font-family: var(--schrift-serif); font-size: 40px; line-height: 1; color: var(--golddunkel); }
.format p { font-size: 16px; margin-top: 12px; }
.format .rand { font-size: 13.5px; color: var(--grau); line-height: 1.72; padding-top: 6px; }
.format .rand b { display: block; color: var(--tiefgruen); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
/* Der Knopf stand als inline-block hinter dem Fliesstext und wurde damit selbst
   zur letzten Textzeile: Bei Format 03 rutschte er neben das Wort "online", bei
   01 und 02 riss die Zeilenhoehe des Absatzes eine Luecke ueber ihm auf. Als
   eigener Block mit fit-content sitzt er auf einer eigenen Zeile und traegt
   genau den Abstand, der hier steht. Gefunden am 01.09.2026 in der zweiten
   Durchsicht. */
.format .rand a { display: block; width: fit-content; margin-top: 18px; font-size: 14px; color: var(--tiefgruen); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.format .rand a:hover { border-bottom-color: var(--tiefgruen); }

/* 05 Was das Publikum mitnimmt, als Kacheln mit Schattenziffer */
.nimmt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; list-style: none; padding: 0; }
.kachel { background: var(--sand); padding: 26px; position: relative; overflow: hidden; min-height: 178px; }
.kachel .n { position: absolute; right: 14px; top: 2px; font-family: var(--schrift-serif); font-size: 62px; line-height: 1; color: var(--tiefgruen); opacity: 0.16; }
.kachel b { position: relative; font-family: var(--schrift-serif); font-size: 24px; color: var(--tiefgruen); font-weight: 400; display: block; margin-bottom: 12px; line-height: 1.1; }
.kachel .strich { width: 28px; height: 2px; background: var(--gold); margin-bottom: 14px; }
.kachel span { font-size: 14.5px; line-height: 1.62; }
.kachel:nth-child(4), .kachel:nth-child(5) { background: var(--dunkelgruen); }
.kachel:nth-child(4) b, .kachel:nth-child(5) b { color: var(--creme); }
.kachel:nth-child(4) span, .kachel:nth-child(5) span { color: var(--sand); }
.kachel:nth-child(4) .n, .kachel:nth-child(5) .n { color: var(--creme); opacity: 0.26; }

/* 06 Was sie auf der Buehne besonders macht.
   min(400px, 100%) statt 400px: Eine Spur mit fester Mindestbreite schrumpft
   nicht mit. Bei 412 Punkten Fensterbreite blieb die Spur 400 Punkte breit,
   begann aber erst hinter dem Seitenrand, also endete die Seite bei 421 und
   jede Zeile war rechts angeschnitten. Genau das zeigt der Screenshot in
   Ticket 13, aufgenommen auf einem Galaxy S25 Ultra. Dieselbe Falle steckte
   in .zahlen .reihe und .stufen; dort war sie nur noch nicht sichtbar, weil
   170 und 280 Punkte unter jede gaengige Fensterbreite passen. */
.gruende { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 0 70px; margin-top: 32px; }
.gr { padding: 26px 0 26px 62px; position: relative; border-top: 1px solid var(--linie); }
.gr .z { position: absolute; left: 0; top: 32px; font-family: var(--schrift-serif); font-size: 34px; line-height: 1; color: var(--golddunkel); }
.gr b { font-family: var(--schrift-serif); font-size: clamp(23px, 2.4vw, 28px); color: var(--tiefgruen); font-weight: 400; display: block; margin-bottom: 12px; line-height: 1.18; }
.gr span { font-size: 16.5px; line-height: 1.7; display: block; }

/* 07 Termine. Wie in SRC-016 eine dunkle Flaeche ueber einem Foto: Das Bild
   liegt als Fuellung darunter, der Filter nimmt ihm fast alles bis auf die
   Struktur. Fast deckend, nicht halb: Auf dem Foto steht Text, und der Kontrast
   muss unabhaengig vom Bildausschnitt halten. */
.terminflaeche { position: relative; overflow: hidden; background: var(--dunkelgruen); color: var(--creme); }
.terminflaeche > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.terminflaeche .filter {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--dunkelgruen-rgb), 0.95) 0%,
    rgba(var(--dunkelgruen-rgb), 0.92) 40%,
    rgba(var(--dunkelgruen-rgb), 0.97) 100%);
}
.terminflaeche .inhalt { position: relative; }
.terminflaeche h2 { color: var(--creme); }
/* Der Prototyp setzt Dachzeile und Datum in Gold. Hier nicht: Gold ist laut
   design/DESIGN.md nur Linie und Flaeche, nie Schrift, und auf dem
   durchscheinenden Bild faellt sein Kontrast im hellsten Fall auf 3,5 zu 1.
   Sand traegt beides und ist dieselbe Wahl wie im dunklen Angebotsabschnitt.
   Gold bleibt die Linie unter jeder Zeile. */
.terminflaeche .kicker { color: var(--sand); }
.terminflaeche .termine div { border-bottom-color: rgba(var(--gold-rgb), 0.28); }
.terminflaeche .termine .d { color: var(--sand); }
.terminflaeche .termine .w { color: var(--sand); }
.terminflaeche .termine .w b { color: var(--creme); }

.termine div { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.termine .d { font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--golddunkel); font-weight: 600; }
.termine .w { font-size: 17.5px; }
.termine .w b { font-weight: 600; color: var(--tiefgruen); }

/* 08 Das eigentliche Angebot, dunkel */
.stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 44px; margin-top: 52px; }
/* Die drei Motive stehen ueber der Goldlinie, wie in SRC-016. Ein gemeinsames
   Seitenverhaeltnis haelt die drei Stufen auf gleicher Hoehe, obwohl die
   Originale hoch, quer und breit sind. */
.stufe .bild { margin-bottom: 22px; line-height: 0; background: rgba(var(--creme-rgb), 0.06); }
/* Der Ausschnitt sitzt etwas hoeher als mittig. Bei den beiden Querformaten
   aendert das kaum etwas, beim hochformatigen Vortragsbild holt es Carole und
   das Flipchart ins Bild statt der leeren Tischplatte darunter. */
.stufe .bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
.stufe .linie { height: 1px; background: rgba(var(--gold-rgb), 0.5); margin-bottom: 20px; }
.stufe b { font-family: var(--schrift-serif); font-size: 30px; color: var(--creme); font-weight: 400; display: block; margin-bottom: 14px; }
.stufe span { font-size: 16.5px; color: var(--sand); line-height: 1.75; }

/* Textseiten: Impressum, Datenschutz, Fehlerseite. Jede traegt ihre
   Seitenueberschrift als h1, damit jede Seite genau eine hat; die Groesse ist
   die der uebrigen Seitenueberschriften, nicht die des Kopfes. */
.abschnitt.huelle > h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.15; color: var(--tiefgruen); letter-spacing: -0.4px; margin-bottom: 24px; }
.fehlseite .gross { color: var(--grau); }

/* 07b Veranstalterstimme. Eine Flaeche, ein Zitat, ein Name. Kein Portraet:
   von Florian Giermann liegt keines vor, und ein Platzhalterkopf waere ein
   leeres Fach.

   Das Zitat stand bis zum 01.09.2026 linksbuendig in einer 62 Zeichen breiten
   Spalte, und rechts daneben blieben im Inhaltsbereich fast 420 Punkte leer.
   Mittig gesetzt traegt es die Flaeche allein, wie der Schlusssatz weiter
   unten auch. */
.stimme { text-align: center; }
.stimme blockquote { margin: 0 auto; max-width: 62ch; }
.stimme blockquote p { font-family: var(--schrift-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.45; color: var(--tiefgruen); max-width: none; }
.stimme blockquote footer { margin-top: 22px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--grau); }

/* 09 Wer hier spricht */
.person { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.werte .oben { font-family: var(--schrift-serif); font-size: clamp(28px, 3.4vw, 44px); color: var(--tiefgruen); line-height: 1.14; letter-spacing: -0.5px; margin: 0; max-width: none; }
.werte .unten { font-family: var(--schrift-serif); font-size: clamp(22px, 2.6vw, 32px); color: var(--salbei); line-height: 1.14; margin: 0 0 30px; max-width: none; }

/* 09b Der Satz zum Schluss */
.zitat { padding: 78px 0; text-align: center; background: var(--sand); }
.zitat q { quotes: none; display: block; font-family: var(--schrift-serif); font-size: clamp(30px, 4.2vw, 52px); line-height: 1.12; color: var(--tiefgruen); max-width: 22ch; margin: 0 auto; letter-spacing: -0.4px; }
.zitat .u { font-size: 11px; letter-spacing: 2.8px; text-transform: uppercase; color: var(--grau); margin: 0 0 24px; max-width: none; }

/* 10 Formate und Rahmen */
.rahmen { border-collapse: collapse; width: 100%; }
.rahmen th, .rahmen td { text-align: left; vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--linie); }
.rahmen th { color: var(--grau); font-weight: 600; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; width: 240px; }
.rahmen td { font-size: 17px; }

/* 11 Kontakt. Die Adresse steht lesbar ueber den Knoepfen, damit sie sich auch
   dort kopieren laesst, wo mailto ins Leere greift. */
.adresse { font-family: var(--schrift-serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; margin-top: 6px; max-width: none; }
.adresse a { color: var(--tiefgruen); text-decoration: none; border-bottom: 1px solid var(--gold); }
.adresse a:hover { border-bottom-color: var(--tiefgruen); }

/* 12 Presseweg. Eigene Flaeche zwischen Kontakt und Fuss, wie in SRC-016.
   Mittig und ohne Kicker: Sie richtet sich an Redaktionen, nicht an
   Veranstalter, und soll sich von den Abschnitten davor absetzen. Creme und
   nicht Sand: Der Kontakt darueber steht auf Sand, und zwei gleiche Flaechen
   hintereinander verschmolzen zu einem Block ohne erkennbare Kante. */
.presseband { background: var(--creme); padding: clamp(64px, 8vw, 96px) 0; text-align: center; }
.presseband h2 { margin-bottom: 0; }
.presseband p { margin: 24px auto 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 19px); color: var(--grau); }
.presseband .knopfreihe { justify-content: center; }
.presseband .fein { margin-top: 30px; }

/* Fuss */
.fuss { background: var(--dunkelgruen); color: var(--sand); padding: 56px 0; }
.fuss p { max-width: none; }
.fuss a { color: var(--creme); }
.fuss :focus-visible { outline-color: var(--gold); }
.fuss .trenner { height: 1px; background: rgba(var(--gold-rgb), 0.3); margin: 28px 0; }
/* Die Pille am Presseweg ist am 01.09.2026 entfallen. Sie war die einzige
   vollgerundete Flaeche der Seite und stand damit gegen alles andere; auf
   ihrer eigenen Flaeche, in Knopfgroesse neben einem zweiten Knopf, fiel das
   auf. Der Presseweg traegt jetzt dieselben zwei Knoepfe wie der Kontakt
   darueber, nur mit goldenem Rand an der offenen Fassung. */
.knopf--presse { border-color: var(--golddunkel); color: var(--tiefgruen); background: var(--creme); }
.knopf--presse:hover { background: var(--sand); }

@media (max-width: 980px) {
  .format { grid-template-columns: 48px 1fr; gap: 24px; }
  .format .rand { grid-column: 2; padding-top: 0; }
  .person { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 820px) {
  .nimmt { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* Vier Zahlen nebeneinander werden auf dem Telefon zu einer Spalte, und der
     senkrechte Trennstrich trennt dann nichts mehr: Er haengt als Strich am
     linken Rand jedes Blocks. Zwei mal zwei mit einem Kreuz aus Goldlinien
     haelt die Zaesur und die Lesbarkeit. Gefunden ueber Ticket 13. */
  .zahlen .reihe { grid-template-columns: 1fr 1fr; gap: 0; }
  .zahlen .reihe > div { padding: 24px 14px; }
  .zahlen .reihe > div + div { border-left: none; }
  .zahlen .reihe > div:nth-child(2n) { border-left: 1px solid rgba(var(--gold-rgb), 0.3); }
  .zahlen .reihe > div:nth-child(n+3) { border-top: 1px solid rgba(var(--gold-rgb), 0.3); }

  .kopf { height: auto; min-height: 0; }
  .kopf > img { position: static; height: 46vh; }
  .kopf .schleier, .kopf .schleier2 { display: none; }
  .kopf .inhalt { position: static; background: var(--dunkelgruen); padding: 36px 0 44px; }
  .termine div { grid-template-columns: 1fr; gap: 6px; }
  /* Der Bannerzuschnitt hat 2,2 zu 1. Auf dem Telefon bleibt darin neben dem
     Zitat kein Bild mehr uebrig, und der Satz liegt Carole im Gesicht. Ein
     hochkantiger Ausschnitt gibt beiden Platz. */
  .band img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 58% 28%; }
  .rahmen th, .rahmen td { display: block; width: auto; border-bottom: none; padding: 0; }
  .rahmen th { padding-top: 20px; }
  .rahmen td { padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
}
@media (max-width: 520px) {
  .nimmt { grid-template-columns: 1fr; }
}