/* ============================================================
DESIGN.CSS — die Gestaltungsschicht.
Angelegt 15.09.2026 (Auftrag Adian: „das krasseste Design“,
Abschnitte nahtlos verbunden, Farbwelt beige/weiß/gold/schwarz
wie im Logo, Video ausdrücklich noch NICHT).
------------------------------------------------------------
WIE DIESE DATEI ZU STYLE.CSS STEHT
style.css baut die Seite (Raster, Formular, Rechtsseiten) und
bleibt unangetastet. Diese Datei wird DANACH geladen und ändert
nur das Aussehen. Wer das alte Design zurückwill, löscht in den
HTML-Dateien die eine Zeile
— mehr ist nicht nötig, nichts anderes wurde angefasst.
Alle Farben kommen weiter aus brand.css. Nachgemessen am
15.09.2026 aus logo-marke-klein.png: das Logo besteht zu 50,5 %
aus Creme (#fef2d3) und zu 48,7 % aus Goldocker (#fae2ad) auf
durchsichtigem Grund. --c-gold (#b7913f) und --c-plaster
(#f7f4ee) treffen das; erfunden wurde keine Farbe.
------------------------------------------------------------
DIE IDEE IN EINEM SATZ
Vorher wechselten sich hell und dunkel sechsmal ab — jeder
Wechsel ist eine sichtbare Kante, und genau die stören.
Jetzt macht die Seite EINEN Bogen:
Start ─ Leistungen ─ Betrieb durchgehend schwarz
↓ (weicher Übergang, 260 px)
Einsatzgebiet ─ Ablauf ─ Kontakt durchgehend hell
↓ (weicher Übergang, 260 px)
Fußbereich schwarz
Zwei Übergänge statt sechs, und beide laufen über eine Strecke
statt über eine Linie. Benachbarte Abschnitte teilen an ihrer
Kante EXAKT denselben Farbwert — dadurch gibt es dort rechnerisch
keine Kante mehr, nicht nur optisch.
============================================================ */
/* ============================================================
1. FARBSTUFEN DES BOGENS
Jede Zeile ist zugleich das Ende des Abschnitts darüber und der
Anfang des Abschnitts darunter. Wer eine Stufe ändert, muss sie
an BEIDEN Stellen ändern — deshalb stehen sie hier einmal als
Variable und nirgends sonst als Zahl.
============================================================ */
:root {
--stufe-hero-ende: #101112; /* = --c-ink, damit der Hero unverändert bleibt */
--stufe-leist-ende: #0e0f10; /* eine Spur tiefer: gibt dem Schwarz Tiefe */
--stufe-betrieb-ende: #101112; /* hebt sich wieder an — das Licht kündigt sich an */
--stufe-hell-1: #f7f4ee; /* = --c-plaster */
--stufe-hell-2: #f2ece2; /* eine Spur wärmer, Richtung Beige */
--stufe-hell-3: #eee7da; /* wärmstes Beige, direkt vor dem Fuß */
/* Der Haltepunkt in der Mitte beider Übergänge. Gemessen am 15.09.2026:
Mischt ein Verlauf direkt von Schwarz nach Beige, ist seine Mitte
neutrales Grau — der Rot-Blau-Abstand fiel von +20 auf +1. Auf dem
Bild sah das aus wie Nebel über der Seite. Grau kommt in der
Farbwelt (beige, weiß, gold, schwarz) nicht vor, also darf der Weg
dorthin auch nicht durch Grau führen. Dieser Ton ist die rechnerische
Mitte, um ein Fünftel Richtung Gold geschoben: hell genug, um nicht
als eigene Farbe aufzufallen, warm genug, dass der Bogen durchgehend
nach Kalk aussieht statt nach Dunst. */
--stufe-warm: #8f8675;
/* Länge der beiden weichen Übergänge. Kürzer als 200 px sieht man
wieder als Kante, länger als 320 px wirkt es wie ein Fehler im
Bild. 260 px ist der Wert, der auf Handy und Monitor gleich
ruhig aussieht. */
--bruecke: 260px;
/* Abstand, den ein Abschnitt oben zusätzlich braucht, damit in der
Übergangszone kein Text steht. Immer etwas mehr als --bruecke. */
--bruecke-luft: 300px;
}
/* ============================================================
2. DER DURCHGEHENDE GOLDFADEN
Eine einzige Haarlinie, die vom Hero bis zum Fußbereich durch die
ganze Seite läuft. Sie ist das, was die Abschnitte sichtbar
verbindet — ein Faden, an dem alles aufgereiht ist.
Nur auf breiten Schirmen: auf dem Handy ist links kein Platz
dafür, dort trägt der Farbbogen die Verbindung allein.
============================================================ */
body { position: relative; }
@media (min-width: 1180px) {
body::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
/* Sitzt auf der linken Textkante: dieselbe Rechnung wie .wrap,
damit der Faden genau unter der Überschrift steht und nicht
willkürlich im Raum. */
left: max(var(--pad-x), calc(50vw - var(--w-page) / 2 + var(--pad-x)));
width: 1px;
z-index: 0;
pointer-events: none;
background: linear-gradient(to bottom,
transparent 0,
rgba(183, 145, 63, .55) 12vh,
rgba(183, 145, 63, .28) 45%,
rgba(138, 109, 44, .35) 72%,
rgba(183, 145, 63, .45) 92%,
transparent 100%);
}
/* Der Inhalt muss über dem Faden liegen, sonst schneidet er durch
Bilder und Kästen.
⚠️ Die Kopfleiste gehört hier AUSDRÜCKLICH NICHT hinein.
Sie steht in style.css auf `position: fixed` und schwebt über der
Seite. Ein `position: relative` an dieser Stelle hebt das auf —
sie fällt dann in den Textfluss zurück, schiebt den Hero um 92 px
nach unten und ihre weiße Schrift steht auf hellem Grund.
Gemessen und behoben am 15.09.2026. Sie hat ohnehin z-index 100
und liegt damit längst über dem Faden. */
main, .site-footer { position: relative; z-index: 1; }
}
/* ============================================================
3. KOPFLEISTE
Zwei Änderungen: Sie wird beim Scrollen flacher (die Seite
bekommt dadurch mehr Ruhe), und unten läuft eine goldene
Fortschrittslinie mit, die zeigt, wie weit man ist.
============================================================ */
.site-header {
/* Ohne Rahmenfarbe-Übergang blitzt beim Andocken kurz eine Kante auf */
transition: background-color .45s var(--ease),
border-color .45s var(--ease);
}
.header-inner {
height: 92px;
transition: height .4s var(--ease);
}
.site-header.is-stuck .header-inner { height: 72px; }
.site-header.is-stuck .wordmark__marke { height: 40px; transition: height .4s var(--ease); }
.wordmark__marke { transition: height .4s var(--ease); }
/* Der Schriftzug rückt beim Andocken enger zusammen — dieselbe
Bewegung wie die Leiste selbst, sonst wirkt es wie zwei Dinge. */
.site-header.is-stuck .wordmark__name { font-size: 1.28rem; }
.wordmark__name { transition: font-size .4s var(--ease); }
/* Fortschrittslinie. animation-timeline: scroll() koppelt eine
Animation an die Scroll-Position statt an die Uhr — es läuft
ohne JavaScript und kostet nichts. Browser, die das nicht
kennen, zeigen die Linie gar nicht; die Seite sieht dort nur
eine Spur schlichter aus, nichts ist kaputt. */
@supports (animation-timeline: scroll()) {
.site-header::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 100%;
background: linear-gradient(to right, var(--c-gold-dim), var(--c-gold-hi));
transform: scaleX(0);
transform-origin: left;
animation: seitenfortschritt linear;
animation-timeline: scroll(root block);
}
@keyframes seitenfortschritt { to { transform: scaleX(1); } }
}
/* ============================================================
4. HERO
Der Aufbau bleibt unverändert: Foto als Vollbild, Text darüber,
Kennzahlen unten. Ausschnitt und Bildgröße stammen aus style.css
und werden nicht angefasst.
Geändert wird die Typografie, die Kennzahlen-Leiste — und seit
dem 16.09.2026, wie viel vom Foto durchkommt (Abschnitt 4.9,
„Das Foto atmen lassen“, von Adian ausgewählt).
============================================================ */
/* Die Überschrift bekommt mehr Gewicht und eine engere Zeile —
das ist der größte einzelne Unterschied, den man sofort sieht. */
.hero h1 {
line-height: 1.02;
letter-spacing: -0.035em;
max-width: 15ch;
}
/* Die goldene Hervorhebung bekommt einen ganz feinen Lichtschimmer,
wie Gold ihn bei Streiflicht hat. Kein Effekt um des Effekts
willen: Sie ist die einzige farbige Stelle im ersten Bildschirm
und soll den Blick halten. */
.hero h1 em {
background: linear-gradient(100deg, #c9a253 0%, #f0dba4 42%, #c9a253 78%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Rückfallebene für Browser ohne background-clip: text — sie
zeigen dann die volle Goldfarbe wie bisher. */
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.hero h1 em { color: var(--c-gold-hi); background: none; }
}
.hero__lead { max-width: 46ch; line-height: 1.7; }
/* Die Goldlinie über der Überschrift wird kräftiger und länger —
sie ist die Anspielung auf ein Stuckprofil und darf das auch
zeigen. */
.hero__rule {
height: 2px;
background: linear-gradient(to right,
var(--c-gold-hi) 0, var(--c-gold) 38%, rgba(183,145,63,.25) 72%, transparent);
max-width: 340px;
}
/* Kennzahlen: senkrechte Haarlinien zwischen den vier Werten statt
nur Abstand. Das liest sich als Tabelle eines Betriebs, nicht als
vier lose Zahlen. */
.hero__facts {
border-top: 1px solid rgba(183, 145, 63, .3);
gap: 0;
}
.hero__facts .fact {
padding-inline: clamp(1rem, 2.2vw, 2rem);
border-left: 1px solid rgba(255, 255, 255, .07);
}
.hero__facts .fact:first-child { border-left: 0; padding-left: 0; }
.fact__num {
letter-spacing: -0.02em;
background: linear-gradient(100deg, #b7913f 0%, #e8d29a 50%, #b7913f 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.fact__num { color: var(--c-gold); background: none; }
}
/* Auf dem Handy stehen die Kennzahlen zweispaltig — dort wären
senkrechte Linien mitten im Text. Nur waagerechte Trennung. */
@media (max-width: 860px) {
.hero__facts { gap: 1.5rem 1rem; }
.hero__facts .fact { padding-inline: 0; border-left: 0; }
}
/* ---- 4.9 Das Foto atmen lassen ----------------------------
Von Adian am 16.09.2026 aus zwei Entwürfen ausgewählt.
Drei Griffe, und alle drei nehmen etwas weg statt etwas
hinzuzufügen:
1. Graufilter und Deckkraft raus. Die Messung der Bilddatei
hat ergeben, dass sie NICHT flau ist (Tonwertspannweite 227
von 255, Farbstich +1,1, Kantenwert 8,98) — der matte
Eindruck entstand erst hier im CSS durch grayscale(.2) und
opacity .9. Ein Filter, der ein gutes Foto schlechter macht,
ist kein Stilmittel.
2. Der waagerechte Verlauf öffnet rechts deutlich früher.
Links bleibt er dicht, weil dort der Text steht und lesbar
bleiben muss. Rechts sitzt das Logo auf dem Transporter —
das schönste Element im Bild und bisher fast unsichtbar.
3. Die Kennzahlen-Linie läuft nach rechts aus, statt quer
durchs Bild zu schneiden (sie traf den Betriebsinhaber auf
Hüfthöhe).
Nur ab 861 px: auf dem Handy liegt das Foto anders im Bild
(hero-handy.jpg, anderer Ausschnitt), dort ist der dichte
Verlauf richtig. Kein !important, keine Änderung am HTML.
------------------------------------------------------------ */
@media (min-width: 861px) {
.hero__media {
opacity: 1;
filter: none;
}
.hero__media::after {
background:
/* waagerecht: links deckend für den Text, rechts offen fürs Logo.
21.09.2026 auf Adians Wunsch verstärkt ("der Hintergrund sollte
nicht so sichtbar sein") - die rechte Seite bleibt die hellste
Stelle, liegt aber nicht mehr fast frei. */
linear-gradient(to right,
#101112 0%,
rgba(16, 17, 18, .95) 20%,
rgba(16, 17, 18, .78) 42%,
rgba(16, 17, 18, .56) 66%,
rgba(16, 17, 18, .44) 100%),
/* senkrecht: unten deckend, damit die Kennzahlen auf Grund stehen */
linear-gradient(to top,
#101112 0%,
rgba(16, 17, 18, .82) 14%,
rgba(16, 17, 18, .34) 46%,
rgba(16, 17, 18, .44) 100%),
/* flächig darunter: nimmt dem Hintergrund überall etwas Licht,
auch dort, wo beide Verläufe dünn sind */
linear-gradient(rgba(16, 17, 18, .18), rgba(16, 17, 18, .18));
}
/* Die durchgehende Linie schnitt quer durchs Bild. Als Verlauf
endet sie dort, wo die Kennzahlen enden — das Foto bleibt
unversehrt. */
.hero__facts {
border-top: 0;
position: relative;
padding-top: clamp(1rem, 2.5vh, 1.75rem);
}
.hero__facts::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(to right,
rgba(183, 145, 63, .55) 0,
rgba(183, 145, 63, .30) 46%,
rgba(183, 145, 63, .06) 74%,
transparent 100%);
}
/* Der Text bekommt eine Spur mehr Kontrast gegen das jetzt
hellere Bild. Kein Kasten, kein Schatten — nur so viel, dass
die Schrift auf jedem Bildschirm sicher steht. */
.hero__lead { color: #cfc8bf; }
}
/* ============================================================
5. LEISTUNGEN — jetzt auf demselben Schwarz wie der Start
Das ist Adians Beispiel wörtlich: „zwischen Start und Leistungen
sollte kein Abschnitt sein“. Beide haben jetzt denselben Grund,
es gibt dort keine Kante mehr — auch keine weiche.
Weil der Grund von hell auf dunkel wechselt, müssen die
Textfarben mitgedreht werden. Das ist der Preis dafür und steht
deshalb vollständig und beisammen hier.
============================================================ */
#leistungen {
background: linear-gradient(to bottom,
var(--stufe-hero-ende) 0,
var(--stufe-leist-ende) 100%);
color: var(--c-plaster);
/* Kein Abstand nach oben: der Hero soll in die Leistungen
hineinlaufen, nicht davor enden. */
padding-top: clamp(3.5rem, 7vw, 6rem);
position: relative;
/* ⚠️ Hier stand bis zum 15.09.2026 ein `overflow: hidden`. Das macht
den stehenbleibenden Abschnittskopf weiter unten kaputt: Ein
Abschnitt mit `overflow: hidden` wird selbst zum Scrollbehälter,
und `position: sticky` klebt dann an diesem Behälter statt am
Fenster — der Kopf bleibt also nirgends stehen und sitzt obendrein
um den `top`-Wert zu tief. Gemessen über sieben Scrollstellungen:
Er stand auf allen an derselben Stelle. Gebraucht wurde das
Abschneiden ohnehin nicht — hier ragt nichts über den Rand. */
}
#leistungen .eyebrow { color: var(--c-gold); }
#leistungen .section-head h2 { color: var(--c-plaster); }
#leistungen .section-head .lead { color: #a9a29a; }
/* Die hervorgehobenen Wörter im Vorspann standen auf --c-ink
(Tiefschwarz) — auf schwarzem Grund unsichtbar. */
#leistungen .section-head .lead strong { color: var(--c-plaster) !important; }
#leistungen .services { border-top-color: rgba(255, 255, 255, .1); }
#leistungen .service {
border-bottom-color: rgba(255, 255, 255, .1);
position: relative;
/* Die linke Randspalte. Sie hieß bis 16.09.2026 nur „Platz links für
die Nummer" und stand als Zahl direkt im padding-left. Jetzt hat
sie einen Namen, weil die Nummer selbst sie ebenfalls braucht: sie
soll MITTEN in dieser Spalte stehen (Adian, 16.09.2026), und
„mitten" geht nur, wenn beide dieselbe Breite meinen.
Gemessen bei 1876 px Fenster: 92 px. */
--randspalte: clamp(0px, 5vw, 92px);
padding-left: var(--randspalte);
transition: background-color .4s var(--ease), padding-left .4s var(--ease);
}
/* Die große Umriss-Nummer.
16.09.2026, 09:43 — vom Zähler auf feste Nummern umgestellt, und
das ist eine Verschlechterung, die ich hier offen hinschreibe.
Hier stand vorher, der Zähler sei der Vorteil: "wer eine Leistung
ergänzt oder umstellt, bekommt die Nummerierung automatisch
richtig." Das stimmte auch — bis .services ein Abfrage-Container
wurde (siehe weiter unten). `container-type: inline-size` bringt
style containment mit, und das kappt CSS-Zähler.
Gemessen an einem Minimalfall, nicht vermutet: drei Zeilen in
einer Liste zeigten 01 / 01 / 01 statt 01 / 02 / 03, und zwar in
ALLEN drei Platzierungen — Container auf der Liste, Container eine
Ebene tiefer, Container auf jedem Eintrag einzeln. Zähler und
Container-Abfrage schließen sich an dieser Stelle aus.
Ich habe die Abfrage behalten, weil sie das Layout trägt, und den
Zähler aufgegeben, weil er nur die Beschriftung trägt.
⚠️ Preis, den jemand kennen muss: Eine SECHSTE Leistung bekommt
keine Nummer mehr. Sie fehlt dann sichtbar — das ist Absicht,
eine leere Stelle fällt auf, eine falsche Zahl nicht. Wer eine
Leistung ergänzt, hängt hier eine Zeile an. */
/* Die Nummer hängt an der ÜBERSCHRIFT, nicht an der Karte.
Adian am 16.09.2026: „Die sollte ein bisschen nach rechts und so
mittig in der linken Spalte von dem Kasten sein und abgeleitet dann
mit der Überschrift. Du kannst die Schriftgröße auch an die
Überschrift anpassen."
Vier Wünsche — und alle vier fallen ohne eine einzige gespiegelte
Zahl heraus, sobald das ::before am Titel statt an der Karte hängt:
nach rechts + mittig -> right: 100% setzt die rechte Kante an
die linke Titelkante, width + text-align
zentrieren in der Randspalte
abgeleitet mit dem
Titel (Grundlinie) -> line-height wird vom Titel GEERBT, also
dieselbe erste Zeile, ohne eigene Zahl
Titel-Schriftgröße -> font-size: 1em erbt sie und wächst mit,
wenn der Titel je anders skaliert wird
Vorher hing sie an .service und brauchte top: var(--luft-oben),
damit sie dem Titel der ersten Karte folgte (die hat --luft-oben: 0,
damit ihr Titel mit der Abschnittsüberschrift fluchtet). Am Titel
befestigt geht sie mit, wohin er geht — die Kopplung wird
überflüssig statt nur richtig gerechnet.
⚠️ Preis, den jemand kennen muss: Eine SECHSTE Leistung bekommt
keine Nummer mehr. Sie fehlt dann sichtbar — das ist Absicht,
eine leere Stelle fällt auf, eine falsche Zahl nicht. Wer eine
Leistung ergänzt, hängt unten eine Zeile an. */
#leistungen .service__title::before {
content: "";
position: absolute;
top: 0;
right: 100%;
width: var(--randspalte);
text-align: center;
font-family: var(--f-display);
font-size: 1em;
letter-spacing: .12em;
/* Diese Zahl ist GEMESSEN, nicht gerechnet.
Vorgeschichte, damit niemand denselben Weg zweimal geht: Hier
stand „.06em", dann „−.25em". Beide Werte stammten aus Messreihen,
deren Ursprung während der Messung wanderte — Page.captureScreenshot
mit captureBeyondViewport nimmt der Seite den Scrollbalken, der
zentrierte Inhalt springt um dessen halbe Breite (7,50 px bei
1876 px Fenster, 5,0 px bei 1000 px), und jede Stil-Änderung holt
ihn zurück. Lage und Bild wurden also in verschiedenen Zuständen
gelesen. Das Vorzeichen war dadurch VERDREHT.
Saubere Reihe vom 16.09.2026, Scrollbalken-Zustand vor jeder
Aufnahme geprüft (/tmp/krupic-startseite/einzug-reihe2-*.py),
fünf Einzugswerte × zwei Karten × zwei Fensterbreiten:
ohne Einzug steht die Tinte um −2,3 px (Titel 26 px) bzw.
−2,4/−2,8 px (Titel 35,2 px) zu weit LINKS;
text-indent wirkt bei text-align: center nur zur HÄLFTE
(gemessen 0,481 bis 0,533 px je px, größtes Residuum 0,20 px);
nötig sind deshalb +.136em (1876 px) bzw. +.186em (1000 px).
.16em liegt dazwischen: Restfehler +0,4 px bzw. −0,3 px, in
beiden Fällen unter einem halben Pixel und damit unsichtbar.
⚠️ Der Wert hängt nicht sauber an em: die beiden Breiten brauchen
.136 gegen .186em. Die Ursache ist NICHT geklärt. Ziffernbreite
ist es nicht (Karte 1 gegen Karte 3: nur .012em Unterschied).
Wer die Anzeigeschrift wechselt, muss die Reihe neu fahren. */
text-indent: .16em;
color: transparent;
-webkit-text-stroke: 1px rgba(183, 145, 63, .75);
transition: -webkit-text-stroke-color .4s var(--ease);
}
#leistungen .service:nth-child(1) .service__title::before { content: "01"; }
#leistungen .service:nth-child(2) .service__title::before { content: "02"; }
#leistungen .service:nth-child(3) .service__title::before { content: "03"; }
#leistungen .service:nth-child(4) .service__title::before { content: "04"; }
#leistungen .service:nth-child(5) .service__title::before { content: "05"; }
@media (max-width: 900px) {
#leistungen .service__title::before { display: none; }
}
/* Beim Darüberfahren reagiert die TONFLÄCHE — der Kasten, in dem
Überschrift und Text stehen. Sonst nichts.
⚠️ Hier stand bis 16.09.2026 das Gegenteil, und Adian hat beides
beanstandet:
1. Ein goldener Verlauf auf .service:hover, der über die GANZE
Zeilenbreite lief — auch unter dem Foto und im leeren Raum
rechts daneben, wo gar kein Kasten ist. Der Schein hielt sich an
nichts. Seine Worte: "kannst du das bitte auf den Kasten
anpassen, in dem das drinnen steht?"
2. :hover::before hob die Umriss-Nummer von rgba(183,145,63,.75)
auf --c-gold-hi. Das war der "Goldtext, der erscheint". Die
Nummer steht jetzt still; ihr Gold im Ruhezustand bleibt.
Der Ersatz ist EINE Regel im Container-Query weiter unten
(.service::after). Sie stand schon da und hob die Fläche nur um
zwei Prozent Weiß an — jetzt trägt sie den ganzen Effekt.
transparent statt none: style.css:745 legt beim Überfahren
rgba(183,145,63,.045) über die Karte. Das ist die unantastbare
Schicht, sie wird nicht geändert, sondern hier überschrieben — und
transparent ist ein Farbwert, der weich übergeht. none wäre ein
Sprung. */
@media (hover: hover) and (pointer: fine) {
#leistungen .service:hover { background: transparent; }
}
#leistungen .service__title { color: var(--c-plaster); }
#leistungen .service__body { color: #a29b93; }
#leistungen .service__body b {
color: var(--c-gold-hi);
text-decoration-color: rgba(223, 192, 115, .35);
}
/* Beim Überfahren bleibt die Unterstreichung RUHIG — derselbe Farbwert
wie im Ruhezustand, nicht heller.
Grund: Adian am 16.09.2026 wörtlich „außerdem gefällt mir der Effekt
nicht, bei dem der Goldtext erscheint … kannst du das bitte auf den
Kasten anpassen". Der Kasten reagiert jetzt (Tonfläche wird golden,
Bild wird heller) — der Text soll es nicht mehr tun. Die
Unterstreichung selbst bleibt: sie ordnet die Schlüsselbegriffe und
gehört zum Schriftbild, sie war nie der beanstandete Effekt.
Die Regel muss dastehen, obwohl sie nichts ändert: style.css:769
setzt hier sonst var(--c-gold). Eine gelöschte Zeile hieße nicht
„ruhig", sondern „die Grundschicht entscheidet". */
#leistungen .service:hover .service__body b {
text-decoration-color: rgba(223, 192, 115, .35);
}
/* --- Der Abschnittskopf bleibt beim Scrollen stehen ---
Während die fünf Leistungen durchlaufen, bleibt „Altbau, Putz und
Stuck“ links stehen. Das ist der Griff, der am stärksten nach
teurer Agentur aussieht, und er kostet nichts außer zwei Regeln.
Erst ab 1000 px: darunter wird die Textspalte zu schmal, und ein
stehender Kopf würde auf dem Handy den halben Bildschirm belegen. */
@media (min-width: 1000px) {
#leistungen > .wrap {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
#leistungen .section-head {
position: sticky;
/* Kopfleiste (72 px angedockt) plus Luft */
top: 116px;
margin-bottom: 0;
}
#leistungen .section-head h2 { max-width: 14ch; }
#leistungen .section-head .lead { font-size: 1rem; }
/* In der schmaleren rechten Spalte passt Titel neben Text nicht
mehr — untereinander liest es sich dort besser. */
#leistungen .service {
grid-template-columns: 1fr;
gap: .9rem;
}
#leistungen .services { border-top: 0; }
/* Die erste Zeile schließt ohne Doppelluft an: ihr Titel soll mit
der Überschrift links auf einer Linie beginnen. Deshalb kein
oberes Polster — und genau daraus entstand ein Fehler, der am
16.09.2026 gemessen wurde (Adian: "mache es synchron").
Die Tonfläche in Abschnitt 15 nimmt ihren oberen Abstand vom
KARTENRAND, das Bild dagegen vom Polster. Bei den Karten 2 bis 5
standen beide 24 px auseinander, bei Karte 1 lag das Bild 24 px
ÜBER der Fläche — Spanne 48 px, das sichtbare Aus-der-Reihe-Tanzen
der ersten Zeile.
Statt das Polster anzugleichen (dann verliert die erste Zeile ihre
Fluchtlinie zur Überschrift) folgt die Fläche jetzt dem Polster:
eine Variable, an derselben Stelle gesetzt, an der die Ursache
steht. Wer hier das padding-top ändert, ändert beides zugleich. */
#leistungen .service:first-child {
padding-top: 0;
--luft-oben: 0px;
}
}
/* ============================================================
6. BETRIEB — bleibt schwarz, das Foto bleibt unverändert
Adian am 15.09.2026: „Das Bild von meinem Vater, also das bei
Betrieb, das kannst du so lassen.“ Also bleibt es: derselbe
Ausschnitt, dieselbe Datei, dasselbe Seitenverhältnis 4:5.
Geändert wird nur der Rahmen darum.
============================================================ */
#betrieb {
background: linear-gradient(to bottom,
var(--stufe-leist-ende) 0,
var(--stufe-betrieb-ende) 100%);
}
.about__titel { letter-spacing: -0.03em; }
/* Das Portrait bekommt einen versetzten Goldrahmen: eine Haarlinie,
die um 14 px nach unten rechts verschoben hinter dem Bild
hervorschaut. Alte Handwerkerarbeit wird gern so gezeigt — Bild
und Rahmen als zwei getrennte Dinge. */
.about__media {
border-color: rgba(183, 145, 63, .35);
/* style.css setzt hier `overflow: hidden`. Das schneidet den
versetzten Rahmen unten drunter weg — gemessen am 15.09.2026, er
war unsichtbar. Aufheben ist gefahrlos: das Foto ist auf 100 %
Breite und Höhe mit `object-fit: cover` gesetzt und füllt den
Kasten exakt aus, es ragt nichts heraus. */
overflow: visible;
}
.about__media::after {
content: "";
position: absolute;
inset: 14px -14px -14px 14px;
border: 1px solid rgba(183, 145, 63, .3);
pointer-events: none;
z-index: -1;
}
/* Der Rahmen liegt hinter dem Bild und braucht deshalb Platz um die
Bildspalte herum, sonst wird er vom Nachbarn abgeschnitten. */
.about { overflow: visible; }
@media (min-width: 901px) {
.about__media { margin-right: 14px; }
}
@media (max-width: 900px) {
/* Auf dem Handy steht das Bild randnah — ein versetzter Rahmen
würde über den Bildschirmrand hinauslaufen. */
.about__media::after { display: none; }
}
/* Das Zitat trägt nur den senkrechten Goldstrich — kein Anführungszeichen.
✏️ Zeichen entfernt 15.09.2026, 21:38 auf Adians Entscheidung ("2b").
Vorgeschichte: Es stand ursprünglich mit `left: -.15em` auf dem Strich
(sein Bild vom 15.09.), wurde um 20:57 nach rechts über die erste Zeile
gerückt — und ist jetzt ganz weg, weil zwei Blickfänge nebeneinander
einer zu viel sind. Der Stand mit Zeichen liegt in
`design.css.RUECKHOL-2138-vor-zitat-2b`.
Deshalb entfallen hier auch `padding-top` (die Zeile existierte nur für
das Zeichen) und `position: relative` — unter `.quote` gibt es in
style.css kein absolut positioniertes Kind mehr, das ihn bräuchte
(nachgesehen, nicht angenommen). */
.quote {
padding-left: 2rem;
border-left-width: 2px;
}
/* ============================================================
7. DER ÜBERGANG INS LICHT
Hier öffnet sich die Seite — einmal, über 260 px, ohne Kante.
Der Verlauf liegt oben IM Einsatzgebiet-Abschnitt, und dessen
oberes Polster ist so groß, dass in der Übergangszone kein Text
steht. Das ist der Trick: Der Übergang passiert dort, wo
ohnehin nichts ist.
============================================================ */
#einsatzgebiet {
background-color: var(--stufe-hell-1);
background-image: linear-gradient(to bottom,
var(--stufe-betrieb-ende) 0,
var(--stufe-warm) calc(var(--bruecke) * .5),
var(--stufe-hell-1) var(--bruecke));
background-repeat: no-repeat;
padding-top: calc(var(--bruecke-luft) + 2rem);
}
.einsatz__titel { letter-spacing: -0.03em; }
/* Die Karte bekommt denselben versetzten Goldrahmen wie das
Portrait — damit die beiden Bildflächen der Seite als Paar
auftreten statt als zwei Zufälle. */
.einsatz__karte { position: relative; }
.einsatz__karte::after {
content: "";
position: absolute;
inset: 14px -14px -14px 14px;
border: 1px solid rgba(183, 145, 63, .35);
pointer-events: none;
z-index: -1;
}
.karte { border-color: rgba(183, 145, 63, .3); position: relative; }
@media (max-width: 900px) {
.einsatz__karte::after { display: none; }
}
/* ============================================================
8. ABLAUF — von dunkel auf hell gedreht
Vorher war dieser Abschnitt schwarz und saß zwischen zwei hellen
— genau so ein Sprung, wie Adian ihn nicht mehr will. Jetzt läuft
er im hellen Teil des Bogens mit. Auch hier müssen die Textfarben
mitgedreht werden; sie stehen vollständig beisammen.
Die vier Schritte bekommen eine durchgehende Linie mit Punkten —
ein Ablauf soll wie ein Weg aussehen, nicht wie vier Kästen.
============================================================ */
#ablauf {
background: linear-gradient(to bottom,
var(--stufe-hell-1) 0,
var(--stufe-hell-2) 100%);
color: var(--c-ink);
}
#ablauf .eyebrow { color: var(--c-gold-dim); }
#ablauf .section-head h2 { color: var(--c-ink); }
#ablauf .section-head .lead { color: var(--c-stone); }
#ablauf .step h3 { color: var(--c-ink); }
#ablauf .step p { color: var(--c-stone); }
#ablauf .ablauf__hinweis { color: var(--c-stone); }
#ablauf .ablauf__hinweis strong { color: var(--c-ink); }
/* Die Schrittnummer bekommt nur die dunklere Goldstufe, damit sie auf dem
hellen Grund lesbar ist (gemessen 4,29:1 statt 2,59:1). Sonst nichts:
style.css setzt hier eine reine Zahl ohne Rahmen und ohne Fläche.
Entfernt am 15.09.2026 auf Adians Wunsch — je ein schwarzer Strich über
Zahl und Text, keine zweite Linie darüber:
· der weiße Hintergrund (erzeugte einen Balken über die ganze Spalte)
· die goldene Verbindungslinie samt ihrem Stützwerk aus position/z-index
· border-color (wirkungslos, es gibt keine border-width) */
#ablauf .step::before {
color: var(--c-gold-dim);
}
/* ============================================================
9. KONTAKT — wärmstes Beige, direkt vor dem Fuß
============================================================ */
#kontakt {
background: linear-gradient(to bottom,
var(--stufe-hell-2) 0,
var(--stufe-hell-3) 100%);
}
#kontakt .section-head h2 { letter-spacing: -0.03em; }
/* Der schwarze Direktkontakt-Kasten ist auf dem Beige die einzige
dunkle Fläche und wirkt dadurch wie eine Visitenkarte, die auf
dem Tisch liegt. Ein feiner Goldrand und ein weicher Schatten
verstärken das. */
.contact-direct {
border: 1px solid rgba(183, 145, 63, .35);
box-shadow: 0 24px 60px -30px rgba(16, 17, 18, .55);
}
.contact-direct h3 {
padding-bottom: 1.1rem;
margin-bottom: 1.1rem;
border-bottom: 1px solid rgba(183, 145, 63, .3);
}
/* Die Eingabefelder bekommen einen ruhigeren Rahmen und beim
Hineinklicken einen goldenen statt eines grauen. */
.field input,
.field select,
.field textarea {
border-color: rgba(16, 17, 18, .16);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(138, 109, 44, .5); }
/* ============================================================
10. DER ÜBERGANG ZURÜCK INS DUNKEL
Derselbe Griff wie beim Übergang ins Licht, nur andersherum:
Der Verlauf liegt oben im Fußbereich, dessen Polster ist
entsprechend größer.
============================================================ */
body .site-footer {
background-color: var(--c-ink);
background-image: linear-gradient(to bottom,
var(--stufe-hell-3) 0,
var(--stufe-warm) calc(var(--bruecke) * .5),
var(--c-ink) var(--bruecke));
background-repeat: no-repeat;
/* Die harte Trennlinie über dem Fuß muss weg — sie war genau die
Kante, die der Übergang auflöst. */
border-top: 0;
padding-top: calc(var(--bruecke) + 2.5rem);
}
/* Auf den Rechtsseiten (Impressum, Datenschutz) gibt es keinen
Bogen — dort steht der Fuß direkt unter hellem Text und braucht
den Übergang genauso, nur kürzer. */
.legal + .site-footer,
.seite-mitteilung .site-footer {
background-image: none;
padding-top: 3.5rem;
border-top: 1px solid var(--c-line-dark);
}
.footer-grid { border-bottom-color: rgba(183, 145, 63, .25); }
.footer-titel { color: var(--c-gold); }
/* ============================================================
11. FEINSCHLIFF AN DER BEWEGUNG
Das Einblenden beim Scrollen gab es schon (.reveal in style.css).
Hier wird es nur etwas weicher: leicht von unten UND ein Hauch
größer werdend. Der Unterschied ist klein, aber er nimmt der
Bewegung das Ruckartige.
============================================================ */
.js .reveal {
transform: translateY(28px) scale(.995);
transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-in { transform: none; }
/* Knöpfe: der goldene bekommt beim Darüberfahren einen warmen
Schein statt nur einer anderen Füllfarbe. */
.btn--gold {
box-shadow: 0 0 0 0 rgba(183, 145, 63, 0);
transition: background-color .25s var(--ease), border-color .25s var(--ease),
box-shadow .35s var(--ease), transform .25s var(--ease);
}
.btn--gold:hover { box-shadow: 0 10px 30px -12px rgba(183, 145, 63, .75); }
/* ============================================================
12. RECHTSSEITEN (Impressum, Datenschutz, 404, Danke)
Sie behalten ihren Aufbau, bekommen aber dieselbe Handschrift:
warmer Papiergrund statt reinem Weiß, Gold an den Zwischen-
überschriften.
============================================================ */
/* ⚠️ Hier stand bis zum 15.09.2026 ein Farbverlauf auf `.legal`. Das war
falsch: `.legal` trägt im HTML zugleich die Klasse `wrap`, ist also auf
die Textspalte begrenzt. Der Verlauf endete deshalb an der Spaltenkante
statt am Fensterrand — gemessen auf gleicher Höhe: in der Spalte #f1ebe0,
daneben #f7f4ee. Eine senkrechte Naht mitten auf der Seite, also genau
das Gegenteil dessen, wofür diese Datei da ist.
Der Verlauf ist ersatzlos weg, statt ihn auf `body` umzubiegen: Die
Rechtsseiten sind Fließtext, ein Verlauf über 3.000 px bringt dort nichts,
und jede Lösung mit `:has()` hätte alte Geräte ausgeschlossen. Der warme
Papiergrund kommt weiterhin aus style.css. */
.legal h1 { letter-spacing: -0.03em; }
.legal h2 { border-top-color: rgba(183, 145, 63, .3); }
.mitteilung__zahl { -webkit-text-stroke-color: var(--c-gold); }
/* ============================================================
13. BEWEGUNG REDUZIEREN
Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat,
bekommt keine Animationen. style.css regelt das schon für die
dort angelegten Effekte; hier kommen die Effekte dieser Datei
dazu.
============================================================ */
@media (prefers-reduced-motion: reduce) {
/* Eine Fortschrittslinie, die nicht mitläuft, wäre nur ein
dauerhaft goldener Balken — dann lieber gar keiner. */
.site-header::after { display: none; }
.header-inner,
.site-header.is-stuck .header-inner { height: 82px; transition: none; }
.wordmark__marke,
.wordmark__name { transition: none; }
.js .reveal { transform: none; }
}
/* ============================================================
14. DRUCK
Der Farbbogen ist für den Bildschirm gedacht. Auf Papier kostet
er nur Toner und macht den Text schlechter lesbar.
============================================================ */
@media print {
body::before { display: none; }
#leistungen, #betrieb, #einsatzgebiet, #ablauf, #kontakt,
body .site-footer, .legal {
background: #fff !important;
color: #000 !important;
}
#leistungen .service__title::before,
.about__media::after,
.einsatz__karte::after { display: none; }
}
/* ============================================================
UEBERGANG SCHWARZ <-> HELL — eingebaut 15.09.2026, 20:46
Ueberarbeitet 15.09.2026, 20:57: Schatten kraeftiger (Adian:
"noch ein bisschen mehr betonen, dass man Hintergrund und
Vordergrund deutlicher sieht") und die Rechtsseiten bekommen
dieselbe Welle statt des Verlaufs.
Erzeugt von /tmp/krupic-proben/welle2.py (Fassung 2).
⚠️ Diesen Block NICHT von Hand aendern — das Skript neu laufen lassen.
============================================================ */
/* Wellenkante, Fassung 2 — nach Adians Korrektur vom 15.09.2026:
scharfe Schnittkante statt Verlauf, Schlagschatten fuer die Ebenenwirkung,
Form aus seiner Skizze geglaettet (3 Fourier-Glieder).
Erzeugt von welle2.py. Nicht von Hand aendern — das Skript laufen lassen. */
#einsatzgebiet {
background-color: #f7f4ee;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 298' preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0,221.27C16.67,231.67 33.33,237.69 50.00,239.95C66.67,242.21 83.33,240.73 100.00,236.40C116.67,232.07 133.33,224.90 150.00,215.95C166.67,206.99 183.33,196.25 200.00,184.80C216.67,173.35 233.33,161.19 250.00,149.27C266.67,137.36 283.33,125.71 300.00,115.07C316.67,104.43 333.33,94.81 350.00,86.71C366.67,78.62 383.33,72.05 400.00,67.23C416.67,62.41 433.33,59.34 450.00,58.00C466.67,56.66 483.33,57.03 500.00,58.88C516.67,60.74 533.33,64.07 550.00,68.50C566.67,72.93 583.33,78.46 600.00,84.64C616.67,90.83 633.33,97.66 650.00,104.72C666.67,111.78 683.33,119.05 700.00,126.16C716.67,133.28 733.33,140.23 750.00,146.74C766.67,153.25 783.33,159.32 800.00,164.74C816.67,170.16 833.33,174.94 850.00,178.94C866.67,182.95 883.33,186.18 900.00,188.55C916.67,190.92 933.33,192.42 950.00,192.95C966.67,193.48 983.33,193.03 1000.00,191.45C1016.67,189.87 1033.33,187.16 1050.00,183.09C1066.67,179.02 1083.33,173.59 1100.00,166.50C1116.67,159.42 1133.33,150.67 1150.00,139.92C1166.67,129.18 1183.33,116.44 1200.00,101.37L1200,894L0,894Z' transform='translate(0,-2)'/%3E%3C/clipPath%3E%3Cfilter id='b' x='-10%' y='-60%' width='120%' height='220%' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='15'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0,221.27C16.67,231.67 33.33,237.69 50.00,239.95C66.67,242.21 83.33,240.73 100.00,236.40C116.67,232.07 133.33,224.90 150.00,215.95C166.67,206.99 183.33,196.25 200.00,184.80C216.67,173.35 233.33,161.19 250.00,149.27C266.67,137.36 283.33,125.71 300.00,115.07C316.67,104.43 333.33,94.81 350.00,86.71C366.67,78.62 383.33,72.05 400.00,67.23C416.67,62.41 433.33,59.34 450.00,58.00C466.67,56.66 483.33,57.03 500.00,58.88C516.67,60.74 533.33,64.07 550.00,68.50C566.67,72.93 583.33,78.46 600.00,84.64C616.67,90.83 633.33,97.66 650.00,104.72C666.67,111.78 683.33,119.05 700.00,126.16C716.67,133.28 733.33,140.23 750.00,146.74C766.67,153.25 783.33,159.32 800.00,164.74C816.67,170.16 833.33,174.94 850.00,178.94C866.67,182.95 883.33,186.18 900.00,188.55C916.67,190.92 933.33,192.42 950.00,192.95C966.67,193.48 983.33,193.03 1000.00,191.45C1016.67,189.87 1033.33,187.16 1050.00,183.09C1066.67,179.02 1083.33,173.59 1100.00,166.50C1116.67,159.42 1133.33,150.67 1150.00,139.92C1166.67,129.18 1183.33,116.44 1200.00,101.37L1200,-596L0,-596Z' fill='%23101112'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M0,221.27C16.67,231.67 33.33,237.69 50.00,239.95C66.67,242.21 83.33,240.73 100.00,236.40C116.67,232.07 133.33,224.90 150.00,215.95C166.67,206.99 183.33,196.25 200.00,184.80C216.67,173.35 233.33,161.19 250.00,149.27C266.67,137.36 283.33,125.71 300.00,115.07C316.67,104.43 333.33,94.81 350.00,86.71C366.67,78.62 383.33,72.05 400.00,67.23C416.67,62.41 433.33,59.34 450.00,58.00C466.67,56.66 483.33,57.03 500.00,58.88C516.67,60.74 533.33,64.07 550.00,68.50C566.67,72.93 583.33,78.46 600.00,84.64C616.67,90.83 633.33,97.66 650.00,104.72C666.67,111.78 683.33,119.05 700.00,126.16C716.67,133.28 733.33,140.23 750.00,146.74C766.67,153.25 783.33,159.32 800.00,164.74C816.67,170.16 833.33,174.94 850.00,178.94C866.67,182.95 883.33,186.18 900.00,188.55C916.67,190.92 933.33,192.42 950.00,192.95C966.67,193.48 983.33,193.03 1000.00,191.45C1016.67,189.87 1033.33,187.16 1050.00,183.09C1066.67,179.02 1083.33,173.59 1100.00,166.50C1116.67,159.42 1133.33,150.67 1150.00,139.92C1166.67,129.18 1183.33,116.44 1200.00,101.37L1200,-596L0,-596Z' fill='%23000' opacity='0.48' filter='url(%23b)' transform='translate(0,11)'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(#101112, #101112);
background-size: 100% 298px, 100% 58px;
background-position: top left, top left;
background-repeat: no-repeat, no-repeat;
padding-top: calc(240px + 2rem);
}
body .site-footer {
background-color: #101112;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 298' preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,-596L0,-596Z' transform='translate(0,2)'/%3E%3C/clipPath%3E%3Cfilter id='b' x='-10%' y='-60%' width='120%' height='220%' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='15'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,-596L0,-596Z' fill='%23eee7da'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,894L0,894Z' fill='%23000' opacity='0.48' filter='url(%23b)' transform='translate(0,-11)'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(#eee7da, #eee7da);
background-size: 100% 298px, 100% 58px;
background-position: top left, top left;
background-repeat: no-repeat, no-repeat;
border-top: 0;
padding-top: calc(240px + 2.5rem);
}
/* Die Danke-Seite bleibt schlicht — sie ist eine Quittung, keine Seite. */
.seite-mitteilung .site-footer {
background-image: none;
padding-top: 3.5rem;
}
/* Rechtsseiten bekommen DIESELBE Welle — Adian, 15.09.2026: "dass bei dem
Impressum und der Datenschutzerklaerung das selbe Design mit den Wellen
anstatt von dem Verlauf eingebaut wird."
Eigene Grafik statt derselben, weil ueber der Naht dort eine ANDERE Farbe
liegt: der Seitengrund der Rechtsseiten, nicht das waermste Beige der
Startseite. Die oberste Farbe der Grafik muss exakt die Farbe darueber
sein, sonst entsteht genau die waagerechte Kante, die weg soll. */
.legal + .site-footer {
background-color: #101112;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 298' preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,-596L0,-596Z' transform='translate(0,2)'/%3E%3C/clipPath%3E%3Cfilter id='b' x='-10%' y='-60%' width='120%' height='220%' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='15'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,-596L0,-596Z' fill='%23f2ece2'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,894L0,894Z' fill='%23000' opacity='0.48' filter='url(%23b)' transform='translate(0,-11)'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(#f2ece2, #f2ece2);
background-size: 100% 298px, 100% 58px;
background-position: top left, top left;
background-repeat: no-repeat, no-repeat;
border-top: 0;
padding-top: calc(240px + 2.5rem);
}
/* Auf dem Handy reicht das Blatt bis an den Fuss, also liegt ueber der Naht
die BLATTFARBE. Dieselbe Welle, nur mit dem anderen Hellwert. */
@media (max-width: 700px) {
.legal + .site-footer {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 298' preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,-596L0,-596Z' transform='translate(0,2)'/%3E%3C/clipPath%3E%3Cfilter id='b' x='-10%' y='-60%' width='120%' height='220%' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='15'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,-596L0,-596Z' fill='%23fdfbf7'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M0,76.68C16.67,66.28 33.33,60.26 50.00,58.00C66.67,55.74 83.33,57.22 100.00,61.55C116.67,65.88 133.33,73.05 150.00,82.00C166.67,90.96 183.33,101.69 200.00,113.15C216.67,124.60 233.33,136.76 250.00,148.67C266.67,160.58 283.33,172.24 300.00,182.88C316.67,193.52 333.33,203.14 350.00,211.24C366.67,219.33 383.33,225.90 400.00,230.72C416.67,235.54 433.33,238.60 450.00,239.95C466.67,241.29 483.33,240.92 500.00,239.06C516.67,237.21 533.33,233.88 550.00,229.45C566.67,225.01 583.33,219.49 600.00,213.30C616.67,207.12 633.33,200.28 650.00,193.23C666.67,186.17 683.33,178.90 700.00,171.79C716.67,164.67 733.33,157.72 750.00,151.21C766.67,144.70 783.33,138.63 800.00,133.21C816.67,127.79 833.33,123.01 850.00,119.01C866.67,115.00 883.33,111.76 900.00,109.39C916.67,107.03 933.33,105.52 950.00,105.00C966.67,104.47 983.33,104.92 1000.00,106.50C1016.67,108.07 1033.33,110.78 1050.00,114.85C1066.67,118.92 1083.33,124.36 1100.00,131.44C1116.67,138.53 1133.33,147.28 1150.00,158.02C1166.67,168.77 1183.33,181.51 1200.00,196.58L1200,894L0,894Z' fill='%23000' opacity='0.48' filter='url(%23b)' transform='translate(0,-11)'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(#fdfbf7, #fdfbf7);
background-size: 100% 298px, 100% 58px;
background-position: top left, top left;
background-repeat: no-repeat, no-repeat;
}
}
/* Auf schmalen Schirmen wird die Welle NICHT gestaucht, sondern angeschnitten:
gestaucht wuerden aus drei ruhigen Huegeln enge Zacken (gemessen 15.09.2026).
Die Grafik behaelt 860 px Mindestbreite und steht mittig. */
/* 21.09.2026, Adians Befund am Handy: "die Welle ist nicht so gut
abgeschnitten und geht nicht gesyncht durch."
URSACHE: Die feste Breite von 860 px wurde bei 390 px Schirm MITTIG
angeschnitten - sichtbar war dadurch nur eine fallende Flanke, die
links mit einer harten Kante ansetzte. Aus der Welle wurde eine Schräge.
BEHOBEN: Die Grafik wird auf 230 % der Schirmbreite gezogen und bei 38 %
angesetzt. Dadurch füllt EIN ruhiger Hügel der bestehenden Welle die
Breite - links und rechts läuft sie auf gleicher Höhe aus.
NICHT gestaucht (aus drei Hügeln würden enge Zacken, gemessen 15.09.)
und die Wellenform selbst bleibt unangetastet - es ist dieselbe Grafik,
nur ein anderer Ausschnitt davon. Vier Varianten wurden fotografiert
und verglichen, bevor diese eingebaut wurde. */
@media (max-width: 860px) {
#einsatzgebiet, body .site-footer, .legal + .site-footer {
background-size: 230% 420px, 100% 58px;
background-position: 38% top, top left;
padding-top: calc(445px + 2rem);
}
}
@media (max-width: 560px) {
#einsatzgebiet, body .site-footer, .legal + .site-footer {
background-size: 230% 380px, 100% 58px;
padding-top: calc(405px + 1.5rem);
}
}
/* ============================================================
RECHTSSEITEN (Impressum / Datenschutz) — eingebaut 15.09.2026, 20:46
Ueberarbeitet 20:57: die beiden Verlaeufe zum Fuss sind entfallen,
das macht jetzt die Welle im Block darueber.
REPARIERT 16.09.2026, 10:36 (Lea): In der Zeile darueber fehlte seit
dem 15.09. das oeffnende "/*". Der Browser las die Gleichheitszeichen
als Anfang eines Selektors, sammelte weiter und verwarf dann alles
bis zum Ende des ERSTEN Blocks dahinter.
Zwei Messungen, weil die eine die andere nicht ersetzt:
- dieselbe Datei vor und nach dem Einsetzen des "/*": 203 gegen 204
Regeln. Das beziffert den Schaden: genau eine.
- Selektorliste gegen den Rueckholpunkt: sie nennt die fehlende beim
NAMEN — ".legal". Ohne diesen zweiten Lauf haette ich nur aus dem
Fehlermodell geschlossen, welche es ist. Eine Schlussfolgerung ist
keine Messung.
Die Folge war nicht harmlos: ".legal { max-width: … }" rueckt die
Spalte auf Impressum und Datenschutz schmal. Sie hat seit ihrem
Einbau nie gegriffen — also war genau die Reparatur wirkungslos, die
Adians Punkt 3 ("Impressum und Datenschutz tragen das alte Design")
beantworten sollte. Der Fehler sass eine Zeile ueber ihr.
============================================================ */
/* ============================================================
PROBE — Rechtsseiten (Impressum, Datenschutz)
15.09.2026, Lea. Antwort auf Adians Punkt 3: "Impressum und
Datenschutz tragen das alte Design."
GEMESSENE URSACHE (messe_reichweite.py):
Von 59 Regeln aus design.css, die auf der Startseite ein Element
finden, greifen auf dem Impressum nur 13 — und 9 davon sind Kopf,
Fuss und Grundfarben. Fuer `.legal` selbst gibt es in design.css
genau zwei Zeilen. Die Rechtsseiten sehen aus wie vorher, weil sie
es fast sind.
WAS HIER NICHT PASSIERT:
- Kein Text wird angefasst. Pflichttexte bleiben Wort fuer Wort.
- Die Lesebreite (--w-text: 62ch) bleibt. Sie ist in brand.css
ausdruecklich begruendet ("zu lange Zeilen"), also keine Schwaeche,
sondern eine Entscheidung.
- Keine Verkaufsgestaltung. Ein Impressum soll ruhig aussehen.
============================================================ */
/* ---- 1. Die Spalte gerade ruecken -------------------------------
Gemessen: `main.legal` ist 1200 px breit, die Goldlinien ueber den
Zwischenueberschriften 1072 px, die Absaetze darunter 568 px. Die
Linien sind also fast doppelt so breit wie der Text, den sie
ueberschreiben. Auf der Startseite hat kein einziges Element diese
Diskrepanz — das ist der Grund, warum die Seite "nicht dazugehoerig"
wirkt, noch bevor man eine Farbe betrachtet.
Statt den Text breiter zu machen (das waere gegen die begruendete
Lesebreite) wird der Container so schmal wie der Text. Dann steht
alles in EINER Spalte, und die Spalte steht mittig statt links. */
.legal {
max-width: calc(62ch + 2 * var(--pad-x));
}
/* ---- 2. Der Titel bekommt denselben Anschlag wie die Startseite ---
Dort steht ueber jeder Ueberschrift eine goldene Marke (.eyebrow mit
Strich). Hier steht das h1 nackt auf der Flaeche. Ein kurzer
Goldstrich DARUNTER nimmt denselben Griff auf, ohne dass eine
Augenbraue erfunden werden muesste, die es im Text nicht gibt. */
.legal h1 {
margin-bottom: 1.6rem;
}
.legal h1::after {
content: "";
display: block;
width: 64px;
height: 2px;
margin-top: 1.1rem;
background: linear-gradient(to right, var(--c-gold) 0, var(--c-gold-dim) 100%);
}
/* ---- 3. Der Uebergang zum Fussbereich ----------------------------
design.css:595 sagt fuer die Startseite ausdruecklich: "Die harte
Trennlinie ueber dem Fuss muss weg — sie war genau die Kante, die der
Uebergang aufloest." Auf den Rechtsseiten steht sie noch: eine
1-px-Linie und danach unvermittelt Schwarz.
Hier derselbe Griff, nur kuerzer: Ein Impressum hat keinen Bogen ueber
die ganze Seite, also braucht es auch keine 260 px lange Bruecke.
140 px reichen, um die Kante aufzuloesen.
ACHTUNG, die Falle von heute Vormittag: Die oberste Farbe des
Verlaufs muss exakt die Farbe des Bereichs DARUEBER sein, sonst
entsteht genau die waagerechte Kante, die man beseitigen wollte.
Erster Versuch war falsch, und die Messung hat es gezeigt: Ich habe
den Verlauf mit der Blattfarbe beginnen lassen, weil das Blatt bis an
den Fuss reichte. Gemessen an der Naht: in der Blattmitte sprang die
Farbe nur um 1 Stufe (unsichtbar), links und rechts DANEBEN aber um
10 bis 20 Stufen — dort liegt ja nicht das Blatt, sondern die Seite.
Ein Verlauf ueber die ganze Fensterbreite kann nicht zwei Farben
zugleich fortsetzen.
Deshalb endet das Blatt jetzt mit Abstand ueber dem Fuss. Dann liegt
ueber der Naht auf ganzer Breite dieselbe Farbe — der Seitengrund —
und die Kante hat nur noch eine Farbe fortzusetzen. Nebenbei sieht
ein Blatt, das auf der Flaeche liegt, auch richtiger aus als eines,
das unten abgeschnitten ist.
✏️ GEAENDERT 15.09.2026 auf Adians Wunsch: "dass bei dem Impressum und
der Datenschutzerklaerung das selbe Design mit den Wellen anstatt von
dem Verlauf eingebaut wird."
Hier stand bis dahin ein Verlauf (Beige → Warm → Schwarz ueber 140 px).
Er ist ERSATZLOS weg — die Welle steht jetzt im Wellen-Block weiter
oben in dieser Datei und traegt dort die Rechtsseiten-Farben. Wichtig:
Ein Verlauf HIER wuerde die Welle ueberschreiben, weil dieser Block
spaeter kommt. Deshalb bleibt die Stelle leer und nicht "nur kleiner".
Was oben steht: `.legal + .site-footer` mit Oberfarbe #f2ece2
(Seitengrund, Desktop) und #fdfbf7 (Blattfarbe, ab 700 px abwaerts). */
/* ---- 4. Zwei Toene statt einem -----------------------------------
Gemessen: der Seitengrund ist auf beiden Seiten identisch
rgb(247,244,238). Auf der Startseite liest man ihn als warmes Beige,
weil dunkle Flaechen daneben liegen. Auf einer Rechtsseite liegt
nichts daneben — und eine Farbe ohne Nachbarfarbe wird als Weiss
gelesen. Genau das hat mich heute selbst getaeuscht, bis ich
nachgemessen habe.
Deshalb kein neuer Farbton, sondern ein Nachbar: der Textblock steht
eine Spur heller als der Seitengrund. Der Unterschied ist klein
(#f7f4ee zu #fdfbf7) und soll nicht auffallen — er soll nur dafuer
sorgen, dass das Beige ringsum als Beige sichtbar wird. */
body:has(.legal) {
background-color: var(--stufe-hell-2);
}
.legal {
background-color: #fdfbf7;
border: 1px solid var(--c-line);
/* Oben steht der feste schwarze Kopf; die 160 px Innenabstand aus
style.css sind genau der Platz darunter. Ein Teil davon wird hier
zu Aussenabstand, damit das Blatt unter dem Kopf ANFAENGT statt an
ihm zu kleben — die Summe bleibt gleich, der Text rutscht nicht. */
margin-top: 96px;
padding-top: 64px;
/* Unten der Abstand, der die Naht rettet (siehe Abschnitt 3). */
margin-bottom: 96px;
}
/* :has() kennen aeltere Geraete nicht. Ohne die Regel oben bleibt der
Seitengrund wie bisher und der Textblock ist minimal heller — das
ist kein Fehler, nur ein schwaecherer Effekt. Nichts bricht. */
/* Auf dem Handy gibt es keinen Tisch, auf dem ein Blatt liegen koennte:
die Spalte fuellt den Bildschirm, links und rechts ist nichts. Ein
Rahmen um etwas, das ohnehin alles ist, sieht dann nicht nach Papier
aus, sondern nach einem Kasten, der zufaellig aufhoert. Gemessen am
15.09.2026 im Handy-Schuss: die Unterkante las sich als Abschnitts-
wechsel, nicht als Blattrand. Also dort zurueck auf eine Flaeche. */
@media (max-width: 700px) {
body:has(.legal) { background-color: #fdfbf7; }
.legal {
border: 0;
margin-top: 0;
padding-top: 124px;
margin-bottom: 0;
}
/* Ueber der Naht liegt hier wieder EINE Farbe — diesmal die des
Blattes, weil es die ganze Breite einnimmt. Die Welle muss ihr
folgen, sonst ist die Kante zurueck (derselbe Fehler wie oben,
nur andersherum). Das macht jetzt die Handy-Fassung der Welle im
Wellen-Block (Oberfarbe #fdfbf7) — der Verlauf, der hier stand,
ist am 15.09.2026 ersatzlos entfallen. */
}
/* ---- 5. Der Fussbereich der Rechtsseiten -------------------------
Er traegt dort `.footer-bottom` mit einem inline gesetzten
padding-top:0 — das bleibt unangetastet, es steht im HTML. */
.legal + .site-footer .footer-links--schlicht a {
color: var(--c-gold-dim);
}
/* ============================================================
6. DER LEITSATZ-MOMENT
Eingebaut 15.09.2026 nach Adians Abnahme ("ich finde es besser wo
der satz jetzt steht ... und den oben dann rausnehmen").
Warum es diesen Abschnitt gibt:
Zwischen dem Ende des Betriebstexts und dem Beginn der Welle
standen gemessene ~390 px reines Schwarz ohne Inhalt. Genau dort
sitzt jetzt der staerkste Satz der Seite - gross, ruhig, und er
leuchtet beim Scrollen Wort fuer Wort auf.
Der Satz ist WOERTLICH derselbe, der vorher klein im Betriebstext
stand (blockquote.quote); dort ist er im selben Zug entfernt worden,
damit er nicht zweimal auf der Seite steht.
Farbe: #101112 flach. Das ist exakt der Ton, mit dem #betrieb
endet UND mit dem die Welle von #einsatzgebiet oben ansetzt -
deshalb entsteht weder oben noch unten eine Kante.
Das Verhalten steht in assets/js/design.js.
============================================================ */
/* Der Betriebsabschnitt gibt sein unteres Polster ab — der Satzmoment
bringt sein eigenes mit. Sonst waechst die Seite, statt das
gemessene Leerfeld zu fuellen. */
#betrieb { padding-bottom: clamp(2rem, 4vw, 3rem); }
.satzmoment {
background: #101112;
color: var(--c-plaster);
padding-top: clamp(3.5rem, 7vw, 5.5rem);
padding-bottom: clamp(3rem, 6vw, 4.5rem);
/* Kein eigener Rahmen, keine Linie: der Satz soll allein stehen. */
}
.satzmoment__block {
/* ⚠️ Hier stand zuerst 24ch. Gemessen am Bild: das presst den Satz
zu einer schmalen Saeule mit fast einem Wort je Zeile (696 px hoch
statt zwei Zeilen). Der Umbruch kommt aus dem im HTML, die
Breite muss die laengere der beiden Zeilen tragen koennen. */
max-width: 100%; /* gemessen: 94 % ergab 1008 px, Zeile 2 braucht ~1030 px */
margin: 0 auto;
border: 0;
padding: 0;
text-align: center;
}
/* Feine goldene Linie darueber — dasselbe Zeichen wie im Hero,
nur kuerzer. Sie sagt: hier faengt etwas Eigenes an. */
.satzmoment__block::before {
content: "";
display: block;
width: 56px;
height: 2px;
margin: 0 auto clamp(2rem, 4vw, 3rem);
background: linear-gradient(90deg, var(--c-gold), var(--c-gold-hi));
}
.satzmoment__satz {
font-family: var(--f-display);
font-weight: var(--display-weight);
font-size: clamp(2rem, 4.6vw, 3.6rem);
line-height: 1.16;
letter-spacing: -0.015em;
margin: 0;
/* ⚠️ KEIN text-wrap: balance. Der Umbruch steht als im HTML
(nach dem Komma, wo der Gedanke bricht). balance verteilt
stattdessen auf drei "ausgewogene" Zeilen und laesst dabei
„hat.“ allein stehen — gemessen am Bild vom 15.09.2026. */
}
.satzmoment__quelle {
display: block;
margin-top: clamp(1.75rem, 3vw, 2.5rem);
font-family: var(--f-text);
font-size: 0.8rem;
font-style: normal;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-stone);
}
/* ---- Das wortweise Aufleuchten -----------------------------
Jedes Wort startet matt (28 % Deckkraft der Textfarbe) und geht
auf voll, sobald es die Ausloeselinie kreuzt — in Lesereihenfolge.
Uebergang ueber die Hauskurve var(--ease), nicht linear.
Ohne JavaScript stehen alle Woerter sofort voll da (.no-js unten). */
.satzmoment .wl {
color: rgba(247, 244, 238, 0.28);
transition: color 0.6s var(--ease);
}
.satzmoment .wl.wl--an {
color: var(--c-plaster);
}
/* "Zeit" in Gold — das Echo auf "guten Haenden" im Hero. */
.satzmoment .wl--gold.wl--an {
color: var(--c-gold-hi);
}
/* Kein JavaScript, oder Bewegung abbestellt: alles sofort lesbar.
Ein Gestaltungseffekt darf nie ueber der Lesbarkeit stehen. */
html:not(.js) .satzmoment .wl {
color: var(--c-plaster);
}
html:not(.js) .satzmoment .wl--gold {
color: var(--c-gold-hi);
}
@media (prefers-reduced-motion: reduce) {
.satzmoment .wl {
color: var(--c-plaster);
transition: none;
}
.satzmoment .wl--gold {
color: var(--c-gold-hi);
}
}
/* Auf schmalen Schirmen darf der Satz breiter laufen,
sonst entstehen vier sehr kurze Zeilen. */
@media (max-width: 700px) {
.satzmoment__block { max-width: 100%; }
/* Schmal: der reicht nicht, hier darf der Browser ausgleichen. */
.satzmoment__satz { text-wrap: balance; }
.satzmoment__satz { font-size: clamp(1.6rem, 6.8vw, 2.2rem); }
}
/* Beim Drucken zaehlt nur der Satz, nicht die Inszenierung. */
@media print {
.satzmoment { background: none; color: #000; }
.satzmoment .wl, .satzmoment .wl--gold { color: #000; }
.satzmoment__block::before { display: none; }
}
/* ============================================================
14. DRUCKRUECKMELDUNG, ZEIGEGERAETE, AKTUELLE STELLE
Feinschliff vom 15.09.2026.
Drei Dinge, die auf jeder Seite fehlten:
(a) Gedrueckte Knoepfe gaben keine Antwort. Gemessen: in allen
drei CSS-Dateien kam ":active" genau EINMAL vor — gegen 26
Hover-Regeln. Auf dem Handy gibt es kein Hover; dort ist
der Druck die einzige Rueckmeldung, die es ueberhaupt gibt.
(b) Hover-Effekte bleiben auf Beruehrungsschirmen KLEBEN. Wer
einen Menuepunkt antippt, sieht die goldene Unterstreichung
danach stehen — sie sieht aus wie "hier bist du", ist es
aber nicht.
(c) Die Navigation kennzeichnete nirgends, wo man gerade ist.
Gemessen: 0 von 7 Links auf allen fuenf Seiten.
NACHTRAG 16.09.2026, 10:27 (Lea) — Adian: "schaust die ganzen
Animationen von den Knoepfen und machst es attraktiv".
Nachgemessen, und der Befund ist besser als erwartet: kein
"transition: all", kein "ease-in", kein "scale(0)". Was fehlte:
(d) Der goldene Schein SPRANG an. "box-shadow" stand in keiner
Transitions-Liste — nur in der Navigation (14.3) zog er auf.
(e) Der Schatten behauptete Hoehe, der Knopf blieb liegen.
Ein Schatten entsteht durch Abstand; ohne Hub ist er gelogen.
(f) Der Fokusring ist golden — auf einem goldenen Knopf also
dieselbe Farbe wie der Knopf. Wer mit der Tastatur geht,
sah nur den 3-px-Spalt. Betrifft #b7913f auf #b7913f.
(g) 14.2 nahm nach eigenem Eingestaendnis "die vier
auffaelligsten, nicht alle 26" zurueck. Vier Bewegungen
blieben auf Beruehrungsschirmen haengen — darunter eine,
die ich am 16.09. um 08:58 SELBST ungedeckt gelassen habe
(siehe Abschnitt 15, der geloeschte "Finger statt Maus"-
Block: die Entsaettigung war gegenstandslos geworden, die
Vergroesserung nicht).
============================================================ */
:root {
/* Kurz und hart heraus: der Druck soll sofort sichtbar sein,
nicht erst nach einer Viertelsekunde. */
--ease-druck: cubic-bezier(.23, 1, .32, 1);
}
/* ---------- 14.1 Der Druck ist zu spueren ---------- */
/* style.css laesst den Knopf beim Druecken 1 px sinken, aber mit
250 ms — das ist langsamer als der Finger. Kuerzer und als
Verkleinerung: das liest sich wie ein echter Tastendruck.
Neu gefasst 16.09.2026: hier stand eine reine "transition-duration"
mit vier Werten ohne Namen. Die war an die REIHENFOLGE der Liste
in style.css gekettet — wer dort eine Eigenschaft einschiebt,
verschiebt still alle vier Dauern, ohne dass etwas kaputtgeht.
Und "box-shadow" fehlte in beiden Listen: der goldene Schein
sprang an, statt aufzuziehen. Jetzt steht jede Eigenschaft mit
Namen da, und der Schein hat seine eigene Dauer. */
.btn {
transition:
background-color .25s var(--ease),
color .25s var(--ease),
border-color .25s var(--ease),
box-shadow .30s var(--ease),
transform .14s var(--ease-druck);
}
.btn:active { transform: scale(.97); }
/* Der Menue-Knopf hatte gar keine Rueckmeldung. */
.nav-toggle { transition: transform .14s var(--ease-druck); }
.nav-toggle:active { transform: scale(.9); }
/* Textlinks: kein Verschieben (das wuerde den Satz umbrechen
lassen), sondern kurz abdunkeln. */
.nav a:active,
.site-footer a:active,
.legal a:active,
.zurueck:active { opacity: .55; }
/* ---------- 14.2 Hover nur dort, wo gezeigt wird ---------- */
/* (hover: none) trifft Finger und Stift. Dort werden die
Zustaende zurueckgenommen, die sonst haengen bleiben.
Ergaenzt 16.09.2026. Hier stand "das sind die vier
auffaelligsten, nicht alle 26" — das war ehrlich, aber es hat
eine Luecke stehen lassen. Jetzt vollstaendig fuer alles, was
sich BEWEGT: eine haengende Farbe sieht man kaum, eine haengende
Verschiebung ist ein sichtbar falscher Zustand.
Reine Farbwechsel bleiben absichtlich draussen — sie schaden
nicht und die Rueckname waere nur Ballast. */
@media (hover: none) {
.btn--gold:hover { box-shadow: 0 0 0 0 rgba(183, 145, 63, 0); }
.nav a:not(.btn):hover::after { transform: scaleX(0); }
.nav a:hover { opacity: .82; }
.btn--ghost:hover { background: transparent; }
/* Die vier, die bisher fehlten — alle vier verschieben etwas: */
.zurueck:hover span { transform: none; }
.footer-links a:hover::before { transform: none; }
.sterne__reihe label:hover { transform: none; }
#leistungen .service:hover .service__bild img { transform: none; }
}
/* ---------- 14.3 Der goldene Knopf in der Kopfzeile ---------- */
/* Kaskadenunfall: ".nav a" (style.css, Gewicht 0-1-1) schlaegt
".btn--gold" (design.css, 0-1-0) — der Knopf in der Navigation
bekam deshalb NUR die Deckkraft-Blende und verlor den warmen
Schein. ".nav .btn--gold" (0-2-0) holt ihn zurueck. */
.nav .btn--gold {
transition: background-color .25s var(--ease), border-color .25s var(--ease),
box-shadow .35s var(--ease), transform .14s var(--ease-druck);
}
/* ---------- 14.4 Wo bin ich gerade? ---------- */
/* Die goldene Unterstreichung gibt es schon — sie wird jetzt auch
fuer die aktuelle Stelle benutzt, statt nur beim Darueberfahren.
Kein neues Element, keine zweite Formsprache. */
.nav a[aria-current] { opacity: 1; }
.nav a[aria-current]:not(.btn)::after { transform: scaleX(1); }
/* Beim Drucken hat "wo bin ich" keinen Sinn. */
@media print {
.nav a[aria-current]:not(.btn)::after { display: none; }
}
/* ---------- 14.5 Der Knopf hebt sich an ---------- */
/* Der goldene Knopf wirft beim Ueberfahren einen Schein nach unten
(0 10px 30px -12px). Ein Schatten entsteht durch ABSTAND — der
Knopf blieb aber liegen. Der Schein behauptete eine Hoehe, die es
nicht gab. Zwei Pixel Hub machen ihn wahr.
Warum nur zwei: der Schein sitzt 10 px tiefer, nicht 10 px hoeher.
Ein grosser Sprung waere Jahrmarkt; hier soll der Knopf sich wie
ein Gegenstand anfuehlen, nicht wie ein Effekt.
"@media (hover: hover) and (pointer: fine)" steht BEWUSST davor
und nicht als Ruecknahme in 14.2: Ein Finger loest ein falsches
Hover aus, und was nie eingeschaltet wird, kann nicht haengen
bleiben. Das ist der Unterschied zwischen "wir raeumen hinterher
auf" und "es entsteht gar nicht erst". */
@media (hover: hover) and (pointer: fine) {
.btn--gold:hover,
.btn--ghost:hover { transform: translateY(-2px); }
}
/* Der Druck muss den Hub schlagen — sonst bleibt der Knopf beim
Klicken oben stehen und die Rueckmeldung aus 14.1 ist weg.
".btn:active" und ".btn--gold:hover" wiegen beide 0-2-0; bei
gleichem Gewicht gewinnt das SPAETERE. Deshalb steht das hier
unten und nicht oben bei 14.1. */
.btn--gold:active,
.btn--ghost:active { transform: translateY(0) scale(.97); }
/* ---------- 14.6 Der Fokusring auf dem goldenen Knopf ---------- */
/* style.css zeichnet den Ring in --c-gold (#b7913f). Der goldene
Knopf IST #b7913f — Ring und Knopf hatten dieselbe Farbe. Wer
mit der Tastatur navigiert, sah nur den 3-px-Spalt dazwischen.
Nicht geaendert wird die Ringfarbe: Lichtgold (#dfc073) waere auf
dem goldenen Knopf besser, aber auf dem hellen Kalkputz-Grund
(#f7f4ee) der Kontaktseite deutlich SCHLECHTER als das jetzige
Altgold. Eine Farbe kann nicht beides.
Stattdessen bekommt der Spalt eine Fuellung: Knopf — 3 px
Tiefschwarz — goldener Ring. Das steht auf hellem wie auf
dunklem Grund, ohne dass die Ringfarbe angefasst wird.
Der warme Schein laeuft in derselben Liste mit, sonst haette der
Tastaturweg weniger Rueckmeldung als die Maus. */
.btn--gold:focus-visible {
box-shadow: 0 0 0 3px var(--c-ink),
0 10px 30px -12px rgba(183, 145, 63, .75);
}
/* ---------- 14.7 Wer weniger Bewegung will ---------- */
/* Der Hub ist Schmuck und faellt weg. Der Druck bleibt: er ist
keine Zierde, sondern die Antwort des Knopfes — und mit 3 %
Verkleinerung ohne Ortswechsel so klein, dass er auch bei
"Bewegung reduzieren" niemanden stoert. */
@media (prefers-reduced-motion: reduce) {
.btn--gold:hover,
.btn--ghost:hover { transform: none; }
}
/* ============================================================
15. ARBEITSFOTOS IN DER LEISTUNGSLISTE
Umgebaut 16.09.2026, 09:24 (Lea). Adian hat ein Referenzbild
geschickt: "Ich stelle mir mehr so was vor ... mache es wie im
Bild schon gezeigt. Natürlich angepasst auf unserer Website."
Was auf dem Referenzbild zu sehen ist — vier Merkmale, und nur
die sind übernommen, nicht die Farben und nicht der Text:
1. das Foto liegt QUER, etwa 3:2
2. hinter Überschrift und Text liegt eine ruhige Tonfläche
3. das Foto ragt über die rechte Kante dieser Fläche HINAUS
— das ist die eigentliche Geste, gemessen rund 83 % des
Bildes außerhalb, 17 % darauf
4. heller Rand um das Foto (Passepartout) und runde Ecken
Übersetzt auf unsere dunkle Seite: die Fläche ist nicht grau,
sondern ein Hauch Weiß auf Schwarz (3,5 %). Sie ist bewusst
halbtransparent und behält den scharfen Eckradius der Seite,
damit daraus keine Karte wird — style.css sagt ausdrücklich:
"Bewusst als Liste mit Haarlinien, nicht als Karten-Raster."
Die Haarlinien bleiben deshalb sichtbar, die Fläche sitzt mit
Abstand dazwischen.
Warum ::after und nicht ::before: ::before ist in Abschnitt 14
von den Umriss-Nummern 01-05 belegt. Die Fläche läuft absichtlich
unter der Nummer durch — die Ziffer ist nur eine Kontur und wird
auf dem helleren Grund besser lesbar. Die Stapelordnung ist
deshalb hier ausdrücklich vergeben (Fläche 0, alles andere 1)
und nicht der Reihenfolge im Quelltext überlassen.
Aus dem Format folgt die Bildbreite, und die war nicht frei:
alle fünf Rohfotos sind hochkant. Ein 3:2-Ausschnitt schneidet
mehr als die halbe Höhe weg, und die Breite ist durch die Quelle
gedeckelt — Stuck hat nur 313 px. Die Dateien sind deshalb auf
480 px hochgerechnet (Stuck 1,53-fach, LANCZOS mit anschließendem
Nachschärfen). Das fügt KEINE Information hinzu, es hält nur die
Kanten sauber; im Browser hochzuskalieren wäre schlechter, weil
der bilinear rechnet und nicht nachschärft. Am Probebogen
angesehen: die Stuckleiste trägt es, weil ihre Flächen glatt und
kontrastarm sind.
Welcher waagerechte Streifen stehen bleibt, ist nicht geschätzt,
sondern an einem Ankerbogen abgelesen (alle fünf Fotos in fünf
Schnittlagen nebeneinander). Stuck wirkt quer sogar besser als
hochkant — ein Stuckprofil ist ein liegendes Motiv.
Keine eigene Einblendbewegung: jede trägt schon
.reveal, das Bild fährt mit. Und kein Schatten — auf schwarzem
Grund ist er unsichtbar und kostet nur Rechenzeit.
============================================================ */
/* ---------- Die Schwelle hängt am Elternteil, nicht am Fenster ----------
16.09.2026, 09:34 — nachgemessen und deshalb umgebaut. Vorher stand
hier @media (min-width: 1000px), also die FENSTERbreite. Das war
falsch, und zwar sichtbar: bei 1440 px Fenster ist ein .service
nur 667 px breit, weil #leistungen selbst zweispaltig ist (Kopf
links, Liste rechts — Abschnitt 5). Gemessen im DOM:
Fenster 1440 -> .wrap 1072 Inhalt -> Kopf 333 | Luft 72 | Liste 667
davon 72 px Nummern-Einzug -> 595 px nutzbar
Bild 400 + Abstand 42 -> Text 153 px
"Fassadensanierung" braucht 324 px -> lief 171 px über
Die Überschriften verschwanden hinter dem Bild. Die Fensterbreite
sagt eben nichts darüber, wie viel Platz ein Element wirklich hat.
Deshalb jetzt @container: die Liste meldet ihre eigene Breite.
Die Schwelle 820 px ist aus dem Bedarf gerechnet, nicht gewählt:
324 (längster Titel) + 32 (Abstand) + 380 (kleinstes Bild, das
nicht nach Briefmarke aussieht) + 72 (Einzug) = 808.
⚠️ Hier stand bis 16.09.2026, 12:10: "Folge, offen gesagt: in der
rechten Spalte greift sie nie. Am Schreibtisch steht das Bild also
unter dem Text." Das ist WIDERLEGT, und zwar von einer Messung an
genau der Stelle, um die es geht: bei 1876 px Fenster — der Breite,
in der Adian seine Screenshots gemacht hat — ist die Liste 837 px
breit. Die Schwelle 820 greift dort also, das Bild steht neben dem
Text, und alles, was hier über den gestapelten Zustand behauptet
wurde, gilt für diese Fenstergröße nicht.
Der Satz war beim Schreiben nicht erfunden, sondern gerechnet — und
deshalb falsch. Gerechnet war die Liste in der rechten Spalte bei
1440 px Fenster (667 px, da greift sie wirklich nicht); daraus wurde
ein "nie", das für breite Bildschirme nicht stimmt. Die Schwelle
liegt zwischen den beiden Fällen, nicht außerhalb.
Bei welcher Fensterbreite die Schwelle kippt, steht hier bewusst
NICHT: zwischen 1440 (667 px Liste) und 1876 (837 px) liegt sie
irgendwo, und eine Zahl dazwischen wäre wieder gerechnet statt
gemessen. Wer sie braucht, misst sie — karten-geometrie.py nimmt
dafür eine Liste von Fenstergrößen. */
#leistungen .services {
container-type: inline-size;
container-name: leistungsliste;
}
/* ---------- Grundzustand: gestapelt ---------- */
/* Titel und Text links, das Bild darunter rechtsbündig. Die
Versetzung ist die Geste, die vom Referenzbild in dieser Breite
übrig bleibt: das Foto schließt mit der rechten Kante der Liste ab,
dort, wo auch die Haarlinie endet. */
#leistungen .service {
grid-template-columns: 1fr;
grid-template-areas:
"titel"
"text"
"bild";
align-content: start;
/* Der obere Abstand der Tonfläche, als Variable statt als Zahl im
::after — weil die erste Zeile ihn auf 0 setzen muss (Abschnitt 5,
bei ihrem padding-top).
Der Wert ist derselbe wie das padding-block der Karte in
style.css:740, und das ist der ganze Punkt: das Bild beginnt am
Polster, die Fläche muss also ebenfalls dort beginnen. Hier stand
zuerst clamp(.9rem, 1.8vw, 1.5rem) — 24 px gegen 48 px Polster.
Die Messreihe vom 16.09.2026 zeigte daraufhin bei JEDER geprüften
Bildbreite dieselben 24 px Streuung im Bildstart: eine Konstante,
die sich durch nichts anderes wegdrücken ließ, weil sie nicht aus
der Geometrie kam, sondern aus zwei verschiedenen Bezugskanten.
Zwei Zahlen, die dasselbe meinen, laufen irgendwann auseinander.
Jetzt meint nur noch eine etwas: wer das padding-block ändert,
ändert die Fläche mit. */
--polster: clamp(2rem, 4vw, 3rem);
--luft-oben: var(--polster);
/* Die Unterkante der Tonfläche. Sie war bis 16.09.2026 eine Zahl im
::after; jetzt steht sie hier, weil das Bild sie ebenfalls braucht.
Warum das Bild sie braucht: die Karte hat unten 48 px Polster, die
Fläche endet 24 px vor der Kante. Das sind ZWEI verschiedene
Rechtecke, und align-self: center zentriert im Grid-Bereich — also
im ersten. Gemessen am 16.09.2026 über alle fünf Karten: das Bild
saß 12,5 px ÜBER der Kastenmitte, bei jeder Karte gleich (Lücke
oben gegen unten: 74/99, 60/85, 18/43, 32/57, 32/57 px — Spanne
der Abweichung 0). Ein fester Versatz aus der Geometrie, kein
Streuen aus den Texten. */
--luft-unten: clamp(.9rem, 1.8vw, 1.5rem);
}
#leistungen .service__title { grid-area: titel; }
#leistungen .service__body { grid-area: text; }
/* Die Inhalte liegen ÜBER der Tonfläche. */
#leistungen .service__title,
#leistungen .service__body,
#leistungen .service__bild { position: relative; z-index: 1; }
/* Die Nummer braucht hier nichts mehr.
Bis zum 16.09.2026 stand darunter eine eigene Zeile
"#leistungen .service::before { z-index: 1; }", weil die Nummer
damals am .service hing und die Regel oben sie bewusst NICHT
mitnahm: ein "position: relative" auf .service::before hatte sie
in den Grid-Fluss zurückgeholt und in einer impliziten vierten
Zeile UNTER dem Bild abgelegt.
Seit die Nummer am .service__title hängt, ist beides erledigt: der
Titel steht in dieser Regel, bringt den Bezugsrahmen für die
absolute Positionierung mit und hebt sein Pseudoelement gleich mit
über die Tonfläche. Die alte Zeile zeigte danach auf ein
Pseudoelement ohne Inhalt — sie ist deshalb entfallen, nicht
vergessen worden. */
/* ---------- das Bild: Passepartout + runde Ecken ---------- */
#leistungen .service__bild {
grid-area: bild;
align-self: start;
width: 100%;
max-width: 480px; /* = Dateibreite, nie aufblasen */
margin: .6rem 0 0;
justify-self: end; /* rechtsbündig - siehe Kommentar oben */
padding: 5px; /* der helle Rand aus dem Referenzbild */
background: rgba(236, 230, 220, .16);
border-radius: 8px; /* bewusster Bruch mit --radius: 2px:
die runde Ecke ist im Referenzbild
ein tragendes Merkmal, keine Laune */
transition: background-color .26s var(--ease);
}
/* ist der Innenteil: es beschneidet, damit das Bild beim
Überfahren wachsen kann, ohne aus dem Rand auszubrechen.
Radius nach der Verschachtelungsregel: 8 px außen - 5 px Rand = 3 px. */
#leistungen .service__bild picture {
display: block;
overflow: hidden;
border-radius: 3px;
aspect-ratio: 3 / 2; /* = Seitenverhältnis der Dateien */
background: #0e0f11; /* Platzhalterton, solange nicht geladen */
}
#leistungen .service__bild img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Ruhezustand unverfälscht: die Tonwerte sind in der Datei
angeglichen, ein zweites Mal entsättigen wäre doppelt. */
filter: none;
transform: scale(1.001);
transition: filter .26s var(--ease-druck), transform .26s var(--ease-druck);
}
/* Das Überfahren nimmt nichts weg, es legt nur dazu: heller, näher. */
#leistungen .service:hover .service__bild { background: rgba(236, 230, 220, .28); }
#leistungen .service:hover .service__bild img { filter: brightness(1.07); transform: scale(1.045); }
/* ---------- ab 820 px LISTENbreite: Text links auf der Fläche, Bild rechts darüber ---------- */
/* Muss NACH dem Block in Abschnitt 5 stehen, der .service dort
einspaltig macht — sonst gewinnt der frühere.
cqw statt vw: die Bildbreite richtet sich nach der Liste, nicht
nach dem Fenster. Genau der Fehler, der oben beschrieben ist. */
@container leistungsliste (min-width: 820px) {
#leistungen .service {
/* 16.09.2026, 12:1x — Mittelwert neu gesetzt, nach Messung.
Vorher stand hier 36cqw. Bei 837 px Liste sind das 301 px, also
WENIGER als die Untergrenze: gewirkt hat dann immer nur die
340 px, und der Mittelwert war ein Wert ohne Wirkung. Das Bild
nahm dadurch 41 % der Listenbreite ein und wirkte klein neben
seiner Fläche — Adians "nicht proportioniert".
⚠️ Danach stand hier für eine halbe Stunde 44cqw = 368 px, so
gerechnet: 745 px nutzbar minus 324 (längster Titel) minus 42
(Abstand) = 379 px frei. Die Rechnung stimmt und der Wert war
trotzdem falsch, weil sie die falsche Größe maß: der TITEL
bestimmt nicht die Kartenhöhe, der FLIESSTEXT tut das. Das Bild
auf 368 zu verbreitern verengte die Textspalte von 363 auf
335 px — der Text brauchte mehr Zeilen, und die Streuung der
Kartenhöhen stieg von 84 auf 112 px. Eine Verbesserung, die
genau das verschlechtert, wofür sie gemacht war.
Die Obergrenze 360 ist jetzt keine Rechnung mehr, sondern eine
Messreihe (karten-reihe.py, sechs Breiten gegen zwei Lagen):
Bild Textspalte Streuung Kastenhöhe höchste Karte
300px 403 px 112 px 460 px
320px 383 px 84 px 460 px
340px 363 px 84 px 460 px
360px 343 px 84 px 460 px
380px 324 px 112 px 516 px ← reißt
400px 324 px 112 px 516 px ← reißt
Ab 380 px klemmt die Textspalte auf ihrem Minimum von 324 px,
das Raster kann nicht mehr ausgleichen, und die höchste Karte
springt um 56 px. 360 ist die obere Kante des unbedenklichen
Bereichs — der größte Wert, den Adians "proportioniert" bekommen
kann, ohne dass sein "synchron" dafür bezahlt. */
--bild-b: clamp(320px, 43cqw, 360px);
grid-template-columns: minmax(324px, 1fr) var(--bild-b);
/* Dritte, leere Zeile: sie schluckt die Höhe, die das Bild über
den Text hinaus braucht. Ohne sie verteilt das Raster diesen
Überschuss auf Titel- und Textzeile — dann driften Überschrift
und Absatz auseinander. */
grid-template-rows: auto auto 1fr;
grid-template-areas:
"titel bild"
"text bild"
". bild";
column-gap: clamp(1.6rem, 3vw, 2.6rem);
row-gap: .9rem;
}
/* Das Bild sitzt mittig in der Zeile — Adians Anweisung vom
16.09.2026: "Ich möchte, dass die Bilder in der Mitte von dem
schwarzen Kasten sind."
⚠️ Hier stand vorher align-self: start, mit einer langen
Begründung aus einer eigenen Messung: mittig streut der BILDSTART
(42 bis 57 px über sechs geprüfte Bildbreiten), oben streut er
nicht, und die gemeinsame Oberkante von Titel und Bild macht fünf
untereinanderstehende Zeilen als Reihe lesbar.
Die Messung ist nicht falsch geworden. Sie hat nur die falsche
Größe gemessen für das, was hier beurteilt wird: die Streuung des
Bildstarts sieht, wer fünf Kanten übereinanderlegt. Wer EINE
Karte ansieht, sieht ein Foto, das oben klebt und unter dem ein
Loch steht. Das ist die Ansicht, die zählt — es ist eine
Gestaltungsfrage, keine Rechenfrage, und die Entscheidung gehört
dem, für den die Seite gebaut wird.
Warum nicht stretch (Bild füllt den Kasten, kein Loch)? Weil das
Querformat 3:2 keine Laune ist, sondern Merkmal 1 aus Adians
Referenzbild. Gestreckt würde aus dem Foto bei der längsten Zeile
ein Hochformat. */
#leistungen .service__bild {
margin: 0;
max-width: none;
justify-self: stretch;
align-self: center;
/* Der Ausgleich für die zwei Rechtecke (siehe --luft-unten weiter
oben): align-self zentriert im Grid-Bereich, Adian meinte den
Kasten. Die Differenz der beiden Unterkanten ist 48 − 24 = 24 px,
das Bild muss also um die HALBE Differenz nach unten.
translate statt margin, mit Absicht: margin würde die Grid-Zeile
vergrößern und könnte die Kartenhöhe treiben — translate wirkt
erst nach dem Layout, die gemessenen Kartenhöhen bleiben also
unangetastet. Und es steht als das da, was es ist: eine halbe
Differenz nach unten, nicht ein Randabstand, der zufällig zur
Hälfte wirkt. */
translate: 0 calc((var(--polster) - var(--luft-unten)) / 2);
}
/* Die Tonfläche. Sie endet dort, wo 17 % des Bildes darauf liegen —
der Rest ragt hinaus. Genau dieses Maß steht im Referenzbild. */
#leistungen .service::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
left: 0;
right: calc(var(--bild-b) * .83);
top: var(--luft-oben);
bottom: var(--luft-unten);
background: rgba(255, 255, 255, .035);
border-radius: var(--radius);
/* 220 ms statt 300: ein Farbwechsel beim Überfahren soll unter
einer Viertelsekunde bleiben, sonst hinkt die Fläche der Maus
hinterher. Die Kurve bleibt die Hauskurve — eine dritte Kurve
einzuführen wäre eine Sprache mehr, die niemand spricht. */
transition: background-color .22s var(--ease);
}
/* DER Effekt beim Überfahren, seit 16.09.2026 der einzige: die
Fläche wechselt von kühlem Weißhauch auf warmes Gold. Der Wert
.12 ist nicht neu gewählt — es ist genau der Spitzenwert, den der
alte Verlauf über der ganzen Zeile hatte. Dieselbe Farbe, nur an
der Stelle, an der sie etwas bedeutet.
Gegen Zeigefinger abgesichert: ohne Maus gibt es kein Überfahren,
und ein Fingertipp würde den Zustand sonst hängen lassen. */
@media (hover: hover) and (pointer: fine) {
#leistungen .service:hover::after { background: rgba(183, 145, 63, .12); }
}
}
/* ---------- bis 620 px: das Bild bekommt die volle Spaltenbreite ---------- */
@media (max-width: 620px) {
#leistungen .service__bild { max-width: none; margin-top: .5rem; }
}
/* Hier stand bis 16.09.2026, 08:58 ein Block für "Finger statt Maus":
ohne Zeigegerät gab es kein Überfahren, und die Fotos wären dauerhaft
entsättigt geblieben. Seit der Ruhezustand unverfälscht ist, gibt es
nichts mehr zurückzunehmen — der Block hätte nichts getan. */
/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
#leistungen .service__bild img,
#leistungen .service__bild,
#leistungen .service::after { transition: none; }
#leistungen .service:hover .service__bild img { transform: none; }
}
/* ---------- Druck ---------- */
/* Gleiche Linie wie bei den Umriss-Nummern in Abschnitt 14:
auf Papier kosten die Fotos nur Toner — und eine Tonfläche,
die auf Schwarz ein Hauch Weiß ist, wird auf Papier ein Kasten. */
@media print {
#leistungen .service__bild { display: none; }
#leistungen .service::after { content: none; }
#leistungen .service {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-rows: auto;
grid-template-areas: "titel text";
}
}