/* ==========================================================================
   CAIO als Produkt - Insight-IT v6 "Frosted Dark" Web-Stylesheet
   Basis: PROMPT.md, docs/PLAN.md, docs/PLAN-REV1.md (REV1 verbindlich).
   Reihenfolge: Tokens -> Fonts -> Reset/Base -> Layout -> Komponenten ->
   Utilities -> Motion -> Responsive.
   ========================================================================== */

/* --- 1. Tokens --- */
:root{
  --bg:        #0B0F18;
  --ink:       #F2F5F9;
  --mut:       #C2CBD8;
  --mut2:      #97A3B1;
  --dim:       #5A6572;
  --lime:      #9DCD5A;
  --warn:      #D97706;
  --hairline:  rgba(255,255,255,.09);
  --panel:     rgba(255,255,255,.06);
  --lime-line: rgba(157,205,90,.30);
  --lime-tint: rgba(157,205,90,.07);
  --radius-card: 14px;
  --radius-pill: 99px;
  --container: 1140px;
}

/* --- 2. Fonts --- */
@font-face{
  font-family:'Switzer';
  font-weight:200;
  font-style:normal;
  font-display:swap;
  src:url('../assets/fonts/switzer-200.woff2') format('woff2');
}
@font-face{
  font-family:'Switzer';
  font-weight:700;
  font-style:normal;
  font-display:swap;
  src:url('../assets/fonts/switzer-700.woff2') format('woff2');
}

/* --- 3. Reset / Base --- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  font-family:'Switzer',system-ui,-apple-system,sans-serif;
  font-weight:200;
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0;font-weight:200;letter-spacing:-.015em;line-height:1.1}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Fokus-Sichtbarkeit für Tastatur (R6.8) */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
}

/* --- 4. Layout --- */
.container{
  width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px;
}
.section{padding-block:64px}
.grid{display:grid;gap:16px;grid-template-columns:1fr}

/* --- 5. Komponenten --- */

/* 5.1 Sec-Label */
.sec-label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lime);margin-bottom:16px;
}

/* 5.2 Sec-Titel */
.sec-title{font-size:clamp(26px,4vw,40px);letter-spacing:-.015em;margin-bottom:20px}
.sec-title .em{color:var(--lime);font-weight:700;font-style:normal}

/* 5.3 Lead */
.lead{font-size:18px;line-height:1.6;max-width:68ch;margin-bottom:32px}
.center{text-align:center}

/* 5.4 rule */
.rule{height:1px;width:220px;margin:24px 0 32px;
  background:linear-gradient(90deg,var(--lime),rgba(255,255,255,.06))}
.rule--center{margin-inline:auto}

/* 5.5 brandrow */
.brandrow{display:flex;align-items:center;gap:14px}
.brandrow--footer{gap:12px}
.brandrow .icon{width:24px;height:40px;display:block}
.brandrow--footer .icon{width:26px;height:44px;display:block}
.brandtxt{}
.brandword{font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);line-height:1.05}
.claim{font-size:12px;font-weight:200;letter-spacing:.26em;color:var(--mut2);margin-top:2px}

/* 5.6 buttons */
.btn{
  display:inline-block;font-family:'Switzer',system-ui,-apple-system,sans-serif;
  font-weight:700;font-size:15px;letter-spacing:.01em;line-height:1;
  padding:13px 26px;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;transition:filter .2s ease;
}
.btn--lime{background:var(--lime);color:#0B0F18}
.btn--lime:hover{filter:brightness(1.06)}
.btn--ghost{background:transparent;border:1px solid var(--hairline);color:var(--lime)}
.btn--ghost:hover{border-color:rgba(157,205,90,.5);color:var(--lime)}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.cta-note{font-size:13px;color:var(--mut2)}

/* 5.7 pills */
.pill{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;border-radius:99px;padding:5px 12px;line-height:1;
}
.pill--lime{border:1px solid var(--lime-line);color:var(--lime);background:var(--lime-tint)}
.pill--warn{border:1px solid rgba(217,119,6,.5);color:var(--warn);background:rgba(217,119,6,.08)}
.pill--neutral{border:1px solid var(--hairline);color:var(--mut2);background:var(--panel)}

/* 5.8 cards */
.card{background:var(--panel);border:1px solid var(--hairline);
  border-radius:var(--radius-card);padding:28px 32px}
.card--accent{border-inline-start:2px solid var(--lime)}

/* 5.9 ladder */
.ladder{position:relative}
.ladder .zr{font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--lime);margin-bottom:16px}
.ladder .titel{font-weight:700;font-size:20px;letter-spacing:-.005em;margin-bottom:14px}
.ladder .desc{color:var(--ink);line-height:1.6;max-width:60ch;margin-bottom:24px}
.ladder .fakt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}

/* 5.10 KPI */
.kpi{background:var(--panel);border:1px solid var(--hairline);
  border-radius:var(--radius-card);padding:24px 28px}
.kpi .kptitle{font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.kpi .kpivalue{font-weight:700;font-size:20px;color:var(--ink);line-height:1.25}

/* 5.11 stat */
.stat{text-align:left;padding-bottom:20px}
.stat + .stat{border-bottom:1px solid var(--hairline)}
.stat .z{font-weight:700;font-size:clamp(48px,8vw,88px);letter-spacing:-.02em;line-height:1;color:var(--lime)}
.stat .pct{font-weight:200;font-size:.45em;color:var(--mut2);letter-spacing:0}
.stat .lbl{display:block;font-weight:200;font-size:16px;color:var(--ink);margin-top:12px}

/* 5.12 calc (R7.7: Desktop eine Zeile, Operatoren .35em, Ergebnis 1.5x) */
.calc{background:var(--panel);border:1px solid var(--hairline);
  border-radius:var(--radius-card);padding:40px 44px;margin-top:28px}
.calc + .calc{margin-top:16px}
.calc .label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:12px}
.calc .chain{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:clamp(18px,2.6vw,28px);font-weight:200;letter-spacing:-.01em;line-height:1.4}
.calc .chain .faktor{color:var(--ink)}
.calc .chain .op{color:var(--mut2);padding:0 .35em}
.calc .chain .eq{color:var(--mut2);padding:0 .35em}
.calc .chain .res{font-weight:700;font-size:1.5em;color:var(--lime);margin-inline-start:.2em}
.calc .kontext{font-size:14px;color:var(--mut);margin-top:14px;line-height:1.6;max-width:72ch}

/* ROI-Kalkulator */
.calc-form{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:20px 0 24px}
.calc .feld{display:flex;flex-direction:column;gap:8px}
.calc .feld label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
.calc .feld input{background:var(--bg);border:1px solid var(--hairline);border-radius:8px;color:var(--ink);font-family:'Switzer',system-ui,-apple-system,sans-serif;font-weight:200;font-size:18px;padding:10px 12px;width:100%;-moz-appearance:textfield;appearance:textfield}
.calc .feld input::-webkit-outer-spin-button,.calc .feld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc .feld input:focus{outline:2px solid var(--lime);outline-offset:2px;border-color:rgba(157,205,90,.5)}
.calc-ergebnis{border-top:1px solid var(--hairline);padding-top:20px}
@media (max-width:1024px){.calc-form{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.calc-form{grid-template-columns:repeat(2,1fr)}}

/* 5.13 table */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table tbody td{padding:8px 2px;vertical-align:top;line-height:1.45;border-bottom:1px solid var(--hairline);color:var(--ink)}
.table .td-r{text-align:right;white-space:nowrap;color:var(--lime);font-variant-numeric:tabular-nums;font-weight:700}

/* 5.14 bausteinliste */
.bausteinliste{list-style:none;margin:0;padding:0}
.bausteinliste li{padding:18px 0;border-bottom:1px solid var(--hairline)}
.bausteinliste li:first-child{border-top:1px solid var(--hairline)}
.bausteinliste .b-b{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:4px}
.bausteinliste .b-w{font-weight:200;font-size:15px;color:var(--mut);line-height:1.55}

/* 5.15 hairline-zeilen (Warum / Business Case) */
.zeilengruppe .z{padding:16px 0;border-bottom:1px solid var(--hairline)}
.zeilengruppe .z:first-child{border-top:1px solid var(--hairline)}
.zeilengruppe .z-t{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:4px}
.zeilengruppe .z-w{font-weight:200;font-size:15px;color:var(--mut);line-height:1.55}
.zeilengruppe .z-label{display:block;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.zeilengruppe .z-label--warn{color:var(--warn)}

/* 5.16 business-case block */
.bc-wrap{background:rgba(217,119,6,.04);border:1px solid rgba(217,119,6,.25);
  border-radius:14px;padding:32px}
.bc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:28px}
.bc-title{font-size:clamp(24px,4vw,36px);font-weight:200;letter-spacing:-.015em}
.bc-title .em{color:var(--lime);font-weight:700;font-style:normal}
.bc-hinweis{font-size:13px;color:var(--mut2);margin-top:8px}
.bc-metric{font-weight:700;font-size:clamp(40px,6vw,64px);letter-spacing:-.02em;line-height:1;color:var(--lime)}
.bc-unit{font-weight:200;font-size:.42em;color:var(--mut2);letter-spacing:0}
.bc-sub{font-size:15px;color:var(--mut);line-height:1.55;margin-bottom:8px}
.bc-funnel{font-size:13px;color:var(--mut2);margin-top:16px}

/* 6. Utilities */
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.js .reveal.is-visible{opacity:1;transform:none}

/* 7. Motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal,.js .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* 8. Responsive */
@media (min-width:720px){
  .section{padding-block:84px}
  .grid--2{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:1fr 1fr}
  .grid--4{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .section{padding-block:96px}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .technik-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
}

/* site-header (Sticky, R6.5) */
.site-header{position:sticky;top:0;z-index:20;background:rgba(11,15,24,.92);
  border-bottom:1px solid var(--hairline)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:72px}
@media (min-width:1024px){.header-inner{min-height:80px}}
@supports (backdrop-filter:blur(12px)){
  .site-header{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
@media (prefers-reduced-motion:reduce){
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* footer */
.site-footer{border-top:1px solid var(--hairline);padding-block:28px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.footer-copy{font-size:12px;letter-spacing:.08em;color:var(--mut2)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{font-size:12px;letter-spacing:.03em;color:var(--mut)}
.footer-links a:hover{color:var(--lime)}