@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap} @font-face{font-family:"Schibsted Grotesk";src:url("/fonts/schibsted-grotesk-latin-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap} :root{ --nacht:#071827; --nacht-2:#102b40; --blau:#1b6cb0; --blau-hell:#dcecf8; --eis:#eef5f8; --papier:#f7f8f6; --weiss:#fff; --text:#132534; --muted:#61717d; --linie:#cdd8de; --raum:clamp(1.25rem,4vw,4.5rem); --breite:90rem; --textmass:42rem; } *{box-sizing:border-box;margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--papier);font-size:1.0625rem;line-height:1.62} /* Silbentrennung fuer die Ueberschriften. Deutsche Komposita sind laenger als der Platz auf einem Telefon: "Datenschutzerklaerung" ist bei 390 px Fensterbreite 473 px breit, die Spalte 350 px - die Seite liess sich am 02.09.2026 seitlich schieben. hyphens:auto greift nur, wenn ein Wort sonst nicht passt; overflow-wrap ist die Reissleine fuer Woerter, fuer die es keine Trennstelle gibt. steht, die Trennmuster passen. */ h1,h2,h3{font-weight:650;line-height:1.04;letter-spacing:-.035em;text-wrap:balance;color:var(--nacht);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word} h1{font-size:clamp(2.75rem,6.2vw,6.8rem)} h2{font-size:clamp(2rem,4.1vw,4.4rem)} h3{font-size:clamp(1.25rem,1.7vw,1.75rem)} p{max-width:var(--textmass);text-wrap:pretty} p+p{margin-top:1rem} a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px} a:hover{text-decoration-thickness:2px} img{display:block;max-width:100%;height:auto} ul,ol{padding-left:1.2rem} :focus-visible{outline:3px solid var(--blau);outline-offset:4px} [id]{scroll-margin-top:7rem} .sprung{position:fixed;left:1rem;top:-5rem;background:var(--weiss);color:var(--nacht);padding:.7rem 1rem;z-index:100} .sprung:focus{top:1rem} .kicker{font-size:.78rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--blau);margin:0 0 1.25rem;max-width:none} /* Kopf */ .kopf{height:6.5rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:0 var(--raum);background:rgba(255,255,255,.96);border-bottom:1px solid rgba(7,24,39,.12);position:sticky;top:0;z-index:40;backdrop-filter:blur(12px)} /* Der Schriftzug ist breit und flach (1192 : 206). Feste Hoehe plus object-fit haette ihn in einen zu hohen Kasten gestellt und oben wie unten Luft gelassen; ueber die Breite gerechnet sitzt er buendig. */ .marke{display:block;width:clamp(11rem,17vw,16rem);text-decoration:none} .marke img{display:block;width:100%;height:auto} /* Navigation: eine Leiste, die umbricht - keine Klappe. Vorher stand die Leiste in einem
, das auf grossen Schirmen nur deshalb sichtbar war, weil das ausgeblendet wurde. Gemessen am 02.09.2026 in Chromium: das
war dabei 0 px breit, die Verweise liefen aus dem Kopf heraus - bei 1440 px Fensterbreite endete der letzte bei 1456 px, also hinter dem Bildschirmrand, und lag ueber der Telefonnummer. Ob ein geschlossenes
seinen Inhalt ueberhaupt zeigt, ist ausserdem von Browser zu Browser verschieden; in einem Browser, der es verbirgt, waere die Navigation ganz verschwunden. Als normale Liste mit Umbruch kann beides nicht mehr passieren, ohne JavaScript und in jedem Browser gleich. */ .menu{justify-self:center;min-width:0} .menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.1rem clamp(.8rem,1.35vw,1.75rem)} .menu a{display:block;padding:.55rem 0;text-decoration:none;color:#324652;font-size:.89rem;font-weight:600;white-space:nowrap;border-bottom:2px solid transparent} .menu a:hover,.menu a[aria-current]{color:var(--blau);border-bottom-color:var(--blau)} .kopf-tel{display:flex;flex-direction:column;text-decoration:none;font-size:1rem;font-weight:750;line-height:1.25;color:var(--nacht);white-space:nowrap} .kopf-tel span{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--blau);font-weight:750;margin-bottom:.2rem} /* Hero */ .hero{min-height:calc(100vh - 6.5rem);background:var(--nacht);display:grid;grid-template-columns:minmax(0,47%) minmax(0,53%);overflow:hidden} .hero-text{padding:clamp(3.5rem,7vw,7.5rem) clamp(2rem,5vw,6rem) 3rem var(--raum);display:flex;flex-direction:column;justify-content:center;color:var(--weiss);position:relative;z-index:2} .hero-text::before{content:"";position:absolute;width:9rem;height:1px;background:var(--blau);top:2.4rem;left:var(--raum)} .hero-text .kicker{color:#88bee5} .hero-text h1{color:var(--weiss);max-width:10ch} .hero-lead{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.55;color:#cfdae1;margin-top:1.8rem;max-width:36rem} .hero-aktionen{display:flex;align-items:center;flex-wrap:wrap;gap:1.25rem 1.75rem;margin-top:2.2rem} .knopf{display:inline-flex;align-items:center;justify-content:center;min-height:3.35rem;padding:.8rem 1.3rem;background:var(--blau);border:1px solid var(--blau);color:var(--weiss);font-weight:700;text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease} .knopf:hover{background:#2c7fc2;border-color:#2c7fc2;text-decoration:none} .textlink{display:inline-flex;align-items:center;gap:.65rem;font-weight:700;text-decoration:none} .textlink::after{content:"↗";font-size:1.05em;color:var(--blau)} .textlink:hover{text-decoration:underline} .hero .textlink{color:var(--weiss)} .hero-fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:auto;padding-top:3rem} .hero-fakten div{border-top:1px solid rgba(255,255,255,.24);padding-top:.75rem} .hero-fakten dt{font-size:.72rem;color:#79b5df;letter-spacing:.12em} .hero-fakten dd{font-size:.84rem;line-height:1.35;color:#d9e2e7;margin-top:.25rem} .hero-bild{position:relative;min-height:42rem;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)} .hero-bild>img{width:100%;height:100%;object-fit:cover;object-position:42% 50%;filter:saturate(.86) contrast(1.03)} .hero-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,24,39,.25),transparent 28%),linear-gradient(0deg,rgba(7,24,39,.55),transparent 32%);pointer-events:none} .hero-bild>p{position:absolute;z-index:2;right:var(--raum);bottom:2.2rem;color:var(--weiss);text-align:right} .hero-bild strong,.hero-bild span{display:block} .hero-bild strong{font-size:1rem} .hero-bild span{font-size:.77rem;color:#d5e0e6;margin-top:.2rem} /* Startseite */ .intro-premium{padding:clamp(5rem,10vw,10rem) var(--raum);max-width:var(--breite);margin:auto} .intro-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(20rem,.65fr);gap:clamp(2.5rem,8vw,9rem);align-items:start} .intro-raster h2{max-width:13ch} .intro-raster .einleitung{font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.5;color:var(--nacht)} .intro-raster .textlink{margin-top:1.5rem} .section-kopf{display:grid;grid-template-columns:1fr minmax(17rem,28rem);gap:1.5rem 4rem;align-items:end;margin:0 0 2.5rem} .section-kopf .kicker{grid-column:1/-1;margin-bottom:0} .section-kopf h2{max-width:14ch} .section-kopf>p:last-child{color:var(--muted)} .leistungen{padding:clamp(4rem,8vw,8rem) var(--raum);background:var(--weiss)} .leistungen>.section-kopf,.leistungen>ol,.weitere-leistungen{max-width:var(--breite);margin-left:auto;margin-right:auto} .leistungen>ol{list-style:none;padding:0;display:grid;grid-template-columns:1.16fr .84fr;gap:1.25rem} .leistungen li{background:var(--nacht);position:relative;overflow:hidden} .leistungen li.gross{grid-row:span 2} .leistungen li>a{display:grid;grid-template-rows:auto 1fr auto;height:100%;min-height:27rem;color:var(--weiss);text-decoration:none;position:relative} .leistungen li.gross>a{min-height:56rem} .leistungen img{grid-row:1/4;grid-column:1;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s ease;filter:saturate(.82)} .leistungen li>a::after{content:"";grid-row:1/4;grid-column:1;background:linear-gradient(180deg,rgba(7,24,39,.08) 28%,rgba(7,24,39,.9) 100%);z-index:1} .leistungen li:hover img{transform:scale(1.025);filter:saturate(1)} .leistungen .nr{position:absolute;z-index:3;top:1.25rem;left:1.25rem;background:rgba(7,24,39,.76);border:1px solid rgba(255,255,255,.36);padding:.45rem .65rem;font-size:.75rem;letter-spacing:.13em} .leistungen li>a>div{grid-row:3;grid-column:1;z-index:2;padding:clamp(1.3rem,2.5vw,2.35rem)} .leistungen h3{color:var(--weiss);font-size:clamp(1.55rem,2.4vw,2.8rem)} .leistungen li:not(.gross) h3{font-size:clamp(1.35rem,1.8vw,2rem)} .leistungen li p{color:#d7e1e7;font-size:.96rem;line-height:1.5;margin-top:.65rem;max-width:32rem} .karten-link{display:inline-block;color:#8bc2e8;font-size:.84rem;font-weight:700;margin-top:1rem;border-bottom:1px solid currentColor} .weitere-leistungen{display:grid;grid-template-columns:1fr 1fr;margin-top:1.25rem;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .weitere-leistungen a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1.5rem;text-decoration:none;min-height:5.5rem} .weitere-leistungen a+a{border-left:1px solid var(--linie)} .weitere-leistungen span{font-size:.76rem;color:var(--blau);letter-spacing:.12em} .weitere-leistungen strong{font-size:1.05rem;color:var(--nacht)} .weitere-leistungen i{font-size:.78rem;color:var(--muted);font-style:normal} .weitere-leistungen a:hover{background:var(--eis)} .ablauf{padding:clamp(5rem,9vw,9rem) var(--raum);max-width:var(--breite);margin:auto} .ablauf .section-kopf{grid-template-columns:1fr} .ablauf ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie)} .ablauf li{padding:1.6rem 2rem 1rem 0} .ablauf li+li{padding-left:2rem;border-left:1px solid var(--linie)} .ablauf li>span{display:block;color:var(--blau);font-size:.75rem;letter-spacing:.14em;margin-bottom:2.5rem} .ablauf h3{margin-bottom:.75rem} .ablauf li p{color:var(--muted);font-size:.96rem} .regional{padding:clamp(4rem,8vw,8rem) var(--raum);background:var(--blau-hell)} .regional>*{margin-left:auto;margin-right:auto} .regional h2{max-width:17ch} .regional>p:not(.kicker){font-size:1.15rem;color:#395365;margin-top:1.4rem} .regional .textlink{margin-top:1.5rem} /* Unterseiten */ .krumen{max-width:var(--breite);margin:auto;padding:1.2rem var(--raum) 0;font-size:.78rem;color:var(--muted);letter-spacing:.04em} .krumen a{color:var(--blau)} .spalte{padding:clamp(3.5rem,7vw,7rem) var(--raum);max-width:calc(var(--textmass) + 2*var(--raum))} .spalte>h1:first-child{font-size:clamp(2.6rem,5vw,5rem);margin-bottom:1.6rem} .spalte h2{font-size:clamp(1.8rem,3.2vw,3rem);margin:2.8rem 0 1rem} .spalte h3{margin:2rem 0 .75rem} .spalte .einleitung{font-size:clamp(1.2rem,1.75vw,1.5rem);line-height:1.48;color:var(--nacht)} .spalte ul,.kontakt ul,.faq ul{margin:1rem 0 1.2rem} .spalte li,.kontakt li,.faq li{margin:.4rem 0} .spalte a:not(.knopf){color:var(--blau)} .auftakt{padding:clamp(3.5rem,7vw,7rem) var(--raum);max-width:var(--breite);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.7fr);gap:clamp(2rem,7vw,8rem);align-items:start} .auftakt-text{max-width:var(--textmass)} .auftakt-text .einleitung{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.5} .fakten{margin:2rem 0 0;border-top:1px solid var(--linie)} .fakten div{display:grid;grid-template-columns:minmax(7rem,.4fr) 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--linie)} .fakten dt{font-size:.78rem;color:var(--blau);font-weight:700;text-transform:uppercase;letter-spacing:.09em} .fakten dd{font-weight:600;color:var(--nacht)} .preise{padding:clamp(4rem,7vw,7rem) var(--raum);background:var(--nacht);color:var(--weiss)} .preise h2{color:var(--weiss)} .preise table{border-collapse:collapse;width:min(100%,52rem);margin-top:1.5rem} .preise th,.preise td{padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.2);vertical-align:top} .preise th{text-align:left;font-weight:550} .preise th span{display:block;color:#9db0bc;font-size:.82rem;font-weight:400;margin-top:.15rem} .preise td{text-align:right;font-weight:750;white-space:nowrap} .preis-folgt{color:#9db0bc;font-weight:400;font-style:italic} .preise-hinweis{font-size:.86rem;color:#aebdc6;margin-top:1.2rem} .vollbild{margin:0;background:var(--nacht)} .vollbild img{width:100%;height:min(75vh,50rem);object-fit:cover} .vollbild figcaption{max-width:var(--breite);padding:.65rem var(--raum);font-size:.78rem;color:#b8c6ce} .figur{margin:0} .figur img{width:100%;aspect-ratio:9/8;object-fit:cover} .figur figcaption{font-size:.76rem;color:var(--muted);padding:.65rem 0 0;border-top:1px solid var(--linie);margin-top:.55rem} .projekte-streifen{padding:clamp(5rem,9vw,9rem) var(--raum);background:var(--nacht);color:var(--weiss)} .projekte-streifen>h2,.projekte-streifen>.streifen,.projekte-streifen>.streifen-mehr{max-width:var(--breite);margin-left:auto;margin-right:auto} .projekte-streifen>h2{color:var(--weiss);max-width:16ch;margin-bottom:2.5rem} .streifen{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .streifen .figur{position:relative} .streifen .figur img{aspect-ratio:4/5;filter:saturate(.82);transition:filter .25s ease} .streifen .figur:hover img{filter:saturate(1)} .streifen .figur figcaption{border-color:rgba(255,255,255,.24);color:#b8c7d0} .streifen-mehr{margin-top:2rem} .streifen-mehr a{color:#8bc2e8;font-weight:700} .projektliste{max-width:var(--breite);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.2rem,5vw,5rem) 1.25rem;padding:0 var(--raum) clamp(4rem,8vw,8rem)} .projektliste article:nth-child(5n+1){grid-column:span 2} .projektliste article:nth-child(5n+1) .figur img{aspect-ratio:16/9} .projektliste h3{margin-top:1rem} .projektliste article p{font-size:.9rem;color:var(--muted);margin-top:.55rem} .projektliste article p strong{color:var(--blau)} .projektliste .figur img{transition:filter .25s ease;filter:saturate(.86)} .projektliste article:hover img{filter:saturate(1)} .zwei{max-width:var(--breite);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--raum);padding:0 var(--raum) clamp(4rem,8vw,8rem);align-items:start} .zwei .figur img{aspect-ratio:4/3} .faq{padding:clamp(5rem,8vw,8rem) var(--raum);max-width:calc(58rem + 2*var(--raum));margin-left:auto;margin-right:auto} .faq h2{margin-bottom:2rem} .faq details{border-top:1px solid var(--linie)} .faq details:last-of-type{border-bottom:1px solid var(--linie)} .faq summary{cursor:pointer;padding:1.3rem 3rem 1.3rem 0;font-weight:700;list-style:none;position:relative;color:var(--nacht);font-size:1.05rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:.35rem;top:1.05rem;color:var(--blau);font-size:1.45rem;font-weight:400} .faq details[open] summary::after{content:"–"} .faq details div{padding:0 2.5rem 1.5rem 0;color:var(--muted)} .cta{padding:clamp(4rem,8vw,8rem) var(--raum);background:var(--blau);color:var(--weiss);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);gap:2rem 6rem;align-items:end} .cta>p:first-child{font-size:clamp(1.8rem,3.3vw,3.7rem);font-weight:620;line-height:1.12;letter-spacing:-.03em;max-width:20ch} .cta-wege{display:flex;flex-wrap:wrap;gap:.75rem;margin:0} .cta .knopf{background:var(--weiss);color:var(--nacht);border-color:var(--weiss)} .cta .knopf:hover{background:var(--nacht);color:var(--weiss);border-color:var(--nacht)} .cta .knopf-hell{background:transparent;color:var(--weiss);border-color:rgba(255,255,255,.65)} .kontakt{max-width:var(--breite);margin:auto;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(3rem,8vw,9rem);padding:0 var(--raum) clamp(5rem,9vw,9rem)} .kontakt h2{font-size:clamp(1.8rem,3vw,3rem);margin-bottom:1.2rem} .kontakt .wege{padding-left:1.15rem} .kontakt .hinweis{font-size:.8rem;color:var(--muted);margin-top:1rem} .kontakt .figur{margin-top:2rem} .karte-klick{padding:1.25rem;background:var(--eis);border-left:3px solid var(--blau);margin-top:1.5rem} .karte-klick p{font-size:.88rem;color:var(--muted);margin-bottom:.8rem} .formular label{display:block;font-weight:700;margin:1rem 0 .35rem} .formular input,.formular textarea{width:100%;border:1px solid var(--linie);padding:.8rem;font:inherit;background:var(--weiss)} .formular button{margin-top:1rem} /* Fuß und Schnellkontakt */ .fuss{padding:clamp(4rem,7vw,7rem) var(--raum) 2rem;background:var(--nacht);color:#cbd8df} .fuss-spalten{max-width:var(--breite);margin:auto;display:grid;grid-template-columns:1.15fr .7fr 1.15fr;gap:3rem 6rem} .fuss p{font-size:.91rem} .fuss a{color:inherit} .fuss ul{list-style:none;padding:0} .fuss li{margin:.3rem 0} .fuss-marke,.fuss-titel{color:var(--weiss);font-weight:750;margin-bottom:1rem} .fuss-marke{font-size:1.15rem!important} .fuss-recht{max-width:var(--breite);margin:3rem auto 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.18);font-size:.78rem} .leiste{display:none} .leer{padding:clamp(5rem,12vw,10rem) var(--raum);min-height:50vh} @media (max-width:76rem){ /* Ab hier passen Marke, Navigation und Telefon nicht mehr nebeneinander. Die Navigation bekommt eine eigene Zeile; der Kopf waechst mit, statt die Verweise abzuschneiden. */ .kopf{height:auto;grid-template-columns:1fr auto;padding-top:.6rem;padding-bottom:.4rem;gap:.2rem 1rem} /* Alle drei Felder bekommen ihren Platz ausdruecklich zugewiesen. Ueberlaesst man das der automatischen Verteilung, schiebt die zeilenbreite Navigation den Cursor weiter und die Telefonnummer landet in der falschen Zeile - am 02.09.2026 lag sie dadurch bei 820 bis 1150 px ueber dem Schriftzug. */ .marke{width:13rem;grid-row:1;grid-column:1} .kopf-tel span{display:none} .kopf-tel{grid-row:1;grid-column:2;justify-self:end} .menu{grid-row:2;grid-column:1/-1;justify-self:stretch} .menu ul{justify-content:flex-start;gap:.1rem 1.15rem} .menu a{font-size:.85rem;padding:.3rem 0} .hero{min-height:auto} .hero-text{padding-right:2rem} .hero-fakten{display:none} .hero-aktionen{margin-bottom:1rem} } @media (max-width:50rem){ body{padding-bottom:3.75rem;font-size:1rem} /* Auf dem Telefon steht der Kopf nicht mehr fest: eine umbrechende Navigation als Klebeleiste haette bis zu drei Zeilen Bildschirm dauerhaft belegt. Die Rufleiste unten bleibt erreichbar. */ .kopf{height:auto;position:static;padding:.5rem 1rem .35rem;gap:.2rem .75rem} .marke{width:10.6rem} .kopf-tel{display:none} .menu ul{gap:.1rem .9rem} .menu a{font-size:.82rem} .hero{grid-template-columns:1fr;min-height:auto} .hero-text{padding:4rem 1.25rem 3.2rem;min-height:34rem} .hero-text::before{left:1.25rem;top:2rem} /* 9ch waren schmaler als das laengste Wort der Zeile: "Glasduschen" braucht bei 51 px rund 290 px, der Kasten gab 251 px her. */ .hero-text h1{font-size:clamp(2.7rem,13vw,4.35rem);max-width:12ch} .hero-lead{font-size:1rem;margin-top:1.35rem} .hero-aktionen{align-items:flex-start;flex-direction:column;margin-top:1.6rem} .hero-bild{min-height:31rem;clip-path:none} .hero-bild>p{left:1.25rem;right:auto;bottom:1.25rem;text-align:left} .intro-premium{padding:4.5rem 1.25rem} .intro-raster{grid-template-columns:1fr;gap:2rem} .intro-raster h2{font-size:clamp(2.35rem,10vw,3.6rem)} .section-kopf{grid-template-columns:1fr} .leistungen{padding:4.5rem 1rem} .leistungen>ol{grid-template-columns:1fr;gap:.75rem} .leistungen li.gross{grid-row:auto} .leistungen li>a,.leistungen li.gross>a{min-height:31rem} .weitere-leistungen{grid-template-columns:1fr} .weitere-leistungen a{grid-template-columns:auto 1fr;padding:1.15rem .5rem} .weitere-leistungen a+a{border-left:0;border-top:1px solid var(--linie)} .weitere-leistungen i{display:none} .ablauf{padding:4.5rem 1.25rem} .ablauf ol{grid-template-columns:1fr} .ablauf li,.ablauf li+li{padding:1.35rem 0;border-left:0;border-bottom:1px solid var(--linie)} .ablauf li>span{margin-bottom:.75rem} .regional{padding:4.5rem 1.25rem} .regional h2{font-size:clamp(2.25rem,10vw,3.5rem)} .krumen{padding:1rem 1.25rem 0} .spalte{padding:3rem 1.25rem} /* Die Seitenueberschrift war auf dem Telefon 59 px gross. Deutsche Komposita passen dann nicht mehr in die 350 px breite Spalte, und ein Browser ohne deutsche Trennmuster bricht mitten im Wort um ("Datenschutzerkl / aerung", gemessen am 02.09.2026). Bei 35 px passt jedes Wort der Seite von selbst. Die Regel gilt fuer jede h1, nicht nur fuer die erste in der Spalte - sonst behalten Seiten wie /danke/ die 44 px der Grundregel. hyphens:auto und overflow-wrap oben bleiben als Reissleine. */ h1,.spalte>h1:first-child{font-size:clamp(2rem,9vw,2.9rem)} .auftakt{grid-template-columns:1fr;padding:3rem 1.25rem;gap:2rem} .fakten div{grid-template-columns:1fr;gap:.25rem} .preise{padding:4rem 1.25rem;overflow-x:auto} .preise th{min-width:14rem} .vollbild img{height:65vh} .projekte-streifen{padding:4.5rem 1rem} .streifen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;padding-bottom:.75rem} .streifen .figur{min-width:78vw;scroll-snap-align:start} .projektliste{grid-template-columns:1fr;padding:0 1rem 4.5rem;gap:3rem} .projektliste article:nth-child(5n+1){grid-column:auto} .projektliste article:nth-child(5n+1) .figur img,.projektliste .figur img{aspect-ratio:4/5} .zwei{grid-template-columns:1fr;padding:0 1rem 4.5rem} .faq{padding:4.5rem 1.25rem} .cta{grid-template-columns:1fr;padding:4rem 1.25rem} .cta>p:first-child{font-size:clamp(2rem,9vw,3rem)} .kontakt{grid-template-columns:1fr;padding:0 1.25rem 4.5rem;gap:4rem} .fuss{padding:4rem 1.25rem 2rem} .fuss-spalten{grid-template-columns:1fr;gap:2.5rem} .leiste{position:fixed;display:grid;grid-template-columns:1fr 1fr;left:0;right:0;bottom:0;z-index:50;box-shadow:0 -8px 25px rgba(7,24,39,.18)} .leiste a{display:flex;align-items:center;justify-content:center;min-height:3.75rem;background:var(--nacht);color:var(--weiss);font-weight:750;text-decoration:none} .leiste a+a{background:var(--blau)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .leistungen img{transition:none} } @media print{ body{font-size:11pt;padding:0} .kopf,.leiste,.cta,.fuss-recht{display:none} .hero{min-height:auto} .hero-bild{clip-path:none} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em} }