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

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

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

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

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

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

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

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

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

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

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

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

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/source-serif-4-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;
}

/* ============================================================
   VerwalterAutomation – Basis / Corporate Identity
   ============================================================ */

:root {
  /* Farben laut Design System */
  --hell-1: #FFFFFF;
  --hell-2: #ECF0F4;
  --grau: #E0E0E0;
  --marke: #264F7C;
  --akzent: #FF6142;
  /* abgedunkelter Akzent für Farbverläufe */
  --akzent-dunkel: #E8481F;
  --gruen: #38D782;
  --whatsapp: #25D366;
  --marke-hell: #3569A3;

  /* Kleintext in Grau */
  --text-leise: #6E7A88;

  /* gedämpfte Textfarben wie auf der Schwesterseite: hell für dunklen
     Grund, dunkel für hellen Grund */
  --text-gedaempft: #B9C6D9;
  --text-gedaempft-dunkel: #5777A5;

  /* feine Trennlinie auf dunklem Grund, Markenfarbe Hell mit 70% Deckkraft */
  --hairline: rgba(53, 105, 163, 0.7);

  /* Rollen */
  --color-bg: var(--hell-1);
  --color-flaeche: var(--hell-2);
  --color-text: var(--marke);
  --color-line: rgba(38, 79, 124, 0.22);

  /* Schrift */
  --font-headline: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "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: 8px;
  --radius-button: 8px;
  --border-width: 2.5px;
  --nav-height: clamp(3.25rem, 2.95rem + 1.5vw, 4.25rem);
  /* 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);
  }
}

*,
*::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);
}

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

/* Sprungziele der Navigation nicht unter die fixe Navbar rutschen lassen */
section[id],
.team-card[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;
}

/* Fließtext gedämpft wie auf der Schwesterseite: dunkle Variante auf
   hellem Grund, helle Variante auf dunklem Grund */
.paragraph {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.65;
  max-width: var(--breite-text);
  color: var(--text-gedaempft-dunkel);
}

.section--marke .paragraph,
.site-footer .paragraph {
  color: var(--text-gedaempft);
}

/* helle Karten auf dunklem Grund behalten den dunklen Ton,
   Fehlermeldungen bleiben im Akzent */
.section--marke .case-card .paragraph {
  color: var(--text-gedaempft-dunkel);
}

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

.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);
  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;
  /* alle Buttons heben sich beim Hover leicht an, gleiche Bewegung wie
     auf der Schwesterseite */
  transition: background-color 0.25s ease, color 0.25s ease,
              box-shadow 0.18s ease, opacity 0.18s ease,
              transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  }

  .button:hover {
    transform: none;
  }
}

/* Primärbutton mit statischem Farbverlauf aus zwei Markentönen,
   wie auf der Referenz-Seite. Der Hover ändert keine Farbe: leichte
   Deckkraft-Absenkung, Anheben und ein weicher Schein darunter. */
.button--primaer {
  background-color: var(--marke);
  background-image: linear-gradient(135deg, var(--marke-hell), var(--marke));
  color: var(--hell-1);
}

.button--primaer:hover {
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(38, 79, 124, 0.35);
}

/* Umrandung überall gedämpft und 2px stark */
/* Pfeil in den Primärbuttons: schiebt beim Hover leicht nach rechts,
   der lange Pfeil sitzt im Formular-Senden-Button */
.button--primaer .button__pfeil {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.button--primaer .button__pfeil--lang {
  width: 22px;
}

.button--primaer:hover .button__pfeil {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .button--primaer .button__pfeil {
    transition: none;
  }

  .button--primaer:hover .button__pfeil {
    transform: none;
  }
}

.button--sekundaer {
  background-color: transparent;
  color: var(--marke);
  box-shadow: inset 0 0 0 2px var(--grau);
}

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

/* auf dunklem Grund helle Schrift und helle gedämpfte Umrandung */
.section--marke .button--sekundaer {
  color: var(--hell-1);
  box-shadow: inset 0 0 0 2px var(--text-gedaempft);
}

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

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

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

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

/* Milchglas-Effekt: halbtransparentes Weiß, der Inhalt dahinter wird
   beim Scrollen weichgezeichnet */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--color-text);
  border-bottom: 1px solid rgba(38, 79, 124, 0.15);
}

.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 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--touch-min);
  min-width: 0;
}

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

/* Schriftzug rechts neben dem Logo, "Automation" im Akzent */
.site-nav__wortmarke {
  font-family: var(--font-headline);
  font-weight: 600;
  /* skaliert auf schmalen Screens herunter, damit Logo, Schriftzug und
     Menü-Icon immer in einer Zeile bleiben */
  font-size: clamp(0.95rem, 4vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
  color: var(--marke);
}

.site-nav__wortmarke-akzent {
  color: var(--akzent);
}

/* 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);
}

/* gleiche Größe und Schrift wie auf der Schwesterseite,
   kein Uppercase, keine Unterstreichung */
.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: 600;
  font-size: var(--text-klein);
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--text-gedaempft-dunkel);
  /* Text darf nie umbrechen - sonst wird der Zeilenumbruch nicht als
     Überlauf erkannt und der Wechsel zum Hamburger-Menü bleibt aus */
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* beim Hover und für die aktive Sektion wird der Link nur dunkler */
.nav-link:hover,
.nav-link.is-active {
  color: var(--marke);
}

/* kompakter als die übrigen Buttons, angelehnt an die Referenz-Seite */
.site-nav__cta {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  padding: 10px 18px;
  font-size: 0.875rem;
}

.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;
  /* enger als am Desktop, damit die erste Zeile nie umbricht */
  column-gap: var(--space-16);
  /* 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);
}


/* ============================================================
   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 {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 5 / 4;
}

/* ---------- Hero: animiertes Vorgangs-Board ----------
   Ein reduziertes App-Fenster mit drei Spalten. Vorgangskarten wandern
   automatisch von Eingang über In Arbeit nach Erledigt und werden dort
   abgehakt - drei Karten in eigenen Zeilen, zeitversetzt im 12s-Takt. */

.hero-board {
  position: relative;
  width: 100%;
  height: 100%;
}

/* zweite Ebene hinter dem Fenster für einen ruhigen Tiefeneffekt */
.hero-board::before {
  content: "";
  position: absolute;
  inset: 24px -16px -16px 24px;
  border-radius: var(--radius);
  background-color: var(--hell-2);
  border: 1px solid rgba(38, 79, 124, 0.12);
}

.hero-board__fenster {
  position: absolute;
  inset: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--hell-1);
  border: 1px solid rgba(38, 79, 124, 0.2);
  box-shadow: 0 24px 64px rgba(38, 79, 124, 0.16);
}

.hero-board__kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-16);
  border-bottom: 1px solid rgba(38, 79, 124, 0.15);
}

.hero-board__punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(38, 79, 124, 0.25);
}

.hero-board__flaeche {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-16);
}

/* die drei Spuren des Boards */
.hero-board__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
}

.hero-board__spalte {
  border-radius: var(--radius);
  background-color: var(--hell-2);
  padding: 10px;
}

.hero-board__spalte-titel {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Kartenebene: exakt dasselbe Raster wie die Spalten, dadurch ist ein
   Spaltensprung immer genau translateX(100% + Spaltenabstand) */
.hero-board__karten {
  position: absolute;
  inset: var(--space-16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, min-content);
  gap: 12px;
  align-content: start;
  padding-top: 34px;
  pointer-events: none;
}

.hero-vorgang {
  grid-column: 1;
  animation: hero-vorgang-zyklus 12s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.hero-vorgang--v1 { grid-row: 1; animation-delay: 0s; }
.hero-vorgang--v2 { grid-row: 2; animation-delay: -4s; }
.hero-vorgang--v3 { grid-row: 3; animation-delay: -8s; }

.hero-vorgang__karte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px;
  padding: 10px;
  border-radius: 6px;
  background-color: var(--hell-1);
  border: 1px solid rgba(38, 79, 124, 0.18);
  box-shadow: 0 6px 16px rgba(38, 79, 124, 0.1);
}

.hero-vorgang__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background-color: var(--hell-2);
  color: var(--marke);
}

.hero-vorgang__icon svg {
  width: 15px;
  height: 15px;
}

.hero-vorgang__zeilen {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.hero-vorgang__zeile {
  display: block;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(38, 79, 124, 0.18);
}

.hero-vorgang__zeile:last-child {
  background-color: rgba(38, 79, 124, 0.1);
}

/* Haken erscheint erst in der Spalte Erledigt */
.hero-vorgang__check {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--marke);
  color: var(--hell-1);
  opacity: 0;
  animation: hero-check-zyklus 12s ease-out infinite;
}

.hero-vorgang--v1 .hero-vorgang__check { animation-delay: 0s; }
.hero-vorgang--v2 .hero-vorgang__check { animation-delay: -4s; }
.hero-vorgang--v3 .hero-vorgang__check { animation-delay: -8s; }

.hero-vorgang__check svg {
  width: 11px;
  height: 11px;
}

@keyframes hero-vorgang-zyklus {
  0% { opacity: 0; transform: translate(0, 10px); }
  4% { opacity: 1; transform: translate(0, 0); }
  26% { transform: translate(0, 0); }
  32% { transform: translateX(calc(100% + 12px)); }
  58% { transform: translateX(calc(100% + 12px)); }
  64% { transform: translateX(calc(200% + 24px)); }
  90% { opacity: 1; transform: translateX(calc(200% + 24px)); }
  96%, 100% { opacity: 0; transform: translateX(calc(200% + 24px)); }
}

@keyframes hero-check-zyklus {
  0%, 64% { opacity: 0; transform: scale(0.4); }
  68% { opacity: 1; transform: scale(1.15); }
  72% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-vorgang,
  .hero-vorgang__check {
    animation: none;
  }

  /* ohne Bewegung zeigt das Board einen festen Zustand: je eine Karte
     pro Spalte, die letzte abgehakt */
  .hero-vorgang {
    opacity: 1;
  }

  .hero-vorgang--v2 {
    transform: translateX(calc(100% + 12px));
  }

  .hero-vorgang--v3 {
    transform: translateX(calc(200% + 24px));
  }

  .hero-vorgang--v3 .hero-vorgang__check {
    opacity: 1;
  }
}

/* ---------- Beim ersten Vorbeiscrollen einblenden ---------- */
/* Die Klasse einblenden setzt erst main.js: ohne JavaScript bleibt alles
   ganz normal sichtbar. Bewegt wird translate statt transform, damit
   Hover-Transforms auf Karten nicht überschrieben werden. */

.einblenden {
  opacity: 0;
}

.einblenden.is-eingeblendet {
  animation: einblenden-auf 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--einblend-verzug, 0s);
}

@keyframes einblenden-auf {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes whatsapp-ein {
  from {
    opacity: 0;
    translate: calc(100% + var(--space-24)) 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
}

.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%;
}

/* Handgezeichneter Akzent-Schwung unter dem Schluesselwort der Hero,
   wie auf dem LinkedIn-Banner; skaliert mit der Schriftgroesse */
.hero-wort {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hero-wort__schwung {
  position: absolute;
  left: 0;
  bottom: -0.16em;
  width: 100%;
  height: 0.15em;
}

.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);
}

/* Autor-Zeile: rundes Profilfoto mit Name und Rolle (Hero und Blog) */
.autor-zeile {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

/* Foto so hoch wie Name und Rolle zusammen (Zeilenhöhen plus Abstand) */
.autor-zeile__avatar {
  flex: none;
  width: calc(var(--text-body) * 1.3 + var(--space-4) + var(--text-klein) * 1.5);
  height: calc(var(--text-body) * 1.3 + var(--space-4) + var(--text-klein) * 1.5);
  object-fit: cover;
  /* rund als bewusste Ausnahme vom Corner-Radius 0 des Design-Systems */
  border-radius: 50%;
}

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

.autor-zeile__rolle {
  margin-top: var(--space-4);
}

/* Make-Expert-Badge hinter dem Profilbild, gleich groß; das Foto liegt
   darüber und ist um die halbe Badge-Breite nach rechts eingerückt */
.autor-zeile__bilder {
  display: flex;
  flex: none;
}

.autor-zeile__badge {
  flex: none;
  width: calc(var(--text-body) * 1.3 + var(--space-4) + var(--text-klein) * 1.5);
  height: calc(var(--text-body) * 1.3 + var(--space-4) + var(--text-klein) * 1.5);
}

.autor-zeile__bilder .autor-zeile__avatar {
  position: relative;
  margin-left: calc((var(--text-body) * 1.3 + var(--space-4) + var(--text-klein) * 1.5) / -2);
}

/* Social Proof: drei Kennzahlen unter dem Button */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  width: 100%;
  max-width: 34rem;
  margin: var(--space-48) 0 0;
}

/* In der Hero links unter den Kennzahlen */
.hero .autor-zeile {
  margin-top: var(--space-48);
}

.hero-stat__wertpaar {
  margin: 0;
}

.hero-stat__wert {
  display: block;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.2;
  color: var(--marke);
}

.hero-stat__label {
  display: block;
  margin-top: var(--space-8);
  font-size: var(--text-klein);
  line-height: 1.4;
  color: var(--text-gedaempft-dunkel);
}

/* ============================================================
   Zentrierte Sektionen (Probleme / Lösungen)
   ============================================================ */

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

.problems__inner,
.solutions__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.problems__head,
.solutions__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 62ch;
  text-align: center;
}

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

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

/* zwei Spalten ab mittleren Viewports, mobil untereinander */
.bar-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  width: 100%;
  margin-top: var(--space-64);
}

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

/* gleicher Hover-Lift wie bei den Paket-Karten */
.bar-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-32);
  border-radius: var(--radius);
  background-color: var(--color-flaeche);
  color: var(--color-text);
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.bar-card:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .bar-card {
    transition: none;
  }

  .bar-card:hover {
    transform: none;
  }
}

.bar-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(2.25rem, 1.9rem + 1.79vw, 3.25rem);
  aspect-ratio: 1;
}

.bar-card__icon svg {
  width: 55%;
  height: 55%;
  color: var(--hell-1);
}

/* Muster: Karten in Weiß, Icons in der Akzentfarbe */
.problems .bar-card {
  background-color: var(--hell-1);
}

/* gleicher statischer Farbverlauf wie bei den Buttons, ohne Umrandung */
.problems .bar-card__icon {
  background-color: var(--akzent);
  background-image: linear-gradient(135deg, var(--akzent), var(--akzent-dunkel));
  border: 0;
}

/* Potenzial: Karten in Markenfarbe Hell, Text und Linie in Weiß, Icons in Grün */
.solutions .bar-card {
  background-color: var(--marke-hell);
  color: var(--hell-1);
}

.solutions .bar-card__icon {
  background-color: var(--gruen);
  background-image: linear-gradient(135deg, var(--gruen), #26B368);
  border: 0;
}

.bar-card__body {
  flex: 1 1 auto;
}

.bar-card .paragraph {
  margin-top: var(--space-8);
}

.problems__conclusion {
  max-width: 70ch;
  margin-top: var(--space-64);
  text-align: center;
}

/* ============================================================
   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);
  background-image: linear-gradient(135deg, var(--marke-hell), var(--marke));
  border: 0;
  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;
}

/* Platzhalterfläche, bis die Videos fertig sind: gleiche Größe und
   Bewegung wie vorher, gestrichelte Umrandung, der Hinweis steht mittig */
.timeline-step__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1.5px dashed rgba(38, 79, 124, 0.35);
  background-color: var(--hell-1);
  transform: translateY(12px);
  transition: transform 0.5s ease;
}

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

.timeline-step__platzhalter {
  padding: var(--space-16);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.4;
  text-align: center;
  color: var(--text-gedaempft-dunkel);
}

@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;
}

/* Layout wie auf der Schwesterseite: zwei Spalten, Karten mit
   sanftem Hover-Lift */
.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));
  }
}

/* auf grossen Viewports alle drei Pakete nebeneinander */
@media (min-width: 64rem) {
  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  border-radius: var(--radius);
  background-color: var(--hell-1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-card:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card {
    transition: none;
  }

  .pricing-card:hover {
    transform: none;
  }
}

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

/* ============================================================
   Team: 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;
}

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

/* Personen als Boxen wie auf der Schwesterseite: Haarlinien-Rand,
   dunkle Fläche, Foto oben, Text darunter. Mittig auch bei
   unvollständiger Reihe. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-48) var(--space-24);
  width: 100%;
  margin-top: var(--space-48);
}

.team-grid > .team-card {
  width: 100%;
}

@media (min-width: 40rem) {
  .team-grid > .team-card {
    width: calc((100% - var(--space-24)) / 2);
  }
}

@media (min-width: 64rem) {
  .team-grid > .team-card {
    width: calc((100% - 2 * var(--space-24)) / 3);
  }
}

.team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background-color: rgba(53, 105, 163, 0.3);
  color: var(--hell-1);
}

/* Foto entsättigt und blau eingefärbt; erst der Hover bringt einen
   leichten Zoom und die echten Farben zurück */
.team-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--marke-hell);
}

/* Verlauf am unteren Bildrand, damit das Eyebrow immer lesbar bleibt */
.team-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
      rgba(38, 79, 124, 0.85) 0%,
      rgba(38, 79, 124, 0.25) 30%,
      transparent 55%);
  pointer-events: none;
}

.team-card__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.9;
  transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
}

/* blauer Schleier über dem entsättigten Foto, ergibt den Duotone-Look */
.team-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--marke);
  opacity: 0.3;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.team-card:hover .team-card__foto {
  transform: scale(1.05);
  filter: none;
  opacity: 1;
}

.team-card:hover .team-card__media::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .team-card__foto,
  .team-card__media::after {
    transition: none;
  }

  .team-card:hover .team-card__foto {
    transform: none;
  }
}

/* Eyebrow im Akzent, unten auf dem Foto über dem Verlauf */
.team-card .team-card__eyebrow {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-16);
  z-index: 2;
  padding-right: var(--space-16);
  color: var(--akzent);
}

.team-card__text {
  padding: var(--space-24);
}

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

.team-card__beschreibung {
  margin-top: var(--space-8);
  color: var(--text-gedaempft);
}

/* ============================================================
   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;
}

/* die Sektion steht auf dunklem Grund, die Karte bleibt hell */
.case .heading-2 {
  color: var(--hell-1);
}

.case-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 62rem;
  margin-top: var(--space-48);
  border-radius: var(--radius);
  background-color: var(--color-flaeche);
  overflow: hidden;
}

.case-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-32);
  order: 2;
}

.case-card__title {
  margin-top: 0;
}

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

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

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

.case-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0;
  order: 1;
  background-color: var(--grau);
}

.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);
}

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

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

.guarantee-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background-color: var(--hell-1);
}

/* Animations-Spalte: mobil unter dem Text, ab Desktop rechts daneben */
.guarantee-card__seite {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-32) var(--space-48);
}

.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);
}

/* ---------- Erhebungs-Board: animierte Prozess-Erhebung ----------
   Gleiche Bildsprache und Farben wie das Vorgangs-Board in der Hero:
   ein reduziertes Fenster, in dem sich ein Prozessdiagramm Schritt für
   Schritt selbst zeichnet, während der Fortschrittsbalken mitläuft. */

.erhebung-board {
  position: relative;
  width: 100%;
  max-width: 26rem;
}

/* zweite Ebene hinter dem Fenster für den Tiefeneffekt */
.erhebung-board::before {
  content: "";
  position: absolute;
  inset: 20px -14px -14px 20px;
  border-radius: var(--radius);
  background-color: var(--hell-2);
  border: 1px solid rgba(38, 79, 124, 0.12);
}

.erhebung-board__fenster {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--hell-1);
  border: 1px solid rgba(38, 79, 124, 0.2);
  box-shadow: 0 24px 64px rgba(38, 79, 124, 0.16);
}

.erhebung-board__kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-16);
  border-bottom: 1px solid rgba(38, 79, 124, 0.15);
}

.erhebung-board__punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(38, 79, 124, 0.25);
}

.erhebung-board__diagramm {
  padding: var(--space-16);
}

.prozess-karte {
  display: block;
  width: 100%;
  height: auto;
}

/* Prozessschritte: helle Kacheln mit Skelett-Zeilen, die Entscheidung
   als Raute in Weiß */
.prozess-schritt__flaeche {
  fill: var(--hell-2);
  stroke: rgba(38, 79, 124, 0.35);
  stroke-width: 1.5;
}

.prozess-schritt__flaeche--entscheidung {
  fill: var(--hell-1);
}

.prozess-schritt__balken {
  fill: rgba(38, 79, 124, 0.25);
}

.prozess-schritt__balken--hell {
  fill: rgba(38, 79, 124, 0.12);
}

/* Verbindungen zeichnen sich, nachdem der vorherige Schritt steht */
.prozess-linie {
  fill: none;
  stroke: rgba(38, 79, 124, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* Reihenfolge im 8s-Takt: Schritt, Linie, Schritt, ... - am Ende blendet
   das Diagramm aus und beginnt von vorn */
.prozess-schritt {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.prozess-schritt--n1 { animation: prozess-knoten-1 8s ease-out infinite; }
.prozess-schritt--n2 { animation: prozess-knoten-2 8s ease-out infinite; }
.prozess-schritt--n3 { animation: prozess-knoten-3 8s ease-out infinite; }
.prozess-schritt--n4 { animation: prozess-knoten-4 8s ease-out infinite; }

.prozess-linie--c1 { animation: prozess-linie-1 8s ease-in-out infinite; }
.prozess-linie--c2 { animation: prozess-linie-2 8s ease-in-out infinite; }
.prozess-linie--c3 { animation: prozess-linie-3 8s ease-in-out infinite; }

@keyframes prozess-knoten-1 {
  0%, 4% { opacity: 0; transform: scale(0.85); }
  8%, 92% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.85); }
}

@keyframes prozess-knoten-2 {
  0%, 22% { opacity: 0; transform: scale(0.85); }
  26%, 92% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.85); }
}

@keyframes prozess-knoten-3 {
  0%, 40% { opacity: 0; transform: scale(0.85); }
  44%, 92% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.85); }
}

@keyframes prozess-knoten-4 {
  0%, 58% { opacity: 0; transform: scale(0.85); }
  62%, 92% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.85); }
}

@keyframes prozess-linie-1 {
  0%, 12% { stroke-dashoffset: 100; opacity: 1; }
  19%, 92% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes prozess-linie-2 {
  0%, 30% { stroke-dashoffset: 100; opacity: 1; }
  37%, 92% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes prozess-linie-3 {
  0%, 48% { stroke-dashoffset: 100; opacity: 1; }
  55%, 92% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Fortschrittsbalken am unteren Rand */
.erhebung-board__fortschritt {
  height: 6px;
  margin: 0 var(--space-16) var(--space-16);
  border-radius: 3px;
  background-color: var(--hell-2);
  overflow: hidden;
}

.erhebung-board__balken {
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--marke);
  transform-origin: left;
  animation: erhebung-balken 8s ease-in-out infinite;
}

@keyframes erhebung-balken {
  0% { transform: scaleX(0.05); }
  8% { transform: scaleX(0.2); }
  26% { transform: scaleX(0.45); }
  44% { transform: scaleX(0.7); }
  62%, 92% { transform: scaleX(1); }
  97%, 100% { transform: scaleX(0.05); }
}

@media (prefers-reduced-motion: reduce) {
  .prozess-schritt,
  .prozess-linie,
  .erhebung-board__balken {
    animation: none;
  }

  /* ohne Bewegung: das fertig gezeichnete Diagramm */
  .prozess-schritt {
    opacity: 1;
  }

  .prozess-linie {
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   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__head .heading-2 {
  margin-top: var(--space-16);
}

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

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

/* Fragen ohne Karten: je Frage eine Linie oben und unten,
   benachbarte Fragen teilen sich eine Linie */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
}

.faq-item {
  border-top: 1px solid var(--color-line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.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) 0;
  cursor: pointer;
  list-style: none;
}

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

/* Fragen in der Headline-Schrift, geöffnet im Akzent */
.faq-item__label {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.4;
  transition: color 0.3s ease;
}

.faq-item.is-open .faq-item__label {
  color: var(--akzent);
}

.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), das Plus soll aber sofort bei jedem Klick reagieren.
   Gedreht wird es zum Kreuz. */
.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

/* 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 0 var(--space-32);
  max-width: 70ch;
}

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

/* Links innerhalb der Antworten: unterstrichen, Hover im Akzent */
.faq-item__link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.3s ease;
}

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

/* ============================================================
   Abschluss-CTA: Kontaktwege links, eingebettetes Formular rechts
   ============================================================ */

.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y);
  color: var(--hell-1);
}

/* weich driftender Akzent-Schein hinter der Sektion */
.final-cta__glut {
  position: absolute;
  left: 50%;
  bottom: -260px;
  z-index: -1;
  width: 900px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--akzent) 0%, transparent 70%);
  opacity: 0.2;
  filter: blur(130px);
  pointer-events: none;
  animation: cta-drift 28s ease-in-out infinite;
}

@keyframes cta-drift {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(calc(-50% + 24px)) translateY(-16px) scale(1.08); }
}

.final-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-48);
}

.final-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

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

.final-cta__title {
  margin-top: var(--space-16);
  max-width: 20ch;
  color: var(--hell-1);
}

.final-cta__akzent {
  color: inherit;
}

.final-cta__text {
  margin-top: var(--space-16);
  max-width: 32rem;
  color: var(--text-gedaempft);
}

/* Kontaktwege: E-Mail, WhatsApp, LinkedIn */
.kontakt-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  max-width: 32rem;
  margin-top: var(--space-32);
}

.kontakt-karte {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color 0.3s ease;
}

.kontakt-karte:hover {
  border-color: var(--hell-1);
}

.kontakt-karte__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--hell-1);
}

.kontakt-karte__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.kontakt-karte .label {
  color: rgba(255, 255, 255, 0.7);
}

.kontakt-karte__wert {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--hell-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kontakt-karte__pfeil {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.3s ease;
}

.kontakt-karte:hover .kontakt-karte__pfeil {
  transform: translateX(4px);
}

/* 24-Stunden-Hinweis mit pulsierendem Punkt */
.final-cta__hinweis {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
  color: rgba(255, 255, 255, 0.7);
}

.final-cta__puls {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--akzent);
}

.final-cta__puls::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--akzent);
  opacity: 0.6;
  animation: cta-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes cta-ping {
  0% { transform: scale(1); opacity: 0.6; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Formular-Panel rechts */
.final-cta__panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-32);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background-color: rgba(53, 105, 163, 0.3);
}

.cta-formular {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.cta-formular__feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cta-formular .label {
  color: var(--hell-1);
}

.cta-formular__eingabe {
  width: 100%;
  padding: 14px var(--space-16);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  background-color: rgba(38, 79, 124, 0.6);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hell-1);
  transition: border-color 0.3s ease;
}

.cta-formular__eingabe::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.cta-formular__eingabe:focus {
  outline: none;
  border-color: var(--hell-1);
}

.cta-formular__eingabe--mehrzeilig {
  resize: vertical;
  min-height: 8rem;
}

/* auf dem dunklen Panel steht der Senden-Button in Weiß,
   der Hover wechselt wie bei allen Primärbuttons auf den Akzent */
.cta-formular__senden {
  width: 100%;
  background-color: var(--hell-1);
  background-image: linear-gradient(135deg, var(--hell-1), var(--hell-2));
  color: var(--marke);
}

.cta-formular__senden:hover {
  opacity: 0.9;
  color: var(--marke);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18);
}

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

.cta-formular__hinweis {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

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

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

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

@media (min-width: 62rem) {
  .final-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-64);
    align-items: start;
  }

  .final-cta__panel {
    padding: var(--space-48);
  }
}

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

  .final-cta__puls::before {
    animation: none;
    opacity: 0;
  }

  .kontakt-karte__pfeil {
    transition: none;
  }

  .kontakt-karte:hover .kontakt-karte__pfeil {
    transform: none;
  }
}

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

/* Die Bestätigung legt sich als sauberes, weichgezeichnetes Overlay über
   das Formular-Panel. Das Element bleibt im Baum und wird nur unsichtbar
   geschaltet - ein unsichtbares Overlay kann so nie das Formular blockieren. */
.anfrage-erfolg {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
  background-color: rgba(38, 79, 124, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* die Ausblende läuft etwas länger und weicher als die Einblende */
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

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

.anfrage-erfolg__zeichen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* einzelner Puls-Ring, der nach dem Haken vom Zeichen ausgeht */
.anfrage-erfolg__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--akzent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* Das Zeichen: gefüllte Akzent-Scheibe mit weißem Haken.
   pathLength normiert den Haken auf 100 für das Zeichnen. */
.anfrage-erfolg__kreis {
  fill: var(--akzent);
  stroke: none;
}

.anfrage-erfolg__haken {
  fill: none;
  stroke: var(--hell-1);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.anfrage-erfolg__titel {
  margin-top: var(--space-24);
  color: var(--hell-1);
}

.anfrage-erfolg__untertitel {
  margin-top: var(--space-8);
  color: var(--text-gedaempft);
}

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

/* im Ladezustand wird die Scheibe zum offenen Kreisbogen, der rotiert */
.anfrage-erfolg.laedt .anfrage-erfolg__kreis {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 3;
  stroke-linecap: round;
  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__titel,
.anfrage-erfolg.laedt .anfrage-erfolg__untertitel {
  opacity: 0;
}

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

/* --- Zustand 2: Geschafft ---
   Abfolge: Scheibe federt herein, Haken zeichnet sich, ein Ring pulsiert
   nach außen, dann steigen Titel und Unterzeile auf. */

.anfrage-erfolg.fertig .anfrage-erfolg__kreis {
  transform-box: fill-box;
  transform-origin: center;
  animation: scheibePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.anfrage-erfolg.fertig .anfrage-erfolg__haken {
  stroke-dasharray: 100;
  animation: hakenZeichnen 0.3s 0.35s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

.anfrage-erfolg.fertig .anfrage-erfolg__ring {
  animation: ringPuls 0.9s ease-out 0.55s backwards;
}

.anfrage-erfolg.fertig .anfrage-erfolg__titel {
  animation: textEinblenden 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards;
}

.anfrage-erfolg.fertig .anfrage-erfolg__untertitel {
  animation: textEinblenden 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.72s backwards;
}

@keyframes scheibePop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes ringPuls {
  from {
    opacity: 0.6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes textEinblenden {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  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__ring,
  .anfrage-erfolg.fertig .anfrage-erfolg__titel,
  .anfrage-erfolg.fertig .anfrage-erfolg__untertitel {
    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
   ============================================================ */

/* feine Linien am Beginn des Footers und über der untersten Zeile,
   wie auf der Schwesterseite */
.site-footer__top {
  background-color: var(--marke);
  color: var(--hell-1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-block: var(--section-y);
}

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

/* 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__badge {
  display: block;
  width: clamp(7rem, 12vw, 10rem);
  height: auto;
}

.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);
}

/* auf den dunklen Flächen stehen die Primärbuttons in Weiß,
   der Hover wechselt auf den Akzent */
/* weiße Primärbuttons auf dunklen Flächen: heller Verlauf, der Hover
   bleibt farblich unverändert und legt nur einen hellen Schein darunter */
.site-footer__top .button--primaer,
.case__actions .button--primaer {
  background-color: var(--hell-1);
  background-image: linear-gradient(135deg, var(--hell-1), var(--hell-2));
  color: var(--marke);
}

.site-footer__top .button--primaer:hover,
.case__actions .button--primaer:hover {
  opacity: 0.9;
  color: var(--marke);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18);
}

.site-footer__bottom {
  background-color: var(--marke);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  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;
}

/* gleicher optischer Randabstand wie bei den Social-Icons: deren Klickfläche
   ist 44px breit, das Symbol darin 18px - macht 13px Luft zur Kante */
.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__copyright {
  color: var(--hell-1);
}

.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);
}

/* ============================================================
   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
   ============================================================ */

/* 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;
  }

  .case-card {
    flex-direction: row;
    align-items: stretch;
  }

  .case-card__content {
    flex: 1 1 50%;
    order: 1;
    justify-content: center;
    padding: var(--space-48);
  }

  .case-card__media {
    flex: 1 1 50%;
    order: 2;
    aspect-ratio: auto;
  }

  .guarantee-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

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

  .guarantee-card__seite {
    grid-column: 2;
    padding: 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;
  }
}

/* aktuelle Seite: dauerhaft in der Markenfarbe, der Link führt nirgendwohin */
.nav-link--aktuell {
  cursor: default;
  color: var(--marke);
}

/* ============================================================
   Blog: Hero mit Beitrags-Mosaik
   ============================================================ */

.blog-hero {
  display: flex;
  color: var(--hell-1);
  min-height: 100vh;
  /* svh statt vh: die ein- und ausfahrende Browserleiste auf Mobil soll die
     Sektion nicht über den sichtbaren Bereich hinausschieben */
  min-height: 100svh;
  padding-top: var(--nav-height);
  /* die Kacheln laufen bis an die Unterkante, unten kein Innenabstand */
  padding-bottom: 0;
  overflow: hidden;
}

.blog-hero__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--space-48);
}

.blog-hero__kopf {
  display: flex;
  flex-direction: column;
}

/* Die Blog-Überschrift nutzt die volle Breite des Containers, damit sie auf
   großen Viewports mit zwei Zeilen auskommt. */
.blog-hero__titel {
  max-width: none;
}

.beitrag-mosaik {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  /* nimmt die restliche Höhe der Sektion ein */
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--space-48);
}

.beitrag-kachel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--hell-1);
  cursor: pointer;
}

/* dezenter Schleier über dem ganzen Banner: nimmt dem Bild Leuchtkraft
   gegenüber dem Text, das Motiv bleibt klar erkennbar */
.beitrag-kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(38, 79, 124, 0.25);
  pointer-events: none;
}

/* mobil steht das Mosaik als Stapel; 16:9 wie die Beitragsbilder, damit die
   Banner vollständig zu sehen sind */
.beitrag-kachel {
  aspect-ratio: 16 / 9;
}

.beitrag-kachel__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Verlauf sitzt auf dem Textblock, nicht auf dem Bild: so bleibt die
   Lesbarkeit erhalten, sobald der Platzhalter durch ein echtes Bild ersetzt wird */
.beitrag-kachel__inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-64) var(--space-32) var(--space-32);
  background-image: linear-gradient(to top,
      rgba(38, 79, 124, 0.98) 0%,
      rgba(38, 79, 124, 0.88) 45%,
      rgba(38, 79, 124, 0.55) 78%,
      rgba(38, 79, 124, 0) 100%);
}

.beitrag-kachel__titel {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.2;
  letter-spacing: normal;
}

.beitrag-kachel--gross .beitrag-kachel__titel {
  font-size: var(--text-h3);
}

.blog-hero .small-text {
  color: rgba(255, 255, 255, 0.7);
}

.beitrag-kachel__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  max-width: none;
  margin-top: var(--space-8);
}

/* ============================================================
   Bild-Platzhalter als Fläche
   ============================================================ */

.ph-image--flaeche {
  border: 0;
  background-color: var(--marke-hell);
  background-image: repeating-linear-gradient(135deg,
      transparent 0 16px,
      rgba(255, 255, 255, 0.07) 16px 32px);
}

@media (min-width: 48rem) {
  .blog-hero__inner {
    padding-top: var(--space-64);
  }

  /* eine große Kachel links, zwei gestapelte rechts */
  .beitrag-mosaik {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-height: 320px;
  }

  .beitrag-kachel {
    /* im Raster bestimmt die Zeilenhöhe die Kachel, nicht das Seitenverhältnis */
    aspect-ratio: auto;
  }

  .beitrag-kachel--gross {
    grid-row: span 2;
  }

  /* solange es nur einen Beitrag gibt, nimmt er die ganze Breite ein */
  .beitrag-kachel--gross:only-child {
    grid-column: 1 / -1;
  }

  /* bei nur zwei Beiträgen stehen beide gleich groß nebeneinander, im
     Seitenverhältnis der Titelbilder, damit nichts abgeschnitten wird */
  .beitrag-mosaik:has(> .beitrag-kachel:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    flex: 0 0 auto;
    min-height: 0;
  }

  .beitrag-mosaik:has(> .beitrag-kachel:nth-child(2):last-child) .beitrag-kachel {
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }

  .beitrag-mosaik:has(> .beitrag-kachel:nth-child(2):last-child) .beitrag-kachel__titel {
    font-size: var(--text-body);
  }
}

/* ============================================================
   Blog: Beitragsliste mit Seitenleiste
   ============================================================ */

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

.blog-liste__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-48);
}

.blog-liste__spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* H2 zu Inhalt: 16 */
.blog-liste__titel + .beitrag-karten {
  margin-top: var(--space-16);
}

.beitrag-karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32);
}

.beitrag-karte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--hell-1);
  color: var(--color-text);
  cursor: pointer;
}

.beitrag-karte__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.beitrag-karte__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-32);
}

.beitrag-karte__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  max-width: none;
}

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

/* schiebt die Zeile mit der Person immer an den unteren Kartenrand,
   damit die Karten einer Zeile auf gleicher Höhe abschließen */
.beitrag-karte__autor {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: auto;
  padding-top: var(--space-32);
}

.beitrag-karte__avatar {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: cover;
  /* rund als bewusste Ausnahme vom Corner-Radius 0 des Design-Systems */
  border-radius: 50%;
}

.beitrag-karte__name {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.2;
}

/* ============================================================
   Blog: Seitenleiste
   ============================================================ */

.blog-seitenleiste {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* solange die Seitenleiste unter der Hauptspalte liegt, gehoert sie nach
     oben: Kategorien zuerst, danach die Beitraege */
  order: -1;
}

.blog-kategorien {
  display: flex;
  flex-direction: column;
}

/* Überschrift links, Abwählen-Link rechts auf derselben Mittellinie */
.blog-kategorien__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.blog-kategorien__abwaehlen {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-klein);
  color: var(--marke);
  cursor: pointer;
  transition: color 0.2s ease;
}

.blog-kategorien__abwaehlen:hover {
  color: var(--akzent);
}

.blog-kategorien__abwaehlen[hidden] {
  display: none;
}

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

.kategorie-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius);
  background-color: var(--grau);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* Chips sind Filter-Buttons: ohne Browser-Rahmen, Schrift in Markenfarbe */
button.kategorie-chip {
  border: 0;
  color: var(--marke);
}

button.kategorie-chip:hover,
button.kategorie-chip.is-aktiv {
  color: var(--hell-1);
}

/* ausgefilterte Karten: display:flex der Karte würde hidden sonst übergehen */
.beitrag-karte[hidden] {
  display: none;
}

.blog-filter-leer {
  margin-top: var(--space-24);
}

/* Erst wenn die Seitenleiste neben den Beiträgen steht, gehen die Karten auf
   zwei Spalten. Solange sie darüber liegt, bleibt eine Spalte. */
@media (min-width: 56rem) {
  /* Beiträge links, Seitenleiste rechts, Verhältnis 2 zu 1 */
  .blog-liste__inner {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

  .blog-seitenleiste {
    order: 0;
  }

  .blog-werbung {
    width: 100%;
  }

  .beitrag-karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.whatsapp-fab {
  position: fixed;
  right: var(--space-16);
  bottom: var(--space-16);
  z-index: 60;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius);
  background-color: #25d366;
  color: #ffffff;
  text-decoration: none;
  transition:
    padding 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

/* wird per JS ausgeblendet, sobald der Footer erreicht ist */
.whatsapp-fab.is-versteckt {
  opacity: 0;
  pointer-events: none;
}

.whatsapp-fab:hover {
  padding-right: 20px;
}

.whatsapp-fab__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: currentColor;
}

/* Text ist eingeklappt und blendet sich beim Hover ein */
.whatsapp-fab__text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  transition:
    max-width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    margin-left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.whatsapp-fab:hover .whatsapp-fab__text {
  max-width: 10rem;
  opacity: 1;
  margin-left: var(--space-8);
}

@media (min-width: 48rem) {
  .whatsapp-fab {
    right: var(--space-24);
    bottom: var(--space-24);
  }
}

/* ============================================================
   Teaser-Streifen: Hinweis am Ende einer Sektion
   Helle Flaeche als bewusster Bruch in der Navy-Sektion,
   damit Besucher daran haengenbleiben statt vorbeizuscrollen.
   ============================================================ */

.teaser-streifen {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  max-width: 48rem;
  margin: var(--space-64) auto 0;
  padding: var(--space-24) var(--space-32);
  border-radius: var(--radius);
  /* heller Streifen, der sich klar von der Navy-Flaeche abhebt */
  background-color: var(--hell-1);
  background-image: linear-gradient(135deg, var(--hell-1), var(--hell-2));
  color: var(--marke);
  box-shadow: 0 18px 40px -18px rgba(10, 26, 46, 0.6);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}

.teaser-streifen:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 52px -18px rgba(10, 26, 46, 0.75);
}

.teaser-streifen__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background-color: var(--hell-2);
  color: var(--marke);
}

.teaser-streifen__icon svg {
  width: 24px;
  height: 24px;
}

.teaser-streifen__inhalt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Die Frage traegt das Gewicht: sie entscheidet, ob weitergelesen wird */
.teaser-streifen__frage {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--marke);
}

.teaser-streifen__text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--text-gedaempft-dunkel);
}

.teaser-streifen__pfeil {
  flex: 0 0 auto;
  width: 28px;
  height: 24px;
  color: var(--marke);
  transition: transform 0.2s ease;
}

.teaser-streifen:hover .teaser-streifen__pfeil {
  transform: translateX(4px);
}

@media (max-width: 36rem) {
  .teaser-streifen {
    gap: var(--space-16);
    padding: var(--space-24);
  }

  .teaser-streifen__icon {
    width: 36px;
    height: 36px;
  }

  .teaser-streifen__icon svg {
    width: 20px;
    height: 20px;
  }

  .teaser-streifen__pfeil {
    width: 24px;
    height: 20px;
  }
}

/* auf schmalen Geraeten weicht das Icon, damit der Text nicht zerfaellt */
@media (max-width: 26rem) {
  .teaser-streifen__icon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teaser-streifen,
  .teaser-streifen__pfeil {
    transition: none;
  }

  .teaser-streifen:hover,
  .teaser-streifen:hover .teaser-streifen__pfeil {
    transform: none;
  }
}

/* KI-Badge neben den Kartentiteln: dezente Markenfläche mit Funkel-Icon */
.ki-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-8);
  padding: 3px 8px;
  border-radius: var(--radius);
  background-color: rgba(41, 96, 86, 0.1);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--marke-hell);
  white-space: nowrap;
  vertical-align: middle;
  transform: translateY(-1px);
}

.ki-badge__icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.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;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  /* 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;
}

.task-card:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .task-card {
    transition: none;
  }

  .task-card:hover {
    transform: none;
  }
}


/* Einblenden beim ersten Vorbeiscrollen. Die Klasse einblenden setzt erst
   main.js: ohne JavaScript bleibt alles ganz normal sichtbar. Bewegt wird
   translate statt transform - sonst würde die fertige Animation dauerhaft den
   transform des Elements überschreiben (etwa Hover-Transforms auf Karten). */
.einblenden {
  opacity: 0;
}

.einblenden.is-eingeblendet {
  animation: einblenden-auf 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--einblend-verzug, 0s);
}

@keyframes whatsapp-ein {
  from {
    opacity: 0;
    translate: calc(100% + var(--space-24)) 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
}

@keyframes einblenden-auf {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

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