
/* GLOBALES AUSRICHTUNGSRASTER: Alle primären Inhalte beginnen an --layout-edge. Vollflächige Hintergründe bleiben breit; ihre .inner-Inhalte folgen derselben senkrechten Linie. */
:root{--card-radius:3.5mm;--card-shadow:0 0 14px rgba(23,23,21,.13),0 3px 8px rgba(23,23,21,.08);--scrollbar-size:16px}
/* GLOBALE SCROLLLEISTENREGEL: horizontale Höhe und vertikale Breite bleiben auch bei zukünftigen Slidern gut greifbar. */
*{scrollbar-width:auto;scrollbar-color:#7f8b96 #ecece8}
*::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size)}
*::-webkit-scrollbar-track{background:#ecece8}
*::-webkit-scrollbar-thumb{border:3px solid #ecece8;border-radius:999px;background:#7f8b96}
:root{--ink:#171715;--paper:#f7f7f5;--blue:#55b9e5;--gold:#c9a227;--muted:#666;--line:#d4d4cf;--max:1180px;--layout-inner:1124px;--layout-edge:max(28px,calc((100vw - var(--max))/2 + 28px));--font-small:13px;--font-body:17px;--font-title:clamp(38px,6vw,72px);--font-hero:clamp(27px,4.2vw,50px)}*{box-sizing:border-box;font-family:Ubuntu,Arial,sans-serif}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-size:var(--font-body);line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.site-header{height:88px;padding:0 var(--layout-edge);display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.brand img{object-fit:contain;transform:none}.brand span{font-size:var(--font-small);font-weight:700;letter-spacing:.06em}.site-header nav{display:flex;gap:24px;margin-left:auto;font-size:var(--font-small);font-weight:400}.site-header nav a:hover,.site-header nav a:focus{color:#277fa7}.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;padding:14px 18px;font-size:var(--font-small);font-weight:700}.menu-toggle{display:none;background:none;border:1px solid var(--ink);padding:9px 12px;font-size:var(--font-small)}main{overflow:hidden}.breadcrumbs{max-width:var(--max);margin:0 auto;padding:26px 28px 0;display:flex;gap:10px;color:var(--muted);font-size:var(--font-small)}.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}.page-hero,.content-section,.comparison,.reference-section{max-width:var(--max);margin:0 auto;padding:70px 28px;scroll-margin-top:110px}.page-hero{padding-bottom:58px}.kicker{letter-spacing:.16em;font-size:var(--font-small);font-weight:700;color:#277fa7}.hero-claim{margin:26px 0 8px;font-size:var(--font-body);font-weight:700}.hero-claim em{color:var(--blue);font-style:italic;text-transform:lowercase}.hero-claim+h1{margin-top:14px}.page-hero h1{max-width:1000px;margin:20px 0 28px;text-transform:uppercase;letter-spacing:-.035em;font-size:var(--font-hero);font-weight:700;line-height:.95}.lead{max-width:820px;font-size:var(--font-body);line-height:1.65;color:#444}.content-section{padding-top:55px;padding-bottom:55px}.content-section.alt{max-width:none;background:#fff}.content-section.alt>.inner{max-width:var(--layout-inner);margin:auto}.content-section.dark{max-width:none;background:var(--ink);color:#fff}.content-section.dark>.inner{max-width:var(--layout-inner);margin:auto}.content-section h2,.comparison h2,.reference-section h2,.cta-band h2{margin:0 0 22px;text-transform:none;letter-spacing:0;font-size:clamp(19px,3vw,36px);font-weight:700;line-height:1.05}.content-section h3,.info-card h3,.reference-card h3,footer h2{margin:28px 0 10px;text-transform:none;font-size:var(--font-body);font-weight:700;line-height:1.25}.content-section p,.content-section li{max-width:850px;color:#555}.dark p,.dark li{color:#ccc}.content-section ul,.content-section ol{max-width:850px;padding-left:22px}.content-section li{margin:8px 0}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.info-card{background:#fff;border-top:8px solid var(--blue);padding:28px;min-height:250px;display:flex;flex-direction:column}.alt .info-card{background:var(--paper)}.info-card p{font-size:var(--font-body);line-height:1.6}.info-card a{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:var(--font-small);font-weight:700}.info-card a span{color:#277fa7}.link-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.link-list a{border:1px solid var(--ink);padding:10px 14px;font-size:var(--font-small);font-weight:700}.comparison{overflow-x:auto}.comparison table{border-collapse:collapse;width:100%;min-width:850px;background:#fff}.comparison th,.comparison td{border:1px solid var(--line);padding:14px;text-align:left;vertical-align:top;font-size:var(--font-small)}.comparison th{background:var(--ink);color:#fff}.note{border-left:5px solid var(--blue);background:#eef8fc;padding:18px 22px;max-width:850px;margin:26px 0}.process{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:30px}.process article{counter-increment:step;background:#fff;padding:26px}.process article:before{content:counter(step,decimal-leading-zero);color:#277fa7;font-weight:700;font-size:var(--font-small)}.process h3{margin-top:12px}.faq{max-width:920px}.faq details{border-bottom:1px solid var(--line);scroll-margin-top:110px}.faq summary{cursor:pointer;padding:20px 36px 20px 0;font-size:var(--font-body);font-weight:700;position:relative;background:var(--paper);z-index:2}.faq details[open]>summary{position:sticky;top:88px}.faq summary:after{content:'+';position:absolute;right:8px;color:#277fa7;font-size:var(--font-body)}.faq details[open] summary:after{content:'−'}.faq details div{padding:0 0 22px;color:#555}.cta-band{max-width:none;background:var(--blue);padding:60px var(--layout-edge);display:flex;align-items:end;justify-content:space-between;gap:40px}.cta-band h2{max-width:760px}.cta-band p{max-width:700px}.button.light{background:#fff;color:var(--ink);min-width:max-content}.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px}.contact-form{background:#fff;padding:34px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-form label{display:block;font-size:var(--font-small);font-weight:700;margin-bottom:18px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:0;border-bottom:1px solid #aaa;background:transparent;padding:10px 0;font-size:var(--font-body)}.contact-form button{width:100%;border:0;cursor:pointer}.form-status{margin-top:14px;font-size:var(--font-small)}.reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.reference-card{background:#fff;border-top:7px solid var(--blue);padding:22px}.reference-card p{font-size:var(--font-body);color:#666}.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}.filter-bar button{border:1px solid var(--ink);background:#fff;padding:9px 12px;cursor:pointer;font-size:var(--font-small)}.filter-bar button.active{background:var(--ink);color:#fff}footer{background:var(--ink);color:#fff;padding:58px 4vw;display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;font-size:var(--font-small)}footer img{background:#fff;object-fit:contain}footer h2{color:var(--blue)}footer a{display:block;margin:8px 0;color:#ccc}.footer-brand p{color:#aaa}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:99}@media(max-width:900px){.site-header{height:auto;min-height:72px;flex-wrap:wrap}.site-header nav{display:none;order:4;width:100%;flex-direction:column;padding:15px 0}.site-header nav.open{display:flex}.menu-toggle{display:block;margin-left:auto}.nav-cta{display:none}.card-grid,.reference-grid,.process{grid-template-columns:1fr 1fr}.contact-grid{grid-template-columns:1fr}.faq details[open]>summary{top:72px}footer{grid-template-columns:1fr 1fr}}@media(max-width:600px){:root{--layout-edge:20px}.brand span{display:none}.page-hero,.content-section,.comparison,.reference-section{padding-left:20px;padding-right:20px}.card-grid,.reference-grid,.process,.form-row{grid-template-columns:1fr}.cta-band{align-items:stretch;flex-direction:column}.button.light{width:100%}footer{grid-template-columns:1fr}.site-header{padding:0 var(--layout-edge)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}:focus-visible{outline:3px solid #277fa7;outline-offset:3px}

.home-hero{padding-top:24px}
.home-hero .hero-claim{margin-top:0}
.brand .header-logo{width:176px;height:auto;max-height:76px;object-fit:contain}
.site-header .nav-cta,.site-header .nav-cta:hover,.site-header .nav-cta:focus{background:transparent;color:var(--ink);border-radius:0;padding:14px 0}
.site-header .nav-cta:hover,.site-header .nav-cta:focus{text-decoration:underline;text-underline-offset:4px}
.page-hero h1 .case-lower{text-transform:none}
.miniramp-title-kicker{display:block;margin-bottom:.35em;font-size:50%;font-weight:400;line-height:1.15;letter-spacing:0;text-transform:none}
.miniramp-purchase-note{display:block;margin-bottom:.55em;color:var(--ink);font-weight:700;line-height:1.35}
/* Globale kompakte Abstände: vermeidet ungenutzte Leerflächen zwischen Inhaltsblöcken. */
.page-hero{padding-top:48px;padding-bottom:34px}
.page-hero+.content-section{padding-top:24px}
.content-section{padding-top:40px;padding-bottom:40px}
.content-section>p:first-of-type,.content-section>.inner>p:first-of-type{margin-top:0}
.content-section>p:last-child,.content-section>.inner>p:last-child{margin-bottom:0}
@media(max-width:600px){.page-hero{padding-top:34px;padding-bottom:26px}.page-hero+.content-section{padding-top:20px}.content-section{padding-top:32px;padding-bottom:32px}}

body{animation:page-enter .5s ease both;transition:opacity .5s ease,transform .5s ease}
body.page-leaving{opacity:0;transform:translateY(4px);pointer-events:none}
@keyframes page-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.photo-placeholder-section{max-width:var(--max);margin:0 auto;padding:10px 28px 55px}
.photo-placeholder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.photo-placeholder{margin:0}
.footer-contact-card{position:relative;width:100%;max-width:310px;margin:0}
.footer-brand .footer-contact-graphic{display:block;width:100%;height:auto;margin:0;background:#fff;object-fit:contain}
.footer-email-hotspot{position:absolute;left:7%;top:74%;width:82%;height:10%;display:block;border-radius:3px}
.footer-email-hotspot span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.footer-email-hotspot:hover,.footer-email-hotspot:focus-visible{outline:3px solid #277fa7;outline-offset:2px;background:rgba(39,127,167,.08)}
@media(max-width:600px){.footer-contact-card{margin-top:0}}
.photo-placeholder-frame{position:relative;display:grid;place-items:center;min-height:280px;aspect-ratio:16/9;overflow:hidden;border:1px solid #d52b2b;background:#fff;color:#b51f1f;text-align:center}
.photo-placeholder-frame::before,.photo-placeholder-frame::after{content:"";position:absolute;left:50%;top:50%;width:142%;height:1px;background:#d52b2b;transform-origin:center;z-index:0}
.photo-placeholder-frame::before{transform:translate(-50%,-50%) rotate(32deg)}
.photo-placeholder-frame::after{transform:translate(-50%,-50%) rotate(-32deg)}
.photo-placeholder-frame span{position:relative;z-index:1;max-width:75%;padding:8px 14px;background:#fff;color:#b51f1f;font-size:var(--font-body);font-weight:700}
.photo-placeholder figcaption{padding:10px 2px 0;color:#555;font-size:var(--font-small);line-height:1.45}
.project-photo{margin:0}.project-photo img{display:block;width:100%;height:auto;border-radius:var(--card-radius);box-shadow:var(--card-shadow)}.project-photo figcaption{padding:10px 2px 0;color:#555;font-size:var(--font-small);line-height:1.45}
.project-process{margin-top:30px}
.project-process-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:8px}
.project-process-heading>p{margin:0;color:var(--ink);font-weight:700}
.project-process-help{margin:0 0 16px;color:#666;font-size:var(--font-small)}
.project-process-controls{display:flex;gap:8px;flex:0 0 auto}
.project-process-controls button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.project-process-controls button img{display:block;width:100%;height:100%;border-radius:50%}
.project-process-controls button:hover,.project-process-controls button:focus-visible{background:transparent;transform:scale(1.05)}
.project-process-controls button:disabled{opacity:.35;cursor:default}
.project-process-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:auto;scrollbar-color:#7f8b96 #ecece8;cursor:grab;user-select:none;touch-action:pan-y;padding:4px 2px 18px}
.project-process-viewport.is-dragging{cursor:grabbing;scroll-snap-type:none}
.project-process-track{display:flex;gap:18px;width:max-content}
.project-step{position:relative;display:flex;flex-direction:column;flex:0 0 255px;min-height:345px;overflow:hidden;border:2px solid var(--phase-color);border-radius:22px;background:#fff;color:var(--ink);scroll-snap-align:start}
.project-step::after{content:none}
.project-step:last-child::after{display:none}
.project-step-number{position:absolute;right:14px;top:0;padding:5px 12px 7px;border-radius:0 0 10px 10px;background:var(--phase-color);color:var(--phase-ink);font-size:var(--font-small);font-weight:700}
.project-step-icon{display:grid;place-items:center;width:64px;height:64px;margin:38px auto 6px;border:1px solid var(--phase-color);border-radius:50%;color:var(--phase-color)}
.project-step-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;shape-rendering:geometricPrecision}
.project-step h3{min-height:54px;margin:8px 18px!important;color:var(--ink);font-size:calc(var(--font-small) * 1.2);line-height:1.3;text-align:center}
.project-step>p{margin:6px 20px 18px;color:#444;font-size:var(--font-small);line-height:1.45;text-align:center}
.project-step-sia{display:flex;align-items:center;justify-content:center;min-height:28px;margin-top:auto;padding:3px 12px;color:var(--phase-color);font-size:12px;line-height:1.2;text-align:center;text-transform:uppercase}
.project-step-phase{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 14px;background:var(--phase-color);color:var(--phase-ink);font-size:11px;font-weight:700;line-height:1.25;text-align:center;text-transform:uppercase}
.process-download{display:grid;grid-template-columns:1fr auto;align-items:center;gap:34px;padding:30px;border:1px solid var(--line);background:#fff}
.process-download h2{margin-bottom:12px}.process-download p{margin:0}.process-download .button{min-width:260px;border-radius:999px;background:#1e9adf}
.site-header .nav-cta{background:linear-gradient(135deg,#fdeb71 0%,#f8d800 100%);color:var(--ink)}
.site-header .nav-cta:hover,.site-header .nav-cta:focus{background:linear-gradient(135deg,#fff09a 0%,#ffe132 100%);color:var(--ink)}
.info-card[data-type="mobil"],.reference-card[data-type="mobil"]{--card-color:#a49e89;border-top-color:#a49e89}
.info-card[data-type="beton"],.reference-card[data-type="beton"]{--card-color:#78b7dc;border-top-color:#78b7dc}
.info-card[data-type="granit"],.reference-card[data-type="granit"]{--card-color:#a6a6ae;border-top-color:#a6a6ae}
.info-card[data-type="holz"],.reference-card[data-type="holz"]{--card-color:#d1a64d;border-top-color:#d1a64d}
.info-card[data-type="miniramps"],.reference-card[data-type="miniramps"]{--card-color:#e3a23a;border-top-color:#e3a23a}
.info-card[data-type="specials"],.reference-card[data-type="specials"]{--card-color:#d8b42f;border-top-color:#d8b42f}
.info-card[data-type="micro"],.reference-card[data-type="micro"]{--card-color:#a6f04d;border-top-color:#a6f04d}
.info-card[data-type="street"],.reference-card[data-type="street"]{--card-color:#94edb6;border-top-color:#94edb6}
.info-card[data-type="custom"],.reference-card[data-type="custom"]{--card-color:#25c977;border-top-color:#25c977}
.info-card[data-type] .kicker,.reference-card[data-type] .kicker{color:inherit}
.info-card,.reference-card{--card-color:#55b9e5;border-radius:var(--card-radius);box-shadow:var(--card-shadow)}
.info-card{padding:0;border-top:0;overflow:hidden}
.info-card h3{display:flex;align-items:center;min-height:84px;margin:0!important;padding:20px 28px;border-radius:var(--card-radius);background:#55b9e5;color:var(--ink)}
.type-card-section .card-grid>.info-card:not([data-type="micro"]):not([data-type="street"]):not([data-type="custom"])>h3{box-sizing:border-box;height:clamp(112px,9vw,124px);min-height:clamp(112px,9vw,124px);justify-content:flex-start}
.info-card>p{margin:24px 0 20px;padding:0 28px}
.info-card>a{margin:auto 28px 28px}
.info-card[data-type="mobil"] h3{background:#a49e89}
.info-card[data-type="beton"] h3{background:#78b7dc}
.info-card[data-type="granit"] h3{background:#a6a6ae}
.info-card[data-type="holz"] h3{background:#d1a64d}
.info-card[data-type="miniramps"] h3{background:#e3a23a}
.info-card[data-type="specials"] h3{background:#d8b42f}
.info-card[data-type="micro"] h3{background:#a6f04d}
.info-card[data-type="street"] h3{background:#94edb6}
.info-card[data-type="custom"] h3{background:#25c977}
.reference-card{display:flex;flex-direction:column}
.reference-card[hidden]{display:none!important}
.info-card a,.reference-card a{display:inline-flex;align-items:center;justify-content:center;gap:16px;height:84px;min-height:84px;max-width:none;margin-top:auto;padding:13px 22px;border:0;border-radius:999px;background:#a8dbf2;background:color-mix(in srgb,var(--card-color) 51%,#fff 49%);color:var(--ink)!important;font-size:var(--font-small);font-weight:400;line-height:1.25;text-align:center;transition:filter .2s ease,transform .2s ease}
.info-card>a{align-self:center;width:calc(100% - 56px);margin-right:28px;margin-bottom:28px;margin-left:28px}
.type-card-section .info-card[data-type="micro"],.type-card-section .info-card[data-type="street"],.type-card-section .info-card[data-type="custom"]{grid-column:1/-1;display:grid;grid-template-columns:minmax(245px,.85fr) minmax(0,1.5fr) minmax(250px,.8fr);gap:18px;min-height:210px;align-items:stretch}
.type-card-section .info-card[data-type="micro"] h3,.type-card-section .info-card[data-type="street"] h3,.type-card-section .info-card[data-type="custom"] h3{min-height:210px;padding:28px}
.type-card-section .info-card[data-type="micro"]>p,.type-card-section .info-card[data-type="street"]>p,.type-card-section .info-card[data-type="custom"]>p{align-self:center;margin:0;padding:28px}
.type-card-section .info-card[data-type="micro"]>a,.type-card-section .info-card[data-type="street"]>a,.type-card-section .info-card[data-type="custom"]>a{align-self:center;width:calc(100% - 48px);margin:24px}
.miniramp-series-feature .card-grid{grid-template-columns:1fr;margin-top:0}
.miniramp-series-card{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.5fr) minmax(260px,.8fr);gap:18px;min-height:210px;align-items:stretch}
.miniramp-series-card h3{min-height:210px;padding:28px}
.miniramp-series-card>p{align-self:center;margin:0;padding:28px}
.miniramp-series-card>a{align-self:center;width:calc(100% - 48px);margin:24px}
#miniramp-series-details{scroll-margin-top:110px}
.reference-card>a{align-self:stretch;width:100%}
.info-card a:hover,.info-card a:focus,.reference-card a:hover,.reference-card a:focus{filter:brightness(.9);color:var(--ink)!important}
.info-card a:active,.reference-card a:active{transform:translateY(1px)}
.info-card a span,.reference-card a span{display:inline-block;flex:0 0 34px;width:34px;height:34px;background:url("slider-icon-pfeil-rechts-transparent.webp") center/contain no-repeat;font-size:0;line-height:0;color:transparent!important;text-shadow:none;transform:none}
/* Pfeil-Buttons sind immer exakt 49 % heller als der zugehörige Kartenkopf. */
details{border:1px solid var(--line);background:#fff;margin-bottom:10px}
details>summary{padding-left:18px!important;padding-right:48px!important}
details>div{padding-left:18px!important;padding-right:18px!important}
.faq details{border:1px solid var(--line);border-radius:2px}
.faq summary h3{margin:0;font:inherit;line-height:inherit;color:inherit}
.faq details[open]{border-color:#b8b8b2;box-shadow:0 2px 0 rgba(23,23,21,.04)}
.type-card-section{position:relative;overflow:visible}
.type-card-section .card-grid{margin-top:0}
body:has(.diy-flyout-trigger) main{overflow:visible}
.diy-flyout-trigger{position:absolute;left:calc((100vw - 100%)/-2);top:66%;z-index:51;width:56px;height:320px;border:0;background:#d2ffa6;color:var(--ink);padding:18px 7px;border-radius:0 28px 28px 0;cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.18);transition:width .24s ease,background-color .2s ease}
.diy-flyout-trigger:hover,.diy-flyout-trigger:focus-visible,.diy-flyout-trigger.open{width:68px;background:#c6ff90}
.diy-flyout-trigger.type-flyout-trigger{background:#b7d9ec}
.diy-flyout-trigger.type-flyout-trigger:hover,.diy-flyout-trigger.type-flyout-trigger:focus-visible,.diy-flyout-trigger.type-flyout-trigger.open{background:#a9d1e7}
.diy-flyout-trigger.specials-flyout-trigger{background:#dcc49a}
.diy-flyout-trigger.specials-flyout-trigger:hover,.diy-flyout-trigger.specials-flyout-trigger:focus-visible,.diy-flyout-trigger.specials-flyout-trigger.open{background:#d1b582}
.diy-flyout-trigger span{display:block;margin:auto;writing-mode:vertical-rl;transform:rotate(180deg);font-size:var(--font-small);font-weight:700;line-height:1.15}
.diy-flyout{position:absolute;left:calc((100vw - 100%)/-2);top:66%;z-index:50;width:min(680px,calc(100vw - 16px));max-height:calc(100vh - 24px);overflow:auto;background:#fff;color:var(--ink);padding:28px 46px 24px 88px;border:1px solid #c8c8c2;transform:translateX(calc(-100% - 16px));transition:transform .28s ease;box-shadow:8px 8px 28px rgba(0,0,0,.24)}
.diy-flyout.open{transform:translateX(0)}
.diy-flyout h2{margin:0 44px 10px 0;color:var(--ink);font-size:clamp(19px,3vw,36px)}
.diy-flyout h3{margin:0 0 8px;font-size:var(--font-body)}
.diy-flyout p{margin:0;color:#555;line-height:1.45}
.diy-flyout-close{position:absolute;right:20px;top:18px;width:42px;height:42px;border:1px solid var(--ink);background:#fff;font-size:28px;line-height:1;cursor:pointer}
.diy-flyout-backdrop{position:fixed;inset:0;z-index:49;background:rgba(0,0,0,.55)}
footer{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
footer img{background:#fff}
footer a{color:#444}
footer .footer-brand p{color:#666}
footer h2{color:#277fa7}
.nav-cta,.button{background:#0d568c;color:#fff;border-radius:999px;padding:14px 24px;font-weight:700;transition:background-color .2s ease,transform .2s ease}
.nav-cta:hover,.nav-cta:focus,.button:hover,.button:focus{background:#083f69;color:#fff}
.nav-cta:active,.button:active{transform:translateY(1px)}
.button.light{background:#0d568c;color:#fff}
footer{display:block;padding:0}
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;padding:58px 4vw}
.footer-appointment{background:#fff;border-bottom:1px solid var(--line);padding:58px max(28px,calc((100vw - var(--max))/2 + 28px));display:flex;align-items:end;justify-content:space-between;gap:48px}
.footer-appointment h2{max-width:720px;margin:4px 0 14px;color:#0d568c;font-size:clamp(19px,3vw,36px);line-height:1.08}
.footer-appointment p{max-width:720px;margin:0;color:#555}
.footer-appointment .button{border:0;border-radius:999px;background:#0d568c;min-width:max-content;cursor:pointer}
.footer-grid{background:#000;color:#fff;gap:0;padding:0}
.footer-grid>div:not(.footer-brand) h2{color:#fff}
.footer-grid>div:not(.footer-brand) a{color:#fff}
.footer-grid>div:not(.footer-brand){padding:58px 2.5vw}
.footer-brand{background:#fff;color:#000;padding:86px 4vw 58px}
.footer-grid .footer-brand p,.footer-grid .footer-brand a{color:#000}
.footer-brand address{display:flex;flex-direction:column;margin-top:22px;font-style:normal;line-height:1.65}
.footer-brand address span,.footer-brand address a{display:block;margin:0;color:#000}
.footer-map{background:#343434;color:#fff;border-top:1px solid #555;padding:48px max(28px,calc((100vw - var(--max))/2 + 28px));display:grid;grid-template-columns:minmax(240px,.7fr) minmax(320px,1.3fr);gap:48px;align-items:stretch}
.footer-map-copy h2{margin:4px 0 10px;color:#fff;font-size:var(--font-body)}
.footer-map-copy p{color:#ddd}
.map-consent{min-height:360px;background:#414141;border:1px solid #666;padding:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.map-consent .map-marker{font-size:52px;line-height:1;color:var(--blue)}
.map-consent p{max-width:560px;margin:8px auto;color:#f1f1f1}
.map-consent a{text-decoration:underline;text-underline-offset:3px}
.map-consent label{display:flex;align-items:flex-start;gap:10px;margin:18px 0;font-size:var(--font-small);text-align:left}
.map-consent input{width:18px;height:18px;flex:0 0 auto}
.map-consent .button{border:0;border-radius:999px;background:#0d568c;cursor:pointer}
.footer-map iframe{display:block;width:100%;height:360px;border:1px solid #666;background:#414141}
.appointment-dialog{width:min(760px,calc(100% - 32px));max-height:calc(100vh - 32px);overflow:auto;border:1px solid var(--line);padding:38px;background:#fff;color:var(--ink)}
.appointment-dialog::backdrop{background:rgba(23,23,21,.72)}
.appointment-dialog h2{margin:0 44px 10px 0;color:#0d568c;font-size:clamp(19px,3vw,36px)}
.appointment-dialog>p{margin:0 0 26px;color:#555}
.appointment-close{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:var(--font-body);cursor:pointer}
.appointment-form label{display:block;margin-bottom:18px;font-size:var(--font-small);font-weight:700}
.appointment-form input,.appointment-form textarea{width:100%;border:1px solid var(--line);background:#fff;padding:12px;font-size:var(--font-body)}
.appointment-form textarea{resize:vertical}
.appointment-form .button{width:100%;border:0;cursor:pointer}
.appointment-consent{display:flex!important;align-items:flex-start;gap:10px;font-weight:400!important}
.appointment-consent input{width:auto;margin-top:6px}
.appointment-benefits{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.appointment-benefits h3{margin:0 0 12px;font-size:var(--font-body)}
.appointment-benefits ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.appointment-benefits li{position:relative;padding-left:24px;color:#444}
.appointment-benefits li::before{content:'✓';position:absolute;left:0;color:#0d568c;font-weight:700}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-row:1 / span 3}.footer-appointment{align-items:stretch;flex-direction:column}.footer-appointment .button{align-self:flex-start}}
@media(max-width:900px){.type-card-section .info-card[data-type="micro"],.type-card-section .info-card[data-type="street"],.type-card-section .info-card[data-type="custom"]{grid-template-columns:1fr}.type-card-section .info-card[data-type="micro"] h3,.type-card-section .info-card[data-type="street"] h3,.type-card-section .info-card[data-type="custom"] h3{min-height:84px}.type-card-section .info-card[data-type="micro"]>p,.type-card-section .info-card[data-type="street"]>p,.type-card-section .info-card[data-type="custom"]>p{padding:24px 28px}.type-card-section .info-card[data-type="micro"]>a,.type-card-section .info-card[data-type="street"]>a,.type-card-section .info-card[data-type="custom"]>a{width:calc(100% - 56px);margin:0 28px 28px}}
@media(max-width:900px){.miniramp-series-card{grid-template-columns:1fr}.miniramp-series-card h3{min-height:84px}.miniramp-series-card>p{padding:24px 28px}.miniramp-series-card>a{width:calc(100% - 56px);margin:0 28px 28px}}
@media(max-width:900px){.footer-map{grid-template-columns:1fr}}
@media(max-width:600px){.info-card h3{min-height:auto}.footer-grid{grid-template-columns:1fr;padding:0}.footer-brand{grid-row:auto}.footer-brand,.footer-grid>div:not(.footer-brand){padding:42px 20px}.footer-appointment{padding:42px 20px}.footer-appointment .button{width:100%}.appointment-dialog{padding:28px 20px}.footer-map{padding:42px 20px}.map-consent{min-height:330px;padding:26px 20px}.diy-flyout-trigger{width:48px;height:240px;border-radius:0 24px 24px 0}.diy-flyout-trigger:hover,.diy-flyout-trigger:focus-visible,.diy-flyout-trigger.open{width:58px}.diy-flyout{width:calc(100vw - 8px);padding:28px 24px 24px 70px}.diy-flyout h2{font-size:var(--font-body)}}
@media(max-width:600px){.photo-placeholder-section{padding:8px 20px 42px}.photo-placeholder-frame{min-height:210px}}
@media(max-width:600px){.project-process-heading{align-items:flex-start}.project-process-help{max-width:240px}.project-step{flex-basis:225px;min-height:330px}.project-process-controls button{width:44px;height:44px}}
@media(max-width:700px){.process-download{grid-template-columns:1fr}.process-download .button{width:100%;min-width:0}}
.granit-hero-action{max-width:var(--max);margin:-30px auto 0;padding:0 28px 48px;position:relative;z-index:2}.granit-hero-action .button{width:min(100%,440px)}
@media(max-width:700px){.granit-hero-action{margin:-18px auto 0;padding:0 20px 36px}.granit-hero-action .button{width:100%}}
@media(prefers-reduced-motion:reduce){body{animation:none;transition:none}body.page-leaving{opacity:1;transform:none}}
.contact-request{max-width:var(--max)}
.multistep-form [hidden]{display:none!important}
.contact-intro{max-width:900px;margin-bottom:28px}
.contact-intro h1{margin:0 0 22px;font-size:clamp(27px,4.2vw,50px);line-height:1.05;text-transform:none;letter-spacing:0}
.required-note{font-size:var(--font-small);color:#666}
.multistep-form{max-width:1000px;padding:clamp(22px,4vw,42px)}
.form-progress{margin-bottom:34px}
.form-progress p{margin:0 0 22px;font-size:var(--font-body);color:#555}
.progress-segments{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.progress-segments button{display:block;width:100%;height:18px;padding:0;border:0;background:linear-gradient(transparent 5px,#e4e4df 5px,#e4e4df 12px,transparent 12px);cursor:pointer;transition:background-color .2s ease}
.progress-segments button.active{background:linear-gradient(transparent 5px,var(--blue) 5px,var(--blue) 12px,transparent 12px)}
.progress-segments button:hover{background:linear-gradient(transparent 3px,#b8dceb 3px,#b8dceb 14px,transparent 14px)}
.progress-segments button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.form-step{border:0;padding:0;margin:0;min-width:0}
.form-step>legend{width:100%;margin:0 0 26px;font-size:clamp(19px,3vw,36px);font-weight:700}
.form-step>label,.form-step>.form-row>label,.conditional-field{display:block;font-size:var(--font-small);font-weight:700;margin-bottom:22px}
.postcode-status{display:block;min-height:1.5em;margin-top:8px;color:#666;font-size:var(--font-small);font-weight:400}
.postcode-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.postcode-suggestions:empty{display:none}
.postcode-suggestions button{border:1px solid var(--blue);border-radius:999px;background:#fff;color:var(--ink);padding:7px 12px;font:inherit;font-weight:400;cursor:pointer}
.postcode-suggestions button:hover,.postcode-suggestions button:focus{background:#eaf7fc}
.form-row.three{grid-template-columns:repeat(3,1fr)}
.area-result{display:flex;align-items:center;min-height:52px;margin-top:6px;border-bottom:1px solid #aaa;background:#f3f3ef;padding:8px 10px;color:var(--ink);font-size:var(--font-body);font-weight:400}
.choice-group{border:0;padding:0;margin:0 0 28px;min-width:0}
.choice-group>legend{font-size:var(--font-body);font-weight:700;margin-bottom:12px}
.choice-group>legend small{font-size:var(--font-small);font-weight:400;color:#666}
.field-help{display:block;margin:4px 0 12px;font-size:var(--font-small);font-weight:400;color:#666;line-height:1.5}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-grid.no-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
.choice-grid.no-wrap .choice span{white-space:nowrap;font-size:clamp(14px,1.7vw,var(--font-small))}
.choice-grid.one-column{grid-template-columns:1fr}
.choice{position:relative;display:flex;min-height:52px;margin:0;cursor:pointer}
.choice input{position:absolute;inline-size:1px!important;block-size:1px!important;opacity:0}
.choice span{position:relative;display:flex;align-items:center;width:100%;border:1px solid var(--line);background:var(--paper);padding:12px 46px 12px 14px;font-size:var(--font-small);font-weight:400;line-height:1.35;transition:border-color .15s,background .15s,box-shadow .15s}
.choice:hover span{border-color:#777}
.choice input:focus-visible+span{outline:3px solid #277fa7;outline-offset:2px}
.choice input:checked+span{border:2px solid #174f6b;background:#eaf6fb;font-weight:700;box-shadow:none}
.choice input:checked+span::after{content:'✓';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#174f6b;font-size:22px;font-weight:700;line-height:1}
.conditional-field{margin-top:14px}
.privacy-check{display:flex!important;align-items:flex-start;gap:12px;font-size:var(--font-small)!important;font-weight:400!important;cursor:pointer}
.privacy-check input{flex:0 0 auto;width:20px!important;height:20px;margin-top:3px}
.privacy-check a{text-decoration:underline;text-underline-offset:3px}
.file-list{list-style:none;padding:0;margin:0 0 24px;max-width:none!important}
.file-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:10px 12px;font-size:var(--font-small)}
.file-list button{border:0;background:transparent;text-decoration:underline;cursor:pointer;font-size:var(--font-small)}
.add-files-button{margin:0 0 24px;border:1px solid var(--ink)!important;background:#fff!important;color:var(--ink)!important;cursor:pointer}
.form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.form-actions .button{border:0;cursor:pointer;min-width:150px}
.form-actions .secondary{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.privacy-note{font-size:var(--font-small);color:#666;max-width:800px}
.field-error{display:block;color:#a22121;font-size:var(--font-small);font-weight:400;margin-top:6px}
.has-error input:not([type=checkbox]):not([type=radio]),.has-error textarea{border-bottom-color:#a22121}
.form-status.success{border-left:5px solid #2d7a46;background:#edf8f0;padding:16px}
.form-status.error{border-left:5px solid #a22121;background:#fff0f0;padding:16px}
@media(max-width:700px){.form-row,.form-row.three,.choice-grid,.choice-grid.compact,.choice-grid.no-wrap{grid-template-columns:1fr}.multistep-form{padding:22px 18px}.choice{min-height:56px}.form-actions{flex-wrap:wrap}.form-actions .button{flex:1}.form-actions [data-next],.form-actions [data-submit]{order:1;flex-basis:100%}.form-actions [data-prev]{order:2}}
@media(max-width:700px){.progress-segments{gap:10px}.form-progress p{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.progress-segments button,.choice span{transition:none}}
/* SEARCH UI START */
.site-search{padding-top:20px}
.search-controls{padding:clamp(22px,4vw,38px);background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}
.search-controls label,.search-controls legend{font-size:var(--font-small);font-weight:700}
.search-query{display:block;margin-bottom:24px}
.search-controls input,.search-controls select{display:block;width:100%;margin-top:7px;padding:13px 14px;border:1px solid #888;background:#fff;color:var(--ink);font-size:var(--font-body)}
.search-query input{font-size:clamp(19px,3vw,30px)}
.search-rules{margin:-10px 0 24px;padding:16px 18px;background:#f5f7f8;border-left:4px solid var(--blue);color:#444;font-size:var(--font-small)}
.search-rules p{margin:0 0 7px}
.search-rules ul{margin:0;padding-left:1.25em}
.search-rules li+li{margin-top:4px}
.search-rules code{padding:1px 5px;background:#fff;color:var(--ink);font:inherit;font-weight:700}
.search-control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.search-primary-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
.search-advanced{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.search-advanced summary{width:max-content;cursor:pointer;font-size:var(--font-small);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.search-advanced>label{display:block;margin-top:18px}
.search-excluded-topics{border:0;margin:24px 0 0;padding:0}
.search-excluded-topics>div{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.search-excluded-topics label{display:inline-flex;align-items:center;gap:7px;font-weight:400}
.search-excluded-topics input{width:auto;margin:0}
.search-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.search-actions .button,.search-reset{border:0;cursor:pointer}
.search-reset{padding:13px 18px;background:#eee;color:var(--ink);font-size:var(--font-small);font-weight:700}
.search-progress{margin-top:22px;padding:14px 16px;background:#eef8fc;border:1px solid #9bcfe5;border-radius:var(--card-radius)}
.search-progress[hidden]{display:none}
.search-progress-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:9px;font-size:var(--font-small);font-weight:700}
.search-progress-time{min-width:3.5em;text-align:right;font-variant-numeric:tabular-nums}
.search-progress-track{height:10px;overflow:hidden;background:#d7e8ef;border-radius:999px}
.search-progress-bar{display:block;width:38%;height:100%;background:var(--blue);border-radius:inherit;animation:search-progress 700ms ease-in-out infinite alternate}
@keyframes search-progress{from{transform:translateX(-20%)}to{transform:translateX(185%)}}
.search-summary{margin:32px 0 16px;font-weight:700}
.search-suggestions{margin:-8px 0 18px;color:#555}
.search-suggestions:empty{display:none}
.search-suggestions button{padding:2px 4px;border:0;border-bottom:2px solid currentColor;background:transparent;color:#176d98;font:inherit;font-weight:700;cursor:pointer}
.search-results{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.search-result{padding:24px;background:#fff;border-left:7px solid var(--blue);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}
.search-result-topic{margin:0 0 5px;color:#277fa7;font-size:var(--font-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.search-result h2{margin:0 0 8px;font-size:var(--font-body);line-height:1.25}
.search-result h2 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.search-result p{margin:0;color:#555}
.search-result-path{display:block;margin-top:12px;color:#666;font-size:var(--font-small)}
.search-empty{padding:24px;background:#fff;border:1px solid var(--line)}
@media(max-width:800px){.search-control-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.search-progress-bar{width:100%;animation:none}}
/* SEARCH UI END */

/* GLOBALER HEADER: hochwertige Schwarz-Weiss-Navigation mit drei responsiven Modi. */
.site-header{width:100%;max-width:100vw;height:auto;min-height:0;padding:0;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
.site-header-inner{width:100%;max-width:1640px;min-height:104px;margin:0 auto;padding:8px clamp(24px,3vw,52px);display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.site-header .brand{display:flex;align-items:center;flex:0 0 clamp(210px,15vw,268px);min-width:210px;max-width:268px}
.site-header .header-logo{display:block;width:100%;height:auto;max-height:86px;object-fit:contain;transform:none}
.site-header nav{min-width:0;flex:1 1 auto;margin-left:auto;font-size:var(--font-nav);font-weight:400;line-height:1.2}
.site-header nav ul{display:grid;grid-template-columns:repeat(5,max-content);align-items:center;justify-content:end;column-gap:clamp(18px,2vw,38px);row-gap:2px;margin:0;padding:0;list-style:none}
.site-header nav li{min-width:0;margin:0;padding:0;white-space:nowrap}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;white-space:nowrap;overflow-wrap:normal;word-break:normal;hyphens:none;font-size:clamp(16px,.36vw + 12px,19px);text-decoration:none;text-underline-offset:5px}
.site-header nav a:hover,.site-header nav a:focus-visible{text-decoration:underline;color:var(--ink)}
.site-header nav a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.site-header .nav-cta,.site-header .nav-cta:hover,.site-header .nav-cta:focus{min-height:44px;padding:8px 0;background:transparent;color:var(--ink);border-radius:0;box-shadow:none;font-weight:700}
.site-header .menu-toggle{display:none}
.site-search-link{display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;color:var(--ink);border:1.5px solid currentColor;border-radius:15px;text-decoration:none}
.site-search-icon{position:relative;display:block;width:21px;height:21px;border:3px solid currentColor;border-radius:50%}
.site-search-icon::after{content:"";position:absolute;width:10px;height:3px;right:-9px;bottom:-5px;background:currentColor;border-radius:2px;transform:rotate(45deg);transform-origin:left center}
.site-search-link:hover,.site-search-link:focus-visible{background:#f0f0ee;border-radius:15px}
.menu-toggle-bars,.menu-toggle-bars::before,.menu-toggle-bars::after{display:block;width:25px;height:3px;background:currentColor;border-radius:2px}
.menu-toggle-bars{position:relative}
.menu-toggle-bars::before,.menu-toggle-bars::after{content:"";position:absolute;left:0}
.menu-toggle-bars::before{top:-8px}.menu-toggle-bars::after{top:8px}
@media(min-width:1025px) and (max-width:1599px){
  .site-header-inner{min-height:104px;padding-block:8px;gap:clamp(14px,1.5vw,26px)}
  .site-header .brand{flex-basis:clamp(205px,18vw,250px);min-width:205px}
  .site-header nav ul{grid-template-columns:repeat(5,max-content);column-gap:clamp(12px,1.35vw,25px);row-gap:2px}
  .site-header nav a{font-size:clamp(14px,.42vw + 10px,17px)}
}
@media(max-width:1024px){
  .site-header-inner{min-height:76px;padding:8px clamp(18px,4vw,32px);gap:8px}
  .site-header .brand{flex-basis:clamp(138px,25vw,180px);min-width:138px;max-width:180px}
  .site-header .header-logo{max-height:66px}
  .site-search-link{margin-left:auto}
  .site-header .menu-toggle{display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;flex:0 0 48px;background:transparent;border:1px solid var(--ink);color:var(--ink)}
  .site-header nav{display:none;position:absolute;top:100%;left:0;width:100%;max-height:calc(100dvh - 76px);overflow-y:auto;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .site-header nav.open{display:block}
  .site-header nav ul{display:block;width:100%;padding:8px clamp(20px,5vw,48px) 18px}
  .site-header nav li{width:100%}
  .site-header nav a,.site-header .nav-cta{display:flex;justify-content:flex-start;width:100%;min-height:48px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:17px;text-align:left}
  .site-header nav li:last-child a{border-bottom:0}
}
@media(max-width:420px){
  .site-header-inner{min-height:70px;padding-inline:14px}
  .site-header .brand{flex-basis:132px;min-width:132px}
  .site-header .header-logo{max-height:60px}
  .site-search-link,.site-header .menu-toggle{width:44px;height:44px;flex-basis:44px}
}

/* GLOBALES TYPOGRAFIE-SYSTEM: Ubuntu Regular 400 und Ubuntu Bold 700. */
@font-face{font-family:"Ubuntu";font-style:normal;font-weight:400;font-display:swap;src:url("ubuntu-regular-400.ttf") format("truetype")}
@font-face{font-family:"Ubuntu";font-style:normal;font-weight:700;font-display:swap;src:url("ubuntu-bold-700.ttf") format("truetype")}
:root{
  --font-family:"Ubuntu",Arial,sans-serif;
  --font-weight-regular:400;
  --font-weight-bold:700;
  --font-h1:clamp(2.375rem,3.1vw + 1rem,3.625rem);
  --font-h2:clamp(2rem,1.45vw + 1.35rem,2.5rem);
  --font-h3:clamp(1.5rem,.75vw + 1.2rem,1.8125rem);
  --font-h4:clamp(1.25rem,.35vw + 1.1rem,1.375rem);
  --font-lead:clamp(1.25rem,.5vw + 1.05rem,1.4375rem);
  --font-body:clamp(1.0625rem,.18vw + 1rem,1.125rem);
  --font-nav:clamp(1rem,.16vw + .96rem,1.0625rem);
  --font-button:clamp(.8125rem,.35vw + .72rem,.9375rem);
  --font-form:clamp(1rem,.2vw + .95rem,1.0625rem);
  --font-small:clamp(.875rem,.18vw + .83rem,.9375rem);
  --font-title:var(--font-h1);
  --font-hero:var(--font-h1);
  --line-h1:1.1;
  --line-h2:1.2;
  --line-h3:1.25;
  --line-h4:1.3;
  --line-lead:1.48;
  --line-body:1.6;
}
html{font-family:var(--font-family);font-synthesis:none}
body,button,input,select,textarea{font-family:var(--font-family);font-weight:var(--font-weight-regular)}
body{font-size:var(--font-body);line-height:var(--line-body)}
h1,h2,h3,h4,h5,h6,strong,b,th{font-weight:var(--font-weight-bold)}
h1,.page-hero h1,.contact-intro h1{font-size:var(--font-h1);line-height:var(--line-h1)}
h2,.content-section h2,.comparison h2,.reference-section h2,.cta-band h2,.footer-appointment h2,.appointment-dialog h2,.diy-flyout h2{font-size:var(--font-h2);line-height:var(--line-h2)}
h3,.content-section h3,.info-card h3,.reference-card h3,footer h2,.search-result h2{font-size:var(--font-h3);line-height:var(--line-h3)}
h4{font-size:var(--font-h4);line-height:var(--line-h4)}
.lead{max-width:72ch;font-size:var(--font-lead);line-height:var(--line-lead)}
p,li,dd,dt{line-height:var(--line-body)}
.content-section p,.content-section li,.page-hero>p:not(.lead){max-width:72ch}
.site-header nav{font-size:var(--font-nav);font-weight:var(--font-weight-regular)}
.site-header nav a[aria-current="page"],.site-header nav a.active{font-weight:var(--font-weight-bold)}
.nav-cta,.button,.search-reset,.info-card a,.reference-card a{font-size:var(--font-button);font-weight:400;line-height:1.25}
.contact-form label,.form-step>label,.form-step>.form-row>label,.conditional-field,.choice span,.appointment-form label{font-size:var(--font-form)}
.contact-form input,.contact-form select,.contact-form textarea,.appointment-form input,.appointment-form textarea,.search-controls input,.search-controls select{font-size:var(--font-body);line-height:1.45}
small,.required-note,.field-help,.field-error,.form-status,.project-process-help,.photo-placeholder figcaption,.project-photo figcaption,.search-result-topic,.search-result-path{font-size:var(--font-small);line-height:1.5}
.kicker,.breadcrumbs,.comparison th,.comparison td,.process article:before,.project-step-number,.project-step>p,.project-step-sia,.project-step-phase,.diy-flyout-trigger span,.map-consent label,.privacy-check,.file-list li,.file-list button,.privacy-note{font-size:var(--font-small)}
.project-step h3{font-size:var(--font-form)}
.info-card p,.reference-card p,.faq summary,.appointment-benefits h3,.footer-map-copy h2{font-size:var(--font-body)}
.site-header nav,.contact-form,.appointment-form,.choice span,.filter-bar button{font-weight:var(--font-weight-regular)}
.brand span,.kicker,.hero-claim,.content-section h1,.content-section h2,.content-section h3,.content-section h4,.info-card h3,.reference-card h3,.faq summary,.filter-bar button.active,.contact-form label,.form-step>legend,.choice-group>legend,.button,.nav-cta{font-weight:var(--font-weight-bold)}
@media(max-width:600px){
  :root{--font-h1:clamp(2.25rem,7vw + .45rem,2.625rem);--font-h2:clamp(1.875rem,3vw + 1.15rem,2.125rem);--font-h3:clamp(1.4375rem,2vw + .95rem,1.625rem);--font-h4:clamp(1.1875rem,1vw + .95rem,1.3125rem);--font-lead:clamp(1.1875rem,1.2vw + .95rem,1.3125rem)}
}

/* GLOBALE RESPONSIVE KARTENREGEL
   Inhalte bleiben in jeder Karten-, Rahmen- und Buttonfläche vollständig lesbar. */
:is(.info-card,.reference-card,.project-step,.search-result,.choice,.note,.process article,.appointment-benefits,.map-consent,.footer-appointment,.diy-flyout){min-width:0;max-width:100%}
:is(.info-card,.reference-card,.project-step,.search-result,.choice,.note,.process article,.appointment-benefits,.map-consent,.footer-appointment,.diy-flyout) :is(h2,h3,h4,p,li,a,button,span,strong,small){min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
.card-grid,.reference-grid,.process,.contact-grid,.form-row,.choice-grid{min-width:0}
.card-grid,.reference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.process{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-card h3,.reference-card h3{font-size:clamp(1.125rem,1.15vw + .7rem,var(--font-h3));line-height:1.25;text-wrap:balance}
.info-card>p,.reference-card>p{font-size:clamp(.975rem,.3vw + .9rem,var(--font-body));line-height:1.55}
.info-card>a,.reference-card>a,.button{height:auto;min-height:56px;white-space:normal;text-wrap:balance}
.info-card>a span,.reference-card>a span{overflow-wrap:normal;word-break:normal}
@media(max-width:1180px){
  .type-card-section .info-card[data-type="micro"],.type-card-section .info-card[data-type="street"],.type-card-section .info-card[data-type="custom"],.miniramp-series-card{grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr)}
  .type-card-section .info-card[data-type="micro"]>a,.type-card-section .info-card[data-type="street"]>a,.type-card-section .info-card[data-type="custom"]>a,.miniramp-series-card>a{grid-column:1/-1;width:calc(100% - 48px);margin:0 24px 24px}
  .type-card-section .info-card[data-type="micro"] h3,.type-card-section .info-card[data-type="street"] h3,.type-card-section .info-card[data-type="custom"] h3,.miniramp-series-card h3{min-height:0}
}
@media(max-width:760px){
  .card-grid,.reference-grid,.process{grid-template-columns:1fr}
  .type-card-section .info-card[data-type="micro"],.type-card-section .info-card[data-type="street"],.type-card-section .info-card[data-type="custom"],.miniramp-series-card{display:grid;grid-template-columns:1fr;min-height:0}
  .type-card-section .info-card[data-type="micro"]>p,.type-card-section .info-card[data-type="street"]>p,.type-card-section .info-card[data-type="custom"]>p,.miniramp-series-card>p{padding:22px}
  .type-card-section .info-card[data-type="micro"]>a,.type-card-section .info-card[data-type="street"]>a,.type-card-section .info-card[data-type="custom"]>a,.miniramp-series-card>a{grid-column:auto;width:calc(100% - 44px);margin:0 22px 22px}
  .info-card h3{padding:18px 22px}
  .info-card>p{padding-right:22px;padding-left:22px}
  .info-card>a{width:calc(100% - 44px);margin-right:22px;margin-left:22px}
}
@media(max-width:420px){
  .info-card h3,.reference-card h3{font-size:clamp(1.05rem,6vw,1.35rem)}
  .info-card>p,.reference-card>p{font-size:clamp(.95rem,4.5vw,1.05rem)}
  .info-card>a,.reference-card>a,.button{padding:12px 16px;font-size:clamp(.78rem,3.8vw,.9rem)}
  .choice span{padding-right:40px;overflow-wrap:anywhere;white-space:normal!important}
}
/* Bauweisenvergleich: eigenes Scrollfeld mit dauerhaft sichtbarer Kopfzeile. */
.comparison-table-scroll{position:relative;max-height:clamp(360px,62vh,640px);overflow:auto;overscroll-behavior:contain;border:1px solid rgba(17,17,17,.16);border-radius:3.5mm;box-shadow:0 8px 24px rgba(0,0,0,.08);background:#fff}
.comparison-table-scroll table{margin:0}
.comparison-table-scroll thead th{position:sticky;top:0;z-index:3;background:#1c1c1b;color:#fff}
.comparison-table-scroll:focus-visible{outline:3px solid #57b5df;outline-offset:3px}
/* Globale Kartenregel: nebeneinanderstehende Titelbereiche bleiben gleich hoch. */
@media (min-width: 48rem) {
  :where(main) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="row"])
    > :where(article, section, li, [class*="card"])
    > :first-child:has(> :is(h2, h3, h4)),
  :where(main) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="row"])
    > :where(article, section, li, [class*="card"])
    > :is(h2, h3, h4):first-child {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-block-size: calc(3lh + 2.5rem);
  }
}

@media (max-width: 47.999rem) {
  :where(main) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="row"])
    > :where(article, section, li, [class*="card"])
    > :first-child:has(> :is(h2, h3, h4)),
  :where(main) :where([class*="grid"], [class*="cards"], [class*="columns"], [class*="row"])
    > :where(article, section, li, [class*="card"])
    > :is(h2, h3, h4):first-child {
    min-block-size: 0;
  }
}
@import url("./card-heading-sync.css");
@import url("./card-heading-row-equal.css");
@import url("./card-heading-row-equal.css");
/* Globale Kartenregel: Titelbereiche nebeneinanderliegender Karten bleiben gleich hoch. */
@media (min-width: 768px) {
  :where(
    .card-grid,
    .cards-grid,
    .feature-grid,
    .type-grid,
    .comparison-grid,
    .benefit-grid,
    .info-grid,
    .tile-grid,
    [class*="card-grid"],
    [class*="cards-grid"]
  ) > * {
    display: flex;
    flex-direction: column;
  }

  :where(
    .card-grid,
    .cards-grid,
    .feature-grid,
    .type-grid,
    .comparison-grid,
    .benefit-grid,
    .info-grid,
    .tile-grid,
    [class*="card-grid"],
    [class*="cards-grid"]
  ) > * > :first-child:is(header, h2, h3, h4, [class*="head"], [class*="title"]) {
    box-sizing: border-box;
    min-height: calc(3 * 1.2em + 2 * clamp(1rem, 1.6vw, 1.75rem));
    display: flex;
    align-items: center;
  }
}
