/* ==========================================================================
   Kampagnen-Cockpit — Marketingseite

   Aufbau und Typografie folgen dem hellooh-Designsystem (Inter 900, Mono-
   Eyebrow, Pillen, grosse Flaechen). Die Farbwelt ist die des Cockpits:
   dieselben Token wie im Portal (frontend/app/globals.css), damit die Seite
   und das Produkt dahinter zusammengehoeren.

   Die Seite kennt bewusst nur hell. Ein Marketingauftritt legt sich fest;
   halb invertierte Flaechenbaender waeren schlechter als eine Entscheidung.
   ========================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('schriften/inter-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('schriften/inter-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;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('schriften/jetbrains-mono-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;}
/* Metrisch angeglichener Ersatz — kein Sprung beim Schriftwechsel. */
@font-face{font-family:'Inter Ersatz';src:local('Helvetica Neue'),local('Arial'),local('Segoe UI');
  ascent-override:90.20%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.40%;}

:root{
  /* Farbe — aus dem Portal uebernommen */
  --tinte:#0D1117;
  --tinte-tief:#05080B;
  --papier:#F4F6F8;
  --weiss:#FFFFFF;
  --signal:#1F5FD6;          /* Akzent des Cockpits */
  --signal-tief:#164AAB;
  --signal-flaeche:#E9F0FD;
  --leucht:#59C493;          /* „geliefert" — der Gut-Ton des Dashboards */
  --text-2:#59636F;
  --text-3:#8B95A1;
  --linie:rgba(13,17,23,.14);
  --linie-stark:rgba(13,17,23,.26);
  --auf-dunkel:rgba(244,246,248,.78);
  --auf-dunkel-leise:rgba(244,246,248,.52);
  --auf-dunkel-linie:rgba(244,246,248,.16);

  /* Mass und Rhythmus */
  --schrift:'Inter','Inter Ersatz',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --huelle:1240px;
  --rinne:clamp(20px,5vw,56px);
  --band:clamp(72px,9vw,140px);
  --rund:24px;
  --pille:99px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--schrift);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:6px}
::selection{background:var(--leucht);color:var(--tinte)}

.huelle{width:100%;max-width:var(--huelle);margin-inline:auto;padding-inline:var(--rinne)}
section[id]{scroll-margin-top:96px}
.band{padding-block:var(--band)}
.dunkel{background:var(--tinte);color:var(--papier)}
.blau{background:var(--signal);color:var(--weiss)}

/* ── Typografie ──────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.035em;text-wrap:balance}
.riese{font-size:clamp(52px,10.5vw,140px);line-height:.87;letter-spacing:-.045em}
.gross{font-size:clamp(38px,6.5vw,86px);line-height:.92}
.mittel{font-size:clamp(28px,4.2vw,48px);line-height:1.02}
.klein{font-size:21px;line-height:1.25;letter-spacing:-.02em}
.vorzeile{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);
  display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;
}
.dunkel .vorzeile,.blau .vorzeile{color:var(--auf-dunkel-leise)}
.vorzeile::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--leucht);flex:none}
.blau .vorzeile::before{background:var(--weiss)}
.lead{font-size:clamp(18px,2.1vw,23px);line-height:1.5;color:var(--text-2);max-width:46ch;margin:28px 0 0}
.dunkel .lead,.blau .lead{color:var(--auf-dunkel)}
p{margin:0}
.zahl{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── Knoepfe ─────────────────────────────────────────────────────────────── */
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.knopf{
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 30px;border-radius:var(--pille);border:2px solid transparent;
  font-size:16px;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:transform .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);
}
.knopf:hover{transform:translateY(-2px)}
.knopf--voll{background:var(--tinte);color:var(--papier)}
.knopf--voll:hover{background:#000}
.knopf--rand{border-color:var(--linie-stark);color:var(--tinte)}
.knopf--rand:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.dunkel .knopf--voll{background:var(--leucht);color:var(--tinte)}
.dunkel .knopf--voll:hover{background:#7ad6ac}
.dunkel .knopf--rand{border-color:var(--auf-dunkel-linie);color:var(--papier)}
.dunkel .knopf--rand:hover{background:var(--papier);color:var(--tinte);border-color:var(--papier)}
.knopf svg{flex:none}

/* ── Kopfleiste ──────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:100;background:rgba(244,246,248,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
.marke{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:17px;text-decoration:none;white-space:nowrap}
.marke svg{width:30px;height:30px}
.kopf__menue{display:none;gap:30px;font-size:15px;font-weight:600;color:var(--text-2)}
.kopf__menue a{text-decoration:none}
.kopf__menue a:hover{color:var(--tinte)}
.kopf .knopf{padding:11px 22px;font-size:15px;white-space:nowrap}
@media (max-width:520px){
  .kopf__innen{height:64px}
  .marke{font-size:15px;gap:9px}
  .marke svg{width:26px;height:26px}
  .kopf .knopf{padding:10px 18px;font-size:14px}
}
@media (min-width:940px){.kopf__menue{display:flex}}

/* ── Bühne ───────────────────────────────────────────────────────────────── */
.buehne{padding-block:clamp(56px,9vw,112px) 0}
.buehne .riese span{display:block}
.buehne .riese .aus{color:var(--signal)}
.buehne__fuss{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:52px;padding-top:24px;
  border-top:1px solid var(--linie);font-size:14px;color:var(--text-3);
}
.buehne__fuss b{color:var(--tinte);font-weight:700}

/* ── Produktbild (reine Zeichnung, keine echten Kundendaten) ─────────────── */
.schau{margin-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px)}
.karte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  box-shadow:0 24px 64px rgba(13,17,23,.10);overflow:hidden;
}
.karte__kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;padding:22px 26px;border-bottom:1px solid var(--linie)}
.karte__titel{font-weight:800;letter-spacing:-.02em;font-size:18px}
.marke__meta,.karte__meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.plakette{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--pille);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:#E6F4ED;color:#17754C}
.plakette::before{content:"";width:6px;height:6px;border-radius:50%;background:#17754C}
.karte__leib{display:grid;gap:0}
@media (min-width:860px){.karte__leib{grid-template-columns:1fr 268px}}
.diagramm{padding:26px 26px 18px}
.werte{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linie);border-top:1px solid var(--linie)}
@media (min-width:860px){.werte{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--linie)}}
.wert{background:var(--weiss);padding:20px 24px}
.wert__name{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.wert__zahl{font-size:30px;font-weight:900;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:5px}
.wert__zahl.gut{color:#17754C}
.wert__zahl--wort{font-size:22px}
.wert__fuss{font-size:13px;color:var(--text-2);margin-top:2px}
.diagramm svg{display:block;width:100%;height:auto}
.diagramm svg text{font-family:var(--mono);font-size:10.5px}
.diagramm .stand{font-weight:500}
@media (max-width:760px){
  /* Die Zeichnung wird auf halbe Breite skaliert — die Beschriftung mit ihr.
     Deshalb hier groessere Einheiten und weniger davon. */
  .diagramm svg text{font-size:19px}
  .diagramm .achse--x text:not(:first-child):not(:last-child),
  .diagramm .anmerkung{display:none}
}
.hinweiszeile{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);text-align:center}

/* ── Zahlenband ──────────────────────────────────────────────────────────── */
.korridor{display:grid;gap:1px;background:var(--auf-dunkel-linie);margin-top:clamp(44px,6vw,72px);border-radius:16px;overflow:hidden}
@media (min-width:760px){.korridor{grid-template-columns:repeat(3,1fr)}}
.korridor__zelle{background:var(--tinte);padding:34px 28px}
.korridor__zahl{font-size:clamp(50px,7vw,82px);font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.korridor__zelle:nth-child(2) .korridor__zahl{color:var(--leucht)}
.korridor__name{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--auf-dunkel-leise);margin-top:14px}
.korridor__text{font-size:15px;color:var(--auf-dunkel);margin-top:10px;max-width:30ch}

/* ── Kacheln ─────────────────────────────────────────────────────────────── */
.raster{display:grid;gap:16px;margin-top:clamp(44px,6vw,72px)}
@media (min-width:700px){.raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.raster{grid-template-columns:repeat(3,1fr)}}
.kachel{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);
  padding:32px 30px 34px;transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.kachel:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,17,23,.10)}
.kachel__nr{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-3)}
.kachel h3{font-size:23px;line-height:1.15;margin:16px 0 12px;letter-spacing:-.03em}
.kachel p{color:var(--text-2);font-size:16px;line-height:1.6}

/* ── Schritte ────────────────────────────────────────────────────────────── */
.schritte{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--rund);overflow:hidden;margin-top:clamp(44px,6vw,72px)}
@media (min-width:820px){.schritte{grid-template-columns:repeat(3,1fr)}}
.schritt{background:var(--papier);padding:38px 32px 42px}
.schritt__nr{font-size:66px;font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--signal);font-variant-numeric:tabular-nums}
.schritt h3{font-size:22px;margin:18px 0 10px;letter-spacing:-.03em}
.schritt p{color:var(--text-2);font-size:16px;line-height:1.6}

/* ── Kanäle ──────────────────────────────────────────────────────────────── */
.kanaele{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.kanal{
  display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:var(--pille);
  border:1px solid var(--linie-stark);font-weight:650;font-size:15.5px;letter-spacing:-.01em;background:var(--weiss);
}
.kanal--bald{background:transparent;color:var(--text-3);border-style:dashed}
.kanal__punkt{width:8px;height:8px;border-radius:50%;background:var(--leucht);flex:none}
.kanal--bald .kanal__punkt{background:var(--text-3)}
.kanal--eigen{border-color:var(--signal);background:var(--signal-flaeche);color:var(--signal-tief)}
.kanal--eigen .kanal__punkt{background:var(--signal)}

/* ── Zweispalt ───────────────────────────────────────────────────────────── */
.zweispalt{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
@media (min-width:900px){.zweispalt{grid-template-columns:1.05fr .95fr}}
.liste{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:2px}
.liste li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--auf-dunkel-linie);font-size:16.5px;line-height:1.5}
.liste li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:currentColor;margin-top:9px;opacity:.9}
.blau .liste li{border-color:rgba(255,255,255,.24)}

/* Preisvergleich in der blauen Fläche */
.zweiwelten{display:grid;gap:14px;margin-top:8px}
.welt{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:24px 26px}
.welt--kunde{background:var(--weiss);color:var(--tinte);border-color:transparent}
.welt__name{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;opacity:.8}
.welt__zeile{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:12px;font-variant-numeric:tabular-nums}
.welt__zeile + .welt__zeile{margin-top:8px}
.welt__zeile b{font-size:22px;font-weight:900;letter-spacing:-.03em}
.welt__zeile span{font-size:14.5px;opacity:.8}
.welt--kunde .welt__zeile span{color:var(--text-2);opacity:1}
.verdeckt{filter:blur(5px);user-select:none}

/* ── Abschluss und Fuss ──────────────────────────────────────────────────── */
.abschluss{text-align:center}
.abschluss .knopfreihe{justify-content:center}
.fuss{border-top:1px solid var(--linie);padding-block:44px;font-size:14.5px;color:var(--text-3)}
.fuss__innen{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--tinte)}

/* ── Rechtstexte (Datenschutz, AGB) ──────────────────────────────────────── */
.rechtskopf{padding-block:clamp(44px,6vw,76px) 0}
.rechtskopf h1{font-size:clamp(34px,5.5vw,68px);line-height:.98}
.rechtskopf .lead{max-width:58ch}
.fassung{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-top:28px;padding-top:20px;border-top:1px solid var(--linie);
}
.inhalt{display:grid;gap:clamp(36px,5vw,64px);padding-block:clamp(40px,5vw,64px) var(--band)}
@media (min-width:1000px){.inhalt{grid-template-columns:230px minmax(0,1fr)}}
.wegweiser{align-self:start;font-size:14.5px}
@media (min-width:1000px){.wegweiser{position:sticky;top:100px}}
.wegweiser__titel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.wegweiser ol{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:w}
.wegweiser li{counter-increment:w;display:flex;gap:10px}
.wegweiser li::before{content:counter(w);font-family:var(--mono);font-size:11px;color:var(--text-3);padding-top:3px;min-width:15px}
.wegweiser a{color:var(--text-2);text-decoration:none;line-height:1.4}
.wegweiser a:hover{color:var(--tinte)}
.rechtstext{max-width:74ch}
.rechtstext h2{font-size:clamp(23px,3.2vw,32px);line-height:1.12;margin:56px 0 18px;scroll-margin-top:100px}
.rechtstext > h2:first-child{margin-top:0}
.rechtstext h3{font-size:18.5px;font-weight:800;letter-spacing:-.02em;margin:30px 0 10px}
.rechtstext p,.rechtstext li{color:var(--text-2);font-size:16.5px;line-height:1.72}
.rechtstext p{margin:0 0 16px}
.rechtstext ul,.rechtstext ol{margin:0 0 18px;padding-left:20px}
.rechtstext li{margin-bottom:9px}
.rechtstext strong{color:var(--tinte);font-weight:700}
.rechtstext a{color:var(--signal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rechtstext dfn{font-style:normal;color:var(--tinte);font-weight:700}
.kasten{
  background:var(--weiss);border:1px solid var(--linie);border-left:4px solid var(--signal);
  border-radius:14px;padding:24px 26px;margin:0 0 22px;
}
.kasten--gruen{border-left-color:var(--leucht)}
.kasten p:last-child{margin-bottom:0}
.kasten__marke{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.tabellenrahmen{overflow-x:auto;margin:0 0 22px}
.tabelle{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--linie);color:var(--text-2);line-height:1.55}
.tabelle th{color:var(--tinte);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.fuss__innen nav{display:flex;flex-wrap:wrap;gap:8px 18px}