/* =======================================================================
   HeiselConnect – gemeinsame Seitenhuelle der Unterseiten
   Traegt alles, was jede Unterseite gleich hat: Tokens, Typografie,
   Buttons, Kopfleiste, Hero-Geruest, Abschnitte, Ablauf, FAQ, Formular,
   Footer und die Einblend-Logik. Die seiteneigenen Grafiken
   stehen jeweils in einer zweiten Datei (webservices.css, optimierung.css),
   die NACH dieser eingebunden wird.

     1. Tokens
     2. Grundlagen & Typo
     3. Buttons
     4. Header
     5. Hero (inkl. Canvas-Eyecatcher)
     6. Abschnitte & Listen
     7. Split-Layout & Browser-Attrappe
     8. Ablauf
     9. FAQ
    10. Kontaktformular
    11. Footer
    12. Reveal, Fokus, Reduced Motion
    13. Cookie-Banner
    14. Breakpoints
   ======================================================================= */

/* ---------------------------------------------------------------- 1. Tokens */
:root{
  --paper: var(--hc-paper);
  --ink: var(--hc-ink);
  --night: var(--hc-night);
  --green: var(--hc-green);
  --green-deep: var(--hc-green-deep);

  --muted:      #55555c;                      /* Fließtext auf hell */
  --muted-dark: rgba(255, 255, 255, 0.72);    /* Fließtext auf dunkel */
  --hair:       rgba(34, 34, 35, 0.14);
  --hair-dark:  rgba(255, 255, 255, 0.14);
  --card-line:  rgba(255, 255, 255, 0.09);    /* Kanten dunkler Flächen */

  /* Auszeichnung ohne Farbe: Icons, Haekchen und Auszeichnungszeilen, die
     frueher gruen waren, stehen jetzt schlicht in der Textfarbe. Kein
     Grauton dazwischen - der wirkte im Text wie eine zweite Farbe. */
  --quiet:      #fff;                         /* auf dunklem Grund */
  --quiet-ink:  var(--hc-ink);                /* auf hellem Grund */

  --fs-body:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --fs-lead:  clamp(1.06rem, 0.98rem + 0.45vw, 1.32rem);
  --fs-h3:    clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-h2:    clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem);
  --fs-h1:    clamp(2rem, 1.3rem + 3.2vw, 4.6rem);

  --wrap: 1180px;
  --wrap-narrow: 800px;
  --wrap-hero: 1440px;
  --wrap-header: 1760px;   /* die Leiste laeuft deutlich breiter als der Inhalt */
  --gutter: clamp(1.1rem, 4vw, 2.2rem);
  --gutter-edge: clamp(0.9rem, 2.2vw, 2.6rem);   /* Kopfleiste: nah am Rand */

  --radius:    24px;
  --radius-lg: clamp(28px, 3.4vw, 52px);      /* großer Radius wie die Vorteilskarten */

  --shadow:      0 18px 46px rgba(20, 26, 21, 0.14);
  --shadow-dark: 0 26px 60px rgba(0, 0, 0, 0.5);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 86px;   /* die Leiste schwebt, sie braucht Luft darueber */
}

/* ---------------------------------------------------------------- 2. Grundlagen */
*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--hc-font);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Bewusst KEIN overflow-x hier: jeder Wert ausser visible zwingt overflow-y
     auf auto, der Body wird dadurch zum eigenen Scroll-Container und es feuern
     keine Scroll-Ereignisse mehr (der Header schaltete deshalb nicht mehr um).
     Der Hero klammert seine Animation selbst per overflow:hidden ein. */
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }
h1, h2, h3, p, blockquote, figure{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }
svg{ fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wrap{
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.wrap--narrow{ max-width: var(--wrap-narrow); }

/* Die Kopfleiste laeuft bewusst breiter als der Inhalt: Logo und
   Handlungsaufruf sitzen nah am Bildschirmrand. */
.wrap--wide{
  width: 100%;
  max-width: none;
  padding-inline: var(--gutter-edge);
}

h1{ font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; }
h2{ font-size: var(--fs-h2); line-height: 1.16; letter-spacing: 0.01em; font-weight: 700; }
h3{ font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; }

.lead{ font-size: var(--fs-lead); color: var(--muted); line-height: 1.5; }

/* Zweite Zeile einer Ueberschrift bzw. einzelne hervorgehobene Woerter.
   Frueher gruen – das war auf jeder Seite mehrfach gesetzt und hat die
   Akzentfarbe entwertet. Jetzt stehen sie in derselben Farbe wie der Rest
   der Ueberschrift: eine Ueberschrift, ein Ton. */
.accent,
.hl{ color: var(--quiet-ink); }
.section--dark .hl,
.hero .hl,
.section--dark .accent,
.hero .accent{ color: #fff; }

/* .line war die kurze gruene Akzentlinie unter jeder Ueberschrift. Sie kam
   auf jeder Seite mehrfach vor und hat die Seiten unruhig gemacht – die
   Abstaende trennen die Bloecke ohnehin. Die Regel bleibt als leere Huelle
   stehen, falls im Markup noch ein Rest steht. */
.line{ display: none; }

.eyebrow{
  font-family: var(--hc-mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0 0 1.1rem;
}
.section:not(.section--dark) .eyebrow{ color: var(--quiet-ink); }

/* Abschnittsmarke: die kleine Zeile ueber der Ueberschrift. Ohne
   vorangestellten Strich – er war eine von vielen kurzen Linien, die die
   Seiten unruhig gemacht haben. Steht auf der Startseite wie auf allen
   Unterseiten in derselben Form. */
.mark{
  display: inline-flex;
  align-items: center;
  font-family: var(--hc-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0 0 1rem;
}
.section:not(.section--dark) .mark{ color: var(--quiet-ink); }
.section-head--center .mark{ justify-content: center; }

.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- 3. Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
              color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn svg{ width: 1.05em; height: 1.05em; }
.btn--sm{ padding: 0.6rem 1.15rem; min-height: 42px; font-size: 0.92rem; }
.btn--lg{ padding: 1.1rem 2.1rem; min-height: 56px; font-size: 1.06rem; }
.btn--block{ width: 100%; }

.btn--primary{ background: var(--green); color: #10160f; }
.btn--primary:hover{ background: var(--hc-green-light); transform: translateY(-2px); }

.btn--ghost{ background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn--ghost:hover{ border-color: #fff; transform: translateY(-2px); }

/* ---------------------------------------------------------------- 4. Header
   Eine schwebende Leiste statt einer Kante am Bildschirmrand – auf jeder
   Seite dieselbe. Sie traegt genau drei Ziele (Leistungen, Ueber uns,
   Kontakt) und markiert die aktuelle Stelle mit einem feinen Unterstrich.
   Bewusst OHNE Fortschrittsbalken und ohne farbigen Punkt: die Leiste
   soll ruhig bleiben und nicht mit dem gruenen Handlungsaufruf
   konkurrieren. */
.site-header{
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 90;
}

/* Die Leiste laeuft breiter als der Inhalt und nutzt grosse Bildschirme
   spuerbar aus – Logo und Handlungsaufruf ruecken nach aussen. */
.site-header .wrap--wide{
  width: min(100% - 2 * var(--gutter-edge), var(--wrap-header));
  margin-inline: auto;
  padding-inline: clamp(0.7rem, 1.2vw, 1.2rem);
}

.header-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.6rem, 2vw, 2rem);
  min-height: 62px;
  padding-inline: clamp(0.7rem, 1.4vw, 1.1rem);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: rgba(20, 21, 22, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-stuck .header-inner{
  background: rgba(16, 17, 18, 0.92);
  border-color: rgba(255, 255, 255, 0.13);
}

.brand{ display: inline-flex; align-items: center; flex: none; }
.brand img{ width: clamp(108px, 22vw, 156px); height: auto; }

.header-cta{ flex: none; white-space: nowrap; }

/* ---- Navigation ------------------------------------------------------ */
.nav{ display: none; align-items: center; gap: clamp(0.1rem, 1vw, 0.5rem); }

.nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, 0.68);
  font-family: inherit;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s var(--ease);
}
.nav-link:hover{ color: #fff; }

/* Markierung der aktuellen Stelle: ein feiner Strich darunter. Kein Punkt,
   keine Farbe – die Leiste soll sich nicht selbst betonen.
   aria-current traegt die statische Seitenmarkierung, .is-active setzt auf
   der Startseite das Scroll-Leitsystem. */
.nav-link.is-active,
.nav-link[aria-current="page"]{ color: #fff; }
.nav-link.is-active::after,
.nav-link[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.3rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.nav-item{ position: relative; }
.nav-caret{ width: 0.85em; height: 0.85em; opacity: 0.7; transition: rotate 0.2s var(--ease); }
.nav-link[aria-expanded="true"] .nav-caret{ rotate: 180deg; }

/* ---- Klappmenue: die vier Leistungen, schlicht untereinander ---------- */
.nav-menu{
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 0;
  display: grid;
  gap: 1px;
  min-width: 17rem;
  padding: 0.4rem;
  background: rgba(18, 19, 20, 0.97);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.55);

  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 0.2s var(--ease), translate 0.2s var(--ease), visibility 0.2s;
}
.nav-item.is-open .nav-menu{ opacity: 1; visibility: visible; translate: 0 0; }

.nav-card{
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.93rem;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.nav-card:hover{ background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-card[aria-current="page"]{ color: #fff; background: rgba(255, 255, 255, 0.05); }

/* ---- Schalter und Schublade fuer schmale Geraete --------------------- */
.nav-toggle{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.nav-toggle i{
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: translate 0.25s var(--ease), rotate 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] i:nth-child(1){ translate: 0 7px; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3){ translate: 0 -7px; rotate: -45deg; }
/* Auf schmalen Geraeten steht im Button das kurze, neutrale Label; ab 560px
   die seitenspezifische Handlungsaufforderung. Beide Varianten liegen im
   Markup, umgeschaltet wird nur per Anzeige. */
.header-cta-long{ display: none; }
.header-cta-short{ display: inline; }

/* ---------------------------------------------------------------- 5. Hero */
.hero{
  position: relative;
  isolation: isolate;
  background: var(--night);
  color: #fff;
  overflow: hidden;
  /* oben Platz für die transparent aufliegende Kopfleiste */
  padding-block: calc(var(--header-h) + clamp(2.4rem, 1.5rem + 6vw, 5.5rem))
                 clamp(4.5rem, 2rem + 10vw, 8rem);
  /* Der Hero fuellt den Bildschirm genau einmal – svh statt vh, damit die
     ein- und ausfahrende Leiste mobiler Browser nichts abschneidet. Nach
     unten darf er wachsen, wenn der Inhalt mehr Platz braucht. */
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* Der Eyecatcher: ein Punktraster, durch das Impulse laufen.
   Fällt ohne JS oder bei reduzierter Bewegung einfach weg. */
.hero-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
}

/* weicher grüner Schimmer, damit der Text auf dem Raster lesbar bleibt */
.hero-veil{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(78% 62% at 22% 34%, rgba(13, 13, 13, 0.92) 30%, rgba(13, 13, 13, 0) 72%),
    radial-gradient(120% 90% at 88% 8%, rgba(116, 180, 118, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0) 28%, rgba(13, 13, 13, 0.8) 100%);
}

/* Auf schmalen Geräten liegt der Text mitten im Raster – dort braucht es
   eine kräftigere Abdunklung, damit er ruhig bleibt. */
@media (max-width: 860px){
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(13, 13, 13, 0.86) 0%, rgba(13, 13, 13, 0.56) 45%, rgba(13, 13, 13, 0.9) 100%),
      radial-gradient(120% 70% at 80% 6%, rgba(116, 180, 118, 0.2), transparent 62%);
  }
}

/* Der Hero darf den Platz breiter Bildschirme nutzen */
.hero-inner{
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--wrap-hero));
  max-width: none;
}

.hero-title{ margin-bottom: 1.4rem; max-width: 20ch; text-wrap: balance; }
.hero-lead{ color: var(--muted-dark); font-size: var(--fs-lead); max-width: 46rem; }

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.2rem;
}

.hero-trust{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  margin-top: 2.4rem;
  font-size: 0.93rem;
  color: var(--muted-dark);
}
.hero-trust li{ display: inline-flex; align-items: center; gap: 0.5rem; }
/* Die drei Icons tragen hier wieder das Markengruen: sie stehen fuer sich
   und nicht im Fliesstext, deshalb wirkt die Farbe als Auszeichnung und
   nicht als zweiter Textton. */
.hero-trust svg{ width: 1.1rem; height: 1.1rem; color: var(--green); flex: none; }

/* Sitzt am unteren Rand des Heros – und der reicht jetzt ueber den ganzen
   Bildschirm, der Hinweis steht damit unmittelbar an der Blattkante. */
.hero-scroll{
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 3vh, 2.6rem);
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  display: none;
}
.hero-scroll span{
  position: absolute;
  left: 50%;
  top: 8px;
  translate: -50% 0;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
  animation: scrollHint 1.9s var(--ease) infinite;
}
@keyframes scrollHint{
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(14px); opacity: 0.15; }
}

/* Drei Bausteine gehoeren nur der hochkanten Telefonfassung: die
   Schlagwort-Ueberschrift, die Unterzeile darunter und der Knopf, der
   direkt zum Kontakt fuehrt. Der Regelfall - Langfassung, Fliesszeile,
   Sprung in die Seite - bleibt sichtbar. */
.hero-title-key,
.hero-sub,
.hero-cta-key{ display: none; }

/* --------------------------------------------------------------------
   Hero auf dem Telefon: die Animation hochkant

   Auf breiten Bildschirmen steht die Animation neben dem Text und hat
   Platz. Auf schmalen lag sie frueher darunter, vom Schleier fast
   zugedeckt - uebrig blieb ein Rest Liniengewirr hinter den Zeilen.

   Hier ist sie stattdessen der Hero. Sie steht hochkant ueber fast die
   ganze Hoehe; die Zeichnungen laufen von oben nach unten - das ist die
   Leserichtung eines Telefons, und was sich verzweigt, braucht
   nebeneinander nur die halbe Breite.

   Darunter bleibt genau zweierlei stehen: ein Schlagwort und ein Knopf.
   Augenbraue, Fliesszeile und die drei Belegzeilen sind hier
   ausgeblendet - sie stehen weiter unten auf der Seite ohnehin
   ausfuehrlicher. Der Hero soll auf dem Telefon nicht erklaeren,
   sondern hinsehen lassen.

   Jede Unterseite bringt dafuer eine eigene, hochkante Fassung ihres
   Eyecatchers mit (optimierung.js, webservices.js, mediendesign.js,
   datenanalyse.css). Die Breitbildfassung nur zu schrumpfen war genau
   das Problem: auf kleinen Flaechen braucht es weniger Elemente,
   nicht kleinere.
   -------------------------------------------------------------------- */
/* --------------------------------------------------------------------
   Kopfleiste auf dem Telefon

   Sie rueckt naeher an die Oberkante und traegt nur noch Logo und
   Menuetaste. Der Handlungsaufruf ist hier weg: er stand direkt ueber
   dem Hero, der seinen eigenen Knopf hat - zweimal dasselbe Ziel
   uebereinander. --header-h faellt entsprechend mit; damit ruecken der
   Hero darunter und die Schublade automatisch nach.
   -------------------------------------------------------------------- */
@media (max-width: 719.98px){
  :root{ --header-h: 72px; }
  .site-header{ top: 5px; }
  .header-cta{ display: none; }
}

@media (max-width: 719.98px){
  /* Der Hero ist genau einen Bildschirm hoch - nicht mindestens.
     Deshalb steht die Buehne HIER im Fluss und nicht wie sonst
     freigestellt darueber: als Flex-Element nimmt sie, was nach
     Kopfleiste, Schlagwort und Knopf uebrig bleibt. Vorher war ihre
     Hoehe ein fester svh-Anteil, und wenn Text und Knopf mehr
     brauchten, wuchs der Hero ueber den Bildschirm hinaus - der Knopf
     rutschte unter die Kante. So kann das nicht mehr passieren: was
     der Text braucht, geht von der Buehne ab, nie vom Knopf.

     Fuer Zeichnungen, die ihre Groesse selbst rechnen muessen (das
     Auswertungsbild auf der Datenanalyseseite), steht --hero-stage als
     bewusst knapp geschaetzter Anhaltswert weiter zur Verfuegung. */
  .hero.hero--portrait{
    /* Ein Bildschirm - aber welcher? svh ist die Hoehe mit eingeblendeter
       Browserleiste; --vh-sicher setzt page.js aus der wirklich sichtbaren
       Hoehe. Der kleinere der beiden gewinnt, damit der Hero nie ueber die
       Kante hinausgeht. Ohne JavaScript bleibt es bei svh. Warum das noetig
       ist, steht in page.js, Abschnitt 3a. Ab hier rechnet alles mit --vh. */
    --vh: min(100svh, var(--vh-sicher, 100svh));
    --hero-stage: max(170px, calc(var(--vh) - 280px));

    min-height: 100svh;
    min-height: var(--vh);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: calc(var(--header-h) + 0.4rem)
                   clamp(2rem, calc(var(--vh) * 0.054), 3.2rem);
    gap: clamp(0.9rem, calc(var(--vh) * 0.024), 1.8rem);
  }

  /* Die Buehne: randlos ueber die volle Breite, Hoehe = der Rest.
     flex-basis 0 ist wichtig - mit 'auto' ginge die Eigengroesse des
     Canvas in die Rechnung ein, und die setzt das Skript aus eben
     dieser Hoehe. Das drehte sich im Kreis. */
  .hero--portrait .hero-canvas,
  .hero--portrait .hero-board{
    position: static;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
    z-index: auto;
    translate: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero--portrait .hero-inner{ flex: 0 0 auto; }

  /* Der Schleier hat hier nichts mehr zu tun: Text und Zeichnung liegen
     nicht mehr uebereinander, sondern untereinander. */
  .hero--portrait .hero-veil{ display: none; }

  /* Weiches Licht hinter der Zeichnung - sie steht damit im Raum statt
     im Nichts. Liegt unter allem anderen (z-index -3). */
  .hero--portrait::after{
    content: "";
    position: absolute;
    left: 50%;
    top: var(--header-h);
    height: 64%;
    z-index: -3;
    width: 150%;
    translate: -50% 0;
    pointer-events: none;
    background: radial-gradient(46% 44% at 50% 46%,
                  rgba(116, 180, 118, 0.11),
                  rgba(116, 180, 118, 0.03) 52%,
                  transparent 74%);
  }

  /* ---- Nur noch Schlagwort und Knopf ---- */
  .hero--portrait .eyebrow,
  .hero--portrait .hero-lead,
  .hero--portrait .hero-trust{ display: none; }

  .hero--portrait .hero-title-full{ display: none; }
  .hero--portrait .hero-title-key{ display: inline; }
  .hero--portrait .hero-cta-wide{ display: none; }
  .hero--portrait .hero-cta-key{ display: inline-flex; }

  /* Doppelter Abstand zur linken Kante: der Text bekommt Rand statt an
     ihr zu kleben - und steht damit auf einer Linie mit dem Logo in der
     Kopfleiste. Die Buehne bleibt randlos, sie ist Hintergrund. */
  .hero--portrait .hero-inner{
    width: min(100% - 4 * var(--gutter), var(--wrap-hero));
  }

  .hero--portrait .hero-title{
    font-size: clamp(2.5rem, 1rem + 8vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0;
    max-width: none;
    text-wrap: balance;
  }

  /* Die Unterzeile traegt, was das Schlagwort offen laesst: worum es auf
     der Seite konkret geht. Ruhiger Ton, damit sie das Schlagwort nicht
     verdraengt. */
  .hero--portrait .hero-sub{
    display: block;
    margin-top: 0.55rem;
    color: var(--muted-dark);
    /* 18-21px: unter 17px liest sich auf einem Telefon nichts mehr
       nebenbei, und diese Zeile traegt hier die ganze Erklaerung.
       Untere Schranke bewusst ueber der Fliesstextgroesse. */
    font-size: clamp(1.125rem, 1rem + 0.7vw, 1.3rem);
    line-height: 1.4;
    max-width: 30ch;
  }

  /* Der Knopf steht linksbuendig und nur so breit wie noetig - auf voller
     Breite wirkte er wie eine Leiste, nicht wie ein Knopf. */
  .hero--portrait .hero-actions{ margin-top: 1.15rem; justify-content: flex-start; }
  .hero--portrait .hero-actions .btn{
    width: auto;
    padding: 0.72rem 1.3rem;
    min-height: 46px;
    font-size: 0.94rem;
  }
}

/* Kleine oder quer gehaltene Geraete: Schrift und Abstaende ruecken
   zusammen. Die Buehne muss hier nichts abgeben - sie bekommt den Rest
   ohnehin erst, wenn der Text seinen Platz hat. */
@media (max-width: 719.98px) and (max-height: 730px){
  .hero.hero--portrait{
    --hero-stage: max(140px, calc(var(--vh) - 250px));
    padding-block: calc(var(--header-h) + 0.3rem)
                   clamp(1.8rem, calc(var(--vh) * 0.05), 2.8rem);
    gap: clamp(0.7rem, calc(var(--vh) * 0.02), 1.3rem);
  }
  .hero--portrait .hero-title{ font-size: clamp(2rem, 1rem + 6.4vw, 2.9rem); }
  .hero--portrait .hero-sub{ margin-top: 0.4rem; font-size: clamp(1.08rem, 0.96rem + 0.5vw, 1.2rem); }
  .hero--portrait .hero-actions{ margin-top: 0.9rem; }
}

/* ---------------------------------------------------------------- 6. Abschnitte & Karten */
.section{ padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.section--tight{ padding-block: clamp(2.8rem, 1.8rem + 4vw, 5rem); }

.section--dark{
  position: relative;
  background: var(--ink);
  color: #fff;
}
.section--dark .lead{ color: var(--muted-dark); }

.section-head{ max-width: 44rem; margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.4rem); }
.section-head--center{ margin-inline: auto; text-align: center; }


/* Häkchenliste */
.ticks{ display: grid; gap: 0.6rem; margin-top: 1.3rem; }
.split-text .ticks + .lead{ margin-top: 1.3rem; }
.ticks li{
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.45;
  font-size: 0.98rem;
  color: var(--muted-dark);
}
.ticks li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 12px;
  height: 7px;
  border-left: 2.4px solid var(--quiet);
  border-bottom: 2.4px solid var(--quiet);
  rotate: -45deg;
}
/* auf hellem Grund (nur wenn die Liste außerhalb einer dunklen Karte steht) */
.section:not(.section--dark) .split-text .ticks li{ color: var(--muted); }
.section:not(.section--dark) .split-text .ticks li::before{
  border-left-color: var(--quiet-ink);
  border-bottom-color: var(--quiet-ink);
}

/* ---------------------------------------------------------------- 7. Referenz & Demo */
.split{ display: grid; gap: clamp(2rem, 1rem + 4vw, 3.6rem); align-items: center; }
.split-text .btn{ margin-top: 1.8rem; }

/* Bildunterschrift unter einem Split – sie gehoert zu beiden Spalten und
   steht deshalb darunter, nicht in der Medienspalte. */
.split-caption{
  margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}
.section:not(.section--dark) .split-caption{ color: var(--muted); }

.mock{
  border-radius: var(--radius);
  overflow: hidden;
  background: #1b1b1c;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: var(--shadow-dark);
  max-width: 460px;
  margin-inline: auto;
}
.mock-bar{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  background: #262627;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mock-bar i{ width: 10px; height: 10px; border-radius: 50%; background: #3f3f41; }
.mock-bar i:nth-child(1){ background: #e06a5b; }
.mock-bar i:nth-child(2){ background: #e3b04b; }
.mock-bar i:nth-child(3){ background: var(--green); }
.mock-url{
  margin-left: 0.5rem;
  font-family: var(--hc-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mock img{ width: 100%; background: #fff; }
.mock figcaption{
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ------------------------------------------------- 7b. Geraeteaufnahmen
   Freigestellte PNG-Aufnahmen von Notebook und Telefon (img/mock-*).
   Sie stehen nicht auf einer Flaeche, sondern schweben: leichter Versatz
   in der Tiefe, ein weicher Lichtkegel dahinter und zwei sehr langsame
   Bewegungen mit unterschiedlicher Dauer, damit die Anordnung nie
   einfriert.

   Jedes Geraet wirft zwei Schatten – wie ein echter Gegenstand auch:

     Formschatten  ein Filter statt eines Kastens. Er folgt der
                   tatsaechlichen Silhouette und liegt damit auch am
                   gekippten Telefon richtig. Er sitzt eng am Geraet und
                   gibt ihm Koerper.
     Bodenschatten eine weiche Ellipse unter dem Geraet (.shot::after).
                   Sie gibt ihm einen Ort. Ohne sie schwebte das Geraet
                   im Nichts – genau das wirkte fehlplatziert.

   Damit der Bodenschatten am Boden bleibt, schwebt nicht mehr die ganze
   Aufnahme, sondern nur das Bild darin: .shot steht still und traegt die
   Ellipse, .shot img macht die Bewegung. Die Ellipse laeuft im selben
   Takt mit – je hoeher das Geraet steht, desto groesser und blasser wird
   sie, je tiefer, desto kleiner und dichter. Genau daran liest das Auge
   die Hoehe ab.

     .shots         Notebook und Telefon
     .shots--solo   nur Notebook, ueber die volle Breite

   Alle Prozentwerte beziehen sich auf die Breite der Buehne. Die
   Bildverhaeltnisse sind 1760:1066 (Notebook) und 760:1318 (Telefon);
   das Telefon steht bewusst rund ein Fuenftel groesser als massstabsgetreu
   – so liest es sich als das vordere Geraet. */
.shots{
  --shot-shadow: rgba(0, 0, 0, 0.45);
  --shot-ground: rgba(0, 0, 0, 0.66);
  --shot-glow:   rgba(116, 180, 118, 0.30);
  max-width: 640px;
  margin-inline: auto;
}
/* auf hellem Grund darf der Schatten nicht schwarz absaufen */
.section:not(.section--dark) .shots{
  --shot-shadow: rgba(20, 26, 21, 0.22);
  --shot-ground: rgba(20, 26, 21, 0.34);
  --shot-glow:   rgba(116, 180, 118, 0.26);
}

.shots-stage{
  position: relative;
  /* Platz fuer das Telefon, das unten aus dem Notebook herauslaeuft */
  padding-bottom: 6%;
}

/* Weicher Lichtkegel hinter der Anordnung – gibt der Szene einen Ort.
   Seitlich bewusst buendig: auf dem Telefon fuellt die Buehne fast die
   ganze Breite, ein Ueberstand nach links oder rechts brächte die ganze
   Seite ins Querscrollen. Der Verlauf lauft ohnehin weich aus. */
.shots-glow{
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: -8%;
  bottom: 2%;
  pointer-events: none;
  background: radial-gradient(64% 56% at 44% 46%, var(--shot-glow), transparent 74%);
}

/* position: relative gehoert an die Grundregel, nicht an die Varianten: der
   Bodenschatten unten ist absolut gesetzt und braucht seinen Bezugsrahmen.
   .shot--handy ueberschreibt das gleich wieder mit absolute – auch das ist
   ein Bezugsrahmen, der Schatten sitzt dort ebenso richtig. */
.shot{ position: relative; display: block; }
.shot img{ width: 100%; height: auto; display: block; }

/* Der Bodenschatten. z-index: -1 legt ihn hinter das Geraetebild, aber vor
   den Lichtkegel – das Bild ist freigestellt, der Schatten scheint also
   rundherum durch. Alle Prozentwerte beziehen sich hier auf die Aufnahme
   selbst, nicht auf die Buehne. */
.shot::after{
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--shot-ground) 26%, transparent 100%);
  pointer-events: none;
}

.shot--notebook{
  z-index: 1;
  width: 86%;
}
.shot--notebook img{
  filter: drop-shadow(0 14px 18px var(--shot-shadow));
  animation: shotFloatA 11s var(--ease) infinite;
}
/* Die Standflaeche des Notebooks liegt bei 8 bis 92 % der Bildbreite und
   ganz unten im Bild – die Ellipse folgt ihr. */
.shot--notebook::after{
  left: 9%;
  right: 9%;
  bottom: -3%;
  height: 8.5%;
  animation: shotGroundA 11s var(--ease) infinite;
}

.shot--handy{
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 25%;
}
.shot--handy img{
  filter: drop-shadow(-5px 12px 16px var(--shot-shadow));
  animation: shotFloatB 8.5s var(--ease) infinite;
}
/* Das Telefon steht gekippt: es setzt links unten auf, rechts hebt es ab.
   Die Ellipse ist deshalb nach links versetzt statt mittig. */
.shot--handy::after{
  left: 0;
  right: 22%;
  bottom: -2.5%;
  height: 7%;
  animation: shotGroundB 8.5s var(--ease) infinite;
}

/* gegenlaeufig und ungleich lang: die beiden Geraete geraten nie in Takt */
@keyframes shotFloatA{
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -1.5%; }
}
@keyframes shotFloatB{
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 2%; }
}
/* Das Notebook hebt ab – sein Schatten laeuft auseinander und wird blass */
@keyframes shotGroundA{
  0%, 100% { scale: 1 1;       opacity: 1; }
  50%      { scale: 1.07 1.16; opacity: 0.6; }
}
/* Das Telefon senkt sich – sein Schatten zieht sich zusammen und dunkelt */
@keyframes shotGroundB{
  0%, 100% { scale: 1 1;      opacity: 0.7; }
  50%      { scale: 0.9 0.82; opacity: 1; }
}

/* nur Notebook: es darf die ganze Breite nehmen */
.shots--solo .shots-stage{ padding-bottom: 0; }
.shots--solo .shot--notebook{ width: 100%; }

/* .shots--laptop (Referenz-Laptop auf webservices.html) steht komplett in
   webservices.css: es ist rein seiteneigene Optik, und #referenz als
   ID kommt auch auf optimierung.html vor (eigene Referenz-Grafik dort,
   .shots--solo) – ID-Regeln hier in page.css waeren beiden Seiten
   gemeinsam und haetten optimierung.html mit betroffen. */

/* Ohne Bewegung bleibt der Bodenschatten des Telefons in seinem
   Ruhezustand stehen – er verschwindet nicht, er hoert nur auf zu atmen. */
@media (prefers-reduced-motion: reduce){
  .shot img,
  .shot::after{ animation: none; }
}

/* ---------------------------------------------------------------- 8. Ablauf */
.steps{ display: grid; gap: 1rem; }

.step{
  position: relative;
  padding: 1.6rem 1.5rem 1.7rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
}
/* Die Ziffer traegt den Abschnitt – der Text bleibt bewusst knapp */
.step-num{
  display: block;
  font-family: var(--hc-mono);
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--green);
  margin-bottom: 0.9rem;
}
.step h3{ margin-bottom: 0.3rem; }
.step p{ color: var(--muted-dark); font-size: 0.98rem; }

/* ---------------------------------------------------------------- 9. FAQ */
.faq{ display: grid; gap: 0.6rem; }

.faq-item{
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item h3{ margin: 0; font-size: inherit; }

.faq-q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.faq-icon{ position: relative; width: 20px; height: 20px; flex: none; }
.faq-icon::before, .faq-icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2.4px;
  border-radius: 2px;
  background: var(--ink);
  translate: -50% -50%;
}
.faq-icon::after{ rotate: 90deg; transition: opacity 0.25s var(--ease); }
.faq-q[aria-expanded="true"] .faq-icon::after{ opacity: 0; }

.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
/* ohne JavaScript lässt sich nichts aufklappen – dann bleiben die Antworten offen */
html:not(.js) .faq-a{ max-height: none; }
html:not(.js) .faq-icon{ display: none; }
.faq-a p{ padding: 0 1.3rem 1.2rem; color: var(--muted); }

/* ---------------------------------------------------------------- 10. Kontakt
   Auf jeder Seite derselbe Block – Startseite wie Unterseiten. Links die
   Ueberschrift "KONTAKT", eine Zeile darunter und die beiden direkten
   Wege; rechts das Formular. Vorher trugen die Unterseiten eine eigene,
   helle Fassung im weissen Kasten und jede eine andere Frage als
   Ueberschrift. Das war viermal dieselbe Sache in vier Gestalten.

   Das Formular liegt auf einer eigenen, leicht aufgehellten Flaeche –
   derselben Sprache wie die Leistungskacheln. Ohne sie ging es auf dem
   dunklen Grund unter; ein weisser Kasten wiederum riss die Seite
   auseinander.

   Die Felder sind umrandet, nicht unterstrichen: Studien zeigen
   durchgehend, dass eingefasste Felder schneller als Eingabe erkannt und
   getroffen werden – Material hat den eigenen Unterstrich deshalb wieder
   kassiert.

   Alle Groessen sind fuers Telefon gerechnet: Schrift nie unter 16px
   (darunter zoomt iOS beim Antippen hinein), Zielflaechen ab 54px. */
.contact{ display: grid; gap: clamp(2rem, 1rem + 4vw, 3.4rem); align-items: start; }

/* Die kurze gruene Akzentlinie (.line) unter den Ueberschriften ist
   entfallen – sie hat den Abstand zwischen H2 und Lead getragen. Ohne
   Ersatz stiessen die beiden Zeilen aneinander. */
.split-text > h2 + .lead,
.contact-aside > h2 + .lead{ margin-top: clamp(0.9rem, 0.6rem + 0.6vw, 1.3rem); }

/* Telefon und E-Mail sind die einzigen zwei Punkte, die hier noch stehen –
   die Aufzaehlung darueber ist entfallen. Weil sie nun allein tragen,
   duerfen ihre Icons als einzige im Text das Markengruen fuehren. */
.contact-direct{ display: grid; gap: 0.15rem; margin-top: 1.8rem; font-size: 1.02rem; }
/* min-height sass zuvor bei 48px (Tap-Target-Empfehlung) - bei nur 1,02rem
   Text blieb dadurch viel Luft ÜBER dem gap-Wert selbst stehen, den auch
   ein kleinerer gap nicht wettmachen konnte: die Zeile war schlicht viel
   hoeher als ihr Inhalt. 36px haelt noch einen brauchbaren Tap-Target,
   ohne die beiden Zeilen so weit auseinanderzuziehen. */
.contact-direct a{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 36px;
  color: #fff;
  text-decoration: none;
}
.contact-direct a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.contact-direct svg{ width: 1.15rem; height: 1.15rem; color: var(--green); flex: none; }

.ws-form{
  position: relative;
  display: grid;
  gap: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  background: #17191a;
  border: 1px solid var(--card-line);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
/* Die gruene Kante oben ist entfallen: der Absende-Button traegt den
   Akzent, ein zweiter direkt darueber hat ihn nur geschwaecht. */

.field-row{ display: grid; gap: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem); }

.field{ display: grid; gap: 0.45rem; }
.field label{
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.field .req{ color: #fff; }
.field .opt{ font-weight: 400; color: rgba(255, 255, 255, 0.5); }

.field input,
.field select,
.field textarea{
  width: 100%;
  min-height: 54px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;              /* = 16px, sonst zoomt iOS beim Fokus */
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.field textarea{ resize: vertical; min-height: 140px; line-height: 1.55; }
.field select{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
                    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option{ background: #17191a; color: #fff; }
/* Pflichtstern, "(optional)" und Platzhalter tragen alle mindestens
   4,5:1 auf dem Feldgrund. */
.field ::placeholder{ color: rgba(255, 255, 255, 0.5); }

@media (hover: hover){
  .field input:hover,
  .field select:hover,
  .field textarea:hover{ border-color: rgba(255, 255, 255, 0.3); }
}

/* Fokusring und Erfolgsmeldung sind die beiden einzigen gruenen Stellen
   ausserhalb der Handlungsaufrufe und der zwei Kontaktwege – alle tragen
   eine Bedeutung und stehen so in brand.css fest. */
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--hc-green-soft);
}

.ws-form .btn{ margin-top: 0.3rem; }
.form-status{ min-height: 1.3em; font-weight: 700; font-size: 0.95rem; }
.form-status.is-ok{ color: var(--green); }
.form-status.is-error{ color: #ff8b7a; }
/* 0.5 statt 0.45: der Datenschutzlink erbt diese Farbe (er traegt keine
   eigene mehr), damit muss die Zeile die 4,5:1 sicher erreichen. */
.form-hint{ font-size: 0.84rem; color: rgba(255, 255, 255, 0.5); line-height: 1.5; }
.form-hint a{ color: #fff; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 11. Footer */
/* Der Fuss hat dieselbe Farbe wie ein dunkler Abschnitt – ohne die feine
   Linie ginge der Uebergang unsichtbar ineinander ueber. Dieselbe Linie
   wie zwischen Fuss und Zeile mit dem Copyright. */
.site-footer{
  background: var(--night);
  color: #fff;
  border-top: 1px solid var(--hair-dark);
}

/* Der Fuss liegt auf denselben Kanten wie die Kopfleiste: das Logo unten
   steht genau unter dem Logo oben, die rechte Spalte endet dort, wo der
   Handlungsaufruf endet. Das +1px gleicht den Rahmen der Leiste aus. */
.site-footer .wrap{
  width: min(100% - 2 * var(--gutter-edge), var(--wrap-header));
  max-width: none;
  padding-inline: calc(clamp(0.7rem, 1.2vw, 1.2rem) + 1px);
}

.footer-inner{
  display: grid;
  gap: 1.8rem;
  padding-block: clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
}
.footer-brand img{ width: 168px; }

.footer-col h2{
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
  margin-bottom: 0.8rem;
}
.footer-col a{
  display: block;
  padding: 0.26rem 0;
  color: var(--muted-dark);
  text-decoration: none;
  font-size: 0.96rem;
}
.footer-col a:hover{ color: #fff; }
/* Das LinkedIn-Icon steht am Ende der Kontakt-Spalte, nicht mehr neben dem
   Logo – so wie im Zielbild. */
.footer-col .footer-social{ display: inline-flex; margin-top: 0.5rem; }
.footer-col .footer-social img{ width: 26px; height: 26px; }

/* Datenschutz, Impressum und Cookie-Einstellungen stehen als eigene Zeile
   unter den beiden Spalten – nicht mehr Teil der Kontakt-Spalte. */
.footer-legal-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 2.2rem;
}
/* Der Cookie-Link ist ein <button> (oeffnet den Banner per JS, springt
   nicht zu #) - bekommt hier dieselbe Optik wie die <a>-Geschwister. */
.footer-legal-row a,
.footer-legal-row button{
  background: none;
  border: none;
  padding: 0;
  color: var(--muted-dark);
  text-decoration: none;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.96rem;
  cursor: pointer;
}
.footer-legal-row a:hover,
.footer-legal-row button:hover{ color: #fff; }

.footer-bottom{ border-top: 1px solid var(--hair-dark); }
.footer-bottom .wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 0.5rem 1.2rem;
  padding-block: 1.1rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom a{ color: inherit; text-decoration: none; }
.footer-bottom a:hover{ color: #fff; }

/* Auf dem Telefon bleibt der Handlungsaufruf immer erreichbar */
/* ---------------------------------------------------------------- 12. Reveal & Fokus */
/* Ohne JS bleibt alles sichtbar – die Klasse .js setzt erst webservices.js */
.js .reveal{ opacity: 0; transform: translateY(20px); }
.reveal{ transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-in{ opacity: 1; transform: none; }

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green);
  color: #10160f;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus{ left: 0; }

/* --hc-green-deep statt --hc-green: erreicht sowohl auf --hc-night (~3,8:1)
   als auch auf --hc-paper/Weiss (~5:1) das WCAG-Minimum von 3:1 fuer
   Nicht-Text-Kontrast (SC 1.4.11) - --hc-green allein schaffte auf hellem
   Grund nur ~2,5:1. */
:focus-visible{ outline: 3px solid var(--hc-green-deep); outline-offset: 3px; border-radius: 6px; }


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

/* ---------------------------------------------------------------- 13. Cookie-Banner
   Erscheint erst 10s nach dem Laden, nicht sofort beim Betreten (Timing
   siehe initCookieConsent in page.js) – das wirkt weniger aufdringlich als
   die uebliche sofortige Vollbild-Bremse. Unten rechts statt als Balken
   ueber der ganzen Breite, mit drei gleichwertig grossen Tasten
   (Alle akzeptieren / Nur notwendige / Einstellungen): keine grosse
   gruene Flaeche neben einem kleinen grauen Link, das laese sich als
   Trick lesen. Der Hintergrund dahinter dunkelt nur leicht ab und
   blockiert dabei bewusst keine Klicks (pointer-events: none) – wer die
   Seite trotzdem weiterlesen will, kann das, ohne vorher entscheiden zu
   muessen. */
.cookie-scrim{
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.cookie-scrim.is-visible{ opacity: 1; }

.cookie-banner{
  position: fixed;
  right: var(--gutter-edge);
  bottom: var(--gutter-edge);
  z-index: 211;
  width: min(24rem, calc(100% - 2 * var(--gutter-edge)));
  max-height: calc(100vh - 2 * var(--gutter-edge));
  overflow-y: auto;
  background: var(--night);
  color: #fff;
  border: 1px solid var(--hair-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-dark);
  padding: 1.6rem;
  translate: 0 12px;
  opacity: 0;
  pointer-events: none;
  transition: translate 0.45s var(--ease), opacity 0.45s var(--ease);
}
.cookie-banner.is-visible{
  translate: 0 0;
  opacity: 1;
  pointer-events: auto;
}

.cookie-banner h2{ font-size: 1.05rem; margin-bottom: 0.55rem; }
.cookie-banner p{
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-dark);
}
.cookie-banner a{ color: #fff; text-underline-offset: 3px; }

.cookie-banner-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
/* Gleich breit und gleich prominent, absichtlich in dieser Reihenfolge:
   auf einer schmalen Spalte (Umbruch) steht "Nur notwendige" dadurch als
   erste Option, nicht als nachtraeglich wirkende letzte. */
.cookie-banner-actions .btn{ flex: 1 1 9rem; }

/* Das Einstellungen-Unterfenster ersetzt die kurze Erklaerung durch drei
   Zeilen mit Kippschaltern statt eines zweiten Banners: derselbe Rahmen,
   dieselbe Position, kein Kontextwechsel. */
.cookie-view--settings h2{ margin-bottom: 0.9rem; }

.cookie-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--hair-dark);
  cursor: pointer;
}
.cookie-toggle:first-of-type{ border-top: none; }
.cookie-toggle-text{ display: block; font-size: 0.9rem; line-height: 1.45; }
.cookie-toggle-text strong{ display: block; font-size: 0.94rem; }
.cookie-toggle-text small{ display: block; color: var(--muted-dark); font-size: 0.82rem; margin-top: 0.15rem; }
.cookie-toggle input{
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--green);
}
.cookie-toggle input:disabled{ opacity: 0.6; }

@media (max-width: 430px){
  .cookie-banner{ right: var(--gutter-edge); left: var(--gutter-edge); width: auto; }
}

/* ---------------------------------------------------------------- 14. Breakpoints */
/* Schmale Geräte: die Handlungsaufrufe bleiben einzeilig und volle Breite */
@media (max-width: 430px){
  .btn--lg{ padding-inline: 1.2rem; font-size: 1rem; }
  .hero-actions{ gap: 0.7rem; }
  .hero-actions .btn{ width: 100%; }
}

@media (min-width: 560px){
  .steps{ grid-template-columns: 1fr 1fr; }
  .header-cta-long{ display: inline; }
  .header-cta-short{ display: none; }
}

@media (max-width: 719.98px){
  .contact-direct a{ font-size: 1.05rem; }
}

/* Datenschutz / Impressum / Cookie-Einstellungen: in der mobilen Ansicht
   untereinander statt nebeneinander umzubrechen - besser greifbar und
   liest sich als klare Liste statt als zufaellig zerrissene Zeile. */
@media (max-width: 859.98px){
  .footer-legal-row{ flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}

/* Zwei Felder nebeneinander erst, wenn sie auch zwei Spalten breit sein
   duerfen. Auf einem Telefon im Querformat waeren sie zu eng – einspaltig
   bis 720px ist auch die belegte Empfehlung fuer Formulare. */
@media (min-width: 720px){
  .field-row{ grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px){
  .nav{ display: flex; }
  .nav-toggle{ display: none; }
  .hero-scroll{ display: block; }
  .split{ grid-template-columns: 1fr 1fr; }
  .split--reverse .split-media{ order: 2; }
  .contact{ grid-template-columns: 1fr 1.05fr; }

  /* Ab hier stehen die Spalten nebeneinander: --footer-cols legt die
     Breite einmal fest, footer-inner UND footer-legal-row greifen beide
     darauf zu – so steht die Legal-Zeile exakt unter der Leistungen-
     Spalte, statt unter dem Logo, wie im Zielbild. Das Copyright darunter
     bleibt dagegen ueber die volle Breite zentriert (footer-bottom .wrap
     Grundregel weiter oben). */
  .site-footer{ --footer-cols: 1.7fr 1fr 1fr; }
  .footer-inner{ grid-template-columns: var(--footer-cols); gap: 2rem; }
  .footer-legal-row{ grid-column: 2 / -1; }

}

@media (min-width: 1080px){
  .steps{ grid-template-columns: repeat(4, 1fr); }
}

/* Leistungen und Kontakt stehen als Paar am rechten Rand: zwei feste
   Spalten, den Rest nimmt die Marke. Damit endet die Kontaktspalte auf
   derselben Kante wie der Handlungsaufruf in der Kopfleiste, und der
   Abstand der beiden Spalten zueinander bleibt wie gehabt. Erst ab 960px –
   darunter waere links kein Platz mehr fuer das Logo. */
@media (min-width: 960px){
  .site-footer{ --footer-cols: 1fr 19rem 19rem; }
}

/* Unter 860px wird die Navigation zur Schublade */
@media (max-width: 859.98px){
  /* WICHTIG: hier kein backdrop-filter auf der Leiste. Ein Element mit
     backdrop-filter wird zum Bezugsrahmen fuer position:fixed – die
     Schublade wuerde sonst in der 62px hohen Leiste eingesperrt statt
     den Bildschirm zu fuellen. Deckende Farbe tut es genauso. */
  .header-inner{
    background: rgba(16, 17, 18, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav{
    position: fixed;
    inset: var(--header-h) 0 0;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
    background: rgba(13, 13, 13, 0.985);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 -12px;
    transition: opacity 0.25s var(--ease), translate 0.25s var(--ease), visibility 0.25s;
  }
  /* WICHTIG: .nav-menu (Untermenue) setzt weiter unten aus eigenem Grund
     visibility:visible auf sich selbst (die Schublade zeigt die vier
     Leistungen immer offen an, kein zweiter Klick noetig) - das
     ueberschreibt die geerbte visibility:hidden der geschlossenen
     Schublade wieder und machte die Links dadurch bislang unsichtbar,
     aber weiterhin klickbar. pointer-events:none hier auf .nav selbst
     faengt genau das ab, egal was Kinder an visibility setzen. */
  body.nav-open .nav{ opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0; }
  body.nav-open{ overflow: hidden; }
  body.nav-open .header-inner{ background: rgba(16, 17, 18, 0.96); }

  .nav-link{
    justify-content: space-between;
    padding: 0.9rem 0.4rem;
    border-radius: 0;
    border-bottom: 1px solid var(--card-line);
    font-size: 1.1rem;
    color: #fff;
  }
  .nav-link.is-active::after,
  .nav-link[aria-current="page"]::after{ left: 0.4rem; right: auto; width: 1.6rem; bottom: 0.5rem; }

  /* In der Schublade steht das Untermenue offen – Aufklappen waere ein
     unnoetiger zweiter Griff. */
  .nav-item .nav-link[aria-expanded]{ pointer-events: none; }
  .nav-caret{ display: none; }
  .nav-menu{
    position: static;
    min-width: 0;
    translate: none;
    opacity: 1;
    visibility: visible;
    padding: 0.5rem 0 0.9rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }
  .nav-card{ padding: 0.6rem 0.4rem; white-space: normal; font-size: 1rem; }
}