/* chiliholz.de OnePager. Nur Layout und Seitenteile, alle Werte kommen aus tokens.css.
   Komponenten (ch-*) stehen in design-system/components.css. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--space-4)); scrollbar-gutter: stable; }
html.is-locked { overflow: hidden; }
.theme-fade,
.theme-fade * {
  transition: background-color 360ms ease, color 360ms ease, border-color 360ms ease, fill 360ms ease !important;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* width/height-Attribute verhindern Layoutsprünge, das Seitenverhältnis kommt aus CSS */
.ch-print > img { height: auto; }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: var(--z-toast);
  transform: translateY(-160%);
  transition: transform var(--motion-hover);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Navigation: durchscheinendes Material, Kante erst beim Scrollen ---------- */
.site-nav.ch-nav {
  background-color: color-mix(in srgb, var(--nav-bg) 74%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: transparent;
  transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
}
.site-nav[data-scrolled] {
  border-bottom-color: color-mix(in srgb, var(--color-border-strong) 18%, transparent);
  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--color-shadow) 55%, transparent);
}
.site-nav__primary { margin-left: auto; }
.site-nav .ch-nav__links { margin-block: 0; }
.site-nav .ch-nav__links a[aria-current="location"] { background-size: 100% 1.5px; }
.site-nav__end { display: flex; align-items: center; gap: var(--space-3); margin-left: var(--space-2); }

.theme-switch {
  display: inline-flex;
  flex: none;
  border: var(--border-hair) solid var(--color-border-strong);
  border-radius: var(--radius-round);
  overflow: hidden;
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.85rem 0.45rem;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: 0.6875rem;
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--motion-hover), color var(--motion-hover);
}
.theme-switch button:hover { background: var(--color-bg-sunken); }
.theme-switch button:active { background: var(--color-border); transition-duration: var(--duration-fast); }
.theme-switch button[aria-pressed="true"] { background: var(--color-fg); color: var(--color-bg); }
.theme-switch i { width: 0.75rem; height: 0.75rem; margin-top: -0.1em; border-radius: var(--radius-round); box-shadow: inset 0 0 0 1px currentColor; }
.theme-switch .dot-holz { background: var(--color-sand-200); }
.theme-switch .dot-schiefer { background: var(--color-night-900); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem 0.4rem;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: 0.75rem;
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg);
  background: transparent;
  border: var(--border-hair) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-toggle:active { transform: scale(0.97); transition: transform var(--duration-fast) var(--easing-press); }
.menu-toggle svg { width: 1.1rem; height: 1.1rem; margin-top: -0.1em; }

/* Menü für schmale Bildschirme: kommt unter der Leiste hervor und geht denselben Weg zurück */
.site-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--layout-gutter) var(--space-6);
  background-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: var(--border-hair) solid color-mix(in srgb, var(--color-border-strong) 18%, transparent);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-0.75rem);
  visibility: hidden;
  transition: opacity var(--duration-base) var(--easing-soft), transform var(--duration-base) var(--easing-soft), visibility 0s linear var(--duration-base);
}
.site-menu[data-open] { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.site-menu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.site-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0 var(--space-3);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  font-size: 0.875rem;
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg);
  text-decoration: none;
  border-bottom: var(--border-hair) solid var(--color-border);
}
.site-menu a::after { content: "✦"; color: var(--color-ornament); font-size: 0.75rem; }
.site-menu a:active { color: var(--color-accent-text); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-16) var(--space-24);
}
.hero__copy { display: grid; justify-items: center; text-align: center; gap: var(--space-6); }
.hero__copy .ch-lead { max-width: 31rem; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.hero__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); }

.hero-collage { position: relative; min-height: 40rem; }
.hero-collage > * { position: absolute; }
.hero-collage__main { top: 0; right: 5%; width: 50%; --_tilt: 2.5deg; z-index: 1; }
.hero-collage__main > img { aspect-ratio: 3 / 4; }
.hero-collage__patch { top: 7%; left: 4%; width: 34%; z-index: 2; }
.hero-collage__patch > img { aspect-ratio: 1; }
.hero-collage__knife { bottom: 2%; left: 10%; width: 50%; --_tilt: -4deg; z-index: 3; }
.hero-collage__badge { right: 0; bottom: 14%; z-index: 4; }

/* ---------- Abschnitte ---------- */
.section-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-8); margin-bottom: var(--space-12); }
.section-intro .ch-section-head { margin-bottom: 0; }

/* 01 Materialien */
.materials__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-16);
  align-items: center;
}
.materials__print { --_tilt: -1.5deg; }
.materials__print > img { aspect-ratio: 4 / 3; }

.mat-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--color-border); }
.mat-list li { border-bottom: var(--border-hair) solid var(--color-border); }
.mat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-5) var(--space-3);
  margin-inline: calc(-1 * var(--space-3));
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-hover);
}
.mat:hover { background-color: var(--color-bg-raised); }
.mat:active { background-color: var(--color-bg-sunken); transition-duration: var(--duration-fast); }
.mat__dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-round);
  border: var(--border-hair) solid var(--color-outline);
  background: var(--_swatch);
  transform: translateY(0.05em);
}
.mat__name { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--text-h4); line-height: var(--font-leading-snug); }
.mat__desc { grid-column: 2 / 3; margin: 0; font-size: var(--text-small); color: var(--color-fg-muted); max-width: 34rem; }
.mat__go {
  grid-row: 1 / 3;
  grid-column: 3;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.mat__go svg { width: 1rem; height: 1rem; margin-top: -0.15em; transition: transform var(--motion-hover); }
.mat:hover .mat__go svg { transform: translateX(4px); }

/* 02 Werkstatt: Filter + Collage-Spalten */
.wk-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.wk-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0.55em 0.95em 0.45em;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-fg);
  background: var(--color-bg-raised);
  border: var(--border-hair) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--motion-hover), color var(--motion-hover), transform var(--motion-press);
}
.wk-chip::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 1px;
  pointer-events: none;
}
.wk-chip:hover { background: var(--color-bg-sunken); }
.wk-chip:active { transform: scale(0.96); }
.wk-chip[aria-pressed="true"] { background: var(--color-badge); color: var(--color-on-badge); border-color: var(--color-badge); }
.wk-chip__count { font-variant-numeric: tabular-nums; opacity: 0.7; }

.wk-grid {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  columns: 3 16rem;
  column-gap: var(--space-8);
}
.wk-grid > li { break-inside: avoid; padding-bottom: var(--space-8); }
.wk-grid .ch-print { padding-bottom: var(--space-10); }
.wk-grid .ch-print > a { display: block; overflow: hidden; background: var(--color-bg-sunken); cursor: zoom-in; }
.wk-grid .ch-print img { width: 100%; height: auto; transition: transform var(--duration-slow) var(--easing-soft); }
.wk-grid .ch-print:hover img { transform: scale(1.025); }
.wk-grid .ch-print > a:active img { transform: scale(0.99); transition-duration: var(--duration-fast); }
.wk-grid .ch-print > a:focus-visible { outline-offset: -3px; }
.wk-grid .ch-tag { position: absolute; top: calc(var(--card-frame) + var(--space-3)); left: calc(var(--card-frame) + var(--space-3)); z-index: 1; pointer-events: none; }
.wk-status { margin-top: var(--space-2); }

/* Erscheinen beim Scrollen: wie ein Abzug, der sich entwickelt */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--easing-soft), transform 700ms var(--easing-soft); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; } }

/* 03 Anlässe */
.occasions__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-16); align-items: start; }
.occasions__note { max-width: 24rem; margin-top: var(--space-10); }
.occasions__note .ch-note { --_tilt: -2.5deg; }
.occasion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-10);
}
.occasion-list li { display: grid; gap: var(--space-2); padding-block: var(--space-6); border-top: var(--border-hair) solid var(--color-border-strong); }
.occasion-list h3 {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
}
.occasion-list h3::before { content: "★ "; color: var(--color-ornament); font-size: 0.8em; }
.occasion-list p { margin: 0; color: var(--color-fg-muted); }

/* 04 Ablauf: Überschriften sind hier h3 (Gliederung), gestaltet wie im Styleguide */
.ch-steps .ch-steps__title { font-family: var(--font-label); font-size: var(--text-small); font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; margin: 0; }
.process__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-12); }

/* 05 Anfrage */
.inquiry__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-12); align-items: start; }
.inquiry-form { display: grid; gap: var(--space-6); padding: var(--space-8); background: var(--color-bg-raised); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.inquiry-form__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.inquiry-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.inquiry-form legend { margin-bottom: var(--space-3); padding: 0; }
.inquiry-form .ch-choice-group { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ch-choice__swatch { display: block; overflow: hidden; }
.ch-choice__swatch img { width: 100%; height: 100%; object-fit: cover; }
.ch-choice__swatch--open { display: grid; place-items: center; background-color: var(--color-bg-sunken); background-image: var(--texture-hatch); font-family: var(--font-script); font-size: 1.75rem; color: var(--color-script); }
.ch-error[hidden] { display: none; }
.inquiry-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* Spamschutz-Feld: für Menschen unsichtbar, nicht per Tab erreichbar */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Motiv-Upload: das echte Feld ist verborgen, die Zone zeigt Fokus und Auswahl */
.ch-field:has(#f-file:focus-visible) .ch-dropzone { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.ch-dropzone:active { background-color: var(--color-bg-sunken); transition-duration: var(--duration-fast); }
.ch-dropzone.has-file { border-style: solid; border-color: var(--color-success); }
.ch-dropzone.has-file svg { color: var(--color-success); }
.ch-dropzone__remove {
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font: inherit;
  font-size: var(--text-small);
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  background: none;
  border: 0;
  cursor: pointer;
}
.ch-field.is-invalid .ch-dropzone { border-color: var(--color-danger); }

/* Ohne eingetragene Nummer blendet whatsapp.js alles aus; hidden muss gegen display-Regeln gewinnen */
[data-wa][hidden], [data-wa-block][hidden] { display: none !important; }

/* WhatsApp als leiser Zweitweg neben dem Senden-Knopf */
.wa-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg);
  text-decoration: none;
}
.wa-link svg { width: 1.5rem; height: 1.5rem; margin-top: -0.15em; color: var(--color-badge); transition: transform var(--motion-hover); }
.wa-link:hover { color: var(--color-accent-text); }
.wa-link:hover svg { transform: rotate(-8deg) scale(1.08); }
.wa-link:active svg { transform: scale(0.94); transition-duration: var(--duration-fast); }

/* Schwebender WhatsApp-Knopf: rundes Lederabzeichen mit Ziernaht, wie .ch-badge */
.wa-fab {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--color-on-badge);
  background: var(--color-badge);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  /* Materialisieren am eigenen Platz: wächst aus der Ecke, in der er wohnt */
  transform-origin: 100% 100%;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--easing-soft), transform var(--duration-slow) var(--easing-soft), box-shadow var(--motion-hover);
}
.wa-fab::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed color-mix(in srgb, var(--color-on-badge) 55%, transparent);
  border-radius: var(--radius-round);
  pointer-events: none;
}
.wa-fab svg { width: 1.75rem; height: 1.75rem; transition: transform var(--motion-hover); }
.wa-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-fab:hover { box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--color-badge) 25%, transparent); }
.wa-fab:hover svg { transform: rotate(-8deg); }
.wa-fab:active { transform: scale(0.94); transition-duration: var(--duration-fast); }
.wa-fab__label {
  position: absolute;
  right: calc(100% + var(--space-3));
  padding: 0.55rem 0.8rem 0.45rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-fg);
  background: var(--color-bg-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(8px);
  transform-origin: 100% 50%;
  transition: opacity var(--duration-base) var(--easing-soft), transform var(--duration-base) var(--easing-soft);
  pointer-events: none;
}
.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label { opacity: 1; transform: none; }
@media (hover: none) { .wa-fab__label { display: none; } }

.inquiry__aside { display: grid; gap: var(--space-10); padding-top: var(--space-4); }
.inquiry__collage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); }
.inquiry__collage .ch-print { --_tilt: 2deg; }
.inquiry__collage .ch-print > img { aspect-ratio: 1; }
.inquiry__collage .ch-badge { --badge-size: 7.5rem; margin-bottom: calc(-1 * var(--space-6)); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.contact-list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.contact-list svg { width: 1.25rem; height: 1.25rem; color: var(--color-script); margin-top: 0.15em; }
.contact-list strong { display: block; font-family: var(--font-label); font-size: 0.75rem; letter-spacing: var(--font-tracking-wide); text-transform: uppercase; }

/* ---------- Fuß ---------- */
.site-footer { padding-block: var(--space-24) var(--space-12); }
.site-footer__inner { display: grid; justify-items: center; gap: var(--space-5); text-align: center; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-footer__links a { font-family: var(--font-label); font-size: 0.75rem; font-weight: var(--font-weight-semibold); letter-spacing: var(--font-tracking-caps); text-transform: uppercase; color: var(--color-fg); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-accent-text); }

/* ---------- Materialwechsel des Systems weich überblenden ---------- */
@media (prefers-reduced-transparency: reduce) {
  .site-nav.ch-nav, .site-menu { background-color: var(--color-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-nav.ch-nav { background-color: var(--color-bg); border-bottom-color: var(--color-border-strong); }
}

/* ---------- Umbrüche ---------- */
@media (max-width: 62rem) {
  .ch-nav__links, .site-nav__end .ch-btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .hero__grid, .materials__grid, .occasions__grid, .inquiry__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { padding-block: var(--space-12) var(--space-20); gap: var(--space-10); }
  .hero-collage { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8) var(--space-5); align-items: center; }
  .hero-collage > * { position: relative; inset: auto; width: auto; }
  .hero-collage__main { grid-row: span 2; }
  .hero-collage__main { grid-column: 1; grid-row: 1 / 3; }
  .hero-collage__patch { grid-column: 2; grid-row: 1; }
  .hero-collage__badge { grid-column: 2; grid-row: 2; justify-self: center; --badge-size: 7.5rem; }
  .hero-collage__knife { grid-column: 1 / -1; width: min(100%, 26rem); justify-self: center; }
  .materials__grid { gap: var(--space-12); }
  .materials__print { max-width: 34rem; }
  .section-intro { grid-template-columns: minmax(0, 1fr); }
  .occasions__note { margin-top: var(--space-8); }
}
.ch-wordmark > span { white-space: nowrap; }

@media (max-width: 44rem) {
  /* Schmal: nur die Materialpunkte, die Beschriftung bleibt für Screenreader */
  .theme-switch button { min-width: 2.75rem; min-height: 2.75rem; padding: 0; justify-content: center; }
  .theme-switch i { width: 1rem; height: 1rem; margin: 0; }
  .theme-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  .ch-nav__inner { gap: var(--space-3); }
  .ch-wordmark img { width: 2.25rem; height: 2.25rem; }
  .occasion-list { grid-template-columns: minmax(0, 1fr); }
  .inquiry-form { padding: var(--space-5); }
  .inquiry-form__two { grid-template-columns: minmax(0, 1fr); }
  .wk-grid { columns: 2; column-gap: var(--space-4); }
  .wk-grid > li { padding-bottom: var(--space-5); }
  .wk-grid .ch-print { --card-frame: var(--space-2); padding-bottom: var(--space-8); }
  .wk-grid .ch-print figcaption { font-size: 1rem; bottom: var(--space-1); }
  .wk-grid .ch-tag { display: none; }
  .mat { grid-template-columns: auto minmax(0, 1fr); }
  .mat__go { grid-row: auto; grid-column: 2; margin-top: var(--space-1); }
}

/* ---------- Rechtliche Seiten: ruhig, gut lesbar, kein Collage-Schmuck ---------- */
.legal { padding-block: var(--space-16) var(--space-24); }
.legal .ch-section-head { margin-bottom: var(--space-10); }
.legal__body { max-width: var(--layout-prose); display: grid; gap: var(--space-10); }
.legal__body section { display: grid; gap: var(--space-3); }
.legal__body h2 {
  margin: 0;
  padding-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-snug);
  border-top: var(--border-hair) solid var(--color-border);
}
.legal__body p, .legal__body address, .legal__body ul { margin: 0; }
.legal__body address { font-style: normal; line-height: var(--font-leading-relaxed); }
.legal__body ul { padding-left: 1.25rem; display: grid; gap: var(--space-1); }
.legal__body li::marker { color: var(--color-ornament); }
.legal__body code { font-family: var(--font-mono); font-size: 0.875em; }
.legal__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; }
.legal__facts dt { font-family: var(--font-label); font-size: 0.75rem; font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; padding-top: 0.2em; }
.legal__facts dd { margin: 0; }
.legal__id { font-family: var(--font-label); font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-wide); font-variant-numeric: tabular-nums; }
.legal__toc { max-width: var(--layout-prose); margin-bottom: var(--space-12); padding: var(--space-5) var(--space-6); background: var(--color-bg-raised); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.legal__toc ol { margin: 0; padding-left: 1.25rem; columns: 2 14rem; column-gap: var(--space-8); }
.legal__toc li { padding-block: var(--space-1); break-inside: avoid; }
.legal__toc li::marker { font-family: var(--font-label); color: var(--color-ornament); }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg);
  text-decoration: none;
}
.legal-back svg { width: 1rem; height: 1rem; margin-top: -0.15em; transition: transform var(--motion-hover); }
.legal-back:hover svg { transform: translateX(-3px); }
.site-footer__links a[aria-current="page"] { color: var(--color-accent-text); }
@media (max-width: 44rem) {
  .legal-back { font-size: 0; gap: 0; } /* nur der Pfeil, der Name bleibt als Linktext erhalten */
  .legal-back svg { width: 1.25rem; height: 1.25rem; }
}

/* ---------- Materialnamen sind h3 (Gliederung für Suche und Screenreader) ---------- */
h3.mat__name { margin: 0; }

/* ---------- 05 Fragen: aufklappbare Antworten, der Text steht trotzdem vollständig im HTML ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-16); align-items: start; }
.faq { border-top: var(--border-hair) solid var(--color-border-strong); }
.faq__item { border-bottom: var(--border-hair) solid var(--color-border-strong); }
.faq__item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "✦";
  justify-self: end;
  color: var(--color-ornament);
  transition: transform var(--motion-hover);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover h3 { color: var(--color-accent-text); }
.faq__item summary:active { opacity: 0.8; }
.faq__item h3 { margin: 0; font-family: var(--font-body); font-size: var(--text-lead); font-weight: var(--font-weight-bold); line-height: var(--font-leading-snug); transition: color var(--motion-hover); }
.faq__item p { margin: 0 0 var(--space-6); max-width: var(--layout-prose); color: var(--color-fg-muted); }

.site-footer__address { font-style: normal; font-size: var(--text-small); color: var(--color-fg-muted); }

@media (max-width: 62rem) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

/* ---------- Werkstatt in Kürze: zitierfähiger Absatz + Faktentabelle ---------- */
.about { padding-block: var(--space-16) var(--space-20); }
.about__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-12); align-items: start; }
.about__head { margin-bottom: 0; }
.about__body { display: grid; gap: var(--space-8); }
.about__lead { margin: 0; font-size: var(--text-lead); line-height: var(--font-leading-relaxed); max-width: 44rem; text-wrap: pretty; }
.about__facts { max-width: 44rem; }
.about__facts th { width: 32%; }

/* Materialvergleich in den Fragen */
.faq__table { overflow-x: auto; margin-bottom: var(--space-6); }
.material-table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--text-small); }
.material-table th, .material-table td { text-align: left; vertical-align: baseline; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--border-hair) solid var(--color-border); }
.material-table thead th { font-family: var(--font-label); font-size: 0.75rem; font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; border-bottom-color: var(--color-border-strong); }
.material-table tbody th { font-weight: var(--font-weight-bold); white-space: nowrap; }
.material-table td { color: var(--color-fg-muted); }

@media (max-width: 62rem) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}