/*
 * Hochzeitsplaner: Beige, Gold, feierlich und edel (Metronic 8.3.3, Demo 1).
 *
 * Geladen von der Schale nach style.bundle.css (Modul.stil der Marke), Muster
 * wie vm-thema.css im Vereinsmanager: Metronic baut seine Farben fast ganz aus
 * Variablen, hier werden vor allem die gesetzt.
 *
 * Palette: Elfenbein und Beige als Grund, Gold als Akzent, Espresso fuer die
 * Seitenleiste. Gold auf Weiss als Knopf (#87652c): weisser Text 5,3:1. Im
 * Dunkelmodus helles Gold (#d4b47a) mit dunklem Text darauf, 8:1.
 * Ueberschriften in Cormorant Garamond (SIL OFL, selbst ausgeliefert).
 *
 * **Jede Variable des hellen Blocks steht auch im dunklen.**
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/schriften/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/schriften/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/schriften/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root,
[data-bs-theme=light] {
  --hz-serif: "Cormorant Garamond", Didot, Georgia, serif;
  --hz-gold: #87652c;
  --hz-gold-dunkel: #6f5223;
  --hz-gold-glanz: #c9a96e;
  --hz-gold-hell: #f3ead9;
  --hz-elfenbein: #fffcf7;
  --hz-espresso: #1f1914;

  --bs-primary: #87652c;
  --bs-primary-rgb: 135, 101, 44;
  --bs-primary-active: #6f5223;
  --bs-primary-light: #f3ead9;
  --bs-primary-inverse: #ffffff;
  --bs-primary-clarity: rgba(135, 101, 44, 0.2);
  --bs-primary-text-emphasis: #5a4219;
  --bs-primary-bg-subtle: #f3ead9;
  --bs-primary-border-subtle: #e2cfa8;
  --bs-text-primary: #87652c;

  --bs-link-color: #87652c;
  --bs-link-color-rgb: 135, 101, 44;
  --bs-link-hover-color: #6f5223;
  --bs-link-hover-color-rgb: 111, 82, 35;
  --bs-focus-ring-color: rgba(135, 101, 44, 0.25);

  --bs-component-active-bg: #87652c;
  --bs-component-hover-color: #87652c;
  --bs-component-checked-bg: #87652c;
  --bs-menu-link-color-hover: #87652c;
  --bs-menu-link-color-show: #87652c;
  --bs-menu-link-color-here: #87652c;
  --bs-menu-link-color-active: #87652c;
  --bs-scrolltop-bg-color: #87652c;
  --bs-scrolltop-bg-color-hover: #6f5223;
  --bs-ribbon-label-bg: #87652c;

  --bs-body-color: #2b2420;
  --bs-heading-color: #2b2420;
  --bs-app-bg-color: #f5efe5;
  --bs-app-header-base-bg-color: #fbf7f0;
  --bs-card-bg: #fffcf7;
  --bs-card-border-color: #ece2d2;
  --bs-border-color: #e6dccb;
  /* Warme Grautoene statt Metronics kuehlem Blaugrau */
  --bs-gray-100: #f6f1e8; --bs-gray-200: #ece4d7; --bs-gray-300: #dcd2c3; --bs-gray-400: #b9ae9f; --bs-gray-500: #998d7e;
  --bs-gray-600: #7a6e60; --bs-gray-700: #5e5348; --bs-gray-800: #3f362d; --bs-gray-900: #2b2420;
  --bs-text-gray-400: #b9ae9f; --bs-text-gray-500: #75695b; --bs-text-gray-600: #6f6355; --bs-text-gray-700: #5e5348;
  --bs-text-gray-800: #3f362d; --bs-text-gray-900: #2b2420; --bs-text-muted: #6b5f52; --bs-secondary-color: #6f6355;
  --bs-light: #f3ece0; --bs-light-active: #ece4d7; --bs-light-inverse: #5e5348;
}

[data-bs-theme=dark] {
  --hz-serif: "Cormorant Garamond", Didot, Georgia, serif;
  --hz-gold: #d4b47a;
  --hz-gold-dunkel: #e6cb98;
  --hz-gold-glanz: #e2c48c;
  --hz-gold-hell: #2b2218;
  --hz-elfenbein: #1e1913;
  --hz-espresso: #120e0b;

  --bs-primary: #d4b47a;
  --bs-primary-rgb: 212, 180, 122;
  --bs-primary-active: #e6cb98;
  --bs-primary-light: #2b2218;
  --bs-primary-inverse: #1a140d;
  --bs-primary-clarity: rgba(212, 180, 122, 0.25);
  --bs-primary-text-emphasis: #f0dcb3;
  --bs-primary-bg-subtle: #2b2218;
  --bs-primary-border-subtle: #5a4626;
  --bs-text-primary: #d4b47a;

  --bs-link-color: #d4b47a;
  --bs-link-color-rgb: 212, 180, 122;
  --bs-link-hover-color: #e6cb98;
  --bs-link-hover-color-rgb: 230, 203, 152;
  --bs-focus-ring-color: rgba(212, 180, 122, 0.25);

  --bs-component-active-bg: #d4b47a;
  --bs-component-hover-color: #d4b47a;
  --bs-component-checked-bg: #d4b47a;
  --bs-menu-link-color-hover: #d4b47a;
  --bs-menu-link-color-show: #d4b47a;
  --bs-menu-link-color-here: #d4b47a;
  --bs-menu-link-color-active: #d4b47a;
  --bs-scrolltop-bg-color: #d4b47a;
  --bs-scrolltop-bg-color-hover: #e6cb98;
  --bs-ribbon-label-bg: #d4b47a;

  --bs-body-color: #ece3d4;
  --bs-heading-color: #f3e9d6;
  --bs-app-bg-color: #15110d;
  --bs-app-header-base-bg-color: #1a1510;
  --bs-card-bg: #1e1913;
  --bs-card-border-color: #3a3026;
  --bs-border-color: #3a3026;
}

/* ------------------------------------------------ Grund und Karten */

body { background-color: var(--bs-app-bg-color); }
.card { background-color: var(--bs-card-bg); border: 1px solid var(--bs-card-border-color); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.04); }
.app-header { background-color: var(--bs-app-header-base-bg-color) !important; border-bottom: 1px solid var(--bs-card-border-color); }

/* ------------------------------------------------ Schrift */

.page-heading,
.card-title,
h1, h2, .fs-2x, .fs-2hx, .hz-serif {
  font-family: var(--hz-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.page-heading { font-size: 1.75rem !important; }
.card-title { font-size: 1.45rem !important; }

/* ------------------------------------------------ fest eingetragene Farben */

.btn.btn-primary { --bs-btn-color: var(--bs-primary-inverse); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:focus { border-color: var(--bs-primary-border-subtle); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.progress { --bs-progress-bar-bg: var(--bs-primary); }
.badge-light-primary { color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-light); }

/* ------------------------------------------------ Seitenleiste (Espresso und Gold) */

[data-kt-app-layout=dark-sidebar] .app-sidebar {
  background: linear-gradient(180deg, #241d17 0%, var(--hz-espresso) 100%);
  border-right: 1px solid rgba(201, 169, 110, 0.18);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
  border-bottom-color: rgba(201, 169, 110, 0.22);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-heading {
  color: #a8916b !important; /* Metronic setzt hier selbst !important */
  letter-spacing: 0.12em;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
  color: #e6dccb;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: #a8916b;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
  background-color: #a8916b;
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover .menu-icon i {
  color: var(--hz-gold-glanz);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
  background-color: rgba(201, 169, 110, 0.12);
  box-shadow: inset 3px 0 0 var(--hz-gold-glanz);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i {
  color: var(--hz-gold-glanz);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .btn-custom {
  background-color: rgba(201, 169, 110, 0.12);
}

/* Links im Fliesstext sind unterstrichen, nicht nur farbig (WCAG 1.4.1, Axe link-in-text-block). */
p a:not(.btn):not(.menu-link), .form-text a, .form-check-label a { text-decoration: underline; text-underline-offset: 2px; }

/*
 * Kontrast der hellen Badges und Hinweistexte auf Elfenbein (WCAG AA 4,5:1,
 * Axe color-contrast). Metronic nimmt die volle Signalfarbe als Schrift auf
 * der hellen Flaeche -- auf unserem warmen Grund zu blass. Nur im hellen Modus;
 * der dunkle hat eigene Werte.
 */
[data-bs-theme=light] .badge-light-success, [data-bs-theme=light] .text-success { color: #1d6b45 !important; }
[data-bs-theme=light] .badge-light-warning, [data-bs-theme=light] .text-warning { color: #7a5300 !important; }
[data-bs-theme=light] .badge-light-info, [data-bs-theme=light] .text-info { color: #1b5e8a !important; }
[data-bs-theme=light] .badge-light-danger, [data-bs-theme=light] .text-danger { color: #a3321f !important; }
[data-bs-theme=light] .badge-light-primary, [data-bs-theme=light] .badge-light { color: #5a4219 !important; }
[data-bs-theme=light] .form-check-label { color: var(--bs-gray-800); }
[data-bs-theme=light] .btn.btn-light-danger:not(:hover) { color: #a3321f; }
[data-bs-theme=light] .btn.btn-light-primary:not(:hover) { color: #5a4219; }
[data-bs-theme=light] .btn.btn-light-success:not(:hover) { color: #1d6b45; }