/* Komponenten – ausschließlich semantische Tokens (Ausnahme: Dev-Overlay am Dateiende). */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding: var(--space-xs) var(--space-lg);
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration) var(--ease);
}
.btn--primary { background: var(--c-brand-strong); color: var(--c-on-brand-strong); }
.btn--secondary { background: transparent; color: var(--c-brand-ink); border-color: currentColor; }
/* Invertiert auf Markenflächen: Hero-Claim-Fläche und .section--deep setzen --btn-inverse-bg/-fg */
.btn--inverse { background: var(--btn-inverse-bg, var(--c-surface)); color: var(--btn-inverse-fg, var(--c-ink)); }
.btn:hover { transform: translateY(-1px); }

/* Icons (Lucide, ISC – Lizenz: bundle/assets/js/icons/LICENSE). Farbe kommt über currentColor. */
.icon {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bilder (picture()): Bild füllt den Rahmen, Ausschnitt über object-position aus dem Fokuspunkt */
.picture {
  display: block;
  overflow: hidden;
}
.picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Chips: statisch gefüllt (Tönung 1 + ink). Als Link umrandet – deshalb nur auf Weiß (Linie auf Tönung < 3:1). */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2rem;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--c-brand-tint-1);
  color: var(--c-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
}
/* Gefuelltes Icon statt Umrisslinie (Art-Director-Wunsch 17.09.2026 fuer den Blitz im Bewerben-Knopf).
   fill: currentColor statt einem festen Weiss - der Knopf faerbt seine Schrift je nach Markenfarbe hell oder
   dunkel, und ein hart gesetztes Weiss waere auf einer hellen Marke unsichtbar. stroke: none, weil die
   Umrisslinie die gefuellte Form sonst zusaetzlich verdickt. */
.icon--filled {
  fill: currentColor;
  stroke: none;
}

/* Jobkarten (Job-Schnellsuche, ab M3 Jobliste): flach auf Tönung, ohne Schatten, die ganze Karte ist der Link */
.job-cards {
  display: grid;
  gap: var(--space-md);
  /* Alle Karten gleich hoch, auch ueber Zeilen hinweg (Art-Director-Entscheidung 17.09.2026).
     Ein Raster streckt von sich aus nur innerhalb einer Zeile: Eine Zeile mit zweizeiligen Titeln
     stand dadurch hoeher als die Zeile darueber. grid-auto-rows: 1fr gibt allen Zeilen dieselbe Hoehe,
     sie richtet sich nach der inhaltsreichsten Karte. */
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  /* Reserviert rechts Platz für den Pfeilkreis, der als eigenes, absolut positioniertes Element in dieser
     Ecke sitzt (siehe .job-card__arrow) – Titel und Meta-Liste laufen dadurch nie unter ihn. */
  padding-inline-end: calc(var(--touch) + var(--space-lg) * 2);
  border-radius: var(--radius-md);
  background: var(--c-brand-tint-1);
  color: var(--c-ink);
  transition: background-color var(--duration) var(--ease);
}
.job-card:hover { background: var(--c-brand-tint-2); }
.job-card__title {
  font-size: var(--text-sub);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.job-card__link { text-decoration: none; }
.job-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}
.job-card__meta {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  color: var(--c-ink-muted);
}
.job-card__meta dd {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}
/* Pfeil im Kreis: reine Deko (aria-hidden), Hinweis darauf, dass die ganze Karte der Link ist. Unten rechts
   in der Karten-Ecke statt vertikal zentriert – absolut positioniert gegen die Karte (position: relative),
   nicht über eine Grid-Spalte: alle Karten werden von .job-cards auf dieselbe Höhe gestreckt,
   und ein am Zeilenumbruch von Titel/Meta ausgerichteter Pfeil bliebe bei einer kurzinhaltigen Karte weit
   über der wirklichen Kartenkante hängen (gemessen bei einzeiligem Titel neben zweizeiligen Nachbarn).
   Absolut gegen die Karte verankert bleibt er immer an der echten Ecke, ob der Titel auf drei Zeilen
   umbricht oder die Meta-Liste kurz ist. */
.job-card__arrow {
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-brand-ink);
  /* Rein dekorativ (aria-hidden) und liegt über .job-card__link::after – ohne pointer-events: none fängt der
     Kreis Klicks in seiner eigenen Fläche ab, bevor sie den gestreckten Kartenlink erreichen. */
  pointer-events: none;
}
/* Fokusring auf der ganzen Karte; ohne :has()-Unterstützung bleibt der normale Ring am Link */
@supports selector(:has(*)) {
  .job-card__link:focus-visible {
    outline: none;
    box-shadow: none;
  }
  .job-card:has(.job-card__link:focus-visible) {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--c-focus-contrast);
  }
}

@media (min-width: 48em) {
  .job-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .job-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line-subtle);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
}
.site-header__logo { display: inline-flex; align-items: center; min-height: var(--touch); flex-shrink: 1; min-width: 0; }
.site-header__logo img { width: auto; height: clamp(1.75rem, 1rem + 3.5vw, 2.75rem); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; }
.site-header__actions .btn { padding-inline: var(--space-md); }
/* Menue mit Sprungmarken (Art-Director-Wunsch 17.09.2026): am Schreibtisch eine offene Linkzeile, auf dem
   Telefon ein Burger mit kleinem Popup. Gerendert wird <details OPEN>; erst das Skript klappt es auf schmalen
   Fenstern zu. Ein geschlossenes <details> laesst sich per CSS nicht zuverlaessig wieder oeffnen - waere zu
   ein Vorgabe, stuende ohne JavaScript am Schreibtisch ein Burger, der nichts oeffnet.
   Reihenfolge im Kopf: Sprachwahl, Menue, Jobs-Knopf - sie ergibt sich aus der Markup-Reihenfolge. */
.site-header__menu { position: relative; }
/* Am Schreibtisch steht die Zeile mittig ZWISCHEN Logo und Sprachwahl (Art-Director-Wunsch 17.09.2026):
   margin-inline: auto verteilt den uebrigen Platz gleichmaessig links und rechts der Zeile. Bewusst nicht
   auf die Fenstermitte ausgerichtet - Logo und rechte Gruppe sind verschieden breit, eine Fenstermitte
   saehe daneben schief aus. */
.site-header__menu-nav { margin-inline: auto; }
/* Am Schreibtisch gibt es keinen Burger, die Zeile steht offen da. */
.site-header__burger { display: none; }
.site-header__menu-list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header__menu-link {
  display: inline-flex;
  /* Spalte statt Zeile, damit der unsichtbare Fett-Zwilling unten UNTER dem Text liegt statt neben ihm. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  color: var(--c-ink);
  text-decoration: none;
}
/* Ueberfahren macht den Punkt halbfett, der aktive Abschnitt fett - keine Unterstreichung mehr
   (Art-Director-Entscheidung 21.09.2026). */
.site-header__menu-link:hover,
.site-header__menu-link:focus-visible { font-weight: 600; }
.site-header__menu-link[aria-current="true"] { font-weight: 700; }
/* Fettung aendert die Textbreite und wuerde beim Ueberfahren alle Nachbarn verschieben. Der unsichtbare
   Zwilling reserviert von vornherein die Breite des fettesten Zustands, damit nichts springt. */
.site-header__menu-link::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  font-weight: 700;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 63.999em) {
  /* Auf dem Telefon steht der Burger ZWISCHEN Sprachwahl und Jobs-Knopf. Da beide in der rechten Gruppe
     liegen und der Burger daneben, wird die Gruppe aufgeloest (display: contents) - dann sind alle drei
     Geschwister im selben Flexcontainer und lassen sich per order anordnen. */
  .site-header__actions { display: contents; }
  .site-header__langs { order: 1; margin-inline-start: auto; }
  .site-header__menu-nav { order: 2; margin-inline: 0; }
  .site-header__actions > .btn { order: 3; }
  .site-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--touch);
    min-block-size: var(--touch);
    border-radius: var(--radius-sm);
    color: var(--c-ink);
    cursor: pointer;
    /* Das Dreieck des <summary> entfernen - der Burger ist das Zeichen. */
    list-style: none;
  }
  .site-header__burger::-webkit-details-marker { display: none; }
  .site-header__menu[open] .site-header__menu-list {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + var(--space-xs));
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-inline-size: 12rem;
    padding: var(--space-xs);
    /* Linie statt Schatten: Die Designrichtung des Projekts ist Flaechen statt Schatten - ein Schlagschatten
       waere hier der einzige im ganzen Bundle. */
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    background: var(--c-surface);
  }
  .site-header__menu[open] .site-header__menu-link {
    padding-inline: var(--space-sm);
    inline-size: 100%;
  }
}

/* Sprachumschalter: natives <details>/<summary>, funktioniert ohne JavaScript und ohne ARIA-Menu-Pattern.
   .site-header__lang ist damit selbst die Positionierungs-Referenz für die offene Liste (position: relative). */
.site-header__lang { position: relative; }
.site-header__lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: var(--touch);
  min-height: var(--touch);
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-sm);
  color: var(--c-ink-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.site-header__lang-toggle::-webkit-details-marker { display: none; }
.site-header__lang-toggle:hover { color: var(--c-ink); }
/* Kleines Dreieck als Aufklapp-Hinweis statt der (browserabhängigen) nativen Markierung – kein Icon, kein Farbverlauf, keine Schatten. */
.site-header__lang-toggle::after {
  content: '';
  inline-size: 0;
  block-size: 0;
  border-inline-start: 0.25rem solid transparent;
  border-inline-end: 0.25rem solid transparent;
  border-block-start: 0.3125rem solid currentColor;
}
/* Liste liegt über dem Inhalt statt das Header-Layout zu verschieben; rechtsbündig zum Auslöser, damit sie bei 320 px nicht überläuft. */
.site-header__lang-list {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  display: grid;
  margin-block-start: var(--space-2xs);
  padding: var(--space-2xs);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.site-header__lang-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: var(--touch);
  min-height: var(--touch);
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-sm);
  color: var(--c-ink-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
a.site-header__lang-item:hover { color: var(--c-ink); text-decoration: underline; }
.site-header__lang-item[aria-current="true"] { color: var(--c-ink); }
/* Runde Flaggen ohne Haarlinie – konsistent mit dem Siegel (.cp-seal), das ebenfalls ohne Rahmen/Ring auskommt. */
.site-header__lang-flag {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

@media (min-width: 64em) {
  .site-header__actions { gap: var(--space-sm); }
  .site-header__actions .btn { padding-inline: var(--space-lg); }
}

/* Footer */
.site-footer {
  padding-block: var(--space-xl);
  background: var(--c-brand-deep);
  color: var(--c-on-brand-deep);
}
.site-footer__inner { display: grid; gap: var(--space-xl); }
.site-footer__main { display: grid; align-content: start; justify-items: start; gap: var(--space-lg); }
/* Logo und Firmenangaben links, die Linkspalte der Unternehmensseite ab 48em rechts daneben, darunter gestapelt.
   width: 100 % ist nötig, weil .site-footer__main seine Kinder mit justify-items: start auf Inhaltsbreite zieht. */
.site-footer__top {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
}
.site-footer__brand { display: grid; align-content: start; justify-items: start; gap: var(--space-md); }
.site-footer__logo img { width: auto; height: 2.5rem; }
.site-footer__logo--tile { padding: var(--space-xs) var(--space-sm); background: var(--c-surface); border-radius: var(--radius-sm); }
/* Pflichtangaben des Unternehmens. <address> ist standardmäßig kursiv – das nehmen wir zurück. */
.site-footer__address {
  display: grid;
  justify-items: start;
  font-style: normal;
  color: var(--c-on-brand-deep-muted);
}
.site-footer__legal-name { color: var(--c-on-brand-deep); }
.site-footer__contact {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--c-on-brand-deep);
}
.site-footer__list {
  display: grid;
  justify-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__list a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--c-on-brand-deep); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--c-on-brand-deep); }
.site-footer__meta { color: var(--c-on-brand-deep-muted); font-size: var(--text-sm); }
/* Footer-Links tragen im Ruhezustand keine Linie und bekommen sie erst beim Ueberfahren
   (Art-Director-Entscheidung 21.09.2026). Der Fokusring kommt weiterhin aus base.css und bleibt unberuehrt. */
.site-footer__contact,
.site-footer__list a,
.site-footer__links a { text-decoration: none; }
.site-footer__contact:hover,
.site-footer__list a:hover,
.site-footer__links a:hover,
.site-footer__contact:focus-visible,
.site-footer__list a:focus-visible,
.site-footer__links a:focus-visible { text-decoration: underline; }
/* Siegel-Block: großes Siegel, zwei Sätze zu ChancenPlus+ und zwei Links (Prüfseite, chancenplus.de) */
/* Abgesetzte Box (Art-Director-Wunsch 21.09.2026): Der Siegelblock bekommt eine eigene Flaeche und runde
   Ecken. Die Trennung kommt aus Flaeche und Radius, NICHT aus einem Schatten - so steht es in der
   Design-Richtung. Abgedunkelt statt aufgehellt, weil heller Text darauf dadurch mehr Kontrast bekommt
   statt weniger. color-mix laesst die Flaeche jeder Mandantenfarbe folgen, ohne einen festen Farbwert. */
.site-footer__seal {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-scrim) 22%, transparent);
  /* Die Knoepfe stehen auf der dunklen Flaeche, also invertiert - wie auf der Hero-Claim-Flaeche. */
  --btn-inverse-bg: var(--c-on-brand-deep);
  --btn-inverse-fg: var(--c-brand-deep);
}
.site-footer__seal-body { display: grid; gap: var(--space-md); }
/* Eigene Klasse statt .site-footer__list: Die traegt auch die Unternehmenslinks, die hier nichts mitbekommen sollen.
   Flex MIT Umbruch, nicht feste Spalten: Die Knoepfe stehen nebeneinander, sobald sie nebeneinander PASSEN,
   und rutschen sonst von selbst untereinander. Mit grid-auto-flow: column taten sie das nicht - auto-Spalten
   schrumpfen nicht, und bei 768 px ragte die Zeile dadurch 106 px aus der Seite (gemessen 21.09.2026). */
.site-footer__seal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Untereinander, nicht nebeneinander: In der rechten Footerspalte stehen neben dem 120-px-Siegel rund
     400 px zur Verfuegung, Knopf (173 px) und Textlink (204 px) brauchen mit Abstand mehr. Ein knapperer
     Abstand aendert daran nichts - am 21.09.2026 gemessen und wieder zurueckgebaut. flex-wrap faengt den
     Umbruch sauber ab, es ragt nichts aus der Seite. */
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Zertifikat pruefen: nur umrandet, erst beim Ueberfahren fuellt sich die Flaeche
   (Art-Director-Wunsch 21.09.2026). Kompakter als ein normaler Knopf, aber NICHT unter 44 px -
   das ist die Mindestgroesse fuer Touch-Ziele aus den Projektvorgaben. */
.site-footer__seal-verify {
  min-height: var(--touch);
  padding-inline: var(--space-md);
  background: transparent;
  color: var(--c-on-brand-deep);
  border-color: currentColor;
}
.site-footer__seal-verify:hover,
.site-footer__seal-verify:focus-visible {
  background: var(--c-on-brand-deep);
  color: var(--c-brand-deep);
}
/* Mehr ueber ChancenPlus+ ist bewusst KEIN Knopf mehr: Zwei gleichwertige Knoepfe nebeneinander
   konkurrierten miteinander, statt eine Rangfolge zu zeigen. Jetzt ein schlichter Textlink. */
.site-footer__seal-more {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--c-on-brand-deep);
  text-decoration: none;
}
.site-footer__seal-more:hover,
.site-footer__seal-more:focus-visible { text-decoration: underline; }
.site-footer__seal-text {
  max-width: 36rem;
  color: var(--c-on-brand-deep-muted);
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  /* Ohne Linkspalte (kein companyLinks-Eintrag) bleibt keine leere zweite Spalte stehen. */
  .site-footer__top:not(:has(.site-footer__company)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-footer__seal {
    /* Kompakt in der rechten Spalte (Art-Director-Entscheidung 21.09.2026), NICHT ueber die volle Breite.
       Bewusst in Kauf genommen: Neben dem 120-px-Siegel bleiben hier nur rund 400 px, waehrend die beiden
       Knoepfe zusammen 407 px braeuchten - sie stehen deshalb untereinander. Das ist kein Fehler und
       braucht keine Reparatur; flex-wrap in .site-footer__seal-actions faengt es ab, ohne dass etwas aus
       der Seite ragt. Wer sie nebeneinander will, muss die Box ueber beide Spalten ziehen. */
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
  }
}

/* ChancenPlus+-Siegel (fest, nicht abschaltbar) */
.cp-seal {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  border-radius: 50%;
}
.cp-seal img { width: 2.5rem; height: 2.5rem; }
/* .cp-seal--footer.cp-seal (statt nur .cp-seal--footer) macht die Regel so spezifisch wie die gehärtete
   Hero-Regel (.cp-seal--hero.cp-seal in sections.css) – die Siegel-Größe hängt so nicht mehr davon ab,
   in welcher Reihenfolge diese Datei und sections.css im HTML verlinkt sind. */
.cp-seal--footer.cp-seal img { width: 7.5rem; height: 7.5rem; }

/* 404 */
.not-found h1 { font-size: var(--text-h1); }

/* Dev-only: Platzhalter für Bereiche ohne Renderer + Prüfbericht. Feste Farben, weil nicht mandantenbezogen. */
.dev-missing {
  margin: var(--space-md) var(--gutter);
  padding: var(--space-lg);
  border: 2px dashed var(--c-line);
  border-radius: var(--radius-md);
  color: var(--c-ink-muted);
  text-align: center;
}
.dev-overlay {
  position: fixed;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: var(--z-overlay);
  width: min(30rem, calc(100vw - 2 * var(--space-sm)));
  max-height: 60vh;
  overflow: auto;
  padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-md);
  border-left: 6px solid #1EBD53;
  border-radius: 8px;
  background: #111214;
  color: #FFFFFF;
  font: 0.875rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.35);
}
.dev-overlay[data-state="error"] { border-left-color: #FF5A5F; }
.dev-overlay summary { display: flex; align-items: center; min-height: var(--touch); cursor: pointer; }
.dev-overlay__close {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--touch);
  height: var(--touch);
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 1.25rem;
  cursor: pointer;
}
.dev-overlay__list { margin: 0; padding-left: 1.1rem; }
.dev-overlay__item { margin-block: var(--space-xs); }
.dev-overlay__item[data-level="error"] code { color: #FF8A8E; }
.dev-overlay__item[data-level="warning"] code { color: #FFD166; }
.dev-overlay__tenants { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-sm); }
.dev-overlay__tenants a { display: inline-flex; align-items: center; min-height: var(--touch); padding-inline: var(--space-sm); border: 1px solid #FFFFFF; border-radius: 6px; color: #FFFFFF; }
.dev-overlay__tenants a[aria-current="page"] { background: #FFFFFF; color: #111214; }