/* ═══════════════════════════════════════════════════════ Dein Immo Service Eingelassene Tafeln, große Typo, organische Formen. ═══════════════════════════════════════════════════════ */ @font-face { font-family:'General Sans'; src:url('../fonts/gs-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'General Sans'; src:url('../fonts/gs-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'General Sans'; src:url('../fonts/gs-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } /* IBM Plex Mono ist seit 2026-09-18 nicht mehr eingebunden: keine sichtbare Schrift nutzt sie noch. Die Dateien mono-400/500.woff2 liegen weiter in assets/fonts. */ :root { /* Zeilenmasken schneiden auf Zeilenhoehe. Bei line-height unter 1 fallen Unterlaengen (g, y, p) und Umlautpunkte aus dem Kasten. Die Masken bekommen deshalb diese Zugabe als Innenabstand und nehmen sie per negativem Aussenabstand im Layout wieder zurueck. */ --maske-oben: .18em; --maske-unten: .26em; /* Palette „Kalk & Klinker“ (2026-09-18). Das alte Creme #F1F3DA und Sand #E7EACB lagen im selben Gelbgruen und nur 1,09 : 1 auseinander — die Seite las sich einfarbig. Jetzt: warme Kalk- und Steintoene, dazu Klinker, Nebel und Moos als Abschnitts- und Bereichsgruende. Gruen und Limette bleiben Markenkern, Wald nur noch als Rahmen (Film, Leiste, Fuss). Kontraste gemessen: Fliesstext >= 9,9 : 1, --ink-quiet >= 5,9 : 1 auf jedem hellen Grund. --tinte-ziegel nie auf Dunkel, Limette nie als Text auf Hell. */ --kalk: #F7F4EE; --stein: #ECE6DA; --klinker-hell: #F2E1D6; --nebel: #E4EAEC; --moos-hell: #E3EAD4; --papier: #FBFAF6; /* Limette hell (Runde 3): der eine helle, kraeftige Moment je Unterseite (Schlussblock). Wald darauf 10,35 : 1, Text 9,09 : 1, leise 6,23 : 1. */ --limette-hell: #E9F0AA; --tinte-ziegel: #933F20; --tinte-wasser: #2F5C75; --surface-page: var(--kalk); --surface-gras: #356B26; --surface-sand: var(--stein); --surface-panel: #1F3A26; --accent: #CFE82B; --ink-on-dark: #FFFFFF; --ink-muted: rgba(255,255,255,.68); --ink-on-accent: #1F3A26; --ink-body: #35402F; --ink-quiet: #4E5847; --line-dark: rgba(31,58,38,.16); --line-light: rgba(255,255,255,.16); --inset: 40px; --radius: clamp(22px, 2.2vw, 34px); --pad-x: 40px; --pad-t: 32px; --pad-b: 48px; --breit: 1240px; --schrift: 'General Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --kurve: cubic-bezier(.7, 0, .3, 1); /* Schriftstaffel (2026-09-18). Eine Groesse je Rolle, jede Stufe mindestens 1,25-mal die naechste, Lesetext nie unter 18 px, nichts Lesbares unter 16 px. Ueberschriften wachsen mit dem Fenster, Fliesstext steht fest. Werte bei 390 / 1440 px: --t-h1 40 / 76 Seitentitel (Hero-Aussage, H1 der Unterseiten) --t-h1-lang 32 / 52 H1 aus ganzen Saetzen (Ratgeber-Artikel, Recht) --t-h2 32 / 64 Sektionstitel (.kapitel__titel; bis Runde 4: 76) --t-h2-lang 28 / 49,6 Sektionstitel aus zwei Saetzen --t-h3 22 / 32 Bahn-, Schritt-, Kartentitel --t-lead 20 / 24 Vorspann unter einem Titel --t-body 19 Fliesstext --t-klein 17,5 Meta, Bildunterschrift, Formularlabel --t-etikett 16,5 nur Versal-Etiketten mit Sperrung (Fuss-Spalten, dt) */ --t-h1: clamp(2.5rem, 1.35rem + 3.9vw, 4.75rem); --t-h1-lang: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); /* 64 statt 76 px bei 1440: vorher waren H2 und die H1 der Unterseiten gleich gross (76), und zwoelf Abschnitte oeffneten mit derselben Riesenzeile. Jetzt: Hero 98 > H1 Unterseiten 76 > H2 64 > H2-lang 50. */ --t-h2: clamp(2rem, 1.257rem + 3.048vw, 4rem); --t-h2-lang: clamp(1.75rem, .9rem + 2.6vw, 3.1rem); --t-h3: clamp(1.375rem, 1.143rem + .952vw, 2rem); /* 2026-09-19 fuer die aelteren Besucher eine weitere Stufe hoeher (Kundenwunsch): Lead 20/24, Text 19, Klein 17,5, Etikett 16,5. Alle festen Groessen unter 18 px sind im selben Zug um 1,5 px gestiegen, ausgenommen Leiste und Marke (Platz in der Zeile ab 1321 px). Vorher: Lead 19/23, Text 18, Klein 16, Etikett 15. */ --t-lead: clamp(1.25rem, 1.0625rem + .5vw, 1.5rem); --t-body: 1.1875rem; --t-klein: 1.09375rem; --t-etikett: 1.03125rem; /* Zeilenhoehen und Laufweite dazu */ --z-titel: 1.02; /* h1, h2 */ --z-kopf: 1.18; /* h3, Vorspann */ --z-text: 1.55; /* Fliesstext */ --sperr-titel: -.03em; /* Eine Bildbehandlung fuer die Fotos der Seite: die Stockbilder kommen aus sechs Lichtwelten (Neongruen, Kunstlicht-Rot, Graublau ...). Eine leichte Entsaettigung und etwas Kontrast bringen sie auf eine Linie. */ --bild-filter: saturate(.88) contrast(1.04); /* Formen und Schatten (Runde 4). Vorher 34 Radius- und 65 Schattenwerte, der lauteste Rest des Baukasten-Looks. Jetzt eine Skala: --r-klein 6 px Etiketten, kleine Felder, Fokus --r-mittel 12 px Karten, Kaesten, Eingaben --r-gross 22-34 Tafeln und grosse Bilder (= --radius / --tafel-r) --r-pille Knoepfe und Filter dazu 50 % fuer Kreise und die Formen aus der Vorlage (Sockelblatt, Nische, Kehlen). Schatten in drei Stufen, eine Farbe (Waldschwarz), kein farbiges Gluehen: 1 liegt auf, 2 schwebt, 3 hebt ab. Ringe per box-shadow (0 0 0 1px ...) sind Kanten, keine Schatten, und bleiben. */ --r-klein: 6px; --r-mittel: 12px; --r-gross: clamp(22px, 2.2vw, 34px); --r-pille: 999px; --schatten-1: 0 1px 0 rgba(31,58,38,.06), 0 18px 40px -28px rgba(31,58,38,.45); --schatten-2: 0 8px 22px -10px rgba(15,30,18,.42); --schatten-3: 0 22px 48px -18px rgba(15,30,18,.5); } /* Auf breiten Schirmen waechst die Satzbreite mit: bei 1920 standen die Inhalte als 1240 px schmale Mitte unter einem 1840 px breiten Hero. */ @media (min-width: 1680px) { :root { --breit: clamp(1240px, 72vw, 1440px); } /* Mit der breiteren Satzspalte wuerden zwei Absaetze ueber 75 Zeichen je Zeile laufen (gemessen bei 1920: Rechner-Fussnoten 94, Karriere- Etappen 85). Sie bekommen hier ihr Mass. */ .rechner__fuss > p { max-width: 56ch; } .karretappe__lauf { max-width: 52ch; } } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Die Leiste liegt fest ueber der Seite. Ohne Polster landet jede Sprungmarke unter ihr, und die angesprungene Ueberschrift wird oben angeschnitten - aus "Anfragen" wurde so optisch "antragen". Der Ausgleich im Skript faellt weg, sobald Bewegung abgeschaltet ist, deshalb steht er hier zusaetzlich. Gemessene Leistenhoehe: 86 px oberhalb der Menueschwelle, 63 px darunter; der Rest ist Luft, damit das Ziel nicht an der Kante der Leiste klebt. */ html { scroll-padding-top: 100px; } @media (max-width: 1320px) { html { scroll-padding-top: 78px; } } body { font-family: var(--schrift); /* 18 statt 17: die Seite wird auch von aelteren Auftraggebern gelesen, und alles ohne eigene Angabe haengt an diesem Wert. */ font-size: var(--t-body); font-weight: 400; line-height: var(--z-text); font-kerning: normal; background: var(--surface-page); color: var(--ink-body); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Umbruch (2026-09-18, fuer alle Seiten freigegeben): Ueberschriften gleichen ihre Zeilen aus, Absaetze vermeiden ein einzelnes Wort in der letzten Zeile. Auf schmalen Schirmen duerfen Ueberschriften trennen: deutsche Komposita ("Berufshaftpflichtversicherung", "Datenschutzerklaerung") sind bei 320 px breiter als die Spalte. Alle Seiten tragen lang="de", die Trennung folgt also deutschen Regeln. */ h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* Silbentrennung nur, wo es ohne nicht geht. Aeltere Leser stolpern ueber jeden Trennstrich (DGUV-Artikel bei 390: 14 von 38 Zeilen getrennt). Ueber 360 px wird deshalb nicht getrennt; ein Wort, das breiter ist als die Spalte ("Wohnungseigentuemergemeinschaften" bei 320 px), bricht dank overflow-wrap trotzdem um, statt die Seite quer zu schieben. Erst bis 360 px trennt der Browser, und dann nur Woerter ab 14 Zeichen mit mindestens 6 vor und 6 nach dem Strich. */ @media (max-width: 480px) { h1, h2, h3, p, li, dd, td { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; } } @media (max-width: 360px) { h1, h2, h3, p, li, dd, td { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; } } /* ── Fokusring ── Grundregel in Wald: der Ring in Limette hatte auf Kalk, Stein, Papier und Klinker nur um 1,3 : 1 und war dort unsichtbar. Wo der Grund dunkel ist (Wald-Leiste, Hero-Film, Weite-Bild, Rasen, Fuss, dunkle Felder), setzt der Abschnitt --fokus auf Limette; alles darin erbt es. Eigene Regeln einzelner Bauteile bleiben gueltig, sie sind spezifischer. */ :root { --fokus: var(--surface-panel); } :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: var(--r-klein); } .leiste.ist-tief, .leiste--seite, #kopfzeile, .weite, #fuerwen, .fuss, .feld--dunkel, .feld--gras, .tafel--flach.feld--dunkel, .karriere__kopf, .lupe { --fokus: var(--accent); } /* Die Ziele stehen breit auf Film oder Wald, im Klappblatt auf Kalk. Ist das Blatt offen, liegen auch Marke und Knopf darauf. */ @media (min-width: 1321px) { .glieder { --fokus: var(--accent); } } @media (max-width: 1320px) { .glieder, .leiste:has(.glieder.ist-offen) { --fokus: var(--surface-panel); } } .skip { position: fixed; inset-inline-start: 1rem; top: -100px; z-index: 120; padding: .8rem 1.2rem; background: var(--surface-panel); color: var(--ink-on-dark); font-size: 18.5px; font-weight: 600; border-radius: var(--r-klein); } .skip:focus { top: 1rem; } .mitte { width: 100%; max-width: var(--breit); margin-inline: auto; } /* ═══════ KOPFZEILE ═══════ */ /* Die Leiste traegt Marke, Ziele als Pillen und das Angebot als Knopf. Am Seitenanfang der Startseite liegt sie ohne Grund in den hellen Aussparungen des Heros; gescrollt und auf allen Unterseiten steht sie auf deckendem Wald. Vorher war das ein Glasrezept (20 % Gruen, blur 30, saturate 2, brightness .6). Ueber hellen Sektionen ergab das ein trübes Oliv-Khaki, das es sonst nirgends auf der Seite gab, und es war ein zweites Glasrezept neben der Glaskarte. Jetzt: ein Ton, keine Filter. */ .leiste { /* --tief kommt vom Skript und laeuft von 0 auf 1, waehrend die ersten 140 px gescrollt werden; der Grund faehrt damit stufenlos hoch. */ --tief: 0; position: fixed; inset: 0 0 auto 0; z-index: 100; /* Ganz deckend: bei .96 schien weisse Schrift aus dem Film als Geister- zeile durch die Leiste. */ background: rgba(31,58,38, var(--tief)); border-bottom: 1px solid rgba(255,255,255, calc(var(--tief) * .07)); box-shadow: 0 calc(var(--tief) * 8px) calc(var(--tief) * 28px) rgba(6,16,10, calc(var(--tief) * .16)); } .leiste__zeile { position: relative; z-index: 2; /* Die Zeile richtet sich an der Tafel aus, nicht an der Satzbreite: nur so sitzen Marke und Knopf mit gleichem Rand in ihren Aussparungen. Vorher stand die Marke bei 1440 sechzig Pixel innerhalb der Aussparung und klebte bei 1280 an deren Kante. */ max-width: none; /* Etwas mehr Luft nach oben als nach unten: dann sitzen Marke und Knopf mittig in ihren Aussparungen, die erst an der Tafelkante beginnen. */ padding: 17px calc(var(--inset) + 22px) 13px; display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); transition: padding .35s var(--kurve); } /* Gescrollt ist die Leiste kein Rahmen mehr, sondern nur noch Werkzeug: 86 -> 67 px. Marke und Knopf behalten ihre Groesse, sonst stimmte die Messung der Aussparungen nach einem Fensterwechsel nicht mehr. Unter der Menueschwelle ist die Zeile ohnehin schon 68 px hoch. */ @media (min-width: 1321px) { .leiste.ist-tief .leiste__zeile { padding-top: 7px; padding-bottom: 7px; } } /* ── Marke ── */ .marke { display: flex; align-items: center; gap: 11px; } /* Das Logo steht auf einer weißen Plakette. Frei auf dem Grund verschwand es, sobald die Leiste über grüne oder limettenfarbene Sektionen lief (Kundenhinweis 2026-09-14). Im dunklen Siegel davor war es stumpf — die helle Scheibe mit feinem Ring und Schatten trägt auf Creme, Dunkelgrün und Limette gleich, und das Logo behält seine eigenen Farben. */ .marke__zeichen { width: clamp(46px, 3.7vw, 56px); height: auto; flex: none; box-sizing: border-box; aspect-ratio: 1; object-fit: contain; padding: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(20,45,25,.12), var(--schatten-2); transition: transform .45s var(--kurve), box-shadow .45s var(--kurve); } .marke:hover .marke__zeichen, .marke:focus-visible .marke__zeichen { box-shadow: 0 0 0 2px var(--accent), var(--schatten-2); } .marke:hover .marke__zeichen, .marke:focus-visible .marke__zeichen { transform: rotate(-5deg) scale(1.05); } /* Der Name steht weiss auf dem Wald (Kundenwunsch) und braucht dort keinen Schatten mehr: der Grund ist deckend. Am Seitenanfang der Startseite steht er in der hellen Aussparung, dort dunkel. */ .marke__name { font-size: 19px; font-weight: 600; letter-spacing: -.016em; color: var(--ink-on-dark); white-space: nowrap; transition: color .3s var(--kurve); } .leiste:not(.ist-tief) .marke__name { color: var(--surface-panel); } /* Die Ziele stehen in der Mitte der Zeile, Marke und Knopf an den Enden — wie im Rahmen darunter, wo die Aussparungen dieselben drei Punkte markieren. */ .glieder { display: flex; align-items: center; gap: clamp(4px, .45vw, 8px); margin-inline: auto; } /* Die Ziele stehen als Pillen, nicht als blanke Schrift. Die Leiste liegt halb auf der hellen Aussparung und halb auf dem Film — nur ein eigener Grund traegt beide Lagen. Der Trieb, der frueher unter dem Wort auswuchs, ist damit hinfaellig: die Pille ist der Zustand. */ /* Nebenziele. Die Zeile trägt seit der Galerie neun Ziele und drei Kreise; bis 1536 px ragte der Angebot-Knopf über den Rand. Statt die Pillen wieder klein zu machen trägt die Zeile nur noch die sechs Hauptziele. "Für wen", "Jahresvertrag" und "Ratgeber" stehen im aufgeklappten Blatt und im Fuß — erreichbar bleiben sie überall, nur nicht doppelt im engsten Raum. */ /* .glieder a ist spezifischer als eine blosse Klasse und haette das display zurueckgeholt — der Selektor braucht denselben Nachdruck. */ .glieder a.glieder__neben { display: none; } @media (max-width: 1320px) { .glieder a.glieder__neben { display: inline-flex; } } /* Grund, Rand und Schatten der Pillen kommen aus Variablen: ueber dem Film brauchen sie einen dunklen Eigengrund, auf dem Wald nur eine helle Haarlinie. So bleiben Anfahren und aktives Ziel (.ist-hier), die den Grund direkt setzen, in jedem Zustand staerker. */ .glieder a { position: relative; display: inline-flex; align-items: center; padding: 8px clamp(11px, .95vw, 16px); border-radius: var(--r-pille); /* 2026-09-19 in zwei Schritten von 15-16,5 auf 17,5-19 px (Kundenwunsch, aeltere Besucher). Gemessen bei 1321 px: zwischen Marke, Pillen und Knopf bleiben mindestens 46 px Luft. */ font-size: clamp(17.5px, 1.2vw, 19px); font-weight: 500; white-space: nowrap; letter-spacing: -.005em; color: rgba(255,255,255,.94); background: var(--pille-grund, rgba(10,26,14,.42)); box-shadow: inset 0 0 0 1px var(--pille-rand, rgba(255,255,255,.16)); text-shadow: var(--pille-schatten, 0 1px 2px rgba(6,16,10,.45)); transition: background .3s var(--kurve), color .3s var(--kurve), box-shadow .3s var(--kurve), transform .3s var(--kurve); } @media (min-width: 1321px) { .leiste.ist-tief { --pille-grund: rgba(255,255,255,.06); --pille-rand: rgba(255,255,255,.15); --pille-schatten: none; } } /* Der Trieb waechst beim Anfahren unter der Pille aus. In der Design-Runde 2026-09-18 abgeschaltet, am 2026-09-19 auf Kundenwunsch zurueck und neu gezeichnet: vorher lag die Zeichnung links der Mitte (Linie ab dem linken Rand, Blatt nur rechts), und in der gescrollten Leiste ragte sie 1 px ueber deren Unterkante. Jetzt mittig (Knospe links, Blatt rechts), ganz innerhalb der Leiste. Ablauf: die Linie waechst von links, die Knospe springt auf, dann das Blatt, das sich danach leicht wiegt. Beim Verlassen zieht sich alles schnell zurueck. Im Klappmenue bleibt er aus (siehe Media-Query unten). */ .trieb { position: absolute; inset-block-start: calc(100% + 1px); inset-inline-start: 50%; width: 60px; height: auto; aspect-ratio: 72 / 16; transform: translateX(-50%); overflow: visible; pointer-events: none; } .trieb__linie { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 46; stroke-dashoffset: 46; transition: stroke-dashoffset .3s var(--kurve) .08s; } .trieb__knospe, .trieb__blatt { fill: var(--accent); transform: scale(0) rotate(-35deg); transition: transform .22s var(--kurve); } .trieb__knospe { transform-origin: 25px 11.5px; } .trieb__blatt { transform-origin: 50px 8px; } .glieder a:is(:hover, :focus-visible) .trieb__linie { stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1); } .glieder a:is(:hover, :focus-visible) .trieb__knospe { transform: scale(1) rotate(0deg); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .22s; } .glieder a:is(:hover, :focus-visible) .trieb__blatt { transform: scale(1) rotate(0deg); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .36s; animation: trieb-wiegen 2.8s ease-in-out .95s infinite; } @keyframes trieb-wiegen { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1) rotate(-10deg); } } @media (prefers-reduced-motion: reduce) { .trieb * { transition: none !important; animation: none !important; } } .glieder a:hover, .glieder a:focus-visible { background: var(--accent); color: var(--ink-on-accent); box-shadow: none; text-shadow: none; transform: translateY(-1px); } /* ── Kurzer Weg in der Leiste ── */ /* Mit Blatt wie vor der Design-Runde: der Kunde wollte das Zeichen im Knopf zurück. Links weniger Polster, weil das Blatt optisch Luft mitbringt. */ .leiste__tat { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px 14px 21px; border-radius: var(--r-pille); background: var(--accent); color: var(--ink-on-accent); font-size: 19px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap; box-shadow: var(--schatten-2); transition: transform .4s var(--kurve), box-shadow .4s var(--kurve), background .3s var(--kurve); } .leiste__tat-blatt { width: 19px; height: 19px; flex: none; fill: currentColor; transition: transform .45s var(--kurve); } .leiste__tat:hover, .leiste__tat:focus-visible { transform: translateY(-1px); background: #DCEE5A; box-shadow: var(--schatten-3); } .leiste__tat:hover .leiste__tat-blatt, .leiste__tat:focus-visible .leiste__tat-blatt { transform: rotate(-16deg) scale(1.14); } /* Fokus in der Leiste: Marke, Ziele und Knopf liegen zugleich auf den hellen Aussparungen, auf dem Film und auf dem Wald. Ein einfarbiger Ring faellt dort immer irgendwo durch (gemessen bis 1,2 : 1). Deshalb ein Doppelring: innen Wald, aussen Limette - einer von beiden traegt auf jedem Grund. Der Sprunglink oben links bekommt denselben. */ .leiste :is(a, button):focus-visible, .skip:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 3px var(--surface-panel); } /* 48 px, nicht 40. Auf dem Telefon ist das der einzige Weg in die Navigation, und die Seite ist fuer Leser gebaut, die nicht zielsicher tippen. Gemessen am 2026-09-08: vorher 40 x 40 px, unter der eigenen Vorgabe von 48 px und unter den 44 px der Zugaenglichkeitsrichtlinie. Die Balken sitzen mittig, ihre Abstaende wachsen mit. */ .klapp { display: none; width: 48px; height: 48px; position: relative; cursor: pointer; flex: none; } .klapp span { position: absolute; left: 13px; width: 22px; height: 2px; background: var(--ink-on-dark); transition: transform .5s var(--kurve), background .5s var(--kurve); } .klapp span:nth-child(1) { top: 20px; } .klapp span:nth-child(2) { top: 27px; } /* Am Seitenanfang steht die Klappe auf der hellen Aussparung: dort traegt nur dunkle Schrift. Gescrollt liegt sie auf dem Wald. */ .leiste:not(.ist-tief) .klapp span { background: var(--surface-panel); } .klapp[aria-expanded="true"] span { background: var(--surface-panel); } .klapp[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .klapp[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* ── Einsatzjahr auf hellem Grund ── Das Band lag im Film und trug seinen Kontrast über Glas und Schatten. Auf dem hellen Streifen braucht es beides nicht — und darf dafür atmen. */ #jahresbogen .jahrring--hell { position: static; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; /* Schatten und Oberkante trug das Band, solange es im Film lag. Auf dem hellen Streifen zeichneten sie einen Kasten, den es nicht gibt. */ box-shadow: none; border-top: 0; color: var(--ink-body); } #jahresbogen .jahrring--hell::before { display: none; } #jahresbogen .jahrring--hell .jahrring__liste { gap: clamp(10px, 1.6vw, 26px); } #jahresbogen .jahrring--hell .uhr { margin-inline-start: -10px; padding: 10px; } #jahresbogen .jahrring--hell .uhr__flaeche { background: rgba(31,58,38,.06); } #jahresbogen .jahrring--hell .uhr__jahr { stroke: rgba(31,58,38,.14); } #jahresbogen .jahrring--hell .uhr__zeichen { color: var(--surface-gras); } #jahresbogen .jahrring--hell .uhr:hover .uhr__zeichen { color: #4C6B21; } #jahresbogen .jahrring--hell .uhr__name { color: var(--ink-body); text-shadow: none; } #jahresbogen .jahrring--hell .uhr__wann { color: var(--ink-quiet); text-shadow: none; } #jahresbogen .jahrring--hell .uhr.ist-saison .uhr__zeichen { color: #4C6B21; } #jahresbogen .jahrring--hell .uhr.ist-saison .uhr__name { color: var(--surface-panel); } /* Limette traegt auf hellem Grund nicht (1,2 : 1). Die Boegen sind eine Aussage und brauchen 3 : 1: Rasengruen (6,0 : 1 auf Kalk), der Winterdienst in Wasserblau wie im Jahresband weiter unten. */ #jahresbogen .jahrring--hell .uhr__bogen { stroke: var(--surface-gras); } #jahresbogen .jahrring--hell .uhr[href="#werk-3"] .uhr__bogen { stroke: var(--tinte-wasser); } #jahresbogen .jahrring--hell .uhr[href="#werk-3"] .uhr__zeichen { color: var(--tinte-wasser); } /* ═══════ WEITE ═══════ Das einzige Bild der Seite ohne Einzug und ohne Radius. Der Bruch ist Absicht: alles andere sitzt als eingelassene Tafel, dieses eine liegt randlos. Deshalb braucht es auch keine eigene Überschrift — die Größe ist die Aussage. */ .weite { position: relative; } .weite__rahmen { position: relative; margin: 0; height: clamp(420px, 86vh, 820px); overflow: hidden; isolation: isolate; background: var(--surface-panel); } .weite__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; } /* Der Verlauf liegt nur unten und nur so hoch, wie die Schrift reicht: die Rasenfläche oben bleibt unberuehrt. 2026-09-19 zurueck auf die Staerke vor der Design-Runde (User-Wunsch: Bild so hell wie vorher). Der Eckverlauf mit .84 dunkelte das halbe Bild ab; den Kontrast der Schrift halten jetzt Glaskarte (Blur) und Textschatten. */ .weite__rahmen::after { content: ''; position: absolute; inset: auto 0 0 0; height: 52%; background: linear-gradient(to top, rgba(8,20,11,.6), rgba(8,20,11,.26) 40%, rgba(8,20,11,0)); pointer-events: none; } /* Die Karte sitzt unten links im Band; Grund, Blur und Licht bringt sie selbst mit (.glaskarte). */ .weite__wort { position: absolute; z-index: 2; inset: auto auto clamp(24px, 3.4vw, 52px) clamp(24px, 3.4vw, 52px); max-width: min(640px, 78%); margin: 0; padding: 0; color: var(--ink-on-dark); } .weite__satz { max-width: 20ch; font-size: clamp(30px, 4.4vw,60px); font-weight: 600; line-height: 1.06; letter-spacing: -.028em; text-wrap: balance; /* Ohne Deckung im Grund liegt der Kontrast allein an der Schrift: ein enger Schatten unter den Glyphen, kein Schleier. */ text-shadow: 0 1px 2px rgba(6,16,10,.7), 0 3px 22px rgba(6,16,10,.65); } /* Einfarbig: die Limette auf sonnigem Rasen war Gruen auf Gruen, und "zweite Haelfte in Akzent" traegt schon die Hero-Ueberschrift. Die Betonung liegt im Zeilenbruch. */ .weite__satz em { font-style: normal; color: inherit; } /* Der Weg steht von Anfang an in Akzent und wird bei Beruehrung ruhig: auf dem grossen Bild ist das die einzige Marke, die sofort zu sehen sein muss. 2026-09-19 mit Blatt zurueck auf die Fassung vor der Design-Runde (User-Wunsch). */ .weite__weg { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(18px, 2.4vw, 28px); padding: 11px 20px 11px 15px; border-radius: var(--r-pille); border: 1px solid var(--accent); background: var(--accent); color: var(--ink-on-accent); font-size: 18.5px; font-weight: 600; transition: background .4s var(--kurve), border-color .4s var(--kurve), color .35s var(--kurve), transform .4s var(--kurve); } .weite__blatt { width: 18px; height: 18px; flex: none; fill: currentColor; transition: transform .45s var(--kurve), fill .35s var(--kurve); } /* Beim Hover wird der Knopf weiss (User-Wunsch 2026-09-19). Das Blatt bleibt dabei in der Schriftfarbe: Limette auf Weiss waere kaum zu sehen. */ .weite__weg:hover, .weite__weg:focus-visible { background: #fff; border-color: #fff; color: var(--ink-on-accent); transform: translateY(-2px); } .weite__weg:hover .weite__blatt, .weite__weg:focus-visible .weite__blatt { transform: rotate(-16deg) scale(1.12); } /* ═══════ RAHMEN DES HEROS ═══════ Die Tafel ist nicht rechteckig ausgestanzt, sondern hat Aussparungen: oben zwei, in denen Marke und Angebot der Leiste stehen, unten drei Blöcke, die aus dem Rahmen in das Bild greifen. Die Kehlen an ihren Kanten sind Kreisverläufe — dieselbe Rundung wie die Tafelecke, nur nach innen gedreht. Zusammen liest sich der Hero als ausgeschnittenes Blatt statt als aufgelegtes Bild. */ :root { --tafel-r: clamp(22px, 2.2vw, 34px); --kehle: clamp(22px, 2.3vw, 34px); --kerbe-h: clamp(56px, 6.8vh, 72px); /* Der Sockel fasst den Hero nicht an: die Tafel endet, dann kommt ein Spalt Grund, dann die Bloecke. */ --sockel-luft: clamp(12px, 1.4vw, 20px); --sockel-fuge: clamp(10px, 1.1vw, 16px); /* Die Bloecke stehen nicht auf der Tafelkante, sondern um denselben Betrag eingerueckt, der auch zwischen ihnen liegt: so sitzen sie im Rahmen statt an ihm. */ --sockel-rand: clamp(12px, 1.3vw, 20px); /* Aussenspalte des Sockels, in Anteilen von .94 / 1.12 / .94 */ --sockel-aussen: calc((100% - 2 * var(--sockel-rand) - 2 * var(--sockel-fuge)) * .3133); --fuss-h: clamp(42px, 5.4vh, 66px); /* Die Aussparungen umschliessen Marke und Knopf mit demselben Rand, mit dem die Zeile an der Tafel sitzt. Die beiden Breiten kamen vorher aus zwei festen Zahlen (226 / 178). Die stimmten einmal und dann nicht mehr: der Knopf ist 139 px breit, die Aussparung rechnete mit 156, und dadurch lag er 39 px von der einen und 22 px von der anderen Kante entfernt — in der Aussparung sichtbar aus der Mitte gerutscht. Auf dem Telefon war es grober: dort faellt der Markenname weg, die linke Aussparung blieb aber auf ihrer alten Breite, lief in die rechte hinein, und der Knopf stand mit seiner linken Haelfte schon auf der dunklen Tafel. Jetzt misst das Skript beide Gruppen und schreibt --kerbe-l-mess und --kerbe-r-mess. Die Zahlen hier sind nur noch der Rueckfall ohne Skript; die Deckel in Prozent bleiben, damit die Aussparungen auf keiner Breite die halbe Tafel einnehmen. */ --rand: calc(var(--inset) + 22px); --kerbe-l: min(46%, var(--kerbe-l-mess, calc(var(--rand) - var(--inset) + 226px))); --kerbe-r: min(34%, var(--kerbe-r-mess, calc(var(--rand) - var(--inset) + 178px))); } .kerbe { position: absolute; z-index: 4; /* Zwei Pixel ueber die Tafelkante hinaus, und die eigene Ecke etwas eckiger als die der Tafel: sonst bleibt zwischen der geschnittenen Kante des Ausschnitts und dem Grund ein antialiaster Haarstrich der dunklen Tafel stehen - die feinen Boegen an den Ecken. */ inset-block-start: -2px; height: calc(var(--kerbe-h) + 2px); background: var(--surface-page); } .kerbe--links { inset-inline-start: -2px; width: calc(var(--kerbe-l) + 2px); /* Aussenecke bewusst eckig: die Tafel schneidet sie ohnehin rund. Eine eigene Rundung hier liess einen Haarstrich der dunklen Ecke stehen. */ border-start-start-radius: 0; border-end-end-radius: var(--kehle); } .kerbe--rechts { inset-inline-end: -2px; width: calc(var(--kerbe-r) + 2px); border-start-end-radius: 0; border-end-start-radius: var(--kehle); } /* Kehle neben der Aussparung, waagerecht */ .kerbe::after { content: ''; position: absolute; inset-block-start: 0; width: var(--kehle); height: var(--kehle); } .kerbe--links::after { inset-inline-start: 100%; background: radial-gradient(circle at 100% 100%, rgba(247,244,238,0) var(--kehle), var(--surface-page) calc(var(--kehle) + .5px)); } .kerbe--rechts::after { inset-inline-end: 100%; background: radial-gradient(circle at 0 100%, rgba(247,244,238,0) var(--kehle), var(--surface-page) calc(var(--kehle) + .5px)); } /* Kehle unter der Aussparung, senkrecht an der Tafelkante */ .kerbe::before { content: ''; position: absolute; inset-block-start: 100%; width: var(--kehle); height: var(--kehle); } .kerbe--links::before { inset-inline-start: 0; background: radial-gradient(circle at 100% 100%, rgba(247,244,238,0) var(--kehle), var(--surface-page) calc(var(--kehle) + .5px)); } .kerbe--rechts::before { inset-inline-end: 0; background: radial-gradient(circle at 0 100%, rgba(247,244,238,0) var(--kehle), var(--surface-page) calc(var(--kehle) + .5px)); } /* ── Kerben am Fuss der Tafel ── Spiegelbild der beiden oben: helle Flächen, die von unten in die Tafel greifen, genau so breit wie die Karten darunter. Dazwischen bleibt die Tafel stehen, deshalb laeuft das Bild in der Mitte tiefer. */ .kerbe--fussl, .kerbe--fussr { inset-block-start: auto; inset-block-end: -2px; height: calc(var(--fuss-h) + 2px); /* Die helle Stufe ist breiter als die Karte: aussen laeuft sie bis an die Tafelkante, innen um denselben Rand ueber die Karte hinaus. So steht die Karte mit Luft an allen Seiten darin, statt die Kante zu beruehren - genau wie in der Vorlage. */ width: calc(var(--sockel-rand) + var(--sockel-aussen) + var(--sockel-rand) + 2px); } .kerbe--fussl { inset-inline-start: -2px; border-start-end-radius: var(--kehle); /* Aussenecke eckig: die Tafel schneidet sie rund, jede eigene Rundung hier laesst ihre dunkle Ecke durchblitzen. */ border-end-start-radius: 0; border-start-end-radius: var(--kehle); } .kerbe--fussr { inset-inline-end: -2px; border-start-start-radius: var(--kehle); border-end-end-radius: 0; border-start-start-radius: var(--kehle); } /* Die Fusskerben brauchen keine eigenen Kehlen: ihre gerundete Innenecke ist der Uebergang, und unten laufen sie in den Grund. */ .kerbe--fussl::before, .kerbe--fussl::after, .kerbe--fussr::before, .kerbe--fussr::after { display: none; } /* ── Sockel ── */ .sockel { position: relative; z-index: 5; margin-block-start: calc(var(--fuss-h) * -1 + var(--sockel-luft)); /* Nur der kleine Rand zur Tafelkante; den grossen Einzug bringt die Seite schon mit. Mit beidem stand der Sockel 40 px zu weit innen und die Fusskerben lagen neben den Karten statt darunter. */ margin-inline: var(--sockel-rand); display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.12fr) minmax(0, .94fr); gap: var(--sockel-fuge); align-items: stretch; } /* Die beiden Karten liegen als eigene Flaechen auf dem Grund, der Satz in der Mitte steht ohne Karte direkt darauf. Nichts davon beruehrt die Tafel darueber. */ .sockel__karte { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-sand); border-radius: var(--r-gross); } /* Die Flut steigt aus der unteren linken Ecke auf, dort steht der Weg ("Ansehen") und dort ist der Zeiger, wenn jemand liest. Ein Kreis, der von 0 auf 150 Prozent waechst, liest sich wie einlaufendes Wasser; ein Verlauf oder ein Aufblenden waere nur ein Farbwechsel. */ .sockel__karte::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); clip-path: circle(0% at 14% 86%); transition: clip-path .72s var(--kurve); } @media (hover: hover) { .sockel__karte:hover::before, .sockel__karte:focus-visible::before { clip-path: circle(148% at 14% 86%); } } .sockel__karte:focus-visible::before { clip-path: circle(148% at 14% 86%); } /* Der Satz in der Mitte steht unter der tieferen Bildkante, also um die Kerbentiefe versetzt. */ .sockel__satz { margin-block-start: var(--fuss-h); padding-block: clamp(18px, 2vw, 28px); } .sockel__karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, .9vw, 14px); padding: clamp(20px, 2vw, 28px) clamp(12px, 1.1vw, 16px) clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 32px); color: var(--ink-body); transition: background .4s var(--kurve); } /* Auf Limette dreht die Schrift auf Dunkelgruen, das Bild ruckt eine Spur naeher, der Weg wird fest. Alles langsamer als die Flut, damit sie fuehrt und die Schrift folgt. */ .sockel__karte:hover .sockel__titel, .sockel__karte:focus-visible .sockel__titel, .sockel__karte:hover .sockel__mehr, .sockel__karte:focus-visible .sockel__mehr { color: var(--ink-on-accent); } .sockel__karte:hover .sockel__lauf, .sockel__karte:focus-visible .sockel__lauf { color: rgba(31,58,38,.78); } .sockel__karte:hover .sockel__bild, .sockel__karte:focus-visible .sockel__bild { transform: scale(1.05) rotate(-2deg); } .sockel__titel, .sockel__mehr, .sockel__lauf { transition: color .45s var(--kurve) .06s; } .sockel__wort { display: grid; gap: 8px; min-width: 0; } .sockel__titel { font-size: clamp(18px, 1.6vw,25px); font-weight: 600; line-height: 1.16; letter-spacing: -.022em; text-wrap: balance; } /* Ohne Zeilenkappung: ein Satz, der mit "…" abbricht, liest sich als Fehler. Die Karten sind hoch genug fuer drei Zeilen. */ .sockel__lauf { font-size: clamp(17.5px, 1.08vw, 19.5px); line-height: 1.46; color: var(--ink-quiet); text-wrap: pretty; } /* Der Weg in Satzschrift, unterstrichen: kein Mono-Versal, kein Blatt. */ .sockel__mehr { justify-self: start; margin-top: 4px; font-size: var(--t-klein); font-weight: 600; color: var(--surface-gras); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .sockel__bild { flex: none; display: block; overflow: hidden; width: clamp(126px, 12.6vw, 192px); aspect-ratio: 1; transition: transform .6s var(--kurve); /* Links (Garten) die Form aus der Vorlage: zwei Ecken rund, zwei fast spitz. Rechts (Winter) der Kristall aus der Maske #mk-kristall — so vom User am 2026-09-18 festgelegt. */ border-radius: 999px 6px 999px 6px; } .sockel__karte--rechts .sockel__bild { border-radius: 10px; clip-path: url(#mk-kristall); } .sockel__bild img { width: 100%; height: 100%; object-fit: cover; } /* Sitz und Einsatzorte statt einer vierten Fassung von "ein Vertrag, eine Nummer": pruefbar und regional, in Satzgroesse des Vorspanns. */ .sockel__satz { display: grid; align-content: center; justify-items: center; padding: clamp(24px, 2.4vw, 36px) clamp(18px, 1.9vw, 32px); text-align: center; font-size: var(--t-lead); font-weight: 600; line-height: var(--z-kopf); letter-spacing: -.018em; color: var(--surface-panel); text-wrap: balance; } .sockel__adresse { display: block; margin-top: 10px; font-size: var(--t-klein); font-weight: 500; letter-spacing: 0; color: var(--ink-quiet); } /* ═══════ TAFEL ═══════ */ .seite { padding: var(--inset); } .seite + .seite { padding-top: 0; } .tafel { position: relative; /* Der letzte Wert lässt Platz für die überlappende Leiste, damit sie im ersten Bild vollständig steht */ height: min(90vh, 940px, calc(100dvh - var(--inset) * 2 - 62px)); border-radius: var(--r-gross); overflow: hidden; background: var(--surface-panel); display: grid; container-type: size; isolation: isolate; } /* Der Hero läuft randlos über den ganzen Bildschirm */ /* Der Hero sitzt jetzt im Rahmen: schmaler Steg oben, damit Marke und Angebot der Leiste halb in die Tafel ragen, ringsum der Seiteneinzug. */ .seite.seite--voll { position: relative; padding: 12px var(--inset) var(--inset); /* Seit die Tafel nicht mehr schneidet, koennen ihre Lichtflecken ueber den Rand laufen. `overflow: clip` haelt sie zurueck, ohne einen Scrollbereich aufzumachen — und liegt weit genug von den Ecken weg, dass der Ausschnitt dort sauber bleibt. */ overflow: clip; } .tafel.tafel--voll { /* Der Hero sitzt im Rahmen: Steg oben, Einzug unten abziehen. Die Tafel fuellt das Fenster, waechst aber mit, wenn Schriftplatte und Sockel zusammen mehr brauchen. Zwei Zeilen: oben Bild und Platte, unten der Sockel. Ohne `min-content` schrumpft die obere Zeile unter ihren Inhalt und die Platte laeuft in die Bloecke. */ height: auto; min-height: calc(100dvh - 12px - var(--inset)); border-radius: var(--r-gross); position: relative; display: grid; /* Die Tafel schneidet nicht selbst: der Ausschnitt an ihrer Kante wurde sonst gegen ihren dunklen Grund antialiast und hinterliess feine Boegen in den Ecken. Das Bild rundet sich selbst (siehe .held__bild), alles andere bleibt ohnehin drin. */ overflow: visible; /* `container-type: size` von .tafel schneidet die Hoehe vom Inhalt ab (Groessencontainment) - damit ignorierte die Tafel, dass Platte und Sockel zusammen mehr brauchen, und der Sockel verschwand unter der Kante. Der Hero fragt keine Hoehe ab, also reicht inline-size. */ container-type: inline-size; background: var(--surface-panel); } /* ── Der Hero ist gesetzt, nicht ueberblendet ── Vorher lag der Text auf dem Vollbildfilm und ein Verlauf musste den Kontrast erzwingen; das trueb den Film und ist das Muster, das jede zweite Seite benutzt. Jetzt traegt eine eigene Platte die Schrift, der Film steht ungeschleiert daneben, und das Einsatzjahr laeuft unter beiden durch. Platte und Band bilden zusammen ein L. */ /* Eine Flaeche statt zweier Spalten: der Film liegt unter allem, die Schrift steht darauf. */ .held { position: relative; display: grid; } .held, .held__wort, .held__bild, .jahrring { position: relative; z-index: 1; } .held__wort { position: relative; z-index: 2; display: grid; align-content: center; justify-items: start; /* 62 % waren auf die alte, kleinere Staffel gerechnet. Mit 80 px auf der ersten Zeile blieb dort fuer "Ein Ansprechpartner" kein Platz mehr. */ max-width: min(880px, 65%); padding: calc(var(--pad-t) + 86px) clamp(1.5rem, 3vw, 3rem) calc(var(--pad-b) + clamp(56px, 9vh, 104px)) clamp(24px, 2.6vw, 38px); /* Kein eigener Grund: die Farbe kommt von der Tafel, das Licht liegt darunter. Eine deckende Flaeche hier schnitt das Licht an der Kante zum Film ab, und genau dieser Sprung war die sichtbare Trennlinie. Die Karte steht bewusst vor dem Satzspiegel, naeher am Bildrand als Logo und Band-Label: sie ist ein Objekt auf der Flaeche, keine Spalte im Raster, und darf deshalb aus der Flucht treten. */ color: var(--ink-on-dark); } /* ── Der Schleier unter der Schrift ── Vorher trug eine Glasscheibe den Kontrast. Sie war als Kasten um den Text zu lesen und schnitt die Schrift vom Film ab, statt sie darauf zu stellen. Jetzt liegt nur ein Schleier darunter: er kommt von links, wo der Film ohnehin schon aus der Maske laeuft, und ist nach 62 Prozent ausgelaufen. Die rechte Haelfte des Bildes bleibt unberuehrt. Die Breite geht bewusst ueber die Schriftplatte hinaus (168 %), damit die Null des Verlaufs erst hinter dem laengsten Zeilenende liegt und die Kante des Schleiers nirgends als Linie sichtbar wird. */ .held__wort::before { content: ''; position: absolute; z-index: 0; inset-block: 0; inset-inline-start: 0; width: min(1180px, 168%); background: linear-gradient(90deg, rgba(7,18,10,.86) 0%, rgba(7,18,10,.78) 24%, rgba(7,18,10,.54) 42%, rgba(7,18,10,.2) 54%, rgba(7,18,10,0) 62%); pointer-events: none; } /* Der Schnitt zum Film: die Platte laeuft dahinter durch, der Film setzt mit gerundeter Kante darauf ab. Ein harter Stoss zweier Flaechen liest sich als Fehler, diese Kante als Absicht. */ .held__bild { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; /* Der Bogen kommt aus einer Maske, nicht aus border-radius. Der Radius schnitt die Ecken weg, und dort blieben leere Zwickel stehen. Die Maske laesst den Film die ganze Flaeche fuellen und blendet ihn nach links in einem Bogen aus, sodass Grundfarbe und Licht durchkommen. */ /* Der Radius muss so gewaehlt sein, dass die Maske an der linken Kante des Films bereits bei null liegt. Bei 125 % stand sie dort noch bei gut der Haelfte, und genau das ergab die harte Trennlinie. Bei 112 % lief die Blende ueber 350 px und griff bis hinter den Fliesstext, wo der Grund dann zu hell wurde. 104 % mit spaeterem Einsatz haelt die Zone bei rund 250 px: dezenter, und der Text bleibt auf dunklem Grund. */ -webkit-mask-image: radial-gradient(104% 100% at 100% 50%, #000 62%, rgba(0,0,0,0) 94%); mask-image: radial-gradient(104% 100% at 100% 50%, #000 62%, rgba(0,0,0,0) 94%); } /* Nur Bild und Film fuellen die Flaeche. Vorher stand hier der Nachfahrenselektor > *, und jede spaetere Beigabe im Rahmen bekam inset 0 und 100 % Groesse mit: die Marke am Film wurde damit 706 x 900 statt einer Pille in der Ecke. */ .held__bild > img, .held__bild > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--kurve); } /* Nur eine Spur Tiefe an der Kante zur Platte, kein Verlauf ueber das Bild */ /* Kein zusaetzlicher Verlauf mehr an der linken Kante: die Maske blendet den Film selbst aus, ein Streifen darueber wuerde die Stelle nur wieder als Linie markieren. Am Fuss dagegen braucht es einen: dort liegt das Einsatzjahr als Glas, und der Film wechselt darunter staendig die Helligkeit. Der Verlauf begrenzt den Grund unabhaengig davon, was gerade laeuft. Er endet bei .82 und nicht bei .6, weil das Band selbst fast klar ist: ein Blur von 3,4 px und eine Deckschicht nahe null nehmen dem Film kaum Helligkeit. Bei .6 kaeme die Zeitangabe ueber einem hellen Abschnitt auf 3,47:1, bei .82 auf 7,16:1. */ /* Gegenstueck zum Fuss: oben laeuft die fast klare Kopfzeile ueber den Film. Ohne diesen Verlauf staende die Navigation ueber hellen Abschnitten des Films auf 3:1 und darunter. */ .held__bild::before { content: ''; position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: clamp(110px, 15vh, 156px); background: linear-gradient(180deg, rgba(11,22,14,.5) 0%, rgba(11,22,14,.34) 44%, rgba(11,22,14,0) 100%); pointer-events: none; } /* Seit das Einsatzjahr nicht mehr im Film liegt, braucht der Fuss nur noch eine leichte Kante gegen die hellen Aussparungen, keinen Grund fuer Schrift. Bei .82 lag unten ein dunkles Band ueber dem Film. */ .held__bild::after { content: ''; position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: clamp(150px, 20vh, 210px); background: linear-gradient(180deg, rgba(11,22,14,0) 0%, rgba(11,22,14,.18) 50%, rgba(11,22,14,.4) 100%); pointer-events: none; } /* Der Kopfverlauf war fuer die Navigation ueber dem Film gebaut. Auf dem Telefon steht die Leiste in der Kalk-Aussparung; der Verlauf dunkelte dort nur noch das freie Filmfenster ab. */ @media (max-width: 640px) { .held__bild::before { display: none; } } /* Gemeinsame Bildbehandlung (Sockel; Werkbilder bei bau-leistungen). Die Weite ist ausgenommen: dort nahm der Filter dem Abendlicht die Waerme, das Bild steht wieder ungefiltert wie vor der Design-Runde. */ .sockel__bild img { filter: var(--bild-filter); } .tafel--flach { height: auto; container-type: inline-size; display: block; padding: clamp(3.25rem, 9vw, 6.5rem) var(--pad-x); } .tafel--flach .lage { position: absolute; inset: 0; } .tafel--flach .lage--ui { position: relative; inset: auto; padding: 0; } .lage { grid-area: 1 / 1; min-width: 0; min-height: 0; } /* ═══════ HERO ═══════ */ .lage--ui { padding: calc(var(--pad-t) + 84px) var(--pad-x) calc(var(--pad-b) + 132px); display: grid; align-content: center; color: var(--ink-on-dark); } /* 660 waren zu eng fuer die neue Staffel: bei 80 px auf der ersten Zeile brach "Ein Ansprechpartner" um und der Satz stand in vier statt drei Zeilen. 780 laesst jede Zeile ganz stehen und bleibt unter der Breite der Platte. */ .wort { position: relative; z-index: 1; max-width: 780px; } /* ── Glaskarte um den Hero-Text ── Rezept von css.glass, an die Seite angepasst. Zwei Abweichungen vom Original, beide aus dem Grund hier heraus: 1. background steht dort auf rgba(255,255,255,0), also voellig durchsichtig. Der Rahmen waere damit nur an seinem Schatten zu erkennen. Eine Deckschicht von 5 % und eine feine Kante geben ihm eine Form, ohne dass er sich vordraengt. 2. Der Schatten ist dunkler als die vorgeschlagenen 10 %: er liegt hier auf dunklem Grund, wo schwarz bei 10 % nicht zu sehen waere. Der Blur nimmt das Laub und das Licht dahinter auf. Damit die Karte ueberhaupt etwas zu verwischen hat, muss sie ueber diesen Ebenen liegen. */ .wort__titel { /* z-index: 0 und nicht bloss position: relative: erst damit ist die Ueberschrift ein eigener Stapel, und das grosse Blatt am Satzende darf mit z-index: -1 hinter alle drei Zeilen fallen, ohne dabei auch hinter den Schleier der Platte zu rutschen. */ position: relative; z-index: 0; font-size: 56px; font-size: clamp(2.125rem, 1.6144rem + 2.095vw, 3.5rem); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; } /* Die Zeilenmaske steht nicht mehr fest im Blatt, sondern wird vom Skript fuer die Dauer des Auftritts gesetzt und danach wieder abgenommen. Grund ist das grosse Blatt am Satzende: es ragt weit ueber seinen Zeilenkasten hinaus und war unter `overflow: hidden` dauerhaft auf Zeilenhoehe beschnitten. Ohne Skript und bei reduzierter Bewegung faellt der Auftritt ohnehin aus — dort darf von Anfang an nichts schneiden. */ .riss { display: block; /* .03em Grundzugabe wie zuvor, dazu die Maskenzugabe, die der negative Aussenabstand wieder herausrechnet: die Zeilen sitzen unveraendert. */ padding-block: calc(.03em + var(--maske-oben)) calc(.03em + var(--maske-unten)); margin-block: calc(-1 * var(--maske-oben)) calc(-1 * var(--maske-unten)); } .riss > span { display: block; } .wort__titel--maske .riss { overflow: hidden; } /* Ohne Scheibe liegt der Rest des Kontrasts an der Schrift selbst: ein enger Schatten unter den Glyphen, kein zweiter Schleier. */ .wort__titel { text-shadow: 0 1px 2px rgba(6,16,10,.62), 0 3px 20px rgba(6,16,10,.5); } .wort__lauf { text-shadow: 0 1px 2px rgba(6,16,10,.6); } /* Gestaffelt statt gleichfoermig: die erste Zeile ist die Aussage, die beiden folgenden erklaeren sie. Vorher standen alle drei auf derselben Groesse, und der Satz las sich als Block ohne Gewicht. Der Abstand zwischen den Stufen war zu klein, um als Stufe zu wirken: 4,75 zu 2,5 rem las sich noch wie ein Versehen. Jetzt traegt die erste Zeile bis 5 rem und die beiden folgenden bis 3 — ein Verhaeltnis von 5:3 statt knapp 2:1, und beide Groessen liegen ueber den alten. */ .wort__titel .riss:first-child { /* Seitentitel-Groesse (40 / 76 px). Eine groessere Hero-Headline hat der Kunde schon einmal verworfen; die Hierarchie entsteht ueber H2 64. */ font-size: var(--t-h1); line-height: .98; /* In Displaygroesse etwas enger als die Folgezeilen, wie die Sektionstitel (-.035em): bei 76 px oeffnet sich die Schrift sonst. */ letter-spacing: -.034em; margin-bottom: .05em; } .wort__titel .riss:not(:first-child) { font-size: clamp(1.75rem, 1.24rem + 1.7vw, 3rem); line-height: 1.1; letter-spacing: -.022em; color: rgba(255,255,255,.92); } /* Die beiden Zahlwoerter im Akzent. Sie sind die eigentliche Aussage — vier gehen auf eins zurueck — und stehen zweimal an derselben Stelle der Zeile, also uebereinander. Mehr braucht die Markierung nicht: kein zweiter Schnitt, kein zweites Gewicht. */ .wort__zahl { color: var(--accent); font-style: normal; } .wort__lauf { /* Eigener Stapel ueber der Ueberschrift: die ist positioniert und wird deshalb nach dem Fliesstext gezeichnet — ohne das laege der Auslaeufer des grossen Blattes ueber dem Satz statt dahinter. */ position: relative; z-index: 1; margin-top: clamp(24px, 2.6vh, 32px); max-width: 46ch; font-size: var(--t-lead); line-height: 1.45; color: rgba(255,255,255,.79); text-wrap: pretty; } /* ── Das Blatt ueber dem "e" von "Gewerke" ── Es steht wie ein Akzent ueber dem Buchstaben: volle Akzentfarbe, kein Umriss, keine Ueberschneidung mit der Schrift. Die Fassungen davor waren ein durchsichtiger Umriss und liefen dabei gegen zwei Dinge an. Erstens gegen die Ueberschrift: die steht in 600 und deckend, ein duenner halbtransparenter Strich daneben liest sich als Kratzer, nicht als Zeichen. Zweitens gegen die eigene Seite: an der Marke, im Knopf und in den Zusagen ist dasselbe Blatt jedes Mal eine volle Akzentflaeche. Ein Umriss war hier das einzige seiner Art und fiel schon deshalb auf. Der Anker ist der Buchstabe selbst — .schluss umschliesst genau das eine "e", der Punkt bleibt draussen. Fruehere Fassungen hingen am ganzen Wort oder am Satzende; daran laesst sich keine Stellung berechnen, die auf dem Buchstaben sitzt. An einem einzigen Glyphen ist sie eindeutig: waagerecht die Mitte der Dickte, senkrecht ein schmaler Abstand ueber der x-Hoehe. Die Groesse haengt an der Zeile (em) und nicht am Fenster: das Zeichen gehoert zum Buchstaben und muss mit ihm wachsen. Damit entfallen auch alle Sondergroessen an den Haltepunkten. .72em ergibt eine Flaeche etwa in Buchstabenhoehe — gross genug, um als Blatt lesbar zu sein, klein genug, um Akzent zu bleiben und nicht ueber der Zeile zu schweben. Der Stapel liegt in der Ueberschrift, nicht im Buchstaben: mit einem eigenen Stapel in .schluss laege das Blatt zwar hinter seinem eigenen "e", aber vor der Zeile darunter. Deshalb ist .wort__titel der Stapel und das Blatt faellt mit z-index: -1 hinter alle drei Zeilen, ohne unter den Schleier der Platte zu rutschen. */ .schluss { position: relative; display: inline-block; } .grossblatt { position: absolute; z-index: -1; /* Gegen die Grundregel `img, svg, video { max-width: 100% }`: die haette das Blatt auf die Dickte des Buchstabens eingekuerzt. */ width: .72em; max-width: none; height: auto; aspect-ratio: 1; /* inset-block-end: 100% setzt die Unterkante des Blattquadrats auf die Oberkante der Zeilenschachtel; die .46em holen sie wieder herunter bis knapp ueber die x-Hoehe. Der Nachschlag ist noetig, weil die Blattform mit Rand in ihrem Quadrat sitzt und ihre sichtbare Unterkante deshalb ueber der Kastenunterkante liegt. */ inset-inline-start: 50%; inset-block-end: 100%; /* Eigene Eigenschaften statt transform: das Skript skaliert das Blatt beim Auftritt einmal ueber transform, die Grundstellung liegt hier. */ translate: 19% .29em; rotate: -15deg; fill: var(--accent); pointer-events: none; } /* ── Glaskarte um den Hero-Text ── Rezept von css.glass, an die Seite angepasst: eine Deckschicht von 5 % und eine feine Kante geben dem Rahmen eine Form, weil er bei voelliger Durchsichtigkeit nur an seinem Schatten zu erkennen waere. Der Schatten ist dunkler als im Original, weil er hier auf dunklem Grund liegt. */ .glaskarte { position: relative; z-index: 1; padding: clamp(22px, 2.6vw, 38px) clamp(20px, 2.4vw, 36px) clamp(24px, 2.8vw, 38px); /* Werte von css.glass, unveraendert uebernommen: voellig durchsichtiger Grund, feine Kante, weicher Schatten, schwacher Blur. Die Scheibe deckt damit nichts mehr ab — sie ist nur noch eine Kante und eine Unschaerfe ueber dem Bild. Nach dem Hero ist sie die einzige geblieben. */ background: rgba(255, 255, 255, 0); border-radius: var(--r-mittel); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glaskarte { backdrop-filter: blur(2.4px); -webkit-backdrop-filter: blur(2.4px); } } /* Ein schmaler Reflex wandert schraeg ueber die Scheibe (Lauf in main.js, nur ohne reduzierte Bewegung und nur, solange die Weite im Bild ist). */ .glaskarte__glanz { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .glaskarte__glanz::before { content: ''; position: absolute; inset-block: -60%; inset-inline-start: -40%; width: 26%; /* Der Streifen wandert, nicht die Huelle: so bleibt er in der Karte beschnitten und ist auf ihrer ganzen Breite zu sehen. */ translate: var(--glanz-x, 0%) 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,.3) 55%, rgba(255,255,255,0) 100%); transform: rotate(18deg); } .glaskarte > *:not(.glaskarte__glanz) { position: relative; z-index: 1; } /* Die matte, helle Scheibe vom 2026-09-18 (weisser Verlauf, Blur 9 px) ist am 2026-09-19 wieder raus (User-Wunsch: so glasig wie vorher). Es gilt wieder die klare Scheibe von oben; der wandernde Glanz bleibt. Der Radius steht wie vor der Design-Runde auf 16 px. */ .weite .glaskarte { border-radius: 16px; } /* ════ Die drei Zusagen ════ Erst waren es drei Pillen mit eigenem Grund, dann drei Spalten unter einer Haarlinie mit Stichwort in Mono-Versalien darueber. Beides zog eine zweite Ordnung direkt unter den Satz: die Haarlinie las sich als Kante, die drei Spalten als Tabelle, und zusammen teilten sie die Schriftplatte in Etagen — genau da, wo die Ueberschrift noch nachwirken soll. Zwei Ebenen pro Zusage (Stichwort oben, Klartext unten) waren ausserdem eine Stufe zu viel fuer drei kurze Versprechen. Jetzt ist es eine Zeile: drei Marken hintereinander, jede mit dem Blatt der Marke davor, das Stichwort in der Schriftfarbe, der Rest gedaempft. Keine Linie, kein Kasten, kein Raster — die Reihe haelt ueber die Wiederholung des Zeichens zusammen. Sie wiegt dadurch so wenig, dass die Ueberschrift die Platte allein traegt, und sie bricht sauber um: was nicht mehr passt, faellt als ganze Marke in die naechste Zeile. Die Mono ist hier entfallen. Sie traegt weiter das Leistungsverzeichnis und die Ziffern im Ablauf — im Hero war sie ein drittes Schriftbild neben Ueberschrift und Fliesstext. */ /* Blatt-Fassung, auf Wunsch des Users zurueck (2026-09-18) und eine Stufe groesser als vorher (15,5-17 -> 17-19,5 px): das Blatt der Marke vor jeder Zusage, das Stichwort weiss und fest, der Rest etwas leiser. Das Blatt steht mittig zur ersten Zeile statt auf der Grundlinie; so sitzt es auch sauber, wenn eine Zusage auf dem Telefon umbricht. */ .heldsiegel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(22px, 2.4vw, 36px); width: 100%; max-width: 800px; margin-top: clamp(24px, 3.2vh, 36px); } .heldsiegel li { display: inline-flex; align-items: flex-start; gap: 10px; font-size: clamp(18.5px, 1.04rem + .28vw, 21px); line-height: 1.3; color: rgba(255,255,255,.84); text-shadow: 0 1px 2px rgba(6,16,10,.6); } .heldsiegel__blatt { flex: none; width: 1.15em; height: 1.15em; margin-top: .08em; fill: var(--accent); filter: drop-shadow(0 1px 1px rgba(6,16,10,.45)); } .heldsiegel__kopf { color: var(--ink-on-dark); font-weight: 600; } /* ── Die beiden Wege im Hero ── Vorher hatte .wort__tun keine eigene Regel: die zwei Knoepfe waren als inline-flex zwei Woerter in einer Textzeile. Sie standen damit auf einer gemeinsamen Grundlinie, und weil der Hauptweg groesser ist, sass der Nebenweg sichtbar tiefer — dazwischen lag als Abstand nur das Leerzeichen aus dem Quelltext (4 px). Eine Flex-Zeile stellt beide auf dieselbe Mitte und setzt den Abstand selbst. */ .wort__tun { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; /* Abstand nach oben: den hatte die Regel bisher gar nicht, er kam nur aus den Notlagen fuer flache und schmale Fenster. Auf einem hohen Schirm standen die Knoepfe damit ohne Luft unter dem Fliesstext. Er ist bewusst groesser als der des Absatzes darueber (26 px): Titel und Fliesstext sind ein Block, die Knoepfe sind die Antwort darauf und brauchen den Schnitt dazwischen. */ margin-top: clamp(30px, 4.2vh, 44px); } /* ── Beim Anfahren steigt eine Fuellung von unten auf ── Die Fuellung ist keine zweite Flaeche mehr, sondern derselbe Grund. Zwei Fassungen davor legten eine gefaerbte Pille ueber den Knopf — erst per scaleY und overflow: hidden, dann per clip-path mit eigener Rundung. Beide hatten denselben Fehler: an der runden Kante liegen dann zwei weich gerechnete Umrisse uebereinander, und aus dem Knopfgrund darunter bleibt in den Randpixeln ein Rest sichtbar. Auf dem dunklen Knopf war das ein gelber Faden an der linken Rundung und ueber der Oberkante. Ein halber Pixel Ueberstand hat ihn nur duenner gemacht, nicht beseitigt: solange unter der Fuellung noch Akzent liegt, kann er durchscheinen. Jetzt liegt darunter nichts mehr. Der Knopf traegt einen Verlauf aus zwei harten Haelften, doppelt so hoch wie er selbst: oben Akzent, unten der dunkle Grund. Angefahren wandert der Verlauf um seine halbe Hoehe, die dunkle Haelfte steigt von unten herein, die helle laeuft oben hinaus. Es gibt nur eine Flaeche, nur eine Kante und nur eine Rundung — ein Saum ist damit nicht mehr moeglich, egal auf welcher Pixeldichte. Nebenbei ist die Wasserlinie gerade: scaleY hatte die runden Enden mitgestaucht. */ .tat { display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: var(--r-pille); color: var(--ink-on-accent); background-color: transparent; background-image: linear-gradient(to bottom, var(--accent) 50%, var(--surface-panel) 50%); /* 220 statt 200 Prozent und kein Wiederholen: bei genau 200 faellt die Kante zwischen den beiden Haelften exakt auf die Unterkante des Knopfes, und die Rundung auf ganze Geraetepixel legt dort je nach Pixeldichte eine Reihe der falschen Haelfte ab — beim Umrissknopf war das ein Akzentfaden an Ober- und Unterkante. Mit 220 liegt die Kante in beiden Endlagen zehn Prozent ausserhalb des Knopfes. */ background-size: 100% 220%; background-repeat: no-repeat; background-position: 0 0; font-size: 18.5px; font-weight: 600; cursor: pointer; transition: transform .4s var(--kurve), color .35s var(--kurve), background-position .5s var(--kurve); } .tat { position: relative; isolation: isolate; } .tat > * { position: relative; z-index: 1; } .tat:hover, .tat:focus-visible { background-position: 0 100%; } .tat:hover, .tat:focus-visible { transform: translateY(-2px); } .tat:hover, .tat:focus-visible { color: var(--ink-on-dark); } /* Der Umrissknopf fuellt sich umgekehrt: oben nichts, unten Akzent — heller Grund, dunkle Schrift. */ .tat--klar { color: var(--ink-on-dark); background-image: linear-gradient(to bottom, transparent 50%, var(--accent) 50%); border: 1px solid var(--line-light); } .tat--klar:hover, .tat--klar:focus-visible { color: var(--ink-on-accent); } /* Der stille Knopf auf hellem Grund. .tat--klar ist fuer dunkle Flaechen gebaut: weisse Schrift, Rahmen aus Weiss mit 16 Prozent. Auf dem cremefarbenen Grund der hellen Felder stand damit Weiss auf #F1F3DA — gemessen 1,13 zu 1. Lesbar ist das nicht, die Grenze liegt bei 4,5 zu 1. Betroffen war der Abschluss von ueber-uns.html mit "Kosten ueberschlagen" und "Bei uns arbeiten". Statt einer neuen Klasse im Markup haengt die Korrektur am Grund: so ist jeder kuenftige stille Knopf auf hellem Feld automatisch richtig, ohne dass jemand daran denken muss. Dunkel auf Creme misst 10,98 zu 1. Der Rahmen wird dunkel und eine Spur kraeftiger als die Linien daneben, sonst verschwindet der Knopf als Form: er traegt keinen eigenen Grund, also ist die Kante alles, was ihn als Schaltflaeche ausweist. */ .feld--hell .tat--klar, .feld--sand .tat--klar { color: var(--surface-panel); border-color: rgba(31,58,38,.34); } .feld--hell .tat--klar:hover, .feld--hell .tat--klar:focus-visible, .feld--sand .tat--klar:hover, .feld--sand .tat--klar:focus-visible { color: var(--ink-on-accent); border-color: var(--accent); } /* Der Hauptweg im Hero traegt das Blatt der Marke, als einziger Knopf der Seite. Der Schatten hebt ihn vom Film ab, ohne dass er einen Rand braucht. */ .tat--gross { gap: 12px; padding: 21px 38px 21px 30px; font-size: 18px; letter-spacing: -.012em; box-shadow: var(--schatten-2); transition: transform .4s var(--kurve), color .35s var(--kurve), box-shadow .4s var(--kurve), background-position .5s var(--kurve); } /* Der helle Innenstrich faellt beim Anfahren weg. Er sitzt auf dem Akzent als Glanzkante und ist dort kaum zu sehen; auf der dunklen Fuellung stuende er als weisser Faden um die ganze Rundung. Solange die Fuellung eine eigene Flaeche darueber war, hat sie ihn verdeckt — jetzt muss er selbst gehen. */ .tat--gross:hover, .tat--gross:focus-visible { box-shadow: var(--schatten-3); } /* currentColor: das Blatt geht beim Anfahren mit der Schrift auf Weiß, während die dunkle Füllung von unten aufsteigt. */ .tat__blatt { width: 23px; height: 23px; flex: none; fill: currentColor; transition: transform .45s var(--kurve); } .tat:hover .tat__blatt, .tat:focus-visible .tat__blatt { transform: rotate(-16deg) scale(1.12); } /* Auf dem Film darf der Hauptweg beim Anfahren nicht dunkel werden: die aufsteigende Waldfuellung verschwand dort im Bild, genau in dem Moment, in dem jemand den Knopf meint. Im Hero steigt deshalb Papier auf, die Schrift bleibt dunkel (11,9 : 1). */ #kopfzeile .tat--gross { background-image: linear-gradient(to bottom, var(--accent) 50%, var(--papier) 50%); } #kopfzeile .tat--gross:hover, #kopfzeile .tat--gross:focus-visible { color: var(--ink-on-accent); box-shadow: var(--schatten-3); } /* Der Nebenweg braucht auf dem Film eine sichtbare Kante: 16 % Weiss verschwand ueber hellen Filmstellen. */ #kopfzeile .tat--klar { border-color: rgba(255,255,255,.32); } #kopfzeile .tat--klar:hover, #kopfzeile .tat--klar:focus-visible { border-color: var(--accent); } /* ── Einsatzjahr als vier Ringe ── Das lineare Band davor las sich wie eine Tabelle, und der Winterdienst musste ueber den Jahreswechsel in zwei Segmente zerlegt werden. Im Kreis ist der Jahreswechsel kein Bruch: jedes Gewerk ist ein Bogen, und wie weit er reicht, sagt alles, was das Band mit zwoelf Spalten brauchte. */ .jahrring { /* Das Band liegt ueber dem Film, nicht darunter: nur so hat der Glasfilter etwas zum Durchscheinen. In einer eigenen Grid-Zeile ueber der Grundfarbe dunkelte er die Zone nur ab. */ position: absolute; inset-block-end: 0; inset-inline: 0; padding: clamp(9px, 1.1vw, 13px) max(var(--pad-x), calc((100% - var(--breit)) / 2)) clamp(10px, 1.2vw, 15px); /* Kein Glas mehr: das Band liegt nicht mehr ueber dem Film, sondern in einer eigenen Zeile ueber der Grundfarbe. Der Blur haette dort nichts zum Durchscheinen und dunkelte die Zone auf brightness .55 ab, sodass sie fast schwarz gegen die Platte darueber stand. Jetzt setzt eine duenne Lage sie nur leicht ab, und das Licht laeuft darunter durch. */ /* Rezept von css.glass. Der Radius aus dem Original entfaellt: das Band laeuft randbuendig ueber die volle Breite, gerundete Ecken saehen dort wie ein abgeloestes Element aus. Der Schatten faellt nach oben statt nach unten. Der Grund bleibt bei null Deckung; getragen wird der Kontrast vom Fussverlauf des Films. */ background: rgba(255, 255, 255, 0); box-shadow: none; border-top: 1px solid rgba(255,255,255,.14); color: var(--ink-on-dark); } .jahrring::before { content: ''; position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: max(var(--pad-x), calc((100% - var(--breit)) / 2)); width: 54px; height: 2px; background: var(--accent); } /* Mitwachsend statt fest auf vier Spalten: die Zahl der Gewerke ist seit 2026-09-02 nicht mehr gesetzt, und ein starres repeat(4) haette den fuenften Ring in eine eigene Zeile geworfen. */ .jahrring__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: clamp(8px, 1.2vw, 18px); } .uhr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; padding: 5px 12px 5px 8px; margin-inline-start: -8px; border-radius: var(--r-mittel); } /* Kein transition hier: den Auftritt fuehrt eine GSAP-Zeitleiste, sonst laufen Filter und Tween gegeneinander und die Reaktion wirkt zaeh. */ .uhr__flaeche { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-mittel); background: rgba(255,255,255,.1); opacity: 0; } .uhr { position: relative; isolation: isolate; } .uhr__ring { position: relative; display: grid; place-items: center; flex: none; } .uhr__scheibe { width: clamp(46px, 3.9vw, 58px); height: auto; aspect-ratio: 1; /* Januar oben: ohne die Drehung begaenne der Bogen auf drei Uhr */ transform: rotate(-90deg); overflow: visible; } .uhr__jahr, .uhr__bogen { fill: none; stroke-width: 3.6; stroke-linecap: butt; } .uhr__jahr { stroke: rgba(255,255,255,.19); } .uhr__bogen { stroke: var(--accent); transform-origin: center; } .uhr__zeichen { position: absolute; width: 19px; height: 19px; fill: currentColor; color: rgba(255,255,255,.86); transition: color .35s var(--kurve); } .uhr:hover .uhr__zeichen, .uhr:focus-visible .uhr__zeichen { color: var(--accent); } /* Das Gewerk, das gerade Saison hat, steht fest: sein Bogen ist staerker und der Name traegt den Akzent. Die beiden ganzjaehrigen bleiben ruhig, sie sind kein Ereignis. */ .uhr.ist-saison .uhr__bogen { stroke-width: 5.4; } .uhr.ist-saison .uhr__zeichen { color: var(--accent); } .uhr.ist-saison .uhr__name, .uhr.ist-saison .uhr__kurz { color: var(--accent); } .uhr__wort { display: grid; gap: 2px; min-width: 0; } .uhr__name, .uhr__kurz { text-shadow: 0 1px 2px rgba(6,16,10,.8), 0 2px 12px rgba(6,16,10,.62); font-size: 16.5px; font-weight: 600; letter-spacing: -.008em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Im Zweierraster reicht die Spalte fuer die langen Namen nicht; die Kurzform tritt an ihre Stelle, der volle Name bleibt fuer die Vorlesart. */ .uhr__kurz { display: none; } .uhr__wann { text-shadow: 0 1px 2px rgba(6,16,10,.8), 0 2px 12px rgba(6,16,10,.62); font-size: 16.5px; line-height: 1.3; color: rgba(255,255,255,.74); /* 7,57:1 auf dem Glasgrund */ } /* ═══════ STATEMENT ═══════ */ .ruf { position: relative; overflow: hidden; margin: var(--inset); /* Der Hero laeuft randlos bis zur Unterkante, das Statement sass ohne Abstand direkt am Einsatzjahr. Nur der obere Rand waechst, die seitlichen bleiben auf --inset und damit im Raster der Seite. */ margin-top: clamp(2.5rem, 6vw, 5rem); padding: clamp(3.5rem, 9vw, 7rem) var(--pad-x) clamp(3rem, 7vw, 5.5rem); background: var(--accent); color: var(--ink-on-accent); border-radius: var(--r-gross); } /* Botanische Tafel, angeschnitten am rechten Rand */ .ruf__tafel { position: absolute; inset-block: -8% -14%; inset-inline-end: clamp(-40px, -2vw, 0px); width: clamp(240px, 34%, 480px); display: grid; place-items: center; pointer-events: none; } .ruf__tafel img { width: 100%; height: 100%; object-fit: contain; /* Multiply allein regelt: Papier verschwindet, die Zeichnung bleibt. Entsaettigt, damit sie auf der Limette als dunkler Stich steht und nicht als Neonpflanze: nach Blatt und Rasen war sie sonst das dritte leuchtende Gruen in Folge. */ mix-blend-mode: multiply; opacity: .62; filter: saturate(.25) contrast(1.08); transform: rotate(-4deg); } .ruf__satz { position: relative; /* Der eine laute Moment nach dem Hero: in Seitentitel-Groesse, nicht in der kleineren Sektionstitel-Stufe. */ font-size: var(--t-h1); font-weight: 600; line-height: 1.0; letter-spacing: -.035em; } .ruf__satz span { display: block; overflow: hidden; padding-block: var(--maske-oben) var(--maske-unten); margin-block: calc(-1 * var(--maske-oben)) calc(-1 * var(--maske-unten)); } .ruf__satz span > em { display: block; font-style: normal; } .ruf__satz span:nth-child(2) { padding-inline-start: clamp(0px, 8vw, 130px); } .ruf__satz span:nth-child(3) { padding-inline-start: clamp(0px, 16vw, 260px); } .ruf__fuss { position: relative; margin-top: clamp(2rem, 4vw, 3rem); max-width: 48ch; /* 2026-09-19 auf Kundenwunsch groesser und deutlicher: eine Stufe ueber --t-lead (21-28 px statt 19-23 px), volle Tinte statt 78 % und halbfett. Volle Tinte auf Limette: 9,0 : 1 (vorher 5,1 : 1). */ font-size: clamp(1.3125rem, 1.05rem + .75vw, 1.75rem); font-weight: 500; line-height: 1.4; text-wrap: pretty; color: var(--ink-on-accent); } /* ═══════ FELDER ═══════ */ .feld { padding: clamp(4.5rem, 12vw, 9.5rem) var(--inset); } .feld--hell { background: var(--surface-page); color: var(--ink-body); } .feld--sand { background: var(--surface-sand); color: var(--ink-body); } .feld--dunkel { color: var(--ink-on-dark); } .feld--eng { padding-block: clamp(3rem, 8vw, 6rem); } /* Ein Feld, das eine botanische Tafel traegt: sie wird am Rand angeschnitten, also darf nichts von ihr daneben stehen bleiben. */ .feld--tafel { position: relative; overflow: hidden; } .feld--tafel > .mitte { position: relative; z-index: 1; } .kapitel { max-width: 780px; margin-bottom: clamp(3rem, 7vw, 5.5rem); } .kapitel--breit { max-width: 900px; } .kapitel__titel { font-size: var(--t-h2); font-weight: 600; line-height: .98; letter-spacing: -.035em; color: var(--surface-panel); } .kapitel--hell .kapitel__titel, .feld--dunkel .kapitel__titel { color: var(--ink-on-dark); } /* Ein Grad kleiner für die Überschriften, die aus zwei Sätzen bestehen. Der Kunde hat sie so geliefert, und sie sollen so stehen bleiben — bei 76 px liefen sie aber vierzeilig und drückten die Sektion auseinander. Die Zeilenhöhe geht dabei von .98 auf 1.04: mehrzeilige Sätze brauchen Luft zwischen den Zeilen, ein zweizeiliges Schlagwort nicht. */ .kapitel__titel--lang { font-size: var(--t-h2-lang); line-height: 1.04; letter-spacing: -.028em; } .kapitel__lauf { margin-top: 22px; max-width: 54ch; font-size: 18.5px; color: var(--ink-quiet); } .kapitel--hell .kapitel__lauf { color: var(--ink-muted); } /* ── Leistungen: Register links, Bahnen rechts ── Das Register bleibt beim Scrollen stehen und markiert das Gewerk, das gerade im Blick ist. Damit hat man den Überblick über alle Gewerke, ohne die Tiefe der einzelnen Bahn zu verlieren. Seit 2026-09-18 hell: jede Bahn eine Tafel im festen Grund ihres Bereichs, das Leistungsverzeichnis ein Papierblatt darauf. Die Sektion selbst hat keinen eigenen Grund mehr: Kalk ist der Rahmen, die sechs Tafeln sind die eingelassenen Flächen wie Hero, Ruf und Für wen (Rahmen- Prinzip, Runde 4). Ein Steingrund lief vorher als randloses Band und liess Hausmeister und Elektro (Stein auf Stein) nur als Umriss stehen. Unten weniger Luft: danach folgt direkt die Kosten-Tafel. */ #leistungen { padding-bottom: clamp(2.5rem, 6vw, 5rem); } /* Bereichsgründe, überall gleich (Design-Plan 2026-09-18): Reinigung und Winter Nebel, Hausmeister und Elektro Stein, Garten Moos, Sonder- leistungen Klinker. Die Tinte färbt Zeichen, Blattkopf und den aktiven Zustand: Winter trägt Wasserblau, die Sonderleistungen Ziegel, alle anderen Rasengrün. */ .reiter[data-reiter="0"], #werk-0 { --bereich: var(--nebel); } .reiter[data-reiter="1"], #werk-1 { --bereich: var(--stein); } .reiter[data-reiter="2"], #werk-2 { --bereich: var(--moos-hell); } .reiter[data-reiter="3"], #werk-3 { --bereich: var(--nebel); --bereich-tinte: var(--tinte-wasser); } .reiter[data-reiter="4"], #werk-4 { --bereich: var(--stein); } .reiter[data-reiter="5"], #werk-5 { --bereich: var(--klinker-hell); --bereich-tinte: var(--tinte-ziegel); } .werke { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(2rem, 4.4vw, 4.5rem); align-items: start; } .register { position: sticky; top: clamp(96px, 12vh, 132px); } /* "Gewerke wählen" ist Kundenwortlaut und beschriftet die Liste darunter. Satzschrift statt gesperrter Versalien: eine Beschriftung, kein Kicker. */ .register__kopf { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line-dark); font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; color: var(--surface-panel); } .register__liste { position: relative; display: grid; } .reiter { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 11px 14px 11px 11px; margin-inline: -11px; border-radius: var(--r-mittel); transition: background-color .4s var(--kurve), box-shadow .4s var(--kurve); } /* Der aktive Eintrag steht in der Farbe seines Bereichs, beim Zeigen deutet sie sich halb an. Auf Kalk war ein Papierreiter kaum vom Grund zu trennen. */ .reiter:hover { background: color-mix(in srgb, var(--bereich, var(--stein)) 55%, transparent); } .reiter.ist-aktiv { background: var(--bereich, var(--papier)); box-shadow: var(--schatten-1); } /* Das Zeichen sitzt in einer Scheibe im Grund seines Bereichs, damit Register und Tafel dieselbe Farbe tragen. Aktiv füllt sich die Scheibe mit der Tinte des Bereichs und das Zeichen wird weiß (6,3 : 1 und mehr gegen Papier): den Zustand liest man an der Form, nicht nur am Farbton. Dieselbe Sprache gilt im Rechner für eine gewählte Kachel. */ .reiter__zeichen { width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: var(--bereich, var(--papier)); box-shadow: inset 0 0 0 1px rgba(31, 58, 38, .12); fill: var(--bereich-tinte, var(--surface-gras)); transition: background-color .4s var(--kurve), fill .4s var(--kurve), box-shadow .4s var(--kurve); } .reiter:hover .reiter__zeichen { box-shadow: inset 0 0 0 1px var(--bereich-tinte, var(--surface-gras)); } .reiter.ist-aktiv .reiter__zeichen { background: var(--bereich-tinte, var(--surface-gras)); box-shadow: none; fill: var(--ink-on-dark); } .reiter__wort { display: grid; gap: 2px; min-width: 0; } .reiter__titel { font-size: 19px; font-weight: 600; letter-spacing: -.016em; color: var(--surface-panel); line-height: 1.22; } .reiter__sub { font-size: var(--t-klein); color: var(--ink-quiet); line-height: 1.32; } /* ── Der Schlitten unter dem aktiven Reiter ── Eine Fläche, die beim Wechsel ruhig zum nächsten Reiter gleitet und dabei die Farbe des neuen Bereichs annimmt (main.js setzt sie, der Übergang läuft nur beim Wechsel). Bis 2026-09-18 lief darin eine Wasserwelle in Endlosschleife. Ohne Skript oder mit Bewegungsvorbehalt trägt .reiter.ist-aktiv die Bereichsfarbe selbst. */ .flut { position: absolute; z-index: 0; inset-block-start: 0; inset-inline-start: 0; border-radius: var(--r-mittel); background: var(--papier); transition: background-color .6s var(--kurve); box-shadow: var(--schatten-1); pointer-events: none; } .register.ist-fluessig .reiter.ist-aktiv { background: none; box-shadow: none; } .register__tat { display: inline-flex; margin-top: 22px; padding: 13px 22px; border-radius: var(--r-pille); border: 1px solid var(--surface-panel); font-size: 18.5px; font-weight: 600; color: var(--surface-panel); transition: background-color .35s var(--kurve), color .35s var(--kurve); } .register__tat:hover { background: var(--surface-panel); color: var(--ink-on-dark); } /* Mit sechs Bahnen ist das Register rund 600 px hoch. Auf einem Notebook mit 1366x768 bleiben unter der Leiste aber nur etwa 520 px Sichthoehe, und Sonderleistungen samt Sammel-Knopf fielen unten heraus - erreichbar waren sie dort gar nicht, weil das Geklebte nicht mitlaeuft. Ab niedriger Fensterhoehe ruecken die Reiter deshalb zusammen; die Trefferflaeche bleibt dabei ueber 48 px. */ @media (min-width: 901px) and (max-height: 720px) { .register__kopf { padding-bottom: 9px; } .reiter { padding-block: 5px; } /* Nicht weiter als auf 12 px zusammenruecken: darunter faellt der Knopf unter die 48 px Trefferhoehe. */ .register__tat { margin-top: 13px; padding: 12px 20px; } } /* Reicht das Zusammenruecken nicht mehr, gibt das Register das Kleben auf und laeuft mit der Seite. Lieber kein stehender Ueberblick als einer, dessen untere Haelfte niemand erreicht. */ @media (min-width: 901px) and (max-height: 600px) { .register { position: static; } } /* ── Die einzelne Bahn: eine Tafel im Grund ihres Bereichs ── Farbe und Foto werden zusammen gesetzt: das Bild läuft randlos bis an die Tafelkante, der Bereichsgrund füllt den Rest, das Leistungs- verzeichnis liegt als Papierblatt darauf. Drei Formen wechseln sich ab, damit sechs Bahnen nicht sechsmal dieselbe sind (Klassen im Markup): Band (Bild als breiter Streifen oben), Seite (Bild hochkant über die volle Höhe) und Blatt (Bild neben dem Text, Blatt breit darunter). Vorher war jede Bahn Text, Bild und dunkles Blatt untereinander, rund 1150 px hoch und sechsmal gleich. */ .bahnen { display: grid; gap: clamp(16px, 1.8vw, 26px); } /* Das Polster fuer die Leiste steht seit dem scroll-padding-top am html. Hier bleibt nur die Luft, die die Bahn vom Leistenrand loest - sonst zaehlten beide Werte zusammen und die Bahn saesse zu tief. */ .werk { --werk-p: clamp(22px, 2.7vw, 38px); scroll-margin-top: 14px; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid transparent; border-radius: var(--r-gross); background: var(--bereich, var(--stein)); overflow: hidden; } .werk__wort { padding: var(--werk-p) var(--werk-p) 0; } .werk__titel { font-size: var(--t-h3); font-weight: 600; line-height: var(--z-kopf); letter-spacing: -.024em; color: var(--surface-panel); text-wrap: balance; } /* 2026-09-19 groesser und dunkler (Kundenwunsch: deutlicher): Vorspann- Stufe statt Fliesstext, volle Texttinte statt der leisen. */ .werk__lauf { margin-top: 16px; max-width: 52ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-body); text-wrap: pretty; } /* Die Bühne löst sich auf: Bild und Blatt stehen direkt im Raster der Tafel. Schmal kommt das Bild zuerst, randlos bis an die Tafelkante. */ .werk__buehne { display: contents; } .werk .werk__bild { order: -1; position: relative; isolation: isolate; /* Muss klammern: das Bild laeuft fuer die Parallaxe auf scale(1.11) und steht damit 11 % ueber den Rahmen hinaus. */ overflow: hidden; margin: 0; border-radius: 0; background: var(--stein); } .werk__bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; /* Kein Hover-Zoom, hier liegt die Parallaxe. Sechs Stockfotos mit sechs Lichtwelten (Neongrün im Garten, Kunstlicht-Rot beim Hausmeister) werden über eine gemeinsame Behandlung zur Serie. Der Wert kommt als Token von bau-system; bis dahin gilt der dezente Ersatz. */ filter: var(--bild-filter, saturate(.86) contrast(1.04)); } /* Farbvorhang beim Auftritt (main.js, "Farbvorhang"): drei Bahnen ueber dem Foto, von oben nach unten Wald, Limette und der Grund des Bereichs. Sie gleiten nacheinander weg; das Skript legt sie an und entfernt sie. */ .werk__farbe { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform; } .werk__farbe--bereich { background: var(--bereich, var(--stein)); } .werk__farbe--limette { background: var(--accent); } .werk__farbe--wald { background: var(--surface-panel); } /* Steht die Tafel breit, aber noch gestapelt (Tablet, schmale Notebooks), wird das Bild flacher: 3:2 über 600 px Breite war fast ein halber Bildschirm Foto vor jedem Text. Gemessen an der Tafel selbst. */ @container (min-width: 600px) { .werk__bild img { aspect-ratio: 2 / 1; } } /* Der Ausschnitt je Foto: die Arbeit bleibt im Bild, auch wenn es als Streifen oder hochkant geschnitten wird. */ #werk-0 .werk__bild img { object-position: 20% 62%; } #werk-1 .werk__bild img { object-position: 30% 50%; } /* Tür und Werkzeug statt Ohr */ #werk-2 .werk__bild img { object-position: 66% 50%; } #werk-3 .werk__bild img { object-position: 46% 40%; } #werk-4 .werk__bild img { object-position: 36% 38%; } #werk-5 .werk__bild img { object-position: 50% 60%; } /* Das Leistungsverzeichnis: ein Papierblatt auf dem Bereichsgrund. Ohne Positionsnummern und ohne Haken - die Liste hat keine Reihenfolge, die Haarlinien ordnen sie allein. */ .verzeichnis { position: relative; z-index: 2; container-type: inline-size; margin: clamp(16px, 2vw, 22px) clamp(10px, 2vw, 28px) clamp(10px, 2vw, 28px); padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px) clamp(6px, .8vw, 10px); border-radius: var(--r-mittel); background: var(--papier); color: var(--ink-body); box-shadow: var(--schatten-1); } .verzeichnis__kopf { padding-bottom: 11px; border-bottom: 1px solid rgba(31, 58, 38, .16); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--bereich-tinte, var(--surface-gras)); } .posliste { display: grid; } /* Die Liste ist Lesetext, aber Nachschlagetext. 2026-09-19 von 18,5 auf 19,5-21 px (Kundenwunsch: groesser und deutlicher). */ .pos { padding: 12px 0; border-top: 1px solid rgba(31, 58, 38, .12); font-size: clamp(19.5px, 1.1rem + .3vw, 21px); line-height: 1.42; color: var(--ink-body); } .posliste > .pos:first-child { border-top: 0; } /* Ab genug Blattbreite zweispaltig, damit die Zeilen kurz bleiben und das Blatt flach. Gemessen am Blatt, nicht am Fenster: dieselbe Tafel steht je nach Breite neben dem Register oder allein. Schwelle mit der groesseren Schrift von 540 auf 600 px. */ @container (min-width: 600px) { .posliste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 48px); } .posliste > .pos:nth-child(2) { border-top: 0; } } /* Die offene Tür unter einer Positionsliste. Nur die Sonderleistungen haben sie: dort ist die Liste ausdrücklich unvollständig, überall sonst ist sie der Vertrag. Sie sitzt über einer eigenen Linie, damit sie nicht als neunte Position gelesen wird. */ .verzeichnis__offen { padding: 14px 0 12px; border-top: 1px solid rgba(31, 58, 38, .16); font-size: 18.5px; line-height: 1.55; color: var(--ink-body); } .verzeichnis__offen a { font-weight: 600; color: var(--tinte-ziegel); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-underline-offset .3s var(--kurve); } .verzeichnis__offen a:hover { text-decoration-thickness: 2px; text-underline-offset: 5px; } /* ── Die drei Formen, ab 1200 px ── Darunter steht jede Tafel gestapelt: Bild, Text, Blatt. */ @media (min-width: 1200px) { .werk .werk__bild { grid-area: bild; } .werk__wort { grid-area: wort; } .verzeichnis { grid-area: verz; } /* Band: das Bild läuft als breiter Streifen über die ganze Tafel. Darunter steht links der Text, rechts ragt das Blatt 92 px in das Bild hinein. Gespiegelt tauschen Text und Blatt die Seite. */ .werk--band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "bild bild" "wort verz"; } .werk--band.werk--spiegel { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "bild bild" "verz wort"; } .werk--band .werk__bild img { aspect-ratio: 2.7 / 1; } .werk--band .werk__wort { padding: calc(var(--werk-p) + 4px) var(--werk-p) var(--werk-p); } .werk--band .verzeichnis { margin: -92px var(--werk-p) var(--werk-p) 0; } .werk--band.werk--spiegel .verzeichnis { margin: -92px 0 var(--werk-p) var(--werk-p); } /* Seite: das Bild steht hochkant über die volle Höhe der Tafel, Text und Blatt teilen sich die andere Spalte. */ .werk--seite { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto 1fr; grid-template-areas: "bild wort" "bild verz"; } .werk--seite.werk--spiegel { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "wort bild" "verz bild"; } .werk--seite .werk__wort { padding: calc(var(--werk-p) + 6px) var(--werk-p) 0; } .werk--seite .verzeichnis { align-self: end; margin: 24px var(--werk-p) var(--werk-p); } /* Blatt: Bild und Text stehen oben nebeneinander, das Blatt liegt breit darunter und greift 30 px über die Bildkante. Die Textspalte ist 1,25-fach: "und Hausmeisterservice" braucht bei 32 px 354 px Zeile. */ .werk--blatt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "bild wort" "verz verz"; } .werk--blatt.werk--spiegel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "wort bild" "verz verz"; } .werk--blatt .werk__bild { min-height: 330px; } .werk--blatt .werk__wort { align-self: center; padding: 34px var(--werk-p) 62px; } .werk--blatt .verzeichnis { margin: -30px 30px 30px; } /* Seite und Blatt: das Bild füllt seine Zelle, egal wie hoch der Text daneben wird. */ .werk--seite .werk__bild img, .werk--blatt .werk__bild img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; } } /* ── Für wen: versetztes Raster ── */ /* ── Grund der Sektion "Fuer wen" ── Der Weg dahin ging ueber zwei Sackgassen: erst dunkles --surface-panel, auf dem die dunklen Fotokarten verschwanden, dann ein blasses Gelbgruen, das nicht nach Gruen aussah. Jetzt Rasengruen. --surface-gras ist so dunkel gewaehlt, dass weisse Schrift 6,40:1 haelt und der Akzentton noch 4,64:1 erreicht. Bei helleren Grastoenen wie #3E7D2C faellt der Akzent auf 3,65 und damit durch. Der Lauftext steht bei .86 statt der ueblichen --ink-muted .68, die hier nur 3,93 ergaebe. */ .feld--gras { position: relative; overflow: hidden; isolation: isolate; background: var(--surface-gras); color: var(--ink-on-dark); } .feld--gras .kapitel__titel { color: var(--ink-on-dark); } .feld--gras .kapitel__lauf { color: rgba(255,255,255,.86); } #fuerwen > .mitte, #gebiet > .mitte { position: relative; z-index: 1; } /* Maehstreifen: auf dem satten Gruen liest sich das als frisch geschnittener Rasen. Die Bahnen wechseln nur um wenige Prozent in der Helligkeit, wie echte Streifen, bei denen die Halme in die eine oder andere Richtung liegen. Leicht schraeg, damit sie nicht wie ein Balkendiagramm wirken. */ .feld__raster { position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(97deg, rgba(255,255,255,.075) 0 68px, rgba(9,28,8,.075) 68px 136px); -webkit-mask-image: radial-gradient(118% 96% at 50% 42%, #000 26%, rgba(0,0,0,0) 96%); mask-image: radial-gradient(118% 96% at 50% 42%, #000 26%, rgba(0,0,0,0) 96%); } /* ── Fuer wen wir arbeiten: helle Blaetter auf Rasengruen ── Das Rasengruen hat der User fuer diese Sektion gewaehlt, es bleibt. Die Karten waren bis 2026-09-18 dunkel (#1F3A26) auf dem Gruen: 1,94:1 Karte gegen Grund, die ganze Sektion las sich als dunkler Block. Jetzt stehen sie auf Papier: das Gruen wird zum Rahmen, die Karte hebt sich ab, und die Schrift darauf ist dunkel (Titel 11,9:1, Satz 10,4:1). Kein Einheitsraster. Der Kopf steht zweispaltig (Titel links, Vorspann rechts auf der Grundlinie), die Verwaltungen quer ueber zwei Spalten mit dem Hochformat links, daneben und darunter die vier anderen. Die Bilder bekommen mehr Hoehe als vorher (4:3 statt 16:10): die Fotos sind Hochformate, im flachen Streifen blieb von ihnen nur ein Band. Maehstreifen leiser, damit die hellen Blaetter nicht auf einem unruhigen Grund stehen (offene Frage aus SEELE.md: .16 -> etwa .08). */ #fuerwen .feld__raster { opacity: .55; } #fuerwen .kapitel { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 22px clamp(32px, 5vw, 80px); } #fuerwen .kapitel__lauf { margin-top: 0; max-width: 46ch; justify-self: end; font-size: var(--t-lead); line-height: 1.45; } .wenraster { list-style: none; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .wenkarte { /* Die Sektion setzt --fokus auf Limette (Rasengruen); auf dem Papier der Karte waere Limette unsichtbar, hier gilt Wald. */ --fokus: var(--surface-panel); position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--papier); color: var(--ink-body); border-radius: var(--r-mittel); overflow: hidden; box-shadow: var(--schatten-1); transition: transform .6s var(--kurve), box-shadow .6s var(--kurve); } .wenkarte__bild { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stein); } .wenkarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--kurve); } .wenkarte__wort { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 1.9vw, 28px) clamp(20px, 1.9vw, 28px) clamp(18px, 1.7vw, 24px); gap: 10px; } .wenkarte__titel { margin: 0; font-size: clamp(1.25rem, 1.05rem + .55vw, 1.5rem); line-height: var(--z-kopf); letter-spacing: -.015em; color: var(--surface-panel); text-wrap: balance; } /* Die Zeile, an der man sich wiedererkennt: Woerter aus der Liste des Kunden, in Gras statt Limette (Limette ist auf Papier nicht lesbar). */ .wenkarte__wer { margin: 0; font-size: var(--t-klein); line-height: 1.5; font-weight: 500; color: var(--surface-gras); } .wenkarte__satz { margin: 2px 0 0; max-width: 46ch; font-size: 18.5px; line-height: var(--z-text); color: var(--ink-body); } /* Die grosse Karte: Bild links im Hochformat, Text rechts mit Luft */ .wenkarte--gross { grid-column: span 2; flex-direction: row; } .wenkarte--gross .wenkarte__bild { flex: 0 0 48%; aspect-ratio: auto; } .wenkarte--gross .wenkarte__bild img { position: absolute; inset: 0; } /* Der Text steht in der Mitte der Hoehe, die die Nachbarkarte vorgibt: oben angeschlagen blieb unter dem Satz ein Loch bis zum Knopf. */ .wenkarte--gross .wenkarte__wort { justify-content: center; padding: clamp(28px, 3.6vw, 56px); gap: 16px; } .wenkarte--gross .wenkarte__titel { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.025em; } .wenkarte--gross .wenkarte__satz { font-size: clamp(18.5px, 1.35vw, 21px); max-width: 38ch; } .wenkarte--gross .wenkarte__wege { margin-top: 12px; } /* Die Wege stehen am Fuss der Karte, immer auf gleicher Hoehe. */ .wenkarte__wege { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } /* Ein Knopf je Karte. Sein ::after legt sich ueber die ganze Karte, so ist die Karte die Trefferflaeche, und fuer Tastatur und Vorleser bleibt es ein einziger, klar benannter Knopf. Positioniert wird das ::after an .wenkarte, deshalb bleiben .wenkarte__wort und __wege unpositioniert. Der Knopf fuellt sich beim Anfahren von links mit Wald (Hintergrund- verlauf, der verschoben wird): dieselbe Geste wie beim Hauptknopf .tat, nur in der hellen Fassung. Kein Pfeil im Knopf (Pfeil-Chips sind ein KI-Muster, Nachaudit 2026-09-18); Fuellung und Rand reichen. */ .wenkarte__mehr { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid rgba(31, 58, 38, .3); border-radius: var(--r-pille); background-color: transparent; background-image: linear-gradient(to right, var(--surface-panel) 50%, transparent 50%); background-size: 220% 100%; background-position: 100% 0; background-repeat: no-repeat; color: var(--surface-panel); font: inherit; font-size: var(--t-klein); font-weight: 600; cursor: pointer; transition: background-position .55s var(--kurve), color .35s var(--kurve), border-color .35s var(--kurve); } .wenkarte__mehr::after { content: ""; position: absolute; inset: 0; z-index: 1; } .wenkarte__mehr[hidden] { display: none; } .wenkarte__mehr:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; background-position: 0 0; border-color: var(--surface-panel); color: var(--ink-on-dark); } /* Der Fokus zeigt die ganze Karte, weil die ganze Karte der Knopf ist: Limette auf Rasengruen misst 4,64:1. */ .wenkarte:has(.wenkarte__mehr:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; } @media (hover: hover) { .wenkarte:has(.wenkarte__mehr:not([hidden])):hover { transform: translateY(-6px); box-shadow: var(--schatten-1); } .wenkarte:hover .wenkarte__bild img { transform: scale(1.045); } .wenkarte:hover .wenkarte__mehr { background-position: 0 0; border-color: var(--surface-panel); color: var(--ink-on-dark); } } /* Der Weg ohne JavaScript: direkt zur Anfrage. Sobald das Skript den Knopf zeigt, fuehrt das Fenster zur Anfrage, und der Link tritt ab. */ .wenkarte__mehr:not([hidden]) + .wenkarte__weg { display: none; } .wenkarte__weg { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--surface-gras); font-size: var(--t-klein); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(53, 107, 38, .45); } .wenkarte__pfeil { width: 18px; height: 18px; flex: none; } .wenkarte__weg:focus-visible { outline: 3px solid var(--surface-gras); outline-offset: 4px; border-radius: var(--r-klein); } /* ── Die offene Frage ── Keine sechste Karte, sondern eine Zeile auf dem Gruen: Titel und Satz links, der Knopf rechts. Weiss auf Rasengruen 5,8:1 auf dem hellsten Streifen, der Satz bei .88 noch 4,9:1. */ .wenoffen { margin-top: clamp(30px, 3.6vw, 52px); padding-top: clamp(24px, 2.8vw, 36px); border-top: 1px solid rgba(255, 255, 255, .24); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 48px; } .wenoffen__titel { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 600; line-height: var(--z-kopf); letter-spacing: -.015em; color: var(--ink-on-dark); } .wenoffen__lauf { margin-top: 8px; max-width: 60ch; font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, .88); } .wenoffen__tat { min-height: 56px; padding-inline: 30px; } .wenoffen__tat:focus-visible { outline: 3px solid var(--ink-on-dark); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .wenkarte, .wenkarte__bild img, .wenkarte__mehr { transition: none; } .wenkarte:hover, .wenkarte:has(.wenkarte__mehr:not([hidden])):hover { transform: none; } .wenkarte:hover .wenkarte__bild img { transform: none; } } /* ── Das Fenster zu jeder Gruppe ── Gebaut wie die Lupe: natives , derselbe dunkelgruene Schleier. Das Blatt ist aber hell, weil hier gelesen wird — laengere Absaetze in dunkler Schrift auf Creme, nicht Weiss auf Gruen. Das Fenster selbst scrollt nie, nur die Textspalte. So bleiben Bild und Kreuz stehen, und auf dem Telefon laeuft der Daumen nicht gegen die Seite dahinter. */ .wenfenster { /* margin: auto aus demselben Grund wie bei .lupe: * { margin: 0 } nimmt dem die Mitte. */ margin: auto; width: min(1060px, calc(100vw - 48px)); max-width: none; height: min(880px, calc(100vh - 48px)); height: min(880px, calc(100dvh - 48px)); max-height: none; padding: 0; border: 0; border-radius: var(--r-mittel); overflow: hidden; background: var(--surface-page); color: var(--ink-body); box-shadow: var(--schatten-3); } .wenfenster[open] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); } .wenfenster::backdrop { background: rgba(12, 26, 16, .86); } /* Scroll-Sperre: solange ein Fenster offen ist, steht die Seite. Die Rinne bleibt reserviert, sonst rueckt alles um die Breite der Bildlaufleiste. data-lenis-prevent am Fenster laesst das Rad dort nativ laufen, statt es Lenis zu geben, das sonst die Seite dahinter bewegt. */ html:has(.wenfenster[open]) { overflow: hidden; scrollbar-gutter: stable; } .wenfenster__bild { position: relative; margin: 0; background: var(--surface-panel); } .wenfenster__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .wenfenster__bild figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 72px clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 28px); background: linear-gradient(to top, rgba(15,30,18,.92), rgba(15,30,18,0)); color: var(--accent); font-size: 18.5px; font-weight: 500; line-height: 1.45; } .wenfenster__blatt { min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* unten kein Innenabstand: die Ausblendkante haftet sonst um diesen Abstand ueber dem Rand, und darunter blieb Text sichtbar stehen. Den Abstand unten gibt jetzt die Kante selbst. */ padding: clamp(30px, 3.4vw, 50px) clamp(24px, 3.6vw, 56px) 0; } /* Kein Deko-Kicker mehr ueber dem Titel ("Fuer wen wir arbeiten"): das Fenster kommt aus genau dieser Sektion. Unten im Blatt blendet eine weiche Kante aus, solange noch Text folgt; am Ende steht sie auf leerem Grund und ist unsichtbar. */ .wenfenster__blatt::after { content: ""; position: sticky; inset-block-end: 0; display: block; height: clamp(36px, 3.4vw, 48px); margin-top: 0; background: linear-gradient(to bottom, rgba(247, 244, 238, 0), var(--surface-page) 85%); pointer-events: none; } .wenfenster__titel { margin: 0; padding-inline-end: 64px; font-size: clamp(28px, 2.5vw, 36px); font-weight: 600; line-height: 1.14; letter-spacing: -.015em; color: var(--surface-panel); text-wrap: balance; } .wenfenster__lead { margin: 18px 0 0; max-width: 60ch; font-size: 19px; line-height: 1.6; color: var(--ink-body); } .wenfenster__kopf { margin: 36px 0 16px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--surface-panel); } .wenfenster__liste, .wenfenster__bereiche, .wenfenster__schritte, .wenfenster__lesen { list-style: none; margin: 0; padding: 0; } .wenfenster__liste { display: grid; gap: 10px; } .wenfenster__liste li { position: relative; padding-inline-start: 26px; font-size: 18px; line-height: 1.6; } /* Ein ruhiger Punkt in Grasgruen. Das Blatt als Aufzaehlungszeichen ist am 2026-09-18 entfallen: Blaetter stehen nur noch am Logo. */ .wenfenster__liste li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--surface-gras); } /* Die Bereiche als Kacheln im Sandton: jede ist ein Sprung zur Bahn des Gewerks im Register. Angefahren Akzent wie die Reiter dort. */ .wenfenster__bereiche { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } .wenfenster__bereiche a { position: relative; display: grid; align-content: start; gap: 4px; height: 100%; padding: 15px 46px 16px 18px; border: 1px solid var(--line-dark); border-radius: var(--r-mittel); background: var(--surface-sand); color: var(--ink-body); text-decoration: none; transition: background-color .3s var(--kurve), border-color .3s var(--kurve); } .wenfenster__bereiche strong { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--surface-panel); } .wenfenster__bereiche span { font-size: 17.5px; line-height: 1.45; color: var(--ink-quiet); } .wenfenster__bereiche a::after { content: ""; position: absolute; inset-inline-end: 21px; inset-block-start: 23px; width: 9px; height: 9px; border-block-start: 2px solid var(--surface-panel); border-inline-end: 2px solid var(--surface-panel); transform: rotate(45deg); transition: transform .35s var(--kurve); } @media (hover: hover) { .wenfenster__bereiche a:hover { background: var(--accent); border-color: var(--accent); } /* --ink-quiet auf Akzent misst nur 4,1 zu 1 */ .wenfenster__bereiche a:hover span { color: var(--ink-on-accent); } .wenfenster__bereiche a:hover::after { transform: translateX(3px) rotate(45deg); } } /* Der Ablauf als Weg mit Haltepunkten wie in der Sektion Ablauf, aber ohne Ziffern: die Karten tragen seit dem Umbau auch keine mehr. */ .wenfenster__schritte li { position: relative; padding: 0 0 22px 32px; font-size: 18px; line-height: 1.6; } .wenfenster__schritte li:last-child { padding-bottom: 0; } .wenfenster__schritte li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .45em; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface-panel); } .wenfenster__schritte li::after { content: ""; position: absolute; inset-inline-start: 6.5px; inset-block-start: calc(.45em + 19px); inset-block-end: 2px; width: 2px; background: var(--line-dark); } .wenfenster__schritte li:last-child::after { display: none; } .wenfenster__schritte strong { display: block; font-weight: 600; color: var(--surface-panel); } .wenfenster__lesen li + li { border-top: 1px solid var(--line-dark); } .wenfenster__lesen a { display: grid; gap: 2px; min-height: 48px; padding: 12px 0; color: var(--surface-panel); text-decoration: none; } .wenfenster__art { font-size: 16.5px; font-weight: 600; color: var(--ink-quiet); } .wenfenster__was { font-size: 18px; font-weight: 500; line-height: 1.4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(31,58,38,.3); transition: text-decoration-color .3s var(--kurve); } @media (hover: hover) { .wenfenster__lesen a:hover .wenfenster__was { text-decoration-color: var(--surface-panel); } } /* Der Abschluss steht auf Creme, nicht auf einer dunklen Platte: .tat fuellt sich beim Anfahren dunkel und waere auf Dunkel derselbe verschwindende Knopf wie zuvor in der offenen Karte. */ .wenfenster__fuss { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-dark); display: grid; justify-items: start; gap: 12px; } .wenfenster__fuss p { margin: 0; font-size: 18.5px; line-height: 1.5; color: var(--ink-quiet); } .wenfenster__tat { min-height: 56px; font-size: 18px; } .wenfenster__zurueck { min-height: 48px; padding: 0 2px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 18.5px; font-weight: 600; color: var(--surface-panel); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(31,58,38,.35); } /* 56 px, dunkel: das Kreuz sitzt mal auf Creme, auf dem Telefon auf dem Foto, und muss auf beidem sofort zu finden sein. */ .wenfenster__zu { position: absolute; z-index: 2; inset-block-start: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--r-pille); background: var(--surface-panel); color: var(--ink-on-dark); cursor: pointer; transition: background-color .3s var(--kurve), color .3s var(--kurve); } .wenfenster__zu svg { width: 24px; height: 24px; } @media (hover: hover) { .wenfenster__zu:hover { background: var(--accent); color: var(--ink-on-accent); } } .wenfenster a:focus-visible, .wenfenster button:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: 3px; } /* Doppelter Ring, damit der Fokus auf Creme wie auf dem Foto steht */ .wenfenster .wenfenster__zu:focus-visible { box-shadow: 0 0 0 3px var(--accent); } /* Telefon und schmales Tablet: fast Vollbild, Bild als Streifen oben */ @media (max-width: 860px) { .wenfenster { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); border-radius: var(--r-mittel); } .wenfenster[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 140px minmax(0, 1fr); } .wenfenster__zu { inset-block-start: 10px; inset-inline-end: 10px; } .wenfenster__titel { padding-inline-end: 0; } .wenfenster__bild figcaption { padding: 36px 76px 12px 18px; font-size: 17.5px; } .wenfenster__lead { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .wenkarte__mehr, .wenfenster__bereiche a, .wenfenster__bereiche a::after, .wenfenster__zu, .wenfenster__was { transition: none; } } /* ── Ablauf: ein Weg mit drei Haltepunkten ── Drei gleich grosse Kacheln nebeneinander sagten nichts ueber die Reihenfolge. Die Sektion behauptet aber einen Weg, also zeigt sie einen: eine Linie, die sich beim Scrollen zeichnet, und drei Halte daran. Umbau 2026-09-18: Leuchtpunkt, Druckwelle und Nachfedern der Marken sind entfallen (der User nennt so etwas "Blinker"). Die Ziffern aus dem Kunden-PDF (01 | Erstkontakt ...) stehen jetzt in der Marke statt als Mono-Zeile ueber dem Titel. Linie und Ring in Grasgruen: Limette ist auf hellem Grund keine Linienfarbe (2,0:1 auf Kalk). Aufbau ab 1100 px: zwei Spalten. Links steht der Kopf mit dem Weg zur Anfrage und bleibt beim Scrollen stehen, rechts laeuft der Weg an ihm vorbei. Jede andere Sektion der Seite setzt den Titel oben ueber den Inhalt; diese hier ist die einzige, die neben ihm erzaehlt. */ #ablauf > .mitte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(48px, 7vw, 120px); align-items: start; } #ablauf .kapitel { position: sticky; top: 124px; max-width: none; margin-bottom: 0; } #ablauf .kapitel__titel { font-size: var(--t-h2); line-height: 1.02; } #ablauf .kapitel__lauf { max-width: 36ch; font-size: var(--t-lead); line-height: 1.45; } .ablauf__tat { margin-top: clamp(26px, 2.6vw, 36px); min-height: 56px; padding-inline: 30px; } .ablauf__tat:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: 3px; } /* Ein Mass fuer beides: die Linie muss durch die Mitte der Marken laufen, nicht daneben. */ .weg { --marke: clamp(50px, 4.4vw, 64px); position: relative; margin-top: 0; } /* Die Schiene traegt die Lage, die das Skript aus den Markenmitten misst, der Zug darin waechst per scaleY. Eine reine Transform. */ .weg__schiene { position: absolute; z-index: 0; inset-inline-start: calc(var(--marke) / 2 - 1px); width: 2px; border-radius: var(--r-klein); background: var(--line-dark); /* inset-block-start und height setzt das Skript */ } .weg__zug { position: absolute; inset: 0; border-radius: inherit; background: var(--surface-gras); transform: scaleY(0); transform-origin: top center; } .halte { display: grid; gap: clamp(3rem, 6vw, 5.5rem); } .halt { position: relative; z-index: 1; display: grid; grid-template-columns: var(--marke) minmax(0, 1fr); align-items: start; gap: 22px clamp(20px, 2.4vw, 34px); } /* Die Marke sitzt auf der Linie und deckt sie an dieser Stelle ab. Sie traegt die Ziffer; erreicht die Linie sie, fuellt sie sich dunkel aus der Mitte, der Ring schliesst sich, die Ziffer wird hell. */ .halt__marke { grid-row: 1; grid-column: 1; display: grid; place-items: center; width: var(--marke); aspect-ratio: 1; position: relative; border-radius: 50%; background: var(--surface-page); box-shadow: inset 0 0 0 2px var(--line-dark); } .halt__ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); overflow: visible; pointer-events: none; /* Beginn oben, im Uhrzeigersinn */ transform: rotate(-90deg); } .halt__ring circle { fill: none; stroke: var(--surface-gras); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; } .halt__fuell { position: absolute; inset: 0; border-radius: 50%; background: var(--surface-panel); transform: scale(0); } .halt__nr { position: relative; z-index: 1; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--surface-panel); } .halt__wort { grid-row: 1; grid-column: 2; } .halt__titel { /* erste Zeile auf Hoehe der Markenmitte */ margin-top: calc(var(--marke) / 2 - .59em); font-size: var(--t-h3); font-weight: 600; line-height: var(--z-kopf); letter-spacing: -.02em; color: var(--surface-panel); text-wrap: balance; } .halt__lauf { margin-top: 14px; max-width: 52ch; font-size: var(--t-body); line-height: var(--z-text); color: var(--ink-body); } /* ── Die Belege ── Ein Blatt wie ein Auszug aus dem Leistungsverzeichnis: Papier mit Haarlinie auf dem Kalk der Sektion, Zeilen durch Linien getrennt statt Haekchen (Haekchenlisten stehen in PRODUCT.md unter den Anti-Referenzen; die Punkte selbst sind Kundenwortlaut und bleiben). Das Blatt steht unter dem Text des Halts, nicht daneben. */ .beleg { grid-row: 2; grid-column: 2; max-width: 560px; padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px) clamp(8px, 1vw, 12px); border-radius: var(--r-mittel); background: var(--papier); border: 1px solid var(--line-dark); box-shadow: var(--schatten-1); } .beleg__kopf { margin-bottom: 10px; font-size: 18.5px; font-weight: 600; line-height: 1.35; color: var(--surface-panel); } .beleg__liste { display: grid; } .beleg__liste li { padding-block: 11px; border-top: 1px solid var(--line-dark); font-size: 18.5px; line-height: 1.45; color: var(--ink-body); } /* ── Ansprechpartner: Bogen und Überlappung ── */ .mensch { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .mensch__bild { border-radius: var(--r-pille) var(--r-pille) var(--r-gross) var(--r-gross); overflow: hidden; background: var(--surface-sand); } .mensch__bild img { width: 100%; height: auto; } .mensch__wort { position: relative; } .mensch__lauf { margin-top: 20px; max-width: 50ch; color: var(--ink-quiet); } .fakten { margin-top: 36px; display: grid; border-top: 1px solid var(--line-dark); } .fakten > div { padding: 15px 0; border-bottom: 1px solid var(--line-dark); display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px; } .fakten dt { font-size: 16.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-quiet); padding-top: 3px; } .fakten dd { font-size: 18.5px; font-weight: 500; color: var(--surface-panel); } /* ── Jahresband: zwoelf Spalten, ein Balken je Zeitraum ── Die Sektion selbst ist der Beweis fuer die Ueberschrift: zwoelf Monate, die Leistungen als Balken darin, und der laufende Monat als getoente Spalte ueber alle Spuren. 2026-09-18, zweite Runde: ein Planblatt auf Nebel, wie der Lageplan in #gebiet und das Anfrageblatt in #kontakt — drei Dokumente eines Betriebs, der plant. Links je Spur Name, Zeitraum und Text, rechts die Bahn mit durchgehenden Monatslinien. Drei Spuren mit Farbbedeutung: ruhiges Grau-Oliv fuer das, was das ganze Jahr laeuft (der Boden), Rasengruen fuer den Garten, Wasserblau fuer den Winter. Die Zeitraeume stehen als --von und --bis am Balken. Das sind Rasterlinien: ein Balken von Maerz bis Dezember laeuft von Linie 3 bis Linie 13. Sie stehen bewusst im Quelltext und nicht im Skript — es ist Inhalt, kein Zustand. --spalte ist der Beginn der Bahn: fuenf Zwoelftel der Breite abzueglich Luecke, plus Luecke. Genau so teilt das Raster jeder Spur (5fr 7fr mit derselben Luecke), deshalb fluchten Kopfzeile, Linien und Toenung mit den Balken, ohne gemeinsames Raster. Die Formel enthaelt 100 %, das sich erst dort aufloest, wo sie benutzt wird: immer gegen die Breite des Plans. */ .jahr-feld { background: var(--nebel); color: var(--ink-body); } .jahresband { /* Der laufende Monat, 1 bis 12. Das Skript setzt ihn; ohne Skript bleibt er auf 0, und Toenung und Schild entfallen. */ --monat: 0; --spur-h: clamp(14px, 1.5vw, 22px); --marke-bahn: 46px; --luecke: clamp(24px, 3.4vw, 56px); --spalte: calc((100% - var(--luecke)) * 5 / 12 + var(--luecke)); --spur-farbe: var(--surface-panel); position: relative; margin-top: clamp(.25rem, 1vw, .75rem); padding: clamp(22px, 3.6vw, 52px); border-radius: var(--r-gross); background: var(--papier); box-shadow: var(--schatten-1); } /* Der Satz zum laufenden Monat steht oben: er erklaert die getoente Spalte. Der Monat traegt dieselbe Limette wie die Spalte, als Marker unter dem Wort, nicht als Schriftfarbe. */ .jahresband__jetzt { max-width: 62ch; margin-bottom: clamp(20px, 2.6vw, 34px); font-size: var(--t-lead); line-height: 1.42; color: var(--ink-body); } .jahresband__jetzt b { font-weight: 600; color: var(--surface-panel); box-shadow: inset 0 -.36em 0 rgba(207,232,43,.6); } .jahresband__jetzt:empty { display: none; } .jahresband__raster { position: relative; padding-block-start: var(--marke-bahn); } /* Monatslinien ueber die ganze Bahn, hinter den Balken */ .jahresband__raster::after { content: ''; position: absolute; z-index: 0; pointer-events: none; inset-block: var(--marke-bahn) 0; inset-inline: var(--spalte) 0; background: linear-gradient(90deg, rgba(31,58,38,.11) 1px, transparent 1px) 0 0 / calc(100% / 12) 100% repeat-x; box-shadow: inset -1px 0 0 rgba(31,58,38,.11); } /* Der laufende Monat: eine getoente Spalte ueber alle Spuren */ .jahresband.ist-bereit .jahresband__raster::before { content: ''; position: absolute; z-index: 0; pointer-events: none; inset-block: calc(var(--marke-bahn) - 6px) 0; inset-inline-start: calc(var(--spalte) + (100% - var(--spalte)) * (var(--monat) - 1) / 12); width: calc((100% - var(--spalte)) / 12); border-radius: var(--r-klein) var(--r-klein) 0 0; background: rgba(207,232,43,.24); transform: scaleY(0); transform-origin: top center; transition: transform .8s var(--kurve) .35s; } .jahresband.ist-da .jahresband__raster::before { transform: scaleY(1); } /* ── Die Kopfzeile mit den Monaten, nur ueber der Bahn ── */ .jahresband__monate { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); list-style: none; margin: 0; margin-inline-start: var(--spalte); padding: 0 0 12px; border-block-end: 1.5px solid rgba(31,58,38,.3); } .jahresband__monate li { padding-inline-start: 7px; font-size: 16.5px; font-weight: 500; line-height: 1.2; color: var(--ink-quiet); } .jahresband__kurz { display: none; } /* ── Die Spuren: links das Wort, rechts die Bahn ── */ .jahresband__spuren { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; } .gewerkjahr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--luecke); align-items: start; padding-block: clamp(22px, 2.6vw, 34px); border-block-end: 1px solid var(--line-dark); } .gewerkjahr:last-child { border-block-end: 0; padding-block-end: 6px; } /* Das Ganzjaehrige ist der Boden und steht deshalb im ruhigsten Ton */ .gewerkjahr--ganz { --spur-farbe: var(--ink-quiet); } .gewerkjahr--garten { --spur-farbe: var(--surface-gras); } .gewerkjahr--winter { --spur-farbe: var(--tinte-wasser); } .gewerkjahr__kopf { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; } .gewerkjahr__zeichen { width: 22px; height: 22px; flex: none; align-self: center; fill: var(--spur-farbe); } .gewerkjahr__name { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); font-weight: 600; line-height: var(--z-kopf); letter-spacing: -.022em; color: var(--surface-panel); } /* Der Zeitraum steht im Klartext unter dem Namen, in der Farbe seines Balkens: der Balken ist nur seine Zeichnung, und wer ihn nicht sieht, verliert nichts. Alle drei Farben halten auf Papier >= 6,1 : 1. */ .gewerkjahr__zeit { font-size: var(--t-klein); font-weight: 600; color: var(--spur-farbe); } .gewerkjahr__kopf .gewerkjahr__zeit { flex-basis: 100%; margin-top: 2px; padding-inline-start: 34px; } .gewerkjahr__text { margin-top: 8px; max-width: 52ch; padding-inline-start: 34px; font-size: 18.5px; line-height: 1.55; color: var(--ink-quiet); } /* Die ganzjaehrige Spur ist eine Gruppe: der Zeitraum als Ueberschrift, darunter je Bereich eine eigene Zeile im selben Raster wie die Spuren, mit einem schmaleren Balken auf der Hoehe des Namens. So fuellt die Gruppe ihre Bahn, statt neben drei Absaetzen leere Monate zu zeigen. */ .gewerkjahr--ganz { display: block; } .gewerkjahr--ganz > .gewerkjahr__zeit { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: var(--z-kopf); letter-spacing: -.022em; color: var(--surface-panel); } .gewerkjahr__gruppe { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 20px; } .gewerkjahr__teil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--luecke); align-items: start; } .gewerkjahr__teil .gewerkjahr__spur { height: calc(var(--spur-h) * .72); margin-top: 6px; } .gewerkjahr__teil .gewerkjahr__kopf { flex-wrap: nowrap; align-items: flex-start; } .gewerkjahr__teil .gewerkjahr__zeichen { width: 20px; height: 20px; align-self: flex-start; margin: .15em 2px 0; fill: var(--surface-panel); } .gewerkjahr__teil .gewerkjahr__name { font-size: clamp(1.16rem, 1.07rem + .3vw, 1.28rem); line-height: 1.25; letter-spacing: -.012em; } .gewerkjahr__teil .gewerkjahr__text { margin-top: 4px; } /* ── Die Balken ── Die Spur ist dasselbe Zwoelfteilraster wie die Kopfzeile. Ihre Rinne ist halb durchsichtig, die Monatslinien des Plans laufen durch sie hindurch; nur die Balken decken sie. Die Spur steht auf der Hoehe der ersten Zeile ihres Namens. */ .gewerkjahr__spur { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 6px; height: var(--spur-h); background: rgba(31,58,38,.05); border-radius: var(--r-klein); } .gewerkjahr__balken { grid-row: 1; grid-column: var(--von) / var(--bis); border-radius: var(--r-klein); background: var(--spur-farbe); /* Aus der linken Kante herauswachsen, nicht aufblenden: ein Zeitraum laeuft in eine Richtung, und die Bewegung sagt dasselbe. */ transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--kurve); } /* Was ueber den Jahreswechsel weiterlaeuft, endet an der Jahreskante gerade statt rund: der ganzjaehrige Balken an beiden Enden, der Winterdienst im Januar links und im Dezember rechts. */ .gewerkjahr--ganz .gewerkjahr__balken { border-radius: 0; } .gewerkjahr--winter .gewerkjahr__balken:first-child { border-start-start-radius: 0; border-end-start-radius: 0; } .gewerkjahr--winter .gewerkjahr__balken:last-child { border-start-end-radius: 0; border-end-end-radius: 0; } /* Der Winterdienst-Abschnitt am Jahresende waechst nach links, weil er dort endet, wo das Jahr endet. */ .gewerkjahr__balken:nth-child(2) { transform-origin: right center; } /* Auftritt: die Balken wachsen nacheinander, von oben nach unten */ .jahresband.ist-da .gewerkjahr__balken { transform: scaleX(1); } .jahresband.ist-da .gewerkjahr:nth-child(2) .gewerkjahr__balken { transition-delay: .12s; } .jahresband.ist-da .gewerkjahr:nth-child(3) .gewerkjahr__balken { transition-delay: .24s; } /* ── Das Schild des laufenden Monats ── Es sitzt ueber der getoenten Spalte in der freien Bahn ueber der Kopfzeile. Die einzige Limette der Sektion neben der Toenung. */ .jahresband__marke { position: absolute; z-index: 2; inset-block-start: calc(var(--marke-bahn) * -1); height: var(--marke-bahn); inset-inline-start: calc((var(--monat) - .5) / 12 * 100%); width: 0; opacity: 0; transition: opacity .5s var(--kurve) .6s; pointer-events: none; } .jahresband.ist-da .jahresband__marke { opacity: 1; } /* Ohne Skript steht --monat auf 0: dann gibt es die Marke gar nicht erst */ .jahresband:not(.ist-bereit) .jahresband__marke { display: none; } .jahresband__marke span { position: absolute; inset-block-start: 4px; inset-inline-start: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: var(--r-pille); background: var(--accent); color: var(--ink-on-accent); box-shadow: 0 0 0 1.5px rgba(31,58,38,.18); font-size: 16.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; } /* Im Dezember stiesse das Schild rechts aus dem Plan heraus, im Januar links. Dann haengt es an der Kante statt mittig ueber der Spalte. */ .jahresband__marke[data-rand="rechts"] span { inset-inline-start: auto; inset-inline-end: -2.2em; transform: none; } .jahresband__marke[data-rand="links"] span { inset-inline-start: -2.2em; transform: none; } /* Schmal: Wort ueber dem Balken, die Bahn ist die volle Breite. Monats- linien und getoente Spalte wuerden hier durch die Absaetze laufen; statt ihrer bekommt jede Rinne ihre Monatsfugen und eine Kerbe im laufenden Monat. Zwoelf Spalten bleiben zwoelf: das Jahr laesst sich nicht stapeln, ohne dass die Aussage verloren geht. */ @media (max-width: 900px) { .jahresband { --spalte: 0px; --spur-h: 12px; --marke-bahn: 40px; padding: 22px 16px 18px; } .gewerkjahr, .gewerkjahr__teil { grid-template-columns: minmax(0, 1fr); } .gewerkjahr__teil .gewerkjahr__spur { margin-top: 12px; } .gewerkjahr__spur { margin-top: 16px; background: linear-gradient(90deg, transparent calc(100% - 1.5px), rgba(31,58,38,.16) 0) 0 0 / calc(100% / 12) 100% repeat-x, rgba(31,58,38,.07); } .jahresband__raster::after, .jahresband.ist-bereit .jahresband__raster::before { display: none; } .jahresband.ist-bereit .gewerkjahr__spur::after { content: ''; position: absolute; z-index: 1; inset-block: -5px; inset-inline-start: calc((var(--monat) - .5) / 12 * 100%); width: 3px; margin-inline-start: -1.5px; border-radius: var(--r-klein); background: var(--surface-panel); box-shadow: 0 0 0 2px var(--papier); } .jahresband__monate li { padding-inline-start: 0; text-align: center; } .jahresband__kurz { display: inline; } .jahresband__lang { display: none; } .gewerkjahr__text { font-size: 18px; padding-inline-start: 0; } .gewerkjahr__kopf .gewerkjahr__zeit { padding-inline-start: 34px; } .jahresband__marke[data-rand="rechts"] span { inset-inline-end: -1em; } .jahresband__marke[data-rand="links"] span { inset-inline-start: -1em; } } /* ── Ratgeber: ein Leitbeitrag, zwei Anrisse ── Bis 2026-09-18 drei gleiche Karten mit Versal-Etikett ueber dem Titel. Jetzt traegt ein Beitrag Bild und grossen Titel, die beiden anderen stehen als Textanrisse darunter. Die Titel sind das Staerkste an diesen Beitraegen; sie bekommen die Flaeche, nicht ein Kartenrahmen. Eigene Klassen mit Praefix: .text ist kurz und kollisionsgefaehrdet. */ .ratgeber-teaser { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); } .ratgeber-teaser__weg { display: block; border-radius: var(--r-mittel); } .ratgeber-teaser__leit .ratgeber-teaser__weg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.75rem, 4.5vw, 4rem); align-items: center; } .ratgeber-teaser__bild { margin: 0; overflow: hidden; background: var(--stein); } .ratgeber-teaser__bild img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .9s var(--kurve); } .ratgeber-teaser__titel { font-size: var(--t-h3); font-weight: 600; line-height: var(--z-kopf); letter-spacing: -.024em; color: var(--surface-panel); text-wrap: balance; transition: color .3s var(--kurve); } .ratgeber-teaser__leit .ratgeber-teaser__titel { font-size: clamp(1.875rem, 1.25rem + 1.9vw, 2.875rem); line-height: 1.06; letter-spacing: -.032em; } .ratgeber-teaser__lauf { margin-top: 14px; max-width: 52ch; font-size: var(--t-body); color: var(--ink-quiet); } /* Kein Pfeil, kein Rutschen: der ganze Block ist der Link, die Zeile sagt es in Worten. Unterstrichen in Ziegel, dem Linkton auf hellem Grund. */ .ratgeber-teaser__mehr { display: inline-block; margin-top: 18px; font-size: 18.5px; font-weight: 600; color: var(--surface-panel); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--tinte-ziegel); transition: color .3s var(--kurve); } @media (hover: hover) { .ratgeber-teaser__weg:hover .ratgeber-teaser__bild img { transform: scale(1.035); } .ratgeber-teaser__weg:hover .ratgeber-teaser__titel, .ratgeber-teaser__weg:hover .ratgeber-teaser__mehr { color: var(--tinte-ziegel); } } .ratgeber-teaser__weg:focus-visible { outline-offset: 8px; } .ratgeber-teaser__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } .ratgeber-teaser__liste > li { padding-top: clamp(20px, 2.2vw, 28px); border-top: 1.5px solid rgba(31,58,38,.24); } /* Zweispaltiger Kopf: Titel links, Vorspann und der Weg in alle Beitraege rechts, oben buendig mit dem Titel. Der Weg ist ein Knopf, kein Randlink: zehn Beitraege stehen dahinter, drei davon sind hier nur angerissen. */ .ratgeber-kopf { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: start; } /* Oben buendig mit dem Titel: der Vorspann beginnt auf der Hoehe der ersten Titelzeile, der Knopf darf darunter weiterlaufen. */ .ratgeber-kopf__seite { display: grid; justify-items: start; gap: 22px; padding-top: .55rem; } .ratgeber-kopf .kapitel__lauf { margin-top: 0; } @media (max-width: 900px) { .ratgeber-kopf { grid-template-columns: minmax(0, 1fr); } .ratgeber-teaser__leit .ratgeber-teaser__weg { grid-template-columns: minmax(0, 1fr); gap: 22px; } .ratgeber-teaser__liste { grid-template-columns: minmax(0, 1fr); } } /* ── Kontakt ── */ .anfrage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); } .anfrage__lauf { margin-top: 20px; max-width: 42ch; color: var(--ink-muted); } /* Scheibe und Figur im Kontakt stehen seit 2026-09-18 im Fluss der linken Spalte (.kontakt-figur im Block "Kontakt hell"). Die Lagen .lage--kreis und .lage--figur mit --figur-x/--figur-h sind damit entfallen; keine Seite nutzt sie mehr. */ .tafel--flach .lage--ui { z-index: 2; } .tafel--flach .lage--ui .mitte { padding-inline-end: clamp(0px, 30cqw, 400px); } .direkt { margin-top: 36px; display: grid; border-top: 1px solid var(--line-light); } .direkt li { padding: 15px 0; border-bottom: 1px solid var(--line-light); display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 16px; align-items: baseline; } .direkt__marke { font-size: 16.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); } .direkt__wert { font-size: 18.5px; font-weight: 500; color: var(--ink-on-dark); } a.direkt__wert:hover { color: var(--accent); } /* Ein Abstand zwischen allen Blöcken des Formulars, keine Außenränder an einzelnen Feldern. Vorher addierten sich gap, die Ränder der Fieldsets und die 9 px unter jeder Pille zu ungleichen Lücken. */ .formular { display: grid; gap: 26px; } .formular > .wahl, .formular > .brief { margin: 0; } .feldpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .eingabe { display: grid; gap: 8px; } .eingabe > span { font-size: 16.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); } /* Feld und Kästchen sind hier keine Zierde, sondern Ziele: 56 px hohe Zeilen und 24-px-Kästchen treffen auch ältere Hände sicher. */ .eingabe input, .eingabe textarea { width: 100%; min-height: 56px; padding: 16px 18px; font-family: inherit; font-size: 18.5px; color: var(--ink-on-dark); background: rgba(255,255,255,.07); border: 1px solid var(--line-light); border-radius: var(--r-mittel); transition: border-color .3s var(--kurve), background .3s var(--kurve); } .eingabe textarea { resize: vertical; } .eingabe input:focus, .eingabe textarea:focus { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); } .wahl { border: 0; padding: 0; margin: 4px 0; } .wahl legend { font-size: 16.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-bottom: 10px; } .wahl label { display: inline-flex; align-items: center; gap: 11px; min-height: 52px; margin: 0 9px 9px 0; padding: 11px 20px; border: 1px solid var(--line-light); border-radius: var(--r-pille); font-size: 18.5px; cursor: pointer; transition: border-color .3s var(--kurve), background .3s var(--kurve); } .wahl label:hover { border-color: rgba(255,255,255,.4); } .wahl input { accent-color: var(--accent); width: 24px; height: 24px; flex: none; } /* Kästchen im Anfrageformular: gleich breite Kacheln im Raster statt Pillen. Die Pillen brachen je nach Wortlänge mal zu zweit, mal einzeln um, und die Reihe zerfaserte. Das Raster rechnet die Spalten selbst aus: zwei, wenn das Formular Platz hat, eine auf dem Telefon. Nur hier — die Karriereseite nutzt .wahl label weiter als Pille. */ .wahl__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; } .wahl__raster label { display: flex; margin: 0; min-height: 56px; padding: 12px 16px; border-radius: var(--r-mittel); line-height: 1.3; background: rgba(255,255,255,.04); } .wahl__raster label:has(input:checked) { border-color: var(--accent); background: rgba(255,255,255,.1); } .wahl__wink { margin-top: 12px; max-width: 58ch; font-size: 18.5px; line-height: 1.55; color: var(--ink-muted); } .wahl__wink strong { font-weight: 600; color: var(--ink-on-dark); } /* Der Hinweis zu "Sonstiges" erscheint erst, wenn das Kästchen gesetzt ist. Ohne :has() bleibt er stehen wie bisher. */ @supports selector(:has(*)) { .wahl__wink { display: none; } .wahl:has(input[value="Sonstiges"]:checked) .wahl__wink { display: block; } } .zustimmung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 18.5px; color: var(--ink-muted); } .zustimmung input { margin-top: 3px; accent-color: var(--accent); width: 24px; height: 24px; flex: none; } .zustimmung a { color: var(--ink-on-dark); border-bottom: 1px solid var(--accent); } .formular .tat { justify-self: start; } /* Kontakt, 2026-09-14: Figur und Scheibe stehen unten in der linken Spalte, unter den Kontaktwegen — dort war nach dem kurzen Text eine leere Fläche. Vorher hielt die Sektion rechts ein Drittel der Breite für die Figur frei, und das Formular drängte sich auf 400 px (bei 1100 px Fenster auf 309 px). */ .anfrage { align-items: start; } #kontakt.tafel--flach .lage--ui .mitte { padding-inline-end: 0; } /* ── Kontakt hell (2026-09-18) ── Klinker als Grund, das Formular auf einem Papierblatt mit hellen Feldern und Beschriftungen in normaler Schrift. Die dunkle Tafel mit dunklen Feldern und Versal-Labels war fuer aeltere Besucher das schwerste Formular der Seite, und sie stiess direkt an den dunklen Fuss. Zwei Ebenen: .formular--hell ist die helle Formularform und gilt fuer jedes Formular, das die Klasse traegt (Anfrage hier, Bewerbung auf der Karriereseite). Was nur diese Sektion betrifft — Grund, Anrufknopf, Kontaktwege, Figur, die naechsten Schritte — haengt an #kontakt. Die Grundregeln .eingabe, .wahl, .brief, .zustimmung bleiben unberuehrt. */ #kontakt.kontakt-feld { background: var(--klinker-hell); color: var(--ink-body); border-radius: 0; } #kontakt .kapitel__titel { color: var(--surface-panel); } /* Beide Spalten duerfen unter ihren Inhalt schrumpfen, sonst drueckt eine lange Zeile das Blatt auf 320 px ueber den Rand der Tafel. */ #kontakt .anfrage > * { min-width: 0; } #kontakt .anfrage__lauf { max-width: 40ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-quiet); } /* Die linke Spalte ist eine Saeule so hoch wie das Formularblatt: oben Titel, Anruf, Kontaktwege und Schritte, darunter fuellt die Figur den Rest bis zur Unterkante und steht auf der Kante der Tafel (der negative Aussenrand nimmt das untere Polster der Tafel zurueck). Mindestens 340 px, hoechstens 760 px, dann bleibt eine kleine Luft. */ #kontakt .anfrage__wort { align-self: stretch; display: flex; flex-direction: column; } #kontakt .kontakt-ruf { align-self: flex-start; } #kontakt .kontakt-weiter { margin-bottom: clamp(24px, 3vw, 40px); } .kontakt-figur { flex: 1 1 auto; display: flex; align-items: flex-end; min-height: 340px; max-height: 760px; /* auto: was die Figur bei 760 px nicht mehr fuellt, geht ueber sie, nicht unter sie — sie bleibt auf der Kante stehen. */ margin-top: auto; margin-bottom: calc(-1 * clamp(3.25rem, 9vw, 6.5rem)); padding-inline-start: clamp(12px, 4cqw, 64px); pointer-events: none; } .kontakt-figur__halt { position: relative; display: block; height: 100%; } /* Die Scheibe hinter Kopf und Schultern: anderthalbmal so breit wie die Figur, ihr oberer Rand bei 11 % der Figurhoehe. So bleibt die Limette bei 1440 px unter 4 % der Flaeche der Sektion. */ .kontakt-figur__halt::before { content: ""; position: absolute; z-index: 0; inset-block-start: 11%; inset-inline-start: 50%; width: 150%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--accent); } #kontakt .kontakt-figur .figur { position: relative; z-index: 1; display: block; height: 100%; width: auto; max-width: none; } @media (max-width: 900px) { .kontakt-figur { display: none; } } /* Fokus auf hellem Grund: der globale Ring in Limette misst auf Klinker, Papier und Nebel nur um 1,3 : 1. In den hellen Sektionen dieses Bereichs steht er in Wald. */ :is(#jahr, #ratgeber, #fragen, #gebiet, #kontakt) :where(a, button, input, textarea, summary):focus-visible { outline-color: var(--surface-panel); } /* Der Anrufknopf: der schnellste Weg steht als Knopf, nicht als Tabellenzeile. Auf dem Telefon ist er ein Anruf mit einem Tipp. */ .kontakt-ruf { display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(28px, 3vw, 40px); padding: 12px 32px 12px 12px; border-radius: var(--r-pille); background: var(--surface-panel); color: var(--ink-on-dark); box-shadow: var(--schatten-3); transition: transform .4s var(--kurve), box-shadow .4s var(--kurve); } .kontakt-ruf__zeichen { width: 56px; height: 56px; padding: 14px; flex: none; border-radius: 50%; background: var(--accent); fill: var(--ink-on-accent); transition: transform .45s var(--kurve); } .kontakt-ruf__wort { display: grid; gap: 2px; line-height: 1.15; } .kontakt-ruf__art { font-size: 17.5px; font-weight: 500; color: rgba(255,255,255,.82); } .kontakt-ruf__nr { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } @media (hover: hover) { .kontakt-ruf:hover { transform: translateY(-2px); box-shadow: var(--schatten-3); } .kontakt-ruf:hover .kontakt-ruf__zeichen { transform: rotate(-12deg); } } #kontakt .kontakt-ruf:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: 4px; } #kontakt .direkt { margin-top: clamp(22px, 2.4vw, 30px); max-width: 30rem; border-top-color: rgba(31,58,38,.2); } #kontakt .direkt li { border-bottom-color: rgba(31,58,38,.2); } @media (min-width: 641px) { #kontakt .direkt li { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); } } #kontakt .direkt__marke { font-size: var(--t-klein); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-quiet); } #kontakt .direkt__wert { font-size: 18px; font-weight: 500; color: var(--surface-panel); overflow-wrap: anywhere; } #kontakt a.direkt__wert { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--tinte-ziegel); } #kontakt a.direkt__wert:hover { color: var(--tinte-ziegel); } /* Die naechsten Schritte: dieselben drei Titel wie im Ablauf, als kurze Leiter mit Ziffern auf einer Linie. */ .kontakt-weiter { margin-top: clamp(30px, 3.4vw, 44px); max-width: 30rem; } .kontakt-weiter__titel { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--surface-panel); } .kontakt-weiter__liste { counter-reset: schritt; position: relative; margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; } .kontakt-weiter__liste::before { content: ''; position: absolute; z-index: 0; inset-block: 16px 16px; inset-inline-start: 15px; width: 2px; border-radius: var(--r-klein); background: rgba(31,58,38,.2); } .kontakt-weiter__liste li { counter-increment: schritt; position: relative; z-index: 1; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 18.5px; font-weight: 500; line-height: 1.35; color: var(--ink-body); } .kontakt-weiter__liste li::before { content: counter(schritt); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px rgba(31,58,38,.4); font-size: 16.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--surface-panel); } .kontakt-weiter__weg { display: block; width: fit-content; max-width: calc(100% - 46px); margin-top: 16px; margin-inline-start: 46px; font-size: 17.5px; font-weight: 600; color: var(--surface-panel); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--tinte-ziegel); } .kontakt-weiter__weg:hover { color: var(--tinte-ziegel); } /* ── Das Formularblatt ── */ .kontakt-blatt { padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r-mittel); background: var(--papier); box-shadow: var(--schatten-1); } .kontakt-blatt__kopf { display: grid; gap: 6px; } .kontakt-blatt__titel { font-size: var(--t-h3); font-weight: 600; line-height: var(--z-kopf); letter-spacing: -.024em; color: var(--surface-panel); } .kontakt-blatt__pflicht { font-size: var(--t-klein); color: var(--ink-quiet); } .eingabe__pflicht { color: var(--tinte-ziegel); font-weight: 600; } /* ── .formular--hell: helle Felder auf Papier ── Rand 55 % Wald: gegen Papier 3,2 : 1, gegen den Feldgrund 3,0 : 1 (WCAG 1.4.11, Kanten von Bedienelementen). */ .formular--hell .eingabe { align-content: start; } /* Zwei Felder nebeneinander nur, solange jedes mindestens 15rem hat. Darunter brach "Telefon oder E-Mail *" zweizeilig um und schob sein Feld tiefer als das daneben. */ .formular--hell .feldpaar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .formular--hell .eingabe > :is(label, span:first-child), .formular--hell .wahl legend, .formular--hell .brief legend { font-size: 18.5px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--surface-panel); } .formular--hell .eingabe :is(input, textarea) { font-size: 18px; color: var(--ink-body); background: var(--kalk); border: 1.5px solid rgba(31,58,38,.55); border-radius: var(--r-mittel); transition: border-color .25s var(--kurve), box-shadow .25s var(--kurve), background-color .25s var(--kurve); } .formular--hell .eingabe textarea::placeholder { color: var(--ink-quiet); opacity: 1; } @media (hover: hover) { .formular--hell .eingabe :is(input, textarea):hover { border-color: rgba(31,58,38,.8); } } .formular--hell .eingabe :is(input, textarea):focus { outline: none; background: var(--papier); border-color: var(--surface-panel); box-shadow: 0 0 0 3px rgba(31,58,38,.22); } /* Fehlerzustand: Rand, Grund und ein Satz mit Zeichen unter dem Feld — nie nur die Farbe. Ziegel haelt auf Papier 6,8 : 1. */ .formular--hell [aria-invalid="true"]:is(input[type="text"], input[type="email"], input[type="tel"], textarea) { border-color: var(--tinte-ziegel); background: color-mix(in srgb, var(--klinker-hell) 45%, var(--papier)); box-shadow: 0 0 0 3px rgba(147,63,32,.14); } .formular--hell .zustimmung input[aria-invalid="true"] { outline: 2px solid var(--tinte-ziegel); outline-offset: 2px; } .eingabe__fehler { display: flex; align-items: flex-start; gap: 8px; font-size: 17.5px; font-weight: 500; line-height: 1.45; color: var(--tinte-ziegel); } .eingabe__fehler::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 104a12 12 0 1 1 12-12a12 12 0 0 1-12 12Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 104a12 12 0 1 1 12-12a12 12 0 0 1-12 12Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* display:flex schlaegt sonst das hidden-Attribut */ .eingabe__fehler[hidden] { display: none; } /* Kaestchen und Pillen: helle Kacheln, gewaehlt in Moos mit Wald-Rand */ .formular--hell .wahl label { border: 1.5px solid rgba(31,58,38,.3); background: var(--kalk); color: var(--ink-body); } @media (hover: hover) { .formular--hell .wahl label:hover { border-color: rgba(31,58,38,.6); } } .formular--hell .wahl label:has(input:checked) { border-color: var(--surface-panel); background: var(--moos-hell); } .formular--hell .wahl input, .formular--hell .zustimmung input { accent-color: var(--surface-panel); } .formular--hell .wahl__wink { color: var(--ink-quiet); } .formular--hell .wahl__wink strong { color: var(--surface-panel); } /* Das Zeichen des Bereichs steht rechts in der Kachel, still; gewaehlt bekommt es Farbe. Dieselben Zeichen wie im Register der Leistungen. */ .wahl__zeichen { width: 22px; height: 22px; flex: none; margin-inline-start: auto; fill: rgba(31,58,38,.4); transition: fill .25s var(--kurve); } .formular--hell .wahl label:has(input:checked) .wahl__zeichen { fill: var(--surface-gras); } .formular--hell .brief { border: 1.5px solid rgba(31,58,38,.22); background: none; } .formular--hell .brief__frage { color: var(--ink-body); } .formular--hell .brief__wahl span { border: 1.5px solid rgba(31,58,38,.4); background: var(--kalk); color: var(--ink-body); } .formular--hell .brief__wahl input:checked + span { background: var(--surface-panel); border-color: var(--surface-panel); color: var(--ink-on-dark); } .formular--hell .brief__wahl input:focus-visible + span { outline-color: var(--surface-panel); } @media (hover: hover) { .formular--hell .brief__wahl label:hover span { border-color: rgba(31,58,38,.7); } } .formular--hell .brief__fein { color: var(--ink-quiet); } .zustimmung-halt { display: grid; gap: 10px; } .formular--hell .zustimmung { color: var(--ink-body); } .formular--hell .zustimmung a { color: var(--surface-panel); font-weight: 500; border-bottom: 1.5px solid var(--tinte-ziegel); } /* Rueckmeldung nach dem Absenden (main.js, formularePruefen). Leer bleibt sie im Baum (sonst meldet das Vorleseprogramm die erste Aenderung nicht) und nimmt sich nur den Rasterabstand zurueck. */ .formular .formular__stand:empty { margin-top: -26px; } .formular__stand--fehlt { font-size: 18.5px; font-weight: 600; color: var(--tinte-ziegel); } .formular__stand--offen { padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-mittel); background: var(--stein); box-shadow: inset 0 0 0 1px rgba(31,58,38,.14); font-size: 18.5px; color: var(--ink-body); } .formular__stand--offen p + p { margin-top: 8px; } .formular__stand-titel { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--surface-panel); } .formular__stand-wege { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .formular__stand .tat--klar { color: var(--surface-panel); border-color: rgba(31,58,38,.34); } .formular__stand .tat--klar:hover, .formular__stand .tat--klar:focus-visible { color: var(--ink-on-accent); border-color: var(--accent); } @media (max-width: 640px) { .kontakt-ruf { display: flex; width: 100%; padding-inline-end: 20px; } .kontakt-blatt { padding: 22px 18px; margin-inline: -4px; } .formular__stand-wege .tat { width: 100%; } } /* ═══════ FRAGEN ═══════ Acht Fragen als
: sie gehen ohne JavaScript auf, die Tastatur bedient sie von Haus aus, und der geschlossene Zustand ist die Übersicht. 2026-09-18: zweispaltig. Links Titel und der Direktdraht fuer alles, was nicht beantwortet ist, rechts die Fragen ueber zwei Zeilen. Das Zeichen ist kein Blatt mehr (Blaetter nur noch an Logo, Hero-Titel und Hauptknopf), sondern ein Plus, das beim Oeffnen zum Minus wird: das kennt jeder, auch ohne je eine Seite dieser Art gesehen zu haben. */ .fragen-bau { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 6vw, 6rem); } .fragen-bau__kopf { grid-column: 1; grid-row: 1; margin-bottom: 0; } .fragen-bau > .fragen { grid-column: 2; grid-row: 1 / span 2; } /* Jede Frage ist eine Zeile mit Haarlinie. Die offene wird ein Papier- blatt: Frage und Antwort lesen sich als eine Einheit, und man sieht beim Zurueckscrollen sofort, welche offen ist. */ .fragen { display: grid; gap: 4px; } .frage { border-bottom: 1px solid rgba(31,58,38,.18); transition: background-color .35s var(--kurve), box-shadow .35s var(--kurve), border-radius .35s var(--kurve), border-color .35s var(--kurve); } .frage[open] { border-radius: var(--r-mittel); border-bottom-color: transparent; background: var(--papier); box-shadow: var(--schatten-1); } .frage summary { display: flex; align-items: flex-start; gap: 18px; padding: 22px 18px; cursor: pointer; list-style: none; border-radius: var(--r-mittel); transition: background-color .3s var(--kurve); } @media (hover: hover) { .frage:not([open]) summary:hover { background: rgba(251,250,246,.55); } } /* Das eigene Dreieck der Browser weicht dem Zeichen */ .frage summary::-webkit-details-marker { display: none; } .frage summary::marker { content: ''; } .frage__zeichen { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(31,58,38,.4); transition: background-color .35s var(--kurve), box-shadow .35s var(--kurve); } .frage__zeichen::before, .frage__zeichen::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: var(--r-klein); background: var(--surface-panel); transition: transform .35s var(--kurve), background-color .35s var(--kurve); } .frage__zeichen::after { transform: rotate(90deg); } @media (hover: hover) { .frage summary:hover .frage__zeichen { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--surface-panel); } } .frage summary:focus-visible { outline: 2px solid var(--surface-panel); outline-offset: 4px; } .frage[open] .frage__zeichen { background: var(--surface-panel); box-shadow: inset 0 0 0 1.5px var(--surface-panel); } .frage[open] .frage__zeichen::before, .frage[open] .frage__zeichen::after { background: var(--ink-on-dark); } .frage[open] .frage__zeichen::after { transform: rotate(0deg); } .frage__titel { padding-top: 3px; font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -.016em; color: var(--surface-panel); } /* Acht fette Zeilen untereinander lasen sich als Wand. Geschlossen stehen die Fragen eine Stufe leichter, die offene bekommt das volle Gewicht. */ .frage[open] .frage__titel { font-weight: 600; } .frage__lauf { padding: 0 28px 28px 70px; max-width: calc(64ch + 98px); font-size: var(--t-body); line-height: var(--z-text); color: var(--ink-body); } /* Auf- und Zuklappen weich, wo der Browser die Hoehe von auto aus uebergehen kann. Ohne diese Faehigkeit springt es wie bisher. */ @supports (interpolate-size: allow-keywords) and selector(::details-content) { @media (prefers-reduced-motion: no-preference) { .fragen { interpolate-size: allow-keywords; } .frage::details-content { height: 0; overflow: clip; transition: height .45s var(--kurve), content-visibility .45s allow-discrete; } .frage[open]::details-content { height: auto; } } } /* Der Direktdraht: wer seine Frage nicht findet, soll nicht bis zum Formular suchen muessen. */ /* 2026-09-19 groesser und klarer (Kundenwunsch): die Frage als Titel in Wald, der Satz in Vorspann-Groesse, darunter zwei gleich hohe Wege: Anruf als dunkle Pille wie im Kontakt (.kontakt-ruf), Anfrage als umrandeter Knopf mit Pfeil. Vorher Satz 19 px, Nummer 20 px und "Zur Anfrage" nur als unterstrichenes Wort. */ .fragen-draht { grid-column: 1; grid-row: 2; align-self: start; margin-top: clamp(2rem, 3.4vw, 2.75rem); max-width: 34rem; padding: clamp(26px, 3vw, 44px); border-radius: var(--r-gross); background: var(--papier); box-shadow: inset 0 0 0 1px var(--line-dark), var(--schatten-1); } .fragen-draht__titel { font-size: var(--t-h3); font-weight: 600; line-height: var(--z-kopf); letter-spacing: -.024em; color: var(--surface-panel); } .fragen-draht__satz { margin-top: 10px; max-width: 30ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-body); } /* Untereinander und gleich breit: die Spalte nimmt die Breite der Anruf-Pille, der Anfrage-Knopf fuellt sie mit. */ .fragen-draht__wege { display: grid; grid-template-columns: minmax(0, max-content); gap: 12px; margin-top: clamp(22px, 2.4vw, 30px); } .fragen-draht__wege > a { justify-content: center; } .fragen-draht__wege > .fragen-draht__ruf { justify-content: flex-start; } .fragen-draht__ruf { margin-top: 0; max-width: 100%; box-shadow: var(--schatten-2); } .fragen-draht__ruf:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: 4px; } .fragen-draht__weg { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 12px 24px; border-radius: var(--r-pille); box-shadow: inset 0 0 0 2px var(--surface-panel); font-size: 19px; font-weight: 600; color: var(--surface-panel); transition: background-color .3s var(--kurve), color .3s var(--kurve); } .fragen-draht__weg svg { width: 20px; height: 20px; flex: none; fill: currentColor; transition: transform .35s var(--kurve); } @media (hover: hover) { .fragen-draht__weg:hover { background: var(--surface-panel); color: var(--ink-on-dark); } .fragen-draht__weg:hover svg { transform: translateX(4px); } } .fragen-draht__weg:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: 4px; } @media (max-width: 480px) { .fragen-draht__wege { grid-template-columns: minmax(0, 1fr); } .fragen-draht__ruf { padding-right: 20px; } .fragen-draht__ruf .kontakt-ruf__zeichen { width: 48px; height: 48px; padding: 12px; } } @media (max-width: 1100px) { .fragen-bau { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .fragen-bau__kopf, .fragen-bau > .fragen, .fragen-draht { grid-column: 1; grid-row: auto; } .fragen-bau__kopf { margin-bottom: clamp(2rem, 5vw, 3rem); } .fragen-draht { max-width: 34rem; } } @media (max-width: 900px) { .frage summary { padding: 18px 12px; gap: 14px; } .frage__lauf { padding: 0 16px 22px; } } /* ═══════ EINSATZGEBIET ═══════ Links die Orte als Liste, rechts dasselbe als Lageplan auf einem eigenen Blatt. Beide Seiten sind gekoppelt: wer eine Zeile anfährt, sieht den Ort im Plan aufleuchten, und umgekehrt. Erst dadurch ist die Zeichnung mehr als Dekoration — sie beantwortet die Frage „liegt mein Objekt drin“. 2026-09-18: hell. Moos als Grund (die zweite Rasenflaeche mit Maehstreifen war eine eigene Entscheidung, nicht die des Users; Gras bleibt allein bei #fuerwen), der Plan als Papierblatt mit feinen Tintenlinien statt Radar auf Dunkel. Der Ring, der alle 3,6 s vom Sitz auslief, ist entfernt: der Sitz ist durch Haus, Wald-Punkt und die Limetten-Pille markiert genug. Die Sektion laeuft randlos wie die anderen hellen Felder. */ .gebiet-feld { background: var(--moos-hell); color: var(--ink-body); } .gebiet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .gebiet .kapitel { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); } /* Der zweite Absatz der Sektion. Er steht ausserhalb von .kapitel, weil dort nur ein Fliesstext vorgesehen ist — und weil die Ortsliste naeher an ihm stehen soll als an der Ueberschrift. */ .gebiet__lauf { max-width: 56ch; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); font-size: var(--t-body); line-height: 1.62; color: var(--ink-quiet); } /* Der erweiterte Radius ist keine Zeile der Liste: er hat keinen Punkt im Plan und wuerde dort eine Peilung behaupten, die es nicht gibt. Die gestrichelte Kante ist die Grenze, die der Radius beschreibt. Kein flex: Fettdruck und Satz wären zwei Flex-Kinder und stünden als Spalten nebeneinander. Das Zeichen sitzt deshalb absolut im Innenrand. */ .gebiet__radius { position: relative; margin-top: clamp(1.1rem, 2vw, 1.6rem); max-width: 34rem; padding: 14px 18px 14px 54px; border: 1.5px dashed rgba(31,58,38,.42); border-radius: var(--r-mittel); background: rgba(251,250,246,.6); font-size: 18.5px; line-height: 1.5; color: var(--ink-body); } .gebiet__radius::before { content: ""; position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--surface-gras); transform: translateY(-50%); } .gebiet__radius strong { font-weight: 600; color: var(--surface-panel); } /* Orte, 2026-09-14: statt Punkten ein Standortzeichen je Ort, am Betriebssitz ein Haus. Die Linie unter jeder Zeile ist zugleich eine Entfernungsleiste: ihre volle Länge steht für die 50 km des erweiterten Radius, gefüllt ist der Weg bis zum Ort. Die Kilometer stehen als --km am
  • in index.html, in derselben Zeile wie der Text, der sie nennt — wer eine Entfernung ändert, ändert beide an einer Stelle. */ .orte { display: grid; max-width: 34rem; } .ort { --km: 0; position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 14px 18px 12px; margin-inline-start: -12px; border-radius: var(--r-mittel); cursor: default; transition: background-color .35s var(--kurve); } .ort::before, .ort::after { content: ""; position: absolute; left: 52px; right: 14px; bottom: 0; height: 3px; border-radius: var(--r-klein); } .ort::before { background: rgba(31,58,38,.14); } .ort::after { right: auto; width: calc((100% - 66px) * var(--km) / 50); background: var(--surface-gras); transform-origin: left center; } .ort__punkt { width: 26px; height: 26px; background: var(--surface-gras); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill-rule='evenodd' d='M128 16a88 88 0 0 0-88 88c0 75.3 80 132.17 83.41 134.55a8 8 0 0 0 9.18 0C136 236.17 216 179.3 216 104a88 88 0 0 0-88-88Zm0 56a32 32 0 1 1-32 32a32 32 0 0 1 32-32Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill-rule='evenodd' d='M128 16a88 88 0 0 0-88 88c0 75.3 80 132.17 83.41 134.55a8 8 0 0 0 9.18 0C136 236.17 216 179.3 216 104a88 88 0 0 0-88-88Zm0 56a32 32 0 1 1-32 32a32 32 0 0 1 32-32Z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .4s var(--kurve); } .ort--sitz .ort__punkt { background: var(--surface-panel); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 120v96a8 8 0 0 1-8 8H160v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H40a8 8 0 0 1-8-8v-96a16 16 0 0 1 4.69-11.32l80-80a16 16 0 0 1 22.62 0l80 80A16 16 0 0 1 224 120Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 120v96a8 8 0 0 1-8 8H160v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H40a8 8 0 0 1-8-8v-96a16 16 0 0 1 4.69-11.32l80-80a16 16 0 0 1 22.62 0l80 80A16 16 0 0 1 224 120Z'/%3E%3C/svg%3E"); } /* Die Leisten wachsen beim Hereinscrollen von links. Nur wo der Browser scrollgebundene Animation kann; sonst stehen sie gleich voll da. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .ort::after { animation: ortleiste linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; } } } @keyframes ortleiste { from { transform: scaleX(0); } to { transform: scaleX(1); } } .ort__name { font-size: 18.5px; font-weight: 600; letter-spacing: -.012em; color: var(--surface-panel); } /* Die Entfernungen sind der Grund, aus dem die Liste gelesen wird: sie stehen nicht kleiner als der Ortsname, mit Tabellenziffern statt Mono. */ .ort__weg { font-size: 18.5px; font-variant-numeric: tabular-nums; color: var(--ink-quiet); transition: color .35s var(--kurve); } .ort.ist-an { background: rgba(251,250,246,.8); } .ort.ist-an .ort__punkt { transform: scale(1.15); } .ort.ist-an .ort__weg { color: var(--surface-panel); } /* ── Das Kartenblatt ── Ein Blatt Papier mit Tintenlinien: Ringe im Abstand von fuenf Kilometern, gestrichelter Aussenring, Speichen vom Sitz zu jedem Ort. */ .kartenblatt { margin: 0; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--r-gross); background: var(--papier); box-shadow: var(--schatten-1); justify-self: center; width: 100%; max-width: 560px; } .karte { width: 100%; height: auto; display: block; overflow: visible; } .karte__ring { fill: none; stroke: rgba(31,58,38,.17); stroke-width: 1; } .karte__ring--aussen { stroke: rgba(31,58,38,.36); stroke-dasharray: 2 7; } .karte__achse { stroke: rgba(31,58,38,.09); stroke-width: 1; } .karte__nord { fill: var(--ink-quiet); } .karte__mass { fill: var(--ink-quiet); font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; /* Die Ringe laufen hinter der Schrift durch, der Umriss stanzt sie frei */ paint-order: stroke; stroke: var(--papier); stroke-width: 4; stroke-linejoin: round; } .karte__speiche { stroke: rgba(31,58,38,.3); stroke-width: 1; stroke-dasharray: 2 5; } /* Der Hof liegt still hinter dem Punkt und geht nur beim Anfahren auf */ .karte__hof { fill: rgba(53,107,38,.16); transform-box: fill-box; transform-origin: center; transform: scale(.25); opacity: 0; transition: transform .45s var(--kurve), opacity .35s var(--kurve); } .karte__punkt { fill: var(--surface-gras); transform-box: fill-box; transform-origin: center; transition: transform .4s var(--kurve); } .karte__marke--sitz .karte__punkt { fill: var(--surface-panel); } .karte__marke--sitz .karte__hof { fill: rgba(31,58,38,.14); } /* Namen liegen auf einer Pille, damit Ringe und Speichen nicht durch die Schrift laufen. */ .karte__pille { fill: var(--papier); stroke: rgba(31,58,38,.24); stroke-width: 1; transition: fill .35s var(--kurve), stroke .35s var(--kurve); } .karte__pille--sitz { fill: var(--accent); stroke: rgba(31,58,38,.22); } .karte__name { fill: var(--surface-panel); font-size: 16px; font-weight: 600; letter-spacing: -.01em; transition: fill .35s var(--kurve); } .karte__marke--sitz .karte__name { fill: var(--ink-on-accent); } .karte__marke.ist-an .karte__hof { transform: scale(1); opacity: 1; } .karte__marke.ist-an .karte__punkt { transform: scale(1.18); } .karte__marke.ist-an .karte__pille { fill: var(--surface-panel); stroke: var(--surface-panel); } .karte__marke.ist-an .karte__name { fill: var(--ink-on-dark); } .karte__marke.ist-an .karte__speiche { stroke: var(--surface-gras); stroke-dasharray: none; } .kartenblatt__fuss { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; align-items: baseline; margin-top: clamp(12px, 1.6vw, 20px); padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: var(--t-klein); color: var(--ink-quiet); } /* Der Plan und darunter der Hinweis fuer alle, deren Ort nicht auf dem Blatt steht: genau dort, wo man nachsieht, ob das eigene Objekt drin liegt. Wortlaut vom Kunden. */ .gebiet__plan { display: grid; justify-items: center; gap: clamp(16px, 2vw, 24px); } .gebiet__rest { width: 100%; max-width: 560px; padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px); border-radius: var(--r-mittel); background: rgba(251,250,246,.5); box-shadow: inset 0 0 0 1px rgba(31,58,38,.16); font-size: 18.5px; line-height: 1.55; color: var(--ink-body); } .gebiet__rest a { color: var(--surface-panel); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--tinte-ziegel); } .gebiet__rest a:hover { color: var(--tinte-ziegel); } /* Kartenblatt unter den Text, sonst wird es zum Briefmarkenformat */ @media (max-width: 900px) { .gebiet { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 3rem); } .kartenblatt { max-width: 480px; } .kartenblatt__wink { display: none; } } /* Das Blatt skaliert mit der Breite, und mit ihm die Schrift im Plan: bei 390 px standen die Ortsnamen bei 9 px. Hier waechst die Schrift in den Einheiten der Zeichnung, damit sie auf dem Schirm rund 14 px misst. Die Pillen sind fuer die kleine Schrift gerechnet und fallen weg; ein papierfarbener Umriss stanzt die Namen aus Ringen und Speichen frei. */ @media (max-width: 640px) { .karte__pille { display: none; } .karte__name, .karte__marke--sitz .karte__name, .karte__marke.ist-an .karte__name { font-size: 19px; fill: var(--surface-panel); paint-order: stroke; stroke: var(--papier); stroke-width: 5; stroke-linejoin: round; } .karte__mass { font-size: 18px; } } /* ═══════ FARBFELDER ALS TAFELN ═══════ Der Hero sitzt eingelassen im creme Grund. Solange die Farbfelder darunter randlos liefen, gab es zwei Systeme auf einer Seite: oben ein Blatt, unten Streifen. Jetzt ist jedes Farbfeld eine Tafel mit demselben Radius — der Grund traegt sie alle. */ .weite__rahmen { margin-inline: var(--inset); border-radius: var(--r-gross); overflow: hidden; } /* ── Einsatzjahr als Band ── Bis 2026-09-18 ein Steinkasten mit Mono-Kicker "EINSATZJAHR". Er stand direkt unter den beiden Sockelkarten und las sich als dritte Karte in Folge. Jetzt liegen die Ringe auf dem Grund zwischen zwei Haarlinien, jeder mit dem vollen Namen seines Bereichs. */ /* Oben weniger: dort bringt der Hero seinen Einzug schon mit. */ #jahresbogen { padding-block: clamp(.75rem, 1.4vw, 1.25rem) clamp(2rem, 4vw, 3.25rem); } /* So breit wie der Sockel darueber, auf jeder Breite: bei 1920 stand das Band sonst als schmale Mitte unter zwei weit aussen sitzenden Karten. */ #jahresbogen > .mitte { max-width: none; width: auto; margin-inline: var(--sockel-rand); padding-block: clamp(20px, 2.2vw, 30px); border-block: 1px solid rgba(31,58,38,.14); } #jahresbogen .uhr__scheibe { width: clamp(52px, 4.4vw, 64px); } #jahresbogen .uhr__zeichen { width: 21px; height: 21px; } #jahresbogen .uhr__name { font-size: var(--t-body); line-height: 1.16; white-space: normal; overflow: visible; text-overflow: clip; } #jahresbogen .uhr__wann { font-size: var(--t-klein); } /* Kurzformen ("Reinigung", "Elektro") gibt es nicht mehr: ein Bereich, ein Name, auf jeder Breite. */ #jahresbogen .uhr__kurz { display: none; } /* Feste Spalten statt auto-fit: "Hausmeisterservice" und "Informationstechnik" sind in 18 px je rund 175 px breit und lassen sich nicht umbrechen. Bei 1024 px lagen sie in fuenf Spalten ueber dem naechsten Ring. Fuenf Spalten erst ab 1440 px (bei 1321 stiessen Name und naechster Ring noch aneinander), darunter drei, dann zwei (900), dann eine (640, weiter unten). */ #jahresbogen .jahrring__liste { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1439px) { #jahresbogen .jahrring__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } } @media (max-width: 900px) { #jahresbogen .jahrring__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Bilder tragen denselben Radius wie die Tafeln ── */ .text__bild, .werk__bild, .mensch__bild { border-radius: var(--r-gross); } /* ═══════ FUSS ═══════ */ .fuss { background: var(--surface-panel); color: var(--ink-on-dark); padding: clamp(3.5rem, 8vw, 6rem) var(--inset) clamp(1.75rem, 3vw, 2.5rem); } .fuss__oben { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 28px; padding-bottom: 32px; border-bottom: 1px solid var(--line-light); } .marke--fuss span { color: var(--ink-on-dark); font-size: 18.5px; } .fuss__spruch { font-size: 18.5px; color: var(--ink-muted); } /* Kammerzeichen: die Logos stehen in Originalfarben auf hellen Platten. Dunkelblau auf dem dunklen Fuss wäre kaum lesbar, und ein Kammerlogo umzufärben ist nicht erlaubt. Zwei Kammern, ein Satz: "Mitgliedsbetrieb der" steht einmal über beiden Platten. Beide Logos stehen gleich hoch und sind fast gleich breit (HWK 768 × 133, IHK 1055 × 180, beide rund 5,8 : 1), so wiegt keins mehr als das andere. Reicht die Breite nicht, rutscht die IHK-Platte darunter. */ .fuss__kammern { margin-left: auto; align-self: center; display: flex; flex-direction: column; gap: 8px; } .fuss__kammer-wort { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); } .fuss__kammern-reihe { display: flex; flex-wrap: wrap; gap: 12px; } .fuss__kammer { display: block; border-radius: var(--r-mittel); transition: box-shadow .3s var(--kurve); } .fuss__kammer img { display: block; box-sizing: content-box; width: auto; height: 36px; padding: 10px 16px; background: #fff; border-radius: var(--r-mittel); } .fuss__kammer:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-mittel); } @media (hover: hover) { .fuss__kammer:hover { box-shadow: 0 0 0 2px var(--accent); } } @media (max-width: 620px) { .fuss__kammern { margin-left: 0; } } .fuss__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); padding-block: clamp(2.25rem, 4vw, 3.25rem); } .fuss__marke { font-size: 16.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-bottom: 14px; } .fuss__raster li { font-size: 18.5px; line-height: 1.9; color: var(--ink-muted); } .fuss__raster a:hover { color: var(--accent); } .fuss__unten { padding-top: 22px; border-top: 1px solid var(--line-light); font-size: 16.5px; color: var(--ink-muted); } /* ── Fuss (fuss--start, 2026-09-18) ── Haengt an .fuss--start und gilt nur fuer die Startseite. Die Unterseiten tragen seit Runde 4 einen eigenen, kuerzeren Fuss (.fuss--kompakt, bau-unterseiten). Runde 4: verdichtet. Der Fuss war bei 1440 px 1.176 px hoch (auf Über uns ein Viertel der Seite). Jetzt: oben eine Zeile Marke mit Slogan, daneben der direkte Draht mit Etikett links vom Wert; darunter vier Spalten mit engerem Zeilenabstand; Karriere als schlanke Zeile mit Knopf; soziale Wege und Rechtliches in einer Grundzeile. Kein Inhalt ist weggefallen, die Kammerplatten bleiben sichtbar. Das Logo steht auf derselben weissen Plakette wie in der Leiste. */ .fuss--start { padding-block: clamp(3rem, 5.5vw, 4.5rem) clamp(1.5rem, 2.4vw, 2rem); } .fuss__kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: end; padding-bottom: clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line-light); } .fuss--start .marke--fuss { gap: 14px; } .fuss--start .marke--fuss span { font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .fuss--start .fuss__spruch { margin-top: clamp(14px, 1.6vw, 20px); font-size: clamp(1.5rem, 1.05rem + 1.25vw, 2.125rem); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; color: var(--ink-on-dark); text-wrap: balance; } /* Der direkte Draht: Etikett links, Wert rechts daneben. Telefon am groessten, weil es der schnellste Weg ist. */ .fuss__draht { display: grid; gap: 8px; font-style: normal; } .fuss__draht-weg { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; column-gap: 12px; width: fit-content; max-width: 100%; } .fuss__draht-art { font-size: var(--t-klein); color: rgba(255,255,255,.72); } .fuss__draht-wert { font-size: 18.5px; font-weight: 500; line-height: 1.35; color: var(--ink-on-dark); overflow-wrap: anywhere; } .fuss__draht-wert--gross { font-size: clamp(1.625rem, 1.25rem + 1.1vw, 2.125rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } a.fuss__draht-weg .fuss__draht-wert { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(207,232,43,.55); transition: color .25s var(--kurve), text-decoration-color .25s var(--kurve); } @media (hover: hover) { a.fuss__draht-weg:hover .fuss__draht-wert { color: var(--accent); text-decoration-color: var(--accent); } } .fuss--start .fuss__raster { padding-block: clamp(1.75rem, 3vw, 2.5rem); } .fuss--start .fuss__marke { margin-bottom: 10px; font-size: var(--t-etikett); color: rgba(255,255,255,.74); } /* Keine eigene Trennregel: es gilt die globale (getrennt wird erst unter 360 px). Ein zu langes Wort bricht notfalls ohne Strich um. */ .fuss--start .fuss__raster li { line-height: 1.65; color: rgba(255,255,255,.82); overflow-wrap: break-word; } .fuss--start .fuss__raster a { transition: color .25s var(--kurve); } .fuss--start .fuss__kammern-reihe { flex-direction: column; align-items: flex-start; gap: 10px; } .fuss--start .fuss__kammer img { height: 32px; padding: 9px 14px; } .fuss--start .fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; padding-top: 18px; font-size: var(--t-klein); color: rgba(255,255,255,.74); } .fuss--start .fuss__sozial { margin: 0; gap: 8px; } .fuss--start .fuss__sozial .sozial__weg { min-height: 44px; padding: 8px 16px; font-size: 17.5px; } .fuss__recht { display: flex; flex-wrap: wrap; gap: 4px 26px; } .fuss__recht a { display: inline-block; padding-block: 6px; color: var(--ink-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); } .fuss__recht a:hover { color: var(--accent); text-decoration-color: currentColor; } @media (max-width: 1100px) { .fuss--start .fuss__spalte--kammern .fuss__kammern-reihe { flex-direction: row; flex-wrap: wrap; } } @media (max-width: 900px) { .fuss__kopf { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.5rem; } } @media (max-width: 640px) { /* Zwei Spalten statt einer: Leistungen neben Einsatzgebiet, Unternehmen neben den Kammern, deren Platten hier untereinander und kleiner stehen. */ .fuss--start .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; } .fuss--start .fuss__raster li { line-height: 1.45; padding-block: 3px; } .fuss--start .fuss__spalte--kammern .fuss__kammern-reihe { flex-direction: column; gap: 8px; } /* Die Platten passen sich der halben Spalte an: bei 320 px ist sie 135 px breit, die HWK-Platte mit fester Hoehe waere 159 px. */ .fuss--start .fuss__kammer { max-width: 100%; } .fuss--start .fuss__kammer img { box-sizing: border-box; width: 170px; max-width: 100%; height: auto; padding: 8px 10px; } /* Soziale Wege als Zeichen: das Wort bleibt fuer Vorleseprogramme im aria-label, drei Kreise passen neben- statt untereinander. */ .fuss--start .fuss__sozial .sozial__weg { width: 48px; min-height: 48px; padding: 0; justify-content: center; } .fuss--start .fuss__sozial .sozial__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fuss__draht-weg { grid-template-columns: 5.5rem minmax(0, 1fr); } .fuss--start .fuss__unten { gap: 14px 20px; } } /* ═══════ RECHTSSEITEN ═══════ Kopfband auf Stein, Text auf Kalk. Jeder Abschnitt ist eine Zeile: der Titel steht links und bleibt beim Lesen stehen, der Text rechts in 65ch. Das Inhaltsverzeichnis der Datenschutzerklaerung steht im Kopfband, zweispaltig, damit man vor dem Lesen sieht, was kommt. Wortlaut der Rechtstexte unveraendert. */ .recht__kopf { padding: clamp(128px, 17vh, 184px) var(--inset) clamp(2.5rem, 5vw, 4.25rem); background: var(--stein); } .recht__kopf > .mitte { display: grid; gap: clamp(28px, 3vw, 40px) clamp(40px, 6vw, 96px); } .recht__titel { font-size: var(--t-h1-lang, clamp(2rem, 1.25rem + 2.5vw, 3.25rem)); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; color: var(--surface-panel); overflow-wrap: break-word; } .recht__siehe { margin-top: 16px; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--ink-body); } .recht__siehe a, .paragraf a { color: var(--surface-panel); font-weight: 500; text-decoration: underline; text-decoration-color: var(--surface-gras); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; } .recht__siehe a:hover, .paragraf a:hover { text-decoration-color: var(--surface-panel); } .recht__inhalt { border-top: 1px solid rgba(31, 58, 38, .24); padding-top: 14px; } .recht__inhalt-titel { font-size: 18.5px; font-weight: 600; color: var(--surface-panel); } .recht__inhalt ol { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: recht; } .recht__inhalt li { break-inside: avoid; counter-increment: recht; } .recht__inhalt a { display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: baseline; padding-block: 9px; border-bottom: 1px solid rgba(31, 58, 38, .14); font-size: 18.5px; line-height: 1.35; color: var(--surface-panel); } .recht__inhalt a::before { content: counter(recht); font-weight: 600; color: var(--surface-gras); font-variant-numeric: tabular-nums; } .recht__inhalt a:hover, .recht__inhalt a:focus-visible { text-decoration: underline; text-decoration-color: var(--surface-gras); text-decoration-thickness: 2px; text-underline-offset: 4px; } @media (min-width: 1000px) { .recht__kopf > .mitte:has(.recht__inhalt) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .recht__kopf > .mitte:has(.recht__inhalt) .recht__titel { grid-column: 1 / -1; } .recht__kopf .recht__inhalt { grid-column: 2; grid-row: 2; } .recht__kopf > .mitte:has(.recht__inhalt) .recht__siehe { margin-top: 18px; } .recht__inhalt ol { columns: 2; column-gap: clamp(28px, 3vw, 48px); } } .recht__rumpf { padding: clamp(2.5rem, 5vw, 4.5rem) var(--inset) clamp(4rem, 9vw, 7rem); } .recht__raster { display: grid; } /* Lange Woerter wie "Umsatzsteuer-Identifikationsnummer" duerfen die Spalte auf 320 px nicht aufsprengen. */ .recht__raster > * { min-width: 0; } .paragraf { font-size: 18px; line-height: 1.65; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; } .paragraf > .hinweis { max-width: 65ch; margin-bottom: clamp(28px, 3.4vw, 44px); } .recht__abschnitt { padding-block: clamp(26px, 3.2vw, 42px); border-top: 1px solid rgba(31, 58, 38, .2); } .recht__abschnitt:last-child { border-bottom: 1px solid rgba(31, 58, 38, .2); } .paragraf h2 { margin: 0 0 12px; font-size: clamp(22px, .5vw + 19.5px, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--surface-panel); scroll-margin-top: 110px; } .recht__text { max-width: 65ch; } .recht__text > :last-child { margin-bottom: 0; } @media (min-width: 900px) { .recht__abschnitt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; } .paragraf h2 { position: sticky; top: 112px; margin: 0; padding-top: 2px; } } .paragraf p { margin-bottom: 14px; color: var(--ink-body); } .paragraf ul, .paragraf ol { margin: 0 0 14px; padding-inline-start: 1.3em; color: var(--ink-body); } .paragraf li + li { margin-top: 6px; } .paragraf strong { color: var(--surface-panel); font-weight: 600; } .hinweis { padding: 18px 22px; margin-bottom: 8px; background: var(--klinker-hell); border-radius: var(--r-mittel); font-size: 18.5px; color: var(--ink-body); } /* ═══════ UNTERSEITEN-FUSS ═══════ Kompakt (Runde 3): Marke, Telefon und E-Mail, Kammern in einer Zeile, darunter die Wege und die Grundzeile. Ziel: mobil unter 600 px Hoehe, Dunkelanteil des Impressums unter 20 %. Nur Klassen mit fuss-kompakt__ oder unter .fuss--kompakt; der Startseiten-Fuss (.fuss--start) bleibt unberuehrt. */ .fuss--kompakt { padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 2.4vw, 2.25rem); } .fuss-kompakt__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px clamp(28px, 3.4vw, 48px); padding-bottom: clamp(24px, 3vw, 34px); border-bottom: 1px solid var(--line-light); } .fuss--kompakt .marke--fuss { gap: 12px; } .fuss--kompakt .marke--fuss .marke__zeichen { width: 50px; } .fuss--kompakt .marke--fuss span { font-size: 18px; font-weight: 600; letter-spacing: -.01em; } .fuss-kompakt__draht { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(28px, 3.4vw, 48px); font-style: normal; } .fuss-kompakt__draht a { display: grid; gap: 2px; color: var(--ink-on-dark); } .fuss-kompakt__art { font-size: 17.5px; color: rgba(255, 255, 255, .72); } .fuss-kompakt__wert { font-size: clamp(19px, .5vw + 16.5px, 23px); font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color .25s var(--kurve); } .fuss-kompakt__draht a:hover .fuss-kompakt__wert { text-decoration-color: var(--accent); } .fuss-kompakt__draht a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-klein); } .fuss--kompakt .fuss__kammern-reihe { display: flex; flex-wrap: wrap; gap: 10px; } .fuss--kompakt .fuss__kammer img { height: 26px; padding: 8px 11px; } .fuss-kompakt__mitte { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 40px; padding-block: clamp(18px, 2.4vw, 26px); } .fuss-kompakt__wege ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 26px; } .fuss-kompakt__wege a, .fuss-kompakt__karriere a { display: inline-block; padding-block: 7px; font-size: 18.5px; font-weight: 500; color: var(--ink-on-dark); text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color .25s var(--kurve); } .fuss-kompakt__wege a:hover, .fuss-kompakt__wege a[aria-current], .fuss-kompakt__karriere a { text-decoration-color: var(--accent); } .fuss-kompakt__karriere a:hover { color: var(--accent); } .fuss-kompakt__wege a:focus-visible, .fuss-kompakt__karriere a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-klein); } .fuss-kompakt__karriere { font-size: 18.5px; color: rgba(255, 255, 255, .8); } .fuss--kompakt .fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 28px; padding-top: 16px; border-top: 1px solid var(--line-light); font-size: 17.5px; color: rgba(255, 255, 255, .74); } /* Unter 1280 px reicht die Mitte nicht fuer Telefon und E-Mail nebeneinander: dann Marke und Kammern oben, der Draht darunter. */ @media (max-width: 1280px) { .fuss-kompakt__kopf { grid-template-columns: auto auto; justify-content: space-between; } .fuss-kompakt__draht { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } } @media (max-width: 900px) { .fuss-kompakt__kopf { grid-template-columns: minmax(0, 1fr); gap: 20px; } } @media (max-width: 620px) { .fuss--kompakt { padding-block: 2.25rem 1.5rem; } .fuss-kompakt__kopf { gap: 16px; padding-bottom: 20px; } .fuss--kompakt .fuss__kammer img { height: 24px; padding: 7px 10px; } .fuss-kompakt__draht { gap: 8px 24px; } .fuss-kompakt__mitte { gap: 4px; padding-block: 14px 16px; } .fuss-kompakt__wege ul { gap: 0 18px; } .fuss-kompakt__wege a, .fuss-kompakt__karriere a { font-size: 17.5px; padding-block: 5px; } .fuss-kompakt__karriere { font-size: 17.5px; } .fuss--kompakt .fuss__unten { padding-top: 12px; } } /* ═══════ Flache Fenster ═══════ Der Hero traegt Schriftplatte und Sockel in einer Hoehe. Wo das Fenster flach ist, muessen beide Seiten etwas abgeben: die Platte rueckt ihre Abstaende zusammen, der Sockel wird flacher. Sonst laeuft die Platte in die Bloecke. */ /* Wo das Fenster zu flach fuer beides ist, darf die Tafel ueber den Bildschirm hinauswachsen: lieber ein Hero, der unten weiterlaeuft, als eine Schriftplatte, die in die Bloecke rutscht. */ @media (max-height: 880px) and (min-width: 901px) { .tafel.tafel--voll { height: auto; min-height: calc(100dvh - 12px - var(--inset)); } } @media (max-height: 940px) and (min-width: 901px) { .wort__lauf { margin-top: 18px; } /* Kein eigener Wert fuer .wort__tun mehr: sein Grundabstand haengt an vh und faellt hier von allein von 44 auf rund 38 px. Der feste Wert, der frueher hier stand, drueckte die Knoepfe auf jedem Laptop bis an den Fliesstext heran. */ .heldsiegel { margin-top: clamp(18px, 2.4vh, 26px); } .sockel__karte { padding-block: clamp(16px, 2.1vh, 26px); padding-inline: clamp(20px, 2vw, 28px) clamp(16px, 1.5vw, 20px); } .sockel__titel { font-size: clamp(19px, 1.4vw, 21.5px); } .sockel__lauf { font-size: clamp(17.5px, 1vw, 18.5px); } .sockel__bild { width: clamp(80px, 7.6vw, 112px); } .sockel__satz { padding-block: clamp(16px, 2.2vh, 26px); } } @media (max-height: 800px) and (min-width: 901px) { .wort__titel .riss:first-child { font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.75rem); } .wort__titel .riss:not(:first-child) { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.35rem); } .wort__lauf { margin-top: 14px; } /* Erst hier wird wirklich gedrueckt: unter 800 px Hoehe muss die Schriftplatte Platz abgeben, sonst laeuft sie in den Sockel. */ .wort__tun { margin-top: clamp(22px, 3vh, 28px); } .heldsiegel { margin-top: 16px; } .heldsiegel li { font-size: var(--t-klein); } .sockel__karte { padding-block: clamp(14px, 1.9vh, 22px); } } /* ═══════ 1100 ═══════ */ @media (max-width: 1100px) { /* Unter 1100 px steht der Kopf wieder ueber dem Weg und klebt nicht; die Marke bleibt links an der Linie, Text und Beleg rechts davon */ #ablauf > .mitte { display: block; } #ablauf .kapitel { position: static; margin-bottom: clamp(3rem, 7vw, 5.5rem); } #ablauf .kapitel__lauf { max-width: 54ch; } .halt { gap: 18px; } .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ═══════ 900 ═══════ */ /* ── Klappmenü ab 1200 statt 900 ── Die Zeile trägt acht Ziele, seit der Kostenrechner dazugekommen ist, und die Pillen lesen sich seit der Vergrößerung eine Stufe größer. Bei rund 1100 px ragte der Angebot-Knopf daraufhin 43 px über die Zeile hinaus. Statt die Pillen wieder zu schrumpfen geht die Navigation frueher ins Blatt: dort steht jedes Ziel als 22-px-Zeile über die volle Breite. Für ältere Augen ist das ohnehin die bessere Fassung. Seit die drei Wege zu Facebook, LinkedIn und WhatsApp dazugekommen sind, liegt die Schwelle bei 1320 statt 1200. Die Schwelle steht auch in main.js (matchMedia in kopfzeile()) — wer eine ändert, ändert beide, sonst bleibt das Menü beim Drehen offen. */ @media (max-width: 1320px) { .klapp { display: block; z-index: 6; } .glieder { position: fixed; inset: 0 0 auto 0; z-index: 5; flex-direction: column; align-items: flex-start; gap: 0; padding: 92px var(--pad-x) 28px; background: var(--surface-page); clip-path: inset(0 0 100% 0); /* Zu heisst auch unerreichbar: clip-path versteckt nur fuer das Auge, mit der Tabulatortaste lief man sonst durch elf unsichtbare Ziele, bevor der erste Knopf im Hero kam. visibility schaltet erst nach dem Zuklappen um, damit die Blende sichtbar zulaeuft. */ visibility: hidden; transition: clip-path .6s var(--kurve), visibility 0s linear .6s; } .glieder.ist-offen { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--kurve), visibility 0s; } .glieder { margin-inline: 0; } .trieb { display: none; } /* Im Blatt liegt die Navigation ueber der Zeile: Marke und Knopf muessen die Zeile daher selbst auseinanderhalten. */ .marke { margin-inline-end: auto; } .glieder a { width: 100%; justify-content: flex-start; padding: 14px 0; font-size: 22px; font-weight: 600; color: var(--surface-panel); border-bottom: 1px solid var(--line-dark); /* Im Blatt sind es Zeilen, keine Pillen */ background: none; box-shadow: none; border-radius: 0; text-shadow: none; } .glieder a:hover, .glieder a:focus-visible { background: none; color: var(--surface-gras); transform: none; } /* Die Zeile bleibt innerhalb der Tafelkante, sonst ragt die Klappe ueber den Rahmen hinaus. Beide Seiten gleich: vorher standen dort 2 und 4 Pixel, und seit die Aussparungen ihren Inhalt umschliessen, war dieser Unterschied als schiefer Rand zu sehen. Zehn statt zwei, damit Knopf und Klappe nicht an der hellen Kante kleben — die Zeile hat auf dem Telefon rund 170 px Luft uebrig. */ .leiste__zeile { padding: 10px calc(var(--inset) + 10px); gap: 10px; } /* Auf schmalem Schirm hängt die Hecke kürzer: sonst deckt sie die erste Zeile der Schriftplatte zu. */ /* min-height 48: der Knopf mass hier 39 px und lag damit unter der Vorgabe der Seite. Das Polster bleibt, die Hoehe kommt aus dem Mindestmass — so waechst die Kopfzeile nur um die fehlenden Pixel. */ .leiste__tat { padding: 8px 14px 8px 11px; font-size: 16.5px; gap: 6px; min-height: 48px; box-sizing: border-box; } .leiste__tat-blatt { width: 15px; height: 15px; } /* Das aufgeklappte Menü legt sich über die Zeile. Der Angebot-Knopf bleibt darauf stehen: er trägt seinen Grund selbst und liest sich auf dem hellen Blatt genauso wie auf dem Film. Die Marke kommt mit, in dunkler Schrift, sonst stünde sie weiß auf Creme. */ .glieder.ist-offen ~ .leiste__tat { z-index: 6; } .leiste:has(.glieder.ist-offen) .marke { position: relative; z-index: 6; } .leiste:has(.glieder.ist-offen) .marke__name { color: var(--surface-panel); text-shadow: none; } /* Zwischen 901 und 1200 gilt noch der grosse --inset; der Knopf darf hier größer bleiben als auf dem Telefon. */ .leiste__tat { font-size: 18px; } } @media (max-width: 900px) { .leiste__tat { font-size: 16.5px; } } /* Zwei Spalten: die Verwaltungen bleiben quer ueber beide, darunter 2 x 2. Der Kopf stapelt sich, sobald der Vorspann neben dem Titel zu schmal wuerde. */ @media (max-width: 1000px) { .wenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } #fuerwen .kapitel { grid-template-columns: minmax(0, 1fr); } #fuerwen .kapitel__lauf { justify-self: start; max-width: 54ch; } } /* Telefon: eine waagerechte Reihe zum Wischen statt fuenf Karten untereinander (vorher 4.284 px Scrollweg bei 390 px). Die naechste Karte ragt sichtbar herein; das sagt ohne Worte, dass es weitergeht. Die Knoepfe bleiben in der Tab-Reihenfolge, das Skript rollt die Reihe zum fokussierten Knopf mit (main.js 1e3). Innenabstand oben und unten: Platz fuer Schatten und Fokusrahmen, die sonst am Rand der Rollflaeche abgeschnitten wuerden. Die Karten ragen dabei nur innerhalb der Rollflaeche ueber den Rand, die Seite selbst rollt nicht quer. */ @media (max-width: 700px) { .wenraster { display: flex; gap: 12px; margin: 16px calc(-1 * var(--pad-x)) 0; padding: 10px var(--pad-x) 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); scrollbar-width: none; } .wenraster::-webkit-scrollbar { display: none; } .wenkarte, .wenkarte--gross { flex: 0 0 88%; max-width: 360px; flex-direction: column; scroll-snap-align: start; } .wenkarte__bild { aspect-ratio: 16 / 10; } .wenkarte__wort { padding: 20px 18px 18px; } .wenkarte__mehr { padding: 0 18px; font-size: 17px; } .wenkarte--gross .wenkarte__bild { flex: none; aspect-ratio: 16 / 10; } .wenkarte--gross .wenkarte__wort { justify-content: flex-start; padding: 20px 18px 18px; gap: 10px; } .wenkarte--gross .wenkarte__titel { font-size: clamp(1.25rem, 1.05rem + .55vw, 1.5rem); line-height: var(--z-kopf); } .wenkarte--gross .wenkarte__satz { font-size: 18.5px; } .wenkarte--gross .wenkarte__wege { margin-top: auto; } .wenoffen { margin-top: 8px; grid-template-columns: minmax(0, 1fr); } .wenoffen__tat { justify-self: start; } } @media (max-width: 900px) { :root { --inset: 20px; --pad-x: 28px; --pad-t: 24px; --pad-b: 32px; } .lage--ui { padding-bottom: calc(var(--pad-b) + 190px); } .weite__rahmen { height: clamp(360px, 62vh, 520px); } .weite__satz { max-width: 16ch; } .weite__wort { inset: auto clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px); max-width: none; /* Kein eigenes Polster: die Glaskarte bringt ihres mit. Doppelt gepolstert blieben bei 320 px nur 180 px fuer den Knopf, und "Gruenpflege ansehen" brach zweizeilig um. */ padding: 0; } .wort { max-width: none; } /* Der Film liegt auch hier unter allem, es gibt keine zweite Zeile mehr fuer einen Streifen. Die Schrift bekommt die volle Breite. */ .held { grid-template-columns: minmax(0, 1fr); } .held__wort { max-width: none; } /* Film oben frei. Vorher lag ein Schleier von .78 bis .94 ueber der ganzen Hoehe: gemessen 73 % Dunkelpixel, der erste Eindruck war eine gruene Platte statt eines Betriebs bei der Arbeit. Jetzt steht die Schrift unten, der Schleier setzt erst kurz ueber ihr ein, und das obere Drittel zeigt den Film. Die Stopps haengen an --film-frei, also an derselben Hoehe, ab der die Schrift beginnt. */ .held__wort { --film-frei: clamp(200px, 36vh, 340px); } .held__wort::before { width: 100%; background: linear-gradient(180deg, rgba(7,18,10,0) 0, rgba(7,18,10,.1) calc(var(--film-frei) * .45), rgba(7,18,10,.74) calc(var(--film-frei) - 8px), rgba(7,18,10,.9) calc(var(--film-frei) + 120px), rgba(7,18,10,.94) 100%); } /* Auf schmalem Schirm stehen die Blöcke untereinander. Die Tafel darf dafuer wachsen: sie ist kein Fenster mehr, sondern ein Blatt. */ .tafel.tafel--voll { height: auto; min-height: calc(100dvh - 12px - var(--inset)); } /* Untereinander und ohne Kerben: auf einer Spalte gibt es keine zwei Stellen mehr, an denen die Tafel ansteigen koennte. */ .kerbe--fussl, .kerbe--fussr { display: none; } .sockel { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-block-start: var(--sockel-luft); margin-inline: var(--sockel-rand); } .sockel__satz { margin-block-start: 0; } .sockel__karte { grid-template-columns: minmax(0, 1fr) auto; } .sockel__bild { display: block; width: clamp(74px, 22vw, 104px); } .sockel__satz { text-align: start; justify-items: start; padding-block: 22px; } /* Die Deckel liegen hier hoeher als auf dem breiten Schirm: 42 % waren auf dem Telefon 150 px, die gemessene Gruppe aus Knopf und Klappe braucht 153 — der Deckel schnitt drei Pixel ab und schob die Kante der Aussparung wieder unter den Knopf. Sie sind nur noch Notbremse, die Breite kommt aus der Messung. */ :root { --kerbe-l: min(60%, var(--kerbe-l-mess, calc(var(--rand) - var(--inset) + 200px))); --kerbe-r: min(56%, var(--kerbe-r-mess, calc(var(--rand) - var(--inset) + 148px))); } .held__wort { padding-block: var(--film-frei) clamp(2rem, 7vw, 3rem); padding-inline: clamp(18px, 5vw, 26px); align-content: end; } .wort__tun { margin-top: clamp(28px, 4.4vw, 36px); } .wort__lauf { margin-top: 20px; } /* Auf einer Spalte darf die Reihe die volle Breite der Platte nehmen. */ .heldsiegel { max-width: none; margin-top: 24px; } /* Auf der schmalen Platte liegt die Zeichnung direkt hinter dem Fliesstext und wird unruhig; sie rutscht weiter heraus und tritt zurueck. */ /* Weniger und kleinere Blaetter auf der schmalen Platte */ /* Der Filmstreifen ist hier nur rund 180 px hoch; ein Fussverlauf von 150 bis 210 px deckte ihn fast vollstaendig zu. */ .held__bild::after { height: 118px; } /* Auf dem schmalen Schirm ist der Film selbst nur ein Streifen von rund 180 px. Ein Band darin frisst das Bild auf, und der Fuss ist vom Einsatzjahr belegt: hier fällt es weg. Den Weg in die Leistungen trägt dort der zweite Knopf in der Schriftplatte. */ /* Zwei mal zwei statt vier nebeneinander */ .jahrring__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } /* Bleibt bei ungerader Zahl einer uebrig, nimmt er die ganze Zeile — sonst stuende er allein in der linken Spalte und die rechte waere ein Loch. */ .jahrring__liste > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .uhr { gap: 10px; padding: 6px 8px 6px 6px; } .uhr__scheibe { width: 38px; } .uhr__zeichen { width: 16px; height: 16px; } /* Das Register steht über den Bahnen, einspaltig. Im Zweispalter trennte das Raster "Gebäudereini-gung", "Sonderleistun-gen" und "Stö-rungsdienst"; sechs ganze Zeilen lesen sich leichter als drei getrennte, und jeder Reiter bleibt ohne Wischen erreichbar. */ .werke { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } .register, .bahnen, .werk { min-width: 0; } .register { position: static; } .reiter { margin-inline: 0; padding: 8px 12px 8px 8px; } /* min-width: 0 ist die Bremse gegen Querlauf: Rasterkinder schrumpfen sonst nicht unter ihr laengstes Wort ("Informationstechnik"). */ .reiter__titel, .reiter__sub { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; } /* Der Sammel-Einstieg ist der einzige Weg, alle Leistungen zusammen anzufragen, ohne sich vorher fuer eine entscheiden zu muessen. */ .register__tat { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 16px; padding: 14px 22px; } .verzeichnis { margin: 16px 10px 10px; } /* Die Karten stehen hier noch zu zweit; die einspaltige Stufe kommt erst bei 620 px. Stuende sie schon hier, bliebe fuer zwei Spalten nur ein Fenster von 100 px Breite — dafuer lohnt keine Stufe. */ .mensch { grid-template-columns: 1fr; } .mensch__bild { max-width: 400px; } .anfrage { grid-template-columns: 1fr; } .tafel--flach .lage--ui .mitte { padding-inline-end: 0; } .ruf__satz span:nth-child(2), .ruf__satz span:nth-child(3) { padding-inline-start: 0; } } /* ═══════ 640 ═══════ */ @media (max-width: 640px) { :root { --inset: 16px; --pad-x: 20px; --pad-t: 20px; --pad-b: 24px; } /* Eine Aktion als Flaeche, der Nebenweg als Zeile: das spart die Hoehe, die der Filmstreifen darunter braucht, und ordnet die beiden klarer. */ .wort__tun { gap: 18px; align-items: center; } .wort__tun .tat { width: 100%; } .wort__tun .tat--klar { /* Nicht auf 0: als Ziel braucht die Zeile 24 px Hoehe (WCAG 2.5.8), ohne Polster waeren es 23. */ width: auto; padding: 9px 2px; border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .wort__tun .tat--klar:hover { background: none; } /* Auf dem Telefon steht ohnehin jede Marke in ihrer eigenen Zeile: die Reihe braucht dafuer keine eigene Regel, nur weniger Luft zwischen den Gliedern. Ein Raster waere hier falsch — die drei Marken sind verschieden lang, und eine feste erste Spalte risse sie auseinander. */ /* Untereinander statt in einer Zeile: dann steht der Punkt vor jeder Zusage, nicht zwischen ihnen. */ .heldsiegel { flex-direction: column; align-items: flex-start; row-gap: 10px; margin-top: 24px; } .heldsiegel li { font-size: 18.5px; } /* Eine Aussparung ueber die ganze Breite. Mit zweien ragte zwischen Logo und Angebot ein rund 110 px breiter Zahn der Tafel nach oben, der nichts fasste und wie ein Renderfehler aussah. Die Tafel beginnt hier gerade unter der Leiste, Rundung und Einzug bleiben. */ .kerbe--links { width: calc(100% + 4px); border-end-end-radius: 0; } .kerbe--links::after, .kerbe--rechts::after { display: none; } .kerbe--rechts { background: none; } /* Einsatzjahr: eine Spalte, volle Namen */ #jahresbogen .jahrring__liste { grid-template-columns: minmax(0, 1fr); gap: 2px; } /* Am Satzende bleibt das Blatt gross, darf aber nicht ueber die Kante der Tafel hinauslaufen: auf dem Telefon steht die Schriftplatte randvoll, und was rechts austritt, waere weg. */ /* Die Tafel lag hier hinter dem Fliesstext. Jetzt hat sie unten einen eigenen Streifen, den der Block als Polster freihaelt. */ .ruf { padding-bottom: clamp(150px, 42vw, 200px); } .ruf__tafel { width: 54%; inset-block: auto -24%; inset-inline-end: -14px; } .feldpaar { grid-template-columns: 1fr; } .fakten > div, .direkt li { grid-template-columns: 1fr; gap: 4px; } .fuss__raster { grid-template-columns: 1fr; } .formular .tat { width: 100%; justify-self: stretch; } } /* ═══════ Endpunkte der Skalen, deckungsgleich mit den clamps ═══════ */ @media (min-width: 1440px) { .wort__titel { font-size: 56px; } /* Sektionstitel und Ruf stehen nicht mehr fest auf 76 / 49,6 px: die Tokens --t-h2, --t-h2-lang und --t-h1 erreichen ihre Endwerte selbst. */ } @media (max-width: 400px) { :root { --pad-x: 18px; } .tat--gross { padding: 17px 24px 17px 20px; font-size: 19px; gap: 9px; } .tat__blatt { width: 19px; height: 19px; } .wort__titel { font-size: 34px; letter-spacing: -.03em; } /* "Ein Ansprechpartner" bleibt bis 320 px auf einer Zeile */ .wort__titel .riss:not(:first-child) { font-size: min(1.75rem, 7.4vw); } } /* Zwischen 901 und 1024 stehen sieben Ziele, Marke und Angebot in einer Zeile, die dafür zu kurz ist: der Markenname weicht, die Ziele ruecken zusammen, und die linke Aussparung wird auf das Siegel eingekuerzt. */ @media (min-width: 901px) and (max-width: 1200px) { /* Enge Zeile, enge Bloecke: die Kehlen werden kleiner, sonst beulen sie die kurzen Aussparungen aus, und die Bilder in den Sockelkarten weichen, damit der Text nicht auf drei Zeilen bricht. */ :root { --kehle: clamp(16px, 1.8vw, 22px); } .sockel__bild { display: none; } .sockel__karte { grid-template-columns: minmax(0, 1fr); padding-inline: clamp(18px, 2vw, 24px); } .sockel__titel { font-size: clamp(18.5px, 1.5vw, 19.5px); } } @media (min-width: 901px) and (max-width: 1024px) { :root { --kerbe-l: min(46%, var(--kerbe-l-mess, calc(var(--rand) - var(--inset) + 66px))); --kerbe-r: min(34%, var(--kerbe-r-mess, calc(var(--rand) - var(--inset) + 116px))); } .marke__name { display: none; } .glieder { gap: 2px; } /* Hier stand ".glieder a { padding-inline: 7px; font-size: 16px }" aus der Zeit, als die Pillen bis 901 px in der Zeile standen. Seit das Klappmenue bei 1320 px beginnt, machte die Regel nur dessen Zeilen zwischen 901 und 1024 px auf 16 statt 22 px klein (2026-09-19 raus). */ .leiste__tat { padding: 8px 14px 8px 11px; font-size: 16.5px; } } /* ═══════ Stufen der Leiste ═══════ Zwei eigene Punkte, gemessen an der Zeile selbst: erst weicht der Markenname, dann das Wort im Angebot-Knopf. */ @media (max-width: 430px) { /* Der Name steht zwei Zeilen tiefer noch einmal auf der Schriftplatte */ .marke__name { display: none; } } @media (max-width: 360px) { /* Blatt und Wort bleiben beide, nur mit weniger Polster: auf den Unterseiten fehlt das aria-label, das Wort ist dort der Name des Links. Das Blatt kostet gut 17 px der rund 60 px Luft bei 320 px. */ .leiste__tat { padding: 8px 12px 8px 10px; } } /* ═══════ BEWEGUNG REDUZIEREN ═══════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Masken für den wortweisen Auftritt der Überschriften */ .wort-maske { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: var(--maske-oben) var(--maske-unten); margin-block: calc(-1 * var(--maske-oben)) calc(-1 * var(--maske-unten)); } .wort-maske > span { display: inline-block; } /* ═══════ LENIS ═══════ Pflichtteil der Bibliothek (MIT, Darkroom Engineering), hier einkopiert statt als zweite Datei geladen. Sie regelt nur, dass die Hoehe frei bleibt und dass Bereiche mit data-lenis-prevent ihr eigenes Scrollen behalten. */ html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete} /* ═══════ GLAS ═══════ Wo der Blur-Filter läuft, verschwindet die Deckschicht fast ganz. brightness() dunkelt das Durchscheinende, saturate() hebt die Farbe an: das Bild bleibt farbig und in Bewegung erkennbar statt zugedeckt. Die Leiste steht hier bewusst nicht mehr: ihr Grund haengt seit dem Umbau stufenlos an --tief und wurde von diesem Rezept ueberschrieben — daher sprang sie beim Scrollen. */ /* Das Einsatzjahr traegt kein Glas mehr: Glas gibt es nur an der Glaskarte (Regel seit 2026-09-18). */ /* ═══════ KOSTENRAHMEN ═══════ Drei Ebenen, nicht drei Kästen: die Wahl steht frei auf dem Sandgrund, die Regler liegen in einem hellen Blatt, das Ergebnis auf dem dunklen. Der erste Entwurf hatte um jede Gruppe einen Rahmen — Rahmen im Rahmen im Rahmen, und der Block las sich wie ein Formular statt wie diese Seite. Die Tafel ist bewusst dasselbe Blatt wie .verzeichnis in den Gewerken: Akzentkante oben, Wasserzeichen in der Ecke, Mono-Ziffern, Punktführung. Wer den Rechner benutzt, sieht schon die Form seines späteren Angebots. Jede Klasse trägt das Präfix .rechner: diese Datei hat kein Scoping, und die kurzen deutschen Blocknamen (.wahl, .lage, .karte, .pos) sind hier bereits mehrfach vergeben. ── Größen ── Dieser Block liest sich eine Stufe größer als der Rest der Seite. Er ist das einzige Stück, das man nicht liest, sondern bedient, und ein Teil der Auftraggeber ist im Rentenalter. Darum: · Fließtext ab 17 px, Bedienwörter 18 px, Marken 14 px statt 12. · Jede Schaltfläche mindestens 48 × 48 px — Pillen, Kacheln, Schieber- griff. Das ist die WCAG-Zielgröße für AAA und der Wert, ab dem ein Treffer mit unruhiger Hand sicher sitzt. · Gedeckte Schrift nur noch dort, wo sie über 4.5:1 bleibt. */ /* Die Kosten stehen als eingelassene Nebel-Tafel im Kalkrahmen, mit Einzug und Radius wie Ruf und Für wen (Rahmen-Prinzip, Runde 4). Nebel ist der kühle Ton für Rechnen und Zahlen. Nur über die ID: .feld--sand trägt auch #jahr und #fragen. */ #kosten { margin: 0 var(--inset) var(--inset); padding: clamp(3.25rem, 8vw, 6.5rem) var(--pad-x); border-radius: var(--r-gross); background: var(--nebel); } /* Kopf zweispaltig wie bei Für wen: Titel links, Vorspann rechts auf der Grundlinie. Stand vorher untereinander, rechts daneben 700 px leer. */ @media (min-width: 1001px) { #kosten .kapitel { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 22px clamp(32px, 5vw, 80px); } #kosten .kapitel__lauf { margin-top: 0; max-width: 46ch; justify-self: end; } } .rechner { margin-top: clamp(34px, 4vw, 52px); } /* Wahl links, Tafel rechts. Die Huelle ist zugleich die Grenze fuer die klebende Tafel: sie laeuft mit, solange die Wahl reicht, und bleibt dann stehen, statt ueber das Kleingedruckte darunter zu fahren. */ .rechner__spalten { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 440px); gap: clamp(20px, 2.4vw, 34px); align-items: start; } .rechner__wahl { display: grid; gap: clamp(20px, 2.2vw, 30px); min-width: 0; } /* ── Die Wahl steht frei ── */ .rechner__nackt { min-width: 0; margin: 0; padding: 0; border: 0; } /* Die Legenden der beiden Wahlfelder. "Gewerke wählen" und "modular kombinieren und sparen" sind Wortlaut des Kunden. Sie beschriften, sie sind keine Kicker: Satzschrift statt gesperrter Versalien. */ .rechner__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; width: 100%; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(31, 58, 38, .18); font-size: 17.5px; font-weight: 500; color: var(--ink-quiet); } .rechner__kopf > :first-child { font-size: 18px; font-weight: 600; color: var(--surface-panel); } /* Bereichsgründe wie in den Leistungen: an der Scheibe jeder Kachel und am Kopf jedes Abschnitts im Blatt. */ .rechner__gewerk > [data-gewerk="reinigung"] + .rechner__kachel, .rechner__satz[data-satz="reinigung"] { --bereich: var(--nebel); } .rechner__gewerk > [data-gewerk="hausmeister"] + .rechner__kachel, .rechner__satz[data-satz="hausmeister"] { --bereich: var(--stein); } .rechner__gewerk > [data-gewerk="garten"] + .rechner__kachel, .rechner__satz[data-satz="garten"] { --bereich: var(--moos-hell); } .rechner__gewerk > [data-gewerk="winter"] + .rechner__kachel, .rechner__satz[data-satz="winter"] { --bereich: var(--nebel); --bereich-tinte: var(--tinte-wasser); } .rechner__gewerk > [data-gewerk="elektro"] + .rechner__kachel, .rechner__satz[data-satz="elektro"] { --bereich: var(--stein); } .rechner__gewerk > [data-gewerk="sonder"] + .rechner__kachel, .rechner__satz[data-satz="sonder"] { --bereich: var(--klinker-hell); --bereich-tinte: var(--tinte-ziegel); } .rechner__gewerke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Fest 12 px: der Fokusring reicht 6 px über die Kachel hinaus. Bei 8 px (schmal) stiess er an den farbigen Rand der gewählten Nachbarkachel und hob sich dort nur mit 1,7 bis 1,9 : 1 ab. */ gap: 12px; } .rechner__gewerk { display: block; cursor: pointer; } .rechner__gewerk > input { position: absolute; width: 1px; height: 1px; opacity: 0; } /* Das Kästchen liegt unsichtbar im Label: damit ist die ganze Kachel Schaltfläche, während Tastatur und Vorleseprogramm weiter das Kästchen bedienen. Den Zustand tragen Rand und Haken oben rechts. */ .rechner__kachel { position: relative; height: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 3px 15px; align-items: center; min-height: 88px; padding: 18px 54px 18px 18px; border: 1px solid rgba(31, 58, 38, .14); border-radius: var(--r-mittel); background: var(--papier); transition: border-color .35s var(--kurve), box-shadow .35s var(--kurve), transform .35s var(--kurve); } .rechner__zeichen { grid-row: 1 / span 2; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--bereich, var(--stein)); box-shadow: inset 0 0 0 1px rgba(31, 58, 38, .1); fill: var(--bereich-tinte, var(--surface-gras)); transition: background-color .35s var(--kurve), fill .35s var(--kurve); } .rechner__titel { font-size: 19px; font-weight: 600; line-height: 1.22; color: var(--surface-panel); } .rechner__sub { font-size: var(--t-klein); line-height: 1.35; color: var(--ink-quiet); } .rechner__haken { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--bereich-tinte, var(--surface-gras)); fill: var(--ink-on-dark); opacity: 0; transform: scale(.6); transition: opacity .3s var(--kurve), transform .3s var(--kurve); } /* Gewählt: Rand doppelt in der Tinte des Bereichs (Rasengrün 6,3 : 1, Wasser 7,0, Ziegel 6,8 auf Papier), die Scheibe füllt sich wie der aktive Reiter im Register der Leistungen, oben rechts der Haken. Vorher wurde die ganze Kachel Limette und stand neben Limettenzahl und Limettenknopf: drei laute Flächen auf einen Blick. */ .rechner__gewerk > input:checked + .rechner__kachel { border-color: var(--bereich-tinte, var(--surface-gras)); box-shadow: inset 0 0 0 1px var(--bereich-tinte, var(--surface-gras)), var(--schatten-1); } .rechner__gewerk > input:checked + .rechner__kachel .rechner__zeichen { background: var(--bereich-tinte, var(--surface-gras)); box-shadow: none; fill: var(--ink-on-dark); } .rechner__gewerk > input:checked + .rechner__kachel .rechner__haken { opacity: 1; transform: none; } /* Fokusringe im Rechner: 3 px in --fokus (Wald auf hellem Grund, 10 : 1 auf Nebel, 13 : 1 auf Papier). Vorher 2 px Rasengrün: an den runden Enden der Pillen fiel der Ring durch die Kantenglättung unter 3 : 1. */ .rechner__gewerk > input:focus-visible + .rechner__kachel { outline: 3px solid var(--fokus); outline-offset: 3px; } @media (hover: hover) { .rechner__gewerk:hover .rechner__kachel { border-color: var(--bereich-tinte, var(--surface-gras)); transform: translateY(-2px); box-shadow: var(--schatten-1); } .rechner__gewerk:hover > input:checked + .rechner__kachel { box-shadow: inset 0 0 0 1px var(--bereich-tinte, var(--surface-gras)), var(--schatten-1); } } /* ── Das Blatt mit den Reglern ── */ .rechner__blatt { min-width: 0; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 32px); border-radius: var(--r-mittel); background: var(--papier); box-shadow: 0 0 0 1px rgba(31, 58, 38, .08), var(--schatten-1); } .rechner__blatt[hidden] { display: none; } .rechner__satz { min-width: 0; margin: 0; padding: 0; border: 0; } .rechner__satz[hidden] { display: none; } /* Die Trennlinie setzt das Skript, nicht der Nachbarschaftsselektor: ausgeblendete Abschnitte bleiben Geschwister, und der erste sichtbare hätte sonst eine Linie über sich. Der Abstand hängt an margin und am Satzkopf, nicht am Innenabstand des Fieldsets: eine steht auf der oberen Kante und damit VOR dem padding-top. */ .rechner__satz.ist-weiter { margin-top: clamp(22px, 2.4vw, 30px); border-top: 1px solid rgba(31, 58, 38, .2); } .rechner__satz.ist-weiter .rechner__satzkopf { padding-top: clamp(22px, 2.4vw, 30px); } /* Kopf eines Abschnitts: Zeichen in der Bereichsscheibe und der Name in Satzschrift. Die laufende Ziffer davor ist entfallen; sie war die letzte Mono-Schrift im Block und zählte nur mit. */ .rechner__satzkopf { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 0 18px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--surface-panel); } .rechner__satzzeichen { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--bereich, var(--stein)); box-shadow: inset 0 0 0 1px rgba(31, 58, 38, .1); fill: var(--bereich-tinte, var(--surface-gras)); } /* ── Eine Regel: Wort links, Wert rechts, Bedienung darunter ── */ /* Begrenzt, weil das Blatt über 700 px breit wird: ungebremst stand das Wort ganz links und sein Wert ganz rechts, mit einem halben Meter Luft dazwischen — zwei Angaben, die zusammengehören, lasen sich als zwei. */ .rechner__regel { display: grid; max-width: 700px; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 14px; padding-top: 20px; } .rechner__regel:first-of-type { padding-top: 0; } .rechner__wort { font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--ink-body); } .rechner__wert { font-size: 18px; font-weight: 600; color: var(--bereich-tinte, var(--surface-gras)); font-variant-numeric: tabular-nums; } /* ── Schieber ── Die gefüllte Hälfte der Schiene hängt an --fuell, das vom Skript gesetzt wird: WebKit kennt kein ::-moz-range-progress, ein Verlauf mit hartem Stopp ist der einzige Weg, der in beiden Maschinen dasselbe zeigt. Der Griff trägt einen Papierring statt des Limettenrings: Limette als Linie auf hellem Grund verschwindet (1,2 : 1). */ .rechner__schieber { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 48px; margin: 2px 0 0; background: transparent; cursor: pointer; } /* 48 px hoch, obwohl die Schiene nur acht misst: die Hoehe ist die Trefferflaeche, und die zaehlt hier mehr als die Zeichnung. */ .rechner__schieber::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-pille); background: linear-gradient(to right, var(--bereich-tinte, var(--surface-gras)) var(--fuell, 0%), rgba(31, 58, 38, .14) var(--fuell, 0%)); } .rechner__schieber::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -12px; border: 5px solid var(--papier); border-radius: var(--r-pille); background: var(--bereich-tinte, var(--surface-gras)); box-shadow: 0 0 0 1px rgba(31, 58, 38, .28), var(--schatten-2); } .rechner__schieber::-moz-range-track { height: 8px; border-radius: var(--r-pille); background: rgba(31, 58, 38, .14); } .rechner__schieber::-moz-range-progress { height: 8px; border-radius: var(--r-pille); background: var(--bereich-tinte, var(--surface-gras)); } .rechner__schieber::-moz-range-thumb { width: 22px; height: 22px; border: 5px solid var(--papier); border-radius: var(--r-pille); background: var(--bereich-tinte, var(--surface-gras)); box-shadow: 0 0 0 1px rgba(31, 58, 38, .28), var(--schatten-2); } .rechner__schieber:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; } /* ── Pillen für Turnus und Zusatz ── */ .rechner__takte { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 5px; } .rechner__takte label { display: block; cursor: pointer; } .rechner__takte input { position: absolute; width: 1px; height: 1px; opacity: 0; } .rechner__takte span { display: flex; align-items: center; min-height: 48px; padding: 10px 22px; border: 1px solid rgba(31, 58, 38, .18); border-radius: var(--r-pille); background: var(--kalk); font-size: 18px; color: var(--ink-body); white-space: nowrap; transition: background-color .3s var(--kurve), color .3s var(--kurve), border-color .3s var(--kurve); } .rechner__takte input:checked + span { background: var(--surface-panel); border-color: var(--surface-panel); color: var(--ink-on-dark); } /* In einem Abschnitt trägt die gewählte Pille die Tinte ihres Bereichs, wie Schieber und Wert: Winter wasserblau, Sonderarbeiten ziegelrot, sonst Wald. Weiß darauf 7 : 1 und mehr. */ .rechner__satz .rechner__takte input:checked + span { background: var(--bereich-tinte, var(--surface-panel)); border-color: var(--bereich-tinte, var(--surface-panel)); } .rechner__takte input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 3px; } @media (hover: hover) { .rechner__takte label:hover span { border-color: var(--bereich-tinte, var(--surface-gras)); } } /* Der Satz unter einem Abschnitt ohne Regler. Er sagt, warum dort keine Zahl steht — sonst liest sich ein leerer Abschnitt wie ein Fehler. (Stand bis 2026-09-18 in --ink-muted, also Weiß auf dem weißen Blatt.) */ .rechner__hinweis { max-width: 62ch; margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--ink-quiet); } /* Kacheln, die keinen Preis tragen: derselbe Bau, aber die Unterzeile laeuft im Akzentgruen statt im Grau — der Unterschied muss vor dem Klick sichtbar sein, nicht erst in der Aufstellung. */ .rechner__gewerk > input[data-anfrage] + .rechner__kachel .rechner__sub { color: var(--surface-gras); font-weight: 500; } /* ── Die Tafel: ein Beleg ── Papier wie das Leistungsverzeichnis in den Gewerken. Oben die Posten, darunter der Paketvorteil als Abzug, am Fuß die Summe: so liest sich die Rechnung von oben nach unten und geht sichtbar auf. Dunkel ist nur noch das kleine Summenfeld. */ .rechner__tafel { position: sticky; top: clamp(96px, 12vh, 132px); padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px); border-radius: var(--r-mittel); background: var(--papier); color: var(--ink-body); box-shadow: 0 0 0 1px rgba(31, 58, 38, .08), var(--schatten-1); } .rechner__kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(31, 58, 38, .2); font-size: 17.5px; font-weight: 500; color: var(--ink-quiet); } .rechner__kopfzeile > :first-child { font-size: 18px; font-weight: 600; color: var(--surface-panel); } /* Die Posten: Wort, Punktführung, Betrag — die Zeile eines Leistungs- verzeichnisses. Die Führung darf als einzige schrumpfen. */ .rechner__posten { list-style: none; margin: 0; padding: 2px 0 0; display: grid; } .rechner__pos { display: grid; grid-template-columns: minmax(0, max-content) minmax(12px, 1fr) auto; align-items: baseline; gap: 0 10px; padding: 12px 0; } .rechner__pos + .rechner__pos { border-top: 1px dashed rgba(31, 58, 38, .24); } .rechner__was { font-size: 18.5px; line-height: 1.4; color: var(--ink-body); } .rechner__fuehrung { align-self: center; height: 2px; margin-top: 6px; background-image: radial-gradient(circle, rgba(31, 58, 38, .42) 1px, transparent 1.3px); background-size: 6px 2px; background-repeat: repeat-x; } .rechner__wertchen { font-size: 18.5px; font-weight: 600; white-space: nowrap; color: var(--surface-panel); font-variant-numeric: tabular-nums; } /* Der Paketvorteil steht als eigene Zeile zwischen den Posten, damit die Aufstellung aufgeht - vorher ergab die Addition der Posten mehr als die grosse Zahl darunter. Er ist aber ein Abzug und kein Posten: gedaempfte Schrift und ein leichteres Gewicht am Betrag setzen die Zeile eine Stufe zurueck. Kein Rot, kein Warnzeichen. */ .rechner__pos--abzug .rechner__was, .rechner__pos--abzug .rechner__wertchen { font-weight: 500; color: var(--ink-quiet); } .rechner__pos--abzug .rechner__fuehrung { background-image: radial-gradient(circle, rgba(31, 58, 38, .26) 1px, transparent 1.3px); } .rechner__leer { padding: 12px 0 2px; font-size: 18px; line-height: 1.5; color: var(--ink-quiet); } .rechner__paket { margin-top: 6px; padding: 11px 14px; border-radius: var(--r-mittel); background: var(--moos-hell); font-size: 17.5px; line-height: 1.45; color: var(--surface-panel); } .rechner__paket[hidden] { display: none; } /* Die Summe: das einzige dunkle Feld der Sektion, klein und am Fuß des Belegs. Zahl in Weiß (12,4 : 1), das Eurozeichen in Limette. */ .rechner__summe { margin-top: 16px; padding: 18px 20px 16px; border-radius: var(--r-mittel); background: var(--surface-panel); color: var(--ink-on-dark); } .rechner__zahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: clamp(36px, 3.3vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -.025em; color: var(--ink-on-dark); font-variant-numeric: tabular-nums; } .rechner__strich { opacity: .5; font-weight: 400; } .rechner__waehrung { font-size: .6em; font-weight: 500; color: var(--accent); } /* Nur Gewerke ohne Preis gewählt: statt einer Spanne steht "auf Anfrage" (main.js setzt die Klasse). Strich, Bis-Wert und Eurozeichen fallen weg, damit auch die Ansage des aria-live-Felds nur "auf Anfrage" lautet. */ .rechner__zahl.ist-anfrage { font-size: clamp(30px, 2.6vw, 38px); } .rechner__zahl.ist-anfrage .rechner__strich, .rechner__zahl.ist-anfrage [data-bis], .rechner__zahl.ist-anfrage .rechner__waehrung { display: none; } .rechner__takt { margin-top: 9px; font-size: 17.5px; line-height: 1.45; color: rgba(255, 255, 255, .82); text-wrap: pretty; } .rechner__tat { margin-top: 14px; width: 100%; gap: 11px; min-height: 60px; padding: 18px 30px; font-size: 19px; } .rechner__tat[aria-disabled="true"] { opacity: .34; pointer-events: none; } /* ── Das Kleingedruckte, über die volle Breite ── */ .rechner__fuss { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(24px, 3vw, 48px); margin-top: clamp(20px, 2.2vw, 30px); padding-top: 18px; border-top: 1px solid rgba(31, 58, 38, .18); /* Hier steht der Steuerhinweis nach Paragraf 35a EStG. Er wird gelesen und weitererzaehlt - 14,5 px waren dafuer zu klein. */ font-size: 18.5px; line-height: 1.6; color: var(--ink-body); } .rechner__fuss strong { font-weight: 600; color: var(--surface-gras); } .rechner__fuss > p[hidden] { display: none; } /* Faellt der Steuertipp weg (Gewerbemodus), nimmt der verbleibende Absatz die ganze Breite — sonst stuende er in der linken Haelfte und rechts waere ein Loch unter der Tafel. */ .rechner__fuss:has(> p[hidden]) > p:first-child { grid-column: 1 / -1; max-width: 92ch; } /* ── Enger ── Unter 1000 px fällt die Tafel unter die Wahl und hört auf zu kleben: sie ist über 300 px hoch und nähme am oberen Rand das halbe Fenster. */ @media (max-width: 1000px) { .rechner__spalten { grid-template-columns: minmax(0, 1fr); } .rechner__tafel { position: relative; top: auto; } } @media (max-width: 860px) { /* Zwei Kacheln nebeneinander tragen die 19-px-Titel nicht mehr ohne Dreizeiler — ab hier steht jede allein. */ .rechner__gewerke { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .rechner__blatt { padding: 20px 17px; } .rechner__tafel { padding: 20px 16px 18px; } .rechner__summe { padding: 16px 16px 14px; } .rechner__takte span { padding: 10px 18px; font-size: 17.5px; } .rechner__fuss { grid-template-columns: minmax(0, 1fr); gap: 14px; } /* Der Kopf bricht um, statt zu kuerzen: der zweite Teil der Gewerke-Zeile ist der Hinweis aufs Kombinieren und damit Inhalt, kein Beiwerk. Weg faellt nur die Spiegelung der Kundenart: sie wiederholt wortgleich, was die Pillen unmittelbar darunter zeigen. */ .rechner__kopf { flex-wrap: wrap; align-items: flex-start; gap: 4px 14px; } .rechner__kopf > [data-kundenwort] { display: none; } } /* In der eingelassenen Tafel bleiben bei 320 px nur 264 px Breite. "Hausmeisterservice" und "Informationstechnik" brauchen bei 18 px rund 175 px Zeile; mit Scheibe links und Haken rechts blieben 155. Der Haken sitzt deshalb als kleine Marke an der Scheibe, die rechte Luft fällt weg, und lange Pillen dürfen zweizeilig werden statt über den Rand zu laufen. */ @media (max-width: 480px) { #kosten { padding-inline: 12px; } .rechner__kachel { grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 2px 12px; min-height: 76px; padding: 14px; } .rechner__zeichen { width: 38px; height: 38px; padding: 9px; } .rechner__titel { font-size: 18px; } .rechner__haken { inset-block-start: 6px; inset-inline-start: 36px; inset-inline-end: auto; width: 22px; height: 22px; padding: 5px; box-shadow: 0 0 0 2px var(--papier); } .rechner__takte span { white-space: normal; } } /* ═══════ SAISON-ERINNERUNG ═══════ Keine eigene Sektion, sondern ein Feld im Anfrageformular. Es steht abgesetzt in einem eigenen Rahmen, damit sichtbar bleibt, dass es mit der Anfrage nichts zu tun hat: die Einwilligung in Werbung darf nicht Bedingung für das Angebot sein. Ja und Nein sind Pillen wie im übrigen Formular und mindestens 52 px hoch — dieselbe Zielgröße wie dort. */ .brief { margin: 6px 0 2px; padding: 22px 24px; border: 1px solid var(--line-light); border-radius: var(--r-mittel); background: rgba(255, 255, 255, .045); } .brief legend { padding: 0 10px; margin-inline-start: -10px; font-size: 16.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .brief__frage { margin-top: 4px; font-size: 18.5px; line-height: 1.5; color: var(--ink-on-dark); } .brief__wahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .brief__wahl label { display: block; cursor: pointer; } .brief__wahl input { position: absolute; width: 1px; height: 1px; opacity: 0; } .brief__wahl span { display: flex; align-items: center; min-height: 52px; padding: 11px 26px; border: 1px solid var(--line-light); border-radius: var(--r-pille); font-size: 18.5px; color: var(--ink-on-dark); white-space: nowrap; transition: background-color .3s var(--kurve), color .3s var(--kurve), border-color .3s var(--kurve); } .brief__wahl input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); font-weight: 600; } .brief__wahl input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; } @media (hover: hover) { .brief__wahl label:hover span { border-color: rgba(255, 255, 255, .42); } } .brief__fein { margin-top: 14px; /* Kleingedrucktes bestimmt hier den Umfang der Einwilligung. Auf einer Seite, die bewusst eine Stufe groesser gesetzt ist, darf gerade das nicht das Kleinste sein. */ font-size: 18.5px; line-height: 1.55; color: var(--ink-muted); } @media (max-width: 620px) { .brief { padding: 18px 17px; } .brief__wahl label { flex: 1 1 auto; } .brief__wahl span { justify-content: center; } } /* ═══════ SOZIALE WEGE ═══════ Facebook, LinkedIn, WhatsApp. Die Zeichen stammen aus demselben Satz wie alle übrigen Symbole der Seite (Phosphor, MIT) — damit sitzen sie im gleichen Strich und nicht als Fremdkörper daneben. Ein Block, zwei Auftritte: in der Leistenzeile Kreise ohne Wort, im aufgeklappten Blatt und im Fuß beschriftete Reihen. */ .sozial { display: flex; align-items: center; gap: 8px; } .glieder .sozial { margin-inline-start: 6px; } .glieder .sozial__weg { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-pille); background: var(--pille-grund, rgba(10, 26, 14, .42)); box-shadow: inset 0 0 0 1px var(--pille-rand, rgba(255, 255, 255, .16)); color: rgba(255, 255, 255, .92); transition: background .3s var(--kurve), color .3s var(--kurve), box-shadow .3s var(--kurve), transform .3s var(--kurve); } .glieder .sozial__weg svg { width: 22px; height: 22px; fill: currentColor; } /* In der Zeile trägt das Zeichen allein; das Wort bleibt für Vorlese- programme stehen, damit "Facebook" nicht nur als Bild existiert. */ .glieder .sozial__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (hover: hover) { .glieder .sozial__weg:hover { background: var(--accent); color: var(--ink-on-accent); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); } } .glieder .sozial__weg:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; } /* ── Im aufgeklappten Blatt ── */ @media (max-width: 1320px) { .glieder .sozial { width: 100%; gap: 10px; margin: 22px 0 0; padding-top: 4px; } .glieder .sozial__weg { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; width: auto; height: 60px; border-radius: var(--r-mittel); background: var(--surface-panel); box-shadow: none; color: var(--ink-on-dark); font-size: 16px; font-weight: 600; } .glieder .sozial__weg svg { width: 24px; height: 24px; } .glieder .sozial__wort { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } .glieder .sozial__weg--wa { background: var(--surface-gras); } } @media (max-width: 460px) { /* Drei Beschriftungen nebeneinander werden auf dem Telefon zu Silben */ .glieder .sozial { flex-wrap: wrap; } .glieder .sozial__weg { flex: 1 1 100%; justify-content: flex-start; padding-inline: 20px; } } /* ── Im Fuß ── */ .fuss__sozial { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 22px; } .fuss__sozial .sozial__weg { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 12px 20px; border: 1px solid var(--line-light); border-radius: var(--r-pille); color: var(--ink-on-dark); font-size: 17.5px; transition: border-color .3s var(--kurve), background .3s var(--kurve), color .3s var(--kurve); } .fuss__sozial .sozial__weg svg { width: 21px; height: 21px; fill: currentColor; } @media (hover: hover) { .fuss__sozial .sozial__weg:hover { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); } } .fuss__sozial .sozial__weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ═══════ WHATSAPP-KNOPF ═══════ Steht fest unten rechts, aber nicht von Anfang an: das Skript setzt .ist-da, sobald ein Stück gelesen ist, und nimmt es zurück, sobald das Anfragefeld oder der Fuss im Blick ist. Seit 2026-09-18 hell: Papier mit dunkler Schrift, das Zeichen auf einer Wald-Scheibe. In Rasengruen lag er ueber #fuerwen bei 1 : 1 und verschwand; Papier traegt auf jedem Grund der Seite, Schatten und Haarlinie heben ihn auch auf den hellen Flaechen ab. Ausgeblendet heißt hier wirklich weg — visibility und pointer-events fallen mit, sonst fände der unsichtbare Knopf weiter Klicks und die Tabulatortaste liefe hinein. */ .wapp { position: fixed; z-index: 40; inset-block-end: clamp(18px, 3vw, 28px); inset-inline-end: clamp(18px, 3vw, 28px); display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 24px 10px 10px; border-radius: var(--r-pille); background: var(--papier); color: var(--surface-panel); font-size: 18.5px; font-weight: 600; box-shadow: 0 0 0 1px rgba(31,58,38,.16), var(--schatten-3); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px) scale(.96); transition: opacity .45s var(--kurve), transform .45s var(--kurve), visibility .45s, background-color .3s var(--kurve), color .3s var(--kurve); } .wapp.ist-da { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .wapp__zeichen { width: 40px; height: 40px; padding: 9px; flex: none; border-radius: 50%; background: var(--surface-panel); fill: var(--ink-on-dark); transition: background-color .3s var(--kurve), fill .3s var(--kurve); } @media (hover: hover) { .wapp:hover { background: var(--surface-panel); color: var(--ink-on-dark); } .wapp:hover .wapp__zeichen { background: var(--accent); fill: var(--ink-on-accent); } } /* Fokus: ein echter Umriss in Wald (3 px, 3 px Abstand) und darum ein Papierhof aus dem Schatten. So steht der Ring auf hellem Grund als Wald (>= 9,8 : 1 gegen Kalk, Stein, Nebel, Moos, Klinker) und auf Gras oder Wald als Papier-Wald-Papier. Nur box-shadow als Ring fand die Messung nicht, und Umrisse verschwinden nicht im Modus hoher Kontraste. */ .wapp:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: 3px; box-shadow: 0 0 0 9px var(--papier), var(--schatten-3); } /* Nur das Zeichen, bis neben dem Satzspiegel Platz fuer das Wort ist. Mit Wort ist der Knopf rund 170 px breit und lag bei 1440 ueber den letzten 100 px jeder rechten Spalte; als 62-px-Kreis bleibt er ab rund 1420 px ganz neben dem Text. Das Wort steht erst ab 1680 px, wo es neben die 1240 px des Satzspiegels passt. Den Namen fuer Vorleseprogramme traegt aria-label. */ .wapp { width: 62px; min-height: 62px; padding: 0; justify-content: center; } .wapp__wort { display: none; } .wapp__zeichen { width: 46px; height: 46px; padding: 11px; } @media (min-width: 1680px) { .wapp { width: auto; padding: 10px 24px 10px 10px; justify-content: flex-start; } .wapp__wort { display: inline; } .wapp__zeichen { width: 40px; height: 40px; padding: 9px; } } @media (prefers-reduced-motion: reduce) { .wapp { transition: opacity .2s linear, visibility .2s; transform: none; } .wapp.ist-da { transform: none; } } /* ═══════ GALERIE ═══════ Umbau 2026-09-18. Die Sektion steht auf Stein (zweiter heller Grund), zwischen dem Kalk des Ablaufs und dem Klinker des Teams. Kein Einheitsraster mehr: einzelne Kacheln laufen ueber zwei Spalten, das Muster rechnet main.js fuer jede Auswahl so, dass keine Zeile ein Loch behaelt. Die Bildhoehe haengt an der Spaltenbreite, nicht am Seitenverhaeltnis der Kachel: so steht eine breite Kachel genau so hoch wie ihre Nachbarn, und die Unterschriften beginnen auf einer Linie. Unter jedem Bild steht seine Unterschrift, sichtbar und in Lesegroesse. Vorher sagte die Kachel fuenfzehnmal nur die Kategorie, der eigentliche Satz stand nur in der Lupe. Was der Beschnitt abschneidet, zeigt die Lupe vollstaendig. */ .galerie { margin-top: clamp(30px, 3.4vw, 46px); } /* Kopf zweispaltig: Titel links, Einleitung rechts, unten buendig. Der Ablauf davor setzt seinen Titel in eine klebende Spalte, der Team-Block danach neben das Bild; so wiederholt sich die Kopfform nicht. */ #galerie .kapitel { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 22px clamp(32px, 5vw, 80px); } #galerie .kapitel__lauf { margin-top: 0; justify-self: end; max-width: 46ch; } @media (max-width: 1000px) { #galerie .kapitel { grid-template-columns: minmax(0, 1fr); } #galerie .kapitel__lauf { justify-self: start; } } /* Der Knopf unter der gekuerzten Ansicht "Alle". Der Pfeil zeigt nach unten und dreht sich, sobald alles offen ist. */ .galerie__mehr { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(30px, 3.2vw, 46px); min-height: 54px; padding: 0 22px 0 26px; border: 1px solid rgba(31, 58, 38, .3); border-radius: var(--r-pille); background: var(--papier); color: var(--surface-panel); font: inherit; font-size: 18.5px; font-weight: 600; cursor: pointer; transition: background-color .35s var(--kurve), color .35s var(--kurve), border-color .35s var(--kurve); } .galerie__mehr[hidden] { display: none; } .galerie__mehr::after { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .45s var(--kurve); } .galerie__mehr[aria-expanded="true"]::after { transform: rotate(180deg); } .galerie__mehr:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; } @media (hover: hover) { .galerie__mehr:hover { background: var(--surface-panel); border-color: var(--surface-panel); color: var(--ink-on-dark); } } @media (prefers-reduced-motion: reduce) { .galerie__mehr, .galerie__mehr::after { transition: none; } } /* ── Das Sieb ── */ .galerie__sieb { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line-dark); } /* Alle Reiter in derselben Staerke: ein fetter aktiver Reiter waere breiter und schoebe beim Umschalten die Zeile. */ .galerie__reiter { display: flex; align-items: center; flex: none; min-height: 46px; padding: 8px 14px; border: 1px solid rgba(31, 58, 38, .22); border-radius: var(--r-pille); background: var(--papier); font-family: inherit; font-size: 17.5px; font-weight: 500; color: var(--ink-body); cursor: pointer; white-space: nowrap; transition: background-color .3s var(--kurve), color .3s var(--kurve), border-color .3s var(--kurve); } .galerie__reiter.ist-aktiv { background: var(--surface-panel); border-color: var(--surface-panel); color: var(--ink-on-dark); } .galerie__reiter:focus-visible { outline: 2px solid var(--surface-gras); outline-offset: 2px; } @media (hover: hover) { .galerie__reiter:not(.ist-aktiv):hover { border-color: var(--surface-gras); color: var(--surface-panel); } } .galerie__zahl { margin: 14px 0 22px; font-size: 16.5px; font-variant-numeric: tabular-nums; color: var(--ink-quiet); } /* ── Das Raster ── */ .galerie__raster { --spalten: 4; --luecke: clamp(12px, 1.5vw, 20px); container-type: inline-size; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 38px) var(--luecke); } .galerie__stueck { min-width: 0; } .galerie__stueck[hidden] { display: none; } .galerie__stueck[data-spanne="2"] { grid-column: span 2; } .galerie__stueck[data-spanne="voll"] { grid-column: 1 / -1; } /* Die Figur traegt Bild und Unterschrift. Der Knopf ist das Bild; sein ::after legt sich ueber die ganze Figur, damit auch ein Tipp auf die Unterschrift die Lupe oeffnet. */ .galerie__figur { position: relative; margin: 0; } .galerie__oeffner { display: block; overflow: hidden; width: 100%; padding: 0; height: calc((100cqw - (var(--spalten) - 1) * var(--luecke)) / var(--spalten) * .75); border: 0; border-radius: var(--r-mittel); background: var(--kalk); cursor: zoom-in; } .galerie__oeffner::after { content: ""; position: absolute; inset: 0; } .galerie__stueck[data-spanne="voll"] .galerie__oeffner { height: auto; aspect-ratio: 16 / 9; max-height: 72vh; } .galerie__oeffner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--kurve); } .galerie__oeffner:focus-visible { outline: 3px solid var(--surface-gras); outline-offset: 3px; } /* Beim Anfahren oder mit Tastaturfokus erscheint oben rechts im Bild eine Lupe: sie sagt, was ein Klick tut. Auf Beruehrungsgeraeten bleibt sie weg, dort tippt man ohnehin aufs Bild. */ .galerie__figur::before { content: ""; position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-end: 12px; width: 42px; height: 42px; border-radius: 50%; background: rgba(251, 250, 246, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A26' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l4.5 4.5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: var(--schatten-3); opacity: 0; transform: scale(.7); transition: opacity .35s var(--kurve), transform .5s var(--kurve); pointer-events: none; } .galerie__figur:has(.galerie__oeffner:focus-visible)::before { opacity: 1; transform: none; } @media (hover: hover) { .galerie__figur:hover::before { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .galerie__figur::before { transition: none; } } .galerie__text { display: grid; gap: 4px; padding: 12px 2px 0; } .galerie__satz { min-width: 0; font-size: 17.5px; line-height: 1.45; color: var(--ink-body); text-wrap: pretty; /* 320 px: zwei Spalten zu je 139 px, "Gemeinschaftsräumen" passt nicht in eine Zeile und schob die Seite quer */ hyphens: manual; overflow-wrap: break-word; transition: color .3s var(--kurve); } .galerie__marke { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--surface-gras); } @media (hover: hover) { .galerie__figur:hover .galerie__oeffner img { transform: scale(1.04); } .galerie__figur:hover .galerie__satz { color: var(--surface-panel); } } @media (max-width: 1100px) { .galerie__raster { --spalten: 3; } } /* Getrennt wird nur, wenn es sein muss: unter 360 px sind die Spalten so schmal, dass lange Woerter sonst nicht passen. Darueber keine Trennung, aeltere Leser stolpern ueber "Ok-tober". */ @media (max-width: 359px) { .galerie__satz { hyphens: auto; hyphenate-limit-chars: 10 4 4; } } /* Telefon: zwei Spalten; eine breite Kachel steht allein in ihrer Zeile und bekommt deshalb ein eigenes, hoeheres Format. Das Sieb wird eine Zeile zum Wischen (vorher sieben Zeilen, rund 350 px Knoepfe); rechts blendet es aus, solange noch Reiter folgen (Klasse vom Skript). */ @media (max-width: 700px) { .galerie__raster { --spalten: 2; --luecke: 10px; row-gap: 24px; } .galerie__stueck[data-spanne="2"] .galerie__oeffner { height: auto; aspect-ratio: 16 / 9; } .galerie__text { padding-top: 10px; } /* Die Kategorie steht im Sieb darueber und in der Lupe; unter den schmalen Kacheln kostete sie je eine Zeile. */ .galerie__marke { display: none; } .galerie__sieb { flex-wrap: nowrap; margin-inline: calc(-1 * var(--inset)); padding: 2px var(--inset) 14px; scroll-padding-inline: var(--inset); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-bottom: 0; } .galerie__sieb::-webkit-scrollbar { display: none; } .galerie__sieb.hat-mehr { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); } .galerie__zahl { margin-top: 2px; } } /* ═══════ DIE LUPE ═══════ Ein natives : Fokusfalle, Escape und die Sperre des Hintergrunds kommen vom Browser. Der Grund dahinter ist dunkelgrün statt schwarz — auf dieser Seite gibt es kein Schwarz. */ .lupe { /* margin: auto ist Pflicht, nicht Zierde: die Seite setzt ganz oben * { margin: 0 } und nimmt dem damit die Mitte, die der Browser ihm sonst selbst gibt. Ohne diese Zeile klebt die Lupe in der linken oberen Ecke. */ margin: auto; width: min(1100px, 94vw); max-width: none; padding: 0; border: 0; background: none; overflow: visible; } .lupe::backdrop { background: rgba(12, 26, 16, .86); } .lupe__blatt { margin: 0; border-radius: var(--r-mittel); overflow: hidden; background: var(--surface-panel); box-shadow: var(--schatten-3); } .lupe__bild { display: block; width: 100%; max-height: min(72vh, 760px); object-fit: contain; background: #16281a; } .lupe__fuss { display: grid; gap: 5px; padding: 18px clamp(18px, 2.4vw, 26px) 20px; /* rechts Platz für den Stand, der dort im Blatt sitzt */ padding-inline-end: 132px; color: var(--ink-on-dark); } .lupe__marke { font-size: 16.5px; font-weight: 600; color: var(--accent); } .lupe__satz { font-size: 18.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); } /* ── Die drei Wege ── 60 px, weil sie im Dunkeln und oft in Eile getroffen werden. */ .lupe__weg { position: absolute; z-index: 2; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: var(--r-pille); /* dunkel statt weiss-transparent: die Wege liegen auch auf hellen Fotos, und dort verschwand ein weisser Knopf */ background: rgba(15, 30, 18, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); cursor: pointer; transition: background .3s var(--kurve); } .lupe__weg svg { width: 26px; height: 26px; fill: #fff; } .lupe__weg:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @media (hover: hover) { .lupe__weg:hover { background: var(--accent); } .lupe__weg:hover svg { fill: var(--ink-on-accent); } } /* Das Kreuz sitzt im Bild oben rechts. Ueber dem Blatt lag es auf der Leiste, die unter dem Schleier weiter zu sehen ist, und stand dort neben ihrem Angebotsknopf. */ .lupe__weg--zu { inset-block-start: 14px; inset-inline-end: 14px; } .lupe__weg--vor { inset-block-start: 50%; inset-inline-start: -74px; margin-top: -30px; } .lupe__weg--nach { inset-block-start: 50%; inset-inline-end: -74px; margin-top: -30px; } /* Der Stand sass über dem Blatt und lag dort auf der Leiste, die als fixes Element unter dem abgedunkelten Grund weiter zu lesen ist. Jetzt steht er im Blatt, wo ihm nichts in die Quere kommt. */ .lupe__stand { position: absolute; inset-block-end: 22px; inset-inline-end: clamp(18px, 2.4vw, 26px); font-size: 16.5px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); } /* Unter 1300 px ist neben dem Blatt kein Platz mehr für die Wege: sie rücken auf das Bild. */ @media (max-width: 1300px) { .lupe { width: min(1100px, 90vw); } .lupe__weg--vor { inset-inline-start: 12px; } .lupe__weg--nach { inset-inline-end: 12px; } } @media (max-width: 620px) { .lupe { width: 94vw; } .lupe__weg { width: 54px; height: 54px; } .lupe__weg svg { width: 23px; height: 23px; } .lupe__weg--vor, .lupe__weg--nach { margin-top: -27px; } .lupe__weg--zu { inset-block-start: 10px; inset-inline-end: 10px; } .lupe__satz { font-size: 17px; } /* Auf dem Telefon reicht die Breite nicht für Satz und Stand nebeneinander: der Stand rückt über den Satz. */ /* Der Stand steht unter dem Satz, nicht oben auf dem Foto: dort war er weiss auf hellem Bild kaum zu lesen. */ .lupe__fuss { padding-inline-end: clamp(18px, 2.4vw, 26px); padding-bottom: 46px; } .lupe__stand { inset-block-end: 16px; inset-block-start: auto; inset-inline-start: 18px; inset-inline-end: auto; font-size: 16.5px; } } @media (prefers-reduced-motion: reduce) { .galerie__oeffner img { transition: none; } .galerie__oeffner:hover img { transform: none; } } /* ═══════ KARRIERE ═══════ Eigene Seite (karriere.html), bewusst nicht als Abschnitt der Startseite. Sie borgt sich Tafel, Feld, Kapitel und Formular von dort und bringt nur mit, was es dort nicht gibt. Präfix .karr bzw. .karriere — die Datei hat kein Scoping, und .kar wäre an .karte und .kartenblatt geraten. */ /* ── Kopf ── */ /* Die Tafel beginnt UNTER der Leiste, nicht dahinter. Vorher lag ihre Oberkante bei 40 px und die 86 px hohe Leiste schnitt 46 px in das Bild: Marke und Pillen standen mitten im Motiv. Auf der Startseite löst das der Hero mit seinen Aussparungen; hier gibt es die nicht, also bekommt die Tafel schlicht Luft nach oben und die Leiste steht auf dem cremefarbenen Seitengrund. */ .karriere__kopf { position: relative; overflow: hidden; display: grid; align-items: end; min-height: min(68vh, 580px); margin-block-start: clamp(74px, 8.5vh, 96px); padding-block: clamp(56px, 8vh, 92px) clamp(40px, 6vh, 72px); color: var(--ink-on-dark); } .karriere__bild { position: absolute; inset: 0; z-index: 0; } .karriere__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Der Verlauf liegt nur so hoch, wie die Schrift reicht — dasselbe Rezept wie im Bildband Weite. Oben leichter, seit dort keine Marke mehr steht. */ .karriere__bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 30, 18, .9) 0%, rgba(15, 30, 18, .76) 42%, rgba(15, 30, 18, .4) 78%, rgba(15, 30, 18, .22) 100%); } .karriere__kopf > .mitte { position: relative; z-index: 1; } .karriere__wort { max-width: 60ch; } .karriere__satz { margin-top: 14px; font-size: clamp(38px, 6.2vw, 76px); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; } .karriere__satz em { font-style: normal; color: var(--accent); } .karriere__lauf { max-width: 56ch; margin-top: 20px; font-size: clamp(18.5px, 1.2vw, 20.5px); line-height: 1.6; color: rgba(255, 255, 255, .84); } .karriere__wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .karriere__wege .tat { min-height: 60px; padding: 18px 30px; font-size: 19px; gap: 10px; } .karriere__blatt { width: 19px; height: 19px; fill: currentColor; } /* Das aktive Ziel in der Leiste einer Unterseite */ .glieder a.ist-hier { background: var(--accent); color: var(--ink-on-accent); text-shadow: none; } /* ── Wofür wir Leute suchen ── Sechs gleiche weisse Bildkarten waren die Vorlage schlechthin. Jetzt liegt jeder Bereich als Zeile auf seinem hellen Bereichsgrund (derselbe wie im Ratgeber), Bild links im Passepartout, Titel und Anforderung rechts. Kein Symbol mehr ueber dem Titel: die Farbe traegt den Bereich. */ .karrstellen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); } .karrstelle { --grund: var(--papier); min-width: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(18px, 2.4vw, 32px); padding: 12px; border-radius: var(--r-mittel); background: var(--grund); } .karrstelle--nebel { --grund: var(--nebel); } .karrstelle--stein { --grund: var(--stein); } .karrstelle--moos { --grund: var(--moos-hell); } .karrstelle--klinker { --grund: var(--klinker-hell); } /* Kopf dieses Abschnitts zweispaltig: Titel links, Satz rechts unten buendig. Bricht die Folge "Titel, Satz, Raster" der Seite auf. */ @media (min-width: 1000px) { #profil .kapitel, #haltung .kapitel { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; } #profil .kapitel__lauf, #haltung .kapitel__lauf { margin-top: 0; padding-bottom: .4em; } } .karrstelle__bild { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-mittel); } .karrstelle__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .karrstelle__wort { padding: 10px clamp(6px, 1.2vw, 16px) 10px 0; } .karrstelle__titel { font-size: clamp(21px, .6vw + 18px, 26px); font-weight: 600; line-height: 1.18; letter-spacing: -.015em; color: var(--surface-panel); } .karrstelle__lauf { margin-top: 10px; font-size: 18.5px; line-height: 1.55; color: var(--ink-body); } @media (max-width: 1000px) { .karrstellen { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .karrstelle { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px; } .karrstelle__bild { aspect-ratio: 2 / 1; } .karrstelle__wort { padding: 14px 8px 10px; } } /* ── Bewerbung ── Seit 2026-09-18 hell: Klinker als Grund, das Formular als Blatt auf Papier. Auf Dunkelgruen lagen Platzhalter bei 2,2 : 1 und Feldraender bei 1,6 : 1 — fuer die aeltere Zielgruppe das schwerste Lesehindernis der Seite. Die Formularregeln (.eingabe, .wahl, .zustimmung) sind mit dem Kontaktformular der Startseite geteilt; hier wird alles nur unter #bewerbung ueberschrieben. Der WhatsApp-Weg bleibt dunkel: er ist der Ausweg, der hervorstechen darf. */ .karrform__tafel { background: var(--klinker-hell); color: var(--ink-body); } /* Aufbau seit 2026-09-19 wie der Kontakt der Startseite: links oben die Einleitung mit WhatsApp-Knopf und Kontaktzeilen, links unten die naechsten Schritte und das Bild, rechts ueber beide Zeilen das Blatt. Die zweite Zeile ist 1fr: was das Formular hoeher ist als die Einleitung, bekommt der untere Block, und darin waechst das Bild bis zur Unterkante des Blatts. Vorher endete die linke Spalte bei 1440 px rund 1000 px ueber dem Formular. */ .karrform { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "wort blatt" "neben blatt"; column-gap: clamp(32px, 4.4vw, 80px); } .karrform > * { min-width: 0; } .karrform__wort { grid-area: wort; } .karrform__neben { grid-area: neben; display: flex; flex-direction: column; } .karrform__lauf { margin-top: 20px; max-width: 40ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-body); } .karrform__blatt { grid-area: blatt; padding: clamp(22px, 3vw, 48px); border-radius: var(--r-mittel); background: var(--papier); box-shadow: var(--schatten-1); } .karrform__blatt .kontakt-blatt__kopf { margin-bottom: 4px; } /* WhatsApp als dunkle Pille wie der Anrufknopf der Startseite. Das Wort "WhatsApp" steht gross, die Frage klein darueber. */ .karrform__wapp { max-width: 100%; } .karrform__wapp .kontakt-ruf__nr { font-variant-numeric: normal; } .karrform__wapp:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: 4px; } .karrform__vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .karrform__wapp-hinweis { margin-top: 14px; max-width: 36ch; font-size: var(--t-klein); line-height: 1.45; color: var(--ink-quiet); } /* Schritte und Bild */ .karrform__weiter { margin-top: clamp(36px, 4vw, 52px); max-width: none; } .karrform__weiter .kontakt-weiter__titel { font-size: clamp(20px, 1.1rem + .3vw, 22px); } .karrform__weiter .kontakt-weiter__liste { gap: 16px; } .karrform__weiter .kontakt-weiter__liste li { font-size: 19px; } .karrform__portraet { position: relative; flex: 1 1 auto; min-height: 360px; margin: clamp(30px, 3.2vw, 44px) 0 0; border-radius: var(--r-mittel); overflow: hidden; background: var(--stein); box-shadow: var(--schatten-1); } .karrform__portraet img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 16%; } /* Auswahlfelder tragen dieselbe Form wie die Eingabezeilen — sonst fällt das Betriebssystem mit seinem eigenen Grau in das dunkle Blatt. */ .eingabe select { width: 100%; min-height: 56px; padding: 16px 44px 16px 18px; border: 1px solid var(--line-light); border-radius: var(--r-mittel); background-color: rgba(255, 255, 255, .07); color: var(--ink-on-dark); font-family: inherit; font-size: 18.5px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px 20px; cursor: pointer; } .eingabe select option { color: var(--ink-body); background: #fff; } .eingabe select:focus { background-color: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); } .karrform__datei input[type="file"] { width: 100%; min-height: 56px; padding: 14px 18px; border: 1.5px dashed rgba(31, 58, 38, .55); border-radius: var(--r-mittel); background: var(--kalk); color: var(--ink-body); font-family: inherit; font-size: 18.5px; cursor: pointer; } .karrform__datei input[type="file"]::file-selector-button { margin-inline-end: 14px; padding: 10px 18px; border: 0; border-radius: var(--r-pille); background: var(--surface-panel); color: var(--ink-on-dark); font-family: inherit; font-size: 17.5px; font-weight: 600; cursor: pointer; } .karrform__datei small { display: block; margin-top: 8px; font-size: 17.5px; line-height: 1.5; color: var(--ink-quiet); } /* Die Felder der Bewerbung: Label, Eingabe, Pillen, Zustimmung und Fehlerzustand kommen seit Runde 2 von .formular--hell (gemeinsam mit dem Anfrageformular der Startseite). Hier steht nur, was es dort nicht gibt: das Auswahlfeld (.eingabe select ist global fuer dunklen Grund gebaut), der Platzhalter der Einzeiler und der Pflicht-Hinweis. */ #bewerbung .kapitel__titel { color: var(--surface-panel); } #bewerbung .eingabe select { font-size: 18px; color: var(--ink-body); background-color: var(--kalk); border: 1.5px solid rgba(31, 58, 38, .55); border-radius: var(--r-mittel); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231F3A26'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); transition: border-color .25s var(--kurve), box-shadow .25s var(--kurve), background-color .25s var(--kurve); } @media (hover: hover) { #bewerbung .eingabe select:hover { border-color: rgba(31, 58, 38, .8); } } #bewerbung .eingabe select:focus { outline: none; background-color: var(--papier); border-color: var(--surface-panel); box-shadow: 0 0 0 3px rgba(31, 58, 38, .22); } #bewerbung .eingabe input::placeholder { color: var(--ink-quiet); opacity: 1; } .karrform__pflicht { font-size: 17.5px; line-height: 1.5; color: var(--ink-quiet); } .karrform__pflicht span { color: var(--tinte-ziegel); font-weight: 600; } #bewerbung .formular .tat:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: 3px; } /* Telefon und E-Mail unter dem WhatsApp-Knopf, gesetzt wie im Kontakt der Startseite: .direkt ist fuer dunklen Grund gebaut. */ #bewerbung .direkt { margin-top: clamp(24px, 2.6vw, 32px); max-width: 30rem; border-top-color: rgba(31,58,38,.2); } #bewerbung .direkt li { border-bottom-color: rgba(31,58,38,.2); } @media (min-width: 641px) { #bewerbung .direkt li { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); } } #bewerbung .direkt__marke { font-size: var(--t-klein); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-quiet); } #bewerbung .direkt__wert { font-size: 19px; font-weight: 600; color: var(--surface-panel); overflow-wrap: anywhere; } #bewerbung a.direkt__wert { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--tinte-ziegel); } #bewerbung a.direkt__wert:hover { color: var(--tinte-ziegel); } #bewerbung :where(a, button, input, textarea, select, summary):focus-visible { outline-color: var(--surface-panel); } /* Die Radios der Bewerbung stehen im selben Kleid wie die Kästchen — .wahl bringt die Form schon mit, nur der Punkt fehlte. */ .wahl input[type="radio"] { accent-color: var(--accent); width: 24px; height: 24px; flex: none; } /* Auswahl als gleich breite Kacheln wie im Anfrageformular der Startseite (.wahl__raster), seit 2026-09-19. Als Pillen brachen die sieben Punkte je nach Wortlaenge mal zu zweit, mal einzeln um, und das Blatt wurde in der schmalen Spalte unnoetig lang. */ #bewerbung .wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* Volle Breite (gestapelt): drei Spalten. Vier trennten "Haustechnik" und "Landschaft" mitten im Wort. */ @media (min-width: 860px) and (max-width: 1359px) { #bewerbung .wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #bewerbung .wahl label { display: flex; margin: 0; min-height: 56px; padding: 12px 16px; border-radius: var(--r-mittel); line-height: 1.3; } /* Unter 1360 px wird die Formularspalte zu schmal: das Blatt wuchs auf 2000-2700 px, und das Bild daneben haette als Streifen von 0,3 : 1 gestanden. Darunter steht alles untereinander: Einleitung, Blatt, dann Schritte und Bild nebeneinander, auf dem Telefon untereinander. */ @media (max-width: 1359px) { .karrform { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "wort" "blatt" "neben"; row-gap: clamp(36px, 5vw, 56px); } .karrform__lauf { max-width: 46ch; } .karrform__neben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; } .karrform__weiter { margin-top: 0; } .karrform__portraet { margin-top: 0; min-height: 380px; } } /* Auf dem Tablet steht die Einleitung zweispaltig: links Titel und Satz, rechts WhatsApp und Kontaktzeilen. Sonst blieb rechts neben dem Titel die halbe Breite leer. */ @media (min-width: 860px) and (max-width: 1359px) { .karrform__wort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "titel wapp" "lauf hinweis" "lauf direkt"; grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 4vw, 56px); align-items: start; } .karrform__wort > .kapitel__titel { grid-area: titel; } .karrform__lauf { grid-area: lauf; } .karrform__wapp { grid-area: wapp; margin-top: 0; justify-self: start; } .karrform__wapp-hinweis { grid-area: hinweis; } .karrform__wort > .direkt { grid-area: direkt; } } @media (max-width: 719px) { .karrform__neben { grid-template-columns: minmax(0, 1fr); } .karrform__portraet { min-height: 0; aspect-ratio: 1; } } @media (max-width: 480px) { .karrform__wapp { display: flex; width: 100%; gap: 14px; padding: 10px 18px 10px 10px; } .karrform__wapp .kontakt-ruf__zeichen { width: 48px; height: 48px; padding: 12px; } .karrform__wapp .kontakt-ruf__nr { font-size: 22px; } } @media (max-width: 900px) { .karriere__kopf { min-height: min(78vh, 560px); } } @media (max-width: 620px) { .karriere__wege .tat { width: 100%; } /* Tafel randlos, nur das Papierblatt polstert: die Felder bekommen die volle Breite (vorher 290 px bei 390). */ .seite:has(> #bewerbung) { padding: 0; } #bewerbung.tafel--flach { border-radius: 0; padding: 48px 0 56px; } #bewerbung :is(.karrform__wort, .karrform__neben) { padding-inline: var(--inset); } .karrform__wapp { padding-inline-end: 22px; } .karrform__blatt { padding: 22px 16px; border-radius: 0; } /* Pillen als zwei Spalten Kacheln statt einer Pille je Zeile */ #bewerbung .wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #bewerbung .wahl label { margin: 0; min-height: 52px; padding: 10px; gap: 8px; border-radius: var(--r-mittel); font-size: 17.5px; line-height: 1.25; overflow-wrap: anywhere; } } /* ── Leiste auf den Unterseiten ── Ihr Grund hängt seit dem Umbau stufenlos an --tief, das vom Skript beim Scrollen gesetzt wird. Am Seitenanfang steht dort 0, und auf der Startseite ist das richtig: die Leiste liegt in den hellen Aussparungen des Heros. Die Unterseiten haben keine Aussparungen. Ohne eigenen Grund stand die Leiste dort durchsichtig über Bild und Text. Deshalb hier fest auf 1 — !important, weil das Skript --tief als Inline-Wert schreibt und eine gewöhnliche Regel dagegen nicht ankäme. */ .leiste--seite { --tief: 1 !important; } /* Das Logo als Siegel auf dem Kopfbild. Es liegt als SVG obenauf, nicht im Bild — eingerechnete Schriftzüge verzerren, und beim nächsten Bildwechsel wäre die Arbeit noch einmal fällig. Seit 2026-09-18 auf derselben hellen Plakette wie in der Leiste statt auf Limette. */ .karriere__siegel { position: absolute; z-index: 2; inset-block-end: clamp(20px, 3vw, 36px); inset-inline-end: clamp(20px, 3vw, 40px); display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--r-pille); background: var(--papier); box-shadow: 0 0 0 1px rgba(20, 45, 25, .12), var(--schatten-3); } .karriere__siegel img { width: 46px; height: auto; display: block; } /* Der Hinweis ist rechtlich gewollt und soll gelesen werden: 15 px. */ .karriere__quelle { max-width: 52ch; margin-top: 22px; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .84); text-shadow: 0 1px 6px rgba(6, 16, 10, .85); } .karrform__portraet figcaption { z-index: 1; position: absolute; inset-block-end: 10px; inset-inline-start: 10px; padding: 5px 12px; border-radius: var(--r-pille); background: rgba(15, 30, 18, .78); font-size: 16.5px; color: rgba(255, 255, 255, .92); } /* Auf dem Telefon wandert das Siegel nach oben rechts: unten lag es auf dem Symbolbild-Hinweis. */ @media (max-width: 620px) { .karriere__siegel { inset-block: 16px auto; inset-inline-end: 16px; width: 58px; height: 58px; } .karriere__siegel img { width: 35px; } } /* ── Karriere-Streifen im Fuß ── Eigene Zeile über dem Kleingedruckten. Wer eine Arbeit sucht, liest den Fuß nicht Spalte für Spalte durch — der Weg muss ohne Suchen dastehen. 2026-09-18: ohne Versal-Etikett in Mono, ohne "Über uns"-Knopf (der steht jetzt in der Spalte "Unternehmen"). Runde 4: eine schlanke Zeile, Titel und Satz nebeneinander, der Knopf rechts. */ .fuss__karriere { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 clamp(14px, 1.6vw, 20px); padding: 12px 12px 12px clamp(18px, 2vw, 26px); border-radius: var(--r-mittel); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-light); } .fuss__karriere-wort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; } .fuss__karriere-titel { font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--ink-on-dark); } .fuss__karriere-satz { max-width: 60ch; font-size: 17.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); } .fuss__karriere .tat { flex: none; min-height: 48px; padding: 12px 24px; font-size: 18px; } @media (max-width: 620px) { .fuss__karriere { padding: 16px; } .fuss__karriere .tat { width: 100%; } } /* ═══════ DEIN JAHR ═══════ Zwölf Monatsspalten, eine Spur je Gewerk. Monatszeile und Spuren teilen sich dieselbe Spaltenaufteilung über --spalten — anders liefen Beschriftung und Balken auseinander, sobald die Schrift wächst. Grund Stein. Ganzjaehrige Arbeit steht als ruhiges Oliv, der Garten in Gras, der Winter in Wasserblau. Unter 620 px steht der Name ueber seinem Balken und die Monate schrumpfen auf den Anfangsbuchstaben: kein Querscrollen mehr, kein Name im Balken. */ .jahrband { margin-top: clamp(30px, 3.4vw, 46px); } .jahrband__tafel { --wort: 230px; --spalten: var(--wort) repeat(12, minmax(46px, 1fr)); position: relative; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 10px; scrollbar-width: thin; } .jahrband__monate, .jahrband__spur { min-width: 720px; } /* ── Monatszeile ── */ .jahrband__monate { list-style: none; margin: 0 0 12px; padding: 0 0 12px; display: grid; grid-template-columns: var(--spalten); border-bottom: 1px solid rgba(31, 58, 38, .2); } /* Das erste Feld bleibt frei: dort stehen unten die Namen der Gewerke. */ .jahrband__monate > li:first-child { grid-column-start: 2; } /* Ueber der Monatslinie: die Linie laeuft hinter der gewaehlten Pille durch und kreuzt ihre Beschriftung nicht mehr. */ .jahrband__monat { position: relative; z-index: 3; width: 100%; min-height: 44px; padding: 8px 4px; border: 0; border-radius: var(--r-mittel); background: none; cursor: pointer; font-family: inherit; font-size: 17.5px; font-weight: 500; color: var(--ink-quiet); transition: background-color .3s var(--kurve), color .3s var(--kurve); } .jahrband__monat.ist-da { background: var(--surface-panel); color: var(--ink-on-dark); font-weight: 600; } .jahrband__monat.ist-jetzt:not(.ist-da) { color: var(--surface-gras); font-weight: 600; box-shadow: inset 0 -2px 0 var(--surface-gras); } /* Der Ring liegt innen: aussen stiess er an den dunklen gewaehlten Monat nebenan und hatte dort 1 : 1. Auf dem gewaehlten Monat selbst Limette. */ .jahrband__monat:focus-visible { outline: 3px solid var(--surface-panel); outline-offset: -3px; } .jahrband__monat.ist-da:focus-visible { outline-color: var(--accent); } @media (hover: hover) { .jahrband__monat:not(.ist-da):hover { background: rgba(31, 58, 38, .08); color: var(--surface-panel); } } /* ── Spuren ── */ .jahrband__spuren { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .jahrband__spur { display: grid; grid-template-columns: var(--spalten); align-items: center; } .jahrband__wort { display: flex; align-items: center; gap: 10px; padding-inline-end: 18px; font-size: 17.5px; font-weight: 500; line-height: 1.3; color: var(--ink-body); } .jahrband__wort svg { flex: none; width: 22px; height: 22px; fill: var(--surface-gras); } .jahrband__gleis { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; height: 42px; border-radius: var(--r-mittel); background: repeating-linear-gradient(to right, rgba(31, 58, 38, .08) 0 1px, transparent 1px calc(100% / 12)); } .jahrband__balken { height: 24px; border-radius: var(--r-pille); background: var(--surface-gras); } .jahrband__balken--gruen { background: var(--surface-gras); } /* Ganzjaehrige Arbeit als ruhige duenne Linie, die Saisonarbeit als kraeftiger Balken: das Auge findet sofort, was sich im Jahr veraendert. */ .jahrband__balken--ganz { height: 10px; background: var(--ink-quiet); } .jahrband__balken--winter { background: var(--tinte-wasser); } /* Der gewählte Monat als senkrechter Strich über alle Spuren. Seine Lage rechnet sich aus --stelle (1–12), damit sie an der Spaltenbreite hängt und nicht an einer festen Zahl. Wald statt Limette: Limette ist auf hellem Grund als Linie kaum zu sehen. */ .jahrband__marke { position: absolute; z-index: 2; inset-block: 4px 14px; inset-inline-start: calc(var(--wort) + 4px + (100% - var(--wort) - 8px) * (var(--stelle, 1) - .5) / 12); width: 2px; margin-inline-start: -1px; background: var(--surface-panel); pointer-events: none; transition: inset-inline-start .45s var(--kurve); } .jahrband__satz { display: block; margin-top: 20px; padding: 18px 22px; border-radius: var(--r-mittel); background: var(--papier); box-shadow: inset 0 0 0 1px var(--line-dark); color: var(--ink-body); font-size: 18px; line-height: 1.55; } .jahrband__satz-marke { font-weight: 600; color: var(--surface-panel); } /* ── Die vier Gründe ── Titel und zwei Saetze statt Riesenziffer mit Etikett. 2026-09-19 (Kundenwunsch: deutlich groesser, auf allen Geraeten sauber): vorher auto-fit mit 230 px Mindestbreite. Das ergab je nach Fenster vier, drei plus eine oder zwei Spalten; bei 820 und 1024 px stand der vierte Grund allein in der zweiten Reihe, und die Spalten waren fuer groessere Schrift zu schmal (rund 270 px). Jetzt fest: ab 720 px zwei mal zwei, darunter eine Spalte. Titel 28-40 px statt 22-28, Text 20-22,5 statt 18,5 px. */ .karrgruende { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px) clamp(40px, 6vw, 96px); } @media (min-width: 720px) { .karrgruende { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .karrgrund { min-width: 0; padding-top: clamp(22px, 2.4vw, 32px); border-top: 2px solid rgba(31, 58, 38, .28); } .karrgrund__titel { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.024em; color: var(--surface-panel); text-wrap: balance; } .karrgrund__lauf { margin-top: clamp(12px, 1.4vw, 18px); max-width: 40ch; font-size: clamp(20px, 1.1rem + .4vw, 22.5px); line-height: 1.55; color: var(--ink-body); text-wrap: pretty; } @media (max-width: 620px) { .jahrband__tafel { --wort: 0px; --spalten: 0px repeat(12, minmax(0, 1fr)); overflow: visible; } .jahrband__monate, .jahrband__spur { min-width: 0; } .jahrband__monat { padding: 8px 0; font-size: 16.5px; border-radius: var(--r-klein); } .jahrband__rest { display: none; } .jahrband__spuren { gap: 14px; } .jahrband__spur { row-gap: 6px; } /* Der Name liegt ueber dem Monatsstrich und deckt ihn mit dem Grund ab */ .jahrband__wort { grid-column: 1 / -1; justify-self: start; position: relative; z-index: 3; padding-inline-end: 10px; background: var(--stein); } .jahrband__gleis { height: 32px; } .jahrband__balken { height: 20px; } .jahrband__satz { font-size: 18.5px; padding: 16px 18px; } } /* ═══════ DER WEG DER BEWERBUNG ═══════ Wechselschritt: links, was der Bewerber tut, rechts, was wir tun. Die Schiene läuft in der Mitte, ihr Zug wächst beim Scrollen mit. Seit 2026-09-18 ohne Leuchtkugel, ohne Glow, ohne Puls und ohne Federkurve. Die Nummer der Etappe (Kunden-PDF: 01–04) steht in der Wegmarke auf der Schiene, das Wort "Sie / Wir / Gemeinsam" als normales Wort daneben statt als Mono-Pille ueber dem Titel. Alle Karten auf Papier, Grund Nebel. */ .feld.karrweg__feld { background: var(--nebel); } .karrweg { --steg: clamp(44px, 4.4vw, 68px); position: relative; list-style: none; margin: clamp(34px, 4vw, 54px) 0 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 30px); } /* Ohne Skript und bei Bewegungsvorbehalt steht der fertige Zustand da: Zug voll, alle Marken gefüllt. Erst main.js setzt .karrweg--lebt und nimmt zurück, was die Linie noch nicht erreicht hat. */ .karrweg__schiene { position: absolute; z-index: 0; inset-block: 20px; inset-inline-start: 50%; width: 3px; margin-inline-start: -1.5px; border-radius: var(--r-pille); background: rgba(31, 58, 38, .14); } /* Wächst über scaleY statt über die Höhe — das bleibt beim Scrubben auf der Grafikkarte und ruckelt nicht. */ .karrweg__zug { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--surface-gras); transform-origin: top; } .karretappe { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } /* Die Wegmarke mit der Nummer der Etappe. Die Füllung ist eine eigene Ebene, damit sie beim Erreichen von innen aufgehen kann. */ .karretappe__punkt { position: absolute; z-index: 2; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pille); background: var(--papier); box-shadow: inset 0 0 0 2px var(--surface-gras); color: var(--ink-on-dark); font-size: 18.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; isolation: isolate; } .karretappe__punkt::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface-gras); } /* Wer handelt: als Wort neben der Marke, auf der freien Seite der Schiene */ .karretappe__wer { position: absolute; inset-block-start: 50%; translate: 0 -50%; font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--surface-panel); } .karretappe--sie .karretappe__wer, .karretappe--gemeinsam .karretappe__wer { inset-inline-start: calc(50% + 36px); } .karretappe--wir .karretappe__wer { inset-inline-end: calc(50% + 36px); } /* Kurzer Steg von der Marke zur Karte */ .karretappe::before { content: ''; position: absolute; inset-block-start: 50%; height: 2px; margin-block-start: -1px; width: var(--steg); background: var(--surface-gras); } .karretappe--sie::before, .karretappe--gemeinsam::before { inset-inline-end: 50%; transform-origin: 100% 50%; } .karretappe--wir::before { inset-inline-start: 50%; transform-origin: 0 50%; } .karrweg--lebt .karretappe::before { transition: scale .5s cubic-bezier(.25, 1, .5, 1); } .karrweg--lebt .karretappe--erreicht::before { transition-delay: .15s; } .karrweg--lebt .karretappe__punkt { transition: color .4s ease, box-shadow .4s ease; } .karrweg--lebt .karretappe__punkt::before { transition: scale .5s cubic-bezier(.25, 1, .5, 1), opacity .3s ease; } /* Noch nicht erreicht: blasser Ring, Nummer in Grau, keine Füllung, kein Steg. */ .karrweg--lebt .karretappe:not(.karretappe--erreicht) .karretappe__punkt { color: var(--ink-quiet); box-shadow: inset 0 0 0 2px rgba(31, 58, 38, .28); } .karrweg--lebt .karretappe:not(.karretappe--erreicht) .karretappe__punkt::before { scale: 0; opacity: 0; } .karrweg--lebt .karretappe:not(.karretappe--erreicht)::before { scale: 0 1; } .karretappe__blatt { position: relative; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-mittel); background: var(--papier); box-shadow: var(--schatten-1); } .karretappe--sie .karretappe__blatt, .karretappe--gemeinsam .karretappe__blatt { grid-column: 1; margin-inline-end: var(--steg); } .karretappe--wir .karretappe__blatt { grid-column: 2; margin-inline-start: var(--steg); } .karretappe__titel { font-size: clamp(21px, .5vw + 19px, 24px); font-weight: 600; line-height: 1.25; letter-spacing: -.012em; color: var(--surface-panel); } .karretappe__lauf { margin-top: 10px; font-size: 18.5px; line-height: 1.6; color: var(--ink-body); } /* Der Zeitversprecher am ersten Schritt. Er ist die eigentliche Zusage der Seite — "unter einer Minute" — und steht deshalb als eigene Zeile unter dem Titel statt in Klammern dahinter. */ .karretappe__wink { display: inline-block; margin-top: 10px; padding: 4px 13px; border-radius: var(--r-pille); background: var(--accent); font-size: 17.5px; font-weight: 600; color: var(--ink-on-accent); } /* Unter 860 px läuft der Weg einspaltig, die Schiene an den linken Rand. Das Wort "Sie / Wir" steht dann neben der Marke ueber der Karte. */ @media (max-width: 860px) { .karrweg__schiene { inset-inline-start: 21px; } .karretappe { grid-template-columns: minmax(0, 1fr); } .karretappe__punkt { inset-inline-start: 21px; inset-block-start: 21px; } .karretappe__wer, .karretappe--sie .karretappe__wer, .karretappe--gemeinsam .karretappe__wer, .karretappe--wir .karretappe__wer { position: static; translate: none; margin: 10px 0 12px 58px; font-size: 18.5px; } .karretappe::before { display: none; } .karretappe--sie .karretappe__blatt, .karretappe--gemeinsam .karretappe__blatt, .karretappe--wir .karretappe__blatt { grid-column: 1; margin-inline: 58px 0; } } /* ═══════ TEAM (Startseite) ═══════ Umbau 2026-09-18: Grund Klinker hell, der warme Ton zwischen dem Stein der Galerie und dem Nebel des Jahresvertrags. Hinter dem Bild steht ein Farbfeld in tieferem Klinker, vom linken Rand der Seite bis unter die Mitte des Fotos und ueber die volle Hoehe der Sektion: das Bild liegt halb auf dem Feld, halb auf dem Grund. Die Sektion bekommt so eine Tiefe und eine Richtung, ohne eine weitere Flaeche oder Linie. Die Ueberschrift steht als drei Zeilen, ein Wort je Zeile (Wortlaut aus der Mail des Kunden, nur der Umbruch ist gesetzt). Die "20" stand als Plakette ueber der Ueberschrift: grosse Ziffer, kleines Etikett, genau das Erfahrungs-Abzeichen, das PRODUCT.md als Anti-Referenz nennt. Die Zahl bleibt, aber als erste Zeile der Faktentabelle, wo sie als Angabe steht und nicht als Siegel. Erfahrung des Inhabers, nicht Firmenalter (Kommentar im Markup). Die Regeln fuer .mensch und .fakten teilt die Startseite mit der Seite Ueber uns; alles hier gilt deshalb nur unter #team. */ #team { position: relative; isolation: isolate; overflow: clip; background: var(--klinker-hell); } #team::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 0; /* linker Rand der Spalte + gut die halbe Bildbreite */ width: calc((100% - min(var(--breit), 100% - 2 * var(--inset))) / 2 + min(480px, 38vw) * .58); background: #EACFC0; } #team .mensch { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); } /* Das Foto hat ein kuehles Studiograu als Grund. Damit es nicht als kalte Flaeche auf dem Klinker steht, liegt es in einem Passepartout aus tieferem Klinker, und eine sehr leichte warme Tonung (Multiplizieren, 22 %) nimmt dem Grau die Kaelte, ohne Haut und Jacke zu verfaelschen. Kommt das echte Inhaberfoto, kann die Tonung weg. */ #team .mensch__bild { --rand: clamp(10px, 1.1vw, 16px); position: relative; padding: var(--rand); background: #E4C4B1; box-shadow: var(--schatten-1); } #team .mensch__bild img { border-radius: calc(var(--tafel-r) - var(--rand)); } #team .mensch__bild::after { content: ""; position: absolute; inset: var(--rand); border-radius: calc(var(--tafel-r) - var(--rand)); background: #F0C6AA; mix-blend-mode: multiply; opacity: .22; pointer-events: none; } #team .kapitel__titel { line-height: 1; } #team .mensch__lauf { margin-top: 26px; max-width: 48ch; font-size: var(--t-body); line-height: var(--z-text); color: var(--ink-body); } #team .fakten { margin-top: 34px; border-top-color: rgba(31, 58, 38, .2); } #team .fakten > div { border-bottom-color: rgba(31, 58, 38, .2); } /* Etiketten in Satzschreibung statt gesperrter Versalien */ #team .fakten dt { padding-top: 1px; font-size: var(--t-klein); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-quiet); } #team .fakten dd { font-size: 19px; line-height: 1.45; } /* Auf einer Spalte steht das Feld als Band oben hinter dem Bild */ @media (max-width: 900px) { #team .mensch { grid-template-columns: minmax(0, 1fr); } #team::before { inset-inline-end: 0; width: auto; inset-block-end: auto; height: min(52%, 560px); } } /* Textlink auf hellem Grund in Ziegel, nicht mit Limettenstrich: Limette ist auf Hell keine Linienfarbe. Beim Anfahren laeuft der Pfeil mit. */ .mensch__weg { margin-top: 26px; font-size: 18.5px; font-weight: 600; } .mensch__weg a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tinte-ziegel); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(147, 63, 32, .45); transition: text-decoration-color .3s var(--kurve), color .3s var(--kurve); } .mensch__weg a::after { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .45s var(--kurve); } .mensch__weg a:focus-visible { outline: 3px solid var(--tinte-ziegel); outline-offset: 4px; border-radius: var(--r-klein); } @media (hover: hover) { .mensch__weg a:hover { color: var(--surface-panel); text-decoration-color: currentColor; } .mensch__weg a:hover::after { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .mensch__weg a::after { transition: none; } } /* ── Kopf der Über-uns-Seite ── Zweispaltig (2026-09-18): links "20 Jahre Erfahrung" als eine Ueberschrift in der H1-Groesse der Unterseiten, darunter die Zusage und der Text; rechts das Bild. Vorher stand hier eine 220-px-Ziffer mit Etikett und die rechte Haelfte blieb leer. */ /* Seit Runde 2 eine geteilte Flaeche: links Kalk mit Titel und Text, rechts das Bild bis an den rechten Rand und unter die Leiste, unten links gerundet wie eine Tafelecke. Das Raster haelt die Textkante auf derselben Linie wie die uebrigen Abschnitte (.mitte, 1240 px). */ .ueberkopf { position: relative; } .ueberkopf__raster { display: grid; grid-template-columns: minmax(var(--inset), 1fr) minmax(0, 560px) minmax(0, 680px) minmax(var(--inset), 1fr); min-height: clamp(640px, 94vh, 920px); } .ueberkopf__satz { grid-column: 2; align-self: center; min-width: 0; padding: clamp(140px, 18vh, 180px) clamp(40px, 5vw, 88px) clamp(64px, 8vw, 104px) 0; } .ueberkopf__titel { max-width: 11ch; font-size: var(--t-h1, clamp(2.5rem, 1.35rem + 3.9vw, 4.75rem)); font-weight: 600; line-height: .98; letter-spacing: -.035em; color: var(--surface-panel); } .ueberkopf__lauf { max-width: 56ch; margin-top: 16px; font-size: clamp(18px, .3vw + 16.8px, 19.5px); line-height: 1.62; color: var(--ink-body); } /* Die Zusage ueber dem Fliesstext: eine Stufe groesser, aber als Absatz, nicht als zweite Ueberschrift. */ .ueberkopf__lauf--stark { margin-top: clamp(22px, 2.6vw, 34px); max-width: 30ch; font-size: var(--t-lead, clamp(1.1875rem, 1rem + .5vw, 1.4375rem)); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--surface-panel); } .ueberkopf__bild { grid-column: 3 / 5; position: relative; margin: 0; overflow: hidden; border-radius: 0 0 0 var(--r-gross); background: var(--stein); } .ueberkopf__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; } /* Die sechs Bereiche in ihren Bereichsfarben, ohne Symbol */ .ueberwerke { list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ueberwerke li { padding: 9px 16px; border-radius: var(--r-pille); background: var(--stein); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--surface-panel); } .ueberwerke li.ueberwerke--nebel { background: var(--nebel); } .ueberwerke li.ueberwerke--stein { background: var(--stein); } .ueberwerke li.ueberwerke--moos { background: var(--moos-hell); } .ueberwerke li.ueberwerke--klinker { background: var(--klinker-hell); } /* ── Haltung ── Drei Zeilen ueber die volle Breite: Titel links, Text und Weg rechts, Haarlinie dazwischen. Keine Karten, keine Nummern. */ .feld.ueberhaltung__feld { background: var(--nebel); } #mensch .fakten dt { font-size: 17.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--surface-panel); } .ueberhaltung { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(31, 58, 38, .24); } .ueberhalt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px clamp(32px, 5vw, 88px); padding-block: clamp(28px, 3.4vw, 46px); border-bottom: 1px solid rgba(31, 58, 38, .24); } .ueberhalt__titel { grid-row: 1 / span 2; font-size: var(--t-h3, clamp(1.375rem, 1.143rem + .952vw, 2rem)); font-weight: 600; line-height: 1.14; letter-spacing: -.02em; color: var(--surface-panel); text-wrap: balance; } .ueberhalt__lauf { max-width: 60ch; font-size: 18px; line-height: 1.65; color: var(--ink-body); } .ueberhalt__weg { justify-self: start; font-size: 18.5px; font-weight: 600; color: var(--surface-panel); text-decoration: underline; text-decoration-color: var(--surface-gras); text-decoration-thickness: 2px; text-underline-offset: 5px; } .ueberhalt__weg::after { content: ' \2192'; } @media (hover: hover) { .ueberhalt__weg:hover { text-decoration-color: var(--surface-panel); } } @media (max-width: 900px) { .ueberkopf__raster { grid-template-columns: minmax(0, 1fr); min-height: 0; } .ueberkopf__bild { grid-column: 1; grid-row: 1; height: min(60vh, 540px); border-radius: 0 0 var(--r-gross) var(--r-gross); } .ueberkopf__satz { grid-column: 1; padding: clamp(32px, 8vw, 56px) var(--inset) clamp(56px, 12vw, 88px); } .ueberhalt { grid-template-columns: minmax(0, 1fr); } .ueberhalt__titel { grid-row: auto; } } /* ── Wege ── Der Titel steht ueber die volle Breite, Satz und Knoepfe darunter. Neben drei Knoepfen blieben dem Titel 480 px, er brach dreizeilig mit einem verwaisten "Sie". Grund Moos: der Schluss jeder Unterseite (Ueber uns, Ratgeber, Beitraege) hebt sich vom Abschnitt davor ab. */ .feld.ueberwege__feld { margin: 0 var(--inset) var(--inset); border-radius: var(--r-gross); background: var(--limette-hell); } /* Der Hauptknopf kehrt sich auf diesem Grund um: Wald mit heller Schrift, beim Zeigen fuellt er sich mit Limette. */ .ueberwege__feld .tat:not(.tat--klar) { color: var(--ink-on-dark); background-image: linear-gradient(to bottom, var(--surface-panel) 50%, var(--accent) 50%); } .ueberwege__feld .tat:not(.tat--klar):hover, .ueberwege__feld .tat:not(.tat--klar):focus-visible { color: var(--ink-on-accent); } .ueberwege__feld .tat--klar { border-color: rgba(31, 58, 38, .55); } /* Auf Kalk folgt die Tafel direkt; nach einem getoenten Abschnitt braucht sie oben denselben Rand wie an den Seiten. */ .feld:not(.feld--hell) + .feld.ueberwege__feld, .ueberhaltung__feld + .feld.ueberwege__feld { margin-top: var(--inset); } .ueberwege { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 2.4vw, 30px) clamp(28px, 4vw, 64px); align-items: end; } .ueberwege__wort { display: contents; } .ueberwege .kapitel__titel { grid-column: 1 / -1; max-width: 22ch; text-wrap: balance; } .ueberwege__lauf { max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--ink-body); } .ueberwege__reihe { display: flex; flex-wrap: wrap; gap: 12px; } .ueberwege__reihe .tat { min-height: 60px; padding: 18px 28px; font-size: 18.5px; gap: 10px; } .ueberwege__blatt { width: 18px; height: 18px; fill: currentColor; } @media (max-width: 900px) { /* Untereinander braucht die Knopfreihe mehr Luft als nebeneinander. Der gap des Rasters ist fuer zwei Spalten gedacht: quer wirken 22 bis 27 px grosszuegig, senkrecht kleben Text und Knoepfe damit aneinander. Gemessen am 2026-09-08 bei 900, 760, 620 und 390 px: 27, 23, 22, 22 px zwischen dem letzten Satz und der ersten Schaltflaeche. Der eigene Zeilenabstand loest das, ohne den Spaltenabstand anzufassen. */ .ueberwege { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 4vw, 30px); } .ueberwege__reihe { margin-top: 8px; } .ueberwege__reihe { gap: 14px; } } @media (max-width: 620px) { .ueberwege__reihe .tat { width: 100%; } } /* ═══════ SEITENÜBERGÄNGE ═══════ 2026-09-19 auf Kundenwunsch, zwei Arten: 1. Sprung in der Seite, nur aus der Leiste (Leiste → Bilder), "Portal" — Links im Inhalt scrollen weich: ein Wald-Kreis waechst ab dem Klickpunkt, dahinter springt die Seite, dann hebt sich der Vorhang (.sprungvorhang, gesteuert von main.js im Lenis-Block). Er liegt unter der Leiste, das Menue bleibt bedienbar. 2. Wechsel der Seite, "Vorhang": beim Klick zieht main.js einen Vorhang zu (.uebergang), die neue Seite startet verdeckt (html.ankunft, das setzt ein kleines Skript im vor dem ersten Bild) und hebt den Vorhang weg. Beide Haelften zeigen dasselbe Bild, deshalb wirkt es wie ein durchgehender Uebergang. Das laeuft ohne View Transitions, also in jedem Browser und auch aus einer lokalen Datei; die erste Fassung (@view-transition) lief dort gar nicht. Zur Karriereseite gibt es eine eigene Fassung: Limette und Wald schieben sich nacheinander hoch, mit dem Wort "Karriere". Bei "Bewegung reduzieren" gibt es keinen Uebergang. */ /* ── Vorhang beim Sprung in der Seite ── z-index 99: knapp unter der Leiste (100). Die Formen setzt main.js (Kreis ab Klickpunkt, dann nach oben weg); hier nur Grund und Ruhelage. */ .sprungvorhang { position: fixed; inset: 0; z-index: 99; background: var(--surface-panel); clip-path: circle(0 at 50% 50%); pointer-events: none; } /* ── Vorhang beim Seitenwechsel ── Das Siegel (Logo auf weisser Scheibe, 88 px) sitzt in beiden Haelften an derselben Stelle: beim Zuziehen als Element, bei der Ankunft als Hintergrund der Ebene. Bei der Karriere-Fassung steht es 56 px ueber der Mitte, das Wort 64 px darunter. */ .uebergang { --ue-siegel-y: 50%; position: fixed; inset: 0; z-index: 2147483000; cursor: progress; } .uebergang__siegel { position: absolute; left: 50%; top: var(--ue-siegel-y); width: 88px; height: 88px; margin: -44px 0 0 -44px; display: grid; place-items: center; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.6); animation: ue-siegel .38s cubic-bezier(.34, 1.56, .64, 1) .26s forwards; } .uebergang__siegel img { width: 56px; height: auto; display: block; } @keyframes ue-siegel { to { opacity: 1; transform: scale(1); } } /* Standard: ein Wald-Kreis waechst ab dem Klickpunkt */ .uebergang--standard { background: var(--surface-panel); clip-path: circle(0 at var(--ue-x, 50%) var(--ue-y, 50%)); animation: ue-kreis .56s cubic-bezier(.7, 0, .3, 1) forwards; } @keyframes ue-kreis { to { clip-path: circle(var(--ue-r, 150vmax) at var(--ue-x, 50%) var(--ue-y, 50%)); } } /* Karriere: erst Limette, dann Wald mit Siegel und Wort, von unten */ .uebergang--karriere { --ue-siegel-y: calc(50% - 56px); } .uebergang__lage { position: absolute; inset: 0; transform: translateY(100%); animation: ue-lage .5s cubic-bezier(.7, 0, .3, 1) forwards; } .uebergang__lage--limette { background: var(--accent); } .uebergang__lage--wald { background: var(--surface-panel); animation-delay: .14s; } .uebergang--karriere .uebergang__siegel { animation-delay: .5s; } .uebergang__wort { position: absolute; left: 0; right: 0; top: calc(50% + 64px); transform: translateY(-50%); font-family: var(--schrift); font-weight: 600; font-size: clamp(48px, 9vw, 128px); line-height: 1; letter-spacing: -.04em; text-align: center; color: var(--accent); opacity: 0; animation: ue-wort .42s cubic-bezier(.22, 1, .36, 1) .54s forwards; } @keyframes ue-lage { to { transform: translateY(0); } } @keyframes ue-wort { from { opacity: 0; transform: translateY(calc(-50% + 18px)); } to { opacity: 1; transform: translateY(-50%); } } /* Heimkehr (Klick auf "Dein Immo Service"): Wald-Kreis aus dem Logo, das Logo fliegt in die Mitte (112 px, 48 px ueber der Mitte), der Name steht 52 px unter der Mitte. Die Bewegungen fuehrt main.js (heimkehrZu), hier steht nur das Endbild. */ .uebergang__grund { position: absolute; inset: 0; background: var(--surface-panel); clip-path: circle(0 at 50% 50%); } .uebergang__marke { position: absolute; left: calc(50% - 56px); top: calc(50% - 104px); width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 10px 34px rgba(6, 16, 10, .35); } .uebergang__marke img { width: 72px; height: auto; display: block; } .uebergang__name { position: absolute; left: 0; right: 0; top: calc(50% + 52px); transform: translateY(-50%); opacity: 0; font-family: var(--schrift); font-weight: 600; font-size: clamp(30px, 4.4vw, 58px); line-height: 1; letter-spacing: -.03em; text-align: center; color: #fff; } /* Ankunft: dieselben Bilder als Ebenen am Wurzelelement, sichtbar ab dem ersten Bild der neuen Seite. Die Animation laeuft allein aus dem Stylesheet; faellt das Skript aus, hebt sich der Vorhang trotzdem. */ html.ankunft::before, html.ankunft::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; } html.ankunft--standard::after { background: url("../img/logo.svg") center / 56px auto no-repeat, radial-gradient(circle 44px at 50% 50%, #fff 97%, transparent 100%), var(--surface-panel); animation: ankunft-hoch .72s cubic-bezier(.7, 0, .3, 1) .1s forwards; } html.ankunft--karriere::before { background: var(--accent); animation: ankunft-hoch .78s cubic-bezier(.7, 0, .3, 1) .34s forwards; } html.ankunft--karriere::after { content: "Karriere"; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding-top: 128px; background: url("../img/logo.svg") 50% calc(50% - 56px) / 56px auto no-repeat, radial-gradient(circle 44px at 50% calc(50% - 56px), #fff 97%, transparent 100%), var(--surface-panel); font-family: var(--schrift); font-weight: 600; font-size: clamp(48px, 9vw, 128px); line-height: 1; letter-spacing: -.04em; color: var(--accent); animation: ankunft-hoch .78s cubic-bezier(.7, 0, .3, 1) .12s forwards; } /* Startseite nach der Heimkehr: vorne Logo und Name (ohne Grund), die sich zuerst nach oben aufloesen, dahinter der Wald-Vorhang, der sich hebt. */ html.ankunft--start::before { background: var(--surface-panel); animation: ankunft-hoch .8s cubic-bezier(.7, 0, .3, 1) .42s forwards; } html.ankunft--start::after { content: "Dein Immo Service"; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding-top: 104px; background: url("../img/logo.svg") 50% calc(50% - 48px) / 72px auto no-repeat, radial-gradient(circle 56px at 50% calc(50% - 48px), #fff 97%, transparent 100%); font-family: var(--schrift); font-weight: 600; font-size: clamp(30px, 4.4vw, 58px); line-height: 1; letter-spacing: -.03em; color: #fff; animation: ankunft-marke .42s ease-in .12s forwards; } @keyframes ankunft-marke { to { opacity: 0; transform: translateY(-26px) scale(.96); } } /* Der Vorhang hebt sich und rundet dabei seine Unterkante */ @keyframes ankunft-hoch { to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 14vh 14vh; } } @media (prefers-reduced-motion: reduce) { .uebergang, html.ankunft::before, html.ankunft::after { display: none; } }