/* GWG Köln – Platzhalterseite. Farben und Schriften wie im Theme „GWG Köln“. */

@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--primaer: #173f6b;
	--akzent: #2b72b8;
	--hell: #f2f5f9;
	--weiss: #ffffff;
	--dunkel: #1c2633;
	--text-leise: #4f5d6e;
	--linie: #dfe5ec;
	--rand: clamp(1rem, 4vw, 2rem);
	--breit: 1200px;
	--inhalt: 760px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--weiss);
	color: var(--dunkel);
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 1.125rem;
	line-height: 1.65;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-wrap: break-word;
	hyphens: auto;
}

main {
	flex: 1;
}

h1,
h2,
h3 {
	color: var(--primaer);
	font-family: "Source Serif 4", Georgia, serif;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 1rem;
	hyphens: manual;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin-top: 2.5rem; }
h3 { font-size: 1.375rem; }

p,
ul {
	margin: 0 0 1.25rem;
}

a {
	color: var(--akzent);
}

a:hover {
	color: var(--primaer);
}

:where(a):focus-visible {
	outline: 2px solid var(--akzent);
	outline-offset: 3px;
}

.huelle {
	width: 100%;
	max-width: var(--breit);
	margin-inline: auto;
	padding-inline: var(--rand);
}

.schmal {
	max-width: calc(var(--inhalt) + 2 * var(--rand));
}

/* Kopfzeile */
.kopf {
	background: var(--weiss);
	box-shadow: 0 1px 0 var(--linie);
	padding-block: 1rem;
}

.wortmarke {
	display: inline-block;
	color: var(--primaer);
	text-decoration: none;
	line-height: 1.3;
}

.wortmarke strong {
	display: block;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.75rem;
	letter-spacing: 0.08em;
}

.wortmarke span {
	display: block;
	color: var(--text-leise);
	font-size: 0.9375rem;
}

/* Titelbild */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(70vh, 560px);
	color: var(--weiss);
	background: var(--primaer) url("bilder/gwg-rheinpanorama-dom.jpg") center / cover no-repeat;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(23 63 107 / 0.15) 0%, rgb(23 63 107 / 0.8) 100%);
}

.hero .huelle {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero h1 {
	color: var(--weiss);
	max-width: 20ch;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
}

.hero p {
	max-width: 38rem;
	hyphens: manual;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
	margin: 0;
}

.hinweis {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.3rem 0.8rem;
	border-radius: 4px;
	background: var(--weiss);
	color: var(--primaer);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Abschnitte */
.abschnitt {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.abschnitt.hell {
	background: var(--hell);
}

.abschnitt > .huelle > h2:first-child {
	margin-top: 0;
}

.einleitung {
	max-width: var(--inhalt);
	font-size: 1.25rem;
	color: var(--text-leise);
}

.kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.kachel {
	background: var(--weiss);
	border-top: 4px solid var(--akzent);
	border-radius: 4px;
	padding: 1.5rem;
}

.kachel h3 {
	margin-bottom: 0.5rem;
}

.kachel p {
	margin: 0;
}

.kachel a {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	margin-top: 2rem;
}

.logos img {
	display: block;
	height: auto;
	max-height: 90px;
	width: auto;
	max-width: 100%;
}

/* Rechtstexte */
.rechtstext {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.rechtstext ul {
	padding-left: 1.25em;
}

.zurueck {
	display: inline-block;
	margin-bottom: 1.5rem;
	font-weight: 600;
}

/* Fußzeile */
.fuss {
	background: var(--primaer);
	color: var(--weiss);
	font-size: 0.9375rem;
	padding-block: 2rem;
}

.fuss .huelle {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
}

.fuss p {
	margin: 0;
}

.fuss a {
	color: var(--weiss);
}

.fuss a + a {
	margin-left: 1.25rem;
}

.rechtstext h1 {
	font-size: clamp(1.875rem, 1.4rem + 2.4vw, 3rem);
}