/* Wipplinger Consulting: Designsystem der Website.
 *
 * Eine Datei, ein Satz Regeln fuer alle Seiten. Die Seiten kommen als Export
 * aus Claude Design und tragen ihre Masse als Inline-Stile mit. Damit nicht
 * jede Seite ihre eigenen Abstaende und Groessen mitbringt, setzt diese Datei
 * die Masse zentral fest. Aendert man hier einen Wert, aendert er sich auf
 * jeder Seite.
 *
 * Aufbau
 *   1. Tokens          alle Masse an einer Stelle
 *   2. Grundlagen      Schrift, Fokus, versteckte Elemente
 *   3. Hero            Abstaende, Raster, Ueberschrift, Untertext
 *   4. Abschnitte      Rhythmus, Abschnittskopf, Untertext, Plaketten
 *   5. Abschlussband   ein Baustein fuer alle Seiten
 *   -  Knopf           Haupt-Knopf als Baustein
 *   -  Kopfzeile       Burger und Vollbild-Menue am Handy
 *   -  Formulare       dreistufig, mit Fortschritt, Fehlern und Bestaetigung
 *   6. Rechtstexte     Impressum, Datenschutz, AGB, 404
 *
 * Die Rollen (data-wc=...) setzt tools/bauen.py beim Bauen der Seiten:
 *   data-wc="hero"   erster Block unter der Kopfzeile
 *   data-wc="sek"    jeder weitere Abschnitt
 *   data-wc="logos"  Logoband der Startseite
 *   data-wc="cta"    Abschlussband
 */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Raster */
  --wc-container: 1360px;
  --wc-gutter: 40px;

  /* Abstaende */
  --wc-sek: 96px;          /* unter jedem Abschnitt */
  --wc-hero-oben: 40px;
  --wc-hero-unten: 88px;
  --wc-kopf-gap: 40px;     /* Abschnittskopf zu Inhalt */
  --wc-kopf-innen: 18px;   /* Plakette, Ueberschrift, Untertext */

  /* Schrift */
  --wc-font: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  --wc-h1: clamp(28px, 3.9vw, 38px);              /* Hero-Ueberschrift: 38 px ab Desktop */
  --wc-hero-lead: 14px;                           /* Hero-Untertext */
  --wc-lead: 15.5px;                              /* Untertext unter Abschnittsueberschriften */
  --wc-cta-h2: clamp(32px, 3.4vw, 48px);          /* Ueberschrift im Abschlussband */
  --wc-plakette: 13.5px;                          /* Plakette ueber Ueberschriften */
}

/* ── 2. Grundlagen ──────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
body { font-family: var(--wc-font); }

a:focus-visible { outline: 2px solid var(--accent, #FB841C); outline-offset: 3px; border-radius: 6px; }
[data-wc-faq-btn]:focus-visible,
[data-wc-chip]:focus-visible,
[data-wc-submit]:focus-visible { outline: 2px solid var(--accent, #FB841C) !important; outline-offset: 3px !important; }
[data-wc-sent]:focus { outline: none; }
.wc-topf { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Kursive Hervorhebung: gleiche Groesse in allen Ueberschriften und allen Knoepfen */
#wc-seite h1 em, #wc-seite h2 em { font-size: 1.1em !important; }
#wc-seite a em, #wc-seite button em { font-size: 1.12em !important; }

/* Verlaufstext: der Verlauf wird nur im Inhaltsbereich der Schrift gemalt. Unterlaengen
   (g, j, p, q, y) ragen darunter hinaus und blieben durchsichtig, das g in "gefunden"
   war unten abgeschnitten. Der Innenabstand vergroessert nur die Malflaeche, der negative
   Aussenabstand haelt das Layout unveraendert (bei Inline-Text greift nur der Innenabstand). */
[data-wc-verlauf] {
  padding-block: .12em .28em;
  margin-block: -.12em -.28em;
}

/* ── 3. Hero ────────────────────────────────────────────────────────────── */
[data-wc="hero"] {
  padding-top: var(--wc-hero-oben) !important;
  padding-bottom: var(--wc-hero-unten) !important;
}
[data-wc-hero-zwei] { gap: 48px 56px !important; }
[data-wc-hero-h1] {
  font-size: var(--wc-h1) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.024em !important;
}
[data-wc-hero-lead] {
  font-size: var(--wc-hero-lead) !important;
  line-height: 1.6 !important;
  max-width: 66ch !important;
}
/* Desktop: die Textspalte bekommt mehr Platz, das Bild daneben etwas weniger */
@media (min-width: 1001px) {
  [data-wc-hero-zwei] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; }
  [data-wc-hero-zwei] [data-wc-hero-spalte] { max-width: 680px !important; }
}

/* ── 4. Abschnitte ──────────────────────────────────────────────────────── */
[data-wc="sek"] {
  padding-top: 0 !important;
  padding-bottom: var(--wc-sek) !important;
}
[data-wc="logos"] { padding-bottom: var(--wc-sek) !important; }

/* Cases: die Ergebnis-Kacheln in den Fall-Karten stehen am Handy untereinander statt zu dritt nebeneinander */
@media (max-width: 760px) {
  [data-wc-kacheln] { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* Block aus Abschnittskopf und Inhalt: immer derselbe Abstand dazwischen */
[data-wc-stapel] { gap: var(--wc-kopf-gap) !important; }

/* Abschnittskopf: Plakette, Ueberschrift, Untertext */
[data-wc-kopf] { gap: var(--wc-kopf-innen) !important; }
[data-wc-lead] {
  font-size: var(--wc-lead) !important;
  line-height: 1.6 !important;
  max-width: 54ch !important;
}
[data-wc-kopf] > [data-wc-lead] { color: rgb(20, 20, 20) !important; }

/* Plakette ueber Ueberschriften */
[data-wc-plakette] {
  font-size: var(--wc-plakette) !important;
  padding: 8px 18px !important;
}

/* Logo im Satz: "... von der Stange – oder [Wipplinger Consulting]?" auf den Leistungsseiten.
   Das Logo (weiss, deshalb invertiert) haengt an der Schriftgroesse der Ueberschrift und sitzt
   optisch auf der Grundlinie; Logo und Fragezeichen bleiben immer zusammen. */
.wc-h2-logo-zeile { white-space: nowrap; }
.wc-h2-logo {
  display: inline-block; height: 1.12em; width: auto; vertical-align: -0.25em; margin: 0 0.05em 0 0.08em;
  filter: invert(1);
}

/* ── 5. Abschlussband ───────────────────────────────────────────────────── */
[data-wc="cta"] {
  padding-top: 0 !important;
  padding-bottom: var(--wc-sek) !important;
}
[data-wc="cta"] h2 {
  font-size: var(--wc-cta-h2) !important;
  line-height: 1.06 !important;
}
.wc-cta-knopf:hover { color: rgb(20, 20, 20) !important; transform: translateY(-1px) !important; }
.wc-cta-link:hover { color: rgb(255, 255, 255) !important; opacity: .85; }
@media (max-width: 760px) {
  [data-m~="vfade"] { background: linear-gradient(180deg, rgba(255, 103, 0, 0) 45%, #FF6700 100%) !important; }
  [data-m~="left"] { align-items: flex-start !important; }
  /* Das Band hat abgeschraegte Ecken (40 px). Am Handy halten Text, Knopf und Link
     Abstand dazu, sonst verschwinden sie in der Ecke. */
  [data-wc="cta"] [data-m="stack"] > div:last-child { padding: 32px 44px 60px !important; }
}

/* ── Startseite: Hero-Foto mit Unterschrift ─────────────────────────────── */
/* Im Entwurf hing das Foto an festen Pixeln (518 x 562) und die Unterschrift bei left 365 px.
   Hier skaliert das Foto mit seiner Spalte und die Unterschrift sitzt in Prozent daneben. */
[data-wc-hero-foto] { position: relative; width: min(518px, 100%); flex: none; }
[data-wc-hero-foto] > img:first-child {
  position: static !important; width: 100% !important; max-width: none !important;
  height: auto !important; margin: 0 !important; display: block;
}
[data-wc-hero-sig] { left: 70.5% !important; top: 32.7% !important; }
@media (max-width: 760px) {
  /* Am Handy steht die Unterschrift unter dem Foto statt daneben */
  [data-wc-hero-foto] { width: min(400px, 100%); margin-left: auto; margin-right: auto; }
  [data-wc-hero-sig] {
    position: static !important; align-items: center !important; text-align: center;
    margin: 4px auto 0; padding-bottom: 4px;
  }
  [data-wc-hero-sig] img { width: 130px !important; }
  [data-wc-hero-sig] span { padding-left: 0 !important; }
}

/* Presse-Logos unter dem Foto: am Rechner wie im Entwurf (24 / 22 / 26 px, 36 px Abstand),
   bei schmalem Bildschirm kleiner statt abgeschnitten */
[data-wc-presse] { gap: clamp(12px, 3.5vw, 36px) !important; flex-wrap: wrap !important; }
[data-wc-presse] img:nth-child(1) { height: clamp(14px, 4.6vw, 24px) !important; }
[data-wc-presse] img:nth-child(2) { height: clamp(13px, 4.2vw, 22px) !important; }
[data-wc-presse] img:nth-child(3) { height: clamp(15px, 5vw, 26px) !important; }

/* ── Footer: feste Masse aus dem Entwurf freigeben ──────────────────────── */
[data-wc-fuss-zitat] { height: auto !important; }     /* das Zitat darf so viele Zeilen haben, wie es braucht */
@media (max-width: 760px) {
  [data-wc-fuss-person], [data-wc-fuss-zitat] { width: auto !important; height: auto !important; }
}

/* ── Knopf ──────────────────────────────────────────────────────────────── */
/* Der Haupt-Knopf des Entwurfs (Pfeilkachel links, Beschriftung in der Mitte) als Baustein:
   Formulare, Mobilmenue und Bestaetigung benutzen ihn. */
.wc-btn {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, color-mix(in oklab, var(--accent, #FB841C) 92%, #fff) 44%, var(--accent, #FB841C) 100%));
  color: var(--on-accent, #fff); border-radius: 13px; padding: 7px 20px 7px 7px;
  font-size: 16px; font-weight: 500; line-height: 1.2;
  transition: transform .15s ease, opacity .15s ease; -webkit-tap-highlight-color: transparent;
}
.wc-btn:hover { color: var(--on-accent, #fff); transform: translateY(-1px); }
.wc-btn:active { transform: translateY(0) scale(.99); }
.wc-btn:focus-visible { outline: 2px solid var(--accent, #FB841C); outline-offset: 3px; }
.wc-btn[aria-busy="true"] { opacity: .8; cursor: progress; pointer-events: none; }
.wc-btn-kachel {
  width: 36px; height: 36px; border-radius: 10px; background: #fff; color: #141414;
  display: grid; place-items: center; font-size: 17px; line-height: 1; flex: none;
}
.wc-btn-text { flex: 1; text-align: center; padding-right: 36px; }
.wc-btn em, .wc-danke em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
/* Beim Senden dreht sich anstelle des Pfeils ein gestrichelter Ring, wie im Ablauf der Startseite */
.wc-btn[aria-busy="true"] .wc-btn-kachel { font-size: 0; }
.wc-btn[aria-busy="true"] .wc-btn-kachel::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px dashed var(--accent, #FB841C);
  animation: wc-dreh 1.2s linear infinite;
}
@keyframes wc-dreh { to { transform: rotate(360deg); } }

/* ── Kopfzeile und Mobilmenue ───────────────────────────────────────────── */
[data-wc-kopfleiste] > a:first-child { position: relative; z-index: 2; }
.wc-burger {
  display: none; position: relative; z-index: 2; flex: none; width: 46px; height: 46px; margin-left: 12px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(20, 20, 20, .12); background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wc-burger::before, .wc-burger::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 2px; background: #141414;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.wc-burger::before { transform: translate(-50%, -4px); }
.wc-burger::after { transform: translate(-50%, 3px); }
.wc-burger[aria-expanded="true"]::before { transform: translate(-50%, -1px) rotate(45deg); }
.wc-burger[aria-expanded="true"]::after { transform: translate(-50%, -1px) rotate(-45deg); }
.wc-burger:focus-visible { outline: 2px solid var(--accent, #FB841C); outline-offset: 3px; }
@media (max-width: 1000px) {
  /* Die Navigation ist ausgeblendet (data-m="hide"), dafuer gibt es den Burger */
  .wc-burger { display: inline-block; }
  [data-wc-nav-cta] { margin-left: auto; }
}
@media (max-width: 760px) {
  [data-wc-kopfleiste] { padding-left: 16px !important; padding-right: 16px !important; }
  [data-wc-kopfleiste] > a:first-child img { height: 32px !important; }
  [data-wc-nav-cta] { display: none !important; }   /* der Knopf steht im Menue */
  .wc-burger { margin-left: auto; }
}

html.wc-menue-offen { overflow: hidden; }
.wc-mm {
  position: fixed; inset: 0; z-index: 1; background: #fff; overflow-y: auto; overscroll-behavior: contain;
  padding: 92px 20px 32px; opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
}
.wc-mm[data-offen] { opacity: 1; transform: none; }
.wc-mm-innen { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.wc-mm-label { margin: 6px 0 2px; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.2; color: #141414; }
.wc-mm-leistung {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px;
  border: 1px solid rgba(20, 20, 20, .1); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); color: #141414;
}
.wc-mm-icon {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, color-mix(in oklab, var(--accent, #FB841C) 92%, #fff) 44%, var(--accent, #FB841C) 100%));
}
.wc-mm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wc-mm-text strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.wc-mm-text span { font-size: 13px; line-height: 1.35; color: #6B6A66; }
.wc-mm-linien { margin-top: 10px; display: flex; flex-direction: column; border-top: 1px solid rgba(20, 20, 20, .08); }
.wc-mm-link {
  display: flex; justify-content: space-between; align-items: center; padding: 17px 4px;
  border-bottom: 1px solid rgba(20, 20, 20, .08); font-size: 24px; letter-spacing: -0.02em; color: #141414;
}
.wc-mm-link span:last-child { color: #A3A29D; font-size: 20px; }
.wc-mm-cta { margin-top: 18px; }
/* Beim Oeffnen kommen die Eintraege nacheinander (--i je Eintrag) */
.wc-mm [style*="--i"] {
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 40ms + 60ms);
}
.wc-mm[data-offen] [style*="--i"] { opacity: 1; transform: none; }
@media (min-width: 1001px) { .wc-mm { display: none !important; } }

/* ── Formulare der Einstiege: drei Schritte ─────────────────────────────── */
.wc-fm { display: flex; flex-direction: column; gap: 18px; }
.wc-fm-fortschritt { display: flex; flex-direction: column; gap: 10px; }
.wc-fm-balken { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
.wc-fm-seg { position: relative; height: 4px; border-radius: 999px; background: rgba(20, 20, 20, .1); overflow: hidden; }
.wc-fm-seg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform: scaleX(0); transform-origin: left;
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, var(--accent, #FB841C) 100%));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.wc-fm-seg[data-zustand="fertig"]::after, .wc-fm-seg[data-zustand="aktiv"]::after { transform: scaleX(1); }
.wc-fm-stand { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; color: #6B6A66; }
.wc-fm-stand strong { font-size: 13.5px; font-weight: 600; color: #141414; text-align: right; }

.wc-fm-schritt { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.wc-fm-schritt:not([hidden]) { animation: wc-schritt-vor .3s cubic-bezier(.2, .7, .2, 1) both; }
.wc-fm[data-richtung="zurueck"] .wc-fm-schritt:not([hidden]) { animation-name: wc-schritt-zurueck; }
@keyframes wc-schritt-vor { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes wc-schritt-zurueck { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.wc-fm-legende { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wc-fm-feld { display: flex; flex-direction: column; gap: 7px; }
.wc-fm-label { font-size: 13.5px; font-weight: 500; color: #141414; }
.wc-fm-eingabe {
  box-sizing: border-box; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(20, 20, 20, .14);
  background: #FAFAF8; font: inherit; font-size: 14.5px; color: #141414; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea.wc-fm-eingabe { min-height: 108px; resize: vertical; line-height: 1.5; }
.wc-fm-eingabe::placeholder { color: #9A9994; }
.wc-fm-eingabe:focus { border-color: var(--accent, #FB841C); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #FB841C) 22%, #fff); background: #fff; }
.wc-fm-eingabe[aria-invalid="true"], .wc-fm-chips[aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); background: #fff; }

.wc-fm-chips { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 14px; }
.wc-chip {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; line-height: 1.25; color: #141414; background: #FAFAF8;
  border: 1px solid rgba(20, 20, 20, .14); -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.wc-chip:hover { border-color: rgba(20, 20, 20, .32); }
.wc-chip:active { transform: scale(.97); }
.wc-chip[aria-pressed="true"] { color: var(--on-accent, #fff); background: var(--grad, var(--accent, #FB841C)); border-color: transparent; }
.wc-chip:focus-visible { outline: 2px solid var(--accent, #FB841C); outline-offset: 2px; }

.wc-fm-zustimmung { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: #55544F; cursor: pointer; }
.wc-fm-haken { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent, #FB841C); }
.wc-fm-zustimmung a { text-decoration: underline; text-underline-offset: 3px; }
.wc-fm-hilfe { margin: 0; font-size: 12.5px; line-height: 1.4; color: #B42318; }
.wc-fm-fehler {
  margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: #B42318;
  background: rgba(180, 35, 24, .06); border: 1px solid rgba(180, 35, 24, .18);
}

.wc-fm-aktionen { display: flex; gap: 10px; align-items: stretch; }
.wc-fm-aktionen .wc-btn { flex: 1; min-width: 0; }
.wc-fm-zurueck {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; padding: 0 18px;
  border-radius: 13px; border: 1px solid rgba(20, 20, 20, .14); background: #fff; color: #141414;
  font-size: 15px; font-weight: 500; transition: border-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent;
}
.wc-fm-zurueck:hover { border-color: rgba(20, 20, 20, .32); }
.wc-fm-zurueck:active { transform: scale(.98); }
.wc-fm-zurueck:focus-visible { outline: 2px solid var(--accent, #FB841C); outline-offset: 3px; }
.wc-fm-zurueck:disabled { opacity: .5; cursor: default; }

.wc-fm-hinweis { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: #141414; }
.wc-fm-hinweis strong { font-weight: 600; }
.wc-fm-puls { width: 7px; height: 7px; border-radius: 999px; background: #1A9E5C; animation: wc-puls 1.8s ease-out infinite; }
@keyframes wc-puls { 0% { box-shadow: 0 0 0 0 rgba(26, 158, 92, .45); } 100% { box-shadow: 0 0 0 8px rgba(26, 158, 92, 0); } }
.wc-fm-note { margin: 0; font-size: 13px; line-height: 1.5; color: #6B6A66; text-align: center; text-wrap: pretty; }
.wc-fm-note a { text-decoration: underline; text-underline-offset: 3px; }
/* iOS zoomt in Felder unter 16 px hinein. Am Handy bekommen Eingaben deshalb 16 px und Chips mehr Flaeche. */
@media (max-width: 760px) {
  .wc-fm-eingabe { font-size: 16px; }
  .wc-chip { padding: 11px 16px; font-size: 14px; }
}

/* ── Bestaetigung nach dem Absenden ─────────────────────────────────────── */
[data-wc-form-karte][data-fertig] [data-wc-kopf-form] { display: none !important; }
.wc-danke { display: flex; flex-direction: column; gap: 24px; outline: none; }
.wc-danke-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wc-danke-haken {
  position: relative; width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; color: var(--on-accent, #fff);
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, color-mix(in oklab, var(--accent, #FB841C) 92%, #fff) 44%, var(--accent, #FB841C) 100%));
  box-shadow: 0 14px 28px -14px color-mix(in oklab, var(--accent, #FB841C) 70%, #000);
  animation: wc-danke-ein .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
.wc-danke-haken::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: wc-danke-ring 1.1s ease-out .35s 1 both; }
.wc-danke-haken path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wc-danke-strich .45s ease-out .3s forwards; }
@keyframes wc-danke-ein { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wc-danke-strich { to { stroke-dashoffset: 0; } }
@keyframes wc-danke-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent, #FB841C) 45%, transparent); }
  100% { box-shadow: 0 0 0 18px color-mix(in oklab, var(--accent, #FB841C) 0%, transparent); }
}
.wc-danke-titel { margin: 6px 0 0; font-size: 28px; line-height: 1.1; letter-spacing: -0.026em; font-weight: 500; color: #141414; text-wrap: balance; }
.wc-danke-text { margin: 0; font-size: 15px; line-height: 1.6; color: #3A3A37; text-wrap: pretty; }
.wc-danke-block { display: flex; flex-direction: column; gap: 10px; }
.wc-danke-label { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.2; color: #141414; }
.wc-danke-liste { margin: 0; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid rgba(20, 20, 20, .1); background: #FAFAF8; overflow: hidden; }
.wc-danke-liste > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 12px; padding: 11px 16px; border-top: 1px solid rgba(20, 20, 20, .07); }
.wc-danke-liste > div:first-child { border-top: 0; }
.wc-danke-liste dt { font-size: 12.5px; line-height: 1.45; color: #6B6A66; }
.wc-danke-liste dd { margin: 0; font-size: 14px; line-height: 1.45; color: #141414; overflow-wrap: anywhere; white-space: pre-line; }
.wc-danke-schritte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: s; }
.wc-danke-schritte li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 42px; counter-increment: s; }
.wc-danke-schritte li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  font: 600 13px/1 "Geist Mono", ui-monospace, monospace; color: var(--accent, #FB841C); background: color-mix(in oklab, var(--accent, #FB841C) 10%, #fff);
}
.wc-danke-schritte strong { font-size: 15px; font-weight: 600; color: #141414; line-height: 1.3; }
.wc-danke-schritte span { font-size: 14px; line-height: 1.5; color: #55544F; }
.wc-danke-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.wc-danke-aktionen .wc-btn { flex: 1 1 260px; }
.wc-danke-link { font-size: 14.5px; font-weight: 500; color: #141414; text-decoration: underline; text-underline-offset: 4px; }

/* Wer Bewegung abgeschaltet hat, sieht alles ohne Uebergaenge */
@media (prefers-reduced-motion: reduce) {
  .wc-mm, .wc-mm [style*="--i"], .wc-burger::before, .wc-burger::after, .wc-fm-seg::after, .wc-btn, .wc-chip { transition: none !important; }
  .wc-fm-schritt, .wc-fm-puls, .wc-danke-haken, .wc-danke-haken::after, .wc-danke-haken path { animation: none !important; }
  .wc-danke-haken path { stroke-dashoffset: 0; }
}

/* ── 6. Rechtstexte ─────────────────────────────────────────────────────── */
.wc-prosa { max-width: 760px; margin: 0 auto; padding: var(--wc-hero-oben) var(--wc-gutter) var(--wc-sek); color: #141414; }
.wc-prosa h1 { margin: 0 0 14px; font-size: var(--wc-h1); line-height: 1.12; letter-spacing: -0.024em; font-weight: 500; text-wrap: balance; }
.wc-prosa .wc-lead { margin: 0 0 40px; font-size: var(--wc-lead); line-height: 1.6; color: #141414; max-width: 60ch; text-wrap: pretty; }
.wc-prosa h2 { margin: 40px 0 10px; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; }
.wc-prosa h3 { margin: 28px 0 8px; font-size: 17px; line-height: 1.3; font-weight: 600; }
.wc-prosa p, .wc-prosa li { font-size: 15px; line-height: 1.65; color: #2A2A27; text-wrap: pretty; }
.wc-prosa p { margin: 0 0 14px; }
.wc-prosa ul, .wc-prosa ol { margin: 0 0 16px; padding-left: 22px; }
.wc-prosa a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wc-prosa table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.wc-prosa th, .wc-prosa td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(20, 20, 20, .1); vertical-align: top; }
.wc-prosa .wc-tabelle { overflow-x: auto; }
.wc-prosa .wc-marke {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; margin: 0 0 22px;
  border-radius: 999px; background: #F3F2EF; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 20, 20, .08);
  font-size: var(--wc-plakette); font-weight: 500;
}
@media (max-width: 760px) { .wc-prosa { padding: 20px 20px 72px; } }

/* ── 7. Lieferumfang: dunkle Karte mit Ebenenstapel ─────────────────────── */
/* Die Sektion "Was drin ist" der Leistungsseiten. Links Ueberschrift, Untertext und die Punkte,
   rechts ein Stapel aus Ebenen (eine je Leistung) in Schraegsicht. Die Ebenen fallen beim Erscheinen
   in den Stapel, danach hebt sich alle 2,8 s eine andere Ebene; die Tabs darunter steuern sie.
   Nur transform und opacity werden bewegt. Ohne JavaScript steht der fertige Stapel. */
:root { --wc-aus: cubic-bezier(.23, 1, .32, 1); }
.wc-lu {
  position: relative; overflow: hidden; border-radius: 28px; padding: clamp(24px, 3vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 48px; align-items: center;
  background: linear-gradient(180deg, #1E1E1E 0%, #121212 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .6);
}
.wc-lu::before {
  content: ""; position: absolute; right: -16%; top: -22%; width: 72%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(251, 132, 28, .3) 0%, rgba(251, 132, 28, 0) 100%);
}
.wc-lu-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.wc-lu-liste { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.wc-lu-liste li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; font-weight: 500; color: rgba(255, 255, 255, .92); }
.wc-lu-haken {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px; color: #fff;
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, color-mix(in oklab, var(--accent, #FB841C) 92%, #fff) 44%, var(--accent, #FB841C) 100%));
  display: grid; place-items: center; font-size: 10px; font-weight: 700; line-height: 1;
}
/* Buehne */
.wc-lu-buehne { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.wc-lu-stapel { position: relative; width: 100%; max-width: 520px; aspect-ratio: 5 / 3.6; perspective: 1500px; perspective-origin: 50% 35%; --wc-lu-abstand: 34px; }
.wc-lu-raum { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(16%) rotateX(58deg) rotateZ(-32deg); }
/* Schmaler Rechner: die Spalte ist enger, der Stapel braucht nach oben mehr Luft */
@media (max-width: 1200px) and (min-width: 1001px) {
  .wc-lu-stapel { aspect-ratio: 5 / 4.2; }
  .wc-lu-raum { transform: translateY(24%) rotateX(58deg) rotateZ(-32deg); }
}
.wc-lu-ebene {
  position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 3 / 2; margin: -20.7% 0 0 -31%;
  border-radius: 16px; background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 40px -22px rgba(0, 0, 0, .65);
  transform: translateZ(calc(var(--i) * var(--wc-lu-abstand)));
  transition: transform .95s var(--wc-aus), opacity .6s ease, background-color .35s ease, box-shadow .35s ease;
  transition-delay: calc(var(--i) * 70ms);
}
/* Mit JavaScript: vor dem Erscheinen auseinandergezogen und unsichtbar, dann faellt jede Ebene an ihren Platz */
.wc-js .wc-lu:not(.wc-lu-an) .wc-lu-ebene { transform: translateZ(calc(var(--i) * 120px + 90px)); opacity: 0; }
.wc-js .wc-lu:not(.wc-lu-an) .wc-lu-liste li { opacity: 0; transform: translateY(8px); }
.wc-lu-liste li { transition: opacity .5s var(--wc-aus), transform .5s var(--wc-aus); transition-delay: calc(var(--i) * 55ms + 250ms); }
/* Nach dem Einfallen: kurze Wege, keine Verzoegerung mehr */
.wc-lu-bereit .wc-lu-ebene { transition: transform .5s var(--wc-aus), opacity .3s ease, background-color .3s ease, box-shadow .3s ease; transition-delay: 0s; }
.wc-lu-bereit .wc-lu-ebene:not(.wc-lu-aktiv) { opacity: .62; }
.wc-lu-ebene.wc-lu-aktiv {
  transform: translateZ(calc(var(--i) * var(--wc-lu-abstand) + 30px));
  background: rgba(251, 132, 28, .24);
  box-shadow: inset 0 0 0 1px rgba(251, 150, 60, .95), inset 0 1px 0 rgba(255, 255, 255, .2), 0 36px 60px -18px rgba(251, 132, 28, .6);
}
.wc-lu-icon { position: absolute; left: 6.5%; top: 9%; width: 15%; aspect-ratio: 1; border-radius: 24%; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); display: grid; place-items: center; }
.wc-lu-icon img { width: 54%; height: 54%; display: block; }
.wc-lu-aktiv .wc-lu-icon { background: rgba(255, 255, 255, .22); }
/* Muster: was auf der Ebene liegt, in wenigen Formen */
.wc-lu-muster { position: absolute; left: 6.5%; right: 6.5%; top: 36%; bottom: 10%; }
.wc-lu-muster i { position: absolute; display: block; border-radius: 999px; background: rgba(255, 255, 255, .26); font-style: normal; }
.wc-lu-m-zeilen i { height: 13%; } .wc-lu-m-zeilen i:nth-child(1) { top: 0; width: 72%; background: var(--accent, #FB841C); }
.wc-lu-m-zeilen i:nth-child(2) { top: 36%; width: 50%; } .wc-lu-m-zeilen i:nth-child(3) { top: 72%; width: 62%; }
.wc-lu-m-bloecke i { border-radius: 10%; background: rgba(255, 255, 255, .17); }
.wc-lu-m-bloecke i:nth-child(1) { left: 0; top: 0; width: 100%; height: 44%; }
.wc-lu-m-bloecke i:nth-child(2) { left: 0; top: 56%; width: 46%; height: 44%; }
.wc-lu-m-bloecke i:nth-child(3) { right: 0; top: 56%; width: 46%; height: 44%; background: rgba(251, 132, 28, .75); }
.wc-lu-m-code i { height: 12%; }
.wc-lu-m-code i:nth-child(1) { top: 0; left: 0; width: 38%; background: var(--accent, #FB841C); }
.wc-lu-m-code i:nth-child(2) { top: 26%; left: 12%; width: 60%; }
.wc-lu-m-code i:nth-child(3) { top: 52%; left: 12%; width: 34%; background: rgba(251, 132, 28, .6); }
.wc-lu-m-code i:nth-child(4) { top: 78%; left: 0; width: 26%; }
.wc-lu-m-struktur i { border-radius: 10%; background: rgba(255, 255, 255, .17); width: 34%; height: 30%; }
.wc-lu-m-struktur i:nth-child(1) { left: 33%; top: 0; background: rgba(251, 132, 28, .75); }
.wc-lu-m-struktur i:nth-child(2) { left: 0; bottom: 0; } .wc-lu-m-struktur i:nth-child(3) { right: 0; bottom: 0; }
.wc-lu-m-struktur i:nth-child(4) { left: 17%; right: 17%; top: 48%; height: 4%; width: auto; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.wc-lu-m-suche i:nth-child(1) { left: 0; top: 6%; width: 100%; height: 36%; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.wc-lu-m-suche i:nth-child(2) { left: 4%; top: 12%; width: 12%; aspect-ratio: 1; height: auto; background: none; box-shadow: inset 0 0 0 2px var(--accent, #FB841C); }
.wc-lu-m-suche i:nth-child(3) { left: 0; top: 60%; width: 36%; height: 28%; border-radius: 8px; background: var(--accent, #FB841C); }
.wc-lu-m-suche i:nth-child(4) { left: 42%; top: 64%; width: 40%; height: 20%; }
.wc-lu-m-funken i { background: none; color: var(--accent, #FB841C); line-height: 1; }
.wc-lu-m-funken i:nth-child(1) { left: 32%; top: 0; font-size: 300%; }
.wc-lu-m-funken i:nth-child(2) { left: 66%; top: 40%; font-size: 150%; color: rgba(255, 255, 255, .7); }
.wc-lu-m-funken i:nth-child(3) { left: 12%; top: 58%; font-size: 110%; color: rgba(255, 255, 255, .45); }
.wc-lu-m-server i { left: 0; width: 100%; height: 26%; border-radius: 8px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.wc-lu-m-server i:nth-child(1) { top: 0; } .wc-lu-m-server i:nth-child(2) { top: 37%; } .wc-lu-m-server i:nth-child(3) { top: 74%; }
.wc-lu-m-server i::after { content: ""; position: absolute; right: 6%; top: 50%; width: 7%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: #1A9E5C; box-shadow: 0 0 0 3px rgba(26, 158, 92, .25); }
.wc-lu-m-kasse i { height: 14%; } .wc-lu-m-kasse i:nth-child(1) { top: 0; width: 62%; } .wc-lu-m-kasse i:nth-child(2) { top: 26%; width: 40%; }
.wc-lu-m-kasse i:nth-child(3) { top: 58%; width: 100%; height: 36%; border-radius: 8px; background: var(--accent, #FB841C); }
.wc-lu-m-verbindung i { top: 18%; width: 32%; height: 64%; border-radius: 10%; background: rgba(255, 255, 255, .17); }
.wc-lu-m-verbindung i:nth-child(1) { left: 0; } .wc-lu-m-verbindung i:nth-child(2) { right: 0; background: rgba(251, 132, 28, .75); }
.wc-lu-m-verbindung i:nth-child(3) { left: 36%; right: 36%; top: 48%; height: 4%; width: auto; border-radius: 2px; background: var(--accent, #FB841C); }
.wc-lu-m-wachstum i { bottom: 0; width: 14%; border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, .2); }
.wc-lu-m-wachstum i:nth-child(1) { left: 0; height: 30%; } .wc-lu-m-wachstum i:nth-child(2) { left: 21.5%; height: 46%; }
.wc-lu-m-wachstum i:nth-child(3) { left: 43%; height: 40%; } .wc-lu-m-wachstum i:nth-child(4) { left: 64.5%; height: 72%; }
.wc-lu-m-wachstum i:nth-child(5) { left: 86%; height: 100%; background: var(--accent, #FB841C); }
/* Tabs */
.wc-lu-tags { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wc-lu-tag {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px;
  border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: #fff; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.wc-lu-tag img { width: 16px; height: 16px; display: block; opacity: .92; }
.wc-lu-tag[aria-pressed="true"] {
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, color-mix(in oklab, var(--accent, #FB841C) 92%, #fff) 44%, var(--accent, #FB841C) 100%));
  box-shadow: 0 12px 26px -12px rgba(251, 132, 28, .9);
}
.wc-lu-tag:active { transform: scale(.97); }
.wc-lu-tag:focus-visible { outline: 2px solid var(--accent, #FB841C); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .wc-lu-tag:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .15); } }
@media (max-width: 1000px) {
  .wc-lu { grid-template-columns: 1fr; }
  .wc-lu::before { top: auto; bottom: -6%; right: -20%; width: 90%; }
  .wc-lu-stapel { max-width: 440px; --wc-lu-abstand: 28px; }
}
@media (max-width: 760px) {
  .wc-lu { padding: 24px 20px; }
  .wc-lu-liste { grid-template-columns: 1fr; }
  .wc-lu-stapel { aspect-ratio: 1 / 0.9; --wc-lu-abstand: 22px; }
  .wc-lu-ebene { width: 76%; margin: -25.4% 0 0 -38%; }
  .wc-lu-raum { transform: translateY(16%) rotateX(58deg) rotateZ(-32deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-js .wc-lu:not(.wc-lu-an) .wc-lu-ebene { transform: translateZ(calc(var(--i) * var(--wc-lu-abstand))); opacity: 1; }
  .wc-js .wc-lu:not(.wc-lu-an) .wc-lu-liste li { opacity: 1; transform: none; }
  .wc-lu-ebene, .wc-lu-liste li { transition-duration: .25s; transition-delay: 0s; }
}

/* ── 8. Wissen: Uebersicht und Artikel ──────────────────────────────────── */
.wc-wis-auf {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 44px; align-items: center;
  padding: clamp(24px, 3vw, 44px); border-radius: 28px; color: #fff;
  background: linear-gradient(180deg, #1E1E1E 0%, #121212 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .6);
}
.wc-wis-auf::before {
  content: ""; position: absolute; right: -16%; top: -24%; width: 70%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(251, 132, 28, .26) 0%, rgba(251, 132, 28, 0) 100%);
}
.wc-wis-auf-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.wc-wis-auf h2 { margin: 0; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -0.024em; font-weight: 500; text-wrap: balance; }
.wc-wis-auf p { margin: 0; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.wc-wis-auf-bild { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #F3F2EF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -24px rgba(0, 0, 0, .8); transform: rotate(-1.5deg); }
.wc-wis-auf-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.wc-wis-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wc-wis-karte {
  display: flex; flex-direction: column; gap: 16px; padding: 22px; min-width: 0; border-radius: 22px;
  border: 1px solid rgba(20, 20, 20, .1); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  color: #141414; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.wc-wis-karte:hover { color: #141414; transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(20, 20, 20, .35); }
.wc-wis-karte:active { transform: translateY(0) scale(.995); }
.wc-wis-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: #55544F; }
.wc-wis-karte h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.wc-wis-karte p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #3A3A37; text-wrap: pretty; }
.wc-wis-bild { border-radius: 14px; overflow: hidden; border: 1px solid rgba(20, 20, 20, .08); aspect-ratio: 16 / 10; background: #F3F2EF; }
.wc-wis-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.wc-wis-fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; }
.wc-wis-fuss em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.12em; }
.wc-wis-pfeil { font-family: "Geist Mono", ui-monospace, monospace; color: var(--accent, #FB841C); }
.wc-wis-meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #55544F; }
.wc-wis-meta img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; flex: none; }
.wc-wis-auf .wc-wis-meta { color: rgba(255, 255, 255, .75); } .wc-wis-auf .wc-wis-meta b { color: #fff; font-weight: 500; }
.wc-wis-meta b { color: #141414; font-weight: 500; }
/* Artikel */
.wc-art-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 860px; }
.wc-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; font-size: 14px; line-height: 1.4; color: #55544F; }
.wc-art-meta img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex: none; }
.wc-art-meta b { display: block; color: #141414; font-weight: 500; }
.wc-art { max-width: 1360px; margin: 0 auto; padding: 0 var(--wc-gutter) var(--wc-sek); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px 64px; align-items: start; }
.wc-art-text { max-width: 720px; min-width: 0; }
.wc-art-text p { margin: 0 0 18px; font-size: 16px; line-height: 1.7; color: #2A2A27; text-wrap: pretty; }
.wc-art-einstieg { font-size: 18px !important; line-height: 1.6 !important; color: #141414 !important; }
.wc-art-text h2 { margin: 46px 0 16px; font-size: 28px; line-height: 1.15; letter-spacing: -0.022em; font-weight: 500; text-wrap: balance; scroll-margin-top: 24px; }
.wc-art-kasten { margin: 0 0 32px; padding: 22px 24px; border-radius: 18px; }
.wc-art-kasten b { display: block; margin: 0 0 8px; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.2; }
.wc-art-kasten p { margin: 0 !important; }
.wc-art-kurz { background: color-mix(in oklab, var(--accent, #FB841C) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent, #FB841C) 32%, #fff); }
.wc-art-kurz p { color: #141414 !important; }
.wc-art-dunkel { margin: 8px 0 30px; color: #fff; background: linear-gradient(180deg, #1E1E1E 0%, #121212 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -28px rgba(0, 0, 0, .7); }
.wc-art-dunkel b { color: color-mix(in oklab, var(--accent, #FB841C) 75%, #fff); }
.wc-art-dunkel p { color: rgba(255, 255, 255, .86) !important; }
.wc-art-ehrlich { margin: 40px 0 0; background: #F3F2EF; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 20, 20, .08); }
.wc-art-liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.wc-art-liste li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.6; color: #2A2A27; text-wrap: pretty; }
.wc-art-liste li::before {
  content: "✓"; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 999px; color: #fff;
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, color-mix(in oklab, var(--accent, #FB841C) 92%, #fff) 44%, var(--accent, #FB841C) 100%));
  display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1;
}
.wc-art-tabelle { margin: 6px 0 26px; overflow-x: auto; border: 1px solid rgba(20, 20, 20, .1); border-radius: 16px; }
.wc-art-tabelle table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.wc-art-tabelle th, .wc-art-tabelle td { text-align: left; padding: 12px 16px; vertical-align: top; border-top: 1px solid rgba(20, 20, 20, .08); }
.wc-art-tabelle thead th { border-top: 0; background: #F3F2EF; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; color: #55544F; }
.wc-art-tabelle tbody th { font-weight: 500; color: #141414; }
.wc-art-tabelle td { color: #3A3A37; }
.wc-art-faq { display: grid; gap: 10px; }
.wc-art-verwandt { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0 0 8px; }
.wc-art-verwandt a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(20, 20, 20, .1); background: #fff; font-size: 15px; font-weight: 500; line-height: 1.35; color: #141414; text-decoration: none;
  transition: border-color .2s ease, transform .15s ease;
}
.wc-art-verwandt a:hover { color: #141414; border-color: rgba(20, 20, 20, .32); transform: translateY(-1px); }
.wc-art-verwandt a span { font-family: "Geist Mono", ui-monospace, monospace; color: var(--accent, #FB841C); flex: none; }
.wc-art-weiter { margin: 30px 0 0; }
.wc-art-weiter .wc-btn { display: inline-flex; }
.wc-art-autor { margin: 48px 0 0; display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; border: 1px solid rgba(20, 20, 20, .1); background: #fff; }
.wc-art-autor img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex: none; }
.wc-art-autor b { display: block; margin: 0 0 4px; font-weight: 500; }
.wc-art-autor p { margin: 0 0 8px !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #3A3A37 !important; }
.wc-art-autor a { font-size: 14px; font-weight: 500; color: #141414; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wc-art-quellen { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid rgba(20, 20, 20, .1); }
.wc-art-quellen h2 { margin: 0 0 14px; font-size: 18px; }
.wc-art-quellen ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.wc-art-quellen li { font-size: 13.5px; line-height: 1.5; color: #55544F; }
.wc-art-quellen li b { display: block; font-weight: 500; color: #141414; }
.wc-art-quellen a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wc-art-stand { margin: 14px 0 0 !important; font-size: 13px !important; color: #8A8984 !important; }
.wc-art-seite { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; }
.wc-art-inhalt { padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(20, 20, 20, .1); background: #fff; }
.wc-art-inhalt b { display: block; margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #55544F; }
.wc-art-inhalt ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; counter-reset: wis; }
.wc-art-inhalt li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.wc-art-inhalt li::before { counter-increment: wis; content: counter(wis, decimal-leading-zero); flex: none; padding-top: 2px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #8A8984; }
.wc-art-inhalt a { color: #141414; text-decoration: none; }
.wc-art-inhalt a:hover { color: var(--accent, #FB841C); }
.wc-art-cta { padding: 20px 22px; border-radius: 20px; color: #fff; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, #1E1E1E 0%, #121212 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.wc-art-cta-wer { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .7); }
.wc-art-cta-wer img { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; flex: none; }
.wc-art-cta-wer b { display: block; font-size: 14.5px; font-weight: 500; color: #fff; }
.wc-art-cta p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.wc-art-cta small { font-size: 12.5px; color: rgba(255, 255, 255, .6); text-align: center; }
@media (max-width: 1000px) {
  .wc-art { grid-template-columns: 1fr; }
  .wc-art-seite { position: static; }
  .wc-art-inhalt { display: none; }
  .wc-wis-auf { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wc-wis-raster { grid-template-columns: 1fr; }
  .wc-wis-auf { padding: 24px 20px; }
  .wc-art-text h2 { font-size: 24px; }
}

/* ── 9. Leadmagnet: die Psychologie-Bibel im Webdesign ──────────────────── */
/* Drei Bausteine aus tools/magnet.py: die Ankuendigung ueber der Kopfzeile der Startseite (.wc-ank),
   das Band ueber dem Footer (.wc-mg-band, dunkle Karte mit Buch und E-Mail-Feld) und die Landingpage
   /psychologie-bibel/ (.wc-mg-hero, Kapitel, Blick hinein, Autor). Das Buch ist das Deckblatt des PDFs
   mit zwei Innenseiten dahinter, in Schraegsicht; es dreht beim Erscheinen ein und folgt am Rechner
   leicht der Maus (seite.js). Nur transform und opacity werden bewegt. */

/* Ankuendigung */
.wc-ank {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: #141414; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.3;
  text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent;
}
.wc-ank:hover { color: #fff; }
.wc-ank-punkt { width: 8px; height: 8px; border-radius: 999px; background: var(--accent, #FB841C); box-shadow: 0 0 0 0 rgba(251, 132, 28, .5); animation: wc-ank-puls 2.2s ease-out infinite; }
@keyframes wc-ank-puls { 0% { box-shadow: 0 0 0 0 rgba(251, 132, 28, .55); } 100% { box-shadow: 0 0 0 9px rgba(251, 132, 28, 0); } }
.wc-ank em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.12em; color: #FDB27A; }
.wc-ank-cta { color: var(--accent, #FB841C); white-space: nowrap; }
.wc-ank:hover .wc-ank-cta { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .wc-ank { font-size: 13.5px; gap: 8px 10px; padding: 9px 14px; } .wc-ank-lang { display: none; } }

/* Das Buch */
.wc-mg-buch { position: relative; display: block; width: 100%; aspect-ratio: 992 / 1404; perspective: 1500px; text-decoration: none; }
.wc-mg-buch-raum {
  position: absolute; inset: 0; display: block; transform-style: preserve-3d;
  transform: rotateY(-16deg) rotateX(5deg);
  transition: transform 1.1s var(--wc-aus), opacity .8s ease;
}
.wc-mg-deckel, .wc-mg-blatt {
  position: absolute; inset: 0; display: block; border-radius: 4.5% / 3.2%; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 30px 60px -24px rgba(0, 0, 0, .7);
}
.wc-mg-deckel img, .wc-mg-blatt img { width: 100%; height: 100%; display: block; object-fit: cover; }
.wc-mg-deckel { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 40px 80px -30px rgba(0, 0, 0, .85), 0 12px 24px -16px rgba(0, 0, 0, .6); }
.wc-mg-blatt { box-shadow: 0 0 0 1px rgba(20, 20, 20, .08) inset, 0 20px 40px -24px rgba(0, 0, 0, .5); }
.wc-mg-blatt-1 { transform: translate3d(7%, 4%, -34px) rotateZ(3deg); }
.wc-mg-blatt-2 { transform: translate3d(14%, 8%, -68px) rotateZ(6deg); }
/* Beim Erscheinen dreht das Buch ein (data-reveal am Elternteil, gesetzt von seite.js) */
.wc-js [data-reveal]:not([data-reveal="in"]) .wc-mg-buch-raum { transform: rotateY(-42deg) rotateX(8deg) translateX(40px); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .wc-mg-buch:hover .wc-mg-buch-raum { transform: rotateY(-8deg) rotateX(3deg) translateY(-6px); }
}
.wc-mg-buch:focus-visible { outline: 2px solid var(--accent, #FB841C); outline-offset: 6px; border-radius: 12px; }

/* Formular: ein Feld, ein Knopf */
.wc-mg-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.wc-mg-feld { display: flex; gap: 10px; align-items: stretch; }
.wc-mg-feld .wc-fm-eingabe { flex: 1 1 200px; min-width: 0; }
.wc-mg-feld .wc-btn { flex: none; display: inline-flex; }
.wc-mg-feld .wc-btn-text { padding-right: 22px; }
.wc-mg-hilfe { margin: 0; font-size: 13px; line-height: 1.45; color: #B42318; }
.wc-mg-note { margin: 0; font-size: 13px; line-height: 1.5; color: #6B6A66; text-wrap: pretty; }
.wc-mg-danke { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; outline: none; }
.wc-mg-danke .wc-danke-haken { width: 46px; height: 46px; }
.wc-mg-danke-titel { margin: 2px 0 0; font-size: 24px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 500; text-wrap: balance; }
.wc-mg-danke-titel em, .wc-mg-karte h2 em, .wc-mg-autor-name em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.1em; }
.wc-mg-danke-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3A3A37; text-wrap: pretty; }
.wc-mg-danke-text b { font-weight: 500; color: #141414; }
.wc-mg-danke .wc-btn { display: inline-flex; margin-top: 4px; }
@media (max-width: 600px) {
  .wc-mg-feld { flex-direction: column; }
  .wc-mg-feld .wc-fm-eingabe { flex: 0 0 auto; }   /* untereinander: die Flex-Basis darf nicht zur Hoehe werden */
  .wc-mg-feld .wc-btn { display: flex; }
}

/* Band ueber dem Footer: der graue Grund des Footers beginnt schon hier, die Karte liegt darauf */
.wc-mg-band { background: rgb(243, 242, 239); padding: 72px 0 0; }
.wc-mg-band-innen { max-width: var(--wc-container); margin: 0 auto; padding: 0 var(--wc-gutter) 56px; }
.wc-mg-karte {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 56px; align-items: center;
  padding: clamp(24px, 3vw, 44px); border-radius: 28px; color: #fff;
  background: linear-gradient(180deg, #1E1E1E 0%, #121212 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .6);
}
.wc-mg-karte::before {
  content: ""; position: absolute; right: -12%; top: -30%; width: 64%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(251, 132, 28, .28) 0%, rgba(251, 132, 28, 0) 100%);
}
.wc-mg-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.wc-mg-pille {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap;
}
.wc-mg-pille img { width: 8px; height: 13px; display: block; }
.wc-mg-karte h2 { margin: 0; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.08; letter-spacing: -0.024em; font-weight: 500; text-wrap: balance; }
.wc-mg-karte > .wc-mg-text > p { margin: 0; max-width: 54ch; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.wc-mg-karte .wc-mg-form { margin-top: 6px; }
.wc-mg-karte .wc-fm-eingabe { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #fff; }
.wc-mg-karte .wc-fm-eingabe::placeholder { color: rgba(255, 255, 255, .45); }
.wc-mg-karte .wc-fm-eingabe:focus { background: rgba(255, 255, 255, .1); border-color: var(--accent, #FB841C); box-shadow: 0 0 0 3px rgba(251, 132, 28, .3); }
.wc-mg-karte .wc-mg-note { color: rgba(255, 255, 255, .6); }
.wc-mg-karte .wc-mg-hilfe { color: #FDB27A; }
.wc-mg-karte .wc-mg-danke-titel { color: #fff; }
.wc-mg-karte .wc-mg-danke-text { color: rgba(255, 255, 255, .78); }
.wc-mg-karte .wc-mg-danke-text b { color: #fff; }
.wc-mg-karte .wc-mg-buch { position: relative; max-width: 300px; justify-self: center; margin: 8px 0; }
@media (max-width: 1000px) {
  .wc-mg-karte { grid-template-columns: 1fr; }
  .wc-mg-karte::before { right: -24%; top: auto; bottom: -10%; width: 90%; }
  .wc-mg-karte .wc-mg-buch { max-width: 240px; margin: 12px 0 0; }
}
@media (max-width: 760px) {
  .wc-mg-band { padding-top: 56px; }
  .wc-mg-band-innen { padding: 0 20px 40px; }
  .wc-mg-karte { padding: 24px 20px; }
  .wc-mg-karte .wc-mg-buch { max-width: 200px; }
}

/* Landingpage */
.wc-mg-hero-form { width: 100%; max-width: 560px; }
.wc-mg-hero-form .wc-mg-danke { padding: 22px 24px; border-radius: 20px; border: 1px solid rgba(20, 20, 20, .1); background: #FAFAF8; }
.wc-mg-belege { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; font-weight: 500; color: #3A3A37; }
.wc-mg-belege span { display: inline-flex; align-items: center; gap: 8px; }
.wc-mg-belege span::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent, #FB841C); }
.wc-mg-hero-buch { display: flex; justify-content: center; }
.wc-mg-hero-buch .wc-mg-buch { max-width: 400px; }
.wc-mg-kapitel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wc-mg-kap {
  display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 24px; border-radius: 22px;
  border: 1px solid rgba(20, 20, 20, .1); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); min-width: 0;
}
.wc-mg-kap-nr { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .06em; color: var(--accent, #FB841C); }
.wc-mg-kap h3 { margin: 0; font-size: 22px; line-height: 1.18; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; }
.wc-mg-kap p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3A3A37; text-wrap: pretty; }
.wc-mg-kap-bsp { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 500; color: #55544F; }
.wc-mg-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wc-mg-zahlen div { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; border-radius: 18px; background: #F3F2EF; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 20, 20, .08); }
.wc-mg-zahlen b { font-size: 34px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.wc-mg-zahlen span { font-size: 13.5px; color: #55544F; }
.wc-mg-blick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wc-mg-blick-seite { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wc-mg-blick-seite img {
  width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(20, 20, 20, .1);
  box-shadow: 0 20px 40px -28px rgba(20, 20, 20, .5); transition: transform .5s var(--wc-aus), box-shadow .5s var(--wc-aus);
}
.wc-mg-blick-seite:hover img { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 30px 50px -28px rgba(20, 20, 20, .55); }
.wc-mg-blick-seite figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; font-weight: 500; color: #141414; }
.wc-mg-blick-seite figcaption span { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--accent, #FB841C); }
.wc-mg-autor { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px 40px; align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: 28px; border: 1px solid rgba(20, 20, 20, .1); background: #fff; }
.wc-mg-autor > img { width: 100%; height: auto; border-radius: 20px; display: block; mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent 100%); }
.wc-mg-autor-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wc-mg-autor-name { font-size: 28px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.wc-mg-autor-rolle { font-size: 14px; color: #55544F; }
.wc-mg-autor p { margin: 10px 0 0; max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: #2A2A27; text-wrap: pretty; }
.wc-mg-autor-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 18px; }
.wc-mg-autor-fuss img { height: 44px; width: auto; display: block; }
.wc-mg-autor-fuss a { font-size: 14.5px; font-weight: 500; color: #141414; text-decoration: underline; text-underline-offset: 4px; }
.wc-mg-autor-fuss a span { font-family: "Geist Mono", ui-monospace, monospace; color: var(--accent, #FB841C); }
@media (max-width: 1000px) {
  .wc-mg-kapitel { grid-template-columns: 1fr; }
  .wc-mg-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-mg-blick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-mg-hero-buch .wc-mg-buch { max-width: 320px; }
}
@media (max-width: 760px) {
  .wc-mg-hero-buch .wc-mg-buch { max-width: 220px; }
  /* schmale Handys: die hinteren Blaetter ragen sonst ein paar Pixel ueber den Rand */
  .wc-mg-blatt-1 { transform: translate3d(5%, 3%, -34px) rotateZ(2.5deg); }
  .wc-mg-blatt-2 { transform: translate3d(10%, 6%, -68px) rotateZ(5deg); }
  .wc-mg-blick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wc-mg-autor { grid-template-columns: 1fr; }
  .wc-mg-autor > img { max-width: 200px; }
  .wc-mg-zahlen b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .wc-ank-punkt { animation: none; }
  .wc-js [data-reveal]:not([data-reveal="in"]) .wc-mg-buch-raum { transform: rotateY(-16deg) rotateX(5deg); opacity: 1; }
  .wc-mg-buch-raum, .wc-mg-blick-seite img { transition: none; }
}

/* ── 10. SEO-Abschnitte und Standortseite ───────────────────────────────── */
/* Der Abschnitt vor den Fragen auf den Leistungsseiten (seo_block_einsetzen in bauen.py), im Aufbau der
   anderen Abschnitte: zentrierter Kopf mit Plakette, vier Kacheln mit Symbol, zwei Textspalten, Links. */
.wc-seo-h2 { max-width: 24ch; }
.wc-seo-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wc-seo-kachel {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; min-width: 0;
  border: 1px solid rgba(20, 20, 20, .1); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.wc-seo-kachel-icon {
  width: 40px; height: 40px; margin-bottom: 4px; border-radius: 11px; display: grid; place-items: center;
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, color-mix(in oklab, var(--accent, #FB841C) 92%, #fff) 44%, var(--accent, #FB841C) 100%));
}
.wc-seo-kachel-icon img { width: 18px; height: 18px; display: block; }
.wc-seo-kachel b { font-size: 17px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.25; color: #141414; }
.wc-seo-kachel p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3A3A37; text-wrap: pretty; }
.wc-seo-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; max-width: 1100px; margin: 0 auto; }
.wc-seo-text p { margin: 0; font-size: 16px; line-height: 1.7; color: #2A2A27; text-wrap: pretty; }
.wc-seo-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.wc-seo-links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #141414;
  background: #F3F2EF; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 20, 20, .08); text-decoration: none; transition: transform .15s ease, box-shadow .2s ease;
}
.wc-seo-links a:hover { color: #141414; transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 20, 20, .2); }
.wc-seo-links a span { font-family: "Geist Mono", ui-monospace, monospace; color: var(--accent, #FB841C); }
@media (max-width: 1000px) {
  .wc-seo-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-seo-text { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .wc-seo-kacheln { grid-template-columns: 1fr; } }

/* Standortseite /webagentur-linz/ (tools/standort.py) */
.wc-st-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.wc-st-aktionen .wc-btn { display: inline-flex; }
.wc-st-link { font-size: 14.5px; font-weight: 500; color: #141414; text-decoration: underline; text-underline-offset: 4px; }
.wc-st-link span { font-family: "Geist Mono", ui-monospace, monospace; color: var(--accent, #FB841C); }
.wc-st-link-hell { color: #fff; }
.wc-st-link-hell:hover { color: #fff; opacity: .85; }
.wc-st-hero-bild { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(20, 20, 20, .1); box-shadow: 0 30px 60px -30px rgba(20, 20, 20, .45); background: #F3F2EF; }
.wc-st-hero-bild img { width: 100%; height: auto; display: block; }
.wc-st-hero-marke {
  position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: #141414; color: #fff; font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55);
}
.wc-st-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wc-st-karte {
  display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 22px; min-width: 0; color: #141414; text-decoration: none;
  border: 1px solid rgba(20, 20, 20, .1); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); transition: transform .2s ease, box-shadow .2s ease;
}
.wc-st-karte:hover { color: #141414; transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(20, 20, 20, .35); }
.wc-st-karte-icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--grad, linear-gradient(90deg, color-mix(in oklab, var(--accent, #FB841C) 58%, #fff) 0%, color-mix(in oklab, var(--accent, #FB841C) 92%, #fff) 44%, var(--accent, #FB841C) 100%));
}
.wc-st-karte-icon img { width: 18px; height: 18px; display: block; }
.wc-st-karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.wc-st-karte h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.wc-st-karte-kopf > span { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--accent, #FB841C); }
.wc-st-karte p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3A3A37; text-wrap: pretty; }
.wc-st-karte-mehr { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; }
.wc-st-karte-mehr span { font-family: "Geist Mono", ui-monospace, monospace; color: var(--accent, #FB841C); }
.wc-st-naehe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.wc-st-naehe-text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.wc-st-naehe-text p { margin: 0; font-size: 16px; line-height: 1.7; color: #2A2A27; text-wrap: pretty; max-width: 60ch; }
.wc-st-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wc-st-punkte li { padding: 16px 18px; border-radius: 16px; background: #F3F2EF; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(20, 20, 20, .08); font-size: 14.5px; line-height: 1.55; color: #3A3A37; }
.wc-st-punkte b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 15.5px; color: #141414; }
.wc-st-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.wc-st-schritte li { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; border: 1px solid rgba(20, 20, 20, .1); background: #fff; min-width: 0; }
.wc-st-schritte li > span { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .06em; color: var(--accent, #FB841C); }
.wc-st-schritte b { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.wc-st-schritte p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3A3A37; text-wrap: pretty; }
.wc-st-projekt {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 48px; align-items: center;
  padding: clamp(24px, 3vw, 44px); border-radius: 28px; color: #fff; background: linear-gradient(180deg, #1E1E1E 0%, #121212 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px -30px rgba(0, 0, 0, .6);
}
.wc-st-projekt::before { content: ""; position: absolute; right: -16%; top: -24%; width: 70%; aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle closest-side, rgba(251, 132, 28, .26) 0%, rgba(251, 132, 28, 0) 100%); }
.wc-st-projekt-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.wc-st-projekt h2 { margin: 0; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -0.024em; font-weight: 500; text-wrap: balance; }
.wc-st-projekt h2 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.1em; }
.wc-st-projekt p { margin: 0; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.wc-st-projekt-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.wc-st-projekt-links .wc-btn { display: inline-flex; }
.wc-st-projekt-bild { position: relative; border-radius: 18px; overflow: hidden; background: #F3F2EF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -24px rgba(0, 0, 0, .8); transform: rotate(1.5deg); }
.wc-st-projekt-bild img { width: 100%; height: auto; display: block; }
.wc-st-faq { max-width: 860px; }
@media (max-width: 1000px) {
  .wc-st-karten { grid-template-columns: 1fr; }
  .wc-st-naehe { grid-template-columns: 1fr; }
  .wc-st-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-st-projekt { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wc-st-schritte { grid-template-columns: 1fr; }
  .wc-st-projekt { padding: 24px 20px; }
}