/* ROTH INSTITUT · main.css v2 — Grau trägt, Orange ist Nuance, Kacheln sind rund */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: hidden;
  font-family: var(--font-text);
  font-size: var(--body); line-height: 1.65;
  color: var(--text); background: var(--papier);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--grau-900); color: var(--papier); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: var(--r-klein); }
html { scrollbar-color: var(--grau-400) var(--papier); }
input, textarea { caret-color: var(--petrol); }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: pretty; } /* Luke 11.09.: nicht balance – das kürzt Zeile 1 künstlich; pretty füllt die Zeile und vermeidet nur ein einzelnes Schlusswort */
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link { position: absolute; left: var(--s4); top: -56px; z-index: 100; background: var(--grau-900); color: var(--text-invers); padding: var(--s3) var(--s5); border-radius: var(--r-pill); transition: top var(--t-schnell) var(--ease); }
.skip-link:focus-visible { top: var(--s4); }
.icon { width: 1.35em; height: 1.35em; vertical-align: -0.25em; flex: none; } /* Luke 07.09.: Icons etwas größer */

/* width:100% ist Pflicht — in Flex-Containern (Hero, Seitenkopf) hebt margin-inline:auto sonst das Stretching auf */
.rahmen { width: 100%; max-width: calc(var(--inhalt) + 2 * var(--rand)); padding-inline: var(--rand); margin-inline: auto; }

/* ---------- Typo-Bausteine ---------- */
.display { font-family: var(--font-display); font-size: var(--display); font-weight: 800; line-height: 1.0; letter-spacing: -0.025em; }
.h2 { font-family: var(--font-display); font-size: var(--h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.018em; }
.h3 { font-family: var(--font-display); font-size: var(--h3); font-weight: 600; line-height: 1.35; }
.label {
  font-family: var(--font-display); font-size: var(--label); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--text-2);
}
.zahl { font-variant-numeric: tabular-nums; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-2); }

/* Kennung: kleine Versal-Zeile ohne Zierstrich (z. B. Bildlabels, Protokolltypen) */
.kennung span, .kennung {
  font-family: var(--font-display); font-size: var(--label); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
}
.auf-dunkel .kennung span { color: rgba(255,255,255,.78); }

/* Unterstrichene Überschrift — gelbe Linie unter dem Textblock statt Kicker darüber */
.unterstrichen {
  display: table;
  padding-bottom: 0.34em;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: 0 100%;
}
.sektion--dunkel .unterstrichen, .auf-dunkel .unterstrichen { background-image: linear-gradient(var(--orange), var(--orange)); }

/* ---------- Buttons: Gelb fährt beim Hover von unten ein ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 54px; padding: 0 var(--s6);
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform var(--t-schnell) var(--ease), color var(--t-normal) var(--ease),
              border-color var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
}
/* der einfahrende Gelb-Vorhang */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--orange);
  transform: translateY(101%);
  transition: transform 340ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn .icon { transition: transform var(--t-normal) var(--ease), color var(--t-normal) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: translateY(0); }
  .btn:hover { color: var(--grau-950); border-color: var(--orange); box-shadow: 0 10px 30px -12px rgba(255,191,0,.55); }
  .btn:hover .icon { color: var(--grau-950); transform: translateX(3px); }
}
/* Tastatur-Fokus zeigt denselben Zustand */
.btn:focus-visible::before { transform: translateY(0); }
.btn:focus-visible { color: var(--grau-950); }
.btn:focus-visible .icon { color: var(--grau-950); }

.btn--voll { background: var(--grau-900); color: var(--text-invers); }
.btn--voll .icon { color: var(--orange); }
.btn--linie { background: transparent; color: var(--text); border-color: var(--grau-400); }
.btn--hell { background: var(--papier); color: var(--grau-950); }
.btn--hell .icon { color: var(--orange); }
.btn--glas { background: rgba(247,246,244,.10); color: var(--weiss); border-color: rgba(247,246,244,.55); backdrop-filter: blur(8px); }


/* ---------- Kopf: floating Pill-Navigation ---------- */
.kopf { position: fixed; inset: var(--s5) 0 auto 0; z-index: 60; pointer-events: none; }
/* Die Pille bleibt immer dunkles Glas — sie wird beim Scrollen nur kompakter und etwas dichter,
   damit weißer Text auch über hellen Sektionen trägt. Kein Wechsel auf Weiß. */
.kopf__pille {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s6);
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  border-radius: var(--r-pill);
  background: rgba(30,29,29,.34);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: background var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease),
              box-shadow var(--t-normal) var(--ease), padding var(--t-normal) var(--ease);
}
.kopf.ist-fest .kopf__pille {
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  background: rgba(30,29,29,.80);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 34px -16px rgba(30,29,29,.55);
}
/* Marke: immer die helle Fassung, nur die Größe ändert sich */
.marke { display: flex; align-items: center; text-decoration: none; flex: none; }
.marke__logo { height: 64px; width: auto; transition: height var(--t-normal) var(--ease); } /* Logo v5 (07.09.): breiter mit Unterzeile, deshalb höher als die 54px der Vorfassung */
.marke__logo--kompakt { display: none; }
.kopf.ist-fest .marke__logo { height: 44px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
.nav a:not(.btn) {
  position: relative;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
  color: rgba(255,255,255,.82); text-decoration: none;
  padding: var(--s2) 2px;
  transition: color var(--t-schnell) var(--ease), font-size var(--t-normal) var(--ease);
}
.kopf.ist-fest .nav a:not(.btn) { font-size: 0.875rem; }
/* gelber Unterstrich, fährt von links ein */
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:not(.btn):hover { color: var(--weiss); }
  .nav a:not(.btn):hover::after { transform: scaleX(1); }
}
.nav a:not(.btn):focus-visible { color: var(--weiss); }
.nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
.nav a:not(.btn)[aria-current="page"] { color: var(--weiss); }
.nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
/* Loop A4 (09.09., Sarah C.): aktive Sektion auf der Startseite – nur der gelbe Unterstrich, keine Textfarbe */
.nav a:not(.btn).ist-aktiv::after { transform: scaleX(1); }
.nav .btn { min-height: 46px; padding: 0 var(--s5); white-space: nowrap; }
.nav-knopf { display: none; margin-left: auto; width: 46px; height: 46px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-pill); color: var(--weiss); cursor: pointer; }
/* Zwischen 1025 und 1180 px steht die Navigation noch neben dem Logo, der Platz ist aber knapp:
   Logo, Abstände und CTA-Polster etwas enger, damit „Gespräch vereinbaren“ in der Pille bleibt. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .kopf__pille { gap: var(--s4); padding-left: var(--s4); }
  .kopf .marke__logo { height: 46px; }
  .kopf.ist-fest .marke__logo { height: 40px; }
  .nav { gap: var(--s4); }
  .nav .btn { padding: 0 var(--s4); }
}
@media (min-width: 1025px) and (max-width: 1090px) {
  .kopf .marke__logo { height: 40px; }
  .kopf.ist-fest .marke__logo { height: 36px; }
  .nav { gap: var(--s3); }
  .nav .btn { padding: 0 var(--s3); }
}


/* ---------- Hero: vollflächig ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 128px; background: var(--grau-900); color: var(--weiss);
}
.hero__bild { position: absolute; inset: -4%; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 29% 26%; }
.ist-geladen .hero__bild { animation: heroZoom 16s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.045); } }
.hero__schleier {
  position: absolute; inset: 0;
  background:
    /* Der senkrechte Verlauf hatte bei 34 % eine helle Delle — genau dort liegt der
       Textblock. Über hellen Fensterflächen kam die kleine Suchzeile nur auf 1,5:1.
       Die Delle ist jetzt geschlossen (.10 -> .30), der seitliche Verlauf trägt
       links etwas weiter. Das Bild bleibt sichtbar, der Text wird verlässlich. */
    linear-gradient(180deg, rgba(30,29,29,.40) 0%, rgba(30,29,29,.30) 34%, rgba(30,29,29,.52) 74%, rgba(30,29,29,.76) 100%),
    linear-gradient(100deg, rgba(30,29,29,.70) 0%, rgba(30,29,29,.46) 34%, rgba(30,29,29,.14) 60%, transparent 78%);
}
.hero__inhalt { position: relative; z-index: 2; padding-bottom: var(--s7); }


.hero h1 {
  text-shadow: 0 2px 24px rgba(20,20,18,.42);
  font-size: var(--display); font-weight: 800; line-height: 0.99;
  letter-spacing: -0.03em; margin-top: var(--s5);
}
/* Unterlängen (g, p) brauchen bei line-height 0.99 Platz unter der Grundlinie: 0.22em
   Innenabstand, per negativem Außenabstand zurückgeholt, damit der Zeilenabstand bleibt.
   Der Reveal-Versatz ist entsprechend größer, sonst lugt die Zeile vor der Animation vor. */
.hero h1 .zeile { display: block; overflow: hidden; padding: 0.04em 0.12em 0.22em 0; margin: -0.04em -0.12em -0.2em 0; }
.hero h1 .zeile-innen { display: block; transform: translateY(135%); }
.ist-geladen .hero h1 .zeile-innen { transform: translateY(0); transition: transform 820ms var(--ease); }
.ist-geladen .hero h1 .zeile:nth-child(2) .zeile-innen { transition-delay: 130ms; }
.ist-geladen .hero h1 .zeile:nth-child(3) .zeile-innen { transition-delay: 260ms; }
.hero h1 .betont { color: var(--orange); }

/* Suchsprache-Zeile in der H1 (SEO-Verfahren: gesuchter Begriff zuerst, Claim danach).
   Die H1 trug bisher nur "Führung wirksam entwickeln" — Markensprache mit 0 Suchen/Monat.
   Der gesuchte Begriff steht jetzt semantisch an erster Stelle, bleibt aber visuell
   der Unterzeile untergeordnet, damit der Claim die Bühne behält. */
.hero h1 .zeile--such {
  font-size: clamp(0.9rem, 1.35vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  /* Weiß statt gedämpft: Die Zeile steht auf einem hellen Foto — #B3B3B1 war dort
     nicht sicher lesbar. Weiß mit kräftigerem Schatten trägt auf jedem Bildausschnitt,
     bleibt durch Größe und Gewicht trotzdem dem Claim untergeordnet. */
  color: var(--text-invers);
  margin-bottom: 0.55em;
  text-shadow: 0 1px 3px rgba(20,20,18,.85), 0 2px 18px rgba(20,20,18,.6);
}
/* Animationsversatz um eine Zeile nachziehen — die vierte Zeile braucht ihren Takt. */
.ist-geladen .hero h1 .zeile:nth-child(4) .zeile-innen { transition-delay: 390ms; }
.hero__lead {
  text-shadow: 0 1px 12px rgba(20,20,18,.5);
  font-size: clamp(1.02rem, 1.2vw, 1.1875rem); line-height: 1.6;
  color: rgba(255,255,255,.86); margin-top: var(--s6);
  opacity: 0; transform: translateY(12px);
  transition: opacity 600ms var(--ease) 520ms, transform 600ms var(--ease) 520ms;
}
.ist-geladen .hero__lead { opacity: 1; transform: none; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease) 680ms, transform 600ms var(--ease) 680ms; }
.ist-geladen .hero__ctas { opacity: 1; transform: none; }
.hero__fuss {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  padding-top: var(--s5); padding-bottom: var(--s6);
  border-top: 1px solid rgba(255,191,0,.35);
  opacity: 0; transition: opacity 700ms var(--ease) 1000ms;
}
.ist-geladen .hero__fuss { opacity: 1; }
.hero__merkmale { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.hero__merkmale span { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.hero__merkmale .icon { color: var(--orange); width: 1.2em; height: 1.2em; }
.scroll-hinweis { display: inline-flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); flex: none; }
.scroll-hinweis .punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: cueDrop 2.2s var(--ease) infinite; }
@keyframes cueDrop { 0%,100% { transform: translateY(-3px); opacity: 1; } 50% { transform: translateY(3px); opacity: .4; } }

/* ---------- Sektionen ---------- */
.sektion { position: relative; padding-block: var(--sektion-y); }
.sektion--weiss { background: var(--weiss); }
.sektion--papier2 { background: var(--papier-2); }
.sektion--dunkel { background: var(--grau-900); color: var(--text-invers); }
.sektion--dunkel .lead { color: var(--text-invers-2); }
.sektion__kopf { max-width: none; }
.sektion__kopf .h2 { margin-top: var(--s5); }
.sektion__kopf .lead { margin-top: var(--s5); max-width: none; } /* Luke 07.09.: Leads auf volle Breite */
/* Sektionskopf einheitlich: Überschrift über die volle Breite, Einleitung darunter */
.sektion__kopf--breit { max-width: none; display: block; }
.sektion__kopf--breit .lead { margin-top: var(--s5); max-width: none; }


/* Statement-Platte */
.platte { position: relative; overflow: hidden; padding-block: clamp(104px, 12vw, 168px); text-align: center; background: var(--grau-900); color: var(--text-invers); }
.platte__schein { position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 92%; height: 165%; background: radial-gradient(ellipse at center, rgba(255,191,0,.13), transparent 62%); pointer-events: none; }
.platte h2 { position: relative; font-size: clamp(1.9rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin-inline: auto; }
.platte .w { color: #55554F; transition: color var(--t-normal) linear; }
.platte .w.ist-an { color: var(--text-invers); }
.platte .w.ist-orange.ist-an { color: var(--orange); }
.platte__quelle { position: relative; margin-top: var(--s6); color: var(--orange); }

/* ---------- Kachel-Grid (Lösungsbereiche) ---------- */
.kacheln { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s5); margin-top: var(--s8); }
.kacheln--gespiegelt { grid-template-columns: 1fr 1.35fr; margin-top: var(--s5); }
.kachel {
  position: relative; overflow: hidden;
  border-radius: var(--r-kachel);
  min-height: 460px; display: flex; align-items: flex-end;
  background: var(--grau-900); color: var(--weiss);
  box-shadow: var(--schatten-bild); text-decoration: none;
}
.kachel__bild { position: absolute; inset: 0; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 3.6s var(--ease); }
.kachel__schleier { position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) { .kachel:hover .kachel__bild img { transform: scale(1.05); } }
.kachel:active { transform: scale(0.995); }
/* MVP2 (09.09.): Nummern 01–04 als Gestaltungselement wie in der Broschüre – große gelbe Ziffer, Label klein in Versalien */
.kachel__nr {
  position: absolute; top: var(--s4); left: var(--s6); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.kachel__nr b {
  font-family: var(--font-display); font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 800; line-height: 0.9;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--orange); margin-left: -0.06em;
}
.kachel__nr i {
  font-style: normal; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grau-950); background: var(--papier); border-radius: var(--r-pill); padding: 5px 12px;
}
/* Dunkler Fleck hinter der Ziffer, damit Gelb auch auf hellen Bildstellen ≥ 3:1 hält (Weiß·0,15 + Anthrazit·0,85 → 6,3:1) */
.kachel__schleier { background: radial-gradient(circle at 0 0, rgba(30,29,29,.85) 0, rgba(30,29,29,.55) 120px, rgba(30,29,29,0) 260px), linear-gradient(180deg, rgba(30,29,29,.30) 0%, rgba(30,29,29,.24) 30%, rgba(30,29,29,.72) 62%, rgba(30,29,29,.94) 100%); }
.balken-oben::before { content: ""; display: block; width: 96px; height: 4px; background: var(--orange); border-radius: 2px; margin-bottom: var(--s5); }
.einstieg__nr, .fuss__nr { font-family: var(--font-display); font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; margin-right: 0.45em; }
.seitenkopf__titel { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s5); align-items: start; }
.seitenkopf__nr { grid-row: 1 / span 2; font-family: var(--font-display); font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--orange); font-variant-numeric: tabular-nums; margin-top: 0.12em; }
.seitenkopf__titel .seitenkopf__keyword, .seitenkopf__titel .seitenkopf__h2 { grid-column: 2; }
@media (max-width: 700px) {
  .kachel__nr b { font-size: clamp(2.75rem, 12vw, 3.5rem); }
  .kachel__koerper { padding-top: calc(var(--s6) + 104px); }
  .kachel { min-height: 0; }
  .seitenkopf__titel { grid-template-columns: 1fr; }
  .seitenkopf__nr { grid-row: auto; font-size: clamp(2.75rem, 12vw, 3.5rem); margin-bottom: var(--s2); }
  .seitenkopf__titel .seitenkopf__keyword, .seitenkopf__titel .seitenkopf__h2 { grid-column: 1; }
}
.kachel__koerper { position: relative; z-index: 2; padding: calc(var(--s7) + 128px) var(--s7) var(--s7); width: 100%; } /* MVP2: Platz für die große Ziffer oben, Text kann nie darunter rutschen */
.kachel__koerper h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
.kachel__takt { display: block; margin-top: var(--s3); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.kachel__koerper p { margin-top: var(--s4); font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,.84); }
.kachel__mehr { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s5); font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--weiss); border-bottom: 1.5px solid rgba(255,191,0,.75); padding-bottom: 3px; }
.kachel__mehr .icon { color: var(--orange); transition: transform var(--t-normal) var(--ease); }
@media (hover: hover) and (pointer: fine) { .kachel:hover .kachel__mehr .icon { transform: translate(3px,-3px); } }
/* Luke 09.09.: „Überschriften und Texte bitte immer auf eine Höhe.“ Die beiden Kacheln einer
   Reihe teilen sich die Zeilen des äußeren Rasters (subgrid) – Überschrift, Taktzeile, Text und
   Link beginnen dadurch auf gleicher Höhe, auch wenn eine Überschrift zweizeilig umbricht.
   Die Innenabstände oben (Platz für die Ziffer) und unten sind eigene Zeilen, weil eigene
   Polsterung im Subgrid die Zeilen gegeneinander verschieben würde. Nur im Zweispalter. */
@media (min-width: 1181px) {
  .kacheln, .kacheln--gespiegelt {
    row-gap: 0; column-gap: var(--s5);
    grid-template-rows: calc(var(--s7) + 128px) 1fr auto auto auto auto var(--s7);
  }
  .kachel { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; }
  .kachel__koerper { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; padding: 0 var(--s7); }
  .kachel__koerper h3 { grid-row: 3; }
  .kachel__takt { grid-row: 4; }
  .kachel__koerper p { grid-row: 5; }
  .kachel__mehr { grid-row: 6; justify-self: start; align-self: start; }
}

/* ---------- Analyse: zwei Perspektiven ---------- */
.perspektiven { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5); margin-top: var(--s8); }
.perspektive {
  position: relative; border-radius: var(--r-gross); overflow: hidden;
  background: var(--weiss); border: 1px solid var(--grau-200); color: var(--text); /* Karte ist immer weiß – Text darf nicht die Sektionsfarbe erben (Luke 08.09.) */
  padding: var(--s7); box-shadow: var(--schatten-1);
  display: flex; flex-direction: column;
}
.perspektive::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--marke-farbe, var(--gold)); }

/* ── A5 Bewegungspaket (Sebastian: "Gibt es noch weitere Mega Effekte?") ──────
   Die Seite trägt bereits Ken-Burns, Zeilen-Reveal, Pin-Galerie und Scroll-Text-Fill.
   Ergänzt werden deshalb bewusst nur zwei ruhige Effekte statt mehr Effektdichte —
   Sebastians Vorbilder (exoape, clay.global) leben von Präzision, nicht von Menge.

   1) Der gelbe Unterstrich zeichnet sich beim Einscrollen von links nach rechts.
      Das Element ist das Erkennungszeichen der Marke — es soll entstehen, nicht
      einfach da sein. Nutzt die vorhandene .ist-da-Mechanik, kein neues JS. */
.hat-js .zeigen.unterstrichen,
.hat-js .zeigen .unterstrichen { background-size: 0% 4px; }
.hat-js .zeigen.ist-da.unterstrichen,
.hat-js .zeigen.ist-da .unterstrichen {
  background-size: 100% 4px;
  transition: background-size 760ms var(--ease) 180ms;
}

/* 2) Sanfter Parallax auf Sektionsbildern: 
      --parallax wird im Scroll-Handler gesetzt (ein rAF, gemeinsam mit den übrigen). */
.parallax { will-change: transform; }
.parallax > img, .parallax > picture > img {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.06);
  transition: none;
}
/* Der Ueberhang aus scale(1.06) faengt die Verschiebung ab, damit an den Kanten
   keine Luecke entsteht: 28px Ausschlag bei ~600px Bildhoehe braucht ~5 % Reserve. */

/* Sebastians Feedback (Folie 15, "Brauchen wir das oben?"): Die Utility-Leiste der
   Altseite entfällt — sie nimmt dem Hero Höhe und wirkt dated. Die zwei aktiv genutzten
   Plattformen brauchen aber einen Platz: dezente Login-Gruppe in der Navigation, ohne JS
   bedienbar (details/summary), Telefon und E-Mail wandern in den Footer. */
.login { position: relative; }
.login > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: var(--klein); font-weight: 600; color: var(--weiss);
  /* Loop A2 (09.09., Sarah C./Sarah G. „Login geht unter“): Umriss-Schaltfläche statt reinem Text – die Form trägt auch dort, wo die Glas-Pille über hellen Bildstellen wenig Kontrast lässt */
  padding: 7px 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.62); border-radius: var(--r-pill);
  transition: border-color var(--t-schnell) var(--ease), background var(--t-schnell) var(--ease);
}
.login > summary:hover, .login[open] > summary { border-color: var(--weiss); background: rgba(255,255,255,.10); }
.login > summary::-webkit-details-marker { display: none; }
.login > summary::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); transition: transform 200ms var(--ease);
}
.login[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.login > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.login__menue {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  min-width: 210px; padding: 8px; display: grid; gap: 2px;
  background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: var(--r-kachel); box-shadow: var(--schatten-nav);
}
/* Spezifität muss .nav a schlagen — die Navigation setzt Weiß (auf dunkler Pille),
   das Menü steht aber auf Weiß. */
.nav .login__menue a {
  padding: 9px 12px; border-radius: var(--r-karte); font-size: var(--klein);
  color: var(--text); text-decoration: none; transition: background 160ms var(--ease);
}
.nav .login__menue a:hover, .nav .login__menue a:focus-visible { background: var(--grau-100); color: var(--text); }
.nav .login__menue a::after { display: none; }   /* kein Unterstrich-Effekt der Hauptnav */
@media (max-width: 900px) {
  .login__menue { position: static; box-shadow: none; border: 0; padding: 4px 0 0; min-width: 0; }
}

/* ---------- Lösungen: Klappmenü in der Kopfnavigation ----------
   Luke 09.09.: Im ungescrollten Zustand stand „Gespräch vereinbaren“ über den Rand der Pille
   hinaus — sechs Menüpunkte, großes Logo und der CTA passten nicht nebeneinander. Die vier
   Lösungsbereiche liegen jetzt in einem Klappmenü, oben bleiben Lösungen, Veranstaltungen,
   Institut, Login und der CTA. Ohne JavaScript bedienbar (details/summary); main.js ergänzt
   Schließen bei Klick daneben, Escape und das gegenseitige Schließen mit dem Login-Menü. */
.menue { position: relative; }
.menue > summary {
  position: relative; list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
  color: rgba(255,255,255,.82); padding: var(--s2) 2px;
  transition: color var(--t-schnell) var(--ease), font-size var(--t-normal) var(--ease);
}
.kopf.ist-fest .menue > summary { font-size: 0.875rem; }
.menue > summary::-webkit-details-marker { display: none; }
/* gelber Unterstrich wie bei den übrigen Menüpunkten */
.menue > summary::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease);
}
.menue > summary::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); transition: transform 200ms var(--ease);
}
.menue[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.menue[open] > summary, .menue > summary:hover, .menue > summary:focus-visible { color: var(--weiss); }
.menue[open] > summary::before, .menue > summary:hover::before,
.menue > summary:focus-visible::before, .menue > summary.ist-aktiv::before { transform: scaleX(1); }
.menue > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--r-karte); }
.menue__flaeche {
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 40;
  width: min(400px, calc(100vw - 40px)); padding: 10px; display: grid; gap: 2px;
  background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: var(--r-sektion); box-shadow: var(--schatten-nav);
}
.menue[open] > .menue__flaeche { animation: menue-auf 200ms var(--ease) both; }
@keyframes menue-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Spezifität muss .nav a schlagen — die Navigation setzt Weiß, das Menü steht auf Weiß. */
.nav .menue__flaeche .menue__eintrag {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: var(--s3);
  padding: 10px 12px; border-radius: var(--r-kachel); min-height: 44px;
  white-space: normal;   /* .nav a:not(.btn) setzt nowrap – im Menü müssen lange Titel umbrechen */
  color: var(--text); text-decoration: none;
  transition: background 160ms var(--ease);
}
.nav .menue__flaeche .menue__eintrag::after { display: none; }
.nav .menue__flaeche .menue__eintrag:hover, .nav .menue__flaeche .menue__eintrag:focus-visible { background: var(--grau-100); color: var(--text); }
.nav .menue__flaeche .menue__eintrag[aria-current="page"] { background: var(--grau-100); }
.menue__nr {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.15;
  letter-spacing: -0.03em; color: var(--orange); font-variant-numeric: tabular-nums;
}
.menue__text { display: grid; gap: 2px; }
.menue__text b { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; color: var(--text); }
.menue__text i { font-style: normal; font-size: 0.8125rem; line-height: 1.4; color: var(--text-2); }
.nav .menue__flaeche .menue__alle {
  margin-top: 6px; padding: 12px; border-top: 1px solid var(--grau-200);
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  color: var(--text); text-decoration: none; border-radius: 0; white-space: normal;
}
.nav .menue__flaeche .menue__alle::after { display: none; }
.nav .menue__flaeche .menue__alle .icon { color: var(--orange); transition: transform var(--t-normal) var(--ease); }
.nav .menue__flaeche .menue__alle:hover, .nav .menue__flaeche .menue__alle:focus-visible { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .nav .menue__flaeche .menue__alle:hover .icon { transform: translateX(3px); } }
/* Im aufgeklappten mobilen Menü steht die Fläche auf dunklem Grund – dort keine weiße Karte */
@media (max-width: 1024px) {
  .menue__flaeche {
    position: static; width: auto; padding: 4px 0 0; gap: 0;
    background: transparent; border: 0; box-shadow: none; animation: none;
  }
  .nav .menue__flaeche .menue__eintrag { color: var(--weiss); padding: 10px 0; border-radius: 0; }
  .nav .menue__flaeche .menue__eintrag:hover, .nav .menue__flaeche .menue__eintrag:focus-visible { background: transparent; }
  .nav .menue__flaeche .menue__eintrag[aria-current="page"] { background: transparent; }
  .menue__text b { color: var(--weiss); }
  .menue__text i { color: rgba(255,255,255,.72); }
  .nav .menue__flaeche .menue__alle { color: var(--weiss); border-top-color: rgba(255,255,255,.18); padding: 12px 0; }
  .nav .menue__flaeche .menue__alle:hover, .nav .menue__flaeche .menue__alle:focus-visible { color: var(--weiss); }
}

/* Sebastians Feedback (Folie 6): Die Sektion wirkte auf Hellgrau flach — die weißen
   Karten hoben sich mit 1,16:1 kaum von der Fläche ab. Jetzt dunkle Bühne: die Karten
   stehen mit 13,0:1 frei im Raum. Die Akzentfarben bleiben INNERHALB der weißen Karte
   und behalten damit ihre geprüften Werte (Gold-Text 4,7:1 · Petrol 8,2:1 auf Weiß) —
   auf dunklem Grund wäre Petrol mit 1,67:1 unbrauchbar. Zugleich bekommt die Seite den
   fehlenden Rhythmus: Hero → hell → DUNKEL → weiß → hellgrau → hell → dunkel. */
#analyse .perspektive { box-shadow: var(--schatten-1); border-color: var(--grau-200); color: var(--text); } /* Sektion seit 07.09. hell */
#analyse .lead { color: var(--text-2); }
.perspektive--a { --marke-farbe: var(--orange); }
.perspektive--a .perspektive__buchstabe { color: var(--grau-950); } /* Anthrazit auf Gelb */
.perspektive--b { --marke-farbe: var(--petrol-hell); }
.perspektive__kopf { display: flex; align-items: center; gap: var(--s4); }
.perspektive__buchstabe {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  color: var(--weiss); background: var(--marke-farbe, var(--petrol));   /* Rückfall: ohne Markenfarbe war die Plakette durchsichtig */
}
.perspektive h3 { font-size: 1.3125rem; font-weight: 700; line-height: 1.25; }
.perspektive__frage { margin-top: var(--s2); font-size: var(--klein); color: var(--text-2); }
.perspektive__liste { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); font-size: var(--klein); color: var(--text-2); }
.perspektive__liste li { display: flex; gap: var(--s3); align-items: baseline; }
.perspektive__liste li::before { content: ""; width: 12px; height: 2px; background: var(--marke-farbe); flex: none; transform: translateY(-4px); }
.reifegrad { margin-top: auto; padding-top: var(--s6); }
.reifegrad__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.reifegrad__balken { position: relative; height: 8px; background: var(--grau-200); border-radius: var(--r-pill); overflow: hidden; }
.reifegrad__wert { position: absolute; inset: 0; width: 100%; background: var(--marke-farbe); border-radius: var(--r-pill); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.reifegrad__ticks { display: flex; justify-content: space-between; margin-top: var(--s2); }

.gesamtbild {
  margin-top: var(--s5); border-radius: var(--r-gross); overflow: hidden;
  background: var(--grau-900); color: var(--text-invers);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: stretch;
}
.gesamtbild__text { padding: var(--s8) var(--s7); }
.gesamtbild__text h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin-top: var(--s4); }
.gesamtbild__liste { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s4); }
.gesamtbild__liste li { display: grid; grid-template-columns: 26px 1fr; gap: var(--s4); align-items: start; font-size: var(--klein); color: var(--text-invers-2); }
.gesamtbild__liste .icon { color: var(--orange); width: 22px; height: 22px; margin-top: 1px; }
.gesamtbild__bild { position: relative; min-height: 320px; }
.gesamtbild__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Pin-Galerie: Einblicke ---------- */

/* ---------- Einstiegs-Kacheln ---------- */
.einstiege { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5); margin-top: var(--s8); }
.einstieg {
  position: relative; display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s7); border-radius: var(--r-gross);
  background: var(--weiss); border: 1.5px solid var(--grau-200);
  text-decoration: none; color: var(--text); box-shadow: var(--schatten-1);
  overflow: hidden;
  transition: transform var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease),
              border-color var(--t-normal) var(--ease), background var(--t-normal) var(--ease);
}
/* Gelber Balken, der beim Hover von links einfährt */
.einstieg::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--orange); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-normal) var(--ease);
}
.einstieg__icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  stroke-width: 2.2;
  border-radius: var(--r-karte); background: var(--papier-2); color: var(--orange);
  transition: background var(--t-normal) var(--ease), color var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}
.einstieg__icon .icon { width: 28px; height: 28px; }
.einstieg__titel {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  line-height: 1.25; letter-spacing: -0.012em;
}
.einstieg__frage { font-size: var(--klein); line-height: 1.6; color: var(--text-2); }
.einstieg__pfeil { margin-top: auto; color: var(--grau-400); transition: color var(--t-normal) var(--ease), transform var(--t-normal) var(--ease); }
.einstieg__pfeil .icon { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .einstieg:hover {
    transform: translateY(-6px);
    border-color: var(--orange);
    box-shadow: 0 2px 6px rgba(30,29,29,.06), 0 24px 48px -22px rgba(30,29,29,.30), 0 0 0 4px rgba(255,191,0,.16);
  }
  .einstieg:hover::before { transform: scaleY(1); }
  .einstieg:hover .einstieg__icon { background: var(--orange); color: var(--grau-950); transform: scale(1.06); }
  .einstieg:hover .einstieg__pfeil { color: var(--orange); transform: translateX(5px); }
}
.einstieg:focus-visible { border-color: var(--orange); }
.einstieg:active { transform: scale(0.99); }


/* ---------- Beleg-Karten (Protokolle / Institut) ---------- */
.belege { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5); margin-top: var(--s8); }
.beleg { border-radius: var(--r-gross); background: var(--weiss); border: 1px solid var(--grau-200); padding: var(--s7); box-shadow: var(--schatten-1); }
.beleg h3 { font-size: 1.3125rem; font-weight: 700; line-height: 1.2; margin-top: var(--s4); }
.beleg p { margin-top: var(--s4); font-size: var(--klein); color: var(--text-2); }

/* ---------- Split (Institut) ---------- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--s9); align-items: start; } /* Luke 07.09.: Bild oben an der Überschrift */
.split .h2, .split h2 { overflow-wrap: anywhere; } /* lange Komposita dürfen nicht in die Bildspalte laufen */
.split--unter-kopf { margin-top: var(--s6); }
.split--unter-kopf > div:first-child > .lead { margin-top: 0; }
#institut .split__bild { margin-top: 32px; } /* Oberkante Bild = Versalhöhe der H2 (Kicker 24px + Zeilenvorschub) */
.split__bild { position: relative; border-radius: var(--r-kachel); overflow: hidden; box-shadow: var(--schatten-bild); }
.split__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.merkmale { list-style: none; margin: var(--s7) 0 0; padding: 0; }
.merkmale li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s5); padding-block: var(--s5); border-top: 1px solid var(--grau-200); }
.merkmale .icon { width: 32px; height: 32px; color: var(--orange); stroke-width: 2.2; margin-top: 2px; }
.merkmale b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.merkmale span { color: var(--text-2); font-size: var(--klein); }

/* ---------- Abschluss-CTA ---------- */
.abschluss { position: relative; overflow: hidden; background: var(--grau-900); color: var(--text-invers); }
.abschluss__schein { position: absolute; top: -30%; right: -12%; width: 65%; height: 130%; background: radial-gradient(ellipse at center, rgba(255,191,0,.16), transparent 62%); pointer-events: none; }
.abschluss .rahmen { position: relative; }
.abschluss h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-top: var(--s5); }
.abschluss h2 em { font-style: normal; color: var(--orange); }
.abschluss__lead { margin-top: var(--s5); color: var(--text-invers-2); }
.abschluss__ctas { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }
.kontaktzeile { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid var(--linie-dunkel); }
.kontaktzeile > span, .kontaktzeile a { display: inline-flex; align-items: center; gap: var(--s3); color: var(--text-invers); text-decoration: none; font-size: var(--klein); }
.kontaktzeile .icon { color: var(--orange); }
.kontaktzeile a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.fuss { background: var(--grau-950); color: var(--text-invers-2); padding-block: var(--s9) var(--s6); }
.fuss__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s7); }
.fuss .marke__logo { height: 64px; }

.fuss__claim { margin-top: var(--s5); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.fuss nav { display: grid; gap: var(--s3); }
.fuss nav b { color: var(--text-invers); font-family: var(--font-display); font-weight: 600; font-size: var(--klein); margin-bottom: var(--s2); }
.fuss a { color: var(--text-invers-2); text-decoration: none; font-size: var(--klein); }
.fuss a:hover { color: var(--text-invers); }
.fuss address { font-style: normal; font-size: var(--klein); line-height: 1.8; }
.fuss__ende { margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--linie-dunkel); display: flex; justify-content: space-between; gap: var(--s5); font-size: 0.8125rem; }

/* ---------- Unterseiten-Kopf ---------- */
.seitenkopf { position: relative; overflow: hidden; min-height: 76svh; display: flex; align-items: flex-end; padding-top: 140px; background: var(--grau-900); color: var(--weiss); }
.seitenkopf__bild { position: absolute; inset: 0; }
.seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.seitenkopf__schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,29,29,.58) 0%, rgba(30,29,29,.32) 40%, rgba(30,29,29,.88) 100%); }
.seitenkopf__inhalt { position: relative; z-index: 2; padding-bottom: var(--s8); }
.seitenkopf h1 { font-size: var(--h1); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; margin-top: var(--s5); }
.seitenkopf__sub { margin-top: var(--s5); font-size: 1.1875rem; font-weight: 600; color: rgba(255,255,255,.92); }
/* Seitenkopf mit Keyword-H1 (Luke 07.09.): H1 groß, Unterzeile als H2 */
.seitenkopf h1.seitenkopf__keyword { font-size: var(--display); }
.seitenkopf h1.seitenkopf__keyword--lang { font-size: clamp(2.5rem, 4.6vw, 4.25rem); hyphens: manual; } /* sehr lange Keywords (Inhouse-Führungskräfteentwicklung) */
.seitenkopf__h2 { margin-top: var(--s3); font-family: var(--font-display); font-size: var(--h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.018em; color: var(--weiss); }
@media (max-width: 700px) { .seitenkopf h1.seitenkopf__keyword { font-size: 2.6rem; } .seitenkopf__h2 { font-size: 1.5rem; hyphens: auto; overflow-wrap: anywhere; } }
.seitenkopf__lead { margin-top: var(--s4); color: rgba(255,255,255,.78); }
.seitenkopf .hero__ctas { opacity: 1; transform: none; }
.brotkrume { display: flex; gap: var(--s3); align-items: center; }
.brotkrume { color: rgba(255,255,255,.75); }
.brotkrume a { color: rgba(255,255,255,.75); text-decoration: none; }
.brotkrume a:hover { color: var(--orange); }
.brotkrume__hier { color: var(--orange); } /* aktuelle Stelle, vorher Inline-Style je Seite */

/* ---------- Listen / Raster Unterseite ---------- */
.bedarfe { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5) var(--s8); margin: var(--s8) 0 0; padding: 0; }
.bedarfe li { list-style: none; display: grid; grid-template-columns: 26px 1fr; gap: var(--s4); align-items: start; padding: var(--s5) 0; border-top: 1px solid var(--grau-200); }
.bedarfe li > span:first-child { width: 14px; height: 14px; margin-top: 7px; border-radius: 50%; border: 2px solid var(--orange); }
.bedarfe b { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.bedarfe small { display: block; font-size: var(--klein); color: var(--text-2); margin-top: var(--s2); }

.ansatz { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--s8); margin-top: var(--s8); }
.ansatz__punkt { display: grid; grid-template-columns: 44px 1fr; gap: var(--s5); padding-block: var(--s6); border-top: 1px solid var(--grau-200); }
.ansatz__punkt .icon { width: 32px; height: 32px; color: var(--orange); stroke-width: 2.2; }
.ansatz__punkt b { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.ansatz__punkt span { color: var(--text-2); font-size: var(--klein); }
.sektion--dunkel .ansatz__punkt { border-top-color: var(--linie-dunkel); }
.sektion--dunkel .ansatz__punkt .icon { color: var(--orange); }
.sektion--dunkel .ansatz__punkt b { color: var(--text-invers); }
.sektion--dunkel .ansatz__punkt span { color: var(--text-invers-2); }

.prozess { margin-top: var(--s8); }
.prozess__schritt { display: grid; grid-template-columns: 104px 1fr; gap: var(--s6); padding-block: var(--s7); border-top: 1px solid var(--grau-200); }
.prozess__nr { font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--grau-300); font-variant-numeric: tabular-nums; user-select: none; }
.prozess__schritt b { display: block; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; }
.prozess__schritt p { color: var(--text-2); margin-top: var(--s2); font-size: var(--klein); }

.formate { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s5); margin-top: var(--s8); }
.format { border-radius: var(--r-gross); background: var(--weiss); border: 1px solid var(--grau-200); padding: var(--s6); box-shadow: var(--schatten-1); }
.format b { display: block; margin-top: var(--s3); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.format p { margin-top: var(--s3); font-size: var(--klein); color: var(--text-2); }

.jahr { position: relative; margin-top: var(--s8); }
.jahr__linie { position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: var(--grau-200); border-radius: var(--r-pill); }
.jahr__linie i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--orange); display: block; border-radius: var(--r-pill); }
.jahr__punkte { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.jahr__punkte li { position: relative; padding-top: var(--s8); }
.jahr__punkte li::before { content: ""; position: absolute; top: 20px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--papier); border: 2px solid var(--orange); }
.jahr__punkte b { display: block; font-family: var(--font-display); font-size: var(--klein); font-weight: 600; }
.jahr__punkte span { font-size: 0.8125rem; color: var(--text-2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: var(--s6) 0 0; padding: 0; }
.chips li { border: 1px solid var(--grau-300); border-radius: var(--r-pill); padding: var(--s2) var(--s4); font-size: var(--klein); }

/* Sichtbar markierte Faktenluecke. Bewusst auffaellig: Was ROTH noch bestaetigen
   muss, darf nicht versehentlich live gehen. Vor dem Launch muessen alle .platzhalter
   verschwunden sein — pruefbar mit: grep -c 'class="platzhalter"' site-zpe/**/*.html */
.platzhalter {
  background: var(--petrol-tint); border-left: 3px solid var(--gold);
  padding: var(--s4) var(--s5); border-radius: var(--r8);
  font-size: var(--klein); color: var(--text-2);
}
.platzhalter strong { color: var(--gold-text); }

.faq { margin-top: var(--s8); border-top: 1px solid var(--grau-200); }
.faq details { border-bottom: 1px solid var(--grau-200); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding-block: var(--s6); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--orange); stroke-width: 2.4; transition: transform var(--t-normal) var(--ease); flex: none; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--s6); color: var(--text-2); }

.konditionen { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); gap: var(--s8); margin-top: var(--s8); }
.architekturen { display: grid; gap: var(--s4); margin: var(--s5) 0 0; padding: 0; }
.architekturen li { list-style: none; display: grid; grid-template-columns: 18px 1fr; gap: var(--s4); align-items: baseline; }
.architekturen li::before { content: ""; width: 12px; height: 2px; background: var(--orange); transform: translateY(-4px); }

/* ---------- Reveals ---------- */
.hat-js .zeigen { opacity: 0; transform: translateY(16px); }
.hat-js .zeigen.ist-da { opacity: 1; transform: none; transition: opacity 520ms var(--ease) var(--zeigen-verzug, 0ms), transform 520ms var(--ease) var(--zeigen-verzug, 0ms); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .kacheln, .kacheln--gespiegelt { grid-template-columns: 1fr; }
  .kachel { min-height: 400px; }
  .gesamtbild { grid-template-columns: 1fr; }
  .gesamtbild__bild { min-height: 260px; }
  .formate { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .einstiege { grid-template-columns: 1fr; }
  .split, .konditionen { grid-template-columns: 1fr; gap: var(--s8); }
  .split__bild img { aspect-ratio: 16/10; }
  .jahr__punkte { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: var(--s7); }
  .jahr__linie { display: none; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .perspektiven, .belege, .bedarfe, .ansatz { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .nav {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--s4);
    background: rgba(30,29,29,.94); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-gross);
    padding: var(--s6); box-shadow: var(--schatten-2);
    backdrop-filter: blur(18px);
  }
  .kopf.ist-offen .nav { display: flex; }




  .nav-knopf { display: inline-flex; }
  .kopf__pille { position: relative; }
  .nav .btn { justify-content: center; }
}
@media (max-width: 880px) {
  .marke__logo { height: 40px; }
  .kopf.ist-fest .marke__logo { height: 34px; }
  /* Mobil: Unterzeile wäre unter 3 px hoch – Kompaktfassung ohne Unterzeile */
  .kopf .marke__logo--voll { display: none; }
  .kopf .marke__logo--kompakt { display: block; }
  .hero { padding-top: 132px; min-height: 92svh; }
  .hero__fuss { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .scroll-hinweis { display: none; }
  .formate { grid-template-columns: 1fr; }
  .prozess__schritt { grid-template-columns: 72px 1fr; gap: var(--s4); }
  .prozess__nr { font-size: 2.5rem; }
  .kachel { min-height: 340px; }
  .kachel__koerper { padding: var(--s6); }
  .perspektive, .beleg, .einstieg, .gesamtbild__text { padding: var(--s6); }
  .fuss__raster { grid-template-columns: 1fr; }
  .fuss__ende { flex-direction: column; }
  .kontaktzeile { flex-direction: column; align-items: flex-start; }
  .seitenkopf { min-height: auto; padding-top: 132px; }
  .seitenkopf h1 { font-size: 1.9rem; }
  .h2 { font-size: 1.6rem; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ist-geladen .hero__bild { animation: none; }
  .hero h1 .zeile-innen, .ist-geladen .hero h1 .zeile-innen { transform: none; transition: none; }
  .hero__lead, .hero__ctas, .hero__fuss,
  .ist-geladen .hero__lead, .ist-geladen .hero__ctas, .ist-geladen .hero__fuss { opacity: 1; transform: none; transition: none; }
  .hat-js .zeigen { opacity: 1; transform: none; }
  .hat-js .zeigen.ist-da { transition: none; }
  .scroll-hinweis .punkt { animation: none; }
  .platte .w { color: var(--text-invers); transition: none; }
  .platte .w.ist-orange { color: var(--orange); }
  .reifegrad__wert { transition: none; }
  .hat-js .zeigen.unterstrichen, .hat-js .zeigen .unterstrichen { background-size: 100% 4px; }
  .hat-js .zeigen.ist-da.unterstrichen, .hat-js .zeigen.ist-da .unterstrichen { transition: none; }
  .parallax > img, .parallax > picture > img { transform: none; }
  .kachel__bild img { transition: none; }
}

/* ---------- Vertrauensleiste: Kundenlogos ---------- */
.vertrauen { background: var(--weiss); padding-block: var(--s8); border-bottom: 1px solid var(--grau-200); overflow: hidden; }
.vertrauen__kopf { text-align: center; margin-bottom: var(--s8); }
/* .unterstrichen ist display:table, damit die gelbe Linie exakt Textbreite hat.
   Solche Boxen folgen aber NICHT dem text-align des Elternelements — sie brauchen
   margin-inline:auto, sonst steht die Überschrift trotz center links. */
.vertrauen__kopf .unterstrichen { margin-inline: auto; }

.vertrauen__titel { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.018em; }
.laufband { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.laufband__ebene { display: flex; }
/* Farb-Ebene liegt deckungsgleich über der Graustufen-Ebene */
.laufband__ebene--farbe { position: absolute; inset: 0; pointer-events: none;
  /* die Maske steht still, die Logos laufen darunter durch: was in die Mitte kommt, wird farbig */
  mask-image: linear-gradient(90deg,
      transparent 8%, rgba(0,0,0,.12) 22%, rgba(0,0,0,.45) 34%,
      rgba(0,0,0,.85) 44%, #000 50%, rgba(0,0,0,.85) 56%,
      rgba(0,0,0,.45) 66%, rgba(0,0,0,.12) 78%, transparent 92%);
  -webkit-mask-image: linear-gradient(90deg,
      transparent 8%, rgba(0,0,0,.12) 22%, rgba(0,0,0,.45) 34%,
      rgba(0,0,0,.85) 44%, #000 50%, rgba(0,0,0,.85) 56%,
      rgba(0,0,0,.45) 66%, rgba(0,0,0,.12) 78%, transparent 92%);
}
.laufband__spur { display: flex; align-items: center; gap: var(--s9); flex: none; padding-right: var(--s9); animation: laufen 96s linear infinite;   /* Luke 10.09.: ein Drittel langsamer (vorher 64s) */ }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.laufband img { height: 46px; width: auto; flex: none; }
.laufband__ebene--grau img { filter: grayscale(1); opacity: .5; }
.laufband__ebene--farbe img { filter: none; opacity: 1; }

/* ---------- Roth-Zitat: begrenzte Bildkarte, damit beide Köpfe sichtbar bleiben ---------- */
@media (max-width: 880px) {
}


/* ---------- Kundenstimmen ---------- */
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5); margin-top: var(--s8); }
.stimme {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--weiss); border: 1.5px solid var(--grau-200);
  border-radius: var(--r-gross); padding: var(--s7); box-shadow: var(--schatten-1);
  transition: transform var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}
.stimme::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--orange); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-normal) var(--ease);
}
.stimme__zeichen { transition: transform var(--t-normal) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .stimme:hover {
    transform: translateY(-6px);
    border-color: var(--orange);
    box-shadow: 0 2px 6px rgba(30,29,29,.06), 0 24px 48px -22px rgba(30,29,29,.30), 0 0 0 4px rgba(255,191,0,.16);
  }
  .stimme:hover::before { transform: scaleY(1); }
  .stimme:hover .stimme__zeichen { transform: scale(1.12); }
}
.stimme__zeichen { font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: .8; color: var(--orange); }
.stimme blockquote { margin: var(--s4) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--text); }
.stimme__quelle { margin-top: auto; padding-top: var(--s6); }
.stimme__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--klein); }
.stimme__rolle { display: block; font-size: 0.875rem; color: var(--text-2); margin-top: 2px; }
@media (max-width: 1180px) { .stimmen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 880px) { .stimmen { grid-template-columns: 1fr; } .laufband img { height: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; flex-wrap: wrap; justify-content: center; gap: var(--s6); }
  .laufband { mask-image: none; overflow: visible; }
  .laufband__ebene--farbe { display: none; }
  .laufband__ebene--grau img { filter: none; opacity: 1; }
  .laufband__ebene--grau .laufband__spur + .laufband__spur { display: none; }
}

/* ---------- Schrift-Umschalter (temporäres Vergleichswerkzeug) ---------- */
@media (max-width: 620px) { .schriftwahl__label { display: none; } }

/* Abschluss mit Porträt */
.abschluss__raster { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,0.75fr); gap: var(--s9); align-items: center; }
.abschluss__portrait { margin: 0; position: relative; }
.abschluss__portrait img { width: 100%; height: auto; border-radius: var(--r-kachel); box-shadow: var(--schatten-bild); }
.abschluss__portrait figcaption { margin-top: var(--s5); display: flex; flex-direction: column; gap: 2px; }
.abschluss__name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--text-invers); }
.abschluss__rolle { font-size: var(--klein); color: var(--text-invers-2); }
@media (max-width: 1180px) {
  .abschluss__raster { grid-template-columns: 1fr; gap: var(--s8); }
  .abschluss__portrait { max-width: 340px; }
}

/* Der Gelb-Vorhang der Buttons respektiert reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
  .nav a:not(.btn)::after { transition: none; }
}

/* ── Wissensjournal (ZPE-Launch) ────────────────────────────────────────────
   Artikel stehen in der Lesespalte (.lesespalte weiter unten): Kopf, Bild und Text gleich breit. */
.artikel__kopf { padding-top: 150px; }
.artikel__text { color: var(--text-2); font-size: 1.0625rem; line-height: 1.75; }
.artikel__text > * + * { margin-top: var(--s4); }
.artikel__text h3 { font-size: 1.375rem; font-weight: 700; color: var(--text);
  letter-spacing: -.01em; margin-top: var(--s7); }
.artikel__text h4 { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-top: var(--s6); }
.artikel__text strong { color: var(--text); font-weight: 700; }
.artikel__text a { color: var(--petrol); text-underline-offset: 3px; }
.artikel__text ul { padding-left: 1.15em; display: grid; gap: var(--s2); }
.artikel__text li::marker { color: var(--orange); }
.artikel__text blockquote { border-left: 3px solid var(--orange); padding-left: var(--s4);
  font-size: 1.1875rem; line-height: 1.55; color: var(--text); }
.artikel__text figure img, .artikel__bild img { width: 100%; height: auto; border-radius: var(--r12); }
.artikel__bild { max-width: 820px; margin: var(--s6) 0 var(--s7); }
.artikel__meta { color: var(--text-3); font-size: .875rem; margin-top: var(--s3); }
.brotkrumen { font-size: .8125rem; color: var(--text-3); margin-bottom: var(--s3); }
.brotkrumen a { color: var(--text-2); }

/* (alte Artikel-/Journal-Listenregeln entfernt am 03.09.2026 — Journal hat jetzt Karten, s. Block Wissens-Journal) */

/* ── Terminliste (offenes Programm) ──────────────────────────────────────
   Vier Spalten auf Breite, gestapelt auf Mobil. Die Nummer bleibt links
   stehen und trägt die Zeitachse, damit die Reihenfolge auch beim Stapeln
   ablesbar bleibt. */
.termine { list-style: none; margin-top: var(--s6); border-top: 1px solid var(--linie); }
.termin {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1.4fr) auto;
  gap: var(--s4) var(--s5);
  align-items: center;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--linie);
}
.termin__nr {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--gold);
  font-size: .75rem; font-weight: 800; color: var(--gold-text);
}
.termin__datum { font-size: 1.0625rem; }
.termin__datum strong { font-size: 1.5rem; font-weight: 800; margin-right: var(--s2); }
.termin__art { display: flex; flex-direction: column; gap: 2px; color: var(--text-2); }
.termin__form {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-text);
}
.termin__zeit { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 700px) {
  .termin { grid-template-columns: 34px 1fr; }
  .termin__nr { grid-row: 1 / 4; align-self: start; }
  .termin__zeit { text-align: left; }
}

/* ======================================================================
   Veranstaltungen: Terminkarten, Filter, Detailseite, Formular, Danke
   ====================================================================== */
.seitenkopf--termine { min-height: 62svh; }
.seitenkopf .kennung { margin-top: var(--s2); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  background: var(--grau-100); color: var(--text-2); border: 1px solid var(--grau-200);
}
.chip--online::before, .chip--praesenz::before, .chip--hybrid::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--petrol); }
.chip--praesenz::before { background: var(--gold); }
.chip--hybrid::before { background: linear-gradient(90deg, var(--petrol) 50%, var(--gold) 50%); }
.chip--frei, .chip--rolle { background: var(--petrol); color: var(--weiss); border-color: var(--petrol); } /* Petrol-Akzent statt Schwarz (Luke 07.09.) */

/* Filter */
.filter { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s8); margin-bottom: var(--s7); }
.filter__gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.filter__label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-right: var(--s2); }
.chip--wahl { cursor: pointer; background: var(--weiss); transition: background var(--t-schnell) var(--ease), color var(--t-schnell) var(--ease), border-color var(--t-schnell) var(--ease); }
.chip--wahl:hover { border-color: var(--grau-400); }
.chip--wahl[aria-pressed="true"] { background: var(--grau-900); color: var(--weiss); border-color: var(--grau-900); }
.chip--wahl:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.filter__leer { margin-top: var(--s6); color: var(--text-2); }
.link-knopf { background: none; border: 0; padding: 0; font: inherit; color: var(--petrol); text-decoration: underline; cursor: pointer; }

/* Terminkarten */
.termin-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.termin-karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s7); }
/* Luke 09.09.: zwei Gruppen im Terminblock — kostenlose Termine oben, kostenpflichtige Programme darunter.
   „Aktuell sind die kostenlos, aber nicht immer“ — die Gruppenzeilen halten den Unterschied sichtbar. */
.termine-gruppe { margin-top: var(--s8); }
.termine-kopf + .termine-gruppe { margin-top: var(--s7); }
.termine-gruppe + .termin-karten, .termine-gruppe + .termin-karten--drei { margin-top: var(--s4); }
.tk { min-width: 0; }
.tk[hidden] { display: none; }
.tk__link {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s5); height: 100%;
  padding: var(--s6); border-radius: var(--r-gross);
  background: var(--weiss); border: 1px solid var(--grau-200); box-shadow: var(--schatten-1);
  color: inherit; text-decoration: none;
  transition: transform var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .tk__link:hover { transform: translateY(-3px); border-color: var(--grau-400); box-shadow: 0 1px 2px rgba(30,29,29,.04), 0 22px 44px -18px rgba(30,29,29,.28); }
  .tk__link:hover .tk__cta .icon { transform: translateX(4px); }
}
.tk__link:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
.tk__datum {
  display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start;
  aspect-ratio: 1; border-radius: var(--r-gross); background: var(--orange); color: var(--grau-950); /* Luke 07.09.: Datum immer gelb mit anthraziter Schrift */
  font-family: var(--font-display); line-height: 1;
}
.tk__datum b { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.tk__datum span { margin-top: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau-950); }
.tk__koerper { display: flex; flex-direction: column; min-width: 0; }
.tk__art { margin-top: var(--s4); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.tk h3 { margin-top: var(--s2); font-size: 1.3125rem; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; }
.tk__meta { margin-top: var(--s3); font-size: var(--klein); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tk__zeit { margin-top: 2px; font-size: var(--klein); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tk--messe .tk__zeit { color: rgba(255,255,255,.84); }
.tk--messe.tk--gelb .tk__zeit { color: rgba(30,29,29,.82); }
.tk__kurz { margin-top: var(--s3); font-size: var(--klein); line-height: 1.6; color: var(--text-2); }
.tk__cta { display: inline-flex; align-items: center; gap: var(--s2); margin-top: auto; padding-top: var(--s5); font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--text); }
.tk__cta .icon { color: var(--orange); transition: transform var(--t-normal) var(--ease); }
.termine-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }

/* Schritte */
.schritte { list-style: none; counter-reset: schritt; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.schritte li { counter-increment: schritt; position: relative; padding-top: var(--s6); border-top: 2px solid var(--grau-200); }
.schritte li::before { content: "0" counter(schritt); position: absolute; top: -13px; left: 0; padding: 2px 10px; background: var(--orange); color: var(--grau-950); border-radius: var(--r-pill); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
.schritte b { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.schritte span { display: block; margin-top: var(--s2); font-size: var(--klein); color: var(--text-2); line-height: 1.6; }

/* Detailseite: Text links, Formularkarte rechts */
.anmeldung { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: var(--s8); align-items: start; }
.anmeldung__text > p { margin-top: var(--s5); line-height: 1.7; color: var(--text-2); }
.anmeldung__text > p:first-of-type { margin-top: 0; }
.anmeldung__text h2 { margin-top: var(--s7); color: var(--text); }
.zitatfrage { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.35; color: var(--text) !important; padding-left: var(--s5); border-left: 3px solid var(--orange); }
.fakten { list-style: none; margin: 0 0 var(--s7); padding: var(--s5) var(--s6); display: grid; gap: var(--s3); background: var(--weiss); border: 1px solid var(--grau-200); border-radius: var(--r-gross); }
.fakten li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s4); align-items: start; font-size: var(--klein); color: var(--text-2); }
.fakten li b { color: var(--text); }
.fakten .icon { color: var(--petrol); width: 24px; height: 24px; margin-top: 0; }
.haken-liste { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.haken-liste li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); align-items: start; color: var(--text-2); line-height: 1.6; }
.haken-liste .icon { color: var(--orange); stroke-width: 2.6; margin-top: 1px; width: 24px; height: 24px; }
.termine--kompakt { margin-top: var(--s4); }
.preis { margin-top: var(--s5); font-size: 1.125rem; }
.anmeldung__karte {
  position: sticky; top: 96px;
  padding: var(--s6); border-radius: var(--r-kachel);
  background: var(--weiss); border: 1px solid var(--grau-200); box-shadow: var(--schatten-1);
}
.anmeldung__karte > .h3 { margin-top: var(--s2); }

/* Formular (website-standards §8) */
.formular { margin-top: var(--s5); display: grid; gap: var(--s4); }
.formular__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.feld { display: grid; gap: 6px; }
.feld label, .formular__gruppe legend { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--text); }
.feld label b { color: var(--gold-text); font-weight: 700; }
.feld label small { font-weight: 500; color: var(--text-2); }
.auf-dunkel .feld label small, .abschluss .feld label small, .sektion--dunkel .feld label small { color: rgba(255,255,255,.72); } /* ROTH 08.09.: „optional“ war auf dunklem Grund zu dunkel */
.feld input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--papier); border: 1.5px solid var(--grau-300); border-radius: var(--r-gross);
  transition: border-color var(--t-schnell) var(--ease), box-shadow var(--t-schnell) var(--ease), background var(--t-schnell) var(--ease);
}
.feld input:hover { border-color: var(--grau-400); }
.feld input:focus { outline: none; border-color: var(--petrol); background: var(--weiss); box-shadow: 0 0 0 4px rgba(44,102,112,.16); }
.feld__fehler { display: none; font-size: 0.8125rem; color: #B42318; }
.feld.ist-fehler input { border-color: #B42318; }
.feld.ist-fehler .feld__fehler, .ist-fehler + .feld__fehler { display: block; }
.formular__gruppe { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s2); }
.formular__gruppe legend { margin-bottom: var(--s2); }
.wahl { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); border: 1.5px solid var(--grau-300); border-radius: var(--r-gross); cursor: pointer; background: var(--papier); transition: border-color var(--t-schnell) var(--ease), background var(--t-schnell) var(--ease); }
.wahl:has(input:checked) { border-color: var(--grau-900); background: var(--weiss); }
.wahl input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--grau-900); }
.wahl span { display: grid; gap: 2px; font-size: var(--klein); }
.wahl small { color: var(--text-2); font-size: 0.8125rem; }
.haken { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); align-items: start; font-size: 0.875rem; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.haken input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--grau-900); }
.haken b { color: var(--gold-text); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.formular__hinweis { font-size: 0.8125rem; line-height: 1.55; color: var(--text-2); }
.formular__hinweis a { color: var(--petrol); text-decoration: underline; }
.formular__senden { width: 100%; justify-content: center; margin-top: var(--s2); }
.formular__senden[disabled] { opacity: .6; cursor: progress; }
.formular__status { min-height: 0; font-size: 0.875rem; color: #B42318; }
.formular__status:empty { display: none; }

/* Danke-Zustand */
.danke { display: grid; gap: var(--s4); margin-top: var(--s5); }
.danke__haken { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--grau-900); color: var(--orange); }
.danke__haken .icon { width: 32px; height: 32px; stroke-width: 2.6; }
.danke__termin { font-weight: 600; color: var(--text); }
.danke__termin:empty { display: none; }
.danke__text { font-size: var(--klein); line-height: 1.6; color: var(--text-2); }
.danke__text span { font-weight: 600; color: var(--text); }
.kalender { padding-top: var(--s4); border-top: 1px solid var(--grau-200); display: grid; gap: var(--s3); }
.kalender b { font-family: var(--font-display); font-size: 0.875rem; }
.kalender__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.kalender__knoepfe .btn { padding: 9px 14px; font-size: 0.8125rem; }
.kalender small { font-size: 0.8125rem; color: var(--text-2); }
.danke__weiter a { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--text); }
.danke__weiter .icon { color: var(--orange); }

/* Leadmagnete auf dunkel */
.magnete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s8); }
.magnete--eins { grid-template-columns: minmax(0, 1fr); } /* nur noch das Journal (Michelle 10.09.) */
/* Textbreiten-Regel (Luke 11.09.): volle Breite statt 760-px-Karte mit Leerraum daneben –
   ab 900 px Titel und Text links, Formular rechts. */
@media (min-width: 900px) {
  .magnete--eins .magnet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; column-gap: var(--s8); align-items: start; }
  .magnete--eins .magnet > h3, .magnete--eins .magnet > p { grid-column: 1; }
  .magnete--eins .magnet > :not(h3):not(p) { grid-column: 2; grid-row: 1 / span 2; }
}
.magnet { padding: var(--s6); border-radius: var(--r-kachel); background: rgba(247,246,244,.06); border: 1px solid var(--linie-dunkel); }
.magnet > p { margin-top: var(--s3); font-size: var(--klein); line-height: 1.6; color: var(--text-invers-2); }
.magnet .feld label, .magnet .formular__hinweis, .magnet .haken, .magnet .danke__text, .magnet .kalender small { color: var(--text-invers-2); }
.magnet .feld label { color: var(--text-invers); }
.magnet .feld label b, .magnet .haken b { color: var(--orange); }
.magnet .feld input { background: rgba(247,246,244,.08); border-color: var(--linie-dunkel); color: var(--text-invers); }
.magnet .feld input:focus { background: rgba(247,246,244,.12); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,191,0,.18); }
.magnet .formular__hinweis a { color: var(--orange); }
.magnet .btn--voll { background: var(--orange); color: var(--grau-950); }
.magnet .btn--voll .icon { color: var(--grau-950); }
.magnet .danke__haken { background: var(--orange); color: var(--grau-950); }
.magnet .danke__termin, .magnet .danke__weiter a, .magnet .danke__text span { color: var(--text-invers); }

@media (max-width: 960px) {
  .anmeldung { grid-template-columns: 1fr; gap: var(--s7); }
  .anmeldung__karte { position: static; }
  .termin-karten--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte { grid-template-columns: 1fr; gap: var(--s7); }
}
@media (max-width: 700px) {
  .termin-karten, .termin-karten--drei, .magnete { grid-template-columns: 1fr; }
  .tk__link { grid-template-columns: 60px minmax(0, 1fr); gap: var(--s4); padding: var(--s5); }
  .tk__datum b { font-size: 1.5rem; }
  .formular__zeile { grid-template-columns: 1fr; }
  .seitenkopf--termine { min-height: 0; }
}
/* hidden-Attribut gewinnt gegen display:grid (Formular <-> Danke-Zustand) */
.formular[hidden], .danke[hidden], .tk[hidden], .filter__leer[hidden] { display: none !important; }
/* Dreier-Raster (Startseite): schmalere Datumskachel, Silbentrennung für lange Titel */
.tk h3 { hyphens: auto; overflow-wrap: anywhere; }
.termin-karten--drei .tk__link { grid-template-columns: 76px minmax(0, 1fr); gap: var(--s4); padding: var(--s5); }
.termin-karten--drei .tk__datum b { font-size: 1.5rem; }
.termin-karten--drei .tk h3 { font-size: 1.1875rem; }
/* Mobil: Datumskachel als Zeile über dem Text, lange Titel im Seitenkopf trennen */
@media (max-width: 700px) {
  .tk__link { grid-template-columns: 1fr; gap: var(--s4); }
  .tk__datum { flex-direction: row; align-items: baseline; gap: 6px; aspect-ratio: auto; justify-self: start; padding: 6px 12px; }
  .tk__datum b { font-size: 1.25rem; }
  .tk__datum span { margin-top: 0; }
  .tk__art { margin-top: var(--s3); }
  .seitenkopf h1 { hyphens: auto; overflow-wrap: anywhere; }
}
@media (max-width: 700px) { .brotkrume { white-space: normal; overflow-wrap: anywhere; } }

/* Kalender-Knöpfe: Markenzeichen einfarbig, etwas kleiner als die Lucide-Icons */
.kalender__knoepfe .icon--marke { width: 15px; height: 15px; }
.kalender__knoepfe .btn { gap: 8px; }

/* ======================================================================
   Wissens-Journal: Startseite, Themenseiten, Karten, Archiv, Artikel
   ====================================================================== */
.seitenkopf--journal { min-height: 66svh; }
.themen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.themen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kachel--thema { min-height: 380px; }
.kachel--thema .kachel__nr i { text-transform: none; letter-spacing: 0.04em; }
.kachel--thema h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); }

/* Journal-Karte */
.jk-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.jk { min-width: 0; }
.jk__link {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--r-gross); overflow: hidden;
  background: var(--weiss); border: 1px solid var(--grau-200); box-shadow: var(--schatten-1);
  color: inherit; text-decoration: none;
  transition: transform var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}
.sektion--weiss .jk__link { background: var(--papier); }
@media (hover: hover) and (pointer: fine) {
  .jk__link:hover { transform: translateY(-3px); border-color: var(--grau-400); box-shadow: 0 1px 2px rgba(30,29,29,.04), 0 22px 44px -18px rgba(30,29,29,.28); }
  .jk__link:hover .jk__bild img { transform: scale(1.04); }
  .jk__link:hover .jk__mehr .icon { transform: translateX(4px); }
}
.jk__link:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
.jk__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grau-900); display: grid; place-items: center; }
.jk__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.jk__bild--gold { background: linear-gradient(135deg, #2B2A28, #24565F); }
.jk__bild--petrol { background: linear-gradient(135deg, #1F2A2C, var(--petrol)); }
.jk__bild--grau { background: linear-gradient(135deg, #2B2B29, #4A4A47); }
.jk__zeichen { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--orange); opacity: .85; transform: translateY(.25em); }
.jk__koerper { display: flex; flex-direction: column; flex: 1; padding: var(--s5) var(--s6) var(--s6); }
.jk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 0.8125rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.jk h3 { margin-top: var(--s4); font-size: 1.1875rem; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; hyphens: auto; overflow-wrap: anywhere; }
.jk__auszug { margin-top: var(--s3); font-size: var(--klein); line-height: 1.6; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jk__mehr { display: inline-flex; align-items: center; gap: var(--s2); margin-top: auto; padding-top: var(--s5); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--text); }
.jk__mehr .icon { color: var(--orange); transition: transform var(--t-normal) var(--ease); }
/* Aufmacher: volle Breite, Bild links */
.jk--gross { grid-column: 1 / -1; }
.jk--gross .jk__link { flex-direction: row; }
.jk--gross .jk__bild { flex: 0 0 52%; aspect-ratio: auto; min-height: 380px; }
.jk--gross .jk__koerper { justify-content: center; padding: var(--s7) var(--s8); }
.jk--gross h3 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.15; letter-spacing: -0.02em; }
.jk--gross .jk__auszug { font-size: 1.0625rem; -webkit-line-clamp: 4; margin-top: var(--s4); }

/* Archiv */
.archiv__werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s6); }
.suche { display: flex; align-items: center; gap: var(--s3); flex: 1 1 320px; max-width: 460px; min-height: 48px; padding: 0 var(--s4); background: var(--weiss); border: 1.5px solid var(--grau-300); border-radius: var(--r-pill); transition: border-color var(--t-schnell) var(--ease), box-shadow var(--t-schnell) var(--ease); }
.suche:focus-within { border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(44,102,112,.16); }
.suche .icon { color: var(--text-2); flex: none; }
.suche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--text); outline: none; }
.suche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.archiv__zahl { margin-left: auto; font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.archiv { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--grau-200); }
.az[hidden] { display: none; }
.az a { display: grid; grid-template-columns: minmax(0, 1fr) 150px 92px 22px; gap: var(--s5); align-items: center; padding: var(--s4) var(--s2); border-bottom: 1px solid var(--grau-200); color: inherit; text-decoration: none; transition: background var(--t-schnell) var(--ease); }
.az a:hover, .az a:focus-visible { background: var(--weiss); outline: none; }
.az a:hover .az__titel { color: var(--petrol); }
.az__titel { font-family: var(--font-display); font-weight: 600; font-size: 0.9875rem; line-height: 1.35; }
.az__kat, .az__datum { font-size: 0.8125rem; color: var(--text-2); }
.az__datum { font-variant-numeric: tabular-nums; text-align: right; }
.az .icon { color: var(--orange); width: 22px; height: 22px; }

/* Abo */
.abo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--s8); align-items: center; }
.abo .lead { margin-top: var(--s5); color: var(--text-invers-2); }
.abo .haken-liste li { color: var(--text-invers-2); }

/* Artikel */
.artikel__kopf { padding-top: 150px; }
.artikel__kopf h1 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-top: var(--s4); hyphens: auto; overflow-wrap: anywhere; }
.artikel__kopf .brotkrume a { color: var(--text-2); }
.artikel__meta { margin-top: var(--s4); font-size: var(--klein); color: var(--text-2); font-variant-numeric: tabular-nums; }
.artikel__bild { margin: var(--s7) 0 0; max-width: 980px; aspect-ratio: 21 / 9; border-radius: var(--r-kachel); overflow: hidden; box-shadow: var(--schatten-bild); }
.artikel__bild img { width: 100%; height: 100%; object-fit: cover; }
.artikel__text { margin-top: var(--s7); padding-bottom: var(--s9); }
.artikel__text figure img { border-radius: var(--r-gross); }
.artikel__cta { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--s7); align-items: center; }
.artikel__cta .lead { margin-top: var(--s4); }

@media (max-width: 960px) {
  .themen, .jk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jk--gross .jk__link { flex-direction: column; }
  .jk--gross .jk__bild { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .jk--gross .jk__koerper { padding: var(--s6); }
  .abo, .artikel__cta { grid-template-columns: 1fr; }
  .az a { grid-template-columns: minmax(0, 1fr) 92px 22px; }
  .az__kat { display: none; }
}
@media (max-width: 700px) {
  .themen, .themen--zwei, .jk-raster { grid-template-columns: 1fr; }
  .kachel--thema { min-height: 300px; }
  .archiv__zahl { margin-left: 0; }
  .az a { grid-template-columns: minmax(0, 1fr) 22px; }
  .az__datum { display: none; }
  .seitenkopf--journal { min-height: 0; }
}
/* Lesespalte (Luke 11.09.): die einzige erlaubte Textbegrenzung – für die ganze Seite, Kopf, Bild und
   Text gleich breit (980 px). Journal-Artikel und Rechtstexte; kein Text darin schmaler als die Spalte. */
.lesespalte { max-width: calc(980px + 2 * var(--rand)); }
.artikel__bild { margin-inline: auto; }
.artikel__text h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-top: var(--s7); line-height: 1.25; }

/* Kontakt: Formularkarte statt mailto (Startseite) */
.abschluss__raster--formular { grid-template-columns: minmax(0, 1fr) minmax(360px, 560px); align-items: start; }
.kontakt__karte { padding: var(--s7); }
.kontakt__karte .formular { margin-top: var(--s5); }
.ansprech { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s6); }
.ansprech img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid var(--orange); } /* Luke 07.09.: Porträt deutlich größer */
@media (max-width: 700px) { .ansprech img { width: 96px; height: 96px; } }
.ansprech div { display: flex; flex-direction: column; gap: 2px; }
/* Ansprechperson auf hellem Grund (Führungskräfteentwicklung, „Der nächste Schritt“) – die Grundregeln sind für den dunklen Abschluss gebaut */
.ansprech--hell .abschluss__name { color: var(--text); }
.ansprech--hell .abschluss__rolle { color: var(--text-2); }
.kontaktzeile--hell { margin-top: var(--s6); border-top-color: var(--grau-200); }
.kontaktzeile--hell > span, .kontaktzeile--hell a { color: var(--text); }
.kontaktzeile--hell .icon { color: var(--petrol); }
.feld textarea, .feld select {
  width: 100%; padding: 10px 14px; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--papier); border: 1.5px solid var(--grau-300); border-radius: var(--r-gross);
  transition: border-color var(--t-schnell) var(--ease), box-shadow var(--t-schnell) var(--ease), background var(--t-schnell) var(--ease);
}
.feld textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.feld select { min-height: 48px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.feld textarea:focus, .feld select:focus { outline: none; border-color: var(--petrol); background-color: var(--weiss); box-shadow: 0 0 0 4px rgba(44,102,112,.16); }
.feld.ist-fehler textarea, .feld.ist-fehler select { border-color: #B42318; }
.magnet .feld textarea, .magnet .feld select { background-color: rgba(247,246,244,.08); border-color: var(--linie-dunkel); color: var(--text-invers); }
.magnet .feld select option { color: var(--text); }
.magnet .feld textarea:focus, .magnet .feld select:focus { background-color: rgba(247,246,244,.12); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,191,0,.18); }
.magnet .feld textarea::placeholder { color: rgba(247,246,244,.45); }
@media (max-width: 960px) { .abschluss__raster--formular { grid-template-columns: 1fr; } }

/* Produkttreppe: Rollen-Pille auf den Kacheln, Rollen-Finder, Quick-Check-Skalen */
.kachel__rolle { position: absolute; top: var(--s6); right: var(--s6); z-index: 2; padding: 7px 14px; border-radius: var(--r-pill); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; background: rgba(44,102,112,.88); /* Luke 07.09.: alle Rollen-Pillen Petrol */ color: var(--weiss); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.kachel__rolle--fk { background: rgba(44,102,112,.88); border-color: rgba(255,255,255,.35); } /* Petrol #2C6670, Entscheidung Luke 07.09. */
.rollen { display: grid; gap: var(--s8); margin-top: var(--s8); }
.rolle__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); font-family: var(--font-display); font-weight: 600; color: var(--text); }
.rolle .einstiege { margin-top: var(--s5); }
.skala { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s2); }
.skala legend { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: var(--s2); line-height: 1.4; }
.skala__reihe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.skala__reihe label { position: relative; display: block; cursor: pointer; }
.skala__reihe input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.skala__reihe span { display: grid; place-items: center; min-height: 42px; border-radius: var(--r-gross); background: var(--papier); border: 1.5px solid var(--grau-300); font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; transition: background var(--t-schnell) var(--ease), border-color var(--t-schnell) var(--ease), color var(--t-schnell) var(--ease); }
.skala__reihe input:checked + span { background: var(--grau-900); border-color: var(--grau-900); color: var(--orange); }
.skala__reihe input:focus-visible + span { outline: 2px solid var(--petrol); outline-offset: 2px; }
.skala__pole { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-2); }
.skala.ist-fehler .skala__reihe span { border-color: #B42318; }
@media (max-width: 700px) { .kachel__rolle { top: auto; bottom: var(--s6); right: var(--s6); display: none; } }

/* Runde 2 (07.09.): Logo-Wortmarken, Messe-Karte, Vortragsliste, Statement, Termine-Sektion */
.laufband__wort { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--grau-400); white-space: nowrap; }
.laufband__ebene--farbe .laufband__wort { color: var(--text); }
.vertrauen__weitere { margin: var(--s7) auto 0; font-size: 0.8125rem; line-height: 1.7; color: var(--text-2); text-align: center; } /* Luke 07.09.: zentriert */
.vertrauen__weitere b { color: var(--text); font-family: var(--font-display); font-weight: 600; }

.tk--messe { grid-column: 1 / -1; }
/* Messe-Karte: Fläche Petrol (Vorschlag Luke 07.09. abends). Varianten für den Vergleich in vorschau/: .tk--dunkel (bisher Grau-900), .tk--gelb (Gelb mit Petrol-Akzenten). */
.tk--messe .tk__link { background: var(--petrol); color: var(--weiss); border-color: var(--petrol); }
.tk--messe .tk__datum { background: var(--orange); color: var(--grau-950); }
.tk--messe .tk__datum span { color: var(--grau-950); }
.tk--messe .tk__artzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.tk--messe .tk__artzeile .tk__art, .tk--messe .tk__artzeile .chips { margin-top: 0; }
.tk--messe .tk__art { color: rgba(255,255,255,.92); }
.tk--messe .tk__meta, .tk--messe .tk__cta { color: var(--weiss); }
.tk--messe .tk__kurz { color: rgba(255,255,255,.84); }
.tk--messe .tk__kurz + .tk__kurz { margin-top: var(--s3); }
.tk--messe .chip { background: rgba(255,255,255,.10); color: var(--weiss); border-color: rgba(255,255,255,.28); }
.tk--messe .chip--praesenz::before { background: var(--orange); }
.tk--messe .tk__vortraege { border-top-color: rgba(255,255,255,.2); }
.tk--messe .tk__vortraege li { color: rgba(255,255,255,.92); }
.tk--messe .tk__vzeit { color: var(--weiss); }
.tk--messe.tk--dunkel .tk__link { background: var(--grau-900); border-color: var(--grau-900); }
.tk--messe.tk--dunkel .tk__art, .tk--messe.tk--dunkel .tk__vzeit { color: var(--orange); }
.tk--messe.tk--gelb .tk__link { background: var(--orange); border-color: var(--orange); color: var(--grau-950); }
.tk--messe.tk--gelb .tk__datum { background: var(--petrol); color: var(--weiss); }
.tk--messe.tk--gelb .tk__datum span { color: var(--weiss); }
.tk--messe.tk--gelb .tk__art, .tk--messe.tk--gelb .tk__vzeit, .tk--messe.tk--gelb .tk__cta { color: var(--petrol-dunkel); }
.tk--messe.tk--gelb .tk__meta { color: var(--grau-950); }
.tk--messe.tk--gelb .tk__kurz { color: rgba(30,29,29,.82); }
.tk--messe.tk--gelb .chip { background: var(--petrol); color: var(--weiss); border-color: var(--petrol); }
.tk--messe.tk--gelb .chip--praesenz::before { background: var(--weiss); }
.tk--messe.tk--gelb .tk__vortraege { border-top-color: rgba(30,29,29,.18); }
.tk--messe.tk--gelb .tk__vortraege li { color: var(--grau-950); }
.tk__vortraege { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); border-top: 1px solid rgba(247,246,244,.18); padding-top: var(--s4); }
.tk__vortraege li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: var(--s4); font-size: 0.875rem; line-height: 1.45; color: rgba(247,246,244,.9); }
.tk__vzeit { font-family: var(--font-display); font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; white-space: nowrap; }
.termin-karten--drei .tk--messe { grid-column: 1 / -1; }
.termin-karten--drei .tk--messe .tk__link { grid-template-columns: 76px minmax(0, 1fr); }
.termin-karten--drei .tk--messe .tk__vortraege li { grid-template-columns: 118px minmax(0, 1fr); }

.vortraege { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: var(--s4); }
.vortrag { display: grid; grid-template-columns: 56px 220px minmax(0, 1fr) auto; gap: var(--s5); align-items: center; padding: var(--s6); background: var(--weiss); border: 1px solid var(--grau-200); border-radius: var(--r-gross); box-shadow: var(--schatten-1); }
.vortrag__nr { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; color: var(--grau-950); background: var(--orange); border-radius: var(--r-pill); padding: 7px 0; text-align: center; }
.vortrag__zeit { display: grid; gap: 2px; font-size: var(--klein); color: var(--text-2); }
.vortrag__zeit b { color: var(--text); font-family: var(--font-display); }
.vortrag h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.vortrag__ref { grid-column: 3; font-size: 0.8125rem; color: var(--text-2); margin-top: calc(-1 * var(--s3)); }
.vortrag .btn { padding: 10px 16px; font-size: 0.875rem; }
@media (max-width: 960px) { .vortrag { grid-template-columns: 56px minmax(0, 1fr); } .vortrag__zeit, .vortrag h3, .vortrag__ref, .vortrag .btn { grid-column: 2; } .vortrag .btn { justify-self: start; } }
@media (max-width: 700px) { .tk__vortraege li, .termin-karten--drei .tk--messe .tk__vortraege li { grid-template-columns: 1fr; gap: 2px; } }

/* Statement (Folie 4): eine große, ruhige Aussage in drei Zeilen, darunter drei kurze Sätze mit sanftem Reveal */
.platte__aussage { display: grid; gap: 0.1em; font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--weiss); margin-inline: auto; }
.platte__aussage > span { display: block; }
.platte__aussage .w { display: inline; }
.platte__aussage em { font-style: normal; color: var(--orange); }
.platte__saetze { list-style: none; margin: var(--s7) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s6); font-family: var(--font-display); font-size: clamp(0.9375rem, 1.3vw, 1.125rem); font-weight: 600; color: var(--gold); }
.platte__saetze li { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.platte__saetze li:nth-child(2) { transition-delay: 220ms; } .platte__saetze li:nth-child(3) { transition-delay: 440ms; }
.platte.ist-an .platte__saetze li, .platte .zeigen.ist-an ~ .platte__saetze li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .platte__saetze li { opacity: 1; transform: none; transition: none; } }

/* Termine-Sektion (Folie 6) auf Kachel-Niveau: große Datumskachel, Pill-Labels, Referent, ein CTA */
.tk__ref { margin-top: var(--s3); font-size: 0.8125rem; color: var(--text-2); }
.termin-karten--drei .tk__datum { width: 76px; }

/* MVP2: Abstand unter der großen Ziffer auch mobil (spätere Regel gewinnt gegen die ältere Mobilregel für .kachel__koerper) */
@media (max-width: 700px) { .kachel__koerper { padding-top: calc(var(--s6) + 104px); } }

/* Loop A1 (09.09.): Touch-Ziele mobil ≥ 44 px (Sarah G.: Formatierung Handy) – Fußlinks, Brotkrume, Filter-Chips, Menüknopf */
@media (max-width: 700px) {
  .fuss a { display: inline-block; padding: 10px 0; }
  .brotkrume a { display: inline-block; padding: 12px 0; }
  .chip--wahl { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .nav-knopf { min-width: 44px; min-height: 44px; }
}

/* ---------- Kennzahlen (Sebastian, Klickreise 10.09.) ----------
   Kompakt, ohne Hochzähl-Animation: die Zahlen stehen sofort da und bleiben mit „Bewegung reduzieren“ lesbar.
   Gelb nur als Akzent (Linie über jeder Zahl). Startseite: Streifen in der Statement-Platte; Institut: eigenes Band. */
.kennzahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
.kennzahlen li { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s4); border-top: 3px solid var(--orange); }
.kennzahl__wert { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.kennzahl__text { font-size: var(--klein); line-height: 1.5; color: var(--text-2); }
.kennzahlen__unterzeile { margin-top: var(--s5); font-size: var(--klein); line-height: 1.5; color: var(--text-2); }
.kennzahlen--dunkel { margin: var(--s8) 0 0; text-align: left; }
.kennzahlen--dunkel .kennzahl__wert { color: var(--weiss); }
.kennzahlen--dunkel .kennzahl__text, .platte .kennzahlen__unterzeile { color: rgba(255,255,255,.72); }
.platte .kennzahlen__unterzeile { text-align: left; }
.kennzahlband { padding-block: var(--s8); background: var(--papier); border-bottom: 1px solid var(--grau-200); }
.kennzahlband__leitsatz { margin: 0 0 var(--s6); /* Luke 11.09.: volle Breite statt 40ch */ font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
@media (max-width: 700px) { .kennzahlen { grid-template-columns: 1fr; gap: var(--s4); } .kennzahlen--dunkel { margin-top: var(--s7); } }

/* ---------- Neuro-Leadership als Untertitel (Sebastian, 10.09.) ---------- */
.seitenkopf__untertitel { margin-top: var(--s2); font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.seitenkopf__titel .seitenkopf__untertitel { grid-column: 2; }
.seitenkopf__titel:has(.seitenkopf__untertitel) .seitenkopf__nr { grid-row: 1 / span 3; }
@media (max-width: 700px) { .seitenkopf__titel .seitenkopf__untertitel { grid-column: 1; } .seitenkopf__titel:has(.seitenkopf__untertitel) .seitenkopf__nr { grid-row: auto; } }
.kachel__untertitel { display: block; margin-top: var(--s2); font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,.9); }