/* ============================================================
   ENTEL — Layout / Components
   ============================================================ */

/* ---------- Responsive helpers ---------- */
.hide-sm { display: inline; }
.hide-md { display: inline; }
.nav-burger { display: none; }
@media (max-width: 1080px) {
  .hide-md { display: none !important; }
}
@media (max-width: 880px) {
  .hide-sm { display: none; }
  .nav-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
}

/* ---------- Sticky quickbar (mobile) ---------- */
.quickbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: none;
  /* minmax(0, 1fr) statt 1fr — sonst schrumpfen die Spalten nicht unter die
     Content-Breite ("WhatsApp"/"Container") und die Bar läuft bei sehr
     schmalen Viewports (z.B. 320px / 400% Zoom) horizontal über. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--navy-900); color: #fff;
  z-index: 40;
  border-top: 2px solid var(--accent);
}
.qb-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  /* min-width: 0 — Grid-Items schrumpfen sonst nicht unter ihre eigene
     Content-Breite, selbst wenn die Spur schon minmax(0, 1fr) erlaubt. */
  min-width: 0;
  padding: 10px 4px 12px;
  font-size: 11px; font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: .05em;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.1);
}
.qb-btn span { max-width: 100%; text-align: center; }
.qb-btn:last-child { border-right: 0; }
.qb-btn--accent { background: var(--accent); }
@media (max-width: 720px) {
  .quickbar { display: grid; }
  body { padding-bottom: 72px; }
}

/* ---------- Barrierefreiheits-Widget ---------- */
.a11y-widget { position: fixed; right: 16px; bottom: 16px; z-index: 70; }
@media (max-width: 720px) {
  .a11y-widget { bottom: 88px; }
}
.a11y-toggle {
  width: 52px; height: 52px; border-radius: 50%;
  /* Weißer Rand statt gleicher Farbe wie der Hintergrund — der Button
     schwebt fixed über wechselnden Sektionen (hell/dunkel), ohne eigenen
     Rand-Kontrast wäre er auf dunklen Sektionen (--navy-800) fast unsichtbar
     (nur 1.18:1 zwischen --ink-Füllung und --navy-800-Hintergrund). */
  background: var(--ink); color: #fff; border: 2px solid rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(10,22,38,.28);
}
.a11y-toggle:hover { background: var(--accent); border-color: var(--accent); }
.a11y-panel {
  position: absolute; bottom: 64px; right: 0;
  width: 264px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(10,22,38,.3);
  padding: 16px;
}
.a11y-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.a11y-panel__title { font-weight: 700; font-family: var(--f-display); font-size: 15px; }
.a11y-panel__close { background: transparent; border: 0; cursor: pointer; color: var(--ink); display: flex; padding: 4px; }
.a11y-panel__group { padding-block: 10px; border-top: 1px solid rgba(10,22,38,.12); }
.a11y-panel__group:first-of-type { border-top: 0; padding-top: 4px; }
.a11y-panel__label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 8px; }
.a11y-panel__row { display: flex; align-items: center; gap: 12px; }
.a11y-btn {
  width: 32px; height: 32px; border: 1.5px solid var(--ink); background: transparent;
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 4px; flex-shrink: 0;
}
.a11y-btn:hover { background: var(--ink); color: #fff; }
.a11y-panel__value { font-family: var(--f-mono); font-size: 13px; min-width: 42px; text-align: center; }
.a11y-panel__toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 14px; }
.a11y-panel__toggle-row span { display: flex; align-items: center; gap: 8px; }
.a11y-panel__reset {
  margin-top: 12px; width: 100%; padding: 8px;
  background: transparent; border: 1.5px solid var(--muted); color: var(--muted);
  border-radius: 4px; cursor: pointer; font-size: 13px;
}
.a11y-panel__reset:hover { border-color: var(--ink); color: var(--ink); }

/* Schriftgröße: die meisten Deklarationen im Theme sind in px statt rem
   fixiert, ein simples html{font-size} skaliert also nicht mit. Deshalb
   CSS-`zoom` (breit unterstützt: Chrome/Edge/Safari/Firefox 126+) — skaliert
   Layout, Text und Bilder gemeinsam wie der native Browser-Zoom, ohne jede
   einzelne px-Deklaration umschreiben zu müssen.
   WICHTIG: nur auf #main (den Seiteninhalt), NICHT auf body/html — sonst
   verschieben/verzerren sich Sticky-Header, QuickBar und das Widget selbst
   relativ zum (unveränderten) Viewport mit, was sich "hakelig" anfühlt. */
#main { zoom: var(--a11y-zoom, 1); }

/* Hoher Kontrast: als CSS-Filter auf <html>, weil sehr viele Textfarben im
   Theme als inline rgba(...) gesetzt sind (nicht über die --ink/--muted
   Variablen) — ein Filter wirkt auf die gerenderten Pixel und erfasst damit
   zuverlässig auch diese Fälle. */
html[data-a11y-contrast="high"] {
  filter: contrast(1.5) brightness(1.05);
}

/* Reduzierte Bewegung: alle Animationen/Übergänge sitecweit abschalten
   (Ticker-Marquee, Hover-Transforms, FAQ-Akkordeon, Foto-Zoom etc.). */
html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Links unterstreichen: Standard-Theme unterscheidet Links nur über Farbe
   (a{text-decoration:none}), das verletzt WCAG SC 1.4.1 "Use of Color" für
   Nutzer, die Farbe nicht als einziges Unterscheidungsmerkmal wahrnehmen. */
html[data-a11y-links="underline"] a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Textabstand: WCAG 2.1 SC 1.4.12 "Text Spacing" — Zeilenhöhe mind. 1.5x,
   Absatzabstand mind. 2x Schriftgröße, Buchstabenabstand mind. 0.12x,
   Wortabstand mind. 0.16x, ohne Inhalts-/Funktionsverlust. Werte 1:1 aus
   dem Kriterium übernommen (nicht frei gewählt). */
html[data-a11y-spacing="wide"] * {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html[data-a11y-spacing="wide"] p {
  margin-bottom: 2em !important;
}

/* ============================================================
   HERO — Asymmetric Two Door (60/40)
   ============================================================ */
.hero {}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
}
.hero-grid--two {
  grid-template-columns: 1fr 1fr;
}
.door {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px, 60vh, 620px);
  display: flex; flex-direction: column;
  transition: filter .2s ease;
}
.door__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}
.door .btn,
.door .chip,
.door .door__inner a { position: relative; z-index: 3; }
.door--container {
  background: var(--paper);
  color: var(--ink);
  border-right: 1px solid rgba(10,22,38,.08);
}
.door--scrap {
  background: var(--paper-2);
  color: var(--ink);
}
.door__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .85;
}
.door--container .door__photo::after,
.door--scrap     .door__photo::after {
  content: "";
  position: absolute; inset: 0;
  /* Top stays fully clear so the photo shines through;
     only the lower 50% fades to paper for text readability. */
  background: linear-gradient(180deg, transparent 0%, transparent 35%, var(--paper) 100%);
}
.door--scrap .door__photo::after {
  background: linear-gradient(180deg, transparent 0%, transparent 35%, var(--paper-2) 100%);
}
.door__inner {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 1;
  gap: 28px;
}
.door__top { display: flex; align-items: center; gap: 16px; }
.door__body { max-width: 520px; }
.door__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: "wdth" 85;
  font-size: clamp(34px, 3.9vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
body[data-typo="sachlich"] .door__title { font-variation-settings: normal; }
body[data-typo="modern"]   .door__title { font-variation-settings: "wdth" 100; font-weight: 500; }
.door__lead {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 480px;
}
.door:hover .door__photo { opacity: 1; }

.hero-util {
  background: var(--ink);
  color: #fff;
  border-top: 1px solid var(--ink);
}
.hero-util__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-block: 22px;
  padding-inline: 0;
}
.hero-util__item {
  display: flex; gap: 12px; align-items: center;
  padding-inline: clamp(16px, 2vw, 32px);
  border-right: 1px solid rgba(255,255,255,.1);
}
.hero-util__item:last-child { border-right: 0; }
.hero-util__item svg { color: var(--accent); flex-shrink: 0; }
.hero-util__item a { color: #fff; }
/* "Anlieferung" hat deutlich mehr Text als die anderen 4 Punkte — als
   Grid-Item mit gleicher Spaltenbreite hätte es den ganzen Rahmen auf seine
   Zeilenhöhe gezwungen und darunter viel Leerraum bei den kurzen Punkten
   erzeugt. Läuft ab Tablet-Breite stattdessen als eigene volle Zeile unter
   den anderen 4 (order + grid-column: 1/-1) — nur bis 480px runter bleibt
   die ursprüngliche Reihenfolge (zwischen Schrottplatz und Öffnungszeiten),
   da dort ohnehin jeder Punkt einzeln volle Breite bekommt. */
.hero-util__item--wide {
  order: 1;
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  justify-content: center;
  text-align: center;
}

@media (max-width: 980px) {
  .hero-grid--two { grid-template-columns: 1fr; }
  .door--container { border-right: 0; border-bottom: 1px solid rgba(10,22,38,.08); }
  .door { min-height: 380px; }
  .door__title { font-size: clamp(30px, 8vw, 44px); }
  /* Mobile: Box ist niedriger als am Desktop, dadurch liegt Kicker+Titel
     fast komplett in der klaren (unabgedunkelten) Foto-Zone — Foto hier
     transparenter machen, damit der Text lesbar bleibt. */
  .door__photo { opacity: .45; }
  /* .door__inner nutzt justify-content:space-between und schiebt Button+Hint
     dadurch bis nah an den unteren Rand der Box — .photo__label sitzt aber
     ebenfalls dort (16px vom unteren Rand der ganzen Door, nicht nur vom
     Foto-Bereich). Bei umgebrochenem Titel/Lead-Text reicht der Abstand auf
     Mobile nicht mehr aus, Button/Hint und Bildunterschrift überlappen sich.
     Zusätzlicher Bottom-Padding schafft Platz für die Unterschrift. */
  .door__inner { padding-bottom: 80px; }
  .door--container .door__photo::after,
  .door--scrap     .door__photo::after {
    background: linear-gradient(180deg, transparent 0%, var(--paper) 90%);
  }
  .door--scrap .door__photo::after {
    background: linear-gradient(180deg, transparent 0%, var(--paper-2) 90%);
  }
}
@media (max-width: 880px) {
  .hero-util__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-util__item:nth-child(2) { border-right: 0; }
  .hero-util__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 480px) {
  .hero-util__row { grid-template-columns: 1fr; gap: 8px; padding-block: 12px; }
  .hero-util__item { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.1);
                     padding-block: 8px; }
  /* Unter 480px bleibt "Anlieferung" an ihrer ursprünglichen Stelle in der
     Reihenfolge (zwischen Schrottplatz und Öffnungszeiten), da hier ohnehin
     jeder Punkt einzeln volle Breite bekommt — kein Grund für eine eigene
     Sonderzeile. */
  .hero-util__item--wide { order: 0; grid-column: auto; border-top: 0; justify-content: flex-start; text-align: left; }
}

/* ---------- Ticker ---------- */
.ticker__track {
  display: flex; gap: 56px;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* WCAG 2.2.2 Pause/Stop/Hide — OS-Einstellung "Bewegung reduzieren" direkt
   respektieren, nicht erst wenn Nutzer den Schalter im Barrierefreiheits-
   Widget manuell findet. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ============================================================
   TRUST STRIP — asymmetric, first stat dominant
   ============================================================ */
.trust { padding-block: clamp(40px, 5vw, 64px); }
.trust-wrap { display: grid; gap: clamp(24px, 3vw, 36px); }
.trust-top {
  display: grid;
  grid-template-columns: 2fr auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.trust-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.trust-stat__n {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "wdth" 85;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.trust-stat__l {
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.55);
}
.trust-score {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
  min-width: 260px;
  text-align: right;
}
.trust-score__head {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
}
.trust-score__brand { font-weight: 600; letter-spacing: -0.01em; }
.trust-score__sep   { opacity: .35; margin: 0 2px; }
.trust-score__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.trust-score__sub {
  font-size: 13px; color: rgba(255,255,255,.65);
}
.trust-score__sub strong { color: #fff; font-weight: 600; }
.trust-score__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-on-dark);
}
.trust-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
.trust-review {
  background: #fff;
  color: var(--ink);
  border-radius: 8px;
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.04);
}
.trust-review__head {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
}
.trust-review__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.trust-review__meta strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 3px;
}
.trust-review__sub {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.trust-review__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 980px) {
  .trust-top { grid-template-columns: 1fr; }
  .trust-score { align-items: flex-start; text-align: left; }
  .trust-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .trust-stats { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   KONFIGURATOR
   ============================================================ */
.step-ind {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ink);
  background: var(--paper);
}
.step-ind__item {
  display: flex; gap: 12px; align-items: center;
  padding: 16px 20px;
  border-right: 2px solid var(--ink);
  background: var(--paper);
  color: var(--muted);
  min-width: 0;
}
.step-ind__item:last-child { border-right: 0; }
.step-ind__item.is-on { background: var(--ink); color: #fff; }
.step-ind__num {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.step-ind__label {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "wdth" 95;
  font-size: 15px;
  letter-spacing: -0.01em;
}
@media (max-width: 560px) {
  .step-ind__item { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 8px; }
  .step-ind__label { font-size: 12px; line-height: 1.2; }
}

.kfg {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: start;
}
.kfg__pane {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 32px;
}
.kfg__summary {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 24px;
  position: sticky;
  top: 80px;
}

.kfg-grid--sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.kfg-grid--mats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 880px) {
  .kfg { grid-template-columns: 1fr; }
  .kfg__summary { position: static; }
  .kfg-grid--sizes,
  .kfg-grid--mats { grid-template-columns: repeat(2, 1fr); }
}

.size-card {
  background: var(--paper-2);
  border: 2px solid transparent;
  padding: 16px;
  text-align: left;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer;
  transition: border-color .15s ease, transform .08s ease;
}
.size-card:hover { border-color: var(--steel); }
.size-card.is-sel { border-color: var(--accent); background: var(--accent-soft); }
/* var(--muted) auf var(--accent-soft) liegt bei 4.47:1 (knapp unter 4.5:1) —
   nur innerhalb der ausgewählten Karte leicht abdunkeln. */
.size-card.is-sel .size-card__use,
.size-card.is-sel .mono {
  color: #4C5866 !important;
}
.size-card__viz {
  height: 60px; display: flex; align-items: end; justify-content: center;
}
.size-card__meta { display: flex; justify-content: space-between; align-items: baseline; }
.size-card__use { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }

.mat-card {
  background: var(--paper-2);
  border: 2px solid transparent;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
  display: grid; gap: 4px;
}
.mat-card:hover { border-color: var(--steel); }
.mat-card.is-sel { border-color: var(--accent); background: var(--accent-soft); }
.mat-card__dot {
  width: 14px; height: 14px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  margin-bottom: 6px;
}
.mat-card.is-sel .mat-card__dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent-soft);
}
.mat-card__hint { font-size: 12px; color: var(--muted); }

.kfg-actions {
  display: flex; justify-content: space-between; margin-top: 24px;
  padding-top: 16px; border-top: 1px solid rgba(10,22,38,.12);
}

.kfg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.kfg-field { display: grid; gap: 6px; }
.kfg-field input {
  border: 2px solid var(--ink);
  padding: 14px;
  background: var(--paper-2);
  font-family: var(--f-mono);
  font-size: 16px;
  border-radius: 2px;
}
.kfg-field input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 480px) { .kfg-form { grid-template-columns: 1fr; } }

.kfg-cta { background: var(--paper-2); padding: 20px; border: 2px solid var(--ink); margin-top: 8px; }

.kfg-dl { margin: 16px 0 0; }
.kfg-dl > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed rgba(10,22,38,.18);
  font-size: 14px;
}
.kfg-dl dt { color: var(--muted); }
.kfg-dl dd { margin: 0; font-weight: 600; text-align: right; }

/* ============================================================
   METAL IDENTIFIER
   ============================================================ */
.met-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}
.met-tiles {
  display: grid;
  grid-template-columns: 1fr;
  border: 2px solid var(--ink);
}
.met-tile {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 18px;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid rgba(10,22,38,.1);
  text-align: left;
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "wdth" 95;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.met-tile:last-child { border-bottom: 0; }
.met-tile:hover { background: var(--paper-2); }
.met-tile.is-sel { background: var(--ink); color: #fff; }
.met-tile__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  flex-shrink: 0;
}
.met-tile.is-sel .met-tile__dot { border-color: #fff; }

.met-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.met-detail__photo { padding: 0; min-height: 320px; }
.met-detail__photo .photo { height: 100%; border: 0; }
.met-detail__body { padding: 28px; }
.met-sorten {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  font-size: 14px;
}
.met-sorten li { display: flex; gap: 6px; align-items: center; color: var(--ink); }
.met-sorten svg { color: var(--accent); }
.met-note {
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-size: 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.met-cta {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
@media (max-width: 980px) {
  .met-grid { grid-template-columns: 1fr; }
  .met-tiles { grid-template-columns: repeat(3, 1fr); }
  .met-tile { border-right: 1px solid rgba(10,22,38,.1); border-bottom: 1px solid rgba(10,22,38,.1); }
  .met-detail { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .met-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   SECTION INTRO + SEC HEAD helpers
   ============================================================ */
.sec-intro {
  margin-bottom: clamp(40px, 6vw, 80px);
  max-width: 980px;
}
.sec-head {
  display: block;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.sec-head__num {
  width: auto;
  display: inline-block;
  margin-bottom: 14px;
}
.sec-head__body { max-width: 900px; }
.sec-head__title { margin: 10px 0 0; }
.sec-head__lead { color: var(--muted); font-size: 18px; margin-top: 16px; max-width: 640px; }
.sec-head--dark .sec-head__lead { color: rgba(255,255,255,.65); }
.sec-head--dark .sec-head__title { color: #fff; }

/* ============================================================
   SEO blocks — chapter num inline, plain headline, no eyebrow chip
   ============================================================ */
.seo-stack { display: grid; gap: clamp(48px, 7vw, 96px); }
.seo-block {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.seo-block--flip .seo-block__photo { order: 2; }
.seo-block__photo { position: relative; }
.seo-block__num {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(72px, 10vw, 140px);
  line-height: 0.78;
}
.seo-block__title {
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1;
  margin: 0 0 20px;
}
.seo-block__text {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 560px;
}
.seo-block__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  color: var(--ink);
  transition: gap .15s ease;
}
.seo-block__cta:hover { gap: 14px; color: var(--accent); }
@media (max-width: 880px) {
  .seo-block { grid-template-columns: 1fr; gap: 24px; }
  .seo-block--flip .seo-block__photo { order: 0; }
}

/* ============================================================
   REVIEWS — editorial pull-quote feel
   ============================================================ */
.rev-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 24px;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(10,22,38,.15);
}
.rev-score { display: flex; gap: 14px; align-items: baseline; }
.rev-score__num {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "wdth" 80;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.rev-score__stars {
  font-size: 24px;
  letter-spacing: .1em;
  color: var(--accent);
  line-height: 1;
}
.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.rev-card {
  background: transparent;
  padding: 24px clamp(20px, 2.5vw, 32px);
  margin: 0;
  border-right: 1px solid rgba(10,22,38,.12);
}
.rev-card:first-child { padding-left: 0; }
.rev-card:last-child { border-right: 0; padding-right: 0; }
.rev-card__q {
  margin: 0 0 20px;
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "wdth" 95;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rev-card__c { display: grid; gap: 4px; }
.rev-card__c strong { font-weight: 600; font-size: 15px; }
@media (max-width: 900px) {
  .rev-grid { grid-template-columns: 1fr; }
  .rev-card { border-right: 0; border-bottom: 1px solid rgba(10,22,38,.12);
              padding: 24px 0; }
  .rev-card:last-child { border-bottom: 0; }
}

/* ============================================================
   ANFAHRT
   ============================================================ */
.anf-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.anf-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; }
.anf-steps li {
  display: grid; grid-template-columns: 60px 1fr; gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.15);
}
.anf-num {
  font-size: 24px;
  color: var(--accent-on-dark);
  font-weight: 700;
}
.anf-map { min-height: 480px; }
@media (max-width: 900px) {
  .anf-grid { grid-template-columns: 1fr; }
  .anf-map { min-height: 380px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq-side {
  position: sticky;
  top: 100px;
}
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.faq-row { border-bottom: 1px solid rgba(10,22,38,.15); }
.faq-row.is-on { background: var(--paper-2); }
.faq-q {
  width: 100%;
  background: transparent; border: 0;
  padding: 22px 0;
  display: flex; gap: 24px; align-items: center;
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "wdth" 95;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-align: left;
  color: var(--ink);
}
.faq-q__n {
  font-family: var(--f-mono);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  min-width: 28px;
}
.faq-q__t {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
  min-width: 24px;
  text-align: center;
}
.faq-a {
  padding: 0 24px 24px 52px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 720px;
}
@media (max-width: 880px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .faq-a { padding: 0 0 24px 52px; }
}

/* ============================================================
   BUY LIST — simple text list, dashes only
   ============================================================ */
.buy-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  font-family: var(--f-mono);
  font-size: 13px;
  border-top: 1px solid rgba(10,22,38,.15);
}
.buy-list li {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid rgba(10,22,38,.1);
  color: var(--ink);
}
.buy-list li::before {
  content: "+ ";
  color: var(--accent);
  font-weight: 700;
  margin-right: 8px;
}

/* ============================================================
   CTA BAND — confident close
   ============================================================ */
.cta-band {
  background: var(--navy-800);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 90% 50%, rgba(232,84,31,.18) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band__row {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
  padding-block: clamp(64px, 8vw, 96px);
}
.cta-band__actions { display: grid; gap: 12px; }
@media (max-width: 760px) {
  .cta-band__row { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   Tweak: typo modes — fonts only, no caps change
   ============================================================ */
body[data-typo="sachlich"] {
  --f-display: "Inter Tight", system-ui, sans-serif;
}
body[data-typo="sachlich"] .h-hero,
body[data-typo="sachlich"] .h-section,
body[data-typo="sachlich"] .h-card,
body[data-typo="sachlich"] .chapter-num,
body[data-typo="sachlich"] .rev-score__num {
  font-variation-settings: normal;
  letter-spacing: -0.025em;
  font-weight: 700;
}

body[data-typo="modern"] {
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
}
body[data-typo="modern"] .h-hero,
body[data-typo="modern"] .h-section,
body[data-typo="modern"] .h-card {
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  letter-spacing: -0.035em;
}

/* ============================================================
   NAV — scrolled-state expanding call CTA + route icon
   ============================================================ */
.nav-call {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transition: padding .2s ease;
}
.nav-call .nav-call__num { display: none; font-family: var(--f-mono); }
.nav-call.is-expanded .nav-call__txt { display: none; }
.nav-call.is-expanded .nav-call__num { display: inline; }

.nav-route {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 8px;
  border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.nav-route:hover { background: var(--ink); color: #fff; }

@media (max-width: 480px) {
  .nav-call .nav-call__txt { display: none; }
  .nav-call.is-expanded .nav-call__num { display: none; }
  .nav-call { padding: 9px 12px; }
}

/* ============================================================
   ROUTE POPUP
   ============================================================ */
.route-pop {
  position: fixed; inset: 0;
  background: rgba(10,22,38,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadein .15s ease;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.route-pop__card {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 32px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.route-pop__x {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 2px solid var(--ink);
  padding: 6px; border-radius: 2px; cursor: pointer;
  color: var(--ink);
}
.route-pop__row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(10,22,38,.15);
}
.route-pop__row svg { margin-top: 3px; color: var(--accent); flex-shrink: 0; }
.route-pop__row a { color: var(--ink); }
.route-pop__actions {
  display: grid; gap: 10px; margin-top: 20px;
}

@media (max-width: 540px) {
  .route-pop { padding: 0; align-items: stretch; }
  .route-pop__card {
    max-width: 100%;
    max-height: 100vh;
    border: 0;
    padding: 32px 24px;
  }
}

/* ============================================================
   SUBPAGES — Container
   ============================================================ */
.size-table {
  display: grid; gap: 32px;
}
.size-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  border: 2px solid var(--ink);
  background: var(--paper);
  align-items: stretch;
}
.size-row__photo { min-height: 280px; }
.size-row__photo .photo { height: 100%; border: 0; }
.size-row__meta { padding: 28px 32px; display: grid; gap: 16px; align-content: start; }
.size-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.size-row__specs {
  display: grid; grid-template-columns: 1fr 1fr; margin: 0;
  border-top: 1px dashed rgba(10,22,38,.2);
  border-bottom: 1px dashed rgba(10,22,38,.2);
  padding: 12px 0;
}
.size-row__specs > div { display: grid; gap: 4px; }
.size-row__specs dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0; }
.size-row__specs dd { margin: 0; font-size: 15px; font-weight: 600; }
.size-row__use ul {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: 4px; font-size: 14px;
}
.size-row__use li { display: flex; gap: 6px; align-items: center; }
.size-row__use svg { color: var(--accent); }
@media (max-width: 760px) {
  .size-row { grid-template-columns: 1fr; }
  .size-row__meta { padding: 24px; }
}

/* ---------- Allowed grid ---------- */
.allowed-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.allowed-col {
  border: 2px solid var(--ink);
  background: var(--paper);
}
.allowed-col__head {
  display: flex; gap: 10px; align-items: center;
  padding: 16px 20px;
  font-family: var(--f-display); font-weight: 600;
  font-variation-settings: "wdth" 95;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--ink);
}
.allowed-col__head.ok   { background: #DCEFE3; color: var(--ok); }
.allowed-col__head.warn { background: var(--accent-soft); color: var(--accent); }
.allowed-col ul { list-style: none; padding: 0; margin: 0; }
.allowed-col li {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(10,22,38,.1);
  display: grid; gap: 4px;
}
.allowed-col li:last-child { border-bottom: 0; }
.allowed-col li strong { font-size: 15px; }
.allowed-col li span { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .allowed-grid { grid-template-columns: 1fr; } }

/* ---------- Step grid (Ablauf) ---------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step-cell {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
}
.step-cell__num {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-on-dark);
  margin-bottom: 16px;
}
@media (max-width: 880px) { .step-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .step-grid { grid-template-columns: 1fr; } }

/* ---------- Check list ---------- */
.check-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.check-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 16px;
}
.check-list svg { color: var(--accent); margin-top: 3px; flex-shrink: 0; }

/* ============================================================
   SUBPAGES — Metallankauf
   ============================================================ */
.anchor-nav {
  position: sticky; top: 64px;
  z-index: 30;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
@media (max-width: 860px) {
  /* Auf schmalen Screens wickeln die 8-10 Chips auf mehrere Zeilen und die
     sticky-Leiste wuerde beim Scrollen fast den ganzen Bildschirm verdecken. */
  .anchor-nav { position: static; top: auto; }
}
.anchor-chip {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 8px 14px;
  border: 1px solid rgba(10,22,38,.2);
  background: var(--paper-2);
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: all .12s ease;
}
.anchor-chip:hover { border-color: var(--accent); color: var(--accent); }
.anchor-chip__dot { width: 10px; height: 10px; border-radius: 50%; }

.metal-sec {
  padding-block: clamp(48px, 7vw, 88px);
  border-bottom: 1px solid rgba(10,22,38,.1);
}
.metal-sec--alt { background: var(--paper-2); }
.metal-sec__head {
  display: grid; grid-template-columns: 80px 1fr; gap: 16px;
  align-items: center; margin-bottom: 32px;
}
.metal-sec__num {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.metal-sec__body {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.metal-sec__typ { margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(10,22,38,.2); }
.metal-sec__photo { min-height: 380px; }
.metal-sec__photo .photo { height: 100%; }
.sort-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sort-list li {
  display: grid; gap: 4px;
  padding: 12px 16px;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: 0 2px 2px 0;
}
.metal-sec--alt .sort-list li { background: var(--paper); }
.sort-list strong { font-size: 14px; }
.sort-list span { font-size: 13px; color: var(--muted); }

@media (max-width: 1000px) {
  .metal-sec__body { grid-template-columns: 1fr 1fr; }
  .metal-sec__photo { grid-column: 1 / -1; min-height: 280px; }
}
@media (max-width: 720px) {
  .metal-sec__body { grid-template-columns: 1fr; }
  .metal-sec__head { grid-template-columns: 1fr; gap: 4px; }
  .metal-sec__num { font-size: 32px; }
}

/* ============================================================
   METAL DETAIL TEMPLATE — sub-page sections
   ============================================================ */

/* Sorten grid */
.sorten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(10,22,38,.15);
}
.sorte-card {
  padding: 24px 28px 24px 0;
  border-right: 1px solid rgba(10,22,38,.12);
  border-bottom: 1px solid rgba(10,22,38,.12);
  position: relative;
  background: transparent;
}
.sorte-card:nth-child(3n) { border-right: 0; padding-right: 0; }
.sorte-card__bullet {
  position: absolute;
  top: 28px; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.sorte-card__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "wdth" 95;
  font-size: 19px;
  letter-spacing: -0.015em;
  margin: 0 0 8px 22px;
  line-height: 1.1;
}
.sorte-card__desc {
  margin: 0 0 0 22px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 880px) {
  .sorten-grid { grid-template-columns: repeat(2, 1fr); }
  .sorte-card { padding: 20px 16px 20px 0; }
  .sorte-card:nth-child(3n) { border-right: 1px solid rgba(10,22,38,.12); padding-right: 16px; }
  .sorte-card:nth-child(2n) { border-right: 0; padding-right: 0; }
}
@media (max-width: 560px) {
  .sorten-grid { grid-template-columns: 1fr; }
  .sorte-card,
  .sorte-card:nth-child(3n),
  .sorte-card:nth-child(2n) { border-right: 0; padding-right: 0; }
}

/* Erkennung grid */
.erkennung-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(10,22,38,.15);
}
.erkennung-cell {
  padding: 32px 24px;
  border-right: 1px solid rgba(10,22,38,.12);
}
.erkennung-cell:last-child { border-right: 0; }
.erkennung-cell__num {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: .14em;
  margin-bottom: 16px;
}
.erkennung-cell__t {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "wdth" 90;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1;
}
.erkennung-cell__p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 980px) { .erkennung-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) {
  .erkennung-grid { grid-template-columns: 1fr; }
  .erkennung-cell { border-right: 0; border-bottom: 1px solid rgba(10,22,38,.12); }
  .erkennung-cell:last-child { border-bottom: 0; }
}

/* Vorkommen list */
.vorkommen-list {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 0;
  border-top: 1px solid rgba(10,22,38,.15);
}
.vorkommen-list li {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(10,22,38,.12);
  align-items: baseline;
}
.vorkommen-list strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "wdth" 95;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.vorkommen-list span { color: var(--muted); font-size: 15px; }
@media (max-width: 880px) {
  .vorkommen-grid { grid-template-columns: 1fr !important; }
}

/* Preis-Faktoren list — dark */
.faktor-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
  counter-reset: faktor;
}
.faktor-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "wdth" 95;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #fff;
}
.faktor-list li:last-child { border-bottom: 0; }
.faktor-list__num {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .1em;
}
@media (max-width: 640px) {
  .faktor-list li { grid-template-columns: 50px 1fr; gap: 16px; font-size: 18px; }
}

/* Prozess grid */
.prozess-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(10,22,38,.15);
}
.prozess-grid li {
  padding: 32px 24px 32px 0;
  border-right: 1px solid rgba(10,22,38,.12);
}
.prozess-grid li:last-child { border-right: 0; }
.prozess-grid__num {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: .1em;
  font-weight: 700;
  margin-bottom: 20px;
  display: block;
}
.prozess-grid__t {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "wdth" 90;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  line-height: 1.05;
}
.prozess-grid__p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 880px) { .prozess-grid { grid-template-columns: repeat(2, 1fr); }
  .prozess-grid li { padding-right: 16px; }
  .prozess-grid li:nth-child(2n) { border-right: 0; padding-right: 0; }
}
@media (max-width: 480px) {
  .prozess-grid { grid-template-columns: 1fr; }
  .prozess-grid li { border-right: 0; border-bottom: 1px solid rgba(10,22,38,.12); padding-right: 0; }
  .prozess-grid li:last-child { border-bottom: 0; }
}

/* Cross-links grid */
.cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cross-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(10,22,38,.12);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cross-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.cross-card__photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.cross-card__photo .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.cross-card__body { padding: 20px 22px 22px; display: grid; gap: 4px; }
.cross-card__cta {
  margin-top: 12px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  width: max-content;
}
@media (max-width: 880px) { .cross-grid { grid-template-columns: 1fr; } }

/* Metal-lead-grid */
.metal-lead-grid__aside { position: sticky; top: 32px; }
@media (max-width: 880px) {
  .metal-lead-grid { grid-template-columns: 1fr !important; }
  /* Sticky-Sidebar wuerde sonst beim Scrollen ueber dem Fliesstext
     stehen bleiben und ihn verdecken (nur 1 Spalte auf Mobile). */
  .metal-lead-grid__aside { position: static; top: auto; }
}

/* Foto+Text-Split-Sections: auf Mobile Bild ueber statt neben dem Text,
   unabhaengig von Spaltenreihenfolge/flip (Nutzer-Feedback: Bild wird auf
   schmalen Bildschirmen sonst auf einen schmalen Streifen zusammengequetscht). */
@media (max-width: 880px) {
  .split-media-grid { grid-template-columns: 1fr !important; }
  .split-media-grid > .photo { order: -1; }
}
@media (max-width: 880px) {
  /* Hub-Hero (metallankauf_hero): Foto auf Mobile ausblenden, Abholhinweis-Box bleibt sichtbar. */
  .mah-hero-photo { display: none; }
}
.hof-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.hof-steps li {
  padding: 20px;
  background: var(--paper-2);
  border-top: 3px solid var(--accent);
}
.hof-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}
.hof-steps strong { font-size: 16px; }
@media (max-width: 880px) { .hof-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .hof-steps { grid-template-columns: 1fr; } }

/* ============================================================
   METAL DETAIL V2 — persona-first layout (test page only)
   ============================================================ */
.mdv2-dark .sec-head__lead { color: rgba(255,255,255,.7); }
.mdv2-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.mdv2-cta-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
}
.mdv2-cta-card > svg {
  color: var(--accent);
  width: 28px; height: 28px;
  margin-bottom: 4px;
}
.mdv2-cta-card strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.mdv2-cta-card p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  line-height: 1.55;
  flex: 1;
}
.mdv2-cta-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.mdv2-cta-card__meta {
  color: rgba(255,255,255,.5);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
@media (max-width: 880px) {
  .mdv2-cta-grid { grid-template-columns: 1fr; }
}

.mdv2-pay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  margin-top: 8px;
}
.mdv2-pay__col h3 { font-weight: 700; }
.mdv2-sorten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.mdv2-sorte {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(10,22,38,.08);
}
.mdv2-sorte:last-child { border-bottom: 0; }
.mdv2-sorte__bullet {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 8px;
}
.mdv2-sorte strong { font-size: 16px; display: block; margin-bottom: 4px; }
.mdv2-sorte p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.mdv2-faktoren {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.mdv2-faktoren li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(10,22,38,.08);
  font-size: 15px;
  line-height: 1.5;
}
.mdv2-faktoren li:last-child { border-bottom: 0; }
.mdv2-faktoren__num {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .14em;
  padding-top: 2px;
}
.mdv2-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
.mdv2-steps li {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 12px;
  padding: 24px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}
.mdv2-steps__num {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .14em;
}
.mdv2-steps strong { font-size: 17px; display: block; margin-bottom: 6px; }
.mdv2-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.mdv2-faq {
  display: grid; gap: 0;
  border-top: 1px solid rgba(10,22,38,.12);
}
.mdv2-faq__item {
  border-bottom: 1px solid rgba(10,22,38,.12);
}
.mdv2-faq__item summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
}
.mdv2-faq__item summary::-webkit-details-marker { display: none; }
.mdv2-faq__plus {
  font-family: var(--f-mono);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent);
  transition: transform .2s;
}
.mdv2-faq__item[open] .mdv2-faq__plus { transform: rotate(45deg); }
.mdv2-faq__item p {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 720px;
}
@media (max-width: 880px) {
  .mdv2-pay { grid-template-columns: 1fr; }
  .mdv2-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mdv2-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   SUBPAGE HERO — unified, calmer hero for all subpages.
   Max ~60vh, tamed typography, photo fills its column properly.
   ============================================================ */
.subpage-hero { display: flex; align-items: center;
  min-height: clamp(440px, 60vh, 640px); }
.subpage-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
  width: 100%;
}
.subpage-hero__body { min-width: 0; }
.subpage-hero__kicker { display: block; margin-bottom: 12px; }
.subpage-hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: "wdth" 85;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  max-width: 18ch;
}
body[data-typo="sachlich"] .subpage-hero__title { font-variation-settings: normal; }
body[data-typo="modern"]   .subpage-hero__title { font-variation-settings: "wdth" 100; font-weight: 500; }
.subpage-hero__lead {
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 56ch;
}
.subpage-hero__cta { margin-top: 4px; gap: 12px; flex-wrap: wrap; }
.subpage-hero__facts {
  display: flex; gap: clamp(20px, 2vw, 36px); flex-wrap: wrap;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.subpage-hero__photo {
  position: relative;
  height: 100%;
  min-height: clamp(320px, 44vh, 480px);
  display: flex;
}
.subpage-hero__photo > * { width: 100%; height: 100%; }
.subpage-hero__badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: var(--f-mono); font-size: 10px;
  padding: 4px 10px; color: #fff;
  letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 880px) {
  .subpage-hero { min-height: 0; }
  .subpage-hero__grid {
    grid-template-columns: 1fr;
    padding-block: 40px;
  }
  .subpage-hero__title { font-size: clamp(32px, 9vw, 48px); }
  .subpage-hero__photo { min-height: 280px; }
}