/* =====================================================================
   terrathech Magazin: News-Bereich "Aktuelles"
   Blog-Übersicht, Artikel-Seiten (Magazin-Stil), Startseiten-Teaser
   Vanilla CSS, keine Frameworks. DO BETTER THINGS UG, 16.08.2026
   ===================================================================== */

:root {
	--tt-gruen:   #5c9731;
	--tt-petrol:  #004448;
	--tt-limette: #ced729;
	--tt-blau:    #009fe3;
	--tt-tint:    #f4fae9;
	--tt-tint2:   #f0f6ec;
	--tt-text:    #2b2b2b;
	--tt-grau:    #595959;
	--tt-verlauf: linear-gradient(90deg,#95C11F 0%,#68AB27 20%,#3B952F 40%,#1B8534 60%,#077B38 80%,#007839 100%);
	--tt-breite:  80rem;      /* = .max-width des Theme-Headers */
	--tt-rand:    0.93333rem; /* = Logo-Rand im Theme-Header */
	--tt-lese:    44rem;
}

.tt-magazin { color: var(--tt-text); font-family: "Roboto", -apple-system, sans-serif; }
.tt-magazin *, .tt-magazin *:before, .tt-magazin *:after { box-sizing: border-box; }

/* Ein Satzspiegel für alles */
.tt-inner { max-width: var(--tt-breite); margin-left: auto; margin-right: auto; padding-left: var(--tt-rand); padding-right: var(--tt-rand); }

/* Witwen vermeiden: keine alleinstehenden Woerter in der letzten Zeile
   (CSS fuer moderne Browser; magazin.js ergaenzt ein geschuetztes
   Leerzeichen zwischen den letzten beiden Woertern als Fallback) */
.tt-magazin h1, .tt-magazin h2, .tt-magazin h3 { text-wrap: balance; }
.tt-magazin h1, .tt-magazin h2, .tt-magazin h3, .tt-magazin h4 { padding-left: 0; padding-right: 0; }
.tt-magazin p, .tt-magazin figcaption, .tt-magazin li { text-wrap: pretty; }

/* Fokus sichtbar */
.tt-magazin a:focus-visible, .tt-magazin button:focus-visible { outline: 3px solid var(--tt-blau); outline-offset: 2px; }

/* ------------------------------------------------- Leseleiste (Signatur 1) */
.tt-leseleiste { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 100002; background: rgba(0,68,72,.08); pointer-events: none; }
.tt-leseleiste span { display: block; height: 100%; width: 0; background: var(--tt-verlauf); transition: width .1s linear; }

/* ------------------------------------------------- Artikel-Hero */
.tt-artikel-hero { position: relative; min-height: clamp(420px, 62vh, 640px); display: flex; align-items: flex-end; overflow: hidden; background: var(--tt-petrol); }
.tt-hero-bild { position: absolute; inset: 0; }
.tt-hero-bild img { width: 100%; height: 100%; object-fit: cover; animation: tt-kenburns 18s ease-out forwards; }
@keyframes tt-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.tt-artikel-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,68,72,0) 30%, rgba(0,68,72,.82) 88%); }
.tt-hero-inhalt { position: relative; z-index: 2; width: 100%; padding-top: 7rem; padding-bottom: 2.6rem; color: #fff; }
.tt-hero-inhalt h1 { margin: .4em 0 .35em; font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.08; font-weight: 700; color: #fff; max-width: 21ch; text-wrap: balance; overflow-wrap: break-word; }
.tt-hero-ohne-bild { min-height: 340px; }

.tt-kicker { display: inline-block; margin: 0; padding: .34em .9em; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-petrol); background: var(--tt-limette); border-radius: 2px; }
.tt-meta { margin: 0; font-size: .95rem; font-weight: 300; opacity: .92; }

/* ------------------------------------------------- Vorspann */
.tt-mag-vorspann { padding-top: 2.6rem; padding-bottom: .5rem; }
.tt-vorspann { max-width: var(--tt-lese); font-size: clamp(1.18rem, 2vw, 1.45rem); font-weight: 300; line-height: 1.55; color: var(--tt-petrol); margin: 0 0 1rem; }

/* ------------------------------------------------- Artikel-Inhalt
   Eine Kante fuer alles: Inhalt steht linksbuendig im Satzspiegel
   (gleiche Kante wie Logo/Header), Fliesstext mit Lesebreite. */
.tt-mag-inhalt { display: block; max-width: var(--tt-breite); margin: 0 auto; padding: 0 var(--tt-rand) 4rem; }
.tt-mag-inhalt > * { max-width: var(--tt-lese); margin-left: 0; margin-right: 0; }
.tt-mag-inhalt > .tt-mag-einstieg,
.tt-mag-inhalt > .wp-block-gallery,
.tt-mag-inhalt > .tt-bildstrecke,
.tt-mag-inhalt > .tt-cta-box,
.tt-mag-inhalt > .tt-zahlenband { max-width: none; }

.tt-mag-inhalt p { font-size: 1.06rem; line-height: 1.75; margin: 0 0 1.35em; }
.tt-mag-inhalt h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; color: var(--tt-petrol); margin: 2.2em 0 .8em; }
.tt-mag-inhalt h3 { color: var(--tt-petrol); margin: 1.6em 0 .6em; }
.tt-mag-inhalt a { color: var(--tt-gruen); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tt-mag-inhalt a:hover { color: var(--tt-petrol); }

.tt-grosstext { font-size: 1.22rem !important; font-weight: 300; line-height: 1.65 !important; }

/* Einstieg: Text + Steckbrief */
.tt-mag-einstieg { margin-top: .5rem; }
.tt-einstieg-spalten { display: flex; gap: 3rem; align-items: flex-start; }
.tt-einstieg-spalten .wp-block-column { min-width: 0; }
.tt-mag-einstieg h2:first-child { margin-top: 0; }
.tt-steckbrief-spalte { position: relative; }
.tt-steckbrief { position: sticky; top: 8rem; background: var(--tt-tint); border-radius: 2px; padding: 1.8rem 1.8rem 1.4rem; }
.tt-steckbrief h3 { margin: 0 0 1rem; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.tt-steckbrief-liste { list-style: none; margin: 0; padding: 0; }
.tt-steckbrief-liste li { position: relative; padding: .45rem 0 .45rem 2rem; font-size: .98rem; line-height: 1.5; border-bottom: 1px solid rgba(92,151,49,.18); overflow-wrap: break-word; }
.tt-steckbrief-liste li:last-child { border-bottom: 0; }
.tt-steckbrief-liste li:before { content: ""; position: absolute; left: 0; top: .72rem; width: 1.1em; height: 1.1em; background: url(../img/terrathech-check-icon.svg) no-repeat; background-size: contain; }
.tt-steckbrief-liste strong { color: var(--tt-petrol); }

/* Zahlenband */
/* Optik wie terrathech.de/erdwaermeabsorber-heizungsbauer/: Petrol-Band,
   keine Ueberschrift, vier zentrierte Spalten, Limette-Zahl, Label fett weiss */
.tt-zahlenband { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 3.4rem; margin-bottom: 3.4rem; background: var(--tt-petrol); color: #fff; padding: 4.5rem max(var(--tt-rand), calc(50vw - var(--tt-breite)/2 + var(--tt-rand))); }
.tt-zahlenband .wp-block-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.tt-magazin p.tt-zahl { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 700; color: var(--tt-limette); margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tt-magazin p.tt-zahl-label { margin: .5em 0 0; font-weight: 700; font-size: 1rem; color: #fff; }

/* Zitat */
.tt-zitat { margin: 2.6rem 0; padding: 0; border: 0; }
.tt-zitat blockquote { margin: 0; padding: .4rem 0 .4rem 1.6rem; border-left: 6px solid transparent; border-image: linear-gradient(180deg,#95C11F,#007839) 1; }
.tt-zitat p { font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important; font-weight: 300; line-height: 1.4 !important; color: var(--tt-petrol); margin: 0 !important; }

/* Bildstrecke */
.tt-bildstrecke { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 2.6rem auto; }
.tt-bildstrecke figure.wp-block-image, .tt-bildstrecke > figure { margin: 0; }
.tt-bildstrecke img { display: block; width: 100%; height: 320px; object-fit: cover; border-radius: 2px; transition: transform .5s ease; }
.tt-bildstrecke figure { overflow: hidden; border-radius: 2px; }
.tt-bildstrecke figure:hover img { transform: scale(1.04); }
.tt-bildstrecke figcaption { font-size: .88rem; color: var(--tt-grau); padding: .5rem .2rem 0; }
.tt-foto-credit { display: block; margin-top: .15em; opacity: .8; }

/* CTA-Box */
.tt-cta-box { background: var(--tt-petrol); color: #fff; border-radius: 2px; padding: 2.6rem 2.4rem; margin-top: 3.4rem !important; text-align: center; }
.tt-cta-box h3 { color: #fff; margin: 0 0 .6rem; font-size: 1.6rem; }
.tt-cta-box p { color: #fff; font-weight: 300; max-width: 34rem; margin-left: auto; margin-right: auto; }
.tt-cta-button .wp-block-button__link, .tt-cta-knopf { display: inline-block; background: var(--tt-gruen); color: #fff; font-weight: 700; padding: .95em 2.2em; border: 2px solid var(--tt-gruen); border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease; }
/* Hover auf gruenem/petrolfarbenem Grund: invertieren (weiss, Border + Text in Buttonfarbe) */
.tt-mag-inhalt .tt-cta-knopf:hover, .tt-mag-inhalt .tt-cta-button .wp-block-button__link:hover,
.tt-cta-button .wp-block-button__link:hover, .tt-cta-knopf:hover { background: #fff; color: var(--tt-gruen); border-color: var(--tt-gruen); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.tt-cta-box .wp-block-buttons { display: flex; justify-content: center; margin: 1.2rem 0 0; }
.tt-cta-tel { margin: 1.1rem auto 0 !important; font-size: .98rem !important; }
.tt-cta-box a[href^="tel"] { color: var(--tt-limette); font-weight: 700; text-decoration: none; }
.tt-mag-inhalt .tt-cta-knopf, .tt-mag-inhalt .tt-cta-button .wp-block-button__link { color: #fff; text-decoration: none; }

/* ------------------------------------------------- Übersicht */
.tt-uebersicht-kopf { background: linear-gradient(180deg, var(--tt-tint) 0%, #fff 100%); padding: 7rem 0 3rem; }
.tt-uebersicht-kopf h1 { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--tt-petrol); margin: .35em 0 .2em; }
.tt-uebersicht-vorspann { max-width: 40rem; font-size: 1.15rem; font-weight: 300; line-height: 1.6; color: var(--tt-grau); margin: 0; }

.tt-feature { display: grid; grid-template-columns: 7fr 5fr; gap: 0; margin: 2.4rem 0 3rem; border-radius: 2px; overflow: hidden; background: var(--tt-petrol); color: #fff; text-decoration: none; box-shadow: 0 14px 40px rgba(0,68,72,.18); }
.tt-feature-bild { min-height: 340px; overflow: hidden; }
.tt-feature-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.tt-feature:hover .tt-feature-bild img { transform: scale(1.04); }
.tt-feature-text { padding: 2.6rem 2.4rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .8rem; }
.tt-feature-text h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2; color: #fff; }
.tt-feature-vorspann { margin: 0; font-weight: 300; line-height: 1.6; opacity: .94; }
.tt-feature .tt-meta { opacity: .8; }
.tt-mehr { font-weight: 700; color: var(--tt-limette); }
.tt-mehr:after { content: " →"; transition: transform .3s; display: inline-block; }
.tt-feature:hover .tt-mehr:after { transform: translateX(4px); }
.tt-feature:hover p { color: #fff !important; }


.tt-karten { display: grid; gap: 2rem; margin: 0 0 3rem; }
.tt-karten-2 { grid-template-columns: 1fr 1fr; }
.tt-karten-3 { grid-template-columns: repeat(3, 1fr); }
.tt-karte { display: flex; flex-direction: column; background: #fff; border-radius: 2px; overflow: hidden; text-decoration: none; color: var(--tt-text); border: 1px solid rgba(0,68,72,.1); box-shadow: 0 6px 20px rgba(0,68,72,.07); transition: transform .3s ease, box-shadow .3s ease; }
.tt-karte:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,68,72,.14); }
.tt-karte-bild { height: 210px; overflow: hidden; background: var(--tt-tint2); }
.tt-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tt-karte:hover .tt-karte-bild img { transform: scale(1.05); }
.tt-karte-text { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.tt-karte-text h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--tt-petrol); }
.tt-karte-vorspann { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--tt-grau); }
.tt-karte .tt-meta { color: var(--tt-grau); opacity: 1; font-size: .85rem; }

.tt-pagination { padding: 0 0 4rem; }

/* Weiterlesen */
.tt-weiterlesen { background: var(--tt-tint2); padding: 3.6rem 0 4rem; }
.tt-weiterlesen h2 { color: var(--tt-petrol); margin: 0 0 1.6rem; }

/* ------------------------------------------------- Startseiten-Teaser */
.tt-teaser-sektion { padding: 5rem 0; background: #fff; }
.tt-teaser-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.tt-teaser-kopf h2 { margin: 0; color: var(--tt-petrol); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tt-teaser-alle { font-weight: 700; color: var(--tt-gruen); text-decoration: none; }
.tt-teaser-alle:hover { color: var(--tt-petrol); }
.tt-teaser-alle:after { content: " →"; }

/* ------------------------------------------------- Integration Theme terrathech22
   Das Theme fixiert den Header (#nav_header) und beschraenkt #main auf 78rem
   bzw. dessen Kinder auf 50rem. Fuer Magazin-Seiten heben wir das auf und
   stellen unsere Container wieder her. */
#main.tt-magazin { max-width: none; padding-top: 4.3711rem; }
#main.tt-magazin > * { max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
#main.tt-magazin > .tt-inner { max-width: var(--tt-breite); margin-left: auto; margin-right: auto; padding-left: var(--tt-rand); padding-right: var(--tt-rand); }
#main.tt-magazin > .tt-mag-inhalt { max-width: var(--tt-breite); margin-left: auto; margin-right: auto; padding: 0 var(--tt-rand) 4rem; }
.tt-bildstrecke > figure, .tt-bildstrecke figure.wp-block-image { border: 0; border-radius: 2px; }

/* ------------------------------------------------- Scroll-Reveal */
.tt-js .tt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.tt-js .tt-reveal.tt-sichtbar { opacity: 1; transform: none; }

/* ------------------------------------------------- Responsive (am Ende!) */
@media (max-width: 1023px) {
	.tt-einstieg-spalten { flex-direction: column; gap: 1.5rem; }
	.tt-steckbrief { position: static; }
	.tt-zahlenband .wp-block-columns { grid-template-columns: repeat(2, 1fr); }
	.tt-feature { grid-template-columns: 1fr; }
	.tt-feature-bild { min-height: 240px; max-height: 320px; }
	.tt-karten-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 719px) {
	.tt-karten-2, .tt-karten-3 { grid-template-columns: 1fr; }
	.tt-bildstrecke { grid-template-columns: 1fr; }
	.tt-bildstrecke img { height: 240px; }
	.tt-hero-inhalt { padding-top: 5.5rem; }
	.tt-uebersicht-kopf { padding: 5.5rem 0 2.4rem; }
	.tt-steckbrief { padding: 1.4rem 1.3rem 1rem; }
	.tt-cta-box { padding: 2rem 1.4rem; }
}

@media (min-width: 81.75rem) {
	#main.tt-magazin { padding-top: 6.4rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tt-hero-bild img { animation: none; }
	.tt-js .tt-reveal { opacity: 1; transform: none; transition: none; }
	.tt-karte, .tt-karte img, .tt-bildstrecke img, .tt-feature-bild img, .tt-cta-button .wp-block-button__link { transition: none; }
	.tt-leseleiste span { transition: none; }
}