/* ========================================================================== Glaserei Honstein — alle Merkmale und alle Bausteine. Aller Look steckt in den Merkmalen unter :root. Kein Baustein verwendet eine feste Farbe. Ein Wechsel der Farbwelt ist deshalb ein Eingriff an genau einer Stelle — dem :root-Block — plus theme-color im und favicon.svg. Reihenfolge: Schriften · Merkmale · Grundlagen · Bausteine · Abschnitte. ========================================================================== */ /* ---------- 1. Schriften — lokal, keine Verbindung zu Google ------------- */ @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- 2. Merkmale ------------------------------------------------- */ :root { /* Flächen. --bg ist das Reinweiß vom Dach des Firmenfahrzeugs, gemessen mit werkzeug/messen.js. Kein ausgesuchter Grauton. */ --bg: #f1f4f6; --bg-2: #e4e9ec; --surface: #ffffff; --bg-deep: #12171b; --bg-deep-2: #1b2228; /* Text */ --ink: #12171b; --text-soft: #39434b; --text-mute: #4e5860; --on-dark: #f1f4f6; --on-dark-soft: #c3ccd2; /* Graphit — der Lack des SY·GH 7, drei gemessene Stellen. Trägt den Betrieb: Marke, Linien, dunkle Flächen. */ --graphit: #424850; --graphit-tief: #292d35; --graphit-hell: #677077; /* Glasgrün — die Kante einer Floatglasscheibe, am Bild gemessen. Trägt das Material: die einzige Akzentfarbe der Seite. --accent-2 gilt AUSSCHLIESSLICH auf dunklem Grund; auf hellem ist er zu schwach, dort gilt --accent-strong. */ --accent: #0f4a44; --accent-strong: #0b3a35; --accent-2: #7fc7b8; --on-accent: #ffffff; /* Linien und Schatten */ --line: #d3d9de; --line-strong: #7c858c; /* Rand echter Bedienelemente — muss 3:1 halten */ --shadow: 0 1px 2px rgb(18 23 27 / 0.06), 0 8px 24px -12px rgb(18 23 27 / 0.18); --shadow-tief: 0 2px 4px rgb(18 23 27 / 0.08), 0 24px 48px -24px rgb(18 23 27 / 0.28); /* Der Schein einer Glaskante im Licht. Nur auf dunklem Grund, nur am Anrufknopf — die Begruendung steht in Abschnitt 37. Die Farbe ist --accent-2 mit Deckung; box-shadow kann kein Merkmal mit Alpha nehmen, deshalb steht sie hier ausgeschrieben und nicht im Baustein. */ --schein-glas: 0 0 0 1px rgb(127 199 184 / .28), 0 6px 30px -6px rgb(127 199 184 / .38); --schein-glas-stark: 0 0 0 1px rgb(127 199 184 / .42), 0 8px 34px -6px rgb(127 199 184 / .5); /* Schriften — echtes Paar, nicht eine Familie in zwei Größen. */ --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* Maß */ --maxw: 1180px; --maxw-text: 68ch; --gutter: clamp(20px, 5vw, 56px); --radius: 2px; /* Glas hat scharfe Kanten. */ --radius-sm: 1px; --rahmen: 10px; /* Breite des weißen Rahmens um große Bilder. */ --sprosse: 3px; /* Breite der Sprosse, die die Scheibe teilt. */ --kante: 4px; /* Breite der grünen Glaskante. */ /* Abstandsskala — jeder Abstand auf der Seite kommt hieraus. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; /* Höhe der festen Anrufleiste am Handy — Fußzeile hält Abstand dazu. */ --leiste: 66px; } /* ---------- 3. Grundlagen ----------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* [hidden] muss stärker sein als jede Klasse. Die Standardregel des Browsers ist display:none mit sehr niedrigem Gewicht — eine Klasse wie .taste { display:inline-flex } sticht sie aus. Im Anfrage-Assistenten standen dadurch alle drei Tasten gleichzeitig da, darunter zwei gefüllte nebeneinander. Sichtbar nur im Bildschirmfoto. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; /* Sprungmarken sollen nicht unter der klebenden Kopfleiste landen. */ scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; /* 17 px */ line-height: 1.7; font-feature-settings: 'kern' 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } @media (min-width: 900px) { body { font-size: 1.125rem; } /* 18 px */ } img, svg, video { max-width: 100%; } img { height: auto; display: block; } a { color: var(--accent-strong); text-underline-offset: 3px; } a:hover { color: var(--accent); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -0.018em; } h1 { font-size: clamp(2.1rem, 6.2vw, 3.9rem); line-height: 1.04; letter-spacing: -0.028em; font-weight: 700; } h2 { font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.1; letter-spacing: -0.024em; } h3 { font-size: clamp(1.12rem, 2.1vw, 1.4rem); line-height: 1.25; } p { margin: 0; } /* Zeilenlänge im Fließtext: 60 bis 75 Zeichen. */ .satz { max-width: var(--maxw-text); } /* Tastaturbedienung muss sichtbar sein — auf jedem Untergrund. */ :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: var(--radius-sm); } .auf-hell :focus-visible, .hell :focus-visible { outline-color: var(--accent); } /* Sprung zum Hauptinhalt */ .sprung { position: absolute; left: var(--s4); top: var(--s4); z-index: 200; transform: translateY(-200%); background: var(--accent); color: var(--on-accent); padding: var(--s3) var(--s5); border-radius: var(--radius); font-weight: 600; text-decoration: none; } .sprung:focus { transform: translateY(0); color: var(--on-accent); } .bahn { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* Nur für Bildschirmleser */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 4. Signatur A: die Glaskante -------------------------------- */ /* Floatglas ist an der Kante grün — das ist der Eisenoxid-Anteil, kein Effekt. Dieser Strich zitiert genau das: eine Scheibe, von der Seite gesehen. Er sitzt links an jedem großen Bild und an jedem hervorgehobenen Block und ist das einzige wiederkehrende Zierdetail neben dem Rahmen. */ .kante-links { position: relative; padding-left: var(--s5); } .kante-links::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--kante); background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 42%, var(--accent-strong) 100%); } /* ---------- 5. Signatur B: Rahmen mit Sprosse --------------------------- */ /* Vorbild ist das eigene Schaufenster in der Sudweyher Straße: jede große Aufnahme sitzt in einem weißen Rahmen, und eine Sprosse teilt die Scheibe. Technisch ist die Sprosse die Lücke eines Rasters, unter der die Rahmenfarbe durchscheint — kein aufgelegter Balken. */ .rahmen { background: var(--surface); padding: var(--rahmen); box-shadow: var(--shadow); border-radius: var(--radius); } .scheibe { display: grid; grid-template-columns: 1fr var(--sprosse) 2fr; overflow: hidden; background: var(--surface); } .scheibe > .glas { overflow: hidden; position: relative; } .scheibe > .glas img { width: 100%; height: 100%; object-fit: cover; } .scheibe > .steg { background: var(--surface); } /* ---------- 6. Dachzeile und Abschnittsköpfe ---------------------------- */ .dachzeile { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-body); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 var(--s4); } .dachzeile::before { content: ''; width: 26px; height: 3px; background: var(--accent); flex: none; } .auf-dunkel .dachzeile { color: var(--accent-2); } .auf-dunkel .dachzeile::before { background: var(--accent-2); } .kopf { margin-bottom: var(--s7); } .kopf .satz { margin-top: var(--s4); color: var(--text-soft); } /* ---------- 7. Tasten --------------------------------------------------- */ /* Zwei Stufen, mehr nicht. Der Anruf ist immer gefüllt, die Anfrage immer umrandet. Nie zwei gefüllte Tasten nebeneinander — das ist keine Wahl, sondern eine Unentschlossenheit, die der Besucher ausbaden muss. */ .taste { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 52px; padding: var(--s3) var(--s6); border: 2px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-size: 1.0625rem; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .taste svg { flex: none; } .taste-anruf { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .taste-anruf:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); } .taste-anruf .nummer { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .taste-anfrage { background: transparent; border-color: var(--accent); color: var(--accent-strong); } .taste-anfrage:hover { background: var(--accent); color: var(--on-accent); } .auf-dunkel .taste-anfrage { border-color: var(--accent-2); color: var(--on-dark); } .auf-dunkel .taste-anfrage:hover { background: var(--accent-2); color: var(--bg-deep); } .tasten { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; } /* Textverweis mit Pfeil — für „Mehr erfahren" */ .weiter { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--accent-strong); text-decoration: none; min-height: 44px; } .weiter::after { content: '→'; transition: transform .15s ease; } .weiter:hover::after { transform: translateX(3px); } .auf-dunkel .weiter { color: var(--accent-2); } /* ---------- 8. Öffnungsstatus ------------------------------------------- */ /* Der Punkt wird IM BROWSER gerechnet, nie beim Bauen. Ein einkompilierter Status sagt für immer „geöffnet". Der Platz ist vorab reserviert (min-height + min-width): sonst springt das Layout, sobald das Skript die Zeile einsetzt — genau der Sprung, der auf der Vorgängerfassung 0,107 CLS gekostet hat. */ .status { display: flex; flex-direction: column; gap: 2px; min-height: 46px; font-size: 0.9375rem; line-height: 1.45; } .status-zeile { display: flex; align-items: center; gap: var(--s2); font-weight: 600; } .status-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; } .status[data-offen='ja'] .status-punkt { background: var(--accent-2); box-shadow: 0 0 0 3px rgb(127 199 184 / .25); } .status[data-offen='nein'] .status-punkt { background: var(--graphit-hell); } .status-zusatz { color: var(--text-mute); font-weight: 400; } .auf-dunkel .status-zusatz { color: var(--on-dark-soft); } .status-ausweg { color: var(--accent-strong); font-weight: 600; text-decoration: none; } .auf-dunkel .status-ausweg { color: var(--accent-2); } /* ---------- 9. Kopfleiste ----------------------------------------------- */ .hinweisband { background: var(--graphit-tief); color: var(--on-dark); font-size: 0.875rem; line-height: 1.5; padding: var(--s3) 0; } .hinweisband .bahn { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; } .hinweisband b { color: var(--accent-2); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; } .kopf-leiste { position: sticky; top: 0; z-index: 100; background: rgb(241 244 246 / .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .kopf-leiste .bahn { display: flex; align-items: center; gap: var(--s5); min-height: 72px; padding-block: var(--s3); } .marke { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); flex: none; } .marke-zeichen { width: 38px; height: 38px; flex: none; } .marke-text { display: flex; flex-direction: column; line-height: 1.15; } .marke-name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; } .marke-zusatz { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; } .haupt-nav { display: none; } /* Vier Einstiege, benannt nach dem Anlass des Besuchers — nicht nach dem Werkstoff. "Der Betrieb" steht bewusst nicht hier: Fünf Punkte plus Öffnungsstatus plus Anruftaste haben in der Leiste umgebrochen, und eine umgebrochene Kopfleiste sieht aus wie ein Fehler. Er steht im Menü, im Abschnitt selbst und in der Fußzeile. */ @media (min-width: 1200px) { .haupt-nav { display: flex; gap: var(--s4); margin-inline-start: auto; } .haupt-nav a { color: var(--text-soft); text-decoration: none; font-weight: 550; font-size: 0.875rem; white-space: nowrap; padding: var(--s2) 0; border-bottom: 2px solid transparent; } .haupt-nav a:hover { color: var(--accent-strong); border-bottom-color: var(--accent); } } .kopf-rechts { display: flex; align-items: center; gap: var(--s4); margin-inline-start: auto; } @media (min-width: 1200px) { .kopf-rechts { margin-inline-start: 0; } } /* Der Öffnungsstatus steht überall dort, wo eine Telefonnummer steht — und zwar VOLLSTÄNDIG: Zustand, nächste Öffnung und, wenn geschlossen, ein Ausweg. Eine erste Fassung hatte ihn in der Kopfleiste auf eine Zeile gekürzt, damit die Leiste schmal bleibt. Das war eine Abkürzung an genau der falschen Stelle: "Gerade geschlossen" ohne "öffnet Montag 8:30" und ohne Ausweg lässt den Besucher stehen, der jetzt nichts tun kann — und der kommt am Montag nicht wieder. Platz dafür entsteht durch engere Navigationsabstände und die kurze Fassung des Auswegs. Der Platz ist vorab reserviert, damit nichts springt, sobald das Skript die Zeilen einsetzt. */ .kopf-status { display: none; } @media (min-width: 1200px) { .kopf-status { display: flex; min-height: 52px; justify-content: center; } .kopf-status .status-zeile { font-size: .8125rem; white-space: nowrap; } .kopf-status .status-zusatz { font-size: .75rem; white-space: nowrap; } .kopf-status .status-ausweg { font-size: .75rem; white-space: nowrap; } /* In der Kopfleiste die kurze Fassung des Auswegs — die lange sprengt sie. */ .kopf-status .status-ausweg .lang { display: none; } .kopf-status .status-ausweg .kurz { display: inline; } .haupt-nav { gap: var(--s4); } } /* Unter 1160 px übernimmt das Menü. Der Status steht dort oben, vollständig und mit langem Ausweg — es ist die Stelle, an der auf dieser Breite die Telefonnummer und die Wege liegen. Warum 1200 und nicht 1000: gemessen, nicht geschätzt. Mit fünf Navigationspunkten braucht die Leiste 1021 px. Bei 1120 px stehen nur 993 px zur Verfügung — 28 px zu wenig. Dass scrollWidth dort trotzdem keinen Überlauf meldet, liegt allein an overflow-x: hidden am Body: Die Leiste wäre abgeschnitten, nicht heil. Bei 1200 px sind 1068 px da, also 47 px Luft. Die Navigation war zwischenzeitlich 448 px breit, weil dort drei Anlassnamen standen, die ALLE auf dieselbe Sprungmarke zeigten — die drei Unterseiten dazu gibt es noch nicht. Dreimal derselbe Verweis ist keine Navigation. */ .menue-status { padding: var(--s3) var(--s3) var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s2); } .menue-status .status { min-height: 62px; } .kopf-anruf { display: none; } @media (min-width: 700px) { .kopf-anruf { display: inline-flex; padding-inline: var(--s5); min-height: 46px; white-space: nowrap; } } /* Menü als
— funktioniert ohne JavaScript. */ .menue { position: relative; } @media (min-width: 1200px) { .menue { display: none; } } .menue > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 46px; padding: 0 var(--s4); border: 2px solid var(--line-strong); border-radius: var(--radius); font-weight: 600; cursor: pointer; background: var(--surface); } .menue > summary::-webkit-details-marker { display: none; } .menue[open] > summary { border-color: var(--accent); color: var(--accent-strong); } .menue-inhalt { position: absolute; right: 0; top: calc(100% + var(--s3)); width: min(90vw, 320px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-tief); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; } .menue-inhalt nav { display: flex; flex-direction: column; } .menue-inhalt nav a { padding: var(--s3) var(--s3); min-height: 44px; display: flex; align-items: center; text-decoration: none; color: var(--ink); font-weight: 550; border-bottom: 1px solid var(--line); } .menue-inhalt nav a:last-of-type { border-bottom: 0; } .menue-inhalt nav a:hover { background: var(--bg-2); color: var(--accent-strong); } /* ---------- 10. Hero ---------------------------------------------------- */ /* Höhe 78 svh als Untergrenze, nie 100: Der nächste Abschnitt muss als angeschnittene Kante sichtbar bleiben, sonst weiß am Handy niemand, dass es weitergeht. svh statt vh, sonst springt das Layout, wenn die Adressleiste im mobilen Browser ein- und ausfährt. Untergrenze und nicht feste Höhe: Reicht der Platz nicht, wächst der Hero mit, statt die letzte Zeile abzuschneiden. */ .hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: max(520px, 78svh); background: var(--bg-deep); overflow: hidden; } .hero-bild { position: absolute; inset: 0; z-index: 0; } .hero-bild img { width: 100%; height: 100%; object-fit: cover; } /* Abdunklung — hält den Text lesbar, egal was im Bild passiert. Gerechnet wird der Kontrast gegen diese Fläche, nicht gegen das Rohbild. */ /* Zwei Verläufe übereinander: einer quer, damit die Textseite dunkel und die Bildseite lesbar bleibt, einer längs für Kopfleiste und untere Kante. Die Werte sind nicht geschätzt. Der hellste Bildpunkt im Hero-Bild ist reines Weiß (das Fenster hinter dem Zuschnitttisch). Damit Fließtext dort noch 7:1 erreicht, darf die gemeinsame Deckung im Textbereich nicht unter 0,72 fallen; sie liegt bei mindestens 0,80. Gerechnet in werkzeug/kontrast.js, nicht am Auge beurteilt. */ .hero-schatten { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgb(10 15 18 / .82) 0%, rgb(10 15 18 / .80) 58%, rgb(10 15 18 / .30) 100%), linear-gradient(180deg, rgb(10 15 18 / .34) 0%, rgb(10 15 18 / .04) 42%, rgb(10 15 18 / .62) 100%); } /* Die Sprosse über der Scheibe — Signatur B, hier über dem Hero-Bild. */ .hero-sprosse { position: absolute; inset: 0; z-index: 2; pointer-events: none; border: var(--rahmen) solid var(--bg); border-top-width: 0; } /* Die Sprosse steht erst ab 1000 px. Darunter liegt die Textspalte breiter im Bild, und der Strich lief bei 768 px mitten durch die Anfrage-Taste und durch die Statuszeile — im Code sieht man das nicht, im Bildschirmfoto sofort. Der Rahmen bleibt auf allen Breiten; nur die Teilung entfällt. */ .hero-sprosse::after { content: none; } @media (min-width: 1000px) { .hero-sprosse::after { content: ''; position: absolute; top: 0; bottom: 0; left: 62%; width: var(--sprosse); background: var(--bg); opacity: .92; } } .hero-inhalt { position: relative; z-index: 3; width: 100%; padding-block: clamp(28px, 6svh, 72px); } .hero h1 { color: var(--on-dark); max-width: 19ch; margin-top: var(--s3); } .hero-stuetz { color: var(--on-dark); margin-top: var(--s5); max-width: 46ch; font-size: clamp(1.0625rem, 2.2vw, 1.3125rem); line-height: 1.55; } .hero .tasten { margin-top: var(--s7); } .hero .status { margin-top: var(--s5); color: var(--on-dark); } /* ---------- 11. Vertrauensband ------------------------------------------ */ .band { background: var(--graphit-tief); color: var(--on-dark); border-top: var(--kante) solid var(--accent); } .band-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgb(255 255 255 / .12); margin-block: 0; padding: 0; list-style: none; } @media (min-width: 860px) { .band-raster { grid-template-columns: repeat(4, 1fr); } } .band-raster li { background: var(--graphit-tief); padding: var(--s6) var(--s5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s1); } .band-wort { max-width: 26ch; } .band-wert { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .band-wort { font-size: 0.9375rem; color: var(--on-dark-soft); line-height: 1.45; } /* ---------- 12. Abschnitte ---------------------------------------------- */ /* Abschnitte dürfen unterschiedlich hoch sein. Gleicher Rhythmus für alle ist der schnellste Weg zu einer Seite, die aussieht wie jede andere. */ .abschnitt { padding-block: clamp(64px, 9vw, 120px); } .abschnitt-eng { padding-block: clamp(48px, 6vw, 80px); } .abschnitt-weit { padding-block: clamp(80px, 12vw, 156px); } .abschnitt-abgesetzt { background: var(--bg-2); } .abschnitt-dunkel { background: var(--bg-deep); color: var(--on-dark); } .abschnitt-dunkel h2, .abschnitt-dunkel h3 { color: var(--on-dark); } .abschnitt-dunkel .kopf .satz { color: var(--on-dark-soft); } /* ---------- 13. Leistungen (Anlässe) ------------------------------------ */ .anlaesse { display: grid; gap: var(--s6); grid-template-columns: 1fr; } @media (min-width: 800px) { .anlaesse { grid-template-columns: repeat(3, 1fr); } } .anlass { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .anlass:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); } .anlass-bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); } .anlass-bild img { width: 100%; height: 100%; object-fit: cover; } .anlass-text { padding: var(--s5) var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s3); flex: 1; } .anlass-dach { font-size: 0.6875rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); } .anlass h3 { color: var(--ink); } .anlass p { color: var(--text-soft); font-size: 1rem; line-height: 1.6; } .anlass .weiter { margin-top: auto; } /* Anschluss unter den Leistungen */ .anschluss { margin-top: var(--s8); padding: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between; } .anschluss p { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; letter-spacing: -.02em; } /* ---------- 14. Projekte ------------------------------------------------ */ /* Der visuellste Abschnitt der Seite: große Bilder, wenig Text, bewusst asymmetrisch. Ein gleichmäßiges Kachelfeld wäre das templatigste Muster im Web. */ .projekte { display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 760px) { .projekte { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; } .projekt { grid-column: span 3; } .projekt-gross { grid-column: span 4; } .projekt-schmal { grid-column: span 2; } } .projekt { position: relative; display: block; text-decoration: none; color: var(--on-dark); overflow: hidden; background: var(--graphit-tief); border-radius: var(--radius); } .projekt img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform .5s cubic-bezier(.2,.6,.2,1); } .projekt-gross img, .projekt-quer img { aspect-ratio: 4 / 3; } .projekt:hover img { transform: scale(1.03); } /* Die Beschriftung ist immer sichtbar — nichts, was erst beim Überfahren erscheint. Am Handy gibt es keinen Mauszeiger. */ .projekt-text { position: absolute; inset: auto 0 0 0; padding: 78px var(--s5) var(--s5); background: linear-gradient( 180deg, rgb(18 23 27 / 0) 0px, rgb(18 23 27 / .55) 40px, rgb(18 23 27 / .92) 78px, rgb(18 23 27 / .97) 100% ); display: flex; flex-direction: column; gap: 2px; } .projekt-dach { font-size: .6875rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); } .projekt-titel { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; } .projekt-notiz { font-size: .875rem; color: var(--on-dark-soft); line-height: 1.45; } .projekt-jahr { align-self: flex-start; margin-top: var(--s2); font-size: .75rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--on-dark-soft); border: 1px solid rgb(255 255 255 / .28); padding: 2px 8px; border-radius: var(--radius-sm); } /* ---------- 15. Warum wir ----------------------------------------------- */ .gruende { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .grund { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); padding-block: var(--s6); border-top: 1px solid var(--line); align-items: start; } .grund:last-child { border-bottom: 1px solid var(--line); } .grund-nr { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.03em; min-width: 2.2ch; } .grund h3 { margin-bottom: var(--s2); } .grund p { color: var(--text-soft); } .warum-raster { display: grid; gap: var(--s8); align-items: start; } @media (min-width: 940px) { .warum-raster { grid-template-columns: 1.05fr .95fr; gap: var(--s9); } } .bild-block figcaption { margin-top: var(--s3); font-size: .875rem; color: var(--text-mute); line-height: 1.5; } /* ---------- 16. Preis über Kundenstimmen -------------------------------- */ .preisstimmen { display: grid; gap: var(--s5); margin-top: var(--s7); } @media (min-width: 820px) { .preisstimmen { grid-template-columns: repeat(3, 1fr); } } .preisstimme { background: var(--bg-deep-2); padding: var(--s6); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--s4); } .preisstimme blockquote { margin: 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.45; font-weight: 500; color: var(--on-dark); } .preisstimme mark { background: transparent; color: var(--accent-2); font-weight: 650; } .preisstimme cite { font-style: normal; font-weight: 650; color: var(--on-dark); font-size: .9375rem; } .preisstimme .kontext { font-size: .875rem; color: var(--on-dark-soft); } .preisstimme .weiter { margin-top: auto; font-size: .9375rem; color: var(--accent-2); } /* ---------- 17. Kundenstimmen ------------------------------------------- */ .stimmen { display: grid; gap: var(--s5); } @media (min-width: 900px) { .stimmen { grid-template-columns: repeat(3, 1fr); } } .stimme { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); } .sterne { display: flex; align-items: center; gap: var(--s2); color: var(--accent); } .sterne .datum { color: var(--text-mute); font-size: .875rem; margin-inline-start: auto; font-variant-numeric: tabular-nums; } .stimme p { color: var(--text-soft); font-size: 1rem; line-height: 1.65; } .stimme footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--s4); align-items: baseline; justify-content: space-between; } .stimme cite { font-style: normal; font-weight: 650; color: var(--ink); } .bewertungs-kopf { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: baseline; justify-content: space-between; margin-bottom: var(--s7); } .schnitt { display: flex; align-items: baseline; gap: var(--s3); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .schnitt small { font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--text-mute); letter-spacing: 0; } /* ---------- 18. Ablauf -------------------------------------------------- */ .ablauf-raster { display: grid; gap: var(--s8); align-items: start; } @media (min-width: 980px) { .ablauf-raster { grid-template-columns: 1fr 400px; gap: var(--s9); } } .schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; } .schritt { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); padding-bottom: var(--s7); position: relative; } .schritt:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 46px; bottom: 6px; width: 2px; background: var(--line); } .schritt-nr { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--accent); color: var(--accent-strong); border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--bg); position: relative; z-index: 1; flex: none; } .abschnitt-abgesetzt .schritt-nr { background: var(--bg-2); } .schritt h3 { margin-bottom: var(--s2); } .schritt p { color: var(--text-soft); } .schritt-dauer { display: inline-block; margin-top: var(--s3); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--text-mute); } /* ---------- 19. Team ---------------------------------------------------- */ .team-raster { display: grid; gap: var(--s8); align-items: start; } @media (min-width: 900px) { .team-raster { grid-template-columns: 380px 1fr; gap: var(--s9); } } /* Sichtbar markierter Platzhalter. Er steht auf der SEITE, nicht nur im Übergabedokument — der Chef liest die Demo, bevor es eine Übergabe gibt. Ein erfundenes Zitat unter dem Foto eines namentlich genannten Menschen ist der eine Fund, der eine ganze Demo kippt. */ .platzhalter { border: 2px dashed var(--line-strong); background: repeating-linear-gradient( 135deg, transparent 0 10px, rgb(66 72 80 / .04) 10px 20px ); padding: var(--s6); border-radius: var(--radius); } .platzhalter-marke { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--graphit-tief); background: var(--accent-2); padding: 3px 10px; border-radius: var(--radius-sm); margin-bottom: var(--s4); } .platzhalter p { color: var(--text-soft); font-size: 1rem; } /* ---------- 20. Fragen -------------------------------------------------- */ /*
statt Skript: Die Antworten stehen im HTML und sind auch ohne JavaScript lesbar — und für eine Antwortmaschine zitierbar. */ .fragen { max-width: 800px; } .frage { border-bottom: 1px solid var(--line); } .frage:first-of-type { border-top: 1px solid var(--line); } .frage > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s5) 0; min-height: 56px; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 600; letter-spacing: -.015em; } .frage > summary::-webkit-details-marker { display: none; } .frage > summary::after { content: ''; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translate(-3px, -3px); transition: transform .18s ease; } .frage[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); } .frage > summary:hover { color: var(--accent-strong); } .frage-antwort { padding: 0 0 var(--s6); color: var(--text-soft); max-width: var(--maxw-text); } /* ---------- 21. Abschluss-CTA und Kontakt ------------------------------- */ .abschluss { text-align: left; } .abschluss h2 { max-width: 18ch; } .abschluss .tasten { margin-top: var(--s7); } .abschluss .status { margin-top: var(--s5); } .kontakt-raster { display: grid; gap: var(--s7); } @media (min-width: 900px) { .kontakt-raster { grid-template-columns: 1fr 1fr; gap: var(--s9); } } .nummer-gross { display: inline-block; /* Trefferflaeche: bei 360 px war die Zeile nur 35 px hoch. */ padding-block: var(--s2); font-family: var(--font-display); font-size: clamp(1.9rem, 5.2vw, 2.9rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; line-height: 1.15; } .nummer-gross:hover { color: var(--accent-strong); } .daten { display: grid; gap: var(--s5); margin: 0; } .daten dt { font-size: .6875rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 2px; } .daten dd { margin: 0; color: var(--text-soft); } .orte { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; } .orte li { /* Ortsname, kein Bedienelement — deshalb die feine Linie und nicht die starke, die 3:1 halten muss. */ border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 12px; font-size: .9375rem; color: var(--text-soft); background: var(--surface); } /* ---------- 22. Fußzeile ------------------------------------------------ */ .fusszeile { background: var(--bg-deep); color: var(--on-dark-soft); padding-block: var(--s9) var(--s7); padding-bottom: calc(var(--s7) + var(--leiste)); border-top: var(--kante) solid var(--accent); font-size: .9375rem; } @media (min-width: 760px) { .fusszeile { padding-bottom: var(--s7); } } .fuss-raster { display: grid; gap: var(--s7); } @media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s8); } } .fusszeile h2, .fusszeile h3 { color: var(--on-dark); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--font-body); font-weight: 650; margin-bottom: var(--s4); } .fusszeile a { color: var(--on-dark-soft); text-decoration: none; } .fusszeile a:hover { color: var(--accent-2); text-decoration: underline; } .fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } .fuss-liste a { min-height: 32px; display: inline-flex; align-items: center; } .fuss-schluss { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid rgb(255 255 255 / .14); display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between; font-size: .875rem; } /* „Nach oben" als Textzeile — nie als schwebender Pfeil, der kollidiert am Handy mit der Anrufleiste. */ .nach-oben { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; } /* ---------- 23. Feste Anrufleiste am Handy ------------------------------ */ .anrufleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s2); padding: var(--s2) var(--s3); padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); background: rgb(241 244 246 / .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); } .anrufleiste .taste { min-height: 50px; padding-inline: var(--s4); font-size: 1rem; } @media (min-width: 760px) { .anrufleiste { display: none; } } body { padding-bottom: var(--leiste); } @media (min-width: 760px) { body { padding-bottom: 0; } } /* ---------- 24. Anfrage-Assistent --------------------------------------- */ .assistent { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); } @media (min-width: 700px) { .assistent { padding: var(--s7); } } .feld { display: grid; gap: var(--s2); margin-bottom: var(--s5); } .feld label { font-weight: 600; font-size: .9375rem; } .feld .hilfe { font-size: .875rem; color: var(--text-mute); } .feld input, .feld textarea, .feld select { font: inherit; font-size: 1rem; padding: var(--s3) var(--s4); min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); width: 100%; } .feld textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--accent); } .wahl { display: grid; gap: var(--s3); } @media (min-width: 640px) { .wahl { grid-template-columns: repeat(3, 1fr); } } .wahl label { display: flex; align-items: center; gap: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s4); min-height: 56px; cursor: pointer; font-weight: 550; font-size: 1rem; } .wahl label:hover { border-color: var(--accent); } .wahl input:checked + span { color: var(--accent-strong); font-weight: 650; } .wahl label:has(input:checked) { border-color: var(--accent); border-width: 2px; background: rgb(15 74 68 / .04); } .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .datenhinweis { font-size: .875rem; color: var(--text-mute); margin-top: var(--s5); } .bestaetigung { border: var(--kante) solid var(--accent); border-width: 0 0 0 var(--kante); background: var(--bg-2); padding: var(--s6); border-radius: var(--radius); } .demo-sperre { margin-top: var(--s4); font-size: .875rem; color: var(--text-mute); border-top: 1px solid var(--line); padding-top: var(--s4); } /* ---------- 25. Motion -------------------------------------------------- */ /* Dezent und ruhig. Kein eigener Mauszeiger, keine magnetischen Tasten, kein horizontales Scrollen, nichts, was bei jedem Scrollen einfliegt. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- 26. Druck --------------------------------------------------- */ @media print { .kopf-leiste, .anrufleiste, .hinweisband, .menue { display: none !important; } body { background: #fff; color: #000; padding-bottom: 0; } .hero { min-height: auto; } } /* ========================================================================== 27. Handy — gemessen, nicht angenommen Alles hier steht, weil es bei 360 px im Bildschirmfoto kaputt war. Der Reihe nach: die Kopfleiste lief über den rechten Rand, das Hinweisband nahm drei Zeilen, die Anruftaste brach mitten in der Telefonnummer um, und die zweite Taste stand unterhalb des ersten Bildschirms — womit der Hero genau das nicht mehr leistete, wofür er gebaut ist. ========================================================================== */ /* Telefonnummern und Tastenbeschriftungen brechen nie um. Eine Nummer, die in zwei Zeilen steht, liest sich nicht mehr als Nummer. */ .taste { white-space: nowrap; } /* Die große Anruftaste: Beschriftung und Nummer übereinander. Damit passt beides bei 360 px in eine Taste, ohne dass etwas umbricht — und die Nummer wird größer statt kleiner. */ .taste-gross { padding: var(--s4) var(--s6); min-height: 60px; } .taste-gross .taste-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; gap: 1px; } .taste-gross .taste-klein { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; opacity: 0.88; } .taste-gross .nummer { font-size: 1.1875rem; font-weight: 700; } @media (max-width: 559px) { /* Kopfleiste: Marke kleiner, Menue kompakt, weniger Zwischenraum. */ .kopf-leiste .bahn { gap: var(--s3); min-height: 64px; } .marke-zeichen { width: 32px; height: 32px; } .marke-name { font-size: 1rem; } .marke-zusatz { font-size: 0.625rem; letter-spacing: 0.1em; } .menue > summary { padding-inline: var(--s3); } /* Hinweisband: der lange Satz steht erst ab 560 px. Auf dem ersten Bildschirm zaehlt jede Zeile — drei Zeilen Hinweis verdraengen die Anruftaste. */ .hinweisband { font-size: 0.75rem; padding-block: var(--s1); line-height: 1.45; } .hinweisband .lang { display: none; } .hinweisband b { font-size: 0.75rem; } .status-ausweg .lang { display: none; } /* Der Hero misst hier 78 % der NUTZBAREN Hoehe, nicht der ganzen: Die feste Anrufleiste liegt ueber der Seite und verdeckt sonst genau die Kante des naechsten Abschnitts, an der der Besucher erkennt, dass es weitergeht. Ohne diesen Abzug endete der Hero 19 px UNTER der Leiste — im Bildschirmfoto war vom Vertrauensband nichts mehr zu sehen. */ .hero { min-height: max(460px, calc(78svh - var(--leiste))); } /* Hero: engere Skala, damit H1, Stuetzsatz UND beide Tasten ohne Scrollen im Bild stehen. */ .hero h1 { font-size: 1.95rem; } .hero-stuetz { font-size: 1.0625rem; margin-top: var(--s4); } .hero .tasten { margin-top: var(--s5); gap: var(--s3); } .hero .status { margin-top: var(--s4); } .hero-inhalt { padding-block: var(--s4); } .dachzeile { font-size: 0.6875rem; letter-spacing: 0.12em; gap: var(--s2); } .dachzeile::before { width: 18px; } /* Beide Tasten ueber die volle Breite: nebeneinander waeren sie bei 360 px zu schmal fuer 44 px Trefferflaeche plus lesbare Beschriftung. */ .hero .taste, .abschluss .taste, .anschluss .taste { width: 100%; justify-content: flex-start; } .anschluss { padding: var(--s5); } .anschluss .tasten { width: 100%; } /* Feste Anrufleiste: die Nummer bleibt einzeilig. */ .anrufleiste .taste { font-size: 0.9375rem; padding-inline: var(--s3); } .anrufleiste .taste-gross { min-height: 50px; padding-block: var(--s2); } .anrufleiste .taste-klein { display: none; } } @media (min-width: 560px) { /* Die kurzen Fassungen stehen nur auf dem Handy. */ .hinweisband .kurz { display: none; } .status-ausweg .kurz { display: none; } } /* ---------- 28. Nachtraege aus dem Bildschirmfoto ----------------------- */ /* Die Leistungskarte nennt die Unterleistungen als eigene Zeile und traegt darunter „Mehr erfahren". Vorher war die Aufzaehlung selbst der Verweis — sie brach auf zwei Zeilen um, und der Pfeil stand allein rechts daneben. */ .anlass-liste { font-size: 0.875rem; color: var(--text-mute); line-height: 1.5; } .anlass .weiter { align-self: flex-start; margin-top: var(--s3); } /* Handlungsaufforderung am Ende eines Abschnitts, wenn sie in einer Spalte steht statt ueber die volle Breite. */ .seiten-cta { margin-top: var(--s7); padding: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .seiten-cta p { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; margin-bottom: var(--s5); } .seiten-cta .taste { width: 100%; justify-content: flex-start; } /* ---------- 29. Brotkrumen und Rechtstexte ------------------------------ */ /* Brotkrumen stehen auf jeder Seite ausser der Startseite — sichtbar, nicht nur im strukturierten Datum. Wer ueber eine Suchmaschine auf einer Unterseite landet, muss sehen, wo er ist. */ .brotkrumen { border-bottom: 1px solid var(--line); background: var(--bg); font-size: 0.9375rem; } .brotkrumen ol { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: var(--s4) 0; color: var(--text-mute); } .brotkrumen li + li::before { content: '/'; margin-right: var(--s3); color: var(--line-strong); } .brotkrumen a { color: var(--text-soft); text-decoration: none; } .brotkrumen a:hover { color: var(--accent-strong); text-decoration: underline; } /* Rechtstexte: eine Spalte, ruhige Gliederung, Zeilenlaenge im Rahmen. */ .rechtstext { max-width: var(--maxw-text); } .rechtstext h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-top: var(--s8); margin-bottom: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); } .rechtstext h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; } .rechtstext p { margin-bottom: var(--s4); color: var(--text-soft); } .rechtstext ul { margin: 0 0 var(--s5); padding-left: var(--s5); color: var(--text-soft); } .rechtstext li { margin-bottom: var(--s2); } .rechtstext code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--bg-2); padding: 1px 5px; border-radius: var(--radius-sm); } .rechtstext .hinweiszeile { font-size: .9375rem; color: var(--text-mute); border-left: var(--kante) solid var(--line-strong); padding-left: var(--s4); } /* ---------- 30. Trefferflaechen am Handy -------------------------------- */ /* Freistehende Verweise brauchen 44 px Hoehe. Gemessen bei 360 px: Marke, Fusszeilenliste und die Verweise im Kontaktblock lagen bei 21 bis 32 px. Ausgenommen sind Verweise MITTEN IM FLIESSTEXT — der Ausweg unter dem Oeffnungsstatus, die Datenschutzerklaerung unter dem Formular. Sie aufzublasen wuerde den Absatz auseinanderreissen, und die Regel meint sie ausdruecklich nicht. */ @media (max-width: 759px) { .marke { min-height: 44px; } .fuss-liste a { min-height: 44px; } .daten dd a, .fusszeile p a { display: inline-flex; align-items: center; min-height: 44px; } .nach-oben { min-height: 44px; } .bewertungs-kopf .weiter, .stimme .weiter, .preisstimme .weiter { min-height: 44px; } } /* ========================================================================== 31. Der Vorspann Scherben wachsen zusammen, die Kamera fährt herum und landet genau auf dem Hero-Bild. Der Zustand steht als data-vorspann am -Element und wird schon im gesetzt, bevor das erste Bild gezeichnet ist — nur deshalb kann der Hero-Text von Anfang an unsichtbar sein, ohne kurz aufzublitzen. laeuft → Video laeuft, Text ist weg satz → Text kommt (bei 58 % der Laufzeit), Video laeuft noch fertig → Video blendet aus, der Hero steht Ohne das Attribut passiert hier gar nichts: Der Hero verhaelt sich exakt so wie ohne Vorspann. Das ist der Rueckfall fuer jeden Fehlschlag — und der Grund, warum der Vorspann ein Zugewinn ist und nie ein Preis. ========================================================================== */ /* Ueber dem Hero-Bild, UNTER der Abdunklung. Laege das Video ueber dem Verlauf, setzte beim Ueberblenden am Ende ploetzlich der Verlauf ein und das Bild dunkelte sichtbar nach. So liegt derselbe Verlauf die ganze Zeit ueber beidem, und der Wechsel vom Video zum Foto ist nicht zu sehen. */ .vorspann-flaeche { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: none; pointer-events: none; opacity: 1; transition: opacity 900ms ease; } html[data-vorspann='laeuft'] .vorspann-flaeche, html[data-vorspann='satz'] .vorspann-flaeche, html[data-vorspann='fertig'] .vorspann-flaeche { display: block; } html[data-vorspann='fertig'] .vorspann-flaeche { opacity: 0; } /* Die uebrigen Ebenen ruecken eine Stufe hoch, damit das Video dazwischen passt: Bild 0 · Video 1 · Abdunklung 2 · Sprosse 3 · Text 4 · Taste 5. */ .hero-schatten { z-index: 2; } .hero-sprosse { z-index: 3; } .hero-inhalt { z-index: 4; } /* Der Hero-Text. Waehrend der Vorspann laeuft, ist er weg; bei 58 % kommt er gestaffelt zurueck — Dachzeile, Ueberschrift, Stuetzsatz, Tasten, Status. */ html[data-vorspann='laeuft'] [data-hero-satz] > * { opacity: 0; transform: translateY(10px); } html[data-vorspann='satz'] [data-hero-satz] > *, html[data-vorspann='fertig'] [data-hero-satz] > * { opacity: 1; transform: none; transition: opacity 800ms ease, transform 800ms cubic-bezier(.22, .61, .36, 1); } html[data-vorspann='satz'] [data-hero-satz] > *:nth-child(2), html[data-vorspann='fertig'] [data-hero-satz] > *:nth-child(2) { transition-delay: 110ms; } html[data-vorspann='satz'] [data-hero-satz] > *:nth-child(3), html[data-vorspann='fertig'] [data-hero-satz] > *:nth-child(3) { transition-delay: 240ms; } html[data-vorspann='satz'] [data-hero-satz] > *:nth-child(4), html[data-vorspann='fertig'] [data-hero-satz] > *:nth-child(4) { transition-delay: 360ms; } html[data-vorspann='satz'] [data-hero-satz] > *:nth-child(5), html[data-vorspann='fertig'] [data-hero-satz] > *:nth-child(5) { transition-delay: 470ms; } /* Die Sprosse tritt zurueck, solange das Video laeuft: Eine Fensterteilung ueber einer fahrenden Kamera liest sich als Fehler, nicht als Rahmen. */ .hero-sprosse { transition: opacity 700ms ease; } html[data-vorspann='laeuft'] .hero-sprosse, html[data-vorspann='satz'] .hero-sprosse { opacity: 0; } /* Der Ausgang. Ein Vorspann ohne Ausgang ist eine Geiselnahme — deshalb steht die Taste ab der ersten Sekunde da und ist mit der Tastatur erreichbar. Escape und Scrollen beenden ihn ebenfalls. */ .vorspann-vorbei { position: absolute; z-index: 5; right: clamp(16px, 4vw, 54px); bottom: clamp(16px, 4vh, 40px); display: none; padding: 10px 16px; min-height: 44px; font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--on-dark); background: rgb(10 15 18 / .58); border: 1px solid rgb(241 244 246 / .38); border-radius: var(--radius); backdrop-filter: blur(3px); cursor: pointer; transition: opacity 500ms ease, border-color 200ms ease; } html[data-vorspann='laeuft'] .vorspann-vorbei, html[data-vorspann='satz'] .vorspann-vorbei { display: block; } .vorspann-vorbei:hover { border-color: var(--accent-2); } html[data-vorspann='fertig'] .vorspann-vorbei { opacity: 0; pointer-events: none; } /* Guertel zum Hosentraeger: Der Entscheider im startet den Vorspann bei reduzierter Bewegung gar nicht erst. Sollte das Attribut auf anderem Weg gesetzt werden, ist hier trotzdem Schluss. */ @media (prefers-reduced-motion: reduce) { .vorspann-flaeche, .vorspann-vorbei { display: none !important; } html[data-vorspann] [data-hero-satz] > * { opacity: 1 !important; transform: none !important; } } /* ========================================================================== 32. Fuenf Navigationspunkte — der Platz dafuer Mit fuenf Punkten braucht die Kopfleiste 1140 px. Verfuegbar sind 1068: Die Inhaltsspalte ist auf --maxw 1180 px gedeckelt, abzueglich zweimal 56 px Rand. Es fehlten also 72 px, und zwar auf JEDER Bildschirmbreite — ein groesserer Monitor haette daran nichts geaendert. Die naheliegende Loesung waere gewesen, die Leiste breiter zu machen als die Inhaltsspalte. Dann stuende die Marke aber nicht mehr auf einer Linie mit den Ueberschriften darunter, und genau diese Linie ist bei einer Seite, deren Signatur Rahmen, Sprosse und Kante sind, keine Kleinigkeit. Stattdessen vier kleine Abzuege, zusammen rund 118 px: Navigationsabstand 24 → 16 px −32 Navigationsschrift 0,875 → 0,8125rem −34 Anruftaste ohne Hoerersymbol −30 (die Nummer bleibt — sie ist das, was zaehlt) Marken-Unterzeile enger gesetzt −22 ========================================================================== */ @media (min-width: 1200px) { .haupt-nav { gap: var(--s4); } .haupt-nav a { font-size: 0.8125rem; } /* Das Symbol ist Zierde, die Nummer ist die Handlung. In der Leiste entfaellt es; im Hero, im Abschluss und in der Anrufleiste bleibt es. */ .kopf-anruf svg { display: none; } .kopf-anruf { padding-inline: var(--s4); } .kopf-anruf .nummer { font-size: 0.9375rem; } .marke-zusatz { font-size: 0.625rem; letter-spacing: 0.09em; } .marke-name { font-size: 1rem; } } /* ========================================================================== 33. Der Ablauf erscheint der Reihe nach — und verschwindet wieder Die vier Schritte SIND eine Reihenfolge, also sagt die Bewegung genau das: Ein Schritt nach dem anderen setzt sich, sein Nummernkreis fuellt sich mit Glasgruen, und die Linie zieht zum naechsten weiter — wie ein Weg, der Stueck fuer Stueck abgearbeitet wird. ABWEICHUNG VON DEN ARBEITSREGELN, AUSDRUECKLICH GEWUENSCHT Die Regeln verbieten "Elemente, die bei jedem Scrollen einfliegen". Genau das passiert hier auf Wunsch des Betriebs: Die Bewegung laeuft vorwaerts und rueckwaerts, sooft man daran vorbeiscrollt. Begruendung und Datum stehen in wissen.md, Abschnitt 14. Was trotzdem gilt: · OHNE SKRIPT ist alles sofort da — das Verstecken haengt an der Marke 'js' am , die erst seite.js setzt. · BEI REDUZIERTER BEWEGUNG passiert gar nichts. ========================================================================== */ html.js .schritte[data-folge] .schritt { opacity: 0; transform: translateY(28px); transition: opacity 320ms ease, transform 320ms ease; } html.js .schritte[data-folge] .schritt.sichtbar { opacity: 1; transform: none; transition: opacity 480ms ease, transform 560ms cubic-bezier(.2, .9, .3, 1); } /* Der Nummernkreis ist der Punkt, auf dem der Blick landet: Er springt auf Groesse und fuellt sich mit Glasgruen. Weiss auf Glasgruen haelt 10,1:1 — siehe werkzeug/kontrast.js, Paarung "Anruftaste". */ html.js .schritte[data-folge] .schritt-nr { transform: scale(.68); transition: transform 280ms ease, background-color 280ms ease, border-color 280ms ease, color 280ms ease; } html.js .schritte[data-folge] .schritt.sichtbar .schritt-nr { transform: none; background: var(--accent); border-color: var(--accent); color: var(--on-accent); transition: transform 560ms cubic-bezier(.34, 1.5, .5, 1) 90ms, background-color 420ms ease 90ms, border-color 420ms ease 90ms, color 420ms ease 90ms; } /* Die Verbindungslinie waechst von oben nach unten und ist im erledigten Teil gruen — der Weg, der schon zurueckgelegt ist. */ html.js .schritte[data-folge] .schritt::before { transform: scaleY(0); transform-origin: top center; background: var(--accent); transition: transform 300ms ease; } html.js .schritte[data-folge] .schritt.sichtbar::before { transform: scaleY(1); transition: transform 680ms cubic-bezier(.4, 0, .2, 1) 200ms; } @media (prefers-reduced-motion: reduce) { html.js .schritte[data-folge] .schritt, html.js .schritte[data-folge] .schritt.sichtbar, html.js .schritte[data-folge] .schritt-nr, html.js .schritte[data-folge] .schritt.sichtbar .schritt-nr { opacity: 1 !important; transform: none !important; transition: none !important; } html.js .schritte[data-folge] .schritt::before, html.js .schritte[data-folge] .schritt.sichtbar::before { transform: none !important; transition: none !important; } } /* ========================================================================== 34. Die Fragen kompakter Sechs Fragen mit je 93 px Zeilenhoehe ergaben 558 px, in denen nichts steht ausser sechs Zeilen Text. Der Abschnitt beantwortet Fragen VOR dem Anruf — er soll ueberflogen werden koennen, nicht durchwandert. Jetzt rund 68 px je Zeile, zusammen etwa 410 px. ========================================================================== */ .frage > summary { padding: var(--s4) 0; min-height: 52px; font-size: clamp(1rem, 1.7vw, 1.125rem); gap: var(--s4); } .frage > summary::after { width: 12px; height: 12px; } .frage-antwort { padding: 0 0 var(--s5); } /* ========================================================================== 35. Der Satz vom Chef Die einzige Stelle der Seite, an der ein Mensch spricht. Deshalb gross, in der Anzeigeschrift und mit der Glaskante links — dem Signaturelement. Keine Anfuehrungszeichen im Text: Die setzt das CSS, damit der Wortlaut in der Datei sauber bleibt und beim Kopieren keine Zeichen mitwandern. ========================================================================== */ .chefsatz { margin: var(--s7) 0 0; padding-left: var(--s6); } .chefsatz blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.65rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty; } .chefsatz blockquote::before { content: '\201E'; } .chefsatz blockquote::after { content: '\201C'; } .chefsatz figcaption { margin-top: var(--s4); font-size: 0.9375rem; font-weight: 650; color: var(--text-mute); } /* Der Hinweis, dass der Wortlaut noch nicht unterschrieben ist. Er muss auffallen, ohne den Satz selbst zu entwerten — deshalb steht er darunter und nicht darin. */ .entwurfsmarke { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 2px dashed var(--line-strong); border-radius: var(--radius); background: repeating-linear-gradient( 135deg, transparent 0 10px, rgb(66 72 80 / .04) 10px 20px ); font-size: 0.9375rem; line-height: 1.6; color: var(--text-soft); max-width: var(--maxw-text); } /* Als eigene Zeile, nicht inline: Sonst laeuft der Text direkt neben der Marke weiter und beides liest sich wie ein Fehler. */ .entwurfsmarke .platzhalter-marke { display: block; width: fit-content; margin-bottom: var(--s3); } /* ========================================================================== 36. Der Hero ist hell, solange der Vorspann laeuft Die Abdunklung hat genau eine Aufgabe: den Hero-Text lesbar halten. Solange der Vorspann laeuft, ist der Text unsichtbar (opacity 0, siehe Abschnitt 33) — es gibt also nichts zu schuetzen, und der Schleier kann fast ganz weg. Das Video zeigt Glas im Lichtstrahl; unter 80 Prozent Deckung war davon wenig zu sehen. Bei 58 Prozent der Laufzeit (2,86 s) schaltet seite.js auf 'satz'. Ab da faehrt die Abdunklung in 600 ms auf volle Staerke zurueck — und ist damit fertig, BEVOR der Text durch seine 800-ms-Einblendung lesbar wird. Der gerechnete Kontrast aus werkzeug/kontrast.js gilt also unveraendert: Er beschreibt den Zustand, in dem Text auf dem Bild steht. Laeuft kein Vorspann, existiert das Attribut nicht und hier passiert nichts — der Hero ist von der ersten Millisekunde an abgedunkelt. ========================================================================== */ .hero-schatten { transition: opacity 600ms ease; } html[data-vorspann='laeuft'] .hero-schatten { opacity: .22; } html[data-vorspann='satz'] .hero-schatten, html[data-vorspann='fertig'] .hero-schatten { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero-schatten, html[data-vorspann] .hero-schatten { opacity: 1 !important; transition: none !important; } } /* ========================================================================== 37. Der Schein am Anrufknopf Auf dem dunklen Hero ist der gefuellte Knopf dunkelgruen auf dunklem Bild und damit leiser, als die primaere Handlung sein darf. Ein weicher Schein hebt ihn heraus. Zwei Entscheidungen dahinter: · ER SITZT AM ANRUF, nicht an der Anfrage. Leuchtete der umrandete Knopf, waere der Zweitweg optisch lauter als der Anruf — die Rangfolge stuende auf dem Kopf. Im Schielblick bliebe der falsche Knopf uebrig. · ER IST KEIN NEON. Die Farbe ist --accent-2, das Gruen der Glaskante. Eine Glaskante wirft im Licht genau diesen Schein; damit gehoert er zur Signatur der Seite und nicht zu einem Effektkatalog. Neon steht in den Arbeitsregeln auf der Verbotsliste. Nur auf dunklem Grund: Auf hellen Abschnitten traegt der gefuellte Knopf schon genug Kontrast, dort wuerde ein Schein nur schmutzig wirken. ========================================================================== */ .auf-dunkel .taste-anruf { box-shadow: var(--schein-glas); } .auf-dunkel .taste-anruf:hover { box-shadow: var(--schein-glas-stark); } /* ========================================================================== 38. Die gesprungene Scheibe auf der Fehlerseite Die einzige Stelle, an der Glas kaputt sein darf. Der Satz steht einmal im SVG; acht Ausschnitte zeigen ihn, jeder um ein bis drei Bildpunkte versetzt — das ist die Brechung. Kein Bild, kein Skript, keine Bibliothek: das ganze Stueck wiegt unter zwei Kilobyte und skaliert mit. ========================================================================== */ .scherben-titel { margin: var(--s5) 0 0; } .scherben { display: block; width: 100%; height: auto; max-width: 900px; } /* ALLES steht am SVG oder am , nichts am . Ein klont sein Ziel in einen Schattenbaum, und der Klon erbt jede vererbbare Eigenschaft vom -ELEMENT — nicht von dem, was in steht. Diese Falle hat hier zweimal zugeschlagen: fill am gesetzt → der Browser rechnete dort Weiss aus, zeichnete die acht Klone aber SCHWARZ. font-size am gesetzt → 124 px kamen nie an; gerendert wurde die vom

geerbte Groesse von rund 60 px. Beides ist im Code nicht zu sehen und in getComputedStyle() auch nicht: Dort steht am brav der gewuenschte Wert. Nur das Bildschirmfoto zeigt es. */ .scherben { font-family: var(--font-display); font-size: 124px; font-weight: 700; letter-spacing: -0.03em; } .scherben use { fill: var(--on-dark); } /* Jeder Sprung wird zweimal gezeichnet: dick in der Grundfarbe als Spalt zwischen den Scherben, darueber duenn und hell als Kante. Erst der Spalt macht aus Linien getrennte Stuecke. */ .scherben .spalt { fill: none; stroke: var(--bg-deep); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; } .scherben .kante { fill: none; stroke: rgb(241 244 246 / .30); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; } /* Querrisse liegen feiner: Sie trennen nichts, sie zeichnen nur mit. */ .scherben .spalt .quer { stroke-width: 3; } .scherben .kante .quer { stroke-width: .8; stroke: rgb(127 199 184 / .38); } /* ========================================================================== 39. „Warum wir" schreibt sich von links Vier Gruende, nummeriert — eine Liste, die entsteht. Die Bewegung sagt genau das und laeuft von LINKS nach rechts: 1. Die Trennlinie zieht sich von links auf (760 ms) 2. Die Zahl kommt von links herein (620 ms, 160 ms spaeter) 3. Der Text hebt sich (560 ms, 90 ms spaeter) Anders als im Ablauf gibt es hier keine senkrechte Linie zwischen den Punkten: Die vier Gruende sind eine Aufzaehlung, keine Reihenfolge. Was sich bewegt, muss zum Inhalt passen, sonst ist es Zierde. Es gelten dieselben drei Regeln wie in Abschnitt 33: haengt an der Marke 'js', laeuft vorwaerts und rueckwaerts (auf Wunsch des Betriebs, siehe wissen.md), und bei reduzierter Bewegung passiert nichts. ========================================================================== */ /* Die Trennlinie wird zur eigenen Flaeche, damit sie sich aufziehen kann — einen border laesst sich nicht von links nach rechts wachsen. */ html.js .gruende[data-folge] .grund { position: relative; border-top-color: transparent; } html.js .gruende[data-folge] .grund::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; transition: transform 300ms ease; } html.js .gruende[data-folge] .grund.sichtbar::before { transform: scaleX(1); transition: transform 760ms cubic-bezier(.22, .61, .36, 1); } /* Die Zahl von links. Sie ist das Element, das der Blick zuerst trifft. */ html.js .gruende[data-folge] .grund-nr { opacity: 0; transform: translateX(-18px); transition: opacity 260ms ease, transform 260ms ease; } html.js .gruende[data-folge] .grund.sichtbar .grund-nr { opacity: 1; transform: none; transition: opacity 520ms ease 160ms, transform 620ms cubic-bezier(.22, .9, .3, 1) 160ms; } html.js .gruende[data-folge] .grund > div { opacity: 0; transform: translateY(16px); transition: opacity 260ms ease, transform 260ms ease; } html.js .gruende[data-folge] .grund.sichtbar > div { opacity: 1; transform: none; transition: opacity 560ms ease 90ms, transform 560ms cubic-bezier(.22, .9, .3, 1) 90ms; } @media (prefers-reduced-motion: reduce) { html.js .gruende[data-folge] .grund { border-top-color: var(--line); } html.js .gruende[data-folge] .grund::before { display: none; } html.js .gruende[data-folge] .grund-nr, html.js .gruende[data-folge] .grund > div, html.js .gruende[data-folge] .grund.sichtbar .grund-nr, html.js .gruende[data-folge] .grund.sichtbar > div { opacity: 1 !important; transform: none !important; transition: none !important; } }