/* ============================================================
   Ina – Trauerbegleitung mit Pferd
   Die Aquarellwelt des Entwurfs als Gestaltungssprache: ein
   warmer Cremegrund, in den an den Raendern rosa und pfirsich-
   farbene Farbnebel einlaufen (weiche radial-gradients, keine
   Kacheln), Beere fuer die Ueberschriften, Kupfer fuer die
   Linien-Icons. Bilder werden nicht hart beschnitten, sondern
   per CSS-Maske in den Grund uebergeblendet – wie im Entwurf.

   Bewusste Abweichungen vom Entwurf:
   – Die Kopfleiste ist nicht klebrig (sticky): im Entwurf ist
     der Kopfbereich Teil der Hero-Komposition, das Aquarell
     laeuft hinter Logo und Navigation. Eine mitscrollende
     Leiste dieser Hoehe wuerde den Bildschirm verstellen.
   – Das Zitat steht weiss auf dem Magenta-Aquarell (~4,3:1).
     Als Grosstext (>24 px) erfuellt es WCAG AA (3:1); ein
     zarter Schattenwurf sichert die Lesbarkeit auf den hellen
     Stellen der Textur.
   – Alle uebrigen Textfarben stammen aus dem Entwurf und
     erfuellen 4,5:1 ohne Nachsaettigung (Werte am Token).
   ============================================================ */

/* ---------- Schriften (self-hosted, latin) ------------------ */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/eb-garamond-italic-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Ms Madi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ms-madi-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-sans-var-latin.woff2") format("woff2");
}

/* ---------- Token -------------------------------------------- */

:root {
  --creme: #FBF3EA;          /* Seitengrund: warmes Creme */
  --flaeche: #F6EDE5;        /* abgesetzte Abschnitte */
  --beige: #F9E7DB;          /* warme Aquarellzone (Ueber mich) */
  --rosa-nebel: #EACAC5;     /* zartrosa Farbnebel; als rgba-Literal in den
                                body-/fuer-sie-Gradients dupliziert –
                                nur paarweise aendern */
  --karte: #FBF5EE;          /* Kartengrund */

  --beere: #722138;          /* Ueberschriften                 9,6:1 */
  --beere-aktiv: #9D4257;    /* aktive Nav-/Fusszeilen-Punkte  5,7:1 · 4,8:1 auf Fussgrund */
  --script: #7C2440;         /* Kalligrafie "Ina" */
  --text: #4D443B;           /* Fliesstext, warmes Graubraun   8,7:1 */
  --nav: #4A3D31;            /* Navigation (Entwurf: #5A4C3F) – nachge-
                                dunkelt, weil die rechten Punkte auf dem
                                Aquarell liegen; zusaetzlich Creme-Halo */
  --unterzeile: #5E4737;     /* gesperrte Logo-Unterzeile      7,3:1 */
  --fuss-text: #4F463D;      /* Fusszeile                      7,1:1 auf --fuss-grund */

  --knopf-rand: #8E3A50;     /* Outline-Knoepfe                6,6:1 */
  --kupfer-text: #9A4E3B;    /* Eyebrows der Angebots-Abschnitte
                                5,4:1 auf Creme · 5,1:1 auf Flaeche */
  --knopf-a: #B24B6B;        /* gefuellter Knopf, Verlauf hell (Weiss darauf 5,1:1) */
  --knopf-b: #AB3459;        /* gefuellter Knopf, Verlauf tief (Weiss darauf 5,9:1) */

  --kupfer: #C87155;         /* Icon-Verlauf, Anfang (dekorativ); Literal in
                                den Inline-SVG-Verlaeufen (stop-color kann
                                kein var()) – nur paarweise aendern */
  --kupfer-tief: #A94A55;    /* Icon-Verlauf, Ende (dekorativ), dito */
  --schmuck: #C98A66;        /* kurze Kupfer-Schmucklinie (dekorativ) */
  --unterstrich: #B0777B;    /* Unterstreichung des aktiven Nav-Punkts (dekorativ) */
  --trenner: #D9B4AC;        /* hauchduenne Spaltentrenner (dekorativ) */

  --fuss-grund: #F0DFD2;     /* Fusszeile */
  --fuss-leiste: #EBDACB;    /* Copyright-Leiste: im Entwurf nur hauchfein
                                vom Fussgrund abgesetzt (gemessen ~#F3E7DB
                                auf hellerem Grund), kein dunkler Balken */
  --fuss-icon: #B45A72;      /* kleine Kontakt-Icons (dekorativ) */

  --serif: "EB Garamond", Garamond, Georgia, serif;
  --script-schrift: "Ms Madi", "Segoe Script", cursive;
  --sans: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  --wrap-max: 1280px;
  --pad: clamp(20px, 4vw, 40px);

  color-scheme: light;
}

/* ---------- Grundgeruest -------------------------------------- */

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

html { scroll-behavior: smooth; }

/* Der Farbnebel des Kopfbereichs liegt auf dem body selbst:
   so laeuft er ohne Naht hinter Kopfleiste UND Hero. */
body {
  margin: 0;
  background:
    radial-gradient(52rem 36rem at -12% 640px, rgba(234, 202, 197, 0.55), transparent 62%),
    radial-gradient(36rem 28rem at -6% 320px, rgba(244, 183, 162, 0.5), transparent 60%),
    radial-gradient(44rem 32rem at 4% 180px, rgba(249, 231, 219, 0.9), transparent 65%),
    radial-gradient(30rem 24rem at 24% 760px, rgba(217, 138, 84, 0.10), transparent 65%),
    var(--creme);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

::selection {
  background: var(--beere);
  color: var(--creme);
}

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

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

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

p { margin: 0 0 1em; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--beere);
  text-wrap: balance;
  margin: 0;
}

a { color: var(--beere-aktiv); text-decoration: none; }
a:hover { color: var(--beere); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--beere);
  color: var(--creme);
  padding: 10px 18px;
  border-radius: 0 0 4px 0;
  font-size: 0.95rem;
}
.skip-link:focus-visible { left: 0; }

/* Die Kopfleiste scrollt mit – Sprungziele brauchen nur etwas Luft */
section[id],
article[id],
div[id],
a {
  scroll-margin-top: 24px;
}

/* ---------- Wiederkehrende Bausteine -------------------------- */

/* Alle Knoepfe: Pillenform, gesperrte Versalien */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 999px;
  padding: 15px 32px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.knopf svg { flex: 0 0 auto; }

/* Variante 1: der einzige gefuellte Knopf der Seite (Hero) */
.knopf--voll {
  background: linear-gradient(90deg, var(--knopf-a), var(--knopf-b));
  border: 1px solid transparent;
  color: #FFFFFF;
}
.knopf--voll:hover {
  background: var(--knopf-b);
  color: #FFFFFF;
}

/* Varianten 2 und 3: Outline-Pille, mit und ohne Pfeil */
.knopf--linie {
  background: transparent;
  border: 1px solid var(--knopf-rand);
  color: var(--knopf-rand);
}
.knopf--linie:hover {
  background: var(--knopf-rand);
  color: #FFFFFF;
}

/* Die kurze Kupfer-Schmucklinie unter "Ueber mich" */
.schmucklinie {
  width: 56px;
  height: 2px;
  border: none;
  background: var(--schmuck);
  margin: 26px 0;
}
.schmucklinie--mitte { margin-inline: auto; }

/* Eyebrow ueber den Angebots-Ueberschriften */
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kupfer-text);
  margin: 0 0 14px;
}

.abschnitt { padding-block: clamp(56px, 7vw, 84px); }

h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.15;
}

/* ---------- Kopfleiste ---------------------------------------- */

/* Nicht klebrig und ohne eigenen Grund: das Hero-Aquarell laeuft
   im Entwurf bis in den Kopfbereich hinein. */
.topbar {
  position: relative;
  z-index: 2;
  background: transparent;
}

.topbar-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding-block: clamp(18px, 2.4vw, 30px) 0;
}

.marke {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}
/* Quellaufloesung des freigestellten Logos: 164 px – groesser
   als ~150 px dargestellt wuerde es weich. */
.marke img {
  width: clamp(96px, 11vw, 148px);
  height: auto;
}
.marke-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.marke-name {
  font-family: var(--script-schrift);
  font-size: clamp(2.4rem, 4vw, 3.375rem);
  color: var(--script);
  line-height: 0.9;
}
/* Die Navigation sitzt oben rechts – wie im Entwurf an der
   Oberkante ausgerichtet, nicht mittig zum Logo. */
.topbar-inner > nav { margin-left: auto; padding-top: 6px; }

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topnav a {
  font-size: 0.9375rem;
  color: var(--nav);
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  /* Weicher Creme-Halo: auf dem Cremegrund unsichtbar, hebt die
     rechten Punkte von den satten Stellen des Aquarells ab. */
  text-shadow: 0 1px 2px rgba(251, 243, 234, 0.9), 0 0 10px rgba(251, 243, 234, 0.8);
}
.topnav a:hover { color: var(--beere-aktiv); border-bottom-color: var(--unterstrich); }
.topnav a[aria-current],
.topnav a.aktiv {
  color: var(--beere-aktiv);
  border-bottom-color: var(--unterstrich);
}

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

.held {
  position: relative;
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px);
}

/* Das Aquarell-Artwork: rechts buendig bis an den Seitenrand,
   nach oben in den Kopfbereich hinein (dort weich ausgeblendet),
   unten hart an der Sektionsgrenze – wie im Entwurf.
   Zwei Masken: der Kasten blendet nach links aus, das Bild selbst
   nach oben (Schnittmenge ergibt die weiche Ecke). */
.held-kunst {
  position: absolute;
  top: -200px;
  /* Rechte Kante buendig mit der Inhaltsspalte: Zentrierungsrand
     des wrap plus dessen Innenabstand (100% = Sektionsbreite). */
  right: max(var(--pad), calc((100% - var(--wrap-max)) / 2 + var(--pad)));
  bottom: 0;
  width: min(57vw, 830px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%, #000 94%, rgba(0, 0, 0, 0.5) 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 45%, #000 94%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
/* Wie im Entwurf laeuft das Aquarell satt bis an die Oberkante;
   nur unter den Nav-Punkten (linke Bildhaelfte) bleibt es weich. */
.held-kunst img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0, #000 28%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0, #000 28%);
}

.held-inhalt {
  position: relative;
  z-index: 1;
  max-width: 44%;
  padding-top: clamp(8px, 2vw, 40px);
}

.held h1 {
  /* Am Entwurf nachgemessen: ~53px bei 1440, enger Zeilenfall */
  font-size: clamp(2.25rem, 3.7vw, 3.35rem);
  line-height: 1.15;
  letter-spacing: 0.005em;
}

.held-text {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.75;
  margin: clamp(20px, 2.6vw, 34px) 0 0;
  text-wrap: pretty;
}

.held-knopf { margin-top: clamp(24px, 3vw, 40px); }

/* ---------- Fuer Sie da (drei Spalten) ------------------------- */

/* Heller Cremegrund, an beiden Aussenraendern laufen rosa und
   pfirsichfarbene Aquarellflaechen herein. */
.fuer-sie {
  background:
    radial-gradient(40rem 34rem at -6% 55%, rgba(234, 202, 197, 0.75), transparent 62%),
    radial-gradient(38rem 48rem at 103% 42%, rgba(240, 135, 155, 0.42), transparent 62%),
    radial-gradient(24rem 26rem at 99% 88%, rgba(217, 138, 84, 0.32), transparent 65%),
    var(--flaeche);
}

.fuer-sie-kopf {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.fuer-sie-kopf p {
  margin: 18px 0 0;
  line-height: 1.75;
}

.spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(36px, 4.5vw, 56px);
  text-align: center;
}
/* hauchduenne vertikale Trennlinien zwischen den Spalten */
.spalte { padding-inline: clamp(20px, 3vw, 48px); }
.spalte + .spalte { border-left: 1px solid var(--trenner); }

/* Einheitliche Icon-Hoehe: so sitzen die drei Spaltentitel
   trotz unterschiedlich breiter Zeichnungen auf einer Linie */
.spalte-zeichen {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(54px, 5.2vw, 68px);
  margin-bottom: 22px;
}
.spalte-zeichen img {
  height: 100%;
  width: auto;
}

.spalte h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.25;
}
.spalte p {
  margin: 12px auto 0;
  max-width: 32ch;
  font-size: 1rem;
  line-height: 1.65;
}

/* ---------- Ueber mich (Band) ---------------------------------- */

/* Links die warme Beige-Aquarellzone mit dem Text, rechts das
   Foto, ueber Masken weich in den Grund uebergeblendet. */
.ueber {
  position: relative;
  background:
    radial-gradient(44rem 30rem at 6% 30%, rgba(249, 231, 219, 0.95), transparent 70%),
    radial-gradient(28rem 22rem at 2% 90%, rgba(234, 202, 197, 0.5), transparent 62%),
    var(--beige);
}

/* Der wrap ist der Bezugsrahmen des Fotos: so endet es rechts an
   der Inhaltskante und waechst auf breiten Schirmen nicht weiter. */
.ueber .wrap { position: relative; }

.ueber-foto {
  position: absolute;
  top: 0;
  right: var(--pad);
  bottom: 0;
  width: 66%;
  /* rechts loest sich das Foto wie im Entwurf vollstaendig im
     Aquarellgrund auf */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24%, #000 78%, transparent 100%);
  pointer-events: none;
}
/* Das Smartphone-Foto ist kontrastiger als die Aquarellwelt –
   leicht entsaettigt und aufgehellt, damit es sich einfuegt. */
.ueber-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(249, 231, 219, 0.16);
}
.ueber-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 30%;
  filter: saturate(0.84) contrast(0.94) brightness(1.04);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0, #000 14%, #000 88%, rgba(0, 0, 0, 0.65) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0, #000 14%, #000 88%, rgba(0, 0, 0, 0.65) 100%);
}

.ueber-inhalt {
  position: relative;
  z-index: 1;
  max-width: min(38%, 520px);
  padding-block: clamp(48px, 6vw, 72px);
}
.ueber-inhalt .schmucklinie { margin-top: 22px; }
.ueber-text {
  margin: 0 0 30px;
  max-width: 36ch;
  line-height: 1.75;
  text-wrap: pretty;
}

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

/* Das textfreie Magenta-Aquarell traegt das Zitat als Overlay. */
.zitat {
  background: url("../img/zitat-band.jpg") center / cover no-repeat #C94F7B;
  text-align: center;
  padding-block: clamp(44px, 5.5vw, 72px);
}
.zitat blockquote { margin: 0 auto; max-width: 760px; }

.zitat p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.45;
  color: #FFFFFF;
  /* sichert die Lesbarkeit auf den hellen Stellen der Textur */
  text-shadow: 0 1px 14px rgba(140, 30, 70, 0.45);
  margin: 0;
  text-wrap: balance;
}

/* ---------- Drei Angebots-Karten ------------------------------- */

.angebote {
  position: relative;
  background: var(--flaeche);
}
/* Auslauf des Magenta-Aquarells als schmaler Farbsaum oben */
.angebote::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(201, 79, 123, 0.16), transparent);
  pointer-events: none;
}
/* Die Kartenreihe laeuft im Entwurf fast ueber die volle Breite */
.angebote .wrap { max-width: 1366px; }

.karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 56px);
}

/* Bildspalte 40 statt 44 %: die Textspalte muss den einzeiligen
   Titel "Trauerbegleitung" tragen (overflow:hidden schneidet sonst) */
.karte {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  background: var(--karte);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(90, 50, 50, 0.10);
  overflow: hidden;
  min-height: 230px;
}

/* Bild links, die rechte Bildkante weich in den Kartengrund */
.karte-bild {
  -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%);
  mask-image: linear-gradient(to right, #000 72%, transparent 100%);
}
.karte-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karte-inhalt {
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 30px) clamp(14px, 1.6vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Deckel 1.4rem: "Trauerbegleitung" ist ein unbrechbares Wort und
   muss bei jeder Kartenbreite in die Textspalte passen */
.karte h3 {
  font-size: clamp(1.3125rem, 1.55vw, 1.4rem);
  line-height: 1.2;
}
.karte p {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 24ch;
}
/* Zierlicher als die grossen Pillen – die nowrap-Beschriftung
   muss auch in der schmalen Kartenspalte Platz finden */
.karte .knopf {
  margin-top: auto;
  padding: 11px 16px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  gap: 8px;
  white-space: nowrap;
}
.karte-inhalt > p { margin-bottom: 22px; }

/* ---------- Ein paar Worte ueber mich -------------------------- */

.ueber-mehr {
  background:
    radial-gradient(30rem 26rem at 104% 20%, rgba(234, 202, 197, 0.4), transparent 62%),
    var(--creme);
}

.mein-weg-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.mein-weg-text { max-width: 66ch; }
.mein-weg-text h2 { margin-bottom: 0; }
.mein-weg-text .schmucklinie { margin-top: 22px; }
.mein-weg-knopf { margin-top: 2.2em; }

/* Ausbildungs-Siegel (EQzellent) */
.siegel {
  text-align: center;
  padding-top: clamp(8px, 4vw, 56px);
}
.siegel img {
  width: min(100%, 220px);
  height: auto;
}
.siegel p {
  margin: 12px auto 0;
  max-width: 24ch;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------- Angebots-Abschnitte -------------------------------- */

/* Rhythmus hinter den Karten: Creme, Flaeche, Creme */
.angebot {
  background:
    radial-gradient(28rem 30rem at -4% 30%, rgba(234, 202, 197, 0.35), transparent 62%),
    var(--creme);
}
.angebot--flaeche {
  background:
    radial-gradient(30rem 34rem at 103% 55%, rgba(240, 135, 155, 0.18), transparent 62%),
    var(--flaeche);
}

.angebot-kopf {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
/* Auf den Unterseiten ist der Sektionskopf eine h1 */
.angebot-kopf h1 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.15;
}
.angebot-untertitel {
  margin: 0;
  font-size: 1.125rem;
}

.angebot-text {
  max-width: 66ch;
  margin: clamp(28px, 3.5vw, 44px) auto 0;
}
.angebot-text h2,
.angebot-text h3 {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  margin: 1.6em 0 0.5em;
}
.angebot-text p:last-child { margin-bottom: 0; }

/* Zwei gleichwertige Wege nebeneinander (mit/ohne Pferd) */
.zweiklang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  max-width: 1020px;
  margin: clamp(36px, 4.5vw, 56px) auto 0;
}
.zweiklang h2,
.zweiklang h3 {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  margin-bottom: 0.6em;
}
.zweiklang > div + div {
  border-left: 1px solid var(--trenner);
  padding-left: clamp(32px, 4vw, 64px);
}
.zweiklang p:last-child { margin-bottom: 0; }

/* Poetischer Einschub */
.poesie {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.75;
  color: var(--beere);
  max-width: 640px;
  margin: clamp(36px, 4.5vw, 56px) auto;
  text-wrap: balance;
}

/* Verweis auf den rechtlichen Hinweis */
.hinweis-recht {
  margin-top: 2em;
  font-size: 0.9375rem;
}
.hinweis-recht a {
  color: var(--knopf-rand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Fusszeile ------------------------------------------ */

.fuss { background: var(--fuss-grund); color: var(--fuss-text); }

.fuss-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px clamp(32px, 4vw, 64px);
  padding-block: clamp(40px, 5vw, 64px);
}

.fuss-marke {
  display: flex;
  align-items: center;
  gap: 16px;
}
.fuss-marke img { width: 96px; height: auto; }
.fuss-marke .marke-name { font-size: 2.25rem; }

.fuss-nav { display: flex; gap: clamp(32px, 4vw, 72px); padding-top: 10px; }
.fuss-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.fuss-nav a { color: var(--fuss-text); }
.fuss-nav a:hover,
.fuss-nav a.aktiv { color: var(--beere-aktiv); }

/* Die Kontaktspalte darf schmaler werden als ihr laengster Eintrag
   (die Ortszeile bricht dann um); rutscht sie in eine eigene Zeile,
   fuellt sie diese und steht links statt rechts in der Luft. */
.fuss-kontakt {
  font-style: normal;
  display: grid;
  gap: 14px;
  padding-top: 10px;
  margin-left: auto;
  flex: 1 1 240px;
  max-width: max-content;
}
.fuss-kontakt > div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.fuss-kontakt svg { flex: 0 0 auto; margin-top: 3px; color: var(--fuss-icon); }
.fuss-kontakt a { color: var(--fuss-text); overflow-wrap: anywhere; }
.fuss-kontakt a:hover { color: var(--beere-aktiv); }

.fuss-leiste {
  background: var(--fuss-leiste);
  text-align: center;
  font-size: 0.9rem;
  padding-block: 14px;
}
.fuss-leiste p { margin: 0; }
.fuss-leiste a { color: var(--fuss-text); text-decoration: underline; text-underline-offset: 3px; }
.fuss-leiste a:hover { color: var(--beere); }

/* ---------- Rechtsseiten --------------------------------------- */

.rechtsseite {
  padding-block: clamp(48px, 8vw, 80px);
  max-width: 800px;
}
.rechtsseite h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 26px;
}
.rechtsseite h2 {
  font-size: 1.5rem;
  margin: 38px 0 12px;
}
.rechtsseite p { max-width: 68ch; }

/* Der Kontakt-Knopf der Rechtsseiten in der Kopfleiste */
.topbar .knopf { margin-left: 8px; padding: 12px 26px; font-size: 0.8125rem; }

/* ---------- Einstiegs-Animationen ------------------------------ */

html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .knopf { transition: none; }
}

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

@media (max-width: 1279.98px) {
  /* wrap = Viewport: das Foto etwas zuruecknehmen, damit der
     Ueber-mich-Text frei bleibt */
  .ueber-foto { width: 60%; }
}

@media (max-width: 1199.98px) {
  /* 3 -> 1: dreispaltig reicht die Textspalte nicht mehr fuer
     Titel und Knopf; zwei Karten plus Restzeile saehen unruhig aus */
  .karten {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
    margin-inline: auto;
  }
}

@media (max-width: 1023.98px) {
  /* Textspalte darf breiter werden, Artwork rueckt zusammen */
  .held-inhalt { max-width: 52%; }
  .held-kunst { width: 52vw; }
  /* Die umgebrochene Nav rutscht hier tiefer ins Artwork –
     oben deshalb wieder blasser ausblenden (Lesbarkeit 4,5:1) */
  .held-kunst img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 28%, #000 60%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.18) 28%, #000 60%);
  }
}

@media (max-width: 859.98px) {
  /* Hero: Text oben, Artwork als eigenes Bildfeld darunter.
     flex + order, weil das Artwork im DOM vor dem Text steht. */
  .held { display: flex; flex-direction: column; padding-bottom: 0; }
  .held-inhalt { max-width: 36rem; }
  .held-kunst {
    order: 2;
    position: static;
    width: 100%;
    height: clamp(260px, 62vw, 420px);
    margin-top: 36px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .held-kunst img {
    object-position: right center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
  }

  .spalten { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .spalte + .spalte { border-left: none; padding-top: 40px; border-top: 1px solid var(--trenner); }

  /* Ueber mich: Foto als eigenes Bildfeld unter dem Text */
  .ueber .wrap { display: flex; flex-direction: column; }
  .ueber-inhalt { max-width: 36rem; padding-bottom: 0; }
  .ueber-foto {
    order: 2;
    position: relative; /* nicht static: ::after (warmer Schleier) braucht den Bezug */
    right: auto;        /* der Desktop-Versatz wuerde das relative Foto verschieben */
    width: 100%;
    height: clamp(260px, 60vw, 400px);
    margin-top: 36px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ueber-foto img {
    object-position: 60% 30%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  }

  /* Mein Weg: Siegel unter den Text */
  .mein-weg-inhalt { grid-template-columns: minmax(0, 1fr); }
  .siegel { padding-top: 8px; }

  /* Zweiklang stapeln, Trennung als Linie oben */
  .zweiklang { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .zweiklang > div + div {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--trenner);
    padding-top: 36px;
  }
}

/* Pillen-Navigation schon ab Tablet-Hochkant (768/810/834px):
   dort ist die Seite im Touch-Modus, Textlinks waeren zu fummelig */
@media (max-width: 859.98px) {
  .topbar-inner { align-items: center; }
  .topbar-inner > nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    min-width: 0;
    padding-top: 14px;
  }
  /* Die Pillen duerfen umbrechen: so bleibt jeder Eintrag sichtbar,
     ohne unsichtbaren Scrollbereich. */
  .topnav { gap: 8px; }
  /* inline-block: sonst zaehlen Polster und Rahmen der Pillen nicht
     zur Zeilenhoehe */
  .topnav a {
    display: inline-block;
    border: 1px solid var(--trenner);
    border-radius: 999px;
    padding: 6px 14px;
    background: var(--creme);
    font-size: 0.875rem;
  }
  .topnav a:hover,
  .topnav a.aktiv,
  .topnav a[aria-current] { border-color: var(--unterstrich); }
  .topnav a:focus-visible { outline-offset: -2px; }

  /* Der Kontakt-Knopf der Rechtsseiten tritt zurueck, sobald die
     Navigation eine eigene Zeile bekommt. */
  .topbar .knopf { display: none; }

  .fuss-kontakt { margin-left: 0; }
}

@media (max-width: 539.98px) {
  .marke { gap: 12px; }

  /* Die lange Erstgespraech-Pille: kompakter setzen, damit die
     Beschriftung einzeilig bleibt; falls sie doch bricht, mittig */
  .mein-weg-knopf .knopf {
    justify-content: center;
    text-align: center;
    line-height: 1.45;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    padding: 13px 24px;
  }
  .marke-name { font-size: 2.1rem; }

  .karte { grid-template-columns: minmax(0, 1fr); }
  /* Bild oben statt links: unten weich in den Kartengrund */
  .karte-bild {
    height: 180px;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .karte-inhalt { padding: 6px 24px 26px; }

  .fuss-nav { flex-direction: column; gap: 14px; }
}

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

@media print {
  html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body { background: none; }
  .skip-link,
  .topnav,
  .topbar .knopf,
  .held-kunst,
  .zitat { display: none; }
  .fuer-sie,
  .ueber,
  .ueber-mehr,
  .angebote,
  .angebot,
  .angebot--flaeche,
  .fuss,
  .fuss-leiste { background: none; }
  .karte { box-shadow: none; border: 1px solid var(--trenner); }
}