/* ============================================================
   STUGGI Bau- und Immobiliendienstleistungen GmbH
   Designentwurf v2 — System orientiert an wskrantechnik.de
   Weiße Basis · ein Rot · 10px Radien · SF Pro · weiche Schatten
   ============================================================ */

@font-face {
  font-family: 'SF Pro Display';
  font-style: normal; font-weight: 1 1000; font-display: swap;
  src: url('fonts/sf-pro-display.woff2') format('woff2');
}
@font-face {
  font-family: 'SF Pro Display';
  font-style: italic; font-weight: 1 1000; font-display: swap;
  src: url('fonts/sf-pro-display-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/instrument-serif-italic.woff2') format('woff2');
}

:root {
  /* Flächen */
  --bg:        #ffffff;
  --bg-soft:   #eef0f3;   /* eine Stufe dunkler, Meeting 13.08. */
  --bg-mute:   #e3e6ea;

  /* Schrift */
  --ink:       #181a1d;
  --ink-soft:  #565d66;
  --ink-faint: #9aa0a8;

  /* Linien */
  --line:        #dde1e6;
  --line-strong: #d3d7dc;

  /* EIN Rot — das Logorot. Nirgends eine zweite Rotstufe. */
  --red: #CA0805;   /* direkt aus der Logodatei ausgelesen */

  /* Dunkle Bänder. Stuggi hat kein Blau, deshalb Graphit statt Navy. */
  --dark:   #0c0f12;
  --dark-2: #13171b;

  /* EIN Radius fuer die gesamte Seite: Buttons, Karten, Bilder, Felder,
     Chips, Badges. Aendern heisst: nur diesen Wert aendern. */
  --radius: 10px;

  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --akzent: "Instrument Serif", Georgia, "Times New Roman", serif;

  --hero: clamp(2.75rem, 1.7rem + 5.4vw, 6rem);
  --h2:   clamp(1.75rem, 1.1rem + 1.9vw, 3rem);
  --h3:   clamp(1.05rem, .95rem + .5vw, 1.3rem);

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

  /* Gesamthoehe der schwebenden Kopfzeile inkl. Abstand nach oben.
     Hero und Unterseiten-Hero ziehen sich exakt um diesen Wert hoch,
     sonst blitzt der weisse Seitenhintergrund darueber durch. */
  --hdr-luft: 1.35rem;
  --hdr-h: calc(var(--hdr-luft) + 4.9rem);

  --shadow-soft: 0 1px 2px rgba(16,24,40,.04), 0 14px 40px -14px rgba(16,24,40,.16);
  --shadow-card: 0 1px 3px rgba(16,24,40,.06), 0 28px 60px -24px rgba(16,24,40,.26);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Kein scroll-behavior: smooth — das uebernimmt Lenis. Beides
   gleichzeitig arbeitet gegeneinander und ruckelt. Ohne JavaScript
   bleibt der Browser bei seinem normalen Sprungverhalten. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--red); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.edge { margin-inline: auto; max-width: 80rem; padding-inline: clamp(1.25rem, 4vw, 3rem); }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: var(--hero); line-height: 1.03; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.25; }

.lead { font-size: clamp(1.0625rem, .98rem + .35vw, 1.3rem); line-height: 1.55; color: var(--ink-soft); }
.lead-light { color: rgba(255,255,255,.82); }

.eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red);
}

.akzent { font-family: var(--akzent); font-style: italic; font-weight: 400; letter-spacing: 0; }
.rot { color: var(--red); }

.sec-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head .eyebrow { display: block; margin-bottom: .9rem; }
.sec-head .lead { margin-top: 1rem; }

/* ---------- Header — Variante A „Tafel" ----------
   Zentrierte Navigation über ein Drei-Spalten-Raster, weicher Radius
   statt Pille. Die Glasrezeptur besteht aus drei Schichten: angehobene
   Sättigung, eine innere Lichtkante oben als Glasdicke, und ein weicher
   tiefer Schatten statt harter Kontur. */

.hdr { position: sticky; top: 0; z-index: 100; padding-top: var(--hdr-luft); }
.hdr-in {
  margin-inline: clamp(1rem, 3vw, 1.75rem);
  max-width: 84rem;
  margin-left: auto; margin-right: auto;
  padding: .8rem .85rem .8rem 1.35rem;
  border-radius: var(--radius);
  min-height: 4.9rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;

  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.66));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 6px 22px -12px rgba(16,24,40,.22);
}
@media (min-width: 86rem) {
  .hdr-in { margin-inline: auto; width: calc(100% - clamp(2rem, 6vw, 3.5rem)); }
}

.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 3.7rem; width: auto; display: block; }
.ftr-logo { height: 2.6rem; width: auto; margin-bottom: 1.25rem; }
@media (max-width: 520px) { .logo img { height: 2.6rem; } }

/* Die Navigation ist der Bezugsrahmen fuer die Aufklappflaechen:
   dadurch sitzt das Panel mittig unter der ganzen Leiste und laeuft
   auch beim linken Eintrag nicht aus dem Bild. */
.nav { display: flex; gap: .2rem; justify-self: center; position: relative; }
.nav-item { display: flex; }
.nav-top {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .95rem; font-weight: 550; color: var(--ink);
  padding: .6rem .85rem; border-radius: var(--radius); white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-top:hover { color: var(--ink); background: rgba(16,24,40,.06); }
.nav-top[aria-current], .nav-top.ist-aktiv { color: var(--ink); background: rgba(16,24,40,.07); }
/* Die beiden Bereiche sind Knoepfe, keine Links: der Kunde hat vom
   Klicken gesprochen, und auf Tablets gibt es kein Hover. Die
   Uebersichtsseite haengt in der Tafel unter „Alle Bauleistungen“. */
/* Kein „font: inherit": die Kurzschreibweise setzt auch font-weight
   zurueck und macht die beiden Knopf-Beschriftungen duenner als die
   Links daneben. Nur die Eigenschaften uebernehmen, die gebraucht
   werden — die Staerke kommt aus .nav-top. */
.nav-knopf {
  border: 0; background: none; cursor: pointer;
  /* Nur die Schriftfamilie uebernehmen. Weder „font: inherit" noch
     font-size/font-weight: inherit — beides ueberschreibt die Werte aus
     .nav-top und macht die Knopf-Beschriftungen groesser und duenner als
     die Links daneben. */
  font-family: inherit;
}
.nav-knopf:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.hdr-actions { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.hdr-tel {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-size: .95rem; font-weight: 550; color: var(--ink);
  padding: .45rem .35rem;
  transition: color .25s var(--ease);
}
.hdr-tel:hover { color: var(--red); }
.hdr-tel svg { color: var(--ink-soft); }

/* 1) Social-Icons. Noch ohne Ziel — die Profile existieren nicht.
   Deshalb bewusst <span> statt <a>: nicht fokussierbar, nicht klickbar. */
.hdr-social { display: flex; align-items: center; gap: .15rem; }
.hdr-social span {
  display: inline-grid; place-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius);
  color: var(--ink-soft); cursor: default;
}
.hdr-social svg { width: 1.15rem; height: 1.15rem; display: block; }
.hdr-sep { width: 1px; height: 1.4rem; background: rgba(16,24,40,.22); margin-inline: .5rem; }

@media (max-width: 1180px) {
  .nav { display: none; }
  .hdr-in { grid-template-columns: 1fr auto; }
}
/* Die Navigation ist mit „Immobiliendienstleistungen“ breiter geworden.
   Zwischen 1180 und 1300 weichen zuerst die Social-Icons, damit die
   Telefonnummer und der Anfrage-Knopf stehen bleiben. */
@media (max-width: 1300px) { .hdr-social, .hdr-sep { display: none; } }
@media (max-width: 640px) { .hdr-tel span { display: none; } }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1rem; font-weight: 600; line-height: 1;
  padding: .95rem 1.5rem; border-radius: var(--radius); white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.btn svg { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-red { background: var(--red); color: #fff; box-shadow: 0 12px 28px -12px rgba(202,8,5,.55); }
.btn-red:hover { background: #a80604; transform: translateY(-1px); }

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--line-strong); transform: translateY(-1px); }

.btn-glass { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }

.btn-sm { font-size: .9rem; padding: .7rem 1.2rem; }

/* ---------- Badge-Pille ---------- */

.badge {
  display: inline-flex; align-items: center; gap: .6rem;
  border-radius: var(--radius);
  padding: .5rem 1.1rem; font-size: .925rem; font-weight: 500;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }
.badge-light { border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-soft); }
.badge-dark  { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
               color: #fff; backdrop-filter: blur(14px); }

/* ---------- Bildplatzhalter ---------- */
/* Jeder Platzhalter nennt Motiv und die Prompt-Nummer aus bild-prompts.md. */

.ph {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(24,26,29,.035) 0 10px, transparent 10px 20px),
    var(--bg-mute);
  border: 1px dashed var(--line-strong);
  display: grid; place-content: center; text-align: center; gap: .4rem;
  padding: 1.5rem; color: var(--ink-faint);
}
.ph-dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px),
    var(--dark-2);
  border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.5);
}
.ph-label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ph-note  { font-size: .8rem; max-width: 26ch; margin-inline: auto; line-height: 1.4; }
.ph-id    { font-size: .7rem; font-weight: 600; color: var(--red); letter-spacing: .08em; }
.ph-16x9 { aspect-ratio: 16/9; }
.ph-4x3  { aspect-ratio: 4/3; }
.ph-1x1  { aspect-ratio: 1/1; }
.ph-4x5  { aspect-ratio: 4/5; }

/* ---------- Hero ---------- */

.hero { position: relative; margin-top: calc(var(--hdr-h) * -1); background: var(--dark); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg .ph { height: 100%; border-radius: 0; border: 0;
                place-content: center end; text-align: right; padding-right: clamp(1.5rem, 5vw, 4rem); }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--dark) 0%, rgba(16,19,23,.82) 42%, rgba(16,19,23,.35) 72%, rgba(16,19,23,.15) 100%);
}
.hero-in {
  position: relative; color: #fff;
  padding-top: calc(var(--hdr-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  min-height: 88svh; display: flex; flex-direction: column; justify-content: center;
}
.hero h1 { max-width: 20ch; margin-top: 1.5rem; color: #fff; }
.hero .lead { margin-top: 1.4rem; max-width: 38rem; }
.hero-btns { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-facts {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.75rem;
}
.hero-facts h4 { font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #fff; margin-bottom: .35rem; }
.hero-facts p  { font-size: .9rem; color: rgba(255,255,255,.68); line-height: 1.5; }
.hero-facts .dot { color: var(--red); }

/* ---------- Sektionen ---------- */

.sec { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sec-soft { background: var(--bg-soft); }
.sec-dark { background: var(--dark); color: #fff; }
.sec-dark h2, .sec-dark h3 { color: #fff; }
.sec-dark .lead { color: rgba(255,255,255,.75); }

/* ---------- Leistungskarten ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--line-strong); }
.card .ph { border-radius: 0; border: 0; border-bottom: 1px dashed var(--line-strong); }
.card-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card-nr { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--red); }
.card p { font-size: .95rem; color: var(--ink-soft); }
.card ul { list-style: none; margin-top: .4rem; display: grid; gap: .3rem; }
.card li { font-size: .875rem; color: var(--ink-soft); padding-left: 1rem; position: relative; }
.card li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
/* Aktion immer buendig am Kartenfuss, egal wie lang der Text darueber ist */
.card-body > .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Ablauf ---------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; counter-reset: s; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; position: relative;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.step:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.step-nr {
  width: 2.2rem; height: 2.2rem; border-radius: var(--radius);
  background: var(--red); color: #fff;
  display: grid; place-content: center;
  font-size: .82rem; font-weight: 700; margin-bottom: 1rem;
}
.step p { font-size: .9rem; color: var(--ink-soft); margin-top: .4rem; }

/* ---------- Split (Bild + Text) ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split .ph { box-shadow: var(--shadow-card); border-style: solid; }

/* ---------- Galerie ---------- */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery .ph { border-radius: var(--radius); }
.gallery > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Statement-Band ---------- */

.statement { text-align: center; max-width: 46rem; margin-inline: auto; }
.statement h2 { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.6rem); }

/* Aussage links, Schnitt rechts */
.statement-split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem, 6vw, 4.5rem); align-items: center; text-align: left;
}
.statement-split h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.8rem); max-width: 16ch; }
.statement-split .lead { max-width: 42ch; }
@media (max-width: 900px) { .statement-split { grid-template-columns: 1fr; } }

/* ---------- Zielgruppen ---------- */

.aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.aud-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.sec-soft .aud-item { background: #fff; }
.aud-item .eyebrow { display: block; margin-bottom: .7rem; }
.aud-item p { font-size: .9rem; color: var(--ink-soft); margin-top: .4rem; }

/* ---------- Kontakt ---------- */

.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 3.5rem); }
@media (max-width: 900px) { .kontakt-grid { grid-template-columns: 1fr; } }

.tel-big { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; display: inline-block; transition: color .25s var(--ease); }
.tel-big:hover { color: var(--red); }

.facts { display: grid; gap: 0; margin-top: 1.75rem; border-top: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line); font-size: .925rem; }
.facts dt { color: var(--ink-faint); }
.sec-dark .facts { border-top-color: rgba(255,255,255,.14); }
.sec-dark .facts div { border-bottom-color: rgba(255,255,255,.14); }
.sec-dark .facts dt { color: rgba(255,255,255,.55); }

.form { display: grid; gap: .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-soft); }
.field { display: grid; gap: .4rem; }
.field label { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font-family: var(--font); font-size: .95rem; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem; transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--red); background: #fff; }
.field textarea { resize: vertical; min-height: 6.5rem; }
.form-note { font-size: .78rem; color: var(--ink-faint); line-height: 1.5; }

/* ---------- Footer ---------- */

.ftr { background: var(--dark); color: rgba(255,255,255,.72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.ftr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2.25rem; margin-bottom: 2.75rem; }
.ftr h4 { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.ftr li { list-style: none; margin-bottom: .5rem; font-size: .925rem; }
.ftr a:hover { color: #fff; }
.ftr-bot { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem;
           display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: .85rem; color: rgba(255,255,255,.5); }

/* ---------- Unterseiten-Kopf ---------- */

.phero { background: var(--bg-soft); border-bottom: 1px solid var(--line);
         padding-top: clamp(6.5rem, 11vw, 9rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.phero .eyebrow { display: block; margin-bottom: .9rem; }
.phero .lead { margin-top: 1.1rem; max-width: 42rem; }

/* ---------- Reveal ---------- */

.rv { opacity: 1; transform: none; }
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rv, html.js .rv, .rise { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Listen auf Leistungsseiten ---------- */

.leist-liste { list-style: none; display: grid; gap: .55rem; }
.leist-liste li { position: relative; padding-left: 1.35rem; color: var(--ink-soft); }
.leist-liste li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}

.link-liste { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.link-liste li { border-bottom: 1px solid var(--line); }
.link-liste a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .25rem; font-size: 1.05rem; font-weight: 500;
  transition: color .25s var(--ease);
}
.link-liste a::after { content: '→'; color: var(--red); transition: transform .25s var(--ease); display: inline-block; }
.link-liste a:hover { color: var(--red); }
.link-liste a:hover::after { transform: translateX(4px); }

/* ---------- Abgrenzungshinweis ---------- */

.hinweis {
  margin-top: 2rem; padding: 1.4rem 1.5rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .95rem; color: var(--ink-soft); line-height: 1.6;
}
.hinweis strong {
  display: block; margin-bottom: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red);
}

/* ============================================================
   RHYTHMUS-BAUSTEINE
   Adaptiert von wskrantechnik.de. Ziel: nicht jede Sektion im
   gleichen Takt. Haarlinien trennen, Hintergründe wechseln,
   Bilder springen die Seite, jede Unterseite hat ein Eigenmodul.
   ============================================================ */

/* Haarlinie zwischen gleichfarbigen Sektionen */
.sec-line { border-top: 1px solid var(--line); }

/* Engere und weitere Takte statt überall derselbe */
.sec-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sec-wide  { padding-block: clamp(5rem, 11vw, 9rem); }

/* ---------- Foto-Hero für Unterseiten ---------- */

.phero-img { position: relative; background: var(--dark); overflow: hidden; margin-top: calc(var(--hdr-h) * -1); }
.phero-img .hero-bg { position: absolute; inset: 0; }
.phero-img .hero-bg .ph { height: 100%; border-radius: 0; border: 0;
  place-content: center end; text-align: right; padding-right: clamp(1.5rem,5vw,4rem); }
.phero-img .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--dark) 0%, rgba(16,19,23,.9) 40%, rgba(16,19,23,.55) 72%, rgba(16,19,23,.3) 100%);
}
.phero-img .edge { position: relative; color: #fff;
  padding-top: clamp(8.5rem, 15vw, 12rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.phero-img h1 { color: #fff; max-width: 17ch; margin-top: 1.25rem; }
.phero-img .lead { color: rgba(255,255,255,.8); margin-top: 1.25rem; max-width: 40rem; }

/* Faktenzeile unter dem Hero-Titel */
.phero-facts {
  margin-top: clamp(2.25rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem,1fr)); gap: 1.5rem;
}
.phero-facts dt { font-size: .74rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .3rem; }
.phero-facts dd { font-size: 1.05rem; font-weight: 500; color: #fff; }

/* ---------- Split, alternierend, mit Häkchenliste ---------- */

.split.reverse > *:first-child { order: 2; }
@media (max-width: 900px) { .split.reverse > *:first-child { order: 0; } }

.split-text h2 { margin-top: .9rem; }
.split-text > p { margin-top: 1.1rem; }

.checks { margin-top: 1.75rem; display: grid; gap: .8rem; }
@media (min-width: 34rem) { .checks { grid-template-columns: 1fr 1fr; } }
.checks div { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem; color: var(--ink-soft); }
.checks i {
  flex: none; margin-top: .12rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: rgba(202,8,5,.1); color: var(--red);
  display: grid; place-content: center; font-style: normal; font-size: .7rem; font-weight: 700;
}
.sec-dark .checks div { color: rgba(255,255,255,.75); }
.sec-dark .checks i { background: rgba(202,8,5,.22); }

/* ---------- FAQ, ohne JavaScript ---------- */

.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem .25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-size: 1.05rem; font-weight: 500; color: var(--ink);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary::after {
  content: '+'; flex: none; color: var(--red); font-size: 1.35rem; font-weight: 400;
  line-height: 1; transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 .25rem 1.3rem; color: var(--ink-soft); font-size: .95rem; max-width: 46rem; }

/* ---------- CTA-Band in Seitenmitte (schmaler als der Abschluss) ---------- */

.ctaband {
  background: var(--dark); color: #fff; border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.ctaband h3 { color: #fff; font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); max-width: 30ch; }
.ctaband p { color: rgba(255,255,255,.65); font-size: .95rem; margin-top: .4rem; }

/* ---------- Eigenmodul: Bodenaufbau im Schnitt (nur Leistungen) ---------- */

.aufbau { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.aufbau-lage {
  display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 1.25rem;
  padding: 1.15rem 1.35rem; background: #fff;
  border-bottom: 1px solid var(--line);
}
.aufbau-lage:last-child { border-bottom: 0; }
.aufbau-lage:nth-child(odd) { background: var(--bg-soft); }
.aufbau-nr { font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--red); }
.aufbau-lage strong { font-weight: 600; font-size: 1.02rem; }
.aufbau-lage span { font-size: .88rem; color: var(--ink-soft); }
.aufbau-bar { height: 6px; border-radius: 3px; background: var(--ink); opacity: .13; }
.aufbau-lage:nth-child(1) .aufbau-bar { width: 5rem; opacity: .28; }
.aufbau-lage:nth-child(2) .aufbau-bar { width: 3.5rem; }
.aufbau-lage:nth-child(3) .aufbau-bar { width: 2rem; }
.aufbau-lage:nth-child(4) .aufbau-bar { width: 2.75rem; }
.aufbau-lage:nth-child(5) .aufbau-bar { width: 4.25rem; background: var(--red); opacity: .85; }
@media (max-width: 620px) { .aufbau-lage { grid-template-columns: 2.5rem 1fr; } .aufbau-bar { display: none; } }

/* ---------- Eigenmodul: Jahresrhythmus (nur Immobilien) ---------- */

.jahr { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.jahr-kopf, .jahr-zeile {
  display: grid; grid-template-columns: 12rem repeat(12, 1fr); align-items: center;
  border-bottom: 1px solid var(--line);
}
.jahr-zeile:last-child { border-bottom: 0; }
.jahr-kopf { background: var(--bg-soft); }
.jahr-kopf span {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center; padding: .6rem 0;
}
.jahr-kopf span:first-child { text-align: left; padding-left: 1.2rem; }
.jahr-zeile strong { font-size: .95rem; font-weight: 600; padding: .85rem 1.2rem; }
.jahr-zelle { height: 100%; min-height: 2.6rem; border-left: 1px solid var(--line); }
.jahr-zelle.an { background: rgba(202,8,5,.12); }
.jahr-zelle.voll { background: var(--red); }
@media (max-width: 820px) { .jahr { display: none; } .jahr-fallback { display: block; } }
.jahr-fallback { display: none; }

/* ============================================================
   HERO-SLIDESHOW
   Fünf Motive, Wechsel alle 5 s, ruhiger Crossfade.
   Kein Layoutversatz: alle Ebenen liegen absolut übereinander,
   die Höhe bestimmt der Hero-Inhalt, nicht das Bild.
   ============================================================ */

/* isolation: isolate macht aus dem Container einen eigenen Stapelkontext.
   Ohne das steigt der z-index des einfahrenden Bildes bis in den Hero auf
   und legt sich waehrend der Blende ueber Overlay und Text. */
.slides { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0;
  /* Ruhige, gleichmaessige Blende. var(--ease) startet sehr schnell,
     das wirkt bei einer Ueberblendung wie ein Ruck. */
  transition: opacity 2s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
.slide.on { opacity: 1; }

/* Das einfahrende Bild liegt oben und blendet auf, waehrend das alte
   darunter voll deckend stehen bleibt. Blendeten beide gleichzeitig,
   waeren sie in der Mitte je halbtransparent und der schwarze Grund
   schiene durch: das Bild wuerde kurz dunkler. */
.slide.kommt { z-index: 2; }

/* Einheitliches dunkles Overlay. Erst flächig für die Lesbarkeit,
   darüber ein Verlauf von links, wo die Typografie steht. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(16,19,23,.94) 0%, rgba(16,19,23,.78) 42%, rgba(16,19,23,.42) 74%, rgba(16,19,23,.34) 100%),
    rgba(16,19,23,.34);
}
/* Bildflaeche unten, Overlay darueber, Text ganz oben. Ausdruecklich
   gesetzt, damit kein spaeterer z-index das wieder umwirft. */
.hero-bg { z-index: 0; }
.hero-in { z-index: 2; }


@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* ============================================================
   VEREDELUNG  (adaptiert von berger-consult.biz)
   Buchstabeneffekt, Ambient-Bewegung, gestaffelte Reveals.
   Alles bewusst langsam — auf einer Handwerkerseite darf nichts
   zappeln, sonst kippt hochwertig in verspielt.
   ============================================================ */

/* ---------- Buchstabeneffekt: laufender Verlauf im Text ---------- */

@keyframes verlauf-pan { to { background-position: 200% center; } }

.glanz {
  /* Schmales, helles Band. Breiter oder saettiger kippt es ins Rosa. */
  background-image: linear-gradient(
    100deg,
    #fff 0%, #fff 41%,
    rgba(255,232,229,.98) 48%,
    #fff 55%, #fff 100%);
  background-size: 220% auto;
  background-position: 0 center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: verlauf-pan 9s linear infinite;
}
/* Auf hellem Grund die dunkle Entsprechung */
.glanz-dunkel {
  background-image: linear-gradient(
    100deg,
    var(--ink) 0%, var(--ink) 34%,
    #5c6169 49%,
    var(--ink) 64%, var(--ink) 100%);
  background-size: 220% auto; background-position: 0 center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: verlauf-pan 11s linear infinite;
}

/* ---------- Ken Burns auf den Hero-Bildern ---------- */

@keyframes kenburns {
  from { transform: scale(1.045) translate3d(0,0,0); }
  to   { transform: scale(1.14)  translate3d(-1.2%, -1.4%, 0); }
}
/* linear statt ease-out: bei 22 s Laufzeit und 6 s Standzeit sieht man
   sonst nur den schnellen Anfang, und die Bewegung wirkt unruhig. */
.slide.on { animation: kenburns 26s linear both; }


/* ---------- Gestaffelte Reveals ---------- */
/* Kinder eines .rv-stagger laufen nacheinander ein statt gleichzeitig. */

html.js .rv-stagger > * { opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .rv-stagger.in > * { opacity: 1; transform: none; }
html.js .rv-stagger.in > *:nth-child(1) { transition-delay: 0s; }
html.js .rv-stagger.in > *:nth-child(2) { transition-delay: .07s; }
html.js .rv-stagger.in > *:nth-child(3) { transition-delay: .14s; }
html.js .rv-stagger.in > *:nth-child(4) { transition-delay: .21s; }
html.js .rv-stagger.in > *:nth-child(5) { transition-delay: .28s; }

/* ---------- Karten: Bild zieht beim Hover leicht an ---------- */

.card .ph { transition: transform .6s var(--ease); }
.card:hover .ph { transform: scale(1.035); }


@media (prefers-reduced-motion: reduce) {
  .glanz, .glanz-dunkel { animation: none; }
  .slide.on { animation: none; }
  html.js .rv-stagger > * { opacity: 1; transform: none; }
}

/* ============================================================
   GRAFIK UND INTERAKTION
   Bewegung, die an Inhalt hängt — nicht Deko über dem Bild.
   ============================================================ */

/* ---------- Lesefortschritt oben ---------- */
.fortschritt {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  z-index: 200; pointer-events: none;
}

/* ---------- Icons in den Leistungskarten ---------- */
.card-icon {
  width: 2.6rem; height: 2.6rem; border-radius: var(--radius);
  background: rgba(202,8,5,.09); color: var(--red);
  display: grid; place-content: center; margin-bottom: .2rem;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.card-icon svg { width: 1.35rem; height: 1.35rem; }
.card-icon svg path, .card-icon svg line, .card-icon svg rect, .card-icon svg polyline {
  stroke-dasharray: 90; stroke-dashoffset: 0;
  transition: stroke-dashoffset .7s var(--ease);
}
.card:hover .card-icon { background: var(--red); color: #fff; transform: translateY(-2px); }
.card:hover .card-icon svg path,
.card:hover .card-icon svg line,
.card:hover .card-icon svg polyline { stroke-dashoffset: 180; animation: zeichnen .8s var(--ease) forwards; }
@keyframes zeichnen { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }

/* ---------- Laufband mit den Leistungsbegriffen ---------- */
.laufband {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--bg-soft); padding-block: 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband-spur { display: flex; width: max-content; animation: laufen 46s linear infinite; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
@keyframes laufen { to { transform: translateX(-50%); } }
.laufband span {
  display: inline-flex; align-items: center; gap: 1.5rem;
  padding-inline: 1.5rem; white-space: nowrap;
  font-size: 1.05rem; font-weight: 500; color: var(--ink-soft);
}
.laufband span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

/* ---------- Bodenaufbau interaktiv ---------- */
.aufbau-lage { cursor: default; transition: background .3s var(--ease); }
.aufbau:hover .aufbau-lage { opacity: .42; transition: opacity .3s var(--ease); }
.aufbau:hover .aufbau-lage:hover { opacity: 1; background: #fff; }
.aufbau-lage .aufbau-bar { transition: transform .45s var(--ease), opacity .3s var(--ease); transform-origin: left; }
.aufbau-lage:hover .aufbau-bar { transform: scaleX(1.35); opacity: 1; }

/* ---------- Ablauf: Verbindungslinie und Icon ---------- */
.step { position: relative; overflow: hidden; }
.step::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.step:hover::after { transform: scaleX(1); }
.step-nr { transition: transform .35s var(--ease); }
.step:hover .step-nr { transform: scale(1.08) rotate(-4deg); }

/* ---------- Zielgruppenkarten: Zeile fährt ein ---------- */
.aud-item { position: relative; overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.aud-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--red); transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease);
}
.aud-item:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.aud-item:hover::before { transform: scaleY(1); }

/* ---------- Split-Bilder mit leichtem Parallax ---------- */
.split .ph, .split img { transition: transform .2s linear; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none; }
  .fortschritt { display: none; }
}

/* ============================================================
   MOTION-ICONS
   Dunkle Kachel auf heller Karte, Weiß/Grau plus ein roter Akzent.
   Jedes Icon hat eine eigene Sequenz — nichts teilt sich eine
   Animation. Sequenzen 5–7 s mit Haltephasen, damit keine
   erkennbare Endlosschleife entsteht.
   Glow ausschliesslich ueber getaktetes drop-shadow auf kleinen
   Elementen, nie als Dauerfilter auf ganzen Gruppen.
   ============================================================ */

.mi-kachel {
  position: relative; flex: none;
  width: 3rem; height: 3rem; border-radius: var(--radius);
  background: linear-gradient(160deg, #23282f 0%, var(--dark) 62%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 12px -6px rgba(16,24,40,.5);
  display: grid; place-content: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* Hover: minimale raeumliche Reaktion, kein Vergroessern */
.card:hover .mi-kachel, .mi-kachel:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 8px 20px -8px rgba(16,24,40,.6);
}

.mi { width: 1.75rem; height: 1.75rem; overflow: visible; display: block; }
.mi * { transform-box: fill-box; transform-origin: center; }
.mi .k  { stroke: rgba(255,255,255,.34); }   /* Konstruktion, zurueckhaltend */
.mi .l  { stroke: rgba(255,255,255,.82); }   /* Hauptlinien */
.mi .r  { stroke: var(--red); }              /* roter Akzent */
.mi .rf { fill: var(--red); }
.mi [stroke] { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Grundsatz: Die Konstruktion bleibt IMMER sichtbar. Animiert wird
   Helligkeit, Position und der rote Akzent — nie die Existenz eines
   Bauteils. Sonst ist das Icon im Standbild unvollstaendig. */

/* ---------- 01 Boden: Dielen legen sich, letzte rastet ein ---------- */
@keyframes mi-diele { 0% { stroke-dashoffset: 26; opacity: .3; }
  10% { opacity: .55; } 34% { stroke-dashoffset: 0; opacity: 1; }
  82% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 26; opacity: .3; } 100% { opacity: .3; } }
@keyframes mi-rastet { 0%, 40% { opacity: .45; filter: none; }
  50% { opacity: 1; filter: drop-shadow(0 0 3px rgba(202,8,5,.9)); }
  78% { opacity: 1; filter: drop-shadow(0 0 1px rgba(202,8,5,.5)); }
  92%, 100% { opacity: .45; filter: none; } }
.mi-boden .d { stroke-dasharray: 26; animation: mi-diele 6.4s cubic-bezier(.33,1,.68,1) infinite; }
.mi-boden .d:nth-of-type(2) { animation-delay: .18s; }
.mi-boden .d:nth-of-type(3) { animation-delay: .36s; }
.mi-boden .d:nth-of-type(4) { animation-delay: .54s; }
.mi-boden .d:nth-of-type(5) { animation-delay: .72s; }
.mi-boden .rd { animation: mi-rastet 6.4s ease-in-out infinite; animation-delay: .72s; }

/* ---------- 02 Sanierung: Arbeitsfront wandert ---------- */
@keyframes mi-front { 0% { transform: translateX(6px); }
  46% { transform: translateX(-5px); } 70% { transform: translateX(-5px); }
  100% { transform: translateX(6px); } }
@keyframes mi-frontglow { 0%, 100% { filter: drop-shadow(0 0 1.5px rgba(202,8,5,.5)); }
  46%, 70% { filter: drop-shadow(0 0 5px rgba(202,8,5,.95)); } }
@keyframes mi-alt { 0%, 18% { opacity: .85; } 46%, 68% { opacity: .22; } 100% { opacity: .85; } }
.mi-sanierung .front { animation: mi-front 7s cubic-bezier(.4,0,.2,1) infinite,
                                  mi-frontglow 7s ease-in-out infinite; }
.mi-sanierung .a { animation: mi-alt 7s ease-in-out infinite; }
.mi-sanierung .a:nth-of-type(2) { animation-delay: .3s; }
.mi-sanierung .a:nth-of-type(3) { animation-delay: .6s; }

/* ---------- 03 Modernisierung: Wand versetzen ---------- */
@keyframes mi-wand { 0%, 12% { transform: translateX(0); }
  40%, 68% { transform: translateX(5px); } 92%, 100% { transform: translateX(0); } }
@keyframes mi-marke { 0%, 12% { transform: translate(0,0); opacity: .55; }
  22% { opacity: 1; } 40% { transform: translate(5px,0); }
  68% { transform: translate(5px,0); opacity: 1; }
  84% { opacity: .55; } 100% { transform: translate(0,0); opacity: .55; } }
.mi-modern .wand { animation: mi-wand 6.8s cubic-bezier(.65,0,.35,1) infinite; }
.mi-modern .marke { animation: mi-marke 6.8s cubic-bezier(.65,0,.35,1) infinite;
  filter: drop-shadow(0 0 3px rgba(202,8,5,.75)); }

/* ---------- 04 Innenausbau: Platte legt sich, Schrauben ziehen an ---------- */
@keyframes mi-platte { 0% { transform: translateX(12px); opacity: .06; }
  40% { transform: translateX(0); opacity: .2; }
  76% { transform: translateX(0); opacity: .2; }
  100% { transform: translateX(12px); opacity: .06; } }
@keyframes mi-schraube { 0%, 40% { opacity: .35; filter: none; }
  52% { opacity: 1; filter: drop-shadow(0 0 3px rgba(202,8,5,.9)); }
  78% { opacity: .9; filter: none; } 92%, 100% { opacity: .35; } }
.mi-ausbau .platte { animation: mi-platte 6.6s cubic-bezier(.33,1,.68,1) infinite; }
.mi-ausbau .s { animation: mi-schraube 6.6s ease-out infinite; }
.mi-ausbau .s:nth-of-type(2) { animation-delay: .16s; }
.mi-ausbau .s:nth-of-type(3) { animation-delay: .32s; }

/* ---------- 05 Objektbetreuung: Begehung ---------- */
@keyframes mi-etage { 0%, 100% { opacity: .28; } 50% { opacity: .8; } }
.mi-objekt .e { animation: mi-etage 5.2s ease-in-out infinite; }
.mi-objekt .e:nth-of-type(2) { animation-delay: .5s; }
.mi-objekt .e:nth-of-type(3) { animation-delay: 1s; }
@keyframes mi-punkt {
  0%   { transform: translate(0,0); }      18% { transform: translate(0,-4.5px); }
  30%  { transform: translate(0,-4.5px); } 46% { transform: translate(0,-9px); }
  58%  { transform: translate(0,-9px); }   76% { transform: translate(0,-13.5px); }
  88%  { transform: translate(0,-13.5px); } 100% { transform: translate(0,0); } }
@keyframes mi-punktglow { 0%, 100% { filter: drop-shadow(0 0 1.5px rgba(202,8,5,.6)); }
  20%, 48%, 78% { filter: drop-shadow(0 0 4.5px rgba(202,8,5,1)); } }
.mi-objekt .punkt { animation: mi-punkt 7s cubic-bezier(.65,0,.35,1) infinite,
                               mi-punktglow 7s ease-in-out infinite; }

/* ---------- 06 Hausmeister: Schliessimpuls ---------- */
@keyframes mi-ring { 0%, 100% { transform: rotate(0deg); }
  38% { transform: rotate(-9deg); } 62% { transform: rotate(-9deg); } }
@keyframes mi-bart { 0%, 100% { transform: rotate(0deg); }
  44% { transform: rotate(-7deg); } 66% { transform: rotate(-7deg); } }
@keyframes mi-impuls { 0%, 28% { stroke-dashoffset: 30; opacity: .3; }
  36% { opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; }
  78% { opacity: .3; } 79% { stroke-dashoffset: 30; } 100% { opacity: .3; } }
.mi-hausmeister .ring { animation: mi-ring 6.2s cubic-bezier(.5,0,.2,1) infinite; }
.mi-hausmeister .bart { animation: mi-bart 6.2s cubic-bezier(.5,0,.2,1) infinite; }
.mi-hausmeister .impuls { stroke-dasharray: 30;
  animation: mi-impuls 6.2s cubic-bezier(.4,0,.2,1) infinite;
  filter: drop-shadow(0 0 2.5px rgba(202,8,5,.8)); }

/* ---------- 07 Winterdienst: Kristall, dann geräumter Weg ---------- */
@keyframes mi-strahl { 0% { stroke-dashoffset: 12; opacity: .35; }
  12% { opacity: .7; } 34% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 12; opacity: .35; } 100% { opacity: .35; } }
@keyframes mi-streu { 0%, 38% { opacity: .3; filter: none; }
  50% { opacity: 1; filter: drop-shadow(0 0 2.5px rgba(202,8,5,.9)); }
  78% { opacity: .9; filter: none; } 92%, 100% { opacity: .3; } }
.mi-winter .st { stroke-dasharray: 12; animation: mi-strahl 6.8s cubic-bezier(.33,1,.68,1) infinite; }
.mi-winter .st:nth-of-type(2) { animation-delay: .1s; }
.mi-winter .st:nth-of-type(3) { animation-delay: .2s; }
.mi-winter .g { animation: mi-streu 6.8s ease-out infinite; }
.mi-winter .g:nth-of-type(2) { animation-delay: .14s; }
.mi-winter .g:nth-of-type(3) { animation-delay: .28s; }
.mi-winter .g:nth-of-type(4) { animation-delay: .42s; }

/* ---------- 08 Grünpflege: Schnittlinie ---------- */
@keyframes mi-schnitt { 0% { transform: translateX(-6px); opacity: 0; }
  12% { opacity: 1; } 52% { transform: translateX(6px); opacity: 1; }
  64% { opacity: 0; } 100% { transform: translateX(-6px); opacity: 0; } }
@keyframes mi-tuft { 0%, 16% { transform: translateY(0); opacity: .95; }
  46%, 74% { transform: translateY(1.6px); opacity: .6; }
  100% { transform: translateY(0); opacity: .95; } }
.mi-gruen .schnitt { animation: mi-schnitt 6.4s cubic-bezier(.45,0,.25,1) infinite;
  filter: drop-shadow(0 0 3px rgba(202,8,5,.85)); }
.mi-gruen .w { animation: mi-tuft 6.4s ease-in-out infinite; }
.mi-gruen .w:nth-of-type(2) { animation-delay: .18s; }
.mi-gruen .w:nth-of-type(3) { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .mi *, .mi { animation: none !important; filter: none !important; }
  .mi .d, .mi .st { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .mi .platte { opacity: .18 !important; transform: none !important; }
  .mi .s, .mi .g, .mi .marke, .mi .impuls, .mi .schnitt { opacity: 1 !important; transform: none !important; }
  .mi .a, .mi .w { opacity: .9 !important; }
}

/* ============================================================
   VISUELLE MODULE
   Jedes uebersetzt eine Aussage in eine Metapher. Kein Modul
   teilt sein Timing mit einem anderen: 9,4 / 7,6 / 11,2 / 24 s.
   ============================================================ */

/* ---------- Ablauf: Impuls wandert durch die Stationen ---------- */

.pipeline { position: relative; margin-bottom: 1.5rem; }
.pipeline svg { display: block; width: 100%; height: 26px; overflow: visible; }
.pipeline .bahn { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.pipeline .knoten { fill: #fff; stroke: var(--line-strong); stroke-width: 1.5; }
.pipeline .kern { fill: var(--ink-faint); }

@keyframes pl-impuls { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
.pipeline .impuls {
  stroke: var(--red); stroke-width: 2.5; fill: none; stroke-linecap: round;
  stroke-dasharray: 7 93;
  animation: pl-impuls 9.4s cubic-bezier(.5,0,.5,1) infinite;
  filter: drop-shadow(0 0 4px rgba(202,8,5,.75));
}
/* Quittung an den Stationen — jeder Knoten zuendet, wenn der Impuls ankommt */
@keyframes pl-quittung {
  0%, 6% { fill: var(--ink-faint); r: 3; }
  10% { fill: var(--red); r: 4.2; }
  20% { fill: var(--red); r: 3.4; }
  46%, 100% { fill: var(--ink-faint); r: 3; }
}
.pipeline .kern { animation: pl-quittung 9.4s ease-out infinite; }
.pipeline .kern:nth-of-type(2) { animation-delay: 1.88s; }
.pipeline .kern:nth-of-type(3) { animation-delay: 3.76s; }
.pipeline .kern:nth-of-type(4) { animation-delay: 5.64s; }
.pipeline .kern:nth-of-type(5) { animation-delay: 7.52s; }
@media (max-width: 900px) { .pipeline { display: none; } }

/* ---------- Statement: zwei Wege ---------- */

.wege { width: 100%; max-width: 34rem; margin: 2.25rem auto 0; display: block; overflow: visible; }
.wege .grund { stroke: rgba(255,255,255,.16); stroke-width: 1.5; fill: none; }
.wege .gut, .wege .schlecht { fill: none; stroke-width: 2; stroke-linecap: round; }
.wege .gut { stroke: rgba(255,255,255,.9); stroke-dasharray: 260; }
.wege .schlecht { stroke: var(--red); stroke-dasharray: 150; opacity: .85; }

@keyframes w-gut { 0% { stroke-dashoffset: 260; } 30%, 100% { stroke-dashoffset: 0; } }
/* Der zweite Weg stockt zweimal, bevor er abreisst */
@keyframes w-schlecht {
  0% { stroke-dashoffset: 150; } 14% { stroke-dashoffset: 108; }
  22% { stroke-dashoffset: 108; } 34% { stroke-dashoffset: 78; }
  46% { stroke-dashoffset: 78; } 56%, 100% { stroke-dashoffset: 62; }
}
@keyframes w-haken { 0%, 34% { opacity: 0; transform: scale(.7); }
  44% { opacity: 1; transform: scale(1); }
  52% { filter: drop-shadow(0 0 5px rgba(255,255,255,.85)); }
  70%, 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes w-warn { 0%, 58% { opacity: 0; } 66% { opacity: 1; }
  74% { filter: drop-shadow(0 0 6px rgba(202,8,5,.95)); }
  88%, 100% { opacity: .9; filter: drop-shadow(0 0 2px rgba(202,8,5,.5)); } }
.wege.in .gut { animation: w-gut 7.6s cubic-bezier(.33,1,.68,1) infinite; }
.wege.in .schlecht { animation: w-schlecht 7.6s cubic-bezier(.65,0,.35,1) infinite; }
.wege .haken { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.wege.in .haken { animation: w-haken 7.6s ease-out infinite; }
.wege .warn { fill: var(--red); transform-box: fill-box; transform-origin: center; }
.wege.in .warn { animation: w-warn 7.6s ease-out infinite; }
.wege text { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Zielgruppen: Linien laufen in einem Punkt zusammen ---------- */

.netz { display: block; width: 100%; height: 104px; margin-bottom: -6px;
         pointer-events: none; overflow: visible; }
.netz .verb { stroke: var(--line-strong); stroke-width: 1.25; fill: none; }
.netz .fluss {
  stroke: var(--red); stroke-width: 2; fill: none; stroke-linecap: round;
  stroke-dasharray: 6 194; filter: drop-shadow(0 0 3.5px rgba(202,8,5,.7));
}
@keyframes nz-fluss { 0% { stroke-dashoffset: 200; opacity: 0; }
  4% { opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; }
  36%, 100% { opacity: 0; stroke-dashoffset: 0; } }
.netz .fluss { animation: nz-fluss 11.2s cubic-bezier(.4,0,.3,1) infinite; }
.netz .fluss:nth-of-type(1) { animation-duration: 11.2s; }
.netz .fluss:nth-of-type(2) { animation-delay: 2.6s; animation-duration: 12.1s; }
.netz .fluss:nth-of-type(3) { animation-delay: 5.9s; animation-duration: 10.4s; }
.netz .fluss:nth-of-type(4) { animation-delay: 8.2s; animation-duration: 13.3s; }
@keyframes nz-mitte { 0%, 8% { r: 5; opacity: .5; }
  16% { r: 7; opacity: 1; } 30% { r: 5.6; opacity: .8; } 46%, 100% { r: 5; opacity: .5; } }
.netz .mitte { fill: var(--red); animation: nz-mitte 2.8s ease-out infinite;
  filter: drop-shadow(0 0 5px rgba(202,8,5,.8)); }
.netz .aussen { fill: #fff; stroke: var(--line-strong); stroke-width: 1.5; }
@media (max-width: 1000px) { .netz { display: none; } }

/* ---------- Jahresrhythmus: Monats-Cursor ---------- */

.jahr { position: relative; }
.jahr-cursor {
  position: absolute; top: 0; bottom: 0; width: calc((100% - 12rem) / 12);
  left: 12rem; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(202,8,5,.13), rgba(202,8,5,.05));
  border-inline: 1px solid rgba(202,8,5,.32);
  animation: jr-lauf 24s steps(12, end) infinite;
}
@keyframes jr-lauf { to { transform: translateX(calc((100% + 0px) * 12)); } }
.jahr-zeile:hover .jahr-zelle.voll { filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
  .pipeline .impuls, .pipeline .kern,
  .wege .gut, .wege .schlecht, .wege .haken, .wege .warn,
  .netz .fluss, .netz .mitte, .jahr-cursor { animation: none !important; }
  .wege .gut, .wege .schlecht { stroke-dashoffset: 0 !important; }
  .wege .haken, .wege .warn { opacity: 1 !important; transform: none !important; }
  .netz .fluss { opacity: 0 !important; }
  .jahr-cursor { display: none; }
}

/* ============================================================
   ECHTE BILDER
   Ersetzen die Platzhalter. Feste Seitenverhaeltnisse plus
   width/height im Markup, damit beim Nachladen nichts springt.
   ============================================================ */

.bild {
  display: block; width: 100%; height: auto;
  object-fit: cover; border-radius: var(--radius);
  background: var(--bg-mute);
}
.bild-4x3  { aspect-ratio: 4/3; }
.bild-1x1  { aspect-ratio: 1/1; }
.bild-16x9 { aspect-ratio: 16/9; }
.bild-4x5  { aspect-ratio: 4/5; }

/* In der Karte laeuft das Bild randlos oben an, die Rundung
   kommt von der Karte selbst. */
.card .bild { border-radius: 0; transition: transform .6s var(--ease); }
.card { overflow: hidden; }
.card:hover .bild { transform: scale(1.035); }
.card-bild { overflow: hidden; }

.split .bild { box-shadow: var(--shadow-card); }
/* Galeriebilder brauchen einen Container: als direkte Grid-Kinder
   kollidiert height:100% mit der unbestimmten Zeilenhoehe. */
.gal-item { overflow: hidden; border-radius: var(--radius); background: var(--bg-mute);
             display: block; aspect-ratio: 1/1; }
.gal-item .bild { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto;
                  transition: transform .7s var(--ease); }
.gal-item:hover .bild { transform: scale(1.04); }

/* ============================================================
   BODENAUFBAU IM SCHNITT
   Vollstaendig in HTML/CSS statt SVG: dadurch sitzt jedes Label
   automatisch auf der Hoehe seiner Schicht, ohne absolute
   Positionierung. Die Schichten trennen sich und schliessen sich
   dauerhaft in einem ruhigen 11-s-Takt.
   ============================================================ */

.schnitt { display: grid; gap: .5rem; }
.schnitt-zeile {
  display: grid; grid-template-columns: 3.5rem 1fr 9.5rem;
  align-items: center; gap: 1rem;
}

/* Die Materialschicht */
.as-lage {
  height: var(--h); border-radius: 2px;
  background: var(--fb);
  position: relative; overflow: hidden;
  animation: as-atmen 11s cubic-bezier(.45,0,.25,1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes as-atmen {
  0%, 8%    { transform: translateY(0); }
  30%, 52%  { transform: translateY(var(--v)); }
  74%, 100% { transform: translateY(0); }
}

/* Lichtreflex nur auf der obersten Schicht, selten */
.as-lage.oben::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: as-reflex 11s linear infinite;
}
@keyframes as-reflex {
  0%, 74%   { transform: translateX(-140%); opacity: 0; }
  80%       { opacity: .9; }
  92%       { transform: translateX(300%); opacity: 0; }
  100%      { opacity: 0; }
}

/* Maszahl links, erscheint nur waehrend der Trennung */
.as-mass {
  font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  color: rgba(255,255,255,.42); text-align: right; font-variant-numeric: tabular-nums;
  animation: as-marken 11s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes as-marken { 0%, 12% { opacity: 0; } 30%, 52% { opacity: 1; } 70%, 100% { opacity: 0; } }

/* Materiallabel als duenne technische Glasflaeche */
.as-label {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .28rem .65rem; border-radius: 7px;
  font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -10px rgba(0,0,0,.7);
}
.as-label i { width: 5px; height: 5px; border-radius: 1px; background: var(--red); flex: none; }

/* Gesamthoehen-Markierung links neben dem Stapel */
.schnitt-rahmen { position: relative; padding-left: 0; }
.schnitt-rahmen::before {
  content: ''; position: absolute; left: 3.05rem; top: 6px; bottom: 6px; width: 1px;
  background: rgba(255,255,255,.18);
}

@media (max-width: 620px) {
  .schnitt-zeile { grid-template-columns: 2.5rem 1fr; }
  .as-label { display: none; }
}

/* ---------- Bilder: Mask Reveal statt Parallax ---------- */

@keyframes bild-reveal {
  0%   { clip-path: inset(0 0 100% 0); transform: scale(1.02); }
  100% { clip-path: inset(0 0 0 0);    transform: scale(1); }
}
html.js .split .bild, html.js .gal-item .bild { will-change: clip-path, transform; }
html.js .split.in .bild { animation: bild-reveal 1.1s cubic-bezier(.33,1,.68,1) both; }
html.js .gal-item .bild { transition: transform 1.2s var(--ease); }

/* ---------- Materialverhalten der vier Leistungskarten ---------- */
/* Jede Karte reagiert im Motiv ihrer Leistung. 2-5 px, mehr nicht. */

.card:nth-of-type(1):hover .bild { transform: scale(1.02) translateX(-3px); }   /* Belag schiebt sich in die Fuge */
.card:nth-of-type(2):hover .bild { transform: scale(1.025); filter: contrast(1.04) brightness(1.03); } /* Flaeche wird geglaettet */
.card:nth-of-type(3):hover .bild { transform: scale(1.02) translateY(-3px); }   /* Grundriss ordnet sich neu */
.card:nth-of-type(4):hover .bild { transform: scale(1.015) translateX(2px); }   /* Profile greifen ineinander */

@media (prefers-reduced-motion: reduce) {
  .schnitt .lage, .schnitt .mass, .schnitt .masstext, .schnitt .winkel,
  .schnitt .reflex, .mat-label { animation: none !important; opacity: 1 !important; transform: none !important; }
  html.js .split.in .bild { animation: none !important; clip-path: none !important; }
}

/* ============================================================
   KARTE
   Zwei-Klick-Lösung: Google lädt erst nach ausdrücklicher
   Zustimmung. Ohne das würden beim Seitenaufruf ungefragt Daten
   an Google übertragen — in Deutschland ein bekanntes Abmahnrisiko.
   ============================================================ */

.karte {
  position: relative; aspect-ratio: 16/10; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft);
}
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.karte-schutz {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; gap: .85rem; padding: 1.75rem;
  background:
    repeating-linear-gradient(135deg, rgba(24,26,29,.03) 0 11px, transparent 11px 22px),
    var(--bg-soft);
}
.karte-schutz strong { font-size: 1rem; font-weight: 600; color: var(--ink); }
.karte-schutz p { font-size: .85rem; color: var(--ink-soft); max-width: 34ch; margin-inline: auto; line-height: 1.55; }
.karte-schutz .btn { justify-self: center; }
.karte-adresse {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem; border-radius: 7px;
  font-size: .78rem; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.8));
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px -10px rgba(16,24,40,.5);
}
.karte-adresse i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }

/* ---------- Zwei gleichwertige Bereiche direkt nach dem Hero ---------- */
.saeulen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 860px) { .saeulen { grid-template-columns: 1fr; } }
.saeule {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: .9rem;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.saeule:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--line-strong); }
.saeule h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); }
.saeule > p { color: var(--ink-soft); font-size: .98rem; }
.saeule ul { list-style: none; display: grid; gap: .45rem; margin-top: .2rem; }
.saeule li { font-size: .93rem; color: var(--ink-soft); padding-left: 1.05rem; position: relative; }
.saeule li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.saeule .btn { margin-top: auto; align-self: flex-start; }
.saeule-kopf { display: flex; align-items: center; gap: .9rem; }

/* ============================================================
   PREMIUM-LEISTUNGSKARTEN
   Keine Icon-Kachel mehr. Das Bild traegt die Karte, die Nummer
   liegt als architektonische Marke darin, und beim Hover wandert
   ein Streiflicht ueber die Materialflaeche — abgeleitet davon,
   wie Licht ueber einen frisch verlegten Boden laeuft.
   ============================================================ */

.pk { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }

.pk-karte {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .55s var(--ease), transform .55s var(--ease), border-color .55s var(--ease);
}
.pk-karte:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 34px 64px -28px rgba(16,24,40,.42);
}

/* Bildbuehne */
.pk-buehne { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--bg-mute); }
.pk-buehne img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.01); transition: transform 1.1s var(--ease); }
.pk-karte:hover .pk-buehne img { transform: scale(1.06); }

/* Verlauf nach unten, damit Nummer und Titel stehen */
.pk-buehne::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,19,23,0) 34%, rgba(16,19,23,.16) 58%, rgba(16,19,23,.72) 100%);
}

/* Streiflicht ueber die Materialflaeche */
.pk-licht {
  position: absolute; top: -20%; bottom: -20%; width: 42%; left: -50%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  filter: blur(14px);
  transition: transform 1.15s cubic-bezier(.4,0,.2,1), opacity .5s var(--ease);
  opacity: 0;
}
.pk-karte:hover .pk-licht { transform: translateX(360%); opacity: 1; }

/* Nummer als architektonische Marke */
.pk-nr {
  position: absolute; left: 1.25rem; bottom: 1rem; z-index: 2;
  font-size: clamp(2.1rem, 1.8rem + 1.2vw, 2.9rem); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; color: rgba(255,255,255,.94);
  font-variant-numeric: tabular-nums;
  transition: transform .55s var(--ease);
}
.pk-karte:hover .pk-nr { transform: translateY(-3px); }
.pk-nr::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.5rem; height: 2px;
  background: var(--red); transform: scaleX(.28); transform-origin: left;
  transition: transform .7s var(--ease);
}
.pk-karte:hover .pk-nr::after { transform: scaleX(1); }

/* Titel auf dem Bild */
/* Die Nummer sitzt links unten. Der Titel bekommt deshalb eine feste
   linke Grenze statt einer Prozentbreite — sonst laufen lange Namen wie
   „Innenausbau & Ausbauarbeiten" in die Ziffer hinein. */
.pk-titel {
  position: absolute; right: 1.25rem; bottom: 1.15rem; left: 5.4rem;
  z-index: 2; text-align: right;
  font-size: clamp(1rem, .92rem + .4vw, 1.22rem); font-weight: 600;
  letter-spacing: -.02em; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

.pk-inhalt { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.pk-inhalt > p { font-size: .95rem; color: var(--ink-soft); }
.pk-liste { list-style: none; display: grid; gap: .35rem; }
.pk-liste li { font-size: .88rem; color: var(--ink-soft); padding-left: 1rem; position: relative; }
.pk-liste li::before {
  content: ''; position: absolute; left: 0; top: .58em; width: 6px; height: 1.5px; background: var(--red);
}
.pk-inhalt .btn { margin-top: auto; align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .pk-karte, .pk-buehne img, .pk-licht, .pk-nr, .pk-nr::after { transition: none !important; }
  .pk-licht { display: none; }
}

/* ============================================================
   MOBIL
   Desktop war die Vorgabe, die Seite muss aber auf dem Handy
   funktionieren — Hausverwaltungen googeln direkt nach dem Termin.
   ============================================================ */

.burger {
  display: none; width: 2.6rem; height: 2.6rem; border: 0; padding: 0;
  background: transparent; cursor: pointer; border-radius: var(--radius);
  place-content: center; color: var(--ink);
}
.burger span { display: block; width: 1.15rem; height: 1.6px; background: currentColor; border-radius: 1px;
  transition: transform .35s var(--ease), opacity .25s var(--ease); }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.mobilnav {
  position: fixed; inset: 0; z-index: 99; display: none;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  padding: 7rem clamp(1.25rem,5vw,2rem) 2rem;
  overflow-y: auto;
}
.mobilnav.offen { display: block; }
.mobilnav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .25rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em;
  border-bottom: 1px solid var(--line);
}
.mobilnav a::after { content: '→'; color: var(--red); }
.mobilnav .mn-tel { margin-top: 2rem; display: grid; gap: .7rem; }
.mobilnav .mn-tel .btn { justify-content: center; width: 100%; }
body.nav-offen { overflow: hidden; }

@media (max-width: 1180px) {
  .burger { display: grid; }
  .hdr-in { grid-template-columns: auto 1fr auto; padding-right: .55rem; }
  .hdr-actions { gap: .4rem; }
  .hdr-social, .hdr-sep { display: none; }
}
@media (max-width: 700px) {
  .hdr-tel { display: none; }
  .hero-in { padding-top: calc(var(--hdr-h) + 1.5rem); min-height: 86svh; }
  h1 { font-size: clamp(2rem, 7.4vw, 3rem); }
  .hero h1 { max-width: 100%; }
  .lead { font-size: 1.02rem; }
  .sec { padding-block: clamp(2.75rem, 9vw, 4rem); }
  .sec-head { margin-bottom: 1.75rem; }
  .pk { gap: 1rem; }
  .pk-nr { font-size: 2.1rem; }
  .laufband span { font-size: .92rem; padding-inline: 1rem; }
  .steps, .aud, .saeulen { gap: .85rem; }
  .ctaband { flex-direction: column; align-items: flex-start; }
  .ctaband .btn { width: 100%; justify-content: center; }
  .hero-btns .btn { flex: 1; justify-content: center; }
  .tel-big { font-size: clamp(1.5rem, 7vw, 2rem); }
  .phero-img .edge { padding-top: calc(var(--hdr-h) + 2rem); }
  .schnitt-zeile { grid-template-columns: 2.6rem 1fr; }
  .facts div { flex-direction: column; gap: .1rem; }
  .facts dt { font-size: .78rem; }
  .form { padding: 1.1rem; }
  .ftr-grid { gap: 1.75rem; }
  .netz { display: none; }
}
@media (max-width: 420px) {
  .edge { padding-inline: 1.1rem; }
  .hdr-in { margin-inline: .75rem; padding-left: .9rem; }
  .logo img { height: 2.2rem; }
}

/* ============================================================
   ZIELGRUPPEN — architektonische Tafeln
   Ersetzt das duenne Linien-Netz. Typografisch statt grafisch:
   grosse Geisternummer im Grund, feines Konstruktionsraster,
   rote Kante, die beim Hover einfaehrt. Keine Infografik.
   ============================================================ */

/* Flex statt Grid, und Trennlinien als Schlagschatten.
   Bei einem Raster bleibt in der letzten Reihe eine leere Zelle stehen,
   sobald die Anzahl der Felder nicht durch die Spaltenzahl teilbar ist —
   und die faellt bei sechs Feldern in fuenf Spalten sofort auf. Im Flex
   wachsen die Felder der letzten Reihe stattdessen auf die volle Breite. */
.zg { display: flex; flex-wrap: wrap;
      background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.zg > * { flex: 1 1 15.5rem; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }

.zg-feld {
  position: relative; overflow: hidden; background: #fff;
  padding: clamp(1.6rem, 3vw, 2.5rem) clamp(1.4rem, 2.5vw, 2rem) clamp(2rem, 3.5vw, 2.75rem);
  display: flex; flex-direction: column; gap: .65rem; min-height: 15rem;
  transition: background .5s var(--ease);
}
.zg-feld:hover { background: var(--bg-soft); }

/* Geisternummer im Grund */
.zg-feld::before {
  content: attr(data-nr);
  position: absolute; right: -.4rem; bottom: -1.2rem; z-index: 0;
  font-size: 7.5rem; font-weight: 600; letter-spacing: -.05em; line-height: 1;
  color: rgba(24,26,29,.045); pointer-events: none;
  transition: color .6s var(--ease), transform .8s var(--ease);
}
.zg-feld:hover::before { color: rgba(202,8,5,.09); transform: translateY(-6px); }

/* Feines Konstruktionsraster, nur im oberen Bereich */
.zg-feld::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4.5rem; z-index: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(24,26,29,.05) 1px, transparent 1px);
  background-size: 1.4rem 100%;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
  opacity: 0; transition: opacity .6s var(--ease);
}
.zg-feld:hover::after { opacity: 1; }

.zg-kopf { position: relative; z-index: 1; display: flex; align-items: baseline; gap: .7rem; }
.zg-nr {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.zg-nr::after { content: ''; display: inline-block; width: 1.4rem; height: 1px;
  background: var(--red); margin-left: .55rem; vertical-align: middle; opacity: .5; }
.zg-feld h3 { position: relative; z-index: 1; font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); margin-top: .3rem; }
.zg-feld p  { position: relative; z-index: 1; font-size: .93rem; color: var(--ink-soft); }
.zg-feld .zg-rolle { position: relative; z-index: 1; font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* Rote Kante faehrt beim Hover ein */
.zg-feld .zg-kante {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .65s var(--ease); z-index: 1;
}
.zg-feld:hover .zg-kante { transform: scaleX(1); }

/* ---------- Ablaufkarten auf dasselbe Niveau ---------- */
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2rem); position: relative; overflow: hidden;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
}
.step:hover { transform: translateY(-4px); border-color: transparent;
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 26px 50px -24px rgba(16,24,40,.36); }
.step-nr {
  width: auto; height: auto; border-radius: 0; background: none; color: var(--red);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .9rem;
  display: flex; align-items: center; gap: .55rem;
}
.step-nr::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.step:hover .step-nr { transform: none; }
.step::after { height: 2px; }

@media (prefers-reduced-motion: reduce) {
  .zg-feld, .zg-feld::before, .zg-feld::after, .zg-kante, .step { transition: none !important; }
}

/* ============================================================
   AUFKLAPP-NAVIGATION
   Zwei Bereiche, Bau zuerst. Das Panel haengt an der Navigation,
   nicht am einzelnen Eintrag — dadurch sitzt es mittig unter der
   Leiste und laeuft beim linken Eintrag nicht aus dem Bild.
   Kein JavaScript: :hover fuer die Maus, :focus-within fuer die
   Tastatur.
   ============================================================ */

.nav-drop {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  /* Die Navigation sitzt mittig in der Kopfzeile, ihre Unterkante liegt
     also hoeher als die der Tafel. Das Polster ueberbrueckt genau diesen
     Rest und dient gleichzeitig als Hover-Bruecke. */
  padding-top: 1.9rem;
  transform: translateX(-50%) translateY(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
/* Klick ist der Hauptweg, Tastaturfokus der zweite. Der Hover kommt
   nur auf echten Zeigergeraeten dazu — auf Touch wuerde er den ersten
   Tipp schlucken und die Tafel liesse sich nicht wieder schliessen. */
.nav-item.offen > .nav-drop,
.nav-item:focus-within > .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover > .nav-drop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

.nav-drop-in {
  display: grid; grid-template-columns: 1.25fr .9fr; gap: 1.5rem;
  width: min(52rem, 88vw); padding: 1.4rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,255,255,.955));
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 70px -26px rgba(16,24,40,.55);
}
.nav-drop-schmal .nav-drop-in { width: min(46rem, 88vw); }

.nav-kopf {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 0 .8rem .7rem;
}
.nav-spalte { display: grid; gap: .1rem; align-content: start; }
.nav-spalte > a {
  display: block; padding: .65rem .8rem; border-radius: 8px;
  transition: background .22s var(--ease);
}
.nav-spalte > a strong {
  display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  transition: color .22s var(--ease);
}
.nav-spalte > a span {
  display: block; font-size: .81rem; color: var(--ink-soft); margin-top: .1rem; line-height: 1.4;
}
.nav-spalte > a:hover { background: rgba(16,24,40,.055); }
.nav-spalte > a:hover strong { color: var(--red); }

.nav-fach { display: grid; align-content: start; gap: .6rem; }
.nav-fach-karte {
  display: block; padding: 1rem 1.1rem; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--line);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav-fach-karte strong { display: block; font-size: .93rem; font-weight: 600; }
.nav-fach-karte span { display: block; font-size: .81rem; color: var(--ink-soft); margin-top: .3rem; line-height: 1.45; }
a.nav-fach-karte:hover { border-color: var(--red); background: #fff; }
.nav-fach-text { cursor: default; }
.nav-alle {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .3rem;
  font-size: .85rem; font-weight: 600; color: var(--red);
}
.nav-alle svg { width: .95em; height: .95em; transition: transform .25s var(--ease); }
.nav-alle:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .nav-drop { transition: none; }
}

/* ---------- Mobilmenue: zwei aufklappbare Gruppen ---------- */

.mn-gruppe { border-bottom: 1px solid var(--line); }
.mn-gruppe > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .25rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em;
}
.mn-gruppe > summary::-webkit-details-marker { display: none; }
.mn-gruppe > summary::after {
  content: ''; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease);
}
.mn-gruppe[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.mn-unter { padding: 0 0 .9rem .25rem; display: grid; }
.mn-unter a {
  padding: .6rem 0; font-size: 1rem; font-weight: 500; color: var(--ink-soft);
  border-bottom: 0;
}
.mn-unter a::after { content: ''; }
.mn-unter a:hover { color: var(--red); }
.mn-einzeln {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .25rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em;
  border-bottom: 1px solid var(--line);
}
.mn-einzeln::after { content: '→'; color: var(--red); }
.mobilnav > a::after { content: '→'; color: var(--red); }


/* ============================================================
   BODENAUFBAU IM SCHNITT — das Fachmodul
   Links die Zeichnung: ein durchgehender Stapel, Bandhoehen aus
   den Daten. Rechts die Legende. Getrennt, weil unterschiedlich
   lange Texte den Stapel sonst auseinanderziehen — dann liest es
   sich als Tabelle statt als Schichtaufbau.
   Drei Aufbauten ueber Radio-Reiter, kein JavaScript.
   ============================================================ */

.bauauf { --ba-linie: var(--line); }
.ba-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ba-reiter { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.ba-reiter label {
  font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  padding: .55rem 1.05rem; border-radius: var(--radius);
  border: 1px solid var(--ba-linie); cursor: pointer; user-select: none;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.ba-reiter label:hover { color: var(--ink); border-color: var(--line-strong); }
.ba-radio:nth-of-type(1):checked ~ .ba-reiter label:nth-child(1),
.ba-radio:nth-of-type(2):checked ~ .ba-reiter label:nth-child(2),
.ba-radio:nth-of-type(3):checked ~ .ba-reiter label:nth-child(3) {
  color: #fff; background: var(--ink); border-color: var(--ink);
}
.ba-radio:focus-visible ~ .ba-reiter label { outline: 2px solid var(--red); outline-offset: 3px; }

.ba-panel { display: none; }
.ba-radio:nth-of-type(1):checked ~ .ba-panels .ba-panel:nth-child(1),
.ba-radio:nth-of-type(2):checked ~ .ba-panels .ba-panel:nth-child(2),
.ba-radio:nth-of-type(3):checked ~ .ba-panels .ba-panel:nth-child(3) {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* ---------- Die Zeichnung ---------- */

.ba-zeichnung { position: sticky; top: calc(var(--hdr-h) + 1.5rem); margin: 0; }
.ba-stapel {
  display: flex; flex-direction: column;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(16,24,40,.55);
}
/* Bildunterschrift wie bei einer Detailzeichnung */
.ba-zeichnung figcaption {
  padding-top: .7rem;
  font-size: .65rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center;
}
.ba-band {
  display: block; height: calc(var(--h) * 2.3); min-height: 7px; flex: none;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .4s var(--ease), filter .4s var(--ease);
}
/* Rote Marke, die beim Hervorheben an der Kante einfaehrt */
.ba-band::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}

/* ---------- Die Legende ---------- */

.ba-legende { list-style: none; display: grid; border-top: 1px solid var(--ba-linie); }
.ba-legende li {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1.25rem;
  padding-block: .9rem; border-bottom: 1px solid var(--ba-linie);
  transition: background .3s var(--ease);
}
.ba-li-mass {
  grid-row: span 2; text-align: right; padding-top: .2rem;
  font-size: .71rem; font-weight: 600; letter-spacing: .05em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease);
}
.ba-legende strong {
  font-size: 1rem; font-weight: 600; letter-spacing: -.015em;
  transition: color .3s var(--ease);
}
.ba-legende p { font-size: .87rem; line-height: 1.55; color: var(--ink-soft); margin-top: .18rem; }

/* ---------- Beide Seiten heben sich gegenseitig hervor ---------- */

.ba-band:hover,
.ba-panel:has(.ba-legende li:nth-child(1):hover) .ba-band:nth-child(1),
.ba-panel:has(.ba-legende li:nth-child(2):hover) .ba-band:nth-child(2),
.ba-panel:has(.ba-legende li:nth-child(3):hover) .ba-band:nth-child(3),
.ba-panel:has(.ba-legende li:nth-child(4):hover) .ba-band:nth-child(4),
.ba-panel:has(.ba-legende li:nth-child(5):hover) .ba-band:nth-child(5),
.ba-panel:has(.ba-legende li:nth-child(6):hover) .ba-band:nth-child(6),
.ba-panel:has(.ba-legende li:nth-child(8):hover) .ba-band:nth-child(8),
.ba-panel:has(.ba-legende li:nth-child(7):hover) .ba-band:nth-child(7) {
  transform: translateX(10px); filter: brightness(1.12);
}
.ba-band:hover::after,
.ba-panel:has(.ba-legende li:nth-child(1):hover) .ba-band:nth-child(1)::after,
.ba-panel:has(.ba-legende li:nth-child(2):hover) .ba-band:nth-child(2)::after,
.ba-panel:has(.ba-legende li:nth-child(3):hover) .ba-band:nth-child(3)::after,
.ba-panel:has(.ba-legende li:nth-child(4):hover) .ba-band:nth-child(4)::after,
.ba-panel:has(.ba-legende li:nth-child(5):hover) .ba-band:nth-child(5)::after,
.ba-panel:has(.ba-legende li:nth-child(6):hover) .ba-band:nth-child(6)::after,
.ba-panel:has(.ba-legende li:nth-child(8):hover) .ba-band:nth-child(8)::after,
.ba-panel:has(.ba-legende li:nth-child(7):hover) .ba-band:nth-child(7)::after {
  transform: scaleX(1);
}
.ba-legende li:hover .ba-li-mass { color: var(--ink); }
.ba-legende li:hover strong { color: var(--red); }
.ba-panel:has(.ba-band:nth-child(1):hover) .ba-legende li:nth-child(1) strong,
.ba-panel:has(.ba-band:nth-child(2):hover) .ba-legende li:nth-child(2) strong,
.ba-panel:has(.ba-band:nth-child(3):hover) .ba-legende li:nth-child(3) strong,
.ba-panel:has(.ba-band:nth-child(4):hover) .ba-legende li:nth-child(4) strong,
.ba-panel:has(.ba-band:nth-child(5):hover) .ba-legende li:nth-child(5) strong,
.ba-panel:has(.ba-band:nth-child(6):hover) .ba-legende li:nth-child(6) strong,
.ba-panel:has(.ba-band:nth-child(8):hover) .ba-legende li:nth-child(8) strong,
.ba-panel:has(.ba-band:nth-child(7):hover) .ba-legende li:nth-child(7) strong {
  color: var(--red);
}

.ba-fuss {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--ba-linie);
  font-size: .82rem; line-height: 1.55; color: var(--ink-faint); max-width: 54rem;
}

/* ---------- Materialien ----------
   Keine Farbcodierung um ihrer selbst willen: die Abdichtung ist
   die einzige rote Schicht, weil sie die einzige ist, die im
   Schadensfall alles darueber entwertet. */
.ba-band[data-mat="belag"]    { background: linear-gradient(180deg,#2b3036,#1b1f24); }
.ba-band[data-mat="kleber"]   { background: repeating-linear-gradient(90deg,#b9c0c8 0 3px,#ccd2d8 3px 6px); }
.ba-band[data-mat="abdicht"]  { background: linear-gradient(180deg,#CA0805,#9d0604); }
.ba-band[data-mat="grund"]    { background: linear-gradient(180deg,#e2e6ea,#d4d9df); }
.ba-band[data-mat="spachtel"] { background: linear-gradient(180deg,#d2d7dd,#c0c7ce); }
.ba-band[data-mat="entkopp"]  { background: repeating-linear-gradient(45deg,#c7ced5 0 4px,#d9dee3 4px 8px); }
.ba-band[data-mat="estrich"]  { background: linear-gradient(180deg,#b4bbc2,#9fa7b0); }
.ba-band[data-mat="unter"]    { background: repeating-linear-gradient(-45deg,#8d959d 0 5px,#9ba3ab 5px 10px); }

/* ---------- Dunkle Fassung fuer das Statementband ---------- */
.bauauf-dunkel { --ba-linie: rgba(255,255,255,.16); }
.bauauf-dunkel .ba-reiter label { color: rgba(255,255,255,.62); }
.bauauf-dunkel .ba-reiter label:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.bauauf-dunkel .ba-radio:nth-of-type(1):checked ~ .ba-reiter label:nth-child(1),
.bauauf-dunkel .ba-radio:nth-of-type(2):checked ~ .ba-reiter label:nth-child(2),
.bauauf-dunkel .ba-radio:nth-of-type(3):checked ~ .ba-reiter label:nth-child(3) {
  color: var(--dark); background: #fff; border-color: #fff;
}
.bauauf-dunkel .ba-li-mass { color: rgba(255,255,255,.42); }
.bauauf-dunkel .ba-legende strong { color: #fff; }
.bauauf-dunkel .ba-legende p { color: rgba(255,255,255,.62); }
.bauauf-dunkel .ba-legende li:hover .ba-li-mass { color: rgba(255,255,255,.9); }
.bauauf-dunkel .ba-fuss { color: rgba(255,255,255,.4); }
.bauauf-dunkel .ba-stapel { box-shadow: 0 20px 50px -22px rgba(0,0,0,.9); }
.bauauf-dunkel .ba-zeichnung figcaption { color: rgba(255,255,255,.35); }
.bauauf-dunkel .ba-band[data-mat="belag"]    { background: linear-gradient(180deg,#ffffff,#d8dce0); }
.bauauf-dunkel .ba-band[data-mat="kleber"]   { background: repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 3px,rgba(255,255,255,.4) 3px 6px); }
.bauauf-dunkel .ba-band[data-mat="abdicht"]  { background: linear-gradient(180deg,#e21008,#a80604); }
.bauauf-dunkel .ba-band[data-mat="grund"]    { background: rgba(255,255,255,.26); }
.bauauf-dunkel .ba-band[data-mat="spachtel"] { background: rgba(255,255,255,.38); }
.bauauf-dunkel .ba-band[data-mat="entkopp"]  { background: repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 4px,rgba(255,255,255,.36) 4px 8px); }
.bauauf-dunkel .ba-band[data-mat="estrich"]  { background: rgba(255,255,255,.54); }
.bauauf-dunkel .ba-band[data-mat="unter"]    { background: repeating-linear-gradient(-45deg,rgba(255,255,255,.14) 0 5px,rgba(255,255,255,.28) 5px 10px); }

/* Der Stapel baut sich von unten auf — in der Reihenfolge, in der
   die Schichten auf der Baustelle entstehen. */
@keyframes ba-legen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
html.js .bauauf .ba-band { transform-origin: bottom; }
html.js .bauauf.in .ba-band { animation: ba-legen .55s var(--ease) both; }
html.js .bauauf.in .ba-band:nth-last-child(1) { animation-delay: 0s; }
html.js .bauauf.in .ba-band:nth-last-child(2) { animation-delay: .09s; }
html.js .bauauf.in .ba-band:nth-last-child(3) { animation-delay: .18s; }
html.js .bauauf.in .ba-band:nth-last-child(4) { animation-delay: .27s; }
html.js .bauauf.in .ba-band:nth-last-child(5) { animation-delay: .36s; }
html.js .bauauf.in .ba-band:nth-last-child(6) { animation-delay: .45s; }
html.js .bauauf.in .ba-band:nth-last-child(7) { animation-delay: .54s; }
html.js .bauauf.in .ba-band:nth-last-child(8) { animation-delay: .63s; }

@media (max-width: 780px) {
  .ba-radio:nth-of-type(1):checked ~ .ba-panels .ba-panel:nth-child(1),
  .ba-radio:nth-of-type(2):checked ~ .ba-panels .ba-panel:nth-child(2),
  .ba-radio:nth-of-type(3):checked ~ .ba-panels .ba-panel:nth-child(3) {
    grid-template-columns: 1fr; gap: 2rem;
  }
  .ba-zeichnung { position: static; max-width: 14rem; }
  .ba-legende li { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .bauauf.in .ba-band { animation: none !important; }
  .ba-band, .ba-band::after { transition: none !important; }
}


/* ============================================================
   UNTERGRUNDPRUEFUNG
   Jede Zeile beantwortet drei Fragen: was, wie, und was passiert
   ohne. Die dritte ist die, die den Kunden ueberzeugt.
   ============================================================ */

.pruef { border-top: 1px solid var(--line); }
.pruef-zeile {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 15rem) minmax(0, 1fr);
  grid-template-areas: "nr kopf text" ". risiko risiko";
  gap: .9rem 1.75rem;
  padding-block: 1.7rem; border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease);
}
.pruef-zeile:hover { background: var(--bg-soft); }
.pruef-nr {
  grid-area: nr; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--red); font-variant-numeric: tabular-nums; padding-top: .2rem;
}
.pruef-kopf { grid-area: kopf; }
.pruef-kopf strong { display: block; font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; }
.pruef-wie {
  display: inline-block; margin-top: .35rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.pruef-text { grid-area: text; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.pruef-risiko {
  grid-area: risiko; position: relative; padding-left: 1rem;
  font-size: .89rem; line-height: 1.55; color: var(--ink-soft);
}
.pruef-risiko i {
  position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px;
  background: var(--red); opacity: .55; border-radius: 1px;
}
@media (max-width: 820px) {
  .pruef-zeile {
    grid-template-columns: 2.2rem 1fr;
    grid-template-areas: "nr kopf" ". text" ". risiko";
    gap: .6rem 1rem;
  }
}


/* ============================================================
   VERLEGEVERFAHREN
   ============================================================ */

.verf { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.verf-karte {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: .6rem;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease);
}
.verf-karte:hover {
  transform: translateY(-4px); border-color: transparent;
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 26px 52px -24px rgba(16,24,40,.36);
}
.verf-mass {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red);
}
.verf-karte h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.verf-karte > p { font-size: .93rem; color: var(--ink-soft); }
.verf-wann {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--ink-faint); line-height: 1.55;
}


/* ============================================================
   MATERIALKOMPATIBILITAET — als Kette gelesen
   ============================================================ */

.komp { display: grid; gap: 0; position: relative; }
.komp-glied {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem;
  padding-block: 1.35rem; position: relative;
}
.komp-glied + .komp-glied { border-top: 1px solid var(--line); }
.komp-marke { position: relative; display: flex; justify-content: center; }
.komp-marke span {
  position: relative; z-index: 1;
  display: grid; place-content: center; width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: 50%; background: #fff; border: 1px solid var(--line-strong);
  font-size: .74rem; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
/* Die durchgehende Linie: sie macht sichtbar, dass es eine Kette ist. */
.komp-glied::before {
  content: ''; position: absolute; left: calc(1.625rem - .5px); top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.komp-glied:first-child::before { top: 50%; }
.komp-glied:last-child::before  { bottom: 50%; }
.komp-glied strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; }
.komp-glied p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); margin-top: .3rem; }
.komp-glied:hover .komp-marke span { background: var(--red); color: #fff; border-color: var(--red); }
@media (max-width: 600px) {
  .komp-glied { grid-template-columns: 2.6rem 1fr; gap: .9rem; }
  .komp-marke span { width: 1.9rem; height: 1.9rem; font-size: .68rem; }
  .komp-glied::before { left: calc(1.3rem - .5px); }
}


/* ============================================================
   TECHNISCHE GRUNDLAGEN
   ============================================================ */

.norm { display: flex; flex-wrap: wrap;
        background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.norm > * { flex: 1 1 18rem; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.norm-zeile {
  background: #fff; padding: 1.4rem 1.5rem; display: grid; gap: .5rem;
  transition: background .35s var(--ease);
}
.norm-zeile:hover { background: var(--bg-soft); }
.norm-nr {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.norm-zeile strong { display: block; font-size: 1rem; font-weight: 600; }
.norm-zeile p { font-size: .88rem; line-height: 1.55; color: var(--ink-soft); margin-top: .2rem; }


/* ============================================================
   ANGEBOTSERSTELLUNG
   ============================================================ */

.ang { border-top: 1px solid var(--line); }
.ang-zeile {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem;
  padding-block: 1.5rem; border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease);
}
.ang-zeile:hover { background: var(--bg-soft); }
.ang-nr {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--red);
  font-variant-numeric: tabular-nums; padding-top: .25rem;
}
.ang-zeile strong { display: block; font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; }
.ang-zeile p { font-size: .95rem; line-height: 1.6; color: var(--ink-soft); margin-top: .35rem; max-width: 54rem; }
/* Randnotiz, kein zweiter Kasten. Gleiche Marke wie .pruef-risiko —
   eine duenne rote Haarlinie neben dem Text. Als Karte mit Farbkante
   haette der Einschub optisch mehr Gewicht bekommen als die Liste,
   auf die er sich bezieht. */
.ang-ehrlich {
  position: relative; margin-top: 2rem; padding-left: 1.1rem;
  font-size: .95rem; line-height: 1.6; color: var(--ink-soft); max-width: 54rem;
}
.ang-ehrlich::before {
  content: ''; position: absolute; left: 0; top: .35em; bottom: .35em; width: 2px;
  background: var(--red); opacity: .55; border-radius: 1px;
}
.ang-ehrlich strong { color: var(--ink); font-weight: 600; }


/* ============================================================
   KETTE — kontrollieren, dokumentieren, melden, koordinieren
   ============================================================ */

.kette { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.kette-glied {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.35rem, 2.4vw, 1.85rem);
  display: grid; gap: .5rem; align-content: start;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease);
}
.kette-glied:hover {
  transform: translateY(-4px); border-color: transparent;
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 24px 48px -22px rgba(16,24,40,.34);
}
.kette-nr { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--red); }
.kette-glied strong { font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; }
.kette-glied p { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
/* Der Pfeil zwischen den Gliedern — nur dort, wo nebeneinander. */
.kette-glied + .kette-glied::before {
  content: ''; position: absolute; left: -.72rem; top: 50%; width: .45rem; height: .45rem;
  border-right: 1.5px solid var(--line-strong); border-top: 1.5px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 860px) { .kette-glied + .kette-glied::before { display: none; } }
.kette-rot .kette-glied { background: var(--bg-soft); }
.kette-rot .kette-glied:hover { background: #fff; }


/* ============================================================
   PERSONEN
   Der Platzhalter bleibt sichtbar bewusst leer: ein generiertes
   Gesicht unter einem echten Namen waere eine erfundene Person.
   ============================================================ */

.person { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: start; }
.person-bild .ph { margin: 0; }
.person-text .eyebrow { display: block; margin-bottom: .7rem; }
.person-text h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.person-text .lead { margin-top: .9rem; }
.person-liste { list-style: none; display: grid; gap: .5rem; margin-top: 1.5rem; }
.person-liste li { font-size: .93rem; color: var(--ink-soft); padding-left: 1.15rem; position: relative; }
.person-liste li::before {
  content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 1.5px; background: var(--red);
}
@media (max-width: 800px) {
  .person { grid-template-columns: 1fr; }
  .person-bild { max-width: 17rem; }
}


/* ============================================================
   WERDEGANG
   ============================================================ */

.vita { position: relative; display: grid; gap: 0; max-width: 46rem; }
.vita-zeile {
  position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: 1.1rem;
  padding-block: 1.15rem;
}
.vita-punkt {
  position: relative; z-index: 1; justify-self: center; align-self: start;
  width: 10px; height: 10px; border-radius: 50%; margin-top: .5rem;
  background: #fff; border: 2px solid var(--line-strong);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.vita-zeile::before {
  content: ''; position: absolute; left: calc(1.125rem - .5px); top: 0; bottom: 0; width: 1px; background: var(--line);
}
.vita-zeile:first-child::before { top: 1.15rem; }
.vita-zeile:last-child::before { bottom: calc(100% - 1.9rem); }
.vita-zeile strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; }
.vita-zeile p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); margin-top: .25rem; }
.vita-zeile:hover .vita-punkt { background: var(--red); border-color: var(--red); }


/* ============================================================
   IMMOBILIEN AUF DER STARTSEITE
   Bewusst als eigener, abgesetzter Block — nicht als zweite
   Saeule neben dem Bau. Bau ist die Hauptseite.
   ============================================================ */

.bereich-kopf { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.bereich-marke {
  display: inline-block; margin-bottom: 1rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); padding: .4rem .8rem; border-radius: 6px;
  background: var(--bg-mute);
}
.bereich-kopf .lead { margin-top: 1rem; }
.bereich-fuss {
  margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line-strong);
}
.bereich-fuss p { font-size: .95rem; color: var(--ink-soft); max-width: 46rem; }


/* ============================================================
   FACHHINWEIS — die Bruecke zwischen Uebersicht und Fachthema
   ============================================================ */

.fach-hinweis {
  margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem;
  padding: clamp(1.35rem, 2.4vw, 1.85rem) clamp(1.35rem, 2.4vw, 2rem);
  border-radius: var(--radius); background: var(--bg-soft);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
/* Rote Kante oben ueber die volle Breite — dieselbe Marke wie .zg-kante
   und .step, nur ohne Hover. Eine dicke Farbkante an der linken Seite
   waere ein Fremdkoerper: die Seite setzt Rot sonst ausschliesslich als
   duenne waagerechte Linie oder als Eyebrow ein. */
.fach-hinweis::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--red);
}
.fach-hinweis .eyebrow { display: block; margin-bottom: .5rem; }
.fach-hinweis strong { display: block; font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; }
.fach-hinweis p { font-size: .93rem; line-height: 1.55; color: var(--ink-soft); margin-top: .35rem; max-width: 44rem; }
.fach-hinweis .btn { flex: none; }


/* ============================================================
   DETAILBLOECKE UND LEISTUNGSLISTEN AUF DEN UNTERSEITEN
   ============================================================ */

.det { display: flex; flex-wrap: wrap;
       background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.det > * { flex: 1 1 19rem; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.det-block { background: #fff; padding: clamp(1.5rem, 2.6vw, 2.1rem); transition: background .35s var(--ease); }
.det-block:hover { background: var(--bg-soft); }
.det-block h3 { font-size: clamp(1.05rem, .95rem + .45vw, 1.28rem); }
.det-block p { font-size: .94rem; line-height: 1.65; color: var(--ink-soft); margin-top: .6rem; }

.leist-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .1rem 2rem; }
.leist-liste li {
  position: relative; padding: .8rem 0 .8rem 1.6rem; font-size: 1rem; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.leist-liste li::before {
  content: ''; position: absolute; left: 0; top: 1.35em; width: 9px; height: 1.5px; background: var(--red);
}


/* ============================================================
   KLEINIGKEITEN
   ============================================================ */

.ctaband-btns, .statement-btns { display: flex; gap: .7rem; flex-wrap: wrap; }
.statement-btns { margin-top: 2rem; justify-content: center; }
/* Acht Schritte, feste Spaltenzahl statt auto-fit: dadurch sind beide
   Reihen immer voll und es bleibt keine Leerstelle am Ende stehen. */
.steps-7 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .steps-7 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .steps-7 { grid-template-columns: 1fr; } }
.sec-dark .sec-head .lead { color: rgba(255,255,255,.72); }
.sec-dark .eyebrow { color: rgba(255,255,255,.55); }
.faq .lead a, .sec-head .lead a { color: var(--red); font-weight: 550; }
.faq .lead a:hover, .sec-head .lead a:hover { text-decoration: underline; }

/* ============================================================
   ABDICHTUNG
   Eigener Abschnitt, weil der Kunde ihn im Audio ausdruecklich
   hervorgehoben hat. Oben was „gesamthaft" konkret heisst, unten
   die Beanspruchungsklassen als echte Tabelle — die Zuordnung
   Klasse zu Umfang ist tabellarisch, nicht erzaehlerisch.
   ============================================================ */

.abd {
  display: flex; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.abd-punkt {
  flex: 1 1 17rem; padding: clamp(1.35rem, 2.4vw, 1.85rem);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  transition: background .35s var(--ease);
}
.abd-punkt:hover { background: var(--bg-soft); }
.abd-punkt strong {
  display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em;
  position: relative; padding-left: 1.1rem;
}
.abd-punkt strong::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 8px; height: 2px; background: var(--red); border-radius: 1px;
}
.abd-punkt p { font-size: .91rem; line-height: 1.6; color: var(--ink-soft); margin-top: .45rem; }

.abd-tabelle-rahmen { margin-top: 1.5rem; overflow-x: auto; }
.abd-tabelle {
  width: 100%; min-width: 44rem; border-collapse: collapse;
  font-size: .91rem; text-align: left;
}
.abd-tabelle caption {
  caption-side: bottom; padding-top: 1rem; text-align: left;
  font-size: .82rem; line-height: 1.55; color: var(--ink-faint); max-width: 52rem;
}
.abd-tabelle th, .abd-tabelle td {
  padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.abd-tabelle thead th {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--line-strong);
}
.abd-tabelle tbody th {
  font-weight: 700; color: var(--red); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.abd-tabelle td { color: var(--ink-soft); }
.abd-stufe { font-weight: 600; color: var(--ink) !important; white-space: nowrap; }
.abd-tabelle tbody tr { transition: background .3s var(--ease); }
.abd-tabelle tbody tr:hover { background: var(--bg-soft); }

/* ============================================================
   SYSTEM-RASTER
   Sechs nummerierte Schritte. Feste Spaltenzahl statt auto-fit:
   sechs Elemente gehen in drei Spalten glatt auf, bei auto-fit
   bliebe je nach Breite die zweite Reihe halb leer.
   ============================================================ */

.sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
       background: #fff; border: 1px solid var(--line);
       border-radius: var(--radius); overflow: hidden; }
.sys-feld {
  background: #fff; padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  display: grid; gap: .4rem; align-content: start;
  transition: background .35s var(--ease);
}
.sys-feld:hover { background: var(--bg-soft); }
.sys-nr {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--red);
  font-variant-numeric: tabular-nums;
}
.sys-feld strong { font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; }
.sys-feld p { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) { .sys { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sys { grid-template-columns: 1fr; } }

/* ---------- Referenzprojekte (rendert erst mit echten Bildern) ---------- */
.ref { display: grid; gap: 2.5rem; }
.ref-karte { display: grid; gap: 1.5rem; }
.ref-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ref-bilder figure { margin: 0; }
.ref-bilder img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
                  border-radius: var(--radius); background: var(--bg-mute); }
.ref-bilder figcaption {
  margin-top: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.ref-text h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); margin-top: .4rem; }
.ref-text p { font-size: .95rem; color: var(--ink-soft); margin-top: .5rem; max-width: 46rem; }
@media (max-width: 700px) { .ref-bilder { grid-template-columns: 1fr; } }

/* ============================================================
   PROJEKT-CHECK
   Vier Schritte statt eines leeren Textfelds. Wer nicht weiß, wie
   er sein Anliegen formulieren soll, klickt sich durch.
   ============================================================ */

.pc { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }

.pc-reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: .5rem;
             border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.pc-reiter-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1rem; border: 0; border-radius: var(--radius); cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--ink-soft);
  background: transparent; transition: background .3s var(--ease), color .3s var(--ease);
}
.pc-reiter-knopf svg { width: 1.15em; height: 1.15em; }
.pc-reiter-knopf:hover { color: var(--ink); }
.pc-reiter-knopf.aktiv { background: var(--ink); color: #fff; box-shadow: 0 6px 18px -8px rgba(16,24,40,.5); }

.pc-tafel { display: none; padding: clamp(1.25rem, 3vw, 2.25rem); }
.pc-tafel.aktiv { display: block; }

.pc-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pc-schritt, .pc-marke {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.pc-schritt { color: var(--red); }
.pc-marke { color: var(--ink-faint); }
.pc-balken { height: 2px; background: var(--line); margin: .7rem 0 1.75rem; overflow: hidden; }
.pc-balken i { display: block; height: 100%; background: var(--red);
               transform-origin: left; transform: scaleX(.25);
               transition: transform .5s var(--ease); }

.pc-seite { display: none; }
.pc-seite.aktiv { display: block; animation: pc-auf .45s var(--ease) both; }
@keyframes pc-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pc-seite h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); letter-spacing: -.02em; }
.pc-hilfe { font-size: .95rem; color: var(--ink-soft); margin-top: .45rem; }

.pc-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
             gap: .7rem; margin-top: 1.25rem; }
/* Acht Karten: feste vier Spalten, sonst bricht es auf 5 + 3 um und
   die zweite Reihe steht halb leer. */
.pc-raster-gross { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .pc-raster-gross { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pc-raster-gross { grid-template-columns: 1fr; } }
/* .btn setzt display:inline-flex und wuerde [hidden] aushebeln. */
.pc [hidden] { display: none !important; }

.pc-karte {
  text-align: left; cursor: pointer; font-family: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; display: grid; gap: .25rem; align-content: start;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pc-karte:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.pc-karte strong { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pc-unter { font-size: .84rem; color: var(--ink-soft); }
.pc-ikon { display: inline-grid; place-content: center; width: 2.4rem; height: 2.4rem;
           border-radius: 8px; background: var(--bg-soft); margin-bottom: .55rem;
           transition: background .25s var(--ease), color .25s var(--ease); color: var(--ink); }
.pc-icon { width: 1.35rem; height: 1.35rem; display: block; }
.pc-karte.gewaehlt { border-color: var(--red); background: #fff;
                     box-shadow: 0 0 0 1px var(--red), 0 14px 34px -18px rgba(202,8,5,.5); }
.pc-karte.gewaehlt .pc-ikon { background: var(--red); color: #fff; }
.pc-karte.gewaehlt strong { color: var(--red); }
.pc-karte:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.pc-felder { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 40rem) { .pc-felder { grid-template-columns: 1fr 1fr; }
                            .pc-felder .field:nth-child(n+3) { grid-column: 1 / -1; } }

.pc-zusammenfassung { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: var(--radius);
                      background: var(--bg-soft); border: 1px solid var(--line); display: grid; gap: .4rem; }
.pc-zus-titel { font-size: .7rem; font-weight: 700; letter-spacing: .13em;
                text-transform: uppercase; color: var(--red); margin-bottom: .2rem; }
.pc-zusammenfassung div { display: flex; gap: .75rem; font-size: .9rem; }
.pc-zusammenfassung dt { color: var(--ink-faint); min-width: 6rem; }
.pc-zusammenfassung dd { margin: 0; color: var(--ink); font-weight: 550; }

.pc-fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
           margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pc-fuss-rechts { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; flex-wrap: wrap; }
.pc-anruf { font-size: .88rem; color: var(--ink-soft); }
.pc-anruf:hover { color: var(--red); }
.pc-fuss .btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.pc-fuss .btn[disabled]:hover { background: var(--red); transform: none; }

.form-blank { background: none; border: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .pc-seite.aktiv { animation: none; }
  .pc-karte, .pc-balken i { transition: none !important; }
}

/* Fehlermeldung im Projekt-Check, falls das Absenden scheitert */
.pc-fehler { margin-top: .9rem !important; padding-top: .8rem;
             border-top: 1px solid var(--line); color: var(--red) !important;
             font-size: .9rem; }
.pc-fehler a { color: var(--red); font-weight: 600; text-decoration: underline; }