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

:root{
	--accent: #ff4030;

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

	--radius: 18px;
	--pad: 20px;

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

	--shadow: 0 18px 50px rgba(0,0,0,0.28);
}

: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;
	--heading: #f1f0f0;
	--muted: #c2c2c2;
	--highlight: #faa199;

	--line: rgba(255,255,255,0.09);
	--blur-bg: rgba(21,20,20,0.72);

	--cta-bg: rgba(255,64,48,0.18);
	--cta-border: rgba(255,64,48,0.40);
	--cta-hover: rgba(255,64,48,0.28);
}

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

	--panel: rgba(255,255,255,0.72);
	--panel-2: rgba(255,255,255,0.9);

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

	--line: rgba(0,0,0,0.09);
	--blur-bg: rgba(241,240,240,0.74);

	--cta-bg: rgba(255,64,48,0.16);
	--cta-border: rgba(255,64,48,0.34);
	--cta-hover: rgba(255,64,48,0.24);
}

*{
	box-sizing: border-box;
}

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

body{
	margin: 0;
	min-width: 320px;

	font-family: var(--font);
	letter-spacing: 0.2px;

	background:
		radial-gradient(circle at 18% 6%, rgba(255,64,48,0.10), transparent 34%),
		linear-gradient(180deg, var(--bg), var(--bg-2));

	color: var(--text);

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

	overflow-x: hidden;
}

body::before{
	display: none;
}

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

img{
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
p{
	margin-top: 0;
}

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

p{
	color: var(--text);
	line-height: 1.65;
    font-size: 0.85rem;
}

/* =========================
	01.2) Anchor
========================= */

#bereiche {
    scroll-margin-top: -128px;
}

/* =========================
	02) Layout
========================= */

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

.mobile-section{
	position: relative;
	padding: 82px 0;
	scroll-margin-top: 86px;
}

.mobile-section h2{
	margin-bottom: 14px;
	font-size: clamp(1.65rem, 7vw, 2.3rem);
}

.section-intro{
	margin-bottom: 26px;
    font-size: 0.8rem;
	color: var(--muted);
}

/* =========================
	03) Topbar
========================= */

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

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;

	height: 72px;
	padding: 0 18px;

	background: var(--blur-bg);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--line);
}

.mobile-logo{
	display: inline-flex;
	align-items: center;
	height: 72px;
}

.mobile-logo img{
	width: auto;
	height: 54px;
}

.logo-img--dark,
.logo-img--light{
	display: none;
}

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

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

/* =========================
	04) Buttons
========================= */

.theme-toggle,
.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 44px;
	padding: 0 15px;

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

	color: var(--text);
	font: inherit;
	font-size: 0.88rem;
	letter-spacing: 0.2px;

	cursor: pointer;

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

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

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

.btn.primary{
	background: var(--cta-bg);
	border-color: var(--cta-border);
	color: var(--text);
}

.btn.primary:hover{
	background: var(--cta-hover);
}

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

/* =========================
	05) Hero
========================= */

.hero{
	min-height: calc(100svh - 72px);
	display: grid;
	align-items: center;
	padding-top: 62px;
	padding-bottom: 92px;
}

.kicker{
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 18px;

	color: var(--highlight);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
}

.kicker::before{
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 18px rgba(255,64,48,0.55);
}

.hero h1{
	max-width: 10ch;
	margin-bottom: 22px;

	font-size: clamp(2.7rem, 13vw, 4.4rem);
	line-height: 0.95;
}

.lead{
	max-width: 34ch;
	margin-bottom: 30px;

	color: var(--muted);
	font-size: 1.02rem;
}

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

/* =========================
	06) Cards / Sections
========================= */

.pillar-list,
.target-list,
.steps{
	display: grid;
	gap: 14px;
}

.pillar-card,
.target-list article,
.steps article{
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);

	background: var(--panel);
	box-shadow: none;
}

.pillar-card span,
.steps span{
	display: inline-flex;
	margin-bottom: 12px;

	color: var(--accent);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pillar-card h3,
.target-list h3,
.steps h3{
	margin-bottom: 8px;
	font-size: 1.12rem;
}

.pillar-card p,
.target-list p,
.steps p{
	margin-bottom: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

.pillar-card[data-flip-card]{
	position: relative;
	cursor: pointer;
}

.pillar-card[data-flip-card]::after{
	content: "flip >";

	position: absolute;
	right: 14px;
	bottom: 12px;

	color: var(--muted);

	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	opacity: 0.32;

	pointer-events: none;

	transition:
		opacity 180ms var(--ease) 320ms,
		transform 180ms var(--ease) 320ms;
}

.pillar-card[data-flip-card]:hover::after{
	opacity: 1;
	transform: translateX(2px);
}

.pillar-card[data-flip-card].is-flipped::after{
	opacity: 0;
}

/* =========================
	07) Gallery
========================= */

.mobile-gallery{
	display: grid;
	gap: 14px;
}

.mobile-gallery figure{
	position: relative;
	overflow: hidden;

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

	background: var(--panel);
}

.mobile-gallery img{
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.mobile-gallery figcaption{
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;

	padding: 9px 11px;

	border-radius: 12px;
	background: rgba(0,0,0,0.42);
	backdrop-filter: blur(8px);

	color: #f1f0f0;
	font-size: 0.86rem;
}

/* =========================
	08) Contact
========================= */

.contact{
	padding-bottom: 110px;
}

.contact p{
	margin-bottom: 24px;
	color: var(--muted);
}

/* =========================
	09) Small Screens
========================= */

@media (max-width: 380px){
	:root{
		--pad: 16px;
	}

	.mobile-topbar{
		padding: 0 14px;
	}

	.mobile-logo img{
		height: 48px;
	}

	.theme-toggle{
		padding: 0 12px;
		font-size: 0.8rem;
	}

	.mobile-section{
		padding: 72px 0;
	}
}

/* =========================
	10) Flip Cards
========================= */

.flip-card{
	position: relative;
	min-height: 210px;
	padding: 0;
	perspective: 1000px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.flip-card-inner{
	position: relative;
	width: 100%;
	min-height: 210px;

	transform-style: preserve-3d;
	transition: transform 620ms var(--ease);
}

.flip-card.is-flipped .flip-card-inner{
	transform: rotateY(180deg);
}

.flip-card-face{
	position: absolute;
	inset: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;

	min-height: 210px;
	padding: 20px;

	border-radius: var(--radius);
	overflow: hidden;

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.flip-card-front{
	background: var(--panel);
}

.flip-card-back{
	padding: 0;
	transform: rotateY(180deg);
	background: #000;
}

.flip-card-back img{
	width: 100%;
	height: 100%;
	min-height: 210px;
	object-fit: cover;
}

.flip-card-back::after{
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0));
}

.flip-caption{
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 2;

    display: inline-block;

	padding: 8px 12px;

	border-radius: 999px;
	background: rgba(0,0,0,0.36);
	backdrop-filter: blur(4px);

	color: #f1f0f0;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* =========================
	11) Workflow
========================= */

.steps{
	position: relative;
	gap: 18px;
}

.steps::before{
	display: none;
}

.steps article::before{
	content: "";
	position: absolute;

	left: 19px;
	top: 58px;
	bottom: -38px;

	width: 1px;
	background: var(--line);
}


.steps article{
	position: relative;

	padding: 14px 0px 14px 58px;
	background: none;
    border: none;
}

.steps article:last-child::before{
	display: none;
}

.steps span{
	position: absolute;
	left: 0;
	top: 20px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255,64,48,0.08);
	box-shadow: 0 0 24px rgba(255,64,48,0.12);

	color: var(--accent);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
}

.steps h3{
	margin-top: 2px;
}

/* =========================
	12) Mood Grid Gallery
========================= */

.mood-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;

    margin-left: -6px;
    margin-right: -6px;
}

.mood-grid figure{
	display: flex;
	flex-direction: column;

	overflow: hidden;

	margin: 0;

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

	background: var(--panel);

	box-shadow: 0 12px 30px rgba(0,0,0,0.18);

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

.mood-grid .gallery-feature{
	grid-column: 1 / -1;
	aspect-ratio: auto;
    margin-bottom: 8px;
}

.mood-grid .gallery-feature img{
	aspect-ratio: 8 / 5;
}

.mood-grid img{
	width: 100%;
	height: auto;
	object-fit: cover;

	aspect-ratio: 4 / 5;

	/* nur oben abrunden */
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
}

.mood-grid figcaption,
.mood-grid .gallery-feature figcaption{
	position: static;
	left: auto;
	right: auto;
	bottom: auto;

    max-width: 38ch;

	display: grid;
	gap: 4px;

	padding: 12px 12px 14px 12px;

	background: transparent;
	backdrop-filter: none;

	color: var(--text);
}

.mood-grid figcaption strong{
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.mood-grid figcaption span{
	font-size: 0.85rem;       /* leicht größer */
	line-height: 1.55;        /* 🔥 macht den Unterschied */

	color: var(--muted);

	letter-spacing: 0.02em;
}

.mood-grid .gallery-feature figcaption strong{
	font-size: 0.95rem;
}

.mood-grid .gallery-feature figcaption span{
	font-size: 0.85rem;
}

/* =========================
	13) Gallery CTA
========================= */

.gallery-more{
	margin-top: 18px;
	display: flex;
	justify-content: center;
}

.gallery-more a{
	font-size: 0.85rem;
	color: var(--muted);
	letter-spacing: 0.04em;

	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);

	transition: all var(--t-fast) var(--ease);
}

.gallery-more a:hover{
	color: var(--text);
	background: var(--panel);
}

/* =========================
	14) Lightbox
========================= */

.lightbox{
	position: fixed;
	inset: 0;
	z-index: 100;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 20px;
}

.lightbox[hidden]{
	display: none;
}

.lightbox-backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.82);
	backdrop-filter: blur(6px);
}

.lightbox-content{
	position: relative;
	z-index: 2;

	width: 100%;
	max-width: 520px;

	display: grid;
	gap: 12px;
}

.lightbox-media{
	position: relative;
    display: grid;
    gap: 10px;
}

.lightbox-topline{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.lightbox img{
	width: 100%;
	max-height: 70vh;
	object-fit: contain;

	border-radius: var(--radius);
}

.lightbox-caption{
	display: grid;
	gap: 4px;

	padding: 6px 4px;

	color: #f1f0f0;
}

.lightbox-caption strong{
	font-size: 0.95rem;
	font-weight: 500;
}

.lightbox-caption span{
	font-size: 0.85rem;
	color: rgba(241,240,240,0.75);
}

.lightbox-close{
	position: static;

	width: 34px;
	height: 34px;

	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.25);

	background: rgba(0,0,0,0.5);
	color: #fff;

	font-size: 18px;
}

.lightbox-hint{
	position: static;

	display: flex;
	align-items: center;
	gap: 6px;

	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	color: rgba(255,255,255,0.55);

	padding: 0;
	background: none;
	border-radius: 0;
	backdrop-filter: none;

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

.hint-icon{
	font-size: 0.75rem;
	opacity: 0.6;
}

.lightbox.is-active .lightbox-hint{
	opacity: 1;
}

@media (orientation: landscape){
	.lightbox-hint{
		display: none;
	}
}

.lightbox-note{
	margin-top: 4px;

	font-size: 0.7rem;
	line-height: 1.4;

	color: rgba(241,240,240,0.5);

	letter-spacing: 0.03em;
}

/* =========================
	15) Contact
========================= */

.contact .contact-note{
	color: var(--text);
}

.contact-note{
	margin-top: 16px;
	font-size: 0.8rem;
}

/* =========================
	16) Legals
========================= */

.legal-float{
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 60;
}

.legal-toggle{
	width: 44px;
	height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--blur-bg);
	backdrop-filter: blur(12px);

	color: var(--muted);
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

.legal-toggle:active{
	transform: scale(0.95);
}

.legal-menu{
	position: absolute;
	right: 0;
	bottom: 48px;

	display: grid;
	gap: 8px;

	min-width: 150px;
	padding: 10px;

	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--blur-bg);
	backdrop-filter: blur(14px);
}

.legal-menu[hidden]{
	display: none;
}

.legal-menu a{
	font-size: 0.82rem;
	color: var(--muted);
	padding: 7px 8px;
	border-radius: 10px;
}

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

.legal-icon{
	width: 24px;
	height: 24px;
	display: none;
}

:root[data-theme="dark"] .legal-icon--dark,
:root[data-theme="light"] .legal-icon--light{
	display: block;
}

/* ================================================================================================================= Legal - Ende ===========================================================
    Mobile Mode Switch
=============================================================================================================== Mobile Mode Switch - Start ================================================== */

.mobile-mode-section{
	padding-top: 36px;
}

.mobile-mode-switch{
	display: flex;
	align-items: center;
	gap: 0;

	margin-bottom: 42px;

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

.mobile-mode-btn{
	position: relative;

	flex: 1;

	padding: 0 0 16px 0;

	border: none;
	background: transparent;

	color: var(--muted);
	font: inherit;
	font-size: 0.95rem;
	letter-spacing: 0.04em;

	cursor: pointer;

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

.mobile-mode-btn.is-active{
	color: var(--text);
}

.mobile-mode-btn.is-active::after{
	content: "";

	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;

	height: 1px;

	background: var(--accent);
	box-shadow: 0 0 14px rgba(255,64,48,0.35);
}

.mobile-mode-content{
	position: relative;
}

.mobile-mode-panel{
	display: none;
	opacity: 0;
	transform: translateY(10px);
}

.mobile-mode-panel.is-active{
	display: block;

	animation: mobilePanelFade 480ms var(--ease) forwards;
}

.mobile-mode-panel,
.mobile-fragment-board,
.mobile-fragment-slide{
	min-width: 0;
}

@keyframes mobilePanelFade{
	from{
		opacity: 0;
		transform: translateY(10px);
	}

	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================
    Fragment Tabs
========================= */



.mobile-fragment-tabs{
	display: flex;
	justify-content: center;
	gap: 18px;

	margin:
		42px 0
		32px 0;
}

.mobile-fragment-tab{
	position: relative;

	padding: 0 0 8px 0;

	border: none;
	background: transparent;

	color: var(--muted);
	font: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.14em;

	cursor: pointer;

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

.mobile-fragment-tab.is-active{
	color: var(--text);
}

.mobile-fragment-tab.is-active::after{
	content: "";

	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;

	height: 1px;

	background: var(--accent);
	box-shadow: 0 0 12px rgba(255,64,48,0.3);
}

/* =========================
    Fragment Slider
========================= */

.mobile-fragment-slider{
	display: flex;
	align-items: flex-start;
	transition: height var(--t) var(--ease);

	width: 100vw;
	max-width: 100vw;

	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-snap-stop: always;

	gap: 0;

	padding-bottom: 8px;

	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.mobile-fragment-slider::-webkit-scrollbar{
	display: none;
}

.mobile-fragment-slide{
	flex: 0 0 100vw;
	width: 100vw;
	min-width: 0;
	height: fit-content;

	padding-left: 0;
	padding-right: 0;

	overflow: hidden;
	scroll-snap-align: start;

}

.mobile-fragment-slide > *:not(.mobile-fragment-editorial-hero){
	margin-left: var(--pad);
	margin-right: var(--pad);
}

.mobile-fragment-slide:not(.is-active){
	height: 0;
	overflow: hidden;
}
	

.mobile-fragment-slide h3{
	margin-bottom: 6px;

	font-size: 1.6rem;
	font-weight: 500;
}

.mobile-fragment-size{
	margin-bottom: 28px;

	color: var(--muted);
	font-size: 0.88rem;
	letter-spacing: 0.08em;
}

.mobile-fragment-slide img{
	width: 100%;
	border-radius: 18px;

	margin-bottom: 26px;

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

.mobile-fragment-slide p{
	max-width: 32ch;

	color: var(--muted);
	line-height: 1.7;
}

/* =========================
    Mobile Fragment Board
========================= */

.mobile-fragment-board{
	padding-bottom: 36px;
}

.mobile-fragment-hero{
	margin-bottom: 54px;
}

.mobile-fragment-kicker,
.mobile-fragment-label{
	display: block;
	margin-bottom: 12px;

	color: var(--accent);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.mobile-fragment-hero h3{
	margin-bottom: 8px;

	font-size: clamp(2rem, 10vw, 3rem);
	line-height: 1.08;
	font-weight: 500;
}

.mobile-fragment-hero img{
	margin: 34px 0 28px;
}

.mobile-fragment-block{
	margin: 0 0 54px;
}

.mobile-fragment-block p,
.mobile-fragment-hero p,
.mobile-fragment-atmosphere p{
	max-width: 34ch;
	color: var(--muted);
	line-height: 1.75;
}

.mobile-fragment-image-block{
	margin: 0 0 54px;
}

.mobile-fragment-image-block img,
.mobile-fragment-atmosphere img{
	width: 100%;
	border-radius: 18px;
	border: none;
}

.mobile-fragment-image-block span{
	display: block;
	margin-top: 10px;

	color: var(--muted);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mobile-fragment-materials{
	margin: 0 0 54px;
}

.mobile-material-scroll{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;

	margin-top: 18px;
}

.mobile-material-scroll::-webkit-scrollbar{
	display: none;
}

.mobile-material-card{
	min-width: 0;

	padding: 10px;

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

.mobile-material-card img{
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;

	border-radius: 12px;
	margin-bottom: 10px;
}

.mobile-material-card p{
	margin: 0;

	color: var(--text);
	font-size: 0.82rem;
	line-height: 1.35;
}

.mobile-material-card span{
	display: block;
	margin-top: 2px;

	color: var(--muted);
	font-size: 0.72rem;
}

.mobile-fragment-atmosphere{
	margin: 0 0 54px;
}

.mobile-fragment-atmosphere img{
	margin-top: 18px;
}

.mobile-fragment-features{
	display: grid;
	gap: 10px;

	margin: 0 0 34px;
}

.mobile-fragment-features article{
	padding: 16px;

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

.mobile-fragment-features span{
	display: block;
	margin-bottom: 4px;

	color: var(--text);
	font-size: 0.88rem;
	font-weight: 500;
}

.mobile-fragment-features p{
	margin: 0;

	color: var(--muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

.mobile-fragment-cta{
	width: 100%;
}

/* =========================
    Editorial Fragment Board
========================= */

.mobile-fragment-board--editorial{
	position: relative;
    z-index: 2;
    background: var(--bg);

	padding-bottom: 48px;
	overflow: hidden;
}

/* -------------------------
    Hero
------------------------- */

.mobile-fragment-editorial-hero{
	position: relative;

	width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 16px;

	border-radius: 0;
	overflow: hidden;
}

.mobile-fragment-editorial-hero img{
	display: block;

	width: 100%;
	max-width: none;
	height: 68svh;
	object-fit: cover;

	border: none !important;
	border-radius: 0 !important;
}

.mobile-fragment-editorial-hero-text{
	position: absolute;

	left: 24px;
	right: 24px;
	bottom: 28px;

	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mobile-fragment-editorial-hero-text h3{
	margin: 0;

	font-size: clamp(2.4rem, 11vw, 4rem);
	line-height: 0.95;
	letter-spacing: -0.04em;

	color: #f1f0f0;
}

.mobile-fragment-editorial-hero-text p{
	margin: 0;

	color: rgba(241,240,240,0.72);
	font-size: 0.9rem;
	letter-spacing: 0.08em;
}

/* -------------------------
    Intro
------------------------- */

.mobile-fragment-editorial-intro{
	margin-bottom: 140px;
}

.mobile-fragment-editorial-intro p{
	max-width: 32ch;

	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.8;
}

/* -------------------------
    Composition Grid
------------------------- */

.mobile-fragment-composition{
	display: grid;

	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 110px);

	gap: 10px;

	margin-bottom: 120px;
}

.mobile-fragment-composition img{
	width: 100%;
	height: 100%;

	object-fit: cover;

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

.composition-main{
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.composition-detail{
	grid-column: 3;
	grid-row: 1;
}

.composition-perspective{
	grid-column: 1;
	grid-row: 3;

	align-self: stretch;
}

.composition-statement{
	grid-column: 3;
	grid-row: 2;

	align-self: center;

	margin: 0;

	color: var(--text);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

/* -------------------------
    Type Features
------------------------- */

.mobile-fragment-type-features{
	display: flex;
	flex-direction: column;
	gap: 16px;

	margin-bottom: 108px;
}

.mobile-fragment-type-features div{
	display: grid;
	grid-template-columns: 32% 1fr !important;
	gap: 34px !important;

	align-items: baseline;
}

.mobile-fragment-type-features span{
	color: var(--accent);

	font-size: 1.05rem;
	font-weight: 600;

	letter-spacing: -0.03em;
	line-height: 0.9;

	text-transform: uppercase;
	text-align: right;
}

.mobile-fragment-type-features p{
	color: var(--muted);

	font-size: 0.95rem;
	font-weight: 500;

	letter-spacing: 0.02em;
	line-height: 1;

	text-transform: uppercase;
	text-align: left;
}

/* -------------------------
    Wirkung
------------------------- */

.mobile-fragment-effect{
	margin-bottom: 36px;
}

.mobile-fragment-image-block--effect{
	margin-bottom: 62px;
}

/* -------------------------
    Materialien
------------------------- */

.mobile-fragment-materials--quiet .mobile-material-scroll{
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.mobile-fragment-materials--quiet .mobile-material-card{
	padding: 8px;

	background: transparent;
	border: 1px solid var(--line);
}

.mobile-fragment-materials--quiet .mobile-material-card img{
	margin-bottom: 8px;
	border-radius: 10px;
}

.mobile-fragment-materials--quiet .mobile-material-card p{
	font-size: 0.72rem;
	letter-spacing: 0.04em;
}

.mobile-fragment-materials--quiet .mobile-material-card span{
	font-size: 0.66rem;
}

/* =========================
    Editorial Fragment Refinements
========================= */

/* 3x3 Grid weniger UI, mehr Editorial */
.mobile-fragment-composition img{
	border-radius: 4px;
	border: none;
	background: transparent;
}

.composition-main{
	object-fit: contain !important;
	background: transparent;
}

.composition-statement{
	color: var(--text);

	font-size: 1.3rem;
	font-weight: 600;

	letter-spacing: -0.02em;
	line-height: 0.9;

	text-transform: uppercase;
}





/* Eigenschaften stabiler */
.mobile-fragment-type-features div{
	display: grid;
	grid-template-columns: minmax(92px, auto) 1fr;
	gap: 18px;

	align-items: baseline;
}

.mobile-fragment-type-features span,
.mobile-fragment-type-features p{
	white-space: nowrap;
}

/* Materialien kleiner und ruhiger */
.mobile-fragment-materials--quiet .mobile-material-scroll{
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.mobile-fragment-materials--quiet .mobile-material-card{
	padding: 6px;
	border-radius: 10px;
}

.mobile-fragment-materials--quiet .mobile-material-card img{
	border-radius: 6px;
	margin-bottom: 6px;
}

.mobile-fragment-materials--quiet .mobile-material-card p{
	font-size: 0.62rem;
	line-height: 1.25;
}

.mobile-fragment-materials--quiet .mobile-material-card span{
	font-size: 0.56rem;
}

/* Abschluss CTA */
.mobile-fragment-final-cta{
	margin-top: 54px;
	padding-top: 28px;

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

.mobile-fragment-final-cta p{
	margin-bottom: 22px;

	width: 100%;
	max-width: none;

	color: var(--muted);
	line-height: 1.75;
}

.mobile-fragment-final-cta .btn{
	width: 100%;
}

.composition-main{
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.composition-detail{
	grid-column: 3;
	grid-row: 1;
}

.composition-statement{
	grid-column: 3;
	grid-row: 2;
}

.composition-perspective{
	grid-column: 1;
	grid-row: 3;
}

.composition-effect{
	grid-column: 2 / 4;
	grid-row: 3;

	align-self: end;

	margin: 0;

	color: var(--muted);

	font-size: 0.72rem;
	line-height: 1.45;
}

.fragment-production{
	grid-column: 1 / -1;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 14px;
}

.fragment-production p{
	margin: 0;
	text-align: center;
	font-size: 0.82rem;
	color: var(--muted);
}

.fragment-production p span{
	color: var(--accent);
}

.composition-main,
.composition-detail,
.composition-perspective{
	border-radius: 0 !important;
}

.mobile-fragment-tabs-dock{
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 90;

	display: flex;
	justify-content: center;
	gap: 10px;

	width: auto;

	margin: 0;
	padding: 6px 10px;

	transform: translateX(-50%) translateY(18px);

	background: var(--blur-bg);
	backdrop-filter: blur(8px);

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

	box-shadow: 0 4px 18px rgba(0,0,0,0.12);

	opacity: 0;
	pointer-events: none;

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

.mobile-fragment-tabs-dock .mobile-fragment-tab{
	min-height: 28px;
	padding: 0 4px;

	border: none;
	background: transparent;

	color: var(--muted);

	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.12em;
}

.mobile-fragment-tabs-dock .mobile-fragment-tab.is-active{
	color: var(--accent);

	background: transparent;
	border: none;
	box-shadow: none;
}

.mobile-fragment-tabs-dock .mobile-fragment-tab.is-active::after{
	display: none;
}

body.fragment-dock-active .mobile-fragment-tabs-dock{
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.mobile-fragment-usecases{
	display: flex;
	flex-direction: column;
	gap: 10px;

	margin: 24px 0 26px;
	padding: 0;
	padding-top: 24px;
	padding-bottom: 24px;

	list-style: none;
}

.mobile-fragment-usecases li{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	color: var(--muted);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mobile-fragment-usecases li::before,
.mobile-fragment-usecases li::after{
	color: var(--accent);
	font-weight: 500;
}

.mobile-fragment-usecases li::before{
	content: "[";
}

.mobile-fragment-usecases li::after{
	content: "]";
}

.mobile-fragment-usecases .usecases-title{
	color: var(--text);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mobile-fragment-usecases .usecases-title::before,
.mobile-fragment-usecases .usecases-title::after{
	content: none;
}