/* =========================================================================
   L-Training — site.css
   Eigenständiges Stylesheet für das freigegebene "Kombination"-Design
   (Editorial-Serif-Layout + gedecktes Stahlblau als Akzent). Ersetzt das
   alte Carrd-main.css vollständig — keine Überschreibungen mehr nötig.
   ========================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: #FFFFFF;
	color: #14181F;
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:root {
	--ink: #14181F;
	--muted: #4A5265;
	--accent: #3E5C76;
	--accent-dark: #2C4053;
	--panel: #F5F6FA;
	--line: #ECEEF2;
	--serif: Georgia, 'Times New Roman', serif;
	--sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--content-width: 1180px;
}

.wrap {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Navigation ---------- */
header.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--line);
}
nav.site-nav {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
nav.site-nav .brand {
	font-family: var(--serif);
	font-size: 1.2rem;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: 0.01em;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
nav.site-nav .brand img { width: 30px; height: 30px; border-radius: 6px; }
nav.site-nav ul.menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.9rem;
	margin: 0;
	padding: 0;
}
nav.site-nav ul.menu li a {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: color 0.15s ease;
}
nav.site-nav ul.menu li a:hover { color: var(--accent); }
nav.site-nav ul.menu li.lang-switch { display: flex; gap: 0.35rem; margin-left: 0.25rem; }
nav.site-nav ul.menu li.lang-switch a {
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	background: #9AA1AC;
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
	letter-spacing: 0.02em;
}
nav.site-nav ul.menu li.lang-switch a.active { background: var(--accent); }

.hamburger { display: none; cursor: pointer; background: none; border: 0; padding: 0.4rem; }
.hamburger .bar { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }
#menu-toggle { display: none; }

@media (max-width: 860px) {
	.hamburger { display: block; }
	nav.site-nav ul.menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		display: none;
		padding: 0.5rem 0;
	}
	#menu-toggle:checked ~ ul.menu { display: flex; }
	nav.site-nav ul.menu li { width: 100%; }
	nav.site-nav ul.menu li a { display: block; padding: 0.9rem clamp(1.25rem, 4vw, 3rem); width: 100%; }
	nav.site-nav ul.menu li.lang-switch { padding: 0.9rem clamp(1.25rem, 4vw, 3rem); margin-left: 0; }
}

/* ---------- Section rhythm ---------- */
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
/* Jeder Menüpunkt soll auf einen Abschnitt springen, der den Viewport
   ausfuellt (kein Vorgriff auf den naechsten Abschnitt) statt auf einen
   kurzen Block, der schon den Anfang des naechsten zeigt. Ist ein
   Abschnitt von Natur aus laenger als der Viewport (z. B. xBrix), hat das
   min-height dort keine sichtbare Wirkung mehr - er wird einfach so hoch
   wie sein Inhalt. */
section#home,
section#about,
section#services,
section#operation,
section.xbrix,
section#contact,
section#impressum {
	scroll-margin-top: 67px;
	min-height: calc(100vh - 67px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 0.9rem;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; }
p { margin: 0; }

/* ---------- Hero ---------- */
section.hero { background: var(--panel); border-radius: 0 0 32px 32px; padding-top: clamp(3rem, 6vw, 5rem); }
.hero .wrap {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}
.hero h1 {
	font-size: clamp(2.2rem, 4.4vw, 3.3rem);
	line-height: 1.15;
	margin-bottom: 1.1rem;
}
.hero p.tagline {
	font-family: var(--serif);
	font-size: 1.1rem;
	color: var(--muted);
	max-width: 34rem;
	margin-bottom: 1.7rem;
}
.cta-row { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.btn-primary {
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	padding: 0.85rem 1.8rem;
	border-radius: 4px;
	font-size: 0.94rem;
	font-weight: 600;
	transition: background 0.2s ease;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	font-size: 0.94rem;
	font-weight: 600;
}
.hero-photo {
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Generic two-column section (About / Operation) ---------- */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media img {
	width: 100%;
	border-radius: 8px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.split h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1.1rem; }
.split .body-text { color: var(--muted); font-size: 1.02rem; }
.badge-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.badge-row img { width: 54px; height: auto; }
.badge-row span { font-size: 0.85rem; color: var(--muted); }

/* ---------- Services cards ---------- */
section.services { background: #fff; }
.section-head { max-width: 42rem; margin: 0 0 clamp(2.2rem, 4vw, 3rem); }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.75rem, 3vw, 2.75rem);
}
.card { border-top: 2px solid var(--accent); padding-top: 1.4rem; }
.card h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.card p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Operation principles list ---------- */
.principle-list { display: grid; gap: 1.5rem; }
.principle {
	border-top: 2px solid var(--accent);
	padding-top: 1rem;
}
.principle h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.principle p { color: var(--muted); font-size: 0.96rem; }

/* ---------- xBrix ---------- */
section.xbrix { background: var(--panel); border-radius: 32px; margin: 0 clamp(1.25rem, 4vw, 3rem); padding: clamp(3rem, 6vw, 5rem) 0; }
section.xbrix .wrap.split { padding: 0 clamp(1.25rem, 4vw, 3rem); }
.xbrix-body p { color: var(--muted); font-size: 1rem; margin-bottom: 1rem; }
.xbrix-benefits { margin-top: 1.5rem; }
.xbrix-benefits strong { display: block; margin-bottom: 0.6rem; color: var(--ink); }
.xbrix-benefits p.benefits-lines { color: var(--muted); font-size: 0.96rem; line-height: 1.85; }
.xbrix-closing { margin-top: 1.5rem; color: var(--muted); font-size: 0.96rem; }
.xbrix-showcase { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-radius: 8px; overflow: hidden; max-height: 420px; }
.xbrix-showcase img { width: 100%; object-fit: cover; }

/* ---------- Contact ---------- */
/* eigenes, knapperes Innenabstandsmaß statt der generischen section-Regel:
   das Kontaktformular hat naturgemäß viele Felder und würde mit dem vollen
   Section-Padding auf vielen Bildschirmen höher als der Viewport, wodurch
   der Senden-Button beim Sprung über das Menü unnötig unter die Falz rutscht. */
section.contact { background: var(--panel); border-radius: 32px; margin: 0 clamp(1.25rem, 4vw, 3rem); padding: clamp(1.75rem, 3vw, 2.5rem) 0; }
.contact-col { max-width: 36rem; margin: 0 auto; text-align: center; }
.contact-col .eyebrow { margin-bottom: 0.6rem; }
.contact-col form.contact-form { text-align: left; margin: 0 auto; }
.contact-col .eyebrow, section.contact h2, section.contact p.subheading { text-align: center; }
section.contact h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 0.3rem; }
section.contact p.subheading { color: var(--muted); font-family: var(--serif); font-size: 1.05rem; margin-bottom: 1rem; }

form.contact-form { display: grid; gap: 0.65rem; max-width: 34rem; }
form.contact-form input[type="text"],
form.contact-form input[type="email"],
form.contact-form input[type="tel"],
form.contact-form textarea {
	width: 100%;
	font-family: var(--sans);
	font-size: 1rem;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #fff;
	color: var(--ink);
}
form.contact-form input:focus,
form.contact-form textarea:focus {
	outline: none;
	border-color: var(--accent);
}
form.contact-form textarea { min-height: 6rem; resize: vertical; }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--muted); }
.checkbox-row input { margin-top: 0.2rem; }
.contact-form .actions { margin-top: 0.25rem; }
.contact-form button[type="submit"] {
	background: var(--accent);
	color: #fff;
	border: 0;
	padding: 0.85rem 2rem;
	border-radius: 4px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}
.contact-form button[type="submit"]:hover { background: var(--accent-dark); }
.form-status { margin-top: 0.4rem; font-size: 0.9em; min-height: 1.2em; display: block; }
.form-status.success { color: #2e7d32; }
.form-status.error { color: #c62828; }

/* ---------- Impressum / Footer ---------- */
section.impressum { background: var(--panel); }
section.impressum .wrap { max-width: 46rem; }
section.impressum p { color: var(--muted); font-size: 0.85rem; line-height: 1.7; }
footer.site-footer { padding: 2rem 0; text-align: center; }
footer.site-footer p { color: #9AA1AC; font-size: 0.8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.hero .wrap, .split, section.xbrix .wrap.split, section.contact .wrap.split {
		grid-template-columns: 1fr;
	}
	.split.reverse .split-media { order: 0; }
	.hero-photo { max-width: 20rem; margin: 0 auto; }
	.cards { grid-template-columns: 1fr; }
	section.xbrix { margin: 0 1rem; border-radius: 20px; }
}