/* ============================================================================
   U³ — Zusammenarbeit: neue Komponenten (Prefix za-)
   Ergänzt styles.css. Reuse wo möglich (e2-pro-dark, e2-pro-grid, e2-abl-tl2,
   cta-left, vwer-classic). Hier nur Sektionen ohne bestehende Komponente.
   ========================================================================== */

/* ===========================================================================
   2.1 HERO — kompakt (geringere Höhe als Startseite). Zwei Richtungen.
   =========================================================================== */
.za-hero { position: relative; overflow: hidden; padding-top: 84px; }
.za-hero__inner { position: relative; z-index: 1; padding-block: clamp(40px, 5.5vw, 72px); }
.za-hero__headline { font-size: clamp(30px, 3.6vw, 46px); margin-top: 18px; max-width: 28ch; line-height: 1.1; text-wrap: balance; }
.za-hero__actions { margin-top: 28px; }

/* A · Petrol-kompakt mit vertikaler Taktung + Licht (Marken-Motiv) */
.za-hero--petrol { background: radial-gradient(120% 130% at 85% -30%, rgba(74,142,155,.5) 0%, rgba(74,142,155,0) 55%), var(--u3-petrol); }
.za-hero--petrol::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(90deg, rgba(201,222,225,.08) 0 1px, transparent 1px 120px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.3) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.3) 100%); }
.za-hero--petrol .u3-eyebrow::after { display: none; }
.za-hero--petrol .za-hero__headline { color: var(--u3-on-petrol-head); }

/* B · Hell/Kalk-kompakt mit feiner vertikaler Taktung */
.za-hero--light { background: var(--u3-kalk); }
.za-hero--light::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(90deg, rgba(28,83,95,.06) 0 1px, transparent 1px 120px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 100%); }
.za-hero--light .u3-eyebrow::after { display: none; }
.za-hero--light .za-hero__headline { color: var(--u3-petrol-ink); }

/* ===========================================================================
   2.3 / 2.4 WEG-DETAIL — Titel + Text + drei Punkte
   =========================================================================== */
.za-path { background: var(--u3-kalk); }
/* Sektionstitel = etablierter Standard (wie .u3-title: 40px / 600). KEINE neue Skala. */
.za-path__title { font-family: var(--u3-font-serif); font-weight: var(--u3-weight-title); font-size: clamp(28px, 3.4vw, 40px); line-height: var(--u3-lh-snug); letter-spacing: var(--u3-ls-title); color: var(--u3-petrol-ink); text-wrap: pretty; margin-top: 14px; }
.za-path__text { margin-top: 18px; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.62; color: var(--u3-ink-2); }

/* A · Zwei Spalten: Text links, Punkte als Hairline-Zeilen rechts */
.za-path-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px; align-items: start; }
.za-path-grid .za-path__text { max-width: 460px; }
.za-path-items { display: flex; flex-direction: column; }
.za-item { padding: 20px 0; border-top: 1px solid var(--u3-line); }
.za-item:last-child { border-bottom: 1px solid var(--u3-line); }
.za-item__head { display: flex; align-items: baseline; gap: 14px; }
.za-item__n { font-family: var(--u3-font-mono); font-size: 11px; letter-spacing: 1.4px; color: var(--u3-petrol-ink); min-width: 22px; }
.za-item__h { font-family: var(--u3-font-serif); font-weight: 500; font-size: 20px; color: var(--u3-ink); letter-spacing: -0.2px; }
.za-item__t { margin-top: 8px; padding-left: 36px; font-size: 15.5px; line-height: 1.58; color: var(--u3-ink-3); max-width: 46ch; }

/* B · Text oben, drei Punkte als Spalten mit Petrol-Top-Rule */
.za-path-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.za-col { border-top: 2px solid var(--u3-petrol); padding-top: 18px; }
.za-col__h { font-family: var(--u3-font-serif); font-weight: 500; font-size: 20px; color: var(--u3-ink); letter-spacing: -0.2px; }
.za-col__t { margin-top: 10px; font-size: 15.5px; line-height: 1.58; color: var(--u3-ink-3); }

/* Spiegelung für 2.4 (Bildseite/Akzent wechselt die Seite) */
.za-path--mirror .za-path-grid { grid-template-columns: 0.98fr 1.02fr; }
.za-path--mirror .za-path-grid > .za-path-intro { order: 2; }
.za-path--mirror .za-path-grid > .za-path-items { order: 1; }

/* ===========================================================================
   2.5 WELCHER WEG PASST — Gegenüberstellung
   =========================================================================== */
.za-cmp { background: var(--u3-kalk); }
.za-cmp__title { font-size: clamp(28px, 3.4vw, 40px); margin-top: 14px; }

/* A · Direktvergleich: zwei Spalten, vier kontrastierende Zeilen, Mittellinie */
.za-cmp-table { margin-top: 40px; border-top: 1px solid var(--u3-line); }
.za-cmp-head, .za-cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.za-cmp-head > div { padding: 18px 28px; }
.za-cmp-head > div:first-child { padding-left: 0; }
.za-cmp-row > div { padding: 18px 28px; border-top: 1px solid var(--u3-line); display: flex; align-items: baseline; gap: 12px; }
.za-cmp-row > div:first-child { padding-left: 0; }
.za-cmp-col-r { border-left: 1px solid var(--u3-line); }
.za-cmp-head .za-cmp-col-r { border-left: 1px solid var(--u3-line); }
.za-cmp__label { font-family: var(--u3-font-serif); font-weight: 500; font-size: 22px; color: var(--u3-petrol-ink); }
.za-cmp__sub { display: block; margin-top: 4px; }
.za-cmp__mark { color: var(--u3-petrol); font-family: var(--u3-font-mono); font-size: 13px; line-height: 1.6; flex: none; }
.za-cmp__txt { font-size: 16px; line-height: 1.5; color: var(--u3-ink-2); }

/* B · Zwei Karten auf Papier, je vier Punkte */
.za-cmp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.za-cmp-card { background: var(--u3-papier); padding: 36px 34px; }
.za-cmp-card__h { font-family: var(--u3-font-serif); font-weight: 500; font-size: 24px; color: var(--u3-petrol-ink); letter-spacing: -0.3px; }
.za-cmp-card__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; }
.za-cmp-card__list li { padding: 14px 0; border-top: 1px solid var(--u3-line); display: flex; align-items: baseline; gap: 12px; font-size: 16px; color: var(--u3-ink-2); line-height: 1.5; }
.za-cmp-card__list li::before { content: "—"; color: var(--u3-petrol); flex: none; }

/* A2 · Zwei Spalten-Gruppen auf Kalk: Desktop Mittellinie, Mobil gestapelt (Weg 01 ganz, dann Weg 02) */
.za-cmp2 { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; }
.za-cmp2__col { padding-right: 40px; }
.za-cmp2__col:last-child { padding-right: 0; padding-left: 40px; border-left: 1px solid var(--u3-line); }
.za-cmp2__head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--u3-line); }
.za-cmp2__num { font-family: var(--u3-font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--u3-petrol-ink); }
.za-cmp2__label { font-family: var(--u3-font-serif); font-weight: 500; font-size: clamp(20px, 2.2vw, 24px); color: var(--u3-petrol-ink); letter-spacing: -0.3px; }
.za-cmp2__list { list-style: none; margin: 0; padding: 0; display: grid; }
.za-cmp2__list li { padding: 15px 0; border-bottom: 1px solid var(--u3-line); display: flex; align-items: baseline; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--u3-ink-2); }
.za-cmp2__list li:last-child { border-bottom: none; }
.za-cmp2__mark { color: var(--u3-petrol); font-family: var(--u3-font-mono); font-size: 13px; line-height: 1.6; flex: none; }

/* ===========================================================================
   2.6 (Alternative B) — helles 4er-Raster: nutzt e2-pro-grid/e2-pro-cell aus
   styles.css. Primärversion = e2-pro-dark (identisch zur Startseite).
   2.8 FAQ — Akkordeon (Papier)
   =========================================================================== */
.za-faq { background: var(--u3-kalk); }
.za-faq__list { margin-top: 8px; display: grid; gap: 12px; }
.za-faq__item { background: var(--u3-papier); }
.za-faq__item > summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--u3-font-serif); font-weight: 500; font-size: clamp(18px, 1.9vw, 21px); color: var(--u3-ink); letter-spacing: -0.2px; }
.za-faq__item > summary::-webkit-details-marker { display: none; }
.za-faq__icon { flex: none; width: 22px; height: 22px; position: relative; }
.za-faq__icon::before, .za-faq__icon::after { content: ""; position: absolute; background: var(--u3-petrol-ink); transition: transform .25s ease, opacity .25s ease; }
.za-faq__icon::before { left: 0; right: 0; top: 10px; height: 1.5px; }
.za-faq__icon::after { top: 0; bottom: 0; left: 10px; width: 1.5px; }
.za-faq__item[open] .za-faq__icon::after { transform: scaleY(0); opacity: 0; }
.za-faq__a { padding: 0 26px 24px; font-size: 16px; line-height: 1.62; color: var(--u3-ink-2); max-width: 70ch; }
.za-faq__foot { margin-top: 28px; }
.za-faq__foot .u3-textlink { white-space: nowrap; }

/* ===========================================================================
   2.3 + 2.4 ALS PAAR — „Zwei Wege" sichtbar zusammengehörig, zwei Optionen
   =========================================================================== */
.za-tw { background: var(--u3-kalk); }
.za-tw__head { margin-bottom: 34px; }
/* Sektionstitel ausgewogen auf zwei Zeilen; Fließtext auf lesbare Breite (wie Startseite) */
.za-tw__head .uu-title { max-width: 26ch; text-wrap: balance; }
.za-tw__head .uu-text { max-width: 760px; }
.za-tw__title { font-size: clamp(28px, 3.4vw, 40px); margin-top: 14px; }
.za-tw-col__eyebrow { display: flex; align-items: center; gap: 12px; }
.za-tw-col__eyebrow .u3-mono { white-space: nowrap; }
.za-tw-col__title { font-family: var(--u3-font-serif); font-weight: 500; font-size: clamp(23px, 2.5vw, 28px); color: var(--u3-petrol-ink); margin-top: 14px; letter-spacing: -0.3px; }
.za-tw-col__text { margin-top: 14px; font-size: 16px; line-height: 1.62; color: var(--u3-ink-2); }
.za-tw-list { list-style: none; margin: 22px 0 0; padding: 0; }
.za-tw-list li { padding: 16px 0; border-top: 1px solid var(--u3-line); }
.za-tw-list__h { font-family: var(--u3-font-serif); font-weight: 500; font-size: 17px; color: var(--u3-ink); letter-spacing: -0.2px; }
.za-tw-list__t { margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: var(--u3-ink-3); }

/* A · Nebeneinander, gemeinsamer Rahmen, Mittellinie */
.za-tw-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--u3-line); }
.za-tw-grid .za-tw-col { padding: 38px 40px 42px; }
.za-tw-grid .za-tw-col + .za-tw-col { border-left: 1px solid var(--u3-line); }

/* B · Zwei kontrastierende Flächen (Kalk vs. Papier) */
.za-tw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.za-tw-split .za-tw-col { padding: 38px 38px 42px; }
.za-tw-split .za-tw-col:first-child { background: var(--u3-kalk); border: 1px solid var(--u3-line); }
.za-tw-split .za-tw-col:last-child { background: var(--u3-papier); }
/* Punkt-Trennlinien laufen voll bis zum Panel-Rand (keine kurzen, schwebenden Linien) */
.za-tw-split .za-tw-list { margin-inline: -38px; }
.za-tw-split .za-tw-list li { padding-left: 38px; padding-right: 38px; }
.za-tw-grid .za-tw-list { margin-inline: -40px; }
.za-tw-grid .za-tw-list li { padding-left: 40px; padding-right: 40px; }

/* C · Gestapelt mit großer Nummer + „oder"-Trenner */
.za-tw-stack { display: grid; }
.za-tw-way { display: grid; grid-template-columns: 92px 1fr; gap: 30px; align-items: start; }
.za-tw-way__n { font-family: var(--u3-font-serif); font-weight: 600; font-size: clamp(40px, 5vw, 60px); line-height: .85; color: var(--u3-petrol-ink); letter-spacing: -1px; }
.za-tw-way .za-tw-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.za-tw-way .za-tw-list li { border-top: 2px solid var(--u3-petrol); }
.za-tw-or { display: flex; align-items: center; gap: 18px; margin: 30px 0; }
.za-tw-or::before, .za-tw-or::after { content: ""; height: 1px; background: var(--u3-line); flex: 1; }
.za-tw-or span { font-family: var(--u3-font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--u3-ink-3); }

@media (max-width: 820px) {
  .za-tw-grid, .za-tw-split { grid-template-columns: 1fr; }
  .za-tw-grid .za-tw-col + .za-tw-col { border-left: none; border-top: 1px solid var(--u3-line); }
  .za-tw-way { grid-template-columns: 56px 1fr; gap: 18px; }
  .za-tw-way .za-tw-list { grid-template-columns: 1fr; }
}

/* B · zweispaltige statische Q&A */
.za-faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; margin-top: 8px; }
.za-faq-qa__q { font-family: var(--u3-font-serif); font-weight: 500; font-size: 20px; color: var(--u3-petrol-ink); letter-spacing: -0.2px; }
.za-faq-qa__a { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--u3-ink-2); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 860px) {
  .za-path-grid, .za-cmp-cards, .za-faq-cols { grid-template-columns: 1fr; gap: 28px; }
  .za-path--mirror .za-path-grid { grid-template-columns: 1fr; }
  .za-path--mirror .za-path-grid > .za-path-intro { order: 0; }
  .za-path--mirror .za-path-grid > .za-path-items { order: 0; }
  .za-path-cols { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  /* Welcher Weg passt: gestapelt — erst Weg 01 ganz, dann Weg 02 */
  .za-cmp2 { grid-template-columns: 1fr; margin-top: 30px; }
  .za-cmp2__col { padding-right: 0; }
  .za-cmp2__col:last-child { padding-left: 0; border-left: none; border-top: 1px solid var(--u3-line); padding-top: 36px; margin-top: 36px; }
}
@media (max-width: 620px) {
  /* Vergleich bleibt zweispaltig (Zuordnung erhalten), nur enger + kleiner */
  .za-cmp-table { margin-top: 28px; }
  .za-cmp-head > div, .za-cmp-row > div { padding: 13px 10px; }
  .za-cmp-head > div:first-child, .za-cmp-row > div:first-child { padding-left: 0; }
  .za-cmp-col-r { padding-right: 0; }
  .za-cmp-head .u3-mono { font-size: 9px; letter-spacing: .5px; }
  .za-cmp-row > div span { font-size: 13.5px !important; line-height: 1.4; }
  .za-cmp__label { font-size: 13.5px !important; }
}