/* ==== Selbst gehostete Schrift (DSGVO): Hanken Grotesk ====
   Newsreader (Serif) lag hier bis zum 29.08.2026 noch als @font-face,
   obwohl die Serifen am 25.08. abgelehnt wurden - 57 KB, die jeder
   Besucher lud, ohne je ein Zeichen davon zu sehen. */
/* Hanken Grotesk 400 — latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hanken Grotesk 400 — latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-400-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;
}
/* Hanken Grotesk 500 — latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hanken Grotesk 500 — latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-500-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;
}
/* Hanken Grotesk 600 — latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hanken Grotesk 600 — latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-600-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;
}
/* ============ Reset & Basis ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Palette 29.08.2026 (Andreas: "ganze webseite fresh und modern").
   Weg vom warmen Cremeweiss mit Terrakotta - diese Kombination ist derzeit
   der haeufigste Standardlook und sagt nichts ueber dieses Produkt aus.
   Jetzt: kuehles Papier, tiefe Marinetinte, EIN Akzent. Ein-Akzent-Systeme
   wirken diszipliniert; bei einer Software, die Vertrauen braucht, ist das
   die richtige Haltung. */
:root{
  --navy:#0D1420;        /* Kopf, Schlussband, Zahlenblock */
  --navy-2:#161F2E;
  --blue:#2B5BFF;        /* der EINE Akzent: Handlung, Zahlen, Marken */
  --blue-dark:#1B44D8;
  --blue-hell:#7FA0FF;   /* auf dunklem Grund */
  --cyan:#7FA0FF;
  --ink:#0D1420;
  --gray:#5B6472;
  --text:#3F4855;
  --muted:#67707E;
  --bg:#F1F3F6;          /* Baender */
  --papier:#FBFBFC;      /* Grundflaeche */
  --karte:#FFFFFF;
  --warm:#2B5BFF;        /* frueher Terrakotta - jetzt derselbe eine Akzent */
  --warm-2:#7FA0FF;
  --white:#ffffff;
  --green:#12B886;
  --line:#E3E7EE;        /* kuehle Haarlinie */
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --radius:10px;
  --shadow:0 1px 2px rgba(13,20,32,.04),0 8px 24px rgba(13,20,32,.06);
}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:84px 0}
h1,h2,h3{color:var(--ink);line-height:1.16;font-weight:600;letter-spacing:-.022em}
h2{font-size:clamp(1.5rem,2.7vw,2rem);margin-bottom:14px}
.section-head{max-width:680px;margin:0 auto 48px;text-align:center}
.section-head p{font-size:1.05rem;color:var(--muted);line-height:1.7}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:.95rem;border-radius:8px;padding:12px 24px;
  transition:background .15s ease,box-shadow .15s ease,border-color .15s ease;
  cursor:pointer;
}
.btn-primary{
  background:var(--blue);
  color:#fff;box-shadow:0 1px 2px rgba(11,18,32,.14);
}
.btn-primary:hover{background:var(--blue-dark);box-shadow:0 4px 14px rgba(47,107,255,.22)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-outline{border:2px solid var(--blue);color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-lg{padding:14px 28px;font-size:1rem}

/* ============ Header ============ */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,18,32,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:9px;font-size:1.16rem;font-weight:700;letter-spacing:-.01em;color:#fff}
.logo .mark{display:grid;place-items:center}
.logo .mark svg{width:27px;height:27px}
.logo span em{font-style:normal;color:var(--cyan)}
.nav-links{display:flex;gap:4px;list-style:none;align-items:stretch;height:70px}
.nav-links > li{position:relative;display:flex;align-items:center}
.nav-links > li > a{display:inline-flex;align-items:center;gap:5px;color:#c6d0e2;font-weight:600;font-size:.95rem;padding:0 13px;height:100%;transition:color .15s}
.nav-links > li > a:hover{color:#fff}
.nav-top .caret{width:14px;height:14px;opacity:.7;transition:transform .18s}
.has-menu:hover .caret,.has-menu:focus-within .caret{transform:rotate(180deg);opacity:1}
/* Dropdown-Panel (absolut -> kein Layout-Shift) */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;
  box-shadow:0 26px 60px rgba(11,18,32,.24);
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:60}
.has-menu:hover .mega,.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega a{display:block;color:var(--ink);font-weight:600;font-size:.92rem;padding:9px 13px;border-radius:9px;white-space:nowrap;transition:background .12s,color .12s}
.mega a:hover{background:var(--bg);color:var(--blue)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-foot{display:block;margin-top:8px;padding-top:11px;border-top:1px solid var(--line);color:var(--blue)}
.mega-sm{min-width:232px}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-cta .login{color:#c6d0e2;font-weight:600;font-size:.95rem}
.nav-cta .login:hover{color:#fff}
.nav-cta .btn{padding:11px 22px;font-size:.95rem}
.nav-toggle-cb{display:none}
.nav-links > li.nav-mobile-only{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:auto}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px}
@media(max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta .login{display:none}
  #navtoggle:checked ~ nav .nav-links{
    display:flex;flex-direction:column;align-items:stretch;height:auto;gap:0;
    position:absolute;top:70px;left:0;right:0;max-height:82vh;overflow-y:auto;
    background:var(--navy);padding:6px 22px 18px;
    border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px rgba(0,0,0,.45);z-index:60;
  }
  .nav-links > li{display:block;border-top:1px solid rgba(255,255,255,.07)}
  .nav-links > li > a{display:flex;justify-content:space-between;padding:13px 2px;font-size:1rem}
  .caret{display:none}
  .mega{position:static;transform:none;opacity:1;visibility:visible;
    background:transparent;border:none;box-shadow:none;padding:0 0 12px 8px}
  .mega-grid{grid-template-columns:1fr 1fr;gap:0}
  .mega a{color:#9fb0c9;padding:9px 6px;font-size:.9rem;white-space:normal}
  .mega a:hover{background:transparent;color:#fff}
  .mega-foot{border-top:1px solid rgba(255,255,255,.12);color:var(--cyan);margin-top:4px}
  .nav-links > li.nav-mobile-only{display:block}
}

/* ============ Hero ============ */
.hero{
  background:
    radial-gradient(900px 520px at 88% -12%,rgba(47,107,255,.15),transparent 62%),
    linear-gradient(100deg,rgba(9,14,26,.97) 30%,rgba(9,14,26,.82) 62%,rgba(9,14,26,.66)),
    url("../img/hero-bg.jpeg") center/cover no-repeat,
    var(--navy);
  color:#fff;padding:92px 0 100px;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.hero{padding:72px 0}}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.26);
  color:#9bd9fb;font-size:.77rem;font-weight:600;letter-spacing:.01em;
  padding:6px 14px;border-radius:999px;margin-bottom:22px;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.hero h1{font-size:clamp(1.9rem,3.8vw,2.8rem);color:#fff;margin-bottom:20px;line-height:1.12}
.hero h1 .accent{color:#7db0ff}
.hero .sub{font-size:1.06rem;color:#aeb9cc;max-width:540px;margin-bottom:30px;line-height:1.7}
.hero-checks{list-style:none;margin-bottom:34px;display:grid;gap:11px}
.hero-checks li{display:flex;gap:12px;align-items:flex-start;color:#cdd7e6;font-size:.97rem}
.hero-checks .check{
  flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:rgba(22,163,74,.2);display:grid;place-items:center;
}
.hero-checks .check svg{width:12px;height:12px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:26px}
.price-hint{color:#c6d0e2;font-size:.95rem}
.price-hint strong{color:#fff;font-size:1.05rem}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
.trust-item{color:#93a6c2;font-size:.82rem;font-weight:600;letter-spacing:.02em;padding:0 16px;border-left:1px solid rgba(255,255,255,.14)}
.trust-item:first-child{padding-left:0;border-left:0}
.social-proof{display:flex;align-items:center;gap:14px;color:#9fb0ca;font-size:.92rem}
.avatars{display:flex}
.avatars span{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--navy);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff;margin-left:-8px;
}
.avatars span:first-child{margin-left:0}

/* Mail-Mockup */
.mockup{position:relative}
.mail-card{
  background:#fff;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  overflow:hidden;color:var(--ink);transform:rotate(-0.6deg);
}
.mail-top{display:flex;gap:7px;padding:14px 18px;background:#eef2f9;border-bottom:1px solid #e2e8f2}
.mail-top i{width:11px;height:11px;border-radius:50%}
.mail-top i:nth-child(1){background:#ff5f57}.mail-top i:nth-child(2){background:#febc2e}.mail-top i:nth-child(3){background:#28c840}
.mail-body{padding:22px 24px}
.mail-row{font-size:.88rem;color:var(--muted);padding:7px 0;border-bottom:1px solid #eef1f7;display:flex;gap:8px}
.mail-row b{color:var(--ink);flex:none}
.mail-text{padding:16px 0 4px;font-size:.92rem;color:#41506b}
.mail-text p{margin-bottom:10px}
.tag-sent{
  position:absolute;top:-16px;right:-8px;z-index:2;
  background:#15803d;color:#fff;
  font-size:.82rem;font-weight:600;padding:9px 16px;border-radius:999px;
  box-shadow:0 8px 22px rgba(21,128,61,.30);
}
/* Echter Produkt-Screenshot im Browser-Rahmen */
.browser{border-radius:14px;overflow:hidden;background:#0f1830;
  box-shadow:0 34px 70px -26px rgba(3,8,20,.7),0 0 0 1px rgba(255,255,255,.07)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:#101b32;border-bottom:1px solid rgba(255,255,255,.06)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.browser-bar .url{margin-left:12px;flex:1;max-width:290px;font-size:.78rem;color:#8aa0c6;
  background:rgba(255,255,255,.06);padding:5px 12px;border-radius:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-img{display:block;width:100%;height:auto}
.tag-leads{
  position:absolute;bottom:-18px;left:-14px;
  background:#fff;border-radius:10px;padding:12px 18px;
  box-shadow:0 16px 44px rgba(0,0,0,.35);display:flex;gap:12px;align-items:center;
}
.tag-leads .num{font-size:1.3rem;font-weight:800;color:var(--blue)}
.tag-leads .lbl{font-size:.78rem;color:var(--muted);line-height:1.3}
@media(max-width:960px){.mockup{display:none}}

/* ============ Stats-Bar ============ */
.stats{background:var(--bg);padding:36px 0;border-bottom:1px solid #e8edf5}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat .num{font-size:1.7rem;font-weight:800;color:var(--ink)}
.stat .lbl{font-size:.9rem;color:var(--muted)}

/* ============ Steps ============ */
/* Das Raster richtet sich nach der KARTENZAHL, nicht nach einer festen Zahl.
   Vorher: repeat(3,1fr) bei vier Karten - die vierte rutschte allein in eine
   zweite Reihe. Eine feste 4 waere genauso falsch gewesen: die Stadtseiten
   haben nur DREI Karten und haetten eine leere Spalte bekommen.
   auto-fit mit Mindestbreite loest beides: 4 Karten im 1160er Container
   ergeben vier Spalten a 273px, 3 Karten im 820er drei Spalten a 258px. */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;align-items:stretch}
/* Vier Karten nie als 3+1 umbrechen lassen - lieber sauber 2x2. */
@media(max-width:1099px){.steps-grid:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr)}}
/* :has() oben hat hoehere Spezifitaet - ohne die Wiederholung blieben auf
   dem Handy zwei 158-px-Spalten stehen, in denen jedes zweite Wort umbricht. */
@media(max-width:620px){.steps-grid,.steps-grid:has(> :nth-child(4)){grid-template-columns:1fr}}
.step{
  background:var(--bg);border:1px solid #e8edf5;border-radius:var(--radius);
  padding:30px 24px;position:relative;
  /* Gleich hohe Karten, Inhalt oben buendig - sonst haengt der Text der
     kurzen Karten in der Mitte und die Reihe wirkt schief. */
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.step:hover{transform:translateY(-3px);border-color:#cdd9ea;
  box-shadow:0 10px 28px rgba(19,26,42,.07)}
.step .n{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;font-weight:800;font-size:1.05rem;margin-bottom:18px;
  flex:0 0 auto;
}
.step h3{font-size:1.06rem;line-height:1.3;margin-bottom:10px;
  /* Ueberschriften nicht mitten im Wort trennen - bei schmalen Spalten
     zerlegt der Browser sonst "companies" in "compa-nies". */
  hyphens:none;overflow-wrap:break-word}
.step p{font-size:.94rem;line-height:1.62;color:var(--muted);
  hyphens:none;text-wrap:pretty}

/* ============ Features ============ */
.features{background:var(--navy);color:#fff}
.features h2,.features h3{color:#fff}
.features .section-head p{color:#a9b7cf}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.feat-grid{grid-template-columns:1fr}}
.feat{
  background:var(--navy-2);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:30px 26px;transition:transform .18s,border-color .18s;
}
.feat:hover{transform:translateY(-4px);border-color:rgba(56,189,248,.45)}
.feat .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(47,107,255,.18);margin-bottom:18px;
}
.feat .ico svg{width:22px;height:22px}
.feat h3{font-size:1.08rem;margin-bottom:8px}
.feat p{font-size:.94rem;color:#a9b7cf}

/* ============ Zielgruppen ============ */
.industries-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;margin-top:8px}
@media(max-width:860px){.industries-grid{grid-template-columns:1fr}}
.industry-figure{
  position:relative;border-radius:26px;overflow:hidden;
  background:
    radial-gradient(420px 300px at 70% 20%,rgba(56,189,248,.28),transparent 65%),
    linear-gradient(160deg,#16224080 0%,transparent 55%),
    linear-gradient(135deg,#dbe7ff,#eef3fd);
  display:flex;align-items:flex-end;justify-content:center;
  min-height:380px;box-shadow:var(--shadow);
}
.industry-figure img{max-height:440px;width:auto;object-fit:contain;margin-bottom:-2px}
.industry-badge{
  position:absolute;top:18px;left:18px;
  background:#fff;border-radius:999px;padding:9px 18px;
  font-size:.85rem;font-weight:700;color:var(--ink);
  box-shadow:0 8px 24px rgba(11,18,32,.15);display:flex;gap:8px;align-items:center;
}
.industry-badge svg{width:16px;height:16px}
.industries .lead-text{font-size:1.05rem;color:var(--muted);margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.industries .chips{gap:12px;justify-content:flex-start}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:9px 16px;font-weight:500;color:var(--ink);font-size:.9rem;line-height:1.2;
}
.chip svg{width:16px;height:16px}

/* ============ Pricing ============ */
.pricing{background:var(--bg)}
.price-card{
  max-width:520px;margin:0 auto;background:#fff;border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;border:1px solid #e8edf5;
}
.price-head{
  background:linear-gradient(135deg,var(--navy),#182b52);
  color:#fff;padding:34px 36px;text-align:center;
}
.price-head .plan{font-size:.85rem;font-weight:700;letter-spacing:.14em;color:var(--cyan)}
.price-head .amount{font-size:3rem;font-weight:800;margin:8px 0 2px}
.price-head .amount small{font-size:1.05rem;font-weight:600;color:#a9b7cf}
.price-head .per{color:#a9b7cf;font-size:.92rem}
.price-body{padding:34px 36px}
.price-body ul{list-style:none;display:grid;gap:14px;margin-bottom:28px}
.price-body li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.price-body .check{
  flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:rgba(22,163,74,.12);display:grid;place-items:center;
}
.price-body .check svg{width:12px;height:12px}
.price-body .btn{width:100%}
.price-note{margin-top:18px;font-size:.82rem;color:var(--muted);text-align:center}

/* ============ FAQ ============ */
.faq-list{max-width:780px;margin:0 auto;display:grid;gap:14px}
details{
  background:var(--bg);border:1px solid #e8edf5;border-radius:10px;
  padding:0;overflow:hidden;
}
details[open]{border-color:rgba(47,107,255,.4);background:#fff;box-shadow:var(--shadow)}
summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:20px 24px;font-weight:700;color:var(--ink);font-size:1.02rem;
}
summary::-webkit-details-marker{display:none}
summary .plus{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.05rem;
  transition:transform .2s;line-height:1;
}
details[open] summary .plus{transform:rotate(45deg)}
details .answer{padding:0 24px 22px;color:var(--text);font-size:.97rem}

/* ============ CTA ============ */
.cta{
  background:
    radial-gradient(700px 400px at 50% -20%,rgba(56,189,248,.25),transparent 60%),
    var(--navy);
  color:#fff;text-align:center;
}
.cta h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem)}
.cta p{color:#a9b7cf;font-size:1.12rem;max-width:600px;margin:0 auto 34px}
.cta .hint{margin-top:16px;font-size:.9rem;color:#8b9bb8}

/* ============ Footer ============ */
footer{background:#070c16;color:#8b9bb8;padding:56px 0 32px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
footer .logo{margin-bottom:14px;font-size:1.1rem}
footer h4{color:#fff;font-size:.95rem;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:10px}
footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;text-align:center;font-size:.85rem}

/* ============ Stadtseiten ============ */
.city-hero{padding:72px 0 80px}
.city-hero .sub{max-width:720px}
.breadcrumbs{font-size:.88rem;color:#9fb0ca;margin-bottom:26px}
.breadcrumbs a{color:#c6d0e2}
.breadcrumbs a:hover{color:#fff;text-decoration:underline}
.breadcrumbs span{color:#fff}
.args-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.args-grid{grid-template-columns:1fr}}
a.chip{transition:border-color .15s,box-shadow .15s,color .15s}
a.chip:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 2px 8px rgba(11,18,32,.06)}
.land-head{font-size:1.15rem;margin:26px 0 14px}
.cities-teaser{background:var(--bg)}

/* ============ Sprachumschalter ============ */
.lang-sel{
  background:rgba(255,255,255,.08);color:#c6d0e2;border:1px solid rgba(255,255,255,.25);
  border-radius:10px;padding:9px 12px;font-size:.9rem;font-weight:600;cursor:pointer;
}
.lang-sel:hover{background:rgba(255,255,255,.16);color:#fff}
footer .lang-sel{width:100%;max-width:220px}
@media(max-width:640px){.nav-cta .lang-sel{display:none}}

/* ============ SEO-Abschluss (Keyword-Wiederholung am Seitenende) ============ */
.price-stripe{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:.86rem;margin-top:8px}
.price-stripe svg{color:var(--blue);flex:none}
.seo-closing{background:var(--bg);padding:56px 0;border-top:1px solid var(--line)}
.seo-closing .container{max-width:880px}
.seo-closing h2{font-size:1.3rem;color:var(--ink);margin:0 0 16px;line-height:1.3;letter-spacing:-.01em}
.seo-closing p{color:var(--muted);font-size:.95rem;margin:0 0 14px;line-height:1.8}
.seo-closing p a{color:var(--blue);font-weight:600}
.seo-closing p a:hover{text-decoration:underline}
.seo-closing .seo-nav{display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;margin-top:22px}
.seo-closing .seo-nav .seo-nav-label{color:var(--muted);font-size:.9rem;margin-right:2px}
.seo-closing .seo-nav a{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.88rem;font-weight:600;color:var(--blue)}
.seo-closing .seo-nav a:hover{border-color:var(--blue);text-decoration:none}

/* ============ Preis ============ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:0 auto}
@media(max-width:820px){.price-grid{grid-template-columns:1fr;max-width:420px}}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 26px;box-shadow:var(--shadow)}
.pcard.featured{border:2px solid var(--blue);box-shadow:0 16px 44px rgba(47,107,255,.18)}
.pcard-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:999px}
.pcard-name{font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pcard-amount{font-size:2.6rem;font-weight:800;color:var(--ink);margin:8px 0 2px;letter-spacing:-.02em}
.pcard-amount small{font-size:1rem;font-weight:600;color:var(--muted);margin-left:6px}
.pcard-vat{color:var(--muted);font-size:.84rem;margin-bottom:20px}
.pcard-feat{list-style:none;display:grid;gap:11px;margin:0 0 24px}
.pcard-feat li{font-size:.95rem;color:var(--text);padding-left:26px;position:relative}
.pcard-feat li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.price-note-c{text-align:center;color:var(--muted);font-size:.9rem;margin-top:26px}

/* Sticky Mobile-CTA-Leiste (nur Smartphone) */
.mobile-cta-bar{display:none}
@media(max-width:640px){
  .mobile-cta-bar{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 14px;background:rgba(11,18,32,.96);backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.1);
  }
  .mobile-cta-bar .btn{flex:1;justify-content:center;padding:13px 8px;font-size:.9rem}
  body{padding-bottom:66px}
}

/* ============ Vergleichstabelle (Vertriebler vs. leads2mail) ============ */
.compare{background:var(--bg)}
.compare-wrap{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);min-width:660px}
.compare-table th,.compare-table td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.97rem;vertical-align:top}
.compare-table thead th{background:var(--navy);color:#fff;font-size:1rem;letter-spacing:-.01em}
.compare-table thead th.is-us{background:linear-gradient(135deg,var(--blue),var(--blue-dark))}
.compare-table td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.compare-table .neg{color:#9a4b57}
.compare-table .pos{color:#15803d;font-weight:600;background:rgba(22,163,74,.06)}
.compare-table tbody tr:last-child td{border-bottom:0}
.compare-note{text-align:center;color:var(--muted);margin-top:18px;font-size:1rem}

/* ============ TL;DR-Box (GEO/AEO) ============ */
.tldr{background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);border-radius:10px;padding:18px 22px;margin:0 0 26px;max-width:560px}
.tldr strong{color:#fff;display:block;margin-bottom:8px}
.tldr ul{list-style:none;display:grid;gap:8px}
.tldr li{color:#dbe4f2;font-size:1rem;padding-left:22px;position:relative}
.tldr li::before{content:"→";position:absolute;left:0;color:var(--cyan)}

/* ============ Kostenrechner ============ */
.calc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:var(--shadow)}
.calc h2{margin-bottom:20px}
.calc-row{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:center;margin-bottom:16px}
.calc-row > div{display:flex;align-items:center;gap:14px}
.calc-row label{font-weight:600;color:var(--ink)}
.calc-row input[type=range]{flex:1;accent-color:var(--blue)}
.calc-row output{font-weight:700;color:var(--blue);min-width:92px;text-align:right}
.calc-hint{font-size:.85rem;color:var(--muted);margin:6px 0 20px}
.calc-result{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;background:var(--bg);border-radius:10px;padding:22px}
.calc-total{text-align:center}
.calc-total span{display:block;font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.calc-total strong{display:block;font-size:1.6rem;color:var(--ink)}
.calc-total em{font-style:normal;color:var(--muted);font-size:.9rem}
.calc-total.is-us strong{color:var(--green)}
.calc-vs{font-weight:800;color:var(--muted);font-size:1.1rem}
.calc-save{text-align:center;font-size:1.15rem;margin-top:18px}
.calc-save strong{color:var(--green)}
@media(max-width:560px){.calc-row{grid-template-columns:1fr}.calc-row output{text-align:left}}

/* Lange deutsche Wörter auf schmalen Viewports sauber umbrechen */
h1,h2,h3{overflow-wrap:break-word;hyphens:manual}

/* ============ Bewerbungsformular ============ */
.app-form{display:grid;gap:16px;margin-top:8px}
.app-field{display:grid;gap:6px;font-weight:600;color:var(--ink);font-size:.95rem}
.app-field input,.app-field textarea{font:inherit;font-weight:400;color:var(--text);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;width:100%}
.app-field input:focus,.app-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.12)}
.app-consent{display:grid;gap:12px;background:var(--bg);border-radius:12px;padding:16px}
.app-check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--text);font-weight:400;cursor:pointer}
.app-check input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--blue)}
.btn-block{width:100%}

/* Zweispaltige Formularzeilen (Bewerbungsformular) */
.app-form .grid.c2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.app-form .grid.c2{grid-template-columns:1fr}}

/* ============ Enterprise-Feinschliff (Audit) ============ */
section{padding:96px 0}
@media(max-width:760px){section{padding:60px 0}}
/* mehr Luft, ruhigerer Rhythmus */
.section-head{margin-bottom:56px}
/* Tabellen-/Preis-Ziffern gleichmäßig */
.pcard-amount,.stat .num,.calc-total strong,.calc-total em,.compare-table td,
.tag-leads .num,.price-hint strong,.calc-row output{font-variant-numeric:tabular-nums}
/* Preis-Cards feiner: leichtere Beträge, dezenter Featured-Schatten */
.pcard-amount{font-weight:700;font-size:2.3rem}
.pcard-name{font-weight:600}
.pcard.featured{box-shadow:0 8px 30px rgba(47,107,255,.10)}
.pcard-badge{font-weight:600;font-size:.72rem;letter-spacing:.02em}
/* sichtbarer, barrierefreier Fokus-Ring */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,
textarea:focus-visible,summary:focus-visible,.chip:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;
}

/* ============ Länder-Hub /laender/ ============ */
.laender-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px;margin-top:18px}
.land-card{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:#fff;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  transition:border-color .15s ease,transform .15s ease}
.land-card:hover{border-color:var(--blue);transform:translateY(-1px)}
.land-name{font-weight:600;letter-spacing:-.01em}
.land-sub{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.lang-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lang-pill{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:500;
  transition:border-color .15s ease,color .15s ease}
.lang-pill:hover{border-color:var(--blue);color:var(--blue)}
.cta-band{background:linear-gradient(180deg,#fff, var(--bg));border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:72px 0;margin-top:56px}

/* ============ Vergleichsseiten: FAQ-Accordion, Häkchen-Listen, Hilfetext ============ */
.help{font-size:.85rem;color:var(--muted)}
.ticks{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-left:26px;color:var(--ink);line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.32em;width:15px;height:15px;border-radius:50%;
  background:rgba(22,163,74,.12)}
.ticks li::after{content:"";position:absolute;left:5px;top:.5em;width:4px;height:7px;
  border:solid #15803d;border-width:0 2px 2px 0;transform:rotate(42deg)}
.faq-item{border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:12px;
  box-shadow:var(--shadow);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;position:relative;padding-right:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--blue);font-weight:400;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding:0 20px 18px;margin:0;color:var(--muted);line-height:1.6}

/* ============ Branchen: ROI-/Break-even-Beispielrechnung ============ */
.roi{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.roi-grid{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.roi-cell{flex:1 1 200px;max-width:260px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:22px 18px;text-align:center;display:flex;flex-direction:column;gap:6px;justify-content:center}
.roi-cell .roi-num{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.roi-cell .roi-cap{font-size:.9rem;color:var(--muted);line-height:1.35}
.roi-result{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-color:transparent}
.roi-result .roi-num,.roi-result .roi-cap{color:#fff}
.roi-result .help{color:rgba(255,255,255,.85)}
.roi-op{display:flex;align-items:center;font-size:1.6rem;color:var(--muted);font-weight:400}
.roi-lead{max-width:760px;margin:22px auto 0;text-align:center;color:var(--ink);line-height:1.6}
@media(max-width:640px){.roi-op{transform:rotate(90deg)}.roi-cell{max-width:100%}}

/* ============ Langform-Artikel (Wissen/Recht): Lesetypografie ============ */
article p{line-height:1.72;margin:0 0 1.05em}
article .lead{margin-bottom:1em}
article h2{letter-spacing:-.022em}
article h3{font-size:1.17rem;font-weight:600;letter-spacing:-.012em;margin:1.9em 0 .5em;color:var(--ink)}
article ul:not(.ticks){margin:.2em 0 1.15em;padding-left:1.25em;line-height:1.62}
article ul:not(.ticks) li{margin-bottom:.4em}
article code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.88em}

/* ============ Startseite: heller Hero (statt dunkel) — nur index.html (.hero-light) ============ */
.hero-light{
  background:
    radial-gradient(720px 420px at 92% -14%, rgba(47,107,255,.10), transparent 60%),
    linear-gradient(100deg, rgba(248,250,253,.97) 26%, rgba(248,250,253,.86) 52%, rgba(248,250,253,.64) 100%),
    url("../img/hero-bg.jpeg") center/cover no-repeat,
    #eef2fb;
  color:var(--ink);
}
.hero-light h1{color:var(--ink)}
.hero-light h1 .accent{color:var(--blue)}
.hero-light .sub{color:#51617c}
.hero-light .hero-checks li{color:#3d4a63}
.hero-light .price-hint{color:#5b6b85}
.hero-light .price-hint strong{color:var(--ink)}
.hero-light .badge{background:rgba(47,107,255,.07);border-color:rgba(47,107,255,.22);color:#2456c9}
.hero-light .trust-item{color:#6b7a95;border-left-color:rgba(11,18,32,.12)}
.hero-light .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.hero-light .btn-ghost:hover{background:var(--bg)}
.hero-light .tag-leads{border:1px solid var(--line)}

/* ==== Tiefsee: globale Typografie + warme Fläche (Premium-Redesign) ==== */
:root{
  /* EINE Schrift ueberall (Andreas, 25.08.2026: "mache ueberall die gleiche
     schriftart", die Serif-Ueberschriften wurden ausdruecklich abgelehnt).
     --font-display bleibt als Variable bestehen, damit kein Selektor
     angefasst werden muss - sie zeigt jetzt nur auf dieselbe Grotesk. */
  --font-display:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg:#F1F3F6;          /* Baender (29.08.2026 auf kuehl gezogen) */
  --line:#E3E7EE;
  --ink:#0D1420;
}
body{font-family:var(--font-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2{font-family:var(--font-display);letter-spacing:-.012em;font-weight:600}
h3,h4,h5,h6{font-family:var(--font-body)}

/* ============ Startseite: Hero „Tiefsee" (Titelbild USA-Karte + Regio-Kampagne am Handy) ============ */
.hero-t{background:var(--bg);color:var(--ink);padding:56px 0 60px;border-bottom:1px solid var(--line);overflow:hidden;position:relative;isolation:isolate}







/* Einspaltig, seit die Karte raus ist: Text oben, Funnel darunter. */
.hero-t-grid{position:relative;z-index:2;display:block}
.hero-t-copy{max-width:46rem}
.hero-t-kicker{font-family:var(--font-body);font-weight:500;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:#4c5862;position:relative;padding-top:16px;margin:0 0 18px}
.hero-t-kicker::before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--ink)}
.hero-t-title{font-family:var(--font-display);font-weight:600;font-size:clamp(2.25rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0 0 20px;text-wrap:balance}
.hero-t-title .u{box-shadow:inset 0 -.09em 0 var(--blue);padding-bottom:.02em}
.hero-t-lead{font-family:var(--font-body);font-size:1.15rem;line-height:1.6;color:#3d4a5c;max-width:42rem;margin:0 0 26px}
.hero-t-lead strong{color:var(--ink);font-weight:600}
.hero-t-caps{list-style:none;margin:0 0 28px;padding:0}
.hero-t-caps li{position:relative;padding:13px 0 13px 30px;border-top:1px solid var(--line);font-weight:500;font-size:.98rem;color:var(--ink)}
.hero-t-caps li:last-child{border-bottom:1px solid var(--line)}
.hero-t-caps li::before{content:"";position:absolute;left:0;top:14px;width:17px;height:17px;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.3 12 13 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.3 12 13 4'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-t-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.btn-ink,.btn-line{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:600;font-size:.98rem;padding:14px 24px;border-radius:7px;border:1px solid transparent;transition:background .15s,border-color .15s,transform .12s;cursor:pointer}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#0f1922;transform:translateY(-1px)}
.btn-line{background:#fff;border-color:#c5c8be;color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.hero-t-price{font-weight:600;font-size:.92rem;color:#4c5862;margin:0 0 22px;font-variant-numeric:tabular-nums}
/* Eigener Streifen UNTER dem Hero, nicht darin. Im Hero lag das Band teils auf
   dem dunklen Anzug des Titelbilds und war dort nicht mehr lesbar; ausserdem
   deckte der frühere Weichzeichner-Schleier es links komplett zu. */
/* padding:0 muss explizit stehen: die allgemeine section-Regel legt sonst
   ihre Vertikalpolsterung darueber und aus dem Sliver wird ein Block. */
.trust-band{background:#fff;border-bottom:1px solid var(--line);padding:0}

/* Vertrauensband: EINE schmale Zeile statt eines dreizeiligen Blocks.
   Auf schmalen Schirmen scrollt es waagerecht in sich selbst - der Seitenkoerper
   darf dabei nie mitscrollen, deshalb overflow nur auf dieser Liste. */
.trust-strip{list-style:none;margin:0;padding:13px 0;display:flex;gap:22px;
  align-items:center;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trust-strip::-webkit-scrollbar{display:none}
.trust-strip li{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-size:.78rem;font-weight:500;letter-spacing:.01em;color:#4c5862;white-space:nowrap}
@media(min-width:1040px){.trust-strip{justify-content:space-between;gap:14px;overflow:visible}}
.trust-strip svg{width:15px;height:15px;flex:0 0 auto;color:var(--blue);opacity:.9}
@media(max-width:900px){
  .trust-strip{gap:18px;margin-top:16px}
  /* Angefasste Kante als Hinweis, dass rechts noch etwas kommt */
  .trust-strip{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
               mask-image:linear-gradient(90deg,#000 92%,transparent)}
}
@media(max-width:900px){
  .hero-t{padding:44px 0 40px}
  .hero-t-copy{max-width:none}
}

/* ============ Funnel-Restyle: professionell, hell, ohne KI-Tells ============ */
/* Schritt-/Funktions-Nummern: flach in Tinte statt Blau-Cyan-Verlauf */
.step .n{background:var(--ink);border-radius:10px}
.step{background:#fff;border:1px solid var(--line)}
/* Feature-Sektion: dunkel -> hell */
.features{background:var(--bg);color:var(--ink)}
.features h2,.features h3{color:var(--ink)}
.features .section-head p{color:#4c5862}
.feat{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.feat:hover{transform:translateY(-3px);border-color:#c9cec3}
.feat .ico{background:rgba(47,107,255,.10)}
.feat .ico svg{color:var(--blue)}
.feat h3{color:var(--ink)}
.feat p{color:#4c5862}
/* Vergleichstabelle: „unser" Kopf flach in Tinte */
.compare-table thead th.is-us{background:var(--ink)}
/* Abschluss-CTA: dunkel bleibt (bewusster Funnel-Abschluss), ohne Glow */
.cta{background:var(--navy)}
.cta .btn-primary{background:#fff;color:var(--ink)}
.cta .btn-primary:hover{background:var(--bg)}
/* Industrie-Deko-Panel: Verlauf -> ruhige Fläche */
.industry-figure{background:var(--bg);border:1px solid var(--line)}

/* ============ Unterseiten-Hero (Branchen/Städte/Vertriebspartner): dunkel -> hell Tiefsee ============ */
.city-hero{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.city-hero .breadcrumbs,.city-hero .breadcrumbs a{color:#5b6773}
.city-hero h1{color:var(--ink)}
.city-hero h1 .accent{color:inherit;-webkit-text-fill-color:currentColor;background:none;box-shadow:inset 0 -.09em 0 var(--blue);padding-bottom:.02em}
.city-hero .sub{color:#3d4a5c}
.city-hero .sub strong{color:var(--ink)}
.city-hero .badge{background:none;border:0;padding:0;color:#4c5862;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.city-hero .badge .dot{background:var(--blue);box-shadow:none}
.city-hero .hero-checks li{color:var(--ink)}
.city-hero .hero-checks .check{background:rgba(22,34,46,.07)}
.city-hero .hero-checks .check svg{stroke:var(--ink)}
.city-hero .price-hint{color:#4c5862}
.city-hero .price-hint strong{color:var(--ink)}
.city-hero .btn-primary{background:var(--ink);color:#fff;box-shadow:none}
.city-hero .btn-primary:hover{background:#0f1922}
.city-hero .btn-ghost{background:#fff;color:var(--ink);border:1px solid #c5c8be}
.city-hero .btn-ghost:hover{background:var(--bg);border-color:var(--ink)}

/* Unterseiten: aktuelle Brotkrume sichtbar + Branchen-Foto gerahmt */
.city-hero .breadcrumbs span{color:#3d4a5c}
.industry-figure img{border-radius:12px}

/* Fix: „Kurz gesagt"-Box (tldr) – Text war hell auf hell (Kontrast) */
.tldr{background:rgba(47,107,255,.05);border-color:var(--line)}
.tldr strong{color:var(--ink)}
.tldr li{color:#3d4a5c}
.tldr li::before{color:var(--blue)}
/* Branchen-Sektion: Foto füllt die Karte (kein grauer Rand), Layout ausbalanciert */
.industries-grid{align-items:start}
.industry-figure{display:block;position:sticky;top:96px;padding:0;min-height:0;background:none;
  border-radius:16px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 1px 2px rgba(22,34,46,.05),0 30px 60px -30px rgba(22,34,46,.28)}
.industry-figure img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 16%;margin:0;border-radius:0}

/* Fix: Menü „springt hin und her" – Scrollbar-Rinne immer reservieren (kein Re-Center) */
html{overflow-y:scroll;scrollbar-gutter:stable}

/* Fix: Pricing als 3 gleich große Spalten (identische Höhe, Button unten bündig) */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;max-width:1000px;margin:0 auto}
.pcard{padding:28px 24px;display:flex;flex-direction:column;border-width:2px;height:100%}
.pcard h3{font-family:var(--font-body);font-size:1.05rem;font-weight:600;margin:0 0 6px;color:var(--ink)}
.pcard-amount{font-size:2.1rem;margin:2px 0 16px}
.pcard-amount span{font-size:.95rem;font-weight:600;color:var(--muted);margin-left:3px;-webkit-text-fill-color:var(--muted)}
.pcard .ticks{margin:0 0 20px}
.pcard .btn-block{padding:11px 16px;margin-top:auto}
@media(max-width:860px){.pricing-grid{grid-template-columns:1fr;max-width:400px}}

/* Fix: sauberer Abstand vor Abschnitts-Überschriften in Artikeln (Recht-Guide etc.) */
article h2{margin:1.9em 0 .55em}
article h2:first-child{margin-top:0}
article .ticks{margin:.5em 0 1.4em}
article .msg-box + h2{margin-top:1.6em}

/* ===== instantly-adoptions: market explorer, tier note, free tools ===== */
.pcard-rec{color:var(--muted);font-size:.88rem;margin:-6px 0 16px}
.market{background:var(--bg)}
.market-form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:780px;margin:8px auto 0}
.market-form select{flex:1 1 220px;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:.98rem;cursor:pointer}
.market-form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.15)}
.market-form .btn{flex:0 0 auto}
@media(max-width:640px){.market-form{flex-direction:column}.market-form .btn{width:100%;justify-content:center}}

.tool-hero{padding-top:52px}
.tool-form{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 0}
.tool-form input{flex:1 1 260px;min-width:0;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:1rem}
.tool-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.15)}
.tool-form .tool-selector{flex:0 1 220px}
.tool-form .btn{flex:0 0 auto}
@media(max-width:560px){.tool-form{flex-direction:column}.tool-form .btn{width:100%;justify-content:center}}
.tool-out{margin-top:18px}
.tool-card{border:1px solid var(--line);border-left-width:4px;border-radius:12px;padding:16px 18px;background:#fff}
.tool-card strong{display:block;font-size:1.02rem;margin-bottom:4px;color:var(--ink)}
.tool-card p{margin:0;color:var(--text)}
.tool-card code{background:var(--bg);padding:1px 5px;border-radius:5px;font-size:.9em}
.tool-ok{border-left-color:var(--green)}
.tool-warn{border-left-color:#e0a416}
.tool-err{border-left-color:#d64545}
.tool-wait{border-left-color:var(--blue);color:var(--muted)}
.tool-mono{margin-top:10px;padding:10px 12px;background:var(--bg);border-radius:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.tool-note{color:var(--muted);font-size:.84rem;margin-top:10px}
.tool-explain h2{font-size:1.15rem;margin:1.4em 0 .4em}
.tool-explain code{background:var(--bg);padding:1px 5px;border-radius:5px;font-size:.9em}
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
@media(max-width:640px){.tools-grid{grid-template-columns:1fr}}
.tool-card-link{display:block;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#fff;transition:box-shadow .15s,transform .15s,border-color .15s}
.tool-card-link:hover{box-shadow:0 14px 34px rgba(11,18,32,.10);transform:translateY(-2px);border-color:#cfd3ca}
.tool-card-link h3{font-family:var(--font-body);font-size:1.08rem;margin:0 0 6px;color:var(--ink)}
.tool-card-link p{margin:0 0 10px;color:var(--muted);font-size:.94rem}
.tool-card-link .tool-go{color:var(--blue);font-weight:700;font-size:.92rem}


/* ==== Funnel im Hero (25.08.2026) ====================================
   Ersetzt die USA-Karte: sie war auf dem Handy ein 62vw hoher Block ohne
   Aussage und hat die Seite genau dort zerrissen, wo der Kunde entscheidet.
   Vier nummerierte Schritte lesen sich auf jedem Geraet in fuenf Sekunden. */
.funnel{list-style:none;margin:34px auto 0;padding:0;max-width:1080px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.funnel li{display:flex;gap:12px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:16px 16px 18px;
  box-shadow:var(--shadow)}
.funnel .fn{flex:none;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:.78rem;font-weight:700}
.funnel strong{display:block;font-size:.95rem;margin-bottom:3px;color:var(--ink)}
.funnel span{display:block;font-size:.86rem;line-height:1.5;color:var(--muted)}
@media(max-width:960px){ .funnel{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){
  .funnel{grid-template-columns:1fr;gap:10px;margin-top:26px}
  .funnel li{padding:13px 14px;align-items:center}
  .funnel span{font-size:.85rem}
}

/* ==== Handy: klarere Struktur (Andreas: "sehr unklar strukturiert") ====
   Die Abstaende waren fuer Desktop gesetzt; auf 390 px lief alles ineinander.
   Weniger Luft zwischen Zeilen, mehr zwischen ABSCHNITTEN - das ist es, was
   Struktur sichtbar macht. */
@media(max-width:640px){
  .hero-t{padding:26px 0 34px}
  .hero-t-title{font-size:clamp(1.7rem,7.6vw,2.3rem);line-height:1.14;margin-bottom:14px}
  .hero-t-kicker{font-size:.7rem;letter-spacing:.06em;margin-bottom:8px;line-height:1.35}
  .hero-t-lead{font-size:.98rem;line-height:1.5}
  .hero-t-price{font-size:.82rem;margin-top:12px}
  .hero-t-cta{display:flex;flex-direction:column;gap:10px;margin-top:20px}
  .hero-t-cta .btn-ink,.hero-t-cta .btn-line{width:100%;justify-content:center;text-align:center}
  section{padding:34px 0}
  .section-head{margin-bottom:18px}
  .section-head h2{font-size:1.35rem;line-height:1.25}
  .section-head p{font-size:.94rem}
  .grid.c3,.grid.c2{grid-template-columns:1fr;gap:12px}
  .steps-grid,.steps-grid:has(> :nth-child(4)),.feat-grid{grid-template-columns:1fr;gap:12px}
  .chips{gap:6px}
  .chip{font-size:.8rem;padding:5px 9px}
  /* Tabellen brechen sonst die Seite auf - eigener Scrollbereich statt
     horizontalem Scrollen der GANZEN Seite. */
  .compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare-table{min-width:520px}
  .stat .n{font-size:1.5rem}
  .faq-item summary{font-size:.95rem;line-height:1.35}
}

/* Wechselnde Baender: ohne sie liest sich die Startseite auf dem Handy als
   eine einzige 20.000-px-Kolonne - genau die "unklare Struktur". */
.band{background:var(--bg)}

/* Auch bei gleicher Flaechenfarbe muss man auf dem Handy sehen, wo ein Thema
   endet - eine Haarlinie reicht dafuer und stoert das Layout nicht. */
section + section{border-top:1px solid var(--line)}
.cta,.trust-band,.hero-t{border-top:0}

/* Handy: Nummer neben die Ueberschrift statt darueber - das spart pro Karte
   rund 60 px und macht aus vier Bloecken eine lesbare Liste. */
@media(max-width:620px){
  .step{padding:18px 16px;display:grid;grid-template-columns:34px 1fr;
    column-gap:12px;row-gap:6px;align-items:center}
  .step .n{width:34px;height:34px;font-size:.95rem;border-radius:9px;margin:0}
  .step h3{grid-column:2;margin:0;font-size:1.02rem}
  .step p{grid-column:1 / -1;margin:0;font-size:.92rem;line-height:1.55}
  .step:hover{transform:none}
}

/* Auf dem Handy passen drei Vergleichsspalten nicht nebeneinander. Statt sie
   zu quetschen, scrollt die Tabelle - dann muss man das aber auch sehen. */
@media(max-width:640px){
  .compare-wrap{position:relative}
  .compare-wrap::after{content:'Swipe the table sideways →';display:block;
    margin-top:8px;font-size:.78rem;color:var(--muted);text-align:right}
}

/* Staedteseiten auf dem Handy: 72 px Luft vor der Brotkrume und ein zweizeiliger
   Versalien-Kicker haben den Kopf aufgeblaeht - die erste Zeile war Leerraum. */
@media(max-width:640px){
  .city-hero{padding:20px 0 30px}
  .city-hero .badge{display:flex;align-items:flex-start;gap:7px;
    letter-spacing:.08em;font-size:.68rem;line-height:1.4}
  .city-hero .badge .dot{margin-top:.42em;flex:none}
  .city-hero h1{font-size:clamp(1.6rem,7.2vw,2.15rem);line-height:1.15}
  .city-hero .sub{font-size:.98rem;line-height:1.55}
  .breadcrumbs{font-size:.8rem;margin-bottom:10px}
}

/* ==== Hero: zwei Spalten (Rechner links, Posteingang rechts) ============== */
@media(min-width:961px){
  .hero-t-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:44px;align-items:start}
}

/* ---- Marktrechner ------------------------------------------------------- */
.rechner{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:20px 20px 18px;box-shadow:var(--shadow);max-width:34rem;margin-top:24px}
.rechner-kopf{font-weight:600;font-size:1rem;color:var(--ink);margin:0 0 12px}
.rechner-felder{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rechner-felder label{display:block;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.rechner-felder select{width:100%;margin-top:5px;padding:10px 11px;font:inherit;
  font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:9px;text-transform:none;letter-spacing:0;font-weight:400}
.rechner-felder select:focus{outline:2px solid var(--blue);outline-offset:1px}
.rechner-out{min-height:78px;margin:14px 0 4px}
.rechner-zahl{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rechner-zahl strong{font-family:var(--font-display);font-size:2.1rem;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.rechner-zahl span{font-size:.95rem;color:var(--ink);font-weight:500}
.rechner-note,.rechner-leer{font-size:.86rem;line-height:1.5;color:var(--muted);margin:8px 0 0}
.rechner .btn-ink{display:inline-flex;margin-top:12px}
.rechner-fuss{font-size:.76rem;color:var(--muted);margin:10px 0 0}
.mail{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:#fff}
@keyframes mailRein{from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}
@media(max-width:640px){
  .rechner{padding:15px 14px 14px;margin-top:18px}
  .rechner-felder{grid-template-columns:1fr 1fr;gap:8px}
  .rechner-felder label{font-size:.68rem}
  .rechner-felder select{padding:8px 9px;font-size:.9rem}
  .rechner-kopf{font-size:.95rem;margin-bottom:10px}
  .rechner-out{min-height:0;margin:12px 0 2px}
  .rechner-note{font-size:.83rem}
  .rechner-fuss{font-size:.72rem}
  .rechner-zahl strong{font-size:1.8rem}
  .rechner .btn-ink{width:100%;justify-content:center}}

/* ======================================================================
   One-Page-Funnel (25.08.2026)
   Andreas: "der ganze webseiten aufbau ist unklar gestaltet, mache es wie
   ein funnel system wie eine korrekte onepage seite, und baue es sehr hoch
   modern auf" - dazu: weniger Text, klarer Lieferumfang.
   Prinzip: nummerierte Stufen, kurze Karten, grosse Zahlen, viel Ruhe.
   ====================================================================== */
.stufe{padding:76px 0}
.stufe-kopf{max-width:640px;margin:0 0 34px}
.stufe-nr{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  color:var(--blue);margin-bottom:12px;font-variant-numeric:tabular-nums}
.stufe-kopf h2{font-size:clamp(1.6rem,3.1vw,2.35rem);line-height:1.14;
  letter-spacing:-.018em;margin:0 0 10px;color:var(--ink)}
.stufe-kopf p{font-size:1.02rem;line-height:1.55;color:var(--muted);margin:0;max-width:52ch}

/* ---- Lieferumfang: sechs Karten, je hoechstens zwei Zeilen Text --------- */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.karte{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 24px;position:relative;
  transition:border-color .18s ease,transform .18s ease}
.karte:hover{border-color:#c9d4e6;transform:translateY(-2px)}
.karte-nr{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:#9aa6b6;margin-bottom:12px;font-variant-numeric:tabular-nums}
.karte h3{font-size:1.04rem;line-height:1.3;margin:0 0 8px;color:var(--ink);
  font-weight:600;hyphens:none}
.karte p{font-size:.92rem;line-height:1.55;color:var(--muted);margin:0}

/* ---- Ablauf: vier Schritte in einer Reihe ------------------------------ */
.ablauf{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:ab}
.ablauf li{display:flex;gap:13px;align-items:flex-start}
.ab-nr{flex:none;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:.84rem;font-weight:700}
.ablauf strong{display:block;font-size:.98rem;color:var(--ink);margin-bottom:4px}
/* NUR der Text im div - sonst faengt die Regel auch .ab-nr und faerbt die
   Ziffer grau auf schwarzem Grund (unsichtbar). */
.ablauf div span{display:block;font-size:.9rem;line-height:1.5;color:var(--muted)}

/* ---- Zahlenband -------------------------------------------------------- */
.zahlband{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;
  margin:0 0 30px;padding:26px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.zahlband div{text-align:center}
.zahlband b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zahlband span{display:block;margin-top:7px;font-size:.85rem;line-height:1.4;color:var(--muted)}
.zahlband em{display:block;font-style:normal;font-size:.76rem;color:#9aa6b6;margin-top:2px}
.zahlband-6{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.zahlband-6{grid-template-columns:repeat(2,1fr)}}

/* ---- Spezifikation als Liste statt Tabelle: haelt auf dem Handy ------- */
.spec-liste{margin:0;padding:0}
.spec-liste > div{display:grid;grid-template-columns:210px 1fr;gap:20px;
  padding:15px 0;border-top:1px solid var(--line)}
.spec-liste > div:last-child{border-bottom:1px solid var(--line)}
.spec-liste dt{font-weight:600;font-size:.94rem;color:var(--ink);margin:0}
.spec-liste dd{margin:0;font-size:.94rem;line-height:1.55;color:var(--muted)}

/* ---- Preis ------------------------------------------------------------- */
/* Zwei Spalten: links die Zahl und der Knopf, rechts was drin ist. Als
   schmale Karte liess der Abschnitt die halbe Seite leer. */
.preis-karte{background:var(--karte);border:1px solid var(--line);border-radius:18px;
  padding:32px 34px;max-width:900px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:260px 1fr;gap:38px;align-items:start}
.preis-links{border-right:1px solid var(--line);padding-right:34px}
.preis-liste{margin:0}
@media(max-width:760px){
  .preis-karte{grid-template-columns:1fr;gap:22px;padding:22px 20px}
  .preis-links{border-right:0;border-bottom:1px solid var(--line);
    padding-right:0;padding-bottom:20px}
}
.preis-zahl{font-family:var(--font-display);font-weight:600;font-size:3.2rem;
  line-height:1;color:var(--ink);letter-spacing:-.03em}
.preis-zahl span{font-size:1.05rem;font-weight:500;color:var(--muted);letter-spacing:0}
.preis-sub{margin:10px 0 20px;font-size:.88rem;color:var(--muted)}
.preis-karte .ticks{margin:0 0 22px}
.btn-block{display:flex;width:100%;justify-content:center}

/* ---- Verweisband (Branchen/Staedte) ------------------------------------ */
.links-band{padding:56px 0 68px;border-top:1px solid var(--line)}
.links-titel{font-size:1.02rem;font-weight:600;color:var(--ink);margin:0 0 12px}
.links-band .chips{margin-bottom:26px}

/* ---- Sanftes Einblenden beim Scrollen ---------------------------------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.ist-da{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s ease}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.ist-da{opacity:1;transform:none;transition:none}
}

@media(max-width:960px){
  .karten{grid-template-columns:repeat(2,1fr)}
  .ablauf{grid-template-columns:repeat(2,1fr);gap:20px}
  .zahlband{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media(max-width:640px){
  .stufe{padding:40px 0}
  .stufe-kopf{margin-bottom:22px}
  .stufe-kopf h2{font-size:1.42rem}
  .stufe-kopf p{font-size:.95rem}
  .karten{grid-template-columns:1fr;gap:10px}
  .karte{padding:16px 16px 18px;border-radius:13px}
  .karte-nr{margin-bottom:8px}
  .karte h3{font-size:1rem}
  .ablauf{grid-template-columns:1fr;gap:14px}
  .zahlband{padding:20px 0;margin-bottom:22px}
  .spec-liste > div{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .spec-liste dd{font-size:.9rem}
  .preis-karte{padding:22px 18px}
  .preis-zahl{font-size:2.6rem}
  .links-band{padding:34px 0 44px}
}

/* Klassen, die im Markup schon benutzt wurden, aber nie eine Regel hatten -
   gefunden beim Abgleich Markup gegen Stylesheet (25.08.2026). Ohne sie blieb
   z. B. jeder <p class="muted"> in voller Textfarbe stehen. */
.muted{color:var(--muted)}
.prose p{margin:0 0 14px;line-height:1.65;color:var(--muted)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}
.faq{display:flex;flex-direction:column;gap:8px}

/* ======================================================================
   Warme Temperatur (Andreas 25.08.2026, Variante C)
   Der Aufbau bleibt, nur die Flaechen werden Papier statt Grau und die
   Zahlen bekommen einen warmen Zweitakzent. Blau bleibt dem Handeln
   vorbehalten - Knopf, Link, nichts sonst.
   ====================================================================== */
body{background:var(--papier)}
.trust-band{background:var(--karte)}

/* Warme Akzente: Stufennummern, Kartennummern, die Unterstreichung im Titel */
.stufe-nr{color:var(--warm)}
.karte-nr{color:var(--warm-2)}
.hero-t-title .u{box-shadow:inset 0 -.1em 0 var(--blue)}
.city-hero h1 .accent{box-shadow:inset 0 -.1em 0 var(--blue)}
.zahlband b{color:var(--ink)}
.zahlband em{color:var(--warm-2)}
.karte:hover{border-color:#C3CEE4}
.step:hover{border-color:#C3CEE4}

/* Der dunkle Kopf traegt jetzt dieselbe warme Tinte wie der Rest. */
.site-header{background:var(--navy)}
.cta{background:var(--navy)}

/* ======================================================================
   Unterseiten auf dieselbe Sprache heben (26.08.2026)
   Andreas: "du hast die optik in den unterseiten nicht angepasst".
   Statt acht Erzeuger umzuschreiben, bekommen die ALTEN Bausteine hier das
   Aussehen der neuen - damit ziehen alle 103.281 Seiten auf einmal nach.
   ====================================================================== */

/* Abschnittskopf: linksbuendig wie die Stufen, gleiche Groessen. Zentriert
   wirkte er neben den neuen Abschnitten wie von einer anderen Seite. */
.section-head{max-width:640px;margin:0 0 32px;text-align:left}
.section-head h2{font-size:clamp(1.55rem,3vw,2.25rem);line-height:1.15;
  letter-spacing:-.018em;margin:0 0 10px;color:var(--ink)}
.section-head p{font-size:1.02rem;line-height:1.55;color:var(--muted);max-width:52ch}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--warm);
  margin-bottom:12px}

/* Brotkrume: stand global auf Weiss - auf hellen Seiten also unsichtbar.
   Genau das war auf der Pillar-Seite zu sehen: "US ›" und dann nichts. */
.breadcrumbs{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--ink);text-decoration:underline}
.breadcrumbs span{color:var(--ink)}

/* Die alten Schritt-Karten sehen jetzt aus wie die neuen Lieferumfang-Karten. */
.step{background:var(--karte);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 24px;box-shadow:none}
.step .n{width:26px;height:26px;border-radius:8px;font-size:.8rem;
  background:var(--ink);margin-bottom:12px}
.step h3{font-size:1.04rem;line-height:1.3;margin:0 0 8px;font-weight:600}
.step p{font-size:.92rem;line-height:1.55}

/* Fliesstext: Lesebreite und Rhythmus wie in den Stufen. */
.prose{max-width:68ch}
.prose p{font-size:1rem;line-height:1.65;margin:0 0 14px}

/* Seitenkoepfe der Unterseiten: dieselbe Hoehe und Temperatur wie der Hero
   der Startseite - vorher trug .hero noch das dunkle Titelbild von frueher. */
.hero{background:var(--bg);color:var(--ink);
  padding:44px 0 40px;border-bottom:1px solid var(--line)}
.hero h1,.hero h2{color:var(--ink)}
.hero .sub,.hero p{color:var(--muted)}
.tool-hero{background:var(--bg);color:var(--ink);padding:44px 0 40px;
  border-bottom:1px solid var(--line)}
.tool-hero h1{color:var(--ink)}
.tool-hero p{color:var(--muted)}

@media(max-width:640px){
  .section-head{margin-bottom:22px}
  .section-head h2{font-size:1.4rem}
  .section-head p{font-size:.95rem}
  .hero,.tool-hero{padding:26px 0 30px}
}
.hero-t-copy{max-width:none}

/* ======================================================================
   Produktansichten (27.08.2026)
   Andreas: "man sieht nicht wofuer das wirklich ist und es ist nicht
   professionell". Die Startseite hatte NULL Bilder - bei einer Software,
   die man nicht anfassen kann, sieht der Besucher damit nirgends, was er
   kauft. Zwei echte Ansichten aus der Anwendung schliessen die Luecke.
   ====================================================================== */
.produkt{padding:10px 0 76px;background:var(--bg);border-bottom:1px solid var(--line)}
.produkt .container{display:block}
.produkt-bild{margin:0}
.produkt-bild img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--line);background:var(--karte);
  box-shadow:0 1px 2px rgba(32,36,43,.04),0 18px 40px -22px rgba(32,36,43,.28)}
.produkt-bild figcaption{margin-top:12px;font-size:.9rem;line-height:1.5;color:var(--muted)}

/* Typografie mit mehr Kontrast: die Ueberschrift traegt, der Text tritt
   zurueck. Vorher lagen beide zu nah beieinander und alles wirkte flach. */
.hero-t-title{font-size:clamp(2.4rem,4.8vw,3.9rem);line-height:1.04;letter-spacing:-.025em}
.hero-t-lead{font-size:1.12rem;line-height:1.62;max-width:46rem;color:#49525F}

@media(max-width:860px){
  .produkt{padding:0 0 40px}
  .produkt .container{grid-template-columns:1fr;gap:22px}
  .produkt-bild figcaption{font-size:.86rem}
}

/* Kopf ueber den Produktansichten - ohne ihn stehen zwei Bilder ohne Anlass da. */
.produkt-kopf{grid-column:1 / -1;max-width:640px;margin:0 0 8px}
.produkt-kopf h2{font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.15;
  letter-spacing:-.018em;margin:0 0 10px;color:var(--ink)}
.produkt-kopf p{font-size:1.02rem;line-height:1.55;color:var(--muted);margin:0}
.produkt{padding:46px 0 76px}
@media(max-width:860px){.produkt{padding:26px 0 40px}.produkt-kopf h2{font-size:1.35rem}}

/* ======================================================================
   Hero im Stil moderner B2B-Software (27.08.2026)
   Vorbild war leadfeeder.com (Andreas). Uebernommen wurden die Prinzipien,
   nicht die Bausteine: grosse zentrierte Aussage, Schreibmaschinenschrift
   fuer Beschriftungen, das Produkt gross statt klein daneben.
   NICHT uebernommen: Kundenlogos, Bewertungssterne, Erfolgsquoten - die
   haben wir nicht, und leere Nachbauten wirken schwaecher als gar keine.
   Unser Beweis ist der Rechner: der Besucher sieht SEINE Zahl.
   ====================================================================== */
.hero-t{padding:64px 0 0;text-align:center;overflow:hidden}
.hero-t .container{max-width:1120px}
.hero-t-kicker{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;
  text-transform:none;color:var(--warm);padding-top:0;margin:0 0 20px}
.hero-t-kicker::before{display:none}
.hero-t-title{font-size:clamp(2.5rem,5.4vw,4.2rem);line-height:1.04;
  letter-spacing:-.032em;font-weight:700;margin:0 auto 22px;max-width:22ch;
  text-wrap:balance}
.hero-t-lead{font-family:var(--mono);font-size:.98rem;line-height:1.75;
  color:#4B5563;margin:0 auto 30px;max-width:60ch}
.hero-t-lead strong{font-weight:600;color:var(--ink)}
.hero-t-cta{justify-content:center;gap:12px;margin-bottom:14px}
.hero-t-fuss{font-family:var(--mono);font-size:.78rem;color:#79828F;margin:0 0 44px}

/* Das Produkt fuellt die Breite - vorher stand es klein neben dem Text und
   war damit das Gegenteil eines Beweises. Unten laeuft es weich aus, damit
   der Blick weiterwandert statt an einer Kante zu stoppen. */
.hero-bild{position:relative;margin:0 auto;max-width:1060px}
.hero-bild img{display:block;width:100%;height:auto;border-radius:16px 16px 0 0;
  border:1px solid var(--line);border-bottom:0;background:var(--karte);
  box-shadow:0 -1px 0 rgba(32,36,43,.03),0 -30px 60px -30px rgba(32,36,43,.25)}
.hero-bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(180deg,rgba(245,241,234,0),var(--bg));pointer-events:none}

/* Der Rechner bekommt einen eigenen Abschnitt statt im Hero zu kleben. */
.rechnerband{background:var(--papier);padding:70px 0 76px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rechner-kopf-band{max-width:640px;margin:0 0 30px}
.rechner-kopf-band h2{font-size:clamp(1.6rem,3.1vw,2.35rem);line-height:1.14;
  letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.rechner-kopf-band p{font-size:1.02rem;line-height:1.55;color:var(--muted);margin:0}
.mono-label{display:block;font-family:var(--mono);font-size:.76rem;
  color:var(--warm);margin-bottom:12px}
.stufe-nr,.karte-nr{text-transform:none;letter-spacing:.02em}

@media(max-width:860px){
  .hero-t{padding:34px 0 0}
  .hero-t-title{font-size:clamp(1.9rem,8vw,2.6rem);max-width:none}
  .hero-t-lead{font-size:.92rem;line-height:1.65}
  .hero-t-cta{flex-direction:column}
  .hero-t-cta .btn-ink,.hero-t-cta .btn-line{width:100%;justify-content:center}
  .hero-t-fuss{margin-bottom:28px;font-size:.72rem}
  .hero-bild::after{height:50px}
  .rechnerband{padding:36px 0 40px}
}

/* Nur noch eine Ansicht in diesem Abschnitt: sie darf die Breite nutzen. */
.produkt-bild{max-width:900px;margin:26px 0 0}
.produkt-bild figcaption{max-width:64ch}
/* Der Rechner steht seit dem 28.08.2026 allein in seinem Abschnitt - der
   Beispiel-Posteingang daneben ist raus (Andreas: "nimm das wieder raus").
   Text links, Rechner rechts: so fuellt der Abschnitt die Breite, ohne dass
   ein einzelner Kasten verloren wirkt. */
.rechnerband .container{display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:center;max-width:1080px}
.rechner-kopf-band{margin:0}
.rechner-reihe .rechner{margin:0;max-width:none}
@media(max-width:860px){
  .rechnerband .container{grid-template-columns:1fr;gap:20px}
}

/* Absprungpunkte nach den Hauptabschnitten: wer hier ueberzeugt ist, muss
   nicht bis zum Seitenende scrollen (28.08.2026). Bewusst als Textzeile und
   nicht als weiterer Knopf - drei zusaetzliche Knoepfe haetten die Seite
   marktschreierisch gemacht. */
.stufe-cta{margin:30px 0 0;font-size:.98rem}
.stufe-cta a{font-weight:600;color:var(--blue);
  box-shadow:inset 0 -1px 0 rgba(47,107,255,.35)}
.stufe-cta a:hover{text-decoration:none;box-shadow:inset 0 -2px 0 var(--blue)}
.stufe-cta span{font-family:var(--mono);font-size:.84rem;color:var(--muted)}
@media(max-width:640px){
  .stufe-cta{margin-top:20px;font-size:.94rem}
  .stufe-cta span{display:block;margin-top:4px;font-size:.78rem}
}

/* ==== Sprungleiste: macht aus der langen Seite eine begehbare One-Page ====
   Andreas (28.08.2026): "die startseite soll mehr wie onepage aussehen mit
   funnels". Sie klebt unter dem Kopf, zeigt die Strecke und laesst den
   Besucher an jeder Stelle einsteigen - statt scrollen zu muessen, bis er
   findet, was ihn interessiert. */
.sprungleiste{position:sticky;top:0;z-index:18;background:rgba(255,252,247,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line)}
.sprungleiste .container{display:flex;align-items:center;gap:26px;
  height:52px;overflow-x:auto;scrollbar-width:none}
.sprungleiste .container::-webkit-scrollbar{display:none}
.sprungleiste a{font-family:var(--mono);font-size:.8rem;color:var(--muted);
  white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.sprungleiste a:hover{color:var(--ink);text-decoration:none;
  border-bottom-color:var(--warm)}
.sprung-cta{margin-left:auto;color:var(--blue)!important;font-weight:600}
.sprung-cta:hover{border-bottom-color:var(--blue)!important}

/* Der Kopf ist selbst klebrig - die Leiste muss darunter einrasten, sonst
   verdeckt eines das andere. */
.site-header{z-index:20}
html{scroll-padding-top:120px}

@media(max-width:640px){
  .sprungleiste .container{gap:18px;height:46px}
  .sprungleiste a{font-size:.74rem}
  .sprung-cta{margin-left:14px}
  html{scroll-padding-top:104px}
}

/* ======================================================================
   Der eine dunkle Block (29.08.2026)
   Die Seite war ueber 7.000 px hell auf hell - ausser Kopf und Fuss gab es
   keinen einzigen Anker. Und der staerkste Inhalt, die 15 Millionen Firmen,
   stand als duennes Band mitten in einem Abschnitt: optisch das Schwaechste.
   Beides loest derselbe Griff. Die Zahlen bekommen die einzige dunkle Flaeche
   der Seite und teilen sie damit in zwei Haelften.
   ====================================================================== */
.zahlen-dunkel{background:var(--navy);color:#EEF1F6;padding:86px 0 92px}
.zahlen-dunkel .stufe-kopf{max-width:640px;margin:0 0 52px}
.zahlen-dunkel .stufe-nr{color:var(--warm-2)}
.zahlen-dunkel h2{color:#FFFFFF}
.zahlen-dunkel .stufe-kopf p{color:#98A2B3}

.zahlen-gross{display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.zahlen-gross b{display:block;font-size:clamp(3.4rem,7vw,5.6rem);line-height:.92;
  font-weight:700;letter-spacing:-.04em;color:#FFFFFF;font-variant-numeric:tabular-nums}
/* Die Einheit traegt nicht dieselbe Wucht wie die Zahl - sonst liest man
   "M+" als Teil des Werts statt als Massstab. */
.zahlen-gross b em{font-style:normal;font-size:.44em;letter-spacing:-.01em;
  color:var(--warm-2);margin-left:.04em}
.zahlen-gross span{display:block;margin:16px 0 10px;font-family:var(--mono);
  font-size:.82rem;color:#D8DEE9}
.zahlen-gross p{margin:0;font-size:.92rem;line-height:1.6;color:#98A2B3;max-width:34ch}

@media(max-width:860px){
  .zahlen-dunkel{padding:44px 0 48px}
  .zahlen-dunkel .stufe-kopf{margin-bottom:32px}
  .zahlen-gross{grid-template-columns:1fr;gap:34px}
  .zahlen-gross b{font-size:3.2rem}
}

/* Zwoelf Fragen untereinander sind eine Wand aus gleichen Balken. Zweispaltig
   liest man sie als Sammlung statt als Liste - und die Seite wird kuerzer,
   ohne dass Inhalt verschwindet. */
@media(min-width:861px){
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;align-content:start}
  .faq-item{margin:0}
}

/* Die Karten trugen bis heute eine Nummer 01-06 - sechs parallele Dinge sind
   aber keine Reihenfolge. Statt der Ziffer haelt jetzt eine Haarlinie oben
   die Karte; das gliedert, ohne etwas Falsches zu behaupten. */
.karte{padding-top:20px;position:relative}
.karte::before{content:"";position:absolute;top:0;left:22px;right:22px;height:2px;
  background:var(--warm);opacity:.5;border-radius:0 0 2px 2px}
.karte:hover::before{opacity:1}
.karte h3{margin-top:2px}

/* ==== Der Takt (29.08.2026) ==============================================
   Das Erkennungszeichen der Seite. Das Produkt sendet alle drei Minuten,
   rund um die Uhr - es laeuft, waehrend der Kunde schlaeft. Genau das zeigt
   dieser Punkt neben der 480: kein Zierrat, sondern das, was das Programm
   in diesem Augenblick tut. Ein Puls je drei Sekunden, stellvertretend fuer
   die drei Minuten.
   ======================================================================= */
.takt{display:inline-block;width:.11em;height:.11em;border-radius:50%;
  background:var(--blue-hell);vertical-align:.62em;margin-left:.16em;
  box-shadow:0 0 0 0 rgba(127,160,255,.55);animation:taktPuls 3s ease-out infinite}
/* Der Ring waechst auf das Dreifache des Punkts - bei einer 5,6-rem-Zahl
   sind 0,9 em ein Teller, nicht ein Puls. */
@keyframes taktPuls{
  0%   {box-shadow:0 0 0 0 rgba(127,160,255,.45);opacity:1}
  70%  {box-shadow:0 0 0 .16em rgba(127,160,255,0);opacity:.8}
  100% {box-shadow:0 0 0 0 rgba(127,160,255,0);opacity:1}
}
/* Wer weniger Bewegung eingestellt hat, sieht den Punkt ruhig stehen - die
   Aussage bleibt, die Bewegung faellt weg. */
@media(prefers-reduced-motion:reduce){
  .takt{animation:none;box-shadow:0 0 0 .06em rgba(127,160,255,.3)}
}

/* ======================================================================
   Handwerk (29.08.2026) — Andreas: "als ob es eine webseite ist die
   1.000.000 gekostet hat". Was teure Seiten von guten unterscheidet, sieht
   man selten einzeln; man spuert es zusammen.
   ====================================================================== */

/* 1. Eine eigene Beschleunigungskurve statt der Browser-Vorgabe. Alles auf
      der Seite bewegt sich nach derselben Physik: schnell los, weich aus. */
:root{
  --kurve:cubic-bezier(.22,.61,.36,1);
  --kurve-weich:cubic-bezier(.4,0,.2,1);
}
a,button,.btn,.chip,.karte,.step,.faq-item,.preis-karte,.sprungleiste a{
  transition-timing-function:var(--kurve)}

/* 2. Der Hero tritt auf, statt einfach dazustehen: die Teile kommen in der
      Reihenfolge, in der man liest. Nur beim ersten Anblick, nur oberhalb
      der Falte - alles Weitere erledigt der Scroll-Beobachter. */
@media(prefers-reduced-motion:no-preference){
  .hero-t-kicker,.hero-t-title,.hero-t-lead,.hero-t-cta,.hero-t-fuss,.hero-bild{
    animation:heroRein .62s var(--kurve) both}
  .hero-t-title{animation-delay:.06s}
  .hero-t-lead {animation-delay:.13s}
  .hero-t-cta  {animation-delay:.20s}
  .hero-t-fuss {animation-delay:.26s}
  .hero-bild   {animation-delay:.32s;animation-duration:.8s}
}
@keyframes heroRein{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}

/* 3. Eine Lichtquelle fuer die ganze Seite: von oben. Schatten, die aus
      verschiedenen Richtungen fallen, lassen eine Seite billig wirken -
      auch wenn niemand sagen koennte, warum. */
.karte,.rechner,.preis-karte,.step,.guide-card{
  box-shadow:0 1px 2px rgba(13,20,32,.04),0 12px 24px -16px rgba(13,20,32,.16)}
.karte:hover,.step:hover,.guide-card:hover{
  box-shadow:0 1px 2px rgba(13,20,32,.05),0 18px 34px -18px rgba(13,20,32,.22)}

/* 4. Auswahl, Fokus und Bildlauf tragen die Marke - nicht die des Browsers. */
::selection{background:rgba(43,91,255,.18);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.btn-ink:focus-visible,.btn-primary:focus-visible{outline-offset:4px}

/* 5. (Der optische Randausgleich, der hier stand, war falsch: er gilt fuer
      linksbuendigen Satz. Bei zentrierter Ueberschrift schiebt er sie aus
      der Mitte - im Bild sofort zu sehen.) */

/* 6. Zahlen in der Spezifikation stehen untereinander, nicht nebeneinander
      verrutscht. */
.spec-liste dd,.zahlband b,.rechner-zahl strong{font-variant-numeric:tabular-nums lining-nums}

/* Der Abschnitt, in dem man gerade steht, ist in der Sprungleiste markiert. */
.sprungleiste a.ist-hier{color:var(--ink);border-bottom-color:var(--blue)}

/* Zahlenspalten in den Marktbtabellen rechtsbuendig und auf gleicher Breite -
   sonst tanzen die Tausenderstellen. */
.spec-table th.zahl,.spec-table td.zahl{text-align:right;
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* ======================================================================
   Schaerfere Typografie und Rahmen (29.08.2026)
   Andreas gab onepage.io als Vorbild. Uebernommen sind die Prinzipien:
   deutlich fettere und engere Ueberschriften, ein kursives Wort als
   Akzent statt Farbe, reines Weiss als Grund, das Produkt in einem
   Rahmen statt frei schwebend, groessere Abstaende.
   NICHT uebernommen: die kursive Serifenschrift im Fliesstext - Serifen
   wurden am 25.08. abgelehnt. Der Akzent kommt aus der eigenen Grotesk.
   ====================================================================== */
:root{--papier:#FFFFFF}
body{background:#FFFFFF}

/* Ueberschriften: schwerer, enger, tiefer. Das allein traegt die halbe
   Anmutung - unsere standen auf 700 und -.025 em, das wirkt daneben brav. */
.hero-t-title{font-weight:800;letter-spacing:-.042em;line-height:1.0;
  color:#08101C;font-size:clamp(2.6rem,5.8vw,4.6rem)}
.hero-t-title em{font-style:italic;font-weight:600;letter-spacing:-.03em}
.stufe-kopf h2,.section-head h2,.rechner-kopf-band h2,.produkt-kopf h2{
  font-weight:800;letter-spacing:-.032em;color:#08101C}
.zahlen-dunkel h2{font-weight:800;letter-spacing:-.032em}
h1,h2{font-weight:800}

/* Die Marke statt einer Textzeile: eine Pille traegt den Satz und macht
   sichtbar, dass oben etwas Eigenes beginnt. */
.hero-pille{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;
  padding:8px 16px 8px 13px;border-radius:99px;background:#EEF2FF;
  color:var(--blue-dark);font-family:var(--mono);font-size:.78rem;
  border:1px solid #DCE4FF}
.pille-punkt{width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 3px rgba(43,91,255,.16);flex:none}

/* Das Produkt bekommt einen Rahmen. Frei schwebend sieht ein Screenshot aus
   wie ein Bild; im Fenster sieht er aus wie ein Programm. */
.rahmen{border-radius:14px 14px 0 0;overflow:hidden;background:#0D1420;
  padding:0 0 0;box-shadow:0 -1px 0 rgba(13,20,32,.06),
  0 -40px 70px -40px rgba(13,20,32,.30)}
.rahmen-leiste{display:flex;align-items:center;gap:7px;padding:11px 16px;
  background:#0D1420}
.rahmen-leiste span{width:10px;height:10px;border-radius:50%;background:#39424F}
.rahmen-leiste span:first-child{background:#4A5462}
.rahmen-leiste b{margin-left:14px;font-family:var(--mono);font-size:.74rem;
  font-weight:400;color:#7C8798}
.rahmen picture img,.rahmen img{border-radius:0;border:0;box-shadow:none;
  display:block;width:100%;height:auto}
.hero-bild img{border-radius:0}

/* Mehr Luft. Enge Abstaende lassen eine Seite gedraengt wirken, egal wie
   gut die einzelnen Teile sind. */
.stufe{padding:104px 0}
.rechnerband{padding:96px 0 100px}
.produkt{padding:64px 0 104px}
.zahlen-dunkel{padding:104px 0 110px}

@media(max-width:860px){
  .hero-t-title{font-size:clamp(2rem,8.4vw,2.8rem);letter-spacing:-.035em}
  .hero-pille{font-size:.7rem;padding:7px 13px 7px 11px;margin-bottom:18px}
  .rahmen-leiste{padding:8px 12px}
  .rahmen-leiste b{display:none}
  .stufe{padding:48px 0}
  .rechnerband{padding:44px 0 48px}
  .produkt{padding:30px 0 48px}
  .zahlen-dunkel{padding:52px 0 56px}
}

/* Der Hero steht auf Weiss, nicht auf Grau: die Ueberschrift traegt dann
   allein, ohne dass eine Flaeche mit ihr konkurriert. */
.hero-t{background:#FFFFFF;border-bottom:0}
.hero-bild::after{background:linear-gradient(180deg,rgba(255,255,255,0),#FFFFFF)}

/* Der Einleitungssatz laeuft wieder in der Grotesk. Sechs Zeilen
   Schreibmaschinenschrift sind ein Datenblatt, kein Versprechen - die
   Monospace bleibt den Beschriftungen und Zahlen vorbehalten. */
.hero-t-lead{font-family:var(--font-body);font-size:1.16rem;line-height:1.6;
  color:#4A5568;max-width:44rem}
.hero-t-lead strong{color:#08101C;font-weight:600}
@media(max-width:860px){.hero-t-lead{font-size:1rem;line-height:1.55}}

/* Vollstaendige Ortsliste auf der Bundesstaat-Nabe (29.08.2026).
   Die Ueberschrift versprach "1285 cities in our index" und die Seite
   verlinkte 24. 94 % der Stadtseiten hatten dadurch keinen internen Eingang
   und hingen allein an der Sitemap. Mehrspaltig gesetzt, damit auch 1.285
   Ortsnamen noch ueberschaubar bleiben. */
.ortsliste{columns:220px;column-gap:26px;margin-top:18px;
  font-size:.88rem;line-height:1.85}
.ortsliste a{display:block;color:var(--muted);text-decoration:none;
  break-inside:avoid;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ortsliste a:hover{color:var(--blue);text-decoration:underline}
@media (max-width:640px){.ortsliste{columns:150px;font-size:.84rem}}

/* Zahlentabelle auf den Branchen-Naben (29.08.2026). Die Klasse gab es nicht -
   in diesem Projekt sind schon zweimal Kacheln als nackte Textzeilen
   erschienen, weil eine Klasse in der Vorlage stand und im Stylesheet fehlte. */
.markttabelle{width:100%;border-collapse:collapse;margin-top:18px;font-size:.94rem}
.markttabelle th,.markttabelle td{padding:10px 12px;border-bottom:1px solid var(--line);
  text-align:left}
.markttabelle th{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.markttabelle .num{text-align:right;font-variant-numeric:tabular-nums}
.markttabelle tbody tr:hover{background:#F7F9FF}