/* ==========================================================================
   LOVA STUDIO — Bad Füssing
   Designsystem "Studio Editorial"
   Aufbau: 1 Schriften · 2 Variablen · 3 Basis · 4 Typografie · 5 Layout
           6 Buttons & Links · 7 Header/Navigation · 8 Medien · 9 Bausteine
           10 Formulare · 11 Footer · 12 Animation · 13 Utilities
           14 Touchbedienung
           15 Logo-Intro
   ========================================================================== */

/* 1 — Schriften (lokal gehostet, kein Google-CDN, DSGVO-freundlich) ======== */

/* ---------------------------------------------------------------------------
   DISPLAY-SCHRIFT

   Vorgabe der Marke ist "Bebas Neue Pro" (Dharma Type, kostenpflichtig) —
   dieselbe Familie wie im LOVA-Logo.

   TODO: Original-Fontdateien von Bebas Neue Pro einfügen.
   Ablage unter assets/fonts/ als:
     bebas-neue-pro-bold.woff2   (Headlines)
     bebas-neue-pro-book.woff2   (Labels, Eyebrows)
   Danach unten die beiden auskommentierten @font-face-Blöcke aktivieren.
   Sie stehen in der Schriftfamilie VOR dem Übergangsschnitt und übernehmen
   damit automatisch, ohne dass sonst etwas geändert werden muss.

   Bis dahin läuft die Website auf "Bebas Neue" (Google Fonts, SIL OFL) —
   der frei lizenzierte Vorgänger derselben Schriftfamilie mit sehr ähnlicher
   Formsprache, aber nur einem Schnitt. Das ist ein klar gekennzeichneter
   Übergang und nicht die Originalschrift.
--------------------------------------------------------------------------- */

/*
@font-face {
  font-family: "Bebas Neue Pro";
  src: url("../assets/fonts/bebas-neue-pro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Neue Pro Book";
  src: url("../assets/fonts/bebas-neue-pro-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/bebas-neue-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2 — Variablen ============================================================ */

:root {
  /* Farbwelt Studio (hell) */
  --papier: #f6f3ee;
  --papier-warm: #efe9e0;
  --elfenbein: #fbfaf7;
  --sand: #e3dbd0;
  --sand-hell: #ece6dd;
  --stein: #b9ae9e;
  /* Etwas dunkler als der ursprüngliche Sandton, damit auch kleine
     Beschriftungen auf allen hellen Flächen mindestens 4,5:1 erreichen
     (WCAG AA). */
  --label: #6f6354;
  --tinte: #131211;
  --tinte-weich: #4a453e;

  /* Farbwelt Academy (dunkel) */
  --nacht: #14120f;
  --nacht-2: #1d1a16;
  --nacht-linie: #38332b;
  --nacht-text: #f2efe9;
  --nacht-label: #a49782;

  /* Schriften
     --display       Headlines und große Statements (Bebas Neue Pro Bold)
     --display-buch  Labels, Eyebrows, Kapitelbezeichnungen (Pro Book)
     --sans          Fließtext, Navigation, Buttons, Formulare (Inter) */
  --display: "Bebas Neue Pro", "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --display-buch: "Bebas Neue Pro Book", "Bebas Neue Pro", "Bebas Neue", "Oswald",
    "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;

  /* Maße */
  --rand: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1560px;
  --spalte: 1px solid var(--sand);

  /* Rhythmus */
  --abstand-s: clamp(2.5rem, 5vw, 4rem);
  --abstand-m: clamp(4rem, 8vw, 7rem);
  --abstand-l: clamp(5.5rem, 12vw, 11rem);

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

/* 3 — Basis =============================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Die Bilder liegen als WebP und als JPEG vor. <picture> ist nur die Klammer
   darum und darf im Layout nicht mitzählen, sonst greifen Regeln wie
   .medium img nicht mehr auf das Bild durch. */
picture {
  display: contents;
}

a {
  color: inherit;
}

::selection {
  background: var(--tinte);
  color: var(--papier);
}

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

.section--dark :focus-visible {
  outline-color: var(--nacht-text);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinte);
  color: var(--papier);
  padding: 0.9rem 1.4rem;
  z-index: 200;
  font-size: 0.85rem;
}
.skip:focus {
  left: 0;
}

/* 4 — Typografie ========================================================== */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Display-Stufen — kondensierte Versalien in der Logoschrift.
   Enge Zeilenhöhe, minimale Sperrung, viel Weißraum ringsum. */
.display-xl,
.display-l,
.display-m,
.display-s {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
}

.display-xl {
  font-size: clamp(2.9rem, 8vw, 6.6rem);
  line-height: 0.96;
  letter-spacing: 0.025em;
}
.display-l {
  font-size: clamp(2.7rem, 6.8vw, 5.6rem);
  line-height: 0.88;
  letter-spacing: 0.008em;
}
.display-m {
  font-size: clamp(1.95rem, 4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: 0.014em;
}
.display-s {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.02;
  letter-spacing: 0.03em;
}

/* Labels, Eyebrows, Kapitelbezeichnungen — schmaler Schnitt, weit gesperrt */
.label {
  display: block;
  font-family: var(--display-buch);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 1.4rem;
}

.label--linie {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.label--linie::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sand);
}

.section--dark .label {
  color: var(--nacht-label);
}
.section--dark .label--linie::after {
  background: var(--nacht-linie);
}

.kapitel {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.2rem, 7vw, 5.4rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  color: var(--stein);
  display: block;
  margin-bottom: 0.6rem;
}
.section--dark .kapitel {
  color: #4d463b;
}

p {
  margin: 0 0 1.2em;
  max-width: 62ch;
}
p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: clamp(1.1rem, 1.02rem + 0.45vw, 1.375rem);
  line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 46ch;
}
.section--dark .lead {
  color: #d8d2c7;
}

.klein {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--label);
}
.section--dark .klein {
  color: var(--nacht-label);
}

/* 5 — Layout ============================================================== */

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

.wrap--eng {
  max-width: 980px;
}

.section {
  padding-block: var(--abstand-l);
  position: relative;
}
.section--kompakt {
  padding-block: var(--abstand-m);
}

.section--dark {
  background: var(--nacht);
  color: var(--nacht-text);
}
.section--warm {
  background: var(--papier-warm);
}
.section--elfenbein {
  background: var(--elfenbein);
}

.linie {
  height: 1px;
  background: var(--sand);
  border: 0;
  margin: 0;
}
.section--dark .linie {
  background: var(--nacht-linie);
}

.raster {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 900px) {
  .raster--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .raster--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .raster--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .raster--7-5 {
    grid-template-columns: 7fr 5fr;
  }
  .raster--5-7 {
    grid-template-columns: 5fr 7fr;
  }
  .raster--4-8 {
    grid-template-columns: 4fr 8fr;
  }
  .raster--6-5 {
    grid-template-columns: 6fr 5fr;
    gap: clamp(2rem, 8vw, 8rem);
  }
  .mitte {
    align-items: center;
  }
  .ende {
    align-items: end;
  }
}

.versatz {
  padding-top: clamp(2rem, 7vw, 7rem);
}

/* 6 — Buttons & Links ===================================================== */

.btn {
  --btn-bg: var(--tinte);
  --btn-fg: var(--papier);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.95rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.btn:hover {
  --btn-bg: transparent;
  --btn-fg: var(--tinte);
  border-color: var(--tinte);
}

.btn--linie {
  --btn-bg: transparent;
  --btn-fg: var(--tinte);
  border-color: var(--stein);
}
.btn--linie:hover {
  --btn-bg: var(--tinte);
  --btn-fg: var(--papier);
  border-color: var(--tinte);
}

.section--dark .btn,
.btn--hell {
  --btn-bg: var(--nacht-text);
  --btn-fg: var(--nacht);
}
.section--dark .btn:hover,
.btn--hell:hover {
  --btn-bg: transparent;
  --btn-fg: var(--nacht-text);
  border-color: var(--nacht-text);
}

.section--dark .btn--linie {
  --btn-bg: transparent;
  --btn-fg: var(--nacht-text);
  border-color: var(--nacht-linie);
}
.section--dark .btn--linie:hover {
  --btn-bg: var(--nacht-text);
  --btn-fg: var(--nacht);
  border-color: var(--nacht-text);
}

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  align-items: center;
}

.pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: gap 0.35s var(--ease), opacity 0.35s var(--ease);
}
.pfeil:hover {
  gap: 1.1rem;
}
.pfeil svg {
  width: 16px;
  height: 9px;
  flex: none;
}

.textlink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--stein);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--ease);
}
.textlink:hover {
  border-color: currentColor;
}

/* 7 — Header & Navigation ================================================= */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
    transform 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Zweizeilig: oben Wortmarke und Buchungs-Button, darunter die Navigation */
.header__inner {
  padding-block: 1.1rem 1rem;
  transition: padding 0.4s var(--ease);
}

.header__oben {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 56px;
}

.header--fest .header__inner {
  padding-block: 0.7rem 0.6rem;
}

.header--fest {
  background: var(--papier);
  border-bottom-color: var(--sand);
}
.header--fest.header--auf-dunkel,
.header--dunkel.header--fest {
  background: var(--nacht);
  border-bottom-color: var(--nacht-linie);
}

.header--versteckt {
  transform: translateY(-101%);
}

/* Wortmarke — Fallback in Text, sonst die Logo-Datei als CSS-Maske.
   Die Maske übernimmt die Textfarbe, dadurch ist das Logo auf hellem und
   dunklem Untergrund automatisch richtig. Neues Logo = Datei ersetzen. */
.marke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  flex: none;
}
.marke .wortmarke span {
  font-weight: 300;
  letter-spacing: 0.34em;
}

@supports ((-webkit-mask-image: url("../assets/images/lova-logo.svg")) or
  (mask-image: url("../assets/images/lova-logo.svg"))) {
  .wortmarke {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .marke,
  .footer__marke {
    display: block;
    width: auto;
    aspect-ratio: 661 / 549;
    background-color: currentColor;
    -webkit-mask: url("../assets/images/lova-logo.svg") left center / contain no-repeat;
    mask: url("../assets/images/lova-logo.svg") left center / contain no-repeat;
  }

  .marke {
    height: clamp(34px, 3.6vw, 44px);
  }

  .footer__marke {
    height: clamp(56px, 8vw, 84px);
    margin: 0;
  }
}

.nav {
  display: none;
  align-items: center;
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  margin-top: 1.15rem;
}

.nav a {
  text-decoration: none;
  font-family: var(--display-buch);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.35s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"],
.nav .nav__academy {
  color: var(--tinte);
}

.header--dunkel .nav a {
  color: #b6afa4;
}
.header--dunkel .nav a:hover,
.header--dunkel .nav a[aria-current="page"],
.header--dunkel .nav .nav__academy {
  color: var(--nacht-text);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__aktionen {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header__cta {
  display: none;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  font-size: 0.7rem;
}

/* Farbumkehr, wenn der Header über dunklem Hero liegt */
.header--dunkel {
  color: var(--nacht-text);
}
.header--dunkel .btn {
  --btn-bg: var(--nacht-text);
  --btn-fg: var(--nacht);
}
.header--dunkel .btn:hover {
  --btn-bg: transparent;
  --btn-fg: var(--nacht-text);
  border-color: var(--nacht-text);
}
.header--dunkel .burger span {
  background: var(--nacht-text);
}

.burger {
  width: 46px;
  height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--tinte);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }
  .header__inner {
    padding-block: 1.3rem 1.1rem;
  }
  .header__cta {
    display: inline-flex;
  }
  .burger {
    display: none;
  }
}

/* Mobiles Menü */
.menue {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--papier);
  padding: 110px var(--rand) var(--rand);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
.menue[data-offen="true"] {
  transform: translateY(0);
  visibility: visible;
}
.menue__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sand);
}
.menue__liste li {
  border-bottom: 1px solid var(--sand);
}
.menue__liste a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.3rem, 5.5vw, 1.65rem);
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.menue__liste em {
  font-family: var(--display-buch);
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: var(--label);
}
.menue__fuss {
  padding-top: 2.5rem;
  display: grid;
  gap: 1rem;
}
.menue__fuss .btn {
  width: 100%;
}

body[data-menue="offen"] {
  overflow: hidden;
}

/* Bei offenem Menü liegt der Header über hellem Grund — Farben zurücksetzen */
body[data-menue="offen"] .header,
body[data-menue="offen"] .header--fest,
body[data-menue="offen"] .header--dunkel {
  background: var(--papier);
  border-bottom-color: transparent;
  color: var(--tinte);
  transform: none;
}
body[data-menue="offen"] .header--dunkel .burger span {
  background: var(--tinte);
}
body[data-menue="offen"] .header--dunkel .btn {
  --btn-bg: var(--tinte);
  --btn-fg: var(--papier);
}

/* 8 — Medien ============================================================== */

.medium {
  position: relative;
  overflow: hidden;
  background: var(--sand-hell);
  aspect-ratio: var(--ratio, 4 / 5);
}
.medium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}

.medium--zoom img {
  transition: transform 1.1s var(--ease);
}
a:hover .medium--zoom img,
.medium--zoom:hover img {
  transform: scale(1.04);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--label);
}
.section--dark figcaption {
  color: var(--nacht-label);
}

/* 9 — Bausteine =========================================================== */

/* Hero */
.hero {
  position: relative;
  padding-top: clamp(6.5rem, 12vh, 8rem);
  padding-bottom: var(--abstand-m);
  overflow: hidden;
}

/* Ab Tablet ist der Kopfbereich zweizeilig und damit höher */
@media (min-width: 1024px) {
  .hero {
    padding-top: clamp(10rem, 17vh, 12.5rem);
  }
}

.hero--dunkel {
  background: var(--nacht);
  color: var(--nacht-text);
}

.hero__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 900px) {
  .hero__raster {
    grid-template-columns: 6.5fr 5.5fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
  /* Hero ohne Bild: eine Spalte, damit rechts keine leere Hälfte entsteht. */
  .hero__raster--eins {
    grid-template-columns: 1fr;
  }
}
.hero__raster--eins .lead {
  max-width: 54ch;
}

.hero__titel {
  margin-bottom: 1.8rem;
}

.hero__meta {
  font-weight: 500;
  max-width: none;
  margin-top: 2.4rem;
  font-size: 0.74rem;
  line-height: 2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}
.hero__meta > span {
  white-space: nowrap;
}
.hero__meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--stein);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero__meta a:hover,
.hero__meta a:focus-visible {
  color: var(--tinte);
  border-color: currentColor;
}
.hero--dunkel .hero__meta a {
  border-bottom-color: var(--nacht-label);
}
.hero--dunkel .hero__meta a:hover,
.hero--dunkel .hero__meta a:focus-visible {
  color: var(--nacht-text);
}

.hero__meta > span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0.55rem 0.18rem 0.95rem;
  vertical-align: middle;
  background: var(--stein);
  border-radius: 50%;
}
.hero--dunkel .hero__meta {
  color: var(--nacht-label);
}
.hero--dunkel .hero__meta > span:not(:last-child)::after {
  background: var(--nacht-linie);
}

/* Auf schmalen Bildschirmen bricht die Zeile ohnehin um, dann stören die
   Trennpunkte am Zeilenende, deshalb entfallen sie dort. */
@media (max-width: 899px) {
  .hero__meta > span {
    display: block;
  }
  .hero__meta > span:not(:last-child)::after {
    display: none;
  }
}

/* Laufband */
.laufband {
  overflow: hidden;
  border-block: 1px solid var(--sand);
  padding-block: 0.9rem;
  white-space: nowrap;
}
.section--dark .laufband,
.laufband--dunkel {
  border-color: var(--nacht-linie);
}
.laufband__spur {
  display: inline-flex;
  gap: 3.5rem;
  animation: laufen 42s linear infinite;
  will-change: transform;
}
.laufband__spur span {
  font-family: var(--display-buch);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
  display: inline-flex;
  align-items: center;
  gap: 3.5rem;
}
.laufband__spur span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--stein);
}
.section--dark .laufband__spur span {
  color: var(--nacht-label);
}
.section--dark .laufband__spur span::after {
  background: var(--nacht-linie);
}

@keyframes laufen {
  to {
    transform: translateX(-50%);
  }
}

/* Merkmalsliste (Academy-Fakten) */
.merkmale {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sand);
}
.section--dark .merkmale {
  border-color: var(--nacht-linie);
}
.merkmale li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--sand);
  align-items: baseline;
}
.section--dark .merkmale li {
  border-color: var(--nacht-linie);
}
.merkmale b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--label);
}
.section--dark .merkmale b {
  color: var(--nacht-label);
}
.merkmale strong {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
}
.merkmale p {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  color: var(--tinte-weich);
  max-width: 48ch;
}
.section--dark .merkmale p {
  color: #cfc8bc;
}

/* Behandlungs-Kacheln */
.behandlung {
  display: block;
  text-decoration: none;
  color: inherit;
}
.behandlung__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--sand);
}
.behandlung h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.1vw, 1.8rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.behandlung__preis {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
}
.behandlung p {
  margin-top: 0.9rem;
  font-size: 0.94rem;
  color: var(--tinte-weich);
}

/* Einspaltiger Textabschnitt. Wird dort verwendet, wo bewusst kein Bild
   danebensteht, damit rechts keine leere Fläche entsteht. */
.spalte-text {
  max-width: 62ch;
}

/* Leistungsübersicht ohne Bild: vier Textspalten unter einer feinen Linie.
   Wirkt wie ein Register und braucht keine Fotos, um vollständig zu sein. */
.leistung {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--tinte);
  padding-top: 1.15rem;
  transition: border-color 0.4s var(--ease);
}
.leistung h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.leistung__preis {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--display-buch);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
}
.leistung p {
  margin: 0.9rem 0 0;
  font-size: 0.94rem;
  color: var(--tinte-weich);
}
.leistung:hover {
  border-top-color: var(--stein);
}
.leistung:hover h3 {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
/* Auf Tablets zwei nebeneinander statt vier untereinander */
@media (min-width: 600px) and (max-width: 899px) {
  .leistungen {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2rem;
  }
}

/* Preisliste */
.preise {
  margin: 0;
  border-top: 1px solid var(--sand);
}
.preise__zeile {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--sand);
}
.preise__zeile dt {
  font-size: 0.97rem;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-width: 0;
}
.preise__zeile dt::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted var(--stein);
  transform: translateY(-4px);
  min-width: 1.5rem;
}
.preise__zeile dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.97rem;
  white-space: nowrap;
}

/* Zeitplan Tag 01/02 */
.tag {
  border-top: 1px solid var(--nacht-linie);
  padding-top: 1.8rem;
}
.tag__nummer {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 0.82;
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 0.5rem;
}
.tag__label {
  font-family: var(--display-buch);
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nacht-label);
  display: block;
  margin-bottom: 1.8rem;
}
.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ablauf li {
  position: relative;
  padding: 0 0 1.05rem 1.6rem;
  font-size: 0.98rem;
  color: #ddd7cc;
}
.ablauf li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--nacht-label);
}
.ablauf li:last-child {
  padding-bottom: 0;
}

/* Starterset-Liste */
.set-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 1px solid var(--sand);
}
.set-liste li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--sand);
  font-size: 0.94rem;
  padding-right: 1.5rem;
}
.section--dark .set-liste,
.section--dark .set-liste li {
  border-color: var(--nacht-linie);
}

/* Bewertungen */
.bewertung {
  border-top: 1px solid var(--sand);
  padding-top: 1.4rem;
}
.section--dark .bewertung {
  border-color: var(--nacht-linie);
}
.bewertung blockquote {
  margin: 0 0 1rem;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.bewertung__meta {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
}
.section--dark .bewertung__meta {
  color: var(--nacht-label);
}

.wertung {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.wertung__zahl {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.6rem, 9vw, 6rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
}
.sterne {
  display: inline-flex;
  gap: 4px;
}
.sterne svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
/* Kleine Variante für die Metazeile im Hero */
.sterne--klein {
  gap: 2.5px;
  margin-inline: 0.4rem 0.45rem;
  vertical-align: -0.05em;
  color: var(--tinte);
}
.sterne--klein svg {
  width: 10px;
  height: 10px;
}
.hero--dunkel .sterne--klein {
  color: var(--nacht-text);
}

/* Team */
.person h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.025em;
  margin-top: 1.2rem;
}
.person__rolle {
  font-family: var(--display-buch);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
  margin-top: 0.5rem;
  display: block;
}
.person p {
  margin-top: 0.9rem;
  font-size: 0.94rem;
  color: var(--tinte-weich);
}
/* Team: eine Person je Zeile, Porträt links, Text rechts. Getrennt durch
   eine feine Linie, damit die Reihen als Folge lesbar bleiben. */
.team {
  display: grid;
  gap: clamp(2.2rem, 4vw, 3.4rem);
}
.mitglied {
  display: grid;
  gap: 1.4rem 0;
  border-top: 1px solid var(--sand);
  padding-top: clamp(1.8rem, 3.5vw, 2.8rem);
}
.mitglied__bild {
  margin: 0;
  max-width: 74%;
}
.mitglied__text h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1;
  letter-spacing: 0.025em;
}
.mitglied__text p {
  margin: 1rem 0 0;
  max-width: 58ch;
  color: var(--tinte-weich);
}

@media (min-width: 760px) {
  .mitglied {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    /* Der Text steht mittig zum Porträt, sonst klebt er oben und darunter
       bleibt eine leere Fläche stehen. */
    align-items: center;
  }
  .mitglied__bild {
    max-width: none;
  }
  /* Juliana hat noch kein Porträt. Ihr Text startet trotzdem in derselben
     Spalte wie bei den anderen, so bleibt die Reihe ruhig statt leer. */
  .mitglied--ohne-bild .mitglied__text {
    grid-column: 2;
  }
}

/* FAQ */
.faq {
  border-top: 1px solid var(--sand);
}
.section--dark .faq {
  border-color: var(--nacht-linie);
}
.faq__punkt {
  border-bottom: 1px solid var(--sand);
}
.section--dark .faq__punkt {
  border-color: var(--nacht-linie);
}
.faq__frage {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: 0;
  padding: 1.4rem 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: inherit;
}
.faq__zeichen {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 0.45em;
}
.faq__zeichen::before,
.faq__zeichen::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.faq__zeichen::before {
  inset: 6px 0 auto;
  height: 1.5px;
}
.faq__zeichen::after {
  inset: 0 6px auto;
  width: 1.5px;
  height: 14px;
}
.faq__frage[aria-expanded="true"] .faq__zeichen::after {
  transform: scaleY(0);
}
.faq__antwort {
  overflow: hidden;
  height: 0;
  transition: height 0.45s var(--ease);
}
.faq__antwort > div {
  padding-bottom: 1.6rem;
  max-width: 62ch;
  color: var(--tinte-weich);
}
.section--dark .faq__antwort > div {
  color: #cfc8bc;
}


/* Bildstrecke — seitlich wischbar, per Knopf auf Galerieansicht umschaltbar */
.strecke__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.strecke__steuerung {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.strecke__pfeil {
  width: 46px;
  height: 46px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stein);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), opacity 0.3s var(--ease);
}
.strecke__pfeil svg {
  width: 15px;
  height: 9px;
}
.strecke__pfeil:hover:not(:disabled) {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
.strecke__pfeil:disabled {
  opacity: 0.3;
  cursor: default;
}
.section--dark .strecke__pfeil {
  border-color: var(--nacht-linie);
}
.section--dark .strecke__pfeil:hover:not(:disabled) {
  background: var(--nacht-text);
  border-color: var(--nacht-text);
  color: var(--nacht);
}

.strecke__spur {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
  margin-inline: calc(var(--rand) * -1);
  padding-inline: var(--rand);
  scroll-padding-inline: var(--rand);
}
.strecke__spur::-webkit-scrollbar {
  display: none;
}

.strecke__bild {
  flex: 0 0 clamp(230px, 27vw, 340px);
  scroll-snap-align: start;
  margin: 0;
}

.strecke[data-ansicht="galerie"] .strecke__spur {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  overflow: visible;
  scroll-snap-type: none;
  margin-inline: 0;
  padding-inline: 0;
}
.strecke[data-ansicht="galerie"] .strecke__bild {
  flex: none;
}
.strecke[data-ansicht="galerie"] .strecke__steuerung .strecke__pfeil {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .strecke__spur {
    scroll-behavior: auto;
  }
}

/* Anschluss-Abstand, wenn ein Abschnitt direkt an den Hero anschließt */
.section--anschluss {
  padding-top: var(--abstand-s);
}
.hero--knapp {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.section--eng-unten {
  padding-bottom: var(--abstand-s);
}

/* Vorteile auf einen Blick */
.vorteile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--sand);
  border-left: 1px solid var(--sand);
}
.section--dark .vorteile {
  border-top-color: var(--nacht-linie);
  border-left-color: var(--nacht-linie);
}
.vorteile li {
  border-bottom: 1px solid var(--sand);
  border-right: 1px solid var(--sand);
  padding: 1.5rem 1.6rem 1.7rem;
}
.section--dark .vorteile li {
  border-bottom-color: var(--nacht-linie);
  border-right-color: var(--nacht-linie);
}
.vorteile strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}
@media (min-width: 620px) {
  .vorteile {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .vorteile {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vorteile p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 34ch;
}
.section--dark .vorteile p {
  color: #cfc8bc;
}


/* Große Einzelansicht: ein Bild füllt die Breite, das nächste schaut hervor */
.strecke--einzeln .strecke__bild {
  flex: 0 0 min(84%, 780px);
}
@media (min-width: 900px) {
  .strecke--einzeln .strecke__bild {
    flex: 0 0 min(72%, 860px);
  }
}
.strecke--einzeln .strecke__spur {
  gap: clamp(0.9rem, 2vw, 1.8rem);
}

/* Zähler unter der Strecke */
.strecke__zaehler {
  margin-top: 1.1rem;
  font-family: var(--display-buch);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.section--dark .strecke__zaehler {
  color: var(--nacht-label);
}

/* Aufklappbare Hilfe, zurückhaltend neben den Buttons */
.hilfe {
  margin-top: 1.4rem;
  max-width: 52ch;
}
.hilfe > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--label);
  border-bottom: 1px solid var(--sand);
  padding-bottom: 0.3rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hilfe > summary::-webkit-details-marker {
  display: none;
}
.hilfe > summary::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--stein);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  flex: none;
}
.hilfe > summary:hover {
  color: var(--tinte);
  border-bottom-color: var(--stein);
}
.hilfe[open] > summary {
  margin-bottom: 1.1rem;
}
.hilfe__inhalt {
  border-left: 1px solid var(--sand);
  padding-left: 1.3rem;
}
.hilfe__inhalt ol {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tinte-weich);
}
.hilfe__inhalt li {
  margin-bottom: 0.5rem;
}
.hilfe__inhalt li:last-child {
  margin-bottom: 0;
}

/* Galerie */
.galerie {
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .galerie {
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
  }
  .g-a {
    grid-column: 1 / 5;
  }
  .g-b {
    grid-column: 6 / 10;
    margin-top: clamp(2rem, 6vw, 5rem);
  }
  .g-c {
    grid-column: 10 / 13;
  }
  .g-d {
    grid-column: 2 / 6;
    margin-top: clamp(1rem, 3vw, 3rem);
  }
  .g-e {
    grid-column: 6 / 12;
  }
}

/* Zitat / Aussage */
/* Zahlenzeile — kurze Fakten in der Display-Schrift */
.zahlenzeile {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin: 0;
  max-width: none;
}

.aussage {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.8vw, 3.8rem);
  line-height: 0.92;
  letter-spacing: 0.012em;
  max-width: 16ch;
  margin: 0;
}

/* Mobiler Sticky-CTA */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--tinte);
  color: var(--papier);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--rand);
  transform: translateY(110%);
  transition: transform 0.5s var(--ease);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sticky-cta[data-sichtbar="true"] {
  transform: translateY(0);
}
.sticky-cta__text {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
}
.sticky-cta .btn {
  --btn-bg: var(--papier);
  --btn-fg: var(--tinte);
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  font-size: 0.68rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .sticky-cta {
    display: none;
  }
}

/* Platzhalter-Markierung für fehlende Kundenangaben */
.ph {
  background: #fff2a8;
  box-shadow: 0 0 0 2px #fff2a8;
  color: #4a4327;
  font-weight: 500;
}

/* Hinweisbox */
.hinweis {
  border-left: 2px solid var(--stein);
  padding: 0.2rem 0 0.2rem 1.2rem;
  font-size: 0.92rem;
  color: var(--tinte-weich);
  max-width: 60ch;
}
.section--dark .hinweis {
  border-left-color: var(--nacht-label);
  color: #cfc8bc;
}

/* Anfahrt-Band (Startseite): Adresse links, Routenknöpfe rechts ----------- */
.anfahrt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.8rem 3.5rem;
  border-top: 1px solid var(--sand);
  padding-top: clamp(1.8rem, 3vw, 2.6rem);
}
.anfahrt__adresse {
  margin: 0.7rem 0 0.8rem;
}
.anfahrt p {
  max-width: 40ch;
}
.anfahrt__route {
  max-width: 31rem;
  padding-top: 0.35rem;
}
.anfahrt__route p {
  max-width: 38ch;
}
@media (max-width: 799px) {
  .anfahrt {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Kleine Routenzeile für Fließtext und Antworten ------------------------- */
.route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1.1rem;
  margin-top: 1.2rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--sand);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--label);
}
.route__ziel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.route svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route a {
  color: var(--tinte);
}
.section--dark .route {
  border-top-color: var(--nacht-linie);
  color: var(--nacht-label);
}
.section--dark .route a {
  color: var(--nacht-text);
  border-bottom-color: var(--nacht-label);
}

/* 10 — Formulare ========================================================== */

.formular {
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 700px) {
  .formular__paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
  }
}

.section--dark .feld label,
.section--dark .feld select {
  color: var(--nacht-label);
}
.section--dark .feld select option {
  color: #131211;
}
.section--dark .feld select:valid {
  color: var(--nacht-text);
}

.feld label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.55rem;
}

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stein);
  padding: 0.7rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: inherit;
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}
.feld textarea {
  min-height: 130px;
  resize: vertical;
}
.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  outline: none;
  border-bottom-color: var(--tinte);
}
.feld input:focus-visible,
.feld textarea:focus-visible,
.feld select:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 4px;
}
.section--dark .feld input,
.section--dark .feld textarea,
.section--dark .feld select {
  border-bottom-color: var(--nacht-linie);
}
.section--dark .feld input:focus,
.section--dark .feld textarea:focus {
  border-bottom-color: var(--nacht-text);
}

.feld--fehler input,
.feld--fehler textarea {
  border-bottom-color: #9c3b28;
}
.feld__fehler {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: #9c3b28;
}
.section--dark .feld__fehler {
  color: #eda392;
}
.feld--fehler .feld__fehler {
  display: block;
}

.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--tinte-weich);
  max-width: 62ch;
}
.zustimmung input {
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--tinte);
}
.section--dark .zustimmung {
  color: #cfc8bc;
}

.honigtopf {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
}

/* 11 — Footer ============================================================= */

.footer {
  background: var(--nacht);
  color: var(--nacht-text);
  padding-top: var(--abstand-m);
  padding-bottom: 2.5rem;
}
.footer a {
  text-decoration: none;
}
/* Der Footer steht auf dunklem Grund, ohne die Klasse section--dark.
   Kleine Texte brauchen hier die helle Labelfarbe, sonst sind sie zu blass. */
.footer .klein,
.footer .label {
  color: var(--nacht-label);
}
.footer__marke {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer__marke span {
  display: block;
  font-weight: 200;
  letter-spacing: 0.3em;
}
.footer__raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 800px) {
  .footer__raster {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}
.footer h2,
.footer h3 {
  font-family: var(--display-buch);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nacht-label);
  margin-bottom: 1.3rem;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.footer li a,
.footer address a {
  font-size: 0.94rem;
  font-style: normal;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.footer li a:hover,
.footer address a:hover {
  border-bottom-color: currentColor;
}
.footer address {
  font-style: normal;
  font-size: 0.94rem;
  line-height: 1.85;
}
.footer__unten {
  border-top: 1px solid var(--nacht-linie);
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--nacht-label);
}
.footer__unten nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* 12 — Animation ========================================================== */

/* Einblenden beim Scrollen, ausschliesslich als Zugabe.
   ------------------------------------------------------------------------
   WICHTIG: Nichts auf dieser Website darf dauerhaft unsichtbar sein, wenn
   JavaScript fehlt oder klemmt. Deshalb hängen ALLE folgenden Regeln an der
   Klasse .reveal-an, und die wird an vier Stellen wieder entfernt:

     1. Das Miniskript im <head> setzt sie und nimmt sie nach 2 Sekunden von
        selbst zurück, falls js/script.js gar nicht ankommt.
     2. js/script.js entfernt sie, sobald beim Einrichten etwas schiefgeht.
     3. js/script.js entfernt sie, wenn der IntersectionObserver sich nicht
        innerhalb von 1,5 Sekunden meldet.
     4. Ein globaler Fehler-Auffang entfernt sie bei jedem unbehandelten
        JavaScript-Fehler auf der Seite.

   Ohne diese Klasse gilt der normale Zustand: alles sichtbar, kein
   clip-path, keine Transparenz. Regeln hier bitte nie ohne den
   Klassenvorsatz schreiben. */
.reveal-an [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--verzoegerung, 0ms);
}
.reveal-an [data-reveal].ist-sichtbar {
  opacity: 1;
  transform: none;
}

.reveal-an [data-reveal="medium"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ease);
  transition-delay: var(--verzoegerung, 0ms);
}
.reveal-an [data-reveal="medium"].ist-sichtbar {
  clip-path: inset(0 0 0 0);
}

[data-parallax] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal-an [data-reveal],
  .reveal-an [data-reveal="medium"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .laufband__spur {
    animation: none;
  }
}

/* 13 — Utilities ========================================================== */

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

.mb-s {
  margin-bottom: 1rem;
}
.mb-m {
  margin-bottom: 2rem;
}
.mb-l {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.mt-m {
  margin-top: 2rem;
}
.mt-l {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.eng {
  max-width: 60ch;
}

/* 14 — Touchbedienung ======================================================
   Greift nur auf Geräten mit Finger statt Maus. Die sichtbare Gestaltung
   bleibt gleich, nur die Trefferflächen wachsen auf mindestens 44 px, damit
   sich kleine Textlinks am Handy zuverlässig treffen lassen. */

@media (pointer: coarse) {
  /* Logo im Kopf */
  .marke {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Pfeil-Links („Das Studio ansehen“) sind eigenständige Schaltflächen */
  .pfeil {
    min-height: 44px;
    padding-top: 0.65rem;
  }

  /* Aufklapper der Buchungshilfe */
  .hilfe > summary {
    min-height: 44px;
    padding-top: 0.55rem;
  }

  /* Routenzeile auf der Schulungsseite */
  .route a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Footer: Navigations- und Kontaktlinks */
  .footer ul {
    gap: 0.1rem;
  }
  .footer li a,
  .footer address a,
  .footer__unten nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer address {
    line-height: 1.5;
  }
  .footer__unten nav {
    gap: 0 1.6rem;
  }

  /* Zustimmungshäkchen im Formular. Es bleibt oben an der ersten Zeile,
     das ist bei mehrzeiligen Einwilligungstexten die übliche Lesart. */
  .zustimmung input {
    width: 26px;
    height: 26px;
    margin-top: 0;
  }

  /* Verweise mitten im Fließtext: eine unsichtbare Fläche über dem Link
     vergrößert das Ziel für den Finger. Anders als Polsterung verschiebt sie
     weder die Zeilenhöhe noch die Unterstreichung, das Layout bleibt exakt
     gleich. */
  .textlink,
  .hero__meta a {
    position: relative;
  }
  .textlink::before,
  .hero__meta a::before {
    content: "";
    position: absolute;
    inset: -14px -6px;
  }

  /* Kleinste Schriftgrade am Handy eine Spur größer */
  .hero__meta {
    font-size: 0.8rem;
  }
  .bewertung__meta {
    font-size: 0.8rem;
  }
  .feld label {
    font-size: 0.8rem;
  }
  .sticky-cta__text {
    font-size: 0.76rem;
  }
  .sticky-cta .btn {
    font-size: 0.78rem;
  }
}

/* 15 — Logo-Intro ==========================================================
   Beim ersten Aufruf im Browser-Tab läuft einmal kurz die Wortmarke ein:
   rund eine halbe Sekunde Aufbau, eine halbe Sekunde ruhig stehen, dann geht
   die Fläche weg. Zusammen etwa 1,4 Sekunden.
   Der Block wird per JavaScript eingesetzt, ohne JavaScript existiert er
   nicht und kann die Seite deshalb auch nie blockieren. Wer im System
   reduzierte Bewegung eingestellt hat, sieht das Intro gar nicht. */

html[data-intro="laeuft"],
html[data-intro="laeuft"] body {
  overflow: hidden;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--papier);
}

.intro__logo {
  width: min(52vw, 280px);
  aspect-ratio: 661 / 549;
  background-color: var(--tinte);
  -webkit-mask: url("../assets/images/lova-logo.svg") center / contain no-repeat;
  mask: url("../assets/images/lova-logo.svg") center / contain no-repeat;
  /* Die Marke wird von unten nach oben freigelegt, wie ein Druck, der
     aufs Papier kommt. */
  clip-path: inset(100% 0 0 0);
  animation: intro-marke 460ms cubic-bezier(0.22, 0.61, 0.36, 1) 30ms forwards;
}

/* Feine Linie, die unter der Marke nach außen aufzieht */
.intro__linie {
  position: absolute;
  bottom: calc(50% - min(26vw, 140px) - 26px);
  height: 1px;
  width: min(52vw, 280px);
  background: var(--stein);
  transform: scaleX(0);
  animation: intro-linie 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 140ms forwards;
}

@keyframes intro-marke {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(7px);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

@keyframes intro-linie {
  to {
    transform: scaleX(1);
  }
}

.intro[data-weg="ja"] {
  animation: intro-weg 420ms cubic-bezier(0.6, 0, 0.3, 1) forwards;
}

@keyframes intro-weg {
  to {
    opacity: 0;
    transform: translateY(-1.5%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}


/* Letzte Sicherung: beim Drucken ist grundsätzlich alles sichtbar. */
@media print {
  [data-reveal],
  [data-reveal="medium"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}