/* ==========================================================================
   7S — Design Tokens
   Palette: Nacht-Slate statt reinem Schwarz, Gras-Grün als Primär-Akzent,
   Diamant-Türkis als Sekundär-Akzent, Redstone-Amber als Warnfarbe/Highlight.
   Typo: Space Grotesk (Display, blockig-geometrisch) + Manrope (Text)
         + JetBrains Mono (Server-Adressen, Zahlen, Daten).
   ========================================================================== */
:root {
	--bg:            #12161d;
	--bg-alt:        #0c0f14;
	--panel:         #1b212c;
	--panel-2:       #232b38;
	--border:        #2c3543;

	--text:          #eef1f5;
	--text-muted:    #9aa7b8;

	--grass:         #5fbf5a;
	--grass-dark:    #3f8f3d;
	--diamond:       #4fd1c5;
	--amber:         #f2a93c;
	--red:           #e5544f;

	--font-display:  'Space Grotesk', system-ui, sans-serif;
	--font-body:     'Manrope', system-ui, sans-serif;
	--font-mono:     'JetBrains Mono', ui-monospace, monospace;

	--radius-sm:     8px;
	--radius:        14px;
	--radius-lg:     22px;

	--shadow:        0 20px 50px -20px rgba(0,0,0,.55);
	--wrap:          1180px;
}

@media (prefers-color-scheme: light) {
	:root { color-scheme: dark; }
}

/* ==========================================================================
   Reset & Basics
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--diamond);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
	position: absolute; top: -100px; left: 1rem; z-index: 999;
	background: var(--grass); color: #08130a; padding: .75rem 1.25rem;
	border-radius: var(--radius-sm); transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}

.eyebrow {
	font-family: var(--font-mono);
	text-transform: uppercase;
	font-size: .75rem;
	letter-spacing: .14em;
	color: var(--grass);
	margin: 0 0 .9rem;
}
.eyebrow--center { text-align: center; }

.section { padding: 96px 0; }
.section__title { font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 720px; }
.section__lead { color: var(--text-muted); font-size: 1.05rem; max-width: 560px; }
.section__lead--center { margin: 0 auto; text-align: center; }
.features .wrap > .section__title,
.locations .wrap > .section__title { margin-left: auto; margin-right: auto; text-align: center; }
.features .wrap > *, .locations .wrap > * { text-align: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .9rem 1.6rem;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: .95rem;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	white-space: nowrap;
}
.btn--primary {
	background: var(--grass);
	color: #06170a;
	box-shadow: 0 8px 24px -8px rgba(95,191,90,.55), inset 0 -3px 0 rgba(0,0,0,.18);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(95,191,90,.7), inset 0 -3px 0 rgba(0,0,0,.18); }
.btn--outline {
	background: transparent;
	border-color: var(--border);
	color: var(--text);
}
.btn--outline:hover { border-color: var(--diamond); color: var(--diamond); }
.btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--text-muted);
}
.btn--ghost:hover { color: var(--text); border-color: var(--border); }
.btn--sm { padding: .6rem 1.1rem; font-size: .85rem; }
.btn--lg { padding: 1.1rem 2.2rem; font-size: 1.05rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(18,22,29,.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	height: 76px;
}
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.brand__mark {
	display: inline-grid;
	grid-template-columns: repeat(2, 8px);
	grid-template-rows: repeat(2, 8px);
	gap: 2px;
	width: 22px; height: 22px;
}
.brand__mark span { display: block; border-radius: 2px; transform-origin: center; animation: brand-pop 9s ease-in-out infinite; }
.brand__mark span:nth-child(1) { background: var(--grass); }
.brand__mark span:nth-child(2) { background: var(--diamond); animation-delay: .14s; }
.brand__mark span:nth-child(3) { background: var(--amber); animation-delay: .28s; }
.brand__mark span:nth-child(4) { background: var(--grass-dark); animation-delay: .42s; }
/* Alle 9s "platzieren" sich die vier Bloecke nacheinander neu — wie beim Bauen */
@keyframes brand-pop {
	0%       { transform: scale(0); }
	3%       { transform: scale(1.25); }
	6%, 100% { transform: scale(1); }
}
/* Beim Hover dreht sich das Raster einmal weiter — die Farben "tauschen" die Plaetze */
.brand__mark { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark { transform: rotate(90deg); }
.brand__text em { color: var(--grass); font-style: normal; }

.nav-menu { display: flex; align-items: center; gap: 2rem; }
.nav-menu a { font-size: .95rem; font-weight: 600; color: var(--text-muted); transition: color .15s ease; }
.nav-menu a:hover { color: var(--text); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: transparent; border: none; padding: 6px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

.site-nav--mobile {
	display: none;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem 24px 2rem;
	border-top: 1px solid var(--border);
	background: var(--bg);
}
.site-nav--mobile .nav-menu { flex-direction: column; align-items: flex-start; gap: 1.1rem; }

@media (max-width: 860px) {
	.site-nav, .site-header__actions .btn--primary { display: none; }
	.nav-toggle { display: flex; }
	.site-nav--mobile.is-open { display: flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	padding: 96px 0 0;
	background:
		radial-gradient(60% 60% at 82% 20%, rgba(95,191,90,.16), transparent 70%),
		radial-gradient(50% 50% at 10% 90%, rgba(79,209,197,.14), transparent 70%),
		var(--bg);
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.voxel {
	position: absolute;
	width: 46px; height: 46px;
	border-radius: 6px;
	opacity: .5;
	animation: float 9s ease-in-out infinite;
}
.voxel--grass  { top: 12%; left: 6%;  background: linear-gradient(160deg, var(--grass), var(--grass-dark)); }
.voxel--dirt   { top: 62%; left: 3%;  background: linear-gradient(160deg, #8a5a3c, #5e3c26); width: 34px; height: 34px; animation-delay: 1.4s; }
.voxel--diamond{ top: 20%; right: 8%; background: linear-gradient(160deg, var(--diamond), #1f8f85); animation-delay: 2.2s; }
.voxel--tnt    { top: 70%; right: 14%;background: linear-gradient(160deg, var(--red), #8f2c28); width: 36px; height: 36px; animation-delay: .7s; }
.voxel--plank  { top: 42%; left: 46%; background: linear-gradient(160deg, var(--amber), #a9701f); width: 28px; height: 28px; opacity: .3; animation-delay: 3s; }

@keyframes float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-22px) rotate(6deg); }
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 3rem;
	align-items: center;
	padding-bottom: 72px;
}
.hero__title {
	font-size: clamp(2.2rem, 4.4vw, 3.4rem);
	margin-bottom: .6rem;
}
.countdown {
	display: inline-block;
	color: var(--grass);
	font-variant-numeric: tabular-nums;
}
.hero__lead { color: var(--text-muted); font-size: 1.08rem; max-width: 520px; }

.hero__form {
	display: flex;
	gap: .75rem;
	margin: 1.75rem 0 1.5rem;
	max-width: 520px;
}
.hero__form input {
	flex: 1;
	padding: .95rem 1.1rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--panel);
	color: var(--text);
	font-family: var(--font-body);
	font-size: .95rem;
}
.hero__form input::placeholder { color: var(--text-muted); }
.hero__form input:focus { border-color: var(--grass); outline: none; }

.hero__trust { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; color: var(--text-muted); font-size: .9rem; }
.hero__trust li { color: var(--text); }

.hero__visual { display: flex; justify-content: center; }
.build-stack {
	position: relative;
	width: 220px;
	height: 340px;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 6px;
}
.build-block {
	width: 190px;
	height: 34px;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--panel-2), var(--panel));
	border: 1px solid var(--border);
	opacity: 0;
	transform: translateY(24px);
	animation: rise .6s ease forwards;
}
.build-block--1 { background: linear-gradient(180deg, var(--grass), var(--grass-dark)); animation-delay: .1s; }
.build-block--2 { animation-delay: .5s; }
.build-block--3 { background: linear-gradient(180deg, var(--diamond), #1f8f85); animation-delay: .9s; }
.build-block--4 { animation-delay: 1.3s; }
.build-block--5 { background: linear-gradient(180deg, var(--amber), #a9701f); animation-delay: 1.7s; }
.build-block--6 { animation-delay: 2.1s; }
.build-block--7 { background: linear-gradient(180deg, var(--grass), var(--grass-dark)); animation-delay: 2.5s; width: 210px; }

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

.build-flag {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--panel);
	border: 1px solid var(--border);
	padding: .4rem .9rem;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: .78rem;
	opacity: 0;
	animation: fadeIn .5s ease forwards;
	animation-delay: 2.9s;
	white-space: nowrap;
}
.build-flag__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--grass);
	box-shadow: 0 0 0 0 rgba(95,191,90,.6);
	animation: pulse 1.8s ease-in-out infinite;
}
@keyframes fadeIn { to { opacity: 1; } }
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(95,191,90,.55); }
	70% { box-shadow: 0 0 0 8px rgba(95,191,90,0); }
	100% { box-shadow: 0 0 0 0 rgba(95,191,90,0); }
}

/* Ticker */
.ticker {
	position: relative;
	border-top: 1px solid var(--border);
	background: var(--bg-alt);
	overflow: hidden;
	padding: 14px 0;
}
/* Weiche Kanten links/rechts, damit die Schlagworte ein- statt abgeschnitten wirken */
.ticker::before,
.ticker::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 90px;
	z-index: 2;
	pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg-alt), rgba(0,0,0,0)); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg-alt), rgba(0,0,0,0)); }

/*
 * Endlos-Loop: Vier identische Gruppen; die Animation liegt auf den GRUPPEN
 * und verschiebt jede um -100% ihrer EIGENEN Breite. Der Abstand nach der
 * letzten Wortmarke steckt als padding-right in der Gruppe. So ist der
 * Ruecksprung pixelgenau (kein Subpixel-Drift) und auch auf sehr breiten
 * Bildschirmen entsteht am Zyklusende keine Luecke rechts.
 */
.ticker__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: .82rem;
	color: var(--text-muted);
}
.ticker__group {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	flex: none;
	will-change: transform;
	animation: ticker-loop 26s linear infinite;
}
.ticker__sep { color: var(--grass); }
.ticker:hover .ticker__group { animation-play-state: paused; }
@keyframes ticker-loop {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

/* ==========================================================================
   Features
   ========================================================================== */
.feature-grid {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.feature-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 2rem 1.75rem;
	text-align: left;
	transition: transform .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-4px); border-color: var(--grass); }
.feature-card h3 { font-size: 1.1rem; }
.feature-card p { color: var(--text-muted); font-size: .92rem; margin-bottom: 0; }

.feature-card__icon {
	display: block;
	width: 40px; height: 40px;
	margin-bottom: 1.1rem;
	border-radius: 10px;
	position: relative;
	transition: transform .25s ease;
}
.feature-card__icon::before, .feature-card__icon::after { content: ""; position: absolute; }
.feature-card:hover .feature-card__icon { transform: translateY(-3px) scale(1.07); }

/* --- Uhr: Zeiger tickt in 12 Schritten einmal pro Runde --- */
.feature-card__icon--clock   { background: rgba(95,191,90,.15); }
.feature-card__icon--clock::before {
	inset: 9px; border: 2px solid var(--grass); border-radius: 50%;
	animation: icon-ring 3.6s ease-in-out infinite;
}
.feature-card__icon--clock::after {
	top: 11px; left: 19px; width: 2px; height: 9px; background: var(--grass);
	transform-origin: bottom center;
	animation: clock-tick 7.2s steps(12, end) infinite;
}
@keyframes clock-tick { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes icon-ring {
	0%, 100% { opacity: .85; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.08); }
}

/* --- Muenze: dreht sich alle paar Sekunden einmal um die eigene Achse --- */
.feature-card__icon--coin   { background: rgba(242,169,60,.15); }
.feature-card__icon--coin::before {
	inset: 8px; border: 2px solid var(--amber); border-radius: 50%;
	animation: coin-flip 3.8s ease-in-out infinite;
}
.feature-card__icon--coin::after {
	inset: 15px; border-radius: 50%; background: rgba(242,169,60,.6);
	animation: coin-flip 3.8s ease-in-out infinite;
}
@keyframes coin-flip {
	0%, 55%   { transform: rotateY(0deg); }
	85%, 100% { transform: rotateY(360deg); }
}

/* --- Globus: Meridian wandert um die Kugel --- */
.feature-card__icon--globe  { background: rgba(79,209,197,.15); overflow: hidden; }
.feature-card__icon--globe::before {
	inset: 8px; border: 2px solid var(--diamond); border-radius: 50%;
}
.feature-card__icon--globe::after {
	top: 8px; bottom: 8px; left: 50%; width: 2px; background: var(--diamond);
	animation: globe-spin 4.2s ease-in-out infinite;
}
@keyframes globe-spin {
	0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 1; }
	25%      { transform: translateX(-320%) scaleX(.2); opacity: .55; }
	50%      { transform: translateX(-50%) scaleX(1);   opacity: 1; }
	75%      { transform: translateX(220%) scaleX(.2);  opacity: .55; }
}

/* --- Sync: blockiger Ladering im Minecraft-Takt --- */
.feature-card__icon--sync   { background: rgba(95,191,90,.15); }
.feature-card__icon--sync::before {
	inset: 9px; border: 2px solid var(--grass); border-top-color: transparent; border-radius: 50%;
	animation: spin 2.4s steps(8, end) infinite;
}
.feature-card__icon--sync::after {
	inset: 16px; border-radius: 2px; background: var(--grass);
	animation: sync-pulse 2.4s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sync-pulse {
	0%, 100% { transform: scale(.6); opacity: .35; }
	50%      { transform: scale(1);  opacity: .9; }
}

/* --- Blitz: zuckt und laedt sich wieder auf --- */
.feature-card__icon--bolt   { background: rgba(242,169,60,.15); animation: bolt-glow 2.8s ease-in-out infinite; }
.feature-card__icon--bolt::before {
	left: 16px; top: 8px; width: 8px; height: 8px; background: var(--amber);
	clip-path: polygon(60% 0, 0 60%, 40% 60%, 40% 100%, 100% 40%, 60% 40%);
	transform-origin: center;
	animation: bolt-flash 2.8s steps(1, end) infinite;
}
@keyframes bolt-flash {
	0%, 44%  { transform: scale(1);    opacity: .75; }
	50%      { transform: scale(1.45); opacity: 1; }
	56%      { transform: scale(1);    opacity: .75; }
	62%      { transform: scale(1.25); opacity: 1; }
	68%, 100%{ transform: scale(1);    opacity: .75; }
}
@keyframes bolt-glow {
	0%, 44%, 100% { box-shadow: 0 0 0 0 rgba(242,169,60,0); }
	52%           { box-shadow: 0 0 14px 2px rgba(242,169,60,.45); }
}

/* --- Funken: drei Partikel blinken versetzt --- */
.feature-card__icon--sparkle{ background: rgba(229,84,79,.13); }
.feature-card__icon--sparkle::before {
	top: 10px; left: 18px; width: 4px; height: 4px; background: var(--red); border-radius: 50%;
	box-shadow: 10px 6px 0 var(--diamond);
	animation: sparkle-twinkle 2.2s ease-in-out infinite;
}
.feature-card__icon--sparkle::after {
	top: 20px; left: 12px; width: 4px; height: 4px; background: var(--amber); border-radius: 50%;
	animation: sparkle-twinkle 2.2s ease-in-out infinite;
	animation-delay: 1.1s;
}
@keyframes sparkle-twinkle {
	0%, 100% { transform: scale(1);  opacity: 1; }
	45%      { transform: scale(.3); opacity: .25; }
}

/* Karten gestaffelt einblenden */
.feature-card:nth-child(2) { transition-delay: .08s; }
.feature-card:nth-child(3) { transition-delay: .16s; }
.feature-card:nth-child(4) { transition-delay: .24s; }
.feature-card:nth-child(5) { transition-delay: .32s; }
.feature-card:nth-child(6) { transition-delay: .40s; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   How it works
   ========================================================================== */
.how { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.how__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }

/*
 * Ablauf-Animation: ein 6.9s-Zyklus (3 x 2.3s) laeuft in Endlosschleife und
 * hebt Schritt 01 -> 02 -> 03 nacheinander hervor. Gestartet wird erst,
 * wenn die Liste im Viewport ist (Klasse .is-running via main.js).
 */
.how-steps {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	counter-reset: step;
	padding-left: 0;
	list-style: none;
}
.how-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.how-step__body { position: relative; }
.how-step__num {
	position: relative;
	z-index: 1;
	font-family: var(--font-mono);
	font-size: .85rem;
	color: var(--grass);
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: .35rem .6rem;
}
.how-step h3 { font-size: 1.05rem; margin-bottom: .25rem; transition: color .3s ease; }
.how-step p { color: var(--text-muted); margin: 0; font-size: .92rem; }

/* Senkrechte Schiene hinter den Nummern (Pseudo-Elemente = valides ol-Markup) */
.how-steps::before,
.how-steps::after {
	content: "";
	position: absolute;
	left: 22px;
	top: 1.6rem;
	bottom: 1.6rem;
	width: 2px;
	border-radius: 2px;
}
.how-steps::before { background: var(--border); }
.how-steps::after {
	background: linear-gradient(180deg, var(--grass), var(--diamond));
	transform: scaleY(0);
	transform-origin: top center;
}
.how-steps.is-running::after { animation: how-rail-fill 6.9s linear infinite; }
@keyframes how-rail-fill {
	0%   { transform: scaleY(0); }
	92%  { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* Aktiver Schritt */
.how-steps.is-running .how-step__num { animation: how-step-on 6.9s ease-in-out infinite; }
.how-steps.is-running .how-step:nth-child(2) .how-step__num { animation-delay: 2.3s; }
.how-steps.is-running .how-step:nth-child(3) .how-step__num { animation-delay: 4.6s; }
@keyframes how-step-on {
	0%, 2%   { transform: scale(1);    border-color: var(--border); background: var(--bg-alt); box-shadow: 0 0 0 0 rgba(95,191,90,0); }
	8%, 26%  { transform: scale(1.12); border-color: var(--grass);  background: #16281c; box-shadow: 0 0 0 4px rgba(95,191,90,.12); }
	36%,100% { transform: scale(1);    border-color: var(--border); background: var(--bg-alt); box-shadow: 0 0 0 0 rgba(95,191,90,0); }
}
.how-steps.is-running .how-step h3 { animation: how-title-on 6.9s ease-in-out infinite; }
.how-steps.is-running .how-step:nth-child(2) h3 { animation-delay: 2.3s; }
.how-steps.is-running .how-step:nth-child(3) h3 { animation-delay: 4.6s; }
@keyframes how-title-on {
	0%, 4%   { color: var(--text); }
	10%, 26% { color: var(--grass); }
	34%,100% { color: var(--text); }
}

/* Fortschrittsbalken unter dem aktiven Schritt */
.how-step__bar {
	display: block;
	height: 2px;
	margin-top: .7rem;
	border-radius: 2px;
	background: var(--border);
	position: relative;
	overflow: hidden;
}
.how-step__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--grass), var(--diamond));
	transform: scaleX(0);
	transform-origin: left center;
}
.how-steps.is-running .how-step__bar::after { animation: how-bar-fill 6.9s linear infinite; }
.how-steps.is-running .how-step:nth-child(2) .how-step__bar::after { animation-delay: 2.3s; }
.how-steps.is-running .how-step:nth-child(3) .how-step__bar::after { animation-delay: 4.6s; }
@keyframes how-bar-fill {
	0%, 4%   { transform: scaleX(0); opacity: 1; }
	31%      { transform: scaleX(1); opacity: 1; }
	40%      { transform: scaleX(1); opacity: 0; }
	41%,100% { transform: scaleX(0); opacity: 0; }
}

/* ==========================================================================
   Locations
   ========================================================================== */
/*
 * Hintergrund: Datenpakete wandern zwischen den beiden Standorten hin und her.
 * .datalink--e laeuft nach rechts (DE -> USA), .datalink--w nach links.
 * Laeuft nur, solange die Sektion sichtbar ist (.is-running via main.js).
 */
.locations { position: relative; overflow: hidden; }
.locations > .wrap { position: relative; z-index: 1; }

.datalinks {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: .75;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.datalink {
	position: absolute;
	left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
.datalink i {
	position: absolute;
	top: -3px;
	left: 0;
	width: 7px; height: 7px;
	border-radius: 2px;
	opacity: 0;
	will-change: transform;
}
.datalink i::after {
	content: "";
	position: absolute;
	top: 2px;
	width: 46px; height: 3px;
	border-radius: 2px;
}
.datalink--e i {
	background: var(--grass);
	box-shadow: 0 0 10px rgba(95,191,90,.75);
}
.datalink--e i::after {
	right: 100%;
	background: linear-gradient(270deg, rgba(95,191,90,.65), rgba(95,191,90,0));
}
.datalink--w i {
	background: var(--diamond);
	box-shadow: 0 0 10px rgba(79,209,197,.75);
}
.datalink--w i::after {
	left: 100%;
	background: linear-gradient(90deg, rgba(79,209,197,.65), rgba(79,209,197,0));
}
.locations.is-running .datalink--e i { animation: packet-east 7s linear infinite; }
.locations.is-running .datalink--w i { animation: packet-west 7s linear infinite; }
@keyframes packet-east {
	0%        { transform: translateX(-60px); opacity: 0; }
	6%        { opacity: 1; }
	94%       { opacity: 1; }
	100%      { transform: translateX(calc(100vw + 60px)); opacity: 0; }
}
@keyframes packet-west {
	0%        { transform: translateX(calc(100vw + 60px)); opacity: 0; }
	6%        { opacity: 1; }
	94%       { opacity: 1; }
	100%      { transform: translateX(-60px); opacity: 0; }
}

/* Die beiden Knotenpunkte, zwischen denen die Pakete pendeln */
.datanode {
	position: absolute;
	top: 50%;
	width: 130px; height: 130px;
	margin: -65px 0 0 -65px;
	border-radius: 50%;
}
.datanode--de { left: 22%; background: radial-gradient(circle, rgba(95,191,90,.16), rgba(95,191,90,0) 70%); }
.datanode--us { left: 78%; background: radial-gradient(circle, rgba(79,209,197,.16), rgba(79,209,197,0) 70%); }
.locations.is-running .datanode { animation: node-breathe 7s ease-in-out infinite; }
.locations.is-running .datanode--us { animation-delay: 3.5s; }
@keyframes node-breathe {
	0%, 100% { transform: scale(.85); opacity: .55; }
	50%      { transform: scale(1.15); opacity: 1; }
}

.location-grid {
	position: relative;
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	text-align: left;
}
.location-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 2rem;
}
.location-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.location-card__head h3 { margin: 0; font-size: 1.1rem; }
.location-card__head p { margin: 0; color: var(--text-muted); font-size: .85rem; }
.flag {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: .85rem;
}
.flag--de { background: linear-gradient(180deg,#3a3a3a 0 33%, var(--red) 33% 66%, var(--amber) 66% 100%); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.flag--us { background: linear-gradient(160deg, #2e4d8a, var(--diamond)); color: #fff; }
.ping-badge { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .78rem; color: var(--grass); }
.ping-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grass); animation: pulse 1.8s ease-in-out infinite; }
.location-card__text { color: var(--text-muted); font-size: .92rem; margin: 0; }

/* ==========================================================================
   Premium
   ========================================================================== */
.premium { background: var(--bg-alt); border-top: 1px solid var(--border); }
.premium__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }

/* Pulsierender Punkt vor "Bald verfuegbar" */
.premium__copy .eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.premium__copy .eyebrow::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 0 0 rgba(242,169,60,.55);
	animation: pulse-amber 1.8s ease-in-out infinite;
}
@keyframes pulse-amber {
	0%   { box-shadow: 0 0 0 0 rgba(242,169,60,.5); }
	70%  { box-shadow: 0 0 0 7px rgba(242,169,60,0); }
	100% { box-shadow: 0 0 0 0 rgba(242,169,60,0); }
}

.premium-list { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; }
.premium-list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.premium-list span { color: var(--amber); display: inline-block; }
/* Die drei "+" drehen sich nacheinander einmal um sich selbst */
.premium.is-running .premium-list li span { animation: plus-spin 5.6s ease-in-out infinite; }
.premium.is-running .premium-list li:nth-child(2) span { animation-delay: .35s; }
.premium.is-running .premium-list li:nth-child(3) span { animation-delay: .7s; }
@keyframes plus-spin {
	0%, 8%   { transform: rotate(0deg) scale(1); }
	16%      { transform: rotate(180deg) scale(1.25); }
	24%,100% { transform: rotate(360deg) scale(1); }
}
.premium-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 2rem;
	position: relative;
	box-shadow: var(--shadow);
}
/* Karte schwebt sanft, sobald die Sektion sichtbar ist */
.premium.is-running .premium-card { animation: premium-float 5.6s ease-in-out infinite; }
@keyframes premium-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-8px) rotate(.4deg); }
}
.premium-card__row { display: flex; justify-content: space-between; font-size: .85rem; color: var(--text-muted); margin-bottom: .5rem; }
.premium-card__row--tight { margin-top: 1.25rem; }
.bar { height: 10px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; margin-bottom: .8rem; }
.bar__fill { display: block; height: 100%; border-radius: 999px; }
/*
 * Free vs. Premium im Loop: Erst fuellt sich der Free-Balken auf 35%,
 * dann zieht der Premium-Balken auf 85% davon — alle 5,6s von vorn.
 */
.bar__fill--free { width: 35%; background: var(--diamond); }
.bar__fill--premium { width: 85%; background: var(--grass); }
.premium.is-running .bar__fill--free { animation: bar-free 5.6s ease-in-out infinite; }
.premium.is-running .bar__fill--premium { animation: bar-premium 5.6s ease-in-out infinite; }
@keyframes bar-free {
	0%, 6%    { width: 0; }
	26%, 100% { width: 35%; }
}
@keyframes bar-premium {
	0%, 20%   { width: 0; }
	48%       { width: 88%; }
	56%, 100% { width: 85%; }
}
.premium-card__badge {
	position: absolute; top: -14px; right: 20px;
	background: var(--amber); color: #1a1103;
	font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
	padding: .4rem .8rem; border-radius: 999px;
	overflow: hidden;
}
/* Badge wippt kurz, wenn der Premium-Balken sein Ziel erreicht */
.premium.is-running .premium-card__badge { animation: badge-hop 5.6s ease-in-out infinite; }
@keyframes badge-hop {
	0%, 48%   { transform: translateY(0) rotate(0deg); }
	54%       { transform: translateY(-6px) rotate(-3deg); }
	60%       { transform: translateY(0) rotate(2deg); }
	64%, 100% { transform: translateY(0) rotate(0deg); }
}
/* Licht-Schimmer laeuft ueber das Badge */
.premium-card__badge::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 40%;
	left: -60%;
	background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
}
.premium.is-running .premium-card__badge::after { animation: badge-shine 5.6s linear infinite; }
@keyframes badge-shine {
	0%, 50%   { left: -60%; }
	68%, 100% { left: 130%; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__inner { max-width: 780px; }
.faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.1rem 1.5rem;
}
.faq-item summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	position: absolute; right: 0; top: -2px;
	font-size: 1.3rem; color: var(--grass);
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: var(--text-muted); margin: .9rem 0 0; font-size: .93rem; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
	background: linear-gradient(120deg, rgba(95,191,90,.14), rgba(79,209,197,.1));
	border-top: 1px solid var(--border);
	padding: 80px 0;
	text-align: center;
}
.cta-band__inner h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 640px; margin: 0 auto .5rem; }
.cta-band__inner .btn { margin-top: 1.5rem; }

/*
 * Klick-Demo: Ein Pixel-Mauszeiger faehrt alle 6s ins Bild, drueckt den
 * Button (der gibt sichtbar nach), ein Ring breitet sich aus, dann zieht
 * der Zeiger wieder ab. Laeuft nur bei sichtbarer Sektion (.is-running).
 */
.cta-demo { position: relative; display: inline-block; }
.cta-demo__btn { position: relative; }
.cta-band.is-running .cta-demo__btn { animation: cta-press 6s ease-in-out infinite; }
@keyframes cta-press {
	0%, 45%   { transform: scale(1); filter: brightness(1); }
	48%       { transform: scale(.94); filter: brightness(.88); }
	53%       { transform: scale(1.04); filter: brightness(1.08); }
	58%, 100% { transform: scale(1); filter: brightness(1); }
}

/* Klick-Ring */
.cta-demo__ring {
	position: absolute;
	inset: -5px;
	border: 2px solid rgba(95,191,90,.9);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}
.cta-band.is-running .cta-demo__ring { animation: cta-ring 6s ease-out infinite; }
@keyframes cta-ring {
	0%, 47%   { opacity: 0; transform: scale(.9); }
	50%       { opacity: 1; transform: scale(1); }
	68%       { opacity: 0; transform: scale(1.45); }
	100%      { opacity: 0; transform: scale(1.45); }
}

/* Pixel-Mauszeiger */
.cta-demo__cursor {
	position: absolute;
	left: 58%;
	top: 38%;
	width: 26px;
	height: auto;
	opacity: 0;
	pointer-events: none;
	filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
	will-change: transform, opacity;
}
.cta-band.is-running .cta-demo__cursor { animation: cta-cursor 6s ease-in-out infinite; }
@keyframes cta-cursor {
	0%        { transform: translate(120px, 90px) scale(1); opacity: 0; }
	10%       { opacity: 1; }
	34%       { transform: translate(4px, 6px) scale(1); }
	45%       { transform: translate(0, 0) scale(1); opacity: 1; }
	48%       { transform: translate(1px, 3px) scale(.86); }
	53%       { transform: translate(0, 0) scale(1); }
	72%       { transform: translate(0, 0) scale(1); opacity: 1; }
	92%, 100% { transform: translate(140px, 60px) scale(1); opacity: 0; }
}

/* Echtes Hover pausiert die Demo, damit sie dem Klick nicht dazwischenfunkt */
.cta-demo:hover .cta-demo__btn,
.cta-demo:hover .cta-demo__ring,
.cta-demo:hover .cta-demo__cursor { animation-play-state: paused; }
.cta-demo:hover .cta-demo__cursor { opacity: 0; }

/* ==========================================================================
   Elementor-Hilfsklassen (fuer die mitgelieferten Templates)
   ========================================================================== */
.anim-center .mc-scene { margin-left: auto; margin-right: auto; }
.anim-center .mc-scene--char { --mc-char-h: 260px; }

/* ==========================================================================
   Status-Seite (gerendert via Shortcode [status])
   ========================================================================== */
.status .section__lead { max-width: 640px; }
.status__h { font-size: 1.2rem; margin: 2.4rem 0 1rem; }

/* Gesamt-Banner */
.status-banner {
	display: flex;
	align-items: center;
	gap: .7rem;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	padding: .9rem 1.2rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--panel);
}
.status-banner--ok   { border-color: rgba(95,191,90,.45);  background: rgba(95,191,90,.08); }
.status-banner--warn { border-color: rgba(242,169,60,.5);  background: rgba(242,169,60,.08); }
.status-banner__time {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: .78rem;
	color: var(--text-muted);
}

/* Punkte */
.status-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	flex: none;
	display: inline-block;
}
.status-dot--ok {
	background: var(--grass);
	box-shadow: 0 0 0 0 rgba(95,191,90,.5);
	animation: status-ping-ok 2.4s ease-out infinite;
}
@keyframes status-ping-ok {
	0%   { box-shadow: 0 0 0 0 rgba(95,191,90,.45); }
	70%  { box-shadow: 0 0 0 7px rgba(95,191,90,0); }
	100% { box-shadow: 0 0 0 0 rgba(95,191,90,0); }
}
.status-dot--warn,
.status-dot--down {
	background: var(--red);
	animation: status-blink 1.1s steps(2, jump-none) infinite;
}
.status-dot--warn { background: var(--amber); }
.status-dot--maint { background: var(--amber); }
@keyframes status-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

/* Dienste-Liste */
.status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 1.1rem;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.status-row__name { font-weight: 700; }
.status-state {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-mono);
	font-size: .78rem;
}
.status-state--ok    { color: var(--grass); }
.status-state--down  { color: var(--red); }
.status-state--maint { color: var(--amber); }

/* Server-Raster */
.status-grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: .75rem;
}
.status-cell {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1rem 1.1rem;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	transition: border-color .2s ease, transform .2s ease;
}
.status-cell:hover { transform: translateY(-2px); }
.status-cell--ok:hover { border-color: var(--grass); }
.status-cell--down { border-color: rgba(229,84,79,.55); background: rgba(229,84,79,.07); }
.status-cell__name { font-weight: 800; }
.status-cell__region {
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--text-muted);
}

/* Stoerungs-Notiz */
.status-note {
	margin-top: 1.2rem;
	padding: .85rem 1.1rem;
	border-left: 3px solid var(--red);
	background: rgba(229,84,79,.07);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: var(--text-muted);
}
.status-note strong { color: var(--red); }

/* ==========================================================================
   Impressum (gerendert via Shortcode [impressum])
   ========================================================================== */
.legal { max-width: 720px; }
.legal__intro { color: var(--text-muted); }
.legal h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
.legal h3 { font-size: 1.05rem; margin: 1.8rem 0 .45rem; }
.legal p { color: var(--text-muted); line-height: 1.65; margin: 0 0 .6rem; }

/* ==========================================================================
   Teamseite (gerendert via Shortcodes [team_hero] / [team_cards] / [team_jobs])
   ========================================================================== */
.team-hero {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 3rem;
	align-items: center;
}
.team-hero__anim .mc-scene { margin-left: auto; margin-right: auto; }
.team-hero__anim .mc-scene--char { --mc-char-h: 260px; }
.team-jobs__cta { margin-top: 2rem; }
.team-jobs__note { color: var(--text-muted); font-size: .88rem; margin-top: .75rem; }
@media (max-width: 820px) {
	.team-hero { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   Kachel-Komponente (Team, Stellen, Kontaktwege)
   Wird in den Elementor-Templates ueber je EIN HTML-Widget genutzt.
   ========================================================================== */
.mc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}
.mc-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mc-card:hover {
	transform: translateY(-4px);
	border-color: var(--grass);
	box-shadow: 0 14px 30px -18px rgba(0,0,0,.8);
}
.mc-card h3 { margin: 0; font-size: 1.02rem; }
.mc-card__role {
	font-family: var(--font-mono);
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--grass);
	margin: .3rem 0 .65rem;
}
.mc-card p { color: var(--text-muted); font-size: .9rem; margin: 0; line-height: 1.55; }
.mc-card__meta {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--amber);
	background: rgba(242,169,60,.12);
	border-radius: 999px;
	padding: .25rem .7rem;
	margin-bottom: .7rem;
}
.mc-card a { color: var(--diamond); text-decoration: none; font-weight: 700; }
.mc-card a:hover { text-decoration: underline; }

/* Pixel-Avatar: blockiger Kopf aus purem CSS (Haare oben, Gesicht, Augen).
   Farbvarianten ueber --av-hair / --av-skin. */
.mc-avatar {
	--av-hair: #4a3222;
	--av-skin: #c39070;
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	margin-bottom: 1rem;
	background: linear-gradient(180deg, var(--av-hair) 0 36%, var(--av-skin) 36% 100%);
	box-shadow: inset 0 0 0 2px rgba(0,0,0,.28);
	transition: transform .2s ease;
}
.mc-avatar::before,
.mc-avatar::after { content: ""; position: absolute; top: 46%; }
/* Augenweiss */
.mc-avatar::before {
	left: 21%;
	width: 10px; height: 9px;
	background: #f2f5f9;
	box-shadow: 17px 0 0 #f2f5f9;
}
/* Iris (blickt leicht zur Mitte) */
.mc-avatar::after {
	left: calc(21% + 5px);
	width: 5px; height: 9px;
	background: #35357e;
	box-shadow: 17px 0 0 #35357e;
}
.mc-card:hover .mc-avatar { transform: rotate(-4deg) scale(1.06); }
.mc-avatar--b { --av-hair: #1f1b18; --av-skin: #8a5f43; }
.mc-avatar--c { --av-hair: #b3742a; --av-skin: #d8a684; }
.mc-avatar--d { --av-hair: #7a2f26; --av-skin: #c39070; }
.mc-avatar--e { --av-hair: #565b64; --av-skin: #a97e5e; }
.mc-avatar--f { --av-hair: #274a2b; --av-skin: #d8a684; }

/* Kontaktwege: quadratisches Mono-Zeichen statt Avatar */
.mc-card__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 10px;
	margin-bottom: 1rem;
	font-family: var(--font-mono);
	font-size: 1.15rem;
	font-weight: 700;
	color: #06170a;
	background: var(--grass);
}
.mc-card__glyph--diamond { background: var(--diamond); }
.mc-card__glyph--amber { background: var(--amber); }

/* "SOON"-Badge (z. B. Discord-Link im Footer) */
.soon-badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: #1a1103;
	background: var(--amber);
	border-radius: 999px;
	padding: .12rem .45rem;
	margin-left: .3rem;
	vertical-align: middle;
	transform: translateY(-1px);
}

/* ==========================================================================
   Sprachumschalter (sticky, unten links)
   ========================================================================== */
.lang-switch {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 300;
	font-family: var(--font-mono);
}
.lang-switch__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--panel);
	color: var(--text);
	font-family: inherit;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 24px -10px rgba(0,0,0,.6);
	transition: border-color .2s ease, transform .2s ease;
}
.lang-switch__btn:hover { border-color: var(--grass); transform: translateY(-1px); }
.lang-flag { width: 20px; height: 14px; border-radius: 3px; display: block; flex: none; }
.lang-switch__chev {
	width: 7px; height: 7px;
	border-right: 2px solid var(--text-muted);
	border-bottom: 2px solid var(--text-muted);
	transform: rotate(-135deg) translate(-1px, -1px); /* zeigt nach oben: Menue oeffnet nach oben */
	transition: transform .2s ease;
}
.lang-switch.is-open .lang-switch__chev { transform: rotate(45deg); }

.lang-switch__menu {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	min-width: 168px;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: 0 16px 40px -12px rgba(0,0,0,.7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.lang-switch.is-open .lang-switch__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.lang-switch__item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .6rem;
	border-radius: 8px;
	color: var(--text);
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
}
.lang-switch__item:hover { background: var(--bg-alt); }
.lang-switch__item.is-current { color: var(--grass); }
.lang-switch__item.is-current::after {
	content: "✓";
	margin-left: auto;
	font-size: .75rem;
}

@media (max-width: 640px) {
	.lang-switch { left: 12px; bottom: 12px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding-top: 64px; }
.site-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 48px;
}
.footer-col--brand p { color: var(--text-muted); font-size: .9rem; max-width: 280px; }
.brand--footer { margin-bottom: 1rem; }
.footer-domain { font-family: var(--font-mono); color: var(--grass); font-size: .9rem; }
.footer-widget__title { font-size: .95rem; margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: .7rem; }
.footer-links a { color: var(--text-muted); font-size: .9rem; }
.footer-links a:hover { color: var(--grass); }

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	border-top: 1px solid var(--border);
	padding: 24px 0;
	color: var(--text-muted);
	font-size: .82rem;
}
.footer-nav { display: flex; gap: 1.5rem; }
.footer-nav a { color: var(--text-muted); }
.footer-nav a:hover { color: var(--text); }

/* ==========================================================================
   Blog / Standard pages
   ========================================================================== */
.page-wrap { padding: 64px 0 96px; }
.page-wrap--narrow { max-width: 760px; }
.page-header h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; }
.post-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.post-card__thumb img { width: 100%; }
.post-card__body { padding: 1.5rem; }
.post-card__title { font-size: 1.1rem; margin-bottom: .3rem; }
.post-card__meta { color: var(--text-muted); font-size: .8rem; font-family: var(--font-mono); }
.post-card__excerpt { color: var(--text-muted); font-size: .92rem; }
.entry-content { font-size: 1.02rem; }
.entry-content img { border-radius: var(--radius); margin: 1.5rem 0; }
.single-content__thumb img { border-radius: var(--radius); margin-bottom: 2rem; }

.error-404 { text-align: center; padding-top: 40px; }
.build-stack--broken { height: 160px; margin: 0 auto 2rem; }
.build-stack--broken .build-block--3 { transform: translateX(30px) rotate(8deg); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { order: -1; }
	.feature-grid { grid-template-columns: repeat(2, 1fr); }
	.how__inner, .premium__inner { grid-template-columns: 1fr; }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.section { padding: 64px 0; }
	.feature-grid, .location-grid, .post-grid { grid-template-columns: 1fr; }
	.hero__form { flex-direction: column; }
	.site-footer__top { grid-template-columns: 1fr; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}