/* ============================================================
   QUADRESS GmbH — quadress.de
   Soft-Minimal Design (Design-Brief D. Simon, docs/index.html)
   Palette: pastelliges Blau/Teal, hell, ruhig, premium.
   ============================================================ */

/* Inter, selbst gehostet (DSGVO) — Variable Font, latin */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:optional;
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Farben — weich und hell (PLAN.md Punkt 4, „bitte genau so nehmen") */
  --ink:#16283D;        /* Text / dunkel, kein reines Schwarz */
  --ink-soft:#465971;   /* Fliesstext */
  --line:#D4E0EE;       /* feine Linien */
  --bg:#FFFFFF;
  --bg-soft:#F5F8FC;    /* Off-White */
  --card:#FFFFFF;       /* Karten/Flaechen (Dark: #16233B) */
  --blue:#9DBBF0;       /* sanftes Blau */
  --blue-ink:#3E6BC4;   /* Blau fuer Text (kontraststark, AA) */
  --blue-light:#DCEBFB; /* Hellblau */
  --teal:#86D6CD;       /* weiches Tuerkis */
  --teal-ink:#1C6F65;   /* Tuerkis fuer Text (AA: >=4,9:1 auf allen Flaechen) */
  --sky:#86C9EC;        /* Himmelblau */
  --dark:#0D1526;       /* Dunkler Block */

  --radius:22px;
  --radius-sm:16px;
  --shadow:0 24px 60px -28px rgba(20,45,95,.40);
  --shadow-sm:0 10px 26px -14px rgba(20,45,95,.32);

  --sp-section:clamp(64px,9vw,104px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(38% 26% at 92% 10%, rgba(134,201,236,.11), transparent 70%),
    radial-gradient(40% 26% at 4% 30%, rgba(134,214,205,.11), transparent 70%),
    radial-gradient(42% 26% at 96% 52%, rgba(157,187,240,.10), transparent 70%),
    radial-gradient(40% 26% at 3% 72%, rgba(134,201,236,.10), transparent 70%),
    radial-gradient(42% 26% at 95% 90%, rgba(134,214,205,.09), transparent 70%),
    var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,3.2vw,36px)}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.05;letter-spacing:-.03em;font-weight:800}
.muted{color:var(--ink-soft)}
img,svg{max-width:100%;display:block}
[id]{scroll-margin-top:110px}

:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px;border-radius:6px}

/* Weiche Farbflecken links/rechts am Seitenrand (fix, sehr dezent) */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;
  width:560px;height:560px;border-radius:50%}
body::before{left:-260px;top:16%;background:radial-gradient(circle,rgba(134,214,205,.20),transparent 64%)}
body::after{right:-260px;top:58%;background:radial-gradient(circle,rgba(157,187,240,.20),transparent 64%)}

/* Skip-Link (Tastatur) */
.skip-link{position:absolute;left:-9999px;top:14px;z-index:200;background:var(--card);
  color:var(--blue-ink);font-weight:700;font-size:.9rem;padding:12px 20px;border-radius:999px;
  border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.skip-link:focus{left:14px}

/* Lese-Fortschritt (Praesentations-Gefuehl) */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:0 3px 3px 0}

/* Glas-Kanten: Inhalt gleitet oben/unten „hinter Milchglas" (progressiver Blur, css.glass-Look) */
.glass-edge{position:fixed;left:0;right:0;z-index:40;pointer-events:none;transition:opacity .35s ease}
.glass-edge--top{top:0;height:120px;
  backdrop-filter:blur(13px) saturate(1.15);-webkit-backdrop-filter:blur(13px) saturate(1.15);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
  background:linear-gradient(to bottom,rgba(255,255,255,.26),transparent)}
.glass-edge--bottom{bottom:0;height:96px;
  backdrop-filter:blur(13px) saturate(1.15);-webkit-backdrop-filter:blur(13px) saturate(1.15);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
  background:linear-gradient(to top,rgba(255,255,255,.26),transparent)}
/* Am Seitenende: untere Glas-Kante ausblenden, damit der Footer voll lesbar ist */
body.at-bottom .glass-edge--bottom{opacity:0}
[data-theme="dark"] .glass-edge--top{background:linear-gradient(to bottom,rgba(11,18,32,.5),transparent)}
[data-theme="dark"] .glass-edge--bottom{background:linear-gradient(to top,rgba(11,18,32,.5),transparent)}
@media(max-width:640px){
  .glass-edge--top{height:88px}
  .glass-edge--bottom{height:64px}
}

/* Eyebrow bewusst OHNE Strich-Praefix (User: sah aus wie ein Minus) */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-ink);
}

/* Stichwort-Listen: schnell lesbar, Punkt statt Fliesstext */
.pts{list-style:none;display:grid;gap:8px;margin:14px 0 0}
.pts li{position:relative;padding-left:22px;font-size:.95rem;color:var(--ink-soft)}
.pts li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
  border-radius:50%;background:var(--teal);border:1px solid var(--teal-ink)}
.card .pts{margin-top:12px}
.card .pts li{font-size:.88rem}

.accent{color:var(--teal-ink)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:999px;font-weight:600;font-size:.95rem;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary{background:linear-gradient(120deg,var(--blue),var(--teal));color:#0B2A3A;box-shadow:0 14px 30px -12px rgba(79,180,197,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(79,180,197,.65)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-ink)}

/* Nav — schwebende, abgerundete Leiste */
header{position:sticky;top:0;z-index:50;padding:14px clamp(14px,3vw,26px);background:transparent}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px;
  max-width:1280px;margin:0 auto;padding:0 12px 0 22px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}
.logo{font-weight:800;letter-spacing:-.03em;font-size:1.25rem;white-space:nowrap;display:flex;align-items:center}
.logo small{display:block;font-size:.52rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);line-height:1.2}
/* Vollstaendiges QUADRESS-Logo inkl. Claim — helle Variante nur im Dark-Theme */
.logo-img{height:42px;width:auto;max-width:100%;display:block;object-fit:contain}
.logo-img--dark{display:none}
[data-theme="dark"] .logo-img--light{display:none}
[data-theme="dark"] .logo-img--dark{display:block}
.nav-links{display:flex;gap:30px;font-size:.92rem;font-weight:500}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
/* Aktiver Menuepunkt nur ueber die Farbe. Mit font-weight:700 sprang der
   Text beim Seitenwechsel in der Breite (User-Ansage 2026-08-13). */
.nav-links a.is-current{color:var(--blue-ink)}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-cta .btn{padding:10px 18px;font-size:.88rem}
/* Dropdown (Leistungen) */
.has-sub{position:relative}
.has-sub > a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.sub{position:absolute;top:calc(100% + 14px);left:0;transform:translateY(8px);
  min-width:560px;max-width:calc(100vw - 48px);display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:18px;opacity:0;visibility:hidden;transition:opacity .22s ease, transform .22s ease, visibility .22s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub-group{padding:6px 4px}
.sub-group > span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-ink);margin-bottom:8px}
.sub--one{min-width:250px;grid-template-columns:1fr;width:max-content}
/* Menuepunkte mit Punkt-Marker — kurze Begriffe, schnell erfassbar.
   nowrap plus width:max-content am Panel: die Klappe waechst mit dem laengsten
   Eintrag, statt "Datenbereinigung & Anreicherung" auf zwei Zeilen zu brechen
   (Hinweis Daniel Simon 2026-08-14). min-width bleibt als Untergrenze, damit
   eine Klappe mit kurzen Eintraegen nicht schmal und schief aussieht. */
.sub-group a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;
  font-size:.9rem;color:var(--ink-soft);white-space:nowrap}
.sub-group a::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;
  background:var(--teal);transition:transform .18s ease,background .18s ease}
.sub-group a:hover{background:var(--bg-soft);color:var(--ink)}
.sub-group a:hover::before{background:var(--blue-ink);transform:scale(1.3)}
.sub-group .ext{margin-left:auto;font-size:.8rem;color:var(--ink-soft);opacity:.75}
.sub-all{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:6px;padding:10px 14px;
  border-top:1px solid var(--line);font-size:.88rem;font-weight:700;color:var(--blue-ink)}
.sub-all svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.sub-all:hover svg{transform:translateX(3px)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;position:relative;flex:0 0 auto}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:.22s ease}
.nav-toggle span{left:11px;top:21px}
.nav-toggle span::before{left:0;top:-7px}
.nav-toggle span::after{left:0;top:7px}
/* offen → sauberes X */
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Hero (Startseite) — overflow sichtbar, damit das Such-Dropdown nicht abgeschnitten wird */
.hero{position:relative;padding:clamp(34px,4.5vw,64px) 0 clamp(48px,7vw,72px)}
/* Schein tiefer gelegt (war auf Header-Hoehe -> harte Kante an der Nav-Leiste) */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(38% 44% at 68% 52%,rgba(134,201,236,.14),transparent 72%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,64px);align-items:center}
/* Kleiner als frueher (war bis 4.6rem): jedes Wort muss OHNE Trennung in die
   Spalte passen — "AUTOMATISIERUNG." ist das Mass. Kein Umbruch im Wort! */
.hero h1{font-size:clamp(2.2rem,4.3vw,3.6rem);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;margin:4px 0 18px;text-wrap:balance}
/* Claim-H1 (Startseite): drei Stufen in EINER Ueberschrift — kleine Auftakt-
   zeile, grosser Kern, Akzent-Schluss. Etwas kleiner als die alte H1, weil
   jetzt "GESCHÄFTSPROZESSE" das breiteste Wort ist (muss ungetrennt passen). */
.hero h1.h1-claim{font-size:clamp(2rem,3.9vw,3.2rem);margin-bottom:16px}
/* Auftakt- und Schlusszeile bewusst IDENTISCH gesetzt (User 2026-08-10):
   gleiche Groesse, gleiche Sperrung, gleiche Farbe — sie rahmen den Kern. */
.h1-kicker,.h1-tail{display:block;font-size:.38em;font-weight:800;
  letter-spacing:.12em;color:var(--ink-soft)}
.h1-kicker{margin-bottom:.5em}
.h1-tail{margin-top:.5em}
.h1-core{display:block}
.hero .subhead{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:600;color:var(--ink);max-width:30ch;letter-spacing:-.01em}
.hero .subhead b{font-weight:800;color:var(--blue-ink)}
.hero p.lead{font-size:1.06rem;color:var(--ink-soft);max-width:40ch;margin-top:14px}
.hero-actions{display:flex;gap:16px;margin:32px 0 32px;flex-wrap:wrap}
.stat-row{display:flex;gap:clamp(24px,4vw,40px);flex-wrap:wrap}
.stat-row .n{font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.stat-row .l{font-size:.82rem;color:var(--ink-soft)}

/* Hero-Suche: oben rechts ueber dem Visual-Panel; z-index hebt das Dropdown
   ueber die nachfolgende Logo-Marquee (transform-Stacking) */
.hero-search{position:relative;z-index:3;margin:0 0 18px}
.hero-search .hs-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;stroke:var(--ink-soft);stroke-width:2.2;fill:none;
  stroke-linecap:round;pointer-events:none}
#siteSearch{width:100%;padding:15px 20px 15px 48px;border-radius:999px;font:inherit;
  font-size:.95rem;color:var(--ink);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:border-color .2s ease, box-shadow .2s ease}
#siteSearch::placeholder{color:var(--ink-soft);opacity:.85}
#siteSearch:focus{outline:none;border-color:var(--blue-ink);box-shadow:0 0 0 3px rgba(62,107,196,.22),var(--shadow-sm)}
.hs-panel{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:8px;max-height:min(380px,52vh);overflow:auto;
  animation:hs-pop .18s ease both}
@keyframes hs-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hs-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;cursor:pointer}
.hs-item:hover,.hs-item.sel{background:var(--bg-soft)}
.hs-cat{flex:0 0 auto;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-ink);background:var(--blue-light);border-radius:999px;padding:4px 10px}
.hs-tx{min-width:0}
.hs-tx b{display:block;font-size:.93rem;letter-spacing:-.01em}
.hs-tx small{display:block;font-size:.8rem;color:var(--ink-soft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hs-item svg{width:15px;height:15px;margin-left:auto;flex:0 0 15px;stroke:var(--blue-ink);
  stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s ease}
.hs-item:hover svg,.hs-item.sel svg{opacity:1}
.hs-empty{padding:16px 14px 6px;font-size:.92rem;color:var(--ink-soft)}
.hs-empty b{display:block;color:var(--ink);margin-bottom:2px}
@media(max-width:480px){.hero-search{margin-bottom:14px}}

/* Hero-Entrance: gestaffelter Aufbau beim Laden (verkauft ab Sekunde 1) */
.js .hero .eyebrow,.js .hero h1,.js .hero .subhead,.js .hero .lead,.js .hero .pts,
.js .hero .hero-actions,.js .hero .stat-row,.js .hero .hero-search{
  animation:hero-rise .8s cubic-bezier(.22,1,.36,1) both}
.js .hero .eyebrow{animation-delay:.05s}
/* Die H1 ist das LCP-Element — sie startet ohne Verzoegerung und kuerzer,
   damit die wichtigste Zeile der Seite nicht erst nach ~1,4 s steht. */
.js .hero h1{animation-delay:0s;animation-duration:.45s}
.js .hero .subhead{animation-delay:.26s}
.js .hero .lead,.js .hero .pts{animation-delay:.34s}
.js .hero .hero-actions{animation-delay:.44s}
.js .hero .stat-row{animation-delay:.54s}
.js .hero .hero-search{animation-delay:.64s}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.js .hero-visual{animation:hero-in 1s .3s cubic-bezier(.22,1,.36,1) both}
@keyframes hero-in{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}

/* Akzent-Wort ruhig und kraeftig (bewusst ohne Verlaufs-Animation) */
.hero h1 .accent{color:var(--blue-ink)}

/* Hero visual = Produkt/Daten-Panel (z-index: Such-Dropdown ueber Folge-Sektionen).
   align-self:start + margin 0: Suche und Q-Bild beginnen auf Hoehe der H1
   (User 2026-08-06: "Bild rechts und die Suche etwas hoeher"). */
.hero-visual{position:relative;z-index:6;align-self:start;margin-top:0}
/* Blob sitzt hinter der Illustration (frueher oben rechts — ragte in die Nav-Leiste) */
.blob{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:min(74%,360px);aspect-ratio:1;
  background:radial-gradient(circle at 34% 32%,var(--teal),var(--blue) 55%,transparent 72%);
  filter:blur(26px);opacity:.24;border-radius:50%;z-index:0;pointer-events:none}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.05)}}
/* Hero-Illustration: grosses Q mit Stichwoertern (statt Daten-Panel) */
.hero-q{position:relative;z-index:1;padding:0 4px}
.hero-q svg{display:block;width:100%;height:auto;overflow:visible}
.js .hero-q{animation:float-soft 12s ease-in-out infinite}
.panel{
  position:relative;z-index:1;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;
}
.panel-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.panel-title{margin-left:auto;font-size:.78rem;color:var(--ink-soft);font-weight:600}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.kpi{background:var(--bg-soft);border-radius:var(--radius-sm);padding:14px}
.kpi .k{font-size:.72rem;color:var(--ink-soft)}
.kpi .v{font-size:1.3rem;font-weight:700;margin-top:2px}
.kpi .v small{font-size:.7rem;color:var(--teal-ink);font-weight:700}
.chart{height:120px;background:var(--bg-soft);border-radius:var(--radius-sm);padding:14px;display:flex;align-items:flex-end;gap:10px}
.bar{flex:1;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--blue),var(--teal));opacity:.9;transform-origin:bottom}
.js .panel.in .bar{animation:grow-bar .9s cubic-bezier(.22,1,.36,1) both}
.js .panel.in .bar:nth-child(2){animation-delay:.08s}
.js .panel.in .bar:nth-child(3){animation-delay:.16s}
.js .panel.in .bar:nth-child(4){animation-delay:.24s}
.js .panel.in .bar:nth-child(5){animation-delay:.32s}
.js .panel.in .bar:nth-child(6){animation-delay:.40s}
.js .panel.in .bar:nth-child(7){animation-delay:.48s}
@keyframes grow-bar{from{transform:scaleY(0)}}
.float-badge{position:absolute;left:-18px;bottom:26px;z-index:2;background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-sm);padding:12px 16px;display:flex;align-items:center;gap:10px;animation:float 9s ease-in-out infinite .8s}
.float-badge .ring{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--teal) 88%,var(--line) 0)}
.float-badge b{font-size:.95rem}
.float-badge small{display:block;font-size:.72rem;color:var(--ink-soft);font-weight:500}

/* Page-Hero (Unterseiten) */
.page-hero{padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,56px)}
/* Titelblock immer oben buendig (User: war mal oben, mal mittig) */
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,60px);align-items:start}
/* Illustration nicht auf volle Spaltenbreite aufblasen */
.page-hero-grid .page-illus{max-width:520px;width:100%;justify-self:end}
/* Rechte Spalte: Illustration und darunter der Ansprechpartner */
.page-hero-grid .page-hero-side{display:grid;gap:20px;align-content:start;
  max-width:520px;width:100%;justify-self:end}
.page-hero-grid .page-hero-side .page-illus{max-width:none;justify-self:stretch}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:900;letter-spacing:-.035em;margin:18px 0 14px}
.page-hero p.lead{font-size:1.08rem;color:var(--ink-soft);max-width:52ch}
.page-hero .hero-actions{margin:26px 0 0}

/* Logo strip */
.logos{padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.logos p{text-align:center;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
.logo-row{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;width:max-content}
.logo-set{display:flex;align-items:center;gap:clamp(26px,4.5vw,52px);padding-right:clamp(26px,4.5vw,52px)}
.js .logo-track{animation:marquee 30s linear infinite}
.logos:hover .logo-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Referenz-Logos in Originalfarben (User-Wunsch) — kein Graustufen-Filter */
.logo-row img{height:34px;width:auto;opacity:1;filter:none;transition:transform .25s ease}
.logo-row img:hover{transform:scale(1.06)}
.logo-row .logo-link{display:inline-flex;align-items:center}
.logo-row .logo-link:focus-visible{outline:3px solid var(--blue-ink);outline-offset:6px;border-radius:8px}
@media (prefers-reduced-motion: reduce){
  .logo-track{width:auto;flex-wrap:wrap;justify-content:center}
  .logo-set[aria-hidden="true"]{display:none}
}

/* Sections */
section.block{padding:var(--sp-section) 0}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:900;margin:14px 0 12px}
.sec-head p{font-size:1.05rem}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow)}
.card h3{font-size:1.22rem;margin:16px 0 8px}
.card p{font-size:.96rem;color:var(--ink-soft)}
.card .num{position:absolute;top:26px;right:28px;font-size:.85rem;font-weight:800;color:var(--blue-ink);letter-spacing:.05em;opacity:.75}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.9rem;font-weight:600;color:var(--blue-ink)}
.more svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.card:hover .more svg,.news-card:hover .more svg,.tool:hover .more svg{transform:translateX(3px)}
/* Doodle-Spot statt Icon in Karten — weniger Textwueste, mehr Bild */
.card-spot{width:100%;max-width:190px;margin:-4px 0 2px}
.card-spot svg{display:block;width:100%;height:auto}
.js .card-spot svg{animation:float-soft 11s ease-in-out infinite}
.cards--2 .card-spot{max-width:210px}
.ic{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-light),var(--card));border:1px solid var(--line)}
.ic svg{width:24px;height:24px;stroke:var(--teal-ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card--accent{background:linear-gradient(150deg,var(--blue-light),#F3FAFF);border-color:#CDE4F5}
.card--accent .ic{background:var(--card)}
.card .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal-ink);margin-bottom:10px}

/* Tools-Karten */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;
  box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease}
.tool:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow)}
.tool .ic{width:44px;height:44px;border-radius:14px;margin-bottom:14px}
.tool h3{font-size:1.1rem;margin-bottom:6px}
.tool h3 span{color:var(--ink-soft);font-weight:600}
.tool p{font-size:.92rem;color:var(--ink-soft)}
.tool .more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.88rem;font-weight:600;color:var(--blue-ink)}

/* Split: Illustration + Text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,56px);align-items:start}
.illus{position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,var(--blue-light),#EAF4FF);border:1px solid var(--line)}
.illus svg{width:100%;height:auto}
.check{display:flex;gap:14px;margin-top:16px;font-size:.98rem;color:var(--ink-soft);align-items:flex-start}
.check b{color:var(--ink);font-weight:600}
.check svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px;stroke:var(--teal-ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Interaktiver Ablauf */
.story{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,50px);align-items:center}
.steps{display:flex;flex-direction:column;gap:14px}
.step{text-align:left;font:inherit;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 24px;cursor:pointer;position:relative;transition:.25s ease}
.step:hover{border-color:var(--blue);transform:translateX(4px)}
.step .st-n{font-size:.78rem;font-weight:800;color:var(--blue-ink);letter-spacing:.06em}
.step .st-t{display:block;font-size:1.08rem;font-weight:700;color:var(--ink);margin-top:4px}
/* Beschreibung immer sichtbar — konstante Höhe, kein Layout-Springen beim Umschalten */
.step .st-d{display:block;font-size:.93rem;margin-top:6px;opacity:.72;transition:opacity .3s ease}
.step.is-active{border-color:transparent;box-shadow:var(--shadow-sm);background:linear-gradient(150deg,var(--blue-light),#F5FBFF)}
.step.is-active .st-d{opacity:1}
.step.is-active::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
  border-radius:4px;background:linear-gradient(180deg,var(--blue),var(--teal))}

.stage{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  background:radial-gradient(120% 120% at 80% 0%,var(--card), var(--bg-soft));min-height:360px;overflow:hidden}
.stage::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  top:-80px;right:-80px;background:radial-gradient(circle,rgba(134,214,205,.22),transparent 70%)}
.stage-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;gap:24px;padding:32px clamp(24px,4vw,48px);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s;pointer-events:none}
.stage-panel.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.stage-cap{font-size:.98rem;color:var(--ink-soft);max-width:38ch}
/* Fette Einleitung („Prozess läuft." usw.) als eigene, zentrierte Zeile über dem Text —
   keine „Treppe" durch Inline-Badge + Umbruch */
.stage-cap b{display:block;color:var(--ink);font-size:1.06rem;margin-bottom:6px}
.stage-cap .done{display:flex;justify-content:center;margin:0 auto 6px;font-size:1.06rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{padding:9px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.85rem;font-weight:600;
  box-shadow:var(--shadow-sm);animation:pop .5s ease both}
.chip:nth-child(2){animation-delay:.12s}.chip:nth-child(3){animation-delay:.24s}
.chip:nth-child(4){animation-delay:.36s}.chip:nth-child(5){animation-delay:.48s}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
/* Lead-Score-Karte (statt rundem Gauge) */
.score{width:min(320px,88%);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 20px;box-shadow:var(--shadow-sm)}
.score-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.score-label{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.score-num{font-weight:800;font-size:1.9rem;letter-spacing:-.02em;color:var(--ink)}
.score-num small{font-size:.9rem;font-weight:700;color:var(--ink-soft);margin-left:2px}
.score-bar{height:10px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);overflow:hidden}
.score-bar i{display:block;height:100%;width:84%;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--teal))}
.stage-panel.is-active .score-bar i{animation:score-fill 1s cubic-bezier(.22,1,.36,1) both}
@keyframes score-fill{from{width:0}}
.grow{display:flex;align-items:flex-end;gap:12px;height:120px;justify-content:center}
.grow i{display:block;width:34px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--blue),var(--teal));animation:grow 1s ease both}
.grow i:nth-child(2){animation-delay:.15s}.grow i:nth-child(3){animation-delay:.3s}.grow i:nth-child(4){animation-delay:.45s}
@keyframes grow{from{height:0}}
.done{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--teal-ink)}
.done svg{width:22px;height:22px;stroke:var(--teal-ink);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Kategorie-Sektionen (Leistungen) */
.cat{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,60px);align-items:start}
.cat--flip .cat-illus{order:2}
.cat-illus{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--blue-light),#EAF4FF)}
.cat-illus svg{width:100%;height:auto}
.cat h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:14px 0 12px}
.cat > div > p{color:var(--ink-soft)}
.svc-list{display:grid;gap:12px;margin-top:22px}
.svc{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px;box-shadow:var(--shadow-sm);transition:transform .2s ease,border-color .2s ease}
.svc:hover{transform:translateX(5px);border-color:var(--blue)}
.svc .ic{flex:0 0 44px;width:44px;height:44px;border-radius:12px}
.svc .ic svg{width:20px;height:20px}
.svc b{display:block;font-size:.99rem;color:var(--ink)}
.svc span{font-size:.88rem;color:var(--ink-soft)}
.branch-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.branch-chips .chip{animation:none;box-shadow:none;background:var(--bg-soft)}

/* Stat band */
.band{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:clamp(48px,6vw,64px) 0;text-align:center}
.band-grid .n{font-size:clamp(2rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.02em;color:var(--teal-ink)}
.band-grid .l{font-size:.9rem;color:var(--ink-soft);margin-top:6px}
.band-grid > div{transition:transform .25s ease}
.band-grid > div:hover{transform:translateY(-6px) scale(1.03)}

/* Team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.member{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease}
.member:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow)}
.member img,.member .avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;margin:6px auto 14px;
  object-position:50% 22%;border:4px solid var(--blue-light);position:relative;
  transition:transform .25s ease, border-radius .25s ease, box-shadow .25s ease}
/* Portrait-Hover: größer + eckig, damit man die Person besser sieht */
.member img:hover{transform:scale(1.45);border-radius:14px;box-shadow:var(--shadow);z-index:5}
.member .avatar{display:grid;place-items:center;background:linear-gradient(135deg,var(--blue-light),#F3FAFF);
  font-weight:800;font-size:1.5rem;color:var(--blue-ink)}
.member b{display:block;font-size:1rem;letter-spacing:-.01em}
.member span{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:2px}
.member a{display:inline-block;font-size:.8rem;color:var(--blue-ink);margin-top:8px;font-weight:600}
.member a:hover{color:var(--teal-ink)}

/* Timeline: Unternehmensgeschichte als Weg */
.timeline{position:relative;max-width:880px;margin:0 auto;padding:10px 0 6px}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;
  background:linear-gradient(180deg,var(--blue-light),var(--blue) 35%,var(--teal));border-radius:3px}
.tl-item{position:relative;width:50%;padding:0 34px 26px 0}
.tl-item:nth-child(even){margin-left:50%;padding:0 0 26px 34px}
.tl-dot{position:absolute;top:14px;right:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--card);border:4px solid var(--blue);box-shadow:0 0 0 4px rgba(134,201,236,.22);z-index:1}
.tl-item:nth-child(even) .tl-dot{right:auto;left:-9px}
.tl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;
  box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease}
.tl-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow)}
.tl-year{display:inline-block;font-weight:800;font-size:.8rem;letter-spacing:.04em;color:var(--blue-ink);
  background:var(--blue-light);border-radius:999px;padding:3px 12px;margin-bottom:8px}
.tl-card p{font-size:.93rem;color:var(--ink-soft);margin:0}
.tl-now{position:relative;text-align:center;padding-top:2px}
.tl-now span{display:inline-block;font-weight:800;font-size:.8rem;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--teal));border-radius:999px;padding:6px 18px;
  box-shadow:var(--shadow-sm)}
@media(max-width:760px){
  .timeline::before{left:12px}
  .tl-item,.tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 22px 40px}
  .tl-dot,.tl-item:nth-child(even) .tl-dot{right:auto;left:3px;top:12px}
  .tl-now{text-align:left;padding-left:40px}
}

/* Siegel */
.seals{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap}
.seal{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 24px;box-shadow:var(--shadow-sm)}
.seal img{height:64px;width:auto}
.seal b{display:block;font-size:.95rem}
.seal span{font-size:.82rem;color:var(--ink-soft)}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,56px);align-items:start}
.contact-grid--form{grid-template-columns:1.1fr .9fr}
.contact-card{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 24px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.contact-card .ic{flex:0 0 46px;width:46px;height:46px;border-radius:14px}
.contact-card b{display:block;font-size:.98rem}
.contact-card a,.contact-card span{font-size:.93rem;color:var(--ink-soft)}
.contact-card a:hover{color:var(--blue-ink)}

/* Formular */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3.4vw,36px);box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px}
.field label small{color:var(--ink-soft);font-weight:500}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;border:1px solid #7E95AE;border-radius:12px;
  font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E95AE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.field input::placeholder,.field textarea::placeholder{color:#64748B;opacity:1}
/* Fehlendes Pflichtfeld: nicht nur die Sammelmeldung, sondern das Feld selbst */
.field.is-invalid label,.check.is-invalid{color:#A3282D}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select,
[aria-invalid="true"]{border-color:#A3282D;box-shadow:0 0 0 3px rgba(163,40,45,.12)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-ink);box-shadow:0 0 0 3px rgba(62,107,196,.30)}
.field textarea{min-height:140px;resize:vertical}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;color:var(--ink-soft);margin:6px 0 20px}
/* 24 px ist die WCAG-Mindestflaeche (2.5.8) — 18 px waren zu klein zum Treffen */
.consent input{width:24px;height:24px;margin-top:0;accent-color:var(--blue-ink);flex:0 0 auto}
.consent a{color:var(--blue-ink);font-weight:600}
.form-note{font-size:.82rem;color:var(--ink-soft);margin-top:14px}
.form-status{display:none;margin-top:14px;padding:12px 16px;border-radius:12px;font-size:.9rem;font-weight:600}
.form-status.ok{display:block;background:#E7F6EF;color:#0E7A5F;border:1px solid #BFE8D8}
.form-status.err{display:block;background:#FDEEEE;color:#B42318;border:1px solid #F4C7C3}

/* News */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease}
.news-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow)}
.news-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--blue-light)}
/* Doodle-Cover im News-Teaser (Startseite) statt Fotos */
.nc-illus{aspect-ratio:16/9;background:linear-gradient(135deg,var(--blue-light),#EAF4FF);
  border-bottom:1px solid var(--line)}
.nc-illus svg{width:100%;height:100%}
[data-theme="dark"] .nc-illus{background:linear-gradient(135deg,#16233B,#0F1930)}
.news-card .nc-body{padding:24px;display:flex;flex-direction:column;flex:1}
.news-card time{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-ink)}
.news-card h3{font-size:1.08rem;line-height:1.3;margin:8px 0 8px}
.news-card p{font-size:.9rem;color:var(--ink-soft);flex:1}
.news-card .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.88rem;font-weight:600;color:var(--blue-ink)}
.article{max-width:760px;margin:0 auto}
.article-head{margin-bottom:28px}
.article-head time{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-ink)}
.article-head h1{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:12px 0 0}
.article-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:26px 0}
.article-img img{width:100%;max-height:420px;object-fit:cover}
/* News-Aufmacher als Doodle-Illustration statt Foto */
.article-illus{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:26px 0;
  background:linear-gradient(135deg,var(--blue-light),#EAF4FF);padding:10px}
.article-illus svg{display:block;width:100%;height:auto;max-height:360px}
[data-theme="dark"] .article-illus{background:linear-gradient(135deg,#16233B,#0F1930)}
.article .tag-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.article .tag-row span{font-size:.75rem;font-weight:700;color:var(--teal-ink);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--blue-ink);margin-bottom:22px}
.back-link svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Downloads */
.dl-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dl{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:16px 24px;box-shadow:var(--shadow-sm);transition:transform .2s ease,border-color .2s ease}
.dl:hover{transform:translateY(-4px) scale(1.015);border-color:var(--blue)}
.dl .ic{flex:0 0 46px;width:46px;height:46px;border-radius:14px}
.dl b{display:block;font-size:.96rem}
.dl span{font-size:.83rem;color:var(--ink-soft)}

/* Legal / Prose */
.prose{max-width:760px}
.prose h1{font-size:clamp(2rem,4vw,2.8rem);margin:16px 0 22px}
.prose h2{font-size:1.35rem;margin:34px 0 10px}
.prose h3{font-size:1.08rem;margin:24px 0 8px}
.prose h4{font-size:.96rem;font-weight:700;letter-spacing:-.01em;margin:18px 0 6px;color:var(--ink)}
.prose p,.prose li{color:var(--ink-soft);font-size:.98rem;margin-bottom:12px}
.prose ul{padding-left:20px}
.prose a{color:var(--blue-ink);font-weight:600}
.prose a:hover{color:var(--teal-ink)}
.prose strong{color:var(--ink)}

/* „Kurz gesagt" — Drei-Punkte-Kurzfassung ganz oben auf einer Seite */
.kgs{border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius-sm);
  background:var(--bg-soft);padding:18px 22px;margin:26px 0 0;max-width:760px}
.kgs > b{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-ink);margin-bottom:10px}
.kgs ul{list-style:none;display:grid;gap:8px}
.kgs li{position:relative;padding-left:20px;color:var(--ink-soft);font-size:.97rem;line-height:1.55}
.kgs li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--teal)}
.page-hero .kgs{margin-top:22px}

/* FAQ-Akkordeon (native <details>, ohne JS) */
.faq{display:grid;gap:12px;max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;position:relative;
  font-weight:650;color:var(--ink);font-size:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;
  margin-top:-6px;border-right:2px solid var(--blue-ink);border-bottom:2px solid var(--blue-ink);
  transform:rotate(45deg);transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-item summary:hover{color:var(--blue-ink)}
.faq-item summary:focus-visible{outline:3px solid var(--blue-ink);outline-offset:-3px}
.faq-a{padding:0 22px 18px}
.faq-a p{color:var(--ink-soft);font-size:.97rem;line-height:1.65;margin:0}

/* Tabellen (Vergleiche, Rechenbeispiele) */
.tbl-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card)}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.tbl caption{text-align:left;padding:14px 18px 0;font-size:.86rem;color:var(--ink-soft)}
.tbl th,.tbl td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{font-weight:700;color:var(--ink);background:var(--bg-soft);font-size:.86rem;
  letter-spacing:.02em}
.tbl td{color:var(--ink-soft)}
.tbl tr:last-child td{border-bottom:none}
.tbl td strong{color:var(--ink)}

/* Breadcrumbs */
.crumbs{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--ink-soft);
  flex-wrap:wrap;margin-bottom:6px}
.crumbs a{color:var(--blue-ink)}
.crumbs a:hover{color:var(--teal-ink)}
.crumbs span[aria-hidden]{color:var(--line)}

/* Fakten-Kacheln (Wert / Label / Beschreibung) */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.facts--3{grid-template-columns:repeat(3,1fr)}
.fact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow-sm);text-align:center;transition:transform .25s ease}
.fact:hover{transform:translateY(-6px) scale(1.03)}
.fact .n{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em;color:var(--teal-ink)}
.fact .l{font-size:.95rem;font-weight:700;margin-top:4px}
.fact .d{font-size:.84rem;color:var(--ink-soft);margin-top:6px}

/* Timeline / Ablauf */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:tl}
.tl-step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 24px 24px;box-shadow:var(--shadow-sm)}
.tl-step .st-n{font-size:.78rem;font-weight:800;color:var(--blue-ink);letter-spacing:.06em}
.tl-step h3{font-size:1.08rem;margin:8px 0 8px}
.tl-step p{font-size:.9rem;color:var(--ink-soft)}
.tl-step::after{content:"";position:absolute;top:50%;right:-22px;width:22px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--teal));opacity:.6}
.tl-step:last-child::after{display:none}

/* Nummerierte Workflow-Liste */
.num-list{counter-reset:nl;display:grid;gap:12px;max-width:760px}
.num-list li{list-style:none;counter-increment:nl;display:flex;gap:16px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 20px;
  box-shadow:var(--shadow-sm);font-size:.96rem;color:var(--ink-soft)}
.num-list li::before{content:counter(nl,decimal-leading-zero);flex:0 0 auto;font-size:.8rem;font-weight:800;
  color:var(--blue-ink);background:var(--blue-light);border-radius:10px;padding:6px 10px;letter-spacing:.05em}

/* Problem/Loesung */
.pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pl{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.pl .no,.pl .yes{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.pl .no{color:#B42318;font-weight:600;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.pl .yes{color:var(--ink)}
.pl .yes b{color:var(--teal-ink)}
.pl .no::before{content:"✕";font-weight:800;flex:0 0 auto}
.pl .yes::before{content:"✓";font-weight:800;color:var(--teal-ink);flex:0 0 auto}

/* Partner-Banner */
.partner{display:flex;align-items:center;gap:26px;background:linear-gradient(150deg,var(--blue-light),#F3FAFF);
  border:1px solid #CDE4F5;border-radius:var(--radius);padding:30px clamp(24px,4vw,40px);flex-wrap:wrap}
.partner .kick{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-ink)}
.partner h3{font-size:1.35rem;margin:4px 0 4px}
.partner p{font-size:.95rem;color:var(--ink-soft)}
.partner .btn{margin-left:auto}

/* Zitat */
.quote{max-width:760px;margin:0 auto;text-align:center}
.quote blockquote{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;letter-spacing:-.01em;line-height:1.4}
.quote blockquote::before{content:"„";display:block;font-size:3.4rem;font-weight:800;line-height:.6;
  margin-bottom:14px;color:var(--teal)}
.quote cite{display:block;margin-top:16px;font-style:normal;font-size:.9rem;color:var(--ink-soft)}

/* Ansprechpartner: Streifen im Seitenkopf (.apx) + Direktkontakt-Block (.apb) */
.apx{margin:24px 0 0;padding:14px 18px;border:1px solid var(--line);
  border-left:4px solid var(--teal);border-radius:var(--radius-sm);
  background:var(--card);max-width:760px}
.apx-lbl{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-ink);font-weight:700;margin-bottom:12px}
.apx-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.apx-p{display:flex;align-items:center;gap:12px;min-width:0}
.apx-p img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px;
  box-shadow:var(--shadow-sm)}
.apx-p > span{display:grid;min-width:0;line-height:1.35}
.apx-p b{font-size:.92rem}
.apx-role{font-size:.78rem;color:var(--ink-soft)}
.apx-p a{font-size:.82rem;font-weight:600;color:var(--blue-ink);overflow-wrap:break-word}
.apx-p a:hover{color:var(--teal-ink)}
.page-hero .apx{margin-top:22px}
.page-hero-side .apx{margin:0;max-width:none}

.apb{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:clamp(26px,4vw,42px)}
.apb-head h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:12px 0 10px}
.apb-head p{color:var(--ink-soft);max-width:62ch}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:24px}
.ap-card{display:flex;align-items:center;gap:18px;padding:18px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.ap-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 88px}
.ap-card b{display:block;font-size:1.04rem;letter-spacing:-.01em}
.ap-card .ap-role{display:block;font-size:.86rem;color:var(--ink-soft);margin:2px 0 10px}
.ap-card a{display:block;font-size:.9rem;font-weight:600;color:var(--blue-ink);margin-top:4px;
  overflow-wrap:break-word}
.ap-card a:hover{color:var(--teal-ink)}
.ap-hint{font-weight:500;font-size:.78rem;color:var(--ink-soft);margin-left:8px}
.apb-alt{margin-top:20px;font-size:.92rem;color:var(--ink-soft)}
.apb-alt a{color:var(--blue-ink);font-weight:600}
@media(max-width:420px){
  .ap-card{flex-direction:column;align-items:flex-start;text-align:left}
}

/* Direktkontakt-Banner */
.sales{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,50px);align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:clamp(28px,4vw,44px)}
.sales h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:12px 0 10px}
.sales p{color:var(--ink-soft)}
.sales .hero-actions{margin:22px 0 0}
.sales-illus svg{width:100%;height:auto}

@media(max-width:900px){
  .facts,.facts--3,.pl-grid{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:1fr}
  .tl-step::after{display:none}
  .sales{grid-template-columns:1fr}
  .sales-illus{display:none}
  .partner .btn{margin-left:0}
}
@media(max-width:560px){
  .facts,.facts--3,.pl-grid{grid-template-columns:1fr}
}

/* Doodle-Spots (Ablauf-Bühne, Tools), Abschnitts-Verbinder, CTA-Figuren */
/* Spots schwimmen sanft in den Panel-Ecken (Seite 1+3 rechts, Seite 2 links) */
@keyframes float-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.stage-spot{position:absolute;top:16px;right:22px;width:clamp(84px,17%,108px);
  animation:float-soft 8s ease-in-out infinite}
.stage-panel[data-panel="1"] .stage-spot{right:auto;left:22px;animation-delay:1.2s}
.stage-panel[data-panel="2"] .stage-spot{animation-delay:2.4s}
.stage-spot svg{width:100%;height:auto;display:block}
/* Gleicher ruhiger Schwebe-Effekt fuer Illustrationen auf allen Seiten */
.js .page-illus{animation:float-soft 11s ease-in-out infinite}
.js .cat-illus{animation:float-soft 12s ease-in-out infinite .8s}
.js .sales-illus{animation:float-soft 10s ease-in-out infinite .4s}
.tool-spot{height:92px;margin-bottom:16px}
.tool-spot svg{height:100%;width:auto;display:block}
/* Gepunktete S-Linie zwischen den Startseiten-Blöcken; Punkte fließen langsam
   nach unten (minimal, respektiert prefers-reduced-motion global) */
.sec-link{display:flex;justify-content:center;height:88px;
  margin:calc(var(--sp-section)*-.6) auto calc(var(--sp-section)*-.12)}
.sec-link svg{height:100%}
.sec-link path{stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:1 9;opacity:.85}
.js .sec-link path{animation:secflow 7s linear infinite}
@keyframes secflow{to{stroke-dashoffset:-40}}
.cta-doodle{position:absolute;bottom:0;width:clamp(110px,12vw,160px);pointer-events:none}
.cta-doodle--l{left:clamp(10px,3vw,44px)}
.cta-doodle--r{right:clamp(10px,3vw,44px)}
.cta-doodle svg{width:100%;height:auto;display:block}
@media(max-width:1100px){.cta-doodle{display:none}}
@media(max-width:640px){.stage-spot{display:none}}

/* Produkt-Screenshot im Browser-Rahmen (+ schwebende Zweitkarte) */
.shot{position:relative;padding-bottom:56px}
.shot-frame{border-radius:18px;border:1px solid var(--line);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--bg-soft)}
.shot-url{margin-left:10px;font-size:.78rem;font-weight:600;color:var(--ink-soft);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 14px}
.shot-frame img{width:100%;height:auto;display:block}
.shot-float{position:absolute;right:-14px;bottom:0;width:56%;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);animation:float 9s ease-in-out infinite .5s}
.shot-float img{width:100%;height:auto;display:block}
/* Die Marven-Screenshots sind hell. Im Dunkel-Theme waren sie sonst die
   hellste Flaeche der Seite — leicht abgedunkelt statt grell. */
[data-theme="dark"] .shot-frame img,[data-theme="dark"] .shot-float img{
  filter:brightness(.88) contrast(1.02)}
@media(max-width:900px){.shot{padding-bottom:0}.shot-float{display:none}}

/* Dunkler CTA-Block */
.cta{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:24px;
  margin:var(--sp-section) auto;width:min(1280px,calc(100% - clamp(24px,5vw,44px)));
  padding:clamp(52px,7vw,76px) clamp(24px,5vw,48px);text-align:center}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;filter:blur(44px)}
.cta::before{width:320px;height:320px;background:var(--teal);opacity:.2;top:-120px;left:-60px}
.cta::after{width:320px;height:320px;background:var(--blue);opacity:.18;bottom:-140px;right:-40px}
.cta h2{position:relative;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:900;margin-bottom:14px}
.cta p{position:relative;color:#B7C6DB;max-width:52ch;margin:0 auto 28px}
.cta .hero-actions{justify-content:center;margin-bottom:0}
.cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.cta .btn-ghost:hover{border-color:var(--teal);color:#fff}

/* Cookie-Hinweis als Modal */
.cc{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(16px,4vw,40px);background:rgba(11,21,38,.55);backdrop-filter:blur(6px);
  animation:cc-fade .25s ease both}
.cc[hidden]{display:none}
@keyframes cc-fade{from{opacity:0}to{opacity:1}}
.cc-box{position:relative;width:min(580px,100%);max-height:calc(100vh - 32px);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 40px 80px -30px rgba(11,21,38,.55);padding:clamp(26px,4vw,38px);
  animation:cc-pop .32s cubic-bezier(.22,1,.36,1) both}
@keyframes cc-pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.cc-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;
  background:var(--blue-light);margin-bottom:16px}
.cc-ic svg{width:26px;height:26px;stroke:var(--teal-ink);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.cc-box h2,.cc-title{font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:800;margin-bottom:10px;
  color:var(--ink)}
.cc-box p{font-size:.92rem;color:var(--ink-soft);margin-bottom:20px}
.cc-box p a{color:var(--blue-ink);font-weight:600}
.cc-opts{display:grid;gap:8px;margin-bottom:24px}
.cc-opt{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--bg-soft);cursor:pointer;
  transition:border-color .18s ease,background .18s ease}
.cc-opt:hover{border-color:var(--blue)}
.cc-opt input{position:absolute;opacity:0;width:0;height:0}
.cc-mark{flex:0 0 42px;width:42px;height:24px;margin-top:1px;border-radius:999px;
  background:var(--line);position:relative;transition:background .2s ease}
.cc-mark::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,21,38,.3);
  transition:transform .2s ease}
.cc-opt input:checked + .cc-mark{background:var(--teal-ink)}
.cc-opt input:checked + .cc-mark::after{transform:translateX(18px)}
.cc-opt input:disabled + .cc-mark{opacity:.65}
.cc-opt input:disabled ~ .cc-tx{cursor:default}
.cc-opt input:focus-visible + .cc-mark{outline:3px solid var(--blue-ink);outline-offset:3px}
.cc-tx b{display:block;font-size:.94rem}
.cc-tx small{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:2px}
.cc-actions{display:flex;gap:12px;flex-wrap:wrap}
.cc-actions .btn{flex:1 1 auto;justify-content:center}
body.cc-open,body.nav-open{overflow:hidden}
[data-theme="dark"] .cc{background:rgba(6,11,20,.7)}
[data-theme="dark"] .cc-ic{background:rgba(134,214,205,.14)}
@media(max-width:480px){.cc-actions .btn{flex:1 1 100%}}

/* Hinweis vor externen Links — teilt sich die Optik mit dem Cookie-Modal */
.xl{position:fixed;inset:0;z-index:210;display:grid;place-items:center;
  padding:clamp(16px,4vw,40px);background:rgba(11,21,38,.55);backdrop-filter:blur(6px);
  animation:cc-fade .25s ease both}
.xl[hidden]{display:none}
.xl-box{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 40px 80px -30px rgba(11,21,38,.55);padding:clamp(26px,4vw,38px);
  animation:cc-pop .32s cubic-bezier(.22,1,.36,1) both}
.xl-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;
  background:var(--blue-light);margin-bottom:16px}
.xl-ic svg{width:26px;height:26px;stroke:var(--teal-ink);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.xl-title{font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:800;margin-bottom:10px;color:var(--ink)}
.xl-box p{font-size:.92rem;color:var(--ink-soft);margin-bottom:16px}
.xl-note{font-weight:600;color:var(--teal-ink)}
.xl-note[hidden]{display:none}
.xl-target{display:grid;gap:2px;padding:14px 16px;margin-bottom:18px;border-radius:14px;
  border:1px solid var(--line);background:var(--bg-soft)}
.xl-lb{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}
.xl-host{font-size:1.02rem;font-weight:800;color:var(--ink);word-break:break-all}
.xl-url{font-size:.8rem;color:var(--ink-soft);word-break:break-all;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.xl-skip{display:flex;align-items:center;gap:10px;margin-bottom:20px;
  font-size:.86rem;color:var(--ink-soft);cursor:pointer}
.xl-skip input{width:18px;height:18px;accent-color:var(--teal-ink);cursor:pointer}
.xl-actions{display:flex;gap:12px;flex-wrap:wrap}
.xl-actions .btn{flex:1 1 auto;justify-content:center}
body.xl-open{overflow:hidden}
[data-theme="dark"] .xl{background:rgba(6,11,20,.7)}
[data-theme="dark"] .xl-ic{background:rgba(134,214,205,.14)}
/* ohne color-scheme bleibt das System-Kaestchen auch im Dunkelmodus weiss */
[data-theme="dark"] .xl-skip input{color-scheme:dark}
@media(max-width:480px){.xl-actions .btn{flex:1 1 100%}}

/* Verbraucher-/Datenschutz-Band (Uebernahme aus der alten quadress.de) */
.privacy{background:linear-gradient(135deg,#3E6BC4,#5B86D8);color:#fff;
  padding:clamp(48px,6vw,68px) 0;text-align:center}
.privacy .wrap{max-width:760px}
.privacy-ic{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;
  border-radius:18px;background:rgba(255,255,255,.16)}
.privacy-ic svg{width:28px;height:28px;stroke:#fff;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.privacy h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;margin-bottom:10px}
.privacy p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto 26px}
/* Feste dunkle Schrift statt var(--blue-ink): im Dunkel-Theme wurde die
   Variable hell (#86C9EC) und stand auf dem weissen Knopf bei 1,81:1 */
.privacy-btn{background:#fff;color:#2B4B8C;box-shadow:0 14px 30px -14px rgba(11,21,38,.55)}
.privacy-btn:hover{background:#fff;color:var(--dark)}
/* Der Fokusring ist blau wie das Band selbst — hier weiss, sonst unsichtbar */
.privacy :focus-visible,.cta :focus-visible{outline-color:#fff}
.privacy-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .privacy{background:linear-gradient(135deg,#20386B,#16283D)}
/* Variante fuer laufenden Text (Widerrufsrecht auf daten-sperren.html):
   gleiches Band, aber linksbuendig und mit Fliesstext-Abstaenden. */
.privacy--doc{text-align:left}
.privacy--doc .wrap{max-width:860px}
.privacy--doc h2{margin-bottom:14px}
.privacy--doc h3{font-size:1.12rem;font-weight:800;margin:26px 0 8px}
.privacy--doc h4{font-size:.98rem;font-weight:700;margin:18px 0 8px}
.privacy--doc p{max-width:none;margin:0 0 14px}
.privacy--doc ul{padding-left:20px;margin:0}
.privacy--doc li{color:rgba(255,255,255,.9);margin-bottom:8px}
.privacy--doc a{color:#fff;font-weight:600;text-decoration:underline}
/* Verbandssiegel (DDV) — brauchen eine weisse Flaeche, die Grafiken sind dafuer gemacht */
.siegel{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.siegel img{width:100%;max-width:320px;height:auto;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:14px}

/* 404 */
.err-hero{min-height:56vh;display:grid;place-items:center;text-align:center;padding:60px 0}
.err-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:26px 0 12px}
.err-hero p{color:var(--ink-soft);max-width:46ch;margin:0 auto 26px}
.err-hero svg{margin:0 auto}

/* Footer */
footer{background:transparent;color:#9FB0C6;padding:0 clamp(12px,2.5vw,22px) 0;margin-top:var(--sp-section)}
footer .wrap{max-width:1280px;margin:0 auto;background:var(--dark);
  border-radius:24px 24px 0 0;padding:60px clamp(28px,4vw,52px) 40px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
footer .logo{color:#fff}
footer .logo-full{height:54px;width:auto;display:block}
footer h4,footer .foot-title{color:#fff;font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
footer a{display:block;color:#9FB0C6;font-size:.92rem;margin-bottom:10px}
footer a:hover{color:#fff}
.foot-contact{font-size:.9rem;line-height:1.7;font-style:normal;margin-top:14px}
.foot-contact a{display:inline}
.social{display:flex;gap:12px;margin-top:18px}
.social a{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  border:1px solid rgba(255,255,255,.14);margin-bottom:0;transition:border-color .2s ease, background .2s ease}
.social a:hover{border-color:var(--teal);background:rgba(134,214,205,.08)}
.social svg{width:17px;height:17px;fill:#B7C6DB}
.social a:hover svg{fill:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:#6E809A;flex-wrap:wrap;gap:8px}

/* ============================================================
   Dunkel-Variante (PLAN.md Punkt 4b) — tief-blau mit feinem
   Schimmer, feine Linien (#9DBBF0 bei ~15 %), weiche Glows.
   Eine Seite ist komplett hell ODER komplett dunkel, nie gemischt.
   ============================================================ */
[data-theme="dark"]{
  --ink:#E7EEF8;
  --ink-soft:#9FB2CC;
  --line:rgba(157,187,240,.15);
  --bg:#0B1220;
  --bg-soft:#101A2E;
  --card:#16233B;
  --blue-ink:#86C9EC;
  --teal-ink:#86D6CD;
  --blue-light:#1B2A47;
  --shadow:0 24px 60px -28px rgba(0,0,0,.55);
  --shadow-sm:0 10px 26px -14px rgba(0,0,0,.45);
}
[data-theme="dark"] body{
  background:
    radial-gradient(38% 26% at 92% 10%, rgba(134,201,236,.10), transparent 70%),
    radial-gradient(40% 26% at 4% 30%, rgba(134,214,205,.09), transparent 70%),
    radial-gradient(42% 26% at 96% 52%, rgba(157,187,240,.08), transparent 70%),
    radial-gradient(40% 26% at 3% 72%, rgba(134,201,236,.08), transparent 70%),
    var(--bg);
}
[data-theme="dark"] .nav{background:rgba(13,21,38,.82)}
[data-theme="dark"] .hero::before{
  background:radial-gradient(40% 48% at 70% 22%,rgba(134,201,236,.12),transparent 70%)}
[data-theme="dark"] .panel{
  box-shadow:0 0 90px rgba(134,201,236,.14), var(--shadow)}
[data-theme="dark"] .blob{opacity:.2}
[data-theme="dark"] .btn-primary{color:#0B2A3A}
[data-theme="dark"] .card--accent{
  background:linear-gradient(150deg,#1B2A47,#14203A);border-color:rgba(134,201,236,.25)}
[data-theme="dark"] .step.is-active{
  background:linear-gradient(150deg,#1B2A47,#14203A)}
[data-theme="dark"] .partner{
  background:linear-gradient(150deg,#1B2A47,#14203A);border-color:rgba(134,201,236,.22)}
[data-theme="dark"] .illus,[data-theme="dark"] .cat-illus{
  background:linear-gradient(135deg,#16233B,#0F1930)}
[data-theme="dark"] .member .avatar{
  background:linear-gradient(135deg,#1B2A47,#14203A);color:var(--blue-ink)}
[data-theme="dark"] .logo-row img{
  background:#fff;border-radius:10px;padding:6px 12px;height:46px;opacity:1;filter:none}
[data-theme="dark"] .cta{border:1px solid rgba(157,187,240,.12)}
[data-theme="dark"] footer .wrap{border:1px solid rgba(157,187,240,.12);border-bottom:none}
[data-theme="dark"] .kpi .v small{color:var(--teal-ink)}
[data-theme="dark"] .form-status.ok{background:rgba(134,214,205,.12);color:#86D6CD;border-color:rgba(134,214,205,.3)}
[data-theme="dark"] .form-status.err{background:rgba(220,38,38,.14);color:#F1948A;border-color:rgba(220,38,38,.35)}
/* Illustrations-Flaechen kippen mit (SVG nutzt var(--il-*)) */
[data-theme="dark"]{
  --il-card:#16233B;--il-head:#1B2A47;--il-tile:#121E33;
  --il-line:rgba(157,187,240,.25);--il-ink:#E7EEF8;--il-soft:#9FB2CC;
  --il-chip:#1B2A47;--il-green:rgba(134,214,205,.18);
}
[data-theme="dark"] body::before{background:radial-gradient(circle,rgba(134,214,205,.13),transparent 64%)}
[data-theme="dark"] body::after{background:radial-gradient(circle,rgba(157,187,240,.13),transparent 64%)}
[data-theme="dark"] .float-badge .ring{background:conic-gradient(var(--teal) 88%,rgba(157,187,240,.35) 0)}
[data-theme="dark"] .cta{color:#E7EEF8}
[data-theme="dark"] .cta .btn-ghost{color:#E7EEF8}
[data-theme="dark"] footer .logo,[data-theme="dark"] footer h4,[data-theme="dark"] footer .foot-title{color:#E7EEF8}
[data-theme="dark"] footer a:hover{color:#E7EEF8}
[data-theme="dark"] .pl .no{color:#F1948A}
[data-theme="dark"] .seal img{background:#fff;border-radius:10px;padding:6px}
[data-theme="dark"] .field input,[data-theme="dark"] .field textarea{border-color:rgba(157,187,240,.4)}
[data-theme="dark"] .field input::placeholder,[data-theme="dark"] .field textarea::placeholder{color:#8FA3C0}
[data-theme="dark"] .skip-link{color:var(--blue-ink)}
[data-theme="dark"] .news-card img{opacity:.9}

/* Hell/Dunkel-Umschalter (nur Startseiten-Varianten) */
.variant-switch{position:fixed;right:22px;bottom:22px;z-index:100;width:52px;height:52px;
  border-radius:50%;display:grid;place-items:center;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s ease, border-color .2s ease}
.variant-switch:hover{transform:translateY(-2px);border-color:var(--blue)}
.variant-switch svg{width:22px;height:22px;stroke:var(--blue-ink);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Nach-oben-Pfeil (erscheint ab ~600px Scrolltiefe, über dem Theme-Umschalter) */
.to-top{position:fixed;right:22px;bottom:86px;z-index:100;width:52px;height:52px;
  border-radius:50%;display:grid;place-items:center;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, border-color .2s ease}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-2px);border-color:var(--blue)}
.to-top svg{width:22px;height:22px;stroke:var(--blue-ink);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Seiten-Übergang nur beim Verlassen (Klick auf internen Link): kurz ausblenden.
   Bewusst NICHT auf body (filter würde die fixed Glas-/Progress-Elemente kappen). */
.js body.page-leave main,.js body.page-leave footer{
  animation:page-leave .26s ease both}
@keyframes page-leave{to{opacity:0;filter:blur(7px)}}

/* Illu-Tilt: Grafiken folgen der Maus (Transform sitzt auf dem SVG bzw. Panel/Stage,
   nicht auf dem Reveal-Wrapper — sonst kollidieren die Transitions) */
.tilt-target{transition:transform .2s ease-out;will-change:transform}

/* Reveal on scroll */
.js .reveal{opacity:0;transform:translateY(38px) scale(.97);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.js .reveal.in{opacity:1;transform:none}
.js .cards .card:nth-child(3n+2){transition-delay:.09s}
.js .cards .card:nth-child(3n+3){transition-delay:.18s}
.js .team .member:nth-child(4n+2){transition-delay:.07s}
.js .team .member:nth-child(4n+3){transition-delay:.14s}
.js .team .member:nth-child(4n+4){transition-delay:.21s}
.js .band-grid > div:nth-child(2){transition-delay:.09s}
.js .band-grid > div:nth-child(3){transition-delay:.18s}
.js .band-grid > div:nth-child(4){transition-delay:.27s}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;scroll-behavior:auto !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
  .band-grid > div:hover,.card:hover,.tool:hover,.member:hover,.svc:hover,
  .news-card:hover,.fact:hover,.dl:hover,.step:hover,.member img:hover{transform:none}
}

/* Responsive */
@media(max-width:1200px){
  .nav-links{gap:22px}
}
@media(max-width:1024px){
  .team{grid-template-columns:repeat(3,1fr)}
  .nav{gap:14px}
  .nav-links{gap:16px;font-size:.88rem}
  .logo-img{height:36px}
}
@media(max-width:900px){
  .nav-links{position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;background:var(--card);
    border:1px solid var(--line);border-radius:16px;margin:0 clamp(14px,3vw,26px);
    padding:6px 18px 10px;display:none;box-shadow:var(--shadow);font-size:.9rem;
    max-height:calc(100vh - 96px);overflow:auto}
  .nav-links.open{display:flex}
  .nav-links a{padding:9px 0;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  .has-sub > a::after{display:none}
  .sub{position:static;transform:none;opacity:1;visibility:visible;min-width:0;grid-template-columns:1fr;
    border:none;box-shadow:none;padding:0 0 2px 12px;gap:0}
  /* Auf dem Handy haengt die Klappe im Menue-Kasten statt frei zu schweben.
     Dort muessen `width:max-content` und `nowrap` von oben wieder weg, sonst
     schiebt ein langer Eintrag die ganze Seite seitlich raus. */
  .sub--one{width:auto}
  .sub-group{padding:1px 0}
  .sub-group > span{margin:6px 0 2px;font-size:.64rem}
  .sub-group a{border-bottom:none !important;padding:5px 8px;font-size:.86rem;white-space:normal}
  .sub-all{border-bottom:none !important;border-top:none;padding:6px 8px 2px;font-size:.86rem}
  .news-grid{grid-template-columns:1fr}
  .dl-list{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .hero-grid,.page-hero-grid,.split,.story,.cards,.cards--2,.tools,.cat,.contact-grid,.contact-grid--form,.foot-grid{grid-template-columns:1fr}
  .cat--flip .cat-illus{order:0}
  .stage{min-height:330px}
  .band-grid{gap:32px 24px;grid-template-columns:1fr 1fr}
  .hero-visual{margin-top:8px}
  .page-hero-grid .page-illus{display:none}
  .team{grid-template-columns:repeat(2,1fr)}
  .foot-grid{gap:26px}
}
@media(max-width:640px){
  .form-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero-actions .btn{flex:1 1 100%}
  .team{grid-template-columns:1fr}
  .float-badge{left:8px;bottom:12px}
  .stat-row{gap:16px}
  .nav{padding:0 8px 0 16px;gap:10px}
  .logo-img{height:30px}
  .nav-cta{gap:8px}
  .nav-cta .btn-primary{padding:10px 14px;font-size:.85rem}
  .variant-switch{right:14px;bottom:14px;width:46px;height:46px}
  .to-top{right:14px;bottom:70px;width:46px;height:46px}
}

/* =================================================================
   Handy-Korrekturen (2026-08-06)
   Anlass: auf dem iPhone liefen Ueberschriften und Buttons aus dem
   Bild, die Bloecke wirkten zu schmal, Formularfelder loesten
   Auto-Zoom aus und die Modale waren nicht komplett erreichbar.
   ================================================================= */

/* System-UI (Scrollbalken, Kaestchen, Autofill) dem Theme folgen lassen */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* 1. Lange deutsche Woerter duerfen umbrechen statt ueberzulaufen
      ("Unternehmensgeschichte" war breiter als die Spalte). Die Hero-H1 ist
      AUSGENOMMEN (User: kein "Mark-eting") — sie wird stattdessen so klein
      skaliert, dass jedes Wort ganz in die Spalte passt. */
h2,h3,h4,.sec-head h2,.kgs li,.card h3,.faq-q{
  overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
h1{overflow-wrap:break-word}
.hero h1{overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual}

/* 2. Grid-Kinder duerfen unter ihre Inhaltsbreite schrumpfen.
      Ohne min-width:0 haelt das breiteste Wort die ganze Spalte auf. */
.hero-grid > *,.page-hero-grid > *,.split > *,.cat > *,.story > *,
.contact-grid > *,.band-grid > *,.foot-grid > *,.cards > *,.tools > *{min-width:0}

/* 3. Kein horizontales Wegrutschen der Seite, egal was ueberlaeuft.
      clip statt hidden: hidden macht die Wurzel zum Scroll-Container und
      kann den klebenden Header ausser Kraft setzen. */
html{overflow-x:clip}

/* 4. Eingabefelder ab 16px — darunter zoomt iOS bei jedem Fokus hinein */
@media(max-width:820px){
  .field input,.field textarea,.field select,#siteSearch{font-size:16px}
}

@media(max-width:640px){
  /* 5. Ueberschriften auf Handybreite herunterskalieren.
        8vw = "AUTOMATISIERUNG." passt auch bei 320 px ohne Worttrennung */
  .hero h1{font-size:clamp(1.55rem,8vw,2.6rem);letter-spacing:-.03em}
  /* 7.2vw = "GESCHÄFTSPROZESSE" passt auch bei 320 px ohne Worttrennung */
  .hero h1.h1-claim{font-size:clamp(1.4rem,7.2vw,2.4rem)}
  .h1-kicker,.h1-tail{letter-spacing:.1em}
  .sec-head h2{font-size:clamp(1.55rem,6.4vw,2rem)}
  .sec-head{margin-bottom:32px}
  /* Drei Kennzahlen nebeneinander passten nicht: "30 Mio." wurde abgeschnitten */
  .stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px}
  .stat-row .n{font-size:1.45rem}
  /* 6. Bloecke wirkten "duenn": mehr Innenabstand, weniger Rand */
  .wrap{padding-left:18px;padding-right:18px}
  .card,.form,.kgs,.tool,.svc{padding:20px 18px}
}

/* 7. Touch-Ziele: mindestens 44 px, vor allem im offenen Menue */
@media(max-width:900px){
  .nav-links > a,.has-sub > a{min-height:44px;display:flex;align-items:center}
  .sub-group a,.sub-all{min-height:40px;display:flex;align-items:center}
  footer a{padding:6px 0;margin-bottom:4px}
  .foot-contact a{padding:0}
  .social a{width:44px;height:44px}
  .crumbs a{padding:4px 0;display:inline-block}
}

/* 8. Modale: auf kleinen Geraeten scrollbar und vollstaendig erreichbar.
      100vh ist auf iOS die GROSSE Viewporthoehe — der Kasten wurde damit
      hoeher als der sichtbare Bereich und die Buttons lagen darunter. */
.cc,.xl{overflow-y:auto}
.cc-box,.xl-box{max-height:none}
@media(max-width:600px),(max-height:720px){
  .cc,.xl{align-items:start;padding:14px}
  .cc-box,.xl-box{margin:auto 0;border-radius:20px}
  /* Die Entscheidungs-Buttons bleiben beim Scrollen sichtbar */
  .cc-actions,.xl-actions{position:sticky;bottom:-14px;padding:12px 0 2px;
    background:var(--card);box-shadow:0 -12px 16px -12px rgba(11,21,38,.35)}
}

/* 9. Sticky-Header im Querformat kleiner — fraß dort ein Viertel des Bildes */
@media(max-height:520px) and (orientation:landscape){
  header{padding:8px clamp(14px,3vw,26px)}
  .nav{height:52px}
  .logo-img{height:28px}
}

/* 10. Fokusring darf nicht unter der klebenden Leiste landen */
html{scroll-padding-top:104px}

/* ============================================================
   Bewertungen: Google-Zitate + Siegel (Trustpilot, WerkenntdenBESTEN)
   Google steht als fertiges HTML in der Seite. Die beiden anderen
   Siegel laden ihr eigenes Skript, deshalb zuerst ein Platzhalter
   (.rv-gate) und erst nach Zustimmung das Widget (.rv-widget).
   ============================================================ */
.rv{padding-top:0}
.rv-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:34px}
.rv-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm)}
.rv-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rv-ava{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--blue-light);color:var(--blue-ink);font-weight:800;font-size:.95rem}
.rv-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rv-who b{font-size:.95rem}
.rv-who small{color:var(--ink-soft);font-size:.8rem}
.rv-head .rv-logo{margin-left:auto;width:20px;height:20px;flex:0 0 auto}
.rv-card blockquote p{color:var(--ink-soft);font-size:.94rem;margin-top:10px}
.rv-stars{display:flex;gap:2px}
.rv-star{width:16px;height:16px;fill:var(--line)}
.rv-star--on{fill:#E7A008}
.rv-stars--sm .rv-star{width:14px;height:14px}

/* Siegel-Zeile */
.rv-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}
.rv-badge{display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.rv-badge:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.rv-badge .rv-logo{width:26px;height:26px;flex:0 0 auto}
.rv-meta{display:flex;flex-direction:column;line-height:1.3}
.rv-meta b{font-size:1rem}
.rv-meta small{color:var(--ink-soft);font-size:.78rem}
.rv-meta .rv-stars{margin:2px 0}
.rv-badge--sm{padding:8px 14px;gap:9px}
.rv-badge--sm .rv-logo{width:20px;height:20px}
.rv-badge--sm .rv-meta b{font-size:.88rem}
.rv-badge--sm .rv-star{width:12px;height:12px}

/* Platzhalter vor der Zustimmung */
.rv-slot{display:flex;align-items:center}
.rv-gate{max-width:330px;padding:14px 18px;border-radius:var(--radius-sm);
  border:1px dashed var(--line);background:var(--bg-soft);text-align:center}
.rv-gate-tx{font-size:.82rem;color:var(--ink-soft);margin-bottom:10px}
.rv-gate-tx code{font-size:.8rem;background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:1px 5px}
.rv-gate-btn{padding:8px 16px;font-size:.85rem}
.rv-gate-link{display:block;margin-top:8px;font-size:.78rem;color:var(--blue-ink);
  text-decoration:underline;text-underline-offset:3px}
/* Beide Siegel bringen dunkle Schrift auf durchsichtigem Grund mit. Damit sie
   im dunklen Modus und im dunklen Fussbereich lesbar bleiben, sitzen sie
   immer auf einer weissen Flaeche — wie die Referenzlogos. */
.rv-widget{min-width:200px}
.rv-tp{width:282px;background:#fff;border-radius:16px;padding:12px 16px}
/* Das Siegel ist 125x125 gross und setzt sein Logo absolut — mit Innenabstand
   haengt es ueber die weisse Flaeche hinaus. */
.rv-wkdb-box{background:#fff;border-radius:16px;padding:0;overflow:hidden;
  width:125px;min-width:125px}

/* Fussbereich: dieselben Siegel, nur klein */
.rv-foot{border-top:1px solid rgba(157,187,240,.16);margin-top:34px;padding-top:22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.rv-foot-lb{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft)}
.rv-foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.rv-foot .rv-gate{max-width:270px;padding:10px 14px;text-align:left}
.rv-foot .rv-gate-tx{margin-bottom:8px}

[data-theme="dark"] .rv-star{fill:rgba(157,187,240,.30)}
[data-theme="dark"] .rv-star--on{fill:#F0B429}

@media(max-width:980px){
  .rv-quotes{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .rv-quotes{grid-template-columns:1fr}
  .rv-row{flex-direction:column;align-items:stretch}
  .rv-slot{justify-content:center}
  .rv-gate{max-width:none;width:100%}
  .rv-foot{flex-direction:column;align-items:flex-start}
}

/* Der Fussbereich ist in beiden Modi dunkel — dort brauchen Platzhalter und
   Google-Siegel eigene Farben, sonst stehen dunkle Buchstaben auf Dunkel. */
footer .rv-gate{background:rgba(255,255,255,.05);border-color:rgba(157,187,240,.30)}
footer .rv-gate-tx{color:#9FB0C6}
footer .rv-gate-tx code{background:rgba(255,255,255,.08);border-color:rgba(157,187,240,.30);color:#E7EEF8}
footer .rv-gate-tx b{color:#fff}
footer .rv-gate-link{color:#86C9EC;margin-bottom:0}
/* Google-Siegel als weisser Chip: im Fussbereich immer, im dunklen Modus
   auch in der Sektion — sonst steht ein dunkler Chip neben zwei weissen. */
footer .rv-badge,[data-theme="dark"] .rv-badge{background:#fff;border-color:transparent}
footer .rv-badge .rv-meta b,[data-theme="dark"] .rv-badge .rv-meta b{color:#16283D}
footer .rv-badge .rv-meta small,[data-theme="dark"] .rv-badge .rv-meta small{color:#465971}
footer .rv-badge .rv-star,[data-theme="dark"] .rv-badge .rv-star{fill:#D4E0EE}
footer .rv-badge .rv-star--on,[data-theme="dark"] .rv-badge .rv-star--on{fill:#E7A008}
footer .rv-foot .rv-gate-btn{background:transparent;color:#fff;border-color:rgba(157,187,240,.40)}
/* =================================================================
   REVENUE ENGINE — Startseite nach der Vorlage von D. Simon
   (Desktop\DSimon Feedback\quadress-website-v3(4).html, 13.08.2026)
   Aufbau, Texte und Kaesten stammen aus seiner Vorlage.
   Die Farben bleiben bewusst die der bestehenden Seite: das Orange
   (#E8590C) der Vorlage ist durch unser Tuerkis ersetzt, das
   Petrol durch den Navy-Verlauf, der auch im Datenschutz-Band steht.
   Eigener Namensraum "re-", weil .step/.steps und .fact schon
   vergeben sind (Ablauf-Reiter, Kontaktseite).
   ================================================================= */

:root{
  /* Akzent auf hellem Grund — ersetzt --signal der Vorlage */
  --re-accent:var(--teal-ink);
  /* Akzent auf den dunklen Baendern: dort ist --teal-ink zu dunkel */
  --re-accent-on-dark:#86D6CD;
  --re-dark:#16283D;
  --re-dark-deep:#0D1526;
  --re-line-dark:rgba(157,187,240,.18);
  --re-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- gemeinsame Bausteine ---------- */
.re-eyebrow{
  display:flex;align-items:center;
  font-family:var(--re-mono);font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--re-accent);
}
.re-tag{font-family:var(--re-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.re-head{max-width:760px;margin-bottom:clamp(36px,4.5vw,60px)}
.re-head h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:20px 0 22px}
.re-head p{color:var(--ink-soft);font-size:1.05rem}
.re-sec{padding:var(--sp-section) 0}
.re-sec--paper{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* auf den dunklen Baendern gelten helle Schriften, in beiden Themes */
.re-onDark{background:linear-gradient(165deg,var(--re-dark) 0%,var(--re-dark-deep) 78%);color:#E7EEF8}
.re-onDark h2,.re-onDark h3{color:#fff}
.re-onDark .re-eyebrow{color:var(--re-accent-on-dark)}
.re-onDark p{color:rgba(231,238,248,.82)}

/* ---------- HERO ---------- */
.re-hero{
  background:linear-gradient(165deg,var(--re-dark) 0%,var(--re-dark-deep) 72%);
  color:#fff;position:relative;overflow:hidden;
}
.re-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(157,187,240,.10) 1px,transparent 1px);
  background-size:26px 26px;
}
.re-hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,64px);align-items:start;padding:clamp(44px,6vw,64px) 0 clamp(56px,7vw,88px);
}
.re-hero h1{color:#fff;font-size:clamp(2.1rem,4.8vw,3.6rem);margin:0 0 28px;letter-spacing:-.03em}
.re-hero h1 em{font-style:normal;color:var(--re-accent-on-dark)}
.re-hero-sub{font-size:1.1rem;color:rgba(231,238,248,.84);max-width:56ch;margin-bottom:36px}
.re-hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.re-hero .btn-ghost{background:transparent;border-color:var(--re-line-dark);color:#fff}
.re-hero .btn-ghost:hover{border-color:var(--re-accent-on-dark);color:var(--re-accent-on-dark)}
.re-note{margin-top:34px;font-family:var(--re-mono);font-size:.78rem;color:rgba(231,238,248,.55);letter-spacing:.04em}
/* Im Schluss-CTA stand die Zeile fast auf den Knoepfen (Ansage 2026-08-14). */
.re-final .re-note{margin-top:40px;line-height:1.7}

/* Kennzahlen unter der Terminal-Karte */
.re-facts{
  display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;
  border:1px solid var(--re-line-dark);border-radius:12px;overflow:hidden;
  background:rgba(157,187,240,.05);
}
.re-fact{padding:12px 6px 10px;text-align:center;border-right:1px solid var(--re-line-dark)}
.re-fact:last-child{border-right:none}
.re-fact .fn{font-weight:800;font-size:.98rem;color:#fff;line-height:1.15;white-space:nowrap}
.re-fact .fl{font-family:var(--re-mono);font-size:.6rem;color:rgba(231,238,248,.55);
  letter-spacing:.05em;text-transform:uppercase;margin-top:3px;white-space:nowrap}

/* Terminal / Datensatz-Karte */
.re-term{
  background:#08121F;border:1px solid var(--re-line-dark);border-radius:var(--radius-sm);
  box-shadow:0 30px 80px rgba(0,0,0,.45);font-family:var(--re-mono);font-size:.82rem;overflow:hidden;
}
.re-term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--re-line-dark);color:rgba(231,238,248,.55);font-size:.72rem;letter-spacing:.06em}
.re-term-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--re-line-dark);flex:none}
.re-term-bar .dot.live{background:var(--re-accent-on-dark);animation:rePulse 2s infinite}
@keyframes rePulse{0%,100%{opacity:1}50%{opacity:.35}}
.re-term-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;min-height:330px}
.re-t{display:flex;gap:10px;opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease}
.re-t.show{opacity:1;transform:none}
.re-t-key{color:rgba(231,238,248,.45);min-width:112px;flex:none}
.re-t-val{color:#DCE8E6}
.re-t-sig{color:var(--re-accent-on-dark);font-weight:600}
.re-t-ok{color:#86D6CD}
.re-t-no{color:#E9A0A0}
.re-t-div{border-top:1px dashed var(--re-line-dark);margin:6px 0;opacity:0;transition:opacity .5s ease}
.re-t-div.show{opacity:1}
.re-t-result{background:rgba(134,214,205,.10);border:1px solid rgba(134,214,205,.40);
  border-radius:12px;padding:12px 14px;color:#D8F0EC;margin-top:4px;
  opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.re-t-result.show{opacity:1;transform:none}
.re-t-result b{color:#fff}
.re-replay{background:none;border:none;color:rgba(231,238,248,.45);font-family:var(--re-mono);
  font-size:.72rem;cursor:pointer;padding:10px 22px 16px;text-align:left;letter-spacing:.06em;width:100%}
.re-replay:hover{color:var(--re-accent-on-dark)}
@media(max-width:980px){.re-hero-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .re-facts{grid-template-columns:1fr 1fr}
  .re-fact:nth-child(2){border-right:none}
  .re-fact:nth-child(-n+2){border-bottom:1px solid var(--re-line-dark)}
}

/* ---------- PROBLEM ---------- */
.re-pains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.re-pain{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:28px 26px}
.re-pain .re-tag{color:var(--ink-soft)}
.re-pain h3{font-size:1.16rem;margin:12px 0 10px;font-weight:800}
.re-pain p{font-size:.95rem;color:var(--ink-soft)}
@media(max-width:980px){.re-pains{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.re-pains{grid-template-columns:1fr}}
.re-punch{margin-top:44px;background:linear-gradient(135deg,#20386B,#16283D);color:#fff;
  border-radius:var(--radius);padding:clamp(26px,4vw,36px);display:flex;gap:26px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.re-punch p{font-size:clamp(1.1rem,2.4vw,1.45rem);font-weight:800;line-height:1.35;max-width:60ch}
.re-punch p em{font-style:normal;color:var(--re-accent-on-dark)}

/* ---------- LOOP-BAND ---------- */
.re-loop-band{background:var(--re-dark);color:#fff;padding:56px 0;overflow:hidden}
.re-loop-title{font-family:var(--re-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(231,238,248,.55);text-align:center;margin-bottom:28px}
.re-loop{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:16px}
.re-loop-step{font-weight:700;font-size:clamp(.85rem,1.7vw,1.05rem);padding:10px 18px;
  border:1px solid var(--re-line-dark);border-radius:999px;white-space:nowrap;color:#fff}
.re-loop-step.hot{border-color:var(--re-accent-on-dark);color:var(--re-accent-on-dark)}
.re-loop-arrow{color:var(--re-accent-on-dark);padding:0 10px;font-family:var(--re-mono);font-size:1.05rem}

/* ---------- SCHICHTEN ---------- */
.re-layers{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--card)}
.re-layer{padding:28px 22px;border-right:1px solid var(--line)}
.re-layer:last-child{border-right:none}
.re-layer .num{font-family:var(--re-mono);font-size:.72rem;color:var(--ink-soft);letter-spacing:.1em}
.re-layer h3{font-size:1.05rem;margin:12px 0 10px;font-weight:800}
.re-layer p{font-size:.88rem;color:var(--ink-soft);line-height:1.55}
.re-layer:hover{background:var(--bg-soft)}
@media(max-width:1080px){
  .re-layers{grid-template-columns:1fr 1fr}
  .re-layer{border-bottom:1px solid var(--line)}
  .re-layer:nth-child(2n){border-right:none}
}
@media(max-width:640px){.re-layers{grid-template-columns:1fr}.re-layer{border-right:none}}
.re-compliance-bar{margin-top:18px;background:linear-gradient(135deg,#20386B,#16283D);color:#fff;
  border-radius:var(--radius-sm);padding:20px 26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.re-compliance-bar .re-tag{color:var(--re-accent-on-dark)}
.re-compliance-bar p{font-size:.95rem;color:rgba(231,238,248,.92)}
.re-compliance-bar a{color:#fff;text-decoration:underline}

/* ---------- GRAeBEN ---------- */
.re-moats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.re-moat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:28px}
.re-moat h3{font-size:1.12rem;font-weight:800;margin-bottom:12px}
.re-moat p{font-size:.94rem;color:var(--ink-soft)}
.re-moat .re-tag{color:var(--re-accent);display:block;margin-bottom:12px}
@media(max-width:980px){.re-moats{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.re-moats{grid-template-columns:1fr}}

/* ---------- ZAHLEN-BAND ---------- */
.re-stats-band{padding:clamp(48px,6vw,70px) 0}
.re-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--re-line-dark);
  border:1px solid var(--re-line-dark);border-radius:var(--radius-sm);overflow:hidden;margin-top:36px}
.re-stat{background:var(--re-dark);padding:30px 26px}
.re-stat .n{font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);color:var(--re-accent-on-dark);line-height:1}
.re-stat .l{font-size:.88rem;color:rgba(231,238,248,.78);margin-top:10px;line-height:1.5}
.re-stats-src{font-family:var(--re-mono);font-size:.7rem;color:rgba(231,238,248,.45);
  margin-top:18px;letter-spacing:.03em}
@media(max-width:900px){.re-stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.re-stats{grid-template-columns:1fr}}

/* ---------- COMPLIANCE-AKTE ---------- */
.re-akte-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,56px);align-items:center}
@media(max-width:940px){.re-akte-grid{grid-template-columns:1fr}}
.re-akte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:30px 32px;font-size:.95rem}
.re-akte-head{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:18px}
.re-akte-head .t{font-weight:800;font-size:1.08rem;color:var(--ink)}
.re-akte-stamp{font-family:var(--re-mono);font-size:.68rem;letter-spacing:.1em;color:var(--teal-ink);
  border:1.5px solid var(--teal-ink);border-radius:4px;padding:4px 9px;transform:rotate(-2deg);white-space:nowrap}
.re-akte ul{list-style:none}
.re-akte li{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);color:var(--ink)}
.re-akte li:last-child{border-bottom:none}
.re-akte li::before{content:"\2713";color:var(--teal-ink);font-weight:800;font-family:var(--re-mono)}
.re-akte-foot{margin-top:16px;font-family:var(--re-mono);font-size:.7rem;color:var(--ink-soft);letter-spacing:.04em}
.re-laws{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.re-law{display:flex;gap:16px;align-items:flex-start}
.re-law .tag{font-family:var(--re-mono);font-size:.74rem;background:var(--ink);color:var(--bg);
  border-radius:5px;padding:5px 9px;white-space:nowrap;margin-top:2px}
.re-law p{font-size:.95rem;color:var(--ink-soft)}

/* ---------- DATENSCHUTZ-BAND ---------- */
.re-ds{background:linear-gradient(135deg,#20386B,#16283D);color:#fff;padding:46px 0}
.re-ds-inner{display:flex;align-items:center;gap:26px;justify-content:space-between;flex-wrap:wrap}
.re-ds-text{display:flex;gap:20px;align-items:center;max-width:66ch}
.re-ds-lock{width:46px;height:46px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex:none}
.re-ds-lock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.re-ds h3{color:#fff;font-size:1.15rem;margin-bottom:4px}
.re-ds p{font-size:.95rem;color:rgba(231,238,248,.86)}
.re-btn-white{background:#fff;color:#16283D;border-color:#fff}
.re-btn-white:hover{background:var(--bg-soft);transform:translateY(-2px)}

/* ---------- FUeR WEN ---------- */
.re-icp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.re-icp{grid-template-columns:1fr}}
.re-icp-col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:30px 32px}
.re-icp-col h3{font-size:1.2rem;font-weight:800;margin-bottom:20px}
.re-icp-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.re-icp-col li{display:flex;gap:12px;font-size:.98rem;color:var(--ink)}
.re-icp-yes li::before{content:"\2713";color:var(--teal-ink);font-weight:800;font-family:var(--re-mono)}
.re-icp-no{background:var(--bg-soft);border-style:dashed}
.re-icp-no li{color:var(--ink-soft)}
.re-icp-no li::before{content:"\2715";color:var(--blue-ink);font-weight:800;font-family:var(--re-mono)}
.re-icp-hint{margin-top:18px;padding:14px 16px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;font-size:.92rem}
.re-icp-hint a{color:var(--re-accent);font-weight:700;text-decoration:underline}

/* ---------- BAUSTEINE ---------- */
.re-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.re-modules{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.re-modules{grid-template-columns:1fr}}
.re-module{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:28px;display:flex;flex-direction:column;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.re-module:hover{border-color:var(--blue);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.re-module .re-tag{color:var(--ink-soft);display:block;margin-bottom:12px}
.re-module h3{font-size:1.16rem;font-weight:800;margin-bottom:12px}
.re-module p{font-size:.94rem;color:var(--ink-soft);flex-grow:1}
.re-module .re-link{margin-top:18px;font-family:var(--re-mono);font-size:.78rem;letter-spacing:.05em;
  color:var(--re-accent);font-weight:700}
.re-module .re-link:hover{text-decoration:underline}
.re-module--ki{background:linear-gradient(135deg,#20386B,#16283D);border-color:transparent}
.re-module--ki h3{color:#fff}
.re-module--ki p{color:rgba(231,238,248,.84)}
.re-module--ki .re-tag,.re-module--ki .re-link{color:var(--re-accent-on-dark)}
.re-bridge{margin-top:36px;display:flex;gap:18px;align-items:center;background:var(--card);
  border:1px dashed var(--blue);border-radius:var(--radius-sm);padding:24px 30px;
  flex-wrap:wrap;justify-content:space-between}
.re-bridge p{font-size:.98rem;max-width:80ch}
.re-bridge b{color:var(--teal-ink)}

/* ---------- ABLAUF & PREISE ---------- */
.re-stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media(max-width:980px){.re-stufen{grid-template-columns:1fr}}
.re-stufe{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:32px 30px;display:flex;flex-direction:column;position:relative}
.re-stufe--top{border:2px solid var(--teal);box-shadow:var(--shadow)}
.re-stufe .phase{font-family:var(--re-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.re-stufe--top .phase{color:var(--re-accent)}
.re-stufe h3{font-size:1.35rem;font-weight:800;margin:14px 0 6px}
.re-stufe .dur{font-size:.88rem;color:var(--ink-soft);margin-bottom:16px}
/* Seit dem 14.08. steht hier kein Betrag mehr, sondern "Preis auf Anfrage".
   Als 1,5-rem-Zeile in Fett las sich das wie eine Zahl. Jetzt kleiner und als
   eigene Pille abgesetzt (Ansage Daniel Simon). */
.re-stufe .preis{margin-bottom:4px}
.re-stufe .preis-tag{display:inline-block;font-weight:700;font-size:1rem;
  color:var(--blue-ink);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px}
.re-stufe--top .preis-tag{border-color:var(--teal)}
.re-stufe .preis small{display:block;margin-top:9px;font-weight:500;font-size:.82rem;color:var(--ink-soft)}
.re-stufe ul{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px;flex-grow:1}
.re-stufe li{display:flex;gap:10px;font-size:.92rem;color:var(--ink)}
.re-stufe li::before{content:"\2014";color:var(--re-accent);font-family:var(--re-mono);flex:none}
.re-stufe .hinweis{font-size:.82rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:14px}
.re-stufe-badge{position:absolute;top:-13px;left:30px;background:var(--teal);color:#0B2A3A;
  font-family:var(--re-mono);font-size:.68rem;letter-spacing:.1em;padding:5px 10px;
  border-radius:5px;text-transform:uppercase;font-weight:600}
.re-chance{margin-top:36px;background:linear-gradient(135deg,#20386B,#16283D);color:#fff;
  border-radius:var(--radius);padding:clamp(26px,4vw,36px)}
.re-chance .re-tag{color:var(--re-accent-on-dark)}
.re-chance h3{color:#fff;font-size:1.25rem;margin:10px 0 8px}
.re-chance p{color:rgba(231,238,248,.88);font-size:.98rem;max-width:90ch}
.re-chance b{color:#fff}

/* ---------- FAQ ---------- */
.re-faq{max-width:840px}
.re-faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:12px;overflow:hidden}
.re-faq summary{cursor:pointer;padding:20px 24px;font-weight:700;font-size:1.02rem;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.re-faq summary::-webkit-details-marker{display:none}
.re-faq summary::after{content:"+";font-family:var(--re-mono);color:var(--re-accent);font-size:1.25rem;flex:none}
.re-faq details[open] summary::after{content:"\2013"}
.re-faq .a{padding:0 24px 22px;color:var(--ink-soft);font-size:.98rem}
.re-faq .a a{color:var(--re-accent);text-decoration:underline}

/* ---------- UNTERNEHMEN ---------- */
.re-company{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.re-company{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.re-company{grid-template-columns:1fr}}
.re-company-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:26px;transition:border-color .15s ease,transform .15s ease}
.re-company-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.re-company-card .re-tag{color:var(--re-accent);display:block;margin-bottom:10px}
.re-company-card h3{font-size:1.06rem;font-weight:800;margin-bottom:10px}
.re-company-card p{font-size:.9rem;color:var(--ink-soft)}
.re-company-card .re-link{margin-top:14px;font-family:var(--re-mono);
  font-size:.78rem;color:var(--re-accent);font-weight:700}
.re-company-card .re-link:hover{text-decoration:underline}

/* ---------- SCHLUSS-CTA ---------- */
.re-final{text-align:center;padding:clamp(72px,9vw,110px) 0}
.re-final h2{color:#fff;font-size:clamp(1.9rem,4.4vw,3.1rem);max-width:22ch;margin:16px auto 20px}
.re-final h2 em{font-style:normal;color:var(--re-accent-on-dark)}
.re-final p{color:rgba(231,238,248,.84);max-width:70ch;margin:0 auto 32px;font-size:1.05rem}
.re-final .re-eyebrow{justify-content:center}
.re-final .re-hero-ctas{justify-content:center}
.re-final .btn-ghost{background:transparent;border-color:var(--re-line-dark);color:#fff}
.re-final .btn-ghost:hover{border-color:var(--re-accent-on-dark);color:var(--re-accent-on-dark)}
/* Pfeil in den Baustein- und Unternehmens-Kacheln (b.ARROW ist ein Inline-SVG
   ohne eigene Groesse — ohne diese Regel waere er 300 px breit). */
.re-link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.re-link svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;stroke-width:2.4;
  fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.re-module:hover .re-link svg,.re-company-card:hover .re-link svg{transform:translateX(3px)}
/* Handy: die Terminal-Karte ist Monospace und darf das Raster nicht
   auseinanderdruecken — sonst laeuft die ganze Seite seitlich ueber.
   min-width:0 hebt die Vorgabe "Rasterzelle mindestens so breit wie ihr
   Inhalt" auf, darunter brechen Schluessel und Wert einfach um. */
.re-hero-grid > *{min-width:0}
@media(max-width:700px){
  .re-term{font-size:.72rem}
  .re-term-body{padding:16px 14px 18px;min-height:0}
  .re-t{flex-wrap:wrap;gap:2px 10px}
  .re-t-key{min-width:0}
  .re-fact .fn,.re-fact .fl{white-space:normal}
  .re-loop-step{white-space:normal}
}

/* Kunden-Login rechts oben — Platz und Form wie in der Vorlage von D. Simon */
.login-btn{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:700;
  color:var(--blue-ink);background:var(--card);border:1.5px solid var(--line);
  border-radius:12px;padding:9px 14px;
  transition:border-color .15s ease,background .15s ease}
.login-btn:hover{border-color:var(--blue);background:var(--bg-soft)}
.login-btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.login-btn span{display:none}.login-btn{padding:10px}}

/* =================================================================
   Handy-Korrekturen zur Revenue-Engine-Startseite (2026-08-14)
   Gemessen in einem <iframe width="390">, weil Chrome im Kopflos-
   Betrieb keine Fenster unter etwa 500 px anlegt.
   ================================================================= */
@media(max-width:640px){
  /* 1. Die Ueberschrift lief bis an den rechten Rand ("Wachstum braucht einen"
        stand auf Kante). Etwas kleiner, dafuer sauberer Abstand. */
  .re-hero h1{font-size:clamp(1.85rem,8vw,2.4rem)}
  .re-hero-sub{font-size:1rem}

  /* 2. Knoepfe untereinander auf voller Breite statt in zwei Breiten */
  .re-hero-ctas{flex-direction:column;align-items:stretch}
  .re-hero-ctas .btn{width:100%;justify-content:center}
  .re-punch .btn,.re-bridge .btn,.re-ds .btn{width:100%;justify-content:center}
  .re-punch,.re-bridge{align-items:stretch}

  /* 3. Datenschutz-Band: Schloss ueber den Text statt daneben — nebeneinander
        blieben fuer die Ueberschrift nur wenige Zeichen je Zeile. */
  .re-ds-text{flex-direction:column;gap:14px;align-items:flex-start}
  .re-ds-inner{gap:20px}

  /* 4. Im Kreislauf-Band begannen Zeilen mit einem Pfeil. Die Pfeile sind
        auf dem Handy reine Dekoration — der Titel sagt, dass es ein
        Kreislauf ist. */
  .re-loop-arrow{display:none}
  .re-loop{gap:8px}

  /* 5. Kaesten etwas schmaler polstern, damit mehr Text je Zeile passt */
  .re-pain,.re-moat,.re-module,.re-company-card{padding:22px 20px}
  .re-icp-col,.re-akte{padding:24px 20px}
  .re-stufe{padding:26px 22px}
  .re-chance,.re-punch{padding:24px 22px}
}
@media(max-width:420px){
  .re-hero h1{font-size:1.72rem}
  .re-term{font-size:.68rem}
  .re-t-key{min-width:0}
}