/* ========================================================================== Sozialwerk Berlin e.V. — Design-Prototyp -------------------------------------------------------------------------- Alle Groessen in rem. Das ist die Voraussetzung dafuer, dass die Schriftgroessen-Umschaltung im Header nicht nur den Text, sondern auch Abstaende und Boxen mitskaliert. Feste px-Werte nur dort, wo sie bewusst nicht mitwachsen sollen (Rahmenstaerken, Logo-Signet). ========================================================================== */ /* --- 1. Design-Tokens ----------------------------------------------------- */ :root { /* Vereinsfarben — unveraendert aus der Vorlage des Vereins */ --c-gruen-800: #20423b; /* Dunkelgruen: Text, dunkle Flaechen */ --c-mittelgruen: #d0ddb1; /* Flaechen, Marker, aktive Zustaende */ --c-hellgruen: #eaeee4; /* grosse Flaechen, Sidebar, Karten */ --c-gelb: #fbf28f; /* Fussleiste, Hervorhebung */ /* Abgeleitete Arbeitsfarben — siehe docs/farbanalyse.md Keine neuen Farbtoene, nur Helligkeitsstufen des Vereinsgruens. */ --c-gruen-900: #16302a; /* Hover auf dunklen Flaechen — dunkler, nicht heller */ --c-gruen-600: #2c6156; /* Links — 7.12:1 auf Weiss */ --c-oliv-600: #6f7f45; /* kraeftige Kante, wo noetig — 4.38:1 auf Weiss */ --c-weiss: #fff; /* Warmes Cremeweiss als Seitenhintergrund statt Hellgruen: weisse Karten treten staerker hervor, der Gesamteindruck wird weniger gruenstichig. Text #20423b darauf: 10.02:1. */ --c-seite: #f6f4ec; --c-text: var(--c-gruen-800); --c-link: var(--c-gruen-600); /* Rahmen der Kacheln: Mittelgruen, wie vom Verein gewuenscht. Vertretbar, weil kein Bedienelement allein durch seinen Rahmen erkennbar ist — Symbol bzw. Text tragen den Kontrast (11:1). Sobald Formularfelder dazukommen, brauchen die --c-rahmen-stark, weil dort der Rahmen das einzige Erkennungsmerkmal ist. */ --c-rahmen: var(--c-mittelgruen); --c-rahmen-stark: var(--c-oliv-600); /* Abstandsskala */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --radius: 0.5rem; --radius-lg: 0.75rem; /* Rahmenstaerken bewusst in px: sie sollen beim Vergroessern der Schrift nicht mitwachsen, sonst wirken die Boxen plump. */ --bw: 2px; --ff: "Noto Sans", system-ui, sans-serif; /* Layout */ --breite-max: 90rem; --spalte-links: 15rem; --spalte-rechts: 17rem; } /* --- 2. Schriftgroessen-Stufen ------------------------------------------- Die Umschaltung setzt data-schriftgroesse auf . Weil das Wurzel-Element skaliert wird, waechst automatisch jeder rem-Wert mit. -------------------------------------------------------------------------- */ html { font-size: 100%; } /* 16px → Basistext 20px */ html[data-schriftgroesse="gross"] { font-size: 115%; } /* → Basistext 23px */ html[data-schriftgroesse="sehr-gross"]{ font-size: 130%; } /* → Basistext 26px */ /* --- 3. Grundlagen -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--ff); font-size: 1.25rem; /* 20px bei 100% — bewusst groesser als ueblich */ line-height: 1.6; color: var(--c-text); background: var(--c-seite); -webkit-text-size-adjust: 100%; /* Fussbereich bleibt auch auf kurzen Seiten unten */ min-height: 100vh; display: flex; flex-direction: column; } .huelle { flex: 1 0 auto; } .fuss { flex: none; } /* Telefonnummern und Adressen nie mittendrin umbrechen */ .nowrap, a[href^="tel:"] { white-space: nowrap; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--s-4); font-weight: 700; text-wrap: balance; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } p, ul, ol { margin: 0 0 var(--s-4); } p { max-width: 38em; } /* Zeilenlaenge begrenzen — Lesbarkeit */ a { color: var(--c-link); text-underline-offset: 0.15em; } a:hover { color: var(--c-gruen-800); } img { max-width: 100%; height: auto; display: block; } /* Fokus: doppelter Ring, damit er auf hellen UND auf dunkelgruenen Flaechen sichtbar bleibt. 3px statt 2px wegen der Zielgruppe. */ :focus-visible { outline: 3px solid var(--c-gruen-800); outline-offset: 2px; border-radius: var(--s-1); box-shadow: 0 0 0 6px var(--c-gelb); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--s-4); top: -100%; z-index: 100; background: var(--c-gruen-800); color: var(--c-weiss); padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--radius) var(--radius); font-weight: 700; text-decoration: none; } .skip-link:focus { top: 0; color: var(--c-weiss); } /* --- 4. Prototyp-Leiste --------------------------------------------------- Gehoert NICHT zum Design. Nur zum Vergleichen der offenen Varianten. Faellt in der WordPress-Umsetzung ersatzlos weg. -------------------------------------------------------------------------- */ .proto { background: #2b2b2b; color: #fff; font-size: 0.85rem; line-height: 1.4; padding: var(--s-2) var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; } .proto__titel { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; } .proto__gruppe { display: flex; align-items: center; gap: var(--s-2); } .proto__gruppe > span { opacity: 0.8; } .proto button { font: inherit; font-family: var(--ff); background: #4a4a4a; color: #fff; border: 1px solid #6d6d6d; border-radius: var(--radius); padding: var(--s-1) var(--s-3); cursor: pointer; } .proto button[aria-pressed="true"] { background: var(--c-gelb); color: #222; border-color: var(--c-gelb); font-weight: 700; } .proto a { color: var(--c-gelb); } /* --- 5. Kopfbereich ------------------------------------------------------- */ .kopf { background: var(--c-weiss); border-bottom: var(--bw) solid var(--c-mittelgruen); } /* Drei Zonen: Logo links, Navigation mittig, Schriftgroesse rechts. Die aeusseren Spalten sind gleich breit (1fr), dadurch sitzt die Navigation exakt in der Seitenmitte und nicht nur zwischen den Nachbarn — auch wenn Logo und Regler unterschiedlich breit sind. */ .kopf__innen { max-width: var(--breite-max); margin-inline: auto; padding: var(--s-3) var(--s-4); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); } /* Logo: Signet + Wortmarke als Text. Eine Wortmarken-Datei existiert nicht, deshalb wird der Schriftzug gesetzt statt als Bild eingebunden. */ .logo { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-gruen-800); justify-self: start; } .logo img { width: 3.25rem; height: 3.25rem; } .logo__text { font-size: 1.15rem; line-height: 1.15; letter-spacing: 0.01em; } .logo__text b { display: block; font-size: 1.25rem; } /* Hauptnavigation */ .hauptnav { justify-self: center; } .hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: stretch; /* alle Schaltflaechen gleich hoch */ } .hauptnav li { display: flex; } .hauptnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); min-width: 4rem; min-height: 4rem; /* Klickflaeche deutlich > 44px */ padding: var(--s-2); background: var(--c-hellgruen); border: var(--bw) solid var(--c-rahmen); /* 3.72:1 — erfuellt 1.4.11 */ border-radius: var(--radius-lg); color: var(--c-gruen-800); text-decoration: none; font-size: 0.8rem; line-height: 1.2; text-align: center; } .hauptnav a:hover { background: var(--c-mittelgruen); } .hauptnav a[aria-current="page"] { background: var(--c-mittelgruen); border-color: var(--c-gruen-800); font-weight: 700; } .hauptnav svg { width: 1.75rem; height: 1.75rem; fill: currentColor; flex: none; } /* Beschriftung umbrechen lassen, damit die Schaltflaechen aehnlich breit bleiben — sonst sprengt "Gemeinschaft, Teilhabe, Beratung" die Reihe. */ .hauptnav__label { max-width: 7rem; display: block; } /* Variante A (Icons ohne Beschriftung) blendet den Text visuell aus, der barrierefreie Name bleibt erhalten. */ body[data-nav="icons"] .hauptnav__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- 5b. Schriftgroessen-Umschaltung ------------------------------------- Rechts in der Kopfzeile. Optisch leichter als die Navigation: nur ein schmaler Umriss um die Gruppe statt gefuellter Kacheln je Knopf. Die Klickflaechen bleiben bei 44px — leise heisst nicht schwer zu treffen. -------------------------------------------------------------------------- */ .schriftgroesse { justify-self: end; display: flex; align-items: center; gap: var(--s-3); } .schriftgroesse__label { font-size: 0.85rem; color: var(--c-gruen-800); } .schriftgroesse__knoepfe { display: flex; gap: var(--s-1); padding: 3px; border: 1.5px solid var(--c-gruen-800); border-radius: 999px; } .schriftgroesse button { font-family: var(--ff); font-weight: 700; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: transparent; color: var(--c-gruen-800); border: 0; border-radius: 999px; cursor: pointer; line-height: 1; padding: 0; } .schriftgroesse button:nth-child(1) { font-size: 0.9rem; } .schriftgroesse button:nth-child(2) { font-size: 1.1rem; } .schriftgroesse button:nth-child(3) { font-size: 1.35rem; } .schriftgroesse button:hover { background: var(--c-mittelgruen); } .schriftgroesse button[aria-pressed="true"] { background: var(--c-gruen-800); color: var(--c-weiss); } /* --- 6. Seitengeruest ----------------------------------------------------- */ .huelle { max-width: var(--breite-max); margin-inline: auto; display: grid; gap: var(--s-5); padding: var(--s-5) var(--s-4); grid-template-columns: var(--spalte-links) minmax(0, 1fr) var(--spalte-rechts); align-items: start; } .spalte-links { display: flex; flex-direction: column; gap: var(--s-5); } .spalte-rechts { display: flex; flex-direction: column; gap: var(--s-5); } .spalte-links-extra { display: flex; flex-direction: column; gap: var(--s-5); } .inhalt { min-width: 0; } /* Startseite: benannte Bereiche statt Spalten-Container. Die Nebeninhalte der linken Spalte stehen im Markup hinter
(damit auf dem Handy der Inhalt zuerst kommt) und werden hier auf breiten Bildschirmen wieder nach links unten gesetzt. */ .huelle--start { grid-template-areas: "nav inhalt rechts" "links inhalt rechts"; /* max-content statt auto: sonst verteilen beide Zeilen den Freiraum, den die laengere Mittelspalte erzeugt, und zwischen Navigation und Nebeninhalten klafft eine Luecke. */ grid-template-rows: max-content 1fr; } .huelle--start > .bereichsnav { grid-area: nav; } .huelle--start > .inhalt { grid-area: inhalt; } .huelle--start > .spalte-links-extra { grid-area: links; } .huelle--start > .spalte-rechts { grid-area: rechts; } /* --- 7. Wiederkehrende Bausteine ------------------------------------------ */ .karte { background: var(--c-weiss); border: var(--bw) solid var(--c-rahmen); border-radius: var(--radius-lg); padding: var(--s-5); } .karte > :last-child { margin-bottom: 0; } .karte--gruen { background: var(--c-mittelgruen); } .karte--hell { background: var(--c-hellgruen); } .karte--dunkel { background: var(--c-gruen-800); color: var(--c-weiss); border-color: var(--c-gruen-800); } .karte--dunkel a { color: var(--c-gelb); } .abschnitt-titel { font-size: 1.35rem; margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: var(--bw) solid var(--c-rahmen); } .knopf { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 3rem; padding: var(--s-3) var(--s-5); background: var(--c-gruen-800); color: var(--c-weiss); border: var(--bw) solid var(--c-gruen-800); border-radius: var(--radius); font-weight: 700; text-decoration: none; } /* Beim Ueberfahren dunkler, nicht heller: der Kontrast zum weissen Text steigt dadurch (11.0:1 → 13.6:1) statt zu sinken. */ .knopf:hover { background: var(--c-gruen-900); border-color: var(--c-gruen-900); color: var(--c-weiss); } .knopf svg { width: 1.4rem; height: 1.4rem; fill: currentColor; flex: none; } /* --- 8. Bereichsnavigation (linke Spalte) --------------------------------- */ .bereichsnav { background: var(--c-weiss); border: var(--bw) solid var(--c-rahmen); border-radius: var(--radius-lg); overflow: hidden; } .bereichsnav__kopf { margin: 0; padding: var(--s-3) var(--s-4); background: var(--c-mittelgruen); font-size: 1.15rem; font-weight: 700; } .bereichsnav ul { list-style: none; margin: 0; padding: 0; } .bereichsnav li { border-top: 1px solid var(--c-mittelgruen); } .bereichsnav a { display: block; padding: var(--s-3) var(--s-4); min-height: 2.75rem; color: var(--c-gruen-800); text-decoration: none; } .bereichsnav a:hover { background: var(--c-hellgruen); text-decoration: underline; } /* Geoeffnete Kategorie: nur Flaeche und Fettung. */ .bereichsnav a[aria-current="true"] { background: var(--c-mittelgruen); font-weight: 700; } /* Aktuelle Seite: zusaetzlich ein Balken. Nie Farbe allein (1.4.1) — die Kombination aus Flaeche, Fettung und Balken bleibt auch ohne Farbwahrnehmung erkennbar. */ .bereichsnav a[aria-current="page"] { background: var(--c-mittelgruen); font-weight: 700; box-shadow: inset 0.35rem 0 0 var(--c-gruen-800); } .bereichsnav__unter { padding-left: var(--s-4); background: var(--c-seite); } .bereichsnav__unter a { font-size: 0.95rem; padding-block: var(--s-2); } /* Auf schmalen Bildschirmen wird die Navigation zu einem aufklappbaren Element — dadurch steht der Inhalt sofort sichtbar oben, ohne dass DOM-Reihenfolge und Tab-Reihenfolge auseinanderlaufen. */ .bereichsnav__schalter { display: none; } /* --- 9. Startseite -------------------------------------------------------- */ /* Hero: dunkelgruenes Band hinter dem Claim. Weisser Text auf #20423b = 11.03:1. Der Claim liegt bewusst NICHT frei auf dem Foto — dort waren es stellenweise nur 1.0:1. */ .hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: var(--bw) solid var(--c-rahmen); } .hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; } .hero__band { background: var(--c-gruen-800); color: var(--c-weiss); padding: var(--s-4) var(--s-5); } .hero__band p { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.25; max-width: 24em; } /* Drei Teaser-Kacheln */ .teaser-reihe { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: var(--s-5); } .teaser { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--c-weiss); border: var(--bw) solid var(--c-rahmen); border-radius: var(--radius-lg); text-decoration: none; color: var(--c-gruen-800); } .teaser:hover { background: var(--c-hellgruen); } .teaser svg { width: 2.5rem; height: 2.5rem; fill: currentColor; } .teaser__titel { font-weight: 700; font-size: 1.15rem; background: var(--c-mittelgruen); padding: var(--s-2) var(--s-3); border-radius: var(--radius); } .teaser p { margin: 0; font-size: 0.95rem; } .willkommen { margin-top: var(--s-6); padding: var(--s-5); background: var(--c-weiss); border: var(--bw) solid var(--c-rahmen); border-radius: var(--radius-lg); } .willkommen h2 { font-size: 1.5rem; } .willkommen > :last-child { margin-bottom: 0; } /* Termine-Tabelle */ .termine { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .termine caption { text-align: left; font-weight: 700; padding-bottom: var(--s-2); } .termine th, .termine td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--c-mittelgruen); vertical-align: top; } .termine th { white-space: nowrap; } .termine tbody tr:nth-child(odd) { background: var(--c-hellgruen); } .termine tbody tr:last-child th, .termine tbody tr:last-child td { border-bottom: 0; } /* Aktuelles-Teaser */ .beitrag { padding-block: var(--s-3); border-top: 1px solid var(--c-mittelgruen); } .beitrag:first-of-type { border-top: 0; padding-top: 0; } .beitrag h3 { font-size: 1.05rem; margin-bottom: var(--s-1); } .beitrag h3 a { text-decoration: none; } .beitrag h3 a:hover { text-decoration: underline; } .beitrag time { font-size: 0.85rem; color: var(--c-gruen-600); } /* --- 10. Detailseiten ----------------------------------------------------- */ .seitenbild { border-radius: var(--radius-lg); overflow: hidden; border: var(--bw) solid var(--c-rahmen); margin-bottom: var(--s-5); } .seitenbild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .info-block + .info-block { margin-top: var(--s-5); } .info-block h2 { font-size: 1.2rem; margin-bottom: var(--s-2); } .info-block p { margin-bottom: var(--s-2); } .info-block > :last-child { margin-bottom: 0; } .leitung { list-style: none; margin: 0; padding: 0; } .leitung li + li { margin-top: var(--s-3); } .leitung strong { display: block; } /* Telefonnummern sind auf dem Handy das wichtigste Bedienelement dieser Seiten. Als reiner Inline-Link waeren sie nur 27px hoch — hier bekommen sie eine vollwertige Klickflaeche. */ .leitung a[href^="tel:"], .info-block p > a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--s-1) var(--s-2); margin-left: calc(var(--s-2) * -1); border-radius: var(--radius); } .leitung a[href^="tel:"]:hover, .info-block p > a[href^="tel:"]:hover { background: var(--c-weiss); } /* Frage-und-Antwort-Bloecke (z. B. Chorseite im Konzept) */ .faq { margin-top: var(--s-6); } .faq dt { font-weight: 700; margin-top: var(--s-4); } .faq dd { margin: var(--s-1) 0 0; } .downloads { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); align-items: start; } /* --- 11. Fussbereich ------------------------------------------------------ */ /* Kein Trennstrich: der Farbwechsel auf Gelb trennt bereits deutlich genug, so wie im Konzept. */ .fuss { background: var(--c-gelb); } .fuss__innen { max-width: var(--breite-max); margin-inline: auto; padding: var(--s-5) var(--s-4); } .fuss__partner { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: center; } .fuss__partner img { width: 9rem; } .fuss__rechtlich { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: center; /* Bewusst NICHT verkleinert — bei dieser Zielgruppe keine Kleinschrift, auch nicht bei Pflichtangaben. */ font-size: 1rem; } .fuss__rechtlich a { color: var(--c-gruen-800); } /* --- 12. Responsives Verhalten -------------------------------------------- */ /* Kopfzeile: unterhalb von rund 62rem passen Logo, sieben Symbole und der Regler nicht mehr nebeneinander. Dann bekommt die Navigation eine eigene Zeile, Logo und Regler bleiben oben auf einer Hoehe. */ @media (max-width: 62rem) { .kopf__innen { grid-template-columns: 1fr auto; grid-template-areas: "logo schrift" "nav nav"; row-gap: var(--s-3); } .logo { grid-area: logo; } .schriftgroesse{ grid-area: schrift; } .hauptnav { grid-area: nav; justify-self: stretch; } .hauptnav ul { justify-content: center; } } /* Zwei Spalten: die rechte Infospalte rutscht unter den Inhalt. */ @media (max-width: 68rem) { .huelle { grid-template-columns: var(--spalte-links) minmax(0, 1fr); } .spalte-rechts { grid-column: 2; } .huelle--start { grid-template-areas: "nav inhalt" "links inhalt" "rechts rechts"; grid-template-rows: max-content 1fr max-content; } /* Die Infokarten liegen jetzt breiter — nebeneinander statt gestapelt. */ .huelle--start > .spalte-rechts { display: grid; align-content: start; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } } /* Eine Spalte. Reihenfolge bleibt Navigation → Inhalt → Info, aber die Navigation ist eingeklappt und belegt nur eine Zeile. Dadurch steht der Inhalt sofort im Blick, ohne dass Seh- und Tastaturreihenfolge auseinanderfallen. */ @media (max-width: 48rem) { .huelle { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) var(--s-3); } .spalte-rechts { grid-column: 1; } .huelle--start { grid-template-areas: "nav" "inhalt" "links" "rechts"; grid-template-rows: auto; } .huelle--start > .spalte-rechts { display: flex; } .bereichsnav__schalter { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 3.25rem; padding: var(--s-3) var(--s-4); font: inherit; font-family: var(--ff); font-weight: 700; text-align: left; background: var(--c-mittelgruen); color: var(--c-gruen-800); border: 0; cursor: pointer; } .bereichsnav__schalter svg { width: 1.25rem; height: 1.25rem; fill: currentColor; transition: transform 0.15s; } .bereichsnav__schalter[aria-expanded="true"] svg { transform: rotate(180deg); } .bereichsnav__kopf { display: none; } .bereichsnav__liste[hidden] { display: none; } /* Sieben Symbole brechen frei umbrochen unschoen (6 + 1). Als Raster stehen sie gleichmaessig und die Klickflaechen werden groesser. */ .hauptnav ul { display: grid; grid-template-columns: repeat(4, 1fr); } .hauptnav a { min-width: 0; } body[data-nav="labels"] .hauptnav a { font-size: 0.7rem; } /* Beschriftung ueber die Knoepfe statt daneben. Nebeneinander wird die Gruppe bei 130 % Schriftgroesse so breit, dass sie das Logo aus der Zeile draengt. Die Beschriftung bleibt sichtbar — drei nackte "A" versteht diese Zielgruppe nicht. */ .schriftgroesse { flex-direction: column; align-items: flex-end; gap: var(--s-1); } /* Rasterzellen duerfen schrumpfen, sonst erzwingt der laengste Logo-Bestandteil einen Ueberlauf statt eines Umbruchs. */ .kopf__innen > * { min-width: 0; } .logo__text { overflow-wrap: break-word; } .hero__band p { font-size: 1.25rem; } h1 { font-size: 1.6rem; } } @media (max-width: 30rem) { .logo__text { font-size: 0.95rem; } .logo__text b { font-size: 1.05rem; } .schriftgroesse__label { display: none; } } /* --- 13. Ausgabe / Bewegungsreduktion ------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }