/* ==========================================================================
   UIISE Landkreis-Landingpages — Zusatzstile (ergaenzt custom.css)  — v2
   ========================================================================== */

/* Ortsnamen (Landkreisnamen) sollen nach Möglichkeit nie per Trennstrich
   umgebrochen werden — daher automatische Silbentrennung in Ueberschriften
   und Breadcrumb konsequent deaktiviert. */
h1, h2, h3, .lp-crumbs, .lp-hero .eyebrow {
	hyphens: none;
	-webkit-hyphens: none;
}

/* Breadcrumb (kein Link zu Geschwister-Zielgruppenseiten, nur Kontext) */
.lp-crumbs {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0.9rem 2rem 0 2rem;
	font-size: 0.82rem;
	opacity: 0.7;
}
.lp-crumbs a { color: inherit; }

/* Vereinfachte Nav: nur Logo + Kontakt-Anker, kein Hamburger noetig */
#topnav .topnav-simple-link {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02rem;
	color: #0a1622;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
#topnav .topnav-simple-link:hover { border-bottom-color: #45D9CE; }

/* CTA-Buttons: auf schmalen Bildschirmen umbrechen statt Overflow zu riskieren */
@media screen and (max-width: 736px) {
	.button,
	.button.large {
		white-space: normal;
		height: auto;
		line-height: 1.4;
		padding: 0.85rem 1.75rem;
	}
}

/* Zielgruppen-Hero */
/* HINWEIS: Hier bewusst Flexbox statt CSS-Grid. Mit grid-template-columns
   (sowohl fr- als auch %-Einheiten) berechnete Chromium innerhalb der
   bestehenden #wrapper/section-Verschachtelung dieses Templates nachweislich
   falsche Spaltenbreiten (getestet: 448px/952px statt korrekt 55%/45% von
   1400px) — reproduzierbar falsch, aber korrekt sobald das Element z. B. an
   document.body reparented wird. Ursache liegt an einer Wechselwirkung mit
   main.css/custom.css in dieser Elternkette, nicht am eigenen Regelwerk hier.
   Flexbox liefert in identischer Verschachtelung die korrekten Breiten. */
.lp-hero, #wrapper .lp-hero {
	position: relative;
	display: flex;
	align-items: stretch;
	/* .lp-hero ist das erste Kind von #wrapper (keine Breadcrumb-Zeile mehr
	   davor) und bekommt daher schon ueber :first-child margin-top:0 vom
	   Template — hier zur Sicherheit trotzdem explizit gesetzt, falls sich
	   die Position im DOM je wieder aendert. */
	margin-top: 0;
}
.lp-hero .lp-hero-text {
	/* Breite an die im uebrigen Template verwendete Kopf/Inhalt-Spalte
	   angeglichen (dort 32vw/68vw) statt einer eigenen, breiteren Aufteilung —
	   sonst wirkt die gruene Flaeche der Hero breiter als die Kopfspalte der
	   nachfolgenden Abschnitte. */
	flex: 0 0 32%;
	max-width: 32%;
	min-width: 0;
	box-sizing: border-box;
	background: #45D9CE;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 2.5rem 3rem 2rem;
}
.lp-hero .eyebrow {
	font-size: 0.92rem;
	letter-spacing: 0.09rem;
	text-transform: uppercase;
	font-weight: 800;
	color: #0a9e7f;
	line-height: 1.4;
	margin: 0 0 1rem 0;
}
.lp-hero h1 {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-size: 1.9rem;
	line-height: 1.25;
	font-weight: 800;
	margin: 0 0 1rem 0;
	overflow-wrap: break-word;
	/* hyphens:none (siehe oben) gilt auch hier — fuer lange Komposita wie
	   "Investitionsentscheidungen" gezielt wieder erlaubt (nur an expliziten
	   ­-Stellen, keine automatische Trennung). */
	hyphens: manual;
	-webkit-hyphens: manual;
}
.lp-hero p.lead { font-size: 1.03rem; line-height: 1.5; font-weight: 500; }

/* WICHTIG: Die Bildmotive im Bestand sind teils vollstaendige Grafiken mit
   eingebranntem Text (z. B. "Deep Tech für eine resiliente Zukunft.",
   "ENERGIE / TRANSPORT / VERTEILUNG"). Als object-fit:cover wuerden sie am
   Rand beschnitten und wirken "zu breit"/abgeschnitten. Daher grundsaetzlich
   object-fit:contain auf dunklem Hintergrund (passend zum Bildhintergrund),
   damit das komplette Motiv sichtbar bleibt statt zu ueberlaufen. Die Hoehe
   wird NICHT mehr per min-height erzwungen, sondern ergibt sich aus dem
   Textblock (align-items:stretch) — so sind Text- und Bildspalte immer
   exakt gleich hoch, ohne ueberschuessigen Leerraum. */
.lp-hero .lp-hero-image {
	/* Kein "height:100%" hier — das wuerde align-items:stretch am Elternflex
	   (.lp-hero) deaktivieren, ohne selbst aufzuloesen (da .lp-hero keine
	   definite Hoehe hat), und die Bildspalte wuerde dann rein anhand des
	   Bild-Seitenverhaeltnisses statt der Textspaltenhoehe rendern — genau
	   der beobachtete "Bild niedriger als Text"-Bug. Ohne explizite Hoehe
	   greift stretch korrekt und beide Spalten werden gleich hoch. */
	min-width: 0;
	flex: 0 0 68%;
	max-width: 68%;
	box-sizing: border-box;
	background: #0a1622;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.lp-hero .lp-hero-image img {
	width: 100%;
	height: 100%;
	min-width: 0;
	object-fit: contain;
	display: block;
}
@media screen and (max-width: 900px) {
	.lp-hero { flex-direction: column; }
	.lp-hero .lp-hero-text, .lp-hero .lp-hero-image { flex-basis: auto; max-width: 100%; width: 100%; }
	.lp-hero .lp-hero-image { min-height: 34vh; order: -1; }
	.lp-hero .lp-hero-text { padding: 2rem 1.5rem; }
}

/* Benefit-Karten mit Icon-Badge */
.benefit-list { display: flex; flex-direction: column; gap: 1.1rem; margin: 0 0 1.25rem 0; }
.benefit-list .benefit {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	border: 1px solid rgba(10, 22, 34, 0.1);
	border-radius: 0.5rem;
	padding: 1.25rem 1.5rem;
	box-sizing: border-box;
}
.benefit-list .benefit .badge-num {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #45D9CE;
	color: #0a1622;
	font-weight: 800;
	font-family: 'Raleway', Helvetica, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	flex-shrink: 0;
}
.benefit-list .benefit h3 { margin: 0.15rem 0 0.4rem 0; font-size: 1.02rem; }
.benefit-list .benefit p { margin: 0; font-size: 0.95rem; }

/* Regulatorik-Zeitleiste */
.reg-timeline { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1.25rem 0; }
.reg-timeline .reg-item {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 1rem;
	border-left: 3px solid #45D9CE;
	padding: 0.1rem 0 0.1rem 1.25rem;
}
.reg-timeline .reg-date {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-weight: 800;
	font-size: 0.85rem;
	color: #0a9e7f;
	white-space: nowrap;
}
.reg-timeline .reg-item p { margin: 0 0 0.4rem 0; }
.reg-timeline .reg-item p:last-child { margin-bottom: 0; }
@media screen and (max-width: 600px) {
	.reg-timeline .reg-item { grid-template-columns: 1fr; }
}

/* Info-Boxen ("Was UIISE leistet"): rein informativ, KEINE Links auf die
   jeweils anderen Zielgruppenseiten (bewusst kein <a>, bewusste Entscheidung
   gegen wechselseitige Verlinkung zwischen den drei Zielgruppenseiten). Die
   eigene Zielgruppe steht je Seite an erster Stelle. */
.info-boxes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0 1.75rem 0;
}
.info-boxes .info-box {
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid rgba(10, 22, 34, 0.12);
	border-radius: 0.5rem;
	padding: 1.6rem 1.4rem;
}
.info-boxes .info-box.is-self { border-color: #45D9CE; border-width: 2px; }
.info-boxes .info-box .eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.09rem;
	text-transform: uppercase;
	font-weight: 800;
	color: #0a9e7f;
	margin: 0 0 0.5rem 0;
}
.info-boxes .info-box h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.02rem;
	line-height: 1.3;
	overflow-wrap: normal;
	/* hyphens:none (siehe oben) unterdrueckt auch explizite &shy;-Trennzeichen —
	   hier gezielt wieder erlaubt ("manual" = nur an &shy;-Stellen trennen,
	   keine automatische Woerterbuch-Trennung). */
	hyphens: manual;
	-webkit-hyphens: manual;
}
.info-boxes .info-box p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
@media screen and (max-width: 900px) {
	.info-boxes { grid-template-columns: 1fr; }
}

/* Partner-Teaser (Einladung an Fachbetriebe, erscheint auf den drei
   Zielgruppenseiten und verlinkt auf die separate Partner-Landingpage —
   das ist bewusst KEIN Verstoss gegen die "keine Verlinkung zwischen den
   drei Zielgruppenseiten"-Regel, da die Partnerseite eine vierte, eigene
   Seitenart ist). */
.partner-teaser {
	background: rgba(69, 217, 206, 0.12);
	border: 1px solid rgba(10, 22, 34, 0.1);
	border-radius: 0.5rem;
	padding: 1.5rem 1.75rem;
	margin: 0 0 1.5rem 0;
}
.partner-teaser p { margin: 0; font-size: 0.95rem; }
.partner-teaser a { font-weight: 700; }

/* Kooperationshinweis (Bau & Finanzierung ueber regionale Implementierungspartner) */
.cooperation-note {
	font-size: 0.95rem;
	border-left: 3px solid #0a9e7f;
	padding: 0.2rem 0 0.2rem 1.1rem;
	margin: 0 0 1.5rem 0;
}

/* Nachbarkreise (gleiche Zielgruppen-Seitenart, moderate Anzahl) */
.neighbor-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0 0; }
.neighbor-links a {
	display: inline-block;
	font-size: 0.88rem;
	font-weight: 700;
	padding: 0.55rem 1.1rem;
	border-radius: 0.4rem;
	border: 1px solid rgba(10, 22, 34, 0.14);
	color: #0a1622;
	text-decoration: none;
}
.neighbor-links a:hover { background: #45D9CE; border-color: #45D9CE; }

/* Fachbetriebe-Zielgruppenliste auf der Partnerseite */
.partner-audience-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.5rem 0; padding: 0; list-style: none; }
.partner-audience-list li {
	font-size: 0.88rem;
	font-weight: 700;
	background: rgba(10, 22, 34, 0.05);
	border: 1px solid rgba(10, 22, 34, 0.1);
	border-radius: 999px;
	padding: 0.4rem 1rem;
}

/* Sitemap-Liste (Export-Index) */
.lp-index-list { list-style: none; padding: 0; }
.lp-index-list li { margin-bottom: 0.55rem; }
.lp-index-list .lk-name { font-weight: 700; margin-right: 0.75rem; }
.lp-index-list a { font-size: 0.85rem; margin-right: 0.6rem; white-space: nowrap; }