/* ── assets/css/tokens.css ── */
:root {
  /* Colors — new CI, sourced from the Miranda-Broschueren-Editor app (verified 2026-07-26) */
  --navy: #0B2545;
  --navy-deep: #081B34;
  --gold: #B89A4E;
  --white: #FFFFFF;
  --grey: #BCC6D2;
  --ink: #2A3744;

  /* Surface colors from the brochure */
  --surface-ivory: #F8F6F1;
  --surface-mist: #EDEFF2;
  --surface-blue-pale: #D7DFEA;
  --surface-blue-soft: #C7D3E2;
  --grey-secondary: #7A8694;
  --grey-secondary-alt: #8A96A4;

  /* Legacy aliases — DO NOT REMOVE. ~65 component CSS files reference these names directly. */
  --color-gold: var(--gold);
  --color-navy: var(--navy);
  --color-navy-alt: var(--navy-deep);
  --color-text: var(--ink);
  --color-text-dark: var(--ink);
  --color-white: var(--white);
  --color-offwhite: var(--surface-ivory);
  --color-faint: var(--surface-mist);

  /* Typography — Variante D. Jost (self-hosted) for display/headings; Inter (self-hosted) for body;
     Cormorant Infant italic (self-hosted) as the accent serif — see docs/superpowers/specs/2026-07-26-variante-d-typografie.md §2/§4. */
  --font-display: "Jost", sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent: "Cormorant Infant", Georgia, serif;

  /* Legacy font-name aliases — DO NOT REMOVE. Components reference these 4 names. */
  --font-heading: var(--font-display);
  --font-subheading: var(--font-display);
  --font-ui: var(--font-body);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Effects */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-smooth: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  --shadow-subtle: 0 4px 20px rgba(11, 37, 69, 0.05);
  --shadow-hover: 0 10px 40px rgba(11, 37, 69, 0.15);

  /* Hairlines — Variante D §5 "Karten": 1px dividers replacing card borders/
     backgrounds. Value matches the existing rgba(11,37,69,0.08) hairline
     convention already used on light backgrounds (about-images.css,
     about-pages.css, pricing-card.css) rather than inventing a new color. */
  --line: rgba(11, 37, 69, 0.08);

  /* Breakpoints (for reference - use in media queries) */
  /* Mobile: max-width: 575px */
  /* Tablet portrait: max-width: 768px */
  /* Tablet landscape: max-width: 991px */
  /* Laptop: max-width: 1199px */
  /* Desktop: max-width: 1499px */
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */
/* ============================================
   SELF-HOSTED FONTS (Jost, Inter, Cormorant Infant italic)
   Downloaded from Google Fonts (fonts.googleapis.com/css2, latin +
   latin-ext subsets only) and served locally from /assets/fonts/ so the
   site makes no request to fonts.googleapis.com / fonts.gstatic.com at
   runtime (DSGVO). Jost and Inter are variable fonts; Cormorant Infant is
   loaded as two static italic instances (300, 400) — only the italic cuts
   are needed, see Variante D §2/§4. All three are licensed under the SIL
   Open Font License 1.1 — see /assets/fonts/OFL.txt (Jost),
   /assets/fonts/OFL-Inter.txt (Inter) and
   /assets/fonts/OFL-CormorantInfant.txt (Cormorant Infant).
   ============================================ */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/jost-v20-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: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/jost-v20-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-v20-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Infant";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-infant-italic-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: "Cormorant Infant";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-infant-italic-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Infant";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-infant-italic-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: "Cormorant Infant";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-infant-italic-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================
   CSS RESET & BASE TYPOGRAPHY
   ============================================ */

/* Modern CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--color-gold);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-navy);
}

/* ============================================
   HEADINGS
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  line-height: 1.2;
  /* F-59 (2026-07-29): Variante D §7 Schritt 2 forderte Gewicht 300, war aber
     lange nicht umgesetzt (siehe brand.md §3). Kundenbestaetigung "Variante D
     ist die einzige Brand-Entscheidung" macht das verbindlich — betrifft
     jede Ueberschrift ohne eigene Komponentenklasse. */
  font-weight: 300;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
}

h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
}

h5 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

h6 {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

/* ============================================
   LAYOUT — CONTAINER
   ============================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Responsive padding adjustments */
@media (max-width: 768px) {
  .container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

@media (max-width: 575px) {
  .container {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive font scaling for body text */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
}

@media (max-width: 575px) {
  html {
    font-size: 14px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */
/* ============================================
   CONTAINER & LAYOUT UTILITIES
   ============================================
   Note: .container is defined in base.css.
   This file adds section wrappers, grid
   utilities, and common layout patterns.
   ============================================ */

/* ============================================
   SECTION WRAPPERS
   ============================================ */

.section {
  padding: var(--space-xl) 0;
  background-color: var(--color-white);
}

.section--dark {
  padding: var(--space-xl) 0;
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--color-white);
}

.section--dark p {
  color: rgba(255, 255, 255, 0.8);
}

.section--light {
  padding: var(--space-xl) 0;
  background-color: var(--color-offwhite);
}

.section--faint {
  padding: var(--space-xl) 0;
  background-color: var(--color-faint);
}

/* Section with reduced padding (e.g. stats, CTA banners) */
.section--compact {
  padding: var(--space-lg) 0;
}

/* ============================================
   SECTION HEADER (centered intro block)
   ============================================ */

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}

.section-header--left {
  text-align: left;
  max-width: none;
  margin-bottom: var(--space-lg);
}

/* ============================================
   GRID UTILITIES
   ============================================ */

/* Base grid reset */
.grid {
  display: grid;
  gap: var(--space-md);
}

/* 2-column grid */
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3-column grid */
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 4-column grid */
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 5-column grid (used by process steps) */
.grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Auto-fill responsive grid — minimum 300px columns */
.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Vertically centered grid items */
.grid--center {
  align-items: center;
}

/* ============================================
   SPLIT LAYOUTS (image + content)
   ============================================ */

/* 50/50 split — content vertically centered */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

/* 60/40 split — content-heavy left side */
.split--60-40 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-lg);
  align-items: center;
}

/* 40/60 split — image-heavy left side */
.split--40-60 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-lg);
  align-items: center;
}

/* Reverse column order on a split (image right → image left on mobile) */
.split--reverse > :first-child {
  order: 2;
}

.split--reverse > :last-child {
  order: 1;
}

/* ============================================
   FLEX UTILITIES
   ============================================ */

.flex {
  display: flex;
  gap: var(--space-md);
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  align-items: center;
  justify-content: space-between;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--column {
  flex-direction: column;
}

/* ============================================
   CENTERED CONTENT UTILITY
   ============================================ */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Max-width content constraint (narrower than full container) */
.content-narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.content-medium {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   RESPONSIVE — LAPTOP (max-width: 1199px)
   ============================================ */

@media (max-width: 1199px) {
  .grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   RESPONSIVE — TABLET LANDSCAPE (max-width: 991px)
   ============================================ */

@media (max-width: 991px) {
  .section,
  .section--dark,
  .section--light,
  .section--faint {
    padding: var(--space-lg) 0;
  }

  .section--compact {
    padding: var(--space-md) 0;
  }

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .split--60-40,
  .split--40-60 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================
   RESPONSIVE — TABLET PORTRAIT (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
  .grid--2 {
    grid-template-columns: 1fr;
  }

  .grid--3 {
    grid-template-columns: 1fr;
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .split,
  .split--60-40,
  .split--40-60 {
    grid-template-columns: 1fr;
  }

  /* Undo reverse ordering on mobile — stacked is always top-to-bottom */
  .split--reverse > :first-child {
    order: 0;
  }

  .split--reverse > :last-child {
    order: 0;
  }

  .flex--between {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* ============================================
   RESPONSIVE — MOBILE (max-width: 575px)
   ============================================ */

@media (max-width: 575px) {
  .section,
  .section--dark,
  .section--light,
  .section--faint {
    padding: var(--space-md) 0;
  }

  .section--compact {
    padding: var(--space-sm) 0;
  }

  .grid--4 {
    grid-template-columns: 1fr;
  }

  .grid--5 {
    grid-template-columns: 1fr;
  }

  .section-header {
    margin-bottom: var(--space-md);
  }

  .flex {
    flex-direction: column;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */
/* =========================================================
   Button Component
   Variants: primary (default), outline, hero
   ========================================================= */

/* =========================================================
   Base — Primary (gold fill, white text, subtle lift on hover)
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display); /* Variante D Regel 1: Jost traegt Buttons, nicht Inter */
  font-weight: 400;
  font-size: 14px;
  line-height: 35px;
  padding: 10px 32px;
  background-color: var(--color-gold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  z-index: 0;
}

/* Diagonal diamond wipe — centered rotated rectangle, expands height on hover */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 0;
  background-color: var(--color-gold);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 0;
  transition: height 500ms cubic-bezier(0.4, 0.5, 0.6, 0.7);
}

/* Primary: no visible ::before (gold-on-gold is a design flaw) — hide it */
.btn:not(.btn-outline):not(.btn-hero)::before {
  display: none;
}

/* Primary hover: subtle lift + shadow instead */
.btn:not(.btn-outline):not(.btn-hero):hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

/* Ensure text/content sits above the ::before pseudo-element */
.btn__text,
.btn__arrow {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Outline Variant
   White 1px border on dark bg, transparent fill.
   Hover: diagonal diamond wipe fills gold from center, text stays white, border turns gold.
   ========================================================= */
.btn-outline {
  background-color: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  padding: 10px 30px;
  line-height: 35px;
  transition: color 0.35s ease, border-color 0.35s ease;
}

/* Outline uses the diagonal wipe — re-enable the ::before and set gold fill */
.btn-outline::before {
  display: block;
  background-color: var(--color-gold);
}

.btn-outline:hover::before {
  height: 300px;
}

.btn-outline:hover {
  color: var(--color-white);
  border-color: var(--color-gold);
}

/* =========================================================
   Hero Variant — Variante D §5 "Hero > CTA"
   Was a heavy solid-white fill (line-height: 53px, 14px/700 text) that read
   as "überproportional" against the surrounding 15.5px hero copy (F-03,
   Kundenfeedback 2026-07-28). Rebuilt per spec: hairline-bordered,
   transparent, small tracked-out caps — sized like a label, not a block.
   Hover: border/text shift gold, no sweep, no fill (matches the Haarlinien
   ethos in §5 — a border, not a box).
   ========================================================= */
/* F-41, Kundenfeedback 2026-07-28: "ein bisschen verkürzen ... falls du
   aber denkst, dass der lang bleiben sollte, dann lasse ich den noch gerne
   lang." Bisher wurde nur die GESTALTUNG angepasst (Rahmen/Transparenz/
   Schriftgröße, s.o.), nicht die BREITE — genau das benennt der Kunde
   explizit als offenen Punkt. Befund: `.hero-still__content .container`
   (hero-still.css) ist ein Flex-Column-Container ohne eigenes
   `align-items`, Default ist also `stretch` — der Button wurde dadurch
   auf die volle Spaltenbreite gezogen (568px bei 1920px Breite, exakt so
   breit wie die H1-Zeile "Unser Wissen, Ihr"), obwohl sein Text
   ("SEMINARTHEMEN →") nur rund 24% davon füllt und im Rest der Box
   zentriert schwamm. Das — nicht das Polster — war die eigentliche
   Ursache der Überlänge. `align-self: flex-start` nimmt den Button aus
   dem Stretch heraus; er fällt auf seine intrinsische Breite zurück
   (Text + Pfeil + Polster ≈ 228px bei 1920px) — spürbar kürzer, ohne
   Text oder Polster anzufassen. Damit steht er im Verhältnis zur
   Überschrift als eigenständiges, kompaktes Label da statt als
   durchgezogener Balken. */
.btn-hero {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--color-white);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  line-height: 1;
  padding: 17px 34px;
  align-self: flex-start;
}

/* No ::before sweep for hero — override base */
.btn-hero::before {
  display: none;
}

.btn-hero:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* =========================================================
   Arrow Icon (hero variant only — .btn__arrow has no other caller)
   Scaled down to match the smaller CTA text (F-03); previously fixed at
   1rem/16px regardless of button size.
   ========================================================= */
.btn-hero .btn__arrow {
  margin-left: 10px;
  font-size: 0.85rem;
  display: inline-block;
}

/* Arrow inherits text color change on hover via parent's color transition */

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */
/* ============================================================
   Sub-heading Label (.sub-heading)
   ============================================================ */
.sub-heading {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  margin-bottom: 28px;
}

/* ============================================================
   Section Title Block (.section-title-block)
   Standardsektion Überschrift — Variante D §5
   ============================================================ */
.section-title,
.section-title-block .section-title {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 50px);
  color: var(--color-navy);
  line-height: 1.16;
  font-weight: 300;
  letter-spacing: 0.012em;
  margin-bottom: var(--space-md);
}

.section-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.9;
  max-width: 52ch;
  margin-bottom: var(--space-md);
}

/* ============================================================
   Center Alignment Modifier
   ============================================================ */
.section-title-block--center {
  text-align: center;
}

.section-title-block--center .section-desc {
  margin-left: auto;
  margin-right: auto;
}

.section-title__divider {
  width: 60px;
  height: 2px;
  background: var(--color-gold);
  margin: 20px auto 0;
}

.section-title-block:not(.section-title-block--center) .section-title__divider {
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   Dark Theme Modifier
   ============================================================ */
.section-title-block--dark .section-title {
  color: var(--color-white);
}

.section-title-block--dark .section-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* Sub-heading stays gold on dark backgrounds */

/* ============================================================
   Responsive
   Note: .sub-heading (Eyebrow) is already small (11px / .34em) at the
   Variante D grade — no further mobile reduction needed; the previous
   768px/575px overrides shrank it FROM 18px, which would now inflate
   it above the desktop value, so they have been removed.
   ============================================================ */

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */
/* ============================================================
   Header + Desktop Navigation
   ============================================================ */

.site-header {
  background-color: var(--color-navy-alt);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ============================================================
   F-25 — Startseiten-Header: Überlagerung auf dem Hero-Bild
   ============================================================
   Nur auf der Startseite (Klasse wird ausschließlich dort von
   header.njk über eine page.url-Prüfung vergeben — siehe dort).
   Ausgangszustand: kein eigener Hintergrund, Header liegt direkt auf
   dem Foto. Da .nav-link/.logo-light etc. schon sitewide auf helle
   Farben gestellt sind (der Header ist überall sonst navy mit heller
   Schrift), muss für den "über dem Foto"-Zustand nur der Hintergrund
   selbst transparent werden — Text/Wortmarke bleiben unverändert hell.
   Einzige Ausnahme ist ≤575px, wo die Seite sitewide auf einen weißen
   Header mit dunkler Wortmarke umschaltet (siehe Mobile-Block weiter
   unten) — dafür kippt der :not(.is-scrolled)-Block am Ende dieser
   Datei Logo/Hamburger dort gezielt zurück auf hell.

   position: fixed statt sticky: ein sticky-Header bleibt im Dokument-
   fluss und reserviert seine eigene Höhe — genau das hat zusammen mit
   height: 100svh auf dem Hero die Seite höher als das Sichtfeld
   gemacht (F-26). Als fixed nimmt der Header keinen Platz im Fluss
   ein, der Hero darunter beginnt bei y=0 und füllt exakt den
   Viewport. Der nötige Abstand des Hero-Inhalts zur Navigation kommt
   stattdessen aus --header-height (hero-still.css), gemessen in
   main.js statt geraten.

   Der Zustandswechsel (transparent → Normalfarbe) wird von der neuen
   IIFE in main.js gesteuert: ein IntersectionObserver auf das
   .header-scroll-sentinel-Element (siehe header.njk) setzt/entfernt
   .is-scrolled, sobald der Sentinel den Viewport verlässt bzw.
   wieder betritt — kein Scroll-Listener, kein Layout-Thrashing.

   F-36, Kundenfeedback 2026-07-28: "das Blaue kommt direkt, das muss
   aber ein bisschen weicher gemacht werden. Das Blaue kommt mit einem
   Schlag ... das ist zu viel." Fehleranalyse: die `transition`-Deklaration
   saß vorher NUR auf `.site-header--home:not(.is-scrolled)`. Sobald JS
   .is-scrolled ergänzt, greift diese Regel nicht mehr, und `.is-scrolled`
   selbst setzte keine `transition` für background-color — der Browser
   fällt auf den Initialwert (keine Übergangsanimation) zurück, die Zeile
   springt beim SCROLLEN NACH UNTEN instantan auf Navy. Nur die Rückrichtung
   (Scroll nach oben, .is-scrolled entfernt) hatte je eine Animation. Fix:
   `transition` sitzt jetzt auf der ungeteilten Basisregel `.site-header--home`,
   gilt dadurch für BEIDE Richtungen, mit spürbar längerer Dauer und einer
   sanft auslaufenden Kurve (ease-out-quint-artig) statt der bisherigen
   0.4s. Zusätzlich, wo der Browser es unterstützt (`animation-timeline:
   scroll()`, aktuelles Chrome/Chromium): eine echte scroll-gebundene
   Einblendung über die ersten 80px Scrollweg statt eines Sprungs beim
   (nahezu sofortigen) Sentinel-Trigger — siehe @supports-Block unten.

   F-54, Kundenfeedback 2026-07-28, wörtlich: „Einblendung des blauen
   Hintergrunds bei Header schneller machen, dauert zu lange, sollte
   vielleicht schon bei 20-100px voll drin sein." Die 340px aus F-36
   waren für ein bewusst langsames, "weiches" Einlaufen gedacht (Antwort
   auf die vorherige Beschwerde "kommt mit einem Schlag") — das ist jetzt
   spürbar zu träge. 80px liegt in der Mitte des genannten 20-100px-
   Korridors: früh genug, dass die Füllung beim ersten kurzen Scroll-
   Impuls sichtbar abgeschlossen ist, aber nicht so früh (20px), dass sie
   wieder wie ein Sprung wirkt und die F-36-Beschwerde reproduziert.
   --header-tint-duration (die Fallback-Transition für Browser ohne
   `animation-timeline: scroll()`) wird proportional mitskaliert: 0.9s
   waren auf 340px Scrollweg kalibriert, 80px sind rund 23% davon
   (80/340 ≈ 0.235) — 0.9s * 0.235 ≈ 0.21s, aufgerundet auf 0.25s, damit
   der Übergang spürbar weich bleibt und nicht wieder wie ein Sprung
   wirkt, aber deutlich schneller ist als vorher und dem neuen Tempo der
   scroll-gebundenen Variante nicht hinterherhinkt. */
.site-header--home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  --header-tint-duration: 0.25s;
  --header-tint-ease: cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    background-color var(--header-tint-duration) var(--header-tint-ease),
    box-shadow var(--header-tint-duration) var(--header-tint-ease);
}

.site-header--home:not(.is-scrolled) {
  background-color: transparent;
}

/* .is-scrolled setzt selbst NICHTS an background-color — "im
   eingefahrenen Zustand gilt wieder das normale Erscheinungsbild" heißt:
   einfach zur normalen, unveränderten .site-header-Kaskade zurückfallen
   (navy sitewide, weiß im Mobile-Block unten). Nur ein dezenter
   Trennschatten kommt hinzu, weil der Header jetzt fixed über dem
   Seiteninhalt schwebt statt wie vorher sticky im Fluss zu stehen. */
.site-header--home.is-scrolled {
  box-shadow: var(--shadow-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .site-header--home,
  .site-header--home.is-scrolled {
    transition: none;
  }
}

/* F-36 — progressive Einblendung statt Sprung, wo der Browser echte
   scroll-gebundene Animationen unterstützt (`animation-timeline: scroll()`,
   Baseline in aktuellem Chrome/Chromium/Edge). Der Sentinel in main.js
   liegt bei y=0 mit height:0 — .is-scrolled kippt dadurch faktisch beim
   ersten Scroll-Pixel, die reine Transition oben allein würde also fast
   nie "in Bewegung" zu sehen sein. Deshalb wird die sichtbare Navy-Füllung
   hier komplett von .is-scrolled entkoppelt und stattdessen an eine
   eigene, an den tatsächlichen Scrollfortschritt gebundene Ebene (::after)
   delegiert, die über die ersten 80px Scrollweg von 0 auf volle Deckkraft
   fährt (F-54, vorher 340px — siehe Begründung am Dateianfang bei
   .site-header--home) — echtes "Wachsen mit dem Scrollfortschritt" statt
   Klassen-Sprung. Ohne Unterstützung (kein @supports-Treffer) bleibt es
   beim harten, aber jetzt in beide Richtungen weich animierten
   Klassenwechsel oben. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Doppelte .site-header-Klasse: (0,3,0) statt (0,2,0). Nötig seit
       dem 2026-08-04, weil der Mobile-Block am Dateiende für denselben
       Zustand einen navy Rückfall setzt — der käme sonst später im
       Stylesheet und würde diese Transparenz überschreiben, samt der
       einblendenden Ebene darunter. */
    .site-header.site-header--home.is-scrolled {
      /* Sichtbare Farbe kommt hier ausschließlich vom ::after unten —
         die Basisregel bleibt transparent, damit kein Sprung unter der
         noch einblendenden Ebene durchscheint. */
      background-color: transparent;
    }

    .site-header--home::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-color: var(--color-navy-alt);
      opacity: 0;
      animation: header-home-tint-in linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80px;
    }

    @keyframes header-home-tint-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  }
}

/* ============================================================
   Header row — Wortmarke + Navigation + Aktionen (einzeilig, F-62)
   ============================================================ */

/* F-62: die vormalige zweite Zeile (.header-nav, eigene Trennlinie per
   border-bottom) entfällt ersatzlos — Kundenauftrag "Trennlinie zwischen
   den beiden Zeilen entfällt". Kein Ersatzrahmen an anderer Stelle: im
   ursprünglichen zweizeiligen Entwurf gab es unterhalb der Nav-Zeile
   ebenfalls keine Kante zum Seiteninhalt, das bleibt so. */

/* F-02: vertikales Polster war mit 10px extrem knapp — bei einem 51px hohen
   Button blieb kaum sichtbarer Rand zur Kante. Auf 18px angehoben (+80%).
   F-54-Zusatz (Hero-Satzkanten-Abgleich): seitliches Polster stand hier
   fest auf 40px statt des sitewide Container-Paddings `--space-md` (32px)
   — dadurch saß die Wortmarke bei Desktop-Breiten 8px rechts der
   Satzkante, die der Hero-Agent gerade exakt auf 392px (1920px Viewport)
   bzw. 152px (1440px) gelegt hat. `.header-top-inner` trägt zusätzlich zur
   `.container`-Klasse ein eigenes Padding (siehe header.njk), das deren
   responsive `--space-md`-Werte unconditional überschreibt — auf denselben
   Token gestellt statt einen abweichenden Festwert zu pflegen.

   F-62 (Zeilenzusammenlegung): die 18px vertikal bleiben unverändert
   (F-02-Proportionsarbeit) — sie sind jetzt die EINZIGEN vertikalen
   Polster des Headers statt vorher zweimal (Kopfzeile + Nav-Zeile).
   Header-Höhe ergibt sich aus dem höchsten Kind der Zeile: `.nav-link`
   bringt mit `line-height: 44px` mehr Zeilenhöhe mit als Wortmarke (24px)
   oder Icon-Button/CTA (36px) — 18 + 44 + 18 = 80px, gegenüber vorher
   153px (zwei gestapelte ~72px/80px-Zeilen + 1px Trennlinie) eine
   Reduktion um fast die Hälfte, ohne dass die Nav-Zeile selbst enger
   würde (ihre eigenen 44/18px-Werte sind identisch geblieben). Bewusst
   nicht knapper gewählt: Variante D §3 Regel 5 ("Weißraum ist das
   Material") gilt weiter — bei nur drei Nav-Punkten und einer Zeile ist
   80px eher großzügig als gedrungen.

   `gap` trennt Wortmarke und Navigation (sie bilden optisch eine Gruppe,
   direkt nebeneinander — das war exakt der Kundenwunsch: "die drei Links
   nach oben setzen"). `.header-actions` bekommt `margin-left: auto`
   (siehe dort) und wandert dadurch unabhängig von `justify-content` immer
   an den rechten Rand, ob die Navigation sichtbar ist (Desktop) oder nicht
   (≤991px, Hamburger-Ersatz) — kein `space-between`-Sonderfall pro
   Breakpoint nötig. */
.header-top-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 18px var(--space-md);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Light wordmark (wordmark-light.png: gold "MIRANDA" + WHITE "INSTITUTE") —
   for the dark navy header. The source wordmark is two-tone gold/navy; navy
   text on the navy header background is illegible, so wordmark-light.png is
   a pre-recoloured variant (navy ink swapped for white, gold ink untouched,
   anti-aliased edges preserved) rather than a CSS filter, since filters like
   brightness/invert would also wash out the gold.

   Height derivation (15px, mobile only — see responsive block below): the
   old circle+wordmark lockup rendered at a fixed 44px canvas height, but
   that 44px was mostly empty canvas padding — the actual visible lockup
   (circle + "MIRANDA INSTITUTE" text) measured ~168px wide at that height
   (296px-diameter circle + gap + text, scaled from the source 1297x340
   canvas). The new file is a pure wordmark with no circle (887x79, 11.23:1
   aspect, edge-to-glyph crop) — all of the old lockup's visual weight now
   has to be carried by the text alone. Solving for a rendered width of
   ~168px against the wordmark's own aspect ratio (168 / 11.23) gives a
   height of ~15px. 44px would look far too bulky without the circle
   balancing it (confirmed visually); 10px — matching the old lockup's
   caption-sized "MIRANDA INSTITUTE" text height in isolation — is
   illegible on its own. 15px reproduces the old lockup's actual on-screen
   footprint, and is kept as the mobile (<=575px) size.

   Desktop (>=992px) is sized up independently to 24px — in a 116px-tall
   header, 15px reads as too timid. 24px against the wordmark's fixed
   887:79 aspect ratio gives a width of 887/79*24 ≈ 269px (left to `auto`).
   Tablet (576–991px) sits between the two at 20px. See the responsive
   block at the bottom of this file for the breakpoint values. */
.logo-light {
  height: 24px;
  width: auto;
  display: block;
}

/* Dark wordmark (wordmark.png: natural gold + navy) — used only on the white
   mobile header (<=575px), where navy ink reads fine against white. Base
   value here is the desktop height for consistency with .logo-light; the
   dark variant is only ever actually visible at <=575px (see responsive
   block), where it is set back down to 15px. */
.logo-dark {
  height: 24px;
  width: auto;
  display: none;
}

/* Header CTA button override */
.header-cta {
  flex-shrink: 0;
}

/* F-02: die Basis-.btn-Regel liefert line-height: 35px. Mit dem alten
   padding von 8px kam der Button auf 51px Höhe — 42% höher als die
   36px-Icon-Buttons daneben, obwohl beide zur selben Kontrollzeile gehören.
   line-height wird hier auf 18px gesenkt, damit Button und Icon-Buttons auf
   36px Zeilenhöhe zusammenlaufen (18 + 9 + 9 = 36px). Schrift auf 11px und
   Sperrung auf 1.6px angepasst, damit der kleinere Button nicht plump wirkt. */
.header-btn {
  padding: 9px 24px;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 1.6px;
}

/* ============================================================
   Nav bar — Navigation items
   ============================================================ */

/* F-62: die Navigation sitzt jetzt als drittes Flex-Kind direkt in
   `.header-top-inner` (siehe dort) — keine eigene Zeile, kein eigenes
   Padding mehr nötig, das kommt jetzt ausschließlich vom umschließenden
   Container. `flex-shrink: 0` verhindert, dass die drei Links bei
   knapperen Desktop-Breiten (z. B. 1200px) gegen die rechts folgenden
   Aktionen gequetscht werden, bevor überhaupt die Hamburger-Schwelle
   (991px) erreicht ist. */
.main-nav {
  flex-shrink: 0;
}

/* Nav list */
.nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* F-02: Schrift von 14px auf 15px und Sperrung von .02em auf .05em angehoben
   — der Kunde nannte explizit "die Texte sind zu klein" als Alternativdiagnose;
   das nimmt einen Teil der Differenz zum (jetzt verkleinerten) Button auf,
   ohne die Fließtext-Lesbarkeit der Navigation zu beeinträchtigen. */
.nav-link {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0;
  line-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-gold);
}

/* Dropdown arrow (CSS-only chevron) */
.nav-arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: 2px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.has-dropdown:hover .nav-arrow {
  transform: rotate(225deg);
}

/* Dropdown panel */
.nav-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-white);
  min-width: 235px;
  box-shadow: rgba(40, 40, 40, 0.08) 0px 5px 83px 0px;
  padding: 15px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 100;
}

.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 6px 20px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.32px;
  color: var(--color-text-dark);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown a:hover {
  background-color: var(--color-offwhite);
  color: var(--color-gold);
}

/* ── "Weiterbildungen" mega dropdown: category column + problem column ──
   Column 1 lists the 5 fixed categories. Column 2 lists the existing
   problem-based entries — each links DIRECTLY to the matching seminar page
   (problems never get their own page), with the suggested seminar shown as
   a secondary line under the problem label. */

.nav-dropdown--mega {
  display: flex;
  align-items: flex-start;
  min-width: 600px;
  padding: 20px 0;
}

.nav-mega-col {
  padding: 0 24px;
}

.nav-mega-col--categories {
  min-width: 200px;
  border-right: 1px solid var(--color-faint);
  align-self: stretch;
}

/* F-24: Der Wrapper trägt jetzt die Flex-Größe (früher direkt auf
   .nav-mega-col--problems) und ist der Anker (position: relative) für den
   eigenen Scrollbar-Indikator, der als GESCHWISTER der scrollenden Spalte
   liegt statt als ihr Nachfahre — nur so bleibt er beim Scrollen stehen,
   ohne auf die Sticky/height:0-Trickserei der Verlaufskanten angewiesen zu
   sein (siehe Kommentar bei .nav-mega-col__fade weiter unten für den Hintergrund
   dazu, warum position:absolute innerhalb der scrollenden Spalte NICHT
   funktioniert). */
.nav-mega-col--problems-wrap {
  position: relative;
  flex: 1;
  min-width: 340px;
}

.nav-mega-col--problems {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  /* F-24: Ankerpunkt für die absolut positionierten Verlaufskanten/den
     Scroll-Hinweis unten — beide sollen im Viewport der Spalte "kleben"
     statt mit dem Inhalt mitzuscrollen. */
  position: relative;
  /* F-24: macOS blendet Scrollleisten standardmäßig aus — genau deshalb hat
     der Kunde die Scrollbarkeit nicht erkannt. scrollbar-width/-color
     erzwingt in Firefox zuverlässig eine dauerhaft sichtbare, dünne Leiste;
     ::-webkit-scrollbar (unten) färbt sie in Chrome/Safari/Edge ein, WENN
     der Browser dort überhaupt eine klassische (platzreservierende) Leiste
     zeichnet. Empirisch geprüft (Playwright, `channel: 'chrome'`, sowohl
     headless als auch mit sichtbarem Fenster): aktuelles Chrome auf macOS
     rendert trotz dieser Regeln weiterhin eine Overlay-Leiste, die nach
     Scroll-Ende automatisch ausblendet — CSS kann das auf dieser
     Plattform/Version-Kombination nicht erzwingen (auch nicht mit
     `scrollbar-gutter: stable`, separat getestet). Deshalb zusätzlich der
     eigene, JS-gesteuerte Indikator (.nav-mega-col__scrollbar-track/-thumb),
     der NUR aktiviert wird, wenn `offsetWidth === clientWidth` verrät, dass
     der Browser keine platzreservierende Leiste zeigt (main.js,
     initMegaMenuScrollCues) — er ist die eigentliche Garantie für "dauerhaft
     sichtbar"; diese Regeln hier sind ein Bonus für Firefox/Windows-Chrome. */
  scrollbar-width: thin;
  scrollbar-color: var(--grey) transparent;
}

.nav-mega-col--problems::-webkit-scrollbar {
  width: 6px;
}

.nav-mega-col--problems::-webkit-scrollbar-track {
  background: var(--color-faint);
}

.nav-mega-col--problems::-webkit-scrollbar-thumb {
  background-color: var(--grey);
  border-radius: 3px;
}

.nav-mega-col--problems::-webkit-scrollbar-thumb:hover {
  background-color: var(--grey-secondary);
}

/* F-40: Sobald der eigene Indikator aktiv ist (.no-native-scrollbar — der
   Browser zeichnet also keine platzreservierende, dauerhaft sichtbare
   Leiste, siehe checkNativeScrollbar in main.js), muss die native
   Overlay-Leiste komplett unterdrückt werden. Vorher tauchte sie beim
   tatsächlichen Scrollen zusätzlich zum eigenen Indikator auf — zwei Balken
   gleichzeitig (Kunde: „ich habe dann zwei Scrollmenüs für die Zeit, während
   ich scrolle"). display:none auf ::-webkit-scrollbar wirkt in Chrome/Safari
   auch auf die transiente Overlay-Leiste, nicht nur auf eine klassische; das
   erweitert dieselbe Erkennungslogik, die vorher nur die Sichtbarkeit des
   eigenen Indikators steuerte. Auf Plattformen MIT klassischer, Platz
   belegender Leiste (kein .no-native-scrollbar) bleiben die ::-webkit-
   scrollbar-Regeln oben unverändert wirksam — dort bleibt der eigene
   Indikator ohnehin per opacity:0 aus (siehe unten). */
.nav-mega-col--problems-wrap.no-native-scrollbar .nav-mega-col--problems::-webkit-scrollbar {
  display: none;
}

.nav-mega-col--problems-wrap.no-native-scrollbar .nav-mega-col--problems {
  scrollbar-width: none;
}

/* Eigener Scrollbar-Indikator — Geschwister der scrollenden Spalte (nicht
   ihr Nachfahre), damit er beim Scrollen der Spalte stehen bleibt statt
   mitzuwandern. F-40: jetzt ein echtes Bedienelement (Ziehen des Thumbs
   scrollt, Klick auf die Bahn springt an die Stelle — main.js); pointer-events
   ist deshalb nur in dem Zustand aktiv, in dem der Indikator auch sichtbar
   ist (.has-scroll.no-native-scrollbar), sonst bleibt er wie zuvor
   unsichtbar UND nicht interagierbar. Thumb-Höhe/-Position werden per JS
   gesetzt (main.js). */
.nav-mega-col__scrollbar-track {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  width: 4px;
  border-radius: 2px;
  background: var(--color-faint);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.nav-mega-col--problems-wrap.has-scroll.no-native-scrollbar .nav-mega-col__scrollbar-track {
  opacity: 1;
  pointer-events: auto;
}

.nav-mega-col__scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-radius: 2px;
  background: var(--grey);
  cursor: grab;
  touch-action: none;
}

.nav-mega-col__scrollbar-thumb:active,
.nav-mega-col__scrollbar-thumb.is-dragging {
  cursor: grabbing;
  background: var(--grey-secondary);
}

/* F-24: Verlaufskanten oben/unten — machen sichtbar, dass die Liste
   weitergeht. `position: absolute` scrollt mit dem Inhalt mit (der
   Scroll-Offset eines overflow:auto-Elements verschiebt seinen gesamten
   gerenderten Teilbaum, auch out-of-flow-Nachfahren mit diesem Element als
   Containing Block — nur `position: fixed`/`sticky` entkommen dem). Deshalb
   `position: sticky` mit `height: 0`: der Anker selbst nimmt keinen Platz im
   Scroll-Fluss ein (verändert `scrollHeight` nicht), bleibt aber am
   oberen/unteren Rand des sichtbaren Spalten-Viewports kleben. Die eigentliche
   Verlaufsgrafik hängt als absolut positioniertes `::before` (bzw. der
   Hinweistext als absolut positionierter Nachfahre) am Anker.
   Sichtbarkeit wird per JS (main.js, initMegaMenuScrollCues) an den
   tatsächlichen Scroll-Zustand gekoppelt:
   - `.has-scroll` fehlt ganz, wenn die Liste ohnehin vollständig passt
     (kein Overlay lügt dann über "es geht noch weiter").
   - `.is-at-top` blendet die obere Kante aus (Start der Liste).
   - `.is-at-bottom` blendet die untere Kante + den Hinweistext aus (Ende
     der Liste erreicht). */
.nav-mega-col__fade {
  position: sticky;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.nav-mega-col__fade--top {
  top: 0;
}

.nav-mega-col__fade--top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
}

.nav-mega-col__fade--bottom {
  bottom: 0;
}

.nav-mega-col__fade--bottom::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: linear-gradient(to top, var(--color-white) 45%, rgba(255, 255, 255, 0) 100%);
}

.nav-mega-col--problems.has-scroll:not(.is-at-top) .nav-mega-col__fade--top {
  opacity: 1;
}

.nav-mega-col--problems.has-scroll:not(.is-at-bottom) .nav-mega-col__fade--bottom {
  opacity: 1;
}

/* F-39: echtes <button>, hängt als absolut positionierter Nachfahre am
   (height: 0) Anker und blendet zusammen mit ihm ein/aus — die Sichtbarkeit
   (opacity) kommt weiterhin vom .nav-mega-col__fade-Elternelement oben.
   pointer-events wird HIER separat gesetzt (Button-eigene Regel statt
   geerbtem none vom Anker): vorher sah der Hinweis wie eine Schaltfläche
   aus, war aber nicht klickbar — ein Klick ging wegen pointer-events:none
   auf dem Anker ungebremst durch ihn hindurch auf das Mega-Menü darunter
   (Kunde F-39). Jetzt ist er nur dann klickbar (pointer-events: auto),
   wenn er auch sichtbar ist — dieselbe Bedingung, die die opacity des
   Ankers steuert, siehe Regel direkt darunter. main.js hält zusätzlich
   tabIndex synchron, damit er bei ausgeblendetem Zustand auch nicht per
   Tab erreichbar ist. */
.nav-mega-col__scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 3px 6px;
  border: 0;
  border-radius: 4px;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  color: var(--grey-secondary);
  text-transform: none;
  cursor: pointer;
  pointer-events: none;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.nav-mega-col--problems.has-scroll:not(.is-at-bottom) .nav-mega-col__scroll-hint {
  pointer-events: auto;
}

.nav-mega-col__scroll-hint:hover,
.nav-mega-col__scroll-hint:focus-visible {
  color: var(--color-gold);
}

.nav-mega-col__scroll-hint:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Kleiner Abwärtspfeil — gleiche Border-Chevron-Technik wie .nav-arrow, nur
   kleiner und ohne Hover-Rotation. Rein dekorativ (aria-hidden im Markup) —
   der klickbare Bereich ist der umschließende Button, nicht der Pfeil
   selbst. */
.nav-mega-col__scroll-hint-arrow {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--color-gold);
  border-bottom: 1.5px solid var(--color-gold);
  transform: rotate(45deg);
  margin-bottom: 1px;
  flex-shrink: 0;
}

/* Einmaliges, dezentes Anstupsen beim ersten Öffnen des Menüs (siehe
   main.js): die Liste rutscht wenige Pixel nach unten und federt zurück.
   Nur eine Iteration, kein Dauer-Loop — bewusst kein automatisches
   Autoscroll (Kundenwunsch verworfen: kollidiert mit der eigenen
   Mausbewegung). Wird bei prefers-reduced-motion vollständig unterdrückt. */
@keyframes nav-mega-scroll-nudge {
  0% { transform: translateY(0); }
  35% { transform: translateY(7px); }
  65% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.nav-mega-col--problems ul.is-nudging {
  animation: nav-mega-scroll-nudge 0.6s var(--transition-smooth);
}

@media (prefers-reduced-motion: reduce) {
  .nav-mega-col--problems ul.is-nudging {
    animation: none;
  }
}

.nav-mega-col__title {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding: 0 20px 8px;
}

.nav-mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-mega-col--categories a {
  display: block;
  padding: 6px 20px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.32px;
  color: var(--color-text-dark);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-mega-col--categories a:hover {
  background-color: var(--color-offwhite);
  color: var(--color-gold);
}

.nav-mega-col__all {
  display: block;
  margin-top: 10px;
  padding: 10px 20px 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-gold);
  border-top: 1px solid var(--color-faint);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-mega-col__all:hover {
  color: var(--color-navy);
}

/* Specificity note: base `.nav-dropdown a` sets `display: block` at
   specificity (0,1,1); a bare `.nav-problem-link` class selector is only
   (0,1,0) and would lose that fight, so this is qualified with the parent
   column class to win at (0,2,0) and actually become a flex column. */
.nav-mega-col--problems .nav-problem-link {
  display: flex;
  flex-direction: column;
  padding: 6px 20px;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.nav-problem-link:hover {
  background-color: var(--color-offwhite);
}

.nav-problem-label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.32px;
  color: var(--color-text-dark);
  transition: color var(--transition-fast);
}

.nav-problem-link:hover .nav-problem-label {
  color: var(--color-gold);
}

/* Suggested seminar — always present (not hover-only) so keyboard/touch
   users see it too, but it steps up in emphasis on hover. */
.nav-problem-seminar {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--grey-secondary);
  margin-top: 1px;
  transition: color var(--transition-fast);
}

.nav-problem-link:hover .nav-problem-seminar {
  color: var(--color-gold);
}

/* Header action buttons (search, email, CTA)
   F-62: `margin-left: auto` schiebt die Gruppe unabhängig davon, ob
   `.main-nav` gerade sichtbar ist (Desktop) oder per Media Query
   ausgeblendet wurde (≤991px, Hamburger übernimmt), zuverlässig an den
   rechten Rand der Zeile — kein `justify-content: space-between` nötig,
   das je nach Breakpoint unterschiedlich viele sichtbare
   Geschwister-Elemente verteilen müsste. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   Hamburger toggle
   ============================================================ */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 30px;
  height: 22px;
  position: relative;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  flex-shrink: 0;
}

/* Tippfläche auf 44×44 vergrößert, ohne die Optik anzufassen.
   Der Knopf misst sichtbar 30×22 — das ist deutlich unter den 44×44,
   die Apple als kleinste bequem treffbare Fläche nennt, und er sitzt
   zudem am Bildschirmrand. Ein Innenabstand käme nicht in Frage: Die
   drei Striche liegen `position: absolute` und beziehen sich auf die
   Polsterkante, ein Polster würde sie also auseinanderziehen. Diese
   unsichtbare Ebene vergrößert nur, was der Finger trifft.
   Gemessen 2026-08-04, 390px: vorher 30×22. */
.nav-toggle::before {
  content: "";
  position: absolute;
  inset: -11px -7px;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.hamburger-line:nth-child(1) { top: 0; }
.hamburger-line:nth-child(2) { top: 10px; }
.hamburger-line:nth-child(3) { bottom: 0; }

/* Offset 2nd line for stylised hamburger look */
.hamburger-line:nth-child(2) {
  transform: translateX(8px);
  width: 70%;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet landscape and below — hide inline navigation, show hamburger.
   F-62: vorher `.header-nav` (eigene Zeile), jetzt `.main-nav` selbst, da
   die Navigation kein eigener Zeilen-Wrapper mehr ist, sondern ein
   Flex-Kind von `.header-top-inner`. */
@media (max-width: 991px) {
  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

/* Tablet (576–991px) — wordmark steps down from the 24px desktop size to
   20px. Below 576px the mobile block further overrides this to 15px. */
@media (min-width: 576px) and (max-width: 991px) {
  .logo-light,
  .logo-dark {
    height: 20px;
  }
}

/* Mobile — white background, dark text logo, dark hamburger, hide CTA */
@media (max-width: 575px) {
  .site-header {
    background-color: var(--color-white);
  }

  .header-top {
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }

  /* F-02: etwas mehr vertikales Polster als vorher (10px), aber knapper als
     Desktop (18px) — auf 375px Breite ist die Zeile durch Hamburger + Logo
     ohnehin schon dicht besetzt (nur diese zwei sichtbar, CTA/Icons hier
     ausgeblendet), 14px genügt. */
  .header-top-inner {
    padding: 14px 20px;
  }

  .header-cta {
    display: none;
  }

  .header-icon-btn {
    display: none;
  }

  /* Swap to dark-text logo on white background */
  .logo-light {
    display: none;
  }

  .logo-dark {
    display: block;
    height: 15px;
    width: auto;
  }

  .hamburger-line {
    background-color: var(--color-navy);
  }
}

/* Startseite ≤575px: durchgehend helle Wortmarke, in JEDEM Zustand.
   ------------------------------------------------------------------
   Der Mobile-Block oben schaltet .site-header sitewide auf weißen Grund
   mit dunkler Wortmarke. Auf der Startseite stimmt das nie:
   ungescrollt liegt der Header durchsichtig über dem Hero-Foto,
   gescrollt färbt ihn die ::after-Ebene navy ein (F-36).
   Hell ist dort also in beiden Zuständen richtig.
   ------------------------------------------------------------------
   Bis zum 2026-08-04 galt diese Rückdrehung nur für
   `:not(.is-scrolled)`. Nach dem Scrollen stand dadurch die dunkle
   Wortmarke auf der navy Ebene — Gold blieb lesbar, „INSTITUTE" und die
   drei Hamburger-Striche verschwanden. Kundenmeldung mit Bildbeleg:
   „Hamburger menu ist bei mobile dunkel, sollte weiß sein, genauso das
   logo sollte 2. wort weiß sein."

   Warum es beim Messen zunächst richtig aussah: Die navy Ebene hängt an
   `@media (prefers-reduced-motion: no-preference)`. Ein Prüflauf mit
   `reducedMotion: 'reduce'` — die sonst richtige Wahl, damit die
   Hero-Diashow stillsteht — schaltet sie ab und zeigt den weißen
   Rückfall. Beides messen, nicht eines.

   Die Zustandsangabe entfällt hier deshalb ersatzlos. Weniger
   Spezifität, aber immer noch (0,2,0) durch .site-header--home +
   Nachfahre, also weiterhin über den einfachen Regeln oben. */
@media (max-width: 575px) {
  .site-header--home:not(.is-scrolled) {
    background-color: transparent;
  }

  /* Rückfall ohne scroll-gebundene Animation (reduzierte Bewegung oder
     älterer Browser): Dort greift die ::after-Ebene nicht, und ohne
     diese Zeile stünde die helle Wortmarke auf dem weißen Grund aus dem
     Mobile-Block — derselbe Fehler, nur andersherum. Der @supports-Block
     weiter oben trägt dafür eine Klasse mehr und gewinnt, wo die
     Animation läuft. */
  .site-header--home.is-scrolled {
    background-color: var(--color-navy-alt);
  }

  .site-header--home .logo-light {
    display: block;
    height: 15px;
  }

  .site-header--home .logo-dark {
    display: none;
  }

  .site-header--home .hamburger-line {
    background-color: var(--color-white);
  }
}

/* F-25 — Sentinel-Element (siehe header.njk): rein messtechnisch, kein
   sichtbarer Platzverbrauch. Header und Mobile-Nav liegen beide
   position: fixed vor ihm, daher landet er ohne weiteres Zutun am
   Kopf des Dokumentflusses, direkt vor dem Hero. */
.header-scroll-sentinel {
  height: 0;
  pointer-events: none;
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */
/* =========================================================
   Hero Section
   Full-bleed B&W photo background + navy text panel overlaid left
   ========================================================= */

.hero-section {
  position: relative;
  width: 100%;
  min-height: 680px;
  height: 680px;
  overflow: hidden;
}

/* Full-bleed background photo — fills the entire section, desaturated */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 60% 30%;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  z-index: 1;
}

/* Navy content panel — absolute overlay, left ~40%, floating (not full height) */
.hero-panel {
  position: absolute;
  top: 40px;
  left: 0;
  bottom: 40px;
  width: 40%;
  background-color: var(--color-navy); /* #0B2545 */
  z-index: 2;
  display: flex;
  align-items: center;
}

/* Topographic wavy-lines texture overlay inside the panel */
.hero-panel__topo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}

/* Text content — sits above the topo layer */
.hero-panel__content {
  position: relative;
  z-index: 2;
  padding: 60px 60px 60px 8%;
  width: 100%;
}

/* =========================================================
   Typography
   ========================================================= */

/* Gold uppercase sub-label — Eyebrow, Variante D §5 */
.hero-subtitle {
  display: block;
  font-family: var(--font-body); /* Inter */
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  margin-bottom: 34px;
}

/* H1 — Headline, Variante D §5 */
.hero-title {
  font-family: var(--font-heading); /* Jost */
  font-size: clamp(38px, 5.6vw, 66px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.014em;
  max-width: 17ch;
  margin: 0 0 30px;
}

/* Description paragraph — Fließtext, Variante D §5 */
.hero-description {
  font-family: var(--font-body); /* Inter */
  font-size: 15.5px;
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.85;
  max-width: 50ch;
  margin-bottom: 40px;
}

/* =========================================================
   Hero CTA Button
   Styled by button.css (.btn-hero): white fill, navy text, gold text on hover.
   No overrides needed here — button.css is the single source of truth.
   ========================================================= */

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet landscape (≤991px) */
@media (max-width: 991px) {
  .hero-section {
    min-height: 480px;
    height: 480px;
  }

  .hero-panel {
    width: 55%;
    top: 30px;
    bottom: 30px;
  }

  .hero-panel__content {
    padding: 50px 40px 50px 5%;
  }
}

/* Tablet portrait (≤768px) — stacked layout */
@media (max-width: 768px) {
  .hero-section {
    min-height: auto;
    display: flex;
    flex-direction: column;
  }

  /* Show background photo as a block image strip at top */
  .hero-bg {
    position: relative;
    inset: auto;
    height: 280px;
    flex-shrink: 0;
    filter: grayscale(100%);
  }

  /* Panel reverts to flow — sits below the photo, full width */
  .hero-panel {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
  }

  .hero-panel__content {
    padding: 50px 30px;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .hero-bg {
    height: 220px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */
/* =========================================================
   Video Hero Section — Harvey AI style
   Full-bleed background video + dark overlay + text
   ========================================================= */

.hero-video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

/* Background video — covers entire section */
.hero-video__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark gradient overlay — neutral black (no navy/blue) for legibility on the left,
   fading to clear on the right so the video shows through. */
.hero-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

/* Text content — left-aligned, vertically centered */
.hero-video__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding-bottom: 40px;
}

.hero-video__content .container {
  max-width: 600px;
  margin-left: 8%;
  margin-right: auto;
  padding-left: 0;
  /* Harvey-style vertical rhythm: flex-col with 20px gaps between elements */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-video__subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  /* Subtitle is outside the gap system — tighten its bottom so the
     subtitle→title reads ~12px, not the full 20px gap */
  margin-bottom: -8px;
}

.hero-video__title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.6vw, 66px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.014em;
  max-width: 17ch;
  margin: 0;
}

/* Wraps the H1 + the serif accent line beneath it (Variante D §4a) so the
   serif line's own margin-top isn't compounded by the outer flex `gap`. */
.hero-video__title-group {
  display: flex;
  flex-direction: column;
}

/* Serifenzeile — the ONLY italic-serif accent inside the hero, per
   Variante D §4. Never used for the H1 itself. */
.hero-video__serif-line {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.5vw, 29px);
  color: var(--color-gold);
  line-height: 1.35;
  margin-top: 26px;
}

.hero-video__description {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.85;
  max-width: 50ch;
  margin: 0;
}

/* ── Responsive ── */

@media (max-width: 991px) {
  .hero-video-section {
    height: 70vh;
    min-height: 500px;
  }

  .hero-video__content {
    padding-bottom: 30px;
  }

  .hero-video__content .container {
    margin-left: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    gap: 16px;
  }

  .hero-video__overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.45) 50%,
      rgba(0, 0, 0, 0.2) 100%
    );
  }
}

@media (max-width: 768px) {
  .hero-video-section {
    height: 80vh;
    min-height: 450px;
  }

  .hero-video__content {
    align-items: flex-end;
    padding-bottom: 30px;
  }

  .hero-video__content .container {
    gap: 14px;
  }
}

@media (max-width: 575px) {
  .hero-video-section {
    height: 85vh;
    min-height: 400px;
  }

  .hero-video__content {
    padding-bottom: 20px;
  }

  .hero-video__content .container {
    gap: 12px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */
/* =========================================================
   Still Hero Section
   Full-bleed background image + dark overlay + text
   ========================================================= */

/* F-26: 100vh misst auf Mobilgeräten die Höhe OHNE die ein-/ausfahrende
   Browserleiste — die Sektion wird dadurch höher gerendert, als beim
   Laden tatsächlich sichtbar ist (Kundenfeedback: "the hero section is
   too large ... larger than my view height"). 100svh ("small viewport
   height") misst stattdessen die kleinste garantierte Sichtfeldhöhe
   (Leiste ausgefahren) — die Sektion passt dadurch beim Laden immer
   vollständig ins Sichtfeld, ohne dass sie beim Ein-/Ausfahren der
   Leiste nachträglich "hüpft" (das würde 100dvh tun). Die vh-Zeile
   bleibt als Fallback für Browser ohne svh-Unterstützung stehen —
   nicht-unterstützte Werte werden von der CSS-Kaskade ignoriert,
   svh überschreibt vh dort, wo es verstanden wird. */
/* KORREKTUR 2026-07-30 (Kundenrückmeldung „Hero ist Vollbild bei meinem Mac,
   ist zu groß … 100 % bei viewheight, das ist ein Fehler"): Die Sektion
   füllte exakt das Sichtfeld. Damit steht beim Laden nichts von der
   nächsten Sektion im Bild — die Seite wirkt wie ein Poster und gibt kein
   Signal, dass darunter etwas kommt.

   85 svh lassen bei üblichen Laptop-Höhen rund 130 bis 150 Pixel der
   Folgesektion sichtbar: genug als Hinweis, ohne den Hero zu beschneiden.
   Die Deckelung auf 820 px verhindert, dass er auf hohen Monitoren wieder
   ins Plakathafte kippt. `min-height` bleibt, damit er auf flachen
   Fenstern nicht zusammenfällt. */
.hero-still-section {
  position: relative;
  width: 100%;
  height: 85vh;
  height: 85svh;
  min-height: 560px;
  max-height: 820px;
  overflow: hidden;
}

/* Background image — covers entire section */
.hero-still__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* =========================================================
   Diashow (2026-07-30, Kundenwunsch): mehrere Folien, die sich
   überblenden und dabei permanent in Bewegung sind — langsamer
   Ken-Burns-Schwenk, der sich beim Bildwechsel beschleunigt.

   Die Bewegung selbst steht NICHT hier, sondern in `main.js` über die
   Web-Animations-API. Grund: Beim Wechsel soll der laufende Schwenk aus
   seinem aktuellen Stand heraus beschleunigen. Mit CSS-Keyframes ginge
   das nur über einen Neustart der Animation — und der springt sichtbar.
   Hier stehen nur Stapelung, Überblendung und der Grundmaßstab.
   ========================================================= */
.hero-still__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Die Dauer setzt `main.js` aus data-hero-fade — der Wert hier ist nur
     ein Rückfall, falls das Script nicht läuft. */
  transition: opacity 1.5s ease-in-out;
}

.hero-still__slide.is-active {
  opacity: 1;
}

/* Ohne JavaScript bleibt die erste Folie stehen: sie trägt `is-active`
   bereits im Markup. Die übrigen haben dann keine Bildquelle (data-src)
   und sind unsichtbar — es gibt also keinen kaputten Zustand. */

/* Grundmaßstab über 1: Der Schwenk verschiebt und dreht das Bild leicht;
   ohne Übermaß liefen bei der Drehung die Ecken frei. 0,4 Grad Drehung
   bräuchten rechnerisch nur rund 1,004 — die 1,12 hier decken zusätzlich
   die Verschiebung von je 1,5 % ab und geben dem Zoom Spielraum. */
.hero-still__slide .hero-still__img {
  transform: scale(1.12);
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt weiterhin den
   Bildwechsel, aber ohne Schwenk und ohne Beschleunigung. `main.js`
   fragt dieselbe Einstellung ab und startet die Drift gar nicht erst. */
@media (prefers-reduced-motion: reduce) {
  .hero-still__slide {
    transition: opacity 0.4s linear;
  }

  .hero-still__slide .hero-still__img {
    transform: none;
    will-change: auto;
  }
}

/* The sitewide reset (base.css) sets `picture { display: block; }` with no
   explicit height. That leaves the <picture> wrapper's height auto, which
   breaks percentage-height resolution on the <img> inside it (it falls
   back to its intrinsic aspect ratio instead of filling .hero-still__bg).
   Give the wrapper an explicit 100%/100% so the img's height:100% below
   has something definite to resolve against. */
.hero-still__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-still__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* F-38, Kundenfeedback 2026-07-28: RÜCKNAHME der vorherigen Rechtslastigkeit
     (object-position: 68% center auf einem rechts auf 1780x1440
     zugeschnittenen Foto). Der Kunde: "mir gefällt es besser, wenn das
     Hintergrundbild zentriert ist ... ich glaube das liegt einfach an der
     Couch, weil die Couch dann vollständig sichtbar ist." Das Bild ist auf
     das unbeschnittene Original (2560x1440, Commit 829276f) zurückgesetzt —
     bei diesem Seitenverhältnis (16:9) deckt sich die Couch über die
     gesamte Bildbreite, ein zentrierter Ausschnitt schneidet sie an beiden
     Seiten symmetrisch statt einseitig an, Miguel bleibt mittig im Bild
     und behält oben ausreichend Kopffreiheit. */
  object-position: center;
  display: block;
}

/* Dark gradient overlay — black for legibility on the left,
   fading right so the photo still shows through. */
.hero-still__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

/* Always-on left-to-right dark gradient (F-04, Kundenfeedback 2026-07-28):
   the baked-in photo grading alone wasn't enough for text contrast, and
   the client explicitly asked for a dark gradient FROM THE LEFT — where
   the text sits — that clears out before Miguel's face on the right.
   Independent of the optional `overlay` njk param above (index.njk calls
   heroStill() without overlay=true, so that path never renders); this is
   a dedicated always-on layer scoped to this component only.

   F-37, Kundenfeedback 2026-07-28: der Kunde fand den Verlauf als solchen
   gut ("das finde ich gut"), aber die Farbe fiel auf: "ich würde dich
   bitten, ein grauen oder schwarzen Gradient zu machen und ihn quasi
   unsichtbar zu machen, also so dass der Text besser lesbar ist, aber
   dass man jetzt nicht erkennt, dass da ein Gradient ist." Der bisherige
   Farbton rgba(8, 27, 52, …) ist --navy-deep — ein sichtbarer Blauton auf
   einem warmen (beige/braunen) Foto, genau deshalb fiel er als Fläche
   auf. Umgestellt auf reines Schwarz (neutral, fügt dem warmen Foto keinen
   Farbstich hinzu) und die Deckkraft an allen Stopps deutlich
   zurückgenommen. Kontrast gemessen am gerenderten Screenshot (Pixelfarbe
   hinter dem Fließtext gegen Weiß, siehe Report) — Zielwert ≥ 4.5:1. */
.hero-still-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 30%,
    rgba(0, 0, 0, 0.12) 56%,
    rgba(0, 0, 0, 0) 78%
  );
}

/* Text content — left-aligned, vertically centered */
/* F-25: der Header liegt auf der Startseite als position: fixed über
   diesem Abschnitt (siehe .site-header--home in header.css), sonst
   säße die Überschrift unter der Navigation statt darunter sichtbar.
   --header-height wird in main.js aus der tatsächlich gerenderten
   Header-Höhe gesetzt (nicht geschätzt — die Höhe unterscheidet sich
   je Breakpoint, da die Nav-Zeile ab 991px verschwindet) und bei
   Resize/Font-Swap neu gemessen. Fallback 0px, falls JS noch nicht
   gelaufen ist oder deaktiviert ist. */
.hero-still__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding-top: var(--header-height, 0px);
  padding-bottom: 40px;
}

/* F-35, Kundenfeedback 2026-07-28: der Kunde bemängelte, dass die
   Hero-Überschrift nicht auf derselben "imaginären Linie" (Satzkante)
   liegt wie z. B. das "Ich will"-Filterlabel oder "Nächste offene
   Termine" weiter unten. Ursache war, dass dieser Block die geerbte
   `.container`-Boxlogik (max-width: 1200px; margin: auto; responsives
   padding aus base.css) mit eigenen, viewportbreiten-abhängigen Werten
   (margin-left: 8%, padding-left: 0) überschrieben hat — ein Offset, der
   bei keiner Breite mit der echten Satzkante übereinstimmte (bei 1920px
   z. B. 153px statt 392px, bei 1280px umgekehrt zu weit rechts).
   Die einzelnen Kinder (H1 max-width: 17ch, Fließtext max-width: 50ch,
   Button align-self: flex-start) begrenzen ihre eigene Breite bereits
   selbst — ein zusätzliches max-width/margin auf dem Container war nie
   nötig. Jetzt werden nur noch die Flex-Spalten-Eigenschaften gesetzt;
   Breite/Zentrierung/Padding kommen unverändert von der sitewide
   `.container`-Regel (base.css) — dieselbe Satzkante wie Filterzeile und
   Sektionsüberschriften, auf allen Breakpoints (die responsiven
   Innenabstände 32px/16px/8px greifen dadurch automatisch mit). */
.hero-still__content .container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-still__subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  margin-bottom: -8px;
}

.hero-still__title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.6vw, 66px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.014em;
  max-width: 17ch;
  margin: 0;
}

/* Wraps the H1 + the serif accent line beneath it (Variante D §4a) so the
   serif line's own margin-top isn't compounded by the outer flex `gap`. */
.hero-still__title-group {
  display: flex;
  flex-direction: column;
}

/* Serifenzeile — the ONLY italic-serif accent inside the hero, per
   Variante D §4. Never used for the H1 itself. */
.hero-still__serif-line {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.5vw, 29px);
  color: var(--color-gold);
  line-height: 1.35;
  margin-top: 26px;
}

.hero-still__description {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.85;
  max-width: 50ch;
  margin: 0;
}

/* ── Responsive ── */

@media (max-width: 991px) {
  /* F-26: gleiche svh-Begründung wie oben — greift hier besonders, weil
     diese Breite auch die Tablet/Handy-Viewports mit ein-/ausfahrender
     Browserleiste abdeckt. */
  .hero-still-section {
    height: 70vh;
    height: 70svh;
    min-height: 500px;
  }

  .hero-still__content {
    padding-bottom: 30px;
  }

  /* F-35: margin-left/padding-Overrides entfernt — s.o. Grundregel.
     margin-right war hier vorher implizit "auto" (aus der Basisregel,
     nie überschrieben); zusammen mit dem alten margin-left: auto ergab
     das in diesem Flex-Row-Elternelement (.hero-still__content) eine
     ZENTRIERTE Box statt Linksbündigkeit (klassischer "beide Margins
     auto zentrieren in Flexbox"-Effekt), sichtbar u. a. bei 991px
     (227px statt 32px Satzkante). Nur noch das breakpoint-eigene
     Spacing bleibt hier gesetzt. */
  .hero-still__content .container {
    gap: 16px;
  }

  .hero-still__overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.45) 50%,
      rgba(0, 0, 0, 0.2) 100%
    );
  }
}

@media (max-width: 768px) {
  .hero-still-section {
    height: 80vh;
    height: 80svh;
    min-height: 450px;
  }

  .hero-still__content {
    align-items: flex-end;
    padding-bottom: 30px;
  }

  .hero-still__content .container {
    gap: 14px;
  }

  /* Text is bottom-anchored at this breakpoint (see ::after fade below),
     not left-anchored — the left-to-right gradient above would darken
     the wrong zone of the image, so it's switched off here. */
  .hero-still-section::before {
    background: none;
  }

  /* Text bottom-aligns here, landing over the busiest, lightest part of the
     photo (cream wall, red pillow) instead of the graded-dark left edge
     that the desktop crop uses. Verified via screenshot at 375/768 that
     the title and paragraph lost contrast there without help. This is a
     dedicated, very subtle legibility aid — bottom-anchored to match this
     breakpoint's layout, not the left-right gradient added above for F-04
     (that one is switched off here, see the ::before rule above) — and
     only applies at this breakpoint. */
  .hero-still-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.28) 35%,
      rgba(0, 0, 0, 0) 65%
    );
  }
}

@media (max-width: 575px) {
  .hero-still-section {
    height: 85vh;
    height: 85svh;
    min-height: 400px;
  }

  .hero-still__content {
    padding-bottom: 20px;
  }

  .hero-still__content .container {
    gap: 12px;
  }

  /* F-05: at this breakpoint the mobile portrait crop (1200x1600) IS
     cropped horizontally by object-fit: cover (unlike the desktop image
     at wide viewports, where no horizontal crop occurs at all — see
     hero-miguel-desktop.jpg's own recrop above). Lowering the anchor
     point shifts the visible window toward the source photo's left edge,
     which moves Miguel — who sits further right within his own portrait
     frame — right within the mobile viewport too, without touching the
     file. Tuned empirically via screenshot at 375px; kept high enough
     that his resting hand/knee stay in frame (not fully at 0%, which
     clips his arm at the right edge). */
  .hero-still__img {
    object-position: 25% center;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */
/* =========================================================
   Logo Ticker — Harvey AI style
   Frosted-glass bar, infinite CSS scroll, right-fade mask
   ========================================================= */

@keyframes logo-ticker-scroll {
  0%   { transform: translate(0); }
  100% { transform: translate(-50%); }
}

.logo-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background: transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.logo-ticker__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  gap: 28px;
  padding-right: 32px;
}

/* Track with right-side fade mask */
.logo-ticker__track {
  flex: 1;
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.logo-ticker__overflow {
  position: relative;
  display: flex;
  overflow: hidden;
}

/* Animated container — slides left by 50% then loops */
.logo-ticker__scroll {
  display: flex;
  width: max-content;
  animation: logo-ticker-scroll 60s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* Each list (shown twice for seamless loop) */
.logo-ticker__list {
  display: flex;
  width: max-content;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.logo-ticker__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* Match Harvey's px-4 spacing: 16px L + 16px R per logo item */
  padding: 0 16px;
}

.logo-ticker__logo {
  /* 28px base height gives consistent cap-height across wordmarks.
     Harvey uses 60px on all-white pre-processed images; we use 28px
     because our set includes colored logos that need a tighter frame. */
  height: 28px;
  width: auto;
  display: block;
  /* White/inverted logos render at full opacity — the white color is the
     contrast treatment, not opacity. Colored logos get 0.75 to soften them
     on the dark bg without hiding them. Applied per-logo below. */
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.logo-ticker__logo:hover {
  opacity: 1;
}

/* Modifier for dark-on-transparent logos that need to be flipped to white on dark bg.
   These are now pure white → set opacity to 1 (full opacity, Harvey-style). */
.logo-ticker__logo--invert {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Pill wrapper — for logos with solid/white backgrounds (e.g. IHK .png).
   Removed from MediaMarkt — it uses mediamarkt-white.png which is already white. */
.logo-ticker__pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  padding: 3px 8px;
  line-height: 0;
}

/* Logo inside a pill — pill bg handles legibility, so opacity 1 */
.logo-ticker__logo--pill {
  opacity: 1;
  height: 18px;
}

/* Height modifier — taller logos (e.g. HS Fresenius 2.11:1, IHK 2:1).
   Delta is +4px from base (28→32) — subtle, keeps visual weight cohesive. */
.logo-ticker__logo--l {
  height: 32px;
  opacity: 1;
}

/* Height modifier — visually smaller marks (e.g. TK square icon at 60×60).
   At 22px the TK square reads as a compact badge rather than a blob. */
.logo-ticker__logo--s {
  height: 22px;
}

/* Wide logos need a max-width cap so they don't dominate the strip.
   MediaMarkt white PNG is 1536×208 (7.38:1) — at 28px it'd be 207px wide.
   Cap at 120px so it reads at the same visual weight as the wordmarks. */
.logo-ticker__logo--wide {
  height: 28px;
  max-width: 120px;
  object-fit: contain;
  opacity: 1;
}

/* White logos (pre-processed, already white on transparent) — full opacity */
.logo-ticker__logo--white {
  opacity: 1;
}

/* CTA button on the right */
.logo-ticker__cta {
  flex-shrink: 0;
}

.logo-ticker__btn {
  display: inline-block;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.logo-ticker__btn:hover {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
}

/* Pause animation on hover for readability */
.logo-ticker:hover .logo-ticker__scroll {
  animation-play-state: paused;
}

/* ── Responsive ── */

@media (max-width: 991px) {
  .logo-ticker__inner {
    height: 80px;
    padding-right: 20px;
    gap: 16px;
  }

  .logo-ticker__logo {
    height: 22px;
  }

  .logo-ticker__logo--l {
    height: 28px;
  }

  .logo-ticker__logo--s {
    height: 18px;
  }

  .logo-ticker__logo--wide {
    height: 22px;
    max-width: 95px;
  }

  .logo-ticker__logo--pill {
    height: 15px;
  }

  .logo-ticker__item {
    padding: 0 14px;
  }
}

@media (max-width: 768px) {
  .logo-ticker__cta {
    display: none;
  }

  .logo-ticker__inner {
    padding-right: 0;
    height: 70px;
  }

  .logo-ticker__logo {
    height: 20px;
  }

  .logo-ticker__logo--l {
    height: 26px;
  }

  .logo-ticker__logo--s {
    height: 16px;
  }

  .logo-ticker__logo--wide {
    height: 20px;
    max-width: 80px;
  }

  .logo-ticker__logo--pill {
    height: 14px;
  }

  .logo-ticker__item {
    padding: 0 12px;
  }
}

@media (max-width: 575px) {
  .logo-ticker__inner {
    height: 60px;
  }

  .logo-ticker__logo {
    height: 17px;
  }

  .logo-ticker__logo--l {
    height: 22px;
  }

  .logo-ticker__logo--wide {
    height: 17px;
    max-width: 70px;
  }

  .logo-ticker__item {
    padding: 0 10px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */
/* ==========================================================================
   F-61 — Mobile-Navigation, komplett neu entworfen
   ==========================================================================

   Diagnose des alten Bestands (siehe Report für Screenshots/Belege):

   1. z-index-Inversion (Kernfehler): .site-header lag bei z-index 1000
      (header.css), das alte .mobile-nav-Panel nur bei 999 — der komplette
      echte Header (inkl. klickbarem Logo-Link auf "/") rendert dadurch
      SICHTBAR UND KLICKBAR über dem geöffneten Menü. Ein Tap auf die
      Wortmarken-Position verließ das Menü sofort zur Startseite, ohne dass
      man das Panel je bedient hätte. Der eigene Schließen-Button des Panels
      kollidierte sichtbar mit dem echten Hamburger dahinter.
   2. Panel war auf `max-width: 460px` gedeckelt — bei 575px Viewportbreite
      blieb ein ~115px breiter Streifen der Originalseite sichtbar,
      inklusive eines zweiten, eigenständig klickbaren Hamburger-Icons
      neben dem Schließen-Button des Panels.
   3. Schließen-Button war Teil des normalen Dokumentflusses (nicht sticky)
      — bei aufgeklappten Akkordeons (23 Einträge insgesamt) scrollte er
      vollständig aus dem Bild. Kein Escape-Ersatz auf dem Touchscreen.
   4. "Weiterbildungen" (Kategorien) und "Themen" (Themen→Seminar-Links)
      waren zwei unverbundene, gleichrangige Akkordeons, obwohl sie im
      Desktop-Mega-Menü eine einzige Einheit bilden.
   5. Typografie widersprach dem seit Variante D geltenden System:
      font-family: var(--font-body) bei font-weight: 600 für Navigation —
      Regel 1 (Jost trägt Navigation) und Regel 3 (nie über 500) verletzt.
   6. CTA verlor Priorität UND Wortlaut: aus dem goldgefüllten
      `.btn.header-btn` "Beratungsgespräch" wurde ein unstyled Navy-Textlink
      "Kontaktieren".
   7. Generische Icon-Sprache (CSS-Rahmen-Chevron, flächiges Grau-Blau-
      Quadrat als Schließen-Button) statt der Inline-SVG-Sprache, die der
      Header sonst für Suche/Mail nutzt.

   Neuer Ansatz — Vollbild-Overlay mit gestaffelten Ebenen:

   - z-index 1200: bewusst über .site-header (1000) und .nav-toggle (1001),
     behebt Diagnosepunkt 1 an der Wurzel.
   - Panel ist immer 100% Breite/Höhe (kein max-width-Deckel, kein
     Scrim-Element) — bei den Breiten, in denen der Hamburger überhaupt
     erscheint (<=991px, siehe header.css), wäre ein Scrim ohnehin nie
     sichtbar gewesen (Diagnosepunkt 2).
   - Eigene Kopfzeile (.mobile-nav__bar) UND bei Unterebenen zusätzlich der
     Zurück-Kopf (.mobile-nav__screen-head) sind beide `position: sticky`
     und bleiben so unabhängig von der Scrollposition erreichbar
     (Diagnosepunkt 3).
   - "Weiterbildungen" führt auf einer einzigen Drill-in-Ebene beide
     Desktop-Spalten (Nach Kategorie + Nach Thema) — siehe mobile-nav.njk
     (Diagnosepunkt 4).
   - Navigation durchgängig auf --font-display (Jost) bei Gewicht 300–400,
     nirgends über 500 (Diagnosepunkt 5, Variante-D-Regeln 1+3).
   - CTA nutzt die echte .btn-Komponente mit dem Desktop-Wortlaut
     "Beratungsgespräch" (Diagnosepunkt 6).
   - Icons: gleiche Inline-SVG-Sprache wie Header/Footer (stroke=currentColor,
     Lucide-Stil) statt CSS-Formen (Diagnosepunkt 7).

   Mechanik: Ebene 0 (Hauptmenü) + höchstens eine Drill-in-Ebene
   (Weiterbildungen / Wissensbereich / Über uns) — nie tiefer. Nur EIN
   .mobile-nav__screen ist je sichtbar (natives [hidden]-Attribut, von JS
   umgeschaltet); Wechsel blendet die neue Ebene sanft ein (siehe
   .is-entering unten), ohne die alte animiert auszublenden — hält die
   Mechanik robust und vermeidet die Layout-Fallstricke von zwei
   gleichzeitig positionierten, unabhängig scrollenden Ebenen.

   Nur Tokens aus tokens.css, keine neuen Farb-/Schrift-/Effektwerte. Zwei
   rein strukturelle Hilfsgrößen (--mnv-bar-h/--mnv-pad-x) sind lokale
   Custom Properties für dieses eine Bauteil, keine Marken-Tokens — sie
   halten Kopfzeile/Zurück-Kopf/Innenabstand an einer Stelle synchron.
   ========================================================================== */

.mobile-nav {
  --mnv-bar-h: 64px;
  --mnv-pad-x: 20px;

  position: fixed;
  inset: 0;
  z-index: 1200; /* > .site-header (1000) und .nav-toggle (1001) — siehe oben */
  background-color: var(--white);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* verhindert Scroll-Chaining auf iOS Safari */
  -webkit-overflow-scrolling: touch;

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 576px) {
  .mobile-nav {
    --mnv-bar-h: 76px;
    --mnv-pad-x: var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav {
    transition: none;
  }
}

/* Body-Scroll-Sperre waehrend das Menue offen ist (main.js setzt zusaetzlich
   ein rechtes Padding in Hoehe der ausgeblendeten Scrollbar, damit die Seite
   nicht seitlich springt — siehe dortige lockBodyScroll()). */
body.nav-open {
  overflow: hidden;
}

/* Fokus/Hover einheitlich fuer alle interaktiven Elemente im Panel. */
.mobile-nav a:focus-visible,
.mobile-nav button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ==========================================================================
   Kopfzeile — Wortmarke + Schliessen-Button, immer sichtbar (sticky)
   ========================================================================== */

.mobile-nav__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--mnv-bar-h);
  padding-inline: var(--mnv-pad-x);
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
}

.mobile-nav__logo {
  display: flex;
  align-items: center;
}

.mobile-nav__logo img {
  height: 15px;
  width: auto;
}

@media (min-width: 576px) {
  .mobile-nav__logo img {
    height: 20px;
  }
}

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -13px; /* optisch buendig zur Panel-Kante, Tippflaeche bleibt 44px */
  padding: 0;
  background: none;
  border: none;
  color: var(--color-navy);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.mobile-nav__close svg {
  width: 20px;
  height: 20px;
}

.mobile-nav__close:hover,
.mobile-nav__close:focus-visible {
  color: var(--color-gold);
}

/* ==========================================================================
   Screens — genau eine Ebene ist je sichtbar
   ========================================================================== */

.mobile-nav__screen {
  padding: var(--space-md) var(--mnv-pad-x) var(--space-lg);
}

/* Verteidigt das native [hidden]-Verhalten explizit gegen Kaskaden-Ueber-
   raschungen (Autoren-Regeln koennten UA-`[hidden]{display:none}` sonst bei
   gleicher Spezifitaet ueberstimmen, wenn irgendwo display: auf der reinen
   Klasse gesetzt wird — hier bewusst nie der Fall, aber zur Sicherheit
   explizit gemacht). */
.mobile-nav__screen[hidden] {
  display: none;
}

/* Nur Opacity, bewusst ohne transform: .mobile-nav__screen liegt zwischen
   dem Scroll-Container (.mobile-nav) und den sticky positionierten
   .mobile-nav__screen-head-Kindern der Unterebenen. Ein transform auf
   diesem Zwischenelement erzeugt waehrend der Animationslaufzeit einen
   neuen Containing Block und destabilisiert damit deren Sticky-Position
   (in Playwright reproduzierbar: der Zurueck-Button wurde dabei nicht
   mehr als "stable" erkannt). Opacity hat diesen Nebeneffekt nicht. Die
   Klasse wird zusaetzlich per JS nach Animationsende wieder entfernt
   (main.js, playEnterAnimation) statt dauerhaft mit fill-mode:both zu
   halten — haelt das Element danach vollstaendig in seinem Ruhezustand. */
@keyframes mobileNavScreenIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Curve entspricht --transition-smooth (0.4s cubic-bezier(0.25,1,0.5,1)) —
   im @keyframes-Kontext nicht als Custom Property wiederverwendbar (die
   Token-Definition buendelt Dauer+Kurve als ein transition-Shorthand-
   Value), deshalb die Kurve direkt uebernommen statt eine zweite Kurve zu
   erfinden. */
.mobile-nav__screen.is-entering {
  animation: mobileNavScreenIn 0.36s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__screen.is-entering {
    animation: none;
  }
}

/* ==========================================================================
   Ebene 0 — Hauptmenue
   ========================================================================== */

.mobile-nav__list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
}

.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  min-height: 60px;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(21px, 6vw, 25px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.mobile-nav__row:hover,
.mobile-nav__row:focus-visible {
  color: var(--color-gold);
}

.mobile-nav__row-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit; /* folgt .mobile-nav__row automatisch ueber currentColor */
}

/* Kein eigenes border-top hier: die letzte Zeile von .mobile-nav__list hat
   bereits eine Haarlinie (.mobile-nav__row); eine zweite Linie direkt
   darunter erzeugte nur eine funktionslose, wie ein Leerabschnitt
   wirkende Luecke zwischen zwei Trennern statt eines einzigen ruhigen
   Uebergangs. */
.mobile-nav__cta-block {
  margin-top: var(--space-sm);
}

.mobile-nav__cta.btn {
  display: inline-flex;
  padding: 14px 36px;
  margin-bottom: var(--space-sm);
}

.mobile-nav__mail {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-nav__mail svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mobile-nav__mail:hover,
.mobile-nav__mail:focus-visible {
  color: var(--color-gold);
}

.mobile-nav__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.mobile-nav__social-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-secondary);
}

.mobile-nav__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  color: var(--color-navy);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-nav__social-link:hover,
.mobile-nav__social-link:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-white);
}

/* ==========================================================================
   Ebene 1 — gemeinsame Bausteine (Weiterbildungen / Wissensbereich / Ueber uns)
   ========================================================================== */

/* Full-Bleed-Trick: negatives Margin hebt das Innenabstand-Padding des
   Eltern-Screens fuer die Kopfzeile auf, das eigene Padding stellt die
   Fluchtlinie zum restlichen Inhalt wieder her — noetig, damit der sticky
   Hintergrund beim Scrollen randlos deckt statt eine Luecke an den
   Panel-Kanten zu zeigen. */
.mobile-nav__screen-head {
  position: sticky;
  top: var(--mnv-bar-h);
  z-index: 1;
  margin: calc(var(--space-md) * -1) calc(var(--mnv-pad-x) * -1) 0;
  padding: var(--space-sm) var(--mnv-pad-x) var(--space-sm);
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
}

.mobile-nav__back {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-left: -6px; /* gleicht das Icon-Innenpadding visuell zur Kante aus */
  padding: 0 6px;
  background: none;
  border: none;
  color: var(--grey-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.mobile-nav__back-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.mobile-nav__back:hover,
.mobile-nav__back:focus-visible {
  color: var(--color-gold);
}

.mobile-nav__screen-title {
  margin: 10px 0 0;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 7vw, 32px);
  line-height: 1.2;
}

.mobile-nav__screen-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin-top: 14px;
  background-color: var(--color-gold);
}

.mobile-nav__screen-body {
  padding-top: var(--space-md);
}

.mobile-nav__eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.mobile-nav__eyebrow--themen {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.mobile-nav__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__sublist li {
  border-bottom: 1px solid var(--line);
}

.mobile-nav__sublist li:last-child {
  border-bottom: none;
}

/* :not(.mobile-nav__problem) grenzt bewusst gegen die zweizeiligen
   Themen-Eintraege ab, die dieselbe <ul> (mobile-nav__sublist +
   mobile-nav__sublist--problems auf demselben Element, siehe .njk) teilen,
   aber eine eigene, gegensaetzliche flex-column-Ausrichtung brauchen (siehe
   .mobile-nav__problem weiter unten) — ohne den Ausschluss gewinnt diese
   Regel wegen hoeherer Selektor-Spezifitaet (Klasse+Typ) gegen die
   einfache .mobile-nav__problem-Klasse und zentriert deren Text
   faelschlich horizontal statt ihn linksbuendig zu lassen. */
.mobile-nav__sublist a:not(.mobile-nav__problem) {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-nav__sublist a:not(.mobile-nav__problem):hover,
.mobile-nav__sublist a:not(.mobile-nav__problem):focus-visible {
  color: var(--color-gold);
}

.mobile-nav__all {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-nav__all:hover,
.mobile-nav__all:focus-visible {
  color: var(--color-navy);
}

/* Themen-Eintraege: zweizeilig wie im Desktop-Mega-Menue (Problem-Label +
   Ziel-Seminar), siehe .nav-problem-link/.nav-problem-label/
   .nav-problem-seminar in header.css — gleiche Datenpaarung, fuer Mobile
   groesser gesetzt. Haarlinien zwischen den Eintraegen kommen bereits von
   der gemeinsamen .mobile-nav__sublist-li-Regel oben (dieselbe <ul> traegt
   beide Klassen, siehe .njk) — hier keine zweite, redundante Regel noetig. */
.mobile-nav__problem {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 48px;
  padding: 10px 0;
  justify-content: center;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-nav__problem-label {
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.mobile-nav__problem-seminar {
  color: var(--grey-secondary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  transition: color var(--transition-fast);
}

.mobile-nav__problem:hover .mobile-nav__problem-label,
.mobile-nav__problem:focus-visible .mobile-nav__problem-label,
.mobile-nav__problem:hover .mobile-nav__problem-seminar,
.mobile-nav__problem:focus-visible .mobile-nav__problem-seminar {
  color: var(--color-gold);
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */
/* ============================================================
   Feature Cards — 3-Panel Accordion Strip
   Sits flush below the hero section.
   Desktop: horizontal flex with hover-expand accordion behavior.
   ============================================================ */

.features-section {
  position: relative;
  width: 100%;
  margin-top: 0;
  padding-bottom: 0;
  overflow: visible;
  background-color: var(--color-white);
}

/* Gold decorative circle — bottom-left corner of the strip */
.features-section::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-gold);
  z-index: 10;
  pointer-events: none;
}

/* The accordion flex container — small gap between panels */
.features-accordion {
  display: flex;
  gap: 3px;
  height: 347px;
  width: 100%;
  overflow: hidden;
}

/* ---- Base panel ---- */
.feature-item {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center center;

  /* Default: all panels roughly equal */
  flex: 1 1 0;
  min-width: 80px;

  /* Smooth width transition */
  transition: flex-grow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
}

/* Panel 1 (content type) — default active/expanded; shift bg-position so both people in the couple photo are visible in the left portion of the panel */
.feature-item--content {
  min-width: 200px;
  background-position: 30% center;
}

/* Default flex sizes — panel 1 is the default expanded panel */
.feature-item--active {
  flex-grow: 2.2;
}

/* When any panel is hovered:
   - All non-hovered panels shrink
   - The hovered panel expands */
.features-accordion:hover .feature-item {
  flex-grow: 0.5;
}
.features-accordion .feature-item:hover {
  flex-grow: 3;
}

/* ================================================================
   PANEL TYPE: content (Panel 1 — photo bg + white content card)
   ================================================================ */

/* Panel 1: background image fills full panel (set on the .feature-item element).
   The white content card is absolutely positioned on the RIGHT half. */
.feature-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;

  /* Visible by default (panel 1 is active) */
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* White content card — takes up the RIGHT portion of panel 1.
   The background photo shows through on the left side.
   When panel 1 collapses (another panel is hovered), opacity goes to 0
   and the full background photo reveals. */
.feature-content__text {
  margin-left: auto;
  width: 48%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 32px;
  background-color: var(--color-white);
  position: relative;
  z-index: 2;
  min-width: 0;
}

/* When panel 1 is NOT hovered but another panel IS hovered:
   hide the white content to reveal the full photo background */
.features-accordion:hover .feature-item--content:not(:hover) .feature-content {
  opacity: 0;
}

/* When panel 1 is hovered: keep content visible */
.features-accordion .feature-item--content:hover .feature-content {
  opacity: 1;
}

.feature-icon {
  margin-bottom: 14px;
  flex-shrink: 0;
}

.feature-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--color-gold);
  color: var(--color-gold);
}

.feature-icon--white svg {
  fill: none;
  stroke: var(--color-white);
  color: var(--color-white);
}

.feature-heading {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--color-navy);
  margin: 0 0 14px 0;
  line-height: 1.2;
}

.feature-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 24px 0;
}

.feature-cta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.feature-cta:hover {
  color: var(--color-navy);
}

.feature-cta__arrow {
  transition: transform var(--transition-fast);
}

.feature-cta:hover .feature-cta__arrow {
  transform: translateX(4px);
}

/* White variant CTA (for dark-overlay panels) */
.feature-cta--white {
  color: var(--color-white);
}

.feature-cta--white:hover {
  color: var(--color-gold);
}

/* ================================================================
   PANEL TYPE: dark-overlay (Panels 2 & 3 — photo + dark tint)
   ================================================================ */

.feature-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 37, 69, 0.80);
  z-index: 1;
  transition: background-color 0.5s ease;
}

/* Slightly lighten overlay on hover so photo shows through more */
.feature-item--dark-overlay:hover .feature-overlay {
  background-color: rgba(11, 37, 69, 0.65);
}

/* Content wrapper — centered in the panel */
.feature-overlay-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 25px;
  color: var(--color-white);
}

/* ---- Collapsed state: icon + short heading ---- */
.feature-overlay-collapsed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
  transform: translateY(0);
}

/* ---- Expanded state: icon + heading + body + CTA ---- */
.feature-overlay-expanded {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 0;
  position: absolute;
  inset: 0;
  padding: 35px 30px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
  pointer-events: none;
}

/* On hover: hide collapsed, show expanded */
.feature-item--dark-overlay:hover .feature-overlay-collapsed {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.feature-item--dark-overlay:hover .feature-overlay-expanded {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Icon in the expanded state — left-aligned */
.feature-icon--expanded {
  margin-bottom: 12px;
  align-self: flex-start;
}

/* Heading inside dark overlay (both collapsed and expanded) */
.feature-heading--overlay {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-white);
  margin: 0 0 14px 0;
  line-height: 1.2;
}

/* Body text in expanded overlay */
.feature-desc--overlay {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991px) {
  .features-section {
    padding-bottom: 0;
  }

  .features-accordion {
    flex-direction: column;
    height: auto;
  }

  .feature-item {
    min-height: 220px;
    flex: none !important;
    width: 100%;
    transition: none;
  }

  /* On mobile: show white content always for content panel */
  .feature-item--content .feature-content {
    opacity: 1 !important;
    flex-direction: column;
  }

  .feature-content__text {
    margin-left: 0;
    width: 100% !important;
    flex: 1 1 100%;
  }

  /* On mobile: show expanded state always for dark-overlay panels */
  .feature-overlay-collapsed {
    display: none;
  }

  .feature-overlay-expanded {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    inset: auto;
    padding: 30px 25px;
  }

  .feature-overlay-content {
    position: relative;
    inset: auto;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .feature-item--dark-overlay {
    min-height: 260px;
  }

  /* Reset hover accordion on tablet/mobile */
  .features-accordion:hover .feature-item,
  .features-accordion .feature-item:hover {
    flex-grow: 1;
    min-width: auto;
  }
}

@media (max-width: 575px) {
  .features-accordion {
    height: auto;
  }

  .feature-item {
    min-height: 200px;
  }

  .feature-item--dark-overlay {
    min-height: 230px;
  }

  .feature-content__text {
    padding: 28px 24px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */
.about-images {
  position: relative;
  /* height driven by primary image; secondary overlaps at bottom-left */
  padding-bottom: 80px;
  padding-left: 20px;
}

.about-image-primary {
  position: relative;
  width: 85%;
  margin-left: auto; /* push primary to the right within the column */
  z-index: 1;
}

.about-image-primary img {
  width: 100%;
  height: 420px;
  display: block;
  object-fit: cover;
  /* Ankert oben: F-57 — Kopf von Annika Bock bleibt in jedem Breakpoint
     sichtbar, bei sehr breiten (kleinen) Containern wird eher unten
     beschnitten. */
  object-position: center top;
}

.about-image-secondary {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 55%;
  z-index: 2; /* sits on top of the primary image */
  box-shadow: 0 8px 30px rgba(11, 37, 69, 0.22);
  border: 4px solid var(--color-white);
}

.about-image-secondary img {
  width: 100%;
  height: 220px;
  display: block;
  object-fit: cover;
  /* Ankert oben: Kopf/Gesicht des Portraits bleibt in jedem Breakpoint sichtbar. */
  object-position: center top;
}

/* ============================================================
   About section right-side content layout
   ============================================================ */

.about-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* F-58: entspricht der "Vorspann"-Vorgabe fuer Standardsektionen
   (Variante D §5 / brand.md .section-desc) — Inter 300, 16px, 1.9,
   max-width 52ch. Fixe px statt rem, damit die Groesse nicht an der
   responsiven html-Schriftgroesse (base.css) haengt. */
.about-desc p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.9;
  max-width: 52ch;
  margin: 0 0 var(--space-sm);
}

/* Vision + Mission as two columns */
.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

/* F-58: keine exakte Spec-Zeile fuer diese zweispaltige Mini-Ueberschrift —
   naechstliegende dokumentierte Analogie ist "Karten > Titel" (Variante D
   §5 / seminar-card.css .seminar-card__title): Jost 300, 25px, 1.28,
   letter-spacing .008em. Regel 3 ("kein Element ueber Gewicht 500") war
   hier vorher klar verletzt (600). */
.point-item h4 {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: 0.008em;
  color: var(--color-navy);
  margin: 0 0 16px;
}

/* F-58: analog zu "Karten > Text" (Variante D §5) — Inter 300, 14.5px, 1.85. */
.point-item p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.85;
  margin: 0;
}

@media (max-width: 575px) {
  .about-points {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* About section split — align tops, not centered */
.split--about {
  align-items: start;
}

@media (max-width: 991px) {
  .about-images {
    max-width: 500px;
    margin: 0 auto;
    padding-bottom: 60px;
  }

  .about-image-primary {
    width: 82%;
    margin-left: auto;
  }

  .about-image-primary img {
    height: 320px;
  }

  .about-image-secondary {
    width: 55%;
    left: 0;
  }

  .about-image-secondary img {
    height: 170px;
  }
}

@media (max-width: 575px) {
  .about-images { padding-bottom: 50px; padding-left: 0; }
  .about-image-primary { width: 85%; }
  .about-image-primary img { height: 250px; }
  .about-image-secondary { width: 58%; left: 0; bottom: 0; }
  .about-image-secondary img { height: 140px; }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */
/* ============================================================
   Seminars Section — dark navy bg + architectural columns bg right
   ============================================================ */
.seminars-section {
  position: relative;
  overflow: hidden;
  background-color: var(--color-navy);
  background-image: url('/assets/images/landing_01.jpg');
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Dark overlay: solid navy on the left ~55%, fading to semi-transparent
   on the right so the architectural columns photo shows through clearly */
.seminars-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--navy) 50%,
    rgba(11, 37, 69, 0.75) 60%,
    rgba(11, 37, 69, 0.45) 75%,
    rgba(11, 37, 69, 0.30) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Make sure section content sits above the overlay */
.seminars-section > .container {
  position: relative;
  z-index: 1;
}

.seminar-item { list-style: none; }

.seminar-item__link {
  display: block;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: color var(--transition-fast);
}

.seminar-item__link:hover {
  color: var(--color-gold);
}

@media (max-width: 575px) {
  .seminar-item__link {
    font-size: 15px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */
/* Grid wrapper — Variante D §5 "Karten": no gap, border-top on the grid,
   border-right per card (last card in each row without). Combined with
   .grid.grid--3 in src/index.njk. */
.seminar-grid {
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 82px;
}

.seminar-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  border-right: 1px solid var(--line);
  transition: box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Last card in each row of 3 — no right hairline */
.seminar-grid .seminar-card:nth-child(3n) {
  border-right: none;
}

.seminar-card:hover {
  box-shadow: none;
}

.seminar-card__image-link {
  display: block;
  text-decoration: none;
  overflow: hidden;
}

.seminar-card__image {
  position: relative;
  overflow: hidden;
}

.seminar-card__image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.seminar-card:hover .seminar-card__image img {
  transform: scale(1.04);
}

.seminar-card__content {
  padding: 44px 34px 48px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Kategorielabel — one of the three sanctioned serif accents (Variante D §4).
   F-63 (Kundenauftrag 2026-07-29): zeigt jetzt ALLE Kategorien eines
   Seminars, nicht mehr nur categories[0] (Kundenbeobachtung: beim Filtern
   nach "Recht" erschien eine Karte mit dem Label "Gesundheit", weil das
   Seminar zwar auch "recht" trägt, aber als erste Kategorie "gesundheit"
   im Frontmatter steht — der Filter selbst arbeitet korrekt über alle
   Kategorien, nur das Label zeigte bisher nur die erste). display:flex +
   flex-wrap erlaubt bei drei Kategorien einen Umbruch, ohne dass Karten
   in der 3er-Grid-Spalte (~310px Inhaltsbreite) in die Breite drängen –
   die italienische Serife/Gold-Farbe bleibt für JEDES Label erhalten,
   nur der Trenner (siehe .seminar-card__category-sep) tritt zurück. */
.seminar-card__category {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  color: var(--color-gold);
  margin-bottom: 18px;
}

/* Dezenter Mittelpunkt-Trenner zwischen mehreren Kategorien — nicht
   kursiv und gedämpft (opacity), damit er als Satzzeichen zurücktritt und
   nicht wie eine weitere Kategorie mitgelesen wird. */
.seminar-card__category-sep {
  font-style: normal;
  opacity: 0.55;
}

.seminar-card__title {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: 0.008em;
  margin: 0 0 16px;
}

.seminar-card__title a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.seminar-card__title a:hover {
  color: var(--color-gold);
}

.seminar-card__excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.85;
  font-size: 14.5px;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* F-07: was a rounded, gold-tinted, bordered box with a checkmark SVG —
   flagged by the client as looking like generic "AI dashboard" chip design,
   and a direct violation of Variante D §3 Regel 4 ("Haarlinien statt Rahmen.
   Karten werden durch 1 px getrennt, nicht eingekastelt."). Dissolved the
   box: the USP is now a plain set line introduced by a short gold hairline,
   reusing the same ::before hairline motif already established for the
   eyebrow and the testimonial quote — brand vocabulary the page already
   speaks, rather than a boxed "feature chip" component. */
.seminar-card__usp {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  align-self: flex-start;
}

.seminar-card__usp::before {
  content: "";
  align-self: center;
  width: 20px;
  height: 1px;
  background: var(--color-gold);
  flex-shrink: 0;
}

/* Micro-CTA — Variante D §5 "Karten" */
.seminar-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 5px;
  margin-top: 30px;
  transition: color var(--transition-fast);
  align-self: flex-start;
}

.seminar-card__cta span {
  transition: transform var(--transition-fast);
  display: inline-block;
}

.seminar-card__cta:hover {
  color: var(--color-gold);
}

.seminar-card__cta:hover span {
  transform: translateX(4px);
}

/* Tablet landscape (≤991px) — .grid--3 collapses to 2 columns (layout.css);
   move the "no right hairline" position from every 3rd card to every 2nd. */
@media (max-width: 991px) {
  .seminar-grid .seminar-card:nth-child(3n) {
    border-right: 1px solid var(--line);
  }
  .seminar-grid .seminar-card:nth-child(2n) {
    border-right: none;
  }
}

/* Tablet portrait (≤768px) — .grid--3 stacks to 1 column (layout.css);
   a right hairline no longer separates anything, so it becomes a bottom
   hairline between stacked cards instead (last card has none). */
@media (max-width: 768px) {
  .seminar-grid .seminar-card,
  .seminar-grid .seminar-card:nth-child(2n),
  .seminar-grid .seminar-card:nth-child(3n) {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .seminar-grid .seminar-card:last-child {
    border-bottom: none;
  }
  .seminar-card__content {
    padding: 32px 4px 36px;
  }
}

@media (max-width: 575px) {
  .seminar-card__image img {
    height: 200px;
  }
  .seminar-card__content {
    padding: 28px 4px 32px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */
/* =========================================================
   Outcome Rotator — single editorial statement at a time.
   Slow crossfade between named transformations.
   ========================================================= */

.outcome-band {
  background: var(--color-offwhite);
  padding: 100px 0 80px 0;
  border-top: 1px solid rgba(11, 37, 69, 0.05);
  border-bottom: 1px solid rgba(11, 37, 69, 0.05);
  position: relative;
}

.outcome-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.outcome-band__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0 4px;
}

.outcome-band__eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.outcome-band__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-gold);
}

.outcome-band__view-all {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.2);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.outcome-band__view-all:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* ── Stage: where statements crossfade ── */
.outcome-band__stage {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outcome-band__item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

.outcome-band__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

.outcome-band__statement {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--color-navy);
  margin: 0 0 36px 0;
  max-width: 1000px;
}

.outcome-band__statement em {
  font-style: italic;
  color: var(--color-gold);
}

.outcome-band__client {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}

.outcome-band__client::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-gold);
}

/* ── Dot navigation ── */
.outcome-band__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.outcome-band__dot {
  width: 36px;
  height: 2px;
  background: rgba(11, 37, 69, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition-fast), width 0.3s ease;
}

.outcome-band__dot:hover {
  background: var(--color-navy);
}

.outcome-band__dot.is-active {
  background: var(--color-gold);
  width: 56px;
}

/* ── Responsive ── */

@media (max-width: 1199px) {
  .outcome-band__statement {
    font-size: 56px;
  }
  .outcome-band__stage {
    min-height: 240px;
  }
}

@media (max-width: 991px) {
  .outcome-band__statement {
    font-size: 42px;
  }
  .outcome-band__stage {
    min-height: 220px;
  }
}

@media (max-width: 575px) {
  .outcome-band {
    padding: 64px 0 56px 0;
  }
  .outcome-band__statement {
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 28px;
  }
  .outcome-band__stage {
    min-height: 200px;
  }
  .outcome-band__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */
/* =========================================================
   Seminar Filter — chip row above the seminar grid.
   "Ich will" Alle / Kommunikation / Führung / Team / Effizienz
   ========================================================= */

.seminar-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 var(--space-md) 0;
  padding: 0;
}

.seminar-filter__label {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-navy);
  margin-right: 4px;
  letter-spacing: 0.2px;
}

.seminar-filter__chip {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(11, 37, 69, 0.14);
  background: var(--color-white);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform 0.15s ease;
  white-space: nowrap;
}

.seminar-filter__chip:hover {
  border-color: var(--color-gold);
  color: var(--color-navy);
  transform: translateY(-1px);
}

.seminar-filter__chip.is-active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.seminar-filter__chip.is-active:hover {
  background: var(--color-navy-alt);
  border-color: var(--color-navy-alt);
  color: var(--color-white);
}

/* Hidden card state — fade + collapse */
.seminar-grid .seminar-card.is-filtered-out {
  display: none;
}

@media (max-width: 575px) {
  .seminar-filter {
    gap: 8px;
  }

  .seminar-filter__label {
    font-size: 18px;
    width: 100%;
    margin-bottom: 4px;
  }

  .seminar-filter__chip {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */
/* =========================================================
   Next Dates — "Nächste offene Termine"
   Horizontal strip of upcoming seminar dates with seat-count.
   ========================================================= */

.next-dates {
  background: var(--color-faint);
  padding: var(--space-lg) 0;
}

.next-dates__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.next-dates__title-wrap {
  max-width: 640px;
}

.next-dates__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.next-dates__label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--color-gold);
}

.next-dates__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--color-navy);
  margin: 0 0 6px 0;
}

.next-dates__subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  margin: 0;
}

.next-dates__view-all {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.2);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.next-dates__view-all:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.next-dates__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

/* F-42 (2026-07-28): pan carousel, replacing the F-08 "expand downward"
   button the client rejected. Up to 10 cards render in the DOM (see
   index.njk); `.next-dates__viewport` shows exactly one page of them at a
   time and the rest live off to the side, reachable via native horizontal
   scroll-snap — no re-flowing of the row count, no JS-computed pixel math.
   `.next-dates__carousel` is the positioning context for the two nav
   buttons AND reserves a 60px gutter on each side for them — the buttons
   sit beside the row, not floated on top of card text (an earlier version
   overlaid them on the cards and the left one clipped the "Online"
   location line of the edge card). */
.next-dates__carousel {
  position: relative;
  padding: 0 60px;
}

.next-dates__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.next-dates__viewport::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .next-dates__viewport {
    scroll-behavior: auto;
  }
}

.next-dates__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 54px) / 4);
  width: 100%;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav buttons — same hairline/gold vocabulary as .next-dates__view-all and
   the testimonial dots: quiet by default, gold on hover/interaction.
   Overlaid on the row itself (vertically centered, inset from the
   viewport edge) rather than living in the header, since the client asked
   for a control that visibly pans the row it belongs to ("auf Hoehe der
   Kartenreihe"). Kept in the DOM and just disabled at the ends instead of
   removed, so the row's height/position never jumps. */
.next-dates__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(11, 37, 69, 0.2);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.next-dates__nav-btn svg {
  width: 18px;
  height: 18px;
}

.next-dates__nav-btn:hover:not(:disabled) {
  border-color: var(--color-gold);
  color: var(--color-gold);
  box-shadow: var(--shadow-hover);
}

.next-dates__nav-btn:disabled {
  opacity: 0.3;
  box-shadow: none;
  cursor: default;
}

.next-dates__nav-btn--prev {
  left: 0;
}

.next-dates__nav-btn--next {
  right: 0;
}

.next-dates__card {
  background: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.06);
  border-radius: 4px;
  padding: 22px 22px 18px 22px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  transition: transform var(--transition-smooth),
              box-shadow var(--transition-smooth),
              border-color var(--transition-smooth);
}

.next-dates__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(184, 154, 78, 0.3);
}

.next-dates__card--soldout {
  opacity: 0.7;
}

.next-dates__card--soldout:hover {
  transform: none;
  box-shadow: var(--shadow-subtle);
  border-color: rgba(11, 37, 69, 0.06);
}

/* Date stamp */
.next-dates__date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(11, 37, 69, 0.07);
}

.next-dates__day {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: -0.5px;
}

.next-dates__month-year {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.next-dates__month {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.next-dates__weekday {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
}

.next-dates__seminar {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  color: var(--color-navy);
  margin: 0 0 6px 0;
}

.next-dates__seminar a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.next-dates__seminar a:hover {
  color: var(--color-gold);
}

.next-dates__location {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  margin: 0 0 14px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.next-dates__location-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}

.next-dates__seats {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 16px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.next-dates__seats-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.next-dates__seats--available {
  color: var(--color-gold);
}

.next-dates__seats--available .next-dates__seats-dot {
  background: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(184, 154, 78, 0.2);
}

.next-dates__seats--low {
  color: #c9532c; /* kein CI-Token; funktionale Warnfarbe "wenige Plaetze", siehe auch seminar-page-v3.css */
}

.next-dates__seats--low .next-dates__seats-dot {
  background: #c9532c;
  box-shadow: 0 0 0 3px rgba(201, 83, 44, 0.2);
}

.next-dates__seats--soldout {
  color: var(--color-text);
}

.next-dates__seats--soldout .next-dates__seats-dot {
  background: var(--color-text);
  opacity: 0.5;
}

.next-dates__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background var(--transition-fast);
  border: 0;
  cursor: pointer;
}

.next-dates__cta:hover {
  background: var(--color-gold);
}

.next-dates__cta--disabled {
  background: rgba(11, 37, 69, 0.1);
  color: var(--color-text);
  pointer-events: none;
  cursor: default;
}

.next-dates__empty {
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  padding: var(--space-lg) 0;
}

/* Tablet/laptop: 2 cards per page instead of 4 — the pan still works
   exactly the same way (one viewport-width per click), it just moves a
   smaller "page" now. */
@media (max-width: 1199px) {
  .next-dates__list {
    grid-auto-columns: calc((100% - 18px) / 2);
  }
}

@media (max-width: 768px) {
  .next-dates__heading {
    font-size: 28px;
  }
}

/* Mobile: back to the pre-pan stacked layout — one column, no horizontal
   scroll, no nav buttons. Only the first 4 upcoming dates show (cards 5–10
   stay in the DOM but hidden), matching how the section looked on mobile
   before the pan was introduced — the pan is a desktop/tablet mechanic
   only (F-42). */
@media (max-width: 575px) {
  .next-dates__carousel {
    padding: 0;
  }

  .next-dates__viewport {
    overflow: visible;
  }

  .next-dates__list {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .next-dates__card:nth-child(n + 5) {
    display: none;
  }

  .next-dates__nav-btn {
    display: none;
  }

  .next-dates__day {
    font-size: 32px;
  }

  .next-dates__actions {
    width: 100%;
    gap: 14px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */
/* =========================================================
   Next Dates — Language Filter
   Chip row above the "Nächste Termine" cards, filtering by
   data-language on .next-dates__card (Alle / Deutsch / English).
   Deliberately its own namespace — do not merge with
   seminar-filter.css, whose chips serve a different filter.
   ========================================================= */

.next-dates-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 var(--space-sm) 0;
  padding: 0;
}

.next-dates-filter__chip {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(11, 37, 69, 0.14);
  background: var(--color-white);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform 0.15s ease;
  white-space: nowrap;
}

.next-dates-filter__chip:hover {
  border-color: var(--color-gold);
  color: var(--color-navy);
  transform: translateY(-1px);
}

.next-dates-filter__chip.is-active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.next-dates-filter__chip.is-active:hover {
  background: var(--color-navy-alt);
  border-color: var(--color-navy-alt);
  color: var(--color-white);
}

/* Hidden card state — filtered out by language */
.next-dates__list .next-dates__card.is-filtered-out {
  display: none;
}

/* Language badge — small, gold outline. Card needs relative positioning
   so the badge can sit in its top-right corner.

   F-43 (2026-07-28), reverting F-09: the DE badge was deliberately given a
   quieter treatment (no border, muted/lower-opacity text) so only the EN
   exception would stand out. The client rejected that outright — "Das
   Badge fuer DE sieht anders aus als das Badge fuer EN... Das muss selber
   sein." DE and EN badges are merged back onto one shared rule: identical
   gold border, identical color/weight/size. The `--de`/`--en` modifier
   classes stay in the markup (still useful as language hooks) but no
   longer carry any visual difference. */
.next-dates__card {
  position: relative;
}

.next-dates__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 3px;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  background: transparent;
}

@media (max-width: 575px) {
  .next-dates-filter {
    gap: 8px;
  }

  .next-dates-filter__chip {
    padding: 7px 13px;
    font-size: 12px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */
/* =========================================================
   Testimonials Rotator — gallery-style with portrait + quote.
   Same crossfade language as the outcome rotator, but with
   per-testimonial image, stars, and structured attribution.
   ========================================================= */

.testimonials-rotator {
  /* Verlauf nach dem Vorbild der Broschüre — siehe footer.css. */
  background: linear-gradient(158deg, var(--navy), var(--navy-deep));
  color: var(--color-white);
  /* F-16 Runde 2: war 88px 0 76px 0 (Runde 1's Kürzung von 110px 0 90px 0).
     Der Kunde hat Runde 1 zurückgewiesen: Bilder/Text wurden kleiner, die
     Sektion blieb aber gleich groß — eine leere Hülle blieb übrig. Die
     Diagnose (per getBoundingClientRect() bei 1920px, siehe Kommentare bei
     __grid und __dots weiter unten für die zwei größten Verursacher) zeigt:
     das Polster war nur ein kleiner Mitverursacher neben der veralteten
     min-height und einer doppelten Lücke vor den Punkten — deshalb hier nur
     eine moderate statt aggressive Kürzung, damit zwischen den beiden
     hellen Nachbarsektionen genug Luft bleibt. */
  padding: 72px 0 64px 0;
  position: relative;
  overflow: hidden;
  /* Eigener Stapelkontext. Stand ursprünglich hier, um das Filmkorn an
     dieser Sektion zu halten; das Korn ist am 2026-07-31 auf Kundenwunsch
     entfallen. Die Zeile bleibt trotzdem: Sie begrenzt die Schichtung auf
     diese Sektion, und sie zu entfernen könnte benachbarte Elemente
     verschieben, ohne dass jemand etwas davon hätte. */
  isolation: isolate;
}

.testimonials-rotator__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 1fr;
  /* F-16 Runde 2: war var(--space-md) (32/30/28px je Breakpoint — Runde 1's
     Kürzung von --space-lg). Jetzt ein fester 24px-Wert statt eines Tokens,
     damit er nicht mehr mit den html-font-size-Breakpoints mitskaliert —
     das ist die einheitliche Lücke zwischen allen drei Zeilen (Kopfzeile,
     Grid, Punkte); siehe den __dots-Kommentar weiter unten, warum dessen
     eigenes padding-top entfernt wurde statt als zweite, größere Lücke
     stehen zu bleiben. */
  gap: 24px;
}

/* ── Top row: eyebrow + "view all" ── */
.testimonials-rotator__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.testimonials-rotator__eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.testimonials-rotator__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-gold);
}

.testimonials-rotator__view-all {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.testimonials-rotator__view-all:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* ── Main grid: portrait + quote ──
   F-16: the portrait column used to be proportional (5fr of 12 → 480px wide
   at 1920px viewport), stretched to a 4:5 box that came out ~600px tall.
   The source photos are only 250×250px (verified: sips -g pixelWidth/
   pixelHeight on all three team/testimonial-*.{jpg,png,jpeg}), so displaying
   them at 480×600 upscaled ~1.9–2.4× and read as blurry ("matschig" — David's
   word). Fixing the blur means shrinking the display size toward the native
   resolution, not upscaling the source. A fixed 240px column keeps the
   upscale factor down to ~1.25× (240×300 vs. 250×250 source).

   F-16 Runde 2: min-height stand hier noch bei 460px — ein Überbleibsel aus
   der alten 4:5/480px-Spalte, nie überarbeitet, nachdem F-20/F-21 die
   Zitatschrift auf clamp(19px,1.7vw,25px) verkleinert hatten. Der Kommentar,
   der 460px früher begründete, zitierte noch den Vor-F-21-Wert
   clamp(25px,3.5vw,42px)/~14 Zeilen — das beschreibt diese Komponente nicht
   mehr. Dieses veraltete 460px war der größte Einzelverursacher des vom
   Kunden gemeldeten "riesigen Abstands": per getBoundingClientRect()
   gemessen (von den Sternen oben bis zum unteren Rand der Attribution) über
   alle drei Zitate hinweg, von 992px bis 1920px+ aufwärts, ist der höchste
   reale Inhalt 328px hoch (Sippl-Zitat, das ab ~1470px Viewportbreite ein
   Plateau erreicht, sobald sowohl die clamp()-Obergrenze der Schrift als
   auch das 58ch-Maß des Zitats ausgereizt sind). 360px lassen ~32px
   Sicherheitsabstand über diesem gemessenen Extremfall — geprüft an allen
   drei Zitaten, nicht nur am ersten —, sodass die Zeile jetzt dem Inhalt
   folgt statt einer Schriftgröße, die es nicht mehr gibt. */
.testimonials-rotator__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-md);
  align-items: stretch;
  min-height: 360px;
}

/* Image stack — all items absolute, only active is visible.
   align-self: center (not stretch) so the 4:5 box keeps its own
   aspect-ratio-driven height (240×300) instead of being stretched to match
   .testimonials-rotator__stage's taller min-height below — the portrait and
   the quote column are allowed to need different heights now. */
.testimonials-rotator__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  align-self: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.testimonials-rotator__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* F-20: was a fixed 800ms crossfade running on both the outgoing and the
     incoming image at once — see the __item comment below for the full
     root-cause writeup. Token-driven duration so JS (main.js, which reads
     this value back via getComputedStyle) and CSS never drift apart. */
  transition: opacity var(--transition-smooth);
  filter: contrast(1.05) saturate(0.85);
}

.testimonials-rotator__image.is-active {
  opacity: 1;
}

.testimonials-rotator__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 37, 69, 0) 60%,
    rgba(11, 37, 69, 0.45) 100%
  );
  pointer-events: none;
}

/* Quote stage — same pattern, all absolute, only active is visible */
.testimonials-rotator__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* F-20 root cause (verified via getBoundingClientRect() against the running
   page, not from code reading alone): every .testimonials-rotator__item
   sits at position:absolute; inset:0 inside .testimonials-rotator__stage
   (position:relative — the positioning context was always correctly set,
   and no inactive item was ever left taking up flow space; that suspected
   cause did not reproduce). The actual bug was in main.js's show(): on a
   slide change it toggled .is-active off the old item and onto the new one
   in the very same tick, and both items shared this identical 800ms opacity
   transition. For the whole transition both items occupy the exact same
   box and are simultaneously partially opaque — measured at t≈300ms into a
   transition, outgoing opacity was 0.13 while incoming was 0.87, both
   legible enough to double-expose the quote text, the star rating, and the
   attribution at once. That is what read as "übereinander gezeichnet" in
   the screenshot. Fixed in main.js: show() now fades the old slide out
   completely before adding .is-active to the new one, so only one item is
   ever above opacity 0 at a time. */
.testimonials-rotator__item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
}

.testimonials-rotator__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

.testimonials-rotator__stars {
  font-size: 18px;
  letter-spacing: 6px;
  color: var(--color-gold);
  margin-bottom: 24px;
  line-height: 1;
}

/* Zitat — one of the three sanctioned serif accents (Variante D §4).
   Spec gives this against --surface-ivory (Navy text); this section's
   background stays --color-navy per "Farben bleiben unverändert", so the
   quote keeps white — only family/weight/size/line-height/max-width move
   to the spec's Zitatsektion values.

   F-20 (part 2 of the root cause) → F-21 fix: §4's clamp(25px,3.5vw,42px)/
   22ch is sized for a short pull-quote (one highlighted sentence), but the
   three source quotes here are full testimonial paragraphs of 233–308
   characters (measured in src/index.njk). At the §4 size that is 10–14
   lines, which overflows any reasonably sized stage box — and clamping
   with -webkit-line-clamp: 6 (the fix previously tried) just traded
   overflow for truncation, and on top of that clipped the descenders of
   this italic font's last visible line, which reads as broken rendering.
   §4 and this content type are a mismatch, not a bug in the component, so
   this rule intentionally deviates from §4's numbers: smaller font, wider
   measure, taller line-height. Chosen so the longest of the three quotes
   (308 chars) wraps to 6 lines at a readable ~50 character measure (the
   two shorter quotes wrap to 5), and line-height is generous enough that
   italic descenders never sit outside their line box. Verified via
   getBoundingClientRect() at all three testimonials, 1920/991/768/375px —
   scrollHeight and rendered height match for every one (see the F-21
   verification report). No -webkit-line-clamp, no overflow:hidden, no
   truncation — full text renders every time. The 991px/575px
   .testimonials-rotator__stage min-height values below were re-tuned to
   match (they were sized for the old §4 font/clamp). */
.testimonials-rotator__quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.55;
  max-width: 58ch;
  letter-spacing: normal;
  color: var(--color-white);
  margin: 0 0 28px 0;
  position: relative;
  padding-left: 0;
}

.testimonials-rotator__quote::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-gold);
  margin-bottom: 22px;
}

.testimonials-rotator__attr {
  font-style: normal;
}

/* Attribution — Zitatsektion, Variante D §5. Spec sets the name in Navy on
   --surface-ivory; kept white here since this section stays on --color-navy
   ("Farben bleiben unverändert"). */
.testimonials-rotator__name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 4px 0;
}

.testimonials-rotator__role {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ── Dots ──
   F-16 Runde 2: zwei Höhenfehler hier gefunden, während der "riesiger
   Abstand"-Beschwerde nachgegangen wurde — beide per getComputedStyle()/
   getBoundingClientRect() an der laufenden Seite verifiziert, nicht nur aus
   dem CSS herausgelesen:

   1. Das eigene padding-top: var(--space-md) (32/30/28px) dieser Zeile war
      eine ZWEITE Lücke, oben auf die 24px Zeilenabstand draufgesetzt, die
      .testimonials-rotator__inner ohnehin schon zwischen jede Zeile legt —
      die Lücke zwischen Grid und Punkten war dadurch effektiv 56–64px groß,
      während die Lücke zwischen Kopfzeile und Grid nur 24px betrug, ohne
      dokumentierten Grund. Entfernt; der gap von .testimonials-rotator__
      inner setzt die Punkte-Zeile jetzt genauso ab wie jede andere Zeile.

   2. Die Punkte-Zeile maß bei 1920px 59px Höhe, obwohl jeder sichtbare
      Pixel eines Punkts 2px hoch ist (button height:2px, kein
      padding/border). Ursache: das <li> hat kein explizites display und
      bleibt beim UA-Standard `list-item`; dadurch landet der
      inline-block-<button> darin in einem Inline-Formatierungskontext, und
      dieser reserviert einen vollen Zeilenbox-"Strut" aus der geerbten
      body-Zeilenhöhe (~27px) rund um den Button, obwohl der Button selbst
      nur 2px hoch ist — der klassische Phantom-Abstand-Bug bei
      inline-block-Elementen in einer Textzeile. `display: flex` auf dem
      <li> macht daraus einen Flex-Formatierungskontext, dessen Größe sich
      an der tatsächlichen Inhaltsbox des Buttons orientiert, nicht an
      einem Text-Strut. */
.testimonials-rotator__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.testimonials-rotator__dots li {
  display: flex;
}

.testimonials-rotator__dot {
  width: 36px;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition-fast), width 0.3s ease;
}

.testimonials-rotator__dot:hover {
  background: var(--color-white);
}

.testimonials-rotator__dot.is-active {
  background: var(--color-gold);
  width: 56px;
}

/* ── Responsive ── */

@media (max-width: 991px) {
  .testimonials-rotator__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    min-height: 0;
  }

  /* F-16: was max-width 480px — matches the desktop 240px column now so the
     same 250×250px source photos aren't upscaled further on tablet. */
  .testimonials-rotator__media {
    max-width: 240px;
    margin: 0 auto;
    width: 100%;
  }

  /* F-21: was 280px, sized for the old clamp(25px,3.5vw,42px)/6-line-clamp
     quote. That font/measure no longer applies (see the __quote comment) —
     re-measured against the new sizing with getBoundingClientRect(): the
     longest quote (308 chars) needs ~311px from the stars to the bottom of
     the attribution at this breakpoint's ~421px quote width. 340px keeps a
     safety margin without the fixed stage height being the tallest of the
     three testimonials driving unnecessary section height.

     F-16 Runde 2: war 340px. Erneut per getBoundingClientRect() über die
     gesamte von dieser Media Query abgedeckte Breite gemessen (576–991px,
     wo das eigene 58ch/19px-Maß des Zitats durch den Container nicht
     eingeschränkt wird, die Inhaltshöhe also flach bleibt): das längste
     Zitat braucht 282px von den Sternen bis zum unteren Rand der
     Attribution. 314px lassen ~32px Sicherheitsabstand — dasselbe Maß wie
     bei der Desktop-Stufe oben — statt der alten 58px, die zusätzlich zur
     bereits von F-21 verschlankten Fassung noch leerer Raum in der Bühne
     waren. */
  .testimonials-rotator__stage {
    min-height: 314px;
  }
}

@media (max-width: 575px) {
  /* F-16 Runde 2: war 64px 0 52px 0 — im selben Verhältnis gekürzt wie die
     Basisregel oben, damit die Straffung auch auf Mobil ankommt und nicht
     nur Desktop/Tablet betrifft. */
  .testimonials-rotator {
    padding: 52px 0 44px 0;
  }

  /* F-21: was 260px, same stale F-16 sizing as the 991px tier above — and
     wrong in the opposite direction here, since the narrower mobile
     container (~319px quote width at 375px viewport) wraps the longest
     quote to more lines, not fewer. Re-measured: needs ~340px from stars to
     attribution bottom at 375px. 370px keeps a safety margin.

     F-16 Runde 2: erneut gemessen, unverändert gelassen. Bei 375px braucht
     das längste Zitat weiterhin 340px (30px Marge, wie zuvor). Anders als
     jede andere min-height in dieser Datei war dieser Wert schon eng
     bemessen — kein Mitverursacher des "riesiger Abstand"-Befunds. Die
     Verkleinerung der mobilen Sektionshöhe in dieser Runde kommt aus der
     Polster-Kürzung oben und den __dots/__inner-Fixes, nicht aus diesem
     Wert. (Vermerk für später: bei sehr schmalen Telefonen, ~320px, braucht
     der Inhalt ~399px und würde die Punkte-Zeile leicht überlappen — ein
     bereits bestehendes Verhalten bei 320px, von den Änderungen dieser
     Runde weder verursacht noch berührt, und außerhalb des Auftrags, der
     explizit 375px nennt.) */
  .testimonials-rotator__stage {
    min-height: 370px;
  }

  .testimonials-rotator__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */
/* Stat Counter Component */

.stats-section {
  background: transparent;
  padding: 30px 0;
  width: 100%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  background: var(--color-gold);
  border-radius: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 30px;
}

/* Vertical separator between stat items — centered at the left edge of each non-first cell */
.stat-item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 65%;
  background-color: rgba(255, 255, 255, 0.5);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 300;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 70px;
  letter-spacing: 2.5px;
}

.stat-suffix {
  font-size: 50px;
  margin-left: 5px;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Responsive: 2 columns at tablet landscape */
@media (max-width: 991px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: 1 column at mobile */
@media (max-width: 575px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-label {
    white-space: normal;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */
/* ============================================================
   Warum uns wählen — split layout: statue image left, content right
   ============================================================ */

.warum-section {
  background-color: var(--color-faint);
  background-image: url('/assets/images/h6_whyus_bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  padding: 0;
  height: 620px;
}

.warum-split {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: stretch;
  height: 100%;
}

/* Left: statue image — full rectangular portrait, no circle mask */
.warum-image {
  background-color: var(--surface-ivory);
  background-image: url('/assets/images/h6_statue_bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.warum-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center top;
  align-self: stretch;
}

/* Right: text content */
.warum-content {
  padding: 50px 60px 50px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Section label (reuse sub-heading style) */
.warum-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin: 0 0 18px;
}

.warum-heading {
  font-family: var(--font-heading);
  font-size: 45px;
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.18;
  letter-spacing: 0.9px;
  margin: 0 0 20px;
  max-width: 550px;
}

.warum-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 480px;
}

/* Checklist */
.warum-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warum-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.625;
}

.warum-checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 6 5 9 10 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  margin-top: 2px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
  .warum-split {
    grid-template-columns: 1fr;
  }

  .warum-image {
    justify-content: center;
    min-height: 320px;
  }

  .warum-image img {
    width: 100%;
    max-width: none;
  }

  .warum-content {
    padding: 50px 40px;
  }

  .warum-heading {
    font-size: 34px;
  }
}

@media (max-width: 768px) {
  .warum-content {
    padding: 40px 24px;
  }

  .warum-heading {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .warum-heading {
    font-size: 24px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */
/* ============================================================
   warum-test.css — isolated sandbox styles for /warum-test/

   Mirrors the live miranda-institute.de stacking 1:1.
   Uses `wt-` prefix so nothing here can leak into the homepage.

   Layering reference (extracted from live DOM):
   • Section bg:  h6_whyus_bg.jpg (columns + spotlight, baked in)
   • Statue bg:   h6_statue_bg.png — position:absolute, z:1
   • Statue main: Untitled-design-38 (transparent) — position:relative, z:2
   • Stats bar:   separate <section>, inner has margin-top:-70px
   ============================================================ */

/* ------------------------------------------------------------
   F-11 Gestaltungsentscheidung — ZWEITE RUNDE (2026-07-28)

   Erste Runde (siehe Git-Historie dieser Datei): Gewichte gesenkt
   (700→300), Eyebrow-Sperrung erhöht, Goldlinien auf den
   Stats-Labels ergänzt — aber bewusst GEGEN die Serifenschrift
   entschieden, um die Drei-Stellen-Regel aus Variante D §4 zu
   schützen. Begründung war: gesperrte, serifenlose Versalschrift
   mit viel Weißraum sei selbst ein klassisches Register.

   Der Kunde hat diese erste Korrektur zurückgewiesen, wörtlich:
   „Die Sektion mit Warum uns wählen wurde fast komplett ignoriert.
   Also hier sieht gar nichts klassisch aus. […] Das sieht immer
   noch modern aus und nicht klassisch." Zweite eindeutige Aussage
   in derselben Richtung — die Entscheidung ist damit gefallen: die
   Zurückhaltung bei der Serife war eine Fehleinschätzung, nicht
   der Kundenwille.

   Änderung: Variante D §4 wurde bewusst und dokumentiert um diese
   Sektion erweitert (siehe
   docs/superpowers/specs/2026-07-26-variante-d-typografie.md §4
   und brand.md „Wo die Serife erscheint", beide mit Datum
   2026-07-28 und Vermerk „auf Kundenwunsch erweitert"). Das ist
   KEIN Freibrief für Serife überall im System — nur diese Sektion
   erhält zwei neue Serifen-Träger:

   1. Die Überschrift „Vertrauen Sie auf fundierte Weiterbildung"
      (.wt-heading) — Cormorant Infant italic 400, Grad und
      Zeilenhöhe gegenüber der Jost-Fassung angehoben, damit die
      kursive Serife bei dieser Textlänge ruhig steht. Ergänzt um
      einen kurzen Goldstrich (.wt-heading::after) als klassisches
      Abschlussornament (Regel 4 "Haarlinien statt Rahmen").
   2. Die Statistik-Zahlen (.wt-stat-num, 3500+ / 4.9+ / 220+ /
      570+) — Cormorant Infant italic 300, wirkt wie eine
      gravierte Sockelbeschriftung.

   Die Eyebrow wurde per Screenshot-Vergleich geprüft: Cormorant
   Infant italic bei 11px + der sitweiten 0.34em-Sperrung wirkt
   unruhig statt ruhig-klassisch, die kursiven Versalformen brechen
   den Sperrungsrhythmus ungleichmäßig auf. Eine engere Sperrung
   (0.1em) als Gegenversuch machte es schlechter, nicht besser — die
   Kursive kollabiert dann zu einem verwaschenen Klumpen und verliert
   genau die Inschriften-Anmutung, die die weite Sperrung eigentlich
   trägt. Eyebrow bleibt daher bei Inter. Checklisten und Fließtext
   bleiben ebenfalls Inter (Regel 2: nie im Fließtext).

   F-34 (im selben Durchgang miterledigt): Die gefüllten
   Navy-Kreise mit weißem Haken vor jedem Checklisten-Punkt waren
   dieselbe Formsprache, die der Kunde auf den Seminarkarten als
   "zu sehr nach KI" bemängelt hatte (siehe F-07-Kommentar in
   seminar-card.css) — dort inzwischen durch eine Goldhaarlinie
   ersetzt. .wt-checklist li::before übernimmt exakt dasselbe
   Vokabular (20×1px Goldlinie statt Kreis+SVG-Haken).
   ------------------------------------------------------------ */

.wt-section {
  position: relative;
  overflow: visible;                    /* allow stats bar to overlap upward */
  background-color: rgb(242, 242, 244);
  background-image: url('/assets/images/h6_whyus_bg.jpg');
  background-size: cover;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  padding: 0;
  /* Live section is 1027px tall on 1920px viewport. We let content
     drive height instead of hard-coding it, so the layout responds
     gracefully to font/zoom changes. */
}

/* Top spacer — reduced from live's 380px to give the heading air without
   the enormous Elementor gap. */
.wt-spacer-top {
  height: 80px;
}

/* 1200px boxed inner (Elementor's "section-boxed" + 20px gutter) */
.wt-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;                      /* no bottom padding — stats bar uses -70px to overlap */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
}

/* ─── Left column: image stack ─── */
.wt-col-image {
  position: relative;
  min-height: 651px;                    /* matches statue-bg natural height at width:462 */
}

/* Cream halo (h6_statue_bg.png) — absolutely positioned behind the statue.
   Live values: top:-4.625, left:0, width:462px (height auto = ~651px) */
.wt-statue-bg {
  position: absolute;
  top: -5px;
  left: 0;
  width: 462px;
  height: auto;
  z-index: 1;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Foreground statue (transparent PNG).
   Live values: x-offset 15px from bg, y-offset 41px from bg top */
.wt-statue {
  position: relative;
  z-index: 2;
  width: 432px;
  height: auto;
  margin: 41px 0 0 15px;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ─── Right column: text ─── */
.wt-col-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 0 30px;                  /* small gap after image column */
  max-width: 540px;                     /* keeps line length comfortable */
}

/* Eyebrow — auf die sitweite Standardsektion-Sperrung (.34em, §5) angehoben.
   Die vorherige 2.5px-Sperrung war deutlich enger als überall sonst im
   System und einer der Gründe, warum die Sektion "generisch" statt
   "klassisch" wirkte — weite Versal-Sperrung ist selbst ein klassisches
   Register (F-11). */
.wt-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  margin: 0 0 28px;
}

/* Überschrift — F-11 zweite Runde: Cormorant Infant italic statt Jost.
   Stärkster Hebel für "klassisch" laut Kundenwunsch (siehe Entscheidungs-
   kommentar am Dateianfang). Nur italic 300/400 sind geladen (kein
   aufrechter Schnitt im Projekt) — 400 gewählt, weil ein Fließsatz-Gewicht
   von 300 bei einer ganzen Überschrift zu blass gewirkt hätte (dieselbe
   Abwägung wie bei der Hero-Serifenzeile, die ebenfalls auf 400 läuft).
   Grad gegenüber der vorherigen Jost-Fassung leicht angehoben (clamp
   34–54 statt 30–50) und Zeilenhöhe von 1.16 auf 1.32 angehoben, damit
   die kursive Serife bei mehrzeiligem Satz ruhig steht statt sich zu
   stauchen. Positive Sperrung entfernt (Kursive braucht keine zusätzliche
   Weite, im Gegenteil — enger gesetzte Kursive wirkt gefasster). */
.wt-heading {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.32;
  letter-spacing: 0;
  margin: 0 0 20px;
}

/* Klassisches Abschlussornament unter der Überschrift — ein kurzer
   Goldstrich statt Rahmen (Regel 4), dieselbe Haarlinien-Sprache wie die
   Stats-Labels darunter und die Checklisten-Marker rechts daneben. Löst
   zugleich einen Teil der "ruhige Achse / Gliederung"-Vorgabe aus dem
   Auftrag: ein kleines, aber eindeutig klassisches Satzzeichen. */
.wt-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-gold);
  margin-top: 24px;
}

/* Vorspann — Variante D §5 "Standardsektion": Inter 300, line-height 1.9. */
.wt-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.9;
  margin: 0 0 28px;
  max-width: 480px;
}

/* Checklist: Goldstrich-Marker statt Kreis+Haken, siehe F-34 unten. */
/* F-12: .wt-inner ist CSS-Grid mit align-items:stretch — die Zeilenhöhe
   wird von .wt-col-image (min-height:651px) bestimmt, wodurch .wt-col-text
   zwar auf dieselbe Höhe gestreckt wird, der zusätzliche Raum darunter
   aber "leer" blieb. Von den so entstehenden ~74.6px Leerraum unter der
   Liste frisst .wt-stats mit seinem margin-top:-70px (bewusster Overlap
   auf das Gold-Band) fast alles wieder auf — sichtbar blieben nur ~4.6px,
   die Liste stieß praktisch hart ans Band. 48px Abstand (= Bottom-Polster
   der Karten in Variante D §5, "Polster 44px 34px 48px") schaffen echten,
   sichtbaren Raum, ohne die Overlap-Mechanik oder die Bildspalte anzufassen.

   F-11 zweite Runde, Nachtrag: Die Serifen-Überschrift ist durch größeren
   Grad, höhere Zeilenhöhe (1.32 statt 1.16) und den neuen Goldstrich
   (.wt-heading::after) rund 48px höher als die vorherige Jost-Fassung —
   das frisst den oben beschriebenen F-12-Puffer auf Desktop fast
   vollständig wieder auf (live gemessen per getBoundingClientRect: statt
   der beabsichtigten ~51px blieben nur noch ~3px sichtbar zwischen
   Checkliste und Stats-Band). Bildspalte (651px) bleibt unangetastet, wie
   von F-12 gefordert — der Ausgleich passiert am selben Hebel, den F-12
   dafür vorgesehen hat: mehr margin-bottom auf der Checkliste. Sobald
   .wt-col-text (durch die höhere Überschrift) zur größeren Grid-Zeile
   wird — hier der Fall, Gesamtinhalt > 651px —, gilt live gemessen exakt
   sichtbarer Abstand = margin-bottom − 70px (70 = Stats-Overlap). Mit
   120px Abstand ergeben sich rund 50px sichtbarer Raum, nahe am
   F-12-Originalwert von ~51px. */
.wt-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* F-34: align-items von flex-start auf center — der Kreis brauchte einen
   Top-Offset, um optisch auf der x-Höhe zu sitzen; die neue Haarlinie ist
   nur 1px hoch und soll mittig auf der Zeile stehen. */
.wt-checklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-dark);
  line-height: 1.625;
}

/* F-34: die gefüllten Navy-Kreise mit weißem SVG-Haken waren dieselbe
   Formsprache, die der Kunde auf den Seminarkarten als "zu sehr nach KI"
   bemängelt hat (siehe seminar-card.css, F-07-Kommentar) — dort inzwischen
   durch eine 20×1px-Goldhaarlinie ersetzt (.seminar-card__usp::before).
   Übernimmt hier exakt dasselbe klassische Vokabular statt eine neue Form
   zu erfinden. */
.wt-checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 1px;
  background: var(--color-gold);
}

/* ============================================================
   Stats bar — overlaps the bottom of .wt-section by 70px
   ============================================================ */

/* Wrapper inherits the section's light bg so the area BELOW the stats bar
   reads as part of the same block instead of a stray grey strip. */
/* Der Wrapper existiert nur, damit das Goldband per negativem margin-top
   70px in die Warum-Sektion hineinragen kann, ohne dass der Versatz aus
   dem Fluss ausbricht.

   Er trug bis 2026-07-30 zusätzlich denselben Grauton wie .wt-section plus
   60px padding-bottom — dadurch stand unterhalb des Goldbands ein grauer
   Streifen, den David gemeldet hat („unter dem goldenen Banner versteckt
   sich irgendwie ein grauer Balken"). Ohne Hintergrund und ohne Polsterung
   endet der Wrapper exakt mit dem Goldband; darunter beginnt direkt die
   weiße Team-Sektion. Die Überlappung nach oben bleibt unverändert. */
.wt-stats-wrap {
  position: relative;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

.wt-stats {
  margin: -70px 0 0;                    /* pull the bar up to overlap warum by 70px */
  max-width: 100%;                      /* full-bleed — no left/right whitespace */
  background-color: var(--color-gold); /* F-59: vereinheitlicht auf den CI-Goldwert — vorher rgb(173,151,121), ein "Taupe-Gold" das vom Kunden als Farbabweichung bemaengelt wurde */
  padding: 30px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* Eigener Stapelkontext. Stand ursprünglich hier, um das Filmkorn an
     dieser Sektion zu halten; das Korn ist am 2026-07-31 auf Kundenwunsch
     entfallen. Die Zeile bleibt trotzdem: Sie begrenzt die Schichtung auf
     diese Sektion, und sie zu entfernen könnte benachbarte Elemente
     verschieben, ohne dass jemand etwas davon hätte. */
  isolation: isolate;
}

/* F-51: --wt-num-size ist die einzige Stellschraube für die Zifferngröße —
   .wt-stat-num und .wt-stat-suffix lesen beide daraus, jede Breakpoint-Stufe
   überschreibt nur diese eine Custom Property statt zwei Schriftgrößen
   synchron halten zu müssen. min-width:0 verhindert grundsätzlich (nicht
   nur ab 768px wie vorher) den Grid-Blowout, der F-51 verursacht hat:
   ohne min-width:0 zwingt eine nowrap-Beschriftung ihre Grid-Spalte über
   ihren 1fr-Anteil hinaus, unabhängig von der Viewportbreite. */
.wt-stat {
  --wt-num-size: clamp(40px, 3vw, 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  padding: 0 30px;
  text-align: center;
}

/* Vertical dividers — same pattern as live: 50% height, 1px wide, white */
.wt-stat:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 65%;
  background-color: rgba(255, 255, 255, 0.5);
}

/* F-11 zweite Runde: Cormorant Infant italic statt Jost — die live
   referenzierte "Cormorant Infant"-Notiz bezog sich ursprünglich auf die
   alte Elementor-Seite, ist jetzt aber tatsächlich wieder zutreffend,
   nach Kundenwunsch bewusst reaktiviert (siehe Entscheidungskommentar am
   Dateianfang). Gewicht 300 (nicht 400 wie die Überschrift) — bei dieser
   Displaygröße wirkt die leichtere Kursive wie eine gravierte
   Sockelbeschriftung statt wie Fließtext. Positive Sperrung entfernt,
   dieselbe Begründung wie bei .wt-heading. */
/* F-51: font-size/line-height auf clamp()/relative statt Festwerte
   (50px / line-height:70px) umgestellt — Festwerte waren einer der beiden
   Blowout-Treiber bei mittleren Breiten. Größe kommt aus der Custom
   Property --wt-num-size (auf .wt-stat gesetzt, siehe dort), damit Zahl
   und Suffix garantiert synchron bleiben. */
.wt-stat-num {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--wt-num-size);
  font-weight: 300;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.wt-stat-suffix {
  font-size: var(--wt-num-size);
  font-weight: 300;
  margin-left: 4px;
}

/* F-13: "klassischer" Text ohne Serife (siehe Entscheidungskommentar am
   Dateianfang) — Gewicht 600→400 (zugleich Regel-3-Fix), weite
   Versal-Sperrung 0.24em (dieselbe Sperrung wie .outcome-band__eyebrow,
   sitweit bereits als "klassisches Eyebrow-Register" etabliert) und eine
   feine Goldlinie (Regel 4 "Haarlinien statt Rahmen") statt irgendeines
   Rahmens oder einer Serife — wirkt wie eine Museums-/Sockelbeschriftung. */
.wt-stat-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-top: 8px;
  /* F-51: war nowrap — der zweite Blowout-Treiber: eine 22-Zeichen-
     Beschriftung ("Zufriedene Bewertungen") in 0.24em-Sperrung zwang ihre
     Spalte per min-content über den 1fr-Anteil hinaus, sobald der Platz
     knapp wurde. normal + min-width:0 auf .wt-stat (oben) lässt sie
     stattdessen kontrolliert umbrechen. */
  white-space: normal;
}

.wt-stat-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 auto 10px;
}

/* ============================================================
   Responsive
   ============================================================ */

/* F-51 — Laptop und schmaler (≤1199px, Token "Laptop" aus tokens.css):
   4 Spalten würden hier schon durch Grid-Blowout über den rechten Rand
   hinauswachsen, BEVOR .wt-inner überhaupt auf eine Spalte umbricht (das
   passiert erst bei 768px, siehe Block darunter). Ursache: eine
   nowrap-Beschriftung ("Zufriedene Bewertungen", 22 Zeichen + 0.24em
   Sperrung) zwingt ihre 1fr-Spalte per min-content-Regel über ihren
   fairen Anteil hinaus; die übrigen drei Spalten geben zunächst nach,
   bis auch ihr eigenes min-content erreicht ist — dann bleibt kein
   Ausweg mehr, und die letzte Spalte hängt über den rechten Rand hinaus.
   .wt-stats' eigenes `overflow: hidden` verhindert zwar einen horizontalen
   Scrollbalken, schneidet den Überhang aber einfach unsichtbar ab (live
   gemessen bei 1100/991/850px: "570+ / Gelieferte Seminare" bis zu 84px
   abgeschnitten, siehe Git-Historie/Report zu F-51).
   Fix: 2×2-Raster statt 1×4 — jede Spalte bekommt wieder reichlich Raum.
   Die Einzelzeilen-Trennlinie (:not(:first-child)::before) wird durch
   echte Haarlinien-Borders ersetzt: eine vertikale zwischen den beiden
   Spalten, eine horizontale zwischen den beiden Zeilen — dieselbe
   rgba(255,255,255,.5)-Farbe wie zuvor, nur an die neue Geometrie
   angepasst. */
@media (max-width: 1199px) {
  .wt-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }

  .wt-stat {
    --wt-num-size: clamp(32px, 4vw, 40px);
    padding: 26px 24px;
  }

  .wt-stat:not(:first-child)::before {
    display: none;                        /* ersetzt durch Border-Haarlinien unten */
  }

  .wt-stat:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.5);
  }

  .wt-stat:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }
}

/* Tablet portrait (≤768px Elementor breakpoint): stack columns, text first.
   Live structure: columns are FULL viewport width (zero padding on .wt-inner and columns).
   The 15px horizontal inset is only on the text content wrapper (.wt-col-text padding).
   Measurements at 768px:
   - spacer: 360px (unchanged); heading was 45px at this breakpoint under the
     old Elementor-parity styling — now fluid via clamp(), see F-11 note below
   - text col: 768px wide, 544px tall; inner text has 15px side padding
   - img col: 768px wide; statue PNG at (768−15)=753px → but measured 738px (15px left margin)
     → statue 1414×2000 at 738px wide = 1044px tall → img col height = 1044px
   - statue BG: 768px wide, top=360px (below text col, which is 544px + spacer)
     Wait: text col is 544px, but BG top=360px — that's 360px from the IMG COL top, not text col bottom.
     The live BG y=1283, img col y=923 → offset = 1283−923 = 360px ✓
   - stats: 2×2 grid (each item ~185px wide × 120px tall), total height 180px, zero padding */
@media (max-width: 768px) {
  .wt-spacer-top {
    height: 360px;                        /* live: 360px at tablet */
  }

  /* Zero padding on inner — columns are full viewport width, matching live */
  .wt-inner {
    grid-template-columns: 1fr;
    padding: 0;
  }

  /* Text col: full width. Elementor has a 40px spacer widget at top and 30px at bottom
     of the text column (same at mobile and tablet). Replicate with padding. */
  .wt-col-text {
    order: 1;
    padding: 40px 15px 30px;              /* top: 40px spacer, sides: 15px, bottom: 30px spacer */
    max-width: none;
    text-align: start;
  }

  /* Image col: full viewport width, let statue height drive it naturally */
  .wt-col-image {
    order: 2;
    min-height: 0;
    margin-top: 0;
    display: block;
    position: relative;
  }

  /* Statue BG: full viewport width (column is already full-width at zero padding).
     top=360px is offset from img col's own top (live measured: BG y − img col y = 360px) */
  .wt-statue-bg {
    position: absolute;
    width: 100%;                          /* column is full-width, so 100% = viewport width */
    left: 0;
    top: 360px;
    margin-left: 0;
  }

  /* Statue IMG: width = full column minus 15px left offset.
     At 768px: 768−15 = 753px… but live measured 738px.
     Elementor sets it to 96% of the column (738/768 = 96.1%). Use calc. */
  .wt-statue {
    position: relative;
    width: calc(100% - 15px);            /* ~753px, close to live's 738px */
    margin: 0 0 0 15px;
    left: auto;
    height: auto;
  }

  /* .wt-heading: kein Breakpoint-Override mehr — die clamp(30px, 4vw, 50px)
     Basisregel (Variante D §5) läuft fluid über alle Breiten, exakt wie bei
     .section-title sitweit. Vorher stand hier ein hartes 45px, das die
     alte Pixel-Parität zur Elementor-Live-Seite nachbildete; das ist mit
     der Variante-D-Umstellung (F-11) überholt. */

  /* Stats: kein eigener Block mehr nötig — die 2×2-Regel im neuen
     "≤1199px"-Abschnitt oben deckt 768px bereits mit ab (768 < 1199).
     Vormals stand hier eine Einzelzeilen-4-Spalten-Regel ("all 4 cols fit
     in a SINGLE row"), die exakt den F-51-Blowout verursacht hat, den die
     ≤1199px-Regel jetzt behebt — siehe Kommentar dort. */
}

/* Mobile (≤479px Elementor mobile_extra breakpoint):
   Live measurements at 375px:
   - inner: zero padding, columns are full 375px wide
   - text col: 375px wide, 15px side padding + 40px padding-top + 30px padding-bottom
     (Elementor has a 40px spacer widget at top of text col and 30px at bottom)
     Total text col height: 674px
   - img col: 375px wide; statue BG full width, top = −41px; statue IMG 345px × 488px
   - stats: 1-col, zero padding, numWrapFontSize=45px, label 16px; total height ~500px */
@media (max-width: 479px) {
  /* 360px → 40px (2026-08-04, Kundenmeldung „zu viel Platz" mit Bildbeleg).
     Der Wert stammt aus der alten Elementor-Seite und wurde beim Nachbau
     mitgenommen — der Kommentar „live: still 360px at mobile" sagt das
     auch offen. Auf Desktop trägt der Platzhalter die Statue, die dort
     über den Sektionsrand hinausragt. Mobil stehen die Spalten
     untereinander, die Statue kommt nach dem Text, und der Platzhalter
     war schlicht 360px Nichts über der Überschrift.
     Gemessen: vom Platzhalter bis zur Eyebrow waren es 400px. */
  .wt-spacer-top {
    height: 40px;
  }

  .wt-inner {
    padding: 0;                           /* zero — columns are full viewport width */
  }

  /* Text col: 15px side padding + 40px top + 30px bottom to match Elementor spacer widgets */
  .wt-col-text {
    padding: 40px 15px 30px;
  }

  /* Image col: full 375px, let statue height drive it */
  .wt-col-image {
    min-height: 0;
  }

  /* Statue BG at mobile: full col width (375px), top = −41px from img col top */
  .wt-statue-bg {
    width: 100%;
    left: 0;
    top: -41px;
    margin-left: 0;
  }

  /* Statue IMG at mobile: 345px = 375 − 15px left − 15px right inset, 15px left margin */
  .wt-statue {
    width: calc(100% - 30px);            /* 375−30 = 345px */
    margin: 0 0 0 15px;
  }

  /* .wt-heading: kein Override — clamp(30px, 4vw, 50px) greift auch hier,
     siehe Begründung im 768px-Block oben. */

  /* Stats: 1-col, zero padding. Items are centered.
     F-51: --wt-num-size ersetzt den vorherigen Festwert 45px durch einen
     eigenen, engeren Clamp-Korridor für die schmalste Stufe. Außerdem
     müssen hier die Border-Haarlinien der ≤1199px-2×2-Stufe zurückgesetzt
     werden — ≤479px liegt INNERHALB von ≤1199px (beide Regeln greifen
     gleichzeitig), ohne den Reset stünde an Spalte 2/4 weiterhin eine
     linke Linie und an Spalte 3/4 eine obere Linie, obwohl es bei 1
     Spalte keine Nachbarzelle mehr dafür gibt. */
  /* Die 120px Bodenabstand der Checkliste sind eine reine
     Desktop-Rechnung: Dort zieht das Goldband mit `margin-top: -70px`
     nach oben, sichtbar bleiben rund 50px. Mobil steht zwischen
     Checkliste und Statue nichts, was etwas wegzieht — gemessen
     150px Lücke (120px Rand + 30px Polster der Textspalte).
     40px lassen die Sektion atmen, ohne zu reißen.
     Kundenmeldung 2026-08-04 mit Bildbeleg. */
  .wt-checklist {
    margin-bottom: 40px;
  }

  /* Das Goldband hatte mobil an JEDER Stelle 0px Polster: oben, unten
     und zwischen allen vier Werten (nachgemessen 2026-08-04). Zahl und
     Beschriftung des nächsten Werts begannen unmittelbar unter der
     vorigen Beschriftung — Kundenmeldung „zu eng".

     Der Abstand kommt als `row-gap` und nicht als Polster an `.wt-stat`:
     So bleibt der Rhythmus ZWISCHEN den Werten, ohne oben und unten
     zusätzlich aufzutragen — vier Werte mal Polster hätten das Band
     unnötig in die Länge gezogen. */
  .wt-stats {
    grid-template-columns: 1fr;
    padding: 34px 0;
    row-gap: 28px;
    max-width: 100%;
  }

  .wt-stat {
    --wt-num-size: clamp(30px, 9vw, 40px);
    padding: 0 15px;                      /* live innerWrapPad: 0 15px */
    align-items: center;                  /* live: centered in 1-col stat items */
    text-align: center;
  }

  /* Reset muss dieselbe Selektor-Spezifität wie die ≤1199px-Regeln treffen
     (.wt-stat:nth-child(2n) / :nth-child(n+3) sind (0,2,0)) — ein bloßes
     .wt-stat { border-left: none } (0,1,0) verliert sonst unabhängig von
     der Reihenfolge im Stylesheet gegen die spezifischere Regel. Live
     geprüft: ohne diesen Fix blieb bei Spalte 2/4 eine linke und bei
     Spalte 3/4 eine obere Haarlinie sichtbar, obwohl bei 1 Spalte keine
     Nachbarzelle mehr existiert, die sie rechtfertigt. */
  .wt-stat:nth-child(2n),
  .wt-stat:nth-child(n + 3) {
    border-left: none;
    border-top: none;
  }

  .wt-stat-label {
    font-size: 16px;                      /* live titleFontSize: 16px */
    margin-top: 8px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */
/* Team Member Card Component */

.team-card {
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  transition: transform var(--transition-smooth);
}

.team-card__image {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}

.team-card__image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter var(--transition-smooth);
}

.team-card:hover .team-card__image img {
  filter: grayscale(0%);
}

/* Square portrait variant — used on the homepage 2-per-row team grid */
.team-grid .team-card__image img {
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Zustand ohne Portrait — hasPortrait: false (trainers.11tydata.js liefert für
   `image` immer einen Fallback-Pfad, auch wenn die Datei nicht existiert; nur
   `hasPortrait` prüft das per fs.existsSync). Kein kaputtes <img>, sondern eine
   zurückhaltende Platzhalterfläche mit Silhouette — sie ist ein Fehlen, keine
   Aussage. Gleiche Zeichnung wie team-section-card__image--placeholder auf der
   Startseite, aber im Vokabular von .team-card, damit die beiden Komponenten
   nicht durcheinandergeraten. */
.team-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  background: var(--surface-mist);
}

.team-card__image--placeholder svg {
  width: 25%;
  height: 25%;
  fill: var(--grey);
}

/* Hinweis: Der Overlay-Link (.team-card__overlay) braucht keine eigene Regel
   für den Platzhalterfall — er ist ein Kind von .team-card__image bzw.
   .team-card__image--placeholder (beide Klassen sind am Element gesetzt) und
   erbt sowohl die absolute Positionierung (relativer Elternkontext von
   .team-card__image) als auch die bestehende Hover-Sichtbarkeit unten. */

.team-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.team-card:hover .team-card__overlay {
  opacity: 1;
}

.team-card__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--color-gold);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 0;
  transition: background var(--transition-fast);
}

.team-card__social svg {
  width: 24px;
  height: 24px;
  fill: var(--color-white);
}

.team-card__social:hover {
  background: var(--color-navy);
}

.team-card__info {
  padding: 0;
  text-align: center;
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 300;
  color: var(--color-navy);
  margin-bottom: 3px;
  margin-top: 0;
  letter-spacing: 0.008em;
  line-height: 1.28;
}

.team-card__role {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: #999999; /* kein CI-Token; analog zur dokumentierten Testimonial-Attribution-Farbe (brand.md §3) */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-top: 2px;
  margin-bottom: 0;
}

.team-card__desc {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
  margin-top: 10px;
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */
/* Testimonials section split layout helpers */
.testimonials-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonials-image {
  align-self: stretch;
  overflow: hidden;
}

.testimonials-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 400px;
}

/* Single testimonial card */
.testimonial-card {
  padding: 20px 0;
  text-align: center;
}

.testimonial-card__open-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 80px;
  font-weight: 300;
  color: var(--color-gold);
  line-height: 0.8;
  margin-bottom: 20px;
  display: block;
}

/* Zitat — one of the three sanctioned serif accents (Variante D §4). Spec
   sets this against --surface-ivory with Navy text; this card is used on
   dark (--color-navy) sections, so it keeps white — only
   family/style/weight/size/line-height/max-width move to the spec values. */
.testimonial-card__quote {
  font-family: var(--font-accent);
  font-size: clamp(25px, 3.5vw, 42px);
  font-weight: 300;
  font-style: italic;
  color: var(--color-white);
  line-height: 1.34;
  max-width: 22ch;
  margin: 0 auto 30px;
}

.testimonial-card__stars {
  color: var(--color-gold);
  font-size: 18px;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-card__name {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-bottom: 5px;
}

.testimonial-card__title {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: #999999; /* kein CI-Token; in brand.md §3 explizit als Testimonial-Attribution-Farbe dokumentiert */
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */
.blog-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.blog-card__image-link {
  display: block;
  text-decoration: none;
}

.blog-card__image {
  position: relative;
}

.blog-card__image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.blog-card__date {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--navy-deep);
  color: var(--color-white);
  padding: 23px 20px 21px 20px;
  text-align: center;
  font-family: var(--font-body);
}

.blog-card__date-day {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.blog-card__date-year {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.8px;
}

.blog-card__content {
  padding: 0;
}

.blog-card__meta {
  display: flex;
  align-items: baseline;
  gap: 15px;
  margin-bottom: 15px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-gold);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.65px;
  margin-top: 20px;
}

.blog-card__meta span + span::before {
  content: '/';
  margin-right: 15px;
  color: var(--color-gold);
}

/* F-59-Audit: die letzte <span> (Kategorie) trug bisher denselben
   Serifen-Akzent wie das Kategorielabel auf Seminar-Karten — blog-card.css
   steht aber NICHT auf der abschliessenden Liste in Variante D §4 (nur
   seminar-card.css ist dort als "Kategorielabel auf Karten" gelistet).
   Zurueckgesetzt auf die geerbte .blog-card__meta-Grundformatierung
   (Inter, Grossbuchstaben, Gold) — identisch zum Autoren-Span daneben,
   kein Regelbruch der Drei-/Sechs-Stellen-Regel mehr. */

.blog-card__title {
  font-family: var(--font-heading);
  font-size: 35px;
  line-height: 1.18;
  letter-spacing: 0.7px;
  margin-top: 5px;
  margin-bottom: 18px;
}

.blog-card__title a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-card__title a:hover {
  color: var(--color-gold);
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.85;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-gold);
  color: var(--color-white);
  padding: 10px 35px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 20px;
  transition: opacity var(--transition-fast);
}

.blog-card__more:hover {
  opacity: 0.85;
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */
/* Process Steps - text-based numbered list */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.process-step {
  position: relative;
}

.process-step__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-navy);
  letter-spacing: 0.44px;
  line-height: 26px;
  margin-bottom: 10px;
}

.process-step__text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 26px;
}

/* Process section layout */
.process-content {
  display: flex;
  flex-direction: column;
}

/* Process section outer split — stretch so image fills the column height */
#prozess .split {
  align-items: stretch;
}

.process-image {
  overflow: hidden;
  border-radius: 2px;
  min-height: 500px;
  position: relative;
}

.process-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#prozess .section-title {
  font-size: 35px;
  line-height: 41.3px;
  letter-spacing: 0.7px;
}

@media (max-width: 768px) {
  .process-step__title {
    font-size: 20px;
  }

  /* On mobile the split stacks, so image reverts to normal flow */
  .process-image {
    min-height: 300px;
  }

  .process-image img {
    position: relative;
    height: 300px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */
/* ============================================
   Contact Info Section Layout
   ============================================ */

.contact-info-section {
  padding: var(--space-lg) 0;
}

/* F-52 (2026-07-28): "2 Sektionen reichen" — the third card
   ("Erreichbarkeit" / Öffnungszeiten) was removed on the client's
   request, so the grid drops from three columns to two. */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: 800px;
  margin: 0 auto;
}

.contact-info-col {
  padding: var(--space-md) var(--space-md);
}

.contact-info-col--bordered {
  border-left: 1px solid var(--line);
}

@media (max-width: 768px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-col {
    padding: var(--space-md) var(--space-sm);
  }

  .contact-info-col--bordered {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

/* ============================================
   Contact Info Card Component
   ============================================ */

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.contact-card__icon {
  flex-shrink: 0;
  color: var(--color-gold);
}

.contact-card__icon svg {
  width: 56px;
  height: 56px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
}

.contact-card__content {
  flex: 1;
}

.contact-card__title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.56px;
  color: var(--color-navy);
  margin-bottom: 15px;
  line-height: 1.2;
}

.contact-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-dark);
  margin-bottom: 20px;
  line-height: 1.7;
}

.contact-card__body strong {
  color: var(--color-navy);
  font-weight: 400;
}

.contact-card__body p {
  margin: 0 0 8px;
}

.contact-card__link {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity var(--transition-fast);
}

.contact-card__link:hover {
  opacity: 0.8;
}

/* ============================================
   Google Maps Section — ENTFERNT für Version 1 (Kundenentscheidung, F-17).
   Vollständig archiviert in docs/archiv/maps-sektion.md
   (.maps-section, .maps-consent und alle Untervarianten).
   ============================================ */

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */
/* Logo Grid */
.logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.logo-grid__item {
  flex: 0 0 auto;
}

.logo-grid__item img {
  max-height: 50px;
  height: auto;
  width: auto;
  max-width: 100%;
  filter: grayscale(1);
  opacity: 0.6;
  transition: all var(--transition-fast);
}

.logo-grid__item img:hover {
  filter: grayscale(0);
  opacity: 1;
}

@media (max-width: 575px) {
  .logo-grid {
    gap: 25px;
  }

  .logo-grid__item img {
    height: 35px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */
/* Newsletter Form */
.newsletter-form__inner {
  display: flex;
  max-width: 500px;
}

.newsletter-form__input {
  flex: 1;
  padding: 0.9rem 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.newsletter-form__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form__input:focus {
  border-color: var(--color-gold);
}

.newsletter-form__btn {
  border-radius: 0;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .newsletter-form__inner {
    flex-direction: column;
  }

  .newsletter-form__input {
    width: 100%;
  }

  .newsletter-form__btn {
    width: 100%;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */
/* ============================================================
   CTA Banner — compact strip with phone icon + heading + text link
   Background: h6_ctac_bg.png (navy left, photo right)
   Layout: boxed ~1170px, icon absolutely positioned left
   ============================================================ */

/* Phone wobble animation */
@keyframes phone-wobble {
  0%        { transform: rotate(0deg) scale(1) skew(1deg); }
  10%       { transform: rotate(-10deg) scale(1) skew(1deg); }
  20%       { transform: rotate(15deg) scale(1) skew(1deg); }
  30%       { transform: rotate(-10deg) scale(1) skew(1deg); }
  40%       { transform: rotate(15deg) scale(1) skew(1deg); }
  50%, 100% { transform: rotate(0deg) scale(1) skew(1deg); }
}

.cta-banner {
  background-image: url('/assets/images/h6_ctac_bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  overflow: hidden;
}

/* Inner container — boxed width, big left padding for the icon */
.cta-banner__inner {
  position: relative;
  max-width: 1170px;
  margin: 0 auto;
  padding: 62px 40px 57px 160px;
  min-height: 229px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* ---- Phone icon — absolute positioned to the left ---- */
.cta-banner__icon {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 63px;
  height: 63px;
  background-color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-banner__phone-svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
  /* Apply wobble animation */
  animation: phone-wobble 1.8s ease-in-out infinite;
  transform-origin: center center;
}

/* Pause animation on banner hover */
.cta-banner:hover .cta-banner__phone-svg {
  animation-play-state: paused;
}

/* ---- Content ---- */
.cta-banner__content {
  /* Takes up left ~60% of the boxed container (where navy bg sits) */
  max-width: 600px;
}

.cta-banner__heading {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 1.5px;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.cta-banner__text {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: 0.8px;
  line-height: 1.3;
  margin: 0;
}

.cta-banner__link {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.cta-banner__link:hover {
  color: var(--color-gold);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .cta-banner__inner {
    padding: 50px 40px 46px 130px;
  }

  .cta-banner__icon {
    left: 30px;
  }
}

@media (max-width: 768px) {
  .cta-banner {
    background-position: left center;
  }

  .cta-banner__inner {
    padding: 44px 24px 40px 24px;
  }

  /* On mobile, icon sits above content (not absolutely positioned) */
  .cta-banner__icon {
    position: static;
    transform: none;
    margin-bottom: 16px;
    align-self: flex-start;
  }

  .cta-banner__heading {
    font-size: 22px;
  }

  .cta-banner__text {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .cta-banner__heading {
    font-size: 18px;
    letter-spacing: 1px;
  }

  .cta-banner__text {
    font-size: 14px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */
.site-footer {
  /* Verlauf statt Vollton — übernommen aus dem Broschüren-Editor, wo
     dunkle Flächen durchgehend `linear-gradient(158deg, var(--navy),
     var(--navy-deep))` tragen. Der Unterschied beträgt 19 Helligkeitsstufen
     und ist kaum als Verlauf erkennbar; er nimmt der Fläche nur die
     Härte. Ersetzt das am 2026-07-31 entfernte Filmkorn (Kundenwunsch:
     „vllt ein gradient genau so wie bei broschüre, sehr einfach kaum
     sichtbar"). */
  background: linear-gradient(158deg, var(--navy), var(--navy-deep));
  position: relative;
  overflow: hidden;
  /* Eigener Stapelkontext. Stand ursprünglich hier, um das Filmkorn an
     dieser Sektion zu halten; das Korn ist am 2026-07-31 auf Kundenwunsch
     entfallen. Die Zeile bleibt trotzdem: Sie begrenzt die Schichtung auf
     diese Sektion, und sie zu entfernen könnte benachbarte Elemente
     verschieben, ohne dass jemand etwas davon hätte. */
  isolation: isolate;
}

.footer-body {
  padding: 105px 0 70px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: var(--space-lg);
}

/* 4-column links grid */
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
}

.footer-links-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-column ul li a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--transition-fast);
  line-height: 1.4;
}

.footer-links-column ul li a:hover {
  color: var(--color-white);
}

.footer-links-title {
  font-family: var(--font-subheading);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-sm) 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  max-width: 700px;
  margin: 0 auto;
  padding-top: 0;
}

@media (max-width: 768px) {
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .footer-links {
    grid-template-columns: 1fr;
  }
}

/* F-19: altes Rundlogo (annähernd quadratisch, mit Emblem) durch die
   Wortmarke ersetzt (wordmark-light.png, 887x79 — 11.23:1 Seitenverhältnis).
   Die alte max-width: 607px/height: auto-Regel war auf das quadratische
   Format zugeschnitten; unverändert übernommen würde die Wortmarke bei
   607px Breite ≈54px hoch und fast containerbreit werden. Stattdessen über
   width gesteuert (320px → ≈28px Höhe, nahe an einer großzügigen
   Footer-Präsenz, ohne die Tagline darunter zu erschlagen). */
.footer-logo {
  width: 320px;
  max-width: 100%;
  height: auto;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
}

.footer-tagline strong {
  color: var(--color-white);
  font-weight: 500;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-white);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.5px;
  border: 1px solid var(--color-gold);
  padding: 14px 30px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.footer-cta:hover {
  background-color: var(--color-gold);
  color: var(--color-white);
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgb(105, 114, 125); /* kein exakter CI-Token-Treffer; bewusst gedaempftes Icon-Grau, unabhaengig von brand.md belassen */
  background-color: var(--color-navy-alt);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.footer-social-link:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

/* Bottom bar — Variante D §5: the old rgb(17,25,46) had no equivalent in the
   new palette. Kunde-Vorschlag: same navy as the footer above it, set off
   by a hairline instead of a distinct tone. */
.footer-bottom {
  background-color: var(--color-navy-alt);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 23px 0;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: var(--space-sm);
}

.footer-legal a {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--color-gold);
}

/* Mobil: Tippfläche auf 44 px Höhe.
   Die drei Links maßen 24 px hoch und standen mit 16 px Abstand
   nebeneinander — auf dem Handy trifft man da regelmäßig den Nachbarn.
   Der Innenabstand vergrößert nur die Fläche, die Schriftgröße und die
   Optik bleiben unverändert. Gemessen 2026-08-04 bei 390 px. */
@media (max-width: 575px) {
  .footer-legal {
    flex-wrap: wrap;
    gap: 4px var(--space-md);
  }

  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

@media (max-width: 575px) {
  .footer-logo { width: 220px; }
}

/* ============================================================
   Footer Awards — Kundennote "Top Dienstleister" badges 2022-2025
   ============================================================ */

.footer-awards {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.footer-awards-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 18px 0;
}

.footer-awards-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-awards-row a {
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.92;
}

.footer-awards-row a:hover {
  transform: translateY(-2px);
  opacity: 1;
}

.footer-awards-row img {
  height: 56px;
  width: auto;
  display: block;
  border-radius: 3px;
}

@media (max-width: 575px) {
  .footer-awards-row {
    gap: 12px;
  }
  .footer-awards-row img {
    height: 44px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

/* Dot navigation — dash/pill style via ::after pseudo-element */
.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0;
}

.carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 5px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: width 0.3s linear;
}

.carousel__dot:first-child {
  margin-left: 0;
}

.carousel__dot:last-child {
  margin-right: 0;
}

.carousel__dot::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: rgb(216, 216, 216);
  transition: background-color 0.3s linear;
}

.carousel__dot--active,
.carousel__dot:hover {
  width: 35px;
}

.carousel__dot--active::after,
.carousel__dot:hover::after {
  background-color: var(--color-white);
}

/* Light theme dots (for use on light backgrounds) */
.carousel--light .carousel__dot::after {
  background-color: var(--grey-secondary-alt);
}
.carousel--light .carousel__dot--active::after,
.carousel--light .carousel__dot:hover::after {
  background-color: var(--color-gold);
}

/* Arrow navigation */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 10;
  transition: all var(--transition-fast);
}

.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

.carousel__arrow:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */
/* ============================================================
   FAQ Accordion
   ============================================================ */

.accordion {
  width: 100%;
}

/* Individual item wrapper */
.accordion__item {
  border: 1px solid rgb(216, 216, 216); /* kein CI-Token; konsistentes UI-Grau, siehe auch tabs.css */
  margin-bottom: -1px; /* collapse borders between items */
}

.accordion__item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Trigger button (closed state) */
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 50px 17px 25px;
  background: rgba(8, 27, 52, 0.03);
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--space-sm);
  transition: background var(--transition-smooth), color var(--transition-smooth);
}

.accordion__trigger:hover {
  background: rgba(8, 27, 52, 0.06);
}

/* Trigger — open/active state */
.accordion__trigger[aria-expanded="true"] {
  background: var(--navy-deep);
  color: var(--color-white);
}

/* Title text */
.accordion__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-navy);
  letter-spacing: 0.44px;
  line-height: 1.35;
  transition: color var(--transition-smooth);
}

.accordion__trigger[aria-expanded="true"] .accordion__title {
  color: var(--color-white);
}

/* Toggle icon */
.accordion__icon {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1;
  transition: color var(--transition-smooth), transform var(--transition-smooth);
  user-select: none;
  /* Align to the far right using the button's padding-right */
  margin-right: calc(-1 * (50px - var(--space-sm)));
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  color: var(--color-white);
}

/* Panel (collapsed) — uses max-height for smooth animation */
.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-smooth);
}

/* Panel — JS removes hidden and adds open class */
.accordion__panel.accordion__panel--open {
  max-height: 600px; /* generous max, content will not be taller */
}

/* Panel content */
.accordion__content {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  padding: 19px 25px;
  border-top: none;
  border-bottom: 1px solid rgb(216, 216, 216);
}

/* ---- Responsive ---- */
@media (max-width: 575px) {
  .accordion__trigger {
    padding: 14px 36px 14px 16px;
  }

  .accordion__title {
    font-size: 18px;
  }

  .accordion__icon {
    margin-right: calc(-1 * (36px - var(--space-sm)));
  }

  .accordion__content {
    padding: 16px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */
/* ============================================================
   Tabs Component
   ============================================================ */

.tabs {
  border: 1px solid rgb(216, 216, 216); /* kein CI-Token; konsistentes UI-Grau, siehe auch accordion.css */
  background: var(--color-white);
}

/* Tab list row */
.tabs__list {
  display: flex;
  border-bottom: 1px solid rgb(216, 216, 216);
}

/* Individual tab button */
.tabs__tab {
  flex: 1;
  padding: 0 30px;
  height: 56px;
  background: var(--color-faint);
  border: none;
  border-right: 1px solid rgb(216, 216, 216);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  letter-spacing: 1.12px;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}

.tabs__tab:last-child {
  border-right: none;
}

/* Active tab */
.tabs__tab--active,
.tabs__tab[aria-selected="true"] {
  background: var(--color-white);
  color: var(--color-navy);
  /* Active tab sits on top of the border — visually merges with panel */
  margin-bottom: -1px;
  border-bottom: 1px solid var(--color-white);
  z-index: 1;
}

/* Hover on inactive tabs */
.tabs__tab:not(.tabs__tab--active):not([aria-selected="true"]):hover {
  background: var(--color-faint);
}

/* Tab panels container */
.tabs__panels {
  /* no extra styling needed — panels fill this */
}

/* Single panel */
.tabs__panel {
  display: none;
  padding: 24px 25px 28px;
}

.tabs__panel--active,
.tabs__panel:not([hidden]) {
  display: block;
}

/* Panel bold heading */
.tabs__panel-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Panel body text */
.tabs__panel-content {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.75;
}

.tabs__panel-content p {
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 575px) {
  .tabs__list {
    flex-direction: column;
    border-bottom: none;
  }

  .tabs__tab {
    width: 100%;
    height: auto;
    padding: 14px 16px;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid rgb(216, 216, 216);
  }

  .tabs__tab--active,
  .tabs__tab[aria-selected="true"] {
    margin-bottom: 0;
    border-bottom: 1px solid rgb(216, 216, 216);
  }

  .tabs__panel {
    padding: 18px 16px 22px;
  }
}

@media (max-width: 768px) and (min-width: 576px) {
  .tabs__tab {
    padding: 0 16px;
    font-size: 12px;
    letter-spacing: 0.8px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */
/* ============================================================
   BREADCRUMB NAVIGATION
   Semi-transparent white pill overlaid on hero images.
   Found on: /trainer/* and /team-* pages.
   ============================================================ */

.breadcrumb {
  display: inline-block;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 11px 30px;
  background: rgba(255, 255, 255, 0.18);
  gap: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.breadcrumb__link {
  color: var(--color-white);
  text-decoration: none;
  transition: text-decoration var(--transition-fast);
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__divider {
  color: var(--color-white);
  margin: 0 10px;
  font-size: 13px;
  opacity: 0.85;
}

.breadcrumb__current {
  color: var(--color-gold);
  font-weight: 400;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 575px) {
  .breadcrumb__list {
    padding: 9px 18px;
    flex-wrap: wrap;
    gap: 2px 0;
  }

  .breadcrumb__item {
    font-size: 12px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */
/* ============================================================
   ARCHIVE CARD (Schwerpunkte / Seminar Listing)
   Transparent card — image with date badge, title, excerpt, CTA.
   Used in /schwerpunkte/ and seminar archive pages.
   Mirrors blog-card patterns with seminar-specific adjustments.
   ============================================================ */

.archive-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.archive-card__image-link {
  display: block;
  text-decoration: none;
  overflow: hidden;
}

.archive-card__image {
  position: relative;
  overflow: hidden;
}

.archive-card__image img {
  width: 100%;
  display: block;
  transition: transform var(--transition-smooth);
}

.archive-card:hover .archive-card__image img {
  transform: scale(1.04);
}

/* Navy date badge — top-left corner */
.archive-card__date {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-navy-alt);
  color: var(--color-white);
  padding: 23px 20px 21px 20px;
  text-align: center;
  font-family: var(--font-body);
  z-index: 1;
}

.archive-card__date-day {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.archive-card__date-year {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.8px;
}

/* Content area */
.archive-card__content {
  padding: 0;
}

/* Meta line: author / category in gold uppercase */
.archive-card__meta {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 15px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-gold);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.65px;
}

.archive-card__meta span + span::before {
  content: '/';
  margin-right: 15px;
  color: var(--color-gold);
}

/* Title */
.archive-card__title {
  font-family: var(--font-heading);
  font-size: 35px;
  line-height: 1.18;
  letter-spacing: 0.7px;
  margin-top: 5px;
  margin-bottom: 18px;
  font-weight: 400;
}

.archive-card__title a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.archive-card__title a:hover {
  color: var(--color-gold);
}

/* Excerpt */
.archive-card__excerpt {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gold CTA button */
.archive-card__btn {
  display: inline-block;
  background-color: var(--color-gold);
  color: var(--color-white);
  padding: 10px 35px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 20px;
  transition: opacity var(--transition-fast);
}

.archive-card__btn:hover {
  opacity: 0.85;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .archive-card__title {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .archive-card__title {
    font-size: 24px;
  }

  .archive-card__date {
    padding: 16px 14px;
  }

  .archive-card__date-day {
    font-size: 0.875rem;
  }

  .archive-card__date-year {
    font-size: 0.8rem;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */
/* ============================================================
   SIDEBAR WIDGETS
   Vertical column of widget blocks for blog/archive pages.
   Navy section headings, category list, recent posts, newsletter.
   ============================================================ */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- Individual Widget Block ---- */
.sidebar__widget {
  margin-bottom: 35px;
}

.sidebar__widget:last-child {
  margin-bottom: 0;
}

/* ---- Widget Title (Navy heading) ---- */
.sidebar__widget-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  color: var(--color-navy);
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin: 0 0 20px 0;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-navy);
}

/* ============================================================
   AUTHOR WIDGET
   ============================================================ */
.sidebar__widget--author {
  text-align: center;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
}

.sidebar__author-image {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.sidebar__author-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Dark gradient overlay at the bottom of the author image */
.sidebar__author-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent 0%, rgba(11, 37, 69, 0.85) 100%);
  pointer-events: none;
}

.sidebar__author-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  z-index: 1;
  text-align: left;
}

.sidebar__author-role {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  margin: 0 0 4px;
}

.sidebar__author-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-white);
  font-weight: 300;
  margin: 0;
  letter-spacing: 0.3px;
}

/* ============================================================
   SEARCH WIDGET
   ============================================================ */
.sidebar__widget--search {
  margin-bottom: 30px;
}

.sidebar__search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  overflow: hidden;
}

.sidebar__search-input {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-dark);
  border: none;
  outline: none;
  background: var(--color-white);
}

.sidebar__search-input::placeholder {
  color: #aaa; /* kein CI-Token; neutrale Platzhalter-Farbe */
}

.sidebar__search-btn {
  padding: 10px 14px;
  background: var(--color-gold);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
}

.sidebar__search-btn:hover {
  opacity: 0.85;
}

/* ============================================================
   CATEGORIES WIDGET
   ============================================================ */
.sidebar__cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__cat-item {
  border-bottom: 1px solid var(--line);
}

.sidebar__cat-item:first-child {
  border-top: 1px solid var(--line);
}

.sidebar__cat-link {
  display: block;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-dark);
  text-decoration: none;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.sidebar__cat-link:hover {
  color: var(--color-gold);
  padding-left: 6px;
}

/* ============================================================
   RECENT POSTS WIDGET
   ============================================================ */
.sidebar__posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar__post-item {
  /* no additional styles — link handles it */
}

.sidebar__post-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
}

.sidebar__post-link:hover .sidebar__post-title {
  color: var(--color-gold);
}

.sidebar__post-thumb {
  flex-shrink: 0;
  width: 68px;
  height: 54px;
  overflow: hidden;
}

.sidebar__post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-fast);
}

.sidebar__post-link:hover .sidebar__post-thumb img {
  transform: scale(1.05);
}

.sidebar__post-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__post-date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text);
  letter-spacing: 0.3px;
}

.sidebar__post-title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-dark);
  line-height: 1.4;
  transition: color var(--transition-fast);
}

/* ============================================================
   NEWSLETTER WIDGET
   ============================================================ */
.sidebar__widget--newsletter {
  /* uses widget-title above */
}

.sidebar__newsletter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar__newsletter-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-dark);
  border: 1px solid var(--line);
  outline: none;
  box-sizing: border-box;
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.sidebar__newsletter-input:focus {
  border-color: var(--color-gold);
}

.sidebar__newsletter-input::placeholder {
  color: #aaa; /* kein CI-Token; neutrale Platzhalter-Farbe */
}

.sidebar__newsletter-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-gold);
  color: var(--color-white);
  border: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.sidebar__newsletter-btn:hover {
  opacity: 0.85;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .sidebar {
    /* On tablet landscape and below, sidebar goes below content */
    margin-top: 50px;
  }
}

@media (max-width: 575px) {
  .sidebar__widget-title {
    font-size: 22px;
  }

  .sidebar__post-thumb {
    width: 56px;
    height: 44px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */
/* ============================================================
   EVENT CARD
   Horizontal card: dark content panel (left) + background image (right)
   Used on /veranstaltungen/ and seminar listings
   ============================================================ */

.event-card {
  display: flex;
  min-height: 200px;
  background: var(--color-navy);
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--transition-fast);
}

.event-card:hover {
  box-shadow: var(--shadow-hover);
}

/* Left: content panel */
.event-card__content {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 3rem;
  position: relative;
  z-index: 1;
}

/* Gold uppercase type label — Eyebrow, Variante D §5 */
.event-card__type {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}

/* White heading */
.event-card__title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.25;
  margin: 0 0 1rem;
}

/* Date + location row */
.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.75rem;
}

.event-card__date,
.event-card__location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.03em;
}

.event-card__meta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-gold);
}

/* Outline CTA button */
.event-card__btn {
  display: inline-block;
  align-self: flex-start;
  padding: 0.6rem 1.5rem;
  border: 1.5px solid var(--color-white);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.event-card__btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

/* Right: background image panel */
.event-card__image {
  flex: 0 0 45%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-navy-alt);
  position: relative;
}

/* Subtle left-edge gradient to blend image into content area */
.event-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-navy) 0%, transparent 30%);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet portrait: stack vertically */
@media (max-width: 768px) {
  .event-card {
    flex-direction: column;
  }

  .event-card__content {
    flex: none;
    padding: 2rem 1.5rem;
  }

  .event-card__image {
    flex: none;
    height: 200px;
  }

  .event-card__image::before {
    background: linear-gradient(to bottom, var(--color-navy) 0%, transparent 30%);
  }
}

/* Mobile: tighten padding and font sizes */
@media (max-width: 575px) {
  .event-card__content {
    padding: 1.5rem 1.25rem;
  }

  .event-card__title {
    font-size: 1.3rem;
  }

  .event-card__image {
    height: 160px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */
/* ============================================================
   SOCIAL SHARE BAR
   Horizontal bar: "Share:" label + circular icon buttons.
   Used on blog posts, case studies, article detail pages.

   Reference: dark navy background bar, white icon circles,
   hover state lightens the icon circle background.

   F-59-Audit: die Plattformfarben unten (#1877F2 Facebook, #1DA1F2
   Twitter/X, #0A66C2 LinkedIn, je mit Hover-Aufhellung) sind bewusst
   KEINE CI-Tokens — es sind die offiziellen Markenfarben der jeweiligen
   Plattform und duerfen nicht auf --color-gold/--color-navy umgestellt
   werden, ohne die Wiedererkennbarkeit der Icons zu verlieren.
   ============================================================ */

.social-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

/* "Share:" text label */
.social-share__label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-dark);
  white-space: nowrap;
}

/* Icon row */
.social-share__icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Individual icon circle links */
.social-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-white);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.social-share__link svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Facebook — blue */
.social-share__link--facebook {
  background: #1877F2;
}

.social-share__link--facebook:hover {
  background: #2d8cf0;
  transform: translateY(-2px);
}

/* X / Twitter — sky blue (matches reference screenshot) */
.social-share__link--twitter {
  background: #1DA1F2;
}

.social-share__link--twitter:hover {
  background: #44b5f7;
  transform: translateY(-2px);
}

/* LinkedIn — blue */
.social-share__link--linkedin {
  background: #0A66C2;
}

.social-share__link--linkedin:hover {
  background: #1a7fd4;
  transform: translateY(-2px);
}

/* ============================================================
   DARK VARIANT — for use inside navy/dark backgrounds
   Add class .social-share--dark to the wrapper
   ============================================================ */
.social-share--dark {
  background: var(--color-navy);
  padding: 0.75rem 1.5rem;
}

.social-share--dark .social-share__label {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 575px) {
  .social-share__label {
    font-size: 0.78rem;
  }

  .social-share__link {
    width: 32px;
    height: 32px;
  }

  .social-share__link svg {
    width: 14px;
    height: 14px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */
/* =========================================================
   Entwicklungskit Resource Grid
   Light section background with 2×2 dark-navy card grid,
   gold icon boxes + gold CTA links.
   ========================================================= */

.entw-section {
  background-color: var(--color-offwhite);
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

/* Decorative statue watermark — right side */
.entw-section::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 380px;
  background-image: url('/assets/images/h6_statue_bg.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
}

.entw-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
  z-index: 1;
}

/* =========================================================
   Section Header
   ========================================================= */

.entw-header {
  text-align: center;
  margin-bottom: 60px;
}

.entw-subheading {
  display: block;
  font-family: var(--font-body); /* Inter — Eyebrow, Variante D §5 */
  font-size: 11px;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  margin-bottom: 28px;
}

.entw-heading {
  font-family: var(--font-heading); /* Jost */
  font-size: 52px;
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: 0.012em;
  margin: 0 0 20px;
}

.entw-description {
  font-family: var(--font-body); /* Inter */
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
}

/* =========================================================
   Card Grid — 2 columns × 2 rows
   ========================================================= */

.entw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* =========================================================
   Individual Card
   Dark navy background, gold icon box in top-left
   ========================================================= */

.entw-card {
  background-color: var(--color-navy); /* #0B2545 */
  border: none;
  border-radius: 0;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.entw-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Icon — gold square container with icon inside */
.entw-card__icon {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  background-color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.entw-card__icon svg {
  width: 26px;
  height: 26px;
  fill: var(--color-white);
  color: var(--color-white);
}

/* Card title */
.entw-card__title {
  font-family: var(--font-heading); /* Jost */
  font-size: 24px;
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.25;
  margin: 0 0 12px;
}

/* Card body text */
.entw-card__desc {
  font-family: var(--font-body); /* Inter */
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin: 0 0 24px;
  flex: 1;
}

/* Gold uppercase CTA link */
.entw-card__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui); /* Inter */
  font-size: 10.5px;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  text-decoration: none;
  gap: 8px;
  transition: gap var(--transition-fast), opacity var(--transition-fast);
  margin-top: auto;
}

.entw-card__cta:hover {
  opacity: 0.8;
  gap: 14px;
}

.entw-card__cta-arrow {
  transition: transform var(--transition-fast);
}

.entw-card__cta:hover .entw-card__cta-arrow {
  transform: translateX(4px);
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet landscape (≤991px) */
@media (max-width: 991px) {
  .entw-heading {
    font-size: 42px;
  }

  .entw-card {
    padding: 28px 24px;
  }

  .entw-section::after {
    width: 260px;
    opacity: 0.08;
  }
}

/* Tablet portrait (≤768px) — single column */
@media (max-width: 768px) {
  .entw-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .entw-heading {
    font-size: 36px;
  }

  .entw-section {
    padding: var(--space-lg) 0;
  }

  .entw-section::after {
    display: none;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .entw-heading {
    font-size: 30px;
  }

  .entw-card {
    padding: 24px 20px;
  }

  .entw-card__title {
    font-size: 20px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */
/* =========================================================
   Workshop Hero
   Dark cinematic hero with REC badge, large heading, gold CTA
   ========================================================= */

.wshero {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Dark overlay for readability */
.wshero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(11, 37, 69, 0.85) 0%,
    rgba(11, 37, 69, 0.6) 60%,
    rgba(11, 37, 69, 0.2) 100%
  );
  z-index: 1;
}

/* Content container */
.wshero__inner {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 80px var(--space-md);
  width: 100%;
}

/* =========================================================
   REC Badge
   Red pulsing dot + "REC" text + label
   ========================================================= */

.wshero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

/* Red pulsing dot */
.wshero__badge-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e63946; /* kein CI-Token; funktionale "REC"-Statusfarbe */
  flex-shrink: 0;
  animation: wshero-pulse 1.8s ease-in-out infinite;
}

@keyframes wshero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

/* "REC" text */
.wshero__badge-text {
  font-family: var(--font-ui); /* Inter */
  font-size: 13px;
  font-weight: 500;
  color: #e63946;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Separator pipe + label */
.wshero__badge-label {
  font-family: var(--font-ui); /* Inter */
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* =========================================================
   Heading
   ========================================================= */

.wshero__title {
  font-family: var(--font-heading); /* Jost */
  font-size: 60px;
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin: 0 0 28px;
  max-width: 640px;
}

/* =========================================================
   Description
   ========================================================= */

.wshero__desc {
  font-family: var(--font-body); /* Inter */
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 0 40px;
}

/* =========================================================
   CTA Button
   Gold border, uppercase text — hover: gold bg, white text
   ========================================================= */

.wshero__cta {
  display: inline-block;
  font-family: var(--font-body); /* Inter */
  font-size: 13px;
  font-weight: 500;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 0 36px;
  line-height: 54px;
  border: 2px solid var(--color-gold);
  background-color: transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.wshero__cta:hover {
  background-color: var(--color-gold);
  color: var(--color-white);
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet landscape (≤991px) */
@media (max-width: 991px) {
  .wshero {
    min-height: 480px;
  }

  .wshero__title {
    font-size: 46px;
  }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .wshero {
    min-height: 400px;
    background-position: center center;
  }

  .wshero__overlay {
    background: rgba(11, 37, 69, 0.75);
  }

  .wshero__title {
    font-size: 36px;
  }

  .wshero__inner {
    padding: 60px var(--space-sm);
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .wshero__title {
    font-size: 28px;
  }

  .wshero__desc {
    font-size: 15px;
  }

  .wshero__cta {
    font-size: 12px;
    padding: 0 24px;
    line-height: 48px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */
/* =========================================================
   Prose — Blog Post Body Typography
   Wrapper class .prose styles all child typography elements
   for article/blog content pages.

   Body: Inter 16px / 26px line-height / var(--color-text)
   Headings: Jost, navy, Gewicht 300 (Variante D Regel 3)
   ========================================================= */

.prose {
  font-family: var(--font-body); /* Inter */
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text); /* #2A3744 */
  line-height: 26px;
  max-width: 760px;
}

/* =========================================================
   Paragraphs
   ========================================================= */

.prose p {
  margin: 0 0 1.5em;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 26px;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   Headings
   ========================================================= */

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-heading); /* Jost */
  color: var(--color-navy);
  font-weight: 300;
  line-height: 1.2;
  margin: 1.8em 0 0.6em;
}

.prose h1:first-child,
.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose h1 { font-size: 48px; }
.prose h2 { font-size: 45px; }
.prose h3 { font-size: 28px; }
.prose h4 { font-size: 22px; }
.prose h5 { font-size: 18px; }
.prose h6 { font-size: 16px; }

/* =========================================================
   Links
   ========================================================= */

/* Fliesstext-Links in Gold — aber NICHT Buttons. `.prose a` hat Spezifitaet
   (0,1,1) und schlug sonst die `.btn`-Regel (0,1,0): Goldtext auf Goldflaeche,
   also unlesbar. Betraf 26 Buttons auf /wissensbereich/ und /foerderung/,
   gefunden 2026-07-29. */
.prose a:not(.btn) {
  color: var(--color-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.prose a:not(.btn):hover {
  opacity: 0.75;
}

/* =========================================================
   Lists
   ========================================================= */

.prose ul,
.prose ol {
  margin: 0 0 1.5em;
  padding-left: 1.6em;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 26px;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
.prose ul ul,
.prose ol ul,
.prose ul ol,
.prose ol ol {
  margin-top: 0.5em;
  margin-bottom: 0;
}

/* =========================================================
   Blockquote
   Gold left border, italic, slightly muted
   ========================================================= */

.prose blockquote {
  margin: 2em 0;
  padding: 20px 28px;
  border-left: 4px solid var(--color-gold);
  background-color: var(--color-faint); /* #EDEFF2 */
  font-style: italic;
  font-size: 17px;
  color: var(--color-text-dark);
  line-height: 1.65;
}

.prose blockquote p {
  margin: 0;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  font-style: inherit;
}

/* =========================================================
   Horizontal Rule
   ========================================================= */

.prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.5em 0;
}

/* =========================================================
   Code (inline + block)
   ========================================================= */

.prose code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  background-color: var(--color-faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--color-text-dark);
}

.prose pre {
  background-color: var(--color-navy);
  border-radius: 4px;
  padding: 24px 28px;
  overflow-x: auto;
  margin: 0 0 1.5em;
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9em;
  line-height: 1.7;
}

/* =========================================================
   Images
   ========================================================= */

.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  /* F-Formatierungsaudit (2026-07-29): border-radius entfernt (war 2px) —
     brand.md §12 "No border-radius on cards, buttons, or sections (round
     only icon buttons & avatars)". Betraf u. a. die Bilder auf /foerderung/
     und /wissensbereich/. */
  border-radius: 0;
  margin: 2em 0;
}

/* =========================================================
   Figure + Figcaption
   ========================================================= */

.prose figure {
  margin: 2em 0;
}

.prose figcaption {
  font-family: var(--font-body);
  font-size: 13px;
  color: #aaa; /* kein CI-Token; neutrale Bildunterschrift-Farbe */
  text-align: center;
  margin-top: 8px;
  line-height: 1.5;
}

/* =========================================================
   Strong + Em
   ========================================================= */

.prose strong {
  font-weight: 500;
  color: var(--color-text-dark);
}

.prose em {
  font-style: italic;
}

/* =========================================================
   Tables
   ========================================================= */

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: 15px;
}

.prose th {
  font-family: var(--font-subheading); /* Jost */
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--color-gold);
  background-color: var(--color-faint);
}

.prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--color-text);
  line-height: 1.5;
}

.prose tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 768px) {
  .prose h1 { font-size: 36px; }
  .prose h2 { font-size: 28px; }
  .prose h3 { font-size: 22px; }

  .prose blockquote {
    padding: 16px 20px;
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .prose h1 { font-size: 28px; }
  .prose h2 { font-size: 24px; }
  .prose h3 { font-size: 20px; }

  .prose {
    font-size: 15px;
    line-height: 24px;
  }

  .prose p {
    font-size: 15px;
    line-height: 24px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */
/* =========================================================
   Case Study Header
   White background, centered large title (Jost, Gewicht 300),
   small uppercase category tag below the title.
   ========================================================= */

.cs-header {
  background-color: var(--color-white);
  padding: 80px var(--space-md) 60px;
  text-align: center;
}

.cs-header__inner {
  max-width: 860px;
  margin: 0 auto;
}

/* =========================================================
   Title — large Cormorant Infant, navy
   ========================================================= */

.cs-header__title {
  font-family: var(--font-heading); /* Jost */
  font-size: 56px;
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: 0.3px;
  margin: 0 0 24px;
}

/* =========================================================
   Category Tag — small uppercase label, muted text
   ========================================================= */

.cs-header__category {
  display: inline-block;
  font-family: var(--font-body); /* Inter */
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text); /* #2A3744 */
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet landscape (≤991px) */
@media (max-width: 991px) {
  .cs-header__title {
    font-size: 44px;
  }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .cs-header {
    padding: 60px var(--space-sm) 48px;
  }

  .cs-header__title {
    font-size: 36px;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .cs-header__title {
    font-size: 28px;
  }

  .cs-header {
    padding: 48px var(--space-sm) 36px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */
/* ============================================================
   Seminar Page Layout
   ============================================================ */

.seminar-page {
  background: var(--color-offwhite);
  padding-top: var(--space-md);
  padding-bottom: 0;
}

/* Wide container override for seminar page */
.seminar-page .container {
  max-width: 1400px;
}

/* 2-column grid: fixed sidebar (~380px) + main (fills rest) */
.seminar-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: var(--space-md);
  align-items: start;
}

/* ── Main Content ──────────────────────────────────── */

.seminar-main {
  min-width: 0; /* prevent overflow in grid */
}

.seminar-main__carousel {
  margin-bottom: var(--space-md);
  border-radius: 4px;
  overflow: hidden;
}

.seminar-main__header {
  margin-bottom: var(--space-md);
}

.seminar-main__subtitle {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 var(--space-xs) 0;
}

.seminar-main__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 var(--space-sm) 0;
}

.seminar-main__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
  max-width: 72ch;
}

/* ── Anchor Navigation ─────────────────────────────── */

.seminar-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid rgba(11, 37, 69, 0.1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-md);
}

.seminar-anchor-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.75rem 1.1rem;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-dark);
  text-decoration: none;
  border-right: 1px solid rgba(11, 37, 69, 0.1);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.seminar-anchor-nav__link:last-child {
  border-right: none;
}

.seminar-anchor-nav__link:hover {
  color: var(--color-gold);
  background: rgba(184, 154, 78, 0.05);
}

.seminar-anchor-nav__arrow {
  color: var(--color-gold);
  font-size: 1rem;
  line-height: 1;
}

/* ── Main Content Body (prose) ─────────────────────── */

.seminar-main__content {
  margin-bottom: var(--space-lg);
}

/* ── Process Steps Section ─────────────────────────── */

.seminar-process {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: var(--shadow-subtle);
}

.seminar-process__title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 var(--space-md) 0;
}

.seminar-process__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
}

.seminar-process__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.seminar-process__image-wrap {
  border-radius: 4px;
  overflow: hidden;
}

.seminar-process__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* ── FAQ Section ───────────────────────────────────── */

.seminar-faq {
  margin-bottom: var(--space-lg);
}

.seminar-faq__title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 var(--space-md) 0;
}

/* ── Testimonials Section ──────────────────────────── */

.seminar-testimonials {
  margin-bottom: var(--space-lg);
}

.seminar-testimonials__title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 var(--space-md) 0;
}

/* ── Sidebar ───────────────────────────────────────── */

.seminar-sidebar {
  position: sticky;
  top: 90px; /* clear sticky header */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  /* On desktop: sidebar is second in DOM but first column visually */
  order: -1;
}

/* ── Responsive ────────────────────────────────────── */

/* Laptop */
@media (max-width: 1199px) {
  .seminar-layout {
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: var(--space-sm);
  }
}

/* Tablet landscape */
@media (max-width: 991px) {
  .seminar-layout {
    grid-template-columns: 1fr;
  }

  /* Main content stays on top, sidebar goes below */
  .seminar-main {
    order: 1;
  }

  .seminar-sidebar {
    order: 2;
    position: static; /* no sticky on narrow screens */
  }

  .seminar-process__grid {
    grid-template-columns: 1fr;
  }

  .seminar-process__image-wrap {
    max-height: 300px;
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .seminar-anchor-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .seminar-anchor-nav::-webkit-scrollbar {
    display: none;
  }

  .seminar-anchor-nav__link {
    white-space: nowrap;
    padding: 0.6rem 0.8rem;
    font-size: 14px;
  }

  .seminar-main__title {
    font-size: 1.8rem;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .seminar-page {
    padding-top: var(--space-sm);
  }

  .seminar-layout {
    gap: var(--space-sm);
  }

  .seminar-process {
    padding: var(--space-sm);
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */
/* =========================================================
   Seminar Page v2 — original scaffolded layout
   NOTE: This is a baseline reconstruction. The original CSS
   was overwritten; this version restores structure (2-column
   grids, hero, sidebar) so the v2 reference page renders
   coherently. Visual polish is intentionally minimal — v2
   was always the structural sketch, v3 is the design pass.
   ========================================================= */

.seminar-v2 {
  background: var(--color-white);
  color: var(--color-text-dark);
}

/* ---------------------------------------------------------
   1. HERO — full-width image with floating content card
   --------------------------------------------------------- */
.seminar-v2-hero {
  position: relative;
  padding: 0 0 var(--space-lg) 0;
}

.seminar-v2-hero__bg {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: var(--color-navy);
}

.seminar-v2-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}

.seminar-v2-hero__card {
  background: var(--color-white);
  margin-top: -120px;
  padding: var(--space-md);
  border-radius: 4px;
  box-shadow: var(--shadow-subtle);
  position: relative;
  z-index: 2;
}

.seminar-v2-hero__card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: center;
}

.seminar-v2-hero__video {
  aspect-ratio: 16 / 9;
  background: var(--color-navy);
  border-radius: 4px;
  overflow: hidden;
}

.seminar-v2-hero__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.seminar-v2-hero__badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.seminar-v2-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  color: var(--color-navy);
  margin: 0 0 16px 0;
}

.seminar-v2-hero__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 16px 0;
}

.seminar-v2-hero__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.seminar-v2-hero__rating-stars {
  display: inline-flex;
  color: var(--color-gold);
}

.seminar-v2-hero__rating-text {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-text);
}

.seminar-v2-hero__cta-btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 2px;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.seminar-v2-hero__cta-btn:hover {
  background: var(--color-gold);
  opacity: 0.85;
}

/* ---------------------------------------------------------
   2. SOCIAL PROOF — 2-column testimonials + pricing
   --------------------------------------------------------- */
.seminar-v2-social-proof {
  padding: var(--space-lg) 0;
  background: var(--color-faint);
}

.seminar-v2-social-proof__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.seminar-v2-social-proof__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  color: var(--color-navy);
  margin: 0 0 var(--space-md) 0;
}

/* ---------------------------------------------------------
   3. FÖRDERUNG TEASER
   --------------------------------------------------------- */
.seminar-v2-foerderung {
  padding: var(--space-lg) 0;
}

.seminar-v2-foerderung__card {
  background: rgba(184, 154, 78, 0.06);
  border-left: 4px solid var(--color-gold);
  padding: var(--space-md);
  border-radius: 0 4px 4px 0;
}

.seminar-v2-foerderung__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  color: var(--color-navy);
  margin: 0 0 12px 0;
}

.seminar-v2-foerderung__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin: 0 0 16px 0;
}

.seminar-v2-foerderung__programs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.seminar-v2-foerderung__program {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  background: var(--color-white);
  border: 1px solid rgba(184, 154, 78, 0.3);
  border-radius: 999px;
  color: var(--color-navy);
}

.seminar-v2-foerderung__cta {
  margin-top: 8px;
}

/* ---------------------------------------------------------
   4. MAIN CONTENT — 2-column main + sidebar
   --------------------------------------------------------- */
.seminar-v2-content {
  padding: var(--space-lg) 0;
}

.seminar-v2-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-lg);
  align-items: start;
}

.seminar-v2-main {
  min-width: 0;
}

.seminar-v2-main__body h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  color: var(--color-navy);
  margin: 32px 0 12px 0;
}

.seminar-v2-main__body h3 {
  font-family: var(--font-subheading);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-navy);
  margin: 24px 0 10px 0;
}

.seminar-v2-main__body p,
.seminar-v2-main__body li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-dark);
}

.seminar-v2-main__body ul {
  padding-left: 22px;
  margin-bottom: 18px;
}

.seminar-v2-main__body li {
  margin-bottom: 8px;
}

/* Process */
.seminar-v2-process {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.seminar-v2-process__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  color: var(--color-navy);
  margin: 0 0 var(--space-md) 0;
}

.seminar-v2-process__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* FAQ */
.seminar-v2-faq {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.seminar-v2-faq__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  color: var(--color-navy);
  margin: 0 0 var(--space-md) 0;
}

/* Sidebar */
.seminar-v2-sidebar {
  position: sticky;
  top: 130px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.seminar-v2-sidebar__cta {
  text-align: center;
}

/* ---------------------------------------------------------
   5. RELATED
   --------------------------------------------------------- */
.seminar-v2-related {
  padding: var(--space-lg) 0;
  background: var(--color-faint);
}

.seminar-v2-related__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  color: var(--color-navy);
  margin: 0 0 var(--space-md) 0;
}

.seminar-v2-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.seminar-v2-related__card {
  display: block;
  background: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.08);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.seminar-v2-related__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.seminar-v2-related__card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.seminar-v2-related__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.seminar-v2-related__card-body {
  padding: var(--space-sm);
}

.seminar-v2-related__card-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  color: var(--color-navy);
  margin: 0 0 8px 0;
}

.seminar-v2-related__card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 991px) {
  .seminar-v2-hero__card-grid,
  .seminar-v2-social-proof__grid,
  .seminar-v2-layout,
  .seminar-v2-related__grid {
    grid-template-columns: 1fr;
  }

  .seminar-v2-sidebar {
    position: static;
  }
}

@media (max-width: 575px) {
  .seminar-v2-hero__bg { height: 320px; }
  .seminar-v2-hero__card { margin-top: -80px; }
  .seminar-v2-hero__title { font-size: 28px; }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */
/* =========================================================
   Seminar v2 — IHK-inspired layout
   Single content column + sticky left section nav.
   Calm, scan-friendly, premium.
   ========================================================= */

.sv3 {
  background: var(--color-white);
  color: var(--color-text-dark);
}

/* ---------------------------------------------------------
   1. HERO
   --------------------------------------------------------- */
.sv3-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-navy);
}

.sv3-hero__bg {
  position: absolute;
  inset: 0;
}

.sv3-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sv3-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 37, 69, 0.35) 0%,
    rgba(11, 37, 69, 0.65) 60%,
    rgba(11, 37, 69, 0.92) 100%
  );
}

.sv3-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px var(--space-md) 56px var(--space-md);
  color: var(--color-white);
}

.sv3-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 28px 0;
}

.sv3-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sv3-breadcrumb a:hover {
  color: var(--color-gold);
}

.sv3-breadcrumb [aria-current] {
  color: var(--color-white);
}

.sv3-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 16px 0;
}

.sv3-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: 0.2px;
  color: var(--color-white);
  margin: 0 0 18px 0;
  max-width: 880px;
}

.sv3-hero__intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px 0;
  max-width: 720px;
}

.sv3-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 32px 0;
}

.sv3-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sv3-hero__stars {
  color: var(--color-gold);
  letter-spacing: 2px;
  font-size: 14px;
}

.sv3-hero__sep {
  opacity: 0.5;
}

.sv3-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------
   2. BUTTONS (scoped to v2)
   --------------------------------------------------------- */
.sv3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.sv3-btn--primary {
  background: var(--color-gold);
  color: var(--color-white);
  border-color: var(--color-gold);
}

.sv3-btn--primary:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  opacity: 0.85;
}

.sv3-btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}

.sv3-btn--ghost:hover {
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
}

.sv3-btn--ghost-dark {
  background: transparent;
  color: var(--color-navy);
  border-color: rgba(11, 37, 69, 0.3);
}

.sv3-btn--ghost-dark:hover {
  border-color: var(--color-navy);
  background: rgba(11, 37, 69, 0.04);
}

.sv3-btn--full {
  width: 100%;
}

.sv3-btn--book {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
  padding: 10px 20px;
  font-size: 12px;
}

.sv3-btn--book:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.sv3-btn--waitlist {
  background: transparent;
  color: var(--color-text);
  border-color: rgba(11, 37, 69, 0.18);
  padding: 10px 20px;
  font-size: 12px;
}

.sv3-btn--waitlist:hover {
  border-color: var(--color-text-dark);
  color: var(--color-text-dark);
}

/* ---------------------------------------------------------
   3. BODY: sticky nav + main content
   --------------------------------------------------------- */
.sv3-body {
  background: var(--color-white);
  padding: 80px 0 100px 0;
}

.sv3-body__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
}

/* ── Sticky section nav ── */
.sv3-nav {
  position: sticky;
  top: 140px;
  align-self: start;
  border-left: 1px solid rgba(11, 37, 69, 0.08);
  padding-left: 24px;
}

.sv3-nav__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 18px 0;
}

.sv3-nav__list {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sv3-nav__list li {
  position: relative;
}

.sv3-nav__link {
  display: block;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 0 8px 26px;
  margin-left: -26px;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              font-weight var(--transition-fast);
}

.sv3-nav__link:hover {
  color: var(--color-navy);
  border-left-color: rgba(184, 154, 78, 0.4);
}

.sv3-nav__link.is-active {
  color: var(--color-navy);
  font-weight: 500;
  border-left-color: var(--color-gold);
}

.sv3-nav__cta {
  margin-top: 20px;
}

/* ── Main content (single column) ── */
.sv3-main {
  max-width: 760px;
}

.sv3-section {
  padding: 56px 0;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
  scroll-margin-top: 130px;
}

.sv3-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.sv3-section__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  color: var(--color-navy);
  margin: 0 0 18px 0;
  letter-spacing: 0.2px;
}

.sv3-section__intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 32px 0;
  max-width: 640px;
}

/* ---------------------------------------------------------
   4. TERMINE TABLE
   --------------------------------------------------------- */
.sv3-termine {
  border-top: 1px solid rgba(11, 37, 69, 0.1);
  margin-bottom: 18px;
}

.sv3-termine__row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1.1fr 0.9fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
  font-family: var(--font-ui);
  font-size: 14px;
}

.sv3-termine__row--head {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 14px 0;
}

.sv3-termine__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sv3-termine__day {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-navy);
  letter-spacing: 0.3px;
}

.sv3-termine__weekday {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}

.sv3-termine__loc {
  color: var(--color-text-dark);
}

.sv3-termine__seats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.sv3-termine__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sv3-termine__seats--ok { color: var(--color-gold); }
.sv3-termine__seats--ok .sv3-termine__dot {
  background: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(184, 154, 78, 0.18);
}
.sv3-termine__seats--low { color: #c9532c; } /* kein CI-Token; funktionale Warnfarbe "wenige Plaetze", konsistent mit next-dates.css */
.sv3-termine__seats--low .sv3-termine__dot {
  background: #c9532c;
  box-shadow: 0 0 0 3px rgba(201, 83, 44, 0.2);
}
.sv3-termine__seats--out {
  color: var(--color-text);
  text-decoration: line-through;
  text-decoration-color: rgba(42, 55, 68, 0.4);
}
.sv3-termine__seats--out .sv3-termine__dot {
  background: var(--color-text);
  opacity: 0.4;
}

.sv3-termine__price {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-navy);
}

.sv3-termine__note {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  margin: 0;
}

.sv3-termine__note a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: rgba(11, 37, 69, 0.25);
}

.sv3-termine__note a:hover {
  color: var(--color-gold);
  text-decoration-color: var(--color-gold);
}

/* ---------------------------------------------------------
   5. PROSE (markdown body)
   --------------------------------------------------------- */
.sv3-prose {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-dark);
}

.sv3-prose h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 56px 0 16px 0;
  letter-spacing: 0.2px;
}

.sv3-prose h2:first-child {
  margin-top: 0;
}

.sv3-prose h3 {
  font-family: var(--font-subheading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-navy);
  margin: 36px 0 12px 0;
  letter-spacing: 0.1px;
}

.sv3-prose p {
  margin: 0 0 18px 0;
}

.sv3-prose ul,
.sv3-prose ol {
  padding-left: 0;
  margin: 0 0 24px 0;
  list-style: none;
}

.sv3-prose ul li,
.sv3-prose ol li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  line-height: 1.65;
}

.sv3-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 1px;
  background: var(--color-gold);
}

.sv3-prose ol {
  counter-reset: prose-counter;
}

.sv3-prose ol li {
  counter-increment: prose-counter;
}

.sv3-prose ol li::before {
  content: counter(prose-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 14px;
  color: var(--color-gold);
}

.sv3-prose strong {
  font-weight: 500;
  color: var(--color-navy);
}

.sv3-prose .seminar-section + .seminar-section {
  margin-top: 24px;
}

/* ---------------------------------------------------------
   6. SIMPLE LISTS
   --------------------------------------------------------- */
.sv3-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-dark);
}

.sv3-list--check li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}

.sv3-list--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 10px;
  border-left: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* ---------------------------------------------------------
   7. TRAINER CARD (inline)
   --------------------------------------------------------- */
.sv3-trainer {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px;
  background: var(--color-faint);
  border-radius: 4px;
}

.sv3-trainer__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
}

.sv3-trainer__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(20%);
}

.sv3-trainer__role {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 8px 0;
}

.sv3-trainer__name {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 24px;
  color: var(--color-navy);
  margin: 0 0 14px 0;
}

.sv3-trainer__bio {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-dark);
  margin: 0 0 16px 0;
}

.sv3-trainer__link {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.25);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sv3-trainer__link:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* ---------------------------------------------------------
   8. KONDITIONEN
   --------------------------------------------------------- */
.sv3-konditionen {
  margin-bottom: 40px;
}

.sv3-konditionen__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  margin: 0;
}

.sv3-konditionen__grid > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.sv3-konditionen__grid dt {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}

.sv3-konditionen__grid dd {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-dark);
  margin: 0;
}

.sv3-foerderung {
  padding: 28px 32px;
  background: rgba(184, 154, 78, 0.06);
  border-left: 2px solid var(--color-gold);
  border-radius: 0 4px 4px 0;
}

.sv3-foerderung__lead {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin: 0 0 16px 0;
}

.sv3-foerderung__programs {
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sv3-foerderung__programs li {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  background: var(--color-white);
  border: 1px solid rgba(184, 154, 78, 0.3);
  border-radius: 999px;
  color: var(--color-navy);
}

.sv3-foerderung__link {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.25);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sv3-foerderung__link:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* ---------------------------------------------------------
   9. STIMMEN
   --------------------------------------------------------- */
.sv3-stimmen {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sv3-stimme {
  margin: 0;
  padding: 28px 32px;
  background: var(--color-faint);
  border-radius: 4px;
  border-left: 2px solid var(--color-gold);
}

.sv3-stimme__stars {
  color: var(--color-gold);
  letter-spacing: 4px;
  font-size: 14px;
  margin-bottom: 14px;
  line-height: 1;
}

.sv3-stimme__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--color-navy);
  margin: 0 0 18px 0;
  letter-spacing: 0.1px;
}

.sv3-stimme__attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sv3-stimme__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-navy);
}

.sv3-stimme__role {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ---------------------------------------------------------
   10. FINAL CTA
   --------------------------------------------------------- */
.sv3-final {
  border-top: 0;
  padding: 64px 0 24px 0;
}

.sv3-final__inner {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 56px 48px;
  border-radius: 4px;
  text-align: left;
}

.sv3-final__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--color-white);
  margin: 0 0 14px 0;
  max-width: 480px;
}

.sv3-final__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 28px 0;
  max-width: 480px;
}

.sv3-final__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sv3-final .sv3-btn--ghost-dark {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.25);
}

.sv3-final .sv3-btn--ghost-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

/* ---------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 1199px) {
  .sv3-hero__title { font-size: 48px; }
  .sv3-body__inner {
    grid-template-columns: 200px 1fr;
    gap: 60px;
  }
}

@media (max-width: 991px) {
  .sv3-body__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sv3-nav {
    position: static;
    border-left: 0;
    border-bottom: 1px solid rgba(11, 37, 69, 0.08);
    padding: 0 0 20px 0;
    margin-bottom: 32px;
  }

  .sv3-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .sv3-nav__link {
    margin-left: 0;
    padding: 6px 12px;
    border-left: 0;
    border-radius: 999px;
    background: var(--color-faint);
  }

  .sv3-nav__link:hover {
    background: rgba(184, 154, 78, 0.1);
    border-left-color: transparent;
  }

  .sv3-nav__link.is-active {
    background: var(--color-navy);
    color: var(--color-white);
    border-left-color: transparent;
  }

  .sv3-nav__cta {
    margin-top: 16px;
  }

  .sv3-termine__row {
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
  }
  .sv3-termine__row--head { display: none; }

  .sv3-trainer {
    grid-template-columns: 140px 1fr;
    gap: 20px;
    padding: 24px;
  }

  .sv3-konditionen__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .sv3-hero__title { font-size: 36px; }
  .sv3-section__title { font-size: 28px; }
  .sv3-prose h2 { font-size: 24px; }
  .sv3-section { padding: 40px 0; }

  .sv3-termine__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sv3-trainer {
    grid-template-columns: 1fr;
  }

  .sv3-trainer__photo {
    max-width: 200px;
  }

  .sv3-final__inner {
    padding: 40px 28px;
  }
}

/* =========================================================
   Attribute Pills — USP, Förderung, format scaffolding.
   data-filter attributes ready for future filter UI.
   ========================================================= */

.sv3-pills {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sv3-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}

.sv3-pill__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
}

.sv3-pill--usp {
  background: rgba(184, 154, 78, 0.15);
  border-color: rgba(184, 154, 78, 0.5);
  color: var(--color-gold);
}

.sv3-pill--foerderung {
  background: rgba(184, 154, 78, 0.10);
  border-color: rgba(184, 154, 78, 0.35);
  color: var(--color-gold);
}

/* =========================================================
   Hero — advanced variant with video on the right
   ========================================================= */

.sv3-hero--with-video {
  min-height: 600px;
  align-items: stretch;
  padding: 0;
  background: #0d0d0d;
}

/* Video variant: scenic bg image stays, but the overlay is neutral black
   (not the navy gradient used elsewhere). Gives photographic depth without
   the blue tint that previously washed the video area. */
.sv3-hero__overlay--solid {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.78) 50%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.sv3-hero__split {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px var(--space-md);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.sv3-hero--with-video .sv3-hero__content {
  padding: 0;
  max-width: none;
  color: var(--color-white);
}

.sv3-hero__video {
  position: relative;
}

.sv3-hero__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sv3-hero__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.sv3-hero__video-caption {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 14px 0 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sv3-hero__video-caption::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--color-gold);
}

@media (max-width: 991px) {
  .sv3-hero__split {
    grid-template-columns: 1fr;
    padding: 56px var(--space-md);
  }

  .sv3-hero__video {
    order: -1;
  }
}

/* =========================================================
   Infoabend Section — dedicated section listing free preview
   events. Sits between Termine and Inhalte. Frontmatter:
   `infoabend.events[]` (date, time, format, url) or single
   `infoabend` object for backwards compat.
   ========================================================= */

.sv3-infoabend-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 16px 0;
}

.sv3-infoabend-eyebrow__icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

.sv3-infoabend-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.sv3-infoabend-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  background: rgba(184, 154, 78, 0.05);
  border: 1px solid rgba(184, 154, 78, 0.20);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  font-family: var(--font-ui);
  color: var(--color-text-dark);
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}

.sv3-infoabend-row:hover {
  background: rgba(184, 154, 78, 0.10);
  border-color: rgba(184, 154, 78, 0.4);
  transform: translateX(2px);
}

.sv3-infoabend-row__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sv3-infoabend-row__day {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-navy);
  letter-spacing: 0.3px;
}

.sv3-infoabend-row__time {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.sv3-infoabend-row__format {
  font-size: 14px;
  color: var(--color-text-dark);
}

.sv3-infoabend-row__cta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  white-space: nowrap;
}

.sv3-infoabend-row:hover .sv3-infoabend-row__cta {
  color: var(--color-gold);
}

@media (max-width: 575px) {
  .sv3-infoabend-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================================================
   v3.1 — slim hero variant
   Strips eyebrow / intro / pills / meta / secondary CTA from
   the hero. Surfaces them in a "facts strip" below the hero.
   Hero shows: breadcrumb → title → 1-line subtitle → 1 CTA.
   ========================================================= */

.sv31-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-navy);
}

.sv31-hero__bg {
  position: absolute;
  inset: 0;
}

.sv31-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sv31-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.78) 50%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.sv31-hero__split {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.sv31-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--color-white);
}

.sv31-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.sv31-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sv31-breadcrumb a:hover {
  color: var(--color-gold);
}

.sv31-breadcrumb [aria-current] {
  color: var(--color-white);
}

.sv31-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--color-white);
  margin: 0;
}

.sv31-hero__subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 520px;
}

.sv31-hero__cta {
  margin-top: 8px;
}

.sv31-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  height: 48px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background var(--transition-fast),
              transform var(--transition-fast);
}

.sv31-btn--primary {
  background: var(--color-gold);
  color: var(--color-white);
}

.sv31-btn--primary:hover {
  background: var(--color-gold);
  opacity: 0.85;
  transform: translateX(2px);
}

.sv31-btn__arrow {
  font-size: 16px;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.sv31-btn--primary:hover .sv31-btn__arrow {
  transform: translateX(2px);
}

.sv31-hero__video {
  position: relative;
}

.sv31-hero__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sv31-hero__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Facts strip ── */

.sv31-facts {
  background: var(--color-white);
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.sv31-facts__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-text);
}

.sv31-facts__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-dark);
}

.sv31-facts__rating strong {
  font-weight: 500;
  color: var(--color-navy);
}

.sv31-facts__stars {
  color: var(--color-gold);
  letter-spacing: 2px;
  font-size: 13px;
}

.sv31-facts__sep {
  width: 1px;
  height: 18px;
  background: rgba(11, 37, 69, 0.12);
  flex-shrink: 0;
}

.sv31-facts__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sv31-facts__pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: rgba(11, 37, 69, 0.04);
  color: var(--color-text-dark);
  border: 1px solid rgba(11, 37, 69, 0.08);
}

.sv31-facts__pill--usp,
.sv31-facts__pill--foerderung {
  background: rgba(184, 154, 78, 0.08);
  color: var(--color-gold);
  border-color: rgba(184, 154, 78, 0.3);
  font-weight: 500;
}

.sv31-facts__location {
  color: var(--color-text-dark);
}

@media (max-width: 991px) {
  .sv31-hero__split {
    grid-template-columns: 1fr;
    padding: 56px var(--space-md);
  }

  .sv31-hero__video {
    order: -1;
  }

  .sv31-facts__sep {
    display: none;
  }
}

@media (max-width: 575px) {
  .sv31-hero {
    min-height: 0;
  }
}

/* =========================================================
   Trainer profile — v3-inspired layout.
   2-col hero (text + portrait), sticky-nav body identical
   to v3, plus an "expertise" card list section.
   ========================================================= */

.svtr-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-navy);
}

.svtr-hero__bg {
  position: absolute;
  inset: 0;
}

.svtr-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* When the same image is used for bg AND portrait, the bg is heavily darkened
     and softened so it reads as atmosphere, not a duplicate of the portrait. */
  filter: blur(2px) saturate(0.7);
  transform: scale(1.05);
}

.svtr-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.svtr-hero__split {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px var(--space-md);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.svtr-hero__content {
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.svtr-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 8px 0;
}

.svtr-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.svtr-breadcrumb a:hover {
  color: var(--color-gold);
}

.svtr-breadcrumb [aria-current] {
  color: var(--color-white);
}

.svtr-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
}

.svtr-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--color-white);
  margin: 0;
}

.svtr-hero__subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 540px;
  margin: 0;
}

.svtr-hero__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.svtr-hero__pill {
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.svtr-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.svtr-hero__portrait {
  position: relative;
}

.svtr-hero__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Bias toward the upper third where portrait faces typically sit so we
     never crop a face out. Falls back gracefully on landscape sources. */
  object-position: center 25%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  filter: grayscale(15%);
}

/* ── Expertise list (Schwerpunkte & Methoden) ── */

.svtr-expertise {
  list-style: none;
  margin: 32px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.svtr-expertise__item {
  padding: 24px 28px;
  background: var(--color-faint);
  border-left: 2px solid var(--color-gold);
  border-radius: 0 4px 4px 0;
}

.svtr-expertise__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 8px 0;
  letter-spacing: 0.1px;
}

.svtr-expertise__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-dark);
  margin: 0;
}

/* ── Responsive ── */

@media (max-width: 991px) {
  .svtr-hero__split {
    grid-template-columns: 1fr;
    padding: 56px var(--space-md);
  }

  .svtr-hero__portrait {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* =========================================================
   Case Study — same v3 chrome as trainer pages.
   Adds a horizontal "facts strip" for retreat metadata
   (duration, location, trainer, etc.) below the hero.
   ========================================================= */

.svcs-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-navy);
}

.svcs-hero__bg {
  position: absolute;
  inset: 0;
}

.svcs-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(2px) saturate(0.7);
  transform: scale(1.05);
}

.svcs-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.svcs-hero__split {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px var(--space-md);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.svcs-hero__content {
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.svcs-hero__photo {
  position: relative;
}

.svcs-hero__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  filter: grayscale(15%);
}

/* ── Facts strip ── */

.svcs-facts {
  background: var(--color-white);
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.svcs-facts__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  font-family: var(--font-ui);
}

.svcs-facts__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.svcs-facts__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
}

.svcs-facts__value {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: var(--color-navy);
}

.svcs-facts__value a {
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.25);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.svcs-facts__value a:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* ── Lead summary paragraph ── */

.svcs-lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-navy);
  margin: 0 0 48px 0;
  letter-spacing: 0.1px;
  padding-left: 24px;
  border-left: 2px solid var(--color-gold);
}

@media (max-width: 991px) {
  .svcs-hero__split {
    grid-template-columns: 1fr;
    padding: 56px var(--space-md);
  }

  .svcs-hero__photo {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }

  .svcs-facts__inner {
    gap: 20px;
  }

  .svcs-lead {
    font-size: 18px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */
/* ============================================================
   Pricing Card
   ============================================================ */

.pricing-card {
  position: relative;
  background: var(--color-white);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

/* ── PREMIUM Badge — absolute positioned at top-right corner ── */

.pricing-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #D64545; /* kein CI-Token; funktionale "Premium"-Badgefarbe */
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 0 0 0 4px;
  z-index: 2;
  line-height: 1;
}

/* ── Small "ANGEBOT" label above heading ── */

.pricing-card__angebot-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 0.4rem 0;
  line-height: 1;
}

/* ── Header ────────────────────────────────────────── */

.pricing-card__header {
  position: relative;
  background: var(--color-navy-alt);
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}

.pricing-card__header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/seminars/pricing_overlay_light.png');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
}

.pricing-card__header-inner {
  position: relative;
  z-index: 1;
}

.pricing-card__subtitle {
  display: block;
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-gold);
  margin: 0.25rem 0 0 0;
  line-height: 1.1;
}

.pricing-card__name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  line-height: 1.3;
}

/* "PRO GRUPPE" label below price */
.pricing-card__price-group {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: var(--color-white);
  margin-top: 0.4rem;
}

/* Duration/MwSt text below price group */
.pricing-card__price-duration {
  display: block;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-white);
  margin-top: 0.2rem;
}

/* ── Body ──────────────────────────────────────────── */

.pricing-card__body {
  padding: 1.25rem 1.5rem;
}

/* ── Price ─────────────────────────────────────────── */

.pricing-card__price {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.pricing-card__price-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1;
}

.pricing-card__price-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text);
  margin-top: 0.25rem;
}

/* ── Features List ─────────────────────────────────── */

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-text-dark);
}

.pricing-card__feature-icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--color-gold);
  line-height: 0;
}

.pricing-card__feature--excluded {
  color: var(--color-text);
  opacity: 0.55;
}

.pricing-card__feature--excluded .pricing-card__feature-icon {
  color: var(--color-text);
}

.pricing-card__feature--excluded .pricing-card__feature-text {
  text-decoration: line-through;
}

/* ── CTA Button ────────────────────────────────────── */

.pricing-card__cta {
  padding-top: 0.5rem;
}

/* Full-width button modifier */
.btn--full {
  display: block;
  width: 100%;
  text-align: center;
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */
/* ============================================================
   Trainer Card
   ============================================================ */

.trainer-card {
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

/* ── Header bar ────────────────────────────────────── */

.trainer-card__header {
  background: var(--color-navy-alt);
  padding: 0.9rem 1.5rem;
}

.trainer-card__header-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* ── Portrait image ────────────────────────────────── */

.trainer-card__image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.trainer-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--transition-smooth);
}

.trainer-card:hover .trainer-card__image {
  transform: scale(1.03);
}

/* ── Body ──────────────────────────────────────────── */

.trainer-card__body {
  padding: 1.25rem 1.5rem;
}

.trainer-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
}

.trainer-card__role {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 0.75rem 0;
}

.trainer-card__bio {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 1rem 0;
}

.trainer-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
  text-decoration: none;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.trainer-card__link:hover {
  color: var(--color-navy);
  gap: 0.55em;
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */
/* ============================================================
   Sidebar CTA Widget
   ============================================================ */

.sidebar-cta {
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(var(--color-navy) 0%, var(--color-navy-alt) 100%);
}

.sidebar-cta__inner {
  padding: 1.75rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.sidebar-cta__logo {
  margin-bottom: 0.25rem;
}

.sidebar-cta__logo-img {
  max-width: 160px;
  height: auto;
  display: block;
  /* Make white-background logo visible on dark bg */
  filter: brightness(0) invert(1);
}

.sidebar-cta__heading {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-white);
  margin: 0;
  line-height: 1.25;
}

.sidebar-cta__tagline {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
}

.sidebar-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.25rem;
}

.sidebar-cta__btn {
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */
/* ============================================================
   Related Seminars Widget
   ============================================================ */

.related-seminars {
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

/* ── Header bar ────────────────────────────────────── */

.related-seminars__header {
  background: var(--color-navy-alt);
  padding: 0.9rem 1.5rem;
}

.related-seminars__header-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* ── List ──────────────────────────────────────────── */

.related-seminars__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Card ──────────────────────────────────────────── */

.related-seminars__card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.06);
  transition: background var(--transition-fast);
}

.related-seminars__card:last-child {
  border-bottom: none;
}

.related-seminars__card:hover {
  background: var(--color-faint);
}

.related-seminars__thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 3px;
  overflow: hidden;
}

.related-seminars__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-smooth);
}

.related-seminars__card:hover .related-seminars__img {
  transform: scale(1.05);
}

.related-seminars__content {
  flex: 1;
  min-width: 0;
}

.related-seminars__title {
  font-family: var(--font-subheading);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.related-seminars__desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0 0 0.35rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-seminars__cta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  transition: color var(--transition-fast);
}

.related-seminars__card:hover .related-seminars__cta {
  color: var(--color-navy);
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */
/* ============================================================
   Sidebar Features — "Das spricht für uns"
   ============================================================ */

.sidebar-features {
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

/* ── Header bar ────────────────────────────────────── */

.sidebar-features__header {
  background: var(--color-navy-alt);
  padding: 0.9rem 1.5rem;
}

.sidebar-features__header-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* ── List ──────────────────────────────────────────── */

.sidebar-features__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Item ──────────────────────────────────────────── */

.sidebar-features__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid rgba(11, 37, 69, 0.06);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-dark);
}

.sidebar-features__item:last-child {
  border-bottom: none;
}

.sidebar-features__icon {
  flex-shrink: 0;
  color: var(--color-gold);
  line-height: 0;
}

.sidebar-features__text {
  line-height: 1.3;
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */
/* ============================================================
   Schwerpunkte Navigation
   ============================================================ */

.schwerpunkte-nav {
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

/* ── Header bar ────────────────────────────────────── */

.schwerpunkte-nav__header {
  background: var(--color-navy-alt);
  padding: 0.9rem 1.5rem;
}

.schwerpunkte-nav__header-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* ── List ──────────────────────────────────────────── */

.schwerpunkte-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Item ──────────────────────────────────────────── */

.schwerpunkte-nav__item {
  border-bottom: 1px solid rgba(11, 37, 69, 0.06);
}

.schwerpunkte-nav__item:last-child {
  border-bottom: none;
}

/* ── Link ──────────────────────────────────────────── */

.schwerpunkte-nav__link {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast), padding-left var(--transition-fast);
}

.schwerpunkte-nav__link::before {
  content: '›';
  margin-right: 0.5em;
  color: var(--color-gold);
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.schwerpunkte-nav__link:hover {
  color: var(--color-gold);
  background: rgba(184, 154, 78, 0.05);
  padding-left: 1.5rem;
}

.schwerpunkte-nav__link:hover::before {
  transform: translateX(3px);
}

/* ── Active state ──────────────────────────────────── */

.schwerpunkte-nav__link--active {
  color: var(--color-gold);
  background: rgba(184, 154, 78, 0.07);
  font-weight: 500;
}

.schwerpunkte-nav__link--active::before {
  transform: translateX(3px);
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */
/* ============================================================
   Image Carousel (Seminar Hero Slider)
   Extends the base carousel component for full-width image slides
   ============================================================ */

.image-carousel {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-navy);
  /* Constrain the dots inside */
}

/* Each slide fills the container */
.image-carousel__slide {
  flex-shrink: 0;
  width: 100%;
  position: relative;
}

.image-carousel__img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

/* Arrow buttons — override carousel defaults for larger image feel */
.image-carousel .carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(11, 37, 69, 0.55);
  color: var(--color-white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  padding: 0;
  line-height: 1;
}

.image-carousel .carousel__arrow:hover {
  background: var(--color-gold);
}

.image-carousel .carousel__arrow--prev {
  left: 0.75rem;
}

.image-carousel .carousel__arrow--next {
  right: 0.75rem;
}

/* Dots — place over the image at the bottom */
.image-carousel .carousel__dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 3;
}

.image-carousel .carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.image-carousel .carousel__dot--active {
  background: var(--color-gold);
  transform: scale(1.2);
}

/* ── Responsive ────────────────────────────────────── */

@media (max-width: 768px) {
  .image-carousel__img {
    height: 300px;
  }
}

@media (max-width: 575px) {
  .image-carousel__img {
    height: 300px;
  }

  .image-carousel .carousel__arrow {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */
/* ============================================================
   Legal Page — Impressum / Datenschutz
   ============================================================ */

/* ---- Hero banner ---- */
.legal-page__hero {
  background-color: var(--color-navy);
  background-image:
    linear-gradient(rgba(11, 37, 69, 0.85), rgba(11, 37, 69, 0.85)),
    url('/assets/images/ptt_default.jpg');
  background-size: cover;
  background-position: center;
  padding: var(--space-lg) 0;
  text-align: center;
}

.legal-page__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.75rem); /* 40–60px */
  font-weight: 300;
  color: var(--color-white);
  margin: 0;
  line-height: 1.18;
}

/* ---- Body / prose area ---- */
.legal-page__body {
  padding: var(--space-lg) 0 var(--space-xl);
  background-color: var(--color-offwhite);
}

.legal-page__prose {
  max-width: 800px;
  margin: 0 auto;
}

/* ---- Prose typography ---- */
.legal-page__prose h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--color-navy);
  margin: var(--space-lg) 0 var(--space-sm);
  line-height: 1.25;
}

.legal-page__prose h2:first-child {
  margin-top: 0;
}

.legal-page__prose h3 {
  font-family: var(--font-subheading);
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--color-navy);
  margin: var(--space-md) 0 var(--space-xs);
  line-height: 1.4;
}

.legal-page__prose h4 {
  font-family: var(--font-subheading);
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-text-dark);
  margin: var(--space-sm) 0 var(--space-xs);
}

.legal-page__prose p {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0 0 var(--space-sm);
}

.legal-page__prose ul,
.legal-page__prose ol {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0 0 var(--space-sm);
  padding-left: 1.5rem;
}

.legal-page__prose li {
  margin-bottom: 0.375rem;
}

/* Fliesstext-Links in Gold — aber NICHT Buttons. `.legal-page__prose a`
   hat Spezifitaet (0,1,1) und schlug sonst die `.btn`-Regel (0,1,0):
   Goldtext auf Goldflaeche, also unlesbar. Gefunden 2026-07-29 auf
   /wissensbereich/ und /foerderung/. */
.legal-page__prose a:not(.btn) {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.legal-page__prose a:hover {
  color: var(--color-navy);
}

.legal-page__prose strong {
  font-weight: 500;
  color: var(--color-text-dark);
}

.legal-page__prose hr {
  border: none;
  border-top: 1px solid var(--color-faint);
  margin: var(--space-lg) 0;
}

/* ---- Address blocks / preformatted ---- */
.legal-page__prose address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0 0 var(--space-sm);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .legal-page__hero {
    padding: var(--space-md) 0;
  }

  .legal-page__body {
    padding: var(--space-md) 0 var(--space-lg);
  }

  .legal-page__prose h2 {
    margin-top: var(--space-md);
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */
/* ============================================================
   BLOG POST PAGE
   2-column layout: main content (67%) + sidebar (33%)
   Responsive: single column on mobile/tablet
   ============================================================ */

/* ── Hero Banner ── */
.blog-post-hero {
  width: 100%;
  min-height: 45vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-post-hero__inner {
  text-align: center;
  padding: 80px 24px;
  max-width: 860px;
  width: 100%;
}

.blog-post-hero__category {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.blog-post-hero__title {
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.18;
  letter-spacing: -1.5px;
  text-transform: capitalize;
  margin: 0 0 24px;
}

.blog-post-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
}

.blog-post-hero__meta-sep {
  color: var(--color-gold);
}

/* ── Breadcrumb bar ── */
.blog-post-page__breadcrumb-wrap {
  background: var(--color-faint);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

/* ── Two-column grid ── */
.blog-post-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  padding: 60px 0 80px;
}

/* ── Main Article ── */
.blog-post-main {
  min-width: 0; /* prevent grid blowout */
}

/* Featured image */
.blog-post-main__featured-image {
  margin-bottom: 32px;
  overflow: hidden;
}

.blog-post-main__featured-image img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}

/* Meta line (author / date / category) */
.blog-post-main__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.blog-post-main__meta-author,
.blog-post-main__meta-date,
.blog-post-main__meta-category {
  display: inline-block;
}

.blog-post-main__meta > * + *::before {
  content: '/';
  margin-right: 16px;
  color: var(--color-gold);
}

/* Post title (kept for fallback; primary title is now in .blog-post-hero__title) */
.blog-post-main__title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.18;
  letter-spacing: -1.5px;
  text-transform: capitalize;
  margin: 0 0 24px;
}

/* Lead paragraph */
.blog-post-main__lead {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

/* Body prose content */
.blog-post-main__body {
  max-width: none; /* let grid control width */
}

/* Social share row */
.blog-post-main__share {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

/* ── Sidebar ── */
.blog-post-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* ── Related Posts Section ── */
.blog-post-related {
  background: var(--color-faint);
  padding: 70px 0 80px;
}

.blog-post-related__header {
  text-align: center;
  margin-bottom: 48px;
}

.blog-post-related__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.blog-post-related__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin: 0;
}

.blog-post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Laptop (≤1199px) — tighten gap */
@media (max-width: 1199px) {
  .blog-post-layout {
    grid-template-columns: 1fr 300px;
    gap: 40px;
  }
}

/* Tablet landscape (≤991px) — single column */
@media (max-width: 991px) {
  .blog-post-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 40px 0 60px;
  }

  .blog-post-sidebar {
    position: static;
    margin-top: 50px;
  }

  .blog-post-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .blog-post-main__featured-image img {
    height: 320px;
  }

  .blog-post-hero__title {
    font-size: 44px;
    letter-spacing: -1px;
  }

  .blog-post-hero__inner {
    padding: 60px 20px;
  }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .blog-post-main__featured-image img {
    height: 260px;
  }

  .blog-post-related {
    padding: 50px 0 60px;
  }

  .blog-post-hero__title {
    font-size: 36px;
    letter-spacing: -0.5px;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .blog-post-layout {
    padding: 30px 0 40px;
  }

  .blog-post-main__featured-image img {
    height: 200px;
  }

  .blog-post-main__title {
    font-size: 28px;
  }

  .blog-post-related__grid {
    grid-template-columns: 1fr;
  }

  .blog-post-related {
    padding: 40px 0 50px;
  }

  .blog-post-hero__title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .blog-post-hero__inner {
    padding: 50px 16px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */
/* ============================================================
   BLOG HUB PAGE
   Photo hero + 2-column layout (main + sidebar)
   ============================================================ */

/* ── Page Hero ── */
.blog-hub-page__hero {
  background: linear-gradient(rgba(11, 37, 69, 0.7), rgba(11, 37, 69, 0.7)),
              url('/assets/images/ptt_default.jpg');
  background-size: cover;
  background-position: center;
  height: 45vh;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-hub-page__hero-inner {
  text-align: center;
}

.blog-hub-page__title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin: 0;
}

/* ── Content Area ── */
.blog-hub-page__content {
  padding: 70px 0 90px;
  background: var(--color-offwhite);
}

/* ── 2-Column Layout ── */
.blog-hub-page__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
}

/* ── Main post column ── */
.blog-hub-page__main {
  min-width: 0;
}

/* ── Post list (single column in main area) ── */
.blog-hub-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}

/* Empty state */
.blog-hub-page__empty {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  text-align: center;
  padding: 60px 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
  .blog-hub-page__layout {
    grid-template-columns: 1fr 320px;
    gap: 50px;
  }
}

@media (max-width: 991px) {
  .blog-hub-page__layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .blog-hub-page__content {
    padding: 50px 0 70px;
  }

  .blog-hub-page__hero {
    height: 38vh;
  }
}

@media (max-width: 768px) {
  .blog-hub-page__hero {
    height: 35vh;
    min-height: 240px;
  }

  .blog-hub-page__grid {
    gap: 50px;
  }
}

@media (max-width: 575px) {
  .blog-hub-page__content {
    padding: 40px 0 60px;
  }

  .blog-hub-page__hero {
    height: 30vh;
    min-height: 200px;
  }

  .blog-hub-page__grid {
    gap: 40px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */
/* ============================================================
   TRAINER PROFILE PAGE
   Full-page layout for an individual trainer
   ============================================================ */

/* ── Hero Header ── */
.trainer-profile-page__hero {
  background: linear-gradient(rgba(11, 37, 69, 0.8), rgba(11, 37, 69, 0.8)), url('/assets/images/group_background.jpg');
  background-size: cover;
  background-position: center;
  padding: 50px 0 55px;
}

.trainer-profile-page__hero .breadcrumb {
  --breadcrumb-color: rgba(255, 255, 255, 0.5);
  --breadcrumb-color-active: rgba(255, 255, 255, 0.85);
  --breadcrumb-sep-color: rgba(255, 255, 255, 0.35);
  margin-bottom: 28px;
}

.trainer-profile-page__hero-inner {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
}

.trainer-profile-page__hero-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 10px;
}

.trainer-profile-page__hero-name {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin: 0;
}

/* ── Quote Banner ── */
.trainer-profile-page__quote-banner {
  background: var(--color-navy-alt);
  padding: 40px 0;
}

.trainer-profile-page__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  border: none;
  padding: 0;
}

/* ── Main Content Two-Column Layout ── */
.trainer-profile-page__content {
  padding: 70px 0 80px;
  background: var(--color-offwhite);
}

.trainer-profile-page__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Portrait */
.trainer-profile-page__portrait-wrap {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow-hover);
}

.trainer-profile-page__portrait {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-smooth);
}

.trainer-profile-page__portrait-wrap:hover .trainer-profile-page__portrait {
  transform: scale(1.03);
}

/* Info Column */
.trainer-profile-page__info-heading {
  font-family: var(--font-subheading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 1.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Info List */
.trainer-profile-page__info-list {
  list-style: none;
  margin: 0 0 1.75rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.trainer-profile-page__info-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.trainer-profile-page__info-item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  background: var(--color-gold);
  transform: translateY(-1px);
}

.trainer-profile-page__info-label {
  font-weight: 500;
  color: var(--color-navy);
  white-space: nowrap;
}

.trainer-profile-page__social-link {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.trainer-profile-page__social-link:hover {
  color: var(--color-navy);
}

/* Expertise Tags */
.trainer-profile-page__expertise {
  margin: 0 0 2rem 0;
}

.trainer-profile-page__expertise-heading {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 0.75rem 0;
}

.trainer-profile-page__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.trainer-profile-page__tag {
  display: inline-block;
  padding: 0.3em 0.75em;
  background: var(--color-faint);
  border: 1px solid rgba(11, 37, 69, 0.1);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-dark);
}

/* CTA Buttons */
.trainer-profile-page__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.trainer-profile-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.5em;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.trainer-profile-page__btn--primary {
  background: var(--color-gold);
  color: var(--color-white);
  border: 2px solid var(--color-gold);
}

.trainer-profile-page__btn--primary:hover {
  background: transparent;
  color: var(--color-gold);
}

.trainer-profile-page__btn--outline {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}

.trainer-profile-page__btn--outline:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* ── Biography Section ── */
.trainer-profile-page__bio-section {
  padding: 80px 0 90px;
  background: var(--color-white);
}

.trainer-profile-page__bio-inner {
  max-width: 860px;
  margin: 0 auto;
}

.trainer-profile-page__bio-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 10px;
}

.trainer-profile-page__bio-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gold);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 var(--space-md) 0;
}

.trainer-profile-page__bio-body.prose {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
}

.trainer-profile-page__bio-body.prose h2 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.2;
  margin: 1.8em 0 var(--space-md);
}

.trainer-profile-page__bio-body.prose h2:first-child {
  margin-top: 0;
}

/* ── Qualifications Section ── */
.trainer-profile-page__qualifications {
  padding: 70px 0 80px;
  background: var(--color-faint);
}

.trainer-profile-page__qual-inner {
  max-width: 860px;
  margin: 0 auto;
}

.trainer-profile-page__qual-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 10px;
}

.trainer-profile-page__qual-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gold);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 var(--space-md) 0;
}

.trainer-profile-page__qual-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.trainer-profile-page__qual-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.975rem;
  color: var(--color-text);
  line-height: 1.65;
}

.trainer-profile-page__qual-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: var(--color-gold);
  border-radius: 1px;
  margin-top: 0.45rem;
}

/* ── Contact CTA Section ── */
.trainer-profile-page__contact-cta {
  padding: 70px 0 80px;
  background: var(--color-white);
}

.trainer-profile-page__contact-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.trainer-profile-page__contact-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 10px;
}

.trainer-profile-page__contact-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gold);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 1rem 0;
}

.trainer-profile-page__contact-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 2rem 0;
}

.trainer-profile-page__contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.trainer-profile-page__contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
}

/* ============================================================
   TRAINER DIRECTORY PAGE
   ============================================================ */

.trainer-directory-page__header {
  background: var(--color-white);
  padding: 60px 0 50px;
  text-align: center;
}

.trainer-directory-page__header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trainer-directory-page__medallion {
  display: block;
  width: auto;
  height: 60px;
  margin: 0 auto 28px;
  opacity: 0.85;
}

.trainer-directory-page__title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 400;
  font-style: italic;
  color: var(--color-navy);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 760px;
}

/* Intro section */
.trainer-directory-page__intro {
  padding: 55px 0 20px;
  background: var(--color-offwhite);
}

.trainer-directory-page__intro-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 760px;
}

/* Grid */
.trainer-directory-page__content {
  padding: 40px 0 90px;
  background: var(--color-offwhite);
}

.trainer-directory-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 40px;
}

/* Empty state */
.trainer-directory-page__empty {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  text-align: center;
  padding: 60px 0;
}

/* Career CTA Block */
.trainer-directory-page__career {
  background: var(--color-faint);
  padding: 70px 0 80px;
}

.trainer-directory-page__career-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.trainer-directory-page__career-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.trainer-directory-page__career-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 1.25rem 0;
}

.trainer-directory-page__career-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
}

.trainer-directory-page__career-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  gap: 0.6rem;
}

.trainer-directory-page__career-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-dark);
}

.trainer-directory-page__career-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  background: var(--color-gold);
  border-radius: 1px;
  transform: translateY(-1px);
}

/* Stats Bar */
.trainer-directory-page__stats {
  background: var(--color-navy);
  padding: 50px 0;
}

.trainer-directory-page__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px;
  text-align: center;
}

.trainer-directory-page__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.trainer-directory-page__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
}

.trainer-directory-page__stat-label {
  font-family: var(--font-subheading);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
  .trainer-directory-page__grid {
    gap: 40px 30px;
  }

  .trainer-profile-page__layout {
    gap: 40px;
  }
}

@media (max-width: 991px) {
  .trainer-directory-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
  }

  .trainer-directory-page__content {
    padding: 30px 0 70px;
  }

  .trainer-profile-page__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .trainer-profile-page__portrait-wrap {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 991px) {
  .trainer-directory-page__stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .trainer-directory-page__header {
    padding: 40px 0 36px;
  }

  .trainer-profile-page__hero {
    padding: 36px 0 40px;
  }

  .trainer-profile-page__content {
    padding: 50px 0 60px;
  }

  .trainer-profile-page__bio-section,
  .trainer-profile-page__qualifications,
  .trainer-profile-page__contact-cta {
    padding: 55px 0 65px;
  }
}

@media (max-width: 575px) {
  .trainer-directory-page__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .trainer-directory-page__content {
    padding: 30px 0 60px;
  }

  .trainer-directory-page__stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .trainer-directory-page__stats {
    padding: 36px 0;
  }

  .trainer-profile-page__cta-group {
    flex-direction: column;
  }

  .trainer-profile-page__btn {
    width: 100%;
    text-align: center;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */
/* ============================================================
   CASE STUDY PAGE
   2-column layout: main content (67%) + sidebar (33%)
   Mirrors blog-post-page.css structure.
   Responsive: single column on mobile/tablet
   ============================================================ */

/* ── Breadcrumb bar ── */
.cs-page__breadcrumb-wrap {
  background: var(--color-faint);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

/* ── Hero Banner (full-width, background image with overlay) ── */
.cs-page__hero {
  position: relative;
  width: 100%;
  height: 380px;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.cs-page__hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 37, 69, 0.6);
}

.cs-page__hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.cs-page__hero-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── Two-column grid: sidebar (left 340px) + content (right) ── */
.cs-page-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  padding: 60px 0 80px;
}

/* ── Main Article ── */
.cs-page-main {
  min-width: 0; /* prevent grid blowout */
}

/* Lead paragraph */
.cs-page-main__lead {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

/* Body prose content */
.cs-page-main__body {
  max-width: none;
}

/* ── Testimonials section ── */
.cs-page-testimonials {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.cs-page-testimonials__title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin: 0 0 32px;
}

/* ── Sidebar ── */
.cs-page-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Laptop (≤1199px) — tighten gap */
@media (max-width: 1199px) {
  .cs-page-layout {
    grid-template-columns: 300px 1fr;
    gap: 40px;
  }
}

/* Tablet landscape (≤991px) — single column, sidebar stacks below content */
@media (max-width: 991px) {
  .cs-page-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 40px 0 60px;
  }

  /* Reorder: main content first, sidebar second on mobile/tablet */
  .cs-page-main {
    order: 1;
  }

  .cs-page-sidebar {
    order: 2;
    position: static;
    margin-top: 50px;
  }

  .cs-page__hero {
    height: 280px;
  }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .cs-page__hero {
    height: 240px;
  }

  .cs-page__hero-title {
    font-size: 28px;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .cs-page-layout {
    padding: 30px 0 40px;
  }

  .cs-page__hero {
    height: 200px;
  }

  .cs-page__hero-title {
    font-size: 24px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */
/* ============================================================
   CASE STUDY LISTING PAGE (Fallstudien Archiv)
   Navy header + 3-column card grid.
   Mirrors blog-hub-page.css structure.
   ============================================================ */

/* ── Page Header ── */
.cs-listing-page__header {
  background: var(--color-navy);
  padding: 50px 0 55px;
}

.cs-listing-page__header .breadcrumb {
  --breadcrumb-color: rgba(255, 255, 255, 0.5);
  --breadcrumb-color-active: rgba(255, 255, 255, 0.85);
  --breadcrumb-sep-color: rgba(255, 255, 255, 0.35);
  margin-bottom: 24px;
}

.cs-listing-page__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.cs-listing-page__title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
}

.cs-listing-page__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 520px;
  margin: 0;
}

/* ── Cards Grid ── */
.cs-listing-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 70px 0 80px;
}

/* Empty state */
.cs-listing-page__empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  padding: 60px 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Laptop (≤1199px) */
@media (max-width: 1199px) {
  .cs-listing-page__grid {
    gap: 30px;
  }
}

/* Tablet landscape (≤991px) — 2 columns */
@media (max-width: 991px) {
  .cs-listing-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 50px 0 60px;
  }
}

/* Mobile (≤575px) — 1 column */
@media (max-width: 575px) {
  .cs-listing-page__header {
    padding: 36px 0 42px;
  }

  .cs-listing-page__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 0 48px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */
/* ============================================================
   SCHWERPUNKTE LISTING PAGE
   Navy header + intro + 3-column card grid + features strip + CTA.
   Mirrors cs-listing-page.css structure with seminar-specific adjustments.
   ============================================================ */

/* ── Page Header ── */
.schwerpunkte-listing-page__header {
  background: var(--color-navy);
  padding: 50px 0 55px;
}

.schwerpunkte-listing-page__header .breadcrumb {
  --breadcrumb-color: rgba(255, 255, 255, 0.5);
  --breadcrumb-color-active: rgba(255, 255, 255, 0.85);
  --breadcrumb-sep-color: rgba(255, 255, 255, 0.35);
  margin-bottom: 24px;
}

.schwerpunkte-listing-page__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.schwerpunkte-listing-page__title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
}

.schwerpunkte-listing-page__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 560px;
  margin: 0;
}

/* ── Intro Text ── */
.schwerpunkte-listing-page__intro {
  background: var(--color-offwhite);
  padding: 48px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.schwerpunkte-listing-page__intro-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.75;
  max-width: 760px;
  margin: 0 0 48px;
}

/* ── Content Area ── */
.schwerpunkte-listing-page__content {
  background: var(--color-offwhite);
  padding: 60px 0 80px;
}

/* ── Cards Grid ── */
.schwerpunkte-listing-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 40px;
}

/* Empty state */
.schwerpunkte-listing-page__empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  padding: 60px 0;
}

/* Featured card (Retreat) — full-width on first row if needed */
.schwerpunkte-listing-page__featured {
  /* standard archive card layout */
}

/* ── Features Strip ── */
.schwerpunkte-listing-page__features {
  background: var(--color-white);
  border-top: 1px solid var(--color-faint);
  padding: 56px 0;
}

.schwerpunkte-listing-page__features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.schwerpunkte-listing-page__feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.schwerpunkte-listing-page__feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-faint);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
}

.schwerpunkte-listing-page__feature-icon svg {
  color: var(--color-gold);
  stroke: var(--color-gold);
}

.schwerpunkte-listing-page__feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schwerpunkte-listing-page__feature-text strong {
  font-family: var(--font-subheading);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.3;
}

.schwerpunkte-listing-page__feature-text span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Laptop (≤1199px) */
@media (max-width: 1199px) {
  .schwerpunkte-listing-page__grid {
    gap: 40px 30px;
  }

  .schwerpunkte-listing-page__features-grid {
    gap: 24px;
  }
}

/* Tablet landscape (≤991px) — 2 columns */
@media (max-width: 991px) {
  .schwerpunkte-listing-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
    padding: 0;
  }

  .schwerpunkte-listing-page__content {
    padding: 50px 0 60px;
  }

  .schwerpunkte-listing-page__features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .schwerpunkte-listing-page__intro {
    padding-top: 40px;
  }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .schwerpunkte-listing-page__header {
    padding: 36px 0 42px;
  }

  .schwerpunkte-listing-page__features {
    padding: 44px 0;
  }
}

/* Mobile (≤575px) — 1 column */
@media (max-width: 575px) {
  .schwerpunkte-listing-page__grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .schwerpunkte-listing-page__content {
    padding: 36px 0 50px;
  }

  .schwerpunkte-listing-page__features-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .schwerpunkte-listing-page__intro {
    padding-top: 32px;
  }

  .schwerpunkte-listing-page__intro-text {
    margin-bottom: 32px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */
/* ============================================================
   VERANSTALTUNGEN PAGE
   Navy header + intro + events grouped by month + newsletter CTA + banner.
   Uses event-card.njk component for individual events.
   ============================================================ */

/* ── Page Header ── */
.veranstaltungen-page__header {
  background: var(--color-navy);
  padding: 50px 0 55px;
}

.veranstaltungen-page__header .breadcrumb {
  --breadcrumb-color: rgba(255, 255, 255, 0.5);
  --breadcrumb-color-active: rgba(255, 255, 255, 0.85);
  --breadcrumb-sep-color: rgba(255, 255, 255, 0.35);
  margin-bottom: 24px;
}

.veranstaltungen-page__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.veranstaltungen-page__title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin: 0 0 16px;
}

.veranstaltungen-page__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 500px;
  margin: 0;
}

/* ── Intro Section ── */
.veranstaltungen-page__intro {
  background: var(--color-white);
  padding: 64px 0 56px;
}

.veranstaltungen-page__intro-inner {
  max-width: 760px;
}

.veranstaltungen-page__intro-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.veranstaltungen-page__intro-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 20px;
}

.veranstaltungen-page__intro-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0;
}

/* ── Events Section ── */
.veranstaltungen-page__events {
  background: var(--color-offwhite);
  padding: 60px 0 80px;
}

/* Month group */
.veranstaltungen-page__month-group {
  margin-bottom: 60px;
}

.veranstaltungen-page__month-group:last-child {
  margin-bottom: 0;
}

/* Month header: label + horizontal rule */
.veranstaltungen-page__month-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.veranstaltungen-page__month-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
  flex-shrink: 0;
}

.veranstaltungen-page__month-line {
  flex: 1;
  height: 1px;
  background: rgba(11, 37, 69, 0.15);
}

/* Events list within a month */
.veranstaltungen-page__month-events {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Newsletter / No Events Strip ── */
.veranstaltungen-page__newsletter {
  background: var(--color-white);
  border-top: 1px solid var(--color-faint);
  padding: 56px 0;
}

.veranstaltungen-page__newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.veranstaltungen-page__newsletter-text {
  flex: 1;
  min-width: 0;
}

.veranstaltungen-page__newsletter-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 12px;
}

.veranstaltungen-page__newsletter-body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
  max-width: 560px;
}

.veranstaltungen-page__newsletter-action {
  flex-shrink: 0;
}

.veranstaltungen-page__newsletter-btn {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-white);
  padding: 14px 34px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
}

.veranstaltungen-page__newsletter-btn:hover {
  opacity: 0.85;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Laptop (≤1199px) */
@media (max-width: 1199px) {
  .veranstaltungen-page__newsletter-inner {
    gap: 30px;
  }
}

/* Tablet landscape (≤991px) */
@media (max-width: 991px) {
  .veranstaltungen-page__events {
    padding: 50px 0 60px;
  }

  .veranstaltungen-page__newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .veranstaltungen-page__header {
    padding: 36px 0 42px;
  }

  .veranstaltungen-page__intro {
    padding: 48px 0 40px;
  }

  .veranstaltungen-page__month-group {
    margin-bottom: 44px;
  }

  .veranstaltungen-page__newsletter {
    padding: 44px 0;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .veranstaltungen-page__events {
    padding: 36px 0 48px;
  }

  .veranstaltungen-page__month-events {
    gap: 20px;
  }

  .veranstaltungen-page__month-header {
    margin-bottom: 20px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */
/* ============================================================
   TEAM PAGE  (/team/)
   ============================================================ */

/* ── Page Header ── */
.team-page__header {
  background: var(--color-white);
  padding: 60px 0 55px;
  text-align: center;
}

.team-page__header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-page__medallion {
  width: 60px;
  height: auto;
  display: block;
  margin: 0 auto 16px;
}

.team-page__title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.15;
  letter-spacing: 0.3px;
  margin: 0;
  max-width: 800px;
  text-align: center;
}

/* ── Gold Divider ── */
.team-page__divider {
  border: none;
  height: 2px;
  background: var(--color-gold);
  width: 60px;
  margin: var(--space-md) auto;
}

/* ── Intro ── */
.team-page__intro {
  padding: 55px 0 10px;
  background: var(--color-offwhite);
}

.team-page__intro-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 760px;
}

/* ── Team Grid ── */
.team-page__members {
  padding: 40px 0 80px;
  background: var(--color-offwhite);
}

.team-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 35px;
}

/* ── Features / Values Section ── */
.team-page__features {
  padding: 70px 0 75px;
  background: var(--color-navy-alt);
}

.team-page__features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 30px;
}

.team-page__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.team-page__feature-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--color-gold);
  flex-shrink: 0;
}

.team-page__feature-icon svg {
  width: 24px;
  height: 24px;
}

.team-page__feature-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--color-white);
  margin: 0 0 0.4rem 0;
  line-height: 1.25;
}

.team-page__feature-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

/* ── Career CTA ── */
.team-page__career {
  background: var(--color-faint);
  padding: 70px 0 80px;
}

.team-page__career-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.team-page__career-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}

.team-page__career-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 1.25rem 0;
}

.team-page__career-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
}

.team-page__career-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  gap: 0.6rem;
}

.team-page__career-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-dark);
}

.team-page__career-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  background: var(--color-gold);
  border-radius: 1px;
  transform: translateY(-1px);
}

.team-page__career-note {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 1rem 0;
}

.team-page__career-hint {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 2rem 0;
  background: rgba(184, 154, 78, 0.08);
  border-left: 3px solid var(--color-gold);
  padding: 0.75rem 1rem;
  text-align: left;
  border-radius: 0 3px 3px 0;
}

/* F-59: kein eigenes `strong`-Rule hier liess den UA-Default (Gewicht 700)
   durchschlagen — im Markdown-Inhalt (team.njk) steht "Hinweis zur
   Initiativbewerbung:" als <strong>. Auf Gewicht 500 gedeckelt (Regel 3). */
.team-page__career-hint strong,
.team-page__career-note strong {
  font-weight: 500;
  color: var(--color-navy);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
  .team-page__features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 30px;
  }
}

@media (max-width: 991px) {
  .team-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 25px;
  }

  .team-page__members {
    padding: 30px 0 60px;
  }
}

@media (max-width: 768px) {
  .team-page__header {
    padding: 36px 0 40px;
  }

  .team-page__features {
    padding: 50px 0 55px;
  }

  .team-page__career {
    padding: 50px 0 60px;
  }
}

@media (max-width: 575px) {
  .team-page__grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .team-page__members {
    padding: 25px 0 55px;
  }

  .team-page__features-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */
/* ============================================================
   FOUNDER PAGE  (/ueber-miguel-miranda/)
   ============================================================ */

/* ── Hero Header ── */
.founder-page__hero {
  background: var(--color-white);
  padding: 70px 0 60px;
}

.founder-page__hero-inner {
  text-align: center;
}

.founder-page__hero-text {
  max-width: 780px;
  margin: 0 auto;
}

.founder-page__hero-quote {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  font-style: italic;
  color: var(--color-navy);
  line-height: 1.25;
  letter-spacing: 0.2px;
  margin: 0 0 24px 0;
}

.founder-page__hero-byline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}

/* ── Mission / Intro ── */
.founder-page__mission {
  padding: 70px 0 80px;
  background: var(--color-white);
}

.founder-page__mission-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
}

.founder-page__mission-para {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0 0 1.25rem 0;
}

.founder-page__mission-para:last-child {
  margin-bottom: 0;
}

.founder-page__mission-image {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow-hover);
}

.founder-page__portrait {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-smooth);
}

.founder-page__mission-image:hover .founder-page__portrait {
  transform: scale(1.03);
}

/* ── Tabs Section ── */
.founder-page__tabs-section {
  padding: 70px 0 80px;
  background: var(--color-offwhite);
}

.founder-page__tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(11, 37, 69, 0.12);
  margin-bottom: 40px;
}

.founder-page__tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8em 1.6em;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.founder-page__tab-btn:hover {
  color: var(--color-navy);
}

.founder-page__tab-btn--active {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.founder-page__tabs-intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 780px;
  margin: 0 0 3rem 0;
}

/* ── Timeline ── */
.founder-page__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.founder-page__timeline::before {
  content: '';
  position: absolute;
  left: 120px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(184, 154, 78, 0.2);
}

.founder-page__timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 30px;
  padding: 0 0 40px 0;
  position: relative;
}

.founder-page__timeline-item:last-child {
  padding-bottom: 0;
}

.founder-page__timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 28px;
  padding-top: 4px;
  position: relative;
}

.founder-page__timeline-marker::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 8px;
  width: 10px;
  height: 10px;
  background: var(--color-gold);
  border-radius: 50%;
  border: 2px solid var(--color-offwhite);
  box-shadow: 0 0 0 2px var(--color-gold);
}

.founder-page__timeline-year {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  text-align: right;
  white-space: nowrap;
}

.founder-page__timeline-body {
  padding-top: 0;
}

.founder-page__timeline-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

.founder-page__timeline-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 0.75rem 0;
}

.founder-page__timeline-text:last-child {
  margin-bottom: 0;
}

.founder-page__timeline-text em {
  font-style: italic;
  color: var(--color-text-dark);
}

/* ── Certificates Grid ── */
.founder-page__cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.founder-page__cert-item {
  background: var(--color-white);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: var(--shadow-subtle);
}

.founder-page__cert-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-faint);
  border-radius: 50%;
  color: var(--color-gold);
  flex-shrink: 0;
  overflow: hidden;
}

.founder-page__cert-icon svg {
  width: 22px;
  height: 22px;
}

.founder-page__cert-award-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.founder-page__cert-title {
  font-family: var(--font-subheading);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 0.35rem 0;
  line-height: 1.3;
}

.founder-page__cert-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.55;
  margin: 0;
}

/* ── Testimonials ── */
.founder-page__testimonials {
  padding: 70px 0 80px;
  background: var(--color-navy);
}

.founder-page__testimonials-header {
  margin-bottom: 40px;
}

.founder-page__section-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 10px;
}

.founder-page__section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.15;
  margin: 0;
}

.founder-page__testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.founder-page__testimonial {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.founder-page__testimonial-stars {
  font-size: 1rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  line-height: 1;
}

.founder-page__testimonial-quote {
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin: 0;
  padding: 0;
  border: none;
  flex: 1;
}

.founder-page__testimonial-quote::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-gold);
  line-height: 0.5;
  display: block;
  margin-bottom: 0.5rem;
}

.founder-page__testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.founder-page__testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.founder-page__testimonial-name {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-white);
}

.founder-page__testimonial-role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

.founder-page__testimonials-footer {
  text-align: center;
  margin-top: 3rem;
}

.founder-page__testimonials-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 2em;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--color-gold);
  border: 2px solid var(--color-gold);
  border-radius: 3px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.founder-page__testimonials-btn:hover {
  background: var(--color-gold);
  color: var(--color-white);
}

/* ── CTA Section ── */
.founder-page__cta-section {
  padding: 80px 0 90px;
  background: var(--color-navy);
}

.founder-page__cta-inner {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.founder-page__cta-section .founder-page__section-label {
  color: var(--color-gold);
}

.founder-page__cta-title {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.15;
  margin: 0 0 1.25rem 0;
}

.founder-page__cta-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0 0 3rem 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.founder-page__process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 3rem;
}

.founder-page__process-step {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  text-align: left;
}

.founder-page__process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.founder-page__process-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--color-white);
  margin: 0 0 0.65rem 0;
  line-height: 1.25;
}

.founder-page__process-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0;
}

.founder-page__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 2em;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--color-gold);
  color: var(--color-white);
  border: 2px solid var(--color-gold);
  border-radius: 3px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.founder-page__cta-btn:hover {
  background: transparent;
  color: var(--color-gold);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
  .founder-page__mission-inner {
    grid-template-columns: 1fr 320px;
    gap: 45px;
  }

  .founder-page__cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .founder-page__timeline::before {
    left: 100px;
  }

  .founder-page__timeline-item {
    grid-template-columns: 100px 1fr;
    gap: 25px;
  }
}

@media (max-width: 991px) {
  .founder-page__mission-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .founder-page__mission-image {
    max-width: 420px;
  }

  .founder-page__testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }

  .founder-page__process-steps {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .founder-page__timeline::before {
    display: none;
  }

  .founder-page__timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .founder-page__timeline-marker {
    align-items: flex-start;
    padding-right: 0;
    padding-top: 0;
  }

  .founder-page__timeline-marker::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .founder-page__hero {
    padding: 36px 0 44px;
  }

  .founder-page__mission {
    padding: 50px 0 60px;
  }

  .founder-page__tabs-section {
    padding: 50px 0 60px;
  }

  .founder-page__testimonials {
    padding: 50px 0 60px;
  }

  .founder-page__cta-section {
    padding: 55px 0 65px;
  }

  .founder-page__cert-grid {
    grid-template-columns: 1fr;
  }

  .founder-page__tabs-nav {
    flex-wrap: wrap;
    gap: 4px;
  }

  .founder-page__tab-btn {
    padding: 0.6em 1.2em;
    font-size: 0.78rem;
  }
}

@media (max-width: 575px) {
  .founder-page__testimonials-grid {
    max-width: 100%;
  }

  .founder-page__process-steps {
    max-width: 100%;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */
/* =========================================================
   Workshop Page
   Kommunikations-Workshop landing page styles.
   Uses: .ws-press, .ws-info, .ws-moderator, .ws-body
   ========================================================= */

/* =========================================================
   Press / "Bekannt aus" bar
   ========================================================= */

.ws-press {
  background-color: var(--color-faint);
  padding: 32px 0;
  border-bottom: 1px solid rgba(11, 37, 69, 0.07);
}

.ws-press__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.ws-press__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-press__logos {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.ws-press__logos img {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(100%);
  transition: opacity var(--transition-fast);
}

.ws-press__logos img:hover {
  opacity: 0.85;
}

/* =========================================================
   Event Info + Moderator — two-column layout
   ========================================================= */

.ws-info {
  background-color: var(--color-white);
  padding: var(--space-lg) 0;
}

.ws-info__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Info box (left column) */
.ws-info__box {
  background-color: var(--color-faint);
  padding: 40px 36px;
}

.ws-info__box-title {
  font-family: var(--font-subheading);
  font-size: 18px;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-gold);
  display: inline-block;
}

.ws-info__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ws-info__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

.ws-info__key {
  font-weight: 500;
  color: var(--color-text-dark);
  min-width: 110px;
  flex-shrink: 0;
}

.ws-info__val {
  color: var(--color-text);
}

.ws-info__val--free {
  color: var(--color-gold);
  font-weight: 500;
}

.ws-info__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 0 36px;
  line-height: 52px;
  background-color: var(--color-gold);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.ws-info__cta:hover {
  opacity: 0.88;
}

/* Moderator (right column) */
.ws-moderator__label {
  font-family: var(--font-subheading);
  font-size: 18px;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-gold);
  display: inline-block;
}

.ws-moderator__card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.ws-moderator__img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

.ws-moderator__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-moderator__name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1.2;
}

.ws-moderator__role {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.ws-moderator__bio {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0;
}

/* =========================================================
   Workshop Body — prose content
   ========================================================= */

.ws-body {
  background-color: var(--color-offwhite);
  padding: var(--space-lg) 0;
}

.ws-body__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.ws-body__content {
  margin-bottom: 40px;
}

/* Highlight list (gold checkmark style) */
.ws-body__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.ws-body__highlights li {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-dark);
  line-height: 1.6;
  padding-left: 28px;
  position: relative;
  margin-bottom: 10px;
}

.ws-body__highlights li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-gold);
  font-weight: 500;
  font-size: 14px;
}

.ws-body__cta-wrap {
  text-align: center;
  padding-top: var(--space-sm);
}

.ws-body__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 0 48px;
  line-height: 56px;
  background-color: var(--color-gold);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.ws-body__cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet landscape (≤991px) */
@media (max-width: 991px) {
  .ws-info__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .ws-press__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .ws-press__logos {
    gap: 20px;
  }

  .ws-press__logos img {
    height: 22px;
  }

  .ws-info {
    padding: var(--space-md) 0;
  }

  .ws-info__box {
    padding: 28px 24px;
  }

  .ws-moderator__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ws-moderator__img {
    width: 80px;
    height: 80px;
  }

  .ws-body {
    padding: var(--space-md) 0;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .ws-info__key {
    min-width: 90px;
  }

  .ws-info__item {
    font-size: 14px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */
/* =========================================================
   Entwicklungskit Page
   Das Entwicklungskit landing page styles.
   Uses: .entw-page, .entw-page__hero
   ========================================================= */

/* =========================================================
   Page Hero — dark navy header
   ========================================================= */

.entw-page__hero {
  background-color: var(--color-navy);
  padding: 80px 0 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle texture overlay */
.entw-page__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/topo_bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  pointer-events: none;
}

.entw-page__hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
  z-index: 1;
}

.entw-page__hero-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-bottom: 20px;
}

.entw-page__hero-title {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin: 0 0 24px;
}

.entw-page__hero-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet landscape (≤991px) */
@media (max-width: 991px) {
  .entw-page__hero {
    padding: 60px 0 56px;
  }

  .entw-page__hero-title {
    font-size: 48px;
  }
}

/* Tablet portrait (≤768px) */
@media (max-width: 768px) {
  .entw-page__hero {
    padding: 48px 0 44px;
  }

  .entw-page__hero-title {
    font-size: 38px;
  }

  .entw-page__hero-desc {
    font-size: 15px;
  }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
  .entw-page__hero-title {
    font-size: 30px;
  }

  .entw-page__hero {
    padding: 40px 0 36px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */
/* ============================================================
   About Pages — shared CSS for Über-uns sub-pages.
   Used by: Das Institut, Trainer werden, Standorte.
   Reuses sv3-*, svcs-*, svtr-* classes from seminar-page-v3.css.
   ============================================================ */

/* ── Institut facts strip (case-study style) ── */
.svab-facts {
  background: var(--color-white);
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.svab-facts__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  font-family: var(--font-ui);
}

.svab-facts__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.svab-facts__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
}

.svab-facts__value {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.2px;
  color: var(--color-navy);
}

/* ── Trainer-werden: process steps (light variant) ── */
.svab-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.svab-process__step {
  padding: 28px;
  background: var(--color-faint);
  border-radius: 4px;
  border-top: 2px solid var(--color-gold);
}

.svab-process__num {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 40px;
  color: rgba(184, 154, 78, 0.3);
  line-height: 1;
  margin: 0 0 12px 0;
}

.svab-process__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 8px 0;
}

.svab-process__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-dark);
  margin: 0;
}

/* ── Team listing page (v3 style) ── */
.svab-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.svab-team-card {
  background: var(--color-faint);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.svab-team-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.svab-team-card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  filter: grayscale(15%);
}

.svab-team-card__body {
  padding: 20px 24px;
}

.svab-team-card__role {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 6px 0;
}

.svab-team-card__name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 8px 0;
}

.svab-team-card__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 14px 0;
}

.svab-team-card__link {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  border-bottom: 1px solid rgba(11, 37, 69, 0.2);
  padding-bottom: 2px;
}

/* ── Standorte contact grid ── */
.svab-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}

.svab-location-card {
  padding: 32px;
  background: var(--color-faint);
  border-radius: 4px;
  border-left: 2px solid var(--color-gold);
}

.svab-location-card__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 300;
  color: var(--color-navy);
  margin: 0 0 18px 0;
}

.svab-location-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svab-location-card__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-dark);
}

.svab-location-card__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  stroke: var(--color-gold);
}

.svab-location-card__item a {
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.2);
}

.svab-location-card__item a:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* ── Opening hours table ── */
.svab-hours {
  margin-top: 32px;
}

.svab-hours__title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 14px 0;
}

.svab-hours__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(11, 37, 69, 0.06);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-dark);
}

.svab-hours__day {
  font-weight: 500;
  color: var(--color-navy);
}

/* ── Trainer-werden application form placeholder ── */
.svab-form {
  background: var(--color-faint);
  border-radius: 4px;
  padding: 36px;
  margin-top: 24px;
}

.svab-form__title {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--color-navy);
  margin: 0 0 8px 0;
}

.svab-form__subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  margin: 0 0 24px 0;
}

.svab-form__hint {
  padding: 16px 20px;
  background: rgba(184, 154, 78, 0.07);
  border-left: 2px solid var(--color-gold);
  border-radius: 0 4px 4px 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin-bottom: 24px;
}

/* ── Responsive ── */

@media (max-width: 991px) {
  .svab-process {
    grid-template-columns: 1fr 1fr;
  }

  .svab-team-grid {
    grid-template-columns: 1fr 1fr;
  }

  .svab-location-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .svab-process {
    grid-template-columns: 1fr;
  }

  .svab-team-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .svab-facts__inner {
    gap: 20px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */
/* ============================================================
   WEITERBILDUNGEN — overview (/weiterbildungen/) and the five
   paginated category pages (/weiterbildungen/<kategorie>/).
   Reuses .section / .section-title-block / .seminar-filter /
   .seminar-grid / .seminar-card — only the bits those don't cover
   (empty state, closing back-link) get their own rules here.
   ============================================================ */

.weiterbildungen-page__empty {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
}

/* Abbinder — closing link back to /weiterbildungen/ on each category page.
   Same micro-CTA treatment as .seminar-card__cta (Variante D §5 "Karten"),
   kept as its own class since it sits outside a card. */
.weiterbildungen-page__back {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.weiterbildungen-page__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 5px;
  transition: color var(--transition-fast);
}

.weiterbildungen-page__back-link:hover {
  color: var(--color-gold);
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */
/* ============================================================
   BERATUNG PAGE (/beratung/) — landing page behind the header CTA
   "Beratungsgespräch". Reuses .section / .section-title-block /
   .process-steps / .btn — only the bits those don't cover (duration
   meta line, booking placeholder box) get their own rules here.
   ============================================================ */

.beratung-page__meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: calc(var(--space-md) * -1) 0 var(--space-md);
}

.beratung-page__steps {
  margin-top: var(--space-sm);
}

.beratung-page__foerderung .btn {
  margin-top: var(--space-sm);
}

/* Haarlinie statt Rahmen-Kasten (Variante D §5 "Regel 4") — 1px hairline
   frame instead of a filled/dashed placeholder box. */
.beratung-page__booking-placeholder {
  border: 1px solid var(--line);
  padding: 48px 40px;
  text-align: center;
}

.beratung-page__booking-placeholder-label {
  margin-bottom: 16px;
}

.beratung-page__booking-placeholder-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
  max-width: 52ch;
  margin: 0 auto;
}

.beratung-page__booking-placeholder-link {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  transition: color var(--transition-fast);
}

.beratung-page__booking-placeholder-link:hover {
  color: var(--color-navy);
}

@media (max-width: 575px) {
  .beratung-page__booking-placeholder {
    padding: 32px 20px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */


/* ── assets/css/components/team-section.css ── */
/* Team Section (Startseite) — F-15
   Vollständig aus der `trainers`-Collection erzeugt (siehe src/index.njk,
   Abschnitt "TEAM SECTION"). Eigener Klassen-Namensraum ".team-section-*",
   bewusst getrennt von ".team-card" (Showcase / Trainer-Verzeichnis) und
   ".svab-team-card" (Team-Übersichtsseite, about-pages.css) — beide werden
   von anderen Seiten/Agenten benutzt und sollen hier nicht mit-verändert
   werden.

   Variante D §5 "Karten": Haarlinien statt Rahmen, kein Grid-Gap,
   border-top auf dem Grid, border-right pro Karte (letzte Karte je Zeile
   ohne). Gleiches Vokabular wie seminar-card.css. */

/* F-45 — Kundenwunsch, wörtlich: „Waere halt noch super, wenn man da auch
   wieder einmal die klassische Schriftfarbe verwenden kann. In einem
   Bereich." Gemeint ist das klassische Register (Cormorant Infant
   italic), das in der Warum-Sektion bereits etabliert ist (.wt-heading,
   warum-test.css) und seit 2026-07-28 in Variante D §4 auf genau diese
   Art Stelle erweitert wurde. Zurückhaltend an GENAU einer Stelle
   eingesetzt: der Sektionsüberschrift „Lernen Sie unsere Experten
   kennen". NICHT die Kartennamen (.team-section-card__name bleibt Jost/
   --font-heading), NICHT die Rollen (.team-section-card__role bleibt
   Inter) — Regel 2 aus Variante D §3 gilt für beide unverändert.

   Die Überschrift wird über die H2/.section-title-Klasse aus dem
   geteilten sectionTitle()-Makro gerendert (section-title.njk, siehe
   src/index.njk „TEAM SECTION"). .section-title ist SITEWEIT geteilt —
   ein direkter Eingriff in section-title.css würde jede Sektion treffen,
   die das Makro nutzt. Deshalb hier über die #team-Section-ID gescoped,
   innerhalb der für diesen Auftrag erlaubten Datei. Werte 1:1 von
   .wt-heading übernommen (Variante D §4-Erweiterung, „Warum uns wählen"):
   italic 400, clamp(34px, 4.4vw, 54px), line-height 1.32, Navy, keine
   Sperrung. Der dort optionale 48×1px-Goldstrich ist hier bewusst
   weggelassen — die Sektion hat durch den gesetzten `intro`-Text bereits
   einen eigenen .section-title__divider (60×2px, zentriert, aus
   section-title.css); eine zweite Linie direkt darunter hätte gedoppelt
   gewirkt statt zurückhaltend. */
#team .section-title {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.32;
  letter-spacing: 0;
  color: var(--color-navy);
}

.team-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 82px;
}

.team-section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--transition-fast);
}

/* Letzte Karte je Zeile (3 Spalten) — keine rechte Haarlinie */
.team-section-grid .team-section-card:nth-child(3n) {
  border-right: none;
}

/* Seitenverhältnis fest auf 555:600 (≈37:40) — das Format der kleinsten
   Quelldatei (miguel-miranda-card.png, 555×600px). Mit object-fit: cover
   bekommen alle sechs Karten dieselbe Bildhöhe, unabhängig vom Ausgangsformat
   der jeweiligen Trainerdatei (768×697, 800×800, 1024×1024, 1080×1080,
   2560×1707 …). Kein festes px-Maß, damit nichts unnötig hochskaliert wird,
   solange die Spaltenbreite unter 555px bleibt (siehe Grid-Spalten unten). */
.team-section-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 555 / 600;
  background: var(--surface-mist);
}

.team-section-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.6s ease;
}

/* Hover-Zoom entfernt am 2026-07-30: die Karte ist seit dem Entlinken kein
   <a> mehr (Kundenauftrag „Profil ansehen komplett raus"). Eine Fläche, die
   auf Hover reagiert, aber nichts tut, liest sich als kaputter Link. Beim
   Reaktivieren der Profilseiten kommt der Zoom zusammen mit dem <a> zurück. */

/* Zustand ohne Portrait — hasPortrait: false (trainers.11tydata.js).
   Kein kaputtes <img>, sondern eine ruhige Platzhalterfläche mit Silhouette. */
.team-section-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-section-card__image--placeholder svg {
  width: 25%;
  height: 25%;
  fill: var(--grey);
}

.team-section-card__body {
  padding: 44px 34px 48px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Rolle — Gold und klassisch (Cormorant Infant italic), zehnte sanktionierte
   Serifenstelle.

   ÄNDERUNG 2026-07-30, Kundenentscheidung: „Gründer · Haupttrainer · Dozent
   — bei Trainern bitte in Gold und klassisch genau wie die anderen auch."
   Damit ist die frühere Festlegung aus F-45 (bewusst Inter 300, grau)
   überholt. Der Kunde ist die Brand-Instanz; die Liste in brand.md §3
   („Wo die Serife erscheint") wurde entsprechend von neun auf zehn Stellen
   erweitert — ohne diesen Eintrag wäre die Regel gebrochen.

   min-height auf zwei Zeilen bleibt: Jannes Rolle („Trainer für Kommunikation
   und Konfliktmanagement") läuft zweizeilig und schob dadurch nur seinen
   Namen nach unten, während die übrigen Karten die Rolle einzeilig haben.
   Mit fester Mindesthöhe sitzen alle Namen auf derselben Grundlinie. */
.team-section-card__role {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-gold);
  margin: 0 0 14px;
  min-height: 2.8em;
}

.team-section-card__name {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 25px;
  line-height: 1.28;
  letter-spacing: 0.008em;
  color: var(--color-navy);
  margin: 0 0 16px;
  transition: color var(--transition-fast);
}

/* dito — kein Gold-Hover auf dem Namen mehr, siehe Notiz beim Bild-Zoom */

.team-section-card__excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.85;
  font-size: 14.5px;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tablet landscape (≤991px) — 3 Spalten → 2 Spalten; die "letzte Karte je
   Zeile" wandert von jeder 3. auf jede 2. Karte. Gleiche Logik wie
   seminar-card.css. */
@media (max-width: 991px) {
  .team-section-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-section-grid .team-section-card:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .team-section-grid .team-section-card:nth-child(2n) {
    border-right: none;
  }
}

/* Tablet portrait (≤768px) — bleibt bewusst bei 2 Spalten (siehe ≤991px-
   Regel oben) statt hier wie bei .seminar-grid auf 1 Spalte zu stapeln.
   Eine Spalte bei 768px war die Ursache der überlangen Sektion (738×923px
   Riesenbilder, sechsmal untereinander) — zwei Spalten halbieren Bildbreite
   und -höhe. Keine eigene Innenabstand-Regel nötig: der Standardwert
   44px/34px/48px aus .team-section-card__body passt für 2 wie für 3
   Spalten gleichermaßen (identisch zu seminar-card.css, das im ≥769px-
   Bereich ebenfalls keine Sonderregel für 2 Spalten hat). */

/* Mobile (≤575px) — erst hier auf 1 Spalte umschalten; rechte Haarlinie
   wird zur unteren Trennlinie zwischen gestapelten Karten. Padding-Werte
   identisch zum ≤768px-Fall von seminar-card.css (gleiches Vokabular).

   Bei 1 Spalte ist jede Karte auf voller Viewport-Breite ~360px breit; mit
   dem festen 555:600-Seitenverhältnis wird jedes Bild dadurch ~390px hoch —
   sechsmal untereinander plus Textblock sprengte ohne Gegenmaßnahme das
   4000px-Ziel (gemessen: 4763px). Die Kürzung greift ausschließlich bei den
   Textabständen und dem Exzerpt, NICHT beim Bild — das Seitenverhältnis
   bleibt unverändert, es wird nichts hochskaliert. Die Mindesthöhe der
   Rollenzeile (Grundlinie für Name) wird hier aufgehoben, weil bei 1 Spalte
   keine Nachbarkarte in derselben Zeile mehr existiert, die eine gemeinsame
   Grundlinie bräuchte. */
@media (max-width: 575px) {
  .team-section-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .team-section-grid .team-section-card,
  .team-section-grid .team-section-card:nth-child(2n),
  .team-section-grid .team-section-card:nth-child(3n) {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .team-section-grid .team-section-card:last-child {
    border-bottom: none;
  }

  .team-section-card__body {
    padding: 18px 4px 20px;
  }

  .team-section-card__role {
    min-height: 0;
    margin-bottom: 6px;
  }

  .team-section-card__name {
    margin-bottom: 6px;
  }

  .team-section-card__excerpt {
    line-height: 1.55;
    -webkit-line-clamp: 2;
  }

}

/* Mobil (≤575px): Kürzung ganz aufheben.
   ------------------------------------------------------------------
   Bei zwei Zeilen auf voller Breite brach der Text mitten im Wort ab
   („… und Gründer des Miran…"), und weiterlesen kann niemand: Die
   Karte ist seit dem Entlinken der Profilseiten kein Link mehr
   (trainers.11tydata.js: permalink false). Eine Kürzung ohne Ziel ist
   eine Sackgasse — sie verspricht mehr Text und liefert keinen.

   Auf Desktop und Tablet bleibt die Kürzung: Dort stehen zwei bis drei
   Karten nebeneinander und sollen gleich hoch bleiben. Untereinander
   auf einer Spalte gibt es diese Zeile nicht mehr, die es zu wahren
   gälte.

   Kundenmeldung 2026-08-04: „Trainertexte und bilder werden teils
   ausgeblendet." */
@media (max-width: 575px) {
  .team-section-card__excerpt {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    line-height: 1.7;
  }

  /* Die Porträts sind Kopf-und-Schulter-Aufnahmen. `center 20%` schneidet
     bei diesem Seitenverhältnis den Scheitel ab — auf dem schmalen
     Bildschirm fällt das auf, weil die Karte über die volle Breite geht
     und der Kopf entsprechend groß erscheint. Oben ausgerichtet bleibt
     der Kopf vollständig; beschnitten wird stattdessen unten, wo bei
     diesen Aufnahmen nur Oberkörper steht. */
  .team-section-card__image img {
    object-position: center top;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */


/* ── assets/css/components/team-section.css ── */


/* ── assets/css/components/beratungsgespraech.css ── */
/* ============================================================
   BERATUNGSGESPRÄCH PAGE (/beratungsgespraech/) — Buchung des
   Erstgesprächs über den JotForm-Agenten, mit Zwei-Klick-DSGVO-
   Einwilligung analog zur ehemaligen Maps-Einbindung
   (docs/archiv/maps-sektion.md). Reuses .section / .section-title-block —
   nur die Einwilligungsfläche und der Direktlink-Fallback bekommen eigene
   Regeln hier.

   2026-07-30 — Neuaufbau: die Zwei-Klick-Consent-Regeln unten (Zeilen ab
   ".beratungsgespraech-page__consent") sind unverändert aus der Vorfassung
   übernommen, weil das Inline-Script im .njk diese Klassennamen direkt beim
   Bauen der Ersatz-Elemente referenziert (siehe Kommentare dort). Neu
   hinzugekommen sind ausschließlich die Regeln für die Kennzahlen-Leiste im
   Kopf, den Ablauf-Abstand, den Förderungs-Block und den Telefon-Fallback —
   klar als eigener Abschnitt weiter unten markiert.
   ============================================================ */

/* Haarlinie statt Rahmen-Kasten (Variante D §5 Regel 4) — gleiche
   Behandlung wie .beratung-page__booking-placeholder. */
.beratungsgespraech-page__consent {
  border: 1px solid var(--line);
  padding: 48px 40px;
  text-align: center;
  background-color: var(--color-white);
}

.beratungsgespraech-page__consent-inner {
  max-width: 560px;
  margin: 0 auto;
}

.beratungsgespraech-page__consent-label {
  margin-bottom: 16px;
}

.beratungsgespraech-page__consent-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text);
  max-width: 52ch;
  margin: 0 auto 28px;
}

.beratungsgespraech-page__consent-button {
  margin: 0 auto;
}

/* Sobald das iframe eingesetzt wurde, ersetzt main-content das komplette
   .beratungsgespraech-page__consent-Element durch .frame-wrap (siehe
   Inline-Script). Großzügige Mindesthöhe, responsiv auf kleineren
   Viewports reduziert.

   Der Rahmen behält die Haarlinie des Einwilligungskastens, damit die
   Fläche nach dem Klick nicht formlos wird, und liegt auf --color-faint
   statt auf Weiß: solange oder falls das Formular nichts zeichnet, sieht
   man einen ruhigen grauen Kasten mit Text — nicht die weiße Leere, die
   David am 2026-07-29 gemeldet hat. */
.beratungsgespraech-page__frame-wrap {
  position: relative;
  line-height: 0;
  border: 1px solid var(--line);
  background-color: var(--color-faint);
  min-height: 700px;
}

/* Steht IM Fluss über dem iframe, nicht dahinter. Ein iframe, dessen
   Einbettung der Anbieter verweigert, zeichnet eine eigene Fehlerseite und
   deckt alles ab, was hinter ihm liegt — ein dahinterliegender Hinweis wäre
   also genau dann unsichtbar, wenn man ihn braucht. */
.beratungsgespraech-page__frame-note {
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}

.beratungsgespraech-page__frame-note a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Notlösung, wenn jotform.com gar nicht erreichbar ist — erbt die Haarlinie
   und Innenabstände des Einwilligungskastens. */
.beratungsgespraech-page__frame-error {
  background-color: var(--color-faint);
}

.beratungsgespraech-page__iframe {
  position: relative;
  display: block;
  width: 100%;
  height: 760px;
  min-height: 700px;
  border: 0;
}

/* Direktlink-Fallback — immer sichtbar, unabhängig vom Einwilligungsstatus.
   Micro-CTA-Satz aus Variante D §5 "Karten". */
.beratungsgespraech-page__fallback {
  margin: var(--space-sm) 0 0;
  text-align: center;
}

.beratungsgespraech-page__fallback-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 5px;
  transition: color var(--transition-fast);
}

.beratungsgespraech-page__fallback-link:hover,
.beratungsgespraech-page__fallback-link:focus-visible {
  color: var(--color-gold);
}

/* "mind. 700px" gilt bewusst auf allen Breakpoints, auch mobil — das
   JotForm-Formular ist mehrschrittig/konversationell und scrollt intern;
   eine kleinere Fläche würde es auf kleinen Screens unbrauchbar stauchen. */
@media (max-width: 575px) {
  .beratungsgespraech-page__consent {
    padding: 32px 20px;
  }
}

/* ============================================================
   2026-07-30 — NEU: Kennzahlen-Leiste, Ablauf, Förderung, Telefon-Fallback
   Alles ab hier ist Teil des Neuaufbaus (siehe Kommentar oben im Datei-Kopf)
   und berührt keine der Zwei-Klick-Consent-Klassen oberhalb dieser Marke.
   ============================================================ */

/* Kennzahlen-Leiste im Kopf — Dauer / Kosten / Verbindlichkeit. Drei Spalten,
   durch Haarlinien in Weiß-Transparenz getrennt (Brand-Regel für Trenner auf
   dunklem Grund: rgba(255,255,255,.08–.2), siehe brand.md §2 "Usage rules").
   Bewusst kein Kartenrahmen/-hintergrund — folgt derselben Haarlinien-Logik
   wie .contact-info-grid, nur auf Navy statt auf Weiß. */
.beratungsgespraech-page__facts {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.beratungsgespraech-page__facts-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: var(--space-md);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.beratungsgespraech-page__facts-item:first-child {
  padding-left: 0;
  border-left: none;
}

.beratungsgespraech-page__facts-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.beratungsgespraech-page__facts-value {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 22px;
  color: var(--color-white);
}

@media (max-width: 575px) {
  /* Gestapelt wird aus der linken eine obere Haarlinie zwischen den
     Einträgen (gleiches Prinzip wie bei .seminar-grid, siehe brand.md §5
     "Haarlinien-Kartenprinzip") — eine stehende Linie vor gestapeltem Text
     läse sich sonst wie ein Zitat, nicht wie eine gleichwertige Kennzahl. */
  .beratungsgespraech-page__facts {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .beratungsgespraech-page__facts-item {
    padding-left: 0;
    padding-top: var(--space-sm);
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .beratungsgespraech-page__facts-item:first-child {
    padding-top: 0;
    border-top: none;
  }
}

/* Ablauf-Sektion — Prozessschritte etwas schmaler als der volle Container,
   damit die Zeilenlänge lesbar bleibt (analog zur ehemaligen
   .beratung-page__steps-Regel der archivierten /beratung/-Seite). */
.beratungsgespraech-page__steps {
  max-width: 640px;
  margin-top: var(--space-sm);
}

/* Förderungs-Block — Button und Telefon-Fallback bekommen Abstand zum
   vorangehenden Absatz. */
.beratungsgespraech-page__foerderung .btn {
  margin-top: var(--space-sm);
}

.beratungsgespraech-page__phone-fallback {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--color-text);
}

.beratungsgespraech-page__phone-fallback a {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  transition: color var(--transition-fast);
}

.beratungsgespraech-page__phone-fallback a:hover {
  color: var(--color-navy);
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */


/* ── assets/css/components/team-section.css ── */


/* ── assets/css/components/beratungsgespraech.css ── */


/* ── assets/css/components/cookie-consent.css ── */
/* ============================================================
   Cookie-Einwilligung (DSGVO) — Variante D
   Weiße Fläche mit Haarlinie oben statt Navy-Block/Overlay: der Banner
   blockiert die Seite nicht und bleibt zurückhaltend (Regel 4 + 5,
   docs/superpowers/specs/2026-07-26-variante-d-typografie.md).
   ============================================================ */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--color-white);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-hover);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 0.01s linear;
    transform: none;
  }
}

.cookie-banner__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px var(--space-md);
}

.cookie-banner__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cookie-banner__lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 62ch;
  margin: 0;
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Text-link style for "Einstellungen" — not a primary action */
.cookie-banner__link-btn {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cookie-banner__link-btn:hover,
.cookie-banner__link-btn:focus-visible {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.cookie-banner__btn {
  white-space: nowrap;
}

/* Ghost variant — .btn-outline (button.css) is built for dark backgrounds
   (white border/text), unusable here on a white banner. Navy-on-hairline
   instead. */
.cookie-banner__btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 35px;
  padding: 10px 32px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.cookie-banner__btn--ghost:hover,
.cookie-banner__btn--ghost:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ---- Settings panel ---- */

/* Explicit [hidden] override: an author-stylesheet `display` declaration on
   the same element always wins over the UA stylesheet's `[hidden] { display:
   none }` rule, regardless of selector specificity (origin precedes
   specificity in the cascade) — without this, the `display: grid` below
   would keep the panel visibly expanded even while the `hidden` attribute
   is set. Caught via Playwright bounding-box overlap check during manual
   verification (2026-07-29). */
.cookie-banner__panel[hidden] {
  display: none;
}

.cookie-banner__panel {
  max-width: 1240px;
  margin: 24px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-sm);
}

.cookie-banner__category {
  padding-bottom: var(--space-xs);
}

.cookie-banner__category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.cookie-banner__category-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 17px;
  color: var(--color-navy);
}

.cookie-banner__category-state {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-secondary);
}

.cookie-banner__category-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
  max-width: 62ch;
  margin: 8px 0 0;
}

/* Toggle switch for the "Externe Inhalte" category */
.cookie-banner__toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.cookie-banner__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.cookie-banner__toggle-track {
  position: relative;
  width: 38px;
  height: 20px;
  border: 1px solid var(--line);
  background: var(--surface-mist);
  border-radius: 999px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.cookie-banner__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-subtle);
  transition: transform var(--transition-fast);
}

.cookie-banner__toggle-input:checked + .cookie-banner__toggle-track {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.cookie-banner__toggle-input:checked + .cookie-banner__toggle-track .cookie-banner__toggle-thumb {
  transform: translateX(18px);
}

.cookie-banner__toggle-input:focus-visible + .cookie-banner__toggle-track {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.cookie-banner__save {
  justify-self: start;
}

@media (max-width: 767px) {
  .cookie-banner__inner {
    padding: 22px var(--space-sm);
  }

  .cookie-banner__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__btn,
  .cookie-banner__btn--ghost {
    flex: 1 1 auto;
  }
}

@media (max-width: 575px) {
  .cookie-banner__inner {
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */


/* ── assets/css/components/team-section.css ── */


/* ── assets/css/components/beratungsgespraech.css ── */


/* ── assets/css/components/cookie-consent.css ── */


/* ── assets/css/components/widgets.css ── */
/* ============================================================
   Widgets von Fremdanbietern, unten rechts.

   Wichtig zu wissen, bevor hier jemand etwas ändert: **Beide Widgets
   positionieren sich selbst.** Am 2026-07-31 nachgemessen:

     Kundennote  legt #knFront (140×210, eingeklappt) und #knBack
                 (300×440, aufgeklappt) an, beide `position: fixed`,
                 `right: 0`, `bottom: 100px`, z-index 2000.
     JotForm     hängt seine Schaltfläche selbst an den unteren rechten
                 Rand und bringt eigene Stapelwerte mit.

   Der Behälter `.mi-widgets` ist deshalb **kein Layout-Element**, sondern
   nur der Ort, an dem widgets.js die Skripte einhängt — nach der
   Einwilligung. Wer hier eine Anordnung erwartet, sucht an der falschen
   Stelle: Gesteuert wird über die tatsächlichen Kennungen der Anbieter.

   Angelegt 2026-07-31, siehe docs/specs/2026-07-31-grain-bilder-widgets.md
   ============================================================ */

:root {
  /* Wird von widgets.js gesetzt: gemessene Höhe des Cookie-Banners,
     solange er sichtbar ist. Sonst 0. */
  --mi-banner-hoehe: 0px;
  /* Abstand des Kundennote-Siegels vom unteren Rand. Es sitzt über dem
     Chatbot. Dessen Schaltfläche wurde am 2026-07-31 gemessen: 48 px hoch,
     16 px über dem Rand, endet also bei 64 px. 88 px lassen 24 px Luft. */
  --mi-siegel-unten: 88px;
}

/* Reiner Einhängepunkt — nimmt keinen Platz ein und fängt keine Klicks
   ab. Ohne das läge eine unsichtbare Fläche über der Seite. */
.mi-widgets {
  position: static;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Kundennote — über dem Chatbot, und beides weicht dem Cookie-Banner aus.

   `!important` ist hier nicht Bequemlichkeit: Das Widget setzt seine
   Position aus dem eigenen Stylesheet mit hoher Spezifität. Ohne den
   Nachdruck bliebe es am unteren Rand kleben und läge bei geöffneten
   Cookie-Einstellungen hinter dem Banner.
   ------------------------------------------------------------ */
/* Verschoben wird über `transform`, nicht über `bottom`.
   Am 2026-07-31 gemessen: `bottom` bleibt bei diesem Widget wirkungslos,
   `transform` greift (88 px → 208 px bei translateY(-120px)).

   Nur `#knFront`, die eingeklappte Plakette. `#knBack` trägt eine
   `matrix3d`-Transformation — die 180°-Drehung der Kartenumschlag-
   Animation. Würde sie überschrieben, stünde dauerhaft die Rückseite
   vorn. Die aufgeklappte Fassung erscheint ohnehin erst, wenn jemand die
   Plakette bewusst anfasst; ein Überschneiden ist dann hinnehmbar. */
/* Höhe (2026-08-01, Kundenauftrag): Das Siegel lag auf der
   Begrüßungsblase des Chatbots, die nach dem Laden 10–20 Sekunden lang
   erscheint. Es rückt deshalb auf die gedachte Drittellinie des Fensters
   — nicht auf einen festen Pixelwert, weil die Blase mit dem Fenster
   wächst.

   Gerechnet wird von der Grundposition des Anbieters aus (`bottom: 100px`):
   `translateY(calc(100px - X))` setzt die Unterkante genau auf X.

   Das `max(…, 240px)` ist eine Untergrenze für flache Fenster. Ohne sie
   stünde das Siegel auf einem 600 px hohen Bildschirm bei 204 px — also
   tiefer als vorher (210 px), und die Änderung hätte dort das Gegenteil
   bewirkt. */
#knFront {
  transform: translateY(calc(100px - max(34vh, 240px))) !important;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 575px) {
  /* Mobil steht der Chatbot allein unten rechts und die Plakette links —
     dort gibt es nichts zu umgehen. */
  #knFront {
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   Die Verschiebung bei sichtbarem Cookie-Banner steht NICHT hier, sondern
   in widgets.js als Inline-Stil.

   Am 2026-07-31 gemessen: Beide Anbieter bringen eigene Stylesheets mit,
   die nach unserem geladen werden. Regeln wie
   `#knFront { bottom: … !important }` blieben wirkungslos — nachgewiesen,
   indem die CSS-Variablen zur Laufzeit verändert wurden und sich am
   berechneten Wert nichts tat. Gegen fremden Code, der sich jederzeit
   ändern kann, ist ein Wettlauf um Spezifität die schlechtere Wette.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Mobil: Zwei Elemente übereinander belegen auf einem schmalen
   Bildschirm schnell die halbe Höhe.
   ------------------------------------------------------------ */
@media (max-width: 575px) {
  :root {
    --mi-siegel-unten: 88px;
  }

  /* Bewusst KEINE Ausrichtung nach rechts: Kundennote stellt sich auf
     schmalen Bildschirmen von sich aus nach links (bei 390 px gemessen:
     100×100 px, 10 px vom linken Rand) — offenkundig, um dem Chatbot
     unten rechts auszuweichen. Das erfüllt den Wunsch „beides sichtbar,
     auch auf dem Handy" besser als zwei Elemente übereinander auf
     390 px Breite. Nur die Höhe wird oben angepasst, damit der
     Cookie-Banner nichts verdeckt.

     Soll das Siegel auch mobil nach rechts, genügt hier
     `left: auto !important; right: 8px !important;` — dann liegt es
     allerdings über dem Chatbot. */
}

/* Wer Bewegung reduziert hat, bekommt den Sprung ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  /* widgets.js setzt die Übergänge als Inline-Stil; hier wird er
     zurückgenommen. */
  #knFront,
  #knBack,
  .embedded-agent-container {
    transition: none !important;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */


/* ── assets/css/components/team-section.css ── */


/* ── assets/css/components/beratungsgespraech.css ── */


/* ── assets/css/components/cookie-consent.css ── */


/* ── assets/css/components/widgets.css ── */

/* 2026-07-30: /foerderung/-Neubau, nur diese eine Zeile ergänzt. */

/* ── assets/css/components/foerderung.css ── */
/* ============================================================
   /foerderung/ — page-owned styles
   2026-07-30: Kompletter Neubau (siehe Kommentar in
   src/content/pages/foerderung.md). Nur Design-Tokens aus tokens.css,
   keine neuen Farben/Schriften, kein border-radius außer wo brand.md
   das ausdrücklich erlaubt (hier: nirgends benötigt).
   ============================================================ */

/* ------------------------------------------------------------
   Hero-Akzent (H1) — die einzige Cormorant-Infant-Stelle dieser Seite.
   brand.md §3 "Wo die Serife erscheint" dokumentiert genau diese H1
   ("Es gibt immer eine Lösung für alles") als eine der zehn sanktionierten
   Akzentstellen (vormals h2.content-page__accent auf der inzwischen
   gelöschten Vorgängerseite) — Werte 1:1 aus dem Dokument übernommen:
   Cormorant Infant italic 400, clamp(34px, 4.4vw, 54px), Navy,
   line-height 1.32, letter-spacing 0. Der Hero bleibt bewusst HELL
   (section--light in foerderung.md), weil die dokumentierte Farbe Navy
   ist und auf dunklem Grund (section--dark) unlesbar wäre.
   ------------------------------------------------------------ */
.foerderung-hero__accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 54px);
  color: var(--color-navy);
  line-height: 1.32;
  letter-spacing: 0;
  margin-bottom: var(--space-md);
}

/* Hero-CTA-Zeile: Button + kleiner Begleittext, kein zweiter Button
   ("Wir finden den Förderweg" ist reiner Text, siehe Auftrag). */
.foerderung-hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.foerderung-hero__cta-note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--color-text);
}

/* ------------------------------------------------------------
   Thematische H3 — EINE gemeinsame Klasse für alle vier Gruppen
   ("Für wen die Förderung passt", "So funktioniert's", "Förderpfade",
   "Clever kombinieren"), damit gleichrangige Überschriften garantiert
   identisch aussehen (Kern des Auftrags — der Kunde bemängelte genau
   das Gegenteil an der alten Fassung). Werte an process-step.css
   angelehnt (22px, Gewicht 300, Navy), hier neu für echte <h3>
   geschrieben statt das processStep()-Makro zu verwenden, das fest
   <h4> ausgibt.
   ------------------------------------------------------------ */
.foerderung-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  color: var(--color-navy);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-bottom: 10px;
}

.foerderung-card__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.85;
  margin: 0 0 var(--space-sm);
}

.foerderung-card__text:last-child {
  margin-bottom: 0;
}

/* "Wichtig:"-Hinweise (Clever kombinieren) bleiben Fließtext, nicht über
   Gewicht 500 (Variante D Regel 3) — Browser-Standard für <strong> wäre
   700, deshalb explizit auf 500 begrenzt. */
.foerderung-card__text strong {
  color: var(--color-navy);
  font-weight: 500;
}

/* Mini-CTA innerhalb der Förderpfade-Karten und der Schluss-Sektion —
   bewusst der kleine Text-Link statt des großen .btn (vier gleichlautende
   große Buttons nebeneinander wären zu viel Gewicht), reuse desselben
   Vokabulars wie die Micro-CTA auf den Seminar-Karten
   (seminar-card.css .seminar-card__cta, brand.md §5 "Karten") — nicht
   importiert, hier eigenständig für die Seite definiert. */
.foerderung-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 5px;
  margin-top: var(--space-sm);
  transition: color var(--transition-fast);
}

.foerderung-card__cta span {
  transition: transform var(--transition-fast);
  display: inline-block;
}

.foerderung-card__cta:hover {
  color: var(--color-gold);
}

.foerderung-card__cta:hover span {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Karten-Raster — Haarlinien-Prinzip (brand.md §5 "Haarlinien-
   Kartenprinzip", Referenzimplementierung seminar-card.css): kein
   Rahmen, kein Hintergrund, kein Schatten. Nur border-top auf dem Grid
   und border-right zwischen Karten, letzte Karte je Zeile ohne. Zwei
   eigenständige Varianten (3- und 4-spaltig) statt einer Basisklasse +
   Modifier, damit die :nth-child-Selektoren sich nicht gegenseitig
   überschreiben, wenn beide Klassen am selben Element hängen würden.
   ------------------------------------------------------------ */
.foerderung-cards--3,
.foerderung-cards--4 {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: var(--space-md);
}

.foerderung-cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.foerderung-cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

.foerderung-card {
  border-right: 1px solid var(--line);
  padding: var(--space-md);
}

.foerderung-cards--3 .foerderung-card:nth-child(3n) {
  border-right: none;
}

.foerderung-cards--4 .foerderung-card:nth-child(4n) {
  border-right: none;
}

/* Tablet landscape (≤991px) — beide Varianten fallen auf 2 Spalten;
   die rechte Randlinie wandert auf jede zweite Karte (gleiche Technik
   wie seminar-card.css). */
@media (max-width: 991px) {
  .foerderung-cards--3,
  .foerderung-cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2026-07-30 Fix (Verifikations-Fund): Das Wiederhinzufügen von
     border-right für nth-child(3n) galt hier fälschlich auch für
     .foerderung-cards--3. Das Vorbild seminar-card.css braucht diesen
     Schritt nur, weil sein Grid mehr als 3 Karten umfassen kann und sich
     die "letzte Spalte je Zeile" bei 2-spaltiger Ansicht verschiebt.
     .foerderung-cards--3 enthält aber IMMER genau drei Karten in einer
     Reihe: Karte 3 landet bei 2 Spalten allein in Zeile 2 und ist dort
     automatisch die letzte — sie braucht nie eine rechte Haarlinie. Die
     alte gemeinsame Regel hängte sie ihr trotzdem wieder an; wegen
     gleicher Selektor-Spezifität wie die spätere :nth-child(2n)-Regel
     (die nur Position 2 zurücksetzt) blieb die Linie an Karte 3 hängen —
     sichtbar bei 991px UND (aus demselben Spezifitätsgrund) noch bei
     ≤768px, wo sie die eigentlich vorgesehene border-right:none-
     Zurücksetzung der Ein-Spalten-Regel überstimmte. Nur
     .foerderung-cards--4 braucht die Wiederherstellung: bei 2×2 hat
     Karte 3 dort noch Karte 4 neben sich und steht nicht allein. */
  .foerderung-cards--4 .foerderung-card:nth-child(4n) {
    border-right: 1px solid var(--line);
  }

  .foerderung-cards--3 .foerderung-card:nth-child(2n),
  .foerderung-cards--4 .foerderung-card:nth-child(2n) {
    border-right: none;
  }
}

/* Tablet portrait (≤768px) — 1 Spalte, aus der rechten wird eine untere
   Haarlinie zwischen den gestapelten Karten, letzte Karte ohne. */
@media (max-width: 768px) {
  .foerderung-cards--3,
  .foerderung-cards--4 {
    grid-template-columns: 1fr;
  }

  .foerderung-cards--3 .foerderung-card,
  .foerderung-cards--4 .foerderung-card {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: var(--space-sm) 0;
  }

  .foerderung-cards--3 .foerderung-card:last-child,
  .foerderung-cards--4 .foerderung-card:last-child {
    border-bottom: none;
  }
}

/* ------------------------------------------------------------
   "Sagen Sie uns, worum es geht." — Kontaktkarte auf sinnvoller
   Lesebreite statt volle Containerbreite (content-medium = 960px aus
   layout.css, kein neues Utility nötig).
   ------------------------------------------------------------ */
.foerderung-contact {
  margin-top: var(--space-lg);
}

/* FAQ-Accordion (Section 8): base.css entstylt <ul>/<ol> global
   (list-style: none) — für den einen Listeneintrag "Finanzierung für
   Privatpersonen" gezielt innerhalb des Accordion-Inhalts reaktiviert,
   statt accordion.css (Fremdkomponente) anzufassen. */
.foerderung-page .accordion__content ul {
  list-style: disc;
  margin: 0 0 0 1.2em;
}

.foerderung-page .accordion__content li {
  margin-bottom: 8px;
}

.foerderung-page .accordion__content li:last-child {
  margin-bottom: 0;
}

.foerderung-page .accordion__content p {
  margin: 0 0 12px;
}

.foerderung-page .accordion__content p:last-child {
  margin-bottom: 0;
}

/* <strong> innerhalb der FAQ-Antworten (z. B. "BILDUNGSGUTSCHEIN") auf
   Gewicht 500 begrenzt (Variante D Regel 3) — Browser-Standard wäre 700,
   accordion.css setzt dafür keinen eigenen Wert. */
.foerderung-page .accordion__content strong {
  color: var(--color-navy);
  font-weight: 500;
}

/* ------------------------------------------------------------
   "Quellen und Rechtsgrundlage" (Section 10) — bewusst kompakter und
   dezenter als die übrigen Sektionen: ein rechtlicher Anhang, kein
   Marketing-Abschnitt. Engerer max-width, kleinere Fließtextgröße.
   ------------------------------------------------------------ */
.foerderung-sources__body {
  max-width: 640px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-text);
}

/* Mobil zurück auf die Fließtextgröße aus brand.md (14,5 px).
   Die 13,5 px oben sind Absicht — ein rechtlicher Anhang soll dezenter
   wirken als der Rest. Auf 390 px Breite ist „dezent" aber nur noch
   schwer lesbar, und brand.md nennt 14,5 px ausdrücklich als
   Fließtextgröße für Mobilgeräte. Der Unterschied zu den übrigen
   Sektionen bleibt über Zeilenhöhe, Laufweite und Farbe erhalten.
   Gefunden bei der Mobilprüfung am 2026-08-04. */
@media (max-width: 575px) {
  .foerderung-sources__body {
    font-size: 14.5px;
  }
}

.foerderung-sources__group {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-md) 0 var(--space-xs);
}

.foerderung-sources__group:first-child {
  margin-top: 0;
}

.foerderung-sources__body ul {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
}

.foerderung-sources__body li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
}

.foerderung-sources__body li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-gold);
}

.foerderung-sources__body a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.foerderung-sources__body a:hover {
  color: var(--color-gold);
}

.foerderung-sources__body p {
  margin: 0 0 var(--space-sm);
}

.foerderung-sources__note {
  font-style: italic;
}

.foerderung-sources__stand {
  margin-bottom: 0;
  color: var(--grey-secondary);
}

@media (max-width: 575px) {
  .foerderung-hero__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */


/* ── assets/css/components/team-section.css ── */


/* ── assets/css/components/beratungsgespraech.css ── */


/* ── assets/css/components/cookie-consent.css ── */


/* ── assets/css/components/widgets.css ── */

/* 2026-07-30: /foerderung/-Neubau, nur diese eine Zeile ergänzt. */

/* ── assets/css/components/foerderung.css ── */


/* ── assets/css/components/ueber-uns.css ── */
/* ============================================================
   /ueber-uns/ — Seiten-eigenes CSS, 2026-07-30, David/Techfield.
   Neuaufbau nach Kundenauftrag (siehe brand.md, Erweiterung
   2026-07-29 "Formatierungsaudit und Neuaufbau /ueber-uns/"). Alle
   Regeln hier sind auf ".up-page" bzw. auf Section-IDs ("#up-team" etc.)
   gescoped, um sitweite Komponenten (section-title.css, about-images.css,
   button.css) nicht anzufassen — genau wie team-section.css es für die
   Startseite tut.

   Hinweis zu brand.md §3: die dortige Tabelle "Wo die Serife erscheint"
   nennt für diese Seite die Datei "ueber-uns-page.css" und den Selektor
   "#up-team .section-title". Der Auftrag für diesen Bau schreibt jedoch
   ausdrücklich den Dateinamen "ueber-uns.css" vor. Der Selektor
   "#up-team .section-title" ist trotzdem 1:1 übernommen (identische ID,
   identische Werte) — nur der Dateiname weicht von der brand.md-Notiz ab.
   Siehe Bericht.
   ============================================================ */

/* ------------------------------------------------------------
   1. INTRO — H1 nutzt die geteilte .section-title-Klasse (Werte aus
   section-title.css), keine eigene Regel nötig. Nur der Absatzabstand
   zur Bild-Spalte oben ist Seiten-spezifisch (about-images.css deckt
   .about-desc bereits ab).
   ------------------------------------------------------------ */

#up-intro .about-content .section-title-block {
  margin-bottom: var(--space-sm);
}

/* ------------------------------------------------------------
   2. TEAM-ÜBERSCHRIFT — sanktionierte Serifenstelle (brand.md §3,
   "Wo die Serife erscheint", Erweiterung 2026-07-29). Werte 1:1 von
   #team .section-title (Startseite, team-section.css) übernommen —
   gleiches klassisches Register, nicht neu erfunden. .section-title ist
   sitweit geteilt (section-title.njk-Makro), deshalb hier bewusst über
   die Section-ID gescoped statt in section-title.css einzugreifen.
   ------------------------------------------------------------ */
/* 2026-07-30, Kundenauftrag „Team-Überschrift angleichen": Die Größe war
   von der Startseite übernommen (clamp bis 54px) und stand damit neben
   zwei anderen H2 derselben Seite, die bei 50px liegen. Gleiche Ebene,
   zwei Erscheinungsbilder — genau der Bruch, den der Kunde auf
   /foerderung/ bemängelt hatte. Die Serife bleibt (sanktionierte Stelle
   laut brand.md §3), nur die Größe folgt jetzt den übrigen H2, damit die
   Rangfolge lesbar bleibt. */
#up-team .section-title {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.32;
  letter-spacing: 0;
  color: var(--color-navy);
}

/* ------------------------------------------------------------
   TEAM-KARTENRASTER — Haarlinien-Prinzip (Variante D §5), Vorlage:
   seminar-card.css / team-section.css. 3 Spalten Desktop → 2 Spalten
   ≤991px → 1 Spalte ≤575px. Eigener Namensraum ".up-team-*", damit
   nichts mit .team-card / .team-section-card / .svab-team-card
   kollidiert (die gehören anderen Seiten).
   ------------------------------------------------------------ */
.up-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 82px;
}

.up-team-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid var(--line);
}

.up-team-grid .up-team-card:nth-child(3n) {
  border-right: none;
}

.up-team-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 555 / 600;
  background: var(--surface-mist);
}

.up-team-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Zustand ohne Portrait (Marie-Luisa Brückmann, Janne Ott) — ruhige
   Platzhalterfläche mit Silhouette statt kaputtem <img>. Gleiche
   Zeichnung wie team-section-card__image--placeholder (Startseite). */
.up-team-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.up-team-card__image--placeholder svg {
  width: 25%;
  height: 25%;
  fill: var(--grey);
}

.up-team-card__body {
  padding: 44px 34px 48px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Rolle — analog zur Testimonial-Attribution (brand.md §3): Inter,
   uppercase, gesperrt, gedämpftes Grau. Bewusst NICHT die Serifenschrift
   (die ist ausschließlich der Sektionsüberschrift oben vorbehalten). */
.up-team-card__role {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--grey-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
}

.up-team-card__name {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 25px;
  line-height: 1.28;
  letter-spacing: 0.008em;
  color: var(--color-navy);
  margin: 0 0 16px;
}

.up-team-card__bio {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.85;
  font-size: 14.5px;
  margin: 0;
  flex: 1;
}

@media (max-width: 991px) {
  .up-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .up-team-grid .up-team-card:nth-child(3n) {
    border-right: 1px solid var(--line);
  }
  .up-team-grid .up-team-card:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 575px) {
  .up-team-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
  .up-team-grid .up-team-card,
  .up-team-grid .up-team-card:nth-child(2n),
  .up-team-grid .up-team-card:nth-child(3n) {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .up-team-grid .up-team-card:last-child {
    border-bottom: none;
  }
  .up-team-card__body {
    padding: 24px 4px 28px;
  }
}

/* ------------------------------------------------------------
   3. VIER LEITPRINZIPIEN — 4-spaltiges Haarlinien-Raster, gleiche
   Konvention wie .up-team-grid, nur ohne Bild (reiner Text-Block).
   ------------------------------------------------------------ */
.up-principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 60px;
}

.up-principle {
  padding: 36px 32px 8px 0;
  border-right: 1px solid var(--line);
}

.up-principles-grid .up-principle:nth-child(4n) {
  border-right: none;
  padding-right: 0;
}

.up-principles-grid .up-principle:not(:nth-child(4n+1)) {
  padding-left: 32px;
}

.up-principle__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.28;
  color: var(--color-navy);
  margin: 0 0 12px;
}

.up-principle__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 991px) {
  .up-principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .up-principles-grid .up-principle:nth-child(4n) {
    border-right: 1px solid var(--line);
    padding-right: 32px;
  }
  .up-principles-grid .up-principle:nth-child(2n) {
    border-right: none;
    padding-right: 0;
  }
  .up-principles-grid .up-principle:nth-child(odd) {
    padding-left: 0;
  }
  .up-principles-grid .up-principle:nth-child(even) {
    padding-left: 32px;
  }
}

@media (max-width: 575px) {
  .up-principles-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }
  .up-principle,
  .up-principles-grid .up-principle:nth-child(4n),
  .up-principles-grid .up-principle:nth-child(2n) {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
  }
  .up-principles-grid .up-principle:last-child {
    border-bottom: none;
  }
}

/* ------------------------------------------------------------
   4. KARRIERE — dunkler Abschluss. .section--dark (layout.css) liefert
   bereits weiße Überschriften und 80%-weiße Absätze; hier nur die
   Vorteils-Liste, den Schluss-Absatz und den Hinweistext.
   ------------------------------------------------------------ */
.up-closing .section-title-block {
  margin-bottom: 0;
}

/* Vorteils-Liste — gleiches Haarlinien-Vokabular wie
   .seminar-card__usp::before / .wt-checklist li::before (20×1px
   Goldlinie statt Icon-Box), hier eigenständig für den dunklen
   Hintergrund nachgebaut. */
.up-benefits {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  list-style: none;
  margin: var(--space-md) auto;
  padding: 0;
  width: max-content;
  max-width: 100%;
}

.up-benefits li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  text-align: left;
}

.up-benefits li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 1px;
  background: var(--color-gold);
}

.up-closing__text {
  max-width: 52ch;
  margin: 0 auto var(--space-md);
}

.up-closing__cta {
  margin-bottom: var(--space-sm);
}

.up-closing__note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}

@media (max-width: 575px) {
  .up-benefits {
    width: auto;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */


/* ── assets/css/components/team-section.css ── */


/* ── assets/css/components/beratungsgespraech.css ── */


/* ── assets/css/components/cookie-consent.css ── */


/* ── assets/css/components/widgets.css ── */

/* 2026-07-30: /foerderung/-Neubau, nur diese eine Zeile ergänzt. */

/* ── assets/css/components/foerderung.css ── */


/* ── assets/css/components/ueber-uns.css ── */


/* ── assets/css/components/wissensbereich.css ── */
/*
  /wissensbereich/ — Seiteneigene Styles.
  Alle Selektoren unter .wissensbereich-page verschachtelt, damit die Karten-
  klassen (.wb-card, .wb-grid) keine globale Wirkung auf andere Seiten haben
  (Qualitätsvorgabe: "CSS ist auf die Komponente skaliert, keine globalen
  Seiteneffekte"). 2026-07-30
*/

/* ── Karten-Grid — Haarlinien-Prinzip ──────────────────────────────
   Vorbild: seminar-card.css (brand.md §5 "Karten" — verbindlich, NICHT
   feature-card.css/blog-card.css, die dort als offener Mangel geführt
   werden). Kein Kartenrahmen, kein Hintergrund, kein Schatten — Karten
   werden ausschließlich durch 1px-Haarlinien getrennt. 2026-07-30 */
.wissensbereich-page .wb-grid {
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: var(--space-md);
}

.wissensbereich-page .wb-card {
  background: transparent;
  border-radius: 0;
  border-right: 1px solid var(--line);
  padding: 44px 34px 48px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Letzte Spalte je Zeile (3er-Raster) ohne rechte Haarlinie */
.wissensbereich-page .wb-grid .wb-card:nth-child(3n) {
  border-right: none;
}

/* Unterschied zu seminar-card.css: die 10 Tool-Karten (3+3+3+1) sind NICHT
   durch 3 teilbar — ohne diese Regel hätte die 10. Karte (allein in Zeile 4)
   eine rechte Haarlinie ohne Nachbarn. Bei den 3 Kursen unten ist das
   redundant (nth-child(3n) deckt die letzte Karte dort bereits ab), schadet
   aber nicht — hier zur Konsistenz ebenfalls gesetzt. 2026-07-30 */
.wissensbereich-page .wb-grid .wb-card:last-child {
  border-right: none;
}

.wissensbereich-page .wb-card__title {
  /* Jost 300 — KEINE Cormorant-Serife (var(--font-accent)): laut brand.md §3
     ist der kursive Serifen-Akzent auf zehn abschließend gelistete Stellen
     begrenzt, keine davon liegt auf dieser Seite. 2026-07-30 */
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.008em;
  color: var(--color-navy);
  margin: 0 0 14px;
}

.wissensbereich-page .wb-card__text {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.85;
  font-size: 14.5px;
  margin: 0;
  flex: 1;
}

/* Micro-CTA — identisch zu .seminar-card__cta (brand.md §5) */
.wissensbereich-page .wb-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 5px;
  margin-top: 20px;
  transition: color var(--transition-fast);
  align-self: flex-start;
}

.wissensbereich-page .wb-card__cta span {
  transition: transform var(--transition-fast);
  display: inline-block;
}

.wissensbereich-page .wb-card__cta:hover {
  color: var(--color-gold);
}

.wissensbereich-page .wb-card__cta:hover span {
  transform: translateX(4px);
}

/* ── Kursbild (Abschnitt B) ─────────────────────────────────────── */
.wissensbereich-page__hero-image {
  margin: var(--space-lg) 0;
}

.wissensbereich-page__hero-image img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 0; /* kein Radius außer Icon/Avatar — hier keins */
}

/* ── Responsive — Tablet Landscape (≤991px): .grid--3 wird 2-spaltig ──
   Analog seminar-card.css: Position der "keine rechte Haarlinie"-Regel
   wandert von jeder 3. auf jede 2. Karte. */
@media (max-width: 991px) {
  .wissensbereich-page .wb-grid .wb-card:nth-child(3n) {
    border-right: 1px solid var(--line);
  }
  .wissensbereich-page .wb-grid .wb-card:nth-child(2n) {
    border-right: none;
  }
  .wissensbereich-page .wb-grid .wb-card:last-child {
    border-right: none;
  }

  .wissensbereich-page__hero-image img {
    height: 300px;
  }
}

/* ── Responsive — Tablet Portrait (≤768px): .grid--3 wird 1-spaltig ──
   Aus rechter wird untere Haarlinie zwischen gestapelten Karten. */
@media (max-width: 768px) {
  .wissensbereich-page .wb-grid .wb-card,
  .wissensbereich-page .wb-grid .wb-card:nth-child(2n),
  .wissensbereich-page .wb-grid .wb-card:nth-child(3n) {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .wissensbereich-page .wb-grid .wb-card:last-child {
    border-bottom: none;
  }
  .wissensbereich-page .wb-card {
    padding: 32px 4px 36px;
  }

  .wissensbereich-page__hero-image img {
    height: 240px;
  }
}

@media (max-width: 575px) {
  .wissensbereich-page .wb-card {
    padding: 28px 4px 32px;
  }
}

/* ── assets/css/tokens.css ── */


/* ── assets/css/base.css ── */


/* ── assets/css/layout.css ── */


/* ── assets/css/components/button.css ── */


/* ── assets/css/components/section-title.css ── */


/* ── assets/css/components/header.css ── */


/* ── assets/css/components/hero.css ── */


/* ── assets/css/components/hero-video.css ── */


/* ── assets/css/components/hero-still.css ── */


/* ── assets/css/components/logo-ticker.css ── */


/* ── assets/css/components/mobile-nav.css ── */


/* ── assets/css/components/feature-card.css ── */


/* ── assets/css/components/about-images.css ── */


/* ── assets/css/components/seminar-item.css ── */


/* ── assets/css/components/seminar-card.css ── */


/* ── assets/css/components/outcome-band.css ── */


/* ── assets/css/components/seminar-filter.css ── */


/* ── assets/css/components/next-dates.css ── */


/* ── assets/css/components/next-dates-filter.css ── */


/* ── assets/css/components/testimonials-rotator.css ── */


/* ── assets/css/components/stat-counter.css ── */


/* ── assets/css/components/warum.css ── */


/* ── assets/css/components/warum-test.css ── */


/* ── assets/css/components/team-card.css ── */


/* ── assets/css/components/testimonial-card.css ── */


/* ── assets/css/components/blog-card.css ── */


/* ── assets/css/components/process-step.css ── */


/* ── assets/css/components/contact-card.css ── */


/* ── assets/css/components/logo-grid.css ── */


/* ── assets/css/components/newsletter-form.css ── */


/* ── assets/css/components/cta-banner.css ── */


/* ── assets/css/components/footer.css ── */


/* ── assets/css/components/carousel.css ── */


/* ── assets/css/components/accordion.css ── */


/* ── assets/css/components/tabs.css ── */


/* ── assets/css/components/breadcrumb.css ── */


/* ── assets/css/components/archive-card.css ── */


/* ── assets/css/components/sidebar.css ── */


/* ── assets/css/components/event-card.css ── */


/* ── assets/css/components/social-share.css ── */


/* ── assets/css/components/entwicklungskit-card.css ── */


/* ── assets/css/components/workshop-hero.css ── */


/* ── assets/css/components/prose.css ── */


/* ── assets/css/components/case-study-header.css ── */


/* ── assets/css/components/seminar-page.css ── */


/* ── assets/css/components/seminar-page-v2.css ── */


/* ── assets/css/components/seminar-page-v3.css ── */


/* ── assets/css/components/pricing-card.css ── */


/* ── assets/css/components/trainer-card.css ── */


/* ── assets/css/components/sidebar-cta.css ── */


/* ── assets/css/components/related-seminars.css ── */


/* ── assets/css/components/sidebar-features.css ── */


/* ── assets/css/components/schwerpunkte-nav.css ── */


/* ── assets/css/components/image-carousel.css ── */


/* ── assets/css/components/legal-page.css ── */


/* ── assets/css/components/blog-post-page.css ── */


/* ── assets/css/components/blog-hub-page.css ── */


/* ── assets/css/components/trainer-profile-page.css ── */


/* ── assets/css/components/case-study-page.css ── */


/* ── assets/css/components/case-study-listing.css ── */


/* ── assets/css/components/schwerpunkte-listing.css ── */


/* ── assets/css/components/veranstaltungen-page.css ── */


/* ── assets/css/components/team-page.css ── */


/* ── assets/css/components/founder-page.css ── */


/* ── assets/css/components/workshop-page.css ── */


/* ── assets/css/components/entwicklungskit-page.css ── */


/* ── assets/css/components/about-pages.css ── */


/* ── assets/css/components/weiterbildungen-page.css ── */


/* ── assets/css/components/beratung-page.css ── */


/* ── assets/css/components/team-section.css ── */


/* ── assets/css/components/beratungsgespraech.css ── */


/* ── assets/css/components/cookie-consent.css ── */


/* ── assets/css/components/widgets.css ── */

/* 2026-07-30: /foerderung/-Neubau, nur diese eine Zeile ergänzt. */

/* ── assets/css/components/foerderung.css ── */


/* ── assets/css/components/ueber-uns.css ── */


/* ── assets/css/components/wissensbereich.css ── */