/* Design-System "Kurs setzen" – mobile-first, mit Light-/Dark-Mode-Unterstuetzung. */ /* Manrope ist die Markenschrift des Osnabrück-CD (Mobilitätsfahrplan-Styleguide, Kapitel Typografie). Selbst gehostet statt ueber Google Fonts: so fliessen keine Besucherdaten an Dritte ab, und die strenge CSP der Seite (default-src 'self') bleibt unveraendert. Eine einzige Variable-Font-Datei deckt den Gewichtsbereich 200-800 ab (29 KB gegenueber 120 KB fuer vier Einzelschnitte); der Zeichensatz ist auf Latein plus Interpunktion reduziert. Die Lizenz (SIL Open Font License) liegt als OFL.txt daneben, ihre Weitergabe ist Bedingung fuer das Mitliefern der Schrift. font-display: optional statt swap: swap tauscht die Schrift nach dem ersten Rendern aus, wodurch sich je nach Wortbreite Zeilenumbrueche sichtbar verschieben. optional gibt dem Browser nur ein kurzes Zeitfenster (~100ms) - ist die Schrift bis dahin bereit, rendert er direkt mit ihr, sonst bleibt es fuer diesen Seitenaufruf bei der Systemschrift, ohne spaeteren Wechsel. Die preload-Verweise in den -Bereichen der HTML-Seiten erhoehen die Chance, dass die Schrift dieses Zeitfenster schafft. */ @font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-variable-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: optional; } :root { --color-bg: #f4f6f8; --color-surface: #ffffff; --color-text: #1b2230; --color-text-muted: #5a6473; --color-border: #c5ccd6; /* Osnabrück-Türkis in zwei Rollen, wie im Styleguide (S. 22) vorgesehen: --color-accent ist das Osnabrück-Türkis #00cabe fuer FLAECHEN (Knopfhintergruende, Balken, Tonungen). Der Styleguide nennt es die dominierende Farbe, die "vorwiegend in voller Deckkraft eingesetzt" wird - hier gehoert der leuchtende Originalton hin. --color-accent-text ist die im Styleguide definierte "barrierefreie Alternativfarbe" #006363, ausdruecklich "fuer die bessere Lesbarkeit von Texten". Sie ist noetig, weil #00cabe als Text auf Weiss nur 2,1 Kontrast erreicht und die Anforderung von 4,5 verfehlt; #006363 kommt auf 7,1. Die beiden Toene sind nicht austauschbar: #006363 flaechig eingesetzt laesst die Marke wie ein gedecktes Petrolgruen wirken statt wie das Osnabrück-Türkis. Faustregel im ganzen Projekt: FLAECHEN (background, accent-color, Balkenfuellungen, Tonungen per color-mix) nehmen --color-accent, LINIEN UND TEXT (border-color, Schrift) nehmen --color-accent-text. Linien brauchen den dunklen Ton, weil sie Zustaende anzeigen - etwa welche Antwort gewaehlt ist - und dafuer mindestens 3:1 Kontrast noetig sind: #00cabe erreicht als Linie auf Weiss nur 2,1, #006363 dagegen 7,1. Ausnahme ist der Knopf .btn--primary, dessen Rahmen mit seiner eigenen Tuerkisflaeche identisch ist und deshalb ebenfalls --color-accent nutzt. */ --color-accent: #00cabe; --color-accent-text: #006363; --color-accent-contrast: #00312f; /* Textfarbe auf der Tuerkisflaeche - dunkel, Kontrast 6,9 */ --color-danger: #dc2626; --color-erfolg: #15803d; --color-punkt-neutral: #d8a900; /* Der Fokusring muss sich selbst deutlich vom Hintergrund abheben (mind. 3:1). Dafuer reicht das helle #00cabe mit 2,1 nicht aus, deshalb hier der dunkle Textton. */ --color-focus: #006363; /* Eigene Akzentfarbe je Leitlinie - sieben klar unterscheidbare Toene, Kontrast auf Weiss geprueft. Sie stammen nicht aus dem Osnabrück-CD, das dafuer keine sieben Toene bereithaelt. Einschraenkung: --ll6 ist ein Tuerkis und liegt der Markenfarbe nahe (RGB-Abstand 27 im Hell-, 46 im Dunkelmodus, waehrend die sieben Leitlinien untereinander mindestens 50 auseinanderliegen). Leitlinie 6 ist dadurch schlechter von normalen Bedienelementen zu unterscheiden als die uebrigen sechs. */ --ll1: #dc2626; /* Sicher unterwegs - Rot */ --ll2: #c25700; /* Stadt der kurzen Wege - kraeftiges Orange (voll gesaettigt statt gedeckt/braun) */ --ll3: #15803d; /* Vorfahrt fuer den Umweltverbund - Gruen */ --ll4: #2563eb; /* Stadt und Region - Blau */ --ll5: #db2777; /* Eine Stadt fuer alle - Pink */ --ll6: #0f766e; /* Lebenswerter, klimaangepasster Stadtraum - Tuerkis */ --ll7: #856e00; /* Wirtschaft und Logistik - dunkles Gold. Ein helleres, eindeutigeres Gelb erreicht als Text auf Weiss kein AA-Niveau mehr; dieser Ton verbindet ausreichenden Kontrast (~5:1) mit der einheitlichen Farbverwendung der uebrigen sechs Leitlinien (Text, Balken und Tag-Hintergrund identisch). */ /* Markenschrift zuerst, dahinter die System-Schriftkette als Rueckfallebene - fuer den Moment vor dem Laden, fuer Seitenaufrufe, bei denen font-display: optional bei der Systemschrift bleibt, und fuer Faelle, in denen die Schriftdatei gar nicht ankommt. */ --font-base: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 10px; --max-width: 46rem; } :root[data-theme="dark"] { color-scheme: dark; --color-bg: #12161d; --color-surface: #1b212b; --color-text: #e7ebf1; --color-text-muted: #94a0b3; --color-border: #333d4c; /* Im Dunkelmodus umgekehrt: hier ist der Primaerton #00cabe des Styleguides der richtige, er erreicht auf dem dunklen Grund 8,8. Das dunkle #006363 aus dem Hellmodus waere hier unlesbar. */ --color-accent: #00cabe; --color-accent-text: #00cabe; --color-accent-contrast: #00312f; /* helles Tuerkis im Dunkelmodus braucht dunklen Text */ --color-danger: #f87171; --color-erfolg: #4ade80; --color-punkt-neutral: #facc15; --color-focus: #00cabe; --ll1: #f87171; --ll2: #fb923c; --ll3: #4ade80; --ll4: #60a5fa; --ll5: #f472b6; --ll6: #2dd4bf; --ll7: #fbbf24; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --color-bg: #12161d; --color-surface: #1b212b; --color-text: #e7ebf1; --color-text-muted: #94a0b3; --color-border: #333d4c; --color-accent: #00cabe; --color-accent-text: #00cabe; --color-accent-contrast: #00312f; --color-danger: #f87171; --color-erfolg: #4ade80; --color-punkt-neutral: #facc15; --color-focus: #00cabe; --ll1: #f87171; --ll2: #fb923c; --ll3: #4ade80; --ll4: #60a5fa; --ll5: #f472b6; --ll6: #2dd4bf; --ll7: #fbbf24; } } * { box-sizing: border-box; } [hidden] { display: none !important; } button { font: inherit; cursor: pointer; } html { -webkit-text-size-adjust: 100%; /* Immer einen vertikalen Scrollbalken anzeigen, auch auf kurzen Seiten ohne eigenen Scrollbedarf - sonst verschiebt sich der zentrierte Inhalt (Kopfbereich und Text) je nach Seitenlaenge um die halbe Scrollbalkenbreite, sichtbar beim Wechsel zwischen der kurzen Startseite und den laengeren Rechts-Seiten. overflow-y:scroll statt scrollbar-gutter:stable: Letzteres reserviert denselben Platz, laesst ihn aber leer - der Streifen wirkt dann wie eine Luecke neben Kopf- und Fussbereich. Bei Overlay-Scrollbalken (macOS-Standard "Beim Scrollen") belegt er ohnehin keine Breite. Kein eigener background auf : Sonst uebertraegt der Browser den Hintergrund von nicht mehr auf die gesamte Seitenflaeche, und unterhalb kurzer Seiten bleibt ein grosser andersfarbiger Bereich stehen. */ overflow-y: scroll; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-base); font-size: 1rem; line-height: 1.55; } h1, h2, h3 { line-height: 1.25; } h2 { font-size: 1.6rem; margin-top: 0; } h3 { font-size: 1.2rem; } a { color: var(--color-accent-text); } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Nach einem Seitenwechsel landet der Fokus manchmal statt auf einem echten Element auf / selbst (Browser-Fallback, wenn nichts anderes den Fokus übernimmt) - dort erscheint der Ring dann als Rahmen um die gesamte Seite. Kein Verlust an Erreichbarkeit, da html/body ohnehin nie ein echtes Tab-Ziel sind. */ html:focus-visible, body:focus-visible { outline: none; } /* Skip-Link: unsichtbar bis zum ersten Tab-Stopp, dann klar sichtbar. */ .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--color-text); color: var(--color-bg); padding: 0.6rem 1rem; border-radius: var(--radius); z-index: 100; transition: top 0.15s ease; } .skip-link:focus { top: 1rem; } .site-header { position: relative; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .site-header__inner { max-width: var(--max-width); margin: 0 auto; padding: 1rem 1.25rem; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "strip actions"; align-items: center; gap: 1rem; } .site-header__actions { display: flex; align-items: center; gap: 0.6rem; position: relative; grid-area: actions; justify-self: end; } /* Der amtliche Absender (Stadt Osnabrück) traegt den Kopfbereich allein; den Tool-Namen nennt die Ueberschrift der Seite. Die Wort-Bild-Marke selbst bleibt unveraendert. Die Verbindungslinie links/rechts ist laut Styleguide ("Die Länge der Linien muss stets dem individuellen Medium angepasst werden!", S.8) ein flexibles, an den Platz anzupassendes Gestaltungselement und deshalb per CSS nachgebaut statt als starre Pfadlaenge aus der Logo-Datei uebernommen. Fuer Hell- und Dunkelmodus wird zwischen den beiden offiziell dokumentierten Farbversionen umgeschaltet - Positiv (dunkler Schriftzug, fuer helle Flaechen) und Negativ (weisser Schriftzug, fuer dunkle Flaechen, Styleguide S.10); das Osnabrück-Türkis bleibt in beiden identisch. */ .os-strip { grid-area: strip; display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .os-strip__linie { flex: 1 1 auto; /* 0 statt eines Mindestwerts: Die Linien duerfen notfalls bis auf nichts zusammenschrumpfen. Ein Mindestwert drueckt stattdessen den ganzen Kopfbereich ueber den Rand hinaus, sobald es enger wird als vorgesehen - etwa bei stark hochgestellter Schriftgroesse, die Logo und Knoepfe mitwachsen laesst. */ min-width: 0; height: 2px; border-radius: 1px; background: #00cabe; } /* Das Logo ist zugleich der Weg zurueck auf die Startseite. Die Klasse .brand muss erhalten bleiben: ablauf.js findet ueber genau diesen Selektor den Startseiten-Link im Kopfbereich und haengt daran die Sicherheitsabfrage gegen versehentliches Verlassen des laufenden Fragebogens. Ohne die Klasse entfaellt diese Abfrage kommentarlos. Kein Hover-Ring: Die uebrigen interaktiven Elemente nutzen den Leuchtring als Hover-Rueckmeldung, auf der amtlichen Wort-Bild-Marke wirkt ein farbiger Ring unpassend. Der normale Fokusring (:focus-visible weiter oben) bleibt fuer Tastaturbedienung erhalten. */ .os-strip__logo { flex: 0 0 auto; display: inline-flex; } .os-strip__img { display: block; height: 4.25rem; width: auto; } .os-strip__img--negativ { display: none; } :root[data-theme="dark"] .os-strip__img--positiv { display: none; } :root[data-theme="dark"] .os-strip__img--negativ { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .os-strip__img--positiv { display: none; } :root:not([data-theme="light"]):not([data-theme="dark"]) .os-strip__img--negativ { display: block; } } /* Auf schmalen Bildschirmen wird nur das Logo kleiner - die Bandarole bleibt auf allen Breiten erhalten, weil der Mobilitaetsfahrplan-Styleguide (S.2) sie verlangt: "Auch die Bandarole taucht immer auf." Der Platz reicht durchgehend: bei 375px Fensterbreite bleiben rund 63px je Linie, bei 320px rund 36px. */ @media (max-width: 599px) { .os-strip__img { height: 3.25rem; } } .themetoggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); } .themetoggle:hover { border-color: var(--color-accent-text); color: var(--color-accent-text); } .themetoggle svg { width: 1.15rem; height: 1.15rem; } .themetoggle__sun { display: none; } :root[data-theme="dark"] .themetoggle__sun { display: block; } :root[data-theme="dark"] .themetoggle__moon { display: none; } /* ----- Hamburger-Menü-Knopf: drei Linien animieren per CSS-Transform zu einem X. ----- */ .menu-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); } .menu-toggle:hover { border-color: var(--color-accent-text); } .menu-toggle__linie { display: block; width: 1.1rem; height: 2px; background: var(--color-text); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; } .menu-toggle.ist-offen .menu-toggle__linie:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.ist-offen .menu-toggle__linie:nth-child(2) { opacity: 0; } .menu-toggle.ist-offen .menu-toggle__linie:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .menu-toggle__linie { transition: none; } } /* ----- Dropdown-Menü: kompaktes Panel unter dem Hamburger-Knopf, keine Vollbild-Overlay. ----- */ .menu-panel { position: absolute; top: calc(100% + 0.6rem); right: 0; min-width: 14rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 0.5rem; z-index: 50; } .menu-panel a { display: block; padding: 0.7rem 0.9rem; border-radius: calc(var(--radius) - 4px); color: var(--color-text); text-decoration: none; font-weight: 600; min-height: 44px; opacity: 0; transform: translateY(-4px); animation: menu-eintrag-einblenden 0.2s ease forwards; } .menu-panel a:hover { background: var(--color-bg); } .menu-panel a[aria-current="page"] { color: var(--color-accent-text); } /* Trennt Startseite/Kontakt (Navigation) inhaltlich von den Rechts-Seiten darunter. */ .menu-panel__trenner { border: none; border-top: 1px solid var(--color-border); margin: 0.4rem 0.2rem; } .menu-panel a:nth-child(1) { animation-delay: 0.02s; } .menu-panel a:nth-child(2) { animation-delay: 0.07s; } .menu-panel a:nth-child(4) { animation-delay: 0.12s; } .menu-panel a:nth-child(5) { animation-delay: 0.17s; } .menu-panel a:nth-child(6) { animation-delay: 0.22s; } @keyframes menu-eintrag-einblenden { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .menu-panel a { animation: none; opacity: 1; transform: none; } } /* ----- Hero-Bereich der Startseite: keine Hintergrundfläche, Hervorhebung nur über Typografie (Kicker-Label + große Überschrift) statt Farbwäsche. ----- */ .hero { padding: 1.5rem 0 0.5rem; } .hero--start { padding-bottom: 1.5rem; } .title.title--start { font-size: 2.1rem; letter-spacing: -0.01em; } @media (min-width: 600px) { .title.title--start { font-size: 2.9rem; } } /* Namens-Anker der Seite in der ersten Zeile der Hauptueberschrift, farblich abgesetzt wie ein kleines Tool-Logo. Osnabrück-CD-Gelb #ffd630 (Mobilitätsfahrplan-Styleguide S. 5, dort "Hauptfarbe des Mobilitätsfahrplans") statt des Osnabrück-Türkis, damit sich der Tool-Name vom amtlichen Absender im Kopfbereich unterscheidet. Beide Farben zusammen sind die Kombination, die der projektspezifische Styleguide vorgibt (Gelb als Haupt-, Türkis als Sekundaerfarbe). Eine Unterstreichung statt einer gefuellten Flaeche: Ein Kasten mit Padding schiebt den Text aus der Flucht mit "deine" in der Zeile darunter, ohne Padding beginnt "Kurs setzen" exakt an derselben Kante wie der Zeilenumbruch. Die Linie ist leicht geschwungen, dafuer kein text-decoration (das kann keine Kurven), sondern ein Pseudo-Element mit einer SVG-Kurve als Hintergrundbild. preserveAspectRatio="none" plus background-size 100% 100% dehnen sie non-uniform auf jede Textbreite, auch wenn "Kurs setzen" selbst umbricht - dasselbe Verhalten wie bei der Bandarole im Kopfbereich. Die Kruemmung bleibt flach (12 von 24 Einheiten Durchhang), weil eine ausgepraegte Welle neben der geraden Bandarole zu verspielt wirkt. Volle Farbstaerke #ffd630, da eine duenne Linie keinen dominanten Farbblock bildet. */ .tool-badge { position: relative; display: inline-block; line-height: 1; color: var(--color-text); } .tool-badge::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 0.2em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17 Q100 5 196 17' stroke='%23ffd630' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; } .btn--gross { padding: 1rem 2.2rem; font-size: 1.15rem; border-radius: 999px; } /* Ausnahme von der sonst einheitlichen Button-Größe: der wichtigste Klick der Seite (Beteiligung starten) bekommt optisch mehr Gewicht als alle anderen. */ .btn--hero { padding: 1.3rem 3rem; font-size: 1.35rem; border-radius: 999px; } /* ----- 3-Schritte-Vorschau auf der Startseite: unterscheidet sie visuell vom Einstiegsbildschirm des Fragebogens, der denselben Ablauf nur als Fließtext nennt. ----- */ .schritte-vorschau { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; } .schritte-vorschau li { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .schritte-vorschau__zahl { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); color: var(--color-accent-text); font-weight: 800; } @media (min-width: 700px) { .schritte-vorschau { grid-template-columns: repeat(3, 1fr); } } .start-button-zeile { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .kicker { display: inline-block; margin: 0 0 0.6rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); } @media (min-width: 600px) { .hero { padding-top: 2rem; } } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } .title { font-size: 1.6rem; margin: 0.5rem 0 0.25rem; } .intro { color: var(--color-text-muted); margin-top: 0; } /* Zwei Verweise auf die amtlichen Leitbild-PDFs direkt unter der Erlaeuterung - bewusst ohne eigenes Icon oder Farbwechsel, damit sie nicht wie ein weiterer Handlungsaufruf neben "Beteiligung beginnen" wirken. Der Hinweis "PDF, oeffnet in neuem Tab" steht nur fuer Screenreader im Linktext (.visually-hidden): Wer per Sprachausgabe navigiert, soll das vor dem Anklicken erfahren; sehend ist es an "Leitbild als Text/Grafik" bereits klar genug, ein sichtbarer Klammerzusatz waere hier nur Ballast. */ .leitbild-links { margin: -0.5rem 0 1.5rem; font-size: 0.9rem; } .notice { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.9rem 1rem; margin: 1.5rem 0; } .notice--draft { border-color: #d8a900; background: #fdf6dc; color: #4a3b00; } :root[data-theme="dark"] .notice--draft { background: #3a3200; color: #f6e9a8; border-color: #7a6300; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .notice--draft { background: #3a3200; color: #f6e9a8; border-color: #7a6300; } } .notice--erfolg { border-color: var(--color-erfolg); color: var(--color-erfolg); background: var(--color-surface); } .notice__icon { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-text); color: var(--color-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; } /* ----- Bestätigungsdialog (z.B. "Neu starten"): natives