/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Konsolidierte Patches (portal-patches.css)

   Automatisch generiert durch consolidate-patches.js (v54).
   Ersetzt alle einzelnen patch-vXX.css Dateien.

   Beim Hinzufügen neuer Fixes:
     - Neuen v-Kommentar-Block am Ende anhängen
     - Format: /* ═══ vNN — Beschreibung ═══ */

     - Keine einzelnen patch-vXX.css mehr anlegen
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
 * v25 — aus patch-v25.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   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 — aus patch-v26.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   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); }
}

/* ═══════════════════════════════════════════════════════
 * v30 — aus patch-v30.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v30
   Fixes:
   1. Dark-Mode Hero: H1/CTA/Stats waren durch generische darkmode.css
      Regeln überschrieben und nicht mehr lesbar.
   2. Layout "Made in Germany" + "Bereit loszulegen" — Sektionen
      hatten unpassende Abstände zueinander.
   3. Kleine Farb-Cleanups für neue Termin-Komponenten im Dark-Mode.

   Einbinden in views/layout.html am ENDE der CSS-Kette:
     <link rel="stylesheet" href="/css/patch-v30.css?v={{BUILD_TS}}">
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. HERO-FIX Dark-Mode ─────────────────────────────────
   Die Regel in darkmode.css Zeile 511 (`[data-theme="dark"] h1,
   h2, h3, ... { color: var(--text); }`) überschreibt jede
   Hero-Überschrift. Der Hero ist aber IMMER dunkel-violet
   (Gradient) — dort brauchen wir weißen Text.
   
   Mit :is() und höherer Spezifität überschreiben wir zurück. */

[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero > p,
[data-theme="dark"] .hero-sub,
[data-theme="dark"] .hero p:not(.hero-badge),
[data-theme="dark"] .hero .hero-badge span,
[data-theme="dark"] .hero-stats .hstat,
[data-theme="dark"] .hero-stats .hstat-num,
[data-theme="dark"] .hero-stats .hstat-label {
  color: white !important;
}

[data-theme="dark"] .hero > p,
[data-theme="dark"] .hero-sub {
  color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] .hero-stats .hstat-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

[data-theme="dark"] .hero h1 em {
  color: #c4a8ff !important;  /* Emphasis-Highlight bleibt lila */
}

/* Hero-CTA "Hosting ab €1,99/Mo" — btn-outline-white
   auf dunklem Hintergrund immer weiß mit ausreichend Kontrast */
[data-theme="dark"] .hero .btn-outline-white {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="dark"] .hero .btn-outline-white:hover {
  border-color: white !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

/* Hero-Badge "Wärner Technologie Services — Digital Made in Germany" */
[data-theme="dark"] .hero-badge {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}


/* ─── 2. TRUST-BAR (Deutschland/DSGVO/ISO) ────────────────
   Auch die de-trust-bar-Elemente können im Dark-Mode
   verwaschen wirken. Dezent aufhellen. */

[data-theme="dark"] .de-trust-bar {
  background: #14141f !important;
  border-color: #2a2a42 !important;
}
[data-theme="dark"] .de-trust-title {
  color: #e8e8f4 !important;
}
[data-theme="dark"] .de-trust-sub {
  color: #a0a0c0 !important;
}
[data-theme="dark"] .de-trust-divider {
  background: #2a2a42 !important;
}


/* ─── 3. "Made in Germany" Sektion + "Bereit loszulegen"
       Layout-Fix ────────────────────────────────────────────
   Diese beiden Sektionen liegen direkt aufeinander und die
   Zwischen-Padding sind unstimmig. Fix: einheitlicher Rhythmus. */

/* CTA-Sektion "Bereit loszulegen?" wird oft nach section--sm
   (Made in Germany) direkt angehängt. Beide bekommen jetzt
   konsistente Abstände */
.section + .cta-section,
.section--sm + .cta-section,
section + .cta-section {
  margin-top: 0;
}

.cta-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (max-width: 768px) {
  .cta-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Sichtbare Trennung zwischen "Made in Germany"-Karte und
   "Bereit loszulegen"-CTA — feine Border-top statt Ansammlung */
[data-theme="dark"] .cta-section {
  background: #0a0a14 !important;
  border-top: 1px solid #1e1e32;
}

[data-theme="light"] .cta-section,
:root:not([data-theme="dark"]) .cta-section {
  border-top: 1px solid var(--border, #ececee);
}


/* ─── 4. Termin-Manage-Seite (v29) im Dark-Mode ────────────
   Die neue /termin/:token Seite nutzte var(--surface, #fff)
   Fallbacks — im Dark-Mode passen die var() Werte, aber die
   Fallbacks würden falsch aussehen. Explizit fixen. */

[data-theme="dark"] .tk-card,
[data-theme="dark"] .tk-modal {
  background: #13131f !important;
  border-color: #2a2a42 !important;
}
[data-theme="dark"] .tk-h1,
[data-theme="dark"] .tk-panel-title,
[data-theme="dark"] .tk-info-value {
  color: #e8e8f4 !important;
}
[data-theme="dark"] .tk-lead,
[data-theme="dark"] .tk-info-label,
[data-theme="dark"] .tk-note {
  color: #a0a0c0 !important;
}
[data-theme="dark"] .tk-eyebrow,
[data-theme="dark"] .tk-panel-eyebrow {
  background: #1a1a2e !important;
  color: #a0a0c0 !important;
}
[data-theme="dark"] .tk-info {
  background: #1a1a2e !important;
}
[data-theme="dark"] .tk-info-row {
  border-bottom-color: #2a2a42 !important;
}
[data-theme="dark"] .tk-btn-secondary {
  background: #1a1a2e !important;
  color: #e8e8f4 !important;
  border-color: #2a2a42 !important;
}
[data-theme="dark"] .tk-btn-primary {
  background: #b146f8 !important;
  border-color: #b146f8 !important;
  color: white !important;
}
[data-theme="dark"] .tk-meeting-link {
  background: #1a1a2e !important;
  border-color: #2a2a42 !important;
  color: #c8c8e0 !important;
}

/* Termin-Erstgespräch (Buchungswidget) im Dark-Mode */
[data-theme="dark"] .book-panel {
  background: #13131f !important;
  border-color: #2a2a42 !important;
}
[data-theme="dark"] .book-h1,
[data-theme="dark"] .book-panel-title,
[data-theme="dark"] .book-label,
[data-theme="dark"] .book-summary-value,
[data-theme="dark"] .book-step-label {
  color: #e8e8f4 !important;
}
[data-theme="dark"] .book-lead,
[data-theme="dark"] .book-panel-sub,
[data-theme="dark"] .book-summary-label {
  color: #a0a0c0 !important;
}
[data-theme="dark"] .book-eyebrow,
[data-theme="dark"] .book-panel-eyebrow,
[data-theme="dark"] .book-subfield-title {
  background: #1a1a2e !important;
  color: #a0a0c0 !important;
}
[data-theme="dark"] .book-input,
[data-theme="dark"] .book-textarea {
  background: #1a1a2e !important;
  border-color: #2a2a42 !important;
  color: #e8e8f4 !important;
}
[data-theme="dark"] .book-summary {
  background: #1a1a2e !important;
}
[data-theme="dark"] .book-type,
[data-theme="dark"] .book-cal {
  background: #1a1a2e !important;
  border-color: #2a2a42 !important;
}
[data-theme="dark"] .book-type-icon {
  background: #2a2a42 !important;
  color: #e8e8f4 !important;
}
[data-theme="dark"] .book-type.selected {
  background: #2a2a42 !important;
  border-color: #b146f8 !important;
}
[data-theme="dark"] .book-type-title,
[data-theme="dark"] .book-cal-month,
[data-theme="dark"] .book-cal-day {
  color: #e8e8f4 !important;
}
[data-theme="dark"] .book-type-desc,
[data-theme="dark"] .book-cal-weekday {
  color: #a0a0c0 !important;
}
[data-theme="dark"] .book-cal-day.other-month,
[data-theme="dark"] .book-cal-day.disabled {
  color: #4a4a62 !important;
}
[data-theme="dark"] .book-slot {
  background: #1a1a2e !important;
  border-color: #2a2a42 !important;
  color: #e8e8f4 !important;
}
[data-theme="dark"] .book-slot.selected {
  background: #b146f8 !important;
  border-color: #b146f8 !important;
  color: white !important;
}
[data-theme="dark"] .book-btn-primary {
  background: #b146f8 !important;
  border-color: #b146f8 !important;
  color: white !important;
}
[data-theme="dark"] .book-btn-secondary {
  background: #1a1a2e !important;
  border-color: #2a2a42 !important;
  color: #e8e8f4 !important;
}

/* ═══════════════════════════════════════════════════════
 * v33 — aus patch-v33.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v33
   
   Fixes:
   1. Startseite .hero: Im Dark-Mode war Text unlesbar, weil
      `.hero h1 { color: var(--surface) }` — --surface ist im
      Dark-Mode DUNKELGRAU. Fix: .hero ist IMMER dunkel mit
      weißen Texten, unabhängig vom Theme.
      
   2. Branchen-Hero .brl-hero h1 em: v32 Purple-Substitution
      war naiv (linear-gradient(--ink, --ink-muted)) — im
      Light-Mode ist das schwarz-auf-schwarz. Fix: weißer
      Highlight-Gradient, weil der Branchen-Hero immer
      dunkel ist.
      
   3. Branchen .brl-hero-btn--primary: Selbes Problem —
      Button war schwarz-auf-schwarz. Fix: weißer Button
      mit dunkler Schrift (Editorial-Style).
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. Startseite Hero — IMMER dunkel, IMMER weißer Text ─── */

.hero,
[data-theme="dark"] .hero {
  background: #0B0B0C !important;
  color: #ffffff !important;
}
.hero::after,
[data-theme="dark"] .hero::after {
  background: linear-gradient(180deg, transparent, rgba(11,11,12,.6)) !important;
}
.hero h1,
[data-theme="dark"] .hero h1 {
  color: #ffffff !important;
}
.hero h1 em,
[data-theme="dark"] .hero h1 em {
  background: linear-gradient(90deg, #ffffff, #c4c4ca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-style: normal;
}
.hero > p,
.hero-sub,
[data-theme="dark"] .hero > p,
[data-theme="dark"] .hero-sub,
[data-theme="dark"] .hero p:not(.hero-badge) {
  color: rgba(255, 255, 255, 0.72) !important;
}
.hero-badge,
[data-theme="dark"] .hero-badge {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.hero-badge span,
[data-theme="dark"] .hero-badge span {
  color: rgba(255, 255, 255, 0.9) !important;
}
.hero-stats .hstat,
.hero-stats .hstat-num,
[data-theme="dark"] .hero-stats .hstat,
[data-theme="dark"] .hero-stats .hstat-num {
  color: #ffffff !important;
}
.hero-stats .hstat-label,
[data-theme="dark"] .hero-stats .hstat-label {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Hero CTA-Buttons: Primary = weißer Button, Ghost = transparent */
.hero .btn-primary,
[data-theme="dark"] .hero .btn-primary {
  background: #ffffff !important;
  color: #0B0B0C !important;
  border-color: #ffffff !important;
}
.hero .btn-primary:hover,
[data-theme="dark"] .hero .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0B0B0C !important;
}
.hero .btn-outline-white,
[data-theme="dark"] .hero .btn-outline-white {
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  background: transparent !important;
}
.hero .btn-outline-white:hover,
[data-theme="dark"] .hero .btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}


/* ─── 2. Branchen-Hero .brl-hero (immer dunkel) — Text-Highlights ─── */

.brl-hero h1 em {
  background: linear-gradient(90deg, #ffffff, #c4c4ca) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-style: normal;
}

/* Eyebrow: neutral hell auf dunkel */
.brl-eyebrow {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Primary-CTA im Branchen-Hero: weiß mit schwarzer Schrift */
.brl-hero-btn--primary {
  background: #ffffff !important;
  color: #0B0B0C !important;
  border: 1.5px solid #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.brl-hero-btn--primary:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0B0B0C !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}


/* ─── 3. Startseiten-Banner harmonisieren mit Branchen-Hero ───
   Die "Made in Germany" + "Bereit loszulegen" Sektionen sind
   im HTML mit alten Purple-Inline-Styles. Wir neutralisieren
   die Inline-Styles hier und lassen sie im Editorial-Look. */

/* Section-Tag "Made in Germany" (Legacy Purple-Inline) */
.section [style*="color:#b146f8"],
.section [style*="color: #b146f8"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Standort-Karten FRA-01/FRA-02/NBG-01: Purple-Text zu weißem */
.section [style*="-webkit-text-fill-color:transparent"],
.section [style*="-webkit-text-fill-color: transparent"] {
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* Kartenkästen mit lila Border */
.section [style*="background:rgba(177,70,248"],
.section [style*="background: rgba(177,70,248"],
.section [style*="border:1px solid rgba(177,70,248"],
.section [style*="border: 1px solid rgba(177,70,248"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.section [style*="background:rgba(92,203,249"],
.section [style*="background: rgba(92,203,249"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Button "Standorte ansehen" mit Purple-Gradient */
.section a.btn[style*="linear-gradient"][style*="#b146f8"],
.section a.btn[style*="linear-gradient"][style*="#5ccbf9"] {
  background: #ffffff !important;
  color: #0B0B0C !important;
  border: 1.5px solid #ffffff !important;
}
.section a.btn[style*="linear-gradient"][style*="#b146f8"]:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0B0B0C !important;
}


/* ─── 4. CTA-Section "Bereit loszulegen" — Editorial ─── */
.cta-section {
  background: #0B0B0C !important;
  padding: 5rem 1.5rem;
}
.cta-section h2 {
  color: #ffffff !important;
}
.cta-section p,
.cta-section .cta-sub {
  color: rgba(255, 255, 255, 0.7) !important;
}
.cta-section .btn-white,
.cta-section .btn-primary {
  background: #ffffff !important;
  color: #0B0B0C !important;
  border: 1.5px solid #ffffff !important;
}
.cta-section .btn-white:hover,
.cta-section .btn-primary:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0B0B0C !important;
}
.cta-section .btn-outline-white {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
}
.cta-section .btn-outline-white:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .cta-section {
    padding: 3rem 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════
 * v34 — aus patch-v34.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v34
   
   1. features-grid-v2: klares 3×2 Grid (Breite 3, Höhe 2)
   2. ov-grid: Legacy Purple/Bunt-Icons → neutrale Editorial-Farben
   3. Startseite: neue Klassen .mig-* für Made-in-Germany-Section
      (dezente Editorial-Karten, weiße Primary + Ghost-Buttons)
   4. Branchen: em-Highlight-Fix mit -webkit-text-fill-color
      (nur `color: transparent` reichte nicht, weil das Original
      -webkit-text-fill-color:transparent explizit setzt)
   5. Branchen-Button --primary: expliziter Fix mit
      -webkit-text-fill-color damit die schwarze Schrift greift
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. Features Grid 3×2 ─────────────────────────────────── */
.features-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.features-grid-v2 .fcard {
  background: var(--surface);
  border: 1.5px solid var(--border, #ececee);
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.features-grid-v2 .fcard:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 12px 28px rgba(11,11,12,.08);
}
[data-theme="dark"] .features-grid-v2 .fcard {
  background: #13131f;
  border-color: #2a2a3d;
}
[data-theme="dark"] .features-grid-v2 .fcard:hover {
  border-color: var(--ink);
}
.features-grid-v2 .fcard-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
}
.features-grid-v2 .fcard-icon svg {
  width: 22px;
  height: 22px;
}
.features-grid-v2 .fcard-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.features-grid-v2 .fcard-desc {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Icon-Farben: dezent, Editorial */
.features-grid-v2 .fcard-icon--yellow { background: rgba(251,191,36,.14); color: #b45309; }
.features-grid-v2 .fcard-icon--green  { background: rgba(34,197,94,.12);  color: #15803d; }
.features-grid-v2 .fcard-icon--blue   { background: rgba(59,130,246,.12); color: #1d4ed8; }
.features-grid-v2 .fcard-icon--red    { background: rgba(239,68,68,.12);  color: #b91c1c; }
.features-grid-v2 .fcard-icon--purple { background: rgba(11,11,12,.08);   color: #0B0B0C; }
.features-grid-v2 .fcard-icon--teal   { background: rgba(20,184,166,.12); color: #0f766e; }

[data-theme="dark"] .features-grid-v2 .fcard-icon--yellow { color: #fbbf24; }
[data-theme="dark"] .features-grid-v2 .fcard-icon--green  { color: #4ade80; }
[data-theme="dark"] .features-grid-v2 .fcard-icon--blue   { color: #60a5fa; }
[data-theme="dark"] .features-grid-v2 .fcard-icon--red    { color: #f87171; }
[data-theme="dark"] .features-grid-v2 .fcard-icon--purple { background: rgba(255,255,255,.06); color: #f5f5f7; }
[data-theme="dark"] .features-grid-v2 .fcard-icon--teal   { color: #2dd4bf; }

@media (max-width: 900px) {
  .features-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .features-grid-v2 { grid-template-columns: 1fr; }
}


/* ─── 2. ov-grid: Icons neutralisieren (Editorial statt bunte Legacy) ─── */
.ov-ico--purple { background: rgba(11,11,12,.08) !important; color: #0B0B0C !important; }
.ov-ico--blue   { background: rgba(11,11,12,.08) !important; color: #0B0B0C !important; }
.ov-ico--pink   { background: rgba(11,11,12,.08) !important; color: #0B0B0C !important; }
.ov-ico--teal   { background: rgba(11,11,12,.08) !important; color: #0B0B0C !important; }
.ov-ico--yellow { background: rgba(11,11,12,.08) !important; color: #0B0B0C !important; }
.ov-ico--green  { background: rgba(11,11,12,.08) !important; color: #0B0B0C !important; }

[data-theme="dark"] .ov-ico--purple,
[data-theme="dark"] .ov-ico--blue,
[data-theme="dark"] .ov-ico--pink,
[data-theme="dark"] .ov-ico--teal,
[data-theme="dark"] .ov-ico--yellow,
[data-theme="dark"] .ov-ico--green {
  background: rgba(255,255,255,.06) !important;
  color: #f5f5f7 !important;
}

/* ov-card Hover: neutral Ink border statt --brand (Purple) */
.ov-card:hover {
  border-color: var(--ink) !important;
}
.ov-price {
  color: var(--ink) !important;
}


/* ─── 3. Startseiten Made-in-Germany-Section: neue mig-* Klassen ─── */

.section--dark {
  background: var(--ink) !important;
  color: var(--surface) !important;
}
[data-theme="dark"] .section--dark {
  background: #0B0B0C !important;
}

.mig-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  padding: .32rem .95rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.mig-badge svg {
  flex-shrink: 0;
}

.mig-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
  transition: all .2s;
}
.mig-btn--primary {
  background: #ffffff;
  color: #0B0B0C;
  border: 1.5px solid #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.mig-btn--primary:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.mig-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.mig-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

.mig-loc-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.25rem;
  text-align: center;
}
.mig-loc-code {
  font-size: 1.6rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: .04em;
}
.mig-loc-name {
  font-size: .75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: .3rem;
}


/* ─── 4. Branchen-Hero em-Highlight — der finale Fix ─────────
   Original CSS setzt -webkit-text-fill-color:transparent EXPLIZIT.
   Meine v33 setzte nur color:transparent — reichte nicht,
   weil -webkit-text-fill-color spezifischer ist. */

.brl-hero h1 em {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-style: normal !important;
}

/* Falls Original einen text-shadow für Kontrast will */
.brl-hero h1 em {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}


/* ─── 5. Branchen-Hero-Buttons: explizit weißer Button mit dunkler Schrift ─── */

.brl-hero-btn--primary {
  background: #ffffff !important;
  background-image: none !important;
  color: #0B0B0C !important;
  -webkit-text-fill-color: #0B0B0C !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}
.brl-hero-btn--primary svg {
  color: #0B0B0C !important;
  stroke: #0B0B0C !important;
}
.brl-hero-btn--primary:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0B0B0C !important;
  -webkit-text-fill-color: #0B0B0C !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}


/* ─── 6. produkte-und-leistungen — pl-head H1 em Highlight ─── */
/* Ist Editorial-Highlight IM LIGHT-MODE dunkel-auf-hell: erscheint verkleinert.
   Wir kompensieren mit dickerer Font, damit auch das Gradient-em sichtbar bleibt. */
.pl-head h1 em,
.pl-cat-h em {
  font-weight: 900;
}

/* pl-nav-Icon-Farbe: neutralisieren */
.pl-nav a svg {
  color: var(--ink) !important;
}
[data-theme="dark"] .pl-nav a svg {
  color: var(--ink) !important;
}

/* pl-card Hover: Ink-Border, nicht Brand-Purple */
.pl-card:hover {
  border-color: var(--ink) !important;
}
[data-theme="dark"] .pl-card:hover {
  border-color: var(--ink) !important;
}
.pl-card-go {
  color: var(--ink) !important;
}
[data-theme="dark"] .pl-card-go {
  color: var(--ink) !important;
}
.pl-card-ico {
  background: rgba(11,11,12,.08) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .pl-card-ico {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink) !important;
}
.pl-bene-item svg {
  color: var(--ink) !important;
}

/* ═══════════════════════════════════════════════════════
 * v35 — aus patch-v35.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v35
   
   1. Login: Passwort-Auge-Icon INS Input integriert
   2. Footer: Text-Kontrast erhöht (rgba(.42) → .7), lesbar
   3. Rechenzentrum-Section → Footer: sanfter Übergang mit
      Divider und dunklerem Footer-Background
   4. Cart Empty-State: großzügig zentriert
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. LOGIN: Passwort-Feld mit integriertem Auge-Icon ─── */

.form-password-wrap {
  position: relative;
}
.form-password-wrap .form-input {
  padding-right: 3rem;
  width: 100%;
}
.form-password-wrap .toggle-pw {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: .35rem;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.form-password-wrap .toggle-pw:hover {
  color: var(--ink);
  background: rgba(11, 11, 12, 0.05);
}
[data-theme="dark"] .form-password-wrap .toggle-pw:hover {
  background: rgba(255, 255, 255, 0.05);
}
.form-password-wrap .toggle-pw svg {
  pointer-events: none;
}
.form-password-wrap .toggle-pw:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}


/* ─── 2. FOOTER: Kontrast erhöht, alle Texte gut lesbar ─── */

.footer {
  background: #050506 !important;         /* tiefer als var(--ink)=#0B0B0C — schafft Trennung */
  color: rgba(255, 255, 255, 0.78) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 4.5rem !important;
}
[data-theme="dark"] .footer {
  background: #050506 !important;
  border-top-color: rgba(255, 255, 255, 0.06);
}

.footer-brand > p,
.footer p {
  color: rgba(255, 255, 255, 0.72) !important;
}

.footer-col h4 {
  color: #ffffff !important;
  opacity: 1 !important;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.68) !important;
  transition: color .15s !important;
}
.footer-col a:hover {
  color: #ffffff !important;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6) !important;
}
.footer-links a:hover {
  color: #ffffff !important;
}

#footer-copyright,
.footer-bottom span {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Status-Row (System-Status Link) */
.footer-status-link {
  color: rgba(255, 255, 255, 0.62) !important;
}
.footer-status-link:hover {
  color: #ffffff !important;
}
.footer-status-row {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Social-Links */
.social-link {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: color .15s !important;
}
.social-link:hover {
  color: #ffffff !important;
}

/* Lang-Switcher im Footer */
.footer .lang-sw--footer button,
.footer #lang-switcher-footer button {
  color: rgba(255, 255, 255, 0.7) !important;
}


/* ─── 3. Sanfter Übergang von Rechenzentrum-Section zum Footer ─── */

/* Wenn eine dunkle Section direkt vor dem Footer kommt, soll ein
   sanfter Abstand mit Divider entstehen — kein nahtloses Verschmelzen */
.section--dark + .footer,
.section[style*="background:var(--ink)"] + .footer,
.section[style*="background:#0B0B0C"] + .footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

/* Falls Made-in-Germany Section direkt oben endet, subtile abschließende
   Linie einblenden */
.section--dark {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* ─── 4. Cart Empty-State: großzügig zentriert ─── */

.cart-page-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.03em;
}
#cart-empty:not([style*="display:none"]) ~ * {
  display: none;
}

.cart-empty-container {
  max-width: 480px;
  margin: 3rem auto 4rem;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--border, #ececee);
  border-radius: 20px;
}
[data-theme="dark"] .cart-empty-container {
  background: #13131f;
  border-color: #2a2a3d;
}
.cart-empty-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.06);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .cart-empty-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
.cart-empty-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: .5rem;
  color: var(--text);
}
.cart-empty-sub {
  font-size: .95rem;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}
.cart-empty-container .btn {
  min-width: 200px;
}


/* ─── 5. Editorial-Fallbacks für die 5 gepatchten Views ───
   (angebot / about / karriere / case-studies / datacenter-map)
   Falls dort noch pl-brand-color-Referenzen existieren */

.pl-nav a svg,
[data-theme="dark"] .pl-nav a svg { color: var(--ink) !important; }
.pl-card:hover,
[data-theme="dark"] .pl-card:hover { border-color: var(--ink) !important; }

/* Diverse "brand"-Farbreferenzen die Purple sein könnten */
.badge-purple,
.tag-brand,
.brand-highlight {
  background: rgba(11, 11, 12, 0.08) !important;
  color: var(--ink) !important;
  border-color: rgba(11, 11, 12, 0.2) !important;
}
[data-theme="dark"] .badge-purple,
[data-theme="dark"] .tag-brand,
[data-theme="dark"] .brand-highlight {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════
 * v37 — aus patch-v37.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v37
   
   1. FAQ-Accordion Fix: Button-Reset + doppeltes +/SVG-Symbol raus
   2. Service-Buttons "Projekt anfragen" mit inline linear-gradient:
      neutralisieren (falls v36-Regex nicht alle gefangen hat)
   3. Icon-Größen im services/index anpassen
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. FAQ-Accordion: Button-Reset ─────────────────────
   Der <button class="faq-q"> hat Browser-Default-Styles die
   das Layout brechen. Reset + SVG-Chevron als einziges Icon */

.faq-q {
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  font: inherit !important;
  text-align: left !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1.1rem 1.35rem !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  transition: background .12s !important;
}

/* CSS-generiertes `+` Symbol weg — SVG-Chevron ist schon im HTML */
.faq-q::after {
  display: none !important;
  content: none !important;
}

/* SVG-Chevron animation */
.faq-q svg {
  flex-shrink: 0;
  transition: transform .2s ease;
  color: var(--muted, #7A7A80);
}
.faq-item.open .faq-q svg {
  transform: rotate(180deg);
  color: var(--ink);
}

.faq-q:hover {
  background: var(--tile-bg, #F5F5F7) !important;
}
[data-theme="dark"] .faq-q:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.faq-a {
  color: var(--text-muted, #7A7A80) !important;
}


/* ─── 2. Service-CTAs mit Inline-Gradient: neutralisieren ───
   Manche Views haben noch inline style="background:linear-gradient(...)"
   auch nach v36-Purge. Wir überschreiben per Attribute-Selektor */

.svc-cta-btns a[style*="linear-gradient"],
.section a.btn[style*="linear-gradient(90deg,var(--ink)"],
.section a.btn[style*="linear-gradient(90deg,#"],
a.btn[style*="linear-gradient"][style*="var(--ink)"] {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--surface) !important;
  border: 1.5px solid var(--ink) !important;
}
.svc-cta-btns a[style*="linear-gradient"]:hover,
a.btn[style*="linear-gradient"]:hover {
  background: var(--ink-muted, #46464B) !important;
  color: var(--surface) !important;
}

/* svc-cta-wrap Layout: falls es ein dunkler Bereich sein sollte,
   sanfte Editorial-Anmutung */
.svc-cta-wrap {
  background: var(--ink) !important;
  color: var(--surface) !important;
  padding: 3rem 2rem !important;
  border-radius: 20px;
  text-align: center;
}
.svc-cta-wrap h2 {
  color: var(--surface) !important;
  margin-bottom: .75rem;
}
.svc-cta-wrap p {
  color: rgba(255, 255, 255, 0.72) !important;
  margin-bottom: 1.5rem;
}
.svc-cta-wrap .svc-cta-btns {
  display: inline-flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.svc-cta-wrap a.btn.btn-outline-white {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: var(--surface) !important;
  background: transparent !important;
}
.svc-cta-wrap a.btn.btn-outline-white:hover {
  border-color: var(--surface) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
/* Primary-CTA im svc-cta-wrap: weiß mit dunkler Schrift */
.svc-cta-wrap a.btn[style*="linear-gradient"],
.svc-cta-wrap a.btn.btn-primary {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--surface) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.svc-cta-wrap a.btn[style*="linear-gradient"]:hover,
.svc-cta-wrap a.btn.btn-primary:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--ink) !important;
}


/* ─── 3. Service-Icons: großer/kleiner Toggle für /services & /services/xyz ─── */
/* Wenn ein Container 48x48 hat aber SVG 36x36 rein passt schlecht */
.section a[style*="width:48px"] svg[width="36"] {
  width: 22px !important;
  height: 22px !important;
}


/* ─── 4. Common Pattern: dark hero sections
   in service-Views nutzen manchmal <section style="background:var(--ink)">
   mit weißem H1 — sichergehen dass Text weiß bleibt */

section[style*="background:var(--ink)"],
section[style*="background:#0B0B0C"] {
  color: var(--surface);
}
section[style*="background:var(--ink)"] h1,
section[style*="background:var(--ink)"] h2,
section[style*="background:var(--ink)"] h3,
section[style*="background:#0B0B0C"] h1,
section[style*="background:#0B0B0C"] h2,
section[style*="background:#0B0B0C"] h3 {
  color: var(--surface) !important;
}
section[style*="background:var(--ink)"] p,
section[style*="background:#0B0B0C"] p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ═══════════════════════════════════════════════════════
 * v38 — aus patch-v38.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v38
   
   1. FAQ-Accordion Fix (härter als v37, mit :where() Fallback)
   2. Service/Hosting-Buttons finale Editorial-Anpassung
   3. Icon-Klassen mit Rainbow-Farben neutralisieren
   4. Icon-Wrapper-Boxen einheitlich Editorial
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. FAQ-Accordion: absoluter Button-Reset ─────────── */

.faq-list button.faq-q,
.faq-item button.faq-q,
button.faq-q {
  all: unset !important;
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1.1rem 1.35rem !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  transition: background .12s !important;
}

/* CSS-`+` Pseudo-Element wegblenden — SVG-Chevron ist schon im HTML */
button.faq-q::after,
.faq-q::after {
  content: none !important;
  display: none !important;
}

/* SVG-Chevron: default nach unten, rotiert 180° bei open */
button.faq-q svg,
.faq-q svg {
  flex-shrink: 0;
  transition: transform .2s ease;
  color: var(--muted, #7A7A80);
}
.faq-item.open button.faq-q svg,
.faq-item.open .faq-q svg {
  transform: rotate(180deg);
  color: var(--ink);
}

button.faq-q:hover,
.faq-q:hover {
  background: var(--tile-bg, #F5F5F7) !important;
}
[data-theme="dark"] button.faq-q:hover,
[data-theme="dark"] .faq-q:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Antwort-Bereich sauber */
.faq-a {
  padding: 0 1.35rem !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height .3s ease, padding .3s ease !important;
  color: var(--text-muted, #7A7A80) !important;
}
.faq-item.open .faq-a {
  max-height: 500px !important;
  padding: 0 1.35rem 1.15rem !important;
}
.faq-a p {
  margin: 0 !important;
  line-height: 1.65;
  color: inherit !important;
}


/* ─── 2. Service/Hosting-CTAs mit linear-gradient: solide Editorial ─── */

/* Alle Buttons mit inline linear-gradient background → solid var(--ink) */
a.btn[style*="linear-gradient"],
button.btn[style*="linear-gradient"] {
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--surface) !important;
  border: 1.5px solid var(--ink) !important;
}
a.btn[style*="linear-gradient"]:hover,
button.btn[style*="linear-gradient"]:hover {
  background: var(--ink-muted, #46464B) !important;
  color: var(--surface) !important;
}

/* Ausnahme: Wenn Button in einer dunklen Section (.svc-cta-wrap, etc.),
   soll er WEISS mit dunkler Schrift sein */
.svc-cta-wrap a.btn[style*="linear-gradient"],
section[style*="background:var(--ink)"] a.btn[style*="linear-gradient"],
section[style*="background:#0B0B0C"] a.btn[style*="linear-gradient"] {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--surface) !important;
  -webkit-text-fill-color: var(--ink) !important;
}


/* ─── 3. Icon-Backgrounds mit Klassen-Selector neutralisieren ─── */

/* fcard-icon Varianten (in features-grid-v2 auf /) → schon in v34 gemacht
   Aber falls auf Service-Views ähnliche Klassen mit -yellow, -blue etc. sind: */

[class*="-icon--yellow"],
[class*="-icon--green"],
[class*="-icon--blue"],
[class*="-icon--red"],
[class*="-icon--teal"],
[class*="-icon--purple"],
[class*="-icon--pink"] {
  background: rgba(11, 11, 12, 0.08) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] [class*="-icon--yellow"],
[data-theme="dark"] [class*="-icon--green"],
[data-theme="dark"] [class*="-icon--blue"],
[data-theme="dark"] [class*="-icon--red"],
[data-theme="dark"] [class*="-icon--teal"],
[data-theme="dark"] [class*="-icon--purple"],
[data-theme="dark"] [class*="-icon--pink"] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}


/* ─── 4. Service-Feature-Cards Icons neutral ─────────── */
/* Kann sein dass Views ihre eigene sv-* oder svc-* Klassen haben */

[class*="svc-icon"],
[class*="svc-feat-icon"],
[class*="sv-icon"],
[class*="feat-icon"],
[class*="feature-icon"] {
  background: rgba(11, 11, 12, 0.08) !important;
  color: var(--ink) !important;
  border-radius: 12px;
}
[data-theme="dark"] [class*="svc-icon"],
[data-theme="dark"] [class*="svc-feat-icon"],
[data-theme="dark"] [class*="sv-icon"],
[data-theme="dark"] [class*="feat-icon"],
[data-theme="dark"] [class*="feature-icon"] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

/* Ausnahmen: Falls Icons in dunklen Sections stehen */
section[style*="background:var(--ink)"] [class*="-icon"],
section[style*="background:#0B0B0C"] [class*="-icon"],
.svc-cta-wrap [class*="-icon"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--surface) !important;
}


/* ─── 5. Success/Status-Icons behalten (Green Check) ─────── */
/* Green als Success behalten: #4ade80, #22c55e (falls nicht substituiert) */
svg[stroke="#4ade80"],
svg[color="#4ade80"] {
  color: #4ade80 !important;
  stroke: #4ade80 !important;
}

/* ═══════════════════════════════════════════════════════
 * v39 — aus patch-v39.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v39
   
   1. Success-Green globaler Cleanup:
      Der User will "keine Farben" in Service/Hosting-Views.
      Rest-Green in patch-v25/v26/v34/branchen.css wird
      auf Service/Hosting-Views neutralisiert.
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. Green-Success Icons in Service/Hosting-Views → Ink ───
   Nur in den Service/Hosting-Seiten neutralisieren, damit Admin
   und andere funktionale Bereiche das Grün behalten */

body.page-services svg[stroke="#4ade80"],
body.page-services svg[color="#4ade80"],
body.page-hosting svg[stroke="#4ade80"],
body.page-hosting svg[color="#4ade80"] {
  color: var(--ink) !important;
  stroke: var(--ink) !important;
}

/* Fallback: Direkte Selektoren auf Views die kein page-* Body-Class haben */
.svc-check svg,
.hosting-check svg,
[class*="check-icon"] svg,
[class*="feature-check"] svg {
  color: var(--ink) !important;
  stroke: currentColor !important;
}

/* Green Badge-Backgrounds in Service/Hosting → neutralisieren */
.svc-feature[style*="background:rgba(74,222,128"],
.hosting-feature[style*="background:rgba(74,222,128"] {
  background: rgba(11, 11, 12, 0.06) !important;
  color: var(--ink) !important;
  border-color: rgba(11, 11, 12, 0.14) !important;
}

/* ═══════════════════════════════════════════════════════
 * v42 — aus patch-v42.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v42
   
   1. Domain-Verfügbarkeit: .dr-body als flex-child mit flex:1
      damit der linke Bereich expandiert
   2. Domain-Result-Row: sauberer Padding, keine collapsen
   3. .status-badge Farben editorial
   ═══════════════════════════════════════════════════════════════ */

/* ─── Domain-Verfügbarkeits-Ergebnis: Layout-Fix ─── */

.domain-result-row {
  display: flex !important;
  align-items: center !important;
  gap: 1rem;
  padding: .95rem 1.15rem !important;
  background: var(--surface);
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  margin-bottom: .5rem;
  transition: border-color .12s;
}
.domain-result-row:hover {
  border-color: var(--line-strong, var(--ink));
}

/* Linker Container: nimmt verfügbaren Platz */
.domain-result-row > .dr-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

/* Fallback für alte Rendering ohne .dr-body */
.domain-result-row > div:not(.dr-right):not(.dr-body) {
  flex: 1 1 auto;
  min-width: 0;
}

.dr-name {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  flex: none !important;   /* NICHT auf dr-name direkt flex:1, weil dr-name im dr-body ist */
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.dr-status {
  font-size: .78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.dr-status.available,
.dr-status.ok {
  color: var(--ok-text, #166534);
}
.dr-status.taken,
.dr-status.no {
  color: var(--err-text, #991b1b);
}
.dr-status.unknown {
  color: var(--text-muted);
}
[data-theme="dark"] .dr-status.available,
[data-theme="dark"] .dr-status.ok { color: #4ade80; }
[data-theme="dark"] .dr-status.taken,
[data-theme="dark"] .dr-status.no { color: #f87171; }

/* Rechter Bereich: Preis + Button */
.dr-right {
  display: flex !important;
  align-items: center !important;
  gap: 1rem;
  flex-shrink: 0;
}
.dr-price {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}

/* Mobile: stapelbar */
@media (max-width: 600px) {
  .domain-result-row {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .dr-right {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid var(--line, var(--border));
    padding-top: .6rem;
    margin-top: .3rem;
  }
}


/* ─── Status-Badges (users.html) ─── */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .6rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge.status-aktiv,
.status-badge.status-active {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.status-badge.status-aktiv::before,
.status-badge.status-active::before {
  background: #22c55e;
}

.status-badge.status-inaktiv,
.status-badge.status-inactive,
.status-badge.status-banned {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.status-badge.status-inaktiv::before,
.status-badge.status-inactive::before,
.status-badge.status-banned::before {
  background: #ef4444;
}

[data-theme="dark"] .status-badge.status-aktiv,
[data-theme="dark"] .status-badge.status-active {
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.3);
}
[data-theme="dark"] .status-badge.status-inaktiv,
[data-theme="dark"] .status-badge.status-inactive {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

/* ═══════════════════════════════════════════════════════
 * v45 — aus patch-v45.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v45
   
   1. Cart-Item Remove-Button: X-Icon Größe explizit
   2. Darkmode: Megamenu-Panel dunkler Background
   3. Darkmode: Megamenu-Items korrekte Farben + Hover-States
   4. Darkmode: mega-promo Panel korrekt einfärben
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. Cart Remove-Icon kleiner ─── */

.cart-item-remove svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}


/* ─── 2. Darkmode: Megamenu-Panel ─── */

[data-theme="dark"] .mega-panel {
  background: #13131f;
  border-top-color: #2a2a3d;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.30);
}


/* ─── 3. Darkmode: Megamenu-Spalten-Divider ─── */

[data-theme="dark"] .mega-col {
  border-right-color: rgba(255,255,255,0.06);
}


/* ─── 4. Darkmode: Menu-Items ─── */

[data-theme="dark"] .mega-item {
  color: var(--text);
}

[data-theme="dark"] .mega-item:hover {
  background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .mega-item:hover .mi-title {
  color: #ffffff;
}

[data-theme="dark"] .mi-title {
  color: var(--text);
}

[data-theme="dark"] .mi-sub {
  color: var(--text-muted);
}


/* ─── 5. Darkmode: Icon-Boxen ─── */

[data-theme="dark"] .mega-icon {
  color: var(--text);
}


/* ─── 6. Darkmode: mega-heading (Kategorie-Titel) ─── */

[data-theme="dark"] .mega-heading {
  color: var(--text-muted);
}


/* ─── 7. Darkmode: "AKTUELLES ANGEBOT" Promo-Panel ─── */

[data-theme="dark"] .mega-promo {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: var(--text);
}

[data-theme="dark"] .mega-promo .promo-label {
  color: var(--text);
}

[data-theme="dark"] .mega-promo .promo-title {
  color: var(--text);
}

[data-theme="dark"] .mega-promo .promo-desc {
  color: var(--text-muted);
}

[data-theme="dark"] .mega-promo .promo-price {
  color: var(--text-muted);
}

[data-theme="dark"] .mega-promo .promo-price strong {
  color: var(--text);
}

[data-theme="dark"] .mega-promo .promo-cta {
  background: var(--text);
  color: #0B0B0C;
}

[data-theme="dark"] .mega-promo .promo-cta:hover {
  background: #ffffff;
}


/* ─── 8. Darkmode: Schnell-Links (quick-link) ─── */

[data-theme="dark"] .quick-link {
  color: var(--text-muted);
}

[data-theme="dark"] .quick-link:hover {
  color: var(--text);
}


/* ─── 9. Darkmode: view-all Link ─── */

[data-theme="dark"] .view-all {
  color: var(--text-muted);
}

[data-theme="dark"] .view-all:hover {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════
 * v46 — aus patch-v46.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v46
   
   Enthält v45-Regeln + neue v46-Fixes (safe measure falls
   patch-v45.css nicht in der Kette ist).
   
   NEU in v46:
   1. Cart-Summary: .summary-row + .summary-total flexbox
   2. VPS-Grid: fehlendes Grid-Layout
   3. About-Hero Text-Gradient: im Light-Mode sichtbar
   4. AGB Inhaltsverzeichnis: Link-Farbe neutralisiert
   
   Aus v45 (idempotent falls patch-v45.css doppelt geladen):
   5. Cart-Item Remove-Icon Größe
   6. Darkmode Megamenu-Overrides
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. Cart Summary: Rows flex + Abstand (NEU v46) ─── */

.cart-summary .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .35rem 0;
  font-size: .88rem;
  color: var(--text);
}

.cart-summary .summary-row span:first-child {
  color: var(--text-muted);
}

.cart-summary .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .75rem 0 .25rem;
  margin-top: .5rem;
  border-top: 1px solid var(--line, var(--border));
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}


/* ─── 2. VPS-Grid (NEU v46) ─── */

.vps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  align-items: stretch;
}


/* ─── 3. About-Hero Text-Gradient (NEU v46) ─── */
/* .ab-hero background ist IMMER #0B0B0C — Text-Gradient
   mit var(--ink) wurde im Light-Mode schwarz auf schwarz.
   Override auf hell → funktioniert in beiden Themes. */

.ab-hero h1 span {
  background: linear-gradient(90deg, #ffffff, #c4c4c8) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ─── 4. AGB Inhaltsverzeichnis: Link-Farbe neutralisiert (NEU v46) ─── */

.acc-section a[href^="#agb-"],
.acc-section a[href^="#imp-"],
.acc-section a[href^="#dp-"],
.acc-section a[href^="#wr-"],
.acc-section a[href^="#cook"] {
  color: var(--text) !important;
  padding: .35rem .55rem;
  border-radius: 6px;
  transition: background .12s, color .12s;
}

.acc-section a[href^="#agb-"]:hover,
.acc-section a[href^="#imp-"]:hover,
.acc-section a[href^="#dp-"]:hover,
.acc-section a[href^="#wr-"]:hover,
.acc-section a[href^="#cook"]:hover {
  background: rgba(11,11,12,0.06);
  color: var(--ink) !important;
}

[data-theme="dark"] .acc-section a[href^="#agb-"]:hover,
[data-theme="dark"] .acc-section a[href^="#imp-"]:hover,
[data-theme="dark"] .acc-section a[href^="#dp-"]:hover,
[data-theme="dark"] .acc-section a[href^="#wr-"]:hover,
[data-theme="dark"] .acc-section a[href^="#cook"]:hover {
  background: rgba(255,255,255,0.06);
}


/* ═══════════════════════════════════════════════════════════════
   v45-Regeln (safe measure — idempotent falls patch-v45.css
   in der Kette ist, sonst wichtig damit die Fixes greifen)
   ═══════════════════════════════════════════════════════════════ */


/* ─── 5. Cart Remove-Icon kleiner (aus v45) ─── */

.cart-item-remove svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}


/* ─── 6. Darkmode: Megamenu-Panel & Items (aus v45) ─── */

[data-theme="dark"] .mega-panel {
  background: #13131f;
  border-top-color: #2a2a3d;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.30);
}

[data-theme="dark"] .mega-col {
  border-right-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .mega-item {
  color: var(--text);
}

[data-theme="dark"] .mega-item:hover {
  background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .mega-item:hover .mi-title {
  color: #ffffff;
}

[data-theme="dark"] .mi-title { color: var(--text); }
[data-theme="dark"] .mi-sub   { color: var(--text-muted); }
[data-theme="dark"] .mega-icon { color: var(--text); }
[data-theme="dark"] .mega-heading { color: var(--text-muted); }


/* ─── 7. Darkmode: "AKTUELLES ANGEBOT" Promo-Panel (aus v45) ─── */

[data-theme="dark"] .mega-promo {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: var(--text);
}

[data-theme="dark"] .mega-promo .promo-label,
[data-theme="dark"] .mega-promo .promo-title {
  color: var(--text);
}

[data-theme="dark"] .mega-promo .promo-desc,
[data-theme="dark"] .mega-promo .promo-price {
  color: var(--text-muted);
}

[data-theme="dark"] .mega-promo .promo-price strong {
  color: var(--text);
}

[data-theme="dark"] .mega-promo .promo-cta {
  background: var(--text);
  color: #0B0B0C;
}

[data-theme="dark"] .mega-promo .promo-cta:hover {
  background: #ffffff;
}

[data-theme="dark"] .quick-link,
[data-theme="dark"] .view-all {
  color: var(--text-muted);
}

[data-theme="dark"] .quick-link:hover,
[data-theme="dark"] .view-all:hover {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════
 * v47 — aus patch-v47.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — Patch v47

   About-Hero span: statt Gradient nur weiß.
   Der v46-Gradient (#fff → #c4c4c8) ließ "Technologie Services"
   dunkler wirken als "Wärner". Jetzt einheitlich weiß.
   ═══════════════════════════════════════════════════════════════ */

.ab-hero h1 span {
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
 * v50 — aus patch-v50.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — v50
   Status-Unbekannt Overlay (Fehlerseite bei nicht abrufbarem Status)
   ═══════════════════════════════════════════════════════════════ */

.seo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(11, 11, 12, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: seo-fadein 0.25s ease-out;
  overflow-y: auto;
}

@keyframes seo-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.seo-panel {
  background: var(--surface, #ffffff);
  color: var(--text, #0B0B0C);
  border-radius: 18px;
  max-width: 540px;
  width: 100%;
  padding: 2.25rem 2rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  animation: seo-slideup 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .seo-panel {
  background: #1a1a20;
  border-color: rgba(255, 255, 255, 0.08);
}

@keyframes seo-slideup {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.seo-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.14);
  color: #ea580c;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .seo-icon {
  background: rgba(234, 179, 8, 0.10);
  color: #fbbf24;
}

.seo-title {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  line-height: 1.25;
  color: var(--text, #0B0B0C);
}

[data-theme="dark"] .seo-title { color: #ffffff; }

.seo-lead {
  font-size: 0.92rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

.seo-info {
  padding: 0.85rem 1rem;
  background: rgba(11, 11, 12, 0.04);
  border-radius: 10px;
  font-size: 0.87rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: var(--text, #0B0B0C);
  border-left: 3px solid #22c55e;
  text-align: left;
}

[data-theme="dark"] .seo-info {
  background: rgba(255, 255, 255, 0.05);
  color: #F5F5F7;
}

.seo-info strong {
  color: #16a34a;
  font-weight: 800;
}

[data-theme="dark"] .seo-info strong { color: #4ade80; }

.seo-hotline {
  padding: 1rem 1.25rem;
  background: rgba(11, 11, 12, 0.06);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  border: 1.5px solid var(--border, rgba(0,0,0,0.08));
}

[data-theme="dark"] .seo-hotline {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.seo-hotline-label {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.seo-hotline-num {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text, #0B0B0C);
  text-decoration: none;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  letter-spacing: -0.02em;
  transition: color 0.15s;
}

[data-theme="dark"] .seo-hotline-num { color: #ffffff; }
.seo-hotline-num:hover { color: #22c55e; }

.seo-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.seo-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.2rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
}

.seo-btn-primary {
  background: var(--ink, #0B0B0C);
  color: var(--paper, #ffffff);
}
.seo-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

[data-theme="dark"] .seo-btn-primary {
  background: #F5F5F7;
  color: #0B0B0C;
}

.seo-btn-secondary {
  background: transparent;
  color: var(--text, #0B0B0C);
  border-color: var(--border, rgba(0,0,0,0.15));
}
.seo-btn-secondary:hover { border-color: var(--ink, #0B0B0C); }

[data-theme="dark"] .seo-btn-secondary {
  color: #F5F5F7;
  border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .seo-btn-secondary:hover { border-color: #F5F5F7; }

@media (max-width: 480px) {
  .seo-panel { padding: 1.75rem 1.25rem; }
  .seo-title { font-size: 1.15rem; }
  .seo-hotline-num { font-size: 1.25rem; }
  .seo-actions { flex-direction: column; }
  .seo-btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════
 * v51 — aus patch-v51.css
 * ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   WTS Portal — v51
   Checkout-Konfiguration: Nameserver + Handles + VPS-Konfig
   ═══════════════════════════════════════════════════════════════ */

.cfg-section {
  margin-bottom: 1.5rem;
}

.cfg-item {
  border: 1.5px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--surface, #fff);
}

.cfg-item-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.cfg-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(11, 11, 12, 0.06);
  color: var(--ink, #0B0B0C);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .cfg-item-icon { background: rgba(255,255,255,0.06); color: #F5F5F7; }

.cfg-item-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text, #0B0B0C);
}
.cfg-item-type {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
  margin-top: 0.15rem;
}

.cfg-block {
  padding: 0.85rem 0;
  border-top: 1px dashed var(--border, rgba(0,0,0,0.08));
}
.cfg-block:first-of-type { border-top: none; padding-top: 0; }

.cfg-block-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.5rem;
}

.cfg-block-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.75rem;
  line-height: 1.45;
}
.cfg-block-hint code {
  background: rgba(11,11,12,0.06);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: ui-monospace, monospace;
}
[data-theme="dark"] .cfg-block-hint code { background: rgba(255,255,255,0.08); }

.cfg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}
.cfg-row:has(.cfg-f:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.cfg-row:has(.cfg-f:nth-child(4)),
.cfg-row:has(.cfg-f:nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 640px) { .cfg-row { grid-template-columns: 1fr !important; } }

.cfg-f {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cfg-f-wide { grid-column: 1 / -1; }

.cfg-f label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b7280);
  font-weight: 700;
}

.cfg-f input,
.cfg-f select,
.cfg-f textarea {
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border, rgba(0,0,0,0.15));
  border-radius: 9px;
  font-size: 0.88rem;
  background: var(--surface, #fff);
  color: var(--text, #0B0B0C);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.cfg-f input:focus,
.cfg-f select:focus,
.cfg-f textarea:focus {
  border-color: var(--ink, #0B0B0C);
}

.cfg-f textarea {
  resize: vertical;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  font-size: 0.82rem;
  line-height: 1.4;
}

.cfg-f-hint {
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
  margin-top: 0.15rem;
}

/* Passwort mit Generieren-Button */
.cfg-pw-wrap {
  display: flex;
  gap: 0.4rem;
}
.cfg-pw-wrap input { flex: 1; }
.cfg-pw-gen {
  padding: 0 0.9rem;
  border: 1.5px solid var(--border, rgba(0,0,0,0.15));
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--text, #0B0B0C);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.cfg-pw-gen:hover { border-color: var(--ink, #0B0B0C); }

/* Handle-Block */
.cfg-handle-block {
  border: 1.5px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 10px;
  margin-bottom: 0.85rem;
  overflow: hidden;
  background: rgba(11,11,12,0.02);
}
[data-theme="dark"] .cfg-handle-block { background: rgba(255,255,255,0.02); }

.cfg-handle-head {
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(11,11,12,0.04);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
[data-theme="dark"] .cfg-handle-head { background: rgba(255,255,255,0.04); }

.cfg-handle-name {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text, #0B0B0C);
}

.cfg-select-src {
  margin-left: auto;
  padding: 0.35rem 0.55rem;
  border: 1.5px solid var(--border, rgba(0,0,0,0.15));
  border-radius: 7px;
  font-size: 0.78rem;
  background: var(--surface, #fff);
  color: var(--text, #0B0B0C);
  font-family: inherit;
}

.cfg-handle-body {
  padding: 0.85rem;
}

.cfg-toggle {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.cfg-toggle label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.83rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text, #0B0B0C);
  text-transform: none;
  letter-spacing: 0;
}

.cfg-copy-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.55rem 0;
  color: var(--text, #0B0B0C);
}

.cfg-copies {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border, rgba(0,0,0,0.08));
}

/* ═══════════════════════════════════════════════════════
 * v55 — Modal-Design neutralisiert (Grün-Anteile raus)
 * ═══════════════════════════════════════════════════════ */

/* Modal-Info-Kasten: Grün → neutraler Ink-Border */
.seo-info {
  border-left-color: var(--ink, #0B0B0C) !important;
}
[data-theme="dark"] .seo-info {
  border-left-color: var(--ink, #F5F5F7) !important;
}

.seo-info strong {
  color: var(--ink, #0B0B0C) !important;
}
[data-theme="dark"] .seo-info strong {
  color: var(--ink, #F5F5F7) !important;
}

/* Hotline-Hover: Grün → Ink */
.seo-hotline-num:hover {
  color: var(--ink, #0B0B0C) !important;
  opacity: 0.7;
}
[data-theme="dark"] .seo-hotline-num:hover {
  color: var(--ink, #F5F5F7) !important;
  opacity: 0.75;
}

/* Icon: Warngelb bleibt (semantisch klar), aber neutraler ton */
.seo-icon {
  background: rgba(11, 11, 12, 0.06) !important;
  color: var(--ink, #0B0B0C) !important;
}
[data-theme="dark"] .seo-icon {
  background: rgba(245, 245, 247, 0.08) !important;
  color: var(--ink, #F5F5F7) !important;
}