/* CVET: Ergänzungen, die theme.json nicht abdeckt.
   Farbrollen: Graphit = feste Daten, Petrol = Interaktion, Orange = Überschuss. */

:root{
	--cvet-daten:var(--wp--preset--color--daten);
	--cvet-aktion:var(--wp--preset--color--aktion);
	--cvet-linie:var(--wp--preset--color--linie);
}

/* Grundlagen */
:where(.wp-site-blocks) :focus-visible{outline:2.5px solid var(--wp--preset--color--aktion);outline-offset:3px}
.is-style-dunkel :focus-visible{outline-color:var(--wp--preset--color--aktion-hell)}
h1,h2,h3,h4,.wp-block-post-title{text-wrap:balance}
sub,sup{line-height:0}
.cvet-lead{font-size:clamp(1.03rem,2vw,1.2rem);color:var(--wp--preset--color--gedaempft);max-width:56ch}
.is-style-dunkel .cvet-lead{color:var(--wp--preset--color--daten-hell)}

/* Kopf: bleibt beim Scrollen oben stehen (alle Sprachen), unter der Admin-Leiste, wenn angemeldet */
header.wp-block-template-part{position:sticky;top:0;z-index:100}
.admin-bar header.wp-block-template-part{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar header.wp-block-template-part{top:0}}
html{scroll-padding-top:5rem}
.cvet-kopf{background:var(--wp--preset--color--weiss);border-bottom:1px solid var(--cvet-linie);padding-top:.8rem;padding-bottom:.8rem}
.cvet-marke{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.cvet-logo{display:block;height:32px;width:auto;flex:none}
.cvet-logo .lm{fill:#006274}
.cvet-logo .la{fill:#E94D11}
.cvet-marke-name{font-size:.74rem;line-height:1.25;font-weight:700;max-width:15.5em;color:var(--wp--preset--color--gedaempft)}
@media (max-width:600px){.cvet-marke-name{display:none}}
.cvet-kopf .wp-block-navigation a:hover{text-decoration:underline}

/* Fuß */
.cvet-fuss{border-top:1px solid var(--cvet-linie)}

/* Messwerte: feste Daten in Graphit */
.is-style-messwert{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cvet-kennzahl{display:flex;flex-direction:column;justify-content:space-between;gap:.4rem;
	background:var(--wp--preset--color--hintergrund);border:1px solid var(--cvet-linie);border-radius:3px;padding:.75rem .9rem}
.cvet-kennzahl p{margin:0}

/* Kasten */
.cvet-schmal{max-width:820px}
.cvet-box{background:var(--wp--preset--color--weiss);border:1px solid var(--cvet-linie);border-radius:4px;
	padding:clamp(1rem,3vw,1.6rem)!important}

/* Einträge im Journal */
.cvet-eintrag{border-top:1px solid var(--cvet-linie);padding-top:1.2rem;padding-bottom:.4rem}

/* Prozessbild (statisch; die interaktive Fassung kommt mit cvet-core) */
.cvet-prozessbild{margin:0;background:var(--wp--preset--color--panel);border:1px solid var(--cvet-linie);border-radius:4px;padding:14px;
	font-variant-numeric:tabular-nums}
.cvet-pb-titel{margin:0 0 10px;font-weight:700;font-size:.95rem}
.cvet-pb-svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--cvet-linie);border-radius:2px}
.cvet-pb-svg .fl-need{stroke:var(--wp--preset--color--daten)}
.cvet-pb-svg .fl-sur{stroke:var(--wp--preset--color--ueberschuss)}
.cvet-werte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 0}
.cvet-werte>div{display:flex;flex-direction:column;justify-content:space-between;gap:3px}
.cvet-werte dt{font-size:.78rem;color:var(--wp--preset--color--gedaempft);line-height:1.25}
.cvet-werte dd{margin:0;background:#fff;border:1px solid var(--cvet-linie);border-radius:2px;padding:4px 8px;
	display:flex;justify-content:flex-end;align-items:baseline;gap:6px}
.cvet-werte b{font-family:var(--wp--preset--font-family--big-shoulders);font-size:1.45rem;line-height:1.1}
.cvet-werte span{font-size:.78rem;color:var(--wp--preset--color--gedaempft)}
.cvet-luft{margin-top:12px}
.cvet-luft p{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin:0 0 4px;font-size:.8rem}
.cvet-luft b{color:var(--wp--preset--color--ueberschuss-text)}
.cvet-luft-spur{display:flex;height:16px;background:#fff;border:1px solid var(--cvet-linie)}
.cvet-luft-spur .bedarf{width:60%;background:var(--wp--preset--color--daten)}
.cvet-luft-spur .ueberschuss{width:40%;background:var(--wp--preset--color--ueberschuss)}
.cvet-prozessbild figcaption{margin-top:10px;font-size:.78rem;color:var(--wp--preset--color--gedaempft)}
@media (max-width:520px){.cvet-werte{grid-template-columns:1fr}}

/* Balken vorher / mit LAVA */
.cvet-balken{display:grid;gap:10px;margin:1rem 0}
.cvet-balken .zeile{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.cvet-balken .lab{font-size:.9rem;color:var(--wp--preset--color--gedaempft)}
.cvet-balken .spur{position:relative;height:36px;background:var(--wp--preset--color--panel)}
.cvet-balken .wert{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;padding:0 10px;
	font-weight:700;font-size:.95rem;white-space:nowrap}
.cvet-balken .vorher{background:#B3BCBD;color:var(--wp--preset--color--daten)}
.cvet-balken .nachher{background:var(--wp--preset--color--daten);color:#fff}
@media (max-width:420px){.cvet-balken .zeile{grid-template-columns:1fr;gap:4px}}

/* Dunkle Abschnitte: Rollenfarben in der hellen Fassung */
.is-style-dunkel .wp-block-button.is-style-outline>.wp-block-button__link{
	background:transparent;color:var(--wp--preset--color--aktion-hell);border-color:var(--wp--preset--color--aktion-hell)}
.is-style-dunkel .has-ueberschuss-text-color{color:var(--wp--preset--color--ueberschuss-hell)!important}
.is-style-dunkel .has-gedaempft-color{color:var(--wp--preset--color--daten-hell)!important}
.is-style-dunkel ul.wp-block-list{list-style:none;padding-left:0}
.is-style-dunkel ul.wp-block-list li{padding:.7rem 0;border-top:1px solid rgba(255,255,255,.16)}


/* Journal: Zeitungslayout. Spalten durch dünne Linien getrennt statt Karten mit Rahmen/Schatten. */
.cvet-journal-grid .wp-block-post-template{list-style:none;margin:0;padding:0;
	display:grid!important;grid-template-columns:repeat(3,1fr)!important;flex-wrap:initial!important;
	column-gap:clamp(1.5rem,3vw,2.5rem);row-gap:clamp(1.75rem,3vw,2.5rem)}
.cvet-journal-grid .wp-block-post-template>li{width:auto!important;flex-basis:auto!important;margin:0!important;
	padding-left:clamp(1.5rem,3vw,2.5rem)}
.cvet-journal-grid .wp-block-post-template>li:nth-child(3n+1){padding-left:0;border-left:0}
.cvet-journal-grid .wp-block-post-template>li:not(:nth-child(3n+1)){border-left:1px solid var(--cvet-linie)}
@media (max-width:900px){
	.cvet-journal-grid .wp-block-post-template{grid-template-columns:repeat(2,1fr)!important}
	.cvet-journal-grid .wp-block-post-template>li:nth-child(3n+1){padding-left:clamp(1.5rem,3vw,2.5rem);border-left:1px solid var(--cvet-linie)}
	.cvet-journal-grid .wp-block-post-template>li:nth-child(2n+1){padding-left:0;border-left:0}
}
@media (max-width:620px){
	.cvet-journal-grid .wp-block-post-template{grid-template-columns:1fr!important;row-gap:1.75rem}
	.cvet-journal-grid .wp-block-post-template>li{padding-left:0!important;border-left:0!important;
		border-top:1px solid var(--cvet-linie);padding-top:1.75rem}
	.cvet-journal-grid .wp-block-post-template>li:first-child{border-top:0;padding-top:0}
}
/* Wyróżnij (Sticky): immer zwei (oder drei) Rasterspalten breit, festgelegt durch die Seitenaufteilung im
   Plugin (cvet-core 0.11.0, cvet/eintrag-karte). Da die Klasse am inneren Rahmen sitzt, greift sie über :has() auf das
   umgebende Raster-Element (li) durch, das WordPress für jeden Beitrag im Post-Template selbst erzeugt.
   Hinweis: Bei einer verbreiterten Karte kann die senkrechte Trennlinie der Folgekarte in seltenen Fällen
   eine Spalte versetzt wirken, da CSS-Grid-Spannen und :nth-child sich nicht immer exakt vertragen. */
.cvet-journal-grid .wp-block-post-template>li:has(.cvet-eintrag-breit-2){grid-column:span 2}
.cvet-journal-grid .wp-block-post-template>li:has(.cvet-eintrag-breit-3){grid-column:span 3}

/* Artikel-Aufmacher: erster Beitrag zieht sich über die volle Breite, mit größerem Bild und größerer Schlagzeile */
.cvet-journal-grid--lead .wp-block-post-template>li:first-child{
	grid-column:1/-1;border-left:0;padding-left:0;padding-bottom:clamp(1.75rem,3vw,2.5rem);
	border-bottom:1px solid var(--cvet-linie);margin-bottom:.25rem}
.cvet-journal-grid--lead .wp-block-post-template>li:first-child .cvet-eintrag{flex-direction:row;gap:clamp(1.25rem,3vw,2.25rem);align-items:flex-start}
.cvet-journal-grid--lead .wp-block-post-template>li:first-child .wp-block-post-featured-image{flex:1 1 52%;margin:0}
.cvet-journal-grid--lead .wp-block-post-template>li:first-child .wp-block-post-featured-image img{aspect-ratio:16/10}
.cvet-journal-grid--lead .wp-block-post-template>li:first-child .cvet-eintrag-text{flex:1 1 48%;padding:0}
.cvet-journal-grid--lead .wp-block-post-template>li:first-child .wp-block-post-title{
	font-size:clamp(1.7rem,4vw,2.5rem)!important;line-height:1.05!important}
.cvet-journal-grid--lead .wp-block-post-template>li:first-child .wp-block-post-excerpt{font-size:1.02rem}
@media (max-width:700px){
	.cvet-journal-grid--lead .wp-block-post-template>li:first-child .cvet-eintrag{flex-direction:column;gap:1rem}
	.cvet-journal-grid--lead .wp-block-post-template>li:first-child .wp-block-post-featured-image{flex-basis:auto}
}

.cvet-eintrag{display:flex;flex-direction:column;height:100%}
.cvet-eintrag .wp-block-post-featured-image{margin:0 0 14px;line-height:0}
.cvet-eintrag .wp-block-post-featured-image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:0}
.cvet-eintrag-text{display:flex;flex-direction:column;gap:5px;flex:1}
/* Kicker: Rubrik über der Schlagzeile, wie im Zeitungssatz */
.cvet-eintrag-text .wp-block-post-terms{order:1;font-size:.72rem;font-weight:700;color:var(--wp--preset--color--aktion);
	text-transform:uppercase;letter-spacing:.06em;padding-bottom:6px;border-bottom:2px solid var(--wp--preset--color--aktion);
	display:inline-block;width:fit-content}
.cvet-eintrag-text .wp-block-post-terms a{color:inherit;text-decoration:none}
/* Bewusste Ausnahme von der website-weiten H3-Regel: der Kartentitel im Journal ist Teil der
   Zeitungsoptik und bleibt in Big Shoulders. Die Karte selbst ist klein genug (Zusammenfassung
   darunter 0,92–1,02rem, also kleiner als der Titel), sodass hier nicht dieselbe Verwechslung mit
   dem Fließtext droht wie bei H3/H4 in langen Artikeln. */
.cvet-eintrag-text .wp-block-post-title{order:2;font-family:var(--wp--preset--font-family--big-shoulders);font-weight:700;font-size:var(--cvet-kartentitel-groesse,1.15rem);line-height:1.2;margin:8px 0 0!important}
.cvet-eintrag-text .wp-block-post-title a{color:var(--wp--preset--color--daten);text-decoration:none}
.cvet-eintrag-text .wp-block-post-date{order:3;font-size:.8rem;color:var(--wp--preset--color--gedaempft)}
.cvet-eintrag-text .wp-block-post-excerpt{order:4;font-size:.92rem;color:var(--wp--preset--color--gedaempft);margin-top:6px}
.cvet-eintrag-text .wp-block-post-excerpt__more-link{color:var(--wp--preset--color--aktion);font-weight:700}

/* Filterleiste: rechts über dem Journal-Titel, Links in Petrol (klickbar); aktuelle Kategorie unterstrichen */
.cvet-filter{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;margin:0 0 .5rem}
.cvet-filter a{font-size:.9rem;font-weight:700;color:var(--wp--preset--color--aktion);text-decoration:none;
	padding:5px 3px;border-bottom:2px solid transparent}
.cvet-filter a:hover,.cvet-filter a:focus-visible,.cvet-filter a[aria-current]{border-color:var(--wp--preset--color--aktion)}

/* Kopfzeile im Zeitungsstil: großer Titel mit Doppellinie darunter */
.cvet-masthead{font-size:var(--cvet-masthead-groesse,clamp(2.6rem,6vw,4rem))!important;letter-spacing:-.01em;padding-bottom:16px!important;
	border-bottom:3px solid var(--wp--preset--color--daten);position:relative;margin-bottom:1.75rem!important}
.cvet-masthead::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--wp--preset--color--daten)}

/* Initiale (Drop Cap): nur im Journal-Artikel (.cvet-artikel), nicht auf normalen Seiten wie Leistungen. */
.cvet-artikel>p:first-of-type::first-letter{
	font-family:var(--wp--preset--font-family--big-shoulders);font-weight:700;font-size:3.6em;line-height:.86;
	float:left;padding:.03em .07em 0 0;color:var(--wp--preset--color--aktion)}

/* Textseite (Leistungen, LAVA, Impressum, Datenschutz …): schlichter weißer Bogen, schmaler als die volle
   Breite, damit die Seite nicht wie eine einsame, dünne Spalte im Grau wirkt. Kein Papierton hier – der ist
   dem Journal vorbehalten. */
.cvet-textseite{background:var(--wp--preset--color--weiss);max-width:1000px;margin:0 auto;
	padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem);border:1px solid var(--cvet-linie);
	box-shadow:0 1px 2px rgba(0,0,0,.04)}

/* Papierbogen: unsere „Gazetka“ liegt als durchgehende Fläche auf dem grauen Seitenhintergrund, mit Kante
   und Schatten wie ein Blatt Papier auf dem Tisch. Journal-Übersicht, Kategorie-Archive und Suche teilen sich
   einen Bogen (Titel, Schlagzeile, Filter, Raster); der einzelne Beitrag bekommt einen eigenen, schmaleren. */
.cvet-journalbogen{background:var(--wp--preset--color--papier);max-width:var(--cvet-journal-breite,1300px);margin:0 auto;
	padding:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,3rem) clamp(2.5rem,5vw,3.5rem);
	border:1px solid var(--cvet-linie);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.cvet-artikelbogen{background:var(--wp--preset--color--papier);max-width:var(--cvet-artikel-breite,880px);margin:0 auto;
	padding:clamp(1.75rem,4vw,2.75rem) clamp(1.25rem,4vw,2.5rem);
	border:1px solid var(--cvet-linie);box-shadow:0 1px 4px rgba(0,0,0,.05)}

/* Schlagzeile unter dem Journal-Titel */
.cvet-schlagzeile{margin:-1.25rem 0 1.75rem;font-size:var(--cvet-schlagzeile-groesse,clamp(1.15rem,1.6vw,1.35rem));font-style:italic;color:var(--wp--preset--color--gedaempft);overflow:hidden}
.cvet-schlagzeile-text{display:inline-block}

/* Pagination im Journal */
.cvet-journal-grid .wp-block-query-pagination{display:flex;gap:14px;justify-content:center;margin-top:2.5rem;font-size:.9rem}
.cvet-journal-grid .wp-block-query-pagination a{color:var(--wp--preset--color--aktion);text-decoration:none;font-weight:700}
.cvet-journal-grid .wp-block-query-pagination-numbers .current{color:var(--wp--preset--color--daten);font-weight:700}


/* Design-Anpassungen aus dem Plugin (Einstellungen → CVET → Design-Anpassungen), falls dort aktiviert.
   Ohne Angabe dort ändert sich hier nichts: die var()-Fallbacks sind exakt die Theme-Standardwerte. */
body{font-size:var(--cvet-basis-schrift,var(--wp--preset--font-size--medium))}
/* Überschriftengrößen website-weit (vorher nur auf Textseiten, jetzt überall außer der Journal-Winiette,
   die weiterhin ihre eigene Größe über .cvet-masthead trägt und wegen höherer Spezifität unverändert bleibt).
   H1/H2 fließend in Big Shoulders. H3/H4 bewusst NICHT in Big Shoulders: der schmale Schnitt wirkt bei
   kleinen Größen optisch leichter als der Fließtext, selbst wenn die Zahl größer ist. Stattdessen Work Sans,
   fett, in fester Größe – bewusst nicht fließend, damit sie auf keiner Bildschirmbreite unter die 1,0625rem
   des Fließtexts fallen können. Fließend nach derselben Formel wie zuvor (1vw - 0,2rem, Koeffizient =
   Differenz ÷ 0,7). */
/* Jede Zeile lässt sich einzeln aus dem Plugin überschreiben (Einstellungen → CVET → Design-Anpassungen →
   Überschriften H1–H4): --cvet-h1-groesse … --cvet-h4-groesse. Gesetzt, gilt die Zahl genau so, ohne
   zusätzliche Skalierung durch --cvet-heading-scale – das vermeidet, dass sich zwei Overrides gegenseitig
   verstärken. Ungesetzt (Regelfall) bleibt es bei der Theme-Vorgabe von hier. */
h1{font-size:var(--cvet-h1-groesse, calc(clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.643), 2.2rem) * var(--cvet-heading-scale,1)));line-height:1.2}
h2{font-size:var(--cvet-h2-groesse, calc(clamp(1.35rem, 1.35rem + ((1vw - 0.2rem) * 0.214), 1.5rem) * var(--cvet-heading-scale,1)));line-height:1.2}
h3{font-family:var(--wp--preset--font-family--work-sans);font-weight:700;line-height:1.3;
	font-size:var(--cvet-h3-groesse, calc(1.3rem * var(--cvet-heading-scale,1)))}
h4{font-family:var(--wp--preset--font-family--work-sans);font-weight:700;line-height:1.3;
	font-size:var(--cvet-h4-groesse, calc(1.15rem * var(--cvet-heading-scale,1)))}

/* Fließtext etwas großzügiger (1,55 → 1,6) und bessere Zeilenumbrüche bei Überschriften und Absätzen
   (kein einzelnes Wort mehr allein in der letzten Zeile, wo der Browser das unterstützt; ansonsten wird
   die Angabe einfach ignoriert, ohne etwas zu brechen). */
body{line-height:1.6}
h1,h2,h3,h4,p{text-wrap:pretty}

/* „Rasterlücken auffüllen“ (Einstellungen → CVET → Journal: Reihenfolge). Body-Klasse „cvet-dense“ kommt
   vom Plugin, nur wenn dort aktiviert. */
body.cvet-dense .cvet-journal-grid .wp-block-post-template{grid-auto-flow:dense}
/* Startseite: Hero-Bereich oben, leicht abgesetzt vom Fließtext darunter. */
.cvet-hero{padding-left:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40)}
.cvet-hero h1{max-width:20ch}

/* Branchen-Kacheln: brechen bei 5 Einträgen natürlich um (3+2 o. ä.), statt in starren Spalten
   unausgewogen zu wirken. */
/* Eigene, redundante Absicherung zusätzlich zu den von WordPress selbst beim Rendern ergänzten
   Layout-Klassen (is-layout-flex u. ä.): schadet nicht, stellt aber sicher, dass die Karten auch dann
   nebeneinander stehen, wenn dieser Mechanismus aus irgendeinem Grund nicht greift. */
.cvet-branchen{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--40)}
.cvet-branche{flex:1 1 280px;min-width:0}
.cvet-branche h3{margin-top:0}

/* Weiterlesen-Links: Pfeil ist reines Dekor, für Screenreader ausgeblendet, kein Teil des Linktexts. */
/* Der Pfeil ist reines Dekor über :after; gängige Screenreader lesen generierten Inhalt standardmäßig
   nicht vor, der Linktext bleibt also "Mehr über uns", nicht "Mehr über uns Pfeil nach rechts". */
.cvet-weiterlesen{margin-top:0.75em}
.cvet-weiterlesen a::after{content:" →"}

/* Startseite: CTA-Block am Ende, leicht abgesetzt wie der Hero oben. */
.cvet-cta{background:var(--wp--preset--color--panel);text-align:center;border-radius:8px;
	padding-left:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40)}
.cvet-cta .wp-block-buttons{justify-content:center}