/*
Theme Name: LSG Bocholt Redesign
Theme URI: https://www.lsg-bocholt.de
Author: LSG Bocholt e.V.
Author URI: https://www.lsg-bocholt.de
Description: v9.10 „Die Linie" — zwei sofort spürbare Neuerungen für echten Fluss: (1) sanftes Momentum-Scrolling am Desktop (das butterweiche, trägheitsbehaftete Gleiten der großen Design-Seiten) und (2) eine durchgehende Fluglinie — ein Kondensstreifen, der sich beim Scrollen über die GANZE Startseite hinabzeichnet, mit einem Segler an der zeichnenden Spitze, der alle Abschnitte zu einer einzigen Reise verbindet. Darunter der durchgehende Himmel aus v9.9 (durchsichtige 3D-Bühnen im selben Himmel) und die weichen Überblendungen aus v9.8. Alle Inhalte bleiben normale WordPress-Seiten mit Shortcodes.
Version: 9.10.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lsg-bocholt
*/
/* ════════════════════════════════════════════════════════════
DESIGN-TOKENS — „Ein Flugtag": Morgen → Mittag → Abend → Nacht
════════════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; overflow-x: clip; }
:root {
/* Farbwelt */
--tinte: #0F2440; /* Text, fast-schwarzes Blau */
--tinte-soft: #3C5573;
--tinte-muted: #7187A3;
--morgen-1: #D7EAFA; /* Hero-Himmel oben */
--morgen-2: #F2F8FE; /* Hero-Himmel unten */
--papier: #FCFDFE; /* helle Flächen (Mittag) */
--mist: #EDF4FB; /* Wechselflächen */
--wolke: #FFFFFF;
--thermik: #E8851C; /* Windsack-Orange — Akzent & CTAs */
--thermik-tief: #C2690B;
--thermik-hell: #FDEFDF;
--abend-1: #FFB35C; /* goldene Stunde (CTA-Banner) */
--abend-2: #FF7E4D;
--nacht: #0A1729; /* Footer, Video-Bühne */
--nacht-2: #102341;
--nacht-text: rgba(255,255,255,.92);
--nacht-soft: rgba(255,255,255,.72);
--nacht-muted: rgba(255,255,255,.45);
--nacht-linie: rgba(255,255,255,.12);
--linie: rgba(15,36,64,.12);
--linie-soft: rgba(15,36,64,.07);
/* Typografie — bewusst ohne externe Fonts (DSGVO) */
--schrift: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--schrift-display: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--schrift-akzent: Georgia, "Iowan Old Style", "Times New Roman", serif; /* kursive Akzente in Titeln */
--schrift-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* Instrumente */
/* Maße */
--breite: 1140px;
--breite-text: 780px;
--radius: 14px;
--radius-gross: 22px;
--schatten: 0 14px 40px -18px rgba(15,36,64,.28);
--schatten-tief:0 24px 60px -24px rgba(10,23,41,.5);
--abstand: clamp(72px, 11vw, 132px); /* Sektionsrhythmus */
--uebergang: .28s cubic-bezier(.2,.7,.3,1);
/* ── Kompatibilität zu v5–v7-Inhalten (alte Variablen bleiben gültig) ── */
--c-bg: var(--papier); --c-bg-alt: var(--mist);
--c-surface: var(--wolke); --c-text: var(--tinte);
--c-text-soft: var(--tinte-soft); --c-text-muted: var(--tinte-muted);
--c-border: var(--linie); --c-border-hover: rgba(15,36,64,.25);
--c-dark: var(--nacht); --c-dark-2: var(--nacht-2);
--c-accent: var(--thermik); --c-accent-dark: var(--thermik-tief);
--c-accent-light: var(--abend-1); --c-accent-bg: var(--thermik-hell);
--radius-lg: var(--radius); --font-head: var(--schrift-display);
}
/* ════════════════ Reset & Basis ════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--schrift);
font-size: 17px;
line-height: 1.75;
color: var(--tinte);
background: var(--papier);
/* WICHTIG (v9.0.1): Hier stand overflow-x: hidden — das erzeugt einen
Scroll-Container und hebelt damit jedes position:sticky auf der Seite
aus (die 3D-Bühne scrollte einfach weg). clip verhindert seitliches
Überlaufen genauso, ohne sticky kaputtzumachen. hidden bleibt als
Rückfallwert für sehr alte Browser stehen. */
overflow-x: hidden;
overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--thermik-tief); text-decoration: none; }
::selection { background: var(--thermik); color: #fff; }
h1, h2, h3, h4, h5 {
font-family: var(--schrift-display);
line-height: 1.12;
letter-spacing: -.015em;
color: var(--tinte);
margin: 0 0 .5em;
font-weight: 800;
text-wrap: balance;
}
h1 { font-size: clamp(38px, 6vw, 64px); }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: clamp(21px, 2.6vw, 27px); }
h4 { font-size: 19px; }
p { margin: 0 0 1.1em; }
/* Kursiver Serifen-Akzent in Überschriften: „Lautlos *fliegen.*" */
h1 em, h2 em, h3 em, .hero-titel em {
font-family: var(--schrift-akzent);
font-style: italic;
font-weight: 600;
letter-spacing: 0;
color: var(--thermik-tief);
}
/* Tastatur-Fokus deutlich, Maus-Fokus ruhig */
:focus-visible { outline: 3px solid var(--thermik); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--tinte); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
font-weight: 700;
}
.skip-link:focus { left: 0; }
/* ════════════════ Layout-Helfer ════════════════ */
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.wrap-text { max-width: var(--breite-text); margin: 0 auto; padding: 0 24px; }
/* Eyebrow im Instrumenten-Stil */
.kicker, .section-label {
font-family: var(--schrift-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--thermik-tief);
display: flex; align-items: center; gap: 12px;
margin: 0 0 14px;
}
.kicker::before, .section-label::before {
content: ""; width: 26px; height: 2px; background: var(--thermik);
flex: none; border-radius: 2px;
}
.abschnitt--zentriert .kicker, .abschnitt--zentriert .section-label,
.section-center .kicker, .section-center .section-label { justify-content: center; }
.section-sub, .untertitel {
font-size: clamp(16px, 1.6vw, 19px);
color: var(--tinte-soft);
max-width: 680px;
margin: 0 0 1.4em;
}
.abschnitt--zentriert .untertitel, .section-center .section-sub { margin-left: auto; margin-right: auto; }
/* ════════════════ Knöpfe ════════════════ */
.knopf, .btn-primary, .btn-outline, .btn-light,
.wp-block-button__link {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--schrift-display);
font-weight: 700; font-size: 16px;
padding: 15px 30px;
border-radius: 999px;
border: 2px solid transparent;
cursor: pointer;
transition: transform var(--uebergang), box-shadow var(--uebergang),
background var(--uebergang), color var(--uebergang), border-color var(--uebergang);
text-decoration: none;
line-height: 1.2;
}
.knopf--voll, .btn-primary, .wp-block-button__link {
background: var(--thermik); color: #fff;
box-shadow: 0 10px 26px -12px rgba(232,133,28,.65);
}
.knopf--voll:hover, .btn-primary:hover, .wp-block-button__link:hover {
background: var(--thermik-tief); color: #fff;
transform: translateY(-2px);
box-shadow: 0 16px 32px -12px rgba(194,105,11,.6);
}
.knopf--linie, .btn-outline {
background: transparent; color: var(--tinte); border-color: rgba(15,36,64,.35);
}
.knopf--linie:hover, .btn-outline:hover { border-color: var(--tinte); transform: translateY(-2px); }
.knopf--hell, .btn-light { background: #fff; color: var(--tinte); border-color: var(--linie); }
.knopf--hell:hover, .btn-light:hover { border-color: var(--tinte-soft); transform: translateY(-2px); }
.knopf--nacht { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.knopf--nacht:hover { background: rgba(255,255,255,.18); color: #fff; }
/* kleiner Segler fliegt im Hover an */
.knopf--voll .knopf-segler, .btn-primary .knopf-segler { width: 18px; height: 18px; flex: none; transition: transform var(--uebergang); }
.knopf--voll:hover .knopf-segler, .btn-primary:hover .knopf-segler { transform: translateX(5px) rotate(8deg); }
/* ════════════════ Navigation ════════════════ */
.navbar {
position: fixed; inset: 0 0 auto 0; z-index: 90;
display: flex; align-items: center; gap: 28px;
padding: 14px clamp(18px, 4vw, 44px);
background: transparent;
transition: background var(--uebergang), box-shadow var(--uebergang), padding var(--uebergang);
}
.navbar.scrolled, .navbar.offen {
background: rgba(252,253,254,.86);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 1px 0 var(--linie-soft), 0 10px 30px -22px rgba(15,36,64,.35);
padding-top: 10px; padding-bottom: 10px;
}
.nav-logo {
display: flex; align-items: center; gap: 12px;
font-family: var(--schrift-display); font-weight: 800; font-size: 18px;
color: var(--tinte); letter-spacing: -.01em;
}
.nav-logo img { width: 42px; height: 42px; object-fit: contain; }
.nav-logo .logo-zeichen { width: 40px; height: 40px; color: var(--thermik); flex: none; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; }
.nav-links a {
display: block; padding: 9px 14px; border-radius: 10px;
color: var(--tinte); font-weight: 600; font-size: 15px;
position: relative; transition: background var(--uebergang), color var(--uebergang);
}
.nav-links > li > a:hover { background: rgba(15,36,64,.06); }
.nav-links li { position: relative; }
.nav-links .sub-menu {
list-style: none; margin: 0; padding: 10px;
position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
box-shadow: var(--schatten);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-links .sub-menu a { padding: 10px 14px; border-radius: 10px; font-size: 14.5px; }
.nav-links .sub-menu a:hover { background: var(--mist); }
.nav-cta { margin-left: 8px; padding: 11px 22px !important; border-radius: 999px;
background: var(--thermik); color: #fff !important; font-weight: 700; font-size: 14.5px;
box-shadow: 0 8px 22px -10px rgba(232,133,28,.65); white-space: nowrap;
transition: background var(--uebergang), transform var(--uebergang);
}
.nav-cta:hover { background: var(--thermik-tief); transform: translateY(-1px); }
/* Hamburger */
.hamburger {
display: none; margin-left: auto; width: 44px; height: 44px;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
border-radius: 12px; cursor: pointer; border: 1px solid transparent;
}
.hamburger span { width: 22px; height: 2px; background: var(--tinte); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 920px) {
.hamburger { display: flex; }
.nav-cta { display: none; }
/* Aufklapp-Panel direkt unter der Leiste (rechts verankert).
Bewusst position:absolute statt fixed: Der Weichzeichner der Leiste
(backdrop-filter) macht sie zum Bezugsrahmen für fixe Kinder —
ein Vollbild-Overlay würde dadurch auf Leistenhöhe zusammenfallen. */
.nav-links {
position: absolute; top: calc(100% + 10px); right: 14px; left: 14px;
margin: 0; padding: 10px;
flex-direction: column; align-items: stretch; gap: 0;
background: #fff; border: 1px solid var(--linie);
border-radius: 22px;
box-shadow: 0 24px 60px -22px rgba(15,36,64,.4), 0 2px 10px rgba(15,36,64,.08);
max-height: calc(100dvh - 92px); overflow-y: auto;
opacity: 0; visibility: hidden;
transform: translateY(-10px) scale(.98); transform-origin: top right;
transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.3,1), visibility .26s;
}
/* Mobil-Bugfix v9: Während der Schließ-Animation blieb das Panel
~0,26 s lang tappbar — ein schneller Tipp direkt nach dem
Schließen traf so einen unsichtbaren Menüpunkt. */
.nav-links:not(.active) { pointer-events: none; }
.nav-links.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav-links > li { border-bottom: 1px solid var(--linie-soft); }
.nav-links > li:last-child { border-bottom: 0; }
.nav-links a { font-size: 17px; font-weight: 700; padding: 13px 14px; border-radius: 14px; }
.nav-links a:hover, .nav-links a:active { background: var(--mist); }
/* Untermenüs sind sofort sichtbar — nichts muss aufgeklappt werden */
.nav-links .sub-menu {
position: static; display: block; min-width: 0;
opacity: 1; visibility: visible; transform: none;
border: 0; box-shadow: none; background: transparent;
padding: 0 0 8px 16px;
}
.nav-links .sub-menu a {
font-size: 15px; font-weight: 600; color: var(--tinte-soft);
padding: 9px 14px; position: relative;
}
.nav-links .sub-menu a::before {
content: "→"; color: var(--thermik); margin-right: 8px; font-weight: 700;
}
/* Punkte gleiten nacheinander ein */
.nav-links > li { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }
.nav-links.active > li { opacity: 1; transform: none; }
.nav-links.active > li:nth-child(1) { transition-delay: .03s; }
.nav-links.active > li:nth-child(2) { transition-delay: .07s; }
.nav-links.active > li:nth-child(3) { transition-delay: .11s; }
.nav-links.active > li:nth-child(4) { transition-delay: .15s; }
.nav-links.active > li:nth-child(5) { transition-delay: .19s; }
.nav-links.active > li:nth-child(6) { transition-delay: .23s; }
.nav-links.active > li:nth-child(7) { transition-delay: .27s; }
.nav-links.active > li:nth-child(8) { transition-delay: .31s; }
}
/* ════════════════ HERO — Morgenhimmel ════════════════ */
.held {
position: relative;
min-height: min(100svh, 980px);
display: grid; align-content: center;
padding: clamp(130px, 16vh, 190px) 0 clamp(90px, 12vh, 150px);
background: linear-gradient(180deg, var(--morgen-1) 0%, var(--morgen-2) 62%, var(--papier) 100%);
overflow: clip;
isolation: isolate;
}
.held--bild { color: #fff; }
.held-medien { position: absolute; inset: -12% 0; z-index: -2; }
.held-medien img, .held-medien video { width: 100%; height: 100%; object-fit: cover; }
.held--bild::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(10,23,41,.32), rgba(10,23,41,.6) 80%);
}
.held--bild h1, .held--bild .untertitel, .held--bild .kicker { color: #fff; }
.held--bild .kicker::before { background: var(--abend-1); }
.held--bild h1 em { color: var(--abend-1); }
/* Himmelsbühne: Wolken & Segler (nur ohne eigenes Hintergrundbild) */
.himmel-buehne { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wolke-svg { position: absolute; color: #fff; opacity: .9; filter: drop-shadow(0 18px 30px rgba(120,160,200,.25)); }
.wolke-1 { width: 320px; top: 14%; left: -160px;
animation: wolkenzug 95s linear infinite, wolkenschweben 7s ease-in-out infinite; }
.wolke-2 { width: 210px; top: 36%; left: -120px; opacity: .75;
animation: wolkenzug 70s linear infinite -28s, wolkenschweben 5.5s ease-in-out infinite -2s; }
.wolke-3 { width: 460px; top: 6%; left: -240px; opacity: .65;
animation: wolkenzug 130s linear infinite -60s, wolkenschweben 9s ease-in-out infinite -4s; }
@keyframes wolkenzug { to { transform: translateX(calc(100vw + 600px)); } }
.segler-flug { position: absolute; top: 22%; left: -14%; width: 120px; color: var(--tinte); opacity: .85; animation: seglerzug 26s linear infinite; }
.segler-flug svg { width: 100%; height: auto; display: block; }
@keyframes seglerzug {
0% { transform: translate(0, 0) rotate(2deg); }
45% { transform: translate(58vw, -9vh) rotate(-2deg); }
100% { transform: translate(125vw, -16vh) rotate(1deg); }
}
.kondens {
position: absolute; top: calc(22% + 26px); left: -40%; width: 60%; height: 2px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.95));
border-radius: 2px; opacity: .8;
animation: seglerzug 26s linear infinite;
}
.held-inhalt { position: relative; max-width: var(--breite); margin: 0 auto; padding: 0 24px; width: 100%; }
.hero-titel, .held-inhalt h1 {
font-size: clamp(44px, 7.4vw, 86px);
letter-spacing: -.03em;
margin-bottom: .35em;
max-width: 13ch;
}
.held-inhalt .untertitel { font-size: clamp(17px, 2vw, 21px); max-width: 560px; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.scroll-hinweis {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .22em;
color: var(--tinte-soft); text-transform: uppercase;
}
.scroll-hinweis svg { animation: hinab 1.8s ease-in-out infinite; }
@keyframes hinab { 0%,100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(7px); opacity: .4; } }
/* ════════════════ Höhenmesser (Scroll-Vario, nur Desktop) ════════════════ */
.hoehenmesser {
position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 10px;
font-family: var(--schrift-mono); font-size: 10.5px; letter-spacing: .14em;
color: var(--tinte-muted);
opacity: 0; transition: opacity .4s ease;
pointer-events: none;
}
.hoehenmesser.sichtbar { opacity: 1; }
.hoehenmesser-skala { position: relative; width: 2px; height: 180px; background: var(--linie); border-radius: 2px; }
.hoehenmesser-segler {
position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
width: 26px; height: 26px; color: var(--thermik-tief);
transition: bottom .15s linear;
}
.hoehenmesser-wert { min-width: 5.5ch; text-align: center; }
.nachtmodus .hoehenmesser { color: var(--nacht-muted); }
.nachtmodus .hoehenmesser-skala { background: var(--nacht-linie); }
@media (max-width: 1280px) { .hoehenmesser { display: none; } }
/* ════════════════ Laufband ════════════════ */
.laufband {
overflow: hidden; white-space: nowrap;
border-block: 1px solid var(--linie-soft);
background: var(--wolke);
padding: 16px 0;
font-family: var(--schrift-mono); font-size: 13.5px; letter-spacing: .3em;
text-transform: uppercase; color: var(--tinte-soft);
}
.laufband-spur { display: inline-flex; gap: 0; animation: laufband 36s linear infinite; will-change: transform; }
.laufband-spur span { padding: 0 28px; }
.laufband-spur span::after { content: "✦"; color: var(--thermik); margin-left: 56px; font-size: 10px; vertical-align: 2px; }
@keyframes laufband { to { transform: translateX(-50%); } }
/* ════════════════ Abschnitte / Sektionen ════════════════ */
.abschnitt, .section { padding: var(--abstand) 0; position: relative; }
/* Basis-Flächen (normale Seiten: Impressum, Blog, Beiträge …).
Auf der durchgehenden Startseite werden diese im „Fluss"-Block
unten transparent geschaltet und wandern auf eine weich
auslaufende Ebene (.abschnitt-bg). */
.abschnitt--hell { background: var(--papier); }
.abschnitt--mist, .section--alt { background: var(--mist); }
.abschnitt--himmel { background: linear-gradient(180deg, var(--morgen-2), var(--mist)); }
.abschnitt--dunkel, .section--dark {
background:
radial-gradient(1100px 480px at 85% -10%, rgba(232,133,28,.16), transparent 60%),
linear-gradient(180deg, var(--nacht) 0%, var(--nacht-2) 100%);
color: var(--nacht-soft);
}
.abschnitt--dunkel :is(h1,h2,h3,h4), .section--dark :is(h1,h2,h3,h4) { color: #fff; }
.abschnitt--dunkel .untertitel, .section--dark .section-sub { color: var(--nacht-soft); }
.abschnitt--dunkel .kicker, .section--dark .section-label { color: var(--abend-1); }
.abschnitt--dunkel .kicker::before { background: var(--abend-1); }
.abschnitt--abend {
background: linear-gradient(135deg, var(--abend-1), var(--abend-2));
color: #2B1503;
}
.abschnitt--abend :is(h2,h3) { color: #2B1503; }
.abschnitt-kopf { margin-bottom: clamp(36px, 5vw, 56px); max-width: 760px; }
.abschnitt--zentriert .abschnitt-kopf { margin-inline: auto; text-align: center; }
/* feine Höhenlinien-Deko in dunklen Sektionen */
.abschnitt--dunkel::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
background-image: repeating-linear-gradient(180deg, transparent 0 90px, rgba(255,255,255,.04) 90px 91px);
}
/* ════════════════ Zahlen-Leiste (Instrumente) ════════════════ */
.zahlen, .stats-bar {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1px; background: var(--linie-soft);
border-block: 1px solid var(--linie-soft);
}
.zahl, .stat-item { background: var(--wolke); padding: 34px 22px; text-align: center; }
.zahl-wert, .stat-num {
font-family: var(--schrift-mono); font-weight: 700;
font-size: clamp(32px, 4vw, 46px); letter-spacing: -.02em;
color: var(--tinte); line-height: 1; font-variant-numeric: tabular-nums;
}
.zahl-wert .einheit { font-size: .5em; color: var(--thermik-tief); margin-left: 2px; }
.zahl-text, .stat-label {
margin-top: 10px;
font-family: var(--schrift-mono); font-size: 11.5px;
letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-muted);
}
/* ════════════════ Karten ════════════════ */
.karten, .card-grid {
display: grid; gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.karte, .card {
position: relative; display: flex; flex-direction: column;
background: var(--wolke);
border: 1px solid var(--linie);
border-radius: var(--radius-gross);
padding: 30px 28px 26px;
color: inherit;
transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
overflow: hidden;
}
a.karte:hover, a.card:hover {
transform: translateY(-6px);
box-shadow: var(--schatten);
border-color: rgba(15,36,64,.22);
}
.karte h3, .card h3 { font-size: 21px; margin-bottom: 8px; }
.karte p, .card p { color: var(--tinte-soft); font-size: 15.5px; margin-bottom: 14px; }
.karte-bild { margin: -30px -28px 22px; aspect-ratio: 16/9; overflow: hidden; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.karte:hover .karte-bild img { transform: scale(1.05); }
.karte-symbol, .card-icon {
width: 52px; height: 52px; border-radius: 14px;
display: grid; place-items: center; margin-bottom: 18px;
background: var(--thermik-hell); color: var(--thermik-tief);
}
.card-icon--accent { background: var(--mist); color: var(--tinte); }
.card-icon--green { background: #E5F3E4; color: #3F7A3A; }
.karte-link, .card-link {
margin-top: auto;
font-family: var(--schrift-mono); font-size: 12.5px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--thermik-tief);
display: inline-flex; align-items: center; gap: 8px;
}
.karte-link::after { content: "→"; transition: transform var(--uebergang); }
a.karte:hover .karte-link::after,
a.flugzeug-karte:hover .karte-link::after { transform: translateX(4px); }
/* ════════════════ Flotten-Karten (mit Mono-Spec-Zeile) ════════════════ */
.flotte { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(290px,100%), 1fr)); }
.flugzeug-karte {
display: flex; flex-direction: column; color: inherit;
background: var(--wolke); border: 1px solid var(--linie);
border-radius: var(--radius-gross); overflow: hidden;
transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
a.flugzeug-karte:hover { transform: translateY(-6px); box-shadow: var(--schatten); border-color: rgba(15,36,64,.22); }
.flugzeug-bild { aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(165deg, var(--morgen-1), var(--mist)); position: relative; }
.flugzeug-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.flugzeug-karte:hover .flugzeug-bild img { transform: scale(1.05); }
.flugzeug-rumpf { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.flugzeug-rumpf h3 { font-size: 21px; margin-bottom: 4px; }
.flugzeug-rolle {
font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--thermik-tief); margin-bottom: 12px;
}
.flugzeug-rumpf p { font-size: 15px; color: var(--tinte-soft); margin-bottom: 16px; }
.flugzeug-specs {
margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--linie);
display: flex; gap: 18px; flex-wrap: wrap;
font-family: var(--schrift-mono); font-size: 12.5px; color: var(--tinte-soft);
font-variant-numeric: tabular-nums;
}
.flugzeug-specs b { color: var(--tinte); font-weight: 700; }
/* Spec-Reihe auf Flugzeug-Detailseiten */
.specs {
display: grid; gap: 1px; background: var(--linie-soft);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
border: 1px solid var(--linie-soft); border-radius: var(--radius); overflow: hidden;
margin: 28px 0 36px;
}
.spec { background: var(--wolke); padding: 18px 20px; }
.spec-label {
font-family: var(--schrift-mono); font-size: 10.5px; letter-spacing: .2em;
text-transform: uppercase; color: var(--tinte-muted); margin-bottom: 6px;
}
.spec-wert { font-family: var(--schrift-mono); font-weight: 700; font-size: 21px; color: var(--thermik-tief); }
/* ════════════════ Schritte ════════════════ */
.schritte, .steps-grid {
display: grid; gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
counter-reset: schritt;
}
.schritt, .step {
background: var(--wolke); border: 1px solid var(--linie);
border-radius: var(--radius-gross); padding: 28px 26px;
position: relative;
}
.schritt-nr, .step-num {
font-family: var(--schrift-mono); font-weight: 700; font-size: 14px;
color: var(--thermik-tief); letter-spacing: .1em; margin-bottom: 14px;
display: inline-block; border-bottom: 2px solid var(--thermik); padding-bottom: 6px;
}
.schritt h4, .step h4 { margin-bottom: 8px; }
.schritt p, .step p { font-size: 15px; color: var(--tinte-soft); margin: 0; }
/* ════════════════ Band — volle Breite, Parallax, Platzhalter ════════════════ */
.band {
position: relative; overflow: hidden;
min-height: clamp(320px, 52vh, 560px);
display: grid; align-items: end;
border-radius: 0;
}
.band-medien { position: absolute; inset: -16% 0; }
.band-medien img { width: 100%; height: 100%; object-fit: cover; }
.band--leer .band-medien {
background:
radial-gradient(600px 220px at 18% 85%, rgba(255,255,255,.65), transparent 60%),
radial-gradient(700px 260px at 75% 20%, rgba(255,255,255,.5), transparent 65%),
linear-gradient(180deg, var(--morgen-1), #BBD8F1 60%, #A9CBEA);
}
.band--leer .band-medien::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(closest-side, #fff 56%, transparent 60%) 22% 68% / 220px 70px no-repeat,
radial-gradient(closest-side, #fff 56%, transparent 60%) 64% 30% / 300px 90px no-repeat,
radial-gradient(closest-side, #fff 56%, transparent 60%) 86% 75% / 180px 56px no-repeat;
opacity: .8; filter: blur(1px);
}
.band::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 38%, rgba(10,23,41,.55));
pointer-events: none;
}
.band--leer::after { background: linear-gradient(180deg, transparent 55%, rgba(15,36,64,.28)); }
.band-zeile {
position: relative; z-index: 1; width: 100%;
max-width: var(--breite); margin: 0 auto; padding: 26px 24px;
display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
color: #fff;
}
.band-zeit {
font-family: var(--schrift-mono); font-size: 13px; letter-spacing: .22em;
text-transform: uppercase; color: rgba(255,255,255,.92);
background: rgba(10,23,41,.42); padding: 7px 13px; border-radius: 999px;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.band--leer .band-zeit { background: rgba(15,36,64,.5); }
.band-text { font-family: var(--schrift-display); font-weight: 700; font-size: clamp(19px, 2.6vw, 27px); text-shadow: 0 2px 18px rgba(10,23,41,.45); }
/* ════════════════ Video-Bühne (Kino & Reel) ════════════════ */
.video-buehne { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); justify-items: center; }
.video-buehne .kino { width: min(920px, 100%); }
.kino, .reel {
position: relative; border-radius: var(--radius-gross); overflow: hidden;
background: linear-gradient(160deg, var(--nacht-2), var(--nacht));
box-shadow: var(--schatten-tief);
border: 1px solid var(--nacht-linie);
}
.kino { aspect-ratio: 16 / 9; width: 100%; }
.reel { aspect-ratio: 9 / 16; width: min(360px, 82vw); margin: 0 auto; }
.kino iframe, .reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Welche Fassung sieht wer? Desktop: Kino · Mobil: Reel */
.nur-kino { display: block; }
.nur-reel { display: none; }
@media (max-width: 760px) {
.nur-kino { display: none; }
.nur-reel { display: block; }
}
/* Fallback: existiert kein Querformat, zeigt der Desktop das Reel mittig */
.reel--auch-desktop { display: block; }
/* 2-Klick-Fassade (DSGVO: lädt erst nach Tippen, ohne externe Vorschaubilder) */
.video-fassade {
position: absolute; inset: 0; width: 100%; height: 100%;
display: grid; place-items: center; cursor: pointer; border: 0; padding: 0;
background:
radial-gradient(120% 90% at 80% 0%, rgba(232,133,28,.25), transparent 55%),
radial-gradient(110% 80% at 12% 100%, rgba(64,110,168,.35), transparent 60%),
linear-gradient(165deg, #15294B, var(--nacht));
color: #fff;
}
.video-fassade::before {
content: ""; position: absolute; inset: 0; opacity: .5;
background-image: repeating-linear-gradient(180deg, transparent 0 64px, rgba(255,255,255,.05) 64px 65px);
}
.fassade-kern { position: relative; display: grid; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.fassade-play {
width: 76px; height: 76px; border-radius: 50%;
display: grid; place-items: center;
background: var(--thermik); color: #fff;
box-shadow: 0 14px 40px -10px rgba(232,133,28,.8);
transition: transform var(--uebergang), background var(--uebergang);
}
.video-fassade:hover .fassade-play, .video-fassade:focus-visible .fassade-play { transform: scale(1.08); background: var(--thermik-tief); }
.fassade-titel { font-family: var(--schrift-display); font-weight: 700; font-size: 17px; }
.fassade-hinweis { font-size: 12px; color: var(--nacht-muted); max-width: 300px; line-height: 1.55; }
.fassade-hinweis a { color: var(--nacht-soft); text-decoration: underline; }
/* Redaktions-Hinweis (sehen nur eingeloggte Bearbeiter) */
.redaktions-tipp {
margin-top: 14px; padding: 12px 16px; border-radius: 12px;
border: 1px dashed rgba(232,133,28,.6);
background: rgba(232,133,28,.08);
font-size: 13.5px; color: inherit;
}
.abschnitt--dunkel .redaktions-tipp { color: var(--nacht-soft); }
.redaktions-tipp code {
font-family: var(--schrift-mono); font-size: 12px;
background: rgba(15,36,64,.08); padding: 2px 7px; border-radius: 6px;
}
.abschnitt--dunkel .redaktions-tipp code { background: rgba(255,255,255,.12); }
/* ════════════════ Instagram ════════════════ */
.insta-bereich { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 880px) { .insta-bereich { grid-template-columns: 1fr; } }
.insta-rahmen {
position: relative;
border-radius: var(--radius-gross); overflow: hidden;
border: 1px solid var(--linie);
background: var(--wolke);
box-shadow: var(--schatten);
min-height: 420px;
display: grid;
}
.insta-rahmen blockquote.instagram-media { margin: 0 !important; border: 0 !important; box-shadow: none !important; width: 100% !important; min-width: 0 !important; }
.insta-fassade {
display: grid; place-items: center; text-align: center;
padding: 40px 28px; cursor: pointer; border: 0; width: 100%;
background:
radial-gradient(90% 70% at 85% 10%, rgba(232,133,28,.14), transparent 60%),
linear-gradient(165deg, #FFFFFF, var(--mist));
color: var(--tinte);
}
.insta-zeichen {
width: 64px; height: 64px; border-radius: 18px; margin-bottom: 16px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--abend-1), var(--abend-2));
color: #fff; box-shadow: 0 14px 34px -12px rgba(255,126,77,.7);
}
.insta-fassade .fassade-hinweis { color: var(--tinte-muted); }
/* ════════════════ Stimmen ════════════════ */
.stimmen { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); }
.stimme {
background: var(--wolke); border: 1px solid var(--linie);
border-radius: var(--radius-gross); padding: 30px 28px;
position: relative;
}
.abschnitt--dunkel .stimme { background: rgba(255,255,255,.05); border-color: var(--nacht-linie); }
.stimme-zeichen { font-family: var(--schrift-akzent); font-size: 56px; line-height: .6; color: var(--thermik); display: block; margin-bottom: 14px; }
.stimme p { font-family: var(--schrift-akzent); font-style: italic; font-size: 18.5px; line-height: 1.65; }
.abschnitt--dunkel .stimme p { color: var(--nacht-text); }
.stimme-name { font-weight: 700; font-size: 15px; margin-top: 8px; }
.abschnitt--dunkel .stimme-name { color: #fff; }
.stimme-rolle { font-family: var(--schrift-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-muted); margin-top: 3px; }
.abschnitt--dunkel .stimme-rolle { color: var(--nacht-muted); }
/* ════════════════ CTA-Banner — goldene Stunde ════════════════ */
.cta-banner {
position: relative; overflow: hidden;
margin: var(--abstand) auto; max-width: min(calc(100% - 48px), var(--breite));
border-radius: calc(var(--radius-gross) + 6px);
background:
radial-gradient(680px 320px at 86% -20%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(125deg, var(--abend-1), var(--abend-2));
color: #2B1503;
text-align: center;
padding: clamp(48px, 7vw, 84px) 28px;
box-shadow: 0 30px 70px -30px rgba(255,126,77,.55);
}
.cta-banner::before {
content: ""; position: absolute; left: -8%; bottom: 10%;
width: 240px; height: 2px; background: rgba(255,255,255,.85); border-radius: 2px;
transform: rotate(-7deg);
}
.cta-banner h3 { font-size: clamp(26px, 3.6vw, 38px); color: #2B1503; margin-bottom: 10px; }
.cta-banner p { max-width: 560px; margin: 0 auto 26px; color: rgba(43,21,3,.85); font-size: 17px; }
.cta-banner .btn-primary, .cta-banner .knopf--voll {
background: var(--tinte); box-shadow: 0 14px 34px -14px rgba(15,36,64,.7);
}
.cta-banner .btn-primary:hover, .cta-banner .knopf--voll:hover { background: #091A31; }
.cta-trust {
margin-top: 20px !important;
font-family: var(--schrift-mono); font-size: 11.5px !important;
letter-spacing: .14em; text-transform: uppercase; color: rgba(43,21,3,.7) !important;
}
/* ════════════════ Footer — Nachtflug ════════════════ */
.footer {
position: relative;
background:
radial-gradient(900px 380px at 12% -10%, rgba(64,110,168,.28), transparent 60%),
linear-gradient(180deg, var(--nacht-2), var(--nacht) 70%);
color: var(--nacht-soft);
padding: clamp(64px, 8vw, 96px) 0 0;
overflow: hidden;
}
.footer::before { /* Sternfeld */
content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
background-image:
radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 32% 64%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 56% 18%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 74% 48%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 88% 26%, #fff 50%, transparent 51%),
radial-gradient(1px 1px at 44% 84%, #fff 50%, transparent 51%);
}
.footer-inner {
position: relative;
max-width: var(--breite); margin: 0 auto; padding: 0 24px clamp(48px, 6vw, 64px);
display: grid; gap: 44px;
grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
}
@media (max-width: 920px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand h3 { color: #fff; font-size: 21px; }
.footer-brand p { color: var(--nacht-soft); font-size: 15px; max-width: 320px; }
.footer-col h4 {
color: #fff; font-family: var(--schrift-mono); font-size: 11.5px;
letter-spacing: .24em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--nacht-soft); font-size: 15px; transition: color var(--uebergang); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
position: relative;
border-top: 1px solid var(--nacht-linie);
padding: 22px 24px calc(24px + env(safe-area-inset-bottom));
max-width: var(--breite); margin: 0 auto;
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
font-family: var(--schrift-mono); font-size: 12px; letter-spacing: .06em;
color: var(--nacht-muted);
}
.footer-bottom a { color: var(--nacht-soft); margin-left: 18px; }
.footer-bottom a:first-child { margin-left: 0; }
.footer-bottom a:hover { color: #fff; }
/* Sticky Mobile-CTA */
.sticky-mobile-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: rgba(252,253,254,.9);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid var(--linie);
display: none;
transform: translateY(110%); transition: transform .35s ease;
pointer-events: none; /* Mobil-Bugfix v9: versteckt = nicht tappbar */
}
.sticky-mobile-cta.sichtbar { transform: translateY(0); pointer-events: auto; }
.sticky-mobile-cta .btn-primary, .sticky-mobile-cta .knopf--voll { width: 100%; }
@media (max-width: 760px) { .sticky-mobile-cta { display: block; } }
/* ════════════════ Unterseiten-Kopf ════════════════ */
.seitenkopf {
position: relative; overflow: hidden; overflow: clip;
padding: clamp(140px, 18vh, 200px) 0 clamp(48px, 7vw, 76px);
background: linear-gradient(180deg, var(--morgen-1), var(--morgen-2) 70%, var(--papier));
}
.seitenkopf .wolke-svg { opacity: .8; }
.seitenkopf-inner { max-width: var(--breite); margin: 0 auto; padding: 0 24px; position: relative; }
.seitenkopf h1 { max-width: 16ch; }
.seitenkopf .untertitel { margin-bottom: 0; }
.seitenkopf--medien { color: #fff; }
.seitenkopf--medien .seitenkopf-medien { position: absolute; inset: -14% 0; z-index: 0; }
.seitenkopf--medien .seitenkopf-medien img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf--medien::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,23,41,.35), rgba(10,23,41,.62));
}
.seitenkopf--medien .seitenkopf-inner { z-index: 1; }
.seitenkopf--medien h1, .seitenkopf--medien .untertitel, .seitenkopf--medien .kicker { color: #fff; }
.seitenkopf--medien h1 em { color: var(--abend-1); }
.seitenkopf--medien .kicker::before { background: var(--abend-1); }
/* Kompatibilität: alter Klassenname */
.page-header { position: relative; overflow: clip; padding: clamp(140px,18vh,200px) 0 clamp(48px,7vw,76px); background: linear-gradient(180deg, var(--morgen-1), var(--morgen-2) 70%, var(--papier)); text-align: left; }
.page-header > .section-label, .page-header > h1, .page-header > p { max-width: var(--breite); margin-left: auto; margin-right: auto; padding: 0 24px; }
.page-header > p { color: var(--tinte-soft); }
.page-header-inner { max-width: var(--breite); margin: 0 auto; padding: 0 24px; position: relative; }
.page-header--media { color: #fff; }
.page-header-media { position: absolute; inset: -14% 0; z-index: 0; }
.page-header-media img { width: 100%; height: 100%; object-fit: cover; }
.page-header-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,23,41,.35), rgba(10,23,41,.62)); }
.page-header--media .page-header-inner { z-index: 1; }
.page-header--media h1, .page-header--media p { color: #fff; }
.page-header-sub { color: var(--tinte-soft); font-size: clamp(16px,1.6vw,19px); max-width: 680px; }
.page-header--media .page-header-sub { color: rgba(255,255,255,.85); }
/* ════════════════ Inhalt aus dem Editor ════════════════ */
.entry-content { max-width: var(--breite-text); margin: 0 auto; }
.entry-content > * { margin-bottom: 1.15em; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.3em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; color: var(--tinte-soft); }
.entry-content li { margin-bottom: .45em; }
.entry-content li::marker { color: var(--thermik); }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232,133,28,.5); transition: text-decoration-color var(--uebergang); }
.entry-content a:hover { text-decoration-color: var(--thermik); }
.entry-content blockquote {
margin: 1.6em 0; padding: 4px 0 4px 24px;
border-left: 3px solid var(--thermik);
font-family: var(--schrift-akzent); font-style: italic; font-size: 19px; color: var(--tinte-soft);
}
.entry-content figure { margin: 1.8em 0; }
.entry-content figure img { border-radius: var(--radius); }
.entry-content figcaption {
font-family: var(--schrift-mono); font-size: 12px; letter-spacing: .08em;
color: var(--tinte-muted); margin-top: 10px;
}
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.entry-content th, .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--linie); text-align: left; }
.entry-content th { font-family: var(--schrift-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-muted); }
.entry-content hr, .entry-content .wp-block-separator {
border: 0; height: 1px; background: var(--linie); margin: 2.4em auto; max-width: 220px;
}
.entry-content code { font-family: var(--schrift-mono); font-size: .85em; background: var(--mist); padding: 2px 7px; border-radius: 6px; }
/* breite & volle Blöcke dürfen aus der Textspalte ausbrechen */
.entry-content .alignwide { max-width: var(--breite); margin-left: 50%; transform: translateX(-50%); width: min(var(--breite), calc(100vw - 48px)); }
.entry-content .alignfull { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.entry-content .alignfull img { border-radius: 0; }
/* WordPress-Galerie */
.wp-block-gallery { gap: 14px !important; }
.wp-block-gallery img { border-radius: var(--radius); }
/* Bausteine aus dem Block-Editor (Muster) */
.lsg-feature-list, .merkmal-liste {
list-style: none; padding: 0 !important; margin: 1.6em 0;
display: grid; gap: 12px 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lsg-feature-list li, .merkmal-liste li {
position: relative; padding: 14px 16px 14px 44px;
background: var(--wolke); border: 1px solid var(--linie); border-radius: var(--radius);
color: var(--tinte); font-size: 15.5px;
}
.lsg-feature-list li::before, .merkmal-liste li::before {
content: ""; position: absolute; left: 16px; top: 50%;
width: 16px; height: 16px; transform: translateY(-50%);
background: var(--thermik);
-webkit-mask: url('data:image/svg+xml,') center/contain no-repeat;
mask: url('data:image/svg+xml,') center/contain no-repeat;
}
.lsg-feature-list li::marker { content: ""; }
.lsg-note, .hinweis-box {
background: var(--thermik-hell); border: 1px solid rgba(232,133,28,.35);
border-radius: var(--radius); padding: 20px 24px; margin: 1.6em 0;
}
.lsg-note p:last-child, .hinweis-box p:last-child { margin-bottom: 0; }
.lsg-cards.wp-block-columns { gap: 22px; }
.lsg-cards .wp-block-column {
background: var(--wolke); border: 1px solid var(--linie);
border-radius: var(--radius-gross); padding: 26px 24px;
}
.wp-block-media-text { border-radius: var(--radius-gross); overflow: hidden; }
.wp-block-media-text .wp-block-media-text__media img { height: 100%; object-fit: cover; }
/* FAQ */
.fragen { display: grid; gap: 14px; max-width: var(--breite-text); margin: 0 auto; }
.frage {
background: #fff; border: 1px solid var(--linie);
border-radius: var(--radius); overflow: hidden;
box-shadow: 0 1px 0 rgba(15,36,64,.03);
transition: border-color var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}
.frage:hover { border-color: rgba(232,133,28,.45); }
.frage[open] { border-color: rgba(232,133,28,.55); box-shadow: var(--schatten); }
.frage summary {
list-style: none; cursor: pointer; user-select: none;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 18px 20px;
font-family: var(--schrift-display); font-weight: 700; font-size: 16.5px;
color: var(--tinte);
transition: background var(--uebergang), color var(--uebergang);
}
.frage summary:hover { background: var(--mist); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary:focus-visible { outline: 2px solid var(--thermik); outline-offset: -2px; }
.frage-symbol {
flex: none; width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center;
background: var(--mist); color: var(--thermik-tief);
transition: transform .3s ease, background var(--uebergang), color var(--uebergang);
}
.frage summary:hover .frage-symbol { background: var(--thermik); color: #fff; }
.frage[open] .frage-symbol { transform: rotate(135deg); background: var(--thermik); color: #fff; }
.frage-antwort { overflow: hidden; transition: height .35s cubic-bezier(.4,0,.2,1); }
.frage-inhalt { padding: 2px 20px 20px; color: var(--tinte-soft); font-size: 15.5px; line-height: 1.75; }
.frage-inhalt p:last-child { margin-bottom: 0; }
.nachtmodus-bereich .frage { background: var(--nacht-2); }
/* Bild-Platzhalter (bis du eigene Fotos einsetzt) */
.platzhalter {
position: relative; overflow: hidden;
border-radius: var(--radius-gross);
background:
radial-gradient(500px 200px at 20% 80%, rgba(255,255,255,.65), transparent 60%),
linear-gradient(165deg, var(--morgen-1), #B9D6F0);
display: grid; place-items: center; text-align: center;
color: var(--tinte-soft);
min-height: 220px;
border: 1px dashed rgba(15,36,64,.25);
}
.platzhalter--43 { aspect-ratio: 4/3; }
.platzhalter--169 { aspect-ratio: 16/9; }
.platzhalter--916 { aspect-ratio: 9/16; max-width: 340px; margin-inline: auto; }
.platzhalter-kern { display: grid; justify-items: center; gap: 10px; padding: 22px; }
.platzhalter-kern svg { width: 56px; height: 56px; color: var(--tinte-soft); opacity: .8; }
.platzhalter-text { font-family: var(--schrift-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
/* News-Karten (Blog/Aktuelles) */
.news-card {
display: flex; flex-direction: column;
background: var(--wolke); border: 1px solid var(--linie);
border-radius: var(--radius-gross); overflow: hidden; color: inherit;
transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--schatten); }
.news-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.news-card-body { padding: 22px 24px 24px; }
.news-card-date { font-family: var(--schrift-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--thermik-tief); margin-bottom: 8px; }
.news-card h3 { font-size: 19px; margin-bottom: 8px; }
.news-card p { font-size: 15px; color: var(--tinte-soft); margin: 0; }
.page-numbers { font-family: var(--schrift-mono); padding: 8px 13px; border: 1px solid var(--linie); border-radius: 10px; margin: 0 3px; color: var(--tinte); }
.page-numbers.current, .page-numbers:hover { background: var(--tinte); color: #fff; border-color: var(--tinte); }
/* 404 */
.seite-404 {
min-height: 86svh; display: grid; place-content: center; text-align: center;
padding: 160px 24px 80px;
background: linear-gradient(180deg, var(--morgen-1), var(--papier));
}
.seite-404 h1 { font-size: clamp(80px, 16vw, 160px); font-family: var(--schrift-mono); letter-spacing: -.04em; color: var(--tinte); }
.seite-404 .untertitel { margin: 0 auto 30px; }
.seite-404 .knopfreihe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ════════════════ Animationen ════════════════ */
/* WICHTIG (Mobil-Bugfix v9): Noch nicht eingeblendete Elemente sind
zwar unsichtbar, lagen aber voll klickbar über ihren Nachbarn —
auf dem Handy landeten Taps dadurch auf unsichtbaren Links und
führten auf „falsche" Seiten. Deshalb: solange nicht .visible,
fangen sie keine Zeiger-Eingaben ab. Der versteckte Zustand gilt
außerdem nur mit aktivem JavaScript (html.js), damit Inhalte ohne
JS niemals unsichtbar bleiben. */
.fade-up, .reveal, .reveal-left, .reveal-right {
transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1), visibility 0s;
transition-delay: var(--d, 0s);
}
html.js .fade-up:not(.visible),
html.js .reveal:not(.visible) { opacity: 0; transform: translateY(26px); pointer-events: none; }
html.js .reveal-left:not(.visible) { opacity: 0; transform: translateX(-34px); pointer-events: none; }
html.js .reveal-right:not(.visible) { opacity: 0; transform: translateX(34px); pointer-events: none; }
.fade-up.visible, .reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
.fade-up-delay-1 { --d: .1s; } .fade-up-delay-2 { --d: .2s; } .fade-up-delay-3 { --d: .3s; }
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
html.js .fade-up:not(.visible), html.js .reveal:not(.visible),
html.js .reveal-left:not(.visible), html.js .reveal-right:not(.visible) { opacity: 1; transform: none; pointer-events: auto; }
.laufband-spur { animation: none; }
.segler-flug, .kondens, .wolke-svg { animation: none; }
.hoehenmesser { display: none; }
}
/* ════════════════ Feinschliff klein ════════════════ */
@media (max-width: 760px) {
:root { --abstand: 64px; }
body { font-size: 16px; }
.held { min-height: 92svh; }
.held-knoepfe .knopf, .held-knoepfe .btn-primary, .held-knoepfe .btn-outline { width: 100%; }
.cta-banner { max-width: calc(100% - 28px); }
.footer { padding-bottom: 74px; } /* Platz für Sticky-CTA */
}
/* ════════════════════════════════════════════════════════════
* v8-Ergänzungen: Ankündigung, Band-Himmel, Insta-Details,
* Fassaden-Deko, Frage-Pfeil, Karten-Hover (article-Variante)
* ════════════════════════════════════════════════════════════ */
/* Ankündigungsleiste (Customizer) */
.ankuendigung {
position: fixed; inset: 0 0 auto 0; z-index: 95;
background: var(--tinte); color: #fff;
font-family: var(--schrift-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
text-align: center; padding: 9px 16px;
}
.ankuendigung strong { color: var(--abend-1); font-weight: 700; }
body.hat-ankuendigung .navbar { top: 36px; }
body.hat-ankuendigung .held { padding-top: 36px; }
/* Zahlen: Prefix/Suffix-Feinheiten */
.zahl-wert .zahl-prefix { font-size: .62em; color: var(--tinte-soft); margin-right: 2px; }
/* Leeres Foto-Band: Mini-Himmel mit Wolken & Segler */
.band-himmel { position: absolute; inset: 0; overflow: hidden; }
.band-himmel .wolke {
position: absolute; height: 26px; width: 110px; border-radius: 999px;
background: rgba(255,255,255,.85);
box-shadow: 30px -12px 0 -4px rgba(255,255,255,.85), -34px -8px 0 -7px rgba(255,255,255,.8);
filter: blur(.4px);
}
.band-himmel .wolke-a { top: 30%; left: -140px; animation: wolkenzug 60s linear infinite; }
.band-himmel .wolke-b { top: 58%; left: -180px; transform: scale(1.5); animation: wolkenzug 85s linear infinite; animation-delay: -30s; opacity: .7; }
.band-segler {
position: absolute; left: 50%; top: 44%;
transform: translate(-50%, -50%);
color: var(--tinte); opacity: .8;
animation: schweben 5.5s ease-in-out infinite;
}
@keyframes schweben {
0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
50% { transform: translate(-50%, -58%) rotate(2deg); }
}
/* Video-Fassade: kleiner Segler über dem Play-Knopf */
.fassade-himmel { color: rgba(255,255,255,.5); display: block; animation: schweben 6s ease-in-out infinite; }
.fassade-himmel svg { display: block; }
.video-fassade--reel .fassade-hinweis { max-width: 240px; }
/* Instagram: leerer Rahmen & Profil-Knopf */
.insta-rahmen--leer {
border: 2px dashed rgba(15,36,64,.25);
background: var(--mist);
min-height: 380px;
display: grid; place-items: center;
box-shadow: none;
}
.insta-rahmen--leer .platzhalter-kern { display: grid; justify-items: center; gap: 12px; color: var(--tinte-muted); padding: 28px; text-align: center; }
.insta-profil-knopf {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 16px; padding: 11px 20px; border-radius: 999px;
border: 1.5px solid var(--tinte); color: var(--tinte);
font-weight: 700; font-size: 14.5px;
transition: background var(--uebergang), color var(--uebergang), transform var(--uebergang);
}
.insta-profil-knopf:hover { background: var(--tinte); color: #fff; transform: translateY(-2px); }
.abschnitt--dunkel .insta-profil-knopf { border-color: rgba(255,255,255,.5); color: #fff; }
.abschnitt--dunkel .insta-profil-knopf:hover { background: rgba(255,255,255,.12); }
/* FAQ-Pfeil dreht sich beim Aufklappen */
.frage-pfeil { float: right; transition: transform .25s ease; color: var(--thermik-tief); }
.frage[open] .frage-pfeil { transform: rotate(180deg); }
/* Karten & Flugzeug-Karten heben sich auch als */
.karte, .flugzeug-karte { transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang); }
.karte:hover { transform: translateY(-6px); box-shadow: var(--schatten); }
.flugzeug-karte:hover { transform: translateY(-6px); box-shadow: var(--schatten); border-color: rgba(15,36,64,.22); }
.flugzeug-bild .platzhalter-kern {
position: absolute; inset: 0;
display: grid; place-items: center; color: rgba(15,36,64,.35);
}
/* Schritt-Texte */
.schritt-text p:last-child { margin-bottom: 0; }
.stimme blockquote { margin: 0; }
/* Eingebettete Videos im Fließtext (oEmbed-Fassade ohne Bühne) */
.entry-content > .video-fassade,
.entry-content .wp-block-embed .video-fassade {
position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-gross);
display: grid; overflow: hidden; margin: 1.6em 0;
}
.entry-content .video-fassade--reel { aspect-ratio: 9 / 16; max-width: min(360px, 100%); margin-inline: auto; }
/* Fassade im Fließtext (oEmbed: YouTube-Link direkt im Editor eingefügt) */
.entry-content .video-fassade {
position: relative; inset: auto; aspect-ratio: 16 / 9;
border-radius: var(--radius-gross); overflow: hidden;
box-shadow: var(--schatten-tief); margin-inline: auto;
}
.entry-content .kino .video-fassade,
.entry-content .reel .video-fassade {
position: absolute; inset: 0; aspect-ratio: auto;
border-radius: 0; box-shadow: none; max-width: none; margin: 0;
}
.video-fassade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fassade.video-aktiv { background: #000; }
.schritt-titel { font-size: 18px; margin-bottom: 8px; }
/* Vollbreite-Elemente liegen auf der Startseite als direkte Sektions-Kinder
(front-page.php hebt sie aus der Textspalte heraus). Im Fließtext von
Unterseiten füllen sie sicher die Inhaltsbreite — kein vw-Trick mehr. */
.entry-content .alignfull,
.entry-content .laufband,
.entry-content .band,
.entry-content .video-buehne { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.abschnitt > .laufband,
.abschnitt > .band,
.abschnitt > .video-buehne { margin-block: clamp(28px, 5vw, 52px); }
.abschnitt--randlos { padding: 0; }
.abschnitt--randlos > .laufband,
.abschnitt--randlos > .band,
.abschnitt--randlos > .video-buehne { margin-block: 0; }
.abschnitt > .video-buehne { padding-inline: 24px; }
/* ════════════════ v8.1 — Mehr Leben ════════════════ */
/* Überschriften ziehen beim Erscheinen einen Thermik-Strich */
.entry-content h2 { position: relative; padding-bottom: 14px; }
.entry-content h2::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 56px; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, var(--thermik), var(--abend-2, #FF7E4D));
transform: scaleX(0); transform-origin: left;
transition: transform .7s cubic-bezier(.2,.7,.3,1) .25s;
}
.entry-content h2.visible::after { transform: scaleX(1); }
.abschnitt--zentriert .entry-content h2::after { left: 50%; transform: translateX(-50%) scaleX(0); }
.abschnitt--zentriert .entry-content h2.visible::after { transform: translateX(-50%) scaleX(1); }
/* Zahlen ploppen kurz, wenn sie fertig gezählt haben */
@keyframes zahlpop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
.zahl-wert.gezaehlt { animation: zahlpop .45s cubic-bezier(.3,1.4,.4,1) both; display: inline-block; }
/* Segler wippt sanft auf seiner Flugbahn, Kondensstreifen pulsiert */
@keyframes seglerbob { 0%,100% { transform: translateY(0) rotate(.6deg); } 50% { transform: translateY(-9px) rotate(-1.2deg); } }
.segler-flug svg { animation: seglerbob 5.5s ease-in-out infinite; }
@keyframes kondenspuls { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
.kondens { animation: kondenspuls 3.2s ease-in-out infinite; }
/* Wolken im Hero schweben zusätzlich leicht auf und ab */
@keyframes wolkenschweben { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* Laufband: anhalten, wenn man mit der Maus darüber ist */
.laufband:hover .laufband-spur { animation-play-state: paused; }
/* Specs heben sich beim Hover minimal */
.spec { transition: transform var(--uebergang), box-shadow var(--uebergang); }
.spec:hover { transform: translateY(-3px); }
/* Stimmen: Anführungszeichen atmet ein */
.stimme { transition: transform var(--uebergang), box-shadow var(--uebergang); }
.stimme:hover { transform: translateY(-3px); }
/* Foto-Band: Inhalt schiebt sich beim Erscheinen leicht hoch */
.band-zeile { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.band:not(.band-sichtbar) .band-zeile { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
.segler-flug svg, .kondens, .wolke-svg, .zahl-wert.gezaehlt { animation: none !important; }
.entry-content h2::after { transform: none !important; transition: none !important; }
.band .band-zeile { opacity: 1 !important; transform: none !important; }
.frage-antwort { transition: none !important; }
}
/* ════════════════ v8.2 — Lebendigkeits-Paket ════════════════ */
/* Lese-Fortschritt: dünner Thermik-Balken ganz oben */
.lese-fortschritt {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
z-index: 95; pointer-events: none;
}
.lese-fortschritt span {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, var(--thermik), #FF7E4D);
box-shadow: 0 0 12px rgba(232,133,28,.55);
border-radius: 0 3px 3px 0;
}
/* Haupt-CTA: Lichtstreifen wandert alle paar Sekunden darüber */
.knopf--voll, .btn-primary { position: relative; overflow: hidden; }
.knopf--voll::after, .btn-primary::after {
content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%;
width: 34%; transform: skewX(-22deg) translateX(-180%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
animation: glanz 5.5s ease-in-out infinite; pointer-events: none;
}
@keyframes glanz {
0%, 64% { transform: skewX(-22deg) translateX(-180%); }
82%, 100% { transform: skewX(-22deg) translateX(620%); }
}
.knopf--voll:hover::after, .btn-primary:hover::after { animation-duration: 1.4s; }
/* Hero: das kursive Wort bekommt einen handgezogenen Schwung */
.hero-titel em { position: relative; white-space: nowrap; }
.hero-titel em::after {
content: ""; position: absolute; left: 2%; right: 2%; bottom: .02em; height: .12em;
background: linear-gradient(90deg, var(--thermik), #FF7E4D);
border-radius: 99px; opacity: .35;
transform: scaleX(0); transform-origin: left;
transition: transform 1s cubic-bezier(.2,.7,.2,1) .55s;
}
.hero-titel.visible em::after { transform: scaleX(1); }
/* Scrollpfeil verschwindet, sobald die Reise begonnen hat */
.scroll-hinweis { transition: opacity .4s ease, transform .4s ease; }
body.gestartet .scroll-hinweis { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }
/* Nachthimmel: funkelnde Sterne in dunklen Abschnitten und im Footer */
.abschnitt--dunkel, .footer { position: relative; }
.abschnitt--dunkel::before, .footer::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.7), transparent 60%),
radial-gradient(2px 2px at 44% 18%, rgba(255,214,150,.85), transparent 60%),
radial-gradient(1px 1px at 58% 48%, rgba(255,255,255,.65), transparent 60%),
radial-gradient(1.5px 1.5px at 72% 28%, rgba(255,255,255,.85), transparent 60%),
radial-gradient(1px 1px at 84% 66%, rgba(255,255,255,.6), transparent 60%),
radial-gradient(1.5px 1.5px at 92% 14%, rgba(255,214,150,.8), transparent 60%),
radial-gradient(1px 1px at 8% 78%, rgba(255,255,255,.55), transparent 60%);
animation: funkeln 4.5s ease-in-out infinite alternate;
}
@keyframes funkeln { from { opacity: .35; } to { opacity: .9; } }
.abschnitt--dunkel > *, .footer > * { position: relative; z-index: 1; }
/* Abendrot-Abschnitte: warmes Licht atmet langsam */
.abschnitt--abend { position: relative; overflow: hidden; }
.abschnitt--abend::before {
content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
background: radial-gradient(60% 50% at 70% 20%, rgba(255,214,150,.28), transparent 70%);
animation: abendglut 9s ease-in-out infinite alternate;
}
@keyframes abendglut {
from { opacity: .5; transform: translate3d(-3%, 0, 0) scale(1); }
to { opacity: 1; transform: translate3d(3%, 2%, 0) scale(1.06); }
}
.abschnitt--abend > * { position: relative; z-index: 1; }
/* Himmel-Abschnitte: zwei zarte Wolken ziehen im Hintergrund */
.abschnitt--himmel { position: relative; overflow: hidden; }
.abschnitt--himmel::before, .abschnitt--himmel::after {
content: ""; position: absolute; pointer-events: none; z-index: 0;
width: 280px; height: 90px; border-radius: 999px;
background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0));
filter: blur(2px);
}
.abschnitt--himmel::before { top: 12%; left: -300px; animation: wolkenzug 80s linear infinite; }
.abschnitt--himmel::after { bottom: 14%; left: -340px; width: 360px; opacity: .7; animation: wolkenzug 110s linear infinite -45s; }
.abschnitt--himmel > * { position: relative; z-index: 1; }
/* Schritt-Nummern springen kurz an, wenn sie erscheinen */
@keyframes nrpop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.schritt.visible .schritt-nr, .step.visible .step-num { animation: nrpop .5s cubic-bezier(.3,1.5,.4,1) both; }
/* Karten-Symbole wackeln freundlich beim Hover */
@keyframes wackeln { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 60% { transform: rotate(6deg); } }
.karte:hover .karte-symbol, .card:hover .card-icon { animation: wackeln .5s ease; }
/* Flugzeug-Karten: Mini-Segler im Bild gleitet beim Hover nach rechts oben */
.flugzeug-bild .platzhalter-kern svg, .flugzeug-bild > svg { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
a.flugzeug-karte:hover .flugzeug-bild .platzhalter-kern svg,
a.flugzeug-karte:hover .flugzeug-bild > svg { transform: translate(8px, -6px) rotate(-4deg); }
/* Sticky-CTA: doppelter Puls-Ring beim ersten Erscheinen */
.sticky-mobile-cta.sichtbar .knopf--voll, .sticky-mobile-cta.sichtbar .btn-primary { animation: ctapuls 1.6s ease-out 1; }
@keyframes ctapuls {
0% { box-shadow: 0 0 0 0 rgba(232,133,28,.45); }
70% { box-shadow: 0 0 0 16px rgba(232,133,28,0); }
100% { box-shadow: 0 0 0 0 rgba(232,133,28,0); }
}
/* Bilder im Fließtext zoomen minimal beim Hover */
.entry-content figure img, .news-card-img img { transition: transform .6s ease; }
.entry-content figure:hover img { transform: scale(1.025); }
.news-card:hover .news-card-img img { transform: scale(1.05); }
/* Laufband-Sternchen drehen sich gemächlich */
.laufband-spur span::after { display: inline-block; animation: sterndreh 7s linear infinite; }
@keyframes sterndreh { to { transform: rotate(360deg); } }
/* Stimmen: großes Anführungszeichen schwebt sanft */
@keyframes zitatschweben { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.stimme-zeichen { animation: zitatschweben 6s ease-in-out infinite; transform-origin: left bottom; }
@media (prefers-reduced-motion: reduce) {
.lese-fortschritt { display: none; }
.knopf--voll::after, .btn-primary::after,
.abschnitt--dunkel::before, .footer::before,
.abschnitt--abend::before,
.abschnitt--himmel::before, .abschnitt--himmel::after,
.laufband-spur span::after, .stimme-zeichen { animation: none !important; }
.hero-titel em::after { transform: scaleX(1) !important; transition: none !important; }
.schritt.visible .schritt-nr, .step.visible .step-num,
.karte:hover .karte-symbol, .card:hover .card-icon,
.sticky-mobile-cta.sichtbar .knopf--voll { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════
v9.0 — „Rundflug Edition"
1) 3D-Rundflug über EDLY (Scroll-Tour mit klebender Bühne)
2) [lsg_parallaxbild] — große Bild-/Video-Flächen mit Tiefe
3) Hero-Titel Wort für Wort, Karten-Tilt am Desktop
═══════════════════════════════════════════════════════════ */
/* ── 1) 3D-Rundflug ───────────────────────────────────────── */
.f3d {
position: relative;
height: calc(var(--f3d-n, 6) * 75vh + 100vh);
height: calc(var(--f3d-n, 6) * 75svh + 100svh);
background: linear-gradient(180deg, var(--morgen-1), var(--morgen-2));
}
.f3d-buehne {
position: sticky; top: 0;
height: 100vh; height: 100svh;
overflow: hidden; overflow: clip;
}
.f3d-canvas-halter, .f3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* zarte Vignette, damit Texte an den Rändern gut lesbar bleiben */
.f3d-himmel {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(215,234,250,.55), transparent 18%),
linear-gradient(0deg, rgba(15,36,64,.16), transparent 26%);
}
.f3d-kicker {
position: absolute; top: clamp(86px, 13vh, 130px); left: 50%; transform: translateX(-50%);
margin: 0; padding: 8px 18px; border-radius: 999px;
font-family: var(--schrift-mono); font-size: 11.5px; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase;
color: var(--tinte-soft); background: rgba(252,253,254,.72);
border: 1px solid var(--linie-soft);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
white-space: nowrap; pointer-events: none;
}
/* Stations-Karten: alle am selben Fleck, JS blendet die passende ein */
.f3d-karten { position: absolute; inset: 0; pointer-events: none; }
.f3d-karte {
position: absolute;
left: clamp(20px, 6vw, 88px);
bottom: clamp(72px, 13vh, 132px);
width: min(460px, calc(100% - 40px));
padding: clamp(20px, 3vw, 30px) clamp(22px, 3vw, 32px);
background: rgba(252,253,254,.85);
border: 1px solid rgba(15,36,64,.1);
border-radius: var(--radius-gross);
box-shadow: 0 26px 60px -28px rgba(15,36,64,.45);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
opacity: 0; visibility: hidden; will-change: opacity, transform;
}
.f3d-karte-nr {
display: inline-block; margin-bottom: 10px;
font-family: var(--schrift-mono); font-size: 12px; font-weight: 700;
letter-spacing: .14em; color: var(--thermik-tief);
}
.f3d-karte-nr em { font-style: normal; color: var(--tinte-muted); }
.f3d-karte-titel { margin: 0 0 8px; font-size: clamp(21px, 2.4vw, 27px); }
.f3d-karte-text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--tinte-soft); }
/* Stations-Punkte rechts */
.f3d-punkte {
position: absolute; right: clamp(12px, 2.6vw, 30px); top: 50%;
transform: translateY(-50%);
display: flex; flex-direction: column; gap: 12px;
margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.f3d-punkt span {
display: block; width: 8px; height: 8px; border-radius: 50%;
background: rgba(15,36,64,.28);
transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.f3d-punkt.aktiv span {
background: var(--thermik); transform: scale(1.45);
box-shadow: 0 0 0 5px rgba(232,133,28,.22);
}
.f3d-hinweis {
position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
transform: translateX(-50%);
display: flex; align-items: center; gap: 8px; margin: 0;
font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--tinte-soft);
pointer-events: none; transition: opacity .4s ease;
}
.f3d-hinweis svg { animation: f3dpfeil 1.6s ease-in-out infinite; }
@keyframes f3dpfeil { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* 2D-Fallback (ohne JS / WebGL / bei reduzierter Bewegung) */
.f3d-fallback { display: none; }
/* Läuft die 3D-Tour, bleibt die Stationsliste für Screenreader lesbar,
ist aber optisch nicht vorhanden. */
.f3d--bereit .f3d-fallback {
display: block; position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
margin: -1px; padding: 0; border: 0;
}
.f3d--statisch { height: auto; padding: var(--abstand) 24px; }
.f3d--statisch .f3d-buehne { display: none; }
.f3d--statisch .f3d-fallback,
html:not(.js) .f3d-fallback { display: block; max-width: var(--breite-text); margin: 0 auto; }
html:not(.js) .f3d { height: auto; padding: var(--abstand) 24px; }
html:not(.js) .f3d-buehne { display: none; }
.f3d-karte2d { width: 100%; height: auto; border-radius: var(--radius-gross); box-shadow: var(--schatten); }
.f3d-fallback-liste { margin: 26px 0 0; padding: 0 0 0 22px; }
.f3d-fallback-liste li { margin-bottom: 12px; line-height: 1.6; }
.f3d-fallback-liste strong { display: block; color: var(--tinte); }
.f3d-fallback-liste li::marker { font-family: var(--schrift-mono); font-weight: 700; color: var(--thermik-tief); }
/* Pin-Notfallmodus: Greift nur, wenn position:sticky nachweislich
nicht klebt (z. B. weil ein Plugin irgendwo overflow:hidden setzt).
Dann fixiert JavaScript die Bühne selbst. */
.f3d--pin .f3d-buehne { position: absolute; top: 0; left: 0; width: 100%; }
.f3d--pin.f3d-fest .f3d-buehne { position: fixed; top: 0; left: 0; width: 100%; z-index: 1; }
.f3d--pin.f3d-unten .f3d-buehne { position: absolute; top: auto; bottom: 0; }
/* Einbettung in Abschnitte & Fließtext */
.abschnitt > .f3d { margin-block: 0; }
.entry-content .f3d { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
@media (max-width: 760px) {
.f3d { height: calc(var(--f3d-n, 6) * 82vh + 100vh); height: calc(var(--f3d-n, 6) * 82svh + 100svh); }
.f3d-karte {
left: 14px; right: 14px; width: auto;
bottom: calc(58px + env(safe-area-inset-bottom));
}
.f3d-punkte { right: 9px; gap: 10px; }
.f3d-kicker { max-width: calc(100% - 28px); white-space: normal; text-align: center; letter-spacing: .16em; }
}
/* ── 2) [lsg_parallaxbild] ────────────────────────────────── */
.pbild {
position: relative; overflow: hidden; overflow: clip;
min-height: 60vh;
min-height: var(--pbild-h, 75svh);
display: grid; align-items: end;
}
.pbild-medien { position: absolute; inset: -18% 0; will-change: transform; }
.pbild-medien img, .pbild-medien video { width: 100%; height: 100%; object-fit: cover; }
.pbild--leer .pbild-medien {
background:
radial-gradient(720px 260px at 20% 88%, rgba(255,255,255,.6), transparent 60%),
radial-gradient(560px 220px at 78% 20%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(180deg, var(--morgen-1), var(--mist));
}
.pbild-tipp {
position: relative; z-index: 1; align-self: center; justify-self: center;
margin: 0; padding: 12px 20px; max-width: min(560px, calc(100% - 48px));
text-align: center; font-size: 14.5px; color: var(--tinte-soft);
background: rgba(252,253,254,.85); border: 1px dashed var(--linie);
border-radius: var(--radius);
}
.pbild-tipp code { font-family: var(--schrift-mono); font-size: 13px; color: var(--thermik-tief); }
.pbild-zeile {
position: relative; z-index: 1; width: 100%;
padding: clamp(56px, 9vw, 110px) 0 clamp(22px, 4vw, 38px);
background: linear-gradient(180deg, transparent, rgba(10,23,41,.62));
color: #fff;
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.pbild--leer .pbild-zeile { background: linear-gradient(180deg, transparent, rgba(15,36,64,.28)); }
.pbild:not(.band-sichtbar) .pbild-zeile { opacity: 0; transform: translateY(18px); }
.pbild-zeit {
display: inline-block; margin-bottom: 8px; padding: 4px 12px;
border-radius: 999px; background: var(--thermik); color: #fff;
font-family: var(--schrift-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
}
.pbild-text { margin: 0; font-size: clamp(17px, 2.2vw, 21px); font-weight: 600; max-width: 640px; text-wrap: balance; }
.abschnitt > .pbild { margin-block: clamp(28px, 5vw, 52px); }
.abschnitt--randlos > .pbild { margin-block: 0; }
.entry-content .pbild { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
/* ── 3) Hero-Titel Wort für Wort ──────────────────────────── */
.hero-titel.titel-split .wort {
display: inline-block; overflow: hidden; overflow: clip;
vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em;
}
.hero-titel.titel-split .wort > span {
display: inline-block; transform: translateY(118%);
animation: wortauf .85s cubic-bezier(.2,.7,.25,1) forwards;
animation-delay: var(--wd, 0s);
}
@keyframes wortauf { to { transform: translateY(0); } }
/* Karten-Tilt: weiche Rückstellung, nur bei feinen Zeigern */
@media (hover: hover) and (pointer: fine) {
.karte, .flugzeug-karte, .card {
transition: transform .55s cubic-bezier(.2,.7,.3,1),
box-shadow .3s ease, border-color .3s ease;
will-change: transform;
}
}
/* Bewegung reduziert: Tour als ruhige Karte, alles sofort da */
@media (prefers-reduced-motion: reduce) {
.f3d { height: auto; padding: var(--abstand) 24px; }
.f3d-buehne { display: none; }
.f3d-fallback { display: block; max-width: var(--breite-text); margin: 0 auto; }
.pbild-medien { inset: 0; transform: none !important; }
.pbild .pbild-zeile { opacity: 1 !important; transform: none !important; }
.hero-titel.titel-split .wort > span { animation: none; transform: none; }
.f3d-hinweis svg { animation: none; }
}
/* ═══════════════════════════════════════════════════════════
v9.1 — „Werkstatt Edition"
Flugzeug-Rundgang, Insta-Galerie, Foto-Galerie, MP4-Sofortstart
═══════════════════════════════════════════════════════════ */
/* ── Kennzeichen-Schild im Flugzeug-Rundgang ──────────────── */
.f3d-kenn {
position: absolute; top: clamp(86px, 13vh, 130px);
right: clamp(46px, 6vw, 84px); margin: 0;
padding: 6px 14px; border-radius: 8px;
font-family: var(--schrift-mono); font-size: 13px; font-weight: 700;
letter-spacing: .12em; color: var(--tinte);
background: rgba(252,253,254,.8); border: 1px solid var(--linie);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
pointer-events: none;
}
@media (max-width: 760px) { .f3d-kenn { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); right: 14px; font-size: 11.5px; } }
/* ── Video-Bühne: eigene MP4s laufen sofort ───────────────── */
.video-fassade video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* ── Instagram-Galerie (eigene Bilder, kein Meta-Server) ──── */
.instagalerie { padding: clamp(30px, 5vw, 54px) 0; }
.instagalerie-kopf {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 3vw, 28px);
}
.instagalerie-titel { margin: 0; font-size: clamp(21px, 2.6vw, 28px); }
.instagalerie-handle {
font-family: var(--schrift-mono); font-size: 13.5px; font-weight: 700;
letter-spacing: .06em; color: var(--thermik-tief);
padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie);
transition: background var(--uebergang), border-color var(--uebergang), transform var(--uebergang);
}
.instagalerie-handle:hover { background: var(--thermik-hell); border-color: var(--thermik); transform: translateY(-1px); }
.instagalerie-raster {
display: grid; gap: clamp(8px, 1.4vw, 14px);
grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 230px), 1fr));
}
.instabild {
position: relative; display: block; aspect-ratio: 1 / 1;
overflow: hidden; overflow: clip; border-radius: var(--radius);
background: var(--mist); border: 1px solid var(--linie-soft);
transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.instabild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
a.instabild:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
a.instabild:hover img { transform: scale(1.07); }
.instabild-leer { display: grid; place-items: center; width: 100%; height: 100%; color: var(--tinte-muted); opacity: .5; }
.instabild-symbol {
position: absolute; right: 9px; bottom: 9px; color: #fff;
opacity: 0; transform: translateY(6px);
transition: opacity var(--uebergang), transform var(--uebergang);
filter: drop-shadow(0 2px 6px rgba(10,23,41,.6));
}
a.instabild:hover .instabild-symbol { opacity: 1; transform: none; }
.nachtmodus .instagalerie-titel { color: #fff; }
/* ── Foto-Galerie mit Großansicht ─────────────────────────── */
.galerie {
display: grid; gap: clamp(10px, 1.6vw, 18px);
grid-template-columns: repeat(var(--gal-sp, 3), 1fr);
margin: clamp(20px, 3vw, 32px) 0;
}
@media (max-width: 700px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .galerie { grid-template-columns: 1fr; } }
.galerie-bild { margin: 0; }
.galerie-knopf {
display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
background: none; border-radius: var(--radius);
overflow: hidden; overflow: clip;
transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.galerie-knopf img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.galerie-knopf:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.galerie-knopf:hover img { transform: scale(1.05); }
.galerie-bild figcaption { margin-top: 8px; font-size: 14px; color: var(--tinte-soft); }
.galerie-bild--leer {
display: grid; place-items: center; aspect-ratio: 4 / 3;
border: 1px dashed var(--linie); border-radius: var(--radius);
background: var(--mist); color: var(--tinte-muted);
}
.galerie-gross {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center; padding: clamp(16px, 4vw, 48px);
background: rgba(10,23,41,.9);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
opacity: 0; transition: opacity .22s ease; cursor: zoom-out;
}
.galerie-gross.offen { opacity: 1; }
.galerie-gross img {
max-width: 100%; max-height: 100%; width: auto; height: auto;
border-radius: var(--radius); box-shadow: var(--schatten-tief);
transform: scale(.97); transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.galerie-gross.offen img { transform: none; }
.galerie-zu {
position: absolute; top: 16px; right: 18px;
width: 46px; height: 46px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12);
color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.galerie-zu:hover { background: rgba(255,255,255,.22); }
@media (prefers-reduced-motion: reduce) {
.galerie-gross, .galerie-gross img { transition: none; }
.instabild img, .galerie-knopf img { transition: none; }
}
/* ════════════════════════════════════════════════════════════
v9.6 — „STRECKENFLUG EDITION"
Ein durchgehender Scroll-Fluss: kompakterer Rhythmus, der
„Zwischenakt" zwischen den beiden 3D-Touren, Hangar-Strip,
Schritte-Linie, Windversatz & Atem-Zoom.
════════════════════════════════════════════════════════════ */
/* ── Kompakterer Seitenrhythmus ─────────────────────────────── */
:root { --abstand: clamp(56px, 8vw, 100px); }
.abschnitt-kopf { margin-bottom: clamp(26px, 4vw, 44px); }
/* Abschnitte, die NUR aus Vollbreite-Elementen bestehen
(3D-Touren, Zwischenakt, Laufband, Bänder, Video), brauchen
keinen eigenen Innenabstand mehr — die Bühnen bringen ihren
Rhythmus selbst mit. Das zieht die Seite spürbar zusammen. */
.abschnitt--randlos { padding-block: 0; }
/* Zahlen-Leiste: schlanker, bleibt aber Instrumentenbrett */
.zahl, .stat-item { padding: 26px 18px; }
.zahl-wert, .stat-num { font-size: clamp(28px, 3.6vw, 40px); }
/* Laufband bekommt Schwung: leicht in den Wind gedreht */
.abschnitt--randlos .laufband {
transform: rotate(-1.1deg) scale(1.03);
margin-block: clamp(22px, 3.5vw, 40px);
box-shadow: 0 12px 30px -22px rgba(15, 36, 64, .35);
}
/* ── Zwischenakt [lsg_uebergang] ────────────────────────────── */
.uebergang {
position: relative;
overflow: clip;
min-height: 116svh;
padding: clamp(84px, 13vh, 150px) 0 clamp(96px, 15vh, 170px);
display: flex; align-items: center;
background:
radial-gradient(900px 420px at 12% 8%, rgba(255, 255, 255, .8), transparent 60%),
linear-gradient(180deg, var(--morgen-1) 0%, var(--morgen-2) 38%, var(--papier) 100%);
color: var(--tinte);
}
.uebergang-buehne { position: absolute; inset: 0; pointer-events: none; }
.uebergang-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uebergang-route {
fill: none; stroke: var(--tinte); opacity: .16;
stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 10;
}
.uebergang-zug {
fill: none; stroke: var(--thermik);
stroke-width: 3.5; stroke-linecap: round;
filter: drop-shadow(0 6px 16px rgba(232, 133, 28, .38));
}
/* Ohne JS (und bei reduzierter Bewegung) ist die Linie fertig
gezeichnet — erst JS spult sie an den Scrollbalken zurück. */
.uebergang-flieger {
fill: var(--tinte);
filter: drop-shadow(0 12px 14px rgba(15, 36, 64, .3));
}
.uebergang-wolke { position: absolute; color: #fff; filter: drop-shadow(0 18px 34px rgba(15, 36, 64, .12)); }
.uebergang-wolke--1 { width: clamp(150px, 22vw, 280px); top: 9%; left: 6%; opacity: .95; }
.uebergang-wolke--2 { width: clamp(110px, 16vw, 210px); top: 30%; right: 8%; opacity: .8; }
.uebergang-wolke--3 { width: clamp(80px, 11vw, 150px); bottom: 14%; left: 16%; opacity: .65; }
.uebergang-inhalt {
position: relative; width: 100%;
max-width: var(--breite); margin: 0 auto; padding: 0 24px;
}
.uebergang-zeit {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--schrift-mono); font-size: 12px; font-weight: 600;
letter-spacing: .24em; text-transform: uppercase; color: var(--thermik-tief);
margin: 0 0 clamp(34px, 6vh, 64px);
}
.uebergang-zeit::before {
content: ""; width: 26px; height: 2px; border-radius: 2px;
background: var(--thermik); flex: none;
}
.uebergang-zeilen { display: grid; gap: clamp(8px, 2vh, 20px); }
.uz { margin: 0; overflow: hidden; padding-block: .06em; }
.uz-innen {
display: inline-block;
font-family: var(--schrift-display);
font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
font-size: clamp(34px, 7.2vw, 84px);
text-wrap: balance; will-change: transform;
transform-origin: left bottom;
}
.uz-innen em {
font-family: var(--schrift-akzent); font-style: italic; font-weight: 600;
letter-spacing: 0; color: var(--thermik-tief);
}
/* Treppe bergauf — wie ein Steigflug */
.uz:nth-child(2) { margin-left: clamp(0px, 6vw, 96px); }
.uz:nth-child(3) { margin-left: clamp(0px, 12vw, 192px); }
/* Startzustand nur mit aktivem JS — der Scrub übernimmt sofort */
html.js .uebergang--an .uz-innen { transform: translateY(112%); opacity: .12; }
.uebergang-text {
margin: clamp(34px, 6vh, 60px) 0 0;
max-width: 520px;
font-size: clamp(16px, 1.7vw, 19px);
color: var(--tinte-soft);
}
/* ── Hangar-Strip [lsg_flugzeuge stil="hangar"] ─────────────── */
.hangar { padding-block: 6px 4px; }
.hangar-hinweis {
max-width: var(--breite);
margin: 0 auto 12px;
padding-inline: max(24px, calc((100% - var(--breite)) / 2 + 24px));
font-family: var(--schrift-mono); font-size: 11.5px; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase; color: var(--tinte-muted);
}
.hangar { max-width: none; }
.hangar-hinweis { max-width: none; margin-inline: 0; }
.hangar-pfeil { color: var(--thermik); margin-right: 8px; }
.flotte--hangar {
display: flex; gap: 18px;
grid-template-columns: none;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding-block: 6px 22px;
padding-inline: max(24px, calc((100% - var(--breite)) / 2 + 24px));
scroll-padding-inline: max(24px, calc((100% - var(--breite)) / 2 + 24px));
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}
.flotte--hangar::-webkit-scrollbar { display: none; }
.flotte--hangar .flugzeug-karte {
flex: none;
width: clamp(258px, 27vw, 330px);
scroll-snap-align: start;
}
@media (hover: hover) and (pointer: fine) {
.flotte--hangar { cursor: grab; }
.flotte--hangar.zieht { cursor: grabbing; scroll-snap-type: none; }
.flotte--hangar.zieht .flugzeug-karte { pointer-events: none; }
}
/* Karten rollen gestaffelt in den Hangar */
html.js .hangar:not(.sichtbar) .flugzeug-karte {
opacity: 0; transform: translateY(30px) rotate(1.4deg);
}
.hangar .flugzeug-karte {
transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1),
box-shadow var(--uebergang), border-color var(--uebergang);
}
.hangar .flugzeug-karte:nth-child(2) { transition-delay: .07s; }
.hangar .flugzeug-karte:nth-child(3) { transition-delay: .14s; }
.hangar .flugzeug-karte:nth-child(4) { transition-delay: .21s; }
.hangar .flugzeug-karte:nth-child(5) { transition-delay: .28s; }
.hangar .flugzeug-karte:nth-child(6) { transition-delay: .35s; }
.hangar .flugzeug-karte:nth-child(7) { transition-delay: .42s; }
.hangar .flugzeug-karte:nth-child(n+8) { transition-delay: .49s; }
.hangar.sichtbar .flugzeug-karte { transition-delay: 0s; }
.hangar-leiste {
height: 3px; border-radius: 999px; overflow: hidden;
background: var(--linie-soft);
margin: 2px max(24px, calc((100% - var(--breite)) / 2 + 24px)) 0;
}
.hangar-balken {
display: block; height: 100%; width: 100%;
background: linear-gradient(90deg, var(--thermik), var(--abend-2));
transform: scaleX(0); transform-origin: left;
}
/* ── Schritte: Zeitstrahl mit selbstzeichnender Linie ───────── */
.schritte, .steps-grid { position: relative; gap: 30px 22px; }
.schritte::before {
content: ""; position: absolute; z-index: 0;
left: 4px; right: 4px; top: 22px; height: 2px;
background: linear-gradient(90deg, var(--thermik), rgba(232, 133, 28, .25));
border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform 1.2s cubic-bezier(.2, .7, .3, 1) .15s;
}
.schritte.gezogen::before { transform: scaleX(1); }
.schritt, .step {
background: transparent; border: 0; padding: 0;
position: relative; z-index: 1;
}
.schritt-nr, .step-num {
width: 46px; height: 46px; margin: 0 0 14px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 2px solid var(--thermik); border-radius: 999px;
background: var(--wolke); font-size: 13px;
box-shadow: 0 0 0 6px var(--mist);
}
.abschnitt--hell .schritt-nr { box-shadow: 0 0 0 6px var(--papier); }
.schritt h4, .step h4 { margin-bottom: 6px; }
@media (max-width: 879px) {
.schritte::before {
left: 22px; right: auto; top: 4px; bottom: 4px;
width: 2px; height: auto;
background: linear-gradient(180deg, var(--thermik), rgba(232, 133, 28, .25));
transform: scaleY(0); transform-origin: top;
}
.schritte.gezogen::before { transform: scaleY(1); }
.schritt, .step { padding-left: 68px; }
.schritt-nr, .step-num { position: absolute; left: 0; top: 0; margin: 0; }
}
/* ── Windversatz & Atem-Zoom: sauberes Rendering ────────────── */
.abschnitt .entry-content, .band-zeile, .pbild-zeile { will-change: transform; }
/* ── Kleine Bildschirme ─────────────────────────────────────── */
@media (max-width: 760px) {
:root { --abstand: 52px; }
.uebergang { min-height: 104svh; padding-block: 72px 88px; }
.uz:nth-child(2), .uz:nth-child(3) { margin-left: 0; }
.uebergang-wolke--3 { display: none; }
.flotte--hangar .flugzeug-karte { width: min(78vw, 300px); }
.abschnitt--randlos .laufband { transform: rotate(-1.1deg) scale(1.05); }
}
/* ── Reduzierte Bewegung: alles ruhig & vollständig sichtbar ── */
@media (prefers-reduced-motion: reduce) {
html.js .uebergang--an .uz-innen { transform: none; opacity: 1; }
.uebergang-zug { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
html.js .hangar:not(.sichtbar) .flugzeug-karte { opacity: 1; transform: none; }
.schritte::before { transform: none !important; transition: none; }
.abschnitt--randlos .laufband { transform: none; }
.abschnitt .entry-content, .band-zeile, .pbild-zeile { will-change: auto; }
}
/* ═══════════════════════════════════════════════════════════
v9.7 — „Thermik Edition"
Vario-Anzeige, Thermik- & Hänger-Bühne, Wolkenschatten
═══════════════════════════════════════════════════════════ */
/* ── Vario in der Thermik-Schule ────────────────────────────
Kleine Instrumenten-Pille: zeigt das Steigen/Sinken der
aktuellen Flugphase. Farbe & Pfeilrichtung wechseln mit. */
.f3d-vario {
position: absolute; bottom: clamp(46px, 7vh, 82px); right: clamp(46px, 6vw, 84px);
margin: 0; display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px; border-radius: 999px;
font-family: var(--schrift-mono); font-size: 13.5px; font-weight: 700;
letter-spacing: .08em; font-variant-numeric: tabular-nums;
color: var(--tinte); background: rgba(252,253,254,.82);
border: 1px solid var(--linie);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
pointer-events: none;
transition: color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.f3d-vario-pfeil { flex: 0 0 auto; transition: transform .35s ease, color .35s ease; }
.f3d-vario--steigt {
color: var(--thermik-tief); border-color: var(--thermik);
box-shadow: 0 0 0 3px rgba(232,133,28,.14);
}
.f3d-vario--steigt .f3d-vario-pfeil { color: var(--thermik); }
.f3d-vario--sinkt { color: #2f6db3; border-color: #9dc0e2; }
.f3d-vario--sinkt .f3d-vario-pfeil { transform: rotate(180deg); color: #2f6db3; }
@media (max-width: 760px) {
.f3d-vario {
bottom: calc(56px + env(safe-area-inset-bottom)); right: 14px;
font-size: 12px; padding: 6px 11px;
}
}
/* Die Thermik-Bühne bekommt eine warme Sonnen-Vignette obendrauf */
.f3d--thermik .f3d-himmel {
background:
radial-gradient(46% 34% at 12% 8%, rgba(255,214,140,.32), transparent 70%),
linear-gradient(180deg, rgba(215,234,250,.5), transparent 18%),
linear-gradient(0deg, rgba(15,36,64,.18), transparent 26%);
}
/* Die Hänger-Bühne: etwas Nachmittagslicht von rechts */
.f3d--haenger .f3d-himmel {
background:
radial-gradient(40% 30% at 88% 10%, rgba(255,226,168,.22), transparent 72%),
linear-gradient(180deg, rgba(215,234,250,.5), transparent 18%),
linear-gradient(0deg, rgba(15,36,64,.18), transparent 26%);
}
/* ── Wolkenschatten über den großen Foto-Bändern ─────────────
Ein weicher, dunkler Fleck zieht beim Scrollen quer über
[lsg_band]- und [lsg_parallaxbild]-Fotos — als würde draußen
gerade eine Quellwolke vor die Sonne ziehen. JS bewegt ihn. */
.wolkenschatten {
position: absolute; top: -18%; left: -62%;
width: 58%; height: 136%;
background: radial-gradient(50% 42% at 50% 50%, rgba(10,22,38,.34), rgba(10,22,38,.18) 52%, transparent 74%);
mix-blend-mode: multiply;
filter: blur(2px);
pointer-events: none;
will-change: transform;
z-index: 1;
}
.pbild .wolkenschatten { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .wolkenschatten { display: none; } }
/* ═══════════════════════════════════════════════════════════
v9.8 — „Ein durchgehender Flug"
Die Startseite ist eine einzige, fließende Scroll-Fläche:
ein durchgehender Tageshimmel im Hintergrund, die Abschnitte
überlappen leicht und lösen ihre Farbkanten weich ineinander
auf — keine harten Übergänge mehr zwischen den Sektionen.
═══════════════════════════════════════════════════════════ */
:root { --blend: clamp(66px, 9vh, 132px); }
/* ── Durchgehender Tageshimmel hinter der ganzen Seite ──────
Von Morgenblau oben, über Mittagsweiß, langsam ins Warme —
sichtbar überall dort, wo die Abschnittsfarben auslaufen. */
#flugtag { position: relative; z-index: 0; isolation: isolate; }
#flugtag::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg,
var(--morgen-1) 0%,
#E9F3FC 16%,
var(--papier) 40%,
var(--mist) 58%,
var(--thermik-hell) 76%,
#FFDDB0 90%,
var(--abend-1) 100%);
}
/* Auf der Startseite wandert die Fläche jeder Sektion von der
Sektion selbst auf eine eigene, weich auslaufende Ebene. */
#flugtag .abschnitt { background: transparent; isolation: isolate; margin-top: calc(var(--blend) * -1); }
#flugtag > .abschnitt:first-child { margin-top: 0; }
/* ── Die Farbfläche jeder Sektion: läuft oben UND unten weich
aus, sodass Nachbar-Abschnitte im Überlappungsband ineinander
überblenden (statt hart aneinanderzustoßen). ─────────────── */
.abschnitt-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
-webkit-mask-image: linear-gradient(180deg,
transparent 0, #000 var(--blend),
#000 calc(100% - var(--blend)), transparent 100%);
mask-image: linear-gradient(180deg,
transparent 0, #000 var(--blend),
#000 calc(100% - var(--blend)), transparent 100%);
}
.abschnitt--hell .abschnitt-bg { background: rgba(252,253,254,.93); }
.abschnitt--mist .abschnitt-bg { background: rgba(237,244,251,.93); }
.abschnitt--himmel .abschnitt-bg {
background: linear-gradient(180deg, rgba(242,248,254,.92), rgba(237,244,251,.9));
}
.abschnitt--dunkel .abschnitt-bg {
background:
radial-gradient(1100px 480px at 85% 6%, rgba(232,133,28,.16), transparent 60%),
linear-gradient(180deg, var(--nacht) 0%, var(--nacht-2) 100%);
}
.abschnitt--abend .abschnitt-bg {
background: linear-gradient(135deg, var(--abend-1), var(--abend-2));
}
/* Kräftige Stimmungs-Sektionen steigen über ein größeres Band
herauf/hinab — Abendrot und Nacht schleichen sich sanft ein. */
#flugtag .abschnitt--dunkel, #flugtag .abschnitt--abend { --blend: clamp(96px, 15vh, 210px); }
/* ── Stapel-Ordnung: Farbe (0) · Deko (1) · Inhalt (2) ─────── */
#flugtag .abschnitt > :not(.abschnitt-bg) { position: relative; z-index: 2; }
#flugtag .abschnitt--dunkel::before, #flugtag .abschnitt--abend::before,
#flugtag .abschnitt--himmel::before, #flugtag .abschnitt--himmel::after { z-index: 1; }
/* ── Die 3D-Bühnen lösen sich an Ober- & Unterkante in einen
hellen Ton auf, sodass Himmel und Sektion nahtlos ineinander
übergehen (die Karten in der Mitte bleiben gestochen scharf). */
.f3d-himmel {
background:
linear-gradient(180deg, rgba(240,247,254,.9) 0%, rgba(240,247,254,0) 9%),
linear-gradient(0deg, rgba(240,247,254,.72) 0%, rgba(240,247,254,0) 8%),
linear-gradient(180deg, rgba(215,234,250,.5), transparent 20%),
linear-gradient(0deg, rgba(15,36,64,.16), transparent 28%);
}
/* Thermik-Finale wärmt seine Unterkante ins Gold der CTA an. */
.f3d--thermik .f3d-himmel {
background:
radial-gradient(46% 34% at 12% 8%, rgba(255,214,140,.32), transparent 70%),
linear-gradient(180deg, rgba(240,247,254,.85) 0%, rgba(240,247,254,0) 9%),
linear-gradient(0deg, rgba(255,221,176,.7) 0%, rgba(255,221,176,0) 12%),
linear-gradient(180deg, rgba(215,234,250,.45), transparent 20%),
linear-gradient(0deg, rgba(15,36,64,.14), transparent 26%);
}
/* ── Sanfteres Scrollen, aber respektvoll bei „Bewegung reduzieren" */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
#flugtag .abschnitt { margin-top: 0; }
.abschnitt-bg { -webkit-mask-image: none; mask-image: none; }
}
/* Hänger-Bühne: Nachmittagslicht behalten, aber Kanten ebenfalls
in Hell auflösen (überschreibt die v9.7-Regel oben). */
.f3d--haenger .f3d-himmel {
background:
radial-gradient(40% 30% at 88% 10%, rgba(255,226,168,.22), transparent 72%),
linear-gradient(180deg, rgba(240,247,254,.9) 0%, rgba(240,247,254,0) 9%),
linear-gradient(0deg, rgba(240,247,254,.7) 0%, rgba(240,247,254,0) 8%),
linear-gradient(180deg, rgba(215,234,250,.45), transparent 20%),
linear-gradient(0deg, rgba(15,36,64,.15), transparent 26%);
}
/* ═══════════════════════════════════════════════════════════
v9.9 — „Ein Himmel"
Die 3D-Bühnen rendern jetzt durchsichtig; dahinter liegt EIN
durchgehender, lebendiger Himmel für die ganze Seite: Verlauf
vom Morgen ins Abendgold, eine Sonne, Lichtstrahlen und drei
in verschiedenen Tiefen ziehende Wolkenschichten. Die Segler
fliegen dadurch im selben Himmel wie der Rest der Seite — die
3D-Szenen sind keine „Kästen" mehr, sondern Fenster in denselben
Himmel.
═══════════════════════════════════════════════════════════ */
/* Hinter den 3D-Bühnen KEINE deckende Fläche — der Himmel scheint
durch die durchsichtigen Canvasse hindurch. */
#flugtag .abschnitt:has(.f3d) > .abschnitt-bg { background: none; }
.himmel-hintergrund {
position: absolute; inset: 0; z-index: -1;
overflow: hidden; pointer-events: none;
}
/* Tages-Verlauf (scrollt mit → der „Tag" schreitet beim Runterscrollen
voran): oben Morgenblau, unten das Gold der Schluss-CTA. Die Blautöne
sind auf den Dunst (Fog) der 3D-Szenen abgestimmt, damit Horizont und
Himmel nahtlos ineinander übergehen. */
.himmel-verlauf {
position: absolute; inset: 0;
background: linear-gradient(180deg,
#C6DFF4 0%,
#CFE6F6 14%,
#D8ECFB 34%,
#E4F1FB 52%,
#EFEADF 66%,
#F6D9AE 78%,
#F6C078 90%,
var(--abend-1) 100%);
}
/* Sonne + weiche Lichtstrahlen */
.himmel-sonne {
position: absolute; top: 5%; right: 11%;
width: min(48vw, 540px); aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle,
rgba(255,247,218,.95), rgba(255,238,186,.4) 30%, transparent 62%);
filter: blur(2px);
animation: sonnenpuls 13s ease-in-out infinite alternate;
will-change: transform, opacity;
}
.himmel-strahlen {
position: absolute; top: -4%; right: 2%;
width: 70vw; height: 88vh;
background: conic-gradient(from 202deg at 82% 6%,
rgba(255,242,208,.16), transparent 20%,
rgba(255,242,208,.10) 38%, transparent 58%,
rgba(255,242,208,.08) 74%, transparent 92%);
mix-blend-mode: screen; opacity: .8;
}
@keyframes sonnenpuls {
from { transform: scale(1); opacity: .92; }
to { transform: scale(1.05); opacity: 1; }
}
/* Drei Wolkenschichten in verschiedenen Tiefen. Jede zieht per
CSS seitwärts (::before, 200 % breit, endlos), die Tiefen-Parallaxe
(translateY beim Scrollen) setzt main.js. */
.himmel-wolken { position: absolute; left: 0; right: 0; height: 42%; will-change: transform; }
.himmel-wolken::before {
content: ""; position: absolute; inset: 0; width: 200%;
background-repeat: repeat-x; background-position: 0 50%, 0 50%;
animation: wolkenzug linear infinite;
}
.himmel-wolken--fern { top: 3%; opacity: .5; }
.himmel-wolken--fern::before {
background-image:
radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0) 74%),
radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0) 74%);
background-size: 300px 74px, 210px 58px;
background-position: 3% 30%, 46% 62%;
animation-duration: 195s;
}
.himmel-wolken--mittel { top: 24%; opacity: .68; }
.himmel-wolken--mittel::before {
background-image:
radial-gradient(closest-side, rgba(255,255,255,.82), rgba(255,255,255,0) 74%),
radial-gradient(closest-side, rgba(255,255,255,.62), rgba(255,255,255,0) 74%);
background-size: 440px 116px, 300px 84px;
background-position: 12% 34%, 62% 70%;
animation-duration: 138s;
}
.himmel-wolken--nah { top: 46%; opacity: .82; }
.himmel-wolken--nah::before {
background-image:
radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0) 74%),
radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0) 74%);
background-size: 620px 168px, 420px 120px;
background-position: 22% 30%, 74% 66%;
animation-duration: 98s;
}
@keyframes wolkenzug { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── Die durchgehende Fluglinie ─────────────────────────────
Ein Kondensstreifen, der sich beim Scrollen über die GANZE Seite
hinabzeichnet — der sichtbare Faden, der alles verbindet. Vorn
über den Inhalten (aber klick-durchlässig), mit einem Segler an
der zeichnenden Spitze. main.js treibt Länge & Segler-Position. */
.fluglinie-schicht {
position: absolute; inset: 0; z-index: 5;
overflow: hidden; pointer-events: none;
}
.fluglinie { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fluglinie-pfad {
filter: drop-shadow(0 0 3px rgba(80,116,158,.55));
}
.fluglinie-segler {
position: absolute; top: 0; left: 0;
width: clamp(46px, 5.5vw, 82px);
transform: translate(-50%, -50%);
will-change: transform;
filter: drop-shadow(0 3px 5px rgba(15,36,64,.22));
}
.fluglinie-segler svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
.fluglinie-schicht { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.himmel-sonne, .himmel-wolken::before { animation: none; }
}