/* Gestaltungsmarken der inmedias.it GmbH, übernommen aus dem KundInnenportal
 * (`frontend/src/styles.css` in gitea.inmedias.it/inmedias.it/kundInnenportal).
 *
 * Die Farben sind dort **gemessen**, nicht erfunden: Magenta und Türkis stammen
 * aus den Stilvorlagen des Hauses, das Magenta zusätzlich aus dem Logo (dort
 * #980870, in der Vorlage #9E0F71 — es gilt die Vorlage). Wer hier eine Farbe
 * ändert, ändert sie gegen die Vorlage, nicht gegen einen Geschmack.
 *
 * Die typografische Regel des Portals gilt auch hier:
 *   **Was die Maschine gerechnet oder vergeben hat, steht in Mono.**
 *   Beträge, Mengen, Tier-Kürzel, Chancen-Score, Commit-Hashes.
 *   Was ein Mensch geschrieben hat, steht in der Textschrift.
 * In einem Preisrechner trennt das die Eingabe von der Berechnung.
 *
 * Bootstrap wird nicht geforkt, sondern über seine eigenen `--bs-*`-Variablen
 * umgefärbt — ein Versions-Bump (siehe VENDOR.md) bleibt damit ein Dateitausch.
 */

:root {
  /* -- Marke ------------------------------------------------------ */
  --magenta: #9e0f71;
  --magenta-hell: #bd1287;
  --magenta-blass: #f7ecf3;
  --tuerkis: #16a085;
  /* Türkis erreicht auf Weiß nur 3,3:1 und ist deshalb **keine Textfarbe** —
     im Portal trägt es ausschließlich Flächen und Akzentränder. Für Zahlen,
     die grün sein sollen (Marge), die abgedunkelte Variante: 5,2:1. */
  --tuerkis-dunkel: #0f7a65;
  --tinte: #0d2231;
  --schiefer: #2e3d4a;

  /* -- Das Raster aus dem Logo ------------------------------------ */
  --raster: #d3d7d9;
  --raster-hell: #e6e9eb;
  --linie: #dde1e3;
  /* Zwei Ränder, nicht einer: `--linie` trennt Flächen und darf blass sein
     (1.4.11 gilt für sie nicht). Ein Rand, der ein Bedienelement erst
     erkennbar macht, muss 3:1 erreichen — das tut `--linie` mit 1,21:1 nicht. */
  --rand-bedienelement: #858f95;

  --papier: #f4f6f7;
  --karte: #ffffff;

  --text: #16232e;
  --text-leise: #5d6b76;
  --text-gedaempft: #6c7781;
  --warnung: #cd0a0a;

  /* -- Schrift ---------------------------------------------------- */
  --schrift-text: 'Open Sans', Verdana, Arial, sans-serif;
  --schrift-zahl: ui-monospace, 'SFMono-Regular', 'DejaVu Sans Mono', monospace;

  /* -- Maße ------------------------------------------------------- */
  --rand: 2px; /* wie auf inmedias.it: fast eckig, nicht rund */
  --kopf: 3.75rem;
  /* Hausregel aus P9 der Portal-Entscheidungen: 44 px für alles, was eine
     Handlung auslöst; 24 px ist die harte Untergrenze für alles Übrige. */
  --ziel: 2.75rem;
  --ziel-klein: 1.5rem;
}

/* -- Bootstrap umfärben ------------------------------------------- */

:root {
  --bs-body-bg: var(--papier);
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 22, 35, 46;
  --bs-body-font-family: var(--schrift-text);
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.55;
  --bs-emphasis-color: var(--tinte);
  --bs-secondary-color: var(--text-leise);
  --bs-tertiary-color: var(--text-gedaempft);

  --bs-border-color: var(--linie);
  --bs-border-color-translucent: var(--linie);
  --bs-border-radius: var(--rand);
  --bs-border-radius-sm: var(--rand);
  --bs-border-radius-lg: var(--rand);
  --bs-border-radius-xl: var(--rand);
  --bs-border-radius-2xl: var(--rand);

  --bs-primary: var(--magenta);
  --bs-primary-rgb: 158, 15, 113;
  --bs-primary-bg-subtle: var(--magenta-blass);
  --bs-primary-border-subtle: var(--magenta);
  --bs-link-color: var(--magenta);
  --bs-link-color-rgb: 158, 15, 113;
  --bs-link-hover-color: var(--magenta-hell);
  --bs-link-hover-color-rgb: 189, 18, 135;

  --bs-secondary: var(--schiefer);
  --bs-secondary-rgb: 46, 61, 74;
  --bs-secondary-bg: var(--raster-hell);
  --bs-secondary-bg-subtle: var(--raster-hell);
  --bs-secondary-border-subtle: var(--raster);

  --bs-success: var(--tuerkis-dunkel);
  --bs-success-rgb: 15, 122, 101;
  --bs-danger: var(--warnung);
  --bs-danger-rgb: 205, 10, 10;
  --bs-warning-bg-subtle: #fdf3e3;
  --bs-warning-border-subtle: #e0b878;
  /* Bootstraps Warn-Braun steht in keiner Vorlage des Hauses. Auffallen soll
     die Kachel trotzdem: Magenta, 7,6:1. Was sie bedeutet, sagt ihr Label —
     die Farbe trägt die Aussage nicht allein (1.4.1). */
  --bs-warning-text-emphasis: var(--magenta);
  --bs-light: var(--raster-hell);
  --bs-light-rgb: 230, 233, 235;
  --bs-info-bg-subtle: #eaf6f3;
  --bs-info-border-subtle: var(--tuerkis);

  --bs-focus-ring-color: rgba(158, 15, 113, 0.2);
  --bs-code-color: var(--magenta);
}

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--tinte);
  letter-spacing: -0.012em;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Sichtbarer Tastaturfokus, überall und in Markenfarbe. */
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

/* Zielpunkt der Sprungmarke: ansprechbar, ohne im Tastaturweg zu liegen —
   ein Umriss erklärt dort nichts. */
[tabindex='-1']:focus {
  outline: none;
}

/* -- Sprungmarke und Vorlesetext ---------------------------------- */

/* Sichtbar nur mit Fokus; liegt über der Kopfleiste, damit sie nicht
   dahinter verschwindet. */
.sprungmarke {
  position: absolute;
  inset-block-start: -4rem;
  inset-inline-start: 1rem;
  z-index: 300;
  padding: 0.7rem 1.15rem;
  background: var(--magenta);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--rand);
  transition: inset-block-start 0.12s ease;
}
.sprungmarke:focus {
  inset-block-start: 0.5rem;
}

/* -- Kopfleiste ---------------------------------------------------- */

.navbar-ci {
  min-height: var(--kopf);
  background: var(--tinte);
}
.navbar-ci .navbar-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.navbar-ci .navbar-brand:hover,
.navbar-ci .navbar-brand:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
/* Der Markenstrich: dieselbe Rolle wie das Magenta im Logo. */
.navbar-ci {
  border-bottom: 3px solid var(--magenta);
}

/* Das Konto-Menü: der aktive Eintrag stand sonst in Bootstrap-Blau —
   sichtbar nur im geöffneten Menü, deshalb erst im Browserlauf gefunden. */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--magenta);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-hover-bg: var(--magenta-blass);
  --bs-dropdown-link-hover-color: var(--magenta);
  --bs-dropdown-border-color: var(--linie);
  --bs-dropdown-border-radius: var(--rand);
}

/* Die Hauptwege in der Kopfleiste. Weiß auf Tinte, der aktuelle Weg trägt
   einen Magenta-Balken — nicht nur eine andere Textfarbe (1.4.1). */
.navbar-ci .navbar-nav {
  gap: 0.25rem;
}
.navbar-ci .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  padding-inline: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.navbar-ci .nav-link:hover,
.navbar-ci .nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.navbar-ci .nav-link.active {
  color: #fff;
  border-bottom-color: var(--magenta-hell);
}

.navbar-ci .navbar-toggler {
  min-height: var(--ziel);
  min-width: var(--ziel);
  border-color: rgba(255, 255, 255, 0.4);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ziel);
  min-height: var(--ziel);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  text-decoration: none;
}
.lang-switch a:hover {
  color: #fff;
}
.lang-switch a.active {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* -- Flächen ------------------------------------------------------- */

.card {
  background: var(--karte);
  border: 1px solid var(--linie);
  box-shadow: none;
}

.card-title {
  font-weight: 700;
}

/* Die Kleinbeschriftung über einem Abschnitt — im Markup als
   `text-uppercase text-muted small` geschrieben. */
.card-title.text-uppercase {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--text-leise) !important;
}

/* -- Bedienelemente ------------------------------------------------ */

/* 44 × 44 px, auch für die kleinen Knöpfe: ein Ziel, das man verfehlt,
   kostet mehr Zeit als die Zeile, die es spart. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--ziel);
  font-weight: 600;
}
.btn-sm {
  min-height: var(--ziel);
  font-size: 0.8125rem;
}
/* Icon-Knöpfe (das × zum Löschen) tragen `p-0` und wären sonst so breit wie
   ihr Zeichen. */
.btn-link {
  min-width: var(--ziel);
  text-decoration: none;
}
.btn-link:hover {
  text-decoration: underline;
}

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

/* Das Portal kennt zwei Knopfarten: gefüllt und leise. `btn-secondary` und
   `btn-outline-secondary` werden hier beide zum leisen Knopf — weiß mit
   erkennbarem Rand, Magenta erst beim Überfahren. */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary {
  --bs-btn-color: var(--tinte);
  --bs-btn-bg: var(--karte);
  --bs-btn-border-color: var(--rand-bedienelement);
  --bs-btn-hover-color: var(--magenta);
  --bs-btn-hover-bg: var(--magenta-blass);
  --bs-btn-hover-border-color: var(--magenta);
  --bs-btn-active-color: var(--magenta);
  --bs-btn-active-bg: var(--magenta-blass);
  --bs-btn-active-border-color: var(--magenta);
  --bs-btn-disabled-color: var(--text-gedaempft);
  --bs-btn-disabled-bg: var(--karte);
  --bs-btn-disabled-border-color: var(--raster);
}

/* Der Modell-Umschalter im Rechner ist eine Auswahl, kein zweiter
   Absende-Knopf — die gewählte Seite trägt Magenta. */
.btn-check:checked + .btn-outline-primary {
  --bs-btn-color: #fff;
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}

.btn-outline-danger {
  --bs-btn-color: var(--warnung);
  --bs-btn-border-color: var(--rand-bedienelement);
  --bs-btn-hover-bg: var(--warnung);
  --bs-btn-hover-border-color: var(--warnung);
  --bs-btn-active-bg: var(--warnung);
  --bs-btn-active-border-color: var(--warnung);
}

/* Bootstrap färbt Felder mit `--bs-body-bg` — das ist hier das Papier und
   wirkt auf einer weißen Karte wie ausgegraut. */
.form-control,
.form-select {
  background-color: var(--karte);
  border-color: var(--rand-bedienelement);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
.form-select {
  min-height: var(--ziel);
}
/* Die CRM-Masken tragen 20 und mehr Felder je Seite; auf 44 px gebracht
   passt keine davon mehr auf einen Schirm. 36 px liegt über der harten
   Untergrenze von 24 px — Felder lösen anders als Knöpfe nichts aus. */
.form-control-sm,
.form-select-sm {
  min-height: 2.25rem;
}

/* Bootstrap rechnet die Einrückung des Kästchens in `em` der Textgröße; ein
   auf 24 px vergrößertes Kästchen ragt damit in die Beschriftung. */
.form-check {
  padding-left: 2.25rem;
  min-height: 1.75rem;
}
/* Die Größe gilt für jedes Kästchen — auch für die Replica-Wahl im Rechner,
   die ohne `.form-check`-Umgebung steht und deshalb bei 15 px blieb. */
.form-check-input {
  width: var(--ziel-klein);
  height: var(--ziel-klein);
  border-color: var(--rand-bedienelement);
}
/* Die Einrückung nur im `.form-check`: mit `.form-check` davor, sonst gewinnt
   Bootstraps `-1.5em` und das vergrößerte Kästchen schiebt sich über die
   Beschriftung. */
.form-check .form-check-input {
  margin-left: -2.25rem;
  margin-top: 0.1rem;
}
.form-check-input:checked {
  background-color: var(--magenta);
  border-color: var(--magenta);
}
.form-check-input:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
/* Die Beschriftung ist Teil des Ziels (`for=`) und macht die 24 px in der
   Fläche wieder gut. */
.form-check-label {
  padding-block: 0.2rem;
}

.form-text {
  color: var(--text-leise);
}

/* Aufklapper sind Bedienelemente. `display: flex` würde das Dreieck
   entfernen, deshalb Polsterung statt `min-height`. */
summary {
  padding-block: 0.6rem;
  cursor: pointer;
}

/* -- Tabellen ------------------------------------------------------ */

.table {
  --bs-table-border-color: var(--raster-hell);
  --bs-table-striped-bg: var(--papier);
  /* Bootstrap hängt `--bs-table-bg` an `--bs-body-bg` — das ist hier das
     Papier, und damit stand jede Tabellenzelle auf grauem Grund. Der Score
     „kalt" fiel dadurch auf 4,22:1 (gemessen im Browser, gegen Weiß wären es
     4,57:1). Tabellen stehen in dieser Anwendung immer auf einer Karte. */
  --bs-table-bg: var(--karte);
}

/* Verweise in Tabellen sind Ziele einer Handlung und bekommen die 44 px der
   Hausregel — als Fläche, nicht als Zeilenhöhe: der Text bleibt 15 px. */
.table a,
.dropdown-item {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
}
.dropdown-item {
  display: flex;
}
.table > thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  border-bottom-color: var(--linie);
  white-space: nowrap;
}

/* -- Marken und Kennzeichen ---------------------------------------- */

.badge {
  font-weight: 600;
  border-radius: var(--rand);
}
.badge.bg-secondary {
  background: var(--schiefer) !important;
}
.badge.bg-light {
  background: var(--raster-hell) !important;
  color: var(--tinte) !important;
}

.alert {
  border-radius: var(--rand);
}
/* Akzentrand statt Fläche — so setzt das Portal das Türkis ein. */
.alert-info {
  border-left: 3px solid var(--tuerkis);
}
/* Die Fläche warnt, der Text soll lesen. Bootstrap würde hier sonst die
   Emphasis-Farbe der Kacheln einsetzen. */
.alert-warning {
  --bs-alert-color: var(--tinte);
}
.alert-light {
  background: var(--papier);
}

.progress-bar.bg-secondary {
  background: var(--tuerkis) !important;
}

/* -- Zahlen -------------------------------------------------------- */

/* Alles, was das System gerechnet oder vergeben hat. */
.zahl,
.result-table td.num,
.version-value,
.score {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
}

.result-table td.num,
.result-table th.num {
  text-align: right;
}
.result-table .total-row {
  font-weight: 700;
  background: var(--papier);
}
.result-table .text-success {
  color: var(--tuerkis-dunkel) !important;
}

.qty-input {
  max-width: 130px;
}

.version-block {
  font-size: 0.75rem;
  color: var(--text-leise);
  white-space: nowrap;
}
.version-block > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Chancen-Score: die Bänder aus crm_model.SCORE_BANDS. Die Farbe ist
   Zugabe — die Zahl daneben sagt dasselbe, sonst wäre sie nach 1.4.1
   der einzige Träger der Aussage. */
.score {
  font-weight: 700;
}
.score-hot {
  color: var(--warnung);
}
.score-active {
  color: var(--magenta);
}
.score-watch {
  color: var(--schiefer);
}
.score-cold {
  color: var(--text-gedaempft);
  font-weight: 500;
}

.crm-notes {
  white-space: pre-wrap;
}
.crm-table td {
  vertical-align: top;
}

/* Text, den nur ein Bildschirmlesegerät bekommt. Bootstrap bringt
   `.visually-hidden` mit; der deutsche Name daneben, weil das Portal ihn
   führt und Markup hier deutsch benannt ist. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}