/* 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 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 ALLE Regeln tragen .col.left. Das Theme faerbt mit ".header_navigation_helper .col.left a" -- drei Klassen, weil .col.left zwei sind. Mit weniger gewinnt das Theme, und im roten Mobilmenue steht dann weiss auf weiss. Zweimal passiert. Das Theme setzt ausserdem JEDES span in der Navigation auf "position:absolute; left:0; top:0" -- ohne Zuruecksetzen liegen beide Textzeilen uebereinander in der Ecke. ==================================================================== */ .header_navigation_helper .col.left li.rt-nav-scan > a span { position: static; left: auto; top: auto; } .header_navigation_helper .col.left li.rt-nav-scan > a:after { content: none; } /* Aus dem Fluss nehmen -- sonst blaeht der 44px hohe Riegel die Navigationszeile von 27px auf 43px auf und hebt die ganze Zeile an. Das war der eigentliche Grund, warum die erste Fassung schief aussah. translateY(-50%) statt bottom:0 -- damit sitzt die Mitte des Riegels auf der Mitte der Kopfzeile, egal wie hoch die gerade ist. Mit bottom:0 klebte er an der Unterkante und lag 23px unter der Mitte; beim Scrollen, wenn nur noch die Kopfzeile zu sehen ist, faellt das auf. */ .header_navigation_helper .col.left li.rt-nav-scan { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; margin: 0; padding: 0; float: none; } /* Waagerecht ueber `right` vom Bezugsrahmen aus. Der ist .header_navigation (x 139-1845 bei 1880px), NICHT die Kopfzeile -- eine erste Fassung mit left:50% rechnete gegen die falsche Box und schob den Riegel 308px in "Blog" hinein. Die nutzbare Luecke liegt zwischen dem Ende der Menuepunkte (x 995) und dem Beginn der rechten Spalte (x 1505), also 510px fuer einen 282px breiten Riegel. */ /* An der Kante der linken Spalte: 50px vor "Karriere", 188px hinter "Blog". Damit ist der Riegel der rechte Abschluss der Navigationszeile und nicht ein Koerper in ihrer Mitte. Zum Incident-Banner bleiben 140px. */ .header_navigation_helper .col.left li.rt-nav-scan { right: 380px; } /* Raster statt Flexbox: die drei Kinder sind Geschwister, das Symbol soll ueber beide Zeilen gehen. Mit flex-wrap sprang es aus dem Riegel heraus. */ .header_navigation_helper .col.left li.rt-nav-scan > 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 .col.left li.rt-nav-scan > 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 .col.left li.rt-nav-scan > 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 .col.left li.rt-nav-scan > a > .rt-nav-scan__sub { display: block; grid-column: 2; grid-row: 2; color: rgba(255,255,255,.78); font-size: 12px; line-height: 12px; font-weight: 300; letter-spacing: .03em; margin-top: 3px; } /* Erst bei Absicht wird die Flaeche rot -- die Sattfarbe gehoert sonst der Notfallnummer. */ .header_navigation_helper .col.left li.rt-nav-scan > a:hover, .header_navigation_helper .col.left li.rt-nav-scan > a:focus-visible { background: #dc0d23; box-shadow: 0 2px 10px rgba(220,13,35,.35); } .header_navigation_helper .col.left li.rt-nav-scan > a:hover > .rt-nav-scan__ico, .header_navigation_helper .col.left li.rt-nav-scan > a:hover > .rt-nav-scan__sub, .header_navigation_helper .col.left li.rt-nav-scan > a:focus-visible > .rt-nav-scan__ico, .header_navigation_helper .col.left li.rt-nav-scan > a:focus-visible > .rt-nav-scan__sub { color: #fff; } /* Unter 1460px stellt das Theme die Spalten uebereinander und setzt die rechte absolut nach oben rechts. Eine eigene absolute Lage kollidiert dort -- also zurueck in den Fluss. */ @media screen and (max-width: 1460px) { .header_navigation_helper .col.left li.rt-nav-scan { position: static; top: auto; left: auto; right: auto; transform: none; margin: 0 0 0 30px; float: left; } } /* Mobiles Menue: das Overlay steht auf rotem Grund, der Riegel kehrt sich um. Und das Theme haengt an jeden Punkt der linken Liste ein "+" fuers Untermenue; der Aufruf hat keins und trug es trotzdem. */ @media screen and (max-width: 980px) { .header_navigation_helper .col.left li.rt-nav-scan { position: static; transform: none; float: none; display: block; width: 100%; margin: 5px 0 25px; } .header_navigation_helper .col.left li.rt-nav-scan > 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 .col.left li.rt-nav-scan > a > .rt-nav-scan__ico { width: 24px; height: 28px; color: #dc0d23; } .header_navigation_helper .col.left li.rt-nav-scan > a > .rt-nav-scan__lang { color: #dc0d23; font-size: 20px; line-height: 23px; } .header_navigation_helper .col.left li.rt-nav-scan > a > .rt-nav-scan__sub { color: rgba(176,10,28,.9); font-size: 13px; line-height: 15px; } .header_navigation_helper .col.left li.rt-nav-scan > a:hover, .header_navigation_helper .col.left li.rt-nav-scan > a:focus-visible { background: #fff; box-shadow: none; } .header_navigation_helper .col.left li.rt-nav-scan > a:hover > .rt-nav-scan__ico, .header_navigation_helper .col.left li.rt-nav-scan > a:focus-visible > .rt-nav-scan__ico { color: #dc0d23; } .header_navigation_helper .col.left li.rt-nav-scan > a:hover > .rt-nav-scan__sub, .header_navigation_helper .col.left li.rt-nav-scan > a:focus-visible > .rt-nav-scan__sub { color: rgba(176,10,28,.9); } }