/* ═══════════════════════════════════════════════════════════════════════════
   Korrekturen für den alten Seitenbaum

   Wird nur von der Site "alt" geladen (Site-Set kreiswaf/liesborn-altbestand),
   und zwar NACH liesborn.css. Hier steht ausschließlich, was Bootstrap 3 dem
   Designsystem trotz der Ladereihenfolge noch abnimmt — nämlich Regeln, die
   spezifischer sind als ihr Gegenstück in liesborn.css.

   Wer hier etwas ergänzt: erst die Spezifität nachrechnen. Eine Regel, die
   Bootstrap nur mit gleicher Spezifität begegnet, gehört nicht hierher,
   sondern gewinnt schon durch die spätere Ladung von liesborn.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die beiden Kästen aus dem Redaktionstext des Altbestands.

   Ihre Gestaltung stand in der alten Vorlagen-CSS
   (fileadmin/templates/liesborn/unify/assets/css/rte.css), die mit dem
   Seitenlayout abgeschaltet wurde — 51 Absätze „farbigeBox" und die grauen
   Kästen standen seitdem unformatiert da. Werte von dort übernommen.

   Eine Abweichung ist Absicht: Die alte Fassung setzte auf #c7d6b7 WEISSE
   Schrift — 1,53:1, faktisch unlesbar. Hier steht --ink darauf (9,42:1).

   Muss mit rte-altbestand.css übereinstimmen, das dieselbe Gestaltung für die
   Vorschau im Editor mitbringt. */
.frame p.farbigeBox,
.frame p.graueBox {
    padding: 12px 14px;
    margin: 12px 0;
    border: 1px solid #939598;
    color: var(--ink);
}
.frame p.farbigeBox {
    background: #c7d6b7;
    border-color: #293d29;
}
.frame p.graueBox { background: #d1d3d4; }

/* Unterstrich beim Überfahren, den Bootstrap zurückholt.

   liesborn.css nimmt allen Flächen-Links den Unterstrich — aber nur über die
   Klasse, also mit (0,1,0). Bootstrap ist mit

       a:focus, a:hover { text-decoration: underline }      (0,1,1)

   spezifischer und gewinnt, sobald die Maus darüber steht. Sichtbar wurde das
   zuerst im Hauptmenü (dünne Linie zusätzlich zum Goldbalken) und dann an der
   Verteilerkarte; betroffen sind aber alle Klassen unten — die Themenzeile kam am
   15.09.2026 dazu, sie war beim Nachtragen des Bausteins vergessen worden, am selben Tag
   Suchtreffer und Blätterung der Suche — nachgerechnet
   gegen a:hover.

   Die Selektoren tragen deshalb den Elementnamen mit: "a.karte__flaeche:hover"
   ist (0,2,1) und schlägt Bootstrap sicher. Wer hier einen Baustein ergänzt:
   Erst die Spezifität nachrechnen, eine reine Klassenregel genügt nicht. */
a.brand:hover, a.brand:focus,
a.skiplink:hover, a.skiplink:focus,
a.btn:hover, a.btn:focus,
a.btn--suche:hover, a.btn--suche:focus,
.hauptmenue__link:hover, .hauptmenue__link:focus,
.untermenue__link:hover, .untermenue__link:focus,
a.slider-hero__flaeche:hover, a.slider-hero__flaeche:focus,
a.kachel__flaeche:hover, a.kachel__flaeche:focus,
a.karte__flaeche:hover, a.karte__flaeche:focus,
a.sammlungskarte:hover, a.sammlungskarte:focus,
a.termin__flaeche:hover, a.termin__flaeche:focus,
a.aufzaehlungseintrag__flaeche:hover, a.aufzaehlungseintrag__flaeche:focus,
a.themenzeile__flaeche:hover, a.themenzeile__flaeche:focus,
a.suchtreffer__inhalt:hover, a.suchtreffer__inhalt:focus,
a.suche__seite:hover, a.suche__seite:focus {
    text-decoration: none;
}

/* Der Fokusrahmen ist nach BITV Pflicht und im Entwurf gold.

   Bootstrap greift ihn an zwei Stellen an, die spezifischer sind als das
   :focus-visible (0,1,0) aus liesborn.css:

       a:focus                                     (0,1,1)
       .btn:focus / .btn:active:focus              (0,2,0) / (0,3,0)

   Beide setzen "outline: 5px auto -webkit-focus-ring-color". Diesen Wert
   kennt nur WebKit; in Firefox ist die ganze Deklaration ungültig und es
   bliebe der Ring des Browsers statt des gestalteten.

   Die Selektoren unten treffen jeweils dieselbe Spezifität und stehen später
   — damit gewinnen sie. */
a:focus-visible,
.btn:focus-visible,
.btn.active:focus-visible,
.btn:active:focus-visible {
    outline: 3px solid var(--gold-deep);
    outline-offset: 2px;
}

/* Bootstrap zeigt den Ring schon bei :focus, also auch nach einem Mausklick.
   Das Designsystem zeigt ihn nur bei Tastaturbedienung. */
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn.active:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible) {
    outline: none;
}