/* =============================================================================
   Workmade, styles.css
   Gemeinsames Stylesheet für alle Seiten.

   Aufbau:  1 Tokens · 2 Reset/Base · 3 Layout · 4 Buttons · 5 Header
            6 Hero · 7 Leistungen · 8 Ablauf · 9 Pakete · 10 Zahlen
            11 Referenzen · 12 FAQ · 13 Kontakt · 14 Footer
            15 Unterseiten · 16 Animationen · 17 Feinschliff fürs Handy

   Mobile-first: Die Basis-Regeln gelten fürs Handy,
   Media-Queries erweitern nach oben.
   ============================================================================= */

/* --- 1. Design-Tokens (hier zentral Farben, Abstände, Schriften ändern) ----- */
:root {
  /* Markenfarben. Diese vier hat der Kunde vorgegeben, nicht abweichen. */
  --ink:        #00315A;   /* Hauptfarbe: Wortmarke, Headlines, Footer */
  --accent:     #00649A;   /* Buttons, Links, Akzente */
  --bg:         #FFFFFF;   /* Seitenhintergrund */
  --muted:      #4F5B61;   /* Fließtext, kleine Texte */

  /* Daraus abgeleitet. Alles hier ist eine Aufhellung oder Abdunklung
     der vier Farben oben, damit nichts fremd wirkt. */
  --accent-dk:  #004F79;   /* Hover: Akzent auf 78 Prozent Helligkeit */
  --surface:    #F3F6FA;   /* sanfter Sektions-Hintergrund, Formularfelder */
  --line:       #E0E5EB;   /* feine Linien und Rahmen */
  --line-dk:    #C8D3DF;   /* dieselbe Linie eine Stufe kräftiger, für Hover */
  --sky:        #8ECAE6;   /* heller Akzent auf dunklem Grund */

  /* Dunkle Sektionen: fast schwarz mit leichtem Blaustich,
     damit sie zur Marke passen statt fremd zu wirken. */
  --night:      #06101A;
  --night-card: #0C1C2B;
  --night-line: rgba(255, 255, 255, .10);
  --night-text: rgba(255, 255, 255, .66);

  /* Typografie */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Radien & Schatten (bewusst sparsam) */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-md: 0 18px 40px -22px rgba(0, 49, 90, .35);
  --shadow-lg: 0 30px 70px -40px rgba(0, 49, 90, .45);

  /* Maße. Die Abstände sind bewusst großzügig: Weißraum ist das,
     was eine Seite teuer aussehen lässt. */
  --header-h:  64px;
  --gutter:    24px;
  --maxw:      1120px;
  --section-y: 112px;
  /* Abstand ueber UND unter dem Seitenkopf. Beide Seiten gleich gross,
     damit der Kopf sauber gerahmt wirkt. */
  --head-pad:  72px;
}

@media (min-width: 768px) {
  :root { --header-h: 78px; --gutter: 40px; --section-y: 168px; --head-pad: 112px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 56px; --section-y: 200px; }
}

/* --- 2. Reset & Basis ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  /* Sicherung gegen horizontales Scrollen. Das Layout braucht sie nicht,
     sie verhindert aber jede Überraschung auf sehr schmalen Geräten. */
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Nichts darf breiter werden als sein Container */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }
table { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 .58em;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 9vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  hyphens: auto;  /* Sicherheitsnetz für sehr lange Wörter */
}
h2 {
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
h3 { font-size: clamp(1.1rem, 3.2vw, 1.3rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dk); }

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

/* Ruhiger, gut sichtbarer Fokusring für Tastaturbedienung */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* Sprunglink "Zum Inhalt", erscheint nur bei Tastaturfokus */
.skip-link {
  position: absolute;
  left: 8px; top: -64px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; color: #fff; }

/* --- 3. Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Notch und abgerundete Ecken im Querformat berücksichtigen */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

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

/* Was direkt auf den Seitenkopf folgt, ruecht nur um --head-pad nach,
   nicht um einen ganzen Sektionsabstand. Sonst klafft dort doppelt so
   viel Luft wie zwischen zwei normalen Sektionen. */
.hero + *,
.page-hero + * { padding-top: var(--head-pad); }
.section--surface { background: var(--surface); }

/* Zwei Sektionen, die inhaltlich zusammengehoeren, teilen sich EINEN
   Sektionsabstand statt zwei. Normal stossen unten 112px und oben noch
   einmal 112px aneinander (Desktop 168 + 168), das sind unter einem kurzen
   Schlusssatz sichtbar zu viel. Verwendet auf ablauf.html zwischen der
   Zeitleiste und dem Zeitplan darunter. */
.section--join            { padding-bottom: calc(var(--section-y) * .36); }
.section--join + .section { padding-top:    calc(var(--section-y) * .64); }

/* Dunkle Sektion. Alle Textfarben werden hier einmal zentral umgestellt. */
.section--night {
  position: relative;
  background: var(--night);
  color: var(--night-text);
  overflow: hidden;
}
.section--night h2,
.section--night h3 { color: #fff; }
.section--night .eyebrow { color: var(--sky); }
.section--night .check li::before { border-color: var(--sky); }
.section--night a:not(.btn) { color: var(--sky); }


/* Feiner Lichtschein an der Oberkante der dunklen Sektion */
.section--night::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(142, 202, 230, .45), transparent);
}

/* Anker-Ziele nicht unter den Sticky-Header rutschen lassen */
section[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Kleine Zeile über der Überschrift. Zentriert, deshalb Linien links UND rechts. */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}

/* Überschriftenblock. Grundsätzlich zentriert, so wie gewünscht. */
.section-head {
  max-width: 44rem;
  margin: 0 auto 64px;
  text-align: center;
}
.section-head p {
  font-size: 1.05rem;
  max-width: 36rem;
  margin-inline: auto;
}
@media (min-width: 768px) { .section-head { margin-bottom: 88px; } }

/* Zentrierter Abschluss-Link unter einer Sektion */
.section-more {
  margin-top: 44px;
  text-align: center;
}

/* Wiederverwendbares Raster. minmax(0, 1fr) verhindert Grid-Überlauf. */
.grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px)  { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Karten-Raster: auf dem Handy eine Karte pro Reihe, groß und ruhig. */
.cards {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
}

/* --- 4. Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease,
              box-shadow .25s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px -14px rgba(0, 100, 154, .9);
}
.btn--primary:hover {
  background: var(--accent-dk);
  color: #fff;
  box-shadow: 0 14px 32px -14px rgba(0, 100, 154, .95);
}

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--line-dk); }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #002341; color: #fff; }

/* Heller Button auf dunklem Grund */
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sky); color: var(--ink); }

/* Umrandeter Button auf dunklem Grund */
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn--outline:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }

/* Etwas größer für die Hauptaktion, aber bewusst NICHT über die volle Breite */
.btn--lg { padding: 17px 36px; font-size: 1rem; }

/* Nur dort, wo die Breite vom Container kommen soll (Preiskarten) */
.btn--block { width: 100%; }

/* Pfeil, der beim Hover ein Stück wandert */
.btn--arrow::after {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-left: -1px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.btn--arrow:hover::after { transform: rotate(45deg) translate(3px, -3px); }

/* Buttonreihe, standardmäßig zentriert */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.btn-row--left { justify-content: flex-start; }

/* Textlink mit Pfeil, für "mehr dazu" */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-block: 10px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
}
.link-more::after {
  content: "";
  width: 7px; height: 7px;
  border-top: 1.7px solid var(--accent);
  border-right: 1.7px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.link-more:hover { color: var(--accent); }
.link-more:hover::after { transform: rotate(45deg) translateX(3px); }
.section--night .link-more { color: #fff; }
.section--night .link-more::after { border-color: var(--sky); }

/* --- 5. Header / Navigation ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px -20px rgba(0, 49, 90, .5);
}

.header-inner {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Wortmarke: reine Schrift, kein Icon, kein Bild */
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand .brand-accent { color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}


/* Nur drei Striche, kein Rahmen. Die Flaeche bleibt 44px gross,
   damit sie gut zu treffen ist, sichtbar sind aber nur die Striche. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 22px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Ausklappbares Menü (Handy).
   Bewusst in --surface statt Weiß, damit es sich sichtbar vom
   Seitenhintergrund abhebt und nicht mit ihm verschwimmt. */
.site-nav {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  display: grid;
  grid-template-rows: 0fr;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1),
              opacity .22s ease,
              visibility 0s linear .34s;
}
.site-nav[data-open="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1),
              opacity .22s ease,
              visibility 0s;
}
.nav-inner { overflow: hidden; }

.nav-list {
  display: flex;
  flex-direction: column;
  padding: 10px var(--gutter) 24px;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.nav-list a {
  display: block;
  padding: 14px 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--line);
}
.nav-list a:hover { color: var(--accent); }
.nav-list li:last-child a { border-bottom: 0; }
/* Aktuelle Seite dezent markiert */
.nav-list a[aria-current="page"] { color: var(--accent); }

/* Alle Menuepunkte sind gleichwertige Textlinks, keine Buttons. */

/* Menüpunkte laufen beim Öffnen nacheinander ein */
.site-nav[data-open="true"] .nav-list li {
  animation: nav-item-in .38s cubic-bezier(.2, .75, .25, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms + 70ms);
}
.nav-list li:nth-child(1) { --i: 0; }
.nav-list li:nth-child(2) { --i: 1; }
.nav-list li:nth-child(3) { --i: 2; }
.nav-list li:nth-child(4) { --i: 3; }
.nav-list li:nth-child(5) { --i: 4; }
.nav-list li:nth-child(6) { --i: 5; }

@keyframes nav-item-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Desktop: Links direkt sichtbar, Hamburger ausgeblendet */
@media (min-width: 940px) {
  .nav-toggle { display: none; }
  .header-actions { gap: 0; }
  .site-nav {
    position: static;
    display: block;
    grid-template-rows: none;
    opacity: 1;
    visibility: visible;
    transition: none;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-inner { overflow: visible; }
  .site-nav[data-open="true"] .nav-list li { animation: none; }
  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 0;
  }
  .nav-list a {
    padding: 6px 0;
    border-bottom: 0;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--muted);
  }
  .nav-list a:hover { color: var(--ink); }

}

/* --- 6. Hero --------------------------------------------------------------- */
/* SEITENANFANG. Jede Seite beginnt exakt gleich: gleicher Abstand nach
   oben, gleiche Eyebrow, gleiche h1-Größe, gleicher Abstand nach unten.
   Gilt für die Startseite (.hero) und alle Unterseiten (.page-hero). */
.hero,
.page-hero {
  position: relative;
  padding-top: var(--head-pad);
  /* KEIN padding-bottom. Den Abstand nach unten liefert die naechste
     Sektion mit ihrem eigenen padding-top. Beides zusammen waere
     doppelt so viel Leerraum wie zwischen allen anderen Sektionen. */
  padding-bottom: 0;
  overflow: hidden;
  text-align: center;
}
/* Steht der Seitenkopf allein (Danke-Seite), braucht er den Abstand doch */
main > .page-hero:last-child { padding-bottom: var(--section-y); }

/* Der Hero der Startseite ist die EINZIGE Ausnahme von "kein padding-bottom".
   Darunter beginnt die dunkle Leistungs-Sektion, und die Farbkante soll
   nicht direkt am Button "Angebot anfordern" kleben. Diese 72px (Handy)
   beziehungsweise 112px (Desktop) sind weiss und schieben die Kante nach
   unten. Auf den Unterseiten folgt Weiss auf Weiss, dort gibt es keine
   Kante und der Abstand waere nur unnoetige Luft. */
.hero { padding-bottom: var(--head-pad); }
.hero > .container,
.page-hero > .container { position: relative; }

.hero-inner { max-width: 50rem; margin-inline: auto; }

/* Gleicher Abstand unter jeder Seitenüberschrift */
.hero h1,
.page-hero h1 { margin-bottom: 24px; }

/* Gleicher Einleitungstext auf allen Seiten */
.hero-sub,
.page-hero .lead {
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  max-width: 34rem;
  margin-inline: auto;
}
.hero-sub { margin-bottom: 40px; }
.page-hero .lead { margin-bottom: 0; }
.hero-sub strong { color: var(--ink); font-weight: 600; }

/* Zwei langsam driftende Farbschleier im Hintergrund.
   Tempo bewusst niedrig: soll man kaum bemerken, nur spüren.
   AUSDRUECKLICH GEWUENSCHT. Sie waren einmal entfernt, der Kunde wollte
   sie zurueck. Nicht wieder anfassen. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.hero::before {
  top: -220px; right: -160px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(0, 100, 154, .20), rgba(0, 100, 154, 0) 68%);
  animation: drift-a 18s ease-in-out infinite alternate;
}
.hero::after {
  bottom: -280px; left: -180px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0, 49, 90, .13), rgba(0, 49, 90, 0) 70%);
  animation: drift-b 22s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-40px, 30px, 0) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(50px, -30px, 0) scale(1.08); }
}


/* Headline fliegt Wort für Wort ein: leicht unscharf und von unten.
   Reine CSS-Animation, läuft also auch ohne JavaScript.
   Der Versatz je Wort kommt aus --i im HTML. */
.hero h1 .w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(22px);
  animation: word-in .75s cubic-bezier(.2, .75, .25, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
@keyframes word-in {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Eyebrow, Subline und Button folgen gestaffelt nach */
.hero-anim {
  opacity: 0;
  transform: translateY(16px);
  animation: rise-in .7s cubic-bezier(.2, .75, .25, 1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes rise-in {
  to { opacity: 1; transform: none; }
}




/* --- Scroll-Fortschritt ---------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 150;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;   /* eigene Ebene, wird beim Scrollen laufend gesetzt */
}

/* --- 7. Leistungen --------------------------------------------------------- */
.svc-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 24px;
  border-radius: 16px;
  background: rgba(0, 100, 154, .16);
  border: 1px solid rgba(142, 202, 230, .22);
  transition: transform .3s ease, background-color .3s ease;
}
.svc-icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--sky);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service:hover .svc-icon {
  transform: translateY(-2px) scale(1.06);
  background: rgba(0, 100, 154, .26);
}

.service {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 30px;
  background: var(--ink);   /* dieselbe Farbe wie der Footer */
  border: 1px solid var(--night-line);
  border-radius: var(--r-lg);
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.service:hover {
  border-color: rgba(142, 202, 230, .38);
  transform: translateY(-4px);
}

/* Spotlight folgt dem Mauszeiger (Position kommt aus script.js).
   Auf Touch-Geräten passiert schlicht nichts. */
.service::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
    rgba(0, 100, 154, .30), transparent 62%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.service:hover::after { opacity: 1; }

/* Farben direkt an der Karte, nicht an der Sektion. So bleibt die Karte
   dunkelblau, egal ob die Sektion hell oder dunkel ist. */
.service h3 { font-size: 1.32rem; margin-bottom: 12px; color: #fff; }
.service > p { color: var(--night-text); }
.service .check li::before { border-color: var(--sky); }
.service > p { font-size: .97rem; margin-bottom: 24px; }
.service .check {
  display: inline-block;
  text-align: left;
  padding-top: 22px;
  border-top: 1px solid var(--night-line);
}
.service .check li { color: var(--night-text); }

/* Häkchen-Liste, rein per CSS gezeichnet. Keine Icons, keine Emojis. */
.check li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: .94rem;
  white-space: nowrap;   /* Stichpunkte bleiben einzeilig */
}
.check li:last-child { margin-bottom: 0; }
.check li::before {
  content: "";
  position: absolute;
  left: 2px; top: .8em;
  width: 10px; height: 5.5px;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: translateY(-50%) rotate(-45deg);
}

/* --- 8. Ablauf ------------------------------------------------------------- */
/* Zeitleiste. Laeuft auf ALLEN Breiten senkrecht nach unten und ist
   bewusst lang gezogen, damit man beim Lesen scrollt. Die Linie fuellt
   sich dabei mit --fill (kommt aus script.js). */
.steps {
  position: relative;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  max-width: 42rem;
  margin-inline: auto;
  counter-reset: step;
}

/* Durchgehende Linie hinter allen Schritten */
.steps-line {
  position: absolute;
  left: 23px; top: 46px; bottom: 46px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.steps-line span {
  display: block;
  width: 100%; height: 100%;
  background: var(--accent);
  transform-origin: top center;
  transform: scaleY(var(--fill, 0));
  /* Bewusst OHNE CSS-transition. Eine feste Uebergangsdauer wuerde bei
     jedem neuen Wert von vorn starten und die Linie ruckeln lassen.
     Geglaettet wird stattdessen in script.js, Abschnitt 4: dort naehert
     sich der Wert in jedem einzelnen Bild ein Stueck dem Ziel an. */
  will-change: transform;   /* eigene Ebene, spart Neuzeichnen pro Bild */
}
@media (min-width: 768px) {
  .steps-line { left: 28px; top: 56px; bottom: 56px; }
}
.section--night .steps-line { background: var(--night-line); }
.section--night .steps-line span { background: var(--sky); }

.step {
  position: relative;
  counter-increment: step;
  padding: 0 0 164px 68px;
}
.step:last-child { padding-bottom: 0; }
@media (min-width: 768px) {
  .step { padding: 0 0 228px 96px; }
}

/* Nummernkreis */
.step::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--accent);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
@media (min-width: 768px) {
  .step::before { width: 56px; height: 56px; font-size: 1.05rem; }
}

/* Erreichter Schritt wird gefuellt (Klasse kommt aus script.js) */
.step.is-reached::before {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.section--night .step::before {
  background: var(--night-card);
  border-color: var(--night-line);
  color: var(--sky);
}
.section--night .step.is-reached::before {
  background: var(--sky);
  border-color: var(--sky);
  color: var(--night);
}

/* Inhalt jedes Schritts blendet beim Erreichen weich ein */
.js .step .step-body {
  opacity: .38;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .75, .25, 1);
}
.js .step.is-reached .step-body { opacity: 1; transform: none; }

.step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.step p { font-size: .97rem; max-width: 34rem; }
@media (min-width: 768px) {
  .step h3 { font-size: 1.35rem; margin-bottom: 12px; }
  .step p { font-size: 1.02rem; }
}

/* --- 9. Pakete ------------------------------------------------------------- */
.plans {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 30px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
@media (min-width: 900px) { .plan { padding: 52px 34px; } }

/* Mittlere Karte optisch hervorgehoben */
.plan--featured {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--night-text);
  box-shadow: var(--shadow-lg);
}
.plan--featured h3,
.plan--featured .plan-price { color: #fff; }
.plan--featured .plan-kicker { color: var(--sky); }
.plan--featured .check li { color: var(--night-text); }
.plan--featured .check li::before { border-color: var(--sky); }
.plan--featured hr { border-top-color: rgba(255, 255, 255, .16); }

.plan-flag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin-bottom: 16px;
  padding: 0 12px;
  background: var(--sky);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
/* Ab Desktop halten die anderen Karten die Höhe des Flags frei,
   damit Titel und Preise auf einer Linie stehen. */
@media (min-width: 900px) {
  .plan:not(.plan--featured)::before {
    content: "";
    display: block;
    height: 26px;
    margin-bottom: 16px;
  }
}

.plan-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  white-space: nowrap;
}

.plan h3 { font-size: 1.2rem; margin-bottom: 16px; }
@media (min-width: 900px) { .plan h3 { min-height: 2.28em; } }

.plan-price {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.3rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.035em;
  line-height: 1.1;
  white-space: nowrap;
}
.plan-price small {
  display: block;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
  opacity: .75;
  margin-top: 6px;
  white-space: nowrap;
}

.plan hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}

.plan .check { display: inline-block; text-align: left; margin-bottom: 30px; }
.plan .btn { margin-top: auto; }

.plans-note {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-size: .95rem;
  text-align: center;
}
.plans-note strong { color: var(--ink); font-weight: 600; }

/* Zahlen-Block links und rechts eingerückt, damit er nicht am Rand klebt */
.stats-inset { padding-inline: 12px; }
@media (min-width: 768px)  { .stats-inset { padding-inline: 32px; } }
@media (min-width: 1100px) { .stats-inset { padding-inline: 56px; } }

/* --- 10. Zahlen ------------------------------------------------------------ */
.stat {
  padding: 26px 0 0;
  border-top: 1px solid var(--night-line);
}
.stat-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
  margin-bottom: 14px;
  /* Tabellenziffern: die Zahl springt beim Hochzählen nicht in der Breite */
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sky);
  white-space: nowrap;
}
.stat h3 { font-size: 1rem; margin-bottom: 6px; white-space: nowrap; }
.stat p { font-size: .92rem; }

/* --- 11. Referenzen -------------------------------------------------------
   DERZEIT UNGENUTZT. Die Referenzen-Sektion wurde aus index.html entfernt.
   Die Stile bleiben stehen, damit die Kundenstimmen samt Wisch-Slider
   spaeter mit wenigen Zeilen HTML zurueckkommen koennen.
   Der zugehoerige Code steht in script.js, Abschnitt 9.
   ------------------------------------------------------------------------ */
/* --- 11. Referenzen -------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  padding: 40px 34px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.quote:hover {
  border-color: var(--line-dk);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stars { display: flex; gap: 4px; margin-bottom: 22px; }
.stars svg { width: 15px; height: 15px; fill: var(--accent); stroke: none; }

/* Grosses, ruhiges Anfuehrungszeichen als Auftakt */
.quote blockquote {
  position: relative;
  margin: 0 0 28px;
}
.quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -26px; left: -6px;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  opacity: .15;
  pointer-events: none;
}
.quote blockquote p {
  position: relative;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink);
}
@media (min-width: 880px) { .quote blockquote p { font-size: 1.1rem; } }

/* Fußzeile der Karte: Kreis mit Initialen, Name und Funktion.
   Für ein echtes Foto den <span class="quote-avatar"> durch ein
   <img class="quote-avatar" src="..." alt=""> ersetzen. */
.quote-by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
/* Zeigt die Initialen. Wer später ein Foto möchte, legt einfach ein
   <img src="..." alt=""> in den Span, es deckt die Initialen dann ab. */
.quote-avatar {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
}
.quote-avatar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Sobald ein Foto in der Kachel liegt, verschwinden die Initialen darunter */
.quote-avatar:has(img) { color: transparent; }
.quote-name {
  display: block;
  font-weight: 600;
  font-size: .94rem;
  color: var(--ink);
}

/* Kundenstimmen auf dunklem Grund */
.section--night .quote {
  background: var(--night-card);
  border-color: var(--night-line);
}
.section--night .quote:hover { border-color: rgba(142, 202, 230, .38); }
.section--night .quote blockquote p { color: #fff; }
.section--night .quote-by { border-top-color: var(--night-line); }
.section--night .quote-name { color: #fff; }
.section--night .stars svg { fill: var(--sky); }
.section--night .quote-avatar {
  background: rgba(255, 255, 255, .06);
  border-color: var(--night-line);
  color: var(--sky);
}

/* Referenzen als Wisch-Slider.
   scroll-snap macht das Wischen von Haus aus fluessig, ganz ohne
   Bibliothek. Der Rahmen schneidet ab, die Seite scrollt nicht seitlich. */
.slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.slider::-webkit-scrollbar { display: none; }
.slider > * {
  flex: 0 0 auto;
  width: min(100%, 360px);
  scroll-snap-align: center;
}
@media (min-width: 880px) {
  .slider { gap: 32px; }
  .slider > * { width: 360px; scroll-snap-align: start; }
}

/* Punkte unter dem Slider */
.slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
}
.slider-dot {
  width: 40px; height: 44px;      /* grosse Tippflaeche, kleiner Punkt */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.slider-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .3s ease, transform .3s ease;
}
.slider-dot[aria-current="true"]::before {
  background: var(--accent);
  transform: scale(1.4);
}
.section--night .slider-dot::before { background: var(--night-line); }
.section--night .slider-dot[aria-current="true"]::before { background: var(--sky); }

.slider-hint {
  margin-top: 14px;
  text-align: center;
  font-size: .85rem;
}

/* --- 12. FAQ --------------------------------------------------------------- */
.faq { max-width: 44rem; margin-inline: auto; }

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

.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 30px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.faq-q:hover { color: var(--accent); }

/* Plus- und Minuszeichen aus zwei Strichen */
.faq-icon {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
  margin-top: 4px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.6px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* Weiches Auf- und Zuklappen über grid-template-rows 0fr -> 1fr.
   Vorteil gegenüber max-height: die Höhe muss nicht geraten werden.
   Die laengere Dauer und die sanftere Kurve lassen die Antwort
   ausgleiten statt aufzuspringen. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  max-width: 38rem;
  transition: grid-template-rows .6s cubic-bezier(.16, 1, .3, 1),
              opacity .4s ease;
}
.faq-a > div { overflow: hidden; }
/* Der Text schiebt sich zusaetzlich ein Stueck mit nach unten */
.faq-a p {
  transform: translateY(-8px);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.faq-item.is-open .faq-a p { transform: none; }
.faq-a p { font-size: .97rem; padding-bottom: 32px; }
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .6s cubic-bezier(.16, 1, .3, 1),
              opacity .35s ease .08s;
}

/* FAQ auf dunklem Grund */
.section--night .faq-item,
.section--night .faq-item:first-child { border-color: var(--night-line); }
.section--night .faq-q { color: #fff; }
.section--night .faq-q:hover { color: var(--sky); }
.section--night .faq-icon::before,
.section--night .faq-icon::after { background: var(--sky); }
.section--night .faq-a p { color: var(--night-text); }

/* Werte-Karten auf dunklem Grund */
.section--night .value {
  background: var(--night-card);
  border-color: var(--night-line);
}
.section--night .value p { color: var(--night-text); }

/* --- 13. Kontakt ----------------------------------------------------------- */
/* Direktweg über dem Formular, alles mittig */




/* Formular. Bewusst mittig und schmal, damit es wie eine
   Buchungsstrecke wirkt und nicht wie ein Behördenbogen. */
/* Formular steht frei auf der Seite, ohne Kasten und ohne Schatten.
   Die Gliederung machen die Abschnittslinien, nicht ein Rahmen. */
.form-wrap {
  position: relative;   /* Bezugspunkt für den Honigtopf */
  max-width: 40rem;
  margin-inline: auto;
}

.form-head { margin-bottom: 48px; text-align: center; }
.form-head h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: 8px; }
.form-head p { font-size: .95rem; }

/* Ein Abschnitt des Formulars */
.form-group {
  margin: 0 0 48px;
  padding: 0;
  border: 0;
}
.form-group:last-of-type { margin-bottom: 0; }
@media (min-width: 768px) { .form-group { margin-bottom: 64px; } }

.form-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 0 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}
.form-legend span {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .8rem;
  color: var(--accent);
}

.form-note { font-size: .92rem; margin-bottom: 32px; }

.field { margin-bottom: 32px; }
/* Nur das WIRKLICH letzte Element eines Abschnitts hat keinen Abstand
   nach unten. Ein Feld mitten im Abschnitt behält seine 32px, auch
   wenn es das letzte innerhalb einer zweispaltigen Reihe ist. */
.form-group > :last-child,
.form-group > :last-child > .field:last-child { margin-bottom: 0; }

/* Zwei Felder nebeneinander, ab Tablet */
/* Zwei Felder nebeneinander ab Tablet. Der Zeilenabstand bleibt
   überall gleich, egal ob ein- oder zweispaltig. */
.field-row {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}
.field-row:last-child .field:last-child { margin-bottom: 0; }
@media (min-width: 600px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .field-row .field { margin-bottom: 32px; }
}

.field label,
.field-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.label-note { font-weight: 400; color: var(--muted); }

.field input,
.field textarea,
.field select {
  width: 100%;
  max-width: 100%;
  /* min-width: 0 ist Pflicht. Ohne das erzwingt iOS bei date-Feldern
     eine Eigenbreite und schiebt sie ueber den Kartenrand hinaus. */
  min-width: 0;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 1rem;   /* 16px verhindert den Auto-Zoom auf iPhones */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* Eigener Pfeil statt des Systemdreiecks */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #656F75; opacity: 1; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 100, 154, .14);
}
/* Datumsfeld. appearance:none nimmt iOS die Eigenbreite weg, der
   native Kalender bleibt trotzdem erhalten. */
.field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 55px;
  min-width: 0;
  width: 100%;
  text-align: left;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }

/* Auswahl als antippbare Chips statt Dropdown */
.choice {
  position: relative;   /* Bezugspunkt für die versteckten Radios */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Die Radios selbst sind unsichtbar, sichtbar ist nur das Label.
   left/top müssen gesetzt sein, sonst schieben sie die Seite seitlich raus. */
.choice input {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.choice label {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin: 0;
  padding: 11px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.choice label:hover { border-color: var(--line-dk); }
.choice input:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.choice input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Honigtopf gegen Spam-Bots. Unsichtbar, aber NICHT mit left:-9999px,
   sonst zieht er die Seite seitlich auf. */
.honeypot {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.form-submit {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.form-hint { font-size: .85rem; margin-top: 32px; text-align: center; }

/* Leiser Alternativweg unter dem Formular */
.form-alt {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  text-align: center;
}
.form-alt a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form-hint a { text-decoration: underline; text-underline-offset: 2px; }

/* --- 14. Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: var(--night-text);   /* alle ruhigen Texte im Footer: EIN Ton */
  padding-block: 64px 36px;
  font-size: .92rem;
  text-align: center;
}
.site-footer .brand {
  display: inline-block;
  color: #fff;
  font-size: 1.35rem;
}
.site-footer .brand .brand-accent { color: var(--sky); }
.site-footer > .container > p {
  max-width: 26rem;
  margin: 12px auto 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 32px;
}
/* padding-block bringt die Links auf Tippgröße, ohne sie optisch zu ändern */
.footer-nav a {
  display: inline-block;
  padding-block: 10px;
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
}
.footer-nav a:hover { color: #fff; }

.footer-bottom {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: .85rem;
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.footer-links a { display: inline-block; padding-block: 11px; color: var(--night-text); }
.footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { color: var(--night-text); }

/* --- 15. Unterseiten ------------------------------------------------------- */
/* Kopfbereich der Unterseiten: gleiche Sprache wie der Hero, nur kompakter */

/* Derselbe Schleier wie im Hero, nur zurueckhaltender: mittig hinter der
   Ueberschrift. So beginnt jede Unterseite wie die Startseite. */
.page-hero::before {
  content: "";
  position: absolute;
  top: -240px; left: 50%;
  width: 620px; height: 480px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 100, 154, .14), rgba(0, 100, 154, 0) 68%);
  pointer-events: none;
}


/* Breiter Abschluss-Aufruf am Seitenende.
   Steht meist in einer hellen Sektion, damit der dunkle Footer den
   Hell-Dunkel-Wechsel sauber abschließt. */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band p {
  max-width: 32rem;
  margin: 0 auto 40px;
  color: var(--muted);
}
.section--night .cta-band p { color: var(--night-text); }

/* Trennt den Schluss-Aufruf vom Inhalt darüber, ohne neue Sektion */
.cta-band--split {
  margin-top: var(--section-y);
  padding-top: var(--section-y);
  border-top: 1px solid var(--line);
}

/* Über mich */
.about {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.about p { font-size: 1.05rem; margin-bottom: 1.2rem; }
.about .signature {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--ink);
}

/* Werteliste "Warum Workmade" */
.value {
  padding: 38px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.value h3 { font-size: 1.08rem; margin-bottom: 10px; white-space: nowrap; }
.value p { font-size: .94rem; }


/* Rechtsseiten: hier ist linksbündig richtig, es ist Fließtext */
.page-narrow { max-width: 46rem; margin-inline: auto; }
.legal { padding-block: var(--section-y); }
/* Steht direkt unter dem Seitenkopf, deshalb derselbe Abstand wie dort.
   Muss NACH der Zeile darueber stehen, sonst gewinnt padding-block. */
.page-hero + .legal { padding-top: var(--head-pad); }
.legal h2 {
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1.02rem; margin-top: 28px; }
/* Die erste Ueberschrift braucht keinen Trennabstand nach oben, sie
   folgt ja direkt auf den Seitenkopf. Sonst waere der Abstand hier
   groesser als auf allen anderen Seiten. */
.legal .container > h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.legal p, .legal li { font-size: .96rem; }
.legal ul { list-style: disc; padding-left: 20px; margin-bottom: 1rem; }
.legal li { margin-bottom: 6px; }

/* Platzhalter, die später ersetzt werden: bewusst auffällig markiert */
.ph {
  display: inline-block;
  max-width: 100%;
  padding: 1px 7px;
  background: #FFF4D6;
  border: 1px dashed #E0C36A;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  color: #6B5514;
  overflow-wrap: anywhere;
  white-space: normal;
}

.notice {
  margin-bottom: 34px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: .92rem;
  text-align: left;
}
/* Auf hellgrauem Grund würde der Kasten verschwinden, dort weiß */
.section--surface .notice { background: var(--bg); }

/* --- 16. Animationen (sehr zurückhaltend) ---------------------------------- */
/* Greifen nur, wenn JS aktiv ist. Ohne JS bleibt alles sichtbar. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition: opacity .65s cubic-bezier(.2, .75, .25, 1),
              transform .65s cubic-bezier(.2, .75, .25, 1),
              filter .65s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Nutzer mit reduzierter Bewegung bekommen keine Animationen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  /* Dauerschleifen ganz abschalten statt nur beschleunigen */
  .hero::before,
  .hero::after { animation: none !important; }
  .site-nav[data-open="true"] .nav-list li { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .hero h1 .w,
  .hero-anim { opacity: 1; transform: none; filter: none; }
}

/* --- 17. Feinschliff fürs Handy -------------------------------------------- */
/* Alles, was auf dem Phone anders sein muss als am Desktop,
   bewusst gesammelt an einer Stelle. */

/* Kein blauer Kasten beim Antippen. Rückmeldung geben die :active-Zustände. */
a, button, .btn, label, summary { -webkit-tap-highlight-color: transparent; }

@media (max-width: 767px) {
  /* Fortschrittsleiste kräftiger, sonst am Rand kaum zu sehen */
  .progress { height: 3px; }


  /* Weichzeichner beim Einblenden weglassen. Animierte filter sind auf
     Mittelklasse-Handys teuer, Bewegung und Deckkraft reichen völlig. */
  .js [data-reveal] {
    filter: none;
    transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.2, .75, .25, 1),
                transform .5s cubic-bezier(.2, .75, .25, 1);
    transition-delay: calc(var(--i, 0) * 60ms);
  }

  /* Die Headline ist einmalig, Weichzeichner bleibt, nur schwächer */
  .hero h1 .w { filter: blur(6px); }
}

/* Zahlen-Blöcke nebeneinander statt untereinander: spart auf dem Handy
   viel Höhe und wirkt aufgeräumter. */
@media (max-width: 619px) {
  .stat {
    display: grid;
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 2px;
    align-items: start;
  }
  .stat-value {
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 0;
    font-size: 2.4rem;
  }
  .stat-unit { font-size: .8rem; }
  .stat h3 { grid-column: 2; grid-row: 1; margin-bottom: 4px; }
  .stat p  { grid-column: 2; grid-row: 2; }
}

/* Geräte ohne Mauszeiger: Hover gibt es dort nicht, also bekommen die
   Karten den Akzent fest und echtes Tipp-Feedback. */
@media (hover: none) {
  .service::after {
    opacity: .5;
    background: radial-gradient(260px circle at 92% 0%,
      rgba(0, 100, 154, .32), transparent 62%);
  }
  .service:active { transform: scale(.985); border-color: rgba(142, 202, 230, .40); }
  .plan:active, .quote:active { transform: scale(.99); }
  .faq-q:active { color: var(--accent); }
  .nav-list a:active { color: var(--accent); }
}