/* X mind Seite „Warum X mind?“, erzeugt mit _wordpress/warum-x-mind/vorschlag/bau.py --theme aus dem Prototyp. Nicht von Hand ändern. */
/* =========================================================
   X mind – Entwurf „Warum X mind?“ (Prototyp, 26.10.2026)
   Baut auf den Theme-Dateien der Leistungsseiten auf (rahmen.css, leistung-basis.css, leistungen.css), nur Tokens.
   ========================================================= */


/* ---------- Hero: Illustration „Viele Köpfe rauchen und liefern Ergebnisse“ ---------- */
/* ds-allow-hardcode:start: Maße im SVG sind Einheiten der viewBox (500 × 540); Laufzeiten der Rauchfahnen und des Schwebens */
.xm .koepfe { position: relative; width: min(100%, 540px); margin-inline: auto; container: koepfe / inline-size; }
.xm .koepfe__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.xm .koepfe__person--hinten .koepfe__kopf, .xm .koepfe__person--hinten .koepfe__torso { fill: var(--petrol); }
.xm .koepfe__person--hinten .koepfe__torso { opacity: 0.75; }
.xm .koepfe__person--vorne .koepfe__kopf { fill: var(--navy); }
.xm .koepfe__person--vorne .koepfe__torso { fill: var(--navy-deep); }
/* Weiße Kontur trennt die Personen, auch wo sie sich überlappen */
.xm .koepfe__torso, .xm .koepfe__kopf { stroke: var(--white); stroke-width: 4; paint-order: stroke; }
.xm .koepfe__haare, .xm .koepfe__dutt { fill: var(--navy-deep); }
.xm .koepfe__brille { fill: none; stroke: var(--white-60); stroke-width: 2; }
.xm .koepfe__kopfhoerer path { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; }
.xm .koepfe__kopfhoerer rect { fill: var(--orange); }
.xm .koepfe__ring { fill: none; stroke: var(--orange); stroke-width: 4; }
.xm .koepfe__rauch {
  fill: none; stroke: var(--navy-16); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 16 14;
  animation: xm-rauch 1.6s linear infinite; animation-delay: calc(var(--i) * -0.2s);
}
@keyframes xm-rauch { to { stroke-dashoffset: -30; } }
.xm .koepfe__wolke-rand circle { fill: var(--navy-16); }
.xm .koepfe__wolke-flaeche circle { fill: var(--white); }
.xm .koepfe__wolke { filter: drop-shadow(0 12px 20px var(--navy-16)); }
.xm .koepfe__funken path { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; }
.xm .koepfe__karte { fill: var(--white); }
.xm .koepfe__ergebnis { filter: drop-shadow(0 14px 18px var(--navy-16)); }
.xm .koepfe__leiste { fill: var(--mist); }
.xm .koepfe__punkt { fill: var(--navy-32); }
.xm .koepfe__akzent { fill: var(--orange); }
.xm .koepfe__zeile { fill: var(--navy-16); }
.xm .koepfe__zeile--dunkel { fill: var(--navy); }
.xm .koepfe__telefon { fill: var(--navy); }
.xm .koepfe__schirm { fill: var(--petrol); }
.xm .koepfe__play { fill: var(--orange); }
.xm .koepfe__play-pfeil { fill: var(--white); }
.xm .koepfe__label { font-size: 12px; font-weight: 600; fill: var(--petrol); }
.xm .koepfe__ergebnisse { animation: xm-schweben 4.8s ease-in-out infinite alternate; }
@keyframes xm-schweben { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.xm .koepfe__etiketten { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.xm .koepfe__etiketten li {
  position: absolute; display: inline-flex; align-items: center; gap: var(--s-8); min-height: 38px; padding: 0 var(--s-16);
  border-radius: var(--radius-pill); background: var(--white); color: var(--navy); font-size: 0.92rem; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-nav), 0 0 0 1px var(--navy-08);
}
.xm .koepfe__etiketten li:nth-child(1) { top: 47%; left: 0; }
.xm .koepfe__etiketten li:nth-child(2) { top: 87%; left: 50%; transform: translateX(-50%); }
@container koepfe (max-width: 380px) {
  .xm .koepfe__etiketten li { min-height: 30px; padding: 0 var(--s-12); font-size: var(--fs-mini); }
}
/* ds-allow-hardcode:end */

/* ---------- Vita: Porträt mit Etiketten ---------- */
/* ds-allow-hardcode:start: Lage der Etiketten und Seitenverhältnis des Fotos (480 × 534) wie beim Druckbogen der Printproduktion */
.xm .portrait { position: relative; width: min(100%, 540px); aspect-ratio: 1 / 1.08; margin-inline: auto; container: portrait / inline-size; }
.xm .portrait__bild {
  position: absolute; left: 50%; top: 45%; width: 64%; aspect-ratio: 480 / 534; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-30); background: var(--grad-panel); box-shadow: var(--shadow-layer), 0 0 0 1px var(--navy-08);
  transform: translate(-50%, -50%) rotate(2deg);
}
/* Schwarz-Weiß-Foto auf Navy: Schatten werden Navy, Lichter bleiben weiß (Duplex in den Hausfarben) */
.xm .portrait__bild img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; filter: grayscale(1) contrast(1.06); }
.xm .portrait__name {
  position: absolute; left: 50%; bottom: 4%; display: grid; gap: 2px; padding: var(--s-16) var(--s-24); text-align: center;
  border-radius: var(--radius-20); transform: translateX(-50%); white-space: nowrap;
}
.xm .portrait__name b { font-size: 1.15rem; color: var(--navy); letter-spacing: var(--track-sub); }
.xm .portrait__name span { font-size: var(--fs-small); color: var(--petrol); }
.xm .portrait__etiketten { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.xm .portrait__etiketten li {
  position: absolute; display: inline-flex; align-items: center; gap: var(--s-8); min-height: 38px; padding: 0 var(--s-16);
  border-radius: var(--radius-pill); background: var(--white); color: var(--navy); font-size: 0.92rem; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-nav), 0 0 0 1px var(--navy-08); animation: xm-portrait-ein var(--dur-3) var(--ease-out) backwards;
}
.xm .portrait__etiketten li:nth-child(1) { top: 9%; left: 0; animation-delay: 0.3s; }
.xm .portrait__etiketten li:nth-child(2) { top: 36%; right: 0; animation-delay: 0.45s; }
.xm .portrait__etiketten li:nth-child(3) { top: 62%; left: 2%; animation-delay: 0.6s; }
.xm .portrait__punkt { width: 9px; height: 9px; border-radius: var(--radius-round); background: var(--orange); }
@keyframes xm-portrait-ein { from { opacity: 0; transform: translateY(10px); } }
@container portrait (max-width: 380px) {
  .xm .portrait__etiketten li { min-height: 30px; padding: 0 var(--s-12); font-size: var(--fs-mini); }
  .xm .portrait__name { padding: var(--s-12) var(--s-16); }
  /* Schmal: das rechte Etikett sitzt auf Stirnhöhe statt neben dem Gesicht */
  .xm .portrait__etiketten li:nth-child(2) { top: 22%; }
}
/* ds-allow-hardcode:end */

/* ---------- Wer dahinter steht (am Ende der Seite) ---------- */
/* Zwei mal zwei: oben Text | Werdegang (dunkle Box), unten Porträt | Kontakt. Gleich breite Spalten, oben gleich hoch
   (die Box wächst mit dem Text), unten steht der Kontakt mittig neben dem Porträt. */
.xm .person__raster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-56) var(--s-72); align-items: stretch; margin-top: var(--s-56);
}
/* Oberkante der ersten Zeile wie „Werdegang“ in der Box (gleicher Abstand wie deren Innenabstand) */
.xm .person__text { display: grid; gap: var(--s-20); align-content: start; padding-top: var(--s-40); }
.xm .person__text p { max-width: 62ch; color: var(--navy); }
.xm .person__rolle { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--petrol); }
.xm .person__lauf { display: flex; flex-direction: column; padding: var(--s-40); border-radius: var(--radius-30); background: var(--grad-panel); box-shadow: var(--shadow-layer); }
/* Die Box ist so hoch wie der Text daneben: Punkte über die ganze Höhe verteilen statt Leerraum unten (Inhaber 27.10.2026) */
.xm .person__lauf .lauf { flex: 1; align-content: space-between; }
.xm .person__lauf-kopf { margin-bottom: var(--s-24); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white-81); }
.xm .person__bild { align-self: center; }
.xm .person__aktionen {
  align-self: center; display: grid; justify-items: start; gap: var(--s-16); padding: var(--s-40);
  border-radius: var(--radius-30); background: var(--mist);
}
.xm .person__aktionen .knopf-zart { display: inline-flex; align-items: center; gap: var(--s-8); }

/* Werdegang als Zeitleiste: gestrichelte Linie wie bei den Schritten, Jahreszahlen orange */
/* ds-allow-hardcode:start: Punktgrößen und Linienlage der Zeitleiste */
.xm .lauf { position: relative; list-style: none; display: grid; gap: var(--s-24); padding-left: 36px; }
.xm .lauf::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--navy-32) 0 8px, transparent 8px 16px);
}
.xm .lauf__punkt { position: relative; display: grid; gap: 2px; }
.xm .lauf__punkt::before {
  content: ""; position: absolute; left: -36px; top: 6px; width: 16px; height: 16px; border-radius: var(--radius-round);
  background: var(--white); box-shadow: inset 0 0 0 2px var(--navy);
}
.xm .lauf__punkt--jahr::before { background: var(--orange); box-shadow: none; }
.xm .lauf__punkt--ziel::before { background: var(--navy); box-shadow: none; }
/* In der dunklen Box: Linie und Punkte hell, Jahreszahlen bleiben orange */
.xm .person__lauf .lauf::before { background: repeating-linear-gradient(180deg, var(--white-35) 0 8px, transparent 8px 16px); }
.xm .person__lauf .lauf__punkt::before { background: var(--navy-deep); box-shadow: inset 0 0 0 2px var(--white); }
.xm .person__lauf .lauf__punkt--jahr::before { background: var(--orange); box-shadow: none; }
.xm .person__lauf .lauf__punkt--ziel::before { background: var(--white); box-shadow: none; }
/* ds-allow-hardcode:end */
.xm .lauf__punkt em { font-style: normal; font-size: var(--fs-small); font-weight: 700; color: var(--orange); letter-spacing: 0.04em; }
.xm .lauf__punkt b { font-weight: 600; color: var(--navy); }
.xm .lauf__punkt span { font-size: var(--fs-small); color: var(--petrol); line-height: 1.55; }
.xm .person__lauf .lauf__punkt b { color: var(--white); }
.xm .person__lauf .lauf__punkt span { color: var(--white-81); }

.xm .vorschlag-marke {
  display: inline-block; vertical-align: middle; margin-left: var(--s-8); padding: var(--s-4) var(--s-12); border: 1px dashed var(--orange);
  border-radius: var(--radius-pill); font-size: var(--fs-mini); font-weight: 600; letter-spacing: 0; color: var(--orange);
}

/* ---------- Was wir alles haben: Mindmap ---------- */
.xm .karte {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) minmax(0, 1fr);
  grid-template-areas: "a1 mitte a2" "a3 mitte a4" "a5 a5 a5"; gap: var(--s-56) var(--s-72); align-items: center; margin-top: var(--s-56);
}
.xm .karte__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.xm .karte__linie { fill: none; stroke: var(--navy-32); stroke-width: 2; stroke-dasharray: 6 6; transition: stroke var(--dur-2) linear, opacity var(--dur-2) linear; }
.xm .karte__mitte {
  grid-area: mitte; position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-24) var(--s-20);
  border-radius: var(--radius-30); background: var(--grad-panel); color: var(--white); text-align: center; box-shadow: var(--shadow-layer);
}
.xm .x-marke { display: block; height: auto; fill: var(--orange); }
.xm .karte__mitte b { font-size: 1.25rem; letter-spacing: var(--track-sub); }
.xm .karte__mitte span { font-size: var(--fs-small); color: var(--white-81); }
/* „Getting things done“ mit Bildzeichen als Pille wie in der Lösungs-Box der Projektseiten (loesung.css .loesung__gtd),
   Bildzeichen ohne Kreis (CD) (Inhaber 27.10.2026) */
/* ds-allow-hardcode:start: Höhe des Bildzeichens und Laufweite wie .loesung__gtd */
.xm .karte__gtd {
  display: inline-flex; align-items: center; gap: var(--s-12); margin-bottom: var(--s-32); padding: var(--s-12) var(--s-20);
  border: 1px solid var(--white-35); border-radius: var(--radius-pill); white-space: nowrap;
}
.xm .karte__gtd span { font-size: var(--fs-mini); font-weight: 700; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.xm .karte__gtd .x-marke { width: auto; height: 26px; }
/* ds-allow-hardcode:end */
.xm .ast {
  position: relative; z-index: 1; display: grid; gap: var(--s-16); padding: var(--s-24); border-radius: var(--radius-20);
  background: var(--white); box-shadow: 0 0 0 1px var(--navy-08), var(--shadow-lift);
  transition: opacity var(--dur-2) linear, transform var(--dur-3) var(--ease-out);
}
.xm .ast--1 { grid-area: a1; } .xm .ast--2 { grid-area: a3; } .xm .ast--3 { grid-area: a2; } .xm .ast--4 { grid-area: a4; }
.xm .ast--5 { grid-area: a5; justify-self: center; width: min(100%, 36rem); }
.xm .ast .titel-4 { display: flex; align-items: center; gap: var(--s-12); color: var(--navy); }
/* ds-allow-hardcode:start: Ziffernkreis wie .schritt__ziffer, verkleinert */
.xm .ast__nr {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-round);
  background: var(--navy); color: var(--white); font-size: var(--fs-small); font-weight: 700;
}
/* ds-allow-hardcode:end */
.xm .ast__liste { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.xm .chip {
  display: inline-flex; align-items: center; min-height: var(--s-40); padding: 0 var(--s-16); border-radius: var(--radius-pill);
  background: var(--mist); color: var(--navy); font-size: var(--fs-small); font-weight: 600;
}
.xm .chip--vorschlag { background: none; color: var(--petrol); outline: 1px dashed var(--navy-32); outline-offset: -1px; }
.xm .karte__legende { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-12); margin-top: var(--s-40); font-size: var(--fs-small); color: var(--petrol); }
/* Überfahren: der Ast tritt hervor, seine Linie wird orange */
.xm .karte:has(.ast:hover) .ast:not(:hover) { opacity: 0.45; }
.xm .karte:has(.ast--1:hover) .karte__linie--1, .xm .karte:has(.ast--2:hover) .karte__linie--2, .xm .karte:has(.ast--3:hover) .karte__linie--3,
.xm .karte:has(.ast--4:hover) .karte__linie--4, .xm .karte:has(.ast--5:hover) .karte__linie--5 { stroke: var(--orange); stroke-dasharray: none; }
.xm .karte:has(.ast:hover) .karte__linie { opacity: 0.6; }
.xm .karte:has(.ast--1:hover) .karte__linie--1, .xm .karte:has(.ast--2:hover) .karte__linie--2, .xm .karte:has(.ast--3:hover) .karte__linie--3,
.xm .karte:has(.ast--4:hover) .karte__linie--4, .xm .karte:has(.ast--5:hover) .karte__linie--5 { opacity: 1; }
/* Einlauf beim ersten Sichtbarwerden (setzt warum.js, ohne Skript und bei reduzierter Bewegung sofort sichtbar) */
.xm .karte.wartet .ast { opacity: 0; transform: scale(0.94); }
.xm .karte.wartet .karte__linien { opacity: 0; }
.xm .karte__linien { transition: opacity var(--dur-4) linear var(--dur-2); }
.xm .karte .ast--2, .xm .karte .ast--4 { transition-delay: var(--dur-1); } .xm .karte .ast--5 { transition-delay: var(--dur-2); }

/* ---------- Breiten ---------- */
@media (max-width: 1024px) {
  /* Einspaltig: Porträt zuerst, dann Text, Werdegang, Kontakt */
  .xm .person__raster { grid-template-columns: minmax(0, 1fr); gap: var(--s-40); }
  .xm .person__bild { order: -1; }
  .xm .person__text { padding-top: 0; }
  .xm .person__aktionen { justify-items: center; text-align: center; }
  .xm .karte { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "mitte mitte" "a1 a2" "a3 a4" "a5 a5"; gap: var(--s-40) var(--s-24); }
  .xm .karte__mitte { justify-self: center; width: min(100%, 22rem); }
  .xm .ast--5 { width: 100%; }
  /* Ohne Seitenspalten liefen die Linien hinter den Karten der ersten Reihe durch */
  .xm .karte__linien { display: none; }
}
@media (max-width: 767px) {
  .xm .person__lauf, .xm .person__aktionen { padding: var(--s-24); }
  .xm .karte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mitte" "a1" "a3" "a2" "a4" "a5"; gap: var(--s-20); }
}
@media (prefers-reduced-motion: reduce) {
  .xm .koepfe__rauch, .xm .koepfe__ergebnisse { animation: none; }
  .xm .portrait__etiketten li { animation: none; }
  .xm .ast, .xm .karte__linien { transition: none; }
}

/* ---------- Drei Wege: Vergleichstabelle der Leistungsseiten mit drei Spalten, X mind hervorgehoben ---------- */
.xm .drei-wege .vergleich { margin-top: var(--s-56); }
/* Spalte „X mind“ als blaue Box wie die anderen dunklen Kästen (Verlauf, Schatten, Radius-Token). Die Box ist ein
   einziges Element hinter der Spalte, nicht der Hintergrund jeder Zelle: So läuft der Verlauf ohne Stufen durch, und alle
   Zellen behalten dieselben Abstände, Köpfe und Zeilen stehen über alle Spalten auf einer Höhe. Feste Spaltenbreiten
   (colgroup), damit die Box genau über der letzten Spalte liegt. */
.xm .vergleich--drei table { position: relative; isolation: isolate; table-layout: fixed; }
.xm .vergleich__sp-kriterium { width: 22%; }
.xm .vergleich__sp-agentur { width: 26%; }
.xm .vergleich__sp-freelancer { width: 22%; }
.xm .vergleich__sp-xmind { width: 30%; }
.xm .vergleich--drei table::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 70%; right: 0;
  border-radius: var(--radius-20); background: var(--grad-panel); box-shadow: var(--shadow-layer);
}
.xm .vergleich--drei thead th { padding-top: var(--s-24); }
.xm .vergleich--drei tbody tr:last-child > * { padding-bottom: var(--s-24); }
.xm .vergleich--drei th:last-child, .xm .vergleich--drei td:last-child { padding-inline: var(--s-24); color: var(--white); border-top-color: var(--white-20); }
.xm .vergleich--drei thead th:last-child { color: var(--orange); }
.xm .vergleich--drei td:last-child { font-weight: 600; }
/* Untereinander schon bis 767 px (vier Spalten sind enger als die zweispaltigen Vergleiche der Leistungsseiten, die erst
   bis 599 px stapeln): dieselben Regeln wie dort, statt der Spalte ein blauer Kasten je Zeile */
@media (max-width: 767px) {
  .xm .vergleich--drei table { min-width: 0; table-layout: auto; }
  .xm .vergleich--drei table, .xm .vergleich--drei tbody, .xm .vergleich--drei tr, .xm .vergleich--drei th, .xm .vergleich--drei td { display: block; }
  .xm .vergleich--drei colgroup { display: none; }
  .xm .vergleich--drei thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .xm .vergleich--drei tbody tr { padding: var(--s-16) 0; border-top: 1px solid var(--navy-16); }
  .xm .vergleich--drei tbody th, .xm .vergleich--drei td { width: auto; padding: 0; border-top: 0; }
  .xm .vergleich--drei tbody th { margin-bottom: var(--s-8); }
  .xm .vergleich--drei td + td { margin-top: var(--s-12); }
  .xm .vergleich--drei td::before { content: attr(data-kopf); content: attr(data-kopf) / ""; display: block; font-size: var(--fs-small); font-weight: 700; color: var(--petrol); }
  .xm .vergleich--drei table::before { content: none; }
  .xm .vergleich--drei tbody tr:last-child > * { padding-bottom: 0; }
  .xm .vergleich--drei tbody tr:last-child td:last-child { padding-bottom: var(--s-12); }
  .xm .vergleich--drei td:last-child { padding: var(--s-12) var(--s-16); border-radius: var(--radius-10); background: var(--grad-panel); }
  .xm .vergleich--drei td:last-child::before { color: var(--orange); }
}
.xm .drei-wege .vorschlag-marke { margin-left: 0; }

/* ---------- Anfrage-Knopf unten in der blauen Spalte des Vergleichs ---------- */
.xm .vergleich--drei tfoot td { border-top: 0; padding-top: 0; padding-bottom: var(--s-24); }
@media (min-width: 768px) { .xm .vergleich--drei tbody tr:last-child > * { padding-bottom: var(--s-16); } }
@media (max-width: 767px) {
  .xm .vergleich--drei tfoot, .xm .vergleich--drei tfoot tr { display: block; }
  .xm .vergleich--drei tfoot td:not(.vergleich__aktion) { display: none; }
  .xm .vergleich--drei tfoot td.vergleich__aktion { margin-top: var(--s-8); padding: 0; background: none; }
  .xm .vergleich--drei tfoot td.vergleich__aktion::before { content: none; }
}

/* ---------- Wolken-Szenen der Äste („Wir sind zwar keine Engel, aber wir arbeiten in der Cloud“) ---------- */
/* ds-allow-hardcode:start: Illustration, Maße in Einheiten der viewBox (320 × 190), Laufzeiten der kleinen Bewegungen */
.xm .ast__szene { margin-bottom: var(--s-4); }
.xm .wb { display: block; width: 100%; height: auto; font-family: var(--font); }
.xm .wb-himmel { fill: var(--mist); }
.xm .wb-fern path { fill: var(--white); opacity: 0.9; animation: xm-wb-ziehen 9s ease-in-out infinite alternate; }
.xm .wb-wolke-rand circle { fill: var(--navy-16); }
.xm .wb-wolke-flaeche circle { fill: var(--white); }
.xm .wb-torso, .xm .wb-kopf { stroke: var(--white); stroke-width: 3; paint-order: stroke; }
.xm .wb-person--navy .wb-torso { fill: var(--navy-deep); }
.xm .wb-person--navy .wb-kopf { fill: var(--navy); }
.xm .wb-person--petrol .wb-torso, .xm .wb-person--petrol .wb-kopf { fill: var(--petrol); }
.xm .wb-gesicht circle { fill: var(--white); }
.xm .wb-gesicht path { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; }
.xm .wb-haare--dunkel { fill: var(--navy-deep); }
.xm .wb-haare--orange, .xm .wb-muetze, .xm .wb-kopfhoerer-muschel { fill: var(--orange); }
.xm .wb-kopfhoerer { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.xm .wb-brille { fill: none; stroke: var(--white-81); stroke-width: 1.6; }
.xm .wb-arm { fill: none; stroke-width: 7; stroke-linecap: round; }
.xm .wb-arm--navy { stroke: var(--navy-deep); }
.xm .wb-arm--petrol { stroke: var(--petrol); }
.xm .wb-hand--navy { fill: var(--navy); }
.xm .wb-hand--petrol { fill: var(--petrol); }
.xm .wb-rauch path {
  fill: none; stroke: var(--navy-32); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 6;
  animation: xm-rauch 1.4s linear infinite; animation-delay: calc(var(--i) * -0.35s);
}
.xm .wb-bein { fill: none; stroke: var(--navy-60); stroke-width: 3; stroke-linecap: round; }
.xm .wb-tafel { fill: var(--white); stroke: var(--navy-16); stroke-width: 2; }
.xm .wb-kurve { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; animation: xm-wb-zeichnen 4s ease-in-out infinite; }
.xm .wb-kurvenpunkt { fill: var(--orange); }
.xm .wb-tasse rect, .xm .wb-blatt rect { fill: var(--white); stroke: var(--navy-16); stroke-width: 1.5; }
.xm .wb-henkel, .xm .wb-dampf path { fill: none; stroke: var(--navy-32); stroke-width: 2; stroke-linecap: round; }
.xm .wb-dampf path { stroke-dasharray: 3 4; animation: xm-rauch 1.6s linear infinite; }
.xm .wb-blase rect, .xm .wb-blase > path:not(.wb-haken) { fill: var(--white); }
.xm .wb-blase { filter: drop-shadow(0 4px 6px var(--navy-16)); }
.xm .wb-punkt { fill: var(--navy); }
.xm .wb-haken { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.xm .wb-blase--1 { animation: xm-wb-blase 5s ease-in-out infinite; }
.xm .wb-blase--2 { animation: xm-wb-blase 5s ease-in-out -2.5s infinite; }
.xm .wb-pinsel { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 110; animation: xm-wb-malen 4.5s ease-in-out infinite; }
.xm .wb-farbe-petrol { fill: var(--petrol); }
.xm .wb-farbe-navy { fill: var(--navy); }
.xm .wb-farbtupfer circle:first-child { fill: var(--orange); }
.xm .wb-stift { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.xm .wb-blatt path { stroke: var(--navy-16); stroke-width: 2; stroke-linecap: round; }
.xm .wb-laptop rect { fill: var(--white); stroke: var(--navy-16); stroke-width: 2; }
.xm .wb-logo { fill: var(--orange); }
.xm .wb-hand { animation: xm-wb-tippen 0.32s ease-in-out infinite alternate; }
.xm .wb-hand--2 { animation-delay: -0.16s; }
.xm .wb-code rect { fill: var(--navy); }
.xm .wb-code text { font-size: 12px; font-weight: 700; fill: var(--orange); }
.xm .wb-code { animation: xm-wb-schweben 2.6s ease-in-out infinite alternate; }
.xm .wb-server rect { fill: var(--navy); }
.xm .wb-server path { stroke: var(--white-20); stroke-width: 2; }
.xm .wb-led { fill: var(--orange); animation: xm-wb-blinken 1.2s steps(2, jump-none) infinite; }
.xm .wb-led--2 { animation-duration: 0.9s; }
.xm .wb-led--3 { animation-duration: 1.6s; }
.xm .wb-balken rect { transform-box: fill-box; transform-origin: bottom; animation: xm-wb-wachsen 3s ease-in-out infinite alternate; }
.xm .wb-balken .wb-balken-1 { fill: var(--petrol); opacity: 0.6; }
.xm .wb-balken .wb-balken-2 { fill: var(--petrol); animation-delay: -1s; }
.xm .wb-balken .wb-balken-3 { fill: var(--orange); animation-delay: -2s; }
.xm .wb-pfeil { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.xm .wb-lupe circle { fill: var(--white); stroke: var(--navy); stroke-width: 3; }
.xm .wb-lupe path { stroke: var(--navy); stroke-width: 4; stroke-linecap: round; }
.xm .wb-jubel { transform-box: fill-box; animation: xm-wb-jubel 0.7s ease-in-out infinite alternate; }
.xm .wb-jubel--links { transform-origin: right bottom; }
.xm .wb-jubel--rechts { transform-origin: left bottom; animation-direction: alternate-reverse; }
.xm .wb-megafon path, .xm .wb-megafon rect { fill: var(--orange); }
.xm .wb-schall path { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; animation: xm-wb-pulsen 1.2s ease-in-out infinite; }
.xm .wb-schall .wb-schall--2 { animation-delay: 0.3s; }
.xm .wb-kamera rect { fill: var(--navy-deep); }
.xm .wb-linse { fill: var(--petrol); stroke: var(--white); stroke-width: 2; }
.xm .wb-blitz path { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; animation: xm-wb-blitz 3s linear infinite; }
.xm .wb-videokoerper { fill: var(--navy); }
.xm .wb-rec { fill: var(--orange); animation: xm-wb-blinken 1s steps(2, jump-none) infinite; }
.xm .wb-monitor > rect:first-child { fill: var(--navy-deep); }
.xm .wb-spur--1 { fill: var(--orange); }
.xm .wb-spur--2 { fill: var(--petrol); }
.xm .wb-spur--3 { fill: var(--white-35); }
.xm .wb-abspielkopf { stroke: var(--white); stroke-width: 2; animation: xm-wb-abspielen 3.2s linear infinite; }
@keyframes xm-wb-ziehen { to { transform: translateX(14px); } }
@keyframes xm-wb-zeichnen { 0% { stroke-dashoffset: 70; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes xm-wb-malen { 0% { stroke-dashoffset: 110; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes xm-wb-blase { 0%, 8% { opacity: 0; transform: translateY(4px); } 15%, 45% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; } }
@keyframes xm-wb-tippen { to { transform: translateY(-3px); } }
@keyframes xm-wb-schweben { to { transform: translateY(-8px); } }
@keyframes xm-wb-blinken { 0% { opacity: 1; } 100% { opacity: 0.25; } }
@keyframes xm-wb-wachsen { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
@keyframes xm-wb-jubel { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes xm-wb-pulsen { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes xm-wb-blitz { 0%, 82% { opacity: 0; } 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes xm-wb-abspielen { from { transform: translateX(0); } to { transform: translateX(64px); } }
@media (prefers-reduced-motion: reduce) {
  .xm .wb * { animation: none !important; }
}
/* ds-allow-hardcode:end */

/* ---------- Fächer mit Leistungsseite als Link, Etikett „Viele Köpfe, ein Pool“ springt zum Pool ---------- */
.xm a.chip { gap: var(--s-8); text-decoration: none; transition: background-color var(--dur-2) linear, color var(--dur-2) linear; }
.xm a.chip .icon { width: 0.85em; height: 0.85em; color: var(--orange); transition: color var(--dur-2) linear; }
.xm a.chip:hover, .xm a.chip:focus-visible { background: var(--navy); color: var(--white); }
.xm a.chip:hover .icon, .xm a.chip:focus-visible .icon { color: var(--white); }
.xm .koepfe__etiketten a { display: inline-flex; align-items: center; gap: var(--s-8); color: inherit; text-decoration: none; pointer-events: auto; }
.xm .koepfe__etiketten a .icon { color: var(--orange); }
.xm .koepfe__etiketten li:has(> a) { transition: background-color var(--dur-2) linear, color var(--dur-2) linear; }
.xm .koepfe__etiketten li:has(> a:hover), .xm .koepfe__etiketten li:has(> a:focus-visible) { background: var(--navy); color: var(--white); }
.xm .koepfe__etiketten li:has(> a:hover) .icon { color: var(--white); }

/* =========================================================
   Neuaufbau 27.10.2026 (Briefing warum-x-mind-neuaufbau.md)
   ========================================================= */

/* Offene Punkte nur im Prototyp sichtbar markieren; bau.py --theme entfernt diesen Block und bricht ab, solange
   noch ein Element mit der Klasse „offen“ im Inhalt steht */

/* Hero: Beweis-Leiste (Fakten in einer Zeile, umbrechen nur zwischen den Fakten) */
.xm .hero__beweis > span { display: grid; gap: var(--s-4); }
.xm .hero__fakten { color: var(--navy); font-weight: 600; }
.xm .hero__fakten span { white-space: nowrap; }

/* Sechs Gründe: drei mal zwei Karten auf dunklem Grund, die erste in Orange */
/* ds-allow-hardcode:start: Innenabstände und Zahlengrößen fließend wie .stimme-karte und .kd-gross */
.xm .gruende__liste { list-style: none; counter-reset: grund; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-20); }
.xm .grund {
  counter-increment: grund; display: flex; flex-direction: column; gap: var(--s-12); padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--radius-20); background: var(--white-10); box-shadow: inset 0 0 0 1px var(--white-20);
}
.xm .grund::before { content: counter(grund, decimal-leading-zero); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; color: var(--orange); }
.xm .grund .titel-4 { color: var(--white); text-wrap: balance; }
.xm .grund p { color: var(--white-81); line-height: 1.6; }
.xm .grund .weil { margin-top: auto; color: var(--white); border-top-color: var(--white-20); }
.xm .grund--stark { background: var(--orange); box-shadow: var(--shadow-layer); }
.xm .grund--stark::before, .xm .grund--stark p, .xm .grund--stark .weil .icon { color: var(--white); }
.xm .grund--stark .weil { border-top-color: var(--white-35); }
/* ds-allow-hardcode:end */

/* Pool: zwei Plus-Zeilen unter der Lead */
.xm .pool__plus { list-style: none; display: grid; gap: var(--s-12); max-width: 62ch; text-align: left; font-size: var(--fs-small); line-height: 1.6; color: var(--petrol); }
.xm .pool__plus li { display: flex; gap: var(--s-8); align-items: flex-start; }
.xm .pool__plus .icon { flex: none; margin-top: 0.3em; color: var(--orange); }
.xm .pool__plus b { color: var(--navy); }

/* Beweis: Kennzahlen (dunkle Karte wie die Kennzahlen der Startseite), Logo-Wand nach Branchen, Stimmen, Hinweis */
/* ds-allow-hardcode:start: Innenabstand und Zahlengröße der Kennzahlen fließend */
.xm .beweis__zahlen {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-24);
  padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-30); background: var(--grad-panel); box-shadow: var(--shadow-layer);
}
.xm .beweis__zahl { display: grid; align-content: start; gap: var(--s-8); }
.xm .beweis__zahl + .beweis__zahl { padding-left: var(--s-24); border-left: 1px solid var(--white-20); }
.xm .beweis__zahl b { font-size: clamp(1.6rem, 0.9rem + 1.6vw, 2.6rem); line-height: 1.05; letter-spacing: var(--track-display); color: var(--white); font-variant-numeric: tabular-nums; }
.xm .beweis__zahl span { font-size: var(--fs-small); line-height: 1.5; color: var(--white-81); }
/* ds-allow-hardcode:end */
.xm .beweis__unterzeile { max-width: 62ch; margin: var(--s-56) auto 0; text-align: center; text-wrap: balance; font-size: var(--fs-lead); line-height: 1.55; color: var(--petrol); }
/* Logo-Wand wie auf der Startseite (start.css: .logos, .logos__reihe, .logos__kachel, Markup aus teile/abschnitte/partner.php),
   ohne Laufband: alle Kacheln in einer Reihe, die je nach Breite gleichmäßig umbricht. Kachelbreite und Logogröße je Logo im Markup. */
/* So breit wie die Logo-Wand der Startseite (--container-breit-logos), über den Inhaltsbereich hinaus; 100vw zählt die
   Bildlaufleiste mit, deshalb ein Abstand mehr */
.xm .beweis .logos {
  --logos-breite: min(100vw - 2 * var(--gutter) - var(--s-16), var(--container-breit-logos));
  width: var(--logos-breite); margin: var(--s-32) calc((100% - var(--logos-breite)) / 2) 0;
}
.xm .logos__reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-20); }
.xm .logos__kachel {
  display: flex; flex-direction: column; justify-content: center; width: var(--kachel-breite, auto); max-width: 100%;
  padding: var(--s-20); border-radius: var(--radius-10); background: var(--grad-tile);
}
.xm .logos__logo { align-self: center; max-width: 100%; text-align: center; }
.xm .logos__logo a { display: inline-block; }
.xm .logos__kachel .logos__bild { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; object-fit: contain; }
.xm .beweis__agenturen { margin-top: var(--s-24); text-align: center; font-size: var(--fs-small); color: var(--petrol); }
/* Kundenstimmen in dunklen Kästen wie auf der Kontaktseite (kontakt.css .kd-stimmen), drei Spalten */
.xm .kd-stimmen { list-style: none; columns: 3 300px; column-gap: var(--s-20); margin-top: var(--s-56); }
.xm .kd-stimmen > li { break-inside: avoid; margin-bottom: var(--s-20); }
.xm .kd-stimmen__karte { display: grid; gap: var(--s-12); margin: 0; padding: var(--s-24); border-radius: var(--radius-20); background: var(--grad-panel); color: var(--white); }
/* ds-allow-hardcode:start: Anführungszeichen als Schmuck, Größe wie auf der Kontaktseite */
.xm .kd-stimmen__karte::before { content: "\201C"; display: block; height: 0.42em; font-size: 3.4rem; line-height: 0.85; font-weight: 700; color: var(--orange); }
/* ds-allow-hardcode:end */
.xm .kd-stimmen__karte blockquote p { font-size: 0.95rem; line-height: 1.6; color: var(--white); text-wrap: pretty; }
.xm .kd-stimmen__karte figcaption { font-size: var(--fs-mini); font-weight: 700; color: var(--white-81); }
.xm .beweis__fuss { display: grid; justify-items: center; gap: var(--s-24); margin-top: var(--s-56); text-align: center; }
/* Hinweis als Text in der Hausschrift, ohne Fläche (Inhaber 27.10.2026: „Text im CD“) */
.xm .beweis__hinweis { max-width: 46ch; font-size: var(--fs-lead); font-weight: 600; line-height: 1.45; text-wrap: balance; color: var(--navy); }

/* Person: Einstieg als Zitat-Zeile, Schlusszeile über die ganze Breite, viertes Etikett am Porträt */
/* ds-allow-hardcode:start: Zeilengrößen fließend, Strich wie .stimme-karte::before, Lage des vierten Etiketts */
.xm .person__einstieg { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 700; line-height: 1.1; letter-spacing: var(--track-display); }
.xm .person__einstieg::before { content: ""; display: block; width: 32px; height: 4px; margin-bottom: var(--s-16); border-radius: 2px; background: var(--orange); }
.xm .person__schluss {
  grid-column: 1 / -1; justify-self: center; max-width: 30ch; padding-top: var(--s-40); border-top: 1px solid var(--navy-08);
  text-align: center; text-wrap: balance; font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); font-weight: 700; line-height: 1.15;
  letter-spacing: var(--track-display); color: var(--navy);
}
.xm .person__x { color: var(--orange); }
.xm .portrait__etiketten li:nth-child(4) { top: 74%; right: 0; animation-delay: 0.75s; }
/* ds-allow-hardcode:end */

@media (max-width: 1024px) {
  .xm .gruende__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xm .beweis__zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-32); }
  .xm .beweis__zahl:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 767px) {
  .xm .gruende__liste { grid-template-columns: minmax(0, 1fr); }
  .xm .beweis__zahlen { gap: var(--s-24) var(--s-16); }
  .xm .beweis__zahl + .beweis__zahl { padding-left: 0; border-left: 0; }
  .xm .person__schluss { padding-top: var(--s-32); }
  /* Handy: drei kleinere Logo-Kacheln je Reihe statt der festen Kachelbreiten (sonst 17 Reihen) */
  .xm .logos__reihe { gap: var(--s-12); }
  .xm .logos__kachel { width: calc((100% - 2 * var(--s-12)) / 3); padding: var(--s-12); }
}