/* site.css — Komponenten und Website-Muster auf Basis der Car-Controlling-Tokens.
   Komponenten sind die CSS-Entsprechung der JSX-Definitionen aus components/;
   Werte (Höhen, Radien, Zustände) 1:1 übernommen. */

/* ══ Buttons ══════════════════════════════════════════════════════════════ */
.cc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--control-h-md); padding:0 var(--pad-control-x);
  font-family:var(--font-sans); font-size:15px; font-weight:var(--weight-semibold);
  letter-spacing:-.005em; line-height:1; text-decoration:none; white-space:nowrap;
  border-radius:var(--radius-md); cursor:pointer; border:1px solid transparent;
  transition:var(--transition-control);
}
.cc-btn:active{transform:translateY(1px)}
.cc-btn[disabled]{opacity:.45; cursor:not-allowed}
.cc-btn-lg{height:var(--control-h-lg); padding:0 22px; font-size:16px; gap:10px}
.cc-btn-sm{height:var(--control-h-sm); padding:0 12px; font-size:13px; gap:6px}

.cc-btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent); box-shadow:var(--shadow-xs)}
.cc-btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:var(--shadow-accent); color:var(--on-accent)}
.cc-btn-primary:active{background:var(--accent-press); border-color:var(--accent-press); box-shadow:none}

.cc-btn-secondary{background:var(--action-navy); color:var(--text-inverse); border-color:var(--action-navy); box-shadow:var(--shadow-xs)}
.cc-btn-secondary:hover{background:var(--action-navy-hover); border-color:var(--action-navy-hover); box-shadow:var(--shadow-md); color:var(--text-inverse)}
.cc-btn-secondary:active{background:var(--action-navy-press); box-shadow:none}

.cc-btn-outline{background:var(--surface-card); color:var(--text-strong); border-color:var(--border-default)}
.cc-btn-outline:hover{background:var(--cc-blue-50); border-color:var(--cc-blue-300); color:var(--text-strong)}
.cc-btn-outline:active{background:var(--cc-blue-100); border-color:var(--cc-blue-400)}

.cc-btn-ghost{background:transparent; color:var(--text-strong)}
.cc-btn-ghost:hover{background:var(--cc-steel-100); color:var(--text-strong)}

.cc-btn-ondark{background:rgba(255,255,255,.10); color:var(--text-inverse); border-color:rgba(255,255,255,.22)}
.cc-btn-ondark:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.36); color:var(--text-inverse)}

/* ══ Karten ═══════════════════════════════════════════════════════════════ */
.cc-card{
  display:flex; flex-direction:column; gap:12px; position:relative;
  padding:var(--pad-card); border-radius:var(--radius-lg);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  color:var(--text-body-color); box-shadow:var(--shadow-sm); text-decoration:none;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
a.cc-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--cc-blue-300)}
.cc-card-flat{box-shadow:none}
.cc-card-sunken{background:var(--surface-sunken); box-shadow:none}
.cc-card-inverse{background:var(--surface-inverse); border-color:var(--border-inverse); color:var(--text-inverse-muted); box-shadow:var(--shadow-lg)}
.cc-card-inverse h1,.cc-card-inverse h2,.cc-card-inverse h3,.cc-card-inverse h4{color:var(--text-inverse)}
.cc-card-accent{background:var(--surface-accent-tint); border-color:var(--cc-orange-200); color:var(--cc-orange-900); box-shadow:none}

.cc-card h3{font-size:var(--text-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3)}
.cc-card p{font-size:var(--text-body-s); line-height:1.6; color:inherit}
.cc-tile{
  width:44px; height:44px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  background:var(--cc-blue-50); color:var(--cc-blue-700); margin-bottom:4px; flex:none;
}
.cc-card-inverse .cc-tile{background:rgba(255,255,255,.10); color:var(--cc-orange-400)}
.cc-card-fuss{
  margin-top:4px; padding-top:14px; border-top:1px solid var(--border-subtle);
  font-size:13px; color:var(--text-muted);
}

/* ══ Kennzahl-Karte ═══════════════════════════════════════════════════════ */
.cc-stat{
  display:flex; flex-direction:column; gap:8px; padding:var(--pad-card);
  border-radius:var(--radius-lg); background:var(--surface-card);
  border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
}
.cc-stat .lab{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted);
}
.cc-stat .val{
  font-family:var(--font-display); font-size:var(--text-metric); line-height:var(--lh-metric);
  letter-spacing:var(--ls-metric); font-weight:var(--weight-bold);
  font-variant-numeric:tabular-nums; color:var(--text-strong);
}
.cc-stat .cap{font-size:12px; color:var(--text-muted)}
.cc-stat-inverse{background:var(--surface-inverse); border-color:var(--border-inverse); box-shadow:none}
.cc-stat-inverse .lab,.cc-stat-inverse .cap{color:var(--text-inverse-muted)}
.cc-stat-inverse .val{color:var(--text-inverse)}

/* ══ Status-Pillen ════════════════════════════════════════════════════════ */
.cc-pill{
  display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px 0 9px;
  border-radius:var(--radius-pill); font-size:12.5px; font-weight:var(--weight-semibold);
  letter-spacing:.01em; line-height:1; white-space:nowrap;
}
.cc-pill .dot{width:7px; height:7px; border-radius:50%; flex:none}
.cc-pill-idle{background:var(--status-idle-bg); color:var(--status-idle-fg)}
.cc-pill-idle .dot{background:var(--status-idle-dot)}
.cc-pill-active{background:var(--status-active-bg); color:var(--status-active-fg)}
.cc-pill-active .dot{background:var(--status-active-dot)}
.cc-pill-warn{background:var(--status-warn-bg); color:var(--status-warn-fg)}
.cc-pill-warn .dot{background:var(--status-warn-dot)}
.cc-pill-alert{background:var(--status-alert-bg); color:var(--status-alert-fg)}
.cc-pill-alert .dot{background:var(--status-alert-dot)}
.cc-pill-done{background:var(--status-done-bg); color:var(--status-done-fg)}
.cc-pill-done .dot{background:var(--status-done-dot)}

/* ══ Tag ══════════════════════════════════════════════════════════════════ */
.cc-tag{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px;
  border-radius:var(--radius-pill); font-size:12.5px; font-weight:var(--weight-medium);
  background:var(--cc-steel-100); color:var(--cc-steel-700); border:1px solid transparent;
}
.cc-tag-outline{background:transparent; border-color:var(--border-default)}
.cc-tag-accent{background:var(--surface-accent-tint); color:var(--cc-orange-800)}

/* ══ Hinweis / Alert ══════════════════════════════════════════════════════ */
.cc-alert{
  border-radius:var(--radius-md); background:var(--surface-card);
  border:1px solid var(--border-subtle); border-left:3px solid var(--cc-blue-500);
  padding:14px 18px; font-size:var(--text-body-s); line-height:1.6; color:var(--text-body-color);
}
.cc-alert b{color:var(--text-strong); font-weight:var(--weight-semibold)}
.cc-alert-warn{border-left-color:var(--cc-amber-600); background:var(--cc-amber-100)}
.cc-alert-warn b{color:var(--status-warn-fg)}
.cc-alert-accent{border-left-color:var(--accent); background:var(--surface-accent-tint)}

/* ══ Seitengerüst ═════════════════════════════════════════════════════════ */
.wrap{max-width:var(--page-max); margin:0 auto; padding:0 32px}
.wrap-schmal{max-width:820px; margin:0 auto; padding:0 32px}

.abschnitt{padding:var(--section-y) 0}
.abschnitt-eng{padding:calc(var(--section-y) * .6) 0}
.abschnitt h2{font-size:var(--text-display-l); line-height:var(--lh-display-l); letter-spacing:var(--ls-display-l); margin-bottom:var(--space-4)}
.abschnitt .einleitung{font-size:var(--text-body-l); line-height:var(--lh-body-l); max-width:var(--measure); margin-bottom:var(--space-12)}
.abschnitt-linie{border-top:1px solid var(--border-subtle)}

/* ══ Kopfleiste ═══════════════════════════════════════════════════════════ */
.kopf{
  position:sticky; top:0; z-index:40; background:rgba(245,247,249,.88);
  backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--border-subtle);
}
.kopf-innen{
  max-width:var(--page-max); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; gap:var(--space-8);
}
.marke{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.marke img{height:30px; width:auto}
.marke .produkt{
  font-family:var(--font-sans); font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; font-weight:var(--weight-semibold); color:var(--text-accent);
  padding-left:12px; border-left:1px solid var(--border-default); line-height:1;
}
.kopf-nav{display:flex; align-items:center; gap:var(--space-8)}
.kopf-nav a{
  color:var(--text-strong); text-decoration:none; font-size:var(--text-body-s);
  font-weight:var(--weight-medium); padding:4px 0; border-bottom:2px solid transparent;
}
.kopf-nav a:hover{color:var(--text-link-hover)}
.kopf-nav a[aria-current="page"]{color:var(--text-strong); border-bottom-color:var(--accent)}
.nav-schalter{display:none}

/* ══ Hero ═════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; overflow:hidden; background:var(--gradient-hero);
  color:var(--text-inverse-muted); padding:var(--section-y) 0;
}
.hero::before{content:""; position:absolute; inset:0; background:var(--pattern-diagonal); pointer-events:none}
/* Signatur-Motiv: die Transfer-Diagonale, 22° nach vorn. Genau ein Keil pro Ansicht. */
.hero::after{
  content:""; position:absolute; top:-10%; right:-6%; width:190px; height:130%;
  background:var(--gradient-accent); opacity:.14;
  transform:skewX(calc(var(--angle-transfer) * -1)); pointer-events:none;
}
.hero > *{position:relative; z-index:1}
.hero h1{
  font-size:var(--text-display-xl); line-height:var(--lh-display-xl); letter-spacing:var(--ls-display-xl);
  color:var(--text-inverse); font-weight:var(--weight-black); max-width:18ch; margin-bottom:var(--space-6);
}
.hero .lead{font-size:var(--text-body-l); line-height:var(--lh-body-l); max-width:var(--measure); color:var(--text-inverse-muted)}
.hero .cc-eyebrow{color:var(--cc-orange-400); margin-bottom:var(--space-4); display:block}
.hero-aktionen{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-10)}

.zahlen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--border-inverse); border:1px solid var(--border-inverse);
  border-radius:var(--radius-lg); overflow:hidden; margin-top:var(--space-16);
}
.zahlen .z{background:var(--cc-blue-900); padding:20px 22px}
.zahlen .zv{
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-metric);
  line-height:var(--lh-metric); letter-spacing:var(--ls-metric);
  font-variant-numeric:tabular-nums; color:var(--text-inverse);
}
.zahlen .zk{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-inverse-muted); margin-top:8px;
}

/* ══ Produktseiten-Kopf ═══════════════════════════════════════════════════ */
.produkt-kopf{padding:var(--space-12) 0 var(--space-10)}
.produkt-kopf h1{
  font-size:var(--text-display-l); line-height:var(--lh-display-l); letter-spacing:var(--ls-display-l);
  margin-bottom:var(--space-4);
}
.produkt-kopf .lead{font-size:var(--text-body-l); line-height:var(--lh-body-l); max-width:var(--measure)}
.produkt-kopf .cc-eyebrow{display:block; margin-bottom:var(--space-3)}
.zurueck{
  display:inline-flex; align-items:center; gap:6px; font-size:var(--text-body-s);
  color:var(--text-muted); margin-bottom:var(--space-6);
}
.zurueck:hover{color:var(--text-link-hover)}

/* ══ Portfolio ════════════════════════════════════════════════════════════ */
.portfolio{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--gutter)}
.kachel{position:relative}
.kachel .kname{
  font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-h3);
  line-height:var(--lh-h3); letter-spacing:var(--ls-h3); color:var(--text-strong);
}
.kachel .kdesc{font-size:var(--text-body-s); line-height:1.6; flex:1; color:var(--text-body-color)}
.kachel .kgo{
  font-size:var(--text-body-s); font-weight:var(--weight-semibold); color:var(--text-link);
  display:inline-flex; align-items:center; gap:6px;
}
a.kachel:hover .kgo{color:var(--text-link-hover)}
.kbadge{position:absolute; top:20px; right:20px}

/* ══ Drei-Spalter (Problem / Lösung / Ergebnis) ═══════════════════════════ */
.ple{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gutter)}
.ple > div{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:var(--pad-card); box-shadow:var(--shadow-sm);
}
.ple h3{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-accent); margin-bottom:var(--space-3);
  font-family:var(--font-sans);
}
.ple p{font-size:var(--text-body-s); line-height:1.65}

/* ══ Werteliste ═══════════════════════════════════════════════════════════ */
.werte{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-10)}
.wert .wnum{
  font-family:var(--font-mono); font-size:var(--text-data-s); font-weight:500;
  letter-spacing:.08em; color:var(--accent); margin-bottom:var(--space-3);
}
.wert h3{font-size:var(--text-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); margin-bottom:var(--space-3)}
.wert p{font-size:var(--text-body-s); line-height:1.65; max-width:52ch}

/* ══ Demo-Rahmen ══════════════════════════════════════════════════════════ */
.demo{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden;
}
.demo-kopf{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:16px var(--pad-card); border-bottom:1px solid var(--border-subtle);
}
.demo-kopf h3{font-size:var(--text-h4); line-height:var(--lh-h4); margin:0; margin-right:auto}
.demo-marke{
  font-size:var(--text-micro); letter-spacing:var(--ls-micro); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-accent);
  background:var(--surface-accent-tint); border-radius:var(--radius-pill); padding:5px 11px;
}
.demo-koerper{padding:var(--pad-card)}
.demo-fuss{
  padding:14px var(--pad-card); border-top:1px solid var(--border-subtle);
  background:var(--surface-sunken); font-size:var(--text-caption); color:var(--text-muted);
}
.demo-schritt{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-muted); margin:0 0 var(--space-3);
}
.demo-schritt:not(:first-child){margin-top:var(--space-8)}

/* Steuerleiste */
.steuer{display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--space-5)}
.chip{
  display:inline-flex; align-items:center; gap:7px; height:var(--control-h-sm); padding:0 14px;
  font-family:var(--font-sans); font-size:13px; font-weight:var(--weight-medium); cursor:pointer;
  border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-strong);
  border-radius:var(--radius-pill); transition:var(--transition-control);
}
.chip:hover{background:var(--cc-blue-50); border-color:var(--cc-blue-300)}
.chip[aria-pressed="true"]{background:var(--action-navy); color:var(--text-inverse); border-color:var(--action-navy)}

/* ══ Technikleiste ════════════════════════════════════════════════════════ */
.stack{display:flex; flex-wrap:wrap; gap:8px}
.stack span{
  font-family:var(--font-mono); font-size:var(--text-data-s); padding:6px 12px;
  border:1px solid var(--border-subtle); background:var(--surface-card);
  border-radius:var(--radius-pill); color:var(--text-body-color);
}

/* ══ Fußzeile ═════════════════════════════════════════════════════════════ */
.fuss{
  background:var(--surface-inverse); color:var(--text-inverse-muted);
  padding:var(--space-16) 0 var(--space-8); margin-top:var(--section-y);
  position:relative; overflow:hidden;
}
.fuss::before{content:""; position:absolute; inset:0; background:var(--pattern-diagonal); pointer-events:none}
.fuss > *{position:relative; z-index:1}
.fuss-raster{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:var(--space-12); margin-bottom:var(--space-12)}
.fuss h4{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-inverse-muted); margin-bottom:var(--space-4);
  font-family:var(--font-sans);
}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:10px}
.fuss a{font-size:var(--text-body-s); color:var(--text-inverse-muted); text-decoration:none}
.fuss a:hover{color:var(--cc-orange-400)}
.fuss .marke img{height:34px}
.fuss-text{font-size:var(--text-body-s); line-height:1.65; max-width:40ch; color:var(--text-inverse-muted); margin-top:var(--space-4)}
.fuss-unten{
  border-top:1px solid var(--border-inverse); padding-top:var(--space-6);
  display:flex; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap;
  font-size:var(--text-caption); color:var(--text-inverse-muted);
}
.fuss-adresse{font-style:normal; font-size:var(--text-body-s); line-height:1.7; color:var(--text-inverse-muted)}

/* ══ Fließtextseiten ══════════════════════════════════════════════════════ */
.text-seite{padding:var(--space-12) 0 var(--space-8)}
.text-seite h1{font-size:var(--text-display-m); line-height:var(--lh-display-m); letter-spacing:var(--ls-display-m); margin-bottom:var(--space-6)}
.text-seite h2{font-size:var(--text-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); margin:var(--space-12) 0 var(--space-4)}
.text-seite h3{font-size:var(--text-h4); line-height:var(--lh-h4); margin:var(--space-6) 0 var(--space-2)}
.text-seite p,.text-seite li{font-size:var(--text-body); line-height:var(--lh-body); margin-bottom:var(--space-3)}
.text-seite ul{padding-left:22px}
.text-seite .cc-measure p{max-width:var(--measure)}

/* Zitat — der einzige Ort, an dem die Serifenkursive vorkommt */
.cc-zitat{
  font-family:var(--font-brand-serif); font-style:italic; font-weight:700;
  font-size:24px; line-height:1.4; color:var(--text-strong);
  border-left:3px solid var(--accent); padding-left:var(--space-6); margin:var(--space-8) 0;
}

/* ══ Mobil ════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .wrap,.wrap-schmal{padding:0 20px}
  .kopf-innen{padding:12px 20px; position:relative}
  .hero h1{font-size:clamp(32px,8vw,44px)}
  .abschnitt h2{font-size:clamp(28px,6vw,36px)}
  .produkt-kopf h1{font-size:clamp(28px,6vw,38px)}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .werte{gap:var(--space-8)}

  .nav-schalter{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; padding:0; background:var(--surface-card);
    border:1px solid var(--border-default); border-radius:var(--radius-md);
    cursor:pointer; color:var(--text-strong);
  }
  .kopf-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface-page); border-bottom:1px solid var(--border-subtle);
    padding:var(--space-2) 20px var(--space-4);
  }
  .kopf-nav.offen{display:flex}
  .kopf-nav a{padding:13px 0; border-bottom:1px solid var(--border-subtle)}
  .kopf-nav a[aria-current="page"]{border-bottom-color:var(--border-subtle)}
}

@media (max-width:520px){
  .portfolio{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr}
  .zahlen{grid-template-columns:1fr 1fr}
  .demo-koerper{padding:var(--pad-card-compact)}
  .marke .produkt{display:none}
}

/* ══ Kleinteile, die die Seiten zusätzlich nutzen ═════════════════════════ */
.text-muted{color:var(--text-muted)}
.label{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-accent); margin:0 0 var(--space-4);
}
.rule{width:52px; height:3px; background:var(--accent); border-radius:var(--radius-pill); margin:var(--space-6) 0}
.kicon{
  width:44px; height:44px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  background:var(--cc-blue-50); color:var(--cc-blue-700); margin-bottom:var(--space-2); flex:none;
}
.kicon svg{width:22px; height:22px}
.ksub{
  font-size:var(--text-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-weight:var(--weight-semibold); color:var(--text-accent); margin-bottom:var(--space-2);
}