/* Wagner & Hartmann — style.css Schichtung: tokens < base < layout < components < utilities. Zweiter Anlauf. Der erste war zu woertlich: Rahmen um jede Karte, Linien um jeden Block, getoente Kaesten. Genau diese Kombination liest sich wie unformatiertes HTML. Jetzt tragen FLAECHE und WEISSRAUM die Gliederung, Linien stehen nur dort, wo sie etwas trennen, das wirklich zusammengehoert (Tabellenzeilen, Aufklapper). Bilder laufen randlos, oft ueber den Satzspiegel hinaus. Grosse Typografie statt vieler kleiner Kaesten. */ @layer tokens, base, layout, components, utilities; /* ============================================================ TOKENS ==== */ @layer tokens { @font-face { font-family:'Spectral'; src:url('/assets/fonts/spectral-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Spectral'; src:url('/assets/fonts/spectral-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Spectral'; src:url('/assets/fonts/spectral-600i.woff2') format('woff2'); font-weight:600; font-style:italic; font-display:swap; } @font-face { font-family:'Plex'; src:url('/assets/fonts/plex-500.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; } :root { --loden: #22382C; --loden-tief: #16261D; --loden-hell: #2E4A3B; /* Hover auf massiven Lodenflaechen */ --lehm-d: #8C4A2C; --lehm: #CE9272; --papier: #FBFAF7; /* heller als zuvor: mehr Luft, weniger Sand */ --papier-2: #EFEEE8; --gruen-luft: #E9EDE6; --tinte: #1B1E19; --grau: #55594F; /* Fliesstext zweiter Ordnung, 7,3 : 1 */ /* Muss auf ALLEN drei Gruenden tragen — auf der gruenen Flaeche kam der hellere Ton nur auf 4,11 : 1. Jetzt 5,48 / 4,92 / 4,83. */ --stein: #63685D; --linie: rgb(34 56 44 / .14); --linie-inv: rgb(251 250 247 / .18); --serif: 'Spectral', Georgia, 'Times New Roman', serif; --grotesk: 'Plex', system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif; /* Grosse Spanne: der Titel darf tragen, der Lauftext bleibt ruhig. */ /* Nicht groesser: die Ueberschriften der Stadtseiten sind lang (oft ueber 60 Zeichen). Bei 4,5rem ergaben sie fuenf Zeilen und einen Auftakt von 970 px Hoehe — gross gesetzt ist nicht dasselbe wie gut gesetzt. */ --fs-riese: clamp(2.05rem, 1.45rem + 1.9vw, 3.15rem); --fs-h1: clamp(2rem, 1.45rem + 2.3vw, 3.4rem); --fs-h2: clamp(1.5rem, 1.25rem + 1.05vw, 2.3rem); --fs-h3: clamp(1.12rem, 1.04rem + .34vw, 1.35rem); --fs-lede: clamp(1.12rem, 1.05rem + .36vw, 1.38rem); --fs-body: 1.075rem; --fs-klein: .945rem; --fs-mikro: .8rem; --fs-etikett: .7rem; --lh-riese: 1.03; --lh-kopf: 1.13; --lh-lauf: 1.7; --sperr: .16em; /* Ein durchgaengiges Abstandsmass — der haeufigste Grund, warum eine Seite zusammengezimmert wirkt, sind Abstaende aus dem Bauch. */ --r1: .5rem; --r2: 1rem; --r3: 1.5rem; --r4: 2.25rem; --r5: 3.5rem; --r6: 5rem; --r7: clamp(4.5rem, 9vw, 8rem); --blatt: 1240px; --rand: clamp(1.25rem, 5vw, 3.5rem); --lauf: 38rem; --uebergang: 160ms cubic-bezier(.2, 0, .2, 1); } } /* ============================================================== BASE ==== */ @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 var(--fs-body)/var(--lh-lauf) var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-weight: 600; line-height: var(--lh-kopf); margin: 0 0 var(--r2); letter-spacing: -.021em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -.012em; } p { margin: 0 0 var(--r2); } p:last-child { margin-bottom: 0; } a { color: var(--lehm-d); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color var(--uebergang); } a:hover { color: var(--loden); } :focus-visible { outline: 2px solid var(--lehm-d); outline-offset: 3px; border-radius: 2px; } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 var(--r2); padding-left: 1.2em; } li { margin-bottom: .4em; } li::marker { color: var(--lehm-d); } strong { font-weight: 600; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 60; background: var(--loden); color: var(--papier); padding: .8rem 1.1rem; font-family: var(--grotesk); } } /* ============================================================ LAYOUT ==== */ @layer layout { .blatt { max-width: var(--blatt); margin-inline: auto; padding-inline: var(--rand); } .lauf { max-width: var(--lauf); } .feld { padding-block: var(--r7); } .feld--knapp { padding-block: var(--r5); } /* Jedes Inhaltsmodul steht in einem eigenen Band, Papier und Gruenluft im Wechsel — auf einem gemeinsamen Grund liefen sieben bis vierzehn Module ineinander. Knapper als --r7, weil bei aneinandergrenzenden Baendern zweimal der volle Abstand zusammenkommt und schon der Farbwechsel trennt. */ .feld--modul { padding-block: var(--r6); } .feld--luft { background: var(--gruen-luft); } /* Endet ein Abschnitt mit einem randlosen Bild, faellt sein Fussabstand weg — sonst steht zwischen Bildkante und naechster Flaeche ein leerer farbiger Streifen. Das Bild stoesst dann direkt an, wie der Kopf an die Anlaessleiste. */ .feld--bildschluss { padding-bottom: 0; } .feld--dunkel { background: var(--loden); color: var(--papier); } .feld--dunkel h2, .feld--dunkel h3 { color: var(--papier); } .feld--dunkel a { color: var(--lehm); } .feld--dunkel a:hover { color: var(--papier); } /* Satz und Beiwerk: breite Spalte fuer den Text, schmale fuer die Daten. */ .satz { display: grid; gap: clamp(var(--r4), 5vw, var(--r6)); grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; } @media (max-width: 960px) { .satz { grid-template-columns: minmax(0, 1fr); } } .reihe { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .paar { display: grid; gap: clamp(var(--r3), 4vw, var(--r5)); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } } /* ======================================================== COMPONENTS ==== */ @layer components { /* ---------- Kopfzeile: massives Loden, schmal, ohne Schnickschnack. ---- */ .kopf { position: sticky; top: 0; z-index: 40; background: var(--loden); color: var(--papier); } .kopf__in { display: flex; align-items: center; gap: var(--r3); min-height: 4.5rem; } .kopf__marke { margin-right: auto; display: flex; align-items: center; } .kopf__marke img { height: 34px; width: auto; } .kopf__weg { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; } .kopf__weg a { color: var(--papier); text-decoration: none; opacity: .82; transition: opacity var(--uebergang), color var(--uebergang); } .kopf__weg a:hover { opacity: 1; color: var(--papier); } .kopf__weg a[aria-current] { opacity: 1; color: var(--lehm); } .kopf__ruf { font: 500 var(--fs-klein)/1 var(--grotesk); color: var(--loden); background: var(--lehm); padding: .78rem 1.15rem; text-decoration: none; white-space: nowrap; transition: background var(--uebergang); } .kopf__ruf:hover { background: var(--papier); color: var(--loden); } @media (max-width: 900px) { .kopf__weg { display: none; } } /* ---------- Auftakt: grosser Satz links, Bild rechts bis an den Rand. Das Bild bricht aus dem Satzspiegel aus — das ist der Unterschied zwischen einer gestalteten Seite und einem Kasten im Raster. ------- */ .auftakt { background: var(--gruen-luft); overflow: clip; } .auftakt__gitter { display: grid; align-items: center; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(var(--r4), 4.5vw, var(--r5)); } .auftakt__satz { padding-block: clamp(var(--r4), 5vw, var(--r6)); max-width: 38rem; } .auftakt h1 { font-size: var(--fs-riese); line-height: var(--lh-riese); letter-spacing: -.028em; margin-bottom: var(--r2); } .auftakt__lede { font-size: var(--fs-lede); color: var(--grau); margin-bottom: var(--r3); } .auftakt__bild { position: relative; align-self: stretch; min-height: 26rem; margin-right: calc(var(--rand) * -1); } .auftakt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1240px) { .auftakt__bild { margin-right: calc((100vw - var(--blatt)) / -2 - var(--rand)); } } @media (max-width: 860px) { .auftakt__gitter { grid-template-columns: minmax(0, 1fr); gap: 0; } .auftakt__satz { padding-block: var(--r5) var(--r4); } .auftakt__bild { min-height: 15rem; margin-inline: calc(var(--rand) * -1); } } /* ---------- Etikett ------------------------------------------------- */ .etikett { display: block; font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; color: var(--lehm-d); margin-bottom: var(--r2); } .feld--dunkel .etikett { color: var(--lehm); } /* ---------- Merkposten: Haken statt Aufzaehlungspunkt, viel Luft. ---- */ .merk { list-style: none; padding: 0; margin: 0 0 var(--r2); font-size: var(--fs-klein); } .merk li { position: relative; padding-left: 1.75rem; margin-bottom: .62em; } .merk li::before { content: ""; position: absolute; left: 0; top: .52em; width: .72rem; height: .38rem; border-left: 2px solid var(--lehm-d); border-bottom: 2px solid var(--lehm-d); transform: rotate(-45deg); } .merk--nein li::before { border: 0; width: auto; height: auto; top: 0; content: "×"; font: 400 1.15em/1.45 var(--grotesk); color: var(--stein); transform: none; } .feld--dunkel .merk li::before { border-color: var(--lehm); } /* ---------- Daten: die geprueften Angaben als ruhige Spalte, ohne Rahmen und ohne Kasten. Nur eine Linie je Zeile. ------------------ */ .daten { font-family: var(--grotesk); font-size: var(--fs-klein); } .daten > div { padding: .82rem 0; border-bottom: 1px solid var(--linie); } .daten > div:first-child { border-top: 1px solid var(--linie); } .daten dt, .daten b { display: block; font-weight: 400; color: var(--stein); font-size: var(--fs-mikro); letter-spacing: .09em; text-transform: uppercase; margin-bottom: .18rem; } .daten dd, .daten span { margin: 0; color: var(--tinte); } .daten small { display: block; color: var(--stein); font-size: var(--fs-mikro); } /* ---------- Beiwerkspalte: klebt, aber ohne Rahmen. ----------------- */ @media (min-width: 961px) { .beiwerk { position: sticky; top: 6.5rem; } } .beiwerk h2 { font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; color: var(--stein); margin-bottom: var(--r2); } /* ---------- Abschnitt: grosse Ueberschrift, kein Reiter, kein Rahmen. */ .abschnitt + .abschnitt { margin-top: var(--r7); } .abschnitt__lede { font-size: var(--fs-lede); color: var(--grau); max-width: var(--lauf); } /* ---------- Leistungen: nummeriert, randlos, durch Raum getrennt. --- */ .liste { list-style: none; margin: 0; padding: 0; counter-reset: n; } .liste > li { counter-increment: n; padding-top: var(--r3); margin: 0; border-top: 1px solid var(--linie); } .liste > li + li { margin-top: var(--r4); } .liste__nr { font: 500 var(--fs-mikro)/1 var(--grotesk); color: var(--lehm-d); letter-spacing: .1em; display: block; margin-bottom: .7rem; } .liste__nr::before { content: counter(n, decimal-leading-zero); } .liste h3 { margin-bottom: .4em; } .liste p { color: var(--grau); max-width: var(--lauf); } /* ---------- Beleg: Bild randlos, Unterschrift klein darunter. ------- */ .beleg { margin: var(--r5) 0; } .beleg img { width: 100%; } .beleg figcaption { margin-top: var(--r1); font: 400 var(--fs-mikro)/1.55 var(--grotesk); color: var(--stein); display: flex; gap: .7rem; } .beleg figcaption b { color: var(--lehm-d); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } /* Ueber den Satzspiegel hinaus — ein Bild darf breiter sein als der Text. */ .beleg--breit { margin-inline: calc(var(--rand) * -1); } @media (min-width: 961px) { .beleg--breit { margin-inline: 0; } } /* ---------- Handlungsaufruf: dunkles Feld mit dem Und als Wasserzeichen. */ .aufruf { position: relative; overflow: clip; } /* Motiv unter dem Aufruf. Der Verlauf ist links am dichtesten, weil dort der Satz steht: bei .92 haelt selbst das Lehm-Etikett ueber der hellsten Bildstelle noch 4,74 : 1 (ohne Bild sind es 6,0). Rechts laeuft er auf .62 aus, damit das Bild ueberhaupt zu sehen ist. */ .aufruf__bild { position: absolute; inset: 0; } .aufruf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; } .aufruf__schleier { position: absolute; inset: 0; background: linear-gradient(100deg, rgb(22 38 29 / .95) 0%, rgb(22 38 29 / .92) 40%, rgb(22 38 29 / .74) 72%, rgb(22 38 29 / .62) 100%); } @media (max-width: 760px) { /* Gestapelt laeuft der Satz ueber die ganze Breite — der Verlauf muss dann von unten kommen, nicht von links. */ .aufruf__schleier { background: linear-gradient(to top, rgb(22 38 29 / .95) 55%, rgb(22 38 29 / .72) 100%); } } .aufruf__und { position: absolute; right: -2.5rem; top: 50%; translate: 0 -50%; font: italic 600 clamp(14rem, 26vw, 26rem)/1 var(--serif); color: var(--papier); opacity: .05; pointer-events: none; user-select: none; } .aufruf__in { position: relative; max-width: 44rem; } .aufruf h2 { font-size: clamp(1.8rem, 1.3rem + 2.1vw, 3rem); letter-spacing: -.025em; } .aufruf p { color: #C8D2C6; font-size: var(--fs-lede); } .aufruf__wege { display: flex; flex-wrap: wrap; gap: var(--r2) var(--r3); align-items: center; margin-top: var(--r3); } /* ---------- Schaltflaechen ----------------------------------------- */ .knopf { display: inline-flex; align-items: center; gap: .55rem; font: 500 var(--fs-klein)/1 var(--grotesk); letter-spacing: .02em; padding: 1rem 1.5rem; text-decoration: none; border: 1px solid transparent; transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang); } .knopf--voll { background: var(--lehm); color: var(--loden); } .knopf--voll:hover { background: var(--papier); color: var(--loden); } .knopf--linie { border-color: var(--linie-inv); color: var(--papier); } .knopf--linie:hover { border-color: var(--papier); color: var(--papier); } .knopf--hell { background: var(--loden); color: var(--papier); } .knopf--hell:hover { background: var(--loden-hell); color: var(--papier); } .knopf--rand { border-color: var(--loden); color: var(--loden); } .knopf--rand:hover { background: var(--loden); color: var(--papier); } /* ---------- Zahlenwerk: Kosten und Fakten, nur Zeilenlinien. -------- */ /* Begriff und Erklaerung, nicht Schluessel und Zahl. Diese Form hiess .werte und war fuer Zahlenpaare gebaut: Begriff links schmal, Wert rechtsbuendig. Getragen hat sie aber ueber 6000 Zeilen, in denen der "Wert" ein ganzer Satz ist — im Median 149 Zeichen, nur 15 von 6099 kuerzer als 30. In der schmalen linken Spalte brachen dadurch Begriffe mitten im Wort ("Gerichtsverwert-barkeit", "Observati-on"), und der Satz stand rechtsbuendig mit ausgefranstem linken Rand. Jetzt untereinander: Begriff als eigene Zeile, Erklaerung darunter im Lesetext, Haarlinie zwischen den Eintraegen. Damit ist die Laenge des Begriffs gleichgueltig — die laengsten im Bestand haben 55 Zeichen, die laengsten unteilbaren Woerter 25 ("Zeugnisverweigerungsrecht"). */ .werte > div { padding: var(--r3) 0; border-bottom: 1px solid var(--linie); } .werte > div:first-child { border-top: 1px solid var(--linie); } .werte b { display: block; margin-bottom: .4rem; font-weight: 600; font: 600 var(--fs-h3)/1.25 var(--serif); color: var(--tinte); } .werte span { display: block; color: var(--grau); max-width: var(--lauf); font: 400 var(--fs-body)/1.65 var(--grotesk); } /* ---------- Randbemerkung ------------------------------------------- */ .bemerkung { font-size: var(--fs-klein); color: var(--grau); margin-top: var(--r3); max-width: var(--lauf); } .bemerkung strong { color: var(--tinte); } /* ---------- Fragen: Aufklapper ohne Kasten. ------------------------- */ /* ---------- Haeufige Fragen ---------------------------------------- Zwei Dinge stimmten nicht mehr. Der Block war auf 52 rem begrenzt und stand allein am linken Rand, waehrend alle neuen Bausteine die volle Satzbreite nutzen. Und die wichtigste Frage der Seite lag hinter einem Klick — auf einer Seite, die Auftraege einwerben soll, die teuerste Zeile Gestaltung, die man haben kann. Die erste Frage klappt deshalb nicht mehr: sie steht offen und traegt dieselbe Lehmkante wie die Unzulaessig-Haelfte im Rechtsrahmen. Auf der Startseite ist das die Preisfrage, auf den Stadtseiten die Dauerfrage — in beiden Faellen die, die zuerst kommt. Der Rest bleibt Aufklapper, damit die Seite bei acht Fragen nicht ausufert. */ .fragen__erste { display: grid; gap: var(--r3) var(--r5); grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); background: var(--gruen-luft); padding: var(--r4); border-top: 3px solid var(--lehm-d); } /* Der Block muss sich von SEINEM Untergrund abheben, nicht ihn wiederholen. Auf Papier steht er auf Gruenluft, auf Gruenluft auf Papier — umgekehrt war er auf beiden Seitentypen unsichtbar. */ .feld--luft .fragen__erste { background: var(--papier); } .fragen__erste h3 { margin: 0; letter-spacing: -.018em; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); } .fragen__erste p { margin: 0; color: var(--tinte); font: 400 var(--fs-body)/1.65 var(--grotesk); } @media (max-width: 760px) { .fragen__erste { grid-template-columns: minmax(0, 1fr); padding: var(--r3); } } .fragen { border-top: 1px solid var(--linie); margin-top: var(--r5); } .fragen details { border-bottom: 1px solid var(--linie); } .fragen summary { cursor: pointer; list-style: none; padding: var(--r3) 2.5rem var(--r3) 0; position: relative; font-weight: 600; font-size: var(--fs-h3); transition: color var(--uebergang); } .fragen summary:hover { color: var(--lehm-d); } .fragen summary::-webkit-details-marker { display: none; } .fragen summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: .62rem; height: .62rem; translate: 0 -60%; border-right: 1.5px solid var(--lehm-d); border-bottom: 1.5px solid var(--lehm-d); rotate: 45deg; transition: rotate var(--uebergang); } .fragen details[open] summary::after { rotate: 225deg; translate: 0 -30%; } .fragen details > div { padding: 0 0 var(--r3); color: var(--grau); max-width: 46rem; font: 400 var(--fs-body)/1.65 var(--grotesk); } /* ---------- Orte: mehrspaltig, nur Zeilenlinien. -------------------- */ .orte { display: grid; gap: 0 var(--r4); font-family: var(--grotesk); font-size: var(--fs-klein); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .orte a { display: flex; justify-content: space-between; gap: 1rem; padding: .78rem 0; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; } .orte a:hover { color: var(--lehm-d); } .orte span { color: var(--stein); font-size: var(--fs-mikro); } /* ---------- Gegenueberstellung --------------------------------------- Die "vergleich"-Module stellen genau ZWEI Dinge gegeneinander — Verdacht und Beweis, Vermutung und Beleg. Auf allen 465 Seiten sind es zwei, nie mehr: 521 Module, alle mit zwei Eintraegen. Untereinander in der Begriffsliste ging die Gegenueberstellung verloren. Gebaut wie der Rechtsrahmen: Teilung in der Mitte, je eine Lehm- und eine Lodenkante oben, Haarlinie dazwischen. Nur nicht randlos, denn das Modul steht im Satzspiegel. Eine Haelfte traegt den Grund ihres Bandes, die andere den Gegengrund — wie beim Rechtsrahmen, wo die rechte Haelfte auf demselben Papier steht wie der Abschnitt. Weil die Modulbaender zwischen Papier und Gruenluft wechseln, drehen beide Haelften auf --luft mit. */ .gegen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linie); margin-top: var(--r4); } /* Die Kantenfarbe MUSS mindestens so spezifisch gesetzt sein wie die Kurzschrift daneben: "border-top: 3px solid" ohne Farbe setzt currentColor, und .gegen > div schlaegt ein blosses .gegen__a. Die Kanten standen dadurch in Tinte statt in Lehm und Loden. */ .gegen > div { padding: var(--r4); border-top: 3px solid; } .gegen > .gegen__a { background: var(--papier); border-top-color: var(--lehm-d); } .gegen > .gegen__b { background: var(--gruen-luft); border-top-color: var(--loden); } .feld--luft .gegen > .gegen__a { background: var(--gruen-luft); } .feld--luft .gegen > .gegen__b { background: var(--papier); } .gegen h3 { font-size: var(--fs-h3); margin-bottom: var(--r2); } .gegen__a h3 { color: var(--lehm-d); } .gegen__b h3 { color: var(--loden); } .gegen p { margin: 0; color: var(--grau); font: 400 var(--fs-body)/1.65 var(--grotesk); } /* Untereinander erst spaet: nebeneinander IST die Aussage des Moduls. */ @media (max-width: 720px) { .gegen { grid-template-columns: minmax(0, 1fr); } } /* ---------- Umgebung als Zellenraster ------------------------------- Die Nachbarorte standen als Linkliste da — richtig, aber neben Registern, Tafeln und Bildbaendern der schwaechste Block der Seite. Als Zellen mit Haarlinie dazwischen tragen sie dieselbe Figur wie die Aktenleiste unter dem Kopf, und die ganze Flaeche wird zum Ziel statt einer Textzeile. Es sind auf jeder der 465 Seiten genau ACHT Nachbarn, berechnet in render.py. Darum nur vier und zwei Spalten: drei liessen eine Zelle leer, und eine leere Zelle zeigt in diesem Gitter den Trennlinienton als grauen Block. */ .ortsraster { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-top: var(--r5); grid-template-columns: repeat(4, minmax(0, 1fr)); } .ortsraster a { background: var(--gruen-luft); padding: var(--r3); display: flex; flex-direction: column; gap: .35rem; color: var(--tinte); text-decoration: none; transition: background var(--uebergang), color var(--uebergang); } .ortsraster a:hover { background: var(--papier); color: var(--lehm-d); } .ortsraster b { font: 600 var(--fs-h3)/1.2 var(--serif); hyphens: auto; } .ortsraster span { font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: var(--sperr); color: var(--lehm-d); } @media (max-width: 860px) { .ortsraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Unter 520 px einspaltig: die laengsten unteilbaren Ortsnamen im Bestand haben 16 bis 20 Zeichen — "Unterschleissheim", "Fuerstenfeldbruck", "Muehlhausen/Thueringen" — und passen in zwei Spalten dort nicht mehr in ihre Zelle. Acht Zellen gehen durch eine Spalte glatt auf. */ @media (max-width: 520px) { .ortsraster { grid-template-columns: minmax(0, 1fr); } } /* ---------- Fusszeile ----------------------------------------------- */ .fuss { background: var(--loden-tief); color: #9FA79A; padding-block: var(--r6) var(--r4); font-size: var(--fs-klein); } .fuss a { color: var(--papier); text-decoration: none; } .fuss a:hover { color: var(--lehm); } .fuss img { height: 32px; width: auto; margin-bottom: var(--r2); } .fuss h3 { font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; color: var(--lehm); margin-bottom: var(--r2); } .fuss ul { list-style: none; padding: 0; margin: 0; } .fuss li { margin-bottom: .5em; } .fuss__schluss { border-top: 1px solid var(--linie-inv); margin-top: var(--r5); padding-top: var(--r3); display: flex; flex-wrap: wrap; gap: .6rem var(--r4); justify-content: space-between; font-size: var(--fs-mikro); } .quelle { margin-top: var(--r5); font: 400 var(--fs-mikro)/1.65 var(--grotesk); color: var(--stein); max-width: 52rem; } } /* ========================================================= UTILITIES ==== */ @layer utilities { .nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .oben-0 { margin-top: 0; } } /* ===================================================== KARTE & SUCHE ==== */ @layer components { /* ---------- Weg auf kleinen Schirmen -------------------------------- */ .kopf__schalter { display: none; background: none; border: 0; color: var(--papier); font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; padding: .7rem 0; cursor: pointer; } /* Der Weg stand im Markup OFFEN und wurde erst von main.js zugeklappt, damit er ohne JavaScript erreichbar bleibt. Auf dem Telefon war die Kopfzeile dadurch im ersten Bild 315 px hoch und sprang beim Eintreffen des Skripts auf 98 — die ganze Seite rutschte um gut 200 px nach oben. Bei 812 px Schirmhoehe ergab das ein CLS von 0,301 und kostete 15 von 100 Punkten; am Desktop trat es nicht auf, weil der Weg dort in einer Zeile steht. Jetzt entscheidet das Stylesheet: zugeklappt ab dem ersten Bild, offen nur bei aria-expanded="true". Das Skript setzt nur noch dieses Attribut. Ohne JavaScript oeffnet der noscript-Block in base.html.j2 den Weg wieder — sonst waere /ueber-uns unerreichbar, der Fuss fuehrt es nicht. */ @media (max-width: 900px) { .kopf__schalter { display: block; } .kopf__in { flex-wrap: wrap; } .kopf__weg { display: none; flex-basis: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--linie-inv); padding-block: var(--r1) var(--r2); } .kopf__schalter[aria-expanded="true"] ~ .kopf__weg { display: flex; } .kopf__weg a { padding: .7rem 0; } } /* ---------- Karte: Flaechen in Loden, Beruehrung in Lehm ------------ */ .karte { display: grid; gap: clamp(var(--r3), 4vw, var(--r5)); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } @media (max-width: 880px) { .karte { grid-template-columns: minmax(0, 1fr); } } .karte svg { width: 100%; height: auto; display: block; overflow: visible; } .karte__land { fill: var(--loden); stroke: var(--papier); stroke-width: 1.1; transition: fill var(--uebergang); outline: none; } .karte__land:hover, .karte__land:focus-visible { fill: var(--lehm-d); } .karte__land:focus-visible { stroke: var(--tinte); stroke-width: 1.6; } .karte__kuerzel { fill: var(--papier); font: 500 13px/1 var(--grotesk); letter-spacing: .06em; text-anchor: middle; pointer-events: none; user-select: none; } .karte__anzeige { min-height: 4.5rem; padding-bottom: var(--r2); border-bottom: 1px solid var(--linie); margin-bottom: var(--r3); } .karte__anzeige strong { display: block; font-size: var(--fs-h3); } .karte__anzeige span { font: 400 var(--fs-klein)/1.5 var(--grotesk); color: var(--stein); } .karte__liste { list-style: none; margin: 0; padding: 0; font-family: var(--grotesk); font-size: var(--fs-klein); } .karte__liste li { margin: 0; } .karte__liste a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; } .karte__liste a:hover { color: var(--lehm-d); } .karte__liste span { color: var(--stein); font-size: var(--fs-mikro); } /* ---------- Suche mit Vorschlaegen ---------------------------------- */ .suche { position: relative; max-width: 30rem; } .suche label { display: block; font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; color: var(--lehm-d); margin-bottom: var(--r1); } .suche input { width: 100%; font: 400 var(--fs-body)/1.4 var(--serif); padding: .9rem 1rem; background: var(--papier); border: 1px solid var(--loden); color: var(--tinte); } .suche input:focus-visible { outline: 2px solid var(--lehm-d); outline-offset: 1px; } .suche__vorschlaege { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: var(--papier); border: 1px solid var(--loden); border-top: 0; max-height: 19rem; overflow-y: auto; } .suche__vorschlaege[hidden] { display: none; } .suche__vorschlaege a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; text-decoration: none; color: var(--tinte); font-family: var(--grotesk); font-size: var(--fs-klein); border-bottom: 1px solid var(--linie); } .suche__vorschlaege a:last-child { border-bottom: 0; } .suche__vorschlaege a:hover, .suche__vorschlaege a[aria-selected="true"] { background: var(--gruen-luft); color: var(--lehm-d); } .suche__vorschlaege span { color: var(--stein); font-size: var(--fs-mikro); } .suche__hilfe { font: 400 var(--fs-mikro)/1.5 var(--grotesk); color: var(--stein); margin-top: var(--r1); min-height: 1.2em; } /* ---------- Staedteliste je Bundesland ------------------------------ */ .land + .land { margin-top: var(--r6); } .land h3 { font-size: var(--fs-h2); margin-bottom: var(--r1); } .land__zahl { font: 400 var(--fs-klein)/1 var(--grotesk); color: var(--stein); margin-bottom: var(--r3); display: block; } /* ---------- Zahlenband auf der Startseite --------------------------- */ .zahlen { display: grid; gap: var(--r4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .zahlen b { display: block; font: 600 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--serif); letter-spacing: -.03em; color: var(--loden); margin-bottom: .35rem; } .feld--dunkel .zahlen b { color: var(--lehm); } .zahlen span { font: 400 var(--fs-klein)/1.5 var(--grotesk); color: var(--grau); } .feld--dunkel .zahlen span { color: #C8D2C6; } } /* ==================================================== STARTSEITE ======== */ @layer components { /* ---------- Leitkopf: Schlagzeile IM Bild, nicht daneben ------------ Der alte Kopf stellte Satz und Bild nebeneinander, beide gleich gross — der Vorgabe-Aufbau. Und das Bild zeigte Daecher: ohne den Text zu lesen war nicht zu erkennen, was die Firma tut. Jetzt traegt ein Bild der Arbeit die ganze Flaeche, der Verlauf faellt nach links, weil dort die Tischplatte leer ist, und die Schlagzeile liegt in dieser Leere. */ .leitkopf { position: relative; background: var(--loden-tief); } .leitkopf__bild { position: absolute; inset: 0; } .leitkopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 38%; } .leitkopf__schleier { position: absolute; inset: 0; background: linear-gradient(100deg, rgb(22 38 29 / .93) 0%, rgb(22 38 29 / .82) 32%, rgb(22 38 29 / .28) 62%, rgb(22 38 29 / .12) 100%); } .leitkopf__satz { position: relative; max-width: 34rem; padding-block: clamp(var(--r6), 11vw, 9rem); } .leitkopf .etikett { color: var(--lehm); } .leitkopf h1 { color: var(--papier); font-size: clamp(2.15rem, 1.3rem + 3vw, 3.8rem); line-height: 1.04; letter-spacing: -.028em; margin-bottom: var(--r3); } .leitkopf__lede { font-size: var(--fs-lede); color: #D5DDD2; margin-bottom: var(--r4); } /* Die Leistungsseiten tragen im Kopf drei Merkpunkte — die Startseite hat dafuer die Anlaessleiste. */ .leitkopf .merk { color: #D5DDD2; margin-bottom: var(--r4); } .leitkopf .merk li::before { border-color: var(--lehm); } .leitkopf__tat { display: flex; flex-wrap: wrap; gap: var(--r2); } /* Stadtseiten: dieselbe Figur, kleinere Schrift, breitere Spalte. Ihre Ueberschriften sind lang — im Median 74 Zeichen, bis 78 — waehrend die uebrigen Seiten mit 11 bis 35 auskommen. In derselben Groesse und derselben 34-rem-Spalte brach die Muenchner H1 auf vier Zeilen, und der Kopf wuchs auf 1043 px gegen 597 bis 729 px auf allen anderen Seiten. Dieselbe Falle steht schon bei --fs-riese im Kopf dieser Datei. */ .leitkopf--stadt .leitkopf__satz { max-width: 44rem; padding-block: clamp(var(--r5), 8vw, 7rem); } .leitkopf--stadt h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); } /* Die breitere Spalte reicht weiter nach rechts als auf den anderen Seiten — der Verlauf muss entsprechend spaeter aufhellen, sonst steht die letzte Zeile auf zu hellem Grund. */ .leitkopf--stadt .leitkopf__schleier { background: linear-gradient(100deg, rgb(22 38 29 / .94) 0%, rgb(22 38 29 / .90) 52%, rgb(22 38 29 / .40) 80%, rgb(22 38 29 / .16) 100%); } /* ---------- Zeitachse: der Ablauf als Schiene ---------------------- Der Ablauf stand als fuenf gleich lange Absaetze untereinander. Wer nicht alle fuenf las, nahm nichts mit — und niemand las alle fuenf. Jetzt traegt die SCHIENE die Aussage: sie ist lehmfarben, solange kein Auftrag besteht, und wird loden, sobald einer besteht. Wer nur hinsieht und kein Wort liest, hat die wichtigste Information trotzdem. Welche Station lehmfarben ist, sagen die Daten ueber .vor-auftrag — nicht nth-child. Eine Zaehlung im Gitter raet, und sie raet falsch, sobald ein Kopfelement dazwischenkommt. */ .zeitachse { list-style: none; margin: var(--r5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--stationen, 5), minmax(0, 1fr)); column-gap: var(--r2); counter-reset: st; } .zeitachse li { position: relative; counter-increment: st; margin: 0; padding-top: calc(var(--r3) + .4rem); } /* Die Linie laeuft in die Luecke hinein, damit sie durchgehend wirkt. */ .zeitachse li::before { content: ""; position: absolute; top: .86rem; left: 0; right: calc(var(--r2) * -1); height: 2px; background: var(--loden); opacity: .22; } .zeitachse li:last-child::before { right: 55%; } /* "vor-auftrag" auf der Startseite, "frueh" auf den Leistungsseiten: beide markieren den ersten Abschnitt der Schiene, meinen aber Verschiedenes — dort die Zeit vor dem Auftrag, hier die Vorbereitung vor dem Einsatz. */ .zeitachse li.vor-auftrag::before, .zeitachse li.frueh::before { background: var(--lehm-d); opacity: 1; } .zeitachse li::after { content: ""; position: absolute; top: .45rem; left: 0; width: .85rem; height: .85rem; background: var(--papier); border: 2px solid var(--loden); } .zeitachse li.vor-auftrag::after, .zeitachse li.frueh::after { background: var(--lehm); border-color: var(--lehm-d); } /* Nummer und Marke stehen in EINER Zeile. Als Blockelement schob die Nummer die Marke darunter und der Kopf der Station wurde dreizeilig. */ .zeitachse__kopf { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .5rem; } .zeitachse__nr { font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: .12em; color: var(--stein); } .zeitachse__nr::before { content: counter(st, decimal-leading-zero); } .zeitachse__frei { font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: .1em; text-transform: uppercase; color: var(--lehm-d); } .zeitachse h3 { font-size: var(--fs-h3); margin-bottom: .45rem; } .zeitachse p { font: 400 var(--fs-klein)/1.6 var(--grotesk); color: var(--grau); margin: 0; } /* Die Beschriftung sitzt im selben Gitter wie die Schiene und spannt ueber genau so viele Stationen wie der Abschnitt, den sie benennt. */ .spanne { display: grid; margin-top: var(--r4); column-gap: var(--r2); grid-template-columns: repeat(var(--stationen, 5), minmax(0, 1fr)); } .spanne > * { grid-column: span var(--weite, 1); padding-top: var(--r2); border-top: 1px solid var(--linie); font: 500 var(--fs-mikro)/1.4 var(--grotesk); letter-spacing: .06em; text-transform: uppercase; color: var(--stein); } .spanne > .vor-auftrag, .spanne > .frueh { color: var(--lehm-d); border-top-color: var(--lehm-d); } @media (max-width: 860px) { /* Gestapelt wird aus der Schiene eine senkrechte Leiste — dieselbe Aussage, dieselben zwei Farben. */ .zeitachse { grid-template-columns: minmax(0, 1fr); } .zeitachse li { padding: 0 0 var(--r4) var(--r4); } .zeitachse li::before { top: .5rem; bottom: 0; left: .36rem; right: auto; width: 2px; height: auto; } .zeitachse li:last-child::before { bottom: auto; height: 1.2rem; } .zeitachse li:last-child { padding-bottom: 0; } .zeitachse li::after { top: .3rem; } .spanne { grid-template-columns: minmax(0, 1fr); row-gap: var(--r2); } .spanne > * { grid-column: auto; } } /* ---------- Aktenreiter: derselbe Ablauf, ein Schritt auf einmal ---- Das Vokabular der Marke ist die Aktenfuehrung; der Registerreiter kommt aus ihrer eigenen Welt. Getrennt wird durch dieselbe Haarlinie wie in der Anlaessleiste des Kopfes — kein Kasten um die Zelle, das war der Fehler des ersten Anlaufs dieser Website. */ .reiter { display: grid; margin-top: var(--r4); gap: 1px; background: var(--linie); grid-template-columns: repeat(var(--register, 5), minmax(0, 1fr)); border-top: 1px solid var(--linie); } /* "Auftragsabstimmung", "Fotodokumentation" — deutsche Komposita passen in die schmale Reiterzelle nicht als ein Wort und schoben ihren Text ueber die Kante. Mit Trennung nach Sprachregel bricht das Wort sauber, break-word faengt den Rest ab. */ .reiter button { font: 500 var(--fs-klein)/1.25 var(--grotesk); letter-spacing: .02em; hyphens: auto; overflow-wrap: break-word; background: var(--papier); color: var(--grau); border: 0; text-align: left; padding: var(--r3) var(--r2); cursor: pointer; display: flex; flex-direction: column; gap: .45rem; transition: background var(--uebergang), color var(--uebergang); } .reiter button i { font-style: normal; font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: .12em; color: var(--stein); } .reiter button:hover { background: var(--gruen-luft); color: var(--tinte); } .reiter button[aria-selected="true"] { background: var(--loden); color: var(--papier); } .reiter button[aria-selected="true"] i { color: var(--lehm); } .reiter button.vor-auftrag i { color: var(--lehm-d); } .reiter button.vor-auftrag[aria-selected="true"] i { color: var(--lehm); } /* Auf gruenem Grund muss die Leiste mitgehen: fest gesetztes Papier haette dort einen hellen Block ergeben, und Papier auf Gruenluft heisst auf dieser Website "aufgelegte Karte" — eine Reiterleiste ist keine. Nur der gewaehlte Reiter bleibt Loden, er soll ja herausstehen. */ .feld--luft .reiter button { background: var(--gruen-luft); } .feld--luft .reiter button:hover { background: var(--papier); } .feld--luft .reiter button[aria-selected="true"] { background: var(--loden); } .registerblatt { background: var(--papier); border-top: 2px solid var(--loden); padding: clamp(var(--r4), 4vw, var(--r5)) 0 0; } .feld--luft .registerblatt { background: transparent; } .registerblatt[hidden] { display: none; } .registerblatt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--r2); margin-bottom: var(--r2); } .registerblatt__kopf h3 { font-size: var(--fs-h2); margin: 0; } .marke-frei { font: 500 var(--fs-mikro)/1 var(--grotesk); letter-spacing: .08em; text-transform: uppercase; padding: .45rem .8rem; background: var(--lehm); color: var(--loden-tief); } .registerblatt p { color: var(--grau); max-width: var(--lauf); margin: 0; } /* Register gehen in drei oder zwei Spalten selten glatt auf. Der letzte fuellt die Restzeile — sonst bleibt eine leere Zelle stehen, und die traegt die Trennlinienfarbe des Gitters als grauen Block. Wie weit er zu spannen hat, haengt an der Anzahl, und die kennt nur die Vorlage: der Ablauf hat immer fuenf Schritte, ein Schritte-Modul drei, vier oder fuenf. Ein pauschales "span 2" war bei fuenf richtig, haette bei drei aber eine vierte Spur aufgezogen und bei vier eine Zelle leer gelassen. Darum --span3/--span2 am letzten Reiter. */ @media (max-width: 720px) { .reiter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reiter button { padding: var(--r2); } .reiter button:last-child { grid-column: span var(--span3, 1); } } @media (max-width: 420px) { .reiter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reiter button:last-child { grid-column: span var(--span2, 1); } } /* ---------- Anlaesse: die drei Lagen, mit denen Leute anrufen. Direkt unter dem Kopf, damit der Leser sich sofort wiederfindet. ---------- */ .anlaesse { background: var(--loden-tief); border-top: 1px solid var(--linie-inv); } /* So viele Spalten, wie es Zellen gibt — die Vorlage sagt es ueber --spalten. auto-fit legte bei vier Kennwerten und breitem Schirm eine fuenfte, leere Spur an, und die zog eine Haarlinie ins Nichts. */ /* Getrennt wird ueber die LUECKE plus Hintergrund, nicht ueber Zellenraender. Mit "border-left" gab es nur senkrechte Linien: bei den sieben Akte-Werten der Stadtseite lagen zwei Zeilen uebereinander, ohne Strich dazwischen — und die erste Zelle der zweiten Zeile trug einen ueberzaehligen Strich links, weil ":first-child" nur die allererste meint, nicht die erste jeder Zeile. Die Luecke kennt beide Richtungen und kennt keine Raender. */ .anlaesse ul { display: grid; gap: 1px; background: var(--linie-inv); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); } @media (max-width: 1080px) { .anlaesse ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .anlaesse li { margin: 0; background: var(--loden-tief); } .anlaesse a { display: block; padding: var(--r3) var(--r2); text-decoration: none; color: var(--papier); transition: background var(--uebergang); } .anlaesse a:hover { background: var(--loden); color: var(--papier); } .anlaesse b { display: block; font: 600 var(--fs-h3)/1.2 var(--serif); margin-bottom: .35rem; } .anlaesse span { font: 400 var(--fs-klein)/1.5 var(--grotesk); color: #B6C2B4; } .anlaesse a:hover b { color: var(--lehm); } /* Geht die Zellenzahl in den Spalten nicht auf, fuellt die letzte die Restzeile — sonst steht dort eine leere Zelle in Trennlinienfarbe. WELCHE Zelle das ist, rechnet die Vorlage aus: sie kennt Zellenzahl und Spaltenzahl. Eine nth-child-Regel kann das nicht, sie sieht die Spaltenzahl nicht — mit ":nth-child(4n+3)" traf sie auf der Startseite die dritte von drei Zellen und schob sie in eine zweite Zeile. */ .anlaesse li.fuellt-2 { grid-column: span 2; } .anlaesse li.fuellt-3 { grid-column: span 3; } @media (max-width: 1080px) { /* Zwei Spalten: die Rechnung der Vorlage galt fuer vier. */ .anlaesse li.fuellt-2, .anlaesse li.fuellt-3 { grid-column: auto; } .anlaesse li:last-child:nth-child(odd) { grid-column: span 2; } } /* Dieselbe Leiste ohne Verweis: auf den Leistungsseiten stehen dort Kennwerte, keine Wege. Der Aufbau bleibt gleich, damit der Leser die Leiste von der Startseite wiedererkennt. */ .anlaesse__fest { display: block; padding: var(--r3) var(--r2); color: var(--papier); } .anlaesse__fest b { display: block; font: 600 var(--fs-h3)/1.2 var(--serif); margin-bottom: .35rem; } .anlaesse__fest span { font: 400 var(--fs-klein)/1.5 var(--grotesk); color: #B6C2B4; } @media (max-width: 900px) { .leitkopf__schleier { background: linear-gradient(to top, rgb(22 38 29 / .95) 45%, rgb(22 38 29 / .6) 100%); } .anlaesse ul { grid-template-columns: minmax(0, 1fr); } /* Gleich spezifisch wie die Zweispalten-Regel oben, sonst gewinnt sie: ":last-child:nth-child(odd)" schlaegt ":last-child", und ein "span 2" legt im Einspaltengitter eine implizite zweite Spalte an — daraus wurden zwei ungleich breite Spalten statt einer. */ .anlaesse li:last-child:nth-child(odd), .anlaesse li.fuellt-2, .anlaesse li.fuellt-3 { grid-column: auto; } } /* ---------- Bereiche: die drei Leistungen als Karten --------------- Der Abschnitt war der einzige reine Textblock der Seite, und er trennte mit einem BALKEN ueber jeder Spalte — waehrend alle neuen Bausteine (Anlaessleiste, Register, Grundsaetze) mit einer Haarlinie ZWISCHEN den Zellen trennen. Jetzt ist es dieselbe Zelle wie in der Anlaessleiste im Kopf: oben die kurze Frage "welcher Fall sind Sie?", hier dieselben drei Wege ausfuehrlich. Die GANZE Karte ist der Weg, nicht nur ein Textlink am Fuss der Spalte. Feste Spaltenzahl, kein auto-fit: eine leere Spur waere null Pixel breit, wuerde aber ueber Luecke und Hintergrund eine ueberzaehlige Haarlinie an den rechten Rand ziehen. */ /* Die Haarlinie zwischen den Zellen entsteht aus 1 px Luecke plus Hintergrund — dadurch stossen die drei Bilder fast aneinander. Zwischen zwei Fotografien ist eine Linie ohnehin Laerm: hier trennt Weissraum, und nur ueber und unter der Gruppe bleibt je eine Linie stehen, damit der Block in der Liniensprache der Seite bleibt. */ .bereiche { display: grid; gap: clamp(var(--r3), 3vw, var(--r4)); list-style: none; margin: var(--r5) 0 0; padding: var(--r4) 0; border-block: 1px solid var(--linie); grid-template-columns: repeat(3, minmax(0, 1fr)); } .bereiche li { margin: 0; } .bereiche a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--tinte); } .bereiche__bild { aspect-ratio: 3 / 2; overflow: clip; } .bereiche__bild img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--uebergang); } .bereiche a:hover .bereiche__bild img { scale: 1.03; } /* Ohne Zellenhintergrund fluchtet der Text mit der Bildkante — das ist ruhiger als ein eingerueckter Satz in einer Karte ohne Rahmen. */ .bereiche__text { padding: var(--r3) 0 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; } /* Ein Lehmstrich statt der Nummer — wie bei den Grundsaetzen. Drei Bereiche sind eine Menge, keine Folge; 01/02/03 behauptete eine Reihenfolge. */ .bereiche__text::before { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--lehm-d); margin-bottom: .3rem; } .bereiche__text h3 { font-size: var(--fs-h3); margin: 0; } .bereiche__text p { margin: 0; color: var(--grau); font: 400 var(--fs-klein)/1.65 var(--grotesk); } .bereiche__weg { margin-top: auto; padding-top: var(--r2); font: 500 var(--fs-klein)/1 var(--grotesk); color: var(--lehm-d); } /* Ohne Flaechenwechsel trägt die Rueckmeldung die Schrift: Titel in Lehm, Bild eine Spur naeher. */ .bereiche a:hover h3 { color: var(--lehm-d); } .bereiche a:hover .bereiche__weg { color: var(--loden); } @media (max-width: 860px) { .bereiche { grid-template-columns: minmax(0, 1fr); } } /* ---------- Bildband ueber die volle Breite, mit Bildunterschrift. --- */ /* ---------- Bildband ----------------------------------------------- Zwei Fehler des ersten Anlaufs. Der Anschnitt: 16:9 auf gut vier zu eins gekappt, vom Motiv blieb ein Streifen. Und die Unterschrift war ein Fluestern — 0,8 rem Steingrau unter einem 30 rem hohen Bild, dazu im Satzspiegel, waehrend das Bild randlos laeuft. Sie las sich wie eine verirrte Zeile, nicht wie eine Bildunterschrift. Jetzt traegt sie die Form, die diese Website fuer Beschriftungen ohnehin hat: Lehmetikett, Haarlinie, lesbare Groesse in der Serife. */ .bildband { position: relative; margin: 0; } /* Wenn das Band einem Textblock folgt, braucht es Luft nach oben — der Rand stand vorher als Inline-Stil in der Vorlage und liess sich von aussen nicht mehr aendern. */ .bildband--luft { margin-top: var(--r6); } .bildband img { width: 100%; height: clamp(20rem, 42vw, 34rem); object-fit: cover; } .bildband figcaption { display: grid; gap: var(--r1) var(--r3); margin-top: var(--r3); grid-template-columns: max-content minmax(0, 1fr); border-top: 1px solid var(--linie); padding-top: var(--r3); } .bildband__marke { font: 500 var(--fs-etikett)/1.5 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; color: var(--lehm-d); } .bildband__satz { max-width: var(--lauf); color: var(--tinte); font: 400 var(--fs-body)/1.6 var(--serif); } @media (max-width: 620px) { .bildband figcaption { grid-template-columns: minmax(0, 1fr); } } /* ---------- Grundsaetze: was wir nicht tun ------------------------- Der staerkste Text der Startseite stand in der kleinsten Schrift der Seite: dreispaltig, grau, 15 px. Jetzt traegt ihn eine Lodenflaeche — die dritte der Seite nach Kopf und Haltungsband, und sie steht genau dort, wo die Firma sagt, was sie NICHT tut. Kein Bild: eine Selbstverpflichtung mit einem Foto zu bebildern macht sie zur Werbung. Die drei Saetze liegen als Zellen mit Haarlinie nebeneinander — dasselbe Muster wie die Anlaessleiste im Kopf und die Registerleiste im Ablauf. */ .grundsaetze { background: var(--loden); color: var(--papier); padding-block: clamp(var(--r5), 7vw, var(--r7)); } .grundsaetze .etikett { color: var(--lehm); } .grundsaetze__kopf { display: grid; gap: var(--r3) var(--r5); align-items: end; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-bottom: var(--r5); } .grundsaetze h2 { color: var(--papier); margin: 0; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.026em; } .grundsaetze h2 em { font-style: italic; color: var(--lehm); } .grundsaetze__lede { color: #C8D2C6; font-size: var(--fs-lede); margin: 0; } /* Jede Zelle bekommt links UND rechts Luft, damit kein Text an seiner Trennlinie klebt. Damit die erste Zelle trotzdem mit der Ueberschrift fluchtet, zieht die Liste sich um genau dieses Mass nach aussen — mit "padding-left: 0" auf allen Zellen klebten sonst die zweite und die dritte an ihrer Linie. */ .grundsaetze__drei { display: grid; gap: 1px; background: var(--linie-inv); list-style: none; padding: 0; margin-inline: calc(var(--r3) * -1); border-top: 1px solid var(--linie-inv); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .grundsaetze__drei li { margin: 0; background: var(--loden); padding: var(--r4) var(--r3) var(--r3); } /* Ein Strich statt einer Nummer: drei Grundsaetze sind eine MENGE, keine Folge. Die alte Zaehlung 1—2—3 behauptete eine Reihenfolge, die es nicht gibt. Der Strich markiert sie als gleichrangig. */ .grundsaetze__drei li::before { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--lehm); margin-bottom: var(--r2); } .grundsaetze__drei h3 { color: var(--papier); font-size: var(--fs-h3); margin-bottom: .5rem; } .grundsaetze__drei p { color: #C8D2C6; margin: 0; font: 400 var(--fs-body)/1.65 var(--grotesk); } @media (max-width: 860px) { .grundsaetze__kopf { grid-template-columns: minmax(0, 1fr); align-items: start; } /* Gestapelt trennen waagerechte Linien — seitliche Luft braucht es dann nicht, und der Ausgleich nach aussen wuerde am schmalen Rand ueberlaufen. */ .grundsaetze__drei { margin-inline: 0; } .grundsaetze__drei li { padding: var(--r4) 0; } } /* ---------- Einsatzgebiet: Karte gross, Laender als Zellenreihe ---- Vorher stand die Karte in einer Spalte und daneben eine Liste, die dasselbe sagte wie die Karte — in 15,1 px. Darueber eine Anzeige mit "min-height: 4.5rem", die sich NUR beim Ueberfahren mit der Maus fuellt: auf dem Handy eine dauerhaft leere Box, und von dort kommt der meiste Verkehr. Jetzt bekommt die Karte die Mitte, und die Laender liegen darunter als Zellenreihe mit Haarlinie — dasselbe Muster wie Anlaesse, Register, Grundsaetze und Bereiche. Die Anzeige waechst nur noch, wenn sie etwas zu sagen hat. */ .gebiet__karte { max-width: 44rem; margin: var(--r5) auto 0; } .gebiet__karte svg { width: 100%; height: auto; display: block; overflow: visible; } .gebiet__anzeige { margin: var(--r3) 0 0; text-align: center; min-height: 3.2rem; } .gebiet__anzeige strong { display: block; font-size: var(--fs-h3); } .gebiet__anzeige span { font: 400 var(--fs-klein)/1.5 var(--grotesk); color: var(--stein); } .gebiet__laender { display: grid; gap: 1px; background: var(--linie); list-style: none; margin: var(--r5) 0 0; padding: 0; border-block: 1px solid var(--linie); grid-template-columns: repeat(4, minmax(0, 1fr)); } .gebiet__laender li { margin: 0; background: var(--gruen-luft); } .gebiet__laender a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: var(--r3) var(--r2); text-decoration: none; color: var(--tinte); transition: background var(--uebergang); } .gebiet__laender a:hover { background: var(--papier); } .gebiet__laender b { font: 600 var(--fs-h3)/1.2 var(--serif); } .gebiet__laender span { font: 400 var(--fs-klein)/1.4 var(--grotesk); color: var(--grau); } .gebiet__laender a:hover b { color: var(--lehm-d); } /* Sieben Laender gehen weder in vier noch in zwei Spalten auf. Das letzte fuellt die Restzeile — sonst bleibt eine leere Zelle stehen, und die traegt die Trennlinienfarbe des Gitters als grauen Block. */ .gebiet__laender li:last-child { grid-column: span 2; } @media (max-width: 880px) { .gebiet__laender { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .gebiet__laender { grid-template-columns: minmax(0, 1fr); } .gebiet__laender li:last-child { grid-column: auto; } } /* ---------- Tafeln: die Karten der Inhaltsmodule ------------------- Vorher standen sie ohne jede Trennung nebeneinander; bei sechs Eintraegen rutschten zwei Reihen ineinander, und die graue Schrift kam aus einem Inline-Stil im Markup statt aus einer Regel. Jetzt eigene Flaeche und Lehmkante oben — dieselbe Kante wie die Unzulaessig-Haelfte im Rechtsrahmen. Getrennt wird durch Weissraum: auf einer eigenen Flaeche ist eine Linie ueberfluessig. */ /* Sechs Spuren statt drei, damit die letzte Reihe immer aufgeht: eine Tafel nimmt normal zwei Spuren (drei je Reihe). Die Checklisten haben vier, fuenf oder sechs Eintraege — bei vier bekommen ALLE drei Spuren (zwei mal zwei), bei fuenf die letzten beiden (drei, dann zwei). Ohne das stuende bei 4 und 5 eine Tafel allein in der zweiten Reihe. Die Klassen setzt die Vorlage, weil nur sie die Anzahl kennt. */ .tafeln { display: grid; gap: clamp(var(--r3), 3vw, var(--r4)); list-style: none; margin: var(--r4) 0 0; padding: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); } .tafeln li { margin: 0; background: var(--gruen-luft); padding: var(--r3); border-top: 3px solid var(--lehm-d); grid-column: span 2; } .tafeln li.breit { grid-column: span 3; } .tafeln li.voll { grid-column: span 6; } .feld--luft .tafeln li { background: var(--papier); } .tafeln h3 { font-size: var(--fs-h3); margin-bottom: .5rem; } .tafeln p { margin: 0; color: var(--grau); font: 400 var(--fs-klein)/1.65 var(--grotesk); } /* Der hervorgehobene Satz eines Moduls: Lehmkante links statt Flaeche. Traegt den ersten Absatz eines Textmoduls und den Hinweis. */ .modul__lede { margin: var(--r4) 0; padding-left: var(--r3); border-left: 3px solid var(--lehm-d); font: 600 clamp(1.2rem, 1rem + 1vw, 1.7rem)/1.4 var(--serif); letter-spacing: -.015em; color: var(--tinte); max-width: 44rem; } /* Derselbe Lehmstrich, aber im Lesesatz: fuer Textmodule OHNE lede-Feld, wo der erste Absatz die Rolle uebernehmen muss. Die sind ein ganz anderes Kaliber — Median 369 Zeichen, keiner unter 234, waehrend die lede-Felder im Median 120 haben. Im grossen Serifensatz wurden daraus fuenf bis sechs Zeilen Grossschrift; bei den 43 Modulen mit nur EINEM Absatz war das dann die ganze Form. Der Strich haelt den Absatz trotzdem als Auftakt fest, damit das Modul nicht nackt dasteht. */ .modul__auftakt { margin: var(--r4) 0; padding-left: var(--r3); border-left: 3px solid var(--lehm-d); max-width: 52rem; color: var(--tinte); font: 400 var(--fs-body)/1.7 var(--grotesk); } .modul__rest p { color: var(--grau); max-width: 52rem; font: 400 var(--fs-body)/1.7 var(--grotesk); } @media (max-width: 860px) { .tafeln { grid-template-columns: minmax(0, 1fr); } .tafeln li, .tafeln li.breit, .tafeln li.voll { grid-column: auto; } } /* ---------- Faelle: eine Menge, keine Folge ----------------------- "Womit Unternehmen zu uns kommen" zaehlt Fallarten auf. Die Nummern 01–05 behaupteten dort eine Reihenfolge, die es nicht gibt — derselbe Fehler wie bei den Grundsaetzen und den Bereichen. Statt der Nummer der Lehmstrich, der sie als gleichrangig markiert. */ .faelle { display: grid; gap: var(--r4) clamp(var(--r3), 3vw, var(--r5)); list-style: none; margin: var(--r5) 0 0; padding: var(--r4) 0 0; border-top: 1px solid var(--linie); max-width: 62rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .faelle li { margin: 0; } .faelle li::before { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--lehm-d); margin-bottom: var(--r2); } .faelle h3 { font-size: var(--fs-h3); margin-bottom: .5rem; } .faelle p { margin: 0; color: var(--grau); font: 400 var(--fs-body)/1.65 var(--grotesk); } /* ---------- Kostenfaktoren ---------------------------------------- Das Kostenmodul ist keine Preistabelle — es sind fuenf oder sechs Faktoren mit je einem ganzen Erklaersatz. In der Werteform (.werte) stand der Satz rechtsbuendig in kleiner Grotesk und las sich wie ein Preis, den es hier nicht gibt und nicht geben darf. Derselbe Lehmstrich wie bei .faelle, aber mit gezaehltem Raster: fuenf Faktoren haetten im Dreierraster einen allein in der zweiten Reihe stehen lassen. Sechs Spuren, eine Karte nimmt zwei; bei Rest 2 nehmen die letzten beiden je drei. .faelle bleibt unangetastet, es traegt die Leistungsseiten. */ .faktoren { display: grid; gap: var(--r5) clamp(var(--r4), 4vw, var(--r5)); list-style: none; margin: var(--r5) 0 0; padding: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); } .faktoren li { margin: 0; grid-column: span 2; } .faktoren li.breit { grid-column: span 3; } .faktoren li.voll { grid-column: span 6; } .faktoren li::before { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--lehm-d); margin-bottom: var(--r2); } .faktoren h3 { font-size: var(--fs-h3); margin-bottom: .5rem; } .faktoren p { margin: 0; color: var(--grau); font: 400 var(--fs-body)/1.65 var(--grotesk); } /* Muss HINTER der Grunddefinition stehen: eine Medienabfrage erhoeht die Spezifitaet nicht, eine spaetere Regel mit gleicher Spezifitaet gewinnt. Weiter oben im Stylesheet blieb das Raster auf dem Handy sechsspurig und schob die Seite 55 px ueber den Rand. */ @media (max-width: 860px) { .faktoren { grid-template-columns: minmax(0, 1fr); } .faktoren li, .faktoren li.breit, .faktoren li.voll { grid-column: auto; } } /* Der Schlusssatz eines Abschnitts mit dem Weg daneben. Beim Kostenmodul traegt er die eigentliche Aussage — kein Pauschalpreis, die Zahl nennt das Erstgespraech — und stand bisher als kleine graue Bemerkung am Ende, wo sie niemand liest. */ .abschluss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3) var(--r4); margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid var(--linie); } .abschluss p { margin: 0; flex: 1 1 24rem; max-width: 40rem; color: var(--tinte); font: 400 clamp(1.05rem, .95rem + .5vw, 1.3rem)/1.5 var(--serif); } /* ---------- Lage: der Aufmacher der Stadtseite --------------------- Drei Absaetze untereinander in einer 38-rem-Spalte, rechts daneben ein Drittel leere Seite. Jetzt traegt der erste Absatz als Lede die volle Breite, die uebrigen stehen in zwei Spalten daneben — sie sind kurz (im Median 42 Woerter), dafuer taugt die Spalte. Kein Bild in diesem Abschnitt: unmittelbar darunter laeuft ohnehin das randlose Stadtbild. Zwei Bilder hintereinander waeren eines zu viel. */ .lage__lede { font-size: var(--fs-lede); line-height: 1.62; color: var(--tinte); max-width: 46rem; margin: 0 0 var(--r4); } .lage__spalten { display: grid; gap: var(--r3) clamp(var(--r4), 5vw, var(--r6)); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--r4); border-top: 1px solid var(--linie); } .lage__spalten p { margin: 0; color: var(--grau); } @media (max-width: 760px) { .lage__spalten { grid-template-columns: minmax(0, 1fr); } } /* ---------- Grundlage: was die Leistung beantwortet ---------------- Vorher drei lange Absaetze am Stueck — reiner Text, den niemand liest. Die Gliederung stand schon darin und wurde nur nicht gezeigt: ein Satz, der die Sache definiert; danach eine Gegenueberstellung, was beantwortet wird und was nicht; zuletzt zwei Aspekte. Kein Wort ist neu. Die Marken + und − sind dieselben wie im Rechtsrahmen weiter unten: die Seite sagt "dies ja, das nein" ueberall gleich. */ .grundlage__satz { font: 600 clamp(1.3rem, 1rem + 1.4vw, 2.1rem)/1.28 var(--serif); letter-spacing: -.02em; max-width: 40rem; margin: 0 0 var(--r4); text-wrap: balance; } .grundlage__paar { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); grid-template-columns: repeat(2, minmax(0, 1fr)); } .grundlage__paar > div { background: var(--papier); padding: var(--r3) var(--r3) var(--r3) 0; } .grundlage__paar > div + div { padding-left: var(--r3); } .grundlage__marke { display: flex; align-items: baseline; gap: .6rem; font: 500 var(--fs-etikett)/1.4 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; margin-bottom: var(--r2); } .grundlage__marke i { font-style: normal; font-size: 1.1rem; line-height: 1; } .grundlage__ja .grundlage__marke { color: var(--loden); } .grundlage__nein .grundlage__marke { color: var(--lehm-d); } .grundlage__paar ul { list-style: none; margin: 0; padding: 0; font: 400 var(--fs-body)/1.9 var(--serif); } .grundlage__paar li { margin: 0; } .grundlage__folge { margin: var(--r3) 0 0; max-width: var(--lauf); font: 400 var(--fs-body)/1.65 var(--grotesk); color: var(--grau); } .grundlage__aspekte { display: grid; gap: var(--r4) clamp(var(--r3), 4vw, var(--r5)); list-style: none; margin: var(--r5) 0 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .grundlage__aspekte li { margin: 0; } .grundlage__aspekte li::before { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--lehm-d); margin-bottom: var(--r2); } .grundlage__aspekte h3 { font-size: var(--fs-h3); margin-bottom: .5rem; } .grundlage__aspekte p { margin: 0; color: var(--grau); font: 400 var(--fs-body)/1.65 var(--grotesk); } @media (max-width: 760px) { .grundlage__paar { grid-template-columns: minmax(0, 1fr); } .grundlage__paar > div { padding: var(--r3) 0; } .grundlage__paar > div + div { padding-left: 0; } .grundlage__aspekte { grid-template-columns: minmax(0, 1fr); } } /* ---------- Grenze: zulaessig gegen unzulaessig -------------------- Vorher standen die beiden Listen ohne jede Trennung nebeneinander, in 15 px, und der wichtigste Unterschied des Abschnitts hing an einem winzigen Haken gegen ein STEINGRAUES Kreuz — das schwaechste Zeichen fuer die staerkste Aussage. Jetzt tragen zwei helle Gruende die Teilung, Loden und Lehm stehen als Kante, Marke und Zeichen. Vier Signale sagen dasselbe, keines laut. Die zweifarbige Oberkante ist dieselbe Figur wie die Schiene der Zeitachse: eine Linie, die ihren Zustand durch die Farbe sagt. */ .grenze { background: var(--papier); padding-top: clamp(var(--r5), 7vw, var(--r7)); } .grenze__kopf { padding-bottom: var(--r5); } .grenze__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .grenze__ja, .grenze__nein { padding-block: var(--r5); border-top: 3px solid; } .grenze__ja { background: var(--gruen-luft); border-top-color: var(--loden); } .grenze__nein { background: var(--papier); border-top-color: var(--lehm-d); } /* Aussen folgt der Satzspiegel, innen steht Luft zur Kante. Gerechnet aus PROZENT der Haelfte, nicht aus 100vw: 100vw enthaelt die Scrollleiste, .blatt zentriert sich aber ohne sie — sonst steht die Liste sieben Pixel neben ihrer Ueberschrift. */ .grenze__ja > div, .grenze__nein > div { max-width: calc(var(--blatt) / 2); } .grenze__ja > div { margin-left: auto; padding-left: var(--rand); padding-right: var(--r5); } .grenze__nein > div { margin-right: auto; padding-right: var(--rand); padding-left: var(--r5); } .grenze__marke { display: flex; align-items: baseline; gap: .65rem; font: 500 var(--fs-etikett)/1 var(--grotesk); letter-spacing: var(--sperr); text-transform: uppercase; margin-bottom: var(--r3); } .grenze__marke i { font-style: normal; font-size: 1.2rem; line-height: 1; } .grenze__ja .grenze__marke { color: var(--loden); } .grenze__nein .grenze__marke { color: var(--lehm-d); } .grenze__liste { list-style: none; margin: 0; padding: 0; } .grenze__liste li { position: relative; margin: 0; padding: var(--r2) 0 var(--r2) 1.7rem; border-top: 1px solid var(--linie); font: 400 var(--fs-body)/1.55 var(--grotesk); color: var(--tinte); } .grenze__liste li:first-child { border-top: 0; padding-top: 0; } .grenze__liste li::before { position: absolute; left: 0; top: var(--r2); font-weight: 600; } .grenze__liste li:first-child::before { top: 0; } .grenze__ja li::before { content: "+"; color: var(--loden); } .grenze__nein li::before { content: "−"; color: var(--lehm-d); } .grenze__fuss { padding-block: var(--r4) clamp(var(--r5), 7vw, var(--r7)); } @media (max-width: 760px) { .grenze__split { grid-template-columns: minmax(0, 1fr); } .grenze__ja > div, .grenze__nein > div { padding-inline: var(--rand); max-width: none; } .grenze__ja { padding-bottom: var(--r4); } } /* ---------- Haltung: ein Satz auf einem Bild ----------------------- Das Band zwischen Leistungen und Ablauf sagte dasselbe wie der Abschnitt "Wo wir ermitteln" weiter unten — 465 Staedte, sieben Laender, nur schwaecher und ohne Link. Jetzt traegt es den einen Satz, der sonst nirgends auf der Seite steht. */ .haltung { position: relative; background: var(--loden-tief); } .haltung__bild img { width: 100%; height: clamp(20rem, 42vw, 34rem); object-fit: cover; display: block; } .haltung__schleier { position: absolute; inset: 0; background: rgb(22 38 29 / .78); } .haltung__satz { position: absolute; inset: 0; display: flex; align-items: center; } .haltung blockquote { margin: 0; max-width: 40rem; } .haltung .etikett { color: var(--lehm); } /* Eigene Klassen statt Elementwahl: ".haltung blockquote p" schlaegt sonst die Beizeile und setzt sie in die grosse Serife. */ .haltung__zitat { font: 600 clamp(1.5rem, 1rem + 2.1vw, 2.6rem)/1.22 var(--serif); color: var(--papier); letter-spacing: -.022em; margin-bottom: var(--r3); text-wrap: balance; } .haltung__zitat em { font-style: italic; color: var(--lehm); } .haltung__fuss { font: 400 var(--fs-klein)/1.6 var(--grotesk); color: #B6C2B4; max-width: 32rem; margin: 0; } @media (max-width: 720px) { /* Absolut positionierter Text wird auf dem Handy zu eng: er rueckt unter das Bild, das dann seinerseits flacher werden darf. */ .haltung__satz { position: static; padding-block: var(--r5); } .haltung__schleier { display: none; } .haltung__bild img { height: clamp(12rem, 34vw, 18rem); } } /* ---------- Satz mit Bild daneben: Text links, Bild rechts. --------- */ .satzbild { display: grid; gap: clamp(var(--r3), 4vw, var(--r5)); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .satzbild--gedreht > :first-child { order: 2; } .satzbild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (max-width: 860px) { /* Gestapelt braucht es mehr Luft als nebeneinander: unter einem grossen Bild folgt sonst fast unmittelbar die kleine Versalzeile des Etiketts. Derselbe Abstand wirkt in der Spalte weit, in der Zeile eng. */ .satzbild { grid-template-columns: minmax(0, 1fr); row-gap: var(--r5); } .satzbild--gedreht > :first-child { order: 0; } } /* ---------- Grundsaetze: drei kurze Absaetze mit Nummer. ------------ */ .saetze { display: grid; gap: var(--r4); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: g; } .saetze > li { counter-increment: g; margin: 0; border-top: 1px solid var(--linie); padding-top: var(--r2); } .saetze h3 { font-size: var(--fs-h3); margin-bottom: .35em; } .saetze h3::before { content: counter(g) " — "; color: var(--lehm-d); font-family: var(--grotesk); font-size: var(--fs-mikro); font-weight: 500; vertical-align: .18em; } .saetze p { color: var(--grau); font-size: var(--fs-klein); } }