/* ============================================================================
   DS → Bootstrap Bridge
   Spielt Design-System-Tokens auf Bootstrap-CSS-Variablen UND auf die
   SCSS-kompilierten Komponenten-Variablen aus (.btn-primary, .bg-primary, …).
   Lädt NACH den DS-Tokens UND NACH template/main.css.

   Spezifität-Hinweis: template/main.css setzt :root, [data-bs-theme="light"]
   gleichzeitig. Wir matchen denselben Selektor, damit unsere Werte gewinnen.
   ============================================================================ */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* — Body, Surfaces, Text — */
  --bs-body-bg:        var(--ds-bg);
  --bs-body-color:     var(--ds-text);
  --bs-emphasis-color: var(--ds-text);
  --bs-secondary-color: var(--ds-text-muted);
  --bs-tertiary-color: var(--ds-text-subtle);
  --bs-tertiary-bg:    var(--ds-surface-sunken);
  --bs-secondary-bg:   var(--ds-surface-sunken);

  /* — Brand-Theme-Farben — */
  --bs-primary:        var(--ds-primary);
  --bs-primary-rgb:    46, 107, 79; /* Tann default; per Theme überschrieben */
  --bs-secondary:      var(--ds-secondary);
  --bs-secondary-rgb:  90, 107, 98;
  --bs-success:        var(--ds-success);
  --bs-info:           var(--ds-info);
  --bs-warning:        var(--ds-warning);
  --bs-danger:         var(--ds-danger);

  /* — Borders — */
  --bs-border-color:   var(--ds-border);
  --bs-border-color-translucent: color-mix(in srgb, var(--ds-border) 80%, transparent);

  /* — Links — */
  --bs-link-color:           var(--ds-link);
  --bs-link-hover-color:     var(--ds-link-hover);
  --bs-link-color-rgb:       46, 107, 79;
  --bs-link-hover-color-rgb: 40, 94, 69;

  /* — Typografie & Focus — */
  --bs-body-font-family: var(--ds-font-sans);
  --bs-body-font-size:   var(--ds-text-base);
  --bs-body-line-height: var(--ds-leading-base);
  --bs-focus-ring-color: color-mix(in srgb, var(--ds-primary) 28%, transparent);

  /* — Radius — */
  --bs-border-radius:      var(--ds-radius);
  --bs-border-radius-sm:   var(--ds-radius-sm);
  --bs-border-radius-lg:   var(--ds-radius-lg);
  --bs-border-radius-xl:   var(--ds-radius-xl);
  --bs-border-radius-pill: var(--ds-radius-pill);

  /* — Card auf Surface-Weiß mit subtle Shadow — */
  --bs-card-bg:            var(--ds-surface);
  --bs-card-border-color:  var(--ds-border);
  --bs-card-border-radius: var(--ds-radius-lg);
  --bs-card-box-shadow:    var(--ds-shadow-sm, 0 1px 2px rgba(20, 22, 28, 0.06), 0 1px 1px rgba(20, 22, 28, 0.04));

  --bs-page-footer-bg: #14181b;
}

/* Card-Style global anwenden — Bootstrap setzt --bs-card-bg auf .card-Ebene neu,
   daher müssen wir die Vars auch dort überschreiben. Spezifität durch Doppel-Selektor erhöhen. */
.card.card {
  --bs-card-bg: var(--ds-surface);
  --bs-card-border-color: var(--ds-border);
  --bs-card-border-radius: var(--ds-radius-lg);
  background-color: var(--ds-surface);
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(20, 22, 28, 0.06), 0 1px 1px rgba(20, 22, 28, 0.04));
}

/* === Theme-RGB-Triplets (Bootstrap braucht sie für rgba()-Hintergründe) === */
:root[data-theme="kupfer"],
[data-bs-theme="light"][data-theme="kupfer"],
[data-bs-theme="dark"][data-theme="kupfer"] {
  --bs-primary-rgb: 184, 92, 56;
  --bs-link-color-rgb: 184, 92, 56;
  --bs-link-hover-color-rgb: 164, 80, 47;
}
:root[data-theme="tinte"],
[data-bs-theme="light"][data-theme="tinte"],
[data-bs-theme="dark"][data-theme="tinte"] {
  --bs-primary-rgb: 58, 74, 140;
  --bs-link-color-rgb: 58, 74, 140;
  --bs-link-hover-color-rgb: 51, 65, 123;
}

/* === Komponenten-Overrides ==================================================
   T3Bootstrap kompiliert die Komponenten-Variablen aus SCSS mit hartcodierten
   Hex-Werten. Hier setzen wir sie auf die DS-Tokens zurück, damit der Theme-
   Wechsel auch in Buttons, Bg-Klassen, Alerts etc. ankommt.
   ========================================================================== */

.btn-primary {
  --bs-btn-bg:                var(--ds-primary);
  --bs-btn-border-color:      var(--ds-primary);
  --bs-btn-color:             var(--ds-on-primary);
  --bs-btn-hover-bg:          var(--ds-primary-hover);
  --bs-btn-hover-border-color: var(--ds-primary-hover);
  --bs-btn-hover-color:       var(--ds-on-primary);
  --bs-btn-active-bg:         var(--ds-primary-active);
  --bs-btn-active-border-color: var(--ds-primary-active);
  --bs-btn-active-color:      var(--ds-on-primary);
  --bs-btn-disabled-bg:       var(--ds-primary);
  --bs-btn-disabled-border-color: var(--ds-primary);
  --bs-btn-disabled-color:    var(--ds-on-primary);
}

.btn-outline-primary {
  --bs-btn-color:             var(--ds-primary);
  --bs-btn-border-color:      var(--ds-primary);
  --bs-btn-hover-bg:          var(--ds-primary);
  --bs-btn-hover-border-color: var(--ds-primary);
  --bs-btn-hover-color:       var(--ds-on-primary);
  --bs-btn-active-bg:         var(--ds-primary-active);
  --bs-btn-active-border-color: var(--ds-primary-active);
  --bs-btn-active-color:      var(--ds-on-primary);
  --bs-btn-disabled-color:    var(--ds-primary);
  --bs-btn-disabled-border-color: var(--ds-primary);
}

.bg-primary {
  background-color: var(--ds-primary) !important;
}
.text-primary {
  color: var(--ds-primary) !important;
}
.border-primary {
  border-color: var(--ds-primary) !important;
}
.link-primary {
  color: var(--ds-link) !important;
}
.link-primary:hover,
.link-primary:focus {
  color: var(--ds-link-hover) !important;
}

.bg-primary-subtle {
  background-color: var(--ds-primary-subtle) !important;
}
.text-primary-emphasis {
  color: var(--ds-primary-active) !important;
}
.border-primary-subtle {
  border-color: var(--ds-primary-border) !important;
}

.alert-primary {
  --bs-alert-bg:           var(--ds-primary-subtle);
  --bs-alert-border-color: var(--ds-primary-border);
  --bs-alert-color:        var(--ds-primary-active);
  --bs-alert-link-color:   var(--ds-primary-active);
}

.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--ds-primary) !important;
  color: var(--ds-on-primary) !important;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ds-primary);
  --bs-nav-pills-link-active-color: var(--ds-on-primary);
}

.pagination {
  --bs-pagination-active-bg: var(--ds-primary) !important;
  --bs-pagination-active-border-color: var(--ds-primary) !important;
  --bs-pagination-color: var(--ds-primary) !important;
  --bs-pagination-hover-color: var(--ds-primary-hover) !important;
  --bs-pagination-focus-color: var(--ds-primary-active) !important;
}

.form-check-input:checked {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.form-range::-webkit-slider-thumb { background: var(--ds-primary); }
.form-range::-moz-range-thumb { background: var(--ds-primary); }

.progress-bar {
  background-color: var(--ds-primary);
}

/* === Header-Logo — sichtbare Größe für SVG ohne width/height-Attribute ===== */
.page-header #logo,
.page-header .navbar-brand img {
  height: 40px;
  width: auto;
  max-width: 240px;
}

/* === Dark-Mode-Layout-Overrides ============================================
   T3Bootstrap-Template setzt hartcodierte helle Hintergründe auf den Page-
   Wrapper, Header und Footer. Im Dark-Mode auf DS-Tokens zurückführen.
   ========================================================================== */
[data-bs-theme="dark"] .page-background {
  background-color: var(--ds-bg) !important;
  color: var(--ds-text);
}
[data-bs-theme="dark"] .page-header {
  background-color: rgba(0, 0, 0, 0.6) !important;
  color: var(--ds-text);
  border-bottom: 1px solid var(--ds-border);
}

/* Navbar Smartmenus im Dark-Mode */
[data-bs-theme="dark"] .navbar-smartmenus .nav-link,
[data-bs-theme="dark"] .page-header a {
  color: var(--ds-text);
}
[data-bs-theme="dark"] .page-header a:hover {
  color: var(--ds-primary);
}

/* Cards & Frames im Dark-Mode an Surface-Token binden */
[data-bs-theme="dark"] .card {
  background-color: var(--ds-surface);
  border-color: var(--ds-border);
  color: var(--ds-text);
}
[data-bs-theme="dark"] .bg-body-tertiary {
  background-color: var(--ds-surface-sunken) !important;
}

/* Code-Blöcke in der dunklen Variante */
[data-bs-theme="dark"] code {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--ds-primary-subtle);
}

/* Breadcrumb */
[data-bs-theme="dark"] .breadcrumb {
  --bs-breadcrumb-bg: transparent;
  --bs-breadcrumb-divider-color: var(--ds-text-subtle);
  color: var(--ds-text-muted);
}

/* === Panel-Komponente (Bootstrap-3-Erbe, Bootstrap 5 hat .panel nicht mehr) ===
   Das t3bs_panel-Template rendert `.panel .panel-primary` etc. — wir liefern
   das Styling nach und binden es an die DS-Tokens.
   ========================================================================== */
.panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  margin-bottom: var(--ds-space-md);
  overflow: hidden;
}
.panel-heading {
  padding: var(--ds-space-md) var(--ds-space-lg);
  background: var(--ds-surface-sunken);
  border-bottom: 1px solid var(--ds-border);
}
.panel-title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-weight: var(--ds-heading-weight);
}
.panel-body {
  padding: var(--ds-space-lg);
}

/* Solid-Variant für CTA-Panels (Hero, Final CTA): Hintergrund in Markenfarbe, weißer Text */
.panel-primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: var(--ds-on-primary);
}
.panel-primary .panel-heading {
  background: transparent;
  border-bottom-color: transparent;
  padding-bottom: 0;
}
.panel-primary .panel-title,
.panel-primary .panel-body,
.panel-primary .panel-body p,
.panel-primary .panel-body .lead {
  color: var(--ds-on-primary);
}
.panel-primary code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ds-on-primary);
}
.panel-primary a:not(.btn) {
  color: var(--ds-on-primary);
  text-decoration: underline;
}

/* Subtle/Default-Varianten — neutraler Hintergrund, dunkler Text */
.panel-info     { border-color: var(--ds-info); }
.panel-info     .panel-heading { background: var(--ds-info-subtle); color: var(--ds-info); }
.panel-success  { border-color: var(--ds-success); }
.panel-success  .panel-heading { background: var(--ds-success-subtle); color: var(--ds-success); }
.panel-warning  { border-color: var(--ds-warning); }
.panel-warning  .panel-heading { background: var(--ds-warning-subtle); color: var(--ds-warning); }
.panel-danger   { border-color: var(--ds-danger); }
.panel-danger   .panel-heading { background: var(--ds-danger-subtle); color: var(--ds-danger); }
.panel-default  .panel-heading { background: var(--ds-surface-sunken); color: var(--ds-text); }

/* Sektions-Hintergründe (.bg-light, .bg-white aus t3bootstrap-Sektionen) */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white {
  background-color: var(--ds-surface) !important;
  color: var(--ds-text);
}

/* === Icon-Boxen (bg-square) — Subtle-BG + voll-color Icon (Draft-Stil) ====== */
.ce-icon-style-bg-square {
  border-radius: var(--ds-radius, 0.5rem);
  padding: 0.5rem;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ds-primary-subtle, #E7F0EB);
  color: var(--ds-primary, #2E6B4F);
}
.ce-icon-style-bg-square svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* Abstand zwischen Icon-Block (above-left) und Headline-Bereich */
.ce-icon-block-above-left .ce-icon {
  margin-bottom: 1rem;
}

/* === Section-Tint — alternierender Section-Hintergrund auf der Home ======== */
/* Auf zwei aufeinanderfolgende CEs (z.B. Section-Header-Text + Cards-Gruppe)
   wird die Klasse gesetzt — durch margin:0 dazwischen wirkt sie als eine Box. */
.frame.section-tint {
  background: var(--ds-surface-sunken, #F0F3F1);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
[data-bs-theme="dark"] .frame.section-tint {
  background: rgba(255, 255, 255, 0.03);
}

/* Inhalte der Tint-Section auf normale Container-Breite zurücksetzen */
.frame.section-tint > .container,
.frame.section-tint > .ce-content,
.frame.section-tint > .ce-content > .container {
  max-width: var(--bs-container-max-width, 1320px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* === Card-Badge — Marker oben rechts auf t3bs_card ========================
 * Gesteuert durch tt_content.tx_t3bs_card_badge (Keys: new, action, hot, sale).
 * Template setzt zusätzlich .has-card-badge auf .card, damit der erste Body-Absatz
 * Platz für das Badge bekommt.
 */
.card.has-card-badge {
  position: relative;
}
.card .card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--ds-radius-pill, 999px);
  line-height: 1.2;
  color: #fff;
}
.card .card-badge-new    { background-color: var(--ds-primary, #2E6B4F); }
.card .card-badge-action { background-color: var(--ds-warning, #C9892F); color: #fff; }
.card .card-badge-hot    { background-color: var(--ds-danger,  #B23A48); }
.card .card-badge-sale   { background-color: var(--ds-success, #2E6B4F); }
/* Erster Body-Absatz: nicht hinter dem Badge laufen */
.card.has-card-badge .card-body > .frame-type-text:first-child > .container > .ce-content > p:first-child {
  margin-right: 3.5rem;
  min-height: 1.5rem;
}

/* === Footer — dunkel, Spalten-Layout ====================================== */
.page-footer__tagline { color: var(--ds-gray-300); }

.footer-col__title {
  margin-bottom: 0.75rem;
}
.footer-col__title .h4 {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-caps);
  text-transform: uppercase;
  color: var(--bs-page-footer-headline-color, var(--ds-gray-300));
  display: inline-block;
}
.footer-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col__list li { margin: 0 0 0.4rem; }
/* Layout-Feinschliff (Farben kommen über die Template-Settings
   `design.color.footer-color` / `footer-link-hover-color` /
   `footer-headline-color` aus dem t3bootstrap/template). */
.page-footer .footer-col__list a {
  text-decoration: none;
  font-size: 0.875rem;
  transition: opacity var(--ds-dur-fast) var(--ds-ease);
  opacity: 0.85;
}
.page-footer .footer-col__list a:hover,
.page-footer .footer-col__list a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.page-footer__row2 {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
.page-footer__row2 .copyright,
.page-footer__row2 .credits {
  opacity: 0.7;
}
.page-footer .nav-footer .nav-link {
  opacity: 0.85;
}
.page-footer .nav-footer .nav-link:hover,
.page-footer .nav-footer .nav-link:focus-visible {
  opacity: 1;
}

/* ============================================================================
   Compact-Menü, Variante „mehrspaltig" (.compact-menu--columns)
   Seit t3bootstrap/template 14.16.5 rendert Navigation/Dropdown.html ein
   `.compact-menu`: die Zwischenebene (Eltern = Weiterleitungen/Shortcuts) wird
   zu klickbaren `dropdown-item`-Headern, die Kind-Items darunter geflacht (die
   zwei Ebenen „zusammengefasst"). Das Template stylt `.compact-menu` bewusst
   EINSPALTIG (display:grid ohne grid-template-columns).

   Über das Seitenfeld `pages.tx_t3b_nav_submenu_layout = columns` setzt das
   Template zusätzlich die Modifier-Klasse `.compact-menu--columns`. Nur DIESE
   Variante lassen wir ab Desktop in Spalten fließen — das einspaltige
   `.compact-menu` (Wert „compact"/„auto") bleibt unangetastet.

   In dieser Demo nutzt „Elemente" (5 Weiterleitungs-Sektionen + 29 Items) die
   Spalten-Variante, weil einspaltig ~34 Zeilen hoch wäre.

   menuType = t3b-nav positioniert `.compact-menu` NICHT per JS (_positionMega
   greift nur bei `.mega-menu`) und nutzt kein Popper. „Elemente" ist das
   erste/linke Top-Menü, das linksbündige Dropdown läuft nach rechts und bleibt
   im Viewport — daher keine Zentrierung nötig.
   ============================================================================ */
@media (min-width: 992px) {
  .dropdown-menu.compact-menu--columns.show,
  .dropdown-menu.compact-menu--columns[style*="display: block"] {
    display: block;                 /* Template: display:grid (1 Spalte) → Spaltenfluss */
    column-count: 3;
    column-gap: 2rem;
    padding: 1.5rem 1.75rem;
    min-width: 640px;
    max-width: min(920px, calc(100vw - 2rem));
  }

  /* Sektionen nicht über Spaltenumbrüche zerreißen. */
  .dropdown-menu.compact-menu--columns .mega-col {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  /* Lange Labels (z.B. „Background & Color") in schmalen Spalten umbrechen
     statt per `.dropdown-item { white-space: nowrap }` abzuschneiden. */
  .dropdown-menu.compact-menu--columns .mega-item {
    white-space: normal;
  }
}

/* Mittlere Desktop-Breiten: zwei Spalten. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .dropdown-menu.compact-menu--columns.show,
  .dropdown-menu.compact-menu--columns[style*="display: block"] {
    column-count: 2;
    min-width: 460px;
  }
}