/* REST-CSS für Elementor-Dokumente (Theme 3.0). Lädt NACH allen Stylesheets von Elementor, und zwar nur - auf Ansichten, die ein Elementor-Dokument trägt (Vorlage „Elementor Volle Breite“ oder „Canvas“), und - in der Vorschau des Elementor-Editors, damit die Leinwand das echte Aussehen zeigt. Auf PHP-Ansichten lädt diese Datei nicht; dort gelten komponenten.css und die seitenbezogenen Stylesheets. Abgrenzung zu elementor-kit.css (beide Welten) und elementor-bruecke.css (nur PHP-Ansichten): siehe elementor-kit.css. Herkunft: docs/elementor-pilot-rest.css (Stand 20.09.2026, nach „Nativ zuerst“), Regel für Regel gemessen gegen die HTML-Fassung. Geändert sind nur der Symbolpfad (hier relativ zur Datei) und der Umbruch des Pausenknopfs (640 statt 700 px, siehe dort). Hinzugekommen sind am Ende die Blöcke „Lichtkasten“, „Module“ und „Brotkrumen-Modul“ – Markup, das nicht aus Elementor stammt. Grundsatz: Was Elementor selbst ausdrücken kann, steht in Elementor (globale Klasse, lokaler Stil, Kit-Standardstil) und ist damit im Editor sichtbar. Hier steht nur, was Elementor NICHT kann; jeder Block nennt den Grund („WARUM NICHT NATIV“). Rangfolge: Elementor schreibt Klassen als ".elementor .name" (0,2,0). Jede Regel hier braucht deshalb mindestens (0,2,1) oder einen Pseudo-Teil. Umbruchpunkte folgen dem Kit (920/700). Symbole: ../icons/ (Phosphor, liegen im Theme). Ab 3.1 steht am Ende der Nachtrag für die 18 Infoseiten (docs/elementor-rest-nachtrag.css, Symbolpfad umgestellt). 3.1.1 (Gegenmessung am Staging mit Elementor 4.3.2): Fokusring an Links in Absatz- und Überschriften-Widgets („Reparaturen an Elementors all: unset“) und Textlink als direktes Kind von .prosa. */ /* ---------- Symbole als Maske ---------- */ /* WARUM NICHT NATIV: Pseudo-Elemente (::before/::after) kennt das Stil-Panel nicht. Elementor-Schaltflächen nehmen keine Kinder auf, ein Symbol-Widget im Knopf geht also nicht, und die Mediathek hat keine SVG. Der Abstand zum Symbol (gap) steht dagegen in den Klassen. Achtung: frontend.min.css belegt .e-con::before (position: absolute, 100 % Breite und Höhe, content aus --background-overlay). Auf Containern (e-div-block, e-flexbox) deshalb ::after mit order: -1 nehmen, ::before nur auf Text- und Schaltflächen-Elementen. */ .elementor .mit-pfeil::after, .elementor .mit-herz::before, .elementor .medien-laden::before, .elementor .krume + .krume::before, .elementor .hinweis::after, .elementor .kachel-pfeil::after, .elementor .aktuell-eintrag::after, .elementor .medien-platz::after { content: ''; flex: none; background: currentColor; -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat; } .elementor .mit-pfeil::after { --symbol: url(../icons/arrow-right.svg); width: 1.15em; height: 1.15em; } .elementor .textlink.mit-pfeil::after { width: 1.1em; height: 1.1em; transition: transform 200ms var(--ease-out); } .elementor .mit-herz::before { --symbol: url(../icons/fill/heart.svg); width: 1.15em; height: 1.15em; } .elementor .medien-laden::before { --symbol: url(../icons/fill/play.svg); width: 1.15em; height: 1.15em; } .elementor .krume + .krume::before { --symbol: url(../icons/caret-right.svg); width: 1em; height: 1em; } .elementor .hinweis::after { order: -1; --symbol: url(../icons/info.svg); width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--akzent-text); } .elementor .kachel-pfeil::after { --symbol: url(../icons/arrow-up-right.svg); width: 1em; height: 1em; } .elementor .aktuell-eintrag::after { --symbol: url(../icons/arrow-right.svg); width: 1.25rem; height: 1.25rem; color: var(--akzent-text); transition: transform 250ms var(--ease-out); } .elementor .medien-platz::after { order: -1; width: 2.75rem; height: 2.75rem; color: var(--blau); } .elementor .medien-audio .medien-platz::after { --symbol: url(../icons/fill/spotify-logo.svg); } .elementor .medien-video .medien-platz::after { --symbol: url(../icons/fill/youtube-logo.svg); } /* ---------- Seitenkopf: Link im Brotkrumen ---------- */ /* WARUM NICHT NATIV: Der Link liegt IM Absatz-Widget (a.e-paragraph-link-base), eine Klasse lässt sich ihm nicht geben; Elementor setzt ihn auf "all: unset". Die Zeilenhöhe der Krume (min-height 2.75rem) steht nativ in der Klasse krume; hier bleibt nur die Klickfläche des Links selbst und die Unterstreichung für Zeigergeräte (Medienabfrage hover/pointer kennt Elementor nicht). */ .elementor .krume a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .elementor .krume a:hover { text-decoration: underline; } } /* ---------- Fließtext: Auszeichnung INNERHALB der Text-Widgets ---------- */ /* WARUM NICHT NATIV: ul/ol/li/strong/a sind Inline-HTML im Absatz-Widget, keine eigenen Elemente – sie haben kein Stil-Panel. ::marker ist ein Pseudo-Element; der Link im Absatz steht auf "all: unset" und muss Farbe und Unterstreichung zurückbekommen. Der Absatzrhythmus selbst (1.15em, 2.4em/0.7em um h2, 2em um h3) steht NICHT mehr hier: Klasse prosa (Flex-Spalte, gap 1.15em) und prosa-h2/prosa-h3. */ .elementor .prosa :is(ul, ol) { padding-left: 1.25rem; } .elementor .prosa li + li { margin-top: 0.45em; } .elementor .prosa li::marker { color: var(--akzent-text); } .elementor .prosa strong { font-weight: 700; } .elementor .prosa p a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; color: var(--akzent-text); cursor: pointer; } /* ---------- Kurz erklärt: Stern vor jedem Punkt ---------- */ /* WARUM NICHT NATIV: Pseudo-Element mit clip-path (Form). Der Einzug für den Stern (padding-inline-start) steht in der Klasse kurz-punkt. */ .elementor .kurz-punkt::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.6rem; height: 0.6rem; background: var(--blau); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } /* ---------- Galerie: Bildzoom beim Überfahren ---------- */ /* WARUM NICHT NATIV: Eltern-Hover wirkt auf ein Kind (.galerie-feld:hover .galerie-bild), und nur für Zeigergeräte. Das Raster selbst (groß/mittel/normal, Mobilfassung) steht nativ in galerie-feld und seinen Spielarten – kein :nth-child mehr. */ @media (hover: hover) and (pointer: fine) { .elementor .galerie-feld:hover .galerie-bild { transform: scale(1.04); } } /* ---------- Schaltflächen: Farbschema und Zeigergeräte ---------- */ /* WARUM NICHT NATIV: Das dunkle Schema hängt an :root[data-theme] bzw. prefers-color-scheme – Elementor-Klassen kennen keinen Vorfahren-Selektor und keine solche Medienabfrage. Hover auf ein Pseudo-Element (::after) ebenfalls nicht. */ :root[data-theme='dark'] .elementor .btn-tief { background-color: var(--blau); color: var(--auf-akzent); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .elementor .btn-tief { background-color: var(--blau); color: var(--auf-akzent); } } @media (hover: hover) and (pointer: fine) { .elementor .textlink:hover::after { transform: translateX(4px); } } /* ---------- Startseite: Hero ---------- */ /* WARUM NICHT NATIV: Schleier als Pseudo-Element zwischen Bildstapel und Inhalt; Kamerafahrt und Einlauf sind @keyframes; ist-aktiv/ist-raus/ist-pausiert setzt hero.js zur Laufzeit; :nth-child für Verzögerung und Gegenfahrt. Höhe, Raster, Farbe, Innenabstände und die Überblendung (opacity 1600ms) stehen nativ in hero, hero-inhalt, hero-buehne, hero-bild. */ .elementor .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(7 21 34 / 0.6) 0%, rgb(7 21 34 / 0.08) 26%, rgb(7 21 34 / 0.2) 50%, rgb(7 21 34 / 0.92) 100%), linear-gradient(90deg, rgb(7 21 34 / 0.5), rgb(7 21 34 / 0) 60%); } @media (max-width: 700px) { .elementor .hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--schleier) 60%, transparent) 0%, color-mix(in srgb, var(--schleier) 15%, transparent) 20%, color-mix(in srgb, var(--schleier) 62%, transparent) 45%, color-mix(in srgb, var(--schleier) 94%, transparent) 100%); } } .elementor .hero-bild.ist-aktiv, .elementor .hero-bild.ist-raus { animation: kamerafahrt 9s linear both; } .elementor .hero-bild:nth-child(even).ist-aktiv, .elementor .hero-bild:nth-child(even).ist-raus { animation-name: kamerafahrt-b; } @keyframes kamerafahrt { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } } @keyframes kamerafahrt-b { from { transform: scale(1.12) translate3d(1.5%, 0, 0); } to { transform: scale(1.02) translate3d(0, 0.5%, 0); } } .elementor .ist-pausiert .hero-bild, .elementor .hero.ist-pausiert .hero-bild { animation-play-state: paused; } .elementor .hero-inhalt > * { animation: hero-rein 900ms var(--ease-out) both; } .elementor .hero-inhalt > :nth-child(2) { animation-delay: 80ms; } .elementor .hero-inhalt > :nth-child(3) { animation-delay: 180ms; } .elementor .hero-inhalt > :nth-child(4) { animation-delay: 280ms; } @keyframes hero-rein { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } } /* WARUM NICHT NATIV: Pausenknopf und Wächter brauchen aria-label und aria-pressed und tragen Zustände aus hero.js. Seit der Startseite als Dokument (Nachbesserung „umschalten“ 30.09.2026, live-r1-5) steht der Knopf IM DOKUMENT – Div-Block mit Tag button, globale Klasse hero-pause (Lage, Größe, Farbe, Übergang nativ in der Klasse) und den Attributen type/aria-label/aria-pressed –, damit er auch ohne JavaScript da ist wie in der HTML-Fassung; hero.js findet ihn und erzeugt ihn nur noch dort, wo er fehlt (PHP-Ansicht, andere Dokumente). Diese Regel gestaltet den erzeugten Knopf (kein Stil-Panel); der Wächter kommt weiter aus dem Skript. */ .hero-pause { position: absolute; right: var(--rand); bottom: clamp(1.25rem, 4vh, 2.5rem); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: rgb(255 255 255 / 0.92); color: var(--lapis); font-size: 1.1rem; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms ease; } .hero-pause:active { transform: scale(0.94); } .hero-pause .ic-play { display: none; } .hero-pause[aria-pressed='true'] .ic-play { display: block; } .hero-pause[aria-pressed='true'] .ic-pause { display: none; } /* Knopf im Dokument: Elementor-Schaltflächen und -Container nehmen keine SVG-Kinder auf (Mediathek ohne SVG) – Symbol als Maske im ::after (::before belegt frontend.min.css an .e-con), Wechsel Pause/Play am Zustand aria-pressed, den hero.js setzt. Nur am nativen Element (e-div-block-base); der vom Skript erzeugte Knopf bringt seine zwei SVG mit. */ .elementor .hero-pause.e-div-block-base::after { content: ''; --symbol: url(../icons/fill/pause.svg); width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat; } .elementor .hero-pause.e-div-block-base[aria-pressed='true']::after { --symbol: url(../icons/fill/play.svg); } .hero-waechter { position: absolute; top: 0; left: 0; width: 1px; height: 60%; pointer-events: none; } /* 640 px wie Hero.astro, nicht der Umbruchpunkt des Kits (700 px – den einzigen, den die Klasse hero-pause kennt). Gemessen am 20.09.2026 mit Theme 3.0: Mit 700 px saß er bei 700 px Breite 732 px zu hoch. Rangfolge (0,3,0), damit die Regel am Knopf im Dokument die Klasse (0,2,0) überstimmt; ohne .elementor für den erzeugten Knopf. */ @media (max-width: 640px) { .hero-pause, .elementor .hero-pause.hero-pause { width: 2.75rem; height: 2.75rem; bottom: auto; top: 0.75rem; } } /* WARUM NICHT NATIV: Die HTML-Fassung senkt die Mindesthöhe erst ab 640 px, Elementor kennt nur den mobilen Umbruchpunkt des Kits (700 px). Der mobile Wert steht nativ in der Klasse hero; diese Regel stellt nur im Band 641–700 px den Desktop-Wert wieder her (ohne sie ist der Hero dort 72 px niedriger – gemessen bei 700 px). */ @media (min-width: 641px) and (max-width: 700px) { .elementor .hero.hero { min-height: min(calc(100dvh - var(--header-h)), 54rem); } } /* ---------- Startseite: Willkommen ---------- */ /* WARUM NICHT NATIV: Farbschema-Selektor auf :root (siehe Schaltflächen). */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .elementor .willkommen-logo { padding: 1rem; } } :root[data-theme='dark'] .elementor .willkommen-logo { padding: 1rem; } /* ---------- Startseite: Kacheln ---------- */ /* WARUM NICHT NATIV: Schleier als Pseudo-Element; Eltern-Hover wirkt auf Kinder (Bild, Pfeil); Bewegungskurve var(--ease-out). Der gelbe Pfeil beim Überfahren (--sonne) gehört zu den Kacheln der Startseite (Angebote in startseite.css). Die Projekt-Kacheln auf /projekte/ tragen dieselben Klassen (kachel, kachel-pfeil), stehen aber als Schleifen-Elemente in Pros Schleifenraster (Hülle div.e-loop-item) und behalten dort ihre Pfeilfarbe – projekte/index.astro bewegt den Pfeil nur (3/−3 px) und zoomt das Bild (1,05). Theme-Nachtrag 5 (28.09.2026): Farbwechsel nur außerhalb eines Schleifen-Elements; :where() hält die Rangfolge der Regel bei (0,4,0). Der Block „/projekte/: Projekt-Kacheln im Schleifenraster“ unten ergänzt Schleier und Staffel. */ .elementor .kachel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--schleier) 86%, transparent)); } .elementor .kachel-logo::after { display: none; } .elementor .kachel > img { transition: transform var(--dauer-bildzoom) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .elementor .kachel:hover > img { transform: scale(1.05); } .elementor .kachel:hover .kachel-pfeil { transform: translate(3px, -3px); } .elementor .kachel:hover .kachel-pfeil:where(:not(.e-loop-item *)) { background: var(--sonne); color: var(--auf-sonne); } } /* ---------- Startseite: Medien (Schleier mit Vorschaubild, Zustände aus site.js) ---------- */ /* WARUM NICHT NATIV: Elementor zerlegt mehrlagige Hintergründe und wirft die Lage var(--vorschau) weg (im Pilot belegt); deshalb Pseudo-Element. ist-geladen/ist-da setzt site.js, das iframe erzeugt das Skript – beides gibt es im Editor nicht. */ .elementor .medien::before { content: ''; position: absolute; inset: 0; width: auto; height: auto; opacity: 1; border: 0; mix-blend-mode: normal; background: linear-gradient(color-mix(in srgb, var(--lapis) 72%, transparent), color-mix(in srgb, var(--lapis) 90%, transparent)), var(--vorschau, none) center / cover; } .elementor .medien.ist-geladen::before { display: none; } .elementor .medien iframe { position: relative; width: 100%; height: 100%; min-height: inherit; border: 0; display: block; opacity: 0; transition: opacity 300ms ease; } .elementor .medien iframe.ist-da { opacity: 1; } /* ---------- Startseite: Aktuelles, Shop, Wege ---------- */ /* WARUM NICHT NATIV: Eltern-Hover auf Kind bzw. Pseudo-Element; Schleier als Pseudo-Element. */ @media (hover: hover) and (pointer: fine) { .elementor .aktuell-eintrag:hover::after { transform: translateX(5px); } .elementor .aktuell-top:hover .aktuell-top-titel, .elementor .aktuell-eintrag:hover .aktuell-eintrag-titel { color: var(--akzent-text); } .elementor .shop-karte:hover .shop-bild { transform: translateY(-4px); } } .elementor .weg-jugend::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--schleier) 5%, transparent) 25%, color-mix(in srgb, var(--schleier) 90%, transparent)); } @media (max-width: 920px) { .elementor .weg-jugend::after { background: linear-gradient(180deg, color-mix(in srgb, var(--schleier) 45%, transparent) 0%, color-mix(in srgb, var(--schleier) 78%, transparent) 35%, color-mix(in srgb, var(--schleier) 92%, transparent) 100%); } } /* ---------- Einblenden beim Scrollen: Klasse statt data-zeig ---------- */ /* WARUM NICHT NATIV: Zustände aus site.js (zeig-bereit am , ist-da am Element) und prefers-reduced-motion. Im Editor läuft das Skript nicht, dort ist alles sichtbar. */ .zeig-bereit .elementor .zeig:not(.ist-da) { opacity: 0; transform: translateY(18px); } .zeig-bereit .elementor .zeig.ist-da { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); } /* Galerie-Knöpfe (Schlussabnahme Runde 1, schluss-seiten-2-r1-6): In dist sitzt der Einblende-Haken am li (Gallery.astro), der Knopf darin behält seinen eigenen Übergang „transform 160ms“ für das Drück-Feedback scale(0.98) bei :active. Hier steckt der Knopf in einer Listen-Hülle mit display: contents (role="listitem", Schlussabnahme schluss-seiten-1-r1-5/-2-r1-1) – ohne Kasten lässt sie sich nicht einblenden, der Haken zeig sitzt am Knopf selbst, und die Regel oben überschrieb dessen Übergang: Das Drücken lief 600 ms und je nach Staffel 0–240 ms verzögert. Am Galerie-Knopf führt die Einblendung den Versatz deshalb über die Eigenschaft translate (dasselbe Bild: 18 px tiefer, dann an seinen Platz), transform bleibt für :active frei und läuft wie in dist 160 ms ohne Verzögerung. Endwerte, Staffel und Hover-Zoom unverändert; bei reduzierter Bewegung gilt weiter der Block darunter. (0,5,0) über der allgemeinen Regel (0,4,0). WARUM NICHT NATIV: Zustände aus site.js (zeig-bereit, ist-da) und Bewegungsvorliebe. */ @media (prefers-reduced-motion: no-preference) { .zeig-bereit .elementor .galerie-feld.zeig:not(.ist-da) { transform: none; translate: 0 18px; } .zeig-bereit .elementor .galerie-feld.zeig.ist-da { transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out), transform 160ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s; } } @media (prefers-reduced-motion: reduce) { .zeig-bereit .elementor .zeig { opacity: 1; transform: none; transition: none; } .elementor .hero-bild.ist-aktiv, .elementor .hero-bild.ist-raus, .elementor .hero-inhalt > * { animation: none; } .elementor .hero-bild, .elementor .kachel > img, .elementor .kachel-pfeil, .elementor .aktuell-eintrag::after, .elementor .shop-bild, .elementor .partner-logo, .elementor .galerie-bild, .elementor .galerie-feld, .elementor .textlink.mit-pfeil::after { transition: none; } } /* WARUM NICHT NATIV: Elementors custom-frontend.min.css setzt bei prefers-reduced-motion JEDEN Übergang der Seite auf 0 s („html * { transition-duration: 0s !important }“ – seitenweit, auch in PHP-Ansichten). Die HTML-Fassung nimmt dort nur Bewegung zurück (Block oben: Einblenden, Kamerafahrt, Bildzoom, Pfeile, Karten) und behält die kurzen Farb-/Versatzübergänge der Schaltflächen (global.css .btn: 160/180 ms), des Pausenknopfs (Hero.astro: 160 ms) und des Einbettungs-iframes (Medien.astro: opacity 300 ms). Diese Regel stellt genau diese Dauern wieder her – dieselben Werte wie in den Klassen btn/hero-pause und in der Regel .medien iframe oben; !important und Rangfolge (0,1,1) überstimmen Elementors (0,0,1). Nachbesserung 30.09.2026 (live-r1-3). */ @media (prefers-reduced-motion: reduce) { a.btn, button.btn { transition-duration: 160ms, 180ms, 180ms, 180ms, 180ms !important; transition-delay: 0s, 0s, 0s, 0s, 0s !important; } button.hero-pause { transition-duration: 160ms, 160ms !important; transition-delay: 0s, 0s !important; } .medien iframe { transition-duration: 300ms !important; transition-delay: 0s !important; } } /* ---------- Bewegungskurven ---------- */ /* WARUM NICHT NATIV: Elementor speichert bei transition nur Eigenschaft und Dauer, die Kurve geht verloren. */ .elementor a.btn, .elementor button.btn { transition-timing-function: var(--ease-out), ease, ease, ease, ease; } .elementor :is(a, button).galerie-feld, .elementor a.partner-logo, .elementor .shop-karte .shop-bild { transition-timing-function: var(--ease-out); } /* Kachel-Pfeil: transform 300 ms ease-out, background-color 200 ms ease (index.astro, projekte/index.astro – bis 30.09.2026 stand hier nur eine Kurve, die auch die Farbe bekam, live-r1-2); Pausenknopf im Dokument ebenso (Hero.astro); Hero-Bild: opacity 1600 ms ease-in-out (Hero.astro – die Klasse hero-bild trägt nur „opacity 1600ms“, ohne diese Regel läuft die Überblendung mit ease). */ .elementor .kachel .kachel-pfeil, .elementor button.hero-pause { transition-timing-function: var(--ease-out), ease; } .elementor img.hero-bild { transition-timing-function: ease-in-out; } /* ---------- Hover nur für Zeigergeräte ---------- */ /* WARUM NICHT NATIV: Elementor schreibt &:hover ohne Medienabfrage und zusätzlich für :focus-visible; die HTML-Fassung beschränkt Hover auf (hover: hover) and (pointer: fine). Diese Regeln nehmen den Hover auf Touch-Geräten zurück. */ @media not ((hover: hover) and (pointer: fine)) { .elementor a.btn:hover, .elementor button.btn:hover { background-color: var(--blau); } .elementor a.btn.btn-tief:hover { background-color: var(--lapis); } .elementor a.btn.btn-sonne:hover { background-color: var(--sonne); } .elementor a.btn.btn-hell:hover, .elementor button.btn.btn-hell:hover { background-color: rgb(255 255 255 / 0.92); } .elementor a.btn.btn-linie:hover, .elementor button.btn.btn-linie:hover { background-color: transparent; border-color: var(--linie-stark); } .elementor a.btn.btn-linie.medien-extern:hover { border-color: rgb(255 255 255 / 0.5); } .elementor a.partner-logo:hover { transform: none; } .elementor a.bereich-link:not(.bereich-link-aktiv):hover { color: var(--text); } } /* ---------- Schaltflächen: Tastaturfokus ohne Überfahren zeigt nur den Ring (29.09.2026, Klassen Teil B, Prüfung teil-b-r1-2) ---------- */ /* WARUM NICHT NATIV: Elementor schreibt den Zustand „Überfahren“ einer globalen Klasse zugleich für :focus-visible – erzeugtes CSS „.elementor .btn:hover, .elementor .btn:focus-visible { background-color: var(--blau-hover) }“, ebenso btn-tief (var(--lapis-2)), btn-sonne (var(--sonne-hover)), btn-hell (#fff), btn-linie (Fläche var(--flaeche-2), Rand var(--text)). Das Stil-Panel kennt die Zustände normal, hover, focus und active (Elementor 4.3.2), aber keinen Zustand „Tastaturfokus ohne Überfahren“: ein Zustand „focus“ erzeugt „.elementor .btn:focus { … }“ (0,3,0) in derselben Datei und gälte auch nach dem Mausklick (Fokus + Überfahren) – je nach Reihenfolge der Zustände verlöre entweder das Überfahren nach dem Klick oder der Tastaturfokus zeigte weiter die Überfahren-Farbe. Die HTML-Fassung färbt nur beim Überfahren und nur auf Zeigergeräten („@media (hover: hover) and (pointer: fine) { .btn:hover … }“, global.css); der Tastaturfokus zeigt allein den Ring (:focus-visible aus global.css). Gemessen (Prüfung Klassen Teil B, Runde 1): Fokus auf „Gruppe finden oder gründen“ (btn-tief) rgb(18, 58, 99) statt rgb(11, 39, 68), „E-Mail schreiben“ (btn) rgb(86, 180, 230) statt rgb(60, 164, 220), „Spenden über PayPal“ (btn-sonne) rgb(255, 232, 79) statt rgb(255, 222, 29), „Alle Antworten öffnen“ (btn-linie) Fläche rgb(230, 240, 247) und Rand rgb(10, 26, 43) statt durchsichtig und rgb(169, 188, 203). Hier deshalb für den Fokus OHNE Überfahren die Grundwerte derselben Klassen – dieselben Werte wie im Block „Hover nur für Zeigergeräte“ direkt darüber und wie die Einstellung „Hintergrundfarbe“ der Klasse im Editor (btn var(--blau); btn-tief var(--lapis), im dunklen Schema var(--blau) wie oben im Block „Schaltflächen: Farbschema“; btn-sonne var(--sonne); btn-hell rgb(255 255 255 / 0.92); btn-linie durchsichtig mit Rand var(--linie-stark), Spielart medien-extern Rand weiß 50 %). Überfahren (auch mit Fokus) und Ruhe bleiben unberührt (:not(:hover)). GRENZE (Prüfung Klassen Teil B, Runde 2, teil-b-r2-3; dieselbe Grenze trägt der Block „Hover nur für Zeigergeräte“ seit dem Pilot): Die Grundfarben stehen hier fest – als Design-Variablen, Änderungen an --blau, --lapis, --sonne im Design-System wirken mit. Stellt der Kunde die Hintergrundfarbe einer dieser Klassen im Editor auf einen anderen Wert oder legt er an der Klasse oder am Element einen Zustand „focus“ an, gilt beim TASTATURFOKUS weiter der Wert von hier: Rangfolge Grundregel (0,4,1), Spielarten (0,5,1), medien-extern (0,6,1), Schema-Regeln für btn-tief (0,7,1) – alle über dem Elementor-Zustand der Klasse (0,3,0) und über einem lokalen Zustands-Stil (0,3,0). Tiefer geht es nicht: Elementors Regelpaar „:hover, :focus-visible“ hat selbst (0,3,0), und diese Datei lädt danach; eine Regel, die nur dieses Paar, nicht aber einen Zustand „focus“ überstimmt, gibt es nicht. Ändert jemand die Grundfarbe einer Klasse im Editor, hier mitziehen. Ob der Block bleibt (Tastaturfokus wie die HTML-Fassung) oder entfällt (Tastaturfokus zeigt wie in Elementor die Überfahren-Farbe, Zustände aus dem Editor gelten), entscheidet der Auftraggeber (docs/ELEMENTOR-KLASSEN.md 9.11). Der Shop trägt dieselben Regeln für a.btn-tief/a.btn-linie in shop.css (Block „Fragen zum Shop?“ …); auf Shop-Seiten gelten beide mit gleichen Werten. */ .elementor :is(a, button).btn:focus-visible:not(:hover) { background-color: var(--blau); } .elementor :is(a, button).btn.btn-tief:focus-visible:not(:hover) { background-color: var(--lapis); } :root[data-theme='dark'] .elementor :is(a, button).btn.btn-tief:focus-visible:not(:hover) { background-color: var(--blau); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .elementor :is(a, button).btn.btn-tief:focus-visible:not(:hover) { background-color: var(--blau); } } .elementor :is(a, button).btn.btn-sonne:focus-visible:not(:hover) { background-color: var(--sonne); } .elementor :is(a, button).btn.btn-hell:focus-visible:not(:hover) { background-color: rgb(255 255 255 / 0.92); } .elementor :is(a, button).btn.btn-linie:focus-visible:not(:hover) { background-color: transparent; border-color: var(--linie-stark); } .elementor :is(a, button).btn.btn-linie.medien-extern:focus-visible:not(:hover) { border-color: rgb(255 255 255 / 0.5); } /* Bereichsnavigation der Randspalte („Unsere Projekte“, „Über uns“, „Rechtliches“ …; Klasse bereich-link): dieselbe Ursache – Elementor schreibt den Hover der Klasse zugleich für :focus-visible („.elementor .bereich-link:hover, .elementor .bereich-link:focus-visible { color: var(--akzent-text) }“, global-114-frontend-desktop.css). Die HTML-Fassung färbt nur beim Überfahren auf Zeigergeräten (Inhaltsseite.astro: „.bereich a { color: var(--text) }“, „@media (hover: hover) and (pointer: fine) { .bereich a:hover { color: var(--akzent-text) } }“); im Tastaturfokus bleibt die Textfarbe, nur der Ring erscheint (gemessen: hell rgb(10, 26, 43) statt rgb(15, 106, 156), dunkel rgb(233, 241, 248) statt rgb(108, 192, 238) an 7 Links je Projektseite). Der aktive Link (bereich-link-aktiv, --akzent-text) bleibt außen vor; die Grundfarbe steht wie oben fest (var(--text) = Farbe der Klasse). (0,5,1) über Elementors Paar (0,3,0). Theme-Nachtrag 7, Punkt 13 (Abnahme design3-r1-1/-r2-1/-r3-1). GRENZE (Prüfung teil-a-r1-6, dieselbe wie oben bei den Schaltflächen, teil-b-r2-3): Die Regel überstimmt beim TASTATURFOKUS auch eine im Editor geänderte Grundfarbe der Klasse bereich-link oder eines lokalen Stils (0,2,0) und einen Zustand „focus“ (0,3,0). Tiefer geht es nicht: Um Elementors Paar „:hover, :focus-visible“ (0,3,0, früher geladen) zu schlagen, braucht sie mindestens (0,3,0) – und liegt damit zwangsläufig über jeder Grundfarbe (0,2,0); auf die Grundfarbe aus dem Editor kann CSS nicht verweisen (kein Wert „wie im Zustand normal“; inherit wäre die Farbe des Elternteils nav.bereich, revert/revert-layer die Linkfarbe des Browsers, weil Elementor ohne Kaskadenebene schreibt). Der native Weg – Zustand „focus“ an der Klasse (Farbe var(--text)) statt dieser Regel – wiche an drei Stellen von der HTML-Fassung ab: Fokus und Überfahren zugleich (Tab, dann Maus darauf) zeigte die Grundfarbe statt --akzent-text, ebenso der Mausklick bis zum Seitenwechsel (:focus), und der aktive Link (bereich-link-aktiv, --akzent-text) bekäme im Fokus var(--text). Ändert jemand die Grundfarbe der Klasse im Editor, hier mitziehen. Ob die Regel bleibt (Tastaturfokus wie die HTML-Fassung) oder entfällt (Tastaturfokus zeigt wie in Elementor die Überfahren-Farbe), entscheidet der Auftraggeber zusammen mit dem Block oben (docs/ELEMENTOR-KLASSEN.md 9.11, 9.13). */ .elementor a.bereich-link:not(.bereich-link-aktiv):focus-visible:not(:hover) { color: var(--text); } /* Kontaktzeilen, Links der Kontaktbox, Verzeichnis-Links, Partnerlogos und Partnerkarten (Schlussabnahme 03.10.2026, schluss-seiten-1-r1-9): dieselbe Ursache – erzeugtes CSS „.elementor .kontakt-zeile:hover, .elementor .kontakt-zeile:focus-visible { color: var(--akzent-text) }“, ebenso box-link (/faq/: info@ und Telefon) und inhalt-link (/agb/), bei partner-logo (Startseite) und partner-karte (/partner-foerderer/) „transform: translate3d(0px, -3px, 0px)“. Die HTML-Fassung färbt bzw. hebt nur beim Überfahren auf Zeigergeräten; im Tastaturfokus bleiben Farbe und Lage, nur der Ring erscheint (gemessen: info@ hell rgb(10, 26, 43) statt rgb(15, 106, 156), dunkel rgb(233, 241, 248) statt rgb(108, 192, 238); Partnerlogo/-karte transform none statt matrix(1, 0, 0, 1, 0, -3)). Grundwerte wie die Klassen im Editor: Farbe var(--text), keine Verschiebung. (0,4,1) über Elementors Paar (0,3,0). GRENZE wie bei bereich-link oben: Ändert jemand die Grundfarbe dieser Klassen im Editor, gilt beim Tastaturfokus weiter var(--text) – hier mitziehen; ob die Regeln bleiben, entscheidet der Auftraggeber zusammen mit den beiden Blöcken oben. */ .elementor a:is(.kontakt-zeile, .box-link, .inhalt-link):focus-visible:not(:hover) { color: var(--text); } .elementor a:is(.partner-logo, .partner-karte):focus-visible:not(:hover) { transform: none; } /* ---------- Reparaturen an Elementors "all: unset" ---------- */ /* WARUM NICHT NATIV: base-desktop.css setzt .e-paragraph-link-base, .e-heading-link-base und .e-image-link-base auf "all: unset" (0,2,0). Damit verlieren alle Links in Absätzen, Überschriften und an Bildern den Fokusring aus global.css (:focus-visible, 0,1,0) sowie text-underline-offset. Die Links liegen im Widget und haben kein eigenes Stil-Panel; :focus-visible kennt Elementor nicht. */ .elementor :is(.e-paragraph-link-base, .e-heading-link-base, .e-image-link-base):focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; } .elementor a.e-paragraph-link-base, .elementor a.e-heading-link-base { text-underline-offset: 0.18em; } /* WARUM NICHT NATIV: Seit Elementor 4.3.2 (stabil) kommt dazu eine Inline-Regel (style#elementor-frontend-inline-css): ".e-heading-base a, .e-paragraph-base a { all: unset; cursor: pointer }" (0,1,1). Sie löscht an JEDEM Link in einem Absatz- oder Überschriften-Widget den Fokusring aus global.css (":focus-visible", 0,1,0) und die Unterstreichungswerte aus "a { … }" (0,0,1) – gemessen am 25.09.2026 an /impressum/, /mitmachen/, /ueber-uns/verbandsgeschichte/, /datenschutz/ (outline none per Tab-Taste). Hier deshalb mit (0,3,1) bzw. (0,2,1); --fokus wird auf tiefen Flächen von global.css auf --fokus-auf-tief umgestellt (hell/dunkel). */ .elementor :is(.e-heading-base, .e-paragraph-base) a:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; } .elementor :is(.e-heading-base, .e-paragraph-base) a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; } /* WARUM NICHT NATIV: :focus-visible kennt Elementor nicht. global.css rundet den Fokusring (":focus-visible { border-radius: 4px }", 0,1,0). Die Klassen textlink und bereich-link setzen border-radius: 0 (0,2,0), um die 2 px aus dem Grundstil der Schaltfläche zu löschen, klickbare Container (Tag a) bringen 0 aus dem Grundstil mit – beides löscht auch die Rundung des Rings (gemessen am 20.09.2026: 0 statt 4 px an Textlinks, Bereichsnavigation, Aufmacher, Aktuelles-Zeilen und Shop-Karten). Kacheln behalten ihren Kartenradius. */ .elementor :is(a, button).textlink:focus-visible, .elementor a.bereich-link:focus-visible, .elementor a.aktuell-top:focus-visible, .elementor a.aktuell-eintrag:focus-visible, .elementor a.shop-karte:focus-visible { border-radius: 4px; } /* ---------- Dunkles Schema: Hover auf btn-tief ---------- */ /* WARUM NICHT NATIV: Farbschema-Selektor (siehe oben). Die Regel für .btn-tief oben (0,4,0) überstimmt den Hover aus Elementor (0,3,0); die HTML-Fassung zeigt auch im dunklen Schema var(--lapis-2) beim Überfahren. Auf Touch-Geräten bleibt es bei var(--blau). */ @media (hover: hover) and (pointer: fine) { :root[data-theme='dark'] .elementor a.btn.btn-tief:hover { background-color: var(--lapis-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .elementor a.btn.btn-tief:hover { background-color: var(--lapis-2); } } } @media not ((hover: hover) and (pointer: fine)) { :root[data-theme='dark'] .elementor a.btn.btn-tief:hover { background-color: var(--blau); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .elementor a.btn.btn-tief:hover { background-color: var(--blau); } } } /* ---------- Lichtkasten der Galerie ---------- */ /* WARUM NICHT NATIV: Den baut galerie.js zur Laufzeit und hängt ihn an ; er ist kein Elementor-Element. Werte wie .galerie .lichtkasten in komponenten.css (Gallery.astro), nur ohne die Wurzelklasse .galerie. */ dialog.lichtkasten { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(0.75rem, 3vw, 2.5rem); border: 0; background: rgb(4 16 27 / 0.94); color: #fff; } dialog.lichtkasten { opacity: 0; transition: opacity 150ms var(--ease-out), overlay 150ms allow-discrete, display 150ms allow-discrete; } dialog.lichtkasten[open] { opacity: 1; transition-duration: 220ms; } @starting-style { dialog.lichtkasten[open] { opacity: 0; } } dialog.lichtkasten[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; } dialog.lichtkasten figure { margin: 0; height: 100%; min-height: 0; display: grid; grid-template-rows: 1fr auto; gap: 0.75rem; justify-items: center; } dialog.lichtkasten .lk-bild { max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; border-radius: var(--r-karte); } dialog.lichtkasten .lk-bild[hidden] { display: none; } dialog.lichtkasten figcaption { font-size: var(--fs-s); color: rgb(255 255 255 / 0.85); text-align: center; max-width: 60rem; } dialog.lichtkasten .lk-zu, dialog.lichtkasten .lk-nav { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.08); color: #fff; font-size: 1.35rem; cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--ease-out); } dialog.lichtkasten .lk-zu:active, dialog.lichtkasten .lk-nav:active { transform: scale(0.94); } dialog.lichtkasten .lk-zu { position: absolute; top: 1rem; right: 1rem; z-index: 1; } @media (max-width: 700px) { dialog.lichtkasten[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; } dialog.lichtkasten figure { grid-column: 1 / -1; } dialog.lichtkasten .lk-vor { justify-self: end; } } @media (prefers-reduced-motion: reduce) { dialog.lichtkasten { transition: none; } } /* Das Galeriefeld ist in Elementor ein Container mit Tag button: Zeiger wie im Original. */ .elementor button.galerie-feld { cursor: zoom-in; } /* ---------- Module: Theme-Markup in einem Elementor-Container ---------- */ /* WARUM NICHT NATIV: Katalog, Suche, Aktuelles, Formulare und Brotkrumen füllt das Theme beim Ausliefern in Container mit einer Klasse ajm-modul-… (inc/32-module.php). Ihr Markup benutzt dieselben Klassennamen wie global.css (.btn, .textlink, .hinweis …). Elementor schreibt für gleichnamige globale Klassen ".elementor .btn { background-color: … }" (0,2,0) und überstimmt damit die Spielarten aus global.css (.btn-tief, .btn-linie, .btn-klein: 0,1,0), sobald die Seite nur die Grundklasse benutzt. Diese Regeln stellen im Modul die Werte aus global.css wieder her. */ .elementor [class*='ajm-modul-'] .btn { color: var(--btn-fg); background: var(--btn-bg); border-color: transparent; transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } .elementor [class*='ajm-modul-'] .btn-linie { border-color: var(--linie-stark); } .elementor [class*='ajm-modul-'] .btn-klein { min-height: 2.75rem; padding: 0.45rem 1rem; font-size: var(--fs-xs); } .elementor [class*='ajm-modul-'] .btn[hidden] { display: none; } .elementor [class*='ajm-modul-'] .btn:active { transform: scale(0.97); } /* Elementors gleichnamige Klasse setzt außerdem text-align (inherit; ab „Klassen, Teil B“ nativ start) und cursor: pointer (0,2,0). Ein