:root {
  --charcoal: #171714;
  --charcoal-soft: #22221e;
  --ochre: #b87924;
  --ochre-text: #8a5714;
  --ochre-bright: #cd8216;
  --ivory: #fbf7f0;
  --bone: #f2e9dc;
  --sand: #e8ddce;
  --blush: #efe5da;
  --line: #d7c3aa;
  --line-art: #b9a184;
  --ink: #161613;
  --muted: #5e5a53;
  --font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --shell: 1360px;
  --gutter: max(24px, calc((100vw - var(--shell)) / 2));
  --h1: clamp(2.55rem, 4.2vw, 3.9rem);
  --h2: clamp(2.15rem, 3.2vw, 3.05rem);
  --h3: clamp(1.5rem, 1.75vw, 1.8rem);
  --step--1: .8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;
  --step-6: 3.815rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 98px; overscroll-behavior: none; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
body.menu-open { overflow: hidden; }
button, a, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { -webkit-touch-callout: none; user-select: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: white;
  background: var(--charcoal);
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.section-paper {
  position: relative;
  background-color: var(--ivory);
  background-image: url("assets/texture/grain/paper-grain-light.webp");
  background-size: 128px 128px;
}
.section-paper::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: rgba(251, 247, 240, .86);
}
.section-paper > * { position: relative; z-index: 1; }
.eyebrow {
  margin: 0 0 1.15rem;
  color: #f5f0e9;
  font-family: var(--font-display);
  font-size: clamp(.92rem, 1.3vw, 1.12rem);
  letter-spacing: .16em;
  line-height: 1.55;
  text-transform: uppercase;
}
.eyebrow b { color: var(--ochre-bright); font-weight: 400; }
.eyebrow.ink { color: var(--ochre-text); }
.section-title, .content-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .98;
  text-transform: uppercase;
}
.section-title { text-align: center; font-size: var(--h2); }
.content-title { max-width: 16ch; font-size: var(--h2); }
h1.content-title { max-width: 19ch; font-size: var(--h1); }
.content-title.light { color: var(--ivory); }
.heading-stroke, .brush-underline {
  display: block;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.underline-long { background-image: url("assets/accents/underlines/underline-long-trim.webp"); }
.underline-medium { background-image: url("assets/accents/underlines/underline-medium-trim.webp"); }
.underline-short { background-image: url("assets/accents/underlines/underline-short-trim.webp"); }
.heading-stroke { width: clamp(180px, 24vw, 340px); margin: 3px auto 2.2rem; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  padding: 12px var(--gutter);
  background: var(--ivory);
}
.brand { display: block; width: 150px; }
.brand img { width: 100%; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 43px); }
.desktop-nav a, .nav-parent {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: none;
  font-family: var(--font-display);
  font-size: 1.06rem;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.desktop-nav a:hover, .desktop-nav a:focus-visible, .nav-parent:hover, .nav-parent:focus-visible { color: var(--ochre); }
.nav-group { position: relative; }
.nav-parent span { margin-left: 5px; color: var(--ochre-text); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: -22px;
  min-width: 270px;
  padding: 12px;
  border-top: 3px solid var(--ochre);
  background: var(--charcoal);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-7px);
}
.nav-dropdown a { min-height: 42px; padding: 7px 11px; color: var(--ivory); font-family: var(--font-body); font-size: .93rem; text-transform: none; }
/* Zwischen Knopf und Klappe lagen 6 px Luft. Die Maus verliess dabei die
   Gruppe, der Hover brach ab und die Klappe verschwand, bevor man einen
   Unterpunkt erreichte. Zwei Massnahmen: eine unsichtbare Bruecke ueber die
   Luecke, und eine Schliessverzoegerung, die einen kurzen Ausrutscher verzeiht. */
.nav-group::after { content: ""; position: absolute; top: 100%; left: -22px; width: 270px; height: 14px; }
.nav-dropdown { transition: transform .18s ease .28s, opacity .18s ease .28s; }
.nav-parent[aria-expanded="true"] + .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition-delay: 0s;
}
.menu-toggle {
  display: none;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-icon { display: grid; gap: 6px; width: 34px; }
.menu-icon i { display: block; height: 3px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon i:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.mobile-menu {
  position: fixed;
  z-index: 50;
  inset: 82px 0 0;
  min-height: calc(100dvh - 82px);
  padding: 24px clamp(24px, 7vw, 50px) max(32px, env(safe-area-inset-bottom));
  overflow-y: auto;
  color: var(--ivory);
  background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp");
}
.mobile-menu nav { display: grid; }
.mobile-menu nav > a, .mobile-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--ivory);
  background: none;
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.mobile-subnav { display: grid; padding: 10px 0 15px 18px; border-bottom: 1px solid rgba(255,255,255,.14); }
.mobile-subnav a { min-height: 46px; display: flex; align-items: center; color: #ded3c7; text-decoration: none; }
.mobile-contact { display: grid; gap: 3px; margin-top: 32px; }
.mobile-contact a { color: var(--ochre-bright); font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; }
.mobile-contact span { color: #bdb6ac; }

/* Hero */
.hero {
  position: relative;
  display: block;
  min-height: 810px;
  overflow: hidden;
  background: var(--ivory);
}
.hero-dark {
  position: relative;
  z-index: 3;
  width: min(58%, calc(var(--gutter) + 660px));
  min-height: 810px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 56px 62px var(--gutter);
  color: var(--ivory);
  background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp");
}
.hero-dark::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 100%;
  display: block;
  width: 104px;
  content: "";
  pointer-events: none;
  background: url("assets/backgrounds/brush/edge-vertical-right.webp") left center / 100% 100% no-repeat;
}
.hero-display {
  margin: 0;
  color: #f7f4ef;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7.15vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: .9;
  text-transform: uppercase;
}
.hero-display span { color: var(--ochre-bright); }
.brush-underline { width: min(430px, 92%); height: 34px; margin: 14px 0 12px; background-position: left center; }
.hero-subline { margin: 0 0 29px; font-size: clamp(1rem, 1.5vw, 1.3rem); }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  padding: 13px 26px;
  font-family: var(--font-display);
  font-size: 1.24rem;
  letter-spacing: .06em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(.98); }
/* Weiss auf dem hellen Verlaufsscheitel mass 2,83:1. Der Verlauf bleibt,
   er liegt jetzt im dunklen Ast der Ockerfamilie. */
.button-primary { color: white; background: linear-gradient(100deg, #8a5714, #a2660f, #8a5714); background-size: 160% 100%; }
.hero-cta { align-self: flex-start; min-width: 330px; }
.hero-light { position: absolute; inset: 0; min-width: 0; overflow: hidden; background: var(--ivory); }
.hero-scene { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 73% center; mix-blend-mode: multiply; opacity: .75; }
.hero-light picture { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.hero-monique { position: absolute; right: clamp(30px, 7vw, 140px); bottom: -2px; width: auto; height: 94%; object-fit: contain; object-position: bottom right; transform:none; }

/* Trust + services */
.hero-copy-section { padding: 74px 0 66px; }
.hero-copy-grid, .content-block { display: grid; gap: clamp(32px, 3.4vw, 62px); align-items: start; }
/* Feedback 15.09.2026: Ueberschriften sollen den waagerechten Raum ihrer
   Spalte nutzen statt in fuenf kurzen Zeilen zu stapeln. */
.hero-copy-grid .content-title, .content-block .content-title { max-width: 28ch; }
.hero-copy-body, .long-copy { max-width: 62ch; font-size: 1.14rem; }
.hero-copy-body p:first-child, .long-copy p:first-child { margin-top: 0; }
.brand-statement { color: var(--ochre); font-family: var(--font-display); font-size: 2rem; letter-spacing: .04em; text-transform: uppercase; }
.inline-contact-links, .form-contact-links, .direct-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
/* Kontaktwege sind Buttons, keine Textlinks. Unterschieden wird nach Ziel,
   nicht nach Position: der Anruf ist der direkteste Weg und traegt deshalb die
   Flaeche, WhatsApp und die Anfrage stehen als Umriss gleichwertig daneben. */
.inline-contact-links a, .form-contact-links a, .direct-links a {
  min-height: 48px; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border: 1px solid currentColor;
  color: var(--ochre-text); font-weight: 600; letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.inline-contact-links a::before, .form-contact-links a::before, .direct-links a::before {
  content: ""; flex: 0 0 auto; width: 19px; height: 19px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.inline-contact-links a:not([href]):before { content: none; }
.inline-contact-links a[href^="tel:"], .form-contact-links a[href^="tel:"], .direct-links a[href^="tel:"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M221.59%2C160.3l-47.24-21.17a14%2C14%2C0%2C0%2C0-13.28%2C1.22%2C4.81%2C4.81%2C0%2C0%2C0-.56.42l-24.69%2C21a1.88%2C1.88%2C0%2C0%2C1-1.68.06c-15.87-7.66-32.31-24-40-39.65a1.91%2C1.91%2C0%2C0%2C1%2C0-1.68l21.07-25a6.13%2C6.13%2C0%2C0%2C0%2C.42-.58%2C14%2C14%2C0%2C0%2C0%2C1.12-13.27L95.73%2C34.49a14%2C14%2C0%2C0%2C0-14.56-8.38A54.24%2C54.24%2C0%2C0%2C0%2C34%2C80c0%2C78.3%2C63.7%2C142%2C142%2C142a54.25%2C54.25%2C0%2C0%2C0%2C53.89-47.17A14%2C14%2C0%2C0%2C0%2C221.59%2C160.3ZM176%2C210C104.32%2C210%2C46%2C151.68%2C46%2C80A42.23%2C42.23%2C0%2C0%2C1%2C82.67%2C38h.23a2%2C2%2C0%2C0%2C1%2C1.84%2C1.31l21.1%2C47.11a2%2C2%2C0%2C0%2C1%2C0%2C1.67L84.73%2C113.15a4.73%2C4.73%2C0%2C0%2C0-.43.57%2C14%2C14%2C0%2C0%2C0-.91%2C13.73c8.87%2C18.16%2C27.17%2C36.32%2C45.53%2C45.19a14%2C14%2C0%2C0%2C0%2C13.77-1c.19-.13.38-.27.56-.42l24.68-21a1.92%2C1.92%2C0%2C0%2C1%2C1.6-.1l47.25%2C21.17a2%2C2%2C0%2C0%2C1%2C1.21%2C2A42.24%2C42.24%2C0%2C0%2C1%2C176%2C210Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.inline-contact-links a[href*="wa.me"], .form-contact-links a[href*="wa.me"], .direct-links a[href*="wa.me"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M186.68%2C146.63l-32-16a6%2C6%2C0%2C0%2C0-6%2C.38L133%2C141.46A42.49%2C42.49%2C0%2C0%2C1%2C114.54%2C123L125%2C107.33a6%2C6%2C0%2C0%2C0%2C.38-6l-16-32A6%2C6%2C0%2C0%2C0%2C104%2C66a38%2C38%2C0%2C0%2C0-38%2C38%2C86.1%2C86.1%2C0%2C0%2C0%2C86%2C86%2C38%2C38%2C0%2C0%2C0%2C38-38A6%2C6%2C0%2C0%2C0%2C186.68%2C146.63ZM152%2C178a74.09%2C74.09%2C0%2C0%2C1-74-74%2C26%2C26%2C0%2C0%2C1%2C22.42-25.75l12.66%2C25.32-10.39%2C15.58a6%2C6%2C0%2C0%2C0-.54%2C5.63%2C54.43%2C54.43%2C0%2C0%2C0%2C29.07%2C29.07%2C6%2C6%2C0%2C0%2C0%2C5.63-.54l15.58-10.39%2C25.32%2C12.66A26%2C26%2C0%2C0%2C1%2C152%2C178ZM128%2C26A102%2C102%2C0%2C0%2C0%2C38.35%2C176.69L26.73%2C211.56a14%2C14%2C0%2C0%2C0%2C17.71%2C17.71l34.87-11.62A102%2C102%2C0%2C1%2C0%2C128%2C26Zm0%2C192a90%2C90%2C0%2C0%2C1-45.06-12.08%2C6.09%2C6.09%2C0%2C0%2C0-3-.81%2C6.2%2C6.2%2C0%2C0%2C0-1.9.31L40.65%2C217.88a2%2C2%2C0%2C0%2C1-2.53-2.53L50.58%2C178a6%2C6%2C0%2C0%2C0-.5-4.91A90%2C90%2C0%2C1%2C1%2C128%2C218Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.inline-contact-links a[href^="mailto:"], .direct-links a[href^="mailto:"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M224%2C50H32a6%2C6%2C0%2C0%2C0-6%2C6V192a14%2C14%2C0%2C0%2C0%2C14%2C14H216a14%2C14%2C0%2C0%2C0%2C14-14V56A6%2C6%2C0%2C0%2C0%2C224%2C50ZM208.58%2C62%2C128%2C135.86%2C47.42%2C62ZM216%2C194H40a2%2C2%2C0%2C0%2C1-2-2V69.64l86%2C78.78a6%2C6%2C0%2C0%2C0%2C8.1%2C0L218%2C69.64V192A2%2C2%2C0%2C0%2C1%2C216%2C194Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.inline-contact-links a[href^="#"], .form-contact-links a[href^="#"], .direct-links a[href^="#"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M220.24%2C132.24l-72%2C72a6%2C6%2C0%2C0%2C1-8.48-8.48L201.51%2C134H40a6%2C6%2C0%2C0%2C1%2C0-12H201.51L139.76%2C60.24a6%2C6%2C0%2C0%2C1%2C8.48-8.48l72%2C72A6%2C6%2C0%2C0%2C1%2C220.24%2C132.24Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.inline-contact-links a[href^="tel:"] {
  color: #fff; border-color: transparent;
  background: linear-gradient(100deg, #8a5714, #a2660f, #8a5714); background-size: 160% 100%;
}
.inline-contact-links a:hover, .form-contact-links a:hover, .direct-links a:hover { transform: translateY(-1px); }
.inline-contact-links a:not([href^="tel:"]):hover { background: rgba(184, 121, 36, .1); }
.inline-contact-links a[href^="tel:"]:hover { background-position: 100% 0; }
.services { padding: 52px 0 34px; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.service-card { min-height: 305px; display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 16px 28px 22px; text-align: center; border-right: 1px solid var(--line); }
.service-card:last-child { border-right: 0; }
.service-card > img { width: 92px; height: 92px; object-fit: contain; filter: invert(48%) sepia(71%) saturate(690%) hue-rotate(357deg) brightness(88%) contrast(92%); }
.service-card > div { min-width: 0; }
.service-card h3 { margin: 0 0 7px; font-family: var(--font-display); font-size: var(--h3); font-weight: 400; letter-spacing: .01em; line-height: .98; text-transform: uppercase; }
.service-card p { max-width: 22ch; margin: 0 auto; font-size: 1rem; line-height: 1.45; }
.quote-card {
  position: relative;
  min-height: 205px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 25px;
  margin: 15px 0 0;
  padding: 28px clamp(175px, 18vw, 250px) 28px 38px;
  overflow: hidden;
  border-radius: 8px;
  background: #eee5da;
}
.quote-mark { align-self: start; color: var(--ochre); font-family: Georgia, serif; font-size: 6rem; line-height: 1; }
.quote-card blockquote { max-width: 38ch; margin: 0; font-size: 1.47rem; font-weight: 600; line-height: 1.3; }
.quote-card figcaption { grid-column: 2; align-self: start; font-size: .95rem; }
.quote-card figcaption span { width: 35px; height: 2px; display: block; margin: -10px 0 9px; background: var(--ochre); }
.quote-plant { position: absolute; right: 22px; bottom: -40px; width: clamp(165px, 18vw, 245px); height: auto; }

/* Conversational form */
.estimate {
  position: relative;
  /* Kein Polster oben: das dunkle Panel soll buendig an der Sektionskante
     beginnen. Der Abstand sitzt stattdessen an der linken Textspalte. */
  padding: 0;
  background: var(--ivory) url("assets/texture/grain/paper-grain-light.webp");
}
/* Die Sektionsueberschrift steht in der linken Spalte, nicht mehr mittig
   ueber dem Raster (Feedback 15.09.2026). Damit faellt die zweite
   Ueberschrift im Textblock weg und die Spalte beginnt mit ihrem Titel. */
.estimate-copy { padding-right: clamp(24px, 5vw, 78px); }
.estimate-copy .section-title { margin: 0; text-align: left; }
.estimate-copy .heading-stroke { margin: 6px 0 22px; }
.estimate-copy p { max-width: 62ch; }
.estimate-layout { display: grid;
  grid-template-rows: auto minmax(0, 1fr); align-items: stretch; min-height: 700px; margin-top: 0; }
/* Der Einstiegstext sitzt jetzt IM Raster, nicht darueber. Vorher begann das
   dunkle Panel erst auf Hoehe des ersten Formularschritts, und rechts neben
   dem Einstieg stand eine leere Flaeche ueber die halbe Sektionsbreite. */
.estimate-layout > .estimate-copy { grid-column: 1; grid-row: 1; }
.estimate-layout > .form-intro { grid-column: 2; grid-row: 1 / -1; }
.form-intro {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  min-height: 700px;
  color: var(--ivory);
  background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp");
}
.form-intro::after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 78px;
  content: "";
  pointer-events: none;
  background: url("assets/backgrounds/brush/edge-vertical-left.webp") right center / 100% 100% no-repeat;
}
.form-intro::before {
  display: none;
}
.form-intro-copy { position: relative; z-index: 6; padding: clamp(50px, 5.2vw, 78px) 28px 0 44px; }
.intro-title { margin: 0; font-family: var(--font-display); font-size: clamp(2.1rem, 2.7vw, 2.8rem); letter-spacing: .02em; line-height: 1.02; text-transform: uppercase; }
.intro-title span { color: var(--ochre-bright); }
/* Monique fuellt die dunkle Flaeche, statt klein in der Ecke zu stehen. */
.form-portrait { position: absolute; z-index: 4; right: 0; bottom: 70px; width: 100%; max-width: min(100%, 560px); height: auto; }
.form-intro-note { position: absolute; z-index: 7; left: 34px; right: 30px; bottom: 22px; margin: 0; font-size: .93rem; line-height: 1.35; }
.conversation-form { grid-column: 1; grid-row: 2; min-width: 0; padding: 30px 78px 46px 0; contain: content; }
.fallback-form { display: none; }
.no-js .estimate-layout { display: block; min-height: 0; }
.no-js .conversation-form, .no-js .form-intro { display: none; }
.no-js .fallback-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
.no-js .fallback-form h3, .no-js .fallback-form .consent, .no-js .fallback-form .button, .no-js .fallback-form .form-contact-links, .no-js .fallback-form .prototype-note { grid-column: 1 / -1; }
.fallback-form h3 { margin: 0; font-family: var(--font-display); font-size: var(--h3); font-weight: 400; text-transform: uppercase; }
.fallback-form label:not(.consent) { display: grid; gap: 6px; font-weight: 600; }
.form-progress { display: flex; align-items: center; gap: 25px; margin-bottom: 20px; }
.form-progress strong { color: var(--ochre-text); font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.progress-track { position: relative; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 0; }
.progress-track::before { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; content: ""; background: #c9c4bc; transform: translateY(-50%); }
.progress-track i { position: relative; z-index: 1; width: 18px; height: 18px; border: 2px solid #bdb8b0; border-radius: 50%; background: var(--ivory); }
.progress-track i.active { border-color: var(--ochre); background: var(--ochre); }
.form-error { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid var(--ochre); background: #f5e6d3; font-weight: 600; }
.form-step { min-width: 0; margin: 0; border: 0; padding: 0; opacity: 0; transform: translateY(8px); }
.form-step.is-active { opacity: 1; transform: translateY(0); transition: transform .24s ease, opacity .24s ease; }
.form-step legend { width: 100%; margin: 0 0 20px; padding: 0; font-size: 1.4rem; font-weight: 600; line-height: 1.25; }
.choice-list label, .contact-options label { position: relative; cursor: pointer; }
.choice-list input, .contact-options input { position: absolute; opacity: 0; pointer-events: none; }
.choice-list input:checked + span, .contact-options input:checked + span { border-color: var(--ochre); background: #f2dfc5; }
.choice-list input:focus-visible + span, .contact-options input:focus-visible + span { outline: 3px solid #2f6f9f; outline-offset: 3px; }
.choice-list { display: grid; gap: 8px; }
.choice-list label > span {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 15px;
  background: rgba(251, 247, 240, .62);
}
.choice-list em { color: var(--ochre); font-size: 1.3rem; font-style: normal; }
.choice-list-multiple em::before { content: "+"; }
.choice-list-multiple input:checked + span em::before { content: "✓"; }
.field-label { display: block; margin: 12px 0 6px; font-weight: 600; }
.text-field { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; color: var(--ink); background: rgba(255,255,255,.55); }
.area-slider { max-width:580px; padding:16px 18px 13px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.5); }
.area-value-row { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.area-value { display:flex; align-items:baseline; gap:7px; color:var(--charcoal); }
.area-value strong { font-family:var(--font-display); font-size:clamp(2.25rem, 4vw, 3rem); font-weight:400; letter-spacing:.02em; line-height:.9; }
.area-value span { color:var(--ochre); font-size:1.1rem; font-weight:700; }
.area-number-label { display:grid; gap:4px; color:var(--muted); font-size:.78rem; font-weight:600; }
.area-number-label input { width:108px; min-height:40px; border:1px solid var(--line); border-radius:3px; padding:7px 10px; color:var(--ink); background:var(--ivory); font-size:1rem; font-weight:700; }
.area-number-label input:focus { border-color:var(--ochre); outline:3px solid rgba(184,121,36,.2); }
.area-slider input[type="range"] { width:100%; height:28px; margin:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.area-slider input[type="range"]::-webkit-slider-runnable-track { height:7px; border-radius:999px; background:linear-gradient(to right,var(--ochre) 0,var(--ochre) var(--slider-progress),var(--sand) var(--slider-progress),var(--sand) 100%); }
.area-slider input[type="range"]::-moz-range-track { height:7px; border-radius:999px; background:var(--sand); }
.area-slider input[type="range"]::-moz-range-progress { height:7px; border-radius:999px; background:var(--ochre); }
.area-slider input[type="range"]::-webkit-slider-thumb { width:24px; height:24px; margin-top:-8px; border:3px solid var(--ivory); border-radius:50%; background:var(--ochre-bright); box-shadow:0 1px 5px rgba(23,23,20,.28); appearance:none; -webkit-appearance:none; }
.area-slider input[type="range"]::-moz-range-thumb { width:18px; height:18px; border:3px solid var(--ivory); border-radius:50%; background:var(--ochre-bright); box-shadow:0 1px 5px rgba(23,23,20,.28); }
.area-slider input[type="range"]:focus-visible { outline:3px solid #2f6f9f; outline-offset:5px; border-radius:4px; }
.area-scale { display:flex; justify-content:space-between; margin-top:3px; color:var(--muted); font-size:.76rem; }
textarea.text-field { min-height: 120px; resize: vertical; }
.text-field:focus { border-color: var(--ochre); outline: 3px solid rgba(184,121,36,.2); }
.sub-question { margin: 20px 0 8px; font-weight: 600; }
.field-help, .file-status { margin: 8px 0; color: var(--muted); font-size: .86rem; }
.file-field { min-height: 50px; display: flex; align-items: center; gap: 9px; margin-top: 16px; border: 1px dashed var(--ochre); padding: 10px 14px; color: var(--ochre); font-weight: 600; cursor: pointer; }
.contact-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contact-options span { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: .9rem; cursor: pointer; }
.consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--ochre); }
.form-actions { display: flex; gap: 10px; margin-top: 32px; }
.button-next { flex: 1; }
.button-back, .button-skip { min-height: 52px; border: 1px solid var(--line); padding: 10px 18px; color: var(--ink); background: transparent; cursor: pointer; }
.direct-link { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; margin: 8px 0 0; text-decoration-color: var(--ochre); text-underline-offset: 5px; }
.direct-links { align-items: center; }
.prototype-note { border-left: 3px solid var(--ochre); padding: 8px 12px; background: var(--bone); font-size: .9rem; text-align: left; }
.form-success { padding: 50px 20px; text-align: center; }
.success-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 17px; border-radius: 50%; color: white; background: var(--ochre); font-size: 2rem; }
.form-success h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: var(--h3); font-weight: 400; text-transform: uppercase; }
.form-success p { max-width: 45ch; margin: 0 auto 20px; }
.form-turnstile { display: flex; justify-content: center; min-height: 65px; margin: 24px auto 4px; }
.form-turnstile-note { margin-bottom: 18px !important; }
.text-button { min-height: 44px; border: 0; border-bottom: 2px solid var(--ochre); padding: 6px 0; background: none; font-weight: 600; cursor: pointer; }

/* Mobile Slider (scroll-snap) */
.is-slider { scrollbar-width: thin; scrollbar-color: var(--ochre) transparent; }
.is-slider::-webkit-scrollbar { height: 5px; }
.is-slider::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--ochre); }
.is-slider::-webkit-scrollbar-track { background: rgba(120, 108, 92, .22); }
.slider-hint { display: none; }

/* Supporting content */
.story { padding: 105px 0; }
.faq-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(38px, 4.6vw, 82px); align-items: start; }
.story-grid { display: grid; gap: clamp(28px, 3.2vw, 56px); }
.story-copy { max-width: 58ch; font-size: 1.15rem; }
.story-copy p:first-child { margin-top: 0; }
.statement-quote { margin: 30px 0 10px; border-left: 5px solid var(--ochre); padding: 6px 0 6px 24px; font-size: 1.45rem; font-weight: 600; line-height: 1.35; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; margin-top: 12px; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.content-title.wide { max-width: 22ch; }
.situations, .costs-section, .region-section { padding: 100px 0; }
.situation-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 55px; }
.situation-card { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: rgba(251,247,240,.88); }
.situation-card:nth-child(4), .situation-card:nth-child(5) { grid-column: span 3; }
.situation-image { width: 100%; height: 245px; object-fit: cover; object-position: center; }
.situation-card:nth-child(3) .situation-image { object-position: center 62%; }
.situation-content { min-height: 380px; display: flex; flex: 1; flex-direction: column; padding: 28px 28px 30px; }
.situation-card:nth-child(4) .situation-content, .situation-card:nth-child(5) .situation-content { min-height: 330px; }
.situation-card h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: var(--h3); font-weight: 400; line-height: 1; text-transform: uppercase; }
.situation-card p { margin: 0 0 18px; }
.situation-card a { min-height: 44px; display: inline-flex; align-items: center; margin-top: auto; font-weight: 700; text-decoration: none; }
.quiet-zone { padding: 100px 0; }
.bereavement { background: var(--bone); }
.sensitive { color: var(--ink); background: var(--bone) url("assets/texture/grain/paper-grain-light.webp"); }
.sensitive-grid { display: grid; gap: clamp(32px, 3.6vw, 58px); align-items: stretch; }
.sensitive .eyebrow { color: var(--ochre); }
.sensitive-copy { max-width: 52ch; display: flex; flex-direction: column; }
.sensitive-copy > p + p { margin-top: 0; }
.sensitive-copy > p:not(.eyebrow) { font-size: 1.12rem; }
.sensitive .button { align-self: flex-start; margin-top: auto; padding-top: 13px; }
/* ---------- Feste Kontaktleiste auf dem Handy ---------- */
/* Die Kontaktwege stehen sonst nur an den Stellen, an denen der Leser gerade
   nicht ist. Auf schmalen Schirmen laeuft die Leiste deshalb unten mit. */
.sticky-contact { display: none; }
@media screen and (max-width: 860px) {
  .sticky-contact {
    position: fixed; z-index: 55; right: 0; bottom: 0; left: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Deckt auch eine hohe Android-/iOS-Safe-Area bis zur Displaykante ab. */
    background: var(--ivory);
    box-shadow: 0 -8px 24px rgba(23, 23, 20, .18);
  }
  .sticky-contact a {
    min-height: 58px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    padding: 8px 6px; border: 0;
    color: var(--ink); background: var(--ivory);
    font-size: .8rem; font-weight: 600; line-height: 1.1;
    text-align: center; text-decoration: none;
  }
  .sticky-contact a::before {
    content: ""; width: 21px; height: 21px; background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
  }
  .sticky-contact a[href^="tel:"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M221.59%2C160.3l-47.24-21.17a14%2C14%2C0%2C0%2C0-13.28%2C1.22%2C4.81%2C4.81%2C0%2C0%2C0-.56.42l-24.69%2C21a1.88%2C1.88%2C0%2C0%2C1-1.68.06c-15.87-7.66-32.31-24-40-39.65a1.91%2C1.91%2C0%2C0%2C1%2C0-1.68l21.07-25a6.13%2C6.13%2C0%2C0%2C0%2C.42-.58%2C14%2C14%2C0%2C0%2C0%2C1.12-13.27L95.73%2C34.49a14%2C14%2C0%2C0%2C0-14.56-8.38A54.24%2C54.24%2C0%2C0%2C0%2C34%2C80c0%2C78.3%2C63.7%2C142%2C142%2C142a54.25%2C54.25%2C0%2C0%2C0%2C53.89-47.17A14%2C14%2C0%2C0%2C0%2C221.59%2C160.3ZM176%2C210C104.32%2C210%2C46%2C151.68%2C46%2C80A42.23%2C42.23%2C0%2C0%2C1%2C82.67%2C38h.23a2%2C2%2C0%2C0%2C1%2C1.84%2C1.31l21.1%2C47.11a2%2C2%2C0%2C0%2C1%2C0%2C1.67L84.73%2C113.15a4.73%2C4.73%2C0%2C0%2C0-.43.57%2C14%2C14%2C0%2C0%2C0-.91%2C13.73c8.87%2C18.16%2C27.17%2C36.32%2C45.53%2C45.19a14%2C14%2C0%2C0%2C0%2C13.77-1c.19-.13.38-.27.56-.42l24.68-21a1.92%2C1.92%2C0%2C0%2C1%2C1.6-.1l47.25%2C21.17a2%2C2%2C0%2C0%2C1%2C1.21%2C2A42.24%2C42.24%2C0%2C0%2C1%2C176%2C210Z%22%2F%3E%20%3C%2Fsvg%3E"); color: #fff; background: linear-gradient(100deg, #8a5714, #a2660f); }
  .sticky-contact a[href*="wa.me"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M186.68%2C146.63l-32-16a6%2C6%2C0%2C0%2C0-6%2C.38L133%2C141.46A42.49%2C42.49%2C0%2C0%2C1%2C114.54%2C123L125%2C107.33a6%2C6%2C0%2C0%2C0%2C.38-6l-16-32A6%2C6%2C0%2C0%2C0%2C104%2C66a38%2C38%2C0%2C0%2C0-38%2C38%2C86.1%2C86.1%2C0%2C0%2C0%2C86%2C86%2C38%2C38%2C0%2C0%2C0%2C38-38A6%2C6%2C0%2C0%2C0%2C186.68%2C146.63ZM152%2C178a74.09%2C74.09%2C0%2C0%2C1-74-74%2C26%2C26%2C0%2C0%2C1%2C22.42-25.75l12.66%2C25.32-10.39%2C15.58a6%2C6%2C0%2C0%2C0-.54%2C5.63%2C54.43%2C54.43%2C0%2C0%2C0%2C29.07%2C29.07%2C6%2C6%2C0%2C0%2C0%2C5.63-.54l15.58-10.39%2C25.32%2C12.66A26%2C26%2C0%2C0%2C1%2C152%2C178ZM128%2C26A102%2C102%2C0%2C0%2C0%2C38.35%2C176.69L26.73%2C211.56a14%2C14%2C0%2C0%2C0%2C17.71%2C17.71l34.87-11.62A102%2C102%2C0%2C1%2C0%2C128%2C26Zm0%2C192a90%2C90%2C0%2C0%2C1-45.06-12.08%2C6.09%2C6.09%2C0%2C0%2C0-3-.81%2C6.2%2C6.2%2C0%2C0%2C0-1.9.31L40.65%2C217.88a2%2C2%2C0%2C0%2C1-2.53-2.53L50.58%2C178a6%2C6%2C0%2C0%2C0-.5-4.91A90%2C90%2C0%2C1%2C1%2C128%2C218Z%22%2F%3E%20%3C%2Fsvg%3E"); }
  .sticky-contact a[href*="anfrage"], .sticky-contact a[href^="#"] { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M220.24%2C132.24l-72%2C72a6%2C6%2C0%2C0%2C1-8.48-8.48L201.51%2C134H40a6%2C6%2C0%2C0%2C1%2C0-12H201.51L139.76%2C60.24a6%2C6%2C0%2C0%2C1%2C8.48-8.48l72%2C72A6%2C6%2C0%2C0%2C1%2C220.24%2C132.24Z%22%2F%3E%20%3C%2Fsvg%3E"); }
  .sticky-contact a:active { background: var(--sand); }
  .sticky-contact a[href^="tel:"]:active { background: #7a4d12; }
  /* Platz schaffen, damit die Leiste nichts verdeckt - auch nicht den Footer. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .menu-open .sticky-contact { display: none; }
}
@media print { .sticky-contact { display: none !important; } }

/* fb21: Die Zusagenleiste auf dem Todesfall-Hub war eine reine Zeilenliste und
   damit die einzige Stelle, an der dieselbe Aussage anders aussieht als die
   Trust-Leiste der Startseite. Sie bekommt deren Zellenraster mit Icons. */

/* fb15: Der Abschnitt zu stark belasteten Wohnungen war ein einspaltiger Stapel
   aus zehn Bloecken. Fliesstext und Ueberschriften laufen jetzt links, die
   O-Toene und der anonymisierte Fall stehen rechts als eigene Spur. */

/* ---------- Bildfiguren ---------- */
.media-figure { position: relative; margin: 0; width: 100%; overflow: hidden; background: var(--bone);
  aspect-ratio: var(--media-ratio, 3 / 2); max-height: var(--media-cap, none); }
.media-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-figure[style*="--media-ratio"] img { position: absolute; inset: 0; }
.media-figure figcaption { position: static; margin-top: 12px; color: var(--muted); font-size: .95rem; }

.before-after { margin: 0; }
.before-after-stage { position: relative; min-height: 0; aspect-ratio: var(--ba-ratio, 3 / 4); overflow: hidden; border: 1px solid var(--line); background: var(--charcoal); contain: paint; }
.before-after-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.before-layer { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.before-label, .after-label { position: absolute; z-index: 3; top: 18px; padding: 6px 12px; color: white; background: rgba(23,23,20,.86); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.before-label { left: 18px; }
.after-label { right: 18px; }
.comparison-line { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--position); width: 3px; background: white; transform: translateX(-50%); pointer-events: none; }
.comparison-line i { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; color: var(--ink); background: var(--ochre-bright); font-size: 1.4rem; font-style: normal; transform: translate(-50%, -50%); }
.comparison-range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.before-after figcaption { margin-top: 12px; color: var(--muted); font-size: .95rem; }
.sensitive .before-after { display: flex; flex-direction: column; }
.sensitive .before-after-stage { flex: 1; min-height: 440px; aspect-ratio: auto; }
.dark-section { padding: 115px 0; color: var(--ivory); background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp"); }
.process-grid { grid-template-columns: repeat(5, 1fr); margin: 55px 0 0; padding: 0; list-style: none; }

.process-grid li > span { color: var(--ochre-bright); font-family: var(--font-display); font-size: 3.2rem; }
.process-grid h3 { margin: 5px 0 8px; font-family: var(--font-display); font-size: var(--h3); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.process-grid p { margin: 0; color: #d5cdc2; }
.process-closing { max-width: 40ch; margin: 34px 0 0; padding-top: 4px; color: var(--ochre-bright); font-family: var(--font-display); font-size: 1.65rem; letter-spacing: .03em; line-height: 1.15; text-transform: uppercase; }
.block-figure { margin: 30px 0 0; }
.block-figure img { width: 100%; height: clamp(230px, 22vw, 320px); object-fit: cover; border: 1px solid var(--line); }
.block-figure figcaption { margin-top: 10px; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.process-layout { display: grid; grid-template-columns: minmax(260px, .46fr) minmax(0, 1fr); gap: clamp(34px, 4vw, 58px); align-items: stretch; }
.process-main { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
.process-figure { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; margin: 0; }
.process-figure .before-after-stage { flex: 1; min-height: 460px; aspect-ratio: auto; border-color: rgba(232, 221, 206, .22); }
.process-figure figcaption { color: #b9b1a6; }
.process-main .content-title { max-width: 24ch; }
.process-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 38%;
  gap: 0 22px;
  margin-top: 42px;
  padding-bottom: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.process-grid { display: contents; }
.process-grid li { min-height: 0; padding: 20px 0 0; border-top: 3px solid rgba(232, 221, 206, .3); border-left: 0; scroll-snap-align: start; }
.process-cta-cell { display: flex; padding-top: 0; border-top: 0; }
.slider-nav { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; }
.slider-button {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 221, 206, .4);
  border-radius: 50%;
  color: var(--ivory);
  background: transparent;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.slider-button:hover:not(:disabled) { border-color: var(--ochre); background: rgba(205, 130, 22, .18); }
.slider-button:disabled { opacity: .32; cursor: default; }
.slider-nav .slider-hint { display: flex; margin: 0 0 0 8px; }
.hint-mobile { display: none; }
.process-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 24px 22px 26px;
  border: 1px solid rgba(232, 221, 206, .3);
  background: rgba(232, 221, 206, .07);
}
.process-cta p { margin: 0; color: var(--ochre-bright); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .03em; line-height: 1.12; text-transform: uppercase; }
.process-cta .button { width: 100%; padding-inline: 12px; font-size: 1.06rem; letter-spacing: .04em; }
.process-cta-call { min-height: 44px; display: inline-flex; align-items: center; color: #d5cdc2; font-size: .94rem; text-underline-offset: 4px; }

.story-before-after { display: flex; flex-direction: column; margin: 0; }
.story-before-after .before-after-stage { flex: 1; min-height: 460px; aspect-ratio: auto; }
.treasure-section { padding: 100px 0; background: var(--blush); }
.reviews-section { padding: 100px 0; background: var(--bone); }
.reviews-head { flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.reviews-summary {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 22px;
  background: var(--ivory);
  text-decoration: none;
}
.reviews-summary strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }
.reviews-summary > span:last-child { color: var(--ochre); font-size: .92rem; font-weight: 600; }
.stars { color: var(--ochre-bright); font-size: 1.1rem; letter-spacing: .16em; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ochre);
  padding: 26px 26px 22px;
  background: var(--ivory);
}
.review-card::before {
  position: absolute;
  top: 8px;
  right: 20px;
  content: "\201C";
  color: rgba(184, 121, 36, .22);
  font-family: Georgia, serif;
  font-size: 5.4rem;
  line-height: 1;
  pointer-events: none;
}
.review-card blockquote { position: relative; margin: 14px 0 22px; font-size: 1.06rem; line-height: 1.5; }
.review-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.review-initials {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--ochre-text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .04em;
}
.review-meta { display: grid; gap: 1px; min-width: 0; }
.review-meta strong { font-size: .95rem; }
.review-meta > span { color: var(--muted); font-size: .89rem; line-height: 1.3; }
.faq-section { padding: 110px 0; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; font-size: 1.16rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 62ch; margin: -3px 0 22px; color: var(--muted); }
.final-cta { padding: 100px 0; color: var(--ink); background: var(--blush) url("assets/texture/grain/paper-grain-light.webp"); }
.final-cta-inner { display: grid; grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(45px, 7vw, 105px); }
.final-cta .content-title { max-width: 18ch; }
.final-cta-copy { max-width: 720px; }
.final-cta-copy > p:not(.eyebrow) { max-width: 62ch; color: var(--ink); }
.final-cta-button { margin-top: 26px; }
.final-cta-photo { position: relative; min-height: 610px; margin: 0; overflow: hidden; background: var(--charcoal); }
.final-cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% center; }
.final-cta-photo figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 12px 15px; color: white; background: rgba(23,23,20,.88); font-weight: 600; }
.light-links a { color: var(--ochre); }
.site-footer { padding: 55px 0 max(50px, env(safe-area-inset-bottom)); color: #cec5b9; background: #11110f; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 86px); align-items: start; }
.footer-business { display: grid; grid-template-columns: minmax(140px, .85fr) minmax(0, 1.4fr); gap: clamp(22px, 3vw, 45px); align-items: start; }
.footer-business img { display: block; width: min(100%, 170px); height: auto; }
.footer-contact { overflow-wrap: anywhere; }
.footer-grid a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; text-decoration-color: var(--ochre); text-underline-offset: 4px; }
.footer-grid nav { display: grid; gap: 2px; }
.footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(28px, 4vw, 46px); padding-top: 18px; border-top: 1px solid rgba(206, 197, 185, .22); }
.footer-copyright { margin: 0; color: rgba(206, 197, 185, .72); font-size: .78rem; letter-spacing: .025em; line-height: 1.35; }
.agency-credit { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; color: #cec5b9; font-size: .78rem; letter-spacing: .02em; line-height: 1.35; text-decoration-color: transparent; text-underline-offset: 4px; }
.agency-credit-mark { display: block; flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
.agency-credit strong { color: #f4eee5; font-weight: 700; }
.agency-credit:hover, .agency-credit:focus-visible { color: white; text-decoration-color: var(--ochre); }
.prototype-toast {
  position: fixed;
  z-index: 100;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  max-width: min(360px, calc(100% - 40px));
  border-left: 5px solid var(--ochre-bright);
  padding: 14px 18px;
  color: white;
  background: var(--charcoal);
}

@media screen and (min-width: 1000px) {
  .hero-copy-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 2.6vw, 46px); max-width: none; align-items: start; }
  .hero-copy-body > p { margin-top: 0; }
  .hero-copy-body > .brand-statement, .hero-copy-body > .inline-contact-links { grid-column: 1 / -1; }
  .hero-copy-body > .brand-statement { margin-top: 1.6rem; }
}

@media screen and (min-width: 821px) and (max-width: 1080px) {
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 1080px) {
  .desktop-nav { gap: 17px; }
  .desktop-nav a, .nav-parent { font-size: .96rem; }
  .hero-dark { width: min(64%, calc(var(--gutter) + 560px)); }
  .hero-display { font-size: clamp(3.2rem, 7.4vw, 5rem); }
  .hero-dark { padding-right: 40px; }
  .hero-monique { right: 4%; width:auto; height:92%; transform:none; }
  .service-card { padding-inline: 16px; }
  .estimate-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 36%); }
  .conversation-form { padding-right: 40px; }
  .form-intro-copy { padding: 44px 20px 0 34px; }
  .form-intro-note { left: 28px; width: 56%; }
  .situation-content { min-height: 430px; padding-inline: 22px; }
  .process-layout { grid-template-columns: minmax(200px, .34fr) minmax(0, 1fr); }
  .process-steps { grid-auto-columns: 46%; }
}

@media screen and (max-width: 820px) {
  :root { --h1: clamp(2.15rem, 6.8vw, 3rem); --h2: clamp(1.95rem, 6.2vw, 2.6rem); --h3: clamp(1.35rem, 4.4vw, 1.65rem); }
  .shell { width: min(calc(100% - 40px), var(--shell)); }
  .site-header { position: sticky; top: 0; min-height: 82px; padding: 10px 28px; }
  .brand { width: 126px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .hero { display: block; min-height: 0; background: var(--ivory); }
  .hero-dark { width: 100%; min-height: 0; justify-content: flex-start; padding: 34px 38px 78px; background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp"); }
  .hero-dark::after { z-index: 4; top: auto; left: 0; width: 100%; height: 150px; bottom: -100px; background: url("assets/backgrounds/brush/dark-top-brush-bottom-edge.webp") bottom center / 100% 100% no-repeat; }
  .hero-display { font-size: clamp(4rem, 14vw, 6.2rem); line-height: .91; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero-subline { margin-bottom: 15px; }
  .hero-cta { position: absolute; z-index: 8; left: 38px; bottom: -30px; width: calc(100vw - 76px); min-width: 0; }
  .hero .brush-underline { width: min(320px, 84%); height: 30px; margin: 10px 0 14px; }
  .hero-light { position: relative; inset: auto; min-height: 385px; background: var(--ivory); }
  .hero-scene { object-position: 69% center; opacity: .7; }
  .hero-monique { right:-2%; bottom:-1px; width:auto; height:68%; object-position:center bottom; transform:none; }
  .hero-copy-section { padding: 70px 0; }
  .hero-copy-grid, .content-block { grid-template-columns: 1fr; gap: 26px; }
  .content-title, .content-title.wide, h1.content-title, .hero-copy-grid .content-title, .content-block .content-title, .final-cta .content-title, .process-main .content-title { max-width: none; }
  .services { padding-top: 37px; }
  .heading-stroke { margin-bottom: 1.6rem; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  /* min-width: 0 stand nur in der 360er-Query. Ab 361 px erzwang der Karteninhalt
     breitere Spalten als 1fr und schob die Startseite um bis zu 72 px nach rechts. */
  .service-card { min-width: 0; min-height: 145px; flex-direction: row; align-items: flex-start; gap: 15px; padding: 22px 18px; text-align: left; border-bottom: 1px solid var(--line); }
  .service-card:nth-child(2n) { border-right: 0; }
  .service-card:nth-last-child(-n+2) { border-bottom: 0; }
  .service-card > img { width: 64px; height: 64px; flex: 0 0 auto; }
  .service-card p { max-width: 26ch; margin: 0; font-size: .94rem; }
  .quote-card { grid-template-columns: auto 1fr; min-height: 170px; padding: 22px 165px 22px 24px; }
  .quote-mark { font-size: 4.6rem; }
  .quote-card blockquote { font-size: 1.18rem; }
  .quote-plant { right: 8px; width: 170px; }
  .estimate { padding: 42px 0 60px; }
  .estimate-layout { display: flex; flex-direction: column; width: 100%; max-width: none; min-height: 0; margin-top: 0; }
  .form-intro {
    position: relative;
    display: block;
    min-height: 300px;
    margin: 0 0 62px;
    padding: 26px 0 30px;
    background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp");
  }
  .form-intro::after {
    z-index: 4;
    top: 100%;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 60px;
    background: url("assets/backgrounds/brush/edge-horizontal-bottom.webp") top center / 100% 100% no-repeat;
  }
  .form-intro-copy { position: relative; z-index: 6; max-width: 46%; padding: 0 0 0 28px; }
  .intro-title { font-size: clamp(1.6rem, 5.4vw, 2.1rem); }
  .form-portrait { position: absolute; z-index: 3; right: 0; bottom: 0; width: auto; height: calc(100% - 34px); max-width: 58%; object-fit: contain; object-position: bottom right; }
  .form-intro-note { position: relative; z-index: 6; top: auto; right: auto; bottom: auto; left: auto; width: auto; max-width: 38%; margin: 14px 28px 0; color: var(--ivory); font-size: .88rem; }
  .conversation-form { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; padding: 4px 0 5px; overflow: visible; contain: none; }
  .fallback-form { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
  .no-js .fallback-form { grid-template-columns: 1fr; }
  .no-js .fallback-form > * { grid-column: 1; }
  .area-slider { padding:14px 15px 11px; }
  .area-value-row { align-items:center; }
  .form-actions { margin-top: 10px; }
  .button-next { min-height: 48px; }
  .direct-link { margin-inline: auto; }
  .story, .dark-section, .faq-section, .situations, .quiet-zone, .costs-section, .treasure-section, .region-section, .reviews-section { padding: 75px 0; }
  .story-grid, .faq-layout { grid-template-columns: 1fr; gap: 35px; }
  .story-before-after { margin-top: 26px; }
  .story-before-after .before-after-stage { flex: none; min-height: 0; aspect-ratio: 3 / 4; }
  .situation-grid { grid-template-columns: repeat(2, 1fr); }
  .situation-card, .situation-card:nth-child(4), .situation-card:nth-child(5) { grid-column: span 1; }
  .situation-card:last-child { grid-column: 1 / -1; }
  .situation-content, .situation-card:nth-child(4) .situation-content, .situation-card:nth-child(5) .situation-content { min-height: 0; }
  .process-head { grid-template-columns: 1fr; gap: 26px; }
  .process-figure img { height: clamp(200px, 46vw, 260px); }
  .block-figure img { height: clamp(200px, 46vw, 260px); }
  .sensitive-grid { grid-template-columns: 1fr; gap: 38px; }
  .sensitive-copy { max-width: 68ch; }
  .before-after-stage { min-height: 0; }
  .reviews-head { align-items: flex-start; }
  .review-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    gap: 0 14px;
    width: 100vw;
    margin: 34px 0 0 calc(50% - 50vw);
    padding: 0 24px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .review-card { scroll-snap-align: start; }
  .process-layout { grid-template-columns: 1fr; gap: 0; }
  .process-figure { display: none; }
  .process-main { grid-column: 1; }
  .slider-button { display: none; }
  .slider-nav { margin-top: 4px; }
  .slider-nav .slider-hint { margin-left: 0; }
  .hint-desktop { display: none; }
  .hint-mobile { display: inline; }
  .process-steps {
    grid-auto-columns: 76%;
    gap: 0 14px;
    width: 100vw;
    margin: 34px 0 0 calc(50% - 50vw);
    padding: 0 24px 16px;
    scroll-padding: 0 24px;
  }
  .process-grid li.process-cta-cell { align-items: stretch; }
  .process-cta { justify-content: center; }
  .slider-hint { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: #bdb5a9; font-size: .88rem; }
  .slider-hint.ink { color: var(--muted); }
  .final-cta-inner { grid-template-columns: 1fr; align-items: start; }
  .final-cta-photo { width: 100%; min-height: 500px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-business { grid-column: 1 / -1; }
}

@media screen and (max-width: 560px) {
  .site-header { padding-inline: 24px; }
  .brand { width: 116px; }
  .menu-toggle { gap: 13px; }
  .hero-dark { min-height: 0; padding: 28px 24px 74px; }
  .hero-display { font-size: clamp(3.9rem, 18.5vw, 5.3rem); }
  .hero .eyebrow { font-size: .87rem; letter-spacing: .14em; }
  .hero-cta { left: 24px; width: calc(100vw - 48px); }
  .hero-light { min-height: 355px; }
  .hero-monique { right:-4%; width:auto; height:72%; transform:none; }
  .service-card { min-height: 165px; padding-inline: 11px; }
  .service-card > img { width: 50px; height: 50px; }
  .service-card p { font-size: .88rem; line-height: 1.35; }
  .quote-card { grid-template-columns: 42px 1fr; min-height: 230px; gap: 10px; padding: 22px 100px 22px 16px; }
  .quote-card blockquote { padding-right: 0; }
  .quote-card figcaption { grid-column: 2; }
  .quote-plant { right: -15px; bottom: -22px; width: 125px; }
  .form-intro { min-height: 278px; padding: 22px 0 26px; margin-bottom: 52px; }
  .form-intro::after { height: 46px; }
  .form-intro-copy { max-width: 46%; padding-left: 22px; }
  .intro-title { font-size: 1.6rem; }
  .form-portrait { max-width: 60%; height: calc(100% - 30px); }
  .form-intro-note { max-width: 32%; margin-left: 22px; font-size: .83rem; line-height: 1.3; }
  .conversation-form, .fallback-form { width: calc(100% - 34px); }
  .form-progress { gap: 14px; }
  .progress-track i { width: 15px; height: 15px; }
  .form-step legend { font-size: 1.2rem; margin-bottom: 12px; }
  .contact-options { grid-template-columns: 1fr; }
  .form-actions { flex-wrap: wrap; }
  .button-skip, .button-back { flex: 1; }
  .button-next { flex-basis: 100%; order: 3; }
  .situation-grid { grid-template-columns: 1fr; }
  .situation-card, .situation-card:nth-child(4), .situation-card:nth-child(5), .situation-card:last-child { grid-column: 1; min-height: 0; }
  .situation-image { height: 220px; }
  .situation-content, .situation-card:nth-child(4) .situation-content, .situation-card:nth-child(5) .situation-content { min-height: 0; }
  .before-after-stage { min-height: 0; }
  .final-cta-photo { min-height: 430px; }
  .process-steps { grid-auto-columns: 82%; }
  .process-closing { font-size: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-business { grid-column: 1; grid-template-columns: 1fr; }
  .footer-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
  .agency-credit { min-height: 40px; }
}

@media screen and (max-width: 360px) {
  :root { --h2: 1.75rem; --h3: 1.22rem; }
  .shell { width: calc(100% - 24px); }
  .site-header { padding-inline: 16px; }
  .brand { width: 104px; }
  .menu-toggle { font-size: 1.05rem; }
  .menu-icon { width: 30px; }
  .service-card { min-width: 0; gap: 7px; padding-inline: 6px; }
  /* Bei 320 px reicht Silbentrennung nicht: gemessen ragten Displayzeilen,
     Zitate und die Zusatzzeile der Raumliste um 3 bis 22 px heraus. */
  .content-title, .section-title, blockquote, .quote-grid p, .room-row em, .room-row span { overflow-wrap: anywhere; }
  .quote-grid > *, .room-row, .room-row > *, .origin-grid > *, .content-block > *, .shell > * { min-width: 0; }
  .service-card > img { width: 40px; height: 40px; }
  .service-card h3 { overflow-wrap: anywhere; }
  .service-card p { font-size: .79rem; overflow-wrap: anywhere; }
}

/* ============================================================
   UNTERSEITEN - Bausteine ab 09.09.2026
   Nutzt ausschliesslich die Tokens aus :root. Keine neuen
   Schriftgroessen je Element: h1 = --h1, h2 = --h2, h3 = --h3.
   ============================================================ */

/* --- Breadcrumb ------------------------------------------- */
.breadcrumb { padding: 14px 0 0; font-size: .9rem; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "›"; color: var(--line-art); }
.breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); text-underline-offset: 4px; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- Unterseiten-Hero ------------------------------------- */
/* Gleicher Aufbau wie die Startseite: die helle Ebene liegt ueber die volle
   Breite, der dunkle Kasten sitzt darueber auf den linken 58 Prozent. Nur so
   laeuft die Skizze hinter dem Kasten durch und Monique steht in voller
   Hoehe im Bild statt in einer halben Rasterspalte. */
.page-hero { position: relative; display: block; min-height: 700px; overflow: hidden; background: var(--ivory); }
.page-hero-dark {
  position: relative;
  z-index: 3;
  width: min(58%, calc(var(--gutter) + 660px));
  min-height: 700px;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(52px, 6vw, 88px) clamp(28px, 3vw, 54px) clamp(52px, 6vw, 88px) var(--gutter);
  color: var(--ivory);
  background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp");
}
.page-hero-dark::after {
  position: absolute; top: 0; bottom: 0; left: 100%; z-index: 2;
  display: block; width: 104px; content: "";
  background: url("assets/backgrounds/brush/edge-vertical-right.webp") left center / 100% 100% no-repeat;
  pointer-events: none;
}
.page-hero h1 { max-width: 17ch; margin: 0; font: 400 var(--h1)/.98 var(--font-display); letter-spacing: .012em; text-transform: uppercase; }
.page-hero-lead { max-width: 54ch; margin: 22px 0 0; font-size: 1.12rem; line-height: 1.55; color: #ddd5c9; }
.page-hero-lead + .page-hero-lead { margin-top: 14px; }
.page-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 30px; }
.page-hero-light { position: absolute; inset: 0; min-width: 0; padding: 0; overflow: hidden; background: var(--ivory); }
.page-hero-scene { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 73% center; mix-blend-mode: multiply; opacity: .75; transform: none; }
.page-hero-monique { position: absolute; z-index: 4; right: clamp(30px, 7vw, 140px); bottom: -2px; width: auto; height: 94%; object-fit: contain; object-position: bottom right; transform: none; }

/* --- Schluessel-Fakten ------------------------------------ */

/* --- Haltungszitat ---------------------------------------- */
.pull-quote { position: relative; max-width: 44ch; margin: 34px 0 0; padding: 0 0 0 26px; border-left: 3px solid var(--ochre); font-size: clamp(1.16rem, 1.6vw, 1.42rem); line-height: 1.42; }
.pull-quote p { margin: 0; }
.pull-quote p::before { content: "\201E"; }
.pull-quote p::after { content: "\201C"; }
.pull-quote figcaption { margin-top: 12px; color: var(--muted); font-size: .93rem; }
.dark-section .pull-quote { border-left-color: var(--ochre-bright); }

/* --- Sensible Zone (Sie-Ansprache, sichtbar abgesetzt) ---- */
.zone-marked { position: relative; padding: clamp(52px, 6vw, 92px) 0; }
.zone-marked::before, .zone-marked::after {
  position: absolute; left: 0; right: 0; height: 26px; content: ""; pointer-events: none;
  background: url("assets/backgrounds/brush/edge-horizontal-bottom.webp") center / 100% 100% no-repeat;
}
.zone-marked::before { top: -1px; transform: scaleY(-1); }
.zone-marked::after { bottom: -1px; }
.zone-marked .eyebrow { color: var(--ochre-bright); }
.zone-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 7px 14px; border: 1px solid rgba(205, 130, 22, .5); border-radius: 999px; color: var(--ochre-bright); font-size: .86rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.zone-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ochre-bright); }

/* --- B2B-Zone --------------------------------------------- */
.zone-business { padding: clamp(52px, 6vw, 92px) 0; background: var(--sand); border-block: 1px solid var(--line-art); }
.zone-business .zone-badge { border-color: rgba(93, 76, 48, .34); color: #5d4c30; }
.zone-business .zone-badge::before { background: #5d4c30; }

/* --- Preistabelle ----------------------------------------- */

/* --- Schrittfolge (nummeriert) ---------------------------- */
.step-flow { counter-reset: stepflow; display: grid; gap: 2px; margin: 32px 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.step-flow > li { position: relative; padding: 24px 26px 24px 74px; background: var(--ivory); }
.step-flow > li::before {
  counter-increment: stepflow; content: counter(stepflow);
  position: absolute; top: 22px; left: 24px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--ochre); border-radius: 50%;
  color: var(--ochre-text); font: 400 1.16rem/1 var(--font-display);
}
.step-flow h3 { margin: 0 0 8px; font: 400 var(--h3)/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.step-flow p { max-width: 62ch; margin: 0; color: var(--muted); }
.step-flow p + p { margin-top: 10px; }

/* --- Hinweiskasten ---------------------------------------- */
.note-box { margin: 30px 0 0; padding: 22px 24px; border: 1px solid var(--line); border-left: 3px solid var(--ochre); background: rgba(242, 233, 220, .6); }
.note-box p { max-width: 68ch; margin: 0; color: var(--muted); font-size: .96rem; }
.note-box p + p { margin-top: 10px; }
.note-box strong { color: var(--ink); }

/* --- Orientierungsrechner --------------------------------- */
.calc-section { padding: clamp(56px, 7vw, 100px) 0; }

/* --- Foto-Platzhalter ------------------------------------- */

@media screen and (max-width: 1080px) {
  .page-hero { display: block; min-height: 0; }
  .page-hero-dark { width: auto; min-height: 0; padding-inline: var(--gutter); }
  .page-hero-light { position: relative; inset: auto; min-height: 360px; }
  .page-hero-dark::after { top: auto; right: 0; bottom: -100px; left: 0; width: auto; height: 150px; background: url("assets/backgrounds/brush/dark-top-brush-bottom-edge.webp") bottom center / 100% 100% no-repeat; z-index: 4; }
  .page-hero-scene { object-position: 69% center; opacity: .7; }
  .zone-business .business-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 820px) {
  .step-flow > li { padding: 20px 20px 20px 66px; }
}

@media screen and (max-width: 560px) {
  .pull-quote { padding-left: 18px; }
}

@media print {
  .site-header, .mobile-menu, .prototype-toast, .slider-nav { display: none !important; }
}

/* Korrektur 09.09.2026: Rasterkinder duerfen schrumpfen, sonst erzwingt
   die Preistabelle (min-width 520px) horizontalen Ueberlauf der ganzen Seite. */
.content-block > *, .hero-copy-grid > *, .business-grid > *, .calc-console > *, .faq-layout > * { min-width: 0; }
.long-copy { min-width: 0; }

/* Der generierte Formular-Container erbt die Rasterposition der Startseite. */
[data-form-host] { grid-column: 1; grid-row: 1; min-width: 0; display: contents; }
.no-js [data-form-host] { display: none; }

/* ============================================================
   MODULE FÜR UNTERSEITEN - Rhythmus statt Textwand · 09.09.2026
   Regel: keine zwei benachbarten Sektionen mit gleicher Bauform.
   ============================================================ */

/* --- Icon-Leiste (Trust) ---------------------------------- */
.fact-strip { border-block: 1px solid var(--line); background: rgba(242, 233, 220, .8); }
.fact-strip .fact-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.fact-item { display: flex; align-items: center; gap: 12px; padding: 20px 18px; border-right: 1px solid var(--line); font-size: .93rem; line-height: 1.3; }
.fact-item:last-child { border-right: 0; }
.fact-item img { width: 30px; height: 30px; flex: 0 0 auto; opacity: .85; }
.fact-item strong { display: block; color: var(--ochre); font: 400 1.14rem/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }

/* --- Gegenüberstellung zweier Modelle --------------------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.compare-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 30px; border: 1px solid var(--line); background: var(--ivory); }
.compare-card h3 { margin: 0; font: 400 var(--h3)/1.06 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.compare-card p { margin: 0; color: var(--muted); }
.compare-card ul { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; font-size: .96rem; }
.compare-card li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.compare-card li::before { content: "\00B7"; color: var(--line-art); }
.compare-tag { align-self: flex-start; padding: 5px 12px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.compare-card.is-other { background: rgba(232, 221, 206, .45); }
.compare-card.is-other .compare-tag { background: var(--sand); color: #5d4c30; }
.compare-card.is-ours { border-color: var(--ochre); box-shadow: 0 14px 34px rgba(184, 121, 36, .14); }
.compare-card.is-ours .compare-tag { background: var(--ochre-text); color: #fff; }
.compare-card.is-ours li::before { content: "✓"; color: var(--ochre); font-weight: 700; }

/* --- Preisbeispiele als Karten ---------------------------- */
.example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; margin-top: 34px; }
.example-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; border: 1px solid var(--line); background: var(--ivory); }
.example-card img { width: 32px; height: 32px; opacity: .8; }
.example-card h3 { margin: 0; font: 400 var(--h3)/1.06 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.example-card .example-price { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 400 clamp(1.6rem, 2.2vw, 2.05rem)/1 var(--font-display); letter-spacing: .015em; }
.example-card .example-net { display: block; margin-top: 6px; color: var(--muted); font: 400 .82rem/1.3 var(--font-body); letter-spacing: 0; }
.calc-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; padding: 18px 22px; border-left: 3px solid var(--ochre); background: rgba(232, 221, 206, .5); font-size: 1.02rem; }
.calc-strip b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; letter-spacing: .03em; }

/* --- Faktoren-Raster -------------------------------------- */
.factor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 34px; background: var(--line); border: 1px solid var(--line); }
.factor-item { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; background: var(--ivory); }
.factor-item img { width: 28px; height: 28px; opacity: .8; }
.factor-item b { font-size: .98rem; }
.factor-item span { color: var(--muted); font-size: .88rem; line-height: 1.35; }

/* --- Tipp-Liste ------------------------------------------- */
.tip-list { display: grid; gap: 0; margin: 30px 0 0; padding: 0; list-style: none; }
.tip-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.tip-list li:first-child { border-top: 1px solid var(--line); }
.tip-list img { width: 24px; height: 24px; margin-top: 2px; opacity: .8; }
.tip-list b { display: block; margin-bottom: 3px; }
.tip-list span { color: var(--muted); font-size: .94rem; line-height: 1.4; }

/* --- Zeitstrahl ------------------------------------------- */
.timeline { position: relative; counter-reset: tl; display: grid; gap: 0; margin: 34px 0 0; padding: 0 0 0 34px; list-style: none; }
.timeline::before { position: absolute; top: 12px; bottom: 12px; left: 11px; width: 2px; content: ""; background: var(--line-art); }
.timeline > li { position: relative; padding: 0 0 26px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  counter-increment: tl; content: counter(tl);
  position: absolute; top: 0; left: -34px;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ochre); color: #fff;
  font: 400 .92rem/1 var(--font-display); letter-spacing: .04em;
}
.timeline b { margin-bottom: 4px; font-size: 1.02rem; }
.timeline span { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.dark-section .timeline span, .zone-marked .timeline span { color: #ccc4b8; }
.dark-section .timeline::before, .zone-marked .timeline::before { background: rgba(205, 130, 22, .45); }

/* --- Fundstücke-Galerie ----------------------------------- */
.find-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; margin-top: 32px; }
.find-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--ivory); }
.find-card .media-figure { --media-ratio: 4 / 3; }
/* Zwei der drei Fundstuecke haben kein eigenes Foto. Statt eines Ersatzmotivs
   neben Name und Erloes traegt die Karte dort ein Icon auf ruhiger Flaeche -
   sichtbar kein Beweisbild, aber in derselben Kartenhoehe wie das Foto. */
.find-card .find-icon { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--sand); }
.find-card .find-icon img { width: 66px; height: 66px; opacity: .78;
  filter: invert(48%) sepia(71%) saturate(690%) hue-rotate(357deg) brightness(88%) contrast(92%); }
.find-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; }
.find-body h3 { margin: 0; font: 400 var(--h3)/1.06 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.find-body p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.find-result { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font: 400 1.5rem/1 var(--font-display); letter-spacing: .03em; }

/* --- Dunkles Zitat-Panel ---------------------------------- */
.quote-panel { position: relative; padding: clamp(48px, 6vw, 84px) 0; color: var(--ivory); background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp"); }
.quote-panel .quote-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.quote-panel blockquote { margin: 0; font: 400 clamp(1.35rem, 2.3vw, 1.95rem)/1.32 var(--font-body); }
.quote-panel blockquote::before { content: "„"; color: var(--ochre-bright); }
.quote-panel blockquote::after { content: "“"; color: var(--ochre-bright); }
.quote-panel figcaption { margin-top: 18px; color: #cdc5b9; font-size: .95rem; }
.quote-panel figcaption strong { display: block; color: var(--ochre-bright); font: 400 1.15rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.quote-panel p { color: #ded6ca; }

/* --- Platzhalter: Motiv-Auftrag --------------------------- */

@media screen and (max-width: 1080px) {
  .fact-strip .fact-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-item:nth-child(2n) { border-right: 0; }
  .fact-item { border-bottom: 1px solid var(--line); }
  .quote-panel .quote-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 700px) {
  .compare { grid-template-columns: 1fr; }
}

/* Korrektur: Fakten-Leiste auf sehr schmalen Viewports einspaltig,
   sonst erzwingen die Wortlaengen 374 px Mindestbreite. */
@media screen and (max-width: 560px) {
  .fact-strip .fact-grid { grid-template-columns: 1fr; }
  .fact-item { border-right: 0; }
  .fact-item span { min-width: 0; overflow-wrap: anywhere; }
  .factor-grid, .example-grid, .find-grid { grid-template-columns: 1fr; }
}

/* --- Rechner auf dunklem Grund -----------------------------
   Der Rechner ist das interaktive Herzstueck der Seite. Auf
   dunklem Grund steht er als Werkzeug frei, statt in der
   Papierfolge unterzugehen - und bricht zugleich die helle
   Strecke zwischen Hero und Rechenbeispielen auf. */
.calc-section { color: var(--ivory); background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp"); }
.calc-section .content-title { color: var(--ivory); }
.calc-section .eyebrow.ink { color: var(--ochre-bright); }
.calc-section > .shell > .long-copy { color: #ded6ca; }
.calc-section .note-box { border-color: rgba(215, 195, 170, .22); border-left-color: var(--ochre); background: rgba(255, 255, 255, .04); }
.calc-section .note-box p { color: #c9c1b5; }
.calc-section .note-box strong { color: var(--ivory); }

/* ============================================================
   NACHBESSERUNG nach Design-Critique · 09.09.2026
   ============================================================ */

/* 3) Ocker als Textfarbe: eine Stufe tiefer, damit 4,5:1 hält.
   Flächen, Rahmen, Icons und Fokusringe behalten --ochre. */
.inline-contact-links a, .form-contact-links a, .text-link, .faq-list summary span, .breadcrumb a:hover, .example-card .example-price { color: var(--ochre-text); }
/* .eyebrow.ink liegt global auf --ochre-text, dunkle Register decken
   .page-hero-dark .eyebrow und .zone-marked .eyebrow ab. */
.find-result { color: var(--ochre-text); }

/* 2) Faktorenraster: 3x3 auf Desktop, darunter 2 Spalten mit
   voller letzter Zelle - keine leeren Rasterzellen mehr. */
@media screen and (min-width: 561px) and (max-width: 1000px) {
  .factor-grid { grid-template-columns: repeat(2, 1fr); }
  .factor-item:last-child { grid-column: span 2; }
}

/* 8/12) Preisbeispiele als Leiter statt als zweites Kachelraster
   direkt nach den Fakten-Kacheln. */

/* Bilder in Textspalten bekommen einen Hoehendeckel, sonst laeuft die Bildspalte
   der Textspalte davon. Der Deckel greift nur im zweispaltigen Bereich. */
@media screen and (min-width: 1081px) {
  .content-block .media-figure,
  .origin-grid .media-figure,
  .quote-panel .quote-grid .media-figure,
  .business-grid .media-figure { --media-cap: clamp(300px, 32vw, 440px); }

  /* Abschluss-CTA: das Medium nimmt die Hoehe der Textspalte an, nicht sein
     eigenes Seitenverhaeltnis. Vorher war ein 1:1-Bild doppelt so hoch wie
     die Spalte daneben. */
  .final-cta-inner > .media-figure { aspect-ratio: auto; height: clamp(360px, 36vw, 470px); max-height: none; }
  .final-cta-inner > .before-after .before-after-stage { aspect-ratio: auto; height: clamp(360px, 36vw, 470px); }
}

/* Die Kontaktschiene ist ein drittes Kind im Zweispalter und landete sonst als
   halbbreiter Block in der linken Spalte, unter dem Bild. Sie gehoert unter
   beide Spalten. */
.content-block > .contact-rail,
.hero-copy-grid > .contact-rail { grid-column: 1 / -1; }

/* Steht rechts nur ein Zitat neben einer langen Liste links, laeuft die kurze
   Spalte oben aus. Sie bleibt stattdessen stehen. */
@media screen and (min-width: 1081px) {
  .is-stuck { align-self: start; }
  .is-centered { align-self: center; }
}

/* Lange deutsche Komposita sprengen auf schmalen Schirmen die Displayschrift.
   Gemessen bei 390 px: „Nachlassverbindlichkeiten," schob die Seite um 137 px
   nach rechts, „Haushaltsauflösung" um 15 px. Silbentrennung statt Ueberlauf. */
.content-title, .section-title, h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }

/* 6) Kopfspalten stehen oben, sie laufen nicht mit. Feedback 15.09.2026:
   mitlaufende Spalten ueberdecken auf langen Abschnitten den Inhalt. */
@media screen and (min-width: 1081px) {
  .faq-layout > div:first-child,
  .treasure-section .content-block > div:first-child { align-self: start; }
}

/* 7) Der Hinweisblock im Rechner bekommt Struktur statt drei Absätzen. */

/* 9) Die Anfrage-Sektion folgt der linksbündigen Typografie der Seite. */
.estimate .section-title { text-align: left; }
.estimate .heading-stroke { margin-inline: 0; }
/* Die frühere Regel oben setzt max-width: 850px und laesst .shell den Block
   zentrieren. Hier laeuft er auf voller Shell-Breite, das Satzmass sitzt an
   den Kindern - damit steht die Copy auf derselben Flucht wie die Ueberschrift. */
.estimate-copy { max-width: none; margin-bottom: 30px; text-align: left; }
.estimate-copy > * { max-width: 62ch; }
/* Der Einstieg trug vorher die Klasse shell und damit deren Aussenabstand. Im
   Raster braucht er stattdessen rechts Luft zum dunklen Panel. */
.estimate-layout { row-gap: clamp(16px, 2.2vw, 30px); }
.estimate-layout > .estimate-copy { padding-top: clamp(44px, 4.6vw, 70px); margin-bottom: 0; }
.estimate-layout > .estimate-copy > * { max-width: 62ch; }

.estimate-copy p { margin: 0 0 13px; }
.estimate-copy p:last-child { margin-bottom: 0; }

/* 10) FAQ-Zeichen als Marken-Asset statt Fallback-Glyphe. */
.faq-list summary span { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; transition: transform .18s ease; }

/* --- Fünf Fragen: Frage als Gestaltungselement --------------- */

/* --- Erfahrungswerte als Kennzahl ---------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 34px; }
.stat-card { display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 28px; border: 1px solid var(--line); background: var(--ivory); }
.stat-card .stat-value { margin: 0; color: var(--ochre-text); font: 400 clamp(2.1rem, 3.4vw, 2.9rem)/1 var(--font-display); letter-spacing: .015em; }
.stat-card b { font-size: 1.02rem; }
.stat-card span { color: var(--muted); font-size: .93rem; line-height: 1.4; }
.stat-note { margin-top: 18px; color: var(--muted); }

/* --- Kompakter Preis-Anriss mit Weiterleitung ---------------- */
.price-teaser { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; padding: 26px 30px; border: 1px solid var(--ochre); background: rgba(184, 121, 36, .08); }
.price-teaser .teaser-value { color: var(--ochre-text); font: 400 clamp(1.9rem, 3vw, 2.5rem)/1 var(--font-display); letter-spacing: .015em; white-space: nowrap; }
.price-teaser p { margin: 0; color: var(--muted); }
.price-teaser p strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 1.05rem; }

@media screen and (max-width: 700px) {
  .price-teaser { grid-template-columns: 1fr; }
}

/* ============================================================
   NACHBESSERUNG 2 nach Design-Critique · 09.09.2026
   ============================================================ */

/* Fehlende Klasse: Ghost-Button hatte keine Definition und
   rendert bisher als Text ohne jede Affordanz. */
.button-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border: 1px solid currentColor; background: transparent;
  color: inherit; font-family: var(--font-display); font-size: 1.12rem;
  font-weight: 400; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
.button-ghost:hover { border-color: var(--ochre-bright); color: var(--ochre-bright); }

/* Ocker auf dunklem Grund: die abgedunkelte Textfarbe gilt nur
   für helle Flächen. Auf Anthrazit hält sie 2,95:1 und braucht
   den hellen Gegenspieler. */
.page-hero-dark .inline-contact-links a,
.quote-panel a,
.dark-section a:not(.button-primary),
.calc-section .eyebrow,
.page-hero-dark .eyebrow { color: var(--ochre-bright); }

/* .final-cta liegt auf hellem Grund: dort gilt der abgedunkelte Ton. */
.final-cta .light-links a { color: var(--ochre-text); }
.final-cta .eyebrow { color: var(--ochre-text); }

/* Ein Fließtextgrad für alle Register statt zwei ohne Grund. */
:root { --fs-body: 1.14rem; }
.quote-panel p, .zone-marked p, .long-copy, .stat-note, .handover-list span { font-size: var(--fs-body); }
.quote-panel .eyebrow, .zone-marked .eyebrow { font-size: inherit; }

/* Wiederholtes Sektionspolster als Klasse statt viermal inline. */
.section-rhythm { padding: clamp(56px, 7vw, 96px) 0; }
.section-blush { background: var(--blush); }
.section-bone { background: var(--bone); }
.section-sand { background: var(--sand); }

/* Kopfspalten stehen oben statt mitzulaufen (Feedback 15.09.2026). */
@media screen and (min-width: 1081px) {
  .content-block > div:first-child { align-self: start; }
}

/* Überschriften ohne Waisenzeile. */
.content-title, .section-title, .page-hero h1 { text-wrap: balance; }

/* Aufzählungszeichen ohne Halbgeviertstrich. */

/* --- Sensible Zone: eigene Bauform statt zweiter dunkler Bahn ---
   Dunkel gehört auf diesen Seiten dem Zitat-Panel. Die Sie-Zone
   wird stattdessen über Material markiert: warmer Sandgrund,
   durchgehende Ockerkante, einspaltiges enges Satzmaß. */
.zone-marked { color: var(--ink); background: var(--sand) url("assets/texture/grain/paper-grain-light.webp"); }
.zone-marked::before, .zone-marked::after { display: none; }
.zone-marked { border-block: 1px solid var(--line-art); border-left: 8px solid var(--ochre); }
.zone-marked .content-title, .zone-marked h2, .zone-marked h3 { color: var(--ink); }
.zone-marked p { color: var(--muted); }
.zone-marked .zone-badge { border-color: var(--ochre); color: var(--ochre-text); }
.zone-marked .zone-badge::before { background: var(--ochre); }
.zone-marked .zone-inner { max-width: 64ch; }
.zone-marked .zone-register { margin: 0 0 8px; color: var(--muted); font-size: .92rem; font-style: italic; }
.zone-marked .button-ghost { border-color: var(--ochre); color: var(--ochre-text); }
.zone-marked .button-ghost:hover { background: var(--ochre); color: #fff; }

/* --- Vorher-Nachher als eigene Bauform über die volle Breite --- */
.proof-section { padding: clamp(56px, 7vw, 100px) 0; background: var(--blush) url("assets/texture/grain/paper-grain-light.webp"); }
.proof-stage { margin-top: 32px; }
.proof-stage .before-after { margin: 0; }
.proof-stage .before-after-stage { aspect-ratio: 16 / 9; min-height: 0; }
.proof-caption { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 40px; margin-top: 26px; }
.proof-caption p { margin: 0; color: var(--muted); font-size: var(--fs-body); }
.proof-caption p:first-child { color: var(--ink); }

/* --- Fünf Fragen als gestaffelte Liste mit hängender Ziffer --- */
.question-flow { counter-reset: qf; display: grid; margin: 36px 0 0; padding: 0; list-style: none; }
.question-flow li { grid-template-columns: 92px minmax(0, 1fr) minmax(0, .9fr);
  align-items: baseline; gap: 10px 30px;
}
.question-flow li::before {
  counter-increment: qf; content: "0" counter(qf); font: 400 3rem/.8 var(--font-display); letter-spacing: .02em;
}
.question-flow b { font-size: clamp(1.14rem, 1.5vw, 1.34rem); font-weight: 600; line-height: 1.28; }
.question-flow span { color: var(--muted); font-size: .95rem; line-height: 1.45; }

/* --- Fakten-Leiste in kompakter Variante, damit Schwesterseiten
       nicht mit identischem Auftakt beginnen. --- */
.fact-strip.is-compact .fact-item { padding: 24px 22px; }
.fact-strip.is-compact .fact-item strong { font-size: 1.5rem; }

/* Preisteaser: Satzmaß statt Zufallsumbruch. */
.price-teaser p { max-width: 42ch; }

@media screen and (max-width: 820px) {
  .question-flow li { grid-template-columns: 62px minmax(0, 1fr); }
  .question-flow span { grid-column: 2; }
  .question-flow li::before { font-size: 2.2rem; }
  .proof-stage .before-after-stage { aspect-ratio: 4 / 3; }
}

@media screen and (max-width: 560px) {
  .fact-strip.is-compact .fact-grid { grid-template-columns: 1fr; }
  .zone-marked { border-left-width: 5px; }
}

/* --- Übergabe-Kette (nur /wohnungsaufloesung-muenchen/) ---- */
.handover-track { border-block: 1px solid var(--line); background: rgba(232, 221, 206, .55); padding: clamp(34px, 4vw, 54px) 0; }
.handover-track .handover-intro { max-width: 58ch; margin: 0 0 clamp(24px, 3vw, 36px); color: var(--muted); font-size: var(--fs-body); }
.handover-list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.handover-list::before { content: ""; position: absolute; top: 17px; left: 17px; right: calc(25% - 17px); height: 1px; background: var(--line-art); }
.handover-list > li { position: relative; padding: 0 18px 0 0; }
.handover-list > li::before {
  content: "";
  position: relative; z-index: 1;
  display: block; width: 34px; height: 34px; margin-bottom: 18px;
  border: 1px solid var(--ochre); border-radius: 50%;
  background: var(--ivory) center / 17px 17px no-repeat;
  background-image: var(--handover-icon, none);
}
.handover-list b { display: block; font: 400 1.3rem/1.05 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.handover-list span { display: block; max-width: 30ch; margin-top: 8px; color: var(--muted); line-height: 1.45; }
.handover-list em { display: block; margin-top: 10px; color: var(--ochre-text); font-style: normal; font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
@media screen and (max-width: 900px) {
  .handover-list { grid-template-columns: 1fr; gap: 26px; }
  .handover-list::before { top: 17px; bottom: 34px; left: 17px; right: auto; width: 1px; height: auto; }
  .handover-list > li { padding: 0 0 0 54px; }
  .handover-list > li::before { position: absolute; top: 0; left: 0; margin-bottom: 0; }
  .handover-list span { max-width: 46ch; }
}

/* --- Reduzierte Bewegung: Sammelregel statt Einzelfaelle ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- B2B-Zone: eigene Bauform statt zweiter Textspalte ------ */

/* --- Mobil: Formularnotiz nicht ueber das Portrait quetschen - */
@media screen and (max-width: 700px) {
  .form-intro-note { position: relative; z-index: 6; inset: auto; max-width: none; margin: 16px 22px 0; padding: 10px 14px; background: rgba(23, 23, 20, .86); }
}

/* --- Schrittfolge ueber die volle Breite -------------------- */
.step-flow.is-wide > li { display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, .66fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.step-flow.is-wide h3 { margin: 0; }
.step-flow.is-wide p { max-width: 72ch; }
@media screen and (max-width: 860px) {
  .step-flow.is-wide > li { grid-template-columns: 1fr; gap: 8px; }
}

/* --- B2B-Zone auf schmalen Viewports ------------------------ */
@media screen and (max-width: 900px) {
  .zone-business .business-grid { grid-template-columns: 1fr; }
}

/* --- Raumliste als Auftakt (/entruempelung-muenchen/) -------
   Bewusst keine Kachelreihe: die drei anderen Seitenauftakte sind bereits
   waagerechte Reihen gleich breiter Zellen mit Icon oben und Ockerzeile unten.
   Eine haengende Liste ist eine andere Figur und verspricht keine Auswahl. */
.room-picker { padding: clamp(48px, 6vw, 84px) 0; }
.room-picker .picker-intro { max-width: 58ch; margin: 16px 0 clamp(26px, 3vw, 38px); color: var(--muted); font-size: var(--fs-body); }
.room-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-art); }
.room-list li { border-bottom: 1px solid var(--line-art); }
.room-row {
  display: grid; grid-template-columns: 44px minmax(0, 15ch) minmax(0, 1fr) auto;
  align-items: baseline; gap: 8px 24px;
  padding: 22px 8px 22px 0; color: inherit; text-decoration: none;
  transition: background-color .16s ease, padding-left .16s ease;
}
.room-row:hover { background: rgba(242, 233, 220, .7); padding-left: 8px; }
.room-row:focus-visible { outline: 3px solid var(--ochre); outline-offset: -3px; }
.room-row img { width: 28px; height: 28px; align-self: center; }
.room-row b { font: 400 1.42rem/1.05 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.room-row span { color: var(--muted); font-size: var(--fs-body); line-height: 1.45; }
.room-row em { align-self: center; color: var(--ochre-text); font-style: normal; font-weight: 700; font-size: .92rem; letter-spacing: .02em; white-space: nowrap; }
@media screen and (max-width: 1000px) {
  .room-row { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 16px; }
  .room-row b { grid-column: 2; }
  .room-row span, .room-row em { grid-column: 2; }
  .room-row em { margin-top: 6px; }
}

/* --- Ruhige Zone: stark belastete Wohnungen ------------------ */
/* Die Zone zieht sich schmaler als der Rest der Seite. Das ist ihr
   Unterschied zu jeder anderen Sektion: sie wird leiser, nicht lauter. */
/* Schmales Erzaehlband. .zone-quiet erbt davon, bringt aber zusaetzlich die
   Bedeutung "hier wird die Seite leiser" mit - deshalb zwei Klassen. */
.zone-narrow { padding: clamp(56px, 6.5vw, 96px) 0; }
.zone-narrow h2 { margin: 0; }
.zone-narrow > .shell > p { max-width: none; font-size: var(--fs-body); }
.zone-narrow .pull-quote { max-width: none; }
.quiet-quote { margin: 26px 0; padding: 0; border: 0; font-size: clamp(1.2rem, 1.75vw, 1.52rem); line-height: 1.4; }
.quiet-quote p { max-width: 54ch; margin: 0; font-size: inherit; }
.quiet-quote p::before { content: "\201E"; }
.quiet-quote p::after { content: "\201C"; }
.quiet-quote figcaption { margin-top: 10px; color: var(--muted); font-size: .93rem; }
.quiet-case { margin: 30px 0; padding: 24px 26px; background: rgba(232, 221, 206, .5); border: 1px solid var(--line); }
.quiet-case p { margin: 0; font-size: 1.02rem; }
.quiet-case p + p { margin-top: 10px; }
.quiet-case .case-label { margin-bottom: 10px; color: var(--ochre-text); font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* In der ruhigen Zone gibt es rechts keine Pinselkante, also auch kein Polster. */
/* Das vertrauliche Formular ist das leisere: keine Fortschrittspunkte, Umrissknopf. */
.form--vertraulich .form-progress .progress-track { display: none; }
.form--vertraulich .conversation-form .button-primary { color: var(--ochre-text); background: transparent; border: 1px solid var(--ochre); }
.form--vertraulich .conversation-form .button-primary:hover { border-color: var(--ochre-text); background: rgba(184, 121, 36, .08); }
.form-microcopy { margin: 0 0 22px; color: var(--muted); font-size: .95rem; line-height: 1.45; }

/* --- Sprungmarken als Auftakt (/wohnungsaufloesung-nach-todesfall-muenchen/)
   Auf der laengsten Seite ist der Einstieg eine Frage, keine Zusage. */
.question-nav { padding: clamp(44px, 5vw, 76px) 0; }
.question-nav .nav-intro { max-width: 58ch; margin: 14px 0 clamp(24px, 3vw, 34px); color: var(--muted); font-size: var(--fs-body); }
.question-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: transparent; border-top: 1px solid var(--line); counter-reset: qn; }
.question-grid li { border-bottom: 1px solid var(--line); }
.question-grid li + li { border-left: 1px solid var(--line); }
.question-grid a {
  counter-increment: qn;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 18px;
  height: 100%; padding: 24px 26px; color: inherit; text-decoration: none;
  transition: background-color .16s ease;
}
.question-grid a::before { content: counter(qn, decimal-leading-zero); color: var(--ochre-text); font: 400 1.16rem/1.2 var(--font-display); letter-spacing: .06em; }
.question-grid a:focus-visible { outline: 3px solid var(--ochre); outline-offset: -3px; }
.question-grid b { font: 400 1.34rem/1.1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.question-grid span { grid-column: 2; margin-top: 8px; color: var(--muted); font-size: var(--fs-body); line-height: 1.45; }
@media screen and (max-width: 900px) {
  .question-grid { grid-template-columns: 1fr; }
  .question-grid li + li { border-left: 0; }
}

/* --- Antwortblock: Frage als Ueberschrift, Antwort zuerst --- */
.answer-block { padding: clamp(52px, 6vw, 92px) 0; scroll-margin-top: 96px; }
.answer-block + .answer-block { border-top: 1px solid var(--line); }
.answer-block .block-label { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; color: var(--ochre-text); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.answer-block .block-label i { font-style: normal; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .06em; }
.answer-block h2 { max-width: 26ch; text-wrap: balance; }
/* Frage und Kurzantwort links, die Erklaerung rechts. Zweispaltig, damit die
   Seite nicht ueber vier Bloecke hinweg eine tote rechte Haelfte traegt. */
.answer-item { display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(30px, 3.4vw, 46px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); }
.answer-item h3 { max-width: 34ch; text-wrap: balance; margin: 0; font: 400 var(--h3)/1.14 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.answer-lead { margin: 16px 0 0; padding-left: 20px; border-left: 3px solid var(--ochre); font-size: clamp(1.06rem, 1.4vw, 1.24rem); line-height: 1.45; }
.answer-detail > p { max-width: 60ch; margin: 0; font-size: var(--fs-body); }
.answer-detail > p + p { margin-top: 14px; }
.answer-sources { max-width: 60ch; margin: 18px 0 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.5; }
@media screen and (max-width: 940px) {
  .answer-item { grid-template-columns: 1fr; gap: 18px; }
}
.answer-sources a { color: var(--ochre-text); }

/* Rechtsbloecke der Rechtsseite: reine Prosa ohne Zeitleiste, Liste oder
   Bildplatz in der linken Spalte. Eigene, engere Shell und ein schmalerer
   linker Riegel, sonst laeuft rechts ein Viertel der Spalte tot aus. */
@media screen and (min-width: 941px) {
  .answer-block.is-law .answer-item { grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); }
}
@media screen and (max-width: 940px) {
  .answer-block.is-law { --shell: 660px; }
}
/* Materialwechsel in der Mitte der Rechtsstrecke, damit aus drei Bloecken
   nicht eine einzige helle Textsaeule wird. */
.answer-block.is-tinted { background: var(--bone); border-block: 1px solid var(--line-art); }
.answer-block.is-tinted + .answer-block { border-top: 0; }

/* Praxisband der Rechtsseite: was Monique tut, ist kein Recht und steht
   deshalb ausserhalb der Rechtsbloecke (RDG-Regel 8). */
.practice-band { padding: clamp(56px, 6.5vw, 96px) 0; }
.practice-band .practice-lead { margin: 18px 0 0; padding: 16px 0; border-block: 1px solid var(--line-art); font-size: clamp(1.06rem, 1.4vw, 1.24rem); line-height: 1.45; }
.practice-band p + p { margin-top: 14px; }
.practice-band > .shell > p { max-width: none; font-size: var(--fs-body); }
.practice-band .inline-contact-links { margin-top: clamp(24px, 3vw, 34px); padding-top: 20px; border-top: 1px solid var(--line); }

/* B1 · jeder Blockfuss traegt einen Kontaktweg, damit die Rechtsseite
   nicht zwoelf Bildschirme ohne Ausgang laeuft. */
.block-next .block-next-call { margin-left: auto; font-weight: 700; }
.block-next-call:focus-visible,
.inline-contact-links a:focus-visible,
.form-contact-links a:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; }
@media screen and (max-width: 700px) { .block-next .block-next-call { margin-left: 0; } }

/* Aufzaehlung aus Einzelbegriffen: .tip-list ist fuer Icon plus Titel plus
   Erklaerung gebaut und gibt jedem einzelnen Wort eine Zeile mit Haarlinie. */
.plain-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.plain-list li { position: relative; padding-left: 18px; font-size: var(--fs-body); line-height: 1.5; }
.plain-list li::before { content: "\00B7"; position: absolute; left: 2px; color: var(--ochre); font-weight: 700; }
@media screen and (max-width: 560px) { .plain-list { grid-template-columns: 1fr; } }

/* Weiterfuehrung am Fuss eines Antwortblocks. */
.block-next { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: clamp(30px, 3.4vw, 44px) 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: .98rem; }
.block-next a { color: var(--ochre-text); }

/* --- Zusatzpanel mit zwei gleichwertigen Themenbereichen. */
.scope-panel { padding: clamp(40px, 4.6vw, 68px) 0; }
.scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(22px, 2.6vw, 32px); }
.scope-col { padding: 26px 28px; }
.scope-col h3 { margin: 0 0 14px; font: 400 1.28rem/1.15 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.scope-col ul { margin: 0; padding: 0; list-style: none; }
.scope-col li { position: relative; padding-left: 24px; font-size: var(--fs-body); line-height: 1.5; }
.scope-col li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.scope-col li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ochre-text); font-weight: 700; }
.scope-col li + li::before { top: 10px; }
.scope-col:last-child li::before { content: "\00D7"; color: var(--muted); }
.scope-note { margin: clamp(24px, 2.6vw, 32px) 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--fs-body); line-height: 1.6; }
.scope-stand { display: block; margin-top: 8px; color: var(--muted); font-size: .95rem; }
.scope-note a { color: var(--ochre-text); }
@media screen and (max-width: 700px) {
  .scope-grid { grid-template-columns: 1fr; }
  .scope-col:last-child { border-top: 1px solid var(--line-art); background: var(--bone); }
}

/* Kompakte Zweitauswahl innerhalb eines Formularschritts (Zugangsfrage). */
.choice-list-compact { gap: 6px; }
.choice-list-compact label > span { min-height: 42px; padding: 8px 14px; font-size: 1rem; }

/* --- Kontaktbogen (/kontakt/)
   Achte eigene Auftaktfigur: ein Briefbogen. Oben der Briefkopf mit Absender
   und Eckdaten, darunter vier waagerechte Kanalzeilen, in denen der echte Wert
   die grosse Zeile ist. Einspaltig, auf Sand, mit kraeftiger Oberkante statt
   Rahmen - damit ist die Figur gegen fact-strip, room-picker, origin-stack und
   vor allem gegen scope-panel unterscheidbar, deren Gehaeuse sie sonst teilte. */
.contact-sheet { padding: clamp(44px, 5.2vw, 78px) 0; }
.sheet-body { display: grid; margin-top: clamp(24px, 3vw, 36px); border-top: 2px solid var(--ink); }
.sheet-address { padding: clamp(26px, 3vw, 38px) clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px); }
.sheet-brand { margin: 0 0 12px; font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.sheet-address > p { margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.sheet-meta { display: grid; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.sheet-meta dt { color: var(--ochre-text); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sheet-meta dd { margin: 4px 0 0; font-size: var(--fs-body); line-height: 1.5; }
.sheet-channels { display: grid; align-content: start; }
.sheet-channels a { display: grid; gap: 4px clamp(20px, 3vw, 40px); padding: clamp(18px, 2.2vw, 24px) clamp(26px, 3vw, 34px); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background-color .16s ease; }
.sheet-channels a:hover { background: rgba(242, 233, 220, .8); }
.sheet-channels a:focus-visible { outline: 3px solid var(--ochre); outline-offset: -3px; }
.sheet-channels b { grid-row: span 2; align-self: start; font: 400 clamp(1.1rem, 1.5vw, 1.3rem)/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.sheet-channels span { font: 400 clamp(1.24rem, 1.9vw, 1.56rem)/1.15 var(--font-display); letter-spacing: .02em; color: var(--ochre-text); }
.sheet-channels em { font-style: normal; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.sheet-channels a.is-internal b::after { content: " \2193"; color: var(--ochre-text); }
.sheet-channels a[href^="mailto:"] span { font: 600 clamp(1.08rem, 1.5vw, 1.26rem)/1.3 var(--font-body); letter-spacing: 0; overflow-wrap: anywhere; }
.sheet-foot { max-width: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.sheet-foot span { display: block; max-width: 68ch; color: var(--muted); font-size: .98rem; line-height: 1.55; }
@media screen and (max-width: 860px) {
  .sheet-meta { grid-template-columns: 1fr; }
}
@media screen and (max-width: 900px) {
  .sheet-body { background: transparent; border-top-width: 1px; }
  .sheet-address { padding-inline: 0; }
  .sheet-channels a { grid-template-columns: 1fr; padding-inline: 0; }
  .sheet-channels b { grid-row: auto; }
}

/* --- Zusagenpaar (/ueber-monique/)
   Eigene Highlight-Figur der Seite. Links die Zusage in Displayschrift, rechts
   was sie konkret bedeutet. Keine Ziffern, kein Marker, keine Kachel - damit
   unterscheidet sie sich vom Auftakt derselben Seite und von step-flow. */
.pledge-pair { margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-art); }
.pledge-pair > li { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); gap: clamp(20px, 3.4vw, 54px); padding: clamp(24px, 2.8vw, 34px) 0; border-bottom: 1px solid var(--line-art); }
.pledge-pair h3 { margin: 0; max-width: 22ch; text-wrap: balance; font: 400 clamp(1.34rem, 2vw, 1.72rem)/1.14 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.pledge-pair .pledge-kicker { display: block; margin-bottom: 8px; color: var(--ochre-text); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pledge-pair p { margin: 0; font-size: var(--fs-body); line-height: 1.55; }
.pledge-pair p + p { margin-top: 12px; }
.pledge-pair a { color: var(--ochre-text); }
@media screen and (max-width: 860px) {
  .pledge-pair > li { grid-template-columns: 1fr; gap: 14px; }
}

/* --- Werdegang-Auftakt (/ueber-monique/)
   Siebte eigene Auftaktfigur: Bildplatz links, rechts eine stehende Liste mit
   grossen Ziffern als Riegel. Keine waagerechte Zellenreihe, kein Icon - damit
   unterscheidet sie sich vor dem Lesen von fact-strip, room-picker und
   handover-track. */
.origin-stack { padding: clamp(52px, 6vw, 92px) 0; background: var(--bone); }
.origin-intro { max-width: 62ch; margin: 14px 0 0; font-size: var(--fs-body); }
.origin-grid { display: grid; gap: clamp(28px, 4vw, 60px); align-items: start; margin-top: clamp(26px, 3.2vw, 40px); }
.origin-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.origin-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(18px, 2.4vw, 30px); padding: 20px 0; border-bottom: 1px solid var(--line); }
.origin-num { display: grid; justify-items: start; min-width: 1.5em; font-size: clamp(2.3rem, 4vw, 3.2rem); }
.origin-num b { font: 400 1em/1 var(--font-display); letter-spacing: .02em; color: var(--ochre-text); }
.origin-num i { margin-top: 2px; color: var(--muted); font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.origin-list h3 { margin: 0 0 6px; font: 400 1.2rem/1.15 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.origin-list p { max-width: none; margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.origin-outro { max-width: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.origin-outro span { display: block; max-width: 68ch; font-size: var(--fs-body); line-height: 1.55; }
@media screen and (max-width: 860px) {
  .origin-grid { grid-template-columns: 1fr; }
  .origin-num { min-width: 0; }
}

/* --- Verweisblock auf die Rechtsseite (Hub /...-todesfall-muenchen/)
   Eine Zeile pro Frage, damit der Ankertext die Frage selbst ist. */
.pointer-block { padding: clamp(44px, 5vw, 76px) 0; }
.pointer-list { margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pointer-list li { border-bottom: 1px solid var(--line); }
.pointer-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 18px; padding: 15px 2px; color: inherit; text-decoration: none; font-size: var(--fs-body); transition: background-color .16s ease; }
.pointer-list a::after { content: "\2192"; color: var(--ochre-text); }
.pointer-list a span { text-decoration: underline; text-decoration-color: var(--ochre-text); text-underline-offset: 3px; }
.pointer-list a:hover { background: rgba(251, 247, 240, .9); }
.pointer-list a:hover span { text-decoration-color: var(--ochre); }
.pointer-list a:focus-visible { outline: 3px solid var(--ochre); outline-offset: -3px; }

/* --- Kontaktschiene am Fuss langer Abschnitte -----------------
   Eingefuehrt im Abschlussdurchgang 15.09.2026. Gemessen lagen auf
   /kosten/, /haushaltsaufloesung-muenchen/, /wohnungsaufloesung-muenchen/
   und /entruempelung-muenchen/ bei 390 px zwischen 10,1 und 17,1
   Bildschirme ohne einen einzigen Kontaktweg. Die Schiene steht am Fuss
   der Abschnitte, nicht zwischen Aussage und Folge. */
/* Dunkles Register: der Umriss traegt Ocker-hell, damit er auf Anthrazit
   ueberhaupt sichtbar ist. Der Telefon-Button behaelt seine Flaeche. */
.page-hero-dark .inline-contact-links a:not([href^="tel:"]),
.dark-section .inline-contact-links a:not([href^="tel:"]),
.calc-section .contact-rail a:not([href^="tel:"]) { color: var(--ochre-bright); }
.light-links a:not([href^="tel:"]):hover,
.dark-section .inline-contact-links a:not([href^="tel:"]):hover { background: rgba(205, 130, 22, .16); }
.light-links a[href^="tel:"] { color: #fff; }

/* Auf schmalen Schirmen fuellt jeder Weg eine eigene Zeile, sonst brechen die
   Beschriftungen mitten im Button um. */
@media screen and (max-width: 560px) {
  .inline-contact-links, .form-contact-links, .direct-links { gap: 10px; }
  .inline-contact-links a, .form-contact-links a, .direct-links a { flex: 1 1 100%; justify-content: center; }
}

.contact-rail { margin-top: clamp(26px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--line); }
.calc-section .contact-rail, .dark-section .contact-rail { border-top-color: rgba(255, 255, 255, .2); }

/* --- Zusagen-Band (/wohnungsaufloesung-nach-todesfall-muenchen/) ----
   Neunte eigene Auftaktfigur. Keine Kaesten, keine Icons, keine Ziffern -
   die vier Zusagen stehen als Zeilen zwischen Haarlinien, Marke links in
   Displayschrift, Satz rechts. Unterscheidet sich im Gehaeuse von
   .fact-strip (gefuellte Zellenreihe), .room-picker (Icon-Liste) und
   .origin-stack (Bild plus Ziffernliste). */
.pledge-band { padding: clamp(46px, 5.5vw, 78px) 0; }

/* --- Dunkles Register fuer die Anlaufstellen der Rechtsseite ---------
   Punkt 4 des Abschlussdurchgangs: die Seite trug auf 9.483 px keinen
   einzigen dunklen Anker. Der Ruhepunkt sitzt dort, wo die Seite an die
   vier verbindlichen Stellen uebergibt. Sand wird dadurch frei und liegt
   wieder bei drei Fundstellen. */
#anlaufstellen.dark-section .eyebrow.ink { color: var(--ochre-bright); }
#anlaufstellen.dark-section .content-title { color: var(--ivory); }
#anlaufstellen.dark-section p { color: #ddd5c9; }
#anlaufstellen.dark-section .timeline b { color: var(--ivory); }
#anlaufstellen.dark-section .note-box {
  color: #ddd5c9; background: rgba(255, 255, 255, .05);
  border-left-color: var(--ochre-bright);
}
#anlaufstellen.dark-section .note-box strong { color: var(--ivory); }
#anlaufstellen.dark-section a { color: var(--ochre-bright); }

/* --- Kompakte Faktenleiste: offene Fassung ---------------------------
   Punkt 6: .fact-strip stand als Auftakt auf zwei Seiten, mit demselben
   gemessenen Grund. Die kompakte Fassung verliert deshalb ihre Fuellung
   und steht zwischen zwei Haarlinien - anderes Gehaeuse, gleiche Zelle. */
.fact-strip.is-compact { border-block: 1px solid var(--line-art); }

/* Kontrast-Nachzug aus dem Abschlussdurchgang, gemessen am 15.09.2026:
   1) Die Kontaktschiene im dunklen Rechnerregister erbte ueber
      .inline-contact-links a den dunklen Ockerton und stand mit 2,95:1
      auf Charcoal. .light-links allein reicht nicht, die spaetere Regel
      gewinnt.
   2) .situation-card a stand mit 3,39:1 auf der Kartenfuellung - ein
      Befund, der schon vor diesem Durchgang bestand und beim Nachmessen
      aufgefallen ist. */
.calc-section .contact-rail a:not([href^="tel:"]),
.dark-section .contact-rail a:not([href^="tel:"]) { color: var(--ochre-bright); }
/* Der gefuellte Telefon-Button behaelt weissen Text. Ohne die Ausnahme faerbte
   ihn die Regel darueber ockerfarben - Ocker auf Ocker, gemessen unlesbar.
   Dieselbe Falle wie am 14.09.: die spaetere Regel gewinnt. */
.calc-section .contact-rail a[href^="tel:"],
.dark-section .contact-rail a[href^="tel:"],
.page-hero-dark .inline-contact-links a[href^="tel:"],
.final-cta .light-links a[href^="tel:"] { color: #fff; }
.situation-card a { color: var(--ochre-text); }

/* ============================================================
   KOSTENRECHNER · Neubau 15.09.2026
   Eine dunkle Konsole statt heller Karte gegen dunkle Kaesten.
   Drei Schritte, je eine Frage sichtbar; Nebeninformation liegt
   hinter Klappen. Ocker ist der einzige Akzent und gehoert dem
   Ergebnis.
   ============================================================ */
.calc-section { --calc-line: rgba(215, 195, 170, .18); --calc-line-strong: rgba(215, 195, 170, .34); --calc-surface: #1e1e1a; --calc-sunken: #171714; }
.calc-intro { max-width: 48ch; margin: 14px 0 0; color: #ded6ca; font-size: var(--fs-body); }

.calc-console {
  margin-top: clamp(26px, 3vw, 40px);
  padding: clamp(20px, 3vw, 38px);
  border: 1px solid var(--calc-line);
  background: var(--calc-surface);
}

/* Schrittanzeige */
.calc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 clamp(22px, 2.6vw, 32px); padding: 0; list-style: none; counter-reset: none; }
.calc-steps li { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--calc-line); color: #8e877d; font-size: .92rem; transition: color .2s ease, border-color .2s ease; }
.calc-steps li b { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid currentColor; border-radius: 50%; font: 400 .95rem/1 var(--font-display); }
.calc-steps li[data-done] { color: var(--ochre-bright); border-bottom-color: rgba(205, 130, 22, .5); }
.calc-steps li[data-done] b { font-size: 0; background: var(--ochre); border-color: var(--ochre); }
.calc-steps li[data-done] b::after { content: "\2713"; font-size: .85rem; color: var(--charcoal); font-weight: 700; }
.calc-steps li[aria-current="step"] { color: var(--ivory); border-bottom-color: var(--ochre); }
.calc-steps li[aria-current="step"] b { color: var(--charcoal); background: var(--ochre-bright); border-color: var(--ochre-bright); }
@media screen and (max-width: 520px) { .calc-steps li span { display: none; } .calc-steps li { justify-content: center; } }

/* Zusammenfassung bereits erledigter Schritte */
.calc-recap { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.calc-recap button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--calc-line-strong); background: transparent;
  color: #ded6ca; font: inherit; font-size: .92rem; cursor: pointer;
}
.calc-recap button::after { content: "\00B7\0020\00E4ndern"; color: var(--ochre-bright); }
.calc-recap button:hover { border-color: var(--ochre); color: var(--ivory); }
.calc-recap button:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }

/* Ein Schritt */
.calc-stage { animation: calc-in .24s ease both; }
@keyframes calc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media screen and (prefers-reduced-motion: reduce) { .calc-stage { animation: none; } }
.calc-question { margin: 0 0 18px; color: var(--ivory); font: 400 clamp(1.35rem, 2.1vw, 1.7rem)/1.2 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.calc-hint { margin: 14px 0 0; max-width: 56ch; color: #9d968b; font-size: .9rem; line-height: 1.45; }
.calc-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.4vw, 28px); }
.calc-nav .button-ghost { color: #ded6ca; border-color: var(--calc-line-strong); }
.calc-nav .button-ghost:hover { color: var(--ochre-bright); border-color: var(--ochre-bright); }

/* Schritt 1 · Flaeche */
.calc-console .area-slider { max-width: 620px; padding: 0; border: 0; background: transparent; }
.calc-console .area-value strong { color: var(--ivory); font-size: clamp(2.6rem, 6vw, 3.6rem); }
.calc-console .area-value span { color: #e1a64e; }
.calc-console .area-number-label { color: #9d968b; }
.calc-console .area-number-label input { border-color: var(--calc-line-strong); background: var(--calc-sunken); color: var(--ivory); }
.calc-console .area-number-label input:focus { border-color: var(--ochre-bright); outline: 3px solid rgba(205, 130, 22, .28); }
.calc-console .area-slider input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--ochre-bright) 0, var(--ochre-bright) var(--slider-progress), rgba(215, 195, 170, .22) var(--slider-progress), rgba(215, 195, 170, .22) 100%); }
.calc-console .area-slider input[type="range"]::-moz-range-track { background: rgba(215, 195, 170, .22); }
.calc-console .area-slider input[type="range"]::-moz-range-progress { background: var(--ochre-bright); }
.calc-console .area-slider input[type="range"]::-webkit-slider-thumb { border-color: var(--calc-surface); }
.calc-console .area-slider input[type="range"]::-moz-range-thumb { border-color: var(--calc-surface); }
.calc-console .area-scale { color: #c7bfb3; }

/* Schritt 2 · Aufwand als Skala, nicht vier gleiche Karten */
.calc-effort { display: grid; gap: 8px; }
.calc-effort label { position: relative; display: block; cursor: pointer; }
.calc-effort input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-effort span {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px;
  padding: 15px 18px; border: 1px solid var(--calc-line); background: var(--calc-sunken);
  transition: border-color .16s ease, background-color .16s ease;
}
.calc-effort b { grid-column: 1; grid-row: 1; color: var(--ivory); font-size: 1.04rem; }
.calc-effort em { grid-column: 2; grid-row: 1; align-self: baseline; color: var(--ochre-bright); font: 400 1.22rem/1 var(--font-display); font-style: normal; letter-spacing: .02em; white-space: nowrap; }
.calc-effort small { grid-column: 1 / -1; grid-row: 2; color: #9d968b; font-size: .89rem; line-height: 1.4; }
.calc-effort i { grid-column: 1 / -1; grid-row: 3; display: block; height: 3px; margin-top: 10px; background: rgba(215, 195, 170, .16); }
.calc-effort i::before { content: ""; display: block; width: var(--lvl, 0); height: 100%; background: var(--ochre); }
.calc-effort label:hover span { border-color: var(--calc-line-strong); }
.calc-effort input:focus-visible + span { outline: 3px solid var(--ochre); outline-offset: 2px; }
.calc-effort input:checked + span { border-color: var(--ochre); background: rgba(205, 130, 22, .13); }
.calc-effort input:checked + span small { color: #c6bfb4; }
.calc-effort input:checked + span i::before { background: var(--ochre-bright); }
@media screen and (max-width: 420px) {
  .calc-effort span { grid-template-columns: 1fr; }
  .calc-effort em { grid-column: 1; grid-row: 4; justify-self: start; }
}

/* Schritt 3 · das Ergebnis ist das einzige laute Element */
.calc-stage-result .calc-question { color: var(--ochre-bright); font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .14em; margin-bottom: 10px; }
.calc-range { margin: 0; color: var(--ivory); font: 400 clamp(2.4rem, 6.2vw, 3.9rem)/1.02 var(--font-display); letter-spacing: .02em; }
.calc-range small { display: block; margin-top: 12px; color: #9d968b; font: 400 .93rem/1.45 var(--font-body); letter-spacing: 0; }
.calc-note { margin: 18px 0 0; max-width: 56ch; color: #ded6ca; font-size: .98rem; line-height: 1.5; }

/* Nebeninformation: sichtbar erreichbar, nicht dauernd im Weg */
.calc-more { display: grid; gap: 0; margin-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--calc-line); }
.calc-detail { border-bottom: 1px solid var(--calc-line); }
.calc-detail summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 2px; color: #ded6ca; font-size: var(--fs-body); cursor: pointer; list-style: none;
}
.calc-detail summary::-webkit-details-marker { display: none; }
.calc-detail summary span { color: var(--ochre-bright); font: 400 1.5rem/1 var(--font-display); transition: transform .18s ease; }
.calc-detail[open] summary span { transform: rotate(45deg); }
.calc-detail summary:hover { color: var(--ivory); }
.calc-detail summary:focus-visible { outline: 3px solid var(--ochre); outline-offset: -3px; }
.calc-included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0 0 20px; padding: 0; list-style: none; }
.calc-included li { display: flex; gap: 10px; color: #c6bfb4; font-size: .95rem; }
.calc-included li::before { content: "\2713"; color: var(--ochre-bright); font-weight: 700; }
.calc-included.is-extra li::before { content: "+"; }
.calc-fineprint { max-width: 66ch; margin: 0 0 20px; color: #9d968b; font-size: .9rem; line-height: 1.5; }
@media screen and (max-width: 560px) { .calc-included { grid-template-columns: 1fr; } }

/* ============================================================
   FEINSCHLIFF Design-Feedback · 15.09.2026
   ============================================================ */

/* Vier-Schritte-Ablauf: die Zeitleiste trug nur Zahlenkreise an
   einer Haarlinie, links standen ueber 400 px leer. Die kurze
   Spalte laeuft jetzt mit, die Schritte bekommen Gewicht. */
.is-step-item .timeline { margin-top: 0; padding-left: 44px; }
.is-step-item .timeline::before { left: 15px; width: 1px; background: var(--line); }
.is-step-item .timeline > li { padding-bottom: 30px; }
.is-step-item .timeline > li::before { width: 32px; height: 32px; left: -44px; top: -2px; color: var(--ivory); background: var(--ochre); border: 0; font: 400 1.05rem/32px var(--font-display); }
.is-step-item .timeline b { margin-bottom: 7px; font: 400 1.22rem/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.is-step-item .timeline span { font-size: .98rem; line-height: 1.5; }

/* Ungleich lange Eintraege in zwei Spalten erzeugen den Versatz
   zwangslaeufig - diese Liste laeuft einspaltig. */
.plain-list.is-single { grid-template-columns: 1fr; }

/* Zusatzbereich innerhalb einer FAQ-Sektion. */

/* ============================================================
   FEEDBACK 15.09.2026 - TEIL 3: waagerecht statt gestapelt
   ============================================================ */

/* FAQ: Ueberschrift und erste Fragen links, restliche Fragen rechts.
   Vorher stand die Ueberschrift allein in einer Spalte, daneben acht
   Fragen untereinander - halbe Seite leer, halbe Seite Stapel. */

/* Beweis-Sektion: Text links, Slider rechts. Der Slider lief vorher ueber
   die volle Breite und hat den Text darunter optisch erschlagen. */
.proof-layout { display: grid; column-gap: clamp(32px, 4vw, 68px); }
.proof-layout > .content-title { grid-column: 1 / -1; }
.proof-copy { margin-top: 30px; }
.proof-copy p { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-body); }
.proof-copy p:first-child { color: var(--ink); }
.proof-copy p:last-child { margin-bottom: 0; }
.proof-layout .proof-stage { margin-top: 30px; }
.proof-layout .proof-stage .before-after-stage { aspect-ratio: 4 / 3; }
.proof-note { margin: 16px 0 0; color: var(--muted); font-size: var(--fs-body); }

/* Sie-Zone: der Block sass auf 64ch in der linken Bildhaelfte, rechts blieb
   die halbe Sektion leer. Jetzt Kopf links, Text rechts. */
@media screen and (min-width: 946px) {
  .zone-marked .zone-inner { max-width: none; column-gap: clamp(36px, 4vw, 72px); }
}

/* Startseite, Abschnitt "Du weisst vorher": Ueberschrift und Bild in der
   linken Spalte, der Text rechts zweispaltig statt als dritte Saeule. */
@media screen and (min-width: 946px) {
  .story-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; }
}
.story-grid .story-before-after { margin: clamp(20px, 2.4vw, 32px) 0 0; }
.story-grid .before-after-stage { aspect-ratio: 4 / 3; }
@media screen and (min-width: 1081px) {
  .story-copy { max-width: none; columns: 2; column-gap: clamp(28px, 3vw, 46px); font-size: 1.06rem; }
  .story-copy > * { break-inside: avoid; }
  .story-copy p { margin-top: 0; margin-bottom: 15px; }
  .story-copy .text-link { display: inline-block; }
}

/* Fuenf Fragen: Frage und Antwort gehoeren zusammen in eine Kachel, statt
   als drei Spalten auf einer Zeile auseinanderzulaufen. */
.question-flow { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.question-flow li {
  position: relative;
  display: block; padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line-art); border-bottom: 1px solid var(--line-art);
  background: rgba(255, 255, 255, .42);
}
.question-flow li:first-child { border-top: 1px solid var(--line-art); }
.question-flow li::before { display: block; margin-bottom: 12px; font-size: 2.4rem; }
.question-flow b { display: block; margin-bottom: 10px; }
.question-flow span { display: block; }

/* Zwei gleich gebaute Bloecke hintereinander wechseln die Seite. */
@media screen and (min-width: 887px) {
  .content-block.is-mirrored { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
  .content-block.is-mirrored > *:nth-child(1) { grid-column: 2; grid-row: 1; }
  .content-block.is-mirrored > *:nth-child(2) { grid-column: 1; grid-row: 1; }
  .content-block.is-mirrored > .contact-rail { grid-column: 1 / -1; grid-row: 2; }
}

/* Fuenf Kacheln ohne Waise: drei oben, zwei unten. */
@media screen and (min-width: 1081px) {
  .question-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .question-flow li { grid-column: span 2; }
  .question-flow li:nth-child(4), .question-flow li:nth-child(5) { grid-column: span 3; }
}
.question-flow li::before { color: var(--ochre); opacity: .5; }

/* Zitat unter den Vergleichskarten laeuft ueber beide Spalten, statt in einer
   schmalen Saeule zu stapeln. Herkunft steht rechts auf Grundlinie. */
.pull-quote.is-wide { max-width: none; }
@media screen and (min-width: 887px) {
  .pull-quote.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .38fr); column-gap: clamp(32px, 3.4vw, 64px); align-items: end; }
  .pull-quote.is-wide p { max-width: none; margin: 0; }
  .pull-quote.is-wide figcaption { margin: 0; padding-bottom: 4px; }
}

/* ============================================================
   FEEDBACK 15.09.2026 - TEIL 4
   ============================================================ */

/* Preis-Teaser: der Quadratmeterbezug gehoert an die grosse Zahl, sonst liest
   sie sich wie ein Gesamtpreis. */
.price-teaser .teaser-value { min-width: max-content; text-align: right; }
/* In der schmalen Spalte eines content-block passt die Zahl nicht neben den
   Text - sie steht dort unter ihm statt ueber den Rahmen hinauszulaufen. */
.content-block .price-teaser { grid-template-columns: minmax(0, 1fr); }
.content-block .price-teaser .teaser-value { justify-self: start; text-align: left; }
.content-block .price-teaser .teaser-value small { margin-top: 2px; }
.price-teaser .teaser-value small { display: block; margin-top: 4px; color: var(--muted); font: 600 .78rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }

/* Schrittfolge: je Schritt ein Symbol vor dem Titel. */
.timeline b { display: flex; align-items: center; gap: 9px; }
.timeline > li[data-icon] b::before {
  content: ""; flex: 0 0 auto; width: 19px; height: 19px; background: var(--ochre);
  -webkit-mask: var(--step-icon) center / contain no-repeat;
  mask: var(--step-icon) center / contain no-repeat;
}
.timeline > li[data-icon="person"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M128%2C26A102%2C102%2C0%2C1%2C0%2C230%2C128%2C102.12%2C102.12%2C0%2C0%2C0%2C128%2C26ZM71.44%2C198a66%2C66%2C0%2C0%2C1%2C113.12%2C0%2C89.8%2C89.8%2C0%2C0%2C1-113.12%2C0ZM94%2C120a34%2C34%2C0%2C1%2C1%2C34%2C34A34%2C34%2C0%2C0%2C1%2C94%2C120Zm99.51%2C69.64a77.53%2C77.53%2C0%2C0%2C0-40-31.38%2C46%2C46%2C0%2C1%2C0-51%2C0%2C77.53%2C77.53%2C0%2C0%2C0-40%2C31.38%2C90%2C90%2C0%2C1%2C1%2C131%2C0Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="image-square"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M208%2C34H48A14%2C14%2C0%2C0%2C0%2C34%2C48V208a14%2C14%2C0%2C0%2C0%2C14%2C14H208a14%2C14%2C0%2C0%2C0%2C14-14V48A14%2C14%2C0%2C0%2C0%2C208%2C34ZM46%2C208V48a2%2C2%2C0%2C0%2C1%2C2-2H208a2%2C2%2C0%2C0%2C1%2C2%2C2v82.2l-28.1-28.1a14%2C14%2C0%2C0%2C0-19.8%2C0L54.2%2C210H48A2%2C2%2C0%2C0%2C1%2C46%2C208Zm162%2C2H71.17l99.41-99.41a2%2C2%2C0%2C0%2C1%2C2.83%2C0L210%2C147.17V208A2%2C2%2C0%2C0%2C1%2C208%2C210ZM96%2C118A22%2C22%2C0%2C1%2C0%2C74%2C96%2C22%2C22%2C0%2C0%2C0%2C96%2C118Zm0-32A10%2C10%2C0%2C1%2C1%2C86%2C96%2C10%2C10%2C0%2C0%2C1%2C96%2C86Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="file-text"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M212.24%2C83.76l-56-56A6%2C6%2C0%2C0%2C0%2C152%2C26H56A14%2C14%2C0%2C0%2C0%2C42%2C40V216a14%2C14%2C0%2C0%2C0%2C14%2C14H200a14%2C14%2C0%2C0%2C0%2C14-14V88A6%2C6%2C0%2C0%2C0%2C212.24%2C83.76ZM158%2C46.48%2C193.52%2C82H158ZM200%2C218H56a2%2C2%2C0%2C0%2C1-2-2V40a2%2C2%2C0%2C0%2C1%2C2-2h90V88a6%2C6%2C0%2C0%2C0%2C6%2C6h50V216A2%2C2%2C0%2C0%2C1%2C200%2C218Zm-34-82a6%2C6%2C0%2C0%2C1-6%2C6H96a6%2C6%2C0%2C0%2C1%2C0-12h64A6%2C6%2C0%2C0%2C1%2C166%2C136Zm0%2C32a6%2C6%2C0%2C0%2C1-6%2C6H96a6%2C6%2C0%2C0%2C1%2C0-12h64A6%2C6%2C0%2C0%2C1%2C166%2C168Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="clock"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M128%2C26A102%2C102%2C0%2C1%2C0%2C230%2C128%2C102.12%2C102.12%2C0%2C0%2C0%2C128%2C26Zm0%2C192a90%2C90%2C0%2C1%2C1%2C90-90A90.1%2C90.1%2C0%2C0%2C1%2C128%2C218Zm62-90a6%2C6%2C0%2C0%2C1-6%2C6H128a6%2C6%2C0%2C0%2C1-6-6V72a6%2C6%2C0%2C0%2C1%2C12%2C0v50h50A6%2C6%2C0%2C0%2C1%2C190%2C128Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="hand-truck"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M86%2C224a14%2C14%2C0%2C1%2C1-14-14A14%2C14%2C0%2C0%2C1%2C86%2C224Zm130-14a14%2C14%2C0%2C1%2C0%2C14%2C14A14%2C14%2C0%2C0%2C0%2C216%2C210Zm24-32H54V75.31a13.94%2C13.94%2C0%2C0%2C0-4.1-9.9L28.24%2C43.76a6%2C6%2C0%2C1%2C0-8.48%2C8.48L41.41%2C73.9A2%2C2%2C0%2C0%2C1%2C42%2C75.31V178H32a6%2C6%2C0%2C0%2C0%2C0%2C12H240a6%2C6%2C0%2C0%2C0%2C0-12Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="broom"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M234.62%2C218.6C211.35%2C207.29%2C198%2C183%2C198%2C152V134.7a14%2C14%2C0%2C0%2C0-8.82-13l-24.89-9.83a10%2C10%2C0%2C0%2C1-5.59-13L180%2C45.9a26%2C26%2C0%2C0%2C0-15-34.33c-12.95-4.83-27.88%2C1.84-33.31%2C15l-21%2C53.11a10%2C10%2C0%2C0%2C1-13%2C5.61L72.37%2C75a13.9%2C13.9%2C0%2C0%2C0-15.2%2C3.19C36.49%2C99.42%2C26%2C124.26%2C26%2C152a109.53%2C109.53%2C0%2C0%2C0%2C30.62%2C76.16A6%2C6%2C0%2C0%2C0%2C61%2C230H232a6%2C6%2C0%2C0%2C0%2C2.62-11.4ZM65.77%2C86.52a2%2C2%2C0%2C0%2C1%2C2.12-.43l25.4%2C10.29a22%2C22%2C0%2C0%2C0%2C28.63-12.32l21-53c3-7.13%2C11-10.81%2C18-8.21a14%2C14%2C0%2C0%2C1%2C8%2C18.54l-21.36%2C53.1A22.05%2C22.05%2C0%2C0%2C0%2C159.86%2C123l24.88%2C9.83A2%2C2%2C0%2C0%2C1%2C186%2C134.7V152c0%2C1.34%2C0%2C2.65.08%2C4L52.74%2C102.61A110.07%2C110.07%2C0%2C0%2C1%2C65.77%2C86.52ZM114.33%2C218a89.6%2C89.6%2C0%2C0%2C1-25.5-43.5%2C6%2C6%2C0%2C1%2C0-11.62%2C3A102.87%2C102.87%2C0%2C0%2C0%2C97.81%2C218H63.56A97.56%2C97.56%2C0%2C0%2C1%2C38%2C152a87.42%2C87.42%2C0%2C0%2C1%2C8.71-38.86L187.35%2C169.4c3.15%2C19.92%2C11.77%2C36.66%2C25%2C48.6Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="magnifying-glass"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M228.24%2C219.76l-51.38-51.38a86.15%2C86.15%2C0%2C1%2C0-8.48%2C8.48l51.38%2C51.38a6%2C6%2C0%2C0%2C0%2C8.48-8.48ZM38%2C112a74%2C74%2C0%2C1%2C1%2C74%2C74A74.09%2C74.09%2C0%2C0%2C1%2C38%2C112Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="user-circle"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M128%2C26A102%2C102%2C0%2C1%2C0%2C230%2C128%2C102.12%2C102.12%2C0%2C0%2C0%2C128%2C26ZM71.44%2C198a66%2C66%2C0%2C0%2C1%2C113.12%2C0%2C89.8%2C89.8%2C0%2C0%2C1-113.12%2C0ZM94%2C120a34%2C34%2C0%2C1%2C1%2C34%2C34A34%2C34%2C0%2C0%2C1%2C94%2C120Zm99.51%2C69.64a77.53%2C77.53%2C0%2C0%2C0-40-31.38%2C46%2C46%2C0%2C1%2C0-51%2C0%2C77.53%2C77.53%2C0%2C0%2C0-40%2C31.38%2C90%2C90%2C0%2C1%2C1%2C131%2C0Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="archive-box"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M224%2C50H32A14%2C14%2C0%2C0%2C0%2C18%2C64V88a14%2C14%2C0%2C0%2C0%2C14%2C14h2v90a14%2C14%2C0%2C0%2C0%2C14%2C14H208a14%2C14%2C0%2C0%2C0%2C14-14V102h2a14%2C14%2C0%2C0%2C0%2C14-14V64A14%2C14%2C0%2C0%2C0%2C224%2C50ZM210%2C192a2%2C2%2C0%2C0%2C1-2%2C2H48a2%2C2%2C0%2C0%2C1-2-2V102H210ZM226%2C88a2%2C2%2C0%2C0%2C1-2%2C2H32a2%2C2%2C0%2C0%2C1-2-2V64a2%2C2%2C0%2C0%2C1%2C2-2H224a2%2C2%2C0%2C0%2C1%2C2%2C2ZM98%2C136a6%2C6%2C0%2C0%2C1%2C6-6h48a6%2C6%2C0%2C0%2C1%2C0%2C12H104A6%2C6%2C0%2C0%2C1%2C98%2C136Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="tag"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M241.91%2C137.42%2C142.59%2C38.1a13.94%2C13.94%2C0%2C0%2C0-9.9-4.1H40a6%2C6%2C0%2C0%2C0-6%2C6v92.69a13.94%2C13.94%2C0%2C0%2C0%2C4.1%2C9.9l99.32%2C99.32a14%2C14%2C0%2C0%2C0%2C19.8%2C0l84.69-84.69A14%2C14%2C0%2C0%2C0%2C241.91%2C137.42Zm-8.49%2C11.31-84.69%2C84.69a2%2C2%2C0%2C0%2C1-2.83%2C0L46.59%2C134.1a2%2C2%2C0%2C0%2C1-.59-1.41V46h86.69a2%2C2%2C0%2C0%2C1%2C1.41.59l99.32%2C99.31A2%2C2%2C0%2C0%2C1%2C233.42%2C148.73ZM94%2C84A10%2C10%2C0%2C1%2C1%2C84%2C74%2C10%2C10%2C0%2C0%2C1%2C94%2C84Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="hand-coins"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M229.12%2C142.65a22.43%2C22.43%2C0%2C0%2C0-19.55-3.88l-45.24%2C10.4A26%2C26%2C0%2C0%2C0%2C140%2C114H89.94a29.78%2C29.78%2C0%2C0%2C0-21.21%2C8.79L45.52%2C146H16A14%2C14%2C0%2C0%2C0%2C2%2C160v40a14%2C14%2C0%2C0%2C0%2C14%2C14H120a6%2C6%2C0%2C0%2C0%2C1.46-.18l64-16a7.16%2C7.16%2C0%2C0%2C0%2C.89-.3L225.17%2C181l.33-.15a22.6%2C22.6%2C0%2C0%2C0%2C3.62-38.18ZM14%2C200V160a2%2C2%2C0%2C0%2C1%2C2-2H42v44H16A2%2C2%2C0%2C0%2C1%2C14%2C200Zm206.28-30-38.2%2C16.27L119.26%2C202H54V154.49l23.21-23.22A17.88%2C17.88%2C0%2C0%2C1%2C89.94%2C126H140a14%2C14%2C0%2C0%2C1%2C0%2C28H112a6%2C6%2C0%2C0%2C0%2C0%2C12h32a6%2C6%2C0%2C0%2C0%2C1.34-.15l67-15.41.24-.06A10.6%2C10.6%2C0%2C0%2C1%2C220.28%2C170ZM164%2C94a34.54%2C34.54%2C0%2C0%2C0%2C7.28-.78%2C34%2C34%2C0%2C1%2C0%2C25.46-42.43A34%2C34%2C0%2C1%2C0%2C164%2C94Zm62-10a22%2C22%2C0%2C1%2C1-22-22A22%2C22%2C0%2C0%2C1%2C226%2C84ZM164%2C38a21.94%2C21.94%2C0%2C0%2C1%2C21.51%2C17.49%2C34%2C34%2C0%2C0%2C0-15.38%2C25.65A22%2C22%2C0%2C1%2C1%2C164%2C38Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="key"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M215.15%2C40.85A78%2C78%2C0%2C0%2C0%2C86.2%2C121.31l-56.1%2C56.1a13.94%2C13.94%2C0%2C0%2C0-4.1%2C9.9V216a14%2C14%2C0%2C0%2C0%2C14%2C14H72a6%2C6%2C0%2C0%2C0%2C6-6V206H96a6%2C6%2C0%2C0%2C0%2C6-6V182h18a6%2C6%2C0%2C0%2C0%2C4.24-1.76l10.45-10.44A77.59%2C77.59%2C0%2C0%2C0%2C160%2C174h.1A78%2C78%2C0%2C0%2C0%2C215.15%2C40.85ZM226%2C98.16c-1.12%2C35.16-30.67%2C63.8-65.88%2C63.84a65.93%2C65.93%2C0%2C0%2C1-24.51-4.67%2C6%2C6%2C0%2C0%2C0-6.64%2C1.26L117.51%2C170H96a6%2C6%2C0%2C0%2C0-6%2C6v18H72a6%2C6%2C0%2C0%2C0-6%2C6v18H40a2%2C2%2C0%2C0%2C1-2-2V187.31a2%2C2%2C0%2C0%2C1%2C.58-1.41l58.83-58.83a6%2C6%2C0%2C0%2C0%2C1.26-6.64A65.61%2C65.61%2C0%2C0%2C1%2C94%2C95.92C94%2C60.71%2C122.68%2C31.16%2C157.83%2C30A66%2C66%2C0%2C0%2C1%2C226%2C98.16ZM190%2C76a10%2C10%2C0%2C1%2C1-10-10A10%2C10%2C0%2C0%2C1%2C190%2C76Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="buildings"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M240%2C210H222V96a14%2C14%2C0%2C0%2C0-14-14H142V32a14%2C14%2C0%2C0%2C0-21.77-11.64l-80%2C53.33A14%2C14%2C0%2C0%2C0%2C34%2C85.34V210H16a6%2C6%2C0%2C0%2C0%2C0%2C12H240a6%2C6%2C0%2C0%2C0%2C0-12ZM208%2C94a2%2C2%2C0%2C0%2C1%2C2%2C2V210H142V94ZM46%2C85.34a2%2C2%2C0%2C0%2C1%2C.89-1.66l80-53.34A2%2C2%2C0%2C0%2C1%2C130%2C32V210H46ZM110%2C112v16a6%2C6%2C0%2C0%2C1-12%2C0V112a6%2C6%2C0%2C0%2C1%2C12%2C0Zm-32%2C0v16a6%2C6%2C0%2C0%2C1-12%2C0V112a6%2C6%2C0%2C0%2C1%2C12%2C0Zm0%2C56v16a6%2C6%2C0%2C0%2C1-12%2C0V168a6%2C6%2C0%2C0%2C1%2C12%2C0Zm32%2C0v16a6%2C6%2C0%2C0%2C1-12%2C0V168a6%2C6%2C0%2C0%2C1%2C12%2C0Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="shield-check"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M208%2C42H48A14%2C14%2C0%2C0%2C0%2C34%2C56v56c0%2C51.94%2C25.12%2C83.4%2C46.2%2C100.64%2C22.73%2C18.6%2C45.27%2C24.89%2C46.22%2C25.15a6%2C6%2C0%2C0%2C0%2C3.16%2C0c.95-.26%2C23.49-6.55%2C46.22-25.15C196.88%2C195.4%2C222%2C163.94%2C222%2C112V56A14%2C14%2C0%2C0%2C0%2C208%2C42Zm2%2C70c0%2C37.76-13.94%2C68.39-41.44%2C91.06A131.17%2C131.17%2C0%2C0%2C1%2C128%2C225.72a130.94%2C130.94%2C0%2C0%2C1-40.56-22.66C59.94%2C180.39%2C46%2C149.76%2C46%2C112V56a2%2C2%2C0%2C0%2C1%2C2-2H208a2%2C2%2C0%2C0%2C1%2C2%2C2ZM172.24%2C99.76a6%2C6%2C0%2C0%2C1%2C0%2C8.48l-56%2C56a6%2C6%2C0%2C0%2C1-8.48%2C0l-24-24a6%2C6%2C0%2C0%2C1%2C8.48-8.48L112%2C151.51l51.76-51.75A6%2C6%2C0%2C0%2C1%2C172.24%2C99.76Z%22%2F%3E%20%3C%2Fsvg%3E"); }
.timeline > li[data-icon="receipt"] { --step-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M182%2C104a6%2C6%2C0%2C0%2C1-6%2C6H80a6%2C6%2C0%2C0%2C1%2C0-12h96A6%2C6%2C0%2C0%2C1%2C182%2C104Zm-6%2C26H80a6%2C6%2C0%2C0%2C0%2C0%2C12h96a6%2C6%2C0%2C0%2C0%2C0-12Zm54-74V208a6%2C6%2C0%2C0%2C1-2.85%2C5.1%2C5.93%2C5.93%2C0%2C0%2C1-3.15.9%2C6%2C6%2C0%2C0%2C1-2.68-.63L192%2C198.71l-29.32%2C14.66a6%2C6%2C0%2C0%2C1-5.36%2C0L128%2C198.71%2C98.68%2C213.37a6%2C6%2C0%2C0%2C1-5.36%2C0L64%2C198.71%2C34.68%2C213.37A6%2C6%2C0%2C0%2C1%2C26%2C208V56A14%2C14%2C0%2C0%2C1%2C40%2C42H216A14%2C14%2C0%2C0%2C1%2C230%2C56Zm-12%2C0a2%2C2%2C0%2C0%2C0-2-2H40a2%2C2%2C0%2C0%2C0-2%2C2V198.29l23.32-11.66a6%2C6%2C0%2C0%2C1%2C5.36%2C0L96%2C201.29l29.32-14.66a6%2C6%2C0%2C0%2C1%2C5.36%2C0L160%2C201.29l29.32-14.66a6%2C6%2C0%2C0%2C1%2C5.36%2C0L218%2C198.29Z%22%2F%3E%20%3C%2Fsvg%3E"); }

/* Schritt fuer Schritt: was noch nicht erreicht ist, steht zurueck. Die Klasse
   setzt erst das Skript, damit ohne JavaScript alles voll lesbar bleibt. */
.timeline.is-stepwise > li { opacity: .32; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.timeline.is-stepwise > li.is-reached { opacity: 1; transform: none; }
.timeline.is-stepwise > li::before { transition: background-color .45s ease, color .45s ease, border-color .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .timeline.is-stepwise > li { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   V2 – GEMEINSAMES REDAKTIONELLES SYSTEM
   ============================================================ */
.hero-service-title {
  position: relative; z-index: 2; margin: 0 0 clamp(18px, 2vw, 30px);
  color: var(--ivory); font: 600 clamp(.86rem, 1.1vw, 1.05rem)/1.35 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
}
.section-kicker { margin: 0 0 14px; color: var(--ochre-text); font-weight: 700; letter-spacing: .04em; }
.content-title--small { margin: 0 0 20px; font-size: clamp(1.7rem, 2.6vw, 2.5rem); }

/* Fünf belastbare Zusagen bilden eine ruhige Zeile. */

/* Illustrationen erklären einen Abschnitt und bleiben visuell Teil des
   Papier- und Ockersystems. */
.illustration-grid {
  display: grid; gap: clamp(12px, 1.7vw, 22px); margin: clamp(26px, 4vw, 46px) 0;
}
.illustration-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.illustration-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.illustration-grid figure, .law-illustration {
  min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line-art);
  background: rgba(255,255,255,.46); box-shadow: 0 14px 34px rgba(35,29,22,.07);
}
.illustration-grid img, .law-illustration img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
}
.illustration-grid figcaption {
  padding: 12px 14px; color: var(--muted); font-size: .88rem; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase;
}
.illustration-grid--compact { gap: 10px; margin: 22px 0 26px; }
.illustration-grid--compact figcaption { padding: 9px 10px; font-size: .72rem; }
.is-on-dark figure { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); box-shadow: none; }
.is-on-dark figcaption { color: #ded6ca; }
.illustration-figure img { object-fit: contain; background: #f4eee5; }
.law-illustration { max-width: 520px; margin: 28px 0 38px; }

/* Bedienbare Abläufe: kurze Reiter oben, jeweils ein gut lesbarer Schritt. */
.process-switcher { min-width: 0; max-width: 100%; margin: 32px 0 8px; }
.answer-item > *, .answer-detail { min-width: 0; }
.process-tabs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; padding: 1px; background: var(--line-art);
}
.process-tabs button {
  min-height: 74px; padding: 12px; border: 0; color: var(--charcoal); background: var(--paper);
  font: 700 .8rem/1.25 var(--font-body); text-align: left; cursor: pointer;
}
.process-tabs button span { display: block; margin-bottom: 5px; color: var(--ochre); font-size: .72rem; }
.process-tabs button[aria-selected="true"] { color: var(--ivory); background: var(--charcoal); }
.process-tabs button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--ochre-bright); outline-offset: 2px; }
.process-panel {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(22px, 4vw, 52px);
  align-items: center; min-height: 230px; padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line-art); border-top: 0; background: rgba(255,255,255,.45);
}
.process-panel > div:only-child { grid-column: 1 / -1; max-width: 66ch; }
.process-panel img { display: block; width: 100%; height: 210px; object-fit: cover; }
.process-panel h3 { margin: 6px 0 12px; font: 400 clamp(1.5rem, 2.3vw, 2.25rem)/1.08 var(--font-display); text-transform: uppercase; }
.process-panel p { margin: 0; color: var(--muted); }
.dark-section .process-tabs, .zone-marked .process-tabs { background: rgba(255,255,255,.2); }
.dark-section .process-panel, .zone-marked .process-panel { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.dark-section .process-tabs button, .zone-marked .process-tabs button { color: var(--ivory); background: rgba(255,255,255,.08); }
.dark-section .process-tabs button[aria-selected="true"], .zone-marked .process-tabs button[aria-selected="true"] { background: var(--ochre); }
.dark-section .process-panel h3, .zone-marked .process-panel h3 { color: var(--ivory); }
.dark-section .process-panel p, .zone-marked .process-panel p { color: #ded6ca; }

.form-actions + .direct-links { margin-top: 24px; }
.process-grid .process-illustration { display: block; width: calc(100% + 2px); height: 150px; margin: -1px -1px 20px; object-fit: cover; }
.page-hero-light--editorial { padding: clamp(24px, 4vw, 64px); }
.page-hero-editorial { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(35,29,22,.12)); }
.region-illustration { max-width: 520px; }

.cost-anatomy { margin-top: 28px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line-art); background: var(--ivory); }
.cost-anatomy h3 { margin: 0 0 24px; font: 400 clamp(1.45rem, 2.4vw, 2rem)/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.cost-anatomy-bar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(180px, 1fr); }
.cost-anatomy-fixed, .cost-anatomy-variable { padding: clamp(18px, 2.4vw, 28px); border: 2px solid var(--charcoal); }
.cost-anatomy-fixed { background: #d5a45f; }
.cost-anatomy-variable { border-left: 0; border-right-style: dashed; background: #f0e7dc; }
.cost-anatomy ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.cost-anatomy li { position: relative; padding-top: 34px; font-weight: 700; font-size: .88rem; text-align: center; }
.cost-anatomy li::before { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; transform: translateX(-50%); content: "✓"; border: 1px solid currentColor; border-radius: 50%; line-height: 22px; }
.cost-anatomy p { margin: 0; }
.cost-anatomy strong, .cost-anatomy span { display: block; }
.cost-anatomy strong { font-size: 1.02rem; }
.cost-anatomy span { margin-top: 5px; color: #4f4a43; font-size: .9rem; }
.cost-anatomy-variable { display: flex; align-items: flex-end; }
.cost-anatomy-note { margin-top: 16px !important; padding-top: 14px; border-top: 1px dashed var(--charcoal); color: var(--muted); font-size: .9rem; }
.b2b-teaser { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: clamp(22px, 4vw, 56px); align-items: center; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.2); }
.b2b-teaser p, .b2b-teaser ul { margin: 0; }
.b2b-teaser ul { display: grid; gap: 8px; padding-left: 20px; }

@media screen and (max-width: 1080px) {
  .illustration-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 720px) {
  .hero-service-title { margin-bottom: 16px; font-size: .78rem; }
  .illustration-grid--three, .illustration-grid--four { grid-template-columns: 1fr; }
  .illustration-grid { max-width: 520px; }
  .illustration-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .illustration-grid--compact figcaption { display: none; }
  .process-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .process-tabs button { flex: 0 0 148px; scroll-snap-align: start; }
  .process-panel { grid-template-columns: 1fr; min-height: 260px; padding: 24px 20px; }
  .process-panel img { height: auto; max-height: 260px; object-fit: contain; }
  .cost-anatomy-bar { grid-template-columns: 1fr; }
  .cost-anatomy-variable { min-height: 125px; border-top: 0; border-left: 2px solid var(--charcoal); border-right-style: dashed; border-bottom-style: dashed; }
  .cost-anatomy ul { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .b2b-teaser { grid-template-columns: 1fr; }
}

/* ============================================================
   FEEDBACK 16.09.2026 – VERBINDLICHES CONTAINER- UND SPALTENSYSTEM

   Jede redaktionelle Sektion folgt demselben Prinzip:
   1. Die Ueberschrift belegt eine eigene, volle Rasterzeile.
   2. Darunter stehen Inhalte in klaren 50/50-Spalten.
   3. Drei- und Vierergruppen teilen den verfuegbaren Raum gleichmaessig.
   4. Unter 886 px wird daraus eine lineare, gut lesbare Mobilreihenfolge.
   ============================================================ */

/* Volle Ueberschriftszeile, darunter zwei gleichwertige Inhaltsspalten. */
.content-block {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: clamp(26px, 3vw, 42px);
  align-items: end;
}
.content-block > .content-title {
  grid-column: 1 / -1;
  grid-row: 1;
  max-width: none !important;
  margin-bottom: 0;
}
.content-block > .content-title + * { grid-column: 1; grid-row: 2; }
.content-block > .content-title + * + *:not(.contact-rail) { grid-column: 2; grid-row: 2; }
.content-block > .contact-rail { grid-column: 1 / -1; grid-row: 3; }
.content-block.is-mirrored > .content-title { grid-column: 1 / -1; grid-row: 1; }
.content-block.is-mirrored > .content-title + * { grid-column: 2; grid-row: 2; }
.content-block.is-mirrored > .content-title + * + *:not(.contact-rail) { grid-column: 1; grid-row: 2; }
.content-block .block-figure,
.content-block .media-figure { margin-top: 0 !important; }

/* Startseiten-Einstieg: Titel ueber der gesamten Breite, Text darunter in
   zwei gleich breiten Lesespalten. */
.hero-copy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: clamp(24px, 3vw, 38px);
}
.hero-copy-grid > .content-title {
  grid-column: 1 / -1;
  max-width: none;
  margin-bottom: 0;
}
.hero-copy-grid > .hero-copy-body {
  grid-column: 1 / -1;
  max-width: none;
  columns: 2;
  column-gap: clamp(32px, 4vw, 64px);
}
.hero-copy-body > * { break-inside: avoid; }

/* Story: H2 volle Breite, darunter 50 % Bild und zwei Textspalten zu je 25 %. */
.story-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: clamp(26px, 3vw, 42px);
  align-items: end;
}
.story-grid > .content-title {
  grid-column: 1 / -1;
  grid-row: 1;
  max-width: none;
  margin: 0;
}
.story-grid > .content-title + div { grid-column: 1; grid-row: 2; }
.story-grid > .story-copy { grid-column: 2; grid-row: 2; align-self: end; }
.story-grid .story-before-after { margin-top: 0; }

/* Weitere wiederkehrende Zwei-Spalten-Module halten exakt dieselbe Achse. */
.proof-layout,
.sensitive-grid,
.quote-grid,
.origin-grid,
.zone-business .business-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Anfrage: innerhalb des Containers bleiben, ohne negative Ausdehnung nach
   rechts. Formular und Portrait belegen je 50 Prozent. */
.estimate { overflow: hidden; }
.estimate-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(calc(100% - 48px), var(--shell));
  max-width: var(--shell);
}
.estimate-layout > .estimate-copy,
.conversation-form { padding-right: clamp(28px, 4vw, 64px); }
.form-intro {
  min-width: 0;
  max-width: 100%;
  margin-right: 0;
  /* Die schwarze Flaeche bleibt im Container; die gemalte linke Kante darf
     jedoch sichtbar in die Formularspalte hineinragen. */
  overflow: visible;
}
.form-intro-copy,
.form-intro-note { max-width: calc(100% - 48px); }

/* FAQ: Kopf volle Breite, beide Listen beginnen und enden auf einer Achse. */
@media screen and (min-width: 946px) {
  .faq-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: clamp(24px, 3vw, 38px);
    align-items: stretch;
  }
  .faq-layout > .faq-head {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 0;
  }
  .faq-layout > .faq-head .content-title { max-width: none; margin-bottom: 0; }
  .faq-layout > .faq-list.is-left { grid-column: 1; grid-row: 2; }
  .faq-layout > .faq-list.is-right { grid-column: 2; grid-row: 2; }
  .faq-list { display: flex; flex-direction: column; height: 100%; }
}

/* Konkrete Rueckmeldungen aus den Screenshots. */
.hero-service-title { max-width: 52ch; }
.quote-card > :not(.quote-plant) { position: relative; z-index: 2; }
.quote-plant { z-index: 1; pointer-events: none; }
.reviews-head { display: block; }

@media screen and (max-width: 945px) {
  .content-block,
  .hero-copy-grid,
  .story-grid,
  .proof-layout,
  .sensitive-grid,
  .quote-grid,
  .origin-grid,
  .zone-business .business-grid {
    grid-template-columns: 1fr;
  }
  .content-block > .content-title,
  .content-block > .content-title + *,
  .content-block > .content-title + * + *:not(.contact-rail),
  .content-block.is-mirrored > .content-title,
  .content-block.is-mirrored > .content-title + *,
  .content-block.is-mirrored > .content-title + * + *:not(.contact-rail),
  .content-block > .contact-rail,
  .story-grid > .content-title,
  .story-grid > .content-title + div,
  .story-grid > .story-copy {
    grid-column: 1;
    grid-row: auto;
  }
  .hero-copy-grid > .hero-copy-body { columns: 1; }
  .faq-layout { gap: 0; }
  .faq-head { margin-bottom: 22px; }
  .faq-list + .faq-list { margin-top: 0; }
  .estimate-layout { width: 100%; max-width: none; }
  .estimate-layout > .estimate-copy {
    width: min(calc(100% - 48px), var(--shell));
    margin-inline: auto;
    padding: 0;
  }
  .form-intro-note {
    right: auto;
    width: 46%;
    max-width: 18ch;
  }
}

@media screen and (max-width: 720px) {
  .hero-service-title { max-width: 100%; }
  .quote-card { padding-right: 112px; }
  .quote-plant { right: -20px; width: 125px; opacity: .42; }
  .estimate-layout > .estimate-copy,
  .conversation-form,
  .fallback-form { width: calc(100% - 40px); }
  .form-intro-copy { max-width: 48%; padding-left: 20px; }
  .form-intro-note { width: 44%; max-width: 17ch; margin-left: 20px; }
}

/* ============================================================
   Feedback-Runde 16.09.2026: klare Inhaltsachsen und Bild/Text-Einheiten
   ============================================================ */

/* Startseite: Ueberschrift steht als eigene Zeile, darunter echtes 50/50. */
.sensitive-grid > .content-title { grid-column: 1 / -1; margin: 0; max-width: none; }
.sensitive-grid > .sensitive-copy { grid-column: 1; max-width: none; }
.sensitive-grid > figure { grid-column: 2; width: 100%; margin: 0; }
.sensitive-grid .before-after-stage { height: 100%; min-height: 420px; }
.treasure-home .content-block { align-items: stretch; }
.treasure-home .block-figure { height: calc(100% - 54px); min-height: 430px; }
.treasure-home .block-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Haushaltsaufloesung: Zitat mittig; Beweis als bewusstes 50/50-Modul. */
.section-paper .content-block > div:has(> .pull-quote:only-child) { align-self: center; }
.proof-layout { align-items: center; }
.proof-layout > .proof-copy { grid-column: 1; grid-row: 1; }
.proof-layout > .proof-stage { grid-column: 2; grid-row: 1; margin-top: 0; }
.proof-copy .content-title { margin-bottom: clamp(22px, 3vw, 36px); }

/* Drei Bilder gehoeren direkt zu den ersten drei Entscheidungskarten. */
.question-flow--illustrated li { overflow: hidden; }
.question-flow--illustrated li::before { margin-top: 0; }

/* Ablauf: links eine ruhige Navigation, rechts nur der aktive Schritt. */

/* Todesfall-Hinweis: klare 5/7-Aufteilung plus Illustration als drittes Element. */
@media screen and (min-width: 946px) {
  .zone-marked .zone-inner { position: relative; }
  .zone-marked .zone-head { align-self: start; }
  .zone-marked .zone-body { padding-right: min(24vw, 350px); }
  .zone-marked .zone-illustration { right: 0; bottom: 2%; }
}
.zone-marked .zone-badge { display: block; max-width: 18ch; font: 400 clamp(1.35rem, 2.2vw, 2rem)/1.04 var(--font-display); letter-spacing: .05em; }
.zone-marked #todesfall-title { margin-top: 18px; font-size: clamp(2rem, 3.2vw, 3.25rem); }
.zone-illustration img { display: block; width: 100%; height: auto; object-fit: contain; }

/* Illustration und Preis bilden eine visuelle Einheit. */
.value-composition { align-items: start; }

.cost-shell > .content-title { max-width: 26ch; }
.cost-intro { max-width: 76ch; margin: 18px 0 clamp(36px, 5vw, 60px); }
.cost-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.cost-example { min-width: 0; margin: 0; padding-top: 22px; border-top: 2px solid var(--ochre); }
.cost-example h3 { max-width: none; margin: 0 0 16px; font: 400 clamp(1.45rem, 2.1vw, 1.95rem)/1.1 var(--font-display); text-transform: uppercase; }
.cost-example p { max-width: 56ch; margin: 0; }
.cost-example strong { color: var(--ochre-text); font-weight: 700; white-space: nowrap; }
.cost-conclusion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(44px, 6vw, 76px); padding-top: 26px; border-top: 1px solid var(--line-art); }
.cost-conclusion h3 { max-width: 18ch; margin: 0; font: 400 clamp(1.5rem, 2.3vw, 2rem)/1.12 var(--font-display); text-transform: uppercase; }
.cost-conclusion p { max-width: 70ch; margin: 0; }

.value-market-grid { align-items: start; }
.value-market-visual { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.value-market-visual > figure { width: 100%; margin: 0; overflow: hidden; }
.value-market-visual > figure img { display: block; width: 100%; height: auto; max-height: 500px; object-fit: cover; object-position: center 32%; }
.value-market-visual > .button { max-width: 100%; }
.value-market-copy { max-width: none; }
.value-market-copy > p:first-child { margin-top: 0; }
.business-clear-grid { align-items: start; }
.business-clear-grid > div { min-width: 0; }
.business-clear-copy { max-width: none; }
.business-clear-copy > p:first-child { margin-top: 0; }
.business-clear-visual .before-after { margin-top: 0; }
.business-clear-grid > .contact-rail { grid-column: 1 / -1; margin-top: 0; }

.zone-business .business-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.zone-business .business-copy .content-title { max-width: 15ch; margin-top: 20px; }
.zone-business .business-audience-grid { align-items: start; }
.zone-business .business-audience-grid .business-copy > * { max-width: none; }
.zone-business .business-audience-grid .zone-badge { display: block; width: 100%; }
.zone-business .business-audience-grid .business-copy .content-title { max-width: none; }
.handover-grid { align-items: start; }
.handover-copy > p:first-child { margin-top: 0; }
.handover-visual .before-after { margin-top: 0 !important; }
.handover-followup { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line-art); }
.handover-followup > * { min-width: 0; margin: 0; }
.handover-followup .button-ghost { justify-content: center; text-align: center; }
.handover-followup .text-link { margin-top: 0; }
@media screen and (min-width: 946px) {
  .value-market-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .business-clear-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .zone-business .business-audience-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .handover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 945px) {
  .handover-followup { grid-template-columns: 1fr; gap: 18px; }
  .handover-followup .button-ghost { justify-self: start; }
}
.business-panel { position: relative; display: block; margin: 0; padding: clamp(28px, 4vw, 46px); border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.07); }
.business-panel .business-icon { width: 72px; height: 72px; margin-bottom: 22px; filter: brightness(0) invert(1); opacity: .86; }
.business-panel ul { margin: 22px 0; }

/* Nebenraeume und stark belastete Wohnungen: je zwei tragende Spalten. */
.basement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.basement-grid > .content-title { grid-column: 1 / -1; max-width: none !important; }
.basement-copy { grid-column: 1; max-width: none; }
.basement-copy > p:first-child { margin-top: 0; }
.basement-action { margin-top: 30px; }
.basement-example { grid-column: 2; margin: 0; overflow: hidden; border: 1px solid var(--line-art); background: #FCF9F3; }
.basement-example > img { display: block; width: 100%; height: auto; background: #FCF9F3; }
.basement-example-copy { padding: clamp(22px, 3vw, 36px); }
.basement-example-copy h3 { margin: 0 0 14px; font: 400 clamp(1.5rem, 2.3vw, 2rem)/1.1 var(--font-display); text-transform: uppercase; }
.basement-example-copy p { margin: 0; }
.basement-example-copy strong { color: var(--ochre-text); }
.basement-grid > .contact-rail { grid-column: 1 / -1; margin: 0; }

@media screen and (max-width: 945px) {
  .sensitive-grid > .content-title, .sensitive-grid > .sensitive-copy, .sensitive-grid > figure, .proof-layout > .proof-copy, .proof-layout > .proof-stage { grid-column: 1; grid-row: auto; }
  .sensitive-grid .before-after-stage { min-height: 0; }
  .proof-layout > .proof-stage { margin-top: 8px; }
  .zone-marked .zone-illustration { max-width: 420px; margin: 28px auto 0; }
  .basement-grid { grid-template-columns: 1fr; }
  .basement-grid > .content-title, .basement-copy, .basement-example, .basement-grid > .contact-rail { grid-column: 1; }
}

@media screen and (max-width: 620px) {
  .cost-examples, .cost-conclusion { grid-template-columns: 1fr; }
  .cost-examples { gap: 36px; }
  .cost-conclusion { gap: 16px; }
}

/* ============================================================
   Feedback 16.09.2026 – Formular und Haushaltsaufloesung
   ============================================================ */

/* Desktop: Formular 2/3, Portraitflaeche 1/3. Schwarz laeuft rechts bis an
   den Viewportrand, waehrend alle Inhalte auf der gemeinsamen Shell bleiben. */
@media screen and (min-width: 946px) {
  .estimate-layout { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); }
  .form-intro::before {
    display: block; position: absolute; z-index: 0; top: 0; bottom: 0; left: 100%;
    width: 100vw; content: "";
    background: var(--charcoal) url("assets/texture/grain/paper-grain-charcoal.webp");
  }
  .form-intro-copy, .form-intro-note, .form-portrait { z-index: 6; }
}

/* Vorher/Nachher: quadratische Raumserie, Text vollstaendig links. */
.proof-layout .before-after-stage { aspect-ratio: 1; }
.proof-layout .proof-note { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-art); color: var(--muted); }

/* Entscheidungskarten: eine durchgehende Papierfarbe; Nummern sitzen mit
   eigenem Abstand links neben der Textspalte. */
.question-flow--illustrated li {
  grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: auto auto auto;
  column-gap: 14px; padding: 0 24px 28px; background: #FDFAF4;
}
.question-flow--illustrated li > img {
  grid-column: 1 / -1; grid-row: 1; width: calc(100% + 48px); height: 230px;
  margin: 0 -24px 22px; object-fit: contain; background: #FDFAF4;
}
.question-flow--illustrated li::before { display: none; }
.question-flow--illustrated .question-number {
  grid-column: 1; grid-row: 2 / span 2; align-self: start; display: block;
  color: var(--ochre-text); opacity: 1; font: 400 2.4rem/1 var(--font-display);
}
.question-flow--illustrated li > b { grid-column: 2; grid-row: 2; margin: 0 0 10px; }
.question-flow--illustrated li > .question-answer { grid-column: 2; grid-row: 3; }
.question-flow--illustrated li:not(:has(> img)) { grid-template-rows: auto auto; padding-top: 26px; }
.question-flow--illustrated li:not(:has(> img)) .question-number { grid-row: 1 / span 2; }
.question-flow--illustrated li:not(:has(> img)) > b { grid-row: 1; }
.question-flow--illustrated li:not(:has(> img)) > .question-answer { grid-row: 2; }

@media screen and (min-width: 700px) and (max-width: 1080px) {
  .question-flow--illustrated { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-flow--illustrated li:last-child { grid-column: 1 / -1; }
}

/* Der Ablauf ergaenzt die vorherige Entscheidungssektion als Fliesstext ueber
   Organisation, Arbeitstag und Uebergabe. */
.household-day-section > .content-title { max-width: none; margin-bottom: clamp(30px, 4vw, 52px); }
.household-day-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: clamp(34px, 5vw, 76px); align-items: stretch; }
.household-day-copy { max-width: 74ch; font-size: 1.05rem; }
.household-day-copy > p:first-of-type { margin-top: 0; }
.household-day-copy .section-kicker { max-width: 36ch; margin-bottom: 24px; color: var(--ochre-text); font-size: clamp(1.25rem, 2vw, 1.65rem); }
.household-day-copy .calc-strip { margin-top: 32px; }
.household-day-visual { display: flex; flex-direction: column; min-width: 0; }
.household-day-visual .media-figure { flex: 1; margin: 0; }
.household-day-visual .media-figure img { display: block; width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.household-day-visual > p { margin: 18px 0 0; color: var(--muted); font-size: .92rem; }
.household-day-section > .contact-rail { margin-top: 36px; }

/* Todesfall: genau ein Drittel Kopf und Motiv, zwei Drittel Fliesstext. */
@media screen and (min-width: 946px) {
  .zone-marked .zone-inner { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: clamp(42px, 6vw, 90px); align-items: start; }
  .zone-marked .zone-head { grid-column: 1; }
  .zone-marked .zone-body { grid-column: 2; max-width: none; padding: 0; columns: 2; column-gap: clamp(32px, 4vw, 58px); }
  .zone-marked .zone-body > * { break-inside: avoid; }
  .zone-marked .zone-body > p:first-child { margin-top: 0; }
  .zone-marked .zone-illustration { position: static; width: 100%; max-width: 330px; margin: 30px 0 0; }
}
.zone-marked--household .zone-head .zone-badge { display: block; max-width: none; padding: 0; border: 0; border-radius: 0; color: var(--ochre-text); font-size: clamp(1.3rem, 2.2vw, 2rem); }
.zone-marked--household .zone-head .zone-badge::before { display: none; }
.zone-marked--household .zone-head #todesfall-title { max-width: none; }
.zone-marked .zone-head .zone-illustration img { width: 100%; height: auto; }

/* Wertanrechnung: drei gleichwertige Spalten – Fundstuecke, Erklaerung, Preis. */
.value-composition > .content-title { max-width: none; margin-bottom: clamp(30px, 4vw, 52px); }
.value-three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 38px); align-items: stretch; }
.value-finds { min-height: 470px; margin: 0; overflow: hidden; background: #FAF6EF; }
.value-finds img { width: 100%; height: 100%; object-fit: cover; }
.value-explanation { align-self: center; padding: 0; border: 0; background: transparent; }
.value-explanation p { max-width: none !important; }
.value-explanation p:first-child { margin-top: 0 !important; }
.value-price-card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--ochre); background: #FAF6EF; }
.value-price-card h3 { margin: 0 0 24px; font: 400 clamp(1.65rem, 2.6vw, 2.5rem)/1.02 var(--font-display); text-transform: uppercase; }
.value-price-card .price-teaser { display: block; margin: 0; padding: 22px 0; border: 0; border-block: 1px solid var(--ochre); background: transparent; }
.value-price-card .teaser-value { display: block; margin-top: 24px; }
.value-price-card > p:last-child { margin: auto 0 0; padding-top: 28px; }

@media screen and (max-width: 945px) {
  .household-day-grid, .value-three-grid { grid-template-columns: 1fr; }
  .household-day-visual { grid-row: 1; }
  .household-day-visual .media-figure img { min-height: 320px; }
  .value-finds { min-height: 340px; }
  .zone-marked .zone-head .zone-illustration { max-width: 360px; margin: 26px auto 0; }
}

@media screen and (max-width: 620px) {
  .question-flow--illustrated li { grid-template-columns: 42px minmax(0, 1fr); padding-inline: 20px; }
  .question-flow--illustrated li > img { width: calc(100% + 40px); height: 180px; margin-inline: -20px; }
  .household-day-visual .media-figure img { min-height: 260px; }
  .value-finds { min-height: 280px; }
}

/* Todesfall-Ablauf: dasselbe Kartensystem, bei vier Schritten als 2×2-Raster. */
.death-process-intro { margin-top: clamp(28px, 3vw, 42px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.death-process-intro h3 { margin: 0; font: 400 var(--h3)/1.14 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.death-process-intro .answer-lead { max-width: 68ch; }
.question-flow--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.question-flow.question-flow--four > li { grid-column: auto; }
.question-flow--four > li,
.question-flow--four > li > img { background: #FBF8F0; }
@media screen and (min-width: 941px) {
  .answer-item.memory-answer { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.death-process-contact { margin-top: clamp(28px, 3.4vw, 44px); }
.remote-estate-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(38px, 5vw, 76px); row-gap: clamp(28px, 4vw, 48px); align-items: start; }
.remote-estate-layout > .content-title { grid-column: 1 / -1; max-width: none; margin: 0; }
.remote-estate-steps { display: grid; gap: 14px; min-width: 0; }
.remote-estate-steps figure { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); min-height: 154px; margin: 0; border: 1px solid var(--line-art); background: #FBF8F0; }
.remote-estate-steps img { width: 100%; height: 100%; max-height: 190px; object-fit: contain; background: #FBF8F0; }
.remote-estate-steps figcaption { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding: 18px clamp(16px, 2vw, 26px); }
.remote-estate-steps figcaption strong { font: 400 clamp(1.15rem, 1.8vw, 1.5rem)/1.12 var(--font-display); text-transform: uppercase; }
.remote-estate-steps figcaption span { color: var(--muted); font-size: .96rem; line-height: 1.45; }
.remote-estate-copy { max-width: 68ch; font-size: var(--fs-body); }
.remote-estate-copy p:first-child { margin-top: 0; }
.remote-estate-copy p + p { margin-top: 22px; }
.remote-estate-copy .remote-estate-quote { width: 100%; max-width: none; margin: clamp(26px, 3vw, 40px) 0 0; padding-block: 8px; }
.remote-estate-quote p { max-width: 64ch; }
@media screen and (max-width: 945px) {
  .remote-estate-layout { grid-template-columns: minmax(0, 1fr); }
  .remote-estate-layout > .content-title { grid-column: 1; }
  .remote-estate-copy { max-width: 74ch; }
}
@media screen and (max-width: 699px) {
  .question-flow--four { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 520px) {
  .remote-estate-steps figure { grid-template-columns: minmax(0, 1fr); }
  .remote-estate-steps img { height: 175px; }
}

/* Weiterführender Teil einer FAQ-Sektion statt separater Karten-Sektion. */
.faq-legal { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin-top: clamp(12px, 2vw, 26px); padding-top: clamp(28px, 3vw, 42px); border-top: 1px solid var(--line-art); }
.faq-legal h3 { margin: 0 0 16px; font: 400 clamp(1.7rem, 2.5vw, 2.4rem)/1.08 var(--font-display); text-transform: uppercase; }
.faq-legal-intro p { max-width: 58ch; margin: 0; font-size: var(--fs-body); }
.faq-legal-intro .faq-legal-note { margin-top: 18px; color: var(--muted); font-size: .95rem; }
.faq-legal-links { align-self: start; margin: 0; }
.faq-legal-links a { min-height: 70px; align-items: center; padding: 12px 0; font-size: 1.1rem; font-weight: 600; }
.faq-legal-links a span { text-decoration: none; }
.faq-legal-links a:hover span { text-decoration: underline; }
@media screen and (max-width: 945px) {
  .faq-legal { grid-template-columns: minmax(0, 1fr); }
}

/* Entrümpelung: drei ruhige Vorher-Nachher-Kapitel im Seitenraster. */
.burden-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 76px); row-gap: clamp(24px, 3vw, 42px); align-items: start; }
.burden-grid > .content-title { grid-column: 1 / -1; max-width: none; margin: 0; }
.burden-slider, .burden-copy { min-width: 0; margin: 0; }
.burden-slider { width: 100%; }
.burden-slider figcaption { margin-top: 12px; color: var(--muted); font-size: .93rem; }
.burden-copy { max-width: 66ch; font-size: var(--fs-body); }
.burden-copy > p:first-child { margin-top: 0; }
.burden-copy .quiet-quote { margin: clamp(26px, 3vw, 42px) 0 0; padding-left: clamp(18px, 2vw, 28px); border-left: 3px solid var(--ochre); }
.burden-kicker { color: var(--ochre-text); font: 400 clamp(1.25rem, 2vw, 1.65rem)/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.burden-contact { margin-top: 28px; }
@media screen and (max-width: 945px) {
  .burden-grid { grid-template-columns: minmax(0, 1fr); }
.burden-grid > .content-title { grid-column: 1; }
  .burden-slider { max-width: 680px; }
  .burden-copy { max-width: 680px; }
}

/* Die restlichen Seiten nutzen dieselben klaren Inhaltsachsen wie die
   abgeschlossenen Leistungsseiten. */
.cost-example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: clamp(28px, 4vw, 48px) 0; }
.cost-example-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line-art); background: #fffaf4; }
.cost-example-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fcf9f3; }
.cost-example-body { display: flex; flex: 1; flex-direction: column; padding: clamp(18px, 2vw, 28px); }
.cost-example-body h3 { margin: 0 0 10px; font: 400 clamp(1.45rem, 2vw, 1.85rem)/1.08 var(--font-display); text-transform: uppercase; }
.cost-example-body p { margin: 0; }
.cost-example-body .cost-example-price { margin-top: auto; padding-top: 22px; color: var(--ochre-text); font: 400 clamp(1.9rem, 2.5vw, 2.5rem)/1 var(--font-display); text-transform: uppercase; }
.cost-example-net { margin-top: 5px !important; color: var(--muted); font-size: .9rem; }

.value-accounting > .content-title { max-width: none; }
.value-intro { max-width: 72ch; margin: clamp(18px, 2vw, 28px) 0 clamp(26px, 3vw, 42px); }
.value-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--line-art); counter-reset: value-step; }
.value-steps li { min-width: 0; padding: clamp(20px, 2.3vw, 32px); background: #fcf9f3; counter-increment: value-step; }
.value-steps li::before { display: block; margin-bottom: 12px; color: var(--ochre-text); content: counter(value-step, decimal-leading-zero); font: 400 2rem/1 var(--font-display); }
.value-steps b { display: block; margin-bottom: 9px; font: 400 1.5rem/1.12 var(--font-display); text-transform: uppercase; }
.value-steps span { display: block; color: var(--muted); }
.value-quote { max-width: 900px; margin: clamp(28px, 4vw, 52px) 0 0; }
.value-quote .pull-quote { max-width: 75ch; margin: 0; }

.origin-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); row-gap: clamp(24px, 3vw, 38px); align-items: start; }
.origin-story-grid > .content-title { grid-column: 1 / -1; max-width: none; margin: 0; }
.origin-story-copy p:first-child { margin-top: 0; }
.origin-story-quote { margin: 0; }

.contact-proof > .shell > .content-title { max-width: none; margin-bottom: 0; }
.contact-proof .illustration-grid { margin: clamp(22px, 3vw, 38px) 0; }
.contact-proof .illustration-grid img { aspect-ratio: 4 / 3; object-fit: contain; background: rgba(255,255,255,.04); }
.contact-proof-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.contact-proof-copy > div { max-width: 62ch; }
.contact-proof-copy p:first-child, .contact-proof-copy .pull-quote { margin-top: 0; }
.contact-proof-copy .pull-quote { color: var(--ivory); }
.contact-proof-copy .pull-quote figcaption { color: #ddd5c9; }
.contact-proof .contact-rail { margin-top: clamp(28px, 4vw, 46px); }

.legal-contact-layout > .content-title { max-width: none; margin-bottom: 0; }
.legal-contact-intro { max-width: 70ch; margin: 16px 0 clamp(26px, 3vw, 42px); }
.legal-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin: 0; padding: 0; list-style: none; }
.legal-contact-grid li { min-width: 0; padding: clamp(20px, 2.3vw, 32px); border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.045); }
.legal-contact-grid b { display: block; margin-bottom: 12px; color: var(--ivory); font: 400 clamp(1.5rem, 2vw, 1.9rem)/1.08 var(--font-display); text-transform: uppercase; }
.legal-contact-grid span { display: block; color: #ddd5c9; }
.legal-contact-note { max-width: 900px; margin-top: clamp(26px, 3vw, 42px); }

@media screen and (max-width: 945px) {
  .cost-example-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .value-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .origin-story-grid, .contact-proof-copy { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 620px) {
  .value-steps, .legal-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Nachzug: die vier Informationsseiten folgen denselben Container- und
   Materialachsen wie Start- und Leistungsseiten. */
.scope-panel,
.question-nav,
.answer-block.is-law,
.practice-band,
.contact-sheet,
.zone-narrow { --shell: 1360px; }

/* Ruhiger Wechsel aus Papier, Blush und dem dunklen Abschluss. */
.scope-panel { background: var(--ivory) url("assets/texture/grain/paper-grain-light.webp"); border-block: 0; }
.scope-panel .content-title,
.question-nav .content-title { max-width: none !important; }
.scope-grid { gap: clamp(16px, 2vw, 28px); background: transparent; border: 0; }
.scope-col { border: 1px solid var(--line-art); }
.scope-col:first-child,
.scope-col:last-child { border-top: 1px solid var(--line-art); }
.scope-panel .scope-col:last-child { background: #FDFAF4; }
.scope-note { max-width: 100%; }
.question-nav { background: var(--blush); border-block: 0; }
.question-grid { gap: clamp(16px, 2vw, 28px); border: 0; }
.question-grid li,
.question-grid li + li { border: 1px solid var(--line-art); background: #FDFAF4; }
.question-grid a:hover { background: #f8f0e6; }
.answer-block.is-law { border-block: 0; }
.answer-block.is-law:nth-of-type(2n) { background: var(--ivory); }
.answer-block.is-law.is-tinted { background: var(--ivory) url("assets/texture/grain/paper-grain-light.webp"); border-block: 0; }
.answer-block.is-law.section-paper { background: var(--blush); }
.answer-block.is-law .law-section-head { width: 100%; }
.answer-block.is-law .law-section-head h2 { max-width: none; margin-bottom: 0; }
.answer-block.is-law .answer-item { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 64px); }
.answer-block.is-law .answer-item > div:first-child { min-width: 0; }
.answer-block.is-law .answer-item h3 { max-width: none; }
.answer-block.is-law .answer-detail > p,
.answer-block.is-law .answer-sources { max-width: 78ch; }
.answer-block.is-law .law-illustration { width: 100%; max-width: none; margin: 0 0 clamp(20px, 2.5vw, 32px); border: 1px solid var(--line-art); background: #FBF8F0; box-shadow: none; }
.answer-block.is-law .law-illustration img { background: #FBF8F0; object-fit: contain; }
.answer-block.is-law .answer-item--illustrated { border-top: 0; }
.answer-block.is-law .answer-item--illustrated + .answer-item { margin-top: clamp(36px, 4vw, 56px); }
.answer-block.is-law .block-next { border-top-color: var(--line-art); }
.practice-band { background: var(--blush); border-block: 0; }
.practice-band .content-title { max-width: none !important; }
.practice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin-top: clamp(28px, 3vw, 42px); align-items: start; }
.practice-grid p { margin: 0; font-size: var(--fs-body); }
.practice-grid p + p { margin-top: 18px; }
.practice-band .practice-grid .practice-lead { margin: 0 0 20px; padding: 0 0 20px; border-top: 0; border-bottom: 1px solid var(--line-art); font-weight: 600; }
.practice-band .contact-rail { margin-top: clamp(30px, 4vw, 52px); }

/* Kontakt: Adressblock und Kontaktwege auf einem 1:2-Raster. */
.contact-sheet { background: var(--blush); border-block: 0; }
.contact-sheet > .shell > .content-title { max-width: none !important; }
.sheet-body { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border: 1px solid var(--line-art); background: #FDFAF4; }
.sheet-address { border-right: 1px solid var(--line-art); border-bottom: 0; }
.sheet-meta { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.sheet-channels a { grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); }
.sheet-channels a:last-child { border-bottom: 0; }

/* Über Monique: keine isolierte 660-Pixel-Textbahn mehr. */
.zone-narrow { background: var(--ivory); }
.consultation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 42px) clamp(32px, 4vw, 64px); align-items: start; }
.consultation-grid > .content-title { grid-column: 1 / -1; max-width: none !important; }
.consultation-copy p { margin: 0; font-size: var(--fs-body); }
.consultation-copy p + p { margin-top: 22px; }
.consultation-grid .pull-quote { max-width: none; margin: 0; }

@media screen and (max-width: 945px) {
  .answer-block.is-law .answer-item,
  .practice-grid,
  .sheet-body,
  .consultation-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet-address { border-right: 0; border-bottom: 1px solid var(--line-art); padding-inline: clamp(22px, 3vw, 34px); }
  .sheet-channels a { grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); padding-inline: clamp(22px, 3vw, 34px); }
}
@media screen and (max-width: 620px) {
  .scope-grid,
  .question-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet-channels a { grid-template-columns: minmax(0, 1fr); }
  .consultation-grid > .content-title { grid-column: 1; }
}

/* Gemeinsame Abschlussrunde: Raster, Flächen und mobile Leseführung. */
:root { --surface-card: #FBF8F0; --surface-section: #efe5da; }
.origin-stack, .contact-sheet, .pledge-band, .pointer-block, .scope-panel, .calc-shell { --shell: 1360px; }
.scope-col, .question-grid a, .note-box, .find-card, .cost-example-card { box-shadow: none; }
.scope-col, .question-grid a { background: var(--surface-card); border-color: var(--line-art); }
.zone-narrow, .origin-stack { border-block: 0; }
.calc-shell [data-calculator] { max-width: 1060px; margin-inline: auto; }
.calc-shell .content-title { max-width: 30ch; }
.page-index { padding-block: 18px; border-bottom: 1px solid var(--line); }
.page-index summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.page-index ul { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 12px 0 4px; margin: 0; list-style: none; }
.page-index a { color: var(--ochre-text); text-underline-offset: 4px; }
.practice-finds { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: stretch; }
.practice-finds .find-card:first-child { grid-row: span 2; }
.practice-finds .find-card:not(:first-child) { display: flex; }
.practice-finds .find-result { font-size: clamp(1.6rem, 2.5vw, 2.5rem); }
.practice-finds .find-card:first-child .media-figure { max-height: 350px; }
#verkauf-abrechnung .content-block { align-items: start; margin-top: 28px !important; }
section[aria-labelledby="guenstiger-title"] .content-block { align-items: start; }
section[aria-labelledby="guenstiger-title"] .media-figure { margin-top: 0 !important; }
.form-mode { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.form-mode button { flex: 1; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-art); color: var(--ink); background: transparent; font: 600 1rem var(--font-body); cursor: pointer; }
.form-mode button[aria-pressed="true"] { background: var(--charcoal); color: var(--ivory); }
.request-summary { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.5 var(--font-body); max-height: 380px; overflow: auto; padding: 18px; border: 1px solid var(--line-art); background: var(--surface-card); }
.form-success .button { margin: 0 8px 12px 0; }
.form-status { margin-block: 18px; }
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.consent a { color: inherit; text-decoration: underline; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 5px; }
section[id], h2[id], h3[id] { scroll-margin-top: 100px; }
.legal-document { padding-block: clamp(40px,6vw,88px); }
.legal-document .long-copy { max-width: 78ch; }
.legal-document h2 { margin-top: 36px; }
@media (max-width: 767px) {
  .page-hero-dark { padding-top: 36px; padding-bottom: 64px; }
  .page-hero-light, .hero-light { min-height: 260px; }
  .page-hero-monique { height: 98%; }
  .page-hero h1 { font-size: clamp(2.5rem,9vw,3.3rem); }
  .page-hero-lead { font-size: 1.05rem; line-height: 1.5; }
  .section-rhythm, .treasure-section, .faq-section, .answer-block, .origin-stack, .zone-narrow { padding-block: 48px; }
  .practice-finds { grid-template-columns: 1fr; }
  .practice-finds .find-card:first-child { grid-row: auto; }
  .contact-rail { gap: 12px; }
  .contact-rail a { min-height: 44px; }
  .page-index ul { display: grid; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; }
}
.practice-finds .find-card:not(:first-child) { align-items: stretch; justify-content: center; }
.practice-finds .find-body { width: 100%; padding: clamp(22px,3vw,36px); }
.practice-finds .find-body .find-result { color: var(--ochre-text); }
@media (max-width: 620px) { .form-intro-note { display: none; } }

/* Einheitlicher Hero-Abschluss: Haushaltsauflösung als Referenz. */
.fact-strip.is-compact { background: var(--ivory); }
.page-index-band { background: var(--ivory); }
.fact-strip.is-compact .fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact-strip.is-compact .fact-item { min-width: 0; }
@media (max-width: 767px) {
  .fact-strip.is-compact .fact-grid { grid-template-columns: 1fr; }
  .fact-strip.is-compact .fact-item { border-right: 0; padding: 18px 0; }
  .fact-strip.is-compact .fact-item + .fact-item { border-top: 1px solid var(--line); }
}

/* Zugängliche Bedienzustände: sichtbar, auch ohne Farbe oder Ziehbewegung. */
.cost-anatomy-fixed span { color: var(--ink); }
.comparison:has(.comparison-range:focus-visible), [data-before-after]:has(.comparison-range:focus-visible) { outline: 3px solid var(--ochre-text); outline-offset: 5px; }
.comparison-range:focus-visible ~ .comparison-line { outline: 3px solid var(--ivory); }
.text-field:focus-visible, .area-number-label input:focus-visible { outline: 3px solid #2f6f9f; outline-offset: 3px; }
.choice-list input:checked + span em::before { content: "✓"; }
.choice-list input:checked + span em { font-size: 0; }
.choice-list input:checked + span em::before { font-size: 1.25rem; }
.sub-fieldset { border: 0; padding: 0; margin: 18px 0; min-width: 0; }
.sub-fieldset > legend { font: 600 1rem/1.5 var(--font-body); margin-bottom: 8px; }
[aria-invalid="true"].text-field, .choice-list input[aria-invalid="true"] + span { border: 2px solid #9d3529; }
.page-index a { display: inline-block; padding-block: 3px; }
:where(a, button, input, textarea, summary, [tabindex]) { scroll-margin-block: 110px 90px; }
.no-js .menu-toggle, .no-js .mobile-sub-toggle { display: none; }
.no-js .fallback-form { display: block; }
.no-js .nav-group:hover .nav-dropdown, .no-js .nav-group:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
@media (max-width: 945px) {
  .no-js .mobile-menu[hidden] { display: block !important; position: static; height: auto; padding: 24px; overflow: visible; }
  .no-js .is-slider { display: grid; grid-template-columns: 1fr; overflow: visible; }
}
@media (forced-colors: active) {
  .sticky-contact a, .sticky-contact a[href] { color: LinkText; background: Canvas; border: 1px solid ButtonText; }
  .sticky-contact a::before { background: LinkText; }
  .button, .form-mode button, .choice-list label > span, .contact-options label > span { border: 1px solid ButtonText; }
  .choice-list input:checked + span, .contact-options input:checked + span, .calc-effort input:checked + span { outline: 2px solid Highlight; }
  .comparison-line { background: Highlight; }
}

/* Reflow: auch lange Wörter und vergrößerte Texte bleiben im Container. */
body { overflow-wrap: anywhere; }
:where(.shell, .content-block, .hero-content, .form-panel, .form-progress, .cost-anatomy, .pledge-row) > * { min-width: 0; }
.text-link { max-width: 100%; min-width: 0; }
.form-progress { flex-wrap: wrap; }
.price-teaser .teaser-value { white-space: normal; min-width: 0; }
.price-teaser .teaser-value small, .cost-example strong { white-space: normal; }
.value-composition > * { min-width: 0; }
.room-row em { white-space: normal; }
.faq-list summary span, .calc-detail summary span { flex: 0 0 1em; width: 1em; height: 1em; display: grid; place-items: center; margin-inline-end: .25em; }