/* =====================================================================
   Ş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{
  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) ----------------------------------------- */
.hero{background:var(--anthrazit);color:var(--weiss)}
.hero-inner{padding:32px 0 64px;max-width:68ch}
@media(min-width:720px){.hero-inner{padding:36px 0 80px}}
.hero .accent{margin-bottom:24px}
.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,1.4rem + 2.4vw,2.65rem); /* ~30–42px */
  line-height:1.12;letter-spacing:-.5px;color:var(--weiss);
  margin-bottom:16px;
  max-width:none;text-wrap:balance;
}
.hero .subline{
  color:var(--sub-dark);
  font-size:clamp(1.0625rem,1rem + .4vw,1.2rem);
  line-height:1.55;max-width:54ch;margin-bottom:32px;
}
.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)}
/* Platzhalter-Hinweis (Terminbuchung später) — wird nicht angezeigt */

/* ---------- 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)}
.todo{
  background:#FFFFFF;border:1px dashed var(--stahl);border-radius:var(--radius);
  padding:4px 8px;font-size:.875rem;color:var(--warnung);font-weight:600;
}

/* ---------- 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;
}

/* Einblick / Produkt-Demo (Beispiel-Screenshot) */
.demo-shot{margin:0}
.demo-shot img{
  width:100%;height:auto;display:block;
  background:var(--weiss);
  border:1px solid var(--hairline);border-radius:var(--radius);
}
.demo-shot figcaption{margin-top:12px;font-size:.8125rem;color:var(--stahl)}

/* 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}

/* Hero: Scan-Bullets (Webdesign-Skill: Bullet Points im ersten Bildschirm) */
.hero-bullets{
  list-style:none;margin:0 0 22px;display:grid;gap:8px;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}