/* ============================================================================
   ERDEM ATAR - Prozess- & Digitalisierungsberatung
   Zentrale Gestaltung fuer ALLE Seiten.

   >>> Wenn du etwas am Aussehen aendern willst, aendere es im Block
   >>> "STELLSCHRAUBEN" weiter unten. Nur dort. Alle Seiten ziehen automatisch nach.
   ============================================================================ */

/* ---- SCHRIFTEN (frueher assets/css/fonts.css) --------------------------
   Selbst gehostet - keine Verbindung zu Google, DSGVO-konform.
   Am 18.08.2026 aus fonts.css hierher geholt: Ein @import erzeugt eine
   Kette im kritischen Pfad (HTML -> style.css -> fonts.css -> woff2).
   Die Schriftregeln werden dadurch eine Rundreise später bekannt, was
   die Zeit im Ersatzzeichensatz verlaengert.
   Variable Schriften: eine Datei deckt alle Schnitte ab. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin.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+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:100 900;font-display:swap;
  src:url('../fonts/inter-latin-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;}

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============================================================================
   STELLSCHRAUBEN - hier und nur hier wird geschraubt
   ============================================================================ */
:root{

  /* ---- FARBEN ------------------------------------------------------------ */
  /* Standard ist HELL. Das dunkle Schema steht weiter unten unter [data-theme="dunkel"]. */
  --farbe-hintergrund:       #FFFFFF;   /* Seitenhintergrund                   */
  --farbe-hintergrund-2:     #F4F7F8;   /* abgesetzte Baender und Fusszeile    */
  --farbe-flaeche:           #FFFFFF;   /* Karten                              */
  --farbe-flaeche-hell:      #F7FAFB;   /* Karten mit Verlauf, Hover           */
  --farbe-linie:             #E3E9EC;   /* feine Trennlinien                   */
  --farbe-linie-stark:       #C7D2D8;   /* sichtbare Raender                   */

  --farbe-text:              #0C161D;   /* Ueberschriften, wichtiger Text      */
  --farbe-text-2:            #4A5A66;   /* Fliesstext                          */
  --farbe-text-3:            #5F7079;   /* Beschriftungen, Nebensaechliches    */

  --farbe-akzent:            #0C7A6D;   /* Markenfarbe auf Hell                */
  --farbe-akzent-hell:       #096257;   /* Akzent beim Ueberfahren             */
  --farbe-akzent-schrift:    #FFFFFF;   /* Schrift AUF der Akzentfarbe         */
  --farbe-akzent-schleier:   rgba(12,122,109,.10);
  --farbe-akzent-linie:      rgba(12,122,109,.40);

  --farbe-warnung:           #946011;   /* Risiko-Markierungen (WCAG AA: 4.73) */
  --farbe-warnung-schleier:  rgba(148,96,17,.09);
  --farbe-warnung-linie:     rgba(148,96,17,.28);

  --farbe-kopfzeile:         rgba(255,255,255,.86);

  /* ---- SCHRIFTARTEN ------------------------------------------------------ */
  --schrift-headline: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --schrift-text:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --schrift-technik:  ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;

  /* ---- SCHRIFTGROESSEN (feste Stufenleiter) ------------------------------ */
  /* clamp(min, mitwachsend, max) - passt sich der Bildschirmbreite an        */
  --groesse-hero:   clamp(40px, 6.3vw, 74px);   /* nur die Haupt-Ueberschrift  */
  --groesse-h2:     clamp(30px, 4.4vw, 47px);   /* Abschnitts-Ueberschriften   */
  --groesse-h3:     21px;                        /* Karten-Ueberschriften      */
  --groesse-h3-gross: 25px;                      /* groessere Karten           */
  --groesse-lead:   clamp(18px, 2.1vw, 21px);   /* Einleitungstexte            */
  --groesse-text:   17px;                        /* Fliesstext                 */
  --groesse-text-klein: 15.5px;                  /* Text in Karten             */
  --groesse-klein:  14.5px;                      /* Fusszeile, Hinweise        */
  --groesse-mini:   12px;                        /* Technik-Beschriftungen     */

  --zeilenhoehe-text:      1.65;
  --zeilenhoehe-headline:  1.08;

  /* ---- ABSTAENDE --------------------------------------------------------- */
  --abstand-1:  6px;
  --abstand-2:  12px;
  --abstand-3:  18px;
  --abstand-4:  24px;
  --abstand-5:  34px;
  --abstand-6:  48px;
  --abstand-7:  64px;
  --abstand-8:  92px;
  --abschnitt-hoehe: clamp(74px, 9vw, 116px);   /* Luft ueber/unter Abschnitten */

  /* ---- LAYOUT ------------------------------------------------------------ */
  --breite-inhalt: 1400px;   /* maximale Inhaltsbreite (waechst bis hierhin)  */
  --rand-seitlich: 28px;     /* Abstand zum Bildschirmrand                    */
  --radius:        12px;     /* Eckenrundung von Karten und Buttons           */
  --radius-klein:  10px;
  --kopfzeile-hoehe: 74px;
}

/* ============================================================================
   DUNKLES FARBSCHEMA
   Wird automatisch aktiv, wenn das Geraet auf Dunkel steht, oder ueber den
   Schalter in der Kopfzeile. Nur die Farben wechseln - sonst nichts.
   ============================================================================ */
[data-theme="dunkel"]{
  --farbe-hintergrund:      #0B1014;
  --farbe-hintergrund-2:    #0E141A;
  --farbe-flaeche:          #121A21;
  --farbe-flaeche-hell:     #16202A;
  --farbe-linie:            #1F2C36;
  --farbe-linie-stark:      #2A3A46;

  --farbe-text:             #EEF3F6;
  --farbe-text-2:           #AEBDC9;
  --farbe-text-3:           #7C8E9C;

  --farbe-akzent:           #37C9B9;
  --farbe-akzent-hell:      #5FE7D7;
  --farbe-akzent-schrift:   #04130F;
  --farbe-akzent-schleier:  rgba(55,201,185,.12);
  --farbe-akzent-linie:     rgba(55,201,185,.42);

  --farbe-warnung:          #E8A94B;
  --farbe-warnung-schleier: rgba(232,169,75,.12);
  --farbe-warnung-linie:    rgba(232,169,75,.25);

  --farbe-kopfzeile:        rgba(11,16,20,.72);
}
/* Feinheiten, die sich nicht ueber Farbwerte allein loesen lassen */
[data-theme="dunkel"] .card::before{background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 40%)}
[data-theme="dunkel"] .card:hover{box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
[data-theme="dunkel"] .card,[data-theme="dunkel"] .metric,[data-theme="dunkel"] .cluster,
[data-theme="dunkel"] .stations,[data-theme="dunkel"] .kompakt{box-shadow:none}
[data-theme="dunkel"] .btn-primary{box-shadow:0 6px 24px -10px rgba(55,201,185,.6)}
[data-theme="dunkel"] .usp b,[data-theme="dunkel"] .wahrheit b{color:var(--farbe-text)}
[data-theme="dunkel"] .hero::before{
  background:radial-gradient(760px 380px at 82% -8%,rgba(55,201,185,.12),transparent 68%),
             radial-gradient(560px 320px at -5% 10%,rgba(55,201,185,.05),transparent 60%)}
[data-theme="dunkel"] header.site{box-shadow:none}
[data-theme="dunkel"] .brandlogo{background-image:url('../img/logo-192.png')}

/* ============================================================================
   AB HIER: Bauteile. Normalerweise musst du hier nichts aendern.
   ============================================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopfzeile-hoehe) + 20px)}
body{
  background:var(--farbe-hintergrund);
  color:var(--farbe-text);
  font-family:var(--schrift-text);
  font-size:var(--groesse-text);
  line-height:var(--zeilenhoehe-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--farbe-akzent);color:var(--farbe-akzent-schrift)}

/* feiner Markenstreifen ganz oben */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:100;
  background:linear-gradient(90deg,var(--farbe-akzent),transparent 60%)}

.wrap{max-width:var(--breite-inhalt);margin:0 auto;padding:0 var(--rand-seitlich)}

/* --- Typografie --- */
h1,h2,h3,.display{font-family:var(--schrift-headline);font-weight:700;
  letter-spacing:-.025em;line-height:var(--zeilenhoehe-headline);
  /* Lange deutsche Komposita (z.B. "Umstiegsstrategie") sprengen auf schmalen
     Geraeten sonst die Zeile und schieben die ganze Seite seitlich weg.
     Greift nur im Notfall - wo der Text passt, aendert sich nichts. */
  overflow-wrap:break-word}
h1{font-size:var(--groesse-hero)}
h2{font-size:var(--groesse-h2);margin-bottom:var(--abstand-3);letter-spacing:-.02em}
h3{font-size:var(--groesse-h3);font-weight:600;letter-spacing:-.01em}
p{color:var(--farbe-text-2)}
.lead{font-size:var(--groesse-lead);color:var(--farbe-text-2);line-height:1.6}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--schrift-technik);
  font-size:var(--groesse-mini);letter-spacing:.18em;text-transform:uppercase;color:var(--farbe-akzent)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--farbe-akzent);opacity:.8}
.eyebrow.plain::before{display:none}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--schrift-text);
  font-size:15.5px;font-weight:600;padding:14px 24px;border-radius:var(--radius-klein);
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,background .2s,border-color .2s,box-shadow .2s}
.btn:focus-visible{outline:2px solid var(--farbe-akzent);outline-offset:3px}
.btn-primary{background:var(--farbe-akzent);color:var(--farbe-akzent-schrift);
  box-shadow:0 6px 20px -10px rgba(12,122,109,.55)}
.btn-primary:hover{transform:translateY(-2px);background:var(--farbe-akzent-hell);
  box-shadow:0 10px 26px -10px rgba(12,122,109,.6)}
.btn-ghost{background:transparent;color:var(--farbe-text);border-color:var(--farbe-linie-stark)}
/* Beim Ueberfahren stand hier color:#fff auf durchsichtigem Grund. Im hellen
   Schema wurde die Beschriftung damit UNSICHTBAR (gemessen 1,00:1 statt 18,3:1
   im Ruhezustand) - betroffen war jede sekundaere Schaltflaeche der Website.
   Die Regel war fuer Dunkel gedacht und galt versehentlich fuer beide; dort war
   sie ohnehin wirkungslos, weil --farbe-text bereits fast weiss ist.
   Jetzt die Akzentfarbe: sichtbare Rueckmeldung in beiden Schemata, passend
   zum Rand, der ohnehin auf Akzent wechselt. Gefunden im Audit 19.08.2026. */
.btn-ghost:hover{border-color:var(--farbe-akzent);color:var(--farbe-akzent)}
.arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* --- Kopfzeile --- */
header.site{position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(12,22,29,.05);background:var(--farbe-kopfzeile);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--farbe-linie)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--kopfzeile-hoehe);gap:var(--abstand-4)}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brandlogo{width:80px;height:36px;flex:none;display:block;
  background:url('../img/logo-hell-192.png') center/contain no-repeat}
.brand .divider{width:1px;height:26px;background:var(--farbe-linie-stark)}
.brand .sub{font-family:var(--schrift-technik);font-size:10.5px;letter-spacing:.1em;
  color:var(--farbe-text-3);text-transform:uppercase;line-height:1.4;max-width:130px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:15px;color:var(--farbe-text-2);transition:color .18s}
.nav-links a:hover{color:var(--farbe-text)}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none}

/* --- Schalter fuer Hell/Dunkel --- */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;background:none;border:1px solid var(--farbe-linie-stark);
  border-radius:var(--radius-klein);color:var(--farbe-text-2);cursor:pointer;padding:0;
  transition:border-color .2s,color .2s}
.theme-btn:hover{border-color:var(--farbe-akzent);color:var(--farbe-akzent)}
.theme-btn:focus-visible{outline:2px solid var(--farbe-akzent);outline-offset:3px}
.theme-btn svg{width:19px;height:19px;display:block}
.theme-btn .sonne{display:none}
[data-theme="dunkel"] .theme-btn .mond{display:none}
[data-theme="dunkel"] .theme-btn .sonne{display:block}

.menu-btn{display:none;background:none;border:1px solid var(--farbe-linie-stark);
  border-radius:9px;padding:14px 16px;color:var(--farbe-text);cursor:pointer;
  font-family:var(--schrift-technik);font-size:var(--groesse-mini);letter-spacing:.08em}
.mobile-menu{display:none;border-top:1px solid var(--farbe-linie);background:var(--farbe-hintergrund-2)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:16px var(--rand-seitlich);border-bottom:1px solid var(--farbe-linie);
  color:var(--farbe-text-2);font-size:16px}
.mobile-menu .btn{margin:var(--abstand-3) var(--rand-seitlich);
  width:calc(100% - var(--rand-seitlich)*2);justify-content:center}

/* --- Abschnitte --- */
section{padding:var(--abschnitt-hoehe) 0}
.band{background:var(--farbe-hintergrund-2);border-top:1px solid var(--farbe-linie);
  border-bottom:1px solid var(--farbe-linie)}
.sec-head{max-width:720px;margin-bottom:clamp(44px,6vw,64px)}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head p{margin-top:14px}

/* --- Hero --- */
.hero{padding:clamp(72px,9vw,104px) 0 clamp(64px,8vw,92px);position:relative}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(760px 380px at 82% -8%,var(--farbe-akzent-schleier),transparent 68%),
             radial-gradient(560px 320px at -5% 10%,rgba(12,122,109,.05),transparent 60%)}
.hero .eyebrow{margin-bottom:26px}
.hero h1{max-width:17ch}
.hero h1 .accent{color:var(--farbe-akzent)}
.hero .lead{margin-top:26px;max-width:60ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.competence{font-family:var(--schrift-technik);font-size:12.5px;color:var(--farbe-text-3);
  margin-top:var(--abstand-5);line-height:1.9}
.competence b{color:var(--farbe-text-2);font-weight:500}

/* --- Prozess-Zeitstrahl --- */
.stream{margin-top:clamp(48px,6vw,72px)}
.stream-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--farbe-linie-stark) transparent;padding:22px 0 2px}
.stream-inner{min-width:620px}
.gov{position:relative;height:26px;margin:0 10px 10px;
  border-top:1px solid var(--farbe-akzent-linie);border-left:1px solid var(--farbe-akzent-linie);
  border-right:1px solid var(--farbe-akzent-linie);border-radius:12px 12px 0 0}
.gov span{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--farbe-hintergrund);padding:0 14px;white-space:nowrap;
  font-family:var(--schrift-technik);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--farbe-akzent)}
.axis{position:relative;display:flex;align-items:center;height:170px}
.axis::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;transform:translateY(-50%);
  background:var(--farbe-akzent-linie)}
.axis::after{content:"";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:10px solid var(--farbe-akzent)}
.tstep{position:relative;flex:1;height:100%;display:flex;align-items:center;justify-content:center}
.spacer{flex:0 0 44px}
/* Alle Stationen gleichwertig: die Kette ist durchgaengig, keine Station ist zweitrangig */
.tdot{width:13px;height:13px;border-radius:50%;background:var(--farbe-akzent);
  border:2px solid var(--farbe-hintergrund);z-index:2;transition:.2s;
  box-shadow:0 0 0 4px var(--farbe-akzent-schleier)}
.tlabel{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--schrift-headline);
  font-size:var(--groesse-h3);font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  color:var(--farbe-text)}
.tstep.up .tlabel{bottom:calc(50% + 22px)}
.tstep.down .tlabel{top:calc(50% + 22px)}
.tlabel::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:1px;height:13px;background:var(--farbe-akzent-linie)}
.tstep.up .tlabel::after{top:100%}
.tstep.down .tlabel::after{bottom:100%}
.ends{display:flex;justify-content:space-between;margin:14px 10px 0;
  font-family:var(--schrift-technik);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--farbe-text-3)}

/* --- Raster und Karten --- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Absicherung: Raster-Elemente duerfen nie breiter werden als ihre Spalte */
/* min-width:0 hebt die automatische Mindestbreite von Grid-Kindern auf. Ohne sie
   wird ein Kind so breit wie sein laengstes unteilbares Wort und sprengt die
   Spalte. .kompakt fehlte in dieser Liste: Bei 320 px ragten die Kacheln auf den
   Leistungsseiten 21 px heraus, und weil .kompakt fuer die Eckenrundung
   overflow:hidden traegt, war der Text abgeschnitten UND unerreichbar
   (Inhaltsverlust nach WCAG 1.4.10). Aufgefallen ist es nie, weil
   body{overflow-x:hidden} den Ueberlauf aus scrollWidth heraushaelt - der
   Layouttest mass deshalb ueberall 0. Audit 19.08.2026. */
.grid-2>*,.grid-3>*,.metrics>*,.kompakt>*,.eckdaten>*,.stations>*,.cluster>*{min-width:0}
.card{background:var(--farbe-flaeche);border:1px solid var(--farbe-linie);
  border-radius:var(--radius);padding:32px 30px;position:relative;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;
  background:linear-gradient(160deg,rgba(0,0,0,.05),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.card:hover{transform:translateY(-4px);border-color:var(--farbe-linie-stark);
  box-shadow:0 18px 40px -26px rgba(12,22,29,.28)}
.card,.metric,.cluster,.stations,.kompakt{box-shadow:0 1px 2px rgba(12,22,29,.04)}
.card h3{margin-bottom:11px}
.card p{font-size:var(--groesse-text-klein)}

.tag-risk{font-family:var(--schrift-technik);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--farbe-warnung);background:var(--farbe-warnung-schleier);
  border:1px solid var(--farbe-warnung-linie);padding:5px 10px;border-radius:20px;
  display:inline-block;margin-bottom:var(--abstand-3)}
.bridge{text-align:center;margin-top:52px;font-family:var(--schrift-headline);
  font-size:clamp(19px,2.4vw,24px);font-weight:600;color:var(--farbe-text);letter-spacing:-.01em}
.bridge b{color:var(--farbe-akzent)}

/* --- Leistungs-Cluster --- */
.cluster{background:var(--farbe-flaeche);border:1px solid var(--farbe-linie);
  border-radius:var(--radius);padding:34px 32px}
.cluster .marker{width:9px;height:9px;border-radius:2px;background:var(--farbe-akzent);
  display:inline-block;margin-bottom:var(--abstand-3)}
.cluster h3{font-size:22px;margin-bottom:20px}
.cluster ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.cluster li{position:relative;padding-left:24px;font-size:var(--groesse-text-klein);color:var(--farbe-text-2)}
.cluster li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:1.5px;background:var(--farbe-akzent)}
.cluster.breit{grid-column:1/-1}
/* zweispaltige Liste nur auf breiten Bildschirmen - sonst sprengt sie das Raster */
@media(min-width:721px){
  .cluster.breit ul{display:grid;grid-template-columns:1fr 1fr;gap:13px 34px}
}

/* --- Storytelling: Irrglaube gegen Wahrheit --- */
.wende{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.glaube,.wahrheit{border-radius:var(--radius);padding:34px 32px;position:relative}
.glaube{background:var(--farbe-flaeche);border:1px solid var(--farbe-warnung-linie)}
.wahrheit{background:linear-gradient(165deg,var(--farbe-flaeche-hell),var(--farbe-flaeche));
  border:1px solid var(--farbe-akzent-linie)}
.glaube .label,.wahrheit .label{display:inline-block;font-family:var(--schrift-technik);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;
  border-radius:20px;margin-bottom:var(--abstand-3)}
.glaube .label{color:var(--farbe-warnung);background:var(--farbe-warnung-schleier);
  border:1px solid var(--farbe-warnung-linie)}
.wahrheit .label{color:var(--farbe-akzent);background:var(--farbe-akzent-schleier);
  border:1px solid var(--farbe-akzent-linie)}
.glaube p{font-size:17px;font-style:italic;color:var(--farbe-text-2)}
.wahrheit p{font-size:17px;color:var(--farbe-text);margin-bottom:14px}
.wahrheit p:last-child{margin-bottom:0;color:var(--farbe-text-2);font-size:var(--groesse-text-klein)}
.wahrheit b{color:var(--farbe-text)}

/* --- Storytelling: Zustand nach dem Projekt --- */
.danach .card{background:linear-gradient(165deg,var(--farbe-flaeche-hell),var(--farbe-flaeche))}
.danach .nummer{font-family:var(--schrift-technik);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--farbe-akzent);display:block;margin-bottom:var(--abstand-2)}

/* --- Kurzfassung der Leistungen (Unternehmensseite) --- */
.kompakt{display:grid;grid-template-columns:1fr 1fr;gap:2px;
  border:1px solid var(--farbe-linie);border-radius:var(--radius);overflow:hidden;
  background:var(--farbe-linie)}
.kompakt>div{background:var(--farbe-flaeche);padding:28px 30px;transition:background .2s}
.kompakt>div:hover{background:var(--farbe-flaeche-hell)}
.kompakt h3{font-size:19px;margin-bottom:8px;display:flex;align-items:center;gap:11px}
.kompakt h3::before{content:"";width:9px;height:9px;border-radius:2px;
  background:var(--farbe-akzent);flex:none}
.kompakt p{font-size:var(--groesse-text-klein)}
.kompakt>div.voll{grid-column:1/-1}

/* --- Ablauf --- */
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:96px 1fr;gap:30px;padding:var(--abstand-5) 0;
  border-bottom:1px solid var(--farbe-linie)}
.step:last-child{border-bottom:0}
.step .num{font-family:var(--schrift-headline);font-size:34px;font-weight:600;
  color:var(--farbe-akzent);line-height:1;padding-top:2px}
.step .num small{display:block;font-family:var(--schrift-technik);font-size:var(--groesse-mini);
  color:var(--farbe-text-3);margin-top:10px;letter-spacing:.08em;font-weight:400}
.step h3{margin-bottom:9px;font-size:22px}
.step p{font-size:16px;max-width:64ch}

/* --- Ergebnisse --- */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:var(--abstand-6)}
.metric{background:var(--farbe-flaeche);border:1px solid var(--farbe-linie);
  border-radius:var(--radius);padding:34px 30px}
.metric .val{font-family:var(--schrift-headline);font-size:52px;font-weight:700;
  color:var(--farbe-text);letter-spacing:-.03em;line-height:1}
.metric .val .u{color:var(--farbe-akzent)}
.metric .lbl{margin-top:var(--abstand-3);font-size:var(--groesse-klein);color:var(--farbe-text-2)}
.stations{border:1px solid var(--farbe-linie);border-radius:var(--radius);overflow:hidden}
.station{display:grid;gap:5px;padding:22px 26px;border-bottom:1px solid var(--farbe-linie);
  background:var(--farbe-flaeche);transition:background .2s}
.station:last-child{border-bottom:0}
.station:hover{background:var(--farbe-flaeche-hell)}
.station .role{font-family:var(--schrift-technik);font-size:var(--groesse-mini);color:var(--farbe-akzent)}
.station .desc{font-size:var(--groesse-text-klein);color:var(--farbe-text)}
.note{margin-top:20px;font-size:13.5px;color:var(--farbe-text-3);font-family:var(--schrift-technik)}

/* --- Ueber mich --- */
.about{display:grid;grid-template-columns:360px 1fr;gap:56px;align-items:start}
.photo{border:1px solid var(--farbe-linie-stark);border-radius:var(--radius);
  overflow:hidden;position:relative}
.photo img{width:100%;height:auto;display:block}
.photo .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;
  background:linear-gradient(to top,rgba(8,11,15,.95),rgba(8,11,15,.6) 55%,transparent);
  font-family:var(--schrift-headline);font-weight:600;font-size:17px;
  /* Verlauf ist immer dunkel -> Schrift fest hell, unabhaengig vom Farbschema */
  color:#fff}
.photo .cap span{display:block;font-family:var(--schrift-technik);font-size:var(--groesse-mini);
  color:rgba(255,255,255,.88);font-weight:400;margin-top:5px}
.about p{margin-bottom:20px;font-size:16.5px}
.usp{border-left:2px solid var(--farbe-akzent);padding:6px 0 6px 22px;margin:26px 0;
  color:var(--farbe-text);font-size:17.5px;line-height:1.55}
.usp b{color:var(--farbe-text)}

/* --- FAQ --- */
.faq{max-width:840px}
details{border-bottom:1px solid var(--farbe-linie)}
summary{list-style:none;cursor:pointer;padding:var(--abstand-4) 44px var(--abstand-4) 0;
  position:relative;font-family:var(--schrift-headline);font-size:19px;font-weight:600;
  color:var(--farbe-text);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--schrift-technik);font-size:24px;color:var(--farbe-akzent);transition:.2s}
details[open] summary::after{content:"\2013"}
details p{padding:0 44px 26px 0;font-size:16px}
summary:focus-visible{outline:2px solid var(--farbe-akzent);outline-offset:3px;border-radius:4px}

/* --- Kontakt --- */
.contact-inner{max-width:760px}
.contact .lead{margin-bottom:var(--abstand-5)}
.kontaktwege{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:var(--abstand-5)}
.contact-meta{margin-top:var(--abstand-5);font-family:var(--schrift-technik);font-size:14px;
  color:var(--farbe-text-2);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
/* Trennpunkt: fruehere Linienfarbe ergab nur 1.54:1 Kontrast. Linienfarben
   sind fuer Raender gedacht, nicht fuer Text. */
.contact-meta .sep{color:var(--farbe-text-3)}
.contact-meta a{color:var(--farbe-akzent);border-bottom:1px solid var(--farbe-akzent-linie);padding-bottom:1px}
.contact-meta a:hover{color:var(--farbe-akzent-hell);border-color:var(--farbe-akzent)}
.fineprint{margin-top:var(--abstand-3);font-size:13.5px;color:var(--farbe-text-3)}
/* Telefonnummer nie mitten in der Nummer umbrechen */
.tel{white-space:nowrap}

/* Terminbuchung: eingebetteter Cal.com-Kalender (seit 25.08.2026).
   Der Kalender wird als REINER iframe geladen, ohne Cal.coms embed.js —
   deshalb bleibt script-src 'self' unberührt.

   Der Kalender lässt sich NICHT umfärben. Am 25.08.2026 im echten Chrome
   gemessen, alle vier Wege scheitern: data-theme wird nicht vererbt,
   color-scheme reicht nicht in einen fremden Rahmen, die normale
   Buchungsadresse ignoriert ?theme=, und Cal.coms /embed-Route hält ihren
   Inhalt auf visibility:hidden, bis deren embed.js sie freischaltet. Er folgt
   deshalb der GERÄTE-Einstellung des Besuchers.

   ACHTUNG, bewusste Ausnahme von der Projektregel: Dunkle Varianten hängen in
   dieser Datei sonst durchgehend an [data-theme="dunkel"], nicht an
   prefers-color-scheme. Hier ist es umgekehrt — und zwar genau deshalb, weil
   der INHALT dieser Karte der Geräteeinstellung folgt und nicht der Wahl auf
   der Seite. Die Karte muss zu dem passen, was in ihr steht. Vorher war sie
   fest weiß; bei dunklem Gerät stand damit ein dunkler Kalender in einer
   weißen Karte, was wie ein Darstellungsfehler aussah. */
.termin-rahmen{max-width:100%;margin-top:var(--abstand-5);border-radius:14px;
  overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.10)}
@media (prefers-color-scheme:dark){
  .termin-rahmen{background:#111214;border-color:rgba(255,255,255,.14)}
}
/* Höhe: fest, und das ist unvermeidbar. Ohne Cal.coms embed.js passt niemand
   die Höhe an den Inhalt an — die Höhe eines fremden iframes lässt sich von
   außen weder auslesen noch meldet Cal.com sie. Gemessen am 25.08.2026: Der
   Kalender sendet zwar Nachrichten an die Elternseite (navigatedToBooker,
   availabilityLoaded), aber KEINE mit Maßen.

   Zu klein ist schlimmer als zu groß: Bei 700 px war die Buchungsstrecke
   abgeschnitten, und weil .termin-rahmen overflow:hidden trägt und unten
   sauber abrundet, sah die Karte trotzdem vollständig aus.

   Zwei Werte, weil Cal.coms Layout die vorgegebene Höhe IMMER ausfüllt (bei
   3000 px Rahmen meldet der Inhalt 3000 px). Zu viel Höhe zieht das
   Monatsraster auseinander und lässt oben ein leeres Band stehen. Die
   Vermittlerseite braucht weniger, weil ihr Termintyp keine Beschreibungs-
   zeile hat — beide Werte am Bildschirm ausgesucht, nicht gerechnet. */
.termin-frame{display:block;width:100%;height:1200px;border:0}
.termin-frame--vermittler{height:1050px}
@media (max-width:640px){
  .termin-frame{height:900px}
  .termin-frame--vermittler{height:820px}
}

/* Der Fallback ist keine Zierde: Browser mit striktem Schutz blockieren
   Drittanbieter-Rahmen. Ohne ihn wäre die Buchung dort ersatzlos tot. */
.termin-fallback{margin-top:14px;font-size:14px;color:var(--farbe-text-3)}
.termin-fallback a{color:var(--farbe-akzent);border-bottom:1px solid var(--farbe-akzent-linie);padding-bottom:1px}

/* --- LinkedIn-Hinweis --- */
.linkedin{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--farbe-linie);border-radius:var(--radius);
  background:var(--farbe-flaeche);padding:24px 28px;margin-top:var(--abstand-5)}
.linkedin .txt{flex:1;min-width:240px}
.linkedin .txt b{color:var(--farbe-text);display:block;font-family:var(--schrift-headline);
  font-size:18px;margin-bottom:4px}
.linkedin .txt span{font-size:var(--groesse-text-klein);color:var(--farbe-text-2)}

/* --- Fusszeile: echte Spalten statt einer umbrechenden Linkreihe --- */
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--abstand-5) var(--abstand-4);
  padding:var(--abstand-6) 0 var(--abstand-5)}
.foot-marke .brandlogo{width:96px;height:44px;margin-bottom:16px}
.foot-marke p{font-size:14px;color:var(--farbe-text-2);margin:0 0 5px;max-width:34ch;line-height:1.6}
.foot-marke .ort{font-family:var(--schrift-technik);font-size:12px;letter-spacing:.07em;
  color:var(--farbe-text-3);text-transform:uppercase;margin-top:11px}
.foot-spalte{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.foot-titel{font-family:var(--schrift-technik);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--farbe-text-3);margin-bottom:3px}
.foot-spalte a{font-size:14.5px;color:var(--farbe-text-2);transition:color .18s}
.foot-spalte a:hover{color:var(--farbe-akzent)}
.foot-note{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  border-top:1px solid var(--farbe-linie);padding:var(--abstand-3) 0 var(--abstand-5);
  font-size:13px;color:var(--farbe-text-3)}

/* --- Vermittler-Seite: Eckdaten --- */
.eckdaten{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--farbe-linie);
  border:1px solid var(--farbe-linie);border-radius:var(--radius);overflow:hidden;margin-top:var(--abstand-5)}
.eckdaten>div{background:var(--farbe-flaeche);padding:24px 22px}
.eckdaten dt{font-family:var(--schrift-technik);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--farbe-text-3);margin-bottom:9px}
.eckdaten dd{font-family:var(--schrift-headline);font-size:19px;font-weight:600;
  color:var(--farbe-text);letter-spacing:-.01em}
.eckdaten dd small{display:block;font-family:var(--schrift-text);font-size:13px;
  font-weight:400;color:var(--farbe-text-2);margin-top:5px;letter-spacing:0}

/* --- Vermittler-Seite: Kompetenz-Matrix --- */
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mfeld{background:var(--farbe-flaeche);border:1px solid var(--farbe-linie);
  border-radius:var(--radius);padding:30px 28px}
.mfeld h3{font-size:19px;margin-bottom:8px;display:flex;align-items:center;gap:11px}
.mfeld h3::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--farbe-akzent);flex:none}
.mfeld .jahre{font-family:var(--schrift-technik);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--farbe-text-3);margin-bottom:18px;display:block}
.stichworte{display:flex;flex-wrap:wrap;gap:8px}
.stichworte span{font-size:13.5px;color:var(--farbe-text-2);background:var(--farbe-hintergrund-2);
  border:1px solid var(--farbe-linie);border-radius:6px;padding:6px 11px;line-height:1.3}

/* --- Vermittler-Seite: Projekte --- */
.projekt{border-bottom:1px solid var(--farbe-linie);padding:var(--abstand-5) 0}
.projekt:last-child{border-bottom:0}
.projekt .kopf{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-bottom:12px}
.projekt .zeit{font-family:var(--schrift-technik);font-size:12.5px;color:var(--farbe-akzent);flex:none}
.projekt h3{font-size:21px}
.projekt .firma{font-size:var(--groesse-text-klein);color:var(--farbe-text-3);width:100%}
.projekt p{font-size:var(--groesse-text-klein);margin-bottom:10px;max-width:76ch}
.projekt .wirkung{color:var(--farbe-text)}
.projekt .stack{font-family:var(--schrift-technik);font-size:12.5px;color:var(--farbe-text-3);
  margin-top:12px;line-height:1.7}

/* --- Vermittler-Seite: Formular --- */
.formular{background:var(--farbe-flaeche);border:1px solid var(--farbe-linie);
  border-radius:var(--radius);padding:34px 32px;max-width:620px}
.feld{margin-bottom:var(--abstand-3)}
.feld label{display:block;font-size:14px;color:var(--farbe-text-2);margin-bottom:7px}
.feld .opt{color:var(--farbe-text-3);font-size:13px}
.feld input,.feld textarea{width:100%;font-family:var(--schrift-text);font-size:15.5px;
  color:var(--farbe-text);background:var(--farbe-hintergrund);border:1px solid var(--farbe-linie-stark);
  border-radius:var(--radius-klein);padding:12px 14px}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--farbe-akzent);outline-offset:1px;
  border-color:var(--farbe-akzent)}
.feld textarea{min-height:96px;resize:vertical}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Rueckmeldung, wenn das Absenden nicht geklappt hat (wird per JS eingeblendet) */
.form-fehler{background:var(--farbe-warnung-schleier);border-left:3px solid var(--farbe-warnung);
  border-radius:0 var(--radius-klein) var(--radius-klein) 0;padding:14px 18px;
  margin:0 0 var(--abstand-3);font-size:14.5px;color:var(--farbe-text-2);line-height:1.6}
.form-fehler[hidden]{display:none}

/* --- Skip-Link: fuer Tastatur- und Screenreader-Nutzer, sichtbar erst bei Fokus --- */
.skiplink{position:absolute;left:12px;top:-64px;z-index:1000;background:var(--farbe-akzent);
  color:var(--farbe-akzent-schrift);padding:10px 18px;border-radius:10px;font-weight:600;
  text-decoration:none;transition:top .15s ease}
.skiplink:focus{top:12px;outline:2px solid var(--farbe-akzent-schrift);outline-offset:2px}
.hinweis-klein{font-size:13px;color:var(--farbe-text-3);margin-top:var(--abstand-3);line-height:1.6}
.hinweis-klein a{color:var(--farbe-akzent);text-decoration:underline}

/* --- Rechtstexte: breitere, gut lesbare Spalte --- */
.recht{max-width:92ch}
/* Titel-Hero der Rechtsseiten: sitzt in derselben Spalte wie der Text
   (buendig statt abgekoppelt) und mit deutlich weniger Leerraum darunter */
.hero-recht{padding:clamp(56px,7vw,88px) 0 clamp(16px,2vw,26px)}
.hero-recht + section{padding-top:clamp(20px,2.6vw,36px)}
.recht h2{font-size:var(--groesse-h3);margin:var(--abstand-5) 0 var(--abstand-3)}
.recht h2:first-of-type{margin-top:var(--abstand-4)}
.recht h3{font-size:18px;margin:var(--abstand-4) 0 10px}
.recht p{font-size:var(--groesse-text-klein);margin-bottom:var(--abstand-3)}
.recht ul{margin:0 0 var(--abstand-3) 20px;padding:0}
.recht li{font-size:var(--groesse-text-klein);color:var(--farbe-text-2);margin-bottom:8px;line-height:1.7}
.recht a{color:var(--farbe-akzent);text-decoration:underline;text-underline-offset:2px}
/* E-Mail-Adressen und Web-Adressen sind unteilbare Woerter und würden
   auf schmalen Geraeten aus der Seite laufen - hier duerfen sie umbrechen */
.recht p,.recht li,.recht a,.recht .anschrift{overflow-wrap:break-word}
.recht .anschrift{font-style:normal;font-size:var(--groesse-text-klein);color:var(--farbe-text-2);
  line-height:1.9;margin-bottom:var(--abstand-3)}
.recht .anschrift strong{color:var(--farbe-text)}
.entscheidung{background:var(--farbe-warnung-schleier);border-left:3px solid var(--farbe-warnung);
  border-radius:0 var(--radius-klein) var(--radius-klein) 0;padding:18px 22px;margin:var(--abstand-4) 0}
.entscheidung p{margin:0 0 8px;font-size:14.5px}
.entscheidung p:last-child{margin:0}
.entscheidung b{color:var(--farbe-warnung)}
.stand{font-family:var(--schrift-technik);font-size:12.5px;letter-spacing:.06em;
  color:var(--farbe-text-3);margin-top:var(--abstand-5);padding-top:var(--abstand-3);
  border-top:1px solid var(--farbe-linie)}

/* Hier stand bis zum 17.08.2026 .rechtsquelle für das Copyright-Logo der
   IT-Recht Kanzlei unter der Datenschutzerklärung. Die Kanzlei hat die lokale
   Auslieferung ihres Logos untersagt und gebeten, in dem Fall ganz darauf zu
   verzichten; vom fremden Server laden verbietet Projektregel 1. Logo, Bild-
   datei und diese Regeln sind deshalb entfallen. Nicht wieder aufnehmen —
   Hintergrund in RECHTSTEXTE-KANZLEI.md, Punkt 2.6. */

/* --- Einblend-Effekt ---
   Das Ausblenden haengt bewusst an html.js, und diese Klasse setzt allein
   theme-init.js. Ohne JavaScript greift die Regel nie und der Inhalt steht
   sofort sichtbar da. Vorher galt .reveal{opacity:0} unbedingt: Wer kein
   JavaScript hatte, sah 85 % der Startseite nicht - einschliesslich beider
   Kontaktformulare, weil erst site.js die Klasse .in nachtraegt.

   Achtung bei Aenderungen: html.js .reveal hat die Spezifitaet (0,2,1). Jede
   Regel, die das Ausblenden wieder aufheben soll, muss mindestens gleichauf
   liegen - deshalb steht html.js auch vor .reveal.in und in der Regel fuer
   prefers-reduced-motion weiter unten. */
html.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .reveal.in{opacity:1;transform:none}

/* ============================================================================
   Kleine Bildschirme
   ============================================================================ */
@media(max-width:1250px){
  /* Nur in der KOPFZEILE die Beschriftung ausblenden - schafft Platz.
     Die Fusszeile behaelt sie, dort ist genug Raum. */
  header .brand .sub,header .brand .divider{display:none}
}
@media(max-width:1150px){
  /* Kopfzeile schrumpft mit, damit Navigation, Umschalter und Button nebeneinander passen */
  .nav-links{gap:18px}
  .nav-links a{font-size:14px}
  .nav-cta .btn{padding:12px 18px;font-size:14.5px}
}
@media(max-width:920px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .nav-cta .btn-primary{display:none}
  .about{grid-template-columns:1fr;gap:32px}
  .photo{max-width:340px}
}
@media(max-width:720px){
  :root{--groesse-text:16px;--rand-seitlich:20px}
  .grid-2,.grid-3,.metrics,.wende,.kompakt,.matrix{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr;gap:var(--abstand-4) var(--abstand-3);
    padding:var(--abstand-5) 0 var(--abstand-4)}
  .foot-marke{grid-column:1/-1}
  .foot-marke .brandlogo{margin-bottom:11px}
  .foot-marke p{font-size:13.5px;max-width:none}
  .foot-marke .ort{margin-top:8px}
  .foot-spalte{gap:9px}
  .foot-spalte a{font-size:14px}
  .eckdaten{grid-template-columns:1fr 1fr}
  .eckdaten>div{padding:19px 17px}
  .eckdaten dd{font-size:17px}
  .eckdaten dd small{font-size:12.5px;margin-top:4px}
  .step{grid-template-columns:1fr;gap:8px}
  .step .num small{display:inline;margin-left:8px}
}
/* ============================================================================
   Grosse & hochaufloesende Bildschirme (4K, Ultrawide, Curved)
   Inhaltsbreite und Schrift wachsen mit, damit der Inhalt nicht winzig
   in der Mitte "schwimmt", sondern den Monitor angemessen nutzt.
   ============================================================================ */
@media(min-width:1600px){
  :root{
    --breite-inhalt: 1520px;
    --groesse-text: 18px;
    --groesse-text-klein: 16.5px;
    --groesse-klein: 15px;
  }
  /* Rechtstext-Spalte waechst mit, bleibt aber gut lesbar */
  .recht{max-width:98ch}
}
@media(min-width:2100px){
  :root{
    --breite-inhalt: 1680px;
    --groesse-text: 19px;
    --groesse-text-klein: 17.5px;
    --groesse-klein: 15.5px;
    /* Ueberschriften duerfen auf sehr breiten Schirmen weiter mitwachsen */
    --groesse-hero: clamp(40px, 6.3vw, 92px);
    --groesse-h2:   clamp(30px, 4.4vw, 58px);
    --groesse-lead: clamp(18px, 2.1vw, 24px);
  }
  .recht{max-width:104ch}
}
/* Zwischenstufe fuer grosse Monitore (~2560px, WQHD/QHD, Curved) --
   fuellt die Luecke zwischen 2100px und sehr breiten Ultrawides */
@media(min-width:2560px){
  :root{
    --breite-inhalt: 1800px;
    --groesse-text: 20px;
    --groesse-text-klein: 18.5px;
    --groesse-klein: 16px;
    --groesse-hero: clamp(40px, 6.3vw, 104px);
    --groesse-h2:   clamp(30px, 4.4vw, 64px);
    --groesse-lead: clamp(18px, 2.1vw, 26px);
  }
  .recht{max-width:110ch}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  /* html.js noetig, sonst unterliegt die Regel dem Ausblenden oben (0,2,1). */
  html.js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}