/* =========================
	01) Theme + Global
========================= */

html{
	scroll-behavior: smooth;
	scroll-padding-top: 84px;
}

body{
	margin: 0;
	font-family: var(--font);
	letter-spacing: 0.2px;
	background: var(--bg);
	color: var(--text);
	transition: background var(--t) var(--ease), color var(--t) var(--ease);
	overflow-x: hidden;
}

/* Theme tokens (nur Grau-Wechsel, wie du willst) */
:root{
	--accent: #ff4030;

	--font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	--radius: 16px;

	--max: 1160px;
	--pad: 24px;

	--t-fast: 180ms;
	--t: 320ms;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	--shadow: 0 12px 40px rgba(0,0,0,.22);

	--konzept-image: url("img/backdrop.png") center/cover no-repeat;
}

/* ===== DARK MODE ===== */
:root[data-theme="dark"]{
	--bg: #151414;
	--bg-2: #1e1c1d;
	--panel: rgba(255,255,255,0.05);
	--panel-2: rgba(255,255,255,0.08);

	--text: #f1f0f0;
	--highlight: #faa199;
	--muted: #c2c2c2;

	--line: rgba(255,255,255,0.08);
	--blur-bg: rgba(21,20,20,0.65);

	--heading: #f1f0f0;

	--hero-glow: rgba(255,64,48,0.08);

	--cta-bg: rgba(255,64,48,0.18);
	--cta-border: rgba(255,64,48,0.40);
	--cta-hover: rgba(255,64,48,0.28);
	--cta-shadow: 0 8px 24px rgba(255,64,48,0.18);

	--hero-divider: rgba(255,255,255,0.12);

	--backdrop-image: url("img/backdrop.png") center/cover no-repeat;
	--backdrop-overlay-1: rgba(0,0,0,0.58);
	--backdrop-overlay-2: rgba(0,0,0,0.45);
	--backdrop-opacity: 0.94;

	--backdrop-image-active: url("img/backdrop.png") center/cover no-repeat;

	--gal-border: rgba(241,240,240,0.22);
}

/* ===== LIGHT MODE ===== */
:root[data-theme="light"]{
	--bg: #f1f0f0;
	--bg-2: #e2dedf;

	--panel: rgba(255,255,255,0.7);
	--panel-2: rgba(255,255,255,0.85);

	--text: #161616;
	--heading: #111111;
	--muted: #777777;
	--highlight: #f67c5d;

	--line: rgba(0,0,0,0.08);
	--blur-bg: rgba(241,240,240,0.65);

	--hero-glow: rgba(255,64,48,0.04);

	--cta-bg: rgba(255,64,48,0.18);
	--cta-border: rgba(255,64,48,0.35);
	--cta-hover: rgba(255,64,48,0.28);
	--cta-shadow: none;

	--hero-divider: rgba(0,0,0,0.12);

	--backdrop-image: url("img/backdrop.png") center/cover no-repeat;
	--backdrop-overlay-1: rgba(0,0,0,0.58);
	--backdrop-overlay-2: rgba(0,0,0,0.45);
	--backdrop-opacity: 0.94;

	--backdrop-image-active: url("img/backdrop.png") center/cover no-repeat;

	--tip-bg: rgba(21,20,20,0.86);
	--tip-text: #f1f0f0;
	--tip-line: rgba(255,255,255,0.10);

	--gal-border: rgba(17,17,17,0.32);
}

:root[data-theme="light"] #konzept{
	/* Konzept-Bereich im Light Theme wie Dark behandeln */
	--konzept-text: #f1f0f0;
	--konzept-heading: #f1f0f0;
	--konzept-muted: #cfcfcf;

	--backdrop-overlay-1: rgba(0,0,0,0.58);
	--backdrop-overlay-2: rgba(0,0,0,0.45);
	--backdrop-opacity: 0.94;

	--tip-bg: rgba(241,240,240,0.94);
	--tip-text: #111111;
	--tip-line: rgba(0,0,0,0.10);


}

h1, h2, h3, h4, h5, h6{
	color: var(--heading);
	font-weight: 600;
	letter-spacing: -0.01em;
}

h1 {
	letter-spacing: -0.02em;
}

p{
	color: var(--text);
}

a{
	color: inherit;
	text-decoration: none;
}

.container{
	width: min(var(--max), calc(100% - var(--pad) * 2));
	margin: 0 auto;
}

.section{
	padding: 96px 0;
	position: relative;
	scroll-margin-top: 84px;
}

.section-title{
	font-size: 28px;
	margin: 0 0 18px 0;
	letter-spacing: 0.4px;
}

.muted{
	color: var(--muted);
}

.highlight{
	color: var(--highlight);
}

/* =========================
	02) Topbar / Navigation
========================= */

.topbar{
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: none;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
}

.topbar-inner{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 68px;
}

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

.nav{
	position: relative;
	display: flex;
	gap: 18px;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
	user-select: none;
}

/* Slide Indicator */
.nav-indicator{
	position: absolute;
	bottom: 6px;
	height: 2px;
	border-radius: 999px;
	background: var(--accent);
	filter: drop-shadow(0 0 12px rgba(255,64,48,0.45));
	transition: transform 320ms var(--ease), width 320ms var(--ease), opacity 200ms var(--ease);
	opacity: 0;
	pointer-events: none;
}

.nav a{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 999px;
	color: var(--muted);
	transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);	font-size: 14.5px;
	font-weight:400;
	letter-spacing: 0.4px;
}

/* Active: glow underline */
.nav a[aria-current="true"]{
	color: var(--text);
	background: transparent;
	box-shadow: none;
}

/* Optional: active also gets tiny glow text */
.nav a[aria-current="true"]{
	text-shadow: 0 0 18px rgba(255,64,48,0.22);
}

.nav a:hover{
	color: var(--accent);
	transform: translateY(-1px);
}

.topbar{
	position: sticky;
	top: 0;
	z-index: 50;

	/* immer Glass */
	background: var(--blur-bg);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);

	transition: background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
}

.topbar-left,
.topbar-right{
	display: flex;
	align-items: center;
	gap: 12px;
}

.topbar-left{
	justify-content: flex-start;
}

.topbar-right{
	justify-content: flex-end;
}

/* Theme Toggle Button (links in der Topbar) */
.nav-toggle-btn{
	display: inline-flex;
	align-items: center;
	gap: 10px;

	height: 44px;
	padding: 0 14px;

	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--panel);

	color: var(--muted);
	cursor: pointer;

	font-size: 14px;
	letter-spacing: 0.3px;

	transition: transform var(--t-fast) var(--ease),
				background var(--t-fast) var(--ease),
				color var(--t-fast) var(--ease);
}

.nav-toggle-btn:hover{
	transform: translateY(-1px);
	background: var(--panel-2);
	color: var(--text);
}

.nav-toggle-btn:active{
	transform: translateY(0);
}


body.is-scrolled {
	opacity: 1;
	pointer-events: auto;
}

/* =========================
	Topbar Logo (appear after Hero) + SVG swap
========================= */

.topbar-logo{
	display: inline-flex;
	align-items: center;
	height: 68px;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

body.is-scrolled .topbar-logo{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Größe: leicht größer als Nav-Text */
.topbar-logo img{
	height: 72px;
	width: auto;
	display: block;
}

/* Theme-spezifische Logos */
.logo-img--dark,
.logo-img--light{
	display: none;
}

:root[data-theme="dark"] .logo-img--dark{ display: block; }
:root[data-theme="dark"] .logo-img--light{ display: none; }

:root[data-theme="light"] .logo-img--dark{ display: none; }
:root[data-theme="light"] .logo-img--light{ display: block; }

/* =========================
	Unterseiten CSS
========================= */
@media print {

	body.legal-page .topbar,
	body.legal-page .nav,
	body.legal-page .hero-link{
		display: none !important;
	}

	body.legal-page{
		background: #fff;
		color: #000;
	}

	body.legal-page .legal-block{
		page-break-inside: avoid;
	}

}

.legal-logo{
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
}

.legal-block{
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.legal-block h2{
	font-size: 18px;
	margin-bottom: 12px;
}

.legal-block p{
	line-height: 1.7;
	color: var(--muted);
	max-width: 720px;
}

.legal-toc{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 40px;
}

.legal-toc a{
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
	font-size: 14px;
}

.legal-toc a:hover{
	color: var(--text);
	background: var(--panel);
}

.legal-nav{
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 80px;
}

.legal-nav a{
	font-size: 13px;
	color: var(--muted);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--line);
	transition: all var(--t-fast) var(--ease);
}

.legal-nav a:hover{
	color: var(--text);
	background: var(--panel);
}

.legal-nav a.is-active{
	color: var(--text);
	background: var(--panel);
}

.legal-group{
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

/* Subnav beeinflusst NICHT die Höhe */
.legal-sub{
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;

	display: flex;
	gap: 12px;

	font-size: 12px;
	color: var(--muted);
}

/* Text */
.legal-sub span{
	position: relative;
	cursor: default;
}

/* Aktiv */
.legal-sub .is-sub-active{
	color: var(--text);
}

/* Underline */
.legal-sub .is-sub-active::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: var(--text);
	opacity: 0.7;
}

.legal-sub button{
	all: unset;
	position: relative;
	cursor: pointer;
	color: var(--muted);
	font-size: 12px;
}

.legal-sub button.is-sub-active{
	color: var(--text);
}

.legal-sub button.is-sub-active::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: var(--text);
	opacity: 0.7;
}

.agb-content{
	display: none;
}

.agb-content.is-active{
	display: block;
}

/* =========================
	03) Hero (Split) + Dock Transition
========================= */

.hero{
	min-height: calc(100vh - 40px);
	display: grid;
	align-items: center;
	padding-top: 15px; /*damit Topbar nichts überlappt */
	margin-top: -24px;
	background: radial-gradient(circle at 25% 45%, var(--hero-glow), transparent 70%);
}

.hero-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

/* Vertikale Trennlinie Hero */
.hero-grid{
	position: relative;
}

.hero-grid::after{
	content: "";
	position: absolute;
	top: 10%;
	bottom: 10%;
	left: 50%;
	width: 1px;
	transform: translateX(-0.5px);
	background: linear-gradient(
	to bottom,
	transparent,
	var(--hero-divider),
	var(--hero-divider),
	transparent
);
	opacity: 0.6;
	pointer-events: none;
}

.hero-left{
	max-width: 680px;
}

.kicker{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--panel);
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 1.6px;
	margin-bottom: 18px;
}

.kicker-dot{
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 0 6px rgba(255,64,48,0.12);
}

.hero h1{
	font-size: clamp(46px, 4.5vw, 64px);
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 18px 0;
}

.hero p{
	margin: 0 0 22px 0;
	color: var(--muted);
	font-size: 17px;
	font-weight:400;
	line-height: 1.65;
	max-width: 520px;
}

.hero-actions{
	display: flex;
	gap: 12px;
	margin-top: 22px;
	flex-wrap: wrap;
}

.hero-link{
	align-self: center;
	color: var(--muted);
	font-size: 15px;
	letter-spacing: 0.3px;
	transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.hero-link:hover{
	color: var(--text);
	transform: translateX(4px);
}

.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--text);
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
	font-weight: 500;
	letter-spacing: 0.3px;
}

.btn:hover{
	transform: translateY(-1px);
	background: var(--panel-2);
}

.btn.primary{
	border-color: var(--cta-border);
	background: var(--cta-bg);
	color: var(--text);
	box-shadow: var(--cta-shadow);
	transition: transform var(--t-fast) var(--ease),
				background var(--t-fast) var(--ease),
				box-shadow var(--t-fast) var(--ease);
}

.btn.primary:hover{
	background: var(--cta-hover);
	transform: translateY(-2px);
}

.btn.primary:active{
	transform: translateY(0);
}

.hero-right{
	display: grid;
	place-items: center;
	justify-items: end; /* Logo bleibt rechts */
}

/* Volle Flöche nutzen, aber mittig im Slot */
.hero-logo{
	width: 100%;
	height: min(520px, 60vh);
	border-radius: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	display: grid;
	place-items: center;
}

.hero-logo-inner{
	text-align: center;
	user-select: none;
}

.hero-logo-inner .mark{
	font-weight: 800;
	letter-spacing: 2px;
	font-size: 40px;
}

.hero-logo-inner .sub{
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

/* Hero Intro verschwindet beim Scroll (state-based) */
body.is-scrolled .hero .hero-left{
	opacity: 0;
	transform: translateY(-18px);
	transition: opacity 420ms var(--ease), transform 420ms var(--ease);
	pointer-events: none;
}

.hero .hero-left{
	opacity: 1;
	transform: translateY(0);
	transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

/* =========================
	04) Section 2 – Konzept
========================= */

.konzept{
	position: relative;
	min-height: 60vh;
	overflow: hidden;
}

/* Full-width Background */
.konzept-bg{
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;

	opacity: var(--backdrop-opacity);
	filter: saturate(0.92);
}

.konzept-bg::after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	/* default: sehr subtil */
	background: linear-gradient(
		to right,
		rgba(0,0,0,0.20),
		rgba(0,0,0,0.00) 55%
	);
}

.konzept-bg-layer{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition:
		transform 120ms var(--ease),
		opacity 120ms var(--ease);
}

.konzept-bg-layer.is-current{
	z-index: 1;
	transform: translateX(0);
	opacity: 1;
}

.konzept-bg-layer.is-next{
	z-index: 2;
	transform: translateX(100%);
	opacity: 1;
}
/* falls ich mal bounce möchte hier auf -18% stellen */
.konzept-bg.is-animating .konzept-bg-layer.is-current{
	transform: translateX(0);
	opacity: 1;
}

.konzept-bg.is-animating .konzept-bg-layer.is-next{
	transform: translateX(0);
	opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
	.konzept-bg-layer{
		transition: none;
	}
}

#konzept .section-title{
	color: var(--konzept-heading, var(--heading));
}

#konzept p,
#konzept .muted{
	color: var(--konzept-muted, var(--muted));
}

#konzept .konzept-link{
	color: var(--accent);
}

#konzept .konzept-link.is-active,
#konzept .konzept-link:hover{
	color: var(--konzept-text, var(--text));
}

/* Layout innerhalb des Content-Containers */
.konzept-layout{
	position: relative;
	z-index: 2;

	min-height: 60vh;
	display: grid;
	grid-template-rows: 1fr auto;
}

/* Text sitzt knapp über den Links */
.konzept-copy{
	align-self: end;
	max-width: 720px;
	margin-bottom: 18px; /* 15–20px Abstand zu Links */
}

/* Links unten mittig */
.konzept-links{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 64px;
	flex-wrap: wrap;

	padding-bottom: 12px;
}

/* Link-Design: Default = Accent, Active = Text */
.konzept-link{
	position: relative;
	padding: 4px 0;

	font-weight: 500;
	letter-spacing: 0.2px;
	color: var(--accent);

	transition: color var(--t-fast) var(--ease),
				transform var(--t-fast) var(--ease);
}

.konzept-link:hover{
	transform: translateY(-2px);
	color: var(--text);
}

.konzept-link::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 0;
	height: 1.5px;
	background: var(--accent);
	transition: width var(--t-fast) var(--ease);
}

.konzept-link:hover::after{
	width: 100%;
}

.konzept-link.is-active{
	color: var(--text);
}

.konzept-link.is-active::after{
	width: 100%;
}

/* =========================
	05) Section 3 – Bereiche
========================= */

.bands{
	display: flex;
	gap: 12px;
	align-items: stretch;
	height: clamp(520px, 62vh, 720px);
}

.band{
	flex: 0.55;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--panel);
	overflow: hidden;
	position: relative;
	cursor: pointer;
	min-width: 90px;
	transition: flex 520ms var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease);
}

.band:hover{
	background: var(--panel-2);
}

.band.is-open{
	flex: 3.4;
	border: 1px solid var(--accent);
	box-shadow: 0 0 0 1px rgba(255,64,48,0.35) inset;
}

.band:not(.is-open){
	opacity: 0.92;
}

.band-bg{
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1200px 500px at 30% 20%, rgba(255,64,48,0.14), rgba(0,0,0,0) 55%),
		linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.62));
	opacity: 0.75;
}

.band[data-band="licht"] .band-bg{
	background:
		url('/img/layers/licht.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.band[data-band="klang"] .band-bg{
	background:
		url('/img/layers/klang.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.band[data-band="form"] .band-bg{
	background:
		url('/img/layers/form.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

:root[data-theme="light"] .band-bg{
	opacity: 0.9;
}

:root[data-theme="light"] .band[data-band="licht"] .band-bg{
	background:
		linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.18)),
		url('/img/layers/licht.png') center/cover no-repeat;
}

:root[data-theme="light"] .band[data-band="klang"] .band-bg{
	background:
		linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.18)),
		url('/img/layers/klang.png') center/cover no-repeat;
}

:root[data-theme="light"] .band[data-band="form"] .band-bg{
	background:
		linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.18)),
		url('/img/layers/form.png') center/cover no-repeat;
}

.band-content{
	position: relative;
	height: 100%;
	padding: 22px 22px 34px 22px;
	display: grid;
	align-content: space-between;
}

.band-title{
	font-weight: 600;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--muted);
	text-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

.band-body{
	margin-top: 14px;
	margin-bottom: 34px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}


.band.is-open .band-body{
	opacity: 1;
	transform: translateY(0);
}

.band ul{
	margin: 10px 0 0 0;
	padding-left: 18px;
	color: rgba(241,240,240,0.86);
	line-height: 1.5;
}

.band-body li {
	list-style-type: none;
}

/* =========================
	06) Section 4 – Zielgruppe
========================= */

.zielgruppe-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 42px; /* größerer Abstand */
	margin-top: 48px;
}

.zielgruppe-card{
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 0; /* keine Rundung */

	padding: 48px 28px 28px 28px;
	height: 340px;

	display: flex;
	flex-direction: column;

	transition: transform 260ms var(--ease),
				box-shadow 260ms var(--ease),
				border-color 260ms var(--ease);

	/* dezenter "Hero-Glow" Charakter */
	box-shadow:
		0 10px 26px rgba(0,0,0,0.12),
		0 0 18px rgba(255,64,48,0.10);
}

:root[data-theme="light"] .zielgruppe-card{
	box-shadow:
		0 6px 14px rgba(0,0,0,0.08),
		0 0 10px rgba(255,64,48,0.06);
}

.zielgruppe-card:hover{
	transform: translateY(-2px);
	border-color: rgba(255,64,48,0.30);
	box-shadow:
		0 14px 32px rgba(0,0,0,0.14),
		0 0 26px rgba(255,64,48,0.12);
}

.zielgruppe-icon{
	display: flex;
	justify-content: center;
	align-items: center;

	margin-bottom: 30px;
}

.zielgruppe-icon img{
	height: 80px;
	object-fit: contain;
}

:root[data-theme="dark"] .zielgruppe-icon .icon-light{
	display: none;
}

:root[data-theme="light"] .zielgruppe-icon .icon-dark{
	display: none;
}

.zielgruppe-content{
	display: flex;
	flex-direction: column;
	gap: 8px; /* kleinerer Abstand zwischen h3 und p */
}

.zielgruppe-content h3{
	margin: 0;
	text-align: center; /* zentriert */
	font-weight: 600;
	font-size: 18px;
	color: var(--text);
}

.zielgruppe-content p{
	margin: 0;
	text-align: left; /* Text linksbündig */
	color: var(--muted);
	line-height: 1.6;
	font-size: 15px;
}

/* =========================
	05) Section 5 – Workflow (Marker | Band | Content)
========================= */

.workflow .muted{
	max-width: 760px;
	margin-top: 12px;
}

.workflow-timeline{
	margin-top: 52px;
}

.workflow-steps{
	list-style: none;
	padding: 0;
	margin: 0;

	display: grid;
	gap: 3px; /* genau dein Wunschbereich */
}

/* 3-Spalten Layout: Marker | Band | Content */
.workflow-step{
	display: grid;
	grid-template-columns: 92px 100px 1fr; /* Band jetzt 60px */
	gap: 28px;
	align-items: start;

	min-height: 160px;
	
}

.workflow-step{
	--wf-gap: 28px;
}
/* Marker links */
.workflow-marker{
	display: grid;
	justify-items: center;
	justify-self: end;
	align-content: end;
	align-self: end;
	gap: 12px;
	padding-bottom: 12px;
	padding-right: 0px;
}

.workflow-badge{
	width: 66px;
	height: 66px;
	border-radius: 999px;
	display: grid;
	place-items: center;

	/* bewusst neutral, keine Glow-Boxen mehr */
	border: 1px solid var(--line);
	background: transparent;
	position: relative;
	margin-right: 12px;
}

.workflow-icon{
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
	opacity: 0.85;
}

:root[data-theme="dark"] .workflow-icon.icon-light{
	display: none;
}

:root[data-theme="light"] .workflow-icon.icon-dark{
	display: none;
}

/* Marker links */
.workflow-marker{
	display: grid;
	justify-items: center;
	justify-self: end;
	align-content: end;
	align-self: end;
	gap: 12px;
	padding-bottom: 12px;
	padding-right: 0px;
}

.workflow-badge{
	width: 80px;
	height: 80px;
	border-radius: 999px;
	display: grid;
	place-items: center;

	/* bewusst neutral, keine Glow-Boxen mehr */
	border: none;
	background: transparent;
}


.workflow-index{
	font-size: 20px; /* probier 18–20 */
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	color: var(--muted);
	transform: translateX(18px);
}


.workflow-index{
	font-size: 20px; /* probier 18–20 */
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	color: var(--muted);
	transform: translateX(18px);
}

/* Band (Segment pro Step) */
.workflow-band{
	width: 100px;
	align-self: stretch;
	display: flex;
	justify-content: center;
}

.workflow-band-seg{
	width: 100%;
	min-height: 86px; /* damit es IMMER sichtbar ist */
	flex: 1; /* wächst mit der Step-Höhe */
	margin: 1px 0; /* Abstand oben/unten => Segment-Luft */
	background: rgba(255,64,48,0.25);

	border-top-right-radius: 2px;
	border-bottom-right-radius: 8px;
}

/* Segment-Opacities je Step */
.workflow-step:nth-child(1){ --wf-band: rgba(255,64,48,0.25); }
.workflow-step:nth-child(2){ --wf-band: rgba(255,64,48,0.50); }
.workflow-step:nth-child(3){ --wf-band: rgba(255,64,48,0.75); }
.workflow-step:nth-child(4){ --wf-band: rgba(255,64,48,1.00); }

.workflow-band-seg{
	background: var(--wf-band);
}

/* Content rechts: keine Card, nur clean */
.workflow-content{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.workflow-title{
	position: relative;
	display: inline-block;
	align-self: flex-start;
	padding-bottom: 10px;
}

.workflow-title::after{
	content: "";
	position: absolute;

	/* Linie startet etwas links vom Content-Start, also im Gap */
	left: calc(-1 * var(--wf-gap));

	/* Linie läuft nach rechts über Titelbreite hinaus */
	width: calc(100% + var(--wf-gap) + 4px);

	bottom: 2px;
	height: 2px;
	background: var(--wf-band);
}

.workflow-text{
	margin-top: 0;
	transform: translateY(-12px);
	color: var(--muted);
	line-height: 1.6;
	font-size: 15px;
	max-width: 800px;
}

.workflow-subtext{
	font-size: 12px;
	letter-spacing: 0.4px;
	color: var(--highlight);

	display: flex;
	gap: 18px;
	flex-wrap: wrap;

	transform: translateY(-10px);
}

.workflow-subtext span + span::before{
	content: "»";
	margin: 0 8px;
	color: var(--accent);
	opacity: 0.88;
}



/* =========================
	06) Simple reveal (optional)
========================= */

.reveal{
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.reveal.is-inview{
	opacity: 1;
	transform: translateY(0);
}

/* =========================
	06) Section 6 – Module (3 Ebenen)
========================= */

.modules {
	position: relative;
	overflow: visible;
	--lvl2-indent: 42px;
	--lvl3-indent: 84px;
}

.modules::before{
	content: "";
	position: absolute;

	top: 50%;
	right: -20%;

	width: 100%;
	height: 900px;

	transform: translateY(-50%);
	pointer-events: none;

	background: radial-gradient(circle at 70% 45%, var(--hero-glow), transparent 88%);


	filter: blur(70px);
	z-index: 0;
}

:root[data-theme="light"] .modules::before{
	opacity: 0.22;
}

.modules > *{
	position: relative;
	z-index: 1;
}

.modules-intro{
	margin-top: 24px;
}

.modules-pill{
	display: inline-block;
	padding: 10px 14px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--muted);
	letter-spacing: 0.2px;
	font-size: 13px;
}

.modules-areas{
	margin-top: 28px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	max-width: 820px;
}

/* Horizontale Trennlinie zwischen Kategorien */
.modules-area{
	position: relative;
	padding-bottom: 36px; /* Platz für Linie */
	margin-bottom: 36px;
}

.modules-area::after{
	content: "";
	position: absolute;
	left: 35%;
	bottom: 0;
	transform: translateX(-50%);
	width: 80%; /* wie Hero-Linie subtil */
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--line),
		transparent
	);
	opacity: 0.6;
	pointer-events: none;
}

.modules-area:last-of-type::after{
	display: none;
}

.modules-area h3{
	margin: 0 0 8px 0;
	padding-top: 10px;
	font-weight: 600;
	color: var(--text);
	text-align: left;
}

.modules-area p{
	margin: 0;
}

.modules-area-details{
	margin-top: 25px;
	margin-left: var(--lvl2-indent);
}

/* Smooth reveal (Details + Modulegruppen) */
.modules-area-details{
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(6px);
	transition:
		max-height 520ms var(--ease);
}

/* Öffnen */
.modules-area-details.is-open{
	max-height: 900px;
	opacity: 1;
	transform: translateY(0);
	overflow: visible;
}

.modules-group{
	max-height: none;
	overflow: visible;

	opacity: 0;

	margin-left: calc(var(--lvl2-indent) + var(--lvl3-indent));

	/* fade-out (wenn is-open entfernt wird) */
	transition: opacity 420ms ease;
}

.modules-group.is-open{
	opacity: 1;

	/* fade-in (wenn is-open hinzugefügt wird) */
	transition: opacity 720ms ease;
}

.modules-toggle{
	margin-top: 16px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--text);
	padding: 12px 16px;
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease),
				border-color var(--t-fast) var(--ease),
				color var(--t-fast) var(--ease);
}

.modules-toggle:hover{
	transform: translateY(-1px);
	border-color: rgba(255,64,48,0.28);
	color: var(--accent);
}

.modules-toggle.secondary{
	margin-top: 26px;
}

/* Tertiary (Alle <Bereich>-Module) */
.modules-toggle.tertiary{
	margin-top: 14px;
	margin-bottom: 18px;
	font-size: 14px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--accent);
	transition: 
		transform var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		background var(--t-fast) var(--ease);
}

/* Hover vor Öffnung */
.modules-toggle.tertiary:hover{
	transform: translateY(-1px);
	border-color: rgba(255,64,48,0.4);
}

/* Zustand: Module offen */
.modules-toggle.tertiary[aria-expanded="true"]{
	border: none;
	background: transparent;
	padding: 0;
	margin-top: 14px;
	color: var(--text);
	cursor: pointer;
}

/* Optional: Hover im offenen Zustand minimal */
.modules-toggle.tertiary[aria-expanded="true"]:hover{
	color: var(--accent);
	transform: none;
}

/* Abstand von Text zu Button */
.modules-area-details p{
	margin-bottom: 24px;
}

/* Tertiary Button */
.modules-toggle.tertiary{
	margin-top: 0;
}



/* Ebene 3: Mauerwerk-Grid */
.modules-all{
	margin-top: 24px;
}

.modules-wall{
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 18px;
	align-items: start;
	max-width: 980px;
	padding: 10px;
}



/* Brick */
.module-brick{
	position: relative;
	--brick-shift: 0px;

	border: 1px solid var(--line);
	background: transparent;
	padding: 14px 16px;

	transform: translateX(var(--brick-shift)) scale(1);
	transition: border-color var(--t-fast) var(--ease),
				transform var(--t-fast) var(--ease);

	z-index: 5;
}

.module-brick:hover{
	border-color: rgba(255,64,48,0.22);
	transform: translateX(var(--brick-shift)) scale(1.03);
}

/* Jede 2. Reihe leicht versetzt (Mauerwerk-Feeling) */
.module-brick:nth-child(6n + 4),
.module-brick:nth-child(6n + 5),
.module-brick:nth-child(6n + 6){
	--brick-shift: 1px;
}

.module-brick[data-tip]::after{
	content: attr(data-tip);

	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);

	transform: translateX(-50%) translateY(6px);
	opacity: 0;
	pointer-events: none;

	padding: 10px 12px;
	border-radius: 12px;

	font-size: 12px;
	line-height: 1.35;
	letter-spacing: 0.2px;

	width: max-content;
	max-width: 320px;

	background: var(--tip-bg);
	color: var(--tip-text);
	border: 1px solid var(--tip-line);

	backdrop-filter: blur(10px);
	box-shadow: 0 18px 48px rgba(0,0,0,0.22);

	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
	z-index: 10;
}

:root[data-theme="light"] .module-brick[data-tip]::after{
	background: var(--tip-bg-light);
	color: var(--tip-text-light);
	border: 1px solid var(--tip-line-light);
}

.module-brick[data-tip]:hover::after{
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}




/* Typo */
.module-name{
	font-weight: 500;
	letter-spacing: 0.2px;
	color: var(--text);
}


/* =========================
   7 Contact Layout
========================= */

.kontakt-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: start;
	position: relative;
}

/* Linke Seite */
.kontakt-left{
	display: grid;
	gap: 24px;
}

/* H2 + Einleitung rechtsbündig */
.kontakt-left .section-title,
.kontakt-left > p{
	text-align: right;
}

/* Rechte Seite Bild */
.kontakt-right{
	padding-top: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kontakt-right img{
	width: 100%;
	max-width: 580px;
	height: auto;
	object-fit: cover;
	border-radius: 0 12px 12px 0;
}


/* =========================
   7 Kontaktformular
========================= */

.contact-form{
	margin-top: 18px;
	display: grid;
	gap: 12px;
	max-width: 640px;
}

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

.contact-form input,
.contact-form select,
.contact-form textarea{
	width: 100%;
	box-sizing: border-box;

	padding: 12px 14px;

	border: 1px solid var(--line);
	border-radius: 14px;

	background: var(--panel);
	color: var(--muted);

	font-family: inherit;
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: 0.3px;
}

.contact-form textarea{
	resize: vertical;
}

.contact-form textarea::-webkit-scrollbar{
	width: 6px;
}

.contact-form textarea::-webkit-scrollbar-track{
	background: transparent;
}

.contact-form textarea::-webkit-scrollbar-thumb{
	background: var(--line);
	border-radius: 999px;
}

.contact-form textarea::-webkit-scrollbar-thumb:hover{
	background: var(--accent);
}

.contact-form textarea{
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
	color: var(--muted);
}

.contact-form input[type="email"]:not(:placeholder-shown):invalid{
	border-color: var(--accent);
}

.contact-form select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	padding-right: 42px;
	cursor: pointer;

	background-image:
		linear-gradient(45deg, transparent 50%, var(--accent) 50%),
		linear-gradient(135deg, var(--accent) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% - 3px),
		calc(100% - 14px) calc(50% - 3px);
	background-size: 6px 6px;
	background-repeat: no-repeat;
}

.contact-form select:invalid{
	color: var(--muted);
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{
	border-color: var(--accent);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
	outline: none;
	border-color: var(--muted);
}

.contact-form select option{
	background: var(--bg-2);
	color: var(--text);
	font-family: var(--font);
}

.contact-submit{
	justify-self: end;
}

.contact-note{
	margin: 4px 0 0 0;
	font-size: 12px;
	text-align: left;
}

.contact-note a{
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.textarea-wrap{
	position: relative;
}

.textarea-wrap textarea{
	padding-bottom: 28px; /* Platz für Counter */
}

.char-counter{
	position: absolute;
	right: 12px;
	bottom: 8px;

	font-size: 11px;
	color: var(--muted);

	pointer-events: none; /* NICHT klickbar */
	user-select: none;    /* NICHT markierbar */

	opacity: 0;
	transition: opacity 180ms ease;
}

.char-counter.is-visible {
	opacity: 1;
}

/* Standard: alles muted */
.char-counter .char-limit{
	color: var(--muted);
}

/* Nur ab 1000: "/" wird accent */
.char-counter.is-warning .char-limit{
	color: var(--accent);
}

/* Voll erreicht */
.char-counter.is-max{
	color: var(--accent);
}

.char-counter.is-max .char-limit{
	color: var(--accent);
}

/* =========================
	08) Galerie (Infinite Carousel)
========================= */
#galerie {
	padding-top: 140px;
}

.galerie{
	padding-bottom: 120px;
}

.galerie-head{
	margin-bottom: 18px;
}

/* Indikatoren: immer mittig */
.galerie-indicators{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;

	margin: 0 0 18px 0;

	pointer-events: auto;
}

/* Button reset -> echte Raute */
.galerie-indicator{
	appearance: none;
	-webkit-appearance: none;

	width: 10px;
	height: 10px;

	padding: 0;
	margin: 0;

	border: 1px solid var(--line);
	border-radius: 0;
	background: rgba(255,255,255,0.12);

	transform: rotate(45deg);
	transform-origin: center;

	opacity: 0.75;
	cursor: pointer;

	display: inline-block;

	transition:
		background var(--t-fast) var(--ease),
		transform var(--t-fast) var(--ease),
		opacity var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease);
}

:root[data-theme="light"] .galerie-indicator{
	background: rgba(0,0,0,0.06);
}

.galerie-indicator.is-active{
	background: var(--accent) !important;
	border-color: rgba(255,255,255,0);
	opacity: 1;
	transform: rotate(45deg) scale(1.15);
}

.galerie-indicator:focus{
	outline: none;
}

/* Slider Area */
.galerie-wrap{
	--arrow-size: 52px;
	--arrow-gap: 8px;
	position: relative;
	width: 100%;
}

/* Viewport selbst clippt nicht (Shadow darf nach unten raus) */
.galerie-viewport{
	position: relative;

	width: min(96vw, 1680px);
	margin: 0 auto;

	display: flex;
	justify-content: center; /* wichtig */

	overflow: visible;
}

/* Clip: HIER kommt das Padding rein, damit Thumbs garantiert vor Pfeilen enden */
.galerie-clip{
	margin: 0 auto;
	/* Clip nur horizontal */
	overflow-x: hidden;
	overflow-y: visible;

	/* Symmetrisch links/rechts, damit rechts nicht unter Pfeil läuft */
	padding-left: calc(var(--arrow-size) + var(--arrow-gap));
	padding-right: calc(var(--arrow-size) + var(--arrow-gap));

	/* Platz für Shadow */
	padding-top: 32px;
	padding-bottom: 120px;

	box-sizing: border-box;
}

/* Track */
.galerie-track{
	display: flex;
	align-items: center;
	gap: 26px;

	will-change: transform;
	transition: transform 680ms var(--ease);
}

/* Border Farben (kein weißer “Card”-Look) */
:root[data-theme="dark"]{
	--gal-border: rgba(241,240,240,0.14); /* deutlich dunkler */
}

:root[data-theme="light"]{
	--gal-border: rgba(17,17,17,0.22);
}

/* Items: KEIN Shadow für alle (hart) */
.galerie-item{
	margin: 0;
	flex: 0 0 auto;

	width: clamp(220px, 15.5vw, 320px);
	aspect-ratio: 16 / 10;

	position: relative;
	background: transparent;

	opacity: 0.78;
	filter: saturate(0.92);

	transition:
		filter 420ms var(--ease),
		opacity 420ms var(--ease);

	/* Wichtig: alles andere killen */
	box-shadow: none !important;
}

.galerie-item img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;

	border-radius: 0;
	background: transparent;
	
	/* Statt border -> outline (sauber bei transform, weniger “weißes Flimmern”) */
	border: none;
	outline: none;
	outline-offset: -1px;

	transform-origin: center;
	transform: scale(1);
	transition:
		transform 680ms var(--ease),
		outline-color 420ms var(--ease);
}

/* Near/Far: nur hier Outline */
.galerie-item.is-near img,
.galerie-item.is-far img{
	outline: 1px solid var(--gal-border);
}

/* Active: Accent Outline */
.galerie-item.is-active img{
	outline: 1px solid var(--accent);
}

/* Active: NUR hier Shadow */
.galerie-item.is-active{
	opacity: 1;
	filter: saturate(1) contrast(1.05);

	box-shadow:
		0 18px 22px rgba(0,0,0,0.18),
		0 46px 78px rgba(0,0,0,0.30) !important;
}

:root[data-theme="light"] .galerie-item.is-active{
	box-shadow:
		0 16px 14px rgba(0,0,0,0.12),
		0 40px 70px rgba(0,0,0,0.18) !important;
}

/* Scale: nur Bild, Layout bleibt stabil */
.galerie-item.is-active img{
	transform: scale(1.12);
}

.galerie-item.is-near{
	opacity: 0.9;
}

.galerie-item.is-near img{
	transform: scale(0.97);
}

.galerie-item.is-far{
	opacity: 0.65;
}

.galerie-item.is-far img{
	transform: scale(0.90);
}

/* Pfeile: wieder echte Mitte der sichtbaren Zone (32/120 sind deine paddings) */
.galerie-arrow{
	position: absolute;
	top: calc(32px + ((100% - 32px - 120px) / 2));
	transform: translateY(-50%);
	z-index: 10;

	width: var(--arrow-size);
	height: var(--arrow-size);

	border: none;
	background: transparent;

	display: grid;
	place-items: center;

	color: var(--accent);
	cursor: pointer;
	user-select: none;

	transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.galerie-arrow span{
	font-size: 48px;
	line-height: 1;
	display: block;
	transform: translateY(-2px);
	text-shadow: 0 0 18px rgba(255,64,48,0.25);
}

/* Pfeile sitzen im Randbereich, nicht über den Thumbnails */
.galerie-arrow--left{
	left: var(--arrow-gap);
}

.galerie-arrow--right{
	right: var(--arrow-gap);
}

.galerie-arrow:hover{
	transform: translateY(-50%) scale(1.06);
}

.galerie-arrow:active{
	transform: translateY(-50%) scale(0.98);
}

/* =========================
   Galerie Modal
========================= */

body.modal-open{
	overflow: hidden;
}

/* Wrapper */
.gallery-modal{
	position: fixed;
	inset: 0;
	z-index: 9999;

	display: grid;
	place-items: center;

	padding: 48px;
	box-sizing: border-box;
}

.gallery-modal[hidden]{
	display: none;
}

/* Hintergrund */
.gallery-modal-backdrop{
	position: absolute;
	inset: 0;

	background: rgba(0,0,0,0.82);
	backdrop-filter: blur(10px);
}

/* Inhalt */
.gallery-modal-inner{
	position: relative;
	z-index: 1;

	width: fit-content;
	max-width: calc(100vw - 96px);
	height: min(760px, 82vh);

	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 12px;

	padding: 18px;
	box-sizing: border-box;

	overflow: hidden;
}

/* Close */
.gallery-modal-close{
	position: absolute;
	top: 14px;
	right: 14px;

	width: 40px;
	height: 40px;

	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--panel);

	color: var(--text);
	cursor: pointer;

	display: grid;
	place-items: center;

	font-size: 16px;

	transition: all 180ms var(--ease);
}

.gallery-modal-close-text{
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);

	font-size: 13px;
	letter-spacing: 0.4px;
	color: var(--muted);
	opacity: 0.7;

	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(6px);

	padding: 10px 18px;
	border-radius: 999px;

	border: 1px solid var(--line);

	cursor: pointer;
	transition: all var(--t-fast) var(--ease);
	z-index: 999;
}

.gallery-modal-close-text:hover{
	color: var(--text);
	opacity: 1;
	background: rgba(0,0,0,0.6);
}

.gallery-modal-close:hover{
	background: var(--panel-2);
	transform: scale(1.05);
}

.gallery-modal-grid{
	display: grid;
	grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.8fr);
	grid-template-rows: minmax(260px, 1fr) minmax(260px, 1fr);
	gap: 14px;

	width: min(1220px, calc(100vw - 140px));
	height: min(720px, calc(100vh - 140px));
}

.gallery-modal-media{
	height: 420px;
	overflow: hidden;
}

.gallery-modal-project{
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;

	height: calc(100vh - 220px);
	max-height: calc(100vh - 220px);
	overflow: hidden;

	background: transparent; /* oder debug später raus */
}

.gallery-modal-item{
	position: relative;
	margin: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	border: 1px solid var(--gal-border);
	background: var(--bg-2);
}

.gallery-modal-item.is-large{
	grid-row: 1 / 3;
}

.gallery-modal-item.is-large img{
	object-position: center center;
}

.gallery-modal-item img{
	width: 100%;
	height: 100%;
	display: flex;
	object-fit: cover;
}

.gallery-modal-item figcaption{
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;

	display: grid;
	gap: 4px;

	padding: 10px 12px;

	background: linear-gradient(
	180deg,
	rgba(0,0,0,0.18),
	rgba(0,0,0,0.52)
	);

	border: none;
	backdrop-filter: blur(2.8px);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;

	color: #f1f0f0;
	text-shadow: none;
	pointer-events: none;
}

.gallery-modal-item figcaption.no-bg{
	padding: 0;
	background: none;
	backdrop-filter: none;
	border: none;
	text-shadow: 0 2px 14px rgba(0,0,0,0.65);
}


.gallery-modal-item figcaption strong{
	font-size: 15px;
	font-weight: 600;
}

.gallery-modal-item figcaption span{
	font-size: 13px;
	color: rgba(241,240,240,0.78);
}

.gallery-modal-item.is-feature{
	grid-row: 1 / span 2;
}

.gallery-modal-item.is-wide{
	grid-column: 2 / span 1;
}


/* =========================
	09) Footer
========================= */

.mail-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  transition: all 0.2s ease;
}

.mail-link:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.footer{
	border-top: 1px solid var(--line);
	padding: 34px 0;
	background: var(--bg-2);
}

.footer-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.footer a{
	color: var(--muted);
}

.footer a:hover{
	color: var(--text);
}

/* Minimal Desktop-First; Mobile machen wir später gezielt. */