/* Schriften direkt eingebettet – kein externer Google-Aufruf (schneller + DSGVO-freundlich) */ @font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/archivo-400-900.woff2) format('woff2');} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-400.woff2) format('woff2');} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-500.woff2) format('woff2');} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-600.woff2) format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');} :root{ --ink:#1d2a26; /* Fichtengrün, fast schwarz */ --paper:#f3f3ee; /* kühles Papierweiss */ --card:#fbfbf8; --line:#c9ccc2; --moss:#71806f; /* gedämpftes Moos für Sekundärtext */ --signal:#e5352b; /* Schweizer Signalrot – sparsam */ --ok:#2e7d4f; --radius:2px; --gutter:clamp(20px,5vw,72px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{ font-family:"Instrument Sans",system-ui,sans-serif; background:var(--paper);color:var(--ink); font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased; /* overflow-x:hidden bewusst NUR auf – auf body zusammen mit html bricht es position:sticky des Headers */ } ::selection{background:var(--ink);color:var(--paper)} img{max-width:100%} a{color:inherit} /* ---------- Typo-Rollen ---------- */ .display{ font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 118; font-weight:850; letter-spacing:-.02em; line-height:.94; text-transform:uppercase; } .mono{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; } /* ---------- Header ---------- */ header{ position:sticky;top:0;z-index:50; background:var(--paper); border-bottom:1px solid var(--ink); display:flex;align-items:stretch;justify-content:space-between; } .logo{ display:flex;align-items:center;gap:.6em; padding:14px var(--gutter); border-right:1px solid var(--ink); font-family:"Archivo",sans-serif;font-weight:800; font-variation-settings:"wdth" 120; letter-spacing:.02em;text-decoration:none;font-size:1.05rem; } .logo .dot{width:9px;height:9px;background:var(--signal);border-radius:50%;flex:none} header nav{display:flex;align-items:stretch} header nav a{ display:flex;align-items:center;padding:0 22px; text-decoration:none;font-size:.92rem;font-weight:500; border-left:1px solid var(--line); transition:background .15s; } header nav a:hover{background:var(--ink);color:var(--paper)} header nav a.cta{background:var(--ink);color:var(--paper);border-left:1px solid var(--ink)} header nav a.cta:hover{background:var(--signal)} .burger{ display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px; width:60px;border:none;border-left:1px solid var(--ink); background:transparent;cursor:pointer; } .burger span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s} header.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} header.nav-open .burger span:nth-child(2){opacity:0} header.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{ border-bottom:1px solid var(--ink); display:grid;grid-template-columns:1.25fr 1fr; } .hero-copy{padding:clamp(48px,8vw,110px) var(--gutter);border-right:1px solid var(--ink)} .hero-copy .mono{color:var(--moss);display:block;margin-bottom:22px} h1.display{font-size:clamp(2.6rem,7vw,5.6rem)} h1 .laeuft{position:relative;display:inline-block;white-space:nowrap} h1 .laeuft::after{ content:"";position:absolute;left:0;right:0;bottom:.06em;height:.13em; background:var(--signal); transform:scaleX(0);transform-origin:left; animation:underline .7s .9s cubic-bezier(.7,0,.2,1) forwards; } @keyframes underline{to{transform:scaleX(1)}} .hero-copy p.lead{margin:30px 0 36px;max-width:44ch;font-size:1.12rem;color:#3a463f} .btn{ display:inline-block;padding:15px 28px; background:var(--ink);color:var(--paper); text-decoration:none;font-weight:600;font-size:.95rem; border:1px solid var(--ink);border-radius:var(--radius); transition:background .15s,color .15s; } .btn:hover{background:var(--signal);border-color:var(--signal)} .btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)} .hero-copy .btn + .btn{margin-left:10px} /* Signature: Status-Panel */ .hero-panel{ display:flex;align-items:center;justify-content:center; padding:clamp(36px,5vw,64px) var(--gutter); background: repeating-linear-gradient(45deg,transparent 0 10px,rgba(29,42,38,.035) 10px 11px); } .panel{ width:100%;max-width:420px;background:var(--card); border:1px solid var(--ink);border-radius:var(--radius); box-shadow:6px 6px 0 0 var(--ink); } .panel-head{ display:flex;justify-content:space-between;align-items:center; padding:14px 18px;border-bottom:1px solid var(--ink); } .panel-head .mono{font-size:.68rem} .badge{ display:inline-flex;align-items:center;gap:7px; font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em; color:var(--ok); } .badge::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--ok); animation:pulse 2.2s infinite; } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .panel-row{ display:flex;justify-content:space-between;align-items:center; padding:15px 18px;border-bottom:1px solid var(--line); font-size:.92rem; opacity:0;transform:translateY(6px); animation:rowIn .5s forwards; } .panel-row:nth-child(2){animation-delay:.25s} .panel-row:nth-child(3){animation-delay:.5s} .panel-row:nth-child(4){animation-delay:.75s} .panel-row:nth-child(5){animation-delay:1s;border-bottom:none} @keyframes rowIn{to{opacity:1;transform:none}} .panel-row .val{font-family:"IBM Plex Mono",monospace;font-size:.8rem} .check{color:var(--ok);font-weight:700} /* ---------- Ticker ---------- */ .ticker{ border-bottom:1px solid var(--ink); overflow:hidden;white-space:nowrap; padding:11px 0;background:var(--ink);color:var(--paper); } /* Laufband: JavaScript (app.js) klont den Text und schiebt alle Kopien zusammen nach links. Sobald eine Kopie das Band links verlässt, rutscht nahtlos die nächste nach – kein Sprung, keine Lücke. Ohne JavaScript steht der Text einfach still. */ .ticker-track{ display:inline-flex; will-change:transform; } .ticker span{ display:inline-block;white-space:nowrap;flex:0 0 auto; font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase; } .ticker span::after{content:' · '} /* ---------- Sections ---------- */ section{border-bottom:1px solid var(--ink)} .sec-head{ display:flex;justify-content:space-between;align-items:center;gap:20px; padding:26px var(--gutter);border-bottom:1px solid var(--ink); } .sec-head h2{font-size:clamp(1.6rem,3.4vw,2.5rem)} .sec-head .mono{color:var(--moss)} /* Leistungen */ .grid4{display:grid;grid-template-columns:repeat(3,1fr)} .service{ padding:34px 26px 42px;border-right:1px solid var(--line); display:flex;flex-direction:column;gap:14px; transition:background .2s; } .service:nth-child(3n){border-right:none} /* rechte Spalte ohne rechte Linie */ .service:nth-child(-n+3){border-bottom:1px solid var(--line)} /* Trennlinie zwischen den Reihen */ .service:hover{background:var(--card)} .service .mono{color:var(--signal)} .service h3{font-size:1.25rem;font-weight:650;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108} .service p{font-size:.95rem;color:#3a463f;flex:1} .service .price{font-family:"IBM Plex Mono",monospace;font-size:.85rem;border-top:1px solid var(--line);padding-top:14px} /* Ablauf */ .steps{display:grid;grid-template-columns:repeat(3,1fr)} .step{padding:38px 30px;border-right:1px solid var(--line)} .step:last-child{border-right:none} .step .num{ font-family:"Archivo",sans-serif;font-weight:900;font-variation-settings:"wdth" 125; font-size:3rem;line-height:1;color:transparent; -webkit-text-stroke:1.4px var(--ink); } .step h3{margin:16px 0 8px;font-size:1.1rem} .step p{font-size:.94rem;color:#3a463f} /* Trust */ .trust{display:grid;grid-template-columns:1fr 1fr} .trust-copy{padding:clamp(40px,6vw,80px) var(--gutter);border-right:1px solid var(--ink)} .trust-copy h2{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:22px} .trust-copy p{max-width:52ch;color:#3a463f;margin-bottom:16px} .facts{display:flex;flex-direction:column;justify-content:center;} .fact{ padding:26px var(--gutter);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:18px; } .fact:last-child{border-bottom:none} .fact .k{ font-family:"Archivo",sans-serif;font-weight:850;font-variation-settings:"wdth" 115; font-size:clamp(1.6rem,3vw,2.4rem);min-width:3.2ch; } .fact .v{color:#3a463f;font-size:.95rem} /* Kontakt */ .contact{display:grid;grid-template-columns:1fr 1fr;border-bottom:none} .contact-copy{padding:clamp(40px,6vw,80px) var(--gutter);border-right:1px solid var(--ink)} .contact-copy h2{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:18px} .contact-copy p{max-width:44ch;color:#3a463f;margin-bottom:28px} .contact-copy .direct{font-family:"IBM Plex Mono",monospace;font-size:.85rem;line-height:2} .contact-copy .direct a{text-decoration:none;border-bottom:1px solid var(--line)} .contact-copy .direct a:hover{border-color:var(--signal);color:var(--signal)} form{padding:clamp(40px,6vw,80px) var(--gutter);display:flex;flex-direction:column;gap:18px} label{display:flex;flex-direction:column;gap:7px} label .mono{color:var(--moss)} input,textarea{ font:inherit;padding:13px 14px;background:var(--card); border:1px solid var(--ink);border-radius:var(--radius);color:var(--ink); } input:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:2px} form .btn{align-self:flex-start;cursor:pointer;margin-top:6px} .form-note{font-size:.82rem;color:var(--moss)} /* Footer */ footer{ border-top:1px solid var(--ink); display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px; padding:22px var(--gutter); font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--moss); } /* Live-Check Tool */ .check-form{display:flex;border-bottom:1px solid var(--ink)} .check-form input{ flex:1;min-width:0;border:none;background:var(--card); padding:14px 16px;font:inherit;font-size:.92rem;color:var(--ink); } .check-form input:focus{outline:2px solid var(--signal);outline-offset:-2px} .check-form button{ border:none;border-left:1px solid var(--ink);border-radius:0; background:var(--ink);color:var(--paper); padding:0 20px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer; transition:background .15s;white-space:nowrap; } .check-form button:hover{background:var(--signal)} .check-form button:disabled{background:var(--moss);cursor:wait} .badge.busy{color:#b26a00} .badge.busy::before{background:#b26a00;animation:pulse .8s infinite} .badge.err{color:var(--signal)} .badge.err::before{background:var(--signal);animation:none} .panel-foot{ padding:12px 18px;font-size:.66rem;color:var(--moss); border-top:1px solid var(--line);letter-spacing:.1em; } .val.good{color:var(--ok);font-weight:600} .val.avg{color:#b26a00;font-weight:600} .val.bad{color:var(--signal);font-weight:600} .panel-divider{ padding:10px 18px;background:var(--ink);color:var(--paper); font-size:.62rem;letter-spacing:.14em; } .panel .result-cta{ display:block;text-align:center;margin:14px 18px; } .score-big{ font-family:"Archivo",sans-serif;font-weight:900;font-variation-settings:"wdth" 120; font-size:2rem;line-height:1; } /* Referenzen */ .refs{display:grid;grid-template-columns:repeat(3,1fr)} .ref{ border-right:1px solid var(--line);padding:30px 26px 36px; display:flex;flex-direction:column;gap:16px;transition:background .2s; } .ref:last-child{border-right:none} .ref:hover{background:var(--card)} .browser{ border:1px solid var(--ink);border-radius:var(--radius); background:var(--card);box-shadow:4px 4px 0 0 var(--ink); overflow:hidden; } .browser-bar{ display:flex;align-items:center;gap:6px; padding:8px 10px;border-bottom:1px solid var(--ink); } .browser-bar i{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none} .browser-bar .url{ flex:1;font-family:"IBM Plex Mono",monospace;font-size:.6rem; color:var(--moss);letter-spacing:.05em; border:1px solid var(--line);border-radius:2px;padding:2px 8px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .shot{height:150px;position:relative;overflow:hidden} .shot-alteno{background:linear-gradient(160deg,#e8ddc8 0 55%,#8a9464 55% 100%)} .shot-alteno::before{ content:"FERIENHAUS\A ALTENO";white-space:pre; position:absolute;top:22px;left:18px; font-family:"Archivo",sans-serif;font-weight:850;font-size:1.05rem;line-height:1.05; letter-spacing:.02em;color:#4a4432; } .shot-alteno::after{ content:"";position:absolute;right:16px;bottom:-24px;width:110px;height:110px; border-radius:50%;background:#c96f4a;opacity:.85; } .shot-wg{background:var(--paper)} .shot-wg::before{ content:"LÄUFT.";position:absolute;top:24px;left:18px; font-family:"Archivo",sans-serif;font-weight:900;font-variation-settings:"wdth" 118; font-size:1.7rem;color:var(--ink); border-bottom:5px solid var(--signal);line-height:1.15; } .shot-wg::after{ content:"";position:absolute;right:14px;top:20px;width:76px;height:96px; border:1px solid var(--ink);background:var(--card);box-shadow:3px 3px 0 0 var(--ink); } .ref-open{ border:1px dashed var(--moss);background:transparent;box-shadow:none; } .ref-open .shot{ display:flex;align-items:center;justify-content:center; color:var(--moss);font-family:"Archivo",sans-serif;font-weight:800;font-size:2.6rem; } .ref h3{font-size:1.12rem;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108} .ref p{font-size:.92rem;color:#3a463f;flex:1} .tags{display:flex;flex-wrap:wrap;gap:6px} .tag{ font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase; border:1px solid var(--line);border-radius:2px;padding:3px 8px;color:var(--moss); } a.plain{font-size:.85rem;font-family:"IBM Plex Mono",monospace;text-decoration:none;border-bottom:1px solid var(--line)} a.plain:hover{color:var(--signal);border-color:var(--signal)} .service a.plain{margin-bottom:12px;display:inline-block} /* Textlinks in Fliesstext, FAQ, Formular und Linklisten: einheitlicher Hover überall */ .prose a, .faq-a a, .trust-copy a, .direct a, form a{text-decoration:none;border-bottom:1px solid var(--line)} .prose a:hover, .faq-a a:hover, .trust-copy a:hover, .direct a:hover, form a:hover{color:var(--signal);border-color:var(--signal)} @media(max-width:820px){ .refs{grid-template-columns:1fr} .ref{border-right:none;border-bottom:1px solid var(--line)} .ref:last-child{border-bottom:none} } /* FAQ */ .faq-list{display:flex;flex-direction:column} .faq-list details{border-bottom:1px solid var(--line)} .faq-list details:last-child{border-bottom:none} .faq-list summary{ cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:16px; padding:22px var(--gutter);font-weight:600;font-size:1.05rem; transition:background .15s; } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary:hover{background:var(--card)} .faq-list summary::after{ content:"+";font-family:"Archivo",sans-serif;font-weight:800;font-size:1.5rem; color:var(--signal);flex:none;line-height:1; } .faq-list details[open] summary::after{content:"–"} .faq-list .faq-a{padding:0 var(--gutter) 26px;max-width:72ch;color:#3a463f} /* Scroll-Reveal: versteckt nur, wenn JavaScript läuft (html.js) – ohne JS bleiben alle Inhalte sichtbar, keine leeren Flächen */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s} .js .reveal.in{opacity:1;transform:none} /* Focus sichtbar */ a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px} /* ---------- Responsive ---------- */ @media(max-width:960px){ .grid4{grid-template-columns:repeat(2,1fr)} .service{border-bottom:1px solid var(--line)} .service:nth-child(3n){border-right:1px solid var(--line)} /* 3er-Ausnahme aufheben */ .service:nth-child(2n){border-right:none} .service:nth-last-child(-n+2){border-bottom:none} /* letzte Reihe ohne untere Linie */ } @media(max-width:820px){ .hero,.trust,.contact{grid-template-columns:1fr} .hero-copy,.trust-copy,.contact-copy{border-right:none;border-bottom:1px solid var(--ink)} .steps{grid-template-columns:1fr} .step{border-right:none;border-bottom:1px solid var(--line)} .step:last-child{border-bottom:none} } @media(max-width:560px){ .grid4{grid-template-columns:1fr} .service{border-right:none!important;border-bottom:1px solid var(--line)!important} .service:last-child{border-bottom:none!important} .hero-copy .btn + .btn{margin-left:0;margin-top:10px} .btn{display:block;text-align:center} } /* Reduced Motion */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} h1 .laeuft::after{transform:scaleX(1)} .panel-row{opacity:1;transform:none} html{scroll-behavior:auto} } .blink-heart{ color:var(--signal); animation:heartBlink 1.2s ease-in-out infinite; } @keyframes heartBlink{ 0%,100%{opacity:1} 50%{opacity:.25} } footer a{border-bottom:1px solid var(--line)} /* ---------- Unterseiten (Wartung & Reparatur) ---------- */ .crumbs{ padding:14px var(--gutter);border-bottom:1px solid var(--line); font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:var(--moss); } .crumbs a{text-decoration:none;border-bottom:1px solid var(--line)} .crumbs a:hover{color:var(--signal)} /* Sub-Hero: gleiche Zweispalten-Bühne wie die Startseite (.hero), nur kleinerer Titel */ .sub-hero h1{font-size:clamp(2.2rem,6vw,4.2rem)} .sub-hero h1 .laeuft{white-space:normal} /* Zweispalten-Block: Text links, Panel/Karte rechts auf Streifen-Fläche */ .duo{display:grid;grid-template-columns:1.25fr 1fr} .duo-main{border-right:1px solid var(--ink)} .duo-side{ display:flex;align-items:center;justify-content:center; padding:clamp(36px,5vw,64px) var(--gutter); background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(29,42,38,.035) 10px 11px); } .duo-side .alarm{margin:0} @media(max-width:820px){ .duo{grid-template-columns:1fr} .duo-main{border-right:none;border-bottom:1px solid var(--ink)} } .prose{padding:clamp(40px,6vw,64px) var(--gutter);max-width:70ch} .prose h2{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2rem);margin:0 0 16px} .prose h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.15rem;margin:26px 0 10px} .prose p{margin-bottom:16px;color:#3a463f;hyphens:auto;-webkit-hyphens:auto} .prose p:last-child{margin-bottom:0} .prose ol{padding-left:22px;color:#3a463f} .prose li{margin-bottom:10px} .prose code{ font-family:"IBM Plex Mono",monospace;background:#f3f3ee; padding:2px 6px;border:1px solid var(--line);border-radius:2px; word-break:break-all; } /* Raster mit Lücken-Technik: Die 1px-Lücken zeigen die Hintergrundfarbe -> automatisch überall genau eine Trennlinie, auch beim Umbruch auf eine Spalte. */ .incl,.sym{display:grid;gap:1px;background:var(--line)} .incl{grid-template-columns:repeat(2,1fr)} .sym{grid-template-columns:repeat(3,1fr)} .incl-item,.sym-item{background:var(--paper);padding:28px var(--gutter)} .incl-item h3,.sym-item h3{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:8px} .incl-item p,.sym-item p{font-size:.93rem;color:#3a463f;margin:0;hyphens:auto;-webkit-hyphens:auto} .incl-item .mono,.sym-item .mono{color:var(--signal);display:block;margin-bottom:10px} .pricebox{ margin:clamp(34px,5vw,48px) calc(var(--gutter) + 8px) clamp(48px,6vw,72px) var(--gutter); border:1px solid var(--ink);border-radius:var(--radius); background:var(--card);box-shadow:6px 6px 0 0 var(--ink); max-width:520px; } .pricebox-head{padding:18px 24px;border-bottom:1px solid var(--ink)} .pricebox .big{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1} .pricebox ul{list-style:none;padding:8px 24px 20px} .pricebox li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem;display:flex;gap:10px} .pricebox li:last-child{border-bottom:none} .pricebox li::before{content:"✓";color:var(--ok);font-weight:700;flex:none} .pricebox .btn{margin:6px 24px 24px;display:block;text-align:center} /* Preisbox auf voller Breite: zentriert auf der Streifen-Fläche wie das Hero-Panel */ .pricebox-wrap{ display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:clamp(20px,3vw,36px); padding:clamp(40px,6vw,72px) var(--gutter); background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(29,42,38,.035) 10px 11px); } .pricebox-wrap .pricebox{margin:0;flex:1 1 320px} .alarm{ margin:clamp(36px,5vw,56px) var(--gutter) clamp(44px,6vw,64px); border:1px solid var(--signal);border-left:5px solid var(--signal); border-radius:var(--radius);background:#fbeceb;padding:22px 24px; max-width:70ch; } .alarm h3{font-family:"Archivo",sans-serif;font-weight:800;margin-bottom:10px;color:#9a241d} .alarm p{font-size:.95rem;color:#7a2b25;margin-bottom:8px} .alarm p:last-child{margin-bottom:0} .alarm code{font-family:"IBM Plex Mono",monospace;background:#fff;padding:2px 6px;border:1px solid #e6bdb9;border-radius:2px;font-size:.88rem} .alarm a{text-decoration:none;border-bottom:1px solid #c98c86;font-weight:600} .alarm a:hover{color:var(--signal);border-color:var(--signal)} @media(max-width:700px){.incl{grid-template-columns:1fr}} @media(max-width:800px){.sym{grid-template-columns:1fr}} footer a:hover{color:var(--signal);border-color:var(--signal)} /* ---------- WhatsApp-Button (unten rechts, auf allen Leistungsseiten) ---------- */ .wa-btn{ position:fixed;right:18px;bottom:18px;z-index:60; width:56px;height:56px;border-radius:50%; background:#25d366; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 16px rgba(29,42,38,.3); transition:transform .15s ease,box-shadow .15s ease; } .wa-btn:hover{transform:scale(1.07);box-shadow:0 6px 20px rgba(29,42,38,.38)} .wa-btn svg{width:30px;height:30px;fill:#fff} @media(max-width:700px){.wa-btn{right:14px;bottom:14px;width:52px;height:52px}} @media print{.wa-btn{display:none}} /* ---------- Footer: dunkler Seitenabschluss mit allen Links ---------- */ footer{display:block;padding:0;border-top:none;background:var(--ink);color:#aebbb2} .foot-grid{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px var(--gutter); padding:clamp(44px,6vw,72px) var(--gutter) clamp(32px,4vw,48px); } .foot-logo{ display:flex;align-items:center;gap:.55em; font-family:"Archivo",sans-serif;font-weight:900;letter-spacing:.05em; font-size:1.05rem;color:var(--paper);text-transform:uppercase; } .foot-logo .dot{width:11px;height:11px;border-radius:50%;background:var(--signal);flex:none;display:inline-block} .foot-brand p{ font-family:"Instrument Sans",system-ui,sans-serif; font-size:.9rem;line-height:1.65;letter-spacing:0;text-transform:none; color:#aebbb2;max-width:36ch;margin-top:16px; } .foot-brand .foot-love{ font-family:"IBM Plex Mono",monospace; font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:#84978c;margin-top:18px; } .foot-head{ display:block;font-family:"IBM Plex Mono",monospace; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:#84978c;margin-bottom:15px; } .foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px} .foot-col a,.foot-col span:not(.foot-head){ font-family:"Instrument Sans",system-ui,sans-serif; font-size:.92rem;letter-spacing:0;text-transform:none; color:#dfe6e1;text-decoration:none;line-height:1.4; } .foot-col a{border-bottom:1px solid transparent} .foot-col a:hover{color:#fff;border-color:var(--signal)} .foot-bottom{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px; padding:20px var(--gutter); border-top:1px solid rgba(243,243,238,.16); font-family:"IBM Plex Mono",monospace; font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#84978c; } .foot-claim{color:var(--paper)} .foot-claim .sig{color:var(--signal)} @media(max-width:940px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:540px){.foot-grid{grid-template-columns:1fr}} /* ---------- Porträt im Über-uns-Bereich (Freisteller auf Werkstatt-Karte) ---------- */ .portrait{max-width:290px;margin-top:40px} .portrait .stage{position:relative} .portrait .stage::before{ content:"";position:absolute;left:0;right:0;bottom:0;top:16%; background:var(--card) repeating-linear-gradient(45deg,transparent 0 10px,rgba(29,42,38,.035) 10px 11px); border:1px solid var(--ink);border-radius:var(--radius); box-shadow:2px 2px 10px 0px var(--ink); } .portrait img{ position:relative;display:block;width:88%;margin:0 auto;height:auto; filter:drop-shadow(0 10px 14px rgba(29,42,38,.18)); } .portrait figcaption{ font-family:"IBM Plex Mono",monospace; font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; color:var(--moss);margin-top:14px; display:flex;align-items:center;gap:8px; } .portrait figcaption::before{ content:"";width:8px;height:8px;border-radius:50%; background:var(--signal);flex:none; } /* ---------- Header: Leistungen-Dropdown, aktive Seite, Scroll-Schatten ---------- */ header{transition:box-shadow .2s ease, transform .32s ease} header.scrolled{box-shadow:0 6px 18px rgba(29,42,38,.09)} /* Beim Runterscrollen sanft nach oben weggleiten (per app.js gesteuert) */ header.header-hidden{transform:translateY(-100%)} @media(prefers-reduced-motion:reduce){ header{transition:box-shadow .2s ease} header.header-hidden{transform:none} } .has-sub{position:relative;display:flex} .has-sub .sub-trigger{gap:.4em} .has-sub .caret{font-size:.62em;transition:transform .2s ease;position:relative;top:1px} .has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)} .submenu{ display:none;position:absolute;top:100%;left:0;min-width:240px; list-style:none;margin:0;padding:0;z-index:60; background:var(--paper);border:1px solid var(--ink);border-top:none; box-shadow:0 12px 22px rgba(29,42,38,.12); } .has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block} .submenu a{ display:block;padding:13px 20px;font-size:.9rem;font-weight:500; text-decoration:none;white-space:nowrap; border-left:none;border-top:1px solid var(--line); } .submenu li:first-child a{border-top:none} .submenu a:hover{background:var(--ink);color:var(--paper)} /* aktive Seite markieren */ header nav > a[aria-current="page"], .has-sub.current > .sub-trigger{box-shadow:inset 0 -3px 0 0 var(--signal)} .submenu a[aria-current="page"]{color:var(--signal);font-weight:600} /* Header wird früher zum Hamburger (1024px), damit die volle Navigation auf den Seiten mit vielen Menüpunkten nicht gedrängt wird */ @media(max-width:1200px){ .burger{display:flex} header nav{ display:none!important;position:absolute;top:100%;left:0;right:0; flex-direction:column;background:var(--paper); border-bottom:1px solid var(--ink); box-shadow:0 10px 20px rgba(29,42,38,.08); } header.nav-open nav{display:flex!important} header nav a{padding:16px var(--gutter);border-left:none;border-top:1px solid var(--line);font-size:1rem} header nav a.cta{border-top:1px solid var(--ink)} .has-sub{flex-direction:column} .has-sub .caret{display:none} .submenu{display:block;position:static;min-width:0;border:none;box-shadow:none} .submenu a{padding:14px var(--gutter) 14px calc(var(--gutter) + 18px);font-size:.95rem;color:var(--moss)} .submenu a:hover{color:var(--paper)} header nav > a[aria-current="page"], .has-sub.current > .sub-trigger{box-shadow:inset 3px 0 0 0 var(--signal)} } /* ---------- Hinweis in der Preisbox: was NICHT im Preis enthalten ist ---------- */ .pricebox .preis-hinweis{ margin:0 24px 20px;padding:13px 15px; background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius); font-size:.85rem;line-height:1.55;color:#3a463f; } .pricebox .preis-hinweis strong{color:var(--ink)}