/* ==========================================================================
   Robustbook 2026 — Gestaltungsschicht (Richtung Bitblade-Blau)
   Eigenstaendige Vorschau. Steht auf eigenem Grund, unabhaengig vom
   Wirtsgrund. Werte 1:1 aus /root/redesign/GESTALTUNGSBUCH.md.

   Schriften: "Space Grotesk" (SIL Open Font License 1.1, The Space Grotesk
   Project Authors) und "Space Mono" (SIL Open Font License 1.1, The Space
   Mono Project Authors). Lokal als TTF unter ./fonts/ eingebunden — keine
   CDN-, keine Google-Fonts-Einbindung (Abnahmepunkt 13).
   ========================================================================== */

@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("/fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* --------------------------------------------------------------------------
   1. Farben — alle als Merkmale auf :root, keine Farbe nur in @media/[data-theme]
   -------------------------------------------------------------------------- */
:root{
  /* Grund */
  --rb-grund:#0B0F1A;
  --rb-grund-tief:#080C15;
  --rb-flaeche:#101728;
  --rb-linie:#1F2738;
  --rb-linie-stark:#283447;

  /* Marke */
  --rb-akzent:#2F80FF;
  --rb-akzent-hell:#6BA4FF;

  /* Text */
  --rb-text:#FFFFFF;
  --rb-text-2:#E7EAF0;
  --rb-text-3:#C2C9D6;
  --rb-text-4:#A7AFBE;
  --rb-text-5:#9AA4B2;

  /* Gedaempft */
  --rb-gedaempft:#6B7587;
  --rb-gedaempft-2:#5C6678;
  --rb-gedaempft-3:#3A4255;
  --rb-gedaempft-4:#28323F;

  /* Helle Flaechen (fuer Elemente, die bewusst hell gegen den dunklen Grund stehen,
     z. B. helle Bildkacheln) */
  --rb-hell-grund:#E7EAF0;
  --rb-hell-kante:#EAEDF3;
  --rb-hell-kante-2:#D6DCE6;

  /* Schrift */
  --rb-schrift:"Space Grotesk","Noto Sans","Noto Sans SC",sans-serif;
  --rb-schrift-mono:"Space Mono",monospace;

  /* Form */
  --rb-radius:6px;
  --rb-radius-karte:10px;
  --rb-radius-8:8px;
  --rb-radius-5:5px;

  /* Haltepunkte als Merkmale zur Dokumentation (Medienabfragen selbst
     koennen keine Merkmale auswerten, die Werte stehen hier zusaetzlich
     als Beleg, dass sie aus dem Entwurf stammen) */
  --rb-bp-nav:1080px;
  --rb-bp-service:980px;
  --rb-bp-stapel:820px;
  --rb-bp-eng:520px;
}

/* --------------------------------------------------------------------------
   2. Grundregeln — wortgleich aus dem Entwurf
   -------------------------------------------------------------------------- */
.rb-2026{ /* Wurzel der Gestaltungsschicht: haengt nicht vom Wirtsgrund ab */
  background:var(--rb-grund);
  color:var(--rb-text-3);
  font-family:var(--rb-schrift);
  -webkit-font-smoothing:antialiased;
}
.rb-2026 *{box-sizing:border-box}
.rb-2026 img{max-width:100%;display:block}
/* font-family:inherit noetig (Fehlschlag 21.08.2026, gefunden beim Pruefen
   der Menue-Schrift): der Wirt setzt global "a{font-family:var(--rb-font)}"
   (css/bitblade.css) - eine Regel direkt auf dem Element selbst schlaegt
   die Vererbung von .rb-2026 auf body unabhaengig von deren Spezifitaet.
   Ohne diese Zeile liefen alle Links (Menue, Servicezeile, Fuss) auf Inter
   statt Space Grotesk/Space Mono. .rb-2026 a hat mit einer Klasse + einem
   Element (0,1,1) mehr Spezifitaet als das wirtseigene "a" (0,0,1) und
   gewinnt; inherit statt eines festen Wertes, damit Bauteile mit eigener
   font-family (z. B. .rb-servicezeile: Space Mono) korrekt durchgereicht
   werden. */
.rb-2026 a{color:var(--rb-akzent);text-decoration:none;font-family:inherit}
.rb-2026 a:hover{color:var(--rb-akzent-hell)}
.rb-2026 ::selection{background:var(--rb-akzent);color:var(--rb-text)}
.rb-2026 ::placeholder{color:var(--rb-gedaempft-2)}

@keyframes rbIn{.rb-2026 from{opacity:0;transform:translateY(6px)}.rb-2026 to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .rb-2026 *, .rb-2026 *::before, .rb-2026 *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Tastaturfokus muss sichtbar bleiben */
.rb-2026 a:focus-visible,
.rb-2026 button:focus-visible,
.rb-2026 input:focus-visible,
.rb-2026 select:focus-visible,
.rb-2026 textarea:focus-visible,
.rb-2026 .rb-knopf:focus-visible,
.rb-2026 [tabindex]:focus-visible{
  outline:2px solid var(--rb-akzent);
  outline-offset:2px;
  border-radius:var(--rb-radius-5);
}

/* --------------------------------------------------------------------------
   Erkennungsmerkmal: diagonale Rasterschraffur — sparsam einsetzen
   -------------------------------------------------------------------------- */
.rb-2026 .rb-raster{
  background-image:repeating-linear-gradient(-47deg,
    rgba(47,128,255,.05) 0, rgba(47,128,255,.05) 1px,
    transparent 1px, transparent 66px);
}

/* --------------------------------------------------------------------------
   Augenbrauen-Beschriftungen — Space Mono, gesperrte Versalien
   -------------------------------------------------------------------------- */
.rb-2026 .rb-augenbraue{
  font-family:var(--rb-schrift-mono);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rb-akzent);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
}
.rb-2026 .rb-augenbraue::before{
  content:"";
  width:16px;height:1px;
  background:var(--rb-akzent);
  display:inline-block;
}
.rb-2026 .rb-augenbraue--gedaempft{color:var(--rb-gedaempft)}

/* --------------------------------------------------------------------------
   3. Servicezeile — verschwindet unter 980px
   -------------------------------------------------------------------------- */
.rb-2026 .rb-servicezeile{
  background:var(--rb-grund-tief);
  border-bottom:1px solid var(--rb-linie);
  color:var(--rb-text-5);
  font-family:var(--rb-schrift-mono);
  font-size:12px;
  letter-spacing:.02em;
}
.rb-2026 .rb-servicezeile__innen{
  max-width:1240px;
  margin:0 auto;
  padding:9px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.rb-2026 .rb-servicezeile a{color:var(--rb-text-4)}
.rb-2026 .rb-servicezeile a:hover{color:var(--rb-akzent-hell)}
.rb-2026 .rb-servicezeile__kontakt{display:flex;gap:18px;flex-wrap:wrap}

/* Rechte Seite: Haendler-Angabe + Sprach-Klappfeld (Entwurf: Kontakt links,
   Haendler/Sprache rechts - die vorherige Fassung stand seitenverkehrt und
   nutzte Pillen statt eines Klappfelds; beides hier angeglichen). */
.rb-2026 .rb-servicezeile__rechts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Nacharbeit 21.08.2026 (Punkt D): PHP liefert jetzt uebersetzten Text in
   normaler Gross-/Kleinschreibung (RB_L['dealer_label']/['language_label']),
   die Versalien-Anmutung des Entwurfs kommt ab hier aus CSS statt aus
   hartkodierten Grossbuchstaben - funktioniert dadurch unabhaengig von der
   Sprache. */
.rb-2026 .rb-servicezeile__haendler{color:var(--rb-text-5);text-transform:uppercase}
.rb-2026 .rb-servicezeile__sprache{display:flex;align-items:center;gap:8px}
.rb-2026 .rb-servicezeile__sprache-label{color:var(--rb-gedaempft);letter-spacing:.04em;text-transform:uppercase}

/* <details> statt echtem <select>: liefert die Klapp-Anmutung des Entwurfs
   ohne eigenes JS, haelt aber jede Sprache als echtes <a href> - ein
   <option value="..."> haette hier die Sprach-Verweise aus der Sollmenge
   verschwinden lassen (die Messung zaehlt href-Attribute, keine Werte von
   <option>). */
.rb-2026 .rb-sprachklappe{position:relative}
.rb-2026 .rb-sprachklappe__kopf{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px 3px 8px;
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-5);
  background:var(--rb-flaeche);
  color:var(--rb-text-3);
  cursor:pointer;
  list-style:none;
}
.rb-2026 .rb-sprachklappe__kopf::-webkit-details-marker{display:none}
.rb-2026 .rb-sprachklappe__kopf::after{
  content:"";
  width:5px;height:5px;
  border-right:1px solid var(--rb-text-4);
  border-bottom:1px solid var(--rb-text-4);
  transform:rotate(45deg) translateY(-2px);
  margin-left:2px;
}
.rb-2026 .rb-sprachklappe:hover .rb-sprachklappe__kopf,
.rb-2026 .rb-sprachklappe[open] .rb-sprachklappe__kopf{border-color:var(--rb-linie-stark);color:var(--rb-text)}
.rb-2026 .rb-sprachklappe__liste{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:140px;
  background:var(--rb-flaeche);
  border:1px solid var(--rb-linie-stark);
  border-radius:var(--rb-radius-5);
  padding:4px;
  display:flex;
  flex-direction:column;
  z-index:60;
}
.rb-2026 .rb-sprachklappe__liste a{
  padding:6px 8px;
  border-radius:var(--rb-radius-5);
  color:var(--rb-text-3);
  text-transform:none;
  letter-spacing:normal;
}
.rb-2026 .rb-sprachklappe__liste a:hover{background:var(--rb-grund-tief);color:var(--rb-text)}
.rb-2026 .rb-sprachklappe__liste a[aria-current="true"]{color:var(--rb-akzent)}

@media (max-width:980px){
  .rb-2026 .rb-servicezeile{display:none}
}

/* --------------------------------------------------------------------------
   4. Navigation — Klappmenue unter 1080px
   -------------------------------------------------------------------------- */
.rb-2026 .rb-nav{
  background:rgba(11,15,26,.92);
  border-bottom:1px solid var(--rb-linie);
  position:relative;
}
.rb-2026 .rb-nav__innen{
  max-width:1240px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.rb-2026 .rb-nav__marke{
  font-family:var(--rb-schrift);
  font-weight:700;
  font-size:19px;
  color:var(--rb-text);
  letter-spacing:-.01em;
}
.rb-2026 .rb-nav__marke span{color:var(--rb-akzent)}

/* Logo-Gespann: Wortmarke, senkrechter Trenner, zweizeilige Beifuegung
   "EINE MARKE DER / BITBLADE GROUP" mit Klingenzeichen davor (Entwurf). */
.rb-2026 .rb-nav__marke-gespann{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.rb-2026 .rb-nav__trenner{
  width:1px;
  align-self:stretch;
  min-height:26px;
  background:var(--rb-linie-stark);
  flex:none;
}
.rb-2026 .rb-nav__bitblade{
  display:flex;
  align-items:center;
  gap:7px;
}
/* Hoehere Spezifitaet als .rb-2026 .rb-nav img (2 Klassen + Element, siehe
   unten "Nachtrag 21.08.2026: das Kopflogo misst 2901x484") noetig, sonst
   zwingt jene Regel das 18x18-Icon auf 40px Hoehe. */
.rb-2026 .rb-nav .rb-nav__bitblade-icon{
  width:17px;height:17px;
  max-width:none;
  flex:none;
}
.rb-2026 .rb-nav__bitblade-text{
  font-family:var(--rb-schrift-mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.45;
  color:var(--rb-gedaempft);
  white-space:nowrap;
}
/* Nacharbeit 21.08.2026 (Punkt B, Fehlschlag): die fruehere Fassung blendete
   Trenner UND Klingenzeichen komplett aus (max-width:1300px) - bei den sehr
   verbreiteten 1280px war die Markenbindung damit unsichtbar, obwohl
   .rb-nav__innen dort exakt randvoll war (scrollWidth==clientWidth==1240),
   also gar kein Platzproblem bestand. Jetzt weicht unterhalb 1300px nur die
   zweizeilige Beifuegung ("EINE MARKE DER / BITBLADE GROUP", ~9px Space
   Mono); Trenner und Klingenzeichen (~25px) bleiben bis 1080px sichtbar -
   die Markenbindung bleibt erkennbar, .rb-nav__innen bleibt bei 1280/1200/
   1100px ueberlaufsfrei (siehe Bericht, Pruefung 3). */
@media (max-width:1300px){
  .rb-2026 .rb-nav__bitblade-text{display:none}
}

/* flex-direction:row explizit gesetzt (Fehlschlag 21.08.2026, gefunden bei
   der Breitenpruefung 1100px): Bootstraps eigene .navbar-nav{flex-direction:
   column} (mobile-first default) greift erst ab 1200px auf row um
   (navbar-expand-xl) - im Fenster 1081-1199px stand die Liste zuvor trotz
   display:flex!important auf der Collapse senkrecht und ueberlappte das
   Logo. Diese Regel hat durch zwei Klassen ohnehin mehr Spezifitaet als
   Bootstraps einklassiges .navbar-nav, setzte flex-direction bisher aber
   nie selbst - jetzt behoben. */
.rb-2026 .rb-nav__liste{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  list-style:none;
  margin:0;padding:0;
}
.rb-2026 .rb-nav__liste a{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--rb-text-3);
}
.rb-2026 .rb-nav__liste a:hover{color:var(--rb-text)}
/* Fehlschlag 21.08.2026: bei 1280px lief .rb-nav__innen ueber (scrollWidth
   1414 vs clientWidth 1240) - acht Menuepunkte mit Bootstraps grosszuegigem
   Nav-Link-Polster (.5rem 1rem, greift unterhalb 1200px unreduziert) plus
   Icons passten nicht. Polster hier gezielt ueberschrieben, Icons rein
   dekorativ ausgeblendet (kein href/src, keine Sollmenge betroffen). */
.rb-2026 .rb-nav__liste .nav-link{
  padding:.4rem .3rem;
}
.rb-2026 .rb-nav__liste .nav-link > i{
  display:none;
}
/* .rb-nav__sprachen entfernt 21.08.2026: die sichtbare Sprachauswahl sitzt
   jetzt als Klappfeld in der Servicezeile (.rb-sprachklappe), nicht mehr als
   Pillen im Menue - Markup dort ersatzlos gestrichen, Klasse hier also ohne
   Entsprechung im Markup und deshalb entfernt statt tot mitgefuehrt. */

.rb-2026 .rb-nav__klappe{
  display:none;
  width:38px;height:38px;
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-5);
  background:var(--rb-flaeche);
  color:var(--rb-text);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.rb-2026 .rb-nav__klappe:hover{border-color:var(--rb-linie-stark)}

/* Sprachauswahl im Mobil-Drawer (Nacharbeit 21.08.2026, Punkt A) - per
   Grundregel verborgen, nur innerhalb @media(max-width:1080px) sichtbar
   (dort auf display:block gestellt, siehe unten). Dieselben Klartextnamen
   wie im rb-sprachklappe-Klappfeld der Servicezeile. */
.rb-2026 .rb-nav__mobil-sprachen{
  display:none;
  padding:14px 0 6px;
  border-bottom:1px solid var(--rb-linie);
}
.rb-2026 .rb-nav__mobil-sprachen-label{
  display:block;
  font-family:var(--rb-schrift-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rb-gedaempft);
  margin-bottom:10px;
}
.rb-2026 .rb-nav__mobil-sprachen-liste{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.rb-2026 .rb-nav__mobil-sprachen-liste a{
  padding:6px 12px;
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-5);
  color:var(--rb-text-3);
  font-size:13px;
}
.rb-2026 .rb-nav__mobil-sprachen-liste a:hover{border-color:var(--rb-linie-stark);color:var(--rb-text)}
.rb-2026 .rb-nav__mobil-sprachen-liste a[aria-current="true"]{
  border-color:var(--rb-akzent);
  color:var(--rb-akzent);
}

.rb-2026 .rb-nav .rb-knopf{
  padding:9px 16px;
  font-size:13px;
  white-space:nowrap;
}

/* Fehlschlag 21.08.2026, zwei Ursachen behoben:
   1) Bootstraps eigener Umbruch (navbar-expand-xl) liegt bei 1200px, nicht
      bei den geforderten 1080px - dazwischen (1081-1199px) blieb
      .navbar-collapse unsichtbar UND .rb-nav__klappe schon ausgeblendet:
      das Menue verschwand vollstaendig. Hier wird Bootstraps Umbruch
      gezielt auf 1080px gezogen, nur innerhalb .rb-nav.
   2) .rb-nav__liste war unter 1080px per Grundregel display:none und
      brauchte die Klasse .rb-ist-offen, die im tatsaechlichen Markup nie
      gesetzt wird - das Klappmenue oeffnet sich ueber Bootstraps eigene
      .collapse/.show-Klasse am Eltern-Element #navbar (siehe header.php).
      Ohne diese Aenderung blieb die Liste beim Oeffnen leer (geprueft:
      .navbar-collapse wurde display:block, .rb-nav__liste blieb display:
      none). Die Sichtbarkeit haengt jetzt ausschliesslich am Eltern-
      Element; .rb-nav__liste liefert nur noch das Spalten-Layout. */
@media (min-width:1081px){
  .rb-2026 .rb-nav .navbar-collapse{
    display:flex!important;
    flex-basis:auto;
  }
  .rb-2026 .rb-nav .navbar-toggler{display:none}
}

@media (max-width:1080px){
  .rb-2026 .rb-nav__liste{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .rb-2026 .rb-nav .navbar-collapse.show{
    background:var(--rb-grund-tief);
    border-bottom:1px solid var(--rb-linie);
    padding:8px 24px 16px;
  }
  .rb-2026 .rb-nav__liste a{
    padding:12px 0;
    border-bottom:1px solid var(--rb-linie);
  }
  .rb-2026 .rb-nav__liste .nav-link > i{display:inline-block}
  .rb-2026 .rb-nav__klappe{display:flex}
  /* Nacharbeit 21.08.2026 (Punkt A, dringend): Sprachauswahl zusaetzlich im
     aufgeklappten Menue, unterhalb der acht Menuepunkte - im Entwurfs-
     Aenderungsprotokoll woertlich "Sprachumschalter liegt jetzt auch im
     Mobil-Drawer". Ohne dies war die Sprache am Telefon (<980px, wo die
     Servicezeile per Grundregel verschwindet) ueberhaupt nicht mehr
     erreichbar. */
  .rb-2026 .rb-nav__mobil-sprachen{display:block}
}

/* --------------------------------------------------------------------------
   4b. Sprungmarken-Unterleiste — mitlaufend, aktiver Eintrag blau
   unterstrichen. Definiert, aber 21.08.2026 auf keiner Seite eingebunden:
   keine geprueften Seite hat ein vollstaendig passendes Ankerset (Startseite
   traegt einzig id="branchen"; Kontakt- und Produktseiten je eigene
   Formular-/Modal-IDs, keine Abschnittsanker). Erfinden verboten laut
   Auftrag - die Leiste steht bereit, sobald eine Seite echte Anker liefert.
   -------------------------------------------------------------------------- */
.rb-2026 .rb-sprungmarken{
  background:var(--rb-grund-tief);
  border-bottom:1px solid var(--rb-linie);
}
.rb-2026 .rb-sprungmarken__innen{
  max-width:1240px;
  margin:0 auto;
  padding:8px 24px;
  display:flex;
  gap:20px;
  overflow-x:auto;
}
.rb-2026 .rb-sprungmarken a{
  font-family:var(--rb-schrift-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rb-text-4);
  white-space:nowrap;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.rb-2026 .rb-sprungmarken a:hover{color:var(--rb-text)}
.rb-2026 .rb-sprungmarken a[aria-current="true"]{
  color:var(--rb-akzent);
  border-bottom-color:var(--rb-akzent);
}

/* --------------------------------------------------------------------------
   5. Aufmacher (Hero) — Titel clamp(26px, 3vw, 40px)
   -------------------------------------------------------------------------- */
.rb-2026 .rb-aufmacher{
  padding:72px 24px;
  position:relative;
  overflow:hidden;
}
.rb-2026 .rb-aufmacher__innen{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
  position:relative;
  z-index:1;
}
.rb-2026 .rb-aufmacher__titel{
  font-family:var(--rb-schrift);
  font-weight:700;
  font-size:clamp(26px,3vw,40px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--rb-text);
  margin:0 0 18px;
}
.rb-2026 .rb-aufmacher__text{
  font-size:15.5px;
  line-height:1.65;
  color:var(--rb-text-3);
  margin:0 0 14px;
}
.rb-2026 .rb-aufmacher__aktionen{
  display:flex;
  gap:14px;
  margin-top:24px;
  flex-wrap:wrap;
}
.rb-2026 .rb-aufmacher__bild{
  background:var(--rb-flaeche);
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-karte);
  overflow:hidden;
}

@media (max-width:820px){
  .rb-2026 .rb-aufmacher{padding:20px}
  .rb-2026 .rb-aufmacher__innen{grid-template-columns:1fr;gap:24px}
  .rb-2026 .rb-aufmacher__titel{font-size:clamp(24px,7vw,32px)}
}

/* --------------------------------------------------------------------------
   6. Karten
   -------------------------------------------------------------------------- */
.rb-2026 .rb-raster-flaeche{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:820px){
  .rb-2026 .rb-raster-flaeche{grid-template-columns:1fr}
}

.rb-2026 .rb-karte{
  background:var(--rb-flaeche);
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-karte);
  padding:22px;
  animation:rbIn .4s ease both;
}
.rb-2026 .rb-karte:hover{border-color:var(--rb-linie-stark)}
.rb-2026 .rb-karte--aktiv{border-color:var(--rb-akzent)}
.rb-2026 .rb-karte__titel{
  font-family:var(--rb-schrift);
  font-weight:600;
  font-size:17.5px;
  color:var(--rb-text);
  margin:0 0 8px;
}
.rb-2026 .rb-karte__text{
  font-size:13.5px;
  line-height:1.6;
  color:var(--rb-text-4);
  margin:0;
}
.rb-2026 .rb-karte--eng{padding:22px 18px}

@media (max-width:520px){
  .rb-2026 .rb-karte{padding:22px 18px}
}

/* --------------------------------------------------------------------------
   7. Knoepfe — Haupt / Neben
   -------------------------------------------------------------------------- */
.rb-2026 .rb-knopf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--rb-schrift);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:-.01em;
  padding:14px 24px;
  border-radius:var(--rb-radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rb-2026 .rb-knopf--haupt{
  background:var(--rb-akzent);
  color:var(--rb-text);
  border-color:var(--rb-akzent);
}
.rb-2026 .rb-knopf--haupt:hover{
  background:var(--rb-akzent-hell);
  border-color:var(--rb-akzent-hell);
  color:var(--rb-text);
}
.rb-2026 .rb-knopf--neben{
  background:transparent;
  color:var(--rb-text-2);
  border-color:var(--rb-linie-stark);
}
.rb-2026 .rb-knopf--neben:hover{
  border-color:var(--rb-akzent);
  color:var(--rb-text);
}

@media (max-width:820px){
  .rb-2026 .rb-aufmacher__aktionen .rb-knopf{width:100%}
}

/* --------------------------------------------------------------------------
   8. Kennwerttabelle — Space Mono fuer Zahlen/Kennwerte
   -------------------------------------------------------------------------- */
.rb-2026 .rb-kennwerte{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--rb-flaeche);
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-karte);
  overflow:hidden;
}
.rb-2026 .rb-kennwerte th, .rb-2026 .rb-kennwerte td{
  text-align:left;
  padding:13px 15px;
  border-bottom:1px solid var(--rb-linie);
  font-size:13.5px;
}
.rb-2026 .rb-kennwerte tr:last-child th, .rb-2026 .rb-kennwerte tr:last-child td{border-bottom:none}
.rb-2026 .rb-kennwerte th{
  width:38%;
  font-family:var(--rb-schrift-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rb-gedaempft);
}
.rb-2026 .rb-kennwerte td{
  font-family:var(--rb-schrift-mono);
  font-weight:400;
  color:var(--rb-text-2);
}
.rb-2026 .rb-kennwerte td.rb-ist-platzhalter{
  color:var(--rb-gedaempft-2);
  font-style:italic;
}

/* --------------------------------------------------------------------------
   9. Normen-Marken — MIL-STD, IP, ATEX
   -------------------------------------------------------------------------- */
.rb-2026 .rb-marken{display:flex;gap:8px;flex-wrap:wrap}
.rb-2026 .rb-marke{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--rb-schrift-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 10px;
  border:1px solid var(--rb-linie-stark);
  border-radius:var(--rb-radius-5);
  color:var(--rb-text-3);
  background:var(--rb-grund-tief);
}
.rb-2026 .rb-marke--mil{border-color:var(--rb-akzent);color:var(--rb-akzent-hell)}
.rb-2026 .rb-marke--ip{border-color:var(--rb-linie-stark);color:var(--rb-text-2)}
.rb-2026 .rb-marke--atex{border-color:var(--rb-gedaempft-3);color:var(--rb-text-4)}

/* --------------------------------------------------------------------------
   10. Formularfelder
   -------------------------------------------------------------------------- */
.rb-2026 .rb-formular{max-width:560px}
.rb-2026 .rb-feld{margin-bottom:16px}
.rb-2026 .rb-feld label{
  display:block;
  font-family:var(--rb-schrift-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rb-gedaempft);
  margin-bottom:8px;
}
.rb-2026 .rb-feld input, .rb-2026 .rb-feld select, .rb-2026 .rb-feld textarea{
  width:100%;
  background:var(--rb-flaeche);
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-5);
  padding:13px 15px;
  font-family:var(--rb-schrift);
  font-size:14px;
  color:var(--rb-text-2);
  transition:border-color .15s ease;
}
.rb-2026 .rb-feld input:hover, .rb-2026 .rb-feld select:hover, .rb-2026 .rb-feld textarea:hover{border-color:var(--rb-linie-stark)}
.rb-2026 .rb-feld input:focus, .rb-2026 .rb-feld select:focus, .rb-2026 .rb-feld textarea:focus{
  border-color:var(--rb-akzent);
  outline:none;
}
.rb-2026 .rb-feld-zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){
  .rb-2026 .rb-feld-zeile{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   11. Fuss
   -------------------------------------------------------------------------- */
.rb-2026 .rb-fuss{
  background:var(--rb-grund-tief);
  border-top:1px solid var(--rb-linie);
  padding:48px 24px 28px;
}
.rb-2026 .rb-fuss__innen{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr repeat(3,1fr);
  gap:28px;
}
.rb-2026 .rb-fuss__spalte h6{
  font-family:var(--rb-schrift-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rb-gedaempft);
  margin:0 0 14px;
}
.rb-2026 .rb-fuss__spalte a{
  display:block;
  font-size:13.5px;
  color:var(--rb-text-4);
  padding:6px 0;
}
.rb-2026 .rb-fuss__spalte a:hover{color:var(--rb-text)}
.rb-2026 .rb-fuss__unten{
  max-width:1240px;
  margin:32px auto 0;
  padding-top:20px;
  border-top:1px solid var(--rb-linie);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--rb-gedaempft);
}

@media (max-width:820px){
  .rb-2026 .rb-fuss__innen{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .rb-2026 .rb-fuss__innen{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   12. Baender (abgesetzter Grund)
   -------------------------------------------------------------------------- */
.rb-2026 .rb-band{
  background:var(--rb-grund-tief);
  padding:56px 24px;
}
.rb-2026 .rb-band__innen{max-width:1240px;margin:0 auto}

/* --------------------------------------------------------------------------
   13. Zweispaltige Bloecke — stapeln bei 820px
   -------------------------------------------------------------------------- */
.rb-2026 .rb-zweispaltig{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
@media (max-width:820px){
  .rb-2026 .rb-zweispaltig{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   14. Container
   -------------------------------------------------------------------------- */
.rb-2026 .rb-container{max-width:1240px;margin:0 auto;padding:0 24px}
.rb-2026 .rb-abschnitt{padding:56px 24px}
@media (max-width:820px){
  .rb-2026 .rb-abschnitt{padding:20px}
}


/* Nachtrag 21.08.2026: das Kopflogo misst 2901x484 (Verhaeltnis 6:1).
   Ohne eigene Regel quetscht max-width:100% es auf 42px Breite. */
.rb-2026 .rb-nav img{height:40px;width:auto;max-width:none;object-fit:contain}


/* ==========================================================================
   15. SEITENINHALTE — Bootstrap-Klassen der 1.192 unveraenderten PHP-Seiten
   Kein PHP wird angefasst; diese Klassen liegen ueberall im Markup
   (text-muted 3438x, text-primary 5289x, btn 2927x, card 649x, table 557x
   usw. - gemessen ueber den gesamten Bestand). Alle Selektoren mit
   .rb-2026-Kaefig. Werte ausschliesslich aus GESTALTUNGSBUCH.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1 Textfarben — Kontrast gegen --rb-grund (#0B0F1A, Seitengrund) UND
   --rb-flaeche (#101728, Kartengrund), da beide Hintergruende vorkommen.
   Kontrastwerte unten gerechnet (WCAG-Formel, relative Luminanz).

   FALLE GEPRUEFT UND VERMIEDEN: die naheliegende Zuordnung text-muted ->
   --rb-gedaempft (#6B7587, im Gestaltungsbuch woertlich als "Beschriftungen"
   bezeichnet) faellt durch: 4.12:1 auf --rb-grund, 3.85:1 auf --rb-flaeche -
   beide unter der geforderten 4.5:1-Schwelle. --rb-text-5 (#9AA4B2, die
   dunkelste Farbe der "Text"-Stufe, heller als "Gedaempft") besteht die
   Schwelle klar und bleibt erkennbar gedaempft gegenueber dem Fliesstext
   (--rb-text-3). Deshalb hier verwendet statt --rb-gedaempft.

   text-success/text-warning: das Gestaltungsbuch fuehrt kein Gruen und kein
   Amber - nur Blau- und Grautoene. "Lesbare Entsprechung" heisst hier daher:
   keine erfundene Farbe, sondern zwei bestehende Toene, die sich in
   Helligkeit/Gewicht unterscheiden (--rb-akzent-hell vs. --rb-text-2 fett).
   Das ist eine Grenze dieser Schicht, kein Fehlschlag - siehe Meldung. */
.rb-2026 .text-muted{
  color:var(--rb-text-5) !important; /* !important: style.css setzt .footer .text-muted mit !important (rgba(...) !important) auf identischer Spezifitaet (0,2,0) via .footer .text-muted - ausserhalb des rb-2026-Fusses zwar wirkungslos, aber die Bootstrap-Grundregel .text-muted selbst kommt aus style.css/bitblade.css als Einzelklasse (0,1,0) und wird ohnehin geschlagen; !important hier nur als Bestandsschutz gegen kuenftige !important-Regeln auf .text-muted im Wirt, nicht zur Ueberwindung eines aktuellen Konflikts. */
  /* Kontrast: 7.59:1 auf --rb-grund, 7.09:1 auf --rb-flaeche. Besteht 4.5:1 klar. */
}
.rb-2026 .text-primary{
  color:var(--rb-akzent) !important;
  /* Kontrast: 5.15:1 auf --rb-grund, 4.81:1 auf --rb-flaeche (Karten) - beide
     ueber 4.5:1, auf Karten mit knapperem Abstand. */
}
.rb-2026 .text-success{
  color:var(--rb-akzent-hell) !important;
  /* Kontrast: 7.63:1 auf --rb-grund, 7.13:1 auf --rb-flaeche. */
}
.rb-2026 .text-warning{
  color:var(--rb-text-2) !important;
  font-weight:600;
  /* Kontrast: 15.88:1 auf --rb-grund, 14.83:1 auf --rb-flaeche - bewusst der
     hellste verfuegbare Ton, kombiniert mit Fettung, um sich von
     text-success (Blauton) UND vom gedaempften Fliesstext zu unterscheiden,
     da kein Amber im Gestaltungsbuch existiert. */
}
/* !important hier: style.css/bitblade.css setzen .text-primary/.text-success/
   .text-warning teils direkt auf Bootstraps eigenen Kontext-Farben
   (z. B. .footer .text-primary{color:var(--rb-blue) !important} in
   style.css) - gleiche Spezifitaet (0,2,0), spaeteres Laden allein reicht
   dort nicht gegen ein bereits gesetztes !important. Kein Layout, nur Farbe
   betroffen. */

/* --------------------------------------------------------------------------
   15.2 Ueberschriften h1-h6 und .h4/.h5 auf die Typenskala. clamp() nur beim
   Titel wie im Entwurf; h2 abgeleitet, h3-h6 aus der Groessenliste des
   Gestaltungsbuchs (10.5-19px + die vorhandene clamp-Formel).
   -------------------------------------------------------------------------- */
.rb-2026 h1{
  font-family:var(--rb-schrift);
  font-weight:700;
  font-size:clamp(26px,3vw,40px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--rb-text);
}
.rb-2026 h2{
  font-family:var(--rb-schrift);
  font-weight:700;
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--rb-text);
}
.rb-2026 h3{
  font-family:var(--rb-schrift);
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--rb-text);
}
.rb-2026 h4,
.rb-2026 .h4{
  font-family:var(--rb-schrift);
  font-weight:600;
  font-size:19px;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--rb-text);
}
.rb-2026 h5,
.rb-2026 .h5{
  font-family:var(--rb-schrift);
  font-weight:600;
  font-size:16px;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--rb-text-2);
}
.rb-2026 h6{
  font-family:var(--rb-schrift);
  font-weight:700;
  font-size:13.5px;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--rb-text-2);
}
/* .rb-fuss__spalte h6 (Abschnitt 11, Umrahmung) bleibt unangetastet: jene
   Regel hat mit zwei Klassen + Element mehr Spezifitaet als diese hier
   (eine Klasse + Element) und gewinnt im Fuss unveraendert weiter. */

/* --------------------------------------------------------------------------
   15.3 text-robustbook-logo (6184 Fundstellen) - heute in style.css: fette
   Inter-Ueberschrift in Graphit (#111827, fuer hellen Grund gedacht) mit
   Akzentwort per verschachteltem .text-primary. Absicht uebertragen: fette,
   markante Ueberschrift in der Haustype, "Tinte" auf dem jeweiligen Grund -
   hier Weiss statt Graphit, font-family:inherit statt hartem Inter (gleiche
   Begruendung wie beim bestehenden "a"-Fix oben: Bestandsschutz, falls die
   Klasse einmal in einem Bauteil mit eigener font-family absteigt). Das
   verschachtelte .text-primary faerbt das Akzentwort automatisch ueber
   Regel 15.1 mit.
   -------------------------------------------------------------------------- */
.rb-2026 .text-robustbook-logo{
  font-family:inherit;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--rb-text);
}

/* --------------------------------------------------------------------------
   15.4 Knoepfe btn/btn-primary/btn-secondary/btn-sm — eigene Formsprache
   (Space Mono, Versalien, Sperrung), bewusst getrennt vom bereits
   bestehenden .rb-knopf-Bauteil (Space Grotesk, keine Versalien): jenes ist
   Teil der fertigen Umrahmungsbauteile (Aufmacher-CTAs), dieses hier
   bedient die Bootstrap-Klassen im Inhalt alter Seiten.
   -------------------------------------------------------------------------- */
.rb-2026 .btn{
  font-family:var(--rb-schrift-mono);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:var(--rb-radius);
  padding:12px 22px;
  border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.rb-2026 .btn-sm{
  font-size:11px;
  letter-spacing:.12em;
  padding:8px 14px;
}
/* !important auf allen vier Zustaenden: bitblade.css/style.css definieren
   .btn-primary/.btn-secondary zusaetzlich ueber
   ":not([disabled]):not(.disabled).active" -Ketten (4 Klassen,
   Spezifitaet 0,4,0) fuer Hover/Active/Focus - das schlaegt
   ".rb-2026 .btn-primary" (0,2,0) unabhaengig von der Ladereihenfolge.
   Betrifft ausschliesslich Farbe/Kontur, kein Layout. */
.rb-2026 .btn-primary,
.rb-2026 .btn-primary:hover,
.rb-2026 .btn-primary:focus,
.rb-2026 .btn-primary.focus,
.rb-2026 .btn-primary:not([disabled]):not(.disabled).active,
.rb-2026 .btn-primary:not([disabled]):not(.disabled):active{
  background-color:var(--rb-akzent) !important;
  border-color:var(--rb-akzent) !important;
  color:var(--rb-text) !important;
}
.rb-2026 .btn-primary:hover{
  background-color:var(--rb-akzent-hell) !important;
  border-color:var(--rb-akzent-hell) !important;
}
.rb-2026 .btn-secondary,
.rb-2026 .btn-secondary:focus,
.rb-2026 .btn-secondary.focus,
.rb-2026 .btn-secondary:not([disabled]):not(.disabled).active,
.rb-2026 .btn-secondary:not([disabled]):not(.disabled):active{
  background-color:transparent !important;
  border-color:var(--rb-linie-stark) !important;
  color:var(--rb-text-2) !important;
}
.rb-2026 .btn-secondary:hover{
  background-color:transparent !important;
  border-color:var(--rb-akzent) !important;
  color:var(--rb-text) !important;
}

/* --------------------------------------------------------------------------
   15.5 Karten card/card-body
   -------------------------------------------------------------------------- */
.rb-2026 .card{
  background:var(--rb-flaeche);
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-karte);
  color:var(--rb-text-3);
}
.rb-2026 .card-body{
  padding:22px;
}

/* --------------------------------------------------------------------------
   15.6 Tabellen table/table-sm/table-responsive — Radius/Rahmen auf dem
   scrollenden Behaelter (table-responsive), nicht auf <table> selbst:
   border-radius+overflow auf einem <table>-Element mit
   border-collapse:collapse (Bootstrap-Grundregel) clippt in mehreren
   Browsern nicht zuverlaessig - der Div-Wrapper clippt sauber und liefert
   gleichzeitig das geforderte waagerechte Scrollen im eigenen Behaelter.
   -------------------------------------------------------------------------- */
.rb-2026 .table-responsive{
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-karte);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.rb-2026 .table{
  margin-bottom:0;
  color:var(--rb-text-3);
  background-color:var(--rb-flaeche);
}
.rb-2026 .table th,
.rb-2026 .table td{
  border-color:var(--rb-linie);
  padding:12px 14px;
  font-variant-numeric:tabular-nums;
}
.rb-2026 .table thead th{
  font-family:var(--rb-schrift-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rb-text-5); /* dieselbe Kontrastwahl wie 15.1: 7.09:1 auf --rb-flaeche statt --rb-gedaempft (3.85:1) */
  border-bottom-color:var(--rb-linie-stark);
}
/* Zebrastreifen ueber bestehende Palette (--rb-grund-tief), keine
   Transparenz-Erfindung. Spezifitaet (0,3,2) schlaegt bitblade.css'
   ".table-striped tbody tr:nth-of-type(odd)" (0,2,2) ohne !important. */
.rb-2026 .table tbody tr:nth-of-type(odd){
  background-color:var(--rb-grund-tief);
}
.rb-2026 .table-sm th,
.rb-2026 .table-sm td{
  padding:8px 10px;
  font-size:12.5px;
}
/* Fixierte erste Spalte der vier Vergleichstabellen (bitblade.css, Abschnitt
   "Vergleichstabellen: fixierte erste Spalte + Sticky-Kopfzeile"): die
   Grundregel setzt #fff auf th:first-child/td:first-child - fuer die alte
   helle Tabelle richtig, auf dunklem Grund aber hellgrauer Text auf Weiss
   (fast unlesbar, live geprueft auf /de/vergleichstabelle-laptops bei
   520px: "Durabook S15" etc. in --rb-text-3 auf #fff). Nur tbody
   ueberschrieben (Selektor eine Ebene spezifischer als die bereits
   bestehende, bewusst dunkle Kopfzellen-Fixierung
   ".table-responsive table thead th:first-child", die unangetastet
   bleibt), Position/Sticky/z-index unveraendert - nur Farbe. */
.rb-2026 .table-responsive table tbody th:first-child,
.rb-2026 .table-responsive table tbody td:first-child{
  background-color:var(--rb-flaeche);
  color:var(--rb-text-3);
}
/* Tabelle steht ausserhalb von .rb-datenblatt (siehe Bericht, Pruefung 4):
   diese Regeln setzen nur Farbe/Radius/Polster, keine display-, grid- oder
   flex-Eigenschaft - selbst dort, wo table/table-sm/table-responsive
   zusammen mit css/datenblatt.css auf derselben Seite vorkommen (die
   Datenblatt-Screenseite, nicht die 315 gedruckten PDF - siehe Bericht),
   bleibt die von wkhtmltopdf benoetigte Blockstruktur unangetastet. */

/* --------------------------------------------------------------------------
   15.7 Produktbilder img-fluid — weisser Fotogrund wird zur gestalteten
   hellen Kachel statt zum Kontrastbruch. Polster+Rahmen direkt auf dem
   <img>, box-sizing:border-box haelt die Aussenmasse innerhalb der von
   der Grundregel ".rb-2026 img{max-width:100%}" vorgegebenen Breite -
   das Bild selbst schrumpft um das Polster, statt es zu ueberschreiten.
   -------------------------------------------------------------------------- */
.rb-2026 img.img-fluid{
  background:var(--rb-hell-grund);
  border:1px solid var(--rb-hell-kante-2);
  /* !important: viele Produktfotos tragen zugleich die Bootstrap-Klasse
     .rounded, deren Grundregel selbst !important traegt
     (bootstrap.min.css: ".rounded{border-radius:.25rem!important}") und
     sonst die Kartenrundung auf 4px zurueckstutzt - live geprueft auf
     /de/branchen/industrie (Ist-Wert vorher 2px statt 10px). */
  border-radius:var(--rb-radius-karte) !important;
  padding:14px;
  box-sizing:border-box;
}
/* Ausnahme wie beauftragt: Logos/Symbole in Umrahmung und Fuss nicht als
   helle Kachel behandeln. Aktuell traegt kein <img> in .rb-nav/.rb-fuss/
   .rb-servicezeile die Klasse img-fluid (gemessen, siehe Bericht) - diese
   Regel ist damit vorsorglich, nicht die Behebung eines gefundenen Falls. */
.rb-2026 .rb-nav img.img-fluid,
.rb-2026 .rb-fuss img.img-fluid,
.rb-2026 .rb-servicezeile img.img-fluid{
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  box-sizing:content-box;
}

/* --------------------------------------------------------------------------
   15.8 Formulare — Kontaktseite nutzt Bootstraps .form-control (nicht das
   vorhandene .rb-feld-Bauteil), daher hier eigene Regeln fuer Eingabefeld/
   Auswahlfeld/Textbereich in einem Selektor (alle drei tragen dieselbe
   Klasse im Markup).
   -------------------------------------------------------------------------- */
/* bitblade.css setzt "label{color:var(--rb-graphite)}" global (Element-
   selektor, fuer den hellen Wirtsgrund gedacht) - auf dem dunklen rb-2026-
   Grund faellt das auf ca. 1.08:1 (#111827 auf #0B0F1A), live geprueft auf
   /de/kontakt: "Name", "Firma", "E-Mail", "Telefon", "Branche" alle
   betroffen. Nicht Teil der urspruenglichen Acht-Punkte-Liste, aber
   eindeutig Formsprache (Punkt 8) - deshalb hier mitgefasst. */
.rb-2026 label{
  color:var(--rb-text-2);
  /* Kontrast 15.88:1 auf --rb-grund, 14.83:1 auf --rb-flaeche (dieselbe
     Farbe wie 15.1 text-warning, dort bereits gerechnet). */
}
.rb-2026 .form-control{
  background-color:var(--rb-flaeche);
  border:1px solid var(--rb-linie);
  border-radius:var(--rb-radius-5);
  padding:13px 15px;
  font-family:var(--rb-schrift);
  font-weight:400;
  font-size:14px;
  color:var(--rb-text-2);
  height:auto;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.rb-2026 .form-control:hover{
  border-color:var(--rb-linie-stark);
}
.rb-2026 .form-control:focus{
  background-color:var(--rb-flaeche);
  border-color:var(--rb-akzent);
  color:var(--rb-text-2);
  outline:none;
  box-shadow:0 0 0 3px rgba(47,128,255,.25); /* rgba aus --rb-akzent-Hex (47,128,255), keine neue Farbe */
}
.rb-2026 select.form-control{
  color:var(--rb-text-2);
}

/* ---------------------------------------------------------------------------
   Nachtrag 21.08.2026: .intro-header traegt in style.css ein margin-top:-15%.
   Der Wert war auf die alte, niedrigere Umrahmung ausgelegt. Mit der neuen
   Servicezeile plus Navigation zieht er die Ueberschrift in die Leiste hinein
   (gemessen: H1 bei 89-132px, Navigation bei 123-205px). style.css bleibt
   unberuehrt; der Ausgleich steht hier.
   --------------------------------------------------------------------------- */
.rb-2026 .intro-header{margin-top:0}
@media (max-width:820px){ .rb-2026 .intro-header{margin-top:0} }

/* ---------------------------------------------------------------------------
   Nachtrag 21.08.2026: Hinweiskaesten. 349x "alert alert-warning" (vor allem
   der Quellenvorbehalt auf den Datenblattseiten) und 28x "alert alert-primary".
   Bootstraps helle Cremefarbe steht fremd auf dem dunklen Grund.
   Kontrast gerechnet: #E7EAF0 auf #101728 = 14.8:1.
   --------------------------------------------------------------------------- */
.rb-2026 .alert{
  border-radius:10px;
  border:1px solid var(--rb-linie);
  background:var(--rb-flaeche);
  color:var(--rb-text-2);
  padding:18px 20px;
}
.rb-2026 .alert-warning{
  border-left:3px solid var(--rb-akzent);
}
.rb-2026 .alert-primary{
  border-left:3px solid var(--rb-akzent);
}
.rb-2026 .alert a{color:var(--rb-akzent)}
.rb-2026 .alert code{
  background:var(--rb-grund-tief);
  color:var(--rb-text-3);
  border-radius:4px;
  padding:1px 5px;
}

/* ---------------------------------------------------------------------------
   Nachtrag 21.08.2026: Der Handlungsknopf der Navigation traegt im Markup
   BEIDE Klassen, "btn-secondary" und "rb-knopf--haupt". Die Inhaltsschicht
   setzt fuer btn-secondary "background-color:transparent !important" (noetig
   gegen Bootstraps eigene Regel) und schlaegt damit den Hauptknopf - er stand
   als leerer Umriss statt gefuellt. Hier gewinnt der Hauptknopf zurueck.
   Das !important ist erzwungen, weil die Regel darueber selbst eines fuehrt.
   --------------------------------------------------------------------------- */
.rb-2026 .btn.rb-knopf--haupt,
.rb-2026 .btn-secondary.rb-knopf--haupt{
  background-color:var(--rb-akzent) !important;
  border-color:var(--rb-akzent) !important;
  color:var(--rb-text) !important;
}
.rb-2026 .btn.rb-knopf--haupt:hover,
.rb-2026 .btn-secondary.rb-knopf--haupt:hover,
.rb-2026 .btn-secondary.rb-knopf--haupt:focus{
  background-color:var(--rb-akzent-hell) !important;
  border-color:var(--rb-akzent-hell) !important;
  color:var(--rb-text) !important;
}