/* =====================================================================
   Offenes Haus × Rotdorn & Schiefer — component layer
   Every color, font, radius, space and shadow comes from tokens.css.
   Sibling palettes swap tokens.css only.
   ===================================================================== */

/* ---------- Local helpers (motion + sizes from DESIGN.md Implementation tokens) ---------- */
:root {
  --dur-fast: .18s;
  --dur-base: .24s;
  --ease-lift: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fs-phone: clamp(34px, 3.4vw, 44px);
  --fs-h3-local: var(--type-headline-md-size);
  --lh-h3-local: var(--type-headline-md-line);
  --divider-dark: color-mix(in srgb, var(--inverse-on-surface) 16%, transparent);
  --header-h: 88px;
  --pad-section: calc(var(--space-section-gap) / 2 + var(--space-md));
  --pad-tile: var(--space-tile-pad);
  --ov: var(--space-overlap);
  --gutter-page: var(--space-margin-desktop);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-md)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--text-body);
  font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--primary); text-underline-offset: 3px; }
p, li, dd { hyphens: auto; overflow-wrap: break-word; }
main, .site-footer { overflow-x: clip; }
button { font: inherit; }
.container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter-page)); margin-inline: auto; padding-inline: var(--gutter-page); }
.skip {
  position: absolute; left: var(--space-sm); top: calc(-1 * var(--space-xl) * 2); z-index: 100;
  background: var(--secondary-container); color: var(--on-secondary); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--space-sm); }
:focus-visible { outline: 3px solid var(--primary-container); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--inverse-primary); }
.tab { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; }
.ph-slot { color: var(--status-warning); font-weight: 600; text-decoration: underline dashed; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.on-dark .ph-slot { color: var(--tertiary-fixed-dim); }

/* ---------- Type ---------- */
.h1 { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: 1.07; font-weight: 700; letter-spacing: var(--type-display-lg-tracking); color: var(--text-heading); hyphens: manual; text-wrap: balance; }
.h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: var(--type-headline-lg-tracking); color: var(--text-heading); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.h3 { font-family: var(--font-heading); font-size: var(--fs-h3-local); line-height: var(--lh-h3-local); font-weight: 600; letter-spacing: var(--type-headline-md-tracking); color: var(--text-heading); hyphens: auto; overflow-wrap: break-word; }
.h4 { font-family: var(--font-body); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: 600; letter-spacing: var(--type-headline-sm-tracking); color: var(--text-heading); hyphens: auto; overflow-wrap: break-word; }
.lead { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.small { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--on-surface-variant); }
.lbl { font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line); font-weight: 600; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; color: var(--on-surface-variant); }
.on-dark { color: var(--inverse-on-surface); }
.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4 { color: var(--inverse-on-surface); }
.on-dark .lbl { color: var(--tertiary-fixed-dim); }
.on-dark .small { color: var(--inverse-on-surface); }
.on-dark a { color: var(--inverse-primary); }

/* KV6 room sign */
.sign {
  display: flex; align-items: center; gap: calc(var(--space-sm) - 2px);
  font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line);
  font-weight: 600; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; color: var(--tertiary);
  margin-bottom: var(--space-md);
}
.sign::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: var(--radius-marker); background: var(--tertiary); }
.on-dark .sign { color: var(--tertiary-fixed-dim); }
.on-dark .sign::before { background: var(--inverse-primary); }

/* Links */
.link { display: inline; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link .icon { display: inline-block; width: 18px; height: 18px; margin-left: var(--space-xs); vertical-align: -3px; transition: transform var(--dur-fast) ease; }
.link:hover .arr { transform: translateX(4px); }
.on-dark .link { color: var(--inverse-primary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--space-sm) - 2px);
  min-height: 52px; padding: 0 var(--space-md); border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: var(--type-button-size); line-height: var(--type-button-line);
  font-weight: 600; letter-spacing: var(--type-button-tracking); text-decoration: none; text-align: center;
  border: 1.5px solid transparent; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn .icon { transition: transform var(--dur-fast) ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--secondary-container); color: var(--on-secondary); }
.btn-primary:hover { background: var(--secondary); }
.btn-secondary { background: var(--surface-base); color: var(--text-heading); border-color: var(--on-surface-variant); }
.btn-secondary:hover { background: var(--surface-container); }
.btn-compact { min-height: 48px; padding: 0 calc(var(--space-md) - 4px); }
.btn-block { width: 100%; }
.on-dark .btn-primary { background: var(--inverse-primary); color: var(--inverse-surface); }
.on-dark .btn-primary:hover { background: var(--primary-fixed-dim); }
.on-dark .btn-secondary { background: transparent; color: var(--inverse-on-surface); border-color: var(--inverse-on-surface); }
.on-dark .btn-secondary:hover { background: var(--anchor-raised); }
.cta-pair { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- KV1 owner chips ---------- */
.own {
  display: inline-flex; align-items: center; gap: var(--space-base); height: 32px;
  padding: 0 calc(var(--space-sm) + 2px) 0 calc(var(--space-sm) - 2px); border-radius: var(--radius-full);
  font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line);
  font-weight: 600; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; white-space: nowrap;
  border: 1.5px solid transparent;
}
.own i { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid currentColor; }
.own-self { background: var(--surface-base); border-color: var(--tertiary); color: var(--tertiary); }
.own-tog { background: var(--tertiary-fixed); color: var(--on-tertiary-fixed-variant); }
.own-tog i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.own-we { background: var(--inverse-surface); color: var(--inverse-on-surface); }
.own-we i { background: currentColor; }
.on-dark .own-self { background: transparent; border-color: var(--tertiary-fixed-dim); color: var(--tertiary-fixed-dim); }
.on-dark .own-tog { background: var(--anchor-raised); color: var(--tertiary-fixed-dim); }
.on-dark .own-we { background: var(--inverse-on-surface); color: var(--inverse-surface); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.legend-col { flex-direction: column; align-items: flex-start; }

/* ---------- KV8 icon tiles ---------- */
.ico { width: 56px; height: 56px; flex: none; border-radius: var(--radius); background: var(--tertiary-fixed); color: var(--tertiary); display: grid; place-items: center; transition: background-color var(--dur-fast) ease; }
.ico .icon { width: 28px; height: 28px; }
.ico.s40 { width: 40px; height: 40px; }
.ico.s40 .icon { width: 20px; height: 20px; }
.tile.tint .ico { background: var(--surface-base); }
.on-dark .ico { background: var(--anchor-raised); color: var(--tertiary-fixed-dim); }
.on-dark .ico.call, .on-dark .call .ico { color: var(--inverse-primary); }
.tile.raised .ico { background: var(--inverse-surface); }

/* ---------- Tiles + KV2 floor plan ---------- */
.tile { background: var(--surface-base); border: 1px solid var(--outline-variant); border-radius: var(--radius-card); padding: var(--pad-tile); min-width: 0; box-shadow: var(--shadow-card); }
.tile.tint { background: var(--surface-muted); border-color: transparent; }
.tile.dark { background: var(--inverse-surface); border-color: transparent; padding: var(--space-lg); }
.tile.raised { background: var(--anchor-raised); border-color: transparent; }
.section.tint .tile:not(.tint):not(.dark) { border-color: transparent; }
.lift { transition: transform var(--dur-base) var(--ease-lift), box-shadow var(--dur-base) var(--ease-lift); }
.lift:hover, .lift:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.lift:hover .ico, .lift:focus-within .ico { background: var(--tertiary-container); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-tile-gap); }
.g12 > * { min-width: 0; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; }

/* Photos (KV3 image rooms) */
.photo { position: relative; margin: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-muted); min-width: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.section.tint .photo, .tile.tint .photo { background: var(--tertiary-fixed); }
.cap {
  position: absolute; left: var(--space-sm); bottom: var(--space-sm); display: inline-flex; align-items: center;
  min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-full); background: var(--surface-base); color: var(--text-body);
  font-family: var(--font-label); font-size: var(--type-label-uppercase-size); font-weight: 600; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase;
}

/* KV5 figures */
.fig::before { content: ""; display: block; width: 32px; height: 4px; border-radius: var(--radius-marker); background: var(--tertiary); margin-bottom: var(--space-sm); }
.fig-n { display: block; font-family: var(--font-heading); font-size: var(--fs-numeral); line-height: 1; font-weight: 700; letter-spacing: var(--type-numeral-tracking); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.fig-l { display: block; margin-top: var(--space-sm); }
.on-dark .fig::before, .on-dark.fig::before { background: var(--tertiary-fixed-dim); }
.on-dark .fig.call::before { background: var(--inverse-primary); }
.on-dark .fig-n, .on-dark.fig .fig-n { color: var(--inverse-on-surface); }
.phone { font-family: var(--font-heading); font-size: var(--fs-phone); line-height: 1.1; font-weight: 700; letter-spacing: var(--type-numeral-phone-tracking); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-heading); text-decoration: none; }
.phone:hover { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; }
.on-dark .phone { color: var(--inverse-on-surface); }
.on-dark .phone:hover { text-decoration-color: var(--inverse-primary); }

/* KV7 step tiles */
.stp { width: 48px; height: 48px; flex: none; border-radius: var(--radius); display: grid; place-items: center; background: var(--tertiary-fixed); color: var(--on-tertiary-fixed-variant); font-family: var(--font-heading); font-size: var(--type-numeral-step-size); line-height: var(--type-numeral-step-line); font-weight: 700; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.stp.first { background: var(--tertiary); color: var(--on-tertiary); }
.stp.s40 { width: 40px; height: 40px; }
.on-dark .stp { background: var(--tertiary-fixed-dim); color: var(--inverse-surface); }

/* ---------- Sections ---------- */
.section { padding-block: var(--pad-section); }
.section.tint { background: var(--surface-muted); }
.section.slate { background: var(--inverse-surface); }
.section.rule { border-top: 1px solid var(--outline-variant); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.sec-head-text { max-width: var(--container-narrow); min-width: 0; }
.sec-head-text .lead { margin-top: var(--space-sm); }
.sec-more { margin-top: var(--space-md); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--surface-base); border-bottom: 1px solid var(--outline-variant); }
.hdr { position: relative; display: flex; align-items: center; gap: var(--space-md); height: var(--header-h); }
.brand { display: flex; flex-direction: column; flex: none; text-decoration: none; }
.brand-top { font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line); font-weight: 600; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; color: var(--on-surface-variant); }
.brand-main { font-family: var(--font-heading); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); font-weight: 600; color: var(--text-heading); }
.on-dark .brand-top { color: var(--tertiary-fixed-dim); }
.on-dark .brand-main { color: var(--inverse-on-surface); }
.nav { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: var(--space-xs); }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-sm);
  font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: 500;
  color: var(--text-heading); text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.nav-link::after { content: ""; position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: calc(var(--space-xs) + 2px); height: 3px; border-radius: var(--radius-marker); background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) ease; }
.nav-link:hover::after, .nav-link.is-active::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-link .chev { width: 18px; height: 18px; transition: transform var(--dur-fast) ease; color: var(--tertiary); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr-actions { display: flex; align-items: center; gap: var(--space-sm); flex: none; margin-left: auto; }
.hdr-phone { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--text-heading); font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 48px; }
.hdr-phone:hover span:last-child { text-decoration: underline; text-decoration-color: var(--primary); }
.hdr-call, .burger { display: none; }

/* Mega panel */
.mm {
  position: absolute; left: var(--gutter-page); right: var(--gutter-page); top: calc(100% - var(--space-sm));
  background: var(--surface-base); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--shadow-flyout);
  padding: var(--space-md); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.has-mm.is-open .mm { opacity: 1; visibility: visible; transform: none; }
.mm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-tile-gap); }
.mm-tile { display: flex; gap: var(--space-sm); align-items: flex-start; min-height: 88px; padding: var(--space-sm); border-radius: var(--radius); text-decoration: none; transition: background-color var(--dur-fast) ease; }
.mm-tile:hover { background: var(--surface-container-low); }
.mm-name { display: block; font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: 600; color: var(--text-heading); }
.mm-note { display: block; color: var(--text-body); }
.mm-dark { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius); background: var(--inverse-surface); }
.mm-dark .legend { margin-top: var(--space-xs); }

/* Mobile panel (sibling after header) */
.mnav { position: fixed; inset: 0; z-index: 55; background: var(--surface-base); padding-top: var(--header-h); overflow-y: auto; overscroll-behavior: contain; }
.mnav-inner { padding-block: var(--space-md) var(--space-xl); }
.mnav-list > li { border-bottom: 1px solid var(--outline-variant); }
.mnav-list > li > a, .mnav-grp {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0;
  font-family: var(--font-heading); font-size: var(--type-headline-md-size); line-height: var(--type-headline-md-line); font-weight: 600;
  color: var(--text-heading); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.mnav-grp .chev { width: 24px; height: 24px; color: var(--tertiary); transition: transform var(--dur-fast) ease; }
.mnav-grp[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mnav-sub { display: grid; gap: var(--space-base); padding-bottom: var(--space-sm); }
.mnav-sub a { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-sm); border-radius: var(--radius); background: var(--surface-muted); text-decoration: none; }
.mnav-sub .ico { background: var(--surface-base); }
.mnav-cta { margin-top: var(--space-lg); }
.mnav-note { margin-top: var(--space-md); color: var(--text-heading); }
.mnav-note a { font-weight: 600; }

/* ---------- Home hero ---------- */
.hero { padding-block: var(--space-lg) var(--pad-section); }
.hh-text { grid-column: 6 / span 7; grid-row: 1 / span 2; padding: var(--space-lg); display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); }
.hh-text .sign { margin: 0; }
.hh-portrait { grid-column: 1 / span 5; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.hh-portrait img { object-position: 50% 30%; }
.hh-portrait .cap { top: var(--space-sm); bottom: auto; }
.hh-trust { display: contents; }
.hh-trust > li { grid-row: 3; display: flex; align-items: center; gap: var(--space-md); }
.hh-t1 { grid-column: 1 / span 5; margin-top: calc(-1 * var(--ov)); position: relative; z-index: 1; }
.hh-t2 { grid-column: 6 / span 4; flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
.hh-t3 { grid-column: 10 / span 3; }

/* ---------- Soforthilfe (slate) ---------- */
.sof-main { grid-column: 1 / span 7; }
.sof-intro { margin-top: var(--space-sm); }
.sof-steps { display: grid; gap: var(--space-tile-gap); margin-top: var(--space-lg); }
.sof-step { display: flex; gap: var(--space-md); align-items: flex-start; padding: calc(var(--space-md) - 4px) var(--space-md); }
.sof-step p { margin-top: var(--space-xs); }
.sof-call { grid-column: 8 / span 5; align-self: stretch; padding: var(--space-lg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-md); }

/* ---------- Possibilities (KV1 tiles) ---------- */
.poss { display: flex; flex-direction: column; min-height: 300px; }
.poss .h3 { margin-top: var(--space-md); }
.poss p { margin-top: var(--space-sm); margin-bottom: var(--space-md); }
.poss .own { margin-top: auto; align-self: flex-start; }
.poss-photo { grid-column: 7 / span 6; grid-row: 1; }
.poss-close { grid-column: span 9; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.poss-close-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); max-width: 520px; }

/* ---------- Phases (mist) ---------- */
.ph-head { grid-column: 1 / span 5; align-self: end; padding-bottom: var(--space-md); padding-right: var(--space-md); }
.ph-head .lead { margin-top: var(--space-sm); }
.ph-photo { grid-column: 6 / span 7; aspect-ratio: 3 / 2; }
.phase { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.phase .h3 { margin-top: var(--space-sm); }
.phase .link { margin-top: auto; padding-top: var(--space-sm); }
.ph-a { grid-column: 1 / span 5; } .ph-b { grid-column: 6 / span 7; }
.ph-c { grid-column: 1 / span 7; } .ph-d { grid-column: 8 / span 5; }

/* ---------- Process: five steps ---------- */
.steps5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-tile-gap); position: relative; }
.steps5::before { content: ""; position: absolute; left: calc(var(--space-xl) - var(--space-sm)); right: calc(var(--space-xl) - var(--space-sm)); top: calc(var(--pad-tile) + 24px); height: 2px; background: var(--outline-variant); }
.steps5 > li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); background: transparent; }
.steps5 .h4 { margin-top: var(--space-xs); }
.steps5 p { margin-bottom: var(--space-sm); }
.steps5 .own { margin-top: auto; }

/* ---------- KV3 image module ---------- */
.imgmod { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.imgmod > * { min-width: 0; }
.imgmod-photo { grid-column: 1 / span 5; grid-row: 1; aspect-ratio: 4 / 5; }
.imgmod-text { grid-column: 6 / span 7; grid-row: 1; margin: var(--ov) 0 0 calc(-1 * var(--ov)); position: relative; z-index: 1; }
.imgmod-text blockquote { margin: 0; }
.imgmod-text blockquote .h3 { margin-block: var(--space-sm) var(--space-md); }
.imgmod-text figcaption { display: flex; flex-direction: column; gap: var(--space-xs); }
.imgmod-text .lead { margin-block: var(--space-sm) var(--space-md); }
.qmark { display: block; height: 32px; font-family: var(--font-heading); font-weight: 700; font-size: 48px; line-height: 1; color: var(--inverse-primary); }
.imgmod.stack { grid-template-columns: minmax(0, 1fr); }
.imgmod.stack .imgmod-photo { grid-column: 1; grid-row: 1; }
.imgmod.stack .imgmod-text { grid-column: 1; grid-row: 2; margin: calc(-1 * var(--ov)) 0 0 var(--ov); }

/* ---------- Team + values ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-tile-gap); margin-top: calc(var(--space-xl) + var(--ov)); }
.member { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-sm); }
.member img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius); }
.member-role { margin-block: var(--space-xs); color: var(--tertiary); hyphens: auto; }
.values { margin-top: var(--space-tile-gap); }
.value { display: flex; align-items: center; gap: var(--space-md); }

/* ---------- Trust ---------- */
.trust-master { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.trust-master .h3 { margin-top: var(--space-sm); }
.trust-fig p { margin-top: var(--space-md); }
.trust-fig.dark .fig-n { margin-top: 0; }
.members { grid-column: 1 / -1; }
.members-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-tile-gap); margin-block: var(--space-md); }
.members-list li { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.members-list .small { color: var(--text-heading); }
.logo { height: 96px; border-radius: var(--radius); background: var(--surface-muted); display: grid; place-items: center; overflow: hidden; }
.logo img { width: 160px; height: 64px; max-width: 80%; object-fit: contain; }

/* ---------- Testimonial ---------- */
.voice { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); }
.voice blockquote { margin: 0; }
.voice .lead { color: var(--text-heading); }
.voice-ph { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-md); min-height: 200px; }

/* ---------- Costs (shared) ---------- */
.costs-main { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--space-md); }
.costs-side { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.costs-cta { margin-top: auto; display: grid; gap: var(--space-sm); justify-items: start; padding-top: var(--space-sm); }
.ledger { margin-top: var(--space-sm); border-top: 1px solid var(--outline-variant); }
.ledger li { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--outline-variant); color: var(--text-heading); }

/* ---------- News ---------- */
.news-lead { grid-column: 1 / span 6; grid-row: span 2; display: flex; flex-direction: column; gap: var(--space-md); }
.news-row { grid-column: 7 / span 6; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); align-items: start; }
.news-img { aspect-ratio: 3 / 2; }
.news-img img { transition: transform var(--dur-base) var(--ease-lift); }
.lift:hover .news-img img { transform: scale(1.03); }
.news-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.date-chip { position: absolute; left: var(--space-sm); top: var(--space-sm); display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-full); background: var(--inverse-surface); color: var(--inverse-on-surface); font-family: var(--font-label); font-size: var(--type-label-uppercase-size); font-weight: 600; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; white-space: nowrap; }
.memorial { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.memorial p { flex: 1 1 320px; min-width: 0; color: var(--text-heading); }

/* ---------- FAQ ---------- */
.faq-side { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-md)); }
.faq-legend { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.faq-list { grid-column: 5 / span 8; display: grid; gap: var(--space-tile-gap); align-content: start; }
.faq-item { background: var(--surface-base); border-radius: var(--radius-card); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 48px; padding: calc(var(--space-md) - 4px) var(--space-md); background: none; border: 0; border-radius: var(--radius-card); text-align: left; cursor: pointer; color: var(--text-heading); }
.faq-ic { width: 32px; height: 32px; flex: none; border-radius: var(--radius); background: var(--tertiary-fixed); color: var(--tertiary); display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-lift), background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.faq-ic .icon { width: 18px; height: 18px; }
.faq-item.is-open .faq-ic { background: var(--primary); color: var(--on-primary); transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-lift); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; visibility: hidden; transition: visibility var(--dur-base); }
.faq-item.is-open .faq-a-in { visibility: visible; }
.faq-a-in > div { display: grid; gap: var(--space-sm); justify-items: start; padding: 0 var(--space-md) var(--space-md); max-width: calc(var(--container-narrow) - var(--space-xl) * 2); }

/* ---------- Contact ---------- */
.contact-head { align-items: flex-end; }
.ct-phone, .ct-mail, .ct-addr, .ct-place { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.ct-phone .fig { margin-top: var(--space-sm); }
.ct-fax { margin-top: var(--space-xs); }
.ct-mail-link { font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: 600; overflow-wrap: anywhere; }
.ct-addr address { color: var(--text-heading); }
.ct-map { width: 100%; aspect-ratio: 3 / 2; margin-top: var(--space-sm); border-radius: var(--radius); overflow: hidden; background: var(--tertiary-fixed); }
.ct-map img { width: 100%; height: 100%; object-fit: cover; }
.ct-place p:last-child { color: var(--text-heading); }
.contact-frame { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-tile-gap); padding: var(--space-tile-gap); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); }
.contact-tiles { display: grid; gap: var(--space-tile-gap); align-content: start; min-width: 0; }
.form-col { min-width: 0; padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-md); }
.contact-close .ct-phone { grid-column: span 5; }
.contact-close .ct-mail { grid-column: span 4; }
.contact-close .ct-addr { grid-column: span 3; }

/* Form */
.form { display: grid; gap: var(--space-md); }
.f-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field { display: grid; gap: var(--space-base); min-width: 0; }
.field label { font-weight: 600; color: var(--text-heading); }
.opt { font-weight: 400; font-size: var(--type-body-sm-size); color: var(--on-surface-variant); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 0 calc(var(--space-sm) + 4px); border: 1.5px solid var(--outline); border-radius: var(--radius-input);
  background: var(--surface-base); color: var(--text-heading); font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-line);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field textarea { min-height: 144px; padding-block: var(--space-sm); resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--secondary-fixed); }
.select { position: relative; }
.select select { appearance: none; padding-right: calc(var(--space-lg) + var(--space-xs)); cursor: pointer; }
.select .icon { position: absolute; right: calc(var(--space-sm) + 4px); top: 50%; transform: translateY(-50%); color: var(--tertiary); pointer-events: none; }
[aria-invalid="true"] { border-color: var(--status-error) !important; }
.form-error { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); background: var(--error-container); color: var(--status-error); font-weight: 600; }
.check { display: flex; align-items: flex-start; gap: var(--space-sm); min-height: 48px; cursor: pointer; color: var(--text-body); }
.check input { appearance: none; width: 24px; height: 24px; flex: none; margin: 0; margin-top: 1px; border: 2px solid var(--outline); border-radius: var(--radius-sm); background: var(--surface-base); display: grid; place-content: center; cursor: pointer; }
.check input:checked { background: var(--tertiary); border-color: var(--tertiary); }
.check input:checked::before { content: ""; width: 11px; height: 6px; border: solid var(--on-tertiary); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.form-done { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); }
.form-done .ico { background: var(--tertiary-fixed); color: var(--status-success); }

/* ---------- Topic hero ---------- */
.crumbs { margin-bottom: var(--space-md); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--on-surface-variant); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.crumbs .icon { width: 12px; height: 12px; color: var(--outline); }
.crumbs a { color: var(--on-surface-variant); }
.crumbs [aria-current] span { color: var(--text-heading); font-weight: 600; }
.th-text { grid-column: 1 / span 7; padding: var(--space-lg); display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); }
.th-text .sign { margin: 0; }
.th-photo { grid-column: 8 / span 5; min-height: 320px; }
.th-toc { grid-column: 1 / -1; }
.toc { columns: 3; column-gap: var(--space-lg); margin-top: var(--space-sm); }
.toc li { break-inside: avoid; }
.toc a { display: flex; align-items: flex-start; gap: var(--space-xs); padding-block: var(--space-xs); color: var(--text-heading); text-decoration: none; font-weight: 500; }
.toc a .icon { width: 16px; height: 16px; margin-top: 5px; color: var(--tertiary); }
.toc a:hover { color: var(--primary); text-decoration: underline; }

/* Kurz (slate) */
.kurz-side { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-md); padding-right: var(--space-md); }
.kurz-side .sign { margin: 0; }
.kurz-call { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-sm); }
.kurz-grid { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-tile-gap); margin: 0; }
.kurz-item { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Ten steps */
.steps10 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--space-lg); }
.steps10 > li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding-block: var(--space-md); border-bottom: 1px solid var(--outline-variant); }
.steps10 > li:nth-child(1), .steps10 > li:nth-child(6) { border-top: 1px solid var(--outline-variant); }
.steps10 > li:target { box-shadow: inset 4px 0 0 var(--primary); padding-left: var(--space-sm); }
.steps10 p { margin-top: var(--space-xs); }
.merk { margin-top: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); }
.merk p { color: var(--text-heading); }

/* Row rank + side quote */
.st-main { grid-column: 1 / span 7; padding-right: var(--space-lg); }
.st-main .lead { margin-top: var(--space-sm); }
.st-side { grid-column: 8 / span 5; position: sticky; top: calc(var(--header-h) + var(--space-md)); align-self: start; }
.rows { margin-top: var(--space-lg); border-top: 1px solid var(--outline-variant); }
.rows > li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; min-height: 88px; padding-block: var(--space-sm); border-bottom: 1px solid var(--outline-variant); }
.rows p { margin-top: var(--space-xs); }
.st-frame { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }

/* Burial types */
.ba-text { grid-column: 1 / span 7; }
.ba-text .lead { color: var(--text-heading); }
.term { text-decoration: underline dotted var(--tertiary); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ba-term { grid-column: 8 / span 5; display: grid; gap: var(--space-sm); align-content: start; }
.ba-term .lbl { color: var(--tertiary); }
.ba-term dfn { font-style: normal; font-weight: 600; color: var(--text-heading); }
.ba-list { grid-column: 1 / span 5; }
.ba-photo { grid-column: 6 / span 7; aspect-ratio: 3 / 2; }
.ba-hint { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.ba-hint p { flex: 1 1 360px; min-width: 0; }
.checks { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-sm); align-items: start; color: var(--text-heading); }
.chk { width: 20px; height: 20px; margin-top: 3px; border-radius: var(--radius-sm); background: var(--tertiary-fixed); color: var(--tertiary); display: grid; place-items: center; }
.chk .icon { width: 14px; height: 14px; }

/* Lebensfest */
.lf-text { grid-column: 1 / span 7; display: grid; gap: var(--space-sm); }
.lf-text .lead { color: var(--text-heading); }
.lf-photo { grid-column: 8 / span 5; grid-row: 1 / span 2; min-height: 320px; }
.lf-rede { grid-column: 1 / span 7; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.lf-rede-body { display: grid; gap: var(--space-sm); justify-items: start; }

/* Nach der Bestattung */
.nb-text { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); }
.nb-text .sign { margin-bottom: var(--space-sm); }
.nb-text .h2 { margin-bottom: var(--space-sm); }
.nb-side { grid-column: 8 / span 5; display: grid; gap: var(--space-tile-gap); align-content: start; }
.nb-photo { aspect-ratio: 3 / 2; }
.link-tiles { display: grid; gap: var(--space-tile-gap); }
.link-tile { display: flex; align-items: center; gap: var(--space-md); min-height: 88px; padding: var(--space-md); text-decoration: none; }
.link-tile .h4 { flex: 1; }
.link-tile .arr { color: var(--primary); transition: transform var(--dur-fast) ease; }
.link-tile:hover .arr { transform: translateX(4px); }

/* ---------- Footer ---------- */
.site-footer { background: var(--inverse-surface); padding-block: var(--space-xl) var(--space-md); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--space-lg); }
.ft-grid > * { min-width: 0; }
.ft-claim { margin-top: var(--space-md); max-width: 36ch; }
.ft-fig { margin-block: var(--space-md) var(--space-sm); }
.ft-col ul { display: grid; gap: var(--space-xs); }
.ft-col ul a { display: inline-block; padding-block: var(--space-xs); color: var(--inverse-on-surface); text-decoration: none; }
.ft-col ul a:hover { color: var(--inverse-primary); text-decoration: underline; }
.ft-mail { font-weight: 600; overflow-wrap: anywhere; }
.ft-bottom { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--divider-dark); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .lift:hover, .lift:focus-within { transform: none; }
  .btn:hover .arr, .link:hover .arr, .link-tile:hover .arr, .lift:hover .news-img img { transform: none; }
  .mm { transform: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */

/* Nav breakpoint: burger */
@media (max-width: 1179px) {
  .nav, .hdr-phone { display: none; }
  .burger {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius);
    background: var(--surface-muted); color: var(--text-heading); border: 0; cursor: pointer;
  }
  .burger .icon { width: 24px; height: 24px; grid-area: 1 / 1; }
  .burger .i-shut { display: none; }
  .burger[aria-expanded="true"] .i-open { display: none; }
  .burger[aria-expanded="true"] .i-shut { display: block; }
}

/* Tablet: 8-column feel, modules stack */
@media (max-width: 1023px) {
  .span-3, .span-4 { grid-column: span 6; }
  .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1; }

  .hh-text { grid-column: 1 / -1; grid-row: 1; }
  .hh-portrait { grid-column: 1 / span 6; grid-row: 2 / span 3; }
  .hh-trust > li { grid-column: 7 / span 6; grid-row: auto; margin-top: 0; }

  .sof-main, .sof-call { grid-column: 1 / -1; }

  .poss-photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .poss-close { grid-column: 1 / -1; }

  .ph-head, .ph-photo { grid-column: 1 / -1; }
  .ph-a, .ph-b, .ph-c, .ph-d { grid-column: span 6; }

  .steps5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps5::before { display: none; }

  .imgmod { grid-template-columns: minmax(0, 1fr); }
  .imgmod-photo { grid-column: 1; grid-row: 1; width: min(100%, 440px); }
  .imgmod-text { grid-column: 1; grid-row: 2; margin: calc(-1 * var(--ov)) 0 0 var(--ov); }

  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-lg); }
  .members-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .costs-main, .costs-side { grid-column: 1 / -1; }
  .news-lead, .news-row { grid-column: 1 / -1; grid-row: auto; }

  .faq-side { grid-column: 1 / -1; position: static; }
  .faq-legend { margin-top: var(--space-md); }
  .faq-list { grid-column: 1 / -1; }

  .contact-frame { grid-template-columns: minmax(0, 1fr); }
  .form-col { padding: var(--space-md); }
  .contact-close .ct-phone { grid-column: 1 / -1; }
  .contact-close .ct-mail, .contact-close .ct-addr { grid-column: span 6; }

  .th-text, .th-photo { grid-column: 1 / -1; }
  .th-photo { aspect-ratio: 3 / 2; min-height: 0; }
  .toc { columns: 2; }

  .kurz-side, .kurz-grid { grid-column: 1 / -1; padding-right: 0; }

  .steps10 { column-gap: var(--space-md); }
  .steps10 > li { grid-template-columns: 40px minmax(0, 1fr); }
  .steps10 > li > .own { grid-column: 2; justify-self: start; }

  .st-main { grid-column: 1 / -1; padding-right: 0; }
  .st-side { grid-column: 1 / -1; position: static; margin-top: var(--space-lg); }
  .st-side .imgmod-photo { width: 100%; }

  .ba-text, .ba-term, .ba-list, .ba-photo { grid-column: 1 / -1; }
  .lf-text, .lf-photo, .lf-rede { grid-column: 1 / -1; grid-row: auto; }
  .lf-photo { aspect-ratio: 3 / 2; min-height: 0; }
  .nb-text, .nb-side { grid-column: 1 / -1; }

  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --pad-section: calc(var(--space-section-gap-mobile) / 2 + var(--space-sm));
    --pad-tile: var(--space-margin-mobile);
    --ov: calc(var(--space-overlap) / 2);
    --gutter-page: var(--space-margin-mobile);
    --fs-h3-local: calc(var(--type-headline-md-size) - 4px);
    --lh-h3-local: calc(var(--type-headline-md-line) - 4px);
  }
  .g12 { grid-template-columns: minmax(0, 1fr); }
  .g12 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .tile.dark { padding: var(--space-md); }
  .btn { white-space: normal; }
  .cta-pair { flex-direction: column; align-items: stretch; }
  .sec-head { margin-bottom: var(--space-md); }

  .hdr { gap: var(--space-sm); }
  .brand-main { font-size: calc(var(--type-headline-md-size) - 4px); line-height: 1.1; }
  .hdr-cta { display: none; }
  .hdr-call { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); background: var(--secondary-container); color: var(--on-secondary); }
  .hdr-call .icon { width: 22px; height: 22px; }

  .hero { padding-top: var(--space-md); }
  .hh-text, .th-text { padding: var(--space-md); }
  .hh-portrait { aspect-ratio: 4 / 5; }
  .hh-trust > li { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hh-t1 { margin-top: calc(-1 * var(--ov)) !important; margin-inline: var(--space-sm); }

  .sof-call, .kurz-call { padding: var(--space-md); }
  .sof-step { padding: var(--space-md) var(--pad-tile); gap: var(--space-sm); }

  .poss { min-height: 0; }
  .poss-close { flex-direction: column; align-items: stretch; }

  .phases .ph-head { padding: 0; }
  .steps5 { grid-template-columns: minmax(0, 1fr); }

  .imgmod-photo { width: 100%; }
  .imgmod-text, .imgmod.stack .imgmod-text { margin: calc(-1 * var(--ov)) var(--space-sm) 0; }

  .team { grid-template-columns: minmax(0, 1fr); }
  .member { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-sm); }
  .member img { width: 96px; height: 96px; }
  .members-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .news-row { grid-template-columns: minmax(0, 1fr); }
  .voice-ph { min-height: 0; }

  .f-row2 { grid-template-columns: minmax(0, 1fr); }
  .contact-frame { padding: var(--space-sm); border-radius: var(--radius-xl); }
  .form-col { padding: var(--space-sm) var(--space-xs); }

  .toc { columns: 1; }
  .kurz-grid { grid-template-columns: minmax(0, 1fr); }

  .steps10 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .steps10 > li:nth-child(6) { border-top: 0; }

  .rows > li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-sm) var(--space-md); }
  .rows > li > .own { grid-column: 2; justify-self: start; }

  .merk, .lf-rede { grid-template-columns: minmax(0, 1fr); }
  .merk { align-items: flex-start; }
  .nb-text { padding: var(--pad-tile); }

  .ft-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}