/* ============================================================
   Schriften, lokal ausgeliefert
   Variable Schriften: eine Datei deckt den ganzen Gewichtsbereich ab.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   DeineAutomation – Basis / Corporate Identity
   ============================================================ */

:root {
  /* Farben laut Design System */
  --hell-1: #FFFFFF;
  --hell-2: #F2EFE9;
  --grau: #DBD5C9;
  --marke: #163832;
  --marke-hell: #296056;
  --akzent: #FF6142;
  --whatsapp: #25D366;

  /* Kleintext: aus der Markenfarbe abgeleiteter, lesbarer Grauton */
  --text-leise: #5C736D;

  /* Rollen */
  --color-bg: var(--hell-1);
  --color-flaeche: var(--hell-2);
  --color-text: var(--marke);
  --color-line: rgba(22, 56, 50, 0.22);

  /* Schrift */
  --font-headline: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Schriftgroessen: mobil und Desktop laut Skala, dazwischen fliessend */
  --text-hero: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --text-h2: clamp(1.625rem, 1.333rem + 1.458vw, 2.5rem);
  --text-h3: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-body: clamp(1rem, 0.979rem + 0.104vw, 1.0625rem);
  --text-klein: 0.8125rem;

  /* Abstandsskala */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Sektionen und Container */
  --section-y: var(--space-48);
  /* 16px als Untergrenze: 8px lagen auf schmalen Viewports zu eng am Rand */
  --page-x: var(--space-16);
  --page-max: 1200px;

  /* Textbreiten */
  --breite-text: 680px;
  --breite-hero: 900px;

  /* Komponenten */
  --radius: 0px;
  --radius-button: 0px;
  --border-width: 2.5px;
  --nav-height: clamp(3.5625rem, 3.042rem + 2.604vw, 5.125rem);
  /* gemeinsame Achse von Zeitachsen-Linie und Meilensteinen (nur mobil) */
  --timeline-achse: 16px;
  --touch-min: 44px;
}

@media (min-width: 48rem) {
  :root {
    --section-y: var(--space-96);
    --page-x: var(--space-32);
  }
}

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

html {
  scroll-behavior: smooth;
  /* Sicherheitsnetz gegen waagrechtes Scrollen. clip statt hidden, weil hidden
     einen Scrollbereich aufmacht und damit position:sticky aushebeln würde. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.65;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  /* Sicherheitsnetz gegen Überlauf bei sehr langen Wörtern, aber ohne
     automatische Wörterbuch-Trennung mit sichtbarem Bindestrich */
  overflow-wrap: break-word;
  hyphens: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  /* Bilder sollen sich nicht mit gedrueckter Maustaste aus der Seite
     ziehen lassen. Ergaenzend steht draggable="false" im HTML, weil
     Firefox die CSS-Eigenschaft nicht kennt. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* ============================================================
   Layout-Grundlagen
   ============================================================ */

.page-container {
  width: 100%;
  max-width: calc(var(--page-max) + (var(--page-x) * 2));
  margin-inline: auto;
  padding-inline: var(--page-x);
}

/* Sektionen wechseln durchgehend zwischen Weiß und Hell 2 */
.section--weiss {
  background-color: var(--hell-1);
}

.section--marke {
  background-color: var(--marke);
  color: var(--hell-1);
}

/* Alles, was direkt auf dem dunklen Grund liegt, dreht auf Hell.
   Karten mit eigener heller Fläche setzen ihre Textfarbe weiter unten zurück. */
.section--marke .eyebrow {
  color: var(--hell-1);
}

.section--marke .small-text,
.section--marke .label {
  color: rgba(255, 255, 255, 0.7);
}

.section--marke .ph-image {
  border-color: rgba(255, 255, 255, 0.3);
}

/* Der primäre Button braucht auf dunklem Grund die Umkehrung,
   sonst steht Markenfarbe auf Markenfarbe */
.section--marke .button--primaer {
  background-color: var(--hell-1);
  color: var(--marke);
  box-shadow: inset 0 0 0 var(--border-width) var(--hell-1);
}

.section--marke .button--primaer:hover {
  background-color: var(--akzent);
  color: var(--hell-1);
  box-shadow: inset 0 0 0 var(--border-width) var(--akzent);
}

.section--marke .button--sekundaer {
  color: var(--hell-1);
  box-shadow: inset 0 0 0 var(--border-width) var(--hell-1);
}

.section--marke .button--sekundaer:hover {
  color: var(--akzent);
  box-shadow: inset 0 0 0 var(--border-width) var(--akzent);
}

.section--hell {
  background-color: var(--hell-2);
}

/* Sprungziele der Navigation nicht unter die fixe Navbar rutschen lassen */
section[id] {
  scroll-margin-top: var(--nav-height);
}

/* ============================================================
   Typografie
   ============================================================ */

.heading-1 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-h1);
  line-height: 1.2;
  letter-spacing: normal;
}

.heading-2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: normal;
}

.heading-3 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: normal;
}

.paragraph {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.65;
  max-width: var(--breite-text);
}

.small-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-klein);
  line-height: 1.5;
  color: var(--text-leise);
}

.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-klein);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* ============================================================
   Buttons
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--touch-min);
  padding: var(--space-16) var(--space-32);
  /* nötig, sobald die Klasse auf einem <button> sitzt: sonst bleibt der
     graue Standardrahmen des Browsers neben der eigenen Umrandung stehen */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.button--primaer {
  background-color: var(--marke);
  color: var(--hell-1);
  box-shadow: inset 0 0 0 var(--border-width) var(--marke);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.button--primaer:hover {
  background-color: var(--akzent);
  box-shadow: inset 0 0 0 var(--border-width) var(--akzent);
}

.button--sekundaer {
  background-color: transparent;
  color: var(--marke);
  box-shadow: inset 0 0 0 var(--border-width) var(--marke);
  transition: color 0.3s ease, box-shadow 0.3s ease;
}

.button--sekundaer:hover {
  color: var(--akzent);
  box-shadow: inset 0 0 0 var(--border-width) var(--akzent);
}

/* ============================================================
   Bild-Platzhalter
   ============================================================ */

.ph-image {
  background-color: transparent;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius);
}

/* ============================================================
   Navigation
   ============================================================ */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background-color: var(--color-bg);
  color: var(--color-text);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  min-height: var(--nav-height);
}

.site-nav__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
}

/* feste Höhe, Breite folgt dem Seitenverhältnis des Logos */
.site-nav__logo-img {
  display: block;
  width: auto;
  height: 2.125rem;
}

/* macht den Wrapper für die Layoutberechnung unsichtbar: Menü und Button
   verhalten sich wie direkte Flex-Kinder von .site-nav__inner, solange kein
   Kompaktmodus aktiv ist. Erst dort wird das Panel zur eigenen animierbaren Box. */
.site-nav__panel {
  display: contents;
}

.site-nav__menu {
  display: flex;
  /* füllt den Raum zwischen Logo und Button, die Links sitzen mittig darin */
  flex: 1 1 auto;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-block: var(--space-8);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--text-klein) + 2px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--marke);
  /* Text darf nie umbrechen - sonst wird der Zeilenumbruch nicht als
     Überlauf erkannt und der Wechsel zum Hamburger-Menü bleibt aus */
  white-space: nowrap;
}

/* Linie unter dem Link: wächst beim Hover/aktiven Zustand von links nach
   rechts auf, beim Verlassen zieht sie sich zur rechten Seite zurück */
/* die Linie wird nur ein- und ausgeblendet, sie läuft nicht mehr von einer
   Seite herein. Dauer und Kurve bleiben wie zuvor. */
.nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 6.5px;
  left: 0;
  height: 3px;
  background-color: var(--marke);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  opacity: 1;
}

.site-nav__cta {
  display: flex;
  flex: 0 0 auto;
  min-height: var(--touch-min);
  padding-inline: var(--space-32);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 10px;
  border: 0;
  border-radius: var(--radius);
  background-color: transparent;
  cursor: pointer;
}

.nav-toggle svg {
  width: 100%;
  height: 100%;
  /* Icon gespiegelt, wie gewünscht */
  transform: scaleX(-1);
}

/* Kompaktmodus: JS hat per Überlauf-Messung festgestellt, dass die Navlinks
   nicht mehr in einer Zeile Platz haben (siehe main.js) - dann weichen Links
   und Button dem Hamburger-Icon, statt vorher umzubrechen */
.site-nav--compact .nav-toggle {
  display: flex;
}

/* flex-basis:100% statt CSS Grid: eine Grid-Zeile mit auto-Höhe respektiert
   die animierte max-height eines Kind-Elements in Chrome nicht zuverlässig
   (gleiche Art von Bug wie bei grid-template-rows für die FAQ-Karten). Mit
   order + flex-basis:100% bleiben Logo und Toggle in der ersten Zeile, das
   Panel wird als eigenständiges Flex-Item darunter animiert - erprobte
   Technik, siehe FAQ-Antworten. */
.site-nav--compact .site-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* ohne flex-start würde die erste Zeile beim geschlossenen Panel den
     Freiraum aufbrauchen und beim Öffnen zusammenschrumpfen - Logo und
     Icon würden sichtbar nach oben springen */
  align-content: flex-start;
  /* das 32px-gap der Basisregel wirkt bei flex-wrap auch zwischen den Zeilen
     und würde die geschlossene Navbar um genau diesen Wert zu hoch machen -
     der Abstand zum Panel kommt stattdessen aus dessen padding-top */
  row-gap: 0;
}

/* hält die erste Zeile unabhängig vom Panel immer auf voller Navbar-Höhe,
   sodass Logo und Icon konstant mittig sitzen */
.site-nav--compact .site-nav__logo {
  min-height: var(--nav-height);
}

.site-nav--compact .nav-toggle {
  order: 1;
  margin-left: auto;
}

/* Höhe animiert über max-height auf den exakt gemessenen Zielwert (siehe
   main.js), gleiche Technik wie bei den FAQ-Karten. Kein Padding direkt
   auf dem Panel, sonst verhindert das ein sauberes Schließen auf 0px. */
.site-nav--compact .site-nav__panel {
  order: 2;
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  /* füllt den Bereich unter der Navbar bis zum unteren Bildschirmrand */
  height: calc(100dvh - var(--nav-height));
  max-height: 0;
  overflow: hidden auto;
  transition: max-height 0.3s ease;
}

.site-nav--compact.is-open .site-nav__panel {
  max-height: calc(100dvh - var(--nav-height));
}

.site-nav--compact .site-nav__menu {
  /* ohne dieses Reset würde das Menü die Basisregel flex:1 1 auto erben,
     im hohen Panel mitwachsen und den Button nach unten drücken */
  flex: 0 0 auto;
  padding-top: var(--space-48);
}

.site-nav--compact .site-nav__cta {
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space-24);
}

/* zwei Spalten, spaltenweise gefüllt: vier feste Zeilen ergeben bei sieben
   Links 4 + 3. Großzügiger Abstand statt Trennlinien. */
.site-nav--compact .nav-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  align-items: start;
  gap: var(--space-8) var(--space-32);
  width: 100%;
}

.site-nav--compact .nav-link {
  padding-block: var(--space-8);
}

/* im Menü keine Unterstreichungs-Animation - die gehört zur Navbar-Zeile */
.site-nav--compact .nav-link::after {
  content: none;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + var(--space-64));
  padding-bottom: var(--space-96);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
}

.hero__visual {
  display: block;
  width: 100%;
  /* height:auto, damit aspect-ratio greift - das height-Attribut am <img>
     würde sonst eine feste Pixelhöhe setzen */
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  object-fit: cover;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-klein);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marke);
}

.hero .heading-1 {
  margin-top: var(--space-16);
  font-size: var(--text-hero);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 100%;
}

.hero__text {
  max-width: var(--breite-hero);
  margin-top: var(--space-32);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

/* ============================================================
   Aufgaben-Raster (Sektion Probleme, volle Breite)
   ============================================================ */

.problems {
  padding-block: var(--section-y);
}

.problems__head {
  width: 100%;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.problems__head .heading-2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: 0;
}

.task-tabs {
  width: 100%;
  margin-top: var(--space-48);
}

/* Eine durchgehende weiße Leiste, zentriert und nur so breit wie ihr Inhalt.
   Innenabstand und Abstand zwischen den Reitern sind beide 16.
   Raster statt freiem Umbruch: dadurch ist die Zahl der Reiter je Zeile fest
   vorgegeben. Sechs Reiter ergeben so 6, 3+3 oder 2+2+2 - nie eine Zeile mit
   einem einzelnen Reiter. Horizontal gescrollt wird nie. */
.task-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: center;
  gap: var(--space-16);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--space-16);
  background-color: var(--hell-1);
  border-radius: var(--radius);
}

/* Reiter selbst ohne Fläche und ohne Linie, damit die Leiste durchgängig wirkt */
.task-tab {
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius);
  background-color: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.2;
  /* ausdrücklich gesetzt, damit die Beschriftung in jeder Zeile mittig bleibt
     und nicht von einer geerbten Ausrichtung abhängt */
  text-align: center;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.task-tab:hover,
.task-tab.is-aktiv {
  background-color: var(--marke);
  color: var(--hell-1);
}

@media (min-width: 30rem) {
  .task-tabs__list {
    grid-template-columns: repeat(3, minmax(0, auto));
  }
}

@media (min-width: 54rem) {
  .task-tabs__list {
    grid-template-columns: repeat(6, minmax(0, auto));
  }
}

.task-panel {
  margin-top: var(--space-32);
}

.task-panel[hidden] {
  display: none;
}

/* Grid statt Flex: eine allein stehende letzte Karte bleibt dadurch links
   in ihrer Spalte, statt in der Reihe zentriert zu werden */
.task-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  width: 100%;
}

.task-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-32);
  border-radius: var(--radius);
  background-color: var(--hell-1);
  color: var(--color-text);
  text-align: left;
  /* hebt das globale break-word auf: hier wird nie mitten im Wort getrennt */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.task-card__text {
  margin-top: var(--space-16);
  max-width: none;
}

@media (min-width: 48rem) {
  .task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   Lösung: Text links, Kreislauf rechts
   ============================================================ */

.solution {
  padding-block: var(--section-y);
}

.solution__inner {
  display: grid;
  gap: var(--space-48);
  align-items: center;
}

.solution__content {
  color: var(--hell-1);
}

.solution__content .heading-2 {
  color: var(--hell-1);
}

.solution__text {
  margin-top: var(--space-16);
  color: var(--hell-1);
}

.solution__link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Der Kreislauf: SVG zeichnet nur die Linien, die Knoten liegen als
   echter Text darüber, damit sie lesbar und auswählbar bleiben. */
.kreislauf {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  aspect-ratio: 1;
}

.kreislauf__ring {
  width: 100%;
  height: 100%;
}

.kreislauf__spur,
.kreislauf__fortschritt {
  fill: none;
  /* bewusst in SVG-Einheiten statt non-scaling-stroke: letzteres rechnet auch
     das Strichmuster im Bildschirmraum, dadurch passte die Strichlänge nicht
     mehr zum Kreisumfang und die Linie verschob sich statt zu wachsen */
  stroke-width: 1.8;
}

.kreislauf__spur {
  stroke: rgba(255, 255, 255, 0.18);
}

/* Startpunkt oben statt rechts, Fortschritt läuft im Uhrzeigersinn.
   pathLength="100" im SVG normiert die Bahn, der Offset ist damit
   schlicht der noch fehlende Prozentsatz. */
.kreislauf__fortschritt {
  stroke: var(--hell-1);
  stroke-linecap: butt;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.kreislauf__liste {
  position: absolute;
  inset: 0;
}

.kreislauf__knoten {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: var(--space-4) var(--space-8);
  border: var(--border-width) solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  background-color: var(--marke);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.6875rem, 0.6rem + 0.35vw, 0.8125rem);
  line-height: 1.2;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.kreislauf__knoten.is-aktiv {
  border-color: var(--hell-1);
  background-color: var(--marke-hell);
  color: var(--hell-1);
}

.kreislauf__knoten--marketing {
  left: 50.00%;
  top: 12.00%;
}

.kreislauf__knoten--vertrieb {
  left: 82.91%;
  top: 31.00%;
}

.kreislauf__knoten--verwaltung {
  left: 82.91%;
  top: 69.00%;
}

.kreislauf__knoten--finanzen {
  left: 50.00%;
  top: 88.00%;
}

.kreislauf__knoten--controlling {
  left: 17.09%;
  top: 69.00%;
}

.kreislauf__knoten--personal {
  left: 17.09%;
  top: 31.00%;
}

@media (min-width: 48rem) {
  .kreislauf__knoten {
    padding: var(--space-8) var(--space-16);
  }
}

@media (min-width: 62rem) {
  .solution__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-64);
  }
}

/* ============================================================
   Prozess-Sektion (Text links / Bild rechts)
   ============================================================ */

.process__content .heading-2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: 0;
}

/* ============================================================
   Ablauf / Timeline
   ============================================================ */

.timeline {
  padding-block: var(--section-y);
}

.timeline__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.timeline__head .heading-2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: 0;
}

.timeline__track {
  position: relative;
  width: 100%;
  margin-top: var(--space-64);
}

/* Linie und Punkt hängen an derselben Achse und werden beide über
   translateX(-50%) darauf zentriert - so kann keine halbe Pixelbreite
   dazwischenrutschen. Die Achse liegt auf 16px: damit ist der Abstand zum
   Seitenrand (16px Seitenrand + 16px) genauso groß wie der zum Text
   rechts daneben (48px Einzug - 16px). */
.timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--timeline-achse);
  width: var(--border-width);
  transform: translateX(-50%);
  background-color: var(--color-line);
}

.timeline__line-fill {
  display: block;
  width: 100%;
  height: 0;
  background-color: var(--marke);
  transition: height 0.1s linear;
}

.timeline__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.timeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-left: var(--space-48);
}

.timeline-step__dot {
  position: absolute;
  top: 8px;
  left: var(--timeline-achse);
  width: 22px;
  height: 22px;
  transform: translateX(-50%);
  border: var(--border-width) solid var(--color-line);
  border-radius: 50%;
  background-color: var(--color-flaeche);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.timeline-step.is-active .timeline-step__dot {
  background-color: var(--color-bg);
  border-color: var(--color-text);
  transform: translateX(-50%) scale(1.1);
}

.timeline-step__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.timeline-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 2.2rem + 1.43vw, 3.25rem);
  aspect-ratio: 1;
  border-radius: var(--radius);
  background-color: var(--marke);
  border-color: var(--marke);
  opacity: 1;
}

.timeline-step__icon svg {
  width: 22px;
  height: 22px;
  color: var(--hell-1);
}

.timeline-step.is-active .timeline-step__icon {
}

.timeline-step .label {
  margin-top: var(--space-24);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-klein);
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--marke);
}

.timeline-step__title {
  margin-top: var(--space-16);
  font-size: var(--text-h3);
}

.timeline-step__text {
  margin-top: var(--space-16);
  max-width: 55ch;
}

/* eigenes Element neben Text und Bild: einspaltig steht der Button dadurch
   unter dem Bild, den Abstand regelt der gap des Schritts */
.timeline-step__actions {
  margin-top: 0;
}

.timeline-step__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  transform: translateY(12px);
  transition: transform 0.5s ease;
}

.timeline-step.is-active .timeline-step__media {
  transform: translateY(0);
}

.timeline-step__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Grundfarbe, solange das Standbild noch nicht gezeichnet ist */
  background-color: var(--marke);
}

/* Abspielknopf, gleiche Gestaltung wie in der Referenz auf der
   VerwalterAutomation-Seite. Die Bedienleiste des Videos erscheint
   erst nach dem Start, deshalb bleibt das Standbild vorher frei. */

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-bg);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-button:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.play-button__icon {
  display: block;
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--color-text);
}

.timeline-step__media.laeuft .play-button {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-step__media,
  .timeline-step__dot,
  .timeline__line-fill {
    transition: none;
  }
}

/* ============================================================
   Preise
   ============================================================ */

.pricing {
  padding-block: var(--section-y);
}

.pricing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing__head {
  width: 100%;
  text-align: center;
}

.pricing__intro {
  margin-top: var(--space-16);
  margin-inline: auto;
}

/* Zwei Spalten bei gleichbleibender Gesamtbreite. Die dritte Karte rutscht
   durch die Auto-Platzierung des Grids von selbst nach links in die zweite Reihe. */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  width: 100%;
  max-width: 62rem;
  margin-top: var(--space-64);
}

@media (min-width: 48rem) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  border-radius: var(--radius);
  background-color: var(--hell-1);
  color: var(--color-text);
}

.pricing-card__text {
  margin-top: var(--space-16);
}

/* ============================================================
   Team: drei Personenkarten
   ============================================================ */

.team {
  padding-block: var(--section-y);
}

.team__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team__head {
  width: 100%;
  max-width: 62ch;
  text-align: center;
}

.person-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-24);
  width: 100%;
  max-width: 62rem;
  margin-top: var(--space-64);
}

/* Das Foto füllt die Karte, das Namensfeld liegt darüber und ist vom
   Kartenrand eingerückt - Aufbau wie in der Vorlage, Ecken bleiben eckig. */
.person-card {
  position: relative;
  flex: 0 1 100%;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.person-card__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.person-card__panel {
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  bottom: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius);
  background-color: var(--marke);
  color: var(--hell-1);
  text-align: center;
}

.person-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.3;
}

.person-card__rolle {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-klein);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 48rem) {
  /* Breite wie bei drei Spalten, auch wenn weniger Karten da sind */
  .person-card {
    flex-basis: calc((100% - var(--space-24) * 2) / 3);
  }
}

/* ============================================================
   Fallstudie mit Video
   ============================================================ */

.case {
  padding-block: var(--section-y);
}

.case__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.case__head {
  max-width: var(--breite-hero);
  text-align: center;
}

/* Referenzkarten: zwei Spalten wie bei den Paketen, Fläche in Markenfarbe Hell.
   Der Text nimmt den freien Platz ein, dadurch sitzt der Personenblock in
   allen Karten einer Reihe auf gleicher Höhe am unteren Rand. */
.referenz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  width: 100%;
  /* dieselbe Breite wie das Paketraster: eine Karte nimmt den Platz ein,
     den vorher zwei Spalten zusammen belegt haben */
  max-width: 62rem;
  margin-top: var(--space-64);
}

.referenz-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  border-radius: var(--radius);
  background-color: var(--marke-hell);
  color: var(--hell-1);
  text-align: left;
}

.referenz-card[hidden] {
  display: none;
}

.referenz-card__text {
  flex: 1 1 auto;
  max-width: none;
}

/* größerer Abstand als zwischen den Textzeilen: die Person ist ein eigener
   Block, kein weiterer Absatz */
.referenz-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

/* einzige runde Form der Seite, bewusste Ausnahme vom Corner Radius 0.
   Gefüllte Fläche, solange noch kein Foto hinterlegt ist. */
.referenz-card__avatar {
  flex: 0 0 auto;
  display: block;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--marke);
  object-fit: cover;
}

.referenz-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.3;
}

.referenz-card__rolle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-klein);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}

.case__actions {
  margin-top: var(--space-32);
}

/* ============================================================
   Garantie-Sektion
   ============================================================ */

.guarantee {
  padding-block: var(--section-y);
}

.guarantee-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-flaeche);
  color: var(--color-text);
}

.guarantee-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  color: var(--color-text);
  opacity: 1;
  /* Hell 2 statt Weiß: die Sektion ist selbst weiß, sonst verschwindet die Karte */
  background-color: var(--color-flaeche);
  border: none;
}

/* Auszeichnung rechts unten: der Badge ragt bewusst über die rechte und untere
   Kante hinaus, die Karte schneidet den Überstand über ihr overflow: hidden ab.
   z-index -1 hält ihn hinter dem Text, aber vor der Bildfläche der Karte. */
.guarantee-card__badge {
  position: absolute;
  right: -4rem;
  bottom: -4rem;
  z-index: -1;
  width: clamp(14.4rem, 28.8vw, 22.4rem);
  height: auto;
}

.guarantee-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 60ch;
  padding: var(--space-48) var(--space-32);
}

.guarantee-card__title {
  max-width: 20ch;
}

.guarantee-card__text {
  margin-top: var(--space-16);
}

.guarantee-card__actions {
  margin-top: var(--space-32);
}

/* ============================================================
   Team-Sektion
   ============================================================ */

/* ============================================================
   Social Links
   ============================================================ */

.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.social-link {
  display: block;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 50%;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  padding-block: var(--section-y);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.faq__head {
  width: 100%;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1 1 auto;
}

.faq-item {
  border-radius: var(--radius);
  background-color: var(--color-flaeche);
  color: var(--color-text);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: var(--touch-min);
  padding: var(--space-24) var(--space-32);
  cursor: pointer;
  list-style: none;
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.4;
}

.faq-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-text);
  transition: transform 0.3s ease;
}

.faq-item__icon svg {
  width: 100%;
  height: 100%;
}

/* eigene Klasse statt [open]: die bleibt beim Schließen bewusst bis Animationsende
   stehen (siehe main.js), der Pfeil soll aber sofort bei jedem Klick reagieren */
.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

/* Höhe der Antwort animiert über max-height, Zielwert wird beim Öffnen per JS aus
   scrollHeight gemessen (siehe main.js) - zuverlässiger als grid-template-rows,
   das in Kombination mit <details> in Chrome die Transition manchmal überspringt.
   display:block überschreibt das native display:none von <details>, damit das
   Element immer im Layout bleibt und max-height/overflow die Sichtbarkeit steuern */
.faq-item__answer-inner {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item__answer {
  padding: 0 var(--space-32) var(--space-32);
  max-width: 70ch;
}

.faq-item__akzent {
  color: var(--akzent);
}

/* Auf dunklem Sektionsgrund tragen die Karten die Markenfarbe Hell und
   drehen ihren Text samt Pfeil-Icon auf Weiß */
.section--marke .faq-item {
  background-color: var(--marke-hell);
  color: var(--hell-1);
}

.section--marke .faq-item__icon {
  color: var(--hell-1);
}

/* ============================================================
   Abschluss-CTA mit vertikalem Slider
   ============================================================ */

.final-cta {
  padding-block: var(--section-y);
  overflow: hidden;
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.final-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 60ch;
}

.final-cta__title {
  max-width: 20ch;
}

/* eng am Button: der Hinweis gehört zu ihm, nicht zur Überschrift darüber */
.final-cta__hinweis {
  margin-top: var(--space-16);
}

.final-cta__actions {
  margin-top: var(--space-32);
}

.final-cta__slider {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  height: clamp(20rem, 45vw, 35rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.vertical-marquee {
  overflow: hidden;
}

.vertical-marquee__track {
  display: flex;
  flex-direction: column;
  animation: marquee-scroll-up 34s linear infinite;
}

.vertical-marquee__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-bottom: var(--space-16);
}

.vertical-marquee--offset .vertical-marquee__track {
  animation-duration: 42s;
  animation-delay: -8s;
}

.vertical-marquee__item {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
}

@keyframes marquee-scroll-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .vertical-marquee__track {
    animation: none;
  }
}

/* ============================================================
   Rechtsseiten (Impressum, Datenschutz, AGB)
   ============================================================ */

/* die Navigation liegt fix über dem Inhalt, deshalb oben freihalten */
.legal {
  padding-top: calc(var(--nav-height) + var(--space-64));
  padding-bottom: var(--section-y);
}

.legal__inner {
  max-width: calc(var(--breite-text) + (var(--page-x) * 2));
}

.legal__text {
  margin-top: var(--space-16);
}

/* über einer Zwischenüberschrift immer 48 */
.legal__untertitel {
  margin-top: var(--space-48);
}

.legal__block {
  margin-top: var(--space-32);
}

.legal__zeile {
  margin-top: var(--space-16);
}

/* Bezeichnung und Wert stehen untereinander, die Bezeichnung gedämpft */
.legal__label {
  display: block;
  font-size: var(--text-klein);
  line-height: 1.3;
  color: var(--text-leise);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer__top {
  background-color: var(--marke-hell);
  color: var(--hell-1);
  padding-block: var(--section-y);
}

.site-footer__top-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

.footer-column__badge {
  display: block;
  width: clamp(7rem, 12vw, 10rem);
  height: auto;
}

/* leere erste Spalte nur ab der 4-spaltigen Desktop-Ansicht als Platzhalter zeigen,
   auf Mobile sonst unnötiger Leerraum durch den Grid-Gap */
.footer-column:empty {
  display: none;
}

.footer-column__title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: normal;
}

.footer-column__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-16);
}

.footer-link {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--hell-1);
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--akzent);
}

.footer-column__text {
  margin-top: var(--space-16);
}

.footer-column__button {
  margin-top: var(--space-32);
}

/* Kennzeichnung und Wert dürfen nie auf zwei Zeilen auseinanderfallen */
.footer-column__kontakt {
  white-space: nowrap;
}

/* Telefon und Mail bleiben optisch Fließtext, nur der Hover hebt sie hervor */
.footer-column__link {
  transition: color 0.3s ease;
}

.footer-column__link:hover {
  color: var(--akzent);
}

.site-footer__top .button--sekundaer {
  color: var(--hell-1);
  box-shadow: inset 0 0 0 var(--border-width) var(--hell-1);
}

.site-footer__top .button--sekundaer:hover {
  color: var(--akzent);
  box-shadow: inset 0 0 0 var(--border-width) var(--akzent);
}

.site-footer__bottom {
  background-color: var(--marke);
  padding-block: var(--space-32);
}

.site-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}

/* Rechtslinks links, auf einer Höhe mit den Social-Icons rechts */
.site-footer__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* der Innenabstand der Links übernimmt den Abstand, deshalb hier nur der Rest */
.legal-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -13px;
  gap: 0;
}

.legal-link {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: 13px;
  font-family: var(--font-body);
  font-size: var(--text-klein);
  line-height: 1.5;
  color: var(--hell-1);
  transition: color 0.3s ease;
}

.legal-link:hover {
  color: var(--marke-hell);
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.site-footer__actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.social-list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  color: var(--hell-1);
  transition: color 0.3s ease;
}

.social-link svg {
  width: 1.375rem;
  height: 1.375rem;
}

.social-link:hover {
  color: var(--marke-hell);
}

/* ============================================================
   WhatsApp-Button
   ============================================================ */

.whatsapp-button {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gleiche Groesse wie die Icons der Muster-Sektion */
  width: clamp(2.25rem, 1.9rem + 1.79vw, 3.25rem);
  aspect-ratio: 1;
  border-radius: var(--radius);
  background-color: var(--whatsapp);
  color: var(--hell-1);
  transition: opacity 0.3s ease;
}

.whatsapp-button svg {
  width: 55%;
  height: 55%;
}

/* sobald der Footer heranscrollt, blendet der Button aus und ist nicht mehr
   anklickbar - Klasse kommt aus main.js */
.whatsapp-button.is-versteckt {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   Hilfsklassen
   ============================================================ */

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

/* ============================================================
   Ab mittleren Viewports: mehrspaltige Layouts
   ============================================================ */

@media (min-width: 74rem) {
}

/* Hero erst zweispaltig, wenn die beiden Buttons nebeneinander passen
   (gemessen: 382px, plus 64px Spaltenabstand und Seitenrand). Darunter
   rutscht das Bild unter den Text, der die volle Breite bekommt. */
@media (min-width: 56rem) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .hero__content,
  .hero__visual {
    flex: 1 1 50%;
    min-width: 0;
  }

  .hero__visual {
    aspect-ratio: 5 / 4;
  }
}

@media (min-width: 48rem) {
  /* Zeitachse: Linie mittig, Schritte im Wechsel links und rechts */
  .timeline__line {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Grid statt row-flex: der Button liegt als drittes Element neben Text und
     Bild. Mit flex-wrap wuerde bereits das Bild umbrechen (50% + 50% + 64px
     gap passen nie in eine Zeile); im Grid bekommt er dagegen eine eigene
     Zeile unter der Textspalte, die nur entsteht, wenn ein Button da ist. */
  .timeline-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-64);
    row-gap: var(--space-32);
    align-items: center;
    padding-left: 0;
  }

  .timeline-step__content {
    grid-column: 1;
    grid-row: 1;
  }

  .timeline-step__media {
    grid-column: 2;
    grid-row: 1;
  }

  .timeline-step__actions {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  /* Bild spannt beide Zeilen, Text sitzt am unteren Rand der ersten und der
     Button am oberen Rand der zweiten Zeile - dadurch stehen sie direkt
     beieinander und der Block bleibt mittig zum Bild, statt dass der Button
     unter das gesamte Bild rutscht */
  .timeline-step--mit-cta .timeline-step__media {
    /* span 2 statt 1 / -1: negative Linien zaehlen nur explizite Tracks, die
       es hier nicht gibt - das Bild waere sonst in Zeile 1 geblieben */
    grid-row: 1 / span 2;
  }

  .timeline-step--mit-cta .timeline-step__content {
    align-self: end;
  }

  .timeline-step--reverse .timeline-step__content,
  .timeline-step--reverse .timeline-step__actions {
    grid-column: 2;
  }

  .timeline-step--reverse .timeline-step__media {
    grid-column: 1;
  }

  .timeline-step__dot {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .timeline-step.is-active .timeline-step__dot {
    transform: translate(-50%, -50%) scale(1.1);
  }

  .timeline-step__content,
  .timeline-step__media {
    min-width: 0;
  }

  .guarantee-card__content {
    padding: var(--space-64) var(--space-48);
  }

  .faq__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-64);
  }

  .faq__head {
    flex: 0 0 32%;
  }

  .final-cta__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .final-cta__content,
  .final-cta__slider {
    flex: 1 1 50%;
    min-width: 0;
  }

  /* Badge und Kontakt bekommen genau die Breite, die ihr Inhalt braucht -
     dadurch passt die Mailadresse in eine Zeile, ohne überzulaufen.
     Die beiden mittleren Spalten teilen sich den Rest. */
  .site-footer__top-inner {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--space-48);
  }

  /* Linkspalte etwas nach rechts eingerückt, damit sie nicht am Badge klebt */
  .footer-column--links {
    padding-left: var(--space-32);
  }

  .footer-column:empty {
    display: block;
  }

  .site-footer__bottom-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer__meta {
    align-items: flex-end;
  }
}

/* ============================================================
   Anfrage und Danke
   ============================================================ */

.funnel {
  padding-top: calc(var(--nav-height) + var(--space-64));
  padding-bottom: var(--section-y);
}

.funnel__inner {
  max-width: calc(var(--breite-text) + (var(--page-x) * 2));
}

.funnel__text {
  margin-top: var(--space-16);
}

/* Laut Design System steht der erste Fließtext 32 unter der Hero-Zeile */
.funnel__titel + .funnel__text {
  margin-top: var(--space-32);
}

.funnel__aktionen {
  margin-top: var(--space-32);
}

.funnel__hinweis {
  margin-top: var(--space-16);
}

.formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-32);
}

.formular__feld {
  display: flex;
  flex-direction: column;
}

/* Spamfalle: für Menschen unsichtbar, automatische Skripte füllen sie aus */
.formular__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sichtbar steht der Platzhalter im Feld. Die Beschriftung bleibt im
   Quelltext, damit Vorleseprogramme die Felder weiterhin benennen. */
.formular__label {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Kein Kasten, sondern eine Linie zum Draufschreiben. Ohne seitlichen
   Innenabstand steht die Eingabe genau unter ihrer Beschriftung. */
.formular__eingabe {
  width: 100%;
  padding: var(--space-8) 0;
  border: 0;
  border-bottom: 1px solid var(--marke);
  border-radius: var(--radius);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text);
  transition: box-shadow 0.2s ease;
}

/* Beim Schreiben wird die Linie kräftiger. Als Schatten gelöst, damit
   sich das Feld dabei nicht um einen Pixel verschiebt. */
.formular__eingabe:focus {
  outline: none;
  box-shadow: inset 0 -1px 0 var(--marke);
}

/* Startet so flach wie die einzeiligen Felder und wächst beim Tippen mit,
   deshalb weder Mindesthöhe noch Anfasser zum Ziehen. */
.formular__eingabe--mehrzeilig {
  resize: none;
  overflow: hidden;
}

.formular__eingabe::placeholder {
  color: var(--text-leise);
}

.formular__fehler {
  color: var(--akzent);
}

/* zusammen mit dem Abstand des Formulars ergibt das 24 */
.formular__senden {
  margin-top: var(--space-16);
  align-self: flex-start;
}

.formular__senden[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.formular__hinweis {
  margin-top: var(--space-16);
}

/* ============================================================
   Anfragefenster
   ============================================================ */

/* Gleiches Verhalten wie das Hinweisfenster der Schwesterseite: über
   showModal() geöffnet, ein- und ausgeblendet über die Klasse is-offen. */

.anfrage-dialog {
  width: min(100% - (var(--page-x) * 2), 34rem);
  max-width: none;
  /* wächst mit dem Inhalt, bleibt aber im sichtbaren Bereich */
  max-height: calc(100dvh - var(--space-48));
  overflow: hidden;
  padding: 0;
  border: var(--border-width) solid var(--marke);
  border-radius: var(--radius);
  background-color: var(--hell-1);
  color: var(--color-text);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* Weicher Schatten, damit sich das Fenster ohne Abdunkeln
     des Hintergrunds von der Seite abhebt */
  box-shadow: 0 24px 64px rgba(22, 56, 50, 0.18),
              0 4px 12px rgba(22, 56, 50, 0.1);
}

/* Nur im geöffneten Zustand, sonst hebelt die Angabe die Regel des
   Browsers aus, die ein geschlossenes Fenster ausblendet. flex sorgt
   dafür, dass die max-height an den Inhalt weitergereicht wird und
   dieser bei viel Text selbst scrollt, statt überzulaufen. */
.anfrage-dialog[open] {
  display: flex;
}

.anfrage-dialog.is-offen {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Die Seite dahinter bleibt beim Öffnen unangetastet. Abgedunkelt wird
   erst mit dem Absenden, damit die Bestätigung im Mittelpunkt steht. */
.anfrage-dialog::backdrop {
  background-color: rgba(22, 56, 50, 0);
  transition: background-color 0.35s ease;
}

.anfrage-dialog.zeigt-bestaetigung::backdrop {
  background-color: rgba(22, 56, 50, 0.55);
}

.anfrage-dialog__inhalt {
  /* Nimmt die volle Breite des Fensters ein. Ohne das schrumpft der
     Inhalt als Flex-Kind auf seine eigene Breite und rutscht nach links,
     sobald wenig darin steht. */
  flex: 1;
  /* min-height: 0 ist im Flex-Kontext nötig, sonst verweigert sich das
     Element dem Schrumpfen und wächst trotzdem über den Rand hinaus */
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-32);
}

.anfrage-dialog__inhalt:focus {
  outline: none;
}

.anfrage-dialog__schliessen {
  position: absolute;
  z-index: 3;
  top: var(--space-16);
  right: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.anfrage-dialog__schliessen:hover {
  opacity: 0.6;
}

.anfrage-dialog__schliessen svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Platz für den Schließen-Knopf, damit die Überschrift nicht darunter läuft */
.anfrage-dialog__inhalt .heading-3 {
  padding-right: var(--space-48);
}

.anfrage-dialog__text {
  margin-top: var(--space-16);
}

.anfrage-dialog .formular {
  margin-top: var(--space-32);
}

@media (prefers-reduced-motion: reduce) {
  .anfrage-dialog,
  .anfrage-dialog::backdrop {
    transition: none;
  }
}

.formular__notausgang {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Zeigt erst kurz vor der Grenze an, wie viel noch geht */
.formular__zaehler {
  margin-top: var(--space-4);
  text-align: right;
}

/* ============================================================
   Bestätigung nach dem Absenden
   ============================================================ */

/* Die Bestätigung legt sich über das Formular statt es zu ersetzen.
   Ein leichter dunkler Schleier lässt sie hervortreten. */
.anfrage-erfolg {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-32);
  background-color: rgba(22, 56, 50, 0.7);
  text-align: center;
  /* Das Element bleibt im Baum und wird nur unsichtbar geschaltet.
     Dadurch läuft die Blende ohne Umweg über requestAnimationFrame –
     ein unsichtbares Overlay kann so nie das Formular blockieren. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.anfrage-erfolg.sichtbar {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0s;
}

.anfrage-erfolg__text {
  color: var(--hell-1);
}

.anfrage-erfolg__zeichen svg {
  width: 64px;
  height: 64px;
}

/* pathLength normiert beide Formen auf 100, dadurch lassen sich Kreis und
   Haken mit denselben Werten zeichnen, unabhängig von ihrer echten Länge */
.anfrage-erfolg__kreis,
.anfrage-erfolg__haken {
  fill: none;
  /* hell, weil der Schleier darunter dunkel ist */
  stroke: var(--hell-1);
  stroke-width: var(--border-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Zustand 1: Es lädt --- */

.anfrage-erfolg.laedt .anfrage-erfolg__kreis {
  stroke-dasharray: 25 75;
  transform-origin: 50% 50%;
  animation: kreisel 0.9s linear infinite;
}

.anfrage-erfolg.laedt .anfrage-erfolg__haken,
.anfrage-erfolg.laedt .anfrage-erfolg__text {
  opacity: 0;
}

@keyframes kreisel {
  to {
    transform: rotate(360deg);
  }
}

/* --- Zustand 2: Geschafft --- */

.anfrage-erfolg.fertig .anfrage-erfolg__kreis {
  stroke-dasharray: 100;
  animation: kreisZeichnen 0.45s ease-out backwards;
}

.anfrage-erfolg.fertig .anfrage-erfolg__haken {
  stroke-dasharray: 100;
  animation: hakenZeichnen 0.35s 0.4s ease-out backwards;
}

.anfrage-erfolg.fertig .anfrage-erfolg__text {
  animation: textEinblenden 0.4s 0.65s ease-out backwards;
}

@keyframes kreisZeichnen {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hakenZeichnen {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes textEinblenden {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .anfrage-erfolg.laedt .anfrage-erfolg__kreis,
  .anfrage-erfolg.fertig .anfrage-erfolg__kreis,
  .anfrage-erfolg.fertig .anfrage-erfolg__haken,
  .anfrage-erfolg.fertig .anfrage-erfolg__text {
    animation: none;
  }
}