/* ==========================================================================
   AKI DIGITAL STUDIO — Stylesheet
   ==========================================================================

   INHALT
   01  DESIGN-TOKEN            Farben, Schrift, Abstände, Radien, Schatten
   02  RESET & GRUNDLAGEN
   03  TYPOGRAFIE
   04  LAYOUT: Wrap & Section
   05  LABELS (Eyebrow-Pills)
   06  BUTTONS
   07  KARTEN (Doppelrand: shell → core)
   08  NAVIGATION (Schwebende Insel + Mobil-Overlay)
   09  HERO
   10  BROWSER-MOCKUP (reine CSS-Grafik)
   11  KENNZAHLEN-BAND
   12  LEISTUNGEN (Bento-Raster)
   13  ABLAUF (7-Tage-Zeitstrahl)
   14  PREISE
   15  VORLAGEN / PROJEKTE
   16  VERGLEICH
   17  FAQ (Akkordeon)
   18  KONTAKT & FORMULAR
   19  CTA-BAND
   20  FOOTER
   21  DUNKLE BEREICHE (.on-dark)
   22  SCROLL-ANIMATIONEN
   23  RECHTSTEXTE (Prosa)
   24  HILFSKLASSEN

   Es gibt keine Inline-Styles im HTML. Jede Gestaltung hat einen
   Klassennamen und lässt sich hier zentral ändern.
   ========================================================================== */


/* ==========================================================================
   01  DESIGN-TOKEN
   Wer hier etwas ändert, ändert es auf allen Seiten gleichzeitig.
   ========================================================================== */

:root {

  /* --- Farben: Blau ----------------------------------------------------- */
  --blue:        #1748C4;   /* Primärfarbe · 7,6:1 auf Weiß  → AA auch klein */
  --blue-hover:  #12379B;
  --blue-deep:   #0E2F7A;
  --blue-tint:   #EDF2FE;   /* sehr helle Fläche, z. B. Icon-Kacheln        */
  --blue-tint-2: #DFE9FD;
  --blue-line:   #CFDEFA;

  /* --- Farben: Tinte (Text & dunkle Flächen) ---------------------------- */
  --ink:         #0B1A33;   /* 17,4:1 auf Weiß                              */
  --ink-soft:    #40506B;   /*  8,2:1 auf Weiß                              */
  --ink-mute:    #63728D;   /*  4,9:1 auf Weiß → AA auch für Kleintext      */

  /* --- Farben: Flächen -------------------------------------------------- */
  --paper:       #FFFFFF;
  --paper-2:     #F5F7FB;
  --paper-3:     #EEF2F9;
  --line:        #E1E7F2;
  --line-soft:   #EDF1F8;

  /* --- Farben auf dunklem Grund ----------------------------------------- */
  --on-dark:      #FFFFFF;
  --on-dark-soft: #C6D1E5;
  --on-dark-mute: #A9B6CE;  /*  8,5:1 auf --ink                            */
  --on-dark-acc:  #8FB4FF;  /*  8,4:1 auf --ink                            */
  --on-dark-line: rgba(255, 255, 255, .14);
  --on-dark-fill: rgba(255, 255, 255, .06);

  /* --- Doppelrand-Karten ------------------------------------------------ */
  --shell-pad:  6px;
  --shell-bg:   #F2F5FC;
  --shell-ring: rgba(11, 26, 51, .06);

  /* --- Schrift ---------------------------------------------------------- */
  --font:      'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Fließende Typo-Skala: wächst mit dem Viewport, ohne Sprünge.
     --t-display ist auf die längste Hero-Zeile abgestimmt: „Ihre Website.“
     braucht das 5,9-fache der Schriftgröße an Breite. Wächst die Schrift
     schneller als ihre Spalte, bricht die Überschrift um — deshalb der
     flache Anstieg und die Deckelung bei 6rem. */
  --t-display: clamp(2.75rem, -0.5rem + 8.6vw, 6rem);
  --t-h1:      clamp(2.3rem,  1.55rem + 3.2vw, 4.1rem);
  --t-h2:      clamp(1.95rem, 1.45rem + 2.1vw, 3.1rem);
  --t-h3:      clamp(1.25rem, 1.1rem  + 0.7vw, 1.65rem);
  --t-h4:      clamp(1.05rem, 1rem    + 0.3vw, 1.2rem);
  --t-lead:    clamp(1.08rem, 1rem    + 0.4vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-label:   0.75rem;

  /* --- Abstände --------------------------------------------------------- */
  --s1: .75rem; --s2: 1rem;   --s3: 1.5rem;
  --s4: 2rem;   --s5: 3rem;   --s6: 4rem;

  --sp:      clamp(5rem, 3.4rem + 6vw, 9.5rem);  /* Abstand je Sektion      */
  --sp-half: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);
  --gutter:  clamp(1.25rem, .7rem + 2.2vw, 2.5rem);
  --wrap:    1180px;

  /* --- Radien ----------------------------------------------------------- */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px;
  --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px;
  --r-pill: 999px;

  /* --- Schatten: weit gestreut, blaustichig, nie hartes Schwarz ---------- */
  --sh-xs:   0 1px 2px rgba(11, 26, 51, .04);
  --sh-sm:   0 2px 8px -2px rgba(11, 26, 51, .07), 0 1px 3px rgba(11, 26, 51, .04);
  --sh-md:   0 18px 40px -22px rgba(11, 26, 51, .20), 0 4px 14px -8px rgba(11, 26, 51, .08);
  --sh-lg:   0 44px 84px -44px rgba(11, 26, 51, .30), 0 14px 34px -18px rgba(11, 26, 51, .10);
  --sh-blue: 0 20px 44px -22px rgba(23, 72, 196, .42);
  --sh-nav:  0 12px 34px -18px rgba(11, 26, 51, .22), 0 2px 8px -4px rgba(11, 26, 51, .10);

  /* --- Bewegung: eigene Kurven, kein ease-in-out ------------------------ */
  --ease:      cubic-bezier(.32, .72, 0, 1);
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, .14, .3, 1);
  --dur:       .42s;
  --dur-slow:  .8s;
}


/* ==========================================================================
   02  RESET & GRUNDLAGEN
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;      /* Platz für die schwebende Navigation */
}

body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.on-dark :focus-visible { outline-color: var(--on-dark-acc); }

::selection { background: var(--blue); color: #fff; }

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: .85rem 1.4rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

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


/* ==========================================================================
   03  TYPOGRAFIE
   ========================================================================== */

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
}

h3, h4 { line-height: 1.25; letter-spacing: -.018em; }

.display { font-size: var(--t-display); font-weight: 600; letter-spacing: -.038em; }
.h1      { font-size: var(--t-h1); }
.h2      { font-size: var(--t-h2); }
.h3      { font-size: var(--t-h3); }
.h4      { font-size: var(--t-h4); font-weight: 600; }

/* Ein Teil der Überschrift in Blau — der einzige Farbakzent im Fließtext */
.accent { color: var(--blue); }

/* Zurückgenommener Teil der Überschrift */
.quiet  { color: var(--ink-mute); font-weight: 400; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.text-sm { font-size: var(--t-sm); }

.muted { color: var(--ink-mute); }

strong, b { font-weight: 600; color: var(--ink); }

/* Preise und große Zahlen: Ziffern gleich breit, damit nichts springt */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* Textlink mit unterstrichenem Hover */
.link {
  color: var(--blue);
  font-weight: 500;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease);
}
.link:hover { background-size: 100% 1px; }

/* E-Mail-Adressen sind ein einziges langes Wort ohne Trennstelle. Ohne diese
   Regel bestimmt die Adresse die Mindestbreite ihrer Spalte und schiebt auf
   schmalen Handys die ganze Seite seitlich raus. */
a[href^="mailto:"] { overflow-wrap: anywhere; }


/* ==========================================================================
   04  LAYOUT: Wrap & Section
   ========================================================================== */

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

.wrap--narrow { max-width: 780px; }
.wrap--mid    { max-width: 960px; }

.section { padding-block: var(--sp); }
.section--tight { padding-block: var(--sp-half); }
.section--flush-top { padding-top: 0; }

.band-soft { background: var(--paper-2); }

/* Kopfzeile einer Sektion */
.shead { max-width: 760px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.shead--center { margin-inline: auto; text-align: center; }
.shead .lead { margin-top: var(--s3); }

/* Feine Trennlinie */
.rule { height: 1px; background: var(--line); border: 0; }


/* ==========================================================================
   05  LABELS (Eyebrow-Pills)
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: var(--s3);
  /* Rechts wird der Buchstabenabstand abgezogen: letter-spacing setzt auch
     hinter das letzte Zeichen noch Luft, sonst wirkt die Pille schief. */
  padding: .42rem calc(.7rem - .16em) .42rem .7rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-deep);
  background: var(--blue-tint);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--blue-line);
}

.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}

/* Pulsierender Punkt — signalisiert „aktuell frei“ */
.eyebrow__dot--live { animation: pulse 2.6s var(--ease-soft) infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 72, 196, .45); }
  50%      { box-shadow: 0 0 0 5px rgba(23, 72, 196, 0); }
}

.on-dark .eyebrow {
  color: var(--on-dark-acc);
  background: var(--on-dark-fill);
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
}
.on-dark .eyebrow__dot { background: var(--on-dark-acc); }


/* ==========================================================================
   06  BUTTONS
   Der Pfeil sitzt nie nackt neben dem Text, sondern in einem eigenen
   Kreis, der beim Hover diagonal wandert.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  max-width: 100%;                 /* nie breiter als der Platz, den er hat */
  padding: .58rem .58rem .58rem 1.5rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    color            var(--dur) var(--ease),
    box-shadow       var(--dur) var(--ease),
    transform        .18s var(--ease-out);
}

.btn:active { transform: scale(.975); }

.btn__icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 50%;
  transition:
    transform        var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.btn__icon svg { width: 15px; height: 15px; }

.btn:hover .btn__icon { transform: translate(3px, -3px) scale(1.06); }

/* Primär — gefülltes Blau */
.btn--primary {
  color: #fff;
  background: var(--blue);
  box-shadow: var(--sh-blue);
}
.btn--primary:hover { background: var(--blue-hover); }
.btn--primary .btn__icon { background: rgba(255, 255, 255, .18); }
.btn--primary:hover .btn__icon { background: rgba(255, 255, 255, .28); }

/* Sekundär — weiße Insel mit Haarlinie */
.btn--ghost {
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-sm);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--blue-line), var(--sh-md); }
.btn--ghost .btn__icon { background: var(--paper-3); }
.btn--ghost:hover .btn__icon { background: var(--blue-tint); }

/* Auf dunklem Grund */
.btn--light {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .6);
}
.btn--light:hover { background: #EEF3FF; }
.btn--light .btn__icon { background: var(--blue-tint); }

.btn--outline {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
}
.btn--outline:hover { background: var(--on-dark-fill); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.btn--outline .btn__icon { background: var(--on-dark-fill); }

/* Größen */
.btn--sm  { padding: .42rem .42rem .42rem 1.15rem; font-size: var(--t-xs); gap: .6rem; }
.btn--sm .btn__icon { width: 1.75rem; height: 1.75rem; }
.btn--sm .btn__icon svg { width: 14px; height: 14px; }

.btn--lg  { padding: .72rem .72rem .72rem 1.9rem; font-size: var(--t-body); }
.btn--lg .btn__icon { width: 2.5rem; height: 2.5rem; }

/* Nur Text, ohne Fläche */
.btn--bare {
  padding-left: 0;
  color: var(--ink);
  background: none;
  box-shadow: none;
}
.btn--bare .btn__icon { background: var(--blue-tint); color: var(--blue); }
.btn--bare:hover { color: var(--blue); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Auf sehr schmalen Geraeten duerfen Beschriftungen umbrechen. Mit nowrap
   bestimmt sonst der laengste Knopf die Mindestbreite seiner Rasterspalte —
   auf der Kontaktseite lief die Seite dadurch bei 320 px seitlich über. */
@media (max-width: 480px) {
  /* overflow-wrap: anywhere greift zusätzlich innerhalb eines Wortes und
     senkt dadurch auch die berechnete Mindestbreite — nötig für Knöpfe mit
     einer E-Mail-Adresse als Beschriftung, die sonst die ganze Spalte
     aufziehen. Normale Beschriftungen brechen weiterhin zuerst am Leerzeichen. */
  .btn { white-space: normal; overflow-wrap: anywhere; }
  .btn--lg { padding-left: 1.4rem; }
}


/* ==========================================================================
   07  KARTEN — Doppelrand
   Außen eine Schale (shell) mit eigener Fläche und Haarlinie, innen der
   Kern (core) mit kleinerem, konzentrischem Radius. Das erzeugt Tiefe,
   ohne harte Schlagschatten zu brauchen.
   ========================================================================== */

.shell {
  padding: var(--shell-pad);
  background: var(--shell-bg);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--shell-ring), var(--sh-sm);
  transition: box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.shell > .core {
  height: 100%;
  background: var(--paper);
  border-radius: calc(var(--r-xl) - var(--shell-pad));
  box-shadow:
    inset 0 0 0 1px var(--line-soft),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.shell--lift:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--blue-line), var(--sh-md); }

.shell--sm  { --shell-pad: 5px; border-radius: var(--r-lg); }
.shell--sm > .core { border-radius: calc(var(--r-lg) - 5px); }

.shell--flat { box-shadow: inset 0 0 0 1px var(--shell-ring); }

/* Auf dunklem Grund */
.on-dark .shell {
  background: var(--on-dark-fill);
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
}
.on-dark .shell > .core {
  background: rgba(255, 255, 255, .04);
  box-shadow:
    inset 0 0 0 1px var(--on-dark-line),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* Innenabstand für Karteninhalt */
.pad    { padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.pad-lg { padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); }

/* Icon-Kachel in Karten */
.tile {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--blue-line);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tile svg { width: 20px; height: 20px; }

.shell--lift:hover .tile { transform: scale(1.06) rotate(-3deg); background: var(--blue-tint-2); }

.on-dark .tile {
  color: var(--on-dark-acc);
  background: var(--on-dark-fill);
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
}


/* ==========================================================================
   08  NAVIGATION — schwebende Insel
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: clamp(.7rem, .4rem + .9vw, 1.15rem);
  pointer-events: none;
}

/* Unsichtbarer Messpunkt ganz oben. Sobald er aus dem Bild scrollt, wird die
   Navigation kräftiger. main.js legt ihn an — deshalb steht er hier und nicht
   im HTML. */
.nav-sentinel {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.nav__island {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: min(var(--wrap), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  padding: .5rem .5rem .5rem 1.35rem;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(11, 26, 51, .07), var(--sh-nav);
  transition:
    background-color var(--dur-slow) var(--ease),
    box-shadow       var(--dur-slow) var(--ease),
    transform        var(--dur-slow) var(--ease);
}

.nav.is-scrolled .nav__island {
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 1px rgba(11, 26, 51, .09), 0 18px 40px -20px rgba(11, 26, 51, .3);
}

/* --- Wortmarke --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.03em;
  color: var(--ink);
  transition: opacity var(--dur) var(--ease);
}
.brand:hover { opacity: .7; }

.brand__mark {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 9px;
  background: var(--blue);
  box-shadow: var(--sh-blue);
}
.brand__mark svg { width: 15px; height: 15px; color: #fff; }

/* --- Links (Desktop) --- */
.nav__links {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.nav__link {
  position: relative;
  padding: .5rem .8rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); background: rgba(11, 26, 51, .045); }

.nav__link[aria-current='page'] { color: var(--blue); }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .18rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateX(-50%);
}

/* --- Burger --- */
.burger {
  display: none;
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  padding: 0;
  background: var(--paper-2);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--dur) var(--ease);
}
.burger:hover { background: var(--blue-tint); }

.burger__line {
  position: absolute;
  left: 50%;
  width: 15px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur-slow) var(--ease), opacity .2s var(--ease);
}
.burger__line:nth-child(1) { top: calc(50% - 4px); transform: translateX(-50%); }
.burger__line:nth-child(2) { top: calc(50% + 4px); transform: translateX(-50%); }

/* Morph zum X — die Linien wandern zur Mitte und drehen sich */
.burger[aria-expanded='true'] .burger__line:nth-child(1) {
  transform: translate(-50%, 4px) rotate(45deg);
}
.burger[aria-expanded='true'] .burger__line:nth-child(2) {
  transform: translate(-50%, -4px) rotate(-45deg);
}

/* --- Mobiles Overlay --- */
.navsheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  background: rgba(248, 250, 254, .86);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  backdrop-filter: blur(32px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
}

.navsheet.is-open { opacity: 1; visibility: visible; }

.navsheet__list { display: flex; flex-direction: column; gap: .15rem; }

.navsheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) 0;
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.032em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  /* Startzustand der gestaffelten Enthüllung */
  opacity: 0;
  transform: translateY(2.4rem);
  transition:
    opacity   .6s var(--ease-out),
    transform .6s var(--ease-out),
    color     var(--dur) var(--ease);
}
.navsheet__link:hover { color: var(--blue); }
.navsheet__link svg { width: 18px; height: 18px; color: var(--ink-mute); }

.navsheet.is-open .navsheet__link { opacity: 1; transform: translateY(0); }

/* Gestaffelte Verzögerung je Position */
.navsheet.is-open .navsheet__link:nth-child(1) { transition-delay: .08s; }
.navsheet.is-open .navsheet__link:nth-child(2) { transition-delay: .14s; }
.navsheet.is-open .navsheet__link:nth-child(3) { transition-delay: .20s; }
.navsheet.is-open .navsheet__link:nth-child(4) { transition-delay: .26s; }
.navsheet.is-open .navsheet__link:nth-child(5) { transition-delay: .32s; }
.navsheet.is-open .navsheet__link:nth-child(6) { transition-delay: .38s; }

.navsheet__foot {
  margin-top: var(--s5);
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity .6s var(--ease-out) .44s, transform .6s var(--ease-out) .44s;
}
.navsheet.is-open .navsheet__foot { opacity: 1; transform: translateY(0); }

.navsheet__contact {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__island .btn { display: none; }
  .burger { display: block; }
}


/* ==========================================================================
   09  HERO
   Redaktioneller Split: links große Typo, rechts das Mockup.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(7rem, 5.5rem + 7vw, 9.5rem);
  padding-bottom: var(--sp);
  overflow: hidden;
}

/* Weicher Lichtschein hinter dem Hero statt eines Fotos */
.hero::before {
  content: '';
  position: absolute;
  top: -28%;
  right: -12%;
  width: min(70rem, 105vw);
  aspect-ratio: 1;
  background:
    radial-gradient(closest-side, rgba(23, 72, 196, .14), rgba(23, 72, 196, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -18%;
  width: min(52rem, 90vw);
  aspect-ratio: 1;
  background:
    radial-gradient(closest-side, rgba(23, 72, 196, .09), rgba(23, 72, 196, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

/* Die Textspalte bekommt mehr Gewicht als das Mockup — sonst passt die
   Überschrift nicht in ihre Zeile. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
}

.hero__title { margin-bottom: var(--s3); }
.hero__lead  { max-width: 34ch; }

/* Vertrauensleiste unter den Buttons */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.hero__trust svg { width: 15px; height: 15px; color: var(--blue); flex: none; }

.hero__visual { position: relative; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero__lead { max-width: 46ch; }
  .hero__visual { order: 2; }
}


/* ==========================================================================
   10  BROWSER-MOCKUP — reine CSS-Grafik, kein Bild
   ========================================================================== */

.mock { position: relative; }

.mock__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--line-soft);
}

.mock__dots { display: flex; gap: .35rem; }
.mock__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1px rgba(11, 26, 51, .05);
}
.mock__dot:first-child { background: var(--blue-tint-2); }

.mock__url {
  flex: 1;
  padding: .32rem .7rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--ink-mute);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock__screen {
  padding: 1.15rem;
  background:
    linear-gradient(180deg, #FBFCFE 0%, #F4F7FD 100%);
  border-radius: 0 0 calc(var(--r-xl) - var(--shell-pad)) calc(var(--r-xl) - var(--shell-pad));
}

/* Abstrahierte Seitenbausteine */
.mock__hero {
  padding: 1.15rem;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs), inset 0 0 0 1px var(--line-soft);
}

.mock__row { display: flex; align-items: center; gap: .55rem; }
.mock__row + .mock__row { margin-top: .5rem; }

.mock__pill {
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--paper-3);
}
.mock__pill--blue { background: var(--blue); }
.mock__pill--tint { background: var(--blue-tint-2); }

.mock__w20 { width: 20%; } .mock__w30 { width: 30%; }
.mock__w40 { width: 40%; } .mock__w55 { width: 55%; }
.mock__w70 { width: 70%; } .mock__w100 { width: 100%; }

.mock__title {
  height: 15px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--ink) 0%, #2A3E63 100%);
}

.mock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin-top: .75rem;
}

.mock__card {
  padding: .7rem .6rem;
  background: var(--paper);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xs), inset 0 0 0 1px var(--line-soft);
}

.mock__sq {
  width: 16px; height: 16px;
  margin-bottom: .5rem;
  border-radius: 5px;
  background: var(--blue-tint);
  box-shadow: inset 0 0 0 1px var(--blue-line);
}

/* Sanftes Atmen — deutet Interaktivität an, ohne abzulenken */
.mock__card:nth-child(1) { animation: breathe 5.5s var(--ease-soft) infinite; }
.mock__card:nth-child(2) { animation: breathe 5.5s var(--ease-soft) .5s infinite; }
.mock__card:nth-child(3) { animation: breathe 5.5s var(--ease-soft) 1s infinite; }

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Schwebende Kennkarte, die das Mockup überlappt (Z-Achse) */
.mock__badge {
  position: absolute;
  right: clamp(-.5rem, -2vw, .5rem);
  bottom: -1.4rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1.1rem;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(11, 26, 51, .08), var(--sh-lg);
}

.mock__badge-num {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--blue);
  line-height: 1;
}
.mock__badge-txt { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.35; }

@media (max-width: 560px) {
  .mock__badge { right: .5rem; bottom: -1.1rem; padding: .65rem .9rem; }
  .mock__badge-num { font-size: 1.25rem; }
}


/* ==========================================================================
   11  KENNZAHLEN-BAND
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}

.stat {
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  background: var(--paper);
}

.stat__num {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
}
.stat__num .unit { color: var(--blue); }

.stat__lab { margin-top: .55rem; font-size: var(--t-sm); color: var(--ink-mute); }

/* Bei drei Kacheln direkt auf eine Spalte — zwei Spalten liessen eine
   allein in der zweiten Zeile stehen. */
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }


/* ==========================================================================
   12  LEISTUNGEN — asymmetrisches Bento-Raster
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s3);
}

.bento__item { grid-column: span 4; }
.bento__item--wide  { grid-column: span 8; }
.bento__item--half  { grid-column: span 6; }
.bento__item--full  { grid-column: span 12; }

.card-body { display: flex; flex-direction: column; height: 100%; }
.card-body h3 { margin: var(--s3) 0 .6rem; }
.card-body p  { font-size: var(--t-sm); }

/* Aufzählung mit Häkchen */
.checks { display: grid; gap: .7rem; margin-top: var(--s3); }
.checks li {
  display: flex;
  gap: .65rem;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.checks svg {
  width: 17px; height: 17px;
  flex: none;
  margin-top: .18rem;
  color: var(--blue);
}
.on-dark .checks svg { color: var(--on-dark-acc); }

.checks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem var(--s3); }

@media (max-width: 900px) {
  .bento__item,
  .bento__item--wide,
  .bento__item--half { grid-column: span 6; }
}

@media (max-width: 680px) {
  .bento { gap: var(--s2); }
  .bento__item,
  .bento__item--wide,
  .bento__item--half,
  .bento__item--full { grid-column: span 12; }
  .checks--two { grid-template-columns: 1fr; }
}


/* ==========================================================================
   13  ABLAUF — 7-Tage-Zeitstrahl
   ========================================================================== */

.flow { display: grid; gap: var(--s3); }

.step {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s4);
  align-items: start;
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }

.step__when {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: .3rem;
}

/* Reine Auszeichnung, kein Bedienelement — deshalb bewusst ohne Hover-
   Zustand. Ein aufleuchtender Punkt sieht aus wie ein Knopf, der sich
   anklicken lässt, und hier gibt es nichts zu klicken. */
.step__marker {
  width: 10px; height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--blue);
}

.step__title { margin-bottom: .5rem; }
.step__text { font-size: var(--t-sm); max-width: 62ch; }

.step__you {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: var(--s2);
  padding: .3rem .7rem;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-mute);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
}
.step__you svg { width: 14px; height: 14px; color: var(--blue); }

@media (max-width: 720px) {
  .step { grid-template-columns: 1fr; gap: var(--s2); }
  .step__when { padding-top: 0; }
}


/* ==========================================================================
   14  PREISE
   ========================================================================== */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-items: start;
  max-width: 58rem;          /* zwei Karten sollen nicht die volle Breite fluten */
  margin-inline: auto;
}

.plan__name {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin: var(--s2) 0 .35rem;
}
.plan__from { font-size: var(--t-sm); color: var(--ink-mute); }
.plan__amount {
  font-size: clamp(2.2rem, 1.7rem + 1.7vw, 3rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--ink);
}
.plan__vat { font-size: var(--t-xs); color: var(--ink-mute); }

.plan__for {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}

.plan__cta { margin-top: var(--s4); }
.plan__cta .btn { width: 100%; justify-content: space-between; }

/* Hervorgehobenes Paket */
.plan-shell--featured {
  --shell-bg: var(--blue);
  --shell-ring: rgba(255, 255, 255, .22);
  box-shadow: var(--sh-blue), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.plan-shell--featured > .core { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }

.plan__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .4rem 0 .55rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.plan__flag svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}

/* Zusatzleistungen — zwei Spalten, in jeder eine eigene Liste mit Trennlinien */
.addons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s6);
}

.addon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
}
.addon + .addon { border-top: 1px solid var(--line); }

/* Der zweite Eintrag steht oben in der rechten Spalte und braucht dort
   keine Trennlinie über sich. */
.addons .addon:nth-child(2) { border-top: 0; }

.addon__name  { font-weight: 500; color: var(--ink); font-size: var(--t-sm); }
.addon__desc  { font-size: var(--t-xs); color: var(--ink-mute); margin-top: .2rem; }
.addon__price { font-size: var(--t-sm); font-weight: 600; color: var(--blue); white-space: nowrap; }

@media (max-width: 720px) {
  .addons { grid-template-columns: 1fr; }
  .addons .addon:nth-child(2) { border-top: 1px solid var(--line); }
}


/* ==========================================================================
   15  VORLAGEN / PROJEKTE
   ========================================================================== */

.works { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.work { position: relative; }

.work__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--r-xl) - var(--shell-pad));
  overflow: hidden;
  background: var(--paper-2);
}

.work__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.1s var(--ease);
}

.shell--lift:hover .work__frame img { transform: scale(1.035); }

/* Live-Vorschau: die Vorlage selbst, verkleinert im Rahmen.
   Der Trick ohne JavaScript — das iframe ist 250 % breit und wird auf 0,4
   herunterskaliert. 250 % × 0,4 = exakt die Rahmenbreite. Dadurch sieht das
   iframe innen einen Viewport von 2,5-facher Kartenbreite und rendert das
   Desktop-Layout, statt die mobile Ansicht zu zeigen. */
.work__live {
  position: absolute;
  top: 0;
  left: 0;
  width: 250%;
  height: 250%;
  border: 0;
  transform: scale(.4);
  transform-origin: top left;
  pointer-events: none;          /* Klicks gehen an den Link darüber */
  transition: transform 1.1s var(--ease);
}

.shell--lift:hover .work__live { transform: scale(.4) translateY(-1.2%); }

/* Deckt das iframe ab, damit der Rahmen klickbar bleibt (Vorlagen-Seite,
   dort gibt es zusätzlich einen sichtbaren Knopf darunter) */
.work__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Auf der Startseite ist die ganze Kachel klickbar. Der Titel ist der
   eigentliche Link; sein ::after legt sich unsichtbar über die komplette
   Karte. Das ist besser als ein <a> um alles herum: Screenreader lesen
   einen sauberen Linktext statt der ganzen Kachel vor — und der Pfeil
   rechts oben wird mit angeklickt, was vorher nicht ging. */
.work .core { position: relative; }

.work__link { color: inherit; }
.work__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.work__link:focus-visible { outline: none; }
.work__link:focus-visible::after {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
  border-radius: calc(var(--r-xl) - var(--shell-pad));
}
.shell--lift:hover .work__link { color: var(--blue); }

.work__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s1);
}

.work__branch {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.work__name { margin-top: .5rem; }
.work__desc { margin-top: .5rem; font-size: var(--t-sm); }

.work__go {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--blue-line);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.work__go svg { width: 15px; height: 15px; }
.shell--lift:hover .work__go { transform: translate(3px, -3px); background: var(--blue-tint-2); }

.work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0 var(--s3) var(--s3);
}

.tag {
  padding: .28rem .65rem;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  background: var(--paper-2);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Zwei nebeneinander ab Tablet */
.works--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .works--grid { grid-template-columns: 1fr; } }

/* Erste Vorlage über die volle Breite */
.work--lead { grid-column: 1 / -1; }
.work--lead .work__frame { aspect-ratio: 21 / 9; }
@media (max-width: 820px) { .work--lead .work__frame { aspect-ratio: 16 / 10; } }

/* Schaufenster auf der Vorlagen-Seite: Vorschau und Beschreibung
   nebeneinander, jede zweite Zeile seitenverkehrt. */
.showcase { display: grid; gap: clamp(3rem, 2rem + 4.5vw, 6.5rem); }

.showcase__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.showcase__row:nth-child(even) .showcase__visual { order: 2; }

.showcase__visual { position: relative; }
.showcase__visual .work__frame { aspect-ratio: 16 / 10; }

.showcase__no {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-mute);
}

@media (max-width: 900px) {
  .showcase__row { grid-template-columns: 1fr; }
  .showcase__row:nth-child(even) .showcase__visual { order: 0; }
}


/* ==========================================================================
   16  VERGLEICH
   ========================================================================== */

/* minmax(0, 1fr) statt 1fr: sonst zieht der breiteste Inhalt — hier der
   Knopf mit nowrap — die Spalte über die Containerbreite hinaus. */
.versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.vs__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.vs__head h3 { font-size: var(--t-h4); }

.vs__icon {
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  flex: none;
  border-radius: 50%;
}
.vs__icon svg { width: 15px; height: 15px; }

.vs__icon--no  { color: var(--ink-mute); background: var(--paper-3); }
.vs__icon--yes { color: #fff; background: var(--blue); }

.vs__list { display: grid; gap: .8rem; font-size: var(--t-sm); }
.vs__list li { display: flex; gap: .65rem; }
.vs__list svg { width: 16px; height: 16px; flex: none; margin-top: .2rem; }
.vs--no  .vs__list svg { color: var(--ink-mute); }
.vs--yes .vs__list svg { color: var(--blue); }

@media (max-width: 900px) { .versus { grid-template-columns: 1fr; } }


/* ==========================================================================
   17  FAQ — Akkordeon
   ========================================================================== */

.faq { display: grid; }

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--blue); }

.faq__sign {
  position: relative;
  width: 2rem; height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 1.6px;
  border-radius: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item[open] .faq__sign { background: var(--blue-tint); transform: rotate(180deg); }
.faq__item[open] .faq__sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

.faq__a {
  padding-bottom: var(--s4);
  max-width: 68ch;
  font-size: var(--t-sm);
  animation: faqIn .5s var(--ease-out) both;
}
.faq__a p + p { margin-top: var(--s2); }

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   18  KONTAKT & FORMULAR
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Direkte Kontaktwege als Kacheln */
.ways { display: grid; gap: var(--s2); }

.way {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-xs);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.way:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--blue-line), var(--sh-md); }

/* min-width: 0 hebt die Standard-Mindestbreite von Flex-Kindern auf,
   sonst kann die mittlere Spalte nicht schrumpfen. */
.way > span { min-width: 0; }

.way__lab { font-size: var(--t-xs); color: var(--ink-mute); }

/* overflow-wrap: anywhere statt break-word — nur „anywhere“ senkt auch die
   berechnete Mindestbreite. Ohne das zieht die lange E-Mail-Adresse die
   ganze Rasterspalte auf und die Seite laeuft bei 320 px seitlich über. */
.way__val {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}
.way__go { margin-left: auto; color: var(--ink-mute); }
.way__go svg { width: 16px; height: 16px; }
.way:hover .way__go { color: var(--blue); }

/* Formular */
.form { display: grid; gap: var(--s3); }

/* min-width: 0 an mehreren Stellen: Formularfelder bringen eine eingebaute
   Mindestbreite mit — beim <select> ist das die Breite der laengsten Option
   („Nur ein Angebot, noch unentschlossen“). Ohne diese Zeilen zieht das
   Auswahlfeld die gesamte Rasterspalte auf und die Kontaktseite laeuft auf
   schmalen Handys seitlich über. */
.field { display: grid; gap: .45rem; min-width: 0; }

.field__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}
.field__hint { font-size: var(--t-xs); color: var(--ink-mute); }

.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  padding: .85rem 1rem;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: #97A3B8; }

.field input:hover,
.field textarea:hover,
.field select:hover { box-shadow: inset 0 0 0 1px var(--blue-line); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px var(--blue-tint);
}

.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2363728D' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px;
  padding-right: 2.6rem;
}

/* --- Sterne-Bewertung ----------------------------------------------------
   Ohne JavaScript. Der Kniff: die Radiofelder stehen im Quelltext von 5 nach
   1, die Reihe wird per row-reverse umgedreht dargestellt. Dadurch trifft
   `input:checked ~ label` genau die Sterne, die visuell links davon stehen —
   die Nachbar-Auswahl im CSS kann nämlich nur nach hinten greifen. */

.rating {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;        /* fieldset ist sonst mindestens so breit wie sein Inhalt */
}

.rating__stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: .2rem;
  margin-top: .5rem;
}

/* Die Radiofelder selbst sind unsichtbar, bedient wird über die Labels */
.rating__stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rating__stars label {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--blue-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--dur) var(--ease), transform .18s var(--ease-out);
}
.rating__stars label svg { width: 26px; height: 26px; }

.rating__stars label:hover,
.rating__stars label:hover ~ label,
.rating__stars input:checked ~ label { color: var(--blue); }

.rating__stars label:hover { transform: scale(1.12); }
.rating__stars label:active { transform: scale(.94); }

.rating__stars input:focus-visible + label {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Auf schmalen Handys passen fünf Sterne à 2,5rem nicht mehr in die Karte —
   sie werden kleiner statt umzubrechen, die Tippfläche bleibt aber groß
   genug für einen Daumen. */
@media (max-width: 420px) {
  .rating__stars { gap: .1rem; }
  .rating__stars label { width: 2.3rem; height: 2.3rem; }
  .rating__stars label svg { width: 23px; height: 23px; }
}

/* Kontrollkästchen */
.check-field {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  cursor: pointer;
}
.check-field input {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: .15rem;
  accent-color: var(--blue);
  cursor: pointer;
}

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form__note {
  display: flex;
  gap: .6rem;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  line-height: 1.55;
}
.form__note svg { width: 15px; height: 15px; flex: none; margin-top: .12rem; color: var(--blue); }

/* Honigtopf gegen Formular-Spam — für Menschen unsichtbar */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   19  CTA-BAND
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--ink);
  box-shadow: var(--sh-lg);
}

.cta::before {
  content: '';
  position: absolute;
  top: -55%;
  right: -8%;
  width: min(46rem, 90%);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(78, 130, 255, .30), rgba(78, 130, 255, 0) 70%);
  pointer-events: none;
}

.cta::after {
  content: '';
  position: absolute;
  bottom: -60%;
  left: -10%;
  width: min(38rem, 80%);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(23, 72, 196, .32), rgba(23, 72, 196, 0) 70%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  padding: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  text-align: center;
}
.cta__inner .lead { max-width: 52ch; margin-inline: auto; }
.cta__inner .btn-row { justify-content: center; }


/* ==========================================================================
   20  FOOTER
   ========================================================================== */

.footer {
  padding-top: var(--sp-half);
  padding-bottom: var(--s4);
  background: var(--ink);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--on-dark-line);
}

.footer__brandcol { max-width: 30ch; }
.footer__brandcol .brand { color: #fff; margin-bottom: var(--s2); }
.footer__brandcol p { font-size: var(--t-sm); color: var(--on-dark-mute); }

.footer__h {
  margin-bottom: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-acc);
}

.footer__list { display: grid; gap: .6rem; font-size: var(--t-sm); }
.footer__list a,
.footer__list span { color: var(--on-dark-mute); transition: color var(--dur) var(--ease); }
.footer__list a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-top: var(--s4);
  font-size: var(--t-xs);
  color: var(--on-dark-mute);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s3); }
.footer__legal a { transition: color var(--dur) var(--ease); }
.footer__legal a:hover { color: #fff; }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brandcol { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--s4); }
}


/* ==========================================================================
   21  DUNKLE BEREICHE
   Ein einziger Schalter: die Klasse .on-dark stellt Text, Linien und
   Icons in einem Abschnitt geschlossen um.
   ========================================================================== */

.on-dark { color: var(--on-dark-mute); }

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.on-dark .display, .on-dark strong, .on-dark b { color: var(--on-dark); }

.on-dark .lead    { color: var(--on-dark-soft); }
.on-dark .muted   { color: var(--on-dark-mute); }
.on-dark .accent  { color: var(--on-dark-acc); }
.on-dark .quiet   { color: var(--on-dark-mute); }
.on-dark .rule    { background: var(--on-dark-line); }
.on-dark .link    { color: var(--on-dark-acc); background-image: linear-gradient(var(--on-dark-acc), var(--on-dark-acc)); }
.on-dark .stat__num { color: var(--on-dark); }
.on-dark .stat__num .unit { color: var(--on-dark-acc); }
.on-dark .tag { color: var(--on-dark-mute); background: var(--on-dark-fill); box-shadow: inset 0 0 0 1px var(--on-dark-line); }


/* ==========================================================================
   22  SCROLL-ANIMATIONEN
   Werden erst aktiv, wenn <html class="js"> gesetzt ist. Ohne JavaScript
   ist alles sofort sichtbar.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  filter: blur(6px);
  transition:
    opacity   .85s var(--ease-out),
    transform .85s var(--ease-out),
    filter    .85s var(--ease-out);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Gestaffelt für Gruppen */
.js .reveal[data-delay='1'] { transition-delay: .08s; }
.js .reveal[data-delay='2'] { transition-delay: .16s; }
.js .reveal[data-delay='3'] { transition-delay: .24s; }
.js .reveal[data-delay='4'] { transition-delay: .32s; }
.js .reveal[data-delay='5'] { transition-delay: .40s; }


/* ==========================================================================
   23  RECHTSTEXTE — Prosa für Impressum und Datenschutz
   ========================================================================== */

.prose { max-width: 72ch; }
.prose h2 { margin: var(--s6) 0 var(--s2); font-size: var(--t-h3); }
.prose h3 { margin: var(--s4) 0 var(--s1); font-size: var(--t-h4); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p  { margin-bottom: var(--s2); font-size: var(--t-sm); }
.prose ul { margin: 0 0 var(--s2) 0; display: grid; gap: .5rem; }
.prose ul li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-sm);
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue-line);
}
.prose a { color: var(--blue); font-weight: 500; }
.prose a:hover { text-decoration: underline; }

.notice {
  display: flex;
  gap: var(--s2);
  padding: var(--s3);
  margin-bottom: var(--s4);
  font-size: var(--t-sm);
  background: #FFF9EC;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px #F2E3BC;
}
.notice svg { width: 19px; height: 19px; flex: none; margin-top: .1rem; color: #B37A00; }


/* ==========================================================================
   24  HILFSKLASSEN
   ========================================================================== */

.center { text-align: center; }
.center-row { justify-content: center; }
.mt-4 { margin-top: var(--s3); }
.mt-5 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s5); }

.page-head {
  padding-top: clamp(8rem, 6.5rem + 7vw, 11rem);
  padding-bottom: var(--sp-half);
}

.crumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--s3);
  font-size: var(--t-xs);
  color: var(--ink-mute);
}
.crumb a { transition: color var(--dur) var(--ease); }
.crumb a:hover { color: var(--blue); }
.crumb svg { width: 14px; height: 14px; }


/* ==========================================================================
   Bewegung reduzieren — Systemeinstellung respektieren
   ========================================================================== */

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

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1; transform: none; filter: none; }
}