/* ==========================================================================
   RITMICA – Theme
   Übernimmt die Gestaltung der bisherigen Website in Design-Tokens.
   Farben kommen aus den Einstellungen und werden im <head> gesetzt.
   Sämtliche Schriften und Symbole liegen lokal — keine externen Requests.
   ========================================================================== */

/* ---------- Schriften ----------
   Inter, Cormorant Garamond und Montserrat liegen unter assets/fonts/ und
   werden von der eigenen Domain ausgeliefert — dieselben Schriften wie
   bisher, aber ohne Anfrage an Google und damit ohne Einwilligungspflicht.
   Die Datei enthält je Sprache eigene Teilmengen (auch kyrillisch), sodass
   der Browser nur lädt, was die Seite tatsächlich braucht. */

/* Eingebunden wird fonts.css direkt im <head>, damit nichts nachgeladen wird. */

:root {
  --primary: #beaa87;         /* Gold, Hauptfarbe */
  --primary-dark: #a6936e;    /* Gold, dunkler — Verläufe */
  --gold-light: #f8c462;      /* Helles Gold — Hervorhebungen und Hover */
  --gold-soft: #d4af7a;       /* Weiches Gold — Logo und Navigation */
  --accent: #f0814c;
  --dark: #3d322e;
  --text: #5b4f4a;
  --text-soft: #6f635c;       /* Fließtext in Karten */
  --muted: #8a7e76;
  --bg: #fcfaf9;              /* Seitenhintergrund */
  --surface: #ffffff;
  --surface-soft: #f8f6f4;    /* Abgesetzte Abschnitte und Fußzeile */
  --line: rgba(190, 170, 135, .2);

  /* Die alte Seite forderte zusätzlich „Clash Display" bei Google Fonts an —
     dort gibt es die Schrift gar nicht, weshalb Überschriften auch bisher
     schon in Inter erschienen. Genau das bilden wir hier ab. */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-tagline: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1400px;
  --gutter: 40px;
  /* Höhe der schwebenden Kopfleiste: 20px Polster oben und unten
     plus 45px Logo. Seiten ohne Kopfbild gleichen sie aus. */
  --header-h: 85px;
  --radius: 20px;
  --radius-lg: 30px;
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, .05);
  --shadow-lg: 0 20px 30px -10px rgba(0, 0, 0, .1);
  --ease: cubic-bezier(.165, .84, .44, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--dark);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; transition: color .3s; }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--dark); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ============================ Kopfbereich ============================ */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding: 20px 0; background: transparent;
  transition: all .4s var(--ease);
}
.site-header.solid {
  background: rgba(252, 250, 249, .98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { height: 45px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; text-align: left; }
.brand-text .brand-name, .brand-text .brand-claim { display: block; }

.brand-text .brand-name {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 600; letter-spacing: 2px; line-height: 1.2; margin: 0;
  background: linear-gradient(135deg, #fff 0%, var(--gold-soft) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-text .brand-claim {
  font-family: var(--font-tagline);
  margin: -5px 0 0; font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 400;
}

/* Mit Bildmarke rückt der Schriftzug etwas kleiner daneben */
.brand.has-logo .brand-text .brand-name { font-size: 22px; }
.brand.has-logo .brand-text .brand-claim { font-size: 9px; margin: 2px 0 0; }

.site-header.solid .brand-text .brand-name,
body.no-hero .brand-text .brand-name {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-header.solid .brand-text .brand-claim,
body.no-hero .brand-text .brand-claim { color: var(--primary); }

/* Ohne Kopfbild ist die Leiste dauerhaft hell */
body.no-hero .site-header {
  background: rgba(252, 250, 249, .98);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}

.header-right { display: flex; align-items: center; gap: 20px; }

/* ---------- Navigation ---------- */

.main-nav ul { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  position: relative; display: block;
  color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 1px; white-space: nowrap;
  transition: color .3s;
}
.main-nav a::after {
  content: ""; position: absolute; bottom: -5px; left: 0;
  width: 0; height: 2px; background: var(--gold-soft); transition: width .3s;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { width: 100%; }
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--gold-soft); }

.site-header.solid .main-nav a,
body.no-hero .main-nav a { color: var(--text); }
.site-header.solid .main-nav a::after,
body.no-hero .main-nav a::after { background: var(--primary); }
.site-header.solid .main-nav a:hover,
.site-header.solid .main-nav a[aria-current="page"],
body.no-hero .main-nav a:hover,
body.no-hero .main-nav a[aria-current="page"] { color: var(--primary); }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 4px; color: #fff;
}
.site-header.solid .nav-toggle, body.no-hero .nav-toggle { color: var(--text); }

/* ---------- Sprachumschalter ---------- */

.lang { position: relative; }
.lang > button {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 30px; padding: 8px 16px;
  color: #fff; font: inherit; font-size: 14px; font-weight: 500;
  transition: all .2s;
}
.lang > button:hover { border-color: var(--gold-soft); background: rgba(212, 175, 122, .1); }

.site-header.solid .lang > button,
body.no-hero .lang > button { border-color: #e1d9d1; color: var(--text); }
.site-header.solid .lang > button:hover,
body.no-hero .lang > button:hover { border-color: var(--primary); background: rgba(190, 170, 135, .05); }

.lang img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }

.lang-menu {
  position: absolute; right: 0; top: 100%; margin-top: 8px; min-width: 180px;
  background: var(--surface); border: 1px solid #f0ece8; border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1); overflow: hidden; padding: 8px 0;
  display: none; z-index: 1001;
}
.lang-menu.open { display: block; }
.lang-menu a {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  color: var(--text); font-size: 14px; white-space: nowrap; transition: background .2s;
}
.lang-menu a:hover { background: var(--surface-soft); color: var(--text); }
.lang-menu a[aria-current="true"] { color: var(--primary); font-weight: 600; }

/* ============================ Abschnitte ============================ */

main { min-height: 60vh; }

/* Die Kopfleiste liegt fest über dem Inhalt. Auf der Startseite schiebt
   sich das Kopfbild darunter — auf allen anderen Seiten würde die erste
   Überschrift sonst unter der Leiste kleben. */
body.no-hero main { padding-top: var(--header-h); }

/* ---------- Seitenkopf ----------
   Der Kopfbereich jeder Unterseite. Bewusst ohne Einstellmöglichkeiten:
   Er soll auf allen Seiten gleich aussehen, sonst zerfällt die Website
   in lauter Einzelentwürfe. */

.block-page-header {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
  border-bottom: 1px solid rgba(190, 170, 135, .15);
  padding: 70px 0 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.no-hero main > .block-page-header:first-child { padding-top: 70px; }

/* Schmaler goldener Streifen als Auftakt */
.block-page-header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--gold-soft), var(--primary));
}

.block-page-header h1 {
  font-family: var(--font-display);
  font-size: 48px; font-weight: 700; color: var(--dark);
  margin: 0; display: inline-block; position: relative;
}
.block-page-header h1::after {
  content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 3px; background: var(--primary); border-radius: 2px;
}

.block-page-header p {
  font-size: 18px; color: var(--text-soft); opacity: .8;
  max-width: 550px; margin: 30px auto 0;
}

@media (max-width: 768px) {
  .block-page-header { padding: 50px 0 40px; }
  body.no-hero main > .block-page-header:first-child { padding-top: 50px; }
  .block-page-header h1 { font-size: 34px; }
  .block-page-header p { font-size: 16px; margin-top: 26px; }
}

.block { padding: 100px 0; position: relative; }
.block-hero { padding: 0; }


/* Abgesetzte Flächen — im Original „section-light" */
.block.tone-soft { background: var(--surface-soft); }
/* Echte dunkle Fläche, optional im Baukasten wählbar */
.block.tone-dark { background: var(--dark); color: rgba(255, 255, 255, .8); }
.block.tone-dark h2, .block.tone-dark h3, .block.tone-dark h4 { color: #fff; }
.block.tone-dark .card-item { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.block.tone-dark .card-item p { color: rgba(255, 255, 255, .7); }

.section-title {
  text-align: center; font-size: 48px; font-weight: 700;
  margin-bottom: 60px; position: relative;
}
.section-title::after {
  content: ""; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 3px; background: var(--primary); border-radius: 2px;
}
.section-title.text-left { text-align: left; }
.section-title.text-left::after { left: 0; transform: none; }
.section-title.text-right { text-align: right; }
.section-title.text-right::after { left: auto; right: 0; transform: none; }

.section-subtitle { font-size: 18px; color: var(--text-soft); margin-bottom: 40px; }

/* Ein Überschrift-Baustein leitet den Baustein darunter ein — er darf
   deshalb nicht wie ein eigener Abschnitt mit vollem Polster wirken.
   Wichtig: oben und unten gleich viel. Wechselt der Untergrund am
   Blockende die Tönung, wird jede Ungleichheit sofort sichtbar.
   Gekürzt wird stattdessen am folgenden Baustein. */
.block-heading { padding-top: 70px; padding-bottom: 70px; }

/* Als Seitenkopf hebt sich der Block durch eine feine Linie ab —
   genauso wie der Kopfbereich der alten Unterseiten. */
body.no-hero main > .block-heading:first-child {
  border-bottom: 1px solid rgba(190, 170, 135, .15);
}
.block-heading .section-title { margin-bottom: 40px; }
.block-heading .section-subtitle { margin-bottom: 0; }
.block-heading + .block { padding-top: 50px; }
.section-subtitle.text-center { text-align: center; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ---------- Kopfbild ---------- */

.hero { position: relative; overflow: hidden; display: grid; place-items: center; }
.hero-medium { height: 65vh; }
.hero-large { height: 85vh; }
.hero-full { height: 100vh; }

.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: opacity 1s ease-in-out;
}
.hero-slide.active { opacity: 1; z-index: 1; }

.hero-overlay { position: absolute; inset: 0; z-index: 2; }
.overlay-light { background: linear-gradient(135deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .2) 100%); }
.overlay-medium { background: linear-gradient(135deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .3) 100%); }
.overlay-strong { background: linear-gradient(135deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .5) 100%); }

.hero-content { position: relative; z-index: 3; text-align: center; padding: 0 24px; max-width: 900px; }
.hero-content h1 {
  font-size: 80px; font-weight: 700; line-height: 1.1; color: #fff; margin-bottom: 20px;
  animation: fadeInUp 1s ease;
}
.hero-content .highlight { display: block; color: var(--gold-light); }
.hero-content p {
  font-size: 20px; color: #fff; opacity: .9; max-width: 700px; margin: 0 auto 40px;
  animation: fadeInUp 1s ease .2s backwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

.hero-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

.hero-dots {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 10;
  /* Bei vielen Bildern reicht eine Zeile nicht mehr: Ohne Begrenzung ragte
     die Punktreihe seitlich aus dem Bild heraus, die äußeren Punkte waren
     abgeschnitten und nicht mehr antippbar. */
  max-width: calc(100% - 40px); flex-wrap: wrap; justify-content: center; row-gap: 8px;
}
.hero-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .5); transition: all .3s;
}
.hero-dots button:hover { background: var(--primary); }
.hero-dots button.active { width: 25px; border-radius: 5px; background: var(--primary); }

.scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 3; color: #fff; background: none; border: none; cursor: pointer;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -12px); }
  60% { transform: translate(-50%, -6px); }
}

/* ---------- Schaltflächen ---------- */

.btn {
  display: inline-block; padding: 14px 40px; border-radius: 40px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 1px;
  border: none; cursor: pointer; text-align: center; transition: all .3s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover {
  background: var(--gold-light); color: var(--dark);
  transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
.btn-outline { background: transparent; color: #fff; border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: #2a2320; color: #fff; transform: translateY(-3px); }

/* ---------- Text ---------- */

.rich-text { font-size: 16px; line-height: 1.8; color: var(--text-soft); }

/* Eine lange Adresse ohne Leerzeichen — etwa ein Instagram-Link in einem
   Beitrag — ist für den Zeilenumbruch ein einziges Wort. Auf dem Handy
   schob sie die gesamte Seite über den Rand hinaus, sodass sich alles
   waagerecht verschieben ließ. Solche Wörter dürfen umbrechen.          */
.rich-text, .news-article, .faq-answer, .text-box { overflow-wrap: break-word; }
.rich-text a, .news-article a { overflow-wrap: anywhere; }
.rich-text.width-narrow { max-width: 760px; margin: 0 auto; }
.rich-text.columns-2 { columns: 2; column-gap: 46px; }
.rich-text h2 { font-size: 30px; margin: 30px 0 12px; }
.rich-text h3 { font-size: 23px; margin: 26px 0 10px; }
.rich-text p { margin: 0 0 20px; }
.rich-text ul, .rich-text ol { margin: 0 0 20px; padding-left: 26px; }
.rich-text li { margin-bottom: 8px; }
.rich-text blockquote {
  margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--primary);
  font-style: italic; color: var(--dark);
}
.rich-text img { border-radius: 14px; margin: 18px 0; }
.rich-text a { color: var(--primary); }

/* Hinweiskasten — heller Verlauf mit goldenem Balken links, Symbol davor.
   Für kurze Hinweise wie Antwortzeiten oder Öffnungszeiten. */
.text-note {
  display: flex; align-items: center; justify-content: center; gap: 15px;
  background: linear-gradient(135deg, var(--surface-soft) 0%, var(--surface) 100%);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius); padding: 18px 25px;
}
.text-note.width-narrow { max-width: 900px; margin: 0 auto; }
.text-note-icon { color: var(--primary); flex: 0 0 auto; display: flex; }
.text-note-icon svg { width: 28px; height: 28px; }
.text-note .rich-text { font-size: 15px; line-height: 1.7; color: var(--text); }
.text-note .rich-text p { margin: 0; }
.text-note .rich-text p + p { margin-top: 8px; }

@media (max-width: 640px) {
  .text-note { flex-direction: column; text-align: center; gap: 10px; padding: 20px; }
}

/* Infokasten und Achtungskasten — die beiden Kästen der bisherigen
   Probetrainingsseite. Aufzählungen bekommen darin einen Haken statt
   eines Punktes, weil es dort fast immer Checklisten sind. */

.text-box { border-radius: 24px; padding: 30px; }
.text-box.width-narrow { max-width: 900px; margin: 0 auto; }

.text-box-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; color: var(--dark); margin: 0 0 20px;
}
.text-box-head svg { color: var(--primary); flex: 0 0 auto; }

.text-box .rich-text { color: var(--text-soft); font-size: 15px; line-height: 1.7; }
.text-box .rich-text > :last-child { margin-bottom: 0; }
.text-box .rich-text h3 { font-size: 18px; color: var(--dark); margin: 26px 0 12px; }
.text-box .rich-text ul { list-style: none; padding: 0; margin: 0 0 20px; }
.text-box .rich-text li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.text-box .rich-text li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--primary); font-weight: 700; font-size: 15px; line-height: 1.55;
}

.text-card {
  background: var(--surface);
  border: 1px solid rgba(190, 170, 135, .2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

/* Achtung: warmer Verlauf, roter Balken links */
.text-warning {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fff8f0 0%, var(--surface) 100%);
  border-left: 5px solid #e74c3c;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
}
.text-warning .text-box-head { color: #b3392c; }
.text-warning .text-box-head svg { color: #e74c3c; }
.text-warning .rich-text li { padding-left: 20px; }
.text-warning .rich-text li::before {
  content: ""; top: .6em; width: 6px; height: 6px; border-radius: 50%;
  background: #e74c3c;
}

/* Zwischenueberschrift im Kasten — samt der Liste darunter als
   abgesetzter Achtungsbereich. Zwei Geschwister, die wie ein Block
   aussollen: Die Ueberschrift bildet den Kopf, die Liste den Fuss. */
.text-box .rich-text h4 {
  display: flex; align-items: center; gap: 9px;
  font-size: 15.5px; font-weight: 600; color: #b3392c;
  margin: 26px 0 0; padding: 15px 20px 10px;
  background: linear-gradient(135deg, #fff6ec 0%, #fffaf5 100%);
  border-left: 4px solid #e74c3c;
  border-radius: 14px 14px 0 0;
}
.text-box .rich-text h4::before {
  content: ""; width: 3px; height: 16px; border-radius: 2px;
  background: #e74c3c; flex: 0 0 auto;
}
.text-box .rich-text h4 + ul {
  margin: 0 0 22px; padding: 2px 20px 16px 44px;
  background: linear-gradient(135deg, #fff6ec 0%, #fffaf5 100%);
  border-left: 4px solid #e74c3c;
  border-radius: 0 0 14px 14px;
}
.text-box .rich-text h4 + ul li { padding-left: 20px; margin-bottom: 10px; }
.text-box .rich-text h4 + ul li::before {
  content: ""; top: .58em; width: 6px; height: 6px; border-radius: 50%;
  background: #e74c3c;
}

@media (max-width: 640px) {
  .text-box { padding: 22px 20px; border-radius: 20px; }
  .text-box-head { font-size: 19px; }
}

/* ---------- Text mit Bild (Story) ---------- */

.block-text-image { background: linear-gradient(135deg, var(--surface-soft) 0%, var(--bg) 100%); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.image-left .split-media { order: -1; }
.split-media img { width: 100%; border-radius: var(--radius); }
.split h2 { font-size: 42px; margin-bottom: 30px; }

/* ---------- Karten ---------- */

.cards { display: grid; gap: 40px; max-width: 1200px; margin: 0 auto; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }

.card-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 50px 30px; text-align: center;
  box-shadow: var(--shadow); transition: all .4s; color: inherit; display: block;
}
.card-item:hover {
  transform: translateY(-15px); border-color: var(--primary); box-shadow: var(--shadow-lg);
}
.card-item .card-icon { color: var(--primary); margin-bottom: 25px; display: block; }
.card-item .card-icon svg { width: 60px; height: 60px; margin: 0 auto; stroke-width: 1.4; }
.card-item h3 { font-size: 28px; margin-bottom: 15px; }
.card-item p { color: var(--text-soft); line-height: 1.6; margin: 0; }

/* Variante „Mit Rahmen" — kompakter, wie die Warum-wir-Kacheln */
.cards-bordered { gap: 30px; max-width: 1300px; }
.cards-bordered .card-item {
  border-radius: var(--radius); padding: 40px 25px;
  border-color: rgba(190, 170, 135, .15); box-shadow: 0 5px 15px rgba(0, 0, 0, .02);
}
.cards-bordered .card-item:hover { transform: translateY(-10px); box-shadow: 0 15px 25px -10px rgba(0, 0, 0, .08); }
.cards-bordered .card-icon { margin-bottom: 20px; }
.cards-bordered .card-icon svg { width: 45px; height: 45px; }
.cards-bordered .card-item h3 { font-size: 20px; }
.cards-bordered .card-item p { font-size: 14px; }

.cards-flat .card-item { background: transparent; border: none; box-shadow: none; padding: 10px; }
.cards-flat .card-item:hover { transform: none; box-shadow: none; }

/* Variante „Kompakt mit Symbolkreis" — die Kontaktkarten der alten Seite.
   Vier nebeneinander, deshalb kleiner gesetzt als die großen Kacheln. */
.cards-bubble { gap: 25px; max-width: 100%; }
.cards-bubble .card-item {
  border-radius: var(--radius); padding: 25px 20px;
  border-color: rgba(190, 170, 135, .12);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .02);
}
.cards-bubble .card-item:hover {
  transform: translateY(-8px);
  border-color: rgba(190, 170, 135, .3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
}
.cards-bubble .card-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 15px; transition: background .3s, color .3s;
}
.cards-bubble .card-icon svg { width: 26px; height: 26px; margin: 0; }
.cards-bubble .card-item:hover .card-icon { background: var(--primary); color: #fff; }
.cards-bubble .card-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
.cards-bubble .card-item p { font-size: 14px; }
a.card-item:hover h3 { color: var(--primary); }

@media (max-width: 900px) {
  .cards-bubble { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cards-bubble { grid-template-columns: 1fr; }
}

/* ---------- Zahlen ---------- */

.stats { display: flex; gap: 50px; flex-wrap: wrap; justify-content: center; }
.stat { text-align: center; flex: 1; min-width: 80px; }
.stat h4 { font-size: 48px; font-weight: 700; color: var(--primary); margin-bottom: 5px; }
.stat p { color: var(--text); font-size: 14px; margin: 0; }

/* Zahlen direkt unter der Story: gleiche Fläche, kein zusätzlicher Abstand */
.block-text-image + .block-stats {
  background: linear-gradient(135deg, var(--surface-soft) 0%, var(--bg) 100%);
  padding-top: 0;
}

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

.quote { max-width: 800px; margin: 0 auto; text-align: center; }
.quote img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; }
.quote blockquote {
  font-family: var(--font-display); font-size: 30px; line-height: 1.45;
  color: var(--dark); margin: 0 0 18px; font-style: italic;
}
.quote figcaption { color: var(--primary); font-weight: 600; }
.quote figcaption span { display: block; color: var(--muted); font-weight: 400; font-size: 15px; }

/* ---------- Handlungsaufruf ---------- */

.block-cta { padding: 0; }
.cta { text-align: center; padding: 80px 40px; position: relative; overflow: hidden; }
.cta-accent { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
.cta-dark { background: var(--dark); }
.cta-light { background: var(--surface-soft); }
.cta-image { background-size: cover; background-position: center; }
.cta-image::before { content: ""; position: absolute; inset: 0; background: rgba(61, 50, 46, .62); }
.cta > * { position: relative; z-index: 1; }
.cta h3 { font-size: 48px; color: #fff; margin-bottom: 20px; }
.cta p { color: rgba(255, 255, 255, .9); font-size: 18px; max-width: 640px; margin: 0 auto 20px; }
.cta .btn-primary { background: #fff; color: var(--text); margin-top: 20px; }
.cta .btn-primary:hover { background: var(--gold-light); color: var(--dark); }
.cta-light h3 { color: var(--dark); }
.cta-light p { color: var(--text-soft); }
.cta-light .btn-primary { background: var(--primary); color: #fff; }

/* Volle Breite wie im Original */
.block-cta > .container { max-width: none; padding: 0; }

/* ---------- Trainerinnen ----------

   Zwei Ebenen: Die Leitung liegt als aufgeschlagene Doppelseite in einer
   ruhigen Karte, das Team darunter im Raster. Bewusst ohne Schrift auf den
   Fotos — Porträts sind zu unterschiedlich, als dass Text darauf verlässlich
   lesbar bliebe, und ohne ihn wirken die Karten gleichmäßig.            */

.eyebrow, .team-eyebrow {
  font-family: var(--font-tagline);
  font-size: 11.5px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--primary); margin: 0 0 14px;
}

/* ---- Leitung ---- */

.lead-panel {
  background: var(--surface);
  border: 1px solid rgba(190, 170, 135, .18);
  border-radius: 32px;
  padding: 48px;
  box-shadow: 0 24px 50px -30px rgba(61, 50, 46, .35);
  max-width: 1240px; margin: 0 auto;
}

/* Das Foto bleibt im Hochformat und waechst nicht mit der Textlaenge —
   sonst entsteht bei vielen Qualifikationen ein ueberlanger Streifen.
   Die Netzwerke stehen darunter in derselben Spalte: Sie gehoeren zur
   Person und nicht ans Ende der Qualifikationen. */
.lead-figure {
  display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: 48px; align-items: start;
}

.lead-media .photo-zoom,
.lead-media .lead-placeholder {
  display: block; width: 100%; padding: 0; border: none;
  border-radius: 22px; overflow: hidden; background: var(--surface-soft);
}
.lead-media .photo-zoom { cursor: zoom-in; }
.lead-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  display: block; transition: transform .7s var(--ease);
}

.lead-media .trainer-socials {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  justify-content: flex-start;
}
.lead-media .photo-zoom:hover img { transform: scale(1.03); }

/* Ohne Foto tritt der Anfangsbuchstabe an dessen Stelle — im selben
   Format wie die Porträts, damit die Karten gleich hoch bleiben. Nur in
   der Leitungsspalte wächst er mit, weil das Foto dort die Textlänge
   mitgeht. */
.lead-placeholder {
  display: grid; place-items: center; aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #e6dcd0, #cfc0aa);
  color: #fff; font-family: var(--font-serif); font-size: 84px;
}


.lead-body { padding-top: 4px; }
.lead-body h3 { font-size: 42px; line-height: 1.1; margin: 0 0 8px; }
.lead-role { font-size: 16.5px; color: var(--primary); font-weight: 500; margin: 0 0 24px; }

.lead-bio {
  font-size: 16px; line-height: 1.8; color: var(--text-soft);
  padding-left: 20px; border-left: 2px solid rgba(190, 170, 135, .35);
  margin-bottom: 28px;
}
.lead-bio p { margin-bottom: 14px; }

.lead-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.lead-facts h4 {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 12px;
}
.lead-facts ul { list-style: none; margin: 0; padding: 0; }
.lead-facts li {
  position: relative; padding-left: 16px; margin-bottom: 9px;
  font-size: 14.5px; line-height: 1.5; color: var(--text-soft);
}
.lead-facts li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}

/* ---- Team ---- */

.team-eyebrow { text-align: center; margin: 80px 0 32px; }

.people {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 28px; max-width: 1240px; margin: 0 auto;
}

.person {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(190, 170, 135, .18);
  border-radius: 22px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.person:hover {
  transform: translateY(-6px);
  border-color: rgba(190, 170, 135, .5);
  box-shadow: 0 26px 44px -28px rgba(61, 50, 46, .45);
}

.person-media { position: relative; overflow: hidden; background: var(--surface-soft); }
.person-media .photo-zoom {
  display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in;
}
.person-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.person:hover .person-media img { transform: scale(1.05); }
.person-media .lead-placeholder { border-radius: 0; font-size: 72px; }

.person-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.person-body h3 { font-size: 20px; margin: 0 0 3px; }
.person-role { font-size: 13px; color: var(--primary); font-weight: 500; margin: 0 0 15px; }
.person-bio { font-size: 14.5px; line-height: 1.7; color: var(--text-soft); margin-bottom: 18px; }
.person-bio p { margin-bottom: 10px; }
.person-bio p:last-child { margin-bottom: 0; }

/* Merkmale als Beschreibungsliste: Bezeichnung klein darüber, Einträge
   darunter, dazwischen eine Haarlinie. Ruhiger als zwei Aufzählungen. */
.person-facts { margin: auto 0 0; padding: 0; }
.person-facts dt {
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding-top: 15px; border-top: 1px solid var(--line); margin-bottom: 8px;
}
.person-facts dd { margin: 0 0 6px; }
.person-facts ul { list-style: none; margin: 0; padding: 0; }
.person-facts li {
  position: relative; padding-left: 14px; margin-bottom: 6px;
  font-size: 13px; line-height: 1.5; color: var(--text-soft);
}
.person-facts li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(190, 170, 135, .8);
}

/* Hinweis, dass sich das Bild öffnen lässt */
.photo-zoom { position: relative; }
.photo-zoom::after {
  content: ""; position: absolute; right: 13px; bottom: 13px;
  width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: rgba(30, 24, 21, .55) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M21 21l-6-6M7 10h6M10 7v6'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .3s;
}
.photo-zoom:hover::after,
.photo-zoom:focus-visible::after,
.person:hover .photo-zoom::after { opacity: 1; }
.photo-zoom:focus-visible { outline-offset: 4px; }

/* ---- Vorschau auf der Startseite ---- */

.trainers { display: grid; gap: 24px; max-width: 1300px; margin: 0 auto; }
.trainers-preview { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.trainer-preview {
  color: inherit; text-decoration: none;
  background: var(--surface); border-radius: 22px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.trainer-preview:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.trainer-preview .trainer-photo {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--dark);
}
.trainer-preview .trainer-photo img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease);
}
.trainer-preview:hover .trainer-photo img { transform: scale(1.04); }
.trainer-placeholder {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, #e6dcd0, #cfc0aa);
  color: #fff; font-family: var(--font-serif); font-size: 64px;
}
.trainer-body {
  position: absolute; inset: auto 0 0 0; padding: 26px 22px 20px; z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
}
.trainer-body h3 { color: #fff; font-size: 22px; margin-bottom: 4px; }
.trainer-body p { color: var(--gold-light); font-size: 14px; margin: 0; }
a.trainer-preview:hover .trainer-body h3 { color: var(--gold-light); }
a.trainer-preview:focus-visible { outline-offset: 4px; }

/* ---- Netzwerke ---- */

.trainer-socials { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.trainer-socials a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-soft); color: var(--text-soft);
  transition: background .25s, color .25s, transform .25s;
}
.trainer-socials a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }

/* Kurzhinweis mit dem Namen des Netzwerks — die Symbole allein sind nicht
   fuer jeden eindeutig. Rein gestalterisch, die Beschriftung fuer
   Vorleseprogramme steht weiterhin im aria-label. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--dark); color: #fff;
  font-size: 12px; font-weight: 500; letter-spacing: .2px;
  padding: 5px 10px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity .2s, transform .2s;
}
[data-tip]::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent; border-top-color: var(--dark);
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity .2s, transform .2s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

@media (max-width: 1000px) {
  .lead-panel { padding: 32px; border-radius: 26px; }
  .lead-figure { grid-template-columns: 1fr; gap: 32px; max-width: 560px; margin: 0 auto; }
  .lead-body h3 { font-size: 34px; }
  .team-eyebrow { margin-top: 64px; }
}

@media (max-width: 560px) {
  .lead-panel { padding: 22px 18px; }
  .lead-body h3 { font-size: 28px; }
  .lead-bio { font-size: 15.5px; padding-left: 15px; }
  .lead-facts { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- News ---------- */

/* auto-fill statt auto-fit — wichtig, sobald wenige Eintraege da sind:
   Bei auto-fit fallen leere Spalten auf null zusammen und der letzte
   Eintrag zieht sich ueber die ganze Breite. Auf der zweiten Newsseite
   stand dann ein einzelner Beitrag riesengross da. Mit auto-fill bleiben
   die Spalten stehen, jede Kachel behaelt ihre Groesse. */
.news-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.news-card {
  background: var(--surface); border: 1px solid rgba(190, 170, 135, .15);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .3s;
}
.news-card:hover { transform: translateY(-10px); }
.news-card .media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-soft); display: block; }
.news-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card:hover .media img { transform: scale(1.05); }
.news-card .body { padding: 30px; flex: 1; display: flex; flex-direction: column; }
.news-date {
  display: block; color: var(--primary); font-size: 14px; font-weight: 500; margin-bottom: 15px;
}
.news-card h3 { font-size: 22px; margin-bottom: 15px; }
.news-card h3 a { color: var(--dark); }
.news-card h3 a:hover { color: var(--primary); }
.news-card p { color: var(--text-soft); font-size: 14px; line-height: 1.6; margin-bottom: 20px; flex: 1; }
.read-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-size: 14px; font-weight: 600; transition: all .3s;
}
.read-more:hover { color: var(--accent); gap: 11px; }

.news-scroller { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; }
.news-scroller > * { flex: 0 0 min(360px, 84vw); scroll-snap-align: start; }

/* Der Beitrag steht wie früher in einer weißen Karte über die volle
   Inhaltsbreite — dieselbe Breite wie die Fragen auf der FAQ-Seite. */
.news-article {
  background: var(--surface); border: 1px solid rgba(190, 170, 135, .15);
  border-radius: 28px; padding: 50px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
}
.news-article h1 { font-size: 40px; margin-bottom: 12px; line-height: 1.3; }
.news-meta { color: var(--muted); font-size: 15px; margin-bottom: 30px; }

/* Titelbild: feste Höhe mit Beschnitt, damit Hochkantaufnahmen die Seite
   nicht auseinanderziehen. Ein Klick öffnet die Bildergruppe. */
.news-cover {
  position: relative; display: block; width: 100%; height: 500px;
  border: none; padding: 0; margin: 0 0 35px; cursor: zoom-in;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, var(--surface-soft) 0%, var(--bg) 100%);
  transition: transform .3s ease, box-shadow .3s ease;
}
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-cover:hover { transform: scale(1.01); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }

.news-cover-zoom {
  position: absolute; right: 15px; bottom: 15px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .6); color: #fff;
  opacity: 0; transition: opacity .3s ease; backdrop-filter: blur(5px);
}
.news-cover:hover .news-cover-zoom,
.news-cover:focus-visible .news-cover-zoom { opacity: 1; }

@media (max-width: 900px) {
  .news-article { padding: 30px 22px; border-radius: 20px; }
  .news-cover { height: 300px; margin-bottom: 26px; }
}

.pager {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 50px;
}

/* ---------- Galerie ---------- */

/* Filterleiste — die Galerien sind die Kategorien */
.gallery-filter {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 50px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 14.5px; font-weight: 500;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.filter-chip:hover { border-color: var(--primary); transform: translateY(-2px); }
.filter-chip span {
  font-size: 12px; color: var(--muted);
  background: var(--surface-soft); border-radius: 20px; padding: 1px 8px;
}
.filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.filter-chip.is-active span { background: rgba(255, 255, 255, .25); color: #fff; }

.block-gallery-filter .gallery-item[hidden] { display: none; }

.gallery-grid { display: grid; gap: 20px; }
.gallery-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gallery-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery-4 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.gallery-item {
  border: none; padding: 0; display: block; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow); transition: transform .3s;
}
.gallery-item:hover { transform: translateY(-6px); }
.gallery-item img { width: 100%; transition: transform .5s var(--ease); }
/* Beschnitt auf ein einheitliches Format — sonst reißen Hochkantbilder
   Lücken in das Raster. Vier zu drei wie auf der bisherigen Seite. */
.gallery-item.crop img { aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery-item:hover img { transform: scale(1.06); }

.lightbox {
  position: fixed; inset: 0; background: rgba(30, 24, 21, .94); z-index: 2000;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.lightbox.open { display: flex; }
/* Der Rahmen ist nur so groß wie das Bild darin — nur so sitzt der
   Nachweis am unteren Bildrand und nicht am unteren Bildschirmrand. */
.lightbox .rahmen { position: relative; margin: 0; line-height: 0; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px; display: block; }

/* Eine kompakte Fläche hinter dem Text statt eines Balkens über die ganze
   Breite: So bleibt vom Bild sichtbar, was sichtbar sein soll, und die
   Schrift steht auch auf weißem Hintergrund deutlich da. Die Zeilenhöhe
   muss gesetzt sein — der Rahmen darüber führt „line-height: 0", damit
   unter dem Bild kein Spalt entsteht, und das würde hier sonst erben. */
.lightbox .nachweis {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 6px 14px; border-radius: 99px;

  /* 40 % Schwarz allein reichen nicht auf jedem Motiv: Auf einer hellen
     Wasserspiegelung mit Wolken verschwimmt weiße Schrift trotzdem. Der
     Weichzeichner beruhigt den Untergrund, ohne die Fläche dunkler zu
     machen; der Schatten zieht die Buchstabenkanten nach und springt für
     Browser ein, die den Weichzeichner nicht können. */
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);

  color: #fff; font-size: 13px; line-height: 1.4;
  text-align: center; letter-spacing: .01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.lightbox .nachweis[hidden] { display: none; }
.lightbox button {
  position: absolute; background: rgba(255, 255, 255, .18); border: none; color: #fff;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 26px;
  display: grid; place-items: center; transition: background .3s;
}
.lightbox button:hover { background: var(--primary); }
.lightbox .close { top: 22px; right: 22px; }
.lightbox .prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox .caption { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .8); font-size: 14px; }

/* ---------- Aufklappbereiche ---------- */

/* Breite wie im Original: die Einträge nutzen den Textbereich ganz aus.
   Eine schmale Spalte ließ die Seite gedrungen wirken. */
.accordion { margin: 0; }
.accordion details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); overflow: hidden;
}
.accordion summary {
  padding: 20px 25px; cursor: pointer; font-weight: 600; color: var(--dark); font-size: 18px;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: background .3s;
}
.accordion summary:hover { background: var(--surface-soft); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--primary); font-size: 26px; line-height: 1; transition: transform .3s; }
.accordion details[open] summary::after { transform: rotate(45deg); }
/* Ohne Polster nach oben klebt der Antworttext an der Frage. */
.accordion .answer { padding: 16px 25px 22px; color: var(--text-soft); line-height: 1.7; }
.accordion .answer > :first-child { margin-top: 0; }
.accordion .answer > :last-child { margin-bottom: 0; }
.accordion .answer p { margin: 0 0 12px; }
.accordion .answer ul,
.accordion .answer ol { margin: 10px 0 12px; padding-left: 20px; }
.accordion .answer li { margin-bottom: 5px; }
.accordion .answer a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.accordion .answer strong { color: var(--dark); }

.faq-group + .faq-group { margin-top: 50px; }

/* Kategorieüberschrift wie auf der alten Seite: linksbündig, mit
   goldenem Strich nur unter dem Text — nicht über die ganze Breite. */
.faq-group h3 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; color: var(--dark);
  display: inline-block; text-align: left;
  margin-bottom: 30px; padding-bottom: 15px;
  border-bottom: 2px solid var(--primary);
}

@media (max-width: 768px) {
  .faq-group h3 { font-size: 26px; margin-bottom: 22px; }
  .accordion summary { padding: 18px 20px; font-size: 16px; }
  .accordion .answer { padding: 0 20px 18px; }
}

/* ---------- Tabelle ---------- */

.content-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.content-table th, .content-table td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.content-table th { background: var(--primary); color: #fff; font-weight: 600; }
.content-table tr:last-child td { border-bottom: none; }
.table-striped tbody tr:nth-child(even) td { background: rgba(190, 170, 135, .06); }
.table-wrapper { overflow-x: auto; }

/* ---------- Abstände ---------- */

.block-spacer { padding: 0; }
.spacer-small { height: 30px; }
.spacer-medium { height: 60px; }
.spacer-large { height: 100px; }
hr.spacer { border: none; border-top: 1px solid var(--line); margin: 50px 0; }

/* ---------- Einwilligungspflichtige Inhalte ---------- */

.consent-placeholder {
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 50px 30px; text-align: center; background: var(--surface);
}
.consent-placeholder h3 { font-size: 22px; margin-bottom: 10px; }
.consent-placeholder p { color: var(--text-soft); max-width: 520px; margin: 0 auto 24px; font-size: 15px; }

/* ============================ Fußzeile ============================ */

.site-footer {
  background: var(--surface-soft); color: var(--text-soft);
  padding: 60px 0 30px; border-top: 1px solid rgba(190, 170, 135, .15);
}
.footer-grid {
  display: grid; gap: 60px;
  max-width: 1300px; margin: 0 auto 50px;
  /* Die Spaltenaufteilung kommt aus dem Adminbereich und wird als
     Eigenschaft am Element hinterlegt, nicht als fertige Angabe: Eine
     Angabe direkt am Element würde jede Regel hier ueberstimmen — auch
     die fuer schmale Bildschirme weiter unten. Genau das hat die Fusszeile
     auf dem Handy dreispaltig gelassen und die ganze Seite zu breit
     gemacht. */
  grid-template-columns: var(--footer-cols, 1.2fr 1.2fr .8fr);
}

.site-footer h3 {
  font-family: var(--font-serif); font-size: 28px; font-weight: 600; letter-spacing: 1px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-footer .tagline {
  font-family: var(--font-tagline); font-size: 11px; letter-spacing: 3px;
  color: var(--primary); text-transform: uppercase; margin-bottom: 20px;
}
.site-footer .description { color: var(--text-soft); margin-bottom: 25px; }
.site-footer p { font-size: 14px; line-height: 1.6; }

.site-footer h4 {
  font-size: 18px; color: var(--dark); margin-bottom: 25px;
  letter-spacing: -.3px; position: relative; display: inline-block;
}
.site-footer h4::after {
  content: ""; position: absolute; bottom: -8px; left: 0;
  width: 35px; height: 2px; background: var(--primary); border-radius: 2px;
}

.site-footer a { color: var(--text-soft); font-size: 14px; }
.site-footer a:hover { color: var(--primary); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 14px; }

.footer-contact div { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-contact svg { color: var(--primary); flex: 0 0 auto; }

/* Hinweis auf die Vereinsmitgliedschaft — abgesetzt wie auf der bisherigen Seite */
.member-note {
  margin-top: 20px; padding-top: 15px;
  border-top: 1px solid rgba(190, 170, 135, .2);
  display: flex; align-items: center; gap: 10px;
}
.member-note span { color: var(--muted); font-size: 14px; }

.socials { display: flex; gap: 18px; margin-top: 25px; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(190, 170, 135, .1); color: var(--primary); transition: all .3s ease;
}
.socials a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }

/* Rechtliche Verweise mit Pfeil wie im Original.
   Der Cookie-Knopf muss ein <button> sein (er öffnet einen Dialog, er
   verweist nicht) — sieht hier aber aus wie die Verweise daneben. */
.legal-links a,
.legal-links .link-button {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-soft); font-size: 14px; transition: all .3s;
}
.legal-links a::before,
.legal-links .link-button::before {
  content: "\203A"; color: var(--primary); font-size: 16px; transition: transform .3s;
}
.legal-links a:hover,
.legal-links .link-button:hover { color: var(--primary); transform: translateX(5px); }
.legal-links a:hover::before,
.legal-links .link-button:hover::before { transform: translateX(3px); }

.link-button {
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}

.footer-contact div a::before { content: none; }

.footer-bottom {
  text-align: center; padding-top: 30px; border-top: 1px solid rgba(190, 170, 135, .15);
  color: var(--muted); font-size: 13px;
}

/* ============================ Hinweise ============================ */

.draft-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500;
  background: var(--accent); color: #fff; text-align: center; padding: 10px 20px; font-size: 14px;
}
.draft-banner a { color: #fff; text-decoration: underline; font-size: inherit; }

.empty-note { text-align: center; color: var(--muted); padding: 40px 20px; }

/* ============================ Mobil ============================ */

@media (max-width: 1200px) {
  .trainers { grid-template-columns: repeat(3, 1fr); }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.image-left .split-media { order: 0; }
  .split h2 { font-size: 32px; text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .rich-text.columns-2 { columns: 1; }
  .stats { gap: 30px; }
  .stat h4 { font-size: 40px; }
  .cards { gap: 25px; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .block { padding: 60px 0; }
  .section-title { font-size: 32px; margin-bottom: 45px; }

  /* Die weiche Milchglasfläche der mitscrollenden Kopfleiste muss hier
     entfallen: Ein backdrop-filter macht das Element zum Bezugsrahmen für
     fest positionierte Kinder. Das Menü liegt in der Kopfleiste — sobald
     die Seite ein Stück gescrollt war, blieb es deshalb nur so hoch wie
     die Leiste selbst, ein unbrauchbarer Streifen. Der Hintergrund ist
     ohnehin nahezu deckend, sichtbar fehlt nichts. */
  .site-header.solid { backdrop-filter: none; }

  /* Über dem Menü, sonst verschwindet die Schaltfläche unter der
     aufgeschobenen Fläche und lässt sich nicht mehr zum Schließen
     antippen. Bei geöffnetem Menü steht sie auf Weiß — also dunkel. */
  .nav-toggle { display: inline-flex; z-index: 1101; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] { color: var(--text); }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    background: var(--surface); box-shadow: -10px 0 40px rgba(0, 0, 0, .12);
    transform: translateX(100%); transition: transform .3s var(--ease), visibility 0s .3s;
    padding: 100px 24px 30px; z-index: 1100; overflow-y: auto;
    /* Zusätzlich zur Verschiebung ausgeblendet: Bleibt die Fläche beim
       Wechsel der Bildschirmbreite einmal stehen, fängt sie sonst
       Berührungen ab, ohne sichtbar zu sein. */
    visibility: hidden; pointer-events: none;
  }
  .main-nav.open {
    transform: translateX(0); visibility: visible; pointer-events: auto;
    transition: transform .3s var(--ease);
  }
  .main-nav ul { flex-direction: column; gap: 6px; }
  .main-nav a { color: var(--text); font-size: 17px; padding: 12px 0; }
  .main-nav a::after { background: var(--primary); }

  /* Unterhalb der Kopfleiste (z-index 1000) — und damit unterhalb des
     Menüs, das in ihr liegt. Ein höherer Wert nützt dem Menü nichts: Die
     Kopfleiste bildet einen eigenen Stapelkontext, ihr Inhalt kann diesen
     nicht verlassen. Lag der Vorhang darüber, war das Menü abgedunkelt und
     jeder Fingertipp landete auf dem Vorhang statt auf dem Menüpunkt. */
  .nav-scrim { position: fixed; inset: 0; background: rgba(30, 24, 21, .5); z-index: 990; display: none; }
  .nav-scrim.open { display: block; }

  .brand { gap: 10px; }
  .brand-mark { height: 42px; }
  .brand-text .brand-name { font-size: 22px; }
  .brand.has-logo .brand-text .brand-name { font-size: 18px; }
  .brand-text .brand-claim { font-size: 9px; letter-spacing: 2px; }
  /* Der Schriftzug brach neben der Bildmarke um und ragte aus der
     Kopfleiste heraus. Er bleibt lieber einzeilig und wird kleiner. */
  .brand-text .brand-name, .brand-text .brand-claim { white-space: nowrap; }

  .hero-content h1 { font-size: 36px; }
  .hero-content p { font-size: 16px; }
  .hero-buttons { gap: 12px; }
  .btn { padding: 13px 30px; font-size: 15px; }

  .cards-4, .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .card-item { padding: 40px 25px; }
  .card-item h3 { font-size: 24px; }

  .trainers { grid-template-columns: repeat(2, 1fr); }
  .trainer { height: 380px; }
  .trainer-body { padding: 24px 18px; }
  .trainer-body h3 { font-size: 20px; }

  .stats { justify-content: center; gap: 25px; }
  .stat h4 { font-size: 32px; }
  .stat p { font-size: 12px; }

  /* Auf dem Handy kleiner und enger, damit auch zwei Dutzend Punkte in
     zwei Reihen unter dem Kopfbild Platz finden. */
  .hero-dots { gap: 8px; row-gap: 6px; bottom: 22px; }
  .hero-dots button { width: 8px; height: 8px; }
  .hero-dots button.active { width: 18px; border-radius: 4px; }

  .cta { padding: 50px 24px; }
  .cta h3 { font-size: 30px; }
  .news-article h1 { font-size: 32px; }

  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 430px) {
  /* Auf den schmalsten Geräten reicht der Platz neben Sprachwahl und
     Menüschaltfläche nur noch für einen kleineren Schriftzug. */
  .brand-mark { height: 36px; }
  .brand.has-logo .brand-text .brand-name { font-size: 15px; letter-spacing: 1.5px; }
  .brand.has-logo .brand-text .brand-claim { font-size: 8px; letter-spacing: 1.5px; }
}

@media (max-width: 560px) {
  /* Vier Kennzahlen nebeneinander passen auf dem Handy nicht mehr. Als
     Flexzeile brachen sie zu drei plus einer um, und die letzte zog sich
     über die ganze Breite. Zwei feste Spalten ergeben ein ruhiges Feld. */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 16px; }
  .stat { min-width: 0; }
  .stat h4 { font-size: 34px; }
  .stat p { font-size: 13px; }
}

@media (max-width: 520px) {
  .trainers { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .hero-dots, .scroll-hint, .draft-banner { display: none; }
  body { background: #fff; }
  .block { padding: 20px 0; page-break-inside: avoid; }
}

/* ============================ Einwilligung ============================ */

.consent {
  position: fixed; inset: auto 0 0 0; z-index: 1200;
  background: var(--surface); border-top: 3px solid var(--primary);
  box-shadow: 0 -10px 40px rgba(61, 50, 46, .16);
  padding: 26px var(--gutter);
  animation: consentUp .45s var(--ease) both;
}
@keyframes consentUp { from { transform: translateY(100%); } to { transform: none; } }

.consent[hidden] { display: none; }

.consent-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
}
.consent-text { flex: 1; min-width: 280px; }
.consent-text h2 { font-size: 20px; margin-bottom: 6px; }
.consent-text p { font-size: 15px; color: var(--text-soft); margin: 0; }
.consent-text a { color: var(--primary); text-decoration: underline; }

.consent-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.consent-actions form { margin: 0; }

.btn-ghost-line {
  display: inline-block; padding: 13px 26px; border-radius: 40px;
  border: 1.5px solid var(--line); background: transparent; color: var(--text);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .5px;
  cursor: pointer; transition: all .3s;
}
.btn-ghost-line:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }

/* ---------- Einstellungsdialog ---------- */

.consent-modal {
  position: fixed; inset: 0; z-index: 1300; padding: 24px;
  background: rgba(30, 24, 21, .6);
  display: flex; align-items: center; justify-content: center; overflow-y: auto;
}
.consent-modal[hidden] { display: none; }

.consent-modal form {
  background: var(--surface); border-radius: 24px; width: 100%; max-width: 620px;
  box-shadow: 0 30px 70px rgba(61, 50, 46, .3); margin: auto;
  max-height: 90vh; display: flex; flex-direction: column;
}
.consent-modal-head {
  padding: 26px 30px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.consent-modal-head h2 { font-size: 22px; }
.consent-close {
  background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 0 4px; transition: color .2s;
}
.consent-close:hover { color: var(--dark); }

.consent-modal-body { padding: 22px 30px; overflow-y: auto; }
.consent-lead { color: var(--text-soft); font-size: 15px; margin-bottom: 22px; }

.consent-option {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 16px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.consent-option:hover { border-color: var(--primary); background: rgba(190, 170, 135, .04); }
.consent-option input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); flex: 0 0 20px; }
.consent-option input:disabled { opacity: .55; cursor: not-allowed; }
.consent-option strong { color: var(--dark); font-size: 16px; }
.consent-option em {
  font-style: normal; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--primary); margin-left: 8px;
}
.consent-option small { display: block; color: var(--text-soft); font-size: 14px; margin-top: 4px; line-height: 1.6; }

.consent-modal-foot {
  padding: 18px 30px 26px; border-top: 1px solid var(--line);
  display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
}
.consent-privacy { margin-right: auto; font-size: 14px; color: var(--muted); text-decoration: underline; }

body.consent-open { overflow: hidden; }

/* ---------- Freigeschaltete Einbettungen ---------- */

.consent-placeholder.is-loaded {
  border: none; padding: 0; background: transparent; overflow: hidden;
  border-radius: 28px; box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
}
.consent-placeholder.is-loaded iframe {
  display: block; width: 100%; height: 400px; border: 0;
  /* Wie früher: leicht zurückgenommen, beim Überfahren voll gesättigt. */
  filter: grayscale(.2) contrast(1.05); transition: filter .4s ease;
}
.consent-placeholder.is-loaded:hover iframe { filter: grayscale(0) contrast(1); }
.block-video .consent-placeholder.is-loaded iframe { aspect-ratio: 16 / 9; height: auto; }

.consent-remember {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 14px; color: var(--text-soft); cursor: pointer;
}
.consent-remember input { width: 17px; height: 17px; accent-color: var(--primary); }

@media (max-width: 860px) {
  .consent { padding: 20px; }
  .consent-inner { gap: 18px; }
  .consent-actions { width: 100%; }
  .consent-actions form, .consent-actions .btn-ghost-line, .consent-actions .btn { flex: 1; }
  .consent-actions form .btn { width: 100%; }
  .consent-modal form { border-radius: 18px; }
  .consent-modal-head, .consent-modal-body, .consent-modal-foot { padding-left: 20px; padding-right: 20px; }
  .consent-placeholder.is-loaded iframe { height: 320px; }
}

/* ============================ Formulare ============================ */

/* Wie auf der alten Seite: das Formular nutzt die Breite des Inhalts,
   damit Name und E-Mail nebeneinander Platz haben. */
.form-wrap {
  margin: 0 auto;
  background: var(--surface); border: 1px solid rgba(190, 170, 135, .15);
  border-radius: 28px; padding: 45px 45px 38px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
/* Überschrift und Einleitung sitzen in der Formularkarte — wie früher. */
.form-title {
  font-size: 32px; text-align: center; color: var(--dark);
  margin: 0 0 10px;
}
.form-intro {
  font-size: 15px; text-align: center; color: var(--text-soft);
  margin: 0 0 35px;
}
.form-wrap > .form-note:first-child { margin-top: 0; }

@media (max-width: 768px) {
  .form-title { font-size: 26px; }
}

.form-note {
  border-radius: 14px; padding: 16px 20px; margin-bottom: 26px; font-size: 15.5px;
}
.form-note-ok { background: #e9f6ef; color: #2f855a; border: 1px solid #cbe8d8; }
.form-note-error { background: #fdeceb; color: #c0392b; border: 1px solid #f3cdc9; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field.is-wide { grid-column: 1 / -1; }

.form-label, .form-field > .form-label {
  display: block; font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 7px;
}

.content-form input[type=text],
.content-form input[type=email],
.content-form input[type=tel],
.content-form input[type=date],
.content-form input[type=number],
.content-form input[type=url],
.content-form select,
.content-form textarea {
  width: 100%; padding: 13px 16px; font-family: var(--font-body); font-size: 16px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.content-form textarea { resize: vertical; line-height: 1.7; }
.content-form input:focus,
.content-form select:focus,
.content-form textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(190, 170, 135, .18);
}
.content-form ::placeholder { color: #b3a89f; }

.form-choices { display: flex; gap: 22px; flex-wrap: wrap; }
.form-choices label { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 15.5px; }
.form-choices input { width: 19px; height: 19px; accent-color: var(--primary); }

.form-consent { display: flex; gap: 13px; align-items: flex-start; cursor: pointer; font-size: 15px; }
.form-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); flex: 0 0 20px; }
.form-consent span { color: var(--text-soft); line-height: 1.6; }
.form-consent a { color: var(--primary); text-decoration: underline; }

.form-help { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; }

/* Falle für Automaten — für Menschen und Screenreader unsichtbar */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-top: 32px;
}
.form-required { font-size: 13.5px; color: var(--muted); margin: 0; }

@media (max-width: 720px) {
  .form-wrap { padding: 28px 22px 24px; border-radius: var(--radius); }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .form-foot { flex-direction: column-reverse; align-items: stretch; }
  .form-foot .btn { width: 100%; }
  .form-required { text-align: center; }
}

/* ==========================================================================
   Abstände je Baustein — im Baukasten eingestellt

   Steht bewusst ganz am Ende: Eine ausdrückliche Wahl im Baukasten muss
   sich gegen die Rhythmus-Regeln weiter oben durchsetzen, etwa gegen den
   engeren Anschluss unter einem Überschrift-Baustein.
   ========================================================================== */

.block.space-none { padding-top: 0; padding-bottom: 0; }
.block.space-compact { padding-top: 40px; padding-bottom: 40px; }
.block.space-spacious { padding-top: 140px; padding-bottom: 140px; }
.block.space-custom {
  padding-top: var(--space-top, 100px);
  padding-bottom: var(--space-bottom, 100px);
}

@media (max-width: 768px) {
  /* Auf schmalen Bildschirmen wirkt jeder Abstand größer. */
  .block.space-spacious { padding-top: 90px; padding-bottom: 90px; }
  .block.space-custom {
    padding-top: min(var(--space-top, 100px), 80px);
    padding-bottom: min(var(--space-bottom, 100px), 80px);
  }
}

/* ==========================================================================
   Zwei Bausteine nebeneinander

   Die beiden Bausteine bringen ihren eigenen Abschnitt samt Polster mit.
   Innerhalb einer Spalte muss beides weg, sonst entstünden doppelte
   Ränder und doppelte Abstände — der Rahmen kommt vom Behälter.
   ========================================================================== */

.columns-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start;
}

/* In einer Spalte bringt jeder Baustein sein eigenes Abschnittspolster mit.
   Das muss weg, sonst entstehen doppelte Ränder — der Abstand zwischen
   mehreren Bausteinen kommt stattdessen vom Behälter, damit er gleichmäßig
   bleibt, egal was am einzelnen Baustein eingestellt ist. */
.columns-row .column { display: flex; flex-direction: column; gap: 26px; }
.columns-row .column > .block { padding: 0; }
.columns-row .column > .block > .container { padding: 0; max-width: none; }

/* Überschriften in einer Spalte stehen links, nicht mittig — sie gehören
   zum Text daneben und nicht zur ganzen Seite. */
.columns-row .section-title { text-align: left; font-size: 32px; margin-bottom: 22px; }
.columns-row .section-title::after { left: 0; transform: none; }
.columns-row .section-subtitle { text-align: left; }
.columns-row .form-title,
.columns-row .form-intro { text-align: left; }

@media (max-width: 900px) {
  .columns-row { grid-template-columns: 1fr; gap: 30px; }
}

/* ==========================================================================
   Trainingszeiten
   ========================================================================== */

/* Jede Gruppe hat eine Farbe. Sie wird als Variable gesetzt, damit Rahmen,
   Punkte und Flächen daraus abgeleitet werden können, ohne jeden Ton
   einzeln zu pflegen. */
.block-training .farbe-gold    { --gruppe: #c9a227; }
.block-training .farbe-rose    { --gruppe: #d98ca0; }
.block-training .farbe-mint    { --gruppe: #5fae90; }
.block-training .farbe-himmel  { --gruppe: #6a97c4; }
.block-training .farbe-flieder { --gruppe: #9a7cbe; }
.block-training .farbe-sand    { --gruppe: #b8966c; }

/* ---------- Karten je Gruppe ---------- */

/* Feste Spaltenzahl statt „auto-fit": Die Einstellung soll die Anzahl
   bestimmen, und „auto-fit" würde auf breiten Bildschirmen einfach so
   viele Karten nebeneinanderstellen, wie hineinpassen — die gewählte Zahl
   wäre damit wirkungslos. Enger wird es erst, wenn der Platz wirklich
   knapp wird; darum kümmern sich die Umbrüche weiter unten. */
.training-karten {
  display: grid; gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.training-karten.karten-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px; margin-inline: auto;
}
.training-karten.karten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.training-karten.karten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Unter diesen Breiten wird jede Karte zu schmal für Zeit und Ortsangabe
   nebeneinander — dann zählt Lesbarkeit mehr als die eingestellte Zahl. */
@media (max-width: 1100px) {
  .training-karten,
  .training-karten.karten-3,
  .training-karten.karten-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .training-karten,
  .training-karten.karten-2,
  .training-karten.karten-3,
  .training-karten.karten-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Das Bild sitzt bündig in der Karte, oben mit deren Rundung. Die feste
   Höhe hält Karten mit und ohne Bild auf einer Linie. */
.training-bild {
  margin: -30px -28px 4px; height: 180px; overflow: hidden;
  border-radius: calc(var(--radius-lg) - 4px) calc(var(--radius-lg) - 4px) 0 0;
}
.training-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.training-karte {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 14px;
  /* Der farbige Streifen oben ordnet die Karte ihrer Gruppe zu, ohne die
     ganze Karte einzufärben — der Text bleibt so überall gleich lesbar. */
  border-top: 4px solid var(--gruppe, var(--primary));
}

.training-karte h3 {
  font-family: var(--font-display); font-size: 22px; color: var(--dark);
  margin: 0 0 10px;
}

.training-marken { display: flex; flex-wrap: wrap; gap: 8px; }

.training-marke {
  font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 99px;
  background: var(--surface-soft); color: var(--text-soft);
}
.training-marke.frei { background: rgba(95, 174, 144, .14); color: #3f7f66; }
.training-marke.voll { background: rgba(240, 129, 76, .14); color: #b45a2c; }

.training-untertitel { color: var(--text-soft); margin: 0; }

.training-zeiten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.training-zeiten li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--surface-soft);
  border-left: 3px solid var(--gruppe, var(--primary));
}
.training-zeiten .tag { font-weight: 650; color: var(--dark); min-width: 92px; }
.training-zeiten .zeit { color: var(--text); }
.training-zeiten .ort,
.training-zeiten .hinweis { font-size: 13.5px; color: var(--muted); width: 100%; }

.training-text { color: var(--text-soft); }
.training-trainerin { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- Wochenplan ---------- */

.wochenplan {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
}

.wochentag {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 18px; box-shadow: var(--shadow);
}

.wochentag-name {
  font-family: var(--font-display); font-size: 16px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}

.wochentag-termine { display: flex; flex-direction: column; gap: 12px; }

.block-training .termin {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-soft);
  border-left: 3px solid var(--gruppe, var(--primary));
}

.termin-zeit { font-weight: 650; color: var(--dark); }
.termin-gruppe { color: var(--text); }
.termin-alter,
.termin-ort,
.termin-hinweis { font-size: 13px; color: var(--muted); }

/* ---------- Kompakte Liste ---------- */

.training-liste { display: flex; flex-direction: column; gap: 12px; }

.training-zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); border-left: 3px solid var(--gruppe, var(--primary));
}

.training-zeile-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.training-zeile-kopf strong { color: var(--dark); }

.training-alter { font-size: 13px; color: var(--muted); }

.training-voll {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  background: rgba(240, 129, 76, .14); color: #b45a2c;
}

.training-zeile-zeiten { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-soft); }
.training-zeile-zeiten strong { color: var(--dark); margin-right: 4px; }

@media (max-width: 560px) {
  .training-karte { padding: 24px 20px; }
  .training-bild { margin: -24px -20px 4px; height: 160px; }
  .training-zeiten .tag { min-width: 0; }
}

/* ==========================================================================
   Größentabelle T-Shirt
   ========================================================================== */

.groessen { color: var(--text); }

.groessen-kopf { text-align: center; margin-bottom: 26px; }
.groessen-kopf h3 {
  font-family: var(--font-display); font-size: 26px; color: var(--dark);
  margin: 0 0 4px; letter-spacing: -.01em;
}
.groessen-kopf p { margin: 0; color: var(--muted); font-size: 15px; }

.groessen-block { margin-bottom: 26px; }
.groessen-block h4 {
  font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}

/* Auf schmalen Bildschirmen scrollt die Tabelle in sich, statt die Seite
   breiter zu machen — vier Spalten passen nicht auf ein Handy. */
.groessen-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }

.groessen-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }

.groessen-tabelle thead th {
  background: var(--primary); color: #fff; font-weight: 600; text-align: left;
  padding: 11px 14px; white-space: nowrap;
}

.groessen-tabelle tbody th,
.groessen-tabelle tbody td { padding: 10px 14px; border-top: 1px solid var(--line); }

/* Die erste Spalte trägt die Größe, nach der bestellt wird — sie darf
   auffallen, die Umrechnungen daneben sind nur Hilfsangaben. */
.groessen-tabelle tbody th {
  font-weight: 700; color: var(--primary-dark); text-align: left; white-space: nowrap;
}
.groessen-tabelle tbody td { color: var(--text-soft); }
.groessen-tabelle tbody tr:nth-child(even) { background: var(--surface-soft); }

.groessen-preis { margin: 10px 0 0; font-size: 14.5px; color: var(--text); }

.groessen-messen {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface-soft); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 22px;
}
.groessen-messen-text h4 { margin: 0 0 5px; }
.groessen-messen-text p { margin: 0; font-size: 14px; color: var(--text-soft); }
.groessen-figur { width: 88px; height: 96px; flex: 0 0 88px; color: var(--primary); }

.groessen-hinweise {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13.5px; color: var(--muted);
}
.groessen-hinweise li { padding-left: 18px; position: relative; }
.groessen-hinweise li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}

@media (max-width: 560px) {
  .groessen-messen { flex-direction: column; align-items: flex-start; gap: 14px; }
  .groessen-tabelle { font-size: 13.5px; }
  .groessen-tabelle thead th,
  .groessen-tabelle tbody th,
  .groessen-tabelle tbody td { padding: 9px 11px; }
}

/* ---------- Hilfe-Dialog ---------- */

.hilfe-dialog {
  border: none; border-radius: var(--radius-lg); padding: 0;
  max-width: 720px; width: calc(100% - 32px); max-height: 88vh;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.hilfe-dialog::backdrop { background: rgba(30, 24, 21, .6); }

.hilfe-dialog-inhalt { padding: 30px 30px 26px; overflow-y: auto; max-height: 88vh; }

.hilfe-dialog-zu {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: var(--surface-soft); color: var(--muted); cursor: pointer;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  transition: background .2s, color .2s;
}
.hilfe-dialog-zu:hover { background: var(--primary); color: #fff; }

/* Der Knopf steht neben dem Feld, nicht darunter: Wer die Größe nicht weiß,
   sucht die Hilfe genau dort, wo die Frage gestellt wird. */
.hilfe-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--primary-dark); font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.hilfe-knopf:hover { color: var(--dark); }

@media (max-width: 560px) {
  .hilfe-dialog-inhalt { padding: 24px 20px 22px; }
}

/* Bei den Kindergrößen tragen „Deutsche Kindergröße" und „Körpergröße" in
   jeder Zeile denselben Wert — die Doppelung stammt aus der Vorlage. Auf
   schmalen Bildschirmen fliegt sie raus: Sonst müsste man waagerecht
   schieben, um ausgerechnet die Körpergröße zu sehen, nach der man die
   Größe aussucht. */
@media (max-width: 640px) {
  .groessen-tabelle .spalte-konfektion { display: none; }

  /* Überschriften dürfen umbrechen: „Körpergröße (cm)" in einer Zeile
     zwingt die Tabelle sonst breiter als das Handy, und dann schiebt man
     waagerecht statt zu lesen. */
  .groessen-tabelle thead th { white-space: normal; }
}

/* ==========================================================================
   Mitgliederbereich
   ========================================================================== */

.mitglied-seite { padding-top: calc(var(--header-h) + 60px); padding-bottom: 80px; min-height: 70vh; }

.mitglied-karte {
  max-width: 480px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 40px 36px;
}
.mitglied-karte.breit { max-width: 620px; }

.mitglied-karte h1 {
  font-family: var(--font-display); font-size: 28px; color: var(--dark);
  margin: 0 0 10px; letter-spacing: -.01em;
}
.mitglied-lead { color: var(--text-soft); margin: 0 0 24px; line-height: 1.6; }

.mitglied-formular { display: flex; flex-direction: column; gap: 18px; }

/* Ein Feld je Zeile, große Ziele: Die meisten füllen das am Telefon aus. */
.mitglied-formular .feld { display: flex; flex-direction: column; gap: 7px; }
.mitglied-formular label { font-size: 14.5px; font-weight: 600; color: var(--dark); }
.mitglied-formular input,
.mitglied-formular select,
.mitglied-formular textarea {
  width: 100%; padding: 13px 15px; font-size: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--text); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.mitglied-formular input:focus,
.mitglied-formular select:focus,
.mitglied-formular textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(190, 170, 135, .22);
}
.mitglied-formular input[aria-invalid="true"] { border-color: var(--accent); }

.feld-hilfe { font-size: 13px; color: var(--muted); line-height: 1.5; }

.mitglied-fehler,
.mitglied-hinweis {
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 20px;
  font-size: 14.5px; line-height: 1.5;
}
.mitglied-fehler { background: rgba(240, 129, 76, .12); color: #a8481f; }
.mitglied-hinweis { background: var(--surface-soft); color: var(--text-soft); }

.mitglied-fuss { margin: 20px 0 0; text-align: center; font-size: 14px; }
.mitglied-fuss a { color: var(--primary-dark); }

.mitglied-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.mitglied-knoepfe .btn { flex: 1; min-width: 180px; justify-content: center; }

.mitglied-trenner { border: none; border-top: 1px solid var(--line); margin: 30px 0 22px; }

.mitglied-daten { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0 0 22px; }
.mitglied-daten dt { color: var(--muted); font-size: 14px; }
.mitglied-daten dd { margin: 0; color: var(--dark); font-size: 14.5px; }

.mitglied-abmelden { margin: 0; }
.mitglied-textknopf {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
.mitglied-textknopf:hover { color: var(--dark); }

/* Fortschritt: als Balken statt „Schritt 3 von 6" ausgeschrieben — auf
   dem Handy bleibt so Platz für den Inhalt. */
.fortschritt {
  height: 8px; border-radius: 99px; background: var(--surface-soft);
  overflow: hidden; margin-bottom: 24px;
}
.fortschritt-balken {
  height: 100%; background: var(--primary); border-radius: 99px;
  transition: width .3s var(--ease);
}

@media (max-width: 560px) {
  .mitglied-seite { padding-top: calc(var(--header-h) + 30px); padding-bottom: 50px; }
  .mitglied-karte { padding: 28px 22px; border-radius: var(--radius); }
  .mitglied-karte h1 { font-size: 24px; }
  .mitglied-daten { grid-template-columns: 1fr; gap: 2px; }
  .mitglied-daten dt { margin-top: 10px; }
}

/* ---------- Anmeldeformular ---------- */

.schritt-zaehler {
  margin: -14px 0 18px; font-size: 13px; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}

.abschnitt {
  font-family: var(--font-display); font-size: 17px; color: var(--dark);
  margin: 26px 0 4px; display: flex; align-items: center; gap: 10px;
}
.abschnitt:first-child { margin-top: 0; }
.abschnitt-text { margin: 0 0 4px; font-size: 14.5px; color: var(--text-soft); line-height: 1.55; }

.freiwillig {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--surface-soft); color: var(--muted);
  border-radius: 99px; padding: 3px 9px;
}

.pflicht { color: var(--accent); }

/* Fehler stehen unter dem Feld und werden über aria-describedby verknüpft —
   ein roter Rahmen allein erreicht niemanden, der vorlesen lässt. */
.feld-fehler { font-size: 13.5px; color: #a8481f; line-height: 1.5; }

.uebernommen {
  background: var(--surface-soft); border-left: 3px solid var(--primary);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px;
  font-size: 14px; color: var(--text-soft); line-height: 1.55;
}
.uebernommen strong { display: block; color: var(--dark); margin-bottom: 3px; }

.uebersicht-kasten {
  background: var(--surface-soft); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 9px;
}
.uebersicht-kasten > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.uebersicht-kasten span { color: var(--text-soft); font-size: 14.5px; }
.uebersicht-kasten strong { color: var(--dark); font-size: 16px; white-space: nowrap; }
.uebersicht-kasten .klein span { font-size: 13px; color: var(--muted); }
.uebersicht-kasten .klein { border-top: 1px solid var(--line); padding-top: 9px; }

/* Große Klickfläche: Auf dem Handy trifft niemand ein 16-Pixel-Kästchen. */
.schalter {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: 14.5px; line-height: 1.55; color: var(--text);
  transition: border-color .15s, background .15s;
}
.schalter:hover { border-color: var(--primary); }
.schalter input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--primary); }
.schalter.fehlerhaft { border-color: var(--accent); }

.wahl { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 0; }
.wahl.fehlerhaft { border-color: var(--accent); }
.wahl legend {
  font-family: var(--font-display); font-size: 16px; color: var(--dark);
  padding: 0 8px; margin-left: -8px;
}
.wahl-option {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 12px 14px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14.5px; transition: border-color .15s, background .15s;
}
.wahl-option:hover { border-color: var(--primary); }
.wahl-option input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: var(--primary); }
.wahl-option:has(input:checked) { border-color: var(--primary); background: var(--surface-soft); }

.shirt-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.rechtstext { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 4px 0 0; }
.rechtstext a { color: var(--primary-dark); }

.formular-knoepfe { display: flex; gap: 12px; margin-top: 10px; }
.formular-knoepfe .btn { flex: 1; justify-content: center; }
.formular-knoepfe .btn-secondary { flex: 0 0 auto; min-width: 110px; }

/* ---------- Zusammenfassung ---------- */

.zusammenfassung { display: flex; flex-direction: column; gap: 22px; }
.zusammenfassung section {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.zusammenfassung-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px;
}
.zusammenfassung-kopf h2 { font-family: var(--font-display); font-size: 16px; color: var(--dark); margin: 0; }
.zusammenfassung-kopf a { font-size: 14px; color: var(--primary-dark); }
.zusammenfassung dl { display: grid; grid-template-columns: 160px 1fr; gap: 7px 16px; margin: 0; }
.zusammenfassung dt { color: var(--muted); font-size: 14px; }
.zusammenfassung dd { margin: 0; color: var(--dark); font-size: 14.5px; }
.zusammenfassung-text { margin: 0; font-size: 14.5px; color: var(--dark); }

@media (max-width: 560px) {
  .zusammenfassung dl { grid-template-columns: 1fr; gap: 1px; }
  .zusammenfassung dt { margin-top: 9px; }
  .formular-knoepfe { flex-direction: column-reverse; }
  .formular-knoepfe .btn { width: 100%; }
}

/* ==========================================================================
   Mitgliederbereich: Selbstverwaltung
   ==========================================================================
   Links die Navigation, rechts der Inhalt in abgesetzten Blöcken. Unter
   900px wird aus der Spalte eine waagerechte Leiste — ein Klappmenü wäre
   ein Klick mehr für etwas, das ohnehin auf einen Bildschirm passt. */

.mitglied-bereich { padding-top: calc(var(--header-h) + 44px); padding-bottom: 80px; min-height: 70vh; }
/* Volle Seitenbreite wie im Kopfbereich — der Bereich ist eine
   Arbeitsflaeche, kein Fliesstext. */
.mitglied-bereich > .container { max-width: var(--wrap); }

/* ---------- Kopf ---------- */

.mb-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.mb-augenbraue {
  margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--primary-dark);
}
.mb-titel {
  font-family: var(--font-display); font-size: 30px; color: var(--dark);
  margin: 0; letter-spacing: -.015em;
}
.mb-kopf-rechts { display: flex; align-items: center; gap: 16px; }
.mb-kind {
  font-size: 14px; color: var(--muted);
  padding: 6px 13px; border-radius: 99px; background: var(--surface-soft);
}
.mb-abmelden {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 6px 4px; cursor: pointer;
  color: var(--muted); font-size: 14px; font-family: inherit;
}
.mb-abmelden:hover { color: var(--dark); }
.mb-abmelden-icon { opacity: .7; }

.mb-hinweis {
  margin: 0 0 22px; padding: 13px 17px; border-radius: var(--radius);
  background: rgba(190, 170, 135, .14); color: var(--dark); font-size: 14.5px;
}

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

.mb-raster { display: grid; grid-template-columns: 248px 1fr; gap: 32px; align-items: start; }

.mb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-nav-punkt {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 14px;
  color: var(--text); font-size: 15px; text-decoration: none;
  transition: background .15s, color .15s;
}
.mb-nav-punkt:hover { background: var(--surface-soft); color: var(--dark); }
.mb-nav-punkt.ist-aktiv { background: var(--dark); color: #fff; font-weight: 600; }
.mb-nav-icon { flex: none; opacity: .75; }
.mb-nav-punkt.ist-aktiv .mb-nav-icon { opacity: 1; }

.mb-inhalt { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ---------- Blöcke ---------- */

.mb-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 28px 30px;
}
.mb-block-titel {
  font-family: var(--font-display); font-size: 19px; color: var(--dark);
  margin: 0 0 16px; letter-spacing: -.01em;
}
.mb-block h2:not(.mb-block-titel) {
  font-family: var(--font-display); font-size: 22px; color: var(--dark); margin: 0 0 10px;
}
.mb-zwischentitel {
  font-family: var(--font-display); font-size: 16px; color: var(--dark);
  margin: 26px 0 14px; padding-top: 20px; border-top: 1px solid var(--line);
}
.mb-abschnitt {
  font-family: var(--font-display); font-size: 18px; color: var(--dark);
  margin: 12px 0 -6px;
}
.mb-lead { color: var(--text-soft); margin: 0 0 20px; line-height: 1.62; font-size: 15.5px; max-width: 72ch; }
.mb-lead.klein { font-size: 14.5px; }
.mb-fuss { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 78ch; }
.mb-fuss a { color: var(--primary-dark); }
.mb-grau { color: var(--muted); }
.mb-grau.klein { font-size: 13.5px; margin: 4px 0 0; line-height: 1.55; }
.mb-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mb-leer { margin: 0; color: var(--muted); font-size: 14.5px; }
.mb-optional { font-weight: 400; color: var(--muted); font-size: .88em; }

/* ---------- Banner ---------- */

.mb-banner {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--radius);
  background: var(--surface-soft); color: var(--text);
  font-size: 14.5px; line-height: 1.55;
}
.mb-banner svg { flex: none; margin-top: 1px; opacity: .7; }
.mb-banner a { color: var(--primary-dark); }
.mb-banner.ist-warnung { background: rgba(240, 129, 76, .11); color: #8f4520; }
.mb-banner.ist-warnung a { color: #8f4520; }

.mb-hinweis-klein {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 14px 0 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.55;
}
.mb-hinweis-klein svg { flex: none; margin-top: 2px; opacity: .6; }

/* ---------- Kennzahlen oben ---------- */

.mb-oben { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }

.mb-karte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 22px 24px; display: flex; flex-direction: column;
}
.mb-karte-gross { background: linear-gradient(150deg, #fffdfa, var(--surface-soft)); }
.mb-karte-label {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.mb-karte-wert {
  margin: 0; font-family: var(--font-display); font-size: 26px;
  color: var(--dark); letter-spacing: -.02em; line-height: 1.2;
}
.mb-karte-wert.klein { font-size: 18px; letter-spacing: 0; line-height: 1.4; }
.mb-karte-zeit { display: block; font-size: 19px; color: var(--primary-dark); margin-top: 2px; }
.mb-karte-zusatz { margin: 7px 0 0; font-size: 13.5px; color: var(--muted); min-height: 1em; }
.mb-karte-notiz { margin: 8px 0 0; font-size: 13.5px; color: var(--text-soft); }
.mb-karte-link {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; color: var(--primary-dark); text-decoration: none;
}
.mb-karte-link:hover { color: var(--dark); }

/* ---------- Kacheln ---------- */

.mb-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; }
.mb-kachel {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px;
  text-decoration: none; transition: border-color .15s, transform .15s var(--ease);
}
.mb-kachel:hover { border-color: var(--primary); transform: translateY(-2px); }
.mb-kachel-icon { color: var(--primary-dark); margin-bottom: 4px; }
.mb-kachel-titel { font-family: var(--font-display); font-size: 17px; color: var(--dark); }
.mb-kachel-text { font-size: 14px; color: var(--text-soft); line-height: 1.55; }

/* ---------- Datenlisten ---------- */

.mb-daten { margin: 0; display: flex; flex-direction: column; gap: 0; }
.mb-daten > div {
  display: grid; grid-template-columns: 240px 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.mb-daten > div:last-child { border-bottom: none; }
.mb-daten dt { color: var(--muted); font-size: 14px; }
.mb-daten dd { margin: 0; color: var(--dark); font-size: 15px; }
.mb-daten-gross > div { grid-template-columns: 200px 1fr; }
.mb-daten-gross dd { font-size: 16px; }

.mb-betraege { list-style: none; margin: 0; padding: 0; }
.mb-betraege li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.mb-betraege li:last-child { border-bottom: none; }
.mb-betraege em { font-style: normal; color: var(--muted); font-size: 13px; }
.mb-betraege strong { font-family: var(--font-display); font-size: 17px; color: var(--dark); white-space: nowrap; }
.mb-betraege .mb-grau strong { font-size: 15px; font-weight: 400; color: var(--muted); }

.mb-liste { list-style: none; margin: 0; padding: 0; }
.mb-liste > li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.mb-liste > li:last-child { border-bottom: none; }
.mb-liste p { margin: 3px 0 0; }

.mb-punkte { margin: 0; padding-left: 20px; color: var(--text-soft); font-size: 14.5px; line-height: 1.65; max-width: 78ch; }
.mb-punkte li { margin-bottom: 9px; }
.mb-punkte strong { color: var(--dark); }

/* ---------- Trainingszeiten ---------- */

.mb-gruppe { display: flex; gap: 20px; align-items: flex-start; }
.mb-gruppe-bild {
  width: 132px; height: 132px; object-fit: cover; flex: none;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.mb-gruppe-unter { margin: 2px 0 0; color: var(--primary-dark); font-size: 14.5px; }
.mb-gruppe-meta { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--muted); }
.mb-gruppe-text { margin-top: 18px; color: var(--text-soft); font-size: 14.5px; line-height: 1.65; }
.mb-gruppe-text p:last-child { margin-bottom: 0; }

.mb-zeiten { list-style: none; margin: 0; padding: 0; }
.mb-zeit {
  display: grid; grid-template-columns: 110px 132px 1fr auto; gap: 12px; align-items: center;
  padding: 13px 14px; border-radius: 14px; font-size: 15px;
}
.mb-zeit + .mb-zeit { margin-top: 4px; }
.mb-zeit.ist-naechster { background: var(--surface-soft); }
.mb-zeit-tag { font-weight: 600; color: var(--dark); }
.mb-zeit-uhr { color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.mb-zeit-ort { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; }
.mb-zeit-ort svg { opacity: .6; }
.mb-zeit-notiz { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); }
.mb-marke {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  background: var(--dark); color: #fff; border-radius: 99px; padding: 4px 10px;
}

/* ---------- Einwilligungen ---------- */

.mb-einwilligungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mb-einwilligung {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
}
.mb-einwilligung.ist-erteilt { border-color: rgba(190, 170, 135, .5); background: #fffdfa; }
.mb-einwilligung-kopf { display: flex; gap: 12px; align-items: flex-start; }
.mb-einwilligung-status {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-soft); color: var(--muted);
}
.ist-erteilt .mb-einwilligung-status { background: var(--primary); color: #fff; }
.mb-einwilligung h3 { font-family: var(--font-display); font-size: 16.5px; color: var(--dark); margin: 0; }
.mb-einwilligung-zustand { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.mb-einwilligung-text { margin: 14px 0 0; font-size: 14.5px; color: var(--text-soft); line-height: 1.6; max-width: 82ch; }
.mb-einwilligung-folge { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.mb-einwilligung-folge strong { color: var(--text); }
.mb-einwilligung-knopf { margin: 16px 0 0; }

/* ---------- Protokoll ---------- */

.mb-protokoll { list-style: none; margin: 0; padding: 0; }
.mb-protokoll li {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.mb-protokoll li:last-child { border-bottom: none; }
.mb-protokoll-zeit { color: var(--muted); font-variant-numeric: tabular-nums; }
.mb-protokoll-text { color: var(--text); }

/* ---------- Formulare ---------- */

.mb-formular { margin: 0; }
.mb-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; }
.mb-feld { display: flex; flex-direction: column; gap: 6px; }
.mb-feld-weit { grid-column: 1 / -1; }
.mb-feld-schmal { max-width: 150px; }
.mb-feld > label { font-size: 14px; font-weight: 600; color: var(--dark); }
.mb-feld input,
.mb-feld select,
.mb-feld textarea {
  width: 100%; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--text); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.mb-feld textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.mb-feld input:focus,
.mb-feld select:focus,
.mb-feld textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(190, 170, 135, .22);
}
.mb-feld.hat-fehler input,
.mb-feld.hat-fehler select,
.mb-feld.hat-fehler textarea { border-color: var(--accent); }
.mb-feld-hilfe { font-size: 13px; color: var(--muted); line-height: 1.5; }
.mb-feld-fehler { font-size: 13.5px; color: #a8481f; line-height: 1.5; margin: 0; }
.mb-fehler-oben {
  background: rgba(240, 129, 76, .12); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 18px;
}

.mb-feldgruppe { border: none; margin: 0 0 16px; padding: 0; }
.mb-feldgruppe legend { font-size: 14px; font-weight: 600; color: var(--dark); padding: 0 0 8px; }

.mb-radio, .mb-schalter {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 14.5px; color: var(--text); line-height: 1.55;
}
.mb-radio { margin-bottom: 8px; }
.mb-radio input, .mb-schalter input { flex: none; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); }
.mb-schalter.hat-fehler { color: #a8481f; }

.mb-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.mb-aufklapp { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.mb-aufklapp > summary {
  cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--primary-dark);
  list-style: none; padding: 4px 0;
}
.mb-aufklapp > summary::-webkit-details-marker { display: none; }
.mb-aufklapp > summary::before { content: "+ "; }
.mb-aufklapp[open] > summary::before { content: "\2013 "; }
.mb-aufklapp > summary:hover { color: var(--dark); }
.mb-aufklapp[open] > summary { margin-bottom: 16px; }

/* ---------- Knöpfe, die es sonst nicht gibt ---------- */

.btn-ghost {
  background: transparent; color: var(--dark);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-dark); transform: translateY(-2px); }
.btn-gefahr { color: #a8481f; border-color: rgba(240, 129, 76, .4); }
.btn-gefahr:hover { border-color: var(--accent); color: #a8481f; }
.btn-gefahr-voll { background: var(--accent); color: #fff; }
.btn-gefahr-voll:hover { background: #d96e3c; color: #fff; transform: translateY(-2px); }

/* ---------- Bestätigung ---------- */

.mb-bestaetigt { text-align: center; }
.mb-bestaetigt-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--surface-soft); color: var(--primary-dark); margin-bottom: 16px;
}
.mb-bestaetigt .mb-daten { text-align: left; margin-top: 24px; }
.mb-bestaetigt .mb-knoepfe { justify-content: center; }

@media print {
  .mb-nav, .mb-kopf-rechts, .mb-knoepfe, .site-header, .site-footer { display: none !important; }
  .mb-raster { grid-template-columns: 1fr; }
  .mb-block { box-shadow: none; border-color: #ddd; }
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 900px) {
  .mb-raster { grid-template-columns: 1fr; gap: 20px; }

  /* Aus der Spalte wird eine Leiste, die sich schieben lässt. */
  .mb-nav ul {
    flex-direction: row; overflow-x: auto; gap: 6px;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .mb-nav ul::-webkit-scrollbar { display: none; }
  .mb-nav-punkt { white-space: nowrap; padding: 9px 15px; border: 1px solid var(--line); }
  .mb-nav-punkt.ist-aktiv { border-color: var(--dark); }
  .mb-nav-icon { display: none; }

  .mb-oben { grid-template-columns: 1fr 1fr; }
  .mb-karte-gross { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .mitglied-bereich { padding-top: calc(var(--header-h) + 24px); padding-bottom: 50px; }
  .mb-titel { font-size: 25px; }
  .mb-kopf { align-items: flex-start; }
  .mb-block { padding: 22px 20px; border-radius: var(--radius); }
  .mb-oben, .mb-kacheln { grid-template-columns: 1fr; }
  .mb-felder { grid-template-columns: 1fr; }
  .mb-feld-schmal { max-width: none; }
  .mb-daten > div, .mb-daten-gross > div { grid-template-columns: 1fr; gap: 2px; }
  .mb-zeit { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .mb-zeit-ort { grid-column: 1 / -1; }
  .mb-protokoll li { grid-template-columns: 1fr; gap: 1px; }
  .mb-gruppe { flex-direction: column; }
  .mb-gruppe-bild { width: 100%; height: 180px; }
  .mb-knoepfe .btn { width: 100%; justify-content: center; }
}

/* ---------- Shirt-Nachbestellungen ---------- */

.mb-textknopf {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--primary-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.mb-textknopf:hover { color: var(--dark); }

.mb-bestellungen { list-style: none; margin: 0; padding: 0; }
.mb-bestellung {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
}
.mb-bestellung + .mb-bestellung { margin-top: 10px; }
.mb-bestellung.status-delivered { background: var(--surface-soft); }
.mb-bestellung.status-cancelled { opacity: .6; }

.mb-bestellung-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.mb-bestellung-kopf strong { font-size: 15.5px; color: var(--dark); }
.mb-bestellung-fuss {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 6px; font-size: 13.5px; color: var(--muted);
}
.mb-marke-klein {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--surface-soft); color: var(--text-soft);
  border-radius: 99px; padding: 4px 11px; white-space: nowrap;
}
.status-delivered .mb-marke-klein { background: var(--primary); color: #fff; }
.status-cancelled .mb-marke-klein { text-decoration: line-through; }

/* ---------- Trainingsabsagen ---------- */

.mb-termine { border: none; margin: 0 0 20px; padding: 0; }
.mb-feld-legende { font-size: 14px; font-weight: 600; color: var(--dark); padding: 0 0 10px; }
.mb-termine.hat-fehler .mb-termin { border-color: rgba(240, 129, 76, .5); }

.mb-termin {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 16px; transition: border-color .15s, background .15s;
}
.mb-termin + .mb-termin { margin-top: 8px; }
.mb-termin:hover { border-color: var(--primary); }
.mb-termin:has(input:checked) { border-color: var(--dark); background: var(--surface-soft); }
.mb-termin input { flex: none; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); }
.mb-termin-text { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.mb-termin-text strong { font-size: 15px; color: var(--dark); }
.mb-termin-zeit { color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.mb-termin-ort { color: var(--muted); font-size: 13.5px; }

.mb-abmeldungen { list-style: none; margin: 0; padding: 0; }
.mb-abmeldung {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.mb-abmeldung:last-child { border-bottom: none; }
.mb-abmeldung p { margin: 3px 0 0; }
.mb-abmeldung form { flex: none; }

.mb-karte-links { margin-top: auto; padding-top: 16px; display: flex; gap: 18px; flex-wrap: wrap; }
.mb-karte-links .mb-karte-link { margin-top: 0; padding-top: 0; }
.mb-karte-link.ist-abmelden { color: var(--muted); }
.mb-karte-link.ist-abmelden:hover { color: var(--accent); }

/* Laufzeithinweis im Anmeldeformular — steht vor den Haken, nicht darunter:
   Eine Bindung, die man erst nach dem Zustimmen liest, ist keine. */
.laufzeit-hinweis {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface-soft); border-radius: var(--radius);
  padding: 16px 18px; margin: 0 0 20px;
}
.laufzeit-hinweis svg { flex: none; margin-top: 2px; color: var(--primary-dark); }
.laufzeit-hinweis strong { display: block; font-size: 14.5px; color: var(--dark); margin-bottom: 3px; }
.laufzeit-hinweis p { margin: 0; font-size: 14.5px; color: var(--text-soft); line-height: 1.55; }
.laufzeit-hinweis p.klein { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* Kindwahl im Kopf des Mitgliederbereichs — nur sichtbar, wenn ein Konto
   mehrere Kinder hat. */
.mb-kindwahl { display: flex; align-items: center; gap: 8px; margin: 0; }
.mb-kindwahl-label {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.mb-kindwahl select {
  padding: 7px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); color: var(--dark); cursor: pointer;
}
.mb-kindwahl select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(190, 170, 135, .22);
}

/* Ablauf einer laufenden Anfrage — nummeriert, weil die Reihenfolge die
   eigentliche Auskunft ist. */
.mb-schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; }
.mb-schritte li {
  counter-increment: schritt; position: relative;
  padding: 0 0 20px 42px; font-size: 14.5px; line-height: 1.55;
}
.mb-schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-soft); color: var(--primary-dark);
  font-size: 13px; font-weight: 700;
}
.mb-schritte li:not(:last-child)::after {
  content: ''; position: absolute; left: 13.5px; top: 30px; bottom: 6px;
  width: 1px; background: var(--line);
}
.mb-schritte strong { display: block; color: var(--dark); margin-bottom: 2px; }
.mb-schritte span { color: var(--text-soft); }

/* Bekannte Bankverbindung bei Geschwisterkindern */
.bank-bekannt {
  background: var(--surface-soft); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 18px;
}
.bank-bekannt .schalter { margin: 0; }
.bank-bekannt-iban { font-variant-numeric: tabular-nums; color: var(--primary-dark); }
.bank-bekannt .feld-hilfe { margin: 10px 0 0 30px; }

.zusammenfassung-zusatz { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }