/* Sektionen beider Vorschauseiten, in Lesereihenfolge. */

/* ---------- Hero (Start und Para Games) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--abst-sektion);
}
.hero--para { border-bottom: 1px solid var(--slate); }
.hero__form {
  position: absolute;
  will-change: transform;
  pointer-events: none;
}
.hero__form--flaeche {
  top: -12%;
  right: -18%;
  width: 70vw;
  height: 78%;
  background: var(--obsidian-2);
  transform: rotate(var(--schraeg));
}
.hero__form--linien {
  top: 6%;
  right: -6%;
  width: 44vw;
  height: 56%;
  background-image: repeating-linear-gradient(90deg, var(--slate) 0 1px, transparent 1px 14px);
  opacity: 0.55;
  transform: rotate(var(--schraeg));
}
/* Die volt Schraeglinie (--strich) ist entfernt: sie kreuzte die Hero-Knoepfe und wirkte wie ein Fehler. */
.hero__form--raster {
  inset: -10% -20% 0 40%;
  background-image: repeating-linear-gradient(74deg, var(--slate) 0 1px, transparent 1px 18px);
  opacity: 0.6;
}
.hero__innen {
  position: relative;
  padding-top: var(--abst-hero);
}
.hero--para .hero__innen { padding-top: clamp(48px, 8vw, 120px); }
.hero__eyebrow {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--volt);
}
.hero__eyebrow--zeile { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero__eyebrow--zeile .trenner { color: var(--slate); }
.hero__titel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.9;
  /* PARAGAMES (laengstes Wort) ist rund 6,5em breit: bei 320 px waere die Mindestgroesse 2,7rem zu breit,
     darum zusaetzlich Fensterbreite minus Rand / 6,8. */
  font-size: min(clamp(2.7rem, 10.5vw, 9rem), calc((100vw - 2 * var(--rand)) / 6.8));
}
.hero__titel span { display: block; }
.hero--para .hero__titel {
  letter-spacing: -0.03em;
  line-height: 0.88;
  font-size: min(clamp(2.8rem, 11vw, 9.5rem), calc((100vw - 2 * var(--rand)) / 6.8));
}
/* Kurzer Korallenstrich unter dem Titel der Eventseiten. Er liegt im Textfluss unter der Ueberschrift
   und schneidet damit nie durch Eyebrow oder Titel (die frueher quer laufende Diagonale las sich als
   Durchstreichen). Die Schraege entspricht der Diagonale des Designs (--schraeg). */
.hero__strich {
  display: block;
  width: clamp(72px, 11vw, 148px);
  height: 6px;
  margin-top: clamp(20px, 3vw, 32px);
  background: var(--coral);
  transform: skewX(var(--schraeg));
  transform-origin: left center;
}
.hero__strich + .hero__lead { margin-top: clamp(20px, 3vw, 32px); }
.hero__lead {
  margin-top: clamp(24px, 3.4vw, 40px);
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.5;
}
.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 44px);
}

/* ---------- Zwei Saeulen ---------- */
/* Drei Karten in Stufen statt auto-fit: eine Spalte auf dem Handy, zwei ab 700px mit der dritten Karte
   (Beratung) ueber die volle Breite (kein Waisenkind neben einer Leerflaeche), drei ab 980px. */
.saeulen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abst-klein);
}
@media (min-width: 700px) {
  .saeulen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karte--beratung { grid-column: 1 / -1; }
  /* Breite Karte: Text links, Verweis rechts unten auf einer Linie, statt einer hohen leeren Flaeche. */
  .karte--beratung .karte__innen { flex-direction: row; align-items: flex-end; gap: var(--abst-karte); min-height: 0; }
  .karte--beratung .karte__weiter { margin-top: 0; flex: 0 0 auto; }
}
@media (min-width: 980px) {
  .saeulen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karte--beratung { grid-column: auto; }
  .karte--beratung .karte__innen { flex-direction: column; align-items: stretch; gap: 0; min-height: clamp(320px, 34vw, 440px); }
  .karte--beratung .karte__weiter { margin-top: 28px; }
}
.karte {
  display: flex;
  flex-direction: column;
  color: var(--offwhite);
  transition: transform 200ms ease-out;
}
.karte:active { transform: scale(0.985); }
/* Hintergrund und Rahmen liegen auf dem inneren Wrapper. Alle drei Karten sind gleich
   hoch (Grid streckt, .karte und .karte__innen fuellen die Zeile) und enden auf einer
   geraden Unterkante, "Zum Event" und "Themenfelder" stehen damit auf einer Linie.
   Die schraege Unterkante (clip-path) ist entfernt: sie las sich als Darstellungsfehler. */
.karte__innen {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(320px, 34vw, 440px);
  padding: var(--abst-karte);
  border: 1px solid var(--slate);
  transition: background-color var(--t-karte) ease-in-out, border-color var(--t-karte) ease-in-out;
}
.karte--event .karte__innen { background: var(--obsidian-2); }
.karte--beratung .karte__innen { background: var(--obsidian); }
.karte__no {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--volt);
}
.karte--beratung .karte__no { color: var(--mist); }
.karte__titel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
}
.karte__text { margin-top: 18px; max-width: 40ch; font-size: 1rem; line-height: 1.55; }
.karte__weiter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--volt);
}
.karte--beratung .karte__weiter { color: var(--offwhite); }
.karte__pfeil { display: inline-block; transition: transform var(--t-ui) ease-out; }
@media (hover: hover) {
  .karte:hover { transform: translateY(-4px); }
  .karte--event:hover .karte__innen { background: var(--obsidian-4); border-color: var(--volt); }
  .karte--beratung:hover .karte__innen { background: var(--obsidian-3); border-color: var(--offwhite); }
  .karte:hover .karte__pfeil { transform: translateX(6px); }
}

/* ---------- Kennzahlen ---------- */
.kennzahlen { margin-top: clamp(56px, 7vw, 104px); }
/* Linien je Zelle ueber outline statt Hintergrund im Raster: so bleibt eine
   leere Restzelle unsichtbar statt als graue Flaeche stehen zu bleiben. */
.kennzahlen__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr; /* alle Zeilen gleich hoch, auch wenn eine Einheit umbricht */
  gap: 1px;
  padding: 1px;
}
@media (min-width: 560px) {
  .kennzahlen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kennzahl {
  container-type: inline-size; /* Kopplung der Einheit an die Zellenbreite (drei Spalten ab 560 px sind schmal) */
  background: var(--obsidian);
  padding: clamp(22px, 2.6vw, 34px);
  outline: 1px solid var(--slate);
}
.kennzahl dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.kennzahl dd {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.kennzahl--volt dd { color: var(--volt); }
.kennzahl--offwhite dd { color: var(--offwhite); }
.kennzahl--coral dd { color: var(--coral); }
.kennzahl__einheit {
  font-family: var(--font-body);
  font-weight: 500;
  /* VERANSTALTUNGSTAGE (laengstes Wort) ist in Inter 500 rund 9,3em breit: 100 / 9,3 = 10,7cqi, mit Luft 10,4. */
  font-size: min(1rem, 10.4cqi);
  letter-spacing: 0;
  color: var(--offwhite);
}

/* ---------- Zur Person ---------- */
.person { margin-top: clamp(56px, 8vw, 120px); }
/* minmax(0, 1fr) statt 1fr: sonst weitet ein langes Wort die Textspalte ueber
   den Container hinaus (bei 320px um 64px gemessen). */
.person__raster {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.person__bild { margin: 0; }
.person__bildrahmen {
  position: relative;
  overflow: hidden;
  background: var(--obsidian-2);
  border: 1px solid var(--slate);
}
.person__bildrahmen img { width: 100%; height: auto; }
.person__bildrahmen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--volt);
}
.person__bild figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
}
.person__titel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
}
.person__text { margin-top: clamp(20px, 2.6vw, 28px); max-width: 58ch; }
.person__text p + p { margin-top: 14px; }
/* Eingang zur Seite Über mich, unter dem Zitat (Entscheidung Domme 28.09.) */
.person__mehr { margin-top: clamp(40px, 5vw, 64px); }
.zitat {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--slate);
}
.zitat blockquote {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
}
.zitat figcaption { margin-top: 20px; display: flex; align-items: center; gap: 14px; }
.zitat__strich { width: 40px; height: 2px; background: var(--coral); flex: 0 0 auto; }
.zitat__wer { font-size: 15px; line-height: 1.4; }
.zitat__wer strong { font-weight: 600; }
.zitat__rolle { color: var(--mist); }
@media (max-width: 719px) {
  .person__raster { grid-template-columns: minmax(0, 1fr); }
  .person__bild { max-width: 300px; }
}

/* ---------- Beratung / Themen ---------- */
.beratung {
  margin-top: clamp(64px, 9vw, 140px);
  padding: var(--abst-sektion) 0;
  background: var(--obsidian-3);
  border-top: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
}
.sektion__titel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.96;
  /* AUSTRAGUNGSORTE, (laengstes Wort samt Komma) ist rund 11,1em breit: die Schrift bleibt kleiner als Breite / 11,4,
     gerechnet mit der Breite des Inhaltsbereichs (Fenster oder --breite, abzueglich zweimal --rand). */
  font-size: min(clamp(1.9rem, 5vw, 3.6rem), calc((min(100vw, var(--breite)) - 2 * var(--rand)) / 11.4));
}
/* Beratungs-Titel: im Design eine Stufe enger als die Sektionstitel. */
.sektion__titel--beratung {
  font-size: min(clamp(1.9rem, 4.6vw, 3.4rem), calc((min(100vw, var(--breite)) - 2 * var(--rand)) / 11.4));
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.sektion__lead {
  margin: 20px 0 var(--abst-block);
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Themenkacheln der Startseite: sieben Themenfelder plus eine Kachel als Knopf zur Beratungsseite.
   Jede Kachel ist ein Link auf beratung.html#<slug>. Vier Spalten ab 1024 px (zwei Reihen mit acht
   Zellen), zwei ab 560 px, darunter eine. Preise, Ablauf und Grenzen der Beratung stehen auf
   beratung.html (css/beratung.css). */
.themenraster {
  margin-top: var(--abst-block);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
@media (min-width: 560px) { .themenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .themenraster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.themenraster > li { display: flex; }
.thema-kachel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--obsidian);
  border: 1px solid var(--slate);
  color: var(--offwhite);
  transition: border-color 220ms ease-in-out, background-color 220ms ease-in-out, transform 220ms ease-out;
}
.thema-kachel:active { transform: scale(0.985); }
.thema-kachel__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.thema-kachel__titel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.02;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}
/* Laengster Kacheltitel (WIRTSCHAFTSBERATUNG) ist rund 13,4em breit: die Schrift passt sich ab jeder Breite der
   Kachel an, statt zu trennen (100 / 13,6 = 7,3cqi). Bei einer Spalte greift die Grundgroesse, bei zwei schmalen
   Spalten (560 bis 720 px) die Kachelbreite. */
.thema-kachel { container-type: inline-size; }
.thema-kachel__titel { font-size: min(clamp(1.1rem, 1.6vw, 1.35rem), 7.3cqi); }
.thema-kachel__text { font-size: 0.95rem; line-height: 1.55; color: var(--offwhite); }
.thema-kachel__weiter {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--volt);
}
.thema-kachel__pfeil { display: inline-block; transition: transform var(--t-ui) ease-out; }
@media (hover: hover) {
  .thema-kachel:hover { border-color: var(--volt); background: var(--obsidian-2); transform: translateY(-4px); }
  .thema-kachel:hover .thema-kachel__pfeil { transform: translateX(6px); }
}
/* Die letzte Kachel ist der Knopf zur Beratungsseite: Volt-Fläche, dunkler Text. */
.thema-kachel--cta { background: var(--volt); border-color: var(--volt); color: var(--obsidian); justify-content: space-between; }
.thema-kachel--cta .thema-kachel__no { color: var(--obsidian); }
.thema-kachel--cta .thema-kachel__text { color: var(--obsidian); }
.thema-kachel--cta .thema-kachel__weiter { color: var(--obsidian); }
@media (hover: hover) {
  .thema-kachel--cta:hover { background: var(--offwhite); border-color: var(--offwhite); }
}

/* ---------- Kontakt (Start) ---------- */
/* Nur oben und unten, sonst geht der seitliche Container-Abstand verloren. */
.kontakt { padding-top: var(--abst-sektion-gross); padding-bottom: var(--abst-sektion-gross); }
.kontakt__raster {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}
.kontakt__titel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.94;
  font-size: clamp(2rem, 6vw, 4.4rem);
}
.kontakt__titel span { display: block; color: var(--volt); }
.kontakt__lead { margin-top: 20px; max-width: 48ch; font-size: 1.05rem; line-height: 1.55; }
.kontakt__daten { display: flex; flex-direction: column; gap: 6px; font-size: 1.05rem; line-height: 1.5; }
.kontakt__daten a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--offwhite);
  border-bottom: 1px solid var(--slate);
  transition: color var(--t-ui) ease-in-out, border-color var(--t-ui) ease-in-out;
}
.kontakt__daten a.volt { color: var(--volt); }
/* Der Knopf innerhalb der Adressliste darf die Linkfarbe nicht erben:
   Offwhite auf Volt waere 1.1:1. Dunkler Text bleibt in Ruhe und Hover. */
.kontakt__daten .knopf--volt { color: var(--obsidian); border-bottom: 0; }
@media (hover: hover) {
  .kontakt__daten a:hover { color: var(--volt); border-color: var(--volt); }
  .kontakt__daten .knopf--volt:hover { color: var(--obsidian); background: var(--offwhite); }
}
.kontakt__daten .anschrift { color: var(--mist); font-size: 0.95rem; margin-bottom: 8px; }
.kontakt__notiz { margin-top: 6px; font-size: 0.9rem; color: var(--mist); }
.kontakt__knoepfe { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }
.kontakt__knopf { margin-top: 0; }

/* ---------- Disziplinen (Para Games) ---------- */
.disziplinen { padding-top: var(--abst-sektion); }
.disziplinen__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1px;
  padding: 1px;
}
.disziplin {
  container-type: inline-size; /* Kopplung der Ueberschrift an die Kartenbreite, siehe Block "Ueberschriften brechen nie" unten */
  background: var(--obsidian);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  outline: 1px solid var(--slate);
  transition: background-color 200ms ease-in-out;
}
.disziplin__icon {
  display: block;
  width: 52px;
  height: 52px;
  color: var(--volt);
  transition: transform 200ms ease-out, color 200ms ease-in-out;
}
.disziplin__icon svg { width: 52px; height: 52px; }
.disziplin h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.05;
  /* ROLLSTUHLBASKETBALL (laengstes Wort) ist in Archivo 800 rund 13,2em breit: 100 / 13,2 = 7,6cqi, mit Luft 7,4. */
  font-size: min(1.25rem, 7.4cqi);
}
.disziplin p { font-size: 0.98rem; line-height: 1.55; }
.disziplin__format {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}
@media (hover: hover) {
  .disziplin:hover { background: var(--obsidian-2); }
  .disziplin:hover .disziplin__icon { transform: translateX(4px) rotate(-4deg); color: var(--coral); }
}

/* ---------- Orte ---------- */
.orte {
  margin-top: var(--abst-sektion-gross);
  padding: var(--abst-sektion) 0;
  background: var(--obsidian-3);
  border-top: 1px solid var(--slate);
  border-bottom: 1px solid var(--slate);
}

/* ---------- Startgebuehr ---------- */
/* Betragsfeld im Stil des Preisfelds der Beratung: Flaeche obsidian-2, Haarlinie slate, 4px Volt-Kante links.
   Betrag gross wie eine Kennzahl, Erklaertext daneben (ab 720px), darunter gestapelt. */
.startgebuehr { padding-top: var(--abst-sektion-gross); }
.startgebuehr__feld {
  margin-top: var(--abst-block);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px);
  background: var(--obsidian-2);
  border: 1px solid var(--slate);
  border-left: 4px solid var(--volt);
}
@media (min-width: 720px) {
  .startgebuehr__feld { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .startgebuehr__text { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--slate); }
}
.startgebuehr__preis { display: flex; flex-direction: column; gap: 8px; }
.startgebuehr__betrag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 8vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--volt);
}
.startgebuehr__einheit {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.startgebuehr__text { max-width: 58ch; font-size: 1.05rem; line-height: 1.55; }

/* ---------- Partner ---------- */
.partner { padding-top: var(--abst-sektion-gross); }
.partner__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--abst-klein);
}
/* Pfalzel hat nur eine Foerderebene: keine Karte in einem leeren Raster verlieren,
   stattdessen eine einzelne, bewusst breitere Karte mittig. */
.partner__liste--einzeln {
  grid-template-columns: minmax(0, 1fr);
  max-width: 480px;
}
.partner__karte {
  container-type: inline-size; /* Kopplung der Ueberschrift an die Kartenbreite */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--obsidian-2);
  border: 1px solid var(--slate);
  transition: border-color 200ms ease-in-out, transform 200ms ease-out;
}
.partner__ebene {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--volt);
}
.partner__karte h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  /* REGIONALPARTNER (laengstes Wort) ist rund 10,4em breit: 100 / 10,4 = 9,6cqi, mit Luft 9,2. */
  font-size: min(1.4rem, 9.2cqi);
  line-height: 1.05;
}
.partner__karte p { font-size: 0.98rem; line-height: 1.55; }
/* Aktionszeile je Karte: Investitionsrahmen als kleine Angabe (sagt vor dem Klick,
   dass es keinen Listenpreis gibt), darunter der Knopf zur vorbelegten Anfrage. */
.partner__aktion {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--slate);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.partner__aktion .partner__rahmen {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
}
.partner__knopf { width: 100%; justify-content: space-between; }
@media (hover: hover) {
  .partner__karte:hover { border-color: var(--volt); transform: translateY(-3px); }
}

/* ---------- CTA-Band (Para Games) ---------- */
.cta-band {
  margin-top: var(--abst-sektion-gross);
  position: relative;
  overflow: hidden;
  background: var(--obsidian-2);
  border-top: 1px solid var(--slate);
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: var(--volt);
  transform: skewY(-0.6deg);
  transform-origin: left;
}
.cta-band__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  padding-top: var(--abst-sektion);
  padding-bottom: var(--abst-sektion);
}
.cta-band__titel {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(2rem, 6.5vw, 4.6rem);
}
.cta-band__titel span { display: block; color: var(--volt); }
.cta-band__lead { margin-top: 20px; max-width: 52ch; font-size: 1.05rem; line-height: 1.55; }
.cta-band__aktion { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* Ueberschriften brechen nie mitten im Wort um (Domme 29.09.2026: "PARAGAME / S" darf nie
   vorkommen). Zwei Bausteine:
   1. hyphens: none schaltet die Weichtrennstellen (&shy;, U+00AD) in Ueberschriften ab. Sonst bricht der Browser dort
      auch mitten in der Zeile ("Angelegen-" / "heiten"), wenn das ganze Wort noch in die naechste Zeile passt.
      Harte Bindestriche ("Para-Leichtathletik") bleiben normale Umbruchstellen.
   2. Passt ein Wort nicht in die Breite, wird die Schrift kleiner (Kartenbreite per cqi oder Fensterbreite per calc),
      das Wort wird nie zerteilt und ragt nie heraus. Rechnung je Baustein am jeweiligen Block (thema-kachel,
      disziplin, partner__karte, karte__innen, sektion__titel).
   Geprueft mit tests/seite/wortumbruch.js (ab 375 px null Treffer, getrennt nach Trennung und Ueberlauf). */
h1, h2, h3, h4, blockquote, .karte__titel, .thema-kachel__titel, .hero__titel, .sektion__titel {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.karte__innen { container-type: inline-size; }
/* 13cqi: "PARAGAMES" (laengstes Wort) ist in Archivo 800 rund 7,4em breit, 100 / 7,4 = 13,5 */
.karte__titel { font-size: min(3.2rem, 13cqi); }