/* Dauerhaft sichtbare Menüleiste (A-33, Auftrag des Auftraggebers 2026-09-02).
 *
 * AUSGANGSLAGE: Das Original versteckt das Menü auf ALLEN Breiten und öffnet
 * es als Vollbild-Overlay -- auch auf einem 27-Zoll-Bildschirm. Der
 * Auftraggeber: "Das hat sich die Agentur ausgedacht, und es ist auf einem
 * 27-Zoll-Bildschirm genauso ein Ausklappmenü wie auf dem Handy."
 *
 *   ab 1600 px    Logo · Menüleiste · Sprache · beide Kontaktkästen
 *   1100-1599 px  Logo · Menüleiste · Sprache   (Kontaktkästen weichen)
 *   unter 1100 px das bisherige Ausklappmenü, UNVERÄNDERT
 *
 * WARUM 1100 UND NICHT 992: Die Vorgabe lautete zunächst 992. Gemessen läuft
 * die Leiste dort aber 60 px über den Fensterrand hinaus, bei 1024 px sind es
 * 28 px. Bei 1100 px bleiben 48 px Luft. Enger geht nicht -- Schrift 13 px
 * und Abstand 8 px sind bereits die Untergrenze für eine Hauptnavigation.
 * Die Alternative wäre, die drei Social-Icons unter 1200 px auszublenden; sie
 * stehen aber NUR im Kopf und nicht im Fuß (nachgesehen), das wäre ein echter
 * Verlust. Deshalb vorgelegt statt entschieden.
 *
 * WARUM DIE KONTAKTKÄSTEN UNTER 1600 WEICHEN: Mit beiden Kästen passt die
 * Leiste selbst bei 13 px erst ab 1600; bei 1440 fehlen 85 px. Die Kästen
 * sind zusammen 408 px breit, `position: fixed` und kleben rechts am Fenster.
 * Die Telefonnummer steht weiterhin im Fuß, auf der Kontaktseite und hinter
 * dem Menüpunkt "Kontakt".
 *
 * WARUM MADE-IN-GERMANY IM KOPF VERSCHWINDET: Es steht ohnehin schon im Fuß
 * (.madeInGermany, graue Fassung). Im Kopf ist es eine Dublette, die 125 px
 * belegt. NICHTS WIRD VERSCHOBEN -- die Fußfassung war immer da.
 *
 * BAUVORGABE, NICHT NEBENPRODUKT: Die Kopfhöhe bleibt bei 117 px. Ändert sie
 * sich, verschiebt sich jede Seite darunter, und der Sichtvergleich schlägt
 * auf allen 68 Seiten an -- dann hilft auch die Kopfmaske nicht mehr.
 *
 * RÜCKBAU: Diese Datei aus zusatzdateien/ entfernen und neu bauen. Das
 * Original-Stilblatt ist unberührt; hier wird ausschließlich überschrieben.
 */

/* ========================================================================
   AB 1100 px — die Leiste
   ======================================================================== */
@media (min-width: 1100px) {

  /* DURCHGEHENDER BALKEN über die volle Breite.
   *
   * Die Vorgabe lautete zunächst "Kasten verlängern, kein eigener Streifen".
   * Nach dem Abnahmebild hat der Auftraggeber umentschieden: "ganz den balken
   * bis ganz rechts machen ... aber so das Service in rot bleibt aber über
   * dem grauen ist."
   *
   * Die beiden roten Kästen liegen dabei von selbst obenauf: Sie sind im
   * Original `position: fixed` mit `z-index: 1500` (styles.css ab Zeile
   * 7164). Es braucht KEINE eigene z-index-Regel -- nachgesehen, nicht
   * angenommen. */
  nav.navbar.navbar-default {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 36px 40px 36px 48px !important;
    min-height: 117px !important;
    height: 117px !important;
  }

  /* Der Umschalter hat keine Aufgabe mehr -- die Punkte stehen ja da. Er
     bleibt im HTML (A-27 hat ihn zu einem echten <button> gemacht) und wird
     nur ausgeblendet, damit der Rückbau eine Zeile bleibt. `display:none`
     nimmt ihn zugleich aus der Tab-Reihenfolge, was hier richtig ist. */
  nav.navbar.navbar-default .navigationToggle {
    display: none !important;
  }

  /* Dublette zum Fuß. Siehe Kopf dieser Datei. */
  .madeInGermanyHeader {
    display: none !important;
  }

  /* Die Leiste. Das Original setzt height:0 / opacity:0 -- vollständig
     zurückgenommen.
     flex: 0 0 auto und NICHT 1 1 auto: Sonst dehnt sie sich über den freien
     Raum und schiebt den Sprachumschalter in die Kontaktkästen. Das war der
     Fehler im ersten Entwurf.
     MITTIGER STATT LINKS GEQUETSCHT (Auftraggeber: "alles ist so nach links
     gequetscht ... schon mittiger, Logo soll dort stehen gelassen werden"):
     margin links und rechts auf auto zentriert die Leiste im Raum zwischen
     Logo und Balkenende. Das Logo selbst wird nicht angefasst -- es steht im
     .navbar-header. */
  nav.navbar.navbar-default .navigation {
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    opacity: 1 !important;
    filter: none !important;
    overflow: visible !important;
    position: static !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    transition: none !important;
  }

  /* Falls die Klasse .active vom Umschalten der Fenstergröße hängengeblieben
     ist, darf sie hier nichts mehr bewirken. Ohne das könnte eine Seite nach
     einem Größenwechsel mit offenem Overlay dastehen. */
  nav.navbar.navbar-default.active .navigation {
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    text-align: left !important;
  }

  nav.navbar.navbar-default .navigation > ul.nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  nav.navbar.navbar-default .navigation > ul.nav > li {
    float: none !important;
    font-size: inherit !important;
    /* Flex-Behälter, damit die Höhe des <li> genau dem <a> folgt und nicht
       von einer Zeilenbox abhängt. */
    display: flex !important;
    align-items: center !important;
  }

  /* DIE SOCIAL-ICONS AUF EINE LINIE MIT DEN MENÜPUNKTEN.
   *
   * URSACHE, in vier Anläufen gemessen und erst im letzten gefunden:
   * Die Icon-Links tragen im Original `margin-top: 20px`, die Textlinks 0.
   * Das stammt aus der Overlay-Darstellung, wo die Icons unter den
   * Menüpunkten in einer eigenen Reihe standen und der Abstand gewollt war.
   * In einer waagerechten Leiste schiebt er sie um genau diese 20 px nach
   * unten -- der Versatz, den der Auftraggeber gesehen hat.
   *
   * Meine drei früheren Vermutungen waren falsch und stehen hier, damit
   * niemand sie noch einmal durchläuft: es war NICHT die Schriftfamilie
   * FontAwesome, NICHT deren line-height:1 aus der font-Kurzschreibweise und
   * NICHT die Zeilenbox des <li>. Alle drei sind messbar unbeteiligt --
   * beide <a> sind identisch 44 px hoch, mit gleichem Polster und gleicher
   * Zeilenhöhe. Der einzige Unterschied war der obere Außenabstand.
   *
   * WARUM DAS HIER STEHT UND NICHT IN DER PRÜFUNG: Beim dritten Anlauf der
   * Umbruch-Prüfung hatte ich den Versatz gemessen und daraufhin die
   * PRÜFUNG gelockert, statt die Ursache zu suchen. Der Auftraggeber hat das
   * zu Recht beanstandet. Die Prüfung verlangt jetzt wieder eine Spanne von
   * höchstens 2 px. */
  nav.navbar.navbar-default .navigation > ul.nav > li > a.fa {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 13 px und 8 px Abstand. Gemessen: die einzige Stufe, die mit beiden
     Kontaktkästen ab 1600 px durchpasst. Kleiner wird es nicht -- darunter
     leidet die Lesbarkeit, und die Berührungsziele aus A-28 kämen wieder in
     Bedrängnis. */
  nav.navbar.navbar-default .navigation > ul.nav > li > a {
    font-size: 13px !important;
    padding: 9px 8px !important;
    line-height: 1.2 !important;
    letter-spacing: .01em;
    white-space: nowrap !important;
  }

  /* SPRACHUMSCHALTER ALS SCHALTERPAAR (Variante A, gewählt 2026-09-02).
   *
   * VORHER stand hier ein senkrechter Trennstrich VOR der Gruppe. Der
   * Auftraggeber: "DE/EN sieht aus, als gehörte es nicht dorthin ... es wirkt
   * angeklebt, nicht als Teil der Leiste."
   *
   * Die Ursache, so wie ich sie sehe: Der Strich schnitt die Gruppe vom Menü
   * ab, statt DE von EN zu trennen -- und DE/EN hatte weder die Form eines
   * Menüpunkts noch die eines Schalters, sondern war reiner Text zwischen
   * zwei Symbolgruppen.
   *
   * JETZT: ein umrandetes Paar, die aktive Sprache hinterlegt. Damit ist auf
   * einen Blick erkennbar, dass es ein Bedienelement ist und welche Sprache
   * gerade gilt. Der Trennstrich entfällt -- die Form trennt selbst.
   *
   * KEIN margin-left:auto -- das würde die Gruppe ans rechte Ende schieben,
   * mitten in die Kontaktkästen. */
  nav.navbar.navbar-default .navigation .mod-languages {
    margin-left: 26px !important;
    padding-left: 0 !important;
    border-left: none !important;
  }

  nav.navbar.navbar-default .navigation .mod-languages ul {
    display: flex !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 3px;
    overflow: hidden;
  }

  nav.navbar.navbar-default .navigation .mod-languages li {
    float: none !important;
  }

  /* Die nicht aktive Sprache tritt zurück, ohne unlesbar zu werden.
     0.72 ist bewusst nicht tiefer: Der Kontrast muss auch für die inaktive
     Sprache reichen -- sie ist ja das Ziel des Klicks. */
  nav.navbar.navbar-default .navigation .mod-languages a {
    opacity: .72;
  }

  nav.navbar.navbar-default .navigation .mod-languages li.lang-active a {
    background: rgba(255, 255, 255, .16);
    opacity: 1;
  }

  nav.navbar.navbar-default .navigation .mod-languages a {
    font-size: 12px !important;
    padding: 6px 7px !important;
    line-height: 1.2 !important;
  }
}

/* ========================================================================
   1100–1599 px — die Kontaktkästen weichen
   ======================================================================== */
@media (min-width: 1100px) and (max-width: 1599px) {
  /* Telefonnummer und Servicetermin stehen weiterhin im Fuß, auf der
     Kontaktseite und hinter dem Menüpunkt "Kontakt". */
  .schnellkontakt,
  .servicekontakt {
    display: none !important;
  }
}

/* ========================================================================
   AB 1600 px — der Platz der Kontaktkästen wird freigehalten
   ========================================================================
   Die Kästen sind `position: fixed` und zählen für die Zentrierung NICHT
   mit. Eine bis zum Fensterrand zentrierte Leiste liefe deshalb unter sie.

   ERSTER VERSUCH war ein fester Abstand von 90 px statt margin:auto. Der
   ging bei 1920 auf, aber bei genau 1600 überlappte die Leiste die Kästen um
   46 px -- die Prüfung hat es gefunden. Ein fester Wert kann nicht für beide
   Breiten stimmen.

   RICHTIG ist, dem Balken rechts den Platz der Kästen als Polster zu geben.
   Dann rechnet `margin:auto` von selbst mit dem verbleibenden Raum, auf
   jeder Breite. Die 500 px sind gemessen: Bei 1600 px beginnen die Kästen
   bei x=1106, also 494 px vom rechten Rand; 500 gibt sechs Pixel Reserve. */
@media (min-width: 1600px) {
  nav.navbar.navbar-default {
    padding-right: 500px !important;
  }
}

/* ========================================================================
   SCHRIFTGRÖSSE WÄCHST MIT DER BREITE
   ========================================================================
   ANLASS (2026-09-02): Der Auftraggeber arbeitet an einem 2547 px breiten
   Bildschirm und meldete "leider zu klein, ich seh kaum was". Zu Recht: Die
   13 px waren die Untergrenze für die ENGSTE Breite, bei der die Leiste noch
   passt (1600 px, dort bleiben 76 px Luft). Auf einem 2547er Bildschirm ist
   dieselbe Größe verloren.

   Deshalb gestaffelt statt einheitlich. Je breiter das Fenster, desto weiter
   rücken die fixierten Kontaktkästen nach rechts und desto mehr Raum steht
   zur Verfügung. Die Stufen sind gemessen, nicht geschätzt -- jede muss
   navigationsleiste-pruefen.mjs bestehen.

   Bewusst KEIN clamp() mit vw: Eine stufenlose Größe lässt sich nicht mehr
   an festen Breiten nachmessen, und genau das braucht dieses Projekt. */

/* 1600–1919 BLEIBT BEI 13 px.
   Erster Versuch waren hier 14 px -- gemessen überlappte die Leiste dann bei
   genau 1600 px die Kontaktkästen um 42 px. Das ist die engste Breite, auf
   der beide nebeneinander stehen; sie gibt die Größe vor, nicht der Wunsch.
   Größer wird es erst, wenn die Kästen weit genug rechts stehen -- ab 1920. */

/* ab 1920: die Kästen stehen weit rechts, hier ist Luft */
@media (min-width: 1920px) {
  nav.navbar.navbar-default .navigation > ul.nav > li > a {
    font-size: 16px !important;
    padding: 10px 14px !important;
  }
  nav.navbar.navbar-default .navigation .mod-languages a {
    font-size: 14px !important;
    padding: 7px 9px !important;
  }
  nav.navbar.navbar-default .navigation .mod-languages {
    margin-left: 18px !important;
    padding-left: 18px !important;
  }
}

/* ab 2400: sehr breite Bildschirme -- der Arbeitsplatz des Auftraggebers
   liegt bei 2547 px */
@media (min-width: 2400px) {
  nav.navbar.navbar-default .navigation > ul.nav > li > a {
    font-size: 18px !important;
    padding: 11px 17px !important;
  }
  nav.navbar.navbar-default .navigation .mod-languages a {
    font-size: 16px !important;
    padding: 8px 11px !important;
  }
  nav.navbar.navbar-default .navigation .mod-languages {
    margin-left: 22px !important;
    padding-left: 22px !important;
  }
}

/* ========================================================================
   UNTER 1100 px — unverändert
   ========================================================================
   Hier steht bewusst NICHTS. Das Ausklappmenü des Originals bleibt, wie es
   ist: Umschalter sichtbar, Overlay beim Klick. Auf einem Handy ist genau
   das richtig. */
