/* ===================================================================== * Feinschliff – 1.15.0 * * Wird als letztes Stylesheet geladen und korrigiert drei Dinge, die aus * dem übernommenen owr.at-Design stammen: * * 1. Der Kopf war 197 px hoch und ließ seine Teile bei schmalen * Fenstern übereinanderlaufen. * 2. Die Ausklapp-Menüs waren mit 70 px je Zeile und einer Trennlinie * zwischen jedem Eintrag viel zu schwer. * 3. Der Fließtext lief über 960 px – rund 110 Zeichen je Zeile. Zum * Lesen sind 60 bis 75 angenehm. * * Alles hier ist bewusst in einer eigenen Datei: die geerbten Dateien * arbeiten mit `!important` und festen Pixelwerten, ein Eingriff dort * hätte an zwanzig Stellen Nebenwirkungen. * ================================================================== */ :root { --owr-kopf-leiste: 40px; /* obere dunkle Leiste */ --owr-kopf-haupt: 96px; /* weiße Hauptzeile */ --owr-kopf-klein: 72px; /* dieselbe beim Scrollen */ --owr-gutter: clamp(20px, 3vw, 48px); } /* --------------------------------------------------------------------- * 1. Kopfzeile * ------------------------------------------------------------------- */ /* Alles in diesem Block gilt nur ab Tablet-Breite aufwärts. Darunter greift das geerbte Layout mit Burger-Menü, das dort funktioniert – die Desktop-Regeln hätten den Schriftzug aus dem Bild geschoben. */ @media screen and (min-width: 1025px) { .owr-header-leiste-02-wrapper { min-height: var(--owr-kopf-haupt); height: var(--owr-kopf-haupt); } .header-wrapper--shrink .owr-header-leiste-02-wrapper { min-height: var(--owr-kopf-klein); height: var(--owr-kopf-klein); } /* Eine echte Flex-Zeile statt nebeneinandergestellter Blöcke. `min-width: 0` ist der entscheidende Teil: ohne ihn weigert sich ein Flex-Element zu schrumpfen und schiebt sich über seinen Nachbarn – genau das passierte bei 1280 px zwischen „Einsatzstelle auswählen" und „Über uns". */ .owr-header-leiste-02 { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: var(--owr-gutter); } .owr-header-leiste-02 > * { min-width: 0; } .owr-header-logo, .owr-header-logo img, .header-wrapper--shrink .owr-header-logo, .header-wrapper--shrink .owr-header-logo img { width: 78px; min-width: 78px; height: 78px; min-height: 78px; margin: 0; } .header-wrapper--shrink .owr-header-logo, .header-wrapper--shrink .owr-header-logo img { width: 58px; min-width: 58px; height: 58px; min-height: 58px; } .owr-header__landeswappen, .header-wrapper--shrink .owr-header__landeswappen { width: 30px; min-width: 30px; margin: 0; } .header-wrapper--shrink .owr-header__landeswappen { width: 26px; min-width: 26px; } /* Schriftzug oben, darunter die beiden Umschalter nebeneinander. Als Raster, weil die vier Kinder im geerbten Markup Geschwister sind und kein gemeinsames Elternelement für die zweite Zeile haben. */ .owr-header-schrift-container { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "titel titel titel" "lv es frei"; align-content: center; justify-items: start; align-items: center; column-gap: 18px; row-gap: 1px; flex: 0 1 auto; min-width: 0; } .owr-header-schrift-01 { grid-area: titel; } .landesverband-auswahl-container { grid-area: lv; } .owr-header-menu-einsatzstelle { grid-area: es; } .owr-header-menu-einsatzstelle-mobile { display: none !important; } .owr-header-schrift-01, .owr-header-schrift-01 * { font-size: clamp(.82rem, 1.05vw, 1.02rem) !important; line-height: 1.25 !important; letter-spacing: .01em; white-space: nowrap; } /* Die beiden Umschalter stehen in einer Zeile unter dem Schriftzug. */ .owr-header-schrift-container > .landesverband-auswahl-container, .owr-header-schrift-container > .owr-header-menu-einsatzstelle { display: inline-flex; align-items: center; } .owr-header-schrift-02, .owr-header-schrift-02 *, .owr-header-menu-einsatzstelle, .owr-header-menu-einsatzstelle * { font-size: clamp(.8rem, .95vw, .95rem) !important; line-height: 1.3 !important; white-space: nowrap; } /* Das Hauptmenü sitzt rechts und behält immer seinen Platz. Der Behälter erbte vom alten Aufbau eine feste Zeilenhöhe, in der die Punkte oben klebten – neben dem mittig stehenden Schriftzug sah das verrutscht aus. */ .owr-header-menu-container { margin-left: auto; flex: 0 0 auto; align-self: center; /* Der Behälter hatte aus dem alten Aufbau eine feste Höhe von 70 px, in der die Menüpunkte oben klebten – neben dem mittig stehenden Schriftzug sahen sie verrutscht aus. Kein `display: flex` hier: die Liste darin verlöre dadurch ihre Umbruchfähigkeit und würde breiter als der Behälter. */ height: auto !important; min-height: 0 !important; } /* Kein `display: flex` auf .owr-header-nav-menu: die Liste darin verlöre dadurch ihre Umbruchfähigkeit und würde breiter als ihr Behälter. Zum Ausrichten genügt `align-self` eine Ebene darüber. */ .owr-header-nav-menu > .menu, .owr-header-nav-menu ul.menu { gap: clamp(10px, 1.4vw, 26px); } /* Die Hauptnavigation stand am unteren Rand ihrer 70 Pixel hohen Zeile und lag damit tiefer als der Schriftzug daneben. Jetzt mittig. */ .owr-header-nav-menu > .menu > li, .owr-header-nav-menu ul > li { height: auto !important; display: flex !important; align-items: center; } .owr-header-nav-menu > .menu > li > a { display: flex !important; align-items: center !important; height: auto !important; padding: 10px 12px !important; border-radius: 10px; font-size: clamp(.9rem, 1vw, 1rem) !important; line-height: 1.2 !important; white-space: nowrap; } .owr-header-nav-menu > .menu { align-items: center; } } /* Abstand unter dem Kopf: der Inhalt beginnt exakt dort, wo der feste Kopf endet – vorher standen 206 px gegen 197 px echte Höhe, die Differenz war als heller Streifen sichtbar. */ .owr3-page, .main { padding-top: calc(var(--owr-kopf-leiste) + var(--owr-kopf-haupt)); } /* Unterhalb des Desktops ist die Kopfhöhe nicht vorhersagbar: sie hängt am Namen der Einsatzstelle, der ein- oder zweizeilig steht. Das Script misst sie und legt sie als --owr-kopf-ist ab; die festen Zahlen sind nur der Rückfall, falls kein JavaScript läuft. */ @media screen and (max-width: 1024px) { .owr3-page, .main { padding-top: var(--owr-kopf-ist, 118px); } } @media screen and (max-width: 767px) { .owr3-page, .main { padding-top: var(--owr-kopf-ist, 104px); } } /* --------------------------------------------------------------------- * 2. Ausklapp-Menüs * ------------------------------------------------------------------- */ /* Nur am Desktop: am Handy ist dasselbe Menü ein aufklappbarer Block im Popup, und `width: max-content` mit `nowrap` hat dort die ganze Seite breiter gemacht als den Bildschirm. */ @media screen and (min-width: 1025px) { /* Die Doppelung mit `.owr-modern` ist Absicht: modern.css setzt dieselben Eigenschaften mit !important und drei Klassen. Ohne denselben Vorsatz käme hier nichts an. */ .owr-modern .owr-header-nav-menu ul ul, .owr-modern .bundesleitung-link .sub-menu, .owr-modern .einsatzstelle-link .sub-menu, .owr-header-nav-menu ul ul, .bundesleitung-link .sub-menu, .einsatzstelle-link .sub-menu { min-width: 228px !important; width: max-content !important; max-width: 330px !important; padding: 7px !important; border-radius: 14px !important; border: 1px solid rgba(13, 42, 80, .09) !important; box-shadow: 0 18px 38px -16px rgba(13, 42, 80, .26), 0 2px 6px rgba(13, 42, 80, .06) !important; } /* Die 70 Pixel Zeilenhöhe stammen von der Hauptnavigation und galten versehentlich auch für die Einträge im Ausklappmenü. Fünf Einträge ergaben so ein Feld von einem halben Bildschirm Höhe. */ .owr-modern .owr-header-nav-menu ul li ul li, .owr-header-nav-menu ul li ul li, .bundesleitung-link .sub-menu li, .einsatzstelle-link .sub-menu li { display: block !important; height: auto !important; margin: 0 !important; border: 0 !important; } .owr-modern .owr-header-nav-menu ul li ul li > a, .owr-header-nav-menu ul li ul li > a, .bundesleitung-link .sub-menu li > a, .einsatzstelle-link .sub-menu li > a { display: block !important; height: auto !important; width: auto !important; padding: 9px 14px !important; border-radius: 9px !important; font-size: .95rem !important; font-weight: 500 !important; line-height: 1.4 !important; white-space: nowrap; color: #414756 !important; transition: background-color .12s ease, color .12s ease; } .owr-modern .owr-header-nav-menu ul li ul li:hover > a, .owr-header-nav-menu ul li ul li:hover > a, .owr-header-nav-menu ul li ul li > a:focus-visible, .bundesleitung-link .sub-menu li:hover > a, .einsatzstelle-link .sub-menu li:hover > a { background: #eef2f8 !important; color: #0D2A50 !important; } .owr-header-nav-menu ul li ul li.current-menu-item > a { background: #eef2f8 !important; color: #0E478F !important; font-weight: 600 !important; } /* Das Ausklappmenü sitzt direkt unter seinem Menüpunkt. */ .owr-modern .owr-header-nav-menu ul ul, .owr-header-nav-menu ul ul { top: calc(100% - 4px) !important; } } /* --------------------------------------------------------------------- * 3. Lesbarkeit der Inhaltsseiten * * Der Textblock beginnt jetzt an derselben Kante wie Brotkrumen und * Überschrift darüber, statt 100 px weiter innen – das Auge braucht * eine durchgehende Linie. Die Zeilenlänge ist auf gut 70 Zeichen * begrenzt; darüber verliert man beim Zeilenwechsel den Anschluss. * ------------------------------------------------------------------- */ .owr3-page .owr3-content.owr3-wrap { width: min(1160px, 100% - 2 * var(--owr-gutter)); max-width: none; } /* Die Lesebreite muss auch greifen, wenn der Text in einem Container aus dem alten Design steckt (`div.global-content`) – deshalb als Nachfahre und nicht als direktes Kind. Ausgenommen ist alles, was in einer Karte, einem Raster oder einer Bildunterschrift steht: dort bestimmt der Baustein die Breite. */ .owr3-content :where(p, ul, ol, h2, h3, h4, blockquote, dl):not(:where( figure *, .owr3-person *, .owr3-personen *, .owr3-downloads *, .owr3-kacheln *, .owr3-infobox *, .owr3-karten *, .owr-recht__zeile *, .owr-fb-post *, .owr3-cta *, .owr3-nav *, .owr-vt *, .owr-vd *, .mitglied-box *, table * )) { max-width: 68ch; } /* Ein Container aus dem alten Design erbt keine eigene Breite. */ .owr3-content > .global-content { max-width: none; } .owr3-content > .global-content > * + * { margin-top: 1.35em; } .owr3-content { font-size: 1.075rem; line-height: 1.78; } .owr3-content > * + * { margin-top: 1.35em; } .owr3-content > h2 + *, .owr3-content > h3 + *, .owr3-content > h4 + * { margin-top: .8em; } /* Der erste Absatz führt in die Seite ein und darf das zeigen. */ .owr3-content > p:first-child, .owr3-content > .wp-block-paragraph:first-child { font-size: 1.2rem; line-height: 1.6; color: #2c3346; } /* Links: Farbe trägt die Bedeutung, die Unterstreichung bleibt dezent und rückt beim Überfahren näher heran. */ .owr3-content a:not([class]) { text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; text-decoration-color: rgba(14, 71, 143, .35) !important; transition: text-decoration-color .15s ease, color .15s ease; } .owr3-content a:not([class]):hover { text-decoration-color: currentColor !important; } /* --------------------------------------------------------------------- * 4. Bilder * * Bilder aus dem Editor standen bisher nackt im Text. Sie bekommen * runde Ecken, einen weichen Schatten und Luft, dürfen breiter sein als * die Textspalte und tragen ihre Bildunterschrift ruhig darunter. * ------------------------------------------------------------------- */ .owr3-content :where(figure.wp-block-image, .wp-block-gallery, .wp-block-embed) { max-width: min(100%, 860px); margin-top: 2.2em; margin-bottom: 2.2em; } .owr3-content figure.wp-block-image img, .owr3-content .wp-block-gallery img, .owr3-content figure img { display: block; width: 100%; height: auto; border-radius: 14px !important; box-shadow: 0 16px 34px -20px rgba(13, 42, 80, .45); } .owr3-content figure.alignwide { max-width: min(100%, 1060px); } .owr3-content figure.alignfull { max-width: 100%; } .owr3-content figcaption, .owr3-content .wp-element-caption { margin-top: .7rem; font-size: .9rem; line-height: 1.5; color: #6b7383; text-align: left; } /* Ein Bild mitten im Fließtext soll nicht am Text kleben. */ .owr3-content p > img, .owr3-content p > a > img { border-radius: 12px; box-shadow: 0 14px 30px -20px rgba(13, 42, 80, .45); height: auto; } .owr3-content .alignleft { float: left; margin: .4em 1.8em 1.2em 0; max-width: min(46%, 420px); } .owr3-content .alignright { float: right; margin: .4em 0 1.2em 1.8em; max-width: min(46%, 420px); } @media screen and (max-width: 720px) { .owr3-content .alignleft, .owr3-content .alignright { float: none; margin: 1.6em 0; max-width: 100%; } } /* Mehrere Bilder nebeneinander statt untereinander. */ .owr3-content .wp-block-gallery.has-nested-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .owr3-content .wp-block-gallery.has-nested-images figure { margin: 0 !important; max-width: none; } /* --------------------------------------------------------------------- * 5. Unternavigation * * Die Chips liefen vorher rechts aus dem Bild – bei „Schwimmen" war * „Frühschwimmer (Pinguin)" nur noch halb zu sehen. Jetzt brechen sie um. * ------------------------------------------------------------------- */ /* Am Desktop brechen die Chips um, statt rechts aus dem Bild zu laufen. Am Handy bleibt das seitliche Schieben – dort ist es die bessere Lösung als sechs Zeilen Navigation über dem Inhalt. Wichtig: `align-items` bleibt unter 768 px unangetastet. Die Leiste steht dort als Spalte, und ein `flex-start` nähme der Chip-Zeile die Streckung – sie würde ihre volle Inhaltsbreite einnehmen und die ganze Seite über den Bildschirmrand schieben. */ @media screen and (min-width: 768px) { .owr3-subnav__inner { align-items: flex-start; padding-block: 14px; } .owr3-subnav__up { margin-top: 5px; } .owr3-subnav__list { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; min-width: 0; } } /* --------------------------------------------------------------------- * 6. Textsatz * * Absatzabstand größer als der Zeilenabstand – sonst liest sich eine * Folge kurzer Absätze wie ein einziger Block. Genau das war der Fall: * 23 px zwischen den Absätzen gegen 30 px zwischen den Zeilen. * ------------------------------------------------------------------- */ .owr3-content > * + *, .owr3-content > .global-content > * + * { margin-top: 1.9em; } .owr3-content > h2 + *, .owr3-content > h3 + *, .owr3-content > h4 + *, .owr3-content > .global-content > h2 + *, .owr3-content > .global-content > h3 + * { margin-top: .85em; } .owr3-content > .owr3-merksatz + *, .owr3-content > .global-content > .owr3-merksatz + * { margin-top: 1.9em; } /* Hervorgehobener Satz – kein Kasten, nur eine ruhige Markierung am Rand. */ .owr3-merksatz { padding: 2px 0 2px 18px; border-left: 3px solid var(--owr3-akzent, #A53A57); font-size: 1.06rem; font-weight: 600; color: var(--owr3-navy, #0D2A50); } .owr3-merksatz a { color: inherit !important; } /* Reihe von Verweisen als antippbare Schaltflächen. */ .owr3-linkreihe { display: flex; flex-wrap: wrap; gap: 10px; max-width: none !important; } .owr3-content .owr3-linkchip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid #dfe5ef; background: #f4f7fc; font-size: .95rem; font-weight: 600; color: var(--owr3-navy, #0D2A50) !important; text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; } .owr3-content .owr3-linkchip:hover, .owr3-content .owr3-linkchip:focus-visible { background: #e7eef8; border-color: #c9d6e8; color: var(--owr3-blau, #0E478F) !important; transform: translateY(-1px); } /* Die erste Überschrift einer Seite braucht oben weniger Luft. */ .owr3-content > h2:first-child, .owr3-content > .global-content > h2:first-child { margin-top: 0 !important; } /* Der Einleitungsabsatz gilt nur, wenn er wirklich Fließtext ist. */ .owr3-content > h2:first-child + p, .owr3-content > .global-content > h2:first-child + p { font-size: 1.2rem; line-height: 1.6; color: #2c3346; } /* Der Absatzabstand kam bisher nicht an: pages.css setzt `.owr3-content p { margin: 0 }` – eine Klasse plus ein Element. Die Regel `> * + *` wiegt nur eine Klasse und verlor jeden Zweikampf. Deshalb hier mit demselben Gewicht, aber später geladen. */ .owr3-content > p, .owr3-content > ul, .owr3-content > ol, .owr3-content > h2, .owr3-content > h3, .owr3-content > h4, .owr3-content > div, .owr3-content > figure, .owr3-content > blockquote, .owr3-content > .global-content > p, .owr3-content > .global-content > ul, .owr3-content > .global-content > ol, .owr3-content > .global-content > h2, .owr3-content > .global-content > h3, .owr3-content > .global-content > h4, .owr3-content > .global-content > div, .owr3-content > .global-content > figure { margin-top: 1.9em; margin-bottom: 0; } .owr3-content > h2, .owr3-content > .global-content > h2 { margin-top: 2.6em !important; } .owr3-content > h3, .owr3-content > .global-content > h3 { margin-top: 2.2em !important; } .owr3-content > h2 + *, .owr3-content > h3 + *, .owr3-content > h4 + *, .owr3-content > .global-content > h2 + *, .owr3-content > .global-content > h3 + *, .owr3-content > .global-content > h4 + * { margin-top: .85em; } .owr3-content > :first-child, .owr3-content > .global-content > :first-child { margin-top: 0 !important; } /* --------------------------------------------------------------------- * 7. Ansprechpartner unter dem Seiteninhalt * ------------------------------------------------------------------- */ .owr3-ansprech { margin-top: 3.4em; padding-top: 2.2em; border-top: 1px solid var(--owr3-linie, #e3e6ec); max-width: none !important; } .owr3-ansprech__titel { margin: 0 0 1.4rem !important; font-size: 1.3rem !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--owr3-navy, #0D2A50) !important; } .owr3-ansprech__titel::after { display: none !important; } /* Bei einer einzelnen Person soll die Karte nicht über die volle Breite laufen – sonst steht ein Name allein in einem sehr weiten Feld. */ .owr3-ansprech .owr3-personen { grid-template-columns: repeat(auto-fit, minmax(220px, 260px)) !important; justify-content: start; max-width: 860px; } /* --------------------------------------------------------------------- * 8. Kopfzeile zwischen 1025 und 1199 Pixel * * Mit „Fachbereiche" hat das Hauptmenü einen fünften Punkt bekommen. Das * Menü darf nicht schrumpfen, der Schriftzug daneben steht auf `nowrap` * und kann es auch nicht – das eine schob sich über das andere. * * Abschneiden war der erste Versuch und sah schlecht aus: „ÖSTERREICHISCHE * WASSERR…" mitten im Wort, darunter nur „LV Tirol", und von der eigenen * Einsatzstelle stand nichts mehr da. * * Jetzt entfällt in diesem Bereich der lange Verbandsname. Übrig bleibt * die Zeile, auf die es ankommt: „LV Tirol – Einsatzstelle Reutte". * Sie steht mittig neben dem Logo, das Menü hat wieder Platz. * ------------------------------------------------------------------- */ @media screen and (min-width: 1025px) and (max-width: 1199px) { .owr-header-leiste-02 { gap: 16px; } /* Der Verbandsname steht im Logo daneben ohnehin. */ .owr-header-schrift-01 { display: none !important; } /* Statt zweier Zeilen nur noch eine – und darin nur die eigene Einsatzstelle. Der Landesverband steht im Popup-Menü und im Footer; hier kostet er 95 Pixel, die das Menü braucht. */ .owr-header-schrift-container { grid-template-columns: minmax(0, auto) 1fr; grid-template-areas: "es frei"; column-gap: 12px; align-content: center; overflow: hidden; } .landesverband-auswahl-container { display: none !important; } .owr-header-menu-einsatzstelle { display: inline-flex !important; min-width: 0; overflow: hidden; } /* Das Menü schrumpft nicht mit: lieber ein abgeschnittener Ortsname als Menüpunkte, die einander überlappen. */ .owr-header-menu-container { flex: 0 0 auto !important; } .owr-header-schrift-02, .owr-header-schrift-02 *, .owr-header-menu-einsatzstelle, .owr-header-menu-einsatzstelle * { font-size: .92rem !important; } .owr-header-nav-menu > .menu, .owr-header-nav-menu ul.menu { gap: 10px !important; } .owr-header-nav-menu > .menu > li > a { padding: 10px 9px !important; font-size: .93rem !important; } } /* --------------------------------------------------------------------- * 9. Die Kachelzeile der Unterseiten darf nicht die Seite verbreitern * * `.owr3-subnav__list` scrollt bei zu vielen Einträgen seitlich – das war * so gedacht. Als Flex-Element weigert es sich aber zu schrumpfen, solange * `min-width` auf `auto` steht: statt zu scrollen schob es am Telefon die * ganze Seite auf 407 Pixel Breite. Eine Zeile genügt. * ------------------------------------------------------------------- */ .owr3-subnav__list { min-width: 0; } /* Lange Wörter in den Ausbildungs-Kacheln: „Rettungsschwimmlehrer" passte am Telefon nicht in seine Kachel und schob die Seite 17 Pixel breiter als den Bildschirm. Umbrechen statt überstehen. */ .ausbildung-box-text, .ausbildung-box-text * { overflow-wrap: anywhere; hyphens: auto; } /* --------------------------------------------------------------------- * 10. Der Abschluss unter den Seiten * * Unten stand weiß – blau – weiß – blau: Inhalt, das Band „Wir helfen dir * weiter", ein 120 Pixel hoher weißer Streifen und dann der Footer. Der * Streifen war kein Gestaltungselement, sondern der Abstand des Footers, * der für Seiten gedacht ist, die hell enden. * * Endet eine Seite mit dem Band, entfällt er. Band und Footer haben * dasselbe Blau und werden damit ein Block; eine feine Linie hält sie * trotzdem auseinander. * ------------------------------------------------------------------- */ .owr3-page:has(.owr3-cta) + footer { margin-top: 0; } .owr3-cta { border-bottom: 1px solid rgba(255, 255, 255, .12); } /* --------------------------------------------------------------------- * 11. Die dritte Menü-Ebene * * Das Hauptmenü zeigte zwei Ebenen. Alles darunter – die Schwimmabzeichen, * die Rettungsschwimm-Scheine, die Sicherheitstipps, die Unterseiten der * Fachbereiche – war nur über die Kachelzeile auf der Seite selbst zu * finden. Wer das Menü benutzt, soll überall hinkommen. * * Am Desktop klappt die dritte Ebene seitlich auf, nach links: die * Navigation sitzt rechts, nach rechts wäre sie aus dem Bild. * ------------------------------------------------------------------- */ @media screen and (min-width: 1025px) { /* Das Ausklappfeld der zweiten Ebene stand auf `overflow: hidden` – damit war die dritte Ebene zwar da, aber abgeschnitten und damit unsichtbar. Die runden Ecken übernehmen die Einträge selbst. */ .owr-modern .owr-header-nav-menu ul ul, .owr-header-nav-menu ul ul { overflow: visible !important; } /* „Informationen zu den Rettungsschwimmkursen" ist breiter als das Feld. Statt über den Rand zu laufen, bricht der Eintrag jetzt um. */ .owr-modern .owr-header-nav-menu ul ul li a, .owr-header-nav-menu ul ul li a { white-space: normal !important; } .owr-modern .owr-header-nav-menu ul ul, .owr-header-nav-menu ul ul { white-space: normal !important; } .owr-modern .owr-header-nav-menu ul ul ul, .owr-header-nav-menu ul ul ul { top: -8px !important; right: calc(100% + 6px); left: auto !important; } /* Ein Pfeil zeigt, dass es weitergeht. */ .owr-header-nav-menu ul ul > li.menu-item-has-children > a::after { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-left: auto; background: currentColor; opacity: .45; -webkit-mask: url("data:image/svg+xml;utf8,") center / 15px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 15px no-repeat; } .owr-header-nav-menu ul ul > li.menu-item-has-children > a { display: flex !important; align-items: center; gap: 8px; } .owr-header-nav-menu ul ul > li.menu-item-has-children:hover > a::after { opacity: .9; } /* Der Weg zur dritten Ebene führt über die Lücke zwischen den Feldern; ohne diese unsichtbare Brücke schließt sie unterwegs. */ .owr-header-nav-menu ul ul > li.menu-item-has-children::before { content: ""; position: absolute; top: 0; right: 100%; width: 10px; height: 100%; } } /* Im Popup rückt jede Ebene ein Stück ein, damit man sieht, wo man ist. */ .owr-popup-menu .owr-ebene-2 > a { padding-left: 18px !important; } .owr-popup-menu .owr-ebene-3 > a { padding-left: 36px !important; opacity: .92; } .owr-popup-menu .owr-ebene-4 > a { padding-left: 54px !important; opacity: .88; } .owr-popup-menu .submenu .parent-item > a { font-weight: 600; } /* Galerie-Baustein: WordPress lädt dafür eigenes CSS (Breite je Bild in Prozent, Flex), das mit dem Raster oben kollidiert – die Bilder schrumpften auf Daumengröße. Im Raster bestimmt die Zelle die Breite. */ .owr3-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: auto !important; max-width: none !important; aspect-ratio: 4 / 3; margin: 0 !important; } .owr3-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { width: 100% !important; height: 100% !important; object-fit: cover; flex: none; } /* Angemeldet: die WordPress-Leiste sitzt oben – der feste Seitenkopf rutscht darunter. Unter 600 px scrollt WordPress die Leiste sonst weg und der Kopf klebte an einer Lücke; dort bleibt die Leiste deshalb ebenfalls stehen. */ .admin-bar .header-wrapper { top: var(--wp-admin--admin-bar--height, 32px); } @media screen and (max-width: 600px) { .admin-bar #wpadminbar { position: fixed; } }