/* ============================================================
   Philippi & Bühler Digital — gemeinsames Stylesheet (alle Seiten)
   v6.1 — Liquid-Glass-Feinschliff, Hero-Marken-Symbol, wärmere Optik
   Farben: Flaechen #FFFFFF · Text #292321 · Petrol #1D5B4D ·
           Grün #24745E · Mint #A9D8C8 · Linien #DED8D0
   ============================================================ */
:root{
  /* ---------- Farben ---------- */
  /* v6.2: die Creme-Toene --bg (#F7F4EF) und --bg-soft (#F1EBE1) sind
     entfallen. Jede helle Flaeche laeuft ueber --paper, damit zwischen
     zwei hellen Sections keine Kante mehr entstehen kann. */
  --paper:#FFFFFF;
  --ink:#292321; --muted:#6E655D;
  --petrol:#1D5B4D; --petrol-deep:#123A31; --petrol-black:#0B211B;
  --green:#24745E; --mint:#A9D8C8; --mint-tint:#E6F1EC;
  --teal:#0d9488; --teal-deep:#0f766e;
  --line:#DED8D0; --line-on-dark:rgba(255,255,255,.14); --line-faint:rgba(255,255,255,.9);
  --grad-brand:linear-gradient(100deg,var(--petrol) 8%,var(--green) 52%,var(--mint) 92%);

  /* ---------- Abstände ---------- */
  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem;
  --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;

  /* ---------- Typografie ---------- */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.05rem; --fs-lg:1.2rem;
  --fs-h1:clamp(2.3rem,6.6vw,4.75rem); --fs-h2:clamp(1.85rem,3.4vw,2.6rem); --fs-page-h1:clamp(2rem,4.6vw,3.1rem);

  /* ---------- Radien ---------- */
  --radius-sm:12px; --radius-md:18px; --radius-lg:26px; --radius-pill:999px;

  /* ---------- Schatten (weich: nahe+ferne Schicht kombiniert = natürlicher Streulichteffekt) ----------
     v6.1: Basis von kühlem Petrol-Grün auf warmes Mokka/Kohle verschoben
     (Wärme-Vorgabe "weiche, warme Schatten"), Deckkraft unverändert. */
  --shadow-sm:0 1px 2px rgba(41,35,33,.04),0 8px 20px rgba(41,35,33,.06);
  --shadow-md:0 4px 10px rgba(52,42,32,.09),0 24px 52px rgba(52,42,32,.15);
  --shadow-lg:0 10px 24px rgba(28,21,15,.2),0 36px 84px rgba(28,21,15,.32);
  --warm-glow:rgba(199,146,92,.16);

  /* ---------- Motion ---------- */
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.4,.4,1);
  --dur-fast:.25s; --dur-med:.4s; --dur-slow:.7s; --dur-shine:7s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--paper);width:100%;overflow-x:hidden}
body{font-family:var(--sans);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:var(--paper)}
/* Lange deutsche Komposita sind auf 320px breiter als die Spalte. break-word
   greift erst, wenn eine Zeile sonst ueberliefe - normale Woerter bleiben
   unangetastet. */
h1,h2,h3,h4,h5,p,li,a,span,td,th,label,figcaption{overflow-wrap:break-word}
img,svg{max-width:100%;display:block}
a{color:var(--petrol);text-decoration:none}
a[href^="tel:"]{white-space:nowrap}
ul{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding-left:26px;padding-right:26px}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--petrol);color:#fff;padding:.8rem 1.2rem;border-radius:10px;z-index:999;transition:top .2s var(--ease)}
.skip-link:focus{top:12px}

/* ---------- Typografie ---------- */
.display{font-weight:800;letter-spacing:-.03em;line-height:1.04}
h1.display{font-size:var(--fs-h1)}
.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
/* --grad-brand startet auf Petrol (#1D5B4D). Auf den vier dunklen Petrol-
   Flaechen stand das erste Drittel des Akzentworts damit praktisch unsichtbar
   dunkel auf dunkel ("Keine [Fantasie]preise", "Lernen wir uns [kennen]",
   "Sollen wir bei Ihnen [loslegen]", "Ihrem [Geschaeft]"). Hier laeuft der
   Verlauf deshalb Mint -> Weiss: beide Stops sind hell, das Wort bleibt ueber
   die ganze Laenge lesbar und trotzdem als Akzent erkennbar. */
.page-hero .grad,
.close-band .grad,
.cta-band .grad,
.finish-card .grad{background:linear-gradient(100deg,var(--mint) 10%,#FFFFFF 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.shine{position:relative;background:linear-gradient(100deg,var(--petrol) 34%,var(--mint) 46%,#fff 50%,var(--mint) 54%,var(--petrol) 66%);background-size:220% 100%;background-position:160% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine-sweep var(--dur-shine) linear infinite;animation-delay:1.2s}
@keyframes shine-sweep{0%{background-position:200% 0}100%{background-position:-120% 0}}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--green);opacity:.7}
.eyebrow.on-dark{color:var(--mint)}.eyebrow.on-dark::before{background:var(--mint)}
.eyebrow.center{justify-content:center}
.h2{font-weight:700;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.h2.on-dark{color:#fff}
.lead{font-size:1.08rem;color:var(--muted);max-width:38rem;margin-top:1rem}
.lead+.lead{margin-top:.85rem}
.lead.center{margin-inline:auto;text-align:center}
.section-head{max-width:44rem;margin-bottom:2.6rem}
.section-head .eyebrow{margin-bottom:.9rem}
.section-head.center{margin-inline:auto;text-align:center}

/* ---------- Sections ---------- */
.section{padding:clamp(4rem,9vh,6.5rem) 0;position:relative}
.section--tint{background:var(--paper)}
.section--paper{background:var(--paper)}
/* Rhythmischere Abstände statt gleichförmigem Section-Padding (nutzt bestehende IDs) */
#leistungen{padding-top:clamp(3rem,6.5vh,4.75rem)}
#ablauf{padding-bottom:clamp(5rem,11vh,8rem)}

/* ---------- Liquid-Glass Buttons (v6.2.4/v6.2.6/v6.2.9/v6.2.11) ----------
   Echtes Glas statt matter Farbe: Hintergrund nur noch rgba(255,255,255,…)
   in niedriger Opacity, kein Grün/Petrol mehr im Hintergrund. Transparenz +
   backdrop-filter (blur+saturate+brightness) sorgen dafür, dass der
   Untergrund durchscheint; Rand + oberes Glanzlicht (::before, inset-
   shadow) + Maus-Glanz (::after) + Outer-Glow (box-shadow) bleiben rein
   weiß/neutral. Text bleibt hier WEISS: diese Basis-Regel + .btn-primary/
   .btn-secondary sind das, was auf dunklen/farbigen Flächen läuft
   (cta-band, close-band, finish-card) — dort ist weißer Text korrekt und
   gut lesbar (per Screenshot bestätigt). Für die 4 Buttons auf hellem
   Untergrund (Header, Mobile-Menü, Hero, Kontaktformular) siehe den
   v7.1-Block weiter unten: dort bekommt die Fläche selbst deckendes
   Petrol/Grün statt Klarglas, weißer Text bleibt also überall gleich. */
.btn{position:relative;isolation:isolate;z-index:auto;overflow:hidden;display:inline-flex;align-items:center;gap:.55rem;
  font:700 .98rem/1 var(--sans);color:#fff;padding:1rem 1.7rem;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.4);cursor:pointer;
  -webkit-backdrop-filter:blur(20px) saturate(200%);backdrop-filter:blur(20px) saturate(200%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 8px 32px rgba(0,0,0,.1),
    0 8px 24px rgba(13,148,136,.25),0 0 20px rgba(6,182,212,.10);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease,filter .3s ease;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 42%)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:3;
  transition:opacity .35s ease;
  background:radial-gradient(140px 140px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 62%)}
.btn:hover::after{opacity:1}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5);filter:brightness(1.05);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6),0 12px 40px rgba(0,0,0,.15),
    0 12px 32px rgba(13,148,136,.35),0 0 28px rgba(6,182,212,.18)}
.btn:active,.btn.is-pressed{transform:translateY(0) !important;transition-duration:.15s;filter:none;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 4px 16px rgba(0,0,0,.08),
    0 4px 14px rgba(13,148,136,.2),0 0 12px rgba(6,182,212,.08) !important}
.btn:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:rgba(255,255,255,.14)}
.btn-primary:hover{background:rgba(255,255,255,.2)}
.btn-secondary{background:rgba(255,255,255,.08)}
.btn-secondary:hover{background:rgba(255,255,255,.14)}

/* ---------- Liquid-Glass CTA — animierter Rand + Shimmer (v7.0) ----------
   Ergänzt die Glas-Basis oben um die beiden Pflicht-Ebenen aus dem
   Liquid-Glass-Briefing: einen rotierenden conic-gradient-Ring (Teal→
   Petrol-Deep→Cyan) hinter der Glas-Fläche + einen unabhängigen
   Glanz-Sweep über der Fläche.

   Der Ring sitzt auf einem WRAPPER (.btn-glow), nicht hinter .btn: .btn
   hat backdrop-filter:blur(20px), das jede Farbe direkt unter seiner
   eigenen Box ansaugt und über die volle Fläche verschmiert — ein Ring
   direkt hinter .btn (egal ob als überlappendes ::before oder als
   maskierter Kind-Span; beides getestet) wird dadurch entweder zum
   breiten Farbstreifen quer über den Button oder zeigt Masking-Render-
   Artefakte statt eines sauberen Rings. Die Lösung: zwei background-
   Layer auf dem Wrapper selbst — Layer 1 (padding-box) ist eine FLACHE
   Deckfarbe, die exakt den Bereich unter .btn abdeckt (dieselbe Farbe,
   die dort ohnehin sichtbar wäre, siehe die hell/dunkel-Varianten
   unten), Layer 2 (border-box) ist der conic-gradient. Weil Layer 1 opak
   ist, deckt es den Gradienten im Content-Bereich komplett ab — kein
   Masking nötig, reines background-clip, seit Jahren stabil. .btn's
   backdrop-filter tastet dadurch nur die flache Deckfarbe ab (kein
   sichtbarer Unterschied im Glas-Effekt), nicht den Gradienten.
   Rotation: NICHT per transform:rotate() auf .btn-glow selbst — das
   würde die gesamte Box inkl. Text/.btn mitdrehen (getestet, Button kippt
   sichtbar). Stattdessen wandert der `from`-Winkel des conic-gradient
   selbst über eine animierbare @property — nur die Farbe rotiert, Text
   und Layout bleiben unberührt. Browser ohne @property (sehr alte
   Firefox-Versionen) zeigen einen statischen, aber vollständig sichtbaren
   Ring — sauberer Fallback, kein Blocker. Shine bleibt ein Kind-Span IN
   .btn (dort korrekt, weil er ÜBER der Glas-Fläche sweepen soll) und wird
   von .btn{overflow:hidden} sauber auf die Pill-Form geclippt. Zentral
   einmal definiert, gilt für jeden .btn (primary + secondary) überall. */
@property --btn-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn-glow{--btn-angle:0deg;position:relative;display:inline-flex;align-items:center;justify-content:center;isolation:isolate;
  padding:3px;border-radius:calc(var(--radius-pill) + 3px);
  background:
    linear-gradient(var(--petrol-deep),var(--petrol-deep)) padding-box,
    conic-gradient(from var(--btn-angle),#063f3c,#08756d,#0d9488,#14b8a6,#06b6d4,#063f3c) border-box;
  animation:btn-ring-spin 4s linear infinite;
  box-shadow:0 8px 24px rgba(13,148,136,.22),0 0 20px rgba(6,182,212,.12);
  transition:box-shadow .3s ease}
.btn-glow:hover{box-shadow:0 12px 32px rgba(13,148,136,.32),0 0 28px rgba(6,182,212,.2)}
.btn-glow:has(.btn-secondary){
  background:
    linear-gradient(var(--petrol-deep),var(--petrol-deep)) padding-box,
    conic-gradient(from var(--btn-angle),rgba(6,63,60,.55),rgba(8,117,109,.55),rgba(13,148,136,.55),rgba(20,184,166,.55),rgba(6,182,212,.55),rgba(6,63,60,.55)) border-box;
  box-shadow:0 6px 18px rgba(13,148,136,.12),0 0 14px rgba(6,182,212,.07)}
/* Helle Sektionen (Header, Mobile-Menü, Hero, Kontaktformular) — Deckfarbe
   der Layer-1-Maske auf Creme statt Petrol-Dunkel, sonst zeichnet sich ein
   dunkler Ring gegen den hellen Untergrund ab. Exakt dieselben 4 Stellen
   wie beim hell/dunkel-Text-Split unten. */
.nav-right .btn-glow:has(.nav-cta-desktop),
.mobile-menu .btn-glow,
.hero .btn-glow,
#contactForm .btn-glow{
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    conic-gradient(from var(--btn-angle),#063f3c,#08756d,#0d9488,#14b8a6,#06b6d4,#063f3c) border-box}
.nav-right .btn-glow:has(.nav-cta-desktop){
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    conic-gradient(from var(--btn-angle),rgba(6,63,60,.55),rgba(8,117,109,.55),rgba(13,148,136,.55),rgba(20,184,166,.55),rgba(6,182,212,.55),rgba(6,63,60,.55)) border-box}
.btn-shine{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;overflow:hidden;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.10) 65%,transparent 80%);
  transform:translateX(-150%);animation:btn-shine-sweep 4.2s ease-in-out infinite}
.btn-content{position:relative;z-index:4;display:inline-flex;align-items:center;gap:.55rem}
@keyframes btn-ring-spin{to{--btn-angle:360deg}}
@keyframes btn-shine-sweep{0%{transform:translateX(-150%)}14%{transform:translateX(150%)}100%{transform:translateX(150%)}}
@media (prefers-reduced-motion:reduce){
  .btn-glow,.btn-shine{animation:none}
}
/* v7.1: Rückkehr zu farbigem Petrol/Grün-Glas (statt Klarglas) für dieselben
   4 Buttons (Header, Mobile-Menü, Hero, Kontaktformular). v6.2.5-v6.2.10
   hatten hier auf dunklen Text umgestellt, weil WEISSER Text auf
   fast-transparentem Klarglas vor hellem Seiten-Hintergrund unlesbar war.
   Der Fix hier setzt an einer anderen Stelle an: die Fläche bekommt jetzt
   selbst eine deckende Petrol/Grün-Farbe (wie .btn-primary/.btn-secondary
   auf dunklen Flächen) statt nur 14% Weiß-Transparenz — weißer Text hat
   dadurch wieder genug Kontrast direkt gegen die Button-Fläche, unabhängig
   vom hellen Untergrund dahinter. Rand/Fokus-Ring bleiben auf der weißen
   Basisfarbe aus .btn (jetzt wieder gut sichtbar, da der Untergrund selbst
   dunkler ist) — keine eigene Override mehr nötig. */
.nav-cta-desktop,
.mobile-menu .btn-primary,
.hero .btn-primary,
#contactForm .btn-primary{background:
    radial-gradient(60% 130% at 20% -10%,rgba(255,255,255,.35),transparent 60%),
    linear-gradient(160deg,rgba(36,116,94,.92) 0%,rgba(29,91,77,.95) 55%,rgba(18,58,49,.97) 100%);
  color:#fff}
.nav-cta-desktop:hover,
.mobile-menu .btn-primary:hover,
.hero .btn-primary:hover,
#contactForm .btn-primary:hover{background:
    radial-gradient(60% 130% at 20% -10%,rgba(255,255,255,.45),transparent 60%),
    linear-gradient(160deg,rgba(36,116,94,1) 0%,rgba(29,91,77,1) 55%,rgba(18,58,49,1) 100%)}
.btn-lg{padding:1.15rem 2rem;font-size:1.03rem}
.textlink{position:relative;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.98rem;border-bottom:1.5px solid currentColor;padding-bottom:2px;opacity:.85;transition:opacity .2s,gap .2s var(--ease)}
.textlink:hover{opacity:1;gap:.6rem}
@media (prefers-reduced-transparency:reduce){
  .btn{-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn-primary,.btn-secondary,
  .nav-cta-desktop,
  .mobile-menu .btn-primary,
  .hero .btn-primary,
  #contactForm .btn-primary{background:var(--petrol)}
}

/* ---------- Header ----------
   Immer helles Creme-Glas, unabhängig von Scroll-Position oder
   Seiteninhalt darunter — konsistentes iOS26-Materialverhalten.
   z-index:9999 muss der höchste positive Wert in dieser Datei bleiben,
   kein Vorfahre von .site-header darf isolation/transform/filter setzen. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:9999;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),padding .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding-top:1.2rem;padding-bottom:1.2rem}
.site-header.scrolled{border-color:var(--line);box-shadow:0 8px 30px rgba(41,35,33,.06)}
.site-header.scrolled .bar{padding-top:.8rem;padding-bottom:.8rem}
.logo{display:inline-flex;align-items:center;gap:.8rem;color:var(--ink)}
.logo-mark{width:40px;height:40px;flex:0 0 auto}
.logo-mark .lm-a{fill:var(--petrol)}.logo-mark .lm-b{fill:var(--green)}
.logo-name{font-size:1.1rem;color:var(--ink);font-weight:500;white-space:nowrap}
.logo-name b{font-weight:700}
.nav-right{display:flex;align-items:center;gap:1.8rem}
.nav-links{position:relative;display:flex;gap:.3rem}
/* v6.0: EIN gleitendes Liquid-Glass-Pill statt Hintergrund pro Link.
   script.js setzt transform:translateX() + width passend zum aktiven/
   gehoverten Link; "ready" schaltet die Sichtbarkeit erst nach der
   ersten (transitionslosen) Positionierung frei, damit beim Laden kein
   Herein-Gleiten von Position 0 passiert. */
.nav-pill{position:absolute;top:0;left:0;height:100%;border-radius:var(--radius-pill);z-index:0;
  background:linear-gradient(160deg,rgba(36,116,94,.85) 0%,rgba(18,58,49,.9) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(210%);backdrop-filter:blur(14px) saturate(210%);
  border:1px solid rgba(169,216,200,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 14px rgba(11,33,27,.2);
  opacity:0;transition:transform .4s var(--ease),width .4s var(--ease),opacity .25s ease;
  pointer-events:none}
.nav-pill.ready{opacity:1}
.nav-links a{position:relative;z-index:1;color:var(--muted);font-weight:600;font-size:.94rem;padding:.5rem .9rem;border-radius:var(--radius-pill);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:#fff}
@media (prefers-reduced-transparency:reduce){
  .nav-pill{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--petrol)}
}
@media (prefers-reduced-motion:reduce){
  .nav-pill{transition:opacity .01s linear}
}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{overflow:hidden;max-height:0;transition:max-height .4s var(--ease);background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-top:1px solid transparent}
.mobile-menu.open{border-color:var(--line)}
.mobile-menu .wrap{display:flex;flex-direction:column;padding-top:.2rem;padding-bottom:1.1rem}
.mobile-menu a:not(.btn){color:var(--ink);font-weight:600;font-size:1.02rem;padding:.85rem .2rem;border-bottom:1px solid var(--line)}
.mobile-menu a.active{color:var(--petrol)}
.mobile-menu .btn{justify-content:center}
.mobile-menu .btn-glow{margin-top:1rem}
.mobile-menu.open{max-height:520px}
@media (prefers-reduced-transparency:reduce){
  .site-header,.mobile-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
}

/* ---------- Seiten-Kopf (Unterseiten: Über uns, Erstgespräch, Impressum, Datenschutz) ----------
   .page-hero wraps .site-header on these 4 pages — do not add isolation
   here (see note on .site-header above). */
.page-hero{position:relative;color:#fff;overflow:hidden;
  background:radial-gradient(900px 460px at 85% 0%,var(--warm-glow),transparent 62%),linear-gradient(160deg,var(--petrol) 0%,var(--petrol-deep) 55%,var(--petrol-black) 100%)}
.page-head{position:relative;padding-top:clamp(8rem,18vh,11rem);padding-bottom:clamp(3rem,7vh,4.5rem)}
.page-head h1{font-weight:700;font-size:var(--fs-page-h1);line-height:1.12;letter-spacing:-.02em;margin-bottom:1rem}
.page-head p{font-size:1.08rem;color:rgba(255,255,255,.78);max-width:38rem}

/* ---------- Hero (Startseite) — v6.0 ----------
   Ruhig, zentriert, hohe visuelle Ruhe (Referenz: 21st.dev hero-1).
   v6.0 entfernt die Schwarzwald-Bergsilhouette (v5.3/v5.4) bewusst wieder:
   die Vorgabe beschreibt den Hero-Hintergrund ausschließlich als feines
   Linien-Raster + weiche, statische Petrol/Mint-Lichtfelder ("kein Glow,
   kein Animation") — das verträgt sich nicht mit einer dominanten
   Illustration. .hero-glow (ein echter geblurrter Kreis) ist daher
   ebenfalls entfernt; die neuen Lichtfelder sind zwei breite, weiche
   Radialverläufe ohne filter:blur, rein statisch. */
/* Spaltenrichtung, weil das Hero-Bild seit v7.4 als eigenes Kind neben
   .hero-content haengt (Begruendung s. .hero-visual). Das untere Polster
   sitzt deshalb hier statt auf .hero-content. */
.hero{position:relative;background:var(--paper);overflow:hidden;text-align:center;min-height:65vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-bottom:clamp(3rem,7vh,5rem)}
.hero-raster{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;
  background-image:linear-gradient(var(--line-faint) 1px,transparent 1px),linear-gradient(90deg,var(--line-faint) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 38%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 38%,#000 20%,transparent 78%)}
.hero-content{position:relative;z-index:1;width:100%;padding-top:clamp(6rem,13vh,8.5rem);padding-bottom:0}
.hero-inner{max-width:46rem;margin-inline:auto}
.hero-inner .eyebrow{margin-bottom:.4rem}
.hero-inner h1{margin:1.75rem 0 1.4rem}
.hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.hero-actions.center{justify-content:center}
.hero-phone{margin-top:1.1rem}
.hero-phone .textlink{font-size:.94rem;color:var(--muted);font-weight:600;border-bottom-color:var(--line)}
.hero-phone .textlink:hover{color:var(--petrol);border-bottom-color:currentColor}
/* Frueher display:flex mit dem Punkt als eigenem Flex-Item: sobald der Text
   auf schmalen Schirmen zweizeilig wurde, stand der Punkt einsam links neben
   dem Block. Als inline-block laeuft er im Textfluss mit. */
.hero-note{margin-top:1.3rem;font-size:.9rem;color:var(--muted);text-align:center}
.hero-note .pulse{display:inline-block;vertical-align:middle;margin-right:.55rem;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(36,116,94,.55);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(36,116,94,.5)}70%{box-shadow:0 0 0 9px rgba(36,116,94,0)}100%{box-shadow:0 0 0 0 rgba(36,116,94,0)}}
/* Randlos ueber die volle Seitenbreite. Frueher loeste width:100vw +
   margin-left:calc(50% - 50vw) das Bild aus dem .wrap heraus - 100vw
   schliesst aber die Scrollbar mit ein, das Bild sass auf Systemen mit
   klassischer Scrollbar rund 7px links aus der Mitte und wurde rechts von
   overflow-x:hidden beschnitten. Genau diese Falle ist bei
   .premium-features schon dokumentiert. Seit v7.4 haengt .hero-visual
   deshalb direkt unter .hero statt im .wrap und ist als Block-Element von
   sich aus exakt 100% breit - ohne vw-Rechnung.

   Bildbreite: 1000px -> 1250px -> 1376px -> 1700px. Ab hier wird bewusst
   ueber die native Breite von image1.jpeg (1376px) hinaus skaliert, rund
   +24%. Das Motiv ist ein gerendertes Mockup mit grossen ruhigen Flaechen,
   das vertraegt es deutlich besser als ein Foto - scharf wird es davon aber
   nicht. Sauber loesen laesst sich das nur mit einem groesseren Export aus
   FotosPB. Das seitliche Polster haelt den schmalen Rand. */
.hero-visual{position:relative;z-index:1;width:100%;margin-top:clamp(1.75rem,4.5vh,3rem);
  padding-inline:20px}
.hero-visual .mockup-photo--wide{max-width:min(1700px,100%);margin:0 auto}
@media (min-width:768px){
  .hero-visual{padding-inline:1.5rem}
}

/* ---------- Hero-Marken-Symbol (v6.1) ----------
   Eigenständiger, großer Auftritt des Logo-Marks über der Headline (Header-/
   Footer-Logo bleiben unverändert klein und funktional). Drei versetzte
   <use>-Kopien derselben Form (unterschiedliche Opazität/Offset) erzeugen die
   "mehrschichtige" Tiefe ohne zusätzliche Assets. Glow via drop-shadow (kein
   Blur-Layer im DOM), Schweben via transform — beides no-op bei
   prefers-reduced-motion. */
.hero-mark{position:relative;z-index:1;width:132px;height:132px;margin:0 auto 1.6rem;
  display:flex;align-items:center;justify-content:center;animation:heroMarkFloat 4s ease-in-out infinite}
.hero-mark::before{content:"";position:absolute;inset:-14px;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(169,216,200,.4) 0%,var(--warm-glow) 55%,transparent 75%)}
.hero-mark-ring{position:absolute;border-radius:50%;pointer-events:none}
.hero-mark-ring--1{inset:6px;border:1px solid rgba(169,216,200,.5)}
.hero-mark-ring--2{inset:-16px;border:1px solid rgba(36,116,94,.2)}
.hero-mark-svg{position:relative;z-index:1;width:74px;height:74px;
  filter:drop-shadow(0 10px 20px rgba(18,58,49,.35)) drop-shadow(0 0 26px rgba(169,216,200,.5))}
.hero-mark-svg .lm-a{fill:var(--petrol)}.hero-mark-svg .lm-b{fill:var(--green)}
@keyframes heroMarkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.hero-mark{animation:none}}

/* Hero-Stats: echte, überprüfbare Zahlen aus dem Seiteninhalt selbst
   (Branchen-/Ablauf-Anzahl, Regional-Claim) statt erfundener Kennzahlen */
.hero-stats{position:relative;z-index:1;display:flex;justify-content:center;gap:clamp(1.4rem,4vw,3.2rem);
  margin-top:clamp(1.8rem,4.5vh,2.6rem);padding-top:1.6rem;border-top:1px solid var(--line);flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.2rem}
.stat-num{font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font-size:.82rem;color:var(--muted);font-weight:600}

/* ---------- Trust ---------- */

/* ---------- Split layout ---------- */
.split{display:grid;grid-template-columns:minmax(0,6.5fr) minmax(0,5fr);gap:3rem;align-items:center}
.split-art{display:flex;justify-content:center}
.split-art .art{width:100%;max-width:300px;height:auto}

/* ---------- Branchen — vertikale Karten statt horizontaler Pills ----------
   Icon oben, Label darunter; Farb-Rhythmus (Petrol/Grün/Mint-Verläufe) über
   nth-child statt einer Farbe für alle 8 Karten.
   Spaltenzahl bewusst explizit (1/2/4) statt auto-fit: 8 ist durch alle drei
   Werte ohne Rest teilbar, damit nie eine einzelne Restkachel in der letzten
   Reihe übrig bleibt. align-items:stretch sorgt für identische Kachel-Höhe
   pro Reihe — kein Versatz mehr (v5.4 hatte hier einen "lebendigen" Stagger-
   Effekt, der aber der gewünschten ruhigen, präzisen Ausrichtung widersprach
   und entfernt wurde). */
.industries{position:relative;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1rem;margin-top:2.2rem;max-width:66rem;margin-inline:auto;align-items:stretch}
@media (min-width:768px){
  .industries{grid-template-columns:repeat(4,1fr)}
}
.industries::before{content:"";position:absolute;inset:-2rem -1.2rem;z-index:-1;border-radius:44px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(169,216,200,.2),transparent 70%)}
.ind{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem 1rem;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,background .3s}
.ind:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--mint);background:var(--mint-tint)}
.ind .ic{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--petrol),var(--green));color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 4px 10px rgba(11,33,27,.18)}
.ind .ic svg{width:20px;height:20px}
.ind h4{font-size:.9rem;color:var(--ink);font-weight:700}
.ind:nth-child(4n+2) .ic{background:linear-gradient(150deg,var(--green),var(--mint) 140%)}
.ind:nth-child(4n+3) .ic{background:linear-gradient(150deg,var(--petrol),var(--petrol-deep))}
.ind:nth-child(4n+4) .ic{background:var(--grad-brand)}


/* ---------- Mockup-Fotos (echte Bilder aus FotosPB/, unbearbeitet) ---------- */
.mockup-photo{display:block;width:100%;height:auto}
.mockup-photo--wide{max-width:1000px;margin:0 auto}
.mockup-photo--tall{max-width:340px;margin:0 auto}

/* ---------- Kontaktseite: Formular + Image3 im 2-Spalten-Grid (erstgespraech.html) ----------
   Mobile (<768px): 1 Spalte, Formular oben / Foto darunter (normale DOM-Reihenfolge).
   Tablet (768–1024px) & Desktop (>1024px): 2 Spalten nebeneinander, Formular links, Foto rechts. */
/* v7.4: Der Umbruch auf zwei Spalten lag frueher bei 768px. Dort war die
   Formularspalte aber nur noch rund 340px breit - die zweispaltige
   .form-grid darin ergab Felder von ~160px, und das Foto daneben stand mit
   viel Leerraum. Zwei Spalten deshalb erst ab 1025px, darunter untereinander
   ueber die volle Breite. */
.contact-form-grid{display:grid;grid-template-columns:1fr;gap:1.8rem}
.contact-photo-col{display:flex;align-items:flex-start;justify-content:center}
/* Image3 ist 1024x1024. Ohne Deckel lief das Quadrat einspaltig ueber die
   volle Spaltenbreite und wurde entsprechend hoch. */
.contact-photo-col .mockup-photo{max-width:min(440px,100%)}
@media (min-width:1025px){
  .contact-form-grid{grid-template-columns:1fr 1fr;gap:40px;align-items:start}
}

/* ---------- Ablauf als User-Flow-Diagramm ----------
   Desktop: horizontale Kette aus Knoten + Verbindungslinien + Pfeilen.
   Mobil: dieselbe Kette vertikal gestapelt (Breakpoint s. u.). Jeder
   Knoten ist flex:1 1 0, sodass die Kette bei jeder Desktop-Breite
   (1024–1440px) ohne Overflow gleichmäßig skaliert. */
.userflow{display:flex;align-items:stretch;gap:0;max-width:1160px;margin:0 auto}
.flow-node{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.65rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1rem,2vw,1.5rem);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.flow-node:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--mint)}
.flow-num{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--grad-brand);color:#fff;font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(11,33,27,.2)}
/* Farb-Hierarchie Petrol→Grün zeigt Fortschritt entlang der 5 Schritte */
.userflow>:nth-child(1) .flow-num{background:linear-gradient(150deg,var(--petrol),var(--petrol-deep))}
.userflow>:nth-child(3) .flow-num{background:linear-gradient(150deg,var(--petrol),var(--green))}
.userflow>:nth-child(5) .flow-num{background:var(--grad-brand)}
.userflow>:nth-child(7) .flow-num{background:linear-gradient(150deg,var(--green),var(--mint) 130%)}
.userflow>:nth-child(9) .flow-num{background:linear-gradient(150deg,var(--green) 10%,var(--mint) 110%)}
.flow-node h3{font-size:clamp(.96rem,1.35vw,1.1rem);color:var(--ink);font-weight:700}
.flow-node p{font-size:clamp(.76rem,1.2vw,.88rem);line-height:1.48;color:var(--muted)}
.flow-connector{flex:0 0 clamp(20px,3.4vw,44px);position:relative;display:flex;align-items:center;justify-content:center}
.flow-connector::before{content:"";position:absolute;left:0;right:0;top:50%;height:2.5px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(36,116,94,.4) 25%,rgba(36,116,94,.4) 75%,transparent)}
.flow-connector svg{position:relative;z-index:1;color:var(--green);background:var(--paper);border-radius:50%;width:22px;height:22px;stroke-width:3}

.flow-finish{position:relative;max-width:600px;margin:1.6rem auto 0}
.finish-card{position:relative;text-align:center;padding:2.5rem 2rem 2.2rem;border-radius:var(--radius-lg);color:#fff;
  background:radial-gradient(520px 260px at 18% 100%,var(--warm-glow),transparent 65%),linear-gradient(150deg,var(--petrol) 0%,var(--petrol-black) 78%);box-shadow:0 24px 60px rgba(11,33,27,.35)}
.finish-kicker{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:.7rem}
.finish-h{font-weight:700;font-size:clamp(1.4rem,3vw,1.95rem);line-height:1.14;margin-bottom:1.4rem;letter-spacing:-.015em}
.finish-note{margin-top:1rem;font-size:.85rem;color:rgba(255,255,255,.65)}
@media (max-width:860px){
  .userflow{flex-direction:column;max-width:420px}
  .flow-node{width:100%}
  /* Gestapelt ist pro Karte die volle Spaltenbreite da. Die vw-Sockel der
     Desktop-Kette (.76rem = 12px) waren hier unnoetig klein zu lesen. */
  .flow-node h3{font-size:1.05rem}
  .flow-node p{font-size:.95rem;line-height:1.55}
  .flow-connector{flex-basis:clamp(32px,8vw,46px);height:clamp(32px,8vw,46px)}
  .flow-connector::before{left:50%;right:auto;top:0;bottom:0;height:auto;width:2.5px;transform:translateX(-50%)}
  .flow-connector svg{transform:rotate(90deg)}
}

/* ---------- Leistungen — Checkmark-Boxen statt schmaler Pills ----------
   Eigenes Icon-Badge pro Zeile (Farb-Rhythmus über nth-child), größerer
   Radius/Schatten für mehr Tiefe, jede Box einzeln scroll-reveal (Stagger
   via bestehende .gets-Gruppe in script.js). */
.gets{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;max-width:60rem;margin:1.8rem auto 0}
.gets::before{content:"";position:absolute;inset:-2rem -1.2rem;z-index:-1;border-radius:44px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(36,116,94,.14),transparent 70%)}
.get{display:flex;align-items:center;gap:.9rem;text-align:left;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.1rem 1.3rem;font-size:.94rem;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.get:hover{transform:translateY(-5px);border-color:var(--mint);background:var(--mint-tint);box-shadow:var(--shadow-md)}
.get-ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(150deg,var(--green),var(--petrol));box-shadow:0 4px 10px rgba(11,33,27,.16)}
.get-ic svg{width:18px;height:18px}
.get:nth-child(3n+2) .get-ic{background:linear-gradient(150deg,var(--petrol),var(--petrol-deep))}
.get:nth-child(3n+3) .get-ic{background:linear-gradient(150deg,var(--green),var(--mint) 130%)}

/* ---------- Preise / dunkle Bänder (Preise-Sektion, CTA-Bänder auf Unterseiten) ---------- */
.close-band{position:relative;color:#fff;overflow:hidden;isolation:isolate}
.close-band .bg-img{position:absolute;inset:0;z-index:-2;background:
    radial-gradient(1100px 460px at 50% 0%,rgba(169,216,200,.16),transparent 62%),
    radial-gradient(1100px 600px at 82% 8%,rgba(36,116,94,.4),transparent 60%),
    radial-gradient(900px 700px at 10% 100%,var(--warm-glow),transparent 62%),
    linear-gradient(135deg,var(--petrol) 0%,var(--petrol-black) 60%,var(--petrol) 100%)}
.close-inner{padding:clamp(4rem,10vh,6.5rem) 0;max-width:44rem}
.close-lead{font-size:1.1rem;color:rgba(255,255,255,.85);margin:1.1rem 0 1.9rem;max-width:38rem}
.quote{border-left:2px solid rgba(169,216,200,.6);padding-left:1.3rem;margin:0 0 2rem;max-width:40rem}
.quote p{font-style:italic;font-weight:400;font-size:1.2rem;line-height:1.5;color:#fff}
.quote p em{font-style:normal;color:var(--mint)}
.quote cite{display:block;margin-top:.7rem;font-style:normal;font-size:.9rem;color:rgba(255,255,255,.6)}

/* CTA-Band (schmaler, für Unterseiten wie Über uns) ---------- */
.cta-band{display:flex;align-items:center;gap:2.4rem;
  background:radial-gradient(700px 320px at 26% 0%,rgba(169,216,200,.18),transparent 60%),radial-gradient(520px 260px at 90% 100%,var(--warm-glow),transparent 65%),linear-gradient(150deg,var(--petrol) 0%,var(--petrol-black) 78%);
  color:#fff;border-radius:28px;padding:2.6rem 3rem;box-shadow:0 24px 60px rgba(11,33,27,.32)}
.cta-band .h2{color:#fff}
.cta-copy{width:100%}
.cta-copy p{color:rgba(255,255,255,.82);margin-top:.8rem;max-width:30rem}
@media (max-width:760px){
  .cta-band{flex-direction:column;text-align:center;padding:2.2rem 1.6rem}
  /* .hero-actions ist ein Flex-Container - das text-align:center oben
     erreicht den Button darin nicht, er blieb linksbuendig stehen. */
  .cta-band .hero-actions{justify-content:center}
  .cta-copy p{margin-inline:auto}
}

/* ---------- Über uns ---------- */
.prose h2{font-weight:700;font-size:1.5rem;color:var(--ink);margin-bottom:.7rem;letter-spacing:-.01em}
.prose p{color:var(--muted);max-width:44rem;margin-bottom:.9rem}
.prose+.prose{margin-top:2.2rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.4rem}
.p-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.8rem;box-shadow:var(--shadow-sm)}
.p-card h3{font-weight:700;color:var(--ink);font-size:1.2rem;margin-bottom:.7rem}
.p-card p{color:var(--muted);font-size:.96rem}

/* ---------- Kontakt / Erstgespräch ---------- */
/* minmax 200 statt 230: bei 768px passten sonst nur zwei der drei Karten in
   die Reihe, die dritte stand allein darunter. */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-top:2.2rem}
.c-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.6rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.6rem}
.c-card h4{color:var(--petrol);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.c-card a.value,.c-card .value{color:var(--ink);font-weight:600;font-size:1.05rem}
/* Vier Schritte: auto-fit ergab zwischen 768 und 1024px drei Spalten und
   eine einzelne vierte Kachel darunter. Darum dort fest 2x2. */
.steps-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:2.4rem}
.step-mini .n{color:var(--green);font-size:1.6rem;font-weight:700}
.step-mini h5{color:var(--ink);font-weight:700;font-size:.98rem;margin:.3rem 0 .3rem}
.step-mini p{color:var(--muted);font-size:.9rem}

/* Kontaktformular (erstgespraech.html) */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1 / -1}
.field label{font-size:.88rem;font-weight:700;color:var(--ink)}
.field input,.field textarea{font:inherit;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--green)}
.field textarea{min-height:120px;resize:vertical}
.form-note{margin-top:1rem;font-size:.85rem;color:var(--muted)}
.form-status{display:none;margin-bottom:1.2rem;padding:1rem 1.2rem;border-radius:14px;background:var(--mint-tint);color:var(--petrol);font-size:.94rem}
.form-status.show{display:block}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }

/* ---------- Footer ---------- */
.site-footer{background:var(--petrol-black);color:rgba(255,255,255,.72);font-size:.93rem}
.site-footer .logo{color:#fff}
.site-footer .logo-mark .lm-a{fill:#fff}.site-footer .logo-mark .lm-b{fill:var(--mint)}
.site-footer .logo-name{color:#fff}
.foot-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:2.4rem;padding:3.2rem 0 2.2rem}
.foot-top .logo-mark{width:32px;height:32px}.foot-top .logo-name{font-size:1.02rem}
.foot-top p{margin-top:1rem;max-width:26rem;color:rgba(255,255,255,.55)}
.foot-col{display:flex;flex-direction:column;gap:.55rem}
.foot-col h5{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem;font-weight:700}
.foot-col a{color:rgba(255,255,255,.68);transition:color .15s}.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-top:1px solid rgba(255,255,255,.12);padding:1.3rem 0 1.6rem;color:rgba(255,255,255,.42);font-size:.84rem}
mark.todo{background:#F6E7B4;color:#5b4b00;padding:0 .3em;border-radius:4px}

/* ---------- Rechtliches (Impressum/Datenschutz) ---------- */
.legal-section .prose h2{margin-top:1.6rem}
.legal-section .prose h2:first-child{margin-top:0}
.back-top{display:inline-block;margin-top:2rem;font-weight:700}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Chatbot (auf allen Seiten) — dunkles Petrol-Liquid-Glass ---------- */
.chat-launcher{position:fixed;right:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;border:1px solid rgba(169,216,200,.55);cursor:pointer;
  background:
    radial-gradient(60% 60% at 32% 22%,rgba(255,255,255,.45),transparent 62%),
    linear-gradient(160deg,rgba(36,116,94,.88) 0%,rgba(18,58,49,.95) 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 10px 20px rgba(11,33,27,.2),0 22px 44px rgba(11,33,27,.3);
  -webkit-backdrop-filter:blur(20px) saturate(220%);backdrop-filter:blur(20px) saturate(220%);
  transition:transform .35s var(--spring)}
.chat-launcher:hover{transform:translateY(-2px) scale(1.04)}
.chat-launcher.is-pressed{transform:scale(.94)}
.chat-panel{position:fixed;right:22px;bottom:94px;z-index:90;width:min(360px,calc(100vw - 44px));max-height:min(560px,calc(100vh - 140px));
  display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
.chat-head{background:radial-gradient(260px 140px at 90% 0%,var(--warm-glow),transparent 65%),linear-gradient(150deg,var(--petrol),var(--petrol-black));color:#fff;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between}
.chat-head h2{font-size:1rem;font-weight:700}
.chat-head p{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:.15rem}
.chat-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1}
.chat-body{flex:1;overflow-y:auto;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.chat-msg{max-width:88%;padding:.65rem .9rem;border-radius:14px;font-size:.9rem;line-height:1.5}
.chat-msg.bot{background:var(--paper);color:var(--ink);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.user{background:var(--petrol);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg a{color:inherit;text-decoration:underline}
.chat-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .8rem}
.chat-quick button{font-size:.78rem;font-weight:600;color:var(--petrol);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.chat-quick button:hover{border-color:var(--mint)}
.chat-form{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--line)}
.chat-form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:.6rem 1rem;font:inherit;background:var(--paper)}
.chat-form button{width:38px;height:38px;border-radius:50%;border:none;background:var(--petrol);color:#fff;cursor:pointer;flex:0 0 auto}
@media (prefers-reduced-transparency:reduce){
  .chat-launcher{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--petrol)}
  .chat-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.chat-launcher,.chat-panel{transition:none}
  .shine{background-position:50% 0}
}

/* ---------- Responsive: 375 / 768 / 940 / 1024 / 1440 ---------- */
/* v7.4: Der Umschaltpunkt auf das Burger-Menue lag bei 768px. Zwischen 769
   und rund 890px reichte die Zeile aber nicht fuer Logo + Links + CTA:
   der Logoname brach auf zwei Zeilen, "Ueber uns" ebenfalls, und das
   gleitende .nav-pill wurde dadurch zum Kreis um "Start" statt zur Pille.
   Damals mit vier Links gemessen: rund 865px noetig, Umschaltpunkt 940px.

   v7.8 hatte den Punkt auf 1080px geschoben, weil "Bildstrecke" als
   fuenfter Link dazukam. v7.9 fuehrt die Navigation wieder auf vier
   Punkte zurueck ("Ablauf" zeigt jetzt direkt auf bildstrecke.html), die
   Leiste braucht gemessen wieder 882px - der Umschaltpunkt geht deshalb
   zurueck auf 940px. Tablets im Querformat bekommen damit wieder die
   volle Leiste statt des Burger-Menues. */
@media (max-width:940px){
  .nav-links{display:none}
  /* Der Wrapper muss mit weg, nicht nur der Link darin: .btn-glow hat
     eigene Polsterung und Verlaufsflaeche und blieb sonst als 6x6px
     grosser Ring-Stummel neben dem Burger stehen. */
  .nav-right > .btn-glow,
  .nav-cta-desktop{display:none}
  .nav-toggle{display:flex}
}
@media (max-width:1024px){
  /* Frueher sprang der Footer bei 1024px direkt von drei Spalten auf eine -
     auf dem Tablet stand er dadurch als sehr langer, schmaler Block. Zwei
     Spalten erst ab 640px: darunter passen "info@p-b-digital.de" und die
     Telefonnummer nicht mehr nebeneinander in eine halbe Spalte. */
  .foot-top{grid-template-columns:1fr 1fr;gap:1.8rem 2.4rem}
  .foot-top>:first-child{grid-column:1 / -1}
  .steps-mini{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .foot-top{grid-template-columns:1fr;gap:1.8rem}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:1.8rem}
  .split-art{order:-1}
  .duo{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hero-content{padding-top:7rem}
  .page-head{padding-top:6.5rem}
  /* Touch-Targets: mindestens 44x44px auf berührbaren Geräten */
  .chat-close{width:44px;height:44px;flex:0 0 auto}
  .chat-form button{width:44px;height:44px}
  .chat-quick button{min-height:44px;display:inline-flex;align-items:center}
  /* Textlinks sind nur rund 28px hoch. Statt sie optisch aufzublasen (die
     Unterstreichung wuerde sich vom Text loesen) vergroessert ein
     unsichtbares ::after nur die Trefferflaeche. */
  .textlink::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
    transform:translateY(-50%)}
  /* Footer-Links standen mit 24px Zeilenhoehe zu dicht beieinander. Das
     Polster kommt aus dem Abstand, die Optik bleibt also gleich. */
  .foot-col{gap:.1rem}
  .foot-col a{padding-block:.5rem}
}
@media (max-width:600px){
  /* Der Strich vor der Eyebrow ist ein Flex-Geschwister. Sobald das Label
     zweizeilig wird, steht er einsam links neben dem Block statt am Text -
     bei zentrierten Eyebrows faellt das sofort auf. */
  .eyebrow.center::before{display:none}
  /* Der harte Umbruch in der Hero-Headline ist fuer die zweizeilige
     Desktop-Fassung gesetzt. Schmal erzwingt er eine Zeile aus einem
     einzelnen Wort ("neue"), darum hier freier Umbruch. */
  .hero-inner h1 br{display:none}
  .steps-mini{grid-template-columns:1fr}
}
@media (max-width:480px){
  .wrap{padding-left:20px;padding-right:20px}
  .btn-lg{white-space:normal;text-align:center}
  .chat-panel{right:12px;bottom:84px}
  .chat-launcher{right:16px;bottom:16px}
  /* Karten 1 pro Reihe statt 2 (v5.3 Mobile-Optimierung) */
  .industries,.gets{grid-template-columns:1fr}
  /* Stats-Zeile vertikal statt unruhigem 2+1-Umbruch */
  .hero-stats{flex-direction:column;gap:1.1rem}
}
/* Querformat-Handy: 132px Marken-Symbol + Eyebrow fuellten bei rund 375px
   Schirmhoehe bereits das ganze Bild, die Headline stand komplett unter der
   Falz. Nur ueber die Hoehe gesteuert, damit Tablets im Hochformat
   unberuehrt bleiben. */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-content{padding-top:5.5rem}
  .hero-mark{width:84px;height:84px;margin-bottom:1rem}
  .hero-mark-svg{width:48px;height:48px}
  .hero-mark-ring--2{inset:-10px}
  .page-head{padding-top:6rem}
}
@media (max-width:380px){
  /* Bei 320-360px stiess der (jetzt umbruchfreie) Logoname an den
     Menue-Button. Statt umzubrechen wird er hier eine Spur kleiner. */
  .logo{gap:.6rem}
  .logo-mark{width:34px;height:34px}
  .logo-name{font-size:.95rem}
}

/* ---------- Vorteile: scroll-getriebenes Netz (v6.4) ----------
   Alle Bewegung haengt an einem einzigen Fortschrittswert --p, den
   script.js waehrend des Scrollens setzt: 0 wenn die Section unten
   hereinkommt, 1 wenn sie oben hinausgeht. Dadurch laeuft jede
   Animation beim Zurueckscrollen rueckwaerts - kein Timer, keine
   Endlosschleife, die man verpasst haben kann.

   --tilt (-0.5 .. +0.5) treibt die 3D-Neigung, --enter (0..1) das
   Einblenden. Die Defaults hier sind der Zustand OHNE Javascript und
   bei prefers-reduced-motion: alles sichtbar, nichts geneigt. */
.premium-features{--p:1;--tilt:0;--enter:1;
  position:relative;background:var(--paper);padding:clamp(3.5rem,8vh,6rem) 0;overflow:hidden}
/* Diese Section bekommt einen breiteren Rahmen als der Rest der Seite:
   1700px statt der ueblichen 1200px des .wrap. Genau die Breite hat das
   Hero-Bild direkt darueber - lief das Netz darunter weiter ueber nur
   1200px, wirkte es eingerueckt statt ganzflaechig, mit ueber 500px
   Weissraum je Seite auf einem 1920er Schirm.

   Der Rest der Seite bleibt bewusst bei 1200px, weil dort Fliesstext
   steht und die Zeilenlaenge zaehlt. Hier stehen nur vier kurze Labels,
   die vertragen die Breite.

   width:100vw + margin-left:calc(-50vw + 50%) waere hier falsch: 100vw
   schliesst die Scrollbar mit ein, die Section wuerde also breiter als
   der sichtbare Bereich und erzeugte waagrechten Ueberlauf. Noetig ist
   es ohnehin nicht - die Section ist als Block-Element bereits exakt
   100% breit. */
.premium-features > .wrap{max-width:min(1700px,100% - 3rem)}

/* perspective gehoert auf den HTML-Vorfahren. Auf SVG-Kindknoten sind
   rotateX/rotateY nicht verlaesslich - SVG 1.1 kennt keine 3D-Transforms.
   Geneigt wird deshalb die HTML-Buehne, das SVG kippt als Kind mit. */
/* Parallax liegt bewusst auf der ganzen Buehne, nicht auf den einzelnen
   Karten. Unterschiedliche Amplituden pro Karte zerreissen das Netz:
   jede Linie startet an ihrer eigenen Kartenmitte, die Nachbarkarte ist
   dann aber schon woanders - die Verbindung trifft ins Leere. Die Zeile
   driftet daher als Ganzes gegen den uebrigen Seiteninhalt, was den
   Tiefeneindruck erzeugt, ohne die Geometrie zu brechen. Gestaffelt
   bleibt stattdessen der Zeichenfortschritt der Linien ueber --i. */
.network-stage{transform-style:preserve-3d;
  transform:perspective(1100px) translateY(calc(var(--tilt) * -26px)) rotateX(calc(var(--tilt) * -9deg)) rotateY(calc(var(--tilt) * 5deg));
  will-change:transform}

.features-grid{--fg-gap:30px;--fg-icon:80px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fg-gap);position:relative}

/* --draw sitzt hier und nicht an .feature-connector, damit auch die
   Knoten-Pseudoelemente von .feature-item darauf zugreifen. */
.feature-item{position:relative;text-align:center;
  --draw:clamp(0,(var(--p) - var(--i) * .06) * 2.4,1);
  opacity:var(--enter);transition:opacity .35s var(--ease)}

/* Zeichenfortschritt pro Karte, gegeneinander versetzt ueber --i.
   pathLength="1" normiert die Laenge, dadurch stimmt dasharray
   unabhaengig von der gerenderten Breite. */
.feature-connector{position:absolute;z-index:0;left:50%;top:calc(var(--fg-icon)/2);max-width:none;
  width:calc(100% + var(--fg-gap));height:12px;transform:translateY(-50%);overflow:visible}
.conn-base{stroke:var(--green);stroke-width:2;opacity:.3;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw));
  transition:opacity .3s var(--ease),stroke-width .3s var(--ease)}
.feature-item:hover .conn-base{opacity:.6;stroke-width:3}

/* Der Lichtpunkt, der ueber die Linie wandert: ein kurzes helles
   Segment, dessen Versatz direkt am Scroll haengt. Das ist der
   "Gradient-Fluss" - als stroke-dashoffset-Welle auf der Volllinie
   waere die Linie stattdessen halb verschwunden und wieder da. */
.conn-glare{stroke:var(--mint);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:.14 1;stroke-dashoffset:calc(1.14 - var(--p) * 1.45);
  opacity:calc(var(--draw) * .9);filter:drop-shadow(0 0 5px rgba(169,216,200,.9))}

/* Knoten an den Uebergaengen: ::after der Punkt, ::before der Ring.
   Bewusst CSS-Kreise statt <circle>: unter preserveAspectRatio="none"
   zieht die viewBox jeden Kreis zur Ellipse. */
.feature-item:not(:last-child)::after,
.feature-item:not(:last-child)::before{content:"";position:absolute;
  left:calc(100% + var(--fg-gap)/2);top:calc(var(--fg-icon)/2);border-radius:50%}
.feature-item:not(:last-child)::after{z-index:2;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  background:var(--green);box-shadow:0 0 8px rgba(36,116,94,.45);
  opacity:var(--draw);transform:scale(calc(.3 + var(--draw) * .7))}
.feature-item:not(:last-child)::before{z-index:1;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1px solid var(--green);opacity:calc(var(--draw) * .35);
  animation:nodeRing 2.6s var(--ease) infinite}
.feature-item[data-index="1"]::before{animation-delay:.55s}
.feature-item[data-index="2"]::before{animation-delay:1.1s}
@keyframes nodeRing{
  0%{transform:scale(.78);opacity:calc(var(--draw) * .4)}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(.78);opacity:calc(var(--draw) * .4)}}

/* Deckfarbe zweilagig: weisse Basis + gruener Schleier. Einlagig waere
   der Kasten durchscheinend und die Linie liefe sichtbar quer hindurch
   statt an seinen Kanten zu enden. */
.feature-icon-box{position:relative;z-index:3;width:var(--fg-icon);height:var(--fg-icon);
  margin:0 auto 1.1rem;display:flex;align-items:center;justify-content:center;
  border-radius:22px;color:var(--green);overflow:hidden;
  background:linear-gradient(135deg,rgba(36,116,94,.05),rgba(36,116,94,.11)),var(--paper);
  border:1px solid rgba(36,116,94,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--spring),box-shadow .4s var(--ease)}
.feature-icon-box::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.75) 0%,transparent 62%);
  opacity:0;transition:opacity .4s var(--ease)}
.feature-item:hover .feature-icon-box{
  background:linear-gradient(135deg,rgba(36,116,94,.13),rgba(36,116,94,.2)),var(--paper);
  border-color:var(--green);transform:translateY(-8px) scale(1.05);box-shadow:0 26px 52px rgba(36,116,94,.18)}
.feature-item:hover .feature-icon-box::before{opacity:1}
/* Der Hover-Effekt liegt komplett auf dem Kasten. Eine zweite
   transform-Regel auf dem Icon waere wirkungslos: eine laufende
   Animation schlaegt jede Transition auf derselben Eigenschaft. */
.feature-icon{position:relative;z-index:1;width:34px;height:34px;
  animation:iconFloat 3.6s cubic-bezier(.4,0,.2,1) infinite}
.feature-item[data-index="1"] .feature-icon{animation-delay:.4s}
.feature-item[data-index="2"] .feature-icon{animation-delay:.8s}
.feature-item[data-index="3"] .feature-icon{animation-delay:1.2s}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

.feature-item h3{font-size:1.06rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:0 0 .35rem}
.feature-item p{font-size:.92rem;color:var(--muted);line-height:1.55;max-width:15rem;margin-inline:auto}

/* Ab zwei Spalten muessen Linie und Knoten weg: sie zeigen waagrecht
   zur naechsten Karte, die dann eine Zeile tiefer steht. Neigung und
   Parallax ebenfalls aus - auf kleinen Schirmen wirkt beides unruhig. */
@media (max-width:1024px){
  .features-grid{grid-template-columns:repeat(2,1fr);gap:2.2rem var(--fg-gap)}
  .feature-connector{display:none}
  .feature-item:not(:last-child)::after,
  .feature-item:not(:last-child)::before{display:none}
  .network-stage{transform:none}
}
@media (max-width:768px){
  .features-grid{grid-template-columns:1fr;gap:1.8rem}
  .feature-icon-box{margin-bottom:.9rem}
}

@media (prefers-reduced-transparency:reduce){
  .feature-icon-box{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Bei reduced-motion haengt script.js den Scroll-Handler gar nicht erst
   ein, die Defaults oben greifen. Hier nur noch die Uebergaenge stumm
   schalten, damit auch der Hover nicht mehr federt. */
@media (prefers-reduced-motion:reduce){
  .network-stage,.feature-item,.feature-icon-box,.feature-icon{transition:none}
  .feature-icon,.feature-item:not(:last-child)::before{animation:none}
  .conn-glare{display:none}
}

/* ---------- Ablauf-Seite: senkrechte Zeitleiste (v7.6) ----------
   Loest das .flow-grid aus v7.5 ab. Fuenf Schritte mit laengeren Texten
   untereinander, links eine durchgezogene Linie durch die Nummernkreise.

   Die .userflow-Kette auf der Startseite bleibt davon unberuehrt.

   Abweichungen von der Vorlage, jeweils mit Grund:

   (1) Die Linie sitzt auf der Marker-Mitte (30px bzw. 25px), nicht auf
       left:50% der Zeitleiste. Bei 50% liefe sie mitten durch den Text
       und 320px rechts an den Nummernkreisen vorbei - die Kreise stehen
       am linken Rand.

   (2) pathLength="1" + stroke-dasharray:1 statt dasharray:1000.
       vector-effect="non-scaling-stroke" loest Strichmuster im
       Bildschirm-Koordinatensystem auf, nicht in viewBox-Einheiten. Die
       Leiste ist je nach Textlaenge deutlich ueber 1000px hoch, das
       Muster haette sich also wiederholt: die Linie waere unten sichtbar
       gewesen und oben verschwunden. Mit pathLength normiert stimmt es
       unabhaengig von der gerenderten Hoehe (gleiche Loesung wie bei
       .conn-base im Vorteile-Netz).

   (3) Beide Animationen haengen am bestehenden .reveal-System
       (IntersectionObserver in script.js) statt an "animation ... forwards"
       beim Laden. Der Abschnitt liegt weit unter der Falz - beim Laden
       gestartet waere die Animation abgelaufen, bevor man sie sieht.
       Zweiter Grund: bei prefers-reduced-motion setzt die Datei global
       *{animation:none!important}. Zusammen mit opacity:0 als Grundwert
       waeren die Schritte fuer diese Nutzer dauerhaft unsichtbar
       geblieben - der Inhalt haette komplett gefehlt. Ueber .reveal ist
       der sichtbare Zustand der Grundzustand.

   (4) Die Staffelung kommt aus der Gruppenliste in script.js (60ms je
       Element, dieselbe Mechanik wie bei .industries/.gets/.userflow)
       statt aus animation-delay pro nth-child. Die Vorlage zaehlte dort
       das <svg> als erstes Kind mit: Schritt 1 haette 0.2s Verzoegerung
       bekommen und Schritt 5 gar keine.

   (5) Seitliche Polsterung und Marker-Abstand auf kleinen Schirmen
       kleiner. Mit padding:4rem 2rem und padding-left:100px blieben auf
       einem 375px-Schirm rund 159px Textbreite. */
.userflow-container{position:relative;padding:4rem 0}
.flow-timeline{position:relative;max-width:700px;margin:0 auto}

/* Die Transform-Angabe steht bewusst auch auf .reveal und .reveal.in:
   sonst ueberschriebe das translateY(24px) aus .reveal die waagrechte
   Zentrierung und die Linie spraenge beim Einblenden zur Seite. */
.flow-svg{position:absolute;left:30px;top:0;width:2px;height:100%;z-index:0;overflow:visible}
.flow-svg.reveal,.flow-svg.reveal.in{transform:translateX(-50%)}
.flow-line{stroke:var(--petrol);stroke-width:2;opacity:.35;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.2s var(--ease)}
.flow-svg.in .flow-line{stroke-dashoffset:0}

.flow-step{position:relative;margin-bottom:3.4rem;padding-left:140px}
.flow-step:last-child{margin-bottom:0}
/* Waagrecht statt senkrecht einblenden - der Rest der Seite nutzt
   translateY(24px) aus .reveal, hier laeuft die Bewegung entlang der
   Leiste. */
.flow-step.reveal{transform:translateX(-20px)}
.flow-step.reveal.in{transform:none}

.step-marker{position:absolute;left:0;top:0;z-index:1;
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--petrol),var(--petrol-deep));color:#fff;
  font-size:1.5rem;font-weight:700;line-height:1;
  box-shadow:0 4px 16px rgba(29,91,77,.3)}

.step-content h3{font-size:1.3rem;color:var(--ink);font-weight:700;
  letter-spacing:-.01em;margin-bottom:.75rem}
.step-content p{font-size:1rem;color:var(--muted);line-height:1.8;max-width:600px}

@media (max-width:768px){
  .userflow-container{padding:2.5rem 0}
  .flow-step{padding-left:78px;margin-bottom:2.6rem}
  .step-marker{width:50px;height:50px;font-size:1.2rem}
  .flow-svg{left:25px}
  .step-content h3{font-size:1.18rem}
  .step-content p{line-height:1.7}
}
@media (max-width:380px){
  .flow-step{padding-left:66px}
  .step-marker{width:44px;height:44px;font-size:1.1rem}
  .flow-svg{left:22px}
}

/* Ohne diesen Block bliebe die Linie bei reduced-motion auf
   dashoffset:1 stehen, also unsichtbar - transition:none aus .reveal
   greift nur auf den Schritten, nicht auf dem <line>. */
@media (prefers-reduced-motion:reduce){
  .flow-line{stroke-dashoffset:0;transition:none}
  .flow-step.reveal,.flow-step.reveal.in{transform:none}
}