/* ═══════════════════════════════════════════════════════════════════════
   WELT: KORDEL — die Arbeitsjacke
   Matter nachtblauer Stoff (Blau als Material), verdeckte Kanäle, EINE
   Signalkordel als einziges Bedienelement, Steppnähte, Ösen als Beschläge.
   Quelle: Impeccable-Wurf 3e205f82, Karte „Zugkordel", übersetzt in den
   Kulturraum von Handwerk, Praxis und Verein.

   Kleidet das gemeinsame .wos-Vokabular neu ein. Alles hängt an
   :root[data-welt="kordel"], damit auch Header und Footer erfasst sind.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/wp-content/uploads/2026/08/ArchivoNarrow-Variable-latin.woff2') format('woff2');
}

:root[data-welt="kordel"] {
  --zug-stoff: #0b1430;
  --zug-stoff-tief: #060c1f;
  --zug-stoff-hoch: #121d42;
  --zug-stoff-hell: #f3f1ea;
  --zug-naht: #2b3a63;
  --zug-naht-hell: #45588c;
  --zug-kordel: #f5b638;
  --zug-kordel-tief: #c98a15;
  --zug-kordel-text: #8a5c00;
  --zug-marke: #5b93ff;
  --zug-text: #eff3fc;
  --zug-text-leise: #aab6d2;
  --zug-dunkel: #0b1430;
  --zug-dunkel-leise: #4d5a7a;
  --zug-display: 'Archivo Narrow', 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* ── Grundfläche und Chrome ─────────────────────────────────────────── */

:root[data-welt="kordel"] body {
  background: var(--zug-stoff) !important;
  color: var(--zug-text) !important;
}

:root[data-welt="kordel"] .wos-hbar {
  background: rgba(6, 12, 31, 0.88) !important;
  border-bottom: 1px solid var(--zug-naht) !important;
  box-shadow: none !important;
}
:root[data-welt="kordel"] .wos-hbar::after {
  background: repeating-linear-gradient(90deg, var(--zug-kordel) 0 8px, transparent 8px 16px) !important;
  opacity: 0.5;
}
:root[data-welt="kordel"] .wos-wordmark { color: var(--zug-text) !important; }
:root[data-welt="kordel"] .wos-wordmark span {
  background: none !important; -webkit-background-clip: border-box !important;
  background-clip: border-box !important; color: var(--zug-kordel) !important;
}
:root[data-welt="kordel"] .wos-tagline {
  background: transparent !important; border-color: var(--zug-naht) !important;
  color: var(--zug-text-leise) !important; box-shadow: none !important;
}
:root[data-welt="kordel"] .wos-tagline .wos-dot,
:root[data-welt="kordel"] .wos-tagline .wos-dot::before,
:root[data-welt="kordel"] .wos-tagline .wos-dot::after { background: var(--zug-kordel) !important; filter: none !important; }

:root[data-welt="kordel"] .wos-hbar .wp-block-navigation__container { background: transparent !important; border: 0 !important; box-shadow: none !important; }
:root[data-welt="kordel"] .wos-hbar .wp-block-navigation-item__content {
  color: var(--zug-text-leise) !important; background: transparent !important;
  font-family: var(--zug-display) !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; font-size: 0.82rem !important; border-radius: 0 !important;
}
:root[data-welt="kordel"] .wos-hbar .wp-block-navigation-item__content:hover,
:root[data-welt="kordel"] .wos-hbar .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--zug-kordel) !important; background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--zug-kordel) !important;
}
:root[data-welt="kordel"] .wos-hbar .wp-block-navigation__responsive-container-open,
:root[data-welt="kordel"] .wos-hbar .wp-block-navigation__responsive-container-close { color: var(--zug-kordel) !important; }
:root[data-welt="kordel"] .wos-hbar .wp-block-navigation__responsive-container.is-menu-open { background: var(--zug-stoff-tief) !important; }
:root[data-welt="kordel"] .wos-hbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--zug-text) !important; }

:root[data-welt="kordel"] .wos-cta-link {
  background: var(--zug-kordel) !important; border: 1px solid var(--zug-kordel) !important;
  color: var(--zug-dunkel) !important; border-radius: 2px !important; box-shadow: none !important;
  font-family: var(--zug-display) !important; letter-spacing: 0.16em !important;
  text-transform: uppercase !important; font-weight: 600 !important;
}
:root[data-welt="kordel"] .wos-cta-link:hover { background: #ffd070 !important; border-color: #ffd070 !important; transform: none !important; }
:root[data-welt="kordel"] .wos-lang {
  background: transparent !important; border-color: var(--zug-naht) !important;
  color: var(--zug-text-leise) !important; border-radius: 2px !important;
}
:root[data-welt="kordel"] .wos-lang:hover { border-color: var(--zug-kordel) !important; color: var(--zug-kordel) !important; }

:root[data-welt="kordel"] footer .wp-block-group { background: var(--zug-stoff-tief) !important; }
:root[data-welt="kordel"] .wos-footer-brand,
:root[data-welt="kordel"] .wos-footer-heading {
  font-family: var(--zug-display) !important; letter-spacing: 0.16em !important;
  text-transform: uppercase !important; color: var(--zug-kordel) !important;
}
:root[data-welt="kordel"] .wos-footer-wordmark span {
  color: var(--zug-kordel) !important; background: none !important; -webkit-text-fill-color: var(--zug-kordel) !important;
}
:root[data-welt="kordel"] .wos-footer-cta {
  background: var(--zug-kordel) !important; border-color: var(--zug-kordel) !important;
  color: var(--zug-dunkel) !important; border-radius: 2px !important;
}

/* ── Grundtypografie ────────────────────────────────────────────────── */

:root[data-welt="kordel"] .wos {
  background: var(--zug-stoff); color: var(--zug-text); line-height: 1.68;
  position: relative; overflow: hidden;
}
:root[data-welt="kordel"] .wos::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background:
    repeating-linear-gradient(58deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-58deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 6px);
}
:root[data-welt="kordel"] .wos > * { position: relative; z-index: 1; }

:root[data-welt="kordel"] .wos-inner { max-width: 1180px; padding-left: 1.6rem; padding-right: 1.6rem; }

:root[data-welt="kordel"] .wos-hero h1,
:root[data-welt="kordel"] .wos-h2,
:root[data-welt="kordel"] .wos-final h2,
:root[data-welt="kordel"] .wos-card h3,
:root[data-welt="kordel"] .wos-stufe h3,
:root[data-welt="kordel"] .wos-extra h3 {
  font-family: var(--zug-display); font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.02; color: var(--zug-text); text-wrap: balance;
}
:root[data-welt="kordel"] .wos-hero h1 { font-size: clamp(2.9rem, 7.4vw, 6.1rem); text-transform: uppercase; }
:root[data-welt="kordel"] .wos-hero h1 em { color: var(--zug-kordel); }
:root[data-welt="kordel"] .wos-h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem); text-transform: uppercase; text-align: left;
}
:root[data-welt="kordel"] .wos-lead {
  text-align: left; margin-left: 0; max-width: 58ch; color: var(--zug-text-leise);
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
}
:root[data-welt="kordel"] .wos-sub { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos p { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos strong { color: var(--zug-text); }
:root[data-welt="kordel"] .wos-card h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: 0.02em; }

/* ── Hero ───────────────────────────────────────────────────────────── */

:root[data-welt="kordel"] .wos-hero {
  background: none; border-radius: 0;
  padding: clamp(2.4rem, 4.2vw, 4.4rem) 1.6rem clamp(3.5rem, 6vw, 5.5rem);
}
:root[data-welt="kordel"] .wos-hero-blob { display: none; }
:root[data-welt="kordel"] .wos-hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 4.5rem); }

/* ── Hero-Effekt: Steppnaht (reines CSS, kein JS) ───────────────────── */
/* Zwei gestrichelte Nähte in Kordel-Gelb ziehen sich langsam durch den
   Hero — wie eine Nähmaschine, die den Stoff zusammennäht. */
:root[data-welt="kordel"] .wos-hero::before,
:root[data-welt="kordel"] .wos-hero::after {
  content: ""; position: absolute; left: -8%; right: -8%; height: 2px;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--zug-kordel) 0 11px, transparent 11px 22px);
}
:root[data-welt="kordel"] .wos-hero::before { top: 26%; transform: rotate(-3.5deg); opacity: 0.4; }
:root[data-welt="kordel"] .wos-hero::after { top: 68%; transform: rotate(2.5deg); opacity: 0.28; }

@media (prefers-reduced-motion: no-preference) {
  :root[data-welt="kordel"] .wos-hero::before { animation: kordel-naht 9s linear infinite; }
  :root[data-welt="kordel"] .wos-hero::after { animation: kordel-naht 13s linear infinite reverse; }
}
@keyframes kordel-naht { to { background-position-x: 44px; } }

@media (max-width: 720px) {
  :root[data-welt="kordel"] .wos-hero::before { opacity: 0.22; }
  :root[data-welt="kordel"] .wos-hero::after { opacity: 0.16; }
}

:root[data-welt="kordel"] .wos-mock {
  background: var(--zug-stoff-hoch); border: 1px solid var(--zug-naht-hell); border-radius: 3px;
  box-shadow: 0 34px 80px rgba(3, 7, 20, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: none !important; animation: none !important;
}
:root[data-welt="kordel"] .wos-mock-bar { background: var(--zug-stoff-tief); border-bottom-color: var(--zug-naht); }
:root[data-welt="kordel"] .wos-mock-bar i { background: var(--zug-naht-hell); }
:root[data-welt="kordel"] .wos-mock-bar i:first-child { background: var(--zug-kordel); }
:root[data-welt="kordel"] .wos-mock--1 { width: 68%; left: 0; top: 12%; }
:root[data-welt="kordel"] .wos-mock--2 { width: 50%; right: 0; top: 0; }
:root[data-welt="kordel"] .wos-mock--3 { width: 46%; right: 10%; bottom: 0; }

/* Die Kordel hält die Flächen — sie läuft dahinter, nicht darüber */
:root[data-welt="kordel"] .wos-kordel-linie { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
:root[data-welt="kordel"] .wos-kordel-linie svg { width: 100%; height: 100%; display: block; overflow: visible; }
:root[data-welt="kordel"] .wos-kordel-linie path { fill: none; stroke: var(--zug-kordel); stroke-width: 1.5; stroke-linecap: round; }
:root[data-welt="kordel"] .wos-kordel-linie circle { fill: var(--zug-kordel); }

/* Auffalten beim Laden — Startzustand setzt ausschließlich das JS */
:root[data-welt="kordel"] .wos-hero-collage .wos-mock { transition: transform 1.05s cubic-bezier(0.16, 0.9, 0.24, 1), opacity 0.7s ease; }
:root[data-welt="kordel"] .wos-hero-collage.is-flach .wos-mock { transform: perspective(1400px) rotateX(72deg) translateY(24px) !important; opacity: 0.25; }
:root[data-welt="kordel"] .wos-hero-collage.is-flach .wos-mock--2 { transition-delay: 0.09s; }
:root[data-welt="kordel"] .wos-hero-collage.is-flach .wos-mock--3 { transition-delay: 0.17s; }

/* Preisriegel */
:root[data-welt="kordel"] .wos-riegel { border-top-color: var(--zug-naht); }
:root[data-welt="kordel"] .wos-riegel-zahl {
  font-family: var(--zug-display); font-weight: 600; color: var(--zug-text);
  letter-spacing: 0.01em; font-size: clamp(1.9rem, 3vw, 2.5rem);
}
:root[data-welt="kordel"] .wos-riegel-zahl span {
  color: var(--zug-text-leise); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.44em;
}
:root[data-welt="kordel"] .wos-riegel-notiz strong { color: var(--zug-kordel); }

/* Vertrauenszeile als Nahtstiche */
:root[data-welt="kordel"] .wos-trust { gap: 0.6rem 1.8rem; }
:root[data-welt="kordel"] .wos-trust li {
  font-family: var(--zug-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--zug-text-leise); gap: 0.55rem;
}
:root[data-welt="kordel"] .wos-trust li::before {
  content: ""; width: 14px; height: 1px; background: var(--zug-kordel); margin-right: 0;
}

/* ── Buttons: der Zug ist die Aktion ────────────────────────────────── */

:root[data-welt="kordel"] .wos-btn,
:root[data-welt="kordel"] .wos-form .wos-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: var(--zug-kordel) !important; color: var(--zug-dunkel) !important;
  border: 1px solid var(--zug-kordel); border-radius: 2px;
  font-family: var(--zug-display); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  padding: 1.05rem 2.4rem; box-shadow: none;
  transition: background 0.28s ease, letter-spacing 0.28s ease;
}
:root[data-welt="kordel"] .wos-btn::before,
:root[data-welt="kordel"] .wos-btn::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; border: 1px solid var(--zug-dunkel); background: var(--zug-stoff);
  transform: translateY(-50%);
}
:root[data-welt="kordel"] .wos-btn::before { left: 9px; }
:root[data-welt="kordel"] .wos-btn::after { right: 9px; }
:root[data-welt="kordel"] .wos-btn:hover {
  background: #ffd070 !important; border-color: #ffd070; transform: none; letter-spacing: 0.23em; box-shadow: none;
}
:root[data-welt="kordel"] .wos-btn--ghost {
  background: transparent !important; color: var(--zug-kordel) !important; border-color: var(--zug-kordel);
}
:root[data-welt="kordel"] .wos-btn--ghost::before,
:root[data-welt="kordel"] .wos-btn--ghost::after { border-color: var(--zug-kordel); background: transparent; }
:root[data-welt="kordel"] .wos-btn--ghost:hover { background: var(--zug-kordel) !important; color: var(--zug-dunkel) !important; }
:root[data-welt="kordel"] .wos-final .wos-btn--ghost { color: var(--zug-kordel) !important; border-color: var(--zug-kordel); }

/* Textlinks mit nachziehender Kordel */
:root[data-welt="kordel"] .wos-card-link,
:root[data-welt="kordel"] .wos-ref-domain {
  display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none;
  font-family: var(--zug-display); font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--zug-kordel);
}
:root[data-welt="kordel"] .wos a { color: var(--zug-marke); }
:root[data-welt="kordel"] .wos :focus-visible { outline: 2px solid var(--zug-kordel); outline-offset: 3px; }

/* ── Sektionen: Rhythmus über Flächenwechsel ────────────────────────── */

:root[data-welt="kordel"] .wos-section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
:root[data-welt="kordel"] .wos-section--soft { background: var(--zug-stoff-tief); }
:root[data-welt="kordel"] .wos-section--soft::before,
:root[data-welt="kordel"] .wos-section--soft::after { display: none; }
:root[data-welt="kordel"] .wos-section--hell { background: var(--zug-stoff-hell); }
:root[data-welt="kordel"] .wos-section--hell .wos-h2,
:root[data-welt="kordel"] .wos-section--hell h3 { color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-section--hell p,
:root[data-welt="kordel"] .wos-section--hell .wos-lead { color: var(--zug-dunkel-leise); }
:root[data-welt="kordel"] .wos-section--hell strong { color: var(--zug-dunkel); }

/* Eine durchgehende Kordel bindet die Sektionen zusammen */
:root[data-welt="kordel"] .wos-section::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: max(1.6rem, calc(50% - 606px));
  width: 1px; background: rgba(245, 182, 56, 0.2); pointer-events: none;
}
:root[data-welt="kordel"] .wos-section::after {
  content: ""; position: absolute; top: 0; left: max(1.6rem, calc(50% - 606px));
  width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--zug-kordel); opacity: 0.55; pointer-events: none;
}

/* ── Karten und Stufen ──────────────────────────────────────────────── */

:root[data-welt="kordel"] .wos-card,
:root[data-welt="kordel"] .wos-stufe,
:root[data-welt="kordel"] .wos-voice {
  background: var(--zug-stoff-hoch); border: 1px solid var(--zug-naht);
  border-radius: 2px; box-shadow: none;
}
:root[data-welt="kordel"] .wos-card:hover { transform: translateY(-5px); border-color: var(--zug-kordel); box-shadow: none; }
:root[data-welt="kordel"] .wos-card p, :root[data-welt="kordel"] .wos-stufe p { color: var(--zug-text-leise); }

:root[data-welt="kordel"] .wos-step-num {
  background: none; color: var(--zug-kordel); font-family: var(--zug-display);
  width: auto; height: auto; border-radius: 0; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 0.8rem;
}
:root[data-welt="kordel"] .wos-step-num::before { content: "Schritt "; }
/* EN-Seiten (lang="en" via lightweight-seo): englisches Label (2026-08-14) */
:root[data-welt="kordel"][lang="en"] .wos-step-num::before { content: "Step "; }
:root[data-welt="kordel"] .wos-stufe-wer { color: var(--zug-text-leise); vertical-align: baseline; margin-left: 0.5rem; }
:root[data-welt="kordel"] .wos-spannung i { background: var(--zug-naht); }
:root[data-welt="kordel"] .wos-spannung i.an { background: var(--zug-kordel); }

/* ── Preis-Bühne ────────────────────────────────────────────────────── */

:root[data-welt="kordel"] .wos-card--highlight {
  background: #ffffff; border: 1px solid rgba(11, 20, 48, 0.14);
  /* harte Kante: die Welt kennt keine gerundeten Ecken, und ein kraeftiger
     Akzentrand auf abgerundeter Karte beisst sich (Detektor 2026-08-13) */
  border-top: 3px solid var(--zug-kordel); border-radius: 0;
  box-shadow: 0 34px 80px rgba(11, 20, 48, 0.13);
}
:root[data-welt="kordel"] .wos-card--highlight::after { display: none; }
:root[data-welt="kordel"] .wos-card--highlight h3 { color: var(--zug-dunkel); font-size: clamp(1.5rem, 2.4vw, 2rem); text-transform: uppercase; }
:root[data-welt="kordel"] .wos-card--highlight p { color: var(--zug-dunkel-leise); }
/* Kontrast-Fix 2026-08-14: Listen + strong erbten auf der WEISSEN Karte die
   Hell-auf-Dunkel-Farben (strong #eff3fc, li #aab6d2 — beides fiel durch AA).
   Betroffen: /automatisierung/ + /telefon-assistent/ (Preis-Karten). */
:root[data-welt="kordel"] .wos-card--highlight .wos-list li { color: var(--zug-dunkel-leise); }
:root[data-welt="kordel"] .wos-card--highlight strong { color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-price {
  font-family: var(--zug-display); font-weight: 600; color: var(--zug-dunkel);
  font-size: clamp(3.4rem, 8vw, 5.6rem); line-height: 0.92; margin: 1.4rem 0 0.2rem;
}
:root[data-welt="kordel"] .wos-price span {
  display: block; font-size: 0.24em; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--zug-dunkel-leise); margin-top: 0.5rem;
}
:root[data-welt="kordel"] .wos-price-plus {
  font-family: var(--zug-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600;
  color: var(--zug-dunkel); letter-spacing: 0.02em;
}
:root[data-welt="kordel"] .wos-price-plus span { color: var(--zug-dunkel-leise); letter-spacing: 0.12em; text-transform: uppercase; }

:root[data-welt="kordel"] .wos-stempel {
  border: 1px solid var(--zug-kordel-tief); border-left-width: 3px; border-radius: 0;
  background: rgba(245, 182, 56, 0.09);
}
:root[data-welt="kordel"] .wos-stempel p { color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-stempel-marke {
  font-family: var(--zug-display); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--zug-kordel-text);
}

:root[data-welt="kordel"] .wos-kanaele li { border-bottom-color: rgba(11, 20, 48, 0.16); color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-kanaele li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--zug-kordel-tief); background: var(--zug-kordel);
}
:root[data-welt="kordel"] .wos-kanaele li span {
  font-family: var(--zug-display); letter-spacing: 0.16em; color: var(--zug-kordel-text);
}

:root[data-welt="kordel"] .wos-laufzeit-titel { font-family: var(--zug-display); letter-spacing: 0.2em; color: var(--zug-dunkel-leise); }
:root[data-welt="kordel"] .wos-laufzeit-reihe div { border-color: rgba(11, 20, 48, 0.18); border-radius: 2px; color: var(--zug-dunkel-leise); }
:root[data-welt="kordel"] .wos-laufzeit-reihe div strong { font-family: var(--zug-display); color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-laufzeit-reihe div.beste { border-color: var(--zug-kordel-tief); background: rgba(245, 182, 56, 0.1); }
:root[data-welt="kordel"] .wos-frist { font-family: var(--zug-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--zug-kordel-text); font-size: 0.78rem; }

:root[data-welt="kordel"] .wos-extra { border-top-color: rgba(11, 20, 48, 0.22); }
:root[data-welt="kordel"] .wos-extra h3 { color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-extra li { color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-extra li::before { background: var(--zug-kordel-tief); }
:root[data-welt="kordel"] .wos-extra p { color: var(--zug-dunkel-leise); }

/* Stimme */
:root[data-welt="kordel"] .wos-voice {
  background: none; border: 0; border-left: 3px solid var(--zug-kordel);
  border-radius: 0; padding: 0.2rem 0 0.2rem 1.5rem;
}
:root[data-welt="kordel"] .wos-voice::before { display: none; }
:root[data-welt="kordel"] .wos-voice blockquote {
  font-family: var(--zug-display); font-weight: 400; letter-spacing: 0.01em;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.45; color: var(--zug-dunkel);
}
:root[data-welt="kordel"] .wos-voice-who strong { color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-voice-who span { color: var(--zug-dunkel-leise); }

/* ── Preisanker ─────────────────────────────────────────────────────── */

:root[data-welt="kordel"] .wos-rechnung li { border-bottom-color: var(--zug-naht); color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-rechnung li span { font-family: var(--zug-display); color: var(--zug-text); letter-spacing: 0.02em; }
:root[data-welt="kordel"] .wos-rechnung li.summe { border-top-color: var(--zug-naht-hell); color: var(--zug-text); }
:root[data-welt="kordel"] .wos-gegen-zahl {
  font-family: var(--zug-display); font-weight: 600; color: var(--zug-kordel);
  font-size: clamp(3.6rem, 9vw, 6.4rem); line-height: 0.9;
}

/* ── Referenz-Bühne ─────────────────────────────────────────────────── */

:root[data-welt="kordel"] .wos-card--ref { background: var(--zug-stoff-hoch); border-color: var(--zug-naht); }
:root[data-welt="kordel"] .wos-card--ref:hover { border-color: var(--zug-kordel); }
:root[data-welt="kordel"] .wos-ref-img { border-bottom-color: var(--zug-naht); }
:root[data-welt="kordel"] .wos-ref-body { border-top: 1px solid var(--zug-naht); }
:root[data-welt="kordel"] .wos-badge {
  background: var(--zug-kordel); color: var(--zug-dunkel); border-radius: 0;
  font-family: var(--zug-display); letter-spacing: 0.16em;
}

/* ── Schluss ────────────────────────────────────────────────────────── */

:root[data-welt="kordel"] .wos-final {
  background: var(--zug-stoff-tief); border-radius: 0;
  padding: clamp(5rem, 10vw, 9rem) 1.6rem;
}
:root[data-welt="kordel"] .wos-final::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 1.5px;
  height: clamp(2.5rem, 5vw, 4rem); background: var(--zug-kordel); transform: translateX(-50%);
  border-radius: 0; filter: none; animation: none;
}
:root[data-welt="kordel"] .wos-final::after {
  content: ""; position: absolute; top: clamp(2.5rem, 5vw, 4rem); left: 50%;
  width: 11px; height: 11px; border-radius: 50%; background: var(--zug-kordel);
  transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(245, 182, 56, 0.16);
  filter: none; animation: none;
}
:root[data-welt="kordel"] .wos-final h2 {
  font-size: clamp(2.4rem, 6vw, 5rem); max-width: 16ch; text-transform: uppercase; color: var(--zug-text);
}
:root[data-welt="kordel"] .wos-final h2::after { display: none; }
:root[data-welt="kordel"] .wos-final p { color: var(--zug-text-leise); }

/* ── Weitere Bestandskomponenten (Unterseiten) ──────────────────────── */

:root[data-welt="kordel"] .wos-kicker { color: var(--zug-kordel); font-family: var(--zug-display); letter-spacing: 0.2em; }
:root[data-welt="kordel"] .wos-list li { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-list li::before, :root[data-welt="kordel"] .wos-check li::before { color: var(--zug-kordel); background: none; }
:root[data-welt="kordel"] .wos-check li { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-why {
  background: rgba(245, 182, 56, 0.07); border: 1px solid var(--zug-naht);
  border-left: 3px solid var(--zug-kordel); border-radius: 0;
}
:root[data-welt="kordel"] .wos-why p { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-why strong { color: var(--zug-text); }
:root[data-welt="kordel"] .wos-hint { background: var(--zug-stoff-hoch); border-color: var(--zug-naht); border-radius: 0; color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-hint strong { color: var(--zug-text); }
:root[data-welt="kordel"] .wos-faq details { background: var(--zug-stoff-hoch); border-color: var(--zug-naht); border-radius: 0; }
:root[data-welt="kordel"] .wos-faq summary { color: var(--zug-text); }
:root[data-welt="kordel"] .wos-faq summary::after { color: var(--zug-kordel); }
:root[data-welt="kordel"] .wos-faq details p { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-form { background: var(--zug-stoff-hoch); border-color: var(--zug-naht); border-radius: 2px; box-shadow: none; }
:root[data-welt="kordel"] .wos-form-row label { color: var(--zug-text); }
:root[data-welt="kordel"] .wos-form-row input,
:root[data-welt="kordel"] .wos-form-row select,
:root[data-welt="kordel"] .wos-form-row textarea {
  background: var(--zug-stoff-tief); border-color: var(--zug-naht); color: var(--zug-text); border-radius: 2px;
}
:root[data-welt="kordel"] .wos-form-note, :root[data-welt="kordel"] .wos-form-status { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-table th { color: var(--zug-text); }
:root[data-welt="kordel"] .wos-table td { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-table th, :root[data-welt="kordel"] .wos-table td { border-bottom-color: var(--zug-naht); }
:root[data-welt="kordel"] .wos code { background: var(--zug-stoff-tief); border-color: var(--zug-naht); color: var(--zug-text); }
:root[data-welt="kordel"] .wos-shot img { border-color: var(--zug-naht); border-radius: 2px; }
:root[data-welt="kordel"] .wos-shot figcaption, :root[data-welt="kordel"] .wos-photo-caption { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-photo-frame { background: var(--zug-stoff-hoch); border-color: var(--zug-naht); border-radius: 2px; }
:root[data-welt="kordel"] .wos-crumbs, :root[data-welt="kordel"] .wos-crumbs a { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-crumbs [aria-current] { color: var(--zug-text); }
:root[data-welt="kordel"] .wos-updated, :root[data-welt="kordel"] .wos-more { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-carousel-nav button { background: var(--zug-stoff-hoch); border-color: var(--zug-naht); color: var(--zug-kordel); border-radius: 2px; }
:root[data-welt="kordel"] .wos-carousel-dot { background: var(--zug-naht-hell); }
:root[data-welt="kordel"] .wos-carousel-dot.is-active { background: var(--zug-kordel); }
:root[data-welt="kordel"] .wos-carousel-hint { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-legal, :root[data-welt="kordel"] .wos-legal p { color: var(--zug-text-leise); }

/* Wizard erbt Karten und Buttons; nur die groben Flächen nachziehen */
:root[data-welt="kordel"] .wos-wiz-opt { background: var(--zug-stoff-hoch); border-color: var(--zug-naht); border-radius: 2px; }
:root[data-welt="kordel"] .wos-wiz-opt:hover, :root[data-welt="kordel"] .wos-wiz-opt.is-selected { border-color: var(--zug-kordel); background: var(--zug-stoff-tief); box-shadow: none; }
:root[data-welt="kordel"] .wos-wiz-opt-title { color: var(--zug-text); }
:root[data-welt="kordel"] .wos-wiz-opt-desc { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-wiz-opt-price { color: var(--zug-kordel); }
:root[data-welt="kordel"] .wos-wiz-q { color: var(--zug-text); font-family: var(--zug-display); }
:root[data-welt="kordel"] .wos-wiz-qsub { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-wiz-pnum { background: var(--zug-stoff-hoch); border-color: var(--zug-naht); color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-wiz-progress li.is-active .wos-wiz-pnum { background: var(--zug-kordel); border-color: var(--zug-kordel); color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-wiz-progress li.is-done .wos-wiz-pnum { background: var(--zug-kordel-tief); border-color: var(--zug-kordel-tief); color: var(--zug-dunkel); }
:root[data-welt="kordel"] .wos-wiz-plabel { color: var(--zug-text-leise); }
:root[data-welt="kordel"] .wos-wiz-usual-sum, :root[data-welt="kordel"] .wos-wiz-sorglos-price { font-family: var(--zug-display); }

/* ── Bewegung ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root[data-welt="kordel"] .wos-hero-collage .wos-mock,
  :root[data-welt="kordel"] .wos-hero-collage.is-flach .wos-mock {
    transition: none; transform: none !important; opacity: 1;
  }
  :root[data-welt="kordel"] .wos-btn { transition: none; }
}

@media (max-width: 1020px) {
  :root[data-welt="kordel"] .wos-section::before,
  :root[data-welt="kordel"] .wos-section::after { display: none; }
  :root[data-welt="kordel"] .wos-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root[data-welt="kordel"] .wos-btn { width: 100%; }
}
