/* ========================================================================== Irodion, Luenen. Die Token. Stand Redesign September 2026, "Die Glasaetzung". Kontraste sind gerechnet, nicht geschaetzt (Werte hinter den Farben). Wer hier etwas aendert, aendert die ganze Seite. ========================================================================== */ :root { /* --- Farbe ------------------------------------------------------------- Palette von Aaron, 30.09.2026: Blau, Navy, Creme, Orange. Kein Gold, kein Braun. Orange ist der einzige Akzent und sparsam (Knoepfe, Linien auf Blau, grosse Ueberschriften). Nie weisse Schrift auf Orange, nie orange Schrift auf Blau. Werte hinter den Farben: Kontrast. */ --leinen: #FAF5EC; /* Creme, der Grund */ --leinen-tief: #F1E8D8; /* Creme tief, ruhige Bloecke */ --tinte: #1E3450; /* Navy, Fliesstext auf Creme 11.63:1 */ --tinte-weich: #4E5D70; /* Nebentext auf Creme 6.19:1, tief 5.53:1 */ --eiche: #1E3450; /* Navy: dunkle Flaechen, Fuss, starker Text (Tokenname historisch) */ --logoblau: #305071; /* Hauptblau: Kopf, Nummernfeld, Links 7.70:1 */ --orange: #F28C38; /* Knoepfe, Linien auf Blau; Navy darauf 5.16:1 */ --orange-hover: #FFA050; /* Hover der Knoepfe; Navy darauf 6.25:1 */ --orange-dunkel: #C2542A; /* grosse Ueberschriften auf Creme 4.21:1 */ --auf-eiche: #FAF5EC; /* Creme auf Navy 11.63:1, auf Blau 7.70:1 */ --auf-eiche-weich: #C3D3E4; /* Nebentext auf Navy 8.28:1, auf Blau 5.48:1 */ --auf-blau-weich: #C3D3E4; --treffer: #F8D2AE; /* das gefundene Gericht, der heutige Tag, Navy 8.92:1 */ --linie: #E3D9C8; /* Trennlinien, ohne Textanforderung */ --feldrand: #7A8494; /* Rand der Eingabe, 3.48:1 auf Creme */ /* Das Glas. Glattes Milchglas wie die geaetzten Scheiben im Haus, in Creme getoent. 88 Prozent Deckung, damit das dunkle Orange der Ueberschrift auch ueber dunklem Bild 3:1 haelt, damit das Haus dahinter warm durchscheint. Auf Glas stehen nur tinte und eiche, nie tinte-weich. Selbst ueber reinem Schwarz bleibt tinte bei 6.44:1 und eiche bei 6.05:1. */ --glas: rgba(250, 245, 236, 0.88); --glas-voll: #FAF5EC; /* ohne backdrop-filter, und bei reduzierter Transparenz */ --glas-rand: rgba(255, 255, 255, 0.78); --glas-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px -2px rgba(30, 52, 80, 0.12), 0 28px 56px -28px rgba(30, 52, 80, 0.38); /* --- Schrift ----------------------------------------------------------- Zwei Rollen. Die Ueberschriften tragen die Display-Serif Zodiak in leichtem Gewicht; die Leichtigkeit ist der Unterschied zu "billig". Alles Gelesene steht in Source Serif 4, einer Buchschrift, wie auf einer gedruckten Karte. Zahlen bleiben in derselben Schrift, nur mit Tabellenziffern (.ziffer), damit Zeiten und Preise senkrecht fluchten. Griechisch kommt aus Literata (siehe fonts.css). */ --display: 'Zodiak', 'Source Serif 4', 'Literata', Georgia, serif; --schrift: 'Source Serif 4', 'Literata', Georgia, 'Times New Roman', serif; --ziffer: var(--schrift); --s--1: 0.8125rem; --s-0: 1.0625rem; /* 17px Basis */ --s-1: 1.25rem; --s-2: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); --s-3: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); --s-4: clamp(2.625rem, 1.7rem + 3.9vw, 4.5rem); /* nur der Hero */ --lh-kopf: 1.06; --lh-text: 1.6; --tr-display: -0.02em; /* --- Raum -------------------------------------------------------------- Die unteren vier Sprossen sind Textabstaende und stehen fest. Die oberen drei tragen die Sektionen und wachsen mit dem Fenster, am Handy etwa die Haelfte. */ --r-1: 0.375rem; --r-2: 0.75rem; --r-3: 1.25rem; --r-4: 2rem; --r-5: clamp(2.125rem, 1.73rem + 1.69vw, 3.25rem); --r-6: clamp(2.75rem, 1.85rem + 3.76vw, 5.25rem); --r-7: clamp(4rem, 2.40rem + 6.80vw, 8.5rem); --breite: 76rem; /* der Satzspiegel */ --rand: clamp(1.25rem, 5vw, 4rem); /* Aussenrand */ --kopf-h: 3.75rem; /* Hoehe der Kopfleiste */ /* Was man drueckt oder ausfuellt, hat leicht abgerundete Ecken, wie eine gestanzte Karte. Fotos und Flaechen bleiben kantig. */ --rund: 6px; /* --- Bewegung ---------------------------------------------------------- Eine Kurve fuer alles, was erscheint oder antwortet. Nur transform und opacity werden bewegt. */ --ease-aus: cubic-bezier(0.23, 1, 0.32, 1); --t-druck: 160ms; --t-ui: 200ms; --t-klar: 700ms; } /* ========================================================================== Grundlage ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; color-scheme: light; /* Die Kopfleiste steht fest. Jeder Sprung landet darunter, nicht darin. */ scroll-padding-top: calc(var(--kopf-h) + var(--r-3)); scrollbar-color: #9AA6B6 var(--leinen); /* Kein scroll-behavior: smooth. Das Dokument ist lang, main.js entscheidet je Sprung nach Distanz: nah weich, weit sofort. */ } body { overflow-x: hidden; overflow-x: clip; margin: 0; background: var(--leinen); color: var(--tinte); font-family: var(--schrift); font-size: var(--s-0); line-height: var(--lh-text); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Keine Worttrennung, nirgends (Aaron, 30.09.2026). */ hyphens: manual; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: var(--lh-kopf); letter-spacing: var(--tr-display); /* Ueberschriften auf Creme in dunklem Orange (nur gross, 4.21:1). Auf Blau und Navy setzen die Abschnitte Creme. */ color: var(--orange-dunkel); margin: 0; text-wrap: balance; /* Ueberschriften brechen nie mitten im Wort. */ hyphens: none; } p { margin: 0 0 var(--r-3); max-width: 65ch; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } img { display: block; max-width: 100%; height: auto; } figure { margin: 0; } address { font-style: normal; } ::selection { background: var(--treffer); color: var(--tinte); } /* Ziffern: Nummern, Preise, Zeiten, Telefon. Dieselbe Schrift wie der Text, nur mit gleich breiten Ziffern in Versalhoehe. */ .ziffer { font-family: var(--ziffer); font-variant-numeric: tabular-nums lining-nums; } [lang="el"] { hyphens: none; } /* --- Zugaenglichkeit ----------------------------------------------------- */ .nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .sprungmarke { position: absolute; left: var(--rand); top: 0; transform: translateY(-120%); z-index: 999; background: var(--eiche); color: var(--auf-eiche); padding: var(--r-2) var(--r-3); transition: transform var(--t-ui) var(--ease-aus); } .sprungmarke:focus { transform: translateY(0); } :focus-visible { outline: 2px solid var(--logoblau); outline-offset: 3px; } .auf-eiche :focus-visible, .auf-blau :focus-visible { outline-color: var(--auf-eiche); } /* Grobe Zeiger brauchen 44px Trefferflaeche. */ @media (pointer: coarse) { .knopf, .tipp, .kopf__liste a { min-height: 44px; display: inline-flex; align-items: center; } .fuss__link, .blatt address a, .karte__index a, .karte-link, .platz__mail a { display: inline-block; padding-block: 11px; } .fuss__link { line-height: 1.2; } /* Die Trefferflaeche waechst nach oben und unten; der erste Link unter einem Spaltentitel rueckt um das Polster hoch, damit seine Schrift auf einer Linie mit der Adresse daneben steht. */ .fuss__titel + .fuss__link, .fuss__titel + .fuss__liste > li:first-child > .fuss__link { margin-top: -11px; } .blatt address { line-height: 1.25; } }