/* ============================================================================
   sarikohn — Website V2 · Design-System
   Montserrat 700/800/900 · Inter 300–600 · Rot #CC0019 · System-Mono für Daten
   Basis: 02-marke/design-system. Keine neuen Farben, keine neue Marken-Schrift.

   Aufbau:
     1  Tokens        Farbe · Typo · Raum · Bewegung · Tiefe
     2  Schriften     lokal, kein Google-Fonts-Aufruf
     3  Reset
     4  Bereichs-Signaturen — die fünf visuellen Welten
     …  Komponenten (unverändert übernommen, Werte korrigiert)
     35+ Neue Module — Schiene, Slots, Suche, Bewegung, Raster
   ============================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* --- Marke. Unverändert aus dem Design-System. --- */
  --red:#CC0019; --red-dark:#8F0012; --red-bright:#FF3A46; --red-light:#F5CCCF; --red-tint:#FDF4F5;
  --ink:#111113; --ink-soft:#3a3a40;
  --teal:#2AB8B8; --teal-deep:#1a7878; --teal-light:#D4F4F4;
  --navy:#141d30; --navy-2:#1E2E48;
  --cream:#F6F1EA; --white:#fff;

  /* --- Neue Abstufungen innerhalb derselben Töne. ---
     Nötig, weil die alten Werte den WCAG-Grenzwert unterschritten:
     --g400 #98989F auf Weiß = 2.87:1, --teal auf Weiß = 2.43:1,
     --g200 als Rahmen bedienbarer Felder = 1.37:1 (Grenze 3.0). */
  --red-mid:#E3727B;      /* große Ziffern auf Weiß — 3.02:1 */
  --teal-mid:#23A0A0;     /* Icons und Grafiklinien auf Weiß — 3.01:1 */
  --navy-soft:#33405C;    /* Consulting-Schiene auf Creme */

  --g50:#F7F7F8;          /* Fläche */
  --g100:#ECECEE;         /* Fläche, dekorative Linie */
  --g200:#DCDCE0;         /* dekorative Linie — NIE als Rahmen eines Bedienelements */
  --g250:#8A8A96;         /* Rahmen bedienbarer Felder, Grafiklinien — 3.00:1 */
  --g300:#C2C2C8;         /* kräftigere dekorative Linie */
  --g400:#67676F;         /* leiser Text — war #98989F, jetzt 5.05:1 */
  --g500:#6C6C74;         /* Text */
  --g600:#54545C;         /* Fließtext */

  /* Leise Beschriftungen unterscheiden sich künftig durch Größe, Laufweite und
     die Datenschrift von normalem Text — nicht mehr dadurch, dass sie zu hell sind. */

  /* --- Typografie --- */
  --fd:'Montserrat',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  /* Dritte Rolle: Daten. Der System-Monospace — es wird keine Datei geladen und
     keine Marken-Schrift ergänzt. Nur klein, versal und gesperrt eingesetzt. */
  --fm:ui-monospace,'SF Mono',SFMono-Regular,'Roboto Mono',Menlo,Consolas,monospace;

  /* Schriftgroessen tragen das Praefix --fs-, damit sie sich nicht mit den
     Bewegungsdauern (--t-) beissen. --t-base war vorher beides. */
  --fs-2xs:11px; --fs-xs:12.5px; --fs-sm:14px; --fs-base:16.5px;
  --fs-md:17.5px; --fs-lg:19px;
  --h1:clamp(40px,6.6vw,92px);
  --h2:clamp(29px,4.2vw,54px);
  --h3:clamp(21px,2.4vw,28px);
  --h4:20px;
  --data:.72rem;          /* Grundgröße der Datenschrift */
  --data-ls:.13em;        /* deren Laufweite */

  /* --- Raum. Eine 8er-Skala statt 42 gefühlter Werte. --- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px;
  --sp-5:64px; --sp-6:96px; --sp-7:144px;

  /* Vier Containerbreiten statt einer. */
  --w-text:760px; --w-base:1220px; --w-wide:1480px;
  --maxw:var(--w-base);   /* Rückwärtskompatibilität für .wrap */
  --gut:40px;
  /* Die Leiste steht oben gross und schrumpft beim Scrollen — dieselbe
     Bewegung, die die Lebenszyklus-Schiene ohnehin macht. Der gescrollte
     Wert steht bei .nav.scrolled, der mobile in der 900px-Abfrage. */
  --nav-h:86px;

  /* Vier Sektionsabstände mit GLEICHEM vh-Anteil, damit ihr Verhältnis
     zueinander bei jeder Fensterhöhe stabil bleibt. Vorher: fünf Skalen
     mit 7.5/11/14/18vh — das Verhältnis kippte mit der Fensterhöhe. */
  --sec-sm:clamp(48px,6.5vh,72px);
  --sec-md:clamp(72px,9.5vh,108px);
  --sec-lg:clamp(96px,13vh,152px);
  --sec-xl:clamp(128px,17vh,208px);
  --sec:var(--sec-md);            /* Altname */
  --sec-tight:var(--sec-sm);      /* Altname */

  /* --- Form --- */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px; --r-pill:999px;
  --line:1px solid var(--g100);
  --line-strong:1px solid var(--g250);

  /* --- Tiefe. Vier Ebenen, eine Lichtquelle von oben, eine Schattenrichtung.
     Vorher kodierten die Stufen die Komponente statt der Höhe. Regel:
     ein Element steigt bei Interaktion um GENAU eine Ebene. --- */
  --el-1:0 2px 6px -2px rgba(20,20,30,.10), 0 8px 20px -12px rgba(20,20,30,.22);
  --el-2:0 4px 12px -4px rgba(20,20,30,.13), 0 22px 46px -22px rgba(20,20,30,.34);
  --el-3:0 8px 22px -8px rgba(20,20,30,.16), 0 44px 92px -30px rgba(10,10,20,.44);
  /* Altnamen bleiben, damit bestehende Regeln weiterlaufen. */
  --sh-sm:var(--el-1); --sh-md:var(--el-2); --sh-lg:var(--el-2); --sh-xl:var(--el-3);

  --ring:0 0 0 3px var(--red-light);   /* stand dreimal identisch dupliziert */

  /* --- Bewegung. Vorher: 17 Dauern, 5 Easings, kein einziges Token. --- */
  --t-tap:90ms;      /* unter dem Finger — wird als gleichzeitig gelesen */
  --t-fast:180ms;    /* Hover, Fokus, Farbe */
  --t-base:340ms;    /* Flächen, die Größe oder Sichtbarkeit ändern */
  --t-slow:680ms;    /* Sektionseinläufe */
  --t-draw:1400ms;   /* gezeichnete Pfade, wenn nicht scrollgebunden */

  --e-out:cubic-bezier(.22,.7,.2,1);      /* schnell los, weich aus — Einläufe */
  --e-io:cubic-bezier(.65,0,.2,1);        /* anfahren und bremsen — Ortswechsel */
  --e-snap:cubic-bezier(.2,1.25,.36,1);   /* 4 % Überschwung — nur Direktheit */
  --e-lin:linear;                          /* nur scrollgebunden */
  --ease:var(--e-out);                     /* Altname */

  --d-xs:4px; --d-sm:10px; --d-md:20px; --d-lg:40px;   /* Bewegungsdistanzen */
  --stag:70ms;        /* Staffelintervall */
  --t-notfall:2500ms; /* Lauf 11.K (F-01): so lange wartet die Rueckfallebene auf app.js */
  --stag-max:8;       /* danach wird nicht weiter gestaffelt */

  /* --- Signatur. Wird je Bereich überschrieben, siehe Abschnitt 4. --- */
  --sig:var(--red);
  --sig-deep:var(--red-dark);
  --sig-soft:var(--red-light);
  --sig-tint:var(--red-tint);
}

/* ---------- 2. SCHRIFTEN (lokal — kein Aufruf an fonts.googleapis.com) ----------
   Erzeugt von _werkzeug/schriften.py. Grund: LG München I, Az. 3 O 17493/20.
   Nur die Subsets latin und latin-ext; alles Weitere wäre Ballast. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-700-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:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-800-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:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/montserrat-900-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:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/montserrat-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-300-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:300;font-display:swap;src:url(fonts/inter-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400-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:400;font-display:swap;src:url(fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500-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:500;font-display:swap;src:url(fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600-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:600;font-display:swap;src:url(fonts/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{font-family:var(--fb);font-size:var(--fs-base);color:var(--ink);background:var(--white);
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip;
  /* Lauf 11.O: Texte aus /admin (Zitat, Werdegang, Partnertext) koennen ein Wort tragen, das breiter
     ist als die Karte („Reinigungsdienstleistungsunternehmen“, Testzitat vom 06.10.2026) — wegen
     overflow-x:clip wurde es am Rand abgeschnitten. Bricht nur Woerter um, die sonst ueberlaufen. */
  overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--fd);font-weight:800;letter-spacing:-.025em;line-height:1.06;
  overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:balance}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
/* Auf roten und dunklen Flächen war der rote Fokusring unsichtbar (1.00:1). */
.cta :focus-visible,.sec.dark :focus-visible,.scrolly :focus-visible,
.quote :focus-visible,.subhero :focus-visible,.hero :focus-visible,
.foot :focus-visible,.mmenu :focus-visible,.elband :focus-visible{outline-color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap-text{max-width:var(--w-text);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:var(--w-wide);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:900px;margin:0 auto;padding:0 var(--gut)}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--red);color:#fff;
  font-family:var(--fd);font-weight:700;padding:14px 22px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* Eyebrows waren rot. Wenn Eyebrow, H1-Halbsatz, Buttons, Listenpunkte, Zahlen,
   Links und Icons alle rot sind, betont Rot nichts mehr. Ihre Aufgabe ist
   Einordnung, nicht Betonung — also grau, dafür mit der Datenschrift. */
.eyebrow{font-family:var(--fm);font-weight:600;font-size:var(--data);letter-spacing:var(--data-ls);
  text-transform:uppercase;color:var(--g400);display:block;font-variant-numeric:tabular-nums}
.eyebrow.on-dark{color:rgba(255,255,255,.62)}
.eyebrow.teal{color:var(--teal-deep)}
.eyebrow.sig{color:var(--sig)}
.eyebrow.red{color:var(--red)}

/* Zahlenkolonnen bekommen Tabellenziffern — sonst tanzen Preise und Termine. */
.semrow .sprice,.daterow,.facts,.price-grid,.pcard .pprice,.fact .fv,.prose table,
.bd-price,.bd-summary,.bookbar .bb-p,.elband .elprice,.lz-num,.data{font-variant-numeric:tabular-nums}

/* Datenschrift-Hilfsklasse */
.data{font-family:var(--fm);font-size:var(--data);letter-spacing:var(--data-ls);
  text-transform:uppercase;font-weight:600;color:var(--g400)}

/* ---------- 3. NAVIGATION ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;
  transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),backdrop-filter var(--t-base) var(--e-out)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px}
.nav-logo{height:40px;position:relative;display:block;flex:none;
  transition:height var(--t-base) var(--e-io)}
.nav-logo img{height:40px;width:auto;
  transition:opacity var(--t-base) var(--ease),height var(--t-base) var(--e-io)}
.nav-logo .dark{position:absolute;inset:0;opacity:0}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-item{position:relative}
.nav-item>a,.nav-item>button{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fb);font-size:15px;font-weight:500;color:rgba(255,255,255,.84);
  padding:9px 15px;border-radius:var(--r-pill);transition:color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out)}
.nav-item>a:hover,.nav-item>button:hover,.nav-item.open>button,
.nav-item.open>a.nav-top{color:#fff;background:rgba(255,255,255,.12)}
.nav-item>a.current{color:#fff;font-weight:600}
.nav-item>a.current::after{content:'';position:absolute;left:15px;right:15px;bottom:2px;height:2px;background:var(--red-bright);border-radius:2px}
.nav-item .car{width:9px;height:9px;stroke:currentColor;stroke-width:2.6;fill:none;transition:transform var(--t-base) var(--ease);opacity:.7}
.nav-item.open .car{transform:rotate(180deg)}
.nav-item>a.nav-cta,.nav .nav-links a.nav-cta{font-family:var(--fd);font-weight:700;font-size:14px;
  padding:10px 24px;border-radius:var(--r-pill);background:var(--red);color:#fff;white-space:nowrap;
  transition:background var(--t-fast) var(--e-out),transform var(--t-fast) var(--ease)}
.nav-item>a.nav-cta:hover,.nav .nav-links a.nav-cta:hover{background:var(--red-dark);color:#fff;transform:translateY(-1px)}
.nav.scrolled .nav-item>a.nav-cta,.nav.nav-solid .nav-item>a.nav-cta{color:#fff;background:var(--red)}
.nav.scrolled .nav-item>a.nav-cta:hover,.nav.nav-solid .nav-item>a.nav-cta:hover{background:var(--red-dark);color:#fff}

/* frosted / solid */
.nav.scrolled,.nav.nav-solid{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.07)}
.nav.scrolled .nav-logo .white,.nav.nav-solid .nav-logo .white{opacity:0}
.nav.scrolled .nav-logo .dark,.nav.nav-solid .nav-logo .dark{opacity:1}
/* Gescrollt schrumpft die Leiste von 86 auf 68 px, das Logo von 40 auf 30 px.
   Bewusst NICHT an .nav-solid gehaengt: die 31 Unterseiten tragen nav-solid
   dauerhaft und stuenden sonst auch oben schon klein da. */
.nav.scrolled{--nav-h:68px}
.nav.scrolled .nav-logo,.nav.scrolled .nav-logo img{height:30px}
.nav.scrolled .nav-item>a,.nav.scrolled .nav-item>button,
.nav.nav-solid .nav-item>a,.nav.nav-solid .nav-item>button{color:var(--g600)}
.nav.scrolled .nav-item>a:hover,.nav.nav-solid .nav-item>a:hover,
.nav.scrolled .nav-item>button:hover,.nav.nav-solid .nav-item>button:hover,
.nav.scrolled .nav-item.open>button,.nav.nav-solid .nav-item.open>button,
.nav.scrolled .nav-item.open>a.nav-top,.nav.nav-solid .nav-item.open>a.nav-top{color:var(--ink);background:var(--g100)}
.nav.scrolled .nav-item>a.current,.nav.nav-solid .nav-item>a.current{color:var(--ink)}
.nav.scrolled .nav-item>a.current::after,.nav.nav-solid .nav-item>a.current::after{background:var(--red)}
.nav.scrolled .nav-burger span,.nav.nav-solid .nav-burger span{background:var(--ink)}

/* Mega-Menü */
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,10px);
  min-width:560px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-xl);
  padding:26px;opacity:0;visibility:hidden;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),visibility var(--t-fast) var(--e-out);
  border:1px solid var(--g100)}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega.wide{min-width:760px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.mega-grid.three{grid-template-columns:1fr 1fr 1fr}
.mega-col .mega-h{font-family:var(--fd);font-weight:800;line-height:1.06;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--g400);margin:6px 0 10px;padding:0 12px}
.mega a.ml{display:block;padding:10px 12px;border-radius:var(--r-sm);transition:background var(--t-fast) var(--e-out)}
.mega a.ml:hover{background:var(--red-tint)}
.mega a.ml .mt{font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink);display:block}
.mega a.ml .md{font-size:13px;color:var(--g500);line-height:1.45;margin-top:2px;display:block}
.mega-foot{margin-top:18px;padding-top:16px;border-top:var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap}
.mega-foot .mf-note{font-size:13px;color:var(--g500)}

/* Burger + Mobile */
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:var(--t-base) var(--ease)}
.mmenu{position:fixed;inset:0;z-index:999;max-width:100vw;background:rgba(12,12,14,.985);backdrop-filter:blur(14px);
  padding:calc(var(--nav-h) + 20px) 0 40px;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-base) var(--e-out),visibility var(--t-base) var(--e-out)}
.mmenu.open{opacity:1;visibility:visible;pointer-events:auto}
.mgroup{border-bottom:1px solid rgba(255,255,255,.34)}
.mgroup>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;font-family:var(--fd);font-weight:800;font-size:26px;color:#fff;letter-spacing:-.02em}
.mgroup>summary::-webkit-details-marker{display:none}
.mgroup>summary .px{width:20px;height:20px;position:relative;flex:none}
.mgroup>summary .px::before,.mgroup>summary .px::after{content:'';position:absolute;background:var(--red-bright);border-radius:2px;transition:transform var(--t-base) var(--e-out)}
.mgroup>summary .px::before{top:9px;left:0;right:0;height:2px}
.mgroup>summary .px::after{left:9px;top:0;bottom:0;width:2px}
.mgroup[open]>summary .px::after{transform:scaleY(0)}
.mgroup .mlinks{padding:0 0 18px}
.mgroup .mlinks a{display:block;padding:9px 0;font-size:16px;color:rgba(255,255,255,.7)}
.mgroup .mlinks a:hover{color:#fff}
.mmenu .msolo{display:block;padding:18px 0;font-family:var(--fd);font-weight:800;font-size:26px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.34);letter-spacing:-.02em}
.mmenu .mcta{margin-top:26px}

/* ---------- 4. BUTTONS & LINKS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--fd);font-weight:700;
  font-size:15px;padding:15px 30px;border-radius:var(--r-pill);cursor:pointer;border:1.6px solid transparent;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out);text-align:center}
.btn svg{width:15px;height:15px;flex:none;transition:transform var(--t-base) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-sm{padding:11px 22px;font-size:13.5px}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42);color:#fff;backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:var(--g200);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-block{width:100%}
.flink{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--red);display:inline-flex;align-items:center;gap:8px}
.flink svg{width:15px;height:15px;transition:transform var(--t-base) var(--ease)}
.flink:hover svg{transform:translateX(5px)}
.flink.on-dark{color:var(--red-bright)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 5. HERO (Startseite) ---------- */
/* Der Hero fuellt beim Oeffnen immer den ganzen Bildschirm. Erst beim Scrollen
   kommt die Bereichswahl darunter ins Bild — Entscheidung Darius, 18.08.2026.
   (Zwischenzeitlich stand hier 88svh, damit die Kacheln schon hineinragen. Das
   sah unfertig aus: Man sah oben einen dunklen Kasten und unten einen
   angeschnittenen weissen Streifen.)

   Warum drei Zeilen statt einer: Auf dem Handy aendert sich die Hoehe des
   sichtbaren Bereichs, waehrend die Adressleiste ein- und ausfaehrt.
   - svh = kleinster Zustand (Adressleiste sichtbar). Sicherer Rueckfall, aber
     sobald die Leiste einfaehrt, blitzt unten der naechste Abschnitt auf.
   - dvh = folgt dem tatsaechlich sichtbaren Bereich. Genau das ist gemeint:
     immer flaechenfuellend, egal in welchem Zustand.
   min-height statt height, damit auf sehr flachen Fenstern (Handy quer) der
   Inhalt den Hero waechst laesst, statt abgeschnitten zu werden.
   Der Hero traegt nur die Startseite. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#0b0b0d}
@supports (height:100dvh){
  .hero{min-height:100dvh}
}
.hero-media{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-scrim{position:absolute;inset:0;z-index:1}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:6vh;padding-top:calc(var(--nav-h) + 28px)}
.hero .eyebrow{color:rgba(255,255,255,.82);margin-bottom:18px}
.hero h1{color:#fff;font-weight:900;font-size:clamp(42px,7.4vw,102px);line-height:.94;letter-spacing:-.035em}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 b{color:var(--red-bright);font-weight:900}
.hero-sub{color:rgba(255,255,255,.88);font-size:clamp(16px,1.55vw,19.5px);font-weight:300;max-width:680px;
  margin:24px 0 28px;line-height:1.55}
.hero-marks{display:flex;gap:24px;flex-wrap:wrap;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.38)}
.hero-mark{color:rgba(255,255,255,.72);font-size:13.5px;display:flex;align-items:center;gap:9px;
  flex:0 0 auto;white-space:nowrap}
.hero-mark svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2.4;flex:none}
.scrollcue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;display:flex;
  flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.55)}
.scrollcue .bar{width:1.5px;height:42px;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:cue 2.6s var(--e-out) infinite}
.scrollcue span{font-family:var(--fd);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 6. SEITENKOPF (Unterseiten) ---------- */
.crumb{font-family:var(--fd);font-weight:700;font-size:12.5px;letter-spacing:.02em;color:var(--g500);margin-bottom:20px}
.crumb a:hover{color:var(--ink)}
.crumb .sep{margin:0 8px;opacity:.8}
.crumb .here{color:var(--red)}

.pagehead{background:var(--cream);padding:calc(var(--nav-h) + 84px) 0 var(--sec-tight);position:relative;overflow:hidden}
.pagehead.plain{background:var(--white);border-bottom:var(--line)}
.pagehead::after{content:'';position:absolute;right:-160px;top:-140px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(204,0,25,.10),transparent 62%);pointer-events:none}
.pagehead>.wrap{position:relative;z-index:2}
.pagehead h1{font-size:var(--h1);line-height:.98;max-width:17ch}
.pagehead h1 b{color:var(--red)}
.pagehead .lead-p{color:var(--g600);font-size:clamp(17px,1.8vw,21px);font-weight:300;max-width:62ch;
  margin-top:24px;line-height:1.55}
.pagehead .eyebrow{margin-bottom:16px}
.pagehead .btnrow{margin-top:34px}
.pagehead-split .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.ph-figure{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh-lg)}
.ph-figure img{width:100%;height:100%;object-fit:cover}

/* dunkler Bildkopf */
.subhero{position:relative;min-height:74vh;display:flex;align-items:flex-end;overflow:hidden;background:#0b0b0d}
.subhero-media{position:absolute;inset:-8% 0;z-index:0}
.subhero-media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.subhero-scrim{position:absolute;inset:0;z-index:1}
.subhero-inner{position:relative;z-index:2;width:100%;padding-bottom:8vh;padding-top:calc(var(--nav-h) + 60px)}
.subhero .crumb{color:rgba(255,255,255,.6)}
.subhero .crumb a:hover{color:#fff}
.subhero .crumb .here{color:var(--red-bright)}
.subhero h1{color:#fff;font-weight:900;font-size:clamp(40px,6.6vw,92px);line-height:.96;letter-spacing:-.035em;max-width:15ch}
.subhero h1 b{color:var(--red-bright)}
.subhero .lead-p{color:rgba(255,255,255,.86);font-size:clamp(17px,1.8vw,21px);font-weight:300;max-width:60ch;
  margin-top:26px;line-height:1.55}
.subhero .btnrow{margin-top:32px}

/* ---------- 7. SEKTIONEN ---------- */
.sec{padding:var(--sec) 0}
.sec.tight{padding:var(--sec-tight) 0}
.sec.cream{background:var(--cream)}
.sec.g50{background:var(--g50)}
.sec.dark{background:var(--ink);color:#fff}
.sec.navy{background:var(--navy);color:#fff}
.sec-head{max-width:780px;margin-bottom:clamp(34px,5vh,58px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head h2{font-size:var(--h2)}
.sec-head p{font-size:var(--fs-md);font-weight:300;color:var(--g600);margin-top:18px;line-height:1.62;max-width:64ch}
.sec.dark .sec-head p,.sec.navy .sec-head p{color:rgba(255,255,255,.72)}
.sec-head.center p{margin-left:auto;margin-right:auto}

.statement{background:var(--cream);padding:var(--sec-lg) 0}
.statement p{font-family:var(--fd);font-weight:800;font-size:clamp(27px,3.9vw,52px);line-height:1.15;
  letter-spacing:-.025em;max-width:25ch}
.statement .w{display:inline-block;transition:opacity var(--t-slow) var(--e-out)}
.js .statement.seq-armed .w{opacity:.42}
.js .statement.seq-armed .w.on{opacity:1}
.statement .w.on{opacity:1}
.statement .accent{color:var(--red)}

.lead-block{max-width:900px}
.lead-block h2{font-size:var(--h2);margin-bottom:26px;max-width:20ch}
.lead-block p{font-size:var(--fs-lg);font-weight:300;color:var(--g600);line-height:1.66;max-width:66ch;margin-bottom:18px}
.lead-block p b{color:var(--ink);font-weight:600}

/* ---------- 8. LEBENSZYKLUS (Klammer der drei Bereiche) ---------- */
.cycle{position:relative}
.cycle-track{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;margin-top:12px}
.cycle-track::before{content:'';position:absolute;left:0;right:0;top:29px;height:2px;background:var(--g200)}
.sec.dark .cycle-track::before,.sec.navy .cycle-track::before{background:rgba(255,255,255,.16)}
.cstep{position:relative;text-align:left;background:none;border:0;cursor:pointer;padding:0;font-family:inherit;color:inherit}
.cstep .cdot{width:60px;height:60px;border-radius:50%;background:var(--white);border:2px solid var(--g200);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:2;
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.sec.dark .cstep .cdot,.sec.navy .cstep .cdot{background:var(--ink);border-color:rgba(255,255,255,.2)}
.cstep .cdot svg{width:25px;height:25px;stroke:var(--g500);fill:none;stroke-width:1.9;transition:stroke var(--t-base) var(--e-out)}
.cstep .cnum{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--g400);
  margin:18px 0 7px;display:block;transition:color var(--t-base) var(--e-out)}
.cstep h3{font-size:18px;letter-spacing:-.02em;margin-bottom:7px;transition:color var(--t-base) var(--e-out)}
.cstep p{font-size:14.5px;font-weight:300;color:var(--g600);line-height:1.5}
.sec.dark .cstep p,.sec.navy .cstep p{color:rgba(255,255,255,.62)}
.cstep .cwho{font-family:var(--fd);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red);margin-top:11px;display:inline-block}
.sec.dark .cstep .cwho,.sec.navy .cstep .cwho{color:var(--red-bright)}
.cstep.on .cdot,.cstep:hover .cdot{border-color:var(--red);transform:scale(1.06)}
.cstep.on .cdot svg,.cstep:hover .cdot svg{stroke:var(--red)}
.cstep.on .cnum{color:var(--red)}
/* Lauf 11.M (Layoutprobe): fünf Spalten brauchen gut 1000 px — bei 1024 px stand der Text in 177 px. */
@media(max-width:1080px){
  .cycle-track{grid-template-columns:1fr;gap:0}
  .cycle-track::before{left:29px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .cstep{display:grid;grid-template-columns:60px 1fr;gap:22px;padding-bottom:30px;align-items:start}
  .cstep .cnum{margin-top:0}
}

/* ---------- 9. FEATURE-REIHEN ---------- */
.feature{padding:var(--sec-md) 0;border-top:var(--line)}
.feature .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.feature.rev .fig{order:2}
.feature-body{max-width:530px}
.feature-body .eyebrow{margin-bottom:18px}
.feature h2{font-size:clamp(30px,3.9vw,52px);margin-bottom:22px}
.feature p{font-size:var(--fs-md);color:var(--g600);font-weight:300;line-height:1.64;margin-bottom:22px}
.feature .fbullets{list-style:none;margin:0 0 28px}
.feature .fbullets li{position:relative;padding-left:26px;font-size:16px;color:var(--g600);margin:9px 0}
.feature .fbullets li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--red)}
.fig{position:relative}
.fig-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3}
.fig-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform var(--t-draw) var(--ease)}
.fig.in .fig-frame img{transform:scale(1)}
.fig-tag{position:absolute;left:20px;bottom:20px;z-index:2;font-family:var(--fd);font-weight:700;font-size:12px;
  color:#fff;background:rgba(17,17,19,.6);backdrop-filter:blur(8px);padding:8px 15px;border-radius:var(--r-pill)}

.split{padding:var(--sec-md) 0}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}
.split.rev .split-figure{order:-1}
.split-body h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:22px}
.split-body p{font-size:var(--fs-md);font-weight:300;color:var(--g600);line-height:1.64;margin-bottom:18px}
.split-figure{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:1/1}
.split-figure img{width:100%;height:100%;object-fit:cover}

/* ---------- 10. KARTEN-RASTER ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.card{background:#fff;border:var(--line);border-radius:var(--r-lg);padding:32px 28px;position:relative;
  display:flex;flex-direction:column;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--e-out)}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:transparent}
.sec.g50 .card,.sec.cream .card{background:#fff}
.card .cic{width:48px;height:48px;border-radius:13px;background:var(--red-light);display:flex;align-items:center;
  justify-content:center;margin-bottom:20px;flex:none}
.card .cic svg{width:24px;height:24px;stroke:var(--red);fill:none;stroke-width:1.9}
.card.teal .cic{background:var(--teal-light)}
.card.teal .cic svg{stroke:var(--teal-deep)}
.card h3{font-size:var(--h4);margin-bottom:10px;letter-spacing:-.02em}
.card p{font-size:15.5px;font-weight:300;color:var(--g600);line-height:1.6;margin-bottom:16px}
.card .clink{margin-top:auto;font-family:var(--fd);font-weight:700;font-size:14px;color:var(--red);
  display:inline-flex;align-items:center;gap:7px}
.card .clink svg{width:14px;height:14px;transition:transform var(--t-base) var(--ease)}
.card:hover .clink svg{transform:translateX(4px)}
a.card{color:inherit}
.card .cnum{font-family:var(--fd);font-weight:900;font-size:46px;line-height:1;color:var(--red-mid);
  letter-spacing:-.04em;margin-bottom:16px}

/* Leistungs-Kachel mit Bild */
.tilecard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:300px;display:flex;align-items:flex-end;
  padding:32px;color:#fff;isolation:isolate}
.tilecard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform var(--t-slow) var(--ease)}
.tilecard::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,12,20,.2),rgba(10,12,20,.86))}
.tilecard:hover img{transform:scale(1.06)}
.tilecard .te{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#ffb9bd;margin-bottom:8px;display:block}
.tilecard h3{font-size:25px;margin-bottom:8px}
.tilecard p{font-size:15px;font-weight:300;color:rgba(255,255,255,.8);line-height:1.5;margin-bottom:14px;max-width:40ch}
.tilecard .rl{font-family:var(--fd);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:7px}
.tilecard .rl svg{width:14px;height:14px;transition:transform var(--t-base) var(--ease)}
.tilecard:hover .rl svg{transform:translateX(5px)}

/* ---------- 11. PROZESS ---------- */
.psteps{position:relative}
.pstep{display:grid;grid-template-columns:118px 1fr;gap:34px;padding:32px 0;border-top:var(--line)}
.pstep:last-child{border-bottom:var(--line)}
.pstep .pnum{font-family:var(--fd);font-weight:900;font-size:clamp(38px,5vw,64px);color:var(--g250);
  line-height:.9;letter-spacing:-.04em;transition:color var(--t-slow) var(--ease)}
.pstep.in .pnum{color:var(--red)}
.pstep h3{font-size:var(--h3);margin-bottom:10px}
.pstep p{font-size:16.5px;font-weight:300;color:var(--g600);line-height:1.62;max-width:64ch}
.pstep .pmeta{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-deep);margin-top:10px}

/* ---------- 12. SCROLLYTELLING ---------- */
.scrolly{background:var(--ink);color:#fff;padding:var(--sec-lg) 0}
.scrolly-head{margin-bottom:clamp(34px,5vh,58px)}
.scrolly-head h2{font-size:var(--h2);max-width:19ch}
.scrolly-head .eyebrow{color:var(--red-bright);margin-bottom:16px}
.scrolly-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:start}
.scrolly-media{position:sticky;top:calc(var(--nav-h) + 5vh);height:70vh;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-xl);background:#000}
.scrolly-layer{position:absolute;inset:0;opacity:0;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);transform:scale(1.04)}
.scrolly-layer.active{opacity:1;transform:scale(1)}
.scrolly-layer img{width:100%;height:100%;object-fit:cover}
.scrolly-layer::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,20,.15),rgba(10,12,20,.72))}
.scrolly-layer .cap{position:absolute;left:26px;bottom:24px;z-index:2;font-family:var(--fd);font-weight:800;
  font-size:20px;color:#fff;max-width:80%}
.scrolly-steps{display:flex;flex-direction:column}
.scrolly-step{min-height:60vh;display:flex;flex-direction:column;justify-content:center;
  border-left:2px solid rgba(255,255,255,.12);padding-left:34px;transition:border-color var(--t-base) var(--ease)}
.scrolly-step.active{border-color:var(--red-bright)}
.scrolly-step .n{font-family:var(--fd);font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--red-bright);margin-bottom:16px}
.scrolly-step h3{font-size:clamp(25px,3vw,36px);margin-bottom:16px;color:#fff;opacity:.5;transition:opacity var(--t-base) var(--ease)}
.scrolly-step.active h3{opacity:1}
.scrolly-step p{font-size:17px;font-weight:300;color:rgba(255,255,255,.6);line-height:1.62;max-width:47ch;transition:color var(--t-base) var(--ease)}
.scrolly-step.active p{color:rgba(255,255,255,.9)}

/* ---------- 13. SEMINARKATALOG ---------- */
.filterbar{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);border:var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--el-2);
  margin-bottom:30px}
/* Die Leiste klebt nicht mehr (Lauf 11.1, Zsofia 29.09.2026, Feedback F-2): Sie
   steht am Anfang des Programms und scrollt mit. Damit entfallen auch das
   Andocken und die verkleinerte Fassung .klein (bis Lauf 11.1 hier und in app.js). */
.fb-row{display:flex;gap:22px 26px;flex-wrap:wrap;align-items:flex-start}
.fb-group{flex:1 1 190px;min-width:190px}
.fb-group>label{font-family:var(--fd);font-weight:800;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--g400);display:block;margin-bottom:9px}
.fb-search{position:relative}
.fb-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  stroke:var(--g400);fill:none;stroke-width:2}
.fb-search input{width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--g250);border-radius:var(--r-sm);
  font-family:var(--fb);font-size:15px;outline:none;transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out)}
.fb-search input:focus{border-color:var(--red);box-shadow:var(--ring)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--fd);font-weight:700;font-size:13px;padding:9px 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--g250);background:#fff;color:var(--g600);cursor:pointer;transition:var(--t-fast) var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.fb-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding-top:14px;
  border-top:var(--line);flex-wrap:wrap}
.fb-count{font-size:14px;color:var(--g500)}
.fb-count b{color:var(--ink);font-family:var(--fd)}
.fb-reset{background:none;border:0;cursor:pointer;font-family:var(--fd);font-weight:700;font-size:13px;color:var(--red)}


.semlist{display:flex;flex-direction:column;gap:14px}
.semrow{display:grid;grid-template-columns:1fr 250px 185px;gap:26px;align-items:center;background:#fff;
  border:var(--line);border-radius:var(--r-md);padding:24px 26px;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--e-out)}
.semrow:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent}
.semrow .stags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.stag{font-family:var(--fd);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill)}
.stag.r{background:var(--red-light);color:var(--red-dark)}
.stag.t{background:var(--teal-light);color:var(--teal-deep)}
.stag.g{background:var(--g100);color:var(--g600)}
.stag.n{background:var(--navy);color:#fff}
.semrow h3{font-size:21px;letter-spacing:-.02em;margin-bottom:7px;line-height:1.2}
.semrow h3 a:hover{color:var(--red)}
.semrow .sdesc{font-size:14.5px;font-weight:300;color:var(--g600);line-height:1.5;max-width:52ch}
.semrow .sdates{font-size:14px;color:var(--g600);line-height:1.6}
.semrow .sdates b{font-family:var(--fd);font-weight:700;color:var(--ink);font-size:13.5px;display:block;margin-bottom:3px}
.semrow .sdates .more{display:block;font-size:12.5px;color:var(--g400);margin-top:4px}
.semrow .sright{text-align:right}
/* Betrag und € bleiben in einer Zeile, der Zusatz darunter darf umbrechen (E-045). */
.semrow .sprice{font-family:var(--fd);font-weight:900;font-size:24px;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.semrow .sprice .u{font-size:12px;font-weight:600;color:var(--g500);display:block;margin-top:5px;letter-spacing:0;white-space:normal;line-height:1.35}
.semrow .sright .btn{margin-top:14px;white-space:nowrap}
.sem-empty{display:none;text-align:center;padding:60px 20px;color:var(--g500)}
.sem-empty.show{display:block}
.sem-empty h3{font-size:22px;margin-bottom:10px;color:var(--ink)}

/* Terminliste auf Seminarseiten */
.dates{display:flex;flex-direction:column;gap:12px}
.daterow{display:grid;grid-template-columns:150px 1fr auto auto;gap:24px;align-items:center;background:#fff;
  border:var(--line);border-radius:var(--r-md);padding:20px 24px;transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out)}
.daterow:hover{border-color:var(--g300);box-shadow:var(--sh-sm)}
.daterow .dwhen{font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:-.01em}
.daterow .dwhen span{display:block;font-family:var(--fb);font-weight:400;font-size:13px;color:var(--g500);margin-top:3px;letter-spacing:0}
.daterow .dwhat{font-size:14.5px;color:var(--g600);line-height:1.5}
.daterow .dwhat b{color:var(--ink);font-weight:600}
.daterow .dstatus{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--teal-deep);
  display:flex;align-items:center;gap:8px;white-space:nowrap}
.daterow .dstatus::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal-mid)}

/* Faktenblock Seminar */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.fact{padding:24px;border-right:var(--line)}
.fact:last-child{border-right:0}
.fact .fl{font-family:var(--fd);font-weight:800;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--g400);margin-bottom:9px}
.fact .fv{font-family:var(--fd);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.fact .fv small{display:block;font-family:var(--fb);font-weight:400;font-size:13px;color:var(--g500);margin-top:4px;letter-spacing:0}

/* Curriculum */
.curri{display:flex;flex-direction:column;gap:12px}
.cmod{border:var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;transition:box-shadow var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out)}
.cmod[open]{box-shadow:var(--sh-md);border-color:transparent}
.cmod summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;gap:20px}
.cmod summary::-webkit-details-marker{display:none}
/* Lauf 11.K (E-01): .cmod und .job schneiden mit overflow:hidden alles ab, was über den
   Kasten hinausragt — auch den Fokusring (outline-offset:3px). Innen liegt er sichtbar. */
.cmod>summary:focus-visible,.job>summary:focus-visible{outline-offset:-3px;border-radius:var(--r-md)}
.cmod .cph{font-family:var(--fd);font-weight:900;font-size:13px;letter-spacing:.1em;color:var(--red);flex:none;width:66px}
.cmod .cti{flex:1}
.cmod .cti h3{font-size:19px;letter-spacing:-.02em;margin-bottom:4px}
.cmod .cti .cmeta{font-size:13px;color:var(--g500)}
.cmod .cx{flex:none;width:26px;height:26px;position:relative}
.cmod .cx::before,.cmod .cx::after{content:'';position:absolute;background:var(--red);border-radius:2px;transition:transform var(--t-base) var(--ease)}
.cmod .cx::before{top:12px;left:3px;right:3px;height:2px}
.cmod .cx::after{left:12px;top:3px;bottom:3px;width:2px}
.cmod[open] .cx::after{transform:scaleY(0)}
.cmod .cbody{padding:0 26px 26px}
.cmod .cbody ul{list-style:none;columns:2;column-gap:36px}
.cmod .cbody li{position:relative;padding-left:22px;font-size:15px;color:var(--g600);margin:7px 0;break-inside:avoid}
.cmod .cbody li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--teal-mid)}
@media(max-width:700px){.cmod .cbody ul{columns:1}}

/* Sticky Buchungsleiste */
.bookbar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:var(--el-3);transform:translateY(105%);visibility:hidden;
  transition:transform var(--t-base) var(--e-io),visibility var(--t-base) var(--e-out)}
.bookbar.show{transform:none;visibility:visible}
.bookbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.bookbar .bb-t{font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.25}
.bookbar .bb-t span{display:block;font-family:var(--fb);font-weight:400;font-size:13px;color:var(--g500);margin-top:2px}
.bookbar .bb-r{display:flex;align-items:center;gap:20px;flex:none}
.bookbar .bb-p{font-family:var(--fd);font-weight:900;font-size:22px;letter-spacing:-.03em}
.bookbar .bb-p small{display:block;font-family:var(--fb);font-weight:400;font-size:11.5px;color:var(--g500)}

/* ---------- 15. ZITAT ---------- */
.quote{position:relative;color:#fff;overflow:hidden;padding:var(--sec-xl) 0}
.quote-bg{position:absolute;inset:0;z-index:0}
.quote-bg img{width:100%;height:100%;object-fit:cover}
.quote::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(15,20,34,.92) 0%,rgba(15,20,34,.66) 55%,rgba(15,20,34,.4) 100%)}
.quote .wrap{position:relative;z-index:2}
.quote .mark{font-family:var(--fd);font-weight:900;font-size:86px;color:var(--red-bright);line-height:.6;margin-bottom:12px}
.quote p{font-family:var(--fd);font-weight:800;font-size:clamp(26px,4vw,52px);letter-spacing:-.03em;line-height:1.16;max-width:19ch}
.quote .qlabel{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:28px}

/* ---------- 16. FAQ ---------- */
.faq-wrap{max-width:880px}
.qa{border-top:1px solid var(--g200)}
.qa:last-of-type{border-bottom:1px solid var(--g200)}
.qa summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:24px;
  align-items:center;font-family:var(--fd);font-weight:700;font-size:clamp(17px,2vw,21px);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa .ic{flex:none;width:26px;height:26px;position:relative}
.qa .ic::before,.qa .ic::after{content:'';position:absolute;background:var(--red);border-radius:2px;transition:transform var(--t-base) var(--ease)}
.qa .ic::before{top:12px;left:3px;right:3px;height:2px}
.qa .ic::after{left:12px;top:3px;bottom:3px;width:2px}
.qa[open] .ic::after{transform:scaleY(0)}
.qa .ans{color:var(--g600);font-size:16.5px;font-weight:300;line-height:1.68;max-width:66ch;padding-right:40px}
.qa .ans p{padding-bottom:12px}
.qa .ans p:last-child{padding-bottom:24px}
.qa .ans a{color:var(--red);border-bottom:1px solid var(--red-light)}

/* ---------- 17. CTA ---------- */
.cta{background:var(--red);color:#fff;padding:var(--sec-lg) 0;text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.15),transparent 60%)}
.cta .wrap{position:relative}
.cta h2{font-size:clamp(32px,4.8vw,64px);margin-bottom:18px}
.cta p{font-size:var(--fs-lg);font-weight:300;color:rgba(255,255,255,.92);margin-bottom:36px;max-width:56ch;margin-left:auto;margin-right:auto}
.cta .btnrow{justify-content:center}
.cta .contact{margin-top:28px;font-size:15px;color:rgba(255,255,255,.88);display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.cta .contact a{font-weight:500;border-bottom:1px solid rgba(255,255,255,.72);padding-bottom:2px}
/* Der Abschluss ist je Bereich ein anderer (K-3): Beschaffung schliesst mit
   Telefon und E-Mail, Consulting, Akademie, Wissen und Unternehmen mit einer
   Zeile, die sagt, was als Naechstes passiert. Keine neue Komponente — nur
   .fussnote, die auf rotem Grund lesbar sein muss. */
.cta .fussnote{color:rgba(255,255,255,.8);max-width:62ch;margin:26px auto 0;text-align:center}
.cta .fussnote a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}

/* ---------- 18. WEITERFÜHREND ---------- */
.rgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.rgrid.two{grid-template-columns:1fr 1fr}

/* ---------- 19. TEAM ---------- */
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:38px 30px;max-width:920px;margin:0 auto}
.tmember{width:150px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:center;color:inherit}
.tbubble{display:block;width:120px;height:120px;border-radius:50%;margin:0 auto 16px;position:relative;overflow:hidden;
  box-shadow:var(--el-1)}
.tbubble img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.tbubble::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 0 var(--red);transition:box-shadow var(--t-base) var(--ease)}

.tmember:hover .tbubble img{transform:scale(1.07)}
.tmember:hover .tbubble::after,.tmember:focus-visible .tbubble::after{box-shadow:inset 0 0 0 4px var(--red)}
.tname{display:block;font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:-.01em}
.trole{display:block;font-size:12.5px;color:var(--red);font-weight:600;margin-top:3px}
.tmodal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-base) var(--e-out),visibility var(--t-base) var(--e-out)}
.tmodal.open{opacity:1;visibility:visible;pointer-events:auto}
.tmodal-backdrop{position:absolute;inset:0;background:rgba(17,17,19,.58);backdrop-filter:blur(6px)}
.tmodal-card{position:relative;z-index:2;background:#fff;border-radius:var(--r-xl);max-width:520px;width:100%;
  padding:48px 44px 40px;text-align:center;box-shadow:var(--sh-xl);transform:translateY(18px) scale(.97);transition:transform var(--t-base) var(--ease)}
.tmodal.open .tmodal-card{transform:none}
.tmodal-avatar{width:140px;height:140px;border-radius:50%;overflow:hidden;margin:0 auto 24px;box-shadow:var(--el-1)}
.tmodal-avatar img{width:100%;height:100%;object-fit:cover}
.tmodal-card h3{font-size:27px}
.tmodal-role{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:8px 0 18px}
.tmodal-bio{font-size:16px;font-weight:300;color:var(--g600);line-height:1.66;max-width:42ch;margin:0 auto}
.tmodal-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:var(--g100);
  color:var(--g600);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--t-fast) var(--e-out)}
.tmodal-close:hover{background:var(--red);color:#fff}

/* ---------- 20. TIMELINE / WERTE ---------- */
.timeline{position:relative;max-width:820px;margin:0 auto;padding-left:40px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--g200)}
.tl{position:relative;padding-bottom:40px}
.tl:last-child{padding-bottom:0}
.tl::before{content:'';position:absolute;left:-40px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--red)}
.tl .ty{font-family:var(--fd);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.tl h3{font-size:20px;margin-bottom:8px}
.tl p{font-size:16px;font-weight:300;color:var(--g600);line-height:1.62;max-width:60ch}

/* ---------- 21. ARTIKEL (Wissen) ---------- */
.artgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:60px;align-items:start}
.arttoc{position:sticky;top:calc(var(--nav-h) + 24px)}
.arttoc h4{font-family:var(--fd);font-weight:800;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g400);margin-bottom:14px}
.arttoc a{display:block;font-size:14px;color:var(--g500);padding:7px 0 7px 14px;border-left:2px solid var(--g200);
  line-height:1.4;transition:color var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out)}
.arttoc a:hover{color:var(--ink)}
.arttoc a.on{color:var(--red);border-color:var(--red);font-weight:500}
.prose{max-width:70ch}
.prose h2{font-size:clamp(25px,3vw,34px);margin:52px 0 18px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;margin:34px 0 12px}
.prose p{font-size:17px;font-weight:300;color:var(--ink-soft);line-height:1.75;margin-bottom:18px}
.prose p b,.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 22px 0;padding-left:0;list-style:none}
.prose ol{counter-reset:pl}
.prose li{position:relative;padding-left:28px;font-size:17px;font-weight:300;color:var(--ink-soft);line-height:1.7;margin:9px 0}
.prose ul li::before{content:'';position:absolute;left:2px;top:.66em;width:8px;height:8px;border-radius:2px;background:var(--red)}
.prose ol li{counter-increment:pl}
.prose ol li::before{content:counter(pl) '.';position:absolute;left:0;top:0;font-family:var(--fd);font-weight:800;color:var(--red);font-size:15px}
.prose a{color:var(--red);border-bottom:1px solid var(--red-light)}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15.5px}
.prose th{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g500);text-align:left;padding:12px 14px;border-bottom:2px solid var(--g200)}
.prose td{padding:13px 14px;border-bottom:var(--line);color:var(--ink-soft);vertical-align:top}
.prose td b{color:var(--ink)}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.callout{background:var(--cream);border-left:4px solid var(--red);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:24px 28px;margin:28px 0}
.callout .cl-t{font-family:var(--fd);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);margin-bottom:10px}
.callout p{font-size:16px;margin-bottom:0;color:var(--ink-soft)}
.formula{background:var(--ink);color:#fff;border-radius:var(--r-md);padding:28px 30px;margin:26px 0;overflow-x:auto}
.formula .fx{font-family:var(--fd);font-weight:800;font-size:clamp(16px,2.2vw,22px);letter-spacing:-.01em;line-height:1.6;white-space:nowrap}
.formula .fx .op{color:var(--red-bright);margin:0 10px}
.formula .fn{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:14px;white-space:normal}
.artmeta{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--g500);margin-top:22px;
  padding-top:18px;border-top:var(--line)}
.artmeta b{font-family:var(--fd);color:var(--ink)}

/* ---------- 22. DOWNLOADS ---------- */
.dlcard{display:flex;flex-direction:column;border:var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.dlcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.dlcard .dltop{aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),#0f1626);position:relative;
  overflow:hidden;display:flex;align-items:flex-end;padding:22px}
.dlcard .dltop::after{content:'';position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,58,70,.42),transparent 62%)}
.dlcard .dltag{position:relative;z-index:2;font-family:var(--fd);font-weight:700;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);padding:5px 11px;border-radius:var(--r-pill)}
.dlcard .dlb{padding:24px;display:flex;flex-direction:column;flex:1}
.dlcard h3{font-size:19px;margin-bottom:10px;line-height:1.24}
.dlcard p{font-size:14.5px;font-weight:300;color:var(--g600);line-height:1.55;margin-bottom:20px}
.dlcard .dlf{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dlcard .dlmeta{font-size:12.5px;color:var(--g400)}
/* Lauf 11.H (FB-024, Paket D): Titelseite des PDFs im Kachelkopf, rechts oben, Etikett bleibt unten links */
.dlcard .dltop .dlvorschau{position:absolute;top:18px;right:22px;z-index:1;width:40%;height:auto;border-radius:3px;
  box-shadow:0 12px 28px rgba(0,0,0,.35)}

/* ---------- 23. STELLEN / PRESSE ---------- */
.job{border:var(--line);border-radius:var(--r-md);background:#fff;margin-bottom:14px;overflow:hidden;transition:box-shadow var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out)}
.job[open]{box-shadow:var(--sh-md);border-color:transparent}
.job summary{list-style:none;cursor:pointer;padding:26px 28px;display:flex;align-items:center;gap:20px}
.job summary::-webkit-details-marker{display:none}
.job .jt{flex:1}
.job .jt h3{font-size:21px;margin-bottom:7px}
.job .jmeta{display:flex;gap:8px;flex-wrap:wrap}
.job .jm{font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--g600);background:var(--g50);border:var(--line);padding:5px 11px;border-radius:var(--r-pill)}
.job .jx{flex:none;width:28px;height:28px;position:relative}
.job .jx::before,.job .jx::after{content:'';position:absolute;background:var(--red);border-radius:2px;transition:transform var(--t-base) var(--ease)}
.job .jx::before{top:13px;left:4px;right:4px;height:2px}
.job .jx::after{left:13px;top:4px;bottom:4px;width:2px}
.job[open] .jx::after{transform:scaleY(0)}
.job .jbody{padding:0 28px 28px;max-width:72ch}
.job .jbody h4{font-family:var(--fd);font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g500);margin:18px 0 10px}
.job .jbody p{font-size:16px;font-weight:300;color:var(--g600);line-height:1.66;margin-bottom:12px}
.job .jbody ul{list-style:none;margin:0 0 14px}
.job .jbody li{position:relative;padding-left:24px;font-size:15.5px;color:var(--g600);margin:8px 0;line-height:1.55}
.job .jbody li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--red)}

.press-item{display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:center;padding:28px 0;border-top:var(--line)}
.press-item:last-child{border-bottom:var(--line)}
.press-item .pd{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--g400)}
.press-item .pcat{display:inline-block;font-family:var(--fd);font-weight:700;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--red-dark);background:var(--red-light);padding:4px 10px;border-radius:var(--r-pill);margin-bottom:10px}
.press-item .pt h3{font-size:21px;margin-bottom:6px}
.press-item .pt p{font-size:15px;font-weight:300;color:var(--g600);line-height:1.55;max-width:60ch}

/* ---------- 24. KONTAKT ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.form-card{background:#fff;border:var(--line);border-radius:var(--r-lg);padding:38px;box-shadow:var(--el-1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.form-label{font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g600)}
.form-label .req{color:var(--red)}
.form-input,.form-select,textarea.form-input{padding:13px 16px;border:1.5px solid var(--g250);border-radius:var(--r-sm);
  font-family:var(--fb);font-size:15px;color:var(--ink);background:#fff;outline:none;width:100%;
  transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out)}
.form-input:focus,.form-select:focus,textarea.form-input:focus{border-color:var(--red);box-shadow:var(--ring)}
textarea.form-input{resize:vertical;min-height:130px}
.form-check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--g600);line-height:1.5;margin-bottom:20px}
.form-check input{margin-top:3px;accent-color:var(--red);width:17px;height:17px;flex:none}
.form-check a,.form-hint a,.form-note a{color:var(--red);border-bottom:1px solid var(--red-light)}  /* Lauf 11.K: auch in Hinweisen */
.form-note{font-size:12.5px;color:var(--g400);margin-top:10px;line-height:1.55}
.form-ok{display:none;background:var(--teal-light);color:#155e5e;border-radius:var(--r-sm);padding:16px 20px;
  font-size:14.5px;font-weight:500;margin-bottom:18px;line-height:1.55}
.form-ok.show{display:block}
.info-card{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:34px;margin-bottom:18px}
.info-card h3{font-size:20px;margin-bottom:18px}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(255,255,255,.34)}
.info-row:first-of-type{border-top:none}
.info-row .il{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;flex:none}
.info-row .il svg{width:18px;height:18px;stroke:var(--red-bright);fill:none;stroke-width:2}
.info-row .id{font-size:15px;line-height:1.5}
.info-row .id b{display:block;font-family:var(--fd);font-weight:700;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:3px}
.map-band{border-radius:var(--r-lg);overflow:hidden;height:230px;position:relative;background:linear-gradient(135deg,#e9edf2,#dfe4ea)}
.map-band::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(20,29,48,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(20,29,48,.06) 1px,transparent 1px);
  background-size:26px 26px}
.map-pin{position:absolute;left:50%;top:52%;transform:translate(-50%,-100%);z-index:2;color:var(--red);width:34px;height:34px}
.map-tag{position:absolute;left:20px;bottom:18px;z-index:2;background:#fff;border-radius:var(--r-sm);padding:12px 16px;
  box-shadow:var(--sh-sm);font-size:13.5px}
.map-tag b{font-family:var(--fd);display:block;font-size:14px}

/* ---------- 25. E-LEARNING ---------- */
/* Trailer (Lauf 11.3M): echtes, selbst gehostetes Video statt der Attrappe. Die Fläche
   steht vor dem Laden fest (16:9, width/height am <video>), damit nichts springt. Der
   rote Knopf ist nur die große Startfläche; danach bedient man das Video mit der Leiste
   des Browsers. Beschriftung unter dem Bild, nicht darüber — sonst läge sie auf der Leiste. */
.player{margin:0}
.player-flaeche{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9;background:var(--navy)}
.player video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:var(--navy)}
.player-flaeche::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 45%,transparent,rgba(10,14,24,.42));
  transition:opacity var(--t-base) var(--e-out)}
.player.laeuft .player-flaeche::after{opacity:0}
.player .play[hidden]{display:none}
/* Unten mittig statt in der Bildmitte: dort steht auf dem Vorschaubild die Überschrift
   („Eine Schulung. Neun Sprachen.“), unten zwischen Logo und Klugix ist die Fläche frei (qc-trailer B-3). */
.player .play{position:absolute;left:50%;top:auto;bottom:7%;transform:translateX(-50%);z-index:3;width:94px;height:94px;
  border-radius:50%;background:var(--red);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--t-base) var(--ease),background var(--t-base) var(--e-out);box-shadow:0 20px 50px -14px rgba(204,0,25,.7)}
.player .play::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  transition:transform var(--t-base) var(--e-out),opacity var(--t-base)}
.player .play:hover::before,.player .play:focus-visible::before{transform:scale(1.22);opacity:0}
.player .play:hover{background:var(--red-dark)}
.player .play svg{width:32px;height:32px;fill:#fff;margin-left:5px}
.player .pmeta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-1);border-top:1px solid var(--g200)}
.player .pmeta .pt{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink)}
.player .pmeta .pd{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--g400)}
.langpills{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* Knopfzeile und Sprachauswahl berührten sich im E-Learning-Kopf (E-045). */
.btnrow+.langpills{margin-top:var(--sp-3)}
.langpills .ll{font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:.05em;color:var(--g500);margin-right:2px}
.langpill{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.06em;padding:7px 14px;
  border-radius:var(--r-pill);border:1px solid var(--g250);color:var(--g600);background:#fff}
.langpill.on-dark{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.07)}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:var(--line);border-radius:var(--r-lg);
  padding:34px 28px;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--e-out)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:transparent}
.pcard .ptier{font-family:var(--fd);font-weight:800;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--g500);margin-bottom:16px;min-height:2.4em;line-height:1.35}
/* Betrag und € bleiben in einer Zeile (E-045). „Auf Anfrage" ist kein Betrag und
   darf umbrechen — im Vierer-Raster knapp über 900 px ist die Karte schmaler als das Wort. */
.pcard .pprice{font-family:var(--fd);font-weight:900;font-size:clamp(26px,2.8vw,34px);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.pcard .pprice.ohne-betrag{white-space:normal}
.pcard .pprice .per{display:block;font-size:13px;font-weight:600;color:var(--g500);letter-spacing:0;margin-top:8px;white-space:normal;line-height:1.35}
.pcard .pdesc{font-size:14.5px;font-weight:300;color:var(--g600);line-height:1.58;margin:20px 0 24px;flex:1}
.pcard .btn{width:100%}
.pcard.featured{background:var(--ink);border-color:transparent;box-shadow:var(--sh-lg)}
.pcard.featured .ptier{color:#ff8f98}
.pcard.featured .pprice{color:#fff}
.pcard.featured .pprice .per{color:rgba(255,255,255,.6)}
.pcard.featured .pdesc{color:rgba(255,255,255,.76)}
.pbadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;
  font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 16px;border-radius:var(--r-pill);white-space:nowrap}
.modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.modchip{display:flex;align-items:flex-start;gap:14px;background:#fff;border:var(--line);border-radius:var(--r-md);
  padding:20px 22px;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--e-out)}
.modchip:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);border-color:transparent}
.modchip .mi{flex:none;width:36px;height:36px;border-radius:10px;background:var(--red-light);display:flex;
  align-items:center;justify-content:center;margin-top:2px}
.modchip .mi svg{width:19px;height:19px;stroke:var(--red);fill:none;stroke-width:2.2}
.modchip.t .mi{background:var(--teal-light)} .modchip.t .mi svg{stroke:var(--teal-deep)}
.modchip .mt{display:block;font-family:var(--fd);font-weight:700;font-size:15px;line-height:1.3}
/* Untertitel: eigene Zeile, grau, kleiner (E-045 Nr. 6). Vorher lief er in Teal
   direkt hinter dem Titel weiter und brach mitten im Wort um. */
.modchip .ml{display:block;font-size:var(--fs-xs);line-height:1.4;color:var(--g500);font-weight:500;margin-top:3px}

/* Kompakte Liste — dieselbe Komponente ohne Kartenfläche (Warengruppen der
   Beschaffung, E-056). Zwei Spalten in einer Fläche, Handy eine; kleines Icon links.
   Die Einträge sind keine Links und heben sich deshalb beim Überfahren nicht. */
.modgrid.liste{list-style:none;margin:0;padding:var(--sp-1) var(--sp-3);background:var(--white);
  border:var(--line);border-radius:var(--r-md);grid-template-columns:1fr 1fr;column-gap:var(--sp-4);row-gap:0}
.modgrid.liste .modchip{background:none;border:0;border-radius:0;border-top:var(--line);
  padding:var(--sp-1) 0;gap:12px}
.modgrid.liste .modchip:nth-child(-n+2){border-top:0}
.modgrid.liste .modchip:hover{transform:none;box-shadow:none}
@media(max-width:620px){
  .modgrid.liste{grid-template-columns:1fr;padding:var(--sp-1) var(--sp-2)}
  .modgrid.liste .modchip:nth-child(2){border-top:var(--line)}
}
.elband{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(135deg,#18233b 0%,#0f1626 60%,#1a0f14 100%);color:#fff;padding:56px}
.elband::after{content:'';position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(204,0,25,.34),transparent 62%);pointer-events:none}
.elband .wrapin{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.elband .eyebrow{color:#ff8f98;margin-bottom:16px}
.elband h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:18px}
.elband p{font-size:var(--fs-md);font-weight:300;color:rgba(255,255,255,.84);line-height:1.62;margin-bottom:26px;max-width:52ch}
/* Der Betrag schrumpfte als Flex-Element und brach zwischen „0,90" und „€" um —
   bei 375 und bei 1280 px (E-045). Jetzt fest, der Zusatz rückt notfalls darunter. */
.elband .elprice{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:8px}
.elband .elprice .n{font-family:var(--fd);font-weight:900;font-size:42px;letter-spacing:-.04em;line-height:1;
  white-space:nowrap;flex:none}
.elband .elprice .u{font-size:15px;color:rgba(255,255,255,.62);font-weight:600}
.elband .elp-cap{font-size:13px;color:rgba(255,255,255,.56);margin-bottom:24px}
.elfeat{list-style:none;display:flex;flex-direction:column;gap:12px}
.elfeat li{display:flex;align-items:center;gap:12px;font-size:15.5px;color:rgba(255,255,255,.92)}
.elfeat svg{width:20px;height:20px;stroke:var(--teal-deep);fill:none;stroke-width:2.4;flex:none}

/* ---------- 26. PORTAL / MARQUEE ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-row{display:flex;gap:14px;width:max-content;animation:scrollx 46s var(--e-lin) infinite}
.marquee:hover .marquee-row,.marquee:focus-within .marquee-row,
.marquee[data-paused] .marquee-row{animation-play-state:paused}
.mchip{font-family:var(--fd);font-weight:700;font-size:14px;color:var(--g600);background:#fff;border:1px solid var(--g200);
  border-radius:var(--r-pill);padding:12px 22px;white-space:nowrap}
.sec.dark .mchip,.sec.navy .mchip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.86)}
@keyframes scrollx{to{transform:translateX(-50%)}}
/* Anbieterlogos im Branchenportal — reservierter Platz im Verhaeltnis 3:1.
   Bewusst KEIN Bildslot aus bildslots.py: das Slot-System erzeugt WebP-Saetze,
   Hochformat-Ausschnitte und Farbplatzhalter fuer Fotos. Ein Anbieterlogo ist
   eine Strichgrafik mit Transparenz und braucht nichts davon.
   Solange keine Freigabe des Anbieters vorliegt, steht hier ruhig der Name —
   die Seite sieht damit fertig aus und behaelt ihr Layout, sobald ein Logo
   nachkommt. Freigabestand: 03-inhalte/bilder/rechte.md */
.loslogo{aspect-ratio:3/1;display:flex;align-items:center;justify-content:center;
  background:var(--g100);border:1px dashed var(--g250);border-radius:var(--r-sm);
  padding:10px;margin-bottom:var(--sp-2);text-align:center}
.loslogo span{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--g500)}
.loslogo img{max-width:100%;max-height:100%;width:auto;height:auto}
.loskat{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g400);margin-bottom:6px}
.loseinordnung{border-left:2px solid var(--teal);padding-left:12px;margin-top:var(--sp-2)}
/* Lauf 11.2 (E-091): Marktueberblick und freigegebene Logos.
   Jedes Logo aus assets/partner/ liegt auf derselben transparenten 3:1-Flaeche
   (840 x 280 px, Groesse nach Seitenverhaeltnis ausgeglichen) und fuellt die
   Kachel; ein Logo aus /admin wird eingepasst. Weisse Kachel statt grauer
   Reservierung, damit Logos mit weissem Grund (Kaercher, Kurt Mueller) ruhig
   stehen. Die Uebersicht springt zur Karte; die angesprungene Karte zeigt
   kurz einen roten Rand. */
.loslogo.mitlogo{background:var(--white);border:1px solid var(--g100);padding:6px}
.loslogo.mitlogo img,.lwk img{width:100%;height:100%;object-fit:contain}
.loskarte:target{box-shadow:0 0 0 2px var(--red),var(--el-2)}
.logowand{list-style:none;margin:0 0 var(--sp-4);padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.logowand li{margin:0;min-width:0}
.lwk{display:flex;align-items:center;justify-content:center;aspect-ratio:3/1;padding:6px;
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-sm);text-align:center;
  text-decoration:none;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
  box-shadow var(--t-fast) var(--ease)}
.lwk span{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink-soft)}
.lwk:hover,.lwk:focus-visible{transform:translateY(-3px);border-color:var(--red);box-shadow:var(--el-1)}
/* Zwei Spalten bis 767 px: darüber vier, darunter wären die Kacheln zu klein (Prüf-Agent). */
@media(max-width:767px){.logowand{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.lwk{padding:2px}}
@media(prefers-reduced-motion:reduce){.lwk{transition:none}.lwk:hover,.lwk:focus-visible{transform:none}}

.portal-figure{max-width:560px;margin:0 auto;background:#fff;border:var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--el-1)}
.portal-figure .pf-label{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g400);margin-bottom:16px;text-align:center}

/* ---------- 27. VERTRAUEN / SIEGEL ---------- */
.trust{padding:var(--sec-tight) 0;border-top:var(--line)}
.trust .wrap{display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center}
.trust .tlabel{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)}
.trust img{height:76px;width:auto}
/* ZFU-Siegel auf „Über uns": groß, darunter Kursname und Zulassungsnummer (E-045).
   Die Vorlage ist 220 px breit — über 200 px Anzeigebreite würde sie weich. */
/* Beide Vorlagen sind unterschiedlich hoch (226 / 214 px) — die quadratische
   Bildfläche hält die Unterschriften auf einer Linie. */
.trust .zfu-siegel{margin:0;width:200px;text-align:center;align-self:flex-start}
.trust .zfu-siegel img{display:block;width:180px;height:auto;aspect-ratio:1/1;object-fit:contain;
  margin:0 auto var(--sp-2)}
.trust .zfu-siegel figcaption{font-size:13px;line-height:1.45;color:var(--g500)}
.trust .zfu-siegel figcaption a{display:block;font-family:var(--fd);font-weight:700;font-size:14px;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
.trust .zfu-siegel figcaption a:hover{color:var(--red)}
@media(max-width:620px){
  .trust .wrap{gap:var(--sp-3) var(--sp-2)}
  .trust .tlabel{flex-basis:100%;text-align:center}
  .trust .zfu-siegel{width:calc(50% - var(--sp-1));max-width:180px}
  .trust .zfu-siegel img{width:100%}
  .trust .zfu-siegel figcaption a{font-size:13px;hyphens:auto}
}

/* ---------- 28. RECHTSTEXTE ---------- */
.legal{padding:var(--sec-tight) 0 var(--sec)}
.legal .wrap{max-width:820px}
.legal h2{font-size:25px;margin:44px 0 14px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:18px;margin:26px 0 8px}
.legal p{font-size:16px;font-weight:300;color:var(--g600);line-height:1.72;margin-bottom:14px}
.legal p b{color:var(--ink);font-weight:600}
.legal ul{list-style:none;margin:0 0 18px}
.legal li{position:relative;padding-left:22px;font-size:16px;font-weight:300;color:var(--g600);line-height:1.7;margin:7px 0}
.legal li::before{content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.legal a{color:var(--red);border-bottom:1px solid var(--red-light)}
.legal .lmeta{font-size:13px;color:var(--g400);margin-top:40px;padding-top:20px;border-top:var(--line)}

/* ---------- 30. FOOTER ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.72);padding:var(--sp-6) 0 var(--sp-4)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:var(--sp-4);padding-bottom:var(--sp-5);border-bottom:1px solid rgba(255,255,255,.34)}
.foot-brand img{height:32px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:14px;line-height:1.7;max-width:250px}
.foot-brand .fcontact{margin-top:16px;font-size:14px}
.foot-brand .fcontact a{display:block;padding:3px 0;color:rgba(255,255,255,.8)}
.foot-brand .fcontact a:hover{color:#fff}
.foot-col h4{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col a{display:block;font-size:14px;padding:6px 0;transition:color var(--t-fast) var(--e-out)}
.foot-col a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:28px;flex-wrap:wrap}
.foot-bot .legal-links{font-size:13px;display:flex;gap:20px;flex-wrap:wrap}
.foot-bot .legal-links a:hover{color:#fff}
.socials{display:flex;gap:12px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;
  align-items:center;justify-content:center;transition:var(--t-fast) var(--ease)}
.socials a:hover{background:var(--red);border-color:var(--red)}
.socials svg{width:16px;height:16px;fill:currentColor}
.poc-note{margin-top:24px;font-size:12px;color:rgba(255,255,255,.52);line-height:1.65;max-width:90ch}
.poc-note b{color:rgba(255,255,255,.82)}

/* ---------- 31. BUCHUNGS-DRAWER ---------- */
.bookdrawer{position:fixed;inset:0;z-index:1500;visibility:hidden;opacity:0;transition:opacity var(--t-base) var(--ease)}
.bookdrawer.open{visibility:visible;opacity:1}
.bd-backdrop{position:absolute;inset:0;background:rgba(17,17,19,.52);backdrop-filter:blur(6px)}
.bd-panel{position:absolute;top:0;right:0;height:100%;width:min(500px,100%);background:#fff;
  box-shadow:var(--el-3);display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform var(--t-base) var(--e-io)}
.bookdrawer.open .bd-panel{transform:none}
.bd-head{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:var(--line);flex:none}
.bd-steps{flex:1;display:flex;gap:8px}
.bd-step{flex:1}
.bd-step .bar{height:4px;border-radius:4px;background:var(--g200);transition:background var(--t-base) var(--e-out)}
.bd-step.active .bar,.bd-step.done .bar{background:var(--red)}
.bd-step .lb{font-family:var(--fd);font-weight:700;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--g400);margin-top:6px}
.bd-step.active .lb{color:var(--red)}
.bd-x{width:38px;height:38px;border-radius:50%;border:0;background:var(--g100);cursor:pointer;font-size:20px;
  color:var(--g600);flex:none;display:flex;align-items:center;justify-content:center;transition:var(--t-fast) var(--e-out)}
.bd-x:hover{background:var(--red);color:#fff}
.bd-body{flex:1;overflow-y:auto;padding:26px 24px}
.bd-foot{padding:16px 24px;border-top:var(--line);display:flex;gap:12px;flex:none}
.bd-foot .btn{flex:1;padding:14px 18px}
.bd-eyebrow{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.bd-title{font-family:var(--fd);font-weight:800;font-size:1.42rem;letter-spacing:-.02em;line-height:1.18;margin-bottom:6px}
.bd-sub{font-size:14px;color:var(--g600);margin-bottom:22px;line-height:1.55}
.bd-price{font-family:var(--fd);font-weight:900;font-size:2.2rem;letter-spacing:-.03em;line-height:1;margin-top:6px}
.bd-price .u{font-size:.86rem;color:var(--g500);font-weight:600;margin-left:8px}
.bd-percap{font-size:12.5px;color:var(--g400);margin-top:8px}
.bd-field{margin-bottom:16px}
.bd-field>label{display:block;font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--g600);margin-bottom:8px}
.bd-input{width:100%;padding:12px 14px;border:1.5px solid var(--g250);border-radius:var(--r-sm);font-family:var(--fb);
  font-size:15px;outline:none;transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out)}
.bd-input:focus{border-color:var(--red);box-shadow:var(--ring)}
.bd-input.err{border-color:var(--red);background:var(--red-tint)}
.bd-errmsg{color:var(--red);font-size:12.5px;margin-top:6px;font-weight:500}
input[type=range].bd-range{width:100%;accent-color:var(--red)}
.bd-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--g250);border-radius:var(--r-sm);overflow:hidden}
.bd-stepper button{width:46px;height:46px;border:0;background:#fff;font-size:20px;cursor:pointer;font-family:var(--fd)}
.bd-stepper button:hover{background:var(--g50)}
.bd-stepper .val{min-width:60px;text-align:center;font-family:var(--fd);font-weight:800}
.bd-opts{display:flex;flex-direction:column;gap:10px}
.bd-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--g250);border-radius:var(--r-sm);
  padding:14px 16px;cursor:pointer;transition:border-color var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out);text-align:left;width:100%;background:#fff}
.bd-opt:hover{border-color:var(--ink)}
.bd-opt.sel{border-color:var(--red);background:var(--red-tint)}
.bd-opt .rad{width:20px;height:20px;border-radius:50%;border:2px solid var(--g250);flex:none;position:relative}
.bd-opt.sel .rad{border-color:var(--red)}
.bd-opt.sel .rad::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--red)}
.bd-opt .oi{font-family:var(--fd);font-weight:700;font-size:14.5px;display:block}
.bd-opt .od{font-size:12.5px;color:var(--g500);display:block;margin-top:2px}
.bd-opt .oz{margin-left:auto;font-family:var(--fd);font-weight:700;font-size:12px;color:var(--teal-deep);white-space:nowrap}
.bd-chips{display:flex;flex-wrap:wrap;gap:8px}
.bd-chip{font-family:var(--fd);font-weight:700;font-size:13px;padding:9px 15px;border-radius:var(--r-pill);
  border:1.5px solid var(--g250);background:#fff;color:var(--g600);cursor:pointer;transition:var(--t-fast) var(--e-out)}
.bd-chip:hover{border-color:var(--ink);color:var(--ink)}
.bd-chip.sel{background:var(--ink);border-color:var(--ink);color:#fff}
.bd-summary{background:var(--g50);border:var(--line);border-radius:var(--r-sm);padding:15px 18px;margin-bottom:18px}
.bd-summary .sr{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:14px;color:var(--g600)}
.bd-summary .sr span:last-child{color:var(--ink);font-weight:500;text-align:right}
.bd-summary .sr.tot{border-top:1px solid var(--g200);margin-top:6px;padding-top:10px;font-family:var(--fd);font-weight:800;font-size:16px}
.bd-note{font-size:12px;color:var(--g400);margin-top:14px;line-height:1.6}
.bd-note b{color:var(--g600)}
.bd-check-line{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--g600);line-height:1.5;margin:14px 0}
.bd-check-line input{margin-top:2px;accent-color:var(--red);width:17px;height:17px;flex:none}
.bd-check-line a{color:var(--red);border-bottom:1px solid var(--red-light)}
.bd-feats{list-style:none;margin:20px 0 0}
.bd-feats li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--g600);padding:5px 0}
.bd-feats svg{width:18px;height:18px;stroke:var(--teal-deep);fill:none;stroke-width:2.4;flex:none}
.bd-success{text-align:center;padding:8px 0}
.bd-checkmark{width:76px;height:76px;border-radius:50%;background:var(--teal-light);display:flex;align-items:center;
  justify-content:center;margin:8px auto 22px}
.bd-checkmark svg{width:36px;height:36px;stroke:var(--teal-deep);fill:none;stroke-width:3}
.bd-next{text-align:left;margin-top:20px}
.bd-next h4{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g400);margin-bottom:10px}
.bd-next li{list-style:none;position:relative;padding-left:26px;font-size:13.5px;color:var(--g600);margin:8px 0;line-height:1.5}
.bd-next li::before{content:'';position:absolute;left:4px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--teal-mid)}

/* ---------- 32. REVEAL ---------- */
/* .reveal war das alte Einzelmuster (opacity 0 -> 1, 6- bis 37-mal je Seite).
   Es wird in keiner Inhaltsdatei mehr verwendet; die Sequenzen laufen ueber
   .seq. Die Regel bleibt nur noch als Notnagel fuer .fig und .pstep — und
   ausdruecklich hinter .js, damit ohne JavaScript nichts unsichtbar bleibt. */
.js .reveal{opacity:0;transform:translateY(var(--d-md));
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);
  transition-delay:calc(min(var(--i,0),var(--stag-max)) * var(--stag))}
.js .reveal.in{opacity:1;transform:none}

/* ---------- 33. RESPONSIVE ---------- */
@media(max-width:1080px){
  .nav-item>a,.nav-item>button{padding:9px 11px;font-size:14.5px}
  .foot-top{grid-template-columns:1.3fr 1fr 1fr;gap:32px}
}
@media(max-width:980px){
  .scrolly-grid{grid-template-columns:1fr;gap:28px}
  .scrolly-media{position:relative;top:0;height:50vh}
  .scrolly-step{min-height:auto;padding:28px 0 28px 26px}
  .artgrid{grid-template-columns:minmax(0,1fr);gap:32px}
  .arttoc{position:relative;top:0;border:var(--line);border-radius:var(--r-md);padding:20px 22px;background:var(--g50)}
  .arttoc a{border-left:0;padding:6px 0}
  .semrow{grid-template-columns:1fr 220px;gap:20px}
  .semrow .sright{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
    text-align:left;border-top:var(--line);padding-top:16px}
  .semrow .sright .btn{margin-top:0}
  .facts{grid-template-columns:1fr 1fr}
  .fact{border-bottom:var(--line)}
  .fact:nth-child(2n){border-right:0}
}
@media(max-width:900px){
  /* Mobil waechst die Leiste NICHT mit: hier ist Platz knapp. Es bleibt beim
     bisherigen Stand — 64 px Leiste, 30 px Logo, in beiden Zustaenden. */
  :root{--gut:24px;--nav-h:64px}
  .nav.scrolled{--nav-h:64px}
  .nav-logo,.nav-logo img,
  .nav.scrolled .nav-logo,.nav.scrolled .nav-logo img{height:30px}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .feature .wrap,.split .wrap,.pagehead-split .wrap,.contact-grid,.elband .wrapin{grid-template-columns:1fr;gap:38px}
  .feature.rev .fig,.split.rev .split-figure{order:0}
  .grid-3,.rgrid,.price-grid,.modgrid{grid-template-columns:1fr 1fr}
  .rgrid.two{grid-template-columns:1fr}
  .pstep{grid-template-columns:66px 1fr;gap:20px}
  .press-item{grid-template-columns:1fr;gap:10px}
  .daterow{grid-template-columns:1fr;gap:12px}
  .daterow .dstatus{justify-content:flex-start}
  .elband{padding:36px 26px}
  .bookbar .wrap{gap:12px}
  .bookbar .bb-t{font-size:14px}
  .bookbar .bb-t span{display:none}
}
@media(max-width:620px){
  .hero h1,.subhero h1,.pagehead h1{font-size:clamp(32px,9.6vw,52px);letter-spacing:-.03em}
  .hero h1 .ln{overflow:visible}
  .statement p{font-size:clamp(24px,6.6vw,34px)}
  .sec-head h2,.feature h2,.split-body h2,.lead-block h2{font-size:clamp(26px,7.4vw,38px)}
  .grid-2,.grid-3,.rgrid,.price-grid,.modgrid,.form-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .cta .contact{gap:12px;flex-direction:column}
  .semrow{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .fact{border-right:0}
  .form-card{padding:26px 22px}
  .bookbar .bb-p{font-size:18px}
  .player .play{width:56px;height:56px}.player .play svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero-media,.subhero-media{transform:none!important}
  .scrolly-layer{opacity:0}
  .scrolly-layer.active{opacity:1}
  .scrolly-media{position:relative}
}

/* ---------- 34. PRINT ---------- */
@media print{
  .nav,.mmenu,.bookbar,.scrollcue,.cta,.bookdrawer,.arttoc{display:none!important}
  body{color:#000;font-size:11pt}
  .hero,.subhero{min-height:auto;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ============================================================================
   35. BEREICHS-SIGNATUREN
   Fünf Bereiche, fünf visuelle Welten. Gemeinsam bleiben Schrift, Grundfarben,
   Buttonform, Navigation, Fußbereich, Zeilenlängen und Fokusring. Die Signatur
   sitzt in Kopfform, Leitmotiv, Akzentverhalten und Sektionsrhythmus.
   Gesetzt wird sie über data-bereich am <body> (siehe _werkzeug/bauen.py).
   ============================================================================ */

/* Beschaffung — Grau ist der Ausgangszustand, Rot der geordnete Zielzustand. */
body[data-bereich="beschaffung"]{
  --sig:var(--red); --sig-deep:var(--red-dark); --sig-soft:var(--red-light); --sig-tint:var(--red-tint);
}
/* Consulting — Navy trägt die Aktenlogik, Rot bleibt der Handlung vorbehalten. */
body[data-bereich="consulting"]{
  --sig:var(--navy); --sig-deep:#0B1220; --sig-soft:#D6DCE8; --sig-tint:#F2F4F8;
}
/* Akademie — Türkis bedeutet hier Lernen, Fortschritt, Stufe. */
body[data-bereich="akademie"]{
  --sig:var(--teal-deep); --sig-deep:#125555; --sig-soft:var(--teal-light); --sig-tint:#F0FBFB;
}
/* Wissen — Graphit für die Struktur, Türkis für Messwerte, Rot fürs Ergebnis. */
body[data-bereich="wissen"]{
  --sig:var(--ink); --sig-deep:#000; --sig-soft:var(--g200); --sig-tint:var(--g50);
}
/* Unternehmen — kein System. Creme, Rot nur auf Namen, keine Linien. */
body[data-bereich="unternehmen"]{
  --sig:var(--red); --sig-deep:var(--red-dark); --sig-soft:var(--red-light); --sig-tint:var(--cream);
}

/* ---------------------------------------------------------- Kopfformen -- */

.kopf{position:relative;padding:calc(var(--nav-h) + var(--sp-5)) 0 var(--sec-sm);overflow:clip}
.kopf .crumb{margin-bottom:var(--sp-2)}
.kopf h1{font-size:var(--h1);line-height:.98;max-width:16ch}
.kopf h1 b{color:var(--sig);font-weight:inherit}
.kopf .lead-p{color:var(--g600);font-size:clamp(17px,1.8vw,21px);font-weight:300;max-width:60ch;
  margin-top:var(--sp-3);line-height:1.55}
.kopf .btnrow{margin-top:var(--sp-4)}
.kopf .eyebrow{margin-bottom:var(--sp-2)}

/* --- Beschaffung: „Die Sortimentszeile" ---------------------------------
   Ein Stapel Artikelzeilen. Ausgangszustand: viele kurze graue Zeilen
   ungleicher Länge. Zielzustand: wenige lange rote. Der Übergang ist
   scrollgebunden — die Seite führt vor, wovon sie spricht. */
.kopf--liste>.wrap{display:grid;grid-template-columns:1fr .82fr;gap:var(--sp-5);align-items:center}
.zeilenstapel{display:flex;flex-direction:column;gap:7px;padding:var(--sp-2) 0}
.zeilenstapel .zl{position:relative;display:flex;align-items:center;gap:var(--sp-2);
  height:10px;transform-origin:left center}
.zeilenstapel .zl i{display:block;height:6px;border-radius:3px;background:var(--g250);
  width:var(--w,40%);
  transition:width var(--t-slow) var(--e-io),background var(--t-slow) var(--e-out),
             opacity var(--t-base) var(--e-out)}
.zeilenstapel .zl em{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-style:normal;color:var(--g400);white-space:nowrap;
  transition:color var(--t-slow) var(--e-out)}
/* Gebündelter Zustand: die unbeschrifteten Zeilen verschwinden, die fünf
   Warengruppen bleiben und werden lang und rot. */
.zeilenstapel[data-gebuendelt] .zl:not([data-gruppe]) i{opacity:0;width:0}
.zeilenstapel[data-gebuendelt] .zl:not([data-gruppe]){height:0;margin-top:-7px}
.zeilenstapel[data-gebuendelt] .zl[data-gruppe] i{width:100%;background:var(--red)}
.zeilenstapel[data-gebuendelt] .zl[data-gruppe] em{color:var(--ink)}
.zeilenstapel .zl{transition:height var(--t-slow) var(--e-io),margin var(--t-slow) var(--e-io)}
.kopf--liste .zs-fuss{display:flex;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-2);
  padding-top:var(--sp-2);border-top:var(--line);
  font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g400)}
.kopf--liste .zs-fuss b{color:var(--red);font-weight:600;font-variant-numeric:tabular-nums}

/* --- Consulting: „Der Aktenrand" ----------------------------------------
   Dokumentenkopf mit Metadatenzeile, darunter läuft die Randziffernschiene
   durch die ganze Seite. Randziffern sind die Schreibweise der Vergabe- und
   Kommentarliteratur — und zugleich Sprungziele. */
.kopf--akte{background:var(--white)}
.aktenkopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr));gap:var(--sp-1) var(--sp-4);
  padding:var(--sp-2) 0;margin-bottom:var(--sp-4);
  border-top:1px solid var(--ink);border-bottom:var(--line)}
.aktenkopf div{display:flex;flex-direction:column;gap:2px}
.aktenkopf dt,.aktenkopf .k{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g400)}
.aktenkopf dd,.aktenkopf .v{font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:-.01em;
  color:var(--navy);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
/* Lauf 11.M (Layoutprobe): Spalten mindestens 11.5rem — bei 390 px untereinander statt zwei à 151 px
   („Öffentliche und / private / Auftraggeber“). Bis dahin galt:
   Zwei Spalten à rund 155 px bei 390 px: lange Wörter im Inhalt bekommen dort
   ein &shy; (Consulting „Reinigungsdienstleistung“), overflow-wrap ist nur das
   Netz, damit ein neues langes Wort nie über den Rand ragt (Lauf 11.3M). */
.aktenkopf div{min-width:0}

/* Randziffernschiene */
body[data-bereich="consulting"] .sec>.wrap,
body[data-bereich="consulting"] .feature>.wrap{position:relative}
.rn{position:absolute;left:calc(var(--gut) * -1 + 4px);top:2px;width:52px;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g500);text-align:right;padding-right:var(--sp-2);
  border-right:2px solid var(--g200);min-height:2.2em;
  transition:color var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out)}
.rn:hover{color:var(--navy)}
.rn.on{color:var(--red);border-color:var(--red)}
@media(max-width:1400px){
  .rn{position:static;display:inline-block;width:auto;min-height:0;text-align:left;
    border-right:0;border-left:2px solid var(--g200);padding:0 0 0 10px;margin-bottom:var(--sp-1)}
}

/* --- Akademie: Die Eckdaten-Leiste (E-047, E-058) ---------------------------
   Ersetzt die Formatspur, die ohne Vorwissen nicht verstanden wurde. Oben die
   Format-Etiketten in den .stag-Farben des Programms, darunter drei bis vier
   Eckdaten: kleines Label in Versalien, großer Wert, auf Wunsch eine Notiz.
   Markup erzeugt bauen.py aus {ECKDATEN …} — nie von Hand schreiben.
   Vier Spalten, in schmalen Behältern zwei mal zwei: Die Leiste steht im
   Kopf (volle Breite), in der Inhouse-Spalte und in der Kostprobe der
   Startseite — entscheidend ist ihre eigene Breite, nicht die des Fensters. */
.eckdaten{margin-top:var(--sp-4);container-type:inline-size}
.eck-formate{display:flex;flex-wrap:wrap;gap:var(--sp-1);list-style:none;margin:0 0 var(--sp-2);padding:0}
.eck-formate .stag{font-size:11.5px;padding:6px 13px}
.eck-fakten{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;
  margin:0;background:var(--g100);border:var(--line);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--el-1)}
/* Akzent als gerader Balken, nicht als border-top: der liefe in den Ecken rund aus. */
.eck-fakten::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--teal);z-index:1}
.eck-fakten>div{background:var(--white);padding:calc(var(--sp-2) + 3px) var(--sp-3) calc(var(--sp-2) + 4px)}
.eck-fakten dt{font-family:var(--fm);font-weight:600;font-size:var(--data);letter-spacing:var(--data-ls);
  text-transform:uppercase;color:var(--g500);margin-bottom:var(--sp-1)}
.eck-fakten dd{margin:0;font-family:var(--fd);font-weight:800;font-size:clamp(18px,1.9vw,23px);
  letter-spacing:-.02em;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;text-wrap:balance;overflow-wrap:break-word}
.eck-fakten dd small{display:block;margin-top:6px;font-family:var(--fb);font-weight:400;font-size:13px;
  line-height:1.4;letter-spacing:0;color:var(--g500);text-wrap:pretty}
/* Lauf 11.M (Layoutprobe): nebeneinander erst ab 58rem Leistenbreite — darunter stand die Zeile unter dem Wert
   („beide Teile, zzgl. 19 % USt · Privatpersonen: 3.272,50 € inkl. USt“) in 150 px Breite auf vier Zeilen.
   Zwei Spalten bis 29rem, darunter eine. Jede Zelle hat so mindestens 180 px Text (BAUKASTEN § 19). */
@container (max-width:58rem){
  .eck-fakten{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .eck-fakten>div:nth-child(odd):last-child{grid-column:span 2}
}
@container (max-width:700px){
  .eck-fakten>div{padding:calc(var(--sp-2) + 3px) var(--sp-2) calc(var(--sp-2) + 2px)}
}
@container (max-width:29rem){
  .eck-fakten{grid-template-columns:minmax(0,1fr)}
  .eck-fakten>div:nth-child(odd):last-child{grid-column:auto}
}

/* --- Wissen: „Das Kennblatt" --------------------------------------------
   Kennwertzeile mit Größe und Einheit an einer Skala mit Teilstrichen.
   Die Skala trägt keine Zahlen — sie zeigt, DASS gemessen wird, nicht WAS. */
.kopf--kennblatt{background:var(--white);border-bottom:var(--line)}
.kennskala{height:14px;margin-bottom:var(--sp-2);
  background-image:linear-gradient(90deg,var(--g250) 1px,transparent 1px);
  background-size:calc(100% / 24) 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 0 6px,transparent 6px);
  mask-image:linear-gradient(180deg,#000 0 6px,transparent 6px)}
.kennzeile{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-5);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--ink);margin-bottom:var(--sp-4)}
.kennzeile div{display:flex;flex-direction:column;gap:2px}
.kennzeile .k{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--g400)}
.kennzeile .v{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.kennzeile .v.einheit{color:var(--teal-deep)}

/* Maßband: Lesefortschritt im Artikel, Teilstriche = Abschnitte */
.massband{position:sticky;top:calc(var(--nav-h) + var(--sp-3));display:flex;gap:var(--sp-2)}
.massband .skala{position:relative;width:3px;flex:none;background:var(--g100);border-radius:2px}
.massband .skala i{position:absolute;left:0;right:0;top:0;height:var(--fortschritt,0%);
  background:var(--red);border-radius:2px;transition:height var(--t-fast) var(--e-lin)}

/* --- Unternehmen: „Wo die Systeme aufhören" -----------------------------
   Der einzige Bereich ohne Linie, Spur oder Ziffer. Die H1 bricht als
   einziges Element der Website links aus dem Container heraus. */
.kopf--offen{background:var(--cream);padding-top:calc(var(--nav-h) + var(--sp-6));padding-bottom:var(--sec-md)}
.kopf--offen h1{font-size:clamp(40px,7.6vw,104px);line-height:.94;letter-spacing:-.04em;max-width:13ch;
  margin-left:calc(var(--sp-4) * -1)}
.kopf--offen .lead-p{max-width:46ch;margin-left:auto;margin-right:0;text-align:left}
@media(max-width:900px){.kopf--offen h1{margin-left:0}
  .kopf--offen .lead-p{margin-left:0}}
body[data-bereich="unternehmen"] .sec{border-top:0}
body[data-bereich="unternehmen"] .sec+.sec{padding-top:var(--sec-lg)}


/* ============================================================================
   36. DIE LEBENSZYKLUS-SCHIENE — das Signature-Element
   Fünf Stationen unter jedem Bereichskopf. Die aktive ist ausgeschrieben, die
   anderen auf Punkte reduziert und weiterhin anklickbar. Beim Scrollen dockt
   die Schiene in die Navigationsleiste ein: sie verschwindet nicht, sie wandert.
   Gleichzeitig Orientierung, Markenerzählung und Querverweis.
   ============================================================================ */
.lzs{border-bottom:var(--line);background:var(--white);
  view-transition-name:lzs}
.lzs .wrap{display:flex;align-items:center;gap:var(--sp-3);padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.lzs-titel{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g400);flex:none;max-width:9ch;line-height:1.4}
.lzs-track{position:relative;display:flex;align-items:center;gap:0;flex:1;min-width:0}
.lzs-track::before{content:'';position:absolute;left:9px;right:9px;top:50%;height:2px;
  background:var(--g200);border-radius:2px}
/* Gleich breite Segmente: die Punkte sitzen dadurch in gleichmaessigem
   Abstand auf der Schiene. Die aktive Station bekommt doppelte Breite fuer
   ihre Beschriftung — die anderen bleiben Punkte. */
.lzs-st{position:relative;display:flex;align-items:center;gap:9px;background:none;border:0;padding:6px 0;
  cursor:pointer;font-family:inherit;color:inherit;flex:1 1 0;min-width:0;
  transition:flex-grow var(--t-base) var(--e-io)}
.lzs-st:last-child{flex:0 0 auto}
/* Lauf 11.H (FB-050): Trefferflaeche der letzten Station mind. 24 px breit; der Punkt bleibt rechts buendig. */
.lzs-st:last-child:not([aria-current]){min-width:24px;justify-content:flex-end}
.lzs-st .pt{width:18px;height:18px;border-radius:50%;background:var(--white);
  border:2px solid var(--g250);flex:none;position:relative;z-index:2;
  transition:border-color var(--t-base) var(--e-out),background var(--t-base) var(--e-out),
             transform var(--t-base) var(--e-snap)}
.lzs-st .lb{display:none;font-family:var(--fd);font-weight:700;font-size:13.5px;letter-spacing:-.01em;
  white-space:nowrap}
.lzs-st .lb small{display:block;font-family:var(--fm);font-weight:600;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sig);margin-top:2px}
.lzs-st:hover .pt,.lzs-st:focus-visible .pt{border-color:var(--sig);transform:scale(1.18)}
.lzs-st[aria-current]{flex:2.6 1 0}
.lzs-st[aria-current] .pt{background:var(--sig);border-color:var(--sig)}
.lzs-st[aria-current] .lb{display:block}
/* Die einzige Dauerbewegung der Website: ein langsamer Ringatem am aktiven
   Punkt. An genau einer Stelle, an dem Element, das die Marke trägt. */
.lzs-st[aria-current] .pt::after{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--sig);animation:atem 6s var(--e-out) infinite}
@keyframes atem{
  0%,100%{transform:scale(1);opacity:.5}
  50%    {transform:scale(1.28);opacity:0}
}
@media(max-width:760px){
  .lzs .wrap{gap:var(--sp-2)}
  .lzs-titel{display:none}
  .lzs-st[aria-current] .lb{font-size:12.5px}
  .lzs-st[aria-current] .lb small{display:none}
}

/* Angedockte Fassung in der Navigationsleiste */
.nav-lzs{display:none;align-items:center;gap:7px;margin-left:var(--sp-2);flex:none}
.nav.hat-lzs .nav-lzs{display:flex}
.nav-lzs i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.32;
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-snap)}
.nav-lzs i.on{opacity:1;transform:scale(1.5);background:var(--red)}
@media(max-width:1080px){.nav-lzs{display:none!important}}

/* --- Sechster Hauptpunkt, heute „Marktüberblick & digitale Lösungen" (E-043, E-101) -
   Mit ihm ist die Leiste rund 1060 px breit. Drei Anpassungen, damit nichts
   umbricht oder überläuft — nachgemessen bei 1024, 1280 und 1440 px:
   1. Kein Umbruch innerhalb eines Menüpunkts.
   2. Die Kopfleiste nutzt die breite Spalte (--w-wide) statt der Textspalte;
      ab 1101 px ist das der Platz, der sonst links und rechts leer blieb.
   3. Bis 1360 px engere Punkte; bis 1230 px das Menü hinter dem Burger —
      darunter fehlt der Platz (bei 1024 px rund 200 px), und kürzen ließe er
      sich nur, indem die Schrift unter Lesegröße fällt.
   Seit Lauf 11.2 heißt der Punkt „Marktüberblick & digitale Lösungen“ (E-101);
   nachgemessen bei 1231, 1280 und 1440 px: passt, Leiste gleich hoch. */
.nav-item>a,.nav-item>button{white-space:nowrap}
.nav .wrap{max-width:var(--w-wide)}
@media(max-width:1360px){
  .nav-links{gap:2px}
  .nav-item>a,.nav-item>button{padding:9px 8px;font-size:14.5px}
  .nav-lzs{display:none!important}
}
@media(max-width:1230px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}


/* ============================================================================
   37. BEWEGUNG — Vokabular in Anwendung
   ============================================================================ */

/* --- Orchestrierter Sektionseinlauf ---------------------------------------
   Eine Sektion läuft als komponierte Sequenz ein: Eyebrow, Überschrift,
   Fließtext, dann die Elemente gestaffelt. Nicht zwölf unabhängige Fades.
   Die Staffelung steht über --i am Element, nicht als transition-delay im
   Markup — die 149 Inline-Styles entfallen dadurch. */
.js .seq>*{opacity:0;transform:translateY(var(--d-sm));
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);
  transition-delay:calc(min(var(--i,0),var(--stag-max)) * var(--stag))}
.js .seq.in>*{opacity:1;transform:none}
/* Innerhalb eines Rasters staffeln die Kinder weiter, aber langsamer — sonst
   wird aus zwei Ebenen Staffelung eine Warteschlange. */
.js .seq.in .stagger>*{opacity:0;transform:translateY(var(--d-sm));
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);
  transition-delay:calc(min(var(--i,0),var(--stag-max)) * var(--stag) + var(--t-fast))}
.js .seq.in.los .stagger>*{opacity:1;transform:none}
/* --- Rückfallebene ohne app.js (Lauf 11.K, F-01) --------------------------
   html.js setzt das Inline-Skript im Kopf, unabhängig davon, ob app.js je
   ankommt. Bricht der Abruf ab (Funkloch, Proxy, Blocker) oder scheitert das
   Skript, bevor die Einläufe eingerichtet sind, blieb die Seite leer. app.js
   meldet sich deshalb mit html.js-bereit, sobald die Beobachter stehen; bis
   dahin blendet eine Notanimation nach --t-notfall alles ein. Kommt app.js
   rechtzeitig, greift die Regel nicht mehr, und der Einlauf bleibt wie er ist. */
@keyframes notein{to{opacity:1;transform:none}}
.js:not(.js-bereit) .seq>*,.js:not(.js-bereit) .reveal{
  animation:notein var(--t-slow) var(--e-out) var(--t-notfall) forwards}

/* --- Zeilenweiser Überschrift-Einlauf -------------------------------------
   Die Maske .ln{overflow:hidden} war im CSS vorbereitet, die Animation fehlte.
   Die Zeilenzerlegung übernimmt app.js und rechnet sie bei Größenänderung neu. */
.ln{display:block;overflow:hidden}
.lni{display:block;transform:translateY(105%);
  transition:transform var(--t-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * 60ms)}
.in .lni,.ln-in .lni{transform:none}
/* Unterlängen dürfen nicht abgeschnitten werden. */
.ln{padding-bottom:.06em;margin-bottom:-.06em}

/* --- Scrollgebundene Bewegung ---------------------------------------------
   Wo der Browser animation-timeline kann, übernimmt er. Sonst rechnet app.js
   den Fortschritt in --p (0..1) und die Regeln unten greifen genauso. */
.zeichnen{stroke-dasharray:var(--len,1000);stroke-dashoffset:calc(var(--len,1000) * (1 - var(--p,0)))}
@supports (animation-timeline: view()){
  .zeichnen-auto{stroke-dasharray:var(--len,1000);
    animation:zeichnen linear both;animation-timeline:view();animation-range:entry 15% cover 55%}
  @keyframes zeichnen{from{stroke-dashoffset:var(--len,1000)}to{stroke-dashoffset:0}}
}
/* Bereichs-Leitmotiv, das sich langsam mit der Seite mitbewegt. */
.mitlauf{--p:0;transform:translateY(calc(var(--p) * var(--weg,60px) * -1))}
@supports (animation-timeline: scroll()){
  .mitlauf{animation:mitlauf linear both;animation-timeline:scroll();transform:none}
  @keyframes mitlauf{to{transform:translateY(calc(var(--weg,60px) * -1))}}
}

/* --- Hover mit Tiefe -------------------------------------------------------
   Ersetzt das globale translateY(-5px). Jede Hover-Reaktion hat ein
   :focus-visible-Gegenstück. */
.card,.dlcard,.pcard,.modchip,.semrow{
  transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out)}
.card:hover,.card:focus-visible,.dlcard:hover,.pcard:hover,.modchip:hover,.semrow:hover{
  transform:translateY(-3px);box-shadow:var(--el-2);border-color:transparent}

/* Bildzoom mit gegenläufigem Textversatz */
.tilecard{transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out)}
.tilecard>div{transition:transform var(--t-base) var(--e-out)}
.tilecard:hover>div,.tilecard:focus-visible>div{transform:translateY(-6px)}
.tilecard:hover img,.tilecard:focus-visible img{transform:scale(1.055)}
/* Richtungsabhängiges Overlay: die Fläche kommt von der Seite, von der die
   Maus kommt. --dx/--dy setzt app.js beim mouseenter. */
.tilecard::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(var(--dwinkel,180deg),color-mix(in srgb,var(--sig) 55%,transparent),transparent 62%);
  opacity:0;transition:opacity var(--t-base) var(--e-out)}
.tilecard:hover::before,.tilecard:focus-visible::before{opacity:1}

/* Magnetische Primärschaltflächen — dezent, höchstens 5 px. */
.btn{transition:transform var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out),
      border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out)}
.btn.magnet{transform:translate(var(--mx,0),var(--my,0))}

/* --- :active — gab es bisher nirgends. Jedes klickbare Element muss sich
   beim Drücken physisch anfühlen. --- */
.btn:active,.chip:active,.sw-k:active,.nav-cta:active,.bd-chip:active,.bd-opt:active,
.tmember:active,.lzs-st:active,.card:active,.semrow:active,.langpill:active,
.bd-stepper button:active,.flink:active,.hoch:active,.suche-auf:active{
  transform:scale(.975) translateY(1px);transition-duration:var(--t-tap)}
.btn:active{filter:brightness(.94)}
summary:active{transition-duration:var(--t-tap)}

/* --- Seitenübergänge — der harte Weißblitz verschwindet. --- */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:var(--t-base)}
::view-transition-old(root){animation:vt-raus var(--t-base) var(--e-io) both}
::view-transition-new(root){animation:vt-rein var(--t-base) var(--e-out) both}
@keyframes vt-raus{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-rein{from{opacity:0;transform:translateY(8px)}}
.nav-logo{view-transition-name:logo}
.nav{view-transition-name:nav}
::view-transition-group(nav),::view-transition-group(logo),::view-transition-group(lzs){
  animation-duration:var(--t-base);animation-timing-function:var(--e-io)}


/* ============================================================================
   38. RASTER — Asymmetrie, Ausbrüche, Rhythmus
   ============================================================================ */
.g-7-5{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-5);align-items:center}
.g-5-7{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-5);align-items:center}
.g-8-4{display:grid;grid-template-columns:8fr 4fr;gap:var(--sp-5);align-items:start}
.g-4-8{display:grid;grid-template-columns:4fr 8fr;gap:var(--sp-5);align-items:start}
@media(max-width:900px){.g-7-5,.g-5-7,.g-8-4,.g-4-8{grid-template-columns:1fr;gap:var(--sp-4)}}

/* Sektionsrhythmus: der Abstand markiert die Gliederung, nicht nur die Farbe. */
.sec.sm{padding:var(--sec-sm) 0}
.sec.md{padding:var(--sec-md) 0}
.sec.lg{padding:var(--sec-lg) 0}
.sec.xl{padding:var(--sec-xl) 0}
/* Zwei volle Sektionsabstände hintereinander ergaben bis zu 264 px Luft.
   Wo zwei gleichartige Sektionen aufeinanderfolgen, halbiert sich der obere. */
:where(.sec,.feature,.split)+:where(.sec,.feature,.split):not(.cream):not(.g50):not(.dark){
  padding-top:calc(var(--sec-md) * .55)}

/* Ausbrüche — höchstens zwei je Seite, wird in der Prüfung nachgezählt. */
.bleed{width:100vw;margin-left:50%;transform:translateX(-50%);max-width:100vw}
.bleed-r{margin-right:calc((100vw - min(var(--maxw),100vw)) / -2);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.bleed-l{margin-left:calc((100vw - min(var(--maxw),100vw)) / -2);border-radius:0 var(--r-lg) var(--r-lg) 0}
.ueberlapp{margin-top:calc(var(--sp-6) * -1);position:relative;z-index:2}
@media(max-width:900px){
  .bleed-r,.bleed-l{margin-left:0;margin-right:0;border-radius:var(--r-lg)}
  .ueberlapp{margin-top:0}
}

/* Sektionen unterhalb des Falzes müssen nicht sofort gerendert werden. */
.sec.spaet{content-visibility:auto;contain-intrinsic-size:auto 640px}


/* ============================================================================
   39. BILD-SLOTS — Platzhaltersystem
   Reserviert das Seitenverhältnis (kein Layoutsprung), zeigt bis zum Vorliegen
   eines Fotos einen gestalteten Platzhalter aus Bereichsfarbe, Leitmotiv und
   Motivbeschreibung. Der Tausch gegen ein echtes Foto ist ein Attributwechsel.
   Der Einkaufszettel steht in 03-inhalte/bilder/BENOETIGTE-BILDER.md.
   ============================================================================ */
.slot{position:relative;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:var(--ar,4/3);background:var(--g100);isolation:isolate}
.slot>img,.slot>picture{display:block;width:100%;height:100%}
.slot>picture>img{width:100%;height:100%;object-fit:cover}
.slot[data-leer]{background:var(--sig-tint);border:1px dashed var(--g250);
  display:flex;align-items:flex-end;padding:var(--sp-3)}
.slot[data-leer] .motiv{position:absolute;inset:0;z-index:0;color:var(--sig);opacity:.26}
.slot[data-leer] .motiv svg{width:100%;height:100%}
.slot[data-leer] .sl{position:relative;z-index:1;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--g400);line-height:1.6;max-width:38ch}
.slot[data-leer] .sl b{display:block;color:var(--sig);font-weight:600;margin-bottom:3px}
.slot .sl-id{position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:1;font-family:var(--fm);
  font-size:9.5px;letter-spacing:.1em;color:var(--g400);
  background:rgba(255,255,255,.72);padding:3px 8px;border-radius:var(--r-pill)}
/* Farbplatzhalter unter jedem echten Bild — beim Laden blitzt kein weißer Kasten. */
.slot[data-ton]{background:var(--ton,var(--g100))}
/* Bildplätze in Spalten, die vorher nur Text trugen (E-038): Abstand zum
   Nachbarn, statt dass Bild und Karte aneinanderstoßen. */
.contact-grid>div>.slot:not(:last-child){margin-bottom:var(--sp-3)}
.contact-grid>div>.btnrow+.slot{margin-top:var(--sp-4)}
.wrap-text>.sec-head+.slot,.prose>h2+.slot{margin:var(--sp-3) 0}

/* --- Live-Bau (E-039): leere Plätze fallen weg, das Layout fällt zurück ----
   bildslots.py gibt im Live-Bau für einen Platz ohne Foto nichts aus. Ein
   split ohne Bild wird einspaltiger Text in Lesebreite statt einer halben
   Spalte neben einem Loch. */
.split .wrap:not(:has(>.slot)){grid-template-columns:minmax(0,760px)}
/* Branchenportal: ein Logoplatz ohne freigegebenes Logo zeigt im Live-Bau nur
   den Anbieternamen, ohne gestrichelten Kasten (E-019). */
body[data-bau="live"] .loslogo:not(:has(img)){aspect-ratio:auto;border:0;background:none;
  padding:0;justify-content:flex-start;min-height:0;box-shadow:none}
/* Stationsschiene: fehlt einer Stufe das Bild, bleibt das vorige stehen —
   dessen Beschriftung passt dann nicht mehr und tritt zurück (app.js). */
.scrolly-layer.nachlauf .cap{opacity:0}


/* ============================================================================
   40. FACHGRAFIKEN — die nicht-fotografische Zweitebene
   Eigene SVG aus dem Fachwissen. Sie zeigen ausschließlich Strukturen, nie
   erfundene Zahlenwerte: Achsen ohne Skala, Verhältnisse statt Absolutwerte.
   Geprüft gegen 00-wissen/zahlen-und-behauptungen.md.
   ============================================================================ */
.fgrafik{position:relative;margin:var(--sp-4) 0;background:var(--white);border:var(--line);
  border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-3) var(--sp-3)}
.fgrafik svg{width:100%;height:auto;display:block;overflow:visible}
.fgrafik figcaption{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:var(--line);
  font-size:13.5px;color:var(--g500);line-height:1.55;max-width:64ch}
.fgrafik figcaption b{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g400);display:block;margin-bottom:5px;font-weight:600}
.fgrafik .achse{stroke:var(--g250);stroke-width:1.2;fill:none}
.fgrafik .teil{stroke:var(--g200);stroke-width:1;fill:none}
.fgrafik .bal{fill:var(--sig);transform-origin:left center}
.fgrafik .bal-2{fill:var(--teal-mid)}
.fgrafik .bal-3{fill:var(--g250)}
.fgrafik .lab{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  fill:var(--g400)}
.fgrafik .lab-w{font-family:var(--fd);font-size:12px;font-weight:700;fill:var(--ink)}
.fgrafik .pf{stroke:var(--sig);stroke-width:2;fill:none;stroke-linecap:round}

/* --- Wissen: „Die Herleitung" --------------------------------------------
   Die Formel baut sich beim Scrollen Term für Term auf, jeder Term am Rand
   benannt. Das Markenversprechen als Interaktion: die Seite rechnet es vor,
   statt es zu behaupten. */
.herleitung{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:var(--sp-4);margin:var(--sp-4) 0}
.herleitung .hz{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  font-family:var(--fd);font-weight:800;font-size:clamp(15px,2vw,21px);letter-spacing:-.01em}
.herleitung .tm{opacity:0;transform:translateY(var(--d-sm));
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out);
  transition-delay:calc(var(--i,0) * 180ms)}
.herleitung.in .tm{opacity:1;transform:none}
.herleitung .op{color:var(--g400);font-family:var(--fm);font-weight:600;font-size:.8em}
.herleitung .erg{color:var(--red-bright)}
.herleitung .var{color:#fff}
.herleitung .rand{margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid rgba(255,255,255,.34);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-2)}
.herleitung .rand div{opacity:0;transition:opacity var(--t-base) var(--e-out);
  transition-delay:calc(var(--i,0) * 180ms + 120ms)}
.herleitung.in .rand div{opacity:1}
.herleitung .rand .k{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:3px}
.herleitung .rand .t{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.5}


/* ============================================================================
   41. NAVIGATION — Rückzug, Fortschritt, Suche
   ============================================================================ */
/* Die Leiste zieht sich beim Runterscrollen zurück und kommt beim Hochscrollen
   wieder — dabei wird sie kompakter. Der harte Umschlag bei 70 % Viewporthöhe
   entfällt; der Zustand hängt jetzt an einem Sentinel, nicht an einem
   ungedrosselten scroll-Handler. */
.nav{transition:background var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out),
      transform var(--t-base) var(--e-io),height var(--t-base) var(--e-io)}
.nav.weg{transform:translateY(-100%)}
.nav.kompakt{height:56px}
.nav.kompakt .nav-logo,.nav.kompakt .nav-logo img{height:24px}

/* Fortschrittsindikator, in die Leiste integriert */
.nav::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red);transform:scaleX(var(--fortschritt,0));transform-origin:left center;
  opacity:0;transition:opacity var(--t-base) var(--e-out)}
.nav.scrolled::after,.nav.nav-solid::after{opacity:1}

/* Aktiver Navigationspunkt. bauen.py schrieb bisher .is-current, das CSS
   kannte nur .current — und der Selektor verlangte >a statt >button.
   Die aktive Seite war damit auf allen 32 Seiten unmarkiert. */
.nav-item.is-current>a,.nav-item.is-current>button{color:#fff;font-weight:600}
.nav.scrolled .nav-item.is-current>a,.nav.scrolled .nav-item.is-current>button,
.nav.nav-solid .nav-item.is-current>a,.nav.nav-solid .nav-item.is-current>button{color:var(--ink)}
.nav-item.is-current>a::after,.nav-item.is-current>button::after{content:'';position:absolute;
  left:15px;right:15px;bottom:3px;height:2px;background:var(--red-bright);border-radius:2px}
.nav.scrolled .nav-item.is-current>a::after,.nav.scrolled .nav-item.is-current>button::after,
.nav.nav-solid .nav-item.is-current>a::after,.nav.nav-solid .nav-item.is-current>button::after{
  background:var(--red)}

/* Mega-Menü: 180 ms sind für eine so große Fläche zu schnell. */
.mega{transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out),
      visibility var(--t-base)}

/* Lupe und Suchfenster */
.suche-auf{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  padding:9px 13px;border-radius:var(--r-pill);color:inherit;
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.suche-auf svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.suche-auf kbd{font-family:var(--fm);font-size:10px;letter-spacing:.04em;border:1px solid currentColor;
  border-radius:5px;padding:2px 5px;opacity:.6}
.suche-auf:hover{background:rgba(255,255,255,.12)}
.nav.scrolled .suche-auf:hover,.nav.nav-solid .suche-auf:hover{background:var(--g100)}
@media(max-width:1080px){.suche-auf kbd{display:none}}

.suche{position:fixed;inset:0;z-index:1600;display:flex;align-items:flex-start;justify-content:center;
  padding:12vh var(--sp-3) var(--sp-3);opacity:0;visibility:hidden;
  transition:opacity var(--t-base) var(--e-out),visibility var(--t-base)}
.suche.open{opacity:1;visibility:visible}
.suche-grund{position:absolute;inset:0;background:rgba(17,17,19,.52);backdrop-filter:blur(8px)}
.suche-box{position:relative;z-index:2;width:min(680px,100%);background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--el-3);overflow:hidden;display:flex;flex-direction:column;max-height:72vh;
  transform:translateY(var(--d-md)) scale(.98);transition:transform var(--t-base) var(--e-io)}
.suche.open .suche-box{transform:none}
.suche-feld{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border-bottom:var(--line);flex:none}
.suche-feld svg{width:20px;height:20px;stroke:var(--g400);fill:none;stroke-width:2;flex:none}
.suche-feld input{flex:1;border:0;outline:none;font-family:var(--fd);font-weight:700;font-size:19px;
  letter-spacing:-.01em;color:var(--ink);background:none;min-width:0}
.suche-feld input::placeholder{color:var(--g250);font-weight:500}
.suche-feld .esc{font-family:var(--fm);font-size:10px;letter-spacing:.06em;color:var(--g400);
  border:1px solid var(--g200);border-radius:6px;padding:4px 7px;flex:none}
.suche-liste{overflow-y:auto;padding:var(--sp-1) 0;flex:1}
.suche-tr{display:block;padding:11px var(--sp-3);border-left:3px solid transparent;
  transition:background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out)}
.suche-tr .st{font-family:var(--fd);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:9px}
.suche-tr .st .br{font-family:var(--fm);font-weight:600;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--g400);flex:none}
.suche-tr .sx{font-size:13.5px;color:var(--g500);line-height:1.5;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suche-tr mark{background:var(--red-light);color:var(--red-dark);border-radius:3px;padding:0 2px}
.suche-tr.on,.suche-tr:hover{background:var(--red-tint);border-left-color:var(--red)}
.suche-leer{padding:var(--sp-4) var(--sp-3);color:var(--g500);font-size:15px}
.suche-fuss{flex:none;padding:10px var(--sp-3);border-top:var(--line);display:flex;gap:var(--sp-3);
  font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g400)}

/* Zurück nach oben — auf Seiten mit mehr als vier Sektionen */
.hoch{position:fixed;right:var(--sp-3);bottom:var(--sp-3);z-index:880;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--g200);background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);box-shadow:var(--el-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(var(--d-sm));
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out),visibility var(--t-base)}
.hoch.show{opacity:1;visibility:visible;transform:none}
.hoch svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
.hoch:hover{border-color:var(--red);color:var(--red)}
body:has(.bookbar.show) .hoch{bottom:calc(var(--sp-3) + 76px)}

/* Sticky-Sekundärnavigation: Sprungmarken zu den Abschnitten */
.subnav{position:sticky;top:var(--nav-oben,var(--nav-h));transition:top var(--t-base) var(--e-io);z-index:70;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:var(--line)}
.subnav .wrap{display:flex;gap:var(--sp-1);overflow-x:auto;
  padding-top:9px;padding-bottom:7px}
.subnav a{flex:none;font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:-.01em;
  color:var(--g500);padding:7px 13px;border-radius:var(--r-pill);white-space:nowrap;
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.subnav a:hover{color:var(--ink);background:var(--g50)}
.subnav a[aria-current]{color:#fff;background:var(--sig)}


/* ============================================================================
   42. MOBILES MENÜ — aufgewertet
   Die Branche liest laut eigener Anforderung viel auf dem Handy; die mobile
   Fassung darf nicht die schwächere sein. Beschreibungen aus dem Mega-Menü,
   Suchfeld, gestaffelter Einlauf der Gruppen.
   ============================================================================ */
.mmenu .msuche{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.34);
  border-radius:var(--r-pill);padding:13px 18px;margin-bottom:var(--sp-3);color:rgba(255,255,255,.72);
  width:100%;background:rgba(255,255,255,.06);cursor:pointer;text-align:left;
  font-family:var(--fd);font-weight:700;font-size:15px}
.mmenu .msuche svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.mgroup{opacity:0;transform:translateY(var(--d-sm));
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out);
  transition-delay:calc(var(--i,0) * 45ms)}
.mmenu.open .mgroup,.mmenu.open .msolo,.mmenu.open .mcta,.mmenu.open .msuche{opacity:1;transform:none}
.msolo,.mcta,.msuche{opacity:0;transform:translateY(var(--d-sm));
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out);
  transition-delay:calc(var(--i,0) * 45ms)}
.mgroup .mlinks a{display:block;padding:11px 0;font-size:16px;color:rgba(255,255,255,.78)}
.mgroup .mlinks a span{display:block;font-size:12.5px;color:rgba(255,255,255,.52);
  font-weight:400;margin-top:2px;line-height:1.45}
.mgroup .mlinks a:hover,.mgroup .mlinks a:focus-visible{color:#fff}


/* ============================================================================
   43. FILTER, FORMULARE, ZUSTÄNDE
   ============================================================================ */
/* Filterergebnisse bewegen sich, statt per display:none zu verschwinden. */
.semrow{transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-io),
        box-shadow var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out)}
.semrow[hidden]{display:none}
.semrow.raus{opacity:0;transform:scale(.985) translateY(-6px);pointer-events:none}
.fb-count b{font-variant-numeric:tabular-nums;font-family:var(--fd)}
.fb-aktiv{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--sp-1)}
.fb-aktiv .fa{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;
  border:0;border-radius:var(--r-pill);padding:6px 11px;cursor:pointer}
.fb-aktiv .fa::after{content:'×';font-size:14px;line-height:1;opacity:.7}

/* Inline-Validierung beim Verlassen des Feldes, nicht erst beim Absenden. */
.form-input[aria-invalid="true"],.bd-input[aria-invalid="true"]{
  border-color:var(--red);background:var(--red-tint)}
/* Lauf 11.K (E-04): Fokus in Feldern wie überall auf der Seite als Ring, nicht nur als Farbwechsel
   des Rahmens — im Fehlerzustand (roter Rahmen, rosa Grund) war er sonst kaum zu sehen. */
.form-input:focus-visible,.form-select:focus-visible,.fb-search input:focus-visible,.rr-ein input:focus-visible{
  outline:3px solid var(--red);outline-offset:2px}
.form-input[aria-invalid="true"]:focus-visible,.rr-ein input[aria-invalid="true"]:focus-visible{outline-color:var(--red-dark)}
.feld-fehler{display:none;color:var(--red-dark);font-size:12.5px;font-weight:500;margin-top:5px}
.feld-fehler.show{display:block}
.form-group:has([aria-invalid="true"]) .form-label{color:var(--red-dark)}

/* Zustände: Laden, Leer, Fehler, Erfolg */
.zustand{display:flex;align-items:flex-start;gap:12px;border-radius:var(--r-md);padding:14px 18px;
  font-size:14.5px;line-height:1.55}
.zustand.ok{background:var(--teal-light);color:#155e5e}
.zustand.fehler{background:var(--red-tint);color:var(--red-dark);border:1px solid var(--red-light)}
.zustand svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2.4}


/* Marquee-Bedienung — die 46-s-Bewegung ließ sich nur mit der Maus anhalten. */
.marquee-halt{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--g250);
  border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;color:inherit;
  font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.sec.dark .marquee-halt{border-color:rgba(255,255,255,.42)}


/* ============================================================================
   44. RESPONSIVE-ERGÄNZUNGEN UND REDUCED MOTION
   ============================================================================ */
@media(max-width:900px){
  :root{--gut:24px;--nav-h:64px}
  .kopf--liste>.wrap{grid-template-columns:1fr;gap:var(--sp-4)}
  .lzs .wrap{padding-top:10px;padding-bottom:10px}
}
@media(max-width:620px){
  /* Lange deutsche Komposita in Displaygrößen: hyphens:auto greift erst, wenn
     die Zeile bricht — bei „Stundenverrechnungssatz" ist das zu spät. */
  .kopf h1,.hero h1,.subhero h1,.pagehead h1{overflow-wrap:anywhere}
  .kopf--offen h1{font-size:clamp(32px,10vw,52px)}
  .suche{padding-top:6vh}
  .hoch{width:42px;height:42px}
}

/* Alles Neue muss von der bestehenden Reduced-Motion-Regel erfasst werden. */
@media(prefers-reduced-motion:reduce){
  *{animation-timeline:none!important;animation-range:normal!important;view-transition-name:none!important}
  .js .seq>*,.js .seq.in .stagger>*{opacity:1!important;transform:none!important}
  .lni{transform:none!important}
  /* Nicht die Aussage abschalten, nur die Bewegung: app.js setzt bei
     reduzierter Bewegung sofort den gebuendelten Endzustand. Ein pauschales
     width:100% haette alle Zeilen gleich lang gemacht — dann zeigt die
     Grafik einen Barcode statt einer Buendelung. */
  .zeilenstapel .zl,.zeilenstapel .zl i{transition:none!important}
  .herleitung .tm,.herleitung .rand div{opacity:1!important;transform:none!important}
  .lzs-st[aria-current] .pt::after{display:none}
  .mgroup,.msolo,.mcta,.msuche{opacity:1!important;transform:none!important}
  .marquee-row{animation:none!important}
  .nav.weg{transform:none!important}
  .btn.magnet{transform:none!important}
  .suche-box{transform:none!important}
  .mitlauf{transform:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .nav.scrolled,.nav.nav-solid,.filterbar,.subnav,.bookbar,.hoch,.mmenu,
  .suche-grund,.bd-backdrop,.tmodal-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.scrolled,.nav.nav-solid,.filterbar,.subnav,.bookbar,.hoch{background:#fff}
  .mmenu{background:#0c0c0e}
}

@media print{
  .lzs,.subnav,.hoch,.suche,.nav-lzs,.marquee-halt{display:none!important}
  .slot[data-leer]{border:1px solid #999}
  .herleitung{background:none;color:#000;border:1px solid #999}
  .herleitung .var,.herleitung .erg{color:#000}
}

/* Gruppenbeschriftungen im Buchungs-Drawer. Vorher standen dort <label> ohne
   for-Attribut — für Screenreader wirkungslos. Jetzt <span> mit
   aria-labelledby an der jeweiligen Gruppe. */
.bd-gl{display:block;font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--g600);margin-bottom:8px}
.bd-field .feld-fehler{margin-top:6px}
.bd-input[aria-invalid="true"]{border-color:var(--red);background:var(--red-tint)}

/* ============================================================================
   45. STARTSEITE — die Klammer über den fünf Signaturen
   Die Startseite zeigt von jedem Bereich eine Kostprobe seines Leitmotivs.
   Wer hier war, erkennt die Unterseiten wieder — das ist ihre Aufgabe.
   ============================================================================ */

/* Der Lebenszyklus ist eine Abfolge — also eine geordnete Liste und keine
   Reihe von Schaltflächen. Vorher waren es <button> ohne Aktion, deren
   zugänglicher Name der komplette 40-Wort-Absatz war. */
ol.cycle-track{list-style:none;counter-reset:lz}
li.cstep{counter-increment:lz}
li.cstep h3 a{display:inline-block}
li.cstep h3 a::after{content:'';position:absolute;inset:0}
li.cstep{position:relative}
li.cstep h3 a:hover,li.cstep h3 a:focus-visible{color:var(--red)}
li.cstep .cnum::before{content:'Station ' counter(lz,decimal-leading-zero)}

/* Karten auf dunkler Fläche — stand vorher sechsmal als Inline-Style im Markup. */
.sec.dark .card,.card.auf-dunkel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.sec.dark .card h3,.card.auf-dunkel h3{color:#fff}
.sec.dark .card p,.card.auf-dunkel p{color:rgba(255,255,255,.78)}
.sec.dark .card .cic,.card.auf-dunkel .cic{background:rgba(255,58,70,.18)}
.sec.dark .card .cic svg,.card.auf-dunkel .cic svg{stroke:var(--red-bright)}
.sec.dark .card:hover,.card.auf-dunkel:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28)}

/* Kostproben der Bereichs-Leitmotive: dieselben Bausteine, kleiner gesetzt. */
.probe{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:var(--line)}
.probe .pl{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g400);margin-bottom:var(--sp-2);display:block}
.sec.dark .probe,.scrolly .probe{border-top-color:rgba(255,255,255,.24)}
.sec.dark .probe .pl,.scrolly .probe .pl{color:rgba(255,255,255,.6)}

.zeilenstapel.klein{gap:5px}
.zeilenstapel.klein .zl{height:7px}
.zeilenstapel.klein .zl i{height:4px}
.zeilenstapel.klein .zl em{font-size:9.5px}
.probe .eckdaten{margin-top:0}
.herleitung.klein{padding:var(--sp-3);margin:0;background:var(--g50);color:var(--ink)}
.herleitung.klein .hz{font-size:clamp(14px,1.6vw,17px)}
.herleitung.klein .var{color:var(--ink)}
/* D-21, Nachtrag Lauf 11.1: Auf hellem Grund (Startseite) stand das Ergebnis in
   --red-bright, 3,3 : 1. Das dunklere Primärrot erreicht rund 5,5 : 1. */
.herleitung.klein .erg{color:var(--red)}
.herleitung.klein .rand{border-top-color:var(--g200)}
.herleitung.klein .rand .k{color:var(--teal-deep)}
.herleitung.klein .rand .t{color:var(--g600)}
.aktenkopf.klein{margin-bottom:0;padding:var(--sp-1) 0;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.aktenkopf.klein dd,.aktenkopf.klein .v{font-size:12.5px}

/* Der Claim — die einzige Sperrung der Website. */
.claim{font-family:var(--fd);font-weight:700;font-size:clamp(12px,1.4vw,15px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--red)}
.quote .claim{color:rgba(255,255,255,.72)}

/* ============================================================================
   46. BILDKÖPFE — richtungsgebundener Verlauf statt flächigem Schleier
   Der bisherige Verlauf fiel bei 32 % Höhe auf rgba(8,8,10,.16). Genau dort
   steht auf 1280x720 die H1 — weiß über hellem Himmel, rechnerisch unter 3:1
   und in der Praxis unlesbar. Neu: dunkel auf der Textseite, offen auf der
   Bildseite. Das ist zugleich die bessere Gestaltung, weil das Motiv sichtbar
   bleibt, statt gleichmäßig abgedunkelt zu werden.
   ============================================================================ */
.hero-scrim,.subhero-scrim{
  background:
    linear-gradient(180deg,rgba(6,7,10,.58) 0%,rgba(6,7,10,.22) 18%,
                    rgba(6,7,10,.34) 52%,rgba(6,7,10,.93) 100%),
    linear-gradient(96deg,rgba(6,7,10,.94) 0%,rgba(6,7,10,.80) 30%,
                    rgba(6,7,10,.34) 62%,rgba(6,7,10,.06) 88%,transparent 100%)}
.hero-scrim::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 78% at 8% 94%,rgba(204,0,25,.28),transparent 58%)}
.subhero-scrim::after{content:'';position:absolute;inset:0;
  background:radial-gradient(110% 70% at 6% 96%,rgba(204,0,25,.20),transparent 56%)}
/* Auf schmalen Bildschirmen liegt der Text über der ganzen Breite — dort muss
   der Verlauf flächig werden, sonst hilft die Richtung nichts. */
@media(max-width:900px){
  .hero-scrim,.subhero-scrim{
    background:linear-gradient(180deg,rgba(6,7,10,.66) 0%,rgba(6,7,10,.52) 30%,
                               rgba(6,7,10,.68) 62%,rgba(6,7,10,.95) 100%)}
}
.hero h1,.subhero h1{text-shadow:0 2px 28px rgba(0,0,0,.34)}
.hero-sub,.subhero .lead-p{text-shadow:0 1px 16px rgba(0,0,0,.4)}

/* Der Scroll-Hinweis stand mittig unten und lief in die Vertrauensmerkmale
   hinein. Er gehört an den Rand — dort stört er den Satz nicht. */
.scrollcue{left:auto;right:var(--gut);transform:none;bottom:var(--sp-3)}
@media(max-height:780px){.scrollcue{display:none}}

/* Der Scroll-Hinweis auf dem Handy.
   Bis 18.08.2026 war er unter 900 px ausgeblendet. Seit der Hero dort die
   ganze Flaeche fuellt, ist er genau da am wichtigsten: Ohne ihn sieht man
   einen dunklen Bildschirm und keinen Hinweis, dass es weitergeht.
   Er steht mittig statt rechts, weil er am Handy sonst am Rand verschwindet,
   und der Hero-Inhalt bekommt unten mehr Luft, damit die Linie nicht in die
   Hero-Marken laeuft. Diese Regeln stehen bewusst NACH der Regel darueber —
   Medienabfragen erhoehen die Spezifitaet nicht, die spaetere Regel gewinnt. */
@media(max-width:900px){
  .hero-inner{padding-bottom:11.5vh}
  .scrollcue{display:flex;left:50%;right:auto;transform:translateX(-50%);bottom:14px;gap:5px}
  .scrollcue .bar{height:20px}
  .scrollcue span{font-size:9px;letter-spacing:.2em}
}

/* Die Schiene ohne aktive Station: alle fünf Beschriftungen, kleiner gesetzt.
   Fünf leere Kreise sagen nichts. */
.lzs-st .pt i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-style:normal;font-size:8px;font-weight:600;letter-spacing:0;
  color:var(--g400);transition:color var(--t-base) var(--e-out)}
.lzs-st[aria-current] .pt i{color:#fff}
.lzs-st:hover .pt i,.lzs-st:focus-visible .pt i{color:var(--sig)}
.lzs[data-alle] .lzs-st,.lzs[data-alle] .lzs-st:last-child{flex:1 1 0;min-width:0;padding-right:var(--sp-2)}
.lzs[data-alle] .lzs-st .lb{display:block;font-size:12.5px;white-space:normal;
  overflow:hidden;text-overflow:ellipsis}
.lzs[data-alle] .lzs-st .lb small{color:var(--g400)}
.lzs-st{color:inherit}
.lzs-st:hover .lb,.lzs-st:focus-visible .lb{color:var(--sig)}
@media(max-width:900px){
  .lzs[data-alle] .lzs-st .lb small{display:none}
  .lzs[data-alle] .lzs-st .lb{font-size:11px}
}
@media(max-width:620px){
  .lzs .wrap{overflow-x:auto}
  .lzs-track{min-width:420px}
}

/* ============================================================================
   47. NACHTRÄGE AUS DER BEREICHSUMSETZUNG
   ============================================================================ */

/* .zustand hatte keinen Ruhezustand und stand nach .form-ok{display:none} —
   das Erfolgsband rechnete sich damit beim Laden als leere türkise Fläche auf.
   Sichtbar wird es erst, wenn app.js .show setzt. */
.zustand{display:none}
.zustand.show{display:flex}
/* Lauf 11.K: Bestätigung des Widerrufs (§ 356a BGB) zeigt die Angaben als Liste */
.zustand dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0}
.zustand dt{font-weight:600}
.zustand dd{margin:0;overflow-wrap:anywhere}
/* … danach verschwindet das ausgefüllte Formular (app.js setzt hidden; .form-group/.form-row/.btn haben eigenes display) */
.form-card .form-group[hidden],.form-card .form-row[hidden],.form-card .btn[hidden],.form-card .form-note[hidden]{display:none}

/* Die Porträtwand: ungleiche Grundlinien als Signatur des Bereichs, in dem die
   Ordnungssysteme aufhören. Der Versatz steht als Variable am Element, damit
   im Markup kein margin-Wert klebt. */
.portraetwand{align-items:flex-start}
.portraetwand .tmember{margin-top:var(--versatz,0)}
body[data-bereich="unternehmen"] .tbubble{width:168px;height:168px}
body[data-bereich="unternehmen"] .tmember{width:196px}
body[data-bereich="unternehmen"] .tname{font-size:17.5px}
@media(max-width:620px){
  body[data-bereich="unternehmen"] .tbubble{width:132px;height:132px}
  body[data-bereich="unternehmen"] .tmember{width:150px}
  .portraetwand .tmember{margin-top:0}   /* auf schmalen Geräten wirkt Versatz wie ein Fehler */
}

/* Die einzige Sperrung der Website. Als Klasse, damit sie nicht als
   Inline-Style in vier Dateien wandert. */
.gesperrt{letter-spacing:.34em;text-transform:uppercase;
  font-size:clamp(19px,2.6vw,32px);line-height:1.35;max-width:none}
h2.gesperrt,h3.gesperrt{font-weight:700}

/* Im Bereich Unternehmen gibt es keine Trennlinien — das ist die Signatur.
   Getrennt wird durch Abstand. */
body[data-bereich="unternehmen"] .trust,
body[data-bereich="unternehmen"] .press-item,
body[data-bereich="unternehmen"] .press-item:last-child,
body[data-bereich="unternehmen"] .feature{border-top:0;border-bottom:0}
body[data-bereich="unternehmen"] .press-item{padding:var(--sp-4) 0}

/* Fußnotentext — stand viermal als Inline-Style. */
.fussnote{font-size:13px;color:var(--g400);line-height:1.6;max-width:70ch}
.sec.dark .fussnote,.scrolly .fussnote{color:rgba(255,255,255,.6)}

/* Ein .clink, der als <button> gebraucht wird (Kontaktseite). */
button.clink,button.flink{background:none;border:0;padding:0;cursor:pointer;font:inherit}

/* Ein Bild-Slot kann auch die Fläche einer Bildkachel tragen. Ohne diese
   Regel müssten Kacheln bei den direkten <img> bleiben und damit außerhalb
   des Slot-Systems stehen. */
.tilecard>.slot{position:absolute;inset:0;z-index:-2;border-radius:0;aspect-ratio:auto;background:none}
.tilecard>.slot img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-base) var(--e-out)}
.tilecard:hover>.slot img{transform:scale(1.055)}
.tilecard>.slot[data-leer]{border:0;background:var(--navy)}
.tilecard>.slot[data-leer] .sl,.tilecard>.slot[data-leer] .sl-id{display:none}
.tilecard>.slot[data-leer] .motiv{color:#fff;opacity:.2}

/* Die Datenschrift als Auszeichnung in einer Karte. */
.card>.data{margin-bottom:var(--sp-2);display:block}

/* ============================================================================
   48. NACHTRÄGE AUS DER BEREICHSUMSETZUNG, ZWEITER TEIL
   ============================================================================ */

/* Ein Bild-Slot als Ebene im Scrollytelling — sonst bleibt unter dem Bild
   ein schwarzer Rand, weil der Slot sein eigenes Seitenverhältnis hält. */
.scrolly-layer .slot{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:none}
.scrolly-layer .slot picture,.scrolly-layer .slot img{width:100%;height:100%;object-fit:cover}
.scrolly-layer .slot[data-leer]{border:0;display:flex;align-items:flex-end}

/* Rot markiert nur noch die Handlung und das Ergebnis. Alles, was bloß
   „Struktur" bedeutet, trägt die Bereichsfarbe. */
.callout.sig{border-left-color:var(--sig);background:var(--sig-tint)}
.callout.sig .cl-t{color:var(--sig)}
body[data-bereich] .card .clink{color:var(--sig)}
body[data-bereich] .qa .ic::before,body[data-bereich] .qa .ic::after,
body[data-bereich] .cmod .cx::before,body[data-bereich] .cmod .cx::after,
body[data-bereich] .job .jx::before,body[data-bereich] .job .jx::after{background:var(--sig)}
body[data-bereich] .prose ul li::before,body[data-bereich] .feature .fbullets li::before{
  background:var(--sig)}

/* Aufzählungszeichen wirkten nur unterhalb von .feature; in einer Karte
   blieben die Standardpunkte stehen. */
:where(.fbullets){list-style:none;margin:0 0 var(--sp-3);padding:0}
:where(.fbullets) li{position:relative;padding-left:26px;font-size:16px;color:var(--g600);margin:9px 0}
:where(.fbullets) li::before{content:'';position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:2px;background:var(--sig)}

/* Dieselbe Aufzählung als Raster (E-046, „Ihr Mehrwert“ auf der Beschaffung):
   3 / 2 / 1 Spalte. Der fette Kurztitel steht in eigener Zeile, der Erklärsatz
   darunter; der Signalstrich oben ersetzt das Quadrat, damit der Text auf dem
   Handy die volle Breite bekommt. */
.fbullets.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3) var(--sp-4);margin:0}
.fbullets.raster li{margin:0;padding:var(--sp-2) 0 0;border-top:1px solid var(--g200);
  font-size:15.5px;line-height:1.55}
.fbullets.raster li::before{top:-1px;width:var(--sp-4);height:2px;border-radius:0}
.fbullets.raster li b{display:block;font-family:var(--fd);font-weight:800;font-size:var(--fs-base);
  letter-spacing:-.02em;line-height:1.35;color:var(--ink);margin-bottom:4px}
@media(max-width:900px){.fbullets.raster{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
  .fbullets.raster{grid-template-columns:1fr;gap:var(--sp-2)}
  .fbullets.raster li{padding-top:var(--sp-1)}
}

/* Leseblock innerhalb einer bestehenden .wrap — ohne die Innenabstände
   ein zweites Mal zu setzen. */
.lesetext{max-width:var(--w-text)}
.lesetext.mitte{margin-left:auto;margin-right:auto}

/* Fachgrafiken auf schmalen Geräten: lieber seitlich scrollen als
   9,5-px-Beschriftungen auf 4,5 px herunterskalieren. */
@media(max-width:620px){
  .fgrafik{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fgrafik svg{min-width:520px}
  .fgrafik figcaption{position:sticky;left:0}
}

/* ============================================================================
   49. NACHTRÄGE AUS DER BEREICHSUMSETZUNG, DRITTER TEIL
   Die Bereichs-Subagents haben gemeldet, wo das Fundament sie nicht getragen
   hat. Der wichtigste Punkt: Rot ließ sich in mehreren Modulen nicht
   abschalten — die Regel „Rot markiert nur eine Sache je Bildschirmhöhe"
   war damit gar nicht durchsetzbar.
   ============================================================================ */

/* --- Rot neutralisieren, wo es nur Struktur bedeutet ----------------------
   In einem Bereich mit eigener Signaturfarbe trägt Rot ausschließlich die
   anstehende Handlung (Schaltfläche) und das Ergebnis einer Rechnung.
   Alles Übrige läuft über --sig. */
body[data-bereich] .tl::before{border-color:var(--sig)}
body[data-bereich] .tl .ty{color:var(--sig)}
body[data-bereich] .pstep.in .pnum{color:var(--sig)}
body[data-bereich] .cmod .cph{color:var(--sig)}
body[data-bereich] .press-item .pcat{background:var(--sig-tint);color:var(--sig)}
body[data-bereich] .legal li::before,body[data-bereich] .legal a{color:var(--sig)}
body[data-bereich] .callout{border-left-color:var(--sig)}
body[data-bereich] .callout .cl-t{color:var(--sig)}
body[data-bereich] .card .cic{background:var(--sig-tint)}
body[data-bereich] .card .cic svg{stroke:var(--sig)}
body[data-bereich] .arttoc a.on{color:var(--sig);border-color:var(--sig)}
body[data-bereich] .prose ol li::before{color:var(--sig)}
/* Der Eyebrow im Scrollytelling erzwang --red-bright und schlug damit
   .eyebrow.on-dark. Auf dunklem Grund gilt jetzt wieder die stille Fassung. */
.scrolly-head .eyebrow{color:rgba(255,255,255,.62)}
.scrolly-head .eyebrow.sig{color:var(--red-bright)}
/* Ausnahmen — hier bleibt Rot, weil es die Handlung bzw. das Ergebnis ist: */
body[data-bereich] .btn-red,body[data-bereich] .nav-cta,
body[data-bereich] .sprice,
body[data-bereich] .lzs-st .lb small{color:inherit}
/* D-21 (Lauf 11.1): Das Formel-Ergebnis stand hier bis dahin mit in der Liste
   oben und erbte --ink-soft auf dem --ink-Grund der Herleitung: 1,67 : 1.
   Jetzt hell, das Rot bleibt als Summenstrich darunter (Demo D-21). */
body[data-bereich] .herleitung .erg{color:var(--white);text-decoration:underline;
  text-decoration-color:var(--red-bright);text-decoration-thickness:3px;text-underline-offset:.22em}
@media print{body[data-bereich] .herleitung .erg{color:#000}}
body[data-bereich] .btn-red{background:var(--red);color:#fff}

/* --- Tabellen dürfen breiter sein als der Fließtext ---------------------- */
.tablescroll table,table.breit{max-width:none;width:100%}
.prose th.data,.prose td.data{font-family:var(--fm);font-size:var(--data);
  letter-spacing:var(--data-ls);text-transform:uppercase;font-weight:600;color:var(--g400)}

/* --- Eine neutrale Zeilenliste. Bisher gab es dafür nur .press-item, das
   für Pressemitteilungen gedacht ist und deshalb zweckentfremdet wurde. --- */
.zeilenliste{display:flex;flex-direction:column}
.zeile{display:grid;grid-template-columns:minmax(88px,140px) 1fr auto;gap:var(--sp-3);
  align-items:center;padding:var(--sp-3) 0;border-top:var(--line);
  transition:background var(--t-fast) var(--e-out),padding var(--t-fast) var(--e-out)}
.zeilenliste .zeile:last-child{border-bottom:var(--line)}
.zeile .zk{font-family:var(--fm);font-size:var(--data);letter-spacing:var(--data-ls);
  text-transform:uppercase;font-weight:600;color:var(--g400)}
.zeile .zt{font-family:var(--fd);font-weight:700;font-size:17px;letter-spacing:-.01em}
.zeile .zt span{display:block;font-family:var(--fb);font-weight:300;font-size:14.5px;
  color:var(--g600);line-height:1.5;margin-top:3px}
.zeile .zp{color:var(--sig);flex:none;display:inline-flex;align-items:center}
.zeile .zp svg{width:16px;height:16px;transition:transform var(--t-base) var(--e-out)}
a.zeile:hover,a.zeile:focus-visible{background:var(--sig-tint);
  padding-left:var(--sp-2);padding-right:var(--sp-2)}
a.zeile:hover .zp svg,a.zeile:focus-visible .zp svg{transform:translateX(5px)}
@media(max-width:620px){
  .zeile{grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-2)}
  .zeile .zk{grid-column:1/-1}
}
/* Im Bereich Unternehmen gibt es keine Linien — auch hier nicht. */
body[data-bereich="unternehmen"] .zeile,
body[data-bereich="unternehmen"] .zeilenliste .zeile:last-child{border:0;padding:var(--sp-2) 0}

/* --- Ein Slot als Ebene im Scrollytelling, auch als direktes Kind --------- */
.scrolly-media>.slot{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;
  border:0;background:none}

/* --- .bleed-r blieb eine Gutter-Breite vor dem Fensterrand stehen --------- */
.bleed-r{margin-right:calc((100vw - min(var(--maxw),100vw)) / -2 - var(--gut))}
.bleed-l{margin-left:calc((100vw - min(var(--maxw),100vw)) / -2 - var(--gut))}
.slot.bleed-r{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.slot.bleed-l{border-radius:0 var(--r-lg) var(--r-lg) 0}

/* --- .sec-head als Rasterspalte braucht seinen Basisabstand nicht --------- */
:where(.g-7-5,.g-5-7,.g-8-4,.g-4-8)>.sec-head{margin-bottom:0}
.sec-head.knapp{margin-bottom:var(--sp-3)}

/* --- Aus dem Bereich Akademie gemeldet ----------------------------------- */

/* Quellen- und Standhinweise. Stand achtmal als Inline-Style, weil keine
   Klasse das leistete und der Hinweis sonst wie Fließtext wirkt. */
.kleingedruckt{font-size:13.5px;color:var(--g500);line-height:1.6;max-width:70ch}
.sec.dark .kleingedruckt,.scrolly .kleingedruckt{color:rgba(255,255,255,.66)}

/* Die Lupe im Suchfeld positionierte sich gegen den Block inklusive Label. */
.fb-feld{position:relative}

/* Der typografische Sondermoment der Akademie war nur innerhalb von .semrow,
   .pcard und .bookbar zu haben — im Seminarkopf also nicht groß setzbar. */
.preis{font-family:var(--fd);font-weight:900;letter-spacing:-.03em;line-height:1;
  font-size:clamp(30px,4vw,52px);font-variant-numeric:tabular-nums;display:block}
.preis .u,.preis small{display:block;font-family:var(--fm);font-weight:600;
  font-size:var(--data);letter-spacing:var(--data-ls);text-transform:uppercase;
  color:var(--g400);margin-top:9px}

/* Die Kopfform der Akademie hatte als einzige keinen eigenen Haken. Die
   Eckdaten-Leiste bekommt eine ruhige Grundfläche, auf der sie weiß absetzt. */
.kopf--eckdaten{background:linear-gradient(180deg,var(--white) 0%,var(--sig-tint) 100%)}

/* Der Sektionsrhythmus der Akademie wird durch eine Spurlinie getrennt,
   nicht durch einen Hintergrundwechsel — so steht es im Gestaltungsplan. */
body[data-bereich="akademie"] main>.sec+.sec::before{content:'';display:block;
  height:1px;background:repeating-linear-gradient(90deg,var(--g200) 0 8px,transparent 8px 14px);
  margin-bottom:var(--sec-sm);margin-top:calc(var(--sec-sm) * -1)}

/* Eine Scrollytelling-Ebene ohne Foto: statt schwarzer Fläche das
   Bereichs-Leitmotiv. */
.scrolly-layer.ohne-bild{background:linear-gradient(150deg,#161a24,#0c0f16)}
.scrolly-layer.ohne-bild::after{background:none}
.scrolly-layer.ohne-bild .motiv{position:absolute;inset:12%;color:var(--sig);opacity:.3}
.scrolly-layer.ohne-bild .motiv svg{width:100%;height:100%}

/* --- Aus dem Bereich Wissen gemeldet ------------------------------------- */

/* .herleitung und .fgrafik setzten `margin:… 0` als Kurzform und schlugen
   damit die seitlichen Ausbrüche, weil sie im Stylesheet später stehen.
   margin-block statt margin lässt die Ausbrüche wirken. */
.herleitung{margin:0;margin-block:var(--sp-4)}
.fgrafik{margin:0;margin-block:var(--sp-4)}

/* Sobald eine Sprungmarkennavigation existiert, verdeckt sie die oberen
   ~25 px des klebenden Inhaltsverzeichnisses. */
body:has(.subnav) .arttoc,
body:has(.subnav) .massband{top:calc(var(--nav-h) + 46px + var(--sp-2))}
body:has(.subnav){scroll-padding-top:calc(var(--nav-h) + 46px + var(--sp-2))}
body:has(.subnav) .prose h2{scroll-margin-top:calc(var(--nav-h) + 46px + var(--sp-2))}

/* Das Inhaltsverzeichnis-Label ist jetzt eine Beschriftung statt einer
   Überschrift — der Abstand aus .arttoc h4 fehlte danach. */
.arttoc>.data{margin-bottom:14px}

/* ============================================================================
   50. BEFUNDE DER TECHNISCHEN ABNAHME
   ============================================================================ */

/* Im Ausdruck blieben `.seq`- und `.reveal`-Elemente auf opacity:0 stehen:
   Wer eine Seite druckt, ohne sie vorher ganz gescrollt zu haben, bekam
   leere Abschnitte. `*{animation:none}` hilft dagegen nicht, weil der
   Ausgangszustand keine Animation ist, sondern eine Deklaration. */
@media print{
  .js .seq>*,.js .seq.in .stagger>*,.reveal,.fig,.pstep,.lni,.statement .w,
  .herleitung .tm,.herleitung .rand div{
    opacity:1!important;transform:none!important;visibility:visible!important}
  .ln{overflow:visible!important}
  .zeilenstapel .zl i{width:100%!important}
  .slot[data-leer]{min-height:0;aspect-ratio:auto}
}

/* Reduced Motion erfasste die Seitenübergänge nicht: `*` matcht keine
   ::view-transition-Pseudoelemente, und der zweite Block nahm nur die
   benannten Gruppen zurück. */
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-image-pair(*),
  ::view-transition-old(*),::view-transition-new(*){
    animation:none!important;mix-blend-mode:normal!important}
}

/* Die feste Buchungsleiste am unteren Rand konnte ein per Tastatur
   angesteuertes Element verdecken — es gab nur scroll-padding-top.
   Lauf 11.K (E-03): an html statt body — scroll-padding wirkt nur am Wurzelelement
   (vgl. FB-046). Bei geringer Fensterhöhe (starke Vergrößerung, Handy quer) entfällt
   die Leiste: Sie wiederholt nur den Knopf aus dem Kopf und belegte sonst bis zu
   drei Viertel des Fensters. */
html:has(.bookbar){scroll-padding-bottom:96px}
@media(max-height:500px){.bookbar{display:none}}

/* Sicherheitsnetz gegen horizontalen Ueberlauf: 1fr ist minmax(auto,1fr),
   eine breite Tabelle oder ein langes Wort sprengt damit jede Rasterspalte. */
:where(.grid-2,.grid-3,.g-7-5,.g-5-7,.g-8-4,.g-4-8,.artgrid,.contact-grid,
       .scrolly-grid,.rgrid,.price-grid,.modgrid,.foot-top)>*{min-width:0}
.tablescroll{max-width:100%}

/* ============================================================================
   51. BEFUNDE DER GESTALTERISCHEN ABNAHME
   ============================================================================ */

/* --- S-7: Die Platzhalter lasen sich als Ladezustand, nicht als Absicht ----
   Waagerechte Balken in der Fläche sind exakt das Muster, das jedes Framework
   als Skeleton-Loader benutzt. Und die vierzeilige Motivbeschreibung in
   Versal-Monospace wirkte wie ein Zeichensatzfehler.
   Neu: das Leitmotiv groß und angeschnitten als Grafik, die Motivzeile in
   gemischter Schreibweise, einzeilig. */
.slot[data-leer]{background:var(--sig-tint);border:1px solid var(--g200);
  border-style:solid;display:flex;align-items:flex-end;padding:var(--sp-3)}
.slot[data-leer]::after{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(190deg,transparent 34%,var(--sig-tint) 92%)}
.slot[data-leer] .motiv{position:absolute;inset:-10% -14% auto -14%;height:88%;
  z-index:0;color:var(--sig);opacity:.26}
.slot[data-leer] .motiv svg{width:100%;height:100%}
.slot[data-leer] .sl{position:relative;z-index:1;font-family:var(--fb);
  font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--g600);line-height:1.45;max-width:34ch}
.slot[data-leer] .sl b{display:block;font-family:var(--fm);font-weight:600;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g400);margin-bottom:6px}
.slot .sl-id{background:rgba(255,255,255,.82);color:var(--g400);
  font-size:9px;letter-spacing:.08em;opacity:.7}
@media(max-width:620px){.slot[data-leer] .sl{font-size:13px}}

/* --- P-6: Die Unternehmens-Signatur war nicht angekommen -------------------
   28 px Ausbruch liest sich als Ausrichtungsfehler, nicht als Absicht. Und
   die Rollen waren rot, die Namen schwarz — genau umgekehrt zur eigenen
   Regel „Rot nur auf Namen". */
.kopf--offen h1{margin-left:calc(var(--sp-6) * -1)}
@media(max-width:1400px){.kopf--offen h1{margin-left:calc(var(--sp-4) * -1)}}
@media(max-width:900px){.kopf--offen h1{margin-left:0}}
body[data-bereich="unternehmen"] .trole{color:var(--g500);font-weight:500}
body[data-bereich="unternehmen"] .tname{color:var(--red)}
body[data-bereich="unternehmen"] .tmodal-role{color:var(--g500)}

/* --- P-3: Der Scroll-Hinweis lief endlos. Es darf genau eine Dauerbewegung
   geben, und das ist der Ringatem der Schiene. Der Hinweis ist eine einmalige
   Aufforderung — nach dreimal hat sie ihren Zweck erfüllt. */
/* Der Hinweis lief dreimal, also rund acht Sekunden, und stand danach still.
   Seit der Hero die ganze Flaeche fuellt, ist er die einzige Ansage, dass es
   weitergeht — er soll laufen, solange der Besucher oben steht. Beim ersten
   Scrollen blendet ihn app.js ohnehin aus, eine Dauerbewegung bleibt also
   niemandem. Bei „Bewegung reduzieren" steht er still, dann tragen Linie und
   Beschriftung den Hinweis allein. */
.scrollcue .bar{animation-iteration-count:infinite}

/* --- P-7: Silbentrennung mitten im wichtigsten Suchbegriff ----------------
   „Den Stundenver-rechnungssatz berechnen." bei 1440 px, obwohl rechts
   280 px frei sind. In Displaygrößen trennt man nicht automatisch. */
@media(min-width:900px){
  h1,h2,.kopf h1,.hero h1,.subhero h1,.statement p,.quote p{hyphens:manual;-webkit-hyphens:manual}
}

/* --- P-12: Der rote Dekorkreis war nicht entfernt, er ist umgezogen -------
   Aus dem alten .pagehead in den Kopf der Download-Kacheln. */
.dlcard .dltop::after{display:none}
.dlcard .dltop{background:var(--navy);border-bottom:2px solid var(--red)}

/* --- P-9: Vier Seiten trugen weiter den alten Kopf samt Dekorkreis --------
   Darunter kontakt.html — das Ziel fast jedes CTA der Website. */
.pagehead::after{display:none}
.pagehead{background:var(--white);border-bottom:1px solid var(--ink)}
.pagehead.plain{border-bottom:1px solid var(--ink)}

/* --- P-11: Die Messskala wurde zum Ornament ------------------------------
   Auf Seiten, auf denen nichts gemessen wird, hat sie nichts zu suchen. */
.kopf--kennblatt.ohne-skala .kennskala{display:none}

/* --- S-8: Das Zitat trägt allein. -----------------------------------------
   Das bisherige Hintergrundbild war generische Digitalisierungs-Stockware
   ohne Bezug zum Gewerk — und die Website verspricht auf e-learning.html
   wörtlich das Gegenteil. Die Fläche macht die Aussage jetzt selbst. */
.quote--ohne-bild{background:var(--navy)}
.quote--ohne-bild::before{background:
  radial-gradient(90% 120% at 8% 0%,rgba(204,0,25,.34),transparent 62%),
  linear-gradient(160deg,#1b2439 0%,#0d1220 100%)}
.quote--ohne-bild .mark{color:var(--red-bright)}

/* --- P-10: Eine Zeitangabe aus zwei Wörtern braucht kein Drittel der
   Seitenbreite. `.g-4-8` erzeugte dort über rund 900 px Scrollhöhe eine
   vollständig leere linke Hälfte — das ist kein Weißraum, das ist eine
   Rasterspalte, die niemand gefüllt hat. */
.g-marge{display:grid;grid-template-columns:minmax(110px,164px) minmax(0,1fr);
  gap:var(--sp-3) var(--sp-4);align-items:baseline}
.g-marge>.data{padding-top:.35em}
@media(max-width:760px){
  .g-marge{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
}

/* ============================================================================
   53. BEFUNDE DER OPTISCHEN ABNAHME
   ============================================================================ */

/* --- Die Schiene verteilte ungleich ---------------------------------------
   Die aktive Station bekam die 2,6-fache Segmentbreite, weil ihre Beschriftung
   im Flex-Fluss stand: gemessen 187/187/486/187 px. Die Beschriftung liegt
   jetzt über der Schiene statt in ihr — alle fünf Segmente sind gleich. */
.lzs-st,.lzs-st:last-child,.lzs-st[aria-current]{flex:1 1 0}
.lzs-st:last-child{flex:0 0 auto}
.lzs-st[aria-current] .lb{position:absolute;left:27px;top:50%;transform:translateY(-50%);
  white-space:nowrap;background:var(--white);padding:2px var(--sp-2) 2px 0;z-index:3}
.lzs-st:last-child[aria-current] .lb{left:auto;right:27px;text-align:right;
  padding:2px 0 2px var(--sp-2)}
@media(max-width:760px){
  .lzs-st[aria-current] .lb{position:static;transform:none;background:none;padding:0}
  .lzs-st[aria-current]{flex:2.2 1 0}
}

/* --- Waagerecht scrollende Bereiche brauchen eine Affordanz ---------------
   Sekundärnavigation, Schiene, Fachgrafiken und breite Tabellen scrollen quer.
   Der Balken war ausgeblendet — der Leser sah ein abgeschnittenes Schema und
   keinen Hinweis, dass rechts noch etwas kommt. Statt ihn zu verstecken:
   schmal und in der Bereichsfarbe. */
.subnav .wrap,.lzs .wrap,.fgrafik,.tablescroll{
  scrollbar-width:thin;scrollbar-color:var(--g250) transparent}
.subnav .wrap::-webkit-scrollbar,.lzs .wrap::-webkit-scrollbar,
.fgrafik::-webkit-scrollbar,.tablescroll::-webkit-scrollbar{display:block;height:5px}
.subnav .wrap::-webkit-scrollbar-thumb,.lzs .wrap::-webkit-scrollbar-thumb,
.fgrafik::-webkit-scrollbar-thumb,.tablescroll::-webkit-scrollbar-thumb{
  background:var(--g250);border-radius:3px}
.subnav .wrap::-webkit-scrollbar-track,.lzs .wrap::-webkit-scrollbar-track,
.fgrafik::-webkit-scrollbar-track,.tablescroll::-webkit-scrollbar-track{background:transparent}
/* Zusätzlich ein weicher Auslauf am rechten Rand: er sagt „hier geht es
   weiter", bevor jemand den Balken sucht. */
@media(max-width:900px){
  .subnav .wrap,.lzs .wrap{
    -webkit-mask-image:linear-gradient(90deg,#000 0 88%,transparent);
    mask-image:linear-gradient(90deg,#000 0 88%,transparent)}
  .fgrafik,.tablescroll{position:relative}
  .fgrafik::after,.tablescroll::after{content:'seitlich scrollen';position:sticky;
    left:0;bottom:0;display:block;width:max-content;
    font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--g400);padding-top:6px}
}

/* --- Consulting und Wissen öffneten mit demselben Bauteil -----------------
   Beide zeigten eine Trennlinie, darunter eine Reihe aus Monospace-Label über
   fettem Wert. Der Unterschied lag in zwei Details an einem identischen
   Element — das trägt nicht bis in die Seitenmitte.

   Der Aktenkopf bleibt, wie er ist: luftig, über die volle Breite, zwischen
   zwei Linien. Das Kennblatt wird zu dem, was sein Name sagt — ein Blatt:
   ein abgesetzter Block mit Rahmen, die Messskala an seiner Unterkante, die
   Werte in einem dichten Raster. Zwei verschiedene Dokumentarten, nicht
   zweimal dieselbe Kopfzeile. */
.kopf--kennblatt .kennzeile{
  display:grid;grid-auto-flow:column;grid-auto-columns:max-content;
  gap:0;border:1px solid var(--ink);border-radius:var(--r-sm);
  padding:0;margin-bottom:var(--sp-4);max-width:max-content;
  background:var(--white);overflow:hidden}
.kopf--kennblatt .kennzeile>div{padding:var(--sp-2) var(--sp-3);
  border-right:1px solid var(--g200);gap:3px}
.kopf--kennblatt .kennzeile>div:last-child{border-right:0}
.kopf--kennblatt .kennzeile .k{font-size:9px;letter-spacing:.18em;color:var(--g400)}
.kopf--kennblatt .kennzeile .v{font-family:var(--fm);font-weight:600;font-size:13.5px;
  letter-spacing:.02em;text-transform:none}
.kopf--kennblatt .kennzeile .v.einheit{color:var(--teal-deep)}
/* Die Skala sitzt jetzt an der Unterkante des Blattes, nicht als eigene
   Zeile über allem — sie gehört zum Messgerät, nicht zur Seite. */
.kopf--kennblatt .kennskala{max-width:max-content;min-width:min(520px,100%);
  height:9px;margin:0 0 var(--sp-4);
  background-size:calc(100% / 32) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0 3px,#000 3px);
  mask-image:linear-gradient(180deg,transparent 0 3px,#000 3px)}
@media(max-width:760px){
  .kopf--kennblatt .kennzeile{max-width:none;grid-auto-flow:row;
    grid-template-columns:1fr 1fr;grid-auto-columns:auto}
  .kopf--kennblatt .kennzeile>div:nth-child(2n){border-right:0}
  .kopf--kennblatt .kennzeile>div{border-bottom:1px solid var(--g200)}
}

/* Im Bereich Wissen ist --sig Graphit — der hervorgehobene Halbsatz der H1
   war damit unsichtbar. Er bekommt den Ton der Messwerte: Türkis.

   Damit sind es DREI Akzentfarben, nicht fünf: Rot (Beschaffung, Unternehmen,
   Startseite), Navy (Consulting), Türkis (Akademie, Wissen). Fünf verschiedene
   Töne wären fünf Behauptungen — die Palette hat sie nicht, und eine erfundene
   vierte oder fünfte Farbe verstößt gegen das Design-System. Die Bereiche
   unterscheiden sich über Kopfform, Leitmotiv und Rhythmus; die Farbe ist die
   Zugabe, nicht der Träger. */
body[data-bereich="wissen"] .kopf h1 b,
body[data-bereich="wissen"] .prose h2 b{color:var(--teal-deep)}
.kopf--kennblatt .kennskala{margin:calc(var(--sp-1) * -1) 0 var(--sp-3)}

/* ============================================================================
   52. DIE PASTELLKACHEL UNTER DEM ICON
   Befund G-2 der gestalterischen Abnahme: „Die pastellfarbenen Icon-Quadrate
   (48×48, border-radius 13, Strichicon) sind der meistgesehene Baustein im
   heutigen Web." Das stimmt — und es ist genau die Sorte Element, die eine
   Seite austauschbar macht, ohne dass jemand sagen könnte, warum.

   Statt sie zu streichen, bekommen sie die Aufgabe, die sie im Gewerk hätten:
   Sie werden zur Positionsmarke am linken Rand der Karte, wie eine Kennung auf
   einem Formular. Kein Kasten, keine Pastellfläche — eine Linie und ein Zeichen.
   ============================================================================ */
.card .cic,.modchip .mi,
body[data-bereich] .card .cic,body[data-bereich] .modchip .mi{
  display:block;width:46px;height:auto;background:none;border-radius:0;
  margin-bottom:var(--sp-2);position:relative;padding-bottom:var(--sp-2);flex:none}
.card .cic::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:2px;
  background:var(--sig);border-radius:2px;
  transition:width var(--t-base) var(--e-out)}
.card:hover .cic::after,.card:focus-visible .cic::after{width:44px}
.card .cic svg,.modchip .mi svg,
body[data-bereich] .card .cic svg,body[data-bereich] .modchip .mi svg{
  width:24px;height:24px;stroke:var(--sig);stroke-width:1.7}
.card.teal .cic svg{stroke:var(--teal-deep)}
.card.teal .cic::after{background:var(--teal-deep)}
/* Lauf 11.H (FB-006): eine Gruppe, die Graphit und Türkis mischte, trägt einheitlich Rot (Festlegung „gemischte Gruppen rot“) */
.card.rot .cic svg,body[data-bereich] .card.rot .cic svg{stroke:var(--red)}
.card.rot .cic::after{background:var(--red)}
.sec.dark .card .cic,.card.auf-dunkel .cic{background:none}
.sec.dark .card .cic svg,.card.auf-dunkel .cic svg{stroke:var(--red-bright)}
.sec.dark .card .cic::after,.card.auf-dunkel .cic::after{background:var(--red-bright)}
/* Die Modulkarte hat keine Positionsmarke: kein Strich, kein Abstand darunter.
   Bis Paket 2 (E-056) verlor diese Zeile gegen body[data-bereich] … oben — das Icon
   stand 46 px breit mit 32 px Luft darunter und machte jede Karte höher. */
.modchip .mi,body[data-bereich] .modchip .mi{padding-bottom:0;margin-bottom:0;flex:none;width:24px}
.modgrid.liste .mi,body[data-bereich] .modgrid.liste .mi{width:20px;margin-top:0}
/* Als Inline-Element brachte das SVG die Zeilenhöhe des Fließtexts mit (27 px statt 24). */
.modchip .mi svg{display:block}
.modgrid.liste .mi svg,body[data-bereich] .modgrid.liste .mi svg{width:20px;height:20px}

/* Der Abspielknopf und die Info-Kacheln behalten ihre Fläche — dort ist sie
   Bedienfläche und keine Dekoration. */
.player .play,.info-row .il{border-radius:50%}
.info-row .il{border-radius:11px}

/* ============================================================================
   54. ZWEITE PRÜFRUNDE
   ============================================================================ */

/* --- S-5: Vier Bildunterschriften lagen deckungsgleich über den
   Stationslabels des Scrollytellings. Im Bildstapel trägt die Station den
   Namen, nicht der Platzhalter. */
.scrolly-layer .slot[data-leer] .sl,
.scrolly-layer .slot .sl-id{display:none}
.scrolly-layer .slot[data-leer] .motiv{opacity:.34;color:#fff}

/* --- P-1: Der Consulting-Akzent war unsichtbar ---------------------------
   #141D30 auf #111113 ergibt 1,08:1 — auf vier Seiten war die Hervorhebung
   im H1 physikalisch nicht wahrnehmbar. Navy bleibt die Bereichsfarbe für
   Schienen, Marken und Tabellenköpfe; für Text auf Weiß gibt es einen
   aufgehellten Ton derselben Familie. */
body[data-bereich="consulting"]{--sig-text:#31456E}
body[data-bereich="consulting"] .kopf h1 b,
body[data-bereich="consulting"] .prose h2 b{color:var(--sig-text)}

/* --- P-3: Die H1 im Bereich Wissen brach mitten im wichtigsten Suchbegriff.
   Nicht die Trennregel war falsch, sondern die Schriftgröße: bei 92 px ist
   „Stundenverrechnungssatz" breiter als jede Spalte. Ein Datenblatt setzt
   ohnehin kleiner. */
body[data-bereich="wissen"] .kopf h1{font-size:clamp(32px,4.4vw,62px)}

/* --- P-7: Zwei zentrierte Sektionen in einem durchgehend linksbündigen
   System — und ausgerechnet die zwei, die in jedem Baukasten zentriert sind. */
.team-grid{justify-content:flex-start}
.sec .sec-head.center{margin-left:0;text-align:left}
.sec .sec-head.center p{margin-left:0}

/* --- G-2: Das Schienenlabel brach als „LEBENS-/ZYKLUS" um. Der weiche
   Trennstrich tut, was er soll — die Spalte war zu schmal. */
.lzs-titel{max-width:none;white-space:nowrap}
@media(max-width:900px){.lzs-titel{display:none}}

/* --- G-4: Das einzige Foto der Website lag auf dem Handy unter einem so
   dichten Verlauf, dass nur noch ein grauer Farbverlauf übrig blieb. */
@media(max-width:900px){
  .hero-scrim,.subhero-scrim{
    background:linear-gradient(180deg,rgba(6,7,10,.52) 0%,rgba(6,7,10,.30) 26%,
                               rgba(6,7,10,.56) 58%,rgba(6,7,10,.93) 100%)}
}

/* --- G-5: Primär- und Sekundärschaltfläche standen auf dem Handy mit 244
   und 251 px untereinander — nah genug, dass es wie ein Fehler aussieht. */
@media(max-width:620px){
  .btnrow{flex-direction:column;align-items:stretch}
  .btnrow .btn{width:100%}
  .cta .btnrow .btn{width:100%}
}

/* --- P-4: Dreizehn Filterknöpfe für sechs Seminare füllten auf dem Handy
   einen ganzen Bildschirm, bevor das erste Ergebnis erschien. Die Facetten
   laufen dort jetzt in einer Zeile statt über sechs. */
@media(max-width:620px){
  .filterbar .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    scrollbar-width:thin;scrollbar-color:var(--g250) transparent}
  .filterbar .chips .chip{flex:none}
  .fb-row{gap:var(--sp-2)}
}

/* --- P-10 (Attrappe „Vorschau folgt“) entfällt seit Lauf 11.3M: das Video ist da,
   der rote Abspielknopf hält jetzt, was er verspricht. Hover wie oben: Farbe und die
   Ringwelle, kein Anheben über 4 px hinaus (S-2). */
.player .play:hover{transform:translateX(-50%);background:var(--red-dark)}

/* --- P-8: Die Porträts öffnen ein Profil, sagten das aber nur im Fließtext
   („Klicken Sie auf eine Person …"). Eine Bedienanleitung im Text heißt, dass
   die Affordanz fehlt. Jetzt zeigt das Porträt selbst, dass es sich öffnen
   lässt — und der Satz darf stehen bleiben, er stört nicht. */
.tmember .tbubble::before{content:'+';position:absolute;right:6px;bottom:6px;z-index:2;
  width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;
  font-family:var(--fd);font-weight:700;font-size:15px;line-height:26px;text-align:center;
  opacity:0;transform:scale(.7);
  transition:opacity var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-snap)}
.tmember:hover .tbubble::before,.tmember:focus-visible .tbubble::before{opacity:1;transform:none}
@media(hover:none){.tmember .tbubble::before{opacity:1;transform:none}}

/* --- Der Platzhalter soll als System erkennbar sein, nicht als Lücke -------
   22 Bildplätze sind offen. Wer das sieht, soll „hier ist ein dokumentierter
   Platz, der auf sein Foto wartet" lesen und nicht „hier fehlt etwas". Die
   Priorität steht deshalb dabei — sie ist der Beleg, dass es eine Liste gibt
   (03-inhalte/bilder/BENOETIGTE-BILDER.md). */
.slot[data-leer] .sl b{color:var(--sig);opacity:.9}
.slot[data-leer]{border-color:var(--sig);border-style:dashed;
  border-width:1px;opacity:.96}

/* ============================================================================
   55. BEFUNDE DER OPTISCHEN ABNAHME, ZWEITE RUNDE
   ============================================================================ */

@media print{
  /* Der vorige Druck-Fix hob zwar die Deckkraft auf, aber `content-visibility:
     auto` lässt den Teilbaum gar nicht erst rendern — auf den Consulting-Seiten
     druckten „Häufige Fragen" und „Passt dazu" als weiße Fläche. Im Druck gibt
     es keinen Grund, Rendering zu sparen. */
  .sec.spaet{content-visibility:visible!important;contain-intrinsic-size:none!important}
  *{content-visibility:visible!important}

  /* Im Scrollytelling ist im Bild immer nur eine Ebene sichtbar. Auf Papier
     gibt es kein Scrollen — dort gehören alle Stationen untereinander. */
  .scrolly-grid{display:block}
  .scrolly-media{position:static;height:auto;box-shadow:none;background:none}
  .scrolly-layer{position:static;opacity:1!important;transform:none!important;
    page-break-inside:avoid;margin-bottom:6mm}
  .scrolly-layer img{max-height:60mm;width:auto}
  .scrolly-layer::after{display:none}
  .scrolly-layer .cap{position:static;color:#000;display:block;margin-top:2mm}
  .scrolly-step{min-height:0;border-left:0;padding-left:0;page-break-inside:avoid}
}

/* --- Die fixierte Buchungsleiste verdeckte dauerhaft die letzten 84 px --
   Der Prototyp-Hinweis im Fußbereich brach sichtbar ab. */
body:has(.bookbar){padding-bottom:92px}
@media(max-width:620px){body:has(.bookbar){padding-bottom:104px}}
@media print{body:has(.bookbar){padding-bottom:0}}

/* --- Der Knopf der Buchungsleiste ragte auf dem Handy über den Rand ------
   Titel, Preis und Knopf passten bei 375 px nicht nebeneinander: der Titel
   schrumpfte nicht unter sein längstes Wort („Projektkalkulator:in“), die
   rechte Gruppe gar nicht. Beim Projektkalkulator war „Format wählen“
   abgeschnitten, mit „Termin anfragen“ (E-061) auch beim Hybrid-Paket. Jetzt
   darf der Titel trennen, der Knopf wird kompakter; unter 360 px entfällt
   der Titel — er steht als Überschrift auf der Seite, Preis und Knopf nicht. */
@media(max-width:620px){
  .bookbar .bb-t{min-width:0;hyphens:auto;-webkit-hyphens:auto}
  .bookbar .bb-r{gap:12px}
  .bookbar .bb-r .btn{padding:12px 18px;font-size:14px}
}
/* Lauf 11.K (Paket 6): Mit dem Gesamtpreis („3.272,50 €“) und der Nettozeile ist die rechte Gruppe
   breiter — der Titel stand bei 390 px in vier Silben. Er entfällt jetzt schon unter 480 px. */
@media(max-width:480px){
  .bookbar .bb-t{display:none}
  .bookbar .bb-r{flex:1;justify-content:space-between}
}
/* „Warteliste anfragen“ (E-083) ist länger: der Titel stand bei 375 px in fünf
   getrennten Zeilen. Dann entfällt er schon unter 620 px, wie oben. */
@media(max-width:620px){
  .bookbar:has(a[href*="warteliste="]) .bb-t{display:none}
  .bookbar:has(a[href*="warteliste="]) .bb-r{flex:1;justify-content:space-between}
}

/* --- Die Silbentrennung war nur für h1 und h2 abgeschaltet ---------------
   In h3 stand weiter „Stundenverrech-/nungssatz" — mitten im wichtigsten
   Suchbegriff, und das auf der Startseite. */
@media(min-width:900px){
  h3,h4,.card h3,.semrow h3,.tilecard h3{hyphens:manual;-webkit-hyphens:manual}
}

/* --- `overflow-wrap:anywhere` trennte zu gierig ---------------------------
   „Pro-/jektkalkulator:i/n" — die letzte Zeile war ein einzelnes „n".
   `break-word` bricht nur, wenn es keine andere Möglichkeit gibt. */
@media(max-width:620px){
  .kopf h1,.hero h1,.subhero h1,.pagehead h1{overflow-wrap:break-word}
}

/* --- Die Treffer-Hervorhebung in der Suche zerriss Wörter ----------------
   „Seminare" las sich als „Seminar e", weil die Markierung seitlich polsterte. */
.suche-tr mark{padding:0;box-shadow:0 0 0 2px var(--red-light)}

/* ============================================================================
   BEREICHSWAHL — Startseite V3 (E-015)
   Drei Kacheln direkt unter dem Hero. Sie sind die Klammer über die drei
   Bereiche, die vorher die Lebenszyklus-Schiene geleistet hat (E-018).
   Keine neue Farbe: jede Kachel borgt sich über data-sig die Signaturfarbe
   ihres Bereichs aus demselben Satz Variablen, den body[data-bereich] setzt.
   ========================================================================== */
.bkachel[data-sig="beschaffung"]{
  --sig:var(--red); --sig-deep:var(--red-dark); --sig-soft:var(--red-light); --sig-tint:var(--red-tint);
}
.bkachel[data-sig="consulting"]{
  --sig:var(--navy); --sig-deep:#0B1220; --sig-soft:#D6DCE8; --sig-tint:#F2F4F8;
}
.bkachel[data-sig="akademie"]{
  --sig:var(--teal-deep); --sig-deep:#125555; --sig-soft:var(--teal-light); --sig-tint:#F0FBFB;
}

.bwahl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bkachel{background:#fff;border:var(--line);border-radius:var(--r-lg);padding:32px 28px;
  display:flex;flex-direction:column;color:inherit;position:relative;overflow:hidden;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),
             border-color var(--t-base) var(--e-out)}
/* Der Farbstreifen oben ist das einzige Signal, dass die drei Kacheln
   verschiedene Bereiche sind — bewusst schmal, damit die Startseite nicht
   dreifarbig wird. */
.bkachel::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--sig)}
.bkachel:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:transparent}
.bkachel .bic{width:48px;height:48px;border-radius:13px;background:var(--sig-tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none}
.bkachel .bic svg{width:24px;height:24px;stroke:var(--sig);fill:none;stroke-width:1.9}
.bkachel .bname{font-family:var(--fm);font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sig);margin-bottom:10px}
.bkachel h3{font-size:clamp(19px,1.5vw,22px);line-height:1.2;margin-bottom:12px}
.bkachel p{color:var(--g600);font-size:15.5px;line-height:1.55;margin-bottom:12px}
.bkachel .bgrenze{font-size:14px;color:var(--g500);border-left:2px solid var(--sig-soft);
  padding-left:12px;margin-bottom:22px}
.bkachel .clink{margin-top:auto;font-family:var(--fd);font-weight:700;font-size:14px;color:var(--sig);
  display:inline-flex;align-items:center;gap:7px}
.bkachel .clink svg{width:14px;height:14px;transition:transform var(--t-base) var(--ease)}
.bkachel:hover .clink svg{transform:translateX(4px)}
@media(max-width:900px){.bwahl-grid{grid-template-columns:1fr;gap:16px}}

/* --- Hero-Bildplatz (AP 14) ------------------------------------------------
   Der Hero trägt kein festes Seitenverhältnis, sondern füllt die Fläche.
   Solange kein Motiv freigegeben ist, bleibt der Hero auf seiner dunklen
   Grundfläche (.hero hat background:#0b0b0d); sichtbar bleibt nur das
   Leitmotiv und die Slot-Kennung. Sobald in _werkzeug/bildslots.py unter
   'start-hero' eine Datei steht, rendert derselbe Slot das Foto. */
.hero-media .slot{position:absolute;inset:0;height:100%;border-radius:0}
/* Mit echtem Foto (E-035) zeigte sich: das Seitenverhältnis des Slots (16/9)
   gewann gegen inset:0 und machte die Figur so breit wie Höhe × 16/9 — auf
   dem Handy 1675 px statt 375 px, sichtbar blieb nur die linke Bildkante.
   Der Hero füllt seine Fläche, das Verhältnis gilt hier nicht. */
.hero-media .slot{width:100%;aspect-ratio:auto}
.hero-media .slot[data-leer]{background:transparent;border:0}
.hero-media .slot[data-leer]::after{display:none}
.hero-media .slot[data-leer] .motiv{position:absolute;inset:0;height:100%;color:#fff;opacity:.10}
.hero-media .slot[data-leer] .sl{display:none}

/* ==========================================================================
   Termine — V4
   Ein Lehrgang ist eine Seite, Termine sind Daten. Diese Bauteile stellen die
   Daten aus _werkzeug/inhalte/seminare.json dar. Nichts davon steht im
   Seitentext, nichts davon wird von Hand gepflegt.
   ========================================================================== */

.tmehr{margin-top:var(--sp-2)}
.tmehr[hidden]{display:none}

.tnote{font-size:13.5px;color:var(--g500,#6E6E76);line-height:1.6;margin:16px 0 0;max-width:70ch}

/* Ohne kommenden Termin: "Nächster Termin in Planung" und der Weg zur
   Anfrage, Anliegen Akademie vorgewaehlt (E-048, E-042). */
.tleer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-3);background:var(--g50);border-radius:var(--r-md)}
.tleer p{margin:0;max-width:52ch;font-size:var(--fs-sm);line-height:1.55;color:var(--g600)}
.tleer b{font-family:var(--fd);font-weight:800;color:var(--ink)}

/* Programm der Akademie: die naechsten Termine je Lehrgang (E-048 Nr. 2).
   Ab vier Terminen blendet app.js alle ab dem dritten aus. */
.stermine{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.stermine li[hidden]{display:none}
.stermine-mehr,.semrow .sdates .sanfrage{display:inline-block;margin-top:var(--sp-1);padding:0;
  border:0;background:none;font-family:var(--fd);font-weight:700;font-size:var(--fs-xs);
  color:var(--red);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.stermine-mehr[hidden]{display:none}
/* Ausgebuchter Termin im Programm: Weg zur Warteliste in eigener Zeile (E-083) */
.stermine .sanfrage{display:table;margin-top:2px}
.stermine-mehr:hover,.semrow .sdates .sanfrage:hover{color:var(--red-dark)}


/* --- Waagerechter Überlauf bei 320 px (Auftrag 24.09.) ---------------------
   Alle 33 Seiten liefen um 26 px über: Im zweispaltigen Fußraster (je rund
   120 px) passten „Ausschreibungsbegleitung“, „Beschaffungsoptimierung“ und
   „Lieferantenmanagement“ nicht in ihre Spalte; bis 433 px stießen sie an die
   Nachbarspalte. Die Linktexte sind jetzt an der Wortfuge trennbar
   (fuss_trennbar() in bauen.py). Unter 340 px reicht auch das nicht für die
   E-Mail-Adresse — dort einspaltig. Die Terminzeile (Preis und „Verbindlich
   anmelden“, beide ohne Umbruch) war bei 320 px bis 31 px zu breit — oben
   flex-wrap, der Knopf rückt dann unter den Preis. */
@media (max-width:339px){
  .foot-top{grid-template-columns:1fr}
}

/* --- Presse: jeder Eintrag verlinkt, Fotos klein wie auf der alten Seite (E-065) --------
   Die Überschrift ist der Link; ::after legt ihn über die ganze Zeile, damit Formatangabe
   und Fotos mitklicken. Rechts steht nur die Angabe (aria-hidden) — kein zweiter Link auf
   dasselbe Ziel. Fotos 160 px hoch, auf dem Handy 120 px, Breite aus dem Seitenverhältnis. */
.press-item{position:relative}
.press-item:has(.pfotos){align-items:start}
.press-item .pt h3 a{color:inherit;text-decoration:none}
.press-item .pt h3 a::after{content:'';position:absolute;inset:0}
.press-item:hover .pt h3 a{color:var(--sig,var(--red))}
.press-item .pl{display:inline-flex;align-items:center;gap:var(--sp-1);font-family:var(--fd);
  font-weight:700;font-size:13px;color:var(--g500);white-space:nowrap}
.press-item .pl svg{width:16px;height:16px;flex:none}
.press-item:hover .pl{color:var(--sig,var(--red))}
.press-item .pfotos{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.press-item .pfotos img{height:160px;width:auto;max-width:100%;object-fit:cover;
  border-radius:var(--r-sm);background:var(--g100)}
@media (max-width:600px){
  .press-item .pfotos img{height:120px}
}

/* --- Bewerbungsformular (E-066) ------------------------------------------------------
   Zwei Dateifelder, weil Netlify Forms je Feld nur eine Datei annimmt. Der Hinweis zu
   Format und Größe steht über den Feldern und ist per aria-describedby angebunden. */
.form-label .opt{font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--g400)}
.form-hint{font-size:13px;color:var(--g600);line-height:1.5;margin:0 0 10px}
.form-input.form-datei{padding:10px 12px;font-size:14px;cursor:pointer;min-width:0}
.form-input.form-datei::file-selector-button{font-family:var(--fd);font-weight:700;font-size:13px;
  border:1.5px solid var(--g250);border-radius:999px;background:#fff;padding:7px 14px;margin-right:12px;
  cursor:pointer;color:var(--ink)}
.form-input.form-datei:hover::file-selector-button{border-color:var(--red)}

/* --- Partnerseminare (E-069) · seit V5 in der Terminzeile .t3.partner (Abschnitt 57/59) --- */
.semrow .sdates .spartner{display:table;margin-top:var(--sp-1);font-family:var(--fd);
  font-weight:700;font-size:var(--fs-xs);color:var(--g600);text-decoration:underline;
  text-underline-offset:3px}
.semrow .sdates .spartner:hover{color:var(--red)}
.tpartnerblock{margin-top:var(--sp-5)}
.tpartner-titel{font-size:var(--h4);letter-spacing:-.02em;margin:0 0 var(--sp-1)}
.tpartner-titel span{font-family:var(--fb);font-weight:500;font-size:var(--fs-sm);color:var(--g500)}

/* --- Fünf Paketkarten (E-Learning, E-071) ---------------------------------------------
   Die fünfte Karte „Jährliche Pflichtunterweisung“. Ab 901 px drei Spalten (3 + 2) — bei
   fünf Spalten brach „Paket buchen“ schon bei 1280 px um. Darunter greifen die Regeln von
   .price-grid (zwei, dann eine Spalte). */
@media (min-width:901px){ .price-grid.fuenf{grid-template-columns:repeat(3,1fr)} }

/* --- Zwei Wege mit Liste (Einkäufer, E-071) --------------------------------------------
   In .pcard wächst die Beschreibung (flex:1). Ist sie kurz und die Liste lang, stand eine
   Lücke zwischen beiden. Hier wächst die Liste, der Knopf bleibt unten. */
.pcard.weg .pdesc{flex:none;margin-bottom:var(--sp-2)}
.pcard.weg .fbullets{flex:1;margin-bottom:var(--sp-2)}
.pcard.weg .pziel{font-size:13.5px;color:var(--g500);line-height:1.5;margin:0 0 var(--sp-3)}

/* --- Kundenstimmen (Lauf 10.1, E-080) -------------------------------------------------
   Erscheint nur mit einem freigegebenen Eintrag (daten/kundenstimmen/, Häkchen „schriftliche
   Freigabe liegt vor“). Karte ohne Hover-Hub: Sie ist kein Link. Anführungszeichen setzt das
   CSS, damit sie nicht doppelt stehen, wenn jemand sie mit eintippt — die Maske sagt „ohne“. */
.card.stimme{margin:0;justify-content:space-between}
.card.stimme:hover{transform:none;box-shadow:none;border-color:var(--g100)}
.stimme blockquote{margin:0 0 var(--sp-3);quotes:'„' '“'}
.stimme blockquote p{font-family:var(--fd);font-weight:700;font-size:17px;line-height:1.5;
  letter-spacing:-.01em;color:var(--ink);margin:0}
.stimme blockquote p::before{content:open-quote}
.stimme blockquote p::after{content:close-quote}
.stimme figcaption{display:flex;align-items:center;gap:var(--sp-2);margin-top:auto;
  font-size:14px;line-height:1.45;color:var(--g600)}
.stimme figcaption b{display:block;font-family:var(--fd);font-weight:800;color:var(--ink)}
.stimme-bild{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}

/* ---------- D-15 · Tap-Ziele mindestens 44 × 44 px (Lauf 11.1) ----------
   Gemessen vorher (Playwright, 390 und 1440 px): Sprungmarken 35 px hoch,
   Filter- und Monatschips 34 bzw. 41 px, Menüknopf 40 × 32 px, Einwilligungs-
   Häkchen 17 × 17 px, Lebenszyklus-Stationen 30 px hoch (die letzte 18 px
   breit). Die Flächen wachsen, das Bild bleibt ruhig: Die Sprungmarken-Leiste
   behält ihre 52 px, ihr Innenabstand schrumpft um den Zuwachs der Marken.
   Beim Häkchen wird das Label zur Fläche: Es reicht jetzt 11 px über und 12 px
   neben das Kästchen hinaus, sodass ein 44-px-Feld um das Kästchen ganz darin
   liegt; der negative Rand hält den Text an seiner Stelle. */
.subnav .wrap{padding-top:4px;padding-bottom:3px}
.subnav a{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
.chip{min-height:44px}
.nav-burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.lzs-st{min-height:44px;padding-top:0;padding-bottom:0}
/* Die letzte Station ist nur so breit wie ihr Punkt (18 px, Abschnitt 53: gleich
   breite Segmente). Breiter machen hiesse den Punkt verschieben — die Trefferflaeche
   waechst deshalb unsichtbar um den Punkt herum, ohne das Layout zu beruehren. */
.lzs-st:last-child::before{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.lzs-st:last-child[aria-current]::before{left:0;transform:translate(-13px,-50%)}
.form-check,.bd-check-line{padding:11px 12px;margin-left:-12px;margin-right:-12px}
.form-check{margin-top:-11px;margin-bottom:9px}
.bd-check-line{margin-top:3px;margin-bottom:3px}
.form-check input,.bd-check-line input{width:22px;height:22px;margin-top:0}

/* ============================================================================
   56. V5 · FUNDAMENT (Lauf 11.3, Paket 1)
   Ergebnis der Design-Runden 1 bis 3 (05-konzepte/Design-Ergebnis-Runden-1-bis-3.md,
   E-088, E-089), gestalterische Vorlage 05-konzepte/design-entscheidung-next-level/
   runde-3/r3.css. Übertragen, nicht kopiert: dieselben Klassen wie bisher, damit
   alle 32 Seiten und die Daten aus /admin ohne Umbau mitgehen.
     S-3  Radien: Knöpfe rund, Inhaltsflächen und Bilder 4 bis 6 px
     S-2  Bewegung: Flächen und Texte höchstens 4 px, Linien dürfen sich aufziehen,
          keine Dauerbewegung außer Ringatem (Ausnahme: Zoom der Diashow, E-01),
          reduzierte Bewegung erfasst jetzt auch ::before und ::after
     D-01 Satz: Montserrat 700 ab H2, ausgeglichener Zeilenfall, Silbentrennung
          nur für H1 auf schmalen Bildschirmen. Rote Wörter bleiben rot (D-02 Nein).
     Knöpfe und Textlinks aus Runde 3: der Farbwischer statt Anheben
     D-09 Eine Hover-Sprache: Linie in Bereichsfarbe, Titel unterstrichen, Pfeil
          rückt 3 px. Kein Anheben, kein Schatten, kein Bildzoom.
     D-04 Maßkette als Abschnittskopf (Nummern vergibt bauen.py, massketten())
   ============================================================================ */

/* --- S-3 · Radien -------------------------------------------------------- */
:root{--r-sm:4px;--r-md:6px;--r-lg:6px;--r-xl:6px;
  /* Farbwischer der Knöpfe (Runde 3): so lang, dass man die Richtung sieht */
  --t-wisch:380ms}
.card .cic{border-radius:var(--r-sm)}

/* --- S-2 · Bewegung -------------------------------------------------------
   Der Einlauf bleibt, aber nur noch 4 px statt 10 px. Die Überschriftzeilen
   steigen nicht mehr aus der Maske (105 %), sondern blenden zeilenweise mit
   4 px auf — dieselbe Staffelung, innerhalb der Regel. */
.js .seq>*,.js .seq.in .stagger>*{transform:translateY(var(--d-xs))}
.lni{opacity:0;transform:translateY(var(--d-xs));
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * 60ms)}
.in .lni,.ln-in .lni{opacity:1;transform:none}

/* --- D-01 · Satz ---------------------------------------------------------- */
h2,h3,h4,h5{font-weight:700}
h1,h2,h3,h4,h5{hyphens:manual;-webkit-hyphens:manual}
p,li,dd,figcaption{text-wrap:pretty}
@media(max-width:620px){
  h1{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}
}

/* --- Knöpfe: Farbwischer (Runde 3, .b3) ----------------------------------
   Die dunklere Fläche wischt von links ein, der Pfeil rückt nach. Keine
   Hebung mehr, der Tastendruck (scale .975) bleibt. Magnet aus (S-2). */
.btn{position:relative;isolation:isolate;overflow:hidden;min-height:48px;padding-top:0;padding-bottom:0}
.btn-sm{min-height:44px}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--wisch,var(--red-dark));
  transform:translateX(-101%);transition:transform var(--t-wisch) var(--e-io)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn svg{transition:transform var(--t-wisch) var(--e-io)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(4px)}
.btn-red:hover,.btn-dark:hover,.btn-white:hover,.btn-glass:hover,.btn-outline:hover{transform:none}
.btn-red{--wisch:var(--red-dark)}.btn-red:hover{background:var(--red)}
.btn-dark{--wisch:var(--red)}.btn-dark:hover{background:var(--ink)}
.btn-white{--wisch:var(--ink)}.btn-white:hover,.btn-white:focus-visible{background:#fff;color:#fff}
.btn-glass{--wisch:#fff}.btn-glass:hover,.btn-glass:focus-visible{background:rgba(255,255,255,.1);color:var(--ink)}
.btn-outline{--wisch:var(--ink);border-color:var(--g250)}
.btn-outline:hover,.btn-outline:focus-visible{border-color:var(--ink);color:#fff}
.btn.magnet:not(:active){transform:none}

/* Textlink (Runde 3, .l3): unterstrichen, der Strich wird beim Überfahren
   kräftig, der Pfeil rückt 3 px. Die Farbe bleibt, wo sie ist (Rot = Handlung). */
.flink{min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  transition:text-decoration-color var(--t-fast) var(--e-out)}
.flink:hover,.flink:focus-visible{text-decoration-color:currentColor}
.flink:hover svg,.flink:focus-visible svg{transform:translateX(3px)}

/* --- D-09 · Eine Hover-Sprache -------------------------------------------
   Klickbare Flächen in Rastern bekommen oben eine 3-px-Linie in Bereichsfarbe,
   die sich von links aufzieht; der Titel wird unterstrichen, der Pfeil rückt.
   Die Linie ist ein Hintergrundbild, kein Pseudo-Element — .card, .dlcard und
   .semrow nutzen ihre Pseudo-Elemente schon anderweitig. */
.card,.dlcard,.pcard,.modchip,.semrow,.bkachel{
  background-image:linear-gradient(var(--sig),var(--sig));background-repeat:no-repeat;
  background-position:0 0;background-size:0 3px;
  transition:background-size var(--t-wisch) var(--e-io),border-color var(--t-fast) var(--e-out),
             opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-io)}
/* Flächen, die ihren Hintergrund per Kurzschrift setzen (.sec.g50 .card u. a.),
   löschen sonst das Linienbild. */
.card,.dlcard,.pcard,.modchip,.semrow,.bkachel{background-image:linear-gradient(var(--sig),var(--sig))!important;
  background-repeat:no-repeat!important;background-position:0 0!important;background-size:0 3px!important}
.card:hover,.card:focus-visible,.dlcard:hover,.pcard:hover,.modchip:hover,.semrow:hover,.bkachel:hover,
.card.stimme:hover{transform:none;box-shadow:none}
/* Lauf 11.3M: Die angesprungene Partnerkarte (Logo-Übersicht, E-101 Nr. 6) behält
   ihren roten Rand auch unter dem Mauszeiger — nach dem Klick auf eine Kachel liegt
   er oft genau über der Karte. Ohne Schatten, wie jede Fläche in V5 (D-09). */
.loskarte:target,.loskarte:target:hover{box-shadow:0 0 0 2px var(--red)}
a.card:hover,a.card:focus-visible,.dlcard:hover,.dlcard:focus-within,.pcard:hover,.pcard:focus-within,
a.modchip:hover,.semrow:hover,.semrow:focus-within,.bkachel:hover,.bkachel:focus-visible{
  background-size:100% 3px!important;border-color:var(--g200)}
.modgrid.liste .modchip,.modgrid.liste .modchip:hover{background-image:none!important}
a.card:hover h3,a.card:focus-visible h3,.bkachel:hover h3,.semrow:hover h3 a,.dlcard:hover h3{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.card:hover .clink svg,.card:focus-visible .clink svg,.bkachel:hover .clink svg{transform:translateX(3px)}
.sec.dark .card:hover,.card.auf-dunkel:hover{background-color:rgba(255,255,255,.09)}
/* Bildkachel: kein Zoom, kein Versatz, kein Overlay, das der Maus folgt —
   dieselbe Linie oben. */
.tilecard:hover img,.tilecard:focus-visible img,.tilecard:hover>.slot img{transform:none}
.tilecard:hover>div,.tilecard:focus-visible>div{transform:none}
.tilecard::before{inset:0 0 auto 0;height:3px;z-index:1;background:var(--sig);opacity:1;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-wisch) var(--e-io)}
.tilecard:hover::before,.tilecard:focus-visible::before{transform:scaleX(1)}
.tilecard:hover h3,.tilecard:focus-visible h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.tilecard:hover .rl svg,.tilecard:focus-visible .rl svg{transform:translateX(3px)}

/* --- D-04 · Maßkette als Abschnittskopf ----------------------------------
   Positionsnummer in Bereichsfarbe, Bezeichnung in der Datenschrift, eine
   Linie mit Endstrichen wie auf einer Bemaßung. Zieht sich einmal auf, wenn
   der Abschnitt ins Bild kommt (app.js, Abschnitt 14), danach steht sie still.
   Ohne JavaScript steht sie sofort vollständig da (.js-Bedingung). */
.mass{display:flex;align-items:center;gap:14px;margin:0 0 18px;color:var(--g400);
  font:500 var(--data)/1.2 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase}
.mass .pos{color:var(--sig-text,var(--sig));font-variant-numeric:tabular-nums;flex:none}
.mass .tx{color:var(--g500);white-space:nowrap}
.mass .linie{flex:1;position:relative;height:9px;min-width:28px}
.mass .linie::before{content:'';position:absolute;left:0;right:0;top:4px;border-top:1px solid var(--g300);transform-origin:left center}
.mass .linie::after{content:'';position:absolute;inset:0;border-left:1px solid var(--g300);border-right:1px solid var(--g300)}
.js .mass .linie::before{transform:scaleX(0);transition:transform var(--t-slow) var(--e-out)}
.js .mass .linie::after{opacity:0;transition:opacity var(--t-fast) linear calc(var(--t-slow) - var(--t-fast))}
.js .mass.an .linie::before{transform:none}
.js .mass.an .linie::after{opacity:1}
.sec-head .mass{margin-bottom:16px}
.sec-head.center .mass{justify-content:center}
.sec-head.center .mass .linie{flex:0 0 64px}
.mass.dunkel{color:rgba(255,255,255,.6)}
.mass.dunkel .pos{color:var(--red-bright)}
.mass.dunkel .tx{color:rgba(255,255,255,.72)}
.mass.dunkel .linie::before,.mass.dunkel .linie::after{border-color:rgba(255,255,255,.34)}
@media(max-width:620px){
  .mass{align-items:flex-start;line-height:1.5}
  .mass .tx{white-space:normal;min-width:0;flex:1 1 60%}
  .mass .linie{flex:0 0 28px;margin-top:3px}
}

/* --- Reduzierte Bewegung: auch ::before und ::after (QC-Befund Runde 1) ---
   Die Globalregel in Abschnitt 33 trifft mit * keine Pseudo-Elemente. Damit
   standen z. B. die Wischflächen und Linien still, aber im Anfangszustand. */
@media(prefers-reduced-motion:reduce){
  *::before,*::after{animation:none!important;transition:none!important}
  .lni{opacity:1!important}
  .js .mass .linie::before{transform:none}
  .js .mass .linie::after{opacity:1}
  .btn::before{transform:translateX(-101%)}
  .btn:hover::before,.btn:focus-visible::before{transform:none}
}

/* ============================================================================
   57. V5 · STARTSEITE UND GEMEINSAME BAUSTEINE (Lauf 11.3, Paket 2)
   Vorlage runde-3/start.html. E-01 Diashow · E-02 Türen · Wort für Wort ·
   E-03 Bündeln mit Foto · Terminzeile (E-04) · Wissen-Kasten · D-10 FAQ ·
   E-06 roter Abschluss (alle .cta, bauen.py/abschluesse()).
   ============================================================================ */
:root{
  --t-dia:6500ms;     /* Standzeit eines Diashow-Bilds; app.js liest denselben Wert */
  interpolate-size:allow-keywords}

/* --- E-01 · Kopf mit Diashow --------------------------------------------- */
.dh{position:relative;min-height:min(94vh,900px);color:#fff;background:var(--ink);overflow:hidden;
  isolation:isolate;display:flex;flex-direction:column}
.dh-bilder{position:absolute;inset:0;z-index:-2}
.dh-bild{position:absolute;inset:0;margin:0;opacity:0;background:var(--ton,var(--ink));
  transition:opacity var(--t-draw) var(--e-out)}
.dh-bild.an{opacity:1}
.dh-bild picture,.dh-bild img{display:block;width:100%;height:100%}
/* Der langsame Zoom (103,5 % → 100 %) ist die dokumentierte Ausnahme von S-2
   (E-01): er läuft nur, solange das Bild steht, und nie bei reduzierter Bewegung. */
.dh-bild img{object-fit:cover;object-position:var(--fokus,60% 40%);transform:scale(1.035);
  transition:transform var(--t-dia) linear}
.dh-bild.an img{transform:scale(1)}
.dh.pausiert .dh-bild img{transition:none}
.dh-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(17,17,19,.6) 0,rgba(17,17,19,0) 20%),
  linear-gradient(90deg,rgba(17,17,19,.86) 0%,rgba(17,17,19,.62) 38%,rgba(17,17,19,.12) 72%),
  linear-gradient(0deg,rgba(17,17,19,.78) 0%,rgba(17,17,19,0) 34%)}
.dh-inhalt{flex:1;display:flex;align-items:center;width:100%;max-width:var(--w-wide);margin:0 auto;
  padding:clamp(120px,16vh,170px) var(--gut) 40px}
.dh-text{max-width:720px}
.dh h1{font-size:clamp(38px,5.8vw,84px);line-height:1.01;letter-spacing:-.03em;margin:14px 0 24px;text-wrap:balance}
.dh h1 b{color:var(--red-bright);font-weight:inherit}
/* Lauf 11.K (E-02): Die rote Zeile erreichte über den Diashow-Bildern nur 2,1–2,9 : 1 (p10).
   Rot bleibt; dahinter liegt eine weiche Abdunklung, die der Überschrift folgt (auch, wenn sie
   umbricht) — so wird nur der Grund unter der Zeile dunkler, nicht das ganze Bild. Messung je Bild:
   Claude outputs/lauf-11-K/belege/e02-kontrast-nachher.json. */
.dh h1{position:relative}
.dh h1::before{content:'';position:absolute;z-index:-1;inset:-.12em -.45em -.18em -.45em;
  background:rgba(17,17,19,.9);filter:blur(30px);border-radius:48px;pointer-events:none}
/* Schmal ist die Schrift kleiner — weniger Weichzeichnung, sonst erreicht der Kern nicht genug Dunkel. */
@media(max-width:900px){.dh h1::before{inset:-.22em -.35em -.3em -.35em;background:rgba(17,17,19,.95);filter:blur(16px);border-radius:28px}}
.dh-sub{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:rgba(255,255,255,.88);max-width:52ch;margin:0 0 30px}
.dh-leiste{width:100%;max-width:var(--w-wide);margin:0 auto;padding:0 var(--gut) 28px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:end}
.dh-reiter{position:relative;display:grid;gap:6px;text-align:left;min-height:56px;padding:12px 0 10px;border:0;
  background:none;color:rgba(255,255,255,.66);cursor:pointer;border-top:2px solid rgba(255,255,255,.28)}
.dh-reiter .n{font:700 clamp(15px,1.3vw,18px)/1.1 var(--fd);color:inherit}
.dh-reiter .k{font:500 var(--data)/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.dh-reiter .lauf{position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--red-bright);
  transform-origin:left;transform:scaleX(0)}
.dh-reiter.an{color:#fff}
.dh-reiter.an .lauf{animation:dh-lauf var(--t-dia) linear forwards}
.dh.pausiert .dh-reiter.an .lauf,.dh.steht .dh-reiter.an .lauf{animation:none;transform:scaleX(1)}
@keyframes dh-lauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dh-reiter:hover,.dh-reiter:focus-visible{color:#fff}
.dh-pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.4);background:rgba(17,17,19,.35);color:#fff;font:600 12.5px/1 var(--fb);cursor:pointer}
.dh-pause[hidden]{display:none}
.dh-pause svg{width:12px;height:12px}
.dh-pause[aria-pressed=true] .ic-p,.dh-pause[aria-pressed=false] .ic-w{display:none}
.dh-bildtext{grid-column:1/-1;font:500 var(--data)/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);min-height:1.4em;margin:0}
.dh :focus-visible{outline-color:#fff}
/* Lauf 11.K (E-08): Die Kopfleiste liegt auf der Startseite durchsichtig über dem Foto, der
   Abspielknopf des Trailers ist rot — dort war der rote Fokusring kaum zu sehen (1,9–2,7 : 1). */
.nav:not(.scrolled):not(.nav-solid) :focus-visible,.player-flaeche :focus-visible{outline-color:#fff}
@media(max-width:900px){
  .dh{min-height:0}
  .dh-scrim{background:linear-gradient(0deg,rgba(17,17,19,.94) 0%,rgba(17,17,19,.8) 55%,rgba(17,17,19,.6) 100%)}
  .dh-inhalt{padding-top:120px;align-items:flex-end}
  .dh-leiste{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .dh-pause{grid-column:1/-1;justify-self:start}
  .dh-reiter .k{display:none}
}

/* --- E-02 · Drei Türen ----------------------------------------------------
   Desktop: drei hohe Bildtüren, die überfahrene öffnet sich (flex-grow) und
   zeigt ihren Text; die Bereichsfarbe läuft von unten ein. Handy: drei
   kompakte Querkacheln 16:10 mit Name, Frage und rundem Pfeil — nichts
   gequetscht, kein Text über dem Bild außer Name und Frage (Runde 3). */
.tueren{display:flex;gap:10px;height:clamp(440px,64vh,620px)}
.tuer{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r-md);overflow:hidden;color:#fff;
  isolation:isolate;container-type:inline-size;transition:flex-grow var(--t-slow) var(--e-io)}
.tuer[data-sig=beschaffung]{--farbe:var(--red)}
.tuer[data-sig=consulting]{--farbe:var(--navy-soft)}
.tuer[data-sig=akademie]{--farbe:var(--teal-deep)}
.tuer>.slot{position:absolute;inset:0;z-index:-2;border-radius:0;aspect-ratio:auto;margin:0}
.tuer>.slot img{transition:transform var(--t-draw) var(--e-out)}
.tuer[data-sig=beschaffung]>.slot img{object-position:50% 18%}
.tuer::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(17,17,19,.9) 0%,rgba(17,17,19,.55) 42%,rgba(17,17,19,.08) 75%)}
.tuer .nr{position:absolute;left:24px;top:22px;font:500 12px/1 var(--fm);letter-spacing:.1em;color:rgba(255,255,255,.8)}
.tuer .unten{position:absolute;left:24px;right:24px;bottom:24px}
.tuer .name{display:flex;align-items:center;gap:12px;font:800 clamp(24px,11cqi,46px)/1 var(--fd);
  letter-spacing:-.025em;white-space:nowrap}
.tuer .name::before{content:'';flex:none;width:12px;height:12px;border-radius:2px;background:var(--farbe)}
.tuer .frage{display:block;margin-top:12px;font:700 clamp(16px,1.3vw,19px)/1.3 var(--fd);max-width:26ch;
  text-wrap:balance;color:rgba(255,255,255,.95);transition:opacity var(--t-base) var(--e-out)}
.tuer .mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--e-io)}
.tuer .mehr>span{overflow:hidden}
.tuer .mtext{display:block;margin:10px 0 0;max-width:42ch;font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}
.tuer .los{display:inline-flex;gap:8px;align-items:center;margin-top:14px;font:700 14px/1 var(--fd)}
.tuer .los svg{width:16px;height:16px}
.tuer:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(min-width:901px){
  .tueren:hover .tuer,.tueren:focus-within .tuer{flex-grow:.8}
  .tueren .tuer:hover,.tueren .tuer:focus-visible{flex-grow:2}
  .tueren:hover .tuer:not(:hover) .frage{opacity:0}
  .tuer:hover .mehr,.tuer:focus-visible .mehr{grid-template-rows:1fr}
  .tuer:hover>.slot img,.tuer:focus-visible>.slot img{transform:scale(1.04)}
  .tuer::after{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--t-slow) var(--e-out);
    background:linear-gradient(0deg,color-mix(in srgb,var(--farbe) 88%,#000) 0%,color-mix(in srgb,var(--farbe) 45%,transparent) 45%,rgba(17,17,19,.05) 80%)}
  .tuer:hover::after,.tuer:focus-visible::after{opacity:1}
}
@media(max-width:900px){
  .tueren{flex-direction:column;height:auto;gap:12px}
  .tuer{flex:none;aspect-ratio:16/10}
  .tuer::before{background:linear-gradient(0deg,rgba(17,17,19,.88) 0%,rgba(17,17,19,.35) 55%,rgba(17,17,19,0) 80%)}
  .tuer .unten{left:18px;right:68px;bottom:16px}
  .tuer .nr{left:18px;top:14px}
  .tuer .name{font-size:30px}
  .tuer .frage{margin-top:6px;font-size:15px;max-width:none}
  .tuer .mehr{display:none}
  .tuer::after{content:'';position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;
    background:var(--farbe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat}
}

/* --- Wort für Wort -------------------------------------------------------- */
.wortsatz{font:800 clamp(28px,3.8vw,52px)/1.14 var(--fd);letter-spacing:-.025em;max-width:24ch;margin:0;color:var(--ink)}
.wortsatz b{font-weight:inherit;color:var(--red)}
.wortsatz .w{color:var(--g250);transition:color var(--t-base) var(--e-out)}  /* Lauf 11.K (E-07): vorher --g300, 1,58 : 1 */
.wortsatz .w.on{color:var(--ink)}
.wortsatz .w.rot.on{color:var(--red)}

/* --- Zweispalter mit Text links, Bild rechts (Startseite) ------------------ */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.zwei.rev>:first-child{order:2}
.zwei>.sec-head{margin-bottom:0}
.zwei>.sec-head .btnrow{margin-top:26px}
.zwei>.slot{border-radius:var(--r-md)}
@media(max-width:900px){.zwei{grid-template-columns:1fr}.zwei.rev>:first-child{order:0}}

/* --- E-03 · Bündeln mit Foto ----------------------------------------------
   Foto groß, die Karte kleiner und nur unten überlappend (Rückmeldung Darius,
   Runde 3: „Das Foto geht etwas unter“). */
.fb{position:relative;padding-bottom:150px}
.fb>.slot{border-radius:var(--r-md)}
.fb .bk{position:absolute;left:-40px;bottom:0;width:min(380px,66%);box-shadow:var(--el-3)}
.bk{background:#fff;border:1px solid var(--g200);border-radius:var(--r-md);padding:18px 18px 14px}
.bk-kopf{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font:500 var(--data)/1.3 var(--fm);
  letter-spacing:var(--data-ls);text-transform:uppercase;color:var(--g500)}
.bk .feld{display:flex;flex-wrap:wrap;gap:7px 5px;align-content:flex-start;min-height:120px}
.bz{height:9px;border-radius:2px;background:var(--g300);flex:0 0 auto;width:calc(var(--w) * 1%)}
.bk.gebuendelt .feld{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px 10px;align-items:start}
.bk.gebuendelt .bz{width:100%;background:var(--red);grid-column:var(--g)}
.bk .glab{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px;
  font:500 10px/1.2 var(--fm);letter-spacing:.06em;text-transform:uppercase;opacity:0;
  transition:opacity var(--t-base) var(--e-out) var(--t-base)}
.bk.gebuendelt .glab{opacity:1}
.bk .glab span{border-top:2px solid var(--red);padding-top:5px;min-width:0;overflow-wrap:anywhere}
.bk-fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--g100);font:500 12px/1.3 var(--fm);color:var(--g500)}
.bk-fuss b{font:800 24px/1 var(--fd);color:var(--ink);font-variant-numeric:tabular-nums}
.bk button{min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--ink);background:#fff;
  font:600 13px/1 var(--fb);cursor:pointer;color:var(--ink);transition:background var(--t-fast),color var(--t-fast)}
.bk button[hidden]{display:none}
.bk button:hover,.bk button:focus-visible{background:var(--ink);color:#fff}
@media(max-width:900px){.fb{padding-bottom:0}.fb .bk{position:relative;left:auto;width:auto;margin:-28px 14px 0}}

/* --- Aktenzeile (Consulting-Kostprobe) ------------------------------------- */
.aktenzeile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);margin:26px 0 0;max-width:520px}
.aktenzeile div{padding:10px 12px 0 0}
.aktenzeile dt{font:500 var(--data)/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
.aktenzeile dd{margin:4px 0 0;font:700 15px/1.3 var(--fd)}

/* --- Zahlen aus den Daten ------------------------------------------------- */
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);margin:6px 0 40px}
.zahlen div{padding:16px 16px 0 0}
.zahlen b{display:block;font:800 clamp(40px,5vw,64px)/1 var(--fd);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.zahlen span{font:500 var(--data)/1.4 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase;color:var(--g500)}

/* --- Terminzeile (E-04, termine.t3_zeile) ---------------------------------- */
.t3-kopf{font:500 var(--data)/1.4 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase;color:var(--g500);margin:0 0 8px}
/* Lauf 11.M: Die Zeile richtet sich nach der Breite der LISTE (Container-Query), nicht nach dem Fenster — neben
   einem Seitenkasten („Wichtig zur Anmeldung“) ist die Liste schmaler. Die Textspalte (Format, Plätze, Zeitraum,
   Ort, Referenten, Hinweis) hat mindestens 28ch; reicht der Platz dafür neben Preis und Knopf nicht, rutschen
   Preis und Knopf UNTER die Textspalte — nie wird die Textspalte gequetscht (Fund Darius 05.10.2026,
   /seminar-fachwirt-hybrid/ bei 1440 px; BAUKASTEN § 14). Drei Stufen:
   unter 30rem eine Spalte (Datum in einer Zeile, darunter Text, darunter Preis und Knopf) ·
   ab 30rem Datum | Text, Preis und Knopf darunter in der Textspalte ·
   ab 62rem Datum | Text | Preis und Knopf. 62rem = 150 px Datum + 2 × 32 px + 28ch (291 px) + Preis und Knopf
   (gemessen höchstens 445 px, „Privatpersonen: 2.368,10 € inkl. USt“ neben „Anmeldung anfragen“) + Luft. */
.t3-liste{border-top:2px solid var(--ink);container:tliste/inline-size}
.t3{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--g200)}
.t3::before{content:'';position:absolute;left:-10px;top:18px;bottom:18px;width:3px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform var(--t-wisch) var(--e-io)}
.t3:hover::before,.t3:focus-within::before{transform:scaleY(1)}
.t3-wann{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.t3-wann .tg{font:800 24px/1 var(--fd);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.t3-wann .tg.wort{font-size:18px;letter-spacing:-.01em;color:var(--teal-deep)}
.t3-wann .tm{font:500 11.5px/1.3 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--g500)}
.t3.partner .t3-wann .tg{color:var(--g500)}
.t3-etik{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 6px;font:500 var(--data)/1.3 var(--fm);letter-spacing:.08em;text-transform:uppercase}
.fmt{display:inline-flex;align-items:center;gap:7px;color:var(--g600)}
.fmt::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.fmt.f-t::before{background:var(--teal-deep)}
.fmt.f-n::before{background:var(--navy)}
.fmt.f-partner::before{background:none;border:2px dashed var(--g400);width:7px;height:7px}
.t3-etik .st{color:var(--teal-deep)}
.t3-etik .st.aus{color:var(--red)}
.t3 h3,.t3 h4{font:700 clamp(17px,1.4vw,20px)/1.25 var(--fd);letter-spacing:-.01em;margin:0 0 4px;text-wrap:balance}
.t3 h3 a,.t3 h4 a{color:var(--ink)}
.t3 h3 a:hover,.t3 h4 a:hover,.t3 h3 a:focus-visible,.t3 h4 a:focus-visible{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.t3-meta{margin:0;font-size:14px;color:var(--g500)}
.t3-rechts{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:8px;flex-wrap:wrap}
.pr{font:800 21px/1 var(--fd);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:left}
.pr small{display:block;margin-top:4px;font:400 12px/1 var(--fb);color:var(--g500)}
.pr.ohne{font:400 13px/1.35 var(--fb);color:var(--g500);white-space:normal;max-width:150px}
.t3 .btn{white-space:nowrap}
.t3-leer{padding:26px 0;color:var(--g600);margin:0}
.t3-leer a{color:var(--red);text-decoration:underline;text-underline-offset:.2em}
.t3-weiter{margin-top:26px;align-items:center;gap:22px}
@container tliste (min-width:30rem){
  .t3{grid-template-columns:130px minmax(0,1fr);gap:10px 32px}
  .t3-kurz .t3{grid-template-columns:150px minmax(0,1fr)}
  .t3::before{left:-14px}
  .t3-wann{display:grid;gap:4px}
  .t3-wann .tg{font-size:34px}.t3-wann .tg.wort{font-size:19px}
  .t3-was,.t3-rechts{grid-column:2}
  .t3-rechts{margin-top:4px}
}
@container tliste (min-width:62rem){
  .t3{grid-template-columns:130px minmax(28ch,1fr) auto;gap:8px 32px;align-items:center}
  .t3-kurz .t3{grid-template-columns:150px minmax(28ch,1fr) auto}
  .t3-rechts{grid-column:3;justify-content:flex-end;margin-top:0;flex-wrap:nowrap}
  .pr{text-align:right}
}

/* --- Wissen: Herleitungs-Kasten und Beitragsliste --------------------------- */
.rt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border-radius:var(--r-md);overflow:hidden;background:var(--ink);color:#fff}
.rt .l{padding:clamp(24px,3vw,40px)}
.rt .k{font:500 var(--data)/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright)}
.rt h3{font:800 clamp(24px,2.4vw,34px)/1.12 var(--fd);letter-spacing:-.02em;margin:10px 0 12px;max-width:22ch;color:#fff}
.rt p{color:rgba(255,255,255,.8);max-width:46ch;margin:0 0 22px}
.rt .r{padding:clamp(24px,3vw,40px);border-left:1px solid rgba(255,255,255,.12);display:grid;gap:12px;align-content:center}
.rt .zeile{display:flex;justify-content:space-between;gap:10px;font:500 13px/1.3 var(--fm);color:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:10px}
.rt .zeile b{color:#fff;font-family:var(--fd);font-weight:700;text-align:right}
.rt .zeile.erg b{color:var(--red-bright)}
.rt :focus-visible{outline-color:#fff}
.artikel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--ink);margin-top:28px}
.artikel a{position:relative;display:grid;gap:8px;align-content:start;padding:22px 24px 24px 0;color:var(--ink)}
.artikel a+a{padding-left:24px;border-left:1px solid var(--g200)}
.artikel a::before{content:'';position:absolute;left:0;right:0;top:-2px;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-wisch) var(--e-io)}
.artikel a:hover::before,.artikel a:focus-visible::before{transform:scaleX(1)}
.artikel a:hover h3,.artikel a:focus-visible h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.artikel .k{font:500 var(--data)/1.3 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase;color:var(--teal-deep)}
.artikel h3{font:700 19px/1.25 var(--fd);margin:0}
.artikel p{margin:0;color:var(--g600);font-size:15px}
@media(max-width:900px){
  .rt{grid-template-columns:1fr}.rt .r{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .artikel{grid-template-columns:1fr}.artikel a+a{padding-left:0;border-left:0;border-top:1px solid var(--g200)}
}

/* --- D-10 · FAQ nummeriert, öffnet weich ------------------------------------
   Nummer per Zähler (nicht im Text: die FAQ-Auszeichnung für Suchmaschinen
   bleibt unverändert, Vorlesegeräte lesen die Nummer nicht mit). Weiches Öffnen
   über ::details-content, wo der Browser es kann; sonst öffnet es wie bisher. */
:where(*):has(>details.qa){counter-reset:qa}
.qa{counter-increment:qa}
.qa summary{justify-content:flex-start;align-items:baseline;min-height:44px}
.qa summary::before{content:counter(qa,decimal-leading-zero) / "";flex:none;width:34px;
  font:500 12px/1 var(--fm);letter-spacing:.06em;color:var(--g400);font-variant-numeric:tabular-nums}
.qa .ic{margin-left:auto;align-self:center}
.qa summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.qa .ans{padding-left:34px}
.qa::details-content{height:0;overflow:clip;transition:height var(--t-base) var(--e-io),content-visibility var(--t-base) allow-discrete}
.qa[open]::details-content{height:auto}
.qa[open] .ans{animation:v5-ein var(--t-base) var(--e-out) both}
@keyframes v5-ein{from{opacity:0;transform:translateY(var(--d-xs))}}

/* --- E-06 · Roter Abschluss, ruhig ------------------------------------------ */
.cta.abschluss{text-align:left;padding:clamp(80px,12vh,140px) 0}
.cta.abschluss::before{display:none}
.cta.abschluss>.wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:start}
.cta.abschluss h2{font-size:clamp(36px,5vw,68px);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px}
.cta.abschluss .ab-text>p{font-size:var(--fs-lg);line-height:1.65;color:rgba(255,255,255,.92);max-width:44ch;margin:0 0 32px}
.cta.abschluss .btnrow{justify-content:flex-start;align-items:center;gap:14px 22px}
.cta.abschluss .flink{color:#fff}
.cta .btn-glass{--wisch:#fff}
.wege{margin:0;border-top:1px solid rgba(255,255,255,.4)}
.wege .kweg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.4)}
.wege dt{font:500 var(--data)/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 6px}
.wege dd{margin:0;font:700 clamp(18px,1.6vw,22px)/1.3 var(--fd);overflow-wrap:anywhere}
.wege dd a{color:#fff}
.wege dd a:hover,.wege dd a:focus-visible{text-decoration:underline;text-underline-offset:.2em}
.kopie{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.55);background:none;color:#fff;font:600 12.5px/1 var(--fb);cursor:pointer;
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.kopie[hidden]{display:none}
.kopie:hover,.kopie:focus-visible{background:#fff;color:var(--red)}
.kopie svg{width:14px;height:14px}.kopie .ok{display:none}.kopie.kopiert .ok{display:block}.kopie.kopiert .zu{display:none}
.ab-note{border-top:1px solid rgba(255,255,255,.4);padding-top:22px}
.cta.abschluss .ab-note .fussnote{margin:0;text-align:left;max-width:46ch;font-size:var(--fs-md);color:rgba(255,255,255,.9)}
@media(max-width:900px){.cta.abschluss>.wrap{grid-template-columns:1fr}}
@media(max-width:420px){.wege .kweg{grid-template-columns:1fr}.kopie{justify-self:start}}

@media(prefers-reduced-motion:reduce){
  .dh-bild img{transform:none!important}
  .dh-reiter .lauf{animation:none!important}
  .dh-reiter.an .lauf{transform:scaleX(1)}
  .wortsatz .w{color:var(--ink)!important}
  .wortsatz .w.rot{color:var(--red)!important}
}
@media(max-width:900px){.tuer .nr{display:none}}

/* ============================================================================
   58. V5 · RAHMEN AUF ALLEN SEITEN (Lauf 11.3, Paket 3)
   D-20 Kopfleiste · D-16 Mobilmenü als Verzeichnis · D-19 Kolophon.
   ============================================================================ */

/* --- D-20 · Kopfleiste: Wo bin ich? ----------------------------------------
   Der aktive Bereich trägt den Unterstrich in seiner Bereichsfarbe (3 px),
   Kontakt ist ein Umriss-Knopf — Rot bleibt für die Handlung der Seite. */
.nav.scrolled .nav-item.is-current>a::after,.nav.nav-solid .nav-item.is-current>a::after{
  height:3px;border-radius:0;bottom:2px;background:var(--sig-text,var(--sig))}
body:not([data-bereich]) .nav .nav-item.is-current>a::after{background:var(--red)}
.nav .nav-links a.nav-cta,.nav-item>a.nav-cta{background:none;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);
  position:relative;isolation:isolate;overflow:hidden}
.nav .nav-links a.nav-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:#fff;
  transform:translateX(-101%);transition:transform var(--t-wisch) var(--e-io)}
.nav .nav-links a.nav-cta:hover,.nav .nav-links a.nav-cta:focus-visible{background:none;color:var(--ink);transform:none}
.nav .nav-links a.nav-cta:hover::before,.nav .nav-links a.nav-cta:focus-visible::before{transform:none}
.nav.scrolled .nav-item>a.nav-cta,.nav.nav-solid .nav-item>a.nav-cta{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.nav.scrolled .nav-links a.nav-cta::before,.nav.nav-solid .nav-links a.nav-cta::before{background:var(--ink)}
.nav.scrolled .nav-item>a.nav-cta:hover,.nav.nav-solid .nav-item>a.nav-cta:hover,
.nav.scrolled .nav-item>a.nav-cta:focus-visible,.nav.nav-solid .nav-item>a.nav-cta:focus-visible{background:none;color:#fff}
/* Brotkrume in der Datenschrift */
.crumb{font:500 var(--data)/1.4 var(--fm);letter-spacing:.06em;text-transform:uppercase}
.crumb a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;
  transition:text-decoration-color var(--t-fast) var(--e-out)}
.crumb a:hover,.crumb a:focus-visible{text-decoration-color:currentColor}
.crumb .here{color:var(--ink)}
.subhero .crumb .here{color:#fff}

/* --- D-16 · Mobilmenü als Verzeichnis -------------------------------------
   Hell, Positionsnummern in Bereichsfarbe, Plus und Minus in Ink, der
   Menüknopf wird zum Schließen-Kreuz, unten fest: Kontakt und Telefon. */
.mmenu{background:#fff;color:var(--ink);padding-bottom:0;display:flex;flex-direction:column}
.mmenu>.wrap{flex:1;display:flex;flex-direction:column;width:100%}
.mmenu .msuche{border-color:var(--g250);background:#fff;color:var(--g600)}
.mgroup,.mmenu .msolo{border-bottom:1px solid var(--g200)}
.mgroup>summary,.mmenu .msolo{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;align-items:center;
  min-height:60px;padding:0;font:700 22px/1.15 var(--fd);letter-spacing:-.02em;color:var(--ink)}
.mnr{font:500 12px/1 var(--fm);letter-spacing:.06em;color:var(--g400);font-variant-numeric:tabular-nums}
.mgroup[data-sig=beschaffung] .mnr{color:var(--red)}
.mgroup[data-sig=consulting] .mnr{color:var(--navy)}
.mgroup[data-sig=akademie] .mnr{color:var(--teal-deep)}
.mgroup>summary .px{justify-self:end;width:14px;height:14px}
.mgroup>summary .px::before,.mgroup>summary .px::after{background:var(--ink)}
.mgroup>summary .px::before{top:6px;left:0;right:0;height:2px}
.mgroup>summary .px::after{left:6px;top:0;bottom:0;width:2px}
.mgroup .mlinks{padding:0 0 14px 40px}
.mgroup .mlinks a{display:block;min-height:44px;padding:11px 0;border-top:1px solid var(--g100);color:var(--g600);font-size:16px}
.mgroup .mlinks a span{color:var(--g500)}
.mgroup .mlinks a:hover,.mgroup .mlinks a:focus-visible{color:var(--ink)}
.mfuss{position:sticky;bottom:0;margin-top:auto;display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:14px 0 max(18px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--g200)}
.mtel{display:inline-flex;align-items:center;min-height:44px;font:500 14px/1 var(--fm);color:var(--ink)}
.mmenu :focus-visible{outline-color:var(--red)}
/* Offenes Menü: die Kopfleiste wird hell, der Menüknopf ein Kreuz. */
body:has(.mmenu.open) .nav{background:#fff;box-shadow:0 1px 0 var(--g200)}
body:has(.mmenu.open) .nav .nav-logo .white{opacity:0}
body:has(.mmenu.open) .nav .nav-logo .dark{opacity:1}
body:has(.mmenu.open) .nav-burger span{background:var(--ink)}
.nav-burger span{transform-origin:center}
.nav-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(prefers-reduced-transparency:reduce){.mmenu{background:#fff}}

/* --- D-19 · Kolophon ------------------------------------------------------- */
.foot.kolophon{padding:clamp(56px,8vh,88px) 0 28px}
.kol-oben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:48px;border-top:1px solid rgba(255,255,255,.3);padding-top:28px}
.kol-daten{margin:0;display:grid;gap:14px;align-content:start}
.kol-daten dt,.kolophon .foot-col .k{font:500 var(--data)/1.4 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase;color:rgba(255,255,255,.62);margin:0}
.kol-daten dd{margin:3px 0 0;font-size:var(--fs-base);color:rgba(255,255,255,.9);line-height:1.5}
.kol-daten a{color:#fff}
.kol-daten a:hover,.kol-daten a:focus-visible{text-decoration:underline;text-underline-offset:.2em}
.kol-spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kolophon .foot-col .k{margin-bottom:10px}
.kolophon .foot-col a{display:flex;align-items:center;min-height:36px;padding:4px 0;font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.kolophon .foot-col a:hover,.kolophon .foot-col a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.kolophon .foot-bot{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);gap:22px}
.kolophon .foot-bot img{height:28px;width:auto;margin-right:auto}
.kolophon .legal-links{color:rgba(255,255,255,.72)}
.kolophon .legal-links a{min-height:44px;display:inline-flex;align-items:center}
.kolophon .socials a{width:44px;height:44px}
@media(max-width:900px){
  .kol-oben{grid-template-columns:1fr;gap:36px}
  .kol-spalten{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Nachträge aus der Prüfung von Paket 1 (qc/qc-p1.md) --------------------- */
/* B1: Absatzregeln in .sec-head und .lead-block überschrieben die Maßkette. */
.sec-head p.mass,.lead-block p.mass,.scrolly-head p.mass,p.mass{font:500 var(--data)/1.2 var(--fm);
  letter-spacing:var(--data-ls);margin-top:0;max-width:none;color:var(--g400)}
p.mass.dunkel{color:rgba(255,255,255,.6)}
@media(max-width:620px){p.mass{line-height:1.5}}
/* B2: Die Schrift wechselt erst, wenn die Wischfläche sie erreicht hat. */
.btn:hover,.btn:focus-visible,.nav .nav-links a.nav-cta:hover,.nav .nav-links a.nav-cta:focus-visible{
  transition:transform var(--t-fast) var(--e-out),background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out),
    box-shadow var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out) calc(var(--t-wisch) * .5)}
/* B4: Teamfotos zoomen nicht mehr (D-09) — der rote Ring bleibt. */
.tmember:hover .tbubble img{transform:none}
/* B5: Nicht klickbare Karten auf dunkler Fläche reagieren nicht auf die Maus. */
.sec.dark div.card:hover,div.card.auf-dunkel:hover{background-color:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
/* B7: Die Paketkarte behält beim Überfahren ihren Schatten. */
.pcard:hover{box-shadow:none}.pcard.featured:hover{box-shadow:var(--sh-lg)}
/* B8: Jede Hover-Reaktion hat ihr Fokus-Gegenstück. */
.semrow:focus-within h3 a,.dlcard:focus-within h3,a.modchip:hover .mt,a.modchip:focus-visible .mt,
.pcard:hover .ptier,.pcard:focus-within .ptier{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
/* B10: Auf Touch-Geräten bleibt nach dem Antippen kein Hover-Zustand kleben. */
@media(hover:none){
  .btn:hover:not(:focus-visible)::before{transform:translateX(-101%)}
  .btn-white:hover:not(:focus-visible){color:var(--red)}
  .btn-glass:hover:not(:focus-visible),.btn-outline:hover:not(:focus-visible){color:inherit}
  a.card:hover:not(:focus-visible),.semrow:hover:not(:focus-within),.dlcard:hover:not(:focus-within){background-size:0 3px!important}
}
/* B12: Randziffern auf dunkler Fläche lesbar. */
.sec.dark .rn,.scrolly .rn{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.34)}
.sec.dark .rn.on,.scrolly .rn.on{color:var(--red-bright);border-color:var(--red-bright)}

/* --- Nachträge aus der Prüfung von Paket 2 (qc/qc-p2.md) --------------------- */
/* B-01: Rote Wörter in Abschnittsüberschriften bleiben rot (D-02 Nein), im Gewicht der Überschrift. */
.sec-head h2 b{color:var(--red);font-weight:inherit}
.sec.dark .sec-head h2 b{color:var(--red-bright)}
/* B-02: „Maschinen“ passt in die Spalte der Bündel-Karte. */
.bk .glab{font-size:9px;letter-spacing:.02em;gap:6px}
.bk.gebuendelt .feld{gap:5px 6px}
/* B-03: Die Tür-Erläuterungen bleiben mobil für Vorlesegeräte erhalten. */
@media(max-width:900px){.tuer .mehr{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* Türen zwischen 901 und 1180 px: Namen nicht beschneiden — die Tür öffnet nur ihren Text. */
@media(min-width:901px) and (max-width:1180px){
  .tueren:hover .tuer,.tueren:focus-within .tuer,.tueren .tuer:hover,.tueren .tuer:focus-visible{flex-grow:1}
  .tuer .name{font-size:clamp(22px,9cqi,34px)}
}
/* Pause-Knopf: Symbol folgt dem Zustand (data-steht statt aria-pressed). */
.dh-pause[data-steht=true] .ic-p,.dh-pause[data-steht=false] .ic-w{display:none}
.dh-pause[data-steht=false] .ic-p,.dh-pause[data-steht=true] .ic-w{display:inline}
/* Ohne JavaScript sind die Reiter nur Beschriftung. */
html:not(.js) .dh-reiter{pointer-events:none;cursor:default}
.zwei>.sec-head .fbullets{margin-top:22px}
.bk.gebuendelt .feld{grid-auto-flow:row dense}

/* ============================================================================
   59. V5 · TERMINLISTE MIT MONATSÜBERSICHT (Lauf 11.3, Paket 4, E-04)
   Vorlage runde-3/termine.html. Erzeugt von termine.terminliste(); ohne
   JavaScript bleibt die Übersicht verborgen und die Liste steht vollständig.
   ============================================================================ */
.mon{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:0 0 22px}
.mon[hidden]{display:none}
.mf{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 6px;align-items:end;min-height:58px;
  padding:10px 10px 8px;border-radius:var(--r-md);border:1px solid var(--g250);background:#fff;text-align:left;cursor:pointer;color:var(--ink);
  transition:background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.mf .ml{font:700 14px/1.1 var(--fd)}
.mf .mj{grid-row:2;font:500 10.5px/1 var(--fm);color:var(--g500)}
.mf .mn{grid-row:1/3;grid-column:2;align-self:center;font:800 20px/1 var(--fd);font-variant-numeric:tabular-nums;color:var(--teal-deep);white-space:nowrap}
.mf .mn small{font:600 11px/1 var(--fb);color:var(--g500);margin-left:2px}
.mf:hover,.mf:focus-visible{border-color:var(--ink)}
.mf[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.mf[aria-pressed=true] .mj,.mf[aria-pressed=true] .mn small{color:rgba(255,255,255,.72)}
.mf[aria-pressed=true] .mn{color:#fff}
.mf:disabled{cursor:default;color:var(--g400);background:var(--g50);border-color:var(--g100)}
.mf:disabled .mn,.mf:disabled .mj{color:var(--g400)}
.t3-monat{font:500 var(--data)/1.4 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase;color:var(--g500);
  margin:0;padding:22px 0 8px;border-bottom:1px solid var(--g200)}
.t3-liste>.t3-monat:first-child{padding-top:12px}
.t3-monat[hidden],.t3[hidden]{display:none}
.tplan .tmehr{margin-top:22px}
.tplan .tmehr[hidden]{display:none}
.tpartnerblock .t3-liste{margin-top:14px}
.t3.ausgebucht .t3-wann .tg{color:var(--g500)}
@media(max-width:900px){
  .mon{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mf[data-monat=jederzeit]{grid-column:span 2}
}
@media(max-width:360px){.mon{grid-template-columns:repeat(3,minmax(0,1fr))}.mf .mn{font-size:17px}}
.mf .mn{display:grid;justify-items:end;line-height:1}
.mf .mn small{display:block;margin:3px 0 0}

/* --- Nachträge aus der Prüfung von Paket 3 (qc/qc-p3.md) --------------------- */
/* 3: Die Kopfleiste bleibt auf hellen Diashow-Bildern lesbar. */
.dh-scrim{background:
  linear-gradient(180deg,rgba(17,17,19,.72) 0,rgba(17,17,19,.3) 14%,rgba(17,17,19,0) 26%),
  linear-gradient(90deg,rgba(17,17,19,.86) 0%,rgba(17,17,19,.62) 38%,rgba(17,17,19,.12) 72%),
  linear-gradient(0deg,rgba(17,17,19,.78) 0%,rgba(17,17,19,0) 34%)}
@media(max-width:900px){.dh-scrim{background:linear-gradient(0deg,rgba(17,17,19,.94) 0%,rgba(17,17,19,.8) 55%,rgba(17,17,19,.6) 100%)}}
/* 4, 5: Kolophon mobil — Rechtezeile auf einer Höhe, Tap-Ziele 44 px. */
.kolophon .legal-links{display:flex;align-items:center;flex-wrap:wrap;gap:0 18px}
.kolophon .legal-links span{display:inline-flex;align-items:center;min-height:44px}
.kol-daten a{display:inline-flex;align-items:center;min-height:44px}
.kol-daten div{margin:0}
.kol-daten{gap:6px}
@media(max-width:620px){.kolophon .foot-bot{display:grid;grid-template-columns:1fr auto;align-items:center}
  .kolophon .foot-bot img{grid-column:1/-1}.kol-spalten{padding-right:48px}}
/* 7: Aktuelle Seite im Mobilmenü. */
.mgroup .mlinks a[aria-current]{color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--sig,var(--red));padding-left:12px}
.mmenu .msolo[aria-current] .mt{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.25em}
/* 9: Feste Kontaktleiste auf kleinen Bildschirmen schlanker. */
@media(max-height:700px){.mfuss{padding-top:10px;gap:4px 14px}.mfuss .btn{min-height:44px;padding:0 20px}}
/* 10 (B-06): Überschrift im Abschluss auf dem Handy etwas kleiner. */
.cta.abschluss h2{font-size:clamp(30px,4.6vw,64px)}
/* 11: Bündel-Beschriftung nicht unter 10 px — die Spalten bekommen den Platz. */
.bk .glab{font-size:10px;letter-spacing:0}
.fb .bk{width:min(400px,72%)}
/* D-14 · Leerer Programmfilter */
.sem-empty{text-align:left;padding:40px 0;max-width:640px}
.sem-empty .sem-stand{font:500 var(--data)/1.4 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase;color:var(--g500);margin:0 0 12px}
.sem-empty h3{margin-bottom:10px}
.auswege{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid var(--ink)}
.auswege li{border-bottom:1px solid var(--g200)}
.auswege a,.auswege button{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0;
  background:none;border:0;cursor:pointer;font:700 17px/1.2 var(--fd);color:var(--ink);text-align:left}
.auswege .anr{flex:none;width:28px;font:500 12px/1 var(--fm);color:var(--sig)}
.auswege svg{width:15px;height:15px;margin-left:auto;transition:transform var(--t-fast) var(--e-out)}
.auswege a:hover,.auswege button:hover,.auswege a:focus-visible,.auswege button:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.auswege a:hover svg,.auswege button:hover svg,.auswege a:focus-visible svg,.auswege button:focus-visible svg{transform:translateX(3px)}
/* Lebenszyklus mobil (offen aus Lauf 11.1, Prüf-Agent): Ist die letzte Station aktiv, steht ihre
   Beschriftung links vom Punkt — rechts davon lief sie bei 390 px aus dem Bild. */
@media(max-width:760px){
  .lzs-st:last-child[aria-current]{flex-direction:row-reverse;justify-content:flex-start}
  .lzs-st:last-child[aria-current] .lb{text-align:right}
}
@media(max-width:760px){
  .lzs-track{min-width:0}
  .lzs-st[aria-current]{min-width:0}
  .lzs-st[aria-current] .lb{white-space:normal;max-width:10ch;line-height:1.15}
}

/* ============================================================================
   60. V5 · RECHNER STUNDENVERRECHNUNGSSATZ (Lauf 11.3, Paket 5, E-05)
   Nur im Prototyp-Bau (NUR-PROTOTYP), bis Torsten ihn fachlich geprüft hat.
   ============================================================================ */
.rr{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--g200)}
.rr[hidden]{display:none}
/* Lauf 11.R2: Spalten dürfen schmaler werden als ihr Inhalt; bei 390 px lief das Raster sonst 27 px aus der Karte */
.rr>*{min-width:0}
.rr-ein{padding:26px;background:#fff;display:grid;gap:12px;align-content:start}
.rr-ein label{display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:12px;align-items:center;font-size:14.5px}
.rr-ein label small{display:block;color:var(--g500);font-size:12.5px;line-height:1.4}
.rr-ein input,.rr-ein select{min-height:44px;border:1px solid var(--g250);border-radius:var(--r-md);padding:0 10px;font:500 16px/1 var(--fb);
  text-align:right;font-variant-numeric:tabular-nums;width:100%;background:#fff;color:var(--ink)}
.rr-ein input:focus,.rr-ein select:focus{outline:3px solid var(--red-light);border-color:var(--red)}
.rr-knoepfe{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:6px}
.rr-knoepfe .flink{background:none;border:0;cursor:pointer;color:var(--ink)}
.rr-klein{font-size:12.5px;color:var(--g500);margin:0}
/* Lauf 11.R3: Meldungen am Feld (wie Kontaktformular), Tarifstand der Beispielwerte, Hinweise im Ergebnis */
.rr-ein input[aria-invalid="true"]{border-color:var(--red);background:var(--red-tint)}
.rr-ein .feld-fehler{margin:-6px 0 0;text-align:right}
.rr-stand{font-size:12.5px;font-weight:500;color:var(--ink);margin:0}
.rr-meldung,.rr-veraltet{margin:0;font-size:13px;line-height:1.5;padding:10px 12px;border-radius:var(--r-sm);border-left:3px solid}
.rr-meldung{color:#fff;background:rgba(255,255,255,.08);border-left-color:var(--red-bright)}
.rr-veraltet{color:rgba(255,255,255,.82);background:rgba(255,255,255,.05);border-left-color:var(--teal)}
.rr-meldung[hidden],.rr-veraltet[hidden]{display:none}
.rr-aus{background:var(--ink);color:#fff;padding:26px;display:grid;gap:16px;align-content:start}
.rr-aus .k{font:500 var(--data)/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.rr-jahr{display:flex;height:30px;margin-top:8px;border-radius:var(--r-sm);overflow:hidden;background:rgba(255,255,255,.08)}
.rr-jahr span{height:100%;flex:0 0 0%;transition:flex-basis var(--t-slow) var(--e-io)}
.rr-jahr .we,.rr-leg .we{background:rgba(255,255,255,.18)}.rr-jahr .ft,.rr-leg .ft{background:rgba(255,255,255,.32)}
.rr-jahr .ur,.rr-leg .ur{background:var(--teal-deep)}.rr-jahr .kr,.rr-leg .kr{background:var(--teal-mid)}
.rr-jahr .ve,.rr-leg .ve{background:var(--red)}
.rr-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 11px/1.3 var(--fm);color:rgba(255,255,255,.78);margin-top:8px}
.rr-leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.rr-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
.rr-zeile b{font:800 clamp(20px,2.2vw,28px)/1 var(--fd);font-variant-numeric:tabular-nums}
.rr-zeile.erg b{font-size:clamp(30px,3.6vw,46px);color:var(--red-bright)}
.rr-formel{font:700 14.5px/1.6 var(--fd);color:rgba(255,255,255,.9);margin:0}
.rr-formel .op{color:rgba(255,255,255,.5);margin:0 6px;font-family:var(--fm)}
.rr-hinweis{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.7);margin:0}
.rr-aus :focus-visible{outline-color:#fff}
@media(max-width:900px){.rr{grid-template-columns:1fr}}
@media(max-width:420px){.rr-ein label{grid-template-columns:1fr}.rr-ein{padding:20px}.rr-aus{padding:20px}.rr-ein .feld-fehler{text-align:left}}

/* --- Nachträge aus der Prüfung von Paket 4 (qc/qc-p4.md) --------------------- */
/* 1: Auf dem Handy stehen die Monate in einer wischbaren Reihe statt eines hohen Rasters. */
@media(max-width:900px){
  .mon{display:flex;overflow-x:auto;gap:6px;padding:2px 2px 8px;margin:0 -2px 14px;scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--g250) transparent;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .mf{flex:0 0 84px;scroll-snap-align:center}
  .mf[data-monat=jederzeit]{flex-basis:116px}
}
.mon-legende{margin:-12px 0 16px;font:500 11px/1.4 var(--fm);letter-spacing:.06em;color:var(--g500)}
.mon-legende[hidden]{display:none}
@media(max-width:900px){.mon-legende{margin-top:-6px}}
/* 4: Gefiltert: der Weg zurück zu allen Terminen neben der Kopfzeile. */
.t3-kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.t3-alle{min-height:44px;padding:0;border:0;background:none;cursor:pointer;font:600 var(--fs-sm)/1 var(--fb);color:var(--red);
  text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.t3-alle[hidden]{display:none}
.t3-alle:hover,.t3-alle:focus-visible{text-decoration-thickness:2px}
/* 5: Die ganze Zeile führt zum Lehrgang; Preis und Knopf liegen darüber. */
.t3 h3 a::after,.t3 h4 a::after{content:'';position:absolute;inset:0}
.t3-rechts{position:relative;z-index:1}
/* 6: Hover nur mit Maus; Titel unterstrichen wie dokumentiert. */
.mf:hover{border-color:var(--g250)}
@media(hover:hover){.mf:hover{border-color:var(--ink)}}
.t3:hover h3 a,.t3:hover h4 a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
@media(hover:none){.t3:hover:not(:focus-within)::before{transform:scaleY(0)}.t3:hover h3 a,.t3:hover h4 a{text-decoration:none}}
/* 7: Kleinschrift im Feld nicht unter 11 px. */
.mf .mj{font-size:11px;letter-spacing:.02em}
/* 13, D-14 (2): lange Wörter brechen, der Suchbegriff bleibt in seiner Schreibweise. */
.t3-was,.t3-meta{overflow-wrap:anywhere}
.sem-empty .sem-stand{overflow-wrap:anywhere}
.sem-empty .sem-stand .q{text-transform:none;letter-spacing:0;font-family:var(--fb);font-weight:600;color:var(--ink)}
/* 11: Kolophon mobil — Logo und LinkedIn in einer Zeile, Rechtliches darunter. */
@media(max-width:620px){
  .kolophon .foot-bot{grid-template-columns:1fr auto;gap:8px 16px}
  .kolophon .foot-bot img{grid-column:1;grid-row:1}
  .kolophon .foot-bot .socials{grid-column:2;grid-row:1}
  .kolophon .foot-bot .legal-links{grid-column:1/-1;grid-row:2;gap:0 16px}
}
.fb-aktiv{min-width:0;max-width:100%;flex-wrap:wrap}.fb-aktiv .fa{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}

/* --- Nachträge aus der Abschlussprüfung (qc.md) -------------------------------- */
/* B1: Die Kontaktwege heißen .kweg — .weg ist schon die Paketkarte (.pcard.weg, /seminar-einkaeufer/)
   und die eingefahrene Kopfleiste (.nav.weg). */
/* B2: Bündel-Beschriftung auf dem Handy senkrecht, damit „Maschinen“ und „Spender“ nie im Wort brechen
   (bis 560 px: bei 481–510 px brachen sie sonst noch, Nachprüfung B2a). */
@media(max-width:560px){
  .bk .glab{gap:6px;font-size:10px;letter-spacing:.04em}
  .bk .glab span{writing-mode:vertical-rl;transform:rotate(180deg);border-top:0;border-left:2px solid var(--red);
    padding:0 0 0 4px;justify-self:center;overflow-wrap:normal;white-space:nowrap}
}
/* B4: Etiketten der Kontaktwege auf Rot mit AA-Kontrast. */
.wege dt{color:rgba(255,255,255,.94)}
/* B5: Maßkette in der dunklen E-Learning-Karte der Akademie in der hellen Fassung. */
.elband p.mass{color:rgba(255,255,255,.72)}
.elband .mass .tx{color:rgba(255,255,255,.8)}
.elband .mass .pos{color:var(--teal-light)}
.elband .mass .linie::before,.elband .mass .linie::after{border-color:rgba(255,255,255,.34)}
/* B6: Kleintext im Diashow-Kopf bleibt auf hellen Bildstellen lesbar. */
.dh .eyebrow,.dh-reiter,.dh-bildtext{text-shadow:0 1px 10px rgba(17,17,19,.75),0 0 2px rgba(17,17,19,.5)}
.dh-reiter{color:rgba(255,255,255,.78)}
/* B6a: Die Eyebrow im Diashow-Kopf mit voller Deckkraft — mit .62 lag sie auf hellen Bildstellen unter 4,5 : 1. */
.dh .eyebrow.on-dark{color:rgba(255,255,255,.94)}

/* === Lauf 11.E / 11.E3 · E-Learning: Einblick in die Kurse und Modulkatalog (E-103, E-104) ===============
   Drei Bausteine mit je einer Aufgabe: Kursband (so sehen die Kurse aus), eine Folie mit Sprachwahl (in neun
   Sprachen), vier Schritte (so arbeitet man damit). Feste Seitenverhältnisse — kein Layoutsprung. V5-Radius,
   keine neuen Farben. Das Kursband ist die zweite Dauerbewegung der Website neben dem Ringatem: von Darius
   ausdrücklich gewollt, nur am Desktop, anhaltbar (E-104). */
.folie{margin:0}
.folie a{display:block;border:var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--g50);
  transition:border-color var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out)}
.folie a:hover,.folie a:focus-visible{border-color:var(--red);box-shadow:var(--sh-sm)}
.folie img{display:block;width:100%;height:auto}
.folie figcaption{font-size:var(--fs-sm);line-height:1.45;color:var(--g600);margin-top:10px}
.folie figcaption b{font-family:var(--fd);font-weight:700;color:var(--ink)}
.zwischen{font-family:var(--fd);font-weight:700;font-size:var(--fs-xs);line-height:1.4;letter-spacing:.12em;
  text-transform:uppercase;color:var(--g600);margin:var(--sp-4) 0 var(--sp-2)}
.sec-head+.zwischen{margin-top:0}

/* --- Kursband. Grundform: eine Reihe zum Schieben (ohne JavaScript, Touch, reduzierte Bewegung, Schalter
   band.lauf aus). Mit Maus und erlaubter Bewegung setzt app.js .laeuft: dann bewegt sich die Spur allein
   per CSS (transform, eine Ebene, Inhalt einmal verdoppelt) und hält unter der Maus, über den Knopf und
   außerhalb des Bildschirms. Bei Tastaturfokus nimmt app.js .laeuft weg — die Reihe steht und lässt sich
   schieben. Bildhöhe --kb-h, Breiten aus den Seitenverhältnissen (Folie 16:9, Kachel 3:2). */
.kursband{--kb-h:200px;position:relative}
.kb-fenster{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:var(--sp-1)}
.kb-spur{list-style:none;margin:0;padding:0;display:flex;width:max-content}
.kb-e{flex:none;width:calc(var(--kb-h) * 16 / 9);margin-right:var(--sp-2);scroll-snap-align:start}
.kb-e.kb-kachel{width:calc(var(--kb-h) * 3 / 2)}
/* Bis das Band auf 900 px herankommt (app.js setzt .kb-nah), stehen nur die ersten zwei Karten im Layout: Ein
   Bild ohne Fläche lädt der Browser nicht. Zu sehen ist das nie — das Band liegt dann noch außerhalb des
   Bildschirms. Ohne JavaScript stehen alle da. */
.js .kursband:not(.kb-nah) .kb-e:nth-child(n+3){display:none}
.kb-e img{height:var(--kb-h);object-fit:cover}
.kb-e figcaption{font-size:var(--fs-xs);margin-top:8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden}
.kursband.laeuft .kb-fenster{overflow:hidden;overflow:clip;scroll-snap-type:none}
.kursband.laeuft .kb-spur{animation:kb-lauf var(--kb-dauer,120s) linear infinite;will-change:transform}
.kursband.laeuft:hover .kb-spur,.kursband.laeuft.kb-halt .kb-spur,.kursband.laeuft:not(.kb-sicht) .kb-spur{animation-play-state:paused}
@keyframes kb-lauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Der Knopf sitzt rechts über dem Band, in der Zeile des Zwischentitels — er verdeckt keine Folie. */
.kb-pause{position:absolute;right:0;bottom:calc(100% + 8px);display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 11px;
  border-radius:var(--r-pill);border:1.5px solid var(--g250);background:var(--white);color:var(--ink);cursor:pointer;
  font-family:var(--fd);font-weight:700;font-size:var(--fs-xs);line-height:1;
  transition:border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.kb-pause[hidden]{display:none}
.kb-pause:hover,.kb-pause:focus-visible{border-color:var(--red);color:var(--red)}
.kb-pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}
.kb-pause .ic-los{display:none;fill:currentColor;stroke:none}
.kursband.kb-halt .kb-pause .ic-halt{display:none}
.kursband.kb-halt .kb-pause .ic-los{display:block}

/* --- Eine Folie, Sprachwahl daneben. Das Bild hat feste Maße; beim Wechsel blendet es kurz über. */
.sprachblock{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:var(--sp-3) var(--sp-5);align-items:center;
  margin-top:var(--sp-5)}
.sw-bild img{aspect-ratio:16 / 9;transition:opacity var(--t-fast) linear}
.sw-bild.wechselt img{opacity:0}
.sb-text .zwischen{margin-top:0}
.sb-text p{font-size:var(--fs-md);font-weight:300;color:var(--g600);line-height:1.6;max-width:44ch;margin:0 0 var(--sp-3)}
.sw-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-1);max-width:440px}
.sw-k{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;border:1.5px solid var(--g250);
  border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-family:var(--fd);font-weight:700;font-size:13.5px;
  line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  transition:background var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.sw-k:hover{border-color:var(--ink)}
.sw-k.an,.sw-k[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* --- Vier Schritte. Je Schritt Nummer, Name, ein Bild im gleichen Rahmen, ein Satz. Alle Bilder gleich hoch;
   Handy-Aufnahmen tragen einen schlichten Geräterahmen aus CSS. */
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.sch-kopf{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-family:var(--fd);font-size:var(--fs-md);line-height:1.3;
  border-top:1px solid var(--ink);padding-top:12px}
.sch-nr{font-family:var(--fm);font-weight:600;font-size:var(--data);letter-spacing:var(--data-ls);color:var(--sig-text,var(--sig))}
.sch-bild{display:flex;justify-content:center;align-items:center;height:232px;padding:var(--sp-2);background:var(--cream);
  border-radius:var(--r-md)}
.sch-bild a{height:100%;flex:none;max-width:100%}
.sch-bild img{width:auto;height:100%;max-width:100%;object-fit:cover;object-position:top}
.sch-bild.sch-hoch a{border:4px solid var(--ink);border-radius:14px;background:var(--ink)}
.sch-bild.sch-hoch a:hover,.sch-bild.sch-hoch a:focus-visible{border-color:var(--red)}
.sch-text{font-size:var(--fs-sm);line-height:1.5;color:var(--g600);margin:12px 0 0}

/* --- Modulkatalog: vier Gruppen nebeneinander, je Kurs eine Zeile (Symbol · Titel · Etiketten). Spalte 1
   Grundlagen und Zertifikate, Spalte 2 Fortgeschritten, Spalte 3 die Module aus fremder Produktion,
   zurückgenommen. Auf dem Handy eine Spalte, die letzte Gruppe eingeklappt (<details>). */
.katalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4) var(--sp-4);align-items:start}
.kg-grund{grid-column:1;grid-row:1}
.kg-zert{grid-column:1;grid-row:2}
.kg-fort{grid-column:2;grid-row:1 / span 2}
.kg-unter{grid-column:3;grid-row:1 / span 2}
.kg-kopf{display:block;margin:0;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.kg-kopf,.kg-kopf h3{font-family:var(--fd);font-weight:700;font-size:var(--fs-xs);line-height:1.4;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.kg-kopf h3{display:inline;margin:0}
.kg-kopf .c{font-family:var(--fm);font-weight:600;color:var(--g500);margin-left:6px}
summary.kg-kopf{cursor:pointer;list-style:none;position:relative;padding-right:28px}
summary.kg-kopf::-webkit-details-marker{display:none}
summary.kg-kopf::after{content:'+';position:absolute;right:2px;top:-4px;font-family:var(--fm);font-size:20px;font-weight:400;
  letter-spacing:0;color:var(--ink)}
details[open]>summary.kg-kopf::after{content:'–'}
.kliste{list-style:none;margin:0;padding:0}
.kz{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:12px;align-items:start;padding:11px 0;border-bottom:var(--line)}
.kz .mi svg{display:block;width:20px;height:20px;fill:none;stroke:var(--sig);stroke-width:1.7}
.kz .mt{font-family:var(--fd);font-weight:700;font-size:15px;line-height:1.35;overflow-wrap:break-word}
.kz .ml{display:block;font-family:var(--fb);font-weight:500;font-size:var(--fs-xs);line-height:1.4;color:var(--g500);margin-top:2px}
.kz .ke{display:flex;gap:6px;align-items:center;white-space:nowrap;padding-top:1px}
.et{font-family:var(--fd);font-weight:700;font-size:var(--fs-2xs);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;
  color:var(--g600);border:1px solid var(--g300);border-radius:var(--r-pill);padding:3px 8px}
.et-neu{color:var(--red);border-color:var(--red)}
.kg-unter .kg-kopf,.kg-unter .kg-kopf h3{color:var(--g600)}
.kg-unter .kg-kopf{border-bottom-color:var(--g300)}
.kg-unter .mt{font-weight:600;color:var(--g600)}
.kg-unter .mi svg,body[data-bereich] .kg-unter .mi svg{stroke:var(--g500)}
.kurslegende{font-size:var(--fs-sm);color:var(--g500);max-width:70ch;margin:0 0 var(--sp-3)}
.katalog+.kleingedruckt{margin-top:var(--sp-3)}
@media(max-width:1100px){
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1359px){
  /* Drei Spalten brauchen Platz für Titel und Etiketten in einer Zeile — darunter zwei. */
  .katalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kg-fort{grid-column:2;grid-row:1 / span 2}
  .kg-unter{grid-column:1 / -1;grid-row:3}
  .kg-unter .kliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4)}
}
@media(max-width:900px){
  .sprachblock{grid-template-columns:minmax(0,1fr);gap:0;margin-top:var(--sp-4)}
  .sb-text{display:contents}
  .sb-text .zwischen{order:1;margin-bottom:var(--sp-2)}
  .sw-bild{order:2}
  .sb-text p{order:3;margin:var(--sp-2) 0;font-size:var(--fs-base);max-width:none}
  .sw-wahl{order:4;max-width:none}
}
@media(max-width:1000px){
  /* Schmale Spalten: Der Titel bricht, die Etiketten stehen darunter, bündig mit dem Titel. */
  .kz{grid-template-columns:20px minmax(0,1fr);row-gap:5px;padding:9px 0}
  .kz .mt{hyphens:auto}
  .kz .ke{grid-column:2}
}
@media(max-width:640px){
  /* Handy: rund 1,2 Folien sichtbar — die angeschnittene zeigt, dass es weitergeht. */
  .kursband{--kb-h:calc((100vw - 2 * var(--sp-2)) / 1.2 * 9 / 16)}
  .kb-fenster{scroll-snap-type:x mandatory;margin-inline:calc(var(--sp-2) * -1);padding-inline:var(--sp-2);scroll-padding-inline:var(--sp-2)}
  .sw-k{font-size:13px;padding:0 4px}
  .schritte{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  .schritt{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:var(--sp-2);align-content:start;
    border-top:1px solid var(--ink);padding-top:12px}
  .sch-kopf{grid-column:2;grid-row:1;border-top:0;padding-top:0;margin-bottom:6px;font-size:var(--fs-base)}
  .sch-bild{grid-column:1;grid-row:1 / span 2;height:112px;padding:8px}
  .sw-bild figcaption{display:none}
  .sch-bild.sch-hoch a{border-width:3px;border-radius:9px}
  .sch-text{grid-column:2;grid-row:2;margin:0;overflow-wrap:break-word;hyphens:auto}
  .katalog{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .kg-grund,.kg-fort,.kg-zert,.kg-unter{grid-column:1;grid-row:auto}
  .kg-unter .kliste{display:block}
}
/* Großes Bild im nativen Dialog (app.js, data-gross) */
.bildgross{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;
  height:100dvh;overflow:hidden}
.bildgross[open]{display:grid;place-items:center}
.bildgross::backdrop{background:rgba(17,17,19,.9)}
.bildgross figure{margin:0;max-width:min(1440px,calc(100vw - 2 * var(--sp-2)))}
.bildgross img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);
  margin:0 auto;border-radius:var(--r-md);background:var(--g50)}
.bildgross figcaption{color:#fff;font-size:var(--fs-sm);line-height:1.45;text-align:center;margin-top:12px}
.bildgross .bg-k{position:fixed;width:44px;height:44px;border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.6);
  background:rgba(17,17,19,.6);color:#fff;cursor:pointer;display:grid;place-items:center}
.bildgross .bg-k:hover,.bildgross .bg-k:focus-visible{background:var(--red);border-color:var(--red)}
.bildgross .bg-k svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bildgross .bg-zu{top:var(--sp-2);right:var(--sp-2)}
.bildgross .bg-vor{left:var(--sp-2);bottom:var(--sp-2)}
.bildgross .bg-nach{right:var(--sp-2);bottom:var(--sp-2)}
.bildgross.einzeln .bg-vor,.bildgross.einzeln .bg-nach{display:none}
@media(prefers-reduced-motion:reduce){.folie a,.sw-bild img,.sw-k,.kb-pause{transition:none}.kursband .kb-spur{animation:none}}

/* --- E-105 · Eine linke Kante für die breiten Abschnittsköpfe (Lauf 11.F, neu gefasst in Lauf 11.F2).
   Nummer, Eyebrow und Überschrift jedes breiten Abschnitts beginnen an der Inhaltskante — der Kante von .wrap.
   Breite Inhalte (Raster, Tabellen, Bänder) dürfen breiter laufen, ihr Kopf nicht. Ohne 100vw gerechnet: Der
   Kopf sitzt in einem Kasten von der Breite der Inhaltsspalte, der in der breiten Spalte mittig steht — beide
   Spalten haben dieselbe Achse, also dieselbe Kante, mit und ohne Rollbalken.
   Zwei Ausnahmen (Darius, 30.09.2026): 1. Steht ein Bild neben dem Text, beginnt der Kopf in der Textspalte,
   Bild links und Bild rechts wechseln sich ab. 2. Schmale Spalten (Lesetext, Fragen, „Weiterlesen“,
   Rechtstexte) stehen mittig — alle gleich breit (--w-schmal) auf derselben Achse, der Kopf an ihrer Kante.
   Geprüft von _werkzeug/kantenprobe.py; weitere Ausnahmen tragen data-kante="frei". */
:root{--w-kopf:calc(var(--w-base) - 2 * var(--gut));--w-schmal:var(--w-text)}
.sec .wrap-wide>.sec-head,.wrap-wide>.g-8-4{max-width:var(--w-kopf);margin-left:auto;margin-right:auto}
.sec .wrap-wide>.sec-head>*{max-width:780px}
.sec>.wrap-text,.sec>.wrap-narrow,.sec>.wrap.faq-wrap,.legal .wrap{max-width:var(--w-schmal);margin-left:auto;margin-right:auto}
/* Textspalte in einer anderen Spalte: kein zweiter Seitenrand (am Handy stand sie sonst doppelt eingerückt),
   gleiche Textbreite, mittig. Auch im Abschnitt „Zur Einordnung“ der Consulting-Seiten (.wrap > .faq-wrap). */
.wrap .wrap-text,.wrap-text .wrap-text{max-width:calc(var(--w-schmal) - 2 * var(--gut));padding-left:0;padding-right:0}
.wrap>.faq-wrap{max-width:none}
/* Der mittige Kopf steht seit P-7 links — seine Maßkette stand noch in der Mitte. */
.sec .sec-head.center .mass{justify-content:flex-start}
.sec .sec-head.center .mass .linie{flex:1}

/* --- E-105 Nr. 3 · Das Kursband läuft ab 641 px von Bildschirmrand zu Bildschirmrand; Kopf, Zwischentitel und
   der Knopf „Band anhalten“ bleiben an der Inhaltskante. Das Fenster wird um den Seitenrand nach außen gezogen
   (50% − 50vw, bezogen auf die Inhaltsspalte). 100vw zählt einen Rollbalken mit — deshalb schneidet der
   Abschnitt (.randband) waagerecht ab, die Seite selbst wird nie breiter. Steht die Reihe (ohne JavaScript,
   Touch, Tastatur, reduzierte Bewegung), beginnt die erste Folie an der Inhaltskante; läuft sie, beginnt die
   Spur am Bildschirmrand (sonst spränge beim Neubeginn der Schleife ein leerer Streifen auf) und blendet links
   und rechts weich aus. Am Handy bleibt die Wisch-Reihe (Regel weiter oben). */
@media(min-width:641px){
  .sec.randband{overflow-x:hidden;overflow-x:clip}
  /* Kein Einrasten: scroll-padding rechnet Prozent gegen das Fenster selbst, die Inhaltskante ließe sich
     dort nicht angeben — die erste Folie rastete am Bildschirmrand ein. */
  .kb-fenster{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);scroll-snap-type:none}
  .kursband.laeuft .kb-fenster{padding-inline:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 110px,#000 calc(100% - 110px),transparent 100%)}
}

/* --- Rechtstexte aus eRecht24 (Lauf 11.F): vierte Ebene und die Quellenzeile. */
.legal h3{scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal h4{font-size:16px;margin:20px 0 6px}
.legal .callout{margin-bottom:var(--sp-4)}

/* --- Kursblatt am Kurs im Modulkatalog (Lauf 11.F): kleiner Link unter dem Titel, in der Schrift der Unterzeile.
   Die Zeile bleibt ruhig; die Tippfläche ist rund 90 px breit und 29 px hoch. */
.kz .kblatt{grid-column:2;justify-self:start;display:inline-block;font-family:var(--fb);font-weight:500;font-size:var(--fs-xs);line-height:1.4;color:var(--g600);
  margin-top:0;padding:6px 0 5px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--g300);text-underline-offset:3px}
.kz .kblatt:hover,.kz .kblatt:focus-visible{color:var(--red);text-decoration-color:currentColor}

/* Termine neben einer Nebenspalte (Hybrid, Aufbaukurs): unter 1180 px untereinander — in der schmaleren Spalte
   bricht die Terminzeile auf neun bis elf Zeilen um (Prüfung Lauf 11.F, C-5). */
@media(max-width:1180px){.g-8-4.g-termine{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}.g-8-4.g-termine>.slot{max-width:560px}}


/* ============================================================================
   Lauf 11.H · Paket A · Gestaltung und Layout (Feedback Oktober, FB-Nummern aus
   01-projekt/feedback-sammlung.md). Ein Block, nach FB-Nummer geordnet.
   ============================================================================ */

/* --- FB-001 · Kein Aufklappmenü verlässt das Fenster. Das Menü bleibt mittig unter
   seinem Punkt; app.js (Mega-Menü, einpassen()) misst beim Öffnen und schiebt es um
   --mega-dx, bis es 16 px Abstand zum Fensterrand hat. Ohne JavaScript öffnet kein Megamenü. */
.mega{transform:translate(calc(-50% + var(--mega-dx,0px)),10px)}
.nav-item.open .mega{transform:translate(calc(-50% + var(--mega-dx,0px)),0)}

/* --- FB-002 · Große Überschriften: eine Zeilenhöhe für alle Kopf- und Abschlussüberschriften
   (Montserrat 800). Vorher 0,94 bis 1,02 — Unterlängen und Kommas berührten die nächste Zeile.
   1,10: bei 1,06 blieben zwischen Unterlänge und nächster Zeile nur 1,5 px (unabhängige Prüfung, „Lösungen,“
   auf /branchenportal/ bei 390 px); 1,10 gibt sichtbar Luft, ohne die Zeilen auseinanderfallen zu lassen. */
.kopf h1,.kopf--offen h1,.pagehead h1,.hero h1,.subhero h1,.dh h1,.cta.abschluss h2{line-height:1.1}

/* --- FB-003 · Zwischenüberschrift nach einem Raster, einer Liste oder einem Hinweiskasten:
   klarer Abstand nach oben (vorher 0 bzw. 28 px). Gilt für jede .sec-head, die nicht oben im
   Abschnitt steht, sondern einem Inhaltsblock folgt. */
:is([class*="grid-"],.modgrid,.curri,.callout,.price-grid,.g-5-7,.g-7-5,.g-8-4,.zwei,ul,ol,table,.tablescroll)+.sec-head{
  margin-top:clamp(var(--sp-4),6vw,var(--sp-5))}

/* --- FB-008 · „Aus der Praxis“: aus der Textwand wird eine ruhige, nummerierte Liste — Linie
   zwischen den Einträgen, Nummer in Bereichsfarbe (wie die FAQ, D-10), Luft zwischen Frage und
   nächster Frage. Markup: <div class="wrap-text praxis"> mit h3/p-Paaren, Texte unverändert. */
.praxis{counter-reset:praxis;border-bottom:1px solid var(--g300)}
.praxis>h3{counter-increment:praxis;position:relative;margin:0;padding:var(--sp-3) 0 0 56px;
  border-top:1px solid var(--g300);font-size:var(--h4);line-height:1.3;letter-spacing:-.015em}
.praxis>h3::before{content:counter(praxis,decimal-leading-zero);position:absolute;left:0;top:calc(var(--sp-3) + .3em);
  font:600 var(--data)/1 var(--fm);letter-spacing:var(--data-ls);color:var(--sig-text,var(--sig))}
.praxis>p{margin:var(--sp-1) 0 0;padding:0 0 var(--sp-3) 56px;line-height:1.65}
@media(max-width:640px){
  .praxis>h3{padding-left:0;padding-top:calc(var(--sp-3) + 20px)}
  .praxis>h3::before{top:var(--sp-3)}
  .praxis>p{padding-left:0}
}

/* --- FB-011 · Partnerseminar: roter Punkt statt gestricheltem Kreis. */
.fmt.f-partner::before{background:var(--red);border:0;width:9px;height:9px}

/* --- FB-016 · /e-learning/#einblick: mehr Luft zwischen Kursband, Sprachfolie und den vier
   Schritten; das Band läuft ruhiger (Tempo aus daten.py × 1,35, rund 55 statt 75 px/s). */
#einblick .sprachblock{margin-top:clamp(var(--sp-4),7vw,var(--sp-6))}
#einblick .sprachblock+.zwischen{margin-top:clamp(var(--sp-4),7vw,var(--sp-6));padding-top:var(--sp-4);border-top:1px solid var(--g200)}
#einblick .kursband.laeuft .kb-spur{animation-duration:calc(var(--kb-dauer,120s) * 1.35)}

/* --- FB-020 · ZFU-Siegel auf /ueber-uns/#werdegang: dezente Vergrößerung beim Überfahren
   (3 % ≈ 3 px je Seite), nur mit Maus, nicht bei reduzierter Bewegung. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .trust .zfu-siegel img{transition:transform var(--t-base) var(--ease)}
  .trust .zfu-siegel:hover img{transform:scale(1.035)}
}

/* --- FB-029 · Inhaltsverzeichnis der Fachbeiträge: unter 981 px steht es im Fluss — die
   Regel für Seiten mit Sprungmarkenleiste schob es dort um 126 px über den Artikelanfang. */
@media(max-width:980px){body:has(.subnav) .arttoc{top:0}}

/* --- FB-046 · Sprungziel unter der Sprungmarkenleiste: scroll-padding wirkt nur am
   scrollenden Element (html), nicht an body. Leiste 52 px hoch (44 px Links + 7 px + Linie). */
html:has(.subnav){scroll-padding-top:calc(var(--nav-h) + 52px + var(--sp-2))}
/* scroll-margin addiert sich zu scroll-padding: die Regel für .prose h2 (Abschnitt 49) rechnete die Leiste schon ein,
   weil scroll-padding an body nicht wirkte. Mit Sprungmarkenleiste genügt jetzt html allein. */
body:has(.subnav) .prose h2{scroll-margin-top:0}

/* --- FB-048 · Einwilligung: die Fehlermeldung steht in einer eigenen Zeile unter dem Text,
   nicht als dritte Spalte daneben. */
.form-check{flex-wrap:wrap}
.form-check>:not(input):not(.feld-fehler){flex:1 1 0;min-width:0}
.form-check .feld-fehler{flex-basis:100%;margin:0 0 0 33px}

/* --- FB-049 · Modul-Aufklapper: lange Titel brechen um (Trennstellen aus bauen.py, TRENNUNG), statt rechts abgeschnitten zu werden;
   das Plus/Minus bleibt im Kasten. Am Handy steht „Block 1“ über dem Titel. */
.cmod .cti{min-width:0}
.cmod .cti h3{overflow-wrap:break-word}
@media(max-width:480px){
  .cmod summary{display:grid;grid-template-columns:minmax(0,1fr) 26px;gap:4px 16px;padding:18px 20px}
  .cmod .cph{grid-column:1;grid-row:1;width:auto}
  .cmod .cti{grid-column:1;grid-row:2}
  .cmod .cx{grid-column:2;grid-row:1 / span 2;align-self:center}
  .cmod .cbody{padding:0 20px 22px}
}
/* 320 px: „Gebäude|reinigungskalkulation“ (längster Wortteil, 211 px bei 19 px) passt sonst nicht in die Titelspalte und
   bräche mitten im Wort. */
@media(max-width:359px){
  .cmod summary{padding:16px;column-gap:10px}
  .cmod .cti h3{font-size:18px}
  .cmod .cbody{padding:0 16px 20px}
}

/* --- FB-053 · Kennzeile im Wissen-Kopf: unter 1001 px zwei gleich breite Spalten, die
   umbrechen dürfen; unter 421 px eine Spalte. Vorher schnitt die rechte Spalte ab. */
.kopf--kennblatt .kennzeile .v{overflow-wrap:break-word}
@media(max-width:1000px){
  .kopf--kennblatt .kennzeile{max-width:none;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto}
  .kopf--kennblatt .kennzeile>div{min-width:0;border-bottom:1px solid var(--g200);border-right:1px solid var(--g200)}
  .kopf--kennblatt .kennzeile>div:nth-child(2n){border-right:0}
}
@media(max-width:420px){
  .kopf--kennblatt .kennzeile{grid-template-columns:minmax(0,1fr)}
  .kopf--kennblatt .kennzeile>div{border-right:0}
}

/* --- FB-054 · Sortimentszeile im Beschaffungskopf: Beim Bündeln behält der Stapel seine Höhe
   (app.js setzt min-height auf die Ausgangshöhe), die roten Zeilen sammeln sich in der Mitte.
   Vorher schrumpfte der Kopf während eines Sprungs um 187 px, und das Ziel lag unter der Leiste. */
.zeilenstapel[data-gebuendelt]{justify-content:center}

/* --- FB-073 · Sprungmarkenleiste: Linktext eine Stufe dunkler (vorher 4,4 : 1 auf #ececec). */
.subnav a{color:var(--g600)}

/* --- FB-082 · Tippziele. Innenpolster mit gleich großem negativem Rand (oder Polster an
   Inline-Elementen) vergrößern die Trefferfläche, ohne das Bild zu verschieben. Reihenfolge
   nach Häufigkeit. Die Fußzeilen-Links stehen 36 px auseinander — größer geht ohne neuen
   Zeilenabstand nicht; auf Touch-Geräten bekommen sie deshalb 44 px (etwas mehr Luft). */
@media(pointer:coarse){.kolophon .foot-col a{min-height:44px}}
.crumb a{padding-block:15px}
.t3 h3 a,.t3 h4 a,.semrow h3 a{padding-block:12px}
/* Randziffern und „Bewegung anhalten“ tragen eine sichtbare Linie bzw. einen Rahmen — dort vergrößert eine
   unsichtbare Fläche (::after) die Trefferfläche, das Element selbst bleibt gleich groß. */
@media(max-width:1400px){.rn{position:relative}.rn::after{content:'';position:absolute;left:0;right:0;top:-13px;bottom:-13px}}
.marquee-halt{position:relative}
.marquee-halt::after{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px}
.info-row .id a,.legal .lmeta a{padding-block:13px}
.kz .kblatt{padding-block:14px 13px;margin-block:-8px}
.semrow .sdates .spartner,.stermine-mehr,.semrow .sdates .sanfrage,.fb-reset{padding-block:12px;margin-bottom:-12px}
.semrow .sdates .spartner,.stermine-mehr,.semrow .sdates .sanfrage{margin-top:calc(var(--sp-1) - 12px)}
.stermine .sanfrage{margin-top:-10px}
.fb-reset{margin-top:-12px}
.card .clink,.bkachel .clink{padding-block:11px;margin-bottom:-11px}
summary.kg-kopf{padding-top:15px;margin-top:-15px}
summary.kg-kopf::after{top:11px}

/* --- FB-099 · Fußzeile bei 320 px: lange Wörter („Verbrauchsmaterial“) trennen statt über
   die Spalte zu ragen. */
.kolophon .foot-col a{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* --- FB-100 · /consulting/ ohne JavaScript: die Bilder des Scrollytellings bleiben sichtbar
   (opacity:0 nur, wenn JavaScript die Ebenen umschaltet). */
html:not(.js) .scrolly-layer{opacity:1;transform:none}

/* --- FB-005 · E-Learning sichtbarer, leise: (3) hervorgehobener Eintrag mit Bild im
   Akademie-Menü, (4) kurzer Hinweis auf Seminarseiten mit passendem Kurs. */
.mega a.ml.ml-bild{display:grid;grid-template-columns:60px minmax(0,1fr);gap:2px 12px;align-items:center;
  background:var(--cream);margin-bottom:4px}
.mega a.ml.ml-bild:hover{background:var(--red-tint)}
.mega a.ml.ml-bild img{grid-row:1 / span 2;width:60px;height:40px;object-fit:cover;border-radius:var(--r-sm)}
.mega a.ml.ml-bild .mt{color:var(--teal-deep)}
.mega a.ml.ml-bild .md{margin-top:0}
.el-hinweis{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:var(--sp-4) 0 0;padding:var(--sp-2) 0 0;
  border-top:1px solid var(--g200);font-size:var(--fs-sm);line-height:1.5;color:var(--g600)}
.el-hinweis .el-k{font:600 var(--data)/1.4 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase;
  color:var(--sig-text,var(--sig))}
.el-hinweis .flink{font-size:var(--fs-sm)}

/* --- Paket D (Lauf 11.H): Abstände der neuen Bildreihen aus den Kursen. */
.kb-tabellen,.kb-folien{margin-block:var(--sp-4)}
.curri+.kb-folien{margin-top:var(--sp-4)}


/* ============================================================================
   61. PREISANSICHT · Geschäftskunde / Privatperson (Lauf 11.L, T-05-3, T-05-4, E-114; 11.M; 11.N)
   termine.py schreibt an jede Preisstelle beide Fassungen: .pa-g (Geschäftskunde: Nettopreis, darunter
   „zzgl. 19 % USt · <Gesamtpreis> inkl. USt“) und .pa-p (Privatperson: Gesamtpreis hervorgehoben, darunter
   „inkl. 19 % USt · <Nettopreis> netto“). Sichtbar ist, was data-ansicht am <html> sagt — gesetzt beim Bau
   aus preisansicht.json, umgeschaltet von app.js (Abschnitt 15), nie gespeichert. Umgeschaltet wird nur am
   Segment-Schalter (.pu, unten). Ohne JavaScript bleibt der Stand des Baus, der Schalter ist dann aus;
   die Zeile unter dem Betrag nennt ohnehin beide Preise.
   ============================================================================ */
html:not([data-ansicht="privat"]) .pa-p,
html[data-ansicht="privat"] .pa-g{display:none!important}
html:not(.js) .pu{display:none!important}

/* Zeile unter dem Betrag (Lauf 11.N, Darius 05.10.2026): eine ruhige Zusatzangabe — klein, gedämpft, nicht fett,
   kein Link; der Gesamtpreis steht an jeder Preisstelle (§ 3 PAngV), drängt sich aber nicht vor. Umbrechen nur
   hinter dem „·“ (termine.py schützt alle anderen Leerzeichen). Mindestens 13 px, Inter, auch dort, wo der
   Betrag in Montserrat oder in der Datenschrift steht (Programmzeile, Formatkarte, Wissen-Tabelle) — die
   Angaben davor („beide Teile ·“, „pro Mitarbeitendem und Monat,“) stehen in derselben Schrift. */
.pz:not(.pz-satz){font:400 max(13px,1em)/1.4 var(--fb);letter-spacing:0;text-transform:none}
.pcard .pprice .per,.semrow .sprice .u,.elband .elprice .u{font-family:var(--fb);font-weight:400}
.pr small .pz,.bb-p small .pz{white-space:normal}
.pr small .pz{display:block}

/* Satz an der ersten Preisstelle — seit Lauf 11.M nur in der Privat-Ansicht: das Widerrufsrecht (F-017) */
.preishinweis{margin:var(--sp-2) 0 0;max-width:72ch;font-size:var(--fs-sm);line-height:1.55;color:var(--g600)}
.preishinweis a{color:var(--red);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.kopf .preishinweis{margin-top:var(--sp-2)}
.t3-liste+.preishinweis{margin-top:var(--sp-3)}
.pu+.preishinweis{margin:0 0 var(--sp-2)}

/* Segment-Schalter „Preise für · Unternehmen | Privat“ (Lauf 11.N, Darius 05.10.2026; Lauf 11.M eine Beschriftung
   mit Punkten, Lauf 11.L in der Kopfleiste). Formensprache der Filter-Chips (.chip, Abschnitt 13: Pille, Rand 1,5 px
   --g250 wie ein inaktiver Chip, gewählt gefüllt in --ink mit weißer Schrift) und der Sprungleiste (der aktive
   Punkt als gefüllte Pille): zwei gleich breite Segmente in einer Pille, die Füllung gleitet beim Umschalten
   (transform, --ease, 1,25 × --t-fast = 225 ms; bei reduzierter Bewegung springt sie). Davor „Preise für“ in der Datenschrift
   („03 TERMIN“). Ruhig, kein Call-to-Action: kein Rot, kein Schatten — Rot trägt nur der Fokusring wie überall.
   Rechner 36 px hoch (klein an den Eckdaten 30 px), Schrift wie die Chips etwas kleiner. Handy und jedes
   Touch-Gerät: jedes Segment mindestens 44 × 44 px (die Segmente reichen bis an den Rand der Pille, der Rand
   ist ein aufgelegter Strich). Rechtsbündig über dem ersten Preis; am Handy in eigener Zeile, linksbündig, die
   Pille so breit wie die Spalte, höchstens 26rem. Markup: termine.preisumschalter(), BAUKASTEN § 18. */
.pu{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 12px;margin:0 0 14px}
.pu-titel{font:500 var(--data)/1.2 var(--fm);letter-spacing:var(--data-ls);text-transform:uppercase;color:var(--g500)}
.pu-wahl{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:1fr 1fr;
  border-radius:var(--r-pill);background:var(--white)}
.pu-wahl::after{content:'';position:absolute;inset:0;z-index:2;border:1.5px solid var(--g250);border-radius:inherit;
  pointer-events:none}
.pu-wahl::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  border-radius:var(--r-pill);background:var(--ink);transition:transform calc(var(--t-fast) * 1.25) var(--ease)}
html[data-ansicht="privat"] .pu-wahl::before{transform:translateX(100%)}
.pu button{position:relative;z-index:1;appearance:none;display:flex;align-items:center;justify-content:center;
  min-height:36px;margin:0;padding:0 16px;border:0;border-radius:var(--r-pill);background:none;cursor:pointer;
  font:700 12.5px/1.1 var(--fd);letter-spacing:0;white-space:nowrap;color:var(--g600);
  transition:color calc(var(--t-fast) * 1.25) var(--ease)}
.pu button:hover{color:var(--ink)}
/* Schrift auf der Füllung: aus derselben Quelle wie die Füllung (data-ansicht am <html>), damit beides nie
   auseinanderläuft; aria-checked setzt app.js im selben Schritt (Abschnitt 15). */
html:not([data-ansicht="privat"]) .pu [data-ansicht-ziel="geschaeft"],
html[data-ansicht="privat"] .pu [data-ansicht-ziel="privat"]{color:var(--white);cursor:default}
/* klein: an der Eckdaten-Karte, auf Seiten ohne anderen Umschalter (/seminar-reinraum/) */
.pu-klein button{min-height:30px;padding:0 13px;font-size:12px}
/* In der Kopfzeile einer Terminliste („Alle 15 Termine …“, „Die nächsten Termine“) rechts in derselben Zeile. */
.t3-kopfzeile .pu{margin:0 0 8px auto}
.t3-kopfzeile:has(.pu){align-items:center}
.t3-kopfzeile:has(.pu) .t3-kopf{margin-bottom:8px}
/* Eckdaten: Format-Etiketten links, der kleine Schalter rechts in derselben Zeile (bauen.eckdaten) */
.eck-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1) var(--sp-2);
  margin:0 0 var(--sp-2)}
.eck-kopf>.eck-formate{margin:0}
.eck-kopf>.pu{margin:0 0 0 auto}
/* Auf dunklem Grund (Komplettpaket-Band der Akademie): Rand und Schrift hell, die Füllung weiß, darauf --ink */
.elband .pu-titel{color:rgba(255,255,255,.7)}
.elband .pu-wahl{background:none}
.elband .pu-wahl::after{border-color:rgba(255,255,255,.55)}
.elband .pu-wahl::before{background:var(--white)}
.elband .pu button{color:rgba(255,255,255,.82)}
.elband .pu button:hover{color:var(--white)}
html:not([data-ansicht="privat"]) .elband .pu [data-ansicht-ziel="geschaeft"],
html[data-ansicht="privat"] .elband .pu [data-ansicht-ziel="privat"]{color:var(--ink)}
/* Handy: eigene Zeile, linksbündig, „Preise für“ darüber, die Pille so breit wie die Spalte; 44-px-Segmente */
@media(max-width:620px){
  .pu{flex-direction:column;align-items:stretch;gap:8px}
  .pu-wahl{display:grid;width:100%;max-width:26rem}
  .pu button,.pu-klein button{min-height:44px;padding:0 12px;font-size:13px}
  .t3-kopfzeile .pu,.eck-kopf>.pu{flex:1 1 100%;margin:0 0 8px}
  .eck-kopf{row-gap:14px}
  .eck-kopf>.pu{margin:0}
}
@media(pointer:coarse){.pu button,.pu-klein button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.pu-wahl::before,.pu button{transition:none}}
@media print{.pu{display:none!important}}
/* Buchungsleiste: der Zusatz in einer Zeile unter dem Betrag; am Handy (bis 480 px) über die volle Breite unter Betrag
   und Knopf (Abschnitt 62). Seit Lauf 11.N ist die Leiste in beiden Ansichten gleich hoch — der Seitenfuß hält wieder
   die 104 px frei wie vor Lauf 11.L (Abschnitt 55), nicht mehr 120 px in der Geschäftskunden-Ansicht. */
.bookbar .bb-p small{line-height:1.35}
/* Die Kurzzeile der Buchungsleiste setzt jedes <span> darin als Block (Abschnitt 13) — die Beträge
   ({PREISKURZ}) bleiben im Satz. */
.bookbar .bb-t span .pw,.bookbar .bb-t span .pw span{display:inline;margin:0;font:inherit;color:inherit}

/* Lauf 11.L · Paket 5 · Vorschaubilder Downloads */
/* Eigenes Vorschaubild einer Download-Kachel (Feld vorschau, daten.vorschau_eigen). Hochkant steht es wie die
   Titelseite (.dlvorschau, rechts oben). Im Querformat fuellt es den Kachelkopf: Die Bilder aus vorschau.py sind
   16 : 10 mit Transparenz, das Motiv liegt rechts oben, unten links bleibt das Format-Etikett frei (z-index 2). */
.dlcard .dltop .dlvorschau.flaeche{top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;
  object-position:right top;border-radius:0;box-shadow:none}
/* Zweiter, leiser Weg unter dem Kachel-Text (Feld anfrage, T-05-10: Kalkulationsvorlage einzeln, ohne Preis). */
.dlcard .dlb p.dlanfrage{margin-top:-8px}


/* ============================================================================
   62. MINDESTBREITEN STATT QUETSCHEN (Lauf 11.M, Layoutprobe)
   Fund Darius 05.10.2026: Neben dem Seitenkasten drückte die Terminzeile ihre Textspalte auf wenige Zeichen
   zusammen („Live- / Online- / Tag zu / Beginn …“). Regel (BAUKASTEN § 19): Spalten mit Fließtext haben eine
   Mindestbreite; Preis- und Knopfspalten weichen nach unten aus, nie die Textspalte. _werkzeug/layoutprobe.py
   misst alle Seiten in zehn Breiten und beiden Preisansichten. Die Terminzeile steht in Abschnitt 13
   (Container-Query), die Eckdaten in Abschnitt 22, der Lebenszyklus in Abschnitt 5 — hier der Rest.
   ============================================================================ */
/* Programmzeile (Akademie, „Was danach kommt“, Inhouse): Preis und Knopf nebeneinander, solange der Preis 12rem
   hat — sonst der Knopf darunter. Am Rechner steht der Preis in der eigenen Spalte (185 px), dort wirkt das nicht. */
.semrow .sright{flex-wrap:wrap;row-gap:12px}
.semrow .sprice{flex:1 1 12rem}
/* Preis in einer Tabelle (Wissen, „Werte selbst ermitteln“): die Spalte hält Betrag und Zeile darunter lesbar. */
.prose td:has(.pz){min-width:13.5rem}
/* Tabellen im Scrollbereich: Unter 48rem bekommt jede Zelle 15rem und die Tabelle scrollt seitlich (Hinweis
   „seitlich scrollen“, Abschnitt 50) statt ihre Spalten zu quetschen. Eine Tabelle ohne Kopfzeile ist eine Liste
   aus Begriff und Wert (Formalien): unter 34rem stehen beide untereinander. */
.tablescroll{container-type:inline-size}
@container (max-width:48rem){
  .tablescroll th,.tablescroll td{min-width:15rem}
}
@container (max-width:34rem){
  .tablescroll table:not(:has(thead)) tr{display:block;border-bottom:var(--line);padding:10px 0}
  .tablescroll table:not(:has(thead)) td{display:block;min-width:0;border:0;padding:2px 14px}
}
/* Downloadkarte: Dateiangabe in einer Zeile, der Knopf rutscht darunter, wenn beides nicht passt */
.dlcard .dlf{flex-wrap:wrap}
.dlcard .dlmeta{white-space:nowrap}
/* Presse: die Spalte mit Medium und Ausgabe (vorher 150 px) */
.press-item{grid-template-columns:11.5rem 1fr auto}
@media(max-width:980px){.press-item{grid-template-columns:1fr}}
/* Kopf Materialausschreibung: zwei Bildunterschriften nebeneinander, jede mindestens 11.5rem */
.kopf--liste .zs-fuss{flex-wrap:wrap}
.kopf--liste .zs-fuss>span{flex:1 1 11.5rem}
.kopf--liste .zs-fuss>span:last-child{text-align:right}
/* Bündel-Schema der Startseite: Titel und „Schema“ teilen sich die Zeile nur, wenn der Titel 11.5rem hat */
.bk-kopf{flex-wrap:wrap}
.bk-kopf>span:first-child{flex:1 1 11.5rem}
/* „Weiter bei sarikohn“ (Consulting): Bereich über dem Titel statt in einer 66-px-Spalte daneben */
@media(max-width:980px){a.pstep{grid-template-columns:minmax(0,1fr);gap:6px}}
/* Aufklappbare Themenblöcke (Fachwirt:in) in zwei Spalten: schmal geworden, steht die Phase über dem Titel und
   die Liste einspaltig */
.cmod{container-type:inline-size}
@container (max-width:34rem){
  .cmod summary{flex-wrap:wrap;row-gap:6px}
  .cmod .cph{width:100%}
  .cmod .cbody ul{columns:1}
}
/* Portraetwand: die Rolle bricht nur an „ · “ um (daten._rolle) */
.trole .tr-teil{display:inline-block}
/* Buchungsleiste am Handy (bis 480 px, der Titel ist dort schon ausgeblendet): Betrag und Knopf in der ersten Zeile,
   die Zeile darunter („zzgl. 19 % USt · … inkl. USt“ bzw. „inkl. 19 % USt · … netto“) über die volle Breite —
   vorher stand sie neben dem Knopf in 157 px auf zwei, drei Zeilen. */
@media(max-width:480px){
  .bookbar .bb-r{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center}
  .bookbar .bb-p{display:contents}
  .bookbar .bb-p>.pw{grid-column:1;grid-row:1}
  .bookbar .bb-p>small{grid-column:1/-1;grid-row:2}
  .bookbar .bb-r>.btn{grid-column:2;grid-row:1}
}