/* ==========================================================================
   Design T — „Terrain“ · das gewählte Design für no-sycophancy
   Höhenlinien, ein Pfad der sich beim Scrollen zeichnet, Etappen statt Sektionen.
   Zwei Modi: Dunkel (Moosgrün) und Hell (Ecru). Umschalter oben im Menü.

   Farbrollen (bleiben in beiden Modi gleich benannt):
     --t-bg      Grundfläche der Seite
     --t-ink     Text auf der Grundfläche
     --t-copper  Akzent, in beiden Modi lesbar
   Invertierte Abschnitte (.section.dark) tauschen bg und ink automatisch.
   ========================================================================== */

/* ---------- Tokens: Dunkelmodus (Standard) ---------- */
body.theme-t {
  --t-bg: #0F1B16;
  --t-bg-2: #142420;
  --t-bg-3: #1B2E27;
  --t-ink: #F2EDE3;
  --t-ink-soft: rgba(242, 237, 227, 0.74);
  --t-ink-mute: rgba(242, 237, 227, 0.58);
  --t-line: rgba(242, 237, 227, 0.16);
  --t-line-strong: rgba(242, 237, 227, 0.32);
  --t-btn-line: rgba(242, 237, 227, 0.42);   /* 3,66:1 auf #0F1B16 */
  --t-copper: #D08F48;
  --t-copper-soft: #E7BC8B;
  /* Kupfer für die invertierte Fläche (.section.dark), dort ist der Grund hell */
  --t-copper-inv: #8A4E12;
  --t-header-h: 73px;
  --t-shadow: rgba(0, 0, 0, 0.55);
  --t-topo: 0.075;
  --t-grain: 0.05;
  --font-t: "Fraunces", "Instrument Serif", Georgia, serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 12px;
  --radius-ctl: 5px;
  --container: 1240px;
  background: var(--t-bg);
  color: var(--t-ink);
  font-weight: 300;
}

/* ---------- Grundgerüst an Terrain koppeln ----------
   style.css bringt eigene Farbwerte mit (Espresso, Sand, Weiß). Bausteine, die das Theme nicht
   einzeln umfärbt — Karten, Akkordeon, Inhaltsverzeichnis, Zitat, Zeitleiste —, standen dadurch im
   Dunkelmodus mit dunkler Schrift auf dunklem Grund bzw. heller Schrift auf weißer Karte (Kontrast
   1,0–1,3). Hier werden die Grundgerüst-Werte auf die Terrain-Werte umgelenkt; weil die t-Werte je
   Modus wechseln, folgen alle Bausteine automatisch Hell und Dunkel. */
body.theme-t {
  --ink: var(--t-ink);
  --ink-soft: var(--t-ink-soft);
  --ink-mute: var(--t-ink-mute);
  --line: var(--t-line);
  --line-strong: var(--t-line-strong);
  --espresso: var(--t-ink);
  --espresso-deep: var(--t-ink);
  --offwhite: var(--t-bg);
  --sand: var(--t-bg-2);
  --sand-deep: var(--t-bg-3);
  --mauve: var(--t-copper);
  --mauve-soft: var(--t-copper-soft);
  --on-dark: var(--t-bg);
  --on-dark-soft: color-mix(in srgb, var(--t-bg) 74%, transparent);
  --on-dark-line: color-mix(in srgb, var(--t-bg) 20%, transparent);
}
body.theme-t .card { background: var(--t-bg-2); border-color: var(--t-line); }
body.theme-t .card.sand { background: var(--t-bg-3); border-color: var(--t-bg-3); }

/* ---------- Tokens: Hellmodus ---------- */
html[data-mode="light"] body.theme-t {
  --t-bg: #F4EFE6;
  --t-bg-2: #EBE4D7;
  --t-bg-3: #E1D8C8;
  --t-ink: #16241E;
  --t-ink-soft: rgba(22, 36, 30, 0.76);
  --t-ink-mute: rgba(22, 36, 30, 0.68);
  --t-line: rgba(22, 36, 30, 0.16);
  --t-line-strong: rgba(22, 36, 30, 0.32);
  --t-btn-line: rgba(22, 36, 30, 0.52);      /* 3,27:1 auf #F4EFE6 */
  --t-copper: #8F4F12;
  --t-copper-soft: #7E460F;
  --t-copper-inv: #E7BC8B;
  --t-shadow: rgba(22, 36, 30, 0.3);
  --t-topo: 0.1;
  --t-grain: 0.035;
}

/* ---------- Grundtypografie ---------- */
body.theme-t ::selection { background: var(--t-copper); color: var(--t-bg); }
body.theme-t h1, body.theme-t h2, body.theme-t h3, body.theme-t h4 {
  color: inherit; font-family: var(--font-t); font-weight: 400;
  font-variation-settings: "SOFT" 40;  /* opsz automatisch, wie die Haltungs-Zeile (Feedback 19.09.) */
}
body.theme-t .muted { color: var(--t-ink-mute); }
body.theme-t .lead { color: var(--t-ink-soft); font-weight: 300; }
body.theme-t .prose { color: var(--t-ink-soft); }
body.theme-t .prose strong { color: var(--t-ink); font-weight: 500; }
body.theme-t .prose a { color: var(--t-ink); text-decoration-color: var(--t-copper); }
body.theme-t .prose .btn { color: var(--t-bg); text-decoration: none; }
body.theme-t .grid.split .prose { max-width: 58ch; }
body.theme-t .serif { font-family: var(--font-t); }
body.theme-t .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.theme-t #main, body.theme-t .footer { position: relative; z-index: 2; }
body.theme-t .header { z-index: 100; }

/* ---------- Hintergrund: Höhenlinien + Korn (statisch, damit nichts flimmert) ---------- */
body.theme-t::after {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: var(--t-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
body.theme-t .t-topo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.theme-t .t-topo svg {
  position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax;
  transform: translate(-50%, -50%); color: var(--t-ink); opacity: var(--t-topo);
}
body.theme-t .t-topo svg path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---------- Pfad-Schiene links: startet unter dem Menü ---------- */
body.theme-t .t-rail {
  position: fixed; left: clamp(10px, 1.6vw, 26px); top: 92px; bottom: 24px; width: 22px;
  z-index: 5; pointer-events: none;
}
body.theme-t .t-rail svg { width: 100%; height: 100%; display: block; }
body.theme-t .t-rail { --rail-line: var(--t-line); --rail-accent: var(--t-copper); }
body.theme-t .t-rail.on-light { --rail-line: rgba(22, 36, 30, 0.26); --rail-accent: #8A4E12; }
body.theme-t .t-rail.on-dark { --rail-line: rgba(242, 237, 227, 0.26); --rail-accent: #D08F48; }
body.theme-t .t-rail .base { fill: none; stroke: var(--rail-line); stroke-width: 1; }
body.theme-t .t-rail .prog { fill: none; stroke: var(--rail-accent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
body.theme-t .t-rail .dot { fill: var(--rail-accent); }
body.theme-t .t-rail .alt {
  position: absolute; left: 27px; top: 50%; transform: translateY(-50%) rotate(90deg);
  transform-origin: left center; font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase;
  white-space: nowrap; font-weight: 600; color: var(--t-ink-mute); transition: color 0.3s;
}
body.theme-t .t-rail.on-light .alt { color: rgba(22, 36, 30, 0.55); }
body.theme-t .t-rail.on-dark .alt { color: rgba(242, 237, 227, 0.55); }
@media (max-width: 1100px) { body.theme-t .t-rail { display: none; } }

/* ---------- Header ---------- */
body.theme-t .header { background: color-mix(in srgb, var(--t-bg) 82%, transparent); border-bottom: 1px solid var(--t-line); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { body.theme-t .header { background: var(--t-bg); } }
body.theme-t .header.is-scrolled { box-shadow: none; }
body.theme-t .header .container { height: 72px; gap: 16px; }
body.theme-t .brand { color: var(--t-ink); flex: 0 1 auto; min-width: 0; }
body.theme-t .brand > span { min-width: 0; }
body.theme-t .brand .wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1119px) { body.theme-t .header .brand { min-height: 44px; } }
@media (max-width: 400px) {
  body.theme-t .menu-toggle .txt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  body.theme-t .brand svg { width: 28px; height: 28px; }
}
body.theme-t .brand svg { color: var(--t-copper); }
body.theme-t .brand .wordmark { font-size: 17px; }
body.theme-t .nav { gap: 2px; }
body.theme-t .nav a { color: var(--t-ink-soft); font-weight: 400; font-size: 14px; padding: 10px 11px; white-space: nowrap; }
/* Der Kennenlernen-Knopf ist auch ein Link im Menü: Ohne die Ausnahme bekam er im Hover
   die Textfarbe --t-ink — dieselbe Farbe, die seine Fläche im Hover annimmt. Text und Fläche
   waren identisch, die Beschriftung unsichtbar (Stefan, 23.09., in beiden Modi). */
body.theme-t .nav a:not(.btn):hover, body.theme-t .nav a:not(.btn)[aria-current="page"] { color: var(--t-ink); }
body.theme-t .nav a[aria-current="page"]::after { background: var(--t-copper); left: 11px; right: 11px; }
body.theme-t .nav .btn { margin-left: 8px; padding: 11px 16px; font-size: 13px; font-weight: 600; }
body.theme-t .menu-toggle { color: var(--t-ink); }
body.theme-t .menu-toggle .bars::before, body.theme-t .menu-toggle .bars::after { background: var(--t-ink); }
body.theme-t .header-mobile { display: flex; align-items: center; gap: 4px; margin-left: auto; }
@media (max-width: 1119px) {
  body.theme-t .header .header-mobile { gap: 8px; }
  body.theme-t .header-mobile .mode-toggle { width: 44px; height: 44px; }
  body.theme-t .header-mobile .menu-toggle { min-width: 44px; min-height: 44px; justify-content: center; padding: 10px; }
}
@media (min-width: 620px) and (max-width: 1119px) {
  body.theme-t .header .nav { display: flex; margin-left: auto; }
  body.theme-t .header .nav > a:not(.btn), body.theme-t .header .nav > .mode-toggle { display: none; }
  body.theme-t .header .nav .btn { margin-left: 0; margin-right: 12px; min-height: 44px; }
  body.theme-t .header .header-mobile { margin-left: 0; }
}
body.theme-t .mobile-nav { background: var(--t-bg); inset-block-start: var(--t-header-h); }
body.theme-t .mobile-nav a { color: var(--t-ink); border-bottom-color: var(--t-line); font-family: var(--font-t); }
body.theme-t .mobile-nav .meta { color: var(--t-ink-mute); display: grid; gap: 2px; }
body.theme-t .mobile-nav .meta a {
  display: block; font-family: var(--font-sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0; padding: 10px 0; border-bottom: 0; color: var(--t-ink-mute);
}
@media (min-width: 1120px) { body.theme-t .header-mobile { display: none; } }
@media (min-width: 1120px) and (max-width: 1319px) { body.theme-t .nav a { padding: 10px 7px; font-size: 13px; } body.theme-t .nav .btn { margin-left: 4px; padding: 12px 15px; } body.theme-t .nav .mode-toggle { margin-left: 2px; width: 34px; height: 34px; } }
@media (max-width: 1119px) { body.theme-t .nav { display: none; } }

/* Hell/Dunkel-Schalter */
body.theme-t .mode-toggle {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--t-ink-soft); flex: none; transition: background 0.25s, color 0.25s;
}
body.theme-t .mode-toggle:hover { background: var(--t-line); color: var(--t-ink); }
body.theme-t .mode-toggle svg { width: 19px; height: 19px; }
body.theme-t .mode-toggle .i-sun { display: none; }
html[data-mode="light"] body.theme-t .mode-toggle .i-sun { display: block; }
html[data-mode="light"] body.theme-t .mode-toggle .i-moon { display: none; }
body.theme-t .nav .mode-toggle { margin-left: 6px; }

/* Sprachumschalter DE/EN (seit 13.10.2026), gleiche Größe und Farben wie der Hell/Dunkel-Schalter */
body.theme-t .lang-switch {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: var(--t-ink-soft); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-decoration: none; transition: background 0.25s, color 0.25s;
}
body.theme-t .lang-switch:hover, body.theme-t .lang-switch:focus-visible { background: var(--t-line); color: var(--t-ink); }
body.theme-t .nav a.lang-switch { padding: 0; font-size: 12px; font-weight: 600; }
body.theme-t .nav a.lang-switch::after { display: none; }
@media (max-width: 1119px) { body.theme-t .header-mobile .lang-switch { width: 44px; height: 44px; } }
@media (min-width: 620px) and (max-width: 1119px) { body.theme-t .header .nav > a.lang-switch { display: none; } }
@media (min-width: 1120px) and (max-width: 1319px) { body.theme-t .nav a.lang-switch { width: 34px; height: 34px; padding: 0; } }

/* ---------- Buttons ---------- */
body.theme-t .btn {
  border-radius: var(--radius-ctl); background: var(--t-copper); border-color: var(--t-copper); color: var(--t-bg);
  font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
}
body.theme-t .btn:hover { background: var(--t-ink); border-color: var(--t-ink); color: var(--t-bg); transform: translateY(-2px); }
body.theme-t .btn .dot { background: var(--t-bg); opacity: 0.55; }
body.theme-t .btn.ghost { background: transparent; color: var(--t-ink); border-color: var(--t-btn-line); }
body.theme-t .btn.ghost:hover { background: transparent; border-color: var(--t-copper); color: var(--t-copper); }
body.theme-t .btn.ghost .dot { background: var(--t-copper); opacity: 1; }
body.theme-t .btn.light { background: var(--t-ink); border-color: var(--t-ink); color: var(--t-bg); }
body.theme-t .btn.light:hover { background: var(--t-copper); border-color: var(--t-copper); color: var(--t-bg); }
body.theme-t .btn.light .dot { background: var(--t-bg); opacity: 0.55; }
body.theme-t .btn.ghost-light { background: transparent; color: var(--t-ink); border-color: var(--t-btn-line); }
body.theme-t .btn.ghost-light:hover { background: transparent; border-color: var(--t-copper); color: var(--t-copper); }
body.theme-t .btn.ghost-light .dot { background: var(--t-copper); opacity: 1; }
body.theme-t .nav .btn, body.theme-t .mobile-nav .btn { color: var(--t-bg); }
body.theme-t .nav a, body.theme-t .skip-link { border-radius: var(--radius-ctl); }

/* ---------- Labels, Pills ---------- */
body.theme-t .label { color: var(--t-copper); font-weight: 600; letter-spacing: 0.22em; }
body.theme-t .label { align-items: flex-start; }
body.theme-t .label::before { background: var(--t-copper); width: 22px; height: 1px; border-radius: 0; margin-top: 9px; }
body.theme-t .label .etappe { color: var(--t-ink-mute); margin-right: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.theme-t .pill { border-color: var(--t-line-strong); color: var(--t-ink-soft); border-radius: 999px; }
body.theme-t .pill::before { background: var(--t-copper); }

/* ---------- Überschriften ---------- */
body.theme-t .h1 {
  font-family: var(--font-t); font-weight: 300;
  font-size: clamp(31px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 60;
}
body.theme-t .hero .h1 .serif {
  display: block; font-style: italic; font-weight: 300; color: var(--t-copper);
  font-size: 1em; margin-top: 0.08em; font-variation-settings: "SOFT" 100;
}
/* Zurückgenommener Auftakt in einer Überschrift: gleiche Schrift, ruhigere Farbe */
body.theme-t .h1 .soft { display: inline; font-style: normal; font-weight: 500; color: color-mix(in srgb, var(--t-ink) 60%, transparent); }
body.theme-t .h2 {
  font-family: var(--font-t); font-weight: 300;
  font-size: clamp(29px, 3.7vw, 50px); letter-spacing: -0.02em; line-height: 1.04;
}
body.theme-t .statement {
  font-family: var(--font-t); font-style: normal; font-weight: 300; color: var(--t-ink);
  font-size: clamp(26px, 3.1vw, 42px); line-height: 1.08;
}
body.theme-t .statement .accent { font-style: italic; color: var(--t-copper); }

/* Wort-Aufbau der H1 */
body.theme-t .h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; margin-bottom: -0.14em; }
body.theme-t .h1 .w > span { display: inline-block; transform: translateY(105%); opacity: 0; }
body.theme-t.is-ready .h1 .w > span { animation: t-up 0.9s var(--ease-out) forwards; animation-delay: calc(0.15s + var(--i, 0) * 0.04s); }
@keyframes t-up { to { transform: none; opacity: 1; } }
html.js-motion body.theme-t .hero .label, html.js-motion body.theme-t .hero .lead, html.js-motion body.theme-t .hero .btn-row, html.js-motion body.theme-t .hero .facts-cols {
  opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
html.js-motion body.theme-t.is-ready .hero .label { opacity: 1; transform: none; transition-delay: 0.04s; }
html.js-motion body.theme-t.is-ready .hero .lead { opacity: 1; transform: none; transition-delay: 0.16s; }
html.js-motion body.theme-t.is-ready .hero .btn-row { opacity: 1; transform: none; transition-delay: 0.24s; }
html.js-motion body.theme-t.is-ready .hero .facts-cols { opacity: 1; transform: none; transition-delay: 0.32s; }

/* ---------- Hero ---------- */
body.theme-t .hero { padding: clamp(26px, 3.4vw, 46px) 0 clamp(32px, 4vw, 56px); overflow: hidden; }
@media (min-width: 900px) {
  body.theme-t .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); align-items: center; gap: clamp(28px, 4vw, 56px); }
  /* Feedback 19.09.: Text beginnt auf Höhe des Fotos statt darüber (vorher vertikal zentriert,
     das kürzere Foto saß 134 px tiefer als die erste Textzeile). */
  body.theme-t .hero .hero-grid { align-items: start; padding-top: clamp(12px, 2vw, 32px); }
}
body.theme-t .hero .h1 { max-width: 20ch; margin-bottom: 20px; }
body.theme-t .hero .lead { max-width: 52ch; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.55; }
body.theme-t .hero .btn-row { margin-top: 22px; }

/* Kurzprofil in zwei Spalten */
body.theme-t .facts-cols {
  display: grid; grid-template-columns: 1fr; gap: 6px 32px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--t-line);
}
@media (min-width: 560px) { body.theme-t .facts-cols { grid-template-columns: 1fr 1fr; } }
body.theme-t .facts-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.theme-t .facts-cols li { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; color: var(--t-ink-soft); }
body.theme-t .facts-cols li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--t-copper); flex: none; transform: translateY(-2px); }

/* Porträt */
body.theme-t .hero-media { max-width: 380px; margin-left: auto; position: relative; }
@media (max-width: 899px) { body.theme-t .hero-media { margin-left: 0; margin-right: auto; } }
@media (min-width: 620px) and (max-width: 899px) { body.theme-t .hero-media { max-width: 520px; } }
html.js-motion body.theme-t .hero-media { opacity: 0; }
body.theme-t.is-ready .hero-media { animation: t-fade 0.5s var(--ease-out) 0.2s forwards; }
@keyframes t-fade { to { opacity: 1; } }
body.theme-t .hero-media .photo {
  position: relative;
  border-radius: 22px; aspect-ratio: 4 / 4.7; background: var(--t-bg-2);
  box-shadow: 0 40px 70px -40px var(--t-shadow);
}
body.theme-t .hero-media .photo img { filter: saturate(0.82) sepia(0.1) contrast(1.04); object-position: 50% 18%; }
body.theme-t .hero-media .photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--t-line-strong);
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--t-bg) 70%, transparent));
}
body.theme-t .hero-media .mark { color: var(--t-copper); opacity: 1; width: 23%; right: -7%; bottom: 7%; }
@media (max-width: 899px) { body.theme-t .hero-media .mark { right: -12px; top: 0; bottom: auto; margin-top: 86.3%; } }
html.js-motion body.theme-t .hero-media .mark path { stroke-dasharray: 150; stroke-dashoffset: 150; }
html.js-motion body.theme-t .hero-media .mark circle { opacity: 0; }
body.theme-t.is-ready .hero-media .mark path { animation: t-draw 1.1s var(--ease-out) 0.9s forwards; }
body.theme-t.is-ready .hero-media .mark circle { animation: t-pop 0.45s var(--ease-out) 1.9s forwards; }
@keyframes t-draw { to { stroke-dashoffset: 0; } }
@keyframes t-pop { from { opacity: 0; transform: scale(0.4); transform-origin: 86px 50px; } to { opacity: 1; transform: none; } }
body.theme-t .hero-media .caption {
  color: var(--t-ink-mute); font-family: var(--font-t); font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: 15px; text-align: center; left: 0; right: 0;
  top: calc(100% + 10px); bottom: auto;
}
body.theme-t .t-coords {
  position: absolute; right: var(--gutter); bottom: 14px; display: flex; gap: 22px;
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--t-ink-mute); font-weight: 600;
}
@media (max-width: 1100px) { body.theme-t .t-coords { display: none; } }

/* ---------- Laufband ---------- */
body.theme-t .ticker {
  overflow: hidden; border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line);
  background: var(--t-bg-2);
}
body.theme-t .ticker .track { display: flex; width: max-content; will-change: transform; }
body.theme-t .ticker .item {
  display: inline-flex; align-items: center; gap: 18px; padding: 15px 0;
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-ink-soft);
  white-space: nowrap; font-weight: 500;
}
body.theme-t .ticker .item.strong { color: var(--t-copper); font-weight: 700; }
body.theme-t .ticker .item::after { content: ""; width: 22px; height: 1px; background: var(--t-copper); margin: 0 22px; flex: none; }
/* Reine CSS-Animation: läuft auf dem Compositor und kostet den Hauptthread nichts */
body.theme-t .ticker .track { animation: ticker-run 54s linear infinite; }
body.theme-t .ticker:hover .track { animation-play-state: paused; }
@keyframes ticker-run { to { transform: translateX(-50%); } }

/* ---------- Flächen ---------- */
body.theme-t .section { position: relative; }
body.theme-t .section.sand { background: transparent; border-top: 0; }
/* Zwei Sektionen auf demselben Grund werden immer durch eine Haarlinie getrennt */
body.theme-t .section + .section { border-top: 1px solid var(--t-line); }
/* Dunkle Abschnitte (Bausteine, Arbeitsweise, Ablauf) folgen seit dem Feedback vom 19.09.2026 dem
   Modus: im Dunkelmodus dunkel, im Hellmodus hell. Vorher waren sie fest invertiert. Nur die
   Bausteine-Karten stehen invertiert auf der Fläche (helle Karten im Dunkelmodus, dunkle im Hellmodus).
   Die Grundgerüst-Regeln für .dark (style.css) werden über die on-dark-Werte auf normal gestellt. */
body.theme-t .section.dark,
body.theme-t .section.dark + .section { border-top: 0; }
/* Ruhiger Grund wie Etappe 03: einfarbige Fläche statt durchscheinender Höhenlinien
   (Dennis 22.09.2026: Haltung, Methode 01 + 03, Therapeut & Coach 02, Begleitung Format 02,
   Sycophantic 01). */
body.theme-t .section.ruhig,
body.theme-t .section.sand.ruhig { background: var(--t-bg-2); }
body.theme-t .section.ruhig,
body.theme-t .section.ruhig + .section { border-top: 0; }
body.theme-t .section.dark {
  background: var(--t-bg-2); color: var(--t-ink);
  --on-dark: var(--t-ink);
  --on-dark-soft: var(--t-ink-soft);
  --on-dark-line: var(--t-line);
  --mauve-soft: var(--t-copper);
}
body.theme-t .section.dark .btn.light { background: var(--t-copper); border-color: var(--t-copper); color: var(--t-bg); }
body.theme-t .section.dark .btn.light:hover { background: var(--t-ink); border-color: var(--t-ink); color: var(--t-bg); }
body.theme-t .section.dark .btn.light .dot { background: var(--t-bg); opacity: 0.55; }
body.theme-t .section.dark .btn.ghost-light { background: transparent; color: var(--t-ink); border-color: var(--t-btn-line); }
body.theme-t .section.dark .btn.ghost-light:hover { border-color: var(--t-ink); color: var(--t-ink); background: color-mix(in srgb, var(--t-ink) 8%, transparent); }
body.theme-t .section.dark .btn.ghost-light .dot { background: var(--t-copper); }
body.theme-t .section.dark .btn-row { position: relative; z-index: 2; padding-top: clamp(14px, 2vw, 26px); }
/* ---------- Video + Abgrenzungshinweis ---------- */
body.theme-t .video { background: var(--t-bg-2); color: var(--t-ink); border: 1px solid var(--t-line); border-radius: var(--radius); }
body.theme-t .video::before, body.theme-t .video::after {
  content: ""; position: absolute; width: 20px; height: 20px; border: 1.5px solid var(--t-copper); z-index: 3;
}
body.theme-t .video::before { left: 14px; top: 14px; border-right: 0; border-bottom: 0; }
body.theme-t .video::after { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }
body.theme-t .video .overlay { background: none; justify-content: center; }
body.theme-t .video .overlay .title { font-family: var(--font-t); font-weight: 300; font-size: clamp(26px, 3.3vw, 46px); max-width: 24ch; font-variation-settings: normal; letter-spacing: normal; }
body.theme-t .video .overlay .label { color: var(--t-copper); }
body.theme-t .video .overlay .label::before { background: var(--t-copper); }
body.theme-t .video .overlay .sub { color: var(--t-ink-soft); }
body.theme-t .video .consent { background: var(--t-bg-2); color: var(--t-ink); }
body.theme-t .video .consent p { color: var(--t-ink-soft); }
body.theme-t .video .consent .label { color: var(--t-copper); }
body.theme-t .video .mark { color: var(--t-copper); opacity: 0.3; }
body.theme-t .video .play { background: var(--t-copper); color: var(--t-bg); border: 0; border-radius: 50%; }
@media (max-width: 440px) { body.theme-t .video.is-pending { aspect-ratio: auto; min-height: 200px; } }
@media (min-width: 900px) { body.theme-t .video.is-pending { aspect-ratio: 21 / 9; } }
body.theme-t .disclaimer {
  margin: 20px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.7;
  color: var(--t-ink-mute); border-left: 2px solid var(--t-copper); padding-left: 16px;
}

/* ---------- Haltung: Lese-Highlight ---------- */
body.theme-t .prose .w { color: color-mix(in srgb, var(--t-ink) 64%, transparent); transition: color 0.35s; }
body.theme-t .prose .w.on { color: var(--t-ink-soft); }
body.theme-t .prose strong .w.on { color: var(--t-ink); }
body.theme-t .reveal { opacity: 1; transform: none; }

/* ---------- Prinzipien: Route mit Etappenpunkten ---------- */
body.theme-t .route { position: relative; }
body.theme-t .route svg.path { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
body.theme-t .route svg.path path { fill: none; stroke: var(--t-copper); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.5; }
body.theme-t .route .features { display: block; border: 0; }
body.theme-t .route .feature {
  display: grid; grid-template-columns: 64px 1fr; gap: 6px 22px; align-items: start;
  border: 0 !important; padding: 0 !important; max-width: 520px;
  margin-bottom: clamp(38px, 5vw, 84px); position: relative;
}
body.theme-t .route .feature:last-child { margin-bottom: 0; }
@media (min-width: 900px) { body.theme-t .route .feature:nth-child(even) { margin-left: auto; } }
body.theme-t .route .feature .check {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--t-copper);
  background: var(--t-bg); display: grid; place-items: center; font-family: var(--font-t);
  font-size: 18px; color: var(--t-copper); grid-row: span 2; position: relative; z-index: 1;
}
body.theme-t .route .feature .check svg { display: none; }
body.theme-t .route .feature .check::after { content: attr(data-n); }
body.theme-t .route .feature h3 { font-size: clamp(23px, 2.5vw, 34px); line-height: 1.05; margin-bottom: 7px; }
body.theme-t .route .feature p { color: var(--t-ink-soft); font-size: 15.5px; }

/* ---------- Bausteine: seitlich scrollbare Etappen ----------
   Neu am 21.09.2026. Vorher: gefüllte, gerundete Karten aus der Designvariante K, die beim
   Scrollen angeheftet und seitlich verschoben wurden (sehr hoher, großteils leerer Abschnitt).
   Jetzt: normale Höhe, Karten in der Sprache der Prinzipien — Etappenkreis mit Nummer auf
   einer durchlaufenden Kupferlinie, leichte Fraunces-Titel, keine Flächen. Scrollen per
   Wischen, Trackpad, Tastatur oder Pfeilknopf. */
body.theme-t .hscroll { position: relative; }
body.theme-t .hscroll-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(32px, 3.4vw, 52px);
}
body.theme-t .hscroll-head .hscroll-intro-inner { max-width: 660px; }
body.theme-t .hscroll-head .h2 { margin: 10px 0 18px; }
body.theme-t .hscroll-nav { display: flex; gap: 10px; flex: none; }
body.theme-t .hscroll-nav[hidden] { display: none; }
body.theme-t .hs-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--t-copper);
  background: transparent; color: var(--t-copper); display: grid; place-items: center;
  cursor: pointer; transition: background 0.25s, color 0.25s, opacity 0.25s;
}
body.theme-t .hs-btn svg { width: 18px; height: 18px; }
body.theme-t .hs-btn:hover:not(:disabled) { background: var(--t-copper); color: var(--t-bg-2); }
body.theme-t .hs-btn:disabled { opacity: 0.28; cursor: default; }

body.theme-t .hscroll .features {
  --hs-gap: clamp(32px, 3.4vw, 56px);
  --hs-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  display: flex; align-items: flex-start; gap: var(--hs-gap); border: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--hs-start);
  padding: 4px var(--gutter) 8px var(--hs-start); -webkit-overflow-scrolling: touch;
  scrollbar-width: none;  /* Scrollleiste ausgeblendet (Dennis, 22.09.) — Pfeilknöpfe, Wischen und Tastatur bleiben */
}
body.theme-t .hscroll .features::-webkit-scrollbar { display: none; }
body.theme-t .hscroll .features:focus-visible { outline-offset: -3px; }

body.theme-t .hscroll .feature {
  flex: none; width: min(300px, 78vw); scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 !important; border: 0 !important; border-radius: 0; background: none; color: var(--t-ink);
}
/* Route: jede Etappe zieht die Linie bis zur nächsten weiter */
body.theme-t .hscroll .feature::before {
  content: ""; position: absolute; left: 0; top: 26px; height: 1px;
  width: calc(100% + var(--hs-gap)); background: var(--t-copper); opacity: 0.45;
}
body.theme-t .hscroll .feature:last-child::before { width: 100%; }
body.theme-t .hscroll .feature .num {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--t-copper); background: var(--t-bg-2);
  display: grid; place-items: center; margin-bottom: 10px; padding: 0;
  font-family: var(--font-t); font-size: 18px; line-height: 1; letter-spacing: 0; font-weight: 400;
  color: var(--t-copper); transition: background 0.25s, color 0.25s;
}
body.theme-t .hscroll .feature:hover .num { background: var(--t-copper); color: var(--t-bg-2); }
body.theme-t .hscroll .feature h3 {
  font-size: clamp(22px, 1.9vw, 27px); line-height: 1.12; font-weight: 400; color: var(--t-ink); margin: 0;
}
body.theme-t .hscroll .feature h3 .muted {
  display: block; margin-top: 6px; font-family: "Inter", -apple-system, sans-serif;
  font-size: 13px; letter-spacing: 0.02em; color: var(--t-ink-mute);
}
body.theme-t .hscroll .feature p { color: var(--t-ink-soft); font-size: 15.5px; line-height: 1.6; margin: 0; }
@media (max-width: 699px) {
  body.theme-t .hscroll-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Kennenlernen ---------- */
body.theme-t .step { border-top-color: var(--t-line); grid-template-columns: 60px 1fr; }
body.theme-t .step:last-child { border-bottom-color: var(--t-line); }
body.theme-t .step::before {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--t-copper);
  display: grid; place-items: center; font-family: var(--font-t); font-size: 15px;
  color: var(--t-copper); padding: 0; letter-spacing: 0;
}
body.theme-t .step h3 { font-size: 21px; }
body.theme-t .step p { color: var(--t-ink-soft); font-size: 15.5px; line-height: 1.6; }
body.theme-t .embed {
  border-radius: var(--radius); border: 1px solid var(--t-line); background: var(--t-bg-2);
  box-shadow: 0 50px 90px -50px var(--t-shadow);
}
body.theme-t .embed .consent { background: var(--t-bg-2); position: static; min-height: 420px; }
body.theme-t .embed .consent h3 { color: var(--t-ink); font-weight: 400; font-size: 21px; letter-spacing: -0.02em; }
body.theme-t .embed .consent p { color: var(--t-ink-soft); }
body.theme-t .embed .consent .fine { color: var(--t-ink-mute); font-size: 13px; line-height: 2.6; }
body.theme-t .embed .consent .fine a { display: inline-block; line-height: 1.4; padding: 5px 6px; margin: 0 -6px; }
body.theme-t .embed .consent a:not(.btn) { color: var(--t-ink); }
@media (max-width: 1239px) {
  body.theme-t .embed .consent .btn-row { flex-direction: column; align-items: stretch; }
  body.theme-t .embed .consent .btn-row .btn { width: 100%; justify-content: center; }
}
body.theme-t .embed iframe { height: clamp(560px, 92vh, 980px); }
body.theme-t .embed.is-loaded { min-height: 0; }
body.theme-t .embed-note { color: var(--t-ink-mute); max-width: 62ch; }
body.theme-t .embed-note svg { color: var(--t-copper); }
@media (min-width: 820px) {
  body.theme-t #kennenlernen .grid.split.sticky > :first-child { position: static; }
  body.theme-t #kennenlernen .grid.split.sticky > :last-child { position: sticky; top: 110px; }
}
body.theme-t .aside-box { background: transparent; border: 1px solid var(--t-line); border-radius: var(--radius); }
body.theme-t .aside-box p { color: var(--t-ink-soft); }

/* ---------- Abschluss über dem Footer ---------- */
body.theme-t .closing {
  text-align: center; padding: clamp(56px, 7vw, 104px) var(--gutter) clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--t-line);
}
body.theme-t .closing-line {
  font-family: var(--font-t); font-weight: 300; font-size: clamp(34px, 6vw, 92px);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--t-ink); margin: 0;
}
body.theme-t .closing-line em { font-style: italic; color: var(--t-copper); }
body.theme-t .closing-meta {
  margin-top: 18px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--t-ink-mute); font-weight: 600;
}

/* ---------- Footer ---------- */
body.theme-t .footer { background: var(--t-bg-2); border-top: 1px solid var(--t-line); color: var(--t-ink-soft); }
body.theme-t .footer h4 {
  color: var(--t-copper); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.22em;
}
@media (max-width: 819px) {
  body.theme-t .footer .top ul { gap: 8px; }
  body.theme-t .footer .top ul li a { display: block; padding: 11px 0; }
}
@media (min-width: 820px) {
  body.theme-t .footer .top ul li a { padding: 4px 0; }
}
@media (min-width: 820px) and (max-width: 1239px) {
  body.theme-t .footer .top {
    grid-template-columns: minmax(0, 3.6fr) minmax(0, 2fr) minmax(0, 3.4fr) minmax(0, 2fr);
  }
}
body.theme-t .footer .top a[href^="tel:"], body.theme-t .footer .top a[href^="mailto:"] { white-space: nowrap; }
body.theme-t .footer .brand { color: var(--t-ink); }
body.theme-t .brand .tagline { color: var(--t-ink-mute); font-size: 11px; letter-spacing: 0.18em; }
body.theme-t .footer a { color: var(--t-ink-soft); }
body.theme-t .footer a:hover { color: var(--t-copper); }
body.theme-t .footer address { color: var(--t-ink-soft) !important; }
body.theme-t .footer .top { border-bottom-color: var(--t-line); }
body.theme-t .footer .bottom { color: var(--t-ink-mute); }
body.theme-t .footer .about, body.theme-t .footer .registry { color: var(--t-ink-soft); }
body.theme-t .footer .about { font-size: 15px; }
body.theme-t .footer .registry { font-size: 13px; }

/* ---------- Auftauchen beim Scrollen ---------- */
body.theme-t [data-motion] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
body.theme-t [data-motion].in { opacity: 1; transform: none; }
body.theme-t :focus-visible { outline: 2px solid var(--t-copper); outline-offset: 3px; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  body.theme-t *, body.theme-t *::before, body.theme-t *::after { animation: none !important; transition: none !important; }
  body.theme-t .h1 .w > span, body.theme-t .hero .label, body.theme-t .hero .lead,
  body.theme-t .hero .btn-row, body.theme-t .hero .facts-cols, body.theme-t .hero-media,
  body.theme-t [data-motion] { opacity: 1; transform: none; }
  body.theme-t .hero-media .mark path { stroke-dashoffset: 0; }
  body.theme-t .hero-media .mark circle { opacity: 1; }
  body.theme-t .prose .w { color: inherit; }
  /* Ohne Bewegung zeichnet kein Skript den Fortschritt: Linien vollständig zeigen */
  body.theme-t .route svg.path path { stroke-dashoffset: 0; }
  body.theme-t .t-rail .prog { stroke-dashoffset: 0; }
  body.theme-t .t-rail { display: none; }
}

/* ---------- Schmale Fenster: lange Beschriftungen dürfen umbrechen ---------- */
@media (max-width: 400px) {
  body.theme-t .btn { white-space: normal; text-align: left; line-height: 1.25; }
  body.theme-t .btn-row { align-items: stretch; }
  body.theme-t .btn-row > .btn { flex: 1 1 auto; }
}

/* ---------- Sprungziel des Skip-Links ---------- */
body.theme-t #main[tabindex="-1"]:focus { outline: none; }

/* ---------- Druck und PDF ---------- */
@media print {
  body.theme-t .t-topo, body.theme-t .t-rail, body.theme-t .ticker,
  body.theme-t .hscroll-nav { display: none !important; }
  body.theme-t { background: #fff !important; color: #000 !important; }
  body.theme-t .section, body.theme-t .section.sand, body.theme-t .section.dark,
  body.theme-t .closing, body.theme-t .footer, body.theme-t .hscroll .feature,
  body.theme-t .embed, body.theme-t .embed .consent { background: #fff !important; }
  body.theme-t *, body.theme-t .footer a, body.theme-t .footer address,
  body.theme-t .footer .bottom { color: #000 !important; }
  body.theme-t .label::before, body.theme-t .pill::before { background: #000 !important; }
  body.theme-t .btn { background: transparent !important; color: #000 !important; border: 1px solid #000 !important; }
  body.theme-t .hscroll { height: auto !important; }
  body.theme-t .hscroll .features { display: block !important; overflow: visible !important; padding-left: 0 !important; }
  body.theme-t .hscroll .feature { width: auto !important; max-width: none !important; max-height: none !important; page-break-inside: avoid; margin-bottom: 18px; }
  body.theme-t .hscroll .feature::before { display: none !important; }
  body.theme-t .route svg.path { display: none !important; }
}

/* ==========================================================================
   Feedback 19.09.2026
   ========================================================================== */

/* Schlussblock (cta) in der Anmutung der Abschlusszeile vor der Fußzeile (Stefan, 23.09.):
   keine Farbfläche mehr, sondern groß gesetzte Schrift auf dem Seitengrund, zentriert,
   mit feiner Trennlinie darüber. Vorher: Espresso-Fläche, dann Gelb aus dem Logo. */
body.theme-t .cta {
  background: none; color: var(--t-ink);
  border-top: 1px solid var(--t-line);
  padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
  text-align: center;
}
body.theme-t .cta .inner { display: block; }
body.theme-t .cta .h2 {
  font-family: var(--font-t); font-weight: 300; color: var(--t-ink);
  font-size: clamp(31px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.02em;
  max-width: 22ch; margin: 0 auto 16px;
}
body.theme-t .cta p { color: var(--t-ink-soft); max-width: 52ch; margin: 0 auto; font-size: 16px; }
body.theme-t .cta .btn-row { justify-content: center; margin-top: clamp(26px, 3vw, 40px); }

/* Überblick · „No Sycophancy!“ als kräftiger Schriftzug */
body.theme-t .hero .h1 .serif.strong { font-weight: 560; }

/* Therapeut & Coach · „Leistung auf Langstrecke“ kursiv in der Akzentfarbe */
body.theme-t .h1 .akzent { font-style: italic; color: var(--t-copper); font-weight: inherit; }
/* Begleitung · „im Salzkammergut“ kursiv in Textfarbe */
body.theme-t .h1 .akzent-ink { font-style: italic; color: var(--t-ink); font-weight: inherit; }

/* Begleitung · Ablauf beginnt bei 00 (Kennenlernen) */
body.theme-t #ablauf .steps { counter-reset: step -1; }

/* Methode · Darreichungsform: zweite Spalte unten ausrichten */
body.theme-t .grid.split.align-end { align-items: end; }

/* Fußzeile · WhatsApp-Symbol */
body.theme-t .footer .wa-link { display: inline-flex; align-items: center; gap: 8px; }
body.theme-t .footer .wa { width: 16px; height: 16px; flex: none; }

/* Buchzitat statt Cover-Foto (Stefan, 23.09.: „bitte ein Zitat im Stil der Seite“) */
body.theme-t .buch-zitat { margin: 0; padding: 4px 0 0 26px; border-left: 1px solid var(--t-copper); }
/* Runde 3 (Andrea/Stefan, 24.09.): Zitat rechtsbündig unter dem Fließtext, deutlich abgesetzt */
body.theme-t .buch-zitat.rechts {
  width: fit-content; max-width: 460px; margin: clamp(48px, 6vw, 84px) 0 0 auto;
}
body.theme-t .buch-zitat blockquote {
  margin: 0; font-family: var(--font-t); font-weight: 300; font-style: italic;
  font-size: clamp(27px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.015em; color: var(--t-ink);
}
body.theme-t .buch-zitat figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; }
body.theme-t .buch-zitat .unter { font-size: 15px; line-height: 1.5; color: var(--t-ink-soft); max-width: 34ch; }
body.theme-t .buch-zitat .meta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--t-ink-mute);
}

/* A6 · Yerkes-Dodson-Kurve: feste Farben des alten Grundgerüsts folgen jetzt dem Modus */
body.theme-t .curve text { fill: var(--t-ink); }
body.theme-t .curve text[fill-opacity] { fill: var(--t-ink-mute); fill-opacity: 1; }
body.theme-t .curve text[fill="#8D5A5A"] { fill: var(--t-copper); }
body.theme-t .curve path[stroke] { stroke: var(--t-ink); }
body.theme-t .curve line { stroke: var(--t-line-strong); stroke-opacity: 1; }
body.theme-t .curve line[stroke-dasharray] { stroke: var(--t-copper); }
body.theme-t .curve circle { fill: var(--t-copper); }

/* A10 · „Funktional vs. dysfunktional“: der funktionale Block stand als invertierte Fläche
   und stach zu hart heraus. Jetzt dezent abgesetzt statt umgedreht. */
body.theme-t .compare > .dark {
  background: var(--t-bg-3); color: var(--t-ink);
  --on-dark: var(--t-ink); --on-dark-soft: var(--t-ink-soft); --on-dark-line: var(--t-line);
  --mauve-soft: var(--t-copper);
  border: 1px solid var(--t-line);
}
body.theme-t .compare > .dark h3 { color: var(--t-ink); }

/* Zwei einfarbige Flächen in Folge bekommen eine feine Trennung */
body.theme-t .section.ruhig + .section.dark,
body.theme-t .section.dark + .section.ruhig { border-top: 1px solid var(--t-line); }

/* ---------- Buchungskarte (Link zur Nextcloud statt Einbettung) ---------- */
body.theme-t .booking-card .consent { min-height: 0; }
body.theme-t .booking-steps { margin: 4px 0 8px; padding: 0; list-style: none; counter-reset: bstep; display: grid; gap: 10px; }
body.theme-t .booking-steps li { counter-increment: bstep; display: grid; grid-template-columns: 28px 1fr; align-items: baseline; color: var(--t-ink-soft); font-size: 15px; line-height: 1.5; }
body.theme-t .booking-steps li::before { content: counter(bstep, decimal-leading-zero); color: var(--t-copper); font-size: 13px; font-variant-numeric: tabular-nums; }
body.theme-t .booking-card .btn .ext { font-size: 0.95em; }
/* Danke-Seite: passende Variante je nach ?termin= */
html[data-termin="folgetermin"] section[data-termin="kennenlernen"],
html[data-termin="kennenlernen"] section[data-termin="folgetermin"] { display: none; }

/* ---------- Linien-Grafiken (Burnout-Uhr, Orte) ---------- */
body.theme-t .ill-frame{position:relative;margin:0;background:var(--t-bg-2);border:1px solid var(--t-line);border-radius:var(--radius);padding:clamp(16px,3vw,32px)}
body.theme-t .ill-frame::before,body.theme-t .ill-frame::after{content:"";position:absolute;width:20px;height:20px;border:1.5px solid var(--t-copper)}
body.theme-t .ill-frame::before{left:14px;top:14px;border-right:0;border-bottom:0}
body.theme-t .ill-frame::after{right:14px;bottom:14px;border-left:0;border-top:0}
body.theme-t .ill-frame svg{display:block;width:100%;height:auto}
body.theme-t .ill-frame figcaption{margin-top:14px;font-size:13px;color:var(--t-ink-mute);text-align:center}
body.theme-t .ill-frame.uhr{max-width:760px;margin:0 auto}
.ill{color:var(--t-ink);overflow:visible}
.ill .ink{stroke:var(--t-ink)} .ill .soft{stroke:var(--t-ink-soft)} .ill .mute{stroke:var(--t-ink-mute)} .ill .line{stroke:var(--t-line-strong)}
.ill .cu{stroke:var(--t-copper)} .ill .fcu{fill:var(--t-copper)} .ill .fbg{fill:var(--t-bg)} .ill .fbg2{fill:var(--t-bg-2)} .ill .fbg3{fill:var(--t-bg-3)}
.ill text{font-family:var(--font-sans);fill:var(--t-ink-soft);font-size:12px;letter-spacing:.14em}
.ill .tl{font-size:11px;font-weight:600;fill:var(--t-copper);letter-spacing:.22em}
.ill .num{font-family:var(--font-t);font-size:22px;fill:var(--t-ink);letter-spacing:0}
.ill .small{font-size:10.5px;letter-spacing:.16em;fill:var(--t-ink-mute)}
.ill .lbl{font-size:14px;letter-spacing:0;fill:var(--t-ink)}
@media (max-width:600px){
  .ill .small{font-size:18px;letter-spacing:.06em} .ill .tl{font-size:18px;letter-spacing:.1em}
  .ill .lbl{font-size:23px} .ill .num{font-size:32px}
}
/* Kapitelmarken unter dem Begleitungs-Video */
body.theme-t .chapter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
body.theme-t .chapter-row a{display:flex;gap:12px;align-items:baseline;padding:14px 16px;border:1px solid var(--t-line);border-radius:var(--radius-ctl);color:var(--t-ink);font-size:14px;transition:border-color .2s,color .2s}
body.theme-t .chapter-row a:hover{border-color:var(--t-copper);color:var(--t-copper)}
body.theme-t .chapter-row .n{color:var(--t-copper);font-size:12px;font-weight:600;letter-spacing:.1em}
@media (max-width:820px){body.theme-t .chapter-row{grid-template-columns:1fr}}

.ill .cu-t{fill:var(--t-copper)}

.ill .ph{font-size:17px;letter-spacing:0;fill:var(--t-ink-soft)}
.ill .ph-spaet{fill:var(--t-copper)}
body.theme-t .ill-frame.uhr figcaption{max-width:60ch;margin:18px auto 0;line-height:1.6;font-size:14px;color:var(--t-ink-soft)}
body.theme-t .ill-frame.uhr figcaption .quelle{display:block;margin-top:6px;font-size:12.5px;color:var(--t-ink-mute)}
body.theme-t .uhr-mobil{display:none}
@media (max-width:600px){
  .ill .ph{display:none}
  body.theme-t .uhr-mobil{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;list-style:none;margin:14px 0 0;padding:0;font-size:13.5px;color:var(--t-ink-soft)}
  body.theme-t .uhr-mobil li span{display:inline-block;width:1.8em;font-family:var(--font-t);color:var(--t-ink)}
  body.theme-t .uhr-mobil li:nth-child(n+10) span{color:var(--t-copper)}
}

/* Burnout-Uhr im Seitenkopf neben dem Einleitungstext */
body.theme-t .hero-uhr-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(20px,3vw,36px)}
body.theme-t .hero-uhr-grid .lead{max-width:44ch;margin:0 0 18px}
body.theme-t .hero-uhr .ill-frame.uhr{max-width:none;margin:0}
body.theme-t .ill-frame.uhr .ill .ph{font-size:23px}
body.theme-t .ill-frame.uhr .ill .num{font-size:30px}
body.theme-t .ill-frame.uhr .ill .lbl{font-size:21px}
body.theme-t .ill-frame.uhr .ill .small{font-size:15px;letter-spacing:.14em}
body.theme-t .ill-frame.uhr .ill .tl{font-size:16px;letter-spacing:.16em}
@media (max-width:600px){body.theme-t .ill-frame.uhr .ill .ph{display:none} body.theme-t .ill-frame.uhr .ill .num{font-size:36px}}
body.theme-t .ill-frame.uhr figcaption{margin-top:12px}
/* Heller Modus: mehr Kontrast in der Uhr */
html[data-mode="light"] body.theme-t .ill .ph{fill:var(--t-ink)}
html[data-mode="light"] body.theme-t .ill .small{fill:var(--t-ink-soft)}
html[data-mode="light"] body.theme-t .ill .mute{stroke:var(--t-ink-soft)}
html[data-mode="light"] body.theme-t .ill .line{stroke:var(--t-ink-mute)}
html[data-mode="light"] body.theme-t .ill-frame.uhr figcaption .quelle{color:var(--t-ink-soft)}
@media (max-width:900px){body.theme-t .hero-uhr-grid{grid-template-columns:1fr} body.theme-t .hero-uhr .ill-frame.uhr{max-width:560px;margin:0 auto}}

/* Uhr ohne Rahmen (Seitenkopf) */
body.theme-t .ill-frame.uhr.ohne-rahmen{background:none;border:0;padding:0;box-shadow:none}
body.theme-t .ill-frame.uhr.ohne-rahmen::before,body.theme-t .ill-frame.uhr.ohne-rahmen::after{display:none}
/* Seitenkopf Biopsychosoziales: Text links, Uhr rechts */
body.theme-t .hero-uhr-a .hero-uhr-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);margin-top:0;align-items:center}
body.theme-t .hero-uhr-a .h1{max-width:14ch}
body.theme-t .hero-uhr-a .lead{max-width:46ch}
@media (max-width:900px){body.theme-t .hero-uhr-a .hero-uhr-grid{grid-template-columns:1fr}}

/* Video mit Titelbild + Kapitel */
.video.has-poster .poster{opacity:1}
.video.has-poster .overlay{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}
.video.has-poster .mark{display:none}
body.theme-t .video.has-poster .play{right:auto;left:clamp(16px,3vw,36px);bottom:clamp(16px,3vw,36px);width:clamp(52px,6vw,76px);height:clamp(52px,6vw,76px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.video video{background:#000}
body.theme-t .video-chapters{margin-top:18px}
body.theme-t .video-chapters .vc-titel{display:block;margin-bottom:8px;color:var(--t-copper);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
body.theme-t .video-chapters ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 24px}
body.theme-t .video-chapters button{all:unset;cursor:pointer;display:flex;gap:14px;align-items:baseline;width:100%;padding:9px 0;border-bottom:1px solid var(--t-line);color:var(--t-ink-soft);font-size:15px;line-height:1.35}
body.theme-t .video-chapters button .t{font-variant-numeric:tabular-nums;color:var(--t-copper);min-width:3.2em}
body.theme-t .video-chapters button:hover,body.theme-t .video-chapters button:focus-visible{color:var(--t-ink)}
body.theme-t .video-chapters button:focus-visible{outline:2px solid var(--t-copper);outline-offset:3px}
.video video::cue{font-family:var(--font-sans,Inter,sans-serif);font-size:clamp(14px,1.6vw,20px);background:rgba(15,27,22,.78);color:#F2EDE3}

/* ===== Grafiken statt Videos (KI-Weg, Marktmatrix, Formate) ===== */
body.theme-t .ill-frame.breit{padding:clamp(18px,3.5vw,40px)}
body.theme-t .ill-frame .gr-titel{display:block;font-family:var(--font-t);font-weight:300;font-size:clamp(22px,2.6vw,32px);color:var(--t-ink);margin:0 0 6px}
body.theme-t .ill-frame .gr-sub{margin:0 0 24px;color:var(--t-ink-soft);font-size:15px;max-width:60ch}
body.theme-t .ill-frame figcaption.links{text-align:left;font-size:12.5px;line-height:1.55;color:var(--t-ink-mute)}
html[data-mode="light"] body.theme-t .ill-frame figcaption.links{color:var(--t-ink-soft)}
/* KI-Weg */
.kw{--n:6}
.kw-kopf{display:grid;grid-template-columns:1fr auto 1fr;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-ink-mute);margin-bottom:8px}
.kw-kopf .kw-r{text-align:right;color:var(--t-copper)} .kw-kopf .kw-kipp{color:var(--t-ink-soft);position:relative;left:0}
.kw-band{height:8px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--t-copper) 12%,transparent) 0%,color-mix(in srgb,var(--t-copper) 30%,transparent) 45%,var(--t-copper) 100%);position:relative;margin-bottom:22px}
.kw-band::after{content:"";position:absolute;left:50%;top:-6px;width:2px;height:20px;background:var(--t-ink-soft)}
.kw-feld{position:relative}
.kw-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;position:relative}
.kw-st{padding-top:calc(26px + var(--i) * var(--i) * 3.1px);display:flex;flex-direction:column;gap:6px}
.kw-st .kw-n{font-family:var(--font-t);font-size:26px;color:var(--t-ink);line-height:1}
.kw-st.spaet .kw-n,.kw-st.spaet strong{color:var(--t-copper)}
.kw-st strong{font-weight:600;font-size:15.5px;color:var(--t-ink)}
.kw-st .kw-t{font-size:14px;line-height:1.45;color:var(--t-ink-soft)}
.kw-st .kw-fach{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-ink-mute)}
.kw-fuss{margin-top:18px;font-size:12px;color:var(--t-ink-mute)}
.kw-m{display:block;height:4px;border-radius:2px;background:var(--t-line);margin-top:8px;overflow:hidden}
.kw-m i{display:block;height:100%;width:var(--w);background:var(--t-ink-soft);border-radius:2px}
.kw-leg{display:inline-flex;align-items:center;gap:10px}.kw-leg .kw-m{width:40px;margin:0}
html[data-mode="light"] body.theme-t .kw-m{background:var(--t-line-strong)}
@media (max-width:820px){
  .kw-band::after{display:none}
  .kw-liste{grid-template-columns:1fr;gap:16px;border-left:3px solid transparent;border-image:linear-gradient(180deg,color-mix(in srgb,var(--t-copper) 15%,transparent),var(--t-copper)) 1;padding-left:16px}
  .kw-st{padding-top:0;display:grid;grid-template-columns:44px 1fr;column-gap:10px}
  .kw-st .kw-n{grid-row:span 4;font-size:24px}
  .kw-st>*:not(.kw-n){grid-column:2}
  .kw-band{display:none}
  .kw-kopf{display:flex;justify-content:space-between}.kw-kopf .kw-kipp{display:none}
  .kw-st:nth-child(4){border-top:1px dashed var(--t-copper);padding-top:22px;position:relative}
  .kw-st:nth-child(4)::before{content:"Kipppunkt";position:absolute;top:-9px;left:0;padding-right:8px;background:var(--t-bg-2);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-ink-soft)}
}
/* Marktmatrix */
.mx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.mx-tab{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:14px}
.mx-tab th,.mx-tab td{padding:12px 10px;border-bottom:1px solid var(--t-line);text-align:center;vertical-align:middle}
.mx-tab thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-ink-soft);font-weight:500;border-bottom:1px solid var(--t-line-strong)}
.mx-tab tbody th{text-align:left;font-weight:600;color:var(--t-ink);font-size:14.5px;position:sticky;left:0;background:var(--t-bg-2);min-width:190px}
.mx-tab tbody th span{display:block;font-weight:400;font-size:12.5px;color:var(--t-ink-mute);margin-top:2px}
.mx-tab .mx-ecke{text-align:left;position:sticky;left:0;background:var(--t-bg-2)}
.mx-tab .ns{background:color-mix(in srgb,var(--t-copper) 10%,transparent)}
.mx-tab thead th.ns{color:var(--t-copper);font-weight:700}
body.theme-t .ill-frame .mx svg{width:20px;height:20px;max-width:none;display:inline-block;vertical-align:middle;flex:none}
.mx.v circle{fill:var(--t-copper);stroke:var(--t-copper);stroke-width:1.6}
.mx.t circle{fill:none;stroke:var(--t-ink-soft);stroke-width:1.6} .mx.t path{fill:var(--t-ink-soft)}
.mx.n circle{fill:none;stroke:var(--t-line-strong);stroke-width:1.6}
html[data-mode="light"] body.theme-t .mx.n circle{stroke:var(--t-ink-mute)}
.mx .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mx-leg{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:13px;color:var(--t-ink-soft)}
.mx-leg span{display:inline-flex;align-items:center;gap:8px}
/* Formate-Weg */
.fw-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
body.theme-t .ill-frame .fw-svg{display:block;width:100%;min-width:620px;height:auto}
.fw-svg .fw-ort{fill:var(--t-copper);letter-spacing:.08em}
.fw-leg{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fw-leg li{display:grid;grid-template-columns:30px 1fr;column-gap:10px;row-gap:4px;align-items:start}
.fw-leg strong{color:var(--t-ink);font-size:15.5px} .fw-leg li>span:last-child{grid-column:2;font-size:14px;line-height:1.5;color:var(--t-ink-soft)}
.fw-i{grid-row:span 2;width:24px;height:24px;margin-top:1px}
.fw-on{border-radius:50%;border:2.4px solid var(--t-copper);background:radial-gradient(circle,var(--t-copper) 0 3.5px,transparent 4px)}
.fw-ref{height:8px;margin-top:8px;border-radius:4px;background:var(--t-line-strong)}
.fw-aus{border:2px solid var(--t-copper);border-bottom:0;border-radius:24px 24px 0 0;height:14px;margin-top:6px;background:color-mix(in srgb,var(--t-copper) 12%,transparent)}
@media (max-width:760px){.fw-leg{grid-template-columns:1fr}}
.mx-hint{display:none;font-size:12px;color:var(--t-ink-mute);margin:0 0 8px}
@media (max-width:620px){.mx-tab .ns{position:sticky;right:0;background:color-mix(in srgb,var(--t-copper) 16%,var(--t-bg-2));min-width:84px}.mx-tab{min-width:600px;font-size:13px}.mx-tab th,.mx-tab td{padding:10px 6px}.mx-tab tbody th{min-width:128px;font-size:13.5px}.mx-tab thead th{font-size:10.5px;letter-spacing:.04em}.mx-hint{display:block}}

/* KI-Weg: zweiter Balken Produktivitaet */
.kw-bars{display:flex;flex-direction:column;gap:5px;margin-top:8px}.kw-bars .kw-m{margin-top:0}
.kw-m.kw-p i{background:var(--t-copper)}
.kw-fuss{display:flex;flex-wrap:wrap;gap:8px 24px}
/* Chinese Walls: Mechanik */
.cw-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cw{display:grid;grid-template-columns:110px 1fr 1fr 34px 1fr 0.7fr;grid-auto-rows:minmax(48px,auto);column-gap:8px;row-gap:8px;position:relative;align-items:center}
.cw-mob{display:none}
.cw-kopf{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ink-mute);align-self:end;padding-bottom:4px;border-bottom:1px solid var(--t-line-strong)}
.cw-kopf.cw-krank{color:var(--t-ink-soft)}
.cw-eb{grid-column:1;font-size:13px;font-weight:600;color:var(--t-ink)}
.cw-zeile{grid-column:2/7;align-self:stretch;border-bottom:1px solid var(--t-line);pointer-events:none}
.cw-bar{position:relative;z-index:1;display:flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:6px;font-size:13.5px;color:var(--t-ink);background:color-mix(in srgb,var(--t-ink) 9%,transparent);border:1px solid var(--t-line-strong)}
.cw-bar.cw-klein{font-size:12.5px}
.cw-klinik{align-self:stretch;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.08em}
.cw-luecke{position:relative;z-index:1;font-size:12.5px;font-style:italic;color:var(--t-ink-mute);border:1px dashed var(--t-line-strong);border-radius:6px;padding:8px 12px}
.cw-mauer{align-self:stretch;position:relative;z-index:2;border-radius:3px;background:repeating-linear-gradient(135deg,var(--t-copper) 0 3px,transparent 3px 8px);opacity:.85}
.cw-mauer b{position:absolute;top:-2px;left:50%;transform:translate(-50%,-100%);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-copper);white-space:nowrap;font-weight:600}
.cw{padding-top:22px}
.cw-ns-eb{color:var(--t-copper)}
.cw-bar.cw-ns{background:color-mix(in srgb,var(--t-copper) 18%,transparent);border-color:var(--t-copper);gap:12px;flex-wrap:wrap;color:var(--t-ink-soft)}
.cw-ns strong{color:var(--t-copper);font-weight:700}
.cw-geld{font-size:12px;color:var(--t-ink-mute);border-top:1px solid var(--t-line-strong);padding-top:8px;align-self:start}
html[data-mode="light"] body.theme-t .cw-geld,html[data-mode="light"] body.theme-t .cw-kopf{color:var(--t-ink-soft)}
.cw-mech{list-style:none;counter-reset:cw;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cw-mech li{counter-increment:cw;font-size:14px;line-height:1.5;color:var(--t-ink-soft)}
.cw-mech li::before{content:"0" counter(cw);display:block;font-family:var(--font-t);font-size:22px;color:var(--t-copper);margin-bottom:4px}
.cw-mech strong{color:var(--t-ink);display:block}
@media (max-width:760px){.cw-mech{grid-template-columns:1fr}}
/* Formate: Schleifen */
body.theme-t .ill-frame .fs-svg{display:block;width:100%;min-width:560px;height:auto}
.fs-svg .fs-lbl{font-size:19px;letter-spacing:0;fill:var(--t-ink-soft)} .fs-svg .fs-cu{fill:var(--t-copper)}
.fs-svg .fs-sm{font-size:15px;letter-spacing:0;fill:var(--t-ink-mute)}
.fs-svg .fs-ref{fill:var(--t-ink-soft)}
.fs-i-ref{height:24px;border-radius:0;background:none;border-bottom:2px solid var(--t-ink-soft);border-radius:0 0 50% 50%;height:12px;margin-top:4px}
.fs-i-opt{height:0;margin-top:12px;border-top:2px dashed var(--t-copper)}
.fs-leg .fs-opt strong{color:var(--t-ink-soft);font-weight:500}
.fs-leg .fs-opt{opacity:.85}
@media (max-width:760px){
  .cw{grid-template-columns:92px 1fr;padding-top:0;row-gap:10px}
  .cw>*{grid-row:var(--mr)!important;grid-column:var(--mc)!important}
  .cw-zeile,.cw-kopf.cw-d{display:none}
  .cw-kopf:first-child::after{content:" · belastet"}
  .cw-mob{display:block}
  .cw-mauer{height:16px;align-self:center;margin:14px 0 6px;background:repeating-linear-gradient(90deg,var(--t-copper) 0 3px,transparent 3px 8px)}
  .cw-mauer b{top:50%;left:50%;transform:translate(-50%,-50%);background:var(--t-bg-2);padding:0 10px}
  .cw-klinik{writing-mode:horizontal-tb;transform:none;justify-content:flex-start}
  .cw-geld{border-top:0;padding-top:0}
  body.theme-t .ill-frame .fs-svg{min-width:0}
  .fs-svg .fs-lbl{font-size:44px} .fs-svg .fs-sm{font-size:36px}
}
/* Dein Format: Kanfer-Verlauf */
body.theme-t .ill-frame .fk-svg{display:block;width:100%;height:auto}
.fk-svg .fk-num{font-family:var(--font-t);font-size:24px;letter-spacing:0;fill:var(--t-copper)}
.fk-svg .fk-grp{font-size:15px;letter-spacing:.12em;text-transform:uppercase;fill:var(--t-ink-soft)}
.fk-svg .fk-sm{font-size:15px;letter-spacing:0;fill:var(--t-ink-mute)}
.fk-phasen{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.fk-phasen li{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.45;color:var(--t-ink-soft)}
.fk-phasen .fk-n{font-family:var(--font-t);font-size:18px;color:var(--t-copper);line-height:1}
.fk-phasen strong{color:var(--t-ink);font-size:14.5px}
.fk-leg{margin-top:26px;padding-top:20px;border-top:1px solid var(--t-line)}
.fk-i-chat{width:24px;height:17px;margin-top:4px;border:2px solid var(--t-copper);border-radius:5px 5px 5px 0}
.fk-ergaenzung{margin:16px 0 0;font-size:13.5px;color:var(--t-ink-soft)}
@media (max-width:980px){.fk-phasen{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){
  .fk-phasen{grid-template-columns:1fr;gap:10px}
  .fk-phasen li{display:grid;grid-template-columns:34px 1fr;column-gap:8px}
  .fk-phasen .fk-n{grid-row:span 2}
  .fk-svg .fk-grp,.fk-svg .fk-sm{display:none}
  .fk-svg .fk-num{font-size:46px}
}
/* Dein Format: Kennenlernen, Formate vor Ort, 8 Phasen */
.fk-svg .fk-st{font-size:15px;letter-spacing:0;font-weight:600;fill:var(--t-ink-soft)}
.fk-svg .fk-st-cu{fill:var(--t-copper)}
.fk-phasen{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}
.fk-leg{grid-template-columns:repeat(4,minmax(0,1fr))}
.fk-leg a{color:inherit;text-decoration:underline;text-decoration-color:var(--t-copper);text-underline-offset:3px}
.fk-i-ort{border-radius:50%;border:2px solid var(--t-copper);background:color-mix(in srgb,var(--t-copper) 14%,transparent)}
@media (max-width:980px){.fk-leg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.fk-phasen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.fk-leg{grid-template-columns:1fr}.fk-phasen{grid-template-columns:1fr}.fk-svg .fk-st,.fk-svg .fk-sm{display:none}}
/* Fotos der Standorte */
.foto-duo{margin:0;display:grid;gap:10px}
.foto-duo img{display:block;width:100%;height:auto;border-radius:var(--radius);background:var(--t-bg-2)}
.foto-duo .haupt{aspect-ratio:4/5;object-fit:cover}
.foto-duo .neben{aspect-ratio:12/5;object-fit:cover}

/* ---------- Cookie-Banner (assets/js/consent.js), seit 05.10.2026 ----------
   „Ablehnen“ und „Alle akzeptieren“ sind bewusst gleich gestaltet (gleichwertige Wahl; Hervorheben
   am 08.10.2026 auf Dennis' Wunsch wieder zurückgenommen). Desktop: Text links, Buttons rechts. */
.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9995;
  max-width: 640px; margin: 0 auto;
  background: var(--t-bg-3); color: var(--t-ink);
  border: 1px solid var(--t-line-strong); border-radius: 14px;
  box-shadow: 0 18px 48px var(--t-shadow);
  display: none;
}
.consent-banner.is-open { display: block; }
.consent-inner { padding: 20px 22px 18px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.consent-title { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 0 0 8px; color: var(--t-ink); }
.consent-text { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--t-ink-soft); }
.consent-text a { color: var(--t-ink); text-decoration: underline; text-underline-offset: 2px; }
.consent-text a:hover { color: var(--t-copper); }
.consent-options { display: grid; gap: 10px; margin: 14px 0 0; }
.consent-options[hidden] { display: none; }
.consent-opt { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--t-ink-soft); cursor: pointer; }
.consent-opt b { display: block; color: var(--t-ink); font-weight: 600; }
.consent-opt input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--t-copper); }
.consent-opt input:disabled { opacity: 0.6; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.consent-btn {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  min-height: 44px; padding: 10px 18px; border-radius: var(--radius-ctl, 10px);
  background: transparent; color: var(--t-ink); border: 1px solid var(--t-btn-line);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.consent-btn:hover { border-color: var(--t-copper); color: var(--t-copper); }
.consent-btn.js-c-accept, .consent-btn.js-c-deny { background: var(--t-ink); border-color: var(--t-ink); color: var(--t-bg); }
.consent-btn.js-c-accept:hover, .consent-btn.js-c-deny:hover { background: var(--t-copper); border-color: var(--t-copper); color: var(--t-bg); }
.consent-btn[hidden] { display: none; }
.consent-link {
  font: inherit; font-size: 14.5px; cursor: pointer; min-height: 44px; padding: 10px 4px;
  background: none; border: 0; color: var(--t-ink-soft); text-decoration: underline; text-underline-offset: 2px;
}
.consent-link:hover { color: var(--t-copper); }
.consent-btn:focus-visible, .consent-link:focus-visible, .consent-opt input:focus-visible { outline: 2px solid var(--t-copper); outline-offset: 2px; }
/* Handy/Tablet: Ablehnen und Alle akzeptieren nebeneinander, gleich breit */
@media (max-width: 899px) {
  .consent-actions .consent-btn { flex: 1 1 calc(50% - 5px); }
}
@media (max-width: 520px) {
  .consent-banner { left: 10px; right: 10px; bottom: 10px; }
  .consent-inner { padding: 16px 16px 14px; }
}
/* Desktop: Text links, Buttons rechts (Reihenfolge von rechts: Alle akzeptieren, Ablehnen, Einstellungen) */
@media (min-width: 900px) {
  .consent-banner { max-width: 1080px; }
  .consent-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 22px 26px; }
  .consent-actions { margin-top: 0; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: flex-start; }
}
/* Footer-Link „Cookie-Einstellungen“ als Button, sieht aus wie die anderen Footer-Links */
body.theme-t .footer .link-btn {
  font: inherit; color: var(--t-ink-soft); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
body.theme-t .footer .link-btn:hover { color: var(--t-copper); }
@media (max-width: 819px) { body.theme-t .footer .top ul li .link-btn { display: block; padding: 11px 0; } }
@media (min-width: 820px) { body.theme-t .footer .top ul li .link-btn { padding: 4px 0; } }
@media print { .consent-banner { display: none !important; } }