/* ===========================================================================
   CoRo-Kurse — Gestaltung
   Marke: Tiefblau #0E4182 + Koralle #F08161 (aus dem Logo entnommen).
   Schriften liegen lokal unter assets/fonts — keine externen Ladevorgänge.
   =========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Überschriften-Schrift seit 04.08.2026: Playfair Display statt Fraunces —
   Ronjas Wunsch („gleicher Stil, aber ruhiger; Fraunces' f und j wirken
   verwackelt"). Fraunces bleibt als Datei liegen, falls zurückgewechselt wird. */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-var.woff2') format('woff2-variations');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

:root {
  --blau: #0e4182;
  --blau-tief: #0a2d5c;
  --blau-hell: #2c65ad;
  --koralle: #f08161;
  --koralle-tief: #d2634a;
  --tinte: #16233a;
  --tinte-weich: #55637c;
  --creme: #fbf8f4;
  --creme-warm: #f4ede4;
  --dunst: #e9eff7;
  --weiss: #fff;
  --linie: rgba(14, 65, 130, 0.13);
  --linie-zart: rgba(14, 65, 130, 0.07);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --rand: clamp(1.25rem, 5vw, 5rem);   /* Seitenrand */
  --breite: 78rem;                      /* Inhaltsbreite */
  --sprung: clamp(4.5rem, 11vw, 9rem);  /* vertikaler Abschnittsabstand */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der Hero pinnt per position:sticky — dafür darf kein Vorfahre clippen. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--sans);
  /* --schriftmass kommt aus dem Adminbereich (Gestaltung → Schriftgröße) und
     ist ohne dortige Änderung 1. Weil praktisch alle Größen der Seite in em
     oder rem gerechnet sind, zieht dieser eine Faktor alles gleichmäßig mit —
     die Proportionen bleiben also erhalten. */
  font-size: calc(clamp(1rem, 0.96rem + 0.2vw, 1.125rem) * var(--schriftmass, 1));
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--koralle-tief);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.springmarke {
  position: absolute; left: var(--rand); top: 0; z-index: 200;
  transform: translateY(-150%);
  background: var(--blau); color: #fff; padding: 0.7rem 1.2rem;
  border-radius: 0 0 0.5rem 0.5rem; text-decoration: none; font-size: 0.9rem;
  transition: transform 0.2s var(--ease);
}
.springmarke:focus { transform: translateY(0); }

/* --- Rasterhilfen -------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--sprung); }

.augenbraue {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--koralle-tief);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.augenbraue::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: var(--koralle);
  flex: none;
}

.blende { /* leicht gedämpfter Fließtext */
  color: var(--tinte-weich);
}

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

.knopf {
  --bg: var(--blau);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  border-radius: 999px;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 1.8rem -0.7rem rgba(14, 65, 130, 0.45);
}
.knopf:active { transform: translateY(0); }
.knopf .pfeil { transition: transform 0.25s var(--ease); }
.knopf:hover .pfeil { transform: translateX(3px); }

.knopf--koralle { --bg: var(--koralle-tief); }
.knopf--koralle:hover { box-shadow: 0 0.8rem 1.8rem -0.7rem rgba(210, 99, 74, 0.5); }

.knopf--offen {
  --bg: transparent;
  --fg: var(--blau);
  border-color: var(--linie);
}
.knopf--offen:hover { background: var(--dunst); box-shadow: none; }

.knopf--hell { --bg: #fff; --fg: var(--blau); border-color: #fff; }

/* Textlink mit Unterstreichung, die beim Überfahren durchläuft */
.textlink {
  color: var(--blau);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.3s var(--ease), color 0.2s var(--ease);
}
.textlink:hover { color: var(--koralle-tief); background-size: 0% 1px; background-position: 100% 100%; }

/* --- Kopfzeile ----------------------------------------------------------- */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--rand);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
              padding 0.4s var(--ease);
}
.kopf::before { /* Milchglas erst, wenn gescrollt wurde */
  content: '';
  position: absolute; inset: 0;
  background: rgba(251, 248, 244, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--linie-zart);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.kopf[data-gescrollt] { padding-block: 0.6rem; }
.kopf[data-gescrollt]::before { opacity: 1; }

.kopf > * { position: relative; }

.kopf-logo { flex: none; line-height: 0; }
.kopf-logo img {
  height: clamp(2.1rem, 3.2vw, 2.7rem);
  width: auto;
  transition: height 0.4s var(--ease);
}
.kopf[data-gescrollt] .kopf-logo img { height: clamp(1.85rem, 2.6vw, 2.2rem); }

.kopf-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  /* Sieben Menüpunkte (Ronjas Vorgabe) — enger als früher, sonst reicht die
     Zeile selbst auf breiten Schirmen nicht. */
  gap: clamp(0.8rem, 1.4vw, 1.5rem);
}
/* `:not(.knopf)` ist wichtig: Der Anmelde-Knopf steht mit in der Navigation.
   Ohne die Ausnahme erbt er `color: var(--tinte)` — dunkler Text auf dunklem
   Blau, praktisch unlesbar — und bekommt zusätzlich die Korallenlinie der
   Navigationslinks unter den Rand gezeichnet. */
.kopf-nav a:not(.knopf) {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinte);
  position: relative;
  padding-block: 0.3rem;
}
.kopf-nav a:not(.knopf)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--koralle);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.kopf-nav a:not(.knopf):hover::after,
.kopf-nav a:not(.knopf)[aria-current]::after { transform: scaleX(1); transform-origin: left; }

.kopf .knopf {
  padding: 0.7rem 1.25rem;
  font-size: 0.92rem;
  color: #fff;
  text-decoration: none;
}

.menue-knopf {
  display: none;
  margin-left: auto;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
}
.menue-knopf span {
  display: block; width: 1.05rem; height: 1px; background: var(--tinte);
  position: relative;
  transition: background 0.2s var(--ease);
}
.menue-knopf span::before, .menue-knopf span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1px; background: var(--tinte);
  transition: transform 0.3s var(--ease);
}
.menue-knopf span::before { top: -5px; }
.menue-knopf span::after { top: 5px; }
.menue-knopf[aria-expanded='true'] span { background: transparent; }
.menue-knopf[aria-expanded='true'] span::before { transform: translateY(5px) rotate(45deg); }
.menue-knopf[aria-expanded='true'] span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 62rem) {
  .menue-knopf { display: flex; }
  .kopf-nav {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6rem var(--rand) 2.5rem;
    background: var(--creme);
    border-bottom: 1px solid var(--linie);
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease);
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(14, 65, 130, 0.25);
  }
  .kopf-nav[data-offen] { transform: translateY(0); }
  .kopf-nav a:not(.knopf) {
    font-family: var(--serif);
    font-size: 1.5rem;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--linie-zart);
  }
  .kopf-nav a:not(.knopf)::after { display: none; }
  .kopf-nav .knopf { margin-top: 1.5rem; justify-content: center; font-size: 1rem; }
}

/* ===========================================================================
   Hero und Lebensabschnitte
   ---------------------------------------------------------------------------
   Kein gepinnter Bereich, kein an den Scrollstand gekoppeltes Video: die Seite
   scrollt ganz normal. Die Clips laufen von selbst, sobald sie im Bild sind,
   die Texte fliegen beim Scrollen herein.

   Die Clips stehen wie die Fotos auf reinem Weiß und liegen deshalb im
   Multiply-Modus über dem hellen Seitengrund — so verschwindet das Weiß
   rückstandslos, ohne dass irgendetwas freigestellt werden muss.
   =========================================================================== */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  padding-block: clamp(7rem, 13vh, 10rem) clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
}
@media (min-width: 62rem) {
  .hero { min-height: 100vh; min-height: 100svh; }
}

.hero-grund {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 78% 24%, rgba(240, 129, 97, 0.17), transparent 68%),
    radial-gradient(ellipse 85% 65% at 12% 82%, rgba(14, 65, 130, 0.12), transparent 70%),
    linear-gradient(166deg, var(--creme) 0%, var(--creme-warm) 58%, var(--dunst) 100%);
}

.hero-raster {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .hero-raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}

.hero h1 {
  font-size: clamp(2.15rem, 5.6vw, 4.3rem);
  color: var(--blau);
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin-bottom: 1.2rem;
}
.hero .hero-text {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  color: var(--tinte);
  max-width: 31rem;
  margin-bottom: 2rem;
}
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0; }

/* --- Die Clips ----------------------------------------------------------- */

.hero-medium, .abschnitt-medium { position: relative; }

.folge, .folge-standbild {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* Eine leere Leinwand ist durchsichtig — dort kann nichts aufblitzen, sie
   braucht keine Abdeckung. Das Standbild dagegen schon: es würde mit weißem
   Hintergrund erscheinen, bevor der Multiply-Modus greift. Dafür `visibility`
   und NICHT `opacity` — Opazität erzeugt einen Stapelkontext und kapselt genau
   den Multiply-Modus ab, den wir brauchen. */
.folge-standbild { visibility: hidden; }
.folge-standbild[data-geladen] { visibility: visible; }

/* Ausblendverlauf NUR, wo das Motiv den unteren Bildrand berührt (bei der
   Yoga-Aufnahme enden die Beine dort). Liegt es frei im Bild — etwa die Matte
   mit Luft darunter —, schnitte derselbe Verlauf quer durch die Matte. */
.folge[data-offen-unten], .folge-standbild {
  -webkit-mask-image: linear-gradient(180deg, #000 0 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 90%, transparent 100%);
}

/* Große Ziffer hinter dem Motiv — ruhiger redaktioneller Akzent. */
.abschnitt-nr {
  position: absolute;
  top: -0.15em; left: -0.08em;
  font-family: var(--serif);
  font-size: clamp(5rem, 13vw, 10rem);
  font-weight: 600;
  line-height: 1;
  color: var(--blau);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

/* --- Lebensabschnitte ---------------------------------------------------- */

.abschnitt-leben { padding-block: clamp(3.5rem, 8vw, 7rem); }
.abschnitt-leben:nth-of-type(even) { background: var(--creme-warm); }

.abschnitt-raster {
  display: grid;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  /* Spaltenverhältnis kommt aus build.mjs und richtet sich nach dem
     Seitenverhältnis der Aufnahme (siehe abschnittBlock): breite, flache
     Aufnahmen bekommen mehr Platz, sonst wirken sie verloren. */
  .abschnitt-raster { grid-template-columns: var(--medium, 1fr) var(--text, 1fr); }
  /* Seiten abwechseln, damit die Abschnitte nicht gleichförmig wirken —
     dabei muss das Spaltenverhältnis mitdrehen, sonst bekäme die breite
     Aufnahme genau die schmale Spalte. */
  .abschnitt-leben:nth-of-type(even) .abschnitt-medium { order: 2; }
  .abschnitt-leben:nth-of-type(even) .abschnitt-raster {
    grid-template-columns: var(--text, 1fr) var(--medium, 1fr);
  }
}

.abschnitt-inhalt h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  color: var(--blau);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 1rem;
}
.abschnitt-text {
  font-size: clamp(0.99rem, 0.94rem + 0.3vw, 1.15rem);
  color: var(--tinte);
  max-width: 32rem;
  margin-bottom: 1.6rem;
}

.fakten {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 32rem;
  border-top: 1px solid var(--linie);
}
.fakt {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: clamp(0.9rem, 0.87rem + 0.16vw, 1rem);
  color: var(--tinte-weich);
}
.fakt::before {
  content: '';
  flex: none;
  width: 0.9rem; height: 1px;
  background: var(--koralle);
  transform: translateY(-0.3rem);
}

.hero-hinweis {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-weich);
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero-hinweis::after {
  content: ''; width: 1px; height: 2rem;
  background: linear-gradient(var(--koralle), transparent);
  animation: rieseln 2.2s var(--ease) infinite;
}
@keyframes rieseln {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 62rem) { .hero-hinweis { display: none; } }

/* --- Schmale Schirme ------------------------------------------------------
   Untereinander statt nebeneinander. Drei Dinge sind dabei wichtig:

   1. Höhe deckeln. Ein Hochformat-Motiv nähme sonst fast den ganzen Bildschirm
      ein und schöbe den Text so weit nach unten, dass man an Ronja vorbei-
      scrollt, ohne etwas zu lesen.
   2. Breite Motive dürfen dafür die volle Breite nutzen — bei ihnen ist die
      Höhe ohnehin gering, ein zusätzlicher Deckel machte sie nur winzig.
   3. Die Scrollstrecke einer Bildfolge hängt an der Höhe des Elements. Ein
      flaches Motiv wäre in einem Wimpernschlag durchgelaufen; deshalb bekommt
      es unten Platz, über den die Bewegung laufen kann.
   ------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .abschnitt-medium, .hero-medium { display: flex; justify-content: center; }

  .folge, .folge-standbild {
    width: 100%;
    height: auto;
    max-height: 42svh;
    object-fit: contain;
    margin-inline: auto;
  }
  /* Hochformat: die Höhe bestimmt, die Breite folgt. */
  .folge[data-hoch], .folge-standbild[data-hoch] { width: auto; }

  .abschnitt-leben { padding-block: clamp(2.5rem, 7vw, 4rem); }
  .abschnitt-raster { gap: clamp(1.25rem, 4vw, 2rem); }
  .abschnitt-nr { font-size: clamp(3.5rem, 16vw, 6rem); top: -0.1em; }

  /* Flache Motive brauchen Scrollstrecke, sonst ist die Bewegung sofort vorbei. */
  .abschnitt-medium { padding-block: 0 clamp(1rem, 6vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-hinweis::after { animation: none; }
  * { transition-duration: 0.01ms !important; }
}


/* ===========================================================================
   Einblenden beim Scrollen
   ---------------------------------------------------------------------------
   WICHTIG: Diese Animation darf niemals einen Container umschließen, in dem ein
   Bild mit `mix-blend-mode: multiply` liegt. `opacity` und `transform` erzeugen
   einen eigenen Stapelkontext; das Bild multipliziert dann gegen diesen statt
   gegen die Seite, und der weiße Studiohintergrund bleibt als heller Rahmen
   stehen, bis die Animation durch ist. Deshalb sitzt `data-auftritt` bei
   Kurskacheln, Porträt und Kursbildern am Text, nicht am Bild.
   =========================================================================== */

[data-auftritt] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-auftritt][data-sichtbar] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-auftritt] { opacity: 1; transform: none; }
}

/* ===========================================================================
   Leitsatz-Band
   =========================================================================== */

.leitsatz {
  background: var(--blau);
  color: #fff;
  padding-block: clamp(4rem, 9vw, 7rem);
  position: relative;
  overflow: hidden;
}
.leitsatz::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 85% 0%, rgba(240, 129, 97, 0.28), transparent 65%);
}
.leitsatz .huelle { position: relative; }
.leitsatz p {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0;
}
.leitsatz .augenbraue { color: rgba(255, 255, 255, 0.72); }
.leitsatz .augenbraue::before { background: var(--koralle); }
.leitsatz cite {
  display: block; margin-top: 2rem; font-style: normal;
  font-size: 0.9rem; color: rgba(255, 255, 255, 0.65);
}

/* ===========================================================================
   Kursübersicht
   =========================================================================== */

.abschnitt-kopf {
  display: grid;
  gap: 1.5rem 4rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 60rem) {
  .abschnitt-kopf { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; }
}
.abschnitt-kopf h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
.abschnitt-kopf .beitext { color: var(--tinte-weich); max-width: 34rem; }

/* Die Trennlinien sitzen bewusst auf den Karten, nicht als Rasterhintergrund
   in den Lücken: Karten blenden beim Scrollen ein, und ein durchscheinender
   Hintergrund würde solange als grauer Block stehen bleiben. */
.kursgitter {
  display: grid;
  /* Echter Abstand zwischen den Kacheln — sie stehen frei, statt in einem
     Raster mit Trennlinien zu kleben. */
  gap: clamp(1.25rem, 2.6vw, 2.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.kurs {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie-zart);
  border-radius: clamp(0.9rem, 1.6vw, 1.3rem);
  box-shadow: 0 1px 2px rgba(14, 65, 130, 0.05),
              0 16px 36px -20px rgba(14, 65, 130, 0.22);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  padding: clamp(1rem, 2.4vw, 1.7rem);
}
.kurs:hover, .kurs:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(14, 65, 130, 0.06),
              0 26px 48px -22px rgba(14, 65, 130, 0.32);
}

/* Das Vorschaubild steht dauerhaft — auf jedem Gerät. Früher erschien es erst
   beim Überfahren, was auf Geräten ohne Maus schlicht nie passierte. */
.kurs-bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--creme-warm);
  position: relative;
  /* Leicht abgerundet, passend zur nun freistehenden Kachel. */
  border-radius: clamp(0.5rem, 1vw, 0.8rem);
}
.kurs-bild img {
  width: 100%; height: 100%;
  /* contain statt cover: Logos und Fotos erscheinen vollständig, nichts wird
     abgeschnitten (Ronjas Punkt 4 vom 05.08.2026) — die Kachel bleibt 4:3. */
  object-fit: contain;
  padding: 4%;
  mix-blend-mode: multiply;
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.kurs:hover .kurs-bild img,
.kurs:focus-visible .kurs-bild img {
  transform: scale(1.055);
  filter: saturate(1.08) contrast(1.03);
}

/* Korallenstrich, der beim Überfahren unter dem Bild durchläuft. */
.kurs-bild::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--koralle);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.kurs:hover .kurs-bild::after,
.kurs:focus-visible .kurs-bild::after { transform: scaleX(1); }

.kurs-inhalt {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* Nur oben Abstand zum Bild — links, rechts und unten kommt jetzt von der
     Kachel (.kurs), damit Text und Bild an derselben Kante stehen. */
  padding: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  flex: 1;
}

.kurs-nr {
  font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 600;
  color: var(--koralle-tief);
}
.kurs-titel {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--blau);
  display: block;
  /* Lange Einzelwörter wie „Beckenbodentraining" passen in einer schmalen
     Kachel nicht in eine Zeile und liefen über den Rand hinaus. Silbentrennung
     bricht sie sauber um; break-word ist der Notnagel, falls die Trennung für
     ein Wort keine Stelle findet. */
  hyphens: auto;
  overflow-wrap: break-word;
  transition: transform 0.45s var(--ease);
}
.kurs:hover .kurs-titel, .kurs:focus-visible .kurs-titel { transform: translateX(0.2rem); }

.kurs-zielgruppe { font-size: 0.92rem; color: var(--tinte-weich); }

.kurs-mehr {
  margin-top: auto;
  padding-top: 0.9rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 500; color: var(--blau);
  transition: gap 0.35s var(--ease);
}
.kurs:hover .kurs-mehr, .kurs:focus-visible .kurs-mehr { gap: 0.95rem; }

.marke-kasse {
  align-self: flex-start;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 0.32rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--blau-hell);
}

/* ===========================================================================
   Über Ronja
   =========================================================================== */

.ueber {
  background: var(--creme-warm);
}
.ueber-gitter {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .ueber-gitter { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}
.ueber-bild {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0.4rem 0.4rem 14rem 14rem;
  overflow: hidden;
  background: var(--dunst);
}
.ueber-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; mix-blend-mode: multiply; }
.ueber-bild::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--linie);
}
.ueber h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 1.5rem; }

.qualifikationen {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linie);
}
.qualifikationen li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.97rem;
  display: flex; align-items: baseline; gap: 0.9rem;
}
.qualifikationen li::before {
  content: '';
  width: 0.32rem; height: 0.32rem; border-radius: 999px;
  background: var(--koralle); flex: none;
  transform: translateY(-0.2rem);
}

/* ===========================================================================
   Termine
   =========================================================================== */

.termine-liste { display: grid; gap: 0; border-top: 1px solid var(--linie); }

.termin {
  display: grid;
  gap: 0.4rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--linie);
  position: relative;
}
@media (min-width: 56rem) {
  .termin {
    grid-template-columns: 8.5rem minmax(0, 1.35fr) minmax(0, 1fr) auto;
    gap: 2rem;
  }
}

.termin-datum {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--blau);
  line-height: 1.25;
}
.termin-datum b { display: block; font-size: 1.85rem; font-weight: 600; letter-spacing: -0.02em; }
.termin-datum span { font-size: 0.82rem; color: var(--tinte-weich); font-family: var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }

.termin-titel { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }
.termin-ort { font-size: 0.93rem; color: var(--tinte-weich); }
.termin-meta { font-size: 0.9rem; color: var(--tinte-weich); }
.termin-meta b { color: var(--tinte); font-weight: 500; }

.termin-status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--tinte-weich);
}
.termin-status::before {
  content: ''; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor;
}
.termin-status[data-frei] { color: #1f7a52; }

@media (max-width: 55.99rem) {
  .termin { padding-block: 1.6rem; }
  .termin-datum { display: flex; align-items: baseline; gap: 0.5rem; }
  .termin-datum b { font-size: 1.35rem; }
  .termin .knopf { margin-top: 0.7rem; justify-self: start; }
}

/* ===========================================================================
   Fußbereich
   =========================================================================== */

.fuss {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--blau-tief);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  font-size: 0.95rem;
}

/* Marken-Blüte als dezentes Wasserzeichen: die weiße Bildmarke der alten
   Website, die unten rechts aus dem Footer ausläuft. Sehr niedrige Deckkraft,
   damit sie Textur gibt, ohne den Text zu stören. Rein dekorativ, deshalb per
   Hintergrundbild (kein Markup, für Screenreader unsichtbar). */
.fuss::before {
  content: '';
  position: absolute;
  right: -3%;
  bottom: -22%;
  width: min(34rem, 58%);
  aspect-ratio: 1 / 1;
  background: url('img/bildmarke-weiss.webp') no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

.fuss .huelle { position: relative; z-index: 1; }

@media (max-width: 40rem) {
  /* Am Handy kleiner und weiter in die Ecke, damit sie nicht hinter den
     Spalten durchscheint. */
  .fuss::before { width: 20rem; right: -18%; bottom: -8%; opacity: 0.05; }
}
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fuss-gitter {
  display: grid;
  gap: 2.5rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: 2.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fuss-logo img { height: 2.6rem; width: auto; margin-bottom: 1.1rem; }
.fuss h4 {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.fuss-schluss {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.75rem; align-items: center;
  padding-top: 1.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
.fuss-schluss nav { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; margin-left: auto; }

/* Conto-IT-Zeile — gleiche Machart wie auf wohnwerknord.de */
.webmaster {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
}
.webmaster a { color: rgba(255, 255, 255, 0.8); }
.webmaster a:hover { color: #fff; }
.webmaster-code { color: var(--koralle); letter-spacing: 0.04em; margin-right: 0.25rem; }
.webmaster-trenner { margin-inline: 0.35rem; opacity: 0.5; }
.webmaster-lauf { color: rgba(255, 255, 255, 0.68); }
.webmaster-strich {
  display: inline-block;
  width: 1px; height: 0.9em;
  background: var(--koralle);
  vertical-align: -0.1em;
  margin-left: 2px;
  animation: blinken 1.05s steps(2, start) infinite;
}
@keyframes blinken { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .webmaster-strich { display: none; } }

/* ===========================================================================
   Inhaltsseiten (Kursdetail, Recht)
   =========================================================================== */

.seitenkopf {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.seitenkopf h1 { font-size: clamp(2.35rem, 6vw, 4rem); margin-bottom: 1.25rem; }
.seitenkopf .beitext { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem); color: var(--tinte-weich); max-width: 42rem; }

.fliess { max-width: 44rem; }
.fliess h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.75rem 0 1rem; }
.fliess h3 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }
.fliess ul, .fliess ol { padding-left: 1.15rem; margin: 0 0 1.1em; }
.fliess li { margin-bottom: 0.45rem; }
.fliess :first-child { margin-top: 0; }

.merkliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.merkliste li {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linie);
}
.merkliste li:first-child { border-top: 1px solid var(--linie); }
.merkliste svg { flex: none; margin-top: 0.28rem; color: var(--koralle-tief); }

.kasten {
  background: var(--dunst);
  border-left: 2px solid var(--koralle);
  padding: 1.5rem 1.75rem;
  border-radius: 0 0.35rem 0.35rem 0;
  font-size: 0.97rem;
}
.kasten strong { color: var(--blau); }

.kurs-hero {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) {
  .kurs-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.kurs-hero-bild {
  overflow: hidden;
  border-radius: 0.4rem;
  background: var(--creme-warm);
}
/* Kein fester Zuschnitt mehr: Hoch- wie Querformate erscheinen vollständig
   (Ronjas Wunsch 04.08.2026) — nur nach oben begrenzt, damit ein sehr hohes
   Bild die Seite nicht sprengt. */
.kurs-hero-bild img {
  width: 100%;
  height: auto;
  max-height: 46rem;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ===========================================================================
   Anmeldeformular
   =========================================================================== */

.formular { max-width: 46rem; }

.feldgruppe {
  border: 0; padding: 0; margin: 0 0 clamp(2.25rem, 4vw, 3rem);
}
.feldgruppe > legend {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  font-weight: 600;
  color: var(--blau);
  padding: 0;
  margin-bottom: 0.35rem;
  display: flex; align-items: baseline; gap: 0.85rem;
}
.feldgruppe > legend .schritt {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em;
  color: var(--koralle-tief); font-weight: 600;
}
.feldgruppe > .hinweis { color: var(--tinte-weich); font-size: 0.93rem; margin-bottom: 1.6rem; }

.felder {
  display: grid;
  gap: 1.15rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.feld--breit { grid-column: 1 / -1; }

.feld { display: grid; gap: 0.4rem; }
.feld > label {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--tinte);
  display: flex; align-items: baseline; gap: 0.4rem;
}
.feld > label .pflicht { color: var(--koralle-tief); }

.feld input[type='text'],
.feld input[type='email'],
.feld input[type='tel'],
.feld input[type='date'],
.feld select,
.feld textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--weiss);
  color: var(--tinte);
  border: 1px solid var(--linie);
  border-radius: 0.4rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.feld textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }
.feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355637c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.4rem;
}
.feld :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--blau-hell);
  box-shadow: 0 0 0 3px rgba(44, 101, 173, 0.16);
}
.feld :is(input, select, textarea)[aria-invalid='true'] {
  border-color: var(--koralle-tief);
  box-shadow: 0 0 0 3px rgba(210, 99, 74, 0.14);
}
.feld-fehler { font-size: 0.83rem; color: var(--koralle-tief); min-height: 0; }
.feld-fehler:empty { display: none; }

.kreuz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--linie);
  border-radius: 0.45rem;
  background: var(--weiss);
  cursor: pointer;
  font-size: 0.94rem;
  line-height: 1.55;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.kreuz + .kreuz { margin-top: 0.8rem; }
.kreuz:hover { border-color: var(--blau-hell); }
.kreuz:has(input:checked) { border-color: var(--blau); background: var(--dunst); }
.kreuz input {
  width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0;
  accent-color: var(--blau);
  flex: none;
}

/* Unterschriftsfeld */
.unterschrift {
  border: 1px dashed var(--linie);
  border-radius: 0.45rem;
  background: var(--weiss);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.unterschrift[data-gezeichnet] { border-style: solid; border-color: var(--blau-hell); }
.unterschrift canvas {
  display: block;
  width: 100%;
  height: 11rem;
  touch-action: none;
  cursor: crosshair;
}
.unterschrift-linie {
  position: absolute; left: 1.5rem; right: 1.5rem; bottom: 2.6rem;
  border-bottom: 1px solid var(--linie);
  pointer-events: none;
}
.unterschrift-platzhalter {
  position: absolute; left: 1.5rem; bottom: 1rem;
  font-size: 0.8rem; color: var(--tinte-weich);
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.unterschrift[data-gezeichnet] .unterschrift-platzhalter { opacity: 0; }
.unterschrift-leeren {
  position: absolute; top: 0.6rem; right: 0.6rem;
  font: inherit; font-size: 0.82rem;
  background: var(--creme); border: 1px solid var(--linie);
  border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer;
  color: var(--tinte-weich);
}
.unterschrift-leeren:hover { color: var(--tinte); border-color: var(--blau-hell); }

/* AGB-Aufklapper */
.bedingungen {
  border: 1px solid var(--linie);
  border-radius: 0.45rem;
  background: var(--weiss);
  margin-bottom: 1.25rem;
}
.bedingungen > summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  list-style: none;
  display: flex; align-items: center; gap: 0.7rem;
}
.bedingungen > summary::-webkit-details-marker { display: none; }
.bedingungen > summary::after {
  content: ''; margin-left: auto;
  width: 0.55rem; height: 0.55rem;
  border-right: 1.5px solid var(--tinte-weich);
  border-bottom: 1.5px solid var(--tinte-weich);
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 0.25s var(--ease);
}
.bedingungen[open] > summary::after { transform: rotate(-135deg) translateY(-0.15rem); }
.bedingungen-inhalt {
  padding: 0 1.25rem 1.35rem;
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--tinte-weich);
  max-height: 22rem;
  overflow-y: auto;
}
.bedingungen-inhalt h4 { font-family: var(--sans); font-size: 0.89rem; color: var(--tinte); margin: 1.1rem 0 0.3rem; }
.bedingungen-inhalt p { margin-bottom: 0.7em; }

.absenden {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
  padding-top: 0.5rem;
}
.absenden .knopf { font-size: 1.02rem; padding: 1.05rem 2rem; }
.absenden .knopf[disabled] { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }

/* Zusammenfassung vor dem Absenden */
.pruefung {
  background: var(--creme-warm);
  border-radius: 0.5rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.pruefung dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 1.5rem; margin: 0; font-size: 0.93rem; }
.pruefung dt { color: var(--tinte-weich); }
.pruefung dd { margin: 0; font-weight: 500; }

/* Rückmeldungen */
.meldung {
  border-radius: 0.5rem;
  padding: 1.15rem 1.35rem;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  display: flex; gap: 0.85rem; align-items: flex-start;
}
.meldung svg { flex: none; margin-top: 0.15rem; }
.meldung--fehler { background: #fdeeea; color: #8e3520; }
.meldung--ok { background: #e7f4ed; color: #1a5c3d; }

.geschafft { max-width: 40rem; text-align: center; margin-inline: auto; padding-block: clamp(3rem, 8vw, 6rem); }
.geschafft .haken {
  width: 4.5rem; height: 4.5rem; margin: 0 auto 2rem;
  border-radius: 999px; background: var(--dunst);
  display: grid; place-items: center; color: var(--blau);
}
.geschafft h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 1.1rem; }
.geschafft .knopf { margin-top: 2rem; }

/* Kursauswahl als Karten */
.kurswahl { display: grid; gap: 0.75rem; }
.kurswahl-karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--linie);
  border-radius: 0.5rem;
  background: var(--weiss);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.kurswahl-karte:hover { border-color: var(--blau-hell); }
.kurswahl-karte:has(input:checked) { border-color: var(--blau); background: var(--dunst); }
.kurswahl-karte input { width: 1.15rem; height: 1.15rem; accent-color: var(--blau); margin: 0; }
.kurswahl-karte b { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; display: block; }
.kurswahl-karte small { color: var(--tinte-weich); font-size: 0.87rem; }
.kurswahl-karte .preis { font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 34rem) {
  .kurswahl-karte { grid-template-columns: auto minmax(0, 1fr); }
  .kurswahl-karte .preis { grid-column: 2; }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  .kopf, .fuss, .hero, .springmarke { display: none !important; }
  body { background: #fff; }
}

/* Abgesagter Termin: bleibt stehen, damit niemand vergeblich hinfährt,
   ist aber auf einen Blick als hinfällig zu erkennen. */
.termin--abgesagt { opacity: 0.6; }
.termin--abgesagt .termin-titel,
.termin--abgesagt .termin-datum b { text-decoration: line-through; }

/* Freie Plätze — von app.js aus /api/plaetze nachgetragen, im HTML zunächst
   leer und versteckt. Ohne JavaScript bleibt es unsichtbar. */
.termin-plaetze {
  display: inline-block;
  margin-left: 0.55rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--dunst);
  color: var(--tinte-weich);
  font-size: 0.82em;
  white-space: nowrap;
}

.termin-plaetze[data-knapp='ja'] {
  background: color-mix(in srgb, var(--koralle) 18%, var(--weiss));
  color: var(--koralle-tief);
  font-weight: 600;
}

.termin-plaetze[data-voll='ja'] {
  background: var(--creme-warm);
  color: var(--tinte-weich);
}

/* Impressum und Datenschutzerklärung: nicht in der Kopfzeile (zu voll),
   aber im aufgeklappten Menü — und immer in der Fußzeile. */
.kopf-nav a.nav-recht { display: none; }
@media (max-width: 62rem) {
  .kopf-nav a.nav-recht { display: block; font-size: 0.95rem; color: var(--grau, #6b625e); }
  .kopf-nav a.nav-recht:first-of-type { margin-top: 0.9rem; padding-top: 1.1rem; border-top: 1px solid rgba(14, 65, 130, 0.12); }
}

/* --- Von Ronja eingestellter Seitenhintergrund + Bildmarke ---------------- */
/* Beide Ebenen kommen nur ins HTML, wenn im Adminbereich etwas eingestellt
   ist (Bereich „Hintergrund & Bildmarke"). */

.seiten-grund {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.seiten-marke {
  position: fixed;
  z-index: 40; /* über dem Inhalt, unter dem Kopf (der liegt höher) */
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  height: auto;
}

/* --- Kundenbewertungen ---------------------------------------------------- */

.huelle--schmal { max-width: 52rem; }

.bewertung-schnitt {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 2rem;
}
.bewertung-schnitt .sterne { color: #e8a13d; letter-spacing: 0.08em; }
.bewertung-schnitt .anzahl { color: var(--grau, #6b625e); font-size: 0.95rem; font-weight: 400; }

.bewertung-laedt, .bewertung-leer { color: var(--grau, #6b625e); }

.bewertung {
  background: #fff;
  border: 1px solid rgba(14, 65, 130, 0.1);
  border-radius: 0.9rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(14, 65, 130, 0.04), 0 12px 28px -22px rgba(14, 65, 130, 0.25);
}
.bewertung .sterne { color: #e8a13d; letter-spacing: 0.08em; }
.bewertung b { margin-left: 0.45rem; }
.bewertung p { margin: 0.6rem 0 0; line-height: 1.6; white-space: pre-line; }

.bewertung-schreiben {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(14, 65, 130, 0.12);
}
.bewertung-schreiben h2 { margin-bottom: 0.6rem; }
.bewertung-schreiben > p { max-width: 46rem; }

.sterne-wahl {
  border: 0;
  padding: 0;
  margin: 1.4rem 0 0.4rem;
  display: flex;
  flex-direction: row-reverse; /* damit „alle bis zum gewählten" leuchten */
  justify-content: flex-end;
  gap: 0.15rem;
}
.sterne-wahl legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; }
.sterne-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterne-wahl label {
  font-size: 2rem;
  line-height: 1;
  color: #d8d2cc;
  cursor: pointer;
  padding: 0.1rem;
  transition: color 0.15s, transform 0.15s;
}
.sterne-wahl label:hover { transform: scale(1.12); }
.sterne-wahl input:checked ~ label,
.sterne-wahl label:hover,
.sterne-wahl label:hover ~ label { color: #e8a13d; }
.sterne-wahl input:focus-visible + label { outline: 2px solid var(--koralle); border-radius: 4px; }

.bewertung-schreiben .feld {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 1.1rem 0;
  max-width: 40rem;
}
.bewertung-schreiben .feld input,
.bewertung-schreiben .feld textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font: inherit;
  font-weight: 400;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(14, 65, 130, 0.18);
  border-radius: 0.6rem;
  background: #fff;
  box-sizing: border-box;
}
.bewertung-meldung { font-weight: 600; }
.bewertung-meldung[data-gut] { color: #4a7c59; }
.bewertung-meldung:not([data-gut]) { color: #b23b2e; }
.bewertung-dank { margin-top: 1.5rem; font-weight: 600; }

/* --- Datenschutz-Hinweis (unten, einmalig) -------------------------------- */

/* Wichtig VOR den display-Regeln: `display: flex` unten würde das
   hidden-Attribut sonst übersteuern — der Kasten bliebe für immer sichtbar. */
.hinweis-banner[hidden] { display: none !important; }

.hinweis-banner {
  position: fixed;
  left: 50%;
  bottom: clamp(0.8rem, 2.5vw, 1.6rem);
  transform: translateX(-50%);
  z-index: 90; /* unter dem Kopf (100), über allem Inhalt */
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  width: min(46rem, calc(100vw - 1.6rem));
  background: #fff;
  border: 1px solid rgba(14, 65, 130, 0.14);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 6px rgba(14, 65, 130, 0.08), 0 22px 48px -20px rgba(14, 65, 130, 0.35);
}
.hinweis-banner p {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}
.hinweis-banner a { color: var(--koralle-tief, #d2634a); }
.hinweis-banner .knopf { padding: 0.6rem 1.15rem; font-size: 0.9rem; }

/* --- Logo-Leiste am Ende einer Kursseite (Logos & Siegel) ----------------- */

.logoleiste { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.logoleiste-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
.logoleiste-reihe img {
  max-height: clamp(4.5rem, 10vw, 7rem);
  max-width: min(18rem, 42vw);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- Galerie „Weitere Bilder" am Ende einer Kursseite --------------------- */

.galerie { padding-top: clamp(1.5rem, 4vw, 3rem); }
/* Einheitliches, responsives Raster (Ronjas Punkt 2 vom 05.08.2026): gleiche
   Kachelgröße auf jeder Kursseite, Spaltenzahl passt sich dem Schirm an. */
.galerie-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 44vw), 1fr));
  gap: clamp(0.8rem, 2vw, 1.25rem);
}
/* Volle Bilder im festen Rahmen: contain statt Zuschnitt. */
.galerie-reihe img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--linie-zart);
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: zoom-in;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.galerie-reihe img:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -18px rgba(14, 65, 130, 0.4);
}

/* Vergrößerte Ansicht beim Anklicken — ohne die Seite zu verlassen. */
.galerie-deckel {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 20, 35, 0.82);
  cursor: zoom-out;
}
.galerie-deckel[hidden] { display: none !important; }
.galerie-deckel img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 0.6rem;
  background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}


/* --- Präventionskurs-ID: klar, gleichmäßig, kopierbar ---------------------- */
/* Wird vom Renderer um erkannte IDs im Hinweis-Text gelegt. Ein Klick
   markiert die ganze ID (user-select: all) — bequem zum Kopieren. */
.kurs-id {
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.05em;
  color: var(--blau);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 0.35rem;
  padding: 0.1em 0.45em;
  white-space: nowrap;
  user-select: all;
}


/* --- Hero-Foto (Alternative zur Animation) -------------------------------- */
/* Bewusst OHNE den Ausblend-Schleier der Bildfolgen (.folge-standbild trägt
   unten eine Maske — beim Standfoto wirkte das wie ein Nebelstreifen).
   Multiply lässt den weißen Studiohintergrund mit dem Hero-Verlauf
   verschmelzen. */
.hero-standbild {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(64svh, 38rem);
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (min-width: 62rem) {
  .hero-standbild {
    /* Etwas großzügiger als die Spalte — wirkt präsenter, bleibt harmonisch. */
    width: min(114%, 46rem);
    max-width: none;
  }
}

/* --- Einheitliche Motivgröße in den Scroll-Abschnitten -------------------- */
/* Ronjas Wunsch (06.08.2026): alle Animationen gleich groß, proportional,
   ohne Verzerrung oder Beschnitt. Jedes Motiv wird verhältnistreu auf
   dieselbe Höhe gebracht und mittig gesetzt — breite wie hohe Aufnahmen
   wirken dadurch gleichwertig. */
.abschnitt-medium {
  display: flex;
  align-items: center;
  justify-content: center;
}
.abschnitt-medium .folge,
.abschnitt-medium .folge-standbild {
  /* Für ALLE Motive exakt dieselbe QUADRATISCHE Box (Ronjas Korrektur vom
     10.08.2026: bei voller Spaltenbreite lief die flache Beckenbrücke breiter
     als die übrigen und wirkte größer). Im Quadrat teilen sich alle dieselbe
     Kante; object-fit hält jedes Motiv verhältnistreu und unbeschnitten. */
  width: min(100%, 28rem);
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: min(56svh, 28rem);
  object-fit: contain;
}

/* --- Zahlen und Codes: klar auf einer Linie (Ronjas Punkt 3, 06.08.2026) --- */
/* Liniierte, gleich breite Ziffern überall — und alles, was Nummern, Adressen
   oder Codes trägt, läuft in der Sachschrift statt in der Schmuckschrift. */
body { font-variant-numeric: lining-nums; }
.termin-datum, .termin-meta,
a[href^="tel:"], a[href^="mailto:"],
.bewertung-schnitt {
  font-variant-numeric: lining-nums tabular-nums;
}
.termin-datum b { font-family: var(--sans); letter-spacing: 0; }