/* ============================================================
   reisinger engineering GmbH — Design System
   Grundlage: Brand Manual (Stand 20.11.2025)
   Typo: Montserrat (selbst gehostet, DSGVO-konform)
   Light/Dark Mode · WCAG 2.1 AA · Core Web Vitals
   ============================================================ */

/* ---------- 1. FONTS (lokal, DSGVO-konform) ---------- */
@font-face{font-family:Montserrat;font-weight:300;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-300-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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-weight:700;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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-weight:900;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-900-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* latin-ext (Umlaute ä ö ü ß sicher) */
@font-face{font-family:Montserrat;font-weight:300;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Montserrat;font-weight:400;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Montserrat;font-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Montserrat;font-weight:700;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Montserrat;font-weight:900;font-style:normal;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-900-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- 2. DESIGN TOKENS ---------- */
:root{
  /* Markenfarben */
  --c-dark-grey:#262626; --c-ice-grey:#AAB4B8; --c-warm-white:#FEFCEF;
  --c-white:#FFFFFF; --c-almost-black:#0D0D0D; --c-walnut:#5E5147;

  --ff:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Type-Skala (fluid) */
  --fs-eyebrow:.78rem;
  --fs-h1:clamp(2.55rem,1.6rem + 4.4vw,5.1rem);
  --fs-h2:clamp(1.7rem,1.25rem + 1.9vw,2.55rem);
  --fs-h3:clamp(1.12rem,1.02rem + .45vw,1.35rem);
  --fs-lead:clamp(1.1rem,1rem + .5vw,1.35rem);
  --fs-body:1.0312rem;
  --fs-small:.84rem;

  --lh-tight:1.04; --lh-snug:1.22; --lh-body:1.62;

  /* Raster & Rhythmus */
  --maxw:1180px; --gutter:clamp(1.25rem,5vw,4rem);
  --sec-y:clamp(4.5rem,3rem + 7vw,8.5rem);
  --radius:3px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Farbsystem nach PowerPoint-Vorlage (Stand 06.10.2026)
   DARK  = Intro-Folie: reines Schwarz, Kupfer-Wasser, Creme-Gold (#F8F0C0 = Eggshell lumMod 90 %)
   LIGHT = Vorerfahrungen-Folien: helles Beige-Wasser, Walnut, Kupfer */
:root,:root[data-theme="dark"]{
  --bg:#000000; --bg-2:#0c0a08; --bg-3:#1a1613;
  --fg:#FFFFFF; --fg-body:#EEEAE3; --muted:#D9D4CC; --muted-2:#A89E92;
  --line:rgba(248,240,192,.14); --line-strong:rgba(248,240,192,.32);
  --stroke-a:rgba(208,151,112,.30); --stroke-b:rgba(248,240,192,.14);
  --warm:#F8F0C0; --copper:#D09770; --ink-logo:#FEFCEF;
  --card:#1c1814; --card-line:rgba(208,151,112,.24); --panel:rgba(47,40,35,.72);
  --btn-fg:#000000; --btn-bg:#F8F0C0; --btn-bg-h:#FFF7D2;
  --field-bg:#14110e; --field-line:rgba(248,240,192,.26);
  --ripple:rgba(208,151,112,.62);
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
  --hero-fade:#000000;
  color-scheme:dark;
}
/* LIGHT */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#FEF8EC; --bg-2:#F4E8D8; --bg-3:#EBDCC7;
    --fg:#262626; --fg-body:#33302B; --muted:#5E5147; --muted-2:#6B5E52;
    --line:rgba(94,81,71,.18); --line-strong:rgba(94,81,71,.36);
    --stroke-a:rgba(140,90,51,.30); --stroke-b:rgba(94,81,71,.18);
    --warm:#83532E; --copper:#A8774F; --ink-logo:#262626;
    --card:#FFFCF4; --card-line:rgba(140,90,51,.20); --panel:rgba(94,81,71,.88);
    --btn-fg:#FEFCEF; --btn-bg:#5E5147; --btn-bg-h:#463C34;
    --field-bg:#FFFCF4; --field-line:rgba(94,81,71,.30);
    --ripple:rgba(140,90,51,.45);
    --shadow:0 24px 60px -28px rgba(94,81,71,.35);
    --hero-fade:#FEF8EC;
    color-scheme:light;
  }
}
/* Manuelle Overrides (Toggle) */
:root[data-theme="light"]{
    --bg:#FEF8EC; --bg-2:#F4E8D8; --bg-3:#EBDCC7;
    --fg:#262626; --fg-body:#33302B; --muted:#5E5147; --muted-2:#6B5E52;
    --line:rgba(94,81,71,.18); --line-strong:rgba(94,81,71,.36);
    --stroke-a:rgba(140,90,51,.30); --stroke-b:rgba(94,81,71,.18);
    --warm:#83532E; --copper:#A8774F; --ink-logo:#262626;
    --card:#FFFCF4; --card-line:rgba(140,90,51,.20); --panel:rgba(94,81,71,.88);
    --btn-fg:#FEFCEF; --btn-bg:#5E5147; --btn-bg-h:#463C34;
    --field-bg:#FFFCF4; --field-line:rgba(94,81,71,.30);
    --ripple:rgba(140,90,51,.45);
    --shadow:0 24px 60px -28px rgba(94,81,71,.35);
    --hero-fade:#FEF8EC;
    color-scheme:light;
}

/* ---------- 3. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--ff);font-weight:400;font-size:var(--fs-body);
  line-height:var(--lh-body);color:var(--fg-body);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"tnum" 0;
  overflow-x:hidden;transition:background .4s var(--ease),color .4s var(--ease);
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--warm);outline-offset:3px;border-radius:2px}
::selection{background:var(--warm);color:var(--bg)}

/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--sec-y)}
.section--alt{background:var(--bg-2)}
.skip-link{position:absolute;left:50%;top:-60px;transform:translateX(-50%);
  background:var(--btn-bg);color:var(--btn-fg);padding:.6rem 1.1rem;border-radius:var(--radius);
  z-index:200;transition:top .2s var(--ease);font-weight:600;font-size:var(--fs-small)}
.skip-link:focus{top:.6rem}

/* ---------- 5. TYPOGRAFIE ---------- */
h1,h2,h3,h4{color:var(--fg);line-height:var(--lh-snug);text-wrap:balance;font-weight:700}
.h1{font-size:var(--fs-h1);font-weight:900;line-height:var(--lh-tight);
  letter-spacing:-.018em;text-transform:lowercase}
.h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.01em}
.h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.005em;line-height:1.3}
.lead{font-size:var(--fs-lead);font-weight:300;line-height:1.5;color:var(--fg-body);max-width:46ch}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--fs-eyebrow);
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:1.7rem;height:1px;background:var(--line-strong)}
.eyebrow--center::after{content:"";width:1.7rem;height:1px;background:var(--line-strong)}
p{max-width:64ch}
.muted{color:var(--muted)}
strong,b{font-weight:700;color:var(--fg)}
mark{background:none;color:var(--warm);font-weight:600}
.tnum{font-feature-settings:"tnum" 1}

.section-head{max-width:62ch;margin-bottom:clamp(2.2rem,4vw,3.6rem)}
.section-head .h2{margin-top:1rem}
.section-head .lead{margin-top:1.1rem}

/* ---------- 6. LOGO (typografisch, lebender Text) ---------- */
.logo{display:inline-flex;flex-direction:column;line-height:.96;color:var(--ink-logo);
  text-transform:lowercase;-webkit-user-select:none;user-select:none}
.logo__r{font-weight:500;font-size:1.32rem;letter-spacing:.012em}
.logo__e{font-weight:300;font-size:1.05rem;letter-spacing:.205em;margin-top:.06em}
.logo--lg .logo__r{font-size:2.1rem}.logo--lg .logo__e{font-size:1.62rem;letter-spacing:.235em}

/* ---------- 7. NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.nav[data-scrolled="true"]{border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:72px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem);list-style:none}
.nav__links a{font-size:.92rem;font-weight:500;color:var(--muted);text-transform:lowercase;
  letter-spacing:.01em;transition:color .2s var(--ease);position:relative;padding-block:.4rem}
.nav__links a::after{content:"";position:absolute;left:0;bottom:.1rem;width:0;height:1px;
  background:var(--fg);transition:width .25s var(--ease)}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--fg)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:.85rem}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-strong);
  background:transparent;border-radius:50%;cursor:pointer;color:var(--fg);transition:border-color .2s,transform .2s var(--ease)}
.theme-toggle:hover{border-color:var(--fg);transform:rotate(-12deg)}
.theme-toggle svg{width:18px;height:18px}
.lang-switch{display:grid;place-items:center;height:40px;min-width:40px;padding:0 .5rem;border:1px solid var(--line-strong);
  border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--fg);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.lang-switch:hover{border-color:var(--fg);color:var(--warm)}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun,
:root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
.nav .nav__cta{display:none}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-strong);background:transparent;
  border-radius:50%;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:20px;height:1.5px;background:var(--fg);transition:.25s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}

@media (min-width:861px){
  .nav .nav__cta{display:inline-flex}
}
@media (max-width:860px){
  .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:1rem var(--gutter) 1.6rem;
    transform:translateY(-130%);transition:transform .35s var(--ease);box-shadow:var(--shadow)}
  .nav__links[data-open="true"]{transform:translateY(0)}
  .nav__links a{font-size:1.1rem;padding-block:.85rem;width:100%;border-bottom:1px solid var(--line)}
  .burger{display:block}
}

/* ---------- 8. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem;
  letter-spacing:.005em;padding:.92rem 1.5rem;border-radius:var(--radius);cursor:pointer;
  border:1px solid transparent;transition:transform .2s var(--ease),background .25s var(--ease),
  color .25s var(--ease),border-color .25s var(--ease);text-transform:lowercase;position:relative}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--btn-bg-h);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--fg);transform:translateY(-2px)}
.btn--sm{padding:.62rem 1.05rem;font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* ---------- 9. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:72px;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% center}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 38%,
  color-mix(in srgb,var(--bg) 30%,transparent) 70%,transparent 100%)}
.hero__media::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 22%,transparent 78%,var(--bg))}
/* Profiler-Bild im Dark-Modus warm tönen (Hero-Bild ist bereits Kupfer) */
:root[data-theme="dark"] .profiler__media img,
:root:not([data-theme="light"]) .profiler__media img{
  filter:sepia(.34) saturate(1.22) brightness(.93) hue-rotate(-7deg)}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.hero__content{max-width:38rem}
.hero .h1{margin:1.3rem 0 0}
.hero__sub{font-size:var(--fs-lead);font-weight:300;color:var(--fg-body);margin-top:1.4rem;max-width:34ch;line-height:1.5}
.hero__claim{margin-top:2.4rem;display:flex;align-items:center;gap:.85rem;
  font-size:var(--fs-small);letter-spacing:.04em;color:var(--muted)}
.hero__claim .dot{width:5px;height:5px;border-radius:50%;background:var(--warm)}
.hero__scroll{position:absolute;left:var(--gutter);bottom:2rem;z-index:2;display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.hero__scroll .line{width:34px;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.hero__scroll .line::after{content:"";position:absolute;inset:0;width:12px;background:var(--warm);
  animation:scrollline 2.4s var(--ease) infinite}
@keyframes scrollline{0%{transform:translateX(-14px)}100%{transform:translateX(40px)}}
@media (max-width:680px){
  .hero__media img{object-position:70% center}
  .hero__media::after{background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 70%,transparent),var(--bg) 62%)}
  .hero__scroll{display:none}
}

/* Ripple-Signature (Hero-Touchpoint) */
.ripple-mark{position:absolute;z-index:1;pointer-events:none;width:min(34vw,360px);aspect-ratio:1;
  right:14%;top:54%;transform:translate(0,-50%)}
.ripple-mark span{position:absolute;inset:0;border:1px solid var(--ripple);border-radius:50%;
  opacity:0;animation:ripple 5s var(--ease) infinite}
.ripple-mark span:nth-child(2){animation-delay:1.25s}
.ripple-mark span:nth-child(3){animation-delay:2.5s}
.ripple-mark span:nth-child(4){animation-delay:3.75s}
@keyframes ripple{0%{transform:scale(.15);opacity:0}12%{opacity:.7}100%{transform:scale(1);opacity:0}}
@media (max-width:860px){.ripple-mark{display:none}}

/* ---------- 10. DESIGN-STRICHE (Brand) ---------- */
.strokes{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.55}
.section > .container{position:relative;z-index:1}
.section-head{position:relative;z-index:1}
.strokes line{stroke-width:1;vector-effect:non-scaling-stroke}
.stroke-a{stroke:var(--stroke-a)}.stroke-b{stroke:var(--stroke-b)}

/* ---------- 11. CHALLENGES ---------- */
.challenge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:1rem}
.challenge{background:var(--bg);padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:.75rem;
  transition:background .3s var(--ease)}
.section--alt .challenge{background:var(--bg-2)}
.challenge:hover{background:var(--bg-3)}
.challenge__no{font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--warm);font-feature-settings:"tnum" 1}
.challenge p{font-size:.96rem;color:var(--fg-body);max-width:34ch}

/* ---------- 12. SERVICES ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1.4rem}
.service{position:relative;background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);
  padding:2.1rem 1.9rem 2rem;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);overflow:hidden}
.service::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--warm),transparent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.service:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.service:hover::before{transform:scaleX(1)}
.service__icon{width:42px;height:42px;color:var(--warm);margin-bottom:1.3rem}
.service__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}
.service__no{position:absolute;right:1.5rem;top:1.4rem;font-size:.78rem;font-weight:700;
  color:var(--muted-2);letter-spacing:.08em;font-feature-settings:"tnum" 1}
.service .h3{margin-bottom:.55rem;overflow-wrap:break-word;hyphens:auto}
.service__claim{font-weight:600;color:var(--warm);font-size:.92rem;margin-bottom:.9rem}
.service p{font-size:.94rem;color:var(--fg-body);margin-bottom:1.2rem}
.service__benefits{list-style:none;margin-top:auto;display:flex;flex-direction:column;gap:.5rem}
.service__benefits li{display:flex;gap:.6rem;font-size:.86rem;color:var(--muted);line-height:1.4}
.service__benefits li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.45rem;
  border:1px solid var(--warm);border-radius:50%}

/* ---------- 13. APPROACH ---------- */
.approach{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:2.4rem 2rem;margin-top:1rem}
.principle{display:flex;flex-direction:column;gap:.7rem;padding-left:1.4rem;border-left:1px solid var(--line-strong);
  position:relative}
.principle::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:2.2rem;background:var(--warm)}
.principle h3{font-size:1.1rem}
.principle p{font-size:.92rem;color:var(--fg-body)}

/* ---------- 14. STORIES ---------- */
.stories{display:flex;flex-direction:column;gap:1.4rem;margin-top:1rem}
.story{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);
  padding:2rem 1.9rem;transition:border-color .3s var(--ease)}
.story:hover{border-color:var(--line-strong)}
.story__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;margin-bottom:1.3rem}
.story__tag{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--warm);border:1px solid var(--line-strong);padding:.28rem .7rem;border-radius:100px}
.story__title{font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.story__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1.3rem 2rem}
.story__row{display:flex;flex-direction:column;gap:.35rem}
.story__row dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.story__row dd{font-size:.93rem;color:var(--fg-body);line-height:1.5}
.story--featured{background:linear-gradient(180deg,var(--bg-2),var(--card));border-color:var(--line-strong)}

/* Aktor-Datenvisualisierung (25 -> 4) */
.actorviz{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1rem,3vw,2.4rem);
  margin:1.6rem 0 .4rem;padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.section--alt .actorviz{background:var(--bg-3)}
.actorviz__col{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}
.dotgrid{display:grid;gap:5px;justify-content:center}
.dotgrid--25{grid-template-columns:repeat(5,1fr)}
.dotgrid--4{grid-template-columns:repeat(2,1fr)}
.dot-a{width:12px;height:12px;border-radius:50%;border:1px solid var(--muted-2);background:transparent}
.dot-a--on{background:var(--warm);border-color:var(--warm);box-shadow:0 0 0 3px color-mix(in srgb,var(--warm) 22%,transparent)}
.actorviz__num{font-size:clamp(1.8rem,1.4rem + 1.5vw,2.6rem);font-weight:900;color:var(--fg);line-height:1;font-feature-settings:"tnum" 1}
.actorviz__lbl{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.actorviz__arrow{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--warm)}
.actorviz__arrow .big{font-size:1.4rem;font-weight:900;font-feature-settings:"tnum" 1}
.actorviz__arrow svg{width:38px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4}
@media (max-width:560px){.actorviz{grid-template-columns:1fr;gap:1.4rem}
  .actorviz__arrow{flex-direction:row}.actorviz__arrow svg{transform:rotate(90deg)}}

/* ---------- 15. PROFILER ---------- */
.profiler{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(2rem,4vw,3.4rem);overflow:hidden}
.profiler__media{position:relative;border-radius:var(--radius);overflow:hidden;min-height:280px;align-self:stretch}
.profiler__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profiler__levels{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.8rem;list-style:none}
.profiler__levels li{font-size:.78rem;color:var(--muted);border:1px solid var(--line-strong);
  padding:.35rem .8rem;border-radius:100px}
@media (max-width:760px){.profiler{grid-template-columns:1fr}.profiler__media{min-height:200px;order:-1}}

/* ---------- 16. EXPERTISE / IDM ---------- */
.expertise-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
@media (max-width:820px){.expertise-grid{grid-template-columns:1fr}}
.idm-card{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:1.9rem 1.8rem;position:relative}
.idm-card .badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--warm);margin-bottom:.9rem}
.idm-card .def{font-size:1.02rem;line-height:1.62;color:var(--fg-body)}
.idm-card .src{margin-top:1.1rem;font-size:.8rem;color:var(--muted-2)}
.credentials{list-style:none;display:flex;flex-direction:column;gap:1.25rem;margin-top:.5rem}
.credentials li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.credentials .k{font-size:.93rem;color:var(--fg-body)}
.credentials .ic{width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;color:var(--warm);flex:0 0 auto}
.credentials .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}
.pub-list{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:1.4rem;border-top:1px solid var(--line)}
.pub-list li{border-bottom:1px solid var(--line)}
.pub-list li a,.pub-list li span{display:flex;gap:.9rem;padding:.85rem 0;
  font-size:.92rem;color:var(--fg-body);align-items:baseline;transition:color .2s var(--ease)}
.pub-list li a:hover{color:var(--fg)}
.pub-list .yr{color:var(--muted-2);font-feature-settings:"tnum" 1;flex:0 0 3.2rem;font-size:.84rem}
.pub-list a .ext{margin-left:auto;color:var(--warm);font-size:.8rem}

/* ---------- 17. ENGAGEMENTS ---------- */
.engage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.4rem;margin-top:1rem}
.engage__card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:1.8rem 1.7rem}
.engage__date{font-size:.78rem;font-weight:600;letter-spacing:.08em;color:var(--warm);text-transform:uppercase}
.engage__card h3{margin:.6rem 0 .5rem;font-size:1.12rem}
.engage__card p{font-size:.9rem;color:var(--fg-body)}
.engage__role{margin-top:.9rem;font-size:.82rem;color:var(--muted)}

/* ---------- 18. FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:1rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;cursor:pointer;
  padding:1.4rem 0;font-weight:600;font-size:1.02rem;color:var(--fg);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 auto;width:22px;height:22px;position:relative;color:var(--warm)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:currentColor;
  left:50%;top:50%;transition:transform .3s var(--ease)}
.faq summary .pm::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.faq summary .pm::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__body{padding:0 0 1.5rem;font-size:.95rem;color:var(--fg-body);max-width:72ch;line-height:1.62}
.faq__body p+p{margin-top:.8rem}

/* ---------- 19. KONTAKT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:1.6rem}
.contact-line{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.contact-line .ic{width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;color:var(--warm);flex:0 0 auto}
.contact-line .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}
.contact-line .lbl{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.2rem}
.contact-line .val{font-size:.98rem;color:var(--fg);word-break:break-word}
.contact-line a.val:hover{color:var(--warm)}
.contact-line button.reveal{background:none;border:none;padding:0;cursor:pointer;color:var(--warm);
  font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.contact-line .ic--brand{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto}
.contact-line .ic--brand svg{width:38px;height:38px}
.contact-cta{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1.05rem;align-self:start}
.contact-cta .h3{margin:0}
.contact-cta>p{color:var(--fg-body);line-height:1.6}
.contact-cta .btn{align-self:flex-start;margin-top:.3rem}
.contact-cta__note{font-size:.82rem;color:var(--muted-2);line-height:1.55}
.qr-card{margin-top:.5rem;display:flex;gap:1.2rem;align-items:center;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem}
.qr-card img{width:108px;height:108px;border-radius:2px;background:#FEFCEF;padding:6px}
.qr-card p{font-size:.84rem;color:var(--muted)}

.form{display:flex;flex-direction:column;gap:1.1rem;background:var(--card);border:1px solid var(--card-line);
  border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem)}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-size:.82rem;font-weight:600;color:var(--fg);letter-spacing:.01em}
.field label .req{color:var(--warm)}
.field input,.field textarea{background:var(--field-bg);border:1px solid var(--field-line);border-radius:var(--radius);
  padding:.85rem 1rem;font-size:.95rem;color:var(--fg);transition:border-color .2s var(--ease),box-shadow .2s var(--ease);width:100%}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--warm);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--warm) 18%,transparent)}
.field textarea{resize:vertical;min-height:120px;font-family:inherit}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}
.form__consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--muted);line-height:1.5}
.form__consent input{margin-top:.2rem;accent-color:var(--warm);width:16px;height:16px;flex:0 0 auto}
.form__consent a{color:var(--warm);text-decoration:underline;text-underline-offset:2px}
.form__note{font-size:.78rem;color:var(--muted-2)}
.form__status{font-size:.9rem;padding:.8rem 1rem;border-radius:var(--radius);display:none}
.form__status[data-state="pending"]{display:block;background:color-mix(in srgb,var(--muted) 12%,transparent);color:var(--muted);border:1px solid var(--line)}
.form__status[data-state="ok"]{display:block;background:color-mix(in srgb,var(--warm) 14%,transparent);color:var(--fg);border:1px solid var(--line-strong)}
.form__status[data-state="err"]{display:block;background:color-mix(in srgb,#b3492f 16%,transparent);color:var(--fg);border:1px solid color-mix(in srgb,#b3492f 40%,transparent)}

/* ---------- 20. FOOTER ---------- */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem 2rem}
@media (max-width:720px){.footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}
@media (max-width:460px){.footer__top{grid-template-columns:1fr}}
.footer__brand p{font-size:.88rem;color:var(--muted);margin-top:1.1rem;max-width:32ch}
.footer__claim{margin-top:1.2rem;font-size:.8rem;letter-spacing:.04em;color:var(--warm)}
.footer h4{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.1rem}
.footer__nav{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.footer__nav a{font-size:.9rem;color:var(--muted);transition:color .2s var(--ease)}
.footer__nav a:hover{color:var(--fg)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;
  margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.footer__bottom p{font-size:.8rem;color:var(--muted-2)}
.footer__legal{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer__legal a{font-size:.8rem;color:var(--muted)}
.footer__legal a:hover{color:var(--fg)}

/* ---------- 21. SCROLL-REVEAL ---------- */
/* Nur mit JS ausblenden – ohne JS bleibt alles sichtbar */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .ripple-mark span,.hero__scroll .line::after{animation:none}
  .btn:hover{transform:none}
}

/* ---------- 22. LEGAL PAGES ---------- */
.legal{padding-top:calc(72px + clamp(2.5rem,5vw,5rem))}
.legal__wrap{max-width:780px}
.legal h1{font-size:clamp(2rem,1.5rem + 2vw,3rem);font-weight:900;text-transform:lowercase;margin-bottom:2rem;letter-spacing:-.02em}
.legal h2{font-size:1.3rem;font-weight:700;margin:2.4rem 0 .8rem;color:var(--fg)}
.legal h3{font-size:1.05rem;font-weight:700;margin:1.6rem 0 .5rem;color:var(--fg)}
.legal p,.legal li{font-size:.95rem;color:var(--fg-body);line-height:1.7;max-width:72ch}
.legal p{margin-bottom:.9rem}
.legal ul,.legal ol{margin:.4rem 0 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.legal a{color:var(--warm);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.engage__card h3 a{color:inherit}
.engage__card h3 a:hover{color:var(--warm)}
.idm-card .src a,.engage__role a,.credentials .k a{color:var(--warm);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.idm-card .src a:hover,.engage__role a:hover,.credentials .k a:hover{border-bottom-color:currentColor}
.legal a:hover{color:var(--fg)}
.legal strong{color:var(--fg)}
.legal__back{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2.5rem;font-size:.88rem;color:var(--muted);font-weight:500}
.legal__back:hover{color:var(--fg)}
.legal__back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.legal__meta{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted-2)}
.legal table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.9rem}
.legal td{padding:.7rem .9rem;border:1px solid var(--line);vertical-align:top;color:var(--fg-body)}
.legal td:first-child{font-weight:600;color:var(--fg);width:38%}

/* ---------- 23. UTILITIES ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.divider-strokes{position:relative;height:0}
.mt-1{margin-top:1rem}
.mt-2{margin-top:1.1rem}
.mt-3{margin-top:1.4rem}
.mt-4{margin-top:1.6rem}
.mt-6{margin-top:2.5rem}
.note-fine{font-size:.8rem;max-width:70ch}
.txt-warm{color:var(--warm)}

/* ============================================================
   24. v5 (06.10.2026) — Aufbau nach Intro-Folie
   ============================================================ */

/* ---------- 24.1 MODUL-SCHALTER ----------
   Module per <html data-off="…"> ausblenden; Wort entfernen = Modul wieder sichtbar.
   Ordner auf dem Server bleiben unverändert erreichbar. */
[data-off~="profiler"]    [data-feature~="profiler"],
[data-off~="ehc"]         [data-feature~="ehc"],
[data-off~="idmtool"]     [data-feature~="idmtool"],
[data-off~="newsletter"]  [data-feature~="newsletter"],
[data-off~="ansatz"]      [data-feature~="ansatz"],
[data-off~="engagements"] [data-feature~="engagements"],
[data-off~="vorgehen"]    [data-feature~="vorgehen"]{display:none !important}

/* ---------- 24.2 HERO (Porträt, Name, Positionierung) ---------- */
.hero__img--light{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .hero__img--light{display:block}
  :root:not([data-theme="dark"]) .hero__img--dark{display:none}
}
:root[data-theme="light"] .hero__img--light{display:block}
:root[data-theme="light"] .hero__img--dark{display:none}
.hero__media img{object-position:72% 60%}
.hero__content{max-width:40rem}
.hero__id{display:flex;align-items:center;gap:1.3rem}
.hero__portrait{width:clamp(84px,9vw,112px);aspect-ratio:4/5;object-fit:cover;flex:0 0 auto;
  border-radius:var(--radius);border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.hero__name{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);font-weight:700;line-height:1.08;
  letter-spacing:-.012em;color:var(--warm)}
.hero__meta{margin-top:.45rem;font-size:clamp(.86rem,.8rem + .3vw,1rem);font-style:italic;font-weight:300;color:var(--muted)}
.hero .h1.hero__pos{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem);font-weight:700;text-transform:none;
  letter-spacing:-.012em;line-height:1.15;margin-top:1.8rem;color:var(--fg)}
.hero__sub strong{color:var(--warm);font-weight:600}
@media (max-width:480px){.hero__id{gap:1rem}.hero__portrait{width:78px}}

/* ---------- 24.3 KOMPETENZEN (Folien-Panels 01·02·03) ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.2rem;margin-top:1rem}
.pillar{background:var(--panel);border:1px solid var(--card-line);border-radius:var(--radius);
  padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:.85rem;color:#FFFFFF;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pillar__no{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F8F0C0}
.pillar__no b{color:inherit;margin-right:.6rem}
.pillar p{font-size:1.02rem;line-height:1.5;color:#FFFFFF;max-width:none}
.pillar p+p{color:#E6E0D6}
.pillar .pillar__sub{font-size:.82rem;color:#F8F0C0;margin-top:auto;padding-top:.4rem;border-top:1px solid rgba(248,240,192,.22)}
.pillar strong{color:#F8F0C0}
.section--pillars{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
:root[data-theme="light"] .pillar__no,:root[data-theme="light"] .pillar .pillar__sub,:root[data-theme="light"] .pillar strong{color:#FEFCEF}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .pillar__no,:root:not([data-theme="dark"]) .pillar .pillar__sub,:root:not([data-theme="dark"]) .pillar strong{color:#FEFCEF}
}

/* ---------- 24.4 GENERATIONEN (Erfolgsgeschichten) ---------- */
.gens{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.2rem;margin-top:1rem;counter-reset:gen}
.gen{position:relative;background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:1.8rem 1.7rem 1.6rem}
.gen__rank{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--warm)}
.gen h3{margin:.55rem 0 .6rem;font-size:1.15rem}
.gen p{font-size:.93rem;color:var(--fg-body)}
.gen__steps{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem;list-style:none}
.gen__steps li{font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--fg);
  border:1px solid var(--line-strong);border-radius:100px;padding:.28rem .75rem}
.gen__steps li.is-on{background:var(--warm);border-color:var(--warm);color:var(--btn-fg)}
:root[data-theme="light"] .gen__steps li.is-on{color:#FEFCEF}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .gen__steps li.is-on{color:#FEFCEF}}
.gen--outlook{border-style:dashed}
.proof{margin-top:1.6rem;padding:1.2rem 1.4rem;border-left:2px solid var(--copper);background:var(--bg-2);
  font-size:1rem;color:var(--fg);max-width:none}
.section--alt .proof{background:var(--bg-3)}

/* ---------- 24.5 TRACK RECORD & PLATTFORM ---------- */
.track-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
@media (max-width:860px){.track-grid{grid-template-columns:1fr}}
.track-h{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--warm);margin-bottom:1rem}
.track{list-style:none;border-top:1px solid var(--line)}
.track li{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.94rem;color:var(--fg-body);line-height:1.5}
.track li strong{color:var(--fg)}
.track li em{font-style:italic}
.track a{color:var(--warm);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.track a:hover{border-bottom-color:currentColor}
.claim-band{margin-top:clamp(2.4rem,4vw,3.4rem);text-align:center;font-size:clamp(1.15rem,1rem + .9vw,1.6rem);
  font-weight:700;color:var(--warm);max-width:none;text-wrap:balance}

/* ---------- 24.6 VORGEHEN (4 Schritte) ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:1rem;list-style:none}
.steps li{background:var(--bg);padding:1.7rem 1.5rem;display:flex;flex-direction:column;gap:.55rem}
.section--alt .steps li{background:var(--bg-2)}
.steps__no{font-size:1.6rem;font-weight:900;color:var(--copper);line-height:1;font-feature-settings:"tnum" 1}
.steps h3{font-size:1.05rem}
.steps p{font-size:.9rem;color:var(--fg-body)}

/* ---------- 24.7 „MEHR ANZEIGEN“ (native details, CSP-konform ohne JS) ---------- */
.more{margin-top:1.4rem}
.more>summary{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;
  font-weight:600;font-size:.92rem;color:var(--warm);padding:.7rem 1.1rem;border:1px solid var(--line-strong);
  border-radius:var(--radius);text-transform:lowercase;transition:border-color .2s var(--ease)}
.more>summary::-webkit-details-marker{display:none}
.more>summary:hover{border-color:var(--warm)}
.more>summary::after{content:"+";font-weight:400;font-size:1.1rem;line-height:1}
.more[open]>summary::after{content:"−"}
.more[open]>summary{margin-bottom:1.4rem}
.more .stories{margin-top:0}

/* Akzentfarbe Kupfer für Ripple & Striche */
.hero__claim .dot{background:var(--copper)}
.service__icon,.credentials .ic,.contact-line .ic{color:var(--copper)}
.service::before{background:linear-gradient(90deg,var(--copper),transparent)}
.principle::before{background:var(--copper)}

/* ---------- 24.8 Korrekturen nach Render-Prüfung ---------- */
.btn{white-space:nowrap}
.track,.gen__steps,.steps{padding:0}
.challenge-grid{display:flex;flex-wrap:wrap}
.challenge-grid .challenge{flex:1 1 12.5rem}
.hero__claim .yrs{white-space:nowrap}
.ripple-mark{right:23%;top:68%}
@media (max-width:1100px){.nav__links{gap:clamp(.8rem,1.6vw,1.4rem)}}
.nav__links a{white-space:nowrap}
.legal button.reveal{background:none;border:none;padding:0;cursor:pointer;color:var(--warm);font-weight:600;text-decoration:underline;text-underline-offset:3px}
:root[data-theme="light"] .pillar p+p{color:#FFFFFF}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .pillar p+p{color:#FFFFFF}}

/* ============================================================
   25. v6 (06.10.2026) — Story-Bogen: Kunde = Held
   ============================================================ */
/* Hero-Bild als CSS-Hintergrund: lädt nur das Bild des aktiven Themes */
.hero__media{background:#000 url(../img/hero-dark-1672.webp) 72% 62%/cover no-repeat}
@media (max-width:960px){.hero__media{background-image:url(../img/hero-dark-960.webp)}}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .hero__media{background-color:#FEF8EC;background-image:url(../img/hero-light-1672.webp)}
}
@media (prefers-color-scheme:light) and (max-width:960px){
  :root:not([data-theme="dark"]) .hero__media{background-image:url(../img/hero-light-960.webp)}
}
:root[data-theme="light"] .hero__media{background-color:#FEF8EC;background-image:url(../img/hero-light-1672.webp)}
@media (max-width:960px){:root[data-theme="light"] .hero__media{background-image:url(../img/hero-light-960.webp)}}
@media (max-width:680px){.hero__media{background-position:78% 70%}}
.hero .h1.hero__pos{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.9rem);margin-top:1.3rem;line-height:1.08}
.hero__content{max-width:42rem}
.hero__sub{max-width:40ch}

/* Mobile-Menü: geschlossen nicht fokussierbar */
@media (max-width:860px){
  .nav__links{visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s}
  .nav__links[data-open="true"]{visibility:visible;transition:transform .35s var(--ease),visibility 0s}
}

/* Vorgehen: zwei Pfade */
.tracks{display:grid;grid-template-columns:3fr 4fr;gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
@media (max-width:960px){.tracks{grid-template-columns:1fr}}
.tracks .steps{margin-top:0}
.steps h4{font-size:1rem;color:var(--fg);line-height:1.3}
.steps--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr))}
.steps--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr))}
.start{margin-top:clamp(2rem,4vw,3rem);padding:1.6rem 1.8rem;border:1px solid var(--card-line);border-radius:var(--radius);
  background:var(--bg-2);display:grid;grid-template-columns:auto 1fr;gap:.6rem 2rem;align-items:center}
.start__h{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.start__list{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;padding:0;margin:0;list-style:none;counter-reset:st}
.start__list li{counter-increment:st;font-size:.95rem;color:var(--fg)}
.start__list li::before{content:counter(st) " ";font-weight:900;color:var(--copper);margin-right:.35rem}
.start__trust{grid-column:1/-1;font-size:.84rem;color:var(--muted);max-width:none;border-top:1px solid var(--line);padding-top:.8rem}
@media (max-width:760px){.start{grid-template-columns:1fr}.start__list{flex-direction:column}}

/* CTA-Band */
.cta-band{background:var(--panel);border-block:1px solid var(--card-line);padding-block:clamp(2.2rem,4vw,3.2rem)}
:root .cta-band{background:linear-gradient(90deg,#1c1612,#2f2823 60%,#3a2c20)}
.cta-band__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem}
.cta-band__text{font-size:clamp(1.1rem,1rem + .6vw,1.45rem);font-weight:700;color:#F8F0C0;max-width:46ch}
.cta-band .btn--primary{background:#F8F0C0;border-color:#F8F0C0;color:#000}
.cta-band .btn--primary:hover{background:#FFF7D2}

/* Ergebnisse */
.gens--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.gens + .proof{margin-top:1.2rem}

/* Ohne / Mit System */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:760px){.compare{grid-template-columns:1fr}}
.compare__col{border-radius:var(--radius);padding:1.8rem 1.7rem;border:1px solid var(--card-line)}
.compare__col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.compare__col li{display:flex;gap:.7rem;font-size:.97rem;line-height:1.45}
.compare__col--off{background:var(--bg)}
.compare__col--off .compare__h{color:var(--muted)}
.compare__col--off li{color:var(--muted)}
.compare__col--off li::before{content:"–";color:var(--muted-2)}
.compare__col--on{background:var(--panel);color:#fff}
.compare__col--on .compare__h{color:#F8F0C0}
.compare__col--on li::before{content:"✓";color:#F8F0C0;font-weight:700}
:root[data-theme="light"] .compare__col--on .compare__h,:root[data-theme="light"] .compare__col--on li::before{color:#FEFCEF}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .compare__col--on .compare__h,:root:not([data-theme="dark"]) .compare__col--on li::before{color:#FEFCEF}}
.compare__h{font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* Über uns */
.about{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.about__portrait{width:clamp(120px,14vw,180px);aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.about .h2{margin-top:.8rem}
.about .lead{margin-top:.9rem;max-width:58ch}
@media (max-width:700px){.about{grid-template-columns:1fr}}
.pillar__no b{margin-right:.35rem}
.tracks{grid-template-columns:1fr;gap:clamp(1.8rem,3.5vw,2.6rem)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps--3,.steps--4{grid-template-columns:1fr}}
.service__benefits{margin-top:1.1rem}

/* ---------- 26. v7 ---------- */
.independence{margin-top:1.6rem;font-size:.92rem;color:var(--muted);max-width:none;padding-left:1rem;border-left:2px solid var(--copper)}
.track-note{margin-top:1rem;font-size:.9rem;color:var(--fg-body);max-width:80ch;padding:1rem 1.2rem;background:var(--bg-2);border-radius:var(--radius);border:1px solid var(--line)}
.shaker{width:120px;height:56px;border:1px solid var(--muted-2);border-radius:4px;position:relative;margin-inline:auto}
.shaker span{position:absolute;inset:8px 10px;border:1px dashed var(--muted-2);border-radius:3px}
.shaker::before,.shaker::after{content:"↔";position:absolute;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1rem}
.shaker::before{left:-1.4rem}.shaker::after{right:-1.4rem}
.actorviz__arrow .mid{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:center;max-width:9rem}
.actorviz__col .actorviz__lbl{display:inline-block;max-width:16rem}
.gens--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
/* v11: Publikationen mit Rolle */
.pub-h{margin-top:1.6rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--warm)}
.pub-h + .pub-list{margin-top:.6rem}
.pub__role{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warm);border:1px solid var(--line-strong);border-radius:100px;padding:.05rem .5rem;margin-right:.4rem;vertical-align:.1em}
.pub-list .pub__txt{flex:1}
.pub-list li .pub__txt{display:block;padding:0;flex:1;font-size:inherit}
.pub-list li .pub__role{display:inline-block;padding:.05rem .5rem;font-size:.66rem;line-height:1.5;margin-right:.45rem;vertical-align:.12em}
/* v15: Wellen-Symbol statt Aktorzahl */
.waves{position:relative;width:64px;height:64px;margin-inline:auto}
.waves span{position:absolute;inset:0;margin:auto;border:1px solid var(--warm);border-radius:50%}
.waves span:nth-child(1){width:14px;height:14px;background:var(--warm)}
.waves span:nth-child(2){width:38px;height:38px;opacity:.7}
.waves span:nth-child(3){width:62px;height:62px;opacity:.4}

/* ---------- 27. Original-Logo (Bild, nicht nachgebaut) ---------- */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo__img{display:block;height:40px;width:auto}
.logo--lg .logo__img{height:64px}
.logo__img--on-light{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .logo__img--on-light{display:block}
  :root:not([data-theme="dark"]) .logo__img--on-dark{display:none}
}
:root[data-theme="light"] .logo__img--on-light{display:block}
:root[data-theme="light"] .logo__img--on-dark{display:none}
@media (max-width:480px){.logo__img{height:34px}}
/* Logo nie stauchen; Burger-Menü bis 1180 px (Navigation passt sonst nicht neben Logo + CTA) */
.nav .logo{flex:0 0 auto}
.logo__img{max-width:none}
@media (max-width:1180px){
  .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:1rem var(--gutter) 1.6rem;
    transform:translateY(-130%);transition:transform .35s var(--ease),visibility 0s linear .35s;box-shadow:var(--shadow);visibility:hidden}
  .nav__links[data-open="true"]{transform:translateY(0);visibility:visible;transition:transform .35s var(--ease),visibility 0s}
  .nav__links a{font-size:1.1rem;padding-block:.85rem;width:100%;border-bottom:1px solid var(--line)}
  .burger{display:block}
}
@media (min-width:861px) and (max-width:1180px){.nav .nav__cta{display:inline-flex}}