/* ========= Bootmann Theme (Barlow, Navy/Brand) ========= */

/* --- Root & Farben --- */
:root {
	--brand: #0d6efd;
	--brand-700: #0b5ed7;
	--ink: #1e3d6d;
	--sky: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,.02));
	--bs-primary: var(--brand);
	--bs-link-color: var(--brand);
	--bs-link-hover-color: var(--brand-700);
}

.badge-navy {
	background-color: var(--ink) !important;
	color: #fff !important;
}

.bg-navy {
	background-color: var(--ink) !important;
}

/* ========= Tile Color Variants ========= */
.tile-blue {
	background: #e8f1ff;
	border-color: #91b9ff;
}

.tile-blue-dark {
	background: #d9e6ff;
	border-color: #6b9bdf;
}

.tile-ink {
	background: #dfe6f2;
	border-color: #7287a9;
}

.tile-green {
	background: #e6f7ec;
	border-color: #7acc9a;
}

.tile-orange {
	background: #fff3e3;
	border-color: #f3b36c;
}

.tile-sea {
	background: #e6f8f8;
	border-color: #7ad1c9;
}

.tile-purple {
	background: #f3e9ff;
	border-color: #b590e6;
}

	.tile-blue h2,
	.tile-blue-dark h2,
	.tile-ink h2,
	.tile-green h2,
	.tile-orange h2,
	.tile-sea h2,
	.tile-purple h2 {
		color: var(--ink);
		font-weight: 600;
	}

/* --- Typografie global --- */
html {
	font-size: 14px;
}

@media (min-width:768px) {
	html {
		font-size: 16px;
	}
}

body {
	font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
	margin: 0;
	background: #fff;
}

/* --- Headlines --- */
h1, h2, h3, h4, h5, h6 {
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	color: var(--ink);
}

/* Achtung: das macht ALLE p größer (auch Card-Footer etc.). Wenn zu groß: reduzieren. */
p {
	font-size: 1.15rem;
}

/* --- Fokusrahmen --- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
	box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--brand);
}

/* ========= Navigation ========= */
.navbar,
.hero {
	background: var(--sky);
}

.navbar {
	border-bottom: 1px solid rgba(13,110,253,.15);
}

	.navbar-brand,
	.navbar .nav-link {
		color: var(--ink) !important;
		transition: color .2s, font-weight .15s;
		font-weight: 500;
	}

		.navbar .nav-link:hover {
			color: var(--brand-700) !important;
		}

		.navbar .nav-link.active {
			color: var(--brand-700) !important;
			font-weight: 600;
		}

		.navbar-brand img {
			height: 40px;
			width: auto;
			filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
		}

/* ========= Hero ========= */
.hero {
	padding: 1rem 0 .5rem;
}

@media (min-width:992px) {
	.hero {
		padding: 2.5rem 0 1.5rem;
	}
}

/* ========= Karten & Elemente ========= */
.service-card,
.stack-tile,
.leitbild {
	border: 1px solid rgba(13,110,253,.15);
	border-radius: .75rem;
	transition: .2s;
}

	.service-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 .5rem 1.25rem rgba(13,110,253,.15);
	}

.icon-round {
	width: 3.25rem;
	height: 3.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e7f1ff;
	color: var(--brand-700);
	font-size: 1.4rem;
}

.leitbild {
	border-left: .35rem solid var(--brand);
	background: rgba(13,110,253,.03);
	box-shadow: 0 .25rem .75rem rgba(13,110,253,.05);
}

	.leitbild:hover {
		background: rgba(13,110,253,.06);
		box-shadow: 0 .5rem 1.25rem rgba(13,110,253,.08);
	}

/* ========= Logos ========= */
.logo {
	max-height: 50px;
	object-fit: contain;
	width: auto;
}

/* ========= Buttons ========= */
.btn-primary {
	background: var(--ink) !important;
	border-color: var(--ink) !important;
	color: #fff !important;
}

	.btn-primary:hover,
	.btn-primary:focus {
		background: var(--brand-700) !important;
		border-color: var(--brand-700) !important;
	}

.btn-outline-primary {
	color: var(--ink) !important;
	border-color: var(--ink) !important;
}

	.btn-outline-primary:hover,
	.btn-outline-primary:focus {
		background: var(--ink) !important;
		border-color: var(--ink) !important;
		color: #fff !important;
	}

/* ========= Badges ========= */
.badge-pill {
	border-radius: 100rem;
	padding: .5rem .9rem;
	background: #e7f1ff;
	color: var(--brand-700);
	font-weight: 600;
	font-size: .9rem;
}

.badge-brand {
	background: var(--ink) !important;
	color: #fff !important;
	font-weight: 600;
	padding: .45rem .75rem;
	border-radius: 50rem;
	font-size: .9rem;
	letter-spacing: .2px;
}

	.badge-brand:hover {
		background: var(--brand-700) !important;
	}

/* ========= Wrap Image ========= */
.wrap-img {
	float: left;
	width: 220px;
	height: auto;
	margin: 0 1.25rem 1rem 0;
	shape-outside: inset(0 round .6rem);
	shape-margin: .4rem;
	border-radius: .6rem;
}

@media (max-width:767.98px) {
	.wrap-img {
		float: none;
		display: block;
		margin: 0 auto 1rem;
		shape-outside: none;
	}
}

/* ========= Stack Tiles ========= */
.stack-tile {
	border: 2px solid var(--tile, #0d6efd);
	background: var(--tile-bg, rgba(13,110,253,.06));
	border-radius: .75rem;
	box-shadow: 0 2px 6px rgba(0,0,0,.04);
	padding: 1.25rem;
}

@media (min-width:768px) {
	.stack-tile {
		padding: 2rem;
	}
}

@media (min-width:1200px) {
	.stack-tile {
		padding: 1.25rem 1.5rem;
	}
}

.stack-tile .tile-head {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: .5rem;
}

	.stack-tile .tile-head .icon {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--tile, #0d6efd);
		background: transparent !important;
		border: none;
	}

	.stack-tile .tile-head.h4 {
		letter-spacing: .15px;
	}

/* Checkliste */
.list-checked li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: .45rem;
}

	.list-checked li::before {
		content: "✓";
		position: absolute;
		left: 0;
		top: .05rem;
		font-weight: 700;
		color: var(--tile, var(--bs-primary));
		opacity: .85;
	}

/* Farbvarianten */
.tile-yellow {
	--tile: #d4a000;
	--tile-bg: rgba(255,244,200,.45);
	border-color: rgba(212,160,0,.35);
}

.tile-blue {
	--tile: #2f68c1;
	--tile-bg: rgba(205,230,255,.45);
	border-color: rgba(47,104,193,.35);
}

.tile-blue-dark {
	--tile: #29539b;
	--tile-bg: rgba(185,212,255,.35);
	border-color: rgba(41,83,155,.35);
}

.tile-ink {
	--tile: #1e3d6d;
	--tile-bg: rgba(223,230,242,.55);
	border-color: rgba(30,61,109,.35);
}

.tile-green {
	--tile: #2e8b57;
	--tile-bg: rgba(210,243,225,.45);
	border-color: rgba(46,139,87,.35);
}

.tile-orange {
	--tile: #c56a1a;
	--tile-bg: rgba(255,225,200,.45);
	border-color: rgba(197,106,26,.35);
}

.tile-purple {
	--tile: #6f42c1;
	--tile-bg: rgba(230,218,255,.45);
	border-color: rgba(111,66,193,.35);
}

/* ========= Cards / Images ========= */
.card-img-top {
	height: 240px;
	object-fit: cover;
}

.tile-img {
	height: 200px;
	width: 100%;
	object-fit: contain;
	padding: 5px;
	background-color: #fff;
}

.responsive-img {
	max-width: 100%;
	height: auto;
}

/* Lightbox */
.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.8);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1050;
}

	.lightbox img {
		max-width: 90%;
		max-height: 90%;
	}

	.lightbox:target {
		display: flex;
	}

/* Width helpers */
.w-80 {
	width: 80% !important;
}

.w-90 {
	width: 90% !important;
}

/* Height helpers (FIX: Klassenpunkt + konsistent) */
.max-h-300 {
	max-height: 300px;
}

.max-h-400 {
	max-height: 400px;
}

.max-h-500 {
	max-height: 500px;
}

/* Dotted link */
.link-dotted {
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	padding-bottom: 1px;
}

@media (min-width:768px) {
	.date-box {
		min-width: 120px;
	}
}

/* ========= Footer ========= */
footer {
	background: #fff;
	padding: .35rem 0;
	font-size: .8rem;
	line-height: 1.15;
}

	footer .container {
		padding-top: 0;
		padding-bottom: 0;
		line-height: 1.1;
		min-height: unset;
	}

	footer a {
		text-decoration: none;
		border-bottom: 1px dotted currentColor;
		padding-bottom: 1px;
	}

	footer p {
		font-size: 1rem;
		line-height: 1.1;
		margin: 0;
	}

/* Footer Links – clean, ohne Unterstrich */
.footer-link {
	color: var(--ink);
	text-decoration: none;
	font-weight: 300;
	transition: color .2s ease;
	position: relative;
}

	.footer-link:hover,
	.footer-link:focus {
		color: var(--brand-700);
		text-decoration: none;
	}

/* Punkttrenner zwischen Links (nur wenn du footer-nav benutzt) */
.footer-nav .footer-link + .footer-link::before {
	content: "·";
	margin: 0 .45rem 0 .25rem;
	color: rgba(0,0,0,.35);
	font-weight: 300;
}

.footer-link.is-active {
	color: var(--brand);
	font-weight: 400;
}

/* ========= Dividers ========= */
.nav-divider {
	width: 1px;
	height: 24px;
	background-color: rgba(0,0,0,.25);
}

.dropdown-divider {
	border-top: 1px solid rgba(0,0,0,.15);
}

/* ========= Dropdown: Desktop normal, Mobile wie Navbar ========= */
/* (Desktop Dropdown NICHT anfassen) */

/* NUR im mobilen Collapse (unter navbar-expand-sm -> <576px) */
@media (max-width:575.98px) {
	.navbar-collapse .dropdown-menu {
		position: static !important;
		float: none;
		width: 100%;
		margin: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
	}

		.navbar-collapse .dropdown-menu .dropdown-item {
			padding: .5rem 1rem;
			color: #212529;
		}

			.navbar-collapse .dropdown-menu .dropdown-item:hover {
				background: transparent;
				text-decoration: underline;
			}
}

/* ========= Utilities ========= */
.img-200 {
	width: 200px;
	height: 200px;
	object-fit: cover;
}

/* Mandatsträger-Foto (feste Breite, nicht verzerrt) */
.mandat-img {
	width: 200px;
	height: auto;
	border-radius: 12px;
	display: inline-block;
}
footer, .footer {
	position: static !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	width: auto !important;
	z-index: auto !important;
}