/* =====================================================================
   OLYMP Sanierung — Design-System (eine CSS-Datei, Vanilla)
   Marke: OLYMP-Haus-Standard — identisch zu olymp-group.de / olymp-haus.de.
   Warmes Off-White + Anthrazit (monochromer Akzent) + Sand-Beige,
   Hanken Grotesk (Display) + Inter (Text), Pill-Buttons.
   Alle Marken-/Akzentwerte als CSS-Variablen — an EINER Stelle änderbar.
   ===================================================================== */

/* --- Selbst gehostete Fonts (DSGVO, keine Google-Fonts-Requests) ------- */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/hankengrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/hankengrotesk-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: 'Inter';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design-Tokens ---------------------------------------------------- */
:root {
  /* Palette = OLYMP-Haus-Standard (vgl. olymp-group.de / olymp-haus.de).
     Off-White #F6F3EE · Anthrazit #2B2B2B · Sand-Beige #D6C6AE.
     Kein Rot mehr — der Akzent ist monochrom. */
  --bg:        #F6F3EE;   /* Seitenhintergrund, ruhiges Sand-Weiß */
  --bg-2:      #ECE6DB;   /* Sand/Beige-Panel */
  --anthrazit: #2B2B2B;   /* dunkle Sektionen/Bänder */
  --ink:       #232323;   /* Headlines, Text */
  --warmweiss: #FFFFFF;   /* Karten/Flächen in Weiß */
  --sand:      #ECE6DB;   /* helle abgesetzte Blöcke */
  --sand-tief: #E0D8C9;
  --akzent:    #2B2B2B;   /* funktionaler Akzent = Anthrazit (Buttons/Links) */
  --akzent-d:  #423F3A;   /* Hover (etwas heller) */
  --akzent-l:  #D6C6AE;   /* Sand auf dunklem Grund (Eyebrows, Hero-Akzent) */
  --gold:      #D6C6AE;   /* CD-Sand/Beige (dekorativ, Schritt-Karten) */
  --gold-d:    #C9B69A;
  --petrol:    #2B2B2B;   /* Alias (dunkles Band) */
  --petrol-d:  #343330;
  --dark:      #2B2B2B;   /* Hero/Footer/dunkle Sektionen */
  --dark-2:    #343330;
  --dark-line: #444038;
  --gruen:     #4B7A57;
  --weiss:     #FFFFFF;

  /* Text auf Flächen */
  --text:      #3C3C3A;
  --text-mut:  #6A665F;
  --text-invert: #FFFFFF;
  --muted-d:   #B6AEA0;   /* Sekundärtext auf Dunkel */
  --linie:     #E4DDD1;   /* warme Haarlinie */
  --linie-2:   #D6CCBB;
  --linie-d:   rgba(255,255,255,.18);

  /* Typo — Haus-Standard: Hanken Grotesk + Inter */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid Type-Scale */
  --fs-hero: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --fs-h1:   clamp(2.3rem, 1.6rem + 3.3vw, 4rem);
  --fs-h2:   clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem);
  --fs-h3:   clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  --fs-lead: clamp(1.08rem, 1rem + .5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .9375rem;
  --fs-xs:   .8125rem;

  /* Raster & Rhythmus */
  --maxw: 1180px;
  --maxw-text: 68ch;
  --gutter: clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
  --sect: clamp(2.75rem, 1.8rem + 3.4vw, 5.25rem);
  --radius: 16px;
  --radius-lg: 24px;
  --r-btn: 999px;          /* Pill-Buttons (Haus-Standard) */
  --r-input: 14px;
  --header-h: 78px;
  --shadow: 0 4px 16px rgba(33,31,28,.06), 0 16px 44px rgba(33,31,28,.10);
  --shadow-lg: 0 24px 60px rgba(33,31,28,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset / Basis ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.14; }
h2 { font-size: var(--fs-h2); line-height: 1.16; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: 0; }
p { margin: 0 0 1rem; line-height: 1.65; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-d); }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; color: var(--ink); }
ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin: .3rem 0; }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Layout-Helfer ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: var(--sect); }
.section--sand { background: var(--sand); }
.section--warm { background: var(--warmweiss); }
.section--dark { background: var(--anthrazit); color: var(--text-invert); }
.section--petrol { background: var(--petrol); color: var(--text-invert); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--petrol h1, .section--petrol h2, .section--petrol h3 { color: #fff; }
.section--tight { padding-block: clamp(2.5rem, 1.6rem + 3vw, 4rem); }

.prose { max-width: var(--maxw-text); }
.prose p { color: var(--text); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Eyebrow / Kicker — strukturelles Signal, kupfern */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--akzent); display: inline-block;
}
/* Auf dunklem Grund muss die Eyebrow sandfarben sein — sonst Anthrazit auf Anthrazit */
.section--dark .eyebrow, .section--petrol .eyebrow,
.pagehero .eyebrow, .svc-hero .eyebrow { color: var(--akzent-l); }
.section--dark .eyebrow::before, .section--petrol .eyebrow::before,
.pagehero .eyebrow::before, .svc-hero .eyebrow::before { background: var(--akzent-l); }
/* …aber nicht in der weißen Karte innerhalb des dunklen Leistungs-Heros */
.svc-hero__card .eyebrow { color: var(--akzent); }
.svc-hero__card .eyebrow::before { background: var(--akzent); }
.eyebrow--center { justify-content: center; }

.section-head { max-width: 62ch; margin-bottom: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--text-mut); font-size: var(--fs-lead); }
.section--dark .section-head p, .section--petrol .section-head p { color: rgba(237,231,221,.82); }

/* --- Buttons ---------------------------------------------------------- */
.btn {
  --bg-btn: var(--ink); --fg: #fff; --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: .96rem; line-height: 1;
  letter-spacing: .01em;
  padding: 1rem 1.7rem; min-height: 52px;
  background: var(--bg-btn); color: var(--fg);
  border: 1.5px solid var(--bd); border-radius: var(--r-btn);
  cursor: pointer; text-align: center;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn .ico { width: 18px; height: 18px; }
/* Auf dunklem Grund (Hero, dunkle Bänder) */
.btn--on-ink { --bg-btn: rgba(255,255,255,.08); --fg: #fff; --bd: rgba(255,255,255,.34); }
.btn--on-ink:hover { --bd: #fff; background: rgba(255,255,255,.16); }
.btn--light { --bg-btn: var(--bg); --fg: var(--ink); --bd: var(--bg); }
.btn--light:hover { --bg-btn: #fff; --bd: #fff; }
.btn--sm { padding: .7rem 1.25rem; min-height: 44px; font-size: .9rem; }
/* Primär = Anthrazit (Haus-Standard, monochrom) */
.btn--primary { --bg-btn: var(--akzent); --bd: var(--akzent); --fg: #fff; }
.btn--primary:hover { --bg-btn: var(--akzent-d); --bd: var(--akzent-d); }
.btn--ghost { --bg-btn: transparent; --fg: var(--ink); --bd: rgba(35,35,35,.28); }
.btn--ghost:hover { --bd: var(--ink); background: rgba(0,0,0,.02); }
.btn--gold { --bg-btn: var(--gold); --fg: var(--ink); --bd: var(--gold); }
.btn--gold:hover { --bg-btn: var(--gold-d); --bd: var(--gold-d); }
.btn--onDark { --bg-btn: rgba(255,255,255,.08); --fg: #fff; --bd: rgba(255,255,255,.34); }
.btn--onDark:hover { --bd: #fff; background: rgba(255,255,255,.16); }
.section--dark .btn--ghost { --fg: #fff; --bd: rgba(255,255,255,.34); }
.section--dark .btn--ghost:hover { --bd: #fff; background: rgba(255,255,255,.16); }
.btn--lg { padding: 1.15rem 2rem; min-height: 58px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn .ico { width: 1.15em; height: 1.15em; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 500; letter-spacing: .01em;
}
.arrow-link .ico { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.arrow-link:hover .ico { transform: translateX(4px); }

.ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* --- Skip-Link -------------------------------------------------------- */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius);
  transition: top .2s;
}
.skip:focus { top: 12px; color:#fff; }

/* --- Header / Navigation ---------------------------------------------- */
/* Transparent über dem Hero, solid beim Scrollen (Haus-Standard) */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(246,243,238,.92);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom-color: var(--linie);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.4rem;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); margin-right: auto; }
.brand__mark { height: 38px; width: auto; display: block; }
.brand__mark--dark { display: none; }
.site-header.is-scrolled .brand__mark--light { display: none; }
.site-header.is-scrolled .brand__mark--dark { display: block; }
.site-footer .brand__mark { height: 46px; }
/* Wortmarke wie Group/Haus: OLYMP fett + Marke leicht */
.brand__word {
  font-family: var(--font-display); font-weight: 400; font-size: 1.24rem;
  letter-spacing: .04em; color: #fff; text-transform: uppercase; white-space: nowrap;
}
.brand__word b { font-weight: 800; }
.site-header.is-scrolled .brand__word { color: var(--ink); }
/* Footer-Lockup (unverändert) */
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.brand__sub { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-mut); margin-top: 3px; }
/* Footer ist dunkel — Sekundärton muss dort heller sein */
.site-footer .brand__sub { color: var(--muted-d); }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  color: rgba(255,255,255,.92); font-family: var(--font-body); font-weight: 500;
  font-size: .94rem; padding: .55rem .85rem; border-radius: var(--r-btn); position: relative;
}
.nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav a[aria-current="page"] { color: #fff; font-weight: 600; }
.site-header.is-scrolled .nav a { color: var(--ink); }
.site-header.is-scrolled .nav a:hover { background: var(--bg-2); }
.site-header.is-scrolled .nav a[aria-current="page"] { color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: .7rem; }
/* Header-CTA: creme über dem Hero, anthrazit beim Scrollen */
.btn--cta { --bg-btn: var(--bg); --fg: var(--ink); --bd: var(--bg); }
.btn--cta:hover { --bg-btn: #fff; --bd: #fff; }
.site-header.is-scrolled .btn--cta { --bg-btn: var(--ink); --fg: #fff; --bd: var(--ink); }
.site-header.is-scrolled .btn--cta:hover { --bg-btn: var(--akzent-d); --bd: var(--akzent-d); }
/* `.nav a` (0,1,1) bzw. `.site-header.is-scrolled .nav a` (0,3,1) dürfen die
   Button-Farbe nicht überschreiben — daher bewusst höhere Spezifität. */
.nav a.btn,
.site-header.is-scrolled .nav a.btn { color: var(--fg); }
.nav a.btn:hover,
.site-header.is-scrolled .nav a.btn:hover { color: var(--fg); background: var(--bg-btn); }
.nav a.btn--cta::after { display: none; }

/* Off-canvas Toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px;
  align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.34);
  border-radius: var(--r-btn); cursor: pointer;
}
.site-header.is-scrolled .nav-toggle { border-color: var(--linie-2); }
.nav-toggle span { width: 22px; height: 2px; background: #fff; transition: transform .25s var(--ease), opacity .2s; }
.site-header.is-scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto; width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dark); padding: 1.2rem;
    transform: translateX(105%); transition: transform .3s var(--ease);
    overflow-y: auto; box-shadow: var(--shadow-lg);
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav a, .site-header.is-scrolled .nav a {
    color: var(--text-invert); font-size: 1.1rem; padding: .95rem .4rem;
    border-radius: 0; border-bottom: 1px solid var(--linie-d);
  }
  .nav a:hover, .nav a[aria-current="page"],
  .site-header.is-scrolled .nav a:hover { color: #fff; background: transparent; }
  .nav a[aria-current="page"]::after { display: none; }
  .header-cta { margin: 1rem .4rem 0; }
  .nav-backdrop {
    position: fixed; inset: var(--header-h) 0 0 0; background: rgba(20,26,31,.5);
    opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 90;
  }
  .nav-backdrop[data-open="true"] { opacity: 1; visibility: visible; }
}

/* --- Hero ------------------------------------------------------------- */
.hero { position: relative; background: var(--anthrazit); color: var(--text-invert); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(20,26,31,.92) 0%, rgba(20,26,31,.7) 46%, rgba(31,39,46,.4) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 2rem + 8vw, 8rem); }
.hero__grid { display: grid; gap: 2.5rem; }
.hero h1 { color: #fff; font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.02em; max-width: 16ch; }
.hero h1 .amber { color: var(--akzent-l); }
.hero__lead { font-size: var(--fs-lead); color: rgba(237,231,221,.9); max-width: 46ch; margin-top: 1.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero__note { margin-top: 1.4rem; font-size: var(--fs-sm); color: rgba(237,231,221,.7); display:flex; align-items:center; gap:.5rem; }
.hero__note .ico { color: var(--gruen); width: 1.15em; height: 1.15em; }

/* --- Trust-Bar (Kennzahlen) ------------------------------------------- */
.trustbar { background: var(--ink); color: var(--text-invert); position: relative; z-index: 3; }
.trustbar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linie-d);
}
.trust-item { padding: 1.7rem 1.3rem; border-right: 1px solid var(--linie-d); text-align: left; }
.trust-item:last-child { border-right: 0; }
.trust-item__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem,1rem + 1.2vw,2rem); color: #fff; line-height: 1.05; letter-spacing: -.01em; }
.trust-item__num .u { color: var(--akzent-l); }
.trust-item__lbl { font-size: var(--fs-xs); letter-spacing: .06em; color: rgba(233,234,236,.62); margin-top: .55rem; text-transform: uppercase; }
@media (max-width: 720px) { .trustbar__grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2){border-right:0} .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid var(--linie-d)} }
@media (max-width: 420px){ .trustbar__grid{grid-template-columns:1fr} .trust-item{border-right:0;border-bottom:1px solid var(--linie-d)} .trust-item:last-child{border-bottom:0} }

/* --- Service-Grid ----------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
/* 10-Kachel-Grid (Start/Leistungen): exakt 5 Spalten auf Desktop = 2 saubere Reihen */
.svc-grid--five { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (min-width: 1040px){ .svc-grid--five { grid-template-columns: repeat(5, 1fr); } }
.svc-card {
  background: var(--warmweiss); padding: 1.7rem 1.5rem 1.5rem; display: flex; flex-direction: column;
  min-height: 210px; position: relative; transition: background .2s var(--ease); color: var(--text);
}
.svc-card:hover { background: var(--sand); }
.svc-card__ico { width: 34px; height: 34px; color: var(--akzent); margin-bottom: 1rem; }
.svc-card h3 { margin-bottom: .35rem; font-size: 1.22rem; }
.svc-card p { font-size: var(--fs-sm); color: var(--text-mut); margin-bottom: 1rem; }
.svc-card__go { margin-top: auto; color: var(--akzent); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: .4rem; }
.svc-card::after { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--akzent); transform:scaleX(0); transform-origin:left; transition: transform .25s var(--ease); }
.svc-card:hover::after { transform: scaleX(1); }

/* --- Signatur: Brücken-Positionierung (Strata) ------------------------ */
.bridge { background: var(--anthrazit); color: var(--text-invert); position: relative; overflow: hidden; }
.bridge__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,1rem + 4vw,4.5rem); align-items: center; }
.strata { display: flex; flex-direction: column; border: 1px solid var(--linie-d); border-radius: var(--radius-lg); overflow: hidden; }
.strata__row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--linie-d); position: relative; }
.strata__row:last-child { border-bottom: 0; }
.strata__row .depth { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .05em; color: rgba(237,231,221,.55); width: 4.5ch; }
.strata__row .lbl { font-family: var(--font-display); font-weight: 500; color: #fff; font-size: 1.02rem; }
.strata__row .lbl small { display:block; font-family:var(--font-body); font-weight:400; font-size:var(--fs-xs); color:rgba(237,231,221,.6); letter-spacing:0; margin-top:2px; }
.strata__row--keller { background: linear-gradient(90deg, rgba(44,74,78,.55), transparent); }
.strata__row--fertig { background: linear-gradient(90deg, rgba(62,122,94,.4), transparent); }
.strata__row--fertig .depth { color: var(--gruen); }
.bridge__claim { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem,1.1rem + 2vw,2.5rem); color:#fff; line-height:1.12; letter-spacing:-.01em; }
.bridge__claim .amber { color: var(--akzent-l); }
@media (max-width: 820px){ .bridge__grid{ grid-template-columns:1fr; } }

/* --- Prozess / Ablauf ------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { position: relative; background: var(--gold); color: var(--ink); border-radius: var(--radius-lg); padding: 2.1rem 1.6rem 1.9rem; text-align: center; }
.step__n { margin: 0 auto .9rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--akzent); background: #fff; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.step h3 { margin-bottom: .4rem; color: var(--ink); }
.step p { color: #524d3d; font-size: var(--fs-sm); }
.section--dark .step, .section--petrol .step { color: var(--ink); }
.section--dark .step p, .section--petrol .step p { color: #524d3d; }
@media (max-width: 720px){ .steps{ grid-template-columns:1fr; gap:1.2rem; } }

/* --- Feature-/Grundsätze-Grid ----------------------------------------- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1.5rem; }
.feat { padding: 1.6rem; background: var(--warmweiss); border: 1px solid var(--linie); border-radius: var(--radius-lg); }
.section--sand .feat { background:#fff; }
.feat__ico { width: 30px; height: 30px; color: var(--akzent); margin-bottom: .9rem; }
.feat h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.feat p { font-size: var(--fs-sm); color: var(--text-mut); }

/* Baustein-Liste (Verfahren) */
.bausteine { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius-lg); overflow: hidden; }
.baustein { background: var(--warmweiss); padding: 1.4rem 1.4rem; }
.section--sand .baustein { background:#fff; }
.baustein__k { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:500; color:var(--ink); margin-bottom:.4rem; }
.baustein__k .ico { width:1.2em; height:1.2em; color:var(--akzent); }
.baustein p { font-size: var(--fs-sm); color: var(--text-mut); }

/* --- Kosten-Sektion --------------------------------------------------- */
.kosten { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,1rem + 3vw,3.5rem); align-items: start; }
.price-card { background: var(--ink); color: var(--text-invert); border-radius: var(--radius-lg); padding: 1.8rem; }
.price-card .from { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(237,231,221,.6); }
.price-card .val { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,1.4rem + 2.4vw,3rem); color: #fff; line-height: 1.05; margin: .3rem 0; }
.price-card .val .u { color: var(--akzent-l); font-size: .5em; }
.price-card__cta { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem,1.1rem + 1.1vw,1.8rem); color: #fff; line-height: 1.15; letter-spacing: -.01em; margin: .35rem 0 .2rem; }
.price-card .hint { font-size: var(--fs-sm); color: rgba(237,231,221,.75); }
.price-factors { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.price-factors li { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--linie); font-size: var(--fs-sm); color: var(--text); }
.price-factors li .ico { width: 1.15em; height: 1.15em; color: var(--akzent); flex: none; margin-top: .2em; }
@media (max-width: 720px){ .kosten{ grid-template-columns:1fr; } }

/* --- FAQ (Accordion, details/summary) --------------------------------- */
.faq { border-top: 1px solid var(--linie); }
.faq__item { border-bottom: 1px solid var(--linie); }
.faq__item > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.25rem 0; font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; color: var(--ink);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary .plus { flex: none; width: 1.5rem; height: 1.5rem; position: relative; }
.faq__item > summary .plus::before, .faq__item > summary .plus::after { content:""; position:absolute; background: var(--akzent); }
.faq__item > summary .plus::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.faq__item > summary .plus::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); transition: transform .2s var(--ease); }
.faq__item[open] > summary .plus::after { transform: translateX(-50%) scaleY(0); }
.faq__answer { padding: 0 0 1.4rem; max-width: var(--maxw-text); color: var(--text); }
.faq__answer p { color: var(--text); }

/* --- Referenz-/Projekt-Karten ----------------------------------------- */
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.5rem; }
.ref-card { background:#fff; border: 1px solid var(--linie); border-radius: var(--radius-lg); overflow: hidden; display:flex; flex-direction:column; }
.ref-card__media { aspect-ratio: 4/3; background: var(--sand); position: relative; overflow: hidden; }
.ref-card__media img { width:100%; height:100%; object-fit: cover; }
.ref-card__tag { position: absolute; top: .8rem; left: .8rem; background: var(--ink); color:#fff; font-size: var(--fs-xs); font-family:var(--font-display); font-weight:500; padding:.3rem .7rem; border-radius: 2px; letter-spacing:.03em; }
.ref-card__body { padding: 1.3rem; display:flex; flex-direction:column; gap:.5rem; }
.ref-card__body h3 { font-size: 1.15rem; margin: 0; }
.ref-card__meta { font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color: var(--text-mut); }
.ref-card__pl { display:grid; grid-template-columns:auto 1fr; gap:.3rem .7rem; font-size:var(--fs-sm); margin-top:.3rem; }
.ref-card__pl dt { color: var(--akzent); font-family:var(--font-display); font-weight:500; }
.ref-card__pl dd { margin:0; color: var(--text); }

/* Platzhalter-Fläche (Foto folgt) */
.ph {
  display:grid; place-items:center; width:100%; height:100%; min-height:160px;
  background:
    repeating-linear-gradient(45deg, var(--sand) 0 14px, var(--sand-tief) 14px 28px);
  color: var(--petrol); text-align:center;
}
.ph span { font-family:var(--font-display); font-weight:500; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; background:rgba(246,243,238,.85); padding:.4rem .7rem; border-radius:2px; }

/* --- Vorher/Nachher-Slider -------------------------------------------- */
.ba { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; user-select: none; background: var(--sand); }
.ba img, .ba .ba__layer { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor: ew-resize; }
.ba__handle { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform: translateX(-50%); pointer-events:none; }
.ba__handle::after { content:""; position:absolute; top:50%; left:50%; width:42px; height:42px; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; background:rgba(20,26,31,.35); }
.ba__lab { position:absolute; bottom:.8rem; font-size:var(--fs-xs); font-family:var(--font-display); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(20,26,31,.6); padding:.25rem .6rem; border-radius:2px; }
.ba__lab--before { left:.8rem; } .ba__lab--after { right:.8rem; }

/* --- Split (Text + Media) --------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem,1rem + 3.5vw,4rem); align-items: center; }
.split--rev .split__media { order: -1; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--sand); }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px){ .split{ grid-template-columns:1fr; } .split--rev .split__media{ order:0; } }

/* --- Related / Cross-Links -------------------------------------------- */
.related { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.related a { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:1.1rem 1.3rem; background:#fff; border:1px solid var(--linie); border-radius:var(--radius-lg); color:var(--ink); font-family:var(--font-display); font-weight:500; transition: border-color .2s, transform .2s; }
.related a:hover { border-color: var(--akzent); transform: translateY(-2px); color: var(--akzent); }
.section--sand .related a { background: var(--warmweiss); }

/* --- CTA-Band --------------------------------------------------------- */
.cta-band { background: var(--petrol); color: var(--text-invert); }
.cta-band__grid { display:grid; grid-template-columns: 1.2fr auto; gap: 2rem; align-items:center; }
.cta-band h2 { color:#fff; margin:0; }
.cta-band p { color: rgba(237,231,221,.85); margin:.6rem 0 0; }
@media (max-width: 720px){ .cta-band__grid{ grid-template-columns:1fr; } }

/* --- Einzugsgebiet ---------------------------------------------------- */
.geo { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,1rem + 3vw,3.5rem); align-items:center; }
.geo__list { columns: 2; column-gap: 1.5rem; margin:1rem 0 0; padding:0; list-style:none; }
.geo__list li { padding:.35rem 0; display:flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); color:var(--text); break-inside: avoid; }
.geo__list li .ico { width:1em; height:1em; color:var(--akzent); flex:none; }
.geo__map { border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/3; position: relative; }
.geo__map .btn { position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); }
@media (max-width: 820px){ .geo{ grid-template-columns:1fr; } }

/* --- Formular --------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px){ .form__row{ grid-template-columns:1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); color: var(--ink); }
.field label .req { color: var(--akzent); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: .85rem .95rem; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff;
  width: 100%; transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(181,101,43,.15); }
.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; accent-color: var(--akzent); flex:none; }
.field--check label { font-weight: 400; font-family: var(--font-body); color: var(--text); font-size: var(--fs-sm); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: .9rem 1.1rem; border-radius: var(--radius); font-size: var(--fs-sm); display: none; }
.form__status[data-state="error"] { display: block; background: #FBEAE5; color: #8A2C13; border: 1px solid #E8B4A5; }
.form__status[data-state="ok"] { display: block; background: #E7F1EC; color: #1F5A40; border: 1px solid #A9CDBB; }
.form-note { font-size: var(--fs-xs); color: var(--text-mut); }

/* Formular auf dunklem Panel */
.form-panel { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.4rem,1rem + 2vw,2.4rem); box-shadow: var(--shadow); }

/* --- Konfigurator ----------------------------------------------------- */
.konf { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.konf__bar { display:flex; background: var(--ink); }
.konf__bar li { list-style:none; flex:1; text-align:center; padding:.85rem .4rem; font-family:var(--font-display); font-weight:500; font-size:var(--fs-xs); letter-spacing:.04em; color:rgba(237,231,221,.5); position:relative; text-transform:uppercase; }
.konf__bar li[data-active="true"] { color:#fff; }
.konf__bar li[data-done="true"] { color: var(--akzent-l); }
.konf__bar li::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--akzent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.konf__bar li[data-active="true"]::after, .konf__bar li[data-done="true"]::after { transform:scaleX(1); }
.konf__body { padding: clamp(1.4rem,1rem + 2vw,2.4rem); }
.konf__step { display: none; }
.konf__step[data-active="true"] { display: block; animation: fade .3s var(--ease); }
@media (prefers-reduced-motion: reduce){ .konf__step[data-active="true"]{ animation:none; } }
.konf__q { font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); color:var(--ink); margin-bottom:.3rem; }
.konf__hint { color: var(--text-mut); font-size: var(--fs-sm); margin-bottom:1.3rem; }
.opt-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; }
.opt {
  display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; text-align:left;
  padding:1.1rem 1.15rem; border:1.5px solid var(--linie); border-radius:var(--radius-lg); background:#fff; cursor:pointer;
  font-family:inherit; transition: border-color .18s, background .18s, transform .1s;
}
.opt:hover { border-color: var(--akzent-l); }
.opt[aria-pressed="true"] { border-color: var(--akzent); background: rgba(181,101,43,.06); box-shadow: 0 0 0 1px var(--akzent) inset; }
.opt .opt__ico { width:26px; height:26px; color: var(--akzent); }
.opt .opt__t { font-family:var(--font-display); font-weight:500; color:var(--ink); }
.opt .opt__d { font-size: var(--fs-xs); color: var(--text-mut); }
.konf__nav { display:flex; justify-content:space-between; gap:1rem; margin-top:1.6rem; }
.konf__nav .btn--back { visibility: hidden; }
.konf__nav[data-step="0"] .btn--back { visibility: hidden; }

/* --- Footer ----------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--text-invert); padding-block: clamp(3rem,2rem + 3vw,4.5rem) 2rem; }
.footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer__brand .brand__name { color:#fff; }
.footer__brand p { color: rgba(237,231,221,.7); font-size: var(--fs-sm); margin-top: 1rem; max-width: 34ch; }
.footer col, .footer__col { }
.footer__col h4 { font-family:var(--font-display); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color: var(--akzent-l); margin-bottom: 1rem; }
.footer__col ul { list-style:none; padding:0; margin:0; }
.footer__col li { margin:.5rem 0; }
.footer__col a { color: rgba(237,231,221,.82); font-size: var(--fs-sm); }
.footer__col a:hover { color:#fff; }
.footer__contact p { color: rgba(237,231,221,.82); font-size: var(--fs-sm); margin:.35rem 0; display:flex; gap:.55rem; align-items:flex-start; }
.footer__contact .ico { width:1.1em; height:1.1em; color: var(--akzent-l); flex:none; margin-top:.25em; }
.footer__bar { border-top:1px solid var(--linie-d); margin-top:2.5rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.footer__bar p { color: rgba(237,231,221,.55); font-size: var(--fs-xs); margin:0; }
.footer__bar nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer__bar a { color: rgba(237,231,221,.7); font-size: var(--fs-xs); }
.footer__disclaimer { color: rgba(237,231,221,.5); font-size: var(--fs-xs); margin-top:1rem; }
@media (max-width: 860px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:1.8rem; } .footer__brand{ grid-column:1/-1; } }
@media (max-width: 500px){ .footer__grid{ grid-template-columns:1fr; } }

/* --- Breadcrumb ------------------------------------------------------- */
.crumbs { padding-block: 1rem; border-bottom: 1px solid var(--linie); background: var(--warmweiss); }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0; font-size:var(--fs-xs); }
.crumbs li { display:flex; align-items:center; gap:.5rem; color: var(--text-mut); }
.crumbs li::after { content:"/"; color: var(--linie); }
.crumbs li:last-child::after { display:none; }
.crumbs a { color: var(--text-mut); }
.crumbs a:hover { color: var(--akzent); }
.crumbs li[aria-current] { color: var(--ink); }

/* --- Page-Hero (Unterseiten) ------------------------------------------ */
.pagehero { background: var(--anthrazit); color: var(--text-invert); position: relative; overflow: hidden; }
.pagehero__media { position:absolute; inset:0; }
.pagehero__media img { width:100%; height:100%; object-fit:cover; opacity:.5; }
.pagehero::after { content:""; position:absolute; inset:0; background: linear-gradient(100deg, rgba(20,26,31,.9) 30%, rgba(20,26,31,.55)); }
.pagehero__inner { position: relative; z-index:2; padding-bottom: clamp(2.6rem,1.6rem + 4vw,5rem); }
.pagehero h1 { color:#fff; max-width: 20ch; }
.pagehero__lead { color: rgba(237,231,221,.88); font-size: var(--fs-lead); max-width: 54ch; margin-top: 1rem; }
.pagehero__cta { margin-top: 1.6rem; display:flex; flex-wrap:wrap; gap:.8rem; }

/* --- WhatsApp Float + QR-Panel ---------------------------------------- */
.wa-float {
  position: fixed; right: clamp(1rem,2vw,1.6rem); bottom: clamp(1rem,2vw,1.6rem); z-index: 120;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color:#fff;
  display: grid; place-items: center; box-shadow: var(--shadow-lg); border: none; cursor: pointer;
}
.wa-float .ico { width: 30px; height: 30px; stroke: none; fill: #fff; }
.wa-float:hover { filter: brightness(1.05); }
.wa-panel {
  position: fixed; right: clamp(1rem,2vw,1.6rem); bottom: calc(58px + clamp(1rem,2vw,1.6rem) + 12px); z-index: 121;
  width: 300px; max-width: calc(100vw - 2rem); background:#fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1.3rem; opacity:0; visibility:hidden; transform: translateY(10px) scale(.98);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.wa-panel[data-open="true"] { opacity:1; visibility:visible; transform: translateY(0) scale(1); }
.wa-panel__head { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.wa-panel__head .ico { width:24px; height:24px; fill:#25D366; stroke:none; }
.wa-panel__head strong { font-family:var(--font-display); color:var(--ink); }
.wa-panel p { font-size: var(--fs-sm); color: var(--text-mut); margin:0 0 1rem; }
.wa-panel__qr { width: 180px; height: 180px; margin: 0 auto 1rem; display:block; }
.wa-panel__qr svg { width:100%; height:100%; display:block; }
.wa-panel .btn { width:100%; }
.wa-panel__close { position:absolute; top:.6rem; right:.6rem; background:transparent; border:none; cursor:pointer; color:var(--text-mut); width:32px; height:32px; border-radius:50%; display:grid; place-items:center; }
.wa-panel__close:hover { background: var(--sand); color:var(--ink); }
.wa-panel__num { text-align:center; font-family:var(--font-display); font-weight:500; color:var(--ink); margin-bottom:1rem; }
.wa-panel__fallback { display:block; text-align:center; margin-top:.7rem; font-size:var(--fs-xs); }
@media (min-width: 641px){ .wa-panel__mobilehint{ display:none; } }

/* --- Reveal-Animationen (Progressive Enhancement) ---------------------
   Nur wenn JS aktiv ist (html.js), wird versteckt & eingeblendet.
   Ohne JS bleibt jeder Inhalt sichtbar. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

@keyframes fade { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none; } }

/* --- Utility ---------------------------------------------------------- */
.stack > * + * { margin-top: 1rem; }
.mt-1{margin-top:1rem} .mt-2{margin-top:2rem} .mb-0{margin-bottom:0}
.badge-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top: 1.2rem; }
.badge { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-xs); font-family:var(--font-display); font-weight:500; letter-spacing:.02em; color: var(--petrol); background:#fff; border:1px solid var(--linie); padding:.45rem .8rem; border-radius: 999px; }
.badge .ico { width:1.05em; height:1.05em; color: var(--gruen); }
.section--sand .badge { background: var(--warmweiss); }
.section--dark .badge, .section--petrol .badge { background: rgba(255,255,255,.08); color:#fff; border-color: var(--linie-d); }

hr.rule { border:0; border-top:1px solid var(--linie); margin: var(--sect) 0 0; }

/* Notfall-Hinweis (Schimmel/Wasser) */
.alert-strip { display:flex; gap:.8rem; align-items:center; padding:1rem 1.2rem; background: var(--sand); border-left: 3px solid var(--akzent); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-sm); color: var(--text); }
.alert-strip .ico { width:1.4em; height:1.4em; color: var(--akzent); flex:none; }

/* =====================================================================
   Aufbau wie Altseite: Home-Hero (Foto+Karte), Fotokacheln, Service-Hero
   ===================================================================== */

/* --- Home-Hero: Foto + weiße Karte --- */
/* Heroes schieben sich unter den transparenten Header (Haus-Standard) */
.hero-card, .pagehero, .svc-hero { margin-top: calc(var(--header-h) * -1); }
.hero-card__inner, .pagehero__inner, .svc-hero {
  padding-top: calc(var(--header-h) + clamp(2rem, 1.5rem + 3vw, 4rem));
}
/* Generisch: Beginnt eine Seite mit einer normalen .section (z. B. Kontakt),
   zieht auch die sich unter den transparenten Header — sonst stünde weiße
   Navigation auf cremefarbenem Seitenhintergrund. */
.site-header:not(.site-header--solid) + #main > .section:first-child {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--sect));
}
.site-header:not(.site-header--solid) + #main > .section:first-child::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--header-h) + 40px);
  z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 100%);
}

/* Scrim oben, damit die weiße Navigation auf jedem Foto lesbar bleibt */
.hero-card::before, .pagehero::before, .svc-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--header-h) + 40px);
  z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 100%);
}
.site-header--solid ~ * .hero-card::before { display: none; }

.hero-card { position: relative; background: var(--anthrazit); overflow: hidden; }
.hero-card__media { position: absolute; inset: 0; }
.hero-card__media img { width:100%; height:100%; object-fit: cover; }
.hero-card::after { content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(20,23,26,.72) 0%, rgba(20,23,26,.35) 55%, rgba(20,23,26,.1) 100%); }
.hero-card__inner { position: relative; z-index: 2; padding-bottom: clamp(3rem,2rem + 5vw,6.5rem); display:flex; }
.hero-card__panel { background: var(--warmweiss); border-radius: var(--radius-lg);
  padding: clamp(1.6rem,1.2rem + 2vw,3rem); max-width: 560px; box-shadow: var(--shadow-lg); }
.hero-card__panel h1 { font-size: clamp(1.9rem,1.4rem + 2.2vw,3rem); margin-bottom:0; }
.hero-card__panel h1 .hl { color: var(--ink); display:block; }
.hero-card__lead { color: var(--text); font-size: var(--fs-lead); margin: 1rem 0 0; }
.hero-card__cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
@media (max-width:560px){ .hero-card__panel{ max-width:none; } }

/* --- Leistungs-Fotokacheln --- */
.tiles { display:grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap: 1.1rem; }
@media (min-width:900px){ .tiles{ grid-template-columns: repeat(3,1fr); } }
.tile { position: relative; display:block; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/3; color:#fff; }
.tile__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.tile__img.ph { background: var(--sand-tief); }
.tile::after { content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(18,20,23,.86) 0%, rgba(18,20,23,.32) 48%, rgba(18,20,23,.08) 100%); transition: background .3s; }
.tile:hover .tile__img { transform: scale(1.05); }
.tile:hover::after { background: linear-gradient(to top, rgba(18,20,23,.9) 0%, rgba(18,20,23,.5) 55%, rgba(18,20,23,.2) 100%); }
.tile__body { position:absolute; inset:auto 0 0 0; z-index:2; padding: 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.3rem; }
.tile__label { font-family: var(--font-display); font-weight:700; font-size: 1.3rem; color:#fff; letter-spacing:-.01em; }
.tile__more { font-family: var(--font-display); font-weight:500; font-size: var(--fs-sm); color: rgba(255,255,255,.9); display:inline-flex; align-items:center; gap:.4rem; }

/* --- Service-Hero: Titel + Foto + Karte --- */
.svc-hero { position: relative; background: var(--dark); color: var(--text-invert);
  padding-bottom: clamp(2.4rem,1.8rem + 3vw,4.2rem); }
.svc-hero__title { color: #fff; }
.svc-hero__title { text-align:center; max-width: 24ch; margin-inline:auto; margin-bottom: clamp(1.4rem,1rem + 2vw,2.4rem); }
.svc-hero__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,1rem + 2.5vw,2.5rem); align-items:stretch; }
.svc-hero__media { border-radius: var(--radius-lg); overflow:hidden; min-height: 300px; }
.svc-hero__media img { width:100%; height:100%; object-fit:cover; display:block; }
.svc-hero__card { background:#fff; border-radius: var(--radius-lg); padding: clamp(1.5rem,1rem + 2vw,2.4rem); box-shadow: var(--shadow); display:flex; flex-direction:column; }
.svc-hero__lead { font-size: var(--fs-lead); color: var(--ink); font-weight:500; margin:0; }
.svc-hero__card .btn { margin-top:auto; align-self:flex-start; }
@media (max-width:820px){ .svc-hero__grid{ grid-template-columns:1fr; } .svc-hero__media{ min-height:220px; order:-1; } }

/* --- Checkliste mit Haken --- */
.check-list { list-style:none; padding:0; margin: 1.2rem 0 1.6rem; display:grid; gap:.7rem; }
.check-list li { display:flex; gap:.7rem; align-items:flex-start; font-size: var(--fs-body); color: var(--text); }
.check-list li .ico { color: var(--akzent); flex:none; margin-top:.15em; }

/* --- Formular-Panel hell auf dunkler Sektion --- */
.form-panel--light { background:#fff; border-radius: var(--radius-lg); padding: clamp(1.4rem,1rem + 2vw,2.2rem); box-shadow: var(--shadow-lg); }
.form-panel--light .field label { color: var(--ink); }

/* --- Kontakt-Info-Spalte --- */
.kontakt-info { color: var(--text-invert); align-self:start; }
.kontakt-info__block { padding: 1.05rem 0; border-bottom:1px solid var(--linie-d); }
.kontakt-info__block:first-child { padding-top:0; }
.kontakt-info h3 { color:#fff; font-size:1.08rem; display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem; }
.kontakt-info h3 .ico { color: var(--akzent-l); }
.kontakt-info p { color: rgba(233,234,236,.82); margin:0; }
.kontakt-info a { color:#fff; }
.kontakt-info .btn { margin-top:1.4rem; }

/* --- Footer Social --- */
.footer__social { display:flex; gap:.6rem; margin-top:1.3rem; }
.footer__social a { width:38px; height:38px; border:1px solid var(--linie-d); border-radius:50%; display:grid; place-items:center; color: rgba(233,234,236,.8); }
.footer__social a:hover { color:#fff; border-color: rgba(255,255,255,.4); }
.footer__social .ico { fill: currentColor; stroke:none; width:18px; height:18px; }

/* --- Page-Hero kompakt --- */
.pagehero--compact .pagehero__inner { padding-bottom: clamp(2.2rem,1.4rem + 3vw,4rem); }

/* --- Zickzack-Timeline "Was macht uns aus?" (wie Altseite) --- */
.timeline { position: relative; max-width: 920px; margin: 1.5rem auto 0; }
.timeline::before { content:""; position:absolute; left:50%; top:.5rem; bottom:.5rem; width:3px; background: var(--gold); transform: translateX(-50%); }
.tl-item { position: relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; margin: 1.4rem 0; }
.tl-node { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:3rem; height:3rem; background:#fff; border-radius:50%; display:grid; place-items:center; z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.2); color: var(--akzent); }
.tl-node .tl-ico { width:1.4rem; height:1.4rem; }
.tl-card { background:#fff; color: var(--text); border-radius: var(--radius-lg); padding:1.3rem 1.5rem; box-shadow: var(--shadow); }
.tl-card h3 { color: var(--ink); margin-bottom:.3rem; }
.tl-card p { color: var(--text-mut); font-size: var(--fs-sm); margin:0; }
.tl-item--right .tl-card { grid-column:2; margin-left:2.6rem; }
.tl-item--left  .tl-card { grid-column:1; margin-right:2.6rem; text-align:right; }
@media (max-width:700px){
  .timeline::before { left:1.5rem; }
  .tl-item { grid-template-columns:1fr; }
  .tl-node { left:1.5rem; top:1.6rem; transform:translate(-50%,-50%); }
  .tl-item--right .tl-card, .tl-item--left .tl-card { grid-column:1; margin:0 0 0 3.6rem; text-align:left; }
}

/* --- Kachel-Labels wie Altseite: GROSSBUCHSTABEN --- */
.tile__label { text-transform: uppercase; letter-spacing:.02em; font-size:1.15rem; }

/* --- Foto-Hintergrund hinter grauen Sektionen (wie Altseite) --- */
.section--photobg { position: relative; background: var(--anthrazit); overflow: hidden; }
.section--photobg > .sec-bg { position: absolute; inset: 0; z-index: 0; }
.section--photobg > .sec-bg img { width: 100%; height: 100%; object-fit: cover; }
.section--photobg::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(rgba(28,28,30,.72), rgba(24,24,26,.80)); }
.section--photobg > .wrap { position: relative; z-index: 2; }

/* --- Leistungs-Hero: Titel kleiner, Karte kompakter, Zertifikats-Leiste --- */
.svc-hero__title { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem); }
.svc-hero__card .btn { margin-top: 1.1rem; align-self: flex-start; }
.cert-strip { margin-top: auto; padding-top: 1.2rem; }
.cert-strip__lbl { display:block; font-size: var(--fs-xs); letter-spacing:.09em; text-transform:uppercase; color: var(--text-mut); margin-bottom:.55rem; }
.cert-strip__imgs { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.cert-thumb { height: 56px; width:auto; border:1px solid var(--linie); border-radius:2px; background:#fff; }

/* =====================================================================
   Großzügigerer Innenabstand in allen weißen Boxen (Text ↔ Rand)
   ===================================================================== */
.hero-card__panel      { padding: clamp(2rem, 1.5rem + 2vw, 3.4rem); }
.svc-hero__card        { padding: clamp(2rem, 1.5rem + 2vw, 3rem); }
.form-panel,
.form-panel--light     { padding: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
.tl-card               { padding: 1.6rem 1.9rem; }
.step                  { padding: 2.4rem 1.9rem 2.1rem; }
.feat                  { padding: 2rem 1.9rem; }
.baustein              { padding: 1.8rem 1.8rem; }
.kontakt-info__block   { padding: 1.15rem 0; }
/* etwas Luft zwischen Lead und Liste in der Hero-Karte */
.svc-hero__lead        { margin-bottom: .2rem; }
.check-list            { margin: 1.4rem 0 1.7rem; }

/* Hero-Karte: weißer Hintergrund transparenter (Foto scheint durch) */
.hero-card__panel {
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Footer: ARTIS-Credit */
.footer__artis { color: rgba(233,234,236,.5); font-size: var(--fs-xs); margin: 0; }
.footer__artis a { color: rgba(233,234,236,.85); }
.footer__artis a:hover { color: #fff; text-decoration: underline; }