/* =====================================================================
   einfachhochzeit — finaler Tool-Design-Pass
   Wird am Ende der Tool-Seiten geladen, damit eingebettete Modulstyles
   zuverlässig auf das Website-Design gemappt werden.
   ===================================================================== */

[id^="eh-"] {
  --cream: var(--bg) !important;
  --white: var(--surface) !important;
  /* Wie in tools.css (16.10.2026): etwas dunkler als --accent, sonst
     4,0-4,4 zu 1 Kontrast fuer kleine Schrift und weisse Schrift darauf. */
  --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;
  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 {
  color: var(--ink-soft) !important;
}

[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;
}

#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;
}

#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 .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;
}

[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-"] 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;
}

#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-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 .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;
}

[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;
  }
}

/* Budgetrechner: Info-Popover darf nicht von der Item-Zeile verdeckt werden. */
#eh-budget .section,
#eh-budget .section-body,
#eh-budget .item-list,
#eh-budget .item,
#eh-budget .item-row,
#eh-budget .item-input-wrap {
  overflow: visible !important;
}

#eh-budget .item:has(.item-info-btn.open) {
  z-index: 60 !important;
}

#eh-budget .item-info-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
}

#eh-budget .item-info-btn.open {
  z-index: 70 !important;
}

#eh-budget .item-info-btn.open,
#eh-budget .item-info-btn:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-deep) !important;
}

#eh-budget .item-info-pop {
  top: calc(100% + 10px) !important;
  right: -8px !important;
  width: min(280px, calc(100vw - 48px)) !important;
  max-width: min(280px, calc(100vw - 48px)) !important;
  padding: 12px 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px rgba(34, 33, 29, .18) !important;
  color: var(--ink-soft) !important;
  font-family: var(--sans) !important;
  font-size: .78rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
  white-space: normal !important;
  z-index: 999 !important;
}

#eh-budget .item-info-pop::after {
  right: 16px !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

#eh-budget .item-info-pop .pop-range {
  color: var(--muted) !important;
  font-size: .72rem !important;
}

#eh-budget .item-info-pop .pop-tip {
  color: var(--ink-soft) !important;
  font-size: .76rem !important;
}

@media (max-width: 600px) {
  #eh-budget .item-info-pop {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #eh-budget .item-info-pop::after {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }
}