/* ==========================================================================
   F-B-Z GmbH, Designsystem 2.1
   Fussboden- und Bausanierung Ziesar
   Schwarz, Weiss und Grau als Basis, Petrol als ruhige Akzentfarbe.
   Zwei Schriften (Stack Sans Headline, Inter), abgerundete Flaechen,
   Kacheln statt langer Listen.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, DSGVO-konform, SIL OFL) ---------- */
@font-face{
  font-family:"Stack Sans Headline";
  src:url("../fonts/stack-latin-var.woff2") format("woff2-variations");
  font-weight:200 700; font-style:normal; font-display:swap;
  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:"Stack Sans Headline";
  src:url("../fonts/stack-latin-ext-var.woff2") format("woff2-variations");
  font-weight:200 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Inter";
  src:url("../fonts/inter-latin-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
  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:"Inter";
  src:url("../fonts/inter-latin-ext-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;
}

/* ---------- Tokens ---------- */
:root{
  /* Basis */
  --paper:#FFFFFF;
  --mist:#F3F4F4;
  --sand:#E6E9E9;
  --ink:#151A1B;
  --ink-2:#586164;
  --line:#E1E5E5;
  --line-strong:#CAD1D2;
  --night:#111819;

  /* Akzent: Petrol */
  --accent:#2C7C88;
  --accent-ink:#1B5B65;
  --accent-soft:#D6E9EC;
  --accent-light:#8ED0D9;
  --tint:#E9F2F3;
  --deep:#0E2D33;

  /* auf dunklem Grund */
  --on-night:rgba(255,255,255,.76);
  --on-night-2:rgba(255,255,255,.58);
  --line-night:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.07);

  /* Abstaende */
  --s4:4px;   --s8:8px;   --s12:12px; --s16:16px; --s20:20px;
  --s24:24px; --s32:32px; --s40:40px; --s48:48px; --s64:64px;
  --s80:80px; --s96:96px;

  /* Raster */
  --maxw:1320px;
  --gutter:20px;
  --col-gap:24px;
  --frame:8px;
  --header-h:76px;

  /* Rundungen: Panel > Karte > Bild > Kachel > Feld */
  --r-panel:28px;
  --r-card:20px;
  --r-media:16px;
  --r-tile:16px;
  --r-field:12px;
  --pill:999px;

  --display:"Stack Sans Headline","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B5B65' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --check-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ED0D9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (min-width:720px){ :root{--gutter:32px; --col-gap:32px; --frame:12px; --header-h:90px} }
@media (min-width:1100px){ :root{--gutter:48px; --col-gap:40px} }

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); scroll-behavior:smooth}
@media (min-width:900px){ html{scroll-padding-top:calc(var(--header-h) + 80px)} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:1.0625rem; font-weight:400; line-height:1.65;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
img,svg{display:block; max-width:100%}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
::selection{background:var(--accent); color:var(--paper)}
p,li,dd{text-wrap:pretty}
.numlist,.reflist,.reffeat,.c-adr{font-variant-numeric:tabular-nums}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:400; color:var(--ink);
  letter-spacing:0; text-wrap:balance; hyphens:manual; overflow-wrap:break-word}
.h1{font-size:clamp(2.5rem,1.55rem + 3.4vw,4.25rem); line-height:1.04; letter-spacing:-.012em}
.h2{font-size:clamp(1.875rem,1.4rem + 2vw,3rem); line-height:1.08; letter-spacing:-.008em}
.h3{font-size:1.5rem; line-height:1.25}
.h4{font-size:1.25rem; line-height:1.3}
.lead{font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem); line-height:1.55; color:var(--ink); max-width:38rem}
.body{font-size:1.0625rem; line-height:1.7; color:var(--ink); max-width:38rem}
.small{font-size:.875rem; line-height:1.6; color:var(--ink-2)}

/* Hervorhebung: Schluesselwort in der Akzentfarbe */
.hl{color:var(--accent)}
.hero .hl,.phead .hl,.band-deep .hl,.close .hl{color:var(--accent-light)}

/* Etikett */
.badge,.meta{
  display:inline-flex; align-items:center; gap:10px; width:fit-content;
  font-family:var(--text); font-size:.875rem; font-weight:500; line-height:1.2;
  letter-spacing:0; text-transform:none; color:var(--ink);
}
.badge{padding:8px 14px; border-radius:var(--pill); background:var(--mist)}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto}

.mt8{margin-top:var(--s8)} .mt12{margin-top:var(--s12)} .mt16{margin-top:var(--s16)}
.mt24{margin-top:var(--s24)} .mt32{margin-top:var(--s32)}
.mt40{margin-top:var(--s40)} .mt48{margin-top:var(--s48)}
.mt64{margin-top:var(--s64)}

/* ---------- Raster ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--col-gap)}
.section{padding-block:clamp(72px,8vw,128px)}
.section--tight{padding-block:clamp(56px,6vw,96px)}
.section + .section--join{padding-top:0}

/* ---------- Flaechen ---------- */
.band-white{background:var(--paper)}
.band-white + .band-white{padding-top:0}
/* Farbige Abschnitte stehen als abgerundete Panels auf dem weissen Grund */
.band-surface,.band-tint,.band-deep{margin-inline:var(--frame); border-radius:var(--r-panel)}
.band-surface{background:var(--mist)}
.band-tint{background:var(--tint)}
.band-deep{
  position:relative; isolation:isolate; overflow:hidden; color:var(--paper);
  background:var(--deep);
}
:is(.band-surface,.band-tint,.band-deep,.phead,.hero,.subnav) + :is(.band-surface,.band-tint,.band-deep){margin-top:var(--frame)}

/* ---------- Bedienelemente ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--text); font-size:1rem; font-weight:500; line-height:1; letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap;
  padding:15px 24px; border-radius:var(--pill); cursor:pointer;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--mist); border-color:var(--line-strong); color:var(--ink)}

.link{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:.9375rem; font-weight:500; line-height:1.2; color:var(--ink); text-decoration:none;
  padding:11px 18px; border:1px solid var(--line-strong); border-radius:var(--pill);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.link::after{content:""; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg); margin-left:2px; transition:transform .2s var(--ease)}
.link:hover{border-color:var(--accent); color:var(--accent-ink)}
.link:hover::after{transform:translateX(3px) rotate(45deg)}
.link .arw{display:none}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s12); align-items:center}

.ilink{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong);
  text-underline-offset:3px}
.ilink:hover{text-decoration-color:var(--accent)}

/* ---------- Kopfzeile ---------- */
.topbar{position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.88); -webkit-backdrop-filter:saturate(1.4) blur(16px);
  backdrop-filter:saturate(1.4) blur(16px)}
.header{position:relative; color:var(--ink)}
.header__in{display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:var(--s24)}

/* Lesefortschritt: feine Petrol-Linie an der Unterkante */
.prog{position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--line); overflow:hidden}
.prog i{display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left center; will-change:transform}

.brand{display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand__mark{width:auto; height:50px}
.brand__mark--light{display:none}
@media (min-width:720px){ .brand__mark{height:70px} }
.brand__txt{display:none; font-size:.8125rem; line-height:1.35; color:var(--ink-2);
  border-left:1px solid var(--line); padding-left:16px}
.brand__txt b{display:block; font-family:var(--display); font-weight:500; font-size:1.0625rem; color:var(--ink)}
@media (min-width:1180px){ .brand__txt{display:block} }

.nav{display:none}
@media (min-width:1000px){ .nav{display:flex; align-items:center; gap:4px} }
.nav__link{
  background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--pill);
  font-size:.9688rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__link:hover{color:var(--ink); background:var(--mist)}
.nav__link.is-active{color:var(--ink); background:var(--mist)}
.nav__cta{margin-left:12px; padding:12px 20px; font-size:.9688rem}
.chev{width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s var(--ease)}
.nav__link[aria-expanded="true"] .chev{transform:rotate(225deg) translate(-1px,-1px)}

/* ---------- Aufklappmenue: schmales Panel unter "Leistungen", aufgebaut wie das Handymenue ---------- */
.drop{display:none; position:absolute; left:0; right:0; top:100%; height:0}
.drop.is-open{display:block}
.drop__panel{position:absolute; top:8px; left:var(--drop-x,auto); right:var(--drop-r,var(--gutter));
  width:min(460px,calc(100vw - 2 * var(--gutter)));
  max-height:calc(100vh - var(--header-h) - 32px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:0 30px 60px -30px rgba(17,24,25,.30); padding:12px 12px 18px;
  animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.drop__panel .mnav__grpbtn:hover .pm{background:var(--sand)}
.drop__panel .mnav__grpbtn[aria-expanded="true"]:hover .pm{background:var(--ink)}
.drop__panel .mnav__link:hover,.drop__panel .mnav__kids a:hover{color:var(--accent-ink)}
.drop__panel .mnav__link{font-size:.9688rem}
.drop__panel .mnav__alllink{margin:14px 8px 0; font-size:.9688rem}

/* ---------- Burger + Mobilmenue ---------- */
.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:var(--mist); border:0; border-radius:50%;
  cursor:pointer; padding:0 13px}
@media (min-width:1000px){ .burger{display:none} }
.burger span{display:block; height:1.5px; background:var(--ink);
  transition:transform .22s var(--ease), opacity .18s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mnav{display:none; background:var(--paper); color:var(--ink);
  padding-block:var(--s8) var(--s48);
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain}
.mnav.is-open{display:block; min-height:calc(100dvh - var(--header-h))}
@media (min-width:1000px){ .mnav,.mnav.is-open{display:none} }
.mnav__item{border-bottom:1px solid var(--line)}
.mnav__top{display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:0; padding:18px 0; font-family:var(--display); font-size:1.625rem; line-height:1.2;
  font-weight:400; color:var(--ink); text-decoration:none; cursor:pointer; text-align:left}
.mnav__panel{display:none}
.mnav__panel.is-open{display:block; animation:pop .22s var(--ease)}

/* Plus/Minus und Pfeil als kleine runde Knoepfe */
.pm,.go{display:block; position:relative; flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:var(--mist); transition:background .2s var(--ease)}
.pm::before,.pm::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px;
  background:var(--ink); transform:translate(-50%,-50%); transition:transform .25s var(--ease), background .2s}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
[aria-expanded="true"] > .pm{background:var(--ink)}
[aria-expanded="true"] > .pm::before,[aria-expanded="true"] > .pm::after{background:var(--paper)}
[aria-expanded="true"] > .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.go::before{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px;
  border-top:1.5px solid var(--ink); border-right:1.5px solid var(--ink);
  transform:translate(-65%,-50%) rotate(45deg)}

.mnav__lvl{padding:0 0 20px}
.mnav__grp{background:var(--mist); border-radius:var(--r-tile)}
.mnav__grp + .mnav__grp{margin-top:8px}
.mnav__grpbtn{display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 12px 12px 18px; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--display); font-size:1.1875rem; line-height:1.25; color:var(--ink)}
.mnav__grpbtn .pm{width:32px; height:32px; background:var(--paper)}
.mnav__grpbtn[aria-expanded="true"] > .pm,.mnav__more[aria-expanded="true"] > .pm{background:var(--ink)}
.mnav__list{padding:0 8px 10px}
.mnav__link{display:block; padding:11px 10px; border-radius:10px; text-decoration:none;
  font-size:1rem; line-height:1.35; color:var(--ink)}
.mnav__link:active{background:var(--paper)}
.mnav__link--all{font-weight:600}
.mnav__row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center}
.mnav__more{display:grid; place-items:center; background:none; border:0; padding:4px; cursor:pointer}
.mnav__more .pm{width:28px; height:28px; background:var(--paper)}
.mnav__more .pm::before,.mnav__more .pm::after{width:10px}
.mnav__more[aria-expanded="true"] > .pm{background:var(--ink)}
.mnav__kids{grid-column:1/-1; margin:0 0 8px 12px; padding-left:12px; border-left:2px solid var(--accent-soft)}
.mnav__kids a{display:block; padding:9px 8px; text-decoration:none; font-size:.9375rem; line-height:1.35; color:var(--ink-2)}
.mnav__alllink{display:inline-block; margin:16px 4px 0; font-size:1rem; font-weight:500; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:5px; text-decoration-thickness:2px}
.mnav__foot{margin-top:var(--s32)}

/* ---------- Seitenkopf: dunkles Panel ---------- */
.phead{position:relative; isolation:isolate; overflow:hidden;
  background:var(--night); color:var(--paper);
  margin:var(--frame) var(--frame) 0; border-radius:var(--r-panel)}

.phead__in{padding-block:clamp(48px,6.5vw,104px) clamp(48px,5.5vw,88px)}
.phead h1,.phead h2{color:var(--paper)}
.phead .h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.75rem); line-height:1.05}
.phead .lead{color:var(--on-night)}
.crumb{font-size:.875rem; color:var(--on-night-2); margin-bottom:var(--s32)}
.crumb a{text-decoration:none; color:var(--on-night-2); transition:color .16s var(--ease)}
.crumb a:hover{color:var(--paper)}
.crumb span{margin:0 8px; opacity:.5}
.phead__grid{align-items:end}
.phead__t{grid-column:1/-1}
.phead__d{grid-column:1/-1; margin-top:var(--s8)}
@media (min-width:960px){
  .phead__t{grid-column:1/8}
  .phead__d{grid-column:9/13; margin-top:0; padding-bottom:8px}
}
.phead--slim .crumb{display:none}
.phead--slim .phead__t{grid-column:1/-1}
@media (min-width:960px){ .phead--slim .phead__t{grid-column:1/9} }
.phead__t .badge{margin-bottom:var(--s24); background:rgba(255,255,255,.1); color:var(--paper)}
.phead__t .badge::before{background:var(--accent-light)}
.phead__t .lead{margin-top:var(--s24); max-width:44rem}

/* ---------- Sprungleiste fuer lange Seiten ---------- */
.subnav{position:relative; z-index:40; margin-top:var(--frame); pointer-events:none}
@media (min-width:900px){ .subnav{position:sticky; top:calc(var(--header-h) + 8px)} }
.subnav__in{pointer-events:auto; display:flex; gap:4px; width:fit-content; max-width:100%;
  overflow-x:auto; scrollbar-width:none; padding:5px;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--pill);
  box-shadow:0 12px 30px -22px rgba(17,24,25,.35)}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto; padding:9px 16px; border-radius:var(--pill); white-space:nowrap;
  font-size:.9375rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease)}
.subnav a:hover{color:var(--ink); background:var(--mist)}
.subnav a.is-on{background:var(--ink); color:var(--paper)}
@media (min-width:900px) and (max-width:1099px){ .subnav a{padding:8px 13px; font-size:.9063rem} }
@media (max-width:899px){
  .subnav__in{flex-wrap:wrap; gap:6px; padding:0; width:auto; background:none; border:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; overflow:visible}
  .subnav a{background:var(--mist); padding:8px 14px; font-size:.875rem}
}

/* ---------- Hero: Foto-Panel ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; color:var(--paper);
  background:var(--night); margin:var(--frame) var(--frame) 0; border-radius:var(--r-panel)}
.hero__bg{position:absolute; inset:0; z-index:-1}
.hero__bg picture{display:block; width:100%; height:100%}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 62%}
.hero__bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,16,17,.20) 0%, rgba(12,16,17,.08) 34%, rgba(12,16,17,.78) 100%),
    linear-gradient(90deg, rgba(12,16,17,.55) 0%, rgba(12,16,17,.18) 55%, rgba(12,16,17,0) 80%);
}
.hero__in{position:relative; min-height:clamp(560px,calc(100svh - var(--header-h) - 2 * var(--frame)),880px);
  display:flex; align-items:flex-end; padding-block:clamp(40px,6vw,80px)}
.hero__grid{width:100%}
.hero__text{grid-column:1/-1}
@media (min-width:900px){ .hero__text{grid-column:1/10} }
.hero .h1{color:var(--paper); max-width:16ch}
.hero .badge{background:rgba(255,255,255,.14); color:var(--paper);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18)}
.hero .badge::before{background:var(--accent-light)}
.hero .lead{color:rgba(255,255,255,.86); max-width:36rem}
.hero .btn{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.hero .btn:hover{background:var(--accent-light); border-color:var(--accent-light)}
.hero .link{color:var(--paper); border-color:rgba(255,255,255,.4)}
.hero .link:hover{background:rgba(255,255,255,.12); border-color:var(--paper); color:var(--paper)}
.hero .hero__pts{display:flex; flex-wrap:wrap; gap:8px 28px; columns:auto}
.hero .hero__pts li{position:relative; padding:0 0 0 16px; border:0; margin:0; max-width:none;
  color:var(--paper); font-size:1.0625rem; font-weight:500; line-height:1.4}
.hero .hero__pts li::before{content:""; position:absolute; left:0; top:.6em;
  width:6px; height:6px; border-radius:50%; background:var(--accent-light)}

/* ---------- Startseite: Foto ueber die ganze Breite, Kopfzeile liegt darauf ---------- */
.has-hero .topbar{position:fixed; left:0; right:0; top:0;
  background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background .35s var(--ease), box-shadow .35s var(--ease)}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .brand__mark{display:none}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .brand__mark--light{display:block}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) :is(.brand__txt,.brand__txt b,.nav__link){color:var(--paper)}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .brand__txt{border-color:rgba(255,255,255,.3)}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .nav__link:hover,
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .nav__link.is-active{background:rgba(255,255,255,.14)}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .nav__cta{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .burger{background:rgba(255,255,255,.16)}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .burger span{background:var(--paper)}
.has-hero .topbar:not(.is-solid):not(:has(.drop.is-open)):not(:has(.mnav.is-open)) .prog{opacity:0}
.has-hero .topbar.is-solid,
.has-hero .topbar:has(.drop.is-open),
.has-hero .topbar:has(.mnav.is-open){background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px)}
.has-hero .hero{margin:0; border-radius:0}
.has-hero .hero__in{min-height:clamp(600px,100svh,1000px); padding-top:calc(var(--header-h) + 40px)}
.has-hero .hero__bg::after{
  background:
    linear-gradient(180deg, rgba(12,16,17,.62) 0%, rgba(12,16,17,.12) 26%, rgba(12,16,17,.08) 42%, rgba(12,16,17,.80) 100%),
    linear-gradient(90deg, rgba(12,16,17,.50) 0%, rgba(12,16,17,.16) 55%, rgba(12,16,17,0) 80%)}

/* ---------- Bilder ---------- */
.fig{margin:0; position:relative; background:var(--sand); overflow:hidden; border-radius:var(--r-media)}
.fig img{width:100%; height:100%; object-fit:cover; display:block}
.ar-3-4{aspect-ratio:3/4}
.ar-4-5{aspect-ratio:4/5}
.ar-4-3{aspect-ratio:4/3}
.ar-3-2{aspect-ratio:3/2}
.ar-5-3{aspect-ratio:5/3}
.ar-16-9{aspect-ratio:16/9}
.ar-1-1{aspect-ratio:1/1}
.ar-flat{aspect-ratio:3/2}
@media (min-width:760px){ .ar-flat{aspect-ratio:22/9} }
.fig--floor img{object-position:center 64%}
.figcap{margin-top:12px; font-size:.875rem; line-height:1.45; color:var(--ink-2)}

.figrow{display:grid; grid-template-columns:1fr; gap:var(--s16)}
@media (min-width:640px){ .figrow--2,.figrow--3{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .figrow--3{grid-template-columns:repeat(3,1fr)} }
.figitem{min-width:0; position:relative}
.figmark{position:absolute; z-index:2; top:14px; left:14px; padding:7px 13px; border-radius:var(--pill);
  font-size:.8125rem; font-weight:600; line-height:1; letter-spacing:.01em;
  background:rgba(255,255,255,.92); color:var(--ink);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.figmark--nachher{background:var(--accent); color:var(--paper)}

/* Bildreihen mit gemischten Formaten: alle Bilder einer Reihe gleich hoch */
.figjust{display:grid; gap:var(--s16)}
.figjust__row{display:flex; flex-direction:column; gap:var(--s16)}
@media (min-width:760px){
  .figjust__row{flex-direction:row; align-items:flex-start}
  .figjust__row > .figitem{flex:var(--g,1) 1 0%; min-width:0}
}

/* Zwei Fotos, auf breiten Schirmen ueberlappend */
.stack{position:relative}
.stack__over{margin-top:var(--s16)}
@media (min-width:900px){
  .stack{margin-bottom:48px}
  .stack__over{position:absolute; right:-24px; bottom:-48px; width:40%; margin:0;
    padding:10px; background:var(--paper); border-radius:calc(var(--r-media) + 10px)}
}

/* Zwei Text-Bild-Gruppen */
.mgroup{display:grid; grid-template-columns:1fr; gap:var(--s16)}
@media (min-width:760px){ .mgroup{grid-template-columns:1fr 1fr} }
.mgroup__item{min-width:0; display:flex; flex-direction:column;
  background:var(--mist); border-radius:var(--r-card); padding:clamp(20px,2.4vw,32px)}
.mgroup__item .body{max-width:34rem}
.mgroup__fig{margin-top:auto; padding-top:var(--s24)}

/* ---------- F-B-Z-Zeile und Kennzahlen ---------- */
.brandline{background:var(--paper); padding-top:var(--frame)}
.has-hero .hero + .brandline{padding-top:clamp(16px,2vw,24px)}
.brandline__box{margin:0; padding:clamp(20px,2.4vw,30px) clamp(22px,3vw,40px);
  border:1px solid var(--line-strong); border-radius:var(--r-card);
  font-family:var(--display); font-size:clamp(1.375rem,1.05rem + 1.3vw,2.125rem);
  line-height:1.15; font-weight:400; color:var(--ink); letter-spacing:-.008em}
.brandline span{font-weight:600; color:var(--accent-ink)}
.facts{display:grid; grid-template-columns:1fr; gap:var(--s16); margin-top:clamp(32px,4vw,56px)}
@media (min-width:1100px){ .facts{grid-template-columns:repeat(3,minmax(0,1fr))} }
.facts > div{background:var(--mist); border-radius:var(--r-card); padding:24px 24px 26px;
  display:flex; flex-direction:column}
.facts dt{font-family:var(--display); font-size:clamp(1.75rem,1.4rem + 1.2vw,2.375rem); line-height:1.1; color:var(--ink)}
.facts dd{margin-top:10px; font-size:1.0625rem; line-height:1.5; color:var(--ink)}

/* ---------- Zwei gleichwertige Bereiche ---------- */
.duo{display:grid; grid-template-columns:1fr; gap:var(--s16)}
@media (min-width:820px){ .duo{grid-template-columns:1fr 1fr} }
.duo__item{background:var(--mist); border-radius:var(--r-card);
  padding:clamp(22px,3.2vw,48px); display:flex; flex-direction:column}
.duo__foot{margin-top:auto; padding-top:var(--s32)}
.duo__item .body{max-width:34rem}

/* ---------- Abschnittskopf ---------- */
.bhead{max-width:52rem}
.bhead > .lead{margin-top:var(--s20); max-width:40rem}
.bhead > .body{margin-top:var(--s16)}
/* Breite Schirme: Ueberschrift links, Erlaeuterung rechts */
@media (min-width:1000px){
  .bhead:has(> h2.h2){max-width:none; display:grid; column-gap:var(--s64);
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    grid-template-rows:auto auto auto auto 1fr}
  .bhead:has(> h2.h2) > h2.h2{grid-column:1; grid-row:1 / span 5}
  .bhead:has(> h2.h2) > :not(h2){grid-column:2; max-width:36rem}
  .bhead:has(> h2.h2) > :nth-child(2){margin-top:.4rem}
}
/* Instagram-Zeile: Button links, Satz rechts */
.bhead--insta{max-width:none; display:grid; gap:var(--s20); align-items:center}
@media (min-width:1000px){ .bhead--insta{grid-template-columns:minmax(0,6fr) minmax(0,5fr); column-gap:var(--s64)}
  .bhead--insta > .lead{margin-top:0} }
/* Unterabschnitt innerhalb einer Flaeche */
.bhead--sep{max-width:none; border-top:1px solid var(--line); padding-top:var(--s40)}
.bhead--sep > .lead{max-width:40rem}

/* ---------- Zweispalter ---------- */
.split{align-items:start}
.split__head{grid-column:1/-1}
.split__body{grid-column:1/-1; margin-top:var(--s24)}
.split__body > .lead,.split__head > .lead{max-width:36rem}
@media (min-width:900px){
  .split{align-items:center}
  .split__head{grid-column:1/6}
  .split__body{grid-column:7/13; margin-top:0}
  .split--portrait .split__head{grid-column:1/7}
  .split--portrait .split__body{grid-column:8/13}
  .split--fill{align-items:stretch}
  .split--fill .split__head{display:flex; flex-direction:column}
  .split--fill .split__head .fillfoot{margin-top:auto; padding-top:var(--s32)}
  /* Bilder etwas groesser: eine Spalte mehr, mit Abstand zum Text */
  .split--media .split__body{grid-column:6/13; padding-left:var(--s32)}
}

/* ---------- Leistungen als Kacheln ---------- */
.panel{border:0}
.svc{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s12)}
@media (min-width:760px){ .svc{grid-template-columns:repeat(2,minmax(0,1fr))} }
.svc__item{min-width:0}
.svc__link{
  display:grid; grid-template-columns:minmax(0,1fr) 44px;
  grid-template-areas:"title arw" "desc desc"; grid-template-rows:auto 1fr;
  gap:var(--s12) var(--s20); align-items:start; height:100%;
  padding:clamp(24px,2.4vw,32px); border-radius:var(--r-card);
  background:var(--mist); text-decoration:none; color:inherit;
  transition:background .2s var(--ease);
}
.svc__link:hover{background:var(--tint)}
.svc__title{grid-area:title; font-family:var(--display); font-weight:400; color:var(--ink);
  font-size:clamp(1.3125rem,1.2rem + .5vw,1.5rem); line-height:1.2; padding-top:6px}
.svc__desc{grid-area:desc; align-self:end; color:var(--ink); font-size:1.0625rem; line-height:1.6; max-width:34rem;
  margin-top:var(--s24)}
@media (min-width:760px){ .svc__desc{margin-top:var(--s32)} }
.svc__arw{grid-area:arw; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:var(--paper); color:var(--ink);
  font-size:1.125rem; line-height:1; transition:transform .25s var(--ease), background .2s var(--ease), color .2s}
.svc__link:hover .svc__arw{background:var(--accent); color:var(--paper); transform:rotate(-45deg)}

/* ---------- Merkmale: einfache Liste ---------- */
.ticks li{position:relative; padding:15px 0 15px 22px; border-bottom:1px solid var(--line);
  color:var(--ink); font-size:1.0625rem; line-height:1.5; max-width:40rem}
.ticks li::before{content:""; position:absolute; left:2px; top:calc(15px + .62em);
  width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* Merkmale in Kartenoptik: jede Aussage bekommt eine eigene Kachel */
.listcard .ticks,.listcard .ticks--2col{display:grid; columns:auto; gap:var(--s12);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.listcard .ticks li{display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  padding:20px 22px 22px; background:var(--mist); border:0; border-radius:var(--r-tile);
  max-width:none; break-inside:auto; font-size:1.0625rem; line-height:1.45}
.listcard .ticks li::before{position:static; flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--accent-soft) var(--check) center/16px no-repeat}
/* Spaltenzahl nach Anzahl der Kacheln, damit keine Reihe mit einer einzelnen Kachel endet */
@media (min-width:640px){
  .listcard .ticks,.listcard .ticks--2col{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .listcard .ticks,.listcard .ticks--2col{grid-template-columns:repeat(4,minmax(0,1fr))}
  .listcard .ticks:has(> li:nth-child(3):last-child),
  .listcard .ticks:has(> li:nth-child(6):last-child),
  .listcard .ticks:has(> li:nth-child(9):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .listcard .ticks:has(> li:nth-child(5):last-child),
  .listcard .ticks:has(> li:nth-child(10):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .listcard .ticks:has(> li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1200px){
  .listcard .ticks:has(> li:nth-child(5):last-child),
  .listcard .ticks:has(> li:nth-child(10):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
}
.listcard .ticks li,.deflist dt,.deflist dd,.facts dt,.facts dd{overflow-wrap:break-word}
/* schmale Schirme und Zweispalter: kompakt, Haken links, Text rechts */
@media (max-width:639px){
  .listcard .ticks li{flex-direction:row; align-items:center; gap:14px; padding:14px 16px}
  .listcard .ticks li::before{width:28px; height:28px; background-size:14px}
}
.split .listcard .ticks{grid-template-columns:1fr}
.split .listcard .ticks li{flex-direction:row; align-items:center; gap:14px; padding:14px 18px}
.split .listcard .ticks li::before{width:28px; height:28px; background-size:14px}

/* ---------- Kacheln ---------- */
.cards{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s16)}
@media (min-width:820px){ .cards--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:700px){ .cards--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:640px){ .cards--2up{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:640px){ .cards--3up{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .cards--3up{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{
  background:var(--mist); border-radius:var(--r-card); padding:clamp(28px,3vw,44px);
  display:flex; flex-direction:column; align-items:flex-start;
  transition:background .25s var(--ease);
}
.card--link:hover{background:var(--tint)}
.card__icon{display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink); margin-bottom:var(--s48)}
.card__icon svg{width:24px; height:24px}
.card h3{font-size:clamp(1.5rem,1.3rem + .8vw,1.75rem); line-height:1.15}
.card p{margin-top:var(--s16); margin-bottom:var(--s32); font-size:1.0625rem; line-height:1.6;
  color:var(--ink); max-width:32rem}
.card .link{margin-top:auto}
.card__top{display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:var(--s24)}
.card__n{font-size:.875rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.card__head{display:flex; align-items:center; gap:var(--s12); flex-wrap:wrap}
.card__list{margin-top:var(--s24); border-top:1px solid var(--line); padding-top:var(--s20)}
.tag{font-size:.875rem; font-weight:500; color:var(--ink); background:var(--mist);
  border-radius:var(--pill); padding:6px 12px; white-space:nowrap}

/* ---------- Ablauf als Schrittkacheln ---------- */
.numlist{counter-reset:nl; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:var(--s12)}
.numlist li{
  position:relative; display:flex; flex-direction:column; gap:var(--s32);
  background:var(--mist); border-radius:var(--r-card); padding:24px 24px 28px;
  color:var(--ink); font-size:1.0625rem; line-height:1.55;
}
.numlist li::before{
  content:counter(nl,decimal-leading-zero); counter-increment:nl;
  font-family:var(--display); font-weight:300; font-size:2.75rem; line-height:1;
  letter-spacing:-.02em; color:var(--accent-ink); font-variant-numeric:tabular-nums;
}

/* ---------- Referenzen ---------- */
.reffeat,.reflist{border-top:1px solid var(--line)}
.reffeat li,.reflist li{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; gap:4px 12px; border-bottom:1px solid var(--line)}
.reffeat .sep,.reflist .sep{display:none}
.reffeat .n,.reflist .n{color:var(--ink)}
.reffeat .l,.reflist .l{color:var(--ink); display:inline}
.reffeat .l::before,.reflist .l::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); vertical-align:.24em; margin-right:12px}
.reffeat li{padding:22px 0}
.reffeat .n{font-family:var(--display); font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem); line-height:1.2}
.reffeat .l{font-family:var(--display); font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem); line-height:1.2}
.reflist{column-count:1; column-gap:var(--s48)}
@media (min-width:680px){ .reflist{column-count:2} }
.reflist li{break-inside:avoid; padding:14px 0; font-size:1rem; line-height:1.4}
.reflist .n{font-weight:500}

/* ---------- Stichwortliste als Kachelraster ---------- */
.deflist{display:grid; grid-template-columns:1fr; gap:var(--s12)}
@media (min-width:640px){ .deflist{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){
  .deflist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deflist > div.is-wide{grid-column:span 2}
}
.deflist > div{display:flex; flex-direction:column; background:var(--mist); border-radius:var(--r-card);
  padding:22px 24px 26px}

.deflist dt{font-family:var(--display); font-size:1.3125rem; line-height:1.25; font-weight:400; color:var(--ink)}
.deflist dd{margin:10px 0 0; font-size:1.0625rem; line-height:1.55; color:var(--ink)}
.deflist > div.is-wide dd{max-width:40rem}

/* ---------- Herstellerlogos ---------- */
.partners{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s40) var(--s32);
  background:var(--paper); border-radius:var(--r-card); padding:clamp(32px,4vw,48px)}
.band-white .partners{background:var(--mist)}
@media (min-width:760px){ .partners{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .partners--5{grid-template-columns:repeat(5,1fr)} }
.partners--5 > div:last-child{grid-column:span 2}
@media (min-width:760px){ .partners--5 > div:last-child{grid-column:auto} }
.partners div{display:flex; align-items:center; justify-content:center; min-height:56px}
.partners img{width:auto; object-fit:contain}
.partners img[data-h="a"]{max-height:50px}
.partners img[data-h="b"]{max-height:32px}
.partners img[data-h="c"]{max-height:27px}
.partners img[data-h="d"]{max-height:30px}
.partners img[data-h="e"]{max-height:30px}
.partners img[data-h="f"]{max-height:34px}

/* ---------- Kacheln auf farbigen Flaechen ---------- */
:is(.band-surface,.band-tint) :is(.card,.svc__link,.duo__item,.numlist li,.deflist > div,.listcard .ticks li,.mgroup__item,.facts > div){background:var(--paper)}
:is(.band-surface,.band-tint) :is(.svc__arw,.card__icon){background:var(--mist)}
.band-tint .card__icon{background:var(--accent-soft)}
:is(.band-surface,.band-tint) :is(.reffeat,.reflist,.reffeat li,.reflist li,.bhead--sep){border-color:var(--line-strong)}
:is(.band-surface,.band-tint) .link:hover{background:var(--paper)}

/* ---------- Dunkle Petrol-Flaeche ---------- */
.band-deep h2,.band-deep h3,.band-deep h4,.band-deep dt{color:var(--paper)}
.band-deep :is(.lead,.body,dd,li,.numlist li){color:var(--on-night)}
.band-deep .figcap{color:var(--on-night-2)}
.band-deep .fig{background:var(--glass)}
.band-deep :is(.card,.duo__item,.numlist li,.deflist > div,.listcard .ticks li,.mgroup__item){background:var(--glass); color:var(--paper)}
.band-deep .listcard .ticks li::before{background:rgba(255,255,255,.1) var(--check-light) center/16px no-repeat}
.band-deep .numlist li::before{color:var(--accent-light)}
.band-deep :is(.reffeat,.reflist,.reffeat li,.reflist li,.bhead--sep){border-color:var(--line-night)}
.band-deep :is(.reffeat .n,.reflist .n){color:var(--paper)}
.band-deep :is(.reffeat .l,.reflist .l){color:var(--paper)}
.band-deep :is(.reffeat,.reflist) .l::before{background:var(--accent-light)}
.band-deep .link{color:var(--paper); border-color:var(--line-night)}
.band-deep .link:hover{background:rgba(255,255,255,.08); border-color:var(--accent-light); color:var(--paper)}

/* ---------- Kontakt ---------- */
.contact-grid{align-items:start}
.contact-grid > .c-info{grid-column:1/-1}
.contact-grid > .c-form{grid-column:1/-1; margin-top:var(--s16)}
@media (min-width:900px){
  .contact-grid > .c-info{grid-column:1/5}
  .contact-grid > .c-form{grid-column:5/13; margin-top:0}
}
.c-card{background:var(--paper); border-radius:var(--r-card); padding:clamp(24px,3vw,40px)}
@media (min-width:900px){ .c-form.c-card{padding:48px} }
.c-adr{font-size:1.0625rem; line-height:1.7; font-style:normal; color:var(--ink)}
.c-lines{border-top:1px solid var(--line); padding-top:var(--s16)}
.c-lines li{display:flex; align-items:center; gap:12px; padding:8px 0; font-size:1.0625rem}
.c-lines svg{width:18px; height:18px; color:var(--accent); flex:0 0 auto}
.c-hint{border-top:1px solid var(--line); padding-top:var(--s16);
  font-size:1rem; line-height:1.6; color:var(--ink-2)}

/* ---------- Formular ---------- */
.form{display:grid; grid-template-columns:1fr; gap:var(--s20)}
@media (min-width:640px){ .form{grid-template-columns:1fr 1fr} .form .full{grid-column:1/-1} }
.field-l{display:block; font-size:.875rem; font-weight:500; color:var(--ink); margin-bottom:8px}
.input,.textarea,.select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--mist); border:1px solid transparent; border-radius:var(--r-field);
  padding:14px 16px; transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s;
}
.input:hover,.textarea:hover,.select:hover{border-color:var(--line-strong)}
.input:focus,.textarea:focus,.select:focus{
  outline:none; background:var(--paper); border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(44,124,136,.18);
}
.textarea{min-height:160px; resize:vertical}
.check{display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--ink)}
.check input{margin-top:4px; accent-color:var(--accent); width:18px; height:18px}

/* ---------- Kontaktabschluss: dunkles Panel ---------- */
.close{position:relative; isolation:isolate; overflow:hidden;
  background:var(--night); color:var(--paper);
  margin:var(--frame) var(--frame) 0; border-radius:var(--r-panel);
  padding-block:clamp(56px,7vw,112px)}

.close--compact{padding-block:clamp(48px,5.5vw,88px)}
.close__in{display:grid; grid-template-columns:1fr; gap:var(--s32)}
@media (min-width:900px){
  .close__in{grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:var(--s64)}
}
.close__t{max-width:44rem}
.close h2{color:var(--paper)}
.close .lead{color:var(--on-night)}
.close__a{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s12)}
.close .btn{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.close .btn:hover{background:var(--accent-light); border-color:var(--accent-light)}
.close .link{color:var(--paper); border-color:var(--line-night)}
.close .link:hover{background:rgba(255,255,255,.08); border-color:var(--accent-light)}

/* ---------- Footer ---------- */
.footer{background:var(--paper); color:var(--ink); padding-block:clamp(56px,6vw,88px) var(--s32)}
.footer__in{border:0}
.footer a{color:var(--ink); text-decoration:none; transition:color .16s var(--ease)}
.footer a:hover{color:var(--accent-ink)}
.footer__logo{display:block; margin-bottom:var(--s20)}
.footer__logo img{height:48px; width:auto}
.footer__grid{gap:var(--s40) var(--col-gap)}
.f-brand{grid-column:1/-1}
.f-brand .small{max-width:34ch; color:var(--ink-2)}
.f-col{grid-column:1/-1}
@media (min-width:480px){ .f-col{grid-column:span 6} }
@media (min-width:760px){ .f-col{grid-column:span 4} }
@media (min-width:1000px){
  .footer__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .f-brand{grid-column:span 4}
  .f-col:nth-child(2){grid-column:6/9}
  .f-col:nth-child(3){grid-column:9/11}
  .f-col:nth-child(4){grid-column:11/13}
}
.footer h4{font-family:var(--text); font-size:.875rem; font-weight:500; color:var(--ink-2);
  letter-spacing:0; text-transform:none; margin-bottom:var(--s16)}
.footer li{font-size:1rem; line-height:1.5}
.footer li + li{margin-top:10px}
.footer__bar{
  margin-top:clamp(48px,5vw,72px); padding-top:var(--s20); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px var(--s32); justify-content:space-between;
  font-size:.875rem; color:var(--ink-2)}
.footer__bar ul{display:flex; gap:var(--s24)}
.footer__bar li,.footer__bar li + li{margin:0; font-size:.875rem}
.footer__bar a{color:var(--ink-2)}
.footer__bar a:hover{color:var(--ink)}

/* ---------- Rechtstexte ---------- */
.legal{max-width:68ch}
.legal p{margin-top:var(--s16); color:var(--ink); font-size:1.0625rem; line-height:1.7}
.legal h2{margin-top:var(--s48)}
.legal h2:first-child{margin-top:0}
.legal h3{color:var(--ink); margin-top:var(--s32); font-size:1.25rem; line-height:1.35}
.legal a{color:var(--ink); text-decoration-color:var(--line-strong); text-underline-offset:3px}
.legal-adr{color:var(--ink)!important; line-height:1.8}

/* ---------- Hilfsklassen ---------- */
.skip{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.skip:focus{position:fixed; width:auto; height:auto; clip:auto; clip-path:none;
  left:16px; top:12px; background:var(--paper); color:var(--ink);
  padding:12px 18px; z-index:100; border:1px solid var(--line); border-radius:var(--pill)}
.nowrap{white-space:nowrap}
.center{text-align:center}

/* ---------- Einblenden: ruhiger, gestaffelter Auftritt ---------- */
.rv{opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv :is(.figitem,.duo__item,.svc__item,.card,.numlist li,.listcard .ticks li,.deflist > div,.facts > div){
  opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in :is(.figitem,.duo__item,.svc__item,.card,.numlist li,.listcard .ticks li,.deflist > div,.facts > div){opacity:1; transform:none}
.rv.in :is(.figitem,.duo__item,.svc__item,.card,.numlist li,.listcard .ticks li,.deflist > div,.facts > div):nth-child(2){transition-delay:.06s}
.rv.in :is(.figitem,.duo__item,.svc__item,.card,.numlist li,.listcard .ticks li,.deflist > div,.facts > div):nth-child(3){transition-delay:.12s}
.rv.in :is(.svc__item,.numlist li,.listcard .ticks li,.deflist > div):nth-child(4){transition-delay:.18s}
.rv.in :is(.svc__item,.listcard .ticks li,.deflist > div):nth-child(5){transition-delay:.24s}
.rv.in :is(.listcard .ticks li,.deflist > div):nth-child(n+6){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv *{opacity:1!important; transform:none!important}
  *{transition:none!important; animation:none!important}
}

/* Kontaktformular: Hinweis und Rueckmeldung */
.form-note{font-size:.9375rem; line-height:1.55; color:var(--ink); margin-top:calc(var(--s8) * -1)}
.form-status{padding:16px 20px; border-radius:var(--r-field); background:var(--tint); color:var(--ink); font-size:1rem; line-height:1.55}
.form-status.is-error{background:var(--mist)}
.form .btn[disabled]{opacity:.6; cursor:progress}

/* Instagram-Zeichen im Button und im Footer */
.ico-insta{width:20px; height:20px; flex:0 0 auto; display:block}
.f-insta{display:inline-flex; align-items:center; gap:8px}
.f-insta .ico-insta{width:16px; height:16px}