/* =====================================================================
   einfachhochzeit — Tools-Layer
   Neutralisiert Global-Utility-Leaks in den eingebetteten Tools
   (Ursache der Überlappungen) und poliert Übergänge zum neuen Design.
   Die Tools bringen ihr eigenes (umgefärbtes) CSS mit; hier nur Fixes.
   ===================================================================== */

/* --- Sicherheitsnetz: alter eingebetteter Hero/Meta ausgeblendet --- */
[id^="eh-"] .eh-header,
[id^="eh-"] .score-hinweis,
[id^="eh-"] .header-eyebrow { display: none !important; }

/* --- Scroll-Fade der Tools deaktivieren (fragil im eingebetteten Kontext,
       ließ Sektionen unsichtbar/leer erscheinen) --- */
[id^="eh-"] .section { opacity: 1 !important; transform: none !important; }

/* --- Global-Utility-Leaks neutralisieren --- */
/* Globales .wrap { width:min(...) } würde Tool-Breite beschneiden */
[id^="eh-"] .wrap { width: auto; max-width: 1100px; }

/* Globales .section { padding-block: clamp(56px..112px) } leckt in Budget-
   Sektionen (die kein eigenes padding-block setzen) -> große Lücken */
#eh-budget .section { padding-block: 0; }

/* Globales .stack > * + * { margin-top } zerschießt das Drag-Spielfeld */
#eh-gaestespiel .stack > * + * { margin-top: 0; }

/* Globales .card { height:100%; :hover translateY } stört die Spielkarten */
#eh-gaestespiel .card { height: auto; }
#eh-gaestespiel .card:hover { transform: none; box-shadow: none; }

/* --- Einheitlicher Abstand am Tool-Anfang (Hero wurde entfernt) --- */
[id^="eh-"] { scroll-margin-top: 90px; }

/* =====================================================================
   Design-Adapter: Tools optisch an das Website-Design angleichen
   ===================================================================== */

[id^="eh-"] {
  --cream: var(--bg) !important;
  --white: var(--surface) !important;
  /* Etwas dunkler als --accent (16.10.2026): Die Tools setzen --gold als
     kleine Schrift auf Weiss und als Flaeche unter weisser Schrift ein -
     mit #6f7d5c beides nur 4,0-4,4 zu 1. #5f6c4c erreicht 4,8-5,6. */
  --gold: #5f6c4c !important;
  --gold-lt: var(--accent-soft) !important;
  --gold-dk: var(--accent-deep) !important;
  --gold-pale: color-mix(in srgb, var(--accent) 11%, transparent) !important;
  --dark: var(--ink) !important;
  --mid: var(--ink-soft) !important;
  --light: var(--muted) !important;
  --border: var(--line) !important;
  --amber: var(--warm) !important;
  --amber-lt: color-mix(in srgb, var(--warm) 12%, white) !important;
  --blue: #58738d !important;
  --blue-lt: #eef3f6 !important;
  --red: #a84f45 !important;
  --red-lt: #fbf1ef !important;
  --green: var(--accent-deep) !important;
  --green-lt: var(--accent-soft) !important;
  --radius-sm: 10px !important;
  --radius-md: var(--radius) !important;
  --radius-lg: var(--radius-lg) !important;
  --shadow-sm: var(--shadow-sm) !important;
  --shadow-md: var(--shadow) !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: .95rem !important;
  line-height: 1.65 !important;
}

[id^="eh-"] h2,
[id^="eh-"] h3,
[id^="eh-"] .panel-title,
[id^="eh-"] .card-title,
[id^="eh-"] .section-title h2,
[id^="eh-"] .eh-ct,
[id^="eh-"] .eh-modal-title,
[id^="eh-"] .eh-crosslink-title,
[id^="eh-"] .crosslink-title,
[id^="eh-"] .res-titel,
[id^="eh-"] .ue-titel,
[id^="eh-"] .result-zahl,
[id^="eh-"] .budget-value,
[id^="eh-"] .k-name,
[id^="eh-"] .kat-name,
[id^="eh-"] .eh-tv-name,
[id^="eh-"] .eh-tsc-name {
  font-family: var(--serif) !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}

[id^="eh-"] p,
[id^="eh-"] .panel-sub,
[id^="eh-"] .crosslink-desc,
[id^="eh-"] .eh-crosslink-desc,
[id^="eh-"] .task-text,
[id^="eh-"] .item-tip,
[id^="eh-"] .kat-sub,
[id^="eh-"] .h-text,
[id^="eh-"] .res-sub,
[id^="eh-"] .header-sub {
  color: var(--ink-soft) !important;
}

/* Tool-Flächen und Karten */
[id^="eh-"] .card,
#eh-budget .section,
#eh-budget .summary-card,
#eh-budget .section-footer,
#eh-budget .summary-total-box,
#eh-budget .summary-item,
#eh-budget .item,
#eh-checklist .local-badge,
#eh-checklist .local-badge-side,
#eh-checklist .check-section,
#eh-checklist .top3-card,
#eh-checklist .prod-card,
#eh-checklist .section-footer,
#eh-gaesteplaner .budget-card,
#eh-gaesteplaner .kat-karte,
#eh-gaesteplaner .result-kachel,
#eh-gaesteplaner .result-liste,
#eh-gaesteplaner .empfehlung-box,
#eh-gaesteplaner .crosslink-card,
#eh-sitzplan .eh-card,
#eh-sitzplan .eh-tsc,
#eh-sitzplan .eh-tv,
#eh-sitzplan .eh-pool,
#eh-sitzplan .eh-crosslink-card,
#eh-gaestespiel .match-wrap,
#eh-gaestespiel .stat,
#eh-gaestespiel .sek,
#eh-gaestespiel .hinweis-box,
#eh-gaestespiel .crosslink-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

#eh-budget .section:hover,
#eh-checklist .check-section:hover,
#eh-gaesteplaner .kat-karte:hover,
#eh-gaesteplaner .crosslink-card:hover,
#eh-sitzplan .eh-crosslink-card:hover,
#eh-gaestespiel .crosslink-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow) !important;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line)) !important;
}

/* Interne dunkle Tool-Navigationen auf Website-Look bringen */
#eh-gaesteplaner .progress-bar-wrap,
#eh-sitzplan .eh-pnav-wrapper,
#eh-sitzplan .eh-pnav {
  background: transparent !important;
}

#eh-gaesteplaner .steps-row,
#eh-sitzplan .eh-pnav {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 8px 10px !important;
}

#eh-gaesteplaner .step-dot,
#eh-sitzplan .eh-pd {
  background: var(--bg) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

#eh-gaesteplaner .step-label,
#eh-sitzplan .eh-pl {
  color: var(--muted) !important;
  font-weight: 600 !important;
}

#eh-gaesteplaner .step-item.active .step-dot,
#eh-gaesteplaner .step-item.done .step-dot,
#eh-sitzplan .eh-pi.active .eh-pd,
#eh-sitzplan .eh-pi.done .eh-pd {
  background: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#eh-gaesteplaner .step-item.active .step-label,
#eh-gaesteplaner .step-item.done .step-label,
#eh-sitzplan .eh-pi.active .eh-pl,
#eh-sitzplan .eh-pi.done .eh-pl {
  color: var(--accent-deep) !important;
}

#eh-gaesteplaner .step-item:not(:last-child)::after,
#eh-sitzplan .eh-pi:not(:last-child)::after {
  background: var(--line) !important;
}

#eh-gaesteplaner .step-item.done:not(:last-child)::after,
#eh-sitzplan .eh-pi.done:not(:last-child)::after {
  background: var(--accent) !important;
}

/* Sticky-Leisten unter dem globalen Header statt darüber */
#eh-budget .ctrl-bar,
#eh-checklist .ctrl-bar,
#eh-gaesteplaner .summary-bar,
#eh-sitzplan .eh-pool-sticky {
  top: 70px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: saturate(180%) blur(12px);
}

#eh-budget .ctrl-bar,
#eh-checklist .ctrl-bar {
  margin-bottom: 18px !important;
}

#eh-budget .budget-bar-wrap {
  background: transparent !important;
  border-bottom: 0 !important;
}

#eh-budget .budget-bar-inner {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  box-shadow: var(--shadow-sm) !important;
}

#eh-budget .budget-bar-fill,
#eh-checklist .progress-fill,
#eh-gaesteplaner input[type="range"]::-webkit-slider-thumb {
  background: var(--accent-deep) !important;
}

/* Buttons und Eingaben */
[id^="eh-"] button,
[id^="eh-"] .btn,
[id^="eh-"] .btn-ctrl,
[id^="eh-"] .btn-preset,
[id^="eh-"] .sf-cta,
[id^="eh-"] .badge-cta,
[id^="eh-"] .action-link,
[id^="eh-"] .cta-link,
[id^="eh-"] .eh-btn-p,
[id^="eh-"] .eh-btn-g,
[id^="eh-"] .eh-btn-o,
[id^="eh-"] .eh-auto-btn,
[id^="eh-"] .start-btn,
[id^="eh-"] .add-btn,
[id^="eh-"] .nochmal-btn,
[id^="eh-"] .ue-btn,
[id^="eh-"] .eh-add-btn,
[id^="eh-"] .eh-qa-tisch-btn {
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  min-height: 42px;
}

[id^="eh-"] .btn-primary,
[id^="eh-"] .btn-gold,
[id^="eh-"] .btn-preset.active,
[id^="eh-"] .sf-cta,
[id^="eh-"] .badge-cta,
[id^="eh-"] .eh-btn-p,
[id^="eh-"] .eh-btn-g,
[id^="eh-"] .start-btn,
[id^="eh-"] .nochmal-btn,
[id^="eh-"] .ue-btn {
  background: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
  color: #fff !important;
}

[id^="eh-"] .btn-secondary,
[id^="eh-"] .btn-reset,
[id^="eh-"] .btn-ctrl,
[id^="eh-"] .btn-preset,
[id^="eh-"] .eh-btn-o,
[id^="eh-"] .add-btn,
[id^="eh-"] .eh-add-btn,
[id^="eh-"] .action-link,
[id^="eh-"] .cta-link {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}

[id^="eh-"] button:hover,
[id^="eh-"] .btn:hover,
[id^="eh-"] .sf-cta:hover,
[id^="eh-"] .badge-cta:hover,
[id^="eh-"] .action-link:hover,
[id^="eh-"] .cta-link:hover {
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

[id^="eh-"] input,
[id^="eh-"] select,
[id^="eh-"] textarea,
#eh-budget .ctrl-budget-input,
#eh-budget .guest-row-input,
#eh-budget .item-input,
#eh-gaesteplaner .form-input,
#eh-sitzplan .eh-inp,
#eh-gaestespiel .inp {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  box-shadow: none !important;
}

[id^="eh-"] input:focus,
[id^="eh-"] select:focus,
[id^="eh-"] textarea:focus {
  border-color: var(--accent) !important;
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
  outline-offset: 1px;
}

/* Tool-spezifische optische Beruhigung */
#eh-checklist .tool-layout {
  gap: clamp(18px, 3vw, 30px) !important;
}

#eh-checklist .nav-sidebar {
  top: 92px !important;
}

#eh-checklist .task {
  border-radius: 12px !important;
}

#eh-checklist .task:hover {
  background: var(--bg) !important;
}

#eh-budget .ctrl-inner,
#eh-checklist .ctrl-inner {
  gap: 12px !important;
}

#eh-budget .ctrl-stat,
#eh-budget .guest-row,
#eh-checklist .js-pct-text,
#eh-checklist .next5-hint,
#eh-sitzplan .eh-sc,
#eh-gaesteplaner .summary-chip {
  color: var(--ink-soft) !important;
}

#eh-budget .ctrl-stat-remaining.negative,
#eh-budget .stb-val.negative,
#eh-sitzplan .eh-sc.eh-warn {
  color: var(--red) !important;
  background: var(--red-lt) !important;
  border-color: color-mix(in srgb, var(--red) 28%, var(--line)) !important;
}

#eh-budget .ctrl-stat-remaining.positive,
#eh-budget .stb-val.positive,
#eh-sitzplan .eh-sc.eh-ok {
  color: var(--accent-deep) !important;
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line)) !important;
}

#eh-gaesteplaner .result-hero,
#eh-gaestespiel .uebergabe-box,
#eh-gaestespiel .spieler-pill {
  background: var(--accent-soft) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

#eh-gaesteplaner .result-hero::before,
#eh-gaestespiel .uebergabe-box::before {
  display: none !important;
}

#eh-gaesteplaner .result-hero-label,
#eh-gaesteplaner .result-zahl,
#eh-gaesteplaner .result-zahl-sub,
#eh-gaestespiel .ue-titel,
#eh-gaestespiel .ue-sub,
#eh-gaestespiel .spieler-pill {
  color: var(--ink) !important;
}

#eh-gaesteplaner .toggle-btn,
#eh-gaesteplaner .extra-item,
#eh-sitzplan .eh-pchip,
#eh-sitzplan .eh-rc,
#eh-gaestespiel .kat-chip {
  border-radius: 999px !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

#eh-gaesteplaner .toggle-btn.active,
#eh-gaesteplaner .extra-item.active,
#eh-sitzplan .eh-pchip.eh-selected {
  background: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
  color: #fff !important;
}

#eh-sitzplan .eh-hint,
#eh-sitzplan .eh-kp,
#eh-gaestespiel .hint-box,
#eh-gaestespiel .disk-body,
#eh-gaestespiel .disk-trigger,
#eh-gaestespiel .match-wrap,
#eh-gaestespiel .hinweis-box.gold {
  background: var(--bg) !important;
  border-color: var(--line) !important;
}

#eh-sitzplan .eh-table-body {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), var(--shadow-sm) !important;
}

#eh-sitzplan .eh-seat-inner {
  background: rgba(255,255,255,.94) !important;
  border-color: var(--line) !important;
  border-radius: 12px !important;
}

#eh-gaestespiel .karte,
#eh-gaestespiel .ghost {
  border-radius: var(--radius-lg) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

/* Crosslinks sollen wie Website-Karten wirken, nicht wie Werbebanner */
[id^="eh-"] .crosslink-section,
[id^="eh-"] .eh-crosslink-section {
  border-top: 0 !important;
}

[id^="eh-"] .crosslink-card.crosslink-cta,
[id^="eh-"] .eh-crosslink-card.eh-crosslink-cta {
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
}

@media (max-width: 860px) {
  #eh-budget .ctrl-bar,
  #eh-checklist .ctrl-bar,
  #eh-gaesteplaner .summary-bar,
  #eh-sitzplan .eh-pool-sticky {
    top: 70px !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  #eh-gaesteplaner .steps-row,
  #eh-sitzplan .eh-pnav {
    border-radius: var(--radius) !important;
  }
}