/* ═══════════════════════════════════════════════════════════════
   WTS PATCH v25 — Fehlende Klassen & Inline-Style-Overrides
   Wird NACH allen anderen CSS-Files geladen.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. HERO-STATS — horizontales Grid statt vertikal gestackt
   ═══════════════════════════════════════════════════════════════ */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 800px;
  margin: 3rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hstat {
  text-align: center;
  min-width: 0;
}
.hstat-num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  color: var(--surface);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: .35rem;
}
.hstat-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.55);
  line-height: 1.4;
}
@media (max-width: 700px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   2. TRUST-BAR unter Hero (Deutschland-Karte, ISO, DSGVO)
   ═══════════════════════════════════════════════════════════════ */
.de-trust-bar {
  padding: 1.5rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.de-trust-bar .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.de-trust-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  justify-content: center;
}
.de-trust-flag,
.de-trust-icon {
  flex-shrink: 0;
  color: var(--ink);
}
.de-trust-flag svg { width: 26px; height: 26px; }
.de-trust-icon    { width: 22px; height: 22px; }
.de-trust-divider {
  width: 1px;
  height: 32px;
  background: var(--line);
}
.de-trust-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.de-trust-sub {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .1rem;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .de-trust-bar .container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .de-trust-divider { display: none; }
  .de-trust-item    { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   3. PLANS-GRID + PRICING
   ═══════════════════════════════════════════════════════════════ */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1100px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .plans-grid { grid-template-columns: 1fr; } }

.plan-card { position: relative; }

/* "🔥 Beliebteste Wahl" Badge — von oben in die Karte reichend */
.plan-top-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: var(--r-full);
  white-space: nowrap;
  z-index: 2;
}
.plan-card.featured { border-color: var(--ink); }
/* Der ::before-Beliebt-Badge aus components.css kollidiert — bei .featured mit .plan-top-badge deaktivieren */
.plan-card.featured:has(.plan-top-badge)::before { display: none; }

/* Preis-Struktur (price-cur, price-amount, price-per, price-orig) */
.plan-price {
  display: flex;
  align-items: baseline;
  gap: .1rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin: .5rem 0 0;
}
.price-cur {
  font-size: 1.4rem;
  line-height: 1;
}
.price-amount {
  font-size: 2.6rem;
  line-height: 1;
}
.price-per {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
  margin-left: .2rem;
  letter-spacing: 0;
}
.price-orig {
  width: 100%;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  letter-spacing: 0;
  margin-top: .25rem;
}

/* ═══════════════════════════════════════════════════════════════
   4. BILLING-TOGGLE (toggle-pill, toggle-label, save-chip)
   ═══════════════════════════════════════════════════════════════ */
.billing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: 0 auto 2rem;
  flex-wrap: wrap;
}
.toggle-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.toggle-label.active { color: var(--ink); }

.toggle-pill {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--line-strong);
  border-radius: 9999px;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle-pill::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(11,11,12,.15);
}
.toggle-pill.on          { background: var(--ink); }
.toggle-pill.on::after   { transform: translateX(20px); }

.save-chip {
  display: inline-block;
  background: var(--ok-bg);
  color: var(--ok-text);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: var(--r-full);
  border: 1px solid var(--ok-border);
  letter-spacing: .5px;
  margin-left: .25rem;
}

/* ═══════════════════════════════════════════════════════════════
   5. TLD-PILLS (Domain-Endungs-Preise unter Suchbox)
   ═══════════════════════════════════════════════════════════════ */
.tld-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin-top: 1rem;
  padding: 0 .5rem;
}
.tld-pill-sm {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  transition: border-color .15s;
}
.tld-pill-sm:hover { border-color: var(--line-strong); }
.tld-pill-sm strong {
  color: var(--ink);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   6. WTS-TABS auf volle Breite + Icon-links-Text-rechts
   ═══════════════════════════════════════════════════════════════ */
.wts-tabs {
  display: flex;              /* nicht mehr inline-flex */
  width: 100%;                /* volle Breite */
  gap: 4px;
  background: var(--tile-bg);
  padding: 4px;
  border-radius: var(--r-btn);
}
.wts-tab {
  flex: 1 1 0;                /* jeder Tab füllt gleich viel Platz */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;                 /* Abstand zwischen Icon und Text */
  padding: .65rem 1rem;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  min-width: 0;
}
.wts-tab svg { flex-shrink: 0; }
.wts-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,11,12,.06);
}
@media (max-width: 780px) {
  .wts-tabs { flex-wrap: wrap; }
  .wts-tab  { flex: 1 1 auto; padding: .6rem .85rem; font-size: .8rem; }
}
/* Mobile-Variante bei sehr vielen Tabs: nur Icon (Text weg) */
@media (max-width: 520px) {
  .wts-tab { flex: 1 1 0; padding: .65rem .4rem; }
  .wts-tab span, .wts-tab { font-size: .75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   7. DATACENTER-SECTION — Inline-Style-Overrides
   Die index.html hat inline style="background:linear-gradient(90deg,#b146f8,#5ccbf9)"
   an mehreren Stellen. Diese hier neutralisieren.
   ═══════════════════════════════════════════════════════════════ */

/* MADE IN GERMANY Section-Tag — inline lila-Hintergrund entfernen */
.section-dark .section-tag[style*="rgba(177,70,248"] {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.9) !important;
}
.section-dark .section-tag[style*="rgba(177,70,248"] svg { color: rgba(255,255,255,.85); }

/* "Standorte ansehen" Button mit inline gradient — auf ink+white umstellen */
.section-dark a.btn-primary[style*="linear-gradient"] {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--surface) !important;
}
.section-dark a.btn-primary[style*="linear-gradient"]:hover {
  background: rgba(255,255,255,.9) !important;
}

/* Datacenter-Cards mit inline rgba-Purple und Gradient-Text */
.section-dark div[style*="rgba(177,70,248,.08)"],
.section-dark div[style*="rgba(92,203,249,.08)"] {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.section-dark div[style*="-webkit-background-clip:text"] {
  background: none !important;
  -webkit-text-fill-color: var(--surface) !important;
  color: var(--surface) !important;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

/* CTA-Section "Jetzt starten"-Button mit inline background:var(--surface);color:var(--brand)
   sollte in der neuen tokens.css schon ink sein, aber sicher gehen: */
.cta-section a.btn[style*="var(--surface)"][style*="var(--brand)"] {
  color: var(--ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. FEATURE-ICONS — konsistent monochrom (App v23 Look)
   Die farbigen dic-icon--* / fcard-icon--* Kacheln waren zu bunt.
   Jetzt alle einheitlich in tile-bg + ink, mit dezenter Ton-Palette.
   ═══════════════════════════════════════════════════════════════ */
.fcard-icon,
.dic-icon,
.upsell-card-ico,
.portal-card-icon,
.plan-icon,
.feature-icon {
  background: var(--tile-bg);
  color: var(--ink);
}
/* Farb-Varianten: nur noch minimal getönte Kacheln, Icon bleibt ink */
.fcard-icon--blue,   .dic-icon--blue   { background: #EEF2F7; color: var(--ink); }
.fcard-icon--green,  .dic-icon--green  { background: #EEF4EF; color: var(--ink); }
.fcard-icon--purple, .dic-icon--purple { background: #F1EEF7; color: var(--ink); }
.fcard-icon--red,    .dic-icon--red    { background: #F7EEEE; color: var(--ink); }
.fcard-icon--teal,   .dic-icon--teal   { background: #EEF5F5; color: var(--ink); }
.fcard-icon--orange, .dic-icon--orange { background: #F7F1EA; color: var(--ink); }
.fcard-icon--yellow, .dic-icon--yellow { background: #F7F4EA; color: var(--ink); }

[data-theme="dark"] .fcard-icon--blue,   [data-theme="dark"] .dic-icon--blue,
[data-theme="dark"] .fcard-icon--green,  [data-theme="dark"] .dic-icon--green,
[data-theme="dark"] .fcard-icon--purple, [data-theme="dark"] .dic-icon--purple,
[data-theme="dark"] .fcard-icon--red,    [data-theme="dark"] .dic-icon--red,
[data-theme="dark"] .fcard-icon--teal,   [data-theme="dark"] .dic-icon--teal,
[data-theme="dark"] .fcard-icon--orange, [data-theme="dark"] .dic-icon--orange,
[data-theme="dark"] .fcard-icon--yellow, [data-theme="dark"] .dic-icon--yellow {
  background: var(--tile-bg);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   9. DOMAIN-INKL-CARD Layout-Fix
   Der Card-Content mit dic-body/dic-check ist im Screenshot zerfallen
   ═══════════════════════════════════════════════════════════════ */
.domain-incl-card {
  align-items: flex-start;
  gap: .9rem;
}
.domain-incl-card .dic-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.domain-incl-card .dic-body {
  flex: 1;
  min-width: 0;
}
.domain-incl-card .dic-title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: .15rem;
}
.domain-incl-card .dic-check {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ok-text);
  margin-bottom: .35rem;
  display: block;
}
.domain-incl-card .dic-desc {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   10. DOMAIN-SEARCH-BOX Layout-Fix (Padding + Focus)
   ═══════════════════════════════════════════════════════════════ */
.domain-search-box {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  overflow: hidden;
  padding: 5px;
}
.domain-search-box:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11,11,12,.06);
}
.domain-search-box input {
  flex: 1;
  border: none;
  background: transparent;
  padding: .75rem 1rem;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.domain-search-box input::placeholder { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   11. PAGE-BANNER (Screenshot 6: "Deine perfekte Domain")
   ═══════════════════════════════════════════════════════════════ */
.page-banner {
  text-align: center;
  padding: 3.5rem 1.5rem 2.5rem;
}
.page-banner h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: .5rem;
}
.page-banner p {
  font-size: 1rem;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   12. HERO H1 — italic-Emphasis
   "Deine digitale Idee verdient echtes Handwerk." — das em soll
   kursiv sein, wie im Screenshot gewünscht.
   ═══════════════════════════════════════════════════════════════ */
.hero h1 em {
  font-style: italic;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   13. VERSCHIEDENE INLINE-STYLE-OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* .form-input mit inline max-width — nicht mehr full-width padding */
.form-input[style*="max-width:200px"] {
  padding: .55rem .9rem !important;
}

/* Checkbox in TLD-Filter */
input[type="checkbox"] {
  accent-color: var(--ink);
}

/* Bezahlte-Section-Info-Bar (99.9% Uptime SLA) */
.section-dark div[style*="rgba(21,128,61"] {
  background: rgba(34,197,94,.08) !important;
  border-color: rgba(34,197,94,.25) !important;
  color: #4ade80 !important;
  font-family: var(--font-mono) !important;
  font-size: .72rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════
   v26 MASSIVE LEGACY-NEUTRALISIERUNG
   Der Design-Audit hat ergeben: 165 HTML-Views haben inline-Purple.
   Statt jede Datei zu editieren neutralisieren wir sie CSS-seitig
   über Attribute-Selectors auf den style="" Inhalt.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 14. Alle inline-Backgrounds/Borders mit Purple-Rot-Werten ─── */

/* Purple-Backgrounds (rgba(103,61,230), rgba(177,70,248), rgba(92,203,249)) */
[style*="rgba(103,61,230"],
[style*="rgba(103, 61, 230"],
[style*="rgba(177,70,248"],
[style*="rgba(177, 70, 248"],
[style*="rgba(92,203,249"],
[style*="rgba(92, 203, 249"] {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* Elemente die sowohl Purple-BG als auch Purple-Border/Shadow hatten
   sollen jetzt neutrale Card-Optik zeigen */
div[style*="rgba(177,70,248,.08)"],
div[style*="rgba(177,70,248, .08)"],
div[style*="rgba(92,203,249,.08)"],
div[style*="rgba(103,61,230,.08)"] {
  background: var(--tile-bg) !important;
  border-color: var(--line) !important;
}

/* Purple-Farb-Text (color:#b146f8 etc.) */
[style*="color:#b146f8"],
[style*="color: #b146f8"],
[style*="color:#5ccbf9"],
[style*="color: #5ccbf9"],
[style*="color:#673de6"],
[style*="color: #673de6"],
[style*="color:#673DE6"],
[style*="color: #673DE6"],
[style*="color:#4e26d4"],
[style*="color: #4e26d4"] {
  color: var(--ink) !important;
}
/* Ausnahme: auf dunklem Grund weiß */
.section-dark [style*="color:#b146f8"],
.section-dark [style*="color: #b146f8"],
.section-dark [style*="color:#5ccbf9"],
.section-dark [style*="color: #5ccbf9"] {
  color: var(--surface) !important;
}

/* Linear-Gradients mit den Brand-Farben (Backgrounds) */
[style*="linear-gradient(90deg,#b146f8"],
[style*="linear-gradient(90deg, #b146f8"],
[style*="linear-gradient(135deg,#b146f8"],
[style*="linear-gradient(135deg, #b146f8"],
[style*="linear-gradient(145deg,#b146f8"],
[style*="linear-gradient(145deg, #b146f8"],
[style*="linear-gradient(45deg,#b146f8"],
[style*="linear-gradient(45deg, #b146f8"] {
  background-image: none !important;
  background-color: var(--ink) !important;
}

/* Buttons mit Purple-Gradient-Background */
a[style*="linear-gradient"][style*="#b146f8"],
button[style*="linear-gradient"][style*="#b146f8"] {
  background: var(--ink) !important;
  color: var(--surface) !important;
  border: 1px solid var(--ink) !important;
}
a[style*="linear-gradient"][style*="#b146f8"]:hover,
button[style*="linear-gradient"][style*="#b146f8"]:hover {
  background: #000 !important;
  color: var(--surface) !important;
}
/* Auf dunklem Grund: heller */
.section-dark a[style*="linear-gradient"][style*="#b146f8"],
.section-dark button[style*="linear-gradient"][style*="#b146f8"] {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--surface) !important;
}
.section-dark a[style*="linear-gradient"][style*="#b146f8"]:hover,
.section-dark button[style*="linear-gradient"][style*="#b146f8"]:hover {
  background: rgba(255,255,255,.9) !important;
}

/* Text mit -webkit-background-clip:text und Purple-Gradient — auf ink umstellen */
[style*="-webkit-background-clip:text"],
[style*="-webkit-background-clip: text"],
[style*="background-clip:text"],
[style*="background-clip: text"] {
  background-image: none !important;
  background-color: transparent !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}
.section-dark [style*="-webkit-background-clip:text"],
.section-dark [style*="-webkit-background-clip: text"],
.section-dark [style*="background-clip:text"],
.section-dark [style*="background-clip: text"] {
  -webkit-text-fill-color: var(--surface) !important;
  color: var(--surface) !important;
}

/* Purple-getönte Box-Shadows entfernen */
[style*="box-shadow"][style*="rgba(103,61,230"],
[style*="box-shadow"][style*="rgba(177,70,248"],
[style*="box-shadow"][style*="rgba(92,203,249"],
[style*="box-shadow"][style*="rgba(103, 61, 230"],
[style*="box-shadow"][style*="rgba(177, 70, 248"] {
  box-shadow: none !important;
}

/* Border-Colors mit Purple-Werten */
[style*="border-color:#b146f8"],
[style*="border-color: #b146f8"],
[style*="border-color:#5ccbf9"],
[style*="border-color: #5ccbf9"],
[style*="border-color:#673de6"],
[style*="border-color: #673de6"],
[style*="border:1px solid #b146f8"],
[style*="border: 1px solid #b146f8"] {
  border-color: var(--line-strong) !important;
}

/* ─── 15. Border-Radien auf zeitgemäße Werte ─── */
/* Nichts über 18px, weil das App-Design max. 14-16 nutzt.
   Legacy inline-styles mit 20/24/28px werden abgesenkt. */
[style*="border-radius:20px"], [style*="border-radius: 20px"],
[style*="border-radius:22px"], [style*="border-radius: 22px"],
[style*="border-radius:24px"], [style*="border-radius: 24px"] {
  border-radius: 16px !important;
}
[style*="border-radius:28px"], [style*="border-radius: 28px"],
[style*="border-radius:32px"], [style*="border-radius: 32px"] {
  border-radius: 18px !important;
}

/* ─── 16. Legacy Font-Family Overrides ─── */
/* Manche Views haben inline Plus Jakarta / DM Sans / Playfair.
   Diese auf die neuen Font-Stacks umleiten. */
[style*="Plus Jakarta"] {
  font-family: var(--font-body) !important;
}
[style*="DM Sans"] {
  font-family: var(--font-body) !important;
}
[style*="Playfair"] {
  font-family: var(--font-display) !important;
}
[style*="Courier"],
[style*="courier"],
[style*="monospace"]:not([style*="font-family:'JetBrains"]):not([style*="font-family: 'JetBrains"]) {
  font-family: var(--font-mono) !important;
}

/* ─── 17. Legacy 1.5px Borders → 1px (Design-Konsistenz) ─── */
[style*="border:1.5px"],
[style*="border: 1.5px"],
[style*="border-width:1.5px"],
[style*="border-width: 1.5px"] {
  border-width: 1px !important;
}
[style*="border:2px"]:not([style*="border-bottom:2px"]):not([style*="border-top:2px"]) {
  border-width: 1px !important;
}

/* ─── 18. Häufige inline-Card-Muster im Portal ─── */
/* Cards mit background:#f4f0ff (alter brand-light Card-BG) */
[style*="background:#f4f0ff"],
[style*="background: #f4f0ff"],
[style*="background:#ede9fe"],
[style*="background: #ede9fe"],
[style*="background:#f5f3ff"],
[style*="background: #f5f3ff"] {
  background: var(--tile-bg) !important;
}

/* ─── 19. Hover-Effekte mit Purple ─── */
/* transform: translateY(-2px) hover: ist okay, aber Purple-Border-Hover raus */
a[href][style*="hover"][style*="#b146f8"]:hover,
button[style*="hover"][style*="#b146f8"]:hover {
  border-color: var(--ink) !important;
}

/* ─── 20. Alte "Beliebt"/"Featured" Badges mit Gradient ─── */
[class*="badge"][style*="linear-gradient"],
[class*="Badge"][style*="linear-gradient"],
[class*="ribbon"][style*="linear-gradient"] {
  background: var(--ink) !important;
  color: var(--surface) !important;
}

/* ─── 21. Icon-Circles mit Brand-Gradient ─── */
/* Muster wie: <div style="width:52px;height:52px;background:linear-gradient(135deg,#b146f8,#5ccbf9);color:#fff"> */
[style*="width:52px"][style*="linear-gradient"],
[style*="width:48px"][style*="linear-gradient"],
[style*="width:46px"][style*="linear-gradient"],
[style*="width:40px"][style*="linear-gradient"],
[style*="width:44px"][style*="linear-gradient"] {
  background: var(--tile-bg) !important;
  color: var(--ink) !important;
}

/* ─── 22. Fallback-Regeln für Section-Tags mit inline Purple ─── */
.section-tag[style*="background:rgba(177,70,248"],
.section-tag[style*="background: rgba(177,70,248"],
.section-tag[style*="background:rgba(103,61,230"] {
  background: var(--tile-bg) !important;
  color: var(--muted) !important;
}
.section-dark .section-tag[style*="background:rgba(177,70,248"],
.section-dark .section-tag[style*="background: rgba(177,70,248"] {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.85) !important;
}

/* ─── 23. Häufige Purple-Text-Underlines/-Highlights ─── */
[style*="text-decoration-color:#b146f8"],
[style*="text-decoration-color: #b146f8"] {
  text-decoration-color: var(--ink) !important;
}

/* ─── 24. Loading-Spinner-Border mit Brand-Color ─── */
[style*="border-top-color:#b146f8"],
[style*="border-top-color: #b146f8"],
[style*="border-top-color:#673de6"] {
  border-top-color: var(--ink) !important;
}

/* ─── 25. Progress-Bar-Fills mit Brand-Farbe ─── */
[style*="background:#b146f8"],
[style*="background: #b146f8"],
[style*="background-color:#b146f8"],
[style*="background-color: #b146f8"],
[style*="background:#673de6"],
[style*="background: #673de6"] {
  background-color: var(--ink) !important;
  background-image: none !important;
}

/* ─── 26. Old-School Feature-Icon-Kacheln (inline width/height + purple bg) ─── */
div[style*="width:56px"][style*="rgba(177"],
div[style*="height:56px"][style*="rgba(177"],
div[style*="width:48px"][style*="rgba(103"],
div[style*="height:48px"][style*="rgba(103"] {
  background: var(--tile-bg) !important;
  color: var(--ink) !important;
}

/* ─── 27. Emoji-basierte Feature-Boxes: nichts kaputt machen ─── */
/* Nur Border neutralisieren, aber font-size etc. respektieren */

/* ═══════════════════════════════════════════════════════════════
   28. NEUE KLASSEN FÜR /erstgespraech (Terminbuchung)
   Multi-Step Formular, Kalender, Zeit-Slot-Auswahl
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper */
.book-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Stepper */
.book-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2.5rem;
  padding: 0 .5rem;
}
.book-step {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  min-width: 90px;
}
.book-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  transition: all .2s;
}
.book-step-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  text-align: center;
  transition: color .2s;
}
.book-step.active .book-step-num {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.book-step.active .book-step-label { color: var(--ink); }
.book-step.done .book-step-num {
  background: var(--ok-bg);
  color: var(--ok-text);
  border-color: var(--ok-border);
}
.book-step.done .book-step-num::after {
  content: '✓';
  font-family: var(--font-body);
}
.book-step.done .book-step-num-value { display: none; }

.book-step-divider {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
  min-width: 20px;
  margin: 0 .35rem;
  margin-bottom: 22px;
  transition: background .2s;
}
.book-step-divider.done { background: var(--ok-text); }

/* Step-Content */
.book-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 2rem;
  margin-bottom: 1rem;
}
.book-panel[hidden] { display: none; }

.book-panel-header {
  margin-bottom: 1.5rem;
}
.book-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: .35rem;
  display: block;
}
.book-panel-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: .35rem;
}
.book-panel-sub {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Nav */
.book-nav {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.book-nav .btn { min-width: 140px; }

/* Project-Type Checkboxes (Multi-Select-Cards) */
.book-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.book-type {
  display: flex;
  gap: .85rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  align-items: flex-start;
  position: relative;
}
.book-type:hover { border-color: var(--ink); }
.book-type input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.book-type-icon {
  width: 36px; height: 36px;
  background: var(--tile-bg);
  color: var(--ink);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.book-type-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.book-type-body { flex: 1; min-width: 0; }
.book-type-title {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: .15rem;
}
.book-type-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.4;
}
.book-type-check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.book-type-check svg {
  width: 12px; height: 12px;
  color: var(--surface);
  opacity: 0;
  transition: opacity .15s;
}
.book-type.selected {
  border-color: var(--ink);
  background: var(--paper);
}
.book-type.selected .book-type-check {
  background: var(--ink);
  border-color: var(--ink);
}
.book-type.selected .book-type-check svg { opacity: 1; }

/* Zusatzfelder (dynamisch pro Typ) */
.book-subfields {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.book-subfield-group {
  margin-bottom: 1.25rem;
}
.book-subfield-group[hidden] { display: none; }
.book-subfield-group-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: .85rem;
}
.book-defer-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
  padding: .55rem .85rem;
  background: var(--tile-bg);
  border-radius: var(--r-lg);
  font-size: .82rem;
  color: var(--ink-muted);
  cursor: pointer;
}
.book-defer-check input {
  accent-color: var(--ink);
  cursor: pointer;
}

/* Kalender */
.book-cal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.25rem;
}
.book-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.book-cal-month {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.book-cal-nav {
  display: flex;
  gap: .35rem;
}
.book-cal-nav button {
  width: 34px; height: 34px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.book-cal-nav button:hover:not(:disabled) { background: var(--tile-bg); border-color: var(--ink); }
.book-cal-nav button:disabled { opacity: .4; cursor: not-allowed; }
.book-cal-nav svg { width: 15px; height: 15px; }

.book-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.book-cal-weekday {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  text-align: center;
  padding: .5rem 0;
}
.book-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.book-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .12s;
}
.book-cal-day.other-month { color: var(--line-strong); cursor: default; }
.book-cal-day.disabled {
  color: var(--line-strong);
  cursor: not-allowed;
  background: transparent;
}
.book-cal-day.available:hover {
  background: var(--tile-bg);
  border-color: var(--line-strong);
}
.book-cal-day.available::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ok-text);
}
.book-cal-day.available {
  position: relative;
  color: var(--ink);
  font-weight: 600;
}
.book-cal-day.selected {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.book-cal-day.selected::after { background: var(--surface); }
.book-cal-day.today {
  border-color: var(--line-strong);
}

/* Zeit-Slots */
.book-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
  margin-top: 1.5rem;
  max-height: 340px;
  overflow-y: auto;
  padding: .25rem;
}
.book-slot {
  padding: .78rem .55rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all .12s;
  text-align: center;
}
.book-slot:hover:not(:disabled) {
  border-color: var(--ink);
}
.book-slot.selected {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.book-slot:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.book-slots-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: .88rem;
}

/* Zusammenfassungs-Panel (Step 4) */
.book-summary {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  margin-top: 1.25rem;
}
.book-summary-row {
  display: flex;
  justify-content: space-between;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
  gap: 1rem;
}
.book-summary-row:last-child { border-bottom: none; }
.book-summary-label { color: var(--muted); flex-shrink: 0; }
.book-summary-value { font-weight: 600; text-align: right; color: var(--ink); }

/* Success/Error-Panel */
.book-result {
  text-align: center;
  padding: 3rem 1.5rem;
}
.book-result-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-result.success .book-result-icon {
  background: var(--ok-bg);
  color: var(--ok-text);
}
.book-result.error .book-result-icon {
  background: var(--err-bg);
  color: var(--err-text);
}
.book-result-icon svg { width: 34px; height: 34px; }
.book-result h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin-bottom: .75rem;
}
.book-result p {
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 640px) {
  .book-panel { padding: 1.5rem 1.25rem; }
  .book-step-label { display: none; }
  .book-step-divider { min-width: 12px; }
  .book-types { grid-template-columns: 1fr; }
  .book-cal-day { font-size: .8rem; }
  .book-slots { grid-template-columns: repeat(2, 1fr); }
}