/* Startseite (Redesign 2026-09). Bewusst ein eigenes Stylesheet und nicht in style.css
   eingearbeitet: die alte Datei bedient Blog und alle Unterseiten und benutzt dieselben
   Klassennamen (.header, .footer, .container, .logo) fuer voellig andere Bausteine. Beide
   gleichzeitig geladen wuerden sich gegenseitig zerlegen.
   Quelle des Entwurfs: homepage-v2/entwuerfe/c-das-cockpit.html */

@font-face{font-family:"Open Sans";src:url("font/OpenSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("font/OpenSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("font/OpenSans-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("font/Caveat-Medium.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#222831; --ink-2:#31363F; --muted:#5B6E70; --faint:#8A9C9D;
  --teal:#76ABAE; --teal-deep:#3F7377; --teal-dark:#2C5457; --teal-soft:#DCEAEB;
  --paper:#FFFFFF; --ground:#F5F8F8; --sunken:#EEF3F3; --line:#DCE6E6; --line-soft:#E9F0F0;
  --good:#3F7D53; --good-soft:#E3F0E6; --warn:#B9822F; --warn-soft:#F6ECDA; --crit:#B84B3B; --crit-soft:#F6E1DD;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Consolas,monospace;
  --shadow-app:0 1px 2px rgba(34,40,49,.06), 0 28px 64px -26px rgba(34,40,49,.30);
  --shadow-soft:0 1px 2px rgba(34,40,49,.05), 0 12px 30px -16px rgba(34,40,49,.16);
  --r:10px; --r-lg:14px;
  --thumb:22px;
  /* bewusst ausserhalb der CI: Signalfarbe nur fuer den Preisvorteil */
  --accent-green:#00c281;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.66;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:800;line-height:1.13;letter-spacing:-.026em}
p{margin:0}
a{color:var(--teal-dark)}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:26px}
.sect{padding:86px 0}
.sect-tight{padding:58px 0}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-deep)}
.sect-head{max-width:660px;margin-bottom:40px}
.sect-head h2{font-size:clamp(27px,3.2vw,36px);margin-top:12px}
.sect-head p{margin-top:14px;color:var(--muted);font-size:16.5px}
.num{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-weight:700;
  text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.btn-sm{padding:8px 15px;font-size:13.5px}
.btn-md{padding:13px 25px;font-size:15px}
.btn-primary{background:var(--teal-deep);color:#fff}
.btn-primary:hover{background:var(--teal-dark)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--faint);background:var(--ground)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--teal-soft)}
.btn-outline-light{border-color:rgba(255,255,255,.28);color:#fff}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:60;height:58px;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line-soft)}
.nav-in{height:100%;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16.5px;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink)}
.brand img{width:24px;height:24px}
.nav-links{display:flex;gap:24px}
.nav-links a{font-size:14px;color:var(--muted);text-decoration:none;font-weight:400}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-login{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
.nav-login:hover{color:var(--ink)}

/* ---------- Hero: asymmetrischer Split ---------- */
.hero{background:linear-gradient(180deg,var(--ground) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line-soft);overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:56px;
  align-items:center;padding:78px 0 84px}
.hero h1{font-size:clamp(36px,4.7vw,55px);line-height:1.03;letter-spacing:-.037em}
.hero .lead{margin-top:20px;font-size:18px;color:var(--muted);line-height:1.68;max-width:46ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-list{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.hero-list li{list-style:none;display:flex;gap:10px;font-size:14.5px;color:var(--muted);align-items:flex-start}
.hero-list li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--teal-soft);
  box-shadow:inset 0 0 0 2px var(--teal-deep);flex:none;margin-top:4px}
.hero-list b{color:var(--ink);font-weight:700}
.hero-panel{position:relative}
.hero-panel .app{width:100%;max-width:none}

/* Das Panel laeuft absichtlich ueber den rechten Bildschirmrand hinaus, damit es ein echter
   Anschnitt ist statt eines Panels, das im leeren Rand neben dem Raster endet. Der Rand wird
   mitgerechnet ((100vw - Containerbreite) / 2), sonst haengt der Ueberstand von der
   Fensterbreite ab: mit einem festen Wert waeren es bei 1280px 104px Anschnitt, bei 1920px
   dagegen 216px Abstand *vor* dem Rand. So sind es auf jeder Breite konstant 134px.
   .hero hat overflow:hidden, es entsteht also kein waagerechter Bildlauf.
   Unter 1081px steht das Panel ohnehin unter dem Text und bleibt vollstaendig sichtbar. */
@media (min-width:1081px){
  .hero-panel .app{width:calc(100% + (100vw - min(100vw, 1180px)) / 2 + 160px)}
}

/* ---------- App-Mockup-Bausteine (Optik aus frontend-v2) ---------- */
.app{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  box-shadow:var(--shadow-app);overflow:hidden}
.app-top{height:40px;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--ground);
  border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:#D3DEDE;display:block}
.app-path{font-size:12px;color:var(--faint);font-weight:600;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-path b{color:var(--muted);font-weight:700}
.app-chip{margin-left:auto;flex:none;font-size:11px;font-weight:700;color:var(--teal-dark);
  background:var(--teal-soft);border-radius:999px;padding:3px 10px}
.app-split{display:grid;grid-template-columns:168px minmax(0,1fr);min-height:100%}
.app-side{border-right:1px solid var(--line);background:var(--ground);padding:14px 12px}
.app-side .grp{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  font-weight:800;padding:0 8px;margin:12px 0 6px}
.app-side .grp:first-child{margin-top:0}
.app-side a{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);
  text-decoration:none;padding:6px 8px;border-radius:6px;font-weight:600}
.app-side a.on{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:var(--shadow-soft)}
.app-side a i{width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.45;flex:none}
.app-main{padding:18px 20px 20px;min-width:0}

.app-head{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;
  flex-wrap:wrap;margin-bottom:14px}
/* Beschriftung im nachgebauten Fenster. Bewusst kein h-Element: das ist Chrome der
   dargestellten Oberflaeche und gehoert nicht in die Gliederung des Dokuments. */
.app-title{font-size:15px;font-weight:800;letter-spacing:-.015em}
.app-head .tools{display:flex;gap:8px;align-items:center}
.mini-btn{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:6px;border:1px solid var(--line);
  background:var(--paper);color:var(--muted)}
.mini-btn.primary{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.quota{font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--warn-soft);
  color:var(--warn);white-space:nowrap}

/* Breite Tabellen bekommen einen eigenen waagerechten Bildlauf. Ohne das schiebt die
   Tabelle ihren Container auf und am Ende die ganze Seite: ein Raster-Feld ist von Haus aus
   mindestens so breit wie sein Inhalt (min-width:auto). */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px}
.dtable th{text-align:left;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  font-weight:800;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.dtable td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.dtable tr:last-child td{border-bottom:0}
.dtable .m-name{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.dtable .t{font-variant-numeric:tabular-nums;color:var(--faint);font-size:11.5px;white-space:nowrap}
.filters td{padding-top:8px;padding-bottom:10px}
.fbox{border:1px solid var(--line);border-radius:6px;background:var(--paper);font-size:11px;
  color:var(--faint);padding:4px 9px;display:inline-flex;align-items:center;gap:6px;min-width:90px}
.fbox::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--faint);
  border-bottom:1.5px solid var(--faint);transform:rotate(45deg) translateY(-1px);margin-left:auto}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:2px 9px;
  border-radius:999px;white-space:nowrap}
.badge i{width:5px;height:5px;border-radius:50%;background:currentColor}
.badge.low{background:var(--good-soft);color:var(--good)}
.badge.mid{background:var(--warn-soft);color:var(--warn)}
.badge.high{background:var(--crit-soft);color:var(--crit)}
.badge.neutral{background:var(--sunken);color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:2px 9px;
  border-radius:999px;background:var(--teal-soft);color:var(--teal-dark);white-space:nowrap}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.company{background:var(--warn-soft);color:var(--warn)}
.pill.tenant{background:var(--good-soft);color:var(--good)}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}
.kpi{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.kpi-label{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:800}
.kpi-value{font-size:23px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi-value .unit{font-size:12px;font-weight:700;color:var(--faint);margin-left:2px}
.kpi-delta{font-size:10.5px;margin-top:4px;font-weight:700}
.kpi-delta.pos{color:var(--good)} .kpi-delta.neg{color:var(--crit)}

.matrix{width:100%;border-collapse:collapse;font-size:12px}
.matrix th{font-weight:800;color:var(--faint);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  text-align:left;padding:0 8px 8px 0;white-space:nowrap}
.matrix td{padding:4px 8px 4px 0;vertical-align:middle}
.matrix .m-name{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.cell{width:20px;height:20px;border-radius:5px;display:inline-block}
.cell.none{background:transparent;border:1px dashed var(--line)}
.cell.sent{background:var(--sunken);border:1px solid var(--line)}
.cell.opened{background:var(--warn);opacity:.5}
.cell.clicked{background:var(--crit)}
.legend{display:flex;gap:14px;font-size:11px;color:var(--faint);flex-wrap:wrap;margin-top:12px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;vertical-align:-1px;margin-right:5px}

.tagset{border:1px solid var(--line);border-radius:8px;padding:11px 12px;background:var(--ground)}
.tagset-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.and{font-size:10px;font-weight:800;color:var(--faint);letter-spacing:.07em}
.addtag{font-size:11px;font-weight:700;color:var(--teal-dark);border:1px dashed var(--teal);
  border-radius:999px;padding:2px 9px;background:transparent}
.or{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:10px;font-weight:800;
  letter-spacing:.11em;color:var(--faint)}
.or::after{content:"";flex:1;height:1px;background:var(--line)}
.addgroup{margin-top:12px;font-size:11.5px;font-weight:700;color:var(--teal-dark);background:none;
  border:0;padding:0;cursor:default}
.hint{margin-top:12px;font-size:11.5px;color:var(--faint);line-height:1.55}
.result{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.result b{color:var(--ink)}

.providers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.prov{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:7px}
.prov.on{border-color:var(--teal-deep);box-shadow:0 0 0 1px var(--teal-deep) inset}
.prov-mark{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11.5px;color:#fff}
.prov-name{font-size:12.5px;font-weight:700}
.prov-var{font-size:11px;color:var(--faint)}
.editor{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.blocks{border:1px solid var(--line);border-radius:var(--r);padding:11px 12px}
.blocks .bt{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  font-weight:800;margin-bottom:9px}
.block{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);padding:7px 9px;
  border:1px solid var(--line);border-radius:7px;margin-bottom:6px;background:var(--paper)}
.block.on{border-color:var(--teal-deep);color:var(--ink);font-weight:700}
.block .h{width:9px;height:9px;border-radius:2px;background:var(--line);flex:none}
.block.on .h{background:var(--teal-deep)}
.preview{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.preview-bar{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:800;
  padding:8px 11px;border-bottom:1px solid var(--line);background:var(--ground)}
.preview-in{padding:12px}
.pv-head{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.pv-avatar{width:24px;height:24px;border-radius:5px;background:#0F6CBD;color:#fff;font-size:10px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.pv-from{font-size:11px;font-weight:700;line-height:1.3}
.pv-mail{font-size:10px;color:var(--faint);font-family:var(--mono);overflow-wrap:anywhere}
.pv-sub{font-size:12.5px;font-weight:800;margin:10px 0 7px;letter-spacing:-.015em}
.pv-txt{font-size:10.5px;color:var(--muted);line-height:1.65}
.pv-btn{display:inline-block;margin-top:10px;background:#0F6CBD;color:#fff;font-size:10px;font-weight:700;
  padding:6px 13px;border-radius:4px}

/* ---------- Kennzahlen-Band ---------- */
.band{background:var(--ink);color:#fff}
.band-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1)}
.band-cell{background:var(--ink);padding:26px 24px}
.band-cell b{display:block;font-size:29px;font-weight:800;letter-spacing:-.032em;line-height:1.15;
  font-variant-numeric:tabular-nums}
.band-cell span{display:block;margin-top:5px;font-size:13px;color:#93A6A7;line-height:1.5}
.band-cell b em{font-style:normal;color:var(--teal)}

/* ---------- Bekannt aus ---------- */
.known{background:var(--ground);border-bottom:1px solid var(--line-soft);padding:26px 0}
.known-in{display:flex;align-items:center;justify-content:center;gap:20px 44px;flex-wrap:wrap}
.known-label{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.known img{height:25px;width:auto;filter:grayscale(1);opacity:.5}

/* ---------- Showcase mit Umschaltung ---------- */
.showcase{display:grid;grid-template-columns:290px minmax(0,1fr);gap:40px;align-items:start}
.showcase > *{min-width:0}
.tabs{display:flex;flex-direction:column;gap:2px;position:sticky;top:82px}
.tab{text-align:left;background:none;border:0;border-left:2px solid var(--line);padding:15px 18px;
  cursor:pointer;font-family:inherit;transition:border-color .18s ease,background .18s ease}
.tab:hover{background:var(--ground)}
.tab-t{font-size:15.5px;font-weight:800;letter-spacing:-.018em;color:var(--muted);display:block}
.tab-d{font-size:13px;color:var(--faint);line-height:1.55;margin-top:4px;display:block}
.tab[aria-selected="true"]{border-left-color:var(--teal-deep);background:var(--ground)}
.tab[aria-selected="true"] .tab-t{color:var(--ink)}
.tab[aria-selected="true"] .tab-d{color:var(--muted)}
.panel[hidden]{display:none}
/* Ueberschrift je Panel. Auf dem Desktop steht sie im Tab, unterhalb von 961px gibt es keine
   Tabs mehr, dort tritt sie an deren Stelle. Der Text steht bewusst doppelt im Markup, damit
   die Seite ohne JavaScript vollstaendig lesbar bleibt: bei der Portierung nach PHP laesst er
   sich aus einer gemeinsamen Quelle ausgeben. */
.panel-head{display:none}
.panel-head h3{font-size:19px;letter-spacing:-.02em}
.panel-head p{margin-top:7px;font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- Funktionen ---------- */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 30px}
.fitem h3{font-size:14.5px;margin-bottom:6px}
.fitem p{font-size:13.5px;color:var(--muted);line-height:1.6}
.fitem::before{content:"";display:block;width:22px;height:2px;background:var(--teal);margin-bottom:12px}

/* ---------- Ablauf ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.flow-cell{padding:26px 26px 28px;border-right:1px solid var(--line)}
.flow-cell:last-child{border-right:0}
.flow-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--teal-deep);font-weight:700}
.flow-cell h3{font-size:17px;margin:10px 0 8px}
.flow-cell p{font-size:14px;color:var(--muted);line-height:1.62}

/* ---------- Case + Zitat ---------- */
.proof{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:stretch}
.case{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column}
/* Kampagnenverlauf aus der echten Auswertung, in CSS nachgebaut statt als Screenshot.
   Die Vorlage war eine 600x317-Aufnahme der dunklen Dashboard-Ansicht: in einem 170px hohen
   Ausschnitt weder lesbar noch zur hellen Karte passend. Die Werte stammen 1:1 aus dem Bild. */
.case-chart{margin:0;background:var(--ground);border-bottom:1px solid var(--line);padding:18px 24px 15px}
.case-chart figcaption{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px}
.cs-plot{display:flex;align-items:flex-end;gap:9px;height:104px}
.cs-bar{flex:1;display:flex;flex-direction:column;border-radius:4px;overflow:hidden;
  height:calc(var(--total) / var(--max) * 100%)}
.cs-clicked{height:calc(var(--clicked) / var(--total) * 100%);background:var(--crit)}
.cs-safe{flex:1;background:var(--good)}
.cs-x{display:flex;gap:9px;margin-top:7px}
.cs-x span{flex:1;text-align:center;font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.cs-legend{display:flex;gap:18px;margin-top:12px;font-size:11px;color:var(--muted)}
.cs-legend span{display:inline-flex;align-items:center;gap:6px}
.cs-legend i{width:9px;height:9px;border-radius:2px;flex:none}
.case-body{padding:26px 28px 28px}
.case-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-deep)}
.case-body h3{font-size:21px;margin:10px 0 12px}
.case-body p{font-size:14px;color:var(--muted);line-height:1.68}
.case-nums{display:flex;gap:30px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
.case-num b{display:block;font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.case-num span{font-size:12px;color:var(--muted);line-height:1.45;display:block;margin-top:2px}
.case-num.bad b{color:var(--crit)} .case-num.good b{color:var(--good)}
.qcard{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:32px 32px 30px;
  display:flex;flex-direction:column;justify-content:center}
/* Handschrift nur fuer das Zitat selbst, die Zeile darunter bleibt Open Sans.
   Gewicht 600, weil nur dieser Schnitt geladen ist: bei 700/800 wuerde der Browser
   einen Fettschnitt errechnen, und der zerdrueckt die feinen Striche der Schreibschrift.
   Groesser und ohne negative Laufweite gesetzt, weil Caveat eine deutlich kleinere
   x-Hoehe hat als Open Sans und bei 20px neben der Bildunterschrift verschwinden wuerde. */
.qcard blockquote{margin:0;font-family:"Caveat",cursive;font-weight:600;
  font-size:clamp(26px,2.7vw,31px);line-height:1.26;letter-spacing:0;color:#fff}
.qcard .by{display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.13)}
.qcard .by img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.qcard .by b{display:block;color:#fff;font-size:14px}
.qcard .by span{font-size:12.5px;color:#93A6A7;line-height:1.5}

/* ---------- Preise ---------- */
.pricing{background:var(--ground);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden}
.price-left{padding:34px 38px 36px;border-right:1px solid var(--line)}
.price-right{padding:34px 34px 36px;background:var(--ground);display:flex;flex-direction:column;justify-content:center}
.slider-q{font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.slider-emp{font-size:34px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  margin-bottom:18px;line-height:1.1}
.slider-emp span{font-size:15px;font-weight:700;color:var(--faint);letter-spacing:-.01em}
.slider-input{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;margin:0;
  display:block;cursor:pointer}
.slider-input::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(to right,
    var(--teal-deep) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--fill, 0)),
    #DEE8E8 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--fill, 0)) 100%)}
.slider-input::-moz-range-track{height:6px;border-radius:999px;background:#DEE8E8}
.slider-input::-moz-range-progress{height:6px;border-radius:999px;background:var(--teal-deep)}
.slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:#fff;border:2px solid var(--teal-deep);margin-top:-8px;
  box-shadow:0 2px 6px rgba(34,40,49,.22);transition:transform .12s ease}
.slider-input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:2px solid var(--teal-deep);box-shadow:0 2px 6px rgba(34,40,49,.22)}
.slider-input:active::-webkit-slider-thumb{transform:scale(1.1)}
/* Der Daumen laeuft nur zwischen halber Daumenbreite und Breite minus halber Daumenbreite.
   Die Beschriftungen sitzen deshalb absolut auf derselben Formel statt per space-between,
   sonst stehen vor allem die aeusseren beiden neben ihrer Position. */
.ticks{position:relative;height:24px;margin-top:8px}
.tick{position:absolute;top:0;
  left:calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p, 0));transform:translateX(-50%);
  background:none;border:0;padding:4px 2px;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--faint);cursor:pointer;transition:color .14s ease;white-space:nowrap}
.ticks .tick:nth-child(1){--p:0}
.ticks .tick:nth-child(2){--p:.25}
.ticks .tick:nth-child(3){--p:.5}
.ticks .tick:nth-child(4){--p:.75}
.ticks .tick:nth-child(5){--p:1}
.tick:hover{color:var(--muted)}
.tick[aria-current="true"]{color:var(--teal-dark)}
.price-incl{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;font-size:13.5px;color:var(--muted)}
.price-incl span{display:inline-flex;align-items:center;gap:8px}
.price-incl span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none}
.price-amount{font-size:clamp(36px,4.4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.price-amount .per{font-size:16px;font-weight:700;color:var(--faint)}
.price-meta{margin-top:12px;font-size:14.5px;color:var(--muted)}
.price-meta b{color:var(--ink)}
.price-sub{margin-top:8px;font-size:12.5px;color:var(--faint)}
.price-hl{display:inline-block;background:var(--paper);color:var(--accent-green);
  font-weight:800;font-size:13px;line-height:1.55;padding:3px 11px;border-radius:999px;
  white-space:nowrap}
.price-tax{margin-left:8px}
.price-right .btn{margin-top:24px}

/* Doppelpuls am Preis-CTA: zwei Ringe laufen versetzt nach aussen, dadurch pulst es alle
   1,1 Sekunden. Als Schlagschatten statt als Skalierung, damit der Ring bei einem breiten
   Button ringsum gleich dick bleibt; eine Skalierung wuerde ihn waagerecht auseinanderziehen.
   Der Button selbst bleibt unbewegt, sobald die Beschriftung mitwandert, wirkt es billig.
   Bei "prefers-reduced-motion" schaltet die globale Regel weiter oben alles ab. */
.cta-ripple{position:relative}
.cta-ripple::before,.cta-ripple::after{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;animation:cta-ripple 2.2s ease-out infinite}
.cta-ripple::after{animation-delay:1.1s}
@keyframes cta-ripple{
  0%{box-shadow:0 0 0 0 rgba(118,171,174,.75)}
  70%{box-shadow:0 0 0 14px rgba(118,171,174,0)}
  100%{box-shadow:0 0 0 0 rgba(118,171,174,0)}
}
.price-note{margin-top:12px;font-size:12.5px;color:var(--faint);line-height:1.55}
.price-foot{text-align:center;margin-top:24px;font-size:13.5px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq2{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.faq2 details{border-bottom:1px solid var(--line-soft)}
.faq2 summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font-weight:700;
  font-size:15.5px;letter-spacing:-.012em}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.faq2 details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq2 details[open] summary{color:var(--teal-dark)}
.faq-a{padding:0 34px 18px 0;color:var(--muted);font-size:14.5px;line-height:1.7}
.faq-a p + p{margin-top:10px}

/* ---------- Blog & Minigame ---------- */
.bottom{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
.posts{display:flex;flex-direction:column}
.post{display:flex;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit}
.post:hover h3{color:var(--teal-dark)}
.post time{font-family:var(--mono);font-size:11px;color:var(--faint);flex:none;width:76px}
.post h3{font-size:15px;line-height:1.4;font-weight:700}
.game{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ground);padding:24px 26px}
.game h3{font-size:17px;margin-bottom:8px}
.game p{font-size:14px;color:var(--muted);line-height:1.62;margin-bottom:18px}

/* ---------- Schluss & Footer ---------- */
.endcta{background:var(--ink);color:#fff;padding:74px 0}
.end-in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.endcta h2{font-size:clamp(27px,3.4vw,38px);color:#fff;max-width:18ch}
.endcta p{color:#93A6A7;margin-top:12px;max-width:46ch;font-size:16px}
.end-in .row{display:flex;gap:12px;flex-wrap:wrap}

.footer{background:var(--ink-2);color:#9FB2B3;padding:32px 0 28px;font-size:13.5px}
.footer-in{display:flex;align-items:center;gap:16px 30px;flex-wrap:wrap}
.footer .brand{color:#fff;font-size:15.5px}
.footer .brand img{width:22px;height:22px}
.footer nav{display:flex;gap:8px 20px;flex-wrap:wrap;margin-left:auto}
.footer nav a,.footer nav button{color:#9FB2B3;text-decoration:none;background:none;border:0;padding:0;
  font:inherit;cursor:pointer}
.footer nav a:hover,.footer nav button:hover{color:#fff}
.footer-legal{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;gap:8px 22px;flex-wrap:wrap;font-size:12.5px;color:#7E9293}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  /* Die Seitenleiste im Mockup frisst im schmalen Panel zu viel Breite */
  .app-side{display:none}
  .app-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:44px;padding:56px 0 62px}
  .band-in{grid-template-columns:repeat(2,1fr)}
  /* Keine Tabs auf schmalen Geraeten: alle vier Bereiche stehen untereinander,
     jeder mit eigener Ueberschrift. Das Umschalten uebernimmt das Script nur oberhalb
     dieser Grenze, siehe unten. */
  .showcase{grid-template-columns:minmax(0,1fr);gap:0}
  .tabs{display:none}
  .panels{display:flex;flex-direction:column;gap:38px}
  .panel-head{display:block;margin-bottom:14px}
  /* Sicherheitsnetz: das "hidden" aus dem Markup verhindert auf dem Desktop ein kurzes
     Aufblitzen aller vier Panels, bevor das Script laeuft. Hier wird es ueberstimmt, damit
     die Bereiche auch dann untereinander stehen, wenn das Script gar nicht ausgefuehrt wird. */
  .panel[hidden]{display:block}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-cell{border-right:0;border-bottom:1px solid var(--line)}
  .flow-cell:last-child{border-bottom:0}
  .proof{grid-template-columns:minmax(0,1fr)}
  .price-card{grid-template-columns:minmax(0,1fr)}
  .price-left{border-right:0;border-bottom:1px solid var(--line)}
  .faq2{grid-template-columns:minmax(0,1fr);gap:0}
  .bottom{grid-template-columns:minmax(0,1fr)}
  .kpi-grid,.providers{grid-template-columns:repeat(2,1fr)}
  .editor{grid-template-columns:minmax(0,1fr)}
  .nav-links{display:none}
  .sect{padding:62px 0}
}
@media (max-width:620px){
  .wrap{padding-inline:20px}
  .sect{padding:48px 0}
  .sect-tight{padding:40px 0}
  .fgrid{grid-template-columns:1fr}
  .band-in{grid-template-columns:1fr}
  .band-cell{padding:20px 22px}
  .price-left,.price-right{padding:24px 22px 26px}
  .price-incl{grid-template-columns:1fr}
  .app-main{padding:15px}
  .case-body{padding:22px 22px 24px}
  .case-chart{padding:16px 18px 13px}
  .case-nums{gap:22px}
  .qcard{padding:26px 22px 24px}
  .flow-cell{padding:22px 22px 24px}
  .post time{width:64px}
  .cs-plot,.cs-x{gap:6px}
  .cs-x span{font-size:9px}
}
@media (max-width:460px){
  /* Kopfzeile: Logo und Aktionsknopf haben Vorrang vor dem Anmeldelink */
  .nav-login{display:none}
  /* Sieben Beschriftungen passen nicht mehr nebeneinander, jede zweite reicht zur Orientierung */
  .cs-x span:nth-child(even){visibility:hidden}
  .hero-cta .btn,.end-in .row .btn{flex:1 1 100%}
}


/* Textlink-Optik fuer die Aidbase-Elemente (Kontaktformular), die keine echten Links sind. */
.fake-link { color: var(--teal-dark); cursor: pointer; text-decoration: underline;
    text-underline-offset: 2px; }
.footer .fake-link { color: #9FB2B3; text-decoration: none; }
.footer .fake-link:hover { color: #fff; }