/* ========================================================================== LEVEL 7 — DUNKLE WELT (24.09.2026, Jamie: „Weiße Hintergründe sind's einfach nicht.") Eigene Datei, main.css bleibt 1:1 aus dem Theme. Eingebunden in _layouts/seite.njk NACH effekte.css, solange einstellungen.dunkel nicht false ist. WAS SIE TUT 1. Die hellen Flächen-Varianten bekommen dunkle Entsprechungen — die Varianten bleiben im Builder wählbar, sie bedeuten nur etwas anderes: default → Anthrazit (#121316, feine Beton-Textur) „Standard" cream → Graphit (#191A1D, warm) „Creme" white → Anthrazit (Karten) dark → Schwarz (#0A0A0A, wie bisher) teal / magenta bleiben (Markenflächen). Rhythmus kommt aus drei Dunkelstufen, Bildsektionen und Tiefe — nicht aus Weiß. 2. Neon: alle primären türkisen Knöpfe und Akzentwörter leuchten wie „STRIKE." im Kopfbereich (mehrlagiger Schein in --l7-teal, Atmen NUR bei Hover, nie flackernd). 3. Countdown ohne Kästen: große Ziffern, feine Trennlinien. 4. Neue Darstellungen einzelner Bausteine (Kapitel-Fläche, Nachbarn, Formular-Bühne, Wege). SPEZIFITÄT: Jede Regel beginnt mit `html` — so schlägt sie gleich benannte Regeln aus main.css, effekte.css, bar.css, gutscheine.css und startseite.css unabhängig davon, in welcher Reihenfolge die Dateien geladen werden (einige hängen erst im an ihrer Sektion). Farben ausschließlich Tokens aus main.css. „Weniger Bewegung": am Ende alles aus. ========================================================================== */ html { --l7-anthrazit: #121316; --l7-graphit: #191A1D; --l7-linie: rgba(255,255,255,0.10); --l7-linie-2: rgba(255,255,255,0.16); --l7-text-2: rgba(255,255,255,0.78); --l7-text-3: rgba(255,255,255,0.55); /* Beton: feines Korn als SVG-Rauschen, sehr leise (Bildwelt: Sichtbeton-Platten) */ --l7-beton: url("data:image/svg+xml;utf8,"); --l7-neon: 0 0 0 1px rgba(4,255,247,0.55), 0 0 14px rgba(4,255,247,0.55), 0 0 36px rgba(4,255,247,0.32), 0 0 80px rgba(4,255,247,0.16); --l7-neon-hover: 0 0 0 1px rgba(4,255,247,0.9), 0 0 20px rgba(4,255,247,0.8), 0 0 52px rgba(4,255,247,0.45), 0 0 110px rgba(4,255,247,0.24); --l7-neon-text: 0 0 18px rgba(4,255,247,0.55), 0 0 48px rgba(4,255,247,0.3); --l7-neon-magenta: 0 0 0 1px rgba(255,20,147,0.55), 0 0 14px rgba(255,20,147,0.5), 0 0 36px rgba(255,20,147,0.3); } html body { background: var(--l7-black); } /* ---------- 1. Flächen ---------- */ html .l7-section--default { background: var(--l7-anthrazit) var(--l7-beton); color: var(--l7-white); } html .l7-section--cream { background: var(--l7-graphit) var(--l7-beton); color: var(--l7-white); } html .l7-section--default a:not(.l7-btn), html .l7-section--cream a:not(.l7-btn) { color: var(--l7-teal); } html .l7-section--default .l7-lead, html .l7-section--cream .l7-lead { color: var(--l7-text-2); } html .l7-section--default .l7-eyebrow, html .l7-section--cream .l7-eyebrow { color: var(--l7-teal); } html .l7-section--default .l7-note, html .l7-section--cream .l7-note { color: var(--l7-text-3); } html .l7-section--default .l7-link, html .l7-section--cream .l7-link { color: var(--l7-teal); } /* Feine Kante zwischen zwei dunklen Flächen, damit der Rhythmus lesbar bleibt */ html .l7-section--default, html .l7-section--cream { box-shadow: inset 0 1px 0 var(--l7-linie); } /* Karten und Kästen, die in main.css weiß/creme waren */ html .l7-card, html .l7-accordion__item, html .l7-tarif-card, html .l7-paket-card, html .l7-bigcard--white, html .l7-shop-card, html .l7-kontakt-card, html .l7-anfahrt-card, html .l7-pagination .page-numbers { background: rgba(255,255,255,0.035); color: var(--l7-white); border-color: var(--l7-linie-2); } html .l7-card__title a, html .l7-kontakt-card__contact a { color: var(--l7-white); } html .l7-card__date, html .l7-accordion__q::after, html .l7-tarif-list__heading, html .l7-tarif-card__num, html .l7-speisekarte__kat-title { color: var(--l7-teal); } html .l7-tarif-card { border-color: var(--l7-linie-2); } html .l7-tarif-card--featured { border-color: var(--l7-teal); background: rgba(4,255,247,0.05); } html .l7-paket-card__preis strong { color: var(--l7-white); } html .l7-paket-card__preis, html .l7-speisekarte__item, html .l7-hours-table td { border-color: var(--l7-linie); } html .l7-shop-card { border-color: var(--l7-linie-2); } html .l7-shop-card--free { background: var(--l7-teal); color: var(--l7-black); } html .l7-tag--veggie { background: rgba(255,255,255,0.14); color: var(--l7-white); } html .l7-section--default .l7-steps__num, html .l7-section--cream .l7-steps__num { color: var(--l7-teal); text-shadow: var(--l7-neon-text); } html .l7-section--default .l7-schritte__kachel, html .l7-section--cream .l7-schritte__kachel { border-color: var(--l7-linie-2); } html .l7-usp__check { background: rgba(4,255,247,0.12); } html .l7-section--default .l7-bahnen__hinweis, html .l7-section--cream .l7-bahnen__hinweis { color: var(--l7-text-2); } html .l7-section--default .l7-pakete-leiste, html .l7-section--cream .l7-pakete-leiste { background: rgba(255,255,255,0.04); color: var(--l7-white); } html .l7-section--default .l7-pakete-leiste__titel, html .l7-section--cream .l7-pakete-leiste__titel, html .l7-section--default .l7-pakete-leiste__liste li::before, html .l7-section--cream .l7-pakete-leiste__liste li::before { color: var(--l7-teal); } html .l7-section--cream .l7-pakete-buehne { --l7-seite: var(--l7-graphit); } /* Formular-Felder (alle Varianten außer teal: dunkel mit Neon-Fokus) */ html .l7-section--default .l7-form input, html .l7-section--default .l7-form select, html .l7-section--default .l7-form textarea, html .l7-section--cream .l7-form input, html .l7-section--cream .l7-form select, html .l7-section--cream .l7-form textarea, html .l7-section--dark .l7-form input, html .l7-section--dark .l7-form select, html .l7-section--dark .l7-form textarea { background: rgba(255,255,255,0.05); color: var(--l7-white); border-color: rgba(255,255,255,0.22); color-scheme: dark; } html .l7-form input:focus, html .l7-form select:focus, html .l7-form textarea:focus { outline: 2px solid var(--l7-teal); outline-offset: 0; box-shadow: var(--l7-neon); border-color: var(--l7-teal); } html .l7-section--default .l7-form input::placeholder, html .l7-section--dark .l7-form input::placeholder, html .l7-section--default .l7-form textarea::placeholder, html .l7-section--dark .l7-form textarea::placeholder { color: rgba(255,255,255,0.4); } /* Speisekarte (bar.css): war Creme. Chips, Suche, Rubriken, Preise. */ html .l7-section--cream .l7-karte__chips, html .l7-section--default .l7-karte__chips { background: var(--l7-graphit); border-bottom-color: var(--l7-linie-2); } html .l7-section--default .l7-karte__chips { background: var(--l7-anthrazit); } html .l7-karte__suche input { background: rgba(255,255,255,0.05); color: var(--l7-white); border-color: rgba(255,255,255,0.3); } html .l7-karte__suche input::placeholder { color: rgba(255,255,255,0.45); } html .l7-karte__suche svg { color: var(--l7-white); } html .l7-chip { border-color: rgba(255,255,255,0.5); color: var(--l7-white); } html .l7-chip:hover { border-color: var(--l7-teal); color: var(--l7-teal); } html .l7-chip.is-active { background: var(--l7-teal); color: var(--l7-black); border-color: var(--l7-teal); box-shadow: var(--l7-neon); } html .l7-chip.is-active .l7-chip__n { color: var(--l7-black); } html .l7-karte__rubrik + .l7-karte__rubrik::before { border-top-color: var(--l7-linie-2); border-bottom-color: var(--l7-linie); } html .l7-karte__rubrik + .l7-karte__rubrik::after { background: var(--l7-teal); } html .l7-karte__rubrik-geist { -webkit-text-stroke-color: rgba(255,255,255,0.10); } html .l7-karte__rubrik-nr { color: var(--l7-teal); border-color: var(--l7-teal); } html .l7-karte__rubrik-bild { box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 3px var(--l7-graphit); } html .l7-karte__punkte { border-bottom-color: rgba(255,255,255,0.3); } html .l7-karte__preis { color: var(--l7-teal); } html .l7-karte__desc { color: var(--l7-text-2); } html .l7-karte__name, html .l7-karte__rubrik-titel { color: var(--l7-white); } html .l7-section--cream .l7-karte__rubrik-anzahl, html .l7-section--cream .l7-karte__hinweis { color: var(--l7-text-3); } /* Speisekarte-Flaeche (Jamie 24.09.: „Schwarz zu hart vor dem Silbrigen, wirkt kaputt"): kein weisser Radial-Verlauf mehr, durchgehend Anthrazit/Graphit mit feinem Rauschen und einem leisen Tuerkis-Hauch oben. */ html .l7-karte::after { background: radial-gradient(120% 60% at 50% 0%, rgba(4,255,247,0.06), rgba(4,255,247,0) 60%); } /* 24.09.2026 (Jamie: nach „Speisekarte ansehen" am iPhone leere Flaeche): Safari malt die ~4700 px hohe Karte mit SVG-Rauschfilter (feTurbulence) plus Glas-Leiste (backdrop-filter) nach einem Sprung verzoegert oder gar nicht. Rauschen hier aus, Leiste ohne Weichzeichner — optisch kaum Unterschied. */ html .l7-karte::before { display: none; } /* overflow:hidden machte die Sektion zum Scroll-Container, die klebende Chips-Leiste klebte deshalb nie; clip schneidet gleich, laesst sticky aber zu */ html .l7-karte { overflow: clip; } html .l7-karte__sub { color: var(--l7-text-2); } html .l7-karte__gericht { border-bottom-color: var(--l7-linie); } /* Chips: Huelle sticky im Flaechenton, weiches Ausblenden rechts + Pfeil statt hartem Abschneiden */ html .l7-karte__chipsbox { position: sticky; top: var(--bar-kopf, 90px); z-index: 20; margin: 0 -24px 40px; background: rgba(25,26,29,0.985); border-bottom: 1px solid var(--l7-linie-2); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } html .l7-section--default .l7-karte__chipsbox { background: rgba(18,19,22,0.94); } html .l7-karte__chipsbox .l7-karte__chips, html .l7-section--cream .l7-karte__chipsbox .l7-karte__chips, html .l7-section--default .l7-karte__chipsbox .l7-karte__chips { position: static; margin: 0; padding: 12px 72px 12px 24px; background: transparent; border-bottom: 0; } html .l7-karte__chipsbox::after { content: ""; position: absolute; top: 0; bottom: 1px; right: 0; width: 96px; pointer-events: none; background: linear-gradient(90deg, rgba(25,26,29,0) 0%, rgba(25,26,29,0.95) 55%, rgba(25,26,29,1) 100%); transition: opacity 0.25s ease; } html .l7-section--default .l7-karte__chipsbox::after { background: linear-gradient(90deg, rgba(18,19,22,0) 0%, rgba(18,19,22,0.95) 55%, rgba(18,19,22,1) 100%); } html .l7-karte__chipsbox::before { content: ""; position: absolute; top: 50%; right: 22px; width: 10px; height: 10px; border-right: 2px solid var(--l7-teal); border-bottom: 2px solid var(--l7-teal); transform: translateY(-50%) rotate(-45deg); z-index: 1; pointer-events: none; box-shadow: 2px 2px 8px rgba(4,255,247,0.5); transition: opacity 0.25s ease; } html .l7-karte__chipsbox.is-ende::after, html .l7-karte__chipsbox.is-ende::before { opacity: 0; } /* Geisterwort etwas sichtbarer (0,16), Rubrikbilder groesser (80 / 64 px) */ html .l7-karte__rubrik-geist { -webkit-text-stroke-color: rgba(255,255,255,0.16); } html .l7-karte__rubrik-bild { width: 80px; height: 80px; box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 3px var(--l7-graphit), 0 0 0 4px rgba(255,255,255,0.08); } html .l7-karte__rubrik-kopf { min-height: 84px; } @media (max-width: 899px) { html .l7-karte__chipsbox { margin-bottom: 28px; } html .l7-karte__chipsbox .l7-karte__chips { padding-right: 56px; } html .l7-karte__chipsbox::after { width: 72px; } html .l7-karte__chipsbox::before { right: 16px; } html .l7-karte__rubrik-bild { width: 64px; height: 64px; } html .l7-karte__rubrik-kopf { min-height: 70px; } } /* Gutschein-Seite (gutscheine.css): helle Anlass-Kacheln und Fragen-Liste */ html .l7-ak--hell { background: var(--l7-anthrazit) var(--l7-beton); color: var(--l7-white); box-shadow: inset 0 1px 0 var(--l7-linie); } html .l7-ak--hell .l7-ak__titel, html .l7-ak--hell .l7-ak__lead { color: inherit; } html .l7-ak--hell .l7-ak__lead { color: var(--l7-text-2); } html .l7-ak--hell .l7-ak__eyebrow { color: var(--l7-teal); } html .l7-fl { background: var(--l7-graphit) var(--l7-beton); color: var(--l7-white); box-shadow: inset 0 1px 0 var(--l7-linie); } html .l7-fl .l7-fl__eyebrow { color: var(--l7-teal); } html .l7-fl .l7-fl__lead { color: var(--l7-text-2); } html .l7-fl details, html .l7-fl .l7-fl__frage { border-color: var(--l7-linie-2); color: var(--l7-white); } html .l7-fl summary::after, html .l7-fl summary::before { color: var(--l7-teal); border-color: var(--l7-teal); } html .l7-fl p { color: var(--l7-text-2); } /* Info-Leiste (quick-info „leiste", Coming Soon): war weiß */ html .l7-quickinfo { background: var(--l7-anthrazit) var(--l7-beton); color: var(--l7-white); border-bottom-color: var(--l7-linie); border-top: 1px solid var(--l7-linie); } html .l7-quickinfo .l7-eyebrow { color: var(--l7-teal); } html .l7-quickinfo__cell a { color: var(--l7-white); border-bottom-color: var(--l7-teal); } /* Vorschau-Platzhalter / Hinweise bleiben lesbar */ html .l7-h2, html .l7-h2-display, html .l7-h3 { color: inherit; } html .l7-accent-dark { color: var(--l7-white); } /* Türkis-Flächen: Knöpfe darauf sind schwarz (secondary), bleiben so; Texte schwarz. */ /* ---------- 2. Neon ---------- */ html .l7-btn--primary { box-shadow: var(--l7-neon); text-shadow: none; position: relative; } html .l7-btn--primary:hover, html .l7-btn--primary:focus-visible { box-shadow: var(--l7-neon-hover); animation: l7-neon-atmen 2.4s ease-in-out 0.3s infinite alternate; } html .l7-btn--primary:active { animation: none; box-shadow: var(--l7-neon); transform: translateY(0); } html .l7-btn--primary:focus-visible { outline: 2px solid var(--l7-white); outline-offset: 3px; } html .l7-btn--magenta { box-shadow: var(--l7-neon-magenta); } html .l7-btn--outline { border-color: rgba(255,255,255,0.7); } html .l7-btn--outline:hover { border-color: var(--l7-white); } @keyframes l7-neon-atmen { from { box-shadow: var(--l7-neon); } to { box-shadow: var(--l7-neon-hover); } } /* Akzentwörter überall wie „STRIKE." im Kopfbereich */ html .l7-accent, html .l7-welten__titel .l7-accent, html .l7-wege__titel .l7-accent, html .l7-gb__titel .l7-accent { color: var(--l7-teal); text-shadow: var(--l7-neon-text); } html .l7-section--teal .l7-accent { text-shadow: none; } /* Auf Türkis-Flächen wäre ein türkiser Knopf unsichtbar (Kontakt-Formular): dort schwarz mit türkiser Schrift, ohne Schein. */ html .l7-section--teal .l7-btn--primary, html .l7-marquee--teal .l7-btn--primary { background: var(--l7-black); color: var(--l7-teal); box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.25); animation: none; } html .l7-section--teal .l7-btn--primary:hover { background: var(--l7-charcoal); color: var(--l7-teal); box-shadow: 0 10px 28px rgba(0,0,0,0.35); animation: none; } /* Kopf-Knopf in der Kopfzeile */ html .l7-header .l7-btn--primary { box-shadow: 0 0 0 1px rgba(4,255,247,0.5), 0 0 12px rgba(4,255,247,0.45), 0 0 30px rgba(4,255,247,0.22); } /* Türkise Fußzeilen-Kante leuchtet leise */ html .l7-footer { box-shadow: 0 -1px 18px rgba(4,255,247,0.18); } /* ---------- 3. Kopfbereich: Überschrift max. 2 Zeilen, Bühne lesbar ---------- */ html .l7-hero__inner { max-width: 980px; } html .l7-hero__headline { font-size: clamp(34px, 6.2vw, 92px); hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; } html .l7-hero__sub { max-width: 640px; text-shadow: 0 2px 18px rgba(0,0,0,0.6); } @media (max-width: 899px) { html .l7-hero__headline { font-size: clamp(38px, 11vw, 64px); } } /* Bühne (Startseite A, Coming Soon): dunkler Verlauf zur Textseite, damit der Text nie über hellen Pins steht — wie beim Kopfbild in main.css, dort war er nur für .l7-hero__image gesetzt. */ html .l7-buehne::after { background: linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.6) 42%, rgba(10,10,10,0.25) 68%, rgba(10,10,10,0.05) 100%), linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0) 28%, rgba(10,10,10,0.15) 62%, rgba(10,10,10,0.92) 100%); } @media (max-width: 899px) { html .l7-buehne::after { background: linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.94) 100%); } } /* ---------- 4. Countdown: Ziffern statt Kästen ---------- */ html .l7-countdown { max-width: 720px; gap: 0; margin-top: 40px; } html .l7-countdown__cell, html .l7-section--default .l7-countdown__cell, html .l7-section--cream .l7-countdown__cell, html .l7-section--teal .l7-countdown__cell { background: transparent; border-top: 0; padding: 8px 12px 10px; position: relative; } html .l7-countdown__cell + .l7-countdown__cell::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: linear-gradient(180deg, transparent, rgba(4,255,247,0.55), transparent); } html .l7-countdown__num, html .l7-section--default .l7-countdown__num, html .l7-section--cream .l7-countdown__num { font-size: clamp(48px, 7.4vw, 104px); font-weight: 900; letter-spacing: -0.045em; line-height: 0.95; color: var(--l7-white); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(4,255,247,0.25), 0 0 60px rgba(4,255,247,0.12); } html .l7-countdown__lbl, html .l7-section--default .l7-countdown__lbl, html .l7-section--cream .l7-countdown__lbl { color: var(--l7-teal); font-size: 10px; letter-spacing: 0.28em; margin-top: 12px; } html .l7-countdown--done { box-shadow: var(--l7-neon); } @media (max-width: 480px) { html .l7-countdown { grid-template-columns: repeat(4, 1fr); gap: 0; } html .l7-countdown__num { font-size: clamp(30px, 9.4vw, 44px); } html .l7-countdown__cell { padding: 6px 4px 8px; } html .l7-countdown__lbl { font-size: 8px; letter-spacing: 0.18em; } } /* ---------- 5. Key-Facts (quick-info „fakten"): drei gleich breite Zellen ---------- */ html .l7-fakten__grid { grid-template-columns: repeat(var(--l7-fakten-n, 3), minmax(0, 1fr)); } html .l7-fakten { background: var(--l7-anthrazit) var(--l7-beton); } @media (max-width: 640px) { html .l7-fakten__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html .l7-fakten__zelle:first-child { grid-column: 1 / -1; border-left: 0; padding-right: 0; } html .l7-fakten__zelle:nth-child(2) { border-left: 0; padding-left: 0; border-top: 1px solid var(--l7-linie); } html .l7-fakten__zelle:nth-child(3) { border-top: 1px solid var(--l7-linie); padding-left: 16px; padding-right: 0; border-left: 1px solid var(--l7-linie); } } /* ---------- 6. Kapitel-Fläche (pattern-tile, darstellung „kapitel") ---------- */ html .l7-kapitel { position: relative; overflow: hidden; isolation: isolate; padding: clamp(96px, 14vw, 200px) 0; background: var(--l7-black); color: var(--l7-white); } html .l7-kapitel__bild { position: absolute; inset: -6% 0; z-index: 0; background-size: cover; background-position: center; opacity: 0.42; filter: saturate(0.85) contrast(1.05); will-change: transform; transform: translate3d(0, var(--l7-py, 0px), 0); } html .l7-kapitel__schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10,10,10,0.15), rgba(10,10,10,0.78) 75%), linear-gradient(180deg, var(--l7-black) 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 82%, var(--l7-black) 100%); } html .l7-kapitel__muster { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0.08; display: flex; flex-direction: column; justify-content: center; } html .l7-kapitel__reihe { display: block; font-weight: 900; font-size: clamp(64px, 10vw, 140px); line-height: 1; letter-spacing: -0.04em; color: var(--l7-teal); white-space: nowrap; transform: translate3d(calc(var(--l7-px, 0px) * var(--r, 1)), 0, 0) scaleY(1.25); will-change: transform; padding-left: var(--l7-ein, 0); } html .l7-kapitel__inhalt { position: relative; z-index: 3; text-align: center; } html .l7-kapitel__titel { margin: 0; font-size: clamp(38px, 7.6vw, 112px); line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.35em; row-gap: 0.08em; } html .l7-kapitel__wort { display: inline-block; color: rgba(255,255,255,0.14); -webkit-text-stroke: 1px rgba(255,255,255,0.28); transition: none; } html .l7-kapitel.is-in .l7-kapitel__wort { animation: l7-kapitel-wort 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 0.55s) 1 both; } html .l7-kapitel.is-in .l7-kapitel__wort--letzt { animation-name: l7-kapitel-wort-letzt; } html .no-js .l7-kapitel__wort, html .l7-kapitel.is-fertig .l7-kapitel__wort { color: var(--l7-white); -webkit-text-stroke: 0; text-shadow: 0 0 24px rgba(4,255,247,0.18); } html .no-js .l7-kapitel__wort--letzt, html .l7-kapitel.is-fertig .l7-kapitel__wort--letzt { color: var(--l7-teal); text-shadow: var(--l7-neon-text); } @keyframes l7-kapitel-wort { 0% { color: rgba(255,255,255,0.14); -webkit-text-stroke: 1px rgba(255,255,255,0.28); text-shadow: none; } 38% { color: var(--l7-teal); -webkit-text-stroke: 0; text-shadow: 0 0 22px rgba(4,255,247,0.85), 0 0 64px rgba(4,255,247,0.45); } 100% { color: var(--l7-white); -webkit-text-stroke: 0; text-shadow: 0 0 24px rgba(4,255,247,0.18); } } @keyframes l7-kapitel-wort-letzt { 0% { color: rgba(255,255,255,0.14); -webkit-text-stroke: 1px rgba(255,255,255,0.28); text-shadow: none; } 45% { color: var(--l7-teal); -webkit-text-stroke: 0; text-shadow: 0 0 26px rgba(4,255,247,0.95), 0 0 80px rgba(4,255,247,0.5); } 100% { color: var(--l7-teal); -webkit-text-stroke: 0; text-shadow: var(--l7-neon-text); } } html .l7-kapitel__sub { margin: 22px auto 0; max-width: 34em; font-size: clamp(15px, 1.25vw, 18px); color: var(--l7-text-2); } @media (max-width: 899px) { html .l7-kapitel { padding: 88px 0; } html .l7-kapitel__titel { flex-direction: column; row-gap: 0.02em; font-size: clamp(34px, 10.5vw, 48px); } html .l7-kapitel__reihe { font-size: 72px; } html .l7-kapitel__bild { inset: 0; transform: none; } } /* ---------- 7. Nachbarn (cross-promo, darstellung „welten") ---------- */ html .l7-nachbarn { position: relative; padding: 96px 0 104px; background: var(--l7-black); color: var(--l7-white); overflow: hidden; isolation: isolate; } html .l7-nachbarn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); } html .l7-nachbarn__kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: 36px; } html .l7-nachbarn__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--l7-teal); } html .l7-nachbarn__titel { margin: 0; font-size: clamp(36px, 4.6vw, 68px); line-height: 0.95; letter-spacing: -0.035em; color: var(--l7-white); max-width: 14ch; } html .l7-nachbarn__sub { margin: 0 0 6px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--l7-text-2); max-width: 34em; } html .l7-nachbarn__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } html .l7-nachbar { --k: var(--l7-magenta); position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 4; min-height: 460px; padding: 32px 32px 34px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,0.1); background: #111; color: var(--l7-white); text-decoration: none; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; } html .l7-nachbar--ohne-link { cursor: default; } html a.l7-nachbar:hover { transform: translateY(-4px); } html .l7-nachbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 3; background: var(--k); box-shadow: 0 0 10px var(--k), 0 0 28px color-mix(in srgb, var(--k) 60%, transparent), 0 0 60px color-mix(in srgb, var(--k) 30%, transparent); } html .l7-nachbar__bild { position: absolute; inset: 0; z-index: 0; } html .l7-nachbar__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1); filter: saturate(0.9); } html a.l7-nachbar:hover .l7-nachbar__bild img { transform: scale(1.09); } html .l7-nachbar::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.05) 35%, rgba(10,10,10,0.2) 60%, rgba(10,10,10,0.94) 100%), radial-gradient(ellipse 60% 40% at 0% 100%, color-mix(in srgb, var(--k) 22%, transparent), transparent 70%); } html .l7-nachbar > :not(.l7-nachbar__bild) { position: relative; z-index: 2; } html .l7-nachbar__logo { align-self: start; height: 64px; display: flex; align-items: center; } html .l7-nachbar__logo img { max-height: 64px; max-width: 160px; width: auto; height: auto; display: block; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--k) 55%, transparent)); } html .l7-nachbar__name { align-self: end; margin: 0; font-size: clamp(30px, 3vw, 44px); line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; color: var(--l7-white); } html .l7-nachbar__zeile { align-self: start; margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--l7-text-2); max-width: 30em; } html .l7-nachbar__knopf { align-self: end; margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--l7-white); border: 2px solid var(--k); background: color-mix(in srgb, var(--k) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k) 40%, transparent), 0 0 16px color-mix(in srgb, var(--k) 45%, transparent), 0 0 40px color-mix(in srgb, var(--k) 20%, transparent); justify-self: start; transition: background 0.2s, box-shadow 0.3s; } html a.l7-nachbar:hover .l7-nachbar__knopf { background: var(--k); color: var(--l7-white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k) 70%, transparent), 0 0 22px color-mix(in srgb, var(--k) 75%, transparent), 0 0 60px color-mix(in srgb, var(--k) 35%, transparent); } html .l7-nachbar__knopf svg { width: 16px; height: 16px; } html .l7-nachbar__ort { align-self: end; margin: 22px 0 0; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--l7-text-3); } /* Eine Welt: volle Breite, Bild rechts frei, Inhalt links auf gemeinsamer Grundlinie */ html .l7-nachbarn__raster--1 { grid-template-columns: 1fr; } html .l7-nachbarn__raster--1 .l7-nachbar { grid-template-rows: none; grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "name" "zeile" "knopf"; min-height: 520px; padding: 40px 44px 44px; align-content: end; } html .l7-nachbarn__raster--1 .l7-nachbar__logo { grid-area: logo; align-self: start; margin-bottom: auto; padding-bottom: 16px; } html .l7-nachbarn__raster--1 .l7-nachbar__name { grid-area: name; font-size: clamp(38px, 4.6vw, 72px); max-width: 12ch; } html .l7-nachbar__name--wortmarke { line-height: 0; } html .l7-nachbar__wortmarke { display: block; width: clamp(200px, 26vw, 400px); height: auto; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--k) 55%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--k) 25%, transparent)); } html .l7-nachbarn__raster--1 .l7-nachbar__wortmarke { width: clamp(240px, 30vw, 460px); } @media (max-width: 899px) { html .l7-nachbar__wortmarke, html .l7-nachbarn__raster--1 .l7-nachbar__wortmarke { width: min(78%, 300px); } } html .l7-nachbarn__raster--1 .l7-nachbar__zeile { grid-area: zeile; font-size: clamp(16px, 1.3vw, 19px); max-width: 26em; } html .l7-nachbarn__raster--1 .l7-nachbar__knopf, html .l7-nachbarn__raster--1 .l7-nachbar__ort { grid-area: knopf; } html .l7-nachbarn__raster--1 .l7-nachbar::after { background: linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.7) 38%, rgba(10,10,10,0.2) 68%, rgba(10,10,10,0.05) 100%), linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0) 40%, rgba(10,10,10,0.55) 100%); } html .l7-nachbarn__raster--1 .l7-nachbar__bild img { object-position: 70% 50%; } /* Akzentwort der Ueberschrift in der Markenfarbe der Welt (Jamie 24.09.: „weiter." in Pink leuchten lassen) */ html .l7-nachbarn .l7-nachbarn__titel .l7-accent { color: var(--k, var(--l7-magenta)); text-shadow: 0 0 18px color-mix(in srgb, var(--k, var(--l7-magenta)) 60%, transparent), 0 0 48px color-mix(in srgb, var(--k, var(--l7-magenta)) 35%, transparent); } html .l7-nachbarn__eyebrow { color: var(--k, var(--l7-teal)); } @media (max-width: 899px) { html .l7-nachbarn__raster--1 .l7-nachbar { min-height: 440px; padding: 24px 22px 26px; } html .l7-nachbarn__raster--1 .l7-nachbar::after { background: linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.1) 35%, rgba(10,10,10,0.92) 100%); } html .l7-nachbarn__raster--1 .l7-nachbar__bild img { object-position: 50% 40%; } } @media (max-width: 899px) { html .l7-nachbarn { padding: 64px 0 72px; } html .l7-nachbarn__kopf { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; } html .l7-nachbarn__raster { grid-template-columns: 1fr; gap: 14px; } html .l7-nachbar { min-height: 380px; padding: 24px 22px 26px; grid-template-rows: auto 1fr auto auto; } } /* ---------- 8. Formular-Bühne (formular, darstellung „buehne") ---------- */ html .l7-formbuehne { position: relative; padding: 0; background: var(--l7-black); color: var(--l7-white); overflow: hidden; isolation: isolate; } html .l7-formbuehne__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 720px; } html .l7-formbuehne__seite { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px 48px 56px; isolation: isolate; } html .l7-formbuehne__bild { position: absolute; inset: 0; z-index: 0; } html .l7-formbuehne__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } html .l7-formbuehne__seite::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.05) 40%, rgba(10,10,10,0.92) 100%), linear-gradient(90deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.55) 100%); } html .l7-formbuehne__seite > :not(.l7-formbuehne__bild) { position: relative; z-index: 2; } html .l7-formbuehne__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--l7-teal); } html .l7-formbuehne__titel { margin: 0 0 16px; font-size: clamp(36px, 4.2vw, 64px); line-height: 0.95; letter-spacing: -0.035em; color: var(--l7-white); max-width: 12ch; text-shadow: 0 4px 30px rgba(0,0,0,0.6); } html .l7-formbuehne__sub { margin: 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--l7-text-2); max-width: 30em; } html .l7-formbuehne__punkte { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; } html .l7-formbuehne__punkte li { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--l7-white); } html .l7-formbuehne__punkte li::before { content: ""; width: 8px; height: 8px; background: var(--l7-teal); box-shadow: 0 0 10px var(--l7-teal); flex: none; } html .l7-formbuehne__form { padding: 64px 64px 72px; background: var(--l7-anthrazit) var(--l7-beton); border-left: 1px solid var(--l7-linie); } html .l7-formbuehne .l7-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; } html .l7-formbuehne .l7-form label { font-size: 11px; letter-spacing: 0.18em; color: var(--l7-text-3); gap: 8px; } html .l7-formbuehne .l7-form input, html .l7-formbuehne .l7-form textarea { background: rgba(255,255,255,0.045); color: var(--l7-white); border: 1px solid rgba(255,255,255,0.18); padding: 15px 16px; color-scheme: dark; font-size: 16px; } html .l7-formbuehne .l7-form input:hover, html .l7-formbuehne .l7-form textarea:hover { border-color: rgba(255,255,255,0.35); } html .l7-formbuehne .l7-form input:focus, html .l7-formbuehne .l7-form textarea:focus { outline: 0; border-color: var(--l7-teal); box-shadow: var(--l7-neon); } html .l7-formbuehne .l7-form input::placeholder, html .l7-formbuehne .l7-form textarea::placeholder { color: rgba(255,255,255,0.35); } html .l7-formbuehne .l7-form__full { grid-column: 1 / -1; } html .l7-formbuehne .l7-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); cursor: pointer; } /* Anlass als Chips: Wert geht ins selbe Textfeld (name="anlass") */ html .l7-anlass { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; } html .l7-anlass__titel { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--l7-text-3); } html .l7-anlass__chips { display: flex; flex-wrap: wrap; gap: 8px; } html .l7-anlass__chip { appearance: none; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; padding: 12px 16px; min-height: 44px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); color: var(--l7-white); cursor: pointer; border-radius: 0; transition: border-color 0.2s, background 0.2s, box-shadow 0.3s, color 0.2s; } html .l7-anlass__chip:hover { border-color: rgba(4,255,247,0.6); } html .l7-anlass__chip.is-on { background: var(--l7-teal); color: var(--l7-black); border-color: var(--l7-teal); box-shadow: var(--l7-neon); } html .l7-anlass__chip:focus-visible { outline: 2px solid var(--l7-teal); outline-offset: 2px; } html .l7-anlass__frei { margin: 0; } html .l7-anlass__frei[hidden] { display: none; } html .no-js .l7-anlass__chips { display: none; } html .no-js .l7-anlass__frei { display: flex !important; } /* Personen als Stepper */ html .l7-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.045); } html .l7-stepper:focus-within { border-color: var(--l7-teal); box-shadow: var(--l7-neon); } html .l7-formbuehne .l7-form .l7-stepper input { border: 0; background: transparent; text-align: center; font-weight: 800; padding: 15px 4px; -moz-appearance: textfield; appearance: textfield; } html .l7-formbuehne .l7-form .l7-stepper input:focus { box-shadow: none; } html .l7-stepper input::-webkit-outer-spin-button, html .l7-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } html .l7-stepper__knopf { appearance: none; border: 0; background: transparent; color: var(--l7-teal); font: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; min-height: 48px; border-radius: 0; } html .l7-stepper__knopf:hover { background: rgba(4,255,247,0.1); } html .l7-stepper__knopf:focus-visible { outline: 2px solid var(--l7-teal); outline-offset: -2px; } html .no-js .l7-stepper__knopf { display: none; } html .no-js .l7-stepper { grid-template-columns: 1fr; } html .l7-formbuehne .l7-form__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; } html .l7-formbuehne .l7-form__fuss .l7-btn { padding: 18px 32px; font-size: 15px; } html .l7-formbuehne .l7-form__zusage { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--l7-text-2); } html .l7-formbuehne .l7-form__zusage::before { content: ""; width: 8px; height: 8px; background: var(--l7-teal); box-shadow: 0 0 10px var(--l7-teal); } html .l7-formbuehne .l7-form__status { grid-column: 1 / -1; margin: 0; } html .l7-formbuehne .l7-form button[type="submit"] { align-self: auto; } @media (max-width: 1023px) { html .l7-formbuehne__raster { grid-template-columns: 1fr; min-height: 0; } html .l7-formbuehne__seite { min-height: 420px; padding: 40px 24px 40px; } html .l7-formbuehne__form { padding: 40px 24px 56px; border-left: 0; border-top: 1px solid var(--l7-linie); } } @media (max-width: 599px) { html .l7-formbuehne .l7-form { grid-template-columns: 1fr; gap: 18px; } html .l7-formbuehne .l7-form__fuss .l7-btn { width: 100%; justify-content: center; } } /* ---------- 9. Abschluss „Zwei Wege": beide Texte auf gemeinsamen Linien ---------- */ html .l7-wege__raster { grid-template-rows: minmax(0, 1fr) auto auto auto auto; } html .l7-wege__weg { display: grid; grid-template-rows: subgrid; grid-row: span 5; justify-content: stretch; padding: 40px; } html .l7-wege__weg--bild::before { content: ""; grid-row: 1; min-height: 300px; } html .l7-wege__buehne { grid-row: 1; } html .l7-wege__text { display: contents; } /* Bild und Verlauf UNTER den statischen Text (z-index -1 im isolierten Stapel der Kachel), damit der Knopf statisch bleiben kann: sein ::after spannt dann ueber die ganze Kachel (Stretched Link). */ html .l7-wege__medien, html .l7-wege__weg--bild::after { z-index: -1; } html .l7-wege__weg--klick { cursor: pointer; } html .l7-wege__weg--klick .l7-btn { position: static; } html .l7-wege__weg--klick .l7-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; } html .l7-wege__weg--klick:hover .l7-wege__medien img { transform: scale(1.03); filter: brightness(1.08); } html .l7-wege__weg--klick:hover .l7-btn--primary { box-shadow: var(--l7-neon-hover); animation: l7-neon-atmen 2.4s ease-in-out 0.3s infinite alternate; } html .l7-wege__weg--klick:has(.l7-btn:focus-visible) { outline: 2px solid var(--l7-teal); outline-offset: 3px; } html .l7-wege__weg--klick .l7-btn:focus-visible { outline: 0; } /* Allgemeine Regel: Kachel mit genau EINEM Ziel ist ganz klickbar (Anlass-Kacheln, Hits der Karte) */ html .l7-klick { position: relative; cursor: pointer; } html .l7-klick__flaeche { position: absolute; inset: 0; z-index: 5; display: block; text-indent: -9999px; overflow: hidden; } html .l7-klick:hover img { transform: scale(1.03); filter: brightness(1.08); } html .l7-klick:has(.l7-klick__flaeche:focus-visible) { outline: 2px solid var(--l7-teal); outline-offset: 3px; } html .l7-klick .l7-klick__flaeche:focus-visible { outline: 0; } html .l7-ak__kachel.l7-klick img { transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; } html .l7-wege__nr { grid-row: 2; align-self: end; margin: 0 0 12px; } html .l7-wege__wtitel { grid-row: 3; align-self: end; margin: 0 0 12px; } html .l7-wege__wtext { grid-row: 4; align-self: start; margin: 0 0 24px; } html .l7-wege__weg .l7-btn { grid-row: 5; align-self: end; justify-self: start; } @media (max-width: 899px) { html .l7-wege__raster { grid-template-rows: none; } html .l7-wege__weg { display: flex; flex-direction: column; justify-content: flex-end; } html .l7-wege__weg--bild::before { display: none; } html .l7-wege__weg--klick .l7-btn::after { inset: 0; } html .l7-wege__nr, html .l7-wege__wtitel, html .l7-wege__wtext, html .l7-wege__weg .l7-btn { align-self: auto; } html .l7-wege__weg .l7-btn { width: 100%; justify-content: center; padding-left: 14px; padding-right: 14px; } html .l7-wege__weg .l7-btn > span { white-space: nowrap; } } /* ---------- Weniger Bewegung: Endzustand ohne Animation ---------- */ @media (prefers-reduced-motion: reduce) { html .l7-btn--primary:hover { animation: none; } html .l7-kapitel.is-in .l7-kapitel__wort { animation: none; color: var(--l7-white); -webkit-text-stroke: 0; text-shadow: 0 0 24px rgba(4,255,247,0.18); } html .l7-kapitel.is-in .l7-kapitel__wort--letzt { color: var(--l7-teal); text-shadow: var(--l7-neon-text); } html .l7-kapitel__bild, html .l7-kapitel__reihe { transform: none !important; } html .l7-nachbar, html .l7-nachbar__bild img, html .l7-nachbar__knopf { transition: none !important; transform: none !important; } } /* 24.09.2026: Einleitung in dunklen Sektionen war dunkelgrau auf Schwarz (Kontaktformular). */ html .l7-section--dark .l7-lead { color: rgba(255,255,255,0.72); }