/* =====================================================================
   Şahin Business Consulting — Landingpage
   Corporate Design "Werkstatt-Stahl" v1 (strikt)
   Flach: keine Schatten, keine Verläufe, keine 3D-Effekte.
   Fonts lokal eingebettet (DSGVO — kein Google-Fonts-CDN).
   ===================================================================== */

/* ---------- Fonts (lokal, WOFF2) ----------------------------------- */
/* latin + latin-ext (latin-ext enthält das Ş in "Şahin", U+015E) */

@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/montserrat-700.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/montserrat-700-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,U+FB00-FB06;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/montserrat-800.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/montserrat-800-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,U+FB00-FB06;
}

@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter-400.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+2074,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; font-display:swap;
  src:url('../fonts/inter-400-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,U+FB00-FB06;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/inter-500.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+2074,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:500; font-display:swap;
  src:url('../fonts/inter-500-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,U+FB00-FB06;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/inter-600.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+2074,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:600; font-display:swap;
  src:url('../fonts/inter-600-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,U+FB00-FB06;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/inter-700.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+2074,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:700; font-display:swap;
  src:url('../fonts/inter-700-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,U+FB00-FB06;
}

/* ---------- Design-Tokens (CD Werkstatt-Stahl) -------------------- */
:root{
  --anthrazit:#20262E;
  --tinte:#15191D;
  --bernstein:#E08A1E;
  --bernstein-aktiv:#C9760F;
  --stahl:#5B6770;
  --hairline:#DCDFE2;
  --papier:#F5F4F1;
  --weiss:#FFFFFF;
  --erfolg:#2E7D5B;
  --warnung:#B4540E;
  /* Hilfstöne aus dem CD-Style-Guide (für dunkle Flächen) */
  --sub-dark:#A7B0B8;     /* Sekundärtext auf Anthrazit */
  --border-dark:#46505A;  /* Outline-Button auf Anthrazit */

  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --radius:8px;
  --maxw:1080px;
  --pad:24px;
}

/* ---------- Reset / Basis ----------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--tinte);
  background:var(--papier);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* Tastatur-Fokus klar sichtbar (Barrierefreiheit) */
:focus-visible{
  outline:3px solid var(--bernstein);
  outline-offset:2px;
  border-radius:4px;
}

/* Skip-Link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--bernstein);color:var(--anthrazit);
  font-family:var(--display);font-weight:700;font-size:14px;
  padding:10px 16px;border-radius:var(--radius);
}
.skip-link:focus{left:16px;top:16px}

/* ---------- Layout ------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

section{padding:64px 0;border-bottom:1px solid var(--hairline)}
@media(min-width:720px){section{padding:88px 0}}

h1,h2,h3,h4,.kicker,.btn,.brand-name{font-family:var(--display)}

/* Eyebrow / Kicker — Anthrazit-Text (WCAG AA) mit Bernstein-Akzentstrich */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--anthrazit);
  margin-bottom:12px;
}
.kicker::before{
  content:"";width:20px;height:3px;flex:none;
  background:var(--bernstein);border-radius:2px;
}
/* Akzentlinie (Bernstein) */
.accent{
  display:block;width:52px;height:5px;
  background:var(--bernstein);border-radius:2px;
}

h2{
  font-size:clamp(1.4rem,1.15rem + 1vw,1.6rem); /* ~22–26px */
  font-weight:700;color:var(--anthrazit);letter-spacing:-.2px;line-height:1.25;
  margin-bottom:10px;
  max-width:48ch;            /* Lesebreite (DIN-A4-Regel) auch für Headlines */
  text-wrap:balance;         /* verhindert Ein-Wort-Witwen (progressive enhancement) */
}
.lead{
  color:var(--stahl);
  font-size:1.0625rem; /* 17px */
  max-width:64ch;
  margin-bottom:36px;
}
h3{font-size:1.125rem;font-weight:700;color:var(--anthrazit);margin-bottom:10px;line-height:1.3}
p{margin:0}
p + p{margin-top:12px}

/* ---------- Buttons ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:15px;line-height:1;
  padding:14px 24px;border-radius:var(--radius);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--bernstein);color:var(--anthrazit);border-color:var(--bernstein)}
.btn-primary:hover{background:var(--bernstein-aktiv);border-color:var(--bernstein-aktiv)}
.btn-secondary{background:transparent;color:var(--anthrazit);border-color:var(--anthrazit)}
.btn-secondary:hover{background:var(--anthrazit);color:var(--weiss)}
/* Varianten auf dunklem Grund */
.btn-on-dark-outline{background:transparent;color:var(--weiss);border-color:var(--border-dark)}
.btn-on-dark-outline:hover{background:var(--weiss);color:var(--anthrazit);border-color:var(--weiss)}

/* ---------- Kopfzeile (im Hero) ----------------------------------- */
.site-header{padding:12px 0}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header .logo{height:56px;width:auto}
@media(min-width:720px){.site-header .logo{height:72px}}
/* Header-CTA: transparenter Button mit weißem Rahmen */
.site-header .nav-cta{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--display);font-weight:700;font-size:14px;line-height:1;
  color:var(--weiss);text-decoration:none;white-space:nowrap;
  padding:11px 18px;border:1.5px solid var(--weiss);border-radius:var(--radius);
  transition:background-color .15s ease,color .15s ease;
}
.site-header .nav-cta:hover{background:var(--weiss);color:var(--anthrazit)}
@media(max-width:430px){
  .site-header .nav-cta{font-size:12px;padding:9px 12px}
}

/* ---------- Hero (dunkel) ----------------------------------------- */
/* overflow-x:clip — der radiale Bernstein-Glow (122% breit) darf auf kleinen
   Viewports keinen horizontalen Scroll erzeugen; kappt nur den weichen Glow-Rand,
   Float-Chip und der Desktop-Bleed (innerhalb Viewport) bleiben unberührt. */
.hero{background:var(--anthrazit);color:var(--weiss);overflow-x:clip}
.hero-inner{padding:32px 0 64px;max-width:68ch}
@media(min-width:720px){.hero-inner{padding:36px 0 80px}}
.hero .accent{margin-bottom:18px}
.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,1.3rem + 1.9vw,2.3rem); /* ~27–37px — v4: eine Stufe kleiner, CTA über die Falz */
  line-height:1.12;letter-spacing:-.5px;color:var(--weiss);
  margin-bottom:10px;
  max-width:none;text-wrap:balance;
}
.hero .subline{
  color:var(--sub-dark);
  font-size:clamp(1.0625rem,1rem + .4vw,1.2rem);
  line-height:1.5;max-width:54ch;margin-bottom:16px; /* v4: gestrafft */
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .micro-trust{
  display:flex;align-items:center;gap:8px;
  margin-top:18px;color:var(--sub-dark);font-size:14px;
}
.hero .micro-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--bernstein);flex:none}

/* ---------- Generische Karten ------------------------------------- */
.grid{display:grid;gap:20px}
.cols-2{grid-template-columns:1fr}
.cols-3{grid-template-columns:1fr}
.cols-4{grid-template-columns:1fr}
@media(min-width:640px){
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
}
.card{
  background:var(--weiss);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:28px 26px;
}

/* ---------- Problem-Sektion --------------------------------------- */
.problem-item{
  background:var(--weiss);
  border:1px solid var(--hairline);
  border-left:3px solid var(--bernstein);
  border-radius:var(--radius);
  padding:22px 24px;
  color:var(--anthrazit);
  font-size:1.0625rem;
}

/* ---------- Bausteine (3 Karten mit Nummer) ----------------------- */
.baustein .num{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:15px;
  width:38px;height:38px;border-radius:var(--radius);
  background:var(--bernstein);color:var(--anthrazit);
  margin-bottom:18px;
}
.baustein p{color:var(--stahl)}

/* ---------- Der Weg (4 Schritte) ---------------------------------- */
.steps{list-style:none;display:grid;gap:20px}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:8px}
.step .step-num{
  font-family:var(--display);font-weight:800;font-size:34px;line-height:1;
  color:var(--bernstein);display:block;margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.step h3{margin-bottom:8px}
.step p{color:var(--stahl);font-size:.9375rem}
/* feine Verbindungslinie zwischen Schritten (nur Desktop) */
@media(min-width:980px){
  .step:not(:last-child)::after{
    content:"";position:absolute;top:17px;right:-10px;width:20px;height:1px;
    background:var(--hairline);
  }
}

/* ---------- Vertrauen (4 Punkte) ---------------------------------- */
.trust-grid{display:grid;gap:24px}
@media(min-width:720px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
.trust-item{border-left:3px solid var(--bernstein);padding:4px 0 4px 18px}
.trust-item h3{margin-bottom:6px}
.trust-item p{color:var(--stahl);font-size:.9375rem}

/* ---------- Kontakt (dunkel) -------------------------------------- */
.contact{background:var(--anthrazit);color:var(--weiss);border-bottom:0}
.contact .accent{margin-bottom:22px}
.contact h2{color:var(--weiss)}
.contact .lead{color:var(--sub-dark);margin-bottom:32px}
.contact-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.contact-detail{
  margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 28px;
  color:var(--sub-dark);font-size:15px;
}
.contact-detail a{color:var(--weiss);text-decoration:none;border-bottom:1px solid var(--border-dark)}
.contact-detail a:hover{border-bottom-color:var(--bernstein)}

/* ---------- Footer ------------------------------------------------- */
.site-footer{background:var(--tinte);color:var(--sub-dark);padding:48px 0 56px}
.site-footer .foot-top{
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;
}
.site-footer .logo{height:56px;width:auto;margin-bottom:14px}
.site-footer .foot-tagline{max-width:42ch;font-size:14px;line-height:1.6}
.site-footer .foot-links{display:flex;flex-wrap:wrap;gap:18px;font-size:14px}
.site-footer .foot-links a{
  color:var(--weiss);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.site-footer .foot-links a:hover{border-bottom-color:var(--bernstein)}
.site-footer .foot-bottom{
  margin-top:36px;padding-top:20px;border-top:1px solid #2A3038;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:13px;color:var(--sub-dark);
}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------------- */
.legal{background:var(--papier)}
.legal-header{background:var(--anthrazit);color:var(--weiss);padding:36px 0}
.legal-header .logo{height:36px;margin-bottom:18px}
.legal-header h1{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,1.3rem+1.5vw,2.1rem);color:var(--weiss)}
.legal-main{padding:48px 0 72px;max-width:760px}
.legal-main h2{margin-top:36px}
.legal-main h2:first-child{margin-top:0}
.legal-main h3{margin-top:22px}
.legal-main p,.legal-main li{font-size:1rem;color:var(--tinte)}
.legal-main p + p{margin-top:12px}
.legal-main ul{margin:10px 0 10px 22px}
.legal-main li{margin:6px 0}
.legal-main a{color:var(--anthrazit);text-decoration:underline;text-underline-offset:2px}
.legal-main a:hover{color:var(--bernstein-aktiv)}
.back-link{display:inline-block;margin-top:8px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--weiss);text-decoration:none;border-bottom:2px solid var(--bernstein);padding-bottom:2px}
.notice{
  background:#FBEEE6;border:1px solid #F2D2BE;border-left:4px solid var(--warnung);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 28px;
  font-size:.9375rem;color:var(--anthrazit);
}
.notice strong{font-family:var(--display);color:var(--warnung)}

/* ---------- Sanfte Einblend-Animation (nur mit JS) ---------------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-visible{opacity:1;transform:none}

/* Hero-Erstanimation (rein CSS, gestaffelt) */
.js .hero .anim{opacity:0;animation:rise .7s ease forwards}
.js .hero .anim.d1{animation-delay:.05s}
.js .hero .anim.d2{animation-delay:.18s}
.js .hero .anim.d3{animation-delay:.31s}
.js .hero .anim.d4{animation-delay:.44s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Bewegung reduzieren, wenn vom System gewünscht */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .hero .anim{opacity:1;animation:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* =====================================================================
   v2 — Werbetext-Veredelung (Hook, Denkfehler, Zukunftsbild, FAQ, CTAs)
   Nutzt ausschließlich die bestehenden CD-Tokens. Flach, kein Schatten.
   ===================================================================== */

/* Hero: Mikrozeile direkt unter dem Button (Risk-Reversal) */
.hero .hero-microline{
  margin-top:14px;color:var(--sub-dark);font-size:14px;max-width:54ch;
}

/* Problem-Items: jetzt mit Titel + Text */
.problem-item h3{margin-bottom:8px;font-size:1rem}
.problem-item p{color:var(--stahl);font-size:.9375rem}

/* Betonter Abschluss-Absatz (Problem, Zukunft) */
.section-close{
  margin-top:30px;max-width:64ch;
  font-size:1.0625rem;line-height:1.6;color:var(--anthrazit);font-weight:500;
  border-top:1px solid var(--hairline);padding-top:24px;
}

/* Denkfehler-Sektion (Belief-Blöcke) */
.beliefs{display:grid;gap:16px;max-width:780px}
.belief{
  background:var(--weiss);border:1px solid var(--hairline);
  border-left:3px solid var(--hairline);
  border-radius:var(--radius);padding:22px 24px;
}
.belief-label{
  display:block;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--stahl);margin-bottom:8px;
}
.belief p{color:var(--anthrazit)}
.belief p + p{margin-top:10px}
.belief.belief-solution{border-left-color:var(--bernstein)}
/* Label auf Anthrazit (WCAG AA) — der Bernstein-Akzent lebt in der linken Kante */
.belief.belief-solution .belief-label{color:var(--anthrazit)}
/* Aufzählung in der Lösungs-Karte */
.belief-points{list-style:none;margin:10px 0;display:grid;gap:8px}
.belief-points li{
  position:relative;padding-left:26px;color:var(--anthrazit);font-size:.9375rem;
}
.belief-points li::before{
  content:"" / "";position:absolute;left:0;top:.42em;
  width:12px;height:7px;
  border-left:2.5px solid var(--bernstein);border-bottom:2.5px solid var(--bernstein);
  transform:rotate(-45deg);
}

/* "Das heißt für Sie:" in den Bausteinen hervorheben */
.baustein p strong{color:var(--anthrazit);font-weight:700}

/* Zwischen-CTA nach Schlüsselsektionen */
.section-cta{
  margin-top:36px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.section-cta-note{color:var(--stahl);font-size:.9375rem;max-width:60ch}

/* Zukunftsbild-Karten */
.future-card{
  background:var(--weiss);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:28px 26px;
}
.future-card h3{margin-bottom:10px}
.future-card p{color:var(--stahl)}

/* FAQ — natives Accordion (kein JS, barrierearm) */
.faq{display:grid;gap:12px;max-width:840px}
.faq-item{
  background:var(--weiss);border:1px solid var(--hairline);
  border-radius:var(--radius);overflow:hidden;
}
.faq-item summary{
  cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:1.0625rem;color:var(--anthrazit);
  padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+" / "";font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;
  color:var(--bernstein-aktiv);flex:none;
}
.faq-item[open] summary::after{content:"\2013" / ""} /* en-dash, für Screenreader stumm */
/* Hover per Unterstreichung statt Farbwechsel (WCAG-AA-Kontrast bleibt erhalten) */
.faq-item summary:hover{
  text-decoration:underline;text-decoration-color:var(--bernstein);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
.faq-body{padding:0 22px 20px}
.faq-body p{color:var(--stahl)}

/* Kontakt: Mikrozeile vor den Buttons */
.contact-microline{
  color:var(--sub-dark);font-size:15px;max-width:62ch;margin-bottom:28px;
}

/* Datenschutz-Hinweisbanner (unten fixiert, CD-konform, flach) */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--anthrazit);color:var(--weiss);
  border-top:1px solid var(--border-dark);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px 24px;padding:14px 20px;
}
.cookie-banner-text{
  margin:0;font-size:.875rem;line-height:1.5;color:var(--sub-dark);max-width:62ch;
}
.cookie-banner-text a{
  color:var(--weiss);text-decoration:none;
  border-bottom:1px solid var(--bernstein);padding-bottom:1px;
}
.cookie-banner-text a:hover{color:var(--bernstein)}
.cookie-banner-btn{padding:10px 22px;font-size:14px;flex:none;min-height:44px}

/* Hero: Scan-Bullets (Webdesign-Skill: Bullet Points im ersten Bildschirm) */
.hero-bullets{
  list-style:none;margin:0 0 16px;display:grid;gap:7px;max-width:54ch;
}
.hero-bullets li{
  position:relative;padding-left:28px;
  color:var(--sub-dark);font-size:1rem;line-height:1.5;
}
.hero-bullets li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:14px;height:8px;
  border-left:3px solid var(--bernstein);border-bottom:3px solid var(--bernstein);
  transform:rotate(-45deg);
}

/* Für-wen-Sektion (Eignung / Demarketing) */
.fit-grid{display:grid;gap:20px}
@media(min-width:760px){.fit-grid{grid-template-columns:1fr 1fr}}
.fit{border-radius:var(--radius);padding:26px 26px 22px;border:1px solid var(--hairline)}
.fit h3{margin-bottom:14px}
.fit ul{list-style:none;margin:0;display:grid;gap:10px}
.fit li{position:relative;padding-left:26px;font-size:.9375rem;color:var(--anthrazit)}
.fit-do{background:#EAF3EE;border-color:#BCDFCC}
.fit-do li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:12px;height:7px;
  border-left:2.5px solid var(--erfolg);border-bottom:2.5px solid var(--erfolg);
  transform:rotate(-45deg);
}
.fit-dont{background:#FBEEE6;border-color:#F2D2BE}
.fit-dont li::before{
  content:"\00D7" / "";position:absolute;left:2px;top:0;
  font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.4;
  color:var(--warnung);
}
#fuer-wen .section-cta-note{margin-top:22px}

/* =====================================================================
   v3 — Visuelles Upgrade: "Cockpit als Held"
   Hero-Produkt-Mockup mit Bernstein-Glow, dosierter Hell-Dunkel-Rhythmus
   (dunkle Bühnen: Hero · #einblick · #kontakt), #einblick als
   Feature-Block-Reihe mit cockpit-treuen Mini-Mocks, ein Bernstein-
   Schlüsselwort pro Headline (nur auf dunklem Grund — WCAG).
   WICHTIG: Schatten/Glow sind bewusst NUR der Produkt-Inszenierung
   vorbehalten; das restliche CD "Werkstatt-Stahl" bleibt flach.
   CD-Tokens unverändert (Konserven-Wiedererkennung).
   ===================================================================== */

/* --- Bernstein-Schlüsselwort in Headlines (nur dunkler Grund) -------- */
.hl{color:var(--bernstein)}

/* --- Hero: Zwei-Spalten-Raster (Text + Produkt-Mockup) -------------- */
.hero-grid{padding-bottom:8px}
.hero-grid > .hero-inner{padding-top:24px;padding-bottom:0;max-width:none}
@media(min-width:980px){
  .hero-grid{
    display:grid;
    /* v4: Im Band 980–1239px (ohne Bleed, knappe Wrap-Breite) bekommt der TEXT die etwas
       größere Spalte — so bleibt die Headline kurzzeilig und der Haupt-CTA über der Falz.
       Das Cockpit muss erst bei 1440 ≥560px sein (DoD); hier darf es kleiner sein. */
    grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);
    gap:clamp(32px,3vw,48px);
    /* v4: oben ausrichten — das Cockpit darf den Text NICHT nach unten zentrieren */
    align-items:start;
    padding-bottom:24px;
  }
  .hero-grid > .hero-inner{padding-top:8px}
  /* v4: Deckel raus — die Spaltenbreite begrenzt die Lesezeile bereits;
     so brechen Subline/Bullets auf weniger Zeilen → Haupt-CTA über der Falz. */
  .hero-grid h1,.hero-grid .subline,.hero-grid .hero-bullets{max-width:none}
}
/* v4: ab großem Desktop (≥1240px) reicht das Cockpit kontrolliert nach RECHTS über die
   Body-Breite hinaus (Text + Logo bleiben links bündig) → "größer"-Wirkung, Cockpit ≥560px
   beim 1440-Shot, Haupt-CTA bleibt über der Falz. Erst ab 1240px, damit nie Overflow entsteht. */
@media(min-width:1240px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.13fr); /* jetzt Cockpit-favorisiert */
    margin-right:calc(var(--maxw) - 1180px);              /* -100px, nur rechte Seite */
  }
}

/* --- Produkt-Bühne (Mockup-Cluster) --------------------------------- */
.hero-media{position:relative;margin:40px auto 8px;max-width:560px}
@media(min-width:980px){.hero-media{margin:0;max-width:none}}

.cockpit-stage{position:relative}

/* Bernstein-Glow hinter dem Mockup (radial, CD-eigen — leuchtet, statt zu färben) */
.cockpit-stage .glow{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;top:44%;transform:translate(-50%,-50%);
  width:122%;height:122%;
  background:radial-gradient(closest-side,
    rgba(224,138,30,.30), rgba(224,138,30,.10) 52%, transparent 72%);
  filter:blur(6px);
}

/* Gerahmtes Cockpit-Screenshot */
.cockpit-frame{
  position:relative;z-index:1;margin:0;
  border:1px solid var(--border-dark);border-radius:12px;overflow:hidden;
  box-shadow:0 26px 64px -30px rgba(0,0,0,.78), 0 10px 24px -18px rgba(0,0,0,.6);
}
.cockpit-frame img{width:100%;height:auto;display:block;border-radius:12px}
@media(min-width:980px){
  .cockpit-frame{transform:perspective(1700px) rotateY(-4deg) rotateX(1.4deg)}
}

/* Schwebende Akzent-Chip-Karte: erzählt den Motor (Belegautomation) + Tiefe */
.float-chip{
  position:absolute;z-index:2;left:6px;bottom:-20px;
  display:flex;align-items:center;gap:11px;
  background:var(--weiss);color:var(--anthrazit);
  border:1px solid var(--hairline);border-radius:11px;
  padding:11px 15px 11px 12px;max-width:235px;
  box-shadow:0 18px 38px -20px rgba(0,0,0,.6);
}
@media(min-width:980px){.float-chip{left:-26px;bottom:-24px}}
@media(max-width:360px){.float-chip{display:none}}
.float-chip .chip-ic{width:30px;height:30px;flex:none;border-radius:50%;background:var(--bernstein);position:relative}
.float-chip .chip-ic::after{
  content:"";position:absolute;left:10px;top:7px;width:8px;height:13px;
  border-right:3px solid var(--anthrazit);border-bottom:3px solid var(--anthrazit);transform:rotate(45deg);
}
.float-chip .chip-t{font-family:var(--display);font-weight:700;font-size:13px;line-height:1.2}
.float-chip .chip-sub{display:block;color:var(--stahl);font-weight:500;font-size:12px;margin-top:2px}

/* Ehrlichkeits-Beschriftung unter dem Mockup */
.cockpit-note{
  margin:30px auto 0;text-align:center;color:var(--sub-dark);
  font-size:12px;line-height:1.45;max-width:42ch;
}
@media(min-width:980px){.cockpit-note{margin-top:26px}}

/* --- Dunkle Bühnen-Sektion (Hell-Dunkel-Rhythmus) ------------------- */
.stage{background:var(--anthrazit);color:var(--weiss);border-bottom:0;position:relative;overflow:hidden}
.stage .kicker{color:var(--weiss)}
.stage h2{color:var(--weiss)}
.stage .lead{color:var(--sub-dark)}

/* --- #einblick: Feature-Block-Reihe -------------------------------- */
.einblick-head{max-width:62ch}
.feature-blocks{display:grid;gap:18px;margin-top:42px}
@media(min-width:760px){.feature-blocks{grid-template-columns:1fr 1fr;gap:22px}}
.feature{
  display:flex;flex-direction:column;gap:18px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--border-dark);border-radius:12px;
  padding:22px 22px 24px;
}
.feature h3{color:var(--weiss);margin:0;font-size:1.0625rem}
.feature-bullets{list-style:none;display:grid;gap:9px;margin:0}
.feature-bullets li{position:relative;padding-left:26px;color:var(--sub-dark);font-size:.9375rem;line-height:1.5}
.feature-bullets li::before{
  content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;
  border-left:2.5px solid var(--bernstein);border-bottom:2.5px solid var(--bernstein);transform:rotate(-45deg);
}
.feature-text h3{margin-bottom:6px}

/* --- Cockpit-treue Mini-Mocks (weiße Kacheln auf dunkler Bühne) ----- */
.mini{
  background:var(--weiss);border:1px solid var(--hairline);border-radius:10px;
  padding:16px 16px 15px;color:var(--anthrazit);
  box-shadow:0 20px 44px -28px rgba(0,0,0,.7);
}
.mini-label{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--stahl)}
.mini-value{font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1.1;margin-top:7px;font-variant-numeric:tabular-nums}
.mini-sub{font-size:12px;color:var(--stahl);margin-top:7px;line-height:1.4}
.mini-delta{display:inline-flex;align-items:center;gap:4px;color:var(--erfolg);font-weight:700;font-size:12px;margin-top:7px}
.mini-delta::before{content:"\25B2";font-size:9px}

/* Mini-Mock: Belegfluss (Motor) */
.mini-flow .flow-row{display:flex;align-items:center;gap:12px}
.mini-flow .flow-doc{
  width:34px;height:42px;flex:none;border-radius:5px;
  background:var(--papier);border:1px solid var(--hairline);position:relative;
}
.mini-flow .flow-doc::before{content:"";position:absolute;left:7px;right:7px;top:11px;height:2px;background:var(--stahl);
  box-shadow:0 5px 0 var(--stahl),0 10px 0 var(--stahl),0 15px 0 var(--hairline);}
.mini-flow .flow-text{font-size:12.5px;color:var(--stahl);line-height:1.35;flex:1 1 auto}
.mini-flow .flow-text b{color:var(--anthrazit);font-weight:700}
.mini-flow .flow-check{width:26px;height:26px;flex:none;border-radius:50%;background:var(--bernstein);position:relative}
.mini-flow .flow-check::after{content:"";position:absolute;left:9px;top:6px;width:6px;height:11px;
  border-right:2.5px solid var(--anthrazit);border-bottom:2.5px solid var(--anthrazit);transform:rotate(45deg);}
.mini-flow .flow-cap{margin-top:12px;font-size:12px;color:var(--stahl)}

/* Mini-Mock: Liquiditäts-Vorschau (Forecast) */
.mini-chart svg{display:block;width:100%;height:auto;margin-top:10px}

/* --- Reduzierte Bewegung: Mockup-Transform/Animation aus ------------- */
@media(prefers-reduced-motion:reduce){
  .cockpit-frame{transform:none !important}
}

/* #einblick: Demo-Hinweis ganz oben (Ehrlichkeit zuerst sichtbar, auch mobil) */
.einblick-head .lead{margin-bottom:12px}
.demo-hint{color:var(--sub-dark);font-size:13px;margin:0;max-width:54ch}

/* =====================================================================
   v4 — Beweis-Aufwertung #praxis: Fallstudien-Struktur + Werkstatt-Fotos
        + belegbare KPI-Display-Zahl. Nur bestehende CD-Tokens.
        Schatten ausschließlich für Foto-/KPI-Inszenierung (Beweis = Held);
        restliches CD "Werkstatt-Stahl" bleibt flach. #praxis bleibt hell
        (Hell-Dunkel-Rhythmus: dunkle #einblick davor → helle #praxis).
   ===================================================================== */

.praxis-grid{display:grid;gap:28px;margin-top:4px}
@media(min-width:880px){
  .praxis-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
}

/* Fallstudie: Problem → Ziel → Lösung (gestapelte Schritte) */
.case{display:grid;gap:18px}
.case-step{padding-left:18px;border-left:3px solid var(--hairline)}
.case-step:last-child{border-left-color:var(--bernstein)}
.case-label{
  display:block;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--stahl);margin-bottom:6px;
}
.case-step p{color:var(--anthrazit);font-size:1rem;line-height:1.6}

/* KPI-Display: dunkle Karte — Bernstein-Zahl nur auf dunklem Grund (WCAG AA) */
.kpi-display{
  margin-top:26px;background:var(--anthrazit);color:var(--weiss);
  border-radius:var(--radius);padding:22px 24px;
  box-shadow:0 20px 44px -28px rgba(0,0,0,.5);
}
.kpi-num{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,2rem + 2vw,3rem);line-height:1;
  color:var(--bernstein);font-variant-numeric:tabular-nums;
}
.kpi-unit{display:block;margin-top:8px;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--weiss)}
.kpi-sub{display:block;margin-top:6px;font-size:13px;color:var(--sub-dark)}

/* Ehrlichkeits-Absatz (ruhiger, n=1 wird hier offen gesagt) */
.praxis-honesty{margin-top:22px;color:var(--stahl);font-size:.9375rem;line-height:1.6;max-width:60ch}

/* Foto-Karten (Beweis-Inszenierung): Held (Hochformat) rechts, Beleg (Querformat) unter der Story.
   width/height an den <img> reservieren den Platz → kein Layout-Sprung (CLS). */
.proof-photo{
  margin:0;background:var(--weiss);border:1px solid var(--hairline);
  border-radius:12px;overflow:hidden;
  box-shadow:0 22px 48px -30px rgba(0,0,0,.55);
}
.proof-photo img{width:100%;height:auto;display:block}
.proof-photo figcaption{
  padding:12px 16px;font-size:13px;color:var(--stahl);line-height:1.45;
  border-top:1px solid var(--hairline);
}
/* Beleg-Foto: unterstützend unter der Fallstudie (in der Story-Spalte) */
.praxis-story .proof-photo--beleg{margin-top:24px}
/* Held-Foto (Hochformat) füllt die rechte Spalte; vertikal zentriert neben dem höheren Story-Stapel */
@media(min-width:880px){.praxis-media{align-self:center}}