/* ============================================================
   TURNUS – Kunst im Wechsel · Dr. Ruth Kaiser
   Eigenständiges Stylesheet (lädt NICHT styles.css mit).
   Gleiche Farbfamilie + gleiche Schriften wie die Texter-Seite,
   aber deutlich moderner: große Displaytypo, Pill-Formen,
   viel Weißraum, ein dunkler Kontrastblock.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Farben – Basis identisch zur Texter-Seite */
  --paper:       #FAF7F2;
  --surface:     #FFFFFF;
  --tint:        #F2EDE3;
  --ink:         #1B1815;
  --text:        #403B34;
  --text-soft:   #6B645B;
  --line:        #E5DED2;
  --accent:      #A03E1C;
  --accent-deep: #7F2F13;
  --accent-soft: #E8C3AE;

  /* Zusätzlich für den dunklen Block */
  --ink-soft:    #2A2622;
  --on-ink:      #EFE9DF;
  --on-ink-dim:  #A79E92;

  /* Typografie – identisch zur Texter-Seite */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout – weiter und luftiger als die Texter-Seite */
  --container:  1280px;
  --sp-section: clamp(5.5rem, 12vw, 10rem);
  --radius-sm:  14px;
  --radius-md:  22px;
  --radius-lg:  32px;
  --header-h:   72px;

  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-mask: cubic-bezier(.16, .84, .30, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

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

/* ---------- Utilities ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

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

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 300;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Typografie ---------- */
h1, h2, h3 { color: var(--ink); text-wrap: balance; }

/* Display: Inter, sehr groß, eng laufend → moderner Ausdruck.
   Bewusst KEINE zusätzlichen Schriftschnitte, damit die Schrift-URL
   identisch zur Texter-Seite bleibt und aus dem Browser-Cache kommt. */
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

h2.display { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.serif-accent {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
}

p { max-width: 62ch; }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.25rem); color: var(--text-soft); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p.lead { margin-top: 1.25rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease-out),
              color .25s var(--ease-out),
              border-color .25s var(--ease-out),
              transform .25s var(--ease-out);
}

.btn-primary { background: var(--ink); color: var(--paper); }

.btn-ghost {
  background: rgba(27, 24, 21, .045);
  color: var(--ink);
}

.btn-sm { min-height: 42px; padding: 0 1.15rem; font-size: .875rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s var(--ease-out);
}
.link-arrow span { display: inline-block; transition: transform .25s var(--ease-out); }

.link-plain {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ============================================================
   HEADER – schwebende Pill-Leiste
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px clamp(1rem, 4vw, 2rem) 0;
}

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 58px;
  padding-inline: 10px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color .3s var(--ease-out),
              border-color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.site-header.scrolled .header-inner {
  background: rgba(250, 247, 242, .78);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-color: var(--line);
  box-shadow: 0 6px 28px -18px rgba(27, 24, 21, .5);
}

.wordmark {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-left: .6rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark-mark {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Slider-Umschalter (Kunst ⇄ Texte) ---------- */
.switch {
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px;
  background: rgba(27, 24, 21, .06);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.switch-knob {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 2px 10px -4px rgba(27, 24, 21, .45);
  /* Ruhelage: unter „Kunst“ (zweite Position), da aktive Seite */
  transform: translateX(100%);
  transition: transform .38s var(--ease-out);
}
.switch-opt {
  position: relative;
  z-index: 1;
  min-width: 78px;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  color: var(--text-soft);
  transition: color .3s var(--ease-out);
}
.switch-opt[aria-current="page"] { color: var(--ink); }

/* ---------- Kopfzeilen-Ende (nur der CTA) ---------- */
.header-end {
  justify-self: end;
  display: flex;
  align-items: center;
}

/* Auf sehr schmalen Geräten hätten Wortmarke, Umschalter und CTA
   nicht nebeneinander Platz – der CTA entfällt dort, im Hero und in
   jedem Abschnitt steht er weiterhin. */
@media (max-width: 520px) {
  .header-cta { display: none; }
}

@media (max-width: 480px) {
  .switch-opt { min-width: 62px; padding-inline: .6rem; font-size: .78rem; }
  .wordmark { font-size: .82rem; letter-spacing: .12em; }
}

/* Sehr schmale Geräte (iPhone SE & Co.): Kopfzeile weiter zusammenziehen,
   damit Wortmarke + Umschalter + Menübutton sicher nebeneinander passen. */
@media (max-width: 400px) {
  .header-inner { gap: .5rem; padding-inline: 6px; }
  .switch-opt { min-width: 52px; padding-inline: .45rem; font-size: .74rem; }
  .wordmark { font-size: .76rem; letter-spacing: .08em; padding-left: .35rem; }
  .wordmark-mark { width: 7px; height: 7px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  /* clip statt hidden: hidden würde einen Scroll-Container erzeugen und damit
     das position: sticky der Bühne aushebeln. clip schneidet genauso ab,
     ohne Scroll-Container zu sein. */
  overflow: clip;
}

/* >>> BÜHNE <<<
   Vier Zeilen über die volle Bildschirmhöhe:
     1  Wortmarke „Turnus"
     2  erste Überschriftszeile
     3  Bildband (1fr – nimmt allen übrigen Platz)
     4  zweite Überschriftszeile, sitzt dadurch am unteren Bildrand
   Die <h1> spannt über Zeile 2–4 und gibt ihre beiden Zeilen per subgrid
   an Zeile 2 und 4 weiter. So bleibt die Überschrift ein einziges Element
   (Semantik/SEO), obwohl optisch das Bild dazwischen liegt. */
.hero-stage {
  /* --reveal steht bewusst HIER und nicht am Band: Custom Properties vererben
     nur nach unten, und sowohl das Band als auch die Überschrift (Geschwister)
     müssen den Wert sehen. turnus.js schreibt ihn auf dieses Element. */
  --reveal: 0;
  position: relative;
  z-index: 1;
  display: grid;
  /* Genau EINE Spalte: die <h1> überspannt Zeile 2–4, ohne diese Angabe
     würde das Bildband in eine implizite zweite Spalte rutschen. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  row-gap: clamp(1rem, 2.6vh, 2.25rem);
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(1rem, 3.5vh, 2.5rem));
  padding-bottom: clamp(1.25rem, 4vh, 3rem);
  text-align: center;
}

/* >>> HINTERGRUND-EBENE <<<
   Die Partikel aus dem Vorbild sind bewusst NICHT umgesetzt.
   Diese eine Ebene ist der Platz, an dem später etwas anderes
   eingesetzt wird (Video, Grafik, Verlauf …) – ohne dass am
   restlichen Hero etwas geändert werden muss. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 34%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(48% 42% at 12% 82%, rgba(232, 195, 174, .3) 0%, rgba(232, 195, 174, 0) 72%),
    radial-gradient(42% 40% at 88% 16%, rgba(160, 62, 28, .07) 0%, rgba(160, 62, 28, 0) 70%);
}

/* Textzeilen bleiben auf Containerbreite, das Bildband darf randlos werden. */
.hero-mark,
.hero-line {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.hero-mark {
  /* Als Grid-Item wird inline-flex zu flex – deshalb explizit zentrieren. */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-mark::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* Überschrift spannt über Zeile 2–4 und reicht die Zeilen per subgrid
   an die äußeren Zeilen durch – Zeile 3 (das Bildband) bleibt frei. */
.hero-title {
  grid-row: 2 / -1;
  grid-column: 1;
  display: grid;
  grid-template-rows: subgrid;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.7rem, 8.2vw, 6.4rem);
  line-height: 1.015;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-title .serif-accent { letter-spacing: -0.03em; font-style: normal; }

.hero-line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-line-inner { display: block; }

.hero-line--top    { grid-row: 1; align-self: start; }
.hero-line--bottom { grid-row: 3; align-self: end; }

/* >>> BILDBAND <<<
   Randlos über die volle Breite. Das Bild wird wie eine ganzseitige
   Aufnahme behandelt: `cover` zeigt nur den Ausschnitt, der zwischen die
   beiden Überschriftszeilen passt. */
.hero-band {
  /* --band-inset-max ist die Einrückung im Startzustand (Scrollposition 0).
     --reveal fährt turnus.js beim Scrollen von 0 auf 1 und öffnet das Band
     dabei bis auf die volle Breite – ein „smooth scroll hero“ ohne Framework.
     Weil die Bildbreite unten als (Bandbreite + 2 × Einrückung) definiert ist,
     bleibt das Bild dabei exakt stehen; es wandert nur die Blende auf. */
  --band-inset-max: clamp(3rem, 12vw, 10rem);
  --band-inset: calc(var(--band-inset-max) * (1 - var(--reveal)));
  grid-row: 3;
  grid-column: 1;
  position: relative;
  margin-inline: var(--band-inset);
  min-height: clamp(8rem, 22vh, 26rem);
  overflow: hidden;
  background: var(--tint);
}
/* Das Bild wird bewusst NICHT auf die (schmalere) Box skaliert – sonst
   berechnet object-fit: cover die Zoomstufe neu und vergrößert/verkleinert
   das Bild. Stattdessen bekommt das <img> exakt die Breite/Position, die es
   auch ohne Einrückung hätte (Box + beidseitig --band-inset zurückaddiert).
   So bleibt der Zuschnitt/die Zoomstufe identisch zur randlosen Variante –
   die schmalere Elternbox schneidet per overflow: hidden nur die Ränder ab,
   dort erscheint der Papierhintergrund der Seite. */
/* WICHTIG: Das Band darf beim Einblenden KEIN transform bekommen.
   Ein transformiertes Element wird zum Containing Block für absolut
   positionierte Kinder – das Bild würde sein top: var(--slot-top) dann
   gegen das Band statt gegen die Bühne rechnen, um genau --slot-top zu
   tief starten und am Ende der Einblendung sichtbar nach oben springen.
   Deshalb blendet das Band nur über die Deckkraft ein (opacity erzeugt
   keinen Containing Block). */
html.js .hero-band.hero-fade { transform: none; }

.hero-band-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--band-inset));
  width: calc(100% + 2 * var(--band-inset));
  /* Der globale Reset (img { max-width: 100% }, Zeile 67) würde die
     bewusst überbreite Box sonst wieder auf 100% der Eltern-Box kappen. */
  max-width: none;
  height: 100%;
  object-fit: cover;
  /* --band-pan: dezente vertikale Parallaxe innerhalb des Ausschnitts.
     Startwert 46% = unveränderter Bildausschnitt wie bisher. */
  object-position: center var(--band-pan, 46%);
}

/* Untertitel + Buttons unterhalb der Bühne */
.hero-follow { margin-top: clamp(2.5rem, 6vh, 4.5rem); }

.hero-follow-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
}

.hero-sub {
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.55vw, 1.2rem);
  color: var(--text-soft);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.hero-note {
  margin: 1.5rem auto 0;
  font-size: .84rem;
  color: var(--text-soft);
}

/* Englische Zeile unter den Buttons. Ihren alten Platz in der unteren
   Hero-Ecke hält jetzt die zweite Überschriftszeile. */
.hero-tagline {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.hero-tagline::before {
  content: "";
  width: clamp(28px, 5vw, 54px);
  height: 1px;
  background: var(--accent);
}
/* Alles AUSSER echtem Desktop: ruhiges Layout ohne Scroll-Animation.
   Die Bedingung ist bewusst das exakte Gegenstück zum Desktop-Block weiter
   unten (per `not`), damit kein Gerät zwischen die Raster fällt – etwa ein
   großes Tablet im Querformat, das breiter als 1024px ist.

   Ohne diese Regel würde das Band die freie Zeile füllen und das querformatige
   Bild extrem hineinzoomen. Mit eigenem Seitenverhältnis bleibt der Raum als
   Raum erkennbar. */
@media not all and (min-width: 1025px) and (pointer: fine) {
  .hero-band {
    align-self: center;
    min-height: 0;
    aspect-ratio: 2752 / 1355;
  }
}

/* Nur Telefone: zusätzlich ohne seitliche Einrückung – auf dieser Breite
   ließe der eingerückte Ausschnitt kaum noch etwas vom Raum erkennen. */
@media (max-width: 700px) {
  .hero-band { --band-inset-max: 0px; }
}

/* ============================================================
   NUR RICHTIGER DESKTOP: Bild wächst beim Scrollen auf Vollbild
   ------------------------------------------------------------
   Bedingung: breit UND Mauszeiger (pointer: fine). Die Breite allein
   genügt nicht – ein großes Tablet im Querformat ist breiter als 1024px.
   Tablets melden pointer: coarse und bleiben deshalb außen vor.
   .hero-pin ist höher als der Bildschirm, .hero-stage bleibt darin
   per sticky stehen. Über diese Extrastrecke fährt turnus.js --reveal
   von 0 auf 1. Das <img> wird dabei aus dem Bandausschnitt heraus auf
   die volle Bühnengröße aufgezogen:

     --slot-top / --slot-h  Position + Höhe des Bandes in der Bühne
     --stage-h              Höhe der Bühne (= Bildschirmhöhe)

   Diese drei Werte misst turnus.js (Layout kennt nur das CSS-Grid).
   Alles ist an html.js gebunden: ohne JS bleibt das bisherige Layout.
   ============================================================ */
@media (min-width: 1025px) and (pointer: fine) {
  html.js .hero-pin {
    /* 100svh Bühne + Strecke, über die das Bild aufgeht */
    --pin-extra: 90svh;
    height: calc(100svh + var(--pin-extra));
  }

  html.js .hero-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
  }

  /* Das Band ist jetzt nur noch Platzhalter im Grid: Es hält die Zeile
     zwischen den Überschriften frei. Sichtbar ist allein das <img>, das
     absolut in der Bühne liegt (deshalb hier position: static). */
  html.js .hero-band {
    position: static;
    overflow: visible;
    background: none;
  }

  html.js .hero-band-img {
    /* Bezug ist jetzt die Bühne, nicht mehr das Band. Bei --reveal: 0
       deckt sich die Box exakt mit dem Band – gleicher Startzustand wie
       bisher; die seitliche Einrückung macht statt overflow das clip-path. */
    top: calc(var(--slot-top, 0px) * (1 - var(--reveal)));
    left: 0;
    width: 100%;
    height: calc(
      var(--slot-h, 0px) +
      (var(--stage-h, 0px) - var(--slot-h, 0px)) * var(--reveal)
    );
    clip-path: inset(0 var(--band-inset) 0 var(--band-inset));
  }

  /* Überschrift blendet aus, während das Bild sie überwächst. */
  html.js .hero-title { opacity: calc(1 - var(--reveal)); }

  /* Verlaufsebene nur über dem ersten Bildschirm, nicht über die
     gesamte (jetzt viel höhere) Hero-Sektion strecken. */
  html.js .hero-bg { bottom: auto; height: 100svh; }
}

/* Reduzierte Bewegung: kein Pin, kein Aufziehen – zurück auf das
   ruhige Layout. Muss NACH dem Desktop-Block stehen, um zu gewinnen. */
@media (prefers-reduced-motion: reduce) {
  html.js .hero-pin { height: auto; }
  html.js .hero-stage { position: static; height: auto; min-height: 100svh; }
  html.js .hero-band { position: relative; overflow: hidden; }
  html.js .hero-band-img {
    top: 0;
    height: 100%;
    left: calc(-1 * var(--band-inset));
    width: calc(100% + 2 * var(--band-inset));
    clip-path: none;
  }
  html.js .hero-title { opacity: 1; }
}

/* Rückfallebene für Browser ohne subgrid: einfache gestapelte Reihenfolge
   (Wortmarke, ganze Überschrift, Bildband) statt der geteilten Bühne. */
@supports not (grid-template-rows: subgrid) {
  .hero-stage { display: block; }
  .hero-title { margin-top: clamp(1rem, 2.6vh, 2.25rem); }
  .hero-band {
    min-height: clamp(12rem, 42vh, 30rem);
    margin-top: clamp(1.5rem, 4vh, 3rem);
  }
}

/* ---------- Hero-Einblendung beim Laden ---------- */
html.js .hero-line-inner,
html.js .hero-fade {
  opacity: 0;
  transform: translateY(105%);
}
html.js .hero-fade { transform: translateY(14px); }

html.js .hero.is-ready .hero-line-inner,
html.js .hero.is-ready .hero-fade {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-mask) var(--d, 0ms),
              transform .95s var(--ease-mask) var(--d, 0ms);
}

/* ---------- Scroll-Reveal ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}
html.js [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out) var(--d, 0ms),
              transform .7s var(--ease-out) var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero-line-inner,
  html.js .hero-fade,
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .switch-knob { transition: none; }
}

/* ============================================================
   SEKTIONEN
   ============================================================ */
.section { padding-block: var(--sp-section); }
.section-tint { background: var(--tint); }

/* Statement */
.statement { padding-block: clamp(4rem, 9vw, 7.5rem); }
.statement-text {
  max-width: 24ch;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.statement-text .serif-accent { color: var(--accent); }

/* ---------- Paket-Karten ---------- */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  /* `translate` statt `transform` – Begründung siehe .rhythm-card. */
  transition: translate .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pkg-card:hover {
    translate: 0 -3px;
    box-shadow: 0 24px 48px -34px rgba(27, 24, 21, .55);
  }
}
.pkg-index {
  margin-bottom: 1.75rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--text-soft);
}
.pkg-card h3 { margin-bottom: .6rem; }
.pkg-card p { font-size: .95rem; color: var(--text-soft); }

.pkg-tag {
  align-self: flex-start;
  margin-top: 1.25rem;
  padding: .3rem .7rem;
  border: 1px dashed var(--accent-soft);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Galerie ---------- */
.gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.gallery-hint {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--text-soft);
}

.gallery-rail {
  display: flex;
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  padding-bottom: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  overscroll-behavior-x: contain;
}
.gallery-rail::-webkit-scrollbar { height: 6px; }
.gallery-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.art {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

/* Einheitliche Höhe, Breite ergibt sich aus dem Format –
   so bleibt die untere Kante der Reihe ruhig. */
.art-frame {
  position: relative;
  height: clamp(230px, 34vw, 440px);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--tint);
}
.art-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.art--portrait .art-frame { aspect-ratio: 3 / 4; }
.art--landscape .art-frame { aspect-ratio: 4 / 3; }

/* Scrim, damit die weiße Beschriftung auch auf hellen
   Werken (z. B. „Ozean“, „Harmonie“) lesbar bleibt. */
.art-frame::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 78%;
  height: 46%;
  background: linear-gradient(150deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.art-caption {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  padding: .8rem .95rem;
  color: #fff;
  font-size: .74rem;
  line-height: 1.45;
  letter-spacing: .03em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.art-caption b {
  display: block;
  font-weight: 600;
  letter-spacing: .02em;
}
.art-caption span { display: block; opacity: .88; }

/* ---------- Turnus / Rhythmus (dunkler Kontrastblock) ---------- */
.rhythm {
  background: var(--ink);
  color: var(--on-ink);
}
.rhythm h2, .rhythm h3 { color: var(--on-ink); }
.rhythm .eyebrow { color: var(--accent-soft); }
.rhythm .lead { color: var(--on-ink-dim); }

.rhythm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(.85rem, 1.6vw, 1.25rem);
}

.rhythm-card {
  position: relative;
  isolation: isolate;      /* hält den Lichtschein in der Karte */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--ink-soft);
  border: 1px solid rgba(239, 233, 223, .12);
  border-radius: var(--radius-md);
  /* Angehoben wird über `translate`, NICHT über `transform`: die Karten
     tragen data-reveal, und `html.js [data-reveal].in { transform: none }`
     ist spezifischer als jede :hover-Regel hier – über `transform` bliebe
     die Karte deshalb stehen. `translate` ist eine eigene Eigenschaft und
     kommt der Reveal-Animation nicht in die Quere. */
  transition: border-color .5s var(--ease-out), translate .5s var(--ease-out);
}

/* Registrierte Custom Properties: nur dadurch sind --px/--py für den
   Browser interpolierbar und lassen sich per transition weich führen.
   Der Schein folgt dem Zeiger deshalb mit leichter Verzögerung, statt
   hart an ihm zu kleben – das nimmt der Bewegung die Aufdringlichkeit.
   Ohne @property-Unterstützung springt er einfach mit (kein Fehler). */
@property --px {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --py {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 50%;
}

/* Signature-Moment: die Kartenkante leuchtet dort auf, wo der Zeiger ihr
   am nächsten ist – keine Füllung mehr in der Mitte, nur der Rand selbst.
   Funktioniert nur hier, weil der Block dunkel ist – auf dem hellen
   Papier der übrigen Abschnitte wäre ein Aufhellen unsichtbar.
   --px/--py setzt turnus.js; ohne JS bleibt die Mitte des Rings betont.

   Technik: `padding` legt die Ringdicke fest (deckt sich mit dem echten
   1px-Rahmen der Karte), die Maske blendet die Innenfläche aus
   (mask-composite: exclude) – übrig bleibt nur der schmale Rand. Der
   Radius ist bewusst kleiner als die Karte: nur die dem Zeiger nahe
   Kante wird hell, die gegenüberliegende bleibt dunkel. */
.rhythm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  opacity: 0;
  background: radial-gradient(9rem 9rem at var(--px) var(--py),
              rgba(232, 195, 174, .9), rgba(232, 195, 174, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}

/* Browser ohne mask-composite: exclude (selten) bekommen die alte,
   gleichmäßige Randaufhellung zurück statt einer kaputten Fläche. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .rhythm-card::before { display: none; }
}

/* Hover bewusst hinter (hover: hover) – sonst bleibt der Zustand
   auf Touchgeräten nach dem Antippen hängen. */
@media (hover: hover) and (pointer: fine) {
  /* ACHTUNG Spezifität: `html.js [data-reveal].in` setzt `transition` als
     Kurzschreibweise und ist spezifischer als `.rhythm-card` – es würde
     jede Übergangsliste hier restlos verwerfen (Rahmen, Anhebung und
     Lichtposition sprängen dann hart). Deshalb ein Selektor, der sicher
     gewinnt, und darin Reveal UND Hover in EINER Liste; ein Element kann
     nur eine `transition` haben. */
  html.js .rhythm-card[data-reveal].in {
    transition: opacity .7s var(--ease-out) var(--d, 0ms),
                transform .7s var(--ease-out) var(--d, 0ms),
                border-color .5s var(--ease-out),
                translate .5s var(--ease-out),
                /* Position des Scheins läuft dem Zeiger hinterher. */
                --px .5s var(--ease-out),
                --py .5s var(--ease-out);
  }
  .rhythm-card:hover { translate: 0 -2px; }

  /* Verzögerung nur beim Betreten, nicht beim Verlassen – sonst würde
     der Schein nach dem Wegfahren unangenehm nachhängen. */
  .rhythm-card:hover::before {
    opacity: 1;
    transition-delay: .14s;
  }

  /* Fallback-Hover für Browser ohne mask-composite: exclude – siehe
     @supports-Block oben, der dort ::before komplett abschaltet. */
  @supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .rhythm-card:hover { border-color: rgba(232, 195, 174, .35); }
  }
}
.rhythm-interval {
  margin-bottom: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.rhythm-card h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}
.rhythm-card p {
  margin-top: .85rem;
  font-size: .92rem;
  color: var(--on-ink-dim);
}
.rhythm-price {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(239, 233, 223, .12);
  font-size: .84rem;
  font-weight: 600;
  color: var(--on-ink);
}
.rhythm-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--on-ink-dim);
  font-size: .95rem;
}
.rhythm-foot .link-plain { color: var(--accent-soft); }

/* ---------- Zielgruppen ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.audience-card {
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.audience-card h3 { margin-bottom: .6rem; }
.audience-card p { font-size: .95rem; color: var(--text-soft); }

/* ---------- Ablauf ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}
.step { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.step-num {
  display: block;
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--accent);
}
.step h3 { margin-bottom: .55rem; }
.step p { font-size: .95rem; color: var(--text-soft); }

/* ---------- Über mich ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
}
/* Darstellung wie auf der Texter-Seite (.portrait-frame in styles.css):
   Das Foto ist ein Freisteller mit transparentem Hintergrund und steht
   deshalb nicht direkt auf dem Papier, sondern auf einem warmen Verlaufs-
   Mat, mit `contain` und bündiger Unterkante. */
.about-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(160, 62, 28, .1), transparent 55%),
    linear-gradient(160deg, #F2EBDD 0%, #E1D2BC 100%);
}

.about-portrait picture {
  position: absolute;
  inset: 3% 3% 0 3%;
  display: block;
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* Gleicht die kühleren Blond-/Weißtöne an die warme Palette an. */
  filter: saturate(1.1) sepia(.16) contrast(1.05) brightness(.99) hue-rotate(-3deg);
}
.about-body > * + * { margin-top: 1.15rem; }

/* ---------- FAQ ---------- */
.faq-container { max-width: 800px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
/* Das Plus wird NICHT als Textzeichen gesetzt: Zeichensätze legen ihren
   Glyphen nicht zwingend mittig in die eigene Zeilenbox (bei Inter lag
   die "+" hier durch geerbtes line-height:1.7 sichtbar schief). Zwei
   Balken per Pseudo-Element, exakt per transform zentriert, sitzen
   dagegen unabhängig von Schriftart/-metrik immer mittig im Kreis –
   und drehen sich beim Öffnen als Kreuz gemeinsam mit dem Kreis mit. */
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  transition: background-color .3s var(--ease-out);
}
.faq-icon::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-icon::after  { width: 1.5px; height: 10px; transform: translate(-50%, -50%); }
.faq-list details[open] .faq-icon { transform: rotate(45deg); background: var(--surface); }
.faq-answer { padding-bottom: 1.5rem; }
.faq-answer p { font-size: .97rem; color: var(--text-soft); }

/* ---------- CTA ---------- */
.cta-section { text-align: center; }
.cta-inner { display: grid; justify-items: center; }
.cta-title {
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.cta-sub { margin-top: 1.4rem; color: var(--text-soft); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.25rem; }
.cta-alt { margin-top: 1.5rem; font-size: .9rem; }

/* ---------- Footer ---------- */
.site-footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: 2rem;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
}
.footer-brand p { margin-top: .75rem; font-size: .9rem; color: var(--text-soft); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 3rem; }
.footer-nav ul { display: grid; gap: .6rem; }
.footer-nav a {
  font-size: .9rem;
  color: var(--text-soft);
  text-decoration: none;
}
.footer-meta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--text-soft);
}

/* ============================================================
   MIKRO-INTERAKTIONEN – untere Abschnitte
   ------------------------------------------------------------
   Grundsatz: nicht MEHR Bewegung, sondern genauere. Statt überall
   dieselbe Karten-Anhebung gibt es ein einziges wiederkehrendes
   Motiv – eine Haarlinie in Akzentfarbe, die sich von links zeichnet.
   Dieselbe Geste in vier Zusammenhängen liest sich als Handschrift;
   vier verschiedene Effekte würden nur unruhig wirken.

   Getragen wird das Motiv von scaleX auf einer 1px-Linie: reine
   Compositor-Arbeit, kein Reflow, damit kein Layout-Shift (CLS).
   Alle Hover-Gesten hängen an (hover: hover) and (pointer: fine).
   ============================================================ */

/* Gemeinsame Grundform der Linie */
.step::before,
.audience-card h3::after,
.faq-list details::after,
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- Ablauf: die Linie zeichnet sich beim Hereinscrollen ---------
   Bewusst KEIN Hover: die Schritte sind Fließtext, keine Bedienelemente.
   Die Geste gehört hier zum Auftritt, nicht zur Interaktion – dadurch
   sehen sie auch Touch-Nutzer. Verzögerung erbt den Stagger via --d. */
.step { position: relative; }
.step::before {
  top: -1px;               /* liegt genau auf der grauen Trennlinie */
  transition: transform .9s var(--ease-mask) calc(var(--d, 0ms) + 140ms);
}
.step.in::before { transform: scaleX(1); }

/* --- Zielgruppen-Karten ------------------------------------------
   Hatten bisher gar keine Reaktion. Statt einer weiteren Anhebung
   zeichnet die Überschrift ihre Unterlänge, der Rahmen wärmt nach. */
.audience-card { transition: border-color .5s var(--ease-out); }
.audience-card h3 {
  position: relative;
  display: inline-block;   /* damit die Linie an der Textbreite endet */
}
.audience-card h3::after {
  bottom: -.16em;
  transition: transform .55s var(--ease-mask);
}

/* --- FAQ ----------------------------------------------------------
   Die offene Zeile behält die Akzentlinie – sie markiert, wo man ist. */
.faq-list details { position: relative; }
.faq-list details::after {
  bottom: -1px;
  transition: transform .55s var(--ease-mask);
}
.faq-list details[open]::after { transform: scaleX(1); }
.faq-icon { transition: transform .3s var(--ease-out),
                        background-color .3s var(--ease-out),
                        border-color .3s var(--ease-out); }

/* --- Fußzeile: Unterstrich zeichnen statt Farbe umschalten -------- */
.footer-nav a { position: relative; display: inline-block; }
.footer-nav a::after {
  bottom: -2px;
  background: currentColor;
  transition: transform .45s var(--ease-mask);
}

/* ============================================================
   ALLE HOVER-ZUSTÄNDE – nur für Geräte mit echtem Zeiger
   ------------------------------------------------------------
   Auf Touchgeräten gibt es kein „Verlassen“ eines Elements: Der
   :hover-Zustand bleibt nach dem Antippen hängen, bis irgendwo
   anders hingetippt wird. Deshalb steht hier ALLES, was an :hover
   hängt – auch Buttons, Links und der Umschalter im Kopfbereich.

   Wer hier eine Hover-Regel ergänzt, gehört in diesen Block.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  /* Buttons */
  .btn:hover { transform: translateY(-2px); }
  .btn-primary:hover { background: var(--accent); }
  .btn-ghost:hover { background: rgba(27, 24, 21, .09); }

  /* Links */
  .link-arrow:hover { color: var(--accent); }
  .link-arrow:hover span { transform: translateX(4px); }
  .link-plain:hover { color: var(--accent-deep); }
  .rhythm-foot .link-plain:hover { color: #fff; }

  /* Umschalter Texte/Kunst: der Knopf wandert nur, wenn der Zeiger
     wirklich auf „Texte“ liegt – nicht über der restlichen Fläche. */
  .switch:has(a.switch-opt:hover) .switch-knob { transform: translateX(0); }
  .switch:has(a.switch-opt:hover) .switch-opt[aria-current="page"] { color: var(--text-soft); }
  a.switch-opt:hover { color: var(--ink); }

  /* Galerie */
  .art:hover .art-frame img { transform: scale(1.03); }

  /* Untere Abschnitte (Mikro-Interaktionen) */
  .audience-card:hover { border-color: var(--accent-soft); }
  .audience-card:hover h3::after { transform: scaleX(1); }

  .faq-list details:hover::after { transform: scaleX(1); }
  .faq-list summary:hover .faq-icon { border-color: var(--accent-soft); }

  .footer-nav a:hover { color: var(--accent); }
  .footer-nav a:hover::after { transform: scaleX(1); }
}

/* Die globale Reduced-Motion-Regel greift nur für [data-reveal];
   die Pseudo-Elemente brauchen ihre eigene Abschaltung. */
@media (prefers-reduced-motion: reduce) {
  .step::before,
  .audience-card h3::after,
  .faq-list details::after,
  .footer-nav a::after,
  .rhythm-card::before {
    transition: none !important;
  }
}