/* webseite-expert-fix.css */
/* Laedt nach webseite-expert.css (alphabetisch) — Korrekturen und Pakete. */

/* Der Hero-Glow muss absolut bleiben; die generische .wx-hero > * Regel
   hatte ihn in den Fluss geholt und damit den Hero-Inhalt nach unten geschoben. */
.wx-hero > .wx-hero-glow {
  position: absolute;
  z-index: 0;
}

/* Headlines dunkel; der Akzent kommt allein ueber .wx-grad-text. */
.wx-h1,
.page-home .section-title {
  color: var(--color-text);
}
.wx-h1 .wx-grad-text,
.page-home .section-title .wx-grad-text {
  color: transparent;
}

/* ---------- Pakete ---------- */
.wx-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
  text-align: left;
}
@media (max-width: 920px) {
  .wx-tiers {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.wx-tier {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 24px;
  padding: 2.1rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  box-shadow: 0 10px 30px -18px rgba(12, 27, 26, 0.16);
  transition: transform 0.4s var(--wx-ease), border-color 0.3s, box-shadow 0.4s var(--wx-ease);
}
.wx-tier:hover {
  transform: translateY(-5px);
  border-color: var(--wx-line-2);
  box-shadow: 0 22px 44px -20px rgba(12, 27, 26, 0.22);
}
.wx-tier.is-mid {
  background:
    radial-gradient(500px 260px at 50% -20%, rgba(15, 118, 110, 0.1), transparent 65%),
    var(--wx-card);
  border-color: rgba(15, 118, 110, 0.45);
  box-shadow: 0 30px 70px -30px rgba(15, 118, 110, 0.4);
}
.wx-tier-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wx-grad);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
}
.wx-tier-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}
.wx-tier-name small {
  display: block;
  font-size: 0.8rem;
  color: var(--wx-muted-2);
  font-weight: 400;
  margin-top: 0.15rem;
}
.wx-tier-price {
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.wx-tier-price small {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wx-muted-2);
  letter-spacing: 0;
}
.wx-tier-for {
  color: var(--wx-muted);
  font-size: 0.88rem;
  min-height: 2.6em;
  margin: 0;
}
.wx-tier-list {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--wx-line);
  display: grid;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--wx-muted);
}
.wx-tier-list li {
  padding-left: 1.6rem;
  position: relative;
}
.wx-tier-list li svg {
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}
.wx-tier-list li b {
  color: var(--color-text);
  font-weight: 600;
}
.wx-tier-setup {
  font-size: 0.86rem;
  color: var(--wx-muted-2);
  margin: 0;
}
.wx-tier-setup b {
  color: var(--color-primary);
  font-weight: 700;
}
.wx-tier .btn {
  margin-top: auto;
  justify-content: center;
  text-align: center;
}
.wx-tiers-note {
  text-align: center;
  color: var(--wx-muted-2);
  font-size: 0.85rem;
  margin-top: 1.6rem;
}

/* webseite-expert-seiten.css */
/* Unterseiten (pakete, beispiele, so-funktionierts, ueber, kontakt):
   Alt-Klassen aus dem Vorgaenger-Design auf den Framer-Look mappen.
   Laedt nach webseite-expert-fix.css. */

/* ---------- Hero der Unterseiten ---------- */
.wx-hero-grid {
  display: block;
  text-align: center;
}
.wx-hero-grid > .wx-visual {
  display: none;
}
.wx-price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  color: var(--wx-muted);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  margin-top: 1.4rem;
  box-shadow: 0 4px 16px -6px rgba(12, 27, 26, 0.12);
}
.wx-price-chip b {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------- Problem-Karten ---------- */
.wx-prob,
.card.wx-prob {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 24px;
  padding: 2rem 1.8rem;
  box-shadow: 0 10px 30px -18px rgba(12, 27, 26, 0.16);
  transform: none;
  transition: transform 0.4s var(--wx-ease), border-color 0.3s, box-shadow 0.4s var(--wx-ease);
}
.wx-prob:hover {
  transform: translateY(-4px);
  border-color: var(--wx-line-2);
  box-shadow: 0 22px 44px -20px rgba(12, 27, 26, 0.22);
}
.wx-prob h3 {
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.wx-prob p {
  color: var(--wx-muted);
  font-size: 0.95rem;
}
.problem-loesung {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  background: var(--wx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Prozess-Timeline ---------- */
.wx-process {
  position: relative;
  margin-top: 2rem;
}
.wx-pline {
  position: absolute;
  left: 21px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--wx-line);
  border-radius: 2px;
}
.wx-pline-fill {
  display: none;
}
.wx-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.4rem;
  padding: 1rem 0;
  position: relative;
}
.wx-step-dot {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--wx-card);
  border: 1px solid rgba(15, 118, 110, 0.25);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 1;
  box-shadow: 0 6px 18px -10px rgba(12, 27, 26, 0.2);
}
.wx-step h3 {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}
.wx-step p {
  color: var(--wx-muted);
  font-size: 0.94rem;
  max-width: 40rem;
}

/* ---------- Kennzahlen ---------- */
.wx-counters {
  display: grid;
  gap: 0.85rem;
  margin-top: 2rem;
}
@media (min-width: 900px) {
  .wx-counters { grid-template-columns: repeat(3, 1fr); }
}
.wx-counter {
  background: var(--color-surface);
  border: 1px solid var(--wx-line);
  border-radius: 16px;
  padding: 1.2rem 1.35rem;
}
.wx-counter b {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--wx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.2rem;
}
.wx-counter span {
  font-size: 0.86rem;
  color: var(--wx-muted);
}

/* Das Warum-Band wird auf Unterseiten einspaltig genutzt. */
.wx-why:not(:has(.wx-stats)) {
  display: block;
}

/* ---------- Ueber-uns-Bereich (ohne Personenfoto) ---------- */
.wx-about-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 860px) {
  .wx-about-grid { grid-template-columns: 0.85fr 1.15fr; }
}
.wx-about-portrait {
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(15, 118, 110, 0.12), transparent 62%),
    var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 28px;
  min-height: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--wx-muted-2);
  font-size: 0.88rem;
  box-shadow: 0 24px 60px -32px rgba(12, 27, 26, 0.22);
  transform: none;
}

/* ---------- Alt-Animationen neutralisieren ---------- */
.wx-intro-fade,
.wx-intro-1,
.wx-intro-2,
.wx-intro-3,
.wx-intro-pop {
  opacity: 1;
  transform: none;
  animation: none;
}
.wx-draw {
  position: relative;
  background: var(--wx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wx-draw::after { display: none; }

/* webseite-expert-zz-global.css */
/* Zuletzt geladen: globaler Angleich aller Seiten an den Mockup-Look. */

/* ---------- Headlines: dunkel statt durchgaengig gruen ---------- */
h1,
.hero-title,
.section-title {
  color: var(--color-text);
  letter-spacing: -0.035em;
}
h1,
.hero-title {
  letter-spacing: -0.045em;
  line-height: 1.05;
}
/* Auf abgesetzten dunklen Sections bleibt die Kern-Farbgebung. */
.section-inverse h1,
.section-inverse .hero-title,
.section-inverse .section-title,
.section-inverse h2,
.section-inverse h3 {
  color: inherit;
}
/* Farbakzent im Fliesstext der Headline bleibt der Verlauf. */
.wx-grad-text {
  background: var(--wx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* .wx-card p ist spezifischer als .wx-grad-text und hat den Verlauf in
   Karten (z. B. „Es geht einfacher.") zu Fliesstext-Grau eingefaerbt. */
.wx-card p.wx-grad-text,
.wx-card .wx-grad-text,
.wx-prob .wx-grad-text,
.wx-tool .wx-grad-text {
  color: transparent;
}

/* ---------- Karten-Ueberschriften dunkel wie im Mockup ---------- */
.wx-card h3,
.wx-ref-body h3,
.wx-prob h3,
.wx-step h3,
.wx-panel-row b {
  color: var(--color-text);
}

/* ---------- Kicker als Pille wie im Mockup ---------- */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--color-primary);
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.22);
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.section-inverse .section-kicker {
  color: inherit;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ---------- Karten im Framer-Look ---------- */
.card {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 24px;
  box-shadow: 0 10px 30px -18px rgba(12, 27, 26, 0.16);
  transition: transform 0.4s var(--wx-ease), border-color 0.3s, box-shadow 0.4s var(--wx-ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--wx-line-2);
  box-shadow: 0 22px 44px -20px rgba(12, 27, 26, 0.22);
}

/* ---------- Buttons: runde Pillen mit weichem Schatten ---------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--wx-ease), box-shadow 0.25s var(--wx-ease), background 0.2s;
}
.btn-primary,
.btn-accent {
  box-shadow: 0 8px 26px -8px rgba(15, 118, 110, 0.45);
}
.btn:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   FAQ-Akkordeon im Mockup-Look
   Kern-Markup: .section-faq > .divide-y > details.faq-item.py-4
     > summary.font-semibold.text-primary + div.mt-2.text-secondary
   Statt Trennlinien: eigenstaendige Karten mit Plus-Kreis, der beim
   Oeffnen zum X rotiert. Tastaturbedienung bleibt nativ (<details>).
   ========================================================================== */

/* Trennstriche der .divide-y-Liste neutralisieren — die Karten trennen selbst. */
.section-faq .divide-y > *,
.section-faq .divide-y > * + * {
  border-top-width: 0;
  border-bottom-width: 0;
}

.section-faq .faq-item,
details.faq-item {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 16px;
  margin-bottom: 0.7rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px -16px rgba(12, 27, 26, 0.14);
  transition: border-color 0.3s, box-shadow 0.3s var(--wx-ease);
}
.section-faq .faq-item:hover,
.section-faq .faq-item[open] {
  border-color: var(--wx-line-2);
  box-shadow: 0 14px 32px -18px rgba(12, 27, 26, 0.2);
}

.section-faq .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  margin: 0;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.section-faq .faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus-Kreis: zwei Balken als Hintergrund-Verlaeufe, damit kein
   zusaetzliches Markup noetig ist (die Kern-Component ist fix). */
.section-faq .faq-item summary::after {
  content: "";
  position: static;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--wx-line-2);
  background-color: transparent;
  background-image:
    linear-gradient(var(--wx-muted), var(--wx-muted)),
    linear-gradient(var(--wx-muted), var(--wx-muted));
  background-size: 10px 1.5px, 1.5px 10px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform 0.35s var(--wx-ease), background-color 0.3s, border-color 0.3s;
}
.section-faq .faq-item[open] summary::after {
  transform: rotate(45deg);
  background-color: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.4);
  background-image:
    linear-gradient(var(--color-primary), var(--color-primary)),
    linear-gradient(var(--color-primary), var(--color-primary));
}

.section-faq .faq-item > div {
  margin: 0;
  padding: 0 1.4rem 1.3rem;
  max-width: 42rem;
  color: var(--wx-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Akkordeons ausserhalb der FAQ-Section (z. B. Consent-Details)
   bleiben unangetastet — nur die Kartenkontur angleichen. */
details:not(.faq-item) {
  border-radius: 14px;
}

/* webseite-expert-zz-tools.css */
/* ==========================================================================
   Frontend-Tools und Referenz-Karten im Framer-Look
   (Mockup-Sektionen „Live-Demo" und „Echte Projekte")
   Gilt fuer die Livewire-Tools auf der Startseite, unter /beispiele und
   auf den eigenen Tool-Seiten /tools/{slug}.
   Laedt nach webseite-expert-zz-global.css.
   ========================================================================== */

.wx-tool {
  background:
    radial-gradient(420px 220px at 82% -12%, rgba(15, 118, 110, 0.1), transparent 62%),
    var(--wx-card);
  border: 1px solid rgba(15, 118, 110, 0.3);
  border-radius: 24px;
  padding: 2rem 1.9rem;
  box-shadow: 0 18px 44px -24px rgba(15, 118, 110, 0.35);
}
/* Die Tools erben sonst den .card-Hover-Lift — hier stoert er beim Tippen. */
.wx-tool:hover {
  transform: none;
}
@media (max-width: 560px) {
  .wx-tool { padding: 1.5rem 1.2rem; }
}

.wx-tool-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.7rem;
}
.wx-tool-title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 0.4rem;
}
.wx-tool-lede {
  color: var(--wx-muted);
  font-size: 0.93rem;
  margin: 0 0 1.5rem;
}

/* ---------- Eingaben ---------- */
.wx-tool label,
.wx-tool legend {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.wx-tool .tool-input {
  border: 1px solid var(--wx-line-2);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wx-tool .tool-input:hover {
  border-color: rgba(15, 118, 110, 0.45);
}
.wx-tool .tool-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1);
}
.wx-tool-hint {
  font-size: 0.8rem;
  color: var(--wx-muted-2);
  margin-top: 0.35rem;
}
.wx-tool-error {
  font-size: 0.82rem;
  color: #b91c1c;
  margin-top: 0.35rem;
}

/* ---------- Ergebnis ---------- */
.wx-tool .tool-result {
  border-left: 0;
  background: transparent;
  border-top: 1px solid var(--wx-line);
  border-radius: 0;
  padding: 1.3rem 0 0;
  margin-top: 1.6rem;
}
.wx-res-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wx-muted-2);
  margin-bottom: 0.9rem;
}
.wx-res-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  margin: 0;
  border-bottom: 1px solid var(--wx-line);
  font-size: 0.93rem;
  color: var(--wx-muted);
}
.wx-res-row b {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wx-res-row.is-ours {
  color: var(--color-text);
  font-weight: 600;
}
.wx-res-row.is-save {
  border-bottom: 0;
  padding-top: 0.9rem;
}
.wx-res-row.is-save b {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--wx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wx-res-note {
  font-size: 0.79rem;
  color: var(--wx-muted-2);
  margin-top: 1.1rem;
  line-height: 1.6;
}
.wx-res-note strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* Score-Balken des Selbstchecks */
.wx-score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.wx-score b {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--wx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wx-score span {
  font-size: 0.85rem;
  color: var(--wx-muted-2);
}
.wx-meter {
  height: 8px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--wx-line);
  overflow: hidden;
}
.wx-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wx-grad);
}
.wx-res-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 1.2rem 0 0.5rem;
}
.wx-res-text {
  color: var(--wx-muted);
  font-size: 0.95rem;
}

/* ---------- Lead-Capture unter dem Ergebnis ---------- */
.wx-capture {
  background: var(--color-surface-alt);
  border: 1px solid var(--wx-line);
  border-radius: 18px;
  padding: 1.5rem 1.4rem;
  margin-top: 1.6rem;
  box-shadow: none;
}
.wx-capture:hover {
  transform: none;
  box-shadow: none;
}
.wx-capture h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}
.wx-capture .wx-tool-hint {
  margin-bottom: 1.1rem;
}
.wx-capture-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--wx-muted);
  margin-bottom: 1rem;
  cursor: pointer;
}
.wx-capture-consent input {
  margin-top: 0.25rem;
  accent-color: var(--color-primary);
}

/* ==========================================================================
   Schritt-Widget: eine Frage pro Schritt (Prinzip Typeform, eingebettet)
   Gilt fuer beide Live-Demo-Tools (.wx-wiz).

   Ohne JavaScript bleiben alle Schritte sichtbar und untereinander
   bedienbar — erst Alpine setzt .wx-js an <html> und schaltet auf
   Einzelschritte um. Der Fallback-Absendeknopf (.wx-wiz-nojs) verschwindet
   genau dann.

   Achtung Spezifitaet: .wx-tool label / .wx-tool legend weiter oben sind
   0-1-1 und schlagen einklassige Regeln. Alles, was ein label oder legend
   trifft, deshalb als .wx-wiz .wx-wiz-* schreiben (0-2-0).
   ========================================================================== */

/* Vor dem Alpine-Start alles Schrittbezogene verstecken — aber NUR, wenn
   ueberhaupt JavaScript laeuft. Ohne JS wird x-cloak nie entfernt; die
   Regel darf dort also gar nicht erst greifen, sonst bliebe das Widget leer. */
@media (scripting: enabled) {
  .wx-wiz [x-cloak] { display: none; }
}
/* Das JS-Signal haengt an <html>, nicht am Komponenten-Root: Livewire morpht
   den Root bei jedem Re-Render gegen das Server-HTML und entfernt eine dort
   per JS gesetzte Klasse wieder (verifiziert am 27.07.). */
.wx-js .wx-wiz-nojs { display: none; }

/* ---------- Kopf mit Fortschritt ---------- */
.wx-wiz-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}
.wx-wiz-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--wx-line);
  overflow: hidden;
}
.wx-wiz-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wx-grad);
  transition: width 0.45s var(--wx-ease);
}
.wx-wiz-count {
  flex: none;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--wx-muted-2);
  font-variant-numeric: tabular-nums;
}
.wx-wiz-count b {
  font-weight: 700;
  color: var(--color-primary);
}

/* ---------- Buehne ---------- */
/* Feste Mindesthoehe, damit die Seite beim Schrittwechsel nicht springt. */
.wx-js .wx-wiz-stage { min-height: 310px; }
@media (max-width: 560px) {
  .wx-js .wx-wiz-stage { min-height: 350px; }
}
/* Ohne JS stehen alle Schritte untereinander und brauchen Trennung. */
html:not(.wx-js) .wx-wiz-step + .wx-wiz-step {
  border-top: 1px solid var(--wx-line);
  padding-top: 1.4rem;
  margin-top: 1.4rem;
}

/* Ein-/Ausblenden der Schritte per CSS-Animation, NICHT per JS-Transition.
   Grund: JS-Transitions haengen an requestAnimationFrame. Laeuft rAF nicht
   (Hintergrund-Tab, gedrosselter Browser), bleibt der Schritt auf
   display:none/opacity:0 stehen — das Widget waere leer. Eine CSS-Animation
   OHNE animation-fill-mode faellt dagegen auf die Normalstile zurueck: laeuft
   sie nicht, ist der Schritt einfach sofort da.
   Die Richtung haengt an der Buehne: vorwaerts von unten, zurueck von oben. */
.wx-js .wx-wiz-step {
  animation: wx-step-in 0.32s var(--wx-ease);
}
.wx-js .wx-wiz-stage.is-back .wx-wiz-step {
  animation-name: wx-step-in-back;
}
@keyframes wx-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes wx-step-in-back {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Frage ---------- */
.wx-wiz-fs {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.wx-wiz .wx-wiz-q {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 0.5rem;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.28;
  color: var(--color-text);
}
.wx-wiz .wx-wiz-q:focus { outline: none; }
.wx-wiz .wx-wiz-q:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 5px;
  border-radius: 6px;
}
.wx-wiz-help {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--wx-muted);
  margin: 0 0 1.4rem;
}

/* ---------- Antwortkarten ---------- */
.wx-wiz-opts {
  display: grid;
  gap: 0.55rem;
}
.wx-wiz .wx-wiz-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--wx-line-2);
  border-radius: 14px;
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s,
              transform 0.18s var(--wx-ease);
}
.wx-wiz .wx-wiz-opt:hover {
  border-color: rgba(15, 118, 110, 0.5);
  background: rgba(15, 118, 110, 0.035);
  transform: translateX(3px);
}
.wx-wiz .wx-wiz-opt:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.wx-wiz .wx-wiz-opt:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(15, 118, 110, 0.07);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}
/* Der Radiobutton bleibt nativ (Tastatur, Screenreader), ist nur unsichtbar. */
.wx-wiz-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.wx-wiz-key {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--wx-line-2);
  background: var(--color-surface-alt);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--wx-muted-2);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.wx-wiz-opt:has(input:checked) .wx-wiz-key {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.wx-wiz-opt-t { display: block; }
.wx-wiz-opt-d {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wx-muted-2);
}

/* ---------- Fussleiste je Schritt ---------- */
.wx-wiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}
.wx-wiz-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  padding: 0.3rem 0.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wx-muted-2);
  cursor: pointer;
  transition: color 0.18s;
}
.wx-wiz-back::before {
  content: "\2190";
  font-size: 1rem;
  line-height: 1;
}
.wx-wiz-back:hover { color: var(--color-primary); }
.wx-wiz-back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 6px;
}
.wx-wiz-hint {
  font-size: 0.75rem;
  color: var(--wx-muted-2);
}
.wx-wiz-hint kbd {
  display: inline-block;
  min-width: 1.2rem;
  padding: 0.05rem 0.3rem;
  text-align: center;
  border: 1px solid var(--wx-line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--color-surface);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wx-muted);
}
/* Auf Touchgeraeten gibt es keine Tastenkuerzel zu zeigen — und auf schmalen
   Screens ist in der Fussleiste ohnehin kein Platz dafuer. */
@media (hover: none), (max-width: 560px) {
  .wx-wiz-hint { display: none; }
}

.wx-wiz-navr {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.wx-wiz-next {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: filter 0.18s, opacity 0.18s;
}
.wx-wiz-next::after {
  content: "\2192";
  font-size: 0.95rem;
  line-height: 1;
}
.wx-wiz-next:hover { filter: brightness(1.1); }
.wx-wiz-next:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
/* Deaktiviert heisst: Antwort fehlt noch — sichtbar, aber zurueckgenommen. */
.wx-wiz-next:disabled {
  background: var(--color-surface-alt);
  border-color: var(--wx-line-2);
  color: var(--wx-muted-2);
  cursor: not-allowed;
  filter: none;
}

/* ---------- Startschritt ---------- */
.wx-wiz .wx-wiz-welcome .wx-wiz-q {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  letter-spacing: -0.035em;
  margin-bottom: 0.6rem;
}
.wx-wiz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.7rem;
}
.wx-wiz-meta li {
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--wx-line);
  border-radius: 999px;
  background: var(--color-surface-alt);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--wx-muted);
}

/* ---------- Ergebnisschritt ---------- */
.wx-wiz-result .tool-result {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.wx-wiz-load {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 2.4rem 0;
  font-size: 0.9rem;
  color: var(--wx-muted);
}
.wx-wiz-load::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--wx-line-2);
  border-top-color: var(--color-primary);
  animation: wx-spin 0.7s linear infinite;
}
@keyframes wx-spin {
  to { transform: rotate(360deg); }
}
.wx-wiz-restart {
  background: none;
  border: 0;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wx-muted-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wx-wiz-restart:hover { color: var(--color-primary); }
.wx-wiz-restart:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Kostenvergleich mit Balken ---------- */
.wx-cmp {
  display: grid;
  gap: 1.1rem;
}
.wx-cmp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: var(--wx-muted);
}
.wx-cmp-top b {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wx-cmp-row.is-ours .wx-cmp-top {
  color: var(--color-text);
  font-weight: 600;
}
.wx-cmp-row.is-ours .wx-cmp-top b {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.wx-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--wx-line);
  overflow: hidden;
}
.wx-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wx-line-2);
  transition: width 0.6s var(--wx-ease);
}
.wx-cmp-row.is-ours .wx-bar i {
  background: var(--wx-grad);
}

@media (prefers-reduced-motion: reduce) {
  .wx-js .wx-wiz-step { animation: none; }
  .wx-wiz-bar i,
  .wx-bar i { transition: none; }
  .wx-wiz .wx-wiz-opt:hover { transform: none; }
  .wx-wiz-load::before { animation-duration: 2.4s; }
}

/* ==========================================================================
   Referenz-Karten mit echten Screenshots
   ========================================================================== */
.wx-ref-shot {
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--wx-line);
}
.wx-ref-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--wx-ease);
}
.wx-ref:hover .wx-ref-shot img {
  transform: scale(1.03);
}
.wx-ref-body a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.wx-ref-body a:hover {
  text-decoration: underline;
}
.wx-ico-inline {
  width: 14px;
  height: 14px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .wx-ref:hover .wx-ref-shot img { transform: none; }
}


/* webseite-expert-zz-ui.css */
/* ==========================================================================
   Ein Button-System, der CTA-Abschluss und der Footer
   Laedt nach webseite-expert-zz-tools.css (alphabetisch: ...-zz-ui).

   Grundsatz: Buttons haben ZWEI Kontexte, nicht viele Varianten.
   - Auf hellen Flaechen: Primaer = Verlauf Teal->Blau, Sekundaer = Ghost.
   - Auf dunklen Flaechen (.section-inverse, Footer): Primaer = Negativ,
     also weiss mit dunkelgruener Schrift; Sekundaer = weisse Kontur.
   Damit beisst sich kein Button mehr mit seinem Hintergrund.
   Kontraste geprueft: #0f766e auf #fff = 5,5:1; Footer-Text >= 5,7:1 (AA).
   ========================================================================== */

/* ---------- 1. Buttons auf hellen Flaechen ---------- */
.btn {
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
}

/* Primaer: der Verlauf ist der eine Primaer-Look der Marke. */
.btn-primary,
.btn-accent,
.btn.wx-btn-grad {
  background: var(--wx-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 26px -8px rgba(15, 118, 110, 0.45);
}
.btn-primary:hover,
.btn-accent:hover,
.btn.wx-btn-grad:hover {
  background: var(--wx-grad);
  color: #fff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px -8px rgba(15, 118, 110, 0.55);
}

/* Sekundaer: ruhiger Ghost-Button statt harter Kontur. */
.btn-outline {
  background: rgba(12, 27, 26, 0.045);
  border-color: var(--wx-line-2);
  color: var(--color-text);
  box-shadow: none;
}
.btn-outline:hover {
  background: rgba(12, 27, 26, 0.09);
  border-color: var(--wx-line-2);
  color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: none;
}

/* ---------- 2. Negativ-Buttons auf dunklen Flaechen ---------- */
.section-inverse .btn-primary,
.section-inverse .btn-accent,
.section-inverse .btn.wx-btn-grad,
.site-footer .btn-primary,
.site-footer .btn-accent {
  background: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
}
.section-inverse .btn-primary:hover,
.section-inverse .btn-accent:hover,
.section-inverse .btn.wx-btn-grad:hover,
.site-footer .btn-primary:hover,
.site-footer .btn-accent:hover {
  background: #ffffff;
  color: #0a544e;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.6);
}

.section-inverse .btn-outline {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
.section-inverse .btn-outline:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  color: #ffffff;
}

/* Fokus bleibt auf dunklem Grund sichtbar (WCAG 2.4.7). */
.section-inverse .btn:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ---------- 3. Abschluss-CTA ---------- */
.section-cta.section-inverse {
  position: relative;
  overflow: hidden;
  /* Statt Flaechengruen: Tiefe von Teal nach Petrol, Licht von oben. */
  background:
    radial-gradient(900px 420px at 50% -14%, rgba(255, 255, 255, 0.13), transparent 62%),
    linear-gradient(165deg, #0f766e 0%, #0b544f 46%, #073b46 100%);
  color: #ffffff;
  padding-block: 6rem 6.5rem;
  margin-bottom: 0;
}
/* Haarlinie oben: trennt die CTA sauber von der hellen Sektion darueber. */
.section-cta.section-inverse::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}
.section-cta.section-inverse .section-kicker {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.section-cta.section-inverse .section-title {
  color: #ffffff;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  letter-spacing: -0.04em;
  line-height: 1.08;
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: 1.1rem;
}
.section-cta.section-inverse .section-intro {
  color: rgba(255, 255, 255, 0.82);
  opacity: 1;
  font-size: 1.05rem;
  max-width: 34rem;
  margin-bottom: 2.2rem;
}
.section-cta.section-inverse .btn {
  margin-top: 0;
}

/* ---------- 4. Footer: schwarz, aufgeraeumt, zweispaltig ---------- */
.site-footer {
  /* Der weisse Streifen zwischen letzter Sektion und Footer kam von
     margin-top: var(--space-2xl) im Kern-CSS. */
  margin-top: 0;
  background: #0a0f0e;
  color: rgba(255, 255, 255, 0.66);
  padding-block: 3.6rem 1.5rem;
  border-top: 0;
  position: relative;
  overflow: hidden;
}
/* Markenschimmer am oberen Rand — laesst den Uebergang von der CTA in
   das Schwarz gefuehrt wirken statt abgeschnitten. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  background: radial-gradient(760px 200px at 18% 0%, rgba(15, 118, 110, 0.2), transparent 72%);
}
.site-footer > * {
  position: relative;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  padding-bottom: 2.4rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .site-footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3.5rem;
  }
  .menu-footer {
    justify-self: end;
  }
}
.site-footer-company strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 0.9rem;
}
.site-footer-company p {
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0.1rem 0;
  color: rgba(255, 255, 255, 0.62);
}
.site-footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer a:hover {
  color: #ffffff;
  text-decoration: none;
}
/* Fussnavigation zweispaltig — eine lange Einzelspalte wirkt wie ein Rest. */
.menu-footer > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, max-content));
  gap: 0.7rem 3rem;
}
.menu-footer a {
  font-size: 0.93rem;
  font-weight: 500;
}
@media (max-width: 30rem) {
  .menu-footer > ul { grid-template-columns: 1fr; }
}

.site-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.58);
  opacity: 1;
}
.site-footer-legal p {
  margin: 0;
}
.site-footer .consent-reopen {
  color: rgba(255, 255, 255, 0.58);
}
.site-footer .consent-reopen:hover {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* webseite-expert-zz-v-kontakt.css */
/* ==========================================================================
   Lead-Formulare und die Kontaktseite
   Laedt nach webseite-expert-zz-ui.css (alphabetisch: ...-zz-v-kontakt).
   ========================================================================== */

/* ---------- 1. Lead-Wizard global im Framer-Look ---------- */
.lead-wizard,
.lead-form {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 24px;
  padding: 1.9rem 1.8rem;
  box-shadow: 0 18px 44px -26px rgba(12, 27, 26, 0.22);
}
@media (max-width: 560px) {
  .lead-wizard,
  .lead-form { padding: 1.4rem 1.2rem; }
}

/* Box-in-Box: <x-section.contact> legt das Formular in eine .card, und der
   Wizard bringt seine eigene Karte mit. Die aeussere Huelle neutralisieren. */
.section-contact .card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.section-contact .card:hover {
  transform: none;
  box-shadow: none;
}

.lead-wizard-step-title,
.lead-form h3 {
  color: var(--color-text);
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}
.lead-wizard-progress-text {
  color: var(--wx-muted-2);
  font-size: 0.82rem;
  opacity: 1;
}
.lead-wizard-progress-bar {
  background: var(--color-surface);
  border: 1px solid var(--wx-line);
  height: 0.5rem;
  border-radius: 999px;
}
.lead-wizard-progress-fill {
  background: var(--wx-grad);
  border-radius: 999px;
}

/* Auswahl-Schaltflaechen wie die Segment-Buttons der Tools. */
.lead-wizard-choices {
  gap: 0.45rem;
}
.lead-wizard-choice {
  border-radius: 999px;
  border: 1px solid var(--wx-line-2);
  background: var(--color-surface);
  color: var(--wx-muted);
  padding: 0.55rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.lead-wizard-choice:hover {
  border-color: rgba(15, 118, 110, 0.5);
  color: var(--color-text);
}
.lead-wizard-choice.is-selected {
  background: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.5);
  color: var(--color-primary);
  font-weight: 600;
}

.lead-wizard-field > label,
.lead-form-field > label {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.lead-wizard-field input[type="text"],
.lead-wizard-field input[type="email"],
.lead-wizard-field input[type="tel"],
.lead-wizard-field input[type="date"],
.lead-wizard-field textarea,
.lead-form-field input,
.lead-form-field textarea {
  border: 1px solid var(--wx-line-2);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
}
.lead-wizard-consent,
.lead-form-privacy {
  color: var(--wx-muted);
}

/* Navigation: gleiches Button-System wie der Rest der Seite. */
.lead-wizard-nav .lead-wizard-next {
  background: var(--wx-grad);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 26px -8px rgba(15, 118, 110, 0.45);
  transition: transform 0.25s var(--wx-ease), box-shadow 0.25s var(--wx-ease);
}
.lead-wizard-nav .lead-wizard-next:hover {
  background: var(--wx-grad);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px -8px rgba(15, 118, 110, 0.55);
}
.lead-wizard-nav .lead-wizard-back {
  background: rgba(12, 27, 26, 0.045);
  border: 1px solid var(--wx-line-2);
  color: var(--color-text);
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.lead-wizard-nav .lead-wizard-back:hover {
  background: rgba(12, 27, 26, 0.09);
}

.lead-wizard-success,
.lead-form-success {
  border-left: 0;
  border: 1px solid rgba(15, 118, 110, 0.3);
  background:
    radial-gradient(400px 180px at 20% -20%, rgba(15, 118, 110, 0.1), transparent 65%),
    var(--wx-card);
  border-radius: 18px;
  padding: 1.5rem 1.6rem;
  font-size: 1rem;
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .lead-wizard-nav .lead-wizard-next:hover { transform: none; }
}

/* ---------- 2. Kontaktseite: Hero ---------- */
.wx-kontakt-hero {
  padding-bottom: 0;
}
.wx-kontakt-title {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.wx-kontakt-lede {
  color: var(--wx-muted);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 38rem;
  margin-inline: auto;
}

/* Gewaehltes Paket aus ?paket=… */
.wx-paket-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--wx-card);
  border: 1px solid rgba(15, 118, 110, 0.35);
  border-radius: 999px;
  padding: 0.45rem 0.5rem 0.45rem 1.15rem;
  margin-top: 1.7rem;
  box-shadow: 0 12px 30px -16px rgba(15, 118, 110, 0.45);
}
.wx-paket-chip-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wx-muted-2);
}
.wx-paket-chip b {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.wx-paket-chip-preis {
  background: var(--wx-grad);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.wx-paket-chip-note {
  font-size: 0.88rem;
  color: var(--wx-muted);
  line-height: 1.6;
  max-width: 34rem;
  margin: 0.9rem auto 0;
}

/* ---------- 3. Kontaktseite: Formular + Begleitspalte ---------- */
.wx-kontakt {
  padding-top: 2.6rem;
}
.wx-kontakt-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 62rem) {
  .wx-kontakt-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: start;
  }
}
.wx-kontakt-h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}
.wx-kontakt-sub {
  color: var(--wx-muted);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 1.6rem;
}

.wx-kontakt-side {
  display: grid;
  gap: 1rem;
}
.wx-side-card {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 20px;
  padding: 1.6rem 1.5rem;
  box-shadow: 0 10px 30px -20px rgba(12, 27, 26, 0.16);
}
.wx-side-card.is-quiet {
  background: var(--color-surface);
  box-shadow: none;
}
.wx-side-title {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.wx-side-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.05rem;
}
.wx-side-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.wx-side-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(15, 118, 110, 0.22);
  color: var(--color-primary);
}
.wx-side-steps b {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.wx-side-steps small {
  display: block;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--wx-muted);
  margin-top: 0.15rem;
}

.wx-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--wx-muted);
}
.wx-side-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.wx-side-list svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--color-primary);
  margin-top: 0.3em;
}
.wx-side-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--wx-muted-2);
  margin: 1rem 0 0;
}

/* ---------- 4. Oeffnungszeiten als saubere Liste ---------- */
.wx-oh-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wx-muted);
  margin: 0 0 1.1rem;
}
.wx-oh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wx-muted-2);
  flex: none;
}
.wx-oh-status.is-open {
  color: #15803d;
}
.wx-oh-status.is-open .wx-oh-dot {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}

.opening-hours {
  width: 100%;
  border-collapse: collapse;
}
.opening-hours th,
.opening-hours td {
  padding: 0.6rem 0;
  font-size: 0.91rem;
  vertical-align: baseline;
}
.opening-hours th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
}
.opening-hours td {
  text-align: right;
  color: var(--wx-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.opening-hours tr + tr th,
.opening-hours tr + tr td {
  border-top: 1px solid var(--wx-line);
}

/* webseite-expert-zz-w-pakete.css */
/* ==========================================================================
   No-JS-Fallback fuer die Scroll-Reveals + Feinschliff der Paketeseite
   Laedt zuletzt (alphabetisch: ...-zz-w-pakete).
   ========================================================================== */

/* ---------- 1. Inhalte duerfen nie unsichtbar bleiben ----------
   .reveal/.wx-lead-row starten auf opacity: 0 und werden erst per
   JavaScript eingeblendet. Ist auf einer Seite kein Skript eingebunden
   oder JavaScript aus, blieb der Inhalt dauerhaft weg (so war die
   Paketeseite komplett leer). Diese Regel stellt ihn wieder her, sobald
   im Browser kein Scripting laeuft; Browser ohne Unterstuetzung fuer die
   scripting-Media-Query verhalten sich wie bisher. */
@media not all and (scripting: enabled) {
  .reveal,
  .wx-lead-row {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .wx-frame {
    transform: none !important;
  }
  .wx-marquee-track {
    animation: none !important;
  }
}

/* ---------- 2. Paketeseite ---------- */
/* Die Karten sind unterschiedlich hoch (verschiedene Feature-Zahlen) —
   gleiche Grundlinie fuer Preis und Button macht die Reihe ruhiger. */
.wx-pakete-sec .wx-tiers {
  align-items: stretch;
}
.wx-pakete-sec {
  padding-top: 1.5rem;
}

/* Die hervorgehobene Mitte etwas anheben, wie im Mockup. */
@media (min-width: 57.5rem) {
  .wx-tier.is-mid {
    transform: translateY(-10px);
  }
  .wx-tier.is-mid:hover {
    transform: translateY(-15px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wx-tier.is-mid,
  .wx-tier.is-mid:hover {
    transform: none;
  }
}

/* Badge der Mitte sass knapp auf der Kartenkante. */
.wx-tier-badge {
  box-shadow: 0 8px 20px -8px rgba(15, 118, 110, 0.5);
}

/* Preis und „Einrichtung“ als Block zusammenhalten. */
.wx-tier-price {
  margin-top: 0.2rem;
}
.wx-tier-setup {
  padding-top: 0.9rem;
  border-top: 1px solid var(--wx-line);
}

/* webseite-expert-zz-x-ueber.css */
/* ==========================================================================
   webseite.expert — Seite „Über uns“ (.page-ueber)
   Eigene Bausteine im Framer-Look: Prinzip-Stack im Hero, Kapitel-Erzaehlung
   mit Zeitstrahl, Manifest-Band und Versprechen/Gegenliste.
   Alle Klassen sind neu (wx-ab-*) — kein Eingriff in bestehende Seiten.
   ========================================================================== */

/* ---------- Hero ---------- */
.page-ueber .wx-hero {
  padding-bottom: 1.5rem;
}
/* Zweizeilig gesetzt (<br> in der View): etwas kleiner als auf der
   Startseite, damit „Deine Website-Experten.“ in eine Zeile passt und
   nicht am Bindestrich umbricht. */
.page-ueber .wx-h1 {
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  max-width: 24ch;
}

/* Prinzip-Stack: Mensch → KI → System, gestapelt wie Schichten. */
.wx-ab-stack {
  max-width: 40rem;
  margin: 3.2rem auto 0;
  display: grid;
  gap: 0.7rem;
  text-align: left;
}
.wx-ab-layer {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 18px;
  padding: 1.05rem 1.25rem;
  box-shadow: 0 14px 34px -24px rgba(12, 27, 26, 0.28);
  transition: transform 0.4s var(--wx-ease), border-color 0.3s, box-shadow 0.4s var(--wx-ease);
}
.wx-ab-layer:hover {
  transform: translateY(-3px);
  border-color: var(--wx-line-2);
  box-shadow: 0 24px 46px -24px rgba(12, 27, 26, 0.34);
}
/* Die mittlere Schicht ist das Tempo-Element — leicht hervorgehoben. */
.wx-ab-layer.is-key {
  background:
    radial-gradient(420px 200px at 20% -30%, rgba(15, 118, 110, 0.1), transparent 65%),
    var(--wx-card);
  border-color: rgba(15, 118, 110, 0.35);
  box-shadow: 0 22px 50px -26px rgba(15, 118, 110, 0.4);
}
.wx-ab-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.2);
  color: var(--color-primary);
}
.wx-ab-ico svg {
  width: 19px;
  height: 19px;
}
.wx-ab-layer .wx-ab-txt {
  min-width: 0;
}
.wx-ab-layer b {
  display: block;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.wx-ab-layer small {
  display: block;
  font-size: 0.86rem;
  color: var(--wx-muted);
  line-height: 1.55;
  margin-top: 0.12rem;
}
.wx-ab-role {
  margin-left: auto;
  flex: none;
  align-self: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(15, 118, 110, 0.09);
  border: 1px solid rgba(15, 118, 110, 0.22);
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .wx-ab-role { display: none; }
}
.wx-ab-sum {
  margin: 1.2rem auto 0;
  text-align: center;
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.015em;
  color: var(--wx-muted);
}

/* ---------- Kapitel-Erzaehlung mit Zeitstrahl ---------- */
.wx-ab-story {
  margin-top: 2.6rem;
  max-width: 56rem;
}
.wx-ab-chapter {
  position: relative;
  padding: 1.5rem 0 1.5rem 2.2rem;
  display: grid;
  gap: 0.45rem;
}
/* Durchgehende Linie; am ersten/letzten Kapitel sauber abgeschnitten. */
.wx-ab-chapter::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--wx-line);
}
.wx-ab-chapter:first-child::before {
  top: 1.85rem;
}
.wx-ab-chapter:last-child::before {
  bottom: auto;
  height: 1.85rem;
}
.wx-ab-chapter::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid rgba(15, 118, 110, 0.45);
}
/* Das Schlusskapitel markiert den Punkt, an dem es aufgeht. */
.wx-ab-chapter.is-goal::after {
  background: var(--wx-grad);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}
.wx-ab-chapter-label {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-top: 0.18rem;
}
.wx-ab-chapter p {
  color: var(--wx-muted);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
  max-width: 42rem;
}
.wx-ab-chapter p strong {
  color: var(--color-text);
  font-weight: 600;
}
@media (min-width: 880px) {
  .wx-ab-chapter {
    grid-template-columns: 11.5rem 1fr;
    gap: 2.2rem;
    align-items: start;
    padding-left: 2.6rem;
  }
}

/* ---------- Manifest-Band ---------- */
.wx-ab-manifest {
  /* Schmaler als der Container: sonst steht rechts neben Zitat und
     Fliesstext eine leere Flaeche, die die Karte kippen laesst. */
  max-width: 62rem;
  margin-inline: auto;
  background:
    radial-gradient(900px 400px at 12% -14%, rgba(15, 118, 110, 0.11), transparent 62%),
    var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 32px;
  padding: 3.2rem 3rem;
  box-shadow: 0 24px 60px -32px rgba(12, 27, 26, 0.22);
}
/* Der Kicker ist hier die H2 der Section — Kern-Abstaende zuruecksetzen. */
.wx-ab-manifest > h2.section-kicker {
  margin-top: 0;
}
.wx-ab-manifest blockquote {
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.032em;
  color: var(--color-text);
  margin: 0 0 1.1rem;
  padding: 0;
  border: none;
  max-width: 30ch;
}
.wx-ab-manifest > p {
  color: var(--wx-muted);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 46rem;
  margin: 0;
}
.wx-ab-manifest > p strong {
  color: var(--color-text);
  font-weight: 600;
}
.wx-ab-manifest .wx-counters {
  margin-top: 2.2rem;
}
.wx-ab-manifest .wx-sig {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--wx-line);
}
@media (max-width: 900px) {
  .wx-ab-manifest {
    padding: 2.2rem 1.5rem;
    border-radius: 24px;
  }
}

/* ---------- Versprechen + Gegenliste ---------- */
.wx-ab-promises {
  display: grid;
  gap: 1rem;
  margin-top: 2.2rem;
}
@media (min-width: 880px) {
  .wx-ab-promises { grid-template-columns: repeat(3, 1fr); }
}
.wx-ab-nots-head {
  margin: 3rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--wx-muted-2);
}
.wx-ab-nots {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 880px) {
  .wx-ab-nots { grid-template-columns: repeat(2, 1fr); }
}
.wx-ab-nots li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--wx-line);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--wx-muted);
}
.wx-ab-nots li b {
  color: var(--color-text);
  font-weight: 600;
}
.wx-ab-x {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 2px;
  position: relative;
  background: rgba(163, 63, 49, 0.07);
  border: 1px solid rgba(163, 63, 49, 0.22);
}
.wx-ab-x::before,
.wx-ab-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.6px;
  border-radius: 2px;
  background: #a33f31;
}
.wx-ab-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.wx-ab-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .wx-ab-layer:hover { transform: none; }
}

/* webseite-expert-zz-y-so-funktionierts.css */
/* ==========================================================================
   webseite.expert — Seite „So funktioniert's" (.page-so-funktionierts)
   Eigene Bausteine im Framer-Look: Ablauf-Schiene im Hero, vier grosse
   Schritt-Bloecke mit Visual, Rollen-Split (du/wir) und Betriebs-Karten.
   Alle Klassen sind neu (wx-sf-*) — kein Eingriff in bestehende Seiten.
   Laedt zuletzt (alphabetisch nach ...-zz-x-ueber.css).
   ========================================================================== */

/* ---------- Hero ---------- */
.page-so-funktionierts .wx-hero {
  padding-bottom: 1.5rem;
}
.page-so-funktionierts .wx-h1 {
  font-size: clamp(2.3rem, 5.8vw, 4.1rem);
  max-width: 20ch;
}

/* ---------- Ablauf-Schiene im Hero ---------- */
.wx-sf-rail {
  position: relative;
  max-width: 64rem;
  margin: 3.2rem auto 0;
  display: grid;
  gap: 0.7rem;
  text-align: left;
}
@media (min-width: 900px) {
  .wx-sf-rail {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  /* Verbindungslinie hinter den Karten: macht aus vier Kacheln einen Weg. */
  .wx-sf-rail::before {
    content: "";
    position: absolute;
    top: 2.35rem;
    left: 11%;
    right: 11%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.35), rgba(7, 89, 133, 0.35));
  }
}
.wx-sf-rail-item {
  position: relative;
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 14px 34px -24px rgba(12, 27, 26, 0.28);
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  transition: transform 0.4s var(--wx-ease), border-color 0.3s, box-shadow 0.4s var(--wx-ease);
}
.wx-sf-rail-item:hover {
  transform: translateY(-3px);
  border-color: var(--wx-line-2);
  box-shadow: 0 24px 46px -24px rgba(12, 27, 26, 0.34);
}
@media (min-width: 900px) {
  .wx-sf-rail-item {
    display: block;
    text-align: center;
  }
}
.wx-sf-rail-ico {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.2);
  color: var(--color-primary);
}
@media (min-width: 900px) {
  .wx-sf-rail-ico {
    margin: 0 auto 0.8rem;
  }
}
.wx-sf-rail-ico svg {
  width: 19px;
  height: 19px;
}
.wx-sf-rail-when {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.2rem;
}
.wx-sf-rail-item b {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.wx-sf-rail-item small {
  display: block;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--wx-muted);
  margin-top: 0.2rem;
}

/* ==========================================================================
   Die vier Schritte
   ========================================================================== */
.wx-sf-steps {
  display: grid;
  gap: 1.2rem;
  margin-top: 2.6rem;
}
.wx-sf-step {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 28px;
  padding: 2rem 1.8rem;
  box-shadow: 0 18px 48px -30px rgba(12, 27, 26, 0.24);
  display: grid;
  gap: 2rem;
  align-items: center;
  transition: border-color 0.3s, box-shadow 0.4s var(--wx-ease);
}
.wx-sf-step:hover {
  border-color: var(--wx-line-2);
  box-shadow: 0 26px 60px -30px rgba(12, 27, 26, 0.3);
}
@media (min-width: 940px) {
  .wx-sf-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    padding: 2.6rem 2.6rem;
    gap: 3rem;
  }
  /* Jeder zweite Schritt spiegelt — der Blick zickzackt nach unten. */
  .wx-sf-step.is-flip .wx-sf-visual {
    order: -1;
  }
}

.wx-sf-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.wx-sf-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--wx-grad);
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 8px 20px -10px rgba(15, 118, 110, 0.6);
}
.wx-sf-when {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.22);
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
}
.wx-sf-when svg {
  width: 13px;
  height: 13px;
}
.wx-sf-body h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}
.wx-sf-body > p {
  color: var(--wx-muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 40rem;
  margin: 0;
}
.wx-sf-body > p strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Rollen-Split: was du tust, was wir tun. */
.wx-sf-roles {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.4rem;
}
@media (min-width: 520px) {
  .wx-sf-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wx-sf-role {
  background: var(--color-surface);
  border: 1px solid var(--wx-line);
  border-radius: 14px;
  padding: 0.8rem 1rem;
}
.wx-sf-role-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wx-muted-2);
  margin-bottom: 0.25rem;
}
.wx-sf-role.is-you .wx-sf-role-label {
  color: var(--color-primary);
}
.wx-sf-role span:last-child {
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--wx-muted);
}

/* ==========================================================================
   Visuals der Schritte
   ========================================================================== */
.wx-sf-visual {
  min-width: 0;
}
.wx-sf-mock {
  background: var(--color-surface);
  border: 1px solid var(--wx-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 56px -32px rgba(12, 27, 26, 0.34);
}
.wx-sf-mock-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--wx-line);
  background: var(--wx-card);
}
.wx-sf-mock-head svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex: none;
}
.wx-sf-mock-head b {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.wx-sf-pill {
  margin-left: auto;
  font-size: 0.67rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--color-primary);
  white-space: nowrap;
}
.wx-sf-pill.is-live {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.wx-sf-pill.is-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
}
.wx-sf-mock-body {
  padding: 1.1rem;
  display: grid;
  gap: 0.5rem;
}

/* Zeilen mit Haken (Agenda, Go-live-Liste) */
.wx-sf-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--wx-muted);
}
.wx-sf-row b {
  color: var(--color-text);
  font-weight: 600;
}
.wx-sf-tick {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 163, 74, 0.11);
  border: 1px solid rgba(22, 163, 74, 0.28);
  color: #15803d;
}
.wx-sf-tick svg {
  width: 11px;
  height: 11px;
}
.wx-sf-tick.is-open {
  background: rgba(15, 118, 110, 0.07);
  border-color: rgba(15, 118, 110, 0.25);
  color: var(--color-primary);
}
.wx-sf-mock-foot {
  border-top: 1px solid var(--wx-line);
  padding: 0.75rem 1.1rem;
  font-size: 0.79rem;
  color: var(--wx-muted-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--wx-card);
}
.wx-sf-mock-foot svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  flex: none;
}

/* Browser-Rahmen mit Screenshot (Schritt 2) */
.wx-sf-shot {
  border: 1px solid var(--wx-line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--wx-card);
  box-shadow: 0 28px 64px -32px rgba(12, 27, 26, 0.4);
}
.wx-sf-shot .wx-frame-bar {
  border-bottom: 1px solid var(--wx-line);
}
.wx-sf-shot-img {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.wx-sf-shot-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.wx-sf-shot-tag {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--wx-grad);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(15, 118, 110, 0.7);
}
.wx-sf-cap {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--wx-muted-2);
  margin: 0.85rem 0 0;
  text-align: center;
}

/* Feedback-Blasen (Schritt 3) */
.wx-sf-chat {
  display: grid;
  gap: 0.6rem;
}
.wx-sf-bubble {
  border-radius: 14px;
  padding: 0.75rem 0.95rem;
  font-size: 0.87rem;
  line-height: 1.55;
  max-width: 90%;
}
.wx-sf-bubble.is-you {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  color: var(--color-text);
}
.wx-sf-bubble.is-us {
  justify-self: end;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.22);
  color: var(--color-text);
}
.wx-sf-bubble small {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wx-muted-2);
  margin-bottom: 0.25rem;
}
.wx-sf-bubble.is-us small {
  color: var(--color-primary);
}
.wx-sf-approve {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--wx-grad);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  box-shadow: 0 12px 28px -12px rgba(15, 118, 110, 0.6);
}
.wx-sf-approve svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   Wer macht was + Kennzahlen
   ========================================================================== */
.wx-sf-split {
  display: grid;
  gap: 1rem;
  margin-top: 2.4rem;
}
@media (min-width: 880px) {
  .wx-sf-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wx-sf-col {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 24px;
  padding: 1.9rem 1.8rem;
  box-shadow: 0 16px 42px -28px rgba(12, 27, 26, 0.26);
}
.wx-sf-col.is-you {
  background:
    radial-gradient(460px 220px at 15% -20%, rgba(15, 118, 110, 0.1), transparent 64%),
    var(--wx-card);
  border-color: rgba(15, 118, 110, 0.3);
}
.wx-sf-col h3 {
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}
.wx-sf-col > p {
  color: var(--wx-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
}
.wx-sf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.wx-sf-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--wx-muted);
}
.wx-sf-list li b {
  color: var(--color-text);
  font-weight: 600;
}
.wx-sf-list svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--color-primary);
}

/* ==========================================================================
   Betrieb danach
   ========================================================================== */
.wx-sf-care {
  display: grid;
  gap: 1rem;
  margin-top: 2.2rem;
}
@media (min-width: 700px) {
  .wx-sf-care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .wx-sf-care { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wx-sf-care .wx-card {
  padding: 1.7rem 1.5rem;
}
.wx-sf-note {
  margin-top: 1.6rem;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--color-surface);
  border: 1px solid var(--wx-line);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--wx-muted);
}
.wx-sf-note b {
  color: var(--color-text);
  font-weight: 600;
}
.wx-sf-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--color-primary);
}

@media (max-width: 620px) {
  .wx-sf-step {
    padding: 1.6rem 1.3rem;
    border-radius: 22px;
  }
  .wx-sf-col {
    padding: 1.5rem 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wx-sf-rail-item:hover { transform: none; }
}

/* webseite-expert-zz-z-header.css */
/* ==========================================================================
   webseite.expert — CTA-Button im Header
   Der Header kommt aus der Kern-Komponente (<x-menu key="header"/>) und hat
   keinen CTA-Slot; das Markup ist eine schlichte <li><a>-Liste ohne eigene
   Klassen. Der CTA wird deshalb ueber sein Linkziel ausgezeichnet
   ([href$="/kontakt"]) statt ueber die Position — das haelt auch, wenn der
   Betreiber die Menue-Reihenfolge im Panel aendert.
   Faellt der Eintrag weg oder zeigt er woanders hin, ist die Regel wirkungslos
   (kein kaputtes Layout). Umbenennen ist gefahrlos, das Ziel muss bleiben.
   Laedt zuletzt (alphabetisch nach ...-zz-y-so-funktionierts.css).
   Kontrast: #fff auf #0f766e = 5,5:1, auf #075985 = 8,5:1 — beide AA.
   ========================================================================== */

.menu-header > ul > li > a[href$="/kontakt"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wx-grad);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 0.62rem 1.3rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 22px -10px rgba(15, 118, 110, 0.55);
  transition: transform 0.25s var(--wx-ease), box-shadow 0.25s var(--wx-ease);
}
.menu-header > ul > li > a[href$="/kontakt"]:hover,
.menu-header > ul > li > a[href$="/kontakt"]:focus-visible {
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(15, 118, 110, 0.65);
}
/* Fokus muss auf dem Verlauf sichtbar bleiben (WCAG 2.4.7). */
.menu-header > ul > li > a[href$="/kontakt"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Auf der Kontaktseite selbst ist der Button nur noch Orientierung,
   kein Handlungsaufruf — Tiefe und Hover-Hub nehmen sich zurueck. */
.menu-header > ul > li > a[href$="/kontakt"][aria-current="page"],
.menu-header > ul > li > a[href$="/kontakt"][aria-current="page"]:hover {
  box-shadow: none;
  transform: none;
}

/* Desktop: etwas Luft zur letzten Textnavigation, damit der Button
   nicht wie ein weiterer Menuepunkt gelesen wird. */
@media (min-width: 48rem) {
  .menu-header > ul > li:has(> a[href$="/kontakt"]) {
    margin-left: 0.4rem;
  }
}

/* Mobil klappt die Navigation zu einer Spalte auf (Kern-Breakpoint
   47.99rem, .menu-header > ul wird flex-direction: column, stretch).
   Dort nimmt der CTA die volle Breite und sitzt abgesetzt am Ende. */
@media (max-width: 47.99rem) {
  .menu-header > ul > li > a[href$="/kontakt"] {
    width: 100%;
    padding-block: 0.8rem;
    font-size: 0.95rem;
  }
  .menu-header > ul > li:has(> a[href$="/kontakt"]) {
    margin-top: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-header > ul > li > a[href$="/kontakt"]:hover,
  .menu-header > ul > li > a[href$="/kontakt"]:focus-visible {
    transform: none;
  }
}

/* webseite-expert-zz-z-shader.css */
/* ==========================================================================
   webseite.expert — Shader-Flaechen (Hero-Hintergrund)
   Das Canvas liegt hinter dem Hero-Inhalt und traegt selbst keine Information
   (aria-hidden im Markup). Ohne JS/WebGL bleibt es leer und der vorhandene
   .wx-hero-glow traegt die Flaeche allein — deshalb kein Layout-Risiko.
   Laedt zuletzt (alphabetisch nach ...-zz-z-header.css).
   ========================================================================== */

.wx-shader-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* WICHTIG — Ladereihenfolge taeuscht: webseite-expert.css laedt ZULETZT,
   nach allen -zz-Dateien (Bindestrich 0x2D sortiert vor Punkt 0x2E). Deren
   Regel `.wx-hero > * { position: relative }` wuerde das Canvas sonst in den
   Textfluss holen und den Hero nach unten schieben. Die Positionierung ist
   deshalb ueber Spezifitaet abgesichert, nicht ueber Reihenfolge. */
.wx-shader-stage > canvas.wx-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  /* Weicher Auslauf nach unten und zu den Seiten, damit die Flaeche nicht
     als Kasten endet — das Canvas selbst rendert hart bis zur Kante. */
  -webkit-mask-image: radial-gradient(135% 115% at 50% 0%, #000 58%, transparent 97%);
  mask-image: radial-gradient(135% 115% at 50% 0%, #000 58%, transparent 97%);
  transition: opacity 1.1s var(--wx-ease);
}
.wx-shader-stage > canvas.wx-shader.is-live {
  opacity: 1;
}
/* Feines Korn ueber dem Verlauf: kaschiert das Banding, das weiche
   Farbverlaeufe auf 8-Bit-Displays zeigen. Data-URI, kein Request. */
.wx-shader-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(/assets/css/%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
/* Inhalt ueber das Canvas heben — aber NICHT den .wx-hero-glow: der ist
   absolut positioniert und 720 px hoch; ein `position: relative` von hier
   holt ihn in den Fluss und schiebt den ganzen Hero nach unten. */
.wx-shader-stage > *:not(canvas.wx-shader):not(.wx-hero-glow) {
  position: relative;
  z-index: 2;
}
.wx-shader-stage > .wx-hero-glow {
  position: absolute;
  z-index: 1;
}

/* Auf der Shader-Buehne uebernimmt das Canvas den Verlauf — der statische
   Kern-Glow wuerde sich sonst mit ihm ueberlagern und aufhellen. */
.wx-shader-stage .wx-hero-glow {
  opacity: 0.35;
}

/* ==========================================================================
   Nur fuer die interne Vergleichsseite (.page-shader-vergleich)
   ========================================================================== */
.page-shader-vergleich .wx-lab-note {
  max-width: 46rem;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--wx-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}
.wx-lab-variant {
  border: 1px solid var(--wx-line);
  border-radius: 28px;
  overflow: hidden;
  background: var(--wx-card);
  box-shadow: 0 18px 48px -30px rgba(12, 27, 26, 0.24);
  margin-bottom: 2.5rem;
}
.wx-lab-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.6rem;
  border-bottom: 1px solid var(--wx-line);
}
.wx-lab-head h2 {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
}
.wx-lab-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(15, 118, 110, 0.09);
  border: 1px solid rgba(15, 118, 110, 0.22);
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
}
.wx-lab-head p {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--wx-muted);
}
/* Die Buehne bildet den echten Hero nach: gleiche Hoehe, gleiche Typo. */
.wx-lab-stage {
  min-height: 27rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: var(--color-surface);
}
.wx-lab-stage .wx-h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  max-width: 16ch;
  margin: 0 auto 1rem;
}
.wx-lab-stage .wx-lede {
  margin-bottom: 1.6rem;
  font-size: 1rem;
}

/* webseite-expert.css */
/* ==========================================================================
   webseite.expert — Framer-Look (hell, Teal→Blau)
   Baut auf den Design-Tokens auf; laedt nach dem Kern-CSS.
   ========================================================================== */

:root {
  --wx-grad: linear-gradient(100deg, var(--color-primary) 0%, var(--color-primary) 40%, var(--color-secondary) 100%);
  --wx-line: rgba(12, 27, 26, 0.09);
  --wx-line-2: rgba(12, 27, 26, 0.16);
  --wx-muted: #52645f;
  --wx-muted-2: #7e8d8a;
  --wx-card: #ffffff;
  --wx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Basis-Feinschliff ---------- */
.page-home {
  background: var(--color-surface);
}
.wx-grad-text {
  background: var(--wx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Hero ---------- */
.wx-hero {
  position: relative;
  padding: 4.5rem 0 3rem;
  text-align: center;
  overflow: clip;
}
.wx-hero-glow {
  position: absolute;
  top: -280px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 720px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 50% 30%, rgba(15, 118, 110, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(7, 89, 133, 0.1), transparent 70%);
  filter: blur(10px);
}
.wx-hero > * {
  position: relative;
  z-index: 1;
}
.wx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--wx-muted);
  margin-bottom: 1.8rem;
  box-shadow: 0 4px 16px -6px rgba(12, 27, 26, 0.12);
}
.wx-badge .wx-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  animation: wx-pulse 2.2s infinite;
}
@keyframes wx-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
  70% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.wx-h1 {
  font-size: clamp(2.5rem, 7vw, 4.9rem);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.045em;
  margin: 0 auto 1.4rem;
  max-width: 17ch;
}
.wx-lede {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: var(--wx-muted);
  max-width: 38rem;
  margin: 0 auto 2.2rem;
  line-height: 1.7;
}
.wx-lede strong {
  color: var(--color-text);
  font-weight: 600;
}
.wx-cta-row {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.wx-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.87rem;
  color: var(--wx-muted-2);
}
.wx-proof b {
  color: var(--wx-muted);
  font-weight: 600;
}
.wx-proof svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}
.wx-proof .wx-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wx-line-2);
}

/* ---------- Gradient-Button ---------- */
.btn.wx-btn-grad {
  background: var(--wx-grad);
  color: #fff;
  border: none;
  box-shadow: 0 8px 26px -8px rgba(15, 118, 110, 0.5);
  transition: transform 0.25s var(--wx-ease), box-shadow 0.25s var(--wx-ease);
}
.btn.wx-btn-grad:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px -8px rgba(15, 118, 110, 0.6);
  color: #fff;
}

/* ---------- App-Frame (Lead-Postfach) ---------- */
.wx-frame-wrap {
  margin-top: 3.5rem;
  perspective: 1400px;
}
.wx-frame {
  max-width: 60rem;
  margin: 0 auto;
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 18px;
  box-shadow: 0 40px 90px -34px rgba(12, 27, 26, 0.32), 0 0 110px -34px rgba(15, 118, 110, 0.18);
  overflow: hidden;
  text-align: left;
  transform: rotateX(8deg) scale(0.98);
  transform-origin: center top;
  transition: transform 1s var(--wx-ease);
}
.wx-frame.is-flat {
  transform: rotateX(0) scale(1);
}
.wx-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--wx-line);
  background: var(--color-surface);
}
.wx-frame-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd6d5;
}
.wx-frame-bar .wx-url {
  margin: 0 auto;
  font-size: 0.73rem;
  color: var(--wx-muted-2);
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  padding: 0.25rem 1.4rem;
  border-radius: 999px;
}
.wx-frame-shot {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Betriebs-Meldungen um den Browser-Rahmen ----------
   Zeigen, dass die Website im Hintergrund arbeitet: Meldungen ploppen
   nacheinander auf, teils neben, teils auf dem Rahmen. Reine Dekoration
   (im Markup aria-hidden), deshalb pure CSS-Animation ohne JS.
   Bei „Bewegung reduzieren" laufen sie nicht, sondern stehen alle
   gleichzeitig da — die Aussage bleibt, die Unruhe faellt weg. */
.wx-stage {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
}
.wx-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wx-note {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 21rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--wx-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 45px -22px rgba(12, 27, 26, 0.4);
  text-align: left;
  /* backwards: vor dem eigenen Einsatz unsichtbar, nicht schon sichtbar. */
  animation: wx-note-pop 13s var(--wx-ease) var(--wx-d, 0s) infinite backwards;
}
@supports (backdrop-filter: blur(10px)) {
  .wx-note {
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(12px) saturate(120%);
  }
}
.wx-note-ico {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(15, 118, 110, 0.11);
  color: var(--color-primary);
}
.wx-note-ico svg {
  width: 16px;
  height: 16px;
}
.wx-note.is-cal .wx-note-ico {
  background: rgba(7, 89, 133, 0.11);
  color: var(--color-secondary);
}
.wx-note.is-ai .wx-note-ico {
  background: rgba(154, 95, 14, 0.12);
  /* Bewusst der abgedunkelte Amber, nicht --color-accent: der Akzent-Token
     ist auf dieser Instanz Petrol (#0e7490) und waere von der Primaerfarbe
     kaum zu unterscheiden. */
  color: #9a5f0e;
}
.wx-note.is-blog .wx-note-ico {
  background: rgba(12, 27, 26, 0.08);
  color: var(--wx-muted);
}
.wx-note-txt {
  min-width: 0;
  flex: 1 1 auto;
}
.wx-note-txt b {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
}
.wx-note-txt em {
  flex: none;
  font-style: normal;
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--wx-muted);
}
.wx-note-txt small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--wx-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Positionen: zwei links, zwei rechts, versetzt in der Hoehe — jeweils
   ein Stueck ueber die Rahmenkante hinaus, damit es "um den Browser
   herum" wirkt und nicht wie ein zweites Panel. */
.wx-note-a { top: 7%; left: -2.5rem; }
.wx-note-b { top: 33%; right: -2.5rem; }
.wx-note-c { bottom: 21%; left: -1.5rem; }
.wx-note-d { bottom: -1.5rem; right: 1.5rem; }

@keyframes wx-note-pop {
  0% { opacity: 0; transform: translateY(14px) scale(0.94); }
  4% { opacity: 1; transform: translateY(0) scale(1); }
  30% { opacity: 1; transform: translateY(0) scale(1); }
  36% { opacity: 0; transform: translateY(-8px) scale(0.98); }
  100% { opacity: 0; transform: translateY(14px) scale(0.94); }
}

/* Ab hier wird es eng: schmalere Karten, kleinere Ueberstaende, und die
   dritte Meldung faellt weg, damit nichts uebereinanderliegt. */
@media (max-width: 1100px) {
  .wx-note { width: 18rem; }
  .wx-note-a { left: -1rem; }
  .wx-note-b { right: -1rem; }
  .wx-note-c { display: none; }
  .wx-note-d { right: 0.5rem; bottom: -1rem; }
}
/* Handy: die Karten duerfen den Screenshot nicht zudecken. Sie ruecken in
   die Ecken (halb ausserhalb), verlieren den Zeitstempel — der konkurriert
   auf schmalen Karten mit dem Titel um Platz und erzwingt Zeilenumbrueche —
   und werden deutlich kompakter. */
@media (max-width: 720px) {
  .wx-note {
    width: 12rem;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
  }
  .wx-note-ico { width: 24px; height: 24px; border-radius: 8px; }
  .wx-note-ico svg { width: 13px; height: 13px; }
  .wx-note-txt b { font-size: 0.72rem; line-height: 1.25; }
  .wx-note-txt em { display: none; }
  .wx-note-txt small { font-size: 0.66rem; margin-top: 0.08rem; }
  .wx-note-a { top: -0.75rem; left: -0.75rem; }
  .wx-note-b { top: auto; bottom: -0.75rem; right: -0.75rem; }
  .wx-note-d { display: none; }
}
@media (max-width: 480px) {
  .wx-note { width: 11rem; }
  .wx-note-txt small { display: none; }
}

/* ---------- Marquee ---------- */
.wx-marquee-label {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wx-muted-2);
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.wx-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wx-marquee-track {
  display: flex;
  gap: 0.8rem;
  width: max-content;
  animation: wx-scroll 34s linear infinite;
}
.wx-marquee:hover .wx-marquee-track {
  animation-play-state: paused;
}
@keyframes wx-scroll {
  to { transform: translateX(-50%); }
}
.wx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  font-weight: 500;
  font-size: 0.89rem;
  color: var(--wx-muted);
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 12px -6px rgba(12, 27, 26, 0.1);
}
.wx-chip svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}

/* ---------- Karten (Problem / Schritte / Referenzen) ---------- */
.wx-card {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 24px;
  padding: 2rem 1.8rem;
  position: relative;
  box-shadow: 0 10px 30px -18px rgba(12, 27, 26, 0.16);
  transition: transform 0.4s var(--wx-ease), border-color 0.3s, box-shadow 0.4s var(--wx-ease);
}
.wx-card:hover {
  transform: translateY(-4px);
  border-color: var(--wx-line-2);
  box-shadow: 0 22px 44px -20px rgba(12, 27, 26, 0.22);
}
.wx-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.2);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.wx-ico svg { width: 20px; height: 20px; }
.wx-card h3 {
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.wx-card p {
  color: var(--wx-muted);
  font-size: 0.95rem;
}
.wx-punch {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.wx-step-num {
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.04em;
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
  color: rgba(12, 27, 26, 0.16);
}
.wx-step-t {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.35rem;
}

/* ---------- Warum-Band ---------- */
.wx-why {
  background:
    radial-gradient(900px 380px at 20% -10%, rgba(15, 118, 110, 0.09), transparent 60%),
    var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 32px;
  padding: 3.4rem 3rem;
  box-shadow: 0 24px 60px -32px rgba(12, 27, 26, 0.22);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.8rem;
  align-items: center;
}
.wx-why p {
  color: var(--wx-muted);
  font-size: 1.02rem;
}
.wx-why p strong { color: var(--color-text); font-weight: 600; }
.wx-stats { display: grid; gap: 0.85rem; }
.wx-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--wx-line);
  border-radius: 16px;
  padding: 1.05rem 1.35rem;
}
.wx-stat b {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wx-stat span {
  font-size: 0.86rem;
  color: var(--wx-muted);
  text-align: right;
}
@media (max-width: 900px) {
  .wx-why { grid-template-columns: 1fr; padding: 2.4rem 1.6rem; }
}

/* ---------- Referenzen ---------- */
.wx-ref-shot {
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  border-bottom: 1px solid var(--wx-line);
}
.wx-ref-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--wx-ease);
}
.wx-ref:hover .wx-ref-shot img { transform: scale(1.02); }
.wx-ref {
  background: var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px -18px rgba(12, 27, 26, 0.16);
  transition: transform 0.4s var(--wx-ease), border-color 0.3s, box-shadow 0.4s var(--wx-ease);
}
.wx-ref:hover {
  transform: translateY(-4px);
  border-color: var(--wx-line-2);
  box-shadow: 0 22px 44px -20px rgba(12, 27, 26, 0.22);
}
.wx-ref-body { padding: 1.3rem 1.5rem 1.6rem; }
.wx-ref-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.3rem;
}
.wx-ref-sub {
  color: var(--wx-muted);
  font-size: 0.89rem;
  margin-bottom: 0.85rem;
}
.wx-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wx-tags span {
  font-size: 0.73rem;
  color: var(--wx-muted);
  font-weight: 500;
  border: 1px solid var(--wx-line);
  background: var(--color-surface);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
}

/* ---------- Arbeitsweise-Panel ---------- */
.wx-panel {
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(15, 118, 110, 0.09), transparent 62%),
    var(--wx-card);
  border: 1px solid var(--wx-line);
  border-radius: 28px;
  padding: 1.9rem 1.8rem;
  box-shadow: 0 24px 60px -32px rgba(12, 27, 26, 0.22);
  display: grid;
  gap: 0.7rem;
}
.wx-panel-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--wx-line);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
}
.wx-panel-row svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex: none;
  margin-top: 3px;
}
.wx-panel-row b {
  display: block;
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wx-panel-row small {
  color: var(--wx-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}
.wx-quote {
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.025em;
  margin: 1.1rem 0 1.3rem;
  border: none;
  padding: 0;
}
.wx-sig {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.wx-sig .wx-sig-av {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wx-grad);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.wx-sig b { display: block; font-size: 0.93rem; font-weight: 600; }
.wx-sig small { color: var(--wx-muted-2); font-size: 0.81rem; }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--wx-ease), transform 0.8s var(--wx-ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .wx-marquee-track { animation: none; }
  .wx-frame { transform: none !important; }
  .wx-badge .wx-dot { animation: none; }
  .wx-note { animation: none; }
}


/* wx-editorial-1-base.css */
/* ==========================================================================
   webseite.expert — Designentwurf „Editorial" (Basis-Schicht)
   Quelle: kunden/webseite-expert/mockup-editorial/index.html

   Haltung: Praezision statt Dekoration. Haarlinien-Raster, flache Flaechen,
   eine Akzentfarbe, eine Schriftfamilie. Kein Verlauf, kein Glow, keine
   schwebenden Karten, kein Marquee, keine Serif-Beimischung.

   LADEREIHENFOLGE: Die Kette ist byte-alphabetisch, "-" sortiert vor "."
   ("webseite-expert-fix.css" laeuft VOR "webseite-expert.css"). Diese Datei
   beginnt mit "wx-" und laedt damit als letzte — sie darf den Framer-Look
   der Altdateien also global zuruecknehmen. Verlassen wir uns trotzdem
   nicht allein drauf: alle Rueckbau-Regeln unten sind so spezifisch wie
   ihre Vorbilder oder spezifischer.
   ========================================================================== */

/* ---------- 1. Archivo lokal (kein CDN, DSGVO/Shared-Hosting-Baseline) ----
   Variable Font, latin-Subset, ueber die stage-bewusste /assets/custom-Route.
   Ein einziger Request fuer alle Schnitte und Breiten. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/custom/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Editorial-Tokens ----------
   Die Farbwerte selbst kommen aus den Design-Tokens (manage_design), damit
   das Panel die Hoheit behaelt. Hier nur die Zwischentoene, die das
   Token-System nicht kennt. */
:root {
  --ed-paper: var(--color-surface, #faf8f3);
  --ed-panel: var(--color-surface-alt, #ffffff);
  --ed-ink: var(--color-text, #1d2b26);
  --ed-ink-2: #5a6862;
  --ed-ink-3: #8b968f;
  --ed-line: #e2ded2;
  --ed-line-2: #c9c4b4;
  --ed-accent: var(--color-accent, #0f766e);
  --ed-accent-ink: #0b5b54;
  --ed-accent-bg: #edf3f1;
  --ed-deep: var(--color-secondary, #12312b);
  --ed-radius: 8px;
  --ed-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Der Marken-Verlauf der Altdateien wird zur flachen Signalfarbe.
     Dadurch verschwinden alle Verlaeufe auch dort, wo noch --wx-grad steht. */
  --wx-grad: var(--ed-accent);
  --wx-line: var(--ed-line);
  --wx-line-2: var(--ed-line-2);
  --wx-muted: var(--ed-ink-2);
  --wx-muted-2: var(--ed-ink-3);
  --wx-card: var(--ed-panel);
  --wx-ease: var(--ed-ease);
}

/* ---------- 3. Typografie ---------- */
body {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  background: var(--ed-paper);
  color: var(--ed-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ed-accent); color: #fff; }

h1, h2, h3, h4,
.hero-title,
.section-title,
.wx-h1 {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 660;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-wrap: balance;
  color: var(--ed-ink);
}
h3, h4 { line-height: 1.25; }
b, strong { font-weight: 640; }

/* Zahlen ueberall gleich breit — Preise, Kennzahlen, Zeitangaben. */
.ed-tnum, .wx-tier-price, .wx-stat b { font-variant-numeric: tabular-nums; }

/* Akzentwort in Headlines: Farbe statt Verlauf, nie Serif-Kursive.
   .wx-grad-text steht noch in Alt-Views und im Pakete-Partial. */
.wx-grad-text,
.wx-card p.wx-grad-text,
.wx-card .wx-grad-text,
.wx-prob .wx-grad-text,
.wx-tool .wx-grad-text,
.page-home .section-title .wx-grad-text,
.wx-h1 .wx-grad-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--ed-accent-ink);
}
.section-inverse .wx-grad-text { color: #fff; }

/* ---------- 4. Kicker: versal mit laufender Nummer und Haarlinie ----------
   Das Kern-Markup ist <span class="section-kicker">Text</span>; die Nummer
   liefert die View als <span class="ed-no">01</span> davor. Fehlt sie,
   bleibt der Kicker trotzdem korrekt. */
.section-kicker,
.ed-kicker {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  max-width: 46rem;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.4rem;
  font-size: 0.8125rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ed-ink-2);
}
.section-kicker::after,
.ed-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ed-line);
  align-self: center;
}
.ed-no {
  color: var(--ed-accent-ink);
  font-variant-numeric: tabular-nums;
}
.section-inverse .section-kicker,
.ed-kicker.is-light {
  color: rgba(255, 255, 255, 0.65);
  background: none;
  border: 0;
}
.section-inverse .section-kicker::after,
.ed-kicker.is-light::after { background: rgba(255, 255, 255, 0.2); }
.ed-kicker.is-light .ed-no { color: rgba(255, 255, 255, 0.85); }

/* ---------- 5. Buttons: zwei Kontexte, flach ---------- */
.btn {
  border-radius: var(--ed-radius);
  font-weight: 620;
  font-size: 1rem;
  letter-spacing: 0;
  padding: 0.85rem 1.5rem;
  box-shadow: none;
  transition: background 0.2s var(--ed-ease), border-color 0.2s var(--ed-ease), color 0.2s var(--ed-ease);
}
.btn:hover { transform: none; box-shadow: none; }

.btn-primary,
.btn-accent,
.btn.wx-btn-grad {
  background: var(--ed-ink);
  color: var(--ed-paper);
  border: 1px solid var(--ed-ink);
  box-shadow: none;
}
.btn-primary:hover,
.btn-accent:hover,
.btn.wx-btn-grad:hover {
  background: var(--ed-accent-ink);
  border-color: var(--ed-accent-ink);
  color: #fff;
  transform: none;
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--ed-line-2);
  color: var(--ed-ink);
  box-shadow: none;
}
.btn-outline:hover {
  background: transparent;
  border-color: var(--ed-ink);
  color: var(--ed-ink);
  transform: none;
}

/* Auf dunklem Grund: Negativ-Button (weiss auf --ed-deep = 12,9:1). */
.section-inverse .btn-primary,
.section-inverse .btn-accent,
.section-inverse .btn.wx-btn-grad,
.ed-cta-panel .btn-primary {
  background: #ffffff;
  color: var(--ed-deep);
  border-color: #ffffff;
  box-shadow: none;
}
.section-inverse .btn-primary:hover,
.section-inverse .btn-accent:hover,
.section-inverse .btn.wx-btn-grad:hover,
.ed-cta-panel .btn-primary:hover {
  background: var(--ed-paper);
  color: var(--ed-deep);
  border-color: var(--ed-paper);
  transform: none;
}
.section-inverse .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.section-inverse .btn-outline:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

:is(a, button, summary):focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.section-inverse :is(a, button):focus-visible,
.site-footer :is(a, button):focus-visible {
  outline-color: #ffffff;
}

/* ---------- 6. Karten und Paneele flach ziehen ----------
   Die Altdateien geben .card/.wx-card/.wx-ref/.wx-panel/.wx-why 24-32px
   Radius, Schlagschatten, Hover-Hub und Radial-Verlaeufe. Alles raus. */
.card,
.wx-card,
.wx-ref,
.wx-panel,
.wx-why,
.wx-tier,
.wx-stat,
.wx-panel-row,
.section-faq .faq-item,
details.faq-item {
  background: var(--ed-panel);
  border-radius: var(--ed-radius);
  box-shadow: none;
}
.card:hover,
.wx-card:hover,
.wx-ref:hover,
.wx-tier:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ed-line-2);
}
.wx-why,
.wx-panel {
  background: var(--ed-panel);
  border: 1px solid var(--ed-line);
}
.wx-ref:hover .wx-ref-shot img { transform: none; }

/* Icon-Kacheln: aus gefuellten Quadraten werden Haarlinien-Quadrate. */
.wx-ico {
  background: transparent;
  border: 1px solid var(--ed-line-2);
  border-radius: 4px;
  color: var(--ed-accent-ink);
}

/* ---------- 7. FAQ: Haarlinien-Liste mit Plus-Kreis ----------
   Kern-Markup: details.faq-item > summary + div. Die Kartenoptik aus
   webseite-expert-zz-global.css wird hier zurueckgebaut. */
.section-faq .faq-item,
details.faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ed-line);
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.section-faq .faq-item:first-of-type { border-top: 1px solid var(--ed-line); }
.section-faq .faq-item:hover,
.section-faq .faq-item[open] {
  border-color: var(--ed-line);
  box-shadow: none;
}
.section-faq .faq-item summary {
  padding: 1.35rem 0;
  font-weight: 620;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ed-ink);
  gap: 1.5rem;
}
.section-faq .faq-item summary::after {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--ed-line-2);
  background-color: transparent;
  background-image:
    linear-gradient(var(--ed-ink-2), var(--ed-ink-2)),
    linear-gradient(var(--ed-ink-2), var(--ed-ink-2));
  background-size: 10px 1.5px, 1.5px 10px;
  transition: transform 0.3s var(--ed-ease), border-color 0.2s;
}
.section-faq .faq-item[open] summary::after {
  transform: rotate(45deg);
  background-color: transparent;
  border-color: var(--ed-accent-ink);
  background-image:
    linear-gradient(var(--ed-accent-ink), var(--ed-accent-ink)),
    linear-gradient(var(--ed-accent-ink), var(--ed-accent-ink));
}
.section-faq .faq-item > div {
  padding: 0 3.5rem 1.5rem 0;
  max-width: 44em;
  color: var(--ed-ink-2);
}

/* ---------- 8. Abschluss-CTA: flacher dunkelgruener Block ----------
   Statt Verlauf + Lichtkegel eine ruhige Flaeche, als Panel eingerueckt. */
.section-cta.section-inverse {
  background: var(--ed-paper);
  color: var(--ed-ink);
  padding-block: clamp(4rem, 8vw, 6.5rem);
  border-top: 1px solid var(--ed-line);
  overflow: visible;
}
.section-cta.section-inverse::before { display: none; }
.section-cta.section-inverse > .container-site {
  background: var(--ed-deep);
  color: #ffffff;
  border-radius: calc(var(--ed-radius) + 4px);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 76rem;
}
.section-cta.section-inverse .section-title { color: #ffffff; }
.section-cta.section-inverse .section-intro { color: rgba(255, 255, 255, 0.75); }

/* ---------- 9. Header ----------
   Der CTA im Menue wird ueber sein Linkziel ausgezeichnet (siehe
   webseite-expert-zz-z-header.css) — hier nur die Optik neu. */
.site-header {
  background: color-mix(in srgb, var(--ed-paper) 92%, transparent);
  border-bottom: 1px solid var(--ed-line);
  box-shadow: none;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--ed-paper); }
}
.menu-header a {
  font-size: 0.95rem;
  font-weight: 540;
  color: var(--ed-ink-2);
}
.menu-header a:hover { color: var(--ed-ink); text-decoration: none; }

.menu-header > ul > li > a[href$="/kontakt"] {
  background: var(--ed-ink);
  color: var(--ed-paper);
  border-radius: var(--ed-radius);
  box-shadow: none;
  font-weight: 620;
  padding: 0.62rem 1.25rem;
}
.menu-header > ul > li > a[href$="/kontakt"]:hover,
.menu-header > ul > li > a[href$="/kontakt"]:focus-visible {
  background: var(--ed-accent-ink);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}
.menu-header > ul > li > a[href$="/kontakt"][aria-current="page"] {
  background: transparent;
  color: var(--ed-ink);
  border: 1px solid var(--ed-line-2);
}

/* ---------- 10. Footer: hell, Haarlinien statt Schwarzflaeche ---------- */
.site-footer {
  background: var(--ed-paper);
  color: var(--ed-ink-2);
  border-top: 1px solid var(--ed-line);
  padding-block: 3.2rem 1.4rem;
  margin-top: 0;
}
.site-footer::before { display: none; }
.site-footer-company strong {
  color: var(--ed-ink);
  font-size: 1.15rem;
  font-weight: 660;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em;
}
.site-footer-company p { color: var(--ed-ink-2); }
.site-footer a { color: var(--ed-ink-2); }
.site-footer a:hover { color: var(--ed-ink); }
.site-footer-legal {
  border-top: 1px solid var(--ed-line);
  color: var(--ed-ink-3);
}
.site-footer .consent-reopen { color: var(--ed-ink-3); }
.site-footer .consent-reopen:hover { color: var(--ed-ink); }

/* ---------- 11. Reveal ----------
   Versteckt wird NUR bei aktivem JS (html.js setzt das Skript selbst).
   Ohne JS ist alles sichtbar — Lehre aus dem .reveal-Defekt vom 27.07. */
.js .reveal,
.js .ed-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ed-ease), transform 0.7s var(--ed-ease);
}
.js .reveal.is-in,
.js .reveal.in,
.js .ed-reveal.is-in {
  opacity: 1;
  transform: none;
}
.js .reveal[data-d="1"], .js .ed-reveal[data-d="1"] { transition-delay: 0.07s; }
.js .reveal[data-d="2"], .js .ed-reveal[data-d="2"] { transition-delay: 0.14s; }
.js .reveal[data-d="3"], .js .ed-reveal[data-d="3"] { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .ed-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* wx-editorial-2-home.css */
/* ==========================================================================
   webseite.expert — Editorial: Sektionen der Startseite
   Laedt nach wx-editorial-1-base.css. Eigener Namensraum .ed-*, damit sich
   nichts mit den .wx-*-Klassen der Altseiten beisst. Ausnahme: die
   Preistabelle, die als gemeinsames Partial auch /pakete traegt — die wird
   hier ueber ihre Bestandsklassen umgebaut.

   06.08.2026 entfernt (AI-Slop-Marker): .ed-avail (Status-Pille mit Punkt),
   .ed-ti-grid (nummeriertes Werkzeug-Raster), .ed-stats/.ed-stat
   (Kennzahlen-Stapel, Dublette zur Hero-Faktenzeile), .ed-thbar (nachgebaute
   Browserleiste), .ed-tags (Chip-Reihe), .ed-quote (Pull-Quote mit
   Akzentbalken), .ed-live (zweiter Statuspunkt im Produkt-Panel).
   Neu dafuer: .ed-textlink, .ed-tiline, .ed-prob-after, .ed-register,
   .ed-ptools.

   06.08.2026 (2): Hero-Visual von Vollflaechen-Overlay auf angeschnittene
   Ueberlappung umgestellt, danach Standbild durch Video ersetzt.
   Details am Block „Hero-Visual".
   ========================================================================== */

/* ---------- Sektionsrhythmus: Haarlinien statt Flaechenwechsel ---------- */
.page-home .ed-section {
  border-top: 1px solid var(--ed-line);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.ed-sec-head {
  display: grid;
  gap: 1.4rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.ed-sec-head .ed-lede { margin: 0; }
.ed-lede {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--ed-ink-2);
  max-width: 34em;
}
.ed-lede strong { color: var(--ed-ink); font-weight: 640; }

/* ---------- Hero ---------- */
.ed-hero {
  border-top: 0;
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
}
.ed-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  /* Die rechte Spalte ist seit dem Stapel-Umbau hoeher als die linke —
     end-Ausrichtung wuerde den Text an den Fuss der Bildspalte kleben. */
  align-items: center;
}
@media (max-width: 60rem) {
  .ed-hero-grid { grid-template-columns: 1fr; align-items: start; }
}

.ed-h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  margin: 0 0 1.5rem;
  max-width: 14ch;
}
.ed-hero .ed-lede { margin-bottom: 2.25rem; }

/* Ein Button, daneben ein Textlink — kein Button-Paar. */
.ed-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.75rem;
  margin-bottom: 2.75rem;
}
.ed-textlink {
  font-size: 0.98rem;
  font-weight: 560;
  color: var(--ed-ink-2);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--ed-line-2);
  text-decoration-thickness: 1px;
}
.ed-textlink:hover {
  color: var(--ed-ink);
  text-decoration-color: var(--ed-accent);
}

/* Fakten-Zeile: nuechterne Daten statt Badge-Deko. */
.ed-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  border-top: 1px solid var(--ed-line);
  padding-block: 1.1rem 2.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.ed-facts div { display: grid; gap: 0.1rem; padding-block: 0.4rem; }
.ed-facts b {
  font-size: 1.05rem;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}
.ed-facts span { font-size: 0.85rem; color: var(--ed-ink-2); }

/* ---------- Hero-Visual: Motiv gross, Panel angeschnitten davor ----------
   Drei Stufen bis hierher:
   1. Urspruenglich lagen Foto und Lead-Postfach im selben Rasterfeld
      (grid-area 1/1), das Panel deckte die untere linke Bildhaelfte ab —
      bei einem Motiv mit Menschen unbrauchbar.
   2. Danach vollstaendig gestapelt, 1rem Abstand, Panel auf voller Breite.
   3. Jetzt (Wunsch 06.08.2026): Panel SCHMALER als das Motiv und ein Stueck
      hochgezogen, sodass es die untere Kante anschneidet.
      gap: 0 am Raster, die Ueberlappung kommt allein aus margin-top —
      so ist der Wert an einer Stelle einstellbar.
   Der weiche Schatten kommt damit zurueck: das Panel liegt wieder teilweise
   auf dem Motiv und braucht die Kantentrennung. Er ist der einzige Schatten
   der Seite (so auch im DESIGN-KONZEPT festgehalten).

   Im Rahmen sitzt seit 06.08.2026 ein <video> statt eines <img> (gleiche
   Regeln, deshalb beide Selektoren). Das Video ist 16:9, der Rahmen rund
   1,14:1 — object-fit: cover beschneidet also die Seiten, die Hoehe bleibt
   voll. Die vertikale Komponente von object-position ist in diesem Fall
   wirkungslos; sie steht nur fuer den Fall da, dass wieder ein
   Hochformat-Motiv eingesetzt wird. */
.ed-hero-visual {
  display: grid;
  gap: 0;
  align-content: start;
}
.ed-hero-photo {
  margin: 0;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  overflow: hidden;
  position: relative;
  padding-top: 88%; /* padding-Technik statt aspect-ratio (Renderer-Fallback) */
  background: var(--ed-panel);
}
.ed-hero-photo img,
.ed-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
}
.ed-hero-visual .ed-inbox {
  width: 88%;
  justify-self: center;
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
  box-shadow: 0 18px 40px -18px rgba(29, 43, 38, 0.35);
}
@media (max-width: 40rem) {
  .ed-hero-photo { padding-top: 100%; }
  .ed-hero-visual .ed-inbox {
    width: 94%;
    margin-top: -2.25rem;
  }
}

/* Lead-Postfach: flaches, praezises Produkt-Panel.
   Die Kopfzeile weist es sichtbar als Beispielansicht aus — die Namen
   darin sind erfunden. */
.ed-inbox {
  background: var(--ed-panel);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  overflow: hidden;
  font-size: 0.9rem;
}
.ed-inbox-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--ed-line);
  background: var(--ed-paper);
}
.ed-inbox-cap .ed-t { font-weight: 640; font-size: 0.9rem; }
.ed-inbox-cap .ed-url {
  font-size: 0.75rem;
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ed-ink-3);
  white-space: nowrap;
}
.ed-lead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--ed-line);
}
.ed-lead:last-child { border-bottom: 0; }
.ed-lead .ed-av {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--ed-accent-bg);
  color: var(--ed-accent-ink);
  font-size: 0.75rem;
  font-weight: 660;
}
.ed-lead b { display: block; font-size: 0.9rem; font-weight: 620; }
.ed-lead small {
  display: block;
  color: var(--ed-ink-2);
  font-size: 0.8rem;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34ch;
}
.ed-lead .ed-meta { display: grid; justify-items: end; gap: 0.3rem; }
.ed-lead .ed-tag {
  font-size: 0.68rem;
  font-weight: 660;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--ed-line-2);
  color: var(--ed-ink-2);
  white-space: nowrap;
}
.ed-lead .ed-tag.is-hot {
  border-color: var(--ed-accent-ink);
  color: var(--ed-accent-ink);
  background: var(--ed-accent-bg);
}
.ed-lead .ed-when {
  font-size: 0.75rem;
  color: var(--ed-ink-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 32rem) {
  .ed-lead small { max-width: 20ch; }
  .ed-lead .ed-when { display: none; }
}

/* ---------- Werkzeug-Zeile ----------
   Frueher ein 3x3-Raster mit eigener Nummerierung 01–09; die kollidierte mit
   der Sektionsnummerierung und las sich als Chip-Wolke. Jetzt Lauftext. */
.ed-toolindex { padding-block: clamp(3rem, 6vw, 4.5rem); }
.ed-toolindex .ed-label {
  font-size: 0.8125rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ed-ink-2);
  margin-bottom: 1.1rem;
}
.ed-tiline {
  border-top: 1px solid var(--ed-line);
  padding-top: 1.1rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  font-weight: 560;
  color: var(--ed-ink);
  max-width: 58rem;
}

/* ---------- Problem: drei Spalten, Haarlinien statt Karten ---------- */
.ed-prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--ed-line);
}
.ed-prob {
  padding: 0.25rem 2rem 0.5rem;
  border-right: 1px solid var(--ed-line);
  display: grid;
  align-content: start;
  gap: 0.9rem;
}
.ed-prob .ed-marker {
  font-size: 0.8rem;
  font-weight: 620;
  color: var(--ed-ink-3);
}
.ed-prob h3 { font-size: 1.25rem; }
.ed-prob p { color: var(--ed-ink-2); font-size: 0.98rem; }
/* Eine Schlusszeile unter der ganzen Reihe — nicht dreimal dieselbe
   Punchline in Akzentfarbe unter jeder Spalte. */
.ed-prob-after {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 640;
  font-variation-settings: "wdth" 106;
  letter-spacing: -0.015em;
  color: var(--ed-ink);
}
@media (max-width: 54rem) {
  .ed-prob-grid { grid-template-columns: 1fr; border-left: 0; }
  .ed-prob { border-right: 0; border-top: 1px solid var(--ed-line); padding: 1.5rem 0 1.75rem; }
  .ed-prob:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- Ablauf: Zeitschiene mit Haarlinie ---------- */
.ed-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.ed-step {
  position: relative;
  padding-top: 1.6rem;
  display: grid;
  align-content: start;
  gap: 0.7rem;
}
.ed-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -2rem;
  height: 1px;
  background: var(--ed-line);
}
.ed-step:last-child::before { right: 0; }
.ed-step::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ed-paper);
  border: 2px solid var(--ed-accent);
}
.ed-step .ed-day {
  font-size: 0.8rem;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ed-accent-ink);
  font-variant-numeric: tabular-nums;
}
.ed-step h3 { font-size: 1.25rem; }
.ed-step p { color: var(--ed-ink-2); font-size: 0.97rem; }
@media (max-width: 54rem) {
  .ed-steps { grid-template-columns: 1fr; gap: 0; }
  .ed-step { padding: 1.5rem 0 1.75rem 1.75rem; }
  .ed-step::before { top: 0; bottom: 0; left: 3px; right: auto; width: 1px; height: auto; }
  .ed-step::after { top: 1.9rem; left: 0; }
}

/* ---------- Warum: Text links, Registerliste rechts ----------
   Der frueher hier stehende Kennzahlen-Stapel wiederholte exakt die drei
   Zahlen der Hero-Faktenzeile. Jetzt Leistungen, die sonst nirgends stehen. */
.ed-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.ed-why-grid .ed-sec-head { margin-bottom: 0; }
.ed-register { border-top: 1px solid var(--ed-line); }
.ed-reg-head {
  font-size: 0.8125rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ed-ink-3);
  padding-top: 1.1rem;
  margin-bottom: 0.4rem;
}
.ed-reg-row {
  display: grid;
  gap: 0.15rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--ed-line);
}
.ed-reg-row:first-of-type { border-top: 1px solid var(--ed-line); }
.ed-reg-row b { font-weight: 640; font-size: 1rem; }
.ed-reg-row span { color: var(--ed-ink-2); font-size: 0.93rem; line-height: 1.45; }
@media (max-width: 54rem) { .ed-why-grid { grid-template-columns: 1fr; } }

/* ---------- Pakete: eine zusammenhaengende Preistabelle ----------
   Umbau des gemeinsamen Partials custom/partials/pakete.blade.php.
   Wirkt damit auch auf /pakete — genau so gewollt (Optik-Konsistenz). */
.wx-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  background: var(--ed-panel);
  overflow: hidden;
  text-align: left;
  max-width: none;
}
.wx-tier {
  border: 0;
  border-right: 1px solid var(--ed-line);
  border-radius: 0;
  padding: 2.25rem 2rem 2rem;
  gap: 0;
  position: relative;
}
.wx-tier:last-child { border-right: 0; }
.wx-tier.is-mid { background: var(--ed-accent-bg); }
.wx-tier.is-mid::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ed-accent);
}
.wx-tier-badge {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  left: auto;
  transform: none;
  background: none;
  color: var(--ed-accent-ink);
  font-size: 0.7rem;
  font-weight: 660;
  letter-spacing: 0.06em;
  padding: 0;
  border-radius: 0;
}
.wx-tier-name { font-size: 1.05rem; font-weight: 660; }
.wx-tier-name small {
  display: inline;
  margin-left: 0.3rem;
  color: var(--ed-ink-3);
  font-weight: 540;
}
.wx-tier-price {
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  font-weight: 660;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0.25rem;
  line-height: 1;
}
.wx-tier-price small {
  font-size: 0.95rem;
  font-weight: 540;
  color: var(--ed-ink-2);
  font-variation-settings: "wdth" 100;
}
.wx-tier-for {
  color: var(--ed-ink-2);
  font-size: 0.95rem;
  min-height: 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ed-line);
}
.wx-tier.is-mid .wx-tier-for { border-color: var(--ed-line-2); }
.wx-tier-list {
  border-top: 0;
  padding: 1.25rem 0 1.75rem;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--ed-ink-2);
}
/* Listen-Marker: kleines gedrehtes Teal-Quadrat statt Icon-Haekchen. */
.wx-tier-list li { padding-left: 1.15rem; }
.wx-tier-list li svg { display: none; }
.wx-tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ed-accent);
  transform: rotate(45deg);
}
.wx-tier-list li b { color: var(--ed-ink); font-weight: 640; }
.wx-tier-setup { font-size: 0.86rem; color: var(--ed-ink-3); }
.wx-tier-setup b { color: var(--ed-ink); font-weight: 640; }
.wx-tier .btn { justify-self: start; margin-top: auto; }
.wx-tiers-note {
  text-align: left;
  color: var(--ed-ink-2);
  font-size: 0.95rem;
  margin-top: 1.5rem;
}
@media (max-width: 56rem) {
  .wx-tiers { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .wx-tier { border-right: 0; border-bottom: 1px solid var(--ed-line); }
  .wx-tier:last-child { border-bottom: 0; }
}

/* ---------- Fotos: flach, Haarlinie, nuechterne Bildunterschrift ---------- */
.ed-photo {
  position: relative;
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  overflow: hidden;
  background: var(--ed-panel);
  margin: 0;
}
.ed-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-photo.is-r32 { padding-top: 66.67%; }
.ed-photo.is-r219 { padding-top: 42.86%; }
.ed-figcap {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--ed-ink-3);
  padding-top: 0.6rem;
}
.ed-figcap::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ed-accent);
  transform: translateY(-0.05em) rotate(45deg);
}

/* ---------- Live-Beweis: Foto + echte Tools ---------- */
.ed-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.ed-demo-copy h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.ed-demo-copy p { color: var(--ed-ink-2); }
.ed-demo-copy .ed-photo { margin-bottom: 1.75rem; }
.ed-tools { display: grid; gap: 1.5rem; }
@media (max-width: 60rem) { .ed-demo-grid { grid-template-columns: 1fr; } }

/* ---------- Referenzen ----------
   Ohne nachgebaute Browserleiste: der Screenshot ist echt, der Rahmen
   drumherum war Attrappe. Werkzeuge als Registerzeile statt Chip-Reihe. */
.ed-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.ed-pcard {
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  background: var(--ed-panel);
  overflow: hidden;
  transition: border-color 0.2s var(--ed-ease);
}
.ed-pcard:hover { border-color: var(--ed-line-2); }
.ed-thshot {
  position: relative;
  padding-top: 65.5%;
  overflow: hidden;
  border-bottom: 1px solid var(--ed-line);
}
.ed-thshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.ed-pbody { padding: 1.5rem 1.75rem 1.75rem; }
.ed-pbody h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.ed-psub { color: var(--ed-ink-2); font-size: 0.95rem; }
.ed-ptools {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ed-line);
  font-size: 0.9rem;
  color: var(--ed-ink-2);
}
.ed-plink { margin-top: 1.1rem; font-size: 0.95rem; }
@media (max-width: 50rem) { .ed-projects { grid-template-columns: 1fr; } }

/* ---------- Arbeitsweise ---------- */
.ed-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.ed-about-grid .ed-sec-head { margin-bottom: 0; }
.ed-bio { color: var(--ed-ink-2); }
.ed-principles { border-top: 1px solid var(--ed-line); }
.ed-principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ed-line);
}
.ed-principle .ed-marker {
  font-size: 0.8rem;
  font-weight: 620;
  color: var(--ed-ink-3);
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.ed-principle b { display: block; font-weight: 660; margin-bottom: 0.3rem; }
.ed-principle p { color: var(--ed-ink-2); font-size: 0.95rem; }
@media (max-width: 54rem) { .ed-about-grid { grid-template-columns: 1fr; } }

/* ---------- Paket-Finder ---------- */
.ed-finder { max-width: 46rem; }
.ed-finder-form { margin-top: 2rem; }

/* wx-editorial-3-fix.css */
/* ==========================================================================
   Editorial: Korrekturen an Bestandsregeln und Schriftgroessen
   Laedt als letzte Datei der Kette (byte-alphabetisch nach ...-2-home.css).
   ========================================================================== */

/* ---------- 1. Ueberschriftengroessen ----------
   Das Kern-CSS setzt h1–h4 auf die Basisgroesse zurueck (Preflight-Reset);
   Groesse kommt sonst nur ueber die Komponentenklassen .hero-title /
   .section-title. Die Editorial-Sektionen benutzen nacktes <h2>/<h3> — ohne
   diese Regeln rendern sie in Fliesstextgroesse (gemessen: 17px). */
.ed-sec-head h2,
.ed-section h2,
.section-title {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.04;
}
.ed-section h3,
.ed-prob h3,
.ed-step h3,
.ed-demo-copy h3,
.ed-pbody h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}

/* Die Hero-Spalte ist rund 550px breit — mit 4,6rem brach „Deine Website."
   in zwei Zeilen um und die Headline lief auf vier Zeilen aus. 4rem haelt
   den gewollten Dreizeiler (Umbruch per <br> nach „Deine Website."). */
.ed-h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  max-width: none;
}

/* ---------- 2. Reveal darf im Fehlerfall nie unsichtbar sein ----------
   webseite-expert.css setzt `.reveal { opacity: 0 }` UNGATED — sichtbar
   wird der Inhalt erst, wenn ein Skript `.is-in` nachtraegt. Laedt das
   Skript nicht (Fehler, Cache, vergessener Include), bleibt die Seite leer;
   genau dieser Defekt hat am 27.07. /pakete geleert. Der No-JS-Fall ist in
   webseite-expert-zz-w-pakete.css ueber die scripting-Media-Query
   abgefangen, der Skript-faellt-aus-Fall bisher nicht.

   Neue Logik: Normalzustand ist SICHTBAR. Versteckt wird nur, wenn das
   Skript nachweislich laeuft — es setzt dafuer `js` an <html> (nicht an
   einer Livewire-Wurzel, die der Morph wieder abraeumen wuerde). */
.reveal,
.ed-reveal {
  opacity: 1;
  transform: none;
}

/* ---------- 3. Preistabelle: die Mitte darf nicht herausspringen ----------
   webseite-expert-zz-w-pakete.css hebt `.wx-tier.is-mid` um 10px an — das
   passte zu freistehenden Karten. Die Editorial-Fassung ist EINE Tabelle
   mit durchgehendem Rahmen; ein versetztes Feld reisst sie auseinander.
   Hervorgehoben wird die Mitte jetzt ueber Flaeche und 3-px-Topline. */
@media (min-width: 57.5rem) {
  .wx-tier.is-mid,
  .wx-tier.is-mid:hover {
    transform: none;
  }
}
.wx-tier-badge { box-shadow: none; }

/* Auf der Paketeseite steht die Tabelle ohne Hero darueber etwas gedraengt. */
.wx-pakete-sec { padding-top: 2.5rem; }

/* ---------- 4. FAQ und Abschluss-CTA linksbuendig ----------
   Die Kern-Components zentrieren Kopf und Inhalt. Im Editorial-Raster
   startet jede Sektion an derselben linken Kante — zentrierte Bloecke
   brechen den Rhythmus. Die FAQ-Liste bleibt auf Lesebreite begrenzt. */
.section-faq .section-kicker,
.section-faq .section-title,
.section-faq .section-intro {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.section-faq .divide-y {
  max-width: 50rem;
  margin-left: 0;
}

.section-cta.section-inverse > .container-site {
  display: grid;
  justify-items: start;
  text-align: left;
}
.section-cta.section-inverse .section-title,
.section-cta.section-inverse .section-intro {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.section-cta.section-inverse .section-title { max-width: 16em; }

/* wx-editorial-4-tools.css */
/* ==========================================================================
   Editorial: Frontend-Tools (Livewire) und Lead-Wizard
   Baut den Framer-Look aus webseite-expert-zz-tools.css zurueck: flache
   Flaechen, Haarlinien, 8px Radius, eine Signalfarbe. Gilt ueberall, wo die
   Tools laufen — Startseite, /beispiele, /tools/{slug} — damit die Optik
   nicht seitenweise auseinanderfaellt.

   Hinweis zur Spezifitaet: die Vorbilder schreiben teils `.wx-tool label`
   (0-1-1) und `.wx-wiz .wx-wiz-opt` (0-2-0). Regeln hier sind mindestens
   gleich stark und laufen zusaetzlich spaeter in der Kette.
   ========================================================================== */

/* ---------- Panel ---------- */
.wx-tool {
  background: var(--ed-panel);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: none;
  padding: 2rem 1.9rem;
}
.wx-tool-tag {
  color: var(--ed-accent-ink);
  letter-spacing: 0.09em;
  font-weight: 620;
}
.wx-tool-title {
  font-variation-settings: "wdth" 112;
  font-weight: 660;
  letter-spacing: -0.022em;
  color: var(--ed-ink);
}
.wx-tool-lede { color: var(--ed-ink-2); }

/* ---------- Eingaben ---------- */
.wx-tool .tool-input {
  border: 1px solid var(--ed-line-2);
  border-radius: 6px;
  background: var(--ed-paper);
  color: var(--ed-ink);
}
.wx-tool .tool-input:hover { border-color: var(--ed-ink-3); }
.wx-tool .tool-input:focus {
  outline: 2px solid var(--ed-accent);
  outline-offset: 1px;
  border-color: var(--ed-line-2);
  box-shadow: none;
}
.wx-tool-hint { color: var(--ed-ink-3); }

/* ---------- Ergebnis: Zahlen flach in Teal statt Verlaufsschrift ---------- */
.wx-res-label { color: var(--ed-ink-3); letter-spacing: 0.09em; }
.wx-res-row { border-bottom-color: var(--ed-line); color: var(--ed-ink-2); }
.wx-res-row b { color: var(--ed-ink); }
.wx-res-row.is-save b,
.wx-score b {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--ed-accent-ink);
  font-variation-settings: "wdth" 112;
  font-weight: 660;
  letter-spacing: -0.02em;
}
.wx-res-note { color: var(--ed-ink-3); }
.wx-res-note strong { color: var(--ed-accent-ink); font-weight: 640; }
.wx-res-title {
  font-variation-settings: "wdth" 112;
  font-weight: 660;
  color: var(--ed-ink);
}
.wx-res-text { color: var(--ed-ink-2); }

/* Balken: flach, rechteckig, eine Farbe. */
.wx-meter,
.wx-bar,
.wx-wiz-bar {
  border-radius: 2px;
  background: var(--ed-paper);
  border: 1px solid var(--ed-line);
}
.wx-meter i,
.wx-wiz-bar i,
.wx-cmp-row.is-ours .wx-bar i {
  border-radius: 0;
  background: var(--ed-accent);
}
.wx-bar i { border-radius: 0; background: var(--ed-line-2); }
.wx-cmp-top b { color: var(--ed-ink); }
.wx-cmp-row.is-ours .wx-cmp-top b { color: var(--ed-accent-ink); font-weight: 660; }

/* ---------- Lead-Capture unter dem Ergebnis ---------- */
.wx-capture {
  background: var(--ed-paper);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: none;
}
.wx-capture h3 {
  font-variation-settings: "wdth" 112;
  font-weight: 660;
  color: var(--ed-ink);
}
.wx-capture-consent { color: var(--ed-ink-2); }
.wx-capture-consent input { accent-color: var(--ed-accent); }

/* ---------- Schritt-Widget ---------- */
.wx-wiz-count { color: var(--ed-ink-3); }
.wx-wiz-count b { color: var(--ed-accent-ink); font-weight: 660; }
.wx-wiz .wx-wiz-q {
  font-variation-settings: "wdth" 112;
  font-weight: 660;
  letter-spacing: -0.022em;
  color: var(--ed-ink);
}
.wx-wiz-help { color: var(--ed-ink-2); }

.wx-wiz .wx-wiz-opt {
  border: 1px solid var(--ed-line-2);
  border-radius: 6px;
  background: var(--ed-paper);
  color: var(--ed-ink);
}
.wx-wiz .wx-wiz-opt:hover {
  border-color: var(--ed-ink-3);
  background: var(--ed-paper);
  transform: none;
}
.wx-wiz .wx-wiz-opt:has(input:checked) {
  border-color: var(--ed-accent);
  background: var(--ed-accent-bg);
  box-shadow: none;
}
.wx-wiz-key {
  border-radius: 4px;
  border: 1px solid var(--ed-line-2);
  background: var(--ed-panel);
  color: var(--ed-ink-3);
  font-weight: 660;
}
.wx-wiz-opt:has(input:checked) .wx-wiz-key {
  background: var(--ed-accent);
  border-color: var(--ed-accent);
  color: #fff;
}
.wx-wiz-opt-d { color: var(--ed-ink-3); }

.wx-wiz-back { color: var(--ed-ink-3); font-weight: 620; }
.wx-wiz-back:hover { color: var(--ed-accent-ink); }
.wx-wiz-hint { color: var(--ed-ink-3); }
.wx-wiz-hint kbd {
  border-color: var(--ed-line-2);
  border-radius: 3px;
  background: var(--ed-paper);
  color: var(--ed-ink-2);
}
.wx-wiz-next {
  border-radius: var(--ed-radius);
  background: var(--ed-ink);
  border: 1px solid var(--ed-ink);
  color: var(--ed-paper);
  font-weight: 620;
  padding: 0.55rem 1.1rem;
}
.wx-wiz-next:hover { filter: none; background: var(--ed-accent-ink); border-color: var(--ed-accent-ink); color: #fff; }
.wx-wiz-next:disabled {
  background: var(--ed-paper);
  border-color: var(--ed-line-2);
  color: var(--ed-ink-3);
}
.wx-wiz-meta li {
  border: 1px solid var(--ed-line);
  border-radius: 4px;
  background: var(--ed-panel);
  color: var(--ed-ink-2);
  font-weight: 580;
}
.wx-wiz-load { color: var(--ed-ink-2); }
.wx-wiz-load::before { border-color: var(--ed-line-2); border-top-color: var(--ed-accent); }
.wx-wiz-restart { color: var(--ed-ink-3); }
.wx-wiz-restart:hover { color: var(--ed-accent-ink); }
html:not(.wx-js) .wx-wiz-step + .wx-wiz-step { border-top-color: var(--ed-line); }

/* ---------- Referenz-Karten der Altseiten (/beispiele) ---------- */
.wx-ref-shot { background: var(--ed-panel); border-bottom-color: var(--ed-line); }
.wx-ref-body a { color: var(--ed-accent-ink); font-weight: 620; }
.wx-tags span {
  border-radius: 4px;
  border-color: var(--ed-line);
  background: var(--ed-panel);
  color: var(--ed-ink-2);
}

/* wx-editorial-5-leadform.css */
/* ==========================================================================
   Editorial: LeadForm-Wizard (Kern-Komponente <x-lead-form/>)
   Klassen kommen aus dem Kern (lead-wizard-*), gestylt wurden sie bisher in
   webseite-expert-zz-v-kontakt.css im Framer-Look. Betrifft den
   Paket-Finder auf der Startseite UND das Kontaktformular — deshalb hier
   global editorial, nicht auf .page-home beschraenkt.
   ========================================================================== */

.lead-wizard {
  background: var(--ed-panel);
  border: 1px solid var(--ed-line);
  border-radius: var(--ed-radius);
  box-shadow: none;
}
.lead-wizard:hover { transform: none; box-shadow: none; }

/* ---------- Fortschritt ---------- */
.lead-wizard .lead-wizard-progress-bar {
  height: 6px;
  border-radius: 2px;
  background: var(--ed-paper);
  border: 1px solid var(--ed-line);
  overflow: hidden;
}
.lead-wizard .lead-wizard-progress-fill {
  border-radius: 0;
  background: var(--ed-accent);
}
.lead-wizard .lead-wizard-progress-text {
  font-size: 0.76rem;
  font-weight: 620;
  color: var(--ed-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- Frage ---------- */
.lead-wizard .lead-wizard-step-title {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 660;
  letter-spacing: -0.022em;
  line-height: 1.15;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.4rem);
  color: var(--ed-ink);
}
.lead-wizard .lead-wizard-field > label,
.lead-wizard legend {
  font-weight: 620;
  color: var(--ed-ink);
}

/* ---------- Antwort-Optionen: Haarlinien-Felder statt Pillen ---------- */
.lead-wizard .lead-wizard-choices {
  display: grid;
  gap: 0.55rem;
}
.lead-wizard .lead-wizard-choice {
  border: 1px solid var(--ed-line-2);
  border-radius: 6px;
  background: var(--ed-paper);
  color: var(--ed-ink);
  font-weight: 540;
  padding: 0.8rem 1rem;
  box-shadow: none;
  transition: border-color 0.18s, background 0.18s;
}
.lead-wizard .lead-wizard-choice:hover {
  border-color: var(--ed-ink-3);
  background: var(--ed-paper);
  transform: none;
  box-shadow: none;
}
.lead-wizard .lead-wizard-choice:has(input:checked),
.lead-wizard .lead-wizard-choice.is-selected {
  border-color: var(--ed-accent);
  background: var(--ed-accent-bg);
  color: var(--ed-ink);
  box-shadow: none;
}
.lead-wizard .lead-wizard-choice:has(input:focus-visible) {
  outline: 2px solid var(--ed-accent);
  outline-offset: 2px;
}

/* ---------- Eingabefelder ---------- */
.lead-wizard input[type="text"],
.lead-wizard input[type="email"],
.lead-wizard input[type="tel"],
.lead-wizard textarea,
.lead-wizard select {
  border: 1px solid var(--ed-line-2);
  border-radius: 6px;
  background: var(--ed-paper);
  color: var(--ed-ink);
  box-shadow: none;
}
.lead-wizard input:focus,
.lead-wizard textarea:focus,
.lead-wizard select:focus {
  outline: 2px solid var(--ed-accent);
  outline-offset: 1px;
  border-color: var(--ed-line-2);
  box-shadow: none;
}

/* ---------- Navigation ---------- */
.lead-wizard .lead-wizard-next,
.lead-wizard button[type="submit"] {
  border-radius: var(--ed-radius);
  background: var(--ed-ink);
  border: 1px solid var(--ed-ink);
  color: var(--ed-paper);
  font-weight: 620;
  box-shadow: none;
  transform: none;
}
.lead-wizard .lead-wizard-next:hover,
.lead-wizard button[type="submit"]:hover {
  background: var(--ed-accent-ink);
  border-color: var(--ed-accent-ink);
  color: #fff;
  filter: none;
  transform: none;
  box-shadow: none;
}
.lead-wizard .lead-wizard-next:disabled {
  background: var(--ed-paper);
  border-color: var(--ed-line-2);
  color: var(--ed-ink-3);
}

/* wx-editorial-6-marke.css */
/* ==========================================================================
   webseite.expert — Marke (Bildmarke + Wortmarke) und Schriftfamilie
   an den Kern-Elementen, die noch am Token haengen.

   TEIL 1 — Bildmarke neben dem Schriftzug
   Die Kern-Komponente <x-layout> zeigt im Header ENTWEDER das im Panel
   hinterlegte Logo als <img> ODER den Markennamen als Text — nie beides
   (resources/views/components/layout.blade.php, nur lesbar). Ein im Panel
   gesetztes logo_path wuerde den Schriftzug „Webseite.Expert" also
   ersetzen. Gewuenscht ist aber Bildmarke PLUS Wortmarke.

   Deshalb bleibt das Logo-Feld im Panel leer und die Bildmarke kommt als
   dekoratives ::before an die Marken-Elemente. Sie traegt keine
   Information (der Name steht als Text daneben) und braucht damit auch
   keinen Alt-Text — barrierefrei korrekt.

   Datei: public/assets/custom/wx-logo-mark.svg — Fassung v3 (07.08.2026):
   gefuellte Kachel, gerundetes Quadrat mit weissem „W" — drei Pfade
   (Kachel + Zeichen + Zeichen-Kontur). Der Nutzer lieferte sie in
   #222222 / weiss; hier auf die Palette gezogen: Kachel --ed-ink
   (#1D2B26), Zeichen --ed-paper (#FAF8F3) — dasselbe Farbpaar wie der
   invertierte Primaerbutton in wx-editorial-1-base.css. Achtung: die
   Farben stehen IM SVG (background-image faerbt nichts ein) — bei einer
   Token-Aenderung muss die Datei mit.
   Format 987:987 = exakt quadratisch, randlos gefuellt. Die Groessen
   unten sind width == height, background-size: contain. Bei einem Tausch
   auf ein anderes Seitenverhaeltnis muessen beide Werte mit.
   Vorgaenger: einfarbige Konturmarke 578:570 (v2, mehr Luft im Kaestchen
   als jetzt), davor gefuellte Kachel 987:987, davor Schwung 483:339.
   Hinweis fuer den naechsten Tausch: upload_asset nimmt KEIN .svg
   (nur png/jpg/gif/webp/ico/woff/woff2) — SVG geht ueber write_file.

   TEIL 2 — Archivo auch dort, wo das Token noch greift
   wx-editorial-1-base.css setzt Archivo auf body und h1–h4. Zwei Stellen
   im Kern-CSS ziehen aber weiterhin var(--font-heading) — und das Token
   steht auf Inter (Archivo ist nicht in der kuratierten Font-Bibliothek,
   es kommt als lokale woff2 aus dieser Kette):
     .site-name  — der Markenschriftzug im Header
     .btn        — jeder Button auf jeder Seite
   Gemessen im Draft: beide rendern in Inter, alles andere in Archivo.
   Das Konzept sieht EINE Familie vor — hier durchgesetzt.

   Laedt als letzte Datei der Kette (byte-alphabetisch nach
   wx-editorial-5-leadform.css).
   ========================================================================== */

/* ---------- Header ---------- */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.site-brand::before {
  content: "";
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  background-image: url("/assets/custom/wx-logo-mark.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.site-brand:hover { text-decoration: none; }

/* Wortmarke: dieselbe Familie und dieselbe Breitenachse wie die
   Headlines — der Schriftzug IST eine Headline.
   margin-bottom: -1px = optische Feinjustierung gegen das Signet
   (Wunsch 06.08.2026). Achtung: .site-brand zentriert ueber
   align-items: center, und Flexbox zentriert die MARGIN-Box — ein
   negativer Aussenabstand von 1px verschiebt den Text deshalb nur um
   0,5px nach unten. Fuer volle 1px waere position: relative; top: 1px
   noetig. */
.site-name {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 660;
  letter-spacing: -0.022em;
  margin-bottom: -1px;
}

/* Auf schmalen Viewports sitzt die Marke neben dem Menue-Button —
   Signet etwas kleiner, damit der Schriftzug nicht umbricht. */
@media (max-width: 30rem) {
  .site-brand { gap: 0.5rem; }
  .site-brand::before {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* ---------- Footer ----------
   Dort steht der Firmenname als <strong> (kein Link) — dieselbe Marke,
   eine Spur kleiner. Die Schriftfamilie stimmt dort bereits (erbt von
   body), nur die Bildmarke fehlt. */
.site-footer-company strong {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.site-footer-company strong::before {
  content: "";
  flex: none;
  width: 1.95rem;
  height: 1.95rem;
  background-image: url("/assets/custom/wx-logo-mark.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ---------- Buttons ----------
   Das Kern-CSS setzt .btn auf var(--font-heading) = Inter. Damit lief
   jeder Button der Website in einer zweiten Schrift. Breitenachse hier
   bewusst auf 100 (Normalbreite): Buttons sind Bedienelemente, keine
   Headlines — die schmalere 112er-Achse wirkt in Versalhoehe gedraengt. */
.btn,
.menu-header > ul > li > a[href$="/kontakt"] {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
}

/* wx-editorial-7-wizard.css */
/* ==========================================================================
   webseite.expert — Editorial: Formular-Wizard, Auswahlkacheln und Frage-Hierarchie
   Betrifft den Paket-Finder (Start + /pakete), das Erstgespraech-Formular
   (/kontakt) und die Zusatzfelder der Terminbuchung — alle drei rendern
   dieselben Kern-Klassen (.lead-wizard-*).

   LADEREIHENFOLGE: byte-alphabetisch. Diese Datei laeuft als "wx-editorial-7-"
   nach wx-editorial-5-leadform.css und 6-marke und darf deren Werte also
   ueberschreiben. Verlassen wir uns trotzdem nicht drauf: jede Regel hier ist
   mindestens so spezifisch wie ihr Vorbild.

   SPEZIFITAETS-FALLE, hier einmal reingelaufen (18.08.2026):
   ".lead-wizard .lead-wizard-field-radio > label" und
   ".lead-wizard .lead-wizard-field > label" sind BEIDE (0,2,1) — der
   Bindestrich-Name ist eine Klasse, nicht zwei. Die spaetere Regel gewinnt
   dann, obwohl die frueher notierte spezifischer AUSSIEHT. Deshalb steht das
   schlichte Feld-Label jetzt VOR den Fragen, und die Fragen tragen zusaetzlich
   .lead-wizard-field (0,3,1).

   ANLASS (18.08.2026, Betreiber-Meldung): Zwei Defekte an einer Stelle.
   1. Tempo: Die Fragen waren als type "choice" geschrieben. Jeder Klick auf
      eine Antwort loeste einen Server-Roundtrip aus (gemessen 110–650 ms),
      nur um .is-selected zurueckzugeben. Behoben im Schema, nicht im CSS:
      LeadFormsSeeder nutzt jetzt type "radio" — die Auswahl passiert im
      Browser, ohne Netz. Hier steht dafuer die Optik der Radio-Kacheln.
   2. Lesefuehrung: Die Frage stand in 0,92rem ueber grossen Antwortflaechen
      und wurde deshalb ueberlesen. Jetzt traegt die FRAGE das Gewicht, der
      Schritt-Titel wird zur ruhigen Zeile darueber.

   Keine Pfeile, keine Punkt-Pillen, keine Icons: Auswahl zeigt sich ueber
   Ring, Flaeche und den Radiopunkt selbst.
   ========================================================================== */

/* ==========================================================================
   1. Rahmen und Rhythmus
   ========================================================================== */
.lead-wizard {
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
}

/* Fortschritt und Schritt-Titel bilden oben einen ruhigen Block, danach
   folgt ein deutlicher Absatz zur eigentlichen Frage. */
.lead-wizard .lead-wizard-progress {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.lead-wizard .lead-wizard-progress-bar {
  height: 4px;
  border-radius: 0;
  background: var(--ed-line);
  border: 0;
}
.lead-wizard .lead-wizard-progress-fill {
  background: var(--ed-accent);
  transition: width 0.35s var(--ed-ease);
}
.lead-wizard .lead-wizard-progress-text {
  font-size: 0.75rem;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-ink-3);
  font-variant-numeric: tabular-nums;
}

/* Der Schritt-Titel ist ab jetzt Beiwerk: er nennt das Thema, nicht die
   Frage. Deshalb klein, ruhig und dicht am Fortschritt — die Groesse
   wandert eine Ebene tiefer auf das Feld-Label. */
.lead-wizard .lead-wizard-step-title {
  font-size: 0.9rem;
  font-weight: 620;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ed-ink-2);
  margin: 0 0 1.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--ed-line);
}

.lead-wizard .lead-wizard-field + .lead-wizard-field {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* ==========================================================================
   2. Labels
   Zuerst der schlichte Fall (Name, E-Mail, Telefon, Freitext) — danach die
   Fragen, die ihn ueberschreiben. Reihenfolge ist hier Absicht, siehe die
   Spezifitaets-Notiz im Kopf.
   ========================================================================== */
.lead-wizard .lead-wizard-field > label {
  font-weight: 620;
  color: var(--ed-ink);
}

/* Option-Gruppen (radio/choice) bekommen echte Fragetypografie; reine
   Eingabefelder behalten ihr schlichtes Label — sonst schreien vier
   Kontaktfelder gleichzeitig. */
.lead-wizard .lead-wizard-field.lead-wizard-field-radio > label,
.lead-wizard .lead-wizard-field.lead-wizard-field-choice > label {
  display: block;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 660;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.018em;
  line-height: 1.22;
  color: var(--ed-ink);
  max-width: 26ch;
  text-wrap: balance;
  margin-bottom: 1rem;
}

/* Die erste Frage eines Schritts ist die Ueberschrift dieses Schritts —
   sie darf noch eine Spur groesser stehen. Greift nur, wenn das erste Feld
   wirklich eine Auswahl ist (bei Kontaktschritten also gar nicht). */
.lead-wizard form > .lead-wizard-field.lead-wizard-field-radio:first-child > label,
.lead-wizard form > .lead-wizard-field.lead-wizard-field-choice:first-child > label {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.75rem);
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.024em;
  line-height: 1.14;
  margin-bottom: 1.25rem;
}

.lead-wizard .lead-wizard-help {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ed-ink-2);
  max-width: 44ch;
  margin: -0.5rem 0 1rem;
}

/* ==========================================================================
   3. Auswahlkacheln (radio) — die eigentliche Antwortflaeche
   Markup: <label class="lead-wizard-radio"><input type="radio"> Text</label>
   Der Text ist ein nackter Textknoten, deshalb traegt das <label> selbst das
   Flex-Layout.
   ========================================================================== */
.lead-wizard [role="radiogroup"],
.lead-wizard .lead-wizard-choices {
  display: grid;
  gap: 0.5rem;
}

.lead-wizard .lead-wizard-radio {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.4rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--ed-line-2);
  border-radius: 6px;
  background: var(--ed-paper);
  color: var(--ed-ink);
  font-size: 1rem;
  font-weight: 540;
  line-height: 1.35;
  cursor: pointer;
  /* Kein Wechsel der Schriftstaerke beim Auswaehlen: das wuerde den Text
     breiter machen und die Kachel umbrechen lassen. Der ausgewaehlte
     Zustand kommt ueber Ring und Flaeche. */
  transition:
    border-color 0.16s var(--ed-ease),
    background-color 0.16s var(--ed-ease),
    box-shadow 0.16s var(--ed-ease);
  -webkit-tap-highlight-color: transparent;
}

/* Der Radiopunkt wird selbst gezeichnet — er ist der Zustandsanzeiger, der
   auch dann funktioniert, wenn ein Browser :has() nicht kennt. */
.lead-wizard .lead-wizard-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  border: 1.5px solid var(--ed-line-2);
  border-radius: 50%;
  background: #ffffff;
  transition:
    border-color 0.16s var(--ed-ease),
    box-shadow 0.16s var(--ed-ease);
}
.lead-wizard .lead-wizard-radio input[type="radio"]:checked {
  border-color: var(--ed-accent);
  /* Innerer weisser Ring + Akzentfuellung = klassischer Radiopunkt, ohne
     Pseudo-Element und ohne Groessenaenderung. */
  box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 1rem var(--ed-accent);
}

.lead-wizard .lead-wizard-radio:hover {
  border-color: var(--ed-ink-3);
  background: var(--ed-panel);
}
.lead-wizard .lead-wizard-radio:hover input[type="radio"] {
  border-color: var(--ed-ink-3);
}

/* Ausgewaehlt: Akzentrahmen als Innenring (kein Layout-Sprung durch eine
   zweite Rahmenbreite) plus ruhige Akzentflaeche. */
.lead-wizard .lead-wizard-radio:has(input[type="radio"]:checked) {
  border-color: var(--ed-accent);
  background: var(--ed-accent-bg);
  box-shadow: inset 0 0 0 1px var(--ed-accent);
}
.lead-wizard .lead-wizard-radio:has(input[type="radio"]:checked):hover {
  border-color: var(--ed-accent);
}

/* Tastatur: der Fokus liegt auf dem Input, sichtbar wird die ganze Kachel. */
.lead-wizard .lead-wizard-radio:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--ed-accent);
  outline-offset: 2px;
}
/* Fallback ohne :has() — dann markiert der Browser wenigstens den Punkt. */
.lead-wizard .lead-wizard-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 2px;
}

/* Kurze Nebenfragen (Quelle der Anfrage) duerfen nebeneinander stehen —
   fuenf volle Zeilen waeren am Ende eines Kontaktschritts erschlagend.
   Ohne :has()-Unterstuetzung bleibt es bei der Einspaltigkeit: kein Defekt,
   nur weniger kompakt. */
.lead-wizard [role="radiogroup"]:has(input[name$="-quelle"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lead-wizard [role="radiogroup"]:has(input[name$="-quelle"]) .lead-wizard-radio {
  min-height: 2.9rem;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   4. choice-Buttons (Kern-Fallback)
   Im Schema dieser Website nicht mehr in Gebrauch — das Kern-Markup kann sie
   aber jederzeit wieder liefern (anderes Formular, Panel-Aenderung des
   Betreibers). Deshalb auf dieselbe Optik gezogen.
   ========================================================================== */
.lead-wizard .lead-wizard-choice {
  display: flex;
  align-items: center;
  min-height: 3.4rem;
  width: 100%;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--ed-line-2);
  border-radius: 6px;
  background: var(--ed-paper);
  color: var(--ed-ink);
  font-size: 1rem;
  font-weight: 540;
  line-height: 1.35;
  text-align: left;
}
.lead-wizard .lead-wizard-choice:hover {
  border-color: var(--ed-ink-3);
  background: var(--ed-panel);
}
.lead-wizard .lead-wizard-choice.is-selected {
  border-color: var(--ed-accent);
  background: var(--ed-accent-bg);
  box-shadow: inset 0 0 0 1px var(--ed-accent);
}

/* ==========================================================================
   5. Eingabefelder, Checkboxen, Einwilligung
   ========================================================================== */
.lead-wizard input[type="text"],
.lead-wizard input[type="email"],
.lead-wizard input[type="tel"],
.lead-wizard input[type="date"],
.lead-wizard textarea,
.lead-wizard select {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--ed-line-2);
  border-radius: 6px;
  background: var(--ed-paper);
  color: var(--ed-ink);
}
.lead-wizard input::placeholder,
.lead-wizard textarea::placeholder {
  color: var(--ed-ink-3);
}

.lead-wizard .lead-wizard-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ed-ink-2);
  cursor: pointer;
}
.lead-wizard .lead-wizard-checkbox input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2em;
  accent-color: var(--ed-accent);
}
.lead-wizard .lead-wizard-consent {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--ed-line);
}

.lead-wizard .lead-wizard-error {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-weight: 560;
  color: #a32020;
}

/* ==========================================================================
   6. Navigation und Wartezustand
   Der Schrittwechsel ist der einzige Punkt, an dem noch ein Server-Roundtrip
   stattfindet (Validierung + naechster Schritt). Damit die Wartezeit nicht
   als „reagiert nicht" gelesen wird, meldet der Wizard sie sichtbar.
   Die Zustandsklasse setzt editorial.js an <html> — NICHT an .lead-wizard:
   das ist die Livewire-Wurzel, der Morph wuerde die Klasse verwerfen.
   ========================================================================== */
.lead-wizard .lead-wizard-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
}
.lead-wizard .lead-wizard-nav .lead-wizard-next {
  order: 2;
  background: var(--ed-ink);
  border: 1px solid var(--ed-ink);
  color: var(--ed-paper);
  border-radius: var(--ed-radius);
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-weight: 620;
  box-shadow: none;
  transform: none;
}
.lead-wizard .lead-wizard-nav .lead-wizard-next:hover {
  background: var(--ed-accent-ink);
  border-color: var(--ed-accent-ink);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}
.lead-wizard .lead-wizard-nav .lead-wizard-back {
  order: 1;
  background: transparent;
  border: 1px solid var(--ed-line-2);
  color: var(--ed-ink-2);
  border-radius: var(--ed-radius);
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  font-weight: 560;
}
.lead-wizard .lead-wizard-nav .lead-wizard-back:hover {
  background: transparent;
  border-color: var(--ed-ink);
  color: var(--ed-ink);
}

/* Wartezustand: Formular leicht zurueckgenommen, Bedienung gesperrt,
   Beschriftung des Knopfes wechselt. Fehlt das Skript, passiert nichts —
   der Normalzustand ist bedienbar (Sichtbarkeits-Grundsatz). */
html.wiz-busy .lead-wizard form {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.12s linear;
}
html.wiz-busy .lead-wizard .lead-wizard-nav .lead-wizard-next {
  position: relative;
  color: transparent;
}
html.wiz-busy .lead-wizard .lead-wizard-nav .lead-wizard-next::after {
  content: "Einen Moment …";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ed-paper);
  font-weight: 620;
}
@media (prefers-reduced-motion: reduce) {
  html.wiz-busy .lead-wizard form { transition: none; }
  .lead-wizard .lead-wizard-progress-fill { transition: none; }
}

/* ==========================================================================
   7. Erfolgsmeldung
   ========================================================================== */
.lead-wizard .lead-wizard-success {
  background: var(--ed-accent-bg);
  border: 1px solid var(--ed-accent);
  border-left: 1px solid var(--ed-accent);
  border-radius: 6px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ed-ink);
}

/* ==========================================================================
   8. Enge Viewports
   ========================================================================== */
@media (max-width: 30rem) {
  .lead-wizard .lead-wizard-radio {
    align-items: flex-start;
    padding: 0.85rem 1rem;
  }
  .lead-wizard .lead-wizard-radio input[type="radio"] {
    margin-top: 0.15em;
  }
  .lead-wizard .lead-wizard-nav .lead-wizard-next,
  .lead-wizard .lead-wizard-nav .lead-wizard-back {
    flex: 1 1 100%;
    text-align: center;
  }
}