/* ==========================================================================
STARTERKIT — Grundgerüst für Kundenwebsites
Webdesign-Pfisterer
┌────────────────────────────────────────────────────────────────────┐
│ PRO KUNDE ÄNDERST DU NUR DEN BLOCK „1. STELLSCHRAUBEN". │
│ Alles darunter bleibt, wie es ist. │
└────────────────────────────────────────────────────────────────────┘
========================================================================== */
/* --------------------------------------------------------------------------
0. SCHRIFTEN
Lokal einbinden, nie von Google laden — sonst wandert die IP jedes
Besuchers in die USA. Anleitung dazu steht in ANLEITUNG.md.
Die Namen unten müssen zu den Dateien in /fonts passen.
-------------------------------------------------------------------------- */
/* Schriften lokal eingebunden — keine Verbindung zu Google Fonts,
damit keine Besucher-IP in die USA uebertragen wird
(LG Muenchen I, Urteil vom 20.01.2022, Az. 3 O 17493/20). */
@font-face{
font-family:'Be Vietnam Pro';font-style:normal;
font-weight:400;font-display:swap;
src:url('../fonts/bevietnampro-400-latin.woff2') format('woff2');
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:'Be Vietnam Pro';font-style:normal;
font-weight:500;font-display:swap;
src:url('../fonts/bevietnampro-500-latin.woff2') format('woff2');
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:'Be Vietnam Pro';font-style:normal;
font-weight:600;font-display:swap;
src:url('../fonts/bevietnampro-600-latin.woff2') format('woff2');
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:'Be Vietnam Pro';font-style:normal;
font-weight:400;font-display:swap;
src:url('../fonts/bevietnampro-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:'Be Vietnam Pro';font-style:normal;
font-weight:500;font-display:swap;
src:url('../fonts/bevietnampro-500-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:'Be Vietnam Pro';font-style:normal;
font-weight:600;font-display:swap;
src:url('../fonts/bevietnampro-600-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:'Saira Condensed';font-style:normal;
font-weight:600;font-display:swap;
src:url('../fonts/sairacondensed-600-latin.woff2') format('woff2');
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:'Saira Condensed';font-style:normal;
font-weight:700;font-display:swap;
src:url('../fonts/sairacondensed-700-latin.woff2') format('woff2');
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:'Saira Condensed';font-style:normal;
font-weight:600;font-display:swap;
src:url('../fonts/sairacondensed-600-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:'Saira Condensed';font-style:normal;
font-weight:700;font-display:swap;
src:url('../fonts/sairacondensed-700-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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;
}
/* ==========================================================================
1. STELLSCHRAUBEN — hier und nur hier wird pro Kunde geändert
========================================================================== */
:root{
/* ---- Farben -----------------------------------------------------------
Regel: eine helle Grundfläche, eine dunkle Kontrastfläche, EIN Akzent.
Mehr Akzentfarben machen eine Seite nicht lebendiger, sondern unruhig. */
--grund: #F7F8FA; /* Seitenhintergrund */
--grund-2: #EBEEF2; /* abgesetzte Abschnitte */
--flaeche: #FFFFFF; /* Karten, Formularfelder */
--dunkel: #131A22; /* dunkle Abschnitte, Fußzeile */
--text: #131A22; /* Überschriften */
--text-2: #414B57; /* Fließtext */
--text-3: #6B7480; /* Nebensächliches, Bildunterschriften */
--akzent: #14539A; /* Schaltflächen, Verweise, Signale */
--akzent-2: #14539A0A; /* nur für Flächen, sehr blass */
--akzent-tief:#0F3F76; /* beim Überfahren */
--linie: rgba(19,26,34,.13);
--linie-fein: rgba(19,26,34,.07);
--linie-hell: rgba(247,248,250,.20);
/* ---- Schriften --------------------------------------------------------
Zwei reichen: eine für Überschriften, eine für Text.
Finger weg von Inter, Roboto, Poppins und Open Sans — die erkennt
jeder, und die Seite sieht sofort nach Baukasten aus. */
--anzeige: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif;
--lese: 'Be Vietnam Pro', 'Segoe UI', system-ui, Arial, sans-serif;
--grundgroesse: 17px; /* Schriftgröße Fließtext auf dem Rechner */
--zeilenhoehe: 1.7;
/* ---- Form ------------------------------------------------------------- */
--rundung: 6px; /* 0 = kantig, 4 = dezent, 16 = weich, 999px = Pille */
--rundung-gross: 12px; /* Karten und Bilder */
/* ---- Maße -------------------------------------------------------------- */
--breite: 1280px; /* maximale Inhaltsbreite */
--rand: clamp(20px, 5vw, 68px); /* Abstand zum Bildschirmrand */
--luft: clamp(72px, 10vw, 140px); /* Abstand zwischen Abschnitten */
/* ---- Bewegung ---------------------------------------------------------- */
--weich: cubic-bezier(.2,.8,.2,1);
--zeit: 320ms;
}
/* ==========================================================================
AB HIER NICHTS MEHR ÄNDERN
========================================================================== */
/* --------------------------------------------------------------------------
2. GRUNDLAGEN
-------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
scroll-behavior:smooth;
scroll-padding-top:100px;
-webkit-text-size-adjust:100%;
}
body{
background:var(--grund);
color:var(--text-2);
font-family:var(--lese);
font-size:var(--grundgroesse);
line-height:var(--zeilenhoehe);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--akzent);color:var(--grund)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px}
/* --------------------------------------------------------------------------
3. TYPOGRAFIE
-------------------------------------------------------------------------- */
h1,h2,h3,h4{
font-family:var(--anzeige);
font-weight:700;
color:var(--text);
line-height:1.1;
letter-spacing:-.02em;
/* Sicherheitsnetz: lange Wörter wie „Ansprechpartner" dürfen auf schmalen
Bildschirmen nicht aus dem Bild laufen. */
overflow-wrap:break-word;
hyphens:auto;
}
.riesig{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.3}
h4{font-size:1rem}
p{max-width:64ch}
/* Kleine Beschriftung über Überschriften */
.marke{
display:inline-block;
font-family:var(--lese);
font-size:.6875rem;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--akzent);
}
.marke--hell{color:rgba(251,250,248,.62)}
.fuehrung{
font-size:clamp(1.0625rem,1.5vw,1.25rem);
line-height:1.6;
color:var(--text-2);
}
/* Zahlen immer in gleicher Breite — sonst zappeln Preise und Uhrzeiten */
.zahlen{font-variant-numeric:tabular-nums lining-nums}
/* --------------------------------------------------------------------------
4. RASTER
min-width:0 auf allen Rasterfeldern ist Pflicht. Ohne das bestimmt der
breiteste unteilbare Inhalt die Spaltenbreite und schiebt die Seite auf
dem Handy seitlich aus dem Bild.
-------------------------------------------------------------------------- */
.bahn{
width:100%;
max-width:var(--breite);
margin-inline:auto;
padding-inline:var(--rand);
}
.bahn--eng{max-width:840px}
.abschnitt{padding-block:var(--luft)}
.abschnitt--knapp{padding-block:calc(var(--luft) * .55)}
.abschnitt--dunkel{background:var(--dunkel);color:rgba(251,250,248,.74)}
.abschnitt--dunkel h1,.abschnitt--dunkel h2,
.abschnitt--dunkel h3,.abschnitt--dunkel h4{color:var(--grund)}
.abschnitt--dunkel .fuehrung{color:rgba(251,250,248,.74)}
.abschnitt--abgesetzt{background:var(--grund-2)}
.raster{display:grid;gap:clamp(24px,3.4vw,44px)}
.raster > *{min-width:0}
.raster--2{grid-template-columns:repeat(2,1fr)}
.raster--3{grid-template-columns:repeat(3,1fr)}
.raster--4{grid-template-columns:repeat(4,1fr)}
/* Bild und Text nebeneinander. grid-row:1 auf beiden ist nötig — Grid
platziert automatisch nur vorwärts und würde den Text sonst unter das
Bild schieben, wenn er links davon stehen soll. */
.duo{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:clamp(28px,5vw,64px);
align-items:center;
}
.duo > *{min-width:0}
.duo__bild{grid-column:1 / span 6;grid-row:1;overflow:hidden;border-radius:var(--rundung-gross)}
.duo__text{grid-column:8 / span 5;grid-row:1}
.duo--kehr .duo__bild{grid-column:7 / span 6;grid-row:1}
.duo--kehr .duo__text{grid-column:1 / span 5;grid-row:1}
.duo__bild img{width:100%;aspect-ratio:7/5;object-fit:cover}
/* --- Arbeitenreihe und Bildband ------------------------------------------
.arbeit = ein Foto mit Unterzeile, in .raster .raster--3 gesetzt
.band = ein breites Bild über die volle Spaltenbreite */
.arbeit{margin:0}
.arbeit img{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:var(--rundung-gross);
}
.arbeit figcaption{
margin-top:13px;font-size:.8125rem;line-height:1.45;color:var(--text-2);
}
.band{overflow:hidden;border-radius:var(--rundung-gross)}
.band img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover}
@media (max-width:640px){
.band img{aspect-ratio:3/2}
}
/* --- Leute ----------------------------------------------------------------
.person mit ![]()
wenn Porträts vorliegen,
sonst .person__kuerzel mit den Initialen. Beide sind gleich hoch,
die Reihe bleibt also ruhig, auch wenn erst ein Teil Fotos hat.
Bei drei Leuten .leute--3 ergänzen. */
.leute{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px)}
.leute--3{grid-template-columns:repeat(3,1fr)}
.leute > *{min-width:0}
.person{margin:0}
.person__bild,.person__kuerzel{
display:block;width:100%;aspect-ratio:1/1;
border-radius:var(--rundung-gross);object-fit:cover;
}
.person__kuerzel{
display:flex;align-items:center;justify-content:center;
background:var(--grund-2);color:var(--akzent);
font-family:var(--anzeige);font-weight:700;
font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:.02em;
}
.person__name{
display:block;margin-top:16px;font-family:var(--anzeige);
font-weight:700;font-size:1.0625rem;line-height:1.3;
}
.person__rolle{
display:block;margin-top:5px;font-size:.6875rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-3);
}
.person__satz{margin-top:11px;font-size:.875rem;line-height:1.55;color:var(--text-2)}
@media (max-width:1000px){ .leute,.leute--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .leute,.leute--3{grid-template-columns:1fr}
.person{display:grid;grid-template-columns:82px 1fr;gap:4px 18px;
align-content:start;align-items:start}
.person__bild,.person__kuerzel{grid-row:1 / span 3}
.person__name{margin-top:0}
.person__kuerzel{font-size:1.4rem}
}
.trennlinie{height:1px;background:var(--linie);border:0}
/* --------------------------------------------------------------------------
5. SCHALTFLÄCHEN
-------------------------------------------------------------------------- */
.knopf{
display:inline-flex;
align-items:center;
gap:10px;
padding:15px 28px;
border:1px solid var(--akzent);
border-radius:var(--rundung);
background:var(--akzent);
color:var(--grund);
font-size:.8125rem;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
transition:background var(--zeit) var(--weich),border-color var(--zeit) var(--weich),transform var(--zeit) var(--weich);
}
.knopf:hover{background:var(--akzent-tief);border-color:var(--akzent-tief);transform:translateY(-2px)}
.knopf svg{width:15px;height:15px;flex-shrink:0}
.knopf--leer{background:transparent;color:var(--text);border-color:var(--linie)}
.knopf--leer:hover{background:var(--text);color:var(--grund);border-color:var(--text)}
.knopf--hell{background:var(--grund);color:var(--text);border-color:var(--grund)}
.knopf--hell:hover{background:transparent;color:var(--grund);border-color:var(--grund)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pfeil{
display:inline-flex;align-items:center;gap:9px;
font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--text);padding-bottom:4px;
border-bottom:1px solid var(--linie);
transition:border-color var(--zeit) var(--weich),color var(--zeit);
}
.pfeil:hover{border-color:var(--akzent);color:var(--akzent)}
.pfeil svg{width:14px;height:14px;transition:transform var(--zeit) var(--weich)}
.pfeil:hover svg{transform:translateX(4px)}
.pfeil--hell{color:var(--grund);border-color:var(--linie-hell)}
.pfeil--hell:hover{color:var(--grund);border-color:var(--grund)}
/* --------------------------------------------------------------------------
6. KOPFZEILE
-------------------------------------------------------------------------- */
.kopf{
position:sticky;top:0;z-index:50;
background:color-mix(in srgb, var(--grund) 92%, transparent);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--linie-fein);
}
.kopf__innen{
display:flex;align-items:center;justify-content:space-between;
gap:22px;min-height:74px;
}
.logo{
font-family:var(--anzeige);
font-weight:700;font-size:1.2rem;
letter-spacing:-.01em;color:var(--text);
line-height:1.1;flex-shrink:0;
}
.logo small{
display:block;font-family:var(--lese);
font-size:.5625rem;font-weight:700;letter-spacing:.24em;
text-transform:uppercase;color:var(--text-3);margin-top:5px;
}
.navi{display:flex;gap:30px;align-items:center}
.navi a{
position:relative;
font-size:.8125rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--text-2);
padding-block:6px;transition:color var(--zeit);
}
.navi a::after{
content:'';position:absolute;left:0;bottom:0;
width:0;height:1px;background:var(--akzent);
transition:width var(--zeit) var(--weich);
}
.navi a:hover,.navi a.hier{color:var(--text)}
.navi a:hover::after,.navi a.hier::after{width:100%}
.kopf__rechts{display:flex;align-items:center;gap:16px}
.kopf__tel{font-size:.8125rem;font-weight:700;color:var(--text);white-space:nowrap}
.burger{
display:none;width:44px;height:44px;
align-items:center;justify-content:center;
border:1px solid var(--linie);border-radius:var(--rundung);flex-shrink:0;
}
.burger span{display:block;width:19px;height:1.5px;background:var(--text);position:relative;transition:background 200ms}
.burger span::before,.burger span::after{
content:'';position:absolute;left:0;width:19px;height:1.5px;background:var(--text);
transition:transform var(--zeit) var(--weich);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.klappmenue{
position:fixed;inset:0;z-index:45;
background:var(--grund);
padding:120px var(--rand) 40px;
display:flex;flex-direction:column;
transform:translateY(-100%);
transition:transform 520ms var(--weich);
overflow-y:auto;
}
.klappmenue.offen{transform:translateY(0)}
/* :not(.knopf) ist nötig — sonst erbt die Schaltfläche im Menü die
Aufmachung der Menüpunkte: riesiger Text ohne Polster. */
.klappmenue a:not(.knopf){
font-family:var(--anzeige);font-weight:700;
font-size:clamp(1.8rem,8vw,2.5rem);
color:var(--text);padding:13px 0;
border-bottom:1px solid var(--linie-fein);
}
.klappmenue .knopf{margin-top:28px;align-self:flex-start}
/* --------------------------------------------------------------------------
7. BÜHNE
-------------------------------------------------------------------------- */
.buehne{padding-block:clamp(52px,8vw,104px)}
.buehne__raster{
display:grid;grid-template-columns:repeat(12,1fr);
gap:clamp(28px,5vw,64px);align-items:center;
}
.buehne__raster > *{min-width:0}
.buehne__text{grid-column:1 / span 6;grid-row:1}
.buehne__bild{grid-column:8 / span 5;grid-row:1;border-radius:var(--rundung-gross);overflow:hidden}
.buehne__bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Bühne mit vollflächigem Bild — Alternative, Klasse am ergänzen */
.buehne--voll{
position:relative;min-height:min(84vh,780px);
display:flex;align-items:flex-end;overflow:hidden;
background:var(--dunkel);padding-block:0;
}
.buehne--voll .buehne__hintergrund{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;opacity:.6;
}
.buehne--voll::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.85) 100%);
}
.buehne--voll .bahn{position:relative;z-index:2;padding-block:clamp(48px,8vw,92px)}
.buehne--voll h1,.buehne--voll .riesig{color:var(--grund)}
.buehne--voll .fuehrung{color:rgba(251,250,248,.82)}
/* --------------------------------------------------------------------------
8. KARTEN UND KENNWERTE
-------------------------------------------------------------------------- */
.karte{
padding:clamp(26px,3vw,36px);
border:1px solid var(--linie);
border-radius:var(--rundung-gross);
background:var(--flaeche);
transition:transform var(--zeit) var(--weich),box-shadow var(--zeit) var(--weich);
}
.karte:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(22,24,26,.08)}
.karte__zeichen{
width:48px;height:48px;
display:grid;place-items:center;
border-radius:var(--rundung);
background:var(--akzent);color:var(--grund);
margin-bottom:20px;
}
.karte__zeichen svg{width:22px;height:22px;stroke-width:1.7}
.karte h3{margin-bottom:11px}
.karte p{font-size:.9375rem;color:var(--text-2)}
.abschnitt--dunkel .karte{background:rgba(255,255,255,.04);border-color:var(--linie-hell)}
.abschnitt--dunkel .karte p{color:rgba(251,250,248,.66)}
.kennwerte{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linie)}
.kennwerte > *{min-width:0}
.kennwert{
padding:26px clamp(12px,2vw,26px) 0;
border-right:1px solid var(--linie);
}
.kennwert:first-child{padding-left:0}
.kennwert:last-child{border-right:0}
.kennwert b{
display:block;font-family:var(--anzeige);font-weight:700;
font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;color:var(--text);
font-variant-numeric:tabular-nums lining-nums;
}
.kennwert span{display:block;margin-top:9px;font-size:.75rem;line-height:1.5;color:var(--text-3)}
/* --------------------------------------------------------------------------
9. LISTEN
-------------------------------------------------------------------------- */
.hakenliste{display:grid;gap:13px;margin:24px 0}
.hakenliste li{display:flex;gap:12px;font-size:.9375rem;color:var(--text-2)}
.hakenliste svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;color:var(--akzent)}
/* Preis- oder Leistungszeile */
.posten{
display:grid;grid-template-columns:1fr auto;
gap:4px 22px;align-items:baseline;
padding:18px 0;border-bottom:1px solid var(--linie-fein);
}
.posten > *{min-width:0}
.posten:last-child{border-bottom:0}
.posten__name{grid-column:1;grid-row:1;font-size:1.0625rem;font-weight:700;color:var(--text)}
.posten__preis{
grid-column:2;grid-row:1 / span 2;align-self:center;
font-family:var(--anzeige);font-weight:700;font-size:1.2rem;color:var(--text);
font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;
}
.posten__hinweis{grid-column:1;grid-row:2;font-size:.875rem;line-height:1.5;color:var(--text-3);max-width:54ch}
/* --------------------------------------------------------------------------
10. ÖFFNUNGSZEITEN
-------------------------------------------------------------------------- */
.zeiten{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.zeiten th,.zeiten td{padding:13px 0;border-bottom:1px solid var(--linie-fein);text-align:left;vertical-align:baseline}
.zeiten th{font-weight:700;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text);width:36%;white-space:nowrap}
.zeiten td{text-align:right;color:var(--text-2)}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:0}
.zeiten .geschlossen td{color:var(--text-3)}
.abschnitt--dunkel .zeiten th{color:var(--grund)}
.abschnitt--dunkel .zeiten td{color:rgba(251,250,248,.72)}
.abschnitt--dunkel .zeiten th,.abschnitt--dunkel .zeiten td{border-color:var(--linie-hell)}
/* Öffnungsstatus, rechnet im JavaScript */
.status{
display:inline-flex;align-items:center;gap:10px;
margin-top:24px;padding:9px 16px;
border:1px solid var(--linie);border-radius:var(--rundung);
font-size:.75rem;color:var(--text-2);
}
.status__punkt{
width:7px;height:7px;border-radius:50%;background:#4E9A5E;flex-shrink:0;
box-shadow:0 0 0 0 rgba(78,154,94,.6);
animation:pochen 2400ms ease-out infinite;
}
.status__punkt.zu{background:var(--text-3);animation:none}
@keyframes pochen{70%{box-shadow:0 0 0 8px rgba(78,154,94,0)}100%{box-shadow:0 0 0 0 rgba(78,154,94,0)}}
.abschnitt--dunkel .status{border-color:var(--linie-hell);color:rgba(251,250,248,.78)}
/* --------------------------------------------------------------------------
11. FORMULAR
-------------------------------------------------------------------------- */
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feldpaar > *{min-width:0}
.feld{margin-bottom:18px}
.feld label{
display:block;font-size:.6875rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;
color:var(--text-3);margin-bottom:8px;
}
.feld input,.feld select,.feld textarea{
width:100%;padding:14px 16px;
border:1px solid var(--linie);border-radius:var(--rundung);
background:var(--flaeche);color:var(--text);font-size:1rem;
transition:border-color var(--zeit) var(--weich);
}
.feld textarea{min-height:120px;resize:vertical;line-height:1.6}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:0;border-color:var(--akzent)}
.feld input::placeholder,.feld textarea::placeholder{color:var(--text-3)}
.feld.fehler input,.feld.fehler select,.feld.fehler textarea{border-color:#B4483A}
.feld__meldung{display:none;margin-top:7px;font-size:.75rem;color:#B4483A}
.feld.fehler .feld__meldung{display:block}
/* Einwilligung. Das Feld wird weggeschnitten statt durchsichtig gemacht —
opacity:0 nimmt es aus der Vorlesereihenfolge, clip nicht. */
.einwilligung{
display:flex;align-items:flex-start;gap:13px;
margin:24px 0;font-size:.8125rem;line-height:1.6;
color:var(--text-3);cursor:pointer;position:relative;
}
.einwilligung input{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
white-space:nowrap;border:0;
}
.einwilligung__kasten{
width:19px;height:19px;flex-shrink:0;margin-top:2px;
border:1px solid var(--text-3);border-radius:2px;
position:relative;transition:all 220ms var(--weich);
}
.einwilligung__kasten::after{
content:'';position:absolute;left:6px;top:2px;
width:5px;height:10px;border:solid var(--grund);border-width:0 1.5px 1.5px 0;
transform:rotate(45deg) scale(0);transition:transform 220ms var(--weich);
}
.einwilligung input:checked + .einwilligung__kasten{background:var(--akzent);border-color:var(--akzent)}
.einwilligung input:checked + .einwilligung__kasten::after{transform:rotate(45deg) scale(1)}
.einwilligung input:focus-visible + .einwilligung__kasten{outline:2px solid var(--akzent);outline-offset:3px}
.einwilligung a{color:var(--text);border-bottom:1px solid var(--linie)}
.einwilligung.fehler .einwilligung__kasten{border-color:#B4483A}
.formularmeldung{
display:none;margin-top:22px;padding:16px 20px;
border-left:3px solid var(--akzent);border-radius:var(--rundung);
background:var(--grund-2);font-size:.875rem;line-height:1.6;color:var(--text-2);
}
.formularmeldung.sichtbar{display:block}
/* --------------------------------------------------------------------------
12. FUSSZEILE
-------------------------------------------------------------------------- */
.fuss{background:var(--dunkel);color:rgba(251,250,248,.62);padding-block:clamp(56px,8vw,88px) 32px}
.fuss__raster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,52px)}
.fuss__raster > *{min-width:0}
.fuss .logo{color:var(--grund)}
.fuss h4{font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,250,248,.44);margin-bottom:16px}
.fuss a:hover{color:var(--grund)}
.fuss__spalte{display:flex;flex-direction:column;gap:9px;font-size:.9375rem}
.fuss__unten{
margin-top:clamp(40px,6vw,64px);padding-top:24px;
border-top:1px solid var(--linie-hell);
display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
font-size:.75rem;color:rgba(251,250,248,.44);
}
.fuss__unten a{border-bottom:1px solid rgba(251,250,248,.24)}
/* --------------------------------------------------------------------------
13. FLIESSTEXT (Impressum, Datenschutz, AGB)
-------------------------------------------------------------------------- */
.lesetext h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:42px 0 14px}
.lesetext h2:first-child{margin-top:0}
.lesetext p{margin-bottom:15px;max-width:70ch}
.lesetext ul{margin:0 0 18px 20px;list-style:disc}
.lesetext li{margin-bottom:7px;max-width:68ch}
.lesetext a{color:var(--akzent);border-bottom:1px solid var(--linie)}
.lesetext a:hover{border-color:var(--akzent)}
.lesetext strong{color:var(--text);font-weight:700}
/* --------------------------------------------------------------------------
14. EINBLENDEN BEIM SCROLLEN
-------------------------------------------------------------------------- */
[data-zeigen]{opacity:0;transform:translateY(24px);transition:opacity 800ms var(--weich),transform 800ms var(--weich)}
[data-zeigen].da{opacity:1;transform:none}
/* --------------------------------------------------------------------------
15. SCHMALE BILDSCHIRME
-------------------------------------------------------------------------- */
@media (max-width:1000px){
.navi,.kopf__tel{display:none}
.burger{display:flex}
.buehne__raster,.duo{grid-template-columns:1fr;gap:32px}
.buehne__raster > *,.duo > *{grid-column:1 / -1 !important;grid-row:auto !important}
.buehne__bild img{aspect-ratio:7/5}
.buehne__bild{order:-1}
.raster--3,.raster--4{grid-template-columns:repeat(2,1fr)}
.kennwerte{grid-template-columns:repeat(2,1fr)}
.kennwert{padding-bottom:22px;border-bottom:1px solid var(--linie)}
.kennwert:nth-child(2){border-right:0}
.kennwert:nth-child(3){padding-left:0}
.kennwert:nth-child(3),.kennwert:nth-child(4){border-bottom:0}
.fuss__raster{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
:root{--grundgroesse:16px}
.raster--2,.raster--3,.raster--4{grid-template-columns:1fr}
.kennwerte{grid-template-columns:1fr}
.kennwert{padding-left:0;border-right:0;border-bottom:1px solid var(--linie)}
.kennwert:last-child{border-bottom:0}
.fuss__raster,.feldpaar{grid-template-columns:1fr}
.knopfreihe .knopf{flex:1 1 auto;justify-content:center}
.kopf__rechts .knopf{display:none}
.kopf__innen{min-height:64px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
[data-zeigen]{opacity:1;transform:none}
}
/* --------------------------------------------------------------------------
NACHSTELLUNG FUER DIESEN BETRIEB
Saira Condensed laeuft deutlich schmaler als eine normale Grotesk.
Ohne Zuschlag wirken die Ueberschriften klein, obwohl der Wert stimmt.
-------------------------------------------------------------------------- */
h1,h2,.riesig{letter-spacing:-.005em}
.riesig{font-size:clamp(2.6rem,6.4vw,4.6rem)}
h1{font-size:clamp(2.3rem,5vw,3.7rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.7rem)}
/* --------------------------------------------------------------------------
KENNZEICHNUNG ALS KONZEPTSTUDIE
-------------------------------------------------------------------------- */
.studie{
background:var(--dunkel);
color:rgba(247,248,250,.64);
font-size:.6875rem;
letter-spacing:.14em;
text-transform:uppercase;
text-align:center;
padding:9px var(--rand);
position:relative;
z-index:60;
}
.studie b{color:var(--grund);font-weight:700}
.studie a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.studie a:hover{color:var(--grund)}
/* Hinweiskasten im Impressum und in der Datenschutzerklaerung */
.studienkasten{
background:var(--akzent-2);
border-left:3px solid var(--akzent);
border-radius:var(--rundung);
padding:clamp(20px,2.6vw,30px);
margin-bottom:44px;
}
.studienkasten h2{margin-top:0}
/* --------------------------------------------------------------------------
STOERUNGSBAND
Bei einem Installateur ist der Notfall der haeufigste Anlass, die Seite
ueberhaupt aufzumachen. Deshalb steht die Nummer ganz oben, nicht unten.
-------------------------------------------------------------------------- */
.stoerung{
background:var(--akzent);color:#fff;
}
.stoerung__innen{
max-width:var(--breite);margin:0 auto;padding:16px var(--rand);
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.stoerung__punkt{
width:10px;height:10px;border-radius:50%;background:#fff;flex:none;
box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pochen 2.4s infinite;
}
@keyframes pochen{
70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.stoerung b{font-family:var(--anzeige);font-size:1.25rem;letter-spacing:.01em}
.stoerung span{font-size:.9375rem;color:rgba(255,255,255,.86)}
.stoerung a{
margin-left:auto;font-family:var(--anzeige);font-size:1.5rem;
color:#fff;white-space:nowrap;border-bottom:2px solid rgba(255,255,255,.45);
}
.stoerung a:hover{border-color:#fff}
@media (max-width:700px){
.stoerung a{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){ .stoerung__punkt{animation:none} }
/* --------------------------------------------------------------------------
ABLAUF IN SCHRITTEN — nur fuer diesen Betrieb
Beim Maler steht an dieser Stelle die Farbtonreihe. Zwei Studien duerfen
sich nicht gleichen, sonst sieht man die gemeinsame Vorlage.
-------------------------------------------------------------------------- */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)}
.schritte > *{min-width:0}
.schritt{position:relative;padding-top:16px;border-top:2px solid var(--linie)}
.schritt__nr{
display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
background:var(--akzent);color:#fff;font-family:var(--anzeige);
font-size:1.25rem;font-weight:700;margin-bottom:14px;
}
.schritt h3{margin-bottom:8px}
.schritt p{font-size:.9375rem;color:var(--text-2)}
@media (max-width:900px){ .schritte{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .schritte{grid-template-columns:1fr} }