/*
  cima.monitor – Deutschlandstudie Innenstadt · Child-Theme-Stile
  ---------------------------------------------------------------
  Dieser Layer re-thematisiert das vom Eltern-Theme geladene
  Bootstrap 5 auf die CIMA-Markenwelt (Petrol/Orange). Er wird NACH
  den Eltern-Styles geladen (Abhängigkeit „projekttheme-styles“ in der
  functions.php) und gewinnt dadurch in der Kaskade – die hier gesetzten
  :root-Variablen und Komponenten-Überschreibungen ersetzen die
  Standard-Farbzuordnung (Blau/Grün) des Eltern-Themes für diesen
  OnePager.

  Der Stil erfindet bewusst KEINE neuen Bootstrap-Komponentenklassen:
  Das Markup nutzt Bootstraps eigene Klassen (.btn-primary, .bg-dark,
  .navbar, .progress …); hier werden nur die von Bootstrap ohnehin
  bereitgestellten CSS-Variablen neu belegt, plus einige dokumentierte
  Marken-Tokens (zweiter „darkest“-Ton, zwei Marken-Verläufe) und die
  Diagramm-Primitive, die Bootstrap nicht mitbringt.

  Schriften: Überschriften nutzen die Überschriften-Schrift des
  Eltern-Themes (--font-heading, Standard „Archivo“), Fließtext die
  Fließtext-Schrift (--font-body, Standard „Public Sans“). So bleibt die
  Schrift-Verwaltung inkl. DSGVO-konformem Selbsthosting zentral im
  Eltern-Theme (Administrationsseite → Darstellung). Der Original-Entwurf
  nutzte „IBM Plex Sans“ als Fließtext – wird diese Schrift gewünscht,
  über das Eltern-Theme selbst hosten und dort auswählen.
*/

/* ---------------------------------------------------------------
   1. Bootstrap-Theme-Variablen → CIMA-Palette
   --------------------------------------------------------------- */
:root {
  /* Markenfarben auf Bootstraps 8 semantische Slots gelegt, damit
     .btn-primary, .text-success, .bg-warning usw. markengerecht wirken. */
  --bs-primary: #15788b;           /* Petrol – primäre CTAs, Links */
  --bs-primary-rgb: 21, 120, 139;
  --bs-secondary: #5b6b6f;         /* Gedämpftes Petrol-Grau */
  --bs-secondary-rgb: 91, 107, 111;
  --bs-success: #1f9e8c;           /* Grün – „Green City“ / positive Werte */
  --bs-success-rgb: 31, 158, 140;
  --bs-info: #ffb23e;              /* Gold/Amber – Highlights, Countdown, Ränge */
  --bs-info-rgb: 255, 178, 62;
  --bs-warning: #e97b1b;           /* Orange – primäre Conversion-CTA */
  --bs-warning-rgb: 233, 123, 27;
  --bs-danger: #b11f29;            /* Rot – „Angebote“-CTAs */
  --bs-danger-rgb: 177, 31, 41;
  --bs-light: #f4f1ea;             /* Warmes Beige – alternierender Sektions-BG */
  --bs-light-rgb: 244, 241, 234;
  --bs-dark: #0b3a44;              /* Dunkles Petrol – dunkle Bänder, Überschriften */
  --bs-dark-rgb: 11, 58, 68;

  --bs-body-color: #0e3a44;
  --bs-body-bg: #fbfaf6;           /* Creme – Seitenhintergrund */
  --bs-body-font-family: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --bs-emphasis-color: #0b3a44;
  --bs-secondary-color: #46585d;
  --bs-tertiary-color: #8a9498;
  --bs-tertiary-bg: #eef4f5;

  --bs-link-color: #15788b;
  --bs-link-color-rgb: 21, 120, 139;
  --bs-link-hover-color: #0b3a44;
  --bs-link-hover-color-rgb: 11, 58, 68;
  --bs-border-color: #ece7dc;
  --bs-border-color-translucent: rgba(11, 58, 68, 0.14);

  --bs-border-radius: 0.5rem;        /* 8px */
  --bs-border-radius-sm: 0.4375rem;  /* 7px */
  --bs-border-radius-lg: 0.875rem;   /* 14px */
  --bs-border-radius-xl: 1.125rem;   /* 18px */
  --bs-border-radius-pill: 50rem;

  /* Text/BG „emphasis“ & „subtle“ für Badges/Alerts */
  --bs-primary-text-emphasis: #0b3a44;
  --bs-primary-bg-subtle: #dceaee;
  --bs-primary-border-subtle: #bcd2d6;
  --bs-warning-text-emphasis: #7a3e0c;
  --bs-warning-bg-subtle: #fbe6d1;
  --bs-warning-border-subtle: #f3c58f;
  --bs-success-text-emphasis: #0f5145;
  --bs-success-bg-subtle: #d9f0ec;
  --bs-success-border-subtle: #a9dcd2;

  /* ---- Marken-Tokens (dokumentierte Ausnahmen) ---- */
  --cima-darkest: #072a33;   /* Footer & „Handlungsbedarfe“-Band */
  --cima-darkest-rgb: 7, 42, 51;
  --cima-tint: #dceaee;      /* blasses Blau – Statement-Hintergrund */
  --cima-cream: #fbfaf6;
  --cima-beige: #f4f1ea;
}

/* ---------------------------------------------------------------
   2. Basistypografie
   --------------------------------------------------------------- */
body {
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-heading, "Archivo", sans-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bs-dark);
}

.display-1, .display-2, .display-3 { font-weight: 900; }

/* Kleines Kicker-Label; mit einer Bootstrap-text-*-Utility für die Farbe
   kombinieren, z. B. class="eyebrow text-warning-emphasis". */
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

::selection {
  background-color: var(--bs-warning);
  color: #fff;
}

/* Deutlich sichtbarer Fokus-Rahmen (WCAG 2.4.7) auf allen Bedienelementen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Sprungziel-Abstand unter der klebenden Navigation (Anker-Links) */
[id] {
  scroll-margin-top: 5rem;
}

/* ---------------------------------------------------------------
   3. Marken-Verläufe & dunkelstes Band (dokumentierte Ausnahmen)
   --------------------------------------------------------------- */
.bg-gradient-brand {
  background: linear-gradient(100deg, var(--bs-dark) 0%, var(--bs-primary) 100%);
}

.bg-gradient-soft {
  background: linear-gradient(180deg, var(--cima-cream) 0%, var(--cima-beige) 100%);
}

.bg-cima-darkest { background-color: var(--cima-darkest) !important; }
.text-cima-darkest { color: var(--cima-darkest) !important; }
.bg-cima-tint { background-color: var(--cima-tint) !important; }

/* ---------------------------------------------------------------
   4. Komponenten-Überschreibungen
   Bootstrap 5.3 liest je Komponente eigene CSS-Variablen (z. B.
   --bs-btn-bg). Die vorkompilierte Datei backt Sass-Defaults dort ein,
   daher greifen die :root-Werte oben nicht überall. Wir belegen exakt
   die Variablennamen neu, die Bootstrap für „customize without Sass“
   dokumentiert.
   --------------------------------------------------------------- */
.btn {
  font-family: var(--font-heading, "Archivo", sans-serif);
  font-weight: 700;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0f5f6e;
  --bs-btn-hover-border-color: #0f5f6e;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d5361;
  --bs-btn-active-border-color: #0d5361;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0f5f6e;
  --bs-btn-active-border-color: #0f5f6e;
  --bs-btn-border-width: 2px;
}

/* Orange-CTA: dunkle Schrift auf Orange hält den Kontrast >= 5,4:1 (WCAG AA);
   weiße Schrift auf genau diesem Orange erreicht nur ~3:1 und fällt durch. */
.btn-warning {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: #cc6e1a;
  --bs-btn-hover-border-color: #cc6e1a;
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: #b3630f;
  --bs-btn-active-border-color: #b3630f;
  --bs-btn-disabled-color: var(--bs-dark);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #98191f;
  --bs-btn-hover-border-color: #98191f;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #85161c;
  --bs-btn-active-border-color: #85161c;
}

.btn-dark {
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-bg: #123f4a;
  --bs-btn-hover-border-color: #123f4a;
  --bs-btn-active-bg: #092933;
  --bs-btn-active-border-color: #092933;
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: #4d5b5e;
  --bs-btn-hover-border-color: #4d5b5e;
}

.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.55);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}

/* Navbar: Aktiv-/Hover-Linkfarbe */
.navbar {
  --bs-navbar-color: var(--bs-secondary);
  --bs-navbar-hover-color: var(--bs-dark);
  --bs-navbar-active-color: var(--bs-primary);
  --bs-navbar-brand-padding-y: 0;
}
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link.active { font-weight: 600; }

/* Cards */
.card {
  --bs-card-border-color: var(--bs-border-color);
}

/* Badges */
.badge { font-family: var(--font-heading, "Archivo", sans-serif); }

/* Formulare: Fokus-Ring in Marken-Petrol */
.form-control:focus,
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Modal */
.modal-content {
  border: 0;
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
}
.modal .btn-close-white { opacity: 0.85; }
.modal .btn-close-white:hover { opacity: 1; }

/* ---------------------------------------------------------------
   5. Datengetriebene Diagramm-Primitive
   Prozente/Höhen werden je Datenpunkt per Inline-Style gesetzt (der von
   Bootstrap dokumentierte Weg, .progress-bar zu dimensionieren); dieser
   Block liefert nur die vertikale „Säulen“-Variante, die Bootstrap fehlt.
   --------------------------------------------------------------- */
.progress {
  --bs-progress-height: 1.5rem;
  --bs-progress-border-radius: var(--bs-border-radius-sm);
  --bs-progress-bg: #eef2f3;
}
.progress-on-dark { --bs-progress-bg: rgba(255, 255, 255, 0.1); }

.chart-column {
  display: flex;
  align-items: flex-end;
  height: 100%;
}
.chart-column-fill {
  width: 100%;
  max-width: 62px;
  margin-inline: auto;
  background: linear-gradient(180deg, #2e8aa0, var(--bs-primary));
  border-radius: var(--bs-border-radius-sm) var(--bs-border-radius-sm) 0 0;
}

/* Scroll-Reveal für Balken/Säulen; JS schaltet .is-visible */
.grow-x { transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.grow-x.is-visible { transform: scaleX(1); }
.grow-y { transform: scaleY(0); transform-origin: bottom; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.grow-y.is-visible { transform: scaleY(1); }

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(255, 178, 62, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 178, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 178, 62, 0); }
}
.pulse-dot { animation: pulse-dot 2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .grow-x, .grow-y { transition: none; transform: none; }
  .pulse-dot { animation: none; }
}

/* ---------------------------------------------------------------
   6. Kleine, mehrfach genutzte Layout-Hilfen
   --------------------------------------------------------------- */
.section { padding-block: 4.5rem; }
.avatar-circle {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 50%;
}
.cover-shadow {
  box-shadow: 0 34px 64px rgba(8, 40, 48, 0.3), 0 10px 22px rgba(8, 40, 48, 0.16);
}
.logo-tile {
  min-height: 108px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.logo-tile:hover, .logo-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(8, 40, 48, 0.1);
  border-color: var(--bs-primary) !important;
}
.edition-cover {
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
}

/* Bootstrap bringt .border-end, aber keine responsive Variante. Das 4er-
   Kennzahlenband ist mobil ein 2x2-Raster (Trenner nur zwischen den
   Spalten, nicht den Zeilen), ab md eine Reihe aus 4 (Trenner zwischen
   allen außer der letzten). */
.stat-col {
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
.stat-col:nth-child(odd) {
  border-inline-end: 1px solid var(--bs-border-color-translucent);
}
.stat-col:nth-last-child(-n+2) {
  border-bottom: 0;
}
@media (min-width: 768px) {
  .stat-col {
    border-bottom: 0;
    border-inline-end: 1px solid var(--bs-border-color-translucent);
  }
  .stat-col:last-child {
    border-inline-end: 0;
  }
}

.badge-tilt { transform: rotate(3deg); }

/* Zentralitäts-Skala (Kaufkraftkennziffern): eine Zwei-Marker-Skala, die
   nicht auf Bootstraps einwertige .progress-Komponente abbildbar ist. */
.centrality-scale {
  position: relative;
  height: 14px;
  border-radius: var(--bs-border-radius-pill);
  background: linear-gradient(90deg, #dde3e4, #9ec4cc);
}
.centrality-scale .marker {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 2px;
  background: var(--bs-dark);
}
.centrality-scale .marker-accent {
  position: absolute;
  top: -9px;
  bottom: -9px;
  width: 4px;
  border-radius: 2px;
  background: var(--bs-warning);
}

@media (prefers-reduced-motion: reduce) {
  .logo-tile { transition: none; }
}