/* Intentional deviations from the cloned WordPress theme.
   Everything here is a deliberate behaviour change, kept separate from the
   theme's own byte-identical CSS so it stays obvious and revertible. */

/* Keep the top navigation visible while scrolling down.
   The theme's main.min.js adds `nav-up` to <body> when scrolling down past
   200px, and styles.min.css then slides the header out with
   `.nav-up .page_header{transform:translateY(-100%)}`. We neutralise only that
   transform; the class still toggles, so any other nav-up styling is untouched. */
.nav-up .page_header { transform: none !important; }

/* The header is persistent now, so native fragment navigation must clear it.
   The theme only compensates for clicks it intercepts (a constant
   scrollOffset = 150); a direct #anchor URL would land underneath. */
html { scroll-padding-top: 100px; }

/* Below 981px the theme collapses .page_header to zero height, so the rule
   above is a no-op there — the mobile navigation is the fixed hamburger, and
   the theme slides it off-screen in the same nav-up state. Keep it reachable,
   otherwise "navigation stays visible" is desktop-only. */
@media (max-width: 980px) {
  .nav-up .cd-nav-trigger { right: 30px; }
}

/* Reserve the ticker's height from first paint. Telex only adds .telex (and
   its min-height) once it initialises, so without this the black bar is 10px
   of padding and then jumps to ~37px. */
#tx { line-height: 1.7; min-height: 1.7em; }

/* Eingefuegte Zusatzinhalte (src/content/) liegen ausserhalb von
   .entry-content.gutenberg, damit sie nicht in die opacity:0-Regel des Themes
   geraten. Dadurch greift aber auch dessen Innenabstand nicht — .centered2
   setzt nur die Breite. Ohne das hier klebt der Text am Bildschirmrand. */
.rt-content { padding: 60px 20px; }
@media screen and (max-width: 520px) { .rt-content { padding: 40px 15px; } }

/* Handlungsaufruf auf Seiten ohne Formular. Bewusst zurueckhaltend: er soll
   den Beitrag abschliessen, nicht ihn ueberlagern. */
.rt-cta {
  margin: 20px auto 0;
  padding: 40px;
  background: #f5f5f5;
  border-left: 4px solid #dc0d23;
}
.rt-cta h2 { font-size: 32px; line-height: 125%; margin: 0 0 12px; }
.rt-cta p  { margin: 0 0 24px; max-width: 62ch; }
.rt-cta .wp-block-buttons { gap: 12px; flex-wrap: wrap; }
@media screen and (max-width: 520px) {
  .rt-cta { padding: 28px 20px; }
  .rt-cta h2 { font-size: 26px; }
}

/* Die Einwilligungs-Checkbox ist absolut positioniert und 25px hoch, ihr
   Label nur 19px. Passt der Text in EINE Zeile -- also auf breiten
   Formularen wie dem auf /kontakt/ --, ragt sie unter das Fieldset und
   ueberlappt das Turnstile-Feld darunter. Bricht der Text auf zwei Zeilen,
   faellt es nicht auf; deshalb war es bisher unsichtbar. */
.field__radio .field_radio__label { min-height: 25px; }

/* /kontakt/ war 2,8 Bildschirme hoch, davon 400px reine Abschnittsabstaende
   (zweimal 100px oben und unten) und 445px Hero fuer drei Zeilen Text.
   Auf einer Kontaktseite will man die Nummer oder das Formular sehen, nicht
   scrollen. Nur hier gestrafft -- die Abstaende gelten site-weit. */
/* Das padding-top am .s_header NICHT anfassen: es ist ein Inline-Stil, den
   das Theme-JavaScript auf die Hoehe der festen Kopfzeile setzt (87px).
   Ueberschreibt man ihn, rutscht der Hero unter die Navigation.
   Kuerzen laesst sich stattdessen der Cover-Block darin -- 40vh sind auf
   einer Kontaktseite viel Bildflaeche fuer drei Zeilen Text. */
.page_kontakt .s_header .wp-block-cover { min-height: 220px; }
.page_kontakt main section.bg--grey,
.page_kontakt main section.centered2 { padding-top: 48px; padding-bottom: 48px; }
@media screen and (max-width: 520px) {
  .page_kontakt .s_header { padding-top: 24px; }
  .page_kontakt main section.bg--grey,
  .page_kontakt main section.centered2 { padding-top: 32px; padding-bottom: 32px; }
  /* Auf dem Handy landete die Telefonnummer 39px hinter der Bildschirmkante.
     Der Cover allein zu kuerzen half nichts: der Abschnitt selbst traegt
     min-height 50vh und blieb dadurch gleich hoch. */
  .page_kontakt .s_header { min-height: 0; }
  .page_kontakt .s_header .wp-block-cover { min-height: 170px; }
}

/* Bestaetigung nach dem Absenden. Erbt Farbe und Hintergrund vom Abschnitt --
   das Formular steht 24x im roten s_contact (weisse Schrift) und einmal im
   grauen Abschnitt auf /kontakt/ (dunkle Schrift). currentColor loest das,
   ohne zwei Varianten pflegen zu muessen. */
.rt-form-done {
  padding: 48px 0 24px;
  text-align: center;
  color: inherit;
}
.rt-form-done:focus { outline: none; }
.rt-form-done__haken {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: block;
  color: inherit;
}
.rt-form-done h2 { margin: 0 0 16px; line-height: 120%; }
.rt-form-done p  { margin: 0 0 8px; font-size: 20px; }
.rt-form-done__ruf { margin-top: 24px; }
.rt-form-done__ruf a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  /* Als Tippziel gross genug: die Zeile allein waere 18px hoch, empfohlen
     sind 44px. Auf der Bestaetigung ist das der Link, den man am Handy
     tatsaechlich trifft. */
  display: inline-block;
  padding: 13px 8px;
}
@media screen and (max-width: 520px) {
  .rt-form-done { padding: 32px 0 16px; }
  .rt-form-done__haken { width: 52px; height: 52px; margin-bottom: 16px; }
  .rt-form-done p { font-size: 18px; }
}

/* Fehlermeldung des Formulars. War bisher voellig ungestaltet -- eine nackte
   Zeile unter dem Absendeknopf, die man leicht uebersieht. Sie steht in
   beiden Umgebungen (rot und grau), daher wieder currentColor. */
.rt-form-msg {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-size: 18px;
  line-height: 140%;
  color: inherit;
}
.rt-form-msg--error { font-weight: 700; }

/* Verweis auf den kostenlosen Domain-Check. Deutlicher abgesetzt als der
   Handlungsaufruf: es ist ein Angebot, keine Bitte. Rahmen statt Flaeche,
   damit er auch im roten s_contact-Umfeld nicht mit dem Formular konkurriert. */
.rt-scan {
  margin: 40px auto;
  padding: 36px 40px;
  border: 2px solid #dc0d23;
  border-radius: 4px;
  background: #fff;
}
/* Als p.rt-scan__label, nicht nur .rt-scan__label: die Regel .rt-scan p
   weiter unten ist spezifischer und hat die Farbe sonst ueberschrieben. */
.rt-scan p.rt-scan__label {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #dc0d23;
  font-weight: 700;
}
.rt-scan h2 { font-size: 30px; line-height: 125%; margin: 0 0 12px; color: #000; }
.rt-scan p  { margin: 0 0 24px; max-width: 62ch; color: #000; }
.rt-scan .wp-block-buttons { margin: 0; }
@media screen and (max-width: 520px) {
  .rt-scan { padding: 26px 20px; margin: 28px auto; }
  .rt-scan h2 { font-size: 24px; }
}

/* Der Einwilligungsbanner liegt mit z-index 10001 ueber dem mobilen Menue
   (z-index 100). Mit einem dritten Eintrag in der rechten Kopfzeile rutscht
   "Kontakt" bei 375px in eine zweite Rasterzeile -- und damit hinter den
   Banner. Betroffen waeren ausgerechnet Erstbesucher aus der Suche, denn nur
   die sehen den Banner ueberhaupt. Solange das Menue offen ist, tritt er
   zurueck. Nachgemessen bei 375x812: "Kontakt" liegt dann bei 584-602 frei.
   Der Ticker (.tx_outer, z-index 10000) braucht das nicht -- er sitzt bei
   775-812 und damit unter allen Menuepunkten. */
body.nav-is-visible .rt-consent { display: none; }

/* ====================================================================
   Kopfzeilen-Handlungsaufruf "Domain-Sicherheit pruefen"

   Der Riegel ist ein EIGENES Geschwister der Kopfzeile (div.rt-nav-cta),
   kein Listeneintrag der linken Navigation mehr. Warum, siehe
   scripts/build-static.mjs -- kurz: als Teil der Liste teilte er den Kasten
   der Menuepunkte, und jede Positionierung darin landet zwangslaeufig im
   Bereich des Menues.

   Drei Zustaende, in dieser Rangfolge:

     ab 1461px   Kopfzeile einzeilig. Riegel MITTIG in der Luecke zwischen
                 dem letzten Menuepunkt und "Karriere". Umgesetzt ueber
                 margin:0 auto an einem Flex-Kind -- automatische Raender
                 verteilen den freien Platz gleichmaessig auf beide Seiten.
                 Kein Pixelwert, der zur Schriftbreite passen muesste.

     981-1460px  Theme stellt die Spalten uebereinander (col.right order:1
                 mit absolut gesetzter nav oben rechts, col.left order:2).
                 Riegel bekommt eine EIGENE Zeile direkt unter Karriere und
                 Kontakt, rechtsbuendig, mit Abstand nach oben und unten.

     bis 980px   Mobiles Overlay, unveraendert wie bisher.

   Was in keinem Zustand passieren darf: der Riegel unter oder ueber den
   Menuepunkten. Flex-Geschwister ueberlappen sich nicht, und in der
   zweizeiligen Fassung liegt er ueber dem Menue, nicht darauf.
   ==================================================================== */

/* Das Theme setzt JEDES span in der Navigation auf position:absolute;
   left:0; top:0 -- ohne Zuruecksetzen liegen beide Textzeilen uebereinander
   in der Ecke. Gilt weiterhin, der Riegel steht im selben Umfeld. */
.header_navigation_helper .rt-nav-cta > a span {
  position: static; left: auto; top: auto;
}
.header_navigation_helper .rt-nav-cta > a:after { content: none; }

/* Grundgestalt. Raster statt Flexbox im Knopf: die drei Kinder sind
   Geschwister, das Symbol soll ueber beide Zeilen gehen. Mit flex-wrap
   sprang es aus dem Riegel heraus. */
.header_navigation_helper .rt-nav-cta { flex: 0 0 auto; }
.header_navigation_helper .rt-nav-cta > a {
  display: grid; grid-template-columns: auto auto; column-gap: 11px;
  justify-content: start; align-items: center;
  box-sizing: border-box; height: 44px; padding: 0 20px 0 16px;
  background: #14171c; color: #fff; border-radius: 5px;
  font-size: 16px; line-height: 1; font-weight: 400; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: background .25s cubic-bezier(.645,.045,.355,1);
}
.header_navigation_helper .rt-nav-cta > a > .rt-nav-scan__ico {
  display: block; width: 20px; height: 23px; color: #ff3b4e;
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
}
.header_navigation_helper .rt-nav-cta > a > .rt-nav-scan__lang {
  display: block; grid-column: 2; grid-row: 1;
  color: #fff; font-size: 17px; line-height: 18px; font-weight: 400;
}
.header_navigation_helper .rt-nav-cta > a > .rt-nav-scan__sub {
  display: block; grid-column: 2; grid-row: 2;
  color: rgba(255,255,255,.62); font-size: 12px; line-height: 14px;
  letter-spacing: .01em;
}
.header_navigation_helper .rt-nav-cta > a:hover,
.header_navigation_helper .rt-nav-cta > a:focus-visible { background: #dc0d23; }
.header_navigation_helper .rt-nav-cta > a:hover > .rt-nav-scan__ico,
.header_navigation_helper .rt-nav-cta > a:hover > .rt-nav-scan__sub,
.header_navigation_helper .rt-nav-cta > a:focus-visible > .rt-nav-scan__ico,
.header_navigation_helper .rt-nav-cta > a:focus-visible > .rt-nav-scan__sub { color: #fff; }

/* --- Kopfzeile: zwei Zustaende ---------------------------------------

   Werner am 17.09.2026: "wenn der schwarze button nicht zwischen dem linken
   menuepunktband und karriere passt dann soll die mobile version angezeigt
   werden". Damit faellt der fruehere dreizeilige Zwischenzustand weg.

   Die Schwelle ist 1461 -- genau dort, wo das Theme selbst aufhoert, die
   Spalten uebereinanderzustapeln (@media max-width:1460px). Das ist kein
   runder Wunschwert, sondern der einzige Punkt, an dem beide Zustaende ohne
   Gegenregeln aufgehen. Gemessen ueber drei Seiten (Startseite, Karriere,
   Firewall -- letztere traegt das breiteste Menue) und drei Schriften:

     Breite   Luecke links / rechts   Menuezeilen
     1420          22 / 12                1      zu eng
     1440          31 / 21                1
     1460          41 / 31                1      <- Zustand 1 beginnt hier
     1500          50 / 40                1

   Bei Ersatzschrift (font-display:swap) braucht das Menue mehr: mit Arial
   bleibt es bis 1480 zweizeilig, mit Verdana auch darueber. Das ist ein
   Umbruch, keine Ueberlappung -- flex-wrap:nowrap haelt den Riegel in der
   Zeile, und mit der Webschrift loest es sich wieder auf. -------------- */
@media screen and (min-width: 1461px) {
  /* Das Theme gibt der linken Spalte calc(100% - 340px) und der rechten
     340px -- zusammen exakt die volle Zeile. Ein drittes Kind waere damit
     umgebrochen. Beide auf Inhaltsbreite, dann bleibt die Luecke fuer den
     Riegel uebrig, statt der linken Spalte zu gehoeren. */
  .header_navigation .col.left  { width: auto; min-width: 0; }
  /* flex-shrink:0 an der rechten Spalte: ohne das ist sie das nachgiebigste
     Element der Zeile, und bei Ersatzschrift rutschen "Karriere" und
     "Kontakt" innerhalb ihrer Spalte untereinander. Mit der Regel landet die
     Stauchung in .col.left, das ohnehin min-width:0 traegt. */
  .header_navigation .col.right { width: auto; flex-shrink: 0; }
  .header_navigation_helper { align-items: center; flex-wrap: nowrap; }
  .header_navigation_helper .rt-nav-cta { margin: 0 auto; }
}

/* --- 981-1460px: Mobilnavigation hochgezogen -------------------------

   Das Theme schaltet die Mobilnavigation erst bei 980 ein. Unterhalb 1461
   passt der Riegel aber nicht mehr in die Zeile, also muss die Mobilfassung
   schon hier greifen.

   Der Haltepunkt 980 des Themes laesst sich NICHT einfach hochsetzen: in
   seinem Block stecken 73 Regeln, davon 25 fuer Fusszeile, Inhaltsraster,
   Aufmacher und Schaltflaechen. Die mitzuverschieben haette das Layout
   jeder Seite zwischen 981 und 1460 umgebaut. Uebernommen sind deshalb nur
   die 48 Regeln der Navigation und des Kopfes, woertlich aus
   @media (max-width:980px) von styles.min.css. Ausgelassen: alles unter
   .page_footer, .footer__logo, .footer_navigation_helper, .s_grid,
   .s_left_right, .s_teaser_home, .entry-content, .wp-block-*, .breadcrumb.

   .r_incident bleibt drin, obwohl es kein Menue ist: der Umschalter sitzt
   auf top:85px/right:30px und laege sonst auf dem roten Notfall-Kasten.

   Bei einer Theme-Aktualisierung muss dieser Block neu gezogen werden. --- */
@media screen and (min-width: 981px) and (max-width: 1460px) {
  .headnav__wrapper { display:none;position:fixed;top:0px;left:0px;z-index:100;background-color:#dc0d23;color:#FFF;width:100vw;height:100vh;padding:150px 35px 50px }
  .headnav__wrapper .back { position:absolute;top:100px !important;font-size:28px;font-weight:700;padding-left:18px;display:none }
  .headnav__wrapper .back span { display:none }
  .headnav__wrapper .back:before { content:' ';display:block;position:absolute;left:-5px;top:-7px;background-image:url(/_assets/img/back.svg);width:15px;height:30px;background-size:100% auto;background-repeat:no-repeat;background-position:left center }
  .subnav--opened .header_navigation { transform:translateX(-125%);opacity:0 }
  .header_subnavigation { top:0px !important;padding-left:0 }
  .subnav--opened .header_subnavigation { transform:translateX(0);opacity:1 }
  .header_subnavigation ul li { margin-bottom:0;margin-top:5px }
  .header_subnavigation ul li a { font-size:22px }
  .header_subnavigation .col.left { width:100%;padding-top:0 !important }
  .header_subnavigation .col.right { display:none }
  .header_navigation_helper .col.left { order:1 }
  .header_navigation_helper .col.left a { position:relative;color:#FFF;display:block;width:100%;padding-right:50px;padding-left:18px }
  .header_navigation_helper .col.left a:after { content:'+';position:absolute;right:5px;top:-5px;font-size:32px }
  .header_navigation_helper .col.left li { display:block;width:100%;font-size:28px;margin-bottom:25px;margin-right:0 }
  .header_navigation_helper .col.right { order:2;padding:0;margin-top:50px }
  .header_navigation_helper .col.right a { color:#FFF;font-size:18px }
  .header_navigation_helper .col.right ul:after { content:' ';display:block;clear:both }
  .header_navigation_helper .col.right li { margin-bottom:20px;width:50%;float:left;margin-right:0;max-width:200px }
  .header_navigation_helper .col.right a { padding-left:0 }
  .header_navigation_helper .col.right a:before { content:'\\';margin-right:10px }
  .header_navigation_helper .col.right nav { position:relative }
  .header_navigation_helper ul li span { color:#FFF }
  .r_incident { width:180px }
  .page_header { padding:0;background-color:transparent }
  .page_header>div { padding:0px }
  .page_header .logo { position:absolute;right:15px;top:15px;z-index:110 }
  .r_incident,.r_stoerer { right:auto;left:15px;top:0 }
  .has--scrolled .page_header .logo>div,body.not_home .page_header .logo>div,.page_header .logo,.page_header .logo svg { width:70px;height:70px;display:block;overflow:hidden }
  #Gruppe_109 { display:none }
  .cd-nav-trigger { position:fixed;cursor:pointer;top:85px;right:30px;height:40px;width:40px;overflow:hidden;white-space:nowrap;color:transparent;z-index:50000;background:transparent;display:block;transition:right .3s ease-out }
  .cd-nav-trigger span,.cd-nav-trigger span::after,.cd-nav-trigger span::before { position:absolute;width:40px;height:2px;background-color:#dc0d23 }
  .cd-nav-trigger span { left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transition:background-color .2s;-moz-transition:background-color .2s;transition:background-color .2s }
  .cd-nav-trigger span::after,.cd-nav-trigger span::before { content:'';top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s }
  .cd-nav-trigger span::before { -webkit-transform:translateY(-14px);-moz-transform:translateY(-14px);-ms-transform:translateY(-14px);-o-transform:translateY(-14px);transform:translateY(-14px) }
  .cd-nav-trigger span::after { -webkit-transform:translateY(14px);-moz-transform:translateY(14px);-ms-transform:translateY(14px);-o-transform:translateY(14px);transform:translateY(14px) }
  body.nav-is-visible #nav-main { display:block }
  body.nav-is-visible .cd-nav-trigger span { background-color:transparent }
  body.nav-is-visible .cd-nav-trigger span::before { -webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg) }
  body.nav-is-visible .cd-nav-trigger span::after { -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg) }
  .headnav__wrapper .headnav__wrapper_inner { width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch }
  .nav-is-visible { position:fixed }
  .nav-is-visible .headnav__wrapper { display:block;visibility:visible;opacity:1;z-index:100 }
  .nav-is-visible .cd-nav-trigger span,.nav-is-visible .cd-nav-trigger span::after,.nav-is-visible .cd-nav-trigger span::before { background-color:#FFF }
  .nav-is-visible #Pfad_54 { fill:#FFF }
  .nav-up .page_header { transform:translateY(-100%) }
  .nav-up .r_incident,.nav-up .r_stoerer { transform:translateY(-10%);opacity:0 }
  .nav-up .cd-nav-trigger { right:-50px }
}

/* --- Unter-Navigation im Overlay-Zustand ----------------------------

   Befund vom 21.09.2026: Im Overlay oeffnete sich das Untermenue als leere
   rote Flaeche. Ursache: .header_subnavigation traegt in der Grundregel
   display:none. Eingeblendet wurde es einzig ueber

     .isMobile .header_subnavigation { display:block; transform:translateX(125%); opacity:0 }

   isMobile setzte WordPress serverseitig (Mobile_Detect in
   bnc_custom_base/library/functions.php). Eine zwischengespeicherte statische
   Seite kann das nicht pro Geraet, deshalb setzt build-static.mjs die Klasse
   seit dem Umbau clientseitig ueber die Browserkennung.

   Damit haengt die Sichtbarkeit am GERAET statt an der Breite -- und genau da
   klafft die Luecke: ein schmal gezogenes Fenster auf dem Rechner meldet
   "isDesktop", bekommt aber das Overlay. Ergebnis: Untermenue oeffnet leer.
   Auf dem Telefon lief es, auf dem PC nicht. iPads ab iPadOS 13 melden
   ebenfalls eine Mac-Kennung und fielen in dieselbe Luecke.

   Ersatz: dieselbe Wirkung an der Fensterbreite. Das Feld steht immer, liegt
   ausserhalb des Sichtfelds und wird beim Oeffnen hereingeschoben.
   .headnav__wrapper_inner traegt overflow:hidden, es entsteht also keine
   Querlaufleiste. Die Geraeteklasse bleibt unangetastet -- sie steuert noch
   anderes. ---------------------------------------------------------- */
@media screen and (max-width: 1460px) {
  .header_subnavigation { display: block; transform: translateX(125%); opacity: 0; }
  .subnav--opened .header_subnavigation { transform: translateX(0); opacity: 1; }
}

/* --- 981-1460px: Schreibtisch-Regeln des Themes zurueckdrehen --------

   In diesem Band liegt unsere Overlay-Optik an, gleichzeitig gelten aber
   weiter die Regeln aus @media (min-width:981px) des Themes. Beide Fassungen
   vermischten sich: graues Feld (#EEE) mit 270px Innenabstand, an der
   Bildschirmkante festgenagelt, per top:125px ueber den Ruecksprungtitel
   geschoben, und dessen max-width:200px schnitt ihn ab. Das war das Bild mit
   den uebereinanderliegenden Eintraegen.

   .has--scrolled .header_subnavigation traegt im Theme top:65px !important
   und ist spezifischer als unser top:0 !important -- deshalb steht das
   Gegenstueck hier mit gleicher Spezifitaet und gewinnt ueber die
   Reihenfolge. ------------------------------------------------------ */
@media screen and (min-width: 981px) and (max-width: 1460px) {
  .header_subnavigation { position: absolute; background-color: transparent; padding: 0; }
  .subnav--opened .header_subnavigation,
  .not_home.subnav--opened .header_subnavigation,
  .has--scrolled .header_subnavigation { top: 0 !important; }
  .header_subnavigation .flex { padding-left: 0; margin: 0; max-width: none; }
  /* Der 981er-Block nagelt den Ruecksprungtitel mit left:0 an die Fensterkante
     und gibt ihm width:100% samt max-width:200px. Die Mobilfassung setzt
     nichts davon: der Titel steht im Fluss und haelt damit die 35px
     Innenabstand des Overlays ein. Gemessen bei 420 und 760: x=35, Breite 222
     -- bei 981 bis 1460 vorher x=0 und Breite volles Fenster. */
  .headnav__wrapper .back { left: auto; width: auto; max-width: none; }

  /* Die Geschwisterleiste am Anfang des Inhalts ("Backup \ Netzwerksicherheit
     \ ..." auf Unterseiten). Beim Kopieren der Navigationsregeln hatte ich sie
     als Inhalt aussortiert -- sie gehoert aber zum Kopfbereich: das Theme
     blendet sie im Mobilentwurf aus (@media max-width:980px: display:none).
     Ohne diese Regel behielt sie ihre Schreibtischlage, waehrend die Kopfzeile
     auf 30px zusammenschrumpfte. Sie rutschte damit unter den roten
     Notfallkasten, der ihren ersten Eintrag "Backup" verdeckte. Gemessen auf
     /it-sicherheitsloesungen/firewall/ bei 1280: Leiste bei y=30 statt y=74. */
  .breadcrumb { display: none; }

  /* Logo. Das Theme schrumpft es ab 981 auf 35px, sobald die Seite gescrollt
     ist oder es eine Unterseite ist -- gedacht fuer die schmale Schreibtisch-
     Kopfzeile. In diesem Band liegt aber die Mobilfassung an, die 70px
     vorsieht. Beides mischte sich: ein 35px-Kasten mit einem 70px-Rahmen
     darin, das Zeichen 35x40 und per margin-top:25px nach unten geschoben.
     Gemessen auf /it-sicherheitsloesungen/e-mail-security/ bei 1280:
       ungescrollt 88% des Zeichens sichtbar, gescrollt nur noch 25%.
     Die Mobilfassung bei 980 zeigt dagegen durchgehend 100%.

     Die Theme-Regeln tragen .has--scrolled bzw. body.not_home und sind damit
     spezifischer als die Mobilregeln aus dem kopierten Band. Deshalb hier
     dieselben Selektoren -- gleiche Spezifitaet, spaetere Stelle. */
  .has--scrolled .page_header .logo,
  body.not_home .page_header .logo { width: 70px; height: 70px; top: 15px; }
  .has--scrolled .page_header .logo > div,
  body.not_home .page_header .logo > div { width: 70px; height: 70px; margin-top: 0; }
  .has--scrolled .page_header .logo svg,
  body.not_home .page_header .logo svg { width: 70px; height: 70px; }

  /* Derselbe Spezifitaetskonflikt eine Ebene hoeher: das Theme gibt der
     Kopfzeilenhuelle ab 981 padding:15px 20px, die Mobilfassung padding:0.
     Da das Logo absolut in dieser Huelle sitzt, verschob der Abstand es um
     20px nach links und 15px nach unten -- gemessen bei 1280 auf x=1175/y=30
     statt x=1195/y=15. Bei y=30 reicht seine Unterkante bis 100 und damit in
     den Umschalter hinein, der bei top:85 beginnt. */
  .has--scrolled .page_header > div,
  body.not_home .page_header > div { padding: 0; }
}

/* --- bis 1460px: mobiles Overlay ------------------------------------ */
@media screen and (max-width: 1460px) {
  .header_navigation_helper .rt-nav-cta {
    order: 2; width: 100%; margin: 5px 0 25px;
  }
  .header_navigation_helper .col.right { order: 3; }
  .header_navigation_helper .rt-nav-cta > a {
    height: auto; min-height: 62px; width: 100%;
    padding: 12px 20px 12px 18px; column-gap: 14px;
    background: #fff; color: #dc0d23; border-radius: 6px;
    box-shadow: none; white-space: normal;
  }
  .header_navigation_helper .rt-nav-cta > a > .rt-nav-scan__ico {
    width: 24px; height: 28px; color: #dc0d23;
  }
  .header_navigation_helper .rt-nav-cta > a > .rt-nav-scan__lang {
    color: #dc0d23; font-size: 20px; line-height: 23px;
  }
  .header_navigation_helper .rt-nav-cta > a > .rt-nav-scan__sub {
    color: rgba(176,10,28,.9); font-size: 13px; line-height: 15px;
  }
  .header_navigation_helper .rt-nav-cta > a:hover,
  .header_navigation_helper .rt-nav-cta > a:focus-visible {
    background: #fff; box-shadow: none;
  }
  .header_navigation_helper .rt-nav-cta > a:hover > .rt-nav-scan__ico,
  .header_navigation_helper .rt-nav-cta > a:focus-visible > .rt-nav-scan__ico { color: #dc0d23; }
  .header_navigation_helper .rt-nav-cta > a:hover > .rt-nav-scan__sub,
  .header_navigation_helper .rt-nav-cta > a:focus-visible > .rt-nav-scan__sub { color: rgba(176,10,28,.9); }
}