@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('open_sans.woff2') format('woff2');
}

/* ==================================================================
   Tokens
   Himmel, Mond, Sterne, Wolken und Rakete folgen 1:1 der Hero-Sektion
   von redim.dev. Die Wolken-Boxen sind hier aber breiten- statt
   höhenbasiert gerechnet, weil die Seite nur einen Bildschirm hoch ist.

   Silhouettenanteil je SVG (gemessen): weiss 17,6 % · mittelblau 18,5 %
   · dunkelblau 26,9 % der gerenderten Ebenenhöhe. Bei background-size:
   cover ergibt das über die Seitenverhältnisse: 5,14vw · 6,36vw · 11,25vw.
   ================================================================== */
:root {
	--sky-top:#0a2c3f; --sky-bottom:#11455f;
	--petrol:#165678; --petrol-d:#024667;
	--orange:#ED7100; --orange-l:#FF7A00;

	--ink:#ffffff;
	--ink-soft:rgba(255,255,255,.80);
	--ink-mute:rgba(255,255,255,.58);
	--ink-faint:rgba(255,255,255,.42);

	--ease:cubic-bezier(.16,1,.3,1);
	--px:clamp(1.25rem,.8rem + 2vw,3rem);

	/* Weiße Standfläche unter den Wolken — hier steht der Footer */
	--ground:max(38px,2.6vw);
	/* Oberkante je Wolkenebene über dem Bildschirmrand */
	--crest-front:calc(var(--ground) + 5.14vw);
	--crest-mid:calc(var(--ground) + 7.5vw);
	--crest-back:calc(var(--ground) + 8.8vw);

	--mx:0; --my:0;
}

*,*::before,*::after { box-sizing:border-box }
* { margin:0; padding:0 }
html { -webkit-text-size-adjust:100% }

body {
	position:relative;
	min-height:100svh;
	display:flex;
	flex-direction:column;
	overflow-x:hidden;
	font-family:'Open Sans',system-ui,'Segoe UI',sans-serif;
	font-size:clamp(.94rem,.9rem + .18vw,1.02rem);
	line-height:1.62;
	color:var(--ink);
	background:linear-gradient(var(--sky-top) 0%, var(--sky-bottom) 72%) no-repeat fixed;
	background-color:var(--sky-bottom);
	-webkit-font-smoothing:antialiased;
}

a { color:inherit }
:focus-visible { outline:2px solid var(--orange-l); outline-offset:3px; border-radius:6px }

/* ==================================================================
   Szene
   ================================================================== */
.scene { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0 }

/* ---- Sterne ---- */
.stars { position:absolute; left:0; right:0; top:0; height:60%; z-index:0;
	transform:translate3d(calc(var(--mx) * -1px), calc(var(--my) * -1px), 0) }
.star { position:absolute; background:#fff; border-radius:50%; opacity:.5;
	animation:twinkle 3s ease-in-out infinite; will-change:opacity }
@keyframes twinkle { 0%,100%{opacity:.18} 50%{opacity:.95} }

/* ---- Mond: reines CSS, kein Bild ---- */
.moon { position:absolute; top:7%; left:6%; width:clamp(64px,8vw,120px); aspect-ratio:1;
	border-radius:50%; z-index:1;
	background:radial-gradient(circle at 36% 32%, #fbf5e4, #ece0c4 58%, #d3c5a1);
	box-shadow:0 0 46px rgba(252,245,225,.4), inset -7px -7px 16px rgba(40,30,10,.16);
	transform:translate3d(calc(var(--mx) * 1.6px), calc(var(--my) * 1.6px), 0);
	animation:drift 16s var(--ease) infinite alternate }
.moon::before,
.moon::after { content:''; position:absolute; border-radius:50%; background:rgba(70,55,25,.12) }
.moon::before { width:20%; height:20%; top:26%; left:30% }
.moon::after  { width:13%; height:13%; top:56%; left:60% }
@keyframes drift { from{translate:0 0} to{translate:0 14px} }

/* ---- Rakete: steckt zwischen mittlerer (z2) und weißer Wolke (z4) ---- */
.rocket { position:absolute; right:7%; bottom:calc(var(--crest-front) - 2vw);
	width:clamp(58px,7vw,110px); z-index:3;
	transform:translate3d(calc(var(--mx) * 2px), calc(var(--my) * 2px), 0);
	animation:fly 9s var(--ease) infinite alternate }
.rocket-img { width:100%; height:auto; display:block;
	filter:drop-shadow(0 16px 26px rgba(0,0,0,.25)) }
.rocket-trail { position:absolute; left:50%; top:55%; transform:translateX(-50%);
	width:18px; height:380px; border-radius:12px; filter:blur(2px); z-index:-2;
	background:linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.4) 45%, rgba(255,255,255,0));
	animation:trailpulse 1.6s ease-in-out infinite }
@keyframes trailpulse {
	0%,100% { opacity:.55; transform:translateX(-50%) scaleY(.96) }
	50%     { opacity:.9;  transform:translateX(-50%) scaleY(1.04) }
}
@keyframes fly { from{translate:0 6px} to{translate:0 -18px} }

/* ---- Wolken ---- */
.clouds { position:absolute; left:0; width:100%; bottom:-30px; display:block;
	background-repeat:no-repeat; background-position:center top; background-size:cover }
.clouds-back  { height:calc(30px + var(--crest-back));  z-index:1; background-image:url('wolken-dunkelblau.svg') }
.clouds-mid   { height:calc(30px + var(--crest-mid));   z-index:2; background-image:url('wolken-mittelblau.svg') }
.clouds-front { height:calc(30px + var(--crest-front)); z-index:4; background-image:url('wolken-weiss.svg') }

/* ==================================================================
   Inhalt
   ================================================================== */
.shell { position:relative; z-index:5; flex:1 0 auto;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:clamp(.6rem,.5rem + .38vw,.8rem);
	padding:clamp(.7rem,.55rem + .7vw,1rem) var(--px) calc(var(--crest-back) + 8px);
	text-align:center }
.stage { width:100%; max-width:48rem; display:flex; flex-direction:column; align-items:center;
	gap:clamp(.6rem,.5rem + .38vw,.8rem) }

/* Alle fünf Sprachfassungen liegen im selben Dokument — und zwar
   übereinander in derselben Rasterzelle. Die Höhe richtet sich damit
   immer nach der längsten Sprache und ändert sich beim Wechsel nicht.
   Ohne das verschiebt sich der zentrierte Block, und der Sprachschalter
   springt, weil er anders als der Text nicht mit animiert wird.
   Die inaktiven Fassungen bleiben im Layout, sind aber unsichtbar und
   per inert/aria-hidden weder fokussierbar noch für Screenreader da. */
[hidden] { display:none !important }
.texte { width:100%; display:grid }
.t { grid-area:1 / 1; width:100%;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:clamp(.6rem,.5rem + .38vw,.8rem) }
.ctas { width:100%; display:grid; justify-items:center }
.cta { grid-area:1 / 1 }
/* opacity:0 zusätzlich zu visibility — doppelt abgesichert, falls an einem
   Kindelement doch einmal ein Übergang auf visibility hängt */
.t.is-off,
.cta.is-off { visibility:hidden; opacity:0; pointer-events:none }

/* ---- Sprachwahl: Segment-Schalter, bewusst neutral.
       Orange bleibt dem CTA vorbehalten, sonst konkurrieren zwei
       orange Flächen um dieselbe Aufmerksamkeit. ---- */
.lang { position:relative; display:inline-flex; align-items:center; gap:1px;
	padding:3px 3px 3px 9px; border-radius:999px;
	background:rgba(6,24,36,.42); border:1px solid rgba(255,255,255,.13);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px -14px rgba(0,0,0,.9);
	backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%) }
.lang__icon { display:grid; place-items:center; margin-right:.42rem; color:rgba(255,255,255,.4) }
.lang__icon svg { width:13px; height:13px; display:block; fill:none; stroke:currentColor;
	stroke-width:1.7 }

/* Die weiße Pille ist ein eigenes Element und gleitet per transform zum
   gewählten Kürzel. Position und Breite setzt das Skript, die Bewegung
   macht diese Transition — dadurch läuft sie in jedem Browser gleich. */
.lang__pille { position:absolute; top:3px; left:0; z-index:0;
	width:var(--pille-w,0px); height:calc(100% - 6px);
	border-radius:999px; background:#fff; pointer-events:none;
	box-shadow:0 2px 8px -2px rgba(0,0,0,.55);
	transform:translateX(var(--pille-x,0px)) }
.lang.is-bereit .lang__pille {
	transition:transform .42s cubic-bezier(.34,1.2,.44,1),
	           width .42s cubic-bezier(.34,1.2,.44,1) }

.lang a { position:relative; z-index:1; display:inline-flex; padding:.28rem .66rem;
	border-radius:999px; font-size:.71rem; font-weight:700; letter-spacing:.07em;
	color:rgba(255,255,255,.52); text-decoration:none;
	transition:color .3s var(--ease) }
.lang a:hover { color:#fff }
.lang a.is-active { color:#0b2c3f }

/* ---- Text ---- */
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:700;
	letter-spacing:.18em; text-transform:uppercase; color:var(--orange-l) }
.eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--orange-l);
	box-shadow:0 0 0 4px rgba(255,122,0,.2) }

h1 { font-size:clamp(1.8rem,1.3rem + 1.7vw,2.6rem); font-weight:300; line-height:1.08;
	letter-spacing:-.02em; text-wrap:balance }
.lead { max-width:68ch; font-size:clamp(.99rem,.94rem + .26vw,1.08rem); line-height:1.54;
	color:var(--ink-soft); text-wrap:pretty }
.note { max-width:68ch; color:var(--ink-mute); text-wrap:pretty }
.disclaimer { max-width:60ch; font-size:.74rem; line-height:1.5; color:var(--ink-faint) }

/* ---- Info-Links ---- */
.links { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:.15rem }
/* Eigenschaften einzeln benennen, niemals "all": "all" schließt visibility
   ein, und visibility gilt während der gesamten Übergangsdauer noch als
   sichtbar. Die Buttons blieben dadurch nach dem Sprachwechsel 350 ms
   länger stehen als ihr Block — sie waren kurz doppelt zu sehen. */
.pill { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.05rem; border-radius:999px;
	background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
	font-size:.86rem; font-weight:600; text-decoration:none; white-space:nowrap;
	transition:background-color .35s var(--ease), border-color .35s var(--ease),
	           color .35s var(--ease), transform .35s var(--ease) }
.pill:hover { background:#fff; border-color:#fff; color:var(--petrol-d); transform:translateY(-2px) }
.pill svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
	stroke-linecap:round; stroke-linejoin:round; opacity:.5;
	transition:opacity .35s var(--ease), transform .35s var(--ease) }
.pill:hover svg { opacity:1; transform:translateX(3px) }

/* ---- CTA: schmale Leiste statt Kasten ---- */
.cta { position:relative; overflow:hidden;
	display:flex; align-items:center; gap:clamp(.6rem,.45rem + .55vw,.82rem);
	width:100%; max-width:48rem;
	padding:.6rem .62rem .6rem .78rem;
	border-radius:16px; text-decoration:none; text-align:left;
	background:linear-gradient(100deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
	border:1px solid rgba(255,255,255,.16);
	backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
	box-shadow:0 18px 44px -24px rgba(0,0,0,.75);
	transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease) }
.cta:hover { border-color:rgba(255,122,0,.5); transform:translateY(-2px);
	box-shadow:0 26px 54px -24px rgba(0,0,0,.85) }

.cta__icon { flex:0 0 auto; display:grid; place-items:center; width:32px; height:32px;
	border-radius:10px; background:linear-gradient(160deg,#FF8A2B,#ED7100);
	box-shadow:0 8px 18px -9px rgba(237,113,0,.95) }
.cta__icon svg { width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2;
	stroke-linecap:round; stroke-linejoin:round }

.cta__text { flex:1 1 auto; min-width:0 }
.cta__t { display:block; font-size:.95rem; font-weight:700; line-height:1.25;
	letter-spacing:-.008em; text-wrap:balance }
.cta__s { display:block; margin-top:.06rem; font-size:.72rem; line-height:1.4; color:var(--ink-soft) }

.cta__b { flex:0 0 auto; display:inline-flex; align-items:center; gap:.45rem;
	padding:.56rem .98rem; border-radius:999px; background:var(--orange);
	font-size:.82rem; font-weight:700; white-space:nowrap;
	box-shadow:0 10px 22px -11px rgba(237,113,0,.95);
	transition:background-color .35s var(--ease), gap .35s var(--ease) }
.cta:hover .cta__b { background:var(--orange-l); gap:.7rem }
.cta__b svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2;
	stroke-linecap:round; stroke-linejoin:round }

/* ==================================================================
   Footer — steht auf der weißen Wolkenfläche
   ================================================================== */
.foot { position:relative; z-index:6; flex:0 0 auto;
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
	gap:.35rem 1.5rem; min-height:var(--ground);
	padding:0 var(--px) clamp(.7rem,.5rem + .6vw,1.1rem);
	font-size:.76rem; color:#7d97a8 }
.foot nav { display:flex; gap:1.1rem }
/* Eigener Flex-Container statt display:contents — der braucht eine Box,
   damit die Rechtslinks beim Sprachwechsel mit animiert werden können */
.foot .fn { display:inline-flex; gap:1.1rem }
.foot a { color:var(--petrol); text-decoration:none; font-weight:600 }
.foot a:hover { color:var(--orange); text-decoration:underline; text-underline-offset:3px }

/* ==================================================================
   Responsive
   ================================================================== */
@media (max-width:1100px) { .rocket { display:none } }

@media (max-width:900px) {
	/* Die Seite scrollt: Szene über die volle Dokumenthöhe statt fix */
	.scene { position:absolute; height:100% }
	/* Wolkenebenen doppelt so breit wie der Bildschirm, sonst wird die
	   Silhouette auf dem Handy zu flach. Silhouetten verdoppeln sich damit. */
	.clouds { width:200%; left:-50% }
	:root {
		--ground:max(44px,7vw);
		--crest-front:calc(var(--ground) + 10.28vw);
		--crest-mid:calc(var(--ground) + 14.5vw);
		--crest-back:calc(var(--ground) + 17.5vw);
	}
	/* Icon und Text bleiben nebeneinander, der Button rutscht in die zweite Zeile */
	.cta { flex-wrap:wrap; row-gap:.7rem; padding:.7rem .75rem }
	.cta__b { flex:1 1 100%; justify-content:center; padding:.66rem 1.05rem }
	.foot { justify-content:center; text-align:center }
	.moon { top:1.5%; left:4%; width:clamp(54px,14vw,90px) }
}

@media (max-width:560px) {
	/* Zu schmal für Icon neben Text: Icon als Abzeichen obendrauf, alles zentriert */
	.cta { flex-direction:column; text-align:center; row-gap:.55rem;
		padding:.95rem .85rem .85rem }
	.cta__text { flex:0 0 auto }
	.cta__b { flex:0 0 auto; width:100% }
}

@media (max-width:480px) {
	.links { flex-direction:column; align-items:stretch }
	.pill { justify-content:center }
	.lang { padding:3px 3px 3px 7px }
	.lang a { padding:.28rem .5rem; letter-spacing:.04em }
	.lang__icon { margin-right:.3rem }
}

@media (prefers-reduced-motion:reduce) {
	* { animation:none !important; transition-duration:.01ms !important }
}

/* ==================================================================
   Sprachwechsel
   Alle fünf Fassungen stehen im selben Dokument, umgeschaltet wird per
   JavaScript. Bewusst ohne View Transitions: die Variante über den
   Seitenwechsel läuft nur in Chromium, das hier läuft überall gleich.

   Ablauf: die Pille gleitet sofort los (siehe .lang__pille), der alte
   Text zieht in 180 ms nach oben ab, dann kommt der neue von unten
   nach — der CTA mit etwas Verzögerung und einem Lichtstreifen.
   ================================================================== */
.t.is-rein   { animation:rein .4s var(--ease) both }
.t.is-raus   { animation:raus .18s cubic-bezier(.4,0,1,1) both }
.cta.is-rein { animation:cta-rein .52s var(--ease) .14s both }
.cta.is-raus { animation:raus .18s cubic-bezier(.4,0,1,1) both }

/* Die Rechtslinks im Footer wechseln mit, nur flacher — sie sitzen auf
   der weißen Wolkenfläche und sollen den Blick nicht vom Text abziehen */
.fn.is-rein { animation:fuss-rein .34s var(--ease) .06s both }
.fn.is-raus { animation:fuss-raus .18s cubic-bezier(.4,0,1,1) both }

@keyframes rein      { from { opacity:0; transform:translateY(12px) } }
@keyframes raus      { to   { opacity:0; transform:translateY(-9px) } }
@keyframes cta-rein  { from { opacity:0; transform:translateY(16px) scale(.985) } }
@keyframes fuss-rein { from { opacity:0; transform:translateY(7px) } }
@keyframes fuss-raus { to   { opacity:0; transform:translateY(-6px) } }

/* Lichtstreifen wandert einmal über die CTA-Leiste */
.cta::after { content:''; position:absolute; inset:0; border-radius:inherit;
	pointer-events:none; opacity:0; transform:translateX(-130%);
	background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.2) 46%, transparent 62%) }
.cta.is-rein::after { animation:glanz 1.15s cubic-bezier(.35,0,.2,1) .5s both }
@keyframes glanz {
	0%   { transform:translateX(-130%); opacity:0 }
	14%  { opacity:1 }
	100% { transform:translateX(130%);  opacity:0 }
}