/* 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: balance; }
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); }
.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; }


/* ---------- 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; max-width: 30ch; 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); max-width: 70ch; 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; max-width: 46ch; 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); max-width: 65ch; }
.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); } }

/* ---------- 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(--r12); 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(--r8); 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; }
}

/* 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);
}
.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; max-width: 34ch; margin-top: var(--s5); }
.abschluss h2 em { font-style: normal; color: var(--orange); }
.abschluss__lead { max-width: 90ch; 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; max-width: 34ch; margin-top: var(--s5); }
.seitenkopf__sub { margin-top: var(--s5); font-size: 1.1875rem; font-weight: 600; max-width: 90ch; 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; max-width: 34ch; 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); max-width: 90ch; }
.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 { max-width: 940px; 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); max-width: 68ch;
}
.platzhalter strong { color: var(--gold-text); }

.faq { max-width: 940px; 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); max-width: 65ch; }

.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 64s linear infinite; }
@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) ────────────────────────────────────────────
   Lesemaß statt Inhaltsbreite: ~68 Zeichen je Zeile. Die volle 1320px-Breite
   ist für Fließtext zu weit — das Auge verliert beim Zeilensprung den Anschluss. */
.artikel__kopf { padding-top: 150px; max-width: 820px; }
.artikel__text { max-width: 720px; 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); }
.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); max-width: 68ch; 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); max-width: 68ch; }
.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); }
.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; max-width: none; }
.artikel__kopf h1 { max-width: 24ch; 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); max-width: 60ch; }

@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; }
}
/* Artikel als zentrierte Lesespalte: Kopf 860, Bild 980, Text 760 */
.artikel__kopf { max-width: calc(860px + 2 * var(--rand)); }
.artikel__bild { margin-inline: auto; }
.artikel__text { max-width: calc(760px + 2 * var(--rand)); }
.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; }
.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); max-width: 100ch; 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; }
}