@layer responsive { /** * Dieses Stylesheet enthält spezielle Angaben für sehr schmale Bildschirme * Es wird im HTML für alle Geräte mit "screen" eingebunden. Innerhalb dieser * Datei wird dann mit Media-Queries nach unterschiedlicher "Breite" unterschieden. * * Die Punkte, an denen wieder ein neuer Media-Query greift, sollten nicht nach den * Breiten bestimmter Geräte festgesetzt werden (würde mit dem Aufkommen und Verschwinden * von Geräten mit anderen Größen im Laufe der Zeit ein Wartungsalbtraum), sondern * anhand der Breite, die der Inhalt braucht. Der Inhalt gibt die Breite vor. */ /** * Die größte Breite unter den schmalen Displays: * Breakpoint bei 117.5rem (entspricht 1175px bei Schriftgröße des -Elements von 10px). * * Vorsicht: Für Media-Querys wird NICHT die Schriftgröße des -Elements zugrunde gelegt! * Stattdessen verwenden Media-Querys immer 1rem = 16px - egal, was im CSS gesetzt ist. * Deswegen muss der Wert für den Media-Query umgerechnet werden: * 117.5 / 16px (Browserstandard) * 10px (Standard dieser Website) = 73.4375rem, also ungefähr 73.45rem. * bzw. * 117.5 * 0.625 = 73.4375rem, also ungefähr 73.45rem. * Die Breite wird auch in style.css verwendet für head .header-image a, in Design.html für das Preloading * und in BeforeStylesheetsRenderingListener.php (ebenfalls für das Preloading). * * Überschreibt für diese Bildschirme Angaben aus dem Standard-Stylesheet style.css. * main ist 840px breit und wird bei dieser geringeren Breite horizontal zentriert. * Das Menü .side-nav steht dann nicht mehr neben main, sondern wird ausgeblendet. */ @media screen and (width <= 73.45rem) { :root { /* 100% der Schriftgröße sind bei Standardgröße 16px, 62,5% sind genau 10px. Das entspricht damit genau den Angaben aus der Desktop-Version der Website. */ --font-size-html: 62.5%; --font-size-body: 1.6rem; /* Die Schriftgröße passt sich automatisch an die Breite des Viewports an: Das folgende clamp() lässt den Text dynamisch wachsen. Die Idee stammt von dem Artikel https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ und dem Rechner https://fluid.style/type?min=2.32&max=2.88&min-bp=36&max-bp=100&unit=%22rem%22. Folgende Parameter wurden verwendet: Mindest-Viewportbreite: 360px = 36rem Maximum-Viewportbreite: 1000px = 100rem Mindestschriftgröße: 2.32rem Maximale Schriftgröße: 2.88rem 1.6rem = 16px */ --font-size-homepage-link-title: clamp(2.32rem, 2.0048rem + 0.875vw, 2.88rem); --font-size-homepage-link-subtitle: clamp(1.28rem, 1.224rem + 0.22vw, 1.36rem); --font-size-header-actions: 1.5rem; --font-size-menu-item: 1.6rem; /* h1 und h2 wachsen von 72rem Viewportbreite bis 117,5rem Viewportbreite. */ --font-size-h1: clamp(4.7rem, 1.06rem + 5.055vw, 7rem); --font-size-h2: clamp(2.8rem, 1.851rem + 1.319vw, 3.4rem); --font-size-h3: 2.0rem; --font-size-footer-header: 2.25rem; /* Die Farben entsprechen den Farben von Buttons im Inhalt (siehe --button-bg-color usw. für Buttons nach oben). */ --menu-button-bg-color: var(--button-bg-color); /* Etwas intensivere Farbe beim Hovern */ --menu-button-hover-bg-color: var(--button-hover-bg-color); /* Noch intensivere Farbe im Moment des Anklickens */ --menu-button-active-bg-color: var(--button-active-bg-color); } body { /* Wird für die Breite des Kastens .branding benutzt. */ --main-nav-width: 100%; } .page { /* Flexbox verwenden In der schmalen Ansicht stehen alle Kästen (header, nav, main und footer) untereinander. Falls nav .side-nav leer ist, ist es nicht im HTML enthalten. In dem Fall sind es also nur 3 Elemente. Die Elemente sind also nur in einer Richtung angeordnet. Daher alle Eigenschaften, die in der normalen Ansicht für Grid gesetzt wurden, zurücksetzen und statt Grid für die schmale Variante Flexbox verwenden. */ display: flex; /* Die Elemente sollen nicht nebeneinander, sondern untereinander angeordnet werden. */ flex-direction: column; /* Kein Grid-System, zurücksetzen auf Standardwert */ grid-template-columns: none; /* Kein Grid-System. */ grid-template-rows: none; grid-template-areas: none; /* Es gibt nur eine Spalte, Abstand daher auf 0 setzen. */ column-gap: var(--space-0); /* Abstand zwischen den Zeilen setzen. */ row-gap: var(--space-2xl); } header:has(.flex-container) { /* Kein Grid-System. */ grid-area: auto; /* Das Element soll nicht wachsen: Reihenfolge und Bedeutung der Werte: - flex-grow: 0 Das Element soll nicht _wegen der Flex-Eigenschaft seines Elternelements_ wachsen. Andere Eigenschaften, wie z.B. min-height gelten aber unverändert. Mögliche Werte: Integer größer gleich 0; Standardwert ist 0. - flex-shrink: 0 Das Element soll nicht wegen der Flex-Eigenschaft seines Elternelements schrumpfen. Mögliche Werte: Integer größer gleich 0; Standardwert ist 1. - flex-basis: min-content Das ist die Ausgangshöhe des Elements. Hat ggf Vorrang vor min-height und height! */ flex: 0 0 min-content; /* Den Header oben auf der Seite fixieren */ position: fixed; /* Falls die Seite zu breit ist, soll der Header nicht mit breiter sein. Stattdessen soll er genau so breit sein wie der Viewport. Die maximale Breite begrenzen, damit in Edge/Chrome usw. die seitliche Scrollbar nicht den rechten Teil des Headers (mit dem runden border-radius) verdeckt, was unschön aussähe. */ width: 100%; max-width: 100vw; /* Die negative margin-bottom aus der Desktop-Version überschreiben */ margin-bottom: var(--space-0); /* Dem Header einen gewissen z-index geben, damit er vor Buttons nach oben, Input-Buttons und Tabellenköpfen liegt. Ohne den z-index würden diese Elemente nicht wie gewünscht hinter, sondern vor dem Header langscrollen */ z-index: 10; /* 4px horizontal, 4px (also nach unten) vertikal verschoben und 10px blur; entsprechend für footer Dieser box-shadow wird nur in der schmalen Version der Seite gesetzt, weil hier die .main-nav-container (die in der Desktop-Version der Website den box-shadow hat) nicht angezeigt wird. Stattdessen soll header selbst den Schatten haben. */ box-shadow: 0.64rem 0.64rem 1.6rem var(--header-box-shadow); } /* Wenn Such-Overlay offen ist (JS setzt .search-open auf body), dann den Header oben am Viewport fixieren. Sonst würde der Header (falls die Seite gescrollt wurde) beim Öffnen des Overlays auf einmal nicht mehr gezeigt (es wirkt, als sei es unsichtbar geworden). Entsprechend für body.search-open .main-nav-container.stuck in Desktop-Ansicht. */ body.search-open header:has(.flex-container) { top: 0; left: 0; right: 0; } /* Der Container für Header-Bild, .homepage-link und Mobile-Nav */ .flex-container { /* .homepage-link und .menu-button sollen nebeneinander stehen und vertikal zentriert sein. */ display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-2xl); column-gap: var(--space-2xl); padding-top: var(--space-lg); padding-bottom: var(--space-lg); } /* Das Header-Bild nicht anzeigen */ .header-image { display: none; } .branding { /* Überschreibe header .branding:not(:has(.header-actions > *)) */ justify-content: space-between; padding-top: var(--space-0); } .homepage-link { flex-direction: column; /* Überschreibe header .branding:not(:has(.header-actions > *)) .homepage-link */ align-items: start; row-gap: var(--space-0); margin-top: var(--space-0); padding-top: var(--space-0); padding-bottom: var(--space-0); text-align: left; } .homepage-link a { padding-top: var(--space-0); } .homepage-link .title { line-height: 1.2; } .search-toggle { /* Transition genau so lang wie bei .mobile-nav .menu-button. (Keine Transition in der normalen Ansicht, weil da das Hauptmenü .main-nav sichtbar ist und da gibt es bei :hover auch keine Transition der Farbe.) */ transition: background-color var(--transition-duration) ease-in-out; } .search-toggle svg { /* Transition genau so lang wie bei .mobile-nav .menu-button. (Keine Transition in der normalen Ansicht, weil da das Hauptmenü .main-nav sichtbar ist und da gibt es bei :hover auch keine Transition der Farbe.) */ transition: fill var(--transition-duration) ease-in-out; } .cta { padding-block: var(--space-lg); padding-inline: calc(1.2 * var(--space-xl)); /* Transition genau so lang wie bei .mobile-nav .menu-button. (Keine Transition in der normalen Ansicht, weil da das Hauptmenü .main-nav sichtbar ist und da gibt es bei :hover auch keine Transition der Farbe.) */ transition: --button-bg-color var(--transition-duration) ease-in-out; } /* Das mobile Menü stylen */ .mobile-nav { z-index: 2; } .mobile-nav .menu-button { display: flex; /* Die enthaltenen Linien vertikal zentrieren */ align-items: center; /* auch horizontal zentrieren */ justify-content: center; /* Browser-Standards zum Padding überschreiben/vereinheitlichen */ padding: 0rem; /* Größer als die Höhe der .header-actions und der .sub-nav .submenu-back. */ --button-height: 6.0rem; height: var(--button-height); width: var(--button-height); /* Den Button vor dem Overlay für das mobile Menü halten */ position: relative; z-index: 30; font-size: var(--font-size-menu-button); color: var(--menu-button-text-color); cursor: pointer; /* Farbe für den Menübutton in der schmalen Ansicht. */ background-color: var(--menu-button-bg-color); border-radius: var(--border-radius-buttons); corner-shape: squircle; /* Den von manchen Browsern standardmäßig gezeigten Rahmen entfernen */ border: none; box-shadow: 0rem 0.2rem 0.6rem var(--menu-button-box-shadow); transition: --menu-button-bg-color var(--transition-duration) ease-in-out; } /* Hover-Effekt wie bei den Header-Action-Buttons - und damit anders als bei den Buttons nach oben und den Input-Buttons */ .mobile-nav .menu-button:hover, .mobile-nav .menu-button:focus-within { --menu-button-bg-color: var(--menu-button-hover-bg-color); } .mobile-nav .menu-button:active { --menu-button-bg-color: var(--menu-button-active-bg-color); /* Beim Anklicken den Box-Shadow und die Farbänderungen sofort anzeigen. Wird benötigt, weil sonst die längere Dauer des transition-Effekts von .mobile-nav .menu-button greifen würde und das ist nicht gewollt. */ transition-duration: 0s; animation: buttonPress var(--transition-duration-short) ease; } /* Wenn der Menü-Button mit der Tastatur angesprungen wird, den Rahmen ergänzen (so wie bei den Buttons "nach oben") */ .mobile-nav .menu-button:focus-visible { outline-style: auto; } /* Das .menu-button-Element ansprechen, wenn es aktiviert = geöffnet ist */ .mobile-nav .menu-button.menu-button--active { /* Wenn das Menü offen ist, ist die Farbe dunkler. Das betrifft automatisch auch die Hover- und Active-Zustände. */ background-color: var(--menu-button-active-bg-color); } /* Hamburger-Symbol auf den Button setzen. Der Hamburger wird zu einem Schließen-Symbol. */ .nav-icon { /* Alle Größen in .nav-icon in em. Dadurch können sie mit einer Schriftgröße in rem für den Menü-Button gesteuert werden, siehe die Regeln für .mobile-nav .menu-button für schmalere Bildschirme. */ width: 3.4em; height: 3.4em; position: relative; cursor: pointer; display: inline-block; } /* Basis für alle Striche: zentriert, gleiche Ausgangsposition */ .nav-icon span { background-color: var(--mobile-nav-icon-color); position: absolute; left: 0em; width: 100%; height: 0.4em; border-radius: 0.2em; top: 50%; transform: translateY(-50%); transform-origin: center; transition: transform var(--transition-duration-long) cubic-bezier(.8, .5, .2, 1.4), opacity var(--transition-duration) cubic-bezier(.8, .5, .2, 1.4); } /* Abstände exakt symmetrisch um die Mitte */ .nav-icon span:nth-child(1) { transform: translateY(calc(-50% - 0.8em)); } .nav-icon span:nth-child(2) { transform: translateY(-50%); } .nav-icon span:nth-child(3) { transform: translateY(calc(-50% + 0.8em)); } /* Open-State */ .nav-icon.nav-icon--open span:nth-child(1) { transform: translateY(-50%) rotate(45deg); } .nav-icon.nav-icon--open span:nth-child(2) { opacity: 0; transform: translateY(-50%); } .nav-icon.nav-icon--open span:nth-child(3) { transform: translateY(-50%) rotate(-45deg); } /* Das Overlay erzeugt den grauen Hintergrund, wenn Mobile-Nav geöffnet ist */ .mobile-nav .menu-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100dvh; width: 100vw; pointer-events: none; font-family: var(--font-family-sans-serif); font-size: var(--font-size-menu-overlay); } /* .overlay--visible wird per JavaScript gesetzt, wenn das Menü offen ist. */ .menu-overlay.overlay--visible { pointer-events: all; } /* Der graue Hintergrund des Overlays, der zum Schließen verwendet wird, wenn JavaScript aktiviert ist */ .menu-overlay .overlay-close { transition: opacity var(--transition-duration-long), backdrop-filter var(--transition-duration-long); opacity: 0; backdrop-filter: blur(8px); /* Das Overlay recht dunkel und nur wenig durchsichtig */ background: var(--mobile-nav-overlay-color); position: absolute; height: 100dvh; width: 100vw; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } /* Der Effekt, dass ein Klick in den grauen Teil des Overlays das Overlay schließt, ist per JavaScript eingebaut. */ .menu-overlay .overlay-close:hover { cursor: pointer; } /* .overlay--visible wird per JavaScript gesetzt, wenn das Menü offen ist. In diesem Fall wurde der Button angeklickt und das Overlay soll angezeigt werden. */ .menu-overlay.overlay--visible .overlay-close { opacity: 1; } /* Den Kasten mit dem mobilen Menü drin stylen */ .menu-overlay .modal-left { position: absolute; top: 0; left: 0; height: 100%; min-height: 100%; width: 100%; max-width: 48rem; overflow: hidden; padding-top: var(--space-0); transform: translateX(-100%); transition: transform var(--transition-duration); /* Ein Farbverlauf für den Hintergrund würde sich nicht einfliegen lassen. */ background-color: var(--mobile-nav-bg-color); } /* Bei Klick auf den Button wird .overlay--visible gesetzt. Dann den Kasten von links einfliegen und bei erneutem Klick auch wieder nach links ausfliegen. */ .menu-overlay.overlay--visible .modal-left { transform: translateX(0); } /* Höhe des Containers mit dem Menü drin. */ .menu-overlay .mobile-navigation-wrapper { overflow: auto; /* Scroll-Events (nur wenn er scrollbar ist) auf diesen Container beschränken und nicht aus ihm hinausgehen lassen. */ overscroll-behavior: contain; max-height: 100%; /* Das Menü der ersten Ebene genau so ausrichten, dass die Menüpunkte auf genau derselben Höhe sind wie in den Untermenüs. */ margin-top: 1px; padding: var(--space-0); } .vertical-scroll-container { /* Der Inhalt des Menüs */ /* --mobile-nav-margin-top wird per JS gesetzt, Einheit rem. Wird benutzt, um den Zurück-Button und den oberen Abstand der Ebenen der Mobile-Nav vertikal richtig auszurichten. */ margin-top: var(--mobile-nav-margin-top); /* Der Container soll die gesamte verfügbare Höhe ausnutzen. Das ist wichtig für Untermenüs, die sonst nur soweit nach unten angezeigt würden, wie das Hauptmenü in der Ebene 1 nach unten reicht. Links, die im Untermenü tiefer stehen, würden sonst nicht angezeigt. */ height: calc(100dvh - var(--mobile-nav-margin-top)); /* Diesen Container positionieren, damit der Container einen Positionierungskontext erzeugt. Dieser Container wird damit zum Bezugspunkt für die Ausrichtung von Untermenüs, über denen der Pfeil zurück steht. */ position: relative; text-align: left; /* Immer den Cursor anzeigen; alles hierdrin sind Links und ist anklickbar. */ cursor: pointer; } .menu-overlay ul { list-style: none; padding-left: var(--space-0); margin-top: var(--space-0); margin-bottom: var(--space-0); /* Höhe der Links ohne padding und margin erzeugen */ line-height: 2.4; } .menu-overlay li:not(.sub-heading) { display: flex; /* Kind-Elemente vertikal zentrieren */ align-items: center; } /* Unteren Rahmen hinzufügen; für alle Links außer für den letzten */ .menu-overlay li:not(:last-of-type) { border-bottom: 1px solid var(--mobile-nav-li-border-color-3); border-image: linear-gradient( to right, var(--mobile-nav-li-border-color-1) 0%, /* oben: vollständig transparent */ var(--mobile-nav-li-border-color-2) 10%, /* leicht sichtbar */ var(--mobile-nav-li-border-color-3) 50%, /* sichtbar (aber dezent) */ var(--mobile-nav-li-border-color-2) 90%, /* wieder leicht sichtbar */ var(--mobile-nav-li-border-color-1) 100% /* unten: vollständig transparent */ ); border-image-slice: 1; } .menu-overlay a { padding-inline: var(--space-4xl); display: block; text-decoration: none; color: var(--mobile-nav-text-color); /* Den gesamten verfügbaren Platz nutzen: Bis zum .toggle-sub-Button oder (wenn keine Unterseiten) bis zum Rand des Elternelements. Das hält den Button ganz rechts. */ flex: 1 1 auto; /* Die Links im mobilen Menü nur so breit darstellen, wie der Platz es zulässt. Zeilenumbruch vermeiden. Den zu breiten Text mit drei Punkten (Ellipse) ausblenden. */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Links mit direkt folgendem .toggle-sub-Element (also Links mit dem Button mit Pfeil nach rechts daneben) nur so breit werden lassen, wie der verfügbare Platz neben dem Pfeil es zulässt. Zu breiter Text wird dann mit den drei Punkten (Ellipse) ausgeblendet. */ .menu-overlay a:has(+.toggle-sub) { padding-right: var(--space-sm); max-width: calc(100% - 5.76rem); } .menu-overlay a:hover, .toggle-sub:hover { background-color: var(--mobile-nav-link-hover-bg-color); color: var(--mobile-nav-link-hover-text-color); } .menu-overlay a:active, .toggle-sub:active { color: var(--mobile-nav-text-color-active); } .menu-overlay a:focus-visible, .toggle-sub:focus-visible { outline-offset: -2px; outline-width: 3px; } /* Der Button mit dem Pfeil-Symbol neben einem Link, der Unterseiten hat */ .toggle-sub { /* Der Button nach rechts darf NICHT wachsen */ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem; width: 5.76rem; height: 5.76rem; background: transparent; /* Icon nutzt currentColor */ color: inherit; border: 0; border-left: 1px solid var(--mobile-nav-li-border-color-light); cursor: pointer; line-height: 0; user-select: none; } /* Das Icon-Element (Mask) */ .icon-sub { --icon-size: 1.4rem; width: var(--icon-size); height: var(--icon-size); /* Füllfarbe des Icons */ background: currentColor; /* Verhindert, dass das Icon fokussierbar wird */ pointer-events: none; /* Dasselbe Icon-Symbol wie im Hauptmenü, nur um 270 Grad gedreht */ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cg transform='rotate(270 7.5 7.5)'%3E%3Cpath d='M2.1,3.2l5.4,5.4l5.4-5.4L15,4.3l-7.5,7.5L0,4.3L2.1,3.2z'/%3E%3C/g%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; /* Sicherstellen, dass mask die background-color des Elements nutzt */ background-color: currentColor; /* Animation */ display: inline-block; transition: transform var(--transition-duration-short) cubic-bezier(.4,0,.2,1); transform-origin: center; /* Geschlossen */ transform: translateX(0) scale(1); } /* Offen: Schiebt den Pfeil leicht nach links */ .toggle-sub[aria-expanded="true"] .icon-sub { /* Feine Bewegung */ transform: translateX(-6px) scale(1.02); } /* Styling für Links auf Unterebenen */ .sub-nav { left: -100%; /* Wir benutzen left und nicht transform, um die Ebene einzufliegen, weil .sub-nav zu einem eigenen Containing Block würde, wenn man transform nutzt. Dann würde Ebene 3 und tiefer trotz position: fixed; nicht oben im Viewport, sondern relativ zu .sub-nav (also relativ zum Scrollzustand von Ebene 2) starten. */ transition: left var(--transition-duration); /* Die Unterebene aus dem Scroll-Kontext der Ebene 1 (und die tieferen Ebenen aus denen der höheren Ebenen) lösen */ position: fixed; top: 0px; width: 100%; /* volle Viewport-Höhe für sauberes Scrolling */ height: 100dvh; background: var(--mobile-nav-bg-color); z-index: 1000; /* eigener Scroll-Container für Ebene 2 und tiefer */ /* Das Untermenü mit Scrollbalken nach oben und unten darstellen, wenn sonst Inhalt abgeschnitten würde */ overflow-x: hidden; overflow-y: auto; /* Scroll-Events (nur wenn er scrollbar ist) auf diesen Container beschränken und nicht aus ihm hinausgehen lassen. */ overscroll-behavior: contain; /* Platz für Header-Höhe (--mobile-nav-margin-top wird per JS gesetzt). Damit der Button "Zurück" und der Schließen-Button des Menüs auf derselben Höhe stehen muss die Höhe dieses paddings immer genau so hoch sein wie die Höhe von div.flex-container. Und dessen Höhe schwankt je nachdem wie hoch der Website-Titel im Header gerade ist. Die endgültige Höhe der margin wird per JavaScript gesetzt. */ padding-top: var(--mobile-nav-margin-top); /* Die Links hierdrin sind anklickbar und zeigen einen Cursor-Pointer, aber der Hintergrund des Menüs bitte nicht. */ cursor: auto; } /* Das Untermenü zu dem im Moment aktiven Menüpunkt einfliegen */ .sub-nav.subnav--open { left: 0; } /* Überschrift des aktiven Hauptmenüpunkts */ .sub-heading { background: var(--mobile-nav-sub-heading-bg-color); /* Textfarbe der Unterüberschrift und des Pfeil-Symbols */ color: var(--mobile-nav-sub-heading-text-color); padding-inline: var(--space-3xl); /* Hier keinen Cursor-Pointer verwenden, sondern den normalen Mauszeiger. Diese Zeile ist nicht anklickbar. */ cursor: auto; /* Auslassungszeichen wie bei .menu-overlay a:has(+.toggle-sub), wenn horizontal nicht genug Platz für den Text da ist. */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Wird benutzt für den Pfeil zurück, also für den Pfeil nach links */ .sub-nav .submenu-back { /* Passend zur Höhe der .header-actions. */ --button-height: 5.2rem; position: absolute; left: var(--space-xl); /* Den Button innerhalb der Höhe von div.flex-container vertikal zentrieren: Höhe des Containers ist --mobile-nav-margin-top, abzüglich Höhe des Buttons. */ top: calc((var(--mobile-nav-margin-top) - var(--button-height)) / 2); width: var(--button-height); height: var(--button-height); color: var(--mobile-nav-sub-heading-text-color); border: 0; /* Icon im Button zentrieren */ display: flex; align-items: center; justify-content: center; /* Browser-Standard für padding überschreiben */ padding: 0rem; cursor: pointer; border-radius: var(--border-radius-buttons); corner-shape: squircle; background-color: var(--mobile-nav-back-button-bg-color); transition: background-color var(--transition-duration); } .sub-nav .submenu-back:hover { background-color: var(--mobile-nav-back-button-hover-bg-color); } .sub-nav .submenu-back:active { /* Skalierungseffekt hinzufügen - derselbe Effekt wie bei Buttons nach oben */ animation: buttonPress var(--transition-duration-short) ease; } .sub-nav .submenu-back:focus-visible { outline: 3px solid var(--mobile-nav-back-focus-visible-color); outline-offset: 1px; } /* Den Pfeil nach links einfügen und stylen */ .sub-nav .submenu-back .icon-left { --icon-size: 1.4rem; display: inline-block; width: var(--icon-size); height: var(--icon-size); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M2.1 3.2l5.4 5.4 5.4-5.4L15 4.3 7.5 11.8 0 4.3 2.1 3.2z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-color: currentColor; transform: rotate(90deg); } /* .main-nav-container, das Hauptmenü, in der schmalen Ansicht nicht zeigen */ .main-nav-container { display: none; } .side-nav { display: none; } main { /* Diesem Element die Möglichkeit geben, größer zu werden. Es ist das einzige Element, das wachsen darf. Damit füllt es bei kurzem Bildschirminhalt den Platz aus, so dass der Footer unten am Bildschirmrand steht. - flex-grow: 1 Das Element soll wachsen dürfen. - flex-shrink: 0 Das Element soll nicht schrumpfen. - flex-basis: 16rem flex-basis ist der Ausgangswert für die Veränderungen durch flex-grow und flex-shrink. Da flex-shrink verboten ist, fungieren die 16rem als Art Mindesthöhe. Eine Mindesthöhe soll da sein, damit auch etwas Platz beansprucht wird, wenn die Seite praktisch leer ist. Sieht komisch aus, wenn der Inhalt zu wenig Höhe einnimmt. */ flex: 1 0 16rem; /* Kein Grid-System. */ grid-area: auto; margin-inline: auto; /* Ungefähr passend zur Höhe des Headers, der oben fixiert ist */ /* scroll-padding-top wird in mobile-nav.js entsprechend gesetzt. */ margin-top: calc(1.5 * var(--space-6xl)); /* Sobald .side-nav nicht mehr neben main steht, würde main breiter als er das sonst ist. Das soll hiermit vermieden werden. */ /* Um die gewohnte Inhaltsbreite zu erhalten, wird main hier begrenzt: maximal 84rem (840px) oder - falls der verfügbare Platz kleiner ist - die Containerbreite abzüglich der horizontalen Außenabstände (siehe margin-inline). */ width: min(84rem, calc(100% - 2 * var(--space-xl))); } /* Einen etwas kleineren Abstand oberhalb der Seitenüberschrift setzen */ main h1 { margin-top: var(--space-0); margin-bottom: var(--space-3xl); padding-inline: var(--space-4xl); } main h2 { margin-bottom: var(--space-sm); } main h3 { margin-top: var(--space-xl); } main p { margin-top: var(--space-md); margin-bottom: var(--space-md); } main table { margin-block: var(--space-md); } main .back-to-top { min-width: 13.6rem; margin-bottom: var(--space-3xl); } main input[type="button"], main input[type="submit"] { margin-top: var(--space-xl); min-width: 13.6rem; padding-block: var(--space-md); } main .back-to-top a { padding-block: var(--space-md); } footer { /* Kein Grid-System. */ grid-area: auto; /* Das Element soll nicht wachsen. */ flex: 0 0 min-content; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); padding-inline: var(--space-6xl); min-height: 16.16rem; /* Falls die Seite zu breit ist, soll der Footer nicht mit breiter sein. Stattdessen soll er genau so breit sein wie der Viewport. Entsprechend wie beim Header. */ width: 100%; max-width: 100vw; } footer .footer-container { margin-left: var(--space-0); column-gap: var(--space-4xl); } footer .footer-column { min-width: 22.4rem; } footer .footer-column:last-child { margin-bottom: var(--space-xl); } footer h2 { margin-top: var(--space-3xl); margin-bottom: var(--space-4xl); } footer li { margin-block: var(--space-md); } footer .icon-grid { margin-bottom: var(--space-md); } footer .footer-bottom p { margin-bottom: var(--space-3xl); } } /* 55rem entspricht 880px. */ @media screen and (width <= 55rem) { /* Bilder automatisch auf verfügbaren Raum skalieren Hiermit werden die Bilder erst untereinander dargestellt und wenn das nicht reicht werden sie skaliert, damit sie auf die Bidschirmbreite passen. */ main img { max-width: 100%; height: auto; /* Abstände zwischen den Bildern ergänzen */ margin-top: var(--space-md); margin-right: var(--space-md); } /* Den Abstand unter Bildreihen entfernen; er wäre unter dem letzten Bild einer Reihe jetzt doppelt, nachdem die Bilder nicht mehr in diesen Reihen stehen. */ .ce-row { margin-bottom: var(--space-0); } footer { padding-inline: var(--space-5xl); } footer .footer-container { /* Ausrichtung der Elemente jeweils relativ weit außen und außen, sowie pro Zeile (auch nach Zeilenumbruch) zentriert */ justify-content: space-around; } footer h2 { margin-bottom: var(--space-2xl); } footer li { margin-block: var(--space-xl); } footer nav a { padding-block: var(--space-sm); margin-block: var(--space-sm); margin-inline: var(--space-sm); } } /* Bei noch schmalerem Display die Größe der Hauptüberschrift anpassen 43rem entspricht 688px. */ @media screen and (width <= 43rem) { footer { padding-top: var(--space-xl); padding-inline: var(--space-xl); } footer .footer-container { /* Ab hier die Elemente immer untereinander darstellen */ flex-direction: column; align-items: center; padding-top: var(--space-sm); } footer .footer-column { justify-items: center; /* Jeder Block ist im mobilen Layout gleich breit, aber nicht breiter als der Viewport hergibt. */ width: 100%; /* Die bisher gesetzte Mindestbreite wäre auf schmalen Bildschirmen zu breit. */ min-width: auto; /* padding-inline würde den Inhalt seitlich nach rechts verschieben, wenn der Bildschirm zu schmal ist. */ padding-inline: var(--space-0); /* Zentriert, da dies bei kleinen Bildschirmen besser aussieht */ text-align: center; } /* Wenn es neben einem Icon eine zweite Zeile gibt (das ist bei der Zeile Straße und Hausnummer und dann der Zeile Postleitzahl Ort der Fall), dann soll sichergestellt werden, dass das Icon immer nah neben dem Text steht - auch dann, wenn die erste Zeile kürzer als die zweite ist. */ footer .icon-grid { /* Text innerhalb des Blocks linksbündig */ text-align: left; } footer h2 { margin-top: var(--space-3xl); } footer nav a { padding-inline: var(--space-md); } } /* Sehr schmal 37.45rem entspricht 599px. */ @media screen and (width <= 37.45rem) { .header-actions { display: none; } /* Suchformular zweizeilig machen */ .search-overlay .search-form__inner { display: grid; grid-template-columns: auto 1fr; padding-block: var(--space-2xl); padding-inline: var(--space-xl); row-gap: var(--space-xl); column-gap: var(--space-0); } .search-overlay .search-form__icon { /* Höhe passend zur height des Submit-Buttons - evtl. noch in CSS-Variable auslagern */ height: 4.8rem; padding-block: var(--space-md); border-top: 1px solid var(--search-overlay-form-inner-icon-input-border-color); border-bottom: 1px solid var(--search-overlay-form-inner-icon-input-border-color); border-left: 1px solid var(--search-overlay-form-inner-icon-input-border-color); border-top-left-radius: var(--border-radius-buttons); border-bottom-left-radius: var(--border-radius-buttons); corner-shape: squircle; } .search-overlay .search-form__icon svg { margin-left: var(--space-lg); margin-right: var(--space-sm); margin-top: 0.25rem; } .search-overlay .search-form input[type="search"] { padding-block: var(--space-md); padding-left: var(--space-xs); /* Höhe passend zum Submit-Button */ height: 4.8rem; border-top: 1px solid var(--search-overlay-form-inner-icon-input-border-color); border-bottom: 1px solid var(--search-overlay-form-inner-icon-input-border-color); border-right: 1px solid var(--search-overlay-form-inner-icon-input-border-color); border-top-right-radius: var(--border-radius-buttons); border-bottom-right-radius: var(--border-radius-buttons); corner-shape: squircle; } /* Button in eigene Zeile, volle Breite */ .search-overlay .search-form__submit { grid-column: 1 / -1; width: 100%; justify-self: stretch; } } /* Noch schmaler 24.95rem entspricht 399px. */ @media screen and (width <= 24.95rem) { .flex-container { padding-inline: var(--space-xl); column-gap: var(--space-xl); } } /* Extrem schmal (z.B. günstige Android-Handys im Hochformat) 21.26rem entspricht 340px. */ @media screen and (width <= 21.26rem) { :root { --font-size-homepage-link-title: 2rem; } .flex-container { padding-block: var(--space-md); padding-inline: var(--space-md); } .homepage-link a { padding-bottom: var(--space-0); } .subtitle { display: none; } .mobile-nav .menu-button { --button-height: 4.8rem; /* Das ist der Skalierungsregler für den Button und für .nav-icon */ /* 75% der vorherigen Größe */ font-size: 0.75rem; } .sub-nav .submenu-back { --button-height: 4.8rem; } } /* Noch schmaler als extrem schmal 18.13rem entspricht 290px. */ @media screen and (width <= 18.13rem) { :root { --font-size-homepage-link-title: 1.85rem; } .flex-container { column-gap: var(--space-xs); padding-inline: var(--space-sm); padding-block: var(--space-sm); } .title { font-weight: 400; } main { margin-top: calc(1.2 * var(--space-6xl)); } } }