/* Bunkerlinge brand.css — NUR Marken-Tokens + Nicht-Karten-Layout.
   Relearn-Default-Font (proportional), Marke #7DC903, Ueberschriften #f5f5f5 linksbuendig.
   Content links angeschlagen: Breite via --MAIN-WIDTH-MAX + Margin-Flip auf #R-body .flex-block-wrapper.
   >>> KARTEN: alle .card-container-Regeln leben in cards.css (Single-Home, Bibel §4.1).
       Vorher standen sie in BEIDEN Dateien; brand.css laedt spaeter und hat cards.css
       still ueberstimmt (align-items:start !important killte 'gleich hohe Karten'). Nie wieder hier. */
:root{
  --bl-green:#7DC903;
  --bl-glow:rgba(125,201,3,.5); --bl-glow-hover:rgba(125,201,3,.8); --bl-glow-soft:rgba(125,201,3,.3);
  --bl-surface:#1a1a1a; --bl-box-radius:14px;
  --bl-text:#fff; --bl-text-2:#ccc; --bl-muted:#888; --bl-title:#f5f5f5;
  --MAIN-WIDTH-MAX:120rem;
  --MAIN-LINK-color:var(--bl-green); --MAIN-LINK-HOVER-color:var(--bl-green);
  --MENU-SECTIONS-LINK-color:var(--bl-text-2); --MENU-SECTIONS-LINK-HOVER-color:var(--bl-green);
  --MENU-SECTION-ACTIVE-CATEGORY-color:var(--bl-green);
}
#R-body h1,#R-body h2,#R-body h3,#R-body h4,#R-body h5,#R-body h6,
.article h1,.article h2,.article h3,.article h4{ color:var(--bl-title) !important; background:transparent !important; text-align:left !important; text-transform:none !important; }
#R-body p,#R-body li{ color:var(--bl-text-2); }
@media(min-width:48rem){
  #R-body #R-body-inner .flex-block-wrapper,#R-body .flex-block-wrapper{ margin-left:0 !important; margin-right:auto !important; }
  #R-body #R-body-inner{ padding-left:4rem !important; padding-right:4rem !important; }
}
a.autolink,#R-content a{ color:var(--bl-green); }
a.autolink:hover,#R-content a:hover{ color:var(--bl-green); text-decoration:underline; }
.breadcrumbs{ font-size:.8rem; color:var(--bl-muted); text-align:left; }
.breadcrumbs a{ color:var(--bl-muted) !important; text-decoration:none; }
.breadcrumbs a:hover{ color:var(--bl-green) !important; }
.breadcrumbs li:last-child,.breadcrumbs span:last-child{ color:var(--bl-title); font-weight:700; }
#R-sidebar #R-menu ul li a{ color:var(--bl-text-2) !important; }
#R-sidebar #R-menu ul li a:hover{ color:var(--bl-green) !important; }
#R-logo{ display:flex; align-items:center; padding:.55rem .7rem; min-height:64px; }
#R-logo .logo-image{ display:flex; align-items:center; }
:root{ --LOGO-IMAGE-width:12rem; }
#R-logo .bl-logo{ display:block; width:100%; height:auto; }
@media@media(max-width:767px){ :root{ --LOGO-IMAGE-width:9rem; } }
@media only screen and (max-width:47.999rem){ #R-body #R-body-inner{ padding-left:1rem !important; padding-right:1rem !important; } }
#R-body #R-body-inner,#R-body #R-body-inner p,#R-body #R-body-inner li,#R-body #R-body-inner h1,#R-body #R-body-inner h2,#R-body #R-body-inner h3,#R-body #R-body-inner h4,#R-body #R-body-inner h5,#R-body #R-body-inner h6{ -webkit-hyphens:none !important; hyphens:none !important; }
#R-body-inner>.flex-block-wrapper article h1{ font-size:2.2rem !important; font-weight:700 !important; line-height:1.2; margin-bottom:1.5rem; }
#R-body-inner>.flex-block-wrapper article h2{ font-size:1.6rem !important; font-weight:700 !important; line-height:1.25; }
#R-body-inner>.flex-block-wrapper article h3{ font-size:1.25rem !important; font-weight:700 !important; }
@media only screen and (max-width:47.999rem){ #R-body-inner>.flex-block-wrapper article h1{ font-size:1.5rem !important; } #R-body-inner>.flex-block-wrapper article h2{ font-size:1.25rem !important; } #R-body-inner>.flex-block-wrapper article h3{ font-size:1.1rem !important; } }
/* brand-eof-marker-4 */

/* Tap-Targets Menue-Expander (mobil). Gemessen 2026-07-16 an theme.min.css:
   label + input je width:1rem (~16px), Chevron .8rem, Link direkt daneben (.padding{0 1rem})
   -> zu klein fuer Finger, kein Abstand -> Fehltap auf den Link statt auf den Expander.
   Breakpoint 47.999rem = Relearns eigener (nicht erfunden). Spezifitaet == Theme,
   brand.css laedt spaeter -> gewinnt ohne !important. */
@media screen and (max-width:47.999rem){
  #R-sidebar ul.collapsible-menu>li>label{ width:2.5rem; padding-block:.55rem; padding-inline-start:.6rem; }
  #R-sidebar ul.collapsible-menu>li>input{ width:2.5rem; height:2.5rem; margin-top:0; }
  #R-sidebar ul.collapsible-menu>li>label>.fas{ font-size:1rem; width:1rem; }
  #R-sidebar ul.collapsible-menu>li>:is(a,span){ padding-inline-start:2.75rem; padding-block:.45rem; }
}

/* Wurzel-Ebene der Sidebar. Gemessen 2026-07-16: ul = "enlarge morespace collapsible-menu",
   Kinder-uls = nur "collapsible-menu". Das Theme hat fuer .enlarge EIGENE Regeln
   (ul.collapsible-menu.enlarge>li>label{line-height:2rem} / >input{margin-top:.9rem}) mit
   Spezifitaet (1,3,1) — der Block darueber ist (1,2,1) und verliert dort. Darum hier
   dieselbe Geometrie eine Klasse hoeher nachgezogen. */
@media screen and (max-width:47.999rem){
  #R-sidebar ul.collapsible-menu.enlarge>li>label{ width:2.5rem; line-height:normal; padding-block:.55rem; padding-inline-start:.6rem; }
  #R-sidebar ul.collapsible-menu.enlarge>li>input{ width:2.5rem; height:2.5rem; margin-top:0; }
  #R-sidebar ul.collapsible-menu.enlarge>li>label>.fas{ font-size:1rem; width:1rem; }
  #R-sidebar ul.enlarge.collapsible-menu>li>:is(a,span){ padding-inline-start:2.75rem; }
}

/* ── SUCHE ── Gruen ist RESERVIERT fuer das Suchwort. Sonst nichts gruen.
   Gemessen 2026-07-16: ein Treffer ist EIN <a class="autocomplete-suggestion"> mit
   #R-html .autocomplete-suggestion{color:var(--VARIABLE-LINK-color)} = Marken-Gruen.
   Titel, Breadcrumb-Pfad (>.breadcrumbs) und Beschreibung (>.context) sind Kinder darin
   und erbten es -> die ganze Trefferliste war gruen. Damit sagte Gruen zwei Dinge
   gleichzeitig ("Link" und "dein Suchwort") und beides war wertlos.
   Also: Trefferliste weiss/grau, Gruen nur fuer mark. Der Titel bleibt ohne Farbe als Link
   erkennbar (1.3rem, halbfett, "»", Trefferliste); Hover faerbt gruen.
   Kinder-Namen sind der Theme-Kontrakt (theme.min.css) — die Liste baut search.min.js
   client-seitig, im HTML steht sie nicht. */
#R-html .autocomplete-suggestion{ color:var(--bl-title); }
#R-html .autocomplete-suggestion:hover{ color:var(--bl-green); }
#R-searchresults .autocomplete-suggestion>.breadcrumbs{ color:var(--bl-muted); }
#R-searchresults .autocomplete-suggestion>.context{ color:var(--bl-text-2); }

/* Suchwort-Hervorhebung: gruener Schleier, Schrift bleibt hell.
   Ersetzt den Theme-Textmarker (theme.min.css). Dessen Gradient blendet nach rechts auf 40%
   aus -> auf dunklem Grund ein Fleck, egal in welcher Farbe. Und sein color:#000 ist hart:
   Schwarz ist hier die HINTERGRUNDfarbe, ein schwarzes Wort waere ein Loch.
   WARUM SCHLEIER statt voller Flaeche: eine volle Flaeche erzwingt dunkle Schrift
   (weiss auf vollem #7DC903 = 2:1, unlesbar). 28% Gruen ueber dunklem Grund traegt weisse
   Schrift mit ~9,7:1 und ist trotzdem eindeutig gruen. Das ist Kontrast-Rechnung, keine Vorliebe.
   color:var(--bl-text) erzwingt Helligkeit auch auf gruenen Autolinks im Artikel.
   Spezifitaet 0,0,1 == Theme, brand.css laedt zuletzt -> gewinnt ohne !important.
   theme.js markiert Teilstrings ("Mitovirus") -> nicht per CSS loesbar, haengt am Matcher. */
mark{
  background:rgba(125, 201, 3, .28);
  color:var(--bl-text);
  border-radius:.15rem;
  padding:0 .15em;
  margin:0;
  box-shadow:none;
  text-decoration:none;
}

/* DESKTOP-PFEIL-ABSTAND — nur Desktop (>=48rem), damit die mobile @media-Regel (2.75rem) unberuehrt bleibt.
   Wurzel-ul traegt .enlarge (Hauptmenue), Kinder-uls nicht — Spezifitaetsfalle §4.1. Kein !important. */
@media (min-width:48rem){
  #R-sidebar ul.collapsible-menu>li>:is(a,span){ padding-inline-start:1.4rem; }
  #R-sidebar ul.enlarge.collapsible-menu>li>:is(a,span){ padding-inline-start:1.4rem; }
}