/* Diese Datei wird per <link rel="stylesheet"> geladen und darf deshalb KEIN
   <style>-Tag enthalten. Frueher stand hier eines: der CSS-Parser las "<style> body"
   als einen einzigen (ungueltigen) Selektor und verschluckte damit stillschweigend
   die erste Regel der Datei. Der Navbar-Abstand kommt aus dem Inline-Block in
   header.php (body { padding-top: 3.5rem }) - der ist der einzige, der je gewirkt hat. */

/* Navigationspunkte duerfen nicht umbrechen: sonst wird die fixierte Navbar hoeher
   als das padding-top des body (3.5rem aus header.php) und schiebt sich ueber die
   Ueberschrift. Bootstrap-Utilities wie .text-nowrap stehen hier NICHT zur Verfuegung –
   bootstrap.purged.css enthaelt nur die tatsaechlich benutzten Klassen. */
.navbar .nav-link { white-space: nowrap; }

/* ============================================================
   Homelab-Stromrechner
   ============================================================ */
/* Bewusst OHNE max-height: der Laufwerks-Picker klappt innerhalb dieser Liste auf und
   bringt seine eigene Scroll-Flaeche mit. Zwei ineinander verschachtelte Scrollbereiche
   sind unbedienbar – der Picker verschwand dabei schlicht unter der Kante. Die Liste
   darf also lang werden, dafuer gibt es die Filter-Chips. */
.stromrechner-liste { padding-right: .2rem; }
.geraet-zeile {
  display: grid;
  grid-template-columns: auto 44px 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .45rem .55rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  cursor: pointer;
}
.geraet-zeile:hover { background-color: var(--bs-tertiary-bg); }
.geraet-zeile.an {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}
.geraet-zeile img { object-fit: contain; }
.geraet-name { font-size: .9rem; line-height: 1.3; min-width: 0; }
.geraet-name small { font-size: .74rem; }
.geraet-watt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* damit die Watt-Spalte buendig steht */
  white-space: nowrap;
}
/* Laufwerks-Picker: klappt erst auf, wenn ein Geraet gewaehlt wurde – und zeigt nur
   die Laufwerksarten, die das Geraet ueberhaupt aufnehmen kann (NAS: Platten + M.2,
   Mini-PC: nur NVMe, Router: gar nichts). */
.geraet-block + .geraet-block { margin-top: .15rem; }
.lw-picker {
  margin: .2rem 0 .7rem 2.1rem;
  padding: .7rem .8rem;
  border-left: 3px solid var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
  border-radius: 0 .5rem .5rem 0;
}
.lw-picker-kopf {
  display: flex; flex-wrap: wrap; gap: .2rem .6rem;
  align-items: baseline; font-size: .85rem; margin-bottom: .5rem;
}
.lw-picker-kopf span { font-size: .78rem; }

.lw-gruppe + .lw-gruppe { margin-top: .7rem; }
.lw-gruppe-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  font-size: .78rem; font-weight: 600; margin-bottom: .3rem;
  padding-bottom: .2rem; border-bottom: 1px solid var(--bs-border-color);
}
.lw-belegt { font-weight: 600; color: var(--bs-secondary-color); }
.lw-belegt.voll { color: var(--bs-primary); }

/* Die Laufwerksliste ist lang (10 HDDs, 22 SSDs) – scrollbar, statt die Seite aufzublaehen. */
.lw-liste { max-height: 210px; overflow-y: auto; padding-right: .3rem; }
.lw-liste::-webkit-scrollbar { width: 5px; }
.lw-liste::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 5px; }

.lw-eintrag {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .25rem .35rem;
  border-radius: .35rem;
  border: 1px solid transparent;
}
.lw-eintrag.an {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}
.lw-eintrag img { object-fit: contain; }
.lw-name { font-size: .82rem; line-height: 1.25; min-width: 0; }
.lw-name small { font-size: .7rem; }

.lw-stepper { display: flex; align-items: center; gap: .25rem; }
.lw-stepper button {
  width: 1.7rem; height: 1.7rem; padding: 0; line-height: 1;
  font-weight: 700; flex-shrink: 0;
}
.lw-anzahl {
  min-width: 1.3rem; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: .85rem;
}
@media (max-width: 480px) {
  .lw-picker { margin-left: .6rem; }
}

.stromrechner-ergebnis { position: sticky; top: 5rem; }
.stromrechner-euro {
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stromrechner-euro span {
  font-size: .42em;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-left: .2rem;
}

/* ============================================================
   BOOTSTRAP-NACHZUEGLER
   ------------------------------------------------------------
   ACHTUNG, wiederkehrende Falle: css/bootstrap.purged.css enthaelt NUR die Klassen,
   die zum Zeitpunkt des Purge-Laufs irgendwo im Markup standen. Jede Bootstrap-Klasse,
   die neu dazukommt, FEHLT dort – und das faellt nicht auf, weil kein Fehler entsteht:
   der Button ist dann einfach nackter Text, das Grid stapelt, das Input-Suffix haengt
   ausserhalb des Feldes.
   Bevor du eine neue Bootstrap-Klasse benutzt, pruefe:
       grep -c '\.klassenname[^a-z0-9-]' css/bootstrap.purged.css
   Fehlt sie, gehoert sie hier hinein (oder der Purge-Lauf muss wiederholt werden).
   ============================================================ */

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-text-emphasis);
  border-color: var(--bs-primary-text-emphasis);
  color: #fff;
}
.btn-primary:disabled, .btn-primary.disabled { opacity: .55; }

/* Formularelemente */
.form-label { margin-bottom: .3rem; }
.form-range { accent-color: var(--bs-primary); cursor: pointer; }
.form-check { display: flex; align-items: center; gap: .45rem; }
.form-check-input { accent-color: var(--bs-primary); cursor: pointer; margin: 0; flex-shrink: 0; }
.form-check-label { cursor: pointer; margin: 0; }

/* Eingabe mit Einheiten-Suffix: ohne .input-group-text stand das "W" als nackter Text
   NEBEN dem Feld statt als angesetztes Badge. */
.input-group-text {
  display: flex;
  align-items: center;
  padding: .25rem .5rem;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 0;
  border-radius: 0 .375rem .375rem 0;
  color: var(--bs-secondary-color);
  font-size: .875rem;
  white-space: nowrap;
}
.input-group > .form-control { border-radius: .375rem 0 0 .375rem; }
.input-group-sm > .form-control,
.input-group-sm > .input-group-text { padding-block: .2rem; font-size: .8rem; }

/* Tabellen in Fliesstexten.
   .table-responsive fehlte in bootstrap.purged.css - OHNE die Klasse sprengt eine breite
   Tabelle auf dem Handy die Seitenbreite und der ganze Body scrollt seitlich. Das betraf
   auch die bestehenden Infoseiten (Kaufberatung, Proxmox-Hardware), die sie ebenfalls
   benutzen. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Eingefaerbte Tabellenzeilen - in Bootstraps Variablen-Form, NICHT als eigener Selektor.
   bootstrap.purged.css enthaelt bereits .table>:not(caption)>*>* { background-color:
   var(--bs-table-bg) }. Wer stattdessen ".table-danger > * { background-color: ... }"
   schreibt, trifft nur Kinder - die Klasse wirkt dann ausschliesslich auf einem <tr>.
   Das voellig uebliche <td class="table-warning"> bekaeme gar keinen Hintergrund, weil
   "> *" nichts matcht und die eigene background-color der Zelle alles uebermalt.
   Ueber die Variable greift es auf table, thead, tbody, tr UND td - und ohne !important. */
.table-danger  { --bs-table-bg: var(--bs-danger-bg-subtle); }
.table-warning { --bs-table-bg: var(--bs-warning-bg-subtle); }
.table-success { --bs-table-bg: var(--bs-success-bg-subtle); }

.alert-warning {
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
  color: var(--bs-warning-text-emphasis);
}

/* fst-italic fehlt ebenfalls in bootstrap.purged.css. Die Infoseiten markieren damit die
   "k. A."-Zellen (Hersteller veroeffentlicht den Wert nicht); ohne die Regel steht das
   aufrecht da und ist von einem echten Wert nicht mehr zu unterscheiden. versus.php
   benutzt sie fuer "nicht erhoben" genauso. */
.fst-italic { font-style: italic !important; }

/* Messwert-Balken: der Zahlenwert liegt als Overlay ueber der GANZEN Spur, nicht im
   farbigen Balken. Damit ist er auch bei einem 1-%-Balken (z.B. Leerlaufverbrauch 0,03 W
   von 5 W) vollstaendig lesbar - frueher schnitt Bootstrap den Text auf die Balkenbreite ab
   ("0,03" wurde zu "0"). Der Balken behaelt seine EXAKTE Breite; die Skala und damit die
   Vergleichbarkeit auf den Versus-Seiten bleiben voellig unangetastet.
   Der Text-Schatten ist ein Halo in Hintergrundfarbe, damit der Wert sowohl ueber dem
   farbigen Balken als auch ueber der leeren Spur lesbar bleibt - hell/dunkel-tauglich. */
.hw64-bar { position: relative; }
.hw64-bar-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 .6rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  color: var(--bs-emphasis-color);
  text-shadow: 0 0 2px var(--bs-body-bg), 0 0 4px var(--bs-body-bg), 0 0 6px var(--bs-body-bg);
}
/* Auf der Versus-Seite waechst der linke Balken gespiegelt (flex-row-reverse) von rechts
   nach links - dort sitzt der Wert entsprechend links (aussen). */
.hw64-bar-val.start { justify-content: flex-start; }

/* Utilities */
.flex-nowrap  { flex-wrap: nowrap !important; }
.align-middle { vertical-align: middle !important; }
.mt-4 { margin-top: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.alert-light {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* ============================================================
   Duell-Kacheln (Startseite)
   ============================================================ */
.duell-karte { height: 100%; }
.duell-body {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
}
.duell-seite { text-align: center; min-width: 0; flex: 1 1 0; }
.duell-seite img { width: 100%; max-width: 90px; height: 68px; object-fit: contain; }
.duell-seite .dname {
  font-size: .8rem; line-height: 1.25; margin-top: .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.duell-seite .dpreis { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.duell-vs {
  flex: 0 0 auto;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  color: var(--bs-secondary-color);
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px; padding: .3rem .5rem; white-space: nowrap;
}

/* ============================================================
   Vertrauensleiste (Startseite)
   ============================================================ */
.vertrauen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}
.vertrauen .zahl {
  font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--bs-primary);
}
.vertrauen .was { font-size: .8rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) {
  .vertrauen { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .vertrauen .zahl { font-size: 1.25rem; }
}

/* ============================================================
   Produktkarte (Startseite)
   ------------------------------------------------------------
   Eine Struktur, zwei Formen – siehe render_produktkarte() in dbconnect.php.
   ab 768px : Kachel, alle Karten einer Reihe gleich hoch
   unter    : Listenkarte, Bild links
   ============================================================ */

/* --- gemeinsame Basis --- */
.pkarte { overflow: hidden; }

.pkarte-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-tertiary-bg);
  flex: 0 0 auto;
  overflow: hidden;
}
/* Die Bildbuehne braucht eine DEFINITE Hoehe, keine aspect-ratio: als Flex-Item hat sie
   min-height:auto, das Bild druckt die Box also auf seine natuerliche Hoehe auf und die
   aspect-ratio verpufft. Erst mit fester Hoehe loest das max-height:100% des Bildes auf
   und alle Bildflaechen einer Reihe sind exakt gleich hoch. */
.pkarte-bild img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.pkarte-koerper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;              /* sonst sprengen lange Produktnamen die Listenkarte */
}

.pkarte-lieferhinweis {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
  white-space: nowrap;
}

/* ============ ab 768px: gleich hohe Kacheln ============ */
@media (min-width: 768px) {
  .pkarte-bild {
    height: 220px;           /* feste Bildbuehne – vorher variierte die Bildhoehe frei
                                zwischen min-height 150px und max-height 300px und war
                                damit die groesste Einzelursache fuer ungleiche Karten */
    padding: 1rem;
  }

  /* Beschreibung auf drei Zeilen begrenzen (74–190 Zeichen in der DB = 2–4 Zeilen) */
  .pkarte-meta {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Beide Bloecke sind Bootstrap-.card-body und haetten damit von Haus aus flex:1 1 auto –
     dann waechst auch der Button-Block mit, der Button klebt an DESSEN Oberkante und es
     bleibt Leerraum darunter. Nur der Textblock darf den freien Platz schlucken; der
     Button-Block behaelt seine natuerliche Hoehe und wird per margin-top:auto nach unten
     gedrueckt. Erst dadurch liegen die Buttons einer Reihe wirklich auf einer Linie. */
  .pkarte-kopf { flex: 1 1 auto; }
  .pkarte-cta  { flex: 0 0 auto; margin-top: auto; }

  /* Titel auf zwei Zeilen begrenzen (21–59 Zeichen in der DB = 1–3 Zeilen). Sonst
     verschiebt ein dreizeiliger Name alles darunter gegenueber den Nachbarkarten. */
  .pkarte-titel {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pkarte-mobilzeile { display: none; }
}

/* ============ unter 768px: Listenkarte, Bild links ============ */
@media (max-width: 767.98px) {
  .pkarte {
    flex-direction: row;
    align-items: stretch;
  }
  .pkarte-bild {
    flex: 0 0 108px;
    height: 108px;
    padding: .5rem;
  }

  /* Auf dem Handy tragen Name und Preis die Karte. Beschreibung, Highlight-Zeile
     und Shop-Button entfallen – sie machten die Karte ~700px hoch, sodass nur ein
     Produkt pro Bildschirm sichtbar war. */
  .pkarte-meta,
  .pkarte-liste,
  .pkarte-cta { display: none; }

  .pkarte-kopf {
    padding: .65rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1 1 auto;
  }
  .pkarte-titel {
    margin: 0;
    font-size: .95rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pkarte-mobilzeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
  }
  .pkarte-preis {
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }
  .pkarte-note {
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    white-space: nowrap;
  }

  /* Die ganze Karte antippbar machen. Gefahrlos, weil der Button-Block hier
     ausgeblendet ist – auf dem Desktop wuerde das die Shop-Links ueberdecken. */
  .pkarte-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .pkarte { position: relative; }
}
    .btn-youtube {
    background-color: #ff0000; /* YouTube Rot */
    color: #fff;
    font-weight: 600;
    border: none;
  }
  .btn-youtube:hover {
    background-color: #cc0000; /* dunkleres Rot */
    color: #fff;
  }
  .masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  grid-auto-flow: dense;
}
.hover-shadow:hover {
  box-shadow: var(--bs-box-shadow-lg) !important;
  transition: box-shadow 0.2s ease-in-out;
}
table.dataTable thead th {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-weight: bold;
  font-size: 0.8em;
}
table.dataTable tbody tr:hover {
  background-color: var(--bs-secondary-bg);
}
table.dataTable td {
  font-size: 0.9em;
  text-decoration:none;
  text-wrap: wrap;
}
.brand-logo {
  width: 55px;
  height: 55px;
  object-fit: contain;
}
.metric-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: .35rem;
}
.metric-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-body-color);
}
.metric-value {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}

/* Metrik-Balken: einheitlich & theme-aware (ersetzt bg-dark/secondary + Streifen).
   Zentral gestylt, damit es in Light & Dark gut aussieht – ohne die PHP-Templates
   anzufassen. */
.progress {
  background-color: var(--bs-tertiary-bg);
  height: 1.15rem;
  border-radius: .5rem;
  overflow: hidden;
}
.progress .progress-bar {
  background-color: var(--bs-primary) !important;   /* eine konsistente, im Dark Mode sichtbare Farbe */
  color: #fff;
  font-weight: 600;
  font-size: .75rem;
  padding-inline: .5rem;
  white-space: nowrap;
  border-radius: .5rem;
}
.thumb {
cursor: pointer;
border: 2px solid transparent;
border-radius: .5rem;
/* Fix: Zuschneiden statt Verzerren */
width: 96px;
height: 72px; /* 4:3 */
object-fit: contain; /* verhindert Verzerrung */
display: block;
}
.thumb.active,
.thumb:focus-visible {
border-color: var(--bs-primary);
outline: none;
}
.main-image {
border-radius: .75rem;
object-fit: contain; /* verhindert Verzerrung */
cursor:pointer;
}
.stat-card {
  transition: transform 0.3s ease-in-out;
  background-color: var(--bs-stat-card);
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-card i {
  transition: transform 0.3s ease-in-out;
}

.stat-card:hover i {
  transform: scale(1.1);
}
.btn-geizhals {
    background-color: #005AA0; /* Geizhals-Blau */
    color: #fff;
	font-weight: 600;
    border: none;
}
.btn-geizhals:hover {
    background-color: #004080;
    color: #fff;
}
.btn-amazon {
  background-color: #ff9900; /* Amazon-Orange */
  color: #444;
  font-weight: 600;
  border: none;
}
.btn-amazon:hover {
  background-color: #e68a00; /* etwas dunkler beim Hover */
  color: #fff;
}

/* Einheitlicher Bildbereich links */
.search-thumb {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: var(--bs-tertiary-bg);
}

/* Bild bleibt im Format */
.search-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Dropdown-Item mit Hover */
.dropdown-item.search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem;
  transition: background-color 0.15s ease-in-out;
}

.dropdown-item.search-item:hover,
.dropdown-item.search-item:focus {
  background-color: rgba(0, 123, 255, 0.08);
}

/* Textbereich */
.search-text {
  line-height: 1.2;
}
.object-fit-cover {
  object-fit: cover;
}

/* Dark Mode: monochrome/dunkle Logos sichtbar machen (gleiche Form, weiß) */
[data-bs-theme="dark"] .navbar-logo,
[data-bs-theme="dark"] .footer-logo-mono {
  filter: brightness(0) invert(1);
}

/* Navbar-Logo (Hauptseite): echte Weiß-Text-Variante im Dark Mode statt Filter,
   damit der orange Akzent erhalten bleibt */
.navbar-logo-dark { display: none; }
[data-bs-theme="dark"] .navbar-logo-light { display: none; }
[data-bs-theme="dark"] .navbar-logo-dark { display: inline-block; }

/* ── amzly Preis-Badge (dunkler amzly-Plugin-Look — faellt auch im Hell-Modus auf) ── */
.amzly-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem .82rem; margin:.2rem 0;
  font-size:.875rem; line-height:1.2; font-weight:600; white-space:nowrap;
  text-decoration:none; vertical-align:middle;
  color:#f3f3f8; background:linear-gradient(#1b1b24,#141419);
  border:1px solid #2e2e3c; border-radius:12px;
  box-shadow:0 3px 12px rgba(0,0,0,.22);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.amzly-badge:hover{ color:#fff; transform:translateY(-1px); border-color:#fbbf24; box-shadow:0 6px 18px rgba(251,191,36,.30); }
.amzly-badge__logo{ height:15px; width:auto; flex:0 0 auto; display:block; }
.amzly-badge__dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:#9ca3af; }
.amzly-badge__label{ font-weight:700; }
.amzly-badge__pct{ color:#a7adba; font-weight:500; font-size:.82em; font-variant-numeric:tabular-nums; }
.amzly-badge--great   .amzly-badge__dot{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.22); }
.amzly-badge--good    .amzly-badge__dot{ background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.20); }
.amzly-badge--average .amzly-badge__dot{ background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.22); }
.amzly-badge--high    .amzly-badge__dot{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.22); }
.amzly-badge--unknown .amzly-badge__dot{ background:#9ca3af; }
[data-bs-theme="dark"] .amzly-badge{ background:linear-gradient(#24242f,#1b1b24); border-color:#606074; }

/* ── Footer-Partnerlogos: echte Hell/Dunkel-Paare ─────────────────────────────
   Jedes Logo (ipv64, cloudrouter64, amzly) liegt in zwei Dateien vor: dunkel gefaerbt
   fuer den Hell-Modus, weiss fuer den Dark-Modus. Der orange Akzent bleibt so in BEIDEN
   Themes erhalten - besser als ein CSS-Filter, der ihn schluckt. Gleiche Umschalt-
   Mechanik wie die Navbar-Logos: im Dark-Modus wird das helle aus- und das dunkle
   (weisse) Logo eingeblendet. */
.footer-logo { display: inline-block; vertical-align: middle; }
.footer-logo-dark { display: none; }
[data-bs-theme="dark"] .footer-logo-light { display: none; }
[data-bs-theme="dark"] .footer-logo-dark { display: inline-block; }