/* main.css only loads Source Sans Pro in 300/600/700 via Google Fonts.
   Intermediate font-weight values (400, 500 …) have no matching font
   file, so the browser silently falls back to the nearest loaded
   weight (usually 300) — i.e. they render with NO visible change.
   Load the missing weights here so those values actually take effect. */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,500");

/* UIISE — custom integration layer on top of Paradigm Shift (HTML5 UP)
   Keeps the template's white / mint (#45D9CE) identity; gives the dark
   deep-tech graphics a consistent, polished treatment on the light page. */

/* Height of the fixed top navigation bar. Used both for the wrapper's
   top padding and for the intro section's height calculation, so the
   two can never drift apart. */
:root {
	--nav-h: 2.4rem;
}

/* Intro (Startseite) header: centered content next to the wave graphic
   — horizontally (text-align) AND vertically. We pin the whole hero
   section to the viewport height explicitly (min-height) instead
   of relying on the grid row's implicit sizing, so the header column
   always has a real height to center within, at any window size.
   The height subtracts the fixed nav bar, otherwise the section is
   taller than the viewport and the content sits slightly below the
   optical centre.
   We also re-assert width/alignment on the header's children with the
   SAME selectors the template uses at its breakpoints, so our centered
   layout wins no matter how narrow the window gets (down to the point
   where the template stacks header above content). */
#wrapper > section.intro {
	min-height: calc(100vh - var(--nav-h));
}
#wrapper > section.intro > header {
	text-align: center;
	justify-self: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - var(--nav-h));
	width: 100%;
	/* Symmetrical inner spacing. The template sets an asymmetrical
	   padding on section > header (the header column is right-aligned
	   against the content column in the original design) and repeats it
	   inside several breakpoints — hence !important, otherwise the
	   media-query rules win as soon as the window narrows. */
	padding: 3rem !important;
	margin: 0;
	box-sizing: border-box;
}
#wrapper > section.intro > header > * {
	width: auto;
	max-width: 26rem;
	margin-left: auto;
	margin-right: auto;
}
/* The trailing margin of the last block would push the optical centre
   upwards, so it is removed. */
#wrapper > section.intro > header > :last-child {
	margin-bottom: 0;
}
#wrapper > section.intro > .content {
	min-height: calc(100vh - var(--nav-h));
}
#wrapper > section.intro > header .actions,
#wrapper > section.intro > header ul.actions {
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
#wrapper > section.intro > header ul.actions li {
	padding-left: 0;
}

/* Logo in the intro header */
.image.logo {
	display: block;
	margin: 0 auto 1.25rem auto;
	width: auto;
}
.image.logo img {
	width: auto;
	max-width: 14rem;
	height: auto;
	display: inline-block;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Logo: never framed. The hero (Startseite) uses the black logo file
   directly, the topnav and footer use the colour logo file directly —
   no colour filters needed any more. */
.image.logo img,
.image.footer-logo img,
.topnav-logo {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Section graphics read as framed cards on the white background */
#wrapper > section > .content .image.fit img,
#wrapper > section > .content .image.main img {
	border-radius: 0.5rem;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
	background: #0a1622;
}

/* Slightly tighter band treatment for the icon strip (graphic 14) */
.image.fit.band img {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Two-up image grid for "weitere Domänen" */
.imgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin: 0 0 2rem 0;
}
.imgrid .image.fit {
	margin: 0;
	display: block;
	aspect-ratio: 16 / 9;
}
.imgrid .image.fit img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Footer logo */
.image.footer-logo {
	display: block;
	margin: 0 0 1rem 0;
}
.image.footer-logo img {
	width: auto;
	max-width: 9rem;
	height: auto;
}

/* Sub-blocks inside a content column (avoid the template's full-width nested
   <section> behaviour by using plain divs) */
.subsection {
	margin: 3.5rem 0;
}
.subsection:first-child {
	margin-top: 0;
}
.subsection > :last-child {
	margin-bottom: 0;
}

/* Collapse the two-up grid on narrow viewports */
@media screen and (max-width: 736px) {
	.imgrid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.image.logo img {
		max-width: 11rem;
	}
	/* Tighter but still symmetrical padding on phones */
	#wrapper > section.intro > header {
		padding: 2rem 1.5rem !important;
	}
}

/* Global body copy: the template's default font-weight (300) is very light
   and hard to read on the white background. Bump the base weight up a
   notch site-wide (nav, footer, form fields, etc.) — the more specific
   rule further below still raises the main content column a bit further
   (to 500) on top of this. */
body, input, select, textarea {
	font-weight: 400;
}

/* --- trilingual rebuild additions --- */

/* Language switcher (top of intro header) */
.langswitch {
	font-size: 0.8rem;
	letter-spacing: 0.2rem;
	font-weight: 700;
	margin: 0 0 1.5rem 0;
	text-transform: uppercase;
}
.langswitch a {
	color: inherit;
	opacity: 0.55;
	border: 0;
	text-decoration: none;
}
.langswitch a:hover { opacity: 1; }
.langswitch .cur { color: #0a1622; border-bottom: 2px solid #0a1622; padding-bottom: 1px; }
.langswitch span { opacity: 0.35; }

/* Intro title: kept small and understated so the insqor logo above it
   reads as the primary brand mark */
#wrapper > section.intro > header h1 {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 0.25rem;
	text-transform: uppercase;
	margin: 0 0 0.75rem 0;
}
#wrapper > section.intro > header h1:before,
#wrapper > section.intro > header h1:after {
	display: none;
}

/* Slogan: keep the forced line break crisp and prominent */
.intro header .slogan {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-weight: 800;
	font-size: 1.6rem;
	line-height: 1.25;
	letter-spacing: 0.05rem;
	margin: 0 0 1rem 0;
}

/* Vision statement: lightly emphasised editorial block */
.content.vision p {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-size: 1.35rem;
	line-height: 1.5;
	font-weight: 600;
	margin: 0 0 1rem 0;
}
.content.vision p:first-child { font-size: 1.5rem; }
.content.vision { border-left: 3px solid #45D9CE; padding-left: 1.75rem; }

/* Impressum / legal: smaller, comfortable legal type */
.content.legal { font-size: 0.92rem; line-height: 1.7; opacity: 0.92; }
.content.legal h3 { font-size: 1rem; margin: 1.75rem 0 0.5rem 0; }
.content.legal p { margin: 0 0 0.9rem 0; }

/* Footer logo a touch smaller, legal lines readable */
#footer .copyright { line-height: 1.7; }
#footer { margin-top: 2.5rem; }

/* --- content-overhaul additions --- */

/* Stat grid (report highlights, market figures) */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	margin: 0 0 2rem 0;
	align-items: stretch;
}
.stat-grid .stat {
	background: #0a1622;
	color: #fff;
	border-radius: 0.5rem;
	padding: 1.5rem 1.5rem;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 7.5rem;
}
.stat-grid .stat .num {
	display: block;
	font-family: 'Raleway', Helvetica, sans-serif;
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.15;
	color: #45D9CE;
	margin: 0 0 0.4rem 0;
	white-space: nowrap;
}
.stat-grid .stat .lbl {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.02rem;
	opacity: 0.8;
	line-height: 1.4;
}
@media screen and (max-width: 600px) {
	.stat-grid { grid-template-columns: 1fr; }
	.stat-grid .stat .num { white-space: normal; }
}

/* Two-up card layout for regulation blocks, "for whom", etc. */
.card-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin: 0 0 2rem 0;
	align-items: stretch;
}
.card-grid .card {
	border: 1px solid rgba(10, 22, 34, 0.12);
	border-radius: 0.5rem;
	padding: 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.card-grid .card h3 {
	margin: 0 0 0.6rem 0;
	font-size: 1.05rem;
}
.card-grid .card h3 .tag {
	display: inline-block;
	font-size: 0.68rem;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
	font-weight: 700;
	background: #45D9CE;
	color: #0a1622;
	border-radius: 0.25rem;
	padding: 0.15rem 0.5rem;
	margin-left: 0.5rem;
	vertical-align: middle;
}
.card-grid .card p:last-child { margin-bottom: 0; }
.card-grid .card ul { margin: 0 0 0 1.1rem; padding: 0; }
@media screen and (max-width: 736px) {
	.card-grid { grid-template-columns: 1fr; }
}

/* Correction / important notice box */
.notice {
	border-left: 3px solid #45D9CE;
	background: rgba(73, 252, 212, 0.08);
	border-radius: 0 0.35rem 0.35rem 0;
	padding: 1rem 1.25rem;
	margin: 0 0 2rem 0;
	font-size: 0.95rem;
}
.notice p { margin: 0 0 0.5rem 0; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: #0a1622; }

/* Differentiation table */
.diff-table th, .diff-table td { text-align: center; }
.diff-table th:first-child, .diff-table td:first-child { text-align: left; }
.diff-table td.yes { color: #0a9e7f; font-weight: 800; font-size: 1.1rem; }
.diff-table td.no { opacity: 0.35; }
.diff-table td.partial { color: #c47f0a; font-weight: 800; font-size: 1.1rem; opacity: 1; }
.diff-table th.highlight, .diff-table td.highlight { background: rgba(73, 252, 212, 0.16); }

/* Small print under sections (sources, caveats) */
.finetext {
	font-size: 0.82rem;
	opacity: 0.65;
	line-height: 1.6;
	margin-top: -0.75rem;
}

/* Bolder body copy in the right-hand content column for readability */
#wrapper > section > .content p,
#wrapper > section > .content li,
#wrapper > section > .content .field label {
	font-weight: 500;
}

/* --- top navigation (small, unobtrusive) --- */
#topnav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10000;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(10, 22, 34, 0.08);
}
#topnav .topnav-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 2rem;
	gap: 1.5rem;
}
#topnav .topnav-brand {
	display: inline-flex;
	align-items: center;
	border: 0;
	text-decoration: none;
	white-space: nowrap;
}
#topnav .topnav-logo {
	display: block;
	width: auto;
	height: 1.3rem;
	max-width: none;
}
#topnav .topnav-links {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	justify-content: center;
}
#topnav .topnav-links a {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04rem;
	color: #0a1622;
	opacity: 0.6;
	border: 0;
	text-decoration: none;
	white-space: nowrap;
}
#topnav .topnav-links a:hover { opacity: 1; }
#topnav .topnav-lang {
	font-size: 0.72rem;
	letter-spacing: 0.15rem;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}
#topnav .topnav-lang a {
	color: inherit;
	opacity: 0.55;
	border: 0;
	text-decoration: none;
}
#topnav .topnav-lang a:hover { opacity: 1; }
#topnav .topnav-lang .cur { color: #0a1622; border-bottom: 2px solid #0a1622; padding-bottom: 1px; }
#topnav .topnav-lang span.sep { opacity: 0.35; }

/* Hamburger toggle button (mobile only) */
#topnav .topnav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
}
#topnav .topnav-toggle span {
	display: block;
	width: 1.5rem;
	height: 2px;
	background: #0a1622;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
#topnav .topnav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#topnav .topnav-toggle.is-active span:nth-child(2) { opacity: 0; }
#topnav .topnav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#wrapper { padding-top: var(--nav-h); }

@media screen and (max-width: 980px) {
	#topnav .topnav-toggle { display: flex; order: 3; }
	#topnav .topnav-lang { order: 2; }
	#topnav .topnav-inner { padding: 0.6rem 1.25rem; justify-content: space-between; position: relative; flex-wrap: wrap; }

	/* Links collapse into a full-width dropdown panel, toggled via JS */
	#topnav .topnav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border-bottom: 1px solid rgba(10, 22, 34, 0.08);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
	}
	#topnav .topnav-links.is-active { display: flex; }
	#topnav .topnav-links a {
		width: 100%;
		box-sizing: border-box;
		padding: 0.9rem 1.5rem;
		opacity: 0.85;
		border-bottom: 1px solid rgba(10, 22, 34, 0.06);
	}
	#topnav .topnav-links a:last-child { border-bottom: 0; }
}
@media screen and (max-width: 1152px) {
	#wrapper { padding-top: var(--nav-h); }
}

/* Small print link back to top-of-page anchor targets: offset scroll position
   below the fixed nav bar so headings aren't hidden underneath it. */
#wrapper section[id] { scroll-margin-top: 3.5rem; }

/* Prevent long (compound) German headings from overflowing the fixed-width
   left header column into the right content column; keep multi-line
   headings right-aligned and fully contained. */
#wrapper section > header h1,
#wrapper section > header h2 {
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	max-width: 100%;
}

/* Remove the vertical accent line running down beside each section header */
#wrapper > section > header:before,
#wrapper > section:last-of-type > header:after {
	display: none;
}

/* --- three-column problem cards --- */
.card-grid.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 980px) {
	.card-grid.cols-3 { grid-template-columns: 1fr; }
}

/* --- simple flow diagram: Daten -> Bewertung -> Ranking -> Standortreport --- */
.flow-steps {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0 0 2rem 0;
	flex-wrap: wrap;
}
.flow-steps .step {
	flex: 1 1 0;
	min-width: 8.5rem;
	background: #0a1622;
	color: #fff;
	border-radius: 0.5rem;
	padding: 1.25rem 1rem;
	text-align: center;
	font-family: 'Raleway', Helvetica, sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}
.flow-steps .arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0a1622;
	opacity: 0.35;
	font-size: 1.3rem;
	padding: 0 0.1rem;
}
@media screen and (max-width: 736px) {
	.flow-steps { flex-direction: column; }
	.flow-steps .arrow { transform: rotate(90deg); padding: 0.1rem 0; }
}

/* --- value grid ("Warum UIISE?") --- */
.value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0 0 2rem 0;
}
.value-grid .card {
	border: 1px solid rgba(10, 22, 34, 0.12);
	border-radius: 0.5rem;
	padding: 1.5rem 1.5rem;
	min-width: 0;
}
.value-grid .card h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.05rem;
	color: #0a9e7f;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}
.value-grid .card p {
	margin: 0;
	font-size: 0.92rem;
}
@media screen and (max-width: 736px) {
	.value-grid { grid-template-columns: 1fr; }
}

/* Vision-style emphasis re-usable on any subsection, not only .content */
.subsection.vision {
	border-left: 3px solid #45D9CE;
	padding-left: 1.75rem;
}
.subsection.vision p {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 600;
	margin: 0 0 1rem 0;
}
.subsection.vision p:last-child { margin-bottom: 0; }

/* Smaller, secondary illustration (used sparingly, e.g. within a subsection) */
.image.fit.small { max-width: 26rem; margin-left: auto; margin-right: auto; }

/* Report mock header (sample report showcase) */
.report-mock {
	background: #0a1622;
	color: #fff;
	border-radius: 0.5rem;
	padding: 2rem 2rem 1.5rem 2rem;
	margin: 0 0 2rem 0;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}
.report-mock .rm-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 0 0 0.5rem 0;
}
.report-mock .rm-score {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0.5rem 0 1.5rem 0;
}
.report-mock .rm-score .num {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-weight: 800;
	font-size: 3rem;
	color: #45D9CE;
	line-height: 1;
}
.report-mock .rm-score .badge {
	display: inline-block;
	background: #45D9CE;
	color: #0a1622;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.03rem;
	text-transform: uppercase;
	border-radius: 0.3rem;
	padding: 0.35rem 0.75rem;
}
.report-mock .rm-score .rank { opacity: 0.75; font-size: 0.95rem; }