/* ========= 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));
	/* Bootstrap-Mapper */
	--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;
}

	/* Optional: dunklere Überschriftfarbe */
	.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);
	background: var(--sky);
	margin: 0;
}

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

p {
	font-size: 1.15rem; /* ca. 18.4px */
}

/* --- 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,
footer {
	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-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-tile {
	border: 1px solid rgba(13,110,253,.15);
	border-radius: .75rem;
	padding: 1.25rem; /* mobil */
}

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

/* ========= Footer ========= */

/* 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 */
.footer-nav .footer-link + .footer-link::before {
	content: "·";
	margin: 0 .45rem 0 .25rem;
	color: rgba(0,0,0,.35);
	font-weight: 300;
}

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

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

	/* Titelzeile mit Icon */
	.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;
		}

		/* H2-Typo ruhiger */
		.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);
}

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