/* ==========================================================================
   dogovor.de — Stylesheet (Fassung 2, bildgeführte Gestaltung)

   Gestaltungsprinzip
   ------------------
   Die Seite liegt als grosses abgerundetes Panel auf einem Himmelfoto.
   Wirkung entsteht ueber MASSSTAB, FOTOGRAFIE und UEBERLAGERUNG — nicht
   ueber Signalfarben: die Palette bleibt bewusst rein blau.

   Schrift: Playfair Display traegt jede grosse Aussage (hohe Serifenschrift,
   vollstaendig kyrillisch), Inter traegt Fliesstext und Bedienelemente.

   WICHTIG: Keine Inline-Styles im HTML verwenden. Die Content-Security-Policy
   in der .htaccess erlaubt nur Stile aus dieser Datei.

   Aufbau: 1 Tokens · 2 Grundlagen · 3 Typografie · 4 Raster · 5 Panel
           6 Kopfbereich · 7 Schaltflaechen · 8 Hero · 9 Laufband
           10 Zahlen · 11 Fotokarten · 12 Glossen · 13 Netze · 14 Ablauf
           15 Vollbild · 16 FAQ · 17 Formular · 18 CTA · 19 Fuss
           20 Rechtstexte · 21 Hilfsklassen
   ========================================================================== */

/* -------------------------------------------------- 1 Tokens */
:root{
  /* Blau — die einzige Farbfamilie der Marke */
  --tief:       #0a1633;
  --nacht:      #102a6b;
  --brand:      #1a35d6;
  --azur:       #3a63ff;
  --himmel:     #bcd4ff;
  --eis:        #e8f0ff;
  --nebel:      #f4f8ff;
  --paper:      #ffffff;

  --ink:        #0a1633;
  --ink-soft:   #55618a;
  --ink-mute:   #8b95b8;

  /* Papierton — nur noch als kleines Detail bei deutschen Vertragsbegriffen */
  --doc:        #fffdf6;
  --doc-line:   #e8dcc0;
  --doc-text:   #9c8752;

  --wa:         #25d366;
  --de-schwarz: #111111;
  --de-rot:     #dd0000;
  --de-gold:    #ffcc00;

  /* Masse */
  --breite:     1300px;
  --schmal:     780px;
  --rand:       clamp(20px, 4vw, 56px);
  --luft:       clamp(72px, 9vw, 132px);
  --luft-klein: clamp(48px, 6vw, 84px);
  --kopf-hoehe: 78px;

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --r-xl: 40px;

  --schatten-m: 0 4px 12px rgba(10,22,51,.06), 0 18px 44px rgba(10,22,51,.09);
  --schatten-l: 0 8px 20px rgba(10,22,51,.08), 0 34px 80px rgba(10,22,51,.16);

  --f-display: "Playfair Display", Georgia, serif;
  --f-text:    Inter, "Segoe UI", system-ui, sans-serif;
}

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* Himmelfoto hinter dem Panel. Fehlt es, bleibt der Verlauf sichtbar. */
  background-color: #7ea8e8;
  background-image: url("../img/foto/hero-hintergrund.webp"),
                    linear-gradient(170deg, #2f6bb8 0%, #7fb0e8 55%, #cfe4ff 100%);
  background-size: cover, auto;
  background-position: center top;
  background-attachment: fixed, scroll;
  background-repeat: no-repeat;
}

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

a{ color: var(--brand); text-underline-offset: 3px; }
a:hover{ color: var(--azur); }

:focus-visible{ outline: 3px solid var(--azur); outline-offset: 3px; border-radius: 4px; }
::selection{ background: var(--himmel); color: var(--ink); }

.sprung-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-s) 0; font-weight: 600; text-decoration: none;
}
.sprung-link:focus{ left: 0; }

/* -------------------------------------------------- 3 Typografie */
h1, h2, h3, h4{
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 .42em;
  text-wrap: balance;
}
h1{ font-size: clamp(2.7rem, 1.2rem + 6.2vw, 6.2rem); line-height: 1.0; }
h2{ font-size: clamp(2rem, 1.25rem + 3.4vw, 3.9rem); }
h3{ font-size: clamp(1.25rem, 1.08rem + .7vw, 1.7rem); font-weight: 600; line-height: 1.16; }
h4{ font-size: 1.15rem; font-weight: 600; }

/* Kursive Betonung in Ueberschriften — das Playfair-Kursiv ist der Blickfang */
em, .kursiv{ font-style: italic; }

p{ margin: 0 0 1.15em; }
p:last-child{ margin-bottom: 0; }

.lead{
  font-size: clamp(1.08rem, 1rem + .55vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.kicker{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-text);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 20px;
}
.kicker--hell{ color: rgba(255,255,255,.86); }

.flaggenpunkte{
  flex: none; display: inline-block; width: 30px; height: 7px;
  background-image:
    radial-gradient(circle 3.5px at 3.5px 3.5px, var(--de-schwarz) 99%, transparent 100%),
    radial-gradient(circle 3.5px at 3.5px 3.5px, var(--de-rot) 99%, transparent 100%),
    radial-gradient(circle 3.5px at 3.5px 3.5px, var(--de-gold) 99%, transparent 100%);
  background-size: 7px 7px; background-repeat: no-repeat;
  background-position: 0 0, 11px 0, 22px 0;
}
/* Auf dunklem Grund bleiben die Farben Schwarz-Rot-Gold unveraendert — sie stehen
   fuer die deutsche Flagge und duerfen nicht aufgehellt werden. Damit der schwarze
   Punkt sichtbar bleibt, liegt darunter eine weisse Platte (reiner Schlagschatten,
   veraendert das Kaestchenmass und damit die Punktpositionen nicht). */
.kicker--hell .flaggenpunkte,
.cta .flaggenpunkte,
.vollbild .flaggenpunkte,
.fuss .flaggenpunkte{
  background-color: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 5px #fff;
}

/* -------------------------------------------------- 4 Raster */
.huelle{ width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.huelle--schmal{ max-width: var(--schmal); }

.abschnitt{ padding-block: var(--luft); }
.abschnitt--eng{ padding-block: var(--luft-klein); }
.abschnitt--nebel{ background: var(--nebel); }
.abschnitt--eis{ background: var(--eis); }

.abschnitt__kopf{ max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.abschnitt__kopf--mitte{ margin-inline: auto; text-align: center; }
.abschnitt__kopf--mitte .kicker{ justify-content: center; }

/* Zweispaltiger Abschnittskopf: Titel links, Erlaeuterung rechts (wie in der Vorlage) */
.kopf-zweispaltig{
  display: grid; gap: clamp(16px, 3vw, 56px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.kopf-zweispaltig h2{ margin-bottom: 0; }
.kopf-zweispaltig p{ color: var(--ink-soft); font-size: 1rem; }
@media (max-width: 820px){
  .kopf-zweispaltig{ grid-template-columns: minmax(0, 1fr); align-items: start; }
}

.raster{ display: grid; gap: clamp(16px, 2vw, 26px); }
.raster--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){ .raster--3, .raster--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){ .raster--2, .raster--3, .raster--4{ grid-template-columns: minmax(0, 1fr); } }

/* Zwei Spalten mit Bild und Text */
.duo{
  display: grid; gap: clamp(28px, 4.5vw, 72px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.duo--oben{ align-items: start; }
@media (max-width: 900px){
  .duo{ grid-template-columns: minmax(0, 1fr); }
  /* Auf schmalen Geraeten steht der Text zuerst — ein Foto ohne
     vorherige Ueberschrift laesst den Leser ratlos zurueck. */
  .duo > .foto:first-child{ order: 2; }
}

/* -------------------------------------------------- 5 Das schwebende Panel */
.seite{
  position: relative;          /* Bezugspunkt fuer den ueberlagernden Kopfbereich */
  max-width: 1560px;
  margin: 22px auto;
  background: var(--paper);
  border-radius: var(--r-xl);
  overflow: clip;
  box-shadow: 0 30px 90px rgba(8,20,50,.32);
}
@media (max-width: 900px){
  .seite{ margin: 0; border-radius: 0; box-shadow: none; }
}

/* -------------------------------------------------- 6 Kopfbereich */
.kopf{
  position: absolute; inset: 0 0 auto 0; z-index: 50;
}
.kopf__innen{ display: flex; align-items: center; gap: 22px; min-height: var(--kopf-hoehe); }
.kopf__logo{ flex: none; display: block; line-height: 0; }
.kopf__logo img{ width: 190px; }
/* Zwei Logofassungen: hell fuer den dunklen Hero, dunkel fuer weisse Leisten */
.kopf__logo-dunkel{ display: none; }
.kopf--hell .kopf__logo-hell,
.kopf--mitlaufend .kopf__logo-hell{ display: none; }
.kopf--hell .kopf__logo-dunkel,
.kopf--mitlaufend .kopf__logo-dunkel{ display: block; }

/* Beim Zurueckscrollen faehrt eine kompakte weisse Leiste ein.
   Ohne sie gaebe es auf der langen Startseite streckenweise gar keinen
   Weg zum Kontakt — der Kopfbereich ist sonst absolut und scrollt weg. */
.kopf--mitlaufend{
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--himmel);
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.22,.7,.3,1);
}
.kopf--mitlaufend[data-sichtbar="true"]{ transform: translateY(0); }
.kopf--mitlaufend .kopf__innen{ min-height: 66px; }
.kopf--mitlaufend .knopf--glas{
  background: var(--wa); color: #05301a; border-color: transparent;
  box-shadow: 0 4px 14px rgba(37,211,102,.3);
}
.kopf--mitlaufend .knopf--glas:hover{ background: #1fc65e; color: #05301a; }

.nav{ margin-left: auto; }
.nav__liste{ display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__link{
  font-size: .95rem; font-weight: 500;
  color: rgba(255,255,255,.82); text-decoration: none;
  padding: 6px 0; position: relative; white-space: nowrap;
}
.nav__link:hover{ color: #fff; }
.nav__link[aria-current="page"]{ color: #fff; }
.nav__link[aria-current="page"]::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: rgba(255,255,255,.8);
}
.kopf__cta{ flex: none; }

/* Sprachumschalter RU / DE */
.sprachwahl{
  flex: none; display: flex; align-items: center; gap: 2px;
  margin-left: 14px; padding: 3px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
}
.sprachwahl__link{
  padding: 5px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-decoration: none; color: rgba(255,255,255,.74);
  transition: background .18s ease, color .18s ease;
}
.sprachwahl__link:hover{ color: #fff; }
.sprachwahl__link[aria-current]{ background: rgba(255,255,255,.92); color: var(--nacht); }
.kopf--hell .sprachwahl,
.kopf--mitlaufend .sprachwahl{ border-color: var(--himmel); }
.kopf--hell .sprachwahl__link,
.kopf--mitlaufend .sprachwahl__link{ color: var(--ink-soft); }
.kopf--hell .sprachwahl__link:hover,
.kopf--mitlaufend .sprachwahl__link:hover{ color: var(--brand); }
.kopf--hell .sprachwahl__link[aria-current],
.kopf--mitlaufend .sprachwahl__link[aria-current]{ background: var(--brand); color: #fff; }

/* Auf hellen Seiten (Kontakt, Rechtstexte) steht der Kopf auf Weiss */
.kopf--hell{ position: static; background: var(--paper); border-bottom: 1px solid var(--himmel); }
.kopf--hell .nav__link,
.kopf--mitlaufend .nav__link{ color: var(--ink-soft); }
.kopf--hell .nav__link:hover, .kopf--hell .nav__link[aria-current="page"],
.kopf--mitlaufend .nav__link:hover{ color: var(--brand); }
.kopf--hell .nav__link[aria-current="page"]::after{ background: var(--brand); }
.kopf--hell .burger,
.kopf--mitlaufend .burger{ border-color: var(--himmel); background: var(--paper); }
.kopf--hell .burger__strich,
.kopf--hell .burger__strich::before,
.kopf--hell .burger__strich::after,
.kopf--mitlaufend .burger__strich,
.kopf--mitlaufend .burger__strich::before,
.kopf--mitlaufend .burger__strich::after{ background: var(--ink); }

.burger{
  display: none; flex: none;
  width: 46px; height: 46px; margin-left: auto;
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-s);
  background: rgba(255,255,255,.12); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger__strich{ position: relative; }
.burger__strich, .burger__strich::before, .burger__strich::after{
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: #fff; transition: transform .22s ease, background .1s ease;
}
.burger__strich::before, .burger__strich::after{ content: ""; position: absolute; left: 0; }
.burger__strich::before{ transform: translateY(-6px); }
.burger__strich::after{ transform: translateY(6px); }
.burger[aria-expanded="true"] .burger__strich{ background: transparent; }
.burger[aria-expanded="true"] .burger__strich::before{ transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__strich::after{ transform: rotate(-45deg); }

.nav__cta-mobil{ display: none; }

@media (max-width: 1040px){
  .kopf__logo img{ width: 164px; }
  .sprachwahl{ margin-left: auto; }
  .burger{ display: flex; margin-left: 10px; }
  .kopf__cta{ display: none; }
  .nav{
    position: absolute; left: var(--rand); right: var(--rand); top: calc(var(--kopf-hoehe) - 4px);
    background: var(--paper); border-radius: var(--r-m);
    box-shadow: var(--schatten-l);
    display: none; margin-left: 0;
    max-height: calc(100dvh - var(--kopf-hoehe) - 20px); overflow-y: auto;
  }
  .nav[data-offen="true"]{ display: block; }
  .nav__liste{ flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 22px; }
  .nav__link{ display: block; padding: 14px 0; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--eis); }
  .nav__link:hover, .nav__link[aria-current="page"]{ color: var(--brand); }
  .nav__link[aria-current="page"]::after{ display: none; }
  .nav__cta-mobil{ display: block; margin-top: 18px; }
  .nav__cta-mobil .knopf{ width: 100%; }
}

/* -------------------------------------------------- 7 Schaltflaechen */
.knopf{
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--f-text); font-size: 1rem; font-weight: 600;
  line-height: 1.2; text-decoration: none; text-align: center;
  padding: 15px 28px; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; transition: transform .16s ease, box-shadow .22s ease, background .22s ease;
}
.knopf:hover{ transform: translateY(-2px); }
.knopf:active{ transform: translateY(0); }
.knopf svg{ flex: none; width: 20px; height: 20px; }

.knopf--wa{ background: var(--wa); color: #05301a; box-shadow: 0 6px 22px rgba(37,211,102,.34); }
.knopf--wa:hover{ background: #1fc65e; color: #05301a; box-shadow: 0 10px 30px rgba(37,211,102,.44); }

.knopf--haupt{ background: var(--brand); color: #fff; box-shadow: 0 6px 22px rgba(26,53,214,.3); }
.knopf--haupt:hover{ background: var(--azur); color: #fff; }

.knopf--dunkel{ background: var(--tief); color: #fff; }
.knopf--dunkel:hover{ background: var(--nacht); color: #fff; }

.knopf--rand{ background: transparent; color: var(--ink); border-color: var(--himmel); }
.knopf--rand:hover{ background: var(--eis); color: var(--brand); border-color: var(--brand); }

.knopf--glas{ background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(10px); }
.knopf--glas:hover{ background: rgba(255,255,255,.24); color: #fff; border-color: #fff; }

.knopf--gross{ padding: 19px 40px; font-size: 1.08rem; }
.knopf--klein{ padding: 11px 20px; font-size: .92rem; }
.knopf--breit{ width: 100%; }

.knopf-reihe{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.knopf-reihe--mitte{ justify-content: center; }

/* Textlink mit Pfeil */
.pfeil-link{
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: .96rem; color: var(--brand); text-decoration: none;
}
.pfeil-link::after{ content: "→"; transition: transform .18s ease; }
.pfeil-link:hover::after{ transform: translateX(5px); }

/* -------------------------------------------------- 8 Hero */
.hero{
  position: relative;
  padding-top: calc(var(--kopf-hoehe) + clamp(28px, 4vw, 52px));
  padding-bottom: clamp(0px, 2vw, 24px);
  background:
    radial-gradient(120% 90% at 50% 0%, #17398f 0%, #102a6b 42%, #1c4bb0 72%, #cfe2ff 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Signalbogen-Motiv aus dem Logo, sehr gross und sehr leise */
.hero::before{
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -34%; width: min(1180px, 128vw); aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; border: clamp(40px, 6vw, 78px) solid rgba(255,255,255,.05);
}
.hero__kopfzeile{ text-align: center; }
.hero h1{ color: #fff; margin-bottom: .3em; }
.hero__lead{
  max-width: 640px; margin: 0 auto;
  color: rgba(255,255,255,.8);
  font-size: clamp(1.02rem, .96rem + .45vw, 1.22rem); line-height: 1.62;
}

/* Buehne: Person in der Mitte, Karten links und rechts darueber */
.hero__buehne{
  position: relative;
  margin-top: clamp(18px, 2.6vw, 34px);
  min-height: clamp(420px, 46vw, 620px);
  display: grid; place-items: end center;
}
.hero__person{
  position: relative; z-index: 2;   /* sonst deckt der Platzhalter darunter das Bild zu */
  width: clamp(300px, 40vw, 560px);
  max-height: clamp(420px, 48vw, 660px);
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 30px 60px rgba(6,16,44,.4));
  /* unten weich in den Verlauf auslaufen lassen */
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

/* Glaskarten */
.glas{
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(16px) saturate(1.4);
  border-radius: var(--r-m);
  color: #fff;
  padding: 16px 20px;
  box-shadow: 0 10px 40px rgba(6,16,44,.22);
}
.glas__titel{ font-size: .95rem; font-weight: 600; line-height: 1.4; margin: 0; }
.glas__text{ margin: 4px 0 0; font-size: .84rem; color: rgba(255,255,255,.76); line-height: 1.45; }

.hero__glas-a, .hero__glas-b, .hero__anfrage{ position: absolute; z-index: 3; }
.hero__glas-a{ left: 0; top: 16%; max-width: 290px; }
.hero__glas-b{ left: 2%; top: 52%; max-width: 268px; }
.hero__anfrage{ right: 0; top: 20%; width: min(360px, 32vw); }

/* Avatarreihe */
.avatare{ display: flex; align-items: center; margin-bottom: 10px; }
.avatare img, .avatare span{
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6); object-fit: cover;
  margin-right: -12px; background: var(--eis);
}
.avatare span{
  display: grid; place-items: center; margin-right: 0; margin-left: 4px;
  background: rgba(255,255,255,.9); color: var(--nacht);
  font-size: .74rem; font-weight: 700; letter-spacing: -.02em;
}

/* Anfragekarte — funktionaler Ersatz fuer die Suchmaske der Vorlage */
.anfrage{
  background: var(--paper); border-radius: var(--r-l);
  padding: 22px; box-shadow: var(--schatten-l);
  text-align: left;
}
.anfrage__titel{
  font-family: var(--f-display); font-size: 1.18rem; font-weight: 600;
  margin: 0 0 14px; line-height: 1.25;
}
.anfrage .auswahl, .anfrage .eingabe{ margin-bottom: 10px; }
.anfrage__hinweis{ margin: 12px 0 0; font-size: .78rem; color: var(--ink-mute); line-height: 1.45; }

.hero__aktion{
  position: relative; z-index: 4;
  margin-top: clamp(-26px, -2vw, -10px);
  display: flex; justify-content: center;
  padding-bottom: clamp(24px, 3vw, 40px);
}

@media (max-width: 1100px){
  .hero__glas-a, .hero__glas-b{ display: none; }
  .hero__anfrage{ position: static; width: 100%; max-width: 420px; margin: 22px auto 0; }
  /* Die Schnellanfrage-Karte leistet dasselbe, nur mit vorformulierter
     Nachricht. Ein zweiter gruener Knopf direkt darunter entwertet beide. */
  .hero__aktion{ display: none; }
  .hero__buehne{ display: block; min-height: 0; }
  .hero__person{ margin: 0 auto; width: min(360px, 74vw); }
  .hero__aktion{ margin-top: 8px; }
}

/* -------------------------------------------------- 9 Laufband */
.laufband{
  background: var(--tief); color: #fff;
  overflow: hidden; padding-block: 18px;
}
.laufband__spur{
  display: flex; width: max-content;
  animation: laufen 46s linear infinite;
}
.laufband__gruppe{
  display: flex; align-items: center; gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
  font-family: var(--f-display); font-size: clamp(1rem, .9rem + .4vw, 1.28rem);
  white-space: nowrap;
}
.laufband__gruppe span::after{
  content: "✦"; margin-left: clamp(28px, 4vw, 56px);
  color: var(--azur); font-size: .8em; vertical-align: middle;
}
@keyframes laufen{ to{ transform: translateX(-50%); } }

/* Beim Darueberfahren anhalten — wer mitlesen will, soll das koennen.
   (Erfuellt zugleich WCAG 2.2.2: bewegte Inhalte muessen anhaltbar sein.) */
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur{ animation-play-state: paused; }

/* Hat das Betriebssystem "Animationen reduzieren" gesetzt, steht das Band still.
   Dann darf es aber nicht wie ein abgeschnittener Laufstreifen aussehen:
   die Eintraege werden zu einer zentrierten Reihe, die sauber umbricht. */
@media (prefers-reduced-motion: reduce){
  .laufband{ padding-inline: var(--rand); }
  .laufband__spur{
    animation: none;
    width: auto; flex-wrap: wrap; justify-content: center;
  }
  .laufband__gruppe{
    flex-wrap: wrap; justify-content: center;
    padding-right: 0; white-space: normal;
    row-gap: 6px;
  }
  /* Die zweite Gruppe existiert nur fuer die nahtlose Schleife. */
  .laufband__gruppe + .laufband__gruppe{ display: none; }
  /* Kein Trennzeichen hinter dem letzten Eintrag. */
  .laufband__gruppe span:last-child::after{ content: none; }
}

/* -------------------------------------------------- 10 Zahlenwand */
.zahlen{
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--himmel);
}
.zahl{ text-align: center; }
.zahl__wert{
  display: block; font-family: var(--f-display);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
  font-weight: 500; line-height: 1; letter-spacing: -.03em;
  color: var(--brand);
}
.zahl__text{ display: block; margin-top: 12px; font-size: .92rem; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 720px){ .zahlen{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -------------------------------------------------- 11 Fotos und Fotokarten */
.foto{
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, #dbe6ff 0%, #a9c4ff 100%);
  border-radius: var(--r-m);
}
.foto img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter, solange die Fotos fehlen — zeigt den erwarteten Dateinamen */
.foto__marke{
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-content: center; gap: 8px; text-align: center;
  padding: 20px; color: #2a4fb4;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.foto__marke b{ font-size: .84rem; letter-spacing: .04em; text-transform: none; }
.foto--4-3{ aspect-ratio: 4 / 3; }
.foto--16-9{ aspect-ratio: 16 / 9; }
.foto--16-10{ aspect-ratio: 16 / 10; }
.foto--hoch{ aspect-ratio: 3 / 4; }

/* Leistungskarte: Foto oben, heller Textkoerper darunter.
   Die Produktfotos sind hell und minimalistisch — unter einem dunklen
   Schleier wuerden sie verschwinden. */
.dienst{
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: inherit; text-decoration: none;
  border: 1px solid var(--himmel); border-radius: var(--r-l);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.dienst:hover{ transform: translateY(-5px); box-shadow: var(--schatten-l); border-color: var(--brand); }
.dienst .foto{ border-radius: 0; }
.dienst__innen{
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(22px, 2.4vw, 32px);
}
.dienst h3{ margin-bottom: .34em; }
.dienst p{ color: var(--ink-soft); font-size: .99rem; margin-bottom: 0; }
.dienst .pfeil-link{ margin-top: auto; padding-top: 20px; }

/* Schlichte Karte */
.karte{
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--himmel); border-radius: var(--r-m);
  padding: clamp(24px, 2.6vw, 34px);
}
.karte--eis{ background: var(--eis); border-color: transparent; }
.karte h3{ margin-bottom: .4em; }
.karte p{ color: var(--ink-soft); font-size: .99rem; }

/* -------------------------------------------------- 12 Glossen (klein) */
.begriff{
  display: inline-block;
  font-family: var(--f-text); font-weight: 600; font-size: .86em;
  color: var(--doc-text); background: var(--doc);
  border: 1px solid var(--doc-line); border-radius: 6px;
  padding: 1px 8px; margin-inline: 2px; white-space: nowrap;
}
.glossen{
  background: var(--doc); border: 1px solid var(--doc-line);
  border-radius: var(--r-m); padding: clamp(20px, 2.4vw, 30px);
}
.glossen__kopf{
  display: flex; align-items: center; gap: 11px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--doc-text); margin-bottom: 18px;
}
.glossen dl{ margin: 0; }
.glosse{ padding: 11px 0; }
.glosse + .glosse{ border-top: 1px solid var(--doc-line); }
.glosse__de{
  font-family: var(--f-text); font-weight: 700; font-size: .98rem;
  color: var(--nacht); margin: 0 0 2px;
}
.glosse__ru{ margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-soft); }

/* -------------------------------------------------- 12b Beispiel-Dialog
   Zeigt, wie eine Beratung tatsaechlich ablaeuft. Muss sichtbar als
   Beispiel gekennzeichnet sein — ein erfundener echter Chat waere irrefuehrend. */
.chat{
  background: var(--eis); border-radius: var(--r-l);
  padding: clamp(20px, 2.4vw, 30px);
  display: grid; gap: 12px;
}
.chat__marke{
  margin: 0 0 6px; text-align: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.chat__blase{
  max-width: 86%; margin: 0; padding: 12px 16px;
  font-size: .95rem; line-height: 1.5; color: var(--ink);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(10,22,51,.08);
}
.chat__blase--kunde{ justify-self: start; background: var(--paper); border-bottom-left-radius: 5px; }
.chat__blase--wir{ justify-self: end; background: #d9fdd3; border-bottom-right-radius: 5px; }
.chat__fuss{
  margin: 6px 0 0; text-align: center;
  font-size: .8rem; color: var(--ink-mute);
}

/* -------------------------------------------------- 13 Netze */
.netze{
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 760px){ .netze{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.netze__feld{
  display: grid; place-items: center;
  height: 104px; padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--himmel); border-radius: var(--r-m);
}
.netze__feld{ position: relative; }
.netze__feld img{ position: relative; z-index: 1; max-height: 58px; width: auto; object-fit: contain; }
/* Ersatzdarstellung, falls eine Logodatei fehlt: der Name wird lesbar gesetzt,
   statt ein kaputtes Bildsymbol zu zeigen. main.js entfernt ihn, sobald das
   Logo geladen ist. Die blosse Nennung fremder Marken ist zulaessig. */
.netze__name{
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-content: center; padding: 12px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink-soft);
  text-align: center;
}
.netze__hinweis{ margin-top: 26px; text-align: center; font-size: .86rem; color: var(--ink-mute); }

/* -------------------------------------------------- 14 Ablauf */
.schritte{ counter-reset: schritt; display: grid; gap: 0; }
.schritt{
  counter-increment: schritt;
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(24px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--himmel);
}
.schritt:last-child{ border-bottom: 1px solid var(--himmel); }
.schritt::before{
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); line-height: 1;
  color: var(--himmel); letter-spacing: -.04em;
}
.schritt h3{ margin-bottom: .32em; }
.schritt p{ color: var(--ink-soft); margin: 0; }
@media (max-width: 620px){
  .schritt{ grid-template-columns: 62px minmax(0, 1fr); gap: 14px; }
}

/* -------------------------------------------------- 15 Vollbild-Block */
.vollbild{
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(440px, 46vw, 620px);
  background: var(--tief);
}
.vollbild img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vollbild__schleier{
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(8,18,44,.95) 0%, rgba(8,18,44,.82) 42%,
                                     rgba(8,18,44,.42) 74%, rgba(8,18,44,.2) 100%);
}
.vollbild__innen{ position: relative; z-index: 2; max-width: 620px;
  padding-block: clamp(48px, 6vw, 88px); }
.vollbild .huelle{ position: relative; z-index: 2; }
.vollbild h2{ color: #fff; }
.vollbild p{ color: rgba(255,255,255,.8); font-size: 1.06rem; }

/* -------------------------------------------------- 16 FAQ */
.faq{ display: grid; gap: 0; border-top: 1px solid var(--himmel); }
.faq__punkt{ border-bottom: 1px solid var(--himmel); }
.faq__frage{
  display: flex; align-items: flex-start; gap: 18px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.08rem, 1rem + .5vw, 1.4rem);
  line-height: 1.3; color: var(--ink);
}
.faq__frage::-webkit-details-marker{ display: none; }
.faq__frage::after{
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--f-text); font-weight: 400;
  font-size: 1.7rem; line-height: 1; color: var(--brand);
  transition: transform .22s ease;
}
.faq__punkt[open] .faq__frage::after{ transform: rotate(45deg); }
.faq__frage:hover{ color: var(--brand); }
.faq__antwort{ padding: 0 60px 26px 0; color: var(--ink-soft); max-width: 76ch; }
.faq__antwort > :first-child{ margin-top: 0; }

/* -------------------------------------------------- 17 Formular */
.formular{
  background: var(--paper);
  border: 1px solid var(--himmel); border-radius: var(--r-l);
  box-shadow: var(--schatten-m);
  padding: clamp(26px, 3.2vw, 44px);
}
.feld{ margin-bottom: 20px; }
.feld__label{ display: block; margin-bottom: 8px; font-weight: 600; font-size: .93rem; color: var(--ink); }
.feld__pflicht{ color: var(--de-rot); }
.feld__hinweis{ display: block; margin-top: 7px; font-size: .84rem; color: var(--ink-mute); }

.eingabe, .auswahl, .textfeld{
  width: 100%; font-family: var(--f-text); font-size: 1rem; color: var(--ink);
  background: var(--nebel);
  border: 1.5px solid transparent; border-radius: var(--r-s);
  padding: 14px 16px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.eingabe:hover, .auswahl:hover, .textfeld:hover{ background: var(--eis); }
.eingabe:focus, .auswahl:focus, .textfeld:focus{
  outline: none; background: var(--paper);
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(26,53,214,.12);
}
.eingabe::placeholder, .textfeld::placeholder{ color: var(--ink-mute); }
.textfeld{ min-height: 140px; resize: vertical; line-height: 1.6; }
.auswahl{
  appearance: none; cursor: pointer; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%),
                    linear-gradient(135deg, var(--brand) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

.zustimmung{ display: flex; gap: 13px; align-items: flex-start; margin-bottom: 24px; }
.zustimmung input{ flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--brand); }
.zustimmung label{ font-size: .91rem; line-height: 1.55; color: var(--ink-soft); }

.rechenfeld{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rechenfeld .eingabe{ width: 120px; }
.rechenfeld .feld__hinweis{ margin: 0; }

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

.meldung{ padding: 16px 20px; border-radius: var(--r-s); margin-bottom: 24px; font-size: .95rem; border: 1px solid; }
.meldung--fehler{ background: #fff2f2; border-color: #f3c3c3; color: #8a1c1c; }
.meldung ul{ margin: .5em 0 0; padding-left: 1.2em; }

/* -------------------------------------------------- 18 CTA */
.cta{
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 12% 0%, #1c4bb0 0%, #102a6b 55%, #0a1633 100%);
  color: #fff; border-radius: var(--r-xl);
  padding: clamp(38px, 5vw, 76px);
  text-align: center;
}
.cta::before{
  content: ""; position: absolute; pointer-events: none;
  left: 50%; bottom: -62%; translate: -50% 0;
  width: min(760px, 92%); aspect-ratio: 1; border-radius: 50%;
  border: 46px solid rgba(255,255,255,.06);
}
.cta__bild{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__schleier{
  position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(16,42,107,.93) 0%, rgba(10,22,51,.9) 100%);
}
.cta__innen{ position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
.cta h2{ color: #fff; }
.cta p{ color: rgba(255,255,255,.78); font-size: 1.08rem; }
.cta .kicker{ color: rgba(255,255,255,.7); justify-content: center; }

/* -------------------------------------------------- 19 Fussbereich */
.fuss{ background: var(--tief); color: rgba(255,255,255,.66); padding-block: clamp(52px, 6vw, 84px) 30px; }
.fuss a{ color: rgba(255,255,255,.8); text-decoration: none; }
.fuss a:hover{ color: #fff; text-decoration: underline; }
.fuss__oben{
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.fuss__logo img{ width: 196px; margin-bottom: 20px; }
.fuss__text{ font-size: .95rem; max-width: 360px; }
.fuss h4{ color: #fff; font-family: var(--f-text); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.fuss__liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.fuss__hinweis{
  padding-top: 22px; font-size: .82rem; line-height: 1.6;
  color: rgba(255,255,255,.46); max-width: 78ch;
}
.fuss__unten{
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  padding-top: 18px; font-size: .85rem; color: rgba(255,255,255,.5);
}
.fuss__unten nav{ display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 820px){
  .fuss__oben{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__logo{ grid-column: 1 / -1; }
}
@media (max-width: 520px){
  .fuss__oben{ grid-template-columns: minmax(0, 1fr); }
  .fuss__unten nav{ margin-left: 0; }
}

.wa-fab{
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: none; align-items: center; gap: 10px;
  padding: 14px 22px 14px 18px; border-radius: 999px;
  background: var(--wa); color: #05301a; font-weight: 700; font-size: .97rem;
  text-decoration: none; box-shadow: 0 8px 28px rgba(5,48,26,.3);
}
.wa-fab svg{ width: 22px; height: 22px; flex: none; }
.wa-fab{
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.wa-fab[data-sichtbar="true"]{ opacity: 1; visibility: visible; transform: none; }
@media (max-width: 1040px){ .wa-fab{ display: inline-flex; } .fuss{ padding-bottom: 96px; } }

/* -------------------------------------------------- 20 Seitenkopf und Rechtstexte */
.seitenkopf{ background: var(--nebel); border-bottom: 1px solid var(--himmel); padding-block: clamp(34px, 4vw, 60px); }
.seitenkopf h1{ font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem); margin-bottom: .24em; }
.seitenkopf .lead{ max-width: 700px; }
.brotkrumen{ font-size: .85rem; color: var(--ink-mute); margin-bottom: 20px; display: flex; gap: 9px; flex-wrap: wrap; }
.brotkrumen a{ color: var(--ink-soft); text-decoration: none; }
.brotkrumen a:hover{ color: var(--brand); text-decoration: underline; }

.rechtstext{ max-width: var(--schmal); }
.rechtstext h2{ font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); margin-top: 0; }
.rechtstext p, .rechtstext li{ font-size: 1rem; }
.rechtstext ul{ padding-left: 1.3em; }
.rechtstext li{ margin-bottom: .4em; }
.rechtstext address{ font-style: normal; margin-bottom: 1.1em; }
.rechtstext address:last-child{ margin-bottom: 0; }

.zweisprachig{ display: grid; gap: 0; margin-bottom: 2.6em; }
.zweisprachig__de{
  background: var(--doc); border: 1px solid var(--doc-line);
  border-radius: var(--r-m) var(--r-m) 0 0; padding: 24px 28px;
}
.zweisprachig__ru{
  background: var(--paper); border: 1px solid var(--himmel); border-top: none;
  border-radius: 0 0 var(--r-m) var(--r-m); padding: 24px 28px;
}
.zweisprachig__marke{
  display: inline-block; margin-bottom: 12px;
  font-family: var(--f-text); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
}
.zweisprachig__de .zweisprachig__marke{ color: var(--doc-text); }
.zweisprachig p:last-child, .zweisprachig ul:last-child{ margin-bottom: 0; }

/* -------------------------------------------------- 21 Hilfsklassen */
.nur-fuer-screenreader{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mitte{ text-align: center; }
.mass{ max-width: 68ch; }
.abstand-oben{ margin-top: clamp(28px, 3.5vw, 46px); }
.text-block > * + *{ margin-top: 1.15em; }
.text-block ul{ padding-left: 1.25em; }
.text-block li{ margin-bottom: .5em; }

@media (prefers-reduced-motion: no-preference){
  .einblenden{ animation: auf .7s cubic-bezier(.22,.7,.3,1) backwards; }
  .einblenden--2{ animation-delay: .1s; }
  .einblenden--3{ animation-delay: .2s; }
  @keyframes auf{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print{
  .kopf, .fuss, .wa-fab, .cta, .knopf, .burger, .laufband{ display: none !important; }
  body{ background: none; font-size: 11pt; }
  .seite{ box-shadow: none; margin: 0; }
}