/* ══════════════════════════════════════════════════════════════════════════
   tc-seiten.css — die Bauteile der Landingpage als gemeinsame Datei.

   WOZU: .sec, .pcard, .matrix, .badge und die Schriftgrößen lagen bis zum
   18.09.2026 ausschließlich inline in index.html. Jede neue Seite musste sie
   nachbauen — und sah dadurch anders aus. Diese Datei enthält dieselben
   Regeln, maschinell aus index.html extrahiert, damit keine Abweichung
   entstehen kann.

   index.html bleibt unverändert und behält seine Inline-Fassung; erst wenn
   die neuen Seiten sich bewährt haben, lohnt das Zusammenlegen.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#0A1E33;
  --navy-soft:#12304F;
  --blue:#14477E;
  --blue-line:#9CBEDD;
  --blue-wash:#EDF3F9;
  --cream:#F6F4EF;
  --gold:#B0872C;
  --gold-lt:#D9B45B;
  --gold-text:#8A671E; /* Gold für Text auf hellem Grund — erfüllt WCAG AA (≥4.5:1), --gold nur für Flächen/Icons */
  --ink:#1A1A2E;
  --ink-60:#5A6272;
  --white:#fff;
  --hair:rgba(10,30,51,.14);
  --hair-dark:rgba(255,255,255,.16);
  --r:14px;
  --dsp:"Fraunces",Georgia,serif;
  --ui:"Inter",-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden}
html,body{margin:0}
body{background:#fff;font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;padding:11px 18px;border-radius:9px;text-decoration:none;white-space:nowrap;transition:transform .12s,box-shadow .2s;border:none;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,71,126,.25)}
.btn.gold{background:var(--gold);color:#1A1405}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--hair)}
.btn.on-dark{background:var(--gold-lt);color:#171203}
.btn.lg{padding:14px 22px;font-size:15px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin:0 0 14px}
.hero .eyebrow,.sec.blue .eyebrow{color:var(--gold-lt)}
.h1{font-family:var(--dsp);font-weight:600;font-size:46px;line-height:1.04;letter-spacing:-.02em;margin:0 0 16px}
.h2{font-family:var(--dsp);font-weight:600;font-size:31px;line-height:1.12;letter-spacing:-.015em;margin:0 0 12px}
.h3{font-family:var(--dsp);font-weight:600;font-size:19px;margin:0 0 6px}
.lead{font-size:17px;line-height:1.65;color:var(--ink-60);margin:0 0 22px;max-width:48ch}
.checks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.checks li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:500}
.ck{flex:0 0 18px;margin-top:1px}
.wrap{padding:0 40px;max-width:1180px;margin:0 auto}
/* ---------- HERO ---------- */
.hero{background:var(--navy);color:#fff;padding:64px 0 0;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:end}
.hero .h1{color:#fff}
.hero .lead{color:#BFCEDD}
.hero .checks li{color:#E7EEF5}
.hero-bg{position:absolute;inset:0;z-index:0;background-image:url("assets/hero.jpg");background-size:cover;background-position:50% 20%}
.hero-bg:after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(10,30,51,.96) 0%,rgba(10,30,51,.90) 38%,rgba(10,30,51,.62) 68%,rgba(10,30,51,.42) 100%),
  linear-gradient(to bottom,rgba(10,30,51,.55) 0%,rgba(10,30,51,0) 30%,rgba(10,30,51,.75) 100%)}
.hero .wrap,.hero .hero-foot{position:relative;z-index:1}
@keyframes mv{to{transform:translateX(-50%)}}
.honest{border-left:2px solid var(--gold);padding:8px 0 8px 14px;margin:22px 0 0;font-size:14.5px;line-height:1.6;color:#CBD9E6;max-width:48ch}
.hero .small-cta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9FB3C6;margin:12px 0 0}
/* ---------- SCORECARD ---------- */
.scorecard{background:#fff;border-radius:16px 16px 0 0;padding:22px 24px 26px;color:var(--ink);box-shadow:0 -8px 40px rgba(0,0,0,.28);position:relative;z-index:2}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:16px}
.sc-top .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.sc-num{font-family:var(--dsp);font-size:54px;font-weight:700;line-height:.9;color:var(--navy);letter-spacing:-.03em}
.sc-num sub{font-family:var(--ui);font-size:14px;font-weight:500;color:var(--ink-60);vertical-align:baseline}
.dims{display:grid;gap:9px;margin-top:18px}
.dim{display:grid;grid-template-columns:122px 1fr 38px;align-items:center;gap:10px;font-size:12.5px}
.dim span:first-child{color:var(--ink-60)}
.bar{height:6px;background:var(--blue-wash);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;transition:width .8s ease-out}
.bar i.b{background:var(--blue)}
.bar i.g{background:var(--gold)}
.dim b{font-family:var(--mono);font-size:12px;text-align:right;color:var(--navy)}
.dim.pending span:first-child{color:#A7B0BE}
.dim.pending b{color:#A7B0BE;font-weight:400}
.sc-result{margin-top:14px;background:var(--blue-wash);border-radius:10px;padding:11px 13px;font-size:13.5px;line-height:1.5}
.sc-result b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);margin-bottom:4px}
.stamp{margin-top:16px;border-top:1px dashed var(--hair);padding-top:12px;display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:99px;background:var(--blue-wash);color:var(--blue)}
.badge.gold{background:rgba(176,135,44,.14);color:var(--gold-text)}
.badge.green{background:rgba(47,107,79,.12);color:var(--green)}
.badge.red{background:rgba(165,64,46,.12);color:var(--red)}
.badge.solid{background:var(--gold);color:#1A1405}
/* ---------- SECTIONS ---------- */
.sec{padding:62px 0}
.sec.cream{background:var(--cream)}
.sec.blue{background:var(--navy);color:#fff}
.sec.blue .h2,.sec.blue .h3{color:#fff}
.sec.blue .lead{color:#BFCEDD}
.sec-head{max-width:56ch;margin-bottom:34px}
.sec-head .lead{margin-bottom:0}
/* ---------- PRODUCT MATRIX ---------- */
.sec-fade.dark{background:
  radial-gradient(112% 80% at 14% -10%, rgba(20,71,126,.90) 0%, rgba(20,71,126,.30) 44%, rgba(20,71,126,0) 72%),
  radial-gradient(80% 60% at 94% 4%, rgba(176,135,44,.22) 0%, rgba(176,135,44,0) 58%),
  linear-gradient(180deg, rgba(5,17,30,.60) 0%, rgba(10,30,51,0) 42%)}
.sec-fade.dark:before{background:linear-gradient(90deg,rgba(156,190,221,.55),rgba(176,135,44,.50) 45%,transparent)}
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.pcard > *:not(.pc-bg):not(.tile-bg){position:relative;z-index:1}
.pcard.wide{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:var(--navy);border-color:transparent;color:#fff}
.pcard.dark{background:#0F2740;border-color:rgba(255,255,255,.14);color:#E7EEF5}
.pcard.dark .h3{color:#fff}
.pcard.dark .price{color:#9FB3C6}
.pcard.dark ul{color:#D3DEE8}
.pcard.dark .foot{color:var(--gold-lt)}
.pcard.dark .badge{background:rgba(255,255,255,.10);color:#CBD9E6}
.pcard.dark .badge.solid{background:var(--gold);color:#1A1405}
.pcard.dark .hint{color:#8FA6BC;border-color:rgba(255,255,255,.16)}
.pcard.dark .pc-bg{filter:grayscale(.5) contrast(1.06)}
.pcard.dark .pc-bg:after,.pcard.dark .tile-bg:after{background:linear-gradient(176deg,rgba(10,30,51,.92) 0%,rgba(10,30,51,.80) 46%,rgba(10,30,51,.88) 100%)}
.pcard.dark.gold{border-color:var(--gold);box-shadow:0 18px 44px -24px rgba(176,135,44,.6)}
.pcard.wide.light{background:#fff;border-color:transparent;color:var(--ink)}
.pcard.wide.light .h3{color:var(--ink)}
.pcard.wide.light p.sub{color:var(--ink-60)}
.pc-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pcard .price{font-family:var(--mono);font-size:13px;color:var(--ink-60);margin:0 0 14px}
.pcard ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:9px;font-size:14px;color:var(--ink)}
.pcard.wide ul{color:#DCE5EE}
.pcard ul li{display:flex;gap:8px;align-items:flex-start}
.pcard .foot{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:6px;text-decoration:none;transition:gap .2s;padding:12px 0 2px;min-height:44px;align-self:flex-start}
.pcard .foot:hover{gap:10px}
.pcard p.sub{font-size:14.5px;color:var(--ink-60);line-height:1.55;margin:0 0 14px}
.pcard.wide p.sub{color:#BFCEDD}
.pcard .hint{font-size:12.5px;color:var(--ink-60);line-height:1.5;margin:0 0 14px;border-top:1px solid var(--hair);padding-top:10px}
.price-tag{display:flex;align-items:baseline;gap:8px;margin:0 0 14px}
.price-tag b{font-family:var(--dsp);font-size:26px;font-weight:700;color:#fff;letter-spacing:-.02em}
.price-tag s{color:#8FA6BC;font-size:13px}
.pcard.dark .price-tag em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt)}
/* Photo layers */
.pc-bg{position:absolute;inset:0;z-index:0;background-size:cover;filter:grayscale(.35) contrast(1.05)}
.pc-bg:after{content:"";position:absolute;inset:0}
.pc-bg.check{background-position:8% 34%;background-image:url("assets/check.jpg")}
.pc-bg.check:after{background:linear-gradient(178deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.82) 42%,rgba(237,243,249,.74) 76%,rgba(20,71,126,.10) 100%)}
.pc-bg.audit{background-position:52% 42%;background-image:url("assets/audit.jpg")}
.pc-bg.audit:after{background:linear-gradient(178deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.84) 44%,rgba(246,244,239,.76) 78%,rgba(10,30,51,.14) 100%)}
.pcard.photo{border-color:rgba(10,30,51,.22);box-shadow:0 14px 34px -22px rgba(10,30,51,.5)}
.tile-bg{position:absolute;inset:0;z-index:0;background-image:url("assets/fin.jpg");background-size:cover;background-position:38% 46%;filter:grayscale(.2) contrast(1.04)}
.tile-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.80) 55%,rgba(20,71,126,.16) 100%)}
.pcard .tile-bg{background-position:44% 40%;filter:grayscale(.22) contrast(1.05)}
.pcard .tile-bg:after{background:linear-gradient(176deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.84) 40%,rgba(246,244,239,.74) 72%,rgba(176,135,44,.20) 100%)}
/* ---------- FAHRPLAN ---------- */
.sec.fade-blue{position:relative;overflow:hidden}
.sec.fade-blue > .wrap{position:relative;z-index:1}
.sec-fade{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(118% 82% at 16% -6%, rgba(20,71,126,.24) 0%, rgba(20,71,126,.11) 38%, rgba(20,71,126,0) 68%),
    radial-gradient(90% 70% at 92% 4%, rgba(156,190,221,.30) 0%, rgba(156,190,221,0) 60%),
    linear-gradient(180deg, rgba(237,243,249,.85) 0%, rgba(255,255,255,0) 46%)}
.sec-fade:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(20,71,126,.5),rgba(176,135,44,.45) 45%,transparent)}
.case{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.case-meta{display:flex;gap:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);border-bottom:1px solid var(--hair);padding-bottom:12px;margin-bottom:18px}
.mod > *:not(.tile-bg),.chip > *:not(.tile-bg){position:relative;z-index:1}
.tile-bg.coins{background-image:url("assets/coins.jpg");background-position:50% 62%}
.tile-bg.coins:after{background:linear-gradient(168deg,rgba(10,30,51,.72) 0%,rgba(10,30,51,.52) 55%,rgba(10,30,51,.66) 100%)}
.tile-bg.safe{background-image:url("assets/sicher.jpg");background-position:50% 34%}
.tile-bg.safe:after{background:linear-gradient(168deg,rgba(10,30,51,.68) 0%,rgba(10,30,51,.46) 52%,rgba(10,30,51,.62) 100%)}
.tile-bg.markt{background-image:url("assets/markt.jpg");background-position:46% 52%}
.tile-bg.markt:after{background:linear-gradient(168deg,rgba(10,30,51,.66) 0%,rgba(10,30,51,.44) 52%,rgba(10,30,51,.62) 100%)}
.tile-bg.team{background-image:url("assets/team.jpg");background-position:50% 46%;filter:grayscale(1) contrast(.94) brightness(1.02)}
.tile-bg.team:after{background:linear-gradient(168deg,rgba(248,249,250,.88) 0%,rgba(226,231,236,.78) 50%,rgba(126,140,156,.50) 100%)}
.compare > *{position:relative;z-index:1}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hair)}
/* ---------- FOOTER ---------- */
.ftr{background:var(--navy);color:#fff;padding:44px 40px 22px}
.ftr h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 12px}
.ftr a{display:block;color:#C3D2E0;font-size:14px;text-decoration:none;margin-bottom:9px;transition:color .15s}
.ftr a:hover{color:#fff}
.ftr .claim{font-family:var(--dsp);font-size:19px;font-weight:600;margin:14px 0 8px}
.ftr .small{color:#9FB3C6;font-size:13px;line-height:1.6}
/* ---------- SCROLL REVEAL ---------- */
/* BEFUND 12.09.2026: Die Etiketten liefen in IBM Plex Mono — kleine Versalien in
   Monospace mit Sperrung sind eines der deutlichsten Merkmale generierter Gestaltung.
   Nur die Variable wurde getauscht, alle 31 Fundstellen behalten Groesse und Sperrung.
   Zurueck geht es mit einer Zeile: --mono auf "IBM Plex Mono" zuruecksetzen.
   Ziffern brauchen dafuer Tabellenbreite, sonst springen die Zahlen. */
.klasse div,.klasse-cap,.dim b,.num,.k,.price,.case-meta,.ba-stamp{font-variant-numeric:tabular-nums}
/* H1-Zeilen richten sich auf. Der Text steht vollstaendig im Markup und wird erst
   per JS in Huellen zerlegt — ohne Skript bleibt er normal sichtbar, der Ladewert
   leidet nicht, und Suchmaschinen sehen die Ueberschrift unveraendert. */
.h1 .zl{display:block;overflow:hidden}
.h1 .zl>span{display:block;transform:translateY(112%);transition:transform .85s cubic-bezier(.22,1,.36,1)}
.h1.an .zl>span{transform:translateY(0)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.visible{opacity:1;transform:translateY(0)}
/* Skip link */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;border-radius:8px}
@media(max-width:600px){
  .ba{height:652px}
  .ba-row{min-height:98px}
  .matrix,.tiles,.ftr-grid,.kpis{grid-template-columns:1fr}
  .pcard.wide{grid-column:span 1}
  .klasse div{font-size:8px}
  .mods{flex-wrap:wrap}
  .mods .mod{flex:1 1 calc(50% - 5px)}
  .tools{grid-template-columns:1fr 1fr}
  .chips{flex-direction:column}
  .ftr-base{flex-direction:column;gap:8px}
}
@media(max-width:600px){
  .proof-strip{grid-template-columns:1fr 1fr;gap:16px}
  .proof-num b{font-size:32px}
  .cookie-bar{flex-direction:column;padding:16px 22px;gap:14px}
  .ck-btns{width:100%}
  .ck-btn{flex:1}
  .partner-strip{gap:22px}
  .portrait{width:180px;height:180px}
  .dim{grid-template-columns:90px 1fr 34px;gap:6px;font-size:11.5px}
  .compare .cmp-b{grid-template-columns:1fr}
  .cmp-col+.cmp-col{border-left:none;border-top:1px solid var(--hair)}
  .deltas{gap:16px;flex-wrap:wrap}
  .hero .wrap{gap:24px}
  .scorecard{padding:18px 16px 22px}
  .sc-top{flex-direction:column;gap:8px}
  .gruender-facts{flex-direction:column;align-items:center}
  #mobil .checks{text-align:left}
}
/* BEFUND 12.09.2026: Die Etiketten liefen in IBM Plex Mono — kleine Versalien in
   Monospace mit Sperrung sind eines der deutlichsten Merkmale generierter Gestaltung.
   Muss NACH tc-theme.css stehen: dort wird --mono in Zeile 43 gesetzt, und bei
   gleicher Spezifitaet gewinnt die spaetere Regel. Groesse und Sperrung der 31
   Fundstellen bleiben unveraendert, nur die Familie wechselt.
   Zuruecknehmen = diesen Block loeschen. */
:root{--mono:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
/* Einheitliche Grundfarben: Weiß als Fläche, Blau als Leitfarbe, Gold nur als Akzent.
   :not([data-theme="dark"]) lässt die Dunkelvariante der Seite unangetastet. */
:root:not([data-theme="dark"]){
  --bg:#FFFFFF; --bg2:#F4F8FC; --panel:#FFFFFF; --card:#FFFFFF; --panel2:#EDF3F9;
  --border:#DFE7EF; --track:#EDF2F7;
  --navy:#0A1E33; --navy2:#12304F; --blue:#14477E; --blue2:#3A7BC8; --blue-wash:#E8F0F8;
  --gold:#B0872C; --gold-b:#96700A; --gold-d:#8A6A1E; --gold-m:#D9B45B; --gold-bright:#D9B45B; --gold-deep:#8A6A1E;
  --text:#141C28; --text2:#4C5768; --text3:#8B95AC;
}