/* ============================================================
TEUS Haustechnik — Stylesheet
Die Farben stehen in site_config.py unter FARBEN; die :root-Variablen
hier muessen dazu passen.
Gestaltungsgedanke
------------------
Der Betrieb hat etwas, das die meisten Handwerksbetriebe nicht haben:
zwanzig eigene Aufnahmen fertiger Baeder — freistehende Wannen,
Marmordekor, Fischgratparkett. Diese Bilder tragen die Seite, alles
andere ordnet sich unter. Deshalb ein grosses Foto ueber die volle
Breite als Auftakt und eine Galerie als Mittelstueck, statt der ueblichen
Symbolkacheln.
Das zweite Formmotiv kommt aus dem Logo: die nach rechts offene Klammer
um das Quadrat. Sie taucht als .klammer wieder auf — vor Abschnitts-
ueberschriften und um Bilder. Ein Motiv, konsequent wiederholt, ergibt
Wiedererkennung; drei ergeben Unruhe.
Warum eine Serifenschrift fuer die Ueberschriften
-------------------------------------------------
Sanitaerbetriebe im Netz sehen alle gleich aus, weil sie alle dieselbe
Grotesk in Blau setzen. Die Aufnahmen hier zeigen gehobene Baeder; eine
Serifenschrift stellt sie in die Naehe von Innenarchitektur statt in die
Naehe eines Baumarktprospekts. Die Bedienelemente bleiben in Inter —
Serife in Schaltflaechen und Formularen liest sich schlechter.
============================================================ */
:root{
--navy:#10243B;
--blue:#2C87CF; /* Markenblau: Flaechen, Rahmen, grosse Schrift */
--blue-ink:#1A6BAB; /* Links und Schaltflaechen (AA auf Weiss) */
--blue-hell:#79B8EA; /* Akzent auf dunklem Grund */
--paper:#FFFFFF;
--paper-2:#F4F7FA;
--line:#E1E8F0;
--text:#1F2937;
--text-2:#55637A;
--green:#2E7D4F;
--signal:#C0392B; /* nur fuer den Notdienst */
}
/* Warum zwei Blau: #2C87CF, das Blau aus dem Logo, erreicht auf Weiss ein
Kontrastverhaeltnis von 3.8:1. WCAG AA verlangt fuer Fliesstext und fuer
weisse Schrift auf farbiger Schaltflaeche 4.5:1. Das Markenblau traegt
deshalb Flaechen und Rahmen, --blue-ink (5.6:1) traegt alles, worin Text
steht. Wer hier eine Farbe durch die andere ersetzt, macht entweder die
Marke falsch oder die Schrift unlesbar. */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
background:var(--paper); color:var(--text);
font-family:'Inter', sans-serif; line-height:1.65;
-webkit-font-smoothing:antialiased;
}
/* height:auto ist hier nicht Kosmetik, sondern Pflicht. Jedes traegt
width- und height-Attribute (gegen CLS). Wird die Breite dann per CSS
beschnitten — hier durch max-width:100% —, bleibt die Hoehe aus dem
Attribut stehen und das Bild wird verzerrt. Regeln mit absichtlich fester
Hoehe (.logo-img, .hero-foto-bild img) sind spezifischer und gewinnen. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
picture{ display:block; }
h1,h2,h3{
font-family:'Source Serif 4', serif;
font-weight:600;
color:var(--navy);
line-height:1.15;
letter-spacing:-0.008em;
}
/* Deutsche Komposita sind lang: "Trinkwasserhygiene",
"Anlagenmechaniker", "Heizungsmodernisierung". In einer grossen
Ueberschrift passt so ein Wort auf 320 px nicht mehr in die Spalte und
schiebt die ganze Seite nach rechts. Der Ueberlauf passiert INNERHALB des
Textflusses — die uebliche Suche nach ueberstehenden Kaesten findet nichts.
hyphens:auto trennt nach deutschen Regeln, weil gesetzt
ist. overflow-wrap ist der Notnagel, wenn ein Wort selbst getrennt nicht
passt; es greift nur dann. */
h1,h2,h3,h4,summary{ overflow-wrap:break-word; hyphens:auto; }
p,li,td,th,dd,figcaption{ overflow-wrap:break-word; }
:focus-visible{ outline:2px solid var(--blue-ink); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 28px; }
section{ padding:104px 0; }
@media (max-width:900px){ section{ padding:72px 0; } }
@media (max-width:560px){ section{ padding:56px 0; } }
.flaeche{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dunkel{ background:var(--navy); color:#DCE6F2; }
.dunkel h2, .dunkel h3{ color:#fff; }
/* ---------- Klammer: das Formmotiv aus dem Logo ----------
Die Bildmarke ist ein Rahmen, der nach rechts offen steht. Als
Gestaltungselement bleibt davon die linke obere Ecke: zwei Striche, die
einen Anfang markieren. Sie sitzt vor Abschnittsueberschriften. */
.eyebrow{
font-size:12.5px; color:var(--blue-ink); font-weight:700;
text-transform:uppercase; letter-spacing:0.1em;
margin-bottom:18px; position:relative; padding-left:22px;
}
.eyebrow::before{
content:""; position:absolute; left:0; top:2px;
width:12px; height:12px;
border-left:2px solid var(--blue); border-top:2px solid var(--blue);
}
.eyebrow-hell{ color:var(--blue-hell); }
.eyebrow-hell::before{ border-color:var(--blue-hell); }
/* Klammer als Bildrahmen: die Ecken oben links und unten rechts, versetzt
hinter dem Bild. Wird sparsam eingesetzt — auf der Startseite genau
einmal, am Abschnitt "Unsere Arbeit". */
.klammer{ position:relative; }
.klammer::before, .klammer::after{
content:""; position:absolute; width:64px; height:64px; pointer-events:none;
border-color:var(--blue); border-style:solid; border-width:0;
}
.klammer::before{ left:-14px; top:-14px; border-left-width:3px; border-top-width:3px; }
.klammer::after{ right:-14px; bottom:-14px; border-right-width:3px; border-bottom-width:3px; }
@media (max-width:600px){
.klammer::before, .klammer::after{ width:36px; height:36px; }
.klammer::before{ left:-8px; top:-8px; }
.klammer::after{ right:-8px; bottom:-8px; }
}
/* ---------- Header ---------- */
header{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,0.94); backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.header-inner{
max-width:1180px; margin:0 auto; padding:14px 28px;
display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Der Logo-Link darf nicht schrumpfen. Ohne flex-shrink:0 gibt im Header
ausgerechnet er nach, sobald die Navigation eng wird. */
.header-inner > a{ flex-shrink:0; }
/* Hoehe der Kopffassung (logo-kopf.svg, viewBox 725x100 — Klammer,
Wortmarke und Claim).
Warum eine eigene Datei und nicht logo.svg: das Original ist eine
Blockmarke, deren Klammer 120 Einheiten hoch ist, waehrend die Wortmarke
nur 28 davon belegt und der Claim 10. Wer die Datei auf Kopfzeilenhoehe
skaliert, skaliert nach der Klammer — bei 46 px blieben der Wortmarke
10,7 px Versalhoehe, genau so viel wie den Navigationslinks daneben, und
dem Claim 4,6 px, also grauer Nebel.
Die Kopffassung skaliert Schrift und Klammer getrennt. Bei 46 px:
Wortmarke 19,6 px Versalhoehe (Navigation: 10,7 px)
Claim 8,5 px Versalhoehe (vorher 4,6 px)
Breite 333 px
Alle drei Zahlen sind gemessen. Die Formen selbst sind unveraendert —
dieselbe Klammer, dieselben Buchstaben, dieselben Farben. */
.logo-img{ height:46px; width:auto; display:block; }
/* Staffelung nach Platz. Belegte Kopfbreite gegen verfuegbare Innenbreite:
Fenster Logo belegt verfuegbar
1181+ 333 px 1055 px 1124 px passt
1121 290 px 1012 px 1065 px passt
1120- 290 px — — Burger uebernimmt
560- 232 px
400- 189 px
Vorher stand die Burger-Grenze bei 1060 px. Mit dem groesseren Logo lief
der Kopf zwischen 1061 und 1180 px um bis zu 72 px ueber; deshalb rueckt
sie auf 1120 und das Logo wird darunter kleiner. Wer die Navigation
erweitert, misst neu. */
@media (max-width:1180px){ .logo-img{ height:40px; } }
@media (max-width:560px){ .logo-img{ height:32px; } }
/* Auf 320 px passten Logo, Hoerersymbol und Burger samt der 28 px Abstaende
nicht mehr in die 264 px Innenbreite — der Kopf schob die Seite um 27 px
nach rechts. */
@media (max-width:400px){
.logo-img{ height:26px; }
nav{ gap:14px; }
.header-inner{ gap:12px; }
}
nav{ display:flex; align-items:center; gap:28px; }
.nav-links{ display:flex; gap:26px; }
/* Unterhalb dieser Breite uebernimmt das Burger-Menue. Die Grenze ist
gemessen: Logo (263 px bei 40 px Hoehe), fuenf Menuepunkte, Nummer und
Schaltflaeche belegen 985 px und brauchen mit den Abstaenden 1121 px
Fensterbreite. Vorher stand hier 1060 — mit dem kleineren Logo passte das,
mit dem groesseren nicht mehr, und der Kopf schob die Seite um bis zu 72 px
nach rechts. Wer die Navigation erweitert, misst neu. */
@media (max-width:1120px){ .nav-links{ display:none; } }
nav a{ text-decoration:none; font-size:15px; color:var(--navy); font-weight:500; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active{ color:var(--blue-ink); }
.nav-links a.active{ font-weight:600; }
/* Telefonnummer im Kopf. Bei einem Handwerksbetrieb ist der Anruf der
haeufigste erste Schritt — sie gehoert sichtbar nach oben, nicht nur auf
die Kontaktseite. */
.kopf-tel{
display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
font-weight:600; font-size:15px; color:var(--navy); text-decoration:none;
}
.kopf-tel:hover{ color:var(--blue-ink); }
.kopf-tel svg{ width:17px; height:17px; flex-shrink:0; fill:var(--blue); }
/* Unter 820 px bleibt nur noch das Symbol: die Nummer selbst braucht
130 px, die der Header dort nicht mehr hat. */
@media (max-width:820px){ .kopf-tel .nr{ display:none; } }
/* Unter 700 px passen Logo, Schaltflaeche und Burger nicht nebeneinander.
Gemessen bei 640 px: Logo 290 + Hoerersymbol 17 + Schaltflaeche 172 +
Burger 40 + 80 px Abstaende = 599 px in 584 px Innenbreite — der Kopf schob
die Seite um 3 px nach rechts. Die Grenze lag vorher bei 600 px, was mit
dem kleineren Logo noch reichte.
Die Schaltflaeche entfaellt hier, nicht das Hoerersymbol: neben einem
Burger, der denselben Aufruf enthaelt, ist sie die Dopplung — die
Rufnummer ist es nicht. */
@media (max-width:700px){ header nav > .btn-primary{ display:none; } }
.btn{
font-weight:600; font-size:15px; padding:13px 24px; border-radius:8px;
text-decoration:none; display:inline-flex; align-items:center; gap:9px;
border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
transition:background 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary{ background:var(--blue-ink); color:#fff; }
.btn-primary:hover{ background:#14588E; transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--navy); background:transparent; }
.btn-ghost:hover{ border-color:var(--blue-ink); color:var(--blue-ink); }
/* Auf dem Foto: heller Rahmen statt grauer, sonst verschwindet er. */
.btn-hell{ border-color:rgba(255,255,255,0.55); color:#fff; background:rgba(255,255,255,0.08); }
.btn-hell:hover{ border-color:#fff; background:rgba(255,255,255,0.18); }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }
.btn svg{ width:17px; height:17px; fill:currentColor; flex-shrink:0; }
.menu-btn{
display:none; background:none; border:none; cursor:pointer;
width:40px; height:40px; padding:0; align-items:center; justify-content:center;
flex-direction:column; gap:5px;
}
.menu-btn span{ display:block; width:22px; height:2px; background:var(--navy); transition:transform 0.25s ease, opacity 0.25s ease; }
@media (max-width:1120px){ .menu-btn{ display:flex; } }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ display:none; position:fixed; top:76px; left:0; right:0; bottom:0; background:#fff; z-index:49; padding:12px 28px 40px; overflow-y:auto; }
.mobile-nav.open{ display:block; }
.mobile-nav a{ display:block; padding:15px 0; font-size:18px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); }
.mobile-nav .btn{ display:block; text-align:center; margin-top:24px; }
.mobile-nav .btn + .btn{ margin-top:12px; }
/* ---------- Hero mit Foto ----------
Aufbau: das Bild liegt absolut hinter dem Inhalt, der Verlauf darueber.
Nicht als background-image, weil ein width/height, alt-Text,
fetchpriority und den WebP-Rueckfall ueber mitbringt — als
Hintergrundbild ginge all das verloren, und das Bild ist hier das
LCP-Element. */
.hero-foto{
position:relative; background:var(--navy); overflow:hidden;
display:flex; align-items:flex-end;
min-height:clamp(540px, 76vh, 780px);
/* Die allgemeine Abstandsregel fuer gilt hier nicht: den Abstand
setzt .hero-foto-inhalt. Solange das Bild absolut darueberliegt, faellt
ein Polster nicht auf — sobald es das nicht mehr tut (schmale Geraete,
siehe unten), stand darueber ein navyfarbener Streifen von 56 px. */
padding:0;
}
.hero-foto-bild{ position:absolute; inset:0; }
.hero-foto-bild img{
width:100%; height:100%; object-fit:cover; display:block;
}
/* Der Verlauf ist zweiteilig: von links, damit die Schrift traegt, und von
unten, damit die Schaltflaechen nicht auf hellem Parkett stehen.
Gepruefte Deckung: an der Textkante bleiben mindestens 4.5:1. */
.hero-foto-bild::after{
content:""; position:absolute; inset:0;
background:
linear-gradient(90deg, rgba(16,36,59,0.94) 0%, rgba(16,36,59,0.82) 34%, rgba(16,36,59,0.34) 68%, rgba(16,36,59,0.18) 100%),
linear-gradient(0deg, rgba(16,36,59,0.62) 0%, rgba(16,36,59,0) 46%);
}
.hero-foto-inhalt{ position:relative; z-index:1; width:100%; padding:120px 0 64px; }
.hero-foto h1{
color:#fff; font-size:clamp(36px, 5.4vw, 62px);
margin:0 0 22px; max-width:15em;
/* Ausnahme vom globalen hyphens:auto. Auf 375 px trennte die deutsche
Silbentrennung die Zeile zu "Bäder, die den All-" / "tag überstehen." —
regelgerecht, aber in einer 36-px-Schlagzeile ein Stolperstein, und der
Umbruch fiel mitten in das farbig ausgezeichnete Wort. Ohne automatische
Trennung rutscht das ganze Wort in die naechste Zeile.
overflow-wrap:break-word bleibt als Notnagel gegen Ueberlauf; es greift
nur, wenn ein einzelnes Wort selbst allein nicht in die Zeile passt. */
hyphens:manual;
}
.hero-foto h1 .hi{ color:var(--blue-hell); }
.hero-foto .lede{
font-size:clamp(16.5px, 1.5vw, 19px); color:#CBD9EA;
max-width:38em; margin-bottom:34px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-foto-inhalt > .wrap > *{ animation:auf 0.7s ease both; }
.hero-foto-inhalt > .wrap > *:nth-child(1){ animation-delay:0.04s; }
.hero-foto-inhalt > .wrap > *:nth-child(2){ animation-delay:0.12s; }
.hero-foto-inhalt > .wrap > *:nth-child(3){ animation-delay:0.20s; }
.hero-foto-inhalt > .wrap > *:nth-child(4){ animation-delay:0.28s; }
.hero-foto-inhalt > .wrap > *:nth-child(5){ animation-delay:0.36s; }
@keyframes auf{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
/* Merkmalzeile unter den Schaltflaechen. Keine erfundenen Zahlen — hier
stehen nur Aussagen, die aus dem Leistungsumfang folgen. */
.hero-marken{
list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px;
margin-top:38px; font-size:14px; color:#B8CADF;
}
.hero-marken li{ display:flex; align-items:center; gap:9px; }
.hero-marken li::before{
content:""; width:7px; height:7px; flex-shrink:0;
border-left:2px solid var(--blue-hell); border-top:2px solid var(--blue-hell);
}
/* Auf schmalen Geraeten liegt der Text NICHT mehr auf dem Bild, sondern
darunter.
Grund: die Schrift braucht einen Verlauf, der sie traegt. Auf dem Desktop
laeuft er von links und laesst die rechte Bildhaelfte frei. Auf 375 px gibt
es keine rechte Haelfte — der Verlauf deckt die ganze Flaeche, und vom Foto
blieb eine einfarbig dunkelblaue Flaeche uebrig. Bei einer Seite, die vom
Bild lebt, ist das der falsche erste Eindruck, und das ist die Ansicht, in
der die meisten Besucher ankommen.
Also: Bild oben in voller Breite, Text darunter auf Navy. Beides ist
lesbar, und das Foto ist wieder ein Foto. */
@media (max-width:640px){
.hero-foto{ display:block; min-height:0; }
.hero-foto-bild{ position:relative; inset:auto; height:46vh; min-height:290px; }
.hero-foto-bild::after{
background:linear-gradient(0deg, rgba(16,36,59,0.55) 0%, rgba(16,36,59,0) 45%);
}
.hero-foto-inhalt{ padding:40px 0 52px; }
.hero-foto h1{ font-size:clamp(31px, 8.4vw, 40px); }
.hero-ctas .btn{ width:100%; justify-content:center; }
.hero-marken{ gap:8px 20px; font-size:13px; margin-top:30px; }
}
/* ---------- Seitenkopf der Unterseiten ---------- */
.page-hero{ padding:60px 0 44px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(30px,4.2vw,46px); }
.page-hero .lede{ color:var(--text-2); font-size:17.5px; max-width:44em; margin-top:18px; }
.breadcrumb{ font-size:13px; color:var(--text-2); margin-bottom:14px; }
.breadcrumb a{ color:var(--blue-ink); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
/* ---------- Notdienstband ----------
Das einzige Angebot mit Zeitdruck. Es steht auf jeder Seite ueber dem
Fuss — wer mit Wasser im Flur auf der Impressumsseite landet, soll die
Nummer nicht suchen muessen. Signalfarbe nur hier; sonst verliert sie
ihre Bedeutung. */
.notdienst{ background:var(--navy); color:#fff; padding:34px 0; }
.notdienst-inner{
display:flex; align-items:center; justify-content:space-between;
gap:28px; flex-wrap:wrap;
}
.notdienst h2{ color:#fff; font-size:24px; margin-bottom:6px; display:flex; align-items:center; gap:12px; }
.notdienst p{ color:#B8CADF; font-size:14.5px; max-width:44em; }
.notdienst .puls{
width:10px; height:10px; border-radius:50%; background:var(--signal);
flex-shrink:0; box-shadow:0 0 0 0 rgba(192,57,43,0.7);
animation:puls 2.4s ease-out infinite;
}
@keyframes puls{
0%{ box-shadow:0 0 0 0 rgba(192,57,43,0.65); }
70%{ box-shadow:0 0 0 12px rgba(192,57,43,0); }
100%{ box-shadow:0 0 0 0 rgba(192,57,43,0); }
}
.notdienst .btn-primary{ background:var(--blue); font-size:16px; padding:15px 26px; }
.notdienst .btn-primary:hover{ background:#3E97DC; }
/* ---------- Leistungen ---------- */
.leistungen-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; }
@media (max-width:980px){ .leistungen-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:660px){ .leistungen-grid{ grid-template-columns:1fr; } }
/* Grid-Kinder haben von Haus aus min-width:auto und koennen daher nicht
unter die Breite ihres Inhalts schrumpfen — ohne min-width:0 laeuft die
Spur ueber und die Seite bekommt einen waagerechten Scrollbalken. */
.leistung-karte{
min-width:0; display:flex; flex-direction:column;
border:1px solid var(--line); border-radius:14px; overflow:hidden;
background:#fff; text-decoration:none;
transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.leistung-karte:hover{
transform:translateY(-4px); border-color:#BFD5EA;
box-shadow:0 14px 34px rgba(16,36,59,0.10);
}
.leistung-bild{ aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); }
.leistung-bild img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.leistung-karte:hover .leistung-bild img{ transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){ .leistung-karte:hover .leistung-bild img{ transform:none; } }
.leistung-text{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.leistung-text h3{ font-size:20px; margin-bottom:10px; }
.leistung-text p{ font-size:14.5px; color:var(--text-2); flex:1; }
.leistung-mehr{
margin-top:18px; font-size:14px; font-weight:600; color:var(--blue-ink);
display:inline-flex; align-items:center; gap:7px;
}
.leistung-karte:hover .leistung-mehr{ gap:11px; }
.leistungen-grid .reveal:nth-child(2){ transition-delay:0.06s; }
.leistungen-grid .reveal:nth-child(3){ transition-delay:0.12s; }
.leistungen-grid .reveal:nth-child(4){ transition-delay:0.18s; }
.leistungen-grid .reveal:nth-child(5){ transition-delay:0.24s; }
.leistungen-grid .reveal:nth-child(6){ transition-delay:0.30s; }
/* ---------- Galerie "Unsere Arbeit" ----------
Das Mittelstueck der Startseite. Alle Aufnahmen stammen aus eigenen
Projekten; kein Katalogbild, kein Symbolfoto. */
.arbeit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; }
@media (max-width:900px){ .arbeit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .arbeit-grid{ grid-template-columns:1fr; } }
.arbeit-bild{
min-width:0; position:relative; overflow:hidden; border-radius:12px;
background:var(--paper-2); aspect-ratio:4/3;
}
.arbeit-bild img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.arbeit-bild:hover img{ transform:scale(1.05); }
@media (prefers-reduced-motion: reduce){ .arbeit-bild:hover img{ transform:none; } }
/* Die erste Kachel nimmt zwei Spalten und zwei Zeilen — sonst liest sich
ein Raster aus neun gleich grossen Bildern wie ein Kontaktbogen. */
.arbeit-grid .gross{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:520px){ .arbeit-grid .gross{ grid-column:span 1; grid-row:span 1; aspect-ratio:4/3; } }
.arbeit-note{ margin-top:26px; font-size:13.5px; color:var(--text-2); }
/* ---------- Gruende ---------- */
.gruende{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px 56px; margin-top:52px; }
@media (max-width:760px){ .gruende{ grid-template-columns:1fr; gap:34px; } }
.grund{ min-width:0; padding-left:26px; position:relative; }
.grund::before{
content:""; position:absolute; left:0; top:6px; width:13px; height:13px;
border-left:2.5px solid var(--blue); border-top:2.5px solid var(--blue);
}
.grund h3{ font-size:19px; margin-bottom:9px; }
.grund p{ font-size:15px; color:var(--text-2); }
.dunkel .grund p{ color:#B8CADF; }
.dunkel .grund::before{ border-color:var(--blue-hell); }
/* ---------- Ablauf ---------- */
.flow{ margin-top:56px; position:relative; }
.flow-line{ position:absolute; top:23px; left:0; right:0; height:2px; background:var(--line); z-index:0; }
.flow-line-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:var(--blue); transition:width 1.4s cubic-bezier(0.4,0,0.2,1) 0.2s; }
.flow.in-view .flow-line-fill{ width:100%; }
.flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; z-index:1; }
.flow-step{ text-align:center; min-width:0; }
/* Unter 760 px bricht das Raster auf zwei Spalten um. Die durchgehende
.flow-line liegt aber absolut auf top:23px und trifft damit nur noch die
erste Zeile — bei Schritt 3 und 4 fehlte die Verbindung ganz. Statt einer
Linie fuer alles bekommt hier jeder Schritt seinen eigenen Verbinder nach
rechts, und der letzte je Zeile keinen.
Die Breite: Abstand zwischen zwei Punktmitten ist Spaltenbreite + 20 px
Gap, davon gehen zweimal 24 px Punktradius ab — bleibt calc(100% - 28px). */
@media (max-width:760px){
.flow-steps{ grid-template-columns:1fr 1fr; row-gap:36px; }
.flow-line{ display:none; }
.flow-step{ position:relative; }
.flow-step::after{
content:""; position:absolute; top:23px; left:calc(50% + 24px);
width:calc(100% - 28px); height:2px; background:var(--line);
transition:background-color 0.5s ease;
}
.flow-step:nth-child(2n)::after{ content:none; }
.flow.in-view .flow-step::after{ background:var(--blue); }
.flow.in-view .flow-step:nth-child(1)::after{ transition-delay:0.3s; }
.flow.in-view .flow-step:nth-child(3)::after{ transition-delay:1.1s; }
}
.flow-dot{
width:48px; height:48px; border-radius:50%; background:#fff;
border:2px solid var(--line); color:var(--text-2);
display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
font-weight:700; font-family:'Source Serif 4',serif; font-size:17px;
transition:border-color 0.5s ease, color 0.5s ease, background 0.5s ease;
}
.flow.in-view .flow-dot{ border-color:var(--blue); color:#fff; background:var(--blue); }
.flow-step:nth-child(1) .flow-dot{ transition-delay:0.1s; }
.flow-step:nth-child(2) .flow-dot{ transition-delay:0.5s; }
.flow-step:nth-child(3) .flow-dot{ transition-delay:0.9s; }
.flow-step:nth-child(4) .flow-dot{ transition-delay:1.3s; }
.flow-step h3{ font-size:16.5px; margin-bottom:7px; }
.flow-step p{ font-size:13.5px; color:var(--text-2); }
/* ---------- Stellenangebote ---------- */
.stellen{ display:flex; flex-direction:column; gap:22px; margin-top:48px; }
.stelle{
border:1px solid var(--line); border-radius:14px; padding:30px 32px;
background:#fff;
}
@media (max-width:560px){ .stelle{ padding:24px 20px; } }
.stelle-kopf{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:6px; }
.stelle h3{ font-size:21px; }
.stelle-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
font-size:12px; font-weight:600; letter-spacing:0.03em;
background:var(--paper-2); border:1px solid var(--line);
color:var(--text-2); padding:5px 11px; border-radius:99px; white-space:nowrap;
}
.stelle-spalten{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:22px; }
@media (max-width:760px){ .stelle-spalten{ grid-template-columns:1fr; gap:22px; } }
.stelle-spalten h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.07em; color:var(--blue-ink); margin-bottom:10px; }
.stelle-spalten ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.stelle-spalten li{ font-size:14.5px; color:var(--text-2); padding-left:18px; position:relative; }
.stelle-spalten li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-left:2px solid var(--blue); border-top:2px solid var(--blue); }
.stelle-fuss{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
/* ---------- FAQ ---------- */
.faq-list{ margin-top:40px; max-width:82ch; }
details{ border-bottom:1px solid var(--line); padding:22px 0; }
details:first-child{ border-top:1px solid var(--line); }
summary{
cursor:pointer; font-size:17.5px; color:var(--navy); font-weight:600;
list-style:none; display:flex; justify-content:space-between; align-items:center;
gap:20px; letter-spacing:-0.01em; font-family:'Source Serif 4',serif;
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-size:22px; color:var(--blue-ink); font-weight:400; flex-shrink:0; transition:transform 0.2s ease; font-family:'Inter',sans-serif; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ margin-top:14px; font-size:15px; color:var(--text-2); max-width:68ch; }
details p + p{ margin-top:10px; }
/* ---------- Fliesstext ---------- */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(24px,2.8vw,31px); margin-top:52px; margin-bottom:16px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:19px; margin-top:32px; margin-bottom:10px; }
.prose p{ font-size:16.5px; color:var(--text-2); margin-bottom:16px; }
.prose ul, .prose ol{ margin:0 0 18px 22px; color:var(--text-2); font-size:16.5px; }
.prose li{ margin-bottom:9px; }
.prose a{ color:var(--blue-ink); text-decoration:underline; }
.prose strong{ color:var(--navy); font-weight:600; }
.check-list{ list-style:none; margin-left:0; }
.check-list li{ padding-left:26px; position:relative; }
.check-list li::before{
content:""; position:absolute; left:1px; top:8px; width:9px; height:9px;
border-left:2.5px solid var(--blue); border-top:2.5px solid var(--blue);
}
/* Bild im Textfluss. Bricht bewusst aus der Lesespalte aus, bleibt aber
innerhalb des wrap. */
.prose-img{ margin:34px 0; max-width:none; }
.prose-img img{ display:block; width:100%; height:auto; border-radius:12px; }
.prose-img figcaption{ margin-top:11px; font-size:13.5px; color:var(--text-2); }
/* ---------- Schlussaufruf ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; }
.cta-final p{ color:var(--text-2); max-width:52ch; margin:0 auto 34px; font-size:17px; }
.cta-final .hero-ctas{ justify-content:center; }
.dunkel.cta-final p{ color:#B8CADF; }
/* ---------- Kontakt ---------- */
.contact-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.contact-grid > *{ min-width:0; }
/* ---------- Kontaktwege ----------
Hier stand bis zum 21.08.2026 das Kontaktformular. Es ist ersatzlos
entfallen; die Seite kommt jetzt ohne serverseitigen Code aus. An seiner
Stelle stehen die zwei Wege, die es ohnehin gab — Telefon und E-Mail —,
nur gross genug, dass man sie nicht sucht. */
.kontaktwege{ display:flex; flex-direction:column; gap:14px; }
.kontaktweg{
display:flex; gap:16px; align-items:flex-start; text-decoration:none;
border:1px solid var(--line); border-radius:14px; padding:20px 22px;
background:var(--paper-2);
transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.kontaktweg:hover{
border-color:var(--blue); transform:translateY(-2px);
box-shadow:0 10px 24px rgba(16,36,59,0.08);
}
.kw-symbol{ flex-shrink:0; width:42px; height:42px; border-radius:10px;
background:var(--blue-ink); display:flex; align-items:center; justify-content:center; }
.kw-symbol svg{ width:21px; height:21px; fill:#fff; }
.kw-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.kw-label{ font-size:12.5px; font-weight:700; letter-spacing:0.08em;
text-transform:uppercase; color:var(--blue-ink); }
/* Die Rufnummer ist das Groesste auf dieser Seite — sie ist der Zweck der
Seite. break-word, weil die E-Mail-Adresse auf 320 px sonst herauslaeuft. */
.kw-wert{ font-family:'Source Serif 4',serif; font-size:23px; font-weight:600;
color:var(--navy); line-height:1.2; overflow-wrap:break-word; }
.kw-zusatz{ font-size:13.5px; color:var(--text-2); line-height:1.5; margin-top:2px; }
@media (max-width:420px){
.kontaktweg{ padding:16px 16px; gap:12px; }
.kw-wert{ font-size:19px; }
}
.kontakt-karte{ background:var(--paper-2); border-radius:16px; padding:32px; border:1px solid var(--line); }
@media (max-width:560px){ .kontakt-karte{ padding:24px 20px; } }
.kontakt-karte h2{ font-size:20px; margin-bottom:20px; }
.kontakt-zeile{ display:flex; gap:16px; padding:15px 0; border-top:1px solid var(--line); font-size:15px; }
.kontakt-zeile:first-of-type{ border-top:none; padding-top:0; }
.kontakt-zeile .label{ color:var(--text-2); min-width:88px; flex-shrink:0; }
.kontakt-zeile a{ color:var(--navy); text-decoration:none; font-weight:600; }
.kontakt-zeile a:hover{ color:var(--blue-ink); }
.kontakt-karte .btn{ margin-top:22px; width:100%; justify-content:center; }
/* ---------- Rechtstexte ---------- */
.legal-content{ max-width:78ch; }
.legal-content h2{ font-size:22px; margin-top:44px; margin-bottom:14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:17px; margin-top:26px; margin-bottom:10px; }
.legal-content p{ font-size:15.5px; color:var(--text-2); margin-bottom:14px; }
.legal-content ul, .legal-content ol{ margin:0 0 16px 22px; color:var(--text-2); font-size:15.5px; }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--blue-ink); text-decoration:underline; }
/* Vierspaltige Tabellen mit langen Zellinhalten passen unter 600 px nicht
mehr und schoeben die Seite nach rechts. Tabellen schrumpfen nicht unter
ihre Mindestbreite, deshalb darf hier nur die Tabelle selbst scrollen, nie
die Seite. display:block ist noetig, damit overflow an einem
ueberhaupt wirkt. */
.legal-content table{
width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px;
display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
@media (min-width:640px){ .legal-content table{ display:table; overflow-x:visible; } }
.legal-content th, .legal-content td{ text-align:left; padding:10px 12px; border:1px solid var(--line); vertical-align:top; }
.legal-content th{ background:var(--paper-2); color:var(--navy); font-weight:600; }
.legal-toc{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin-bottom:36px; }
.legal-toc p{ font-weight:700; color:var(--navy); margin-bottom:10px; font-size:14px; }
.legal-toc ol{ margin-left:18px; font-size:14px; }
.legal-toc a{ color:var(--navy); text-decoration:none; }
.legal-toc a:hover{ color:var(--blue-ink); text-decoration:underline; }
.company-box{ background:var(--paper-2); border-radius:12px; padding:24px 28px; margin-bottom:32px; border:1px solid var(--line); }
.company-box p{ margin-bottom:4px; color:var(--navy); font-size:15.5px; }
.company-box .muted{ color:var(--text-2); font-size:14px; }
/* Offener Punkt im Rechtstext. Sichtbar gelb, damit er nicht mitwandert,
wenn die Seite live geht — ein fehlender Pflichtangabe darf nicht
unauffaellig aussehen. */
.offen{
background:#FFF6DC; border-left:4px solid #D9A400; border-radius:0 8px 8px 0;
padding:14px 18px; margin:14px 0; font-size:14.5px; color:#6B5200;
}
.offen strong{ color:#4A3900; }
/* ---------- Cookie-Hinweis ----------
Erscheint nur, wenn GA_MESS_ID in site_config.py gesetzt ist; main.js
entfernt den Block sonst. */
#cookie-banner{
position:fixed; left:0; right:0; bottom:0; z-index:100;
background:var(--navy); color:#fff; padding:20px 28px;
display:none; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
box-shadow:0 -8px 24px rgba(0,0,0,0.18);
}
#cookie-banner.show{ display:flex; }
#cookie-banner p{ font-size:13.5px; color:#CBD8EC; max-width:640px; margin:0; }
#cookie-banner a{ color:#fff; text-decoration:underline; }
#cookie-banner .cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-cookie-accept{ background:var(--blue); color:#fff; border:none; padding:11px 20px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; }
.btn-cookie-decline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4); padding:11px 20px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; }
/* ---------- 404 ---------- */
.error-page{ min-height:56vh; display:flex; align-items:center; }
.error-code{ font-family:'Source Serif 4', serif; font-size:clamp(80px,14vw,160px); font-weight:700; color:var(--blue); line-height:0.9; margin-bottom:8px; }
.error-page h1{ font-size:clamp(24px,3.4vw,32px); margin-bottom:14px; }
.error-page p.lede{ color:var(--text-2); font-size:16.5px; max-width:52ch; margin-bottom:32px; }
.error-links{ display:flex; flex-direction:column; gap:10px; margin-bottom:36px; }
.error-links a{ color:var(--blue-ink); font-weight:600; text-decoration:none; font-size:15px; }
.error-links a:hover{ text-decoration:underline; }
/* ---------- Fuss ---------- */
footer{ padding:60px 0 32px; border-top:1px solid var(--line); font-size:13.5px; color:var(--text-2); background:var(--paper-2); }
.footer-inner{ display:block; }
/* Vier Spalten: Marke, Leistungen, Unternehmen, Kontakt. Die erste ist
breiter, weil dort ein Satz steht und keine Liste. */
.footer-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; margin-bottom:40px; }
.footer-marke img{ height:44px; width:auto; margin-bottom:14px; }
.footer-marke p{ font-size:13px; line-height:1.6; max-width:34ch; }
.footer-col{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; min-width:0; }
.footer-h{ font-family:'Source Serif 4',serif; font-size:14.5px; font-weight:600; color:var(--navy); margin-bottom:4px; }
.footer-col a{ color:var(--text-2); text-decoration:none; line-height:1.45; }
.footer-col a:hover{ color:var(--blue-ink); text-decoration:underline; }
.footer-addr{ line-height:1.65; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top:24px; border-top:1px solid var(--line); }
/* Agenturhinweis, neben dem Copyright. Der Trenner steckt im ::before und
nicht im HTML: ohne Eintrag in UMSETZUNG entfaellt die ganze Zeile, und ein
im Markup stehender Trenner blieb dann als einzelnes Zeichen stehen.
Weil der Mittelpunkt damit reine Dekoration ist, stehen Copyright und
Hinweis als zwei getrennte Elemente im Markup — sonst gaebe es zwischen
ihnen im Textinhalt nicht einmal einen Wortabstand. */
.footer-copyzeile{ min-width:0; }
.footer-umsetzung{ color:var(--text-2); }
/* Nur das Zeichen, die Abstaende als margin. Mit content:" · " haengen die
Leerzeichen an CSS statt am Text — und der Abstand links kam dann doppelt,
weil im Markup schon einer steht. */
.footer-umsetzung::before{ content:"·"; margin:0 0.42em; }
/* Unterstrichen, und zwar dauerhaft. Dieser Link steht als einziger im Fuss
INNERHALB einer Textzeile statt in einer Linkliste; ohne Unterstreichung
war er von seiner Umgebung durch nichts zu unterscheiden — gleiche Farbe,
gleiche Staerke. WCAG 1.4.1 verlangt fuer Links im Fliesstext ein Merkmal
ausser der Farbe, und hier fehlte selbst die Farbe als Unterschied. */
.footer-umsetzung a{
color:var(--text-2); text-decoration:underline;
text-decoration-color:#AAB4C4; text-underline-offset:2px;
}
.footer-umsetzung a:hover{ color:var(--blue-ink); text-decoration-color:currentColor; }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-links a{ color:var(--text-2); text-decoration:none; }
/* Der Widerruf der Einwilligung ist ein