/* ----------------------
		Design-Tokens
---------------------- */
:root {
	--bg: #f7f5ef;
	--surface: #ffffff;
	--text: #1f2937;
	--muted: #6b7280;
	--accent: #ffe44a;
	--accent-ink: #1f2937;
	--ring: rgba(0, 0, 0, .08);
	--ok: #227a3b;
	--positive: #689F38;
	--warn: #b16100;
	--radius: 16px;
	--shadow: 0 10px 30px rgba(0, 0, 0, .08);
	--container: 1120px;
	--space: 12px;
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	color: var(--muted);
}
.container {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
}

.section {
	padding: 32px 0;
}

.stack {
	display: grid;
	gap: 24px;
}

.stack.vita {
	gap: 12px;
}

.stack.vita p {
	margin: 0;
}

.no-margin {
	margin: 0 !important;
}


/* Header / Navigation */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	background: var(--accent);
	color: var(--accent-ink);
	padding: .5rem .75rem;
	border-radius: 999px;
	outline: none;
}

header.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: saturate(1.2) blur(6px);
	background: color-mix(in oklab, var(--bg) 80%, white 20%/ 75%);
	border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: inherit;
	font-weight: 700;
	letter-spacing: .2px;
}

.brand .logo {
	display: grid;
	place-items: center;

	/* keep it small; adjust as you like */
	width: 60px;								/* ~header logo size */
	aspect-ratio: 1024 / 626;	 /* keep same ratio as your image */

	/*border-radius: 12px;*/
	/*box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);*/

	/* put the logo ON TOP, gradient behind */
	background-image:
	url("img/EBMAS-Logo.png");/*,
	radial-gradient(circle at 30% 30%, var(--accent) 0 60%, #ffd000 61% 100%);*/
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: contain, 100% 100%;
}

.nav ul {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	align-items: center;
}

.nav a {
	text-decoration: none;
	color: var(--text);
	font-weight: 600;
	padding: 8px 10px;
	border-radius: 10px;
}

.nav a:hover {
	background: rgba(0, 0, 0, .04);
}

/* Dropdown */
.nav-list { display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.has-sub { position:relative; }
.nav-parent { cursor:pointer; font-weight:700; border: 0; background: transparent;}
.has-sub .sub {
	position:absolute; top:100%; left:0;
	display:none; min-width:220px; padding:8px;
	background:var(--surface); border:1px solid rgba(0,0,0,.06);
	border-radius:12px; box-shadow:var(--shadow); z-index:50;
}
.has-sub .sub a { display:block; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text); }
.has-sub .sub a:hover { background:rgba(0,0,0,.04); }

/* Desktop: Hover/Fokus öffnet */
@media (hover:hover) and (pointer:fine){
	.has-sub:hover .sub, .has-sub:focus-within .sub { display:block; }
}

/* Mobile: per Klasse öffnen */
.has-sub.open .sub { display:block; }

.cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 999px;
	font-weight: 700;
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: var(--shadow);
	border: 1px solid rgba(0, 0, 0, .06);
}

.cta:hover {
	transform: translateY(-1px);
	/*background-color: var(--ok) !important;*/
}

.cta svg {
	width: 20px;
	height: 20px;
}

.nav-toggle {
	display: none;
	border: 0;
	background: transparent;
	padding: .5rem;
	border-radius: 10px;
	width: 50px;
}

.nav-toggle:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (max-width: 880px) {
	.nav ul {
		display: none;
		position: absolute;
		inset: 60px 0 auto 0;
		padding: 1rem;
		background: var(--surface);
		box-shadow: var(--shadow);
		border-radius: 16px;
		margin: 0 .75rem;
		flex-direction: column;
		gap: 8px;
	}

	.nav ul[data-open="true"] {
		display: flex;
	}

	.nav-toggle {
		display: inline-grid;
		place-items: center;
	}
}

#primary-nav a.is-active {
	background: color-mix(in oklab, var(--accent) 50%, transparent);
	border-radius: 10px;
	font-weight: 700;
}

@media (max-width: 880px) {
	#primary-nav a.is-active {
		background: color-mix(in oklab, var(--accent) 50%, transparent);
	}
}

/* Hero */
.hero {
	position: relative;
	overflow: clip;
	padding-top: 0px;
}

.hero-inner {
	display: grid;
	align-items: center;
	grid-template-columns: 1.1fr .9fr;
	gap: 32px;
	padding: 24px 0 24px;
}

.tag {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .2px;
	padding: 6px 10px;
	background: var(--surface);
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 999px;
}

.tag .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok), transparent 85%);
}

.hero h1 {
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1.1;
	margin: 10px 0 12px;
	letter-spacing: .2px;
}

.hero p.lead {
	color: var(--muted);
	font-size: clamp(1rem, 1.1vw, 1.125rem);
}

.hero-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

/*.-hero-visual {
	position: relative;
	/*width: 400px;*/								 /* your box width */
/*	aspect-ratio: 3 / 4;
	border-radius: calc(var(--radius) + 8px);
	box-shadow: var(--shadow);
	border: 1px solid rgba(0, 0, 0, .06);

	/* layer image on top of the gradient */
/*	background-image: url("img/sifu1.jpg"),
	radial-gradient(120% 120% at 100% 0,
		color-mix(in oklab, var(--accent) 25%, #fff 75%) 0 35%,
		color-mix(in oklab, #d6f2e3 50%, #fff 50%) 35% 70%,
		color-mix(in oklab, #e7dfc9 70%, #fff 30%) 70% 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: 100% auto, 100% 100%; /* image = full width; gradient fills box */
/*}

.-hero-visual::after {
	content: "";
	position: absolute;
	/*inset: 10% 8% 12% 8%;*/
	/*background: conic-gradient(from 180deg at 60% 40%, #fff8cc, var(--accent), #fff8cc, #fff);*/
/*	border-radius: calc(var(--radius) + 2px);
	mix-blend-mode: overlay;
	opacity: .35;
	filter: blur(12px);
}*/

.hero-visual{
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: calc(var(--radius) + 8px);
	box-shadow: var(--shadow);
	border: 1px solid rgba(0,0,0,.06);
	overflow: hidden;						 /* => sichtbarer Radius */
	align-self: start;						/* sitzt oben wie vorher */
	margin-top: 8px;							/* feiner Abstand nach oben – bei Bedarf anpassen */
	/* WICHTIG: alte background-image/-size/-repeat/-position hier entfernen */
}

/* Verlauf wie früher als untere Ebene */
.hero-visual__gradient{
	position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(120% 120% at 100% 0,
		color-mix(in oklab, var(--accent) 25%, #fff 75%) 0 35%,
		color-mix(in oklab, #d6f2e3 50%, #fff 50%) 35% 70%,
		color-mix(in oklab, #e7dfc9 70%, #fff 30%) 70% 100%);
}

/* Bild-Schicht */
.hero-visual__picture{ position: absolute; inset: 0; z-index: 1; }

/* Exakt wie vorher: Breite 100%, Höhe auto, mittig ausgerichtet */
.hero-visual__img{
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;								 /* keine Verzerrung */
	max-width: none;
	display: block;
}

/* dein früherer Overlay-/Glow-Effekt */
.hero-visual::after{
	content: "";
	position: absolute; inset: 0;
	border-radius: calc(var(--radius) + 2px);
	mix-blend-mode: overlay;
	opacity: .35;
	filter: blur(12px);
	pointer-events: none;
}

/* Mobile-Feintuning, falls du es vorher so hattest */
@media (max-width: 880px){
	.hero-visual{ width: 100%; margin-top: 12px; }
}

.hero-visual.coaching {
	aspect-ratio: 4 / 2;
}

.hero-visual.unsere-schule {
	aspect-ratio: 4 / 2;
	width: 100%;
}

.hero-visual.wing-tzun-logo {
	aspect-ratio: 720 / 456;
	width: 100%;
}

.hero-visual.latosa-logo {
	aspect-ratio: 720 / 456;
	width: 100%;
}

.hero-visual.schule-logo {
	aspect-ratio: 1536 / 1024;
	width: 100%;
}

.hero-visual.unsere-schule-kids {
	aspect-ratio: 800 / 551;
	width: 100%;
}

.hero-visual.unser-sifu {
	aspect-ratio: 1536 / 2048;
	width: 100%;
}


@media (max-width: 880px) {
	.programm-grid .meta {
		margin: 0;
	}
	.programm-grid .card {
		gap: 4px;
	}
	.container {
		/*width: 100%;*/
	}
	.hero-inner {
		grid-template-columns: 1fr;
		padding-top: 12px;
	}
	.hero-inner p {
		padding: 0;
		margin: 0;
	}

	.hero-visual {
		/*order: -1;*/
		margin: 0 auto;
		width: 60%;
	}
	.stack {
		gap: 0;
	}
	.hero-actions {
		padding-bottom: 24px;
	}
	.section {
		padding: 12px;
	}
}

/* Utilities */
.eyebrow {
	text-transform: uppercase;
	font-size: .8rem;
	letter-spacing: .16em;
	color: var(--muted);
	font-weight: 800;
}

.h2 {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.2;
	margin: 8px 0 6px;
}

.sub {
	color: var(--muted);
	margin: 0 0 22px;
}

.grid {
	display: grid;
	gap: 16px;
}

.grid.cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 960px) {

	.grid.cols-4,
	.grid.cols-3,
	.grid.cols-2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.grid {
		grid-template-columns: 1fr;
	}
}

.card {
	background: var(--surface);
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: var(--shadow);
	display: grid;
	align-content: space-between;
	align-items: start;
	gap:14px;
}

.card.trainer {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:14px;
	align-content:space-between;
}

.card.faq {
	gap:0;
	align-content: initial;
}

.stack.faq {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	align-items:start;
}

.faq p {
	margin-bottom: 0;
}

.card h3 {
	margin: 6px 0 4px;
	font-size: 1.1rem;
}

.stack.more {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	align-content:space-between;
}

@media (max-width: 640px) {
	.card.trainer {
		display: block;
	}
	
	.stack.faq {
		display:block;
	}
	
	.card.faq {
		margin-bottom: 14px;
	}

	.stack.more {
		grid-template-columns: 1fr;
	}
}

.meta {
	color: var(--muted);
	font-size: .95rem;
}

.chip {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: #fffdf3;
	border: 1px solid #ffeaa0;
	color: #5a4a00;
	font-weight: 700;
}

.chip svg {
	width: 20px;
	height: 20px;
}
.chip a {
	display: inline-flex;
		align-items: center;
	justify-content:space-between;
		gap: .5rem;
	width: 100%;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 10px 14px;
	font-weight: 700;
	border-radius: 12px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, .06);
}

.btn-primary {
	background: var(--accent);
	color: var(--accent-ink);
}

.btn-ghost {
	background: transparent;
	color: var(--text);
}

.btn-ghost:hover {
	background: rgba(0, 0, 0, .04);
}

.accent-bar {
	height: 6px;
	width: 64px;
	background: linear-gradient(90deg, #fff2a6, var(--accent));
	border-radius: 999px;
}

/* Zeiten (Filter) */
.filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 12px 0;
}

.filter button {
	border-radius: 999px;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, .06);
	background: var(--surface);
	cursor: pointer;
}

.filter button[data-active="true"] {
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: var(--shadow);
}

.schedule {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

@media (max-width: 960px) {
	.schedule {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.schedule {
		grid-template-columns: 1fr;
	}
	.schedule .meta {
		margin: 2px;
	}
}

/* Trainer */
.avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(180deg, #fff 20%, #f2efe6 100%);
	border: 1px solid rgba(0, 0, 0, .06);
}
.avatar.sifu-avatar {
	aspect-ratio: 1536 / 2048;	 /* keep same ratio as your image */

	/*border-radius: 12px;*/
	/*box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);*/

	/* put the logo ON TOP, gradient behind */
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, 100% 100%;
	background-image: url("img/sifu-oliver-ebmas-3-4.png");
}

.avatar.sihing-patrick-avatar {
	aspect-ratio: 1536 / 2048;	 /* keep same ratio as your image */

	/*border-radius: 12px;*/
	/*box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);*/

	/* put the logo ON TOP, gradient behind */
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, 100% 100%;
	background-image: url("img/dai-sihing-patrick-ebmas-3-4.png");
}

.avatar.sihing-lorenzo-avatar {
	aspect-ratio: 1536 / 2048;	 /* keep same ratio as your image */

	/*border-radius: 12px;*/
	/*box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);*/

	/* put the logo ON TOP, gradient behind */
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, 100% 100%;
	background-image: url("img/sihing-lorenzo-ebmas-3-4.png");
}

/* Preise */
.price {
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: .2px;
	margin: 0;
}

/* Kontakt */
form {
	display: grid;
	gap: 12px;
}

label {
	font-weight: 400;
}

input,
select,
textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, .12);
	background: var(--surface);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.form-row {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
	.form-row {
		grid-template-columns: 1fr;
	}
}

.toast {
	position: fixed;
	inset: auto 1rem 1rem auto;
	padding: 12px 14px;
	background: #fcf6cf;
	color: #4a3c00;
	border: 1px solid #ffeaa0;
	border-radius: 12px;
	box-shadow: var(--shadow);
	display: none;
}

/* Footer */
footer {
	padding: 48px 0;
	color: var(--muted);
	border-top: 1px solid rgba(0, 0, 0, .06);
}

/* Reveal on Scroll */
[data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition: .6s ease;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}


.gallery{
	column-gap: 12px;
	columns: 1;
	padding: 0;
}
@media (min-width:700px){ .gallery{ columns: 2; } }
@media (min-width:1000px){ .gallery{ columns: 3; } }
@media (min-width:1300px){ .gallery{ columns: 4; } }

.tile{
	break-inside: avoid;
	margin: 0 0 12px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: var(--surface);
	overflow: hidden;
}

/* Link als Ratio-Wrapper, Bild füllt die Kachel */
.tile > a{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;				/* Standard: Quadrat */
}
.tile.tile--poster > a{ aspect-ratio: 3 / 4; }
.tile.tile--wide	 > a{ aspect-ratio: 16 / 9; }

/* Bild vollflächig, kein Abstand mehr zwischen Bild & Caption */
.tile img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.tile:hover img{ transform: scale(1.03); }
	
/* Caption als Overlay (verhindert Lücken unter dem Bild, v. a. mobil) */
.tile .caption{
	position: absolute;
	left: 8px;
	bottom: 8px;
	margin: 0;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.9);
	color: var(--text);
	font-weight: 700;
	font-size: .9rem;
	backdrop-filter: blur(2px) saturate(1.1);
}

/* „Breite“ Kachel über volle Zeile, ohne Grid-Gaps */
@media (min-width:900px){
	.tile--wide{ column-span: all; }	/* nimmt volle Breite ein */
}

/* ---- Lightbox ---- */
.lightbox[hidden] { display: none; }
.lightbox {
	position: fixed; inset: 0;
	/*display: grid;*/
	place-items: center;
	padding: 24px;
	background: rgba(0,0,0,.6);
	z-index: 1000;
	align-content: space-around;
}
.lightbox__img {
	max-width: min(90vw, 1200px);
	max-height: 85vh;
	border-radius: calc(var(--radius) + 4px);
	box-shadow: var(--shadow);
	background: #000;
	display: block;
}
.lightbox__caption {
	margin-top: 10px;
	color: #fff;
	text-align: center;
	font-weight: 600;
}
.lightbox__close {
	position: absolute; top: 12px; right: 12px;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.3);
	background: rgba(0,0,0,.35);
	color: #fff; font-size: 22px; line-height: 1;
	cursor: pointer;
}
.lightbox__close:hover { background: rgba(0,0,0,.5); }


/* ---- Rezensionen ---- */
.stars {
	color:#f4b400;
	font-size:1.1rem;
	text-align: center;
}

.rezension-text {
	margin: 0;
	text-align: center;
	font-style: italic;
	color: var(--muted);
}
.rezension-name {
	margin: 0;
	text-align: center;
	font-weight: 600;
}



/* ---- Tabellen ---- */
/* --- Accessible helper --- */
.sr-only{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- Table shell --- */
.table-wrap{
	overflow:auto;											 /* mobil scrollen */
	background: var(--surface);
	border: 1px solid rgba(0,0,0,.06);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* --- Table --- */
.data-table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	min-width: 680px;										/* sorgt für horizontales Scrollen auf kleineren Screens */
	color: var(--text);
	font-size: 0.975rem;
}

.data-table thead th{
	position: sticky; top: 0;
	background: color-mix(in oklab, var(--bg) 35%, #fff 65%);
	backdrop-filter: saturate(1.1);
	z-index: 2;
}

.data-table th,
.data-table td{
	padding: 12px 14px;
	border-bottom: 1px solid rgba(0,0,0,.06);
	text-align: left;
	vertical-align: top;
}

/* Erste Spalte sticky – verbessert Lesbarkeit bei Scroll */
.data-table thead th:first-child,
.data-table tbody th[scope="row"]{
	position: sticky; left: 0;
	background: var(--surface);
	z-index: 3;													 /* über dem Header-Layer */
	min-width: 180px;
	font-weight: 800;
}

/* Zebra + Hover */
.data-table tbody tr:nth-child(odd) td{ background: #fff; }
.data-table tbody tr:hover td,
.data-table tbody tr:hover th[scope="row"]{
	background: rgba(0,0,0,.03);
}

/* Letzte Zeile: keine doppelte Linie durch Radius */
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td{ border-bottom: 0; }


#mission .card, #escrima .card, #wing-tzun .card {
	display: block;
}

.column-2 {
	columns: 2;
	column-gap: 12px;
}
.column-2 .card {
	margin-bottom: 12px;
}

@media (max-width: 880px) {
	.column-2 {
		columns: 1;
		column-gap: 12px;
	}
}

.column2 {
	grid-column: span 2;
}

@media (max-width: 880px) {
	.column2 {
		grid-column: span 1;
	}
}


/* === Hero Foto === */
.hero-photo{
	position: relative;
	border-radius: var(--radius, 16px);
	overflow: hidden;
	box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08));
	aspect-ratio: 16 / 9;								 /* Bildformat anpassen, falls nötig */
}

.hero-photo__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* dunkles Overlay für bessere Lesbarkeit */
.hero-photo__overlay{
	position: absolute; inset: 0;
	background:
		linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}

/* Inhalt mittig, wie im Screenshot */
.hero-photo__content{
	position: absolute; inset: 0;
	display: grid;
	place-items: center;
	gap: 10px;
	padding: clamp(12px, 3vw, 24px);
	text-align: center;
	align-content: space-evenly;
}

/* Gelbe „Badges“ */
.hero-photo__title span,
.hero-photo__subtitle span{
	display: inline-block;
	background: var(--accent, #ffe44a);
	color: var(--accent-ink, #1f2937);
	padding: .5rem .9rem;
	border-radius: 8px;
	box-shadow: 0 2px 16px rgba(0,0,0,.15);
}

.hero-photo__title{
	margin: 0;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: .2px;
}
.hero-photo__subtitle{
	margin: 0;
	font-weight: 700;
	font-size: clamp(1rem, 2.2vw, 1.2rem);
}

/* Optional: etwas Seitenrand-Look wie im Screenshot */
.container .hero-photo{ border: 1px solid rgba(0,0,0,.06); }


/* ===== News Section (3 pro Reihe) ===== */
.news-grid{
	display:grid;
	gap:14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 12px;
}
@media (max-width: 960px){
	.news-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
	.news-grid{ grid-template-columns: 1fr; }
}

.news-card{
	background: var(--surface);
	border: 1px solid rgba(0,0,0,.06);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
	transition: transform .15s ease, box-shadow .2s ease;
}
.news-card:hover{ transform: translateY(-2px); }

.news-media{
	display:block;
	aspect-ratio: 16 / 9;
	background: #eee;
	overflow:hidden;
}
.news-media img{
	width:100%; height:100%;
	object-fit: cover;
	object-position: top;
	display:block;
	transition: transform .35s ease;
}
.news-card:hover .news-media img{ transform: scale(1.03); }

.news-content{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:14px;
	justify-content:space-between;
}

.news-meta{
	margin:0;
	color: var(--muted);
	font-size:.9rem;
}

.news-title{
	margin:0;
	font-size:1.15rem;
}
.news-title a{
	color:inherit; text-decoration:none;
}
.news-title a:hover{ text-decoration:underline; }

.news-excerpt{
	margin:0;
	color: var(--text);
	line-height:1.5;
	/* 3-Zeilen-Clamp (optional) */
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Button übernimmt deine vorhandenen .btn/.btn-ghost Styles */
.news-more{ align-self:flex-start; }

/* Footer Socials */
.footer-socials{
	list-style:none; margin:0; padding:0;
	display:flex; gap:12px; flex-wrap:wrap;
}

/* Icon-Buttons (Kreis), nutzen deine Design-Tokens */
.footer-socials .social-btn{
	display:grid; place-items:center;
	width:40px; height:40px;
	border-radius:50%;
	color:#fff;/* SVG-Farbe */
	text-decoration:none;
	border:1px solid rgba(0,0,0,.06);
	box-shadow: var(--shadow);
	transition: transform .15s ease, filter .2s ease;
}
.footer-socials .social-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.footer-socials .social-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Markenfarben/Hintergründe */
.footer-socials .social-btn.yt{ background:#ff0000; }
.footer-socials .social-btn.fb{ background:#1877F2; }
.footer-socials .social-btn.ig{
	background: radial-gradient(35% 45% at 30% 30%, #ffd776 0 30%, #f56040 40% 55%, #e1306c 65% 78%, #c13584 82% 90%, #833ab4 92% 100%);
}

/* Screenreader-only Text */
.sr-only{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== BLOG (Übersicht) ===== */
.blog .blog-header { margin-bottom: 16px; }

.post-feature { display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; margin-bottom:18px; }
.post-feature .post-media { border-radius: calc(var(--radius) + 6px); overflow:hidden; }
.post-feature .post-media img { width:100%; height:100%; display:block; aspect-ratio: 16/9; object-fit: cover; object-position: center top; }
.post-feature .post-content { display:grid; gap:8px; align-content:start; }

.posts .post-card { display:block; gap:0; padding:0; overflow:hidden; }
.post-card .post-media { aspect-ratio: 16/9; overflow:hidden; }
.post-card .post-media img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; }
.post-card .post-content { padding:14px; display:grid; gap:8px; }

.post-title { margin:0; line-height:1.25; }
.post-excerpt { margin:0; color: var(--muted); }

.post-meta { color: var(--muted); font-size:.95rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.post-meta .badge { background:#fffdf3; border:1px solid #ffeaa0; color:#5a4a00; padding:2px 8px; border-radius:999px; font-weight:700; font-size:.85rem; }
.dotsep::before { content:"·"; margin:0 .25rem; color:var(--muted); }

.post-tags { display:flex; gap:8px; flex-wrap:wrap; }
.post-tags a { text-decoration:none; padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff; font-weight:600; color:inherit; }
.post-tags a:hover { background: rgba(0,0,0,.04); }

.stretched { position: absolute; inset:0; z-index:1; }
.post-card, .post-feature { position: relative; }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; }
.pagination ol { list-style:none; display:flex; gap:6px; margin:0; padding:0; }
.pagination a { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:10px; border:1px solid rgba(0,0,0,.06); text-decoration:none; color:inherit; }
.pagination a:hover { background: rgba(0,0,0,.04); }
.pagination a.is-active { background: var(--accent); color: var(--accent-ink); font-weight:800; }
.pagination .page { padding:8px 12px; }

/* Responsiv */
@media (max-width: 960px){
	.post-feature { grid-template-columns: 1fr; }
}
@media (max-width: 640px){
	.posts.grid.cols-3 { grid-template-columns: 1fr; }
}

/* ===== BLOG (Einzelansicht) ===== */
.post .post-head { margin-bottom: 10px; }
.post-hero { margin: 0 0 14px; }
.post-hero img { width:100%; height:auto; display:block; border-radius: calc(var(--radius) + 6px); }
.post-hero .meta { text-align:center; color:var(--muted); margin-top:6px; }

.article-content { display:grid; gap:12px; }
.article-content h2, .article-content h3 { margin: 14px 0 4px; }
.article-content ul { padding-left: 1.2rem; margin:0; }
.article-content blockquote { margin: 0; padding: 12px 14px; border-left: 4px solid var(--accent); background:#fffdf3; border-radius: 8px; }

.post-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }

/* ==== BLOG ARTICLE ==== */
.post--article .container { width: min(100% - 2rem, 900px); }

.post--article .content {
	max-width: 72ch;					/* ~perfect reading width */
	margin-inline: auto;
	font-size: clamp(1rem, 0.3vw + 1rem, 1.1rem);
	line-height: 1.7;
}

.post--article .hero { margin-bottom: 14px; border-radius: calc(var(--radius) + 6px); overflow: hidden; }
.post--article .hero img { width: 100%; height: auto; display: block; object-fit: cover; object-position: center top; }

.post--article h2 { margin: 18px 0 8px; line-height: 1.2; }
.post--article h3 { margin: 14px 0 6px; }

.post--article p { margin: 0 0 .6em; }
.post--article figure { margin: 14px 0; }
.post--article figcaption { color: var(--muted); text-align: center; font-size: .95rem; margin-top: 0; }

.post--article blockquote {
	margin: 12px 0;
	padding: 12px 14px;
	border-left: 4px solid var(--accent);
	background: #fffdf3;
	border-radius: 10px;
}

.post--article .cta-inline { margin: 20px 0; display:flex; justify-content:center; }

.read-progress { position: fixed; bottom:0; left:0; height:15px; width:0; background: var(--accent); z-index: 999; box-shadow: 0 1px 6px rgba(0,0,0,.1); }

footer.post-foot {
	padding: 0 0 48px 0;
	border: 0;
}

.contact-choices {
	display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 12px; justify-content: center;
}
@media (max-width:640px){
	.contact-choices { gap:8px; }
	.contact-choices .btn { flex:1 1 calc(50% - 8px); justify-content:center; }
}

#stickyBar {
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:.6rem;
	color:#fff;
	padding:.8rem 1rem;
	z-index:9999;
	font-family:system-ui,Arial,sans-serif;
	font-size:1rem;
}

#stickyBarJumper {
	flex:1;
	text-align:center;
	font-weight:700;
	text-decoration:none;
	color:#fff;
	background: var(--positive);
	padding:.7rem 1rem;
	border-radius:6px;
}