@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-latin-800-normal.woff2') format('woff2')} /* Ersatzschrift mit den Massen von Manrope. Bis die Schrift geladen ist (font-display:swap), stand bisher Segoe UI da, 3-5 % schmaler: Nach dem Tausch brachen Zeilen anders um, der Hero sprang (Desktop CLS bis 0,027 auf den Leistungsseiten, 0,034 auf der neuen Startseite). Arial, auf Manrope-Breite skaliert, bricht genauso um. Werte im Browser gemessen (Breite Manrope : Arial je Gewicht, Ober-/Unterlaenge 1,066/0,300 em); die Overrides werden mit size-adjust mitskaliert, daher Wert/size-adjust. Ohne Arial (Android) greift wie bisher die naechste Schrift im Stapel. 500 fehlt bewusst, das Gewicht wird nirgends verwendet. Gilt fuer alle Seiten (frueher nur start.css). */ @font-face{font-family:'Manrope Fallback';src:local('Arial'),local('ArialMT');font-weight:400;size-adjust:102.82%;ascent-override:103.68%;descent-override:29.18%;line-gap-override:0%} @font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;size-adjust:99.58%;ascent-override:107.05%;descent-override:30.13%;line-gap-override:0%} @font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:101.25%;ascent-override:105.28%;descent-override:29.63%;line-gap-override:0%} @font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800;size-adjust:102.94%;ascent-override:103.56%;descent-override:29.14%;line-gap-override:0%} /* Versalien (text-transform:uppercase) sind in Arial Bold deutlich breiter als in Manrope: Manrope erreicht dort nur 93-96 % der Arial-Breite statt 101 % wie bei gemischtem Text. Mit der normalen Ersatzschrift brach z. B. das Hero-Label auf dem Handy zweizeilig um und sprang beim Schriftwechsel zurueck. Deshalb eine eigene, an den Versal-Texten der Seiten gemessene Ersatzschrift (--font-caps). */ @font-face{font-family:'Manrope Fallback Caps';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;size-adjust:92.9%;ascent-override:114.75%;descent-override:32.29%;line-gap-override:0%} @font-face{font-family:'Manrope Fallback Caps';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:93.9%;ascent-override:113.53%;descent-override:31.95%;line-gap-override:0%} @font-face{font-family:'Manrope Fallback Caps';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800;size-adjust:96.1%;ascent-override:110.93%;descent-override:31.22%;line-gap-override:0%} :root{ /* Farbwerte sind auf WCAG 2.1 AA geprueft (Kontrast in Klammern): --accent Text auf weiss 5.12 / auf --soft 4.73 / weiss darauf 5.12 / auf --dark 3.54 --muted Text auf weiss 5.07 / auf --soft 4.68 --warn Text auf --warn-bg 4.89 --field Feldrand gegen weiss 3.26 (1.4.11 Nicht-Text-Kontrast) Beim Aufhellen eines dieser Werte faellt der jeweilige Kontrast unter 4.5 bzw. 3.0. */ --accent:#2A62F0; --accent-dark:#1E50D8; --accent-soft:#EAF0FF; --ink:#14161B; --text:#3C424B; --muted:#696F78; --bg:#FFFFFF; --soft:#F5F6F8; --line:#E7E9ED; --field:#888F9B; --dark:#14161B; --ok-bg:#E6F6EE; --ok:#127a4f; --warn-bg:#FFF3DE; --warn:#8F6200; --font:'Manrope','Manrope Fallback','Segoe UI',system-ui,-apple-system,sans-serif; --font-caps:'Manrope','Manrope Fallback Caps','Segoe UI',system-ui,-apple-system,sans-serif; --r:16px; --shadow:0 24px 50px -30px rgba(20,22,27,.35); --chip:0 12px 30px -12px rgba(20,22,27,.25); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden} /* Alle Versal-Elemente (text-transform:uppercase) mit der Versal-Ersatzschrift, siehe oben. Neue Versal-Elemente hier ergaenzen. */ .label,.card-panel .top em,.gauge .num small,.plan .pt,.f-col h3,.stat .c,.proj .pchip,.cmp td::before,.qc-pk span{font-family:var(--font-caps)} a{color:inherit;text-decoration:none} h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:-.025em} .wrap{max-width:1200px;margin:0 auto;padding:0 24px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px} .skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}.skip:focus{left:8px} svg{display:block} /* Icons: MingCute, Stil Fill (Apache 2.0, mingcute.com), seit 26.10.2026; vorher Feather-Linien. Die Formen fuellt currentColor. Einzelne Icons (z. B. Menue) bringen ihren Strich als Attribut im SVG mit, deshalb hier keine Strich-Regeln. Neue Icons: die Fill-Variante mit viewBox 0 0 24 24 als einsetzen. */ .ico{fill:currentColor} .label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .h-sec{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.03em} .lead{font-size:clamp(17px,2vw,20px);color:var(--muted);margin-top:16px} .center{text-align:center}.center .lead{margin-left:auto;margin-right:auto;max-width:62ch} section{padding:clamp(64px,8vw,108px) 0} .soft{background:var(--soft)}.divide{border-top:1px solid var(--line)} .mt14{margin-top:14px} .btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:700;font-size:16px;padding:15px 28px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,color .15s,border-color .15s} .btn .ico{width:18px;height:18px} .btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} header{position:fixed;inset:0 0 auto;z-index:200;border-bottom:1px solid transparent;transition:background .25s,border-color .25s,box-shadow .25s} header.solid{background:rgba(255,255,255,.92);border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(20,22,27,.03)} .nav{display:flex;align-items:center;justify-content:space-between;height:78px} .logo{display:block}.logo img{display:block;height:36px;width:auto} .nav-links{display:flex;gap:30px}.nav-links a{font-size:15px;font-weight:600;color:var(--text);transition:color .15s}.nav-links a:hover{color:var(--accent)} .nav-r{display:flex;align-items:center;gap:14px} .burger{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px}.burger .ico{width:27px;height:27px} .mobile{display:none;background:#fff;border-bottom:1px solid var(--line);padding:8px 0 16px}.mobile a{display:block;padding:11px 24px;font-weight:700;color:var(--ink)} @media(max-width:980px){.nav-links,.nav-r .btn{display:none}.burger{display:block}.mobile.open{display:block}} .hero{padding:148px 0 86px;background:radial-gradient(120% 80% at 80% 0%, #F7FAFF 0%, #FFFFFF 60%)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center} /* Grid-Items duerfen unter ihre min-content-Breite schrumpfen. Ohne das sprengt ein langer, unumbrechbarer String (z. B. ein Dateipfad) das gesamte Seitenlayout. */ .hero-grid>*{min-width:0} @media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}} .hero h1{font-size:clamp(36px,5.8vw,66px);letter-spacing:-.035em;margin-top:20px} /* Wortwechsel im H1: Der Begriff steht auf einer eigenen Zeile, seine Breite kann den Zeilenumbruch des restlichen Satzes also nicht mehr veraendern. Schon vor app.js als Block (seit 26.10.2026): Danach ist er ohnehin ein Grid, so bricht die H1 beim Laden nicht um. Das breiteste Wort haelt als Platzhalter (data-ghost, siehe unten) Breite und Hoehe fest, falls ein laengerer Begriff auf schmalen Displays zweizeilig umbricht. Ohne das verschiebt jeder Wechsel den halben Hero nach unten (CLS 0,19 auf dem Handy). */ .hero h1 .rot{color:var(--accent);display:block} .hero h1 .rot.rot-ready{display:grid;justify-items:start} /* Ohne Umbrucherlaubnis setzt ein langer Begriff ("zusammenarbeiten") die Mindestbreite der Grid-Spalte und sprengt auf 320px-Displays das Layout. */ .hero h1 .rot.rot-ready>*{grid-area:1/1;overflow-wrap:anywhere;hyphens:auto} .hero h1 .rot .rot-word{transition:opacity .22s,transform .22s} /* Breite in em statt ch (21.10.2026): ch haengt von der Schrift ab (Manrope 0.61em, Ersatzschrift 0.57em). Mit 52ch war die Zeile vor dem Laden von Manrope 6 % schmaler und brach anders um (Layout-Sprung zwischen 600 und 900 px). 31.72em = 52ch in Manrope, dort aendert sich nichts. */ .hero .sub{margin-top:22px;font-size:clamp(17px,2.1vw,21px);color:var(--muted);max-width:31.72em} .hero .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px} .hero .small{margin-top:26px;font-size:14px;color:var(--muted)}a.tel{color:var(--accent);font-weight:700;white-space:nowrap} .card-panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden} .card-panel .top{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--soft)} .card-panel .top i{width:11px;height:11px;border-radius:50%;background:#D8DCE2;display:block} .card-panel .top span{margin-left:8px;font-size:13px;font-weight:600;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .card-panel .top em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);padding:3px 9px;border-radius:99px} /* Gauge */ .perf .bd{padding:26px 26px 28px;display:flex;gap:26px;align-items:center} @media(max-width:420px){.perf .bd{flex-direction:column;gap:18px}} .gauge{position:relative;width:128px;height:128px;flex:0 0 auto}.gauge svg{width:128px;height:128px} .gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .gauge .num b{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1} .gauge .num small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px} .metrics{flex:1;min-width:0;width:100%} .metric{margin-bottom:16px}.metric:last-child{margin-bottom:0} .metric .mt{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px} .metric .mt .k{color:var(--muted);font-weight:600}.metric .mt .v{color:var(--ink);font-weight:800} .bar{height:7px;border-radius:99px;background:var(--soft);overflow:hidden} .bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width 1.1s cubic-bezier(.2,.7,.2,1)} /* Scan */ .scan .bd{padding:8px 22px 18px} .row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0} .row .k{display:flex;align-items:center;gap:11px;font-weight:600;color:var(--ink);font-size:15px}.row .k .ico{width:18px;height:18px;color:var(--muted)} /* Status-Badge wie Bootstrap 5.3 (.badge mit .text-bg-success bzw. .text-bg-warning, seit 26.10.2026): 0.75rem, fett, Zeilenhoehe 1, Innenabstand .35em .65em, Radius .375rem, volle Farbflaeche. Kontrast: Weiss auf #198754 4.53:1, Schwarz auf #ffc107 12.6:1, Weiss auf #6c757d (Grundzustand, solange app.js noch nicht gefuellt hat) 4.69:1. Das Icon steht in Texthoehe davor, der Abstand entspricht Bootstraps gap-1. */ .badge{display:inline-flex;align-items:center;gap:.25rem;padding:.35em .65em;font-size:.75rem;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.375rem;background:#6c757d;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s} .badge.show{opacity:1;transform:none}.badge .ico{width:1em;height:1em} /* Leer, bis app.js Haken und Text einsetzt: Ein geschuetztes Leerzeichen gibt dem leeren Badge schon die Zeilenhoehe des gefuellten. Sonst wuchs die Statuskarte beim Fuellen um rund 35px (CLS); seit dem Wegfall des Einblendens am 26.10.2026 ist sie dabei schon sichtbar. */ .badge:empty::before{content:"\00a0"} .badge.ok{background:#198754;color:#fff}.badge.warn{background:#ffc107;color:#000} /* Code */ .code{background:var(--dark);border:1px solid #1f232b} .code .top{background:#1b1e25;border-bottom-color:rgba(255,255,255,.08)} .code .top i{background:rgba(255,255,255,.18)}.code .top span{color:rgba(255,255,255,.55)} .code pre{padding:22px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7;color:#e6e8ec;overflow-x:auto} .code .c{color:#7b828c}.code .s{color:#9aa1ac}.code .k{color:#9fc1ff} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.svc-grid{grid-template-columns:1fr}} .svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;transition:transform .18s,box-shadow .18s,border-color .18s} .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .svc .sq{width:52px;height:52px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}.svc .sq .ico{width:25px;height:25px} .svc h3{font-size:20px;margin-bottom:9px}.svc p{font-size:15px;color:var(--text)} .signs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto} @media(max-width:680px){.signs{grid-template-columns:1fr}} .sign{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px} .sign .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--warn-bg);color:var(--warn);display:flex;align-items:center;justify-content:center}.sign .ic .ico{width:18px;height:18px} .sign p{font-size:15px;color:var(--text)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 24px} @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps{grid-template-columns:1fr}} .step{border-top:2px solid var(--accent-soft);padding-top:18px} .step .n{font-size:15px;font-weight:800;color:var(--accent)}.step h3{font-size:18px;margin:10px 0 8px}.step p{font-size:14.5px;color:var(--text)} .nots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto} @media(max-width:680px){.nots{grid-template-columns:1fr}} .not{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--text)} .not .ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;margin-top:1px}.not .ic .ico{width:15px;height:15px} .not b{color:var(--ink);font-weight:700} .strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px} .strip .chip{font-weight:600;font-size:16px;color:var(--text);border:1px solid var(--line);border-radius:100px;padding:9px 18px;background:#fff} .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start} @media(max-width:900px){.price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}} .plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 30px;position:relative} .plan.pop{border:2px solid var(--accent);box-shadow:var(--shadow)} .plan .pt{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:100px} .plan h3{font-size:22px;margin-bottom:4px}.plan .for{font-size:14.5px;color:var(--muted);margin-bottom:20px} .plan .price{font-size:24px;font-weight:800;color:var(--ink);padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px;letter-spacing:-.02em} .plan ul{list-style:none;display:grid;gap:13px;margin-bottom:26px}.plan li{display:flex;gap:11px;align-items:flex-start;font-size:15px}.plan li .ico{width:19px;height:19px;flex:0 0 auto;margin-top:3px;color:var(--accent)} .plan .btn{width:100%;justify-content:center} .faq-list{max-width:780px;margin:0 auto} .faq{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden} .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:17px;font-weight:700;color:var(--ink);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq-q .pm{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;transition:transform .2s} .faq.open .faq-q .pm{transform:rotate(45deg)} .faq-a-in{padding:0 22px 20px;color:var(--text);font-size:15.5px} /* Auf- und Zuklappen ueber die Grid-Zeilenhoehe (0fr/1fr) statt ueber max-height in Pixeln. Die Pixelvariante musste beim Oeffnen ausgemessen werden und blieb danach eingefroren: Nach dem Drehen des Handys war die Antwort abgeschnitten. Ohne Skript greift der Block nicht, dann stehen alle Antworten offen da statt unerreichbar zu sein. Muss NACH der Basisregel stehen: @media erhoeht die Spezifitaet nicht. */ @media(scripting:enabled){ .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease} .faq.open .faq-a{grid-template-rows:1fr} .faq-a>*{min-height:0;overflow:hidden} /* Der Innenabstand muss mitwandern: Padding laesst sich nicht auf 0 stauchen und wuerde sonst 20px toten Streifen unter jeder geschlossenen Frage stehen lassen. */ .faq-a-in{padding-bottom:0;transition:padding-bottom .25s ease} .faq.open .faq-a-in{padding-bottom:20px} } .ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px}@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:36px}} .ct-h{font-size:clamp(28px,4.2vw,46px)} .mail{display:inline-flex;align-items:center;gap:11px;font-size:clamp(18px,2.2vw,24px);font-weight:800;color:var(--ink);margin-top:22px}.mail .ico{width:21px;height:21px;color:var(--accent);transition:transform .15s}.mail:hover .ico{transform:translateX(4px)} .ct dl{margin-top:28px;display:grid;gap:15px;font-size:14.5px}.ct dt{color:var(--muted)}.ct dd{color:var(--ink);font-weight:600;margin-top:3px} /* Terminlink (Google Kalender) im Kontaktbereich: unterstrichen, weil a{color:inherit} ihn sonst wie Text aussehen liesse (Akzent auf Weiss 5.1:1). */ .ct dd a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.ct dd a:hover{color:var(--accent-dark)} .form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)} .form .f{margin-bottom:16px}.form label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:7px} /* --field statt --line: Die Fuellung (--soft) hebt sich mit 1.08:1 nicht von der weissen Formularkarte ab, das Feld ist also allein am Rand erkennbar. Der braucht dafuer 3:1. */ .form input,.form textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--soft);border:1px solid var(--field);border-radius:11px;padding:13px 15px} .form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)} /* Chrome faerbt Platzhalter standardmaessig #757575, auf der grauen Fuellung nur 4.26:1. opacity:1 ist noetig, weil Firefox Platzhalter sonst zusaetzlich transparent zeichnet. */ .form input::placeholder,.form textarea::placeholder{color:var(--muted);opacity:1} .form textarea{min-height:120px;resize:vertical}.form .btn{width:100%;justify-content:center} .consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.5;margin:4px 0 18px}.consent input{margin-top:3px;accent-color:var(--accent);width:auto}.consent a{color:var(--accent);text-decoration:underline} .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} footer{background:var(--dark);color:#aab0ba;padding:60px 0 34px} .f-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)} .f-brand{max-width:300px}.f-brand .logo{display:inline-block;margin-bottom:12px}.f-brand .logo img{filter:brightness(0) invert(1)}.f-brand p{font-size:14.5px} /* h3 statt h4: Davor steht zuletzt ein h2, der Sprung auf h4 uebersprang eine Ebene. Die Optik bleibt bewusst klein - Ueberschriftenrang und Schriftgroesse sind zweierlei. */ .f-col h3{color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}.f-col a{display:block;color:#aab0ba;font-size:14.5px;padding:5px 0;transition:.15s}.f-col a:hover{color:#fff} .f-bot{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#7e858f}.f-bot a{color:inherit;text-decoration:underline;text-underline-offset:3px}.f-bot a:hover{color:var(--ink)} .cc{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:250;max-width:30rem;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -28px rgba(20,22,27,.35);padding:22px 22px 18px} @media(min-width:640px){.cc{left:1.5rem;right:auto}} .cc[hidden]{display:none} .cc h4{font-size:15px;color:var(--ink)}.cc p{font-size:14px;color:var(--text);margin-top:8px}.cc p a{color:var(--accent);text-decoration:underline} .cc .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding:0;border:0} .cc .b{font-family:inherit;font-weight:700;font-size:14px;border-radius:10px;padding:11px 18px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);transition:.15s}.cc .b:hover{border-color:var(--ink)} .cc .b.pri{background:var(--accent);color:#fff;border-color:var(--accent)}.cc .b.pri:hover{background:var(--accent-dark)}@media(max-width:640px){.cc{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;padding:14px 16px 12px}.cc h4{font-size:14px}.cc p{font-size:13px;line-height:1.45;margin-top:4px}.cc .row{margin-top:10px;gap:8px}.cc .b{padding:9px 14px;font-size:13px}} /* Kein Einblenden beim Scrollen (seit 26.10.2026, wie in der Vorlage "Agency / The7"): Inhalte stehen sofort da. Bewegung gibt es nur beim Wechselwort, in den Statuskarten und beim Hover. */ @media(prefers-reduced-motion:reduce){.badge{opacity:1;transform:none;transition:none}.btn,.svc,.bar i,.hero h1 .rot .rot-word,.faq-a,.faq-q .pm{transition:none}} /* ===== Startseite ===== */ .hero.xl h1{font-size:clamp(38px,6.4vw,72px)} @media(max-width:980px){.nav-r .btn.always{display:inline-flex}} /* Auf schmalen Displays wird der Button sonst zweizeilig (87px hoch) und ragt aus dem 78px hohen Header heraus, direkt ueber das Logo. */ @media(max-width:420px){.nav-r .btn.always{padding:11px 15px;font-size:15px;white-space:nowrap}} .stats{background:var(--dark);color:#fff} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center} @media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;gap:40px 20px}} .stat .n{font-size:clamp(40px,6vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff} .stat .n .s{color:var(--accent)} .stat .c{margin-top:11px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9aa1ac} .svc-note,.proj-note,.val-note{text-align:center;color:var(--muted);font-size:15px;margin-top:30px} .svc-note a{color:var(--accent);font-weight:700} .val-note a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px} a.svc{display:block} .tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:32px 0 38px} .tab{font-family:inherit;font-size:14.5px;font-weight:700;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 20px;cursor:pointer;transition:.15s} /* Zustand haengt direkt an aria-pressed, damit Optik und Vorlesetext nicht auseinanderlaufen koennen. Vorher trug eine .active-Klasse die Optik und die ARIA fehlte ganz. */ .tab:hover{border-color:var(--accent);color:var(--accent)}.tab[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} /* Nur fuer Vorlesehilfen: meldet nach dem Filtern, was jetzt zu sehen ist. */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:900px){.proj-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.proj-grid{grid-template-columns:1fr}} .proj{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:transform .18s,box-shadow .18s} .proj:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .proj .ptop{height:148px;display:flex;align-items:center;justify-content:center;position:relative;color:#fff} .proj .ptop .ico{width:38px;height:38px;opacity:.95} .proj .ptop.a{background:var(--accent)}.proj .ptop.d{background:var(--dark)}.proj .ptop.s{background:#3F4754} /* Dunkles statt hellem Glas: weisser Text auf der aufgehellten blauen Kachel kam nur auf 3.37:1. Abgedunkelt sind es 8.6:1 (blau), 18.1:1 (dunkel), 11.6:1 (grau). */ .proj .pchip{position:absolute;top:14px;left:14px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(20,22,27,.32);color:#fff;border-radius:100px;padding:5px 12px} .proj .info{padding:22px 22px 24px}.proj .info h3{font-size:18px;margin-bottom:6px}.proj .info p{font-size:14.5px;color:var(--muted)} .proj.hide{display:none} .cta{background:var(--dark);color:#fff;text-align:center} .cta .label{color:#9aa1ac} .cta h2{color:#fff;font-size:clamp(30px,5vw,56px);max-width:20ch;margin:14px auto 28px} .cta h2 em{font-style:normal;color:var(--accent)} .btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--accent);color:#fff;transform:translateY(-2px)} .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:820px){.val-grid{grid-template-columns:1fr}} .val{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px} .val .sq{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .val .sq .ico{width:23px;height:23px} .val h3{font-size:19px;margin-bottom:8px}.val p{font-size:15px;color:var(--text)} /* Bewertungen unter "Warum Kunden mit mir arbeiten" (Startseiten), wortgetreu aus Malt. Schlicht wie .val: keine Avatare, kein grosses Anfuehrungszeichen. Drei Spalten erst ab 1001px, darunter eine Spalte mit begrenzter Breite (die lange Bewertung wuerde sonst sehr hoch). Sterne (.rev-stars) zeigen die tatsaechliche Bewertung auf Malt (laut Inhaber je 5 von 5, 21.10.2026): eine SVG mit fester Groesse, Name "5 von 5 Sternen" im aria-label, Farbe #D97706 auf Weiss 3.19:1 (Grafik mind. 3:1). Bei neuen Bewertungen die echte Sternzahl uebernehmen. */ .rev-h{text-align:center;font-size:clamp(20px,2.4vw,24px);margin-top:clamp(48px,6vw,72px)} .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px} @media(max-width:1000px){.rev-grid{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto}} .rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:14px} .rev-stars{display:block;width:90px;height:17px;fill:#D97706} .rev blockquote{margin:0}.rev blockquote p{font-size:15.5px;color:var(--text)} .rev figcaption{margin-top:auto;padding-top:4px;font-size:14.5px;color:var(--ink)}.rev figcaption span{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)} .steps.s3{grid-template-columns:repeat(3,1fr)} @media(max-width:820px){.steps.s3{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps.s3{grid-template-columns:1fr}} .founder{background:var(--soft)} .founder-wrap{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:center} @media(max-width:760px){.founder-wrap{grid-template-columns:1fr;gap:28px;text-align:center}} .avatar{width:200px;height:200px;border-radius:24px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:72px;font-weight:800;letter-spacing:-.04em;margin:0 auto} @media(max-width:760px){.avatar{width:150px;height:150px;font-size:54px}} .founder .quote{font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--ink);line-height:1.3;margin:10px 0 20px;letter-spacing:-.02em} .founder .quote em{font-style:normal;color:var(--accent)} .founder .name{font-size:19px;font-weight:800;color:var(--ink)}.founder .role{color:var(--muted);font-size:15px;margin-bottom:16px} .founder .socials{display:flex;gap:12px;flex-wrap:wrap}@media(max-width:760px){.founder .socials{justify-content:center}} .founder .socials a{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:.15s} .founder .socials a:hover{border-color:var(--accent);color:var(--accent)}.founder .socials .ico{width:19px;height:19px} .form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:560px){.form .two{grid-template-columns:1fr}} .form fieldset{border:0} .form legend{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px} .scope{display:flex;flex-wrap:wrap;gap:8px} .scope label{cursor:pointer} .scope input{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .scope span{display:inline-block;border:1px solid var(--field);border-radius:100px;padding:8px 15px;font-size:14px;font-weight:600;color:var(--text);transition:.15s} .scope label:hover span{border-color:var(--accent);color:var(--accent)} .scope input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)} .scope input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px} /* ===== Rechtsseiten ===== */ .first{padding-top:150px} /* Lange Komposita ("Verbraucherstreitbeilegung", "Datenschutz-Aufsichtsbehoerde") passen auf 320px-Displays in keine Zeile. Ohne Umbruch schneidet body{overflow-x:hidden} sie ab. */ .legal{max-width:820px;overflow-wrap:break-word;hyphens:auto} /* 24px bei 320px Breite: "Datenschutzerklaerung" passt damit noch in eine Zeile. Groesser bricht das Wort mitten durch, denn auf hyphens:auto ist kein Verlass (Chrome laedt das deutsche Trennwoerterbuch erst bei Bedarf nach). */ .legal h1{font-size:clamp(24px,7vw,48px);margin-top:14px} .legal h2{font-size:23px;margin:38px 0 10px} .legal h3{font-size:18px;margin:26px 0 8px} .legal p{margin:10px 0;font-size:16px} .legal ul{margin:10px 0 10px 22px} .legal li{margin:6px 0;font-size:16px} .legal .todo{background:var(--warn-bg);border:1px solid #f0deb6;color:#6b4d00;border-radius:12px;padding:16px 18px;font-size:14.5px;margin:24px 0} .legal .todo b{color:#6b4d00} .legal .ph{background:var(--accent-soft);border-radius:6px;padding:1px 7px;font-weight:700;color:var(--accent-dark)} /* ===== Sitemap (sitemap/index.html) ===== */ /* Liste ohne Punkte, daher role="list" am