/* --------------------------------------------------------------- Schriften
   Selbst gehostet statt von fonts.googleapis.com. Der Aufruf dort haette bei
   jedem Seitenaufruf die IP des Besuchers an Google uebertragen - eine
   Einwilligung waere noetig gewesen, und die Seite kommt sonst ohne
   Zustimmung aus. Die Dateien liegen unter assets/fonts/.
   Source Serif 4 und Tenor Sans: SIL Open Font License 1.1
   Montserrat: SIL Open Font License 1.1
   Source Serif 4 und Montserrat sind variable Schriften, ein Schnitt deckt
   den ganzen Bereich 300 bis 600 ab. */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-normal-latin.woff2') format('woff2');
  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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-normal-latin-ext.woff2') format('woff2');
  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: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-latin.woff2') format('woff2');
  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: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-latin-ext.woff2') format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/montserrat-300600-latin.woff2') format('woff2');
  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: 'Montserrat';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/montserrat-300600-latin-ext.woff2') format('woff2');
  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: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/tenor-sans-latin.woff2') format('woff2');
  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: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/tenor-sans-latin-ext.woff2') format('woff2');
  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;
}

/* =========================================================================
   Niche Brand Studio — Designsystem
   Farben, Typografie und Strukturen nach "Brand Guidelines - Niche.pdf"
   Layout nach "Website - Mockup - Niche.pdf"
   ========================================================================= */

/* ------------------------------------------------------------------ Tokens */
:root {
  /* Markenfarben laut Brand Guidelines */
  --orange:      #CF5527;   /* Call-to-Action */
  --orange-dark: #B4461C;
  --brown:       #493A35;   /* Überschriften | Fließtext | Hintergrund */
  --black:       #000000;
  --gold:        #998731;   /* Akzentfarbe */
  --olive:       #262B12;   /* Akzentfarbe */
  --cream:       #F1ECE3;   /* Hintergrund */

  /* Abgeleitete Flächen */
  --paper:       #F7F6F4;
  --ink:         #241D20;
  --ink-deep:    #1B1417;
  --line-light:  rgba(73, 58, 53, .18);
  --line-dark:   rgba(241, 236, 227, .22);

  --text-light:  rgba(241, 236, 227, .78);
  --text-light-strong: #F1ECE3;

  /* Typografie */
  --serif:  "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --tenor:  "Tenor Sans", "Optima", "Avenir Next", sans-serif;
  --sans:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Maße */
  --h1:      clamp(2.5rem, 6.2vw, 4.6rem);
  --wrap:    1240px;
  --wrap-nar: 900px;
  --gut:     clamp(1.25rem, 4vw, 3.5rem);
  --sec:     clamp(4.5rem, 10vw, 9rem);
  --radius:  2px;

  /* Breite des Praegungsstrichs samt Versatzlagen im Massstab der
     Praegung - dieselbe Breitenformel wie bei .watermark--strich. */
  /* 8.196 Einheiten (drei versetzte Lagen) von 446.66 Einheiten Praegungsbreite */
  --strich: calc(min(clamp(200px, 28vw, 420px), 2 * (max(0px, (100vw - var(--wrap)) / 2) + var(--gut) - 26px)) * 0.01835);

  /* Hoehe der Browserleiste am Handy: Unterschied zwischen grossem (Leiste
     eingefahren) und kleinem Fenster (Leiste da). Am Rechner 0. */
  --leiste: 0px;
}
@supports (height: 100lvh) { :root { --leiste: calc(100lvh - 100svh); } }

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(.875rem, .4vw + .78rem, .95rem);
  line-height: 1.85;
  color: var(--brown);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
figure, blockquote { margin: 0; }
address { font-style: normal; }
a { color: inherit; }

/* --------------------------------------------------------------- Strukturen
   Leinen-, Papier- und Lichtkegel-Struktur laut Brand Guidelines,
   als Inline-SVG erzeugt — keine externen Assets, kein zusätzlicher Request. */
.tex-linen::before,
.tex-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Original-Leinenstruktur aus dem Mockup, nahtlos gekachelt */
.tex-linen::before {
  background-image: url("../img/leinen.jpg");   /* Rueckfall: aeltere Safari kennen image-set() mit type() nicht (11.09.) */
  background-image: image-set(url("../img/leinen.webp") type("image/webp"),
                              url("../img/leinen.jpg") type("image/jpeg"));
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity: .8;
  mix-blend-mode: multiply;
}
.tex-paper::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)' opacity='.4'/%3E%3C/svg%3E");
  opacity: .35;
  mix-blend-mode: multiply;
}

/* Dunkle Flächen: Papierkorn + Lichtkegel-Verlauf */
.dark {
  position: relative;
  background: var(--ink);
  color: var(--text-light);
  isolation: isolate;
}
.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* dieselbe Leinenfaser wie auf hellen Flaechen, in Braun eingefaerbt.
     Ohne Blendmodus, damit die Faser auf dem dunklen Grund wirklich sichtbar ist. */
  background-image: url("../img/struktur-braun.jpg");   /* Rueckfall: aeltere Safari kennen image-set() mit type() nicht (11.09.) */
  background-image: image-set(url("../img/struktur-braun.webp") type("image/webp"),
                              url("../img/struktur-braun.jpg") type("image/jpeg"));
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: .75;
}
.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(241,236,227,.10) 0%, rgba(241,236,227,0) 58%),
    radial-gradient(70% 60% at 8% 100%, rgba(153,135,49,.10) 0%, rgba(153,135,49,0) 60%);
}
.dark > * { position: relative; z-index: 1; }

/* Mehrere dunkle Bloecke am Stueck: Struktur und Verlauf liegen einmal ueber
   dem gemeinsamen Rahmen, die inneren Bloecke bleiben transparent. */
.dark-block { position: relative; background: var(--ink); color: var(--text-light); isolation: isolate; }
.dark-block::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../img/struktur-braun.jpg");   /* Rueckfall: aeltere Safari kennen image-set() mit type() nicht (11.09.) */
  background-image: image-set(url("../img/struktur-braun.webp") type("image/webp"),
                              url("../img/struktur-braun.jpg") type("image/jpeg"));
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: .75;
}
.dark-block::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 60% at 78% 0%, rgba(241,236,227,.10) 0%, rgba(241,236,227,0) 58%),
    radial-gradient(70% 40% at 8% 100%, rgba(153,135,49,.10) 0%, rgba(153,135,49,0) 60%);
}
.dark-block > * { position: relative; z-index: 1; }
.dark-block > .dark,
.dark-block > .section {
  background: transparent;
  isolation: auto;
}
/* zwei Bloecke am Stueck brauchen zwischen sich weniger Luft */
.dark-block > .section + .section { padding-top: 0; }
.dark-block > .dark::before,
.dark-block > .dark::after { content: none; }

.light { position: relative; background: var(--paper); color: var(--brown); isolation: isolate; overflow: clip; }
/* Sektion, aus der das Signet unten herausragen darf */
.light.laesst-ueberstehen { overflow: visible; z-index: 1; }
.light > * { position: relative; z-index: 1; }
.light--cream { background: var(--cream); }

/* Marken-Element aus dem Brandkit (Logo-Prägung), dezent im Hintergrund -
   dieselbe Grafik, die auf der Startseite als Wasserzeichen dient. */
.arcs { position: relative; }
.arcs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-repeat: no-repeat;
  background-image: url("../img/logo-praegung.svg"), url("../img/logo-praegung.svg");
  background-position: left -6% top 4%, right -4% bottom 8%;
  background-size: clamp(180px, 24vw, 340px) auto, clamp(140px, 18vw, 260px) auto;
}
.arcs > * { position: relative; z-index: 1; }
@media (max-width: 700px) { .arcs::after { opacity: .4; background-position: right -12% top 2%, left -14% bottom 4%; } }

/* ------------------------------------------------------------------ Layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: var(--wrap-nar); }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* -------------------------------------------------------------- Typografie */
.eyebrow {
  font-family: var(--tenor);
  font-size: clamp(.62rem, .25vw + .58rem, .72rem);
  letter-spacing: .38em;   /* Subline: erweiterte Laufweite 30–50 % */
  text-transform: uppercase;
  line-height: 1.6;
  margin: 0 0 1.6rem;
  color: var(--brown);
}
.dark .eyebrow,
.dark-block .eyebrow { color: var(--text-light-strong); opacity: .85; }

/* Eyebrow mit Linie, die aus dem Viewport heraus nach links läuft (Mockup) */
.eyebrow--rule { position: relative; }
.eyebrow--rule::before {
  content: "";
  position: absolute;
  right: calc(100% + 1.75rem);
  top: .65em;
  width: 60vw;
  height: 1px;
  background: var(--line-dark);
}
.light .eyebrow--rule::before { background: var(--line-light); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0 0 1.25rem;
  color: var(--brown);
}
.dark h1, .dark h2, .dark h3, .dark h4,
.dark-block h1, .dark-block h2, .dark-block h3, .dark-block h4 { color: var(--text-light-strong); }

h1 { font-size: var(--h1); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.24; }
h4 { font-size: 1.05rem; line-height: 1.3; }

/* Markenzeichen: kursives Wort + orangener Punkt in den Überschriften */
em, .it { font-style: italic; }
.dot { color: var(--orange); font-style: normal; }

p { margin: 0 0 1.35rem; }
p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(.95rem, .5vw + .82rem, 1.05rem); line-height: 1.9; }
.justify { hyphens: none; }
@media (min-width: 700px) { .justify { text-align: justify; } }
.muted { opacity: .8; }

/* Keine Silbentrennung, feste Vorgabe der Agentur: lieber groessere
   Wortabstaende als an jeder zweiten Zeile ein Bindestrich. Gilt fuer die
   ganze Seite, damit es sich nicht ueber einzelne Bausteine wieder
   einschleicht. */
body, .justify, p, li, dd, figcaption { hyphens: none; -webkit-hyphens: none; }

/* ----------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: #FFF;
  --btn-bd: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:hover { --btn-bg: var(--orange-dark); --btn-bd: var(--orange-dark); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--brown); --btn-bd: var(--line-light); }
.btn--ghost:hover { --btn-bg: var(--brown); --btn-fg: var(--cream); --btn-bd: var(--brown); }
.dark .btn--ghost,
.dark-block .btn--ghost { --btn-fg: var(--text-light-strong); --btn-bd: var(--line-dark); }
.dark .btn--ghost:hover,
.dark-block .btn--ghost:hover { --btn-bg: var(--cream); --btn-fg: var(--brown); --btn-bd: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.btn-row--center { justify-content: center; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* -------------------------------------------------------------------- Logo
   Original-SVGs aus dem Brandkit. */
.logo { display: inline-block; line-height: 0; text-decoration: none; }
.logo img { height: clamp(34px, 3.2vw, 46px); width: auto; }
.dark .logo img, .logo--hell img { }

/* Abstrahiertes Signet n|c */
.mark { display: inline-block; line-height: 0; }
.mark img { height: clamp(30px, 3vw, 40px); width: auto; }

/* Großes Wasserzeichen in hellen Sektionen */
.watermark {
  position: absolute;
  z-index: 0;
  width: clamp(200px, 28vw, 420px);
  aspect-ratio: 4 / 3;
  background: url("../img/logo-praegung.svg") center / contain no-repeat;
  opacity: .8;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 700px) { .watermark { display: none; } }

/* ------------------------------------------------------------------ Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 246, 244, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease, background .35s ease;
}
/* Nach dem Scrollen dunkel wie der Footer - der Header bleibt so ueber
   hellen wie dunklen Sektionen lesbar. */
/* Bewusst heller als die dunklen Sektionen (#241D20): laufen Hero oder eine
   dunkle Fläche unter den Header, wäre er sonst nicht davon zu unterscheiden.
   Der Schatten allein hilft auf dunklem Grund nicht. */
.site-header.is-stuck {
  background: rgba(56, 45, 48, .97);
  border-bottom-color: rgba(241, 236, 227, .34);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.site-header.is-stuck .nav a { color: var(--text-light-strong); }
.site-header.is-stuck .nav a[aria-current="page"] { border-bottom-color: var(--text-light-strong); }
.site-header.is-stuck .nav-toggle { color: var(--text-light-strong); }
.logo img + img { display: none; }
.site-header.is-stuck .logo img:first-child { display: none; }
.site-header.is-stuck .logo img + img { display: block; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 88px;
  padding-block: 1rem;
}
.nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.nav a {
  font-family: var(--tenor);
  /* .72rem ergaben 11.5 px - die Umlautpunkte des Ue haetten dort nur rund
     2 px Hoehe und verschmelzen beim Rastern mit dem Buchstaben. */
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brown);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--orange); }
.nav a[aria-current="page"] { border-bottom-color: var(--brown); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--brown);
  /* Die Striche sind 24 px breit, die Schaltflaeche 44 - ohne Ausgleich
     endeten sie 10 px vor dem Satzspiegel, waehrend die Wortmarke links
     genau daran anliegt. Das sah aus wie ein schiefer Kopf. */
  margin-right: -10px;
}
.nav-toggle span { display: block; width: 24px; height: 1px; background: currentColor; margin: 6px auto; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 88px 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.5rem var(--gut) 2.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line-light);
    transform: translateY(-140%);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  }
  .nav.is-open { transform: translateY(0); }
  .site-header.is-stuck .nav { background: rgba(28, 20, 23, .98); border-bottom-color: rgba(241,236,227,.14); }
  .site-header.is-stuck .nav a { border-bottom-color: rgba(241, 236, 227, .14); }
  .nav a { width: 100%; padding-block: 1rem; border-bottom: 1px solid var(--line-light); }
  .nav a:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------- Hero
   Der Hero sitzt als eigener dunkler Block in einer hellen Leinen-Fläche
   (siehe Bildschirmaufnahme der Canva-Vorschau), nicht randlos. */
.hero-shell {
  position: relative;
  z-index: 2;
  --hero-rand: clamp(1rem, 3.5vw, 3rem);
  /* Oben kein Rand: der Hero schliesst direkt an den Seitenkopf an, wie im
     Mockup. Der helle Streifen dazwischen liess den Kopf verrutscht wirken. */
  padding: 0 var(--hero-rand);
  isolation: isolate;
}
.hero-shell.light { overflow: visible; }   /* das eingesetzte Bild ragt bewusst heraus */
/* Mobil ohne hellen Rand: der Hero laeuft ueber die ganze Breite (09.09.) */
@media (max-width: 860px) { .hero-shell { --hero-rand: 0px; } }
.hero-shell > * { position: relative; z-index: 1; }

.hero {
  position: relative;
  min-height: clamp(600px, 88vh, 880px);
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 12vh, 9rem) clamp(9rem, 18vh, 13rem);
  background: var(--ink-deep);
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media video,
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(27,20,23,.94) 0%, rgba(27,20,23,.80) 45%, rgba(27,20,23,.62) 100%),
    radial-gradient(110% 80% at 70% 10%, rgba(241,236,227,.10) 0%, rgba(241,236,227,0) 60%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23h)' opacity='.6'/%3E%3C/svg%3E");
}
.hero__inner { position: relative; z-index: 3; width: 100%; }
.hero, .hero h1, .hero h2 { color: var(--text-light-strong); }
.hero .eyebrow { color: var(--text-light-strong); opacity: .85; }
.hero .eyebrow--rule::before { background: var(--line-dark); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hero h1 { margin-bottom: 0; }
/* Der Text setzt auf Hoehe der zweiten Headline-Zeile ein, damit die
   Ueberschrift oben frei steht - so wie im Mockup.
   2.75rem = Eyebrow-Zeile plus deren Abstand, dazu eine H1-Zeilenhoehe. */
.hero__text { color: var(--text-light); padding-top: calc(2.75rem + 1.08 * var(--h1)); }
.hero__cta { margin-top: 2.25rem; }

/* Bild, das in die nächste Sektion hineinragt */
.hero__inset {
  position: absolute;
  z-index: 4;
  left: 12%;                     /* wie im Mockup: nicht am Rand, sondern eingerueckt */
  bottom: -13%;                  /* rund ein Drittel ragt in die helle Flaeche */
  width: min(44%, 560px);
  aspect-ratio: 8 / 5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.hero__inset img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
/* Ueber uns: das Kopfbild bleibt farbig (Wunsch 08.09.) */
.hero__inset--farbe img { filter: none; }

/* ------------------------------------------------ Hero der Unterseiten
   Gleicher Aufbau wie auf der Startseite, nur mit Standbild statt Video
   und etwas flacher, damit der Inhalt frueher beginnt. */
/* Unterseiten-Hero: gleicher Aufbau und gleiche Masse wie auf der
   Startseite, damit das eingesetzte Bild genauso uebersteht. Nur der
   Grund ist ein Standbild statt des Videos. */
.hero--seite {
  min-height: clamp(560px, 78vh, 800px);
  /* Der untere Innenabstand muss den Teil des eingesetzten Bildes tragen,
     der noch im Hero liegt - sonst schiebt sich das Bild in die Ueberschrift.
     Die Titel der Unterseiten sind laenger als auf der Startseite, deshalb
     hier deutlich mehr Platz. */
  padding-block: clamp(4.5rem, 11vh, 8rem) clamp(13rem, 26vh, 18rem);
}
/* Etwas schmaler als auf der Startseite - der Titel braucht die Hoehe */
.hero--seite .hero__inset { width: min(38%, 480px); }
.hero--seite { --h1-seite: clamp(2.1rem, 5vw, 3.6rem); }
.hero--seite h1 { font-size: var(--h1-seite); }
/* Wie auf der Startseite: der rechte Textblock beginnt auf Hoehe der
   zweiten Ueberschriftzeile, nicht buendig oben. Gleiche Rechnung wie
   dort, nur mit der kleineren Titelgroesse der Unterseiten. */
.hero--seite .hero__text { padding-top: calc(2.75rem + 1.08 * var(--h1-seite)); }
.hero--seite .lead { color: var(--text-light); margin: 0; }

/* Zwei eingesetzte Bilder nebeneinander - wie das einzelne auf der
   Startseite, nur breiter und geteilt. */
.hero__insets {
  position: absolute;
  z-index: 4;
  left: 12%;
  bottom: -13%;
  width: min(62%, 780px);
  display: flex;
  align-items: stretch;
  gap: clamp(.6rem, 1.2vw, 1.1rem);
}
.hero__insets .hero__inset {
  position: static;
  inset: auto;
  width: auto;
  flex: 1 1 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.hero__insets .hero__inset:first-child { flex-grow: 1.5; aspect-ratio: 3 / 2; }
.hero__insets .hero__inset:last-child  { aspect-ratio: 1 / 1; }

/* Nach einem Unterseiten-Hero braucht die Folgesektion oben mehr Luft,
   sonst laeuft das ueberstehende Bild in ihren Inhalt. */
.hero-shell + .section--tight { padding-top: clamp(7.5rem, 15vw, 11.5rem); }
/* Kontaktseite: noch flacher und ohne eingesetztes Bild, damit das Formular
   unmittelbar folgt. */
.hero--knapp { min-height: 0; padding-block: clamp(3.5rem, 8vh, 5.5rem) clamp(3.5rem, 8vh, 5.5rem); }
/* Korrektur 07.09.: der Fliesstext steht auf Hoehe der Ueberschrift, nicht
   auf Hoehe der Zeile darueber. 2.75rem = Eyebrow-Zeile plus Abstand; der
   Rest setzt die drei Textzeilen mittig auf die zwei Titelzeilen (Titel
   124 px hoch, Text 96 px - gemessen bei 1440 px). */
.hero--knapp .hero__text { padding-top: calc(2.75rem + .9rem); }

/* Ueber uns: das eingesetzte Bild beginnt an der linken Rasterkante
   (Satzspiegel), nicht bei 12 % (Korrektur 07.09.). 100 % ist hier die
   Hero-Breite, also Fenster minus zweimal Rand. */
.hero--raster .hero__inset {
  left: calc(max(0px, (100% + 2 * var(--hero-rand) - var(--wrap)) / 2) + var(--gut) - var(--hero-rand));
}

@media (max-width: 860px) {
  /* .hero ist ein Flex-Container - als Flex-Item wuerde das Bild zusammen-
     schrumpfen. Deshalb hier auf normalen Fluss umstellen. */
  .hero { display: block; padding-bottom: clamp(3.5rem, 8vh, 5rem); }
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__text { padding-bottom: 0; }
  .hero__inset {
    position: relative;   /* nicht static: sonst malen Scrim und Koernung darueber und das Bild wird so dunkel wie der Hintergrund */
    z-index: 4;
    inset: auto;          /* Desktop-Versatz left/bottom zuruecksetzen */
    width: auto;
    margin: 2.5rem var(--gut) 0;
    aspect-ratio: 3 / 2;
    box-shadow: none;
  }
  .hero--seite { padding-bottom: clamp(3.5rem, 8vh, 5rem); }
  /* Die Desktop-Regel .hero--seite .hero__inset hat hoehere Spezifitaet als
     .hero__inset - ohne diese Zeile blieb das Bild auf dem Handy bei 38 %
     Breite stehen, also rund 130 px. */
  .hero--seite .hero__inset { width: auto; aspect-ratio: 3 / 2; }
  /* Der Versatz des Textblocks gilt nur fuer das zweispaltige Raster.
     Untereinander erzeugt er eine grosse Luecke unter der Ueberschrift. */
  .hero__text,
  .hero--seite .hero__text { padding-top: clamp(1rem, 4vw, 1.75rem); }
  .hero-shell + .section--tight { padding-top: clamp(3rem, 6vw, 5rem); }
  /* Schmales Fenster: beide Bilder im Fluss, das zweite schmaler */
  .hero__insets {
    position: relative;
    z-index: 4;
    inset: auto;
    width: auto;
    display: block;
    margin: 2.5rem var(--gut) 0;
  }
  .hero__insets .hero__inset { margin: 0; box-shadow: none; }
  .hero__insets .hero__inset:first-child { aspect-ratio: 3 / 2; }
  .hero__insets .hero__inset:last-child {
    width: 66%;
    margin: .75rem 0 0 auto;
    aspect-ratio: 4 / 3;
  }
}

/* ---------------------------------------------------- Bauhaus-Designelement
   Nur auf der Seite "Ueber uns": die Halbkreise aus dem Signet grossflaechig
   und sehr blass ueber die ganze Sektion verteilt, teils ueber die Kanten
   hinauslaufend - so wie in der Markenvorlage. Liegen hinter dem Inhalt
   und nehmen keine Klicks an. */

/* --------------------------------------------------------- Editorial Split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
/* Das Bild setzt erst auf Hoehe des Fliesstextes an, nicht schon bei der
   Zeile darueber. Der Wert entspricht Zeile plus Ueberschrift. */
.split--offset > :last-child { padding-top: clamp(0rem, 12vw, 11.5rem); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--offset > :last-child { padding-top: 0; } }

.figure-frame { position: relative; overflow: hidden; }
.figure-frame img { width: 100%; height: 100%; object-fit: cover; }
.figure-frame--bw img { filter: grayscale(1); }

/* Bild, das rechts aus dem Raster herausläuft (Mockup) */
.bleed-right { margin-right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut))); }
.bleed-left  { margin-left:  calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut))); }
/* Einspaltig laufen die Bilder bis an den Bildschirmrand statt im
   Satzspiegel stehen zu bleiben. Vorher blieben 13 px Rand stehen, waehrend
   die Leistungsbilder schon aussen anlagen - das sah zufaellig aus. */
@media (max-width: 860px) { .bleed-right, .bleed-left { margin-inline: calc(-1 * var(--gut)); } }
/* Startseite "Expertise": zweispaltig 88 % breit und rechts angesetzt,
   einspaltig volle Breite (Korrektur 07.09., vorher als Inline-Stil). */
.figure-frame--expertise { aspect-ratio: 8 / 5; width: 88%; margin-left: auto; }
@media (max-width: 860px) { .figure-frame--expertise { width: auto; margin-left: calc(-1 * var(--gut)); } }

/* --------------------------------------------------------------- Slider */
.slider { position: relative; }
.slider__track {
  --slider-gap: 1.75rem;
  display: flex;
  align-items: stretch;
  gap: var(--slider-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: .5rem 1.5rem;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
/* Pflichthalt an jeder Karte: ein Wisch blaettert genau eine Karte weiter,
   die Punkte darunter springen nicht mehr ueber mehrere (09.09.). */
.slider__track > * { flex: 0 0 min(86%, 340px); scroll-snap-align: start; scroll-snap-stop: always; }
@media (min-width: 861px) {
  /* 3 Spalten: 3 x (33.3333% - 1.1667rem) + 2 x 1.75rem Abstand = 100 % */
  .slider__track > * { flex: 0 0 calc(33.3333% - 1.1667rem); }
}

.quote {
  scroll-snap-align: start;
  background: #FFF;
  border: 1px solid var(--line-light);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.quote__who {
  font-family: var(--tenor);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: .6rem;
}
.quote__firm { font-family: var(--serif); font-style: italic; font-size: 1.28rem; line-height: 1.2; margin-bottom: 1rem; }
/* Die Rezensionen sind unterschiedlich lang. Der Text wird deshalb auf eine
   ruhige Höhe begrenzt und lässt sich pro Karte ganz aufklappen. */
.quote__body {
  font-size: .78rem;
  line-height: 1.85;
  hyphens: none;
  margin: 0 0 1rem;
  position: relative;
  max-height: 16.5em;
  overflow: hidden;
}
@media (min-width: 700px) { .quote__body { text-align: justify; } }
.quote__body::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.5em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #FFF 82%);
  pointer-events: none;
  opacity: 0;   /* nur bei gekuerztem Text sichtbar (Klasse setzt main.js) */
  transition: opacity .3s ease;
}
.quote.is-gekuerzt .quote__body::after { opacity: 1; }
.quote__body p { margin: 0 0 .8rem; }
.quote__body p:last-child { margin-bottom: 0; }

.quote.is-offen .quote__body { max-height: none; }
.quote.is-offen .quote__body::after { opacity: 0; }

.quote__mehr {
  align-self: flex-start;
  margin: 0 0 1.25rem;
  padding: .35rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-light);
  font-family: var(--tenor);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brown);
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.quote__mehr:hover { border-bottom-color: var(--orange); color: var(--orange); }
.quote__mehr:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.quote__mehr[hidden] { display: none; }

/* Auf schmalen Fenstern zuerst zeigen - die Reihenfolge im Quelltext
   bleibt fuer die Desktopansicht unveraendert. */
@media (max-width: 700px) { .quote--zuerst { order: -1; } }

.quote__stars { margin-top: auto; align-self: flex-end; color: var(--brown); letter-spacing: .18em; font-size: .8rem; }

/* Steuerung: Pfeile links/rechts, Punkte in der Mitte */
.slider__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: .5rem; }
.slider__pfeil {
  width: 42px; height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  color: var(--brown);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.slider__pfeil:hover:not(:disabled) { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.slider__pfeil:disabled { opacity: .3; cursor: default; }
.slider__pfeil:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.slider__pfeil svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dark .slider__pfeil,
.dark-block .slider__pfeil { border-color: var(--line-dark); color: var(--text-light-strong); }

.slider__dots { display: flex; justify-content: center; gap: .55rem; margin-top: 0; }
.slider__dots button {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line-light);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.slider__dots button[aria-selected="true"] { background: var(--brown); transform: scale(1.25); }

/* ------------------------------------------------------ Nummerierte Liste */
.steps { display: flex; flex-direction: column; }
.steps__item { padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line-dark); }
.steps__item:first-child { border-top: 0; padding-top: 0; }
.light .steps__item { border-top-color: var(--line-light); }
.steps__num { font-family: var(--serif); font-size: 1.1rem; color: var(--orange); display: block; margin-bottom: .3rem; }
.steps__item h3 { font-style: italic; margin-bottom: .55rem; }
.steps__item p { font-size: .78rem; line-height: 1.8; margin: 0; }
/* versetzte Einrückung wie im Mockup */
/* Punkt 02 deutlich nach rechts geruecktt (09.09.) */
.steps__item:nth-child(2) { padding-left: clamp(4rem, 16vw, 12rem); }
.steps__item:nth-child(3) { padding-left: 0; }
/* einspaltig weiter eingerueckt, damit "Vertrauensaufbau" in die naechste Zeile faellt (09.09.) */
@media (max-width: 560px) { .steps__item:nth-child(2) { padding-left: 4.5rem; } }
/* fester Umbruch nur einspaltig (z. B. vor "Vertrauensaufbau") */
.nur-mobil { display: none; }
@media (max-width: 560px) { .nur-mobil { display: inline; } }

/* ------------------------------------------------------------ Bilder-Band */
.band {
  display: grid;
  margin-bottom: clamp(-6rem, -7vw, -2rem);   /* zieht die naechste Sektion heran */
  grid-template-columns: 68fr 32fr;   /* Verhaeltnis aus dem Mockup */
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  position: relative;
}
.band__a { aspect-ratio: 12 / 5; }
.band__b { aspect-ratio: 9 / 10; width: 100%; margin-top: clamp(1.5rem, 6vw, 5.5rem); }
.band img { filter: grayscale(1); width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  /* Einspaltig: band__b steht jetzt UNTER band__a und bildet das Ende des
     Bandes. Der negative Aussenabstand zoege die Folgesektion darueber -
     ihre Ueberschrift lag dann unter dem Bild. Deshalb hier kein Heranziehen. */
  .band { grid-template-columns: 1fr; margin-bottom: 0; margin-inline: calc(-1 * var(--gut)); }
  .band__a { aspect-ratio: 3 / 2; }          /* 12:5 waere hier ein Streifen */
  /* Korrektur 07.09.: volle Breite statt 72 % rechtsbuendig */
  .band__b { aspect-ratio: 4 / 5; width: 100%; margin-top: clamp(.9rem, 2vw, 1.5rem); margin-left: 0; margin-right: 0; }
}

/* Baender mit "band-rechts": das Bild ist ein Querformat (1200 x 800), auf dem
   je eine Person am linken und am rechten Bildrand steht. Im 9:10-Ausschnitt
   blieben nur 60 % der Bildbreite stehen - die linke Person war zur Haelfte
   abgeschnitten. Dieser Band bekommt darum eine breitere rechte Spalte und ein
   flacheres Format, sodass beide Personen vollstaendig im Bild bleiben. */
.band--weit { grid-template-columns: 54fr 46fr; }
/* Das Bild laeuft zusaetzlich zum Seitenrand hin aus. Dadurch wird der
   Ausschnitt groesser und reicht deutlich weiter nach unten als das
   flache Band daneben - ohne dass seitlich etwas wegfaellt. */
.band--weit .band__b {
  aspect-ratio: 7 / 5;
  margin-right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut)));
}
@media (max-width: 860px) {
  /* Einspaltig bewusst versetzt (09.09.): das erste Bild schmal und
     hochkant, so dass nur die beiden auf der Treppe zu sehen sind; das
     zweite kleiner, rechtsbuendig und leicht ueberlappend. */
  .band--weit { grid-template-columns: 1fr; row-gap: 0; }
  .band--weit .band__a { width: 76%; aspect-ratio: 4 / 5; margin-right: auto; }
  .band--weit .band__a img { object-position: 50% 30%; }
  .band--weit .band__b { aspect-ratio: 4 / 3; width: 60%; margin: -16% 0 0 auto; position: relative; z-index: 1; box-shadow: 0 18px 40px rgba(73, 58, 53, .18); }
}

/* ------------------------------------------------ Versetzte Pfeiler-Spalten */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
.pillars > *:nth-child(even) { padding-top: clamp(1.5rem, 4vw, 3.5rem); }
.pillar h3 { font-style: italic; margin-bottom: 1rem; }
@media (max-width: 560px) { .pillar h3 br, .card h3 br { display: none; } }
.pillar p { font-size: .76rem; line-height: 1.85; text-align: justify; hyphens: none; margin: 0; }
@media (max-width: 1040px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .pillars { grid-template-columns: 1fr; } .pillars > *:nth-child(even) { padding-top: 0; } }
/* Mobil: der Halbkreis aus dem Signet vor jeder Ueberschrift, damit die
   vier Punkte wie Stichpunkte lesbar sind (Korrektur 07.09.). Gleiche Form
   wie die Marke an der Leistungslinie: Bogen nach oben, 2:1. */
@media (max-width: 860px) {
  .pillar h3 { position: relative; padding-left: 1.7rem; }
  .pillar h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: 16px;
    height: 8px;
    border-radius: 16px 16px 0 0;
    background: var(--orange);
  }
}

.standard__punkte { display: none; }   /* nur einspaltig sichtbar, siehe unten */

/* ------------------------------------------- Unser Standard: stehende Buehne
   Korrektur 07.09.: Die Sektion bleibt beim Scrollen stehen, die vier
   Spalten kommen nacheinander, und erst wenn die vierte da ist, laeuft die
   Seite weiter. Gleiche Bauweise wie "Ihr Ergebnis": eine Strecke, in der
   die Buehne klebt. Die Streckenhoehe setzt main.js (Buehne + Scrollweg). */
.standard { padding: 0; }
.standard__strecke { position: relative; }
.standard__buehne {
  /* eigener, deckender Grund samt Struktur: die Struktur der Sektion
     dahinter laeuft beim Festhalten mit, die der Buehne steht (10.09.) */
  background: var(--paper);
  position: sticky;
  --kopf: clamp(72px, 8vh, 96px);
  top: var(--kopf);
  min-height: calc(100vh - var(--kopf));
  min-height: calc(100svh - var(--kopf));   /* svh: stabil, wenn die Browserleiste einfaehrt */
  /* Korrektur 14.10.: Faehrt die Leiste beim Scrollen ein, war die Buehne
     unten um die Leistenhoehe zu kurz - in dem Streifen lief die Sektion
     dahinter mit. Die Buehne reicht jetzt bis zur Unterkante des grossen
     Fensters, der Zuschlag steckt im Innenabstand unten, der Inhalt bleibt
     also im kleinen Fenster und rutscht nicht unter die Leiste. */
  min-height: calc(100svh - var(--kopf) + var(--leiste));
  display: grid;
  align-items: center;
  padding-block: clamp(1.5rem, 4vh, 3rem) calc(clamp(1.5rem, 4vh, 3rem) + var(--leiste));
}
/* Scroll-Hinweis (Korrektur 08.09.): auf dem Handy steht die Buehne, und
   ohne Zeichen ist nicht klar, dass Scrollen die naechsten Punkte bringt.
   Ein wippender Pfeil mit Wort, weg sobald der letzte Punkt da ist. */
.standard__hinweis {
  display: none;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  margin: 1.25rem 0 0;
  font-family: var(--tenor);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brown);
  opacity: .7;
  transition: opacity .35s ease;
}
.standard__hinweis.is-aus { opacity: 0; }
.standard__hinweis-pfeil {
  width: 9px; height: 9px;
  border-right: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
  transform: rotate(45deg);
  margin-top: -4px;
  animation: hinweis-wippen 1.6s ease-in-out infinite;
}
@keyframes hinweis-wippen {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 5px; }
}
@media (max-width: 860px) { .standard__hinweis { display: none; } }   /* Hinweis entfernt (08.09.), Linie links zeigt den Fortschritt */
@media (prefers-reduced-motion: reduce) {
  .standard__hinweis { display: none !important; }
  .standard__hinweis-pfeil { animation: none; }
}
.standard__kopf { max-width: 480px; }
.standard .pillars { margin-top: clamp(2.5rem, 6vw, 5rem); }
.standard .btn-row { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* Mehrspaltig: Linie unter den Kacheln, die je Punkt um ein Viertel
   waechst (--fortschritt setzt main.js, 09.09.). */
@media (min-width: 561px) {
  .standard .pillars { position: relative; padding-bottom: 1.75rem; }
  .standard .pillars::before, .standard .pillars::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  }
  .standard .pillars::before { right: 0; background: var(--line-light); }
  .standard .pillars::after { width: calc(100% * var(--fortschritt, 0)); background: var(--orange); transition: width .55s cubic-bezier(.22, .61, .36, 1); }
  .standard__marke { display: block; }
}
/* Auf flachen Fenstern enger, damit die Buehne samt Knoepfen hineinpasst */
@media (max-height: 820px) and (min-width: 561px) {
  .standard .pillars { margin-top: 2.25rem; }
  .standard .pillars > *:nth-child(even) { padding-top: 1.5rem; }
  .standard .btn-row { margin-top: 2rem; }
  .standard h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
  .standard .eyebrow { margin-bottom: 1rem; }
}
/* Einspaltig passen vier Bloecke nicht auf eine Bildschirmhoehe: dort steht
   immer einer an derselben Stelle, der naechste loest ihn beim Scrollen ab.
   Alle vier liegen im selben Rasterfeld, die Hoehe ist die des laengsten -
   so ruckt nichts beim Wechsel. */
@media (max-width: 560px) {
  /* Eng gesetzt: Kopf, ein Block, Scroll-Hinweis und beide Knoepfe muessen
     zusammen in 568 px passen (640-px-Handy minus Seitenkopf). */
  /* Aufbau (Wunsch 08.09.): Kopf oben, Wechseltexte mit deutlichem Abstand
     darunter und nur zwei Drittel breit (rechts die Folienpunkte), die
     Knoepfe ganz unten in der Buehne. Der Wrap fuellt die Buehne, der
     Knopfblock wird mit margin-top:auto nach unten geschoben. */
  .standard { padding-top: clamp(2.5rem, 8vh, 4rem); }   /* Luft zum Bild darueber (Wunsch 08.09.) */
  /* Das ganze Widget steht mittig in der Buehne (08.09.), mit Mindestluft oben und unten */
  .standard__buehne { align-items: center; padding-block: 1.5rem calc(1.5rem + var(--leiste)); }
  .standard__buehne .wrap { position: relative; display: flex; flex-direction: column; }
  .standard .eyebrow { margin-bottom: .7rem; }
  .standard h2 { margin-bottom: .5rem; }
  .standard__kopf p { margin-top: .5rem !important; }
  .standard .pillars { margin-top: clamp(2rem, 8vh, 4rem); display: grid; grid-template-columns: 1fr; }
  .standard .pillars > * { grid-area: 1 / 1; }
  /* Text zwei Drittel breit, links daneben die orangene Scroll-Linie:
     Spur in Hellgrau, Fuellung waechst mit dem Fortschritt (main.js setzt
     --fortschritt 0..1 auf .pillars). */
  .standard .pillars { position: relative; padding-left: 1.4rem; }
  .standard .pillar { width: 66.666%; padding-right: 0; }
  .standard .pillars::before,
  .standard .pillars::after {
    content: "";
    position: absolute;
    left: 0;
    top: .2rem;
    bottom: .2rem;
    width: 2px;
    border-radius: 2px;
  }
  .standard .pillars::before { background: var(--line-light); }
  .standard .pillars::after {
    background: var(--orange);
    transform: scaleY(var(--fortschritt, 0));
    transform-origin: 50% 0;
    transition: transform .35s ease;
  }
  .standard .pillar p { font-size: .74rem; line-height: 1.75; text-align: left; }
  /* Knoepfe ganz unten in der Buehne, zusammen mit der Animation sichtbar
     (Wunsch 08.09.). Nebeneinander und kompakt, damit auch ein 640 px
     hohes Handy Kopf, Text und Knoepfe zusammen zeigt. */
  /* Knoepfe mit festem Abstand unter dem Text, nicht am unteren Rand (08.09.) */
  .standard .standard__btns { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.5rem; padding-top: 0; }
  .standard__btns .btn { width: auto; padding: .8rem 1.15rem; font-size: .72rem; }
  .standard__punkte {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    position: absolute;
    right: var(--gut);
    top: var(--punkte-top, 50%);
    translate: 0 -50%;
  }
  .standard__punkte span {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid var(--line-light);
    background: transparent;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
  }
  .standard__punkte span.is-aktiv { background: var(--orange); border-color: var(--orange); transform: scale(1.25); }
  .standard [data-staffel] > * { transform: translateY(16px); }
  .standard [data-staffel] > .is-da { transform: none; }
}
/* Kleine Handys (bis 720 px hoch): Kopf, Text, Hinweis und beide Knoepfe
   muessen zusammen in die Buehne passen - dafuer dichter gesetzt und die
   Einleitungszeile ausgeblendet (gemessen bei 360 x 640). */
@media (max-width: 560px) and (max-height: 720px) {
  .standard__buehne { padding-block: 1rem calc(1rem + var(--leiste)); }
  .standard .eyebrow { margin-bottom: .5rem; }
  .standard h2 { font-size: 1.7rem; }
  .standard__kopf p { display: none; }
  .standard .pillars { margin-top: 1.5rem; }
  .standard .pillar p { font-size: .7rem; line-height: 1.65; }
  .standard .standard__btns { margin-top: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .standard__strecke { height: auto !important; }
  .standard__buehne { position: static; min-height: 0; padding-block: var(--sec); }
  .standard .pillars > * { grid-area: auto; }
}

/* ---------------------------------------------------- Spalten mit Kopflinie
   Ruhiges Rasterlayout ohne Kaesten: jede Spalte traegt oben eine feine Linie. */
.rule-cols {
  display: grid;
  grid-template-columns: var(--tpl, repeat(var(--cols, 3), minmax(0, 1fr)));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.rule-cols > * { border-top: 1px solid var(--line-light); padding-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.dark .rule-cols > *,
.dark-block .rule-cols > * { border-top-color: var(--line-dark); }

.rule-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rule-col h2, .rule-col h3 {
  font-size: clamp(1.05rem, .55vw + .92rem, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1.1rem;
}
.rule-col p { font-size: .82rem; line-height: 1.85; margin: 0 0 1rem; }
.rule-col p:last-child { margin-bottom: 0; }

/* Spaltenaufteilungen als Klasse - nicht inline, sonst schlaegt der
   Inline-Wert die Media-Query und das Raster bricht auf Mobil nicht um. */
.rule-cols--kopf4 { --tpl: 1.6fr 1fr 1fr 1fr; }
.rule-cols--2 { --tpl: repeat(2, minmax(0, 1fr)); }
.rule-cols--3 { --tpl: repeat(3, minmax(0, 1fr)); }

/* kleine Ziffer rechts neben der Ueberschrift */
.rule-col__nr { font-family: var(--serif); font-size: .8rem; opacity: .45; flex: none; }
/* grosse, sehr helle Ziffer ueber der Ueberschrift */
.rule-col__nr--gross {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  line-height: 1;
  color: var(--brown);
  opacity: .25;
  margin-bottom: 1.25rem;
}
.rule-col__ergebnis { opacity: .85; }

/* Kopfspalte traegt Eyebrow und die grosse Ueberschrift */
.rule-col--kopf .eyebrow { letter-spacing: .26em; }
.rule-col--kopf h1, .rule-col--kopf h2 {
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1.5rem;
}
.rule-col--kopf p { font-size: .88rem; }

@media (max-width: 1040px) { .rule-cols { --tpl: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .rule-cols { --tpl: 1fr; } }

/* -------------------------------------------------- Leistung: Frageblöcke
   Jede Leistung beantwortet Was / Warum / Wie, begleitet von einem Bild. */
.leistung {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  --marke-x: 26px;   /* Abstand Linie/Halbkreis zur Ziffer */
  --marke-b: 15px;   /* Breite des Halbkreises, Hoehe ist die Haelfte */
}
/* durchgehende Linie hinter den Ziffern. Korrektur 07.09.: Sie steht nicht
   mehr von Anfang an da, sondern waechst beim Scrollen von 01 nach unten
   (--linie setzt main.js, 0 bis 1) und laeuft bis an die Unterkante der
   Sektion - dort setzt der gerade Strich zwischen n und c in der Praegung
   an, die in der Folgesektion darauf ausgerichtet ist (.watermark--strich). */
/* Eins zu eins der Strich aus der Praegung (08.09.): strich-praegung.svg ist
   der Ausschnitt aus logo-praegung.svg mit denselben drei Lagen, Farben und
   der 48-%-Maske; dazu dieselbe Deckkraft .8 wie .watermark. Die Breite
   folgt dem Massstab der Praegung, die Hoehe wird gestreckt. */
.leistung::before {
  content: "";
  position: absolute;
  /* mittig auf derselben Achse wie der Strich der Praegung darunter */
  left: calc(var(--gut) - var(--marke-x) + 0.5px - var(--strich) / 2);
  top: 1.6rem;
  bottom: calc(-1 * clamp(3rem, 6vw, 5rem));   /* = Innenabstand von .section--tight */
  width: var(--strich);
  background: url("../img/strich-praegung.svg") 0 0 / 100% 100% no-repeat;
  opacity: .8;
  transform: scaleY(var(--linie, 0));
  transform-origin: 50% 0;
  transition: transform .2s linear;
  pointer-events: none;
}
@media (max-width: 860px) { .leistung::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .leistung::before { transform: none; transition: none; } }
/* Praegung so gesetzt, dass ihr gerader Strich (Bildmitte, beginnt bei
   10,5 % der Hoehe) genau auf der Linie liegt und an der Sektionskante
   ansetzt. 26px = --marke-x der Leistungsliste. */
.watermark--strich {
  /* Nie breiter als zweimal der Abstand der Linie zum linken Fensterrand -
     sonst laeuft das n links aus dem Bild, und der Strich soll erkennbar
     zwischen n und c liegen. */
  --linie-x: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gut) - 26px);
  --wm-w: min(clamp(200px, 28vw, 420px), 2 * var(--linie-x));
  width: var(--wm-w);
  aspect-ratio: 197 / 150;
  left: calc(var(--linie-x) - var(--wm-w) / 2);
  /* Der Strich beginnt bei 10,49 % der Bildhoehe: um so viel nach oben
     schieben (translate-Prozent = eigene Hoehe), plus 2 px Ueberlappung.
     Nicht ueber top rechnen - dort wuerde das Prozent aus --linie-x auf die
     Hoehe des Elternelements bezogen. */
  top: -2px;
  /* 09.09.: hoeher gesetzt - die Glyphen stehen ueber dem Text, der Strich
     ueberlagert das untere Ende der Linie und fuehrt sie fort */
  translate: 0 -66%;
}
.leistung__block {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  position: relative;
  /* Die Gasse fuer Ziffer und Linie haengt jetzt am Block, nicht mehr an der
     Textspalte. Nur so sitzen die Marken auch in den gespiegelten Bloecken
     auf der durchgehenden Linie, wenn der Text rechts steht. */
  padding-left: clamp(2.5rem, 5vw, 4.5rem);
}
/* Bewusst unterschiedliche Aufteilungen und Hoehenversaetze, damit die
   Seite nicht wie ein gleichmaessiges Raster wirkt. Jeder zweite Block ist
   gespiegelt: Bilder links, Text rechts. */
.leistung__block:nth-child(1) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.leistung__block:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.leistung__block:nth-child(3) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.leistung__block--gespiegelt .leistung__medien { order: -1; }

/* Zwei Bilder je Punkt, versetzt statt uebereinander: das Hauptbild fuellt
   die Spalte, das Nebenbild steht darunter, ist schmaler und laeuft auf der
   Aussenseite darueber hinaus. Dieselbe Sprache wie das Bilderband - dort
   stehen die beiden Bilder auch nebeneinander und nicht aufeinander. */
.leistung__medien {
  position: relative;
  display: grid;
  row-gap: clamp(.9rem, 2vw, 1.5rem);
}
/* Auch der Abstand zwischen den beiden Bildern ist je Block ein anderer -
   ein gleicher Wert ueberall haette die Reihe wieder ordentlich gemacht. */
.leistung__block:nth-child(1) .leistung__medien { margin-top: clamp(1rem, 4vw, 3.5rem);   row-gap: clamp(.7rem, 1.4vw, 1.1rem); }
.leistung__block:nth-child(2) .leistung__medien { margin-top: clamp(2.5rem, 8vw, 7rem);   row-gap: clamp(1.4rem, 3.2vw, 2.6rem); }
.leistung__block:nth-child(3) .leistung__medien { margin-top: clamp(.5rem, 2vw, 1.5rem);  row-gap: clamp(1rem, 2.2vw, 1.8rem); }

/* Die Formate bleiben nah am Original (1200 x 675 bzw. 3:2), damit moeglichst
   wenig weggeschnitten wird - 1/1 hatte im dritten Block zu viel gekappt. */
.leistung__block:nth-child(1) .leistung__bild--haupt { aspect-ratio: 4 / 3; }
.leistung__block:nth-child(2) .leistung__bild--haupt { aspect-ratio: 3 / 2; }
.leistung__block:nth-child(3) .leistung__bild--haupt { aspect-ratio: 5 / 4; }

/* Beide Bilder eines Punktes stehen an derselben Aussenkante buendig: bei
   Bild rechts an der rechten, im gespiegelten Block an der linken. Der
   Versatz kommt allein aus der unterschiedlichen Breite. */
/* Korrektur 07.09.: das untere Bild ueberall schmaler - vorher 66/74/58 %.
   Es machte den Block hoeher als den Text und liess zwischen den Punkten zu
   viel Weissraum stehen. */
.leistung__block:nth-child(1) .leistung__bild--neben { width: 50%; justify-self: end;   aspect-ratio: 3 / 2; }
.leistung__block:nth-child(2) .leistung__bild--neben { width: 56%; justify-self: start; aspect-ratio: 3 / 2; }
.leistung__block:nth-child(3) .leistung__bild--neben { width: 44%; justify-self: end;   aspect-ratio: 5 / 4; }

/* Bilder laufen abwechselnd zum Seitenrand, wie auf der Startseite -
   bewusst nur zur Haelfte, damit sie nicht die Textspalte erdruecken. */
.leistung { --bild-bleed: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut))); }
.leistung__medien { margin-right: var(--bild-bleed); }
/* Der gespiegelte Block laeuft nach links aus, damit auch seine Bilder am
   Rand anliegen. Die Ziffer bleibt ueber dem Bild stehen (z-index), die
   feine Linie dahinter wird auf dieser Hoehe verdeckt. */
.leistung__block--gespiegelt .leistung__medien {
  margin-right: 0;
  margin-left: calc(var(--bild-bleed) - clamp(2.5rem, 5vw, 4.5rem));
}

.leistung__bild { overflow: hidden; }
.leistung__bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.leistung__nr {
  position: absolute;
  left: 0;
  top: .1rem;
  z-index: 4;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1;
  color: var(--orange);
  display: block;
}
/* Marke auf der Verbindungslinie: der Halbkreis aus dem Logo-Signet
   (Bogen nach oben, Verhaeltnis 2:1, Signetfarbe #CF5527 = --orange).
   --marke-x steuert Linie und Halbkreis gemeinsam, damit beide zusammen
   nah an der Ziffer stehen. */
.leistung__nr::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--marke-x) - var(--marke-b) / 2);
  top: .62em;
  width: var(--marke-b);
  height: calc(var(--marke-b) / 2);
  border-radius: var(--marke-b) var(--marke-b) 0 0;
  background: var(--orange);
  /* Ruhezustand: blass und klein. Sobald der Block einlaeuft, leuchtet die
     Marke auf - so ist zu sehen, welcher Schritt gerade erreicht ist. */
  opacity: .25;
  transform: scale(.75);
  transform-origin: 50% 100%;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.leistung__block.is-in .leistung__nr::after {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}
/* Die Ziffer zieht mit */
.leistung__nr { transition: color .55s ease; }
.leistung__block:not(.is-in) .leistung__nr { color: rgba(207, 85, 39, .45); }
@media (max-width: 860px) {
  .leistung__block { padding-left: 0; }
  .leistung__nr { position: static; margin-bottom: .6rem; }
  .leistung__nr::after { display: none; }
}
.leistung__block h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); margin-bottom: 1.75rem; }

.fragen { display: grid; gap: 1.35rem; }
.frage { border-top: 1px solid var(--line-light); padding-top: 1.1rem; }
.frage dt {
  font-family: var(--tenor);
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: .5rem;
}
.frage dd { margin: 0; font-size: .82rem; line-height: 1.85; }

@media (max-width: 860px) {
  .leistung__block,
  .leistung__block:nth-child(1),
  .leistung__block:nth-child(2),
  .leistung__block:nth-child(3) { grid-template-columns: 1fr; }
  /* einspaltig steht der Text immer zuerst, auch im gespiegelten Block */
  .leistung__block--gespiegelt .leistung__medien { order: 0; }
  .leistung__block:nth-child(1) .leistung__medien,
  .leistung__block:nth-child(2) .leistung__medien,
  .leistung__block:nth-child(3) .leistung__medien {
    margin: 0 calc(-1 * var(--gut));
    padding-bottom: 0;
  }
  .leistung__block:nth-child(1) .leistung__bild--haupt,
  .leistung__block:nth-child(2) .leistung__bild--haupt,
  .leistung__block:nth-child(3) .leistung__bild--haupt { aspect-ratio: 3 / 2; }
  /* Das Nebenbild steht unter dem Hauptbild, schmaler und abwechselnd nach
     rechts oder links geschoben - ohne Ueberdeckung. Die Seite haengt an der
     Blocknummer, nicht an der Modifikatorklasse: die waere weniger
     spezifisch als die Sammelregel darueber und wuerde nicht greifen. */
  /* Korrektur 07.09.: einspaltig laufen auch die Nebenbilder von Rand zu
     Rand wie die Hauptbilder - vorher 72 % breit und abwechselnd rechts-
     oder linksbuendig. */
  /* 09.09.: etwas kleiner - Hauptbild flacher, Nebenbild 78 % breit und
     abwechselnd rechts-/linksbuendig am Rand. */
  .leistung__block:nth-child(1) .leistung__bild--haupt,
  .leistung__block:nth-child(2) .leistung__bild--haupt,
  .leistung__block:nth-child(3) .leistung__bild--haupt { aspect-ratio: 16 / 9; }
  .leistung__block:nth-child(1) .leistung__bild--neben,
  .leistung__block:nth-child(2) .leistung__bild--neben,
  .leistung__block:nth-child(3) .leistung__bild--neben {
    position: static;
    width: 78%;
    margin: 0;
    aspect-ratio: 3 / 2;
  }
  .leistung__block:nth-child(1) .leistung__bild--neben,
  .leistung__block:nth-child(3) .leistung__bild--neben { justify-self: end; }
  .leistung__block:nth-child(2) .leistung__bild--neben { justify-self: start; }
}

/* ------------------------------------------------- Ihr Ergebnis: Scroll-Ring
   Die Buehne bleibt stehen, waehrend die Strecke darunter durchgescrollt
   wird. Der Fortschritt fuellt den Ring in vier Etappen mit Halt an jedem
   Punkt. Umfang bei r=104: 653.45 - dieser Wert steuert den Bogen. */
.ergebnis { padding: 0; }
/* Das eingesetzte Bild des Seitenkopfs ragt nach unten heraus - die Buehne
   beginnt deshalb erst darunter, sonst rutscht das Bild in die Zeile
   "Ihr Ergebnis" (Korrektur 08.09.). Einspaltig steht das Bild im Fluss. */
@media (min-width: 861px) { .hero-shell + .ergebnis { padding-top: clamp(3.5rem, 7vw, 6rem); } }
@media (max-width: 860px) { .hero-shell + .ergebnis { padding-top: clamp(2rem, 6vw, 3rem); } }
/* Wink (nur einspaltig, 09.09.): sagt, dass Wischen den Kreis fuellt und
   Zurueckwischen ihn leert - Rueckmeldung war, dass man nicht wusste, wie
   man weiter- oder zurueckkommt. Verschwindet mit dem Schluss. */
.ergebnis__wink { display: none; }
.ergebnis__strecke { position: relative; height: 300vh; }
/* Rastmarken fuer das native Scroll-Snapping (Lage setzt main.js). Solange
   die Buehne laeuft, traegt html die Klasse schnappt. */
html.schnappt { scroll-snap-type: y mandatory; }
/* Touch: kein Umschalten waehrend der Bewegung (greift auf iOS nicht
   zuverlaessig), sondern dauerhaft die Naehe-Variante - sie zieht nur an,
   wenn eine Marke in der Naehe liegt, sonst laeuft die Seite frei (09.09.). */
/* Touch: kein Browser-Snapping mehr (10.09.) - es zog bei Schwung ueber
   zwei Marken weiter, das Einrasten dann zurueck. Jetzt rastet allein das
   Skript ein: Ausgangsmarke beim Aufsetzen, Ziel die Nachbarmarke. */
@media (pointer: coarse) { html { scroll-snap-type: none; } }
.standard__marke,
.ergebnis__marke {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.ergebnis__buehne {
  position: sticky;
  /* Der Seitenkopf klebt oben - die Buehne beginnt darunter, sonst liegt
     die erste Zeile dahinter. */
  --kopf: clamp(72px, 8vh, 96px);
  top: var(--kopf);
  /* svh statt vh: auf iOS ist 100vh groesser als der sichtbare Bereich,
     der Inhalt rutschte dort unter die Browserleiste. Und nicht dvh: das
     aendert sich, sobald die Browserleiste beim Scrollen ein- oder
     ausfaehrt, die Buehne baute sich dann mitten in der Bewegung um -
     das war das Ruckeln auf dem Handy (Korrektur 08.09.). */
  height: calc(100vh - var(--kopf));
  height: calc(100svh - var(--kopf));
  /* bis zur Unterkante des grossen Fensters, Inhalt bleibt im kleinen -
     sonst laeuft unter der Buehne ein Streifen mit (14.10., wie .standard__buehne) */
  height: calc(100svh - var(--kopf) + var(--leiste));
  padding-bottom: var(--leiste);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.ergebnis__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Der Ring gehoert auf die Hoehe der Punkte, nicht auf die des ganzen
   Textblocks. Zeile und Ueberschrift zaehlten sonst mit und schoben ihn
   optisch nach oben. Dafuer loest sich der Textblock auf und Zeile,
   Ueberschrift und Liste liegen direkt im Raster. */
.ergebnis__text { display: contents; }
.ergebnis__text .eyebrow { grid-column: 1; grid-row: 1; }
.ergebnis__text h2 {
  grid-column: 1; grid-row: 2;
  max-width: 20ch; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.ergebnis__punkte { grid-column: 1; grid-row: 3; }
.ergebnis__ring   { grid-column: 2; grid-row: 3; align-self: center; }


.ergebnis__punkte { display: grid; gap: clamp(.6rem, 1.4vw, 1rem); }
.ergebnis__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.6rem, 1.4vw, 1rem); }
.ergebnis__punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem clamp(.75rem, 1.6vw, 1.25rem);
  align-items: baseline;
  /* Die Punkte stehen nicht vorab da, sie kommen mit ihrer Etappe. Der Platz
     bleibt trotzdem reserviert, sonst ruckt das Raster bei jedem Halt. */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.ergebnis__punkt.is-aktiv { opacity: 1; transform: none; }
.ergebnis__nr { font-family: var(--serif); font-size: .82rem; color: var(--orange); line-height: 1.2; }
.ergebnis__wort { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.65rem); line-height: 1.2; }
.ergebnis__satz {
  grid-column: 2;
  font-size: .78rem; line-height: 1.7; max-width: 42ch;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .45s ease .1s, max-height .45s ease;
}
.ergebnis__punkt.is-aktiv .ergebnis__satz { opacity: .78; max-height: 5rem; }
/* Der Nutzen ist der Kern der Aussage - deshalb abgesetzt und in der
   Signetfarbe, wie die Ergebniszeilen im Fahrplan. */
.ergebnis__nutzen {
  grid-column: 2;
  font-size: .76rem;
  line-height: 1.6;
  max-width: 42ch;
  color: var(--brown);
  border-left: 2px solid var(--orange);
  padding-left: .7rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .45s ease .22s, max-height .45s ease .1s;
}
.ergebnis__nutzen em {
  font-style: normal;
  font-family: var(--tenor);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  display: block;
  margin-bottom: .2rem;
}
.ergebnis__punkt.is-aktiv .ergebnis__nutzen { opacity: 1; max-height: 6rem; margin-top: .45rem; }

/* ---- Ring ---- */
.ergebnis__ring { position: relative; width: clamp(200px, 31vw, 385px); aspect-ratio: 1; }
.ergebnis__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ergebnis__spur, .ergebnis__bogen { fill: none; stroke-width: 6; }
.ergebnis__spur { stroke: var(--line-light); }
.ergebnis__bogen {
  stroke: url(#ergebnis-verlauf);
  stroke-linecap: round;
  stroke-dasharray: 653.45;
  stroke-dashoffset: 653.45;
  /* kein Uebergang am Desktop: er lief nicht auf der Grafikkarte und wurde
     bei jedem Bild neu berechnet (Profil 08.09.). */
}
/* Der Ring springt in festen Vierteln (11.09.) - fuenf Wechsel insgesamt,
   deshalb darf die Fuellung weich hinueberlaufen, auf allen Geraeten. */
.ergebnis__bogen { transition: stroke-dashoffset .55s cubic-bezier(.22, .61, .36, 1); }
.ergebnis__laeufer { transition: cx .55s cubic-bezier(.22, .61, .36, 1), cy .55s cubic-bezier(.22, .61, .36, 1), r .3s ease; }
/* Laeufer: Lichtpunkt am Ende des Bogens */
.ergebnis__laeufer {
  fill: var(--orange);
  stroke: var(--paper);
  stroke-width: 3;
  transition: r .3s ease;   /* cx/cy ohne Uebergang, kein Schatten-Filter: beides kostete jedes Bild (Profil 08.09.) */
}
.ergebnis__ring.is-rastet .ergebnis__laeufer { r: 11; }
/* Haltemarken */
.ergebnis__halt {
  fill: var(--paper); stroke: var(--line-light); stroke-width: 2;
  transition: fill .35s ease, stroke .35s ease;
}
.ergebnis__halt.is-erreicht { fill: var(--orange); stroke: var(--orange); }

/* ---- Ringmitte: Nummer, Wort, Prozent ---- */
.ergebnis__mitte {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: .15rem; text-align: center; padding: 22%;
  color: var(--brown);
}
.ergebnis__mitte-nr {
  font-family: var(--serif); font-size: .78rem; color: var(--orange);
  letter-spacing: .1em;
}
.ergebnis__mitte-wort {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.65rem);
  line-height: 1.15;
  transition: opacity .25s ease, transform .25s ease;
}
.ergebnis__ring.is-wechselt .ergebnis__mitte-wort { opacity: 0; transform: translateY(4px); }
.ergebnis__mitte-wert {
  font-family: var(--serif); font-size: .8rem; opacity: .5;
  font-variant-numeric: tabular-nums; margin-top: .1rem;
}

/* Schlusszustand: der ganze Satz steht in der Ringmitte, kursiv wie die
   ausgezeichneten Woerter in den Ueberschriften. Der Innenrand rueckt dafuer
   zurueck und die Schrift wird kleiner. Der Prozentwert verschwindet -
   "Mehr Wirtschaftlichkeit" und "100 %" nebeneinander liesse sich als Zusage
   von hundert Prozent mehr Wirtschaftlichkeit lesen. */
.ergebnis__ring.is-abschluss .ergebnis__mitte { padding: 13%; }
.ergebnis__ring.is-abschluss .ergebnis__mitte-wort {
  font-size: clamp(.82rem, 1.35vw, 1.05rem);
  line-height: 1.3;
  font-style: italic;
}
/* 16.09.: die 100 % sind im Schluss wieder verborgen - neben "Mehr
   Wirtschaftlichkeit fuer Ihr Unternehmen" liest sich die Zahl wie eine
   Zusage von hundert Prozent mehr Wirtschaftlichkeit. */
.ergebnis__ring.is-abschluss .ergebnis__mitte-wert { display: none; }
/* 17.09.: und zwar schon, sobald der Ring voll ist - nicht erst mit dem
   Schlusswort. Vorher stand die 100 % auf dem Weg dorthin noch in der
   Mitte. Die Etappenwerte 0/25/50/75 % bleiben unberuehrt. */
.ergebnis__ring.is-voll .ergebnis__mitte-wert { display: none; }

/* Der Knopf steht unter dem Ring in der Buehne und blendet mit dem
   Schlusswort ein - so ist er in dem Moment zu sehen, in dem sich der Kreis
   schliesst, und nicht erst weit darunter. */
.ergebnis__cta {
  grid-column: 2; grid-row: 4;
  justify-self: center;
  margin-top: clamp(1rem, 2.4vw, 1.75rem);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .5s ease .1s, transform .5s cubic-bezier(.22,.61,.36,1) .1s;
}
.ergebnis__raster.is-abschluss .ergebnis__cta { opacity: 1; transform: none; pointer-events: auto; }
/* Der Satz unter dem Ring ist im Schluss leer, behaelt aber seine Hoehe.
   Gab er sie frei, rutschte die ganze Buehne um 51 px nach - genau in dem
   Moment, in dem der Knopf erscheint. */

.ergebnis__mobilsatz { display: none; }

/* --------------------------------------------- Startseite: Die Realitaet
   Neue Sektion direkt unter dem Seitenkopf (Wunsch 07.09., nach Vorlage):
   links die Frage und die Kennzahl, rechts drei nummerierte Punkte mit
   feinen Trennlinien. */
.realitaet__raster {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 52fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.realitaet .eyebrow { color: var(--orange); opacity: 1; }
.realitaet h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 14ch; }
.realitaet__satz { margin-top: 1.75rem; max-width: 40ch; }
.realitaet__zahl {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: 1.5rem;
  border-left: 1px solid var(--orange);
  max-width: 30ch;
}
.realitaet__zahl strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  line-height: 1;
  color: var(--text-light-strong);
  margin-bottom: .6rem;
}
.realitaet__zahl span { display: block; font-size: .76rem; line-height: 1.7; opacity: .8; }
.realitaet__cta { margin-top: clamp(2rem, 4vw, 3rem); }
.realitaet__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--orange);
}
.realitaet__punkt {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-dark);
}
.realitaet__kenn { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 .9rem; }
.realitaet__nr { font-family: var(--serif); font-style: italic; font-size: 1.15rem; opacity: .6; line-height: 1; }
.realitaet__thema {
  font-family: var(--tenor);
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--orange);
}
.realitaet__punkt h3 { font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-style: normal; margin-bottom: .75rem; }
.realitaet__punkt p:last-child { font-size: .82rem; line-height: 1.85; margin: 0; }
@media (max-width: 860px) {
  .realitaet__raster { grid-template-columns: 1fr; gap: 2.5rem; }
  .realitaet h2 { max-width: none; }
}

/* Ab dieser Breite ist Platz fuer die geteilte Anordnung: 01 und 02 links
   vom Ring, 03 und 04 rechts, der Ring mittig dazwischen. Darunter waeren
   die Spalten neben dem Ring zu schmal fuer die Nutzensaetze - dort bleibt
   es bei allen vier Punkten links. Die beiden Haelften sind eigene Listen,
   damit jede Seite fuer sich stapelt: sonst zoege ein aufgeklappter Punkt
   links den gegenueberliegenden rechts mit nach unten. */
@media (min-width: 1100px) {
  .ergebnis__raster {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: clamp(1.75rem, 3.2vw, 3.25rem);
  }
  .ergebnis__text .eyebrow,
  .ergebnis__text h2 { grid-column: 1 / -1; }
  .ergebnis__punkte { display: contents; }
  .ergebnis__liste:nth-of-type(1) { grid-column: 1; grid-row: 3; align-self: start; }
  .ergebnis__liste:nth-of-type(2) { grid-column: 3; grid-row: 3; align-self: start; }
  .ergebnis__ring { grid-column: 2; grid-row: 3; align-self: center; }
  .ergebnis__cta  { grid-column: 2; grid-row: 4; }
  .ergebnis__satz, .ergebnis__nutzen { max-width: 34ch; }
}

@media (max-width: 860px) {
  /* Ring zentral, die Stufen darunter nur als Woerter - der Satz der
     aktiven Stufe steht unter dem Ring. So passt der Abschnitt auch auf
     kleine Fenster, ohne dass etwas unter den Rand rutscht. */
  /* Korrektur 07.09.: laengere Strecke, damit der Schluss mit dem Knopf
     nach der vierten Etappe stehen bleibt statt gleich weiterzulaufen
     (der Ring ist dafuer schon bei 62 % voll, siehe main.js). */
  /* Rastpunkte einen ganzen Bildschirm auseinander (Ring bei 87 % voll,
     vier Etappen auf 4 x 100vh): ein Wisch = ein Punkt (09.09.). */
  .ergebnis__strecke { height: 560vh; }
  .ergebnis__buehne { align-items: center; }
  /* enger gesetzt, damit Ring, Nummern, Satz und Knopf auch auf kleinen
     Handys (640 px Hoehe) zusammen in die Buehne passen */
  .ergebnis__raster { grid-template-columns: 1fr; justify-items: center; gap: clamp(.9rem, 2.5vw, 1.4rem); }
  .ergebnis__text .eyebrow { margin-bottom: .9rem; }
  .ergebnis__text { display: contents; }
  /* einspaltig zaehlt wieder die Reihenfolge, nicht die feste Rasterlage */
  .ergebnis__text .eyebrow,
  .ergebnis__text h2,
  .ergebnis__punkte,
  .ergebnis__liste,
  .ergebnis__cta,
  .ergebnis__ring { grid-column: auto; grid-row: auto; }
  .ergebnis__cta { order: 7; justify-self: center; margin-top: clamp(.6rem, 2vw, 1rem); }
  .ergebnis__wink {
    display: flex; order: 6; align-items: center; gap: .6rem;
    font-family: var(--tenor); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--brown); opacity: .7; margin: 0; transition: opacity .35s ease;
  }
  .ergebnis__wink svg { width: 12px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: wink-wippen 1.8s ease-in-out infinite; }
  .ergebnis__raster.is-abschluss ~ .ergebnis__wink, .ergebnis__raster.is-abschluss .ergebnis__wink { opacity: 0; }
  @keyframes wink-wippen { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 2px; } }
  .ergebnis__text .eyebrow { order: 1; text-align: center; }
  .ergebnis__text h2 {
    order: 2; text-align: center; max-width: 24ch; margin-bottom: 0;
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .ergebnis__ring { order: 3; width: clamp(170px, 48vw, 240px); }
  .ergebnis__punkte {
    order: 4;
    display: flex;
    gap: clamp(.6rem, 3vw, 1.2rem);
    width: min(88vw, 30rem);
    justify-content: center;
  }
  .ergebnis__liste {
    flex: 1;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(.6rem, 3vw, 1.2rem);
  }
  .ergebnis__punkt { grid-template-columns: 1fr; gap: 0; justify-items: center; text-align: center; }
  /* Die Saetze wandern unter den Ring - im Fluss, damit sie eigenen Platz
     beanspruchen und nichts ueberlagern. */
  .ergebnis__satz, .ergebnis__nutzen { display: none; }
  /* Korrektur 07.09.: Die Buehne sprang bei "Aussenwirkung", weil der
     laengste Satz auf schmalen Handys hoeher wurde als die feste
     Mindesthoehe. Jetzt liegen alle vier Saetze uebereinander im selben
     Rasterfeld (main.js baut sie einmal auf), nur der aktive ist sichtbar -
     die Hoehe ist immer die des laengsten, egal wie breit das Fenster ist. */
  .ergebnis__mobilsatz {
    display: grid;
    order: 5;
    width: min(88vw, 36ch);
    margin: 0;
    font-size: .8rem; line-height: 1.6; text-align: center;
  }
  .ergebnis__mobilsatz > span {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity .25s ease;
  }
  .ergebnis__mobilsatz > span.is-aktiv { opacity: .85; }
  /* Die vier Woerter passen nebeneinander nicht in schmale Fenster - dort
     bleibt die Nummernreihe, das Wort selbst steht im Ring. Nicht per
     display:none, damit Vorleseprogramme es weiter finden. */
  .ergebnis__wort {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ergebnis__punkt {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: center;
    padding-bottom: .3rem;
    border-bottom: 2px solid transparent;
    transition: opacity .5s ease, border-color .4s ease;
    /* Einspaltig ist die Nummernreihe die Fortschrittsanzeige - sie bleibt
       sichtbar, auch wenn die Etappe noch nicht erreicht ist. Das Wort
       selbst steht ohnehin im Ring. */
    opacity: .35;
    transform: none;
  }
  .ergebnis__punkt.is-aktiv { border-bottom-color: var(--orange); }
  .ergebnis__nr { font-size: .74rem; }
  .ergebnis__mobilsatz b {
    display: block;
    font-family: var(--tenor);
    font-weight: 400;
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .25rem;
  }
  .ergebnis__ring.is-wechselt ~ .ergebnis__mobilsatz > span { opacity: 0; }
  .ergebnis__mitte-wort { font-size: clamp(.95rem, 4.4vw, 1.2rem); }
  .ergebnis__cta { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .ergebnis__strecke { height: auto; }
  .ergebnis__buehne { position: static; height: auto; padding-block: var(--sec); overflow: visible; }
  .ergebnis__punkt { opacity: 1; transform: none; transition: none; }
  .ergebnis__satz { opacity: .78; max-height: none; transition: none; }
  .ergebnis__nutzen { opacity: 1; max-height: none; margin-top: .45rem; transition: none; }
  .ergebnis__bogen { stroke-dashoffset: 0; transition: none; }
  .ergebnis__halt { fill: var(--orange); stroke: var(--orange); transition: none; }
  .ergebnis__laeufer { display: none; }
  @media (max-width: 860px) {
    .ergebnis__satz, .ergebnis__nutzen { display: block; }
    .ergebnis__mobilsatz { display: none; }
  }
}

/* ------------------------------------------------------------ Karten-Raster */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.card {
  border: 1px solid var(--line-light);
  background: rgba(255, 255, 255, .55);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
}
.dark .card,
.dark-block .card { border-color: var(--line-dark); background: rgba(241, 236, 227, .04); }
.card__num { font-family: var(--serif); font-size: 1.05rem; color: var(--orange); display: block; margin-bottom: .6rem; }
.card h3 { font-style: italic; margin-bottom: .85rem; }
.card p { font-size: .8rem; line-height: 1.85; margin: 0; }
.card__result { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-light); font-size: .74rem; }
.dark .card__result,
.dark-block .card__result { border-top-color: var(--line-dark); }
.card__result strong { font-weight: 600; color: var(--orange); }

/* ------------------------------------------------------------ Gruenderinnen
   Bild laeuft zum Viewport-Rand, der Name ueberlappt die Bildkante. */
.founder {
  position: relative;
  /* Ueberhang des Namens ueber die Bildkante - nie weiter als der Platz,
     der neben dem Wrap tatsaechlich frei ist, sonst laeuft der Name bei
     mittleren Breiten aus dem Fenster. */
  /* Kein Ueberhang mehr: der Name soll die Bildkante nicht ueberlaufen. */
  --name-ueberhang: 0px;
}
/* Bildspalte: die Deko-Bloecke haengen ohne Fuge am Bild, jeweils genau so
   breit. Bei Charleen unterhalb, bei Nina oberhalb - der aeussere der
   beiden ist um 90 Grad gedreht. */
.founder__spalte { display: grid; }
.founder__deko {
  width: 100%;
  aspect-ratio: 1;
  background: url("../img/halbkreise.svg") center / 100% 100% no-repeat;
  opacity: .038;
  pointer-events: none;
}
.founder__deko--quer { transform: rotate(90deg); }

/* Beide Gruenderinnen stehen nebeneinander in einem Raster: aussen die
   Bildspalten, in der Mitte die Texte. Beide Spalten sind gleich hoch
   (Bild plus zwei Quadrate), dadurch decken sich Ober- und Unterkante von
   selbst. Charleens Text sitzt oben bei ihrem Bild, Ninas unten bei ihrem,
   der Knopf in der Luecke dazwischen. */
.gruenderinnen {
  display: grid;
  grid-template-columns: minmax(0, 28fr) minmax(0, 44fr) minmax(0, 28fr);
  /* Drei Zeilen in der Mitte: Charleens Text oben, Ninas unten, dazwischen
     der Knopf. Die mittlere Zeile nimmt den Rest - so schiebt sie die
     beiden Texte auseinander, statt dass der Knopf auf einem landet. */
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
}
.founder { display: contents; }
.founder--links  .founder__spalte { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.founder--links  .founder__body   { grid-column: 2; grid-row: 1; align-self: start; }
/* Etwas Luft nach beiden Seiten: die mittlere Zeile hat bei langen Texten
   keine Reserve, sonst klebt der Knopf zwischen den beiden Absaetzen. */
.founder__cta { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; margin-block: clamp(.75rem, 2vw, 1.5rem); }
.founder--rechts .founder__body   { grid-column: 2; grid-row: 3; align-self: end; }
.founder--rechts .founder__spalte { grid-column: 3; grid-row: 1 / span 3; align-self: start; }

.founder__img { aspect-ratio: 4 / 5; overflow: hidden; }
.founder__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; filter: grayscale(1); }

/* Bild bis an den Viewport-Rand ziehen */
/* Bild laeuft nur noch halb bis zum Rand - dadurch wirkt es ruhiger. Der
   Anschnitt haengt an der Spalte, damit die Deko-Bloecke buendig mitgehen. */
/* Korrektur 07.09.: kein Anschnitt mehr - die Portraets stehen buendig im
   Raster, wie das Bild im Seitenkopf. */
.founder--links .founder__spalte  { margin-left: 0; }
.founder--rechts .founder__spalte { margin-right: 0; }
.founder__body { max-width: 520px; }
.founder--links  .founder__body { margin-right: auto; }
.founder--rechts .founder__body { margin-left: auto; }

.founder__name {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.02;
  margin: 0 0 1.75rem;
  position: relative;
  z-index: 2;
  margin-left: calc(-1 * var(--name-ueberhang));   /* ragt ueber die Bildkante */
  text-align: right;
  max-width: 8ch;
}
.founder--rechts .founder__name {
  margin-left: 0;
  margin-right: calc(-1 * var(--name-ueberhang));
  text-align: left;
  margin-left: auto;
}
/* nur der Nachname bricht um - der Punkt darin bleibt in der Zeile */
.founder__name > span { display: block; }

.founder__role {
  font-family: var(--tenor);
  font-size: clamp(.72rem, .35vw + .64rem, .92rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.6;
  margin: 0 0 1.6rem;
}
.founder__text { font-size: .85rem; line-height: 1.95; }
@media (min-width: 700px) { .founder__text { text-align: justify; hyphens: none; } }

.founder__more { margin-top: 1.5rem; }
.founder__more summary {
  font-family: var(--tenor);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding-block: .4rem;
}
.founder__more summary::-webkit-details-marker { display: none; }
.founder__more summary::before {
  content: "";
  width: 14px; height: 8px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
  transition: transform .3s ease;
}
.founder__more[open] summary::before { transform: rotate(135deg) translate(-2px, 2px); }
.founder__more p { font-size: .8rem; line-height: 1.9; margin: 1rem 0 0; }
.founder--rechts .founder__more { display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
  /* Auch die drei festen Zeilen aufheben - die 1fr-Zeile aus der
     Desktop-Anordnung hat sonst ein Bild auf Restfensterhoehe gedehnt. */
  .gruenderinnen { grid-template-columns: 1fr; grid-template-rows: auto; }
  /* Einspaltig loest sich auch die Bildspalte auf, damit Bild, Text und die
     beiden Elemente einzeln in der Reihe stehen. Nur so laesst sich der Text
     zwischen Bild und Elemente schieben - im Markup steht er dahinter. */
  .founder__spalte { display: contents; }
  /* Die Desktop-Platzierungen haengen an .founder--links/--rechts und sind
     damit spezifischer als eine Regel auf der Klasse allein - hier also
     dieselbe Schreibweise, sonst bleiben die Texte in Spalte 2 stehen. */
  .founder--links  .founder__img,  .founder--rechts .founder__img,
  .founder--links  .founder__deko, .founder--rechts .founder__deko,
  .founder--links  .founder__body, .founder--rechts .founder__body,
  .founder__cta { grid-column: 1; grid-row: auto; align-self: auto; justify-self: auto; }
  /* width:100% aus der Grundregel wuerde die negativen Aussenabstaende
     verpuffen lassen - der Block waere nur verschoben, nicht breiter. */
  .founder__img, .founder__deko { margin-inline: calc(-1 * var(--gut)); }
  .founder__deko { width: auto; }

  /* Reihenfolge: Bild, darunter der Text. Die Elemente stehen einspaltig
     nicht mehr als eigene Bloecke in der Reihe, sondern liegen als
     Hintergrund hinter dem Text - siehe unten. */
  .founder--links  .founder__img  { order: 1; }
  .founder--links  .founder__body { order: 2; }
  .founder__cta                   { order: 5; }
  .founder--rechts .founder__img  { order: 6; }
  .founder--rechts .founder__body { order: 7; }
  .founder__deko { display: none; }


  .founder__cta { margin-block: clamp(2rem, 6vw, 3rem); }
  /* etwas Luft zwischen Bild und Text und vor den Elementen */
  .founder__body { margin-block: clamp(1.25rem, 4vw, 2rem) clamp(1.75rem, 6vw, 2.75rem); }
  .founder__name { margin-inline: 0; text-align: left; max-width: none; position: relative; }
  /* Zwei Elemente rechts neben dem Namen: links das hochkante, rechts das
     quer gedrehte. Als Pseudoelemente, damit im Markup nichts dazukommt. */
  .founder__name::before,
  .founder__name::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(58px, 17vw, 84px);
    aspect-ratio: 1;
    background: url("../img/halbkreise.svg") center / 100% 100% no-repeat;
    opacity: .1;
    pointer-events: none;
  }
  .founder__name::before {
    right: calc(clamp(58px, 17vw, 84px) + .4rem);
    translate: 0 -50%;
  }
  .founder__name::after {
    right: 0;
    translate: 0 -50%;
    transform: rotate(90deg);
  }
  .founder--rechts .founder__name { text-align: left; margin-left: 0; }
  .founder--rechts .founder__more { justify-content: flex-start; }
}

/* ------------------------------------------------------- CTA-Bilder-Collage
   Zwei Bilder nebeneinander wie im Mockup, das rechte tiefer gesetzt und
   schmaler. Sie beruehren sich nicht - ueberlappen darf nur der Seitenkopf
   mit dem Video. */
.collage {
  display: grid;
  grid-template-columns: 56fr 44fr;
  column-gap: clamp(.6rem, 1.4vw, 1.1rem);
  align-items: start;
}
.collage__a { aspect-ratio: 3 / 2; width: 100%; }
.collage__b { aspect-ratio: 3 / 2; width: 100%; margin-top: clamp(2rem, 9vw, 7rem); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  /* Nebeneinander waeren beide zu klein - einspaltig und versetzt. */
  .collage { grid-template-columns: 1fr; row-gap: clamp(.9rem, 2vw, 1.5rem); margin-inline: calc(-1 * var(--gut)); }
  /* Korrektur 07.09.: volle Breite statt 74 % rechtsbuendig */
  .collage__b { width: 100%; margin: 0; }
}
/* Startseite, "Ihr erster Schritt": die Bilder groesser - die Bildspalte
   bekommt mehr Platz als die Textspalte (Korrektur 07.09.). */
.split--cta { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .split--cta { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Kontaktseite
   Formular und Kontaktdaten auf einer Hoehe, Formular zuerst. */
/* kompakte Kopfzeile, damit das Formular hoch auf der Seite steht */
.pagehead__kompakt {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  max-width: 20ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Der Abschnitt sass sehr tief unter dem Seitenkopf - das Formular soll
   frueher ins Bild kommen. */
/* Die Regel muss dieselbe Spezifitaet haben wie .hero-shell + .section--tight,
   sonst gewinnt deren Wert von bis zu 11,5 rem und nichts aendert sich. */
.hero-shell + .section--tight.kontakt--hoch { padding-top: clamp(1.25rem, 3vw, 2.5rem); }

.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.kontakt-raster__daten { padding-top: .25rem; }
/* Hierarchie (09.09.): Zeile "Kontaktdaten" groesser, die Angaben kleiner */
.kontakt-raster__daten .eyebrow { font-size: 1.15rem; letter-spacing: .22em; margin-bottom: 1.5rem; opacity: 1; color: var(--brown); }
.kontakt-raster__daten .kontakt-angaben { line-height: 1.8; font-size: .8rem; }
.kontakt-raster__daten .kontakt-angaben strong { font-size: .8rem; font-weight: 600; }
.kontakt-raster__daten .kontakt-angaben a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(207, 85, 39, .35); }
.kontakt-raster__daten .kontakt-angaben a:hover { border-bottom-color: var(--orange); }
@media (max-width: 860px) {
  .kontakt-raster { grid-template-columns: 1fr; }
  /* auf Mobil bleibt das Formular oben, die Kontaktdaten folgen darunter */
  .kontakt-raster__daten { padding-top: 0; }
  .kontakt-raster__daten .figure-frame { aspect-ratio: 3 / 2 !important; }
}

/* ---------------------------------------------------------------- Formular */
/* Kasten mit Leinenstruktur, in dem das Formular sitzt. Der Abschnitt
   traegt bereits Leinen - der Kasten hebt sich ueber Rahmen, einen
   helleren Grundton und den Schatten davon ab. */
.form-kasten {
  position: relative;
  isolation: isolate;
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background-color: var(--cream);
  border: 1px solid var(--line-light);
  box-shadow: 0 24px 60px rgba(73, 58, 53, .12);
}
.form-kasten::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/leinen.jpg");   /* Rueckfall: aeltere Safari kennen image-set() mit type() nicht (11.09.) */
  background-image: image-set(url("../img/leinen.webp") type("image/webp"),
                              url("../img/leinen.jpg") type("image/jpeg"));
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity: .8;
  mix-blend-mode: multiply;
}
.form-kasten .form { max-width: none; }

/* Gemaelde als Grund der Kontaktsektion - der Formularkasten liegt darauf.
   Darueber ein heller Schleier, damit Ueberschrift und Kasten sicher
   lesbar bleiben. */
.kontakt--gemaelde { position: relative; isolation: isolate; }
/* Ueberschrift ueber dem Formular in der hellen Schriftfarbe */
.kontakt--gemaelde > .wrap > h2 { color: var(--text-light-strong); }
.kontakt--gemaelde::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/stimmung-fluss.jpg");   /* Rueckfall: aeltere Safari kennen image-set() mit type() nicht (11.09.) */
  background-image: image-set(url("../img/stimmung-fluss.webp") type("image/webp"),
                              url("../img/stimmung-fluss.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  .kontakt--gemaelde::after { background-attachment: scroll; }
}
@media (max-width: 560px) {
  .form-kasten { margin-inline: calc(-1 * var(--gut) / 2); padding: 1.5rem 1.25rem; }
}

.form { max-width: 560px; margin-inline: auto; }
.form--breit { max-width: none; margin-inline: 0; }
.form--breit .btn-row { justify-content: flex-start; }
.field { margin-bottom: 1.4rem; }
.field > label {
  display: block;
  font-size: .68rem;
  letter-spacing: .06em;
  margin-bottom: .5rem;
  color: var(--text-light);
}
.light .field > label { color: var(--brown); }
.field input,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--text-light-strong);
  background: rgba(241, 236, 227, .03);
  border: 1px solid rgba(241, 236, 227, .3);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  transition: border-color .25s ease, background .25s ease;
}
/* Variante auf hellem Grund */
.light .field input,
.light .field textarea { color: var(--brown); background: rgba(255, 255, 255, .6); border-color: var(--line-light); }
.light .field input::placeholder, .light .field textarea::placeholder { color: rgba(73, 58, 53, .4); }
.light .field input:focus, .light .field textarea:focus { border-color: var(--orange); background: #FFF; }
.light .form__note { border-color: var(--line-light); border-left-color: var(--orange); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--orange); background: rgba(241, 236, 227, .07); }
.field input::placeholder, .field textarea::placeholder { color: rgba(241, 236, 227, .35); }
.field--invalid input, .field--invalid textarea { border-color: #E4785A; }
.field__error { display: none; font-size: .68rem; color: #E4785A; margin-top: .4rem; }
.field--invalid .field__error { display: block; }

.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .7rem; line-height: 1.7; margin-bottom: 1.75rem; }
.consent input { width: 16px; height: 16px; margin-top: .25rem; flex: none; accent-color: var(--orange); }
.consent a { color: var(--orange); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note {
  display: none;
  margin-top: 1.25rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line-dark);
  border-left: 2px solid var(--orange);
  font-size: .74rem;
  line-height: 1.7;
}
.form__note.is-visible { display: block; }
/* Erfolgsmeldung nach dem Versand - gleiche Form, nur in der Signetfarbe
   statt in der Warnfarbe. */
.form__note.is-ok { border-left-color: var(--orange); }

/* Dankeskasten nach dem Absenden (ersetzt das Formular, main.js) */
.form-danke { text-align: center; padding: clamp(1rem, 3vw, 2rem) 0; }
.form-danke__zeichen {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--orange);
}
.form-danke__zeichen::before {
  content: "";
  width: 20px; height: 11px;
  border-left: 2px solid #FFF; border-bottom: 2px solid #FFF;
  transform: translateY(-3px) rotate(-45deg);
}
.form-danke h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .75rem; }
.form-danke p { max-width: 42ch; margin-inline: auto; }
.form-danke__klein { font-size: .74rem; opacity: .7; margin-top: .75rem; }

/* ---------------------------------------------- Ueberscrollen (Gummiband)
   Zieht man am Handy ueber den Fussbereich hinaus, kam darunter Weiss zum
   Vorschein. Zwei feste Flaechen ausserhalb des Fensters fahren beim
   Gummiband mit: oben Papier (passend zum Seitenkopf), unten Signetdunkel
   (passend zum Footer). Dazu die Bremse fuer Browser, die sie kennen. */
html, body { overscroll-behavior-y: none; }
body { position: relative; }
body::before, body::after {
  content: "";
  position: fixed; left: 0; right: 0; height: 100vh;
  z-index: -1; pointer-events: none;
}
body::before { top: -100vh; background: var(--paper); }
body::after  { bottom: -100vh; background: var(--ink); }

/* ------------------------------------------------ Formular in zwei Schritten
   Einspaltig stehen nur Name, Unternehmen, Telefon und E-Mail im Formular.
   "Weiter" oeffnet ein Fenster mit Nachricht, Einwilligung und Absenden -
   main.js verschiebt die Felder dorthin (09.09.). */
.form-dialog {
  border: 0; padding: 0; margin: auto;
  width: min(92vw, 440px); max-height: 90vh;
  background: var(--cream); color: var(--brown);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.form-dialog::backdrop { background: rgba(36, 29, 32, .72); backdrop-filter: blur(4px); }
.form-dialog__inner { padding: 1.75rem 1.5rem 1.5rem; }
.form-dialog__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.form-dialog__kopf h3 { font-size: 1.4rem; margin: 0; }
.form-dialog__zu {
  background: none; border: 0; cursor: pointer; color: var(--brown);
  font-family: var(--tenor); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; padding: .3rem 0;
}
.form-dialog .field textarea { min-height: 150px; }
.form-dialog .consent { margin-bottom: 1.25rem; }
.form-dialog .btn-row { justify-content: stretch; }
.form-dialog .btn-row .btn { width: 100%; }

/* ------------------------------------------------------------------ Footer */
.site-footer { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line-dark); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; }
.site-footer .mark img { height: clamp(28px, 3vw, 36px); }
.footer-nav { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); }
.footer-nav a {
  font-family: var(--tenor);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-light);
  border-bottom: 1px solid transparent;
  padding-bottom: .2rem;
  transition: border-color .25s ease, color .25s ease;
}
.footer-nav a:hover { color: var(--text-light-strong); border-bottom-color: var(--orange); }
.site-footer__legal { width: 100%; font-size: .66rem; opacity: .55; margin: 0; }
/* Social als runde Icon-Knoepfe (09.09.) */
.footer-social { display: flex; gap: .75rem; }
.footer-social__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-dark); color: var(--text-light-strong);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.footer-social__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-social__btn svg .voll { fill: currentColor; stroke: none; }
.footer-social__btn:hover { border-color: var(--orange); background: var(--orange); color: #fff; }
.footer-social__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 560px) {
  .site-footer__inner { gap: 1.5rem; }
  .footer-nav { gap: 1.25rem; width: 100%; }
}

/* --------------------------------------------------------------- Rechtstext */
.legal { max-width: 780px; }
.legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 3rem; }
.legal h3 { font-size: 1.05rem; margin-top: 2rem; font-style: italic; }
.legal h4 { font-size: .92rem; margin-top: 1.5rem; font-family: var(--sans); font-weight: 600; }
.legal p, .legal li { font-size: .82rem; line-height: 1.9; }
.legal ul { padding-left: 1.2rem; margin-bottom: 1.35rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--orange); text-underline-offset: 3px; }
.legal address { font-style: normal; line-height: 1.9; font-size: .82rem; }

.notice {
  border: 1px solid var(--orange);
  border-left-width: 3px;
  padding: 1.1rem 1.35rem;
  font-size: .78rem;
  line-height: 1.75;
  margin-bottom: 2.5rem;
  background: rgba(207, 85, 39, .05);
}
.notice strong { color: var(--orange); }

/* Kopfzone mit begleitendem Bild */
.pagehead--bild { position: relative; }
.pagehead--bild .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.pagehead--bild .pagehead__bild {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  margin-right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut)));
  margin-bottom: clamp(-4rem, -5vw, -2rem);
}
/* Zwei Bilder im Kopf: das grosse laeuft zum Rand, das kleine setzt sich
   davor - der Versatz uebernimmt der Rahmen, damit das grosse Bild seine
   bisherigen Masse behaelt. */
.pagehead--bild .pagehead__bilder {
  position: relative;
  margin-right: calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut)));
  margin-bottom: clamp(-4rem, -5vw, -2rem);
}
.pagehead--bild .pagehead__bilder .pagehead__bild { margin-right: 0; margin-bottom: 0; }
/* Zwei Bilder, bewusst versetzt statt uebereinander: das grosse oben,
   das kleinere darunter nach links ausgerueckt. Keine Ueberlappung. */
.pagehead--bild .pagehead__bilder { display: grid; }
.pagehead--bild .pagehead__bilder .pagehead__bild { grid-column: 1; }
.pagehead__bild2 {
  grid-column: 1;
  justify-self: start;
  width: 52%;
  margin-top: clamp(.75rem, 1.5vw, 1.25rem);
  margin-left: clamp(-5rem, -6vw, -2rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pagehead__bild2 img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.pagehead--bild .pagehead__bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
@media (max-width: 860px) {
  .pagehead--bild .wrap { grid-template-columns: 1fr; }
  .pagehead--bild .pagehead__bild { margin-inline: calc(-1 * var(--gut)); margin-bottom: 0; aspect-ratio: 3 / 2; }
  .pagehead--bild .pagehead__bilder { margin-inline: calc(-1 * var(--gut)); margin-bottom: 0; }
  .pagehead--bild .pagehead__bilder .pagehead__bild { margin-inline: 0; }
  .pagehead__bild2 {
    width: 66%;
    margin: .75rem 0 0 var(--gut);
    aspect-ratio: 4 / 3;
  }
}

/* ---------------------------------------------------------- Seiten-Kopfzone */
.pagehead { padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem); }
.pagehead h1 { max-width: 16ch; }
.pagehead .lead { max-width: 58ch; margin-top: 1.75rem; }

/* ------------------------------------------------------------ Scroll-Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* Bild und Text laufen leicht versetzt ein */
.reveal .leistung__bild,
.reveal .pagehead__bild,
.reveal .figure-frame {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s ease .12s, transform 1.2s cubic-bezier(.22,.61,.36,1) .12s;
}
.reveal.is-in .leistung__bild,
.reveal.is-in .pagehead__bild,
.reveal.is-in .figure-frame { opacity: 1; transform: none; }
/* Touch (09.09.): Bilder treten mit langsamem Zoom auf, sobald sie ins Bild
   kommen - wirkt lebendiger als das reine Einblenden. */
@media (hover: none) {
  .reveal.is-in .figure-frame img,
  .reveal.is-in .leistung__bild img,
  .reveal.is-in .collage img {
    animation: bild-auftritt 1.5s cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes bild-auftritt {
    from { transform: scale(1.12) translateY(10px); }
    to   { transform: none; }
  }
}
/* Das Nebenbild kommt einen Tick nach dem Hauptbild */
.reveal.is-in .leistung__bild--neben { transition-delay: .32s; }

/* Die vier Spalten unter "Unser Standard" haengen am Scrollen, nicht an
   einem Zeitversatz: je weiter der Block ins Bild kommt, desto mehr Spalten
   stehen da. Wer anhaelt, haelt die Reihe an. Den Zustand setzt main.js
   ueber [data-staffel], hier stehen nur die beiden Zustaende. */
[data-staffel] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
[data-staffel] > .is-da { opacity: 1; transform: none; }

/* Zeilen einer Leistung staffeln */
.reveal .frage { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in .frage { opacity: 1; transform: none; }
.reveal.is-in .frage:nth-child(1) { transition-delay: .10s; }
.reveal.is-in .frage:nth-child(2) { transition-delay: .22s; }
.reveal.is-in .frage:nth-child(3) { transition-delay: .34s; }

/* Bild im Bildausschnitt sanft mitziehen */
.leistung__bild img, .pagehead__bild img { transition: transform 1.4s cubic-bezier(.22,.61,.36,1); }
.leistung__block:hover .leistung__bild img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal .leistung__bild, .reveal .pagehead__bild, .reveal .figure-frame,
  .reveal .frage, [data-staffel] > * { opacity: 1; transform: none; transition: none; }
  .leistung__block:not(.is-in) .leistung__nr { color: var(--orange); }
  .leistung__block .leistung__nr::after { opacity: 1; transform: none; }
  .leistung__block:hover .leistung__bild img { transform: none; }
}

/* ---------------------------------------------- Lichtkegel am Zeiger
   Wunsch 08.09.: Auf allen dunklen Flaechen folgt ein weicher Lichtschein
   dem Zeiger im Signet-Orange des Brandkits. main.js legt das Element in jede dunkle Flaeche und
   setzt --gx/--gy. Nur mit Maus oder Trackpad, nie am Touchscreen. */
.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  /* Signet-Orange #CF5527 aus dem Brandkit, bewusst zurueckhaltend (08.09.) */
  background: radial-gradient(440px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(207, 85, 39, .22) 0%,
    rgba(207, 85, 39, .10) 40%,
    rgba(207, 85, 39, 0) 72%);
}
.glow.is-an { opacity: 1; }
.dark > .glow, .dark-block > .glow { z-index: 0; }   /* unter dem Inhalt (z 1) */
.hero > .glow { z-index: 3; }                        /* ueber Video, Schleier und Korn, unter dem Text */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .glow { display: none; } }

/* ------------------------------------------------------------ Ladeschirm
   Wunsch 08.09.: Vor dem Oeffnen der Seite setzt sich das Signet Teil fuer
   Teil zusammen - Strich, n, c, Halbkreis. Die Grundabdeckung steht als
   Inline-Stil im Kopf jeder Seite, damit nichts aufblitzt; hier die
   Animation und das Ausblenden (main.js setzt is-fertig). */
.lader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.lader::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("../img/struktur-braun.jpg");   /* Rueckfall: aeltere Safari kennen image-set() mit type() nicht (11.09.) */
  background-image: image-set(url("../img/struktur-braun.webp") type("image/webp"),
                              url("../img/struktur-braun.jpg") type("image/jpeg"));
  background-size: 200px 200px;
  opacity: .75;
}
.lader.is-fertig { opacity: 0; visibility: hidden; }
.lader svg { position: relative; width: clamp(130px, 22vw, 230px); height: auto; overflow: visible; }
/* Strich zeichnet sich von oben nach unten (Pfadlaenge 341, Vorzeichen = Richtung) */
.lader__strich { stroke-dasharray: 350; stroke-dashoffset: -350; animation: lader-strich .6s cubic-bezier(.4, 0, .2, 1) .15s forwards; }
.lader__n { opacity: 0; transform: translateX(-16px); animation: lader-teil .6s cubic-bezier(.22, .61, .36, 1) .6s forwards; }
.lader__c { opacity: 0; transform: translateX(16px);  animation: lader-teil .6s cubic-bezier(.22, .61, .36, 1) .85s forwards; }
.lader__punkt {
  opacity: 0; transform: scale(.3);
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: lader-punkt .45s cubic-bezier(.34, 1.56, .64, 1) 1.2s forwards;
}
@keyframes lader-strich { to { stroke-dashoffset: 0; } }
@keyframes lader-teil   { to { opacity: 1; transform: none; } }
@keyframes lader-punkt  { to { opacity: 1; transform: none; } }
html.laedt { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lader { display: none; } }

/* --------------------------------------------- Ergaenzungen 10.09. (Desktop)
   Die braune Sektion unter dem Hero bekommt denselben seitlichen Rand wie
   der Hero; der Wink am Ring erscheint auch mehrspaltig, mit "Scrollen"
   statt "Wischen". */
.nur-desktop { display: none; }
@media (min-width: 561px) { .nur-desktop { display: inline; } }
@media (min-width: 861px) {
  .realitaet { margin-inline: clamp(1rem, 3.5vw, 3rem); }
  .realitaet-rahmen { overflow: visible; }
  .ergebnis__wink {
    display: flex; grid-column: 2; grid-row: 4; justify-self: center; align-items: center; gap: .6rem;
    font-family: var(--tenor); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--brown); opacity: .7; margin: 1.1rem 0 0; transition: opacity .35s ease;
  }
  .ergebnis__wink svg { width: 12px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: wink-wippen 1.8s ease-in-out infinite; }
  .ergebnis__raster.is-abschluss .ergebnis__wink { opacity: 0; }
  .ergebnis__cta { grid-row: 5; }
  @keyframes wink-wippen { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 2px; } }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orange); color: #FFF; padding: .75rem 1.25rem; font-size: .8rem;
}
.skip:focus { left: .5rem; top: .5rem; }