/* =========================================================================
Alkozei Sanitärservice — Gestaltung
=========================================================================
Haltung
-------
Hell, luftig, freundlich. Der Betrieb baut Bäder und Heizungen für Familien,
nicht für Rechenzentren — die Seite soll nach Tageslicht aussehen und nicht
nach Maschinenraum.
Große Weißräume, weiche Radien, wenige und sehr flache Schatten statt harter
Linien. Getragen wird das von einer geometrischen Schrift (Poppins) in den
Überschriften; der Fließtext bleibt bei Inter, weil lange deutsche Wörter
darin schmaler und ruhiger laufen.
Farbe wird gespart: Rot ist der eine warme Akzent, Blau und Gelb ordnen die
Bereiche zu. Große Farbflächen gibt es nur an zwei Stellen der Seite.
Gliederung
01 Grundlagen
02 Raster und Abschnitte
03 Schaltflächen
04 Kopf und Navigation
05 Fuß
06 Blocks
07 Formulare
08 Hilfsmittel
========================================================================= */
/* == 01 Grundlagen ====================================================== */
/* Schriften aus dem eigenen Verzeichnis — kein Google-Aufruf, siehe
theme_enqueue.php. Inter trägt den Fließtext, Poppins die Überschriften.
Je Schnitt zwei Ausschnitte: „latin“ deckt Deutsch samt Umlauten und ß ab,
„latin-ext“ lädt der Browser nur bei Bedarf nach. */
@font-face {
font-family: 'Inter';
src: url('../fonts/inter-variable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/inter-variable-ext.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600-ext.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700-ext.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
:root {
/* ------------------------------------------------------------------
Farbe.
Die Töne stammen aus zwei Quellen: dem neuen Logo und dem bisherigen
Auftritt des Betriebs. Der alte Auftritt arbeitete mit einem hellen
Azurblau (#00AFEC), einem klaren Rot (#CE0000), einem warmen Gelb
(#F3BB2A), einem Schiefergrau (#4D5458) für die Menüleiste und
neutralen Grauflächen (#EEEEEE, #E1DFDF). Genau diese Familie wird
hier fortgeführt — nur in Abstufungen, die Text tragen können.
------------------------------------------------------------------ */
/* Logofarben. Sie stehen unverändert im Farbband unter dem Kopf und in
den Zeichen der Leistungen. */
--rot: #EE2444;
--blau: #00AFEC;
--gelb: #F3BB2A;
/* Fassungen, die Text tragen. Die reinen Töne schaffen das nicht:
Azur auf Weiß kommt auf 2,5:1, das Logorot auf 4,2:1. */
--rot-text: #C4141F;
--rot-tief: #A50F18;
--blau-text: #0069A0;
--blau-flaeche: #0079B0;
--blau-tief: #005E90;
--gelb-text: #8A6206;
/* Schiefer. Die dunklen Bahnen (Zahlen, Fuß) laufen im Grau der alten
Menüleiste, nicht in Schwarz — das war der Ton, den der Betrieb kennt. */
--schiefer: #4D5458;
--schiefer-2: #434A4E;
/* Sehr helle Einfärbungen der drei Markenfarben. */
--wash-blau: #E8F4FB;
--wash-rot: #FBECEE;
--wash-gelb: #FDF4E3;
/* Grundflächen. Die Seite steht auf Weiß, nicht mehr auf dem Neutralgrau
des alten Auftritts: mit Grau, Weiß und dem blauen Hauch liefen drei
Töne untereinander durch die Seite, und keiner davon trug etwas bei.
Das Grau bleibt als Ton für den Kopf und für Kanten erhalten. */
--tinte: #1B2124;
--tinte-2: #262D31;
--tinte-3: #333B40;
--papier: #FFFFFF;
--papier-grund: #F1F1F0;
--papier-2: #E9E8E7;
--papier-3: #E1DFDF;
--linie: #DEDDDB;
--linie-stark: #C2C1BE;
--linie-tinte: rgba(255, 255, 255, .16);
--text: #2B3038;
--text-leise: #676D75;
--text-stark: var(--tinte);
/* Maße */
--breite: 1280px;
--breite-schmal: 760px;
--luft: clamp(1.25rem, 4vw, 3.25rem);
--abstand: clamp(3rem, 5.5vw, 5rem);
/* Radien. Auf null gesetzt: der bisherige Auftritt kannte ausschließlich
rechtwinklige Flächen, und daran hält sich die Seite jetzt. Die Variablen
bleiben bestehen — eine leichte Rundung ist damit an einer Stelle
wieder eingeschaltet, nicht in fünfzig Regeln. */
--radius-klein: 0;
--radius: 0;
--radius-gross: 0;
--radius-xl: 0;
--pill: 0;
/* Schatten. Flach und knapp. Die Karten haben wieder eine Kontur; der
Schatten deutet nur die Ebene an, statt sie schweben zu lassen. */
--schatten-1: 0 1px 2px rgba(27, 33, 36, .04);
--schatten-2: 0 1px 2px rgba(27, 33, 36, .05), 0 8px 20px -12px rgba(27, 33, 36, .16);
--schatten-schwebend: 0 2px 4px rgba(27, 33, 36, .06), 0 14px 30px -18px rgba(27, 33, 36, .22);
/* Bewegung */
--zeit: .22s;
--kurve: cubic-bezier(.2, .7, .2, 1);
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--text);
background: var(--papier);
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Überschriften: eng gesetzt, tief gestellt. Die Größe macht die Wirkung,
nicht die Verzierung. */
h1, h2, h3, h4 {
margin: 0 0 .5em;
/* Poppins ist geometrisch gebaut und verträgt deutlich weniger negative
Laufweite als Inter — zu eng gesetzt kleben die runden Formen. */
font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text-stark);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.14;
text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 2.9vw, 2.3rem); }
h2 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
h3 { font-size: clamp(1.05rem, 1.3vw, 1.2rem); letter-spacing: -.02em; line-height: 1.25; }
/* h4 stand auf 1rem und war damit kleiner als der Fließtext daneben — das war
keine Stufe, sondern ein Fehler. */
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
/* Deutsche Wörter sind lang: „Wasserinstallations-Meisterbetrieb“ sprengt
jede schmale Spalte. In den Fließtexten wird deshalb getrennt — das setzt
das lang-Attribut am voraus, das WordPress selbst schreibt.
Überschriften bleiben ungetrennt, dort sieht eine Trennung nach Panne aus. */
p, li, dd, figcaption {
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
}
h1, h2, h3, h4, .hero__title, .cta__title, .page-header__title { hyphens: manual; }
a {
color: var(--blau-text);
text-decoration-thickness: 1px;
text-underline-offset: .2em;
transition: color var(--zeit) var(--kurve);
}
a:hover { color: var(--blau-tief); }
:focus-visible {
outline: 2px solid var(--tinte);
outline-offset: 3px;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .3em; }
li:last-child { margin-bottom: 0; }
strong, b { font-weight: 640; color: var(--text-stark); }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }
address { font-style: normal; }
.lead {
font-size: clamp(1.05rem, 1.2vw, 1.18rem);
line-height: 1.5;
color: var(--text-leise);
}
.lead--center { text-align: center; }
.icon {
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
/* Technische Beschriftung: das wiederkehrende Kleinteil der Seite.
Versal, weit gesperrt, mit vorangestellter Nummer wie in einer Stückliste. */
.label,
.kicker {
display: inline-flex;
align-items: center;
gap: .55rem;
margin: 0 0 .95rem;
padding: .45rem 1rem;
background: var(--wash-rot);
border-radius: var(--pill);
font-family: 'Poppins', sans-serif;
font-size: .76rem;
font-weight: 620;
letter-spacing: .04em;
color: var(--rot-text);
font-variant-numeric: tabular-nums;
}
.kicker::before {
content: '';
width: .45rem;
height: .45rem;
border-radius: 50%;
background: var(--rot);
flex: none;
}
/* Die laufende Nummer, falls eine gepflegt ist, steht hinter dem Punkt. */
.kicker[data-nr]::after {
content: attr(data-nr);
color: rgba(196, 20, 31, .55);
font-weight: 700;
}
.section--tief .kicker,
.section--gelb .kicker { background: rgba(255, 255, 255, .14); }
.section--tief .kicker { color: #fff; }
.section--tief .kicker::before { background: var(--gelb); }
.section--gelb .kicker { color: var(--tinte); background: rgba(255, 255, 255, .5); }
.section--gelb .kicker::before { background: var(--tinte); }
/* == 02 Raster und Abschnitte =========================================== */
.container {
width: 100%;
max-width: var(--breite);
margin-inline: auto;
padding-inline: var(--luft);
}
.container--schmal { max-width: var(--breite-schmal); }
.section { padding-block: var(--abstand); }
.section--eng { padding-block: calc(var(--abstand) * .62); }
/* Der Betrieb wollte die getönten Bahnen neutral: „Die Hintergründe alle
statt farbig in Hellgrau machen.“ */
.section--leise { background: var(--papier-grund); }
/* Die farbigen Abschnitte laufen wieder durch die ganze Breite. Als
eingerückte Tafel mit runden Ecken waren sie der auffälligste Unterschied
zum alten Auftritt, der nur durchgehende Farbbahnen kannte. */
.section--tief {
background: var(--schiefer);
color: rgba(255, 255, 255, .78);
}
.section--tief h2,
.section--tief h3 { color: #fff; }
/* Signalfläche.
Einmal pro Seite, nie zweimal: eine volle Fläche im Gelb des Logos, darauf
nur Anthrazit. Sie ist der eine Punkt, an dem die Seite die Stimme hebt —
deshalb trägt sie einen Satz und keine Aufzählung. */
.section--gelb {
background: var(--gelb);
color: var(--tinte);
padding-block: clamp(2.25rem, 3.5vw, 3.25rem);
}
.section--gelb h2,
.section--gelb h3,
.section--gelb strong { color: var(--tinte); }
.section--gelb .rte { max-width: 58ch; font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
.section--gelb .rte p { color: var(--tinte); }
.section--gelb .rte a { color: var(--tinte); }
.section--gelb .fact { background: rgba(255, 255, 255, .5); border-color: rgba(20, 22, 26, .1); box-shadow: none; }
.section--gelb .facts__grid { background: transparent; }
.section--gelb .fact__value { color: var(--tinte); }
.section--gelb .fact__label { color: rgba(20, 22, 26, .68); }
/* Der Abschnittskopf steht links und schmal — Fließtext über 46rem liest
niemand gern, und die freie Fläche rechts gibt der Seite Luft. */
.section-head {
max-width: 44rem;
margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
.section-head--center .kicker { margin-inline: auto; }
/* Kopf, der nur aus der Beschriftung besteht — etwa über der Signalfläche. */
.section-head--nur-label { margin-bottom: 1.1rem; }
/* Der Einleitungssatz bleibt bei rund 60 Zeichen je Zeile. Vorher lief er über
42 rem und brach mitten im Begriff um. */
.section-head__text {
margin-top: .9rem;
max-width: 58ch;
font-size: 1.05rem;
color: var(--text-leise);
/* Der Einleitungssatz steht oft mittig; getrennte Wörter wirken dort
unruhig. In den schmalen Kachelspalten bleibt die Trennung an. */
hyphens: manual;
}
.section-head--center .section-head__text { margin-inline: auto; }
/* Feines Korn auf den dunklen Flächen.
*
* Eine große Fläche in einem einzigen Farbwert wirkt am Bildschirm tot und
* zeigt auf schwachen Panels Streifen. Ein kaum sichtbares Rauschen bricht
* beides. Es liegt als erzeugte Grafik in der Datei — keine zusätzliche
* Anfrage, wenige hundert Byte. */
.cta__inner::after,
.site-footer::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: .32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.cta__inner,
.site-footer { position: relative; isolation: isolate; }
/* Der dreifarbige Strich aus dem Logo. Er trennt die großen Teile der Seite
und ist das einzige rein dekorative Element, das bleiben darf — weil er aus
der Marke stammt und nicht aus dem Baukasten. */
.logo-band {
display: flex;
height: 3px;
overflow: hidden;
}
.logo-band span { flex: 1; }
.logo-band span:nth-child(1) { background: var(--rot); }
.logo-band span:nth-child(2) { background: var(--blau); }
.logo-band span:nth-child(3) { background: var(--gelb); }
/* == 03 Schaltflächen =================================================== */
/* Sachliche Schaltflächen mit leichter Rundung. Die ganz runde Kapsel war
der auffälligste Bruch zum alten Auftritt und ist zurückgenommen. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
padding: .95rem 1.6rem;
border: 1px solid transparent;
border-radius: var(--radius-klein);
font-family: 'Poppins', sans-serif;
font-size: .92rem;
font-weight: 600;
letter-spacing: -.005em;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background var(--zeit) var(--kurve),
color var(--zeit) var(--kurve),
border-color var(--zeit) var(--kurve),
box-shadow var(--zeit) var(--kurve),
transform var(--zeit) var(--kurve);
}
.btn .icon { width: 1.05em; height: 1.05em; }
.btn--accent {
background: var(--blau-flaeche);
border-color: var(--blau-flaeche);
color: #fff;
}
.btn--accent:hover {
background: var(--blau-tief);
border-color: var(--blau-tief);
color: #fff;
}
/* Schiefer statt Fast-Schwarz. Der Ton ist der des Menübands und damit der
einzige dunkle Wert, den die Seite sonst führt; reines Anthrazit stand
daneben wie ein Fremdkörper. */
.btn--primary {
background: var(--schiefer);
border-color: var(--schiefer);
color: #fff;
}
.btn--primary:hover {
background: var(--schiefer-2);
border-color: var(--schiefer-2);
color: #fff;
}
/* Die zweite Schaltfläche trägt wieder einen Umriss statt eines Schattens. */
.btn--ghost {
background: var(--papier);
border-color: var(--linie-stark);
color: var(--text-stark);
}
.btn--ghost:hover {
background: var(--papier-2);
border-color: var(--text-leise);
color: var(--text-stark);
}
.btn--hell {
background: #fff;
border-color: #fff;
color: var(--tinte);
}
.btn--hell:hover { background: var(--papier-2); border-color: var(--papier-2); color: var(--schiefer); }
.btn--rand-hell {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .35);
color: #fff;
}
.btn--rand-hell:hover { border-color: #fff; background: rgba(255, 255, 255, .18); color: #fff; }
.btn--gross { padding: 1.2rem 2.2rem; font-size: 1rem; }
.btn-gruppe {
display: flex;
flex-wrap: wrap;
gap: .7rem;
margin-top: 1.9rem;
}
/* Im Formular sitzt die Schaltfläche dichter am letzten Feld. */
form .btn-gruppe { margin-top: 1.2rem; }
/* Textverweis mit Pfeil */
.pfeil-link {
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 620;
font-size: .92rem;
text-decoration: none;
}
.pfeil-link::after {
content: '→';
transition: transform var(--zeit) var(--kurve);
}
.pfeil-link:hover::after { transform: translateX(4px); }
/* Runder Pfeilknopf. Sitzt in Kacheln unten rechts und ersetzt dort die
Textzeile „Mehr erfahren“. */
.rund-pfeil {
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
flex: none;
border-radius: 50%;
background: var(--papier-2);
color: var(--text-stark);
font-size: 1rem;
transition: background var(--zeit) var(--kurve),
color var(--zeit) var(--kurve),
transform var(--zeit) var(--kurve);
}
/* == 04 Kopf ============================================================ */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
padding: .8rem 1.25rem;
background: var(--blau-flaeche);
color: #fff;
font-weight: 620;
}
.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }
/* Der Kopf ist dreiteilig aufgebaut wie der bisherige Auftritt: oben eine
helle Servicezeile, darunter Logo und Erreichbarkeit auf Weiß, darunter das
dunkelgraue Menüband. Den Abschluss macht das dreifarbige Band aus dem
Logo. */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--papier);
}
/* Servicezeile */
/* Markenzeile */
.masthead__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 4.75rem;
}
.brand {
display: flex;
align-items: center;
gap: .7rem;
flex: none;
text-decoration: none;
color: inherit;
}
.brand__mark {
width: auto;
height: clamp(2.25rem, 3.8vw, 2.9rem);
flex: none;
}
.brand__type { display: grid; gap: .12rem; }
.brand__name {
font-family: 'Poppins', sans-serif;
font-size: clamp(1.1rem, 1.5vw, 1.28rem);
font-weight: 700;
letter-spacing: .02em;
line-height: 1;
color: var(--tinte);
}
.brand__claim {
font-size: .66rem;
font-weight: 600;
letter-spacing: .1em;
line-height: 1.2;
color: var(--text-leise);
text-transform: uppercase;
}
@media (max-width: 460px) {
.brand__claim { display: none; }
}
.masthead__aktionen { display: flex; align-items: center; gap: .6rem; flex: none; }
.main-nav__phone {
display: inline-flex;
align-items: center;
flex: none;
flex-wrap: nowrap;
gap: .5rem;
padding: .7rem 1rem;
background: var(--papier-2);
color: var(--text-stark);
font-family: 'Poppins', sans-serif;
font-size: .9rem;
font-weight: 620;
text-decoration: none;
white-space: nowrap;
font-variant-numeric: tabular-nums;
transition: background var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
.main-nav__phone:hover { background: var(--papier-3); color: var(--blau-tief); }
/* Erreichbarkeit rechts in der Logozeile. Sie hatte einmal eine eigene helle
Bahn darüber und stand danach im Menüband; neben dem Logo war die Fläche
ohnehin leer, und dort sucht man sie zuerst. */
.masthead__kontakt {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .3rem 1.4rem;
margin-left: auto;
font-size: .86rem;
color: var(--text-leise);
}
.masthead__kontakt a { color: inherit; text-decoration: none; }
.masthead__kontakt a:hover { color: var(--blau-text); text-decoration: underline; }
@media (max-width: 860px) { .masthead__kontakt--ort { display: none; } }
@media (max-width: 700px) { .masthead__kontakt--mail { display: none; } }
@media (max-width: 520px) { .masthead__kontakt { display: none; } }
/* Das Menüband. Grau wie die frühere Leiste, Einträge in Versalien. */
.navbar {
background: var(--schiefer);
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
/* Der erste Eintrag hat eigenes Polster; ohne den Ausgleich stünde seine
Schrift um genau dieses Maß rechts vom Logo darüber. */
.navbar__inner > .main-nav { margin-left: -1.15rem; }
.main-nav {
display: flex;
align-items: center;
gap: 0;
}
.main-nav__list,
.main-nav ul {
display: flex;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav li { margin: 0; position: relative; }
.main-nav a:not(.btn):not(.main-nav__phone) {
display: inline-flex;
align-items: center;
padding: .95rem 1.15rem;
color: rgba(255, 255, 255, .9);
font-family: 'Poppins', sans-serif;
font-size: .82rem;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
.main-nav a:not(.btn):not(.main-nav__phone):hover {
background: rgba(255, 255, 255, .12);
color: #fff;
}
.main-nav .current-menu-item > a:not(.btn),
.main-nav .current_page_item > a:not(.btn),
.main-nav .current-menu-ancestor > a:not(.btn) {
background: rgba(255, 255, 255, .16);
color: #fff;
}
.main-nav .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 15rem;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
background: var(--schiefer-2);
box-shadow: var(--schatten-2);
opacity: 0;
visibility: hidden;
transition: opacity var(--zeit) var(--kurve), visibility var(--zeit);
z-index: 10;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.main-nav .sub-menu a:not(.btn) { display: block; padding: .7rem 1.15rem; font-size: .8rem; }
.main-nav .sub-menu a:hover { background: rgba(255, 255, 255, .12); }
/* Nummer und Anfrage stehen im Kopf; in der Leiste wären sie doppelt. */
.navbar .main-nav__actions { display: none; }
.nav-toggle {
display: none;
align-items: center;
gap: .55rem;
padding: .7rem 1rem;
background: var(--papier-2);
border: 1px solid var(--linie-stark);
font-family: 'Poppins', sans-serif;
font-size: .78rem;
font-weight: 620;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-stark);
cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 17px; }
.nav-toggle__bars span {
display: block;
height: 2px;
background: currentColor;
transition: transform var(--zeit) var(--kurve), opacity var(--zeit) var(--kurve);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1180px) {
.nav-toggle { display: inline-flex; }
/* Das Band fällt zusammen, die Navigation wird zur Schublade. */
.navbar { background: none; }
.navbar__inner { padding: 0; min-height: 0; }
.navbar__inner > .main-nav { margin-left: 0; }
.main-nav {
position: fixed;
inset: 0 0 0 auto;
width: min(23rem, 92vw);
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 5.5rem 1.5rem 2rem;
background: var(--schiefer);
transform: translateX(100%);
transition: transform .32s var(--kurve);
overflow-y: auto;
z-index: 120;
}
.main-nav.ist-offen { transform: translateX(0); box-shadow: var(--schatten-schwebend); }
.main-nav__list,
.main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
.main-nav li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.main-nav a:not(.btn):not(.main-nav__phone) { padding: .95rem .25rem; font-size: .92rem; }
.main-nav .sub-menu {
position: static;
opacity: 1;
visibility: visible;
box-shadow: none;
background: none;
padding: 0 0 .5rem .9rem;
min-width: 0;
}
.main-nav .sub-menu li { border: 0; }
.main-nav .sub-menu a { padding: .5rem .25rem; }
.navbar .main-nav__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: .6rem;
margin-top: 1.5rem;
}
.navbar .main-nav__actions .main-nav__phone {
justify-content: center;
background: rgba(255, 255, 255, .12);
color: #fff;
}
.navbar .main-nav__actions .main-nav__phone span { display: inline; }
.navbar .main-nav__actions .btn { justify-content: center; }
body.nav-offen { overflow: hidden; }
/* Der Schleier liegt unter dem Kopf: die Schublade steckt im Kopf, und der
Kopf bildet als sticky-Element einen eigenen Stapel. Läge der Schleier
darüber, würde er die Schublade mit abdunkeln. */
.nav-schleier {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(27, 33, 36, .5);
opacity: 0;
transition: opacity var(--zeit) var(--kurve);
}
.nav-schleier.ist-sichtbar { opacity: 1; }
}
/* == 05 Fuß ============================================================= */
.site-footer {
background: var(--schiefer);
color: rgba(255, 255, 255, .6);
font-size: .92rem;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.3fr 1.1fr .85fr 1.15fr;
gap: clamp(2rem, 4vw, 3.5rem);
padding-block: clamp(3.5rem, 6vw, 5rem);
}
@media (max-width: 1000px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .site-footer__grid { grid-template-columns: 1fr; } }
.brand--fuss { margin-bottom: 1.1rem; }
.brand--fuss .brand__name { color: #fff; }
.brand--fuss .brand__claim { color: rgba(255, 255, 255, .45); }
.site-footer__role {
margin: 0 0 1rem;
font-size: .7rem;
font-weight: 640;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gelb);
}
.site-footer__note {
color: rgba(255, 255, 255, .5);
font-size: .88rem;
max-width: 26rem;
}
.site-footer__title {
margin: 0 0 1.2rem;
font-size: .7rem;
font-weight: 640;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255, 255, 255, .95);
}
.site-footer__address {
display: grid;
gap: .15rem;
margin-bottom: 1.15rem;
line-height: 1.5;
}
.site-footer__hint { color: rgba(255, 255, 255, .38); font-size: .82em; }
.site-footer__lines { margin: 0; }
.site-footer__lines > div { display: flex; gap: .8rem; margin-bottom: .2rem; }
.site-footer__lines dt {
width: .9rem;
color: rgba(255, 255, 255, .35);
font-weight: 620;
flex: none;
}
.site-footer__lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.site-footer__hours { margin: 0 0 1.35rem; }
.site-footer__hours > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .75rem;
padding: .4rem 0;
border-bottom: 1px solid var(--linie-tinte);
}
.site-footer__hours dt { color: rgba(255, 255, 255, .6); }
.site-footer__hours dd {
margin: 0;
color: #fff;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Notfallhinweis: eine ruhige Zeile. Vorher stand er in einem roten Kasten
mit Warnzeichen und las sich wie eine Störungsmeldung. */
.site-footer__emergency {
display: block;
margin: 0;
padding: 0;
background: none;
border: 0;
font-size: .88rem;
line-height: 1.5;
color: rgba(255, 255, 255, .55);
}
.site-footer__emergency a {
color: #fff;
font-weight: 640;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Die Schlusszeile lief kleiner als der Rest der Fußzeile. */
.site-footer__bar { border-top: 1px solid var(--linie-tinte); font-size: .92rem; }
.site-footer__bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-block: 1.15rem;
}
.site-footer__copy { margin: 0; color: rgba(255, 255, 255, .38); }
.site-footer__legal { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__legal li { margin: 0; }
.to-top {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 90;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
background: var(--schiefer);
color: #fff;
border: 0;
box-shadow: var(--schatten-2);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--zeit) var(--kurve), transform var(--zeit) var(--kurve),
visibility var(--zeit), background var(--zeit) var(--kurve);
}
.to-top.ist-sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blau-flaeche); color: #fff; }
.to-top .icon { width: 1.1rem; height: 1.1rem; }
/* == 06 Blocks ========================================================== */
/* --- Kopfbereich der Startseite -----------------------------------------
Zwei Spalten statt einer Bühne: links steht die Aussage, rechts liegt das
Foto als große, runde Fläche. Auf dem Foto sitzen zwei kleine weiße Karten
mit den Angaben, auf die es beim ersten Blick ankommt.
Warum kein Bild mehr unter dem Text: die vorhandenen Aufnahmen sind
Handybilder mit 960 px Kantenlänge. In eine breite Fläche gezogen werden sie
weich, und der Text braucht dann einen Schleier darüber — genau das ließ den
Kopf alt aussehen. In der Karte bleibt das Bild klein genug, um scharf zu
sein, und der Text steht auf freiem Papier. */
.hero {
position: relative;
background: var(--papier-grund);
color: var(--text);
overflow: hidden;
isolation: isolate;
padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(2.25rem, 4vw, 3.5rem);
}
/* Zwei sehr helle Farbwolken aus dem Logo, jetzt nur noch angedeutet. */
.hero::before,
.hero::after {
content: '';
position: absolute;
z-index: -1;
border-radius: 50%;
pointer-events: none;
}
/* Hier lagen zwei weiche Lichtscheine, blau oben rechts und gelb unten links.
Sie färbten die Fläche ungleichmäßig ein; gewünscht ist glattes Hellgrau. */
.hero::before,
.hero::after { display: none; }
.hero__inner {
position: relative;
display: grid;
grid-template-columns: 1.02fr .98fr;
align-items: center;
gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (max-width: 980px) {
.hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
.hero__content { display: grid; justify-items: start; gap: 1.25rem; }
.hero__kicker {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem .9rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
box-shadow: none;
font-family: 'Poppins', sans-serif;
font-size: .78rem;
font-weight: 600;
letter-spacing: .01em;
color: var(--text-stark);
}
.hero__title {
margin: 0;
max-width: 100%;
color: var(--text-stark);
font-size: clamp(1.7rem, 2.9vw, 2.3rem);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.12;
text-wrap: balance;
}
/* Der hervorgehobene Teil steht in Graphit und beginnt eine eigene Zeile. Im Fluss
riss er die Überschrift mitten im Aufzählungsteil auseinander: „für Heizung,“
stand allein, „Sanitär, Solartechnik“ darunter. Als eigener Block liest sich
der Kopf als zwei Aussagen — Betrieb, dann Gewerke.
Eine gelbe Unterlegung war versucht und wieder entfernt: über mehrere Zeilen
zerfiel sie in Streifen. */
.hero__title em {
display: block;
font-style: normal;
color: var(--schiefer);
}
.hero__text {
margin: 0;
max-width: 46ch;
font-size: clamp(1rem, 1.2vw, 1.12rem);
line-height: 1.6;
color: var(--text-leise);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
/* Der Weiterverweis. Eine gefüllte Fläche stand hier allein und las sich als
Aufforderung, obwohl sie nur weiterführt. */
.hero__weiter {
display: inline-flex;
align-items: center;
gap: .55rem;
font-family: 'Poppins', sans-serif;
font-size: 1.02rem;
font-weight: 600;
color: var(--blau-text);
text-decoration: none;
}
.hero__weiter span { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.hero__weiter .icon { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--zeit) var(--kurve); }
.hero__weiter:hover { color: var(--blau-tief); }
.hero__weiter:hover .icon { transform: translateX(.22rem); }
/* Am Telefon stehen die beiden Schaltflächen untereinander und gleich breit.
Nebeneinander passten sie nicht, hintereinander sahen sie unterschiedlich
lang und dadurch unaufgeräumt aus. */
@media (max-width: 560px) {
.hero__content { justify-items: stretch; }
.hero__actions { display: grid; grid-template-columns: 1fr; gap: .6rem; width: 100%; }
.hero__actions .btn { width: 100%; }
.hero__kicker { justify-self: start; }
/* Der hervorgehobene Teil läuft am Telefon wieder im Fluss mit: als eigener
Block blieb das „für“ allein auf einer Zeile stehen. */
.hero__title em { display: inline; }
}
/* Bildfläche mit den zwei aufgesetzten Karten. */
.hero__media {
position: relative;
align-self: center;
}
.hero__bild {
position: relative;
border-radius: var(--radius-gross);
overflow: hidden;
background: var(--papier-3);
box-shadow: var(--schatten-1);
}
.hero__bild img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center 55%;
}
@media (max-width: 980px) {
.hero__bild img { aspect-ratio: 16 / 10; }
}
/* Am Telefon steht das Bild allein und muss sich keiner Spalte fügen —
dort gilt das Seitenverhältnis der Aufnahme selbst (1,75:1). Mit einem
erzwungenen Ausschnitt fehlte dem Haus der First. */
@media (max-width: 700px) {
.hero__bild img { aspect-ratio: auto; height: auto; object-fit: contain; }
}
/* Kein Foto gepflegt: dann steht das Zeichen groß auf hellblauem Grund. */
.hero__media--leer .hero__bild {
display: grid;
place-items: center;
background: var(--wash-blau);
box-shadow: none;
}
/* Kontaktblock im Bild. Der alte Auftritt hatte an derselben Stelle einen
blauen Kasten mit Telefonnummer; das bleibt so, nur sauberer gesetzt. */
/* Die Zeichen der Mitgliedschaften: eine ruhige Leiste unter den Kacheln.
*
* Warum die Höhen ungleich sind: die drei Wortmarken tragen unterschiedlich
* viel Text — vier Zeilen, zwei, eine. Auf dieselbe Kastenhöhe gezwungen
* wäre die Schrift in der einen dreimal so groß wie in der anderen. Die
* Werte sind so gesetzt, dass die Schrift in allen dreien gleich groß wirkt.
*
* Gedämpft wird über die Helligkeit, nicht über einen Schleier: mit
* Deckkraft verschwand das hellgraue „FACHVERBAND" auf hellgrauem Grund.
*/
.hero__zeichen {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.25rem clamp(2rem, 4.5vw, 4rem);
margin: 0;
padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
list-style: none;
}
.hero__zeichen li { display: flex; align-items: center; margin: 0; }
.hero-zeichen {
display: flex;
align-items: center;
max-width: 100%;
text-decoration: none;
filter: grayscale(1) brightness(.72);
transition: filter var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
/* object-fit, weil die Höhe fest steht: wird ein Zeichen auf einem schmalen
Telefon (320–360 px) von max-width gebremst, bliebe es sonst gleich hoch
und würde gestaucht. So schrumpft es im richtigen Verhältnis. */
.hero-zeichen img { display: block; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.hero-zeichen--shk img { height: 2.9rem; }
.hero-zeichen--innung img { height: 2.1rem; }
.hero-zeichen--hwk img { height: 1.7rem; }
/* Für den Prüfungsausschuss gibt es keine Vorlage, nur den Satz. */
.hero-zeichen--text {
max-width: 14rem;
font-family: 'Poppins', sans-serif;
font-size: .78rem;
font-weight: 600;
line-height: 1.35;
color: var(--text-leise);
filter: none;
}
a.hero-zeichen:hover,
a.hero-zeichen:focus-visible { filter: none; }
/* Am Telefon brachen die vier Einträge zentriert um, wie es gerade passte:
zwei oben, das HWK-Zeichen allein in der Mitte, der Satz darunter. Im
Raster stehen sie zu zweit auf zwei Zeilen und links bündig. Die Höhen
sind so gewählt, dass jedes Zeichen in eine halbe Telefonbreite passt. */
@media (max-width: 640px) {
.hero__zeichen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-items: start;
align-items: center;
gap: 1.4rem 1.25rem;
}
.hero__zeichen li { min-width: 0; max-width: 100%; }
.hero-zeichen--shk img { height: 2.3rem; }
.hero-zeichen--innung img { height: 1.65rem; }
.hero-zeichen--hwk img { height: 1.4rem; }
.hero-zeichen--text { font-size: .74rem; }
}
.hero__karte {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: .8rem;
padding: 1rem 1.35rem;
background: var(--blau-flaeche);
border-radius: var(--radius-klein);
box-shadow: none;
font-size: .85rem;
line-height: 1.35;
color: rgba(255, 255, 255, .82);
}
.hero__karte { text-decoration: none; transition: background var(--zeit) var(--kurve); }
a.hero__karte:hover { background: var(--blau-tief); color: rgba(255, 255, 255, .82); }
.hero__karte strong {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -.01em;
color: #fff;
}
.hero__karte--oben { left: 0; bottom: 0; }
/* Am Telefon lag die Karte über dem unteren Drittel des Bildes und deckte
das Haus ab — das Bild war zwar ungeschnitten, aber halb verdeckt. Dort
steht sie jetzt unter dem Bild. */
@media (max-width: 700px) {
.hero__karte--oben { position: static; width: 100%; border-radius: 0; }
}
/* Belege unter den Schaltflächen. Sie standen vorher in einem eigenen weißen
Kasten unter dem Kopf; als schlichte Zeile in der Textspalte gehören sie
sichtbar zur Aussage und kosten keine Bauhöhe. */
/* Die drei Farbkacheln schließen den Kopf ab.
Der bisherige Auftritt führte genau hier mit drei Farbflächen in die
Bereiche — Rot Wärme, Blau Wasser, Gelb Sonne. Das ist das Element, an dem
der Betrieb seine Seite wiedererkennt; es trägt jetzt zusätzlich eine Zeile
Text und einen Verweis. */
.hero__kacheln {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .75rem;
margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (max-width: 860px) {
.hero__kacheln { grid-template-columns: 1fr; gap: .5rem; }
}
.hero-kachel {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.3rem 1.4rem;
color: #fff;
text-decoration: none;
transition: background var(--zeit) var(--kurve);
}
.hero-kachel__text { display: grid; gap: .15rem; }
.hero-kachel strong {
font-family: 'Poppins', sans-serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.2;
}
.hero-kachel__text span {
font-size: .86rem;
line-height: 1.35;
color: rgba(255, 255, 255, .82);
}
/* Der Pfeil steht am rechten Rand und rückt beim Überfahren nach. */
a.hero-kachel::after {
content: '→';
margin-left: auto;
font-size: 1.05rem;
transition: transform var(--zeit) var(--kurve);
}
a.hero-kachel:hover::after { transform: translateX(4px); }
.hero-kachel--rot { background: var(--rot-text); }
a.hero-kachel--rot:hover { background: var(--rot-tief); color: #fff; }
.hero-kachel--blau { background: var(--blau-flaeche); }
a.hero-kachel--blau:hover { background: var(--blau-tief); color: #fff; }
/* Auf Gelb steht Anthrazit: weiße Schrift käme dort auf 1,9:1. */
.hero-kachel--gelb { background: var(--gelb); color: var(--tinte); }
.hero-kachel--gelb .hero-kachel__text span { color: rgba(27, 33, 36, .72); }
a.hero-kachel--gelb:hover { background: #E2A81B; color: var(--tinte); }
/* --- Kopfbereich der Unterseiten ---
Eine hellblaue Fläche mit weichen Ecken, in der der Titel steht. Ein Foto
kann rechts daneben liegen; es bleibt dann eine eigene runde Fläche und
wird nicht mit Text überdeckt. */
.page-header {
position: relative;
background: var(--papier-grund);
border-bottom: 1px solid var(--linie);
overflow: hidden;
}
.page-header__inner {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
padding-block: clamp(2rem, 3.6vw, 3rem);
}
.page-header--bild .page-header__inner {
grid-template-columns: 1.15fr .85fr;
}
@media (max-width: 860px) {
.page-header--bild .page-header__inner { grid-template-columns: 1fr; }
}
.page-header__media {
position: relative;
border-radius: var(--radius);
overflow: hidden;
}
.page-header__media img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: center 55%;
}
.page-header__kicker {
display: inline-block;
margin: 0 0 .9rem;
padding: .4rem .85rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
font-family: 'Poppins', sans-serif;
font-size: .74rem;
font-weight: 620;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--rot-text);
}
.page-header__title {
margin: 0;
max-width: 22ch;
color: var(--text-stark);
font-size: clamp(1.55rem, 2.4vw, 2rem);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.12;
}
.page-header__text {
margin: 1rem 0 0;
max-width: 46ch;
font-size: clamp(1rem, 1.2vw, 1.1rem);
color: var(--text-leise);
}
/* Sprungmarken im Seitenkopf. Sie sehen aus wie eine Reihe Reiter und tragen
den Leser zu dem Abschnitt, wegen dem er gekommen ist. */
.seiten-nav {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: 1.5rem;
}
.seiten-nav__eintrag {
display: inline-flex;
align-items: center;
padding: .5rem .9rem;
background: var(--papier);
border: 1px solid var(--linie);
color: var(--text);
font-size: .84rem;
font-weight: 500;
text-decoration: none;
transition: border-color var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
.seiten-nav__eintrag:hover {
border-color: var(--blau-flaeche);
color: var(--blau-tief);
}
.breadcrumb {
position: relative;
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin: 0 0 1.35rem;
padding: 0;
list-style: none;
font-size: .78rem;
color: var(--text-leise);
}
.breadcrumb li { margin: 0; display: flex; gap: .45rem; align-items: center; }
.breadcrumb li + li::before { content: '›'; color: var(--linie-stark); }
.breadcrumb a { color: var(--text-leise); text-decoration: none; }
.breadcrumb a:hover { color: var(--blau-tief); }
/* --- Leistungen ---------------------------------------------------------
Weiche weiße Kacheln auf hellblauem Grund. Das Zeichen sitzt in einem runden
Feld in der Farbe des Bereichs — Rot Wärme, Blau Wasser, Gelb Sonne — und
färbt sich beim Überfahren voll ein. Rahmen gibt es keine mehr; getragen
werden die Kacheln vom Schatten. */
.services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
@media (min-width: 1060px) {
.services--drei .services__grid { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
position: relative;
display: flex;
flex-direction: column;
gap: .45rem;
padding: 1.6rem 1.5rem 1.4rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
text-decoration: none;
color: inherit;
overflow: hidden;
transition: border-color .25s var(--kurve), box-shadow .25s var(--kurve);
}
/* Ein sehr heller Schimmer in der Bereichsfarbe fährt beim Überfahren von
unten ein. Das ersetzt den früheren harten Streifen an der Oberkante. */
.service-card::before {
content: '';
position: absolute;
inset: auto 0 0;
height: 60%;
background: linear-gradient(to top, color-mix(in srgb, var(--karte-farbe, var(--blau)) 12%, transparent), transparent);
opacity: 0;
transition: opacity .3s var(--kurve);
pointer-events: none;
}
.service-card:hover {
border-color: var(--linie-stark);
box-shadow: var(--schatten-2);
}
.service-card:hover::before { opacity: 1; }
.service-card__title { position: relative; margin: 0; font-size: 1.12rem; }
.service-card__text {
position: relative;
margin: 0;
font-size: .91rem;
line-height: 1.55;
color: var(--text-leise);
}
/* Der Verweis ist ein runder Pfeil, keine Versalzeile mehr. */
.service-card__more {
position: relative;
display: inline-flex;
align-items: center;
gap: .55rem;
margin-top: auto;
padding-top: .9rem;
font-family: 'Poppins', sans-serif;
font-size: .85rem;
font-weight: 620;
letter-spacing: -.01em;
text-transform: none;
color: var(--text-stark);
}
.service-card__more::after {
content: '→';
display: grid;
place-items: center;
width: 2.1rem;
height: 2.1rem;
background: var(--papier-2);
transition: background .3s var(--kurve), color .3s var(--kurve), transform .3s var(--kurve);
}
.service-card:hover .service-card__more::after {
background: var(--karte-farbe, var(--blau));
color: #fff;
transform: translateX(4px);
}
.service-card__neu {
position: absolute;
top: 1.25rem;
right: 1.25rem;
padding: .3rem .7rem;
background: var(--gelb);
color: var(--tinte);
border-radius: var(--pill);
font-family: 'Poppins', sans-serif;
font-size: .66rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* --- Fließtext --- */
.text-block__inner { max-width: 42rem; }
.text-block--breit .text-block__inner { max-width: none; }
/* Zweispaltiger Satz: die Überschrift steht links und bleibt beim Scrollen
stehen, der Text läuft rechts. Vorher lief eine schmale Textspalte am
linken Rand herunter und die rechte Seitenhälfte blieb leer. */
@media (min-width: 1000px) {
.text-block .container > .section-head + .text-block__inner,
.text-block__satz {
max-width: none;
}
.text-block--satz .container {
display: grid;
grid-template-columns: 5fr 7fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.text-block--satz .section-head {
position: sticky;
top: 7rem;
margin-bottom: 0;
}
.text-block--satz .text-block__inner { max-width: none; }
}
.text-block--zwei .text-block__inner {
max-width: none;
columns: 2;
column-gap: 4rem;
}
@media (max-width: 780px) { .text-block--zwei .text-block__inner { columns: 1; } }
.rte h2 { margin-top: 2.5rem; }
.rte h3 { margin-top: 2rem; }
.rte h2:first-child, .rte h3:first-child { margin-top: 0; }
.rte ul { list-style: none; padding-left: 0; }
.rte ul li {
position: relative;
padding-left: 1.5rem;
margin-bottom: .45rem;
}
/* Ein kurzer Strich statt eines Punktes — passt zur technischen Anmutung. */
.rte ul li::before {
content: '';
position: absolute;
left: 0;
top: .78em;
width: .7rem;
height: 1px;
background: var(--linie-stark);
}
.rte ol { padding-left: 1.3rem; }
.rte ol li::marker { color: var(--schiefer); font-weight: 680; font-variant-numeric: tabular-nums; }
.rte blockquote {
margin: 1.75rem 0;
padding: .25rem 0 .25rem 1.5rem;
border-left: 2px solid var(--gelb);
font-size: 1.05rem;
color: var(--text-stark);
}
.rte a { font-weight: 560; }
.rte table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.rte th, .rte td { padding: .7rem .9rem; border-bottom: 1px solid var(--linie); text-align: left; }
.rte th { font-weight: 640; color: var(--text-stark); }
/* --- Bild neben Text ---
Das Bild bekommt einen festen Rahmen und bleibt klein — 5 von 12 Spalten.
Der Text hat Vorrang. */
/* Mittig statt oben ausgerichtet: bei ungleich langen Spalten entsteht sonst
unter der kürzeren ein auffälliges Loch. */
.split {
display: grid;
grid-template-columns: 5fr 7fr;
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
}
.split--gedreht { grid-template-columns: 7fr 5fr; }
.split--gedreht .split__media { order: 2; }
@media (max-width: 900px) {
.split, .split--gedreht { grid-template-columns: 1fr; }
.split--gedreht .split__media { order: 0; }
}
.split__media {
position: relative;
margin: 0;
border-radius: var(--radius);
overflow: hidden;
background: var(--papier-3);
}
.split__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* Hochformat, aber gedeckelt: ein 3:4-Bild über die halbe Spaltenbreite wurde
fast 60 rem hoch und riss den Abschnitt auseinander. */
.split__media--hoch img { aspect-ratio: 3 / 4; max-height: 30rem; }
.split__content h2 { margin-bottom: 1rem; }
.split__content .rte { font-size: 1.02rem; }
/* --- Schritte ---
Ablaufleiste. Die Ziffern sitzen in runden Feldern und hängen an einer
gestrichelten Linie; Kästen gibt es keine, weil die fünf Texte
unterschiedlich lang sind und gleich hohe Kacheln zur Hälfte leer standen. */
.steps__list {
position: relative;
display: grid;
gap: 1.75rem 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 900px) {
.steps__list { grid-template-columns: repeat(5, 1fr); }
.steps--vier .steps__list { grid-template-columns: repeat(4, 1fr); }
.steps--drei .steps__list { grid-template-columns: repeat(3, 1fr); }
}
.step {
position: relative;
display: flex;
flex-direction: column;
gap: .5rem;
margin: 0;
padding: 0;
background: none;
border: 0;
}
/* Die Linie läuft von Ziffer zu Ziffer und hört beim letzten Schritt auf. */
@media (min-width: 900px) {
.step::after {
content: '';
position: absolute;
top: 1.3rem;
left: 3.2rem;
right: -1.5rem;
height: 2px;
background-image: linear-gradient(to right, var(--linie-stark) 55%, transparent 0);
background-size: 11px 2px;
background-repeat: repeat-x;
}
.step:last-child::after { display: none; }
}
/* Weißes rundes Feld mit farbigem Ring — leicht statt schwer. */
.step__num {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
margin-bottom: .6rem;
background: var(--schiefer);
box-shadow: none;
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* Auf hellblauem Grund bleibt die Ziffer graphit: die Regel stammte aus der
Fassung mit weißen Ziffernkreisen und ließ die Ziffern zuletzt leer
erscheinen — weiße Schrift auf weißer Fläche. */
/* Am Telefon wird daraus eine senkrechte Leiste: die Ziffer sitzt links außen,
Titel und Text rücken daneben, die gestrichelte Linie läuft dazwischen
durch. Ohne den Einzug lief sie quer durch den Text. */
@media (max-width: 899px) {
.steps__list { gap: 1.4rem; }
.step { padding-left: 3.6rem; min-height: 2.6rem; }
.step__num { position: absolute; left: 0; top: 0; margin-bottom: 0; }
.step::after {
content: '';
position: absolute;
left: 1.22rem;
top: 3rem;
bottom: -1.9rem;
width: 2px;
background-image: linear-gradient(to bottom, var(--linie-stark) 55%, transparent 0);
background-size: 2px 11px;
background-repeat: repeat-y;
}
.step:last-child::after { display: none; }
}
.step__title { margin: 0; font-size: 1.02rem; }
.step__text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-leise); }
/* --- Zahlen --- */
.facts__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
}
.fact {
display: flex;
flex-direction: column;
gap: .4rem;
padding: 1.6rem 1.5rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
}
.fact__value {
font-family: 'Poppins', sans-serif;
font-size: clamp(1.35rem, 1.7vw, 1.65rem);
font-weight: 600;
line-height: 1.1;
color: var(--text-stark);
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
/* „Rheinhessen“ ist länger als die Kachel breit ist. */
overflow-wrap: anywhere;
}
.fact__label { font-size: .9rem; line-height: 1.45; color: var(--text-leise); }
.section--tief .facts__grid { background: transparent; }
.section--tief .fact { background: rgba(255, 255, 255, .05); border-color: var(--linie-tinte); box-shadow: none; }
.section--tief .fact__value { color: #fff; }
.section--tief .fact__label { color: rgba(255, 255, 255, .55); }
/* --- Galerie ---
Strenges Raster, harte Kanten, keine Rundungen. */
.gallery__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
.gallery__item {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--radius-gross);
background: var(--papier-3);
cursor: zoom-in;
}
.gallery__item img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
transition: transform .5s var(--kurve);
}
.gallery--quer .gallery__item img { aspect-ratio: 4 / 3; }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__caption {
position: absolute;
inset: auto 0 0;
padding: 2.5rem .9rem .8rem;
background: linear-gradient(to top, rgba(20, 22, 26, .85), transparent);
color: #fff;
font-size: .8rem;
opacity: 0;
transition: opacity var(--zeit) var(--kurve);
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-within .gallery__caption { opacity: 1; }
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(20, 22, 26, .96);
opacity: 0;
visibility: hidden;
transition: opacity var(--zeit) var(--kurve), visibility var(--zeit);
}
.lightbox.ist-offen { opacity: 1; visibility: visible; }
.lightbox__img {
max-width: min(100%, 1100px);
max-height: 82vh;
width: auto;
object-fit: contain;
}
.lightbox__caption { margin-top: 1rem; color: rgba(255, 255, 255, .6); font-size: .85rem; text-align: center; }
.lightbox__close,
.lightbox__nav {
position: absolute;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
background: transparent;
border: 1px solid rgba(255, 255, 255, .25);
color: #fff;
font-size: 1.25rem;
cursor: pointer;
transition: background var(--zeit) var(--kurve);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .12); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
/* --- Ausklappbares ---
Zweispaltig ab 1000 px: die Überschrift steht links und bleibt stehen, die
Fragen laufen rechts. Vorher stand eine 760 px schmale Spalte mittig und die
Seite wirkte an dieser Stelle leer. */
.accordion-satz { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) {
.accordion-satz {
grid-template-columns: 5fr 7fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.accordion-satz > .section-head { position: sticky; top: 7rem; margin-bottom: 0; }
}
.accordion { display: grid; gap: .75rem; }
.accordion__item {
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
overflow: hidden;
transition: box-shadow var(--zeit) var(--kurve);
}
.accordion__item[open] { box-shadow: var(--schatten-1); }
.accordion__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
font-size: 1.08rem;
font-weight: 620;
letter-spacing: -.01em;
color: var(--text-stark);
cursor: pointer;
list-style: none;
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head:hover { color: var(--blau-tief); }
.accordion__sign { position: relative; flex: none; width: 1rem; height: 1rem; }
.accordion__sign::before,
.accordion__sign::after {
content: '';
position: absolute;
inset: 50% 0 auto;
height: 1.5px;
background: currentColor;
transition: transform var(--zeit) var(--kurve);
}
.accordion__sign::after { transform: rotate(90deg); }
.accordion__item[open] .accordion__sign::after { transform: rotate(0); }
.accordion__body { padding: 0 1.5rem 1.5rem; color: var(--text-leise); }
/* --- Pellets-Umrechner --- */
.pellets {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
@media (max-width: 860px) { .pellets { grid-template-columns: 1fr; } }
.pellets__panel {
border: 1px solid var(--linie);
border-radius: var(--radius);
background: var(--papier);
overflow: hidden;
box-shadow: none;
}
.pellets__input {
display: flex;
align-items: center;
gap: .8rem;
padding: 1.5rem;
border-bottom: 1px solid var(--linie);
font-size: .9rem;
color: var(--text-leise);
}
.pellets__input label { flex: 1; }
.pellets__input input {
width: 7.5rem;
padding: .65rem .8rem;
font-family: inherit;
font-size: 1.1rem;
font-weight: 660;
font-variant-numeric: tabular-nums;
color: var(--text-stark);
border: 1px solid var(--linie-stark);
border-radius: var(--radius-klein);
background: var(--papier);
text-align: right;
}
.pellets__input input:focus-visible { border-color: var(--tinte); outline-offset: 0; }
.pellets__results { display: grid; }
.pellets__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 1.5rem;
border-bottom: 1px solid var(--linie);
}
.pellets__label { font-size: .9rem; color: var(--text-leise); }
.pellets__value {
font-size: 1.6rem;
font-weight: 740;
letter-spacing: -.03em;
color: var(--text-stark);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pellets__hint { padding: 1.1rem 1.5rem; font-size: .82rem; line-height: 1.5; color: var(--text-leise); }
/* --- Personen --- */
/* Vier Personen in einem Raster, das drei Spalten bildet, hinterlassen eine
allein stehende vierte Kachel und daneben eine Lücke über die halbe Seite.
Die Spaltenzahl ist deshalb fest gesetzt und teilt vier immer glatt: vier
nebeneinander am Rechner, zwei auf dem Tablet, eine am Telefon. */
.team__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
gap: 1.15rem;
}
@media (min-width: 1080px) {
.team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 620px) and (max-width: 1079px) {
.team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 619px) {
.team__grid { grid-template-columns: minmax(0, 1fr); }
}
.person {
display: flex;
flex-direction: column;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
overflow: hidden;
transition: box-shadow var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve);
}
.person:hover { box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.person__photo {
width: 100%;
aspect-ratio: 4 / 5;
/* Bei nur zwei Personen wurde die Kachel sonst 54 rem hoch und das Foto
beherrschte die halbe Seite. */
max-height: 24rem;
object-fit: cover;
object-position: center 20%;
background: var(--papier-3);
}
.person__body { padding: 1.25rem 1.35rem 1.4rem; }
.person__role {
margin: 0 0 .4rem;
font-size: .68rem;
font-weight: 660;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--blau-text);
}
.person__name { margin: 0 0 .5rem; font-size: 1.18rem; }
.person__text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-leise); }
/* --- Partner --- */
.partners__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.partners__tab {
padding: .65rem 1.2rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
box-shadow: none;
font-family: 'Poppins', sans-serif;
font-size: .84rem;
font-weight: 600;
letter-spacing: -.01em;
color: var(--text);
cursor: pointer;
transition: color var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}
.partners__tab:hover { color: var(--blau-tief); }
.partners__tab[aria-selected='true'] { background: var(--schiefer); border-color: var(--schiefer); color: #fff; }
.partners__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: .75rem;
}
.partners__panel[hidden] { display: none; }
.partner {
display: grid;
place-items: center;
padding: 1.6rem 1.25rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
min-height: 6.5rem;
transition: border-color var(--zeit) var(--kurve);
}
.partner:hover { border-color: var(--linie-stark); }
/* Die Herstellerlogos kommen in vielen Farben und Qualitäten. Entsättigt
stehen sie ruhig nebeneinander und drängen sich nicht vor die eigene Marke;
nebenbei fällt so nicht auf, dass die Vorlagen unterschiedlich gut sind. */
.partner img {
max-width: 100%;
max-height: 2.75rem;
width: auto;
object-fit: contain;
filter: grayscale(1);
opacity: .55;
transition: filter var(--zeit) var(--kurve), opacity var(--zeit) var(--kurve);
}
.partner:hover img { filter: grayscale(0); opacity: 1; }
.partners__note { margin-top: 1.25rem; font-size: .88rem; color: var(--text-leise); }
/* --- Zeichen und Mitgliedschaften --- */
.badges__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 1.15rem;
}
.badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: .9rem;
padding: 1.75rem 1.25rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
text-align: center;
text-decoration: none;
color: inherit;
transition: box-shadow var(--zeit) var(--kurve);
}
a.badge:hover { box-shadow: var(--schatten-2); }
.badge__img {
height: auto;
width: auto;
max-width: 100%;
max-height: 4rem;
object-fit: contain;
flex: none;
filter: grayscale(1) brightness(.82);
transition: filter var(--zeit) var(--kurve);
}
a.badge:hover .badge__img { filter: none; }
/* Ohne Bild trägt die Schrift das Zeichen allein: für den
Gesellenprüfungsausschuss gibt es keine Vorlage. */
.badge:not(:has(.badge__img)) {
align-items: flex-start;
justify-content: center;
text-align: left;
padding: 1.5rem 1.5rem 1.6rem;
gap: .5rem;
}
.badge:not(:has(.badge__img)) .badge__label {
margin-top: 0;
font-family: 'Poppins', sans-serif;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.015em;
color: var(--text-stark);
}
.badge__label {
font-size: .88rem;
font-weight: 560;
line-height: 1.45;
color: var(--text-leise);
text-decoration: none;
margin-top: auto;
}
/* --- Stellen --- */
.jobs__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: .85rem; }
.job {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
padding: 1.6rem 1.9rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
transition: box-shadow var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve);
}
.job:hover { box-shadow: var(--schatten-2); border-color: var(--linie-stark); }
.job__title { margin: 0 0 .25rem; font-size: 1.15rem; }
.job__meta { margin: 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }
/* --- Handlungsaufruf ---
Keine durchgehende dunkle Bahn mehr, sondern eine farbige Fläche mit weichen
Ecken, die auf dem Papier liegt. Das Blau kommt aus dem Logo und ist die
einzige große Farbfläche neben der gelben Signalfläche. */
.cta {
position: relative;
padding: 0;
background: var(--blau-flaeche);
color: #fff;
overflow: hidden;
}
.cta__inner {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
width: 100%;
max-width: var(--breite);
margin-inline: auto;
padding-block: clamp(2.25rem, 4vw, 3.25rem);
padding-inline: var(--luft);
background: none;
border-radius: 0;
box-shadow: none;
color: #fff;
overflow: hidden;
}
.cta__inner::after { opacity: .16; }
/* Hier lag ein weicher Lichtschein in der Ecke. Er ließ die Bahn zweifarbig
aussehen; gewünscht ist eine durchgehende Fläche im Blau des Logos. */
.cta__content { position: relative; max-width: 40rem; }
.cta__title {
margin: 0 0 .7rem;
max-width: 26ch;
color: #fff;
font-size: clamp(1.3rem, 1.9vw, 1.7rem);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
}
.cta__text { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, .8); font-size: 1.02rem; }
.cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 560px) {
.cta__inner { display: grid; }
.cta__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
.cta__actions .btn { width: 100%; }
}
/* --- Karte --- */
.map {
display: grid;
grid-template-columns: 5fr 7fr;
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
overflow: hidden;
}
@media (max-width: 900px) { .map { grid-template-columns: 1fr; } }
.map__info { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--papier); }
.map__adr { display: grid; gap: 1.75rem; }
.map__ort h3 {
margin: 0 0 .4rem;
font-size: .72rem;
font-weight: 660;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--blau-text);
}
.map__ort p { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.55; }
.map__frame { position: relative; min-height: 24rem; background: var(--papier-3); border-left: 1px solid var(--linie); }
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .map__frame { border-left: 0; border-top: 1px solid var(--linie); } }
.map__consent {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 2rem;
text-align: center;
background: var(--papier-2);
}
/* Das Skript blendet die Schicht per hidden aus; ohne diese Zeile gewinnt
das display: grid von oben und die Einwilligung bliebe stehen. */
.map__consent[hidden] { display: none; }
.map__consent-inner { max-width: 26rem; }
.map__consent h3 { margin: 0 0 .7rem; font-size: 1.15rem; }
.map__consent p { margin: 0 0 1.4rem; font-size: .9rem; line-height: 1.55; color: var(--text-leise); }
.map__consent-fuss { margin: 1.2rem 0 0 !important; font-size: .82rem !important; }
/* Der Widerruf sitzt auf der geladenen Karte — oben rechts, weil unten links
die Urheberangabe von OpenStreetMap steht, die nicht verdeckt werden darf. */
.map__widerruf {
position: absolute;
top: .75rem;
right: .75rem;
padding: .4rem .7rem;
font-family: inherit;
font-size: .78rem;
line-height: 1.2;
color: var(--text);
background: var(--papier);
border: 1px solid var(--linie-stark);
border-radius: var(--radius-klein);
cursor: pointer;
}
.map__widerruf:hover { background: var(--papier-2); }
.map__widerruf:focus-visible { outline: 2px solid var(--blau-flaeche); outline-offset: 2px; }
/* --- Rechtstexte --- */
.legal { max-width: 50rem; color: var(--text); }
.legal h2 {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--linie);
font-size: 1.35rem;
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.legal p, .legal li { font-size: .97rem; }
.legal__toc {
margin-bottom: 3rem;
padding: 1.75rem;
background: var(--wash-blau);
border-radius: var(--radius);
}
.legal__toc h2 {
margin: 0 0 .9rem;
padding: 0;
border: 0;
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-leise);
}
.legal__toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2.5rem; }
@media (max-width: 640px) { .legal__toc ol { columns: 1; } }
.legal__toc li { font-size: .9rem; margin-bottom: .3rem; }
/* --- Verweiskarten (404) --- */
.link-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
margin-bottom: 2.5rem;
}
.link-card {
display: grid;
gap: .4rem;
padding: 1.85rem 1.6rem;
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
text-decoration: none;
color: inherit;
transition: border-color var(--zeit) var(--kurve);
}
.link-card:hover { border-color: var(--linie-stark); }
.link-card__title { font-weight: 660; color: var(--text-stark); }
.link-card__text { font-size: .9rem; color: var(--text-leise); }
/* --- Teaser --- */
.teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; }
.teaser__media { display: block; overflow: hidden; margin-bottom: 1rem; }
.teaser__title { font-size: 1.2rem; margin-bottom: .4rem; }
.teaser__title a { text-decoration: none; }
.teaser__text { font-size: .92rem; color: var(--text-leise); }
/* == 07 Formulare ======================================================= */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.feld { display: grid; gap: .3rem; }
.feld--voll { grid-column: 1 / -1; }
/* Beschriftungen in normaler Schreibweise: versal und gesperrt brauchte in
einem Formular mit fünfzehn Feldern spürbar mehr Höhe und las sich lauter,
als es der Sache angemessen ist. */
/* `.feld > p > label` steht hier mit drin, weil Contact Form 7 seine Vorlage
durch wpautop schickt und dabei um jedes Feld einen Absatz legt. Ohne diesen
Zusatz griff die Regel nur im eigenen Formular: mit Plugin standen die
Beschriftungen in voller Fließtextgröße, und das Formular sah dadurch
doppelt so schwer aus, wie es ist. */
.feld > label,
.feld > p > label,
.feld__label {
font-size: .82rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text);
}
.feld__pflicht { color: var(--rot); }
.feld input[type='text'],
.feld input[type='email'],
.feld input[type='tel'],
.feld input[type='number'],
.feld select,
.feld textarea {
width: 100%;
padding: .75rem .9rem;
font-family: inherit;
font-size: .95rem;
color: var(--text);
background: var(--papier);
border: 1px solid var(--linie-stark);
border-radius: var(--radius-klein);
transition: border-color var(--zeit) var(--kurve), box-shadow var(--zeit) var(--kurve);
}
.feld textarea { min-height: 5rem; resize: vertical; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
outline: none;
background: var(--papier);
border-color: var(--blau-flaeche);
box-shadow: 0 0 0 3px rgba(0, 121, 176, .16);
}
.feld input:user-invalid,
.feld select:user-invalid { border-color: var(--rot); }
.feld select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236C737D' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .9rem center;
padding-right: 2.4rem;
}
.wahl-gruppe { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl { position: relative; display: inline-flex; }
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl span {
display: inline-flex;
align-items: center;
padding: .5rem .9rem;
background: var(--papier);
border: 1px solid var(--linie-stark);
border-radius: var(--pill);
font-size: .86rem;
cursor: pointer;
transition: all var(--zeit) var(--kurve);
}
.wahl input:checked + span {
background: var(--wash-blau);
border-color: var(--blau-flaeche);
color: var(--blau-tief);
font-weight: 600;
}
.wahl input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 2px; }
.feld .zustimmung,
.zustimmung {
display: flex;
align-items: flex-start;
gap: .7rem;
font-size: .88rem;
color: var(--text-leise);
line-height: 1.5;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-size: .85rem;
}
.zustimmung input[type='checkbox'] {
flex: none;
width: 1.1rem;
height: 1.1rem;
margin-top: .15rem;
accent-color: var(--tinte);
}
/* Honigtopf: für Menschen unsichtbar, aber nicht display:none —
manche Bots ignorieren ausgeblendete Felder. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
margin-top: 1.25rem;
padding: 1rem 1.25rem;
border-radius: var(--radius);
font-size: .93rem;
display: none;
}
.form-status.ist-sichtbar { display: block; }
.form-status--ok { background: var(--wash-blau); border-left: 3px solid var(--blau); color: var(--text-stark); }
.form-status--fehler { background: var(--wash-rot); border-left: 3px solid var(--rot); color: var(--rot-text); }
.form-karte {
padding: clamp(1.6rem, 2.6vw, 2.25rem);
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: none;
}
.form-karte h3 { margin-bottom: .5rem; }
.form-karte > p { margin-bottom: 1.5rem; font-size: .93rem; color: var(--text-leise); }
.kontakt-raster {
display: grid;
grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
}
@media (max-width: 940px) { .kontakt-raster { grid-template-columns: 1fr; } }
/* Freiwillige Angaben. Firma, Straße und Gebäude standen bisher mitten im
Formular und ließen es doppelt so lang aussehen, wie es zum Absenden sein
muss. Wer sie ausfüllen will, klappt sie auf. */
.form-extra {
grid-column: 1 / -1;
margin-top: .3rem;
padding-top: 1rem;
border-top: 1px solid var(--linie);
}
.form-extra > summary {
font-size: .9rem;
color: var(--blau-text);
cursor: pointer;
list-style: none;
}
.form-extra > summary::-webkit-details-marker { display: none; }
.form-extra > summary:hover { text-decoration: underline; }
.form-extra > summary:focus-visible { outline: 2px solid var(--blau-flaeche); outline-offset: 3px; }
.form-extra[open] > summary { margin-bottom: .9rem; }
/* Die rechte Spalte. Hier stand bis zuletzt ein zweites vollständiges
Formular; wer die Seite aufrief, musste sich erst zwischen zwei Fragebögen
entscheiden. Jetzt stehen dort die Wege, die keinen brauchen. */
.kontakt-spalte { display: grid; gap: 1rem; align-content: start; }
.kontakt-karte {
padding: clamp(1.4rem, 2.2vw, 1.9rem);
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
}
.kontakt-karte h3 { margin: 0 0 .9rem; font-size: 1.05rem; }
.kontakt-tel {
display: inline-block;
font-family: 'Poppins', 'Inter', sans-serif;
font-size: clamp(1.25rem, 2vw, 1.45rem);
font-weight: 640;
line-height: 1.15;
letter-spacing: -.01em;
color: var(--blau-text);
text-decoration: none;
}
.kontakt-tel:hover { text-decoration: underline; }
.kontakt-zeile { margin: .45rem 0 0; font-size: .95rem; }
.kontakt-zeile a { color: var(--text); }
.kontakt-zeiten {
display: grid;
grid-template-columns: auto 1fr;
gap: .3rem 1rem;
margin: 1.1rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--linie);
font-size: .9rem;
}
.kontakt-zeiten dt { color: var(--text-leise); }
.kontakt-zeiten dd { margin: 0; color: var(--text); }
.kontakt-zeile--leise {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--linie);
font-size: .9rem;
line-height: 1.55;
color: var(--text-leise);
}
/* Die Rückrufbitte ist der zweite Weg, nicht der gleichwertige — deshalb
zugeklappt und vier Felder statt sieben. */
.rueckruf {
background: var(--papier);
border: 1px solid var(--linie);
border-radius: var(--radius);
}
.rueckruf > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem clamp(1.4rem, 2.2vw, 1.9rem);
font-size: .98rem;
font-weight: 620;
color: var(--blau-text);
cursor: pointer;
list-style: none;
}
.rueckruf > summary::-webkit-details-marker { display: none; }
.rueckruf > summary:hover { background: var(--papier-grund); }
.rueckruf > summary:focus-visible { outline: 2px solid var(--blau-flaeche); outline-offset: -2px; }
.rueckruf > summary::after {
content: '';
flex: none;
width: .55rem;
height: .55rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--zeit) var(--kurve);
}
.rueckruf[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.rueckruf__inhalt { padding: 0 clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.2vw, 1.9rem); }
.rueckruf__inhalt > p:first-child {
margin: 0 0 1.1rem;
font-size: .9rem;
color: var(--text-leise);
}
/* In der schmalen Spalte stehen die Felder besser untereinander. */
.rueckruf__inhalt .form-grid { grid-template-columns: 1fr; }
@media (min-width: 941px) {
.rueckruf__inhalt .form-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Contact Form 7 setzt den Absendeknopf als , nicht als