.kreis_blau
{
    height:100%;
    width:100%;
    background:#264796;
    border-radius: 400px;
    -moz-border-radius: 400px;
    -webkit-border-radius: 400px;
    margin-left:0%;
    margin-top:0%;
    /* padding-top/-bottom sind % der BOX-BREITE (CSS-Spezifikation fuer
       vertikales Padding), nicht der Hoehe. border-radius:400px wird bei dieser
       schmalen Spalte immer auf 50% der Breite gekappt -> die Kuppel oben/unten
       braucht exakt so viel Abstand, um den Text nicht anzuschneiden. Bisher
       standen dort nur 15% -> Ueberschrift ragte in die Rundung hinein. */
    padding-top:55%;
    padding-bottom:55%;
    padding-left:10%;
    padding-right:10%;
}

/* "Warum Karley..."-Ueberschriftenbox war eckig (kein border-radius im Markup) --
   sanft abgerundet wie die uebrigen CI-Boxen (Nav, Buttons). */
.h-align-center {
  border-radius: .5rem;
}

/* "Sprich uns an!"-Banner: war ein bare <div> ganz ohne Klasse, Farbe/Radius
   kamen bisher aus Inline-Styles direkt im Markup -- hier stattdessen zentral
   im CSS. */
.cta-banner {
  background: var(--karley-blue);
  color: #fff;
  border-radius: .5rem;
  padding: .75rem 1.5rem;
  text-align: center;
}
.cta-banner h3 {
  color: #fff;
  margin: 0;
}
.cta-banner a {
  color: #fff;
}
.cta-banner a:hover {
  color: #fff;
  text-decoration: underline;
}

/* "Deine Vorteile bei uns"-Karte (ex .kreis_blau-Halbkreis auf index.php):
   Der grosse Bogen brauchte so viel Innenabstand, um die Ueberschrift nicht
   anzuschneiden, dass daraus fast nur leere Flaeche wurde -- kein gutes
   Verhaeltnis von Blau-Flaeche zu Inhalt. Stattdessen eine kompakte, klar
   umrissene Karte mit Haekchen-Liste (gleiches Muster wie vorteile.php:
   ul.list-icons), das faellt durch die durchgehende Karley-Blau-Flaeche aber
   ohne Leerraum-Overhead auf. .kreis_blau bleibt fuer service.php unangetastet. */
.benefits-panel {
  background: var(--karley-blue);
  color: #fff;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
}
.benefits-panel h3 {
  color: #fff;
  text-align: center;
  margin-bottom: 1.5rem;
}
.benefits-panel .list-icons {
  margin: 0;
}
.benefits-panel .list-icons li {
  color: #fff;
  /* die umgebende <section class="section-center"> setzt text-align:center,
     das vererbt sich hier runter -- passt aber nicht zu einer Haekchen-Liste,
     deren Icon per position:absolute;left:0 fix am linken Rand haengt (siehe
     .list.list-icons li > [class*="fa-"]:first-child in theme-elements.css). */
  text-align: left;
}
.benefits-panel .list-icons li:not(:last-child) {
  margin-bottom: 1rem;
}
.benefits-panel .list-icons i {
  /* default.css setzt hier Literal-Hex mit hoeherer Selektor-Spezifitaet
     (.list.list-icons li > [class*="fa-"]:first-child, ...) -- !important noetig. */
  color: #fff !important;
}

/* News Content: kompakte Absaetze (Quill Editor erzeugt p pro Zeile) */
.news-content p {
    margin-bottom: 2px;
    margin-top: 0;
}
.news-content ul,
.news-content ol {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Bootstrap 5 Fix: Heading mit Border - mehr Abstand zur HR */
.container .heading-middle-border h3,
.container .heading-middle-border h2,
.container .heading-middle-border h4 {
    background: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    display: inline-block;
}

.container .heading-middle-border {
    margin-bottom: 30px;
    text-align: center;
}

.container .heading-border {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

/* Navigation Header - muss NICHT transparent sein */
header,
.header-body,
.header-container {
    background-color: #fff !important;
}

/* Video Cards - Modern Design */
.card.box-shadow-1 {
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.card.box-shadow-1:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

.card .ratio {
    background: #000;
}

.card-footer.bg-white {
    padding: 1.5rem 1.25rem;
}

.text-2 {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =====================================================================
   Karley CI — Vereinheitlichung epson.karley.de (Referenz-Satellit)
   ---------------------------------------------------------------------
   Additiv, geladen NACH theme.css/theme-elements.css/skins/default.css.
   Karley Blau #264796 ersetzt Porto-Standardblau (#0088CC) UND das
   bisherige Landing-Blau (#2D8DE0). Kein Orange außer den "NEU"-/
   "Kostenlos"-Kennzeichnungen (siehe unten).
   ===================================================================== */

/* --- Poppins, SELBST-GEHOSTET auf cdn.karley.de (DSGVO: kein Google Fonts/Dritt-CDN) --- */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("https://cdn.karley.de/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("https://cdn.karley.de/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("https://cdn.karley.de/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("https://cdn.karley.de/fonts/poppins-700.woff2") format("woff2"); }

/* cdn.karley.de liefert nur 400/500/600/700 (300 und 800 -> 404). Das Theme setzt
   auf Hero-Ueberschriften .font-weight-extra-bold (font-weight:800 !important) --
   ohne eigene 800-Datei faelscht der Browser das synthetisch fett (dicker/klobiger
   als eine echte Poppins-ExtraBold). Auf die tatsaechlich vorhandene 700-Type
   begrenzen statt synthetisch faelschen zu lassen. */
.font-weight-extrabold,
.font-weight-extra-bold {
  font-weight: 700 !important;
}

:root {
  --karley-blue: #264796;
  --karley-blue-dark: #1c3572;
  --karley-blue-light: #e9edf7;
  --karley-blue-lighter: #f4f6fb;
  --karley-orange: #f39200;

  /* Porto-Theme-Tokens (theme.css/theme-elements.css konsumieren var(--primary)/var(--quaternary)
     an hunderten Stellen: Nav-Pille, Hamburger, Buttons, Fokus-Zustaende ...) */
  --primary: #264796;
  --quaternary: #264796;
  /* --primary-inverse/--quaternary-inverse: Portos Kontrast-Text-Variable fuer
     Flaechen in --primary/--quaternary-Farbe (u.a. theme.css:5536
     "#header ... nav > ul > li > a.active { color: var(--primary-inverse)
     !important }" -- schlaegt trotz !important unsere #mainNav-Regel wegen
     hoeherer Selektor-Spezifitaet). War fuers alte, HELLE Porto-Blau
     (#0088CC) auf dunkel/dunkelgrau eingestellt -- auf unserem jetzt
     DUNKLEN Karley-Blau braucht es stattdessen Weiss fuer Kontrast. Per
     CDP getMatchedStylesForNode auf epson.karley.de verifiziert (15.07.2026):
     genau diese Regel war die Ursache fuer schwarzen statt weissen Text im
     aktiven mobilen Menuepunkt. */
  --primary-inverse: #fff;
  --quaternary-inverse: #fff;
}

body, button, input, select, textarea, .btn,
#mainNav > li > a {
  font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--karley-blue); }
a:hover, a:focus { color: var(--karley-blue-dark); }

/* --- CTA-Buttons: "Lass uns reden" (btn-primary), "Zum Shop" (btn-quaternary).
   .btn-quaternary hatte KEINE .btn-rounded-Klasse im Markup -> Porto rendert es
   eckig (border-radius: 0). Weicher Radius wie beim karley.eu-CMS-Button
   (assets/custom.css: .35rem), statt volle Pille wie beim Hero-CTA -- passt zur
   selben Designsprache wie das Menue (.45rem, siehe unten). --- */
.btn-primary, .btn-quaternary {
  background-color: var(--karley-blue) !important;
  border-color: var(--karley-blue) !important;
  color: #fff !important;
}
.btn-quaternary {
  border-radius: .35rem !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.hover,
.btn-quaternary:hover, .btn-quaternary:focus, .btn-quaternary.hover {
  background-color: var(--karley-blue-dark) !important;
  border-color: var(--karley-blue-dark) !important;
  color: #fff !important;
}
/* Einzige Verwendung: "Lass uns reden" im Hero -- der liegt auf dem dunklen
   Blau-Verlauf (siehe section.video.overlay unten). Blauer Text auf blauem
   Verlauf war praktisch unlesbar -- laut Vorgabe "auf dunklem Hero weiss mit
   blauem Text": weisse Flaeche + blauer Text als Ruhezustand, Hover invertiert
   zu voller Karley-Blau-Flaeche mit weisser Schrift. */
.btn-outline.btn-primary,
.btn-with-arrow.btn-primary.btn-outline,
html .btn-with-arrow.btn-primary.btn-outline {
  background-color: #fff !important;
  color: var(--karley-blue) !important;
  border-color: #fff !important;
}
.btn-outline.btn-primary:hover, .btn-outline.btn-primary:focus,
.btn-with-arrow.btn-primary.btn-outline:hover, .btn-with-arrow.btn-primary.btn-outline:focus,
html .btn-with-arrow.btn-primary.btn-outline:hover, html .btn-with-arrow.btn-primary.btn-outline:focus {
  background-color: var(--karley-blue) !important;
  border-color: var(--karley-blue) !important;
  color: #fff !important;
}

/* --- Mobiler Hamburger: default.css setzt #0088CC literal (css/skins/default.css:4654),
   das gewinnt gegen var(--primary) aus theme.css bei gleicher Spezifitaet. Zusaetzlich
   Mindestgroesse 44x44px (Tap-Target) -- vorher 43x38px. --- */
.header-btn-collapse-nav {
  background-color: var(--karley-blue) !important;
  color: #fff !important;
  min-width: 44px;
  min-height: 44px;
  border-radius: .4rem !important;
}

/* --- Nav: aktiver Punkt + Hover, angeglichen an das bereits abgenommene
   karley.eu-CMS-Menue (assets/karley-ci.css im Repo karleyeu-cms):
   - border-radius .45rem statt volle Pille (50px) -- bei sehr unterschiedlich
     langen Labels (START vs. MODELLVERGLEICH) wirkt eine feste 50px-Pille
     ungleichmaessig rund; ein fester kleiner Radius sieht bei jeder Textlaenge
     gleich "weich" aus.
   - Hover bewusst DUNKLER als Aktiv-Zustand (karley-blue-dark statt karley-blue),
     analog zum expliziten Fix auf karley.eu ("war hell-blau/#0088cc bei
     weiterhin blauer Schrift -> schlechter Kontrast").
   default.css setzt #0088CC hier als Literal-Hex mit hoher Selektor-Spezifitaet
   (u.a. #header .header-nav-main nav > ul:not(:hover) > li > a.active) --
   deshalb !important statt var(--primary)-Kaskade. Gilt fuer Desktop- UND
   Mobil-Media-Query, da default.css beide Varianten separat literal setzt. --- */
#mainNav > li > a {
  color: var(--karley-blue) !important;
}
#mainNav a.active, #mainNav a.current-page-active {
  background-color: var(--karley-blue) !important;
  color: #fff !important;
  border-radius: .45rem !important;
}
#mainNav > li:hover > a,
#mainNav > li.open > a {
  background-color: var(--karley-blue-dark) !important;
  color: #fff !important;
  border-radius: .45rem !important;
}

/* --- Mobil: aktiver Menuepunkt mit runden Ecken, wie der Hamburger-Button
   (.4rem, siehe .header-btn-collapse-nav oben) -- auf ausdruecklichen Wunsch
   nach visueller Konsistenz. Das urspruengliche Problem war NICHT der Radius
   selbst, sondern dass <a> inline war und das Padding die Zeilenhoehe der <li>
   nicht mitgezogen hat -> Zeilen ueberlappten sich (siehe display:flex-Fix
   weiter unten). Mit korrekter Boxgroesse schneidet ein moderater Radius
   die Trennlinien nicht mehr sichtbar an. --- */
@media (max-width: 991px) {
  #mainNav a.active, #mainNav a.current-page-active,
  #mainNav > li:hover > a, #mainNav > li.open > a {
    border-radius: .4rem !important;
  }

  /* --- Mobil: Kopfzeile neu geordnet wie karley.eu-Vorbild -- Logo links,
     dann ein kompakter zweizeiliger Block (Telefonnummer oben, Social-Icons
     darunter), Hamburger ganz rechts.

     Vorherige CSS-only-Versuche sind an Portos eigenem Layout gescheitert:
     .header-row hat flex-grow:1 (theme.css:142-148). Solange Telefon und
     Social-Icons in ZWEI separaten .header-row-Wrappern standen (menu.php-
     Originalstruktur), blaehte jede Zeile zur Haelfte der Spaltenhoehe auf
     und ihr Inhalt wurde EINZELN darin zentriert -- das riss beide weit
     auseinander, egal wie viel CSS man dagegenstellte (User-Feedback
     15.07.2026: "zu weit auseinander vertikal").

     Deshalb strukturell in includes/menu.php geloest (User-Vorschlag): Beide
     jetzt in EINER gemeinsamen .header-row, gruppiert in einem neuen Wrapper
     .header-contact-block. Dadurch konkurriert nichts mehr um Platz -- der
     Block schrumpft auf seine natuerliche Inhaltshoehe.

     Der Hamburger wird weiterhin per position:absolute komplett aus dem
     Fluss genommen und rechts daneben gesetzt (vertikal zentriert relativ
     zum kompletten Header). Containing Block bleibt bewusst #header (schon
     position:relative, theme.css:78-79) und NICHT ein Vorfahre von
     .header-nav-main -- sonst dieselbe Regression wie beim ersten Anlauf
     (Dropdown-Panel wird schmal statt volle Breite). --- */
  #header .header-btn-collapse-nav {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    margin: 0;
  }
  /* --- Mobil-Sticky: Porto laesst die fixe .header-body im Sticky-Zustand per
     stickySetTop:-45px (menu.php data-plugin-options) 45px nach oben verschoben
     EINRASTEN -- auf dem Desktop verschwindet so nur die 45px-Top-Zeile, der
     Hauptbalken bleibt sichtbar. Im mobilen Layout ist die .header-body aber ein
     hoher, vertikal gestapelter Block (Logo + Kontaktblock, ~84px); die -45px
     schoben das sichtbare Band auf ~39px zusammen -- der auf top:50% zentrierte,
     44px hohe Hamburger rutschte damit mit seiner OBEREN Haelfte ueber den
     Viewport-Rand (User-Screenshot 16.07.2026: "Hamburger rechts halb aus dem
     Sichtfeld"; per Playwright reproduziert: btnTop -24px bei clientH 740).
     Auf Mobil den Versatz neutralisieren -> das komplette Header-Band bleibt beim
     Scrollen sichtbar, der Hamburger vollstaendig. Nur Mobil (<=991px); die
     Desktop-Sticky-Verkuerzung bleibt unberuehrt. Per Playwright bei 360/414px im
     eingerasteten Sticky-Zustand verifiziert (btnTop 21px, kein Ueberlauf). --- */
  html.sticky-header-active #header .header-body {
    top: 0 !important;
  }
  /* --- Mobil-Sticky: Logo NICHT verkleinern. menu.php setzt am Logo
     data-sticky-width/height (82x40) + data-sticky-top:25, Porto schreibt daraus
     im Sticky-Zustand inline style="top:25px;width:82px;height:40px". Da das
     Header-Band mobil jetzt voll sichtbar bleibt (siehe .header-body top:0 oben),
     wirkt das geschrumpfte Logo unmotiviert (User-Wunsch 16.07.2026: "lasse es
     auf der selben Groesse"). Volle Groesse (100x48, = width/height-Attribute im
     Markup) erzwingen und das nur fuers kleine Logo gedachte top:25px
     neutralisieren. !important schlaegt Portos Inline-Style. Nur Mobil (<=991px)
     -- das Desktop-Sticky-Logo bleibt unberuehrt. --- */
  html.sticky-header-active #header .header-logo img {
    width: 100px !important;
    height: 48px !important;
    top: 0 !important;
  }
  /* Platz fuer den absolut positionierten Hamburger reservieren, sonst laeuft
     der Kontakt-Block optisch dahinter. justify-content:center (!important
     gegen Bootstraps woertliche .justify-content-end-Utility-Klasse im
     Markup) zentriert die (jetzt einzige) header-row vertikal in der Spalte
     -- die Spalte ist flex-direction:column, justify-content wirkt hier auf
     die vertikale Achse. --- */
  #header .header-column.justify-content-end {
    padding-right: 60px;
    justify-content: center !important;
  }
  /* .header-contact-block: Telefonzeile + Social-Icons als eigene, kompakte
     Spalte gestapelt (Quelle: menu.php, neuer Wrapper um header-nav-top +
     menu_social.php-Include). Kleiner Row-Gap statt Portos Zeilenpadding. --- */
  #header .header-contact-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-grow: 0;
  }
  #header .header-nav-top {
    justify-content: center;
    text-align: center;
    padding-top: 0 !important;
  }
  #header .header-nav {
    display: block;
    flex-grow: 0;
  }
  #header .header-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
  }

  /* --- Mobil: Zeilenoptik komplett an karleyeu-cms angeglichen (assets/custom.css
     im Repo karleyeu-cms, Zeile 174-190) -- vorher duenne Grossbuchstaben-Zeilen
     im Porto-Standard (padding 7px 8px, text-transform:uppercase, border #e8e8e8),
     jetzt groessere Tap-Targets, Title-Case statt GROSSBUCHSTABEN, kraeftigere
     Schrift, hellere Trennlinie, Panel mit Schatten + Top-Rand wie im CMS-Vorbild. --- */
  #header .header-nav-main:before {
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
  }
  #header .header-nav-main nav {
    border-top: 1px solid #eee;
    /* Porto-Default max-height:50vh (theme.css:3474) reichte mit den
       groesseren CI-Zeilen nicht mehr fuer alle Menuepunkte -- bei 8
       Eintraegen (Start...Support, ca. 48px/Zeile = ~384px) schnitt 50vh
       auf kuerzeren Handy-Viewports mitten in "Service" ab, "Support" war
       gar nicht mehr sichtbar. Grosszuegiger an der tatsaechlichen
       Viewport-Hoehe orientiert statt an einem festen Bruchteil. --- */
    max-height: calc(100vh - 150px) !important;
  }
  #mainNav li {
    border-bottom: 1px solid #f0f1f3 !important;
  }
  #mainNav > li > a {
    /* display:flex ist der eigentliche Kern des Fixes (fehlte im ersten Anlauf!):
       <a> ist von Haus aus inline -- vertikales Padding wird bei Inline-Elementen
       nur GEMALT, zaehlt aber nicht zur Zeilenhoehe/zum Layout. Die <li> blieb
       dadurch bei ~25px, waehrend <a> optisch 50px hoch gemalt wurde -> Zeilen
       ueberlappten sich sichtbar (z.B. "Start" ragte in "Vorteile" hinein). Per
       Playwright-Messung bestaetigt: li(167-192) vs a(152-202) bei "Start".
       display:flex (wie karleyeu-cms: assets/custom.css:190) macht <a> zum
       Blockcontainer, das Padding zaehlt zur Zeilenhoehe, <li> waechst mit. --- */
    display: flex !important;
    align-items: center !important;
    padding: .85rem 1.1rem !important;
    margin: 0 !important;
    font-size: 1rem !important;
    text-transform: none !important;
    font-weight: 600 !important;
  }
}

/* --- Nav-Ueberlauf 992-1199px: bei 8 Menüpunkten (Start...Support) reicht der
   Platz in dieser Zwischenbreite nicht -- SERVICE/SUPPORT brechen um und der
   Header (feste Hoehe) ueberlappt dann den Hero-Bereich darunter. Vorbestehendes
   Layout-Problem der Vorlage (reproduziert auch ohne Poppins), hier durch knapperen
   Nav-Abstand behoben, ohne den Hamburger-Breakpoint (991px) anzutasten. --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .header-nav-main nav > ul > li > a {
    padding: 0.5rem 0.6rem;
    font-size: 12.5px;
  }
}

/* --- Hero (Startseite): dunkler Verlauf auf Karley-Blau-Basis statt neutralem Dunkelgrau --- */
section.video.overlay.overlay-color-dark:not(.no-skin):before {
  background: linear-gradient(160deg, var(--karley-blue) 0%, var(--karley-blue-dark) 100%) !important;
}

/* --- Modellkarten (index.php): Gruppen-Kicker und neutrale Bildflaeche --- */
.model-kicker { color: var(--karley-blue); }

.model-image-box {
  background: var(--karley-blue-lighter);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Ratgeber-/Exit-Popup: extern via cdn.karley.de/js/popup/karley-exit-popup.js,
   injiziert eigenes <style> mit Orange (#e2571f). Hier lokal auf Karley Blau gezogen,
   das zentrale Skript selbst bleibt unangetastet (betrifft alle Microsites + CMS). --- */
#karley-xpop-submit {
  background: var(--karley-blue) !important;
  background-image: none !important;
  box-shadow: none !important;
}
#karley-xpop-submit:hover { background: var(--karley-blue-dark) !important; }
.karley-xpop-badge { background: var(--karley-blue) !important; box-shadow: none !important; }

/* --- Fokus-Ring (Barrierefreiheit) --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--karley-blue);
  outline-offset: 2px;
}

/* =====================================================================
   Fehler-Screenshots 15.07.2026 — Feinschliff Mobilansicht (alle Satelliten)
   ---------------------------------------------------------------------
   Additive Korrekturen aus den Screenshot-Befunden. Bewusst am Dateiende
   und thematisch vom Menue-Block (oben) getrennt.
   ===================================================================== */

/* --- #6 Produktteaser-Abstand (mobil): Die drei Teaser oben auf der
   Startseite liegen als .col-md-4.col-sm-4.col-12 nebeneinander und stapeln
   sich erst unter 576px untereinander. Dann klebt das jeweils naechste Produkt
   fast am "Zum Shop"-Button (der Button hat nur .mb-sm) -- der Button gehoert
   aber zu SEINEM Absatz und soll dort bleiben. Deshalb NICHT den Button-Abstand
   vergroessern, sondern gezielt Luft ZWISCHEN gestapelten Teasern: jede
   Teaser-Spalte, die auf eine weitere Teaser-Spalte folgt, bekommt margin-top.
   Erkannt an :has(.btn-quaternary) (= "Zum Shop"), damit nur echte Produkt-
   teaser getroffen werden, nicht beliebige Bootstrap-Spalten. --- */
@media (max-width: 575.98px) {
  .container .row > [class*="col-"]:has(.btn-quaternary)
  ~ [class*="col-"]:has(.btn-quaternary) {
    margin-top: 2rem;
  }
}

/* --- #4 Zwischenueberschriften im Fliesstext (.news-content): Der Inhalt
   kommt aus dem Quill-Editor als <p>...</p><h3>...</h3><p>... . Fuer die
   ABSAETZE ist oben (Zeile ~89) bewusst margin:0/2px gesetzt (kompakte News).
   Die Zwischen-<h3>/<h2>/<h4> erben davon aber KEIN margin-top von sich aus
   und kleben dadurch am Absatz davor -- obwohl sie einen eigenen Abschnitt
   eroeffnen. Ihnen gezielt Luft nach oben geben; das erste Element im Block
   bleibt buendig (kein Abstand ueber der ersten Zeile). --- */
.news-content h2,
.news-content h3,
.news-content h4 {
  margin-top: 1.75rem;
}
.news-content > :first-child {
  margin-top: 0;
}

/* --- #1 Hero-Scroll-Button vs. CTA (mobil): Der runde, dunkelgraue
   "nach unten"-Scrollindikator (.slider-scroll-button, position:absolute
   bottom-0 + left:50% zentriert, im Markup mit style="background:#4d4d4d")
   sitzt am unteren Rand des Hero-Containers -- exakt dort, wo auf schmalen
   Viewports auch der zentrierte CTA "Lass uns reden" (-> /information/contact)
   liegt. Der graue Kreis legt sich dann ueber den Button und verdeckt die
   Beschriftung (Screenshot: nur noch "Lass ... n" lesbar). Auf Touch ist ein
   Scroll-Indikator ohnehin entbehrlich (man wischt). Desktop bleibt unberuehrt
   (dort genug Hoehe, keine Ueberlappung). Verschieben statt Ausblenden wuerde
   ihn nur in die naechste Kollision (fixes Chat-Widget unten rechts) schieben. */
@media (max-width: 991.98px) {
  .slider-scroll-button {
    display: none !important;
  }
}

/* --- Breadcrumb-Tofu + alle "Font Awesome 7 Free"-Referenzen: theme.css und
   theme-elements.css verlangen an 21 Stellen die Familie 'Font Awesome 7 Free'
   (u.a. der Breadcrumb-Trenner .breadcrumb > li + li:before { content:"\f105" },
   font-weight:900). Eingebunden ist aber nur Font Awesome 5 Free
   (vendor/fontawesome-free). Die Familie 'Font Awesome 7 Free' ist also
   NIRGENDS als @font-face definiert -> der Browser faellt auf eine System-Font
   zurueck, die den Private-Use-Glyph nicht kennt -> leeres Kaestchen (Tofu).
   Statt 21 Einzel-Overrides die leere Familie zentral auf die tatsaechlich
   vorhandenen FA5-Dateien mappen; die klassischen Unicodes (\f0xx/\f1xx) sind
   zwischen FA5/6/7 identisch. Solid (900) + Regular (400) abgedeckt; beide
   Dateien live per HTTP 200 verifiziert. --- */
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2"),
       url("../vendor/fontawesome-free/webfonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../vendor/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2"),
       url("../vendor/fontawesome-free/webfonts/fa-regular-400.ttf") format("truetype");
}

/* --- Desktop-Nav in eigene Zeile (>=992px): Im umgebauten Header teilen sich
   .header-contact-block (Ueber uns/Kontaktiere uns/Telefon) und die Hauptnav
   EINE .header-row nebeneinander. Der Kontaktblock nimmt ~258px, sodass der Nav
   nur der Rest bleibt -- bei 8 laengeren Menuepunkten (Start...Support) reicht
   das im gesamten Desktop-Zwischenbereich (992-~1347px) NICHT: SERVICE/SUPPORT
   brechen in eine 2. Zeile um und ragen in den Hero. Die bestehende
   Schriftverkleinerung (992-1199px) deckt weder den Bereich >1199px ab noch
   reicht sie bei 992px (Nav braucht dort 604px kompakt, hat aber nur 578px).
   Grundsatzloesung statt Symptom-Kompaktierung: Kontaktblock auf volle Breite
   -> die Nav rueckt per flex-wrap auf eine eigene, volle Zeile darunter und hat
   damit die gesamte Spaltenbreite (836px bei 992px >= 817px Bedarf) -> einzeilig
   bis zum Hamburger-Breakpoint (991px), Schrift bleibt in Originalgroesse.
   Per Playwright bei 992/1233px verifiziert (15.07.2026). Nur Desktop; die
   Mobil-/Hamburger-Ansicht (<=991px) bleibt unberuehrt. --- */
@media (min-width: 992px) {
  #header .header-column.justify-content-end > .header-row { flex-wrap: wrap !important; }
  /* Kontaktblock volle Breite (draengt die Nav in die eigene Zeile darunter) UND
     seine zwei Kinder -- header-nav-top (Ueber uns/Kontaktiere uns/Telefon) und
     header-social-icons (Warenkorb/WhatsApp/YouTube) -- nebeneinander in EINE
     Zeile statt gestapelt. Der Block ist per Default display:block, deshalb
     stapelten die Icons in einer eigenen Zwischenzeile und kosteten Header-Hoehe;
     display:flex + row holt sie in die Kontaktzeile hoch (aufgeraeumter, spart
     Hoehe). Nur Desktop -- die Mobil-Ansicht laesst sie bewusst gestapelt
     (contact-block bleibt <992px flex-column, per Playwright bei 375px geprueft). */
  #header .header-contact-block {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
  }
  #header .header-contact-block .header-nav-top { width: auto !important; margin: 0 !important; }
  #header .header-contact-block .header-social-icons { width: auto !important; margin: 0 !important; }
  #header .header-nav.pt-1 { width: 100% !important; flex: 0 0 100% !important; }
  #header .header-nav-main { width: 100% !important; }
  #header .header-nav-main nav { width: 100% !important; }
  #mainNav { width: 100% !important; justify-content: center !important; }
}