/* ========================================================================== LEVEL 7 — EFFEKTE (23.09.2026, „krasser ohne Umbau") Eigene Datei, damit main.css (1:1 aus dem Theme) unangetastet bleibt. Nur Marken-Tokens aus main.css (--l7-teal, --l7-magenta, --l7-black …), keine neuen Farben. LEITMOTIV: die senkrechten Neon-Leisten aus dem Treppenhaus der Halle (Jamies Fotos 23.09.): schmale, leicht gekippte Lichtstreifen Türkis → Magenta auf Schwarz. Sie tauchen als Gestaltungselement im Kopfbereich, an Sektionsübergängen und in der Bahn-Szene auf. JEDER EFFEKT IST ABSCHALTBAR: global über einstellungen.effekte (Attribut data-l7-effekte auf , gesetzt in _layouts/seite.njk), je Sektion über ein eigenes Feld (hero.effekte, marquee.tiefe, angebotskarten.tilt, modul-grid.tilt, scroll-bowling.inszenierung, anfahrt-karte.animation). Ohne JavaScript bleibt alles lesbar; „weniger Bewegung" schaltet jede Bewegung ab (unten, ganz am Ende). ========================================================================== */ /* ---------- Neon-Leisten (Grundbaustein) ---------- */ .l7-leisten { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .l7-leiste { position: absolute; top: -12%; width: 3px; height: 124%; background: linear-gradient(180deg, transparent 0%, var(--l7-teal) 18%, var(--l7-teal) 55%, var(--l7-magenta) 92%, transparent 100%); opacity: 0.55; transform: rotate(4deg); box-shadow: 0 0 8px rgba(4,255,247,0.55), 0 0 28px rgba(4,255,247,0.28), 0 0 60px rgba(255,20,147,0.15); animation: l7-leiste-puls 5.2s ease-in-out infinite alternate; will-change: opacity, transform; } .l7-leiste:nth-child(1) { left: 61%; height: 70%; top: 18%; animation-delay: -1.1s; } .l7-leiste:nth-child(2) { left: 68%; height: 96%; top: -4%; width: 2px; animation-delay: -2.4s; } .l7-leiste:nth-child(3) { left: 74%; height: 58%; top: 30%; animation-delay: -0.6s; opacity: 0.4; } .l7-leiste:nth-child(4) { left: 81%; height: 110%; top: -8%; width: 4px; animation-delay: -3.3s; } .l7-leiste:nth-child(5) { left: 88%; height: 76%; top: 12%; animation-delay: -1.9s; opacity: 0.45; } .l7-leiste:nth-child(6) { left: 94%; height: 90%; top: 0; width: 2px; animation-delay: -4.1s; } .l7-leiste:nth-child(7) { left: 55%; height: 44%; top: 40%; width: 2px; animation-delay: -2.9s; opacity: 0.3; } @keyframes l7-leiste-puls { 0% { opacity: 0.35; filter: brightness(0.85); } 50% { opacity: 0.7; filter: brightness(1.25); } 100% { opacity: 0.45; filter: brightness(1); } } /* ---------- Kopfbereich mit Tiefe ---------- */ /* Parallax: das Bild bekommt Luft nach oben und unten und wird per JS (effekte.js) langsamer verschoben als der Text — dadurch entsteht die Tiefe. Ohne JS: keine Verschiebung, Bild wie bisher. scale hält die Ränder beim Verschieben geschlossen. */ .l7-fx-hero .l7-hero__image { will-change: transform; transform: translate3d(0, var(--l7-py, 0px), 0) scale(1.12); transform-origin: center; } .l7-fx-hero .l7-hero__inner { will-change: transform; transform: translate3d(var(--l7-mx, 0px), var(--l7-my, 0px), 0); } .l7-hero__leisten { z-index: 1; } .l7-hero--with-image .l7-hero__leisten .l7-leiste { mix-blend-mode: screen; } /* Auf dem Handy steht der Text über die volle Breite: Leisten weiter an den Rand, weniger. */ @media (max-width: 899px) { .l7-hero__leisten .l7-leiste:nth-child(1), .l7-hero__leisten .l7-leiste:nth-child(3), .l7-hero__leisten .l7-leiste:nth-child(7) { display: none; } .l7-hero__leisten .l7-leiste { opacity: 0.35; } } /* Hintergrund-Video (Feld bg_video): liegt unter dem Verlauf, wird erst per JS geladen (data-src), nur ohne „weniger Bewegung" und nicht bei Datensparmodus. Bis dahin: das Bild. */ .l7-hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; } .l7-hero__video.is-ready { opacity: 1; } .l7-hero__video + .l7-hero__image::after { z-index: 1; } .l7-hero--with-video .l7-hero__image { z-index: 0; } .l7-hero--with-video .l7-hero__video.is-ready ~ .l7-hero__image { background-image: none !important; } /* Lichtkante: eine Linie, die unten am Kopfbereich entlangläuft — einmal beim Laden. */ /* Lichtkante unten am Kopfbereich: seit 23.09. abends Vorgabe AUS (Jamie: „Trennstrich nervt"); Feld hero.lichtkante = 1 schaltet sie ein. Keine Grundlinie mehr, nur der Lauf. */ .l7-hero__kante { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; pointer-events: none; overflow: hidden; background: transparent; } .l7-hero__kante::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, var(--l7-teal), #fff, var(--l7-teal), transparent); box-shadow: 0 0 12px var(--l7-teal), 0 0 32px rgba(4,255,247,0.6); animation: l7-kante-lauf 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s 1 both; } @keyframes l7-kante-lauf { from { left: -30%; } to { left: 100%; } } /* Überschrift: Neon-Schein auf dem Akzentwort, ohne die Farbe zu ändern. */ .l7-fx-hero .l7-hero__headline .l7-accent { text-shadow: 0 0 18px rgba(4,255,247,0.45), 0 0 48px rgba(4,255,247,0.25); } /* ---------- Bühne (Startseite A, Coming Soon): Parallax auf dem großen Bild ---------- */ .l7-fx-buehne { overflow: hidden; } .l7-fx-buehne .l7-buehne__bild { will-change: transform; transform: translate3d(0, var(--l7-py, 0px), 0) scale(1.08); } @media (max-width: 899px) { .l7-fx-buehne .l7-buehne__bild { transform: none; } } /* ---------- Lichtkante an Sektionsübergängen + Scanline-Reveal der Überschriften ---------- */ /* Jede dunkle Sektion, die ins Bild kommt, bekommt oben eine Neon-Kante, die einmal durchläuft (Klasse is-in setzt effekte.js per IntersectionObserver). */ .l7-fx-scan .l7-section--dark::before, .l7-fx-scan .l7-section--teal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--l7-teal) 30%, #fff 50%, var(--l7-teal) 70%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0; opacity: 0; box-shadow: 0 0 14px rgba(4,255,247,0.6); } .l7-fx-scan .l7-section--teal::before { background: linear-gradient(90deg, transparent, var(--l7-black) 40%, #fff 50%, var(--l7-black) 60%, transparent); background-size: 40% 100%; background-repeat: no-repeat; background-position: -40% 0; box-shadow: none; } .l7-fx-scan .l7-section.is-in::before { animation: l7-kante-scan 1.6s cubic-bezier(0.3, 0.8, 0.2, 1) 1 both; } @keyframes l7-kante-scan { 0% { opacity: 1; background-position: -40% 0; } 100% { opacity: 0; background-position: 140% 0; } } /* Scanline über der Überschrift: ein schmaler Lichtbalken fährt einmal senkrecht durch die Zeile, sobald sie erscheint. Das Element setzt effekte.js (span.l7-scan), damit die Bausteine dafür nicht angefasst werden müssen. */ .l7-scan-wrap { position: relative; display: inline-block; } .l7-scan { position: absolute; top: -6%; bottom: -6%; left: 0; width: 6px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, var(--l7-teal), #fff, var(--l7-teal), transparent); box-shadow: 0 0 10px var(--l7-teal), 0 0 30px rgba(4,255,247,0.55); } .l7-scan-wrap.is-in .l7-scan { animation: l7-scan-lauf 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) 0.15s 1 both; } @keyframes l7-scan-lauf { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } .l7-section--default .l7-scan, .l7-section--cream .l7-scan { background: linear-gradient(180deg, transparent, var(--l7-teal-dark), var(--l7-teal), var(--l7-teal-dark), transparent); } /* ---------- Laufschrift mit Tiefe ---------- */ .l7-marquee--tiefe { padding: 22px 0; perspective: 900px; } .l7-marquee--tiefe .l7-marquee__inner { position: relative; z-index: 2; } /* Geisterzeile: dieselben Wörter, groß, nur Umriss, langsamer und andersherum — die zweite Ebene, die dem Band die Tiefe gibt. Farbe = Textfarbe des Bandes (Token bleibt). */ .l7-marquee__ghost { position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotateX(18deg); z-index: 1; display: inline-flex; gap: 40px; white-space: nowrap; pointer-events: none; font-size: clamp(40px, 6vw, 84px); font-weight: 900; letter-spacing: -0.02em; opacity: 0.16; -webkit-text-stroke: 1px currentColor; color: transparent; animation: l7-marquee-ghost calc(var(--l7-marquee-speed, 30s) * 1.9) linear infinite reverse; } .l7-marquee__ghost span { display: inline-block; transform: skewX(-12deg); } @keyframes l7-marquee-ghost { from { transform: translateY(-50%) rotateX(18deg) translateX(0); } to { transform: translateY(-50%) rotateX(18deg) translateX(-50%); } } /* Glanz: ein heller Streifen läuft alle paar Sekunden über das Band. */ .l7-marquee--tiefe::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%); background-size: 60% 100%; background-repeat: no-repeat; background-position: -60% 0; animation: l7-marquee-glanz 12s ease-in-out infinite; } .l7-marquee--dark.l7-marquee--tiefe::after { background-image: linear-gradient(100deg, transparent 40%, rgba(4,255,247,0.25) 50%, transparent 60%); } @keyframes l7-marquee-glanz { 0%, 75% { background-position: -60% 0; } 100% { background-position: 160% 0; } } .l7-marquee--tiefe .l7-marquee__bolt svg { filter: drop-shadow(0 0 6px rgba(0,0,0,0.25)); } .l7-marquee--dark.l7-marquee--tiefe .l7-marquee__bolt svg { filter: drop-shadow(0 0 8px var(--l7-teal)); } /* ---------- Karten: Tilt + Lichtkante ---------- */ /* KEIN preserve-3d (Jamie 23.09., Punkt 9): mit preserve-3d + overflow:hidden malte Chrome das Bild der Kachel beim Kippen ueber den Text — Titel und Text verschwanden beim Hover. Flach gekippt reicht. */ [data-l7-tilt] { will-change: transform; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease; position: relative; } [data-l7-tilt].is-tilt { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease; } /* Lichtkante: radialer Schein, der dem Zeiger folgt (Variablen --l7-lx/--l7-ly aus effekte.js), plus eine türkise Kante am Rand, die aufleuchtet. */ [data-l7-tilt] .l7-licht { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: screen; background: radial-gradient(420px circle at var(--l7-lx, 50%) var(--l7-ly, 50%), rgba(4,255,247,0.14), rgba(4,255,247,0.03) 40%, transparent 70%); transition: opacity 0.4s ease, background-position 0.4s ease; } [data-l7-tilt] .l7-licht::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(4,255,247,0.0); transition: border-color 0.4s ease; } [data-l7-tilt].is-tilt .l7-licht, [data-l7-tilt].is-sweep .l7-licht { opacity: 1; } [data-l7-tilt].is-tilt .l7-licht::after { border-color: rgba(4,255,247,0.35); box-shadow: inset 0 0 18px rgba(4,255,247,0.1), 0 0 18px rgba(4,255,247,0.1); } .l7-bigcard--teal .l7-licht { background: radial-gradient(420px circle at var(--l7-lx, 50%) var(--l7-ly, 50%), rgba(255,255,255,0.22), rgba(255,255,255,0.05) 40%, transparent 70%); } /* Berührbildschirme: kein Tilt, dafür ein einmaliger Lichtlauf beim Erscheinen (is-sweep). */ [data-l7-tilt].is-sweep .l7-licht { animation: l7-licht-sweep 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 1 both; } @keyframes l7-licht-sweep { 0% { --l7-lx: -20%; opacity: 0; } 20% { opacity: 1; } 100% { --l7-lx: 120%; opacity: 0; } } @supports not (background: paint(x)) { [data-l7-tilt].is-sweep .l7-licht { animation-name: l7-licht-sweep-alt; } } @keyframes l7-licht-sweep-alt { 0% { opacity: 0; transform: translateX(-30%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(30%); } } /* ---------- Bahn-Szene (scroll-bowling, inszenierung = bahn) ---------- */ .l7-bahn { position: relative; padding: 0; background: var(--l7-black); } .l7-bahn__lauf { height: 340vh; position: relative; } .l7-bahn__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .l7-bahn__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .l7-bahn__beats { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; pointer-events: none; } .l7-bahn__beats .l7-container { width: 100%; padding-bottom: clamp(48px, 10vh, 120px); } .l7-bahn__beats { align-items: flex-start; } /* Stufen OBEN links (23.09., nach der ersten Aufnahme): unten kollidierten sie mit der Kugel am Start. */ .l7-bahn__beat { position: absolute; left: 24px; right: 24px; top: clamp(96px, 16vh, 180px); opacity: 0; transform: translateY(24px); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } @media (max-width: 899px) { .l7-bahn__beat { top: 92px; } } .l7-bahn__beat.is-on { opacity: 1; transform: translateY(0); } .l7-bahn__beat .l7-h2 { font-size: clamp(44px, 9vw, 120px); line-height: 0.92; margin: 0; text-shadow: 0 6px 40px rgba(0,0,0,0.6); } .l7-bahn__beat .l7-eyebrow { margin-bottom: 14px; } .l7-bahn__beat .l7-strike__cd-cta { pointer-events: auto; margin-top: 24px; } .l7-bahn__beat .l7-countdown { margin-left: 0; } .l7-bahn__hinweis { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; text-align: center; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.45); pointer-events: none; opacity: 1; transition: opacity 0.4s; } .l7-bahn.is-rolling .l7-bahn__hinweis { opacity: 0; } .l7-bahn__hinweis::after { content: ''; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(180deg, var(--l7-teal), transparent); animation: l7-pfeil 1.6s ease-in-out infinite; } @keyframes l7-pfeil { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.4; } } /* Rückfall: kein Canvas / weniger Bewegung / kein JS → die Textstufen wie bisher untereinander */ .l7-bahn__fallback { display: none; } .l7-bahn.is-fallback .l7-bahn__lauf { display: none; } .l7-bahn.is-fallback, .no-js .l7-bahn { padding: 80px 0; } .l7-bahn.is-fallback .l7-bahn__fallback { display: block; } .no-js .l7-bahn__lauf { display: none; } .no-js .l7-bahn__fallback { display: block; } /* ---------- Anfahrt-Karte ---------- */ .l7-karte__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; margin-top: 36px; align-items: start; } .l7-karte__buehne { position: relative; background: var(--l7-charcoal); border: 1px solid rgba(4,255,247,0.25); overflow: hidden; } .l7-karte__flaeche { position: relative; } .l7-karte__svg { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; background: #0d0d0d; } .l7-karte__svg text { font-family: var(--l7-font); font-weight: 700; fill: rgba(255,255,255,0.82); font-size: 17px; letter-spacing: 0.02em; } .l7-karte__svg .l7-karte__lbl-klein { font-size: 13px; fill: rgba(255,255,255,0.55); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .l7-karte__svg .l7-karte__lbl-teal { fill: var(--l7-teal); } .l7-karte__svg .l7-karte__lbl-bau { font-size: 16px; } .l7-karte__svg .l7-karte__lbl-bau2 { font-size: 13px; font-weight: 600; } .l7-karte__svg .l7-karte__lbl-gross { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } .l7-karte__raster { stroke: rgba(4,255,247,0.07); stroke-width: 1; } .l7-karte__fluss { fill: none; stroke: rgba(4,255,247,0.16); stroke-width: 28; stroke-linecap: round; stroke-linejoin: round; } .l7-karte__fluss-kante { fill: none; stroke: rgba(4,255,247,0.35); stroke-width: 1.5; stroke-dasharray: 3 7; } .l7-karte__strasse { fill: none; stroke: #2a2a2a; stroke-linecap: round; stroke-linejoin: round; } .l7-karte__strasse--b30 { stroke-width: 22; stroke: #262626; } .l7-karte__strasse--b30-mitte { stroke-width: 1.5; stroke: rgba(255,255,255,0.28); stroke-dasharray: 14 10; } .l7-karte__strasse--neben { stroke-width: 12; } .l7-karte__strasse--rampe { stroke-width: 10; } .l7-karte__rad { fill: none; stroke: var(--l7-teal); stroke-width: 2; stroke-dasharray: 4 8; stroke-linecap: round; opacity: 0.7; } .l7-karte__route { fill: none; stroke: var(--l7-teal); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(4,255,247,0.9)) drop-shadow(0 0 16px rgba(4,255,247,0.5)); } .l7-karte__route-glow { fill: none; stroke: rgba(4,255,247,0.18); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; } .l7-karte__gebaeude { fill: #151515; stroke: var(--l7-teal); stroke-width: 2; } .l7-karte__gleis path { fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 2; } .l7-karte__gleis .l7-karte__schwellen { stroke: rgba(255,255,255,0.14); stroke-width: 3; } .l7-karte__strasse--haupt { stroke-width: 16; stroke: #2c2c2c; } .l7-karte__bruecke { fill: none; stroke: rgba(4,255,247,0.55); stroke-width: 2; } .l7-karte__route--fuss { stroke-dasharray: 10 8; stroke-width: 4; } .l7-karte.is-animiert .l7-karte__route--fuss { stroke-dasharray: 10 8 !important; stroke-dashoffset: 0 !important; } .l7-karte__gebaeude-dach { fill: rgba(4,255,247,0.08); } .l7-karte__parken { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.35); stroke-width: 1.5; stroke-dasharray: 6 4; } .l7-karte__punkt { cursor: pointer; } .l7-karte__punkt circle.l7-karte__punkt-kreis { fill: var(--l7-black); stroke: var(--l7-teal); stroke-width: 2.5; transition: r 0.25s, stroke-width 0.25s; } .l7-karte__punkt text { font-size: 14px; font-weight: 900; fill: var(--l7-teal); text-anchor: middle; dominant-baseline: central; pointer-events: none; } .l7-karte__punkt.is-aktiv circle.l7-karte__punkt-kreis, .l7-karte__punkt:hover circle.l7-karte__punkt-kreis { stroke-width: 4; filter: drop-shadow(0 0 10px var(--l7-teal)); } .l7-karte__punkt--eingang circle.l7-karte__punkt-kreis { fill: var(--l7-teal); } .l7-karte__punkt--eingang text { fill: var(--l7-black); } .l7-karte__puls { fill: none; stroke: var(--l7-teal); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } .l7-karte.is-animiert .l7-karte__puls { animation: l7-puls 2.4s ease-out infinite; } @keyframes l7-puls { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } } .l7-karte__licht { fill: #fff; filter: drop-shadow(0 0 6px var(--l7-teal)) drop-shadow(0 0 14px var(--l7-teal)); opacity: 0; } .l7-karte__kompass { fill: rgba(255,255,255,0.55); } .l7-karte__nordpfeil { fill: var(--l7-teal); } .l7-karte__hinweis { position: absolute; left: 12px; bottom: 10px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .l7-karte__werkzeuge { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; z-index: 2; } .l7-karte__zoom { background: rgba(10,10,10,0.85); color: var(--l7-teal); border: 1px solid rgba(4,255,247,0.5); font: 800 11px/1 var(--l7-font); letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 12px; cursor: pointer; min-height: 44px; } .l7-karte__zoom:hover, .l7-karte__zoom.is-on { background: var(--l7-teal); color: var(--l7-black); } .l7-karte__adresse { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; background: var(--l7-black); border-top: 1px solid rgba(4,255,247,0.25); color: var(--l7-white); } .l7-karte__adresse strong { font-size: 18px; font-weight: 900; text-transform: uppercase; } .l7-karte__adresse > span { color: rgba(255,255,255,0.75); font-size: 15px; } .l7-karte__adresse .l7-btn { align-self: flex-start; margin-top: 12px; } .l7-karte__punkte { display: grid; gap: 10px; } .l7-karte__kachel { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--l7-black); border-left: 3px solid rgba(4,255,247,0.35); padding: 18px 20px; text-align: left; color: inherit; cursor: pointer; transition: border-color 0.25s, background 0.25s, transform 0.25s; width: 100%; font: inherit; border-top: 0; border-right: 0; border-bottom: 0; } .l7-karte__kachel:hover, .l7-karte__kachel.is-aktiv { border-left-color: var(--l7-teal); background: #141414; transform: translateX(4px); } .l7-karte__kachel-nr { width: 40px; height: 40px; border: 2px solid var(--l7-teal); color: var(--l7-teal); display: grid; place-items: center; font-weight: 900; font-size: 14px; } .l7-karte__kachel-titel { margin: 0 0 6px; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; color: var(--l7-teal); } .l7-karte__kachel-text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.78); } .l7-section--teal .l7-karte__kachel, .l7-section--teal .l7-karte__adresse { color: var(--l7-white); } @media (max-width: 899px) { .l7-karte__grid { grid-template-columns: 1fr; } .l7-karte__svg { aspect-ratio: 5 / 4; } /* Schmaler Ausschnitt (anfahrt-karte.js) + groessere Schrift, damit auf 390 px alles lesbar bleibt */ .l7-karte__svg text { font-size: 26px; } .l7-karte__svg .l7-karte__lbl-klein { font-size: 20px; letter-spacing: 0.08em; } .l7-karte__svg .l7-karte__lbl-gross { font-size: 32px; } .l7-karte__svg .l7-karte__lbl-bau { font-size: 19px; } .l7-karte__svg .l7-karte__lbl-bau2 { font-size: 15px; } .l7-karte__punkt circle.l7-karte__punkt-kreis { r: 24; } .l7-karte__punkt text { font-size: 22px; } .l7-karte__hinweis { font-size: 9px; letter-spacing: 0.1em; right: 12px; } } /* ---------- Bildplatzhalter (nur Vorschau) etwas ruhiger, bleibt wie main.css ---------- */ /* ---------- Weniger Bewegung: alles aus ---------- */ @media (prefers-reduced-motion: reduce) { .l7-leiste, .l7-hero__kante::after, .l7-marquee__ghost, .l7-marquee--tiefe::after, .l7-scan, .l7-section::before, .l7-karte__puls, .l7-bahn__hinweis::after, [data-l7-tilt] .l7-licht { animation: none !important; } .l7-fx-hero .l7-hero__image, .l7-fx-buehne .l7-buehne__bild, .l7-fx-hero .l7-hero__inner, [data-l7-tilt] { transform: none !important; } .l7-hero__video { display: none; } .l7-bahn .l7-bahn__lauf { display: none; } .l7-bahn .l7-bahn__fallback { display: block; } .l7-bahn { padding: 80px 0; } } /* ========================================================================== UMSCHALTER, BAHN-KARTEN, ANZEIGETAFEL (23.09.2026 abends, Jamies Rueckmeldungen) ========================================================================== */ /* ---------- Segment-Schalter (Level-7-Stil: scharfe Kanten, Tuerkis) ---------- */ .l7-pakete-schalter, .l7-dauer__schalter { display: inline-flex; gap: 0; border: 2px solid var(--l7-black); background: var(--l7-white); position: relative; margin: 8px 0 28px; max-width: 100%; } .l7-section--dark .l7-pakete-schalter, .l7-section--dark .l7-dauer__schalter, .l7-bahnkarte .l7-dauer__schalter { border-color: rgba(4,255,247,0.55); background: #111; } .l7-schalter__knopf { appearance: none; border: 0; background: transparent; color: inherit; font: 800 13px/1 var(--l7-font); letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 22px; min-height: 48px; cursor: pointer; position: relative; z-index: 1; transition: color 0.2s; white-space: nowrap; } .l7-schalter__knopf.is-on { background: var(--l7-teal); color: var(--l7-black); } .l7-section--dark .l7-schalter__knopf, .l7-bahnkarte .l7-schalter__knopf { color: rgba(255,255,255,0.8); } .l7-section--dark .l7-schalter__knopf.is-on, .l7-bahnkarte .l7-schalter__knopf.is-on { color: var(--l7-black); box-shadow: 0 0 18px rgba(4,255,247,0.45); } .l7-schalter__knopf:focus-visible { outline: 2px solid var(--l7-teal); outline-offset: 2px; } @media (max-width: 480px) { .l7-pakete-schalter { display: flex; } .l7-pakete-schalter .l7-schalter__knopf { flex: 1; padding: 14px 8px; font-size: 12px; white-space: normal; } } /* ---------- Event-Pakete: zwei Stufen-Karten, Variante je Bahn ---------- */ .l7-pakete-stufen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; padding-top: 16px; } .l7-paket-card--stufe .l7-paket-card__title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 4px; } .l7-paket-card--stufe { margin-top: 0; } .l7-paket-var { display: none; flex: 1; flex-direction: column; } .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-paket-var[data-l7-bahn="classic"], .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-paket-var[data-l7-bahn="projection"] { display: flex; } .l7-paket-var__bahn { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 800; color: var(--l7-teal); margin: 0 0 16px; } .l7-paket-card--stufe .l7-paket-card__body { display: flex; flex-direction: column; } .l7-paket-plus { margin-top: 4px; border: 1px solid rgba(4,255,247,0.45); background: rgba(4,255,247,0.06); padding: 12px 14px; } .l7-paket-plus__kopf { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 800; color: var(--l7-teal); padding-bottom: 6px !important; } .l7-paket-plus__zeile { color: var(--l7-white); font-weight: 700; } .l7-paket-plus__zeichen { display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--l7-teal); color: var(--l7-black); font-weight: 900; margin-right: 6px; } .l7-paket-card--deluxe { border: 2px solid var(--l7-teal); box-shadow: 0 0 40px rgba(4,255,247,0.12); } .l7-pakete-gemeinsam { margin-top: 24px; padding: 20px 24px; border-top: 3px solid var(--l7-teal); background: var(--l7-white); } .l7-section--dark .l7-pakete-gemeinsam { background: #111; } .l7-pakete-gemeinsam__titel { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 800; color: var(--l7-teal-dark); margin-bottom: 8px; } .l7-section--dark .l7-pakete-gemeinsam__titel { color: var(--l7-teal); } .l7-pakete-gemeinsam__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; } .l7-pakete-gemeinsam__liste li::before { content: '•'; color: var(--l7-teal-dark); margin-right: 8px; font-weight: 900; } .l7-section--dark .l7-pakete-gemeinsam__liste li::before { color: var(--l7-teal); } /* Ohne JavaScript: beide Bahnen in jeder Karte, gruppiert; Schalter weg */ .no-js .l7-paket-var { display: flex !important; } .no-js .l7-paket-var + .l7-paket-var { margin-top: 20px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,0.25); } .no-js .l7-pakete-schalter { display: none; } /* Schwarzer Kasten unter der Kopfzeile (Jamie 23.09.): die „Beliebt"-Karte ragte durch den 6-px-Oberrand + Badge-Abstand aus dem Raster. Im Stufen-Raster gleiche Hoehe, kein Ueberstand. */ .l7-pakete-stufen .l7-paket-card--featured { border-top-width: 2px; } @media (max-width: 760px) { .l7-pakete-stufen { grid-template-columns: 1fr; } } /* ---------- Bahn-Karten (angebotskarten, gruppiert) ---------- */ .l7-bahnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .l7-bahnkarte { display: flex; flex-direction: column; background: #121212; border: 1px solid #2A2A2A; color: var(--l7-white); min-width: 0; } .l7-bahnkarte--hervor { border: 2px solid var(--l7-teal); box-shadow: 0 0 48px rgba(4,255,247,0.14); } .l7-bahnkarte__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #141414; } .l7-bahnkarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); } .l7-bahnkarte.is-tilt .l7-bahnkarte__bild img { transform: scale(1.1) translate(calc((50% - var(--l7-lx, 50%)) * 0.06), calc((50% - var(--l7-ly, 50%)) * 0.06)); } .l7-bahnkarte__bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(18,18,18,0.95) 100%); pointer-events: none; } .l7-bahnkarte__flagge { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--l7-teal); color: var(--l7-black); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 12px; box-shadow: 0 0 20px rgba(4,255,247,0.5); } .l7-bahnkarte__text { padding: 28px 32px 36px; display: flex; flex-direction: column; flex: 1; } .l7-bahnkarte__titel { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.02em; margin: 0 0 12px; color: var(--l7-white); } .l7-dauer { margin-top: auto; } .l7-dauer__schalter { margin: 8px 0 18px; } .l7-dauer__variante { display: none; } .l7-dauer__variante.is-on { display: block; } .l7-dauer__zusatz { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 0 0 14px; border-left: 3px solid var(--l7-teal); padding-left: 12px; } .l7-bahnkarte .l7-angebot__knopf .l7-btn { width: 100%; justify-content: center; } .no-js .l7-dauer__schalter { display: none; } .no-js .l7-dauer__variante { display: block; } .no-js .l7-dauer__variante + .l7-dauer__variante { margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgba(255,255,255,0.25); } @media (max-width: 899px) { .l7-bahnen { grid-template-columns: 1fr; } .l7-bahnkarte__bild { aspect-ratio: 4 / 3; } .l7-dauer__schalter { display: flex; } .l7-dauer__schalter .l7-schalter__knopf { flex: 1; } } /* ---------- Drei Schritte als Bild-Kacheln (Jamie 23.09. abends) ---------- */ .l7-schritte { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; } .l7-schritte--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .l7-schritte__kachel { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,0.08); isolation: isolate; } .l7-schritte__medium { position: absolute; inset: -8% 0; z-index: 0; } .l7-schritte__medium img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translate3d(0, var(--l7-py, 0px), 0) scale(1.06); will-change: transform; } .l7-schritte__medium .l7-bildplatzhalter { height: 100%; } .l7-schritte__kachel::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0.2) 55%, rgba(10,10,10,0.92) 100%); } .l7-schritte__nr { position: absolute; top: 14px; left: 20px; z-index: 2; font-size: clamp(64px, 7vw, 110px); font-weight: 900; line-height: 1; letter-spacing: -0.05em; color: var(--l7-teal); text-shadow: 0 0 24px rgba(4,255,247,0.45), 0 4px 30px rgba(0,0,0,0.6); } .l7-schritte__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 22px 26px; color: var(--l7-white); } .l7-schritte__schritt { display: block; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 800; color: var(--l7-teal); margin-bottom: 8px; } .l7-schritte__titel { font-size: clamp(22px, 2.2vw, 30px); text-transform: uppercase; margin: 0 0 8px; color: var(--l7-white); letter-spacing: -0.01em; } /* Absatz immer zwei Zeilen hoch (Jamie 23.09.: Titel muessen auf einer Linie liegen, auch wenn ein Text nur eine Zeile hat) */ .l7-schritte__absatz { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); min-height: 3em; } .l7-schritte__kachel:hover .l7-schritte__medium img { transform: translate3d(0, var(--l7-py, 0px), 0) scale(1.1); transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); } .l7-section--default .l7-schritte__kachel, .l7-section--cream .l7-schritte__kachel { border-color: rgba(0,0,0,0.08); } /* Handy: waagerecht wischbar, naechste Kachel angeschnitten */ @media (max-width: 760px) { .l7-schritte, .l7-schritte--4 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 24px 12px; margin: 8px -24px 0; scrollbar-width: none; } .l7-schritte::-webkit-scrollbar { display: none; } .l7-schritte__kachel { flex: 0 0 82%; scroll-snap-align: start; aspect-ratio: 3 / 4; } .l7-schritte__nr { font-size: 72px; } } @media (prefers-reduced-motion: reduce) { .l7-schritte__medium img { transform: none !important; transition: none !important; } } /* ---------- Preismatrix in den Bahn-Karten (Jamie 23.09., Punkt 8) ---------- */ .l7-matrix { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-variant-numeric: tabular-nums; table-layout: fixed; } .l7-matrix th, .l7-matrix td { padding: 12px 8px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.14); } .l7-matrix thead th { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.65); font-weight: 800; vertical-align: bottom; border-bottom: 2px solid rgba(4,255,247,0.5); } .l7-matrix tbody th { text-align: left; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.85); width: 34%; } .l7-matrix td { font-size: clamp(18px, 1.7vw, 23px); font-weight: 900; letter-spacing: -0.02em; color: var(--l7-white); white-space: nowrap; } .l7-matrix__einheit { display: block; text-align: left; letter-spacing: 0.1em; font-size: 10px; color: rgba(255,255,255,0.45); text-transform: none; } .l7-matrix__heute { display: none; margin-left: 6px; padding: 2px 6px; background: var(--l7-teal); color: var(--l7-black); font-size: 9px; letter-spacing: 0.15em; vertical-align: middle; } .l7-matrix th.is-heute { color: var(--l7-teal); } .l7-matrix th.is-heute .l7-matrix__heute { display: inline-block; } .l7-matrix td.is-heute { color: var(--l7-teal); text-shadow: 0 0 14px rgba(4,255,247,0.35); } .l7-matrix .is-heute { background: rgba(4,255,247,0.06); } .l7-bahnkarte__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; } .l7-bahnkarte__knoepfe .l7-btn { justify-content: center; padding: 16px 12px; white-space: nowrap; } .l7-bahnen__hinweis { margin: 18px 0 0; font-size: 13px; color: rgba(255,255,255,0.7); text-align: center; letter-spacing: 0.02em; } .l7-section--default .l7-bahnen__hinweis, .l7-section--cream .l7-bahnen__hinweis { color: var(--l7-charcoal); } @media (max-width: 420px) { .l7-matrix th, .l7-matrix td { padding: 10px 4px; } .l7-matrix td { font-size: 17px; } .l7-matrix tbody th { font-size: 11px; } .l7-bahnkarte__text { padding: 22px 18px 28px; } .l7-bahnkarte__knoepfe .l7-btn { padding: 14px 8px; font-size: 12px; } } /* Text der Kacheln immer ueber dem Lichtschein (Punkt 9) */ [data-l7-tilt] .l7-bigcard__title, [data-l7-tilt] .l7-bigcard__sub, [data-l7-tilt] .l7-angebot__text, [data-l7-tilt] .l7-bahnkarte__text, [data-l7-tilt] .l7-paket-card__body { position: relative; z-index: 2; } [data-l7-tilt] .l7-licht { z-index: 1; } /* HOVER AUF DER DUNKLEN KACHEL (Jamie 23.09., Punkt 9 — Ursache gemessen): main.css setzt global `a:hover { color: black }`; die dunkle Kachel ist ein , ihr Text wurde beim Hover schwarz auf schwarz. Kein Effekt-Problem, ein Altfehler aus dem Theme. Hier neutralisiert, Farben bleiben Tokens. */ a.l7-bigcard--dark:hover { color: var(--l7-white); } a.l7-bigcard--teal:hover, a.l7-bigcard--white:hover { color: var(--l7-black); } /* ---------- Standort-Pins mit Logo (Anfahrt-Karte, Jamie 23.09.: „nicht mit billigem Text") ---------- */ .l7-karte__pin-form { fill: #0a0a0a; stroke: var(--l7-teal); stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(4,255,247,0.55)); } .l7-karte__pin--nachbar .l7-karte__pin-form { stroke: var(--l7-magenta); filter: drop-shadow(0 0 10px rgba(255,20,147,0.5)); } .l7-karte__pin-text { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; fill: rgba(255,255,255,0.75); font-weight: 700; } .l7-karte__pin image { image-rendering: auto; } @media (max-width: 899px) { .l7-karte__pin-text { font-size: 12px; } } /* Sprungmarken landen unter der festen Kopfzeile (Jamie 23.09.): Kopfzeile ist 90 px (PC) / 74 px (Handy) hoch. */ [id] { scroll-margin-top: 96px; } @media (max-width: 899px) { [id] { scroll-margin-top: 80px; } } /* ---------- Video in Text-Bild-Liste (Projection-Sektion): Loop ueber dem Standbild ---------- */ .l7-tbl__bild--video { position: relative; } .l7-tbl__bild--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; } .l7-tbl__bild--video video.is-ready { opacity: 1; } .l7-tbl__kennzeichen { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.7); background: rgba(10,10,10,0.7); padding: 4px 8px; } @media (prefers-reduced-motion: reduce) { .l7-tbl__bild--video video { display: none; } } /* GLEICHE HOEHEN, GLEICHE LINIEN (Jamie 23.09.): beide Bahn-Karten teilen sich die Zeilen Bild · Titel · Text · Tabelle · Knoepfe (Subgrid). Bricht ein Titel zweizeilig um, rutscht die Nachbarkarte mit — Tabellenkopf, Preiszeilen und Knoepfe liegen exakt auf einer Linie. Der Titel hat immer Platz fuer zwei Zeilen, damit „Classic" und „Projection" gleich sitzen. */ @supports (grid-template-rows: subgrid) { .l7-bahnen { grid-template-rows: auto auto auto auto auto; } .l7-bahnkarte { display: grid; grid-row: span 5; grid-template-rows: subgrid; } .l7-bahnkarte__text { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 0; } .l7-bahnkarte__text > * { margin-top: 0; } .l7-bahnkarte__titel { min-height: 2.1em; margin-bottom: 12px; } .l7-bahnkarte__text .l7-angebot__desc { margin-bottom: 20px; } .l7-bahnkarte__knoepfe { margin-bottom: 36px; } } /* Handy: gestapelt, kein Subgrid (sonst fielen die Zeilen ohne Elternraster zusammen — gemessen 23.09.) */ @media (max-width: 899px) { .l7-bahnkarte__titel { min-height: 0; } .l7-bahnkarte, .l7-bahnkarte__text { display: flex !important; flex-direction: column; grid-row: auto; } .l7-bahnen { grid-template-rows: none; } } /* ---------- Event-Pakete, Runde 2: Leiste + Karten auf gemeinsamen Zeilen ---------- */ .l7-pakete-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 16px 20px; margin: 0 0 20px; background: #111; border: 1px solid rgba(4,255,247,0.3); } .l7-section--default .l7-pakete-leiste, .l7-section--cream .l7-pakete-leiste { background: var(--l7-white); color: var(--l7-black); } .l7-pakete-leiste__titel { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 800; color: var(--l7-teal); } .l7-section--default .l7-pakete-leiste__titel, .l7-section--cream .l7-pakete-leiste__titel { color: var(--l7-teal-dark); } .l7-pakete-leiste__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; font-weight: 600; } .l7-pakete-leiste__liste li::before { content: '✓'; color: var(--l7-teal); margin-right: 8px; font-weight: 900; } .l7-section--default .l7-pakete-leiste__liste li::before, .l7-section--cream .l7-pakete-leiste__liste li::before { color: var(--l7-teal-dark); } .l7-pakete-stufen { padding-top: 18px; } @supports (grid-template-rows: subgrid) { .l7-pakete-stufen { grid-template-rows: auto auto auto auto; } .l7-paket-card--stufe { display: grid; grid-row: span 4; grid-template-rows: subgrid; padding: 30px 28px 32px; } } .l7-paket-card--stufe { padding: 30px 28px 32px; } .l7-paket-card--stufe .l7-paket-card__title { font-size: clamp(28px, 3vw, 38px); margin: 0 0 6px; color: var(--l7-white); } .l7-paket-card__satz { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.75); } .l7-paket-card__mitte { margin-bottom: 20px; } .l7-paket-var__bahnzeile { font-size: 15px; font-weight: 700; color: var(--l7-white); margin-bottom: 12px; } .l7-paket-card__zusatz { font-size: 13px; color: rgba(255,255,255,0.55); border-left: 3px solid rgba(255,255,255,0.2); padding: 10px 12px; } .l7-paket-plus { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; margin-top: 0; padding: 14px; } .l7-paket-plus--bild { grid-template-columns: 96px 1fr; } .l7-paket-plus img { width: 96px; height: 72px; object-fit: cover; display: block; border: 1px solid rgba(4,255,247,0.4); } .l7-paket-plus__zeile { font-size: 16px; } .l7-paket-card__preise-um { margin-top: auto; } .l7-paket-card__preise-um .l7-paket-var__bahn { margin-bottom: 4px; } .l7-paket-card--stufe > .l7-paket-card__badge--um { display: none; } /* schlaegt main.css (.l7-paket-card > .l7-paket-card__badge) */ .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-paket-card[data-l7-feat-classic="1"], .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-paket-card[data-l7-feat-projection="1"] { border: 2px solid var(--l7-teal); box-shadow: 0 0 40px rgba(4,255,247,0.14); } .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-paket-card[data-l7-feat-classic="1"] .l7-paket-card__badge--um, .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-paket-card[data-l7-feat-projection="1"] .l7-paket-card__badge--um { display: inline-block; } .l7-pakete-stufen .l7-paket-card--deluxe { border: 1px solid #333; box-shadow: none; } .l7-pakete-stufen .l7-paket-card--stufe > .l7-paket-card__badge { position: absolute; top: 0; left: 24px; transform: translateY(-50%); } .l7-paket-var { display: none; } .l7-pakete-stufen .l7-paket-card--stufe .l7-paket-var { display: none; } .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-paket-card--stufe .l7-paket-var[data-l7-bahn="classic"], .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-paket-card--stufe .l7-paket-var[data-l7-bahn="projection"] { display: block; } .no-js .l7-pakete-stufen .l7-paket-card--stufe .l7-paket-var { display: block !important; } @media (max-width: 760px) { .l7-paket-card--stufe { display: flex !important; flex-direction: column; grid-row: auto; } .l7-pakete-stufen { grid-template-rows: none; } } /* Basic-Kasten wie das Deluxe-Plus, nur ruhiger (kein Loch mehr) */ .l7-paket-plus--basic { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); } .l7-paket-plus--basic .l7-paket-plus__kopf { color: rgba(255,255,255,0.6); } .l7-paket-plus--basic .l7-paket-plus__zeile { font-weight: 600; color: rgba(255,255,255,0.85); font-size: 15px; } .l7-paket-plus--basic img { border-color: rgba(255,255,255,0.25); } /* Schritt-Kacheln: Absatz am Handy drei Zeilen hoch, damit die Titel buendig bleiben */ @media (max-width: 760px) { .l7-schritte__absatz { min-height: 4.5em; } } /* ---------- Event-Pakete, Runde 3: grosses Bild, Titel darauf, Preisbloecke ---------- */ @supports (grid-template-rows: subgrid) { .l7-pakete-stufen { grid-template-rows: auto auto auto auto; } .l7-paket-card--stufe { grid-template-rows: subgrid; grid-row: span 4; padding: 0; } } .l7-paket-card--stufe { padding: 0; } .l7-paket-card__hero { position: relative; aspect-ratio: 3 / 4; max-height: 420px; overflow: hidden; background: #111; isolation: isolate; } .l7-paket-card__hero .l7-paket-var { position: absolute; inset: -6% 0; z-index: 0; } .l7-paket-card__hero img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translate3d(0, var(--l7-py, 0px), 0) scale(1.05); will-change: transform; } .l7-paket-card__hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,0.1) 0%, rgba(10,10,10,0) 40%, rgba(10,10,10,0.35) 70%, rgba(10,10,10,0.95) 100%); } .l7-paket-card__title--hero { position: absolute; left: 28px; right: 28px; bottom: 22px; z-index: 2; margin: 0; font-size: clamp(38px, 4vw, 56px); letter-spacing: -0.03em; color: var(--l7-white); text-shadow: 0 6px 30px rgba(0,0,0,0.7); } .l7-pakete-stufen .l7-paket-card--stufe .l7-paket-card__hero .l7-paket-var { display: none; } .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-paket-card--stufe .l7-paket-card__hero .l7-paket-var[data-l7-bahn="classic"], .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-paket-card--stufe .l7-paket-card__hero .l7-paket-var[data-l7-bahn="projection"] { display: block; } .no-js .l7-paket-card__hero .l7-paket-var[data-l7-bahn="projection"] { display: none !important; } .l7-paket-card--stufe .l7-paket-card__satz { padding: 22px 28px 0; margin-bottom: 14px; font-size: 15px; } .l7-paket-card--stufe .l7-paket-card__mitte { padding: 0 28px; margin-bottom: 18px; } .l7-paket-card--stufe .l7-paket-card__preise-um { padding: 0 28px 30px; } .l7-preisbloecke { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 16px; } .l7-preisblock { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #141414; border: 1px solid rgba(255,255,255,0.12); border-top: 3px solid rgba(4,255,247,0.55); } .l7-preisblock__tage { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.65); } .l7-preisblock__wert { font-size: clamp(22px, 1.9vw, 27px); font-weight: 900; letter-spacing: -0.03em; color: var(--l7-teal); line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(4,255,247,0.25); } .l7-preisblock__einheit { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; } .l7-paket-card--stufe .l7-paket-card__knopf { margin-top: 0; } .l7-paket-card--stufe .l7-paket-card__knopf .l7-btn { width: 100%; justify-content: center; padding: 18px 20px; font-size: 15px; } /* Empfehlung deutlicher: Leuchtkante rundum, Badge oben links auf dem Bild */ .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-paket-card[data-l7-feat-classic="1"], .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-paket-card[data-l7-feat-projection="1"] { border: 2px solid var(--l7-teal); box-shadow: 0 0 0 1px rgba(4,255,247,0.25), 0 0 60px rgba(4,255,247,0.22); } .l7-pakete-stufen .l7-paket-card--stufe > .l7-paket-card__badge { top: 16px; left: 16px; transform: none; z-index: 3; box-shadow: 0 0 20px rgba(4,255,247,0.5); } @media (max-width: 760px) { .l7-paket-card__hero { max-height: 360px; } .l7-paket-card__title--hero { font-size: 40px; left: 20px; right: 20px; } .l7-paket-card--stufe .l7-paket-card__satz, .l7-paket-card--stufe .l7-paket-card__mitte { padding-left: 20px; padding-right: 20px; } .l7-paket-card--stufe .l7-paket-card__preise-um { padding: 0 20px 24px; } .l7-preisblock__wert { font-size: 23px; } } @media (prefers-reduced-motion: reduce) { .l7-paket-card__hero img { transform: none !important; } } /* Hero-Bild der Paketkarte: Variante als Block (die Flex-Regel der Preis-Varianten liess das Bild halb breit) */ .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-paket-card--stufe .l7-paket-card__hero .l7-paket-var[data-l7-bahn="classic"], .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-paket-card--stufe .l7-paket-card__hero .l7-paket-var[data-l7-bahn="projection"] { display: block !important; } .l7-paket-card__hero .l7-paket-var img { width: 100% !important; height: 100% !important; max-width: none; } .l7-preisblock__wert { white-space: nowrap; } @media (max-width: 420px) { .l7-preisblock { padding: 12px 10px; } .l7-preisblock__wert { font-size: 24px; } .l7-preisbloecke { gap: 8px; } } /* aspect-ratio + max-height machte den Hero nur 315 px breit (gemessen) — feste Hoehe, volle Breite */ .l7-paket-card__hero { aspect-ratio: auto; height: 420px; max-height: none; width: 100%; } @media (max-width: 760px) { .l7-paket-card__hero { height: 360px; } } /* ---------- Event-Pakete, Runde 4 (24.09.2026): Bahnwahl als Tab-Kopf EINER Flaeche ---------- Jamie: „Unterscheidung Classic/Projection nicht klar, Umschalter viel zu weit weg". Die zwei Kacheln sind die Reiter, die aktive geht nahtlos in die dunkle Flaeche mit den Karten ueber. Akzent je Bahn ueber --l7-bahn (Projection Tuerkis, Classic Magenta), weich ueberblendet. */ @property --l7-bahn { syntax: ''; inherits: true; initial-value: #04FFF7; } .l7-pakete-buehne { --l7-bahn: var(--l7-teal); --l7-bahn-glut: rgba(4,255,247,0.30); --l7-flaeche: #0B0B0B; --l7-seite: var(--l7-white); position: relative; margin-top: 8px; transition: --l7-bahn 0.4s ease; } .l7-pakete-buehne:has(.l7-pakete-stufen[data-l7-aktiv="classic"]) { --l7-bahn: var(--l7-magenta); --l7-bahn-glut: rgba(255,20,147,0.28); } .l7-section--cream .l7-pakete-buehne { --l7-seite: var(--l7-cream); } .l7-section--dark .l7-pakete-buehne { --l7-seite: var(--l7-black); --l7-flaeche: #161616; } /* Reiter */ .l7-bahnwahl { position: relative; z-index: 5; background: var(--l7-seite); } .l7-bahnwahl__frage { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 800; color: #555; margin: 0 0 12px; } .l7-section--dark .l7-bahnwahl__frage { color: rgba(255,255,255,0.6); } .l7-bahnwahl__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 8px; align-items: end; } .l7-bahnwahl__kachel { --l7-k: var(--l7-teal); appearance: none; border: 0; border-top: 4px solid transparent; margin: 0; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 96px minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; background: #ECECEC; color: #1A1A1A; transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease, border-color 0.3s ease; } .l7-bahnwahl__kachel--classic { --l7-k: var(--l7-magenta); } .l7-bahnwahl__kachel:hover { background: #E1E1E1; border-top-color: var(--l7-k); } .l7-section--dark .l7-bahnwahl__kachel { background: #1D1D1D; color: rgba(255,255,255,0.8); } .l7-bahnwahl__kachel.is-on, .l7-bahnwahl__kachel.is-on:hover { background: var(--l7-flaeche); color: var(--l7-white); border-top-color: var(--l7-k); padding-bottom: 24px; cursor: default; } .l7-bahnwahl__kachel:focus-visible { outline: 2px solid var(--l7-k); outline-offset: 2px; } .l7-bahnwahl__bild { display: block; width: 96px; height: 68px; overflow: hidden; background: #222; } .l7-bahnwahl__bild img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.6) brightness(0.9); transition: filter 0.4s ease; } .l7-bahnwahl__kachel:hover .l7-bahnwahl__bild img, .l7-bahnwahl__kachel.is-on .l7-bahnwahl__bild img { filter: none; } .l7-bahnwahl__text { display: block; min-width: 0; } .l7-bahnwahl__name { display: block; font-size: 19px; line-height: 1.1; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; } .l7-bahnwahl__satz { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; font-weight: 500; color: #555; transition: color 0.3s ease; } .l7-bahnwahl__kachel.is-on .l7-bahnwahl__satz { color: rgba(255,255,255,0.78); } .l7-bahnwahl__punkt { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.35; transition: opacity 0.3s ease, border-color 0.3s ease; } .l7-bahnwahl__punkt::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--l7-k); transform: scale(0); transition: transform 0.3s ease; } .l7-bahnwahl__kachel.is-on .l7-bahnwahl__punkt { opacity: 1; border-color: var(--l7-k); } .l7-bahnwahl__kachel.is-on .l7-bahnwahl__punkt::after { transform: scale(1); } /* Gemeinsame Flaeche: Karten + Fuss */ .l7-pakete-flaeche { background: var(--l7-flaeche); color: var(--l7-white); padding: 32px; } .l7-bahnwahl__erklaer { display: none; } .l7-bahnwahl__erklaer-satz { display: none; margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.8); } .l7-bahnwahl__erklaer-satz strong { color: var(--l7-bahn); font-weight: 800; } .l7-pakete-buehne:has(.l7-pakete-stufen[data-l7-aktiv="classic"]) .l7-bahnwahl__erklaer-satz[data-l7-bahn="classic"], .l7-pakete-buehne:has(.l7-pakete-stufen[data-l7-aktiv="projection"]) .l7-bahnwahl__erklaer-satz[data-l7-bahn="projection"] { display: block; } .l7-pakete-flaeche .l7-pakete-stufen { padding-top: 0; row-gap: 0; } /* Subgrid erbt sonst 24 px Zeilenabstand in jede Karte */ .l7-pakete-flaeche .l7-paket-card--stufe { background: #151515; border: 1px solid #2A2A2A; box-shadow: none; } .l7-pakete-flaeche .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-paket-card[data-l7-feat-classic="1"], .l7-pakete-flaeche .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-paket-card[data-l7-feat-projection="1"] { border: 2px solid var(--l7-bahn); box-shadow: 0 0 48px var(--l7-bahn-glut); } .l7-pakete-flaeche .l7-pakete-stufen .l7-paket-card--stufe > .l7-paket-card__badge { background: var(--l7-bahn); color: var(--l7-black); box-shadow: none; } /* Bahnart gross im Kartentitel, Akzentkante oben am Bild */ .l7-paket-card__hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3; background: var(--l7-bahn); } .l7-pakete-flaeche .l7-paket-card__title--hero { display: flex; flex-direction: column; gap: 8px; line-height: 0.95; } .l7-paket-card__stufe { display: block; } .l7-bahnzusatz { display: none; align-items: center; gap: 12px; font-size: 0.5em; line-height: 1; letter-spacing: 0.04em; color: var(--l7-bahn); } .l7-bahnzusatz__trenner { display: inline-block; width: 28px; height: 4px; background: var(--l7-bahn); flex: none; } .l7-pakete-stufen[data-l7-aktiv="classic"] .l7-bahnzusatz[data-l7-bahn="classic"], .l7-pakete-stufen[data-l7-aktiv="projection"] .l7-bahnzusatz[data-l7-bahn="projection"] { display: flex; } /* Akzent zieht durch Leistung, Plus und Preise */ .l7-paket-var__haken { color: var(--l7-bahn); margin-right: 8px; font-weight: 900; } .l7-pakete-flaeche .l7-paket-plus:not(.l7-paket-plus--basic) { border-color: var(--l7-bahn); background: color-mix(in srgb, var(--l7-bahn) 7%, transparent); } .l7-pakete-flaeche .l7-paket-plus:not(.l7-paket-plus--basic) .l7-paket-plus__kopf { color: var(--l7-bahn); } .l7-pakete-flaeche .l7-paket-plus__zeichen { background: var(--l7-bahn); } .l7-pakete-flaeche .l7-paket-plus:not(.l7-paket-plus--basic) img { border-color: var(--l7-bahn); } .l7-pakete-flaeche .l7-preisblock { background: #1B1B1B; border-top-color: var(--l7-bahn); } .l7-pakete-flaeche .l7-preisblock__wert { color: var(--l7-bahn); text-shadow: none; } /* Ruhiges Ueberblenden beim Wechsel (Anzeige an = Animation startet neu), nichts bewegt sich */ @keyframes l7-bahn-ein { from { opacity: 0; } to { opacity: 1; } } .l7-pakete-flaeche .l7-paket-var, .l7-bahnzusatz, .l7-bahnwahl__erklaer-satz { animation: l7-bahn-ein 0.4s ease both; } @media (prefers-reduced-motion: reduce) { .l7-pakete-flaeche .l7-paket-var, .l7-bahnzusatz, .l7-bahnwahl__erklaer-satz { animation: none; } .l7-pakete-buehne { transition: none; } } /* Fuss der Flaeche: In jedem Paket + Gilt fuer alle */ .l7-pakete-fuss { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 48px; margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.12); } .l7-pakete-fuss__titel { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 800; color: var(--l7-bahn); margin-bottom: 12px; } .l7-pakete-fuss__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); } .l7-pakete-fuss__liste li::before { content: '•'; color: rgba(255,255,255,0.4); margin-right: 8px; font-weight: 900; } .l7-pakete-fuss__liste--haken li::before { content: '✓'; color: var(--l7-bahn); } /* Ohne JavaScript: keine Reiter, beide Bahnen als beschriftete Bloecke */ .l7-nur-ohne-js { display: none; } .no-js .l7-bahnwahl, .no-js .l7-bahnwahl__frage { display: none; } .no-js .l7-bahnwahl__erklaer-satz[data-l7-bahn="classic"] strong { color: var(--l7-magenta); } .no-js .l7-bahnwahl__erklaer { display: block; margin-bottom: 24px; } .no-js .l7-bahnwahl__erklaer-satz { display: block !important; } .no-js .l7-bahnzusatz { display: none !important; } .no-js .l7-pakete-flaeche .l7-paket-var__bahn.l7-nur-ohne-js { display: block; font-size: 13px; letter-spacing: 0.2em; margin: 0 0 12px; color: var(--l7-teal); } .no-js .l7-pakete-flaeche .l7-paket-var[data-l7-bahn="classic"] .l7-paket-var__bahn { color: var(--l7-magenta); } .no-js .l7-pakete-flaeche .l7-paket-var + .l7-paket-var { margin-top: 20px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,0.25); } /* Tablet */ @media (max-width: 960px) { .l7-bahnwahl__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .l7-bahnwahl__kachel { grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 12px; } .l7-bahnwahl__bild { width: 72px; height: 56px; } } /* Handy: Flaeche randlos, Reiter kleben unter der Kopfzeile, Unterschied-Satz in der Flaeche */ @media (max-width: 760px) { .l7-pakete-buehne { margin-left: -24px; margin-right: -24px; } .l7-bahnwahl { position: sticky; top: var(--l7-pakete-kopf, 74px); padding-top: 6px; } /* Kopfzeile am Handy 74 px (gemessen 24.09.) */ .l7-bahnwahl__frage { padding: 0 24px; margin-bottom: 8px; font-size: 11px; } .l7-bahnwahl__tabs { gap: 4px; } .l7-bahnwahl__kachel { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 10px 10px 10px 10px; min-height: 64px; } .l7-bahnwahl__kachel.is-on { padding-bottom: 14px; } .l7-bahnwahl__bild { width: 44px; height: 44px; } .l7-bahnwahl__name { font-size: 14px; } .l7-bahnwahl__satz, .l7-bahnwahl__punkt { display: none; } .l7-bahnwahl__erklaer { display: block; margin: 0 0 18px; } .l7-pakete-flaeche { padding: 18px 16px 24px; } .l7-pakete-fuss { grid-template-columns: 1fr; margin-top: 24px; } .l7-pakete-flaeche .l7-pakete-stufen { row-gap: 24px; } .l7-pakete-fuss__liste { flex-direction: column; gap: 8px; } } /* ---------- Event-Pakete, Runde 5 (24.09.2026): Reiter volle Breite, Leistungs-Leiste, Info-Zeile ---------- Jamie: Reiter „komisch angeordnet" (nur 2/3 breit, Oberkanten versetzt, grauer Fremdkoerper) und Liste unter den Karten „unuebersichtlich, geht unter". Reiter jetzt 50/50 ueber die volle Flaeche, gleiche Hoehe; der aktive IST die Flaeche, der inaktive ist dunkel und gedaempft. */ .l7-bahnwahl { background: transparent; } .l7-bahnwahl__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: stretch; } .l7-bahnwahl__kachel, .l7-section--dark .l7-bahnwahl__kachel { grid-template-columns: 96px minmax(0, 1fr); padding: 16px 22px 18px 16px; background: #1C1C1C; color: rgba(255,255,255,0.62); border-top: 4px solid #2A2A2A; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); } .l7-bahnwahl__kachel + .l7-bahnwahl__kachel { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08), inset 1px 0 0 rgba(255,255,255,0.06); } .l7-bahnwahl__kachel:hover { background: #242424; color: rgba(255,255,255,0.9); border-top-color: color-mix(in srgb, var(--l7-k) 55%, #2A2A2A); } .l7-bahnwahl__kachel .l7-bahnwahl__satz { color: rgba(255,255,255,0.5); } .l7-bahnwahl__kachel:hover .l7-bahnwahl__satz { color: rgba(255,255,255,0.7); } .l7-bahnwahl__kachel.is-on, .l7-bahnwahl__kachel.is-on:hover, .l7-section--dark .l7-bahnwahl__kachel.is-on { background: var(--l7-flaeche); color: var(--l7-white); border-top-color: var(--l7-k); padding-bottom: 18px; box-shadow: none; } .l7-bahnwahl__kachel.is-on .l7-bahnwahl__name { color: var(--l7-white); } .l7-bahnwahl__kachel.is-on .l7-bahnwahl__satz { color: rgba(255,255,255,0.8); } .l7-bahnwahl__punkt { display: none; } .l7-bahnwahl__frage { margin-left: 0; padding-left: 0; } /* Leistungs-Leiste ueber den Karten: 5 gleich grosse Kacheln */ .l7-pleiste { margin: 0 0 32px; } .l7-pleiste__titel { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 800; color: var(--l7-bahn); margin: 0 0 14px; } .l7-pleiste__kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .l7-pleiste__kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 18px 18px; background: #151515; border: 1px solid #2A2A2A; border-top: 3px solid var(--l7-bahn); min-width: 0; } .l7-pleiste__kachel--fehlt { outline: 2px dashed #E53935; } .l7-pleiste__icon { color: var(--l7-bahn); display: block; line-height: 0; margin-bottom: 6px; } .l7-pleiste__gross { display: block; font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: var(--l7-white); hyphens: manual; overflow-wrap: normal; } .l7-pleiste__klein { display: block; font-size: 14px; line-height: 1.35; font-weight: 500; color: rgba(255,255,255,0.68); } /* Info-Zeile unter den Karten: sachlich, gut lesbar */ .l7-pakete-info { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 18px 20px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); } .l7-pakete-info__i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.6px solid rgba(255,255,255,0.7); color: rgba(255,255,255,0.85); font: italic 700 14px/21px Georgia, serif; text-align: center; margin-top: 1px; } .l7-pakete-info__titel { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.6); margin-bottom: 6px; } .l7-pakete-info__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: rgba(255,255,255,0.88); } .l7-pakete-info__liste li + li::before { content: '·'; margin: 0 12px; color: rgba(255,255,255,0.4); font-weight: 900; } @media (max-width: 1100px) { .l7-pleiste__gross { font-size: 17px; } .l7-pleiste__kachel { padding: 16px 14px 14px; } } @media (max-width: 960px) { .l7-bahnwahl__kachel, .l7-section--dark .l7-bahnwahl__kachel { grid-template-columns: 72px minmax(0, 1fr); } .l7-pleiste__kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .l7-bahnwahl { background: var(--l7-black, #0A0A0A); } /* 24.09.: --l7-seite ist weiss, gab die weisse Leiste ueber den Reitern */ .l7-bahnwahl__frage { padding: 0 16px; } .l7-bahnwahl__tabs { gap: 0; } .l7-bahnwahl__kachel, .l7-section--dark .l7-bahnwahl__kachel, .l7-bahnwahl__kachel.is-on { grid-template-columns: 44px minmax(0, 1fr); padding: 10px 12px; min-height: 66px; } .l7-pleiste { margin-bottom: 24px; } .l7-pleiste__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .l7-pleiste__kachel { padding: 14px 12px 12px; gap: 4px; } .l7-pleiste__kachel:last-child:nth-child(odd) { grid-column: 1 / -1; } .l7-pleiste__icon svg { width: 26px; height: 26px; } .l7-pleiste__gross { font-size: 15px; } .l7-pleiste__klein { font-size: 13px; } .l7-pakete-info { padding: 14px 14px; margin-top: 24px; } .l7-pakete-info__liste { flex-direction: column; gap: 4px; font-size: 14px; } .l7-pakete-info__liste li::before, .l7-pakete-info__liste li + li::before { content: none; } } /* Fusszeile: volles Logo (23.09.2026) */ .l7-footer__col--brand .l7-footer__logo.l7-footer__logo--voll svg { width: 150px; height: auto; display: block; } /* ========================================================================== TEXT-BILD-LISTE ALS BUEHNE (24.09.2026, Jamie: „Das Bild ist nun zu klein … super langweilig") Feld darstellung = buehne: Bild/Video fuellt die ganze Sektion (volle Breite, hoch), der Text liegt links auf einem dunklen Verlauf. Nur mit Video: langsamer Kamera-Push-in (Datei), sonst ein sehr langsamer Ken-Burns-Zoom auf dem Standbild (CSS, 28 s hin und zurueck). Am Handy stapelt es: Medium oben hochkant, Text darunter — Text und Bild ueberlappen dort nie. „Weniger Bewegung": Video aus, kein Zoom, Standbild bleibt. ========================================================================== */ .l7-tbl--buehne { padding: 0; overflow: hidden; isolation: isolate; background: var(--l7-black); } .l7-tbl--buehne .l7-tbl__medien { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0d0f12; } .l7-tbl--buehne .l7-tbl__medien img, .l7-tbl--buehne .l7-tbl__medien video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Standbild: ruhiger Zoom (1.00 -> 1.06 -> 1.00), damit auch ohne Video etwas lebt. */ .l7-tbl--buehne .l7-tbl__medien img { transform-origin: 58% 45%; animation: l7-tbl-kenburns 28s ease-in-out infinite alternate; will-change: transform; } @keyframes l7-tbl-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } } /* Video: liegt ueber dem Bild, blendet ein, sobald es spielen kann (effekte.js setzt is-ready). */ .l7-tbl--buehne .l7-tbl__medien video { z-index: 1; opacity: 0; transition: opacity 1.4s ease; } .l7-tbl--buehne .l7-tbl__medien video.is-ready { opacity: 1; } /* Mit Video: kein CSS-Zoom auf dem Standbild, sonst spraenge das Bild beim Einblenden des Videos. */ .l7-tbl--buehne .l7-tbl__medien--video img { animation: none; transform: none; } /* Verlauf: links dunkel fuer den Text, rechts frei fuer die Bahn; oben/unten in Schwarz auslaufen, damit die Buehne nahtlos zwischen den schwarzen Sektionen sitzt. */ .l7-tbl--buehne .l7-tbl__schleier { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 78%, rgba(10,10,10,0.7) 100%), linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.88) 28%, rgba(10,10,10,0.62) 46%, rgba(10,10,10,0.16) 64%, rgba(10,10,10,0) 80%); } .l7-tbl--buehne .l7-tbl__buehne-inhalt { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; min-height: clamp(600px, 84vh, 880px); padding-top: 96px; padding-bottom: 96px; } .l7-tbl--buehne .l7-tbl__text { max-width: 560px; } .l7-tbl--buehne .l7-tbl__heading { font-size: clamp(40px, 5.2vw, 72px); line-height: 0.98; max-width: 9em; margin-bottom: 26px; text-shadow: 0 2px 24px rgba(0,0,0,0.6); } .l7-tbl--buehne .l7-tbl__absatz { color: rgba(255,255,255,0.86); max-width: 520px; text-shadow: 0 1px 12px rgba(0,0,0,0.7); } .l7-tbl--buehne .l7-tbl__absatz strong { color: var(--l7-white); } .l7-tbl--buehne .l7-tbl__liste { margin-top: 40px; max-width: 560px; } .l7-tbl--buehne .l7-tbl__punkt { background: rgba(10,10,10,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .l7-tbl--buehne .l7-tbl__kennzeichen { z-index: 3; right: 16px; bottom: 14px; } @media (max-width: 899px) { .l7-tbl--buehne .l7-tbl__medien { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: 78vh; } .l7-tbl--buehne .l7-tbl__medien img { transform-origin: 50% 40%; } .l7-tbl--buehne .l7-tbl__schleier { background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 70%, rgba(10,10,10,0.9) 100%); } .l7-tbl--buehne .l7-tbl__buehne-inhalt { min-height: 0; padding-top: 34px; padding-bottom: 64px; margin-top: -48px; } .l7-tbl--buehne .l7-tbl__text { max-width: none; } .l7-tbl--buehne .l7-tbl__heading { font-size: clamp(36px, 10.5vw, 48px); } .l7-tbl--buehne .l7-eyebrow { font-size: 10px; letter-spacing: 0.2em; } .l7-tbl--buehne .l7-tbl__absatz { text-shadow: none; } .l7-tbl--buehne .l7-tbl__liste { margin-top: 32px; max-width: none; } .l7-tbl--buehne .l7-tbl__kennzeichen { bottom: auto; top: 12px; right: 12px; } } @media (prefers-reduced-motion: reduce) { .l7-tbl--buehne .l7-tbl__medien video { display: none; } .l7-tbl--buehne .l7-tbl__medien img { animation: none; transform: none; } }