/* ========================================================================== 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:#0f1524; --ink-70:#575d6a; /* kleine Beschriftungen — 6,6:1 auf Weiss */ --ink-55:#7b7e87; /* NUR fuer grosse Schrift — 4,1:1, reicht ab 24 px */ --kb:#2f5cff; /* Signalton: Zahlen, Akzentwort, Baender — 5,0:1 */ --kb-700:#1c3bb5; /* Marken, Links, Kennziffern — 9,0:1 */ --kb-100:#eaefff; --kb-200:#d6e0ff; --linie:#d5dae4; --linie-stark:#c2c9d6; --nav:#171d2b; --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)} .nav__links a{color:#e6e9f0;font-size:14px;font-weight:600} .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 ----------------------------------------------------- */ .hero{position:relative;border-bottom:2px solid var(--linie);overflow:hidden} .hero__bild{position:absolute;inset:0;z-index:0;filter:grayscale(1) contrast(1.08); background-size:cover;background-position:50% 42%} .hero__schleier{position:absolute;inset:0;z-index:1; background:linear-gradient(96deg,#fff 0%,#fff 38%,rgba(255,255,255,.78) 56%, rgba(255,255,255,.40) 76%,rgba(255,255,255,.12) 100%)} .hero__in{position:relative;z-index:2;padding-block:clamp(56px,7vw,104px)} .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} /* Die drei Fragen sind der Aufhaenger, nicht die Aussage. In gleicher Groesse wie die Antwort nahmen sie den ganzen ersten Bildschirm ein und die eigentliche Botschaft stand darunter ausserhalb des Sichtfelds. */ .hero h1 .frage{display:block;color:var(--ink-55);font-size:.56em;line-height:1.24} .hero h1 em{display:block;margin-top:20px;font-style:normal} .hero h1 .ac{color:var(--kb)} .hero__lead{margin:32px 0 0;max-width:52ch;font-size:15px;line-height:1.75; 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} /* ---------- 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} .sparte 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 h4{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} .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)} .hero__schleier{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 55%,rgba(255,255,255,.5) 100%)} } @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 #171d2b. */ /* Die „2" in Cyan wie im CRM. Auf #171d2b ergibt #38bdf8 rund 9:1 — deutlich mehr als die 4,5, an denen das alte Koenigsblau scheiterte. */ .nav .nav__brand b{color:#38bdf8} /* Die Aufhellung galt der alten Flaeche. Das SVG traegt seine Farben selbst — hell oben (#38bdf8), 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)}