/* GEFA Brandschutz. Erkennungsmerkmal: das GEFA-Schild und die Feuerwiderstands-Skala.
   Das Seitenraster hat vier Spalten, die Skala vier Intervalle zu je 30 Minuten. Eckenradius bewusst 0.
   Überschriften und Kennwerte: Mona Sans (SIL OFL). Fließtext: Hanken Grotesk (SIL OFL). */
@font-face{font-family:"Mona Sans";src:url(fonts/mona-sans-latin-wdth-normal.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* Farben */
  --red:#b31e18;
  --red-dark:#93160f;
  --black:#0b0a0a;
  --anth:#1c1b1b;
  --anth-2:#2a2929;
  --line-dark:#454342;
  --stone:#e5e5e2;
  --paper:#f3f3f1;
  --line:#c9c9c5;
  --text:#131212;
  --text-2:#4b4c4c;
  --on-dark:#f4f4f3;
  --on-dark-2:#bcbdbd;
  --focus:var(--red);
  /* Schrift: fünf klare Stufen plus Kennwert */
  --display:"Mona Sans","Arial Narrow",Arial,sans-serif;
  --body:"Hanken Grotesk",Arial,sans-serif;
  --t-small:.9375rem;
  --t-body:1.0938rem;
  --t-lead:clamp(1.1875rem,1.55vw,1.4375rem);
  --t-h3:clamp(1.375rem,1.9vw,1.75rem);
  --t-h2:clamp(2.25rem,4.5vw,4rem);
  --t-h1:clamp(2.75rem,5.8vw,5.25rem);
  --t-k:clamp(2.75rem,5.4vw,5rem);
  /* Abstände und Maße */
  --gutter:clamp(16px,4.5vw,72px);
  --section:clamp(72px,9vw,136px);
  --gap:clamp(20px,3vw,48px);
  --gap-l:clamp(32px,6vw,96px);
  --wrap:1440px;
  --head-h:76px;
  --chamfer:18px;
  /* Bewegung (Emil-Kowalski-Kurven) */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:#fff;color:var(--text);font:400 var(--t-body)/1.55 var(--body);-webkit-font-smoothing:antialiased;font-synthesis:none}
main{flex:1 0 auto}
img{display:block;width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-skip-ink:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:620;font-stretch:85%;margin:0;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:1;letter-spacing:-.024em}
h2{font-size:var(--t-h2);line-height:1.03;letter-spacing:-.022em}
h3{font-size:var(--t-h3);line-height:1.12;letter-spacing:-.012em;font-weight:600}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{padding-inline:var(--gutter);max-width:var(--wrap);margin-inline:auto;width:100%}
.lead{font-size:var(--t-lead);line-height:1.42}
.section{padding-block:var(--section)}
.dark{--focus:#fff;background:var(--anth);color:var(--on-dark)}
.tnum{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--text);padding:10px 14px;z-index:50}
.skip:focus{left:8px}
picture{background:var(--stone)}

/* Die Skala: 0 bis 120 Minuten, vier Intervalle. Rot ist die Spanne, die wirklich angeboten wird. */
.skala{--c:var(--line);--von:0;--bis:0;position:relative;display:block;height:7px;background:linear-gradient(var(--c),var(--c)) 0 0/100% 1px no-repeat,linear-gradient(90deg,var(--c) 1px,transparent 1px) 0 0/25% 100% repeat-x;border-right:1px solid var(--c)}
.skala i{position:absolute;top:-1px;height:3px;left:calc(var(--von)/120*100%);width:calc((var(--bis) - var(--von))/120*100%);background:var(--red);transform-origin:left center}
.skala-z{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px;font:500 .8125rem/1 var(--display);font-stretch:90%;color:var(--text-2)}
.skala-z span{text-align:right}
.dark .skala,.about .skala,.contact .skala,.site-foot .skala{--c:var(--line-dark)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 26px;font:600 1.0625rem/1.1 var(--body);text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:none}
.btn-red{background:var(--red);color:#fff}
.btn-light{background:#fff;color:var(--text)}
.btn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.btn-line-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
@media (hover:hover) and (pointer:fine){
  .btn-red:hover{background:var(--red-dark)}
  .btn-light:hover{background:var(--line)}
  .btn-line:hover{background:var(--text);color:#fff}
  .btn-line-light:hover{background:#fff;color:var(--text)}
}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
.site-head{--focus:#fff;position:sticky;top:0;z-index:30;background:var(--anth);color:var(--on-dark);transition:background-color 200ms ease,box-shadow 200ms ease;view-transition-name:kopf}
.site-head.scrolled{background:var(--black);box-shadow:0 1px 0 var(--line-dark)}
.head-row{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);min-height:var(--head-h)}
.brand{flex:none;transition:opacity 200ms ease}
.brand img{width:128px}
/* Auf der Startseite steht das Logo groß im Hero. Klein erscheint es erst, wenn das große aus dem Bild ist. */
html.js .has-hero:not(.past-hero) .brand:not(:focus-visible){opacity:0;pointer-events:none}
.site-nav{margin-left:auto;display:flex;gap:clamp(16px,2vw,28px);font-weight:500;font-size:var(--t-small)}
.site-nav a{position:relative;text-decoration:none;padding:10px 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.site-nav a[aria-current]::after,.site-nav a.is-active::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.site-nav a:hover::after{transform:scaleX(1)}}
.head-tel{font:600 1.0625rem/1 var(--display);font-stretch:90%;text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.head-tel:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}}
.head-cta{min-height:44px;padding:8px 18px;font-size:var(--t-small);white-space:nowrap}
.burger{display:none;width:44px;height:44px;padding:0;background:none;border:0;color:inherit;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform 200ms var(--ease-out)}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Hero */
.hero{background:var(--stone);display:flex;flex-direction:column;min-height:calc(100svh - var(--head-h))}
.hero-main{flex:1;max-width:1240px;width:100%;margin-inline:auto;padding:clamp(28px,4.5vh,64px) var(--gutter) clamp(28px,4.5vh,56px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero-logo{width:clamp(240px,min(32vw,38vh),460px)}
.hero h1{margin-top:clamp(20px,3.6vh,40px)}
.h1-z2{display:block}
.hero .lead{max-width:41em;color:var(--text-2);margin:clamp(14px,2vh,24px) 0 clamp(20px,3vh,32px)}
.hero .actions{justify-content:center}
.hero-klassen{width:100%}
/* Klassen und Fakten stehen exakt auf den vier Spalten der Skala */
.hk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));font:620 clamp(1.5rem,3.4vw,3rem)/1 var(--display);font-stretch:85%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:12px}
.hero-skala{height:9px;background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(90deg,#8e8e8a 1px,transparent 1px) 0 0/25% 100% repeat-x;border-right:0;--von:0;--bis:120}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:12px;padding-bottom:clamp(24px,3.4vh,44px)}
.facts li{padding-right:var(--gap)}
.facts b{display:block;font:600 clamp(1.0625rem,1.4vw,1.25rem)/1.15 var(--display);font-stretch:90%;margin-bottom:3px}
.facts p{color:var(--text-2);font-size:var(--t-small);line-height:1.38}

/* Kopf eines Bereichs: Überschrift und Einleitung gestapelt, schmale Spalte */
.intro{max-width:46rem;margin-bottom:clamp(32px,4.4vw,64px)}
.intro .lead{color:var(--text-2);margin-top:clamp(14px,1.6vw,22px)}

/* Leistungsregister: die Liste ist zugleich das Diagramm */
.reg-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-l);align-items:start}
.reg-stage{position:sticky;top:calc(var(--head-h) + 24px);aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.reg-stage picture{position:absolute;inset:0;opacity:0;transition:opacity 220ms ease}
.reg-stage picture.is-on{opacity:1}
.reg-stage img{height:100%;object-fit:cover}
.reg-head{display:flex;justify-content:space-between;gap:16px;font-size:var(--t-small);color:var(--text-2);margin-bottom:8px}
.reg li{position:relative}
.reg a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--gap);align-items:baseline;padding:clamp(18px,1.9vw,26px) 0 clamp(16px,1.7vw,22px);text-decoration:none}
.reg picture{display:none}
.reg h3{transition:color 160ms ease;hyphens:auto}
.reg p{grid-column:1;color:var(--text-2);font-size:var(--t-small);line-height:1.4;max-width:34em}
.reg-k{grid-column:2;grid-row:1;font:620 var(--t-h3)/1.12 var(--display);font-stretch:85%;letter-spacing:-.012em;white-space:nowrap;font-variant-numeric:tabular-nums}
.reg .skala{position:absolute;left:0;right:0;bottom:0}
@media (hover:hover) and (pointer:fine){.reg a:hover h3{color:var(--red)}}
.svc-foot{margin-top:clamp(28px,3.4vw,48px);display:flex;flex-wrap:wrap;gap:14px var(--gap);align-items:baseline;justify-content:space-between}
.svc-foot p{color:var(--text-2);max-width:40em;font-size:var(--t-small)}
.link-more{font-weight:600;text-decoration-color:var(--red);text-decoration-thickness:2px;transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.link-more:hover{color:var(--red)}}

/* Für Bauunternehmen */
.partner-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap-l);align-items:end}
.partner-grid .lead{color:var(--on-dark-2);margin:clamp(18px,2vw,28px) 0 clamp(22px,2.6vw,32px);max-width:34em}
.partner-who{color:var(--on-dark);font-weight:600;margin:0 0 clamp(22px,2.4vw,32px);max-width:36em}
.check-list li{position:relative;padding:0 0 clamp(14px,1.5vw,20px) 22px;font:600 var(--t-h3)/1.18 var(--display);font-stretch:88%;letter-spacing:-.008em}
.check-list li:last-child{padding-bottom:0}
.check-list li::before{content:"";position:absolute;left:0;top:.18em;width:2px;height:.82em;background:var(--red)}
.also{margin-top:clamp(48px,6vw,88px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px var(--gap)}
.also b{display:block;font:600 var(--t-h3)/1.15 var(--display);font-stretch:88%;margin-bottom:6px}
.also p{color:var(--on-dark-2);font-size:var(--t-small);line-height:1.45}

/* Ablauf */
.ablauf-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:clamp(32px,4vw,56px)}
.ablauf-head h2{grid-column:1/4}
.ablauf-head p{grid-column:2/5;color:var(--text-2);margin-top:clamp(14px,1.6vw,22px)}
.steps-skala{--von:0;--bis:120}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.steps li{padding:20px var(--gap) 0 0}
.step-no{display:block;font:620 var(--t-k)/1 var(--display);font-stretch:85%;letter-spacing:-.02em;color:var(--red);margin-bottom:clamp(14px,1.6vw,22px);font-variant-numeric:tabular-nums}
.steps h3{margin-bottom:8px}
.steps p{color:var(--text-2)}

/* Referenzen: kompakt. Die Projektnamen stehen auf einem Schild, die Fotos in einer ruhigen Reihe */
.refs{background:var(--paper);padding-block:clamp(48px,5vw,76px)}
.refs-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) var(--gap-l);align-items:start;margin-bottom:clamp(24px,2.6vw,36px)}
.refs h2{font-size:clamp(1.875rem,3vw,2.75rem)}
.refs .lead{font-size:1.0625rem;line-height:1.45;color:var(--text-2);margin-top:12px}
.ref-types{margin-top:10px;color:var(--text-2);font-size:var(--t-small);line-height:1.4}
.ref-schild{background:#fff;padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,32px);clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
.ref-list{columns:2;column-gap:var(--gap)}
.ref-list li{break-inside:avoid;padding:.3em 0;font:600 clamp(1rem,1.25vw,1.125rem)/1.25 var(--display);font-stretch:90%;letter-spacing:-.004em}
.ref-more{margin-top:.6em;font:600 var(--t-small)/1.3 var(--display);font-stretch:90%;color:var(--red)}
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,.9vw,12px)}
.g-item{display:block;color:var(--text);text-decoration:none;cursor:zoom-in;transition:transform 160ms var(--ease-out)}
.g-item:active{transform:scale(.985)}
.g-item picture{display:block;position:relative;aspect-ratio:1/1;overflow:hidden}
.g-item img{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform 260ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.g-item:hover img{transform:scale(1.015)}}
/* Bildtext steht in der Lightbox und bleibt für Screenreader erhalten */
.g-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Weitere Bilder öffnen sich in der Lightbox. Ohne JavaScript bleiben alle sichtbar. */
html.js .g-item:nth-child(n+7){display:none}
.refs-foot{display:none}
html.js .refs-foot{display:flex;justify-content:flex-end;margin-top:12px}
.refs-all{appearance:none;background:none;border:0;padding:8px 0;color:inherit;font:600 var(--t-small)/1.2 var(--body);cursor:pointer;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.22em;text-decoration-skip-ink:none;transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.refs-all:hover{color:var(--red)}}

/* Lightbox */
.lb{--focus:#fff;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(11,10,10,.96);color:#fff;opacity:0;transition:opacity 220ms var(--ease-out)}
.lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
.lb.is-in{opacity:1}
.lb::backdrop{background:transparent}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:64px 16px 8px;transform:scale(.97);transition:transform 220ms var(--ease-out)}
.lb.is-in .lb-stage{transform:none}
.lb-stage img{width:auto;max-width:100%;max-height:100%;object-fit:contain}
.lb-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px var(--gutter) calc(14px + env(safe-area-inset-bottom))}
.lb-bar p{font-weight:600;line-height:1.3}
.lb-count{color:var(--on-dark-2);font-weight:400;display:block;font-size:var(--t-small)}
.lb-nav{display:flex;gap:8px;flex:none}
.lb-btn{width:48px;height:48px;display:grid;place-items:center;background:var(--anth-2);color:#fff;border:0;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms ease}
.lb-btn:active{transform:scale(.95)}
.lb-btn svg{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){.lb-btn:hover{background:var(--red)}}
.lb-close{position:absolute;top:10px;right:10px;z-index:2}

/* Über uns */
.about{--focus:#fff;background:var(--black);color:var(--on-dark)}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;max-width:1680px;margin-inline:auto}
.about-media{position:relative;width:100%;min-height:520px;background:var(--anth);display:grid;place-items:center;padding:clamp(32px,6vw,88px) clamp(24px,5vw,72px)}
/* Das Logo steht auf dem GEFA-Schild: Platte mit abgeschrägter Ecke, darunter die Skala */
.about-plate{width:min(100%,460px);background:var(--paper);padding:clamp(28px,3.6vw,48px) clamp(24px,3.2vw,44px) clamp(24px,3vw,36px);clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
.about .about-skala{--c:#a9a9a4;margin-top:clamp(20px,2.4vw,32px)}
.about-copy{padding:clamp(56px,7vw,112px) var(--gutter) clamp(56px,7vw,112px) clamp(28px,6vw,96px);display:grid;gap:18px;align-content:center}
.about-copy p{color:var(--on-dark-2);max-width:38em}
.about-copy .mission{font:620 clamp(1.625rem,2.8vw,2.5rem)/1.1 var(--display);font-stretch:85%;letter-spacing:-.016em;color:#fff}
.about-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gap);margin-top:14px}
.about-points b{display:block;font-weight:600;color:#fff;margin-bottom:2px}
.about-points span{color:var(--on-dark-2);font-size:var(--t-small);line-height:1.42;display:block}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px var(--gap-l);align-items:start}
.faq-side{position:sticky;top:calc(var(--head-h) + 24px)}
.more-q{margin-top:18px;color:var(--text-2)}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;font:600 clamp(1.125rem,1.5vw,1.3125rem)/1.25 var(--display);font-stretch:90%;transition:color 160ms ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:20px;height:20px;flex:none;color:var(--red);transition:transform 200ms var(--ease-out)}
.faq-item[open] summary svg{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.faq-item summary:hover{color:var(--red)}}
.faq-item div{padding:0 40px 22px 0;color:var(--text-2);max-width:48em}
.faq-skala{margin-top:16px;padding-right:0}
@supports (interpolate-size:allow-keywords){
  .faq-item{interpolate-size:allow-keywords}
  .faq-item::details-content{height:0;overflow:clip;transition:height 200ms var(--ease-out),content-visibility 200ms allow-discrete}
  .faq-item[open]::details-content{height:auto}
}

/* Kontakt */
.contact{--focus:#fff;background:var(--black);color:var(--on-dark)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px var(--gap-l);align-items:start}
.contact .tel{display:block;width:fit-content;font:620 clamp(2.75rem,6vw,5.5rem)/1 var(--display);font-stretch:85%;letter-spacing:-.024em;color:#fff;text-decoration:none;margin:clamp(24px,3vw,40px) 0 clamp(24px,3vw,36px);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.contact .tel:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:4px;text-underline-offset:.12em}}
.c-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gap)}
.c-facts b{display:block;font-weight:600;color:var(--on-dark-2);margin-bottom:2px;font-size:var(--t-small)}
.map{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--line-dark);padding-top:18px}
.map p{color:var(--on-dark-2);font-size:var(--t-small);line-height:1.42;max-width:34em}
.map-row{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-top:10px;font-weight:600;font-size:var(--t-small)}
.map-btn{min-height:44px;padding:8px 16px;font-size:var(--t-small)}
.map.loaded{border:0;padding:0;position:relative;aspect-ratio:16/9;background:var(--anth)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Das Formular trägt die Form des Schilds: eine Ecke ist abgeschrägt */
.form{--focus:var(--red);background:#fff;color:var(--text);padding:clamp(22px,3vw,44px);clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
.form h3{font-size:clamp(1.75rem,2.6vw,2.375rem);font-weight:620;font-stretch:85%;margin-bottom:18px}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f-full{grid-column:1/-1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field label{display:block;font-weight:600;font-size:var(--t-small);margin-bottom:5px}
.field label small{font:inherit;font-weight:400;color:var(--text-2)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:11px 13px;font:400 1.0625rem/1.4 var(--body);color:var(--text);background:var(--paper);border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow 160ms ease,background-color 160ms ease;caret-color:var(--red)}
.field select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23b31e18' stroke-width='2.4' d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.field textarea{min-height:130px;resize:vertical}
@media (hover:hover) and (pointer:fine){.field input:hover,.field select:hover,.field textarea:hover{box-shadow:inset 0 0 0 1px var(--text-2)}}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;background-color:#fff;box-shadow:inset 0 0 0 2px var(--red)}
.field .err{display:none;color:var(--red-dark);font-size:var(--t-small);font-weight:600;margin-top:5px;line-height:1.3}
.field.invalid input,.field.invalid textarea,.field.invalid select{box-shadow:inset 0 0 0 2px var(--red)}
.field.invalid .err{display:block}
.field label.check{display:flex;margin:0;gap:10px;align-items:flex-start;font-weight:400;line-height:1.4;color:var(--text-2)}
.field .check input{-webkit-appearance:auto;appearance:auto;box-shadow:none;width:22px;height:22px;min-height:0;flex:none;margin:1px 0 0;accent-color:var(--red)}
.check a{color:var(--text)}
.form .btn{width:100%;margin-top:18px}
.form .btn[disabled]{opacity:.65;cursor:progress}
.form-status{margin-top:14px;font-weight:600;line-height:1.4}
.form-status:empty{display:none}
.form-status.ok,.form-status.fail{padding:14px 16px;background:var(--paper)}
.form-status.ok{box-shadow:inset 0 2px 0 #1f6b3a}
.form-status.fail{box-shadow:inset 0 2px 0 var(--red)}
a[href^="tel:"]{white-space:nowrap}

/* Footer */
.site-foot{--focus:#fff;flex:none;background:var(--anth);color:var(--on-dark-2);padding-block:clamp(36px,4vw,56px) 26px;font-size:var(--t-small)}
.foot-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 0}
.foot-top>*{padding-right:var(--gap)}
.foot-top img{width:128px}
.foot-navs{display:flex;gap:clamp(24px,4vw,64px);padding-right:0}
.foot-top nav{display:grid;gap:6px;align-content:start}
.foot-top a,.foot-bot a{text-decoration:none;transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.foot-top a:hover,.foot-bot a:hover{color:#fff}}
.foot-bot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}

/* Mobile Anrufleiste */
.callbar{display:none}

/* Unterseite Leistungen */
.page-head{background:var(--stone);padding-block:clamp(52px,6.4vw,96px) 0}
.page-head h1{max-width:12em}
.page-head .lead{color:var(--text-2);max-width:40em;margin-top:clamp(18px,2vw,26px)}
.jump-skala{margin-top:clamp(36px,4.6vw,64px);border-right:0;--c:#8e8e8a}
.jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:6px clamp(24px,3vw,40px)}
.jump a{display:block;padding:10px var(--gap) 10px 0;text-decoration:none;font:600 clamp(1rem,1.35vw,1.1875rem)/1.2 var(--display);font-stretch:90%;transition:color 160ms ease}
.jump a small{display:block;margin-top:2px;font:500 var(--t-small)/1.25 var(--body);color:var(--text-2);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.jump a:hover{color:var(--red)}}

.svc-detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) var(--gap-l);padding-block:clamp(44px,5.4vw,80px);align-items:start;scroll-margin-top:calc(var(--head-h) + 8px)}
.svc-detail:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.svc-detail:nth-child(even) .svc-photos{order:2}
.svc-photos{display:grid;gap:clamp(10px,1.2vw,18px)}
.svc-photos.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-photos figure{margin:0}
.svc-photos picture{display:block;aspect-ratio:1/1.14;overflow:hidden}
.svc-photos.two picture{aspect-ratio:3/5}
.svc-photos img{height:100%;object-fit:cover}
.svc-photos figcaption{font-size:var(--t-small);color:var(--text-2);margin-top:8px;line-height:1.3}
.svc-text h2{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:14px;hyphens:auto}
.svc-text>p{color:var(--text-2);max-width:38em}
.dash{margin-top:clamp(18px,2vw,26px)}
.dash li{position:relative;padding-left:16px;margin-bottom:7px}
.dash li::before{content:"";position:absolute;left:0;top:.36em;width:2px;height:.8em;background:var(--red)}
.svc-text h3{margin:clamp(24px,2.8vw,36px) 0 8px}
.svc-text>.svc-cta{margin-top:clamp(18px,2vw,26px);color:var(--text)}
@media (min-width:961px){.svc-photos{position:sticky;top:calc(var(--head-h) + 24px)}}

/* Das GEFA-Schild: eine Platte mit abgeschrägter Ecke, kein Tabellenraster. Der Kennwert führt. */
.schild{margin-top:clamp(22px,2.6vw,36px);background:var(--paper);padding:clamp(18px,2vw,28px) clamp(18px,2.2vw,32px) clamp(18px,2vw,26px);clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%)}
.schild-label{font-size:var(--t-small);color:var(--text-2);line-height:1.3}
.schild-k{font:620 var(--t-k)/1 var(--display);font-stretch:85%;letter-spacing:-.026em;margin:2px 0 clamp(14px,1.6vw,20px);font-variant-numeric:tabular-nums;white-space:nowrap}
.schild-k.wort{font-size:clamp(2rem,3.6vw,3.25rem);white-space:normal;margin-bottom:6px}
.schild-n{margin-top:clamp(12px,1.4vw,18px);font-size:var(--t-small);line-height:1.4;color:var(--text-2)}
.schild-n b{color:var(--text);font-weight:600}

.more-grid,.norms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px var(--gap)}
.more-grid{margin-top:clamp(32px,4vw,56px)}
.more-grid b{display:block;font:600 var(--t-h3)/1.15 var(--display);font-stretch:88%;margin-bottom:8px}
.more-grid p{color:var(--text-2);font-size:var(--t-small);line-height:1.45}
.more-open{background:var(--paper)}
.norm-head{margin-bottom:clamp(32px,4vw,56px);max-width:48rem}
.norm-head .lead{margin-top:clamp(14px,1.6vw,22px);color:var(--on-dark-2)}
.norms b{display:block;font:620 clamp(1.75rem,3vw,2.75rem)/1.04 var(--display);font-stretch:85%;letter-spacing:-.02em;margin-bottom:10px}
.norms p{color:var(--on-dark-2);font-size:var(--t-small);line-height:1.45}
.norm-note{margin-top:clamp(32px,4vw,56px);color:var(--on-dark-2);max-width:48em}
.cta-band{background:var(--black);color:var(--on-dark);--focus:#fff;padding-block:clamp(56px,7vw,96px)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:24px var(--gap-l);align-items:center;justify-content:space-between}
.cta-band h2{max-width:13em}

/* Rechtstexte und einfache Seiten: auf derselben Kante wie alles andere */
.legal{padding-block:clamp(48px,7vw,96px);width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.legal>*{max-width:46rem}
.legal h1{font-size:var(--t-h2);margin-bottom:clamp(24px,3vw,36px)}
.legal h2{font-size:var(--t-h3);letter-spacing:-.012em;font-weight:600;margin:clamp(28px,3vw,36px) 0 8px;line-height:1.15}
.legal p,.legal ul{margin-bottom:14px}
.legal ul{list-style:disc;padding-left:1.2em}
.legal mark{background:#f6dcda;color:#6f120d;font-weight:600;padding:0 .25em}
.draft{background:var(--red);color:#fff;padding:16px 20px;font-weight:600;margin-bottom:28px}

/* Bewegung. Einziger Auftritt: die Skala zeichnet sich einmal. Text steht sofort, Inhalte werden nie versteckt. */
@media (prefers-reduced-motion:no-preference){
  /* Erklärende Bewegung, einmal je Seitenaufruf: darf länger als 300 ms sein */
  html.anim .hero-skala i{animation:skala-auf 700ms var(--ease-out) 80ms both}
  html.anim .skala[data-rv] i{transform:scaleX(0);transition:transform 600ms var(--ease-out);transition-delay:calc(var(--n,0)*45ms)}
  html.anim .skala[data-rv].in i{transform:none}
  html.anim img.is-wait{opacity:0}
  html.anim img.is-loaded{transition:opacity 220ms ease}
  /* Seitenwechsel: kurzes Überblenden, Kopfzeile bleibt stehen */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:160ms;animation-timing-function:ease}
  @keyframes skala-auf{from{transform:scaleX(0)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:active,.g-item:active,.lb-btn:active{transform:none}
  .lb-stage{transform:none;transition:none}
  .g-item img,.faq-item summary svg,.site-nav a::after,.burger span{transition:none}
  .faq-item::details-content{transition:none}
}

/* Tablet */
@media (max-width:1100px){
  .facts{padding-top:10px}
  .more-grid,.norms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid,.partner-grid{grid-template-columns:minmax(0,1fr)}
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .about-copy{padding-inline:var(--gutter)}
  .about-media{min-height:0;aspect-ratio:3/2}
  .steps li{padding-right:18px}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .burger{display:block}
  .head-tel{display:block;margin-left:auto}
  .head-cta{order:2}
  .burger{order:3}
  /* Ohne JavaScript steht das Menü sichtbar unter der Kopfzeile */
  .head-row{flex-wrap:wrap}
  .site-nav{order:4;width:100%;margin:0;flex-wrap:wrap;padding-bottom:8px}
  html.js .head-row{flex-wrap:nowrap}
  html.js .site-nav{position:absolute;left:0;right:0;top:100%;width:auto;display:grid;gap:0;padding:6px var(--gutter) 18px;background:var(--black);font-size:1.2rem;box-shadow:0 1px 0 var(--line-dark);opacity:0;visibility:hidden;transform:translateY(-6px);transform-origin:top;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 200ms}
  html.js .site-nav.open{opacity:1;visibility:visible;transform:none}
  html.js .site-nav a{padding:13px 0;border-top:1px solid var(--line-dark)}
  html.js .site-nav a:first-child{border-top:0}
  html.js .site-nav a::after{display:none}
  html.js .site-nav a[aria-current]{color:#fff;font-weight:700}
  .reg-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .reg-stage{display:none}
  .reg a{grid-template-columns:88px minmax(0,1fr);column-gap:16px;align-items:start}
  .reg picture{display:block;grid-row:1/4;aspect-ratio:1/1;overflow:hidden}
  .reg picture img{height:100%;object-fit:cover}
  .reg h3,.reg p,.reg-k{grid-column:2}
  .reg-k{grid-row:auto;margin-top:4px;font-size:1.0625rem;font-stretch:90%;letter-spacing:0}
  .svc-detail,.svc-detail:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .svc-detail:nth-child(even) .svc-photos{order:0}
  .svc-photos picture{aspect-ratio:4/3}
  .svc-photos.two picture{aspect-ratio:4/5}
  .faq-grid,.refs-grid{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
}
/* Smartphone: eigene Komposition statt verkleinertem Desktop */
@media (max-width:760px){
  :root{--head-h:64px;--chamfer:14px}
  body{--t-body:1.0625rem;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .brand img{width:104px}
  .head-tel,.head-cta{display:none}
  .burger{margin-left:auto}
  .hero{min-height:0}
  .h1-z2{display:inline}
  .hero-main{padding-top:36px;padding-bottom:32px}
  /* Die Anrufleiste steht direkt darunter: der Hero muss nichts doppeln */
  .hero .actions{display:none}
  .hero .lead{margin-bottom:0}
  .hk{font-size:clamp(1.375rem,6.6vw,2rem)}
  .facts{grid-template-columns:minmax(0,1fr);row-gap:14px;padding-top:18px}
  .facts li{padding-right:0}
  .link-more{display:inline-block;padding-block:9px}
  .also,.about-points,.c-facts,.f-grid,.more-grid,.norms{grid-template-columns:minmax(0,1fr)}
  .ablauf-head{display:block}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:0}
  .steps-skala{display:none}
  .steps li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:8px;padding:16px 0;border-top:1px solid var(--line)}
  .steps li:last-child{border-bottom:1px solid var(--line)}
  .step-no{grid-row:1/3;margin:0;font-size:2.25rem}
  .steps h3{margin-bottom:2px}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ref-list{columns:1}
  .about-media{aspect-ratio:auto;padding:40px 24px}
  .contact .tel{font-size:clamp(2.5rem,13.4vw,5rem)}
  .jump{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jump-skala{background-size:100% 1px,50% 100%}
  .cta-band .btn{flex:1 1 100%}
  .site-foot a,.map-row a{display:inline-block;padding-block:9px}
  .foot-top nav{gap:0}
  .foot-top>a,.foot-top>p{grid-column:1/-1}
  .foot-navs{grid-column:1/-1}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:3fr 2fr;background:var(--black);padding-bottom:env(safe-area-inset-bottom);view-transition-name:anrufleiste}
  .callbar .btn{min-height:64px;font-size:1.0625rem;padding-inline:10px}
}
@media print{.site-head,.callbar,.lb,.map{display:none}html.anim img.is-wait{opacity:1}html.anim .skala[data-rv] i,html.anim .hero-skala i{transform:none;animation:none}}
/* Sehr schmale Geräte: lange deutsche Wörter dürfen umbrechen */
@media (max-width:400px){
  h1,h2,h3{overflow-wrap:break-word}
  p,li,b{overflow-wrap:anywhere}
  .reg a{grid-template-columns:72px minmax(0,1fr);column-gap:12px}
  .contact .tel{font-size:12.4vw}
}