:root { --sp-5: 1.25rem; --sp-10: 2.5rem; --coral-light: #f0a893; }

/* =========================================================
   ERWEITERUNG 2026 — Multi-Page-Architektur
   ========================================================= */

/* Scroll-Progress */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--coral), #e9a06d);
  z-index: 200; transition: width 0.1s linear;
}

/* Header: Dropdown-Navigation */
.nav { position: relative; }
.nav .has-drop { position: relative; }
.nav > .has-drop > button {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  color: var(--ink-soft); white-space: nowrap;
}
.nav > .has-drop > button:hover, .nav > .has-drop.open > button { color: var(--ink); }
.nav > .has-drop > button svg { transition: transform 0.25s var(--ease); }
.nav > .has-drop.open > button svg { transform: rotate(180deg); }
.drop {
  position: fixed; top: calc(var(--header-h, 72px) + 12px); left: 50%; transform: translate(-50%, 8px);
  width: min(1120px, calc(100vw - 32px));
  background: var(--white); border: 1px solid rgba(26, 57, 65, 0.09);
  border-radius: var(--radius-lg); box-shadow: 0 26px 60px rgba(14, 36, 41, 0.16);
  padding: var(--sp-6); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  z-index: 120;
}
.nav > .has-drop.open .drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
:root { --header-h: 72px; }
.drop::before {
  content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px;
}
.drop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2) var(--sp-3); }
@media (max-width: 900px) { .drop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .drop-grid { grid-template-columns: 1fr; } }
.drop-item {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-4); border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease);
}
.drop-item:hover { background: var(--cream); }
.drop-item .ico {
  width: 38px; height: 38px;
  background: rgba(26, 57, 65, 0.06); color: var(--ink);
}
.drop-item .t { font-size: 0.92rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; display: block; }
.drop-item .d { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; margin-top: 3px; display: block; }
.drop-foot {
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(26, 57, 65, 0.08);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.drop-foot p { font-size: 0.8rem; color: var(--text-muted); }
.nav a.active { color: var(--ink); font-weight: 600; }
.nav a.active::after { right: 0; }

/* Mobile-Nav Gruppen. Der Inhalt baut von oben auf, nicht mittig: sonst rutscht
   der erste Punkt auf niedrigen Geräten unter die fixierte Kopfzeile. Die
   Innenabstände oben halten die Kopfzeile frei, unten die Gestenleiste. */
.mobile-nav {
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  padding: calc(var(--sp-16) + var(--sp-6)) var(--sp-6) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Auf breiten Geräten mit Burger (bis 1200 px) bliebe die Spalte sonst über die
   ganze Breite stehen; die Trennlinien liefen ins Leere. */
.mobile-nav > * { max-width: 32rem; }
.mobile-nav > a { font-size: 1.45rem; line-height: 1.15; padding: 0.42rem 0; }
.mobile-nav .mgroup {
  display: grid; gap: 0;
  margin: 0.7rem 0 0.9rem;
  padding-left: var(--sp-4);
  border-left: 1px solid rgba(244, 239, 232, 0.16);
}
.mobile-nav .mlabel {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f0a893; margin-bottom: 0.3rem;
}
.mobile-nav .mgroup a {
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: 0;
  line-height: 1.3; padding: 0.42rem 0; color: var(--text-on-dark-muted);
}
.mobile-nav .mgroup a:hover { color: var(--text-on-dark); }
.mobile-nav .mgroup a.mfoot {
  margin-top: 0.45rem; padding-top: 0.6rem;
  border-top: 1px solid rgba(244, 239, 232, 0.16);
  color: #f0a893; font-weight: 600;
}
.mobile-nav .mctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.mobile-nav .mcta { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.01em; padding: 0.8rem 1.4rem; }

/* Zweispaltig, sobald der Bildschirm kein Handy mehr ist. Das Menüzeichen
   sitzt bis 1200 px rechts oben, die Punkte standen aber alle in einer
   32-rem-Spalte am linken Rand: rechts blieb die halbe Seite leer, und der
   Weg vom Klick zum Ziel ging quer über den Bildschirm. Die zweite Spalte
   nimmt die Gruppe „Für wen" auf und reicht bis unter das Menüzeichen; beide
   Spalten sind dadurch etwa gleich hoch. */
@media (min-width: 820px) and (max-width: 1200px) {
  .mobile-nav {
    display: grid;
    /* Die rechte Spalte trägt die langen Beschriftungen, die linke nur
       einzelne Wörter: gleich breite Spalten hätten „Führungskräfte ·
       Mitarbeitende · Organisation" umbrechen lassen. */
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    column-gap: var(--sp-10);
    /* Ohne start zieht das Raster seine Zeilen über die ganze Fensterhöhe. */
    align-content: start;
    /* Der Block steht im Goldenen Schnitt statt in der Mitte: oben 38,2 %
       des freien Raums, unten der Rest. Mittig lag er auf großen Fenstern so
       tief, dass der Weg vom Menüzeichen zum ersten Punkt wieder über den
       halben Bildschirm ging. Die 109 px sind 38,2 % der Blockhöhe von rund
       286 px — eine optische Setzung; wächst das Menü um einen Punkt,
       verschiebt sich der Block nur unmerklich. Nach unten begrenzt die
       Kopfzeile: darunter darf der Anfang nie rutschen. */
    padding-top: max(calc(var(--sp-16) + var(--sp-6)), calc(38.2vh - 109px));
    /* Mehr Luft zu den Rändern als auf dem Handy: Der Bildschirm hat sie,
       und die zwei Spalten stehen sonst hart an der Kante. */
    padding-inline: clamp(var(--sp-8), 4.5vw, var(--sp-16));
  }
  /* Die Spalten reichen bis an die Kanten von Logo und Menüzeichen. */
  .mobile-nav > * { max-width: none; }
  /* Die kurzen Beschriftungen tragen die halbe Seite nur mit etwas mehr
     Gewicht; nach oben begrenzt, damit sie keine Überschrift werden. */
  .mobile-nav > a { grid-column: 1; font-size: clamp(1.6rem, 2.6vw, 2rem); }
  /* Über alle Zeilen der linken Spalte hinweg. Leere Rasterzeilen sind ohne
     Zeilenabstand null hoch, die Aufrufe darunter rücken deshalb nicht ab. */
  .mobile-nav .mgroup {
    grid-column: 2; grid-row: 1 / span 8;
    margin: 0.35rem 0 0; padding-left: var(--sp-6);
  }
  .mobile-nav .mgroup a { font-size: 1.05rem; }
  /* Die Aufrufe stehen rechts unter der zweiten Spalte: dort endet der Blick,
     und sie stehen wieder nah am Menüzeichen. */
  .mobile-nav .mctas { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Seiten-Hero (Unterseiten) */
.pagehero { padding: calc(var(--sp-24) + 46px) 0 var(--sp-16); position: relative; overflow: hidden; }
.pagehero.dark { background: var(--ink); color: var(--text-on-dark); }
.pagehero.dark .lead { color: var(--text-on-dark-muted); }
.pagehero.dark .eyebrow { color: #f0a893; }
.pagehero.dark .eyebrow::before { background: #f0a893; }
.pagehero .ph-inner { position: relative; z-index: 2; max-width: 760px; }
.pagehero h1 { margin-bottom: var(--sp-6); font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.05; }
.pagehero h1 em { font-style: normal; color: var(--coral); }
.pagehero.dark h1 em { color: #f0a893; }
.pagehero .ph-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.pagehero .glow {
  position: absolute; width: 620px; height: 620px; border-radius: 50%; right: -160px; top: -220px;
  background: radial-gradient(circle, rgba(224, 98, 69, 0.16) 0%, rgba(224, 98, 69, 0) 68%);
  pointer-events: none;
}
.pagehero.dark .glow { background: radial-gradient(circle, rgba(224, 98, 69, 0.26) 0%, rgba(224, 98, 69, 0) 68%); }
/* Das Abzeichen ueber der Ueberschrift. Der Grundstil setzt es auf
   "inline-block", damit es nur so breit wird wie sein Text. Im Hero der
   Startseite ist es aber Kind einer Flex-Spalte (.hero-copy): Ein Flex-Kind
   wird blockartig und auf die volle Spaltenbreite gedehnt, das Abzeichen lief
   also ueber die ganze Textspalte und sein Inhalt sass links oben in einer
   viel zu grossen Flaeche. "align-self: start" gibt ihm die Inhaltsbreite
   zurueck. Kein "display: inline-flex" dafuer: Das machte aus dem hochgestellten
   ® und den Textstuecken davor und dahinter eigene Flex-Kinder und riss die
   Zeile auf msa.php auseinander. */
.hero-badge { align-self: start; }
/* Der Punkt sitzt mit "vertical-align: middle" auf der Mitte der x-Hoehe, der
   Text im Abzeichen ist aber ueber Versalhoehe und Grundlinie mittig gesetzt.
   Das ist der Unterschied zweier Schrifthoehen, den die Einheiten 1ex und 1cap
   genau benennen — der Punkt geht um deren halbe Differenz hoch und steht damit
   auf derselben Mitte wie der Text. Kennt ein Browser "1cap" nicht, faellt die
   Zeile weg und der Punkt bleibt, wo er vorher war. */
.hero-badge .dot { position: relative; top: calc((1ex - 1cap) / 2); }

/* Trustbar im dunklen Page-Hero */
.pagehero.dark .hero-badge { color: #fff; background: rgba(143, 174, 155, 0.16); border-color: rgba(143, 174, 155, 0.35); }
.pagehero .lead + .lead { margin-top: var(--sp-4); }
.pagehero.dark .trustbar.trustbar-wide {
  border-top-color: rgba(255,255,255,0.14);
  border-bottom-color: rgba(255,255,255,0.14);
  margin-top: var(--sp-12);
}
.pagehero.dark .trustbar.trustbar-wide .ti { border-left-color: rgba(255,255,255,0.10); }
.pagehero.dark .trustbar.trustbar-wide .tv { color: #fff; }
.pagehero.dark .trustbar.trustbar-wide .tl { color: var(--text-on-dark-muted); }

/* Sticky Sprungnavigation */
.subnav {
  position: sticky; top: 72px; z-index: 90;
  background: rgba(252, 249, 245, 0.88); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(26, 57, 65, 0.08); border-bottom: 1px solid rgba(26, 57, 65, 0.08);
}
.subnav .wrap { display: flex; gap: var(--sp-6); overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a {
  padding: var(--sp-4) 0; font-size: 0.84rem; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); border-color: var(--coral); }

/* "Ich bin ..." Wegweiser */
.router { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); }
.rt {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px; padding: var(--sp-6); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink); color: var(--text-on-dark); isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.rt img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 0.7s var(--ease); filter: saturate(0.92);
}
.rt::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 26, 30, 0.35) 0%, rgba(10, 26, 30, 0.72) 45%, rgba(10, 26, 30, 0.96) 100%);
}
.rt img { filter: saturate(0.85) brightness(0.78); }
.rt .k, .rt h3, .rt p, .rt .go { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.rt:hover { transform: translateY(var(--lift-lg)); box-shadow: var(--shadow-lg); }
.rt:hover img { transform: scale(1.06); }
.rt .k {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #ff8a6b; margin-bottom: 0.5rem;
}
.rt { justify-content: flex-start; }
.rt h3 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.02em; min-height: calc(1.35rem * 1.2 * 2); }
.rt p { margin-top: 0.55rem; font-size: var(--text-sm); color: rgba(248, 244, 236, 0.94); line-height: 1.5; max-width: 34ch; }
.rt .go {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto;
  padding-top: var(--sp-4);
  font-size: var(--text-sm); font-weight: 600; color: #fff;
}
.rt .go svg { transition: transform 0.25s var(--ease); }
.rt:hover .go svg { transform: translateX(4px); }
.rt.plain { background: var(--white); color: var(--ink); border: 1px solid var(--card-line); min-height: 200px; }
.rt.plain::after { display: none; }
.rt.plain .k { color: var(--coral); }
.rt.plain p { color: var(--text-muted); }
.rt.plain .go { color: var(--ink); }
@media (max-width: 980px) { .router { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .router { grid-template-columns: 1fr; } }

/* 18-Grundmotive-Explorer */
/* Nebeneinander schließen Liste und Karte unten bündig ab: die Karte gibt die
   Höhe vor, die sechs Kachelreihen teilen sich den Rest zu gleichen Teilen. */
.mv { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--sp-12); margin-top: var(--sp-12); align-items: stretch; }
.mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; grid-auto-rows: 1fr; }
.mv-chip {
  position: relative; text-align: left; cursor: pointer; padding: 0.7rem 0.75rem;
  border-radius: var(--radius-ico); border: 1px solid var(--card-line); background: var(--white);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--ink-soft);
  line-height: 1.25; transition: all 0.25s var(--ease); min-height: 62px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
}
.mv-chip .no { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); }
.mv-chip:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-sm); border-color: rgba(26, 57, 65, 0.28); }
.mv-chip[aria-selected="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--text-on-dark); box-shadow: var(--shadow);
}
.mv-chip[aria-selected="true"] .no { color: #f0a893; }
.mv-panel {
  padding: var(--sp-8); border-radius: var(--radius-lg); background: var(--white);
  border: 1px solid var(--card-line); box-shadow: var(--shadow-sm);
}
.mv-panel .mv-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.mv-panel .mv-kopf { flex: 1; min-width: 0; }
.mv-panel .mv-no {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral);
}
.mv-nav-btn {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(26, 57, 65, 0.16); background: var(--white); color: var(--ink);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.mv-nav-btn:hover, .mv-nav-btn:active { background: var(--ink); border-color: var(--ink); color: var(--text-on-dark); }
.mv-panel h3 { margin: var(--sp-3) 0 var(--sp-4); font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.03em; }
.mv-panel .mv-desc { font-size: var(--text-base); color: var(--ink-soft); line-height: 1.6; }
/* Die beiden Pole sind farblich vorgegeben. Skala und Beschriftung nehmen
   denselben Ton: Der Verlauf und die beiden Woerter darunter benennen dieselbe
   Achse, und zwei Farbsysteme fuer eine Achse liest niemand als eines. */
.mv-poles { margin-top: var(--sp-8); --pol-links: var(--coral); --pol-rechts: var(--sage); }
.mv-scale { position: relative; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--sand); }
.mv-scale .fill {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--pol-links) 0%, var(--pol-rechts) 100%);
  transform-origin: left; animation: growx 0.7s var(--ease) both;
}
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mv-scale-labels { display: flex; justify-content: space-between; margin-top: var(--sp-3); gap: var(--sp-4); }
.mv-pole { flex: 1; }
.mv-pole .pl {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.mv-pole .pl .d { width: 8px; height: 8px; border-radius: 50%; }
.mv-pole.green .pl { color: var(--pol-links); }
.mv-pole.green .pl .d { background: var(--pol-links); }
.mv-pole.blue .pl { color: var(--pol-rechts); }
.mv-pole.blue .pl .d { background: var(--pol-rechts); }
.mv-pole.blue { text-align: right; }
.mv-pole.blue .pl { flex-direction: row-reverse; }
.mv-pole p { margin-top: 0.4rem; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.mv-hint {
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgba(26, 57, 65, 0.08);
  font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6;
}
.mv-hint b { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) {
  .mv { grid-template-columns: 1fr; gap: var(--sp-8); }
  .mv-grid { grid-auto-rows: auto; }
  .mv-panel { scroll-margin-top: 132px; }
  .mv-nav-btn { display: inline-flex; }
  .mv-panel .mv-nav { gap: var(--sp-3); margin-bottom: var(--sp-6); }
  .mv-panel .mv-no { text-align: center; font-size: 0.62rem; letter-spacing: 0.1em; }
  /* Position und Name teilen sich den Platz zwischen den Pfeilen; Beschreibung
     und Schlusssatz folgen ihnen in die Mitte. Die Pole bleiben links und
     rechts an der Skala – sie zeigen Richtung. */
  .mv-panel h3, .mv-panel .mv-desc, .mv-panel .mv-hint { text-align: center; }
  .mv-panel h3 { margin: var(--sp-2) 0 0; font-size: 1.45rem; line-height: 1.15; }
  .mv-panel .mv-desc, .mv-panel .mv-hint { margin-inline: auto; max-width: 46ch; }
  /* Solange noch nicht gewechselt wurde, keine dunkle Karte in der Liste:
     die Motivkarte steht weiter unten und ist hier nie gleichzeitig zu sehen. */
  .mv.mv-unberuehrt .mv-chip[aria-selected="true"] {
    background: var(--white); border-color: rgba(26, 57, 65, 0.12);
    color: var(--ink-soft); box-shadow: none;
  }
  .mv.mv-unberuehrt .mv-chip[aria-selected="true"] .no { color: var(--text-muted); }
}
@media (max-width: 560px) { .mv-panel .mv-no .lang { display: none; } }
@media (max-width: 520px) { .mv-grid { grid-template-columns: repeat(2, 1fr); } }

/* FAQ-Akkordeon */
.faq { margin-top: var(--sp-12); border-top: 1px solid rgba(26, 57, 65, 0.12); }
.faq details { border-bottom: 1px solid rgba(26, 57, 65, 0.12); }
/* Bewusst kein Flex: Die Frage ist Flisstext, und in einem Flex-Container
   wird jedes Element darin - etwa ein <sup class="reg"> mitten im Wort -
   zum eigenen Flex-Kind. Mit justify-content: space-between riss das die
   Frage auseinander. Der Knopf sitzt deshalb absolut rechts. */
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-6) 0;
  position: relative; padding-right: calc(26px + var(--sp-6));
  font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -0.02em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm {
  position: absolute; right: 0; top: calc(var(--sp-6) + 2px);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(26, 57, 65, 0.2); transition: transform 0.3s var(--ease), background 0.3s;
}
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--coral); border-color: var(--coral); color: #fff; }
.faq .ans { padding: 0 0 var(--sp-6); max-width: 72ch; }
.faq .ans p { font-size: var(--text-base); color: var(--text-muted); line-height: 1.68; }
.faq .ans p + p { margin-top: var(--sp-4); }

/* Beraterverzeichnis / Anfrage */
.finder {
  margin-top: var(--sp-12); padding: var(--sp-8); border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--card-line); box-shadow: var(--shadow-sm);
}
.finder-row { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: var(--sp-4); align-items: start; }
.finder-row > .field { align-self: start; }
.finder-row > .btn { align-self: start; margin-top: 1.65rem; }
.finder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); align-items: start; }
.finder-grid .field-wide { grid-column: 1 / -1; }
.finder-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); margin-top: var(--sp-6); flex-wrap: wrap; }
.finder-actions.finder-actions-end { justify-content: flex-end; }
.finder-actions .finder-note { margin-top: 0; max-width: 46ch; }
.finder-actions .btn { flex-shrink: 0; }
@media (max-width: 720px) { .finder-grid { grid-template-columns: 1fr; } .finder-actions .btn { width: 100%; justify-content: center; } }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.field select, .field input[type="text"], .field input[type="email"], .field input[type="search"], .field input[type="tel"], .field textarea {
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink);
  padding: 0.78rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid rgba(26, 57, 65, 0.18);
  background: var(--cream); width: 100%;
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.5; font-family: var(--font-body); }
.field select:focus, .field input:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.finder-note { margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
.finder-result {
  margin-top: var(--sp-6); padding: var(--sp-6); border-radius: var(--radius-sm);
  background: var(--cream); border: 1px dashed rgba(26, 57, 65, 0.2); font-size: var(--text-sm);
  color: var(--ink-soft); line-height: 1.6;
}
.finder-result b { color: var(--ink); }
@media (max-width: 860px) { .finder-row { grid-template-columns: 1fr; } .finder-row .btn { width: 100%; justify-content: center; } }

/* Kontakt-Baukasten Container (mehrfach-Einbau) */
.contact-cta { margin-top: var(--sp-12); }
.contact-cta > .finder { margin-top: var(--sp-6); }
.contact-cta-compact { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.contact-cta-compact .contact-cta-head { flex: 1 1 420px; }
.contact-cta-compact .contact-cta-actions { flex-shrink: 0; }
@media (max-width: 720px) { .contact-cta-compact .contact-cta-actions .btn { width: 100%; justify-content: center; } }
.contact-cta-head h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.85rem); letter-spacing: -0.02em; color: var(--ink); }
.contact-cta-head p { margin-top: var(--sp-3); font-size: var(--text-base); color: var(--text-muted); max-width: 62ch; line-height: 1.6; }
.finalcta .contact-cta-head h3, .finalcta .contact-cta-head p { color: var(--text-on-dark); }
.finalcta .contact-cta-head p { color: var(--text-on-dark-muted); }
.finalcta .contact-cta { margin-top: var(--sp-8); }
.contact-cta-boxed {
  padding: var(--sp-8); border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--card-line);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) { .contact-cta-boxed { padding: var(--sp-6); } }

/* Mehrfachauswahl-Dropdown (Anliegen / Für wen) */
.field .hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); opacity: 0.8; font-size: 0.68rem; margin-left: 0.35rem; }
.ms { position: relative; }
.ms > summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink);
  padding: 0.78rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid rgba(26, 57, 65, 0.18);
  background: var(--cream);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.ms > summary::-webkit-details-marker { display: none; }
.ms > summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
.ms .ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms .ms-caret { color: var(--text-muted); transition: transform 180ms ease; flex-shrink: 0; }
.ms[open] .ms-caret { transform: rotate(180deg); }
.ms .ms-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--white); border: 1px solid rgba(26, 57, 65, 0.18); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 0.4rem; max-height: 280px; overflow-y: auto;
  display: grid; gap: 0.1rem;
}
.ms-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.35; }
.ms-item span { color: var(--ink); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
.ms-item:hover { background: var(--cream); }
.ms-item input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0.15rem 0 0 0; padding: 0; border: 0; background: transparent; accent-color: var(--coral); flex-shrink: 0; }
.field input[type="text"].f-topic-other,
.field input[type="text"].f-role-other { margin-top: 0.5rem; }

/* Nutzen-Listen / Split-Blöcke */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: stretch; margin-top: var(--sp-12); }
.split.media-left .split-media { order: -1; }
.split-media { display: flex; flex-direction: column; padding-top: 2.75rem; }
.split-media .frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--sand); flex: 1 1 auto; min-height: 0; }
.split-media img { display: block; width: 100%; height: 100%; min-height: clamp(320px, 42vw, 480px); object-fit: cover; }
.split-media figcaption { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--text-muted); }
.bg-ink .split-media figcaption { color: var(--text-on-dark); }
/* Wenn kein Eyebrow vor der H2 steht, kein Padding-Top */
.split > :first-child:not(:has(> .eyebrow)) ~ .split-media { padding-top: 0; }
/* Steht das Eyebrow ueber dem Split statt in der Textspalte, faengt der
   Block darunter oben gerade an: Bild und Ueberschrift auf einer Linie,
   und der Abstand zum Eyebrow kommt allein von dessen margin-bottom. */
.wrap > .eyebrow + .split { margin-top: 0; }
.wrap > .eyebrow + .split .split-media { padding-top: 0; }
/* Ökosystem-Teaser: Bild soll bündig oben (H2) und unten (Button) mit Text abschließen */
.bg-ink .split { align-items: stretch; }
.bg-ink .split .split-media { padding-top: 2.75rem; padding-bottom: 0; min-height: 0; }
.bg-ink .split .split-media .frame { flex: 1 1 0; min-height: 0; }
.bg-ink .split .split-media img { min-height: 0; height: 100%; }

/* Cream/light-Section: Split-Media ebenfalls bis Textende strecken */
.bg-cream .split, .bg-sand .split, .bg-white .split { align-items: stretch; }
.bg-cream .split .split-media, .bg-sand .split .split-media, .bg-white .split .split-media { padding-top: 2.75rem; padding-bottom: 0; min-height: 0; }
.bg-cream .split .split-media .frame, .bg-sand .split .split-media .frame, .bg-white .split .split-media .frame { flex: 1 1 0; min-height: 0; }
.bg-cream .split .split-media img, .bg-sand .split .split-media img, .bg-white .split .split-media img { min-height: 0; height: 100%; }
.checks { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.checks li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.checks .ck {
  width: 24px; height: 24px;
  background: rgba(143, 174, 155, 0.25); color: #4d7060; margin-top: 1px;
}
.bg-ink .checks .ck { background: rgba(240, 168, 147, 0.18); color: #f0a893; }
.checks b { display: block; font-weight: 600; color: var(--ink); font-size: var(--text-base); }
.bg-ink .checks b { color: var(--text-on-dark); }
.checks p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
.bg-ink .checks p { color: var(--text-on-dark-muted); }
@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-10); align-items: stretch; }
  .split.media-left .split-media { order: 0; }
  .split-media { padding-top: 0; }
  .split-media img { min-height: 280px; }
}

/* Ablauf-Zeitleiste */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); counter-reset: fl; }
.fl {
  position: relative; padding: var(--sp-6); border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--card-line);
}
.bg-ink .fl { background: var(--card-fill-dark); border-color: var(--card-line-dark); }
.fl .n {
  font-family: var(--font-display); font-size: 0.9rem; width: 30px; height: 30px;
  background: var(--ink); color: var(--cream); margin-bottom: var(--sp-4);
}
.bg-ink .fl .n { background: var(--coral); color: #fff; }
.fl h4 { margin-bottom: 0.4rem; }
.fl p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
.bg-ink .fl p { color: var(--text-on-dark-muted); }
.fl::after {
  content: ""; position: absolute; top: 50%; right: -14px; width: 12px; height: 1px;
  background: rgba(26, 57, 65, 0.22);
}
.fl:last-child::after { display: none; }
@media (max-width: 980px) { .flow { grid-template-columns: repeat(2, 1fr); } .fl::after { display: none; } }
@media (max-width: 540px) { .flow { grid-template-columns: 1fr; } }

/* Einheitliche Section-Abstände (Startseite kompakter) */
.section,
.section-sm,
.manifest,
.pullquote,
.finalcta { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 700px) {
  .section,
  .section-sm,
  .manifest,
  .pullquote,
  .finalcta { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* Final-CTA linksbündig (override) */
.finalcta .inner { text-align: left; margin: 0; max-width: 920px; }
.finalcta .lead { margin-left: 0; margin-right: 0; max-width: none; line-height: 1.3; }
.finalcta .actions { justify-content: flex-start; }

/* Zitat-Band */
.pullquote { padding: var(--sp-24) 0; background: var(--sand); position: relative; overflow: hidden; }
/* Kompakte, linksbuendige Variante (Div-Zitat innerhalb einer Section) */
div.pullquote { padding: var(--sp-8) var(--sp-8); text-align: left; border-left: 3px solid var(--coral); margin: var(--sp-6) 0; }
/* Deko: großes Anführungszeichen in Coral als Hintergrund-Akzent */
.pullquote .wrap { position: relative; }
.pullquote blockquote { position: relative; }
.pullquote q {
  display: block; font-family: var(--font-display); font-size: clamp(1.1rem, 1.45vw, 1.32rem);
  line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-deep); quotes: "„" "“";
  max-width: 44ch;
}
.pullquote .attr { margin-top: var(--sp-8); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.35; }
.pullquote .attr b { display: block; color: var(--ink); font-size: var(--text-base); font-weight: 600; margin-bottom: 1px; line-height: 1.3; }

/* Footer: Sand-Ton statt Ink */
.site-footer { background: var(--sand); color: var(--ink); }
.site-footer .logo { color: var(--ink); }
.site-footer .about { color: var(--text-muted); }
.site-footer .fcol h5 { color: var(--ink-soft); }
.site-footer .fcol a, .site-footer .fcol li { color: var(--text-muted); }
.site-footer .fcol a:hover { color: var(--ink); }
.site-footer .footer-bottom { border-top-color: rgba(26,57,65,0.14); color: var(--text-muted); }

/* Referenzen-Marquee unter dem Zitat */
.refs-marquee { margin-top: 0; }
.refs-partners { margin-top: var(--sp-16); }
.refs-marquee span { font-size: 1.5rem; letter-spacing: -0.015em; opacity: 0.78; }
.refs-marquee { animation-duration: 120s; gap: var(--sp-16); }
@media (max-width: 940px) { .refs-marquee span { font-size: 1.2rem; } }

/* Rechte Spalte: Badges + kleinerer Text */
.pq-side { position: relative; }
.pq-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-5); }
.pq-badge {
  display: inline-flex; align-items: center;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(224, 98, 69, 0.12);
  color: var(--coral-deep);
  border: 1px solid rgba(224, 98, 69, 0.24);
}
.pq-side-text {
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 44ch;
  margin: 0 0 var(--sp-6);
}
/* Dezenter Coral-Akzentstrich links vor der rechten Spalte */
.pq-side::before {
  content: "";
  position: absolute; left: -18px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--coral) 0%, rgba(224, 98, 69, 0.2) 100%);
}
@media (max-width: 900px) {
  .pq-side::before { display: none; }
}

/* Karten-Raster generisch */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card {
  padding: var(--sp-8); border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--card-line); display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow); }
.bg-ink .card { background: var(--card-fill-dark); border-color: var(--card-line-dark); }
.card .ico {
  background: rgba(26, 57, 65, 0.06); color: var(--ink); margin-bottom: var(--sp-2);
}
.bg-ink .card .ico { background: rgba(240, 168, 147, 0.14); color: #f0a893; }
.card h4, .card h3 { letter-spacing: -0.01em; }
.card p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.62; }
.bg-ink .card p { color: var(--text-on-dark-muted); }
.card ul { list-style: none; display: grid; gap: 0.45rem; margin-top: auto; padding-top: var(--sp-4); }
.card ul li { position: relative; padding-left: 0.95rem; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5; }
.bg-ink .card ul li { color: var(--text-on-dark-muted); }
.card ul li::before {
  content: ""; position: absolute; left: 0; top: 0.52rem; width: 5px; height: 5px;
  border-radius: 50%; background: var(--coral);
}
.card .card-link { margin-top: auto; padding-top: var(--sp-4); }
.card .tagline { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); }
@media (max-width: 980px) { .cards, .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards, .cards.two, .cards.four { grid-template-columns: 1fr; } }

/* CTA-Streifen */
.ctastrip {
  margin-top: var(--sp-16); padding: var(--sp-8) var(--sp-10); border-radius: var(--radius-lg);
  background: var(--ink); color: var(--text-on-dark);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5);
}
.ctastrip > div:first-child { text-align: left; }
.ctastrip h3 { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -0.02em; text-align: left; }
.ctastrip p { font-size: var(--text-sm); color: var(--text-on-dark-muted); margin-top: 0.4rem; max-width: 62ch; text-align: left; }
.ctastrip .acts { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-start; }

/* Kontaktdaten */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-12); }
.contact-grid.two-col { grid-template-columns: 1fr 1fr; max-width: 820px; }
.contact-grid.one-col { grid-template-columns: 1fr; max-width: 420px; }
.contact-grid .ci .l { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #f0a893; }
.contact-grid .ci p, .contact-grid .ci a { display: block; margin-top: var(--sp-3); font-size: var(--text-base); line-height: 1.6; color: var(--text-on-dark); }
.contact-grid .ci a:hover { color: #f0a893; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* Motiv-Orbit im Hero */
.orbit { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; }
.orbit svg { width: 100%; height: 100%; }
.orbit .ring { fill: none; stroke: rgba(26, 57, 65, 0.13); stroke-dasharray: 4 8; }
.orbit .dot { fill: var(--coral); opacity: 0.55; }
.spin { animation: spin 68s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } .mv-scale .fill { animation: none; } }

/* Feinschliff */
.grid-note { margin-top: var(--sp-8); font-size: var(--text-sm); color: var(--text-muted); }
.grid-note a { color: var(--coral); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tri.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .tri.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tri.four { grid-template-columns: 1fr; } }

/* Trustbar im zweispaltigen Hero: 2x2 statt vier engen Spalten */
/* Startseite Hero: symmetrisch, bündig */
.hero .hero-grid { grid-template-columns: 1fr 1fr; align-items: stretch; gap: var(--sp-12); }
.hero .hero-copy { display: flex; flex-direction: column; }
.hero .hero-media { display: flex; align-items: stretch; padding-top: 0; padding-bottom: 0; }
.hero .hero-media .frame { width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; }
.hero .hero-media .frame img { height: 100%; min-height: 0; }
@media (max-width: 960px) { .hero .hero-grid { grid-template-columns: 1fr; align-items: start; } .hero .hero-media { padding-top: 0; } .hero .hero-media .frame { aspect-ratio: 4 / 3.3; height: auto; } }

.hero-copy .trustbar { grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-16); gap: var(--sp-5) var(--sp-8); }
.hero-copy .trustbar .ti { align-items: baseline; }
.hero-copy .trustbar .tl { line-height: 1.4; }
@media (max-width: 520px) { .hero-copy .trustbar { grid-template-columns: 1fr; } }

/* Dropdown: Titel und Beschreibung untereinander, kein Überlauf */
.drop-item { min-width: 0; align-items: flex-start; }
.drop-item > span:not(.ico) { display: block; min-width: 0; }
.drop-item .t, .drop-item .d { display: block; }
.drop-grid { min-width: 0; }
.drop-item, .drop-item .t, .drop-item .d { white-space: normal; }

/* Header über dunklem Seiten-Hero lesbar halten */
.site-header.on-dark:not(.scrolled) { background: transparent; }
.site-header.on-dark:not(.scrolled) .logo-text,
.site-header.on-dark:not(.scrolled) .nav > a,
.site-header.on-dark:not(.scrolled) .nav > .has-drop > button { color: var(--text-on-dark); }
.site-header.on-dark:not(.scrolled) .logo svg { color: #f0a893; }
.site-header.on-dark:not(.scrolled) .nav > a:hover,
.site-header.on-dark:not(.scrolled) .nav > .has-drop > button:hover { color: #ffffff; }
.site-header.on-dark:not(.scrolled) .btn-ghost {
  color: var(--text-on-dark); border-color: rgba(244, 239, 232, 0.45); background: transparent;
}
.site-header.on-dark:not(.scrolled) .btn-ghost:hover { background: rgba(244, 239, 232, 0.12); border-color: rgba(244,239,232,0.7); }
.site-header.on-dark:not(.scrolled) .burger { color: var(--text-on-dark); }

/* Raster-Sicherung: keine Spaltenüberläufe durch lange Wörter */
.trustbar, .stat-grid, .persons, .tri, .rep-grid, .impact-grid,
.sci-grid, .team, .cert-grid, .levels, .rprojects,
.qcards, .stk-grid, .flow, .drop-grid { grid-auto-flow: row; }
.trustbar > *, .stat-grid > *, .persons > *, .tri > *,
.rep-grid > *, .impact-grid > *, .sci-grid > *,
.team > *, .cert-grid > *, .levels > *, .rprojects > *, .qcards > *,
.stk-grid > *, .flow > * { min-width: 0; }
.qcard blockquote, .qcard .who .r, .rproj li, .tri-card p, .stk p { overflow-wrap: break-word; }

/* Spitzensport-Großzitat */
.sport-section .bigquote { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: var(--sp-12); margin-top: var(--sp-12); }
.sport-section .bigquote q { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.sport-section .bigquote .who { padding-top: var(--sp-2); }
.sport-section .bigquote .who .n { font-weight: 600; color: var(--text-on-dark); }
.sport-section .bigquote .who .r { font-size: var(--text-sm); color: var(--text-on-dark-muted); margin-top: 4px; }
.sport-section .bigquote .who .src { font-size: var(--text-xs); color: var(--text-on-dark-muted); font-style: italic; margin-top: var(--sp-4); }
.sport-section .bigquote .who .src.src-plain { font-style: normal; margin-top: 2px; }
.sport-section .tri-card .r { font-size: var(--text-xs); color: #f0a893; margin-bottom: var(--sp-3); }
@media (max-width: 900px) { .sport-section .bigquote { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* Reset für Zitat- und Figure-Elemente (UA-Innenabstände) */
figure, blockquote, dl, dd { margin: 0; }

/* KI-Chat: Sprecherlabel als eigene Zeile */
.bubble .who { display: block; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: 6px; }

/* Ohne block hängt unter dem Icon noch die Grundlinie seiner Zeile; die
   Kopfzeile wird dadurch acht Pixel höher als nötig. */
.burger svg { display: block; }

/* Header über offenem Mobilmenü: helle Marke, sichtbarer Schließen-Button.
   Deckend in der Menüfarbe, sonst laufen gescrollte Menüpunkte durch Logo und
   Schaltfläche hindurch. Die zweite Auswahl schlägt die Regel für Seiten mit
   dunklem Einstieg, die die Kopfzeile sonst durchsichtig hält. */
body.nav-open .site-header,
body.nav-open .site-header.on-dark:not(.scrolled) { z-index: 120; background: var(--ink); box-shadow: none; border-bottom: 0; }
body.nav-open .logo, body.nav-open .logo-text, body.nav-open .burger { color: var(--text-on-dark); }
/* Beide Schaltflächen der Kopfzeile verschwinden, solange das Menü offen ist:
   „Kontakt aufnehmen" stand dunkel auf dunklem Grund und beanspruchte dabei
   die halbe Kopfzeile; das Menü bietet beide ohnehin selbst an. */
body.nav-open .site-header .header-cta .btn { display: none; }
body.nav-open .burger { position: relative; }
/* Ab 760 px stehen beide Aufrufe in der Kopfzeile nebeneinander. Dann bleiben
   sie auch bei offenem Menü oben stehen — dort sind sie näher am Zeiger als
   unten im Menü —, und das Menü führt sie kein zweites Mal auf. Der zweite
   braucht auf dem dunklen Grund der offenen Kopfzeile die helle Fassung,
   sonst stünde er wieder dunkel auf dunkel. */
@media (min-width: 761px) {
  body.nav-open .site-header .header-cta .btn { display: inline-flex; }
  body.nav-open .site-header .header-cta .btn-ghost {
    color: var(--text-on-dark); border-color: rgba(244, 239, 232, 0.45); background: transparent;
  }
  body.nav-open .site-header .header-cta .btn-ghost:hover {
    background: rgba(244, 239, 232, 0.12); border-color: rgba(244, 239, 232, 0.7);
  }
  .mobile-nav .mctas { display: none; }
}

/* Dekorativen Lichtschein und Subnav sauber einfassen */
.pagehero { overflow: hidden; }
.subnav .wrap { -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .subnav .wrap { padding-right: var(--sp-6); } }

/* Lange deutsche Komposita sauber umbrechen */
h1, h2, h3, h4, .h1, .h2, .h3, .eyebrow, p, li, dt, dd { overflow-wrap: break-word; }
@media (max-width: 720px) { h1, h2, .h1, .h2 { hyphens: auto; } }

/* Vollbreite Trustbar unter dem Hero */
.trustbar.trustbar-wide {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--sp-16);
  padding: var(--sp-8) 0;
  border-top: 1px solid rgba(26, 57, 65, 0.14);
  border-bottom: 1px solid rgba(26, 57, 65, 0.14);
}
.trustbar.trustbar-wide .ti {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-left: 1px solid rgba(26, 57, 65, 0.10);
}
.trustbar.trustbar-wide .ti:first-child { border-left: 0; padding-left: 0; }
.trustbar.trustbar-wide .ti:last-child { padding-right: 0; }
.trustbar.trustbar-wide .tv {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.trustbar.trustbar-wide .tl {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.35;
}
@media (max-width: 900px) {
  .trustbar.trustbar-wide { grid-template-columns: repeat(2, 1fr); }
  .trustbar.trustbar-wide .ti:nth-child(3) { border-left: 0; padding-left: 0; }
  .trustbar.trustbar-wide .ti:nth-child(2) { padding-right: 0; }
  .trustbar.trustbar-wide .ti:nth-child(1), .trustbar.trustbar-wide .ti:nth-child(2) {
    padding-bottom: var(--sp-6); margin-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(26, 57, 65, 0.10);
  }
  .trustbar.trustbar-wide .ti:nth-child(3), .trustbar.trustbar-wide .ti:nth-child(4) {
    padding-top: var(--sp-4);
  }
}
@media (max-width: 520px) {
  .trustbar.trustbar-wide { grid-template-columns: 1fr; }
  .trustbar.trustbar-wide .ti { border-left: 0 !important; padding: var(--sp-4) 0 !important; border-bottom: 1px solid rgba(26,57,65,.10); }
  .trustbar.trustbar-wide .ti:last-child { border-bottom: 0; }
}

/* Leuchtturm-Projekte: einheitliche Optik fuer alle Karten (Sand + gefuellte Chips) */
.rproj { background: var(--sand) !important; border-color: rgba(26, 57, 65, 0.06) !important; box-shadow: none !important; position: relative; }
.rproj .cat { background: var(--coral) !important; color: #fff !important; }
.rproj.sport .cat { background: var(--ink) !important; color: #fff !important; }
.rproj:not(.bank):not(.sport) .cat { background: #4d7060 !important; color: #fff !important; }
.rproj li::before { background: var(--coral-deep, var(--coral)); }

/* Grosszitat ohne Bild (Referenzen › Spitzensport) */
.sport-section .bigquote.bigquote-solo { grid-template-columns: 1fr; max-width: 900px; }
.sport-section .bigquote.bigquote-solo .bq-text q {
  font-size: clamp(0.95rem, 0.82rem + 0.45vw, 1.15rem); line-height: 1.6;
  display: block; quotes: "\201e" "\201c" "\201a" "\2018";
}
.sport-section .bigquote.bigquote-solo .bq-text q::before { content: open-quote; }
.sport-section .bigquote.bigquote-solo .bq-text q::after { content: close-quote; }

/* Hero-Untertitel: zweiter Absatz kompakter */
.hero-copy .hero-sub + .hero-sub-2 { margin-top: var(--sp-3); font-size: 0.95em; color: var(--text-muted); }

/* Einheitlicher Abstand nach Eyebrows – unabhängig vom Wrapper */
/* Eyebrow, die ueber einem zweispaltigen Block steht statt in einer seiner
   Spalten: Sie bleibt links, vor Grafik wie Text. Der Abstand nach unten ist
   derselbe wie in .section-head - sonst klebt sie am Block darunter. */
.wrap > .eyebrow { margin-bottom: var(--sp-6); }

.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3,
.eyebrow + .h1,
.eyebrow + .h2,
.eyebrow + .h3,
.eyebrow + .big,
.eyebrow + .lead { margin-top: var(--sp-6); }

/* Prozess-Section: Verben-Zeile & Kurzclaim in Cards */
.section-head .flow-verbs {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem);
  color: var(--coral);
  letter-spacing: -0.005em;
  margin: var(--sp-4) 0 var(--sp-3);
  font-weight: 500;
}
.fl .fl-claim {
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--sp-5);
  font-size: 0.94rem;
  line-height: 1.4;
}
.fl h4 + .fl-claim { margin-top: var(--sp-2); }

/* Prozess-Cards: einheitliche Baselines für Titel, Claim, Beschreibung.
   Beide Felder halten zwei Zeilen frei und setzen den Text an deren Unterkante,
   damit Claim und Beschreibung in allen vier Karten auf einer Linie beginnen.
   Bewusst kein Flex: Titel und Claim sind Fliesstext, und in einem
   Flex-Container wird jedes Element darin - etwa ein <sup class="reg">
   mitten im Wort - zum eigenen Flex-Kind; der Satz riss dadurch
   auseinander. Ein Block-Container richtet seinen Inhalt mit
   align-content ebenso unten aus und laesst den Text zusammen. */
.flow .fl h4 {
  min-height: calc(1.25rem * 1.25 * 2);
  align-content: end;
  margin-bottom: var(--sp-2);
}
.flow .fl .fl-claim {
  min-height: calc(0.94rem * 1.4 * 2);
  align-content: end;
  margin-bottom: var(--sp-5);
}

/* Eisberg-Grafik: bündig oben/unten, sauber geschlossene Blöcke */
.berg-grid { align-items: stretch; grid-template-columns: 1.05fr 0.95fr; }
/* Die Eyebrow steht ueber dem Grid, nicht in der rechten Spalte. Deshalb
   faengt die Grafik oben genauso an wie die Ueberschrift daneben und
   braucht keinen Ausgleich fuer eine Zeile mehr. */
.berg { height: 100%; display: flex; flex-direction: column; }
@media (max-width: 940px) { .berg-grid { grid-template-columns: 1fr; } }
.berg-bot { flex: 1; }

/* Wirkung-Cards: alle Zeilen ebenbündig */
.impact { grid-template-rows: 48px auto 1fr; align-content: start; }
.impact .ico { align-self: start; }
.impact h3 { min-height: calc(1.15rem * 1.35 * 1); margin: 0; }
.impact p { margin: 0; }

/* Eisberg-Aufzählung: kompakterer Zeilenabstand */
.berg-note { gap: var(--sp-3); }
.berg-note p { line-height: 1.45; }

/* Untere Eisberg-Chips: kreativ gestreute Verteilung, füllt den Kasten organisch */
.berg-bot { display: flex; flex-direction: column; }
.berg-bot .chips.chips-scatter {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.55rem;
  justify-content: space-evenly;
  align-content: space-around;
  flex: 1;
  padding: var(--sp-2) 0;
}
.berg-bot .chips-scatter .chip {
  padding: 0.42rem 0.9rem;
  font-size: 0.86rem;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.berg-bot .chips-scatter .chip.s-sm { padding: 0.32rem 0.7rem; font-size: 0.78rem; opacity: 0.9; }
.berg-bot .chips-scatter .chip.s-md { padding: 0.5rem 1.05rem; font-size: 0.92rem; }
.berg-bot .chips-scatter .chip.s-lg { padding: 0.58rem 1.2rem; font-size: 0.98rem; font-weight: 500; }
/* Leichte, zufällig wirkende Offsets – organischer Look ohne JS */
.berg-bot .chips-scatter .chip:nth-child(3n+1) { transform: translateY(-3px); }
.berg-bot .chips-scatter .chip:nth-child(3n+2) { transform: translateY(4px); }
.berg-bot .chips-scatter .chip:nth-child(5n+3) { transform: translateY(-6px); }
.berg-bot .chips-scatter .chip:nth-child(7n+4) { transform: translateY(3px); }
.berg-bot .chips-scatter .chip:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(224, 98, 69, 0.18);
  border-color: rgba(240, 168, 147, 0.55);
}


/* Wirkung-Kacheln: kontrastreicher, mit dezenter Farbrotation */
.impact-section .impact {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(26, 57, 65, 0.14);
  box-shadow: 0 2px 6px rgba(26, 57, 65, 0.04), 0 10px 28px rgba(26, 57, 65, 0.08);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  overflow: hidden;
}
/* schmale linke Farbleiste als Akzent */
.impact-section .impact::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--coral);
  transition: width .25s var(--ease);
}
.impact-section .impact:hover::before { width: 6px; }
.impact-section .impact:hover {
  transform: translateY(var(--lift));
  border-color: rgba(26, 57, 65, 0.20);
  box-shadow: 0 4px 10px rgba(26, 57, 65, 0.06), 0 16px 38px rgba(26, 57, 65, 0.12);
}
.impact-section .impact .ico {
  width: 48px; height: 48px;
  background: var(--coral); color: #fff;
  box-shadow: 0 6px 16px rgba(224, 98, 69, 0.32);
}
.impact-section .impact .ico svg { width: 22px; height: 22px; stroke-width: 1.8; }
.impact-section .impact h3 { color: var(--ink-deep); font-weight: 600; }
.impact-section .impact p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }

/* Farbrotation: Coral (Standard) / Petrol / Sage-Grün */
.impact-section .impact-grid > .impact:nth-child(3n+2)::before { background: var(--ink-soft); }
.impact-section .impact-grid > .impact:nth-child(3n+2) .ico {
  background: var(--ink-soft);
  box-shadow: 0 6px 16px rgba(44, 82, 91, 0.28);
}
.impact-section .impact-grid > .impact:nth-child(3n+3)::before { background: #8faE9b; }
.impact-section .impact-grid > .impact:nth-child(3n+3) .ico {
  background: #8faE9b;
  box-shadow: 0 6px 16px rgba(143, 174, 155, 0.32);
}

/* Flow-Karten (So läuft es ab): kontrastreicher */
.flow-section .fl {
  background: var(--white);
  border: 1px solid rgba(26, 57, 65, 0.14);
  box-shadow: 0 2px 6px rgba(26, 57, 65, 0.04), 0 10px 28px rgba(26, 57, 65, 0.08);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.flow-section .fl:hover {
  transform: translateY(var(--lift));
  border-color: rgba(224, 98, 69, 0.35);
  box-shadow: 0 4px 10px rgba(26, 57, 65, 0.06), 0 16px 38px rgba(26, 57, 65, 0.12);
}
.flow-section .fl .n {
  width: 40px; height: 40px; font-size: 1rem;
  background: var(--coral); color: #fff;
  box-shadow: 0 6px 16px rgba(224, 98, 69, 0.32);
}
.flow-section .fl h4 { color: var(--ink-deep); font-weight: 600; }
.flow-section .fl p { color: var(--ink-soft); }
.flow-section .fl .fl-claim { color: var(--coral-deep); }
/* Verbindungsstrich zwischen Karten deutlicher */
.flow-section .fl::after { background: rgba(26, 57, 65, 0.28); }

/* Outro-Zeile unter den Zahlen (Brücke zu den Grundmotiven) */
.stat-outro {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(26, 57, 65, 0.14);
  color: var(--ink); font-size: 1.25rem; line-height: 1.5;
  max-width: none; text-align: center;
}
.stat-outro b { display: block; margin: 0.35em auto; max-width: 30ch;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15;
  color: var(--coral-deep); letter-spacing: -0.01em; }
@media (max-width: 640px) { .stat-outro { font-size: 1.05rem; } .stat-outro b { font-size: 1.5rem; } }

/* Reports-Kacheln: idx + h4 in Kopfzeile, Text nutzt die volle Breite der Kachel */
.rep {
  display: block;
}
.rep .idx {
  display: inline-block;
  margin-right: var(--sp-3);
  vertical-align: baseline;
}
.rep h4 {
  display: inline;
  vertical-align: baseline;
  color: #ffffff;
}
.rep p {
  margin-top: var(--sp-5);
  max-width: none;
}

/* ---- Reports: farbige Ziffern- und Border-Rotation ---- */
.rep-grid .rep:nth-child(3n+1) .idx { color: #f0a893; }              /* Coral */
.rep-grid .rep:nth-child(3n+2) .idx { color: #8fb7a4; }              /* Sage-Grün */
.rep-grid .rep:nth-child(3n+3) .idx { color: #f0c56b; }              /* Warm sand-gold */
.rep-grid .rep:nth-child(3n+1) { border-top: 3px solid rgba(240, 168, 147, 0.55); }
.rep-grid .rep:nth-child(3n+2) { border-top: 3px solid rgba(143, 183, 164, 0.55); }
.rep-grid .rep:nth-child(3n+3) { border-top: 3px solid rgba(240, 197, 107, 0.55); }

/* ---- KI-Coach: helle eigene Sektion ---- */
.ai-section .eyebrow { color: var(--coral); }
.ai-section .checks .ck { background: rgba(224, 98, 69, 0.12); color: var(--coral); }
.ai-section .checks b { color: var(--ink); }
.ai-section .checks p { color: var(--text-muted); }

/* Chat-Bubbles auf hellem Grund */
.ai-section .ai-split { align-items: stretch; }
.ai-section .ai-chat {
  background: #ffffff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: 0 24px 60px -32px rgba(26, 57, 65, 0.18);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3);
  height: 100%;
}
.ai-section .ai-chat .bubble { font-size: 0.95rem; padding: var(--sp-3) var(--sp-5); }
@media (max-width: 900px) { .ai-section .ai-chat { height: auto; } }
.ai-section .bubble.ai {
  background: #f4efe8;
  border: 1px solid rgba(26, 57, 65, 0.08);
  color: var(--ink);
}
.ai-section .bubble.me {
  background: var(--coral);
  color: #ffffff;
}
.ai-section .ai-chat .who { color: rgba(26, 57, 65, 0.55); }

/* QCARDS-ROTATION: dezente Farbvariation pro Karte (4er-Rhythmus) */
/* Die Rotation lief ueber border-top-color, das in derselben Regel von
   border-color wieder ueberschrieben wurde: Farbe zeigte nur jede vierte
   Karte, die anderen drei trugen den grauen Rahmenton. Der Balken kommt
   jetzt aus demselben Baustein wie ueberall, die Rotation setzt nur noch
   --tint-accent. */
.qcards .qcard:nth-of-type(4n+1) { background: var(--white); --tint-accent: var(--coral); }
.qcards .qcard:nth-of-type(4n+2) { background: var(--cream); border-color: var(--card-line); --tint-accent: var(--ink); }
.qcards .qcard:nth-of-type(4n+3) { background: var(--sand); border-color: var(--card-line); --tint-accent: #4d7060; }
.qcards .qcard:nth-of-type(4n)   { background: #eef1ec; border-color: var(--card-line); --tint-accent: var(--ink-soft, var(--ink)); }
.qcards .qcard:nth-of-type(4n+2) .mark,
.qcards .qcard:nth-of-type(4n+3) .mark,
.qcards .qcard:nth-of-type(4n)   .mark { color: var(--coral); }

/* Referenzen tri-cards: Zitate oben-bündig ausrichten (Rolle 2-zeilig reservieren) */
.sport-section .tri-card .r { min-height: 3.2em; display: block; } /* reserviert 2 Zeilen fuer Rolle */

/* QCARDS: Zitatgeber innerhalb einer Reihe auf einer Hoehe (unten anpinnen) */
.qcards .qcard .who { margin-top: auto !important; padding-top: var(--sp-6) !important; }
.qcards .qcard .who .r { min-height: 4.4em; display: block; } /* reserviert 3 Zeilen fuer Rolle */

/* Lead in voller Wrap-Breite (Override der zentrierten max-width) */
.section-head .lead.wide { max-width: none !important; }

/* Hervorgehobenes Wort in einer h1, die statt im .pagehero im .section-head
   steht (/berater). Dieselbe Farbgebung wie im Seitenkopf. */
.section-head h1 em { font-style: normal; color: var(--coral); }
.bg-ink .section-head h1 em { color: #f0a893; }

/* Umbruch in einer Ueberschrift, der erst greift, wenn die Zeile ohnehin
   Platz hat; auf schmalen Schirmen bricht der Satz von selbst um. */
br.umbruch-breit { display: none; }
@media (min-width: 700px) { br.umbruch-breit { display: inline; } }

/* Section-head linksbuendig-Variante */
.section-head.left { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
.section-head.left .eyebrow { margin-left: 0; }
.section-head.left .h2 { margin-left: 0; }
.section-head.left .lead { margin-left: 0; margin-right: 0; text-align: left; max-width: 62ch; }

/* Kontakt-Bereich: Absenden-Button linksbuendig */
#kontakt .finder-actions.finder-actions-end { justify-content: flex-start; }

/* ------------------------------------------------------------
   Karte mit Akzentbalken
   Fuenf Sektionen zeigen dasselbe Muster: eine Karte mit farbigem
   Balken an der Oberkante, deren Ton sich ueber das Raster dreht und
   sich in Nummernkreis, Icon-Plaettchen und Aufzaehlungspunkt
   wiederholt. Es stand fuenfmal ausgeschrieben da, mit drei
   Balkenstaerken und zwei Techniken. Jetzt traegt die Mechanik dieser
   Block, und jede Sektion setzt nur noch drei Farbwerte:
     --tint-accent  der Balken und was ihn aufgreift
     --tint-soft    der zurueckgenommene Grund dahinter
     --tint-ink     die Schriftfarbe darauf
   ------------------------------------------------------------ */
.warm > *,
.flow-color .fl,
.cards-color .card,
.rproj,
.qcards .qcard {
  position: relative; overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.warm > *::before,
.flow-color .fl::before,
.cards-color .card::before,
.rproj::before,
.qcards .qcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--tint-accent, var(--coral));
}
.warm > *:hover { transform: translateY(var(--lift)); box-shadow: 0 12px 28px rgba(26, 57, 65, 0.08); }
.flow-color .fl:hover,
.cards-color .card:hover {
  transform: translateY(var(--lift)); box-shadow: 0 18px 40px rgba(26, 57, 65, 0.1);
  border-color: var(--tint-accent, var(--coral));
}
/* Der Balken braucht oben Luft, sonst sitzt er auf dem Inhalt. */
.warm > * { padding-top: calc(var(--sp-8) + 6px); }

/* Die Farbfolge der warmen Raster. Positionen 1 bis 3 sind in allen drei
   Sektionen gleich; ab 4 laeuft das sechsteilige Partnerraster weiter,
   waehrend der vierteilige Ablauf mit Ink abschliesst. */
.warm > * { --tint-accent: var(--coral); --tint-soft: rgba(224, 98, 69, 0.14); --tint-ink: var(--coral); }
/* Die Schriftfarben sind abgedunkelte Varianten der Balkentoene: Auf so
   hellem Grund erreichen die Originale den Kontrast nicht, den ein kleines
   Zeichen braucht. Wo der Bestand zwei Abstufungen kannte, gilt die
   dunklere. */
.warm > :nth-child(2) { --tint-accent: #4a9d94; --tint-soft: rgba(74, 157, 148, 0.16); --tint-ink: #2f7a72; }
.warm > :nth-child(3) { --tint-accent: #e8a94a; --tint-soft: rgba(232, 169, 74, 0.18); --tint-ink: #b7791f; }
.warm > :nth-child(4) { --tint-accent: var(--ink); --tint-soft: rgba(26, 57, 65, 0.12); --tint-ink: var(--ink); }
.stk-grid.warm > :nth-child(4) { --tint-accent: #6b8fb5; --tint-soft: rgba(107, 143, 181, 0.18); --tint-ink: #4f7398; }
.stk-grid.warm > :nth-child(5) { --tint-accent: #9c7bb8; --tint-soft: rgba(156, 123, 184, 0.18); --tint-ink: #7d5fa0; }
.stk-grid.warm > :nth-child(6) { --tint-accent: var(--ink); --tint-soft: rgba(26, 57, 65, 0.12); --tint-ink: var(--ink); }

/* Der Balken laeuft von Kante zu Kante und blendet nach rechts aus. Vorher
   war er beidseitig um --sp-6 eingerueckt und begann dadurch mitten in der
   Flaeche mit einer harten Kante, waehrend er rechts weich auslief - zwei
   verschiedene Enden an einer Linie. Jetzt faengt ihn links die Rundung der
   Karte ab, wie bei jedem anderen Akzentbalken auch. */
.rproj::before {
  background: linear-gradient(90deg, var(--coral) 0%, var(--coral) 55%, transparent 100%);
}

/* Was die Farbe aufgreift: Nummernkreis, Icon-Plaettchen, Zeichen-Chip. */
.warm .n,
.warm .ico,
.warm .sci-chip { background: var(--tint-soft); color: var(--tint-ink); }

/* Wissenschaft-Sektion: helle Karten auf dunklem Grund */
.sci-grid.warm .sci {
  background: #ffffff;
  border: 1px solid rgba(26, 57, 65, 0.06);
  box-shadow: 0 8px 24px rgba(26, 57, 65, 0.05), 0 2px 6px rgba(26, 57, 65, 0.03);
}
.sci-grid.warm .sci:hover { box-shadow: 0 14px 32px rgba(26, 57, 65, 0.09), 0 4px 10px rgba(26, 57, 65, 0.05); }
.sci-grid.warm .sci h4 { color: var(--ink); }
.sci-grid.warm .sci p { color: var(--ink-soft); }
.sci-grid.warm .sci-chip {
  display: inline-grid;
  width: 40px; height: 40px;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
}
.sci-grid.warm .sci:nth-child(1) .sci-chip::before { content: "\2713"; font-size: 1.15rem; }
.sci-grid.warm .sci:nth-child(2) .sci-chip::before { content: "\26AC"; font-size: 1.4rem; line-height: 1; }
.sci-grid.warm .sci:nth-child(3) .sci-chip::before { content: "\2605"; font-size: 1.1rem; }

/* Registered-Zeichen kleiner + hochgestellt. Grundwert ist der fuer
   Flisstext: Bei 16 bis 17 Pixeln Grundschrift schrumpft das Zeichen mit
   0.6em auf rund 9 Pixel und wird zum Punkt, der am Satzende mit dem
   Schlusspunkt verschmilzt. */
sup.reg {
  font-size: 0.68em; vertical-align: baseline; line-height: 1;
  margin-left: 0.08em; margin-right: 0.06em; font-weight: inherit;
  position: relative; top: -0.42em;
  display: inline-block;
}
/* Wo die Schrift gross ist, traegt die kleinere und hoeher gesetzte
   Abstufung: Ueberschriften, Vorspann und die Elemente in der
   Anzeigeschrift (Logo, Stufenbezeichnung). */
h1 sup.reg, h2 sup.reg, h3 sup.reg, h4 sup.reg,
.h1 sup.reg, .h2 sup.reg, .h3 sup.reg, .h4 sup.reg,
.lead sup.reg, .logo-text sup.reg, .lvl .t sup.reg {
  font-size: 0.6em; top: -0.55em;
}
/* Im Knopf ist jedes Element ein Flex-Kind, und der Leerraum zwischen zwei
   Flex-Kindern faellt weg. Die Wortluecke hinter dem Zeichen wird deshalb
   als Abstand gesetzt. Alle neun Knoepfe mit ® haben Text dahinter. */
.btn sup.reg { margin-right: 0.28em; }
/* Die Eyebrow setzt durchgehend Versalien. Bezugslinie ist deshalb nicht die
   x-Hoehe, sondern die Versalhoehe von DM Sans bei 0.70em; mit dem alten
   -0.15em sass das Zeichen auf halber Hoehe der Grossbuchstaben. top rechnet
   in der eigenen Schriftgroesse des <sup>, die -0.5em heben es also um
   0.35em der Eyebrow - damit liegt die Mitte des Zeichens auf der
   Versalhoehe. Die Eyebrow ist mit 12px die kleinste Schrift der Seite;
   0.7em statt 0.65em halten das ® darin noch als Zeichen lesbar. Der
   Abstand davor entfaellt, weil das letter-spacing von 0.16em ihn schon
   traegt - sonst stuende das Zeichen sichtbar vom Wort abgeloest. */
.eyebrow sup.reg { font-size: 0.7em; top: -0.5em; margin-left: 0; }

/* Ueber uns: Haltung-Section Neugestaltung */
.haltung-section .haltung-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-16); margin-top: var(--sp-10); align-items: start;
}
@media (max-width: 900px) {
  .haltung-section .haltung-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.haltung-section .haltung-quote { border-left: 3px solid var(--coral); padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); }

/* Haltung auf bg-ink: helle Typo */
.haltung-section.bg-ink .h2 { color: var(--cream); }
.haltung-section.bg-ink .hquote { color: var(--cream); }
.haltung-section.bg-ink .haltung-body p { color: rgba(252,249,245,0.82); }
.haltung-section .hquote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.25; letter-spacing: -0.015em;
  color: var(--ink-deep, var(--ink)); margin: 0;
}
.haltung-section .haltung-body p { font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6; color: var(--ink-soft, var(--ink)); margin: 0 0 var(--sp-4); }
.haltung-section .haltung-body p:last-child { margin-bottom: 0; }

/* Zitatgroesse in Stimmen-qcards etwas kleiner */
.qcards .qcard blockquote { font-size: clamp(0.95rem, 1.3vw, 1.08rem) !important; }

/* FINALCTA linksbuendig (Variante Referenzen) */
.finalcta.left .inner { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
.finalcta.left .lead { margin-left: 0 !important; margin-right: 0 !important; }
.finalcta.left .actions { justify-content: flex-start !important; }

/* Trustbar Reichweite: 5 Kennzahlen, Startseiten-Stil */
.trustbar.trustbar-wide.reach-trust-5 { grid-template-columns: repeat(5, 1fr); margin-top: var(--sp-16); padding: var(--sp-6) 0; }

/* Einstieg-Flow Unternehmen: farbige Nummern & Akzente */
.flow-color .fl .n { background: var(--tint-accent, var(--ink)); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.flow-color .fl h4 { color: var(--tint-accent, var(--ink)); }
.flow-color .fl--tint-1 { --tint-accent: #E66E50; }
.flow-color .fl--tint-2 { --tint-accent: #3B6F70; }
.flow-color .fl--tint-3 { --tint-accent: #C8583F; }
.flow-color .fl--tint-4 { --tint-accent: #1A3941; }

/* Anwendungsfelder Unternehmen: farbige Karten */
.cards-color .card .ico { width: 48px; height: 48px; background: var(--tint-accent, var(--coral)); color: #ffffff; margin-bottom: var(--sp-4); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.cards-color .card .ico svg { width: 22px; height: 22px; color: #ffffff; stroke: #ffffff; }
.cards-color .card .ico svg * { stroke: #ffffff; }
.cards-color .card h4 { color: var(--ink); }
.cards-color .card ul li { position: relative; padding-left: 1rem; }
.cards-color .card ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--tint-accent, var(--coral)); opacity: 0.7; }

.cards-color .card--tint-1 { --tint-accent: #E66E50; --tint-bg: rgba(230,110,80,0.16); }   /* Coral */
.cards-color .card--tint-2 { --tint-accent: #1A3941; --tint-bg: rgba(26,57,65,0.14); }     /* Ink */
.cards-color .card--tint-3 { --tint-accent: #C8583F; --tint-bg: rgba(200,88,63,0.18); }    /* Coral-deep */
.cards-color .card--tint-4 { --tint-accent: #3B6F70; --tint-bg: rgba(59,111,112,0.18); }   /* Teal */
.cards-color .card--tint-5 { --tint-accent: #7A5A3A; --tint-bg: rgba(122,90,58,0.18); }    /* Warm brown */
.cards-color .card--tint-6 { --tint-accent: #2C5A5C; --tint-bg: rgba(44,90,92,0.18); }     /* Deep teal */

/* Trustbar Unternehmen: 3 Kennzahlen mit Quelle */
.trustbar.trustbar-wide.reach-trust-3 { grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-16); padding: var(--sp-6) 0; align-items: stretch; }
.trustbar.trustbar-wide.reach-trust-3 .ti { display: flex; flex-direction: column; }
.trustbar.trustbar-wide.reach-trust-3 .tv { font-size: clamp(1.6rem, 1rem + 1.2vw, 2.1rem); }
.trustbar.trustbar-wide.reach-trust-3 .tl { font-size: var(--text-sm); line-height: 1.45; display: flex; flex-direction: column; flex: 1; }
.trustbar.trustbar-wide.reach-trust-3 .tl-src { display: block; margin-top: auto; padding-top: 0.5rem; font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 900px) { .trustbar.trustbar-wide.reach-trust-3 { grid-template-columns: 1fr; } .trustbar.trustbar-wide.reach-trust-3 .ti { border-left: 0; padding-left: 0; padding-right: 0; } }
.trustbar.trustbar-wide.reach-trust-5 .tv { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); }
.trustbar.trustbar-wide.reach-trust-5 .tl { font-size: var(--text-sm); }
@media (max-width: 900px) { .trustbar.trustbar-wide.reach-trust-5 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-8); } .trustbar.trustbar-wide.reach-trust-5 .ti { border-left: 0; padding-left: 0; padding-right: 0; } }
.trustbar.trustbar-wide.reach-trust-7 { grid-template-columns: repeat(7, 1fr); margin-top: var(--sp-16); padding: var(--sp-6) 0; }
.trustbar.trustbar-wide.reach-trust-7 .tv { font-size: clamp(1.15rem, 0.85rem + 0.8vw, 1.55rem); }
.trustbar.trustbar-wide.reach-trust-7 .tl { font-size: var(--text-sm); }
@media (max-width: 1100px) { .trustbar.trustbar-wide.reach-trust-7 { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-8); } .trustbar.trustbar-wide.reach-trust-7 .ti { border-left: 0; padding-left: 0; padding-right: 0; } }
@media (max-width: 700px) { .trustbar.trustbar-wide.reach-trust-7 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .trustbar.trustbar-wide.reach-trust-5 { grid-template-columns: 1fr; } }

/* Berater: cert-step Karten auf dunkler Sektion lesbar machen */
.bg-ink .cert-step { background: var(--white); }
.bg-ink .cert-step h3, .bg-ink .cert-step h4 { color: var(--ink); }
.bg-ink .cert-step p { color: var(--ink); opacity: 0.82; }
.bg-ink .cert-step .n { background: rgba(224, 98, 69, 0.14); color: var(--coral); }

/* Fuer-mich: subgroups + 2/3-column flow variants + featured card */
#einstieg .subgroup-head { margin-top: var(--sp-12) !important; margin-bottom: var(--sp-6); text-align: center; }
#einstieg .subgroup-head .eyebrow { font-size: 1rem; letter-spacing: 0.16em; font-weight: 600; }
#einstieg .subgroup-note { font-size: 1rem; }
#einstieg .subgroup-head--sep { margin-top: calc(var(--sp-12) + var(--sp-12)) !important; }
.subgroup-head .eyebrow { display: inline-block; }
.subgroup-note { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--sp-2); }
.flow.flow--2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; max-width: 900px; margin-left: auto; margin-right: auto; }
.flow.flow--3 { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
/* Number + heading side-by-side */
#einstieg .fl { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--sp-2); align-items: start; }
#einstieg .fl > .n { grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
#einstieg .fl > h4 { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
#einstieg .fl > p,
#einstieg .fl > ul,
#einstieg .fl > .fl-sub { grid-column: 1 / -1; }
#einstieg .fl > p:first-of-type { margin-top: var(--sp-4); }
.fl .fl-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
.fl .fl-list li { position: relative; padding-left: 1rem; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.fl .fl-list li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--tint-accent, var(--coral)); }
.fl .fl-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint-accent, var(--coral)); margin-bottom: 0.4rem; }
.fl.fl--featured { box-shadow: 0 8px 24px rgba(26,57,65,0.08); border: 1px solid rgba(26,57,65,0.10); }
.fl.fl--featured:hover { box-shadow: 0 14px 32px rgba(26,57,65,0.14); }
@media (max-width: 900px) { .flow.flow--2, .flow.flow--3 { grid-template-columns: 1fr; } }
.fl .fl-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--sp-3); }

/* Rechtliches im Footer */
.footer-legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }
@media (max-width: 640px) { .footer-legal { margin-left: 0; justify-content: flex-start; } }

/* Reine Textseiten (Impressum, Datenschutz, AGB, Wissenschaftlichkeit):
   Der Inhalt beginnt an derselben Kante wie die Ueberschrift im Seitenkopf und
   nutzt die volle Seitenbreite. Nur die Zeilenlaenge der Absaetze wird begrenzt,
   damit der Fliesstext auf breiten Bildschirmen lesbar bleibt. */
.wrap.textpage { max-width: var(--maxw); }
.textpage .legal p,
.textpage .legal ul,
.textpage .legal ol,
.textpage > .lead { max-width: 92ch; }

/* Fliesstext der Rechtsseiten (Impressum, Datenschutz, AGB) */
.legal { color: var(--text); }
.legal h2 { margin: var(--sp-12) 0 var(--sp-4); }
.legal h3 { margin: var(--sp-8) 0 var(--sp-2); }
.legal > :first-child { margin-top: 0; }
.legal p { margin: 0 0 var(--sp-4); line-height: 1.7; color: var(--ink-soft); }
.legal ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.legal li { margin-bottom: var(--sp-2); line-height: 1.7; color: var(--ink-soft); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.legal a:hover { text-decoration-thickness: 2px; }
.legal h2 + h3 { margin-top: var(--sp-4); }

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ausfuellbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Einwilligung im Kontaktformular */
.finder-consent { margin-top: var(--sp-2); }
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-soft); cursor: pointer; }
.consent input { margin-top: 0.25em; flex: none; }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.legal .adresse { font-style: normal; }

/* Eine Ueberschrift der Rechtsseiten, auf die von aussen verwiesen wird,
   muss unter der festen Kopfzeile hervorkommen. */
.legal [id] { scroll-margin-top: 120px; }

/* Widerspruch gegen die Reichweitenmessung (Datenschutzerklaerung).
   Ein Kasten, der allein steht - deshalb --radius-lg und nicht --radius. */
.analyse-optout {
  display: grid; justify-items: start; gap: var(--sp-4);
  max-width: 62ch; margin: var(--sp-6) 0;
  padding: var(--sp-6); border: 1px solid var(--card-line);
  border-radius: var(--radius-lg); background: var(--cream);
}
.analyse-optout .consent { font-size: var(--text-base); }
.analyse-optout .analyse-stand { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

/* Zwei Verweise im Fuss des Klappmenues */
.drop-foot-links { display: flex; align-items: center; gap: var(--sp-6); flex: none; }
@media (max-width: 1080px) { .drop-foot-links { gap: var(--sp-4); } }

/* Ein Band als erster Abschnitt einer Seite braucht denselben Abstand nach
   oben wie ein Seitenkopf - sonst klebt es an der festen Kopfzeile. */
.band-oben { padding-top: calc(var(--sp-24) + 46px); }

/* Kontakt-Baustein auf dunklem Grund (Band "Berater·in finden") */
.bg-ink .contact-cta-head h3 { color: var(--text-on-dark); }
.bg-ink .contact-cta-head p { color: var(--text-on-dark-muted); }

/* ============================================================
   Inhalt links, klebende Beileiste rechts
   ============================================================
   Der Baustein fuer lange Seiten mit einem Kasten, der beim Lesen stehen
   bleibt - Detailseite einer Veranstaltung, spaeter alles Aehnliche.
   .split taugt dafuer nicht: Es ist fest 1fr 1fr und kennt kein Kleben.

   Die Beileiste ist zweigeteilt, und nur der obere Teil klebt: oben .bl-aktion
   mit der Handlungsaufforderung, darunter .bl-infos mit allem, was man beim
   Lesen nicht dauernd braucht. Der ganze Kasten klebte frueher am Stueck und
   war dann hoeher als ein gewoehnliches Fenster - er brauchte eine
   Hoehenbegrenzung und rollte in sich selbst, und der Anmeldeknopf war beim
   ersten Blick nur zu sehen, wenn man einen sehr hohen Monitor hatte. Jetzt
   rollen die Angaben mit der Seite, und der Knopf bleibt stehen.

   Damit er das ueber die ganze Laenge des Abschnitts tut, ist die Beileiste
   selbst kein Kasten mehr, sondern die Spalte: Sie zieht sich per
   align-self: stretch ueber die volle Hoehe der Zeile, und "sticky" klebt
   innerhalb dieser Spalte.

   Radien nach der Regel: Beide Teile sind Solitaer-Panels und bekommen
   --radius-lg, die Zeilen darin stehen mit ihresgleichen in einem Raster und
   bekommen --radius. */
.mit-beileiste { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-16); align-items: start; }
.mit-beileiste > .inhalt { min-width: 0; }
/* Die beiden Teile stehen als eigene Panels nebeneinander in der Spalte -
   ein Abstand in Kastenhoehe liest sich als Naht statt als Trennung. */
.beileiste { align-self: stretch; display: flex; flex-direction: column; gap: var(--sp-6); }
.beileiste > * { flex: none; }

.bl-aktion, .bl-infos {
  padding: var(--sp-6); border-radius: var(--radius-lg);
  background: var(--white); border: 1px solid var(--card-line); box-shadow: var(--shadow-sm);
}
/* Der klebende Teil liegt ueber dem rollenden - die Angaben schieben sich
   unter ihn, deshalb braucht er eine deckende Flaeche und den Schatten der
   groesseren Stufe. */
.bl-aktion {
  position: sticky; top: calc(var(--header-h, 72px) + var(--sp-6)); z-index: 2;
  box-shadow: var(--shadow);
}
.bl-aktion > .btn { width: 100%; justify-content: center; }
.bl-aktion > :last-child { margin-bottom: 0; }
.bg-white .bl-aktion, .bg-white .bl-infos { background: var(--cream); }
.bg-ink .bl-aktion, .bg-ink .bl-infos { background: var(--card-fill-dark); border-color: var(--card-line-dark); color: var(--text-on-dark); box-shadow: none; }

.bl-block { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(26, 57, 65, 0.12); }
/* Der erste Block sitzt an der Oberkante seines Panels - dort waere die
   Trennlinie ein Strich ohne etwas darueber. */
.bl-infos > .bl-block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.bg-ink .bl-block { border-top-color: rgba(244, 239, 232, 0.14); }
.bl-block > p { margin-top: var(--sp-2); font-size: var(--text-sm); line-height: 1.6; color: var(--text-muted); }
.bg-ink .bl-block > p { color: var(--text-on-dark-muted); }
.bl-titel { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.bg-ink .bl-titel { color: var(--coral-light); }

.bl-liste { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.bl-zeile {
  display: block; padding: 0.7rem 0.85rem; border-radius: var(--radius);
  border: 1px solid var(--card-line); background: var(--white); color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bl-zeile:hover { transform: translateY(var(--lift)); border-color: rgba(26, 57, 65, 0.28); box-shadow: var(--shadow-sm); }
.bl-zeile.aktiv { border-color: var(--coral); background: rgba(224, 98, 69, 0.06); }
.bg-ink .bl-zeile { background: var(--card-fill-dark); border-color: var(--card-line-dark); }

/* Einspaltig rueckt die Beileiste NACH OBEN, vor den Inhalt: Sie traegt die
   Handlungsaufforderung, und die darf nicht erst hinter einem Bildschirm
   voll Text auftauchen. Deshalb Flex statt Grid - order braucht eine
   Reihenfolge, die es im einspaltigen Raster nicht gibt. */
@media (max-width: 1000px) {
  .mit-beileiste { display: flex; flex-direction: column; gap: var(--sp-8); }
  .beileiste { order: -1; }
  /* Einspaltig steht die Aktion ohnehin ganz oben; klebte sie hier, schoebe
     sie sich ueber den Text, den sie erklaeren soll. */
  .bl-aktion { position: static; box-shadow: var(--shadow-sm); }
}