@import url('../fonts/cormorant-garamond.css');

/* ============================================================
   The Loving View Photography — gemeinsames Stylesheet
   Farben: Kadence Global Colors
   ============================================================ */

:root {
  /* --- Kadence Global Colors --- */
  --primary: #206C6F;          /* Buttons, Links, Icons, Logo, Highlights */
  --secondary: #C26861;        /* Akzent, Call-to-Action, Hervorhebungen */
  --secondary-hover: #A95852;
  --heading: #264243;          /* Überschriften */
  --body-text: #5C6464;        /* Fließtext */
  --bg-light: #FFFEFD;         /* Haupt-Hintergrund */
  --bg-soft: #F7F4F2;          /* abgesetzte Bereiche, Karten */
  --border: #DDD8D5;           /* Linien, Formulare, Kartenränder */
  --dark-accent: #173F41;      /* Hover, Footer, dunkle Elemente */
  --white: #FFFFFF;
  --black: #222222;

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Alles in Großbuchstaben läuft in Light, alles andere in Regular */
  --fw-caps: 300;
  --fw-text: 400;

  --wrap: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 10vw, 9rem);
  --header-h: 5rem;
  /* Luft ueber und unter dem Infofeld bei den Paketen */
  --hinweis-luft: clamp(2.5rem, 5vw, 3.5rem);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Sprungziele (#formular, #mini-shootings, #zusatzprodukte) landen sonst
   unter der mitwandernden Kopfleiste. Der Abschnitt bringt seine eigene
   Kopfluft schon mit — gebraucht wird nur der Rest bis unter die Leiste,
   und der ist je nach Fensterbreite verschieden. --kopf traegt das Skript
   nach, es ist die gemessene Hoehe der Leiste. */
:target {
  scroll-margin-top: calc(
    max(0px, var(--kopf, 6rem) - var(--eigene-luft, var(--section-y))) + 1.5rem
  );
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-light);
  color: var(--body-text);
  font-family: var(--font-serif);
  /* Grundgroesse des Fliesstextes — alles, was keine eigene Groesse
     gesetzt bekommt, haengt hieran */
  font-size: 20px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* height:auto ist nötig, weil sonst das height-Attribut im HTML
   (z. B. height="2100") jede CSS-Vorgabe zum Seitenverhältnis aushebelt */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Textlinks im Fliesstext: erkennbar an der Farbe, nicht am Unterstrich.
   Terrakotta statt Petrol, weil es sich deutlicher vom Fliesstext abhebt. */
main p a:not([class]),
main li a:not([class]),
main address a:not([class]),
.hinweis a,
.fussnote a,
.impressum-adresse a {
  color: var(--secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

main p a:not([class]):hover,
main li a:not([class]):hover,
main address a:not([class]):hover,
.hinweis a:hover,
.fussnote a:hover,
.impressum-adresse a:hover {
  color: var(--secondary-hover);
}

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

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

.wrap--narrow { max-width: 46rem; }

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

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  font-weight: var(--fw-text);
  color: var(--heading);
  line-height: 1.2;
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* Großbuchstaben immer in Light — Überschriften wie Menütitel */
.eyebrow,
.more,
.nav-link,
.cat-card h3,
.step h3,
.package h3,
.site-footer h4,
.field label,
.quote cite,
.hero__sub,
.imprint-link {
  font-weight: var(--fw-caps);
}

h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.6rem); }

/* VERSUCH 2 — auch die großen, gemischt geschriebenen Überschriften in
   Light, damit die Seite so zart wirkt wie das Logo. Weicht bewusst von
   der Regel „nur Großbuchstaben in Light" ab.
   Zum Zurücknehmen: diese beiden Zeilen löschen. */
h1, h2 { font-weight: var(--fw-caps); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  color: var(--secondary);
  font-weight: var(--fw-text);
}

/* Schlagworte über Überschriften, z. B. NATÜRLICH · EHRLICH · NAH */
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--primary);
}

.eyebrow--center { justify-content: center; }
.eyebrow--light { color: rgba(255, 255, 255, 0.85); }

.eyebrow span::after {
  content: '·';
  margin-left: 0.75rem;
  opacity: 0.55;
}
.eyebrow span:last-child::after { content: none; }

/* ---------- Herz-Motiv ---------- */

.heart {
  width: 1.6rem;
  height: auto;
  aspect-ratio: 620 / 740;   /* entspricht dem viewBox des Herz-Symbols */
  flex: none;
  color: var(--secondary);
}

.heart--lg { width: 2.6rem; }
.heart--light { color: rgba(255, 255, 255, 0.9); }

.heart-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 1.75rem;
}

.heart-rule::before,
.heart-rule::after {
  content: '';
  height: 1px;
  width: clamp(2.5rem, 9vw, 5.5rem);
  background: currentColor;
  opacity: 0.35;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.9rem;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}

.btn--primary { background: var(--primary); color: var(--white); }
.btn--primary:hover { background: var(--dark-accent); }

.btn--secondary { background: var(--secondary); color: var(--white); }
.btn--secondary:hover { background: var(--secondary-hover); }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn--ghost:hover { background: var(--primary); color: var(--white); }


.btn--on-dark {
  background: var(--white);
  color: var(--dark-accent);
}
.btn--on-dark:hover { background: var(--bg-soft); }

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(23, 63, 65, 0.22); }

/* Verweise auf Unterseiten — runde Schaltfläche im Stil des Siegels:
   Petrolfläche mit einem feinen weißen Ring innen, genau wie im Logo.
   Der Ring entsteht aus zwei ineinanderliegenden Innenschatten. */
.more {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(8.75rem, 12vw, 11.5rem);
  aspect-ratio: 1;
  padding: 0.7rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: clamp(0.86rem, 0.72rem + 0.42vw, 1.05rem);
  line-height: 1.55;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 0 0 5px var(--primary),
              inset 0 0 0 6px rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
              transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* bewusst ohne Drehung — nur Farbe und ein Hauch Größe */
.more:hover {
  background: var(--dark-accent);
  box-shadow: inset 0 0 0 5px var(--dark-accent),
              inset 0 0 0 6px rgba(255, 255, 255, 0.65);
  transform: scale(1.04);
}

/* jedes Wort in einer eigenen Zeile */
.more span { display: block; }

/* Führt die Schaltfläche zur Anfrage, trägt sie Terrakotta statt Petrol */
/* Die Anfrage-Knoepfe stehen zu dritt in den Paketkarten und wirkten
   dort zu massig — rund 30 % kleiner als die uebrigen runden Knoepfe,
   Schrift und Innenabstand im selben Verhaeltnis. */
.more--cta {
  width: clamp(6.1rem, 8.4vw, 8.05rem);
  font-size: clamp(0.6rem, 0.5rem + 0.3vw, 0.74rem);
  padding: 0.5rem;
  white-space: nowrap;
  box-shadow: inset 0 0 0 3px var(--secondary),
              inset 0 0 0 4px rgba(255, 255, 255, 0.5);
}

.more--cta {
  background: var(--secondary);
  box-shadow: inset 0 0 0 5px var(--secondary),
              inset 0 0 0 6px rgba(255, 255, 255, 0.5);
}

.more--cta:hover {
  background: var(--secondary-hover);
  box-shadow: inset 0 0 0 3px var(--secondary-hover),
              inset 0 0 0 4px rgba(255, 255, 255, 0.65);
}

/* mittig unter dem Text — display:flex macht die Schaltfläche zum
   Blockelement, erst dadurch greift margin:auto */
.more--mitte {
  display: flex;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

/* sitzt genau auf der Unterkante des rechten Feldes: zur Hälfte darauf,
   zur Hälfte darunter. 69 % ist die Mitte der Textspalte, 76 % die
   Kante — beides muss zu .about__panel--text passen. */
.more--kante {
  position: absolute;
  left: 70.9%;   /* Mitte der Textspalte (47,9 % bis 93,8 %) */
  top: 82%;      /* Unterkante von .about__panel--text (bottom: 18%) */
  transform: translate(-50%, -50%);
  z-index: 3;
}

.more--kante:hover { transform: translate(-50%, -50%) scale(1.04); }



@media (prefers-reduced-motion: reduce) {
  .more--kante:hover { transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .more { transition: background-color 0.25s ease; }
  .more:hover { transform: none; }
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Auf der Startseite liegt die Leiste über dem Hero-Bild */
.site-header--overlay {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
}

.site-header--overlay .nav-link,
.site-header--overlay .nav-toggle { color: var(--white); }

.site-header--overlay .site-logo { color: var(--white); }

.site-header--overlay.is-stuck {
  background: var(--bg-light);
  border-bottom-color: var(--border);
}
.site-header--overlay.is-stuck .nav-link,
.site-header--overlay.is-stuck .nav-toggle { color: var(--heading); }
.site-header--overlay.is-stuck .site-logo { color: var(--heading); }

/* Logo mittig, Menü links und rechts davon.
   Bewusst ohne max-width: die Leiste nutzt immer die volle Fensterbreite,
   anders als der übrige Seiteninhalt. */
.header-inner {
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.5rem, 3.5vw, 4rem) clamp(1.1rem, 2vw, 1.7rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* großzügig, damit die inneren Menüpunkte nicht an den Markennamen rücken */
  gap: clamp(2.5rem, 7vw, 7rem);
  transition: padding 0.35s ease;
}

/* löst sich am Desktop auf, damit die beiden Menühälften direkte
   Rasterfelder werden — am Handy wird daraus das Overlay */
.nav-panel { display: contents; }

/* grid-row: 1 ist nötig, weil das Logo im Quelltext vor den Menühälften
   steht — ohne Zeilenangabe schiebt die automatische Platzierung die
   linke Hälfte sonst in eine zweite Zeile. */
/* Die Menühälften füllen ihre Rasterspalte ganz aus und verteilen ihre
   Punkte darin — sonst drängen sie sich neben dem Logo zusammen und
   links bleibt eine große Leerfläche. */
.site-nav--left  { grid-column: 1; grid-row: 1; justify-self: stretch; }
.site-logo       { grid-column: 2; grid-row: 1; justify-self: center; line-height: 0; }
.site-nav--right { grid-column: 3; grid-row: 1; justify-self: stretch; }

.site-nav--left ul,
.site-nav--right ul { justify-content: space-between; }

/* Das Siegel ist größer als die Leiste hoch ist und hängt unten heraus.
   Der negative Rand nimmt ihm seinen Anteil an der Zeilenhöhe — die
   Leiste bleibt dadurch schmal, obwohl das Logo groß ist. */
.site-logo {
  position: relative;
  z-index: 2;
  width: clamp(4.5rem, 7vw, 6.5rem);
  aspect-ratio: 1;
  line-height: 0;
  transition: width 0.35s ease, margin-bottom 0.35s ease;
}

/* Beide Farbfassungen liegen übereinander, gewechselt wird die Deckkraft.
   VARIANTE 1: oben weiße Linien, beim Scrollen das farbige Original.
   Für die Fassung „durchgehend farbig" reicht es, die vier Regeln
   darunter zu löschen. */
.site-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.35s ease;
}

.site-logo__weiss { opacity: 0; }
.site-logo__farbe { opacity: 1; }

.site-header--overlay .site-logo__weiss { opacity: 1; }
.site-header--overlay .site-logo__farbe { opacity: 0; }
.site-header--overlay.is-stuck .site-logo__weiss { opacity: 0; }
.site-header--overlay.is-stuck .site-logo__farbe { opacity: 1; }

/* Über dem Hero: groß, hängt unter der Leiste hervor.
   Der negative Rand ist aus der Logogröße abgeleitet, sodass das Siegel
   immer nur 2,75 rem zur Zeilenhöhe beiträgt — so viel wie die
   Menüpunkte. Die Leiste bleibt dadurch unabhängig von der Logogröße. */
.site-header--overlay .site-logo {
  --logo-groesse: clamp(8rem, 13.75vw, 13rem);
  width: var(--logo-groesse);
  margin-bottom: calc(-1 * (var(--logo-groesse) - 2.75rem));
}

/* Beim Scrollen zieht es sich in die Leiste zurück, und die Leiste wird
   dabei schmaler statt höher */
.site-header--overlay.is-stuck .site-logo {
  --logo-groesse: clamp(3rem, 4vw, 3.75rem);
  width: var(--logo-groesse);
  margin-bottom: 0;
}

.site-header--overlay.is-stuck .header-inner {
  padding-top: clamp(0.9rem, 1.6vw, 1.4rem);
  padding-bottom: clamp(0.9rem, 1.6vw, 1.4rem);
}

@media (prefers-reduced-motion: reduce) {
  .site-logo { transition: none; }
}

/* Die Wortmarke ist eine weiße PNG-Datei. Als Maske eingesetzt zählt nur
   ihre Form, die Farbe kommt aus currentColor — dadurch ist sie weiß über
   dem Foto und dunkelgrün auf hellem Grund, aus einer einzigen Datei. */
.wordmark-img {
  display: block;
  width: clamp(11rem, 15vw, 16rem);
  aspect-ratio: 1010 / 280;
  background-color: currentColor;
  -webkit-mask: url('wortmarke.png') center / contain no-repeat;
  mask: url('wortmarke.png') center / contain no-repeat;
}

/* Das runde Logo als eigenständiges Element im Seitenfluss */
.brand-seal {
  width: clamp(6.5rem, 13vw, 10rem);
  height: auto;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.3rem);
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.05rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--heading);
  padding: 0.6rem 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Beim Überfahren erscheint ein beiges Feld hinter dem Wort.
   Es liegt als Pseudoelement dahinter statt als Innenabstand — sonst
   würden die Menüpunkte breiter und die Leiste liefe über.
   Die Schrift wechselt dabei auf Dunkelgrün: Weiß auf Beige hätte nur
   1,03:1 Kontrast und wäre unlesbar. */
.nav-link:not(.nav-cta) {
  position: relative;
  z-index: 0;
}

.nav-link:not(.nav-cta)::before {
  content: '';
  position: absolute;
  inset: -0.2rem -0.95rem;
  border-radius: 999px;
  background: var(--bg-soft);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.25s ease;
}

.nav-link:not(.nav-cta):hover::before { opacity: 1; }
.nav-link:not(.nav-cta):hover { color: var(--heading); }

/* Im Ausklappmenü kein überstehendes Feld — dort füllt der Hintergrund
   die ganze Zeilenbreite des Kastens aus. */
.subnav .nav-link::before { content: none; }

/* Kein Rot in der Kopfzeile: Die aktuelle Seite behält aria-current für
   Vorleseprogramme, bekommt aber bewusst KEINE eigene Farbregel — sonst
   fiele sie aus der weiß/dunkelgrün-Umschaltung der Leiste heraus. */

/* Petrol wie die übrigen primären Schaltflächen, Hover laut Palette
   auf Dark Accent */
/* Terrakotta als Aktionsfarbe — laut Palette die Call-to-Action-Farbe.
   Alles, was zur Anfrage führt, trägt sie. */
.nav-cta {
  background: var(--secondary);
  color: var(--white) !important;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 4px var(--secondary),
              inset 0 0 0 5px rgba(255, 255, 255, 0.5);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.nav-cta:hover {
  background: var(--secondary-hover);
  box-shadow: inset 0 0 0 4px var(--secondary-hover),
              inset 0 0 0 5px rgba(255, 255, 255, 0.65);
}

/* Über dem Foto nur der Rahmen um das Wort, ohne Füllung. Beim Scrollen
   färben sich Siegel und Anfrage-Knopf gemeinsam ein. */
.site-header--overlay .nav-cta {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.site-header--overlay .nav-cta:hover {
  background: var(--secondary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.site-header--overlay.is-stuck .nav-cta {
  background: var(--secondary);
  box-shadow: inset 0 0 0 4px var(--secondary),
              inset 0 0 0 5px rgba(255, 255, 255, 0.5);
}

.site-header--overlay.is-stuck .nav-cta:hover {
  background: var(--secondary-hover);
  box-shadow: inset 0 0 0 4px var(--secondary-hover),
              inset 0 0 0 5px rgba(255, 255, 255, 0.65);
}

/* Ausklappmenü Portfolio */
.has-sub { position: relative; }

.has-sub > .nav-link svg { width: 0.6rem; height: 0.6rem; transition: transform 0.2s ease; }
.has-sub:hover > .nav-link svg,
.has-sub:focus-within > .nav-link svg { transform: rotate(180deg); }

/* Schwebende, gerundete Karte mit sichtbarem Abstand zum Menüpunkt —
   kein Kasten, der am Hover-Feld klebt. */
.subnav {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 14rem;
  background: var(--white);
  border: 0;
  border-radius: 1.15rem;
  padding: 0.55rem !important;
  display: block !important;
  box-shadow: 0 22px 46px -22px rgba(23, 63, 65, 0.45),
              0 0 0 1px rgba(221, 216, 213, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* unsichtbare Brücke über den Abstand, damit der Zeiger nicht abreißt */
.subnav::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -0.95rem;
  height: 0.95rem;
}

.has-sub:hover .subnav,
.has-sub:focus-within .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.subnav li { display: block; }

/* die Zeilen sind selbst gerundet und stoßen nicht an die Kartenkante */
.subnav .nav-link {
  display: block;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  color: var(--heading);
  letter-spacing: 0.26em;
  transition: background-color 0.2s ease;
}
.subnav .nav-link:hover { color: var(--heading); background: var(--bg-soft); }

/* ---------- Siegel links, Menü rückt nach rechts nach ---------- */

.site-header--links .header-inner { grid-template-columns: auto 1fr; }

.site-header--links .site-logo    { grid-column: 1; grid-row: 1; justify-self: start; }
.site-header--links .site-nav--voll { grid-column: 2; grid-row: 1; justify-self: stretch; }

/* die Punkte verteilen sich über die restliche Breite */
.site-nav--voll ul { justify-content: space-between; }

/* ---------- VARIANTE 2: Siegel links, Anfrage-Kreis rechts ---------- */

.site-header--kreise .header-inner { grid-template-columns: auto 1fr auto; }

.site-header--kreise .site-logo      { grid-column: 1; grid-row: 1; justify-self: start; }
.site-header--kreise .site-nav--mitte{ grid-column: 2; grid-row: 1; justify-self: stretch; }
.site-header--kreise .nav-kreis      { grid-column: 3; grid-row: 1; justify-self: end; }

.site-nav--mitte ul {
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* derselbe Aufbau wie das Siegel, damit beide Kreise gleich groß sind
   und gleich weit unter der Leiste hervorhängen */
.nav-kreis {
  --kreis-groesse: clamp(6.5rem, 11vw, 10.5rem);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kreis-groesse);
  aspect-ratio: 1;
  margin-bottom: calc(-1 * (var(--kreis-groesse) - 2.75rem));
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: clamp(0.75rem, 0.6rem + 0.4vw, 0.95rem);
  letter-spacing: 0.16em;
  box-shadow: inset 0 0 0 5px var(--primary),
              inset 0 0 0 6px rgba(255, 255, 255, 0.5);
  transition: width 0.35s ease, margin-bottom 0.35s ease,
              font-size 0.35s ease, background-color 0.25s ease;
}

.nav-kreis:hover {
  background: var(--dark-accent);
  box-shadow: inset 0 0 0 5px var(--dark-accent),
              inset 0 0 0 6px rgba(255, 255, 255, 0.65);
}

/* Beim Scrollen zieht sich auch dieser Kreis zusammen — allerdings nur so
   weit, dass „Anfrage" noch hineinpasst. Das setzt die Untergrenze für
   beide Kreise: Damit sie gleich groß bleiben, zieht das Siegel nach. */
.site-header--overlay.is-stuck .nav-kreis {
  --kreis-groesse: clamp(4.25rem, 5.5vw, 5.25rem);
  font-size: clamp(0.6rem, 0.5rem + 0.2vw, 0.68rem);
  letter-spacing: 0.1em;
}

.site-header--kreise.is-stuck .site-logo {
  --logo-groesse: clamp(4.25rem, 5.5vw, 5.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .nav-kreis { transition: background-color 0.25s ease; }
}

.nav-toggle {
  display: none;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  background: none;
  border: 0;
  padding: 0.5rem;
  color: var(--heading);
  cursor: pointer;
  z-index: 95;
}
.nav-toggle svg { width: 1.8rem; height: 1.8rem; }
.nav-toggle .icon-close { display: none; }

/* Bei geöffnetem Menü liegt der Knopf auf hellem Grund — sonst wäre er
   über dem Hero weiß und damit unsichtbar. */
.site-header.nav-open .nav-toggle { color: var(--heading); }
.site-header.nav-open .icon-menu { display: none; }
.site-header.nav-open .icon-close { display: block; }

/* ---------- Abschnitte & Farbbalken ---------- */

.section { padding-block: var(--section-y); }

.section--soft { background: var(--bg-soft); }

/* Farbbalken sind bewusst selten und schmal — sie sequenzieren die Seite,
   ohne die weiße Grundfläche zu verdrängen. Höchstens einer pro Seite. */
.band {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.92);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.band h2, .band h3 { color: var(--white); }

/* Herz und Striche im Farbbalken exakt in Background Light und voll
   deckend — sie erbten sonst das auf 92 % abgesenkte Weiß des Balkens,
   und die Striche trugen zusätzlich noch 35 % Deckkraft. */
.band .heart-mark { background-color: var(--bg-light); }

.band .heart-rule::before,
.band .heart-rule::after {
  background: var(--bg-light);
  opacity: 1;
}

.band--dark { background: var(--primary); }
.band--secondary { background: var(--secondary); }

/* Die Breite steuert die Zeilenzahl: 44rem ergibt drei Zeilen zu je
   rund 45 Zeichen. Für zwei Zeilen (68 Zeichen) auf 62rem erhöhen.
   Auf schmalen Bildschirmen bricht der Satz von selbst weiter um. */
.band-claim {
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
  color: var(--white);
  max-width: 44rem;
  margin: 0 auto;
  text-wrap: balance;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* füllt das Browserfenster exakt aus, in jeder Größe.
     dvh statt vh, weil sonst am Handy die ein- und ausfahrende
     Adressleiste einen Überstand erzeugt. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  /* Text sitzt unten, damit die Bildmitte — also die Gesichter — frei bleibt */
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  /* Bewusst neutral, nicht Petrol: Diese Fläche liegt hinter den Fotos
     und scheint bei jedem Bildwechsel kurz durch. In Petrol färbt das
     die Schwarzweiß-Bilder für einen Moment grünlich ein. */
  background: #1A1C1C;
}

/* Eigener Stapelkontext: Die z-index-Werte der Bilder gelten nur noch
   innerhalb dieser Fläche und können den Text darüber nicht mehr
   verdecken. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
}

/* Mehrere Bilder liegen übereinander und werden überblendet.
   Bei nur einem Bild bleibt es einfach stehen. */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* etwas oberhalb der Mitte, damit bei breiten Formaten die Gesichter
     im Bild bleiben statt oben abgeschnitten zu werden */
  object-position: center 42%;
  opacity: 0;
  z-index: 0;
  transition: opacity 1.6s ease;
}

/* Das neue Bild wird über dem alten eingeblendet, statt dass beide
   gleichzeitig halbdurchsichtig sind — sonst schiene der Hintergrund
   in der Mitte des Wechsels durch. */
.hero__slide.is-active { opacity: 1; z-index: 2; }

.hero__slide.is-prev {
  opacity: 1;
  z-index: 1;
  transition: none;
}

/* ohne JavaScript bleibt das erste Bild sichtbar */
html:not(.js) .hero__slide:first-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* Neutral abgedunkelt, nicht petrol — eine farbige Auflage legt sich sonst
   wie ein Filter über das Foto und macht Schwarzweiß grünstichig.
   Oben so viel, dass das Menü lesbar bleibt; Mitte fast frei; unten kräftig. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* über allen Bildebenen, sonst läge der Verlauf unter dem aktiven Bild */
  z-index: 3;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.05) 28%,
    rgba(0, 0, 0, 0.10) 44%,
    rgba(0, 0, 0, 0.46) 66%,
    rgba(0, 0, 0, 0.80) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-h) + 2rem) var(--gutter) clamp(1.5rem, 4vh, 3rem);
  /* 76rem abzüglich 2x Innenabstand ergibt 1120px Textbreite; der Claim
     braucht bei voller Größe 1061px — knapp 60px Reserve. */
  max-width: 76rem;
  text-align: center;
}

.hero__claim {
  /* Der Claim braucht immer rund das 15,1-fache seiner Schriftgröße an
     Breite. 5,5vw bleibt in jeder Fensterbreite darunter, deshalb passt
     er immer in eine Zeile — nach oben bei 4,4rem gedeckelt.
     nowrap als Sicherung, falls eine Schrift anders ausmisst. */
  font-size: min(4.4rem, 5.5vw);
  white-space: nowrap;
  color: var(--white);
  font-weight: var(--fw-caps);
  text-transform: uppercase;
  line-height: 1.12;   /* sonst erbt der Claim die 1,5 des Fließtextes */
  margin: 0 0 1.3rem;
  letter-spacing: 0.08em;
  /* sehr weicher Schein, von Anfang an vorhanden — kein Schlagschatten,
     nur ein 24px breiter Hauch, der die Kanten vom Bild abhebt */
  text-shadow: 0 2px 24px rgba(23, 63, 65, 0.5);
}

.hero__sub {
  font-size: clamp(0.82rem, 0.7rem + 0.4vw, 1rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 2rem;
  font-weight: 400;
}

/* Hero ohne Foto: helle Markenfläche mit Wasserzeichen, bis ein Bild da ist.
   Sobald das Hero-Bild kommt, entfällt die Klasse --brand und der Kopf
   wird wieder zur dunklen Bildfläche. */
.hero--brand {
  background: var(--bg-light);
  color: var(--body-text);
}
.hero--brand .hero__media { background: none; }
.hero--brand .hero__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(1.5rem, 6vw, 4rem);
}
.hero--brand .hero__media::after { background: none; }
.hero--brand .hero__inner { padding-top: clamp(3rem, 7vw, 5rem); }
.hero--brand .hero__claim { color: var(--secondary); text-shadow: none; }
.hero--brand .hero__sub { color: var(--primary); }

/* Pfeil rechts unten — blättert die Bilderfolge weiter */
.hero__next {
  position: absolute;
  right: clamp(1.5rem, 3.5vw, 4rem);
  bottom: clamp(1.5rem, 4vh, 3rem);
  z-index: 2;
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0.75rem 0;
  cursor: pointer;
  color: var(--bg-light);
  transition: opacity 0.25s ease;
}

.hero__next svg {
  width: clamp(3rem, 6vw, 4.5rem);
  height: auto;
  transition: transform 0.3s ease;
}

.hero__next:hover svg { transform: translateX(6px); }
.hero__next:hover { opacity: 0.75; }

/* ohne zweites Bild gibt es nichts zu blättern */
.hero__next[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__next svg { transition: none; }
}

/* ---------- Logo-Streifen unter dem Hero ---------- */

.logo-band {
  background: var(--bg-light);
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* Siegel und das WHY nebeneinander — die erste Aussage nach dem Hero */
.logo-band__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  /* etwas knapper als frueher, damit die Textspalte breit genug bleibt,
     dass der WHY-Satz auch im mittleren Bereich zweizeilig steht */
  gap: clamp(2rem, 5vw, 4.5rem);
}

.logo-band__mark {
  width: clamp(10.5rem, 22vw, 19.5rem);
  height: auto;
}

/* Die Größe ist so gewählt, dass jeder der beiden Satzteile in eine
   Zeile passt: Der längere braucht bei 28,8 px 811 px, verfügbar sind
   728 px — daraus ergibt sich die Obergrenze von 1,55 rem. */
/* Dreiklang im WHY-Block:
   leiser Auftakt in Petrol → die Aussage in Dunkelgrün → der Nachsatz
   in Terrakotta. Die Farbe führt den Blick von der Nebenbemerkung über
   die Haltung zur direkten Ansprache. */

.logo-band__why {
  /* ein Wert für beide Abstände — so bleiben sie zwangsläufig gleich */
  --why-abstand: clamp(1.1rem, 2.4vw, 1.9rem);
}

.logo-band__why .why-lead,
.logo-band__why .why-schluss {
  font-weight: var(--fw-caps);
  text-transform: uppercase;
  /* Der Umbruch sitzt als <br> im Text; nowrap verhindert, dass die
     Zeilen an anderer Stelle zusätzlich brechen. */
  white-space: nowrap;
  line-height: 1.5;
  margin: 0;
}

/* Auftakt und Nachsatz teilen sich Größe, Farbe und Sperrung — sie
   rahmen die Aussage als gleichwertiges Paar. Die Obergrenze von
   1,12rem ist die größte Größe, bei der die 47 Zeichen der ersten
   Zeile noch in eine Zeile passen. */
.logo-band__why .why-lead {
  font-size: clamp(0.85rem, 0.55rem + 1vw, 1.35rem);
  letter-spacing: 0.26em;
  color: var(--primary);
  margin-bottom: var(--why-abstand);
}

/* die Aussage — größter Text, ruhigste Farbe */
.logo-band__why .why-satz {
  /* die untere Grenze liegt auf Hoehe des uebrigen Fliesstextes, damit
     der Satz am Handy nicht kleiner wird als der Rest */
  font-size: clamp(1.1rem, 0.72rem + 1vw, 1.55rem);
  line-height: 1.55;
  color: var(--body-text);
  margin: 0;
  text-wrap: pretty;
}

/* Der Satz besteht aus zwei Haelften, jede in einer eigenen Zeile.
   Innerhalb einer Haelfte halten die beiden Teile zusammen — wird es
   zu eng, bricht die Haelfte an ihrer Mitte um. So stehen bei breitem
   Fenster zwei Zeilen, bei schmalem vier, und nie an anderer Stelle. */
.logo-band__why .why-zeile { display: block; }

.logo-band__why .why-zeile > span { white-space: nowrap; }

/* Auf sehr schmalen Geraeten passt auch ein Teil nicht mehr;
   dort bricht der Satz wieder von selbst um */
@media (max-width: 22rem) {
  .logo-band__why .why-zeile > span { white-space: normal; }
}

/* der Nachsatz: kürzer, deutlich weiter gesperrt, in der Aktionsfarbe */
.logo-band__why .why-schluss {
  font-size: clamp(0.85rem, 0.55rem + 1vw, 1.35rem);
  letter-spacing: 0.26em;
  color: var(--primary);
  margin-top: var(--why-abstand);
}

/* Auf schmalen Bildschirmen ist eine Zeile mit 47 Zeichen nicht ohne
   unlesbar kleine Schrift möglich — dort darf der Auftakt umbrechen. */
/* Erst auf sehr schmalen Bildschirmen darf zusätzlich umgebrochen
   werden — bis dahin trägt der gesetzte Umbruch. */
@media (max-width: 26rem) {
  .logo-band__why .why-lead { white-space: normal; }
}

/* --- Variante 2: feine Linien oben und unten ---
   Der Abstand nach oben laesst den Hero frei atmen, danach rahmen die
   beiden Linien Logo und WHY als eigenen Block ein. */
.logo-band--linien {
  margin-top: clamp(3.5rem, 8vw, 7rem);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Ab hier steht das Logo mittig ueber dem Text statt daneben. Der
   Wechsel kommt frueh, weil der WHY-Satz sonst in der schmalen Spalte
   dreizeilig wird — mittig gestapelt hat er die volle Breite. */
@media (max-width: 56rem) {
  .logo-band__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* Unterhalb dieser Breite passt eine Haelfte des Satzes nicht mehr in
   eine Zeile — dann bekommt jeder der vier Teile seine eigene Zeile,
   damit es nie eine unschoene Dreier-Aufteilung gibt */
@media (max-width: 46rem) {
  .logo-band__why .why-zeile > span { display: block; }
}

@media (max-width: 46rem) {
  .logo-band--ueberlappt .logo-band__why {
    margin-left: 0;
    margin-top: calc(-1 * clamp(2.5rem, 8vw, 4rem));
    padding: clamp(3.5rem, 10vw, 5rem) clamp(1.5rem, 5vw, 2.5rem) clamp(2rem, 5vw, 2.5rem);
  }
}

/* ---------- „Über mich": ein Feld hinter Text und Bild ---------- */

/* zusätzliche weiße Fläche unter dem Bereich */
/* Der Zuschlag faengt den Ueberhang des Bildes ab, das tiefer reicht
   als der Text — mehr Luft braucht es darunter nicht. */
.about { padding-bottom: calc(var(--section-y) * 0.8); }

/* Feiner Strich zwischen Selbstvorstellung und Portfolio, wie die
   beiden Linien um das WHY. Die Abstaende darueber und darunter sind
   gleich gross, damit die Linie mittig zwischen den Bereichen sitzt. */
.section:has(.cat-rows) {
  border-top: 1px solid var(--border);
  padding-top: clamp(3.5rem, 6.5vw, 7rem);
}

.about__inner {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  /* bewusst nicht zentriert: Text sitzt oben, Bild reicht tiefer */
  align-items: start;
  /* Der Innenabstand ist zugleich der sichtbare Rand des Feldes und der
     Spielraum, in dem sich das Feld bewegen kann, ohne dass der Inhalt
     an die Kante stößt. Er muss also größer sein als der Parallaxweg. */
  --about-pad: clamp(2.5rem, 5vw, 4.75rem);
  padding: var(--about-pad);
}

/* Zwei Felder, die sich in der Mitte leicht überschneiden. Links oben
   über dem Bild und rechts unter dem Text bleibt bewusst Weiß stehen. */
/* Das Beige trägt die Fläche allein — bewusst ohne zusätzliche Linie */
.about__panel {
  position: absolute;
  z-index: 0;
  background: var(--bg-soft);
  will-change: transform;
}

/* hinter dem Bild — beginnt tiefer, reicht bis unten.
   Kante bei 46 %, das Bild endet bei 42,4 %. */
.about__panel--bild {
  left: -2%;
  right: 54%;
  top: 12.4%;   /* Bild beginnt bei 17,6 % — ergibt rundum gleiche Luft */
  bottom: 1.5%; /* endet kurz unter dem Bild, nicht darüber hinaus */
}

/* hinter dem Text — beginnt oben, endet früher.
   Kante bei 43 %, der Text beginnt bei 47,9 %.
   Die Überschneidung beträgt damit 3 % der Breite. */
.about__panel--text {
  left: 43%;
  right: -2%;
  top: 4%;      /* weniger Beige oberhalb der Überschrift */
  bottom: 18%;
}

.about__media,
.about__text { position: relative; z-index: 1; }

/* Bild rechts, Text links — Reihenfolge im Quelltext ist Bild zuerst,
   damit es auf schmalen Bildschirmen oben steht */
/* Bild links, reicht unten über den Rahmen hinaus. Der negative Rand
   nimmt dem Bild seinen Anteil an der Zeilenhöhe — dadurch ragt es
   heraus, statt den Rahmen mitwachsen zu lassen. */
.about__media {
  grid-column: 1; grid-row: 1;
  position: relative;
  /* unten ausgerichtet, aber vollständig innerhalb des beigen Feldes */
  align-self: end;
}

.about__text {
  grid-column: 2; grid-row: 1;
  margin-top: clamp(1rem, 3vw, 2.5rem);
  /* Reserviert den Platz, auf dem die Schaltfläche sitzt. Muss größer
     sein als ihr halber Durchmesser, sonst läuft sie in den Text. */
  padding-bottom: clamp(8rem, 16vw, 14rem);
}

/* Fenster mit festem Format — das Foto ist höher als das Fenster und
   wandert beim Scrollen darin. Dadurch bewegt sich das Bild selbst,
   nicht der ganze Block. */
.about__media-inner {
  position: relative;
  max-width: 25rem;
  /* linksbündig in der Spalte, zusätzlich etwas nach links gerückt —
     das Bild sitzt dadurch näher an der linken Kante seines Feldes */
  margin: 0 auto 0 -1rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  will-change: transform;
}

/* 26 % höher als das Fenster; die überstehenden 13 % liegen oben und
   unten je zur Hälfte, damit das Bild in beide Richtungen wandern kann */
.about__foto {
  position: absolute;
  top: -13%;
  left: 0;
  width: 100%;
  height: 126%;
  object-fit: cover;
  will-change: transform;
}

.about__text h2 { color: var(--heading); margin-bottom: 1.25rem; }
.about__text .more { margin-top: 1.5rem; }

@media (max-width: 52rem) {
  .about__inner {
    grid-template-columns: 1fr;
    --about-pad: clamp(1.75rem, 6vw, 2.75rem);
    gap: clamp(1.75rem, 5vw, 2.5rem);
  }
  /* gestapelt ergibt ein herausragendes Bild keinen Sinn */
  .about__media { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .about__text  { grid-column: 1; grid-row: 2; margin-top: 0; }
  /* Gestapelt gibt es kein "links im Feld" mehr - der Versatz von -1rem
     wuerde das Bild nur aus der Mitte schieben. Deshalb hier zentriert.
     ".about--oben" auf "Ueber mich" hat eine eigene Regel und bleibt. */
  .about__media-inner {
    max-width: 17rem;
    margin-left: auto;
    margin-right: auto;
  }

  /* Gestapelt ergeben zwei versetzte Felder keinen Sinn mehr - sie
     stehen dann als zwei Rechtecke uebereinander. Stattdessen ein
     einziger buendiger Rahmen um den ganzen Block, wie auf "Ueber mich". */
  .about__panel--bild {
    left: -2%;
    right: -2%;
    top: 0;
    bottom: 0;
  }
  .about__panel--text { display: none; }

  /* Der Knopf sitzt mittig auf der Unterkante dieses Rahmens:
     zur Haelfte darauf, zur Haelfte darunter. */
  .more--kante {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 50%);
    margin: 0;
  }
  .more--kante:hover { transform: translate(-50%, 50%) scale(1.04); }

  /* Bild und Text sollen mittig zwischen Rahmen-Oberkante und
     Knopf-Oberkante sitzen. Ueber dem Bild steht --luft; unter dem Text
     muss derselbe Wert plus der halbe Knopf stehen, weil der Knopf um
     seinen halben Durchmesser ueber die Unterkante ragt. */
  .about__inner {
    --knopf-halb: calc(clamp(8.75rem, 12vw, 11.5rem) / 2);
    --luft: clamp(2.5rem, 8vw, 3.5rem);
    padding-top: var(--luft);
    padding-bottom: var(--about-pad);
  }
  .about__text {
    padding-bottom: calc(var(--knopf-halb) + var(--luft) - var(--about-pad));
  }

  /* Platz, damit der herausragende Knopf nicht am naechsten Abschnitt klebt */
  .about { padding-bottom: calc(var(--section-y) * 0.8 + 3rem); }
}

/* ------------------------------------------------------------
   Abwandlung fuer die lange Selbstvorstellung auf "Ueber mich":

   Zwei Reihen im Zickzack — oben Bild links / Text rechts, unten Text
   links / Bild rechts. Dadurch steht kein Absatz ohne Bild daneben, und
   der Text bleibt in einer Spalte lesbar.

   Beide Spalten sind gleich breit, damit die Textbloecke oben und unten
   dieselbe Zeilenlaenge haben. Jedes beige Feld liegt im Quelltext in
   dem Block, zu dem es gehoert, und rechnet in festen Massen statt in
   Prozent — nur so bleibt die Luft rundum gleich, egal wie lang der Text
   in der jeweiligen Reihe ist.

   Die Startseite behaelt bewusst die urspruengliche Fassung.
   ------------------------------------------------------------ */

/* Die linke Flaeche ragt oben um die Nase heraus und rueckt damit nah an
   den Petrolbalken. Dieser Abschnitt braucht deshalb mehr Kopfluft als
   die uebrigen Unterseiten. */
/* Wie weit die linke Flaeche oben aus dem Rahmen herausragt. Steht hier
   am Abschnitt, weil auch die Kopfluft damit rechnen muss. */
.about--oben { --about-nase: clamp(2rem, 4vw, 3.5rem); }

/* Die linke Flaeche ragt um die Nase nach oben. Damit unter dem
   Petrolbalken derselbe Abstand sichtbar bleibt wie auf allen anderen
   Unterseiten, wird die Nase auf die uebliche Kopfluft aufgeschlagen.
   .section wird spaeter im Stylesheet gesetzt — die Klasse doppelt zu
   nennen hebt diese Regel darueber, ohne sie verschieben zu muessen. */
.pagehead + .section.about--oben {
  --eigene-luft: clamp(2.5rem, 5vw, 5rem);
  padding-top: calc(var(--eigene-luft) + var(--about-nase));
}

.about--oben .about__inner {
  grid-template-columns: 1fr 1fr;
  /* dicht gesetzt: zwischen den Reihen soll kein Loch entstehen */
  row-gap: clamp(1.75rem, 3vw, 2.75rem);
}

.about--oben .about__media {
  align-self: start;
  /* Genau so breit wie das Bildfenster — nur dann sitzt das beige Feld
     am Bild und nicht in der ganzen Spalte. Feste Breite statt
     fit-content: das Fenster leitet seine Hoehe aus der Breite ab. */
  width: min(25rem, 100%);
}

.about--oben .about__media-inner {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Reihe 1: Bild links, Text rechts */
.about--oben .about__media { grid-column: 1; grid-row: 1; }
.about--oben .about__text  { grid-column: 2; grid-row: 1; }

/* Reihe 2: Text links, Bild rechts */
.about--oben .about__text--links   { grid-column: 1; grid-row: 2; }
.about--oben .about__media--rechts { grid-column: 2; grid-row: 2; justify-self: end; }

.about--oben .about__text {
  margin-top: 0;
  padding-bottom: 0;
  /* enger als die 1,7 des uebrigen Fliesstextes: der Text ist hier
     lang, und ein dichterer Satz spart auf 30 Zeilen spuerbar Hoehe */
  line-height: 1.5;
}

/* Ein einziger beiger Rahmen um den ganzen Block. Er entsteht aus zwei
   Flaechen, die sich in der Mitte ueberschneiden: die linke setzt oben
   hoeher an und ragt dadurch aus dem Rahmen heraus — dieselbe Stufe wie
   auf der Startseite. Weil beide bis ganz nach unten reichen, bleibt
   zwischen den Reihen kein Weissraum. Beide bewegen sich gleich schnell,
   sonst risse die Stufe beim Scrollen auseinander. */
.about--oben .about__panel--bild {
  left: -2%;
  right: 54%;
  top: calc(-1 * var(--about-nase));
  bottom: 0;
}

.about--oben .about__panel--text {
  left: 43%;
  right: -2%;
  top: 0;
  /* unten spiegelverkehrt zur Nase oben: die rechte Flaeche reicht
     tiefer, damit der Rahmen nicht auf einer Linie abschliesst */
  bottom: calc(-1 * var(--about-nase));
}

/* Beide Bilder ruecken um die Nase mit — dadurch haben sie oben bzw.
   unten denselben Abstand zur Rahmenkante wie der Text daneben.
   Die negativen Aussenabstaende nehmen ihnen ihren Anteil an der
   Zeilenhoehe: die Reihen werden dadurch nicht hoeher. */
.about--oben .about__media {
  margin-top: calc(-1 * var(--about-nase));
}

.about--oben .about__media--rechts {
  align-self: end;
  margin-top: 0;
  margin-bottom: calc(-1 * var(--about-nase));
}

@media (max-width: 52rem) {
  .about--oben .about__inner { grid-template-columns: 1fr; }
  .about--oben .about__media,
  .about--oben .about__media--rechts {
    width: min(17rem, 100%);
    justify-self: start;
    align-self: start;
    margin: 0;
  }
  .about--oben .about__media        { grid-column: 1; grid-row: 1; }
  .about--oben .about__text         { grid-column: 1; grid-row: 2; }
  .about--oben .about__text--links  { grid-column: 1; grid-row: 3; }
  .about--oben .about__media--rechts{ grid-column: 1; grid-row: 4; }
  /* gestapelt ergibt die Stufe keinen Sinn — ein durchgehender Rahmen */
  .about--oben .about__panel--bild {
    left: -2%; right: -2%; top: calc(-1 * var(--about-nase)); bottom: 0;
  }
  .about--oben .about__panel--text { display: none; }
}

/* sichtbarer Hinweis, solange der echte Text fehlt */
.platzhalter-hinweis {
  color: var(--primary);
  opacity: 0.55;
  font-style: italic;
}

/* Anschrift im Impressum */
.impressum-adresse {
  font-style: normal;
  line-height: 1.9;
  color: var(--body-text);
}



/* kleinerer Kopf für Unterseiten */
.pagehead {
  position: relative;
  /* rund 30 % flacher als zuvor — der Balken soll die Seite ankuendigen,
     nicht den halben Bildschirm fuellen */
  min-height: clamp(12.5rem, 29.5vh, 18rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background: var(--primary);
  overflow: hidden;
}
.pagehead__media { position: absolute; inset: 0; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__media::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(23, 63, 65, 0.45);
}
.pagehead__inner { position: relative; z-index: 1; padding: 3rem var(--gutter); }

/* Der Abschnitt direkt unter dem Kopfbalken rueckt naeher heran und
   schliesst enger nach unten ab — der Balken kuendigt die Seite ja
   schon an, es braucht dazwischen kein grosses Luftholen. */
.pagehead + .section {
  /* --eigene-luft meldet die abweichende Kopfluft an die :target-Regel
     weiter, damit Sprungmarken hier nicht unter der Leiste landen */
  --eigene-luft: clamp(2.5rem, 5vw, 5rem);
  padding-top: var(--eigene-luft);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

/* Der Einstiegstext direkt unter dem Kopfbalken darf etwas breiter
   laufen als der uebrige schmale Satzspiegel — so bleiben kurze
   Einleitungssaetze bei geoeffnetem Fenster einzeilig. */
.pagehead + .section .wrap--narrow { max-width: 55rem; }
.pagehead h1 {
  color: var(--white);
  margin-bottom: 0.5rem;
  /* etwas kleiner als die uebrigen Hauptueberschriften, damit der
     Abstand zur Zeile darueber nicht so gross wirkt */
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
}

/* Die Kleinbuchstabenzeile darueber ist hier groesser gesetzt als sonst
   auf der Seite — die beiden Zeilen sollen zusammengehoeren */
.pagehead .eyebrow {
  font-size: clamp(0.85rem, 0.75rem + 0.3vw, 1rem);
  margin-bottom: 0.75rem;
}

/* ---------- Bilder mit abgesetztem Rahmen ---------- */

.framed {
  position: relative;
  display: block;
}

.framed img,
.framed .placeholder {
  position: relative;
  z-index: 1;
}

/* versetzte beige Fläche hinter dem Bild — Background Soft aus der Palette */
.framed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-soft);
  transform: translate(0.85rem, 0.85rem);
  transition: transform 0.4s ease;
  pointer-events: none;
}

.framed--left::before { transform: translate(-0.85rem, 0.85rem); }

/* Variante mit zusätzlicher feiner Linie, falls ein Bild mehr Halt braucht */
.framed--line::before { background: none; border: 1px solid var(--border); }

.framed:hover::before { transform: translate(0.45rem, 0.45rem); }
.framed--left:hover::before { transform: translate(-0.45rem, 0.45rem); }

/* ---------- Platzhalter für fehlende Bilder ---------- */

.placeholder {
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--primary);
  aspect-ratio: 4 / 5;
}

.placeholder span {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.placeholder .heart { opacity: 0.5; }

.placeholder--wide { aspect-ratio: 3 / 2; }
.placeholder--square { aspect-ratio: 1 / 1; }
.placeholder--hoch { aspect-ratio: 2 / 3; }
.placeholder--hero { aspect-ratio: auto; height: 100%; border: 0; }

/* ---------- Zwei-Spalten-Block (Bild + Text) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.split--media-right .split__media { order: 2; }

/* Hochformate würden sonst über die halbe Seitenbreite hinauswachsen.
   Bewusst nur direkte Kinder des Rahmens — sonst trifft die Regel auch
   kleine Zierelemente wie das Herz-Siegel in den Platzhaltern. */
.split__media > .framed > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---------- Kategorien als volle Zeilen, im Wechsel ---------- */

.cat-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 8vw, 7rem);
}

.cat-row { align-items: center; }

.cat-row h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 0.9rem;
}

.cat-row .more { margin-top: 1.4rem; }

.cat-row__media { display: block; overflow: hidden; }

.cat-row__media img,
.cat-row__media .placeholder { transition: transform 0.7s ease; }

.cat-row__media:hover img,
.cat-row__media:hover .placeholder { transform: scale(1.04); }

/* Dein Herz als Schablone — nimmt über currentColor jede Farbe an */
.heart-mark {
  display: block;
  width: 2.2rem;
  aspect-ratio: 940 / 1070;
  background-color: currentColor;
  -webkit-mask: url('herz.png') center / contain no-repeat;
  mask: url('herz.png') center / contain no-repeat;
}

/* Marken-Siegel in Platzhaltern und als Trennzeichen */
.ph-mark {
  width: clamp(2.2rem, 4vw, 3rem);
  height: auto;
  opacity: 0.5;
}

.rule-mark { width: 2.1rem; height: auto; }

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

/* Fünf Kategorien: drei oben, zwei darunter — nicht vier plus eine einsame */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 58rem) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}

.cat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.cat-card__media { overflow: hidden; margin-bottom: 1.25rem; }

.cat-card__media img,
.cat-card__media .placeholder {
  transition: transform 0.6s ease;
}

.cat-card:hover .cat-card__media img,
.cat-card:hover .cat-card__media .placeholder { transform: scale(1.04); }

/* feste Höhe, damit die Kategorienamen auf einer Linie liegen,
   auch wenn die Schlagworte unterschiedlich lang umbrechen */
.cat-card .eyebrow {
  min-height: 3.4em;
  align-items: flex-start;
  align-content: flex-start;
  margin-bottom: 0.5rem;
}

.cat-card h3 {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.15rem;
}

.cat-card .more { align-self: flex-start; margin-top: 0.85rem; }

/* ---------- Ablauf 01 / 02 / 03 ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  counter-reset: step;
}

.step { text-align: center; }

.step__num {
  display: block;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
  color: var(--secondary);
  opacity: 0.45;
  margin-bottom: 0.75rem;
}

.step h3 {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

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

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

/* Galerie als Raster: pro Bild laesst sich festlegen, ueber wie viele
   Spalten es laeuft. Ein Querformat ueber zwei Spalten wird fast genauso
   hoch wie ein Hochformat daneben — beide bleiben unbeschnitten.
   align-items:start haelt kuerzere Bilder oben, statt sie zu dehnen. */
.gallery--raster {
  --galerie-luft: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--galerie-luft);
  align-items: start;
}

.gallery--raster > .breit2 { grid-column: span 2; }
.gallery--raster > .breit3 { grid-column: span 3; }

/* Ein doppelt breites Querformat waere von Natur aus etwas niedriger als
   das Hochformat daneben. Es zieht sich deshalb auf die Reihenhoehe und
   wird dafuer seitlich minimal beschnitten — dadurch schliessen beide
   Bilder oben und unten buendig ab, bei jeder Fensterbreite. */
.gallery--raster > .breit2 { align-self: stretch; }

.gallery--raster > .breit2 img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 62rem) {
  .gallery--raster { grid-template-columns: repeat(2, 1fr); }
  .gallery--raster > .breit3 { grid-column: span 2; }
}

@media (max-width: 40rem) {
  .gallery--raster { grid-template-columns: 1fr; }
  .gallery--raster > .breit2,
  .gallery--raster > .breit3 { grid-column: span 1; }
}

/* Galerie mit gemischten Formaten: Hoch- und Querformat stehen
   nebeneinander und behalten ihr eigenes Seitenverhaeltnis. Die Bilder
   laufen spaltenweise von oben nach unten, dadurch entstehen keine
   Luecken und es muss nichts beschnitten werden. */
.gallery--mix {
  --galerie-luft: clamp(1rem, 2vw, 1.75rem);
  display: block;
  column-count: 3;
  column-gap: var(--galerie-luft);
}

/* Der Abstand steht bewusst hoeher gewichtet als .gallery > * weiter
   unten, sonst kleben die Bilder einer Spalte aneinander */
.gallery--mix > .framed {
  break-inside: avoid;
  margin-bottom: var(--galerie-luft);
}

/* Ein Querformat kann sich ueber die volle Breite legen — als Blickfang
   zwischen den Spalten. Dazu im HTML die Klasse "gross" ergaenzen. */
.gallery--mix > .framed.gross {
  column-span: all;
  margin-top: var(--galerie-luft);
  margin-bottom: calc(var(--galerie-luft) * 1.5);
}

@media (max-width: 62rem) {
  .gallery--mix { column-count: 2; }
}

@media (max-width: 40rem) {
  .gallery--mix { column-count: 1; }
}

.gallery > * { margin: 0; }

/* ---------- Kundenstimmen ---------- */

.quote {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Kundenstimmen als drei wandernde Kacheln ---------- */

.stimmen {
  --stimmen-luecke: clamp(1rem, 2vw, 1.75rem);
  --stimmen-sichtbar: 3;
  overflow: hidden;
}

.stimmen__spur {
  display: flex;
  gap: var(--stimmen-luecke);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* waehrend des Weiterwanderns */
.stimmen__spur.is-wandernd { transition: translate 0.8s ease; }

.stimme {
  flex: 0 0 calc(
    (100% - (var(--stimmen-sichtbar) - 1) * var(--stimmen-luecke))
    / var(--stimmen-sichtbar)
  );
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--bg-light);
  padding: clamp(1.35rem, 2.2vw, 1.85rem) clamp(1.35rem, 2.2vw, 2rem);
}

.stimme blockquote {
  margin: 0 0 1.1rem;
  color: var(--body-text);
  font-style: italic;
}

/* derselbe Pfeil wie im Hero, hier in Petrol statt Weiss */
.stimmen__weiter {
  display: block;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0 auto;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.stimmen__weiter svg {
  width: clamp(2.5rem, 4.5vw, 3.5rem);
  height: auto;
  transition: transform 0.3s ease;
}

.stimmen__weiter:hover svg { transform: translateX(6px); }
.stimmen__weiter:hover { opacity: 0.75; }

/* ohne vierte Stimme gibt es nichts zu blaettern */
.stimmen__weiter[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .stimmen__weiter svg { transition: none; }
}

.stimme cite {
  margin-top: auto;          /* die Namen stehen auf einer Linie */
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: var(--fw-caps);
}

@media (max-width: 62rem) {
  .stimmen { --stimmen-sichtbar: 2; }
}

/* der Kundenstimmen-Bereich faellt flacher aus als die uebrigen */
/* Frueher hatte der Kundenstimmen-Abschnitt nur etwa die halbe Hoehe der
   uebrigen Abschnitte. Jetzt gilt derselbe Abstand wie ueberall, damit die
   beigen Zeilen gleich hoch atmen. */
.section--soft:has(.stimmen) {
  padding-block: var(--section-y);
}

@media (max-width: 40rem) {
  .stimmen { --stimmen-sichtbar: 1; }
}

.quote blockquote {
  margin: 0 0 1.25rem;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.6;
  color: var(--heading);
  font-style: italic;
}

.quote cite {
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ---------- Preistabelle / Pakete ---------- */

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: stretch;
}

.package {
  background: var(--white);
  border: 1px solid var(--border);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
}

.package--featured { border-color: var(--primary); border-width: 2px; }

.package h3 {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.package__price {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  color: var(--secondary);
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

/* Aufzaehlung im Fliesstext, mit dem Herz als Aufzaehlungszeichen.
   Linksbuendig gesetzt, auch wenn der Abschnitt zentriert ist —
   zentrierte Listen sind schwer zu lesen. */
.fundament {
  list-style: none;
  max-width: 44rem;
  margin: 1.5rem auto 0;
  padding: 0;
  text-align: left;
}

.fundament li {
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1.1rem;
}

.fundament li:last-child { margin-bottom: 0; }

.fundament li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.38em;
  width: 1.4rem; height: 1.4rem;
  background: url('logo-herz-petrol.png') center / contain no-repeat;
}

/* Kurzbeschreibung zwischen Preis und Leistungsliste */
.package__text {
  margin: 0 0 1.5rem;
  font-size: 0.92em;
  color: var(--body-text);
  /* In der schmalen Karte reissen lange Woerter wie Familiengeschichte
     grosse Luecken am Zeilenende. Die Silbentrennung packt die Zeilen
     dichter — dadurch braucht derselbe Text weniger Zeilen. */
  hyphens: auto;
  -webkit-hyphens: auto;
}

.package ul {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  flex: 1;
}

/* Schaltfläche mittig im Paket-Rahmen */
.package .more { align-self: center; }

.package li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.6rem;
}

/* Aufzählungszeichen ist das Herz im Kreis */
.package li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 1.25rem; height: 1.25rem;
  background: url('logo-herz-petrol.png') center / contain no-repeat;
}

.package--featured li::before { background-image: url('logo-herz-terrakotta.png'); }

/* ---------- Preisliste (Zusatzprodukte) ---------- */

.pricelist {
  max-width: 52rem;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.pricelist__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
}

.pricelist__name {
  color: var(--heading);
  font-size: 1.1rem;
}

.pricelist__desc {
  grid-column: 1;
  font-size: 0.95rem;
  margin: 0.15rem 0 0;
}

.pricelist__price {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--secondary);
  font-size: 1.35rem;
  white-space: nowrap;
}

/* ---------- Mini-Aktionen ---------- */

/* Feste Dreierreihen: bei sechs Kacheln ergibt auto-fit sonst 4 + 2 und
   die letzte Reihe steht halb leer. */
.actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 62rem) {
  .actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .actions { grid-template-columns: 1fr; }
}

.action {
  background: var(--bg-soft);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}

.action__zeit {
  font-size: 0.74rem;
  font-weight: var(--fw-caps);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.action h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.action__preis {
  color: var(--secondary);
  font-size: 1.6rem;
  margin: 0 0 0.9rem;
}

/* nur die Fließtext-Absätze — sonst überschreibt diese Regel wegen
   höherer Spezifität auch .action__zeit und .action__preis */
.action p:not([class]) { font-size: 0.98rem; }

/* ---------- Hinweiskasten ---------- */

.notice {
  max-width: 52rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  background: var(--bg-soft);
  border-left: 3px solid var(--primary);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
}

.notice p { font-size: 1rem; }

/* Sternchen als Verweis auf die Fussnote — in Terrakotta, damit es als
   Hinweiszeichen zu erkennen ist, ohne wie ein Link auszusehen */
.sternchen {
  color: var(--secondary);
  font-weight: 600;
}

/* Fussnote unter einem Kartenblock */
.fussnote {
  max-width: 46rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  text-align: center;
  font-size: 0.9em;
  color: var(--body-text);
}

/* Hinweis, der nicht uebersehen werden darf: Terrakotta-Rahmen wie die
   uebrigen Angebotselemente, mittig unter den Paketkarten.
   Der Abstand ueber dem Infofeld und die Bodenluft des Abschnitts teilen
   sich denselben Wert, damit der Kasten genau mittig zwischen den Paketen
   und dem Newborn-Bereich sitzt. */
.section:has(> .wrap > .hinweis) { padding-bottom: var(--hinweis-luft); }

.hinweis {
  max-width: 46rem;
  margin: var(--hinweis-luft) auto 0;
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-soft);
  border: 1px solid var(--secondary);
  text-align: center;
  font-size: 0.95em;
}

.kleingedrucktes {
  max-width: 52rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ---------- Formular ---------- */

/* Weißer Grund, das Formular selbst ist die abgesetzte Karte.
   Der ganze Anfragebereich ist in Terrakotta gehalten. */
.form-block { background: var(--bg-light); }

.form-block .eyebrow { color: var(--secondary); }

.form-block--dark { background: var(--dark-accent); color: rgba(255, 255, 255, 0.88); }
.form-block--dark h2 { color: var(--white); }
.form-block--dark .field label { color: rgba(255, 255, 255, 0.8); }
.form-block--dark .field input,
.form-block--dark .field select,
.form-block--dark .field textarea {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}

.anfrage-form {
  max-width: 44rem;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  /* Terrakotta-Kante markiert den Anfragebereich */
  border-top: 3px solid var(--secondary);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.form-block--dark .anfrage-form {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.1rem;
}

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--body-text);
  background: var(--white);
  border: 1px solid var(--border);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s ease;
}

/* eigener Pfeil, damit das Auswahlfeld nicht in der Systemoptik
   erscheint, sondern wie die uebrigen Felder aussieht */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23C26861' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem auto;
  cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--secondary);
  box-shadow: inset 0 0 0 1px var(--secondary);
  outline: none;
}

.field textarea { min-height: 8rem; resize: vertical; }

.field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
}

.field--check input { width: auto; margin-top: 0.35rem; flex: none; }
.field--check label { text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: inherit; }

/* Honigtopf gegen Spam-Bots — für Menschen unsichtbar */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.form-status {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--secondary);
  background: var(--white);
  font-size: 0.95rem;
}

.form-status:empty { display: none; }

/* ---------- Fußzeile ---------- */

.site-footer {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.site-footer h4 {
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }

.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer a:hover { color: var(--white); }

/* Das runde Siegel in der weißen Linienfassung — auf dem dunklen Petrol
   der Fußzeile gibt es keinen Farbkonflikt, weil keine Fläche gefüllt ist */
.footer-siegel {
  width: clamp(7rem, 11vw, 9.5rem);
  height: auto;
  margin-bottom: 1.5rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

/* ---------- Einblenden beim Scrollen ---------- */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

/* Aus der Seite hereinkommen statt nur von unten — das ist der Effekt,
   der die Referenzseite lebendig wirken lässt. */
.js .reveal--links  { transform: translate3d(-56px, 28px, 0); }
.js .reveal--rechts { transform: translate3d(56px, 28px, 0); }

.js .reveal.is-visible { opacity: 1; transform: none; }

.js .reveal--d1 { transition-delay: 0.12s; }
.js .reveal--d2 { transition-delay: 0.24s; }
.js .reveal--d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .more, .framed::before, .cat-card__media img,
  .cat-card__media .placeholder { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- Mobil ---------- */

@media (max-width: 78rem) {
  .nav-toggle { display: inline-flex; }

  /* Logo links, Menütaste rechts, dazwischen nichts.
     Beide bleiben über dem geöffneten Menü sichtbar. */
  .header-inner,
  .site-header--kreise .header-inner { grid-template-columns: auto 1fr; }

  /* der Anfrage-Kreis wandert am Handy in das Aufklappmenü */
  .nav-kreis { display: none; }
  .site-logo { grid-column: 1; justify-self: start; position: relative; z-index: 95; }
  .nav-toggle { grid-column: 2; }

  /* Beide Menühälften wandern in ein gemeinsames Overlay, das von rechts
     hereinfährt. width:max-content lässt es genau so breit werden wie
     sein längster Eintrag — der Innenabstand ist der einzige Zuschlag. */
  .nav-panel {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    left: auto;
    /* feste, ausreichende Breite statt max-content — sonst wird die
       Schublade schmaler als ihre längsten Einträge und schneidet ab */
    width: min(86vw, 21rem);
    z-index: 80;
    background: var(--bg-light);
    box-shadow: -14px 0 44px rgba(23, 63, 65, 0.18);
    padding: 7.5rem clamp(1.5rem, 6vw, 2.25rem) 3rem;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform 0.35s ease;
    visibility: hidden;
  }

  .nav-panel.is-open { transform: none; visibility: visible; }

  .site-nav--left, .site-nav--right { justify-self: stretch; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav > ul > li { border-bottom: 1px solid var(--border); }

  .nav-link {
    color: var(--heading) !important;
    padding: 0.95rem 0;
    font-size: 0.9rem;
    justify-content: space-between;
  }

  .has-sub > .nav-link svg { display: none; }

  /* Untermenü ist mobil dauerhaft sichtbar — nichts versteckt sich */
  .subnav {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: 0 0 0.75rem !important;
  }

  .subnav .nav-link {
    padding: 0.5rem 0 0.5rem 1.25rem;
    font-size: 0.8rem;
    opacity: 0.85;
  }
  .subnav .nav-link:hover { background: transparent; }

  /* eigene Innenabstände, sonst erbt der Button die 0-Seitenpolsterung
     der übrigen Menüpunkte und quetscht seinen Text */
  .nav-cta {
    display: inline-flex;
    justify-content: center;
    padding: 0.9rem 2.2rem;
    margin-top: 1.75rem;
    color: var(--white) !important;
  }

  /* In der Schublade ist der Grund hell — der Knopf braucht hier seine
     Terrakotta-Füllung, sonst stünde weiße Schrift mit weißem Rahmen
     auf Creme und wäre unsichtbar. */
  .site-header--overlay .nav-panel .nav-cta,
  .site-header .nav-panel .nav-cta {
    background: var(--secondary);
    box-shadow: inset 0 0 0 4px var(--secondary),
                inset 0 0 0 5px rgba(255, 255, 255, 0.5);
  }

  .site-nav--right > ul > li:last-child { border-bottom: 0; }

  .split { grid-template-columns: 1fr; }
  .split--media-right .split__media { order: 0; }
}

@media (max-width: 40rem) {
  /* am Handy etwas kleiner als am Rechner */
  body { font-size: 18px; }

  /* Hochformat schneidet seitlich stark: Bei 390 x 844 sind von einem
     19:13-Bild nur rund 32 % der Breite zu sehen. Wo dieser Ausschnitt
     sitzt, muss deshalb pro Bild festgelegt werden — die Gesichter
     liegen in jedem Foto woanders.

     Der Wert steht als --fokus-x direkt am jeweiligen <img> in
     index.html. Umgerechnet wird er so: object-position zentriert den
     Punkt nicht, sondern verschiebt proportional. Soll der Bildpunkt f
     (Anteil der Bildbreite) mittig stehen, gilt bei 60 % Bildhoehe
         --fokus-x = (f - 0,264) / 0,473
     Aendert sich --hero-bild, aendern sich auch diese Werte. */
  /* --- Hero am Handy: Bild oben, Text darunter auf Schwarz ---------
     Quer aufgenommene Bilder in ein hochkantes Fenster zu zwingen
     kostet zu viel Bild. Deshalb bekommt das Foto hier nur den oberen
     Teil des Bildschirms, der Text sitzt darunter auf schwarzem Grund
     und braucht keinen Verlauf mehr, um lesbar zu sein.
     --hero-bild steuert die Aufteilung; alles andere richtet sich
     danach. */
  .hero {
    --hero-bild: 60dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* Grund und Schriftfarbe haengen zusammen: Auf hellem Grund waere
       die weisse Schrift unsichtbar. Beide stehen deshalb hier als
       Variablenpaar - zum Umstellen nur diese zwei Zeilen tauschen.
         beige:  var(--bg-soft)    + var(--heading)
         grau:   var(--body-text)  + var(--white)     */
    --hero-grund: var(--bg-soft);
    --hero-schrift: var(--heading);
    background: var(--hero-grund);
  }

  .hero__claim,
  .hero__sub { color: var(--hero-schrift); }

  .hero__media {
    position: relative;
    inset: auto;
    flex: 0 0 var(--hero-bild);
    height: var(--hero-bild);
  }

  /* Nur noch ein Hauch: oben, damit das Logo auf hellen Fotos steht,
     unten als weicher Uebergang ins Schwarz. In der Bildmitte nichts. */
  .hero__media::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0) 24%,
      rgba(0, 0, 0, 0) 74%,
      rgba(0, 0, 0, 0.55) 100%);
  }

  .hero__inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* kein Platz mehr fuer die Kopfleiste noetig - die liegt jetzt
       ueber dem Foto, nicht ueber dem Text */
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--gutter);
  }

  /* Der Pfeil gehoert zum Bild, nicht zum Textfeld */
  .hero__next {
    bottom: auto;
    top: calc(var(--hero-bild) - 3.5rem);
  }

  /* Auf Schwarz braucht der Claim keinen Schein mehr */
  .hero__claim { text-shadow: none; }

  .hero__slide {
    object-position: var(--fokus-x, 41%) var(--fokus-y, center);
  }
  .framed::before { transform: translate(0.5rem, 0.5rem); }
  .framed--left::before { transform: translate(-0.5rem, 0.5rem); }

  /* "Ganz persoenlich": Untereinander gestapelt ergeben drei einzelne
     versetzte Raehmchen ein unruhiges Bild. Am Handy liegt deshalb ein
     durchgehendes Feld hinter allen drei Bildern samt ihren Zeilen. */
  .gallery--alltag {
    background: var(--bg-soft);
    padding: clamp(1.5rem, 5vw, 2.25rem);
  }
  .gallery--alltag .framed::before { display: none; }
  /* der gemeinsame Rahmen traegt den Ton - die Zeile darf dichter ran */
  .gallery--alltag .bildzeile { margin-top: 0.75rem; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- Portfolio-Teaser: Bild auf beigem Feld, Text daneben ----------

   Das Foto bleibt unangetastet — keine Aufhellung, keine Abdunkelung.
   Der cremefarbene Rahmen ragt rechts und oben darüber hinaus und trägt
   dort die Schrift. Gemessen: Dunkelgrün direkt auf diesem Foto käme
   nur auf Kontrast 2,9, auf dem Beige sind es 8,7.                     */

.pteaser {
  position: relative;
  width: 66.6667vw;
  max-width: calc(100vw - 2 * var(--gutter));
  margin-left: 50%;
  translate: -50% 0;
}

.pteaser__link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.4fr;
  align-items: start;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  text-decoration: none;
  color: inherit;
}

.pteaser__media {
  position: relative;
  z-index: 1;
  grid-column: 1;
  margin-top: clamp(1.5rem, 5%, 3.5rem);
}

.pteaser__media .placeholder { aspect-ratio: 19 / 13; }

.pteaser__media > img {
  width: 100%;
  aspect-ratio: 19 / 13;
  object-fit: cover;
  transition: transform 0.7s ease;
}

/* Die Bildflaeche ist eine Schaltflaeche: sie oeffnet das Foto gross.
   Nur das Bild selbst reagiert auf die Maus, nicht die ganze Reihe. */
.pteaser__media {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

/* Lupe und Vergroesserung nur dort, wo wirklich ein Foto liegt —
   die Platzhalter sollen nicht klickbar wirken */
.pteaser__media[data-gross] { cursor: zoom-in; }

.pteaser__media[data-gross]:hover > img,
.pteaser__media[data-gross]:focus-visible > img { transform: scale(1.02); }

.pteaser__media:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 4px;
}

.pteaser__text {
  position: relative;
  z-index: 2;
  grid-column: 2;
  padding-top: clamp(1.5rem, 6%, 4rem);
  padding-right: clamp(0.5rem, 2%, 1.5rem);
}

/* enger gesetzt als sonst, damit die drei Schlagworte in eine Zeile
   passen — die Textspalte ist hier schmal */
.pteaser__text .eyebrow {
  font-size: clamp(0.62rem, 0.5rem + 0.25vw, 0.72rem);
  letter-spacing: 0.16em;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.pteaser__text .eyebrow span::after { margin-left: 0.5rem; }

.pteaser__text h3 {
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.8rem);
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 0.9rem;
}

.pteaser__text p { margin: 0; }
.pteaser__text p + p { margin-top: 0.9em; }

/* der duenne Ring wird beim Ueberfahren mit dunkel */
.more--klein:hover {
  box-shadow: inset 0 0 0 4px var(--dark-accent),
              inset 0 0 0 5px rgba(255, 255, 255, 0.65);
}

.more--klein {
  width: clamp(6.5rem, 8vw, 8.5rem);
  font-size: clamp(0.7rem, 0.6rem + 0.25vw, 0.82rem);
  letter-spacing: 0.18em;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  box-shadow: inset 0 0 0 4px var(--primary),
              inset 0 0 0 5px rgba(255, 255, 255, 0.5);
}

/* ---------- Grossansicht eines Fotos ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  /* neutrales Dunkel, damit die Farben des Fotos nicht verfaelscht werden */
  background: rgba(20, 22, 22, 0.95);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lightbox[hidden] { display: none; }
.lightbox.is-offen { opacity: 1; }

.lightbox__bild {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* zartes helles Kreuz rechts oben */
.lightbox__zu {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 1.75rem);
  right: clamp(0.75rem, 2.5vw, 1.75rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  color: var(--bg-light);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.lightbox__zu:hover,
.lightbox__zu:focus-visible { opacity: 1; }

.lightbox__zu svg { width: 1.5rem; height: 1.5rem; }

/* Schlusszeile unter den fuenf Kategorien */
.kat-schluss {
  max-width: 46rem;
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  text-align: center;
  color: var(--body-text);
}

/* --- Variante B: großes Bild, schmaler Rahmen ---------------
   Das Foto nimmt die ganze übrige Breite ein. Der cremefarbene Rahmen
   ist nur so breit, wie der Titel ihn braucht — er schiebt sich links
   unter das Foto und ragt oben und rechts darüber hinaus. */
.pteaser--breit {
  width: 84vw;
  max-width: 88rem;
  /* Der Titel gibt die Rahmenbreite vor — die Schlagworte daher immer
     im festen Verhaeltnis dazu, damit sie nie breiter werden */
  --titel: clamp(1.6rem, 1.1rem + 1.9vw, 2.8rem);
}

.pteaser--breit .pteaser__link {
  display: flex;
  align-items: flex-start;
  position: relative;
  /* kein Spaltenabstand — sonst sitzt der Text nicht mittig im
     sichtbaren Teil des Rahmens */
  gap: 0;
}

.pteaser--breit .pteaser__media {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  /* schafft oben Platz, damit der Rahmen über das Foto hinausragt */
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

.pteaser--breit .pteaser__text {
  /* --unterschub: so weit schiebt sich der Rahmen unter das Foto —
        37 % der Breite entspricht ungefaehr der Bildmitte, dort setzt
        der cremefarbene Streifen ueber dem Foto an
     --luft: Innenabstand des Rahmens */
  --unterschub: 37%;
  --luft: clamp(1.5rem, 2.2vw, 2.25rem);

  position: static;
  z-index: 0;                 /* der Überlappungsteil liegt hinter dem Foto */
  flex: 0 0 auto;
  /* Der Rahmen ist so hoch wie sein Inhalt — zwischen Text und Knopf
     entsteht dadurch kein Leerraum */
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* content-box, damit der Unterschub links nicht mitzaehlt.
     Feste Textbreite — dadurch sind alle Fotos gleich gross. Sie ist an
     die Titelgroesse gekoppelt und so bemessen, dass der laengste
     einzeilige Titel (BABYBAUCH) hineinpasst; KINDERGAERTEN wird
     stattdessen umbrochen. */
  box-sizing: content-box;
  width: calc(var(--titel) * 6.7);
  background: var(--bg-soft);
  margin-left: calc(-1 * var(--unterschub));
  margin-right: -3%;
  padding: var(--luft) var(--luft) 0 calc(var(--unterschub) + var(--luft));
  text-align: center;
}

.pteaser--breit .pteaser__text .eyebrow { justify-content: center; }

/* Der Trennstrich bei KINDER-GAERTEN kommt aus dem Stylesheet, nicht aus
   dem Text — dadurch liest Google weiterhin "Kindergaerten" als ein Wort */
.h3-trenn::after { content: "-"; }

/* Der Titel darf nicht umbrechen — er gibt die Breite des Rahmens vor.
   Die Mindestbreite haelt die Textspalte auch bei kurzen Titeln lesbar. */
.pteaser--breit .pteaser__text h3 { white-space: nowrap; }

/* Die drei Worte wachsen mit dem Titel mit und bleiben schmaler als er;
   sollten sie einmal doch nicht in eine Zeile passen, brechen sie um,
   statt den Rahmen breiter zu machen */
.pteaser--breit .pteaser__text h3 { font-size: var(--titel); }

.pteaser--breit .pteaser__text .eyebrow {
  font-size: calc(var(--titel) * 0.27);
  letter-spacing: 0.14em;
  flex-wrap: wrap;
  row-gap: 0.35em;
}

/* Jede zweite Reihe seitenverkehrt — Foto rechts, Rahmen links */
.pteaser--gespiegelt .pteaser__link { flex-direction: row-reverse; }

.pteaser--gespiegelt .pteaser__text {
  margin-left: -3%;
  margin-right: calc(-1 * var(--unterschub));
  padding-left: var(--luft);
  padding-right: calc(var(--unterschub) + var(--luft));
}

/* Der Knopf wird nach unten geschoben und sitzt mittig auf der
   unteren Rahmenkante */
.pteaser--breit .more--klein {
  margin-bottom: calc(-0.5 * clamp(6.5rem, 8vw, 8.5rem));
}

/* Am Handy und auf dem Tablet untereinander: Bild, darunter der Text
   auf dem beigen Feld. Nebeneinander wird es darunter zu eng. */
@media (max-width: 62rem) {
  .pteaser { width: auto; margin-left: 0; translate: none; }
  .pteaser__link { grid-template-columns: 1fr; gap: 0; }
  .pteaser__media { grid-column: 1; margin-top: 0; }
  /* Statt des versetzten Feldes traegt hier der Textblock selbst das
     Beige — so beginnt der Rahmen genau beim ersten Wort */
  .pteaser--breit { width: auto; }
  .pteaser--breit .pteaser__link { display: grid; }
  .pteaser--gespiegelt .pteaser__link { flex-direction: row; }
  .pteaser--gespiegelt .pteaser__text { padding-left: clamp(1.75rem, 7vw, 2.5rem); }
  .pteaser--breit .pteaser__media { width: 100%; margin-top: 0; }
  .pteaser--breit .pteaser__text {
    box-sizing: border-box;
    width: auto;
    align-self: auto;
    margin: 0;
    padding: clamp(1.75rem, 7vw, 2.5rem);
  }
  .pteaser--breit .more--klein { margin-top: clamp(1.25rem, 3vw, 2rem); }
  .pteaser--breit .pteaser__text h3 { white-space: normal; }
  /* hier ist Platz genug — der Titel steht wieder in einer Zeile */
  .pteaser--breit .pteaser__text h3 br { display: none; }
  .pteaser--breit .pteaser__text .h3-trenn::after { content: none; }
  /* Der Knopf sitzt auch gestapelt mittig auf der unteren Feldkante -
     die Haelfte seiner Hoehe ragt hinaus, wie am Rechner. Darunter
     braucht der Teaser entsprechend Luft, sonst stoesst er an den
     naechsten. */
  .pteaser--breit .more--klein {
    margin-bottom: calc(-0.5 * clamp(6.5rem, 8vw, 8.5rem));
  }
  .pteaser--breit { margin-bottom: clamp(3rem, 9vw, 4.5rem); }
  .pteaser__text {
    grid-column: 1;
    background: var(--bg-soft);
    padding: clamp(1.75rem, 7vw, 2.5rem);
  }
}

/* Sechs Ablaufschritte: bewusst 3 Spalten, damit 6 Kacheln als 3 + 3 stehen
   und nicht als 4 + 2 auseinanderfallen. */
.steps--sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) {
  .steps--sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38rem) {
  .steps--sechs { grid-template-columns: 1fr; }
}

/* Lede im dunklen Seitenkopf: Terrakotta auf Petrol ist zu unruhig,
   deshalb hier hell statt farbig. */
.pagehead .lede { color: rgba(255, 255, 255, 0.90); }

/* Ablauf mit sechs Schritten: Karten auf hellem Grund, Nummern in
   gefuellten Kreisen, die sich im Raster petrol/terrakotta abwechseln. */
.steps--sechs { gap: clamp(1rem, 2.2vw, 1.75rem); }
.steps--sechs .step {
  background: var(--bg-light);
  border: 1px solid var(--border);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.steps--sechs .step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white);
  font-size: 1.3rem;
  opacity: 1;
}
.steps--sechs .step h3 { color: var(--heading); }

/* Buttons ohne Anheben und ohne Schlagschatten: Der Wechsel passiert nur
   ueber die Farbe, wie bei den runden Siegel-Schaltflaechen (.more).
   Gilt fuer alle .btn, damit sich alle Schaltflaechen gleich verhalten. */
.btn {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease;
}
.btn:hover,
.btn:focus-visible {
  transform: none;
  box-shadow: none;
}

/* Optional-Hinweis im Label: deutlich zurueckgenommen, damit er die
   Beschriftung nicht ueberlagert. */
.field-optional {
  font-size: 0.75rem;
  font-weight: var(--fw-text);
  letter-spacing: 0;
  opacity: 0.5;
}

/* Petrolfarbene Variante des Hinweiskastens. Schriftgroesse bewusst wie
   der uebrige Fliesstext (20px), nicht verkleinert. */
.notice--petrol {
  background: var(--primary);
  border-left: 0;
  color: rgba(255, 255, 255, 0.94);
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
}
.notice--petrol p { font-size: inherit; }
.notice--petrol strong { color: var(--white); font-weight: var(--fw-text); }

/* Gewollter Zeilenumbruch, aber nur dort, wo die Zeile auch breit genug ist.
   Auf schmalen Bildschirmen bricht der Satz von selbst an der richtigen Stelle. */
.br-breit { display: none; }
@media (min-width: 46rem) { .br-breit { display: inline; } }

/* Fliesstext in den Baendern: gleiche Groesse wie der uebrige Text,
   hervorgehobene Zeilen in Weiss statt in Fettschrift. */
.band p { font-size: inherit; }
.band strong { color: var(--white); font-weight: var(--fw-text); }

/* Trennlinie ueber dem Anfrageformular. Nur noetig, wenn davor kein
   farbiger Abschnitt steht, der die Kante ohnehin markiert. Gleiche
   Linie wie ober- und unterhalb des WHY-Bandes. */
.form-block--linie { border-top: 1px solid var(--border); }

/* ============================================================
   OVERLAY — Hinweis auf ein laufendes Mini-Shooting

   Bewusst NICHT modal: die Flaeche ringsum laesst Maus und Finger
   durch (pointer-events: none), deshalb bleibt die Seite dahinter
   scroll- und klickbar. Nur die Karte selbst faengt Klicks ab.
   Die Karte ist fest am Bildschirm verankert und wandert beim
   Scrollen mit — sonst waere sie nach einmal Scrollen fuer immer weg.
   ============================================================ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  pointer-events: none;
}

/* Muss sein: das display oben wuerde das hidden-Attribut sonst
   ueberstimmen — Autorenregeln schlagen die Browservorgabe. Ohne diese
   Zeile stuende das Overlay von der ersten Sekunde an offen. */
.overlay[hidden] { display: none; }

.overlay__karte {
  pointer-events: auto;
  position: relative;
  width: min(70vw, 60rem);
  max-height: 86vh;
  overflow-y: auto;
  /* leicht durchscheinend, wie gewuenscht — die Weichzeichnung dahinter
     haelt den Text trotzdem lesbar */
  background: rgba(255, 254, 253, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  box-shadow: 0 1.5rem 4rem rgba(38, 66, 67, 0.25);
  animation: overlay-auf 0.45s ease both;
}

@keyframes overlay-auf {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay__karte { animation: none; }
}

.overlay__bild {
  display: block;
  width: 100%;
  height: auto;
}

.overlay__text {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  text-align: center;
}

.overlay__text h2 { margin-top: 0.35rem; }
.overlay__text p { margin-bottom: 0; }

/* Liste der freien Termine im Overlay. Von Hand gepflegt: die Seite
   kann nichts speichern, es gibt also keine echte Buchung — der Link
   fuehrt ins Anfrageformular und traegt Datum und Uhrzeit dort ein. */
.slots {
  list-style: none;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  padding: 0;
  text-align: left;
  border-top: 1px solid var(--border);
}

.slot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.slot__zeit { font-size: 1.05rem; }

.slot__link {
  flex: 0 0 auto;
  color: var(--secondary);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.slot__link:hover,
.slot__link:focus-visible { color: var(--secondary-hover); }

/* Vergeben: bleibt sichtbar, damit man sieht, wie schnell es geht */
.slot--weg .slot__zeit { opacity: 0.45; text-decoration: line-through; }

.slot__status {
  flex: 0 0 auto;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .slot { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

.overlay__aktionen {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.overlay__aktionen .btn {
  white-space: nowrap;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
}

.overlay__zu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: flex;
  padding: 0.5rem;
  background: rgba(255, 254, 253, 0.85);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--heading);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.overlay__zu svg { width: 18px; height: 18px; }

.overlay__zu:hover,
.overlay__zu:focus-visible {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

@media (max-width: 46rem) {
  .overlay__karte { width: 88vw; max-height: 88vh; }
}

/* Die drei Haltungen: weisse Felder mit feiner Kante auf beigem Grund,
   alle exakt gleich breit. Die Ueberschrift bleibt in der normalen
   Ueberschriftfarbe, ist nur wenig groesser als der Text darunter und
   bricht nicht um - die Groesse waechst mit der Bildschirmbreite mit,
   damit die laengste Zeile in jeder Breite in eine Zeile passt. */
.actions--haltung {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.actions--haltung .action {
  background: var(--bg-light);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  align-items: center;
  text-align: center;
}
.actions--haltung .action h3 {
  color: var(--heading);
  font-size: clamp(0.95rem, 0.3rem + 1.2vw, 1.3rem);
  white-space: nowrap;
  margin-bottom: 0.85rem;
}

/* Fliesstext in diesen Feldern so gross wie der uebrige Fliesstext */
.actions--haltung .action p:not([class]) { font-size: inherit; }

@media (max-width: 62rem) {
  .actions--haltung { grid-template-columns: 1fr; }
  .actions--haltung .action h3 { font-size: 1.3rem; }
}

/* Steckbrief: links der Begriff in Versalien, rechts die Antwort. Die
   Trennlinien laufen ohne Luecke durch, deshalb kein Spaltenabstand -
   der Abstand steckt im Innenabstand der Begriffsspalte. Der Begriff
   ist senkrecht zur Antwort zentriert, die Spalte selbst bleibt aber
   auf ganze Zeilenhoehe gestreckt, damit die Linien zusammenpassen. */
.steckbrief {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.steckbrief dt {
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: var(--fw-caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  padding-right: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.6;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.steckbrief dd {
  margin: 0;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 46rem) {
  .steckbrief { grid-template-columns: 1fr; }
  .steckbrief dt {
    display: block;
    padding: clamp(1rem, 4vw, 1.4rem) 0 0.35rem;
    border-bottom: 0;
    white-space: normal;
  }
  .steckbrief dd { padding-block: 0 clamp(1rem, 4vw, 1.4rem); }
}

/* Schlagwoerter als kleine Felder. Nur fuer Aufzaehlungen, nicht fuer Saetze. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--secondary);
  border-radius: 999px;
  background: var(--bg-light);
  color: var(--heading);
}

/* Herz mitten in der Ueberschrift, als Taktwechsel im Satz. Groesse und
   Hoehe haengen an der Schriftgroesse, damit es in jeder Zeile mitwaechst. */
.heart-inline {
  display: inline-block;
  width: 0.72em;
  aspect-ratio: 940 / 1070;
  margin: 0 0.18em;
  vertical-align: -0.04em;
  background-color: var(--secondary);
  -webkit-mask: url('herz.png') center / contain no-repeat;
  mask: url('herz.png') center / contain no-repeat;
}

/* Siegel-Schaltflaechen auf farbigem Grund: Petrol direkt auf Terrakotta
   vibriert, deshalb hier creme Flaeche mit Terrakotta-Schrift und dem
   feinen Ring in der Bandfarbe. Beim Darueberfahren wird die Flaeche
   ganz weiss statt dunkler. */
.more--auf-farbe {
  /* rund 30 % kleiner als die normalen Siegel, Schrift und Ring
     entsprechend zurueckgenommen */
  width: clamp(6.1rem, 8.4vw, 8.05rem);
  padding: 0.5rem;
  font-size: clamp(0.72rem, 0.6rem + 0.3vw, 0.85rem);
  letter-spacing: 0.1em;
  line-height: 1.45;
  background: var(--bg-light);
  color: var(--secondary);
  box-shadow: inset 0 0 0 3.5px var(--bg-light),
              inset 0 0 0 4.5px rgba(194, 104, 97, 0.45);
}
.more--auf-farbe:hover {
  background: var(--white);
  color: var(--secondary-hover);
  box-shadow: inset 0 0 0 3.5px var(--white),
              inset 0 0 0 4.5px rgba(169, 88, 82, 0.6);
}

/* Zwei gleich breite Textspalten nebeneinander. */
.zweispalter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 52rem) {
  .zweispalter { grid-template-columns: 1fr; }
}


/* Gefuehls-Karten: getoentes Feld mit dem Text, davor das gekippte Wort
   gross und Ton in Ton. Das Wort ist reine Grafik, die Ueberschrift im
   Feld traegt die Bedeutung. */
.gefuehl-karte { position: relative; }

.gefuehl-karte__wort {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(4.25rem, 8.5vw, 6.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
  font-weight: var(--fw-caps);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* kraeftiger als zuvor: das Wort soll lesbar sein, aber hinter dem
     Text zurueckbleiben */
  color: var(--primary);
  opacity: 0.38;
  margin: 0;
  white-space: nowrap;
  pointer-events: none;
}

.gefuehl-karte__inhalt {
  background: var(--bg-soft);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.75rem)
           clamp(2rem, 4vw, 3rem) clamp(5rem, 9.5vw, 7.5rem);
  height: 100%;
}


/* Schmale Bildschirme: das gekippte Wort wuerde die halbe Bildschirmhoehe
   fuellen, deshalb entfaellt es dort. */
@media (max-width: 52rem) {
  /* Senkrecht gekippt wuerde das Wort hier die halbe Bildschirmhoehe
     fuellen. Verstecken kostet aber die Ueberschrift - also stellt es
     sich waagrecht ueber den Text, im selben Stil wie .wort-gekippt. */
  .gefuehl-karte__wort {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    width: auto;
    height: auto;
    display: block;
    text-align: left;
    white-space: normal;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
    margin: 0 0 clamp(0.75rem, 2.5vw, 1.1rem);
  }
  /* Die Ueberschrift gehoert mit auf das beige Feld, nicht davor.
     Deshalb traegt hier die Karte den Ton, der Inhalt selbst keinen. */
  .gefuehl-karte {
    background: var(--bg-soft);
    padding: clamp(1.75rem, 6vw, 2.5rem) clamp(1.5rem, 5vw, 2rem);
  }
  .gefuehl-karte__inhalt {
    background: none;
    padding: 0;
  }
  /* etwas mehr Luft zwischen Ueberschrift und Text */
  .gefuehl-karte__wort { margin-bottom: clamp(1.25rem, 4vw, 1.75rem); }
}

/* Menuepunkte, die nur ein Untermenue oeffnen und selbst nicht verlinken. */
.nav-link--eltern { cursor: default; }

/* Ueberschrift der Vorstellung im selben Stil wie die Woerter bei den
   Gefuehls-Karten - Versalien, Petrol, zurueckgenommen - aber waagrecht
   und gerade ueber dem Text. */
.wort-gekippt {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem) !important;
  font-weight: var(--fw-caps);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary) !important;
  opacity: 0.38;
}

/* Pflichtfelder tragen einen sanften Terrakotta-Rahmen, optionale Felder
   den neutralen. Das ersetzt die Woerter "optional" an den Labels. */
.field input:required,
.field select:required,
.field textarea:required {
  border-color: rgba(194, 104, 97, 0.55);
}
.field--check input:required {
  accent-color: var(--secondary);
  outline: 1px solid rgba(194, 104, 97, 0.55);
  outline-offset: 1px;
}

/* Kompakte Portfolio-Uebersicht auf der Startseite: Querformate, drei in
   der ersten Zeile, zwei mittig in der zweiten. Flex statt Raster, damit
   die letzte Zeile von selbst zentriert. Die ganze Kachel ist der Link. */
.kat-kacheln {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.kat-kachel {
  flex: 0 1 calc((100% - 2 * clamp(1.5rem, 3vw, 2.75rem)) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.kat-kachel__bild {
  display: block;
  width: 100%;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  overflow: hidden;
}
.kat-kachel__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kat-kachel:hover .kat-kachel__bild img { transform: scale(1.03); }

/* Name im Stil der gekippten Woerter: Versalien, Petrol, zurueckgenommen */
.kat-kachel__name {
  font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.85rem);
  font-weight: var(--fw-caps);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.38;
  margin-bottom: 0.9rem;
}
.kat-kachel .eyebrow {
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.45rem;
}
.kat-kachel .more--klein { pointer-events: none; }

@media (max-width: 62rem) {
  .kat-kachel { flex: 0 1 calc((100% - clamp(1.5rem, 3vw, 2.75rem)) / 2); }
}
@media (max-width: 38rem) {
  .kat-kachel { flex: 0 1 100%; }
}

/* Kachelnamen nie trennen und nie umbrechen - auch das lange
   "Kindergaerten" bleibt in einer Zeile; die Schrift passt sich an. */
.kat-kachel__name {
  white-space: nowrap;
  hyphens: none;
}
@media (max-width: 80rem) {
  .kat-kachel__name { font-size: clamp(0.95rem, 0.35rem + 1.5vw, 1.85rem); }
}

/* Nachsatz-Block: links Frage und Text, rechts der Verweis, senkrecht
   mittig zum Textblock. */
.nachsatz {
  display: flex;
  flex-wrap: nowrap;          /* Siegel bleibt neben dem Text, auch wenn
                                 der Text mehrere Absaetze hat */
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: fit-content;
  max-width: 64rem;
  margin: 0 auto;
}
.nachsatz > div { min-width: 0; }
.nachsatz > .more { flex: none; }
.nachsatz__frage {
  margin: 0 0 0.75rem;
  font-size: clamp(1.4rem, 0.95rem + 1.8vw, 2.2rem);
  font-weight: var(--fw-caps);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--primary);
  opacity: 0.55;
}
.nachsatz__text { margin: 0; }

@media (max-width: 52rem) {
  .nachsatz {
    flex-wrap: wrap;
    width: auto;
    gap: clamp(1.25rem, 4vw, 1.75rem);
    text-align: center;
  }
}

/* Die eine Kontaktform: abgerundetes Rechteck in Terrakotta mit feinem
   weissen Ring - identisch zum Anfrage-Knopf im Menue. Alles, was zur
   Anfrage fuehrt oder sie abschickt, traegt sie. */
.btn--cta {
  background: var(--secondary);
  color: var(--white);
  box-shadow: inset 0 0 0 4px var(--secondary),
              inset 0 0 0 5px rgba(255, 255, 255, 0.5);
}
.btn--cta:hover,
.btn--cta:focus-visible {
  background: var(--secondary-hover);
  box-shadow: inset 0 0 0 4px var(--secondary-hover),
              inset 0 0 0 5px rgba(255, 255, 255, 0.65);
}

/* Schrift der Pillen wie im Menue: Versalien, weit gesperrt, leicht.
   Der Text steht immer mittig in der Pille. */
.btn--cta {
  justify-content: center;
  text-align: center;
  font-weight: var(--fw-caps);
  font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.05rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.7rem 1.75rem 0.7rem 1.99rem; /* rechts weniger, die Sperrung
                                             haengt sonst nach */
}

/* Gutschein-Abschnitt: schmalere Textspalte, dafuer das grosse Siegel. */
.nachsatz--gutschein { max-width: 52rem; }
.nachsatz--gutschein > div { max-width: 34rem; }


/* Wegmarken: die sechs Ablaufschritte als eine Zeile, nur Nummer und
   Name. Die Linie laeuft hinter den Nummern durch; die Nummernkreise
   liegen davor und unterbrechen sie. */
.wegmarken {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 58rem;
}
.wegmarken::before { content: none; }
.wegmarken li {
  position: relative;
  flex: 0 1 calc((100% - 2 * clamp(1rem, 2.5vw, 2rem)) / 3);
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 0.85rem;
  row-gap: 0.7rem;
  text-align: left;
}
.wegmarken__num {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.wegmarken__text {
  grid-column: 2;
  font-size: clamp(0.82rem, 0.66rem + 0.42vw, 1rem);
  font-weight: var(--fw-caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
}

@media (max-width: 52rem) {
  .wegmarken { flex-wrap: wrap; justify-content: center; gap: 1.75rem 1rem; }
  .wegmarken::before { content: none; }
  .wegmarken li { flex: 0 1 calc((100% - 2rem) / 3); }
}

/* Kurze Erlaeuterung unter jeder Wegmarke - ein Halbsatz, mehr nicht. */
/* Schlagworte unter der Wegmarke, gerade gesetzt. */
.wegmarken__info {
  grid-column: 1 / -1;
  /* mittig zwischen linker Kante des Zahlenkreises und rechter Kante
     der Ueberschrift - die Zeile ist genau so breit wie beide zusammen */
  text-align: center;
  font-size: inherit;
  line-height: 1.6;
  color: var(--body-text);
}

/* Ablauf-Kurzfassung: etwas breitere Textspalte als beim Gutschein. */
.nachsatz--ablauf { max-width: 58rem; }
.nachsatz--ablauf > div { max-width: 40rem; }

/* Ablauf als Liste: links die grosse, zurueckgenommene Ziffer, rechts
   daneben der Text - die Ziffer steht ausserhalb des Textblocks. */
.steps--liste {
  display: block;
  max-width: 56rem;
  margin: 0 auto;
}
.steps--liste .step {
  display: grid;
  grid-template-columns: clamp(4.5rem, 9vw, 7.5rem) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  text-align: left;
  background: none;
  border: 0;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
.steps--liste .step + .step { border-top: 1px solid var(--border); }
.steps--liste .step__num {
  margin: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--secondary);
  opacity: 0.32;
  font-size: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  font-weight: var(--fw-caps);
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-align: right;
}
.steps--liste .step h3 {
  color: var(--secondary);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

@media (max-width: 38rem) {
  .steps--liste .step { grid-template-columns: 1fr; row-gap: 0.4rem; }
  .steps--liste .step__num { text-align: left; font-size: clamp(3rem, 12vw, 4.5rem); }
}

/* Die haeufigsten Saetze: nur die Saetze, versetzt gesetzt, damit sie wie
   aufgeschnappte Zwischenrufe wirken und nicht wie eine Liste. */
.nachsatz--sorgen { max-width: 58rem; }
.sorgen {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 38rem;
}
.sorgen li {
  font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.45rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--heading);
}
.sorgen li:nth-child(2) { margin-left: clamp(1rem, 4vw, 3rem); }
.sorgen li:nth-child(3) { margin-left: clamp(0.5rem, 2vw, 1.5rem); }
.sorgen li:nth-child(4) { margin-left: clamp(1.5rem, 6vw, 4.5rem); }
.sorgen li:nth-child(5) { margin-left: clamp(0.5rem, 2vw, 1.5rem); }

@media (max-width: 52rem) {
  .sorgen li { margin-left: 0 !important; }
}

/* Der Leitsatz, geschrieben wie auf der Startseite - mit Punkten, in
   einer Zeile, gross und zurueckgenommen wie die Ziffern im Ablauf. */
.dreiklang {
  margin: 0 auto;
  max-width: 60rem;
  text-align: center;
  font-size: clamp(1.9rem, 1rem + 3.8vw, 4rem);
  font-weight: var(--fw-caps);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  opacity: 0.32;
  text-wrap: balance;
}

/* EINWURF — reserviert fuer Haltungssaetze. Ein Satz, viel Luft, sonst
   nichts. Hoechstens einer pro Seite, sonst verliert er seine Wirkung. */
.einwurf {
  padding-block: clamp(4.5rem, 11vw, 9rem);
  text-align: center;
}
.einwurf__herz {
  width: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--secondary);
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}
.einwurf p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 34rem;
  margin-inline: auto;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.4rem);
  font-weight: var(--fw-caps);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--heading);
  text-wrap: balance;
}
/* das eine Wort, das den Satz traegt */
.einwurf p em {
  font-style: normal;
  color: var(--secondary);
}
/* grosse Herz-Marke als Grafik dahinter */
.einwurf { position: relative; overflow: hidden; }
.einwurf .wrap { position: relative; z-index: 1; }
.einwurf__marke {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(16rem, 34vw, 28rem);
  aspect-ratio: 940 / 1070;
  background-color: var(--secondary);
  opacity: 0.07;
  -webkit-mask: url('herz.png') center / contain no-repeat;
  mask: url('herz.png') center / contain no-repeat;
  pointer-events: none;
}

/* FAQ als Karten: vorne die Frage, mittig im Feld. Beim Darueberfahren
   blendet die Antwort ein. Beide Ebenen liegen uebereinander, deshalb ist
   die Karte immer so hoch, wie die Antwort es braucht. */
.faq-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.faq {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
}
.faq__frage {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* im Stil von HEY, ICH BIN KERSTIN */
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem);
  font-weight: var(--fw-caps);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.55;
}
/* Antwort senkrecht mittig im Kaestchen */
.faq__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.faq__text p { font-size: inherit; }
.faq__text p:last-child { margin-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
  .faq { display: grid; }
  .faq__frage,
  .faq__text {
    grid-area: 1 / 1;
    transition: opacity 0.35s ease;
  }
  .faq__text { opacity: 0; }
  .faq:hover .faq__frage,
  .faq:focus-within .faq__frage { opacity: 0; }
  .faq:hover .faq__text,
  .faq:focus-within .faq__text { opacity: 1; }
  .faq:hover, .faq:focus-within { border-color: var(--secondary); }
}

/* Ohne Darueberfahren: Frage und Antwort untereinander, beide sichtbar. */
@media not all and (hover: hover) {
  .faq__frage {
    justify-content: flex-start;
    text-align: left;
    opacity: 0.75;
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 62rem) { .faq-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 42rem) { .faq-raster { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .faq__frage, .faq__text { transition: none; }
}


/* ---------- Fotorichtungen auf der Startseite ----------
   Wie auf der Portfolioseite, aber ruhiger: die Reihe bleibt in der
   Seitenbreite, das Foto wird kleiner und der cremefarbene Rahmen
   bekommt mehr Platz fuer den Text (Foto etwa 55 %, Text etwa 45 %). */
.pteaser--start {
  width: min(78vw, 76rem);
}

.pteaser--start .pteaser__text {
  --unterschub: 20%;
  width: calc(var(--titel) * 10);
  padding-bottom: 0;
}

.pteaser--start .pteaser__text p { text-align: center; }

@media (max-width: 62rem) {
  .pteaser--start { width: auto; }
  .pteaser--start .pteaser__text { width: auto; }
}

/* Auf der Startseite ist das Textfeld breit genug — KINDERGAERTEN steht
   in einer Zeile, ohne Trennstrich */
.pteaser--start .pteaser__text h3 br { display: none; }
.pteaser--start .h3-trenn::after { content: none; }


/* ---------- Galerie mit halben Reihen (Kindergaerten) ----------
   Sechs unsichtbare Spalten statt drei: ein Hochformat nimmt zwei
   davon ein (ein Drittel), .halb nimmt drei (die halbe Breite). So
   koennen auch zwei Hochformate allein eine Reihe fuellen. */
.gallery--sechs { grid-template-columns: repeat(6, 1fr); }
.gallery--sechs > .framed { grid-column: span 2; }
.gallery--sechs > .framed.breit2 { grid-column: span 4; }
.gallery--sechs > .framed.breit3 { grid-column: span 6; }
.gallery--sechs > .framed.halb { grid-column: span 3; }

@media (max-width: 62rem) {
  .gallery--sechs { grid-template-columns: repeat(2, 1fr); }
  .gallery--sechs > .framed,
  .gallery--sechs > .framed.halb { grid-column: span 1; }
  .gallery--sechs > .framed.breit2,
  .gallery--sechs > .framed.breit3 { grid-column: span 2; }
}

@media (max-width: 40rem) {
  .gallery--sechs { grid-template-columns: 1fr; }
  .gallery--sechs > .framed,
  .gallery--sechs > .framed.halb,
  .gallery--sechs > .framed.breit2,
  .gallery--sechs > .framed.breit3 { grid-column: span 1; }
}


/* ---------- Kindergaerten: Ansatz und Ablauf nebeneinander ---------- */
.kg-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 64rem;
  margin: 0 auto;
}
.kg-info h3 {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-caps);
  margin: 0;
}
.kg-info .fundament { max-width: none; margin-top: 1.25rem; }
@media (max-width: 48rem) {
  .kg-info { grid-template-columns: 1fr; }
}


/* ---------- Newborn: Hinweis zum besten Zeitpunkt ---------- */
.zeitpunkt {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  text-align: center;
}
.zeitpunkt h3 {
  margin: 0 0 0.75rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-caps);
}
.zeitpunkt p { margin: 0; }


/* Textblock in derselben Breite wie das Intro direkt unter dem Seitenkopf */
.wrap--wie-intro { max-width: 55rem; }


/* Einwurf mit handgezogenem Kreis: der Kreis liegt um den Satz herum
   statt des grossen Herzens dahinter. Er waechst mit dem Satz mit. */
.einwurf--kreis p {
  width: fit-content;
  padding: 1.1em 1.4em;
}
.einwurf--kreis p::before {
  content: "";
  position: absolute;
  inset: -0.35em -0.9em;
  background: url('kreis-terrakotta.png') center / 100% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 40rem) {
  .einwurf--kreis p { padding: 1em 1.2em; font-size: 1.45rem; }
  .einwurf--kreis p::before { inset: -0.3em -0.1em; }
}


/* Leitsatz als eigene Zeile mitten im Fliesstext (z. B. Gutschein) */
.leitsatz {
  display: block;
  margin: 0.6em 0;
  font-size: 1.35em;
  font-weight: var(--fw-caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
}


/* Bildunterschriften unter den Alltagsbildern (Ueber mich):
   in der Handschrift der Seite — Grossbuchstaben, gesperrt, Petrol */
.bildzeile {
  margin: 1rem 0 0;
  text-align: center;
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  font-weight: var(--fw-caps);
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.8;
  text-wrap: balance;
}


/* ---------- Schlusswort auf den Portfolio-Seiten ----------
   Nach der Galerie ein ruhiger Gedanke: mittig, viel Luft,
   die letzte Zeile in Terrakotta hervorgehoben. */
.schlusswort {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  text-align: center;
}
.schlusswort__herz {
  width: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--secondary);
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
}
.schlusswort p {
  max-width: 38rem;
  margin: 0 auto 0.6em;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  line-height: 1.55;
  color: var(--heading);
  text-wrap: balance;
}
.schlusswort p.schlusswort__schluss {
  margin-top: 1.4em;
  margin-bottom: 0;
  font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: var(--secondary);
}

/* ============================================================
   ORTE — Kacheln auf der Seite "Orte und Anfahrt"
   Schlicht gehalten: der Ortsname traegt, der Satz darunter
   erklaert. Drei Spalten, damit acht Orte als 3+3+2 stehen.
   ============================================================ */

.orte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.ort {
  background: var(--bg-soft);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.ort h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  margin-bottom: 0.6rem;
}

.ort p { margin: 0; }

@media (max-width: 62rem) {
  .orte { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  .orte { grid-template-columns: 1fr; }
}