/* dynamicupscale.com
   Digitale Kundengewinnung und KÜNI als digitaler Assistent. Der Weg von
   der Aufmerksamkeit bis zum vorbereiteten Termin ist das tragende
   Element der Seite. Die Demo bringt ihr eigenes Blatt mit:
   assets/kueni.css.

   Gestaltungsregeln, bewusst gesetzt:
   - keine gesperrten Versal-Labels über jeder Überschrift
   - keine Rasterlandschaft aus gleichen abgerundeten Karten
   - kein Pfeil im Schaltflächentext
   - Bewegung an zwei Stellen, nicht auf jedem Abschnitt

   Zwei Farben mit klarer Aufgabe, sie treffen nie aufeinander:
   Bernstein für Hauptschaltfläche, Messpunkte, aktive Stufe und die
   empfohlene Paketkarte. Cyan ausschließlich für die Marke KÜNI und
   was unmittelbar zu ihr gehört.
   Die frühere Regel "kein farbig hervorgehobenes Wort in Überschriften"
   gilt weiter, mit einer bewussten Ausnahme: KÜNI ist ein Markenname
   und wird überall gleich ausgezeichnet, auch in Überschriften. */

/* ---------- Tokens ---------- */
:root {
  --ink:        #0C1C22;
  --ink-soft:   #152B33;
  --paper:      #F4F7F7;
  --paper-warm: #E7EFEF;
  --white:      #FFFFFF;
  --slate:      #556A70;
  --slate-dim:  #7A8E93;   /* nur große, dekorative Ziffern */
  --rule:       #D2DDDD;
  --rule-dark:  rgba(244,247,247,.16);
  --signal:     #C9922E;
  --signal-lit: #E3AC45;
  /* ---- Markenfarbe KÜNI ----
     EIN Wert, ausnahmslos. Vom Kunden festgelegt.
     Jede Stelle, an der das Wort KÜNI erscheint, trägt genau diesen Ton:
     im Fließtext, in Überschriften, auf Schaltflächen, auf hellem und
     auf dunklem Grund, in der großen Wortmarke und in den Texten, die
     die Demo zur Laufzeit einfügt.
     Es gibt keine helle Variante und keine Ausnahme mehr. */
  --ku-marke:   #006277;

  /* Abgeleitete Töne, ausschließlich für Linien, Flächen und Symbole.
     Niemals für das Wort KÜNI selbst. */
  --cyan:       #1E9DBA;
  --cyan-lit:   #35BCD8;
  --cyan-brand: #0EA0BE;
  --cyan-deep:  #006277;
  --cyan-soft:  rgba(0,98,119,.12);

  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad-x: clamp(20px, 5vw, 72px);
  --pad-y: clamp(64px, 8vw, 132px);
  --maxw: 1240px;
  --header-h: 76px;

  --ease: cubic-bezier(.22,.75,.2,1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font: 400 17px/1.65 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  letter-spacing: -.028em;
  text-wrap: balance;
  /* Lange deutsche Komposita dürfen brechen statt abgeschnitten zu werden.
     Silbentrennung wo der Browser sie kann, sonst harter Umbruch. */
  overflow-wrap: break-word;
}

a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: rgba(201,146,46,.24); }

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

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; }
.section { padding: var(--pad-y) var(--pad-x); }
.section--dark { background: var(--ink); color: rgba(244,247,247,.86); }
/* h1 muss mit hinein, sonst steht die Überschrift einer Unterseite
   dunkel auf dunklem Grund. */
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--paper); }
.section--warm { background: var(--paper-warm); }
.section--rule { border-top: 1px solid var(--rule); }

/* Asymmetrisches Raster: schmale Überschriftenspalte, breite Inhaltsspalte.
   Umgekehrt zur üblichen Aufteilung, damit der Text Luft bekommt. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

/* ---------- Typografie ---------- */
h1 {
  font-weight: 800;
  font-size: clamp(34px, 14px + 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -.038em;
}
/* Galt bisher nur unter 620 px. Darueber fiel ein zu langes Kompositum auf
   "overflow-wrap: break-word" zurueck und wurde an einer beliebigen Stelle
   getrennt: aus "Werbekampagnen" wurde bei 1120 px "kampagne" und in der
   naechsten Zeile ein einzelnes "n". Mit hyphens: auto trennt der Browser
   stattdessen nach den Regeln von lang="de". */
h1, h2, h3 { hyphens: auto; }
h2 {
  font-weight: 700;
  font-size: clamp(27px, 17px + 2.6vw, 46px);
  line-height: 1.1;
}
h3 { font-size: clamp(19px, 14px + 1.1vw, 24px); line-height: 1.25; }

.lead { font-size: clamp(18px, 14px + .9vw, 21px); line-height: 1.55; color: var(--slate); max-width: 62ch; }
.section--dark .lead { color: rgba(244,247,247,.86); }
.section--dark a.link-on-dark { color: var(--signal-lit); text-underline-offset: 3px; }
.prose { max-width: 64ch; }
.prose p + p { margin-top: 1.1em; }
.note { font-size: 15px; line-height: 1.6; color: var(--slate); }
.section--dark .note { color: rgba(244,247,247,.66); }

/* ---------- Markenzeichen KÜNI ----------
   KÜNI ist eine eigene Marke und soll im Fließtext nicht wie ein
   gewöhnliches Wort aussehen. Gesetzt wird sie in der Displayschrift mit
   etwas mehr Laufweite, angelehnt an das Logo. Die Farbe wechselt mit dem
   Untergrund, damit der Kontrast überall stimmt.
   Bewusst kein Rahmen, kein Hintergrund, keine Versalien-Umformung: das
   Wort steht ohnehin in Großbuchstaben und soll ruhig bleiben. */
.ku,
.kubrand__mark,
.kd__id b {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .045em;
  color: var(--ku-marke);
  white-space: nowrap;
}

/* In Überschriften läuft die Marke etwas enger, damit sie sich in die
   Überschriftentypografie einfügt. Die Farbe bleibt gleich. */
h1 .ku, h2 .ku, h3 .ku { letter-spacing: .02em; }

/* Sicherheitsnetz: keine Regel darf die Markenfarbe überschreiben.
   Wenn irgendwo doch etwas dazwischenfunkt, gewinnt diese Zeile. */
.ku, .kubrand__mark, .kd__id b { color: var(--ku-marke) !important; }

/* ---------- Die Marke auf dunklem Grund ----------
   #006277 ist ein tiefer Ton. Auf dunklen Flächen käme er nur auf 2,5:1
   und würde verschwinden.
   Statt die Farbe zu ändern bekommt die Marke dort eine helle Platte
   unter sich. Die Farbe bleibt exakt gleich, sie steht nur auf hellem
   statt auf dunklem Grund. Das entspricht der Art, wie ein Logo immer
   auf seiner eigenen Fläche sitzt.
   Die Platte ist knapp geschnitten und leicht getönt, damit sie nicht
   wie ein Textmarker wirkt. */
.section--dark .ku,
.hero .ku,
.closer .ku,
.site-header .ku,
.site-footer .ku,
.bildkopf .ku,
.sticky-cta .ku,
/* Die Ablaufkette ist eine dunkle Flaeche innerhalb eines hellen
   Abschnitts. Ohne diese Zeile stuende die Marke dort auf 2,5:1. */
.ablauf .ku,
.kd__head .kd__id b {
  background: #DCEEF2;
  padding: .08em .34em .12em;
  border-radius: 3px;
  /* Der Kasten soll die Zeilenhöhe nicht auseinandertreiben. */
  margin: 0 .04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* In Überschriften wirkt die Platte als Teil der Wortmarke. Etwas mehr
   Luft, damit sie zur Schriftgröße passt. */
.section--dark h1 .ku,
.section--dark h2 .ku,
.section--dark h3 .ku,
.hero h1 .ku,
.bildkopf h1 .ku,
.bildkopf h2 .ku {
  padding: .06em .26em .1em;
  border-radius: 4px;
}

/* In der Navigation knapper geschnitten, sonst wird die Zeile unruhig. */
.site-header .nav .ku { padding: .1em .28em .14em; margin: 0 .02em; }
/* Im Knopf sitzt die Marke schon in einer Flaeche. Dort liegt die Platte
   enger am Wort, sonst entsteht ein Kasten im Kasten. */
.btn .ku { padding: .06em .26em .1em; margin: 0 .02em; }

/* Auf der goldenen Schaltfläche würde eine helle Platte stören. Dort
   trägt die Marke ihre Farbe direkt, der Untergrund ist hell genug. */
.btn--primary .ku,
.kd__action--primary .ku {
  background: none;
  padding: 0;
  margin: 0;
}

/* Die grosse Wortmarke im Markenband steht frei. Damit sie ohne Platte
   auskommt, ist die Fläche dort heller angelegt, siehe .kubrand. */

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* Flex schluckt den Leerraum zwischen Kindelementen. Ohne diese Luecke
     klebte das Markenzeichen am folgenden Wort. */
  gap: .28em;
  font: 600 16px/1 var(--text);
  padding: 17px 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.btn--primary { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.btn--primary:hover { background: var(--signal-lit); border-color: var(--signal-lit); transform: translateY(-1px); }
.btn--quiet { background: none; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { border-color: var(--ink); }
/* Auf dunklem Grund — der Hero zählt hier mit dazu. */
.section--dark .btn--quiet,
.hero .btn--quiet { color: var(--paper); border-color: rgba(244,247,247,.34); }
.section--dark .btn--quiet:hover,
.hero .btn--quiet:hover { border-color: var(--paper); background: rgba(244,247,247,.06); }
.btn--sm { padding: 12px 20px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Abstandshelfer, damit im HTML keine Inline-Styles stehen müssen */
.note--spaced { margin-top: 20px; }
.btn-row--spaced { margin-top: 30px; }
.split--intro { margin-bottom: clamp(30px, 4vw, 56px); }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  background: rgba(12,28,34,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule-dark);
}
/* Fortschrittsstreifen: zeigt, wie weit man ist. Sichtbarer Fortschritt
   erhöht die Bereitschaft weiterzulesen (Goal-Gradient-Effekt). */
.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 0;
  background: linear-gradient(90deg, rgba(201,146,46,.35), var(--signal) 65%, var(--signal-lit));
  /* Der Schein liegt in mehreren Lagen übereinander: enger heller Kern,
     weiche Aura, breiter Schimmer. Dieselben zwei Goldtöne wie überall,
     nur unterschiedlich weit gestreut. */
  box-shadow:
    0 0  3px rgba(227,172,69,.95),
    0 0  9px rgba(227,172,69,.70),
    0 0 20px rgba(201,146,46,.48),
    0 0 38px rgba(201,146,46,.26);
  will-change: width;
}

/* Das Licht tritt nach unten aus der Kante aus, wie bei einem Strahl. */
.scroll-progress::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 22px;
  background: linear-gradient(180deg, rgba(227,172,69,.22), rgba(227,172,69,0));
  pointer-events: none;
}

/* flex: none, sonst quetscht der Kopf zwischen 900 und 1240 px zuerst das
   Logo auf null Breite, weil die Menuepunkte dort nicht mehr umbrechen. */
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header__logo img { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font: 500 15.5px/1 var(--text);
  color: rgba(244,247,247,.86);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover,
.nav a[aria-current="true"],
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--signal); }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-phone {
  font: 500 15.5px/1 var(--text); color: rgba(244,247,247,.86);
  text-decoration: none; white-space: nowrap;
}
.header-phone:hover { color: var(--paper); }
.nav__meta { display: none; }

/* Zwischen dem Klappmenue (bis 900 px) und dem breiten Schirm teilen sich
   sechs Menuepunkte, Telefonnummer und Schaltflaeche eine Zeile. Ohne
   nowrap brachen "Unser System", "KUENI kennenlernen", "Ueber uns" und die
   Schaltflaeche in zwei Zeilen um; der Kopf sah auf einem 1366er Notebook
   gedraengt aus. Ab 1240 px ist wieder Platz fuer die normalen Abstaende. */
.nav a, .header-actions .btn { white-space: nowrap; }
@media (max-width: 1240px) {
  .nav { gap: 18px; }
  .nav a { font-size: 15px; }
  .header-actions { gap: 12px; }
}

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: rgba(244,247,247,.07);
  border: 1px solid rgba(244,247,247,.42);
  border-radius: 2px; color: var(--paper); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.burger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
  transition: transform .26s var(--ease), top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] { background: rgba(201,146,46,.18); border-color: var(--signal); color: var(--signal-lit); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
/* Die untere Polsterung kam frueher von der Ablaufleiste, die unten im
   Hero stand und ihr eigenes padding-bottom mitbrachte. Seit die Leiste
   dem Beweisblock gewichen ist, muss der Abschnitt sie selbst tragen,
   sonst klebt der Inhalt auf der Kante. */
.hero {
  position: relative; overflow: hidden;
  color: rgba(244,247,247,.88);
  padding: clamp(46px, 5.5vw, 78px) var(--pad-x) clamp(52px, 6vw, 84px);
  /* Glatter Markenton, kein Verlauf. Hier standen zuerst zwei kraeftige
     Cyan-Lichter aus der alten Handy-Fassung; die hellten den Grund so
     weit auf, dass die Karten ihren Abstand dazu verloren. */
  background: var(--ink);
}
/* Ein einziges, stumpfes Licht rechts oben, wie in der Vorlage. Es hebt
   die Ecke an, in der die Ergebniskarte liegt, ohne den Grund insgesamt
   heller zu machen. Wert aus der Entwurfsfassung uebernommen. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 83% 34%, rgba(36,82,92,.37) 0%, rgba(36,82,92,0) 53%);
}
.hero__grid { position: relative; z-index: 3; max-width: var(--maxw); margin-inline: auto; }
.hero .btn-row { margin-top: 32px; }

/* Der einzige echte Beleg, den diese Seite hat: KÜNI laeuft wirklich und
   laesst sich anfassen. Bewusst als ruhige Zeile und nicht als zweite
   Schaltflaeche — zwei gleichrangige Handlungen teilen die Aufmerksamkeit,
   und ein gesperrtes Versal-Label ueber der Ueberschrift steht im
   Playbook auf der Streichliste. */
.hero__beleg {
  margin-top: 16px;
  font: 400 14.5px/1.55 var(--text);
  color: rgba(244,247,247,.62);
  max-width: 44ch;
}
.hero__beleg a {
  color: rgba(244,247,247,.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(244,247,247,.28);
  padding-bottom: 1px;
  transition: border-color .25s ease, color .25s ease;
}
.hero__beleg a:hover { color: var(--paper); border-bottom-color: var(--signal); }

/* ---------- Erster Bildschirm: Aussage links, Beweis rechts ----------
   Uebernommen aus der Entwurfsfassung, die Giuseppe am 9. September
   freigegeben hat. Die Zahlenwerte stammen aus deren Stylesheet und
   sind bewusst nicht neu erfunden worden; nur die Farben laufen ueber
   die Marken-Variablen dieser Seite statt ueber feste Werte. */
.hero-copy { min-width: 0; }
.hero-product { position: relative; min-width: 0; padding-top: 3px; }

/* Grundfassung fuer helle Abschnitte. Im dunklen Kopfbereich steht die
   Augenbraue heller, eine Spur kleiner und weiter gesperrt — das regelt
   die Ausnahme darunter. */
.eyebrow {
  display: flex; align-items: center; gap: 13px;
  margin: 0 0 17px;
  font: 600 12px/1.5 var(--text);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate);
}
.hero .eyebrow { font-size: 11px; letter-spacing: .18em; color: #C4D4D7; }
/* Der Augenbrauentext ist seit der zusätzlichen Version ein ganzer Satz
   statt eines kurzen Labels ("Digitale Kundengewinnung für Betriebe" statt
   "Websites. Werbung. KÜNI."). In Versalien mit weiter Sperrung wirkte das
   sperrig, deshalb hier ohne Versalien und mit engerer Laufweite. */
.hero .eyebrow { text-transform: none; letter-spacing: .015em; font-size: 13px; }
.small-rule { flex: none; width: 28px; height: 1px; background: var(--signal-lit); }

/* 750 statt 700: in der Vorlage steht die Ueberschrift schwerer und
   enger als die uebrigen H1 dieser Seite. */
.hero h1 {
  max-width: 620px;
  margin-bottom: 28px;
  font-size: clamp(46px, 5.3vw, 72px);
  line-height: 1.07;
  font-weight: 750;
  letter-spacing: -.045em;
  color: var(--paper);
}
/* Das hervorgehobene Wort. Im Entwurf der Fremd-KI stand hier Gold,
   auf Giuseppes Vorlagenbild ist es der kuehle Ton. Eine Zeile, falls
   es doch Gold werden soll: var(--signal-lit). */
.hero h1 em { font-style: normal; color: var(--cyan-lit); }

.hero-description {
  margin: 0; max-width: 520px;
  font-size: clamp(16px, 14px + .5vw, 18px);
  line-height: 1.6;
  color: rgba(244,247,247,.84);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-actions .btn { min-height: 52px; gap: 13px; }
/* Die zweite Hero-Aktion ("KÜNI kennenlernen") tritt bewusst zurueck, damit
   "Kostenlos pruefen lassen" als einzige betonte Handlung stehen bleibt. */
.hero .hero-actions .btn--quiet { background: transparent; border-color: transparent; padding-inline: 6px; box-shadow: none; }
.hero .hero-actions .btn--quiet:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Erwartungssatz vor dem Erstgespraechs-Hinweis: erklaert, was der naechste
   Klick bringt, ohne die Kernaussage der Hero-Description zu wiederholen. */
.v2-expectation { max-width: 45ch; margin-top: 18px; font-size: 14px; line-height: 1.5; color: #C4D4D7; }
.hero .person--hero { margin-top: 22px; }


/* ---------- Die zwei Karten ---------- */
.product-caption {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 0 0 15px;
  font: 600 13px/1.4 var(--text);
  letter-spacing: .015em; text-transform: none;
  color: #AFC7CC;
}
/* Dieselbe Textlaenge wie bei der Augenbraue oben: die neue Bildunterschrift
   ist ein ganzer Satz ("Aus einer Nachricht wird ein vorbereitetes
   Anliegen") statt eines kurzen Labels, deshalb ohne Versalien. Die erste
   Spanne braucht eine Breitenbremse, damit "Beispiel" nicht an den Rand
   gedrueckt wird. */
.product-caption > span:first-child { max-width: 31ch; }
.product-caption > span:last-child { flex-shrink: 0; }

/* Leicht gekippt. Von Giuseppe am 9. September ausdruecklich bestaetigt:
   die eingehende Nachricht soll wie ein hereingereichter Zettel wirken
   und nicht wie ein zweites Bedienfeld der Seite. */
.message-card {
  margin: 0 13px; padding: 21px 25px;
  transform: rotate(-2deg);
  background: #1C353F;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.message-head { display: flex; align-items: center; gap: 10px; }
.avatar-dot {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #37515B; color: #E2EBED; font-size: 14px;
}
.message-head b { display: block; font: 500 13px/1.35 var(--text); color: var(--paper); }
.message-head div > span { display: block; font-size: 11px; color: #A4BDC5; }
.message-time { margin-left: auto; font-size: 12px; color: #B8CBD0; }
.message-card > p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #E1EBED; }

.product-bridge {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 21px 25px;
  font-size: 12px; color: #B7CBD0;
}
.product-bridge__linie {
  flex: none; width: 1px; height: 27px; margin: 0 7px;
  background: linear-gradient(rgba(122,168,181,.4), #7AA8B5);
}
.product-bridge__pfeil { margin-left: auto; font-size: 22px; }

/* Macht die im Hero behauptete Rueckfrage sichtbar, bevor die Ergebniskarte
   das Resultat zeigt: Frage und Kundenantwort als eigener Zwischenschritt. */
.v2-followup { margin: 0 10px 22px; font-size: 14px; line-height: 1.5; color: #DCE8EB; }
.v2-followup b { display: block; margin-bottom: 6px; font-weight: 500; }
.v2-followup__answer { margin-top: 11px; margin-left: auto; width: fit-content; padding: 8px 13px; border-radius: 8px 8px 2px 8px; background: #1C353F; }
/* In der Ergebniskarte steht dieselbe Rueckfrage schon als "Ergaenzt"-Zeile;
   die Beschriftung hier waere doppelt. */
.hero-product .v2-followup b { display: none; }
.hero-product .result-fields { margin-block: 18px 14px; }
.hero-product .result-fields > div { padding-block: 8px; }

.result-card {
  padding: 27px 29px 0;
  background: var(--white); color: var(--ink);
  border: 1px solid #D3E3E9; border-radius: 13px;
  box-shadow: 0 28px 55px rgba(0,0,0,.2);
}
.result-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.result-header .eyebrow { margin: 0 0 9px; font-size: 10px; color: #557078; }
.result-header h2 { margin: 0; font-size: clamp(24px, 2.1vw, 29px); line-height: 1.12; letter-spacing: -.03em; }
.result-check {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 19px; color: var(--cyan-deep); background: #E0F0EE;
}
.result-fields { margin: 24px 0 19px; }
.result-fields > div {
  display: grid; grid-template-columns: 1fr 1.7fr;
  padding: 10px 0; border-top: 1px solid #E3EBED; font-size: 13px;
}
.result-fields dt { color: #637980; }
.result-fields dd { margin: 0; font-weight: 500; color: var(--ink); }

/* Zieht sich ueber die volle Kartenbreite, deshalb der negative Rand. */
.result-status {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -29px; padding: 14px 29px;
  font-size: 12px; color: #215E52;
  background: #EDF5F2;
  border-top: 1px solid #DAEBE4;
  border-radius: 0 0 13px 13px;
}
.result-status i {
  display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  background: #498372; border-radius: 50%;
}
.product-footnote { margin: 12px 0 0; font-size: 11px; text-align: center; color: #9DB4BC; }

/* Zwei Spalten erst, wenn die Beweisspalte breit genug fuer die
   Feldpaare der fertigen Anfrage ist. */
@media (min-width: 1000px) {
  .hero__grid {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: clamp(35px, 4.4vw, 68px);
    align-items: center;
  }
}



/* ---------- Der Hero am Handy ----------
   Bis hierher war der Hero eine geschrumpfte Desktopfassung: sechs Zeilen
   Fliesstext, zwei gleich grosse Schaltflaechen, und die Ablaufleiste
   begann erst weit unterhalb des ersten Bildes. Gemessen bei 375 px stand
   die Handlung bei y=412, nachdem man 167 px Text gelesen hatte.
   Am Handy gilt deshalb eine eigene Ordnung. */

@media (max-width: 720px) {
  /* ---------- Der erste Bildschirm am Handy ----------
     Das Werkstattfoto wird im Handyzuschnitt zu dunkler Textur: viel
     Datenmenge, kein Bildinhalt. An seine Stelle tritt eine Flaeche mit
     Lichtquelle und die Figur, die die Marke traegt. Das Foto bleibt auf
     dem Desktop, wo man tatsaechlich eine Werkstatt darauf erkennt. */

  /* WhatsApp liegt am Handy ohnehin im festen Balken am unteren Rand.
     Zweimal dieselbe Handlung im ersten Bild verwaessert nur. */
  .hero__wa { display: none; }

  /* Der Kopf sitzt auf dem Bild statt darueber. Das schenkt dem ersten
     Bild seine Hoehe zurueck, ohne dass Logo oder Menue verschwinden.
     Nur auf der Startseite: dort ist die Oberkante des Heros dunkel. Auf
     den Unterseiten beginnt der Bildkopf hell, dort wuerde ein
     durchsichtiger Kopf blass und das Logo schlecht lesbar. */
  body:has(.hero) .site-header {
    background: linear-gradient(180deg, rgba(12,28,34,.92) 0%, rgba(12,28,34,.55) 62%, rgba(12,28,34,0) 100%);
    backdrop-filter: none;
    border-bottom: 0;
  }
  .hero { padding-top: 0; margin-top: calc(var(--header-h) * -1); }
  /* Seit die Augenbraue jetzt ein ganzer Satz ist und darunter zusaetzlich
     der Erwartungssatz (.v2-expectation) steht, braucht die Spalte insgesamt
     mehr Hoehe. Der Vorlauf ueber der Ueberschrift wird deshalb enger, sonst
     wirkt der erste Bildschirm am Handy zu leer. Bereits so geprueft und
     bestaetigt. */
  .hero__grid { padding-top: calc(var(--header-h) + 46px); }

  /* Keine Breitenbegrenzung: die Ueberschrift soll an ihrem eigenen Punkt
     brechen, also zwischen den beiden Saetzen. Mit 14ch brach sie
     mitten in "Mehr / Anfragen." und die Aussage zerfiel. */
  .hero h1 {
    font-size: clamp(33px, 20px + 3.6vw, 40px);
    line-height: 1.02;
    max-width: none;
    text-wrap: balance;
  }
  .hero .btn-row { margin-top: 26px; }
  .hero .btn--primary { width: 100%; padding-top: 19px; padding-bottom: 19px; }
  .hero__beleg { margin-top: 22px; font-size: 14px; }

  /* ---------- Erster Bildschirm am Handy ----------
     Werte aus der Entwurfsfassung. Die Uhrzeit rechts in der
     Nachrichtenkarte faellt weg, dafuer ist bei 375 px kein Platz. */
  .hero h1 { font-size: clamp(38px, 24px + 3.8vw, 46px); margin-bottom: 22px; }
  .hero-description { font-size: 16px; }
  .hero-actions { margin-top: 26px; gap: 10px; }
  .hero-actions .btn { width: 100%; }

  .hero-product { margin-top: 38px; }
  .product-caption { font-size: 11px; letter-spacing: .015em; }
  .v2-expectation { font-size: 13px; margin-top: 12px; }
  .v2-followup { margin-inline: 5px; font-size: 13px; }
  .message-card { margin: 0 5px; padding: 17px; }
  .message-head b { font-size: 12px; }
  .message-time { display: none; }
  .message-card > p { font-size: 14.5px; }
  .product-bridge { padding: 17px 5px; }
  .result-card { padding: 23px 22px 0; }
  .result-header h2 { font-size: 25px; }
  .result-fields > div { grid-template-columns: .8fr 1.7fr; font-size: 12px; }
  .result-status { margin: 0 -22px; padding: 13px 22px; }

}

/* Der Startzustand wird nur gesetzt, wenn JavaScript läuft und die
   Bewegung auch wieder auflösen kann. Sonst bliebe der Inhalt unsichtbar. */
/* Wandernder Lichtschein auf dunklen Flächen: am Zeiger, wo es einen gibt,
   sonst am Scrollstand — damit die Seite auch am Handy nicht starr wirkt. */
/* Standardton des wandernden Lichtscheins. Abschnitte koennen ihn
   ueberschreiben, etwa auf der KUENI-Seite. */
[data-spotlight] { --spot: 201,146,46; }
.spotlight-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; }

/* ---------- Licht auf dunklen Textabschnitten ----------
   Dunkle Abschnitte ohne Foto standen als glatte Flaeche da und wirkten
   leer. Sie bekommen, was der Hero schon hat: ein stumpfes Licht in der
   oberen Ecke und den wandernden Lichtschein. Dazu ein feines Raster wie
   im Ablaufkasten, das nur im Licht zu sehen ist und nach aussen
   ausblendet. Alles liegt hinter dem Inhalt, der Grundton bleibt.
   Bewusst kein overflow: hidden, sonst bleibt die Ueberschrift in
   "Ueber uns" am breiten Schirm nicht mehr stehen (position: sticky).
   Die Lichter sind in Pixeln bemessen und nicht in Prozent: am Handy ist
   ein Abschnitt viermal so hoch wie breit, Prozentwerte zoegen das Licht
   dort zu einem senkrechten Strich. */
.section--licht { position: relative; isolation: isolate; }
.section--licht > .wrap { position: relative; z-index: 3; }
.section--licht::before,
.section--licht::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.section--licht::before {
  background:
    radial-gradient(1000px 680px at 88% 0%, rgba(36,82,92,.62) 0%, rgba(36,82,92,.22) 42%, rgba(36,82,92,0) 72%),
    radial-gradient(720px 560px at 100% 58%, rgba(36,82,92,.30) 0%, rgba(36,82,92,0) 70%),
    radial-gradient(760px 520px at 6% 100%, rgba(14,160,190,.13) 0%, rgba(14,160,190,0) 70%);
}
.section--licht::after {
  background-image:
    linear-gradient(rgba(244,247,247,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,247,247,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: -1px -1px;
  -webkit-mask-image:
    radial-gradient(820px 560px at 88% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 80%),
    radial-gradient(560px 380px at 6% 100%, rgba(0,0,0,.55) 0%, transparent 75%);
          mask-image:
    radial-gradient(820px 560px at 88% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 80%),
    radial-gradient(560px 380px at 6% 100%, rgba(0,0,0,.55) 0%, transparent 75%);
}

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

/* ---------- Bildkopf ----------
   Ein dunkler Abschnitt mit Foto im Hintergrund. Aufbau: Bild,
   Abdunkelung, Lichtschein, Inhalt. Die Abdunkelung ist gleichmaessiger
   als beim Hero, weil der Text ueber die ganze Breite laeuft und nicht
   nur in einer Spalte steht. Genutzt auf der KUENI- und der
   Kontaktseite. */
.bildkopf { position: relative; overflow: hidden; }
.bildkopf > .wrap { position: relative; z-index: 3; }

.bildkopf__media { position: absolute; left: 0; right: 0; top: -10%; height: 120%; z-index: 0; }
.bildkopf__media img { width: 100%; height: 100%; object-fit: cover; }

/* Zwei Lagen: eine flaechige Abdunkelung fuer die Lesbarkeit, darueber
   ein Verlauf, der oben und unten in die Nachbarabschnitte uebergeht. */
.bildkopf__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bildkopf__scrim::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(12,28,34,.68);
}
.bildkopf__scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(12,28,34,.9) 0%, rgba(12,28,34,.22) 30%,
    rgba(12,28,34,.34) 70%, var(--ink) 100%);
}

/* Zwischen dem Klappmenue und dem breiten Schirm steht die Ueberschrift
   der Paketseiten in einer schmalen Spalte, waehrend die Schriftgroesse
   ihr Maximum von 72 px schon bei rund 1115 px Fensterbreite erreicht.
   "Werbekampagnen" braucht dort mehr Platz als die Spalte hat und wurde
   dreizeilig getrennt. Hier waechst die Schrift langsamer mit. */
@media (min-width: 1081px) and (max-width: 1400px) {
  .bildkopf h1 { font-size: clamp(46px, 20px + 3.4vw, 62px); }
}

/* Ein feiner Petrolschimmer an der Oberkante. */
.bildkopf::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(14,160,190,.5) 35%, rgba(14,160,190,.5) 65%, transparent);
}

/* Text ueber einem Foto braucht denselben dunklen Hof wie im Hero. */
.bildkopf h1, .bildkopf h2, .bildkopf .lead,
.bildkopf .chain li, .bildkopf .founder__quote, .bildkopf .note {
  text-shadow: 0 1px 2px rgba(12,28,34,.45), 0 2px 22px rgba(12,28,34,.6);
}

/* Am Handy laeuft der Text ueber die volle Breite und damit ueber die
   unruhigsten Stellen des Fotos. Dort deckt die Flaeche staerker ab.
   Eine gleichmaessige Abdeckung von 82 Prozent macht aus jedem Foto
   allerdings dieselbe braune Flaeche. Stattdessen deckt ein Verlauf mit
   zwei Lichtquellen ab: genauso dicht, wo Text steht, aber mit Tiefe
   statt flach. Dieselbe Behandlung wie im Hero der Startseite. */
@media (max-width: 620px) {
  .bildkopf__scrim::before {
    background:
      radial-gradient(96% 54% at 86% 16%, rgba(53,188,216,.16) 0%, rgba(53,188,216,0) 62%),
      radial-gradient(78% 44% at 70% 78%, rgba(14,160,190,.18) 0%, rgba(14,160,190,0) 66%),
      linear-gradient(170deg, rgba(12,28,34,.9) 0%, rgba(12,28,34,.78) 26%, rgba(12,28,34,.86) 62%, rgba(12,28,34,.92) 100%);
  }
}

/* ---------- Bildkopf mit Figur statt Foto ----------
   KUENI ist kein Foto, sondern eine Zeichnung auf genau demselben Dunkel
   wie die Seite: der Grund der Datei ist auf #0C1C22 verschoben, deshalb
   gibt es keine sichtbare Bildkante. Eine flaechige Abdunkelung wie beim
   Foto wuerde die Figur nur ausloeschen. Stattdessen dunkelt ein Verlauf
   von links ab: der Text behaelt seinen Grund, die Figur bleibt rechts
   stehen. */
/* picture ist von Haus aus inline und wuerde die Flaeche nicht fuellen. */
.bildkopf__media picture { display: block; width: 100%; height: 100%; }

.bildkopf--figur .bildkopf__media img { object-position: 82% center; }

.bildkopf--figur .bildkopf__scrim::before {
  background: linear-gradient(90deg,
    rgba(12,28,34,.95) 0%, rgba(12,28,34,.92) 40%,
    rgba(12,28,34,.62) 62%, rgba(12,28,34,0) 78%);
}

/* Auf breiten Schirmen liefe der Fliesstext sonst quer ueber das Gesicht.
   Nicht die Figur weiter wegschieben, sondern die Zeile frueher brechen:
   so bleibt beides ganz. */
@media (min-width: 900px) {
  .bildkopf--figur .lead,
  .bildkopf--figur .btn-row { max-width: 30rem; }
}

/* Der senkrechte Verlauf darf hier leichter ausfallen, sonst frisst er
   den Kopf der Figur. */
.bildkopf--figur .bildkopf__scrim::after {
  background: linear-gradient(180deg,
    rgba(12,28,34,.55) 0%, rgba(12,28,34,0) 26%,
    rgba(12,28,34,.15) 70%, var(--ink) 100%);
}

/* Am Handy schneidet object-fit: cover die Breite stark weg. Ohne
   Verschiebung nach rechts waere die Figur einfach nicht mehr im Bild.
   Sie steht dort hinter der Ueberschrift, also deckt der Verlauf
   senkrecht ab statt waagerecht. */
@media (max-width: 620px) {
  /* Der Hochformat-Zuschnitt hat die Figur schon an ihrem Platz. */
  .bildkopf--figur .bildkopf__media img { object-position: center; }
  .bildkopf--figur .bildkopf__scrim::before {
    background: linear-gradient(180deg,
      rgba(12,28,34,.88) 0%, rgba(12,28,34,.8) 52%, rgba(12,28,34,.4) 100%);
  }
}

/* ---------- Markenband ----------
   Steht dort, wo vorher ein Foto nur dekoriert hat. Traegt die Marke
   einmal in voller Groesse und erklaert sie in einem Satz. Ruhig
   gehalten: eine Zeile, zwei Haarlinien, sonst nichts. */
.kubrand {
  /* Deutlich heller als die uebrigen dunklen Flaechen, damit die grosse
     Wortmarke in #006277 ohne Hilfsmittel darauf steht. */
  background: linear-gradient(180deg, #DCEEF2 0%, #CFE7EC 100%);
  padding: clamp(46px, 5.5vw, 78px) var(--pad-x);
  border-top: 1px solid rgba(0,98,119,.22);
  border-bottom: 1px solid rgba(0,98,119,.22);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Ein sehr weicher Schein hinter der Marke, damit die Flaeche nicht
   tot wirkt. Keine Animation, damit es nicht ablenkt. */
.kubrand::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: min(760px, 96%); height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0,98,119,.12), transparent);
  pointer-events: none;
}
.kubrand__inner { position: relative; max-width: var(--maxw); margin-inline: auto; }
.kubrand__mark {
  font: 800 clamp(44px, 4vw + 26px, 84px)/1 var(--display);
  letter-spacing: .08em;
  margin: 0;
}
.kubrand__meta {
  margin: 0 0 14px;
  font: 600 12px/1.4 var(--text);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0,98,119,.72);
}

html.js [data-reveal] { opacity: 0; transform: translateY(22px); }
/* Überschriften steigen hinter einer Kante hervor statt nur einzublenden.
   Der Ausschnitt ist oben und unten großzügig, damit Unterlängen bleiben. */
html.js [data-reveal] h2 { clip-path: inset(-25% 0 100% 0); transform: translateY(14px); }
html.js [data-reveal].is-in h2 {
  clip-path: inset(-25% 0 -25% 0); transform: none;
  transition: clip-path 1s var(--ease) .05s, transform 1s var(--ease) .05s;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s var(--ease); }
html.js [data-stagger] > * { opacity: 0; transform: translateY(18px); }
html.js [data-stagger].is-in > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s var(--ease); }
html.js [data-zoom] img { transform: scale(1.1); }
html.js [data-zoom].is-in img { transform: none; transition: transform 1.6s var(--ease); }

/* ---------- Abschnittskopf ----------
   Zweispaltiger Kopf aus der Vorlage: links Augenbraue und Ueberschrift,
   rechts der erklaerende Satz, beide auf der Grundlinie ausgerichtet.
   Nicht ueber .split geloest, weil .split auf acht anderen Seiten sitzt
   und dort oben ausgerichtet bleiben muss. */
.abschnittskopf {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(45px, 5vw, 80px);
  align-items: end;
  margin-bottom: 43px;
}
.abschnittskopf > p {
  max-width: 420px;
  font-size: 17px; line-height: 1.6; color: var(--slate);
}

/* ---------- Typische Situationen ----------
   Vorher umrandete Kacheln mit weissem Grund. Direkt unter dem dunklen
   Kopfbereich standen die drei Rahmen wie ein zweites Bedienfeld und
   nahmen den Ueberschriften das Gewicht. Die Vorlage laesst nur eine
   Oberlinie stehen; der Text traegt den Abschnitt, die Linie ordnet ihn. */
.sorgen {
  display: grid; gap: 30px; margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sorge {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: 28px 26px 0 0;
  /* Bewusst dunkler als --rule: die Linie ist jetzt die einzige Kante,
     die die Spalte ueberhaupt noch hat. Wert aus der Vorlage. */
  border-top: 1px solid #BDCCD0;
  transition: border-color .3s var(--ease);
}
.sorge:hover { border-color: var(--ku-marke); }
.sorge__zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 39px; height: 39px; margin-bottom: 23px;
  border-radius: 6px;
  background: var(--paper-warm);
  color: var(--ku-marke);
}
.sorge h3 {
  margin: 0 0 13px;
  font: 700 22px/1.3 var(--display);
  letter-spacing: -.025em; color: var(--ink);
}
.sorge > p { font-size: 16px; line-height: 1.6; color: var(--slate); }

/* Jede Spalte fuehrt auf das Angebot, das genau dieses Problem loest.
   Vorher benannten die Kacheln das Problem und liessen den Besucher
   damit stehen. Der Weg sitzt unten buendig, damit die drei Spalten
   trotz verschieden langer Texte auf einer Linie enden. */
.sorge__weg {
  align-self: end;
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 23px;
  font: 600 14px/1.3 var(--text);
  color: var(--ink); text-decoration: none;
}
.sorge__weg > span { display: inline-block; transition: transform .3s var(--ease); }
.sorge:hover .sorge__weg { color: var(--ku-marke); }
.sorge:hover .sorge__weg > span { transform: translate(3px, -3px); }

/* Drei Spalten bleiben bis 720 px stehen. Darunter waeren sie schmaler
   als die Ueberschriften und wuerden nach jedem zweiten Wort umbrechen. */
@media (max-width: 900px) {
  .sorgen { gap: 23px; }
  .sorge { padding-right: 0; }
  .sorge h3 { font-size: 20px; }
  .sorge__weg { font-size: 13px; }
}
@media (max-width: 720px) {
  .abschnittskopf { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .abschnittskopf > p { max-width: none; font-size: 16px; }
  .sorgen { grid-template-columns: 1fr; gap: 28px; }
  .sorge { padding-top: 24px; }
  .sorge__zeichen { margin-bottom: 17px; }
  .sorge h3 { font-size: 23px; }
  .sorge__weg { margin-top: 15px; font-size: 14px; }
}

/* ---------- Das System ---------- */
.stages { counter-reset: stage; }
.stage {
  counter-increment: stage;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 240px);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--rule-dark);
  position: relative;
}
.stage:last-child { border-bottom: 1px solid var(--rule-dark); }
/* Die Ziffer sitzt in einer Scheibe auf einer durchgehenden Linie. Vorher
   standen dort sechs Zahlen untereinander, jede fuer sich: man las einen
   Ablauf, statt ihn zu sehen. Die Hervorhebung beim Scrollen bleibt
   unveraendert, sie fuellt die Scheibe jetzt, statt die Zahl zu vergroessern. */
.stage__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(201,146,46,.40);
  background: var(--ink);
  font: 600 14px/1 var(--display);
  color: var(--signal);
}
.stage__num::before { content: counter(stage, decimal-leading-zero); }

/* Die Linie laeuft von Scheibe zu Scheibe, nicht ins Leere. */
.stage::before {
  content: ""; position: absolute;
  left: 19px; top: 68px; bottom: -31px;
  width: 1px;
  background: rgba(201,146,46,.26);
}
.stage:last-child::before { display: none; }
.stage__body h3 { color: var(--paper); }
.stage__body p { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: rgba(244,247,247,.82); max-width: 52ch; }
.stage__metric {
  padding-top: 4px;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(244,247,247,.68);
}
.stage__metric b {
  display: block; margin-bottom: 3px;
  font: 600 12.5px/1 var(--text); color: var(--signal); letter-spacing: .01em;
}

/* Die Stufe, auf der man gerade steht, hebt sich ab; alles Durchlaufene
   bleibt golden markiert. Man scrollt sichtbar durch den Trichter
   (Zeigarnik: ein begonnener Ablauf will zu Ende gesehen werden). */
.stage { transition: opacity .5s ease; }
html.js .stages.is-live .stage { opacity: .45; }
html.js .stages.is-live .stage.is-past { opacity: .7; }
html.js .stages.is-live .stage.is-active { opacity: 1; }
.stage__num { transition: color .4s ease, transform .4s var(--ease); }
.stage.is-active .stage__num { color: var(--signal-lit); transform: scale(1.18); transform-origin: left center; }
.stage__body h3 { transition: color .4s ease; }
.stage.is-active .stage__body h3 { color: var(--signal-lit); }

/* ---------- Bildband ----------
   Eine Atempause zwischen zwei langen Textabschnitten. Bei 375 px laufen
   zwischen dem Systemabschnitt und den Angeboten sonst ueber 8000 px Text
   am Stueck, ohne dass das Auge irgendwo landen kann.
   Ein Satz, ein Bild, sonst nichts. */
.band {
  position: relative; overflow: hidden;
  background: var(--ink);
  display: grid; align-items: center;
  min-height: clamp(230px, 32vw, 400px);
}
/* Etwas hoeher als der Abschnitt, damit der Parallaxversatz keine Kante
   freilegt. */
.band__media { position: absolute; left: 0; right: 0; top: -8%; height: 116%; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }
.band__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(12,28,34,.95) 0%, rgba(12,28,34,.86) 34%,
    rgba(12,28,34,.34) 70%, rgba(12,28,34,.12) 100%);
}
.band__inhalt {
  position: relative; z-index: 2;
  padding-block: clamp(44px, 5.5vw, 78px);
}
.band__inhalt p {
  max-width: 24ch;
  font: 700 clamp(21px, 15px + 1.6vw, 31px)/1.28 var(--display);
  letter-spacing: -.026em;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(12,28,34,.5), 0 2px 22px rgba(12,28,34,.62);
}
/* Am Handy sitzt die Hand rechts im Bild, der Ausschnitt wandert mit.
   Die Schrift muss dort kleiner werden: mit 18ch Zeilenlaenge brach der
   Satz in sechs Zeilen und lief unten aus dem Band heraus. */
/* Der Zuschnitt gehoert zum Bild, nicht zum Bauteil: im Band der
   Startseite sitzt die Hand rechts, auf der Angebotsseite der Mann
   weiter in der Mitte. Ohne eigenen Wert schiebt er sich am Handy
   hinter den Text. */
.band--weit .band__media img { object-position: 78% center; }

@media (max-width: 620px) {
  .band { min-height: 268px; }
  .band__media img { object-position: 74% center; }
  .band--weit .band__media img { object-position: 92% center; }
  .band__inhalt { padding-block: 38px; }
  .band__inhalt p { max-width: 21ch; font-size: 19.5px; line-height: 1.34; }
}

/* ---------- Paketkarten ----------
   Drei eigenständige, kaufbare Angebote. Damit das Auge sofort "Paket"
   liest, trägt jede Karte dieselbe feste Abfolge:
     Nummer -> Name -> Unterzeile -> Preiszeile -> Inhalt -> Ergebnis -> Knopf
   Die Preiszeile bleibt inhaltlich ehrlich (kein erfundener Betrag), ist
   aber sichtbar vorhanden. Ohne sie wirken die Karten wie Textblöcke. */
.packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
/* Jedes Paket hat eine eigene Farbe. Vorher waren alle drei Karten weiss
   und unterschieden sich nur am Kopfband, deshalb sah es nicht nach drei
   Schachteln zur Auswahl aus. --pk ist der Akzent, --pk-tint der
   Grundton der Box, --pk-auf die Schrift auf dem Akzent. */
.pack {
  --pack-pad: clamp(22px, 2.4vw, 30px);
  --pk:      var(--ink);
  --pk-tint: #F5F9FA;
  --pk-auf:  #fff;
  display: flex; flex-direction: column;
  background: var(--pk-tint);
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 5px;
  /* Oben kein Polster: dort sitzt das farbige Kopfband. */
  padding: 0 var(--pack-pad) var(--pack-pad);
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(12,28,34,.07);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pack--kueni     { --pk: var(--ku-marke); --pk-tint: #EEF6F8; --pk-auf: #fff; }
.pack--empfohlen { --pk: var(--signal);   --pk-tint: #FBF6EA; --pk-auf: var(--ink); }
/* Werbung hat mit KÜNI nichts zu tun, der Deckel darf deshalb nicht in
   der Markenfarbe stehen. Kein neuer Farbwert: derselbe Dunkelton wie
   beim Website-Paket, nur eine Stufe heller, damit die drei Deckel
   unterscheidbar bleiben. */
.pack--werbung   { --pk: var(--ink-soft); --pk-tint: #F2F7F8; --pk-auf: #fff; }

.pack:hover { box-shadow: 0 14px 36px rgba(12,28,34,.13); transform: translateY(-3px); }
/* Die Empfehlung hebt sich ab, ohne die Nachbarn zu verdecken. */
.pack--empfohlen {
  border-color: rgba(201,146,46,.55);
  box-shadow: 0 16px 42px rgba(12,28,34,.15);
}
.pack--empfohlen:hover { box-shadow: 0 22px 56px rgba(12,28,34,.19); }

/* ---- Der Deckel ----
   Nummer, Name und Unterzeile stehen zusammen auf der Akzentflaeche.
   Das ist der Aufkleber auf der Schachtel und der Grund, warum man auf
   einen Blick drei Pakete sieht statt drei Textspalten. */
.pack__kopf {
  margin: 0 calc(-1 * var(--pack-pad));
  padding: 14px var(--pack-pad) 20px;
  background: var(--pk);
  color: var(--pk-auf);
  position: relative;
}
/* Feine Naht unter dem Deckel, wie die Kante einer Schachtel. */
.pack__kopf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0));
}

.pack__num {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 700 11.5px/1.2 var(--text);
  letter-spacing: .16em; text-transform: uppercase;
  opacity: .78;
}

/* Das Schild sitzt im Deckel der empfohlenen Karte. */
.pack__badge {
  font: 700 10.5px/1 var(--text); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 2px;
  background: var(--ink); color: var(--signal);
  white-space: normal; line-height: 1.35; opacity: 1;
}

.pack__name {
  margin-top: 12px;
  font: 700 clamp(23px, 16px + 1vw, 29px)/1.12 var(--display);
  color: var(--pk-auf); letter-spacing: -.028em;
}
.pack__sub { margin-top: 7px; font-size: 15px; line-height: 1.45; color: var(--pk-auf); opacity: .82; }

/* Auf dem petrolfarbenen Deckel waere die Marke unsichtbar und auf Gold
   zu schwach. Sie bekommt dort dieselbe helle Platte wie auf dunklen
   Flaechen. Die Farbe des Wortes bleibt unveraendert. */
.pack__kopf .ku {
  background: #DCEEF2;
  padding: .06em .3em .1em;
  border-radius: 3px;
  margin: 0 .04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.pack__list { margin-top: 12px; display: grid; gap: 10px; }
.pack__list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.pack__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--pk);
}

/* "Was ist das?" — der Satz, der vorher gefehlt hat. Bei "Werbekampagnen"
   war ohne ihn nicht zu erkennen, worum es ueberhaupt geht. Steht
   abgesetzt auf hellem Grund, damit er vor der Aufzaehlung gelesen wird. */
/* Der Satz, der das Paket erklaert. Er stand bisher in einem eigenen
   weissen Kasten und damit im dritten Rahmen innerhalb derselben Karte:
   Karte, Kasten, Kasten. Getrennt wird jetzt ueber Groesse und Abstand.
   Das ist der wichtigste Satz der Karte, also darf er auch so aussehen. */
.pack__was {
  margin-top: 20px;
  font-size: 16.5px; line-height: 1.55; color: var(--ink);
}

/* Zwischenueberschrift ueber der Aufzaehlung, mit eigener Linie, damit
   sie nicht mit dem Text darunter zu einem Block verschmilzt. */
.pack__label {
  margin-top: 22px; padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
  font: 700 11px/1 var(--text);
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}

/* "Fuer wen" liest sich wie das Ergebnis, bleibt aber ruhiger: kein
   Kasten, nur eine Linie. */
.pack__fuer {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 15.5px; line-height: 1.5; color: var(--slate);
}
.pack__fuer b {
  display: block; margin-bottom: 8px;
  font: 700 11px/1 var(--text);
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}

.pack__cta-wrap { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; }
.pack .btn { width: 100%; }

/* "Weitere Informationen" war ein blosser Rahmen und wurde nicht als
   anklickbar erkannt. Jetzt gefuellt, mit Pfeil, der beim Zeigen
   weiterrutscht. Auf allen drei Karten gleich. */
.btn--mehr { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--mehr:hover { background: var(--ink-soft); border-color: var(--ink-soft); transform: translateY(-1px); }
.btn--mehr svg { flex: 0 0 auto; transition: transform .25s var(--ease); }
.btn--mehr:hover svg { transform: translateX(4px); }

/* ---------- Das Gesicht von KUENI ----------
   Ein geometrischer Kopf, kein Comicfigur. Er steht im Chat und auf den
   Paketkarten, immer als Zeichen, nie als handelnde Figur, die ueber die
   Seite laeuft. Das haelt den Auftritt ernst und funktioniert auch am
   Handy, wo eine bewegte Figur nur im Weg stuende. */
.kuni-kopf { display: block; }
.kuni-auge { transform-box: fill-box; transform-origin: center; }
@keyframes kuniBlinzeln {
  0%, 90%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.1); }
}
.kuni-kopf .kuni-auge { animation: kuniBlinzeln 5.4s ease-in-out infinite; }
/* Das zweite Auge blinzelt minimal versetzt, sonst wirkt es maschinell. */
.kuni-kopf .kuni-auge:last-of-type { animation-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
  .kuni-kopf .kuni-auge { animation: none; }
}

/* Nummer ueber der Ueberschrift auf den Paketseiten. Stellt die Seite
   sofort in die Reihe der drei Pakete. */
.paketkopf__num {
  margin-bottom: 12px;
  font: 700 11.5px/1 var(--text);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal);
}
.videofach__inhalt { position: relative; max-width: 42ch; }
.videofach__play {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 18px;
  border: 2px solid rgba(244,247,247,.4);
  border-radius: 50%;
  color: var(--paper);
}
.videofach__play svg { margin-left: 3px; }
.videofach__titel {
  font: 700 clamp(17px, 14px + .6vw, 21px)/1.25 var(--display);
  color: var(--paper); letter-spacing: -.02em;
}
.videofach__text {
  margin-top: 9px;
  font-size: 15px; line-height: 1.55;
  color: rgba(244,247,247,.68);
}
@media (max-width: 620px) {
  .videofach { aspect-ratio: 4 / 3; }
  .videofach__play { width: 52px; height: 52px; margin-bottom: 14px; }
}

/* ---------- Ablauf in Schritten ----------
   Steht dort, wo vorher ein Videoplatzhalter stand. Ein Platzhalter sagt
   dem Interessenten vor allem eines: die Seite ist nicht fertig. Diese
   Kette erklaert dasselbe wie das geplante Video, nur eben jetzt schon.
   Kommt das Video spaeter, ersetzt es diesen Block. */
.ablauf {
  position: relative;
  padding: clamp(24px, 3.6vw, 38px);
  background: var(--ink);
  border-radius: 3px;
  overflow: hidden;
}
.ablauf::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,247,247,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,247,247,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.ablauf__kette { position: relative; display: grid; }

.ablauf__glied { position: relative; padding: 0 0 26px 34px; }
.ablauf__glied:last-child { padding-bottom: 0; }
/* Die Linie verbindet die Punkte, sie laeuft nicht ins Leere. */
.ablauf__glied::before {
  content: ""; position: absolute;
  left: 10px; top: 24px; bottom: 4px; width: 1px;
  background: rgba(14,160,190,.4);
}
.ablauf__glied:last-child::before { display: none; }

.ablauf__punkt {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid rgba(14,160,190,.55);
  background: var(--ink);
  font: 700 11px/1 var(--text); color: var(--cyan-lit);
}
.ablauf__titel {
  font: 700 clamp(16px, 15px + .2vw, 18px)/1.3 var(--display);
  color: var(--paper); letter-spacing: -.01em;
}
.ablauf__text {
  margin-top: 6px;
  font-size: 14.5px; line-height: 1.6;
  color: rgba(244,247,247,.68);
}

@media (min-width: 780px) {
  .ablauf__kette { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
  .ablauf__glied { padding: 34px 0 0 0; }
  .ablauf__glied::before {
    left: 30px; right: -28px; top: 10px; bottom: auto;
    width: auto; height: 1px;
  }
}

/* ---------- Fall-Karussell ----------
   Fuenf Beispielgespraeche aus fuenf Branchen. Gewischt wird mit
   scroll-snap statt mit einer Ziehmechanik in JavaScript: das Wischen am
   Handy funktioniert damit von Haus aus, mit dem richtigen Schwung und
   dem richtigen Abbremsen, und ohne Skript bleibt eine scrollbare Liste
   uebrig statt eines toten Stapels.

   Der Inhalt jeder Karte kommt aus assets/kueni.css: das Gespraech in
   denselben Sprechblasen wie die echte Demo, darunter dieselbe
   Anfragekarte, die der Betrieb spaeter im Posteingang sieht. Hier steht
   deshalb nur die Huelle, nicht noch ein zweiter Chat mit eigenem
   Aussehen. */
.faelle { margin-top: clamp(26px, 3vw, 38px); }

/* Auswahl statt Reiterleiste. Punkte sagen nur, dass es fuenf Stueck
   gibt; die Namen sagen, welche Branchen dahinter stehen, und wer aus
   einer davon kommt, ist in einem Griff dort. Es sind echte Sprungmarken:
   ohne JavaScript springt der Browser selbst zur Karte.

   Bis zum 9. September sah die Leiste aus wie eine Zeile Ueberschriften:
   grauer Grund, ein weisses Feld darin, sonst nichts. Dass man darauf
   tippen kann und damit die Karte darunter wechselt, hat niemand
   vermutet. Jetzt ist es eine Reihe Schaltflaechen mit Rand, die
   gewaehlte steht gefuellt in der Markenfarbe, und darueber steht, was
   zu tun ist. Der Abstand zwischen gewaehlt und nicht gewaehlt ist damit
   gross genug, dass die Leiste als Auswahl gelesen wird. */
.faelle__wahl {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 11px;
  font: 600 11.5px/1.3 var(--text);
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-dim);
}
.faelle__wahl::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--rule);
}

.faelle__reiter {
  display: flex; gap: 8px;
  /* Umbrechen statt schieben. Am Handy sind fuenf Reiter zusammen breiter
     als die Leiste: "Fitness" und "Sonderfall" standen ausserhalb des
     Bildes, die Leiste lief still nach rechts weiter, und nichts zeigte
     an, dass es die beiden Branchen ueberhaupt gibt. Wer die Geste nicht
     erraet, sieht drei von fuenf Beispielen. Mit Umbruch stehen alle
     fuenf sofort da. */
  flex-wrap: wrap;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.faelle__reiter::-webkit-scrollbar { display: none; }
.faelle__reiter a {
  flex: 1 0 auto;
  padding: 11px 17px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 600 13.5px/1.3 var(--text);
  color: var(--slate); text-decoration: none; white-space: nowrap;
  text-align: center;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faelle__reiter a:hover {
  border-color: var(--slate-dim); color: var(--ink);
}
.faelle__reiter a[aria-current="true"] {
  background: var(--cyan-deep); border-color: var(--cyan-deep);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(0,98,119,.22);
}
.faelle__reiter a[aria-current="true"]:hover { color: var(--white); }

.faelle__spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  /* Kein gap. Der Abstand zwischen den Karten steckt als Innenabstand in
     der Karte selbst — siehe .fall. Mit gap sind fuenf Karten
     5*Spurbreite + 4*Abstand breit, der Anfang der letzten Karte liegt
     damit ein paar Pixel weiter rechts, als die Spur scrollen kann. Bei
     "scroll-snap-type: mandatory" verweigert Chrome dann jede Bewegung,
     weil der letzte Schnappunkt unerreichbar ist: bei 375 px ging es
     zufaellig auf, bei 1280 px stand die Spur vollstaendig still. Ohne
     gap sind es genau 5*Spurbreite, und der letzte Schnappunkt trifft
     das Ende auf den Pixel. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Kein scroll-behavior: smooth. Die eingebaute weiche Bewegung blieb
     hier wirkungslos — die Spur ruehrte sich auf keinen Klick, waehrend
     dasselbe Ziel bei scroll-behavior: auto sofort ansprang. Das Gleiten
     macht jetzt script.js selbst. */
  /* Der Balken traegt nichts bei: die Reiter zeigen die Position schon
     an, und quer laufende Balken sitzen je nach System mitten im Bild. */
  scrollbar-width: none;
}
.faelle__spur::-webkit-scrollbar { display: none; }
.fall {
  scroll-snap-align: start; min-width: 0;
  /* Die Rinne zwischen zwei Karten. Steht hier und nicht als gap in der
     Spur, damit die Karten genau eine Spurbreite belegen. */
  padding-right: 18px;
}

/* Der Chat aus der Demo, angepasst an die Karte: keine eigene Hoehe und
   kein eigener Scrollbalken. Ein Fenster, in dem man scrollen muss,
   waehrend man nebenher wischt, waere ein Griff zu viel. */
.fall .kd { max-width: none; }
.fall .kd__log { max-height: none; overflow-y: visible; }
.fall .kd__id b { font-size: 15px; }
/* In der Demo steht hier eine feste Rollenzeile, die abgeschnitten
   werden darf. Hier steht der Name des Betriebs — aus "Bauer & Sohn
   Immobilien" wurde sonst "Bauer & Sohn Immo...". */
.fall .kd__id { flex: 1 1 auto; align-items: flex-start; }
.fall .kd__id > span { white-space: normal; overflow: visible; text-overflow: clip; }

/* Die Sprechblase steht in der Demo auf 78 % der Breite. Das Fenster ist
   dort schmal; hier ist die Karte ueber tausend Pixel breit, und 78 %
   davon ergaeben Zeilen, die kein Messenger je zeigt. */
.fall .kd__bubble { max-width: min(78%, 620px); }
@media (min-width: 900px) {
  .fall .kd__log { padding: 24px 26px; }
  .fall .kd__msg { margin-bottom: 14px; }
}

/* Uhrzeit in der Sprechblase. Ohne sie liest sich der Verlauf wie ein
   abgetipptes Protokoll und nicht wie ein Gespraech. */
.fall__zeit {
  display: block; margin-top: 5px;
  font-size: 11.5px; line-height: 1;
  color: var(--slate);
}
.kd__msg--kunde .fall__zeit { text-align: right; color: rgba(244,247,247,.55); }

/* Uebergang vom Gespraech zu dem, was daraus wird. */
.fall__uebergabe {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 11px;
  font: 600 11.5px/1.3 var(--text);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
}
.fall__uebergabe::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

@media (max-width: 620px) {
  .faelle__reiter a { padding: 10px 13px; font-size: 12.5px; }
  .fall .kd__bubble { font-size: 14.5px; }
  .fall__uebergabe { margin-top: 17px; }
  /* Zeitstempel unter den Namen, sonst bleibt fuer den Betriebsnamen
     kaum Platz. */
  .fall .kd__head { flex-wrap: wrap; }
  .fall .kd__badge { margin-left: 53px; }
}


/* ---------- Vorstellung mit Geraet ----------
   Ersetzt auf paket-website.html drei Absaetze Fliesstext. Auf einer
   Seite, die eine Website verkauft, muss man die Website sehen.

   Das Geraet ist nachgebaut und kein Foto: bleibt bei jeder Aufloesung
   scharf, kostet keine Ladezeit, und die Farben sind die, die der Kunde
   spaeter wirklich bekommt. */
.vorstellung {
  display: grid; gap: clamp(30px, 4vw, 60px);
  align-items: center;
}
@media (min-width: 900px) {
  .vorstellung { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.vorstellung__text h2 { margin-bottom: 26px; max-width: 19ch; }

.merkmale { display: grid; gap: 2px; }
.merkmale li {
  padding: 15px 0 16px;
  border-top: 1px solid var(--rule);
}
.merkmale li:last-child { border-bottom: 1px solid var(--rule); }
.merkmale b {
  display: block; margin-bottom: 4px;
  font: 700 17px/1.35 var(--display);
  letter-spacing: -.015em; color: var(--ink);
}
.merkmale span { font-size: 15.5px; line-height: 1.55; color: var(--slate); }

/* Zwei Geraete, das Handy ueberlappt. Nebeneinander gestellt saehen sie
   aus wie zwei Bilder; so sieht man auf einen Blick, dass es dieselbe
   Seite ist. */
.geraete { position: relative; padding-bottom: 30px; }
.geraet { background: var(--white); border: 1px solid var(--rule); overflow: hidden; }
.geraet--schirm {
  border-radius: 6px;
  box-shadow: 0 22px 48px rgba(12,28,34,.13);
}
.geraet__leiste {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.geraet__leiste i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule);
}
.geraet__leiste span {
  margin-left: 8px; padding: 3px 12px;
  flex: 1; max-width: 190px;
  background: var(--white); border-radius: 999px;
  font: 500 10.5px/1.6 var(--text); color: var(--slate);
}
.geraet__seite { background: var(--white); }

/* Der schematische Seiteninhalt fuer die kleine Station 02 auf
   paket-werbung.html. Dort ist das Geraet eines von drei Bildchen in
   einer Abfolge und darf angedeutet bleiben. Die ausgebaute Fassung mit
   Foto und echten Zeilen steht weiter unten unter .schau__*. */
.mini-held {
  display: grid; gap: 6px;
  padding: 20px 14px 22px;
  background: var(--ink);
}
.mini-zeile { height: 6px; border-radius: 2px; background: rgba(244,247,247,.28); }
.mini-zeile--gross { height: 11px; background: rgba(244,247,247,.85); }
.mini-zeile--kurz { width: 58%; }
.mini-knopf {
  width: 74px; height: 15px; margin-top: 8px;
  border-radius: 3px; background: var(--signal);
}

.mini-karten {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px;
  background: var(--paper);
}
.mini-karten span {
  height: 46px; border-radius: 3px;
  background: var(--white); border: 1px solid var(--rule);
}

/* Am Handy stehen beide Geraete untereinander, das kleine ueberlappt nur
   die dunkle Fusszeile des grossen. Dort steht nichts, was man lesen
   muesste. Zuvor schob es sich quer ueber die Kartenzeile und verdeckte
   die dritte Leistung zur Haelfte; das sah nach einem Satzfehler aus und
   nicht nach zwei Geraeten. */
.geraet--handy {
  width: 116px;
  margin: -22px 0 0 auto;
  border-radius: 12px;
  border: 5px solid var(--ink);
  box-shadow: 0 16px 34px rgba(12,28,34,.18);
}

@media (min-width: 620px) {
  /* Ab hier ist daneben Platz: das Handy steht rechts, ragt um
     --ueberlappung ueber den Schirm und ein Stueck unter ihn. Der Schirm
     rueckt um genau diesen Betrag weniger nach links, als das Handy breit
     ist, sonst waere zwischen beiden eine Luecke. */
  .geraet--handy {
    position: absolute; right: 0; bottom: -14px;
    width: 138px; margin: 0;
  }
  .geraet--schirm { margin-right: calc(138px - var(--ueberlappung)); }
}

/* Auf einem Schirm, der breiter ist als ein Notebook, waechst das Geraet
   sonst auf achthundert Pixel, waehrend die Schrift darin zwoelf Pixel
   bleibt. Dann stimmt der Massstab nicht mehr und es sieht aus wie eine
   Seite mit zu kleiner Schrift statt wie eine verkleinerte Seite. */
@media (max-width: 899px) {
  .geraete { max-width: 520px; }
}

/* ---------- Die Seite im Geraet ----------
   Bis zum 9. September standen hier graue Balken. Auf einer Seite, die
   Websites verkauft, las sich das nicht als Website, sondern als eine,
   die nicht fertig geladen hat. Der erste Ersatz hatte zwar Text und
   Foto, aber nur einen Aufmacher und eine Reihe flacher Kaesten darunter
   und wirkte dadurch halbfertig. Jetzt steht dort eine vollstaendige
   Seite: Kopf, Aufmacher, drei Leistungen mit Symbol und Fusszeile.
   Eigene Klassen statt der mini-* von paket-werbung.html: dort ist das
   Geraet eine kleine Station in einer Abfolge, hier das Schaustueck. */

/* Wie weit das Handy ueber den Schirm ragt. Steht als Variable da, weil
   drei Regeln sich darauf beziehen muessen: verschiebt man das Handy und
   vergisst eine davon, verschwindet Inhalt darunter. */
.geraete { --ueberlappung: 30px; }

.schau__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  background: var(--ink);
}
.schau__kopf b {
  font: 800 10.5px/1 var(--display);
  letter-spacing: .12em; color: var(--paper);
}
.schau__kopf nav { display: flex; align-items: center; gap: 11px; }
.schau__kopf nav span {
  font: 500 8px/1 var(--text); letter-spacing: .02em;
  color: rgba(244,247,247,.6);
}
.schau__kopf nav em {
  padding: 5px 8px; border-radius: 2px;
  background: var(--signal);
  font: 700 8px/1 var(--text); font-style: normal;
  color: var(--ink);
}
/* Drei Striche aus einem Verlauf statt drei Elementen: 1,5 px Linie,
   2,75 px Luft, das dreimal in 10 px Hoehe. */
.schau__burger {
  width: 13px; height: 10px;
  background: repeating-linear-gradient(
    rgba(244,247,247,.62) 0 1.5px, transparent 1.5px 4.25px);
}

/* ----- Aufmacher ----- */
.schau__held { position: relative; }
.schau__held img {
  /* height: auto ist noetig. Ohne sie gewinnt das height-Attribut aus dem
     HTML, das Bild bleibt 788 px hoch und aspect-ratio bleibt wirkungslos. */
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 6.6; object-fit: cover;
  /* Etwas oberhalb der Mitte: dort stehen Kessel und Kopf. Mittig
     angeschnitten blieben Jacke und Rohr uebrig. */
  object-position: 50% 38%;
}
/* Der Verlauf traegt links die Schrift und laeuft nach rechts vollstaendig
   aus. Die erste Fassung legte auch rechts noch 30 Prozent Schwarz auf;
   das Foto wurde dadurch ein brauner Schleier, auf dem nichts zu erkennen
   war, und der ganze Aufmacher sah schmutzig aus. */
.schau__held::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(92deg,
    rgba(12,28,34,.93) 0%,
    rgba(12,28,34,.80) 34%,
    rgba(12,28,34,.20) 68%,
    rgba(12,28,34,0) 100%);
}
.schau__text {
  position: absolute; z-index: 1;
  left: 14px; right: 44%; bottom: 15px;
}
.schau__auge {
  margin: 0 0 6px;
  font: 700 7px/1 var(--text);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal-lit);
}
.schau__titel {
  margin: 0 0 6px;
  font: 700 14px/1.2 var(--display);
  letter-spacing: -.02em; color: var(--white);
}
.schau__sub {
  margin: 0 0 10px;
  font: 400 8.5px/1.5 var(--text);
  color: rgba(244,247,247,.76);
}
.schau__knopf {
  display: inline-block; padding: 6px 10px;
  border-radius: 2px; background: var(--signal);
  font: 700 8.5px/1 var(--text); color: var(--ink);
}

/* ----- Leistungen -----
   Drei Karten mit Symbol, Titel und einer Zeile. Vorher standen hier
   26 px flache Kaesten mit einem Wort darin; die lasen sich wie leere
   Formularfelder und nicht wie der Inhalt einer Seite. */
.schau__leistungen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  padding: 14px; background: var(--paper);
}
.schau__karte {
  display: block; padding: 11px 11px 12px;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 3px;
}
.schau__symbol {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: 9px;
  border-radius: 3px;
  background: var(--paper-warm); color: var(--cyan-deep);
}
.schau__symbol svg { display: block; }
.schau__karte b {
  display: block; margin-bottom: 3px;
  font: 700 9.5px/1.2 var(--display);
  letter-spacing: -.01em; color: var(--ink);
}
.schau__karte em {
  display: block;
  font: 400 7.5px/1.35 var(--text); font-style: normal;
  color: var(--slate);
}

/* ----- Fusszeile -----
   Ohne sie hoerte die Seite mitten im Inhalt auf. Eine Fusszeile ist das
   Zeichen, an dem man eine Seite als vollstaendig liest. */
.schau__fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 14px;
  background: var(--ink);
}
.schau__fuss b {
  font: 800 8px/1 var(--display);
  letter-spacing: .12em; color: rgba(244,247,247,.78);
}
.schau__fuss span {
  font: 400 7.5px/1 var(--text); color: rgba(244,247,247,.45);
}

/* ----- Dieselbe Seite im Handy -----
   Ein Viertel der Breite, also weniger Zeilen, ein Knopf ueber die volle
   Breite und die Leistungen untereinander, genau wie am echten Geraet. */
.geraet--handy .schau__kopf { padding: 8px 9px; }
.geraet--handy .schau__kopf b { font-size: 7px; letter-spacing: .1em; }
.schau__held--klein img { aspect-ratio: 16 / 12; }
.schau__held--klein::after {
  background: linear-gradient(rgba(12,28,34,.2), rgba(12,28,34,.9) 78%);
}
.geraet--handy .schau__text { left: 9px; right: 9px; bottom: 9px; }
.geraet--handy .schau__titel { margin-bottom: 6px; font-size: 9.5px; }
.geraet--handy .schau__knopf {
  display: block; padding: 5px 0;
  text-align: center; font-size: 7px;
}
.schau__leistungen--schmal {
  grid-template-columns: 1fr; gap: 6px; padding: 9px;
}
.schau__leistungen--schmal .schau__karte {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px;
}
.schau__leistungen--schmal .schau__symbol {
  width: 18px; height: 18px; margin: 0; flex: 0 0 auto;
}
.schau__leistungen--schmal .schau__symbol svg { width: 11px; height: 11px; }
.schau__leistungen--schmal .schau__karte b { margin: 0; font-size: 8px; }

/* Alles unterhalb des Aufmachers haelt Abstand zum Handy. Das Foto darf
   darunter durchlaufen, ein angeschnittenes Bild liest sich als Tiefe;
   eine halb verdeckte Karte liest sich als Fehler. Diese Regel steht
   bewusst hinter .schau__leistungen: dort setzt die Kurzschreibweise
   "padding" auch den rechten Abstand, und bei gleicher Spezifitaet
   gewinnt die spaetere Regel. Weiter oben war sie wirkungslos. */
@media (min-width: 620px) {
  .schau__leistungen,
  .schau__fuss { padding-right: calc(14px + var(--ueberlappung)); }
}

/* Darunter steht das Handy nicht daneben, sondern ueberlappt die untersten
   22 px des Schirms. Getroffen wird davon nur die Fusszeile, und dort
   ruecken beide Angaben nach links aus dem Weg. */
@media (max-width: 619px) {
  .schau__fuss { justify-content: flex-start; gap: 10px; }
  .schau__fuss span { font-size: 7px; }
}

/* ---------- Bildstreifen ----------
   Drei Aufnahmen nebeneinander. Steht auf paket-werbung.html an der
   Stelle, an der vorher eine Listenzeile behauptete, dass im Betrieb
   gedreht wird. Eine Behauptung ueber Bilder gehoert bebildert.
   Hochformat, weil die Videos fuer soziale Netzwerke entstehen und dort
   hochkant laufen. */
.streifen {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(26px, 3vw, 38px);
}
.streifen__bild {
  position: relative; margin: 0;
  border-radius: 4px; overflow: hidden;
  background: var(--paper-warm);
}
.streifen__bild img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform .5s var(--ease);
}
.streifen__bild:hover img { transform: scale(1.04); }
.streifen__bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  /* Verlauf statt Flaeche: der Text braucht Halt, das Bild soll nicht
     unten abgeschnitten wirken. */
  background: linear-gradient(rgba(12,28,34,0), rgba(12,28,34,.72));
  font: 600 13px/1.3 var(--text); color: var(--paper);
}
@media (max-width: 620px) {
  .streifen { gap: 9px; }
  .streifen__bild figcaption { padding: 20px 10px 9px; font-size: 11.5px; }
}

/* ---------- Der Weg einer Anzeige ----------
   Ersetzt auf paket-werbung.html drei Absaetze Fliesstext. Aus einer
   Anzeige wird eine Anfrage — das ist eine Abfolge und laesst sich
   zeigen. Alle drei Stationen sind nachgebaut und keine Screenshots:
   sonst stuende dort ein fremdes Unternehmen oder eine Zahl, die jemand
   fuer ein echtes Ergebnis halten koennte. */
.weg {
  display: grid; gap: 20px;
  margin-top: clamp(26px, 3vw, 38px);
  counter-reset: halt;
}
@media (min-width: 880px) {
  .weg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}
.weg__halt {
  display: flex; flex-direction: column;
  padding: 22px 22px 24px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.weg__marke {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 16px;
  font: 700 15px/1.3 var(--display);
  letter-spacing: -.015em; color: var(--ink);
}
.weg__marke span {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--paper-warm);
  font: 700 11.5px/1 var(--text); color: var(--ku-marke);
}
.weg__text {
  margin-top: auto; padding-top: 15px;
  font-size: 14.5px; line-height: 1.55; color: var(--slate);
}

/* Zwischen den Stationen ein Pfeil. Am Handy zeigt er nach unten, ab
   drei Spalten nach rechts. */
.weg__halt + .weg__halt { position: relative; }
.weg__halt + .weg__halt::before {
  content: "↓";
  position: absolute; left: 50%; top: -16px;
  transform: translateX(-50%);
  font-size: 15px; line-height: 1; color: var(--slate);
}
@media (min-width: 880px) {
  .weg__halt + .weg__halt::before {
    content: "→";
    left: -16px; top: 50%;
    transform: translateY(-50%);
  }
}

/* Nachgebaute Suchanzeige. Bewusst nicht in Google-Blau: es soll klar
   sein, dass es ein Beispiel ist und kein Abbild einer fremden Marke. */
.anzeige {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px;
}
.anzeige__kopf { font-size: 12px; line-height: 1.5; color: var(--slate); }
.anzeige__kopf em {
  font-style: normal; font-weight: 700;
  margin-right: 7px; padding: 1px 5px;
  border: 1px solid var(--rule); border-radius: 2px;
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
}
.anzeige__titel {
  margin-top: 7px;
  font: 600 16px/1.35 var(--text);
  color: var(--ku-marke);
}
.anzeige__text { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--slate); }

/* Flache Fassung des Geraets fuer die mittlere Station. */
.geraet--flach { border-radius: 4px; box-shadow: 0 8px 20px rgba(12,28,34,.08); }
.geraet--flach .mini-held { padding: 16px 13px 18px; }
.mini-karten--zwei { grid-template-columns: 1fr 1fr; }
.mini-karten--zwei span { height: 30px; }

/* ---------- Ein Satz, drei Fragen ----------
   Auf paket-website-kueni.html. Der staerkste Vorteil des Assistenten
   stand bis zum 9. September nirgends: ein Formular stellt allen
   dieselben Felder, KUENI stellt die Fragen, die zu diesem einen Fall
   gehoeren. Behaupten laesst sich das in einem Satz, zeigen nur an einem
   Beispiel. Deshalb oben ein Satz, den drei Betriebe voellig verschieden
   beantworten muessen, und darunter, was jeder von ihnen zurueckfragt. */
.einzeln { margin-top: clamp(26px, 3vw, 38px); }
.einzeln__satz {
  display: grid; gap: 9px; justify-items: center;
  max-width: 620px; margin: 0 auto;
  padding: 20px 24px 22px;
  background: var(--ink); border-radius: 4px;
  text-align: center;
}
.einzeln__satz small {
  font: 600 11px/1.3 var(--text);
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(244,247,247,.5);
}
.einzeln__satz > span {
  font: 400 clamp(18px, 2.4vw, 23px)/1.4 var(--display);
  letter-spacing: -.02em; color: var(--white);
}

.einzeln__zweige { display: grid; gap: 16px; margin-top: 30px; }
.einzeln__zweige li {
  position: relative;
  padding: 20px 22px 22px;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 4px;
}
.einzeln__branche {
  display: inline-block; margin: 0 0 12px;
  padding: 5px 12px; border-radius: 999px;
  background: #DCEEF2; color: var(--cyan-deep);
  font: 700 11.5px/1 var(--text); letter-spacing: .04em;
}
.einzeln__label {
  margin: 0 0 6px;
  font: 600 11px/1.3 var(--text);
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-dim);
}
.einzeln__frage {
  margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink);
}
.einzeln__fuss {
  margin-top: 20px; text-align: center;
  font-size: 14.5px; line-height: 1.5; color: var(--slate);
}

@media (min-width: 820px) {
  .einzeln__zweige { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  /* Eine kurze Linie nach oben macht aus drei Karten drei Abzweigungen
     von demselben Satz. Untereinander gestellt zeigte sie ins Leere,
     deshalb steht sie nur hier. */
  .einzeln__zweige li::before {
    content: ""; position: absolute; top: -16px; left: 26px;
    width: 1px; height: 16px; background: var(--rule);
  }
}

/* Dieselben Karten wie im zweiten Abschnitt der Startseite, nur ohne den
   Weg nach unten: hier fuehrt keine der drei Spalten auf ein Angebot. */
.sorgen--eng { margin-top: clamp(34px, 4vw, 50px); }
.sorgen--eng .sorge { grid-template-rows: auto auto 1fr; }

/* ---------- Gegenueberstellung ----------
   Formular gegen Gespraech. Ersetzt auf paket-website-kueni.html drei
   Absaetze Fliesstext, die dasselbe erklaerten. Die Frage "warum nicht
   einfach ein Kontaktformular" entscheidet ueber dieses Paket, und sie
   laesst sich zeigen statt beschreiben.

   Bis zum 9. September unterschieden sich die beiden Seiten nur um einen
   Hauch: links #F7F9F9, rechts weiss, dazu ein duenner Streifen an der
   rechten Kante. Auf dem Schirm sahen es zwei gleich schwere weisse
   Kaesten nebeneinander, und welcher davon der alte und welcher der neue
   Weg ist, stand nur klein darueber. Jetzt tragen beide ein Kopfband mit
   "Ohne KUENI" und "Mit KUENI", die linke Seite bleibt flach und grau,
   die rechte steht weiss, angehoben und in der Markenfarbe abgesetzt,
   und unten schliesst jede mit ihrem Ergebnis ab. Der Unterschied soll
   ankommen, bevor ein Wort gelesen ist. */
.gegenueber {
  display: grid; gap: 18px;
  margin-top: clamp(26px, 3vw, 38px);
}
@media (min-width: 860px) {
  .gegenueber { grid-template-columns: 1fr 1fr; gap: 22px; }
}
.gegenueber__seite {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  /* Damit Kopf- und Fussband die abgerundeten Ecken mitnehmen. */
  overflow: hidden;
}
/* Der Abschnitt steht auf warmem Grund (#E7EFEF). Die linke Karte war
   mit #F2F6F6 heller als der Untergrund und ihr Kopfband praktisch
   unsichtbar; sie sah aus, als schwebe die Beschriftung im Nichts.
   Jetzt sitzt die Karte etwas tiefer im Grau als die Seite und das Band
   noch eine Stufe tiefer. */
.gegenueber__seite--alt {
  background: #EFF4F4;
  border-color: #CFDADA;
}
.gegenueber__seite--neu {
  border-color: rgba(0,98,119,.26);
  border-top: 3px solid var(--cyan-deep);
  box-shadow: 0 18px 42px rgba(12,28,34,.10);
}

/* ----- Kopfband ----- */
.gegenueber__marke {
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 22px 14px;
  border-bottom: 1px solid var(--rule);
}
.gegenueber__marke b {
  font: 700 17px/1.25 var(--display); letter-spacing: -.015em;
}
.gegenueber__marke span { font: 500 13px/1.4 var(--text); }

.gegenueber__seite--alt .gegenueber__marke {
  background: #DCE5E5; border-bottom-color: #C8D4D4;
}
.gegenueber__seite--alt .gegenueber__marke b { color: var(--slate); }
.gegenueber__seite--alt .gegenueber__marke span { color: var(--slate-dim); }

.gegenueber__seite--neu .gegenueber__marke {
  background: #DCEEF2; border-bottom-color: rgba(0,98,119,.18);
}
.gegenueber__seite--neu .gegenueber__marke b { color: var(--cyan-deep); }
.gegenueber__seite--neu .gegenueber__marke span { color: rgba(0,98,119,.78); }

.gegenueber__inhalt {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 20px 22px 20px;
}

/* Nachgebautes Formular. Es geht nicht darum, was jemand hineinschreibt,
   sondern darum, wie wenig danach gefragt wird. */
.formmock { display: grid; gap: 9px; }
.formmock__feld {
  display: block; padding: 9px 11px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 3px;
}
.formmock__feld b {
  display: block; font: 600 11.5px/1.3 var(--text);
  letter-spacing: .03em; color: var(--slate);
}
/* Die Felder waren zuerst leer. Drei graue Kaesten sahen aus, als waere
   etwas nicht geladen — und im Kasten darunter stand ein Name, den das
   Formular gar nicht zeigte. Jetzt steht drin, was der Kunde getippt
   hat, und man sieht sofort, wie wenig das ist. */
.formmock__feld i {
  display: block; min-height: 19px; margin-top: 2px;
  font: 400 14px/1.35 var(--text); font-style: normal; color: var(--ink);
}
.formmock__feld--gross i { min-height: 42px; }
.formmock__knopf {
  align-self: start; margin-top: 3px; padding: 10px 18px;
  background: var(--slate); color: var(--white);
  border-radius: 3px; font: 600 13px/1.3 var(--text);
}

/* Verkuerzter Gespraechsverlauf. Bewusst schmaler und ohne Uhrzeiten:
   den vollen Verlauf zeigt weiter oben das Karussell, hier zaehlt nur
   das Hin und Her an sich. */
.minichat { display: grid; gap: 8px; }
.minichat__blase {
  max-width: 88%; padding: 9px 13px;
  border-radius: 3px;
  font-size: 14px; line-height: 1.5;
}
.minichat__blase--kunde { justify-self: end; background: var(--ink); color: var(--paper); }
.minichat__blase--kueni {
  justify-self: start; background: #EDF6F8;
  border: 1px solid rgba(0,98,119,.16); color: var(--ink);
}

.gegenueber__pfeil {
  display: flex; align-items: center; gap: 11px;
  margin: 18px 0 11px;
  font: 600 11.5px/1.3 var(--text);
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.gegenueber__pfeil::before { content: "↓"; font-size: 15px; letter-spacing: 0; }
.gegenueber__pfeil::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.gegenueber__karte {
  padding: 14px 16px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 3px;
}
.gegenueber__karte--voll { border-color: rgba(0,98,119,.22); }
.gegenueber__zeile {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px;
  padding: 6px 0;
}
.gegenueber__zeile + .gegenueber__zeile { border-top: 1px solid var(--paper-warm); }
.gegenueber__zeile small {
  font: 600 11px/1.5 var(--text);
  letter-spacing: .04em; text-transform: uppercase; color: var(--slate);
}
.gegenueber__zeile span { font-size: 14.5px; line-height: 1.45; color: var(--ink); }

.gegenueber__luecken {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 14px;
}
.gegenueber__luecken li {
  padding: 5px 11px; border-radius: 999px;
  font: 600 12px/1.35 var(--text);
  /* Kein Rot. Das Formular ist nicht kaputt, es fragt nur nicht nach. */
  background: rgba(201,146,46,.14); color: #8A6516;
  border: 1px solid rgba(201,146,46,.42);
}
.gegenueber__luecken--gut li {
  background: rgba(31,110,74,.12); color: #1F6E4A;
  border-color: rgba(31,110,74,.36);
}

/* ----- Fussband mit dem Ergebnis -----
   Der Satz stand vorher als letzter Absatz mitten im Kasten und ging
   unter. Als eigenes Band gelesen, ist er der Vergleich: links kostet es
   zwei Anrufe, rechts einen. */
.gegenueber__folge {
  margin: 0; padding: 14px 22px 16px;
  border-top: 1px solid var(--rule);
  font-size: 14px; line-height: 1.5;
}
.gegenueber__folge b {
  display: block; margin-bottom: 3px;
  font: 700 10.5px/1.3 var(--text);
  letter-spacing: .12em; text-transform: uppercase;
}
.gegenueber__seite--alt .gegenueber__folge {
  background: #DCE5E5; border-top-color: #C8D4D4; color: var(--slate);
}
.gegenueber__seite--alt .gegenueber__folge b { color: var(--slate-dim); }
.gegenueber__seite--neu .gegenueber__folge {
  background: rgba(0,98,119,.055); border-top-color: rgba(0,98,119,.16);
  color: var(--ink);
}
.gegenueber__seite--neu .gegenueber__folge b { color: var(--cyan-deep); }

/* Erweiterungen stehen bewusst unter den Karten und nicht darin. */
.addons { margin-top: clamp(30px, 3vw, 46px); padding-top: 26px; border-top: 1px solid var(--rule); }
.addons h3 { margin-bottom: 6px; }
.addons__list { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 9px; }
.addons__list li {
  font: 500 15px/1 var(--text); color: var(--ink);
  padding: 11px 16px;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 999px;
}
.addons__list li small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--slate); }

/* Zwei Spalten als Zwischenschritt, damit die Karten nicht zu schmal
   werden, bevor sie ganz untereinander rutschen. */
@media (max-width: 1080px) {
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Die dritte Karte steht allein in der zweiten Reihe und bekommt die
     volle Breite, damit keine Lücke entsteht. */
  .pack:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .packs { grid-template-columns: 1fr; gap: 26px; }
  .pack:last-child { grid-column: auto; }
  /* Untereinander braucht die Empfehlung oben Luft, sonst schneidet das
     Schild in die Karte darüber. */
  .pack--empfohlen { margin-top: 4px; }
  .pack:hover { transform: none; }
}

/* ---------- Wenn-dann-Liste ---------- */
.chain { display: grid; gap: 2px; margin-top: 34px; }
.chain li {
  background: var(--white);
  border-left: 2px solid var(--signal);
  padding: 18px 22px;
  font-size: 16.5px; line-height: 1.55;
  color: var(--ink);
}

/* ---------- Ablauf ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 30px);
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
/* Die Ziffer stand vorher in der Haarlinienfarbe und war auf dem hellen
   Grund kaum zu sehen. Jetzt traegt sie einen eigenen Strich darunter und
   liest sich als Wegmarke. */
.step::before {
  content: counter(step, decimal-leading-zero);
  font: 700 clamp(24px, 20px + 1vw, 34px)/1 var(--display);
  color: var(--slate-dim);
  letter-spacing: -.03em;
  align-self: start;
  width: 42px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--rule);
  transition: color .28s var(--ease), border-color .28s var(--ease);
}
.step:hover::before { color: var(--ink); border-bottom-color: var(--signal); }
.step h3 { margin-bottom: 6px; }
.step p { font-size: 16.5px; line-height: 1.6; max-width: 56ch; }

/* ---------- Zitatzeile im Über-uns-Abschnitt ---------- */
/* ---------- Person hinter dem Angebot ----------
   Rund geschnitten, weil ein Portraet in einem eckigen Kasten auf einer
   dunklen Flaeche wie ein Ausweisfoto wirkt. Der Ring nimmt die
   abgeleitete Petrolfamilie auf, nicht die Markenfarbe selbst. */
.person {
  margin: 26px 0 0;
  display: flex; align-items: center; gap: 18px;
}
.person__bild {
  flex: none;
  /* Etwas groesser als zuerst gesetzt: es ist das einzige Gesicht auf der
     ganzen Seite und traegt die Vertrauensarbeit. Bei 94 px las es sich
     eher wie ein Symbol als wie ein Mensch.
     Datei und Rahmen sind beide quadratisch, deshalb schneidet
     object-fit: cover nichts weg und verzerrt nichts. Die Ausrichtung
     macht der Zuschnitt der Datei: Augen bei rund 36 Prozent der Hoehe,
     Kopf waagerecht mittig. */
  width: 108px; height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(14,160,190,.55);
  box-shadow:
    0 0 0 5px rgba(14,160,190,.10),
    0 12px 30px rgba(0,0,0,.38);
}
.person__text b {
  display: block;
  font: 700 17.5px/1.3 var(--display);
  letter-spacing: -.015em;
  color: var(--paper);
}
.person__text span {
  display: block; margin-top: 5px;
  font-size: 14.5px; line-height: 1.45;
  color: rgba(244,247,247,.68);
}
@media (max-width: 620px) {
  .person__bild { width: 92px; height: 92px; }
}

/* Kompakte Fassung im Hero: Gesicht zum Wiedererkennen nach dem Besuch vor Ort. */
.person--hero { margin-top: 22px; gap: 13px; }
.person--hero .person__bild {
  width: 48px; height: 48px;
  box-shadow: 0 0 0 3px rgba(14,160,190,.10), 0 6px 16px rgba(0,0,0,.32);
}
.person--hero .person__text { margin: 0; }
.person--hero .person__text b { font-size: 14.5px; letter-spacing: -.005em; text-wrap: balance; }
.person--hero .person__text span { margin-top: 3px; font-size: 12.5px; color: #AEBFC3; }

.founder__quote {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 15px + .8vw, 23px); line-height: 1.35;
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
/* "Ueber uns" ist seit dem 3. September ein dunkler Abschnitt. Der Satz
   stand seitdem in Tintenfarbe auf Tintengrund und war unsichtbar. */
.section--dark .founder__quote { color: var(--paper); border-top-color: var(--rule-dark); }

/* ---------- Passt / passt nicht ---------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 8px; }
.fit__col h3 { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.fit__col--no h3 { border-bottom-color: var(--rule); color: var(--slate); }
.fit__col li { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16.5px; line-height: 1.5; }
.fit__col--no li { color: var(--slate); }

/* ---------- Abschluss ---------- */
.closer-section { position: relative; overflow: hidden; }
.closer-section .wrap { position: relative; z-index: 3; }
.closer__media { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0; }
.closer__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.closer__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(95deg, var(--ink) 10%, rgba(12,28,34,.9) 56%, rgba(12,28,34,.62) 100%); }
.closer { text-align: left; }
/* Ein ruhiger Ausweg unter den Handlungen: wer noch nicht so weit ist,
   soll nicht in einer Sackgasse stehen. */
.closer__weiter {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(244,247,247,.18);
  font-size: 15px; line-height: 1.55; color: rgba(244,247,247,.66);
}
.closer__weiter a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.closer__weiter a:hover { color: var(--signal); }
.closer h2 { max-width: 16ch; }
.closer .lead { margin-top: 20px; }
.closer .btn-row { margin-top: 34px; }
.closer__phone {
  font: 700 clamp(22px, 18px + 1vw, 30px)/1 var(--display);
  color: var(--paper); text-decoration: none; letter-spacing: -.02em;
}
.closer__phone:hover { color: var(--signal-lit); }

/* ---------- Kontakt ---------- */
/* Trenner zwischen den beiden Wegen auf kontakt.html. Eine Linie mit
   einem Wort darin, damit der Abschnitt nicht wie zwei Abschnitte
   aussieht: es ist eine Anfrage, nur auf zwei Arten. */
.oder {
  display: flex; align-items: center; gap: 18px;
  margin: clamp(34px, 4vw, 52px) 0 clamp(28px, 3vw, 40px);
  font: 500 14px/1 var(--text); color: var(--slate-dim);
}
.oder::before, .oder::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--rule);
}

/* Sprungziel fuer "Direkt zum Formular": ohne Randabstand verschwindet die
   Feldueberschrift unter dem fixen Kopfbereich. */
.contact #contact-form { scroll-margin-top: 105px; }
.v2-contact-choice { margin: 0 0 24px; }

/* FAQ-Akkordeon auf kueni-erleben.html, ergaenzt aus der Zusatzvariante. */
.kfaq { margin-top: 28px; }
.kfaq details { border-top: 1px solid var(--rule); }
.kfaq details:last-child { border-bottom: 1px solid var(--rule); }
.kfaq summary { padding: 18px 0; color: var(--ink); font: 500 17px/1.4 var(--text); cursor: pointer; list-style-position: outside; margin-left: 19px; }
.kfaq details > div { padding: 0 0 22px 19px; font-size: 16px; line-height: 1.55; color: var(--slate); max-width: 62ch; }
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.form { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; font: 500 14.5px/1.4 var(--text); color: var(--ink); }
.field input, .field select, .field textarea {
  font: 400 16px/1.5 var(--text); color: var(--ink);
  padding: 13px 15px;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(12,28,34,.08);
}
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--slate); }
.consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; accent-color: var(--ink); }
/* ---------- Zusagen unter der Schaltflaeche ----------
   Dauer, Unverbindlichkeit und "kein Newsletter" standen bisher nur auf
   der Kontaktseite, also erst hinter dem Klick, ueber den sie eigentlich
   entscheiden. Alle drei Angaben sind dieselben, die dort im Abschnitt
   "Was Sie erwartet" stehen. */
.cta-fein {
  margin-top: 14px;
  font: 400 13.5px/1.5 var(--text);
  color: var(--slate);
}
.section--dark .cta-fein,
.hero .cta-fein,
.closer .cta-fein { color: rgba(244,247,247,.72); }

.form-status { font-size: 14.5px; line-height: 1.5; color: var(--slate); min-height: 1.5em; }
/* Erfolg und Fehler duerfen sich nicht nur in der Farbe unterscheiden:
   der Text sagt in beiden Faellen von sich aus, was los ist. Die Farbe
   ist Zugabe, nicht die Information. */
.form-status--gut { color: var(--ku-marke); font-weight: 500; }
.form-status--fehler { color: #A8341F; font-weight: 500; }
.form-status a { color: inherit; }

/* Bot-Falle. Bewusst nicht display:none, das erkennen viele Skripte. */
.honig {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.contact-side li { padding: 15px 0; border-bottom: 1px solid var(--rule); }
.contact-side li:first-child { border-top: 1px solid var(--rule); }
.contact-side a { font: 500 16.5px/1.4 var(--text); color: var(--ink); text-decoration: none; }
.contact-side a:hover { color: var(--signal); }
.contact-side span { font-size: 16.5px; color: var(--slate); }
.contact-side small { display: block; font-size: 13px; color: var(--slate); margin-bottom: 3px; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--ink); color: rgba(244,247,247,.72); padding: clamp(52px, 6vw, 84px) var(--pad-x) 34px; }
.site-footer__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px, 4vw, 60px); }
.site-footer img { height: 54px; width: auto; margin-bottom: 16px; }
.site-footer p { font-size: 15px; line-height: 1.6; color: rgba(244,247,247,.68); max-width: 32ch; }
.site-footer h3 { font: 600 13px/1.4 var(--text); color: rgba(244,247,247,.68); margin-bottom: 14px; letter-spacing: 0; }
.site-footer nav, .site-footer .fcol { display: flex; flex-direction: column; gap: 11px; }
.site-footer a { font-size: 15.5px; color: rgba(244,247,247,.88); text-decoration: none; }
.site-footer a:hover { color: var(--signal-lit); }
.site-footer .fmeta { font-size: 15px; color: rgba(244,247,247,.68); }
.site-footer__bar {
  max-width: var(--maxw); margin: clamp(38px, 5vw, 58px) auto 0;
  padding-top: 22px; border-top: 1px solid var(--rule-dark);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 14px; color: rgba(244,247,247,.72);
}

/* ---------- Rechtsseiten ---------- */
.legal { padding: clamp(52px, 7vw, 92px) var(--pad-x); }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(30px, 20px + 2.4vw, 46px); margin-bottom: 10px; }
.legal .updated { font-size: 14.5px; color: var(--slate); margin-bottom: 38px; }
.legal h2 { font-size: clamp(20px, 16px + 1.1vw, 25px); margin: 40px 0 12px; }
.legal h3 { margin: 26px 0 8px; }
.legal p { margin: 0 0 13px; font-size: 16.5px; line-height: 1.7; }
.legal ul { margin: 0 0 13px; padding-left: 21px; list-style: disc; }
.legal li { margin: 0 0 6px; font-size: 16.5px; line-height: 1.7; }
.legal a { color: var(--ink); text-underline-offset: 3px; }
.legal a:hover { color: var(--signal); }
.legal .placeholder { background: rgba(201,146,46,.14); border-left: 3px solid var(--signal); padding: 2px 8px; font-weight: 600; color: var(--ink); }
.legal .back { display: inline-flex; align-items: center; gap: 8px; margin-top: 42px; font: 600 15.5px/1 var(--text); color: var(--ink); text-decoration: none; }
.legal .back:hover { color: var(--signal); }

/* ---------- Fester CTA am Handy ----------
   Erscheint erst nach dem Hero und verschwindet am Kontaktbereich.
   Die Handlung bleibt jederzeit einen Daumen entfernt. */
.sticky-cta { display: none; }

/* Bis 1080 px statt bis 900 px: darueber passen sechs Menuepunkte,
   Telefonnummer und Schaltflaeche nicht mehr nebeneinander in eine Zeile.
   Vorher brachen sie um, danach quetschte der Kopf das Logo weg. Das
   Klappmenue traegt alle Punkte samt Telefonnummer und Zeiten, und der
   feste Balken unten haelt den Haupt-CTA erreichbar. */
@media (max-width: 1080px) {
  .sticky-cta {
    display: flex; gap: 10px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 12px var(--pad-x) calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(12,28,34,.96);
    backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid rgba(201,146,46,.4);
    transform: translateY(120%);
    transition: transform .45s var(--ease);
  }
  .sticky-cta.is-in { transform: none; }
  .sticky-cta .btn { flex: 1; padding: 14px 18px; }
  .sticky-cta__tel {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 2px;
    border: 1px solid rgba(244,247,247,.34); color: var(--paper);
  }
  .sticky-cta__tel:hover { border-color: var(--paper); }

  /* Der feste Balken liegt ueber dem Inhalt und ist rund 73px hoch. Die
     Fusszeile hatte nur 34px Abstand nach unten, deshalb schnitt der Balken
     ihre letzte Zeile ab. Hier wird der Platz reserviert. */
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Cookie-Banner ----------
   Erscheint bis zur ersten Entscheidung, danach nur noch ueber den Link
   "Cookie-Einstellungen" in der Fusszeile. Stapelt sich am Handy ueber dem
   festen Balken (dessen Hoehe von rund 73px siehe oben), statt ihn zu
   verdecken. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x) calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 3px solid var(--signal);
  box-shadow: 0 -18px 40px -14px rgba(12,28,34,.4), 0 -3px 10px rgba(12,28,34,.14);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; max-width: 62ch; font-size: 14.5px; line-height: 1.55; color: var(--slate); }
.cookie-banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__aktionen { display: flex; gap: 12px; flex: 0 0 auto; }

@media (max-width: 1080px) {
  .cookie-banner { bottom: calc(73px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  /* Akzeptieren steht im Markup zuerst und liegt damit oben, Ablehnen
     darunter — beide exakt gleich breit und hoch, nur die Anordnung
     schafft die Rangfolge, nicht die Groesse. */
  .cookie-banner__aktionen { flex-direction: column; }
  .cookie-banner__aktionen .btn { width: 100%; }
}

/* Auf breiten Schirmen bleibt die Überschriftenspalte am oberen Rand
   stehen, solange der Inhalt daneben weiterläuft. Sonst entsteht links
   unter kurzen Überschriften eine große leere Fläche. */
@media (min-width: 1081px) {
  .split:not(.split--intro) > div:first-child {
    position: sticky;
    top: calc(var(--header-h) + 34px);
  }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1080px) {
  .nav { gap: 22px; }
  .stage { grid-template-columns: 48px minmax(0, 1fr); }
  .stage__metric { grid-column: 2; padding-top: 10px; }
}

@media (max-width: 1080px) {
  :root { --header-h: 72px; }
  /* Auf dem Handy nur Logo und Menü. Der Haupt-CTA steht ohnehin
     unmittelbar darunter im Hero. */
  .nav, .header-phone, .header-actions > .btn { display: none; }
  .burger { display: flex; }
  .site-header { gap: 14px; }
  .site-header__logo img { height: 46px; }

  .site-header.is-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 6px var(--pad-x) 26px;
    background: var(--ink-soft);
    border-bottom: 2px solid var(--signal);
    box-shadow: 0 24px 50px rgba(0,0,0,.6);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .site-header.is-open .nav a {
    width: 100%; padding: 16px 0; border-bottom: 1px solid var(--rule-dark);
    font-size: 17.5px; border-top: 0;
  }
  .site-header.is-open .nav__meta { display: flex; flex-direction: column; gap: 5px; padding-top: 22px; }
  .site-header.is-open .nav__meta a { border: 0; padding: 0; font: 700 21px/1.3 var(--display); color: var(--paper); }
  .site-header.is-open .nav__meta span { font-size: 14.5px; color: rgba(244,247,247,.55); }
  .site-header.is-open::after {
    content: ""; position: fixed; inset: var(--header-h) 0 0;
    background: rgba(6,11,20,.7); z-index: -1;
  }

  .split, .contact { grid-template-columns: 1fr; }
  .fit { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  /* Stand vorher zusammen mit der geloeschten .deliver-Liste in einer
     Regel und ging beim Aufraeumen mit weg: ohne diese Zeile behielt der
     Schritt am Handy sein zweispaltiges Raster vom Schirm. */
  .step { grid-template-columns: 1fr; gap: 6px; }
  .step::before { font-size: 15px; }
  /* Die sechs Stufen bekommen am Handy eine eigene Schiene. Die Linie
     füllt sich golden bis zu der Stufe, auf der man gerade steht — man
     sieht beim Scrollen, wie weit man im Trichter ist. */
  .stage {
    display: block; position: relative;
    padding: 22px 0 22px 52px;
    border-top: 0;
  }
  .stage:last-child { border-bottom: 0; }
  .stage::before {
    content: ""; position: absolute; left: 15px; top: 34px; bottom: -22px;
    width: 2px; background: rgba(244,247,247,.14);
  }
  .stage:last-child::before { display: none; }
  .stage.is-past::before, .stage.is-active::before { background: var(--signal); }
  .stage__num {
    position: absolute; left: 0; top: 18px; padding: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    border: 2px solid rgba(244,247,247,.24);
    background: var(--ink);
    font-size: 12.5px; color: rgba(244,247,247,.55);
    transition: border-color .4s ease, color .4s ease, background .4s ease, box-shadow .4s ease;
  }
  .stage.is-past .stage__num { border-color: var(--signal); color: var(--signal); }
  .stage.is-active .stage__num {
    border-color: var(--signal-lit); background: var(--signal); color: var(--ink);
    box-shadow: 0 0 0 6px rgba(201,146,46,.16);
    transform: none;
  }
  .stage__metric { padding-top: 12px; }
  .site-footer__bar { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js [data-reveal], html.js [data-stagger] > * { opacity: 1; transform: none; }
  html.js [data-zoom] img { transform: none; }
}

/* ================= Live-Effekte =================
   Bewegung, die dauerhaft laeuft, damit die Seite nicht tot wirkt.
   Bewusst langsam und leise: lange Zyklen, geringe Deckkraft, nichts
   blinkt. Alles schaltet sich bei prefers-reduced-motion ab. */

/* Ein Glanz wandert in grossen Abstaenden ueber die Hauptschaltflaeche.
   Der Zyklus ist lang, damit es wie ein Lichtreflex wirkt und nicht wie
   ein blinkender Knopf. */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; width: 36%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: duGlanz 6.5s ease-in-out infinite;
}
@keyframes duGlanz {
  0%, 68%   { left: -50%; }
  92%, 100% { left: 120%; }
}
/* Die Schaltflaechen auf einer Seite sollen nicht im Gleichschritt
   aufblitzen. */
.closer .btn--primary::after      { animation-delay: 2.2s; }
.sticky-cta .btn--primary::after  { animation-delay: 3.4s; }
.pack--empfohlen .btn--primary::after { animation-delay: 1.1s; }

/* Ein ruhiger Puls auf dem Punkt, der Betrieb anzeigt. */
@keyframes duPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,199,164,.5); }
  70%      { box-shadow: 0 0 0 9px rgba(43,199,164,0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { animation: none; opacity: 0; }
}

/* Bestaetigung der Paketwahl ueber dem Kontaktformular. Sie soll auffallen,
   ohne wie eine Warnung zu wirken. */
.paketwahl {
  margin: 0 0 4px;
  padding: 14px 17px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ku-marke);
  border-radius: 3px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.paketwahl b { font-weight: 700; }

/* ---------- WhatsApp ----------
   Viele Kunden schreiben lieber ueber WhatsApp als ueber ein
   Formular mit sechs Feldern. Der Knopf senkt die Huerde auf eine
   Nachricht. Bewusst NICHT im WhatsApp-Gruen als Flaeche: das wuerde
   neben Gold und Petrol billig wirken. Nur das Zeichen traegt die
   Farbe, den Rest traegt die Seite. */
.btn--wa { background: var(--white); color: var(--ink); border-color: var(--rule); }
.btn--wa:hover { border-color: #1EA855; transform: translateY(-1px); }
.btn--wa svg { color: #1EA855; flex: 0 0 auto; }
/* Auf dunklen Flaechen bleibt der Knopf ruhig wie .btn--quiet. */
.section--dark .btn--wa,
.hero .btn--wa,
.closer-section .btn--wa {
  background: rgba(244,247,247,.08);
  color: var(--paper);
  border-color: rgba(244,247,247,.34);
}
.section--dark .btn--wa:hover,
.hero .btn--wa:hover,
.closer-section .btn--wa:hover { border-color: #35C46B; background: rgba(244,247,247,.14); }
.section--dark .btn--wa svg,
.hero .btn--wa svg,
.closer-section .btn--wa svg { color: #35C46B; }

/* Im festen Balken am Handy sitzt WhatsApp als eigenes Zeichen neben
   dem Telefon. Beides sind Wege, die ohne Formular funktionieren. */
.sticky-cta__wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  border: 1px solid rgba(244,247,247,.28); border-radius: 2px;
  color: #35C46B; background: rgba(244,247,247,.06);
  transition: border-color .2s ease, background .2s ease;
}
.sticky-cta__wa:hover { border-color: #35C46B; background: rgba(53,196,107,.12); }