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

/* =====================================================
   Root & Bootstrap Mapping
===================================================== */
: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);
}

/* =====================================================
   Global Typography
===================================================== */
html {
	font-size: 14px;
}

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

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

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

p {
	font-size: 1.15rem;
}

/* =====================================================
   Focus States
===================================================== */
.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);
}

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

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

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

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

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

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

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

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

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

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

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

/* =====================================================
   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;
		font-weight: 500;
		transition: color .2s ease, font-weight .15s ease;
	}

		.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: 1rem 0 0.5rem;
	}
}

/* =====================================================
   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: var(--brand) !important;
	font-weight: 600;
	padding: .45rem .75rem;
	border-radius: 50rem;
	font-size: .9rem;
	letter-spacing: .2px;
}

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

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

	.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);
	}

/* Stack tiles */
.stack-tile {
	padding: 1.25rem;
	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);
}

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

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

.stack-tile h2 {
	color: var(--ink);
	font-weight: 600;
}

.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;
	}

/* Tile color variants */
.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-sea {
	--tile: #2b9a9a;
	--tile-bg: rgba(230, 248, 248, .55);
	border-color: rgba(43, 154, 154, .35);
}

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

/* Checklist */
.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;
	}

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

.card-img-top {
	height: 240px;
	object-fit: cover;
}

.tile {
	display: flex;
	justify-content: center;
}

.tile-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 200px;
	min-height: 200px;
	border-radius: .75rem;
	object-fit: cover;
}

.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;
	}
}

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

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

	.lightbox:target {
		display: flex;
	}

/* =====================================================
   Article Layout
===================================================== */
.author-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #dee2e6;
}

/* =====================================================
   ARTICLE LAYOUT – ruhig, hell, Bootmann-Brand
===================================================== */
.article-body {
	font-size: 1.08rem;
	line-height: 1.8;
	color: var(--ink);
	background: #fff;
}

.article-section {
	margin-bottom: 1px;
	padding: 1px;
	background: transparent;
	border: none;
	border-bottom: 0px solid rgba(30, 61, 109, .16);
	box-shadow: none;
}

	.article-section h2 {
		font-size: 1.75rem;
		font-weight: 700;
		color: var(--ink);
		margin-bottom: 1.25rem;
		padding-bottom: .5rem;
		border-bottom: 3px solid var(--brand);
	}

	.article-section p {
		margin-bottom: 1.15rem;
	}

.article-section-dark {
	background: transparent;
	color: var(--ink);
}

	.article-section-dark h2 {
		border-bottom-color: var(--brand);
	}

.article-section-soft {
	background: rgba(13, 110, 253, .045);
	border-left: 5px solid var(--brand);
	padding: 1.75rem;
	border-radius: .75rem;
}
.article-hero {
	padding-top: 1rem;
}

.callout,
.info-box {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background: rgba(13, 110, 253, .06);
	border-left: 5px solid var(--brand);
	border-radius: .35rem;
	font-weight: 600;
	color: var(--ink);
}

.article-section-dark .callout {
	background: rgba(13, 110, 253, .06);
	border-left-color: var(--brand);
	color: var(--ink);
}

blockquote {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 5px solid var(--brand);
	background: #f8fbff;
	font-size: 1.12rem;
	font-style: normal;
	font-weight: 600;
	color: var(--ink);
}

.article-section-dark blockquote {
	border-left-color: var(--brand);
	background: #f8fbff;
	color: var(--ink);
}

.lead-statement {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ink);
	margin: 1.5rem 0;
}

.conclusion-box {
	background: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,.025));
	border: 1px solid rgba(13,110,253,.25);
	border-left: 6px solid var(--brand);
	border-radius: .9rem;
	padding: 2rem;
}

@media (max-width: 767.98px) {
	.article-section {
		margin-bottom: 2rem;
		padding-bottom: 1.5rem;
	}

	.article-section-soft,
	.conclusion-box {
		padding: 1.25rem;
	}

	.article-body {
		font-size: 1rem;
		line-height: 1.7;
	}

	.article-section h2 {
		font-size: 1.45rem;
	}
}


.info-box {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border-radius: .75rem;
	background: #f1f3f5;
	font-weight: 500;
}

.lead-statement {
	margin: 1.5rem 0;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.45;
}

.quote-box {
	border-left: 6px solid #212529;
	background: #f8f9fa;
	padding: 1.5rem 1.75rem;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.55;
}

.conclusion-box {
	background: #f8f9fa;
	border: 2px solid #212529;
}

@media (min-width: 768px) {
	.article-body article {
		text-align: justify;
	}

	.article-body h2,
	.article-body .quote-box,
	.article-body .alert,
	.article-body blockquote,
	.article-body .callout,
	.article-body .info-box {
		text-align: left;
	}
}

@media (max-width: 767.98px) {
	.article-body {
		font-size: 1.02rem;
		line-height: 1.7;
	}

	.article-section {
		padding: 1.25rem;
		border-radius: .75rem;
	}

	.lead-statement {
		font-size: 1.15rem;
	}
}

/* =====================================================
   Footer
===================================================== */
.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;
	}

.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;
}