- /
- statt loser Absätze (WCAG 1.3.1). Die Optik bleibt exakt die alte, gemessen vorher/nachher: 30px Einzug, Lime-Pfeil 0,4em unter der Zeilenoberkante, gestrichelte Linie in Leistungen/Service, Zeilenhöhe 37px bzw. in Kontakt ohne Linie mit 1em Abstand. Allgemeine Linklisten-Regeln: custom_vm_linkliste.css. */ /* Block statt Raster: Im Grid fallen Außenabstände nicht zusammen – die Abstände der alten Absätze entstanden aber genau so (Absatz-Außenabstand verschmilzt mit dem der Überschrift darüber). */ .page-footer ul.vm-linkliste { display: block; } .page-footer .vm-linkliste-item { position: relative; padding-left: 1.875em; /* = TAO .icon-text-block */ letter-spacing: 0.5px; /* wie p oben – die alten Links standen in einem Absatz; ohne den Wert läuft der Text schmaler und bricht mobil anders um */ } .page-footer .sp-2 .vm-linkliste-item, .page-footer .sp-3 .vm-linkliste-item { margin: 0.4em 0 0; padding-bottom: 0.5em; border-bottom: 1px dashed #475e48; } .page-footer .sp-4 .vm-linkliste-item { margin: 1em 0; } /* Link wie Fließtext: keine Flexzeile, keine erzwungene Mindesthöhe – die Klickfläche kommt aus dem ::after darunter */ .page-footer .vm-linkliste-link { display: block; min-height: 0; gap: 0; } .page-footer .vm-linkliste-text, .page-footer .vm-linkliste-sublabel { display: block; } .page-footer .vm-linkliste-label, .page-footer .vm-linkliste-sublabel { font-size: inherit; line-height: inherit; } /* Klickfläche über die ganze Zeile inkl. Abstand und Linie (WCAG 2.5.8), ohne das Layout zu verschieben: Pseudoelement am Link, positioniert am
- */ .page-footer .vm-linkliste-link::after { content: ""; position: absolute; top: -0.4em; right: 0; bottom: 0; left: 0; } .page-footer .sp-4 .vm-linkliste-link::after { top: -0.25em; bottom: -0.25em; } /* Pfeil/Icon an derselben Stelle wie das ::before des alten Absatzes */ .page-footer .vm-linkliste-icon { position: absolute; top: 0.4em; left: 0; line-height: 1; } .page-footer .vm-linkliste-icon::before { font-size: 1em; color: #b8d430; } .header-navigation { box-shadow: none; } .main-navigation { margin-right: calc(3% + var(--safe-area-right)); padding-right: 0; } .main-navigation > ul > li::before { display: none; } .main-navigation > ul > li > a, .main-navigation > ul > li > strong, .main-navigation > ul > li > span.active, .main-navigation > ul > li > span.trail, .main-navigation > ul > li > span.forward { font-weight: 700; font-size: 16px; } .main-navigation > ul > li > ul li[data-icon]::before, .main-navigation > ul > li > ul li[class^="icon-"]::before, .main-navigation > ul > li > ul li[class*=" icon-"]::before { top: 0.87em; color: #b8d430; margin-left: 0.5em; } .main-navigation > ul > li > ul li { padding: 0.25em; letter-spacing: 0.5px; } .main-navigation > ul > li > ul a { border-radius: 0 !important; } .main-navigation > ul > li > ul a:hover { background: #eee; } .main-navigation > ul > li > ul strong.active, .main-navigation > ul > li > ul strong.trail, .main-navigation > ul > li > ul strong.forward, .main-navigation > ul > li > ul span.active, .main-navigation > ul > li > ul span.trail, .main-navigation > ul > li > ul span.forward { color: #1e560f; font-weight: 700; background: #eee; } .main-navigation > ul > li > a.active, .main-navigation > ul > li > a.trail, .main-navigation > ul > li > a.forward, .main-navigation > ul > li > strong.active, .main-navigation > ul > li > strong.trail, .main-navigation > ul > li > strong.forward, .main-navigation > ul > li > span.active, .main-navigation > ul > li > span.trail, .main-navigation > ul > li > span.forward { color: #1E560F; background: #eee; } /* --- Desktop-Hauptmenü per Tastatur (> 1280px) --------------------------- TAO öffnet die Untermenüs nur bei :hover. Die Links darin sind trotzdem Tab-Stopps – der Fokus verschwand in einer unsichtbaren Klappe (WCAG 2.1.1, 2.4.7). :focus-within öffnet sie wie das Überfahren. Esc schließt (vm_basis_a11y.js setzt .vm-zu, WCAG 1.4.13); die Klasse fällt weg, sobald Maus bzw. Fokus den Punkt verlassen. Fokusring im Dropdown nach innen: TAO kappt die Klappe mit overflow:hidden. */ .main-navigation > ul > li:focus-within > ul, .main-navigation > ul > li:focus-within > .mega-dropdown { z-index: 1; max-height: 9999px; padding: 0.875em 1em; opacity: 1; transition: opacity 0.2s; pointer-events: auto; } .main-navigation > ul > li:focus-within > a::after, .main-navigation > ul > li:focus-within > strong::after { right: 1.42857em; left: 1.42857em; } .main-navigation > ul > li.vm-zu > ul, .main-navigation > ul > li.vm-zu:hover > ul, .main-navigation > ul > li.vm-zu:focus-within > ul, .main-navigation > ul > li.vm-zu > .mega-dropdown { max-height: 0; padding: 0; opacity: 0; transition: none; pointer-events: none; } .main-navigation > ul > li > ul { --vm-focus-offset: -3px; } /* Klappen der hinteren Hauptpunkte rechtsbündig öffnen TAO richtet nur li.last rechts aus – das Mega-Menü vergibt die Klasse hier aber nicht. Links ausgerichtet ragten „Service" (bis 75px) und „Leistungen" (bis 16px) zwischen 1281 und 1680px über den Fensterrand, lange Einträge wurden abgeschnitten (WCAG 1.4.10). Gemessen 14.09.2026. */ .main-navigation > ul > li:nth-last-child(-n+3) > ul { left: auto; right: -0.125em; } /* Hauptpunkte: Ring nach innen, die Kopfzeile schneidet sonst oben ab */ .main-navigation > ul > li > a, .main-navigation > ul > li > strong { --vm-focus-offset: -3px; } .dark { color: #444 !important; } .darkgreen { color: #1E560F !important; } .white, p.white, .white a, a.white { color: #fff !important; } .liste .vm-card-icon { background: var(--vm-white); } .liste .vm-card-inner { padding: 0 !important; } .bold { font-weight: 700 !important; } .normal { font-weight: 400 !important; } .main-content p { font-size: 1.1em; } .home-start.kunden .bg-white .rs-column { background: rgb(255,255,255,0.85); padding: 2.5em 3em; width: 800px !important; } .mod_rocksolid_slider.kundenstimmen .testimonial > p, .main-content .mod_rocksolid_slider.kundenstimmen .testimonial > p { padding: 1.5em 1.25em 1.125em; background: #fff; } .mod_rocksolid_slider.kundenstimmen p strong { background: #b8d430; color: #1E560F; border-radius: 16px; padding: 0.35em 0.75em; } .mod_rocksolid_slider.kundenstimmen .testimonial-author, .mod_rocksolid_slider.kundenstimmen .testimonial .testimonial-author { font-weight: 700; font-size: 18px; letter-spacing: 0.5px; } .mod_rocksolid_slider.kundenstimmen .testimonial-author > small b, .mod_rocksolid_slider.kundenstimmen .testimonial .testimonial-author > small b { font-size: 16px; font-weight: 400; line-height: 1.25; } .mod_rocksolid_slider.kundenstimmen.rsts-skin-testimonials .rsts-nav a { width: 27px; height: 27px; } .mod_rocksolid_slider.kundenstimmen.rsts-skin-testimonials .rsts-nav a::after { width: 16px; height: 16px; background-color: #edf4cb; } .mod_rocksolid_slider.kundenstimmen.rsts-skin-testimonials .rsts-nav a:hover::after, .mod_rocksolid_slider.kundenstimmen.rsts-skin-testimonials .rsts-nav a.active::after{ background-color: #b8d430; } .mod_rocksolid_slider.kundenstimmen.rsts-skin-testimonials .rsts-prev::after, .mod_rocksolid_slider.kundenstimmen.rsts-skin-testimonials .rsts-next::after { color: #1E560F; font-size: 18px; } /* --- Siegel: Energieeffizienz-Expertenliste + GIH (28.09.2026) ----------- Die dena erlaubt die Logos nur „in der vorgegebenen Gestalt und Form", grafische oder farbliche Änderungen sind untersagt. Hier deshalb NUR Größe, Abstand und Fokusring – nie filter, opacity oder Farbe. Footer (dunkelgrüner Verlauf) nutzt die Varianten mit weißer Fläche, „Über uns" (#f5f5f5) die transparenten. Gleiche Höhe ohne feste Pixelwerte: Die Seitenverhältnisse stecken im flex-grow (EEE 260:80 = 3,25 · GIH 180:80 = 2,25). Beide teilen sich die Zeilenbreite in genau diesem Verhältnis und sind dadurch automatisch exakt gleich hoch – egal wie breit die Spalte gerade ist. */ .vm-siegel { display: flex; align-items: center; gap: 0.9rem; margin: 1.1rem 0 0; padding: 0; max-width: 430px; /* Stellschraube für die Größe nebeneinander */ } .vm-siegel a { display: block; line-height: 0; border-radius: var(--vm-radius-small); } .vm-siegel img { display: block; width: 100%; height: auto; } /* Nur im Footer: Dort liegen die Varianten MIT weißer Fläche. Die Rundung muss aufs Bild selbst – am allein rundet sie nichts, weil das Bild als Kindelement ohne overflow: hidden darüber hinaussteht. Auf „Über uns" sind die Logos transparent, da gäbe es nichts zu runden. Betroffen ist nur die weiße Fläche, die wir selbst angelegt haben – das dena-Logo und seine Schutzzone bleiben unangetastet. */ .page-footer .vm-siegel img { border-radius: var(--vm-radius-small); } /* Basis = die transparenten Dateien („Über uns"): 227:55 und 148:55. Der Footer nutzt die Varianten mit weißer Fläche, die durch die Schutzzone ein anderes Verhältnis haben: 260:80 und 180:80. */ .vm-siegel-ee { flex: 4.13 1 0; } .vm-siegel-gih { flex: 2.69 1 0; } .page-footer .vm-siegel-ee { flex: 3.25 1 0; } .page-footer .vm-siegel-gih { flex: 2.25 1 0; } .vm-siegel a:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 3px; } /* ========================================================== Schriftgrößen ========================================================== */ .font-size-xxs { font-size: 0.6em !important; } @media screen and (max-width: 900px) { .font-size-xxs { font-size: 0.8em !important; } } .font-size-xs { font-size: 0.8em !important; } @media screen and (max-width: 900px) { .font-size-xs { font-size: 0.9em !important; } } .font-size-s { font-size: 16px !important; } @media screen and (max-width: 900px) { .font-size-s { font-size: 16pxem !important; } } .font-size-m { font-size: 1.2em !important; } @media screen and (max-width: 900px) { .font-size-m { font-size: 1.1em !important; } } .font-size-l { font-size: 1.5em !important; } @media screen and (max-width: 900px) { .font-size-l { font-size: 1.25em !important; } } .font-size-xl { font-size: 2em !important; } @media screen and (max-width: 900px) { .font-size-xl { font-size: 1.5em !important; } } .font-size-xxl { font-size: 3em !important; } @media screen and (max-width: 900px) { .font-size-xxl { font-size: 2em !important; } } .footer-links { padding-bottom: 100px; font-size: 16px; float: none; clear: both; } .footer-links ul li { letter-spacing: 0.5px; } /* Footer-Links ohne Trennstriche (Kundenwunsch 22.09.2026) ---------------- Das TAO-Theme setzt zwischen die Punkte einen senkrechten Strich: ein ::before-Pseudoelement von 1px Breite mit Hintergrundfarbe (main.css `.footer-links li:before`) – kein Textzeichen, deshalb hilft hier kein Suchen-und-Ersetzen im Inhalt. Der Strich wird nur unsichtbar gemacht, das Pseudoelement bleibt als reiner Abstandhalter stehen. `content: none` waere falsch: Dann fielen auch dessen Aussenabstaende weg und die Links klebten aneinander. Gleiche Spezifitaet wie die Theme-Regel (0,2,1) – es gewinnt die Quellreihenfolge, und custom_allgemein.css steht im kombinierten Asset hinter main.css. */ .footer-links li::before { width: 0; background: none; } /* Zielgröße der Footer-Links (WCAG 2.5.8): Polster am Link, per negativem Außenabstand ausgeglichen -> Klickfläche höher, Layout unverändert. Die aufgerufene Seite gibt Contao als aus – ohne dieselben Werte stünde sie als inline-Element auf der Grundlinie und damit höher als die Links daneben. */ .footer-links li > a, .footer-links li > strong { display: inline-block; padding: 0.5em 0; margin: -0.5em 0; vertical-align: middle; } /* --- Top-Link „Nach oben" (TAO-Element rsce_tao_footer_top) -------------- - Beschriftung NICHT per display:none verstecken: Der Link hätte dann gar keinen Namen (Screenreader: nur „Link"). Nur visuell ausblenden – TAO würde die Spans bei Hover/Fokus sonst neben dem Kreis einblenden. - Die Kante ist die Bedien-Information: Rahmen ≥ 3:1 (WCAG 1.4.11), Fläche 92 %, damit Fotos darunter nicht durchschlagen. - Pfeil-Glyphe mit leerem Alternativtext (/ ""), sonst landet das Zeichen aus der Privatnutzungszone im Linknamen. Erste Zeile = Rückfall für Browser ohne diese Syntax. - Fokus springt mit nach oben: vm_basis_a11y.js. - z-index: über Bildunterschriften (z-index 2), unter Quicknav (100). */ .footer-top-link { position: fixed; bottom: 0.5rem; right: 0.5rem; z-index: 90; border-radius: 50%; /* Fokusring folgt dem Kreis */ color: #444 !important; } .footer-top-link::after { border-radius: 50%; background: rgba(255, 255, 255, 0.92) !important; border: 1px solid #767676 !important; box-shadow: none !important; content: "\e941"; content: "\e941" / ""; } .footer-top-link > span, .footer-top-link:hover > span, .footer-top-link:focus > span { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================== @media (max-width: 1500px) ========================================================== */ @media screen and (max-width: 1500px) { /* Siegel: Zwischen 1500px und 1280px ist die Kontaktspalte (22 %) zu schmal für zwei Logos nebeneinander – hier untereinander. Gleiche Höhe dann über eine feste Höhe statt über die Zeilenbreite. */ .page-footer .vm-siegel { flex-direction: column; align-items: flex-start; gap: 0.75rem; max-width: none; } .page-footer .vm-siegel a { flex: 0 0 auto; } .page-footer .vm-siegel img { width: auto; height: 64px; } } /* ========================================================== @media (max-width: 1280px) ========================================================== */ @media screen and (max-width: 1280px) { :root { --vm-header-space: 106px; /* Kopfzeile 98px */ } .padding-right-xxs, .padding-right-xs, .padding-right-s, .padding-right-m, .padding-right-l, .padding-right-xl, .padding-right-xxl { padding-right: 0 !important; } .padding-left-xxs, .padding-left-xs, .padding-left-s, .padding-left-m, .padding-left-l, .padding-left-xl, .padding-left-xxl { padding-left: 0 !important; } .page-header { position: fixed; width: 100%; } .header-navigation-inner { height: auto !important; } .main-navigation-mobile-open, .main-navigation-mobile.is-enabled { display: block; } .main-navigation-mobile-open { width: 64px; height: 49px; } .main-navigation-mobile-open::after { height: 2px; border-radius: 1px; box-shadow: 0 9px #444, 0 18px #444; } .main-navigation-mobile a::before, .main-navigation-mobile strong::before, .main-navigation-mobile span.active::before, .main-navigation-mobile span.trail::before, .main-navigation-mobile span.forward::before { display: none; } .main-navigation-mobile ul li ul li a::before, .main-navigation-mobile ul li ul li strong::before, .main-navigation-mobile ul li ul li span.active::before, .main-navigation-mobile ul li ul li span.trail::before, .main-navigation-mobile ul li ul li span.forward::before { display: inline-block; color: #b8d430; } .main-navigation-mobile li li strong.active::before { color: #1E560F; } .main-navigation-mobile li a { letter-spacing: 0.5px; } .main-navigation { display: none; } .main-navigation-mobile-open { position: fixed; } .logo { text-align: center; margin-left: 0; padding-top: 0.75em; } .footer-links { padding-top: 1.5em; } .leistung .main-content { margin-bottom: 100px; } .page-footer .sp-1.rs-column { width: 61% !important; margin-right: 0 !important; clear: left; } .page-footer .sp-2.rs-column{ margin-right: 4%; } .page-footer .sp-3.rs-column{ margin-right: 0; } .page-footer .sp-2.rs-column, .page-footer .sp-3.rs-column { clear: none; width: 48% !important; margin-top: 0; } .page-footer .sp-4.rs-column{ margin-right: 0; margin-top: 1em; clear: left; /* Die Spalte steht hier allein in ihrer Zeile und bekommt sie ganz. fit-content machte sie so schmal, dass die beiden Siegel untereinander mussten. Spalte 2 und 3 bleiben bewusst nebeneinander (Bianka, 28.09.2026) – sp-4 rutscht deshalb nicht neben sp-3. Ab 800px greift weiter unten wieder fit-content. */ width: 100% !important; } /* Siegel: ab hier ist wieder Platz – nebeneinander, Größe über die Zeilenbreite (siehe Kommentar am Basis-Block). */ .page-footer .vm-siegel { flex-direction: row; align-items: center; gap: 0.9rem; max-width: 430px; } /* a.vm-siegel-* statt .vm-siegel-*: Der 1500er Block oben setzt `.page-footer .vm-siegel a { flex: 0 0 auto }` – das ist spezifischer als eine reine Klasse und würde die Proportionen sonst schlagen. */ .page-footer .vm-siegel a.vm-siegel-ee { flex: 3.25 1 0; } .page-footer .vm-siegel a.vm-siegel-gih { flex: 2.25 1 0; } .page-footer .vm-siegel img { width: 100%; height: auto; } } /* ========================================================== @media (max-width: 1000px) ========================================================== */ @media screen and (max-width: 1000px) { .quicknav { padding-bottom: 0 !important; } /* Top-Link über der Quicknav-Leiste (Höhe zentral in custom_quicknav.css) */ .footer-top-link { bottom: calc(var(--vm-quicknav-space, 64px) + 0.5rem); } .page-footer .small-width.radius { max-width: 90% !important; } } /* ========================================================== @media (max-width: 900px) ========================================================== */ @media screen and (max-width: 900px) { .hide-900px { display: none; } .only-900px { display: block; } .leistung .main-content { margin-top: 0; } /* ⚠ Die 98px sind die Höhe der FIXEN Kopfzeile und müssen in jeder dieser Regeln stehen bleiben. Oberhalb von 900px setzt TAOs script.js den Ausgleich selbst als Inline-Padding an .page – bei max-width: 900px tut es das ausdrücklich NICHT (script.js, Zeile 217). Darunter ist dieses CSS also der einzige Ausgleich. Wer ihn hier auf 0 setzt, legt die Kopfzeile über den Seiteninhalt. */ .leistung .content-wrapper { padding-top: calc(98px + 1em); } /* Hero in der Hauptspalte: Der 1em-Abstand stand vorher zwischen Hero (Tagline) und Inhalt – jetzt gehört er unter den Hero. Die Kopfzeilen- höhe bleibt, nur die 1em fallen weg. Stand vorher auf 0 und verdeckte dadurch das Kopfbild – auf „Über uns" und „Kontakt" war der Kopf des Kunden abgeschnitten (28.09.2026). */ .leistung .content-wrapper:has(.main-content .vm-hero) { padding-top: 98px; } .content-wrapper { padding-top: 98px; } .home-start.kunden.centered-wrapper { padding-top: 70px; padding-bottom: 70px; margin-top: 70px; } .home-start.kunden .bg-white .rs-column { padding: 2em 2.5em; width: 100% !important; } } /* ========================================================== @media (max-width: 800px) ========================================================== */ @media screen and (max-width: 800px) { .only-800px { display: block; } .kundenbild { margin-top: 70px; } .home-start.centered-wrapper .vm-cw-caption { display: none; } .home-start.kunden.centered-wrapper { padding-top: 40px; margin-top: 0; } .home-start.centered-wrapper { padding-top: 40px; min-height: auto !important; } .home-start .centered-wrapper-background { background-image: none !important; } .home-start .bg-white .rs-column { width: 100% !important; box-shadow: none; padding: 1.5em; } .page-footer .sp-1.rs-column { width: 100% !important; margin-right: 0; clear: left; } .page-footer .sp-2.rs-column, .page-footer .sp-3.rs-column { width: fit-content !important; margin-right: 0; clear: left; } /* Bis hierher galt die 61 % aus dem 1280er Block – ab 800px verhält sich die Kontaktspalte wieder wie vorher. */ .page-footer .sp-4.rs-column { width: fit-content !important; } .page-footer .sp-2.rs-column .icon-text-block, .page-footer .sp-3.rs-column .icon-text-block, .page-footer .sp-2.rs-column .vm-linkliste-item, .page-footer .sp-3.rs-column .vm-linkliste-item { padding-right: 1em; } } /* ========================================================== @media (max-width: 600px) ========================================================== */ @media screen and (max-width: 600px) { .logo img { margin-left: 2em; } .home-start.centered-wrapper { padding-top: 25px; } .home-start.kunden.centered-wrapper { padding-top: 20px; margin-top: 0; } .home-start.kunden .bg-white .rs-column { padding: 0; background: transparent; border-radius: 0; } .page-footer .small-width.radius { padding: 2em 2em 1em; } .page-footer .small-width.radius .centered-wrapper-inner { margin-left: 0 !important; margin-right: 0 !important; } .verlauf .centered-wrapper-background { background-size: cover !important; } } /* ========================================================== @media (max-width: 520px) ========================================================== */ @media screen and (max-width: 520px) { :root { --vm-header-space: 89px; /* Kopfzeile 81px */ } .content-wrapper { padding-top: 80px; } /* Die .leistung-Regeln aus dem 900er Block sind spezifischer und würden sonst mit ihren 98px gewinnen. */ .leistung .content-wrapper { padding-top: calc(80px + 1em); } .leistung .content-wrapper:has(.main-content .vm-hero) { padding-top: 80px; } .logo { padding-top: 1em; padding-bottom: 0.5em; } .logo img { margin-left: 4em; max-height: 3em; } .page-footer .sp-2.rs-column, .page-footer .sp-3.rs-column, .page-footer .sp-4.rs-column { width: 100% !important; } } /* ========================================================== Weniger Bewegung (WCAG 2.3.3) – bewusst am Dateiende Deckt CSS-Transitions, -Animationen und weiches Scrollen ab. Was JavaScript Frame für Frame bewegt, fragt das Skript selbst ab (vm_basis_a11y.js beim Top-Link). Fokusringe sind keine Animation. ========================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===================================================================== VM Quicknav – Baum Energieberatung Fixierte Schnellnavigation am unteren Bildschirmrand (Contao Individuelle Navigation mit CSS-Klasse „quicknav"). Nach dem TAO-Framework-CSS laden. Optik: schwebende Leiste in Weiß, Einträge als abgerundete „Chips". Hover/aktiv füllt den Chip (nicht die harte Zelle) -> saubere Ecken. Desktop: Schrift fließend bis ~19px. Mobil: Icon über Label gestapelt (wie Kleinanzeigen-App), Schrift schrumpft -> alle Punkte in einer Reihe. Farb-/Maß-Tokens wie in custom_vm_icon_boxes.css (--vm-*). ===================================================================== */ /* 0) PLATZ RESERVIEREN ------------------------------------------------ Die fixe Leiste liegt ÜBER dem Dokument. Eine Variable, drei Nutzer: html { scroll-padding-bottom } in custom_allgemein.css (Tab-Fokus landet nie hinter der Leiste, WCAG 2.4.11), Position des Top-Links und die Enthüllung der Sprunglinks. Gemessen 14.09.2026 (Leiste plus Randabstand): 72px (> 1000px), 60px (≤ 1000px, custom_allgemein.css nimmt dort den Randabstand weg), 56–61px (≤ 800px) – jeweils plus Luft. */ :root { --vm-quicknav-space: calc(84px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 1000px) { :root { --vm-quicknav-space: calc(72px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 800px) { :root { --vm-quicknav-space: calc(64px + env(safe-area-inset-bottom, 0px)); } } /* 1) WRAPPER – fixiert, zentriert, hebt die Leiste vom Rand ab -------- */ .quicknav { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; display: flex; justify-content: center; /* Abstand zum unteren Rand + iPhone-Safe-Area */ padding: 0 1rem calc(0.75rem + env(safe-area-inset-bottom)); /* der transparente Randbereich soll keine Klicks abfangen */ pointer-events: none; /* Fokusring knapp außerhalb des Chips – bleibt im Innenrand der Leiste */ --vm-focus-offset: 1px; } /* 2) DIE LEISTE – Liste als schwebender Container --------------------- */ .quicknav ul { list-style: none; display: flex; gap: 4px; /* Luft zwischen den Chips */ margin: 0 !important; padding: 6px !important; /* Innenrand -> Chips schweben im Container */ background: var(--vm-white); border: 1px solid var(--vm-border); border-radius: var(--vm-radius); /* 20px – etwas geringer als Vollrund, wie die Karten */ /* an die Kartenschatten angelehnt, aber kräftiger, da frei schwebend */ box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14); pointer-events: auto; /* Leiste selbst wieder klickbar */ } .quicknav ul li { display: flex; margin: 0; } /* TAO/Listen-Bullet abschalten */ .quicknav ul li::before { display: none !important; } /* 3) EINTRÄGE (Chips) ------------------------------------------------- */ .quicknav ul li a { display: flex; align-items: center; justify-content: center; gap: 0.55em; padding: 0.7em 1.15em; line-height: 1; border-radius: calc(var(--vm-radius) - 6px); /* konzentrisch zum Container (14px) */ color: var(--vm-primary); font-weight: 600; /* Desktop/Tablet: min. 16px (Barrierefreiheit), fließend bis ~19px */ font-size: clamp(1rem, 0.72rem + 0.9vw, 1.2rem); letter-spacing: 0.02em; white-space: nowrap; text-decoration: none !important; background: transparent; transition: background-color var(--vm-transition), color var(--vm-transition); } .quicknav ul li strong { font-size: clamp(1rem, 0.72rem + 0.9vw, 1.2rem); } .quicknav ul li a:hover, .quicknav ul li a:focus-visible { background: var(--vm-primary); color: var(--vm-white); } /* aktiver Menüpunkt – dezente Hellgrün-Fläche */ .quicknav ul li a.active, .quicknav ul li strong.active { display: flex; align-items: center; justify-content: center; gap: 0.55em; padding: 0.7em 1.15em; border-radius: calc(var(--vm-radius) - 6px); background: var(--vm-surface); color: var(--vm-primary); } /* Icons (Icon-Font-Glyphe / /