/* ===== SCHRIFT: Barlow (03.09.2026) =====================================
Ersetzt "Segoe UI". Ein Systemfont ist nach websites.md §3a als
Gestaltungsentscheidung verboten - er laesst jede Seite austauschbar wirken.
Barlow wurde aus drei Kandidaten gewaehlt (IBM Plex Sans, Archivo, Barlow):
robust und leicht technisch, passt zu Abbruch und Gartenbau, ohne verspielt
zu sein. Entscheidend war ausserdem die Laufweite - Archivo ist so viel
breiter, dass die Versal-H1 auf VIER Zeilen umbrach.
LOKAL gehostet als woff2, keine Google-Einbindung (design.md), keine Cookies.
Lizenz: SIL Open Font License 1.1.
Wird die Schrift getauscht, die H1-Umbrueche auf 1440/390/320 px neu pruefen. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
src:url('../fonts/Barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/Barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
src:url('../fonts/Barlow-700.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;
src:url('../fonts/Barlow-800.woff2') format('woff2')}
/* FARBWELT, Stand 03.09.2026 (Variante A).
Grundton und dunkle Flaechen sind NEUTRALGRAU, nicht mehr blaustichig.
--blue ist ab jetzt reine AKZENTFARBE: Knoepfe, Links, Pfeile, Fokus, aktive
Zustaende. Grosse Flaechen, Kacheln und der dunkle Warum-Block bleiben grau.
Wunsch von Christian ("Weiss und Graustufen, Blau nur fuer Akzente") und von
Mitch bestaetigt ("Blau war noch zu dominant").
NICHT wieder blaustichige Grautoene einsetzen. */
:root{
--bg:#f4f5f6; --paper:#ffffff; --blue:#6F88FC; --blue-deep:#4257d4; --blue-soft:#eceef1;
--navy:#24272c; --ink:#24272c; --ink-soft:#61666e; --line:#e3e5e9; --gold:#f5b73c; --blue-hover:#34449e;
--shadow:0 14px 40px rgba(30,33,38,.10); --shadow-sm:0 6px 18px rgba(30,33,38,.08);
/* Bedienelemente brauchen 3:1 (WCAG 1.4.11) - --line ist eine TRENNLINIENfarbe und
kam auf 1,16:1. Eigenes Token statt --line zweckentfremden.
Gerechnet: #858b94 auf Feldgrund #f4f5f6 = 3,14:1 | auf weisser Karte = 3,43:1. */
--line-form:#858b94;
/* Sterne tragen Inhalt (Bewertung) und brauchen 4,5:1. --gold kam auf 1,79:1.
Gerechnet: #8f6407 = 5,26:1 auf weiss UND 4,82:1 auf --bg (#f4f5f6).
⚠️ Vorher stand hier #9c6d08 mit der Notiz "4,56:1" - der Wert galt nur auf WEISS.
Die Google-Notiz auf der Startseite liegt aber auf --bg, dort waren es nur 4,18:1.
Merke: Einen Kontrastwert immer gegen die Flaeche rechnen, auf der das Element
WIRKLICH liegt, nicht gegen die hellste im Projekt. --gold bleibt fuer Flaechen wie den
"Fertig"-Chip, wo dunkler Text darauf steht. */
--gold-text:#8f6407;
/* Hoehe der klebenden Kopfzeile: Logo (.brand img) + 2x .85rem Innenabstand + 1px Rahmen.
Aendert sich die Logohoehe oder das .nav-padding, MUSS dieser Wert mitgeaendert werden –
sonst landen die Ankerspruenge wieder unter der Kopfzeile. */
--wrap:1160px; /* EIN Satzspiegel fuer die ganze Seite. Vorher standen hier drei
Werte nebeneinander (1160 Hero/Kopfzeile, 1100 Seitenkopf, 1000 Inhalt/Schluss/Weitere).
Auf den Unterseiten ergab das VIER verschiedene linke Kanten - gemessen 162/192/220/242 px
bei 1440 px, das Logo stand 30 px links der H1. Die Kopfzeilen-Flucht vom 03.09. griff
dort nicht. websites.md 3c: es darf nur EINEN Wert geben.
.inhalt-mitte rechnet das Aussen-Padding von .inhalt heraus, sonst kaeme es doppelt. */
--nav-h:calc(clamp(56px,9vw,120px) + 1.7rem + 1px);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Ankerspruenge stoppen unterhalb der klebenden Kopfzeile (+ etwas Luft) */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}
body{font-family:'Barlow',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.15;font-weight:800;letter-spacing:-.4px}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px;border-radius:6px}
/* Kopfzeilen-INHALT auf Inhaltsbreite (03.09.2026, Mitchs Vorschlag).
Die Leiste selbst bleibt ueber die volle Breite (Hintergrund + Trennlinie),
nur der Inhalt sitzt im selben Satzspiegel wie der Hero (max-width 1160px
plus dessen 1.4rem Innenabstand). Dadurch stehen Logo und "Glueck auf!"
exakt auf einer Flucht, statt dass die Kopfzeile bis in die Ecken laeuft.
Umgesetzt ueber padding statt eines zusaetzlichen Containers - so bleibt das
HTML aller 6 Seiten unveraendert. */
/* Kopfzeile vom Inhalt abgesetzt (11.09.2026, Mitch: "Header schlecht getrennt").
Der 1px-Rand allein hatte auf dem fast gleichfarbigen Seitengrund (#f4f5f6 vs.
#e3e5e9) kaum Kontrast - Kopfzeile und Inhalt liefen optisch ineinander.
Fix ist der schon vorhandene Karten-Schatten --shadow-sm (kein neues Element,
websites.md §3c-bis) statt eines neuen Randtons. */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding-block:.85rem;
padding-inline:max(1.4rem, calc((100% - 1160px) / 2 + 1.4rem));
background:rgba(244,245,246,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
box-shadow:var(--shadow-sm)}
.brand{display:flex;align-items:center}
.brand img{height:clamp(56px,9vw,120px);width:auto;display:block}
/* KOPFZEILE PRAEGNANTER (03.09.2026, Mitch: "das Header-Menue geht etwas unter,
der CTA darf auch etwas praegnanter sein").
Der Kontrast war mit 5,29:1 normgerecht - das Problem war die optische Gewichtung
neben dem sehr grossen Logo. Deshalb Anthrazit statt Grau (13,73:1), etwas groesser
und mehr Abstand. Beim Ueberfahren waechst der blaue Unterstrich des
Signature-Motivs "Glueck auf!" - dasselbe Muster wie bei den Leistungstiteln,
kein neues Vokabular (websites.md §3c-bis). */
/* Menue rechts an den Anruf-Knopf gerueckt (margin-left:auto).
Gemessen war das Problem nicht die Farbe, sondern der Leerraum: Das Menue stand
mit 314px Luft auf JEDER Seite mitten im Nichts und war nur 33% so hoch wie das
Logo daneben. Jetzt bilden Menue und Knopf rechts eine Gruppe, links steht das
Logo - ein ruhiger Aufbau statt drei einzelner Inseln.
KEIN Unterstrich beim Ueberfahren (Mitch, 03.09.: "will keine Striche beim
hovern") - der Wechsel auf die Akzentfarbe genuegt. */
.nav-links{display:flex;gap:2rem;font-weight:700;font-size:1.15rem;align-items:center}
.nav-links a{color:var(--navy);transition:color .2s}
.nav-links a:hover{color:var(--blue-deep)}
/* Anruf-Knopf deutlich groesser und mit farbigem Schatten - vorher war er
kleiner als die Menuepunkte gewichtet, obwohl der Anruf die wichtigste Handlung
der Seite ist. Schatten und Groesse jetzt wie .btn-primary im Hero. */
.nav-call{background:var(--blue-deep);color:#fff;padding:.8rem 1.7rem;border-radius:100px;
font-weight:700;font-size:1.05rem;letter-spacing:.01em;white-space:nowrap;
box-shadow:0 8px 20px rgba(66,87,212,.32);transition:.2s}
.nav-call:hover{background:var(--blue-hover);transform:translateY(-2px);
box-shadow:0 12px 26px rgba(66,87,212,.4)}
/* ===== HERO – aus Konzept 1 "kumpel-betrieb" uebernommen ===== */
.hero{max-width:var(--wrap);margin:0 auto;padding:clamp(2.5rem,6vw,5rem) 1.4rem clamp(3rem,6vw,5rem);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.glueckauf{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:var(--navy);transform:rotate(-3deg);display:inline-block;margin-bottom:.6rem;border-bottom:5px solid var(--blue);padding:0 .1em}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);color:var(--navy);text-transform:uppercase;letter-spacing:-1px;line-height:1.05}
.hero-sub{margin-top:1.2rem;font-size:1.15rem;color:var(--ink-soft);max-width:34ch}
.hero-note{margin-top:1.4rem;font-size:.92rem;color:var(--ink-soft)}
/* ANRUF-CTA (03.09.2026, Mitch: "Direkt anrufen sollte als sichtbarer CTA zu
erkennen sein, eher als dunkler Button").
Vorher ein Umriss-Knopf (transparent mit Rahmen) – der las sich als zweitrangig,
obwohl der Anruf bei einem Handwerksbetrieb die wichtigste Handlung ueberhaupt ist.
Jetzt eine gefuellte dunkle Flaeche: gleich viel Gewicht wie der blaue Knopf,
aber klar unterscheidbar. Anthrazit ist die Hausfarbe der dunklen Baender
(Warum-Block, Fusszeile, Beschriftungen) – keine neue Farbe.
Klasse heisst .btn-call und nicht .btn-dark: benannt nach der FUNKTION, damit der
Name auch nach dem naechsten Aussehen-Wechsel noch stimmt. */
.btn-call{background:var(--navy);color:#fff;border-color:var(--navy);
box-shadow:0 10px 24px rgba(36,39,44,.26)}
.btn-call:hover{background:#12141a;border-color:#12141a;transform:translateY(-2px)}
/* Seitenverhaeltnis EXAKT wie die Bilddatei (1466x1331) – dadurch schneidet object-fit:cover
nichts ab: weder der Mann links noch die Wagenbeschriftung rechts. Bei 4/5 (vorher) bzw.
1/1 fehlten sonst Teile der Beschriftung.
Wird das Bild spaeter ausgetauscht, MUSS dieser Wert mitgeaendert werden. */
.hero-photo{position:relative;width:100%;aspect-ratio:1466/1331;border-radius:20px;border:3px solid var(--navy);overflow:hidden;background:var(--navy)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
/* Namensschild im Heldenbild. Werte 1:1 von .galerie figcaption uebernommen
(Position, Farbe, Radius, Versalien) - kein neues Muster, nur eine zweite
Anwendung des vorhandenen. */
.hero-name{position:absolute;left:.9rem;bottom:.9rem;background:rgba(36,39,44,.94);
color:#fff;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
padding:.45rem .85rem;border-radius:8px;line-height:1.35}
.hero-name strong{display:block;font-size:.95rem;letter-spacing:.02em}
/* ===== Ende Hero ===== */
.pill-tag{display:inline-block;background:var(--blue-soft);color:var(--blue-deep);font-weight:700;font-size:.9rem;padding:.4rem 1rem;border-radius:100px;margin-bottom:1.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.btn{display:inline-block;padding:.95rem 1.8rem;border-radius:100px;font-weight:700;font-size:1.02rem;cursor:pointer;border:2px solid transparent;transition:.2s}
.btn-primary{background:var(--blue-deep);color:#fff;box-shadow:0 10px 24px rgba(66,87,212,.28)}
.btn-primary:hover{background:var(--blue-hover);transform:translateY(-2px)}
.btn-soft{background:var(--paper);color:var(--navy);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-soft:hover{border-color:var(--blue);color:var(--blue-deep)}
.btn.full{width:100%;text-align:center}
.stars{color:var(--gold-text);letter-spacing:1px}
.leistungen{background:var(--paper);padding:clamp(2.5rem,6vw,4.5rem) 1.4rem}
/* calc(--wrap - 2.8rem): Die Elternsektionen (.leistungen, .stimmen) tragen selbst
1.4rem Innenabstand. Ohne das Herausrechnen kaeme er doppelt und die Ueberschrift
stuende 22 px LINKS von Logo und Hero-H1 - knapp genug daneben, um wie ein Versehen
auszusehen. Gemessen jetzt 162 px auf 1280/1440/1920, gleiche Flucht wie die Kopfzeile. */
.sec-head{max-width:calc(var(--wrap) - 2.8rem);margin:0 auto 2.5rem}
.sec-head.center{text-align:center}
/* Innenabstand grosszuegig: Bricht der Text auf zwei Zeilen um (mobil die Regel),
klebte er bei .25rem oben/unten am Rand. line-height verhindert enges Aufeinander. */
.eyebrow{display:inline-block;color:var(--blue-deep);font-weight:700;font-size:.85rem;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.9rem;background:var(--blue-soft);padding:.55rem 1.2rem;border-radius:100px;line-height:1.45}
.eyebrow.light{background:rgba(255,255,255,.15);color:#e2e4e8}
.sec-head h2{font-size:clamp(1.7rem,4vw,2.6rem);color:var(--navy);max-width:22ch}
.sec-head.center h2{margin:0 auto}
.row{max-width:900px;margin:0 auto 1.2rem;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:center;background:var(--bg);border-radius:28px;padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-sm);transition:.25s}
.row:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.row:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px}
/* Die ganze Karte IST der Link – ein zusaetzliches "Mehr erfahren" waere ein Link im Link
und hat nur doppelt gemoppelt. Der Pfeil an der Ueberschrift zeigt, dass es weitergeht. */
.row{cursor:pointer;border:2px solid transparent}
/* \00a0 = geschuetztes Leerzeichen: sonst rutscht der Pfeil auf schmalen Schirmen
allein in eine eigene Zeile und sieht aus wie ein Versehen. */
.row-text h3::after{content:"\00a0→";color:var(--blue-deep);display:inline-block;transition:.2s}
.row:hover{border-color:var(--blue);background:var(--blue-soft)}
.row:hover .row-text h3::after{transform:translateX(5px)}
.row-rev{direction:rtl}
.row-rev .row-text{direction:ltr}
.row-icon{width:82px;height:82px;border-radius:24px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-size:2.2rem;flex-shrink:0}
.row-text h3{font-size:clamp(1.2rem,2.5vw,1.55rem);color:var(--navy);margin-bottom:.35rem}
.row-text p{color:var(--ink-soft);max-width:58ch}
.warum{padding:clamp(2rem,5vw,4rem) 1.4rem}
.warum-card{max-width:1080px;margin:0 auto;background:linear-gradient(160deg,#32363d,#24272c);color:#fff;border-radius:36px;padding:clamp(2rem,5vw,3.5rem);box-shadow:var(--shadow)}
.warum-card h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:2rem;max-width:20ch}
.warum-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.warum-item{background:rgba(255,255,255,.06);border-radius:22px;padding:1.4rem}
/* Heller Chip hinter dem Symbol: die dunklen Emoji (z. B. Telefonhoerer) waren
auf dem navyfarbenen Grund praktisch unsichtbar. */
.wi-emoji{font-size:1.6rem;display:flex;align-items:center;justify-content:center;
width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.92);margin-bottom:.8rem}
.warum-item strong{display:block;font-size:1.15rem;margin-bottom:.25rem}
.warum-item p{color:#c6c9cf}
.stimmen{padding:clamp(2.5rem,6vw,4.5rem) 1.4rem}
.stimmen-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.stimmen blockquote{background:var(--paper);border-radius:26px;padding:1.7rem;box-shadow:var(--shadow-sm);transition:.25s}
.stimmen blockquote:hover{transform:translateY(-3px) rotate(0deg);box-shadow:var(--shadow)}
.tilt-l{transform:rotate(-1deg)} .tilt-r{transform:rotate(1deg)}
.stimmen .stars{font-size:1.05rem;display:block;margin-bottom:.6rem}
.stimmen p{font-size:1.05rem;color:var(--ink);margin-bottom:.9rem}
.stimmen cite{font-style:normal;font-weight:700;color:var(--blue-deep)}
.google-note{margin-top:.9rem;color:var(--ink-soft);font-size:1.02rem}
.google-note .stars{color:var(--gold-text);margin-right:.4rem}
.google-note strong{color:var(--navy)}
.stimmen-cta{text-align:center;margin-top:1.8rem}
.kontakt{padding:clamp(2rem,5vw,4rem) 1.4rem clamp(3rem,6vw,5rem)}
.kontakt-card{max-width:1080px;margin:0 auto;background:var(--blue-soft);border-radius:36px;padding:clamp(1.8rem,4vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;box-shadow:var(--shadow-sm)}
.kontakt-text h2{font-size:clamp(1.7rem,4vw,2.5rem);color:var(--navy);margin-bottom:1rem}
.kontakt-text p{color:var(--ink-soft)}
/* ===== Kontaktwege (02.09.2026, zweiter Anlauf) ==========================
ERSTER VERSUCH WAR FALSCH: eckiger Block (border-radius:4px) mit 9px dicker
Kante links, begruendet als "Formzitat der kantigen Hero-Bildbox". Die
Hero-Bildbox hat aber border-radius:20px - sie ist NICHT kantig. Ich hatte die
Beschreibung aus der Projektakte geglaubt, statt ins CSS zu sehen. Auf der
ganzen Seite kam 4px genau einmal vor: in diesem Block. Er stach heraus.
JETZT: exakt das Muster, das auf dieser Seite bereits etabliert ist (.row) -
heller Kasten, weicher Radius, zarter Schatten, beim Ueberfahren blauer Rahmen
plus hellblauer Grund plus leichtes Anheben. Radien sind uebernommene Werte der
Seite (26px = .kontakt-form, 20px = .galerie/.hero-photo), keine neuen. */
.ruf-block,.mail-block,.wa-block{display:grid;grid-template-columns:1fr auto;align-items:center;
background:var(--paper);color:var(--navy);text-decoration:none;
border:2px solid transparent;box-shadow:var(--shadow-sm);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease}
.ruf-block:hover,.mail-block:hover,.wa-block:hover{transform:translateY(-3px);box-shadow:var(--shadow);
border-color:var(--blue);background:var(--blue-soft)}
.ruf-block{gap:.3rem 1rem;margin-top:1.5rem;padding:1.15rem 1.35rem;border-radius:26px}
.ruf-label{grid-column:1;font-size:.73rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-soft)}
.ruf-nr{grid-column:1;font-size:clamp(1.55rem,4.2vw,2.1rem);font-weight:800;
letter-spacing:-.5px;line-height:1.1;
/* Ziffern gleich breit, sonst "zappelt" eine Telefonnummer optisch. */
font-variant-numeric:tabular-nums}
/* E-Mail im selben Muster, aber kleiner: der Anruf soll die Hauptsache bleiben. */
.mail-block{gap:.15rem 1rem;margin-top:.7rem;padding:.85rem 1.35rem;border-radius:20px}
.mail-label{grid-column:1;font-size:.73rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-soft)}
.mail-wert{grid-column:1;font-size:1.05rem;font-weight:700;overflow-wrap:anywhere}
/* WhatsApp im selben Muster wie E-Mail (03.09.2026). Bewusst KEIN gruener
WhatsApp-Knopf: die Seite hat eine eigene Farbwelt, ein Fremdlogo in Markenfarbe
waere ein Bruch (websites.md §3). Der Weg steht im Text, das genuegt. */
.wa-block{gap:.15rem 1rem;margin-top:.7rem;padding:.85rem 1.35rem;border-radius:20px}
.wa-label{grid-column:1;font-size:.73rem;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-soft)}
.wa-wert{grid-column:1;font-size:1.05rem;font-weight:700;overflow-wrap:anywhere}
.wa-pfeil{width:38px;height:38px}
/* Kreis-Symbol: 44px ist zugleich das Mindestmass fuer Klickflaechen. 50% wird auf
der Seite bereits verwendet (Schritt-Zaehler der Galerie), ist also kein Fremdkoerper. */
.ruf-pfeil,.mail-pfeil,.wa-pfeil{grid-column:2;grid-row:1/3;display:flex;align-items:center;
justify-content:center;border-radius:50%;background:var(--blue-deep);color:#fff;
flex:0 0 auto;transition:transform .22s ease}
.ruf-pfeil{width:44px;height:44px}
.mail-pfeil{width:38px;height:38px}
.ruf-block:hover .ruf-pfeil,.mail-block:hover .mail-pfeil,.wa-block:hover .wa-pfeil{transform:translateX(3px)}
/* Der Standort ist KEINE Aktion - deshalb bewusst kein Kasten, kein Rahmen, keine
Unterstreichung. Sonst klicken Leute darauf und es passiert nichts. */
.kontakt-ort{margin-top:1.1rem;display:flex;align-items:baseline;gap:.6rem;
flex-wrap:wrap;font-size:.95rem;color:var(--ink-soft)}
.kontakt-ort dt{font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.kontakt-ort dd{font-weight:700;color:var(--navy)}
/* Oeffnungszeiten (03.09.2026). Ebenfalls keine Aktion, aber mehrzeilig - deshalb ein
eigener ruhiger Block mit feiner Trennlinie nach oben statt eines weiteren Kastens.
Die Zeitspalte ist rechtsbuendig, damit die Uhrzeiten untereinander fluchten. */
.oeffnungszeiten{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.oz-titel{font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-soft);margin-bottom:.6rem}
.oeffnungszeiten dl{display:grid;gap:.35rem;max-width:22rem}
.oeffnungszeiten dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.oeffnungszeiten dt{color:var(--ink-soft);font-size:.95rem}
.oeffnungszeiten dd{font-weight:700;color:var(--navy);font-size:.95rem;
font-variant-numeric:tabular-nums;text-align:right}
.oz-hinweis{margin-top:.7rem;font-size:.88rem;color:var(--ink-soft)}
.kontakt-form{background:var(--paper);border-radius:26px;padding:1.7rem;display:grid;gap:.9rem;box-shadow:var(--shadow)}
.kontakt-form label{display:grid;gap:.35rem;font-weight:700;font-size:.9rem;color:var(--navy)}
.kontakt-form input,.kontakt-form select,.kontakt-form textarea{font:inherit;padding:.8rem .9rem;border:1.5px solid var(--line-form);border-radius:14px;background:var(--bg);width:100%;min-width:0;max-width:100%}
.kontakt-form textarea{resize:vertical}
/* Grid-Kinder duerfen ihre Spalte nicht sprengen (sonst Querscrollen auf dem Handy) */
.kontakt-card>*,.kontakt-text,.kontakt-form,.kontakt-form label,.warum-item,.row-text{min-width:0}
.kontakt-text h2{overflow-wrap:break-word}
/* Nur die Maus-/Klick-Hervorhebung ist dezent. Der Tastatur-Fokus MUSS sichtbar bleiben –
ein blosser Randfarbwechsel reicht dafuer nicht (frueher stand hier outline:none fuer
jeden Fokus, damit war die Seite per Tastatur kaum bedienbar). */
.kontakt-form input:focus,.kontakt-form select:focus,.kontakt-form textarea:focus{border-color:var(--blue)}
.kontakt-form input:focus:not(:focus-visible),.kontakt-form select:focus:not(:focus-visible),.kontakt-form textarea:focus:not(:focus-visible){outline:none}
/* position:relative ist PFLICHT: Das optisch versteckte Datei-Feld liegt absolut.
Ohne positionierten Vorfahren wandert es an den Seitenanfang – der Browser scrollt
dann beim Tabben an die voellig falsche Stelle. */
.foto-upload{position:relative;background:var(--blue-soft);border:1.5px dashed var(--blue-deep);border-radius:14px;padding:.9rem;text-align:center;cursor:pointer;color:var(--blue-deep);
scroll-margin-top:calc(var(--nav-h) + 1rem)}
.foto-titel{display:block;font-weight:700}
.foto-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
margin-top:.7rem;padding:.6rem 1.2rem;border:1.5px solid var(--blue);border-radius:100px;
background:var(--paper);color:var(--blue-deep);font-weight:700;font-size:.92rem;transition:.2s}
.foto-upload:hover .foto-knopf{background:var(--blue);color:#fff}
/* Optisch weg, aber fuer Tastatur und Screenreader weiterhin da.
display:none oder visibility:hidden waeren hier FALSCH – die nehmen das Feld
aus der Tab-Reihenfolge, das Formular waere ohne Maus nicht mehr bedienbar. */
/* Das echte Feld liegt unsichtbar GENAU UEBER dem Kasten – nicht irgendwo weggeklippt.
Vorteil: Es behaelt seine Position (der Browser scrollt beim Tabben an die richtige
Stelle), die ganze gestrichelte Flaeche ist Klickflaeche, und es bleibt fuer Tastatur
und Screenreader vorhanden. opacity:0 statt display:none – sonst faellt es aus der
Tab-Reihenfolge. Selektor muss .kontakt-form input schlagen (Spezifitaet). */
.kontakt-form input.nur-fuer-screenreader{position:absolute;inset:0;width:100%;height:100%;
margin:0;padding:0;border:0;opacity:0;cursor:pointer}
/* Der Fokusrahmen muss trotzdem sichtbar sein – er wird auf den Knopf gespiegelt. */
.foto-upload:focus-within .foto-knopf{outline:3px solid var(--blue-deep);outline-offset:3px}
.kontakt-form small{color:var(--ink-soft);font-weight:500}
/* ===== Fusszeile (03.09.2026 neu aufgebaut) =====
Vorher: vier zentrierte Zeilen in einer 270px-Saeule mitten in 1440px Breite, links und
rechts je 585 px leer - derselbe "verloren im Nichts"-Effekt wie bei der Kopfzeile am
03.09. Und sie trug KEINE Information: keine Nummer, keine Adresse, keine Zeiten, dazu
eine Leistungszeile, die nur das Logo zwei Zentimeter darueber wiederholte.
Jetzt drei Spalten im Satzspiegel (--wrap, websites.md 3c-ter) mit dem, was jemand
unten wirklich sucht. Auf den Unterseiten ist das ausserdem die einzige Stelle mit
Telefonnummer und Adresse (Local-SEO: NAP gehoert auf jede Seite).
Farbe #c9ccd1 statt #c3cbe6: der alte Wert war einer der blaustichigen Reste, die am
03.09. eigentlich neutralisiert werden sollten - im Footer war er stehengeblieben.
Kontrast 9,3:1 (vorher 9,28:1, also unveraendert gut). */
.footer{background:var(--navy);color:#c9ccd1;padding:3rem 1.4rem 2rem;border-radius:40px 40px 0 0;margin-top:1rem}
/* Zentriert statt linksbuendig (Entscheidung Mitch, 16.09.2026). Vorher:
text-align:left, grid-template-columns 1.2fr 1fr 1fr. */
.footer-innen{max-width:calc(var(--wrap) - 2.8rem);margin:0 auto;display:grid;
grid-template-columns:1fr 1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;
text-align:center;justify-items:center}
/* display:block (16.09.2026, Probe): als Inline-Bild sass das Logo durch den
Grundlinien-Freiraum der Schriftzeile spuerbar tiefer als die ueberschriften
"Direkt erreichbar"/"Leistungen" in den Nachbarspalten. Reichte allein nicht -
der umschliessende war selbst noch inline und zog denselben Freiraum. Der
Link um das Logo ist in Spalte 1 das einzige direkte -Kind, darum reicht
dieser gezielte Selektor (trifft NICHT den Telefonlink in Spalte 2). */
.footer-logo{display:block;height:96px;width:auto;margin:0 0 1rem;filter:invert(1);margin-inline:auto}
/* padding:0 noetig: die generelle Regel ".footer-spalte a" gibt allen Footer-Links
.65rem Innenabstand oben/unten (Klickflaeche), das schob den Logo-Link zusaetzlich
~10px nach unten - gefunden per Screenshot-Pixelmessung, nicht nur display:block. */
.footer-spalte>a:first-child{display:block;padding:0}
.footer h3{color:#fff;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
font-weight:700;margin-bottom:.9rem}
.footer p{margin-top:.4rem;font-size:.92rem;line-height:1.6}
/* .65rem statt .42rem: gemessen waren die Links nur 40 px hoch, die Klickflaeche muss
mind. 44 px betragen (websites.md 6, Apple/WCAG-Richtwert). Reiner Innenabstand,
aendert die Optik nicht. */
.footer-spalte a{color:#c9ccd1;text-decoration:none;display:inline-block;padding:.65rem 0}
/* KEINE Unterstreichung beim Ueberfahren (Mitch, 03.09.2026 - dieselbe Ansage wie
bei der Kopfzeile: "will keine Striche beim hovern"). Stattdessen eine leichte
Farbhervorhebung. Heimat der Regel: websites.md 3e.
#aebbff ist die Akzentfarbe aufgehellt, damit sie auf dem dunklen Grund traegt:
8,1:1 gegen #24272c (die Original-Akzentfarbe #6F88FC kaeme nur auf 4,71:1). */
.footer-spalte a:hover,.footer-legal a:hover{color:#aebbff}
.footer-liste{list-style:none;display:grid;justify-items:center}
.footer-tel{display:inline-block;color:#fff;font-weight:800;font-size:1.35rem;
text-decoration:none;font-variant-numeric:tabular-nums;padding:.4rem 0}
.footer-tel:hover{color:#aebbff}
.footer-klein{font-size:.86rem;color:#a8aeb6}
/* Abbinder: feine Linie im Satzspiegel. Entscheidung Mitch, 16.09.2026: drei Boxen
liegen exakt unter Logo-/Kontakt-/Leistungen-Spalte (gleiche grid-template-columns
und gap wie .footer-innen, vorher eigenes 1fr-auto-1fr-Raster mit anderen Breiten),
und jede Box zentriert ihren eigenen Inhalt statt am Rand (start/end) zu sitzen. */
.footer-schluss{max-width:calc(var(--wrap) - 2.8rem);margin:2.2rem auto 0;padding-top:1.4rem;
border-top:1px solid #3a3e45;display:grid;grid-template-columns:1fr 1fr 1fr;
align-items:center;gap:clamp(1.5rem,4vw,3rem)}
.footer-legal{justify-self:center}
.footer-ga{color:#fff;font-weight:800;font-size:1.15rem;margin:0;justify-self:center}
.footer-credit{font-size:.78rem;color:#8a8f96;margin:0;justify-self:center}
.footer-credit a{color:#8a8f96;text-decoration:none}
.footer-credit a:hover{color:#aebbff}
@media(max-width:860px){
/* Mobil mittig nach websites.md 6d */
.footer{text-align:center}
.footer-innen{grid-template-columns:1fr;gap:2rem;text-align:center}
.footer-schluss{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1rem}
.footer-legal{justify-content:center}
.footer-liste{justify-items:center}
}
/* ===== Fingerfreundliche Klickflaechen (mind. 44px hoch, Apple/WCAG-Richtwert) =====
Reine Innenabstaende – sie aendern die Optik nicht, vergroessern nur das Ziel. */
.footer-legal{display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin:0}
.footer-legal a{display:inline-block;padding:.7rem 0;color:#c9ccd1}
.krumen a{display:inline-block;padding:.65rem .15rem}
.rechtstext a{display:inline-block;padding:.55rem 0}
/* ===== Mobilmenue (websites.md §6a) =====
Ein seitlich geparktes Panel erzeugt sonst Ueberbreite. overflow-x:clip statt hidden:
clip schneidet ab, ohne einen eigenen Scroll-Kontext zu erzeugen. */
body{overflow-x:clip}
.burger{display:none;width:46px;height:46px;flex:0 0 auto;align-items:center;justify-content:center;
background:var(--paper);border:1.5px solid var(--line);border-radius:14px;cursor:pointer;
color:var(--navy);padding:0}
.burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
background:currentColor;border-radius:2px}
.burger span::before{top:-6px}
.burger span::after{top:6px}
/* Abdunklung und Panel liegen im SELBEN Elternelement – haengt man die Abdunklung
an den body, liegt sie ueber dem Panel und blockiert dessen Knoepfe. */
.mm-abdunklung{position:fixed;inset:0;background:rgba(35,42,68,.55);opacity:0;pointer-events:none;
transition:opacity .25s;z-index:60}
.mobilmenue{position:fixed;top:0;right:0;bottom:0;width:min(84vw,320px);z-index:61;
background:var(--paper);box-shadow:-18px 0 50px rgba(35,42,68,.22);
padding:1.1rem 1.2rem 2rem;display:flex;flex-direction:column;gap:.2rem;
transform:translateX(100%);transition:transform .28s ease;
/* Geschlossen zusaetzlich visibility:hidden – aria-hidden allein reicht nicht. */
visibility:hidden}
body.menue-offen .mm-abdunklung{opacity:1;pointer-events:auto}
body.menue-offen .mobilmenue{transform:translateX(0);visibility:visible}
/* Hintergrund-Scroll sperren, solange das Menue offen ist. */
body.menue-offen{overflow:hidden}
.mm-schliessen{align-self:flex-end;display:flex;align-items:center;gap:.4rem;min-height:44px;
padding:.5rem .9rem;margin-bottom:.6rem;background:var(--bg);border:1.5px solid var(--line);
border-radius:100px;font:inherit;font-weight:700;font-size:.9rem;color:var(--navy);cursor:pointer}
.mobilmenue a{display:flex;align-items:center;min-height:52px;padding:.2rem .4rem;
font-weight:700;font-size:1.05rem;color:var(--navy);border-bottom:1px solid var(--line)}
.mobilmenue a:last-of-type{border-bottom:0}
.mm-call{margin-top:1rem;justify-content:center;background:var(--blue);color:#fff!important;
border-radius:100px;border-bottom:0!important}
/* Nur-mobile Bausteine auf dem Desktop abschalten (websites.md §6a) – weder sichtbar
noch tabbar. MUSS NACH den Panel-Regeln stehen: dieselbe Spezifitaet, die spaetere
Regel gewinnt. Weiter oben wurde sie von .mobilmenue{display:flex} ueberschrieben. */
@media(min-width:861px){.burger,.mm-abdunklung,.mobilmenue{display:none}}
@media(max-width:860px){
/* Kopfzeile bleibt EINE Zeile: Logo + Anrufen + Burger.
ACHTUNG: Logohoehe und Padding stecken in --nav-h – wer hier etwas aendert,
MUSS --nav-h mitziehen, sonst springen die Anker wieder falsch. */
:root{--nav-h:calc(92px + 1.1rem + 1px)}
.nav{padding:.55rem 1rem}
.brand img{height:92px}
.nav-links{display:none}
.burger{display:flex}
/* Anrufen steckt mobil im Menue (.mm-call) – im Kopf raubt er nur Platz fuers Logo. */
.nav-call{display:none}
.hero{grid-template-columns:1fr}
/* Auch mobil das Originalverhaeltnis behalten – nur nach oben schieben.
Die frueheren 16/10 haetten von einem fast quadratischen Bild oben und unten
zu viel weggeschnitten (Kopf bzw. Wagenbeschriftung). */
.hero-photo{order:-1}
.warum-grid,.stimmen-grid,.kontakt-card{grid-template-columns:1fr}
.row-rev{direction:ltr}
/* Der harte Zeilenumbruch in der H1 passt nur auf breiten Schirmen –
mobil liess er "und" allein auf einer Zeile stehen. */
.nur-desktop{display:none}
}
/* ===== Mobil: mittig setzen + Knoepfe auf volle Breite (websites.md §6c) =====
Auf schmalen Schirmen wirkt durchgaengig linksbuendiger Satz unaufgeraeumt, und
kurze Knoepfe sehen verloren aus. Ausnahme laut §9: langer Rechtstext bleibt links. */
@media(max-width:860px){
.hero-inner,.sec-head,.sec-head h2,.row,.row-text,.warum-card,.warum-card h2,.warum-item,
.stimmen blockquote,.kontakt-text,.seiten-kopf,.seiten-kopf .lead,.inhalt-mitte,
.inhalt-mitte h2+p,.inhalt-mitte p+p,.weitere h2,.schluss-karte{text-align:center}
/* Elemente mit max-width muessen zusaetzlich mittig ausgerichtet werden –
text-align allein zentriert nur den Text IM Kasten, nicht den Kasten selbst.
.warum-card h2 hat max-width:20ch – genau daran haengengeblieben. */
.sec-head h2,.warum-card h2,.seiten-kopf h1,.seiten-kopf .lead,.inhalt-mitte h2+p,
.inhalt-mitte p+p,.row-text p,.warum-item p{margin-left:auto;margin-right:auto}
.row{grid-template-columns:1fr;justify-items:center}
.row-icon{margin:0 auto}
.wi-emoji{margin-left:auto;margin-right:auto}
/* Mobil mittig (§6d). Der Anruf-Block behaelt seine linksbuendige Kante bewusst:
die dicke Kante links ist das Formzitat aus dem Hero, zentrierter Text darin
wuerde sie sinnlos machen. Nur die Nummer selbst rueckt in die Mitte. */
/* Mobil mittig (§6d) - aber NICHT die beiden Kontaktkaesten: dort steht das Symbol
rechts, zentrierter Text daneben wirkt schief. Sie behalten ihre Ausrichtung,
nur der Standort darunter rueckt in die Mitte. */
.kontakt-ort{justify-content:center}
.oeffnungszeiten{text-align:center}
.oeffnungszeiten dl{margin:0 auto}
.krumen,.leistungsliste,.leistungsliste li{text-align:center}
.weitere-grid a{justify-content:center;text-align:center}
/* CTAs auf volle Breite: ein kurzer Knopf wirkt auf dem Handy verloren
und ist schlechter zu treffen. */
.hero-cta,.schluss-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn,.schluss-cta .btn{width:100%;text-align:center}
.foto-knopf{width:100%}
/* Kontaktbereich: Abschnitt, Karte und Formular haben je einen eigenen Innenabstand.
Auf 390px fraßen die drei zusammen 157px (40% der Breite) – das Formular wirkte
gequetscht. Mobil alle drei zurücknehmen; das Feld waechst von 233px auf ~304px. */
.kontakt{padding-left:.7rem;padding-right:.7rem}
.kontakt-card{padding:.9rem;border-radius:26px}
.kontakt-form{padding:1.1rem;border-radius:20px}
/* Beschriftungen und Hinweis mittig wie der Rest. Der EINGEGEBENE Text bleibt
bewusst linksbuendig – mittig tippen ist unangenehm zu lesen. */
.kontakt-form label,.kontakt-form small{text-align:center}
.kontakt-form input,.kontakt-form select,.kontakt-form textarea{text-align:left}
}
/* Langer Rechtstext bleibt auch mobil linksbuendig (websites.md §9). */
@media(max-width:860px){
.rechtstext,.rechtstext h2,.rechtstext h3,.rechtstext p{text-align:left}
}
/* prefers-reduced-motion: `html{scroll-behavior:smooth}` (0,0,1) schlaegt eine
*-Regel (0,0,0) - gemessen blieb der Wert trotz spaeterer Position auf `smooth`.
Deshalb hier ausdruecklich html UND :root ansprechen, nicht nur *. */
@media(prefers-reduced-motion:reduce){
html,:root{scroll-behavior:auto!important}
*{scroll-behavior:auto!important;transition:none!important;animation:none!important}
.tilt-l,.tilt-r{transform:none}
}
/* ================= Unterseiten Leistungen ================= */
.seiten-kopf{max-width:var(--wrap);margin:0 auto;padding:clamp(2.5rem,6vw,4rem) 1.4rem clamp(2rem,4vw,3rem)}
.krumen{font-size:.92rem;color:var(--ink-soft);margin-bottom:1.1rem}
/* text-decoration statt border-bottom – siehe Begruendung beim Anruf-Block */
.krumen a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.krumen a:hover{color:var(--blue-deep);text-decoration-color:var(--blue)}
/* hyphens:manual statt auto (11.09.2026, Mitch: "Hausmeisterservice unnoetig auf 2
Zeilen getrennt"). Mit "auto" hyphenierte der Browser selbst mitten ins Wort
("Hausmeis-terservice"), obwohl das ganze Wort (18 Zeichen) locker allein auf die
zweite Zeile passt (max-width 20ch). "manual" verbietet automatische Trennungen und
nutzt nur die bewusst gesetzten (z.B. bei "Datenschutzerklaerung", die bei
320px sonst ueberlaeuft) - dort bleibt der Umbruch also erhalten. */
.seiten-kopf h1{font-size:clamp(2rem,5vw,3.2rem);color:var(--navy);max-width:20ch;overflow-wrap:break-word;hyphens:manual}
.seiten-kopf .lead{margin-top:1.1rem;font-size:1.18rem;color:var(--ink-soft);max-width:60ch}
.inhalt{background:var(--paper);padding:clamp(2.5rem,6vw,4.5rem) 1.4rem}
.inhalt-mitte{max-width:calc(var(--wrap) - 2.8rem);margin:0 auto}
.inhalt-mitte h2{font-size:clamp(1.5rem,3.4vw,2.1rem);color:var(--navy);margin-bottom:1rem}
.inhalt-mitte h2+p{color:var(--ink-soft);margin-bottom:1.8rem;max-width:65ch}
/* Folgeabsatz: gleiche Werte wie h2+p. Ohne das lief der zweite Absatz eines
Textblocks ueber die vollen 1000px, waehrend der erste bei 65ch endete – und
klebte mangels margin-bottom an der naechsten H2 (gesehen 03.09. auf der
Entruempelungs-Seite). Keine neuen Werte, nur die vorhandenen uebernommen. */
.inhalt-mitte p+p{color:var(--ink-soft);margin-bottom:1.8rem;max-width:65ch}
.inhalt-mitte p+h2{margin-top:2.6rem}
.leistungsliste{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-bottom:2.6rem}
.leistungsliste li{background:var(--bg);border-radius:18px;padding:1rem 1.2rem;color:var(--navy);font-weight:600}
.leistungsliste li span{display:block;font-weight:400;color:var(--ink-soft);font-size:.95rem;margin-top:.15rem}
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1rem}
.galerie figure{margin:0;position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm)}
/* height:auto ist PFLICHT. Die width/height-Attribute im HTML (gegen Layout-Springen)
werden vom Browser als Praesentationshinweis zu einer festen Hoehe – dann ist KEINE
Dimension mehr auto und aspect-ratio wird komplett ignoriert. Genau so sind die
Bilder am 02.09. zu Streifen verzerrt worden. */
.galerie img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
/* max-width ist PFLICHT: Die Beschriftung ist absolut positioniert und ragte sonst
ueber den Bildrand hinaus, sobald die Spalten schmal werden (aufgefallen bei fuenf
Bildern im Ablauf). Umbruch erlauben statt abschneiden. */
.galerie figcaption{position:absolute;left:.7rem;bottom:.7rem;max-width:calc(100% - 1.4rem);
background:rgba(36,39,44,.92);color:#fff;font-size:.78rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:8px;
line-height:1.3;overflow-wrap:anywhere}
.galerie figure.ist figcaption{background:var(--blue);color:#0b1020}
/* Ablauf-Galerie: Der Schritt-Zaehler macht die Reihenfolge auf einen Blick lesbar –
sonst wirken vier Bilder wie eine beliebige Sammlung. */
.galerie figcaption{display:flex;align-items:center;gap:.45rem}
.galerie .schritt{display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.25);
font-size:.72rem;line-height:1}
.galerie figure.ist .schritt{background:rgba(11,16,32,.22)}
/* Das Ergebnis wird abgesetzt, damit der Endzustand sofort auffaellt. */
.galerie figure.fertig figcaption{background:var(--gold);color:#2a1c00}
.galerie figure.fertig .schritt{background:rgba(42,28,0,.22)}
.bild-hinweis{font-size:.92rem;color:var(--ink-soft);margin-bottom:2.4rem}
/* ================= Projektblock (Referenz eines echten Auftrags) =================
Grund: Vorher lagen mehrere getrennte Auftraege als EIN Bilderraster nebeneinander –
das las sich wie eine Bildersammlung, nicht wie Referenzen. Jeder Auftrag bekommt
jetzt einen eigenen Kasten mit Ueberschrift, kurzer Beschreibung und eigener Galerie. */
.projekte{margin-bottom:2.6rem}
.projekte>h2{margin-bottom:.6rem}
.projekte>p.projekte-lead{color:var(--ink-soft);margin-bottom:1.8rem;max-width:65ch}
.projekt{background:var(--bg);border-radius:28px;padding:clamp(1.3rem,3vw,2rem);
margin-bottom:1.6rem;box-shadow:var(--shadow-sm)}
.projekt:last-child{margin-bottom:0}
.projekt-kopf{margin-bottom:1.3rem}
.projekt-nr{display:inline-block;background:var(--navy);color:#fff;font-size:.72rem;
font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:.35rem .75rem;border-radius:999px;margin-bottom:.7rem}
.projekt-kopf h3{font-size:clamp(1.2rem,2.6vw,1.55rem);color:var(--navy);margin-bottom:.5rem}
.projekt-kopf p{color:var(--ink-soft);max-width:62ch;margin:0}
/* ECHTES RASTER statt einer langen Reihe (03.09.2026, Auftrag von Mitch:
"Dort sollte ein Grid vorhanden sein, die Bilder etwas groesser").
Vorher lagen fuenf Schritte in EINER Zeile – gemessen 174px pro Bild auf einem
1440px-Schirm, da erkennt man auf einem Baustellenfoto nichts mehr.
Die frueher hier notierte Begruendung ("Ablauf braucht mehr als zwei Spalten,
sonst zerfaellt die Reihenfolge") gilt so nicht mehr: Den Zusammenhang tragen
die Schritt-Zaehler 1-5 in der Beschriftung, nicht die Anordnung in einer Zeile.
Umgedreht auf Mitchs ausdruecklichen Wunsch, nicht eigenmaechtig ([[websites]] §5e). */
.projekt .galerie{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:.9rem}
/* ---- ABLAUF-GALERIE ALS SLIDER (03.09.2026, Auftrag Mitch: "daraus soll ein
Slider-Grid werden, nicht nur ein paar grosse Kacheln") --------------------
Gilt NUR fuer .galerie-ablauf (die Bildstrecken mit 4-5 Schritten). Die
.galerie-paar mit genau zwei Bildern bleibt ein Raster – ein Slider mit zwei
Elementen waere albern.
Mehrere Bilder gleichzeitig sichtbar (daher "Grid"), gewischt/gezogen wird
waagerecht mit scroll-snap. KEINE Pfeilknoepfe (Mitchs Vorgabe) – die Position
zeigt ein schlanker Fortschrittsbalken, gezogen wird mit der Maus (js/slider.js).
Die angeschnittene naechste Kachel signalisiert selbst, dass es weitergeht. */
.galerie-ablauf{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.2rem;
grid-template-columns:none}
.galerie-ablauf::-webkit-scrollbar{display:none}
/* 3 Kacheln sichtbar + Anschnitt der vierten. Die Breite haengt am Container,
nicht am Bildschirm – der Projektkasten hat eigenen Innenabstand. */
.galerie-ablauf figure{flex:0 0 clamp(230px,30%,320px);scroll-snap-align:start}
.projekt .galerie-ablauf img{aspect-ratio:1/1}
/* Ziehen mit der Maus: ohne das ist ein waagerechtes Band am Desktop mit Mausrad
kaum bedienbar (Trackpad ginge, Mausrad nicht). Der Cursor sagt es an. */
.galerie-ablauf{cursor:grab}
/* 🚨 PFLICHT bei jedem Drag-Slider mit Bildern: ![]()
ist im Browser von Haus aus
ZIEHBAR. Ohne diese Zeilen startet der Nutzer beim Ziehen das native
Bild-Drag-and-Drop (Geisterbild haengt am Zeiger) und der Slider bewegt sich
NICHT. Von Mitch live gefunden, 03.09.2026.
user-select verhindert zusaetzlich, dass beim Ziehen die Beschriftungen
blau markiert werden. */
.galerie-ablauf img{-webkit-user-drag:none;-khtml-user-drag:none;user-drag:none}
.galerie-ablauf{user-select:none;-webkit-user-select:none}
.galerie-ablauf.zieht{cursor:grabbing;scroll-snap-type:none}
.galerie-ablauf.zieht figure{pointer-events:none}
/* Fortschrittsbalken statt Pfeilen oder Punkten: zeigt Position UND Anteil auf
einen Blick und braucht keine Klickflaeche. Wird von js/slider.js gesetzt. */
.slider-bahn{height:4px;background:var(--line);border-radius:999px;margin:.9rem 0 0;
overflow:hidden}
.slider-fortschritt{display:block;height:100%;width:30%;background:var(--blue-deep);
border-radius:999px;transition:transform .12s linear,width .12s linear}
/* Sind alle Bilder ohnehin sichtbar, braucht es keinen Balken (js blendet aus). */
.slider-bahn[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.slider-fortschritt{transition:none}}
.projekt .galerie.galerie-paar{grid-template-columns:repeat(2,1fr)}
/* Quadratisch statt 4:3 – die Baustellenfotos sind gemischt hoch- und querformatig.
Bei 4:3 verlieren die Hochformate zu viel Bildmitte; quadratisch bueßen beide
Formate gleich viel ein und der Ablauf bleibt eine ruhige Reihe. */
.projekt .galerie img{aspect-ratio:1/1}
/* Im Paar-Raster ist pro Bild doppelt so viel Breite da – dort ist 4:3 die
natuerlichere Form und zeigt mehr vom Grundstueck. */
.projekt .galerie.galerie-paar img{aspect-ratio:4/3}
.projekt .bild-hinweis{margin-bottom:0}
.projekt-fakten{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.projekt-fakten li{background:var(--paper);border-radius:999px;padding:.4rem .9rem;
font-size:.87rem;color:var(--navy);font-weight:600}
.projekt-fakten li span{font-weight:400;color:var(--ink-soft)}
.schluss{max-width:var(--wrap);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 1.4rem}
.schluss-karte{background:var(--blue-soft);border-radius:36px;padding:clamp(1.8rem,4vw,3rem);text-align:center;box-shadow:var(--shadow-sm)}
.schluss-karte h2{font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--navy);margin-bottom:.7rem}
.schluss-karte p{color:var(--ink-soft);max-width:52ch;margin:0 auto 1.6rem}
.schluss-cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.weitere{max-width:var(--wrap);margin:0 auto;padding:0 1.4rem clamp(3rem,6vw,5rem)}
.weitere h2{font-size:1.35rem;color:var(--navy);margin-bottom:1.1rem}
/* auto-fit statt fester 3 Spalten: Seit die Spezialreinigung gestrichen ist, gibt es nur
noch 2 Kacheln - die dritte Spalte blieb leer (gemessen 324 px Loch rechts, die Reihe sah
abgebrochen aus). auto-fit passt sich an, egal wie viele Leistungen es kuenftig gibt. */
.weitere-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.weitere-grid a{background:var(--paper);border-radius:20px;padding:1.2rem;display:flex;align-items:center;gap:.9rem;box-shadow:var(--shadow-sm);transition:.2s;font-weight:700;color:var(--navy)}
.weitere-grid a:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--blue-deep)}
.weitere-grid span{font-size:1.6rem}
@media(max-width:860px){
.leistungsliste,.galerie,.weitere-grid{grid-template-columns:1fr}
/* Im Projektblock bleiben zwei Spalten: der Ablauf soll als Reihe lesbar bleiben. */
.projekt .galerie{grid-template-columns:repeat(2,1fr)}
.footer-logo{height:96px}
}
@media(max-width:560px){
/* Ab hier waeren zwei Spalten unter 170px breit – dann erkennt man auf den Baustellen-
fotos nichts mehr. Eine Spalte, die Reihenfolge traegt der Schritt-Zaehler. */
.projekt .galerie,.projekt .galerie.galerie-paar{grid-template-columns:1fr}
/* Im Slider stattdessen fast volle Breite: eine Kachel gross, die naechste
angeschnitten als Hinweis, dass es weitergeht. */
.galerie-ablauf figure{flex:0 0 82%}
/* websites.md §6d: mobil mittig. */
.projekt-kopf,.projekt-kopf p,.projekte>p.projekte-lead,.projekt .bild-hinweis{text-align:center}
.projekt-kopf p,.projekte>p.projekte-lead{margin-left:auto;margin-right:auto}
.projekt-fakten{justify-content:center}
}
@media(max-width:560px){
.nav{gap:.6rem}
/* Waagerecht enger, senkrecht NICHT – der Knopf muss 44px hoch bleiben (Daumen). */
.nav-call{padding:.75rem .9rem;font-size:.85rem}
}
/* Aufgeraeumt 03.09.2026 (Befund md-pruefer): .trust, .row/.row-icon/.row-rev/.row-text,
.pruef-hinweis, .footer-legal em und .rechtstext li waren tot - Reste der abgeloesten
Leistungs-Zeilen und eines alten Pruefhinweises. Gegengeprueft: 0 Treffer im HTML.
================= Rechtsseiten ================= */
/* Zwei Ebenen: Der BLOCK nimmt den Satzspiegel der ganzen Seite (fluchtet damit mit H1 und
Kopfzeile), die Textelemente DARIN behalten ihr 820px-Lesemass. Vorher war der ganze Block
zentriert - die H1 "Impressum" stand bei 162 px, der Text darunter bei 310 px, 148 px
Versatz auf derselben Seite. websites.md 3c. */
.rechtstext{max-width:calc(var(--wrap) - 2.8rem);margin:0 auto}
.rechtstext > *{max-width:820px}
.rechtstext h2{font-size:clamp(1.25rem,2.6vw,1.6rem);color:var(--navy);margin:2.4rem 0 .8rem}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.08rem;color:var(--navy);margin:1.6rem 0 .5rem}
.rechtstext p{color:var(--ink-soft);margin-bottom:1rem}
.rechtstext a{color:var(--blue-deep);overflow-wrap:anywhere;
text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:3px}
.rechtstext p,.daten-block p{overflow-wrap:anywhere}
.rechtstext a:hover{background:var(--blue-soft)}
.daten-block{background:var(--bg);border-radius:20px;padding:1.4rem 1.6rem;margin-bottom:1.2rem}
.daten-block strong{display:block;color:var(--navy);margin-bottom:.4rem}
.daten-block p{margin:0;line-height:1.7}
/* ================= Bildbetrachter (Lightbox, 03.09.2026) =================
Gehoert zu js/lightbox.js. Formwerte wieder aus dem Bestand (§3c-bis):
Radius 20px wie .galerie figure, Beschriftung im Stil von .galerie figcaption,
Schliessen-Knopf 44px = das Klickflaechenmass der Seite. */
/* Die Abdunklung liegt am Dialog SELBST, nicht nur am ::backdrop: dessen
Darstellung ist je nach Browser unterschiedlich, und im Test schien der
Hintergrund (Logo, Navigation) noch deutlich durch. So ist die Flaeche
garantiert da, der ::backdrop deckt nur noch den Rest ab. */
.lb{border:0;padding:0;background:rgba(20,22,26,.95);max-width:100vw;max-height:100vh;
width:100%;height:100%;overflow:hidden}
.lb::backdrop{background:rgba(20,22,26,.95)}
/* 🚨 PFLICHTZEILE. Ein