/*
Theme Name: theknaps
Theme URI: https://theknaps.com
Author: the knaps gmbh · TrueNode
Author URI: https://truenode.co
Description: Modernes, datei-basiertes Block-Theme (FSE) für theknaps.com — People. Transform. Businesses. Prototyp (Deutsch-only, ohne Drittanbieter-Plugins). v0.5: Kundenfeedback 08/2026 eingearbeitet — keine Farbverläufe mehr, stattdessen flache Markenfarben mit einem Akzent pro Sektion und dem achtfarbigen Markenband; Logo-Animation im Split-Hero; vollständige Angebotsübersicht nebeneinander mit Klick-Detail; L&D-Karten ohne Flip; farbige Teamfotos; Cases bei den Kundenreferenzen. Diffbar und per CLI/Agent editierbar.
Version: 0.5.27
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theknaps
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, featured-images, translation-ready
*/

/* ==========================================================================
   WordPress-Integration (Skip-Link, Admin-Bar, No-JS-Sicherheit)
   ========================================================================== */

/* Skip-Link: visuell versteckt, sichtbar bei Fokus */
.tk-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 200;
  background: #2800ff;
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 12px 0;
  font-weight: 700;
  text-decoration: none;
}
.tk-skip-link:focus { left: 0; top: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Eingeloggt: fixed Header unter die Admin-Bar schieben */
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

/* ==========================================================================
   the knaps — modern redesign
   Design tokens & base
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Brand — FLACHE VOLLFARBEN. Kein Farbverlauf (PO/Kundenfeedback 08/2026:
     „Bitte keinen Farbverlauf verwenden"). Die Marke lebt von gesättigten
     Farbflächen nebeneinander (K-Kachelband), nicht von Blends.

     Jede Farbe existiert zweimal:
       --<farbe>       Vollton für FLÄCHEN (Kacheln, Bänder, Karten)
       --<farbe>-ink   abgedunkelter Zwilling für TEXT auf Hell (≥ 4.5:1
                       auf #fff, #f7f8fc und #e6eaf2 — nachgerechnet)
     -------------------------------------------------------------------- */
  --blue: #2800ff;          /* Text auf Hell: 8.3:1 — braucht keinen Zwilling */
  --blue-strong: #1d00b8;
  --blue-soft: #495fff;
  --violet: #8c1eff;
  --violet-ink: #7000d6;
  --pink: #ff1e6e;
  --pink-ink: #c9004f;
  --pink-deep: #b8004a;     /* Magenta-Fläche, die weißen Text trägt (6.7:1) */
  --cyan: #00e5ff;
  --cyan-mid: #00919f;      /* Hover-Text auf hellen Buttonflächen: 3,8:1 auf
                               #fff und deutlich als Türkis erkennbar.
                               --cyan-ink war dort zu dunkel und wurde als Grau
                               gelesen (Kundenfeedback 09/2026, Newsletter). */
  --cyan-ink: #00707f;
  --green: #00d46a;
  --green-ink: #00713c;
  --orange: #ffa500;
  --orange-ink: #b03d00;  /* Textzwilling: gebranntes Orange, 5.0-6.0:1 */
  --yellow: #ffee82;

  /* --------------------------------------------------------------------
     Sektions-Akzent. „Farbe pro Sektion": jede Sektion setzt über eine
     .acc-*-Klasse genau vier Tokens, alle Komponenten lesen NUR diese —
     dadurch ist innerhalb einer Sektion die Farbe garantiert konsistent.
       --accent        Vollton (Flächen, Linien, Ringe)
       --accent-ink    Textfarbe auf hellem Grund
       --accent-on     Textfarbe AUF dem Vollton
       --accent-hover  Textfarbe beim Button-Hover — das Türkis, das auf
                       dem Vollton lesbar ist
     -------------------------------------------------------------------- */
  --accent: var(--blue);
  --accent-ink: var(--blue);
  --accent-on: #ffffff;
  --accent-hover: var(--cyan);

  /* Neutrals */
  --ink: #07070f;
  --ink-2: #12121f;
  --ink-3: #1c1c2e;
  --paper: #f7f8fc;
  --mist: #e6eaf2;
  --grey: #505a64;
  --grey-2: #828c96;
  --line: rgba(7, 7, 15, 0.08);
  --line-light: rgba(255, 255, 255, 0.12);

  /* Markenband: acht Vollfarben mit harten Kanten (kein Blend) */
  --brand-band:
    linear-gradient(90deg,
      var(--pink)   0%,    var(--pink)   12.5%,
      var(--violet) 12.5%, var(--violet) 25%,
      var(--blue)   25%,   var(--blue)   37.5%,
      var(--cyan)   37.5%, var(--cyan)   50%,
      var(--green)  50%,   var(--green)  62.5%,
      var(--yellow) 62.5%, var(--yellow) 75%,
      var(--orange) 75%,   var(--orange) 87.5%,
      var(--ink)    87.5%, var(--ink)    100%);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(2.6rem, 7.2vw, 5.6rem);
  --fs-h2: clamp(2rem, 4.6vw, 3.4rem);
  --fs-h3: clamp(1.5rem, 2.8vw, 2.1rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);

  /* Layout */
  --max: 1400px;   /* Header und Body laufen auf derselben Breite */
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 10px 40px -12px rgba(7, 7, 15, 0.14);
  --shadow-lg: 0 30px 80px -20px rgba(20, 24, 48, 0.22);

  --nav-h: 76px;
}

/* --------------------------------------------------------------------------
   Sektions-Akzente. Auf <section> (oder einen Wrapper) setzen — alles darin
   erbt Vollton, Textfarbe und Gegenfarbe. Vollton-Flächen tragen entweder
   Weiß (Blau/Violett/Magenta-deep) oder Ink (Cyan/Grün/Orange/Gelb), je
   nachdem, was AA erreicht.
   -------------------------------------------------------------------------- */
.acc-blue   { --accent: var(--blue);      --accent-ink: var(--blue);       --accent-on: #ffffff;    --accent-hover: var(--cyan); }
.acc-violet { --accent: var(--violet);    --accent-ink: var(--violet-ink); --accent-on: #ffffff;    --accent-hover: var(--cyan); }
.acc-pink   { --accent: var(--pink);      --accent-ink: var(--pink-ink);   --accent-on: var(--ink); --accent-hover: var(--cyan-ink); }
.acc-magenta{ --accent: var(--pink-deep); --accent-ink: var(--pink-ink);   --accent-on: #ffffff;    --accent-hover: var(--cyan); }
.acc-cyan   { --accent: var(--cyan);      --accent-ink: var(--cyan-ink);   --accent-on: var(--ink); --accent-hover: var(--blue); }
.acc-green  { --accent: var(--green);     --accent-ink: var(--green-ink);  --accent-on: var(--ink); --accent-hover: var(--cyan-ink); }
/* Kundenfeedback 09/2026 (Mediationsausbildung): „einheitliches orange —
   nicht das was oben in der Schrift ist, sondern das aus dem Farbbalken".
   Deshalb trägt Orange keinen abgedunkelten Textzwilling mehr, sondern
   überall den Vollton #ffa500 (--orange-ink ist damit ungenutzt).
   ACHTUNG: #ffa500 als Text auf Weiß erreicht nur ~2:1 und damit kein
   WCAG AA — ausdrückliche Design-Entscheidung der Kundin. */
.acc-orange { --accent: var(--orange);    --accent-ink: var(--orange);    --accent-on: var(--ink); --accent-hover: var(--cyan-ink); }

/* Auf dunklem Grund brauchen die -ink-Zwillinge den hellen Vollton zurück. */
.section-dark.acc-cyan,   .site-footer.acc-cyan   { --accent-ink: var(--cyan); }
.section-dark.acc-green,  .site-footer.acc-green  { --accent-ink: var(--green); }
.section-dark.acc-orange, .site-footer.acc-orange { --accent-ink: var(--orange); }
.section-dark.acc-pink,   .site-footer.acc-pink   { --accent-ink: var(--pink); }
.section-dark.acc-violet, .site-footer.acc-violet { --accent-ink: var(--violet); }
.section-dark.acc-blue,   .site-footer.acc-blue   { --accent-ink: var(--blue-soft); }

/* Markenband — acht Vollfarben, harte Kanten. Ersetzt den früheren
   Aurora-Verlauf; liegt als Abschlusskante unter jedem Hero. */
.brand-band {
  height: 10px;
  background: var(--brand-band);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Horizontalen Scroll hart unterbinden (clip erzeugt keinen Scroll-Container) */
html, body { overflow-x: clip; }

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--blue); color: #fff; }

.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* Nur wenn JS verfügbar ist (html.tk-js, im <head> gesetzt) werden
   .reveal-Elemente initial versteckt — ohne JS bleibt alles sichtbar. */
html.tk-js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
html.tk-js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.tk-js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .aurora span { animation: none !important; }
  /* .hero-word steht auf opacity: 0 und wird erst durch wordIn sichtbar —
     ohne Animation muss der Endzustand direkt gesetzt werden, sonst bleibt
     die H1 unsichtbar. */
  .hero-word { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.site-header .nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.site-header.scrolled {
  background: rgba(247, 248, 252, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 var(--line), 0 12px 32px -20px rgba(7, 7, 15, 0.25);
}

/* Heller Hero site-weit: Nav-Text bleibt dunkel, Logo unverändert */
.nav-logo img { height: 40px; width: auto; transition: filter 0.35s ease; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  list-style: none;
}
.nav-links a {
  display: inline-block;
  padding-block: 0.55rem;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: 0.85;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { opacity: 1; }
.nav-links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.nav-links .nav-cta a:focus-visible { outline-color: var(--ink); outline-offset: 3px; }

.nav-links .nav-cta a {
  background: var(--blue);
  color: #fff !important;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  opacity: 1;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-links .nav-cta a:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(40, 0, 255, 0.6);
  /* Gleiches Hover wie die .btn-Familie: Fläche bleibt, Text wird türkis. */
  color: var(--cyan) !important;
}

/* dropdown */
.has-sub { position: relative; }
.has-sub > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.45em;
  width: 7px; height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  min-width: 230px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px -15px rgba(7, 7, 15, 0.25);
  padding: 0.5rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu::before { content: ""; position: absolute; inset: -16px 0 auto 0; height: 16px; }
.sub-menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 0.9rem;
}
.sub-menu a:hover { background: var(--mist); color: var(--blue) !important; }

.lang-switch {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.lang-switch a {
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  opacity: 0.55;
}
.lang-switch a.active { opacity: 1; background: rgba(40, 0, 255, 0.1); color: var(--blue); }

/* burger / mobile */
.burger {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 110;
}
.burger span {
  width: 26px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, background 0.3s;
}
body.menu-open .burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); background: #fff; }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); background: #fff; }

@media (max-width: 980px) {
  .burger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
  }
  /* Kundenfeedback 09/2026 (Mobile): Das Overlay lag als position:fixed im
     .site-header. Sobald der Header .scrolled bekam, erzeugte dessen
     backdrop-filter einen neuen Containing Block fuer fixed-Kinder - das
     Overlay schrumpfte auf die 76px hohe Header-Leiste, der dunkle Grund
     verschwand und der Seiteninhalt lag darueber. Bei offenem Menue wird der
     Header deshalb wieder filterfrei und transparent. */
  body.menu-open .site-header,
  body.menu-open .site-header.scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  /* Kundenfeedback 09/2026 (Mobile): Overlay scrollt selbst, die Seite
     dahinter nicht (overscroll-behavior gegen iOS-Scroll-Chaining). */
  .nav-links {
    z-index: 120;
    justify-content: flex-start;
    padding: calc(var(--nav-h) + 1.6rem) 1.4rem 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.menu-open .nav-links { opacity: 1; visibility: visible; }
  /* Kundenfeedback 09/2026 (Mobile): Burger bleibt oben rechts fix und liegt
     ueber dem Overlay. */
  .burger {
    position: fixed;
    top: calc((var(--nav-h) - 44px) / 2);
    right: var(--pad);
    z-index: 130;
  }
  /* Kundenfeedback 09/2026 (Mobile): "the knaps academy" ist ein Eltern-
     Eintrag ohne Ziel - das Untermenue klappt erst auf Klick auf. */
  .has-sub > .sub-menu { display: none; }
  .has-sub[data-open="true"] > .sub-menu { display: block; }
  .nav-links a { color: #fff !important; font-size: 1.5rem; opacity: 1; }
  .sub-menu {
    position: static;
    translate: none;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    text-align: center;
    padding-top: 0.3rem;
  }
  .sub-menu a { font-size: 1.05rem !important; color: rgba(255, 255, 255, 0.75) !important; }
  .sub-menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff !important; }
  .has-sub > a::after { display: none; }
  .nav-links .nav-cta a { background: var(--blue); padding: 0.8rem 2rem; }
  /* Kundenfeedback 09/2026 (Mobile): overflow:hidden allein reicht auf iOS
     nicht - das JS setzt zusaetzlich position:fixed und stellt die
     Scrollposition beim Schliessen wieder her. */
  body.menu-open {
    overflow: hidden;
    position: fixed;
    inset-inline: 0;
    width: 100%;
    touch-action: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Hero — Split: Claim links, Logo-Animation rechts. Flächen statt Verlauf;
   der Farbwechsel passiert über das Markenband an der Unterkante.
   (Kundenfeedback 08/2026: kein Farbverlauf, Logo-Video muss vorkommen.) */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  /* Kundenfeedback 09/2026 (H1-Position): Der Hero-Inhalt war vertikal
     zentriert, dadurch hing die H1 auf jeder Seite je nach Textmenge anders
     hoch. Der Inhalt startet jetzt oben mit genau demselben padding-top wie
     .legal-hero, damit der Abstand Header-Unterkante -> H1-Oberkante auf
     allen Seitentypen identisch ist (Desktop und Mobile). Die Hero-Hoehe
     bleibt unveraendert (Kundenfeedback 09/2026: alle Heros gleich hoch). */
  justify-content: flex-start;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
/* Die Unterseiten-Heros setzten die Mindesthöhe auf 0 und waren damit je nach
   Textmenge unterschiedlich hoch. Sie erben jetzt dieselbe Höhe wie der
   Startseiten-Hero (Kundenfeedback 09/2026: „Alle Hero Sections sollen gleich
   hoch sein … Höhe von der Hauptseite nehmen"). Die Rechtstexte laufen über
   .legal-hero und bleiben davon unberührt. Die Klasse .hero-sub bleibt
   bestehen, weil die Seiteninhalte in der DB sie tragen. */

/* `.aurora` bleibt als Klassenname bestehen (die Unterseiten-Inhalte liegen
   in der DB und enthalten das Div weiterhin) — rendert jetzt aber das flache
   Markenband an der Hero-Unterkante statt des früheren Glow-Verlaufs. */
.aurora {
  position: absolute;
  inset: auto 0 0 0;
  height: 10px;
  background: var(--brand-band);
  pointer-events: none;
}
.aurora span { display: none; }

/* Grid-Linien im Hero entfernt (PO-Feedback 2026-07-02); display:none statt
   Regel löschen, weil die Unterseiten-Inhalte in der DB das Div noch enthalten. */
.hero-grid-lines { display: none; }

/* .hero ist ein Column-Flex-Container; die auto-Inline-Margins von
   .container schalten dort das Stretchen ab, wodurch der Container auf
   Inhaltsbreite schrumpft und mittig sitzt. Auf der Startseite fiel das nicht
   auf (das Split-Grid füllt die Breite), auf den Unterseiten rückte der ganze
   Hero-Inhalt nach rechts ein. width:100% stellt das Stretchen wieder her
   (Kundenfeedback 09/2026: „Hero Inhalt oben bitte auch linksbündig"). */
.hero > .container { width: 100%; }
.hero .container { position: relative; z-index: 2; }

/* Split-Hero: Claim links, Logo-Animation als Karte rechts. Die rechte Spalte
   ist bewusst die größere — das Video ist das Markenelement des Heros und
   bekommt den Platz (Kundenfeedback 09/2026). */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  /* Kundenfeedback 09/2026 (H1-Position): war center, dadurch schob die
     hoehere Video-Spalte die Claim-Spalte und damit die H1 nach unten. */
  align-items: start;
}
@media (max-width: 940px) {
  .hero-split { grid-template-columns: 1fr; gap: clamp(1.8rem, 5vw, 2.6rem); }
}

/* Die Animation durchläuft selbst die Markenfarben, deshalb ein neutraler
   Rahmen — eine zusätzliche Farbfläche würde mit ihr kollidieren. Auch ohne
   Markenband am Fuß (Kundenfeedback 09/2026); das Band läuft weiterhin an der
   Hero-Unterkante durch. */
.hero-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.hero-media video,
.hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #fff;
}

/* Aus den Unterseiten-Heros ist das Eyebrow ersatzlos entfernt
   (Kundenfeedback 09/2026: „in den jeweiligen Heros komplett entfernen").
   Die Regel bleibt für den Fall, dass ein Eyebrow außerhalb eines Heros
   gebraucht wird — dann als schlichtes, linksbündiges Textlabel wie .kicker,
   nicht mehr als Pill. */
.eyebrow {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  color: var(--ink);
  margin-bottom: 1.3rem;
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 14ch;
  text-wrap: balance;
}
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  animation: wordIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--wd, 0s);
}
@keyframes wordIn { to { opacity: 1; transform: none; } }

/* Früher der Marken-Verlauf im Text. Jetzt eine flache Akzentfarbe — der
   Klassenname bleibt, weil die Unterseiten-Inhalte in der DB ihn nutzen. */
.grad-text { color: var(--accent-ink); }
.section-dark .grad-text { color: var(--accent-ink); }

.hero-lead {
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  color: var(--grey);
  max-width: 46ch;
  font-weight: 400;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

/* Kennzahlen und der graue Trennstrich darüber sind aus dem Hero entfernt
   (Kundenfeedback 09/2026: „Die Stats unten sowie den grauen Trennstrich
   entfernen"). Die Regeln bleiben stehen, weil ältere Seiteninhalte in der DB
   den Block noch enthalten können — display:none statt Regel löschen, wie bei
   .scroll-hint und .hero-grid-lines. */
.hero-stats { display: none; }

/* Maus-/Scroll-Indikator entfernt (Kundenfeedback 08/2026: „bitte einfach
   rausnehmen"). Regel bleibt als display:none, weil ältere Seiteninhalte in
   der DB das Element noch enthalten können. */
.scroll-hint { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  border: 0;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, background 0.22s;
}
/* Einheitliches Hover-Verhalten für ALLE Buttons (Kundenfeedback 09/2026:
   „Bitte buttons überall so anpassen — gleiches behavior, gleiche
   animation"): die Fläche bleibt, wie sie ist — kein Abdunkeln, kein
   Farbwechsel —, nur der Text färbt sich türkis, dazu der bekannte Lift.
   --btn-hover-ink hält das Türkis, das auf der jeweiligen Buttonfläche
   lesbar ist: der helle Vollton auf dunklen Flächen, der Textzwilling auf
   hellen. */
.btn { --btn-hover-ink: var(--cyan-mid); }
.btn-primary,
.btn-dark { --btn-hover-ink: var(--cyan); }
.btn-accent { --btn-hover-ink: var(--accent-hover); }
.section-dark .btn-ghost,
.info-card .btn-ghost { --btn-hover-ink: var(--cyan); }

.btn:hover { transform: translateY(-2px); color: var(--btn-hover-ink); }
.btn:active { transform: translateY(-1px) scale(0.99); }
.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Primär-Button: flache Markenfarbe, kein Verlauf. */
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(40, 0, 255, 0.55);
}
/* Kein Abdunkeln der Fläche mehr — nur der Schatten wächst mit dem Lift. */
.btn-primary:hover { box-shadow: 0 18px 44px -14px rgba(40, 0, 255, 0.6); }

/* Primär-Button in der Sektionsfarbe. Die Academy-Seiten laufen durchgehend
   auf einer Farbe (Mediationstag rot, Mediationsausbildung orange) und ihre
   CTAs sollen diese Farbe tragen statt Royal Blue (Kundenfeedback 09/2026:
   „Ticket kaufen button auch rot", „platz sichern button orange"). */
.btn-accent {
  background: var(--accent);
  color: var(--accent-on);
  box-shadow: 0 10px 30px -12px rgba(7, 7, 15, 0.35);
}
.btn-accent:hover { box-shadow: 0 18px 44px -14px rgba(7, 7, 15, 0.4); }

/* Die Ticket-CTAs des Mediationstags bleiben auch beim Hover rosa mit
   weisser Schrift; hier ist der globale tuerkisfarbene Button-Hover nicht
   gewuenscht. */
.acc-magenta .btn-accent,
.acc-magenta .btn-accent:hover {
  background: var(--pink-deep);
  color: #fff;
}

/* Ghost-Button auf hellem Grund (Hero); in dunklen Sektionen weiß-glasig */
.btn-ghost {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  border: 1.5px solid rgba(7, 7, 15, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Ghost/Secondary: bleibt weiß statt gelb oder abgedunkelt zu werden
   (Kundenfeedback 09/2026: „Stattdessen weiß lassen und text Türkis"). */
.btn-ghost { background: #fff; }
.section-dark .btn-ghost,
.info-card .btn-ghost {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
/* Auf dunklem Grund bleibt die Glasfläche unverändert; nur der Text färbt. */

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { box-shadow: 0 18px 44px -12px rgba(7, 7, 15, 0.5); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
/* .btn-outline invertierte früher auf Ink — jetzt nur Lift und türkiser Text. */

.btn .arr { transition: transform 0.22s; }
.btn:hover .arr { transform: translateX(4px); }

/* ==========================================================================
   Sections, headings
   ========================================================================== */

.section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.section-dark { background: var(--ink); color: #fff; }
.section-mist { background: var(--mist); }

.section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }

/* Sektionslabel als Marken-Pill (wie auf theknaps.com) statt als dünnes
   Versalien-Eyebrow — die Pill ist ein bestehendes Markenelement, das der
   Kunde ausdrücklich weiterverwendet sehen möchte. */
/* Kundenfeedback 09/2026: „Die Section pills oben an jeder section bitte
   entfernen. Text in schwarz einfach stehenlassen und links orientieren."
   Aus der Marken-Pill wird ein schlichtes, linksbündiges Textlabel: keine
   weiße Fläche, kein Schatten, kein Farbquadrat. Auf dunklem Grund muss der
   Text hell bleiben, sonst steht Schwarz auf Schwarz. */
.kicker {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--ink);
  margin-bottom: 1rem;
}
.section-dark .kicker { color: #fff; }

.section h2.section-title,
.section-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Fließtext unter der Headline. Kundenfeedback 08/2026: „Body text unter
   heading viel zu lang. Bitte max 3 zeilen." — die Texte selbst sind gekürzt
   (nicht abgeschnitten); das Maß von ~62ch hält sie auch auf breiten
   Viewports bei drei Zeilen. */
.section-sub {
  margin-top: 1.2rem;
  font-size: 1.08rem;
  color: var(--grey);
  line-height: 1.7;
  max-width: 62ch;
  text-wrap: pretty;
}
.section-head.center .section-sub { margin-inline: auto; }
.section-dark .section-sub { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   Manifesto (Über uns)
   ========================================================================== */

/* Kundenfeedback 08/2026: „Text kleiner darstellen mit normaler body font
   (außer the knaps am Ende)" — der Fließtext läuft jetzt in Body-Größe und
   -Gewicht, nur die Signatur bleibt groß. */
.manifesto { background: var(--paper); }
.manifesto-lines {
  max-width: 66ch;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
}
.manifesto-lines p { margin-bottom: 1.1em; color: var(--grey); text-wrap: pretty; }
.manifesto-lines strong { font-weight: 700; color: var(--ink); }
.manifesto-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 2.2rem;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ==========================================================================
   Angebotsübersicht (Was wir machen)
   Kundenfeedback 08/2026: „Unsere Angebote sollen nebeneinander dargestellt
   werden, so wie in der aktuellen Übergangsversion" + „Beim Klick auf ein
   Format bekommt man einen kurzen Einblick, worum es geht". Also: pro Gruppe
   eine Reihe gleichrangiger Kacheln (so viele Zellen wie Formate, keine
   Lücken) und darunter ein Detailpanel, das per Klick befüllt wird.
   ========================================================================== */

.offer-groups { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }

.offer-group {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(2.4rem, 4vw, 3rem) clamp(1.1rem, 2.5vw, 2rem) clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow);
}
/* Der Farbbalken war ein absolut positioniertes ::before. Bei 6px Höhe
   skaliert der Browser dessen 22px-Radien auf 6px herunter, die Ecken der
   Gruppe bleiben aber bei 22px — der Balken ragte deshalb seitlich über die
   Box hinaus (Kundenfeedback 09/2026: „schließen nicht mit ihnen ab sondern
   ragen seitlich darüber"). Als echter border-top folgt er der Rundung der
   Box exakt. Kein overflow:hidden an der Gruppe — die Titel-Pill ragt
   bewusst über die Oberkante hinaus und würde sonst abgeschnitten. */
.offer-group { border-top: 6px solid var(--accent); }

h3.offer-title { margin: 0; }
.offer-title {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.5rem;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.offer-title .offer-title-sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--grey);
}
@media (max-width: 560px) {
  .offer-title { white-space: normal; text-align: center; max-width: calc(100% - 2rem); }
  .offer-title .offer-title-sub { display: none; }
}

/* Genau so viele Spalten wie Formate — nie eine leere Zelle. */
.offer-tiles {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
}
@media (max-width: 1080px) {
  .offer-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Bei ungerader Anzahl füllt die letzte Kachel die Restbreite, statt eine
     leere Zelle stehen zu lassen. */
  .offer-tiles[style*="--n:5"] > :last-child { grid-column: span 3; }
}
@media (max-width: 620px) {
  .offer-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-tiles[style*="--n:5"] > :last-child { grid-column: span 2; }
}

.offer-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 0.7rem 1.2rem;
  background: var(--paper);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--accent-ink);
  transition: background 0.22s, border-color 0.22s, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.offer-tile img { width: 52px; height: 52px; object-fit: contain; }
.offer-tile:hover { background: var(--mist); transform: translateY(-3px); }
.offer-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.offer-tile[aria-expanded="true"] {
  background: var(--mist);
  border-color: var(--accent);
}

/* Detailpanel: liegt direkt unter der Kachelreihe der Gruppe. */
.offer-detail {
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  border-radius: var(--radius-sm);
  background: var(--mist);
  /* Ohne Farbbalken an der Seite (Kundenfeedback 09/2026: „die Detailkarten
     drinnen bitte ohne den farbigen Balken"). */
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.8rem);
}
.offer-detail[hidden] { display: none; }
.offer-detail h4 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.offer-detail p { margin-top: 0.5rem; color: var(--grey); font-size: 0.98rem; max-width: 70ch; }
.offer-detail-label {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.offer-hint {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--grey);
  text-align: center;
}

/* ==========================================================================
   Team
   ========================================================================== */

/* minmax so gewaehlt, dass auf der breiten Seite weiterhin genau 5 Spalten
   stehen — die 15 initial sichtbaren Karten bilden damit 3 volle Reihen. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

/* Team-Karten: runde Profilbilder (einheitlich, auch für nur-rund vorliegende
   Quellen) mit Akzent-Ring — konsistent mit den Expert*innen-Avataren.
   Kundenfeedback 08/2026: „grau sieht aus wie Beerdigung" — die Fotos sind
   jetzt von Anfang an farbig; beim Hover färbt sich die ganze Karte in die
   Sektionsfarbe und der Text schaltet auf Weiß. (Der Kunde hatte dafür einen
   Verlauf vorgeschlagen; das übergeordnete Design-Feedback verbietet
   Verläufe, deshalb die flache Markenfarbe.) */
.person-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.1rem 1.45rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
}
.person-card:hover,
.person-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  background: var(--accent);
  border-color: var(--accent);
}
.person-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.person-card img {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--mist);
  background: var(--mist);
  box-shadow: 0 10px 26px -12px rgba(7, 7, 15, 0.35);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
}
.person-card:hover img,
.person-card:focus-visible img { transform: scale(1.05); border-color: #fff; }
.person-card .person-meta { margin-top: 1rem; color: var(--ink); }
.person-card:hover .person-meta,
.person-card:focus-visible .person-meta { color: var(--accent-on); }
.person-card .person-meta strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.person-card .person-meta span {
  font-size: 0.78rem;
  color: var(--grey);
  line-height: 1.4;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.person-card--role-expanded .person-meta span { -webkit-line-clamp: 4; }
.person-card:hover .person-meta span,
.person-card:focus-visible .person-meta span { color: var(--accent-on); opacity: 0.85; }

/* LinkedIn-Verweis auf der Karte (Kundenfeedback: „bei Lucas und Peter
   LinkedIn hinterlegen"). Wird nur gerendert, wenn ein Profil hinterlegt ist. */
.person-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  background: var(--mist);
  transition: background 0.2s, color 0.2s;
}
.person-linkedin svg { width: 13px; height: 13px; }
.person-linkedin:hover { background: var(--ink); color: #fff; }
.person-linkedin:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.person-card:hover .person-linkedin,
.person-card:focus-visible .person-linkedin { background: #fff; color: var(--accent-ink); }

/* Das Plus ist ein SVG, kein Textzeichen — als Glyphe saß es wegen der
   Schriftmetrik nie exakt in der Kreismitte. */
.person-card .person-plus {
  position: absolute;
  top: 0.8rem; right: 0.8rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--mist);
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  line-height: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.3s;
}
.person-card .person-plus svg { display: block; width: 15px; height: 15px; }
.person-card:hover .person-plus,
.person-card:focus-visible .person-plus { opacity: 1; transform: none; background: #fff; }

.team-grid .person-card.is-hidden { display: none; }
.team-more-wrap { text-align: center; margin-top: 2.6rem; }

/* Runder Nachlade-Pfeil am Ende des mobilen Swipe-Tracks (Desktop: nie). */
.team-arrow { display: none; }

/* Mobile: schlanker 2×2-Slider, horizontal swipebar (Scroll-Snap).
   grid-auto-columns < 50% lässt die nächste Spalte anschnitten sichtbar
   („Peek“) — signalisiert die Swipebarkeit ohne UI-Chrome. */
@media (max-width: 700px) {
  .team-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: calc(46% - 0.4rem);
    gap: 0.8rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-grid .person-card {
    scroll-snap-align: start;
    padding: 1.15rem 0.7rem 1rem;
  }
  .team-grid .person-card img { width: 82px; height: 82px; }
  .team-grid .person-card .person-meta { margin-top: 0.7rem; }
  .team-grid .person-card .person-meta strong { font-size: 0.95rem; }
  .team-grid .person-card .person-meta span { font-size: 0.72rem; }
  .team-grid .person-card .person-plus { display: none; }
  /* Im Swipe-Track kein Scroll-Reveal: seitlich außerhalb liegende Karten
     wären sonst beim Swipen kurz leer. */
  html.tk-js .team-grid .reveal { opacity: 1; transform: none; transition: none; }
  /* Nachladen läuft mobil über den Pfeil im Track, nicht über den Button. */
  .team-more-wrap { display: none; }
  .team-arrow {
    display: grid;
    place-items: center;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    border: 0;
    background: var(--accent);
    color: var(--accent-on);
    cursor: pointer;
    box-shadow: 0 10px 26px -12px rgba(7, 7, 15, 0.4);
    scroll-snap-align: end;
  }
  .team-arrow svg { width: 22px; height: 22px; }
  .team-grid .team-arrow.is-hidden { display: none; }
}

/* person modal */
.person-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(7, 7, 15, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.person-modal.open { opacity: 1; visibility: visible; }
.person-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 700px);
  overflow-y: auto;
  background: #fff;
  border-radius: calc(var(--radius) + 4px);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.person-modal.open .person-modal-card { transform: none; }
/* Rundes Profilbild statt Vollflächen-Foto — verträgt auch nur-rund vorliegende Quellen */
.person-modal-card .pm-photo {
  display: grid;
  place-items: center;
  padding: 2.6rem 1.5rem 0;
}
.person-modal-card .pm-photo img {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid transparent;
  background: var(--mist) padding-box, var(--accent) border-box;
  box-shadow: 0 16px 40px -16px rgba(7, 7, 15, 0.4);
}
.person-modal-card .pm-body {
  padding: 1.4rem clamp(1.6rem, 5vw, 2.6rem) 2.2rem;
  text-align: center;
}
.pm-body h2,
.pm-body h3 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.pm-body .pm-role { color: var(--accent-ink); font-weight: 700; font-size: 0.95rem; margin-top: 0.2rem; white-space: pre-line; }
.pm-body .pm-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--grey);
  background: var(--mist);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}
.pm-body .pm-loc svg { width: 15px; height: 15px; flex-shrink: 0; }

/* LinkedIn im Personen-Modal. Die Karte selbst ist ein <button>, in dem kein
   <a> stehen darf — deshalb sitzt der Link hier. Er wird nur eingeblendet,
   wenn die Karte ein data-linkedin trägt. */
.pm-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, filter 0.2s;
}
.pm-linkedin[hidden] { display: none; }
.pm-linkedin svg { width: 16px; height: 16px; }
.pm-linkedin:hover { transform: translateY(-2px); }
.pm-linkedin:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pm-body .pm-quote-label {
  margin-top: 1.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.pm-body .pm-quote {
  margin-top: 0.7rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
  text-align: left;
  border-left: 3px solid;
  border-color: var(--accent);
  padding-left: 1.1rem;
  white-space: pre-line;
}
.pm-close {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 5;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--mist);
  color: var(--ink);
  font-size: 1.05rem;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
.pm-close svg { width: 17px; height: 17px; }
.pm-close:hover { transform: rotate(90deg); background: var(--ink); color: #fff; }
.pm-close:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 700px) {
  .person-modal-card { max-height: 88vh; }
  .person-modal-card .pm-photo { padding-top: 2.2rem; }
}

/* ==========================================================================
   Clients marquee
   ========================================================================== */

.clients-section { overflow: hidden; }
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee + .marquee { margin-top: 1.4rem; }
.marquee-track {
  display: flex;
  gap: 1.4rem;
  padding-right: 1.4rem;
  flex-shrink: 0;
  animation: marquee 42s linear infinite;
}
.marquee.reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Kundenkacheln. Die Quellbilder sind quadratisch und tragen die Markenfarbe
   bereits vollflächig (so wie auf theknaps.com) — sie werden deshalb randlos
   gezeigt, ohne zweite Farbfläche darunter und ohne Blend-Mode. */
.client-logo {
  width: clamp(132px, 14vw, 168px);
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
/* Kein Anheben beim Hover: das Band läuft in einem overflow:hidden-Viewport,
   die angehobene Kachel wurde oben abgeschnitten (Kundenfeedback 09/2026:
   „Hover soll also nur anhalten und die Logo box nicht hochheben"). Das
   Anhalten macht .marquee:hover .marquee-track. */
.client-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Testimonials — Kundenstimmen-Slider
   Mittige Karte (Gradient-Panel + Zitat-Panel), seitliche Vorschau-Karten
   für vorherige/nächste Stimme, runde Pfeil-Buttons, Swipe auf Touch.
   ========================================================================== */

.testi-slider {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
}

.testi-viewport { flex: 1; min-width: 0; overflow: hidden; border-radius: calc(var(--radius) + 6px); }
.testi-track {
  display: flex;
  gap: 1rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) { .testi-track { transition: none; } }

.testi-card {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 250px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 0;
}

.testi-person {
  background: var(--accent);
  color: var(--accent-on);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 1.4rem;
}
.testi-person img {
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 34px -12px rgba(7, 7, 15, 0.45);
}
/* Kundenfeedback 09/2026: Kundenlogos ersetzen die nicht vorhandenen
   Portraits; alle Marken stehen vollständig sichtbar auf einer weißen Fläche. */
.testi-person img.testi-logo {
  width: 168px;
  height: 104px;
  border-radius: 14px;
  object-fit: contain;
  padding: 0.8rem 1rem;
  border: 0;
  background: #fff;
}
.testi-person img.testi-logo--anonymous {
  padding: 0;
}
.testi-person img.testi-logo[src*="client-12"] {
  object-fit: cover;
  padding: 0;
}
.testi-person figcaption strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.testi-person figcaption .testi-role {
  display: block;
  font-size: 0.88rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}
.testi-person figcaption .testi-company {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}
.testi-person figcaption .testi-company:empty { display: none; }

.testi-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 3.5vw, 3rem);
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
}
.testi-quote::before {
  content: "“";
  display: block;
  font-size: 4.6rem;
  line-height: 0.55;
  margin-bottom: 1.1rem;
  font-weight: 800;
  color: var(--accent-ink);
}
.testi-quote p {
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.75;
  color: var(--ink);
}

/* Seitliche Vorschau-Karten (nur Desktop) */
.testi-side {
  flex: 0 0 148px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 0.8rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.testi-side:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.testi-side img {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: contain;
  padding: 0.35rem;
  margin: 0 auto 0.6rem;
  border: 2px solid transparent;
  background: #fff padding-box, var(--accent) border-box;
}
.testi-side img[src*="client-12"] {
  object-fit: cover;
  padding: 0;
}
.testi-side strong { display: block; font-size: 0.84rem; font-weight: 800; letter-spacing: -0.01em; }
.testi-side span { display: block; font-size: 0.72rem; color: var(--grey); margin-top: 0.1rem; }

.testi-arrow {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.testi-arrow svg { width: 18px; height: 18px; }
.testi-arrow:hover { background: var(--blue); color: #fff; transform: scale(1.06); }

@media (max-width: 1080px) {
  .testi-side { display: none; }
}
@media (max-width: 760px) {
  .testi-slider { flex-wrap: wrap; }
  .testi-viewport { flex: 1 1 100%; order: -1; }
  .testi-slider .testi-arrow { margin-inline: auto; }
  .testi-card { grid-template-columns: 1fr; }
  .testi-person { padding: 1.8rem 1.2rem 1.4rem; }
  .testi-quote { padding: 1.6rem 1.4rem 2rem; }
}

/* ==========================================================================
   Learning & Development — Themenkarten
   Kundenfeedback 08/2026: „Flip Funktion zu viel und unübersichtlich; lieber
   Inhalt direkt drunter und Formate hervorheben." Der 3D-Flip ist ersatzlos
   raus; Fokusthemen und Formate stehen offen auf der Karte, die Formate als
   hervorgehobener Block am Kartenfuß.
   Die Klassennamen .flip-* bleiben erhalten, weil ältere Seiteninhalte in
   der DB sie noch referenzieren können.
   ========================================================================== */

.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
}
@media (max-width: 1024px) { .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .flip-grid { grid-template-columns: 1fr; } }

/* Ohne Farbstrich an der Oberkante (Kundenfeedback 09/2026) — die Farbe der
   Sektion trägt hier der Formate-Block am Kartenfuß. */
.flip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: var(--shadow);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.flip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.flip-card img {
  width: 60px; height: 60px;
  object-fit: contain;
  margin-bottom: 1.1rem;
}
.flip-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.flip-card > p { color: var(--grey); font-size: 0.95rem; }

.flip-label {
  margin-top: 1.3rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.flip-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.flip-pills span {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--grey);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Formate hervorgehoben (ausdrücklicher Kundenwunsch). */
.formate-block {
  margin-top: auto;
  padding-top: 1.2rem;
}
.formate-block .flip-label { margin-top: 0; color: var(--accent-ink); }
.formate-block .flip-pills span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  font-weight: 700;
}

/* CTA-Karte im Themen-Grid — flache Markenfarbe statt Verlauf. */
.flip-cta {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  padding-bottom: calc(clamp(1.5rem, 2.6vw, 2.1rem) + 10px);
  background: var(--blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.flip-cta::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 10px;
  background: var(--brand-band);
}
.flip-cta h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.flip-cta p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.88); }
/* Der Secondary in der L&D-CTA-Karte wurde beim Hover gelb — jetzt bleibt er
   weiß und der Text wird türkis, wie überall (Kundenfeedback 09/2026).
   Die Hover-Zeile muss hier wiederholt werden: .flip-cta .btn hat dieselbe
   Spezifität wie .btn:hover, steht aber später in der Datei. */
.flip-cta .btn { background: #fff; color: var(--blue); }
.flip-cta .btn:hover { color: var(--btn-hover-ink); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.contact-info .section-sub { max-width: 40ch; }
.contact-details { margin-top: 2.2rem; display: grid; gap: 1rem; }
.contact-details a { color: inherit; text-decoration: none; }
.contact-detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
}
.contact-detail .ico {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line-light);
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  transition: background 0.22s, color 0.22s;
}
.contact-detail .ico svg { width: 20px; height: 20px; }
/* Kundenfeedback 09/2026: Auch der Standort als nicht verlinkter erster
   Kontaktpunkt bekommt beim Hover dieselbe blaue Icon-Fläche wie die Links. */
.contact-detail:hover .ico { background: var(--accent); color: var(--accent-on); }
a.contact-detail:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

/* Die Formularkarte ist weiß und liegt in einer dunklen Sektion — der
   Sektions-Akzent (Cyan) wäre auf Weiß nicht lesbar, deshalb hier zurück auf
   Royal Blue. */
.contact-form-card {
  background: #fff;
  color: var(--ink);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.55);
  --accent: var(--blue);
  --accent-ink: var(--blue);
  --accent-on: #ffffff;
}
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--mist);
  padding: 5px;
  border-radius: 999px;
  margin-bottom: 1.6rem;
}
.segmented button {
  border: 0;
  background: transparent;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--grey);
  transition: all 0.25s;
}
.segmented button.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(7, 7, 15, 0.4);
}

.form-grid { display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

fieldset.field { border: 0; padding: 0; margin: 0; }
.field label,
.field legend {
  display: block;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 0.96rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(40, 0, 255, 0.12);
}
.field textarea { min-height: 120px; resize: vertical; }

.pill-group { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pill-group input { position: absolute; opacity: 0; pointer-events: none; }
.pill-group label {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  transition: all 0.2s;
}
.pill-group input:checked + label {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(40, 0, 255, 0.5);
}
.pill-group label:hover { border-color: var(--blue); color: var(--blue); }
.pill-group input:checked + label:hover { color: #fff; }

.form-note { font-size: 0.8rem; color: var(--grey); }
.form-note a { color: var(--accent-ink); font-weight: 600; }
.form-note a:hover { text-decoration: none; }
.form-note a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

/* Die Pill-Radios sind echte Radios mit visuell versteckten Inputs — der
   Fokusring muss deshalb auf dem Label sichtbar werden. */
.pill-group input:focus-visible + label { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.form-success {
  display: none;
  background: rgba(0, 212, 106, 0.12);
  border: 1.5px solid var(--green-ink);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.form-success.show { display: block; }

/* ==========================================================================
   Contact Form 7 (Kontaktformular ID 20, Newsletter ID 21)
   --------------------------------------------------------------------------
   Das Theme-Markup (form-row, field, pill-group, form-consent, form-note,
   newsletter-input-row, newsletter-consent) steht im CF7-Formular selbst.
   Hier kommt nur dazu, was CF7 zusaetzlich drumherum rendert.
   ========================================================================== */

.wpcf7 { margin: 0; }
.contact-form-card .wpcf7-form { display: grid; gap: 1rem; }
.newsletter-card .wpcf7-form { position: relative; z-index: 2; display: grid; gap: 0.9rem; }
/* CF7 laesst wpautop laufen: einzelne Zeilen landen in <p>. Die duerfen im
   Grid keine Eigenabstaende mitbringen. */
.wpcf7-form > p { margin: 0; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; }

/* Die Eingabefelder erben die Feldoptik aus .field; CF7 haengt seine eigenen
   Klassen dazu, deshalb hier die gleiche Basis noch einmal fuer den Fall,
   dass ein Control ausserhalb von .field steht. */
.contact-form-card .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio) {
  width: 100%;
  font-family: inherit;
  font-size: 0.96rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form-card .wpcf7-form-control:not(.wpcf7-submit):focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(40, 0, 255, 0.12);
}
.contact-form-card textarea.wpcf7-form-control { min-height: 120px; resize: vertical; }

/* Radio-Pills: CF7 legt den Input INNERHALB des Labels ab, der alte
   Geschwister-Selektor (input:checked + label) greift dort nicht. */
.pill-group .wpcf7-radio,
.pill-group .wpcf7-checkbox { display: contents; }
/* Kundenfeedback 09/2026: Auswahlkategorien im Kontaktformular brauchen
   mehr Abstand zueinander, besonders beim Umbruch auf schmalen Viewports. */
.contact-form-card .pill-group { gap: 1rem 1.25rem; }
.pill-group .wpcf7-list-item { display: inline-block; margin: 0; }
.pill-group .wpcf7-list-item label {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  transition: all 0.2s;
}
.pill-group .wpcf7-list-item label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pill-group .wpcf7-list-item label:hover { border-color: var(--blue); color: var(--blue); }
.pill-group .wpcf7-list-item label:has(input:checked) {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(40, 0, 255, 0.5);
}
.pill-group .wpcf7-list-item label:has(input:checked):hover { color: #fff; }
.pill-group .wpcf7-list-item label:has(input:focus-visible) {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
}

/* Newsletter-Opt-in und Newsletter-Consent: CF7 schachtelt input + Textspan
   in ein eigenes <label>, das selbst wieder die Flex-Zeile bilden muss. */
.form-consent .wpcf7-checkbox,
.newsletter-consent .wpcf7-checkbox { display: contents; }
.form-consent .wpcf7-list-item,
.newsletter-consent .wpcf7-list-item { margin: 0; }
.form-consent .wpcf7-list-item label,
.newsletter-consent .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}
.form-consent .wpcf7-list-item label {
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--grey);
}
.newsletter-consent .wpcf7-list-item label {
  gap: 0.6rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}
.form-consent .wpcf7-list-item-label,
.newsletter-consent .wpcf7-list-item-label { font-weight: 400; }

/* Submit-Button: CF7 rendert ein <input type="submit"> mit den Klassen aus
   dem Shortcode (btn / btn-primary), die .btn-Optik greift damit direkt. */
.wpcf7-submit { cursor: pointer; }
/* In der Newsletter-Zeile muss der CF7-Feldwrapper die Flex-Breite uebernehmen,
   die vorher direkt am input lag. */
.newsletter-input-row .wpcf7-form-control-wrap { flex: 1; min-width: 0; }
.newsletter-input-row .wpcf7-submit { width: auto; flex: 0 0 auto; }

/* Feld- und Statusmeldungen. Loesen die frueher per JS eingeblendete
   .form-success ab. */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #d1003c;
}
.wpcf7-response-output {
  margin: 0;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output {
  color: var(--green-ink);
  background: rgba(0, 212, 106, 0.12);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  color: #d1003c;
  background: rgba(209, 0, 60, 0.08);
}
/* Newsletter-Karte ist dunkelblau: dort muessen die Meldungen hell bleiben. */
.newsletter-card .wpcf7-not-valid-tip { color: #ffd7e2; }
.newsletter-card .wpcf7-response-output {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.wpcf7-spinner { margin: 0 0 0 0.6rem; }

/* ==========================================================================
   Newsletter
   ========================================================================== */

.newsletter-card {
  position: relative;
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(2.2rem, 5vw, 4rem);
  background: var(--blue);
  color: #fff;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 880px) { .newsletter-card { grid-template-columns: 1fr; } }
/* Der frühere Glow-Kreis ist entfallen (Verlauf). Die Karte ist eine flache
   Markenfläche; das Markenband liegt direkt darunter am Footer und würde hier
   durch die 30px-Rundung nur angeschnitten. */
.newsletter-card h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.newsletter-card p { margin-top: 0.9rem; color: rgba(255, 255, 255, 0.85); max-width: 46ch; }
.newsletter-form { position: relative; z-index: 2; display: grid; gap: 0.9rem; }
.newsletter-input-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}
.newsletter-input-row input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 0.96rem;
  padding: 0.65rem 1.1rem;
}
.newsletter-input-row input::placeholder { color: rgba(255, 255, 255, 0.65); }
.newsletter-input-row input:focus { outline: none; }
.newsletter-input-row .btn {
  width: 100%;
  justify-content: center;
  background: #fff;
  color: var(--blue);
  padding: 0.75rem 1.5rem;
}
/* Gleiche Spezifitätsfalle wie bei .flip-cta .btn — Hover hier wiederholen. */
.newsletter-input-row .btn:hover { color: var(--btn-hover-ink); }
.newsletter-consent {
  display: flex;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  align-items: flex-start;
  line-height: 1.5;
}
.newsletter-consent input {
  margin-top: 0.15rem;
  width: 24px; height: 24px;
  flex-shrink: 0;
  accent-color: #fff;
}
.newsletter-consent input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ==========================================================================
   Academy pages
   ========================================================================== */

.chip-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.chip svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-ink); }
.section-dark .chip,
.info-card .chip {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-light);
  color: #fff;
}

.speaker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
@media (max-width: 880px) { .speaker-grid { grid-template-columns: 1fr; } }
.speaker-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
}
.speaker-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.speaker-head { display: flex; align-items: center; gap: 1.3rem; margin-bottom: 1.3rem; }
.speaker-head img {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid transparent;
  background: var(--accent) border-box;
  box-shadow: 0 8px 24px -10px rgba(7, 7, 15, 0.35);
}
.speaker-head h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
/* Die Rollenzeile war fest Royal Blue und stand damit auf beiden
   Academy-Seiten quer zur Sektionsfarbe (Kundenfeedback 09/2026: „text
   unterhalb der Experten aktuell blau"). Jetzt folgt sie dem Akzent. */
.speaker-head .speaker-role { font-size: 0.88rem; color: var(--accent-ink); font-weight: 700; }
.speaker-card p { color: var(--grey); font-size: 0.97rem; }
.speaker-links { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.3rem;
  padding-bottom: 0.25rem;
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  transition: opacity 0.2s;
}
.text-link:hover { opacity: 0.75; }
.text-link:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
/* Auf dunklem Grund (Info-Karte, dunkle Sektion) muss der Link hell bleiben. */
.section-dark .text-link,
.info-card .text-link,
.archive-back .text-link { color: var(--accent-ink); }

.info-card {
  background: var(--ink);
  color: #fff;
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(1.8rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
/* Der Farbbalken an der Oberkante der schwarzen Karte ist entfallen
   (Kundenfeedback 09/2026: „roten Balken oben an der box entfernen",
   „Unten orangener Balken weg von der Schwarzen box"). */
.info-card-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem;
}
.info-item .info-label {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.35rem;
}
.info-item .info-value { font-weight: 700; font-size: 1.05rem; line-height: 1.5; }

.quote-block {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
  text-align: center;
  padding: 0 1rem;
}
.quote-block::before {
  content: "“";
  display: block;
  font-size: 5rem;
  line-height: 0.6;
  margin-bottom: 1.2rem;
  color: var(--accent-ink);
  font-weight: 800;
}
.quote-block cite {
  display: block;
  margin-top: 1.4rem;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 700;
  color: var(--grey);
}

/* prose / rich text */
.prose { max-width: 760px; }
.prose p { margin-bottom: 1.2em; color: var(--grey); font-size: 1.02rem; }
.prose p strong { color: var(--ink); }
.prose h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; margin: 1.8em 0 0.6em; }

/* timeline
   Kundenfeedback 08/2026 (Mediationsausbildung → Termine): „Visuell gerade
   ziehen (Eine Linie klarer start und Anfang, Linie geht unten weiter,
   Punkte zentrieren auf der linie)".
   Kundenfeedback 09/2026: „Punkte bitte vertikal auf gleicher höhe wie die
   Titel" und „Teil oberhalb des Kick-offs vom Zeitstrahl entfernen (start ist
   die gefüllte bubble)". Deshalb:
   - --tl-mid ist der Abstand von der Oberkante eines Eintrags zur MITTE
     seiner Titelzeile. Er wird aus den Schriftgrößen und Zeilenhöhen von
     .tl-date und h3 gerechnet, die dafür beide explizit gesetzt sind — der
     Punkt sitzt damit auf dem Titel, nicht auf dem Datum.
   - Die Startkappe ist weg, und die Linie des ersten Eintrags beginnt erst
     in seinem Punkt: über dem gefüllten Kick-off-Punkt liegt nichts mehr.
   */
.timeline {
  --tl-x: 11px;       /* Mitte der Linie, gemessen vom linken Rand */
  --tl-w: 3px;        /* Linienbreite */
  --tl-dot: 22px;     /* Punktdurchmesser */
  --tl-date-fs: 0.85rem;
  --tl-date-lh: 1.4;
  --tl-title-fs: 1.15rem;
  --tl-title-lh: 1.3;
  --tl-title-mt: 0.1rem;
  /* Mitte der Titelzeile, von der Oberkante des Eintrags aus */
  --tl-mid: calc(
    var(--tl-date-fs) * var(--tl-date-lh)
    + var(--tl-title-mt)
    + var(--tl-title-fs) * var(--tl-title-lh) / 2
  );
  /* Oberkante des Punktes, damit seine Mitte auf --tl-mid liegt */
  --tl-top: calc(var(--tl-mid) - var(--tl-dot) / 2);
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding-left: 3rem;
  padding-block: 0 2.4rem;
}

/* Die Linie wird pro Eintrag gezeichnet, nicht einmal über den ganzen
   Container. Nur so kann sie exakt im letzten Punkt enden, ohne dass die
   Höhe des letzten Eintrags bekannt sein muss (Kundenfeedback: „strahl in
   Modul 5 enden lassen"). */
.timeline-item { position: relative; padding-bottom: 1.8rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(var(--tl-x) - 3rem - var(--tl-w) / 2);
  top: 0;
  bottom: 0;
  width: var(--tl-w);
  background: var(--accent);
}
/* Erster Eintrag: Linie beginnt in der Mitte seines Punktes, oberhalb davon
   liegt nichts mehr. Letzter Eintrag: Linie endet in der Mitte seines Punktes. */
.timeline-item:first-child::after { top: var(--tl-mid); }
.timeline-item:last-child::after {
  bottom: auto;
  height: var(--tl-mid);
}
.timeline-item:first-child:last-child::after { display: none; }
.timeline-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--tl-x) - 3rem - var(--tl-dot) / 2);
  top: var(--tl-top);
  width: var(--tl-dot); height: var(--tl-dot);
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--accent);
  box-sizing: border-box;
}
/* Meilensteine (Kick-off, Abschluss) bekommen einen gefüllten Punkt statt
   einer zweiten Farbe — eine Sektion, eine Farbe. */
.timeline-item.milestone::before { background: var(--accent); }
.timeline-item .tl-date {
  font-size: var(--tl-date-fs);
  line-height: var(--tl-date-lh);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.timeline-item h3,
.timeline-item h4 {
  font-size: var(--tl-title-fs);
  line-height: var(--tl-title-lh);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: var(--tl-title-mt);
}
.timeline-item p { color: var(--grey); font-size: 0.92rem; margin-top: 0.15rem; }

/* price cards */
.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s, box-shadow 0.3s;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.price-card .price-label { font-weight: 700; color: var(--grey); font-size: 0.92rem; }
.price-card .price-value {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0.4rem 0;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.price-card .price-note { font-size: 0.8rem; color: var(--grey); }

/* media frames */
.media-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.media-frame img { width: 100%; }
.media-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--grey);
  margin-top: 0.9rem;
}

.book-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: stretch;
}
.book-card {
  flex: 1 1 240px;
  max-width: 330px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.book-card img { width: 86px; border-radius: 6px; box-shadow: 0 8px 20px -6px rgba(7, 7, 15, 0.35); }
.book-card strong { display: block; font-size: 0.95rem; line-height: 1.4; color: var(--ink); }
.book-card span { font-size: 0.82rem; color: var(--grey); }

/* webinar card */
.webinar-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 880px) { .webinar-card { grid-template-columns: 1fr; } }
.webinar-card .wb-media { position: relative; min-height: 260px; background: var(--mist); }
.webinar-card .wb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.2rem; }
.webinar-card .wb-body { padding: clamp(1.6rem, 3.5vw, 2.8rem); }
.webinar-card .wb-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.webinar-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.3rem 0; }
.webinar-meta .chip { background: var(--mist); border-color: transparent; color: var(--ink); }
.webinar-card .wb-body p { color: var(--grey); font-size: 0.97rem; }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal-hero {
  background: var(--paper);
  color: var(--ink);
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem)) 0 clamp(2.5rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
}
.legal-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; position: relative; z-index: 1; }
.legal-hero .container { position: relative; z-index: 1; }

.legal-body { max-width: 800px; margin-inline: auto; padding-block: clamp(3rem, 7vw, 5rem); }
.legal-body h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 2.2em 0 0.7em; }
.legal-body h3 { font-size: 1.18rem; font-weight: 800; margin: 1.8em 0 0.5em; }
.legal-body h4 { font-size: 1.02rem; font-weight: 800; margin: 1.5em 0 0.4em; }
.legal-body p, .legal-body li { color: var(--grey); font-size: 0.98rem; margin-bottom: 0.9em; }
.legal-body ul, .legal-body ol { padding-left: 1.4rem; margin-bottom: 1.2em; }
.legal-body a { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(40, 0, 255, 0.25); }
.legal-body a:hover { border-color: var(--blue); }
.legal-body strong { color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: #c9d0d8;
  padding: calc(clamp(3.5rem, 7vw, 5.5rem) + 10px) 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background: var(--brand-band);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 38px; width: auto; margin-bottom: 1.2rem; }
.footer-brand p { font-size: 0.92rem; max-width: 34ch; }
/* Die Spaltentitel waren <h3>. Auf den Rechtsseiten folgte damit direkt nach
   der H1 eine H3 (Ueberschriftensprung, SEO-Audit 09/2026); sie sind jetzt
   <p class="footer-title"> mit identischer Optik. */
.footer-col h3,
.footer-col .footer-title {
  color: #fff;
  margin-top: 0;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.2rem; }
.footer-col li { padding-block: 0.25rem; }
.footer-col a {
  display: inline-block;
  padding-block: 0.25rem;
  color: #c9d0d8;
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
.footer-col a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.footer-social {
  display: inline-flex;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-light);
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.footer-social svg { width: 19px; height: 19px; }
.footer-social:hover { background: var(--accent); color: var(--accent-on); transform: translateY(-3px); }
.footer-social:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.footer-bottom {
  border-top: 1px solid var(--line-light);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* big watermark word */
.footer-watermark {
  position: absolute;
  bottom: -0.18em;
  left: 50%;
  translate: -50% 0;
  font-size: clamp(5rem, 16vw, 13rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.028);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* ==========================================================================
   Kundencases
   Kundenfeedback 08/2026: „Bei den Kundenreferenzen sollen konkrete Cases zu
   sehen sein, in denen die Zusammenarbeit beschrieben ist." Quelle sind die
   LinkedIn-Beiträge; die Karte verlinkt auf den Originalbeitrag.
   ========================================================================== */

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.case-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Farbfläche als Kartenkopf: das Kundenlogo sitzt auf einem Vollton, so wie
   die Kundenkacheln auf theknaps.com. */
.case-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--case-color, var(--accent));
  padding: clamp(1.2rem, 3vw, 2rem);
}
.case-logo-plate {
  width: 190px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: #fff;
}
.case-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.case-media img[src*="deutsche-bahn"] { transform: translateY(-14%) scale(0.48); }
.case-body { padding: clamp(1.2rem, 2.5vw, 1.7rem); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.case-client {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.case-body h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.case-body p { color: var(--grey); font-size: 0.95rem; }
.case-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.case-tags span {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey);
}
.case-more {
  margin-top: auto;
  padding-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-ink);
}
.case-card:hover .case-more .arr { transform: translateX(4px); }
.case-more .arr { transition: transform 0.22s; }

/* ==========================================================================
   Bildergalerie (Impressionen)
   Kundenfeedback 08/2026: „Haben noch ein paar Bilder als Impression Galerie.
   Also einfach hier durchklickbare gallery erstellen mit platzhaltern solange
   die bilder noch nicht da sind."
   ========================================================================== */

/* Kundenfeedback 09/2026: „Bildergallerie bitte zentrieren auf der Seite und
   vergrößern." Die Bühne wird über ihr 16:9 und max-height gemessen; das
   frühere max-height von 520px hielt sie bei ~920px Breite und damit
   linksbündig im 1304px breiten Container. Jetzt begrenzt die Galerie selbst
   die Breite und steht mittig. */
.gallery { position: relative; max-width: 1140px; margin-inline: auto; }
.gallery-stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 16 / 9;
  max-height: 660px;
  border: 1px solid var(--line);
}
.gallery-stage figure { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; }
.gallery-stage figure[data-active] { opacity: 1; }
.gallery-stage img { width: 100%; height: 100%; object-fit: cover; }
.gallery-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--mist);
  color: var(--grey);
  /* Ohne farbigen Rahmen (Kundenfeedback 09/2026: „Orangenen Rahmen des
     Bildplatzhalters entfernen"). */
}
.gallery-placeholder span { font-size: 0.95rem; font-weight: 700; max-width: 32ch; }
.gallery-caption {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--grey);
  min-height: 1.5em;
}
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1rem;
}
.gallery-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  transition: background 0.22s, color 0.22s, transform 0.22s;
}
.gallery-btn svg { width: 18px; height: 18px; }
.gallery-btn:hover { background: var(--accent); color: var(--accent-on); transform: scale(1.05); }
.gallery-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.gallery-dots { display: flex; gap: 0.15rem; }
/* Sichtbarer Punkt 10px, Klickfläche 26px (WCAG 2.2 Target Size). */
.gallery-dots button {
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
}
.gallery-dots button::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #9aa4b0;
  transition: background 0.22s, transform 0.22s;
}
.gallery-dots button[aria-current="true"]::before { background: var(--accent); transform: scale(1.35); }
.gallery-dots button:hover::before { background: var(--accent-ink); }
.gallery-dots button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ==========================================================================
   Archiv vergangener Mediationstage — Flipcards
   Kundenfeedback 08/2026 (BMT → Ticket-Sektion): „ganz unten eine Übersicht
   der letzten Mediationstage inkl. Thema und Flyer Link als Flipcard."
   ========================================================================== */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
@media (max-width: 900px) { .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .archive-grid { grid-template-columns: 1fr; } }
.archive-card { perspective: 1400px; }
.archive-inner {
  position: relative;
  display: grid;
  min-height: 200px;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.archive-card:hover .archive-inner,
.archive-card:focus-within .archive-inner { transform: rotateY(180deg); }
.archive-face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-sm);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
}
.archive-front { background: var(--accent); color: var(--accent-on); }
.archive-front .archive-year { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.archive-front .archive-topic { font-size: 0.95rem; font-weight: 700; line-height: 1.35; }
.archive-back {
  transform: rotateY(180deg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.archive-back .archive-speaker { font-size: 0.8rem; font-weight: 700; color: var(--grey); }
.archive-back p { font-size: 0.88rem; color: var(--grey); }
@media (prefers-reduced-motion: reduce) {
  .archive-inner { transition: none; }
}

/* ==========================================================================
   Tagesablauf
   Kundenfeedback 08/2026 (BMT): „Tagesablauf darstellen (weniger Download
   Links)" — der Ablauf steht auf der Seite statt hinter einer PDF.
   ========================================================================== */

.schedule {
  display: grid;
  gap: 0;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1rem, 3.5vw, 2.4rem);
  background: var(--accent);
  color: var(--accent-on);
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-lg);
}
.schedule-row {
  display: grid;
  grid-template-columns: minmax(11rem, 13.5rem) 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 1rem 0.25rem;
  align-items: start;
}
.schedule-row + .schedule-row { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.schedule-time {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent-on);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.schedule-time::after {
  content: "";
  flex: 1 1 auto;
  min-width: 2rem;
  height: 10px;
  background:
    radial-gradient(circle at right center, rgba(255, 255, 255, 0.96) 0 4px, transparent 4.5px),
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)) left center / calc(100% - 4px) 2px no-repeat;
}
.schedule-what strong {
  display: block;
  color: var(--accent-on);
  font-size: 1.04rem;
  font-weight: 750;
  line-height: 1.4;
}
.schedule-what span {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}
@media (max-width: 560px) {
  .schedule { padding: 0.7rem 1rem; border-radius: var(--radius); }
  .schedule-row { grid-template-columns: 1fr; gap: 0.4rem; padding: 0.9rem 0; }
  .schedule-time { width: min(100%, 15.5rem); font-size: 0.86rem; }
  .schedule-what strong { font-size: 0.98rem; }
}

/* ==========================================================================
   Kleinteile
   ========================================================================== */

/* Newsletter-Opt-in im Kontaktformular — steht bewusst UNTER dem Button
   (Kundenfeedback 08/2026). */
.form-consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--grey);
}
.form-consent input {
  margin-top: 0.2rem;
  width: 24px; height: 24px;
  flex-shrink: 0;
  accent-color: var(--blue);
}
.form-consent input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Autor auf eigener Zeile (Kundenfeedback BMT → Weitere Lektüre). */
.book-card .book-author {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-ink);
}

/* Status-Hinweis im Hero, z. B. „Termin 2027: tbd". */
.hero-note {
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 46ch;
  background: var(--mist);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.75rem 1.1rem;
  font-size: 0.92rem;
  color: var(--grey);
}
.hero-note strong { color: var(--ink); }

/* ==========================================================================
   Helpers
   ========================================================================== */

.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.actions-center { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.back-to-top {
  position: fixed;
  right: 1.4rem; bottom: 1.4rem;
  z-index: 90;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 12px 30px -8px rgba(7, 7, 15, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--blue); }

/* ==========================================================================
   Mobile-Feinschliff — Kundenfeedback 09/2026 (Mobile)
   Sektionen, die mobil untereinander standen, werden zu horizontalen
   Swipe-Tracks. Muster durchgaengig wie beim bestehenden Team-Track:
   overflow-x:auto + scroll-snap-type:x mandatory + scrollbar-width:none,
   keine zusaetzliche Library. Desktop bleibt in allen Punkten unveraendert.
   Gemeinsame Helfer-Klasse: .tk-swipe (nur innerhalb der Media-Queries aktiv).
   ========================================================================== */

/* Kundenfeedback 09/2026 (Mobile): "Was wir machen" — Angebotskacheln als
   swipebare Reihe, das Detailpanel bleibt darunter stehen. */
@media (max-width: 620px) {
  /* Ohne min-width:0 bleibt die Gruppe als Grid-Item auf min-width:auto und
     der Flex-Track wuerde auf max-content aufgehen (Track 728px breit im
     390px-Viewport) statt zu scrollen. */
  .offer-group { min-width: 0; }
  .offer-tiles {
    min-width: 0;
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.7rem;
    /* Negative Margin + Padding: der Track laeuft randlos bis zur
       Kartenkante, die Kacheln behalten trotzdem ihren Innenabstand. */
    margin-inline: calc(-1 * clamp(1.1rem, 2.5vw, 2rem));
    padding-inline: clamp(1.1rem, 2.5vw, 2rem);
    /* Kundenfeedback 09/2026: aktive Rahmen und angehobene Kacheln brauchen
       auch oberhalb Platz und duerfen nicht vom Scroll-Viewport clippen. */
    padding-block: 0.5rem 0.4rem;
  }
  .offer-tiles::-webkit-scrollbar { display: none; }
  .offer-tiles > .offer-tile {
    flex: 0 0 62%;
    scroll-snap-align: center;
    /* Die Spannen-Regeln der Grid-Fassung duerfen im Flex-Track nicht greifen. */
    grid-column: auto;
  }
  .offer-tiles[style*="--n:5"] > :last-child { grid-column: auto; }
  .offer-hint { display: none; }
}

/* Kundenfeedback 09/2026 (Mobile): Trainingsinhalte-Karten swipebar. */
@media (max-width: 640px) {
  .flip-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    /* Platz fuer den Kartenschatten, der sonst vom Track geclippt wird. */
    padding-block: 0.5rem 1.2rem;
  }
  .flip-grid::-webkit-scrollbar { display: none; }
  .flip-grid > * {
    flex: 0 0 85vw;
    scroll-snap-align: center;
  }
  /* Im Swipe-Track kein Scroll-Reveal (seitlich liegende Karten blieben leer). */
  html.tk-js .flip-grid .reveal { opacity: 1; transform: none; transition: none; }
}

/* Kundenfeedback 09/2026 (Mobile): Personenkarten starten auf der gleichen
   Inhaltskante wie der Rest der Seite. Ein kleiner Schatten-Puffer bleibt,
   ohne den Track bis an den Viewportrand zu ziehen. */
@media (max-width: 700px) {
  .team-grid {
    margin-inline: -0.6rem;
    padding-inline: 0.6rem;
    padding-block: 0.6rem 1.4rem;
  }
}

/* Kundenfeedback 09/2026 (Mobile): "Unsere Kunden" — die Case-Kacheln ueber
   den Logo-Baendern standen untereinander, jetzt swipebar. (Die beiden
   Logo-Baender laufen bereits horizontal als .marquee.) */
@media (max-width: 760px) {
  .case-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-block: 0.5rem 1.2rem;
  }
  .case-grid::-webkit-scrollbar { display: none; }
  .case-grid > .case-card {
    flex: 0 0 85vw;
    scroll-snap-align: center;
  }
  html.tk-js .case-grid .reveal { opacity: 1; transform: none; transition: none; }
}

/* Kundenfeedback 09/2026 (Mobile): Kundenstimmen ohne Pfeile, dafuer echter
   Swipe-Track. Der Desktop-Slider mit seitlichen Vorschau-Karten und
   transform-Track bleibt unveraendert; das JS setzt den Transform unterhalb
   von 760px nicht mehr. */
@media (max-width: 760px) {
  .testi-slider .testi-arrow,
  .testi-side { display: none !important; }
  .testi-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: calc(var(--radius) + 6px);
  }
  .testi-viewport::-webkit-scrollbar { display: none; }
  .testi-track {
    transform: none !important;
    display: flex;
    gap: 1rem;
    transition: none;
  }
  .testi-track > .testi-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
}

/* Kundenfeedback 09/2026 (Mobile): Newsletter-Box lief ueber den Viewport.
   Eingabezeile bricht um, Ueberschrift darf trennen, nichts breiter als
   der verfuegbare Platz. */
@media (max-width: 880px) {
  .newsletter-card {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .newsletter-card h2 { word-break: break-word; overflow-wrap: anywhere; }
  .newsletter-form { min-width: 0; }
  .newsletter-input-row { gap: 0.5rem; }
  .newsletter-input-row input {
    min-width: 0;
    width: 100%;
    padding: 0.7rem 0.9rem;
  }
  .newsletter-input-row .btn {
    width: 100%;
    justify-content: center;
    border-radius: 999px;
  }
}

/* Kundenfeedback 09/2026 (Mobile): "Die letzten Mediationstage." swipebar.
   Reine CSS-Aenderung an der bestehenden Klasse, der Seiteninhalt in der DB
   bleibt unberuehrt. */
@media (max-width: 560px) {
  .archive-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-block: 0.5rem 1.2rem;
  }
  .archive-grid::-webkit-scrollbar { display: none; }
  .archive-grid > .archive-card {
    flex: 0 0 82vw;
    scroll-snap-align: center;
  }
}