/* X mind Kontaktseite, erzeugt mit _wordpress/kontakt/vorschlag/bau.py --theme aus dem Prototyp (Idee 1). Nicht von Hand ändern. */
/* =========================================================
   X mind – Entwurf Kontaktseite (Prototyp, 27.10.2026): drei Ideen
   Baut auf den Theme-Dateien der Leistungsseiten auf (rahmen.css, leistung-basis.css, leistungen.css), nur Tokens.
   ========================================================= */


.xm .kd-gross { font-size: clamp(3rem, 2rem + 3.2vw, 5.25rem); line-height: 1; letter-spacing: var(--track-display); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Erreichbarkeit: Punkt pulsiert, solange offen ist */
.xm .kd-status { display: inline-flex; align-items: center; gap: var(--s-8); padding: 6px 14px 6px 12px; border-radius: var(--radius-pill); background: var(--white); color: var(--navy); font-size: var(--fs-small); font-weight: 700; box-shadow: var(--shadow-nav); }
.xm .kd-status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--orange); box-shadow: 0 0 0 0 var(--orange-16); animation: kd-puls 1.8s var(--ease-out) infinite; }
.xm .kd-status[data-zu]::before { background: var(--navy-32); animation: none; }
.xm .kd-status--dunkel { background: var(--white-10); color: var(--white); box-shadow: none; }
@keyframes kd-puls { 0% { box-shadow: 0 0 0 0 var(--orange-16); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* =========================================================
   Idee 1: Direkter Draht
   ========================================================= */
.xm .kd-hero { position: relative; padding: calc(var(--kopf-h) + var(--s-72)) 0 var(--s-56); background: var(--surface); overflow: hidden; }
.xm .kd-hero__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
/* Breite wie der Kopf der Leistungsseiten (.anatomie__raster in leistung-basis.css): bündig mit Logo und Menüknopf */
/* ds-allow-hardcode:start: Werte aus .anatomie__raster übernommen */
@media (min-width: 1025px) { .xm .huelle.kd-hero__raster { width: min(var(--container-wide) - 20px, 100% - 300px); } }
@media (min-width: 768px) and (max-width: 1024px) { .xm .huelle.kd-hero__raster { width: calc(100% - 100px); } }
@media (max-width: 767px) { .xm .huelle.kd-hero__raster { width: calc(100% - 50px); } }
/* ds-allow-hardcode:end */
.xm .kd-hero__text { display: grid; gap: var(--s-32); }
.xm .kd-hero__text .titel-display + .lead { margin-top: var(--s-8); }
.xm .kd-tag { color: var(--orange); }

/* Illustration „Telefonat“: dieselben Figuren wie auf „Warum X mind?“ (szenen.person), Bewegung in Schleife */
/* ds-allow-hardcode:start: Maße und Strichstärken in Einheiten der viewBox (480 × 470), Laufzeiten der Schleife */
.xm .kd-telefonat { position: relative; width: min(100%, 580px); justify-self: end; display: grid; gap: var(--s-16); }
.xm .kd-telefonat__bild { position: relative; }
.xm .kd-t { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.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: 2.6; stroke-linecap: round; }
.xm .wb-haare--dunkel { fill: var(--navy-deep); }
.xm .wb-haare--orange { fill: var(--orange); }
.xm .wb-arm { fill: none; stroke-linecap: round; }
.xm .kd-t-arm { stroke-width: 17; }
.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 .kd-t-telefon { fill: var(--orange); stroke: var(--white); stroke-width: 2.5; }
.xm .kd-t-ring { fill: none; stroke: var(--orange); stroke-width: 4; }
.xm .kd-t-laptop rect { fill: var(--navy); stroke: var(--white); stroke-width: 3; }
.xm .kd-t-laptop circle { fill: var(--orange); }
.xm .kd-t-leitung { fill: none; stroke: var(--navy-32); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; }
.xm .kd-t-signal { fill: var(--orange); offset-path: path("M198 248C218 176 254 170 274 236"); offset-rotate: 0deg; animation: kd-t-leitung 2.6s ease-in-out infinite; }
.xm .kd-t-signal--zurueck { fill: var(--petrol); animation-direction: reverse; animation-delay: -1.3s; }
.xm .kd-t-welle path { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; animation: kd-t-welle 1.6s ease-out infinite; }
.xm .kd-t-welle .kd-t-welle--2 { animation-delay: 0.25s; }
.xm .kd-t-welle--rechts path { animation-delay: 0.8s; }
.xm .kd-t-welle--rechts .kd-t-welle--2 { animation-delay: 1.05s; }
.xm .kd-t-figur { animation: kd-t-nicken 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.xm .kd-t-figur--wir { animation-delay: -1.2s; }
.xm .kd-t-blase rect, .xm .kd-t-blase path { fill: var(--white); }
.xm .kd-t-blase { filter: drop-shadow(0 6px 10px var(--navy-16)); animation: kd-t-blase 9s ease-in-out infinite; }
.xm .kd-t-blase text { fill: var(--navy); font-size: 19px; font-weight: 700; }
.xm .kd-t-blase--wir { animation-delay: -6s; }
.xm .kd-t-termin { filter: drop-shadow(0 8px 14px var(--navy-16)); animation: kd-t-blase 9s ease-in-out -3s infinite; }
.xm .kd-t-termin__karte { fill: var(--white); }
.xm .kd-t-termin__kopf { fill: var(--orange); }
.xm .kd-t-termin text { fill: var(--white); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.xm .kd-t-termin__haken { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; animation: kd-t-haken 9s ease-in-out -3s infinite; }
@keyframes kd-t-leitung { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes kd-t-welle { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kd-t-nicken { to { transform: translateY(-4px) rotate(-1deg); } }
@keyframes kd-t-blase { 0%, 3% { opacity: 0; transform: translateY(8px); } 8%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes kd-t-haken { 0%, 5% { stroke-dashoffset: 70; } 14%, 100% { stroke-dashoffset: 0; } }
/* ds-allow-hardcode:end */
.xm .kd-telefonat__etiketten { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.xm .kd-telefonat__etiketten li { position: absolute; top: 88%; display: inline-flex; align-items: center; gap: var(--s-8); min-height: 34px; padding: 0 var(--s-16); border-radius: var(--radius-pill); background: var(--white); color: var(--navy); font-size: var(--fs-small); font-weight: 700; box-shadow: var(--shadow-nav), 0 0 0 1px var(--navy-08); transform: translateX(-50%); white-space: nowrap; }
.xm .kd-telefonat__etiketten li:nth-child(1) { left: 25%; }
.xm .kd-telefonat__etiketten li:nth-child(2) { left: 74%; }
.xm .kd-punkt { width: 9px; height: 9px; border-radius: var(--radius-round); background: var(--orange); }
.xm .kd-telefonat__name { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-8) var(--s-12); font-size: var(--fs-small); color: var(--petrol); text-align: center; }
.xm .kd-telefonat__name b { color: var(--navy); }

.xm .kd-wege { padding: var(--s-16) 0 var(--pad-section); }
.xm .kd-wege__liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-20); }
.xm .kd-weg { position: relative; container-type: inline-size; display: grid; align-content: start; gap: var(--s-12); height: 100%; padding: clamp(24px, 3vw, 40px); padding-right: calc(clamp(24px, 3vw, 40px) + 48px); border-radius: var(--radius-30); color: var(--navy); text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.xm .kd-weg:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.xm .kd-weg:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.xm .kd-weg--termin { background: var(--orange); color: var(--white); }
.xm .kd-weg--tel { background: var(--grad-panel); color: var(--white); }
.xm .kd-weg--mail { background: var(--white); box-shadow: 0 0 0 1px var(--navy-16); }
.xm .kd-weg__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s-8); border-radius: var(--radius-round); background: var(--white); color: var(--orange); font-size: 24px; }
.xm .kd-weg--tel .kd-weg__icon { background: var(--orange); color: var(--white); }
.xm .kd-weg--mail .kd-weg__icon { background: var(--navy); color: var(--white); }
.xm .kd-weg__titel { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: var(--track-sub); font-weight: 600; }
/* Telefon und Mail immer in einer Zeile: die Schrift richtet sich nach der Kachelbreite (11cqi passt für „info@x-mind.de“) */
.xm .kd-weg__wert { font-size: min(clamp(1.35rem, 1rem + 1.1vw, 1.9rem), 11cqi); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xm .kd-weg__text { line-height: 1.5; }
.xm .kd-weg__mehr { justify-self: start; margin-top: var(--s-8); font-size: var(--fs-small); font-weight: 600; opacity: 0.9; }
.xm .kd-weg__pfeil { position: absolute; top: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-round); background: var(--white-20); transition: transform var(--dur-2) var(--ease-out); }
.xm .kd-weg--mail .kd-weg__pfeil { background: var(--orange); color: var(--white); }
.xm .kd-weg:hover .kd-weg__pfeil { transform: rotate(45deg); }

.xm .kd-stimme { padding: var(--pad-section) 0; }
.xm .kd-stimme__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-24) var(--s-40); margin-bottom: var(--s-40); }
.xm .kd-zahlen { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-16) clamp(32px, 4vw, 64px); }
.xm .kd-zahlen li { display: grid; gap: var(--s-4); }
.xm .kd-zahlen span { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.xm .kd-stimmen { list-style: none; columns: 3 300px; column-gap: var(--s-20); }
.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) var(--s-24) var(--s-24); border-radius: var(--radius-20); background: var(--grad-panel); color: var(--white); }
.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); }
.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 .kd-stimme__mehr { margin-top: var(--s-16); }

.xm .kd-daumen { display: none; }

/* =========================================================
   Schmaler
   ========================================================= */
@media (max-width: 1024px) {
  .xm .kd-hero__raster, .xm .kd-assi__raster, .xm .kd-buehne__raster { grid-template-columns: minmax(0, 1fr); }
  .xm .kd-telefonat { justify-self: center; }
  .xm .kd-wege__liste { grid-template-columns: minmax(0, 1fr); }
  .xm .kd-assi__kopf { position: static; }
  .xm .kd-buehne__person { justify-self: start; grid-template-columns: 120px minmax(0, 1fr); align-items: center; width: auto; }
  .xm .kd-buehne__person img { border-radius: var(--radius-round); aspect-ratio: 1; }
  .xm .kd-buehne__raster { grid-template-rows: auto auto; }
  .xm .kd-buehne__person { order: -1; }
  .xm .kd-fakten__liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .xm .kd-optionen--drei, .xm .kd-felder { grid-template-columns: minmax(0, 1fr); }
  .xm .kd-optionen--drei .kd-option { grid-template-columns: 44px minmax(0, 1fr); }
  .xm .kd-daumen { position: fixed; left: var(--s-12); right: var(--s-12); bottom: var(--kd-daumen-unten, var(--s-12)); z-index: 9400; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); padding: 6px; border-radius: var(--radius-pill); background: var(--white); box-shadow: var(--shadow-lift), 0 0 0 1px var(--navy-08); }
  .xm .kd-daumen a { display: inline-flex; justify-content: center; align-items: center; gap: var(--s-8); min-height: 48px; border-radius: var(--radius-pill); background: var(--navy); color: var(--white); font-weight: 700; text-decoration: none; }
  .xm .kd-daumen a.kd-daumen__termin { background: var(--orange); }
  /* Platz unter dem Fuß, damit die Leiste Impressum und Datenschutz nicht verdeckt */
  body.seite-kontakt .xm .fuss { padding-bottom: calc(var(--kd-daumen-unten, var(--s-12)) + 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .xm .kd-band__spur, .xm .kd-status::before, .xm .kd-t *, .xm .kd-t-figur { animation: none !important; }
  .xm .kd-t-signal { display: none; }
  .xm .kd-weg, .xm .kd-weg__pfeil { transition: none; }
}