/* ==========================================================================
leads2mail — Stilsystem „Modernist“, 31.08.2026
--------------------------------------------------------------------------
Umgesetzt nach der Design-Vorlage „Leads2mail Website-Design“. Kern des
Systems:
· Grund reinweiss, Schrift fast schwarz, EIN Signalton Koenigsblau
· keine Rundungen, keine Schatten, keine Farbflaechen ausser dem
Abschlussband — gegliedert wird ausschliesslich mit Linien
· Archivo in einer Staerke fuer Ueberschriften (800) und eine fuer
Fliesstext (400/600)
· Fotos in Graustufen, damit einzig das Blau Farbe traegt
Eine Abweichung von der Vorlage, mit Absicht: Die Vorlage laedt Archivo
ueber @import von fonts.googleapis.com. Damit ginge bei jedem Aufruf die
IP jedes Besuchers an Google — und die Fusszeile der Vorlage verspricht
im selben Atemzug „laedt nichts von fremden Servern“. Die Schrift liegt
deshalb im Projekt (68 kB, eine Datei je Zeichenbereich).
========================================================================== */
@font-face{
font-family:"Archivo";
src:url("/fonts/archivo-var-latin.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:"Archivo";
src:url("/fonts/archivo-var-latin-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+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;
}
:root{
--bg:#ffffff;
--ink:#0c1322;
--ink-70:#575d6a; /* kleine Beschriftungen — 6,6:1 auf Weiss */
--ink-55:#7b7e87; /* NUR fuer grosse Schrift — 4,1:1, reicht ab 24 px */
/* Saphir (Andreas, 19.09.2026: „das blaue wird zu Saphir").
Vorher ein elektrisches Kornblumenblau (#2f5cff) — hell, laut und
naeher am Software-Baukasten als am Schmuckstein. Saphir ist
dunkler und staerker gesaettigt; er traegt dieselbe Rolle, nimmt
aber die Grelle heraus.
Der Kontrast wird dabei BESSER, nicht schlechter: 5,0:1 -> 6,0:1
auf Weiss. Eine edlere Farbe, die schlechter lesbar waere, waere
keine. */
--kb:#0f52ba; /* Signalton: Zahlen, Akzentwort, Baender — 6,0:1 */
--kb-700:#0a337e; /* Marken, Links, Kennziffern — 10,7:1 */
--kb-100:#eef2fb;
--kb-200:#ccdaf1;
--linie:#d5dae4;
--linie-stark:#c2c9d6;
/* Auch das Dunkel bekommt den Saphirstich: #0b1226 war neutral-grau
und stand neben dem Blau wie ein anderes Material. */
--nav:#0b1226;
--f:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--wrap:1200px;
--gut:clamp(20px,5vw,72px);
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
--s7:48px; --s8:64px; --s9:84px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
font-size:16px;line-height:1.62;text-wrap:pretty;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--kb-700);text-decoration:none}
a:hover{color:var(--kb);text-decoration:underline}
/* Deutsche Komposita sind laenger als ein Handybildschirm:
„Geschaeftsbedingungen“ allein misst bei 32 px 363 px in einem 335 px
breiten Kasten. Ohne Trennung schiebt ein einziges Wort die ganze Seite
waagerecht. hyphens:auto braucht lang="de" — das steht im . */
h1,h2,h3,h4{font-family:var(--f);font-weight:800;letter-spacing:-.02em;margin:0;
hyphens:auto;overflow-wrap:break-word}
p{margin:0 0 1.15em}
:focus-visible{outline:3px solid var(--kb);outline-offset:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:860px}
.mono{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;background:var(--kb);color:#fff;
padding:10px 16px;z-index:99;font-weight:700}
.skip:focus{left:0}
/* ---------- Marke, Kennziffer -------------------------------------------- */
.marke{font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
color:var(--kb-700);margin:0 0 14px;display:block}
.plate{font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
color:var(--kb-700);margin:0}
/* ---------- Knoepfe ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--f);font-weight:700;font-size:14px;padding:12px 20px;
border:2px solid transparent;cursor:pointer;text-decoration:none;
transition:background .15s,color .15s,border-color .15s}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--kb);color:#fff;border-color:var(--kb)}
.btn--primary:hover{background:var(--kb-700);border-color:var(--kb-700);color:#fff}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--lg{font-size:15px;padding:14px 24px}
/* ---------- Kopfleiste ---------------------------------------------------- */
.nav{position:sticky;top:0;z-index:20;background:var(--nav);color:#e6e9f0;
display:flex;align-items:center;gap:var(--s5);min-height:60px;
padding-inline:var(--gut)}
.nav__brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;
font-size:17px;letter-spacing:-.02em;color:#fff;margin-right:auto}
.nav__brand:hover{color:#fff;text-decoration:none}
/* Das Zeichen ist jetzt ein SVG mit zwei Balken (siehe build.py LOGO),
keine Flaeche mit clip-path mehr. Breite und Hoehe muessen gesetzt
sein, sonst nimmt sich ein Inline-SVG in einem Flex-Behaelter seine
volle Grundgroesse von 300 px. */
.nav__mark{width:26px;height:26px;flex:none;display:block}
.nav__brand b{color:var(--kb);font-weight:800}
.nav__links{display:flex;align-items:center;gap:var(--s5)}
/* Die Verweise waren 23 px hoch — ein Pixel unter den 24, die WCAG 2.5.8
fuer Bedienelemente verlangt. Der Text bleibt gleich gross; der
anklickbare Bereich waechst durch Polster nach oben und unten. */
.nav__links a{color:#e6e9f0;font-size:14px;font-weight:600;
display:inline-flex;align-items:center;min-height:40px;padding-inline:2px}
.nav__links a:hover{color:#fff;text-decoration:none}
.nav__links a[aria-current]{color:#fff;box-shadow:inset 0 -2px 0 var(--kb)}
.nav .btn--primary{border-color:var(--kb)}
.menu{display:none}
/* ---------- Aufmacher ----------------------------------------------------- */
/* ---------- Aufmacher: Text UND Foto, nicht Text AUF Foto ----------
Bis zum 10.09.2026 lag der Text ueber dem Bild und ein weisser Schleier
dazwischen, damit er lesbar blieb. Auf dem Handy musste der Schleier
zuletzt 97 % decken — das Foto war damit praktisch nicht mehr da.
Lesbarkeit und Sichtbarkeit auf derselben Flaeche schliessen sich aus.
Deshalb: Foto rechts, in voller Staerke; Text links auf Weiss. */
/* ---------- Aufmacher: heller Text auf dunklem Bild ----------
Drei Anlaeufe, und der dritte ist der richtige:
1. Text AUF dem Foto, darueber ein WEISSER Schleier. Damit der Text
las, musste der Schleier zuletzt 97 % decken — das Foto war weg.
2. Foto rechts, Text links daneben auf Weiss. Das Foto war sichtbar,
der Aufmacher aber zweigeteilt und ohne Wucht.
3. Jetzt: Foto ueber die volle Breite, davor eine ABDUNKLUNG, Text in
Weiss und Blau darauf.
Abdunkeln statt aufhellen ist der Unterschied. Ein dunkles Foto verliert
nichts — es bekommt Tiefe, und heller Text steht darauf ohne Muehe.
Die Graustufen stecken seit dem 10.09.2026 IM Bild (bilder-quellen/
stuhl.py), zusammen mit dem einen blauen Stuhl. Deshalb steht hier
KEIN filter:grayscale mehr — er wuerde das Blau wieder herausnehmen. */
.hero{position:relative;overflow:hidden;background:#080c18}
.hero__bild{position:absolute;inset:0;z-index:0;
background-size:cover;background-position:56% 54%;
background-image:url('/img/hero-1200.jpg');
background-image:image-set(url('/img/hero-1200.jpg') 1x, url('/img/hero-2000.jpg') 2x)}
/* Links dicht, nach rechts aufklarend: Dort steht der Text, dort steht
auch der blaue Stuhl frei. */
.hero__dunkel{position:absolute;inset:0;z-index:1;
background:linear-gradient(100deg,rgba(8,12,24,.94) 0%,rgba(8,12,24,.90) 38%,
rgba(8,12,24,.62) 64%,rgba(8,12,24,.30) 100%);
/* Ein weiches Loch in der Abdunklung, genau ueber dem blauen Stuhl.
Eine zweite Farbschicht kann nicht aufhellen — sie kaeme oben drauf.
Eine Maske nimmt die Abdunklung dort STELLENWEISE zurueck, und nur
dort. Ohne sie lag der Stuhl unter rund 79 % Deckung und war der
einzige Farbfleck im Bild, den man suchen musste. */
/* Die Mitte wandert mit dem Stuhl: Er sitzt seit dem 10.09.2026 rechts
von der Mitte (rund 58 % der Bildbreite), nicht mehr bei 49 %. Ohne
das Nachziehen läge der einzige Farbfleck des Bildes wieder unter der
dichten Abdunklung — und das Loch über einem grauen Stuhl. */
-webkit-mask-image:radial-gradient(ellipse 17% 30% at 58% 74%,
rgba(0,0,0,.18) 0%, rgba(0,0,0,.72) 55%, #000 100%);
mask-image:radial-gradient(ellipse 17% 30% at 58% 74%,
rgba(0,0,0,.18) 0%, rgba(0,0,0,.72) 55%, #000 100%)}
.hero__in{position:relative;z-index:2;padding-block:clamp(56px,7vw,104px)}
.hero__txt{max-width:56%}
.datum{display:flex;flex-wrap:wrap;gap:24px;margin:0 0 40px;padding:0;
font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--kb-700);list-style:none}
.hero h1{font-size:clamp(29px,3.5vw,50px);line-height:1.08;max-width:22ch}
.hero h1 em{display:block;margin-top:20px;font-style:normal}
.hero h1 .ac{color:var(--kb)}
/* Kurz gehalten: Im Trichter muss das Eingabefeld ohne Scrollen zu sehen
sein. Die ausfuehrliche Fassung steht auf Stufe 2. */
.hero__lead{margin:24px 0 0;max-width:46ch;font-size:16px;line-height:1.7;
color:var(--ink-70)}
.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
/* ---------- Kennzahlenband ------------------------------------------------ */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);
padding-block:56px;border-bottom:2px solid var(--linie)}
.zahlen b{display:block;font-weight:800;font-size:clamp(26px,2.6vw,36px);
line-height:1.05;color:var(--kb);font-variant-numeric:tabular-nums}
.zahlen span{display:block;margin-top:14px;font-size:13px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-70);line-height:1.5}
/* ---------- Abschnitt und Abschnittskopf ---------------------------------- */
.sec{padding-block:var(--s9);border-bottom:2px solid var(--linie)}
.sec:last-of-type{border-bottom:0}
.sec-hd{display:grid;grid-template-columns:172px 1fr;gap:var(--s6);align-items:start}
.sec-hd h2{font-size:clamp(24px,2.6vw,34px);line-height:1.12;max-width:26ch}
.sec-hd p{margin:20px 0 0;max-width:60ch;font-size:15px;line-height:1.75;
color:var(--ink-70)}
.sec-hd__txt .marke{margin-bottom:14px}
/* Ein Satz unter der Abschnittsueberschrift — sagt in Worten, was die
drei Bloecke darunter zeigen. */
.sec-hd__lead{margin:14px 0 0;max-width:62ch;color:var(--ink-70);
font-size:17px;line-height:1.6}
/* ---------- Zeilenliste (Leistung, Ablauf) -------------------------------- */
.zeilen{margin-top:56px;border-top:2px solid var(--linie)}
.zeile{display:grid;grid-template-columns:172px 1fr;gap:var(--s6);
padding-block:36px;border-bottom:1px solid var(--linie)}
.zeile__nr{font-weight:800;font-size:13px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink);padding-top:6px}
.zeile--letzte .zeile__nr{color:var(--kb)}
.zeile h3{font-size:clamp(17px,1.6vw,21px);line-height:1.25;margin:0 0 10px}
.zeile p{margin:0;max-width:64ch;font-size:15px;line-height:1.75;color:var(--ink-70)}
/* ---------- Merkmale ------------------------------------------------------ */
.merkmale{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:0;list-style:none}
.merkmal{border:1px solid var(--kb-200);color:var(--kb-700);font-size:12px;
font-weight:600;padding:5px 10px;line-height:1.4}
/* ---------- Sparten (Text + Foto) ----------------------------------------- */
.sparte{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);
align-items:center;padding-block:56px;border-bottom:1px solid var(--linie)}
.sparte:last-of-type{border-bottom:0}
.sparte--kehrt .sparte__txt{order:2}
.sparte h3{font-size:clamp(20px,2.1vw,27px);line-height:1.16;margin:0 0 16px;max-width:22ch}
.sparte p{margin:0 0 20px;font-size:15px;line-height:1.75;color:var(--ink-70)}
.sparte figure{margin:0}
/* Die Dichtekarte je Sparte. Sie steht auf einer eigenen hellen Fläche,
damit die hellsten Länder nicht im Seitenweiss verschwinden — und mit
Beschriftung, weil eine Karte ohne Maßstab eine Behauptung ist. */
.sparte__karte{display:grid;justify-items:center;gap:16px;
background:var(--kb-100);border-radius:var(--rund-l);
padding:clamp(22px,3vw,34px)}
.sparte__karte img{width:auto;height:clamp(240px,32vw,400px);
aspect-ratio:1000/1362;object-fit:contain;border-radius:0}
.sparte__karte figcaption{color:var(--ink-70);font-size:13px;line-height:1.5;
text-align:center;max-width:30ch}
/* Gilt nur noch fuer Fotos — die Dichtekarte ist ausgenommen, sonst
bekaeme sie 3:2-Zuschnitt und Graustufen. */
.sparte figure:not(.sparte__karte) img{
width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
filter:grayscale(1) contrast(1.08)}
.zielzeile{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink);margin:0 0 10px}
/* ---------- Raster aus drei ----------------------------------------------- */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;
border-top:1px solid var(--linie)}
.drei>div{padding:28px clamp(16px,2vw,28px) 32px 0;border-bottom:1px solid var(--linie)}
.drei>div+div{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--linie)}
.drei>div:nth-child(3n+1){border-left:0;padding-left:0}
.drei .nr{font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--kb-700);
display:block;margin-bottom:14px}
.drei h3{font-size:18px;line-height:1.25;margin:0 0 10px}
.drei p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-70)}
/* ---------- Tabelle (Lieferung) ------------------------------------------- */
.tafel{width:100%;border-collapse:collapse;margin-top:56px;font-size:14px}
.tafel th{text-align:left;font-weight:800;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-70);padding:0 var(--s5) 14px 0;
border-bottom:2px solid var(--linie);vertical-align:bottom}
.tafel td{padding:16px var(--s5) 16px 0;border-bottom:1px solid var(--linie);
vertical-align:top;line-height:1.65;color:var(--ink-70)}
.tafel td:first-child{font-weight:800;color:var(--ink);white-space:nowrap;
font-variant-numeric:tabular-nums}
.tafel td:nth-child(2){font-weight:600;color:var(--ink)}
.tafel-huelle{overflow-x:auto}
/* ---------- Angebot ------------------------------------------------------- */
.preis{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);
margin-top:56px;padding-top:56px;border-top:2px solid var(--linie)}
.preis__tag{font-weight:800;font-size:clamp(44px,5vw,64px);line-height:1;
letter-spacing:-.03em;margin:0;font-variant-numeric:tabular-nums}
.preis__sub{margin:20px 0 0;max-width:40ch;font-size:14px;line-height:1.7;color:var(--ink-70)}
.rechnung{width:100%;border-collapse:collapse;margin:32px 0 0;font-size:14px}
.rechnung td{padding:14px 0;border-bottom:1px solid var(--linie)}
.rechnung td:last-child{text-align:right;font-weight:800}
.preis h3{font-size:19px;margin:0 0 18px}
.preis h3+.liste{margin-top:0}
.liste{list-style:none;padding:0;margin:0}
.liste li{position:relative;padding:0 0 14px 26px;font-size:14px;line-height:1.7;
color:var(--ink-70)}
.liste li strong{color:var(--ink)}
.liste--ja li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
background:var(--kb)}
.liste--nein li::before{content:"";position:absolute;left:0;top:.95em;width:10px;height:1.5px;
background:var(--ink-70)}
/* ---------- Zwei Spalten (Grenzen) ---------------------------------------- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);margin-top:56px}
.zwei h3{font-size:19px;margin:0 0 22px;padding-bottom:16px;border-bottom:2px solid var(--linie)}
/* ---------- Fragen -------------------------------------------------------- */
.faq{margin-top:40px;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:baseline;
padding:22px 0;font-weight:800;font-size:17px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\25B6";font-size:11px;color:var(--kb);flex:none;
transition:transform .15s;transform-origin:35% 55%}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq summary:hover{color:var(--kb-700)}
.faq h3{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit}
.faq__a{padding:0 0 24px 25px;max-width:76ch;font-size:14px;line-height:1.75;
color:var(--ink-70)}
.faq__a p:last-child{margin-bottom:0}
/* ---------- Abschlussband ------------------------------------------------- */
.band{background:var(--kb);color:#fff;padding-block:clamp(56px,7vw,88px)}
.band h2{color:#fff;font-size:clamp(25px,2.9vw,38px);line-height:1.12;max-width:24ch;margin:0}
.band .aktionen{margin-top:36px}
.band .btn--primary{background:#fff;color:var(--kb-700);border-color:#fff}
.band .btn--primary:hover{background:var(--kb-100);color:var(--kb-700);border-color:var(--kb-100)}
.band .btn--line{color:#fff;border-color:#fff}
.band .btn--line:hover{background:#fff;color:var(--kb-700)}
.band :focus-visible{outline-color:#fff}
/* ---------- Fusszeile ----------------------------------------------------- */
.foot{padding-block:var(--s8) var(--s6);font-size:14px}
.foot__gitter{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s6);
padding-bottom:var(--s7)}
.foot__gitter p{margin:16px 0 0;color:var(--ink-70);line-height:1.7;max-width:34ch;font-size:13px}
.foot h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink);margin:0 0 16px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:10px}
.foot li a{font-size:14px}
.foot__unten{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
padding-top:var(--s5);border-top:1px solid var(--linie);font-size:13px;color:var(--ink-70)}
/* ---------- Pflichtseiten ------------------------------------------------- */
.seitenkopf{padding-block:var(--s7) var(--s6);border-bottom:2px solid var(--linie)}
.seitenkopf h1{font-size:clamp(27px,3.2vw,42px);line-height:1.1;margin:0 0 14px}
.seitenkopf .lead{margin:0;max-width:60ch;font-size:15px;line-height:1.75;color:var(--ink-70)}
.brotkrume{font-size:13px;color:var(--ink-70);padding-block:16px}
.legal{padding-block:var(--s7) var(--s9);font-size:15px;line-height:1.75}
.legal h2{font-size:22px;margin:var(--s7) 0 var(--s4);padding-top:var(--s5);
border-top:1px solid var(--linie)}
.legal h2:first-child{border-top:0;padding-top:0;margin-top:0}
.legal p,.legal li{color:var(--ink-70);max-width:76ch}
.legal strong{color:var(--ink)}
.legal dl{margin:0 0 var(--s5)}
.legal dt{font-weight:800;margin-top:var(--s4)}
.legal dd{margin:0;color:var(--ink-70)}
.legal ul{padding-left:20px}
.legal li{margin-bottom:8px}
.hinweis{border-left:3px solid var(--kb);background:var(--kb-100);
padding:20px 24px;margin:var(--s5) 0}
.hinweis p:last-child{margin-bottom:0}
.hinweis p{color:var(--ink)}
/* ---------- Schmalere Fenster --------------------------------------------- */
@media(max-width:1000px){
.sec-hd,.zeile{grid-template-columns:1fr;gap:var(--s4)}
.zeile__nr{padding-top:0}
.zahlen{grid-template-columns:1fr 1fr;gap:var(--s5)}
.drei{grid-template-columns:1fr 1fr}
.drei>div:nth-child(3n+1){border-left:1px solid var(--linie);padding-left:clamp(16px,2vw,28px)}
.drei>div:nth-child(2n+1){border-left:0;padding-left:0}
.hero__txt{max-width:74%}
.sparte,.sparte--kehrt{grid-template-columns:1fr;gap:var(--s6)}
.sparte--kehrt .sparte__txt{order:0}
.preis,.zwei{grid-template-columns:1fr}
.foot__gitter{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
.nav__links{display:none}
.menu{display:block;margin-left:auto;position:relative}
.menu summary{list-style:none;cursor:pointer;color:#fff;font-weight:700;font-size:14px;
border:2px solid rgba(255,255,255,.4);padding:8px 14px}
.menu summary::-webkit-details-marker{display:none}
.menu__panel{position:absolute;right:0;top:calc(100% + 10px);background:var(--nav);
border:1px solid rgba(255,255,255,.2);min-width:220px;padding:8px 0;z-index:30}
.menu__panel a{display:block;padding:12px 18px;color:#e6e9f0;font-size:15px}
.menu__panel a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.drei{grid-template-columns:1fr}
.drei>div,.drei>div+div{border-left:0;padding-left:0}
.foot__gitter{grid-template-columns:1fr;gap:var(--s5)}
.sec{padding-block:var(--s8)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;
scroll-behavior:auto!important}}
/* Königsblau ist für weissen Grund gerechnet (5,0:1). Auf der dunklen
Kopfleiste kippt dasselbe Blau auf 3,28:1 — die „2“ der Wortmarke war
damit unter der Grenze. Ein Ton heller loest das, ohne die Farbe zu
verlassen: 5,7:1 auf #0b1226. */
/* Die „2" in Cyan wie im CRM. Auf #0b1226 ergibt #4d8fe0 rund 9:1 —
deutlich mehr als die 4,5, an denen das alte Koenigsblau scheiterte. */
.nav .nav__brand b{color:#4d8fe0}
/* Die Aufhellung galt der alten Flaeche. Das SVG traegt seine Farben
selbst — hell oben (#4d8fe0), blau unten (#2f6bff), wie im CRM. */
/* Anmelden steht neben „Zugang anlegen“, aber ohne Flaeche: Wer schon Kunde
ist, sucht den Zugang — wer es noch nicht ist, soll den Knopf sehen. Zwei
gleich starke Knoepfe nebeneinander waeren eine Wahl ohne Empfehlung. */
.nav__login{color:#e6e9f0;font-size:14px;font-weight:700;white-space:nowrap}
.nav__login:hover{color:#fff;text-decoration:none;box-shadow:inset 0 -2px 0 #6b8fff}
@media(max-width:700px){.nav__login{display:none}}
/* „/Monat“ gehört zum Preis, ist aber nicht der Preis. In gleicher Größe
wetteifert es mit der Zahl; kleiner gesetzt liest man zuerst 99 €. */
.preis__takt{font-size:.38em;font-weight:700;letter-spacing:-.01em;
color:var(--ink-70);margin-left:2px}
/* Die Wortmarke der Fusszeile steht auf hellem Grund. Ohne diese Regel erbt
sie das Weiss von .nav__brand — weiss auf weiss, unsichtbar. Genau der
Fehler, den der Kontrastpruefer als Einzigen gemeldet hat. */
.foot__brand{color:var(--ink)}
.foot__brand:hover{color:var(--ink);text-decoration:none}
.foot__brand b{color:var(--kb)}
/* ==========================================================================
RUNDUNG UND HANDY-FEINSCHLIFF — 08.09.2026
--------------------------------------------------------------------------
Die Vorlage kam mit `--radius: 0`. Andreas will es runder — das ist eine
Gestaltungsentscheidung, keine Korrektur, deshalb steht sie als eigene
Ebene am Ende und nicht verstreut im System oben.
Gemessen auf 375 px, bevor etwas geändert wurde:
· Kopfleiste 73 px, darin ein Knopf von 98 × 73 px — er füllte die
volle Leistenhöhe und drängte Marke und Menü an die Ränder.
· Jeder Abschnitt trug 64 px Polster oben UND unten, dieselben Werte
wie am großen Bildschirm. Auf einem Handy sind 128 px zwischen zwei
Abschnitten eine halbe Bildschirmhöhe Leere.
· Seitenhöhe 16.530 px.
========================================================================== */
:root{
--rund-s:8px; /* Merkmale, kleine Marken */
--rund-m:14px; /* Karten, Eingabefelder */
--rund-l:22px; /* Fotos, große Flächen */
--rund-voll:999px;
}
/* ---------- Knöpfe: rund, und als Gruppe ---------- */
.btn{border-radius:var(--rund-voll);padding:13px 24px}
.btn--lg{padding:15px 28px}
.aktionen{gap:10px;align-items:center}
/* ---------- Karten, Felder, Merkmale ---------- */
.zeile,.sparte figure,.tafel-huelle{border-radius:var(--rund-m)}
.merkmal{border-radius:var(--rund-voll)}
.sparte figure:not(.sparte__karte) img{border-radius:var(--rund-l)}
.faq details{border-radius:0} /* Linien bleiben Linien */
.hinweis{border-radius:var(--rund-m)}
.rechnung,.preis__tag{border-radius:0}
/* Die Zeilen und Zellen bekommen einen leichten Rahmen, sonst wirkt eine
Rundung ohne Kante wie ein Versehen. */
.zeile{border:1px solid var(--linie-soft,#eef1f6);padding-inline:18px;
background:#fcfdff}
.drei>div{border-radius:var(--rund-m)}
/* ---------- Kopfleiste ---------- */
.nav{min-height:58px;gap:12px}
.nav .btn--primary{padding:9px 16px;font-size:13.5px;border-radius:var(--rund-voll);
white-space:nowrap}
.nav__login{padding:9px 4px}
/* ---------- Handy ---------- */
@media(max-width:700px){
/* 64 px oben UND unten sind am Telefon eine halbe Bildschirmhöhe Leere
zwischen zwei Abschnitten. 40 hält den Rhythmus, ohne zu drängen. */
.sec{padding-block:40px}
.zahlen{padding-block:32px;gap:20px 16px}
.band{padding-block:44px}
/* Die Kopfleiste trug drei Dinge nebeneinander: Marke, ein 98 × 73 px
großer Knopf und „Menü". Der Knopf steht ohnehin im Menü — hier ist
eine Marke links und EIN Bedienelement rechts genug. */
.nav{min-height:54px;gap:10px}
.nav .btn--primary{display:none}
/* Antippziele: gemessen bei 390 px war „Menü" 76 x 40 und die fuenf
Schrittzeilen 296 x 37. Die Norm verlangt 24 px (WCAG 2.5.8) — das war
erfuellt —, bequem zu treffen sind sie erst ab 44. Beide sind
Bedienelemente, die man am Rand des Bildschirms mit dem Daumen
trifft; zwei Millimeter mehr kosten hier nichts. */
.menu summary{border-radius:var(--rund-voll);padding:12px 16px;min-height:44px;
display:flex;align-items:center}
.sch{padding:12px 14px;min-height:44px}
.menu__panel{border-radius:var(--rund-m);overflow:hidden}
/* Die Datumsleiste stand über zwei Zeilen und wog schwerer als die
Überschrift darunter. */
.datum{gap:8px 14px;font-size:11px;margin-bottom:22px}
/* Am Telefon liegt das Foto vollflächig hinter dem Text; die Abdunklung
verläuft senkrecht statt schräg. Der blaue Stuhl bleibt unten sichtbar,
wo kein Text steht. */
.hero__bild{background-position:58% 62%}
.hero__dunkel{background:linear-gradient(180deg,rgba(8,12,24,.93) 0%,
rgba(8,12,24,.90) 46%,rgba(8,12,24,.78) 76%,rgba(8,12,24,.52) 100%)}
.hero__txt{max-width:100%}
.hero h1{font-size:clamp(27px,7.4vw,32px)}
.hero h1 em{margin-top:16px}
.hero__lead{margin-top:22px;font-size:14.5px}
/* Zwei Knöpfe untereinander in voller Breite lesen sich als Folge —
nebeneinander gequetscht als Wahl ohne Empfehlung. */
.aktionen{flex-direction:column;align-items:stretch;gap:10px}
.aktionen .btn{width:100%;justify-content:center}
.zeile{padding:18px 16px}
.sec-hd{gap:10px}
.sec-hd h2{font-size:clamp(22px,6vw,26px)}
}
/* ---------- Zwischenaufrufe (Trichter) ---------- */
.zwischenruf{display:flex;align-items:center;justify-content:space-between;
gap:20px;flex-wrap:wrap;margin:0 0 4px;padding:22px 26px;
border:1px solid var(--kb-200,#d6e0ff);border-radius:var(--rund-m);
background:linear-gradient(180deg,#f7f9ff,#eef3ff)}
.zwischenruf p{margin:0;font-size:15px;color:var(--ink)}
.zwischenruf strong{font-weight:800}
/* ---------- Mitlaufende Handlungsleiste ----------
Nur auf dem Handy. Am großen Bildschirm ist der Preis ohnehin nie weit,
dort wäre eine feste Leiste nur Belegung von Fläche. Ohne JavaScript:
sie ist immer da, und der Körper bekommt unten Platz dafür, damit sie
nichts verdeckt — eine Leiste, die den letzten Absatz überlagert, ist
schlimmer als keine. */
/* Die feste Leiste am unteren Rand ist am 12.09.2026 entfallen — sie gab
es nur auf dem Telefon und sass dort direkt ueber der Adressleiste des
Browsers. Siehe Anmerkung in content.py. */
@media(max-width:700px){
.zwischenruf{flex-direction:column;align-items:stretch;text-align:left;
padding:18px 18px;gap:14px}
.zwischenruf .btn{width:100%;justify-content:center}
/* ---------- Die drei Sparten ----------
Am großen Bildschirm wechseln Text und Foto die Seite — das gibt
Rhythmus. Auf dem Handy fällt das Raster in EINE Spalte, und dann
bestimmt die Reihenfolge im Dokument die Lage: bei „Gebäudereinigung"
stand das Foto vorn, bei den beiden anderen hinten. Dreimal derselbe
Aufbau, dreimal anders angeordnet — das liest sich wie ein Fehler.
Auf dem Handy steht das Foto deshalb IMMER oben: erst sieht man, für
wen es ist, dann liest man warum. */
.sparte figure,.sparte--kehrt figure{order:0}
.sparte__txt,.sparte--kehrt .sparte__txt{order:1}
.sparte{padding-block:28px;gap:18px}
.sparte img{aspect-ratio:16/10}
}
/* ---------- Datumsleiste auf dem Handy ----------
Die drei Marken sind zu lang, um nebeneinander zu passen — jede nahm
eine eigene Zeile, drei Zeilen Vorspann vor der Überschrift. Als
fortlaufende Zeile mit Trennpunkten braucht dasselbe zwei, und sie
wiegt optisch weniger als die Überschrift darunter, wie es sein soll. */
@media(max-width:700px){
.datum{display:block;font-size:10.5px;letter-spacing:.07em;line-height:1.7;
margin-bottom:20px;color:var(--kb-700)}
.datum span::after{content:" · ";color:var(--ink-55)}
.datum span:last-child::after{content:""}
}
/* ==========================================================================
TRICHTER — 09.09.2026
--------------------------------------------------------------------------
Die Seite war nach Paragraphen gegliedert (§ 01 … § 07). Das las sich wie
ein Vertrag: jeder Abschnitt gleich schwer, keine Richtung, und am Ende
zwei gleich starke Knoepfe — eine Wahl ohne Empfehlung.
Drei Bauteile machen daraus einen Trichter, alle ohne ein Byte
JavaScript:
.stufe Die Fortschrittsplakette. Ersetzt das Paragraphenzeichen und
sagt, die wievielte von sechs Stufen gerade laeuft.
.wahl Stufe 1: der Leser waehlt seinen Fall selbst. Das ist die
Verengung — ab hier liest er ueber sich, nicht ueber ein
Angebot.
.weiter Am Ende jeder Stufe GENAU EINE Fortsetzung, und die zeigt auf
die naechste Stufe, nicht ans Ende.
========================================================================== */
/* ---------- Fortschrittsplakette ---------- */
.stufe{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.stufe__txt{font-weight:800;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--kb-700);line-height:1.5}
/* Sechs Felder, die ersten n gefuellt. Der Balken traegt keine eigene
Aussage — die Zahl daneben sagt dasselbe —, deshalb aria-hidden im
Markup und hier nur Farbe. */
.stufe__bar{display:flex;gap:3px;width:100%;max-width:150px}
.stufe__bar i{flex:1;height:4px;border-radius:var(--rund-voll);
background:var(--linie)}
.stufe__bar i.an{background:var(--kb)}
/* ---------- Stufe 1: die Wahl ---------- */
.wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.karte{display:flex;flex-direction:column;gap:8px;padding:24px 22px 20px;
border:1px solid var(--linie);border-radius:var(--rund-m);background:#fcfdff;
color:var(--ink);text-decoration:none;
transition:border-color .15s,background .15s,transform .15s}
.karte:hover{border-color:var(--kb);background:var(--kb-100);color:var(--ink);
text-decoration:none;transform:translateY(-2px)}
.karte__marke{font-weight:800;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--kb-700)}
.karte__h{font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.02em;
margin-top:2px}
.karte__ziel{font-size:13.5px;line-height:1.6;color:var(--ink-70);margin-top:4px}
.karte__tat{margin-top:auto;padding-top:16px;font-weight:700;font-size:14px;
color:var(--kb-700)}
.karte__tat b{font-weight:700;display:inline-block;transition:transform .15s}
.karte:hover .karte__tat b{transform:translateX(4px)}
/* ---------- Die eine Fortsetzung ---------- */
.weiter{display:flex;align-items:center;gap:18px;margin:0;padding:22px 26px;
border:1px solid var(--kb-200);border-radius:var(--rund-m);
background:linear-gradient(180deg,#f7f9ff,#eef3ff);
color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.weiter:hover{border-color:var(--kb);background:var(--kb-100);color:var(--ink);
text-decoration:none}
.weiter__nr{flex:none;font-weight:800;font-size:12px;letter-spacing:.08em;
text-transform:uppercase;color:var(--kb-700)}
.weiter__txt{flex:1;font-weight:800;font-size:17px;line-height:1.25;
letter-spacing:-.02em}
.weiter__pfeil{flex:none;font-weight:800;font-size:20px;color:var(--kb-700);
transition:transform .15s}
.weiter:hover .weiter__pfeil{transform:translateX(5px)}
/* Die letzte Fortsetzung fuehrt aus dem Trichter heraus und traegt deshalb
als einzige die volle Signalfarbe. */
.weiter--los{background:var(--kb);border-color:var(--kb);color:#fff}
.weiter--los:hover{background:var(--kb-700);border-color:var(--kb-700);color:#fff}
.weiter--los .weiter__nr,.weiter--los .weiter__pfeil{color:#fff}
/* ---------- Aufmacher und Abschluss: EIN Knopf ----------
Vorher standen im Aufmacher zwei gleich grosse Knoepfe nebeneinander.
Zwei Knoepfe gleichen Gewichts sind keine Fuehrung, sondern eine Frage.
Der zweite Weg bleibt — als stiller Verweis, fuer den, der ihn sucht. */
.band__still{color:#fff;text-decoration:underline;text-underline-offset:4px}
.band__still:hover{color:#fff}
/* #e4eaff kam auf 4,28:1 gegen das Koenigsblau — knapp unter der Grenze
von 4,5. Der Unterschied zur weissen Ueberschrift entsteht ohnehin durch
Groesse und Staerke, nicht durch den Farbton; #f5f8ff misst 4,59:1. */
.band__lead{margin:22px 0 0;max-width:52ch;font-size:15px;line-height:1.75;
color:#f5f8ff}
.band .stufe__txt{color:#fff}
.band .stufe__bar i{background:rgba(255,255,255,.32)}
.band .stufe__bar i.an{background:#fff}
.band .stufe{margin-bottom:22px}
@media(max-width:1000px){
.wahl{grid-template-columns:1fr}
.stufe{flex-direction:row;align-items:center;gap:14px}
.stufe__bar{max-width:110px}
}
@media(max-width:700px){
.weiter{padding:18px 18px;gap:12px;flex-wrap:wrap}
.weiter__txt{flex:1 1 100%;order:2;font-size:16px}
.weiter__nr{order:1}
.weiter__pfeil{order:1;margin-left:auto}
.karte{padding:20px 18px 18px}
.karte__h{font-size:18px}
/* Der stille Verweis steht unter dem Knopf, nicht daneben — sonst
bekommt er durch die volle Breite dasselbe Gewicht wie der Knopf. */
}
/* ==========================================================================
LESBARKEIT UND LADEZEIT AUF DEM HANDY — 09.09.2026
--------------------------------------------------------------------------
Andreas: „die startseite ist schwer zu öffnen, die mobile ansicht muss
angepasst werden, klar verständliche darstellung, und die schriftart
besser lesbar und die schrift muss klarer sichtbar sein.“
Gemessen, bevor etwas geändert wurde (375 px, Netzwerkprotokoll):
· Das Telefon lud hero-2000.jpg — 150 kB, ein 2000 px breites Bild für
einen 375 px breiten Schirm. Es lag als CSS-Hintergrund vor, wurde
also erst nach dem Parsen der Stilvorlage überhaupt entdeckt.
· Der Fließtext stand bei 14,5–15 px in #575d6a. Das erfüllt die
Kontrastregel (6,6:1), liest sich auf einem Telefon in der Hand aber
wie Kleingedrucktes — die Regel ist eine Untergrenze, kein Ziel.
· Archivo im Schnitt 400 wirkt auf kleinen Schirmen dünn. Die Schrift
ist variabel (100–900), ein Zwischenschnitt kostet also nichts.
========================================================================== */
/* ---------- Bild in der Größe, die das Gerät braucht ---------- */
@media(max-width:700px){
/* GENAU EINE Datei, ohne image-set.
Mit „hero-700 1x, hero-1200 2x" lud ein Telefon mit doppelter
Pixeldichte BEIDE: der Vorablink oben im Dokument holte die kleine,
die Stilvorlage verlangte dann die große — zusammen 170 kB, mehr als
die 150 kB vorher. Gemessen im Netzwerkprotokoll.
700 px reichen hier auch bei dreifacher Dichte: Das Foto steht
hinter einem Schleier, der oben 97 % deckt. Schärfe, die niemand
sieht, ist nur Ladezeit. */
.hero__bild{background-image:url('/img/hero-700.jpg')}
}
/* ---------- Ein dunklerer Zwischenton für Fließtext ----------
#575d6a ist für kleine Beschriftungen gedacht. Für ganze Absätze am
Telefon ist er zu leicht; #39404f misst 9,4:1 auf Weiss und liest sich
ruhig, ohne die Härte von reinem Schwarz. */
:root{ --ink-lesbar:#39404f; }
@media(max-width:700px){
/* Grundschrift eine Stufe größer und einen Hauch kräftiger. 450 statt 400
ist bei einer variablen Schrift ein echter Schnitt, kein Fettdruck. */
body{font-size:17px;font-weight:450;line-height:1.68}
.hero__lead{font-size:17px;line-height:1.72;color:var(--ink-lesbar);
margin-top:24px}
.sec-hd p{font-size:16.5px;line-height:1.7;color:var(--ink-lesbar)}
.zeile p,.sparte p,.drei p,.faq__a,.zwei .liste li,.preis .liste li,
.preis__sub,.legal p,.legal li,.hinweis p{
font-size:16px;line-height:1.7;color:var(--ink-lesbar)}
.tafel td{font-size:15.5px;color:var(--ink-lesbar)}
.foot__gitter p,.foot li a,.foot__unten{font-size:15px;color:var(--ink-lesbar)}
/* Kleinmarken und Merkmale waren 12 px und darunter — auf Armlänge
kaum noch zu entziffern. */
.merkmal{font-size:13.5px;padding:6px 12px}
.marke,.plate,.zielzeile,.drei .nr,.zeile__nr{font-size:13px}
.zahlen span{font-size:12.5px;letter-spacing:.06em}
.stufe__txt{font-size:13px}
.datum{font-size:12px;letter-spacing:.05em}
/* Überschriften: das enge Sperren stammt von großen Graden. Bei 22–26 px
zieht es die Buchstaben unnötig zusammen. */
h1,h2,h3{letter-spacing:-.01em}
.sec-hd h2{font-size:clamp(23px,6.2vw,27px);line-height:1.2}
.zeile h3,.drei h3{font-size:19px;line-height:1.3}
.sparte h3{font-size:22px;line-height:1.22}
.faq summary{font-size:17.5px;line-height:1.35;padding:20px 0}
/* Mehr Luft zwischen den Zeilen einer Liste — sonst verschwimmen sie. */
.liste li{padding-bottom:16px}
.merkmale{gap:9px}
/* Der stille Verweis stand unmittelbar über der mitlaufenden Leiste und
wirkte wie ein Teil davon. */
.aktionen{margin-bottom:8px}
/* Einzige Polster-Regel des Aufmachers am Telefon. Oben knapp,
weil darüber schon das Fotoband steht. */
.hero__in{padding-block:26px 40px}
/* Die größere Schrift hat die Seite um rund 1.400 px verlängert. Das
Polster darf dafür enger werden: Der Abstand soll die Abschnitte
trennen, nicht den Daumen beschäftigen. */
.sec{padding-block:34px}
.zeile{padding:16px 14px}
.zeilen{margin-top:34px}
.sparte{padding-block:24px;gap:16px}
.drei>div{padding-block:22px 24px}
.faq{margin-top:28px}
.preis{margin-top:34px;padding-top:34px}
.zwei{margin-top:34px}
.wahl{margin-top:32px;gap:12px}
}
/* ==========================================================================
DER EINSTIEG AUF DER SEITE — 10.09.2026
--------------------------------------------------------------------------
Andreas: „mach die webseite mehr wie eine webseiten funnel webseite".
Was gefehlt hat, war nicht noch ein Knopf, sondern der ANFANG des
Vorgangs. Jede Handlung führte bisher mit einem Link nach
app.leads2mail.de — der Besucher verließ die Seite, auf der er gerade
überzeugt wurde, und fing woanders von vorn an. Jetzt steht das erste
Feld hier, und die Adresse wandert mit.
========================================================================== */
.einstieg{margin-top:32px;max-width:520px}
/* Im Abschlussband stehen dieselben Knöpfe auf Königsblau. */
.einstieg--dunkel{margin-top:28px}
.einstieg--dunkel .btn--primary{background:#fff;color:var(--kb-700);border-color:#fff}
.einstieg--dunkel .btn--primary:hover{background:var(--kb-100);color:var(--kb-700);
border-color:var(--kb-100)}
/* Der Einstieg im Spartenblock: wer sich hier wiedererkennt, ist HIER
bereit — nicht erst am Seitenende. */
.sparte__tat{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
font-weight:800;font-size:15px;color:var(--kb-700);
border-bottom:2px solid var(--kb-200);padding-bottom:4px}
.sparte__tat:hover{color:var(--kb);border-color:var(--kb);text-decoration:none}
.sparte__tat b{font-weight:800;transition:transform .15s}
.sparte__tat:hover b{transform:translateX(4px)}
/* ---------- Was als Nächstes passiert ---------- */
.danach{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;
border-top:1px solid var(--linie)}
.danach>div{padding:28px clamp(16px,2vw,28px) 30px 0;border-bottom:1px solid var(--linie)}
.danach>div+div{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--linie)}
.danach__nr{display:grid;place-items:center;width:30px;height:30px;
border-radius:var(--rund-voll);background:var(--kb-100);color:var(--kb-700);
font-weight:800;font-size:14px;margin-bottom:14px}
.danach h3{font-size:18px;line-height:1.25;margin:0 0 10px}
.danach p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-70)}
@media(max-width:1000px){
.danach{grid-template-columns:1fr}
.danach>div,.danach>div+div{border-left:0;padding-left:0}
}
@media(max-width:700px){
.einstieg{max-width:100%;margin-top:26px}
/* Feld und Knopf untereinander: nebeneinander bleibt für das Feld auf
375 px kaum genug Platz, um die eigene Adresse zu lesen. */
.danach p{font-size:16px;line-height:1.7;color:var(--ink-lesbar)}
.danach h3{font-size:19px}
.sparte__tat{font-size:16px;margin-top:18px}
}
/* ==========================================================================
DER TEXT AUF DEM AUFMACHER — WEISS UND BLAU
--------------------------------------------------------------------------
Dieser Block steht bewusst am ENDE der Datei.
Beim ersten Versuch stand er oben bei den uebrigen Aufmacher-Regeln — und
blieb wirkungslos: `.hero__lead` wird weiter unten
noch einmal gesetzt (Lesbarkeits- und Trichter-Ebene), bei gleicher
Gewichtung gewinnt die spaetere Regel. Gemessen kam der Vorspann auf
2,95:1 statt der geforderten 4,5 — heller Text in der Farbe fuer weissen
Grund. Wer Farben nachtraegt, muss sie dort nachtragen, wo sie auch
gelten.
========================================================================== */
.hero .datum{color:#9dbcea}
.hero h1{color:#fff}
/* Das Koenigsblau der Hausfarbe misst auf diesem Grund 2,1:1 — auf hellem
Grund ist es richtig, hier nicht. Ein aufgehellter Ton derselben Familie
traegt die Marke und ist lesbar. */
.hero h1 .ac{color:#8fb0e2}
.hero .hero__lead{color:#d3daea}
.hero .hero__lead strong{color:#fff}
/* ==========================================================================
MODERNISIERUNG — 10.09.2026
--------------------------------------------------------------------------
Andreas: „mach sie hochmodern wie eine perfekte funnel webseite und mobil
optimiert, und hoch modern wie onepage.io".
Befund vor dem Umbau, an der ganzen Seite abgelesen: Der Aufmacher trägt,
alles darunter liest sich wie ein Dokument. Acht weiße Abschnitte
hintereinander, 15–16 px Fließtext in 60 Zeichen breiten Spalten auf 1200
px Fläche, Überschriften bei 34 px — und **nirgends das Produkt**.
Vier Eingriffe, keine Effekthascherei:
1. Das Produkt zeigen. Die Bundesland-Karte kommt aus demselben Bauteil,
das sie im CRM zeichnet — echtes Erzeugnis, kein Schaubild.
2. Rhythmus. Ein dunkler Abschnitt in der Mitte bricht die weiße
Strecke: hell → dunkel → hell → blaues Band.
3. Größere Anzeigengrade. Ein Trichter darf laut sein, wo er etwas
behauptet.
4. Bewegung beim Scrollen — ohne ein Byte JavaScript, über
animation-timeline. Wer Bewegung abbestellt hat, bekommt keine.
========================================================================== */
/* ---------- 1) Anzeigengrade ---------- */
.hero h1{font-size:clamp(30px,4vw,58px);letter-spacing:-.035em;line-height:1.02}
.sec-hd h2{font-size:clamp(26px,3.3vw,44px);letter-spacing:-.03em;line-height:1.06}
.band h2{font-size:clamp(27px,3.6vw,46px);letter-spacing:-.03em;line-height:1.06}
.zahlen b{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.035em}
.zeile h3,.drei h3{font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em}
.sparte h3{font-size:clamp(22px,2.4vw,31px);letter-spacing:-.03em}
.preis__tag{font-size:clamp(48px,6vw,78px);letter-spacing:-.04em}
/* ---------- 2) Der dunkle Abschnitt ----------
Königsblau bleibt dem Abschlussband vorbehalten; hier der Ton der
Kopfleiste, damit die Seite zwei dunkle Werte hat und nicht drei. */
.sec--dunkel{background:#101625;border-bottom:0;color:#c3ccdd}
/* .stufe__txt traegt eine eigene Farbe und erbt nicht von .plate —
ohne diese Zeile stand „SCHRITT 3 VON 6" in Dunkelblau auf
dunklem Grund und war praktisch unsichtbar. */
.sec--dunkel .plate,.sec--dunkel .marke,.sec--dunkel .stufe__txt{color:#9dbcea}
.sec--dunkel h2,.sec--dunkel h3{color:#fff}
.sec--dunkel .sec-hd p,.sec--dunkel p{color:#c3ccdd}
.sec--dunkel .drei{border-top-color:rgba(255,255,255,.16)}
.sec--dunkel .drei>div{border-bottom-color:rgba(255,255,255,.16)}
.sec--dunkel .drei>div+div{border-left-color:rgba(255,255,255,.16)}
.sec--dunkel .drei .nr{color:#9dbcea}
.sec--dunkel a{color:#9fc0ff}
.sec--dunkel a:hover{color:#fff}
.sec--dunkel .mono{color:#e2e8f5}
.sec--dunkel .stufe__bar i{background:rgba(255,255,255,.22)}
.sec--dunkel .stufe__bar i.an{background:#9dbcea}
.sec--dunkel :focus-visible{outline-color:#9dbcea}
/* ---------- 3) Das Produkt ---------- */
.produkt{display:grid;grid-template-columns:1fr .8fr;gap:clamp(32px,5vw,72px);
align-items:center;margin-top:56px;padding:clamp(26px,3vw,44px);
border:1px solid var(--linie);border-radius:var(--rund-l);
background:linear-gradient(180deg,#fbfcff,#f4f7ff)}
.produkt h3{font-size:clamp(21px,2.2vw,28px);line-height:1.16;margin:0 0 14px;
letter-spacing:-.025em}
.produkt p{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--ink-70);
max-width:46ch}
/* Grad und Farbe stehen jetzt in der Staffel weiter unten. Hier stand
font-size:13,5px!important — noetig, solange `.produkt p` (0,1,1) die
Regel `.produkt__echt` (0,1,0) schlug. Ein !important ist immer die
Antwort auf ein Gewichtsproblem, das man auch loesen kann; geloest ist
es jetzt durch `.produkt p.produkt__echt`. */
.produkt__echt{border-left:2px solid var(--kb-200);padding-left:12px}
.produkt__bild{margin:0;display:grid;place-items:center}
.produkt__bild img{width:100%;max-width:300px;height:auto;
filter:drop-shadow(0 18px 34px rgba(15,21,36,.14))}
/* ---------- 4) Bewegung beim Scrollen ----------
animation-timeline: view() bindet die Abspielzeit an die Sichtbarkeit des
Elements — kein Skript, kein Beobachter, keine Bibliothek. Browser ohne
Unterstützung zeigen den Inhalt einfach sofort; deshalb steht die
Startlage NUR innerhalb von @supports. Ohne diese Klammer wäre der halbe
Seiteninhalt dort unsichtbar. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes auftauchen{
from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:none}
}
.zeile,.drei>div,.karte,.wahl .karte,.weiter,.produkt,.danach>div,
.sparte,.zahlen>div,.faq details,.zwei>div{
animation:auftauchen linear both;
animation-timeline:view();
animation-range:entry 0% entry 32%;
}
/* Der Aufmacher steht beim Laden schon da — er darf nicht erst
erscheinen. */
.hero *{animation:none}
}
}
@media(max-width:1000px){
.produkt{grid-template-columns:1fr;gap:28px}
.produkt__bild{order:-1}
.produkt__bild img{max-width:210px}
}
/* ---------- Schlagzeilen werden nicht getrennt ----------
hyphens:auto steht auf allen Überschriften, seit „Geschäftsbedingungen"
bei 32 px die AGB-Seite waagerecht geschoben hat. In einer SCHLAGZEILE
ist eine Trennung aber ein Fehler: „Zwölf Mona-te senden." liest sich
wie ein Satzfehler, nicht wie Typografie.
Die Rechtstexte behalten die Trennung — dort ist sie nötig und stört
niemanden. overflow-wrap bleibt überall als Notnagel stehen: Ein Wort,
das breiter ist als der Bildschirm, bricht dann eben hart, statt die
Seite zu schieben. */
.hero h1,.sec-hd h2,.band h2,.sparte h3,.produkt h3,.zeile h3,.drei h3,
.danach h3,.karte__h,.weiter__txt{hyphens:manual}
/* Die Karte ist das einzige Produktbild der Seite — am Telefon darf sie
etwas mehr Raum nehmen. */
@media(max-width:700px){
.produkt__bild img{max-width:250px}
}
/* ==========================================================================
OHNE STRICHE — 10.09.2026
--------------------------------------------------------------------------
Andreas: „diese striche sollen weg auf der startseite".
Das Stilsystem „Modernist" gliederte ausschließlich mit Linien — das war
seine Grundidee. Über zwanzig waagerechte Striche lagen dadurch auf der
Startseite: unter jedem Abschnitt, über jeder Liste, zwischen den
Sparten. Auf Weiß liest sich das wie ein Formular.
Getrennt wird jetzt durch Abstand, Fläche und den einen dunklen
Abschnitt. Was bleibt, sind die Linien, die etwas TUN: Tabellenzeilen
und die aufklappbaren Fragen — dort trennt die Linie zwei Einträge und
ist keine Zierde.
========================================================================== */
.sec{border-bottom:0}
.zahlen{border-bottom:0}
.zeilen{border-top:0;margin-top:44px}
.zeile{border-bottom:0}
.sparten{margin-top:40px}
.sparte{border-bottom:0}
.sparte:last-of-type{border-bottom:0}
.preis{border-top:0;padding-top:0;margin-top:44px}
.zwei h3{border-bottom:0;padding-bottom:0}
.faq{border-top:0}
.foot__gitter{border-top:0}
/* Die beiden Raster trugen ihre Gliederung ausschließlich in den Linien.
Ohne sie zerfielen sie — deshalb werden aus den Zellen Karten. Das ist
ohnehin die zeitgemäßere Form: Fläche statt Gitter. */
.drei,.danach{border-top:0;gap:14px;margin-top:40px}
.drei>div,.danach>div{border:1px solid var(--linie-weich,#eef1f6);
border-radius:var(--rund-m);background:#fcfdff;
padding:24px 22px 26px!important}
.drei>div+div,.danach>div+div{border-left:1px solid var(--linie-weich,#eef1f6)}
.drei>div:nth-child(3n+1){border-left:1px solid var(--linie-weich,#eef1f6)}
/* Im dunklen Abschnitt tragen die Karten dieselbe Form, nur umgekehrt. */
.sec--dunkel .drei>div{background:rgba(255,255,255,.045);
border-color:rgba(255,255,255,.14)}
.sec--dunkel .drei>div+div,
.sec--dunkel .drei>div:nth-child(3n+1){border-left-color:rgba(255,255,255,.14)}
@media(max-width:1000px){
.drei>div:nth-child(2n+1){border-left:1px solid var(--linie-weich,#eef1f6);
padding-left:22px!important}
.sec--dunkel .drei>div:nth-child(2n+1){border-left-color:rgba(255,255,255,.14)}
}
@media(max-width:700px){
.drei>div,.danach>div,.drei>div+div{padding:20px 18px 22px!important}
}
/* ---------- Zusammenziehen ----------
Andreas: „und komprimiere es".
Die Abstände waren auf die Striche gerechnet: Eine Linie trennt schon
für sich, das Polster daneben durfte großzügig sein. Ohne Linien trennt
nur noch der Abstand — und dann fällt auf, dass er zu groß ist. Zwischen
der letzten Sparte und dem nächsten Schritt lagen 200 px Nichts. */
.sec{padding-block:64px}
.zahlen{padding-block:44px;gap:var(--s5)}
.sparte{padding-block:38px}
.sparte:first-of-type{padding-top:0}
.sparte:last-of-type{padding-bottom:8px}
.sparten{margin-top:32px}
.zeilen{margin-top:34px}
.zeile{padding-block:26px}
.drei,.danach{margin-top:32px}
.sec-hd p{margin-top:16px}
.produkt{margin-top:40px}
.faq{margin-top:28px}
.preis{margin-top:36px}
.zwei{margin-top:36px}
.band{padding-block:clamp(48px,5.5vw,72px)}
@media(max-width:700px){
.sec{padding-block:34px}
.zahlen{padding-block:26px;gap:18px 14px}
.sparte{padding-block:22px}
.zeile{padding:16px 16px}
.sec-hd p{margin-top:12px}
}
/* ---------- Nur noch zwei Knöpfe ----------
Andreas, 10.09.2026: „nur zugang anlegen oder login". Das Feld für die
E-Mail, der Hinweistext darunter und die Zeile „Lieber erst ansehen?"
sind weg.
Der zweite Knopf trägt im Stilsystem eine dunkle Umrandung — gedacht für
weissen Grund. Auf dem dunklen Aufmacher wäre er unsichtbar gewesen:
dunkle Linie auf dunklem Foto. Dort deshalb hell, wie im Abschlussband. */
.einstieg{margin-top:30px;max-width:none}
.hero .btn--line{color:#fff;border-color:rgba(255,255,255,.55);
background:transparent}
.hero .btn--line:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:700px){
.einstieg{margin-top:24px}
}
/* ==========================================================================
TYPOGRAFIE — EINE STAFFEL, ACHT STUFEN (10.09.2026)
--------------------------------------------------------------------------
Gemessen vor dem Umbau, an der gerenderten Seite bei 1440 px:
19 verschiedene Schriftgrade — 78 · 57,6 · 51,8 · 46 · 44 · 31 · 29,6 ·
28 · 22 · 20 · 19 · 18 · 17 · 16 · 15 · 14 · 13,5 · 13 · 12.
Das ist keine Ordnung, das ist Ansammlung: 46 und 44 nebeneinander sind
kein Unterschied, den ein Auge liest, aber zwei Regeln, die man pflegen
muss. Dazu widersprachen sich die Zeilenhöhen beim GLEICHEN Grad — 17 px
trat mit 1,62, 1,25 und 1,3 auf — und bei 14 px lagen vier Strichstärken
nebeneinander (400/600/700/800).
Jetzt acht Stufen mit festen Rollen. Jede Stufe bringt ihre Zeilenhöhe
und ihre Sperrung mit, denn beide hängen vom Grad ab: Große Grade
brauchen enge Zeilen und negative Sperrung, kleine das Gegenteil. Das
ist der eigentliche Inhalt einer Staffel — nicht die Zahlenreihe.
========================================================================== */
:root{
/* Anzeige — Aufmacher und Preis. Einmal je Seite, sonst verliert er. */
--t-display:clamp(34px,4.6vw,60px);
/* Titel — Abschnittsüberschriften. */
--t-titel:clamp(27px,3.2vw,42px);
/* Kopf — Sparten, Produkt. Die zweite Ebene. */
--t-kopf:clamp(21px,2.1vw,28px);
/* Unter — Karten, Zeilen, Fragen. Die dritte. */
--t-unter:20px;
/* Vorspann — der eine Absatz unter einer Überschrift. */
--t-lead:17px;
/* Fließtext. */
--t-text:15.5px;
/* Hilfstext — Fußnoten, Quellen, Fußzeile. */
--t-klein:13.5px;
/* Kleinmarke — Versalien, gesperrt. */
--t-marke:12px;
}
/* ---------- Anzeige ---------- */
.hero h1,.preis__tag{font-size:var(--t-display);line-height:1.02;
letter-spacing:-.035em;font-weight:800}
/* ---------- Titel ---------- */
.sec-hd h2,.band h2,.zahlen b,.anmeldung h1{font-size:var(--t-titel);
line-height:1.08;letter-spacing:-.03em;font-weight:800}
/* ---------- Kopf ---------- */
.sparte h3,.produkt h3,.seitenkopf h1{font-size:var(--t-kopf);line-height:1.15;
letter-spacing:-.025em;font-weight:800}
/* ---------- Unter ---------- */
.zeile h3,.drei h3,.danach h3,.karte__h,.weiter__txt,.faq summary,
.zwei h3,.preis h3,.legal h2{font-size:var(--t-unter);line-height:1.25;
letter-spacing:-.02em;font-weight:800}
/* ---------- Vorspann ---------- */
.hero__lead,.sec-hd p,.seitenkopf .lead{font-size:var(--t-lead);line-height:1.62;
letter-spacing:0;font-weight:400;max-width:46ch}
/* ---------- Fließtext ----------
Das Maß lag zwischen 39 und 83 Zeichen je Zeile. Über 75 verliert das
Auge beim Rücksprung die Zeile; 68 ist die bequeme Mitte. */
.zeile p,.drei p,.danach p,.sparte p,.produkt p,.liste li,.faq__a,
.tafel td,.rechnung td,.legal p,.legal li,.hinweis p,.preis__sub{
font-size:var(--t-text);line-height:1.7;letter-spacing:0;font-weight:400;
max-width:68ch}
/* ---------- Hilfstext ---------- */
.produkt__echt,.karte__ziel,.foot li a,.foot__gitter p,.foot__unten,
.brotkrume,.legal dd{font-size:var(--t-klein);line-height:1.6;font-weight:400}
/* ---------- Kleinmarke ----------
Versalien brauchen Sperrung, sonst kleben sie. Bei kleinen Graden ist
sie positiv — das Gegenteil der Anzeige. */
.marke,.plate,.stufe__txt,.karte__marke,.zielzeile,.zahlen span,
.weiter__nr,.drei .nr,.zeile__nr,.datum,.tafel th,.foot h3,.einstieg__lab{
font-size:var(--t-marke);line-height:1.45;letter-spacing:.09em;
font-weight:800;text-transform:uppercase}
/* ---------- Bedienelemente ----------
Ein Knopf ist kein Fließtext: feste Größe, kein Umbruchmaß, mittlere
Zeilenhöhe. */
.btn{font-size:var(--t-text);line-height:1.2;letter-spacing:0;font-weight:700}
.btn--lg{font-size:16px}
.merkmal{font-size:var(--t-klein);line-height:1.4;letter-spacing:0;
font-weight:600;text-transform:none}
/* Der Pfeil trug die Zeilenhöhe des Fließtextes und stand dadurch zu tief. */
.weiter__pfeil,.karte__tat b,.sparte__tat b{line-height:1}
.sparte__tat,.karte__tat{font-size:var(--t-text);font-weight:800;line-height:1.3}
/* „/Monat" gehört zum Preis, ist aber nicht der Preis. */
.preis__takt{font-size:.36em;line-height:1;letter-spacing:-.01em;font-weight:700}
/* ---------- Am Telefon ----------
Der Fließtext wächst, die Anzeige schrumpft nicht mit clamp allein: Auf
375 px sind 34 px Anzeige richtig, 60 wären es nicht. Das erledigt der
clamp. Was er NICHT erledigt, ist der Fließtext — der darf auf einem
Gerät in der Hand größer sein als am Monitor. */
@media(max-width:700px){
:root{
--t-unter:19px;
--t-lead:17px;
--t-text:16.5px;
--t-klein:14.5px;
--t-marke:12.5px;
}
.hero__lead,.sec-hd p{max-width:none}
.zeile p,.drei p,.danach p,.sparte p,.produkt p,.liste li,.faq__a,
.legal p,.legal li{max-width:none;line-height:1.68}
.btn--lg{font-size:16.5px}
}
/* ---------- Die letzten Ausreißer einsammeln ----------
Nach dem ersten Durchgang blieben 12 Grade statt 19. Was noch danebenlag,
war jedes Mal ein Nicht-Unterschied: 14 neben 13,5, 16 neben 15,5, und
ein einziger Absatz bei 15. Ein halber Pixel ist keine Stufe — er ist
eine zweite Regel für dieselbe Wirkung.
--t-klein steigt dabei von 13,5 auf 14: Damit verschwindet die Doppelung,
und die Fußzeile wird nebenbei besser lesbar. */
:root{ --t-klein:14px; }
.band__lead{font-size:var(--t-lead);line-height:1.62;max-width:46ch}
.btn--lg{font-size:var(--t-lead);line-height:1.2}
.skip{font-size:var(--t-text)}
/* Die Kopfleiste ist Bedienung, kein Text — ein Grad für alles darin. */
.nav__links a,.nav__login,.nav .btn--primary,.menu summary{
font-size:var(--t-klein);line-height:1.3;font-weight:700}
/* Die Ziffernscheiben tragen die Kleinmarke, nicht den Fließtext. */
.danach__nr,.sl-nr{font-size:var(--t-marke);line-height:1;letter-spacing:0}
@media(max-width:700px){
:root{ --t-klein:15px; }
}
/* ---------- Zwei Nachzügler ----------
`p.marke` stand bei 15,5 statt 12. Grund: `.produkt p` (0,1,1) schlägt
`.marke` (0,1,0) — die Kleinmarke im Produktblock ist ein
und wurde
deshalb als Fließtext behandelt. Ein Beispiel dafür, dass eine Staffel
nicht nur aus Werten besteht, sondern aus Gewichten von Selektoren.
Und der Hinweis unter der Karte hing mit !important bei 13,5 fest — das
!important stammt aus dem Moment, als die Regel gegen `.produkt p`
ankommen musste. Jetzt gewinnt sie ohne. */
.produkt p.marke,.produkt .marke{font-size:var(--t-marke);line-height:1.45;
letter-spacing:.09em;font-weight:800;text-transform:uppercase;max-width:none}
.produkt p.produkt__echt{font-size:var(--t-klein);line-height:1.6;
color:var(--ink-70);max-width:52ch}
/* ---------- Auch die Randstücke gehören in die Staffel ----------
Am Telefon blieben 13 Grade statt 9. Die Ursachen waren zwei:
1. Die mitlaufende Leiste unten stand nie in der Staffel — sie kam aus
der Trichter-Ebene mit eigenen Werten (16 / 14 / 13,5).
2. `.zwei .liste li` und `.preis .liste li` wiegen 0,2,0 und schlagen
damit mein `.liste li` (0,1,1) — obwohl meine Regel später steht.
Spätere Stellung hilft nur bei GLEICHEM Gewicht. Deshalb hier
dieselben Selektoren, nicht schwächere. */
.zwei .liste li,.preis .liste li{font-size:var(--t-text);line-height:1.7}
/* Der Pfeil steht neben seinem Text und gehört auf dessen Stufe — 20 px
neben 19 waren wieder ein Nicht-Unterschied. */
.weiter__pfeil{font-size:var(--t-unter);line-height:1}
/* Ein Knopf bricht nicht um. Durch den größeren Grad passte „Angebot
ansehen" nicht mehr in eine Zeile; enger gepolstert schon. */
/* ==========================================================================
VEREDELUNG — 12.09.2026
--------------------------------------------------------------------------
Andreas: „mach die webseite luxeriöser."
Dieselbe Handschrift wie im CRM, damit beide Seiten aus einem Haus
kommen: keine Schlagschatten, keine zweite Akzentfarbe, kein Glanz.
Wertigkeit entsteht hier aus der Genauigkeit der Kleinteile —
Ziffern, die untereinander stehen, Laufweiten, die zur Schriftgröße
passen, und Abstände, die einem Raster folgen.
Eine Zeile Sorgfalt, die mehr bringt als jeder Effekt: Archivo läuft
in großen Graden zu weit. Ohne negative Laufweite wirkt jede
Schlagzeile ab 40 px zerfasert, und genau das liest sich billig.
========================================================================== */
/* --- Ziffern stehen untereinander ---------------------------------------- */
.zahlen b, .zahlen strong, .kennzahl, .preis, .preis b,
table td, table th, .datum, .sparte__zahl, .hero__lead strong{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1, "lnum" 1;
}
/* --- Schlagzeilen: enger, geschlossener ---------------------------------- */
h1{letter-spacing:-.028em}
h2{letter-spacing:-.02em}
h3{letter-spacing:-.012em}
.hero h1{letter-spacing:-.032em;text-wrap:balance}
.lead,.hero__lead{text-wrap:pretty}
/* --- Versalien brauchen Luft ---------------------------------------------
Die Augenbrauen über den Abschnitten („B2B-LEADS + COLD MAILING") und
die Beschriftungen unter den Kennzahlen. Versalsatz ohne Sperrung
klebt zusammen; das ist der häufigste Grund, warum eine sonst saubere
Seite unfertig wirkt. */
.marke,.augenbraue,.datum,.zahlen span,.stufe__nr,.fuss h3{
letter-spacing:.12em}
/* --- Schaltflächen -------------------------------------------------------
Die Pillenform bleibt. Die Lichtkante innen oben ist eine Haarlinie,
kein Schatten: Sie gibt der Fläche eine Oberkante, wie sie gedruckte
Farbe auf Papier hat. */
.tat,.tat--haupt,.btn{letter-spacing:.004em;
transition:background .14s ease,border-color .14s ease,color .14s ease}
.tat--haupt,.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
a:focus-visible,button:focus-visible{outline:none;
box-shadow:0 0 0 3px var(--kb-200)}
/* --- Kennzahlenband: die Zahl trägt --------------------------------------- */
.zahlen b,.zahlen strong{letter-spacing:-.03em}
/* --- Karten und Flächen: mehr Ruhe ---------------------------------------
Größere Innenabstände und eine hellere Trennlinie. Nichts kommt hinzu,
der Inhalt bekommt nur Platz. */
.karte,.sparte,.frage,.angebot__karte{border-color:#e3e7ef}
.karte{border-radius:16px}
/* --- Tabellen ------------------------------------------------------------- */
table td,table th{padding-top:14px;padding-bottom:14px}
table th{letter-spacing:.07em;color:var(--ink-55)}
/* --- Kopfzeile ------------------------------------------------------------ */
.kopf a{letter-spacing:.004em;transition:color .12s}
/* --- Rechtstexte: Lesbarkeit ist hier die Wertigkeit ----------------------
AGB, Datenschutz und Impressum sind lange Fließtexte. Eine Zeile über
75 Zeichen liest sich mühsam, und Mühe wirkt nie hochwertig. */
.recht p,.recht li{max-width:72ch;line-height:1.72}
.recht h2{margin-top:2.2em;letter-spacing:-.014em}
@media(max-width:700px){
/* Auf dem Handy zählt Platz mehr als Ruhe — die negative Laufweite
bleibt, die größeren Abstände nicht. */
.hero h1{letter-spacing:-.026em}
}
/* --- Abstand um die Weiter-Bänder ----------------------------------------
Gemessen am 12.09.2026: alle vier Bänder hatten oben UND unten genau
null Pixel. Zwischen zwei hellen Abschnitten fiel das nicht auf — die
64 px Innenabstand der Abschnitte liegen davor und dahinter und sind
weiß wie das Band. Grenzt aber ein dunkler Abschnitt an, endet dessen
Fläche unmittelbar an der Bandkante, und es klebt.
Das Band braucht deshalb einen EIGENEN Abstand. Er richtet sich nach
dem Rhythmus der Abschnitte (64 px), bleibt aber darunter: Das Band
gehört zwischen zwei Stufen, es ist keine dritte. */
.weiter{margin:clamp(32px,4.4vw,52px) 0}
/* Das erste Band nach dem Aufmacher braucht oben weniger — dort liegt
schon das Kennzahlenband dazwischen. */
.sec + .wrap > .weiter{margin-top:clamp(28px,3.6vw,44px)}
/* ==========================================================================
MOBIL — 12.09.2026
--------------------------------------------------------------------------
Andreas: „mache die mobile ansicht besser und optimierter."
Gemessen bei 375 px, nicht geschätzt: kein Querlauf, Abschnitte mit
34 px Innenabstand, Fließtext 17 px — das war in Ordnung. Was NICHT in
Ordnung war, sind die Tippziele.
========================================================================== */
@media(max-width:700px){
/* --- Der wichtigste Fund: die Sparten-Aufrufe waren 27 px hoch --------
„Als Reinigungsfirma Zugang anlegen" ist der Knopf, mit dem der
Kunde in den Trichter einsteigt — und er war ein unterstrichener
Textlink von 27 px Höhe. Ein Daumen trifft rund 44 px sicher; alles
darunter wird zum Zielen, und beim Zielen bricht man ab.
Auf dem Handy wird daraus ein richtiger Knopf über die volle
Breite: dieselbe Pillenform wie überall, nur nicht mehr als
Randnotiz am Kartenfuß. */
.sparte__tat{display:flex;justify-content:center;width:100%;
min-height:48px;margin-top:22px;padding:13px 20px;
border:1px solid var(--kb);border-bottom-width:1px;
border-radius:var(--rund-voll);background:var(--kb);color:#fff;
font-size:16px}
.sparte__tat:hover,.sparte__tat:active{background:var(--kb-700);
border-color:var(--kb-700);color:#fff}
/* Dasselbe für die Karten-Aufrufe im Fall-Abschnitt. */
.karte__tat{min-height:44px;display:flex;align-items:center}
/* --- Kennzahlen: zwei Spalten, aber mit Luft dazwischen ---------------
Zwei der vier Beschriftungen brechen auf 375 px in die zweite Zeile.
Die Kacheln sind dadurch gleich hoch — das passt —, aber die Zeilen
standen zu dicht beieinander, um als zwei Reihen gelesen zu werden. */
.zahlen{gap:26px 16px}
/* --- Die Augenbraue über dem Aufmacher --------------------------------
Drei Zeilen Versalsatz sind auf einem Telefon eine Wand. Etwas
kleiner und enger gesperrt bleibt sie lesbar und nimmt zwei Zeilen. */
.hero .marke,.hero__marke{font-size:11.5px;letter-spacing:.09em;
line-height:1.5}
/* --- Bedienbarkeit allgemein -----------------------------------------
Alles, was man antippt, bekommt mindestens 44 px Höhe. Ausgenommen
sind Verweise MITTEN im Fließtext — die darf man nicht aufblasen,
ohne den Absatz zu zerreißen, und dafür gibt es in WCAG 2.5.8
ausdrücklich eine Ausnahme. */
.tat,.btn,.weiter,.kopf .tat{min-height:48px}
.fuss a:not(.tat){display:inline-block;padding:6px 0}
}
/* --- Sicherer Bereich auf iPhones ----------------------------------------
Hier hielt der Seitenkörper 80 px Abstand nach unten frei — Platz für
die feste Handlungsleiste. Die Leiste ist am 12.09.2026 entfallen, der
Abstand blieb zunächst stehen: ein leerer Streifen am Seitenende, also
genau die Fläche, wegen der die Leiste weichen sollte. Wer eine feste
Leiste entfernt, entfernt IMMER auch den Abstand, den sie brauchte.
Der Sicherheitsabstand für die Home-Leiste des iPhone bleibt: dort
wohnt die Wischgeste des Betriebssystems, und ein Knopf darin wird zur
Hälfte nicht getroffen, sondern schließt die Seite. Auf allen anderen
Geräten ist `env(safe-area-inset-bottom)` null. */
body{padding-bottom:env(safe-area-inset-bottom,0px)}
/* --- Mengen je Zielgruppe ------------------------------------------------
Erster Versuch am 12.09.2026: die Zahl in die vorhandenen Chips
gesetzt. Das Ergebnis war „Architekturbüros19.633" — die Chips sind
eng gesetzt, und eine Zahl, die sich an ein Wort klebt, liest sich
wie ein Tippfehler.
Der Grund war nicht der Abstand, sondern die Form: Ein Chip ist eine
MARKE, er trägt ein Wort. Was hier steht, ist eine Datenübersicht —
Zielgruppe und Menge, dreizehnmal untereinander. Dafür ist die Zeile
die richtige Form, nicht die Kachel.
Namen links, Zahlen rechtsbündig und untereinander: „28.191
Zahnarztpraxen gegen 15.675 Apotheken" ist genau die Frage, die ein
Kunde hier hat, und sie beantwortet sich nur, wenn die Ziffern in
einer Spalte stehen. Haarlinien statt Rahmen — das Designsystem
trennt mit Linien.
Die Chipform muss dabei ausdrücklich zurückgenommen werden: Rahmen,
Rundung und Innenabstand stehen weiter oben in der Datei und gelten
sonst fort. */
.merkmale{display:block;margin-top:16px;padding:0;list-style:none}
.sparte .merkmal,.merkmale > .merkmal{
display:flex;align-items:baseline;gap:14px;
border:0;border-bottom:1px solid var(--linie-weich);border-radius:0;
padding:9px 0;font-size:15px;font-weight:600;color:var(--ink-lesbar)}
.merkmale > .merkmal:last-child{border-bottom:0}
.merkmal__n{margin-left:auto;font-weight:800;color:var(--ink);
font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;
font-feature-settings:"tnum" 1,"lnum" 1}
/* Merkmale OHNE Zahl bleiben Chips — sie stehen an anderen Stellen der
Seite („eigenes Postfach", „fester Takt") und sind dort wirklich
Marken. Getrennt wird am Vorhandensein der Zahl, nicht am Ort. */
.merkmale:not(:has(.merkmal__n)){display:flex;flex-wrap:wrap;gap:8px}
.merkmale:not(:has(.merkmal__n)) > .merkmal{
display:inline-block;border:1px solid var(--kb-200);
border-radius:var(--rund-voll);padding:5px 10px;font-size:12px;
color:var(--kb-700)}
.sparte__summe{margin-top:14px;padding-top:12px;
border-top:1px solid var(--linie);font-size:15px;color:var(--ink-70)}
.sparte__summe b{color:var(--ink);font-weight:800;
font-variant-numeric:tabular-nums}
/* ==========================================================================
AUFMACHER AUF DEM TELEFON — RUHIGER, WENIGER
--------------------------------------------------------------------------
Andreas, 12.09.2026: „das titelbild ist nicht sauber" und „das sieht
alles so überladen aus."
Beides hat dieselbe Ursache: zu viel auf einmal.
========================================================================== */
@media(max-width:700px){
/* --- Das Bild ---------------------------------------------------------
Die Abdunklung lief von 93 % oben auf 52 % unten. Auf dem Schreibtisch
ist dieser Verlauf richtig — er läuft nach RECHTS auf und gibt dort
den blauen Stuhl frei. Auf dem Telefon gibt es kein Rechts; der
Verlauf läuft dort nach unten und gibt eine Stelle frei, an der kein
Motiv steht, sondern nur ein unscharfer Raum. Das Ergebnis ist keine
Tiefe, sondern Schmutz.
Stattdessen eine ruhige, fast gleichmäßige Decke, die nach unten
leicht ZUNIMMT statt abzunehmen: Das Bild bleibt als Textur lesbar,
der Text steht überall gleich sicher, und die Knöpfe sitzen auf dem
dunkelsten Teil. */
.hero__dunkel{background:linear-gradient(180deg,
rgba(8,12,24,.86) 0%, rgba(8,12,24,.84) 42%,
rgba(8,12,24,.88) 74%, rgba(8,12,24,.93) 100%)}
.hero__bild{background-position:52% 48%}
/* --- Die Augenbraue ---------------------------------------------------
„B2B-LEADS + COLD MAILING · HANDWERK & GEBÄUDEREINIGUNG ·
DEUTSCHLANDWEIT" — zwei dichte Versalzeilen über einer Schlagzeile,
die dasselbe in ganzen Sätzen sagt, und einem Untertitel, der es zum
dritten Mal sagt.
Auf dem Schreibtisch steht sie in einer Zeile und ordnet ein. Auf dem
Telefon ist sie eine Wand vor dem ersten Satz. Sie ist die eine
Sache, die hier weggehört — der Inhalt geht nicht verloren, er steht
zweimal darunter.
Nicht `display:none`: Für Vorleseprogramme und Suchmaschinen bleibt
sie im Dokument. */
/* Die Klasse heisst `.datum`, nicht `.marke` — mein erster Versuch am
12.09.2026 zielte auf `.marke` und traf nichts. Gemessen im Browser,
nicht im Quelltext geraten. */
.hero .datum{position:absolute;width:1px;height:1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* --- Die zweite Schaltfläche ------------------------------------------
„Zugang anlegen" und „Anmelden" standen gleich groß und gleich
breit untereinander. Zwei gleich schwere Aufrufe sind keine Wahl,
sondern eine Gabelung — und der Kunde, für den die Seite gebaut ist,
hat noch keinen Zugang. Der zweite bleibt bedienbar (48 px), tritt
aber zurück. */
.hero .tat:not(.tat--haupt){background:transparent;
border-color:rgba(255,255,255,.34);font-weight:600}
}
/* ==========================================================================
DER RECHNER IM AUFMACHER — 12.09.2026
--------------------------------------------------------------------------
Sparte anklicken, Gebiet anklicken, Zahl sehen. Ohne eine Zeile
JavaScript: Alle 51 Zahlen stehen in der Seite, CSS zeigt genau die
eine, die zu den beiden gewählten Feldern gehört.
Warum das hier steht, wo vorher ein Foto war: Wer seine eigene Zahl
gesehen hat, meldet sich anders an als jemand, der eine Broschüre
gelesen hat. Das Foto war das austauschbarste Element der Seite.
========================================================================== */
.hero{background:#0d1220;position:relative;overflow:hidden}
.hero__in{padding:clamp(52px,7vw,92px) 0 clamp(44px,6vw,72px)}
/* ==========================================================================
KAUFBEREICH (12.09.2026)
Eine Karte, mittig, in dieser Reihenfolge: Preis — Takt — vier Zeilen,
was drin ist — Knopf — Kleingedrucktes. Vorher standen hier zwei
Spalten mit Tabelle und langer Liste; das war ein Datenblatt.
========================================================================== */
.kauf{max-width:560px;margin:0 auto;text-align:center;
border:1px solid var(--linie);border-radius:24px;
padding:clamp(26px,4vw,40px) clamp(20px,3.4vw,36px);
background:#fff}
.kauf .marke{margin:0 0 10px}
.kauf .preis__tag{margin:0}
.kauf__takt{margin:10px 0 0;color:var(--ink-70);font-size:14px;line-height:1.6}
.kauf__liste{list-style:none;margin:24px 0 0;padding:0;text-align:left;
display:inline-block}
.kauf__liste li{position:relative;padding:9px 0 9px 26px;font-size:15px;
line-height:1.55;border-top:1px solid var(--linie)}
.kauf__liste li:first-child{border-top:0}
.kauf__liste li::before{content:"";position:absolute;left:4px;top:16px;
width:8px;height:8px;border-radius:2px;background:var(--kb)}
.kauf .aktionen{margin-top:26px;justify-content:center}
.kauf .btn{min-width:240px}
.kauf__klein{margin:16px 0 0;color:var(--ink-70);font-size:13px;line-height:1.65}
@media(max-width:700px){
.kauf{border-radius:18px;padding:24px 18px}
.kauf .btn{width:100%;min-width:0}
.kauf__liste{display:block}
}
/* Deutschland im Hintergrund des Aufmachers.
Als Hintergrundbild einer eigenen Ebene, nicht im Quelltext der Seite:
die 19 kB Pfade würden sonst bei JEDEM Aufruf mitgeladen (HTML wird mit
`no-cache` ausgeliefert), so liegen sie nach dem ersten Mal im
Zwischenspeicher.
Die Ränder laufen weich aus (`mask-image`) — eine Karte mit harter Kante
sähe aus wie ein eingeklebtes Bild. Die Beschriftung bleibt lesbar, weil
die Linien nur bei rund 20 % Deckkraft ankommen. */
/* Der Aufmacher bekommt Höhe, damit Deutschland GANZ hineinpasst. Ohne
die Mindesthöhe schnitt der nächste Abschnitt die Karte auf halber
Höhe ab — dann sieht man kein Land, sondern einen Rest. */
.hero{min-height:min(78vh,720px);display:flex;align-items:center}
.hero .hero__in{width:100%}
.hero__karte{position:absolute;z-index:0;top:0;left:50%;
transform:translateX(-50%);
height:min(660px,78vh);aspect-ratio:1660/1800;pointer-events:none;
background:url(/img/karte-europa.svg) center/contain no-repeat;opacity:.5;
-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 46%,#000 58%,transparent 100%);
mask-image:radial-gradient(ellipse 70% 62% at 50% 46%,#000 58%,transparent 100%)}
.hero__txt{max-width:860px;margin-inline:auto;text-align:center}
.hero h1{max-width:20ch;margin-inline:auto}
.hero .hero__lead{max-width:56ch;margin-inline:auto}
.hero__hin{margin:10px 0 0;color:#8fa0bd;font-size:15px}
/* ==========================================================================
DER TRICHTER (12.09.2026)
Geschlossen: eine Überschrift und ein Knopf. Ein Klick öffnet drei
Bänder — jedes schmaler als das vorige, dazwischen ein Flusspfeil.
Unten die engste Öffnung: ein Knopf, der die gewählte Sparte in die
Registrierung mitnimmt.
Die Form ist die Botschaft: Wer die Bänder sieht, sieht einen Trichter,
ohne dass irgendwo einer gezeichnet wäre. Geschaltet wird ohne Skript —
ein Kontrollfeld, drei Auswahlfelder, `:has()`. Siehe content.trichter().
========================================================================== */
/* Die Felder selbst sind unsichtbar — bedient wird über die Beschriftung.
Nicht `display:none`: Ein so verstecktes Feld ist für Tastatur und
Vorleseprogramm nicht mehr erreichbar. */
.r-v{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.trichter{margin:clamp(26px,3.6vw,40px) auto 0;max-width:900px;
display:flex;flex-direction:column;align-items:center}
.t-stufe{width:100%;text-align:center;
border:1px solid rgba(255,255,255,.12);border-radius:22px;
background:rgba(255,255,255,.028);
padding:clamp(18px,2.2vw,24px) clamp(18px,2.6vw,30px)}
/* Gleiche Breite (Andreas, 12.09.2026). Vorher liefen die Bänder
100 % → 86 % → 70 % und zeichneten damit die Trichterform. Die
Richtung tragen jetzt allein die Nummern und die Flusspfeile; die
Stufen stehen bündig untereinander. Der leichte Helligkeitsverlauf
bleibt — er führt das Auge nach unten, ohne die Kante zu verziehen. */
.t-stufe--2{background:rgba(255,255,255,.05)}
.t-stufe--3{background:rgba(255,255,255,.07);
border-color:rgba(126,166,255,.40)}
/* Der Flusspfeil zwischen den Bändern: eine Linie, die in eine Spitze
läuft. Er trägt die Richtung — ohne ihn wären es drei Kästen. */
.t-fluss{width:1px;height:26px;position:relative;
background:linear-gradient(to bottom,rgba(255,255,255,.10),
rgba(126,166,255,.55))}
.t-fluss::after{content:"";position:absolute;left:50%;bottom:-1px;
transform:translateX(-50%);border-left:5px solid transparent;
border-right:5px solid transparent;border-top:6px solid rgba(126,166,255,.7)}
.t-frage{display:flex;align-items:center;justify-content:center;gap:9px;
color:#93a1bd;font-size:12px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;margin:0 0 14px}
.t-frage i{font-style:normal;display:inline-flex;align-items:center;
justify-content:center;width:23px;height:23px;
border:1px solid rgba(255,255,255,.26);border-radius:var(--rund-voll);
font-size:10.5px;letter-spacing:.02em;color:#b9c4d8;
font-variant-numeric:tabular-nums;flex:none}
/* Stufe 3 ist das Ziel — sie trägt als einzige Farbe. */
.t-stufe--3 .t-frage i{background:var(--kb);border-color:var(--kb);color:#fff}
.r-reihe{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.r-knopf{display:inline-flex;align-items:center;min-height:46px;
padding:11px 20px;border:1px solid rgba(255,255,255,.22);
border-radius:var(--rund-voll);color:#dbe3f2;font-weight:700;
font-size:15px;cursor:pointer;user-select:none;
transition:border-color .14s,background .14s,color .14s}
.r-knopf:hover{border-color:rgba(255,255,255,.5);color:#fff}
.r-v:checked + .r-knopf{background:var(--kb);border-color:var(--kb);color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* Tastaturbedienung muss sichtbar bleiben, obwohl das Feld unsichtbar ist. */
.r-v:focus-visible + .r-knopf,.r-v:focus-visible + .t-start .btn{
outline:2px solid #fff;outline-offset:2px}
.t-summe{margin:0 0 16px;color:#c6d0e2;font-size:16px}
/* Der Satz unter der Liste erklaert, warum die Summe oben kleiner ist
als die Summe der Zeilen. Leise gesetzt — er beantwortet eine Frage,
er stellt keine. */
.t-hinweis{margin:14px 0 0;color:#8d9bb4;font-size:13px;line-height:1.5}
.t-summe b{display:block;color:#fff;font-weight:800;
font-size:clamp(36px,5.6vw,58px);letter-spacing:-.03em;line-height:1.02;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* Die Zielgruppen als Datenliste, nicht als Textblock: die Zahl zuerst,
damit die Spalte der Zahlen von oben nach unten lesbar bleibt.
minmax(0,1fr) statt einer festen Mindestbreite — „Heizungs- und
Sanitärbetriebe“ hat eine große Mindestbreite und sprengt sonst das
Raster auf schmalen Geräten. */
.t-kunden{grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
gap:4px 22px;text-align:left;
border-top:1px solid rgba(255,255,255,.10);padding-top:16px}
.t-zeile{display:flex;gap:8px;align-items:baseline;min-width:0;
color:#9fabc4;font-size:14.5px;line-height:1.85}
.t-zeile b{color:#dfe6f4;font-weight:700;font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;flex:none;min-width:4.4em;text-align:right}
.t-preis{margin:14px 0 0;color:#93a1bd;font-size:14px}
@media(max-width:700px){
.trichter{margin-top:26px}
.t-stufe{border-radius:18px;padding:16px 14px}
.t-summe b{font-size:clamp(32px,9vw,44px)}
.r-reihe{gap:7px}
.r-knopf{min-height:44px;padding:10px 16px;font-size:14.5px}
.t-kunden{grid-template-columns:1fr;gap:2px}
.t-tat,.t-start .btn{width:100%;justify-content:center}
}
/* ==========================================================================
BEWEGUNG (12.09.2026)
Ohne eine Zeile JavaScript. Drei Mittel, mehr nicht:
1. Einblend-Folge beim Laden — `animation-delay`, gestaffelt.
2. Scroll-Enthüllung — `animation-timeline: view()`, die CSS-eigene
Scroll-Animation. Keine Bibliothek, kein Beobachter, kein Ruckeln.
3. Der Trichter entfaltet sich — eine Animation startet neu, sobald
ein Element aus `display:none` sichtbar wird.
WICHTIG, und der Grund für die @supports-Klammer: Eine Enthüllung, die
mit `opacity:0` beginnt, versteckt den halben Text, wenn die Technik
fehlt. Deshalb steht JEDE Regel, die etwas unsichtbar macht, hinter
`@supports (animation-timeline: view())`. Wo das fehlt (heute Firefox),
ist die Seite vollständig sichtbar — nur eben still.
Und alles verstummt bei `prefers-reduced-motion: reduce`. Das ist keine
Höflichkeit: Für Menschen mit vestibulären Störungen ist Bewegung auf
einer Seite ein körperliches Problem.
========================================================================== */
@keyframes heben {
from { opacity: 0; transform: translateY(16px) }
to { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: no-preference) {
/* --- 1. Der Aufmacher baut sich auf ------------------------------------
Reihenfolge: Karte, Überschrift, Zeile, Zusatz, Knopf. Der Knopf kommt
zuletzt — er soll das Letzte sein, was sich bewegt, und damit das
Erste, worauf das Auge liegen bleibt. */
.hero__karte,
.hero h1,
.hero__lead,
.hero__hin,
.hero .t-start {
animation: heben .62s cubic-bezier(.16,.84,.44,1) backwards;
}
.hero__karte { animation-duration: 1.1s; animation-delay: .02s }
.hero h1 { animation-delay: .10s }
.hero__lead { animation-delay: .18s }
.hero__hin { animation-delay: .24s }
.hero .t-start { animation-delay: .32s }
/* --- 3. Der Trichter entfaltet sich ------------------------------------
Beim Öffnen wechseln die Bänder von `display:none` auf sichtbar; die
Animation läuft dann von selbst los. Gestaffelt, damit man dem Weg
nach unten folgt statt drei Kästen auf einmal zu sehen. */
.trichter .t-stufe,
.trichter .t-fluss {
animation: heben .5s cubic-bezier(.16,.84,.44,1) backwards;
}
.t-stufe--1 { animation-delay: .00s }
.trichter .t-fluss:nth-of-type(1) { animation-delay: .07s }
.t-stufe--2 { animation-delay: .12s }
.trichter .t-fluss:nth-of-type(2) { animation-delay: .19s }
.t-stufe--3 { animation-delay: .24s }
/* --- 2. Scroll-Enthüllung ---------------------------------------------
Nur dort, wo der Browser es kann. `view()` misst den Fortschritt des
Elements durch das Fenster; die Animation läuft einmal, zwischen
„unterer Rand erreicht" und „20 % hereingeschoben". */
@supports (animation-timeline: view()) {
.sec-hd,
.zeile,
.karte,
.sparte,
.produkt,
.kauf,
.weiter,
.faq details,
.band h2,
.band__lead {
animation: heben .8s cubic-bezier(.16,.84,.44,1) both;
animation-timeline: view();
animation-range: entry 0% entry 34%;
}
/* Die Zeilen einer Liste laufen nacheinander durch — dieselbe
Bewegung, nur jede ein Stück später im eigenen Sichtfenster. */
.zeile:nth-child(2n) { animation-range: entry 2% entry 36% }
.zeile:nth-child(3n) { animation-range: entry 4% entry 38% }
}
/* --- Kleine Reaktionen -------------------------------------------------
Kein Zierrat: Jede sagt „das hier kannst du anfassen". */
.karte, .kauf, .zeile, .t-stufe { transition: transform .22s ease, border-color .22s ease }
.karte:hover { transform: translateY(-3px) }
.r-knopf { transition: transform .16s ease, border-color .14s, background .14s, color .14s }
.r-knopf:hover { transform: translateY(-1px) }
.btn { transition: transform .16s ease, background .16s, color .16s, border-color .16s }
.btn:hover { transform: translateY(-2px) }
.btn:active { transform: translateY(0) }
.weiter:hover { transform: translateX(3px); transition: transform .2s ease }
}
/* ==========================================================================
VEREDELUNG II — „Die Kartei“ (12.09.2026)
Die Seite verkauft ein Verzeichnis. Also soll sie aussehen wie ein
sorgfältig gesetztes Verzeichnis und nicht wie ein Baukasten:
· EIN durchgehender heller Grund, gegliedert durch Haarlinien —
keine abwechselnd hellen und dunklen Bänder. Dunkel bleibt dem
Aufmacher und dem Abschluss vorbehalten, sonst nichts.
· Die Nummer wandert in die Bundsteg-Spalte und wird gross und
leicht. Sie ordnet, sie schreit nicht.
· Ziffern überall tabellarisch. In einer Liste aus Zahlen ist eine
Proportionalziffer ein Satzfehler.
Die Karten-Optik der Zeilenliste ist damit weg: Rahmen plus Fläche plus
Rundung plus Schatten sind vier Mittel für eine Aufgabe, die eine
Haarlinie allein besser löst.
========================================================================== */
/* --- Ziffern ------------------------------------------------------------- */
.zeile__nr, .sparte__summe, .t-summe, .t-zeile b, .preis__tag,
.kauf__liste, .merkmal__n, .rechnung {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* --- Zeilenliste: Linien statt Kärtchen ---------------------------------- */
.zeilen { margin-top: clamp(40px,5vw,64px); border-top: 1px solid var(--ink) }
.zeile {
border: 0; border-bottom: 1px solid var(--linie);
background: transparent; border-radius: 0;
padding-inline: 0; padding-block: clamp(26px,3vw,38px);
align-items: start;
}
.zeile:last-child { border-bottom: 0 }
/* `.zeile .zeile__nr`, nicht `.zeile__nr`: Die Nummer ist ein
, und
weiter oben steht `.zeile p{font-size:…}`. Klasse+Element (0,1,1)
schlaegt Klasse (0,1,0) — die Nummer bekam die Fliesstextgroesse und
NUR die Eigenschaften, die `.zeile p` nicht nennt. Solche Treffer sind
heimtueckisch, weil ein Teil der Regel wirkt und der Rest nicht. */
.zeile .zeile__nr {
font-size: clamp(26px,2.6vw,34px); font-weight: 300; letter-spacing: -.02em;
text-transform: none; line-height: 1; padding-top: 2px; margin: 0;
color: var(--linie-stark);
}
.zeile--letzte .zeile__nr, .zeile:hover .zeile__nr { color: var(--kb) }
.zeile h3 { letter-spacing: -.012em }
/* --- Abschnitte: die Gliederung ist die Linie ---------------------------- */
.sec { border-bottom: 0; padding-block: clamp(64px,8vw,116px) }
.sec + .sec { border-top: 1px solid var(--linie) }
.sec-hd h2 { letter-spacing: -.022em; font-size: clamp(26px,3vw,40px) }
.sec-hd p { max-width: 54ch }
/* --- Sparten: Luft statt Rahmen ------------------------------------------ */
.sparte { padding-block: clamp(44px,5.5vw,76px) }
.sparte h3 { letter-spacing: -.018em }
.sparte__summe { font-size: 15px }
/* --- Der Kaufbereich trägt als einziger eine Fläche ---------------------- */
.kauf { box-shadow: 0 1px 2px rgba(15,21,36,.04), 0 12px 32px -12px rgba(15,21,36,.10) }
@media (max-width: 860px) {
/* Auf dem Telefon steht die Nummer ÜBER der Zeile, nicht daneben —
172 px Bundsteg sind dort die Hälfte des Bildschirms. */
.zeile { grid-template-columns: 1fr; gap: 10px }
.zeile .zeile__nr { font-size: 22px }
}
/* ==========================================================================
BILDBLÖCKE (12.09.2026)
Aufbau nach dem Vorbild, das Andreas genannt hat: je Block EIN grosses
Bild, eine Nummer, ein kurzer Titel, zwei Zeilen. Die Bloecke wechseln
die Seite, damit das Auge einen Rhythmus bekommt.
========================================================================== */
.teile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(22px,3vw,44px);margin-top:clamp(36px,4.5vw,60px)}
.teil{display:flex;flex-direction:column;gap:20px}
.teil__nr{margin:0 0 10px;font-size:clamp(22px,2vw,28px);font-weight:300;
line-height:1;letter-spacing:-.02em;color:var(--linie-stark);
font-variant-numeric:tabular-nums}
.teil h3{font-size:clamp(19px,1.9vw,24px);line-height:1.16;margin:0 0 12px;
letter-spacing:-.02em}
.teil p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-70)}
.teil__bild{margin:0;background:var(--kb-100);border-radius:var(--rund-l);
padding:clamp(16px,2vw,26px)}
.teil__bild img{width:100%;height:auto}
/* Freigestellte Menschen: kein Rahmen, kein Zuschnitt — sie stehen auf der
Flaeche. Deshalb unten buendig und ohne Rundung am Bild selbst. */
/* Kein `overflow:hidden`, keine Mindesthöhe, kein `object-fit:cover`.
Genau die drei haben am 12.09.2026 den beiden Bauleuten die Köpfe
abgeschnitten: Das Bild war höher als der Kasten, unten bündig
ausgerichtet — abgeschnitten wurde also oben, wo die Gesichter sind.
Ein freigestelltes Bild darf NIE beschnitten werden; es hat keinen
Hintergrund, den man opfern könnte. */
.sparte__foto{margin:0;background:var(--kb-100);border-radius:var(--rund-l);
display:flex;align-items:flex-end;justify-content:center;
padding:clamp(16px,2vw,26px) clamp(14px,2vw,26px) 0}
/* Das ganze Bild im Kasten — fuer Aufnahmen ohne Freisteller. */
.sparte__foto--voll{padding:0;align-items:stretch}
.sparte__foto--voll img{width:100%;height:auto;max-height:none;
border-radius:var(--rund-l);filter:grayscale(1) contrast(1.06)}
.sparte__foto img{width:auto;height:auto;max-width:100%;
max-height:clamp(220px,26vw,340px);object-fit:contain;
border-radius:0;filter:none}
@media(max-width:1000px){
/* Zwei Spalten, der dritte Block laeuft ueber die volle Breite —
besser als drei Spalten, die zu schmal fuer „Abmeldung" werden. */
.teile{grid-template-columns:repeat(2,minmax(0,1fr))}
.teile > .teil:last-child{grid-column:1 / -1}
}
@media(max-width:700px){
.teile{grid-template-columns:1fr}
.teile > .teil:last-child{grid-column:auto}
.sparte__foto{min-height:0}
}
/* ==========================================================================
DIE VIER FÄLLE — Karte anklicken, Text klappt auf (12.09.2026)
========================================================================== */
.faelle{margin-top:clamp(28px,3.5vw,44px)}
.karte{cursor:pointer;user-select:none}
.sparte.fall{padding-block:clamp(28px,3.5vw,48px);border-bottom:0;
border-top:1px solid var(--linie);margin-top:clamp(24px,3vw,40px);
grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
/* Ohne `:has()` ist alles offen — dann darf der obere Abstand nicht
viermal zuschlagen. */
@supports not selector(:has(*)){
.sparte.fall{margin-top:0}
}
/* --- Proportionen des Kaufbereichs ---------------------------------------
Er war 560 px breit und dabei doppelt so hoch — „unproportional“ trifft
es. Breiter, enger gesetzt, weniger Luft unten. */
.kauf{max-width:680px;padding:clamp(24px,3vw,34px) clamp(22px,3vw,40px)}
.kauf__liste{margin-top:20px}
.kauf__liste li{padding:7px 0 7px 24px;font-size:14.5px}
.kauf .aktionen{margin-top:22px}
.kauf__klein{margin-top:14px}
/* --- Höhe der ganzen Seite -----------------------------------------------
Andreas: „verkleinere die webseite von der höhe“. Die Abstände waren
für eine Seite mit langen Texten gesetzt; die Texte sind seither
deutlich kürzer, die Abstände waren es nicht. */
.sec{padding-block:clamp(48px,5.5vw,84px)}
.hero{min-height:min(70vh,620px)}
.zeile{padding-block:clamp(20px,2.2vw,28px)}
.zeilen{margin-top:clamp(28px,3.5vw,44px)}
.teile{margin-top:clamp(28px,3.5vw,44px)}
.sec-hd p{margin-top:14px}
@media(max-width:860px){
.sparte.fall{grid-template-columns:1fr;gap:20px}
}
/* Vier Fälle, vier Spalten. Bei drei Spalten stand der vierte allein in
einer zweiten Reihe — eine Waise, die aussieht wie ein Fehler. */
.wahl{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
margin-top:clamp(24px,3vw,36px)}
.karte{padding:20px 18px}
.karte__h{font-size:17px;line-height:1.2}
.karte__ziel{font-size:13.5px;line-height:1.5}
@media(max-width:1000px){.wahl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.wahl{grid-template-columns:1fr}}
/* ==========================================================================
DATENFLUSS im Aufmacher (12.09.2026)
Statt eines Hintergrundfilms: gezeichnete Leitungen zwischen zehn
Knoten, die auf derselben Projektion liegen wie die Karte dahinter.
Bewegt wird ein Strichmuster — das sieht aus wie ein Paket, das die
Leitung entlangläuft, und wiegt null Byte.
========================================================================== */
/* Eigene Ebene, gleiche Geometrie wie die Karte — nur mit einer viel
schwächeren Maske, damit die Leitungen sichtbar bleiben. */
.hero__fluss{position:absolute;z-index:1;top:0;left:50%;
transform:translateX(-50%);height:min(660px,78vh);
aspect-ratio:1660/1800;pointer-events:none;
-webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 46%,#000 70%,transparent 100%);
mask-image:radial-gradient(ellipse 78% 70% at 50% 46%,#000 70%,transparent 100%)}
.datenfluss{position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;overflow:visible}
.df-basis{stroke:#8fb0e2;stroke-width:1.6;fill:none;stroke-opacity:.22}
.df-leitung{stroke:#a8c4ff;stroke-width:3.4;fill:none;stroke-opacity:0;
stroke-linecap:round}
.df-knoten{fill:#9dbcea;fill-opacity:.45}
@media (prefers-reduced-motion: no-preference){
/* Die Leitung selbst bleibt blass stehen; darüber wandert ein kurzes
helles Stück. Ein Strichmuster aus „8 sichtbar, 260 unsichtbar“
ergibt genau ein Paket je Leitung. */
.df-leitung{stroke-dasharray:26 300;stroke-opacity:1;
animation:df-lauf 5.2s linear infinite}
.df-s0{animation-duration:0.85s;animation-delay:-0.00s}
.df-s1{animation-duration:0.96s;animation-delay:-0.22s}
.df-s2{animation-duration:1.07s;animation-delay:-0.43s}
.df-s3{animation-duration:1.18s;animation-delay:-0.65s}
.df-s4{animation-duration:1.29s;animation-delay:-0.87s}
.df-s5{animation-duration:1.40s;animation-delay:-1.09s}
.df-s6{animation-duration:1.51s;animation-delay:-1.30s}
.df-s7{animation-duration:1.62s;animation-delay:-1.52s}
.df-s8{animation-duration:1.73s;animation-delay:-1.74s}
.df-s9{animation-duration:1.84s;animation-delay:-1.95s}
.df-s10{animation-duration:1.95s;animation-delay:-0.17s}
.df-s11{animation-duration:2.06s;animation-delay:-0.39s}
.df-knoten{animation:df-puls 2.4s ease-in-out infinite}
.df-p0{animation-delay:-0.00s}
.df-p1{animation-delay:-0.45s}
.df-p2{animation-delay:-0.90s}
.df-p3{animation-delay:-1.35s}
.df-p4{animation-delay:-1.80s}
.df-p5{animation-delay:-2.25s}
.df-p6{animation-delay:-2.70s}
.df-p7{animation-delay:-3.15s}
}
@keyframes df-lauf{
from{stroke-dashoffset:310}
to{stroke-dashoffset:0}
}
@keyframes df-puls{
0%,100%{fill-opacity:.22;r:6}
50%{fill-opacity:.7;r:8}
}
/* Der Kaufbereich saß direkt unter der Überschrift — der Kasten begann
auf halber Höhe der Zeile „Ein Beitrag, keine Zusatzkosten". Ein
Abschnittskopf braucht Luft nach unten, sonst liest sich die
Überschrift wie eine Beschriftung des Kastens. */
.kauf{margin:clamp(30px,4vw,52px) auto 0}
/* ==========================================================================
DAS INTERAKTIVE: schneller, runder (12.09.2026)
Andreas: „das interaktive soll schnelle rund hochmoderner aussehen“.
Schneller heisst hier nicht „kuerzere Animation“ allein, sondern: Die
Antwort auf einen Klick muss VOR der Bewegung da sein. Der Trichter
brauchte bis zum dritten Band 740 ms (500 ms Dauer + 240 ms Versatz) —
das ist eine Dreiviertelsekunde, in der man wartet. Jetzt sind es 300.
Die Kurve ist eine leichte Ueberschwing-Kurve: Das Band kommt an,
federt minimal nach und steht. Das liest sich als „schnell und
praezise“, waehrend ein lineares Auslaufen traege wirkt.
========================================================================== */
/* --- Runder ---------------------------------------------------------------
Nur die Flaechen, die man anfasst. Der Rest der Seite bleibt ruhig —
runde Ecken ueberall waeren Zuckerguss. */
.t-stufe{border-radius:28px}
.karte{border-radius:22px}
.teil__bild,.sparte__foto,.sparte__karte{border-radius:26px}
.kauf{border-radius:28px}
/* --- Schneller ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
.trichter .t-stufe,.trichter .t-fluss{
animation-duration:.26s;
animation-timing-function:cubic-bezier(.22,1.2,.36,1)}
.t-stufe--1{animation-delay:0s}
.trichter .t-fluss:nth-of-type(1){animation-delay:.03s}
.t-stufe--2{animation-delay:.06s}
.trichter .t-fluss:nth-of-type(2){animation-delay:.09s}
.t-stufe--3{animation-delay:.12s}
.fall{animation:heben .26s cubic-bezier(.22,1.2,.36,1) backwards}
/* Anfassen: kurz, spuerbar, ohne Nachlauf. */
.karte,.r-knopf,.btn,.t-stufe{
transition:transform .13s cubic-bezier(.2,.8,.2,1),
border-color .13s, background .13s, box-shadow .13s, color .13s}
.karte:hover{transform:translateY(-2px);
box-shadow:0 1px 2px rgba(15,21,36,.05),0 14px 28px -14px rgba(15,21,36,.22)}
.karte:active,.btn:active,.r-knopf:active{transform:scale(.985)}
.btn:hover{transform:translateY(-1px);
box-shadow:0 8px 20px -8px rgba(15,82,186,.55)}
}
/* --- Hochmodern: der gewaehlte Zustand traegt einen Ring -------------------
Eine Umrandung allein verschiebt nichts im Layout, ein Ring aus
`box-shadow` auch nicht — deshalb springt beim Waehlen nichts. */
.r-v:checked + .r-knopf{box-shadow:0 0 0 4px rgba(15,82,186,.22),
inset 0 1px 0 rgba(255,255,255,.22)}
.faelle:has(#fall-handwerk:checked) .k-handwerk,
.faelle:has(#fall-reinigung:checked) .k-reinigung,
.faelle:has(#fall-subunternehmer:checked) .k-subunternehmer,
.faelle:has(#fall-auftraggeber:checked) .k-auftraggeber{
box-shadow:0 0 0 4px rgba(15,82,186,.16)}
/* Tastatur: der Ring muss sichtbar sein, auch wenn das Feld es nicht ist. */
.r-v:focus-visible + .r-knopf,.r-v:focus-visible + .t-start .btn{
outline:2px solid #fff;outline-offset:3px}
.faelle .r-v:focus-visible + .wahl .karte:first-child{outline:2px solid var(--kb)}
/* ==========================================================================
GOLDENER SCHNITT — ein Maß für die ganze Seite (12.09.2026)
Gemessen VOR diesem Block, an der laufenden Seite:
Innenabstände 56,3 · 35,8 · 30,7 · 22,5 · 20,5 · 20 px
Zwischenräume 41 · 32 · 30,7 · 14 · 8 px
Radien 28 · 26 · 22 · 14 · 0 px
Schriftgrade 47,1 · 30,7 · 21,5 · 19,5 · 16 px
Sechs Innenabstände, fünf Zwischenräume, fünf Radien — keiner davon
stand zu einem anderen in einem Verhältnis. So entsteht der Eindruck
„irgendwie unruhig“, den man nicht an einer einzelnen Stelle festmachen
kann.
Jetzt EINE Reihe, in der jeder Schritt rund das 1,618-fache des
vorigen ist (Fibonacci — sie strebt gegen den Goldenen Schnitt und
besteht aus ganzen Zahlen):
8 · 13 · 21 · 34 · 55 · 89 · 144
Für den Fließtext gilt der Schnitt NICHT als Sprung: 16 px auf 26 px
wäre keine Textgröße mehr. Er regiert die Anzeigegrade (26 → 42 → 68)
und die Zeilenhöhe: 16 × 1,618 = 25,9 px, also line-height 1,62.
========================================================================== */
:root{
--gr1:8px; --gr2:13px; --gr3:21px; --gr4:34px;
--gr5:55px; --gr6:89px; --gr7:144px;
}
/* --- Abschnitte ----------------------------------------------------------- */
.sec,.band{padding-block:clamp(var(--gr5),7vw,var(--gr6))}
.sec-hd{gap:var(--gr4)}
.sec-hd p{margin-top:var(--gr2);max-width:54ch}
.teile,.zeilen,.faelle{margin-top:var(--gr4)}
.kauf{margin:var(--gr5) auto 0;padding:var(--gr4) var(--gr4)}
/* --- Bausteine ------------------------------------------------------------ */
.teile{gap:var(--gr3)}
.teil{gap:var(--gr3)}
.teil__bild{padding:var(--gr3)}
.wahl{gap:var(--gr2);margin-top:var(--gr4)}
.karte{padding:var(--gr3)}
.sparte.fall{padding-block:var(--gr4);gap:var(--gr5);margin-top:var(--gr4)}
.sparte__foto{padding:var(--gr3) var(--gr3) 0}
.sparte__foto--voll{padding:0}
.zeile{padding-block:var(--gr3);gap:var(--gr4)}
.t-stufe{padding:var(--gr3) var(--gr4)}
.trichter{gap:0}
.t-fluss{height:var(--gr3)}
/* --- Radien: drei Stufen, mehr nicht -------------------------------------- */
.merkmal,.r-knopf,.btn{border-radius:var(--rund-voll)}
.kauf__liste li{border-radius:0}
.karte,.faq details{border-radius:var(--gr3)}
/* `.sparte .sparte__foto` statt `.sparte__foto`: weiter oben steht
`.zeile,.sparte figure,.tafel-huelle{border-radius:var(--rund-m)}` —
Klasse+Element (0,1,1) schlaegt Klasse (0,1,0). Dieselbe Falle hatte
heute schon die Zeilennummer erwischt. */
.t-stufe,.teil__bild,.kauf,
.sparte .sparte__foto,.sparte .sparte__karte{border-radius:var(--gr4)}
.sparte__foto--voll img{border-radius:var(--gr4)}
/* --- Schrift: die Anzeigegrade im Schnitt --------------------------------- */
.hero h1{font-size:clamp(34px,5.4vw,68px);line-height:1.04}
.sec-hd h2{font-size:clamp(26px,3.4vw,42px);line-height:1.1}
.teil h3,.sparte h3{font-size:clamp(21px,2.2vw,26px);line-height:1.2;
letter-spacing:-.02em}
.karte__h{font-size:var(--gr3);line-height:1.22}
.teil p,.sparte p,.hero__lead{font-size:16px;line-height:1.62}
.karte__ziel,.kauf__takt,.kauf__klein,.sparte__foto figcaption,
.sparte__karte figcaption{font-size:var(--gr2);line-height:1.55}
@media(max-width:860px){
.sec,.band{padding-block:var(--gr5)}
.sparte.fall{gap:var(--gr4)}
.zeile{gap:var(--gr2)}
.kauf{padding:var(--gr4) var(--gr3);margin-top:var(--gr4)}
}
/* --- Die fünf Schritte im Kasten ------------------------------------------
Klein, in einer Spalte, anklickbar. Der Satz erscheint darunter — es
ist immer genau einer sichtbar, der erste ist vorgewählt. */
.schritte{margin-top:var(--gr3)}
.schritte__reihe{display:flex;flex-direction:column;gap:6px}
.sch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
padding:9px 14px;border:1px solid var(--linie);border-radius:var(--rund-voll);
font-size:14.5px;font-weight:700;line-height:1.2;color:var(--ink);
transition:background .13s cubic-bezier(.2,.8,.2,1),border-color .13s,
color .13s,transform .13s}
.sch:hover{border-color:var(--kb);transform:translateX(2px)}
.sch:active{transform:scale(.99)}
.sch b{font-weight:700;font-size:12px;color:var(--ink-55);
font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* `.schritte p.sch-text`, nicht `.sch-text`: weiter oben steht
`.produkt p{margin:0 0 14px}` (0,1,1). Gegen eine blosse Klasse gewinnt
das — der Satz klebte deshalb OHNE Abstand an der Zeile darueber
(gemessen: 0 px). Dieselbe Falle wie bei `.zeile p` und
`.sparte figure`; in diesem Stylesheet ist sie die haeufigste. */
.schritte p.sch-text{margin:var(--gr3) 0 0;font-size:15px;line-height:1.62;
color:var(--ink-70);max-width:46ch;
padding-top:var(--gr2);border-top:1px solid var(--linie)}
/* ==========================================================================
KARTE: kein Seitensprung beim Laden (12.09.2026)
Fehler: `.hero__karte` wird mit `transform:translateX(-50%)` zentriert.
Die Einblend-Folge legte darauf die Regel `animation: heben`, und deren
Bilder setzen `transform: translateY(16px)` bzw. `transform: none` —
ein zweites `transform` ERSETZT das erste, es ergänzt es nicht.
Während der Animation fiel die Zentrierung also weg: Deutschland kam
seitlich herein und rutschte am Ende in die Mitte.
Eigene Bildfolge, die die Zentrierung mitführt. Gleiches gilt für die
Fluss-Ebene darüber.
========================================================================== */
@keyframes karte-ein{
from{opacity:0;transform:translateX(-50%) translateY(14px) scale(1.015)}
to{opacity:.42;transform:translateX(-50%)}
}
@keyframes fluss-ein{
from{opacity:0;transform:translateX(-50%) translateY(14px)}
to{opacity:1;transform:translateX(-50%)}
}
@media (prefers-reduced-motion: no-preference){
/* Karte: KEINE Einblendung mehr. Sie war 1,1 s lang im Kommen, und in
dieser Zeit sah der Aufmacher halbfertig aus. Eine Landkarte ist
kein Effekt, sie ist der Inhalt — sie steht sofort.
Der Datenfluss blendet nur ganz kurz auf, damit die Pakete nicht
im ersten Bild schon mitten auf der Strecke kleben. */
.hero__fluss{animation:fluss-ein .28s linear backwards}
}
/* Mehr Leitungen (32 statt 13) — die neuen bekommen ihre eigenen Takte,
sonst laufen 19 Pakete im Gleichschritt und das sieht nach Maschine
statt nach Betrieb aus. */
@media (prefers-reduced-motion: no-preference){
}
/* Die zweite Zeile der Überschrift steht für sich — „500.000 Unternehmen
in Deutschland“ und „jetzt kontaktieren“ sind zwei Aussagen, nicht ein
Satz, der zufällig umbricht. */
.hero h1 .ac{display:block}
/* ==========================================================================
AUFMACHER LINKSBÜNDIG (12.09.2026)
Andreas: „text von links startend“. Mittig gesetzt wirkt ein Aufmacher
wie ein Plakat; linksbündig wie ein Anfang — das Auge findet bei jeder
Zeile dieselbe Kante wieder, und der Knopf steht dort, wo der Text
aufhört. Der Trichter zieht mit: eine linksbündige Überschrift über
einem mittigen Formular sieht aus wie zwei Seiten.
========================================================================== */
/* Achtung mit `ch` an einer Anzeige-Überschrift: 1ch ist die Breite der
Ziffer Null IN DIESER Schriftgroesse. Bei 55 px sind 17ch rund 500 px —
„500.000 Unternehmen" passt dann nicht mehr in eine Zeile und bricht
mitten im Wort. Hier steht deshalb ein Pixelmaß. */
.hero__txt{text-align:left;margin-inline:0;max-width:760px}
.hero h1{margin-inline:0;max-width:16ch}
.hero .hero__lead{margin-inline:0;max-width:46ch}
.hero__hin{margin-inline:0}
.trichter{align-items:flex-start;margin-inline:0}
.t-stufe{text-align:left}
.t-frage{justify-content:flex-start}
.r-reihe{justify-content:flex-start}
.t-summe,.t-kunden{text-align:left}
.t-fluss{margin-left:var(--gr5)}
@media(max-width:700px){
.hero__txt{max-width:none}
.hero h1{max-width:none}
.t-fluss{margin-left:var(--gr4)}
}
/* ==========================================================================
DIE KARTE GROSS (13.09.2026)
Andreas: „zeige das bild viel größer an“. Die Karte war 660 px hoch und
609 px breit — neben einer 55-px-Überschrift wirkt das wie eine
Briefmarke. Jetzt füllt sie den Aufmacher.
Der Aufmacher wächst mit: Eine Karte, die höher ist als ihr Abschnitt,
würde oben und unten beschnitten — und ein angeschnittenes Deutschland
sieht nach Versehen aus, nicht nach Absicht.
========================================================================== */
/* Karte und Aufmacher haengen an EINER Kennzahl. Beim ersten Versuch
standen dort zwei Werte (94vh fuer die Karte, 88vh fuer den Abschnitt)
— die Karte ragte 46 px hinaus und Bayern war abgeschnitten. */
:root{--karte-h:min(950px,78vh)}
.hero{min-height:calc(var(--karte-h) + var(--gr6))}
.hero__karte,.hero__fluss{height:var(--karte-h)}
@media(max-width:860px){
:root{--karte-h:min(720px,72vh)}
.hero{min-height:calc(var(--karte-h) + var(--gr5))}
}
/* ==========================================================================
KARTE ÜBER DEN GANZEN AUFMACHER (13.09.2026)
Andreas: „es soll das ganze titelbild überdecken und die landkarte soll
schärfer zu sehen sein“.
Zwei Änderungen, die zusammengehören:
1. Die Ebene liegt jetzt bündig im Abschnitt (`inset:0`) und wird mit
`cover` gefüllt statt als hochkantes Kärtchen mittig zu schweben.
Das Sichtfeld der Zeichnung ist dafür breit geworden (2800 × 1760),
damit links und rechts Nachbarland steht und nicht Leere.
Der Datenfluss bekommt `preserveAspectRatio="slice"` — dieselbe
Anpassung, sonst rutschen die Knoten von ihren Städten.
2. Schärfer heißt hier: kräftigere Linien und weniger Nebel. Die weiche
Maske über der ganzen Fläche ist weg; stattdessen dunkelt ein Verlauf
NUR die linke Seite ab, wo die Schrift steht. So bleibt die Karte
rechts klar und die Überschrift trotzdem lesbar.
========================================================================== */
.hero__karte,.hero__fluss{
position:absolute;inset:0;top:0;left:0;width:100%;height:100%;
transform:none;aspect-ratio:auto;
-webkit-mask-image:none;mask-image:none}
/* `auto 100%` — die Karte wird an der HÖHE ausgerichtet, nicht an der
Breite. Warum nicht `contain`: Auf dem Telefon (375 px breit) schrumpft
eine 1,6:1-Zeichnung damit auf 236 px Höhe — ein Streifen in der Mitte,
und genau das sah komisch aus. Warum nicht `cover`: das ist hier zwar
dasselbe Ergebnis, aber `auto 100%` sagt die Absicht.
Links und rechts läuft die Karte damit über den Rand hinaus. Das ist
gewollt: Dort steht Nachbarland, kein Hauptmotiv. */
/* Nur Deutschland, massstabsgetreu, ueber die volle Hoehe des
Aufmachers (Andreas, 13.09.2026). `auto 100%` skaliert allein an der
Hoehe — die Form bleibt damit unverzerrt, und die Karte ist auf jedem
Bildschirm so hoch wie der Abschnitt. Links und rechts bleibt Raum;
dort steht die Schrift.
NICHT `100% 100%`: Das wuerde Deutschland auf das Fensterformat
ziehen — breit und platt auf dem Schirm, schmal und lang auf dem
Telefon. Eine verzerrte Landkarte faellt jedem auf. */
.hero__karte{background:url(/img/karte-de.svg) center/auto 100% no-repeat;
opacity:.95}
.hero__fluss{z-index:1}
.datenfluss{width:100%;height:100%}
/* Der Fluss muss GENAUSO angepasst werden wie die Karte — `meet`
entspricht `contain`, `slice` entspraeche `cover`. Stimmen die beiden
nicht ueberein, liegen die Knoten neben ihren Staedten. */
.datenfluss[preserveAspectRatio]{}
/* Der Lesbarkeitsschleier: links dicht, rechts durchsichtig. Ein Schleier
über die ganze Fläche würde genau das zurücknehmen, was gewünscht war. */
.hero__in{position:relative;z-index:2}
/* Der Schleier war zu breit: Bei 90 % Deckung noch auf 26 % der Strecke
lag Deutschlands Westkante im Dunkeln, und der Umriss war dort nicht
mehr zu sehen. Jetzt faellt er schneller ab — die Schrift steht in den
ersten 12 %, ab einem Drittel ist die Karte frei. Die Lesbarkeit
uebernimmt dort der Schattenwurf der Schrift. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,
rgba(13,18,32,.94) 0%,rgba(13,18,32,.88) 12%,
rgba(13,18,32,.48) 34%,rgba(13,18,32,.14) 58%,rgba(13,18,32,0) 80%)}
.hero h1,.hero__lead,.hero__hin{text-shadow:0 1px 18px rgba(13,18,32,.85),
0 1px 3px rgba(13,18,32,.7)}
/* Oben und unten weich in den Abschnitt auslaufen. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to bottom,
rgba(13,18,32,.85) 0%,rgba(13,18,32,0) 14%,
rgba(13,18,32,0) 82%,rgba(13,18,32,.92) 100%)}
@media(max-width:860px){
/* Auf dem Telefon steht die Schrift ÜBER der Karte, nicht daneben —
der Verlauf muss deshalb von oben kommen, nicht von links. */
/* Der Verlauf muss dunkel bleiben, SOLANGE Text darauf steht.
Gemessen bei 375 x 812: Die Schrift reicht von 27 % bis 67 % der
Aufmacherhoehe — die alte Kurve war bei 67 % schon auf .65 abgefallen,
und dort liegt im Foto die helle Decke. „Zwei Klicks, und Sie sehen
Ihre Zahl." kam damit auf etwa 1,1:1 und war praktisch nicht zu
lesen. Jetzt faellt sie erst UNTER dem Text ab. */
.hero::before{background:linear-gradient(to bottom,
rgba(13,18,32,.94) 0%,rgba(13,18,32,.90) 45%,
rgba(13,18,32,.86) 72%,rgba(13,18,32,.55) 88%,
rgba(13,18,32,.38) 100%)}
/* Dieselbe Zeile ist die dunkelste auf dem Bild — sie bekommt Licht. */
.hero__hin{color:#c9d4e8}
}
/* ==========================================================================
AUFMACHER HELL — „Netzplan“ (13.09.2026)
Andreas: „ansonsten sieht es wie KI aus das will ich nicht“. Er hat
recht: dunkler Grund plus leuchtendes Punktnetz ist das Klischeebild
für Technik und KI — es steht heute auf jeder zweiten Startseite und
sagt über dieses Produkt nichts aus.
Die Gegenversion ist ein technischer Plan: Papier statt Nachthimmel,
Tinte statt Leuchten, Quadrate statt Leuchtpunkte, Haarlinien statt
Strahlen. Das ist die Sprache eines Netzplans — und ein Verzeichnis
von Firmen samt Sendewegen IST ein Netzplan.
Die Seite gewinnt damit auch Zusammenhalt: Alles außer dem
Abschlussband ist hell; der dunkle Aufmacher war die einzige Insel.
========================================================================== */
.hero{background:#fbfcfe;color:var(--ink)}
.hero h1,.hero .hero__lead,.hero__hin{color:var(--ink);text-shadow:none}
.hero h1 .ac{color:var(--kb-700)}
.hero .hero__lead{color:var(--ink-70)}
.hero__hin{color:var(--ink-55)}
.hero__karte{background-image:url(/img/karte-hell.svg);opacity:1}
/* Kein Schleier mehr — auf hellem Grund braucht die Schrift keinen. Nur
ein ganz leichter Verlauf, damit die Karte hinter der Überschrift
nicht mit den Buchstaben konkurriert. */
.hero::before{background:linear-gradient(100deg,
rgba(251,252,254,.97) 0%,rgba(251,252,254,.90) 10%,
rgba(251,252,254,.42) 26%,rgba(251,252,254,0) 52%)}
/* NUR unten ausblenden. Oben lag bisher ein Verlauf mit 90 % Deckung —
genau über der Nordseeküste. Die Kante war dort nicht unscharf, sie
war überdeckt. Unten bleibt der Übergang, damit der Abschnitt nicht
mit einer Kante in den nächsten stößt; oben schließt die dunkle
Kopfleiste ohnehin sauber ab. */
.hero::after{background:linear-gradient(to bottom,
rgba(251,252,254,0) 0%,rgba(251,252,254,0) 88%,
rgba(251,252,254,1) 100%)}
/* Das Netz in Tinte: Haarlinien, kleine Quadrate, keine Leuchtpunkte. */
.df-basis{stroke:var(--linie-stark);stroke-width:1;stroke-opacity:.85}
.df-leitung{stroke:var(--kb);stroke-width:2.6;stroke-opacity:0}
.df-knoten{fill:var(--ink);fill-opacity:.75}
@media (prefers-reduced-motion: no-preference){
.df-leitung{stroke-opacity:1}
/* Kein Pulsieren — ein atmender Punkt ist Dekoration, kein Zustand. */
.df-knoten{animation:none}
}
/* Der Aufmacher braucht unten eine Kante, sonst fließt er in den nächsten
Abschnitt. Eine Haarlinie, wie zwischen allen anderen Abschnitten. */
.hero{border-bottom:1px solid var(--linie)}
.hero .btn--line{color:var(--ink);border-color:var(--linie-stark)}
/* ==========================================================================
DER TRICHTER ALS FENSTER (13.09.2026)
Andreas: „wenn der funnel geöffnet wird dann ist alles unklar, mach den
funnel als popup“. Auf dem Telefon lag er bisher ÜBER der Landkarte —
Linien, Knoten und Text übereinander, nichts davon lesbar.
Jetzt ein Fenster über der Seite. Ohne eine Zeile JavaScript: Der Grund
dahinter ist ein