/* ========================================================================== MK Fenster Türen Bauelemente — Design System -------------------------------------------------------------------------- 1 Tokens 6 Hero 11 Formulare 2 Reset & Basis 7 Trust / Zahlen 12 Galerie & Lightbox 3 Typografie 8 Karten & Raster 13 Footer 4 Buttons & Links 9 Prozess 14 Animation 5 Header & Menü 10 FAQ / Stimmen 15 Responsive ========================================================================== */ /* ============================ 1 · TOKENS ================================= */ :root{ /* Blau — Leitfarbe. Diszipliniert: ein Marineblau, ein Akzentblau, Abstufungen. */ --navy-900:#061426; --navy-800:#0A1F38; --navy-700:#0E2C4E; --navy-600:#164066; --navy:#0B2440; --blue-700:#1544B4; --blue:#1B5AE0; /* Primär-Aktion */ --blue-400:#3F86FF; /* Akzent / Hover / Highlights */ --blue-200:#9DC4FF; --blue-50:#EDF3FF; --sky:#F2F6FC; --ink:#0A1A2E; /* Fließtext auf hell */ --ink-2:#3E5069; /* Sekundärtext */ --ink-3:#5C6E88; /* Tertiär / Meta — auf Weiß 5,2:1, damit auch Kleintext die WCAG-AA-Schwelle sicher hält */ --paper:#FFFFFF; --mist:#F6F8FB; --line:#E3E9F2; --line-2:#D2DCEA; --on-dark:#EEF4FF; --on-dark-2:#A9BEDC; --on-dark-3:#7089AC; --dark-line:rgba(150,190,255,.16); --wa:#25D366; /* ---- Kontextfarben ---------------------------------------------------- Bausteine (Überschrift, Fließtext, Eyebrow, Ghost-Button …) greifen NUR auf diese Tokens zu, nie direkt auf --ink oder --blue. In dunklen Abschnitten werden die Tokens weiter unten umgeschaltet. Dadurch kann kein Baustein mehr dunkle Schrift auf dunklem Grund erzeugen. */ --c-head:var(--ink); /* Überschriften */ --c-body:var(--ink-2); /* Fließtext, Lead */ --c-faint:var(--ink-3); /* Meta, Kleintext */ --c-accent:var(--blue); /* Eyebrow, Textlinks, Icons */ --c-hair:var(--line); /* Trennlinien */ --c-ghost-bd:var(--line-2); --c-ghost-hover-bg:var(--blue-50); --c-ghost-hover-fg:var(--blue); --c-ghost-hover-bd:var(--blue); /* Typo */ --sans:'SF Pro Display', -apple-system, 'Geist', 'Segoe UI', system-ui, Helvetica, Arial, sans-serif; --serif:'Instrument Serif', Georgia, 'Times New Roman', serif; --t-h1:clamp(40px, 5.4vw, 90px); --t-h2:clamp(31px, 3.75vw, 62px); --t-h3:clamp(22px, 1.9vw, 34px); --t-h4:clamp(19.5px, 1.45vw, 27px); --t-lead:clamp(19px, 1.55vw, 29px); --t-body:clamp(17.5px, 1.22vw, 23px); --t-sm:clamp(15.5px, 1.09vw, 20.5px); --t-xs:clamp(14px, .99vw, 18px); --t-eyebrow:clamp(13px, .93vw, 17.5px); --t-num:clamp(40px, 4.15vw, 72px); /* Höhen der fixen Leisten. Der Hero rechnet damit seine Höhe so aus, dass Topbar + Header + Hero exakt einen Bildschirm füllen. */ --hdr-h:92px; --topbar-h:42px; /* Raster */ --wrap:1340px; --wrap-wide:1640px; --wrap-text:74ch; --gut:clamp(20px, 3.4vw, 56px); --sec:clamp(72px, 8.4vw, 148px); /* vertikaler Sektionsabstand */ --r-sm:2px; --r:3px; --r-lg:4px; --r-xl:6px; --sh-1:0 1px 2px rgba(10,26,46,.08); --sh-2:0 1px 2px rgba(10,26,46,.07), 0 8px 20px rgba(10,26,46,.08); --sh-3:0 10px 28px rgba(9,32,66,.17); --sh-blue:0 1px 0 rgba(8,32,90,.45); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.62s; } /* Dunkle Abschnitte: alle Kontextfarben umschalten. Diese Liste ist die einzige Stelle, an der ein neuer dunkler Abschnitt eingetragen werden muss. */ :is(.on-dark,.on-deep,.hero,.phero,.band,.cat,.ftr,.topbar,.hero-card,.lb){ --c-head:#fff; --c-body:var(--on-dark-2); --c-faint:var(--on-dark-3); --c-accent:var(--blue-200); --c-hair:var(--dark-line); --c-ghost-bd:rgba(160,200,255,.34); --c-ghost-hover-bg:rgba(63,134,255,.18); --c-ghost-hover-fg:#fff; --c-ghost-hover-bd:var(--blue-400); } /* Helle Inseln innerhalb dunkler Abschnitte schalten wieder zurück (weiße Karten, Hinweisboxen, Chips …). */ :is(.tst-card,.trust-in,.note,.map-card,.fig-note,.pcard-body,.vcard-body,.chip,.drawer,.legal,.faq,.g-hint){ --c-head:var(--ink); --c-body:var(--ink-2); --c-faint:var(--ink-3); --c-accent:var(--blue); --c-hair:var(--line); --c-ghost-bd:var(--line-2); --c-ghost-hover-bg:var(--blue-50); --c-ghost-hover-fg:var(--blue); --c-ghost-hover-bd:var(--blue); } /* ========================= 2 · RESET & BASIS ============================= */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 18px)} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:var(--t-body); font-weight:400; line-height:1.62; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.lock{overflow:hidden} img,svg,video{max-width:100%; display:block} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} input,textarea,select{font:inherit; color:inherit} a{color:inherit; text-decoration:none} ul,ol{margin:0; padding:0; list-style:none} figure{margin:0} hr{border:0; border-top:1px solid var(--line); margin:0} ::selection{background:var(--blue); color:#fff} :focus-visible{outline:2.5px solid var(--blue-400); outline-offset:3px; border-radius:4px} .wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)} .wrap-wide{width:100%; max-width:var(--wrap-wide); margin-inline:auto; padding-inline:var(--gut)} .sec{padding-block:var(--sec)} .sec-t{padding-top:var(--sec)} .sec-b{padding-bottom:var(--sec)} .skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--blue); color:#fff; padding:12px 20px; border-radius:0 0 10px 0} .skip:focus{left:0} /* Farbflächen */ .on-mist{background:var(--mist)} .on-sky{background:var(--sky)} /* Die Textfarben in dunklen Abschnitten kommen aus den Kontext-Tokens ganz oben — hier wird nur noch die Fläche gesetzt. */ .on-dark{background:var(--navy); color:var(--on-dark)} .on-deep{background:var(--navy-900); color:var(--on-dark)} :is(.on-dark,.on-deep,.hero,.phero,.band,.cat,.ftr) p{color:var(--c-body)} :is(.tst-card,.trust-in,.note,.map-card,.fig-note,.pcard-body,.vcard-body,.legal,.faq) p{color:var(--c-body)} /* Blaupausen-Raster für dunkle Flächen */ .blueprint{position:relative; isolation:isolate; overflow:hidden} .blueprint::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:.85; background-image:linear-gradient(var(--dark-line) 1px,transparent 1px), linear-gradient(90deg,var(--dark-line) 1px,transparent 1px); background-size:clamp(52px,5vw,84px) clamp(52px,5vw,84px); -webkit-mask-image:radial-gradient(120% 92% at 50% 0%,#000 12%,transparent 78%); mask-image:radial-gradient(120% 92% at 50% 0%,#000 12%,transparent 78%); } .blueprint::after{ content:''; position:absolute; z-index:-1; inset:auto -10% -40% -10%; height:70%; background:radial-gradient(60% 100% at 50% 100%,rgba(63,134,255,.22),transparent 70%); pointer-events:none; } /* ========================== 3 · TYPOGRAFIE =============================== */ h1,h2,h3,h4,h5{margin:0; font-weight:680; letter-spacing:-.028em; line-height:1.06; color:var(--c-head); overflow-wrap:break-word} h1{font-size:var(--t-h1); letter-spacing:-.034em} h2{font-size:var(--t-h2); line-height:1.08} h3{font-size:var(--t-h3); line-height:1.18; letter-spacing:-.022em} h4{font-size:var(--t-h4); line-height:1.28; letter-spacing:-.016em} p{margin:0} p + p{margin-top:.85em} .lead{font-size:var(--t-lead); line-height:1.5; color:var(--c-body); letter-spacing:-.012em} .sm{font-size:var(--t-sm); line-height:1.55} .xs{font-size:var(--t-xs); line-height:1.5; color:var(--c-faint)} .muted{color:var(--c-body)} .serif{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em} .nowrap{white-space:nowrap} .measure{max-width:var(--wrap-text)} /* Eyebrow: SF Pro 600, moderates Tracking — bewusst kein Monospace */ .eyebrow{ display:inline-flex; align-items:center; gap:.62em; font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.075em; text-transform:uppercase; color:var(--c-accent); margin-bottom:.9em; } .eyebrow::before{content:''; width:clamp(16px,1.5vw,26px); height:3px; background:currentColor; opacity:.85} .sec-head{max-width:min(100%,860px)} .sec-head .lead{margin-top:clamp(16px,1.4vw,24px)} .sec-head--center{margin-inline:auto; text-align:center} .sec-head--center .eyebrow::before{display:none} /* Ecken-Winkel — technisches Detail aus der Bauzeichnung */ .bracket{position:relative} .bracket::before,.bracket::after{ content:''; position:absolute; width:16px; height:16px; pointer-events:none; border:2px solid var(--blue); opacity:.55; transition:opacity .4s var(--ease) } .bracket::before{top:-1px; left:-1px; border-right:0; border-bottom:0} .bracket::after{bottom:-1px; right:-1px; border-left:0; border-top:0} /* ======================= 4 · BUTTONS & LINKS ============================= */ .btn{ --bg:var(--blue); --fg:#fff; --bd:transparent; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.68em; padding:clamp(15px,1.12vw,20px) clamp(24px,1.85vw,34px); background:var(--bg); color:var(--fg); border:1.5px solid var(--bd); border-radius:3px; font-size:var(--t-sm); font-weight:600; letter-spacing:-.008em; line-height:1; white-space:nowrap; overflow:hidden; isolation:isolate; transition:transform .34s var(--ease-out), box-shadow .34s var(--ease-out), background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease); } .btn .ic{width:1.1em; height:1.1em; flex:none; transition:transform .3s var(--ease-out)} .btn::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--blue-700); opacity:0; transition:opacity .28s var(--ease); } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(1px)} .btn:hover .ic{transform:translateX(2px)} .btn-primary{box-shadow:var(--sh-blue)} .btn-primary:hover{box-shadow:0 2px 0 rgba(8,32,90,.5)} .btn-primary:hover::before{opacity:1} .btn-ghost{--bg:transparent; --fg:var(--c-head); --bd:var(--c-ghost-bd)} .btn-ghost:hover{--fg:var(--c-ghost-hover-fg); --bd:var(--c-ghost-hover-bd); background:var(--c-ghost-hover-bg)} .btn-white{--bg:#fff; --fg:var(--navy)} .btn-white:hover{--fg:var(--blue)} /* Kein Bonbon-Grün neben dem Blau — sonst wirkt die Seite wie eine Consumer-App. */ .btn-wa{--bg:transparent; --fg:var(--c-head); --bd:var(--c-ghost-bd)} /* Auf Weiß ist das helle WhatsApp-Grün fast unsichtbar (1,9:1) — dort dunkler. */ .btn-wa .ic{color:#0F7A3D} :is(.hero,.phero,.on-dark,.on-deep,.band,.cat) .btn-wa .ic{color:#25D366} .btn-wa:hover{--bd:#25D366; background:rgba(37,211,102,.12)} .btn-wa::before{display:none} .btn-sm{padding:11px 19px; font-size:var(--t-xs)} .btn-lg{padding:clamp(18px,1.36vw,25px) clamp(30px,2.4vw,44px); font-size:var(--t-body)} .btn-block{width:100%} .btn-row{display:flex; flex-wrap:wrap; gap:clamp(10px,.9vw,16px); align-items:center} /* Textlink mit gleitendem Pfeil */ .tlink{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:var(--t-sm); color:var(--c-accent); position:relative; padding-block:6px 8px; min-height:34px; } .tlink .ic{width:1.05em; height:1.05em; transition:transform .38s var(--ease-out)} .tlink::after{content:''; position:absolute; left:0; right:1.55em; bottom:6px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .42s var(--ease-out)} .tlink:hover::after{transform:scaleX(1)} .tlink:hover .ic{transform:translateX(4px)} .ic{width:24px; height:24px; flex:none; fill:none} /* Flächige Inline-Icons (z. B. das Facebook-Logo) bringen fill="currentColor" mit — die Regel darüber würde es überstimmen und das Icon unsichtbar machen. */ svg.ic[fill="currentColor"]{fill:currentColor} /* ========================= 5 · HEADER & MENÜ ============================= */ /* Feste Höhe statt min-height, und die Trennlinie als inset-Schatten statt als Rahmen: nur so ist die Topbar-Höhe exakt --topbar-h. Der Hero rechnet damit, sonst ragt er um ein paar Pixel über den Bildschirmrand. */ .topbar{ background:var(--navy-900); color:var(--on-dark-2); font-size:var(--t-xs); line-height:1.25; box-shadow:inset 0 -1px 0 rgba(255,255,255,.06); position:relative; z-index:60; } .topbar-in{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; min-height:var(--topbar-h); flex-wrap:wrap} .topbar a,.topbar-l span{display:inline-flex; align-items:center; gap:.5em; min-height:32px; transition:color .25s} .topbar a:hover{color:#fff} .topbar .ic{width:1.05em; height:1.05em} .topbar-l{display:flex; gap:clamp(14px,1.6vw,30px); align-items:center} .topbar-r{display:flex; gap:clamp(14px,1.6vw,26px); align-items:center} .hdr{ position:sticky; top:0; z-index:70; background:transparent; transition:background .42s var(--ease), box-shadow .42s var(--ease), backdrop-filter .42s; } .hdr::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); opacity:0; transition:opacity .42s} .hdr-in{display:flex; align-items:center; gap:clamp(14px,1.5vw,32px); min-height:var(--hdr-h); transition:min-height .42s var(--ease)} .hdr.is-stuck{background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); box-shadow:0 6px 30px rgba(10,26,46,.07)} .hdr.is-stuck::after{opacity:1} .hdr.is-stuck .hdr-in{min-height:70px} /* Über dunklem Hero: Header transparent, Inhalte weiß. Bei offenem Menü liegt der weiße Drawer darunter — dann gilt wieder die dunkle Variante. */ body:not(.menu-open) .hdr.over-hero:not(.is-stuck){color:#fff} body:not(.menu-open) .hdr.over-hero:not(.is-stuck) .logo-txt strong{color:#fff} body:not(.menu-open) .hdr.over-hero:not(.is-stuck) .logo-txt span{color:rgba(255,255,255,.62)} body:not(.menu-open) .hdr.over-hero:not(.is-stuck) .mainnav > li > a{color:rgba(255,255,255,.9)} body:not(.menu-open) .hdr.over-hero:not(.is-stuck) .mainnav > li > a:hover{color:#fff} body:not(.menu-open) .hdr.over-hero:not(.is-stuck) .hdr-tel{color:#fff; border-color:rgba(255,255,255,.28)} body:not(.menu-open) .hdr.over-hero:not(.is-stuck) .hdr-tel:hover{background:rgba(255,255,255,.14)} body:not(.menu-open) .hdr.over-hero:not(.is-stuck) .logo-mark{color:#fff} body:not(.menu-open) .hdr.over-hero:not(.is-stuck) .burger i{background:#fff} .logo{display:inline-flex; align-items:center; gap:.72em; flex:none} /* Die Bildmarke färbt sich über --c-head: dunkel auf hellem Grund, weiß im Footer und über dem Hero. */ .logo-mark{ width:clamp(46px,3.5vw,60px); aspect-ratio:1; flex:none; display:grid; place-items:center; color:var(--c-head); transition:color .3s var(--ease), opacity .3s var(--ease); } .logo-mark svg{width:100%; height:100%} .logo:hover .logo-mark{opacity:.78} .logo-txt{display:flex; flex-direction:column; line-height:1.08} .logo-txt strong{font-size:clamp(16.5px,1.12vw,21px); font-weight:650; letter-spacing:-.026em; color:var(--ink)} .logo-txt span{font-size:clamp(11px,.72vw,13.5px); font-weight:500; letter-spacing:.085em; text-transform:uppercase; color:var(--ink-3)} .mainnav{display:flex; align-items:center; gap:clamp(2px,.5vw,10px)} /* Das margin-left:auto muss auf dem