@charset "UTF-8";

/* =========================================================

Braunschweig Geo-Karte – Stil analog Hildesheim

========================================================= */

:root {

	color-scheme: light;

	--blue: #87cefa;

	--deep: #244c66;

	--line: #567e98;

	--gold: #a08f43;

	--cream: #fff8dc;

	--ink: #243746;

	--muted: #667782;

	--border: #d9e3e9;

	--white: #fff;

}

* {

	box-sizing: border-box;

}

.abb-standalone {

	width: 100%;

	margin: 0 auto;

}

.abb-heading {

	margin: 0 0 18px;

}

.abb-eyebrow {

	margin: 0 0 5px;

	color: blue;

	font-size: .74rem;

	font-weight: 800;

	letter-spacing: .13em;

	text-transform: uppercase;

}

h1 {

	margin: 0;

	color: #183b55;

	font-size: clamp(1.45rem,3vw,2.15rem);

	line-height: 1.15;

}

.abb-lead {

max-width: 1300px;

margin: 9px 0 0;

color: #52636d;

font-size: .98rem;

text-align: left;

}

.abb-layout {

	display: grid;

	grid-template-columns: minmax(0,1.45fr) minmax(285px,.8fr);

	gap: 18px;

	align-items: stretch;

}

.abb-card {

	min-width: 0;

	overflow: hidden;

	border: 1px solid var(--border);

	border-radius: 18px;

	background: var(--white);

	box-shadow: 0 12px 30px rgb(24 59 85 / 9%);

}

.abb-map-card {

	padding: clamp(12px,2vw,22px);

}

.abb-map-card-head {

	display: flex;

	justify-content: space-between;

	align-items: flex-start;

	gap: 10px;

	margin-bottom: 8px;

}

.abb-map-card-head h2, .abb-info-card h2 {

	margin: 0;

	color: #183b55;

	font-size: 1.1rem;

}

.abb-map-tag {

	flex: none;

	padding: 4px 9px;

	border-radius: 999px;

	background: #eff8fc;

	color: #456d85;

	font-size: .72rem;

	font-weight: 700;

}

.abb-map-help {

	margin: 0 0 4px;

	color: var(--muted);

	font-size: .82rem;

}

.abb-map-scroll {

	overflow: hidden;

	border-radius: 12px;

	background: linear-gradient(145deg,#fbfdfe,#f1f7fa);

}

#braunschweig-region-svg {

	display: block;

	width: 100%;

	height: auto;

	max-height: 760px;

}

.map-area {

	stroke: none;

	cursor: pointer;

	transition: fill .16s ease,filter .16s ease;

}

.map-area:hover, .map-area:focus, .map-area.is-active {

	fill: #f0dfa1!important;

	filter: drop-shadow(0 0 2px rgb(160 143 67 / 35%));

	outline: none;

}

.map-boundary-mesh {

	fill: none;

	stroke: #567e98;

	stroke-width: 1.5px;

	stroke-linecap: round;

	stroke-linejoin: round;

	vector-effect: non-scaling-stroke;

	pointer-events: none;

}

.map-label {

	pointer-events: none;

	fill: #23465e;

	font-family: Arial,Helvetica,sans-serif;

	font-weight: 700;

	paint-order: stroke;

	stroke: #fff;

	stroke-width: 650;

	stroke-linejoin: round;

	opacity: .94;

}

.hq-halo {

	fill: rgb(198 40 40 / 16%);

	pointer-events: none;

}

.hq-dot {

	fill: #c62828;

	stroke: #fff;

	stroke-width: 3.5;

	vector-effect: non-scaling-stroke;

	cursor: help;

}

.hq-label {

	display: none;

	fill: blue;

	font: 700 800px Arial,Helvetica,sans-serif;

	pointer-events: none;

}

.hq-dot:hover~.hq-label,.hq-dot:focus~.hq-label{display:block}

.abb-sidebar {

	display: flex;

	min-height: 100%;

	flex-direction: column;

	gap: 14px;

}

.abb-info-card {

	position: relative;

	min-height: 230px;

	padding: 20px;

}

.abb-info-card[hidden] {

	display: none;

}

.abb-info-kicker {

	margin: 0 0 5px;

	color: blue;

	font-size: .7rem;

	font-weight: 800;

	letter-spacing: .12em;

	text-transform: uppercase;

}

.abb-info-card h2 {

	padding-right: 34px;

	font-size: 1.25rem;

}

.abb-info-body {

	margin: 8px 0 0;

	color: #4d5d67;

	font-size: .9rem;

	overflow-wrap: anywhere;

}

.abb-geology {

	margin-top: 16px;

	padding-top: 13px;

	border-top: 1px solid #e6ecef;

}

.abb-geology h3 {

	margin: 0 0 5px;

	color: var(--deep);

	font-size: .9rem;

}

.abb-geology p {

	margin: 0;

	color: red;

	font-size: .86rem;

}

.abb-geology a {

	display: inline-block;

	margin-top: 8px;

	color: #174b70;

	font-size: .82rem;

	font-weight: 700;

}

.abb-close {

	position: absolute;

	top: 11px;

	right: 12px;

	display: grid;

	width: 34px;

	height: 34px;

	place-items: center;

	border: 0;

	border-radius: 50%;

	background: #edf4f7;

	color: var(--deep);

	font-size: 1.55rem;

	line-height: 1;

	cursor: pointer;

}

.abb-close:hover, .abb-close:focus-visible {

	background: #dcecf4;

	outline: 2px solid var(--blue);

}

.abb-list-card {

	padding: 16px 18px;

}

.abb-list-card h2 {

	margin: 0 0 10px;

	color: #183b55;

	font-size: .96rem;

}

.town-list {

	display: grid;

	grid-template-columns: 1fr;

	gap: 6px;

	max-height: 355px;

	margin: 0;

	padding: 0;

	overflow-y: auto;

	list-style: none;

}

.town-button {

	width: 100%;

	min-height: 39px;

	padding: 7px 10px;

	border: 1px solid var(--border);

	border-radius: 8px;

	background: #fff;

	color: var(--deep);

	text-align: left;

	font: inherit;

	font-size: .85rem;

	cursor: pointer;

}

.town-button:hover, .town-button[aria-pressed=true] {

	border-color: #b7dcef;

	background: #eef8fd;

}

.town-button:focus-visible {

	border-color: var(--blue);

	outline: 2px solid rgb(135 206 250 / 38%);

	outline-offset: 2px;

}

.abb-note {

	margin: 10px 0 0;

	color: var(--muted);

	font-size: .75rem;

}

.abb-source {

	margin: 12px 2px 0;

	color: #5e6f79;

	font-size: .7rem;

	line-height: 1.45;

}

.abb-source a {

	color: #385f77;

}

.abb-source p {

	margin: 3px 0;

}

.abb-map-status {

	margin: 7px 0 0;

	color: var(--muted);

	font-size: .72rem;

}

.mobile-list-card {

	display: none;

}

/* Regionale Erweiterung: nur Farben, Legende und Gruppenüberschriften. */

.region-bs {

	fill: #c6e2f0;

	stroke: #c6e2f0;

	stroke-width: 3px;

	stroke-linejoin: round;

}

.region-wf {

	fill: #f4c58b;

	stroke: #f4c58b;

	stroke-width: 3px;

	stroke-linejoin: round;

}

.region-he {

	fill: #f1dc84;

	stroke: #f1dc84;

	stroke-width: 3px;

	stroke-linejoin: round;

}

.region-pe {

	fill: #cfe5b6;

	stroke: #cfe5b6;

	stroke-width: 3px;

	stroke-linejoin: round;

}

.region-gf {

	fill: #d4d0ec;

	stroke: #d4d0ec;

	stroke-width: 3px;

	stroke-linejoin: round;

}

.region-gs {

	fill: #e8c5b9;

	stroke: #e8c5b9;

	stroke-width: 3px;

	stroke-linejoin: round;

}

.region-wob {

	fill: #bfe1d6;

	stroke: #bfe1d6;

	stroke-width: 3px;

	stroke-linejoin: round;

}

.region-sz {

	fill: #efb7a9;

	stroke: #efb7a9;

	stroke-width: 3px;

	stroke-linejoin: round;

}

.region-key {

	display: flex;

	flex-wrap: wrap;

	gap: 5px 10px;

	margin: 7px 0 10px;

	padding: 8px 10px;

	border: 1px solid #e5edf1;

	border-radius: 10px;

	background: #fff;

	color: #52636d;

	font-size: .7rem;

	line-height: 1.25;

}

.region-key-item {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	white-space: nowrap;

}

.region-key-item i {

	display: inline-block;

	width: 10px;

	height: 10px;

	border: 1px solid rgb(36 55 70 / 20%);

	border-radius: 2px;

}

.region-group-title {

	position: sticky;

	top: 0;

	z-index: 1;

	margin-top: 4px;

	padding: 7px 8px;

	border-radius: 6px;

	background: #edf5f9;

	color: #183b55;

	font-size: .72rem;

	font-weight: 800;

	letter-spacing: .03em;

}

@media(max-width:760px){

body {

	padding: 12px;

}

.abb-layout {

	grid-template-columns: 1fr;

	gap: 12px;

}

.desktop-list-card {

	display: none;

}

.mobile-list-card {

	display: block;

}

.abb-map-card {

	display: none;

}

.abb-sidebar {

	gap: 10px;

}

.town-list {

	grid-template-columns: repeat(2,minmax(0,1fr));

	max-height: 34svh;

}

.region-group-title {

	grid-column: 1/-1;

	position: static;

}

.abb-info-card {

	min-height: 0;

	max-height: 32svh;

	padding: 16px;

	overflow-y: auto;

	overscroll-behavior: contain;

}

.abb-info-card h2 {

	font-size: 1.08rem;

}

.abb-source {

	margin: 12px 2px 0;

	color: #5e6f79;

	font-size: .7rem;

	line-height: 1.45;

	text-align: left;

}

}

@media(prefers-reduced-motion:reduce){

*, *::before, *::after {

	transition-duration: .01ms!important;

}

}