/* Ospella — base.css: Reset, Schriften, Typoskala, Fokusring, Bewegung. */ @font-face { font-family: "EB Garamond"; src: url("../vendor/fonts/ebgaramond-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "EB Garamond"; src: url("../vendor/fonts/ebgaramond-latinext.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Karla"; src: url("../vendor/fonts/karla-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Karla"; src: url("../vendor/fonts/karla-latinext.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } *, *::before, *::after { box-sizing: border-box; } /* Klassenregeln wie .deckknoepfe { display: flex } schlagen sonst das hidden-Attribut, und ausgeblendete Elemente belegen weiter Platz. */ [hidden] { display: none !important; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--flaeche-grund); color: var(--text); font-family: var(--schrift-ui); font-size: var(--gr-flies); line-height: var(--zh-flies); letter-spacing: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Bei 200 % Schriftgroesse passen lange Komposita („Hokkaidokuerbis") sonst in keine Spalte mehr. Silbentrennung greift ueber lang="de" am . */ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; background: none; border: none; margin: 0; } button { cursor: pointer; } select { cursor: pointer; } /* --- Typoskala §6.2 --- */ .t-buchstabe { font-family: var(--schrift-display); font-weight: 400; font-size: var(--gr-buchstabe); line-height: var(--zh-buchstabe); } .t-titel { font-family: var(--schrift-display); font-weight: 500; font-size: var(--gr-titel); line-height: var(--zh-titel); } .t-gericht { font-family: var(--schrift-display); font-weight: 400; font-size: var(--gr-gericht); line-height: var(--zh-gericht); } .t-portion { font-family: var(--schrift-display); font-weight: 500; font-size: var(--gr-portion); line-height: var(--zh-portion); font-variant-numeric: tabular-nums; } .t-rubrik { font-family: var(--schrift-display); font-weight: 500; font-size: var(--gr-rubrik); line-height: var(--zh-rubrik); color: var(--holz-text); } .t-listentitel { font-family: var(--schrift-display); font-weight: 400; font-size: var(--gr-listentitel); line-height: var(--zh-listentitel); } .t-flies { font-size: var(--gr-flies); line-height: var(--zh-flies); max-width: 68ch; } .t-bedien { font-size: var(--gr-bedien); line-height: var(--zh-bedien); } .t-neben { font-size: var(--gr-neben); line-height: var(--zh-neben); color: var(--text-leise); } .t-marker { font-size: var(--gr-marker); line-height: var(--zh-marker); font-weight: 500; } .t-zahl { font-variant-numeric: tabular-nums; } /* --- Fokus: einzige erlaubte Ausnahme von "keine Schatten" (§6.3) --- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--gruen-text); outline-offset: 2px; border-radius: 4px; } .nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .sprungmarke { position: absolute; left: -9999px; top: 0; z-index: 20; background: var(--flaeche-karte); color: var(--gruen-text); padding: 10px 14px; border-radius: var(--r-bedien); border: 1px solid var(--linie-karte); } .sprungmarke:focus-visible { left: var(--rand-seite); top: 8px; } /* --- Grundgeruest --- */ .huelle { max-width: var(--spalte-max); margin: 0 auto; min-height: 100dvh; position: relative; } .buehne { /* Der untere Rand muss mit der Schriftgroesse wachsen: bei 200 % wird die Navigationsleiste zweizeilig und verdeckt sonst den letzten Block. */ padding: 18px var(--rand-seite) calc(5.5rem + env(safe-area-inset-bottom)); display: block; } .buehne:focus { outline: none; } .screen-ein { animation: screen-ein var(--d-screen) ease-out both; } @keyframes screen-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* --- §6.5: prefers-reduced-motion vollstaendig --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .screen-ein { animation: none; } /* §6.5 nimmt die BEWEGUNG weg, nicht die Information. Hier stand `.wischkarte { transform: none !important }` — das löschte auch die Staffelung der hinteren Karten, und der Stapel lag als ein einziges Rechteck da. Wer reduzierte Bewegung eingestellt hat, sollte trotzdem sehen, dass hinter der obersten Karte noch etwas liegt; das ist eine Auskunft und keine Animation. Die oberste Karte (ohne tief-Klasse) bleibt bei `none` — sie ist die, die unter dem Finger kippt und fliegt. */ .wischkarte:not(.tief2):not(.tief3) { transform: none !important; } } /* --- §19 Desktop ab 1024 px: Spalte bleibt, Navigation wandert nach links --- */ @media (min-width: 1024px) { .huelle { max-width: 430px; } }