/* =========================================================================== * Deine Route — die Farbtafel „Roadbook" und das ganze Vokabular. * * WARUM DIESE DATEI IN public/ LIEGT UND NICHT IN src/styles/ * * Sie wird als `` eingebunden, also als eigene * Datei ausgeliefert und nicht mitgebündelt. `assetsInlineLimit: 0` in `astro.config.mjs` * verbietet jedes Einbetten — und eine gebündelte Stilvorlage, die nirgends eingebettet * werden darf, ist am Ende auch nur eine Datei. Dann lieber eine, deren Adresse feststeht. * * ═══ DIE TOKENS SIND DIE DES FREIGEGEBENEN PROTOTYPS ═══ * * `--ink`, `--paper`, `--panel`, `--panel-2`, `--line`, `--route`, `--route-deep`, `--signal`, * `--signal-ink`, `--muted` stehen wörtlich so in `apps/deineroute/design/prototyp.html` — * vom Betreiber am 22.09.2026 freigegeben. Alles andere unten (Rhythmus, Rahmenstärke, * abgeleitete Wasch-Töne) ist Vokabular, das das Prototyp-CSS noch nicht brauchte, weil es * nur drei Ansichten zeigte; hier tragen zusätzlich Formulare, Meldungen und Rechtsdokumente. * * ═══ ZWEI FASSUNGEN — WIE KALIO, NICHT WIE ZILLAPDF ═══ * * Der Prototyp definiert `@media (prefers-color-scheme: dark)` und `:root[data-theme="dark"]` * bereits; diese Datei übernimmt beide. Ein Umschalter am `` existiert in Woche 1 noch * nicht (keine Fach-Seite dafür) — die Selektoren stehen trotzdem schon bereit, damit ein * künftiger Umschalter nur noch das Attribut setzen muss. * * ═══ DIE KONTRASTE SIND NACHGERECHNET, NICHT GESCHÄTZT ═══ * * Gegen `--panel` (#E5E9E2), den dunkelsten hellen Untergrund: * * --ink #10151B 14,1:1 * --muted #57626B 5,1:1 Fliesstext/Kleingedrucktes * --route #0057A6 5,7:1 Flächen und Schrift (Links) * * `--signal` (#FFC629) auf Weiss trägt nur 1,4:1 und ist NIE Schrift — es steht als Fläche mit * `--signal-ink` darauf (`--signal-ink` auf `--signal`: 10,9:1) und als Kante. * =========================================================================== */ :root { /* --- Der Grund --------------------------------------------------------- * Wörtlich aus dem Prototyp. */ --ink: #10151B; --paper: #F2F5F1; --panel: #E5E9E2; --panel-2: #FFFFFF; --line: #C9D0C6; --route: #0057A6; --route-deep: #003D78; --signal: #FFC629; --signal-ink: #3A2900; --muted: #57626B; /* --- Abgeleitet, für Meldungen und Fokus ------------------------------- * Im Prototyp noch nicht gebraucht (er zeigt keine Formulare/Meldungen) — hier von Hand * aus denselben Farbwerten gemischt, damit sie zur selben Tafel gehören. */ --route-fern: #0057A612; --signal-fern: #FFC62920; --warnung: #B3261E; --warnung-grund: #B3261E12; /* --- Mass und Rhythmus -------------------------------------------------- */ --radius: 6px; --radius-gross: 8px; --satzbreite: 76rem; --satzbreite-eng: 38rem; --strich: 1.5px; --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2.5rem; --s7: 4rem; --s8: 6rem; /* --- Die Schrift — wörtlich aus dem Prototyp --------------------------- * Archivo für Überschriften (kräftig), IBM Plex Sans für Fliesstext, IBM Plex Mono für * Distanzen/Zeiten/Wegpunkt-Nummern — bewusst tabellarisch wie ein echtes Roadbook. */ --font-display: 'Archivo', 'Arial Narrow', sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #EDEFEA; --paper: #10151B; --panel: #1A2129; --panel-2: #161C23; --line: #2A333B; --route: #4DA3FF; --route-deep: #86C2FF; --signal: #FFD75E; --muted: #93A0AA; --route-fern: #4DA3FF1a; --signal-fern: #FFD75E20; } } :root[data-theme="dark"] { --ink: #EDEFEA; --paper: #10151B; --panel: #1A2129; --panel-2: #161C23; --line: #2A333B; --route: #4DA3FF; --route-deep: #86C2FF; --signal: #FFD75E; --muted: #93A0AA; --route-fern: #4DA3FF1a; --signal-fern: #FFD75E20; } /* =========================================================================== * Grundlagen * =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { color-scheme: light dark; scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.1; letter-spacing: -.01em; font-weight: 700; text-wrap: balance; margin: 0 0 var(--s3); } h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); } h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); } h4 { font-size: 1rem; } p, li { text-wrap: pretty; } p { margin: 0 0 var(--s4); } a { color: var(--route); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--route-deep); } strong, b { color: var(--ink); font-weight: 600; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; } :focus-visible { outline: 2.5px solid var(--route); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--signal); color: var(--signal-ink); } /* =========================================================================== * Gerüst * =========================================================================== */ .satz { width: min(100% - 2.5rem, var(--satzbreite)); margin-inline: auto; } .satz.eng { max-width: var(--satzbreite-eng); } /* Die breitere Spalte für ein zweispaltiges Rechtsdokument (Register + Text). */ .satz.weit { --satzbreite: 64rem; } .blatt { padding-block: clamp(var(--s6), 5vw, var(--s8)); } .blatt.getoent { background: var(--panel); } .blatt + .blatt:not(.getoent) { border-top: 1px solid var(--line); } .spalten { display: grid; gap: var(--s4); } .spalten.zwei { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .spalten.drei { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } /* =========================================================================== * Bauteile * =========================================================================== */ .kachel { background: var(--panel-2); border: var(--strich) solid var(--line); border-radius: var(--radius-gross); padding: var(--s5); } .kachel.still { background: transparent; } .kachel.signal { border-color: var(--signal); background: var(--signal-fern); } .kachel > :last-child { margin-bottom: 0; } .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .78rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); } .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: .68rem 1.25rem; border: var(--strich) solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .knopf:hover { border-color: var(--route); color: var(--route); } /* Der Hauptknopf: Verkehrsblau, wie „Route jetzt planen" im Prototyp. */ .knopf.primaer { background: var(--route); border-color: var(--route); color: #F5F8FF; } .knopf.primaer:hover { background: var(--route-deep); border-color: var(--route-deep); } .knopf.signal { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); } .knopf.signal:hover { background: var(--signal); filter: brightness(0.96); } .knopf.still { border-color: transparent; background: transparent; color: var(--muted); } .knopf.still:hover { border-color: var(--line); color: var(--ink); } /* * DER GEFAHR-KNOPF — der Widerruf. Blasse Kontur, sie warnt ohne zu schreien: der Widerruf * kostet Wertersatz, die Kündigung nicht. */ .knopf.gefahr { border-color: color-mix(in srgb, var(--warnung) 35%, transparent); color: var(--warnung); } .knopf.gefahr:hover { border-color: var(--warnung); background: var(--warnung-grund); } .knopf.gross { padding: .9rem 1.7rem; font-size: 1.05rem; } .knopf.breit { width: 100%; } .knopf[disabled], .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } .meldung { border-left: 3px solid var(--line); padding: var(--s3) var(--s4); background: var(--panel); margin-bottom: var(--s4); border-radius: var(--radius); } .meldung.hinweis { border-left-color: var(--signal); background: var(--signal-fern); } .meldung.fehler { border-left-color: var(--warnung); background: var(--warnung-grund); color: var(--ink); } .meldung.gut { border-left-color: var(--route); background: var(--route-fern); } .meldung > :last-child { margin-bottom: 0; } /* --- Formular ------------------------------------------------------------ */ label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: var(--s1); } .feld { display: block; margin-bottom: var(--s4); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], input[type="date"], select, textarea { width: 100%; padding: .62rem .8rem; border: var(--strich) solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--ink); font: inherit; } input::placeholder, textarea::placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { border-color: var(--route); outline: none; } .feld-hinweis { font-size: .82rem; color: var(--muted); margin-top: var(--s1); } /* --- Tabellen -------------------------------------------------------------- */ .tabelle-huelle { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); } th { color: var(--ink); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; } /* --- Kleinkram -------------------------------------------------------- */ .leise { color: var(--muted); } .klein { font-size: .88rem; } .fest { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .anriss { font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); color: var(--muted); max-width: 52ch; } /* * Der Raster-Papier-Grund auf Kartenflächen — wörtlich aus dem Prototyp. Wird erst ab Woche 2 * hinter der echten Karte sichtbar; die Klasse steht schon hier, damit die Farbtafel für * `check:farbtafel` vollständig ist, sobald die Kartenseite sie benutzt. */ .papier-raster { background-color: var(--panel); background-image: repeating-linear-gradient(0deg, transparent, transparent 27px, var(--line) 27px, var(--line) 28px), repeating-linear-gradient(90deg, transparent, transparent 27px, var(--line) 27px, var(--line) 28px); } /* =========================================================================== * Kopf und Fuss * =========================================================================== */ .kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: var(--strich) solid var(--line); } .kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 4rem; } .kopf nav { display: flex; gap: var(--s4); align-items: center; } .kopf nav a { color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 500; } .kopf nav a:hover { color: var(--ink); } .marke { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); } .marke-zeichen { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; flex: none; border-radius: 6px; background: var(--route); color: var(--signal); } .marke-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; } .marke-name em { font-style: normal; color: var(--route); } .fuss { background: var(--panel); border-top: var(--strich) solid var(--line); padding-block: var(--s6); font-size: .9rem; } .fuss a { color: var(--muted); text-decoration: none; } .fuss a:hover { color: var(--route); text-decoration: underline; } .fuss-spalten { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .fuss h4 { font-family: var(--font-body); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } .fuss-unten { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--strich) solid var(--line); color: var(--muted); font-size: .84rem; } /* =========================================================================== * Die sich zeichnende Routenlinie — wörtlich aus dem Prototyp. * * Erst ab Woche 2/3 sichtbar genutzt (Kartenansicht), respektiert `prefers-reduced-motion`. * =========================================================================== */ .route-line { stroke-dasharray: 1; stroke-dashoffset: 1; } .route-line.animate { animation: dr-draw 1.8s .15s cubic-bezier(.3,.7,.3,1) forwards; } @keyframes dr-draw { to { stroke-dashoffset: 0; } } .wp-pin { opacity: 0; transform: scale(.6); transform-origin: center; transform-box: fill-box; } .wp-pin.animate { animation: dr-pin .35s ease-out forwards; } @keyframes dr-pin { to { opacity: 1; transform: scale(1); } } /* =========================================================================== * Wegpunkt-Zeile — das Roadbook-Motiv, wörtlich aus dem Prototyp (S/1/2/Z). * =========================================================================== */ .wp-row { display: flex; align-items: center; gap: var(--s4); padding: .8rem .25rem; border-bottom: 1px solid var(--line); } .wp-row:last-child { border-bottom: none; } .wp-num { flex: none; width: 26px; height: 26px; border-radius: 4px; background: var(--panel); border: var(--strich) solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--muted); } .wp-num.is-end { background: var(--route); border-color: var(--route); color: #F5F8FF; } .wp-label { flex: 1; font-size: .9rem; } .wp-time { font-family: var(--font-mono); font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* =========================================================================== * Bewegung — und ihr Ausschalter * =========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .route-line.animate, .wp-pin.animate { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }