/* =====================================================================
   terrathech Magazin: Editorial-Variante (Stil B) der Artikelseiten
   Zweispaltiger Zeitschriften-Satz, Zitat über beide Spalten.
   Lädt NACH magazin.css, nur auf den *-editorial.html Seiten.
   Vanilla CSS, keine Frameworks. DO BETTER THINGS UG, 24.08.2026
   ===================================================================== */

/* ------------------------------------------------- Artikelkopf (hell) */
.tt-ed-kopf { padding-top: 4.2rem; padding-bottom: 1.4rem; background: #fff; }
.tt-ed-kopf .tt-kicker { margin-bottom: 1.1rem; }
.tt-ed-kopf h1 { margin: .45em 0 .4em; font-size: clamp(2.3rem, 4.8vw, 4.2rem); line-height: 1.05; font-weight: 700; color: var(--tt-petrol); max-width: none; text-wrap: balance; overflow-wrap: break-word; }
.tt-ed-dateline { margin: 0 0 1.6rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tt-grau); }
.tt-ed-dateline time { color: var(--tt-gruen); }
.tt-ed-standfirst { max-width: none; font-size: clamp(1.2rem, 2.1vw, 1.5rem); font-weight: 300; line-height: 1.55; color: var(--tt-petrol); margin: 0; }

/* Aufmacherbild: volle Breite (normaler Fluss, kein 100vw wegen Scrollbalken),
   Bildzeile auf der Satzspiegel-Kante */
#main.tt-magazin > .tt-ed-hero { margin: 2.2rem 0 0; }
.tt-ed-hero img { display: block; width: 100%; height: clamp(440px, 78vh, 860px); object-fit: cover; }
.tt-ed-hero figcaption { max-width: var(--tt-breite); margin: 0 auto; padding: .55rem var(--tt-rand) 0; font-size: .88rem; color: var(--tt-grau); }

/* ------------------------------------------------- Zweispaltiger Satz
   Textspalten laufen im selben Raster wie die Bildstrecke:
   volle Satzspiegel-Breite, gleicher Spaltenabstand (1.6rem). */
.tt-mag-inhalt.tt-ed { padding-top: 2.6rem; }
.tt-mag-inhalt.tt-ed > * { max-width: none; }

.tt-ed-flow { max-width: none; }
.tt-ed-flow p { font-size: 1.05rem; line-height: 1.72; margin: 0 0 1.3em; hyphens: auto; -webkit-hyphens: auto; orphans: 2; widows: 2; }
.tt-ed-flow > :last-child { margin-bottom: 0; }
.tt-mag-inhalt.tt-ed > .tt-ed-flow { margin-bottom: 2.4rem; }
.tt-mag-inhalt.tt-ed h2 { max-width: none; margin: 2em 0 .9em; }
.tt-mag-inhalt.tt-ed > h2 + .tt-ed-flow { margin-top: 0; }

@media (min-width: 1024px) {
	.tt-ed-flow { column-count: 2; column-gap: 1.6rem; column-fill: balance; }
	.tt-ed-flow .tt-zitat { column-span: all; }
}

/* Zitat über beide Spalten (Balken = Zitatmarker wie Stil A) */
.tt-ed .tt-zitat { margin: 1.6rem 0 2rem; }
.tt-ed .tt-zitat p { font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important; }

/* ------------------------------------------------- Steckbrief als Band */
.tt-ed-steckbrief { background: var(--tt-tint); border-radius: 2px; padding: 2rem 2.2rem 1.6rem; margin: 2.6rem 0; }
.tt-ed-steckbrief h3 { margin: 0 0 1.2rem; font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-petrol); }
.tt-ed-steckbrief .tt-steckbrief-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.6rem; }
.tt-ed-steckbrief .tt-steckbrief-liste li { border-bottom: 1px solid rgba(92,151,49,.18); }

@media (max-width: 1023px) {
	.tt-ed-steckbrief .tt-steckbrief-liste { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 719px) {
	.tt-ed-steckbrief { padding: 1.5rem 1.3rem 1.1rem; }
	.tt-ed-steckbrief .tt-steckbrief-liste { grid-template-columns: 1fr; }
	.tt-ed-kopf { padding-top: 3rem; }
	.tt-ed-hero img { height: clamp(300px, 52vh, 460px); }
}

@media (prefers-reduced-motion: reduce) {
	.tt-ed-hero img { animation: none; }
}