@charset "utf-8"; /* =========================================================================== INTER - the brand typeface, self-hosted =========================================================================== Two files, latin subset only. The latin range covers all six languages: German ä ö ü ß, French é è à ç, Italian, Spanish ñ á and Dutch all live in U+0000-00FF, plus Œ œ at U+0152-0153. latin-ext would add the ij ligature and nothing else anyone types here. Variable on the `wght` axis alone, 100 to 900 in one file. That range is the point: the system font reliably offers 400 and 700, Inter offers everything between - and weight is the contrast this design was missing. Italic is loaded, not synthesised. `item.js richtext` turns `*kursiv*` into an ``, so editorial text really is italic; a browser-slanted Inter looks wrong. Served from `web/fonts/`. `scripts/assets.ts` copies everything under `web/` into `dist` after the Astro build, `font-src 'self'` is already in both CSP files and `.woff2` is already in the preview's type table - no plumbing needed for either. =========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); 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: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-italic.woff2") format("woff2"); 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; } /* **The hand on the polaroid** - Caveat, the one face that is not the house face: the name on a polaroid is written, not set. Chosen for its ampersand, which many names carry ("Restaurant & Bar"). Latin subset (all umlauts and French accents are in it), cut to the one weight in use (400), 48 kB, self-hosted like Inter. No preload and no fallback metrics: it sits at the end of the page, in a box of fixed height, so the swap changes shapes and never the layout. */ @font-face { font-family: "Caveat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/caveat-latin-400.woff2") format("woff2"); 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; } /** * **The fallback that holds the line until Inter arrives.** * * The acceptance run measures CLS and it stands at 0. `font-display: swap` * alone would break that: the fallback sets the text, Inter replaces it, and * every line reflows. These four overrides make the fallback occupy the space * Inter will need, so the swap changes the shapes and not the layout. * * **The numbers are measured, not guessed.** Five representative strings - a * name, a place with umlauts, a full sentence, the alphabet with ä ö ü ß - * summed through each font's own advance widths: Inter runs **5.8 % wider * than Arial** and **12.0 % wider than SF Pro**. `size-adjust` closes that * gap; the ascent and descent overrides then restore Inter's own vertical * metrics (1984 / -494 on a 2048 em) on top of the adjusted size. * * **Arial is the anchor because its metrics are identical on macOS and * Windows.** SF Pro would fit a Mac better, but one face cannot serve three * platforms - and being 6 % off everywhere beats being right on one and 12 % * off on the next. Recompute all four whenever the font file changes. */ @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 105.78%; ascent-override: 91.58%; descent-override: 22.80%; line-gap-override: 0%; } /* Farben aus dem Styleguide, Kapitel 3 - nicht erfunden. Weiß ist der Hintergrund, Body die Fließtextfarbe, Schwarz sind Überschriften und primäre Elemente. Die fünf Kategoriefarben sind fest mit ihren Bereichen verknüpft und stehen deshalb NICHT als allgemeine Akzentfarbe zur Verfügung - die Rolle hat Schwarz. =========================================================================== HELL UND DUNKEL - die Regel für alles, was hier dazukommt =========================================================================== **Jede Farbe steht als Wert hier oben, nicht im Bauteil.** Wer irgendwo im Stylesheet ein `#ffffff` oder ein `rgba(0,0,0,.06)` schreibt, baut eine Farbe, die den Dunkelmodus nicht kennt - und der Fehler zeigt sich erst Wochen später bei jemandem, dessen Gerät dunkel steht. Drei Zustände, und alle drei müssen bedient werden: 1. `:root` hell - die vollständige Palette 2. `prefers-color-scheme: dark` die Voreinstellung des Geräts, abgesichert gegen eine ausdrückliche Wahl "hell" 3. `[data-theme="dark|light"]` die ausdrückliche Wahl des Gastes, sie gewinnt in beide Richtungen **Der Navigationsblock ist immer das Gegenteil der Seite.** Deshalb wird er nicht je Modus gesetzt, sondern abgeleitet: `--nav` ist `--strong`, `--nav-ink` ist `--paper`. Hell heißt schwarzer Block mit weißer Schrift, dunkel heißt weißer Block mit dunkler Schrift - eine Regel, zwei Modi, kein zweiter Ort, an dem sie auseinanderlaufen kann. **Eine Ausnahme, mit Grund:** Der Bildnachweis auf dem Foto (`.credit-chip`) trägt feste Farben. Er liegt auf einem Bild und muss dort in beiden Modi lesbar bleiben - ein Nachweis, der im Dunkelmodus dunkel wird, verschwindet auf einem nächtlichen Foto. =========================================================================== */ :root { /* Hell und dunkel werden beide unterstützt - das sagt dem Browser, dass er Formularelemente und Bildlaufleisten mitziehen darf. */ /* Solange nur hell ausgeliefert wird, soll der Browser Formularelemente und Bildlaufleisten auch hell zeichnen. */ color-scheme: light; /** * **Der Einzug - eine Zahl, drei Leser.** * * Er ist der Rand der Seite (`main`), der Innenabstand des Namensetiketts * auf einer Kachel und der Einzug ihrer Fusszeile darunter: Titel und Text * stehen damit auf derselben Kante. Und `--rahmen` rechnet ihn ab * (`min(100vw, --rahmen-breite) - 2 * --inset`) - die zwei Bloecke, die * ueber die Lesespalte hinausgreifen, muessen den Rand kennen, gegen den sie * stossen. **Deshalb steht er hier und nicht als Zahl an `main`:** Zwei * Werte, die uebereinstimmen muessen, sind einer zu viel. */ --inset: 1rem; /* Der schraege Pfeil fuer Verweise nach draussen. Dieselben zwei Pfade wie `ROW_ICON.outside` in `chrome.js` - ein Zeichen, zwei Ausgabewege. */ --icon-external: url('data:image/svg+xml;utf8,'); /** * **Der gerade Pfeil - Lucide `arrow-right` (ISC), Strich und Spitze.** * * Genau die Form, die in der Galerie weiterblaettert (`backIcon()` / * `forwardIcon()` in `item.js`): derselbe Pfad, dieselbe Strichstaerke. Sie * ist damit **das** Zeichen fuer "einen Schritt weiter" im Guide - und weil * gedreht wird und nicht neu gezeichnet, ist "weiter" und "hier geht etwas * auf" dieselbe Form in zwei Lagen. * * Als Token, weil ihn inzwischen drei Stellen brauchen (Textverweis, * Abschnittsverzeichnis, und die naechste kommt). Vorher stand der Pfad * zweimal ausgeschrieben im Stylesheet - zwei Stellen, an denen eine * Strichstaerke auseinandergehen kann. */ --icon-arrow: url('data:image/svg+xml;utf8,'); /** * **The two families, as tokens.** * * `--font` names Inter first, the metric-matched fallback second and the * device font last - three steps, each one a little further from the brand * and each one still the right shape. * * `--mono` used to stand written out **four times** in this file, and in * two different spellings (one of them carried `Consolas`, three did not). * That is "one thing, one place" arguing with itself. One token, five * readers, and the next surface that needs it does not invent a fifth * spelling. */ --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /** * **Die Groesse einer Abschnittsueberschrift** - als Token, weil sie an * mehreren Flaechen gilt und weil eine Zahl, die an zwei Stellen steht, an * einer davon irgendwann eine andere ist. Wer eine Ueberschrift kleiner * braucht (Trefferliste, Farbkasten im Styleguide), setzt dort ihren eigenen * Wert - der Rest liest diesen hier. */ --fs-h2: 1.725rem; /** * **Der Grund, die Flaeche, die weiche Ecke und der Schatten der * Statistikkacheln** - nur im Backend. Als Token, weil ein `rgba()` im * Bauteil im Dunkelmodus in die falsche Richtung zeigt und weil mehrere * Flaechen sie teilen (die Karte, die Kachel darin und das Kurvenquadrat in * der Tabelle). * * **Die Kachel hat keinen Rahmen - ihre Grenze ist der Helligkeitsschritt.** * Ein Strich **und** ein Schatten sind zwei Antworten auf dieselbe Frage, * und der Strich gewinnt sie immer: Man sieht dann einen Kasten mit * Schlagschatten statt einer Flaeche, die liegt. Damit das traegt, muss der * Grund darunter ein anderer sein als die Kachel - deshalb sind es **zwei** * Token und nicht `--paper` fuer beides. Die Kachel ist in beiden Modi die * **hellere** Flaeche; das ist die Aussage „liegt oben", und sie kehrt sich * im Dunkeln nicht um. * * **Der Schatten faellt nach unten und tritt oben nicht aus.** Beide Lagen * tragen einen negativen Spread, der groesser ist, als der Weichzeichner * ueber die Oberkante hinausreicht - `0 8px 18px -6px` beginnt 14 px unter * der Kante und blendet 9 px auf, steht also 5 px **darunter**; zur Seite * sind es 3 px, nach unten 11. Ein Schatten, der oben genauso liegt wie * unten, ist ein Rand mit weicher Farbe; einer, der nur faellt, ist Licht * von vorn oben. Zwei Lagen: eine enge, die die Kachel absetzt, und eine * weite, die sie traegt. Eine einzelne Lage sieht entweder gedruckt oder * schwebend aus. */ --backend-ground: #f8f9fa; --card-ground: #ffffff; --card-radius: .5rem; --card-shadow: 0 1px 2px -1px rgba(16, 24, 32, .10), 0 8px 18px -6px rgba(16, 24, 32, .18); --paper: #ffffff; /* Weiß - Hintergründe */ --ink: #2e363c; /* Body - Fließtext */ --strong: #000000; /* Schwarz - Überschriften, primäre Elemente */ --soft: #6c757d; /* Gray 600 - Sekundärtext */ --line: #e9ecef; /* Gray 200 - Trennlinien */ --accent: #000000; /* primäre Elemente, siehe oben */ /* Ein leiser Grund für Flächen, die auf der Seite liegen (Kartenrahmen, leere Kacheln). Als Token, weil ein rgba() im Bauteil im Dunkelmodus in die falsche Richtung zeigt. */ --shade: #f2f4f6; /* **Der Grund hinter einem ladenden Video** - dunkel in **beiden** Modi, und deshalb ein eigenes Token. Vorher stand dort `--strong`, und das ist im Dunkelmodus Weiß: Zwischen zwei Absätzen blitzte ein weißes 16:9-Rechteck auf, bis der Player kam. Ein Videorahmen ist schwarz, weil ein Bild darin anläuft - das ist keine Aussage über hell und dunkel. */ --videogrund: #12161a; /* **The bar of the guest folder is black in both modes** - it is the roof of an app on the house's phone, not a surface of the page, and a white bar in the dark read as a different app. Its own token, like the video ground: `--nav` turns light in the dark, this does not. */ --mappe-kopf: #000000; /* **The newsletter box on the merchandise page is black in both modes** - it stands among product photos, where the blue of Entdecken would claim a section the page does not belong to. Not `--strong`, which turns white in the dark. */ --merch-post-ground: #000000; /* **The credit on a photo keeps its colours in both modes** - a light chip with dark ink. It lies on a picture, not on the page: `--strong` and `--ink` turn light in the dark, and the i and the credit vanished on the white chip. Same values in the dark block, stated there on purpose. */ --credit-grund: rgba(255, 255, 255, .92); --credit-ink: #000000; /* **The polaroid** - its frame is white because it pictures a photo you hold in your hand; in the dark it is a broken white, since five pure white squares on a dark page glare. The shadow is the documented exception to "cards carry no shadow" (the reason of the voucher: a thing, not a box of the layout) and falls away in the dark, where it would not show. The tape is not a token: four hand-drawn images (`web/polaroid-streifen-.webp`, source `assets/images/polaroid-streifen/`), the same in light and dark, like real tape. */ --polaroid-rahmen: #ffffff; --polaroid-schatten: 0 1px 1px rgba(16, 24, 32, .10), 0 4px 8px -2px rgba(16, 24, 32, .12), 0 18px 32px -12px rgba(16, 24, 32, .30); /* Measured on the model print: the frame runs from white at the top to a light grey at the bottom, the right side lies a little in the shade, a soft band crosses the lower margin, and a hair of an edge runs round. */ --polaroid-rahmen-unten: #f3f3f0; --polaroid-seite: rgba(0, 0, 0, .035); --polaroid-band: rgba(0, 0, 0, .03); --polaroid-kante: rgba(0, 0, 0, .10); /* The photo sits recessed: a fine shade at its upper edge, a line round it, and a faint sheen from the upper left. */ --polaroid-bild-schatten: inset 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .14); --polaroid-glanz: rgba(255, 255, 255, .16); /* The ink of a blue ballpoint, taken from the template (`manuel-polaroid-960.webp`). Not a rubric colour and not a state: it is the pen, and it stays the same in dark mode because the frame stays light (8.6 : 1 on the lower frame, 7.4 : 1 on its dark-mode grey). */ --polaroid-tinte: #2b3c9b; /** * **Die Zustandsfarben - guide-eigen, nicht aus der Marke.** * * Die Marke hat keine Signalfarben: Ihre fuenf Farben sind fest mit den * Kategorien verknuepft (`assets/colors/README.md`) und duerfen nichts * anderes bedeuten - Weinrot heisst "Unterkuenfte" und nicht "abgelehnt". * Diese drei Paare gelten deshalb nur fuer Zustandsmarken und sind * absichtlich gedaempft: Sie sollen neben Forest und Weinrot nicht schreien. * * Als Token und nicht im Bauteil, weil sie im Dunkelmodus anders lauten - * ein aufgehellter Grund wird dort dunkel und die Schrift hell. */ /** * **Der Pfeil der Auswahlfelder** - als Token, weil eine Datenadresse keine * `currentColor` kennt: Im Dunkeln muss ein zweiter Pfeil her, und beide * stehen deshalb dort, wo auch die Farben stehen. */ --chevron: url("data:image/svg+xml;utf8,"); /** * **Wie gross der Pfeil steht** - eine Zahl, zwei Leser: das Auswahlfeld * (`select`) und der Aufklapper mit Haken (`.mehrwahl`). Getrennt getippt * waeren es zwei Pfeile, die man nebeneinander sieht und einzeln nachzieht. * Er steht auf einer Zeile von 1 rem, ist also so hoch wie ein Buchstabe - * kleiner las er sich neben der Schrift als Staubkorn. */ --chevron-groesse: 1rem; /** * **Die Ecke der Bedienteile** - Eingabefeld, Auswahl, Textkasten, Knopf. * * Die Marke sagt `border-radius: 0`, und fuer Flaechen gilt das weiter: * Kachel, Kasten, Schicht, Bild. **Was man anfasst, traegt 4 px** - dieselbe * Zahl, die das Zeichen beim Zeigen schon hatte. Eine Zahl an einer Stelle: * Wer sie aendert, aendert sie fuer alle vier Sorten auf einmal. */ --feld-radius: 4px; /** * **Die Hoehe der Bedienteile** - dieselbe Zahl fuer Feld, Auswahl, * Aufklapper und Knopf. * * Sie stand nur an den Formularfeldern; der Knopf rechnete seine Hoehe aus * Polster und Schriftgroesse (42,4 px), der Aufklapper legte seinen Rahmen * oben drauf (46,8 px), das Feld daneben mass 44,8. Drei Bauteile in einer * Reihe, drei Hoehen - und weil sie unten ausgerichtet stehen, sieht man es * an drei Oberkanten. Eine Zahl, vier Leser. */ --feld-hoehe: 2.8rem; --state-wait-bg: #f4eedd; /* wartet auf Pruefung */ --state-wait-ink: #5b4712; --state-live-bg: #e3ece3; /* steht oeffentlich */ --state-live-ink: #22421e; --state-stop-bg: #f0e4e6; /* nicht freigegeben */ --state-stop-ink: #5e1c24; /* The dot on the bell: something unread. A signal, not a state of an item - so none of the state pairs, and no rubric colour. */ --glocke-punkt: #d93a2b; /** * **The colour of a curve** - one token, every chart in the backend. * * A curve is a **figure**, not a state: `--state-live-*` means "published" * everywhere in the backend - the mark on a row, the toggle for the front * page, the filled month in the year band. Borrowing it for a line would * give one token two jobs, and the next screen puts them side by side. * * It is guide-owned, like the state colours, and for the same reason: the six * brand colours are bound to the categories (`assets/colors/README.md`) and * must not mean anything else - Forest is "Orte", not "views". * * **Two values, both read like text.** 6.4 : 1 on white here, 5.1 : 1 on the * dark ground below - a one-pixel line needs the contrast of a letter, not * of a surface. The area under the line is this colour at 22 %, so it is one * value and not a second one to keep in step. * * **The rule the token cannot enforce:** no curve into a table that carries * the front-page toggle, no state mark into a card that carries a curve. * Today no screen has both, and as colours the two greens are 1.75 : 1 apart * - which is to say: the same green. What keeps them apart is this sentence, * not the fact that they have separate names. */ --chart: #2c6b38; /** * Die Breite der **Lesespalte** - schmaler als der Inhaltsrahmen (1100). * * Bilder, Karten und Kacheln nutzen die ganze Breite; Text nicht. Eine Zeile * von 1100 Pixeln hat gut 130 Zeichen, und beim Zeilenwechsel findet das Auge * den Anfang nicht wieder. **52 rem** sind etwa 85 Zeichen - noch im Bereich, * in dem man ohne Kopfbewegung liest, und auf einem breiten Schirm steht der * Text damit weniger schmal unter einem 1060 px breiten Bild. */ --text: 52rem; /** * **Der Rahmen - ein Mass, als Token.** 68,75 rem sind 1100 px bei der * Grundschrift von 16 px. Sieben Stellen deckeln damit (`main`, Kopf, Fuss, * Buehne, `--rahmen` an Merchandise und Wetter); in Pixeln * geschrieben stuende die Zahl siebenmal und bliebe beim Vergroessern stehen. * * **Die Wurzel steht an jeder Breite bei 16 px** - der Guide skaliert nicht * nach der Fensterbreite. Groesser liest, wer im Fuss die Schriftgroesse * hochstellt (`data-text-size`) oder im Browser zoomt; weil alles in rem * steht, waechst dann Rahmen, Schrift und Abstand in einem Verhaeltnis. */ --rahmen-breite: 68.75rem; /** * **The category colours** - from the brand palette * (`assets/colors/README.md`, `assets/colors/brand-colors.css`), one list * for magazine and guide. * * Uebernachten #8a1a2e sour cherry - the cherry on the Black Forest cake * Geniessen #c99a55 gold * Entdecken #1f4e78 blue * Erleben #1e4a36 silver fir * Orte #6a6258 granite * Menschen #4a2b1c dark chocolate - magazine only * * **Muted, but never black.** The rule behind the values: every colour * stays at least dE 23 away from the body text (`--ink`), because a mark * of 14 to 21 px is a thin stroke, and a dark blue next to black text reads * as black. Cherry and chocolate sit 30 degrees of hue apart, so people is * a brown and not a darker stay. Closest pair within the six: dE 25.4 * (places / people); within the four guide categories: dE 41.4. * * White on the surface measures 6.0 to 12.7 : 1 - gold excepted, see below. */ --rubrik-stay: #8a1a2e; --rubrik-eat: #c99a55; --rubrik-discover: #1f4e78; --rubrik-experience: #1e4a36; --rubrik-places: #6a6258; --rubrik-people: #4a2b1c; /** * **One colour, two lightnesses - and only gold needs the second.** * * `--rubrik-eat` is the surface colour: the white drawing of the mark sits * on it. As **ink on paper** it measures 2.55 : 1 against white and fails * both thresholds - 3 : 1 for a graphic, 4.5 : 1 for text. * * `#87602a` is the same hue (36 vs. 35 degrees, saturation 0.52 vs. 0.53); * only the lightness drops from 0.56 to 0.35. That gives **5.62 : 1**. Same * construction as the state pairs of the house, for the same reason: what * sits on a surface and what sits on paper are two jobs for one colour. * * Read through a fallback (`var(--rubrik-eat-ink, var(--rubrik-eat))`, as * `--rf-voll` does): whoever adds a mark has nothing to do; * whoever picks a light colour adds an ink. */ --rubrik-eat-ink: #87602a; /** * **Die Hoehe eines Reglers - 2,25 rem (36 px), ueberall.** * * Der Umschalter „Liste / Karte" und die Rubrikfelder daneben sind das, was * auf dem Telefon mit dem Daumen getroffen wird. 36 px ist die Hoehe, bei der * vier Kreise **und** der Umschalter auf 375 px noch in **eine** Zeile * passen - bei 40 taten sie es nicht, und die Reihe brach um. Sie steht als * Zahl an **einer** Stelle, weil zwei Bauteile sie teilen und in einer Reihe * nebeneinander stehen: Zwei Werte waeren zwei Hoehen in einer Zeile, und * das sieht man sofort. * * **In rem, nicht in px:** Der Umschalter traegt Schrift und waechst mit * einer groesseren Browserschrift ueber seine Mindesthoehe hinaus; Kreise in * px blieben dann kleiner als er. In rem wachsen alle Regler gemeinsam. */ --regler-hoehe: 2.25rem; /** * **Die Miniatur vor einer Zeile - ein Mass fuer alles.** * * Ein Eintrag stand in der Gaestemappe auf 64 px, eine Veranstaltung ueberall * auf 44 - dieselbe Sorte Zeile mit zwei Bildgroessen, und im selben Fenster * untereinander sah man es sofort. **60 px** ist die eine Zahl: Bei 44 * verschwindet ein Primärbild, bei 64 draengt es den Namen. * * Gelesen von der Terminzeile, der Liste der Mappe und den Nachbarorten - * und von den `width`/`height` am `img`, damit der Platz vor dem Laden * freigehalten wird. Stimmt die Zahl dort nicht mit dieser ueberein, springt * die Zeile beim Laden. * * **Und sie tragen eine kleine Rundung** (`--thumb-radius`, 4 px) - dasselbe * Mass wie das Primärbild in der Trefferliste und der Platzhalter der * Terminzeile. Eckig neben den runden Bedienteilen wirkte die Zeile haerter, * als sie ist; rund waere es ein Portraet, und das ist es nicht. */ --thumb: 60px; /** * **The search layer has its own, smaller square: 44 px** - the size of the * picture in the backend tables. A suggestion is two short lines, name and * place, together about 44 px high; a 60 px picture made the row taller than * its text and put fewer results on a phone screen. The 60 above holds where * the picture carries the information - calendar, "Was ansteht", folder, * neighbouring places. No event row stands in the search, so the two sizes * never stand one under the other. */ --such-thumb: 44px; --thumb-radius: 4px; /* The gap between the quiet line and the name in a list row - event row, folder list. One number, so the two lists breathe alike. */ --zeile-abstand: .3rem; /* Abgeleitet: der Block ist das Gegenteil der Seite. */ --nav: var(--strong); --nav-ink: var(--paper); /** * **Text on the picture has its own token.** `--nav-ink` is derived and * turns dark in the dark theme - on a photograph that is dark text on a * dark picture. A photo has no light and dark: the ink on the stage is * white, in both themes. */ --auf-bild-ink: #ffffff; } /** * =========================================================================== * **DAS ZWEITE RAHMENMASS - ab 84 rem, und es gibt genau einen Grund dafuer** * =========================================================================== * * Ab 1344 px steht die **dritte Kachel** je Reihe, und der Rahmen waechst * dafuer von 1100 auf 1280 px. Am 1100er Rahmen waere die dritte Kachel * 332 px breit und ihr Foto darin 302 - schmaler als das **Nebenbild** einer * Eintragsseite (`SIZES.galerie`, 350). Ein Aufmacher in einer Liste darf nicht * kleiner sein als ein Beiwerk auf der Detailseite. * * **1280 und nicht mehr**, gerechnet an `BILD_BREITEN` (370 · 740 · 1110 · * 1480): Bei 1280 misst das Foto im Abzug 357 px und holt die 370er Fassung, * auf einem feinen Schirm die 740er. Bei 1324 misst es 370,1 - eine * Zehntelpixel ueber der Stufe, und der Browser holt 740 bzw. 1110. **Das * doppelte Gewicht fuer vier Prozent mehr Bild.** Die Zahl ist damit nicht * gegriffen, sondern die letzte, die in die guenstige Stufe faellt. * * **Eine Zahl schaltet beides** - Rahmen und Spaltenzahl (siehe das * Kachelraster weiter unten). Zwei Zahlen waeren eine Breite, an der drei * Kacheln in einem 1100er Rahmen stehen, und genau die ist zu schmal. * * **Und der Punkt liegt ueber dem Mass, nicht darauf.** Schaltete er bei * 80 rem, waere die Seite bei genau 1280 px randlos: Rahmen gleich Fenster, * Ueberschrift und Fuss klebten an beiden Kanten. Bei 84 rem bleiben im * schmalsten Fall 32 px Luft je Seite, und von dort waechst sie mit dem * Fenster. * * **Eine Kante, nicht zwei:** Kopf, Fuss, Buehne, `main` und die zwei * `--rahmen`-Rechnungen lesen alle dieses eine Token und wandern mit. Nur das * Raster zu verbreitern hiesse, dass Ueberschrift, Zaehlzeile, Suchzeile und * Reiter 58 px innerhalb der Kachelkante stuenden - und auf der Ergebnisseite * waere die Karte, die derselbe Reiter zeigt, schmaler als die Liste. * * **Der Preis, offen:** Das Kopfbild einer Eintragsseite waechst von 1068 auf * 1440 px, und die groesste Fassung bleibt 1480 - viel Luft nach oben bleibt * da nicht. Vier `sizes`-Angaben ziehen mit (`SIZES` in `web/item.js`), sonst * holt der Browser zu klein und niemand sieht warum. * * **Und der Rahmen ist breiter als sein eigener Schaltpunkt.** Zwischen 84 rem * (1344 px) und 92 rem (1472 px) deckelt nicht mehr der Rahmen, sondern das * **Fenster**: Dort steht der Inhalt randlos bis auf die zwei `--inset`. Wer * die Seite auf einem 1366er Schirm ansieht, sieht sie also ohne den Rand, den * sie darunter und darueber hat. Deshalb tragen drei `sizes`-Angaben fuer * dieses Band eine eigene Stufe mit `calc(100vw - …)` - eine feste Zahl waere * dort entweder zu gross oder zu klein. */ @media (min-width: 84rem) { :root { --rahmen-breite: 92rem; } } /* =========================================================================== DUNKEL IST VORBEREITET, ABER NICHT AKTIV =========================================================================== Entschieden am 03.09.2026: Der Umschalter ist wieder draußen, und die automatische Umschaltung nach Geräteeinstellung bleibt **abgeschaltet**. Nicht weil sie nichts wert wäre - Fotos wirken auf dunklem Grund besser -, sondern weil eine zweite Erscheinung zweimal geprüft werden muss: Karte, Bildnachweis, Schräge, Fuß. Ein dunkles Aussehen, das niemand angesehen hat, ist schlechter als ein helles, das stimmt. Der Styleguide sagt bisher dasselbe: „Kein Dunkelmodus - die Seite steht auf Weiß." **Was bleibt:** die Palette und die Regel, dass jede Farbe ein Token ist. Das Anschalten ist damit ein Handgriff an genau einer Stelle - `light dark` in `color-scheme`, und den Block unten von `[data-theme="dark"]` auf `@media (prefers-color-scheme: dark)` umstellen. Wer neue Bauteile baut, hält sich weiter an die Token: Sonst ist der Handgriff später eine Suche. =========================================================================== */ :root[data-theme="dark"] { --paper: #12161a; --ink: #dfe4e7; --strong: #ffffff; --soft: #98a1a8; /* Im Dunkeln traegt ein Schatten kaum - er wird deshalb tiefer. Die Grenze der Kachel macht hier ohnehin der Helligkeitsschritt: Der Grund bleibt der dunkelste Wert, die Kachel steht eine Stufe darueber. */ --backend-ground: #12161a; --card-ground: #1b2126; --card-shadow: 0 1px 2px -1px rgba(0, 0, 0, .6), 0 10px 22px -8px rgba(0, 0, 0, .55); --line: #2a3237; --accent: #ffffff; --shade: #1b2126; --credit-grund: rgba(255, 255, 255, .92); --credit-ink: #000000; --polaroid-rahmen: #e0e0dc; --polaroid-schatten: none; --polaroid-rahmen-unten: #d6d6d1; --polaroid-seite: rgba(0, 0, 0, .10); --polaroid-band: rgba(0, 0, 0, .06); --polaroid-kante: rgba(0, 0, 0, .30); --polaroid-bild-schatten: inset 0 1px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .25); --polaroid-glanz: rgba(255, 255, 255, .07); --chevron: url("data:image/svg+xml;utf8,"); --state-wait-bg: #38311c; --state-wait-ink: #e4d2a4; --state-live-bg: #1e2e1c; --state-live-ink: #bdd9b9; --state-stop-bg: #382126; --state-stop-ink: #e9b9c0; --glocke-punkt: #ff6a5a; --chart: #55965b; } * { box-sizing: border-box; } /** * **`hidden` bedeutet weg.** * * Der Browser setzt dafuer `display: none` - aber jede eigene `display`-Regel * ueberstimmt das, weil sie spezifischer ist. Bei einer Veranstaltung nahm die * versteckte Wetterzeile deshalb weiter ihren Abstand ein: unsichtbar, aber * nicht weg. Diese Zeile stellt es fuer alle Bauteile klar - und `!important` * ist hier richtig, weil es keinen Fall gibt, in dem `hidden` etwas anderes * heissen soll. */ [hidden] { display: none !important; } /** * =========================================================================== * **EIN VERWEIS IST SCHWARZ UND UNTERSTRICHEN** - einmal, global * =========================================================================== * * Bis zum 04.09.2026 gab es diese Regel **nirgends**: Ein `` ohne Klasse * war blau, wie der Browser ihn liefert, und jedes Bauteil setzte seine eigene * Fassung - `.bk-inhalt a`, `.place .where a`, `.wie-link`, * und in der Bilderschicht ein blauer Verweis auf die Teilnahmebedingungen * mitten in schwarzer Schrift. Dreizehn Stellen mit derselben Absicht und * dreizehn kleinen Abweichungen. * * Jetzt steht sie hier: **schwarz, unterstrichen, beim Zeigen dicker.** Der * Unterstrich ist die Form des Verweises im Fliesstext - er soll dort auch * ohne Farbe zu erkennen sein. * * **Was kein Verweis im Text ist, traegt keinen Strich.** Ein Knopf, eine * Kachel, eine Zeile der Huelle, der Fuss: Sie sind Flaechen, die man * anklickt, und ein Unterstrich darin sieht aus wie ein Fehler. Die Liste * darunter ist deshalb keine Ausnahmensammlung, sondern die Grenze zwischen * **Text** und **Bedienung** - und sie steht an derselben Stelle wie die Regel, * damit man beim Lesen sieht, wo sie endet. */ a { color: var(--strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; } a:hover, a:focus-visible { text-decoration-thickness: 2px; } .action, .backsquare, .chrome-nav a, .foot a, .card a, .card-visual, .nav-row, .nav-konto-zeile, .nav-brand, .textlink, .photo-link, .reiter, .hb-nav a, .bk-nav a { text-decoration: none; } /* Und im Fliesstext dieser Flaechen gilt die Regel wieder - eine Kachel ohne Strich kann einen Satz mit einem Verweis darin enthalten. */ .card p a { text-decoration: underline; } body { margin: 0; background: var(--paper); color: var(--ink); /* 1 rem and not 16 px: the base type follows `html` - the footer's text size and the browser's zoom both grow it with everything else in rem. As a pixel value it would stay put. */ font: 1rem/1.55 var(--font); } /* Header und Footer laufen über die volle Breite, ihr Inhalt bleibt beim Rahmen (`--rahmen-breite`) - wie bei tirol.at. Ohne Änderung am Markup: die Kinder bekommen die Breite. */ /* Abstand nach oben, damit nichts hinter dem Navigationsblock und dem Zurueck-Quadrat beginnt. Die Buehnen der Startseite und der Ortsseiten liegen ausserhalb von `main` - sie sollen ja bis unter die Leiste laufen. **Auf dem Telefon derselbe Abstand.** Hier stand ein rem mehr fuer schmale Schirme, weil der Navigationsblock dort fast so breit ist wie der Schirm. Er ist es nicht mehr - und ein Vorsprung, den nichts mehr braucht, ist eine Stufe zwischen zwei Breiten ohne Bedeutung. */ main { max-width: var(--rahmen-breite); margin: 0 auto; padding: 1.6rem var(--inset) 0; } /* **Es gibt ein Mass, und das ist der Rahmen** (`--rahmen-breite`, 1100 px). Auch die vier Seiten, auf denen man blaettert statt liest (Startseite, Ergebnisseite, Ortsseite, Magazin), gehen nicht weiter hinaus. Ein zweites, breiteres Mass hatte genau einen Grund: eine **dritte** Kachel je Reihe, die im 1100er Rahmen zu schmal geworden waere. Die Reihe bricht bei zwei, also ist der Grund weg - und ein zweiter Rahmen ohne Grund ist eine Kante, die auf jeder dieser Seiten anders laeuft als Fuss, Gattungsband und Kopfzeile. */ header, footer { width: 100%; } header > * { max-width: var(--rahmen-breite); margin-left: auto; margin-right: auto; padding: 0 1.25rem; } header { margin-bottom: 1.6rem; padding-top: .2rem; } /* --------------------------------------------------------------------------- Der Fuss - nach der Vorlage von tirol.at, in Schwarz. Oben die Netzwerke, darunter zwei Spalten mit viel Luft: links Kontakt und Pflichtseiten, rechts "Infos & Stories". Jede Zeile traegt ihr Zeichen an der rechten Spaltenkante - Pfeil nach rechts bleibt im Guide, schraeger Pfeil fuehrt hinaus. --------------------------------------------------------------------------- */ footer.foot { background: var(--nav); color: var(--nav-ink); border: 0; /* Die Schraege schneidet oben links ab; darunter scheint die Seite durch. */ clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); /* `--fuss-unter` is how far the footer slides under what stands above it - zero, except below the polaroids. The padding grows by the same amount, so the social icons keep their distance from the slant either way. */ --fuss-unter: 0rem; /* `--fuss-luft` is the air between the slant and the first line. On the screen the slant itself is wide (5vw), so less air on top of it. */ --fuss-luft: 4rem; margin-top: calc(3.5rem - var(--fuss-unter)); padding: calc(5vw + var(--fuss-unter) + var(--fuss-luft)) 0 2.6rem; /** * **Die Hoehenlinien liegen dahinter** - dieselbe Datei wie im Theme * (`assets/images/topographic-map.svg`), hier als `web/hoehenlinien.svg`. * * Die Linien im SVG sind **weiss mit 15 Prozent Deckung**: Sie werden nur auf * dunklem Grund sichtbar, und genau dafuer sind sie gemacht. Deshalb steht * die Farbe zuerst und das Bild darueber - keine zweite Fassung fuer hell. * * `cover` und `center`: Das Muster ist eine Flaeche, kein Motiv; es darf * beschnitten werden, aber nicht kacheln - eine sichtbare Wiederholung waere * ein Raster und keine Landschaft. */ background-image: url("hoehenlinien.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } @media (min-width: 64rem) { footer.foot { --fuss-luft: 1.5rem; } } footer.foot .foot-inner { max-width: var(--rahmen-breite); margin: 0 auto; padding: 0 1.25rem; display: grid; gap: 3.2rem; } /* Die Zeichen der Netzwerke sind flaechenbasiert (wie im Theme) - die Farbe kommt aus `fill`, nicht aus `stroke`. */ .foot-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem; } .foot-social a { display: inline-flex; padding: .2rem; } .foot-icon { width: 1.15rem; height: 1.15rem; fill: color-mix(in srgb, var(--nav-ink) 80%, transparent); } .foot-social a:hover .foot-icon, .foot-social a:focus-visible .foot-icon { fill: var(--nav-ink); } /** * **Das Aufnaeher-Zeichen am rechten Ende der Netzwerkzeile** - nur auf dem * Desktop. * * Es ist viermal so gross wie die Zeichen daneben (1.15rem x 4): gross genug, * um die Marke zu sein, und klein genug, um die Zeile nicht zu sprengen. Auf * dem Telefon faellt es weg - dort ist die Zeile schon voll, und ein Zeichen, * das umbricht, steht nicht mehr am Rand, sondern im Weg. * * Als **Maske** und nicht als Bild: So nimmt das Zeichen `--nav-ink` an und * stimmt in hell, dunkel und System, ohne zwei Dateien und ohne eine Regel, die * weiss, welcher Zustand gerade gilt. Dieselbe Ueberlegung wie bei den * Netzwerkzeichen, die ihre Farbe aus `fill` beziehen. * * **Die Quelle muss die weisse Fassung sein** (`logo_bfp-patch-white.svg`). * Eine Maske liest die Deckung, nicht die Farbe - und die schwarze Fassung ist * eine schwarze Scheibe mit weisser Zeichnung darauf. Ihre Deckung ist damit * der volle Kreis, und genau das war zu sehen: eine hellgraue Kreisflaeche * ohne Zeichen. Die weisse Fassung hat keinen Grund, nur die Zeichnung - 36 % * der Flaeche statt 73 %. */ .foot-line { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; } .foot-patch { display: none; } @media (min-width: 46rem) { /** * **Am rechten Rand** - so entschieden am 03.09.2026, nachdem es kurz an der * rechten Spalte darunter ausgerichtet stand. * * Das Raster des Fusses waere die naheliegende Kante gewesen, aber das * Zeichen gehoert nicht in eine der beiden Spalten: Es ist die Absendermarke * der ganzen Seite, und die steht aussen. Die Netzwerkzeichen links, das * Zeichen rechts - die Zeile spannt damit den Rahmen auf, in dem alles * andere darunter liegt. */ .foot-patch { display: block; flex: none; width: 4.6rem; height: 4.6rem; /* Full ink, not a mix: on the black footer that is white, and the patch is the sender's mark - greyed down it read as a disabled icon. */ background: var(--nav-ink); -webkit-mask: url(logo-patch.svg) center / contain no-repeat; mask: url(logo-patch.svg) center / contain no-repeat; } } .foot-two { display: grid; gap: 2.6rem; } /* Untereinander steht „Infos & Stories" **zuerst**: Newsletter, Magazin, Merch sind Wege weiter ins Angebot, Impressum und Datenschutz sind der Abschluss. Nebeneinander liest man beide Spalten gleichzeitig, da bleibt Kontakt links. */ /* **Nach dem Namen, nicht nach der Position.** `:last-child` traf seit dem Themenblock nicht mehr "Infos & Stories", sondern die Themen - der Fuss stand damit auf dem Telefon in der falschen Reihenfolge, und der Block sprang beim Nachladen an den Anfang. */ .foot-two > #foot-infos { order: -1; } @media (min-width: 46rem) { /* Drei Spalten, sobald es die Themen gibt - `:has` fragt das Dokument, nicht das Skript: Fehlt der Block (keine Themenseite), bleiben es zwei. */ .foot-two { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; } .foot-two:has(#foot-topics:not([hidden])) { grid-template-columns: repeat(3, 1fr); } .foot-two > #foot-infos { order: 0; } } /* Die Ueberschrift ist fett und so gross wie die Zeilen darunter - kein Kleingedrucktes in Grossbuchstaben. */ .foot-title { margin: 0 0 1.6rem; font-size: 1.05rem; font-weight: 700; } /* **Die zweite Ueberschrift in derselben Spalte** (10.09.2026): Unter den Themen stehen die Orte - beides Wege in den Bestand, die quer zur Taxonomie liegen, und beide gehoeren deshalb in dieselbe Spalte. Sie braucht Luft nach oben, sonst klebt sie an der letzten Zeile darueber; eine eigene Spalte waere bei vier Gemeinden eine halbe leere. */ .foot-title-zwei { margin-top: 2rem; } .foot-block ul { list-style: none; margin: 0; padding: 0; } /* Eine Zeile: Text links, Zeichen rechts an der Spaltenkante. Die ganze Zeile ist die Klickflaeche - ein Pfeil allein ist ein zu kleines Ziel. */ /** * **Beide Spalten haben denselben Zeilenabstand.** * * Vorher stand links 0.98rem und rechts 1.05rem, dazu unterschiedliche * Zeilenhoehen aus der Schriftart heraus: 42 gegen 44 Pixel je Zeile. Bei der * ersten Zeile faellt das nicht auf, bei der vierten stehen die Spalten * dreissig Pixel auseinander - und der Fuss sieht aus, als waere er * zusammengeschoben. * * Die Groesse ist deshalb hier festgelegt und die Zeilenhoehe **fest** * (`line-height: 1.5`, kein `normal`): So bestimmt die Schriftart die Hoehe * nicht mehr mit. Der Unterschied zwischen den Spalten bleibt trotzdem * sichtbar - er liegt im Schriftschnitt (fett rechts), und der aendert die * Hoehe nicht. */ .foot-row { font-size: 1rem; } .foot-row > a, .foot-row > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .55rem 0; line-height: 1.5; text-decoration: none; /* **Etwas graeulicher als die Ueberschrift.** Die Ueberschrift steht in vollem Weiss, die Zeilen darunter gedaempft: So ist auf einen Blick zu sehen, was Titel ist und was Weg. Bei gleicher Helligkeit verschwimmt die Spalte zu einer Liste ohne Kopf. Beim Zeigen wird die Zeile hell - dann ist sie das, worauf man gerade zielt. */ color: color-mix(in srgb, var(--nav-ink) 68%, transparent); } /* Beim Zeigen wird die Zeile **hell** - und nicht unterstrichen. Der Wechsel von gedaempft zu weiss ist im Footer die deutlichere Antwort: Eine Linie unter einer Zeile, die ohnehin ihre eigene Reihe hat, ist Zierde. */ .foot-row a:hover, .foot-row a:focus-visible { color: var(--nav-ink); } .foot-row-icon { width: 1.05rem; height: 1.05rem; flex: none; } /* Die rechte Spalte steht fett - dort liegen die Wege, nicht die Pflichten. **Nur fett, nicht groesser:** Die Groesse bestimmt den Zeilenabstand, und der muss in beiden Spalten derselbe sein. */ .foot-strong .foot-row { font-weight: 700; } /* **The build stamp** - the last line of the footer, in the footer's own small type: it says which version is served. */ /* The last row of the footer: light/dark, text size, then the version. It wraps on a phone instead of running out of the frame. */ .foot-unten { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; margin: 0; } /* **Light/dark carries its word before the sign** - the word is its name. The text size beside it: word, minus, value, plus - in the footer's small type and its muted ink, like the stamp. */ /* The same small type as the stamp beside them - one row, one size. */ .foot-thema, .foot-schrift { font-size: .82rem; line-height: 1.55; } /* **Only the sign sits on a ground** - the word before it is its label, not part of the round shape. The signs carry a faint ground at rest, so they read as buttons, and a stronger one under the pointer and in focus. */ .foot-thema { display: inline-flex; align-items: center; gap: .45rem; padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--nav-ink) 70%, transparent); font-family: inherit; cursor: pointer; } .foot-schrift { display: inline-flex; align-items: center; gap: .3rem; color: color-mix(in srgb, var(--nav-ink) 70%, transparent); } .foot-schrift > span { margin-right: .2rem; } .foot-schrift-wert { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; } .foot-zeichen, .foot-schrift-knopf { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--nav-ink) 10%, transparent); color: inherit; cursor: pointer; /* A change of colour, not a movement - no rule for reduced motion. */ transition: background-color .15s, color .15s; } .foot-thema:hover, .foot-thema:focus-visible, .foot-schrift-knopf:hover:not(:disabled), .foot-schrift-knopf:focus-visible { color: var(--nav-ink); } .foot-thema:hover .foot-zeichen, .foot-thema:focus-visible .foot-zeichen, .foot-schrift-knopf:hover:not(:disabled), .foot-schrift-knopf:focus-visible { background: color-mix(in srgb, var(--nav-ink) 22%, transparent); } .foot-thema:focus-visible .foot-zeichen, .foot-schrift-knopf:focus-visible { outline: 2px solid var(--nav-ink); outline-offset: 2px; } .foot-thema:focus-visible { outline: none; } .foot-schrift-knopf:disabled { opacity: .35; cursor: default; } .foot-zeichen .nav-icon, .foot-schrift-knopf .nav-icon { width: 1.05rem; height: 1.05rem; flex: none; } @media (pointer: coarse) { .foot-zeichen, .foot-schrift-knopf { width: 2.75rem; height: 2.75rem; } } /* **The text size of the root** - set from the footer (`textSizeBind` in `chrome.js`). The guide is set in rem, so everything grows with it. The head of the page - the block with mark and menu, the magnifier and the way back - is set in `--chrome-rem`: on a wide screen that is the rem and grows along, on a phone it is one rem of the browser whatever the step (`--text-scale` undoes it). There they share one row, and grown they ran into each other. */ html { --text-scale: 1; --chrome-rem: 1rem; } html[data-text-size="112.5"] { font-size: 112.5%; --text-scale: 1.125; } html[data-text-size="125"] { font-size: 125%; --text-scale: 1.25; } html[data-text-size="137.5"] { font-size: 137.5%; --text-scale: 1.375; } html[data-text-size="150"] { font-size: 150%; --text-scale: 1.5; } /* **On a phone the steps end at 125 %** - above it a line holds three words. A larger step chosen on a wide screen counts as 125 % here (`TEXT_SIZE_PHONE` in `chrome.js` says the same to the buttons). */ @media (max-width: 45.99rem) { html { --chrome-rem: calc(1rem / var(--text-scale)); } html[data-text-size="137.5"], html[data-text-size="150"] { font-size: 125%; --text-scale: 1.25; } } .foot-stand { margin: 0; font-size: .82rem; line-height: 1.55; color: color-mix(in srgb, var(--nav-ink) 55%, transparent); } /* **Die Sprache im Footer.** Ein Griff, der aussieht wie eine Fusszeile und sich verhaelt wie ein Knopf: Zeichen, Name der Sprache, sonst nichts. */ .foot-lang { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: .4rem 0; cursor: pointer; font: inherit; font-size: .95rem; color: color-mix(in srgb, var(--nav-ink) 68%, transparent); } .foot-lang:hover, .foot-lang:focus-visible { color: var(--nav-ink); } .foot-lang:focus-visible { outline: 2px solid var(--nav-ink); outline-offset: 3px; } .foot-lang .nav-icon { width: 1.05rem; height: 1.05rem; } /* Die Flagge: ein kleiner Kreis vor dem Namen. Feste Groesse, damit die Zeile nicht springt, waehrend die Datei noch laedt. */ .flag { width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%; display: block; } /* **Im Fuss so gross wie die Weltkugel daneben** (05.09.2026): Zwei runde Zeichen in einer Zeile, eines merklich groesser - das las sich wie ein Fehler. Jetzt beide 1,05 rem. */ .foot-lang .flag { width: 1.05rem; height: 1.05rem; } /* **Die Flagge im Layer ist gemessen, nicht gewaehlt** (18.09.2026): Sechs Zeilen, ein Titel und die Polster des Kastens muessen in das Quadrat von 30 rem passen - mit 1,4 rem Flagge, 1,15 rem Schrift und .9 rem Polster je Zeile waren es 31 rem, und das Quadrat bekam einen Rollbalken fuer eine Liste, die man **ganz** sehen soll. Jetzt sind es rund 26 rem. */ .langlayer .flag { width: 1.2rem; height: 1.2rem; } /* Der Layer dahinter - dieselbe Bauart wie die Bildergalerie: ein ``, weisser Grund, das schwarze Quadrat mit dem X in der Ecke. Eine Sprache ist keine Einstellung unter vielen, sondern die Fassung, in der man liest; ein Layer haelt kurz an und fragt, eine Aufklappliste tut das nicht. */ .langlayer { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; border: 0; padding: 0; margin: 0; background: var(--paper); color: var(--ink); display: none; } /** * **Der Inhalt steht oben, nicht in der Mitte.** * * Senkrecht zentriert sah eine kurze Liste aus wie ein Versehen: Auf dem * Vollbild der schmalen Fassung lagen ueber „Wo suchst du?" rund 230 leere * Pixel, und wer im Suchfeld tippt, sieht seine Treffer nach unten wandern, * weil die Mitte mitwandert. Oben steht der Anfang da, wo er hingehoert, und * die Liste waechst nach unten, ohne dass sich etwas anderes bewegt. * * Waagerecht bleibt es mittig - das ist die Spalte, nicht die Lage. * * Der Abstand nach oben ist das schwarze Quadrat mit dem X * (`--navheight`, 3,7 rem) plus Luft: Darunter faengt der Text an, statt * daneben zu stossen. */ .langlayer[open] { display: grid; align-content: start; justify-items: center; padding-block: calc(var(--navheight, 3.7rem) + 1.2rem) 2.5rem; } .langlayer::backdrop { background: color-mix(in srgb, var(--paper) 92%, transparent); } .langlayer-close { position: absolute; top: 0; right: 0; } .langlayer-inner { width: min(24rem, calc(100% - 3rem)); } /* **In normaler Schreibweise.** Versalien mit Sperrung waren eine zweite Typografie fuer ein einziges Wort - und ein Wort, das man in Grossbuchstaben setzt, liest sich lauter, als es gemeint ist. Es ist eine Ueberschrift ueber vier Zeilen, kein Signal. */ .langlayer-title { margin: 0 0 1rem; font-size: .95rem; color: var(--soft); } .langlayer ul { list-style: none; margin: 0; padding: 0; } .langlayer li + li { border-top: 1px solid var(--line); } .langlayer a { display: flex; align-items: center; gap: .8rem; padding: .55rem .2rem; color: var(--ink); text-decoration: none; font-size: 1.05rem; } .langlayer a > span { flex: 1; } .langlayer a:hover, .langlayer a:focus-visible { background: var(--shade); } .langlayer a[aria-current="true"] { font-weight: 700; } /* **Ohne Zeigegeraet bleibt die Zeile gross.** Das enge Mass oben ist die Antwort auf das Quadrat am Schirm; auf dem Telefon ist die Schicht der ganze Bildschirm, dort gibt es den Platzmangel nicht - und ein Daumen trifft 44 px, keine 43. */ @media (pointer: coarse) { .langlayer a { padding: .8rem .2rem; } } /* Das Haekchen an der gewaehlten Sprache - eine Spur groesser als die Grundgroesse der Zeichen, damit es die Zeile abschliesst und nicht nur danebensteht. */ .langlayer a .nav-icon { width: 1.15rem; height: 1.15rem; } /** * **On a screen a box in the middle, as tall as its content.** * * On a phone a layer is the whole screen, because there is no other. On a * screen the same would let a choice of three lines clear a 27-inch monitor. * The action is small, so the surface is small - and it ends where its list * ends: a fixed square left a band of empty paper under three languages. * * It is the same box as `.schicht`: black frame, light ground, a dark ground * behind it instead of almost opaque paper - so it lies visibly **on** the * page instead of replacing it. The place picker shares the construction * (`class="placelayer langlayer"`, `app.js`) and may grow wider. */ @media (min-width: 48rem) { .langlayer { inset: 0; margin: auto; /** * **`fit-content`, not `auto`** - the difference between "as tall as the * content" and "stretch". A fixed element with `inset: 0` has a top * **and** a bottom edge; with `height: auto` the browser derives the * height from both and fills the space. `fit-content` takes the measure * from the content, and `margin: auto` centres it - both work because * `inset: 0` knows both edges. `max-height` keeps a long list inside the * window. */ width: min(30rem, 90vw); height: fit-content; max-height: 90vh; border: 1px solid var(--strong); } .langlayer::backdrop { background: rgb(0 0 0 / .55); } .langlayer-inner { width: min(20rem, calc(100% - 3rem)); } .placelayer.langlayer .langlayer-inner { width: calc(100% - 3rem); } } footer.foot .note { margin: 0; font-size: .78rem; color: color-mix(in srgb, var(--nav-ink) 55%, transparent); } /* Der Navigationsblock. **Nicht durchgezogen** - ein dunkler Block oben rechts, der an der Oberkante sitzt, und daneben Weiss. Ein Balken ueber die ganze Breite macht aus dem Kopf ein Band; ein Block macht daraus eine Ecke, in der die Navigation wohnt. Er traegt zwei Dinge: das Zeichen und den Knopf. Das Zeichen fuehrt nach Hause - das Wortzeichen GUIDE ist entfallen, und ein Kopf ohne Weg zurueck waere eine Sackgasse. Ins Magazin geht es aus dem Aufklapper. */ /* **Klebend, und ganz rechts.** Der Block bleibt beim Scrollen oben stehen. Damit das ueber die ganze Seite gilt, sitzt er als eigenes Kind des Dokuments neben dem Kopf und nicht darin - ein klebendes Element klebt nur, solange sein umgebender Kasten sichtbar ist. Der klebende Rahmen laeuft ueber die volle Breite, weil der Aufklapper sie braucht. Damit er nicht die oberen 70 Pixel der Seite gegen Klicks abschirmt, nimmt er selbst keine Klicks an - nur seine Kinder tun es. */ .chrome-nav { position: sticky; top: 0; z-index: 20; pointer-events: none; /* Die Hoehe des Blocks steht an **einer** Stelle. Der Layer setzt sein X mit demselben Wert, damit es genau dort erscheint, wo der Hamburger war - zwei getippte Zahlen waeren zwei Zahlen, die irgendwann auseinandergehen. */ --navpad: calc(.8 * var(--chrome-rem)); } /* Klicks nehmen **nur** die beiden Kaesten an, die wirklich etwas tun. Auf die Zwischenschichten (`.navbar`, `.bar`) darf es nicht zurueckgesetzt werden: Die laufen ueber die volle Breite, und dann liegt eine unsichtbare Platte von 70 Pixeln Hoehe ueber dem Anfang der Seite. */ .chrome-nav .nav, .chrome-nav .nav-layer { pointer-events: auto; } /* Ganz rechts heisst an der Fensterkante, nicht an der Textkante: Der Block haengt an der Ecke des Bildschirms, nicht an der Spalte des Inhalts. */ .navbar { padding: 0; } .navbar > .bar { max-width: none; } .bar { display: flex; justify-content: flex-end; } .claim { color: var(--soft); font-size: .85rem; margin: 1rem 0 1.2rem; } /* Im Block nur zwei Dinge: das Zeichen und der Knopf. Die Wege stehen im Aufklapper - eine Leiste mit sechs Beschriftungen ist eine Liste, kein Kopf. */ /* **Enger um das Zeichen** (04.09.2026): Der schwarze Kasten trug links und rechts 1,25 rem und zwischen Zeichen und Knopf 1,1 rem - zusammen mehr Luft als das Zeichen hoch ist, und der Kasten wirkte dadurch breiter als sein Inhalt. Jetzt .8 rem aussen und .7 rem dazwischen: Zeichen und Knopf gehoeren sichtbar zusammen, ohne sich zu beruehren. */ .nav { display: flex; align-items: center; gap: calc(.7 * var(--chrome-rem)); background: var(--nav); padding: var(--navpad) calc(.8 * var(--chrome-rem)); } .nav-brand { display: inline-flex; padding: calc(.2 * var(--chrome-rem)) calc(.3 * var(--chrome-rem)); } /* Das Querzeichen der Marke. Ueber die Hoehe gesetzt, nicht ueber die Breite - das Verhaeltnis ist 272 zu 32, und eine Breitenangabe macht es auf dem Telefon entweder winzig oder zu breit fuer die Leiste. */ .nav-logo { height: calc(1.15 * var(--chrome-rem)); width: auto; fill: var(--nav-ink); display: block; } .nav-brand:hover .nav-logo, .nav-brand:focus-visible .nav-logo { fill: color-mix(in srgb, var(--nav-ink) 70%, transparent); } .nav-brand:focus-visible { outline: 2px solid var(--nav-ink); outline-offset: -2px; } .nav-link { display: inline-flex; align-items: center; gap: calc(.35 * var(--chrome-rem)); color: color-mix(in srgb, var(--nav-ink) 88%, transparent); text-decoration: none; font-size: calc(.82 * var(--chrome-rem)); padding: calc(.4 * var(--chrome-rem)) calc(.55 * var(--chrome-rem)); background: none; border: 0; cursor: pointer; font-family: inherit; } .nav-link:hover, .nav-link:focus-visible { color: var(--nav-ink); background: color-mix(in srgb, var(--nav-ink) 12%, transparent); } .nav-link[aria-current="page"] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--paper); } .nav-link:focus-visible { outline: 2px solid var(--nav-ink); outline-offset: -2px; } .nav-icon { width: 1rem; height: 1rem; flex: none; } .nav-link .nav-icon, .backsquare .nav-icon { width: var(--chrome-rem); height: var(--chrome-rem); } /* Der Aufklapper: die ganze Navigation. Suchfeld oben, darunter die Gattungen in vier Spalten, unten die uebrigen Wege und die Sprache. Er laeuft ueber die volle Breite wie die Leiste, sein Inhalt bleibt bei 1100. */ /* Der Layer: die ganze Navigation, vollflaechig, auf demselben Grund wie die Leiste. Beide dieselbe Farbe - dadurch ist der Vorgang nicht "Kasten oeffnet sich ueber der Seite", sondern "die dunkle Ecke waechst auf den ganzen Schirm". Er scrollt in sich; `overscroll-behavior` haelt das Rad drin, damit die Seite dahinter nicht mitwandert. */ /* **Ein Drittel der Breite, an der rechten Kante** (so ab 03.09.2026). Der Aufklapper ist eine Spalte mit grossen Zeilen; ueber die ganze Fensterbreite waere er eine Liste mit sehr viel Luft daneben. Auf dem Telefon nimmt er alles - dort ist ein Drittel keine Spalte, sondern ein Streifen. */ .nav-layer { position: fixed; inset: 0 0 0 auto; z-index: 30; width: 100%; /* Spalte, damit die Kontozeile unten mit `margin-top: auto` an den Rand kann - und dort bleibt, wenn der Aufklapper die Ebene wechselt. */ display: flex; flex-direction: column; background: var(--nav); color: var(--nav-ink); overflow-y: auto; overscroll-behavior: contain; /* Verborgen, aber im Dokument: `visibility` nimmt ihn aus dem Griffweg und aus dem Vorleseprogramm, laesst ihn aber seine Bewegung zeigen. */ visibility: hidden; opacity: 0; transition: opacity .22s ease, visibility .22s; /* Its width decides whether a rubric and its pill share a line - not the window's (`@container navlayer` below). */ container: navlayer / inline-size; } /* 30 rem on a screen: the widest rubric with its pill ("Übernachten" + "Hotel, FeWo & Camping", 322 px measured) needs about 29 rem of layer. */ @media (min-width: 52rem) { .nav-layer { width: max(30rem, 33.333%); } } .chrome-nav[data-open="true"] .nav-layer { visibility: visible; opacity: 1; } /* Die Leiste faehrt nach oben aus dem Bild. Sie liegt unter dem Layer, ist also nicht mehr zu sehen - die Bewegung ist trotzdem richtig: Nach dem Schliessen faehrt sie sichtbar zurueck. */ .navbar { transition: transform .22s ease; } .chrome-nav[data-open="true"] .navbar { transform: translateY(-100%); } /* Die Zeile mit dem X - dieselbe Hoehe und derselbe Innenabstand wie die Leiste, damit das X genau dort steht, wo der Hamburger war. Das Zeichen steht in beiden Knoepfen **hinter** dem Wort. Vor dem Wort haengt seine Lage an der Wortbreite, und "Schliessen" ist breiter als "Menue" - das Zeichen waere beim Umschalten um dreizehn Pixel gesprungen. Hinten haengt es an der rechten Kante, und die ist bei beiden dieselbe. */ .nav-layer-top { display: flex; justify-content: flex-end; align-items: center; /* Derselbe Innenabstand wie in der Leiste: Das X muss genau dort stehen, wo der Hamburger stand - deshalb 1.25 hier und ebenso an den Ebenen. */ padding: var(--navpad) calc(1.25 * var(--chrome-rem)); } .nav-panel-inner { /** * **Seitlich kein Innenabstand** - der sitzt an den Ebenen selbst. * * `overflow: hidden` schneidet an der **Polsterkante** ab, nicht am Text: Mit * 20 Pixeln Polster links blieben von Ebene 1 genau diese 20 Pixel stehen, * wenn Ebene 2 hereingeschoben war - und dort sassen ihre Pfeile. Im Bild sah * es aus wie ein zweiter Pfeil an jeder Zeile der zweiten Ebene. */ padding: .5rem 0 3rem; overflow: hidden; } /* --------------------------------------------------------------------------- Zwei Ebenen, eine Spalte. --------------------------------------------------------------------------- Ebene 1 sind die Rubriken, Ebene 2 die Gattungen darunter. Beide liegen nebeneinander in einem Streifen der doppelten Breite; geschaltet wird ein Attribut (`data-level`), und die Bewegung macht CSS. Kein Ein- und Ausblenden zweier Listen: Wo der Streifen steht, ist auch der Weg zurueck - und das ist genau die Aussage der Bewegung. */ .nav-drill { display: flex; width: 200%; transition: transform .26s ease; } .nav-drill[data-level="2"] { transform: translateX(-50%); } /* **Verschoben ist nicht verborgen** (07.09.2026). Bis die Navigation gebaut wurde, entstand Ebene 2 im Moment des Klicks - was nicht dastand, konnte auch nicht im Weg sein. Jetzt stehen **beide** Ebenen im Dokument, und `transform` schiebt die eine nur aus dem Bild: Fuer die Tabulatortaste und fuer ein Vorleseprogramm bleibt sie da. Man tabbt sonst aus den Rubriken heraus in die Gattungslinks der abgeschobenen Spalte. **Denselben Fehler gab es vorher schon** - `nav-drill-back` setzte die Ebene zurueck, ohne den Inhalt abzuraeumen. Wer einmal in eine Rubrik ging und zurueck, tabbte danach in ihre Links. `visibility` und nicht `display`: Die Spalte muss ihre Breite behalten, `translateX(-50%)` rechnet gegen den Streifen. Es ist dasselbe Werkzeug mit derselben Begruendung, die schon an `.nav-layer` steht. **Die Uebergangszeile ist Pflicht, nicht Zierde.** Ohne sie springt `visibility` sofort um, und Ebene 1 verschwindet mitten in der Bewegung. Mit Dauer flippt sie beim Ausblenden am Ende und beim Einblenden am Anfang - richtig in beide Richtungen. */ .nav-drill[data-level="1"] .nav-level-2, .nav-drill[data-level="2"] .nav-level-1 { visibility: hidden; } .nav-level { transition: visibility .26s; } /* Jede Ebene ist genau die halbe Streifenbreite - also die volle Spaltenbreite. Mit `grid-template-columns: 100% 100%` waren es zweimal die **ganze** Streifenbreite: Die Prozente rechnen gegen den Kasten selbst, und der ist hier doppelt so breit wie die Spalte. Die zweite Ebene lag damit ausserhalb. */ /** * Jede Ebene ist genau die halbe Streifenbreite - also die volle Spaltenbreite - * **und traegt ihren Innenabstand selbst.** * * Am Kasten darum darf er nicht sitzen: `overflow: hidden` schneidet an der * Polsterkante ab, und die 20 Pixel Polster liessen genau den rechten Rand von * Ebene 1 stehen - dort, wo ihre Pfeile sind. * * Die Reihenfolge ist hier wichtig: `.nav-level-1` **ist** die Liste (ein `ul`). * Ein `padding: 0` in derselben Regelgruppe hat den Innenabstand vorher wieder * eingesammelt, und die Zeilen klebten an der Kante. Deshalb setzt die Regel * fuer Listen nur noch, was eine Liste braucht. */ .nav-level { width: 50%; flex: none; min-width: 0; padding: 0 1.25rem; } .nav-level, .nav-level ul { list-style: none; margin: 0; } .nav-level ul { padding: 0; } /* Die grosse Zeile - Rubrik oder Weg zurueck. Sie fuellt die Spalte, damit man sie auf einem Telefon nicht treffen muss, sondern nur tippen. */ /* **Nicht fett.** Die Zeile ist ohnehin die groesste auf der Flaeche; Fettdruck dazu macht aus einer Ordnung eine Ansage. Gross **und** fett war zweimal dasselbe Argument. */ .nav-row { display: flex; align-items: center; gap: .7rem; width: 100%; background: none; border: 0; padding: .9rem 0; cursor: pointer; font: inherit; font-size: clamp(1.25rem, 3.6vw, 1.6rem); font-weight: 400; line-height: 1.2; color: var(--nav-ink); text-align: left; } .nav-row > span { flex: 1; } /* **Every row the same form: the name, under it the pill at the right edge.** Beside the word it fitted in some rows and wrapped in others - two shapes in one list, and that was the unrest. Now each pill stands on the same edge, in the same line of its row. */ .nav-row-text { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .nav-beispiele { /* On the phone under the name and flush with it; in a wide layer on the same line at the right edge (see below). */ align-self: flex-start; padding: .25rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--nav-ink) 14%, transparent); color: color-mix(in srgb, var(--nav-ink) 62%, transparent); font-family: var(--mono); font-size: .68rem; line-height: 1.4; font-weight: 400; white-space: nowrap; } /* From a layer of 29 rem the name and its pill share one line, the pill at the right edge before the arrow; below that there is no room, and the pill takes its own line under the name. Should a long translation still not fit, the pill is cut with an ellipsis rather than run under the arrow - its full text stays in the title. */ @container navlayer (min-width: 29rem) { .nav-row-text { flex-direction: row; align-items: center; gap: .6rem; } .nav-beispiele { margin-left: auto; align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-row-text > span:first-child { flex: none; } } /* On the second level the pill stands beside the name - the row there is the way back and has no arrow on the right to line up with. */ .nav-row-neben { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; } .nav-row-neben .nav-beispiele { align-self: center; } /* Der Pfeil etwas groesser als das Wort: Er ist die Handlung der Zeile, nicht ihre Fussnote. **Und er haelt Abstand zur Kante** (04.09.2026): Er stand buendig an der rechten Kante des Aufklappers, und beim Zeigen wandert er noch .2 rem weiter - dort war er dann fast draussen. Ein halbes rem Luft, und die Bewegung hat wieder Platz. */ .nav-row .nav-icon { width: 1.35rem; height: 1.35rem; flex: none; transition: transform .18s; margin-right: .5rem; } .nav-row:hover .nav-icon { transform: translateX(.2rem); } .nav-row:focus-visible { outline: 2px solid var(--nav-ink); outline-offset: 2px; } /* Die Kontozeile am Fuss des Aufklappers. **Sie sieht aus wie eine Zeile der Ebene 1, aber leiser.** Dieselbe Hoehe, derselbe Pfeil, dieselbe Farbe - nur kleiner gesetzt und mit einem Strich darueber. Der Strich sagt, dass hier etwas anderes anfaengt: Oben steht der Bestand, hier steht, wer man ist. Ohne ihn waere es die letzte Rubrik. Das Bild ist rund - dieselbe Ausnahme und derselbe Grund wie im Profil: Ein Portraet ist kein Element der Oberflaeche. */ .nav-konto { /** * **Senkrecht kein Innenabstand - der sitzt an der Zeile.** * * Vorher trugen ihn beide: 1rem aus `.nav-konto-zeile` und zusaetzlich * 1,25rem hier unten. Oben war der Abstand damit 1rem, unten 2,25rem, und * das sah aus wie ein Versehen, weil es eines war. Eine Sache, ein Ort: Die * Zeile ist das Bedienelement und bringt ihren Abstand selbst mit - der ist * gleichzeitig ihre Trefferflaeche und deshalb ohnehin nicht verzichtbar. */ padding: 0 1.25rem; /* Ganz nach unten, unabhaengig davon, wie hoch der Aufklapper gerade ist. */ margin-top: auto; border-top: 1px solid color-mix(in srgb, var(--nav-ink) 22%, transparent); } /* **Die Kontozeile ist die haeufigste im Aufklapper** - sie fuehrt ins Profil. Deshalb hoeher als die uebrigen: leichter zu treffen, ohne dass sie lauter waere (05.09.2026). */ .nav-konto-zeile { display: flex; align-items: center; gap: .8rem; /* **Hoeher als die uebrigen Zeilen** (05.09.2026): Sie ist der haeufigste Griff im Aufklapper - ins eigene Profil. Mehr Flaeche heisst schneller getroffen, ohne dass sie lauter waere: dieselbe Schrift, derselbe Grund. */ padding: 1.4rem 0; min-height: 4.4rem; color: var(--nav-ink); text-decoration: none; } .nav-konto-bild { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; overflow: hidden; font-size: .95rem; font-weight: 400; line-height: 1; } /** * Ohne Foto: **heller Kreis, dunkles Zeichen** - die Umkehrung der Leiste. * * Nicht `--paper` und `--strong` genommen, obwohl das im hellen Modus dasselbe * Weiss und Schwarz ergibt. Im dunklen Modus dreht die Navigation mit, und dann * waere ein weisser Kreis auf weissem Grund verschwunden. `--nav-ink` auf * `--nav` ist immer der Gegensatz zur Leiste, in beiden Richtungen. */ .nav-konto-leer { background: var(--nav-ink); color: var(--nav); } .nav-konto-leer .nav-icon { width: 1.4rem; height: 1.4rem; stroke-width: 1.5; } /* Die drei Vorteile auf der Anmeldeseite. **Keine Kacheln, keine Rahmen.** Es sind drei Zeilen, nicht drei Angebote zur Wahl - ein Kasten um jede haette gesagt, man muesse sich entscheiden. Das Zeichen links, die Sache fett, der Grund darunter. */ .vorteile { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; } .vorteile li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; } .vorteile svg { width: 1.5rem; height: 1.5rem; color: var(--strong); margin-top: .1rem; } .vorteile span { display: grid; gap: .1rem; line-height: 1.35; } .vorteile strong { font-weight: 700; } .vorteile span { color: var(--soft); } .vorteile strong { color: var(--ink); } /* ========================================================================== Die Buecher der Dokumentation ========================================================================== Vier Bereiche benutzen diese Klassen - Handbuch, Technik, Styleguide, Hilfe. Sie unterscheiden sich im Inhalt, nicht in der Form: eine Gliederung, ein Text, ein Editor. **Eine Spalte, die Gliederung oben in einer Klappe** (08.09.2026). Vorher standen zwei Spalten nebeneinander, jede mit eigenem Rollkasten. Der Gewinn ist nicht der Fliesstext - der ist bei `--text` gedeckelt -, sondern die drei Faelle, in denen die Deckelung ausdruecklich aufgehoben ist: der Editor (+45 %), die Tabellen der Technik und die Mermaid-Diagramme. **Und die Seite hat wieder einen Rollbalken statt zwei.** Die zwei Kaesten (`max-height: calc(100vh - 12rem)`) waren die Antwort darauf, dass eine Gliederung nicht mit dem Text nach oben verschwinden darf. Die Leiste loest das anders: Sie klebt (`position: sticky`). */ /** * **Ein Mass fuer alles, was in dieser Ansicht eine Zeile hoch ist** * (08.09.2026): Ausloeser, Blaetterpfeile, Suchfeld - **und die Zeilen in der * Klappe**. * * 2,8 rem ist nicht frei gewaehlt: Es ist die Hoehe, die jedes Eingabefeld im * Haus hat (`input[type=text] … { min-height: 2.8rem }`, die Trefferflaeche * fuer einen Daumen). Deshalb steht die Zahl hier und nicht an der Leiste - * das **Umbenennfeld** in einer Zeile ist genau so ein Eingabefeld, und wenn * die Zeile daneben niedriger ist, springt die Liste in dem Moment, in dem man * einen Namen aendert. * * Nachgemessen vor der Aenderung: Feld 44,8 px, Zeile 39,7 px - fuenf Pixel * Sprung bei jedem Doppelklick. */ .hb { display: block; --hb-hoehe: 2.8rem; } /* **Die Leiste: Ausloeser, Blaettern, Suche - und sie rollt mit.** Sie klebte einen halben Tag lang (`position: sticky; top: var(--navheight)`) mit dem Argument, der Weg zur naechsten Seite duerfe nach 3000 Pixeln Technik-Text nicht ganz oben liegen. **Am 08.09.2026 verworfen:** Eine zweite klebende Leiste unter dem Navigationsblock nimmt auf jedem Bildschirm zwei Baender Hoehe weg, dauerhaft, fuer einen Weg, den man beim Lesen selten braucht - und wer ihn braucht, ist mit einem Griff oben. Wenn das Blaettern spaeter doch dauernd greifbar sein soll, ist die Antwort nicht diese Leiste, sondern ein Griff, der wenig Platz kostet. */ .hb-leiste { /* Bezugspunkt fuer alles, was sich in der Leiste absolut setzen will. Die Klappe braucht ihn nicht - sie haengt an `.hb-klappe`. */ position: relative; /** * **Eine Zeile, und darunter zwei - nichts dazwischen** (auf Wunsch). * * `nowrap` ist hier die Regel und der Umbruch die Ausnahme (in der * Mobilregel weiter unten). Mit `wrap` als Vorgabe entstand eine dritte * Gestalt: Zwischen den Breiten passten Ausloeser und Blaettern in die erste * Zeile und die Suche fiel allein in die zweite - eine Abstufung, die * niemand entworfen hat, sondern die aus den drei Grundbreiten herausfiel. * * Schrumpfen duerfen alle drei (`min-width: 0` an Klappe und Suche), also * kostet `nowrap` keine abgeschnittene Zeile - nur der Ausloeser wird * knapper, und das ist die richtige Reihenfolge: Er traegt den laengsten * Text und ist der einzige, der Kuerzen vertraegt. */ display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem .8rem; /** * **Genauso hoch wie der Navigationsblock** (08.09.2026, auf Wunsch). * * `--navheight` ist dessen **gemessene** Hoehe (`chrome.js bindChrome` setzt * sie nach dem Aufbau). Damit stimmt die Leiste auch dann noch, wenn dort * eine andere Schriftgroesse steht - eine getippte Zahl waere beim naechsten * Mal falsch. * * `min-height` und nicht `height`: Auf dem Telefon bricht die Zeile um, und * eine feste Hoehe schnitte das Suchfeld ab. */ min-height: var(--navheight, 3.7rem); margin: 0 0 1.4rem; padding: 0; background: var(--paper); border-bottom: 1px solid var(--line); } /* Der Ausloeser traegt „Bereich › Seite" - die Brotkrume, die die Spalte umsonst mitlieferte. Er waechst mit dem Platz, alles andere behaelt seinen. */ /* **Der Ausloeser bekommt doppelt so viel vom freien Platz wie die Suche** (08.09.2026). Beide standen auf `flex-grow: 1` und teilten sich den Rest gleich - der Ausloeser traegt aber „Bereich › Seitentitel" und die Suche ein Wort. Die Klappe erbt die Breite (`width: 100%`), wird also mitbreiter. */ .hb-klappe { position: relative; flex: 2 1 18rem; min-width: 0; } .hb-ausloeser { display: flex; align-items: center; gap: .5rem; cursor: pointer; /* Kein senkrechtes Polster - die Hoehe kommt von `--hb-hoehe`, und `align-items: center` setzt den Text hinein. Zwei Angaben fuer dieselbe Hoehe waeren zwei Stellen, an denen sie sich aendern kann. */ min-height: var(--hb-hoehe); padding: 0 .6rem; border: 1px solid var(--line); background: var(--paper); /* The radius of every field and button in the backend (`--feld-radius`). */ border-radius: var(--feld-radius); font-size: .92rem; color: var(--strong); list-style: none; } .hb-ausloeser::-webkit-details-marker { display: none; } .hb-ausloeser:hover { border-color: var(--strong); } .hb-klappe > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hb-ausloeser-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hb-ausloeser .nav-icon, .hb-ausloeser svg { width: 1rem; height: 1rem; flex: none; } .hb-klappe[open] .hb-ausloeser svg { transform: rotate(180deg); } /* Die Klappe selbst - schwarzer Rahmen, Papiergrund, kein Schatten, keine runde Ecke. (Bis zum 08.09.2026 stand hier „dieselbe Bauart wie `.hb-mehr-liste`" - die Liste des „⋯"-Menues, das es nicht mehr gibt.) **Einspaltig, und das ist keine Geschmacksfrage:** `sort.js` sucht das Ziel eines Zuges allein ueber `clientY`. In zwei Spalten landete ein Zug in der rechten Liste in der linken. */ .hb-klappe-inhalt { position: absolute; z-index: 5; top: calc(100% + .3rem); left: 0; /* **So breit wie der Ausloeser darueber**, nicht schmaler: Eine Klappe, die unter ihrem eigenen Knopf endet, sieht aus wie ein zweites Element. `100%` rechnet gegen `.hb-klappe`, und das ist genau der Ausloeser. */ width: 100%; max-height: 70vh; overflow-y: auto; display: grid; gap: 1rem; padding: .9rem; border: 1px solid var(--strong); background: var(--paper); } /* **In der Klappe ist Hoehe knapp** (08.09.2026): fett der Bereich, direkt darunter seine Seiten, und zwischen zwei Bereichen eine Zeile Luft statt drei. Ausserhalb bleiben die Maße, wie sie sind - `.bk-gruppe` traegt auch die Backend-Navigation, und dort steht mehr Platz zur Verfuegung. */ .hb-klappe-inhalt .hb-gliederung { gap: .7rem; } .hb-klappe-inhalt .bk-gruppe { margin: 0 0 .15rem; font-size: .95rem; font-weight: 700; } /* **Zeilen trennt eine helle Linie, kein Rand links** (08.09.2026). Links stand ein 2 px Strich, der beim offenen Dokument dunkel wurde - also gleichzeitig Zierde und Zustandsanzeige. Neben Trennlinien zwischen den Zeilen waere er der dritte Strich im Bild. Den Zustand traegt jetzt der **Pfeil** am Zeilenanfang. Die Linie sitzt an der **Zeile**, nicht am Verweis: Das „⋯" steht daneben und gehoert oberhalb desselben Strichs. */ .hb-klappe-inhalt .hb-gruppe a { padding-left: 0; border-left: 0; } /* **Kein Abstand zwischen den Zeilen** (08.09.2026). `.hb-gruppe ul` hat `gap: .1rem` - in der alten Spalte gliederte das eine Liste ohne Striche. Mit Trennlinien **und** einer Blende beim Zeigen wurden daraus 1,6 px Weiss zwischen dem Strich und der grauen Flaeche darunter: ein heller Spalt, der aussah, als sei die Linie zweimal gezeichnet. Die Linie gliedert jetzt, der Abstand ist nicht mehr noetig. */ .hb-klappe-inhalt .hb-gruppe ul { gap: 0; } .hb-klappe-inhalt .hb-zeile, .hb-treffer .hb-zeile { border-bottom: 1px solid var(--line); } /* **Die letzte Zeile gibt ihren Strich ab** - darunter steht die Linie, die der Knopf ist, und zwei Striche uebereinander sind einer zu viel. Dieselbe Regel wie bei den FAQ-Zeilen im Editor (`:has(+ .zeilenlinie)`). */ .hb-klappe-inhalt .hb-zeile:last-child, .hb-treffer .hb-zeile:last-child { border-bottom: 0; } /* Der Pfeil am Zeilenanfang: grau, und bei der offenen Seite dunkel. Er ist die Anzeige, die vorher der Rand links war. */ /* **Dieselbe Hoehe wie das Umbenennfeld** - siehe `--hb-hoehe` an `.hb`. `align-items: center` setzt den Text hinein; das Polster aus der Grundregel bleibt fuer den Fall, dass ein langer Titel umbricht - dann waechst die Zeile ueber das Mindestmass hinaus und braucht seine Luft. */ .hb-klappe-inhalt .hb-gruppe a, .hb-treffer .hb-trefferliste a { display: flex; align-items: center; gap: .4rem; min-height: var(--hb-hoehe); /* **Keine Unterstreichung** (auf Wunsch): Das ist eine Zeile in einer Liste, kein Verweis in einem Satz. Dass sie fuehrt, sagen der Pfeil davor und die Flaeche beim Zeigen - der Strich sagte es ein drittes Mal und machte aus zwoelf Treffern zwoelf unterstrichene Zeilen untereinander. */ text-decoration: none; } /* **Der Pfeil ist schwarz, immer** (08.09.2026, auf Wunsch). Er war grau und wurde beim Zeigen dunkel - trug also den Zustand. Das macht jetzt die **Flaeche** (siehe unten), und damit ist der Pfeil frei fuer das, was er wirklich sagt: Diese Zeile fuehrt dorthin. Bei allen gleich, weil das bei allen gleich gilt. .9 statt .8 rem, weil `arrow` zu zwei Dritteln aus Linie besteht - die Spitze ist der Teil, den man erkennen soll. */ .hb-klappe-inhalt .hb-gruppe a svg, .hb-treffer .hb-trefferliste a svg { width: .9rem; height: .9rem; flex: none; color: var(--strong); transition: transform .12s ease; } .hb-klappe-inhalt .hb-gruppe a:hover svg, .hb-treffer .hb-trefferliste a:hover svg { transform: translateX(.15rem); } /* **Mouseover ist eine Flaeche, keine Farbe am Zeichen.** Sie liegt an der **Zeile**, nicht am Verweis: Das „⋯" steht daneben und gehoert zu derselben Zeile - eine Blende, die davor endet, teilt die Zeile in zwei Haelften, von denen nur eine reagiert. Der Einzug (`.5rem` Polster, derselbe Betrag als negativer Rand) laesst die Flaeche links und rechts ueber den Text hinausgehen, ohne die Zeile aus der Spalte zu schieben. Ohne ihn klebte die Kante der Blende am ersten Buchstaben. **Die Blende hat den Ton der Trennlinie** (08.09.2026, auf Wunsch) - vorher `--shade`, mit der Begruendung „eine Blende ist eine Flaeche, `--line` ist der Ton fuer einen Strich". Die Begruendung stimmt fuer eine Flaeche im Freien; hier liegt sie in einer Liste, die **Trennlinien** hat, und dann schneidet die Linie oberhalb der Zeile mitten durch die Blende. Sichtbar war das vor allem im Dunkeln, wo `--line` **heller** ist als `--shade`: ein heller Strich quer ueber die Oberkante der Zeile, auf die man gerade zeigt. Mit demselben Ton verschwinden beide Striche in der Flaeche - der von oben und der eigene darunter -, und die Zeile unter dem Zeiger ist eine geschlossene Flaeche statt einer eingerahmten. */ .hb-klappe-inhalt .hb-zeile, .hb-treffer .hb-zeile { margin: 0 -.5rem; padding: 0 .5rem; transition: background-color .12s ease; } .hb-klappe-inhalt .hb-zeile:hover, .hb-treffer .hb-zeile:hover { background: var(--line); } /* **Der Zustand bleibt am Text.** Die offene Seite steht in `--strong`, die anderen in `--soft` (Regel weiter oben) - das traegt jetzt allein, wo vorher der Pfeil mitgeholfen hat. **Nicht fett**: dieselbe Hausregel wie beim aktiven Reiter, der sich durch Strich und Farbe unterscheidet. */ /* Die Linie am Ende einer Seitenliste - dasselbe Bauteil wie im Editor. In der Klappe ist sie flacher: 1,5 rem sind dort schon die Hoehe einer Zeile. **Und genauso breit wie die Trennlinien darueber** (08.09.2026): Die Zeilen greifen mit `margin: 0 -.5rem` einen halben Zentimeter ueber den Text hinaus, damit die Blende beim Zeigen nicht am ersten Buchstaben klebt. Die Linie stand auf `width: 100%` und endete deshalb zwei Mal .5 rem frueher - eine Stufe am Ende jeder Liste, die nichts bedeutet. Derselbe Einzug, dieselbe Kante. */ .hb-klappe-inhalt .zeilenlinie { /* **`calc`, nicht `auto`.** Mit `width: auto` war die Linie unter einer Seitenliste **null Pixel** breit: Ihr einziges Kind ist das absolut positionierte Plus, also hat sie keinen Inhalt, an dem eine Breite haengen koennte. Die Bereichslinie darunter taeuschte das - sie ist Kind eines Rasters und wird von ihm gestreckt. */ height: 1.1rem; width: calc(100% + 1rem); margin-left: -.5rem; margin-right: -.5rem; } /* **Die Bereichslinie braucht Abstand** - sie steht direkt unter der Seitenlinie des letzten Bereichs, und beide tragen dasselbe Plus. Bei .5 rem sahen sie aus wie ein Knopf, der zweimal gezeichnet wurde; bei 1,4 rem ist klar, dass die eine die Liste darueber beendet und die andere die Gliederung. Ihren Namen sagen sie ohnehin nur im `title`. */ .hb-bereichslinie { margin-top: 1.4rem; } .hb-klappe-inhalt .hb-intro { margin: 0 0 .3rem; } /* Blaettern: zwei Quadrate und die Zahl dazwischen. */ .hb-blaettern { display: flex; align-items: center; gap: .3rem; } /* **`padding: 0` ist hier die halbe Regel** (08.09.2026). Ein `