@font-face{font-family:'Archivo';font-style:italic;font-weight:900;font-display:swap;src:url('/assets/fonts/Archivo-900i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:italic;font-weight:900;font-display:swap;src:url('/assets/fonts/Archivo-900i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Archivo-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Archivo-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Archivo-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Archivo-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/Archivo-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/Archivo-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/IBMPlexMono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/IBMPlexMono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ============================================================
   FF GARAGEN · Design-System "STAHLBAU" (Richtung A, freigegeben 2026-07-11)
   Anthrazit + Signal-Orange, diagonale Schnittkanten, Archivo 900 Versalien,
   IBM Plex Mono fuer Technik-Details. Fonts self-hosted (fonts.css).
   ============================================================ */
:root{
  --steel:#17191D; --steel-2:#1F2228; --line-d:#2A2D33;
  --paper:#F2F2F0; --white:#FFFFFF; --line-l:#E1E1DC;
  --ink:#1D2025; --ink-soft:#5A5F68; --gray:#8B9099;
  --orange:#FF5A1F; --orange-d:#C23F0E; /* dunkles Orange erfuellt WCAG 4.5:1 auf Weiss und Papier */
  --cut:28px; --maxw:1080px; --textw:760px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0}
/* hidden-Attribut gewinnt IMMER, auch gegen display:flex/grid von Klassen (sonst bleibt
   z.B. das Consent-Banner trotz hidden sichtbar - Fund vom 2026-07-12) */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,sans-serif;font-weight:400;color:var(--ink);
  background:var(--paper);line-height:1.65;font-size:17px}
::selection{background:var(--orange);color:var(--white)}
a{color:var(--orange-d)}
img{max-width:100%}

/* ---------- Typo ---------- */
h1,h2,h3{line-height:1.08;letter-spacing:.005em}
h1{font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,3.6vw,2.5rem)}
h2{font-weight:900;text-transform:uppercase;font-size:clamp(1.25rem,2.6vw,1.7rem);margin:2.6rem 0 .8rem;position:relative;padding-left:1.1rem}
h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:5px;background:var(--orange);transform:skewX(-12deg)}
h3{font-weight:600;font-size:1.08rem;margin:1.5rem 0 .4rem}
p{margin:.7rem 0}
ul{padding-left:1.3rem}
strong{font-weight:600}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
.mono{font-family:var(--mono)}

/* ---------- Header ---------- */
.top{background:var(--steel);color:var(--paper);position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line-d)}
.top-in{max-width:1160px;margin:0 auto;padding:.65rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:nowrap}
.brand img{height:40px;display:block}
.top nav{display:flex;gap:.5rem;align-items:center;flex-wrap:nowrap}
.top nav a{color:#B9BEC6;text-decoration:none;font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.top nav a:hover{color:var(--paper)}
.top nav a.on{color:var(--paper);border-bottom:2px solid var(--orange);padding-bottom:2px}

/* Zusammenhängender CTA-Button (Angebot + Termin buchen als ein segmentierter Button) */
.nav-cta{display:inline-flex;align-items:stretch;flex:0 0 auto;margin-left:.3rem}
.nav-cta a{display:inline-flex;align-items:center;padding:.52rem .74rem;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;
  border:1.5px solid var(--orange);clip-path:none}
.nav-cta .btn-line{color:var(--paper) !important;background:transparent;border-color:#3d434c;border-right:none;font-weight:600}
.nav-cta .btn-line:only-child{border-right:1.5px solid #3d434c}
.nav-cta .btn-line:hover{color:var(--orange) !important;border-color:var(--orange)}
.nav-cta .btn{color:var(--steel) !important;background:var(--orange)}
.nav-cta .btn:hover{background:var(--orange-d);border-color:var(--orange-d)}

/* ---------- Mobile-Navigation (Hamburger, ohne JavaScript) ---------- */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.nav-burger{display:none}
@media (max-width:1160px){
  .top-in{flex-wrap:nowrap}
  .nav-cta{display:contents}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:48px;height:44px;padding:11px 10px;margin-left:auto;cursor:pointer;flex:0 0 auto}
  .nav-burger span{display:block;width:100%;height:2.5px;background:var(--paper);border-radius:2px;
    transition:transform .26s ease,opacity .18s ease}
  .nav-toggle:focus-visible ~ .nav-burger{outline:2px solid var(--orange);outline-offset:2px}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .top nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;flex-wrap:nowrap;background:var(--steel);border-top:1px solid var(--line-d);
    box-shadow:0 26px 44px rgba(0,0,0,.42);
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility 0s linear .3s}
  .nav-toggle:checked ~ nav{max-height:calc(100vh - 60px);overflow-y:auto;visibility:visible;
    transition:max-height .3s ease}
  .top nav a{padding:1rem 1.25rem !important;border-bottom:1px solid var(--line-d);
    font-size:.85rem;color:var(--paper);width:auto}
  .top nav a.on{border-bottom:1px solid var(--line-d);border-left:3px solid var(--orange);
    padding-left:calc(1.25rem - 3px) !important}
  .top nav a.btn,.top nav a.btn-line{clip-path:none;border:none;background:transparent;text-align:left;
    color:var(--paper) !important;font-weight:600}
  .top nav a.btn{color:var(--orange) !important;font-weight:900}
}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--orange);color:var(--steel) !important;text-decoration:none;
  font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
  padding:.85rem 1.5rem;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.btn:hover{background:var(--orange-d)}
.btn-line{display:inline-block;color:inherit !important;text-decoration:none;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;padding:.8rem 1.3rem;border:2px solid currentColor}
.btn-line:hover{border-color:var(--orange);color:var(--orange) !important}
.cta-btns{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}

/* ---------- Hero-Band (dunkel, diagonale Unterkante) ---------- */
.band{background:var(--steel);color:var(--paper);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%);
  padding:1.7rem 0 4rem}
.band-in{max-width:var(--maxw);margin:0 auto;padding:0 1.2rem}
.band .kicker{display:block;margin-bottom:1rem}
.band h1{color:var(--paper)}
.band p.lead{color:#B9BEC6;max-width:60ch;font-size:1.06rem;margin:1.2rem 0 1.6rem}
.crumbs{font-family:var(--mono);font-size:.72rem;color:var(--gray);margin-bottom:.85rem}
.crumbs a{color:var(--gray);text-decoration:none}
.crumbs a:hover{color:var(--paper)}

/* ---------- Kennzahlen-Schild (dunkles Overlay, Orange-Schiene + Warnstreifen, Editorial-Typo) ---------- */
.plate-wrap{max-width:var(--maxw);margin:-2.2rem auto 0;padding:0 1.2rem;position:relative;z-index:2}
.plate{position:relative;display:flex;flex-wrap:nowrap;align-items:stretch;
  background:var(--steel-2);border:1px solid var(--line-d);overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.38)}
.plate-rail{flex:0 0 auto;width:58px;background:var(--orange);position:relative;
  display:flex;align-items:center;justify-content:center}
.plate-rail span{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--steel);writing-mode:vertical-rl;transform:rotate(180deg)}
.plate-rail::after{content:"";position:absolute;top:0;bottom:0;right:0;width:6px;
  background:repeating-linear-gradient(-45deg,#17191d 0 7px,transparent 7px 14px)}
.plate-body{flex:1 1 auto;display:flex;flex-wrap:wrap;padding:1.6rem 1.2rem}
.plate-c{flex:1 1 0;min-width:172px;padding:.2rem 1.4rem}
.plate-c + .plate-c{border-left:1px solid var(--line-d)}
.plate-dot{width:9px;height:9px;background:var(--orange);display:block;margin-bottom:.75rem;transform:skewX(-12deg)}
.plate-c b{display:block;font-weight:900;font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1;
  color:var(--paper);text-transform:uppercase;letter-spacing:-.015em}
.plate-c b em{font-style:normal;color:var(--orange);font-size:.5em;font-weight:600;display:block;margin-top:.4rem;letter-spacing:.05em}
.plate-c small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gray);margin-top:.6rem}
@media (max-width:760px){
  .plate{flex-direction:column}
  .plate-body{flex-direction:column;padding:1.2rem 1.4rem 1.4rem}
  .plate-c + .plate-c{border-left:none;border-top:1px solid var(--line-d);margin-top:1rem;padding-top:1rem}
  .plate-rail{width:100%;height:34px}
  .plate-rail span{writing-mode:horizontal-tb;transform:none}
  .plate-rail::after{top:auto;bottom:0;left:0;right:0;width:auto;height:6px;
    background:repeating-linear-gradient(-45deg,#17191d 0 7px,transparent 7px 14px)}
}

/* ---------- Inhalt ---------- */
main{display:block}
/* Lange Wörter, URLs und E-Mail-Adressen auf schmalen Bildschirmen umbrechen (kein horizontales Scrollen) */
p,li,h1,h2,h3,figcaption,dd,dt,td,a,.crumbs,.addr-state{overflow-wrap:break-word}
.content{max-width:var(--textw);margin:0 auto;padding:2.2rem 1.2rem 1rem}
.wide{max-width:var(--maxw);margin:0 auto;padding:2.2rem 1.2rem 1rem}
.content ul li,.wide ul li{margin:.3rem 0}
.content ul li::marker{content:"— ";color:var(--orange);font-weight:900}

/* ---------- Karten / Grids ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:1.6rem 0}
.card{background:var(--white);border:1px solid var(--line-l);padding:1.4rem 1.5rem;position:relative}
.card::before{content:"";position:absolute;top:0;left:0;width:2.2rem;height:4px;background:var(--orange)}
.card h2,.card h3{margin-top:.4rem}
.card h2{padding-left:0}.card h2::before{display:none}
.card .icon{color:var(--orange);margin-bottom:.6rem}

/* ---------- Referenzen ---------- */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;margin:2rem 0}
.ref{background:var(--white);border:1px solid var(--line-l)}
.ref img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.96)}
.ref-meta{padding:.9rem 1.1rem;display:flex;justify-content:space-between;gap:.8rem;align-items:baseline}
.ref-meta b{font-weight:600;font-size:.95rem;display:block}
.ref-meta small{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ref-price{font-family:var(--mono);font-weight:500;color:var(--orange-d);white-space:nowrap;font-size:1rem}
.ref-local{display:flex;gap:1.2rem;background:var(--white);border:1px solid var(--line-l);border-left:4px solid var(--orange);margin:1.6rem 0;align-items:stretch}
.ref-local img{width:220px;object-fit:cover}
.ref-local div{padding:1rem 1.2rem}
.ref-zoom{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;position:relative}
.ref-zoom img{transition:filter .2s ease,transform .2s ease}
.ref-zoom::after{content:"";position:absolute;inset:0;background:rgba(23,25,29,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") no-repeat center;background-size:0;transition:background-color .2s ease,background-size .2s ease}
.ref-zoom:hover img{filter:saturate(1.05) brightness(1.04)}
.ref-zoom:hover::after{background-color:rgba(23,25,29,.28);background-size:30px}

/* ---------- Lightbox (modales Bild-Popup mit Fade) ---------- */
#lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:2.2rem;
  background:rgba(15,16,18,.93);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
#lightbox.open{opacity:1;visibility:visible}
#lightbox figure{margin:0;max-width:min(1100px,94vw);display:flex;flex-direction:column;align-items:center;
  transform:scale(.96);transition:transform .28s ease}
#lightbox.open figure{transform:scale(1)}
#lightbox img{max-width:100%;max-height:82vh;object-fit:contain;display:block;background:#000;border:1px solid var(--line-d)}
#lightbox figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);margin-top:.9rem;text-align:center}
#lightbox .lb-close{position:absolute;top:1.1rem;right:1.3rem;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.5);
  background:none;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
#lightbox .lb-close:hover{border-color:var(--orange);color:var(--orange)}
@media (max-width:600px){#lightbox{padding:1rem}#lightbox .lb-close{top:.5rem;right:.6rem}}
.price-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.price-table th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:.5rem .6rem;border-bottom:2px solid var(--ink)}
.price-table th:last-child{text-align:right}
.price-table td{padding:.55rem .6rem;border-bottom:1px solid var(--line-l)}
.price-table td:last-child{font-family:var(--mono);color:var(--orange-d);text-align:right;white-space:nowrap}

/* ---------- FAQ ---------- */
.faq{margin:2.5rem 0}
.faq details{background:var(--white);border:1px solid var(--line-l);margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:600;padding:.9rem 1.1rem;list-style:none;position:relative;padding-right:2.6rem}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.65rem;color:var(--orange);font-weight:900;font-size:1.25rem}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.1rem .95rem;margin:0;color:var(--ink-soft)}

/* ---------- Gründer-Block (Über uns) ---------- */
.founder{margin:1.6rem 0 .5rem}
.founder::after{content:"";display:table;clear:both}
.founder-photo{float:left;width:300px;margin:.3rem 1.9rem .8rem 0}
.founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:60% 22%;display:block;
  border:1px solid var(--line-l);box-shadow:0 14px 34px rgba(0,0,0,.14)}
.founder-photo figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.7rem;border-left:3px solid var(--orange);padding-left:.6rem;line-height:1.5}
.founder-story > p:first-child{margin-top:0}
.founder-story p{margin:.85rem 0}
.signature{margin:1.6rem 0 .3rem;clear:both}
.signature img{height:66px;width:auto;max-width:78%;display:block}
.signature .sig-name{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.4rem}
@media (max-width:640px){
  .founder-photo{float:none;width:100%;max-width:360px;margin:0 auto 1.1rem}
  .founder-photo img{aspect-ratio:4/3;object-position:60% 22%}
}

/* ---------- CTA-Band (dunkel, beidseitig diagonal) ---------- */
.cta-band{background:var(--steel);color:var(--paper);margin:3rem 0 0;
  clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);padding:3.4rem 0 2.6rem}
.cta-band .band-in p{color:#B9BEC6;max-width:60ch}
.cta-band h2{color:var(--paper)}

/* ---------- Weiterfuehrend / Footer ---------- */
.related{max-width:var(--textw);margin:0 auto;padding:1.5rem 1.2rem 3rem}
.related ul{columns:2;column-gap:2rem;padding-left:1.2rem}
.related a{color:var(--ink-soft)}
footer{background:var(--steel);color:var(--gray);font-size:.88rem}
.foot-grid{max-width:var(--maxw);margin:0 auto;padding:2.6rem 1.2rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.4rem}
.foot-grid strong{color:var(--paper);font-weight:600;display:block;margin-bottom:.4rem;text-transform:uppercase;font-size:.75rem;letter-spacing:.12em}
.foot-grid a{color:var(--gray);text-decoration:none;display:block;padding:.12rem 0}
.foot-grid a:hover{color:var(--paper)}
/* Siegelleiste (2026-07-13): ProvenExpert live vom CDN (Bild + Link, kein Script),
   Ratedo/IHK/SSL als lokale Badges. Alles lazy, damit Lighthouse bei 99+ bleibt. */
.foot-trust{border-top:1px solid var(--line-d)}
.foot-trust > div{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1.2rem;
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.ft-label{flex-basis:100%;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray)}
.trust-pe{display:block;line-height:0;background:var(--white);border:1px solid var(--line-d)}
.trust-pe img{width:114px;height:95px;display:block}
.trust-badge{display:inline-flex;align-items:center;gap:.6rem;min-height:95px;
  border:1px solid var(--line-d);background:var(--steel-2);padding:.6rem .9rem;
  text-decoration:none;color:var(--gray);line-height:1.3}
a.trust-badge:hover{border-color:var(--gray)}
.trust-badge svg{width:22px;height:22px;flex:none;stroke:var(--orange);fill:none;
  stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.trust-badge b{display:block;color:var(--paper);font-weight:600;font-size:.8rem}
.trust-badge small{display:block;font-size:.68rem}
/* Ratedo: offizielles Widget (lazy nachgeladen) ersetzt das statische Fallback-Badge */
.trust-ratedo{display:inline-flex;align-items:center;min-height:95px}
.trust-ratedo .ratedo_badge{width:106px;line-height:0}
.foot-note{border-top:1px solid var(--line-d);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em}
.foot-note div{max-width:var(--maxw);margin:0 auto;padding:.9rem 1.2rem}

/* ---------- Icons ---------- */
.icon{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}

@media (max-width:680px){
  :root{--cut:16px}
  .brand img{height:32px}
  .related ul{columns:1}
  .ref-local{flex-direction:column}
  .ref-local img{width:100%;height:180px}
  .top nav{gap:.8rem}
}

/* ---------- Stadt-Icons (Quelle: /assets/staedte/<stadt>.svg, einzeln austauschbar) ---------- */
.city-ic{flex:0 0 auto;display:block}
.kicker-row{display:flex;align-items:center;gap:.7rem;color:var(--orange)}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.8rem;margin:1.1rem 0}
.city-link{display:flex;align-items:center;gap:.8rem;border:1px solid var(--line-l);background:var(--white);
  padding:.65rem .9rem;text-decoration:none;color:var(--ink);font-weight:600;line-height:1.35}
.city-link:hover{border-color:var(--orange)}
.city-link .city-ic{color:var(--orange-d)}
.city-link small{display:block;font-weight:400;font-family:var(--mono);font-size:.6rem;color:var(--gray);letter-spacing:.06em}
/* ---------- Info-Seiten Bilder (Montage-Ablauf, Aufbau/Qualitaet) ---------- */
.info-hero{margin:1.4rem 0 2rem}
.info-fig{margin:1.5rem 0}
.info-fig img,.info-hero img{display:block;width:100%;height:auto;border:1px solid var(--line-l)}
.info-fig figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--ink-soft);
  margin-top:.55rem;padding-left:.8rem;border-left:3px solid var(--orange)}

/* ---------- Consent-Banner (nur Live-Domain, bis zur Entscheidung) ---------- */
#ffg-consent{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--steel);color:var(--paper);
  padding:1rem clamp(1rem,4vw,2.2rem);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;
  justify-content:center;border-top:3px solid var(--orange);box-shadow:0 -6px 24px rgba(0,0,0,.25)}
#ffg-consent p{margin:0;font-size:.92rem;max-width:56ch}
#ffg-consent a{color:var(--orange);text-decoration:underline}
#ffg-consent .ffg-consent-btns{display:flex;gap:.7rem;flex-wrap:wrap}
#ffg-consent button{font-family:inherit;cursor:pointer;background:transparent}
#ffg-consent .btn,#ffg-consent .btn-line{padding:.55rem 1.1rem;font-size:.85rem}
#ffg-consent .btn{background:var(--orange)}
#ffg-consent .btn-line{color:var(--paper) !important;border-color:var(--gray)}
#ffg-consent .btn-line:hover{color:var(--orange) !important;border-color:var(--orange)}

/* ---------- Angebotsformular auf /angebot/ (Wizard, af-*) ---------- */
.af-wrap{background:var(--white);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
  padding:3rem 0;margin-top:2.5rem}
.af-in{max-width:var(--textw);margin:0 auto;padding:0 1.2rem}
.af-in h2{margin-top:0}
.af-step h3{margin:1.4rem 0 .6rem}
.af-hint{font-size:.9rem;color:var(--ink-soft);margin:.2rem 0 1rem}
.af-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1rem 0}
@media (max-width:800px){.af-cards{grid-template-columns:repeat(2,1fr)}}
.af-card{background:var(--paper);border:1.5px solid var(--line-l);padding:.85rem .9rem;text-align:left;
  cursor:pointer;font:inherit;color:inherit;transition:border-color .15s}
.af-card:hover{border-color:var(--orange)}
.af-card.sel{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.af-card b{display:block;font-weight:900;text-transform:uppercase;font-size:.82rem;margin-bottom:.25rem}
.af-card span{font-size:.76rem;color:var(--ink-soft);line-height:1.4;display:block}
#anfrage label{display:block;margin:.8rem 0;font-weight:600;font-size:.92rem}
#anfrage input[type=text],#anfrage input[type=email],#anfrage input[type=tel],
#anfrage select,#anfrage textarea{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;
  border:1.5px solid var(--line-l);background:var(--paper);font:inherit;font-weight:400;color:var(--ink)}
#anfrage input:focus,#anfrage select:focus,#anfrage textarea:focus{outline:2px solid var(--orange);outline-offset:0}
#anfrage input[type=file]{margin-top:.3rem;font-weight:400}
.af-masse{display:flex;gap:.8rem;flex-wrap:wrap}
.af-masse label{flex:1 1 9rem}
.af-check{font-weight:400 !important;display:flex !important;gap:.5rem;align-items:baseline}
.af-check input{width:auto !important;display:inline !important}
.af-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.af-progress{margin:1.2rem 0 .4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.af-bar{height:5px;background:var(--line-l);margin-top:.4rem}
.af-bar div{height:100%;background:var(--orange);transition:width .25s}
.af-nav{display:flex;gap:.8rem;margin-top:1.4rem}
.af-nav .btn,.af-nav .btn-line{font-family:inherit;cursor:pointer;border-width:2px}
#anfrage .err{color:#b91c1c;font-size:.9rem;margin:.6rem 0}
.af-done{background:var(--paper);border-left:4px solid var(--orange);padding:1.2rem 1.4rem}
.af-done h3{margin-top:0}
.af-auto{display:block;font-weight:400;font-size:.78rem;color:var(--ink-soft);margin-top:.1rem}
/* Ort-Hinweis inline, sonst rutscht das Feld unter die PLZ-Zeile */
#afOrtAuto{display:inline;margin-left:.35rem;white-space:nowrap}
.af-carport-note{background:var(--paper);border-left:3px solid var(--orange);padding:.6rem .8rem;margin:.4rem 0 .8rem}
/* Zeichnungs-Karten fuer Ausfuehrung/Bauform (Schritt 2 des Angebotsformulars) */
.af-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:.4rem 0 1rem}
@media (max-width:600px){.af-icons{grid-template-columns:1fr}}
.af-icon{background:var(--white);border:1.5px solid var(--line-l);padding:.8rem .6rem .6rem;cursor:pointer;
  font:inherit;color:var(--ink);text-align:center;transition:border-color .15s}
.af-icon:hover{border-color:var(--orange)}
.af-icon.sel{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange);color:var(--orange-d)}
.af-icon svg{width:100%;max-width:150px;height:auto;display:block;margin:0 auto .45rem}
.af-icon b{font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;display:block}

/* ---------- Google-Bewertungs-Badge: V3 "Weiss mit Schnittkante" (Freigabe Andrei 2026-07-12).
   Desktop (>=1024px): fixiert unten rechts. Mobil/schmal: STATISCH im Seitenfluss vor dem Footer,
   damit es garantiert nie Inhalt oder Bedienelemente ueberdeckt (und CLS-neutral bleibt). ---------- */
.gbadge{display:flex;align-items:center;gap:.55rem;background:var(--white);
  border:1px solid var(--line-l);border-top:3px solid var(--orange);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  box-shadow:0 6px 22px rgba(0,0,0,.14);padding:.5rem .9rem .55rem .8rem;
  text-decoration:none;color:var(--ink);width:max-content;margin:1.1rem auto}
.gbadge:hover{border-color:var(--orange)}
.gb-g{width:20px;height:20px;flex:0 0 auto}
.gb-gtile{display:flex;flex:0 0 auto}
.gb-txt{line-height:1.15}
.gb-row{display:flex;align-items:baseline;gap:.35rem}
.gb-row b{font-weight:900;font-size:.95rem}
.gb-stars{color:#FBBC04;font-size:.8rem;letter-spacing:.06em}
.gb-txt small{display:block;font-size:.66rem;color:var(--ink-soft)}
@media (min-width:1024px){
  .gbadge{position:fixed;z-index:90;bottom:14px;right:14px;margin:0}
}