/* EnSpectorER-Unterseiten (Entwurf 2026-10): wenige Ergänzungen zu stil.css.
   Nur Anordnung, keine neuen Farben oder Schriften. Wird nach stil.css eingebunden. */

/* Zwei Spalten: Kopf links, Inhalt rechts */
.zer-zwei{align-items:start}
.zer-zwei>.links{grid-column:1/span 5}
.zer-zwei>.rechts{grid-column:7/span 6}
.zer-zwei .d2{margin-bottom:24px}
.zer-zwei .links>.lead+*{margin-top:32px}
.zer-zwei .d3{margin-bottom:16px}
.zer-zwei .links>p:not(.lead){color:var(--fg-2);max-width:30em}
.zer-zwei .blatt-einzeln{max-width:320px}
@media (min-width:981px){.zer-zwei>.links.haftet{position:sticky;top:calc(var(--kopf-h) + 40px)}}
@media (max-width:980px){.zer-zwei>.links,.zer-zwei>.rechts{grid-column:1/-1}.zer-zwei>.rechts{margin-top:44px}}

/* Galerie nach Arbeitsschritten: Text schmal links, Ansichten rechts */
.zer-galerie{display:grid;gap:clamp(56px,7vw,104px)}
.zer-schritt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);border-top:1px solid var(--linie);padding-top:clamp(24px,3vw,36px)}
.zer-schritt-text{grid-column:1/span 3}
.zer-schritt-text .nr{display:block;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.06em;color:var(--mark);margin-bottom:14px}
.zer-schritt-text h3{font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem);line-height:1.1;margin-bottom:12px}
.zer-schritt-text p{color:var(--fg-2)}
.zer-schritt-bilder{grid-column:4/span 9;display:grid;gap:clamp(28px,3vw,40px) var(--spalt)}
.zer-schritt-bilder.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.zer-schritt-text,.zer-schritt-bilder{grid-column:1/-1}.zer-schritt-bilder{margin-top:24px}}
@media (max-width:640px){.zer-schritt-bilder.zwei{grid-template-columns:1fr}}

/* Zwei Ansichten gleich breit nebeneinander */
.zer-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,56px) var(--spalt)}
@media (max-width:760px){.zer-paar{grid-template-columns:1fr}}

/* Berichtsseiten nebeneinander */
.zer-blaetter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,40px) var(--spalt)}
.zer-blaetter figure{margin:0}
.zer-blaetter img{width:100%;background:#fff;border:1px solid var(--linie);box-shadow:0 24px 48px -30px rgba(11,29,44,.45)}
.zer-blaetter figcaption{margin-top:14px;font-size:.92rem;color:var(--fg-2)}
.zer-blaetter figcaption b{display:block;color:var(--fg);font-weight:500;margin-bottom:2px}
@media (max-width:860px){.zer-blaetter{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Weiterführende Seiten im Abschluss */
.zer-weiter{border-top:1px solid var(--linie)}
.zer-weiter a{display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:4px 16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--linie);color:var(--fg);text-decoration:none}
.zer-weiter b{font-weight:500;font-size:1.05rem}
.zer-weiter span{grid-column:1;color:var(--fg-2);font-size:.95rem}
.zer-weiter .pfeil{grid-column:2;grid-row:1/span 2;width:16px;height:16px;color:var(--mark);transition:transform .25s var(--ease)}
.zer-weiter a:hover .pfeil{transform:translateX(3px)}
.zer-weiter-titel{margin-bottom:14px}

/* Abstand zwischen Abschnittskopf und folgendem Baustein */
.zer-abstand{margin-top:clamp(48px,6vw,88px)}
/* Einzelne breite Ansicht, mittig und nicht ganz so breit wie die Seite */
.zer-mittig{max-width:1000px;margin:clamp(48px,6vw,88px) auto 0}
/* Kurzer Hinweis unter einer Tabelle */
.zer-hinweis{margin-top:20px;color:var(--fg-2);font-size:.98rem;max-width:40em}