/* ==========================================================================
   LEVEL 7 — Main Stylesheet
   Brand: Bowling and more. Ulm Donautal Boschstraße 40.
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
    --l7-teal:        #04FFF7;  /* Neon-Türkis — offizielle Brand-Farbe */
    --l7-teal-bright: #4DFFFA;  /* Hover-State */
    --l7-teal-dark:   #00B8B2;  /* Für Text auf hellen Hintergründen + Links */
    --l7-magenta:     #FF1493;
    --l7-magenta-dark:#C00E70;
    --l7-black:       #0A0A0A;
    --l7-charcoal:    #1C1C1C;
    --l7-gray:        #888888;
    --l7-gray-light:  #E5E5E5;
    --l7-cream:       #F0E6D0;
    --l7-cream-soft:  #FAF7EF;
    --l7-white:       #FFFFFF;

    --l7-container:   1200px;
    --l7-radius:      0;  /* Brand: scharfe Kanten, kein border-radius */
    --l7-font:        'Montserrat', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    --l7-shadow-hover: 0 8px 24px rgba(0,0,0,0.08);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--l7-font); color: var(--l7-black); background: var(--l7-cream-soft); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; }

img, svg, video { max-width: 100%; height: auto; display: block; }
img.alignleft, img.alignright { display: inline; }
a { color: var(--l7-teal-dark); }
a:hover { color: var(--l7-black); }

h1, h2, h3, h4, h5, h6 { font-family: var(--l7-font); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.5em; text-transform: uppercase; }
h1 { font-size: clamp(36px, 6vw, 64px); }
h2 { font-size: clamp(28px, 4.5vw, 48px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); }
p { margin: 0 0 1em; }

/* ---------- Utility ---------- */
.l7-container { max-width: var(--l7-container); margin: 0 auto; padding: 0 24px; }
.l7-skip { position: absolute; left: -9999px; top: 0; background: var(--l7-teal); color: var(--l7-black); padding: 12px 20px; font-weight: 800; z-index: 9999; }
.l7-skip:focus { left: 0; }
.l7-eyebrow { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--l7-gray); font-weight: 700; margin-bottom: 12px; }
.l7-eyebrow--teal { color: var(--l7-teal); }
.l7-eyebrow--dark { color: var(--l7-black); }
.l7-eyebrow--magenta { color: var(--l7-magenta); }
.l7-accent { color: var(--l7-teal); }
.l7-accent-dark { color: var(--l7-black); }
.l7-h2 { font-size: clamp(32px, 5vw, 56px); }
.l7-h2--light { color: var(--l7-white); }
.l7-h2-display { font-size: clamp(48px, 8vw, 96px); line-height: 0.95; }
.l7-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 720px; color: #333; }
.l7-lead--light { color: rgba(255,255,255,0.85); }
.l7-link { font-weight: 700; text-decoration: none; color: var(--l7-teal-dark); letter-spacing: -0.01em; }
.l7-link-light { color: var(--l7-teal); }
.l7-note { font-size: 14px; color: var(--l7-gray); margin-top: 16px; }

/* ---------- Banner ---------- */
.l7-banner { background: var(--l7-teal); color: var(--l7-black); padding: 8px 0; text-align: center; font-weight: 800; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.l7-banner a { color: inherit; text-decoration: none; }

/* ---------- Header ---------- */
.l7-header { background: var(--l7-black); color: var(--l7-white); position: sticky; top: 0; z-index: 100; }
.l7-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; }
.l7-header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.l7-header__logo svg { height: 32px; width: auto; }
.l7-header__logo-text { font-weight: 900; font-size: 16px; letter-spacing: 0.1em; }
/* ECHTER SCHRIFTZUG NEBEN DEM SIGNET (15.09.2026, Runde 2, Jamie): Signet bleibt 32 px wie
   bisher, rechts daneben die Wortmarke aus logo-weiss.svg (logo.njk, schriftzug) statt des
   gesetzten Textes. 16 px hoch = die Hoehe der Grossbuchstaben-Zeile, die vorher dort stand
   (16-px-Montserrat). Die Kopfzeile bleibt dadurch 90 / 74 px wie vor dem Umbau. */
.l7-header__logo .l7-schriftzug { height: 16px; width: auto; }
.l7-header__nav { flex: 1; display: flex; justify-content: center; }
.l7-menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 32px; }
.l7-menu a { color: var(--l7-white); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color 0.15s; }
.l7-menu a:hover, .l7-menu .current-menu-item a { border-bottom-color: var(--l7-teal); }
.l7-header__cta { display: inline-flex; }
/* Tippflaeche mindestens 44 x 44 (14.09.2026, QA): Der Knopf war 40 x 42, das Logo 32 hoch.
   Die Flaeche waechst ueber ein absolut gesetztes ::before — NICHT ueber min-height: Das
   machte die Kopfzeile auf dem Telefon 4 px hoeher und verschob die abgenommene Coming-Soon-
   Seite um 4 px. So bleibt das Layout pixelgleich, nur die anklickbare Flaeche ist groesser. */
.l7-header__burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; position: relative; }
.l7-header__burger::before { content: ''; position: absolute; left: -2px; right: -2px; top: -1px; bottom: -1px; }
.l7-header__logo { position: relative; }
.l7-header__logo::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.l7-header__burger span { display: block; width: 24px; height: 2px; background: var(--l7-white); margin: 5px 0; transition: 0.2s; }

/* Mobile menu */
.l7-mobile-menu { display: none; position: fixed; inset: 0; background: var(--l7-black); z-index: 99; padding: 80px 0 32px; overflow-y: auto; }
.l7-mobile-menu.is-open { display: block; }
.l7-mobile-menu__list { list-style: none; padding: 0; margin: 0 0 32px; }
.l7-mobile-menu__list li a { display: block; padding: 16px 0; color: var(--l7-white); text-decoration: none; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #222; }
.l7-mobile-menu__cta { display: inline-flex; }

/* ---------- Buttons ---------- */
.l7-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, background 0.15s, color 0.15s; text-decoration: none; font-family: inherit; }
.l7-btn:hover { transform: translateY(-2px); }
.l7-btn__arrow { width: 16px; height: 16px; }
.l7-btn--primary { background: var(--l7-teal); color: var(--l7-black); }
.l7-btn--primary:hover { background: var(--l7-teal-bright); color: var(--l7-black); }
.l7-btn--secondary { background: var(--l7-black); color: var(--l7-white); }
.l7-btn--secondary:hover { background: var(--l7-charcoal); color: var(--l7-teal); }
.l7-btn--outline { background: transparent; color: var(--l7-white); border-color: var(--l7-white); }
.l7-btn--outline:hover { background: var(--l7-white); color: var(--l7-black); }
.l7-btn--outline-dark { background: transparent; color: var(--l7-black); border-color: var(--l7-black); }
.l7-btn--outline-dark:hover { background: var(--l7-black); color: var(--l7-white); }
.l7-btn--magenta { background: var(--l7-magenta); color: var(--l7-white); }
.l7-btn--magenta:hover { background: var(--l7-magenta-dark); color: var(--l7-white); }

/* ---------- Section Helper ---------- */
.l7-section { padding: 80px 0; position: relative; }
.l7-section--default { background: var(--l7-white); }
.l7-section--dark { background: var(--l7-black); color: var(--l7-white); }
.l7-section--dark a:not(.l7-btn) { color: var(--l7-teal); }
.l7-section--teal { background: var(--l7-teal); color: var(--l7-black); }
.l7-section--cream { background: var(--l7-cream); }
.l7-section--magenta { background: var(--l7-magenta); color: var(--l7-white); }
.l7-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.l7-hero { background: var(--l7-black); color: var(--l7-white); position: relative; padding: 80px 0 96px; overflow: hidden; }
.l7-hero--home { padding: 120px 0 96px; }
.l7-hero--compact { padding: 64px 0 64px; }
.l7-hero--page { padding: 96px 0 64px; }
.l7-hero__inner { position: relative; z-index: 2; max-width: 880px; }
/* Hero-Pattern (v2.4.3): nahtlos animierter Türkis-Streifen-Hintergrund.
   Trick: Streifen liegen in einem überdimensionierten Pseudo-Element, das
   um -10° gedreht und dann um genau 120 Pixel (= eine Pattern-Periode)
   entlang der rotierten Achse verschoben wird. Da 0px und -120px
   mathematisch dieselbe Bildposition ergeben, ist der Loop nahtlos —
   kein sichtbarer Sprung mehr.
   Zusätzlich pendelt ein weicher Radial-Glow-Layer subtil. */
.l7-hero__pattern {
    position: absolute; inset: 0; z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.l7-hero__pattern::before {
    /* Streifen-Schicht — überdimensioniert damit die Rotation an den Ecken nichts abschneidet */
    content: '';
    position: absolute;
    top: -20%; left: -20%; width: 140%; height: 140%;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 60px,
        rgba(4, 255, 247, 0.09) 60px 64px,
        transparent 64px 120px
    );
    transform-origin: center;
    animation: l7-hero-stripes 24s linear infinite;
    will-change: transform;
}
.l7-hero__pattern::after {
    /* Radial-Glow-Schicht — subtiles Pendeln, keine Periodizität nötig */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 0% 50%, rgba(4, 255, 247, 0.12), transparent 65%),
        radial-gradient(ellipse 50% 50% at 100% 80%, rgba(4, 255, 247, 0.09), transparent 65%);
    animation: l7-hero-glow 18s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes l7-hero-stripes {
    /* +10deg statt -10deg: Streifen kippen jetzt nach rechts oben — same Richtung
       wie die Italic-Schrift der Marquee + die Logo-Außenlinien.
       translateX(+120px) statt -120px hält den Loop nahtlos und schiebt das
       Pattern in dieselbe Richtung wie die Schriftneigung. */
    from { transform: rotate(10deg) translateX(0); }
    to   { transform: rotate(10deg) translateX(120px); }
}
@keyframes l7-hero-glow {
    from { transform: translate(0, 0); }
    to   { transform: translate(40px, -20px); }
}
@media (prefers-reduced-motion: reduce) {
    .l7-hero__pattern::before,
    .l7-hero__pattern::after { animation: none; }
}
/* HINTERGRUNDBILD IN VOLLER DECKKRAFT (14.09.2026, Jamie: „als ob ein weisser Nebel davor
   waere"). Bis dahin lag das Bild mit opacity 0.4 auf Schwarz und darueber die tuerkisen
   Streifen und Glows des Musters (0.5) — zusammen ein flauer, milchiger Schleier. Jetzt:
   Bild voll, KEIN Muster mehr ueber dem Bild, und fuer die Lesbarkeit nur ein DUNKLER
   Verlauf zur Textseite hin (links, dazu leicht oben/unten). Auf dem Handy steht der Text
   ueber die ganze Breite, dort kommt der Verlauf von unten. Schaerfe ist ein Quellen-Thema:
   Die Motive sind 928 px breit und werden auf 1440 px 1,55-fach gestreckt (Retina 3,1-fach). */
.l7-hero__image { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 1; }
.l7-hero__image::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.74) 45%, rgba(10,10,10,0.42) 70%, rgba(10,10,10,0.1) 100%),
        linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 70%, rgba(10,10,10,0.4) 100%); }
.l7-hero--with-image .l7-hero__pattern { display: none; }
@media (max-width: 899px) {
    .l7-hero__image::after { background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.6) 45%, rgba(10,10,10,0.82) 100%); }
}
/* EINHEITLICHE KOPFHOEHE DER UNTERSEITEN (14.09.2026, Jamie: Bowling zu klein, Events passt).
   Die Hoehe hing bisher allein am Text — eine lange Ueberschrift machte den Kopf gross, eine
   kurze klein (Bowling 584 px, Events 766 px bei 1440). Richtwert ist Events: Mindesthoehe
   740 px, Inhalt senkrecht mittig. Nur die Unterseiten (--page); der Startseiten-Kopf (--home)
   liegt auf der Buehne und bleibt, wie er ist (Coming-Soon ist abgenommen). */
/* EIN KOPF FUER ALLE UNTERSEITEN (15.09.2026, Runde 2, Jamie: „die Hero-Header sollten alle
   gleich gross sein — sind sie nicht"). Gemessen lag es an ZWEI Varianten: --page hatte die
   Mindesthoehe (740/580), --compact (Kontakt, Danke, 404, Warteliste) keine — dort bestimmte
   die Textmenge die Hoehe (426–643 px bei 1440). Und Events riss mit der vierzeiligen
   Ueberschrift die 740 (766 px). Jetzt gilt EINE Regel fuer jeden Hero ausser --home
   (Coming Soon, Startseiten — die liegen auf der Buehne und bleiben): gleiche Hoehe, gleiche
   Innenabstaende, Inhalt senkrecht mittig. Die Variante im Builder aendert die Hoehe damit
   nicht mehr. Mindesthoehe 780 / 600 statt 740 / 580, damit auch der laengste Kopf (Events:
   Inhalt 606 px bei 1440, 452 px bei 390) hineinpasst — sonst waere er wieder der eine groessere.
   Waechst ein Text ueber die Hoehe hinaus, wird dieser Kopf hoeher statt abgeschnitten. */
.l7-hero:not(.l7-hero--home) { min-height: 780px; padding: 96px 0 64px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 899px) { .l7-hero:not(.l7-hero--home) { min-height: 600px; padding: 64px 0 64px; } }
.l7-hero__eyebrow { color: var(--l7-teal); }
.l7-hero__headline {
    font-size: clamp(32px, 9vw, 96px);
    line-height: 0.95;
    margin-bottom: 16px;
    color: var(--l7-white);
    /* Lange deutsche Komposita (Kindergeburtstag, Firmenfeier…) auf Mobile
       sauber umbrechen statt aus dem Container laufen. Browser nutzt die
       lang="de-DE"-Silbentrennung. overflow-wrap als Fallback. */
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
}
.l7-hero__sub { font-size: clamp(17px, 1.7vw, 22px); color: rgba(255,255,255,0.78); max-width: 640px; margin-bottom: 32px; }
.l7-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Quick-Info-Bar ---------- */
.l7-quickinfo { background: var(--l7-white); padding: 24px 0; border-bottom: 1px solid var(--l7-gray-light); }
.l7-quickinfo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.l7-quickinfo__val { font-weight: 700; font-size: 16px; }
.l7-quickinfo__cell a { color: var(--l7-black); text-decoration: none; border-bottom: 1px solid var(--l7-teal); }

/* ---------- BigCard (Karten-Grid) ---------- */
.l7-cards-grid { display: grid; gap: 12px; }
.l7-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.l7-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.l7-cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
.l7-bigcard { display: flex; flex-direction: column; padding: 48px 32px; min-height: 280px; text-decoration: none; transition: transform 0.2s; position: relative; overflow: hidden; }
.l7-bigcard:hover { transform: translateY(-4px); }
.l7-bigcard--teal { background: var(--l7-teal); color: var(--l7-black); }
.l7-bigcard--dark { background: var(--l7-black); color: var(--l7-white); }
.l7-bigcard--white { background: var(--l7-white); color: var(--l7-black); border: 1px solid var(--l7-gray-light); }
.l7-bigcard__title { font-weight: 900; font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 12px; }
.l7-bigcard__sub { font-size: 15px; opacity: 0.9; margin-bottom: auto; max-width: 240px; line-height: 1.4; }
.l7-bigcard__arrow { font-size: 36px; font-weight: 900; margin-top: 32px; }

/* ---------- Pattern Section ---------- */
.l7-pattern-section { padding: 120px 0; }
.l7-pattern-section__pattern { position: absolute; inset: 0; opacity: 0.07; pointer-events: none; overflow: hidden; }
.l7-pattern-word { display: flex; flex-direction: column; height: 100%; justify-content: center; }
.l7-pattern-word__row { display: block; font-weight: 900; font-size: 120px; line-height: 1; letter-spacing: -0.04em; color: var(--l7-teal); white-space: nowrap; transform: scaleY(1.3); }
.l7-pattern-word__row--alt { transform: scaleY(1.3) translateX(15%); }
.l7-pattern-section__content { position: relative; z-index: 2; text-align: center; }

/* ---------- Attraktionen Grid ---------- */
.l7-attraktionen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.l7-attraktion-card { background: var(--l7-black); color: var(--l7-white); padding: 32px 24px; text-align: center; }
.l7-attraktion-card__icon { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.l7-attraktion-card__icon img { max-width: 100%; max-height: 100%; }
.l7-attraktion-card__icon--placeholder svg { width: 48px; height: auto; opacity: 0.6; }
.l7-attraktion-card__title { font-size: 18px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.l7-attraktion-card__desc { font-size: 14px; opacity: 0.8; line-height: 1.5; margin: 0; }

/* ---------- Banner-Section (Gutschein-CTA) ---------- */
.l7-banner-section { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.l7-banner-section__text { flex: 1; min-width: 280px; }

/* ---------- News Grid ---------- */
.l7-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.l7-card { background: var(--l7-white); color: var(--l7-black); border: 1px solid var(--l7-gray-light); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.l7-card:hover { transform: translateY(-2px); box-shadow: var(--l7-shadow-hover); }
.l7-card__image { display: block; aspect-ratio: 16/10; overflow: hidden; }
.l7-card__image img { width: 100%; height: 100%; object-fit: cover; }
.l7-card__body { padding: 24px; }
.l7-card__date { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--l7-teal-dark); font-weight: 700; margin-bottom: 8px; }
.l7-card__title { font-size: 20px; margin-bottom: 12px; }
.l7-card__title a { color: var(--l7-black); text-decoration: none; }
.l7-card__excerpt { font-size: 14px; color: #555; margin-bottom: 16px; }

/* ---------- Accordion (FAQ) ---------- */
.l7-accordion { max-width: 880px; margin: 0 auto; }
.l7-accordion__item { background: var(--l7-white); color: var(--l7-black); border: 1px solid var(--l7-gray-light); margin-bottom: 8px; }
.l7-accordion__q { padding: 20px 24px; font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.l7-accordion__q::-webkit-details-marker { display: none; }
.l7-accordion__q::after { content: '+'; font-weight: 900; font-size: 24px; color: var(--l7-teal-dark); transition: transform 0.2s; }
.l7-accordion__item[open] .l7-accordion__q::after { transform: rotate(45deg); }
.l7-accordion__a { padding: 0 24px 24px; }
.l7-accordion__a p:last-child { margin-bottom: 0; }
.l7-accordion__footer { text-align: center; margin-top: 32px; }

/* ---------- Tarif Grid ---------- */
.l7-tarif-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.l7-tarif-card { background: var(--l7-white); color: var(--l7-black); padding: 32px 28px; border: 2px solid var(--l7-black); position: relative; }
.l7-tarif-card--featured { background: var(--l7-black); color: var(--l7-white); border-color: var(--l7-teal); }
.l7-tarif-card__badge { position: absolute; top: -12px; left: 24px; background: var(--l7-teal); color: var(--l7-black); padding: 4px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.l7-tarif-card__title { font-size: 22px; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.l7-tarif-card__time { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 16px; font-weight: 700; }
.l7-tarif-card__desc { font-size: 15px; margin-bottom: 24px; opacity: 0.85; }
.l7-tarif-card__preis { padding-top: 16px; border-top: 1px solid currentColor; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.l7-tarif-card__ab { font-size: 12px; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; }
.l7-tarif-list__heading { color: var(--l7-teal-dark); }
.l7-section--dark .l7-tarif-list__heading { color: var(--l7-teal); }
.l7-section--teal .l7-tarif-list__heading { color: var(--l7-black); }
.l7-tarif-card__num { font-size: 32px; font-weight: 900; letter-spacing: -0.02em; color: var(--l7-teal-dark); }
.l7-tarif-card--featured .l7-tarif-card__num { color: var(--l7-teal); }
.l7-section--dark .l7-tarif-card__num { color: var(--l7-teal-dark); }
.l7-section--teal .l7-tarif-card__num { color: var(--l7-black); }
.l7-tarif-card__einheit { font-size: 13px; opacity: 0.7; }
.l7-tarif-card__note { margin-top: 16px; font-size: 12px; opacity: 0.65; }

/* ---------- Pakete Grid (Events) ---------- */
.l7-pakete-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.l7-paket-card { background: var(--l7-white); color: var(--l7-black); border: 1px solid var(--l7-gray-light); overflow: hidden; display: flex; flex-direction: column; }
.l7-paket-card--featured { border-color: var(--l7-teal); border-width: 2px; }
.l7-paket-card__image { aspect-ratio: 16/10; overflow: hidden; }
.l7-paket-card__image img { width: 100%; height: 100%; object-fit: cover; }
.l7-paket-card__body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.l7-paket-card__badge { display: inline-block; background: var(--l7-teal); color: var(--l7-black); padding: 4px 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px; }
.l7-paket-card__title { font-size: 22px; text-transform: uppercase; margin-bottom: 12px; }
.l7-paket-card__meta { display: flex; gap: 16px; font-size: 13px; color: var(--l7-gray); margin-bottom: 16px; font-weight: 700; }
.l7-paket-card__desc { font-size: 15px; margin-bottom: 16px; color: #444; }
.l7-paket-card__leistungen { list-style: none; padding: 0; margin: 0 0 24px; font-size: 14px; }
.l7-paket-card__leistungen li { padding: 4px 0; }
.l7-paket-card__preis { padding-top: 16px; border-top: 1px solid var(--l7-gray-light); margin-top: auto; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.l7-paket-card__preis span { font-size: 13px; color: var(--l7-gray); }
.l7-paket-card__preis strong { font-size: 24px; font-weight: 900; color: var(--l7-black); letter-spacing: -0.02em; }

/* ---------- Steps ---------- */
.l7-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.l7-steps--4 { grid-template-columns: repeat(4, 1fr); }
.l7-steps__item { padding: 24px; }
.l7-steps__num { font-size: 56px; font-weight: 900; color: var(--l7-teal); line-height: 1; margin-bottom: 16px; letter-spacing: -0.05em; }
/* Steps-Nummern abhängig vom Section-Hintergrund: nicht überall türkis */
.l7-section--teal .l7-steps__num { color: var(--l7-black); }
.l7-section--cream .l7-steps__num { color: var(--l7-teal-dark); }
.l7-section--default .l7-steps__num { color: var(--l7-teal-dark); }
.l7-steps__item h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 8px; }
.l7-steps__item p { font-size: 14px; opacity: 0.85; line-height: 1.5; margin: 0; }

/* ---------- USPs (Gutschein-Seite) ---------- */
.l7-usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.l7-usp { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: rgba(0,0,0,0.05); font-weight: 700; }
.l7-usp__check { width: 28px; height: 28px; background: var(--l7-black); color: var(--l7-teal); display: flex; align-items: center; justify-content: center; font-weight: 900; }

/* ---------- Shop Placeholder (Gutscheine) ---------- */
.l7-shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.l7-shop-card { background: var(--l7-cream); padding: 32px 24px; text-align: center; border: 2px solid var(--l7-black); }
.l7-shop-card--free { background: var(--l7-teal); }
.l7-shop-card__amount { font-size: 36px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 8px; }
.l7-shop-card__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; opacity: 0.8; }
.l7-shop-placeholder__note { text-align: center; margin-top: 24px; color: var(--l7-gray); font-size: 14px; }

/* ---------- Speisekarte (Bar) ---------- */
.l7-speisekarte__kategorie { margin-bottom: 64px; }
.l7-speisekarte__kategorie:last-child { margin-bottom: 0; }
.l7-speisekarte__kat-title { font-size: 28px; text-transform: uppercase; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 4px solid var(--l7-teal); }
.l7-speisekarte__items { display: grid; gap: 16px; }
.l7-speisekarte__item { padding: 16px 0; border-bottom: 1px solid var(--l7-gray-light); }
.l7-speisekarte__item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.l7-speisekarte__item-title { font-weight: 700; font-size: 17px; }
.l7-speisekarte__item-preis { font-weight: 900; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.l7-speisekarte__einheit { font-size: 12px; opacity: 0.6; font-weight: 600; margin-left: 6px; }
.l7-speisekarte__item-desc { font-size: 14px; color: #555; margin-top: 6px; }
.l7-speisekarte__allergene { font-size: 11px; color: var(--l7-gray); margin-top: 6px; font-style: italic; }
.l7-tag { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 4px; }
.l7-tag--vegan { background: var(--l7-teal); color: var(--l7-black); }
.l7-tag--veggie { background: var(--l7-cream); color: var(--l7-black); }

/* ---------- Kontakt ---------- */
.l7-kontakt-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; }
.l7-kontakt-card { padding: 32px; background: var(--l7-cream); color: var(--l7-black); }
.l7-kontakt-card address { font-style: normal; font-size: 17px; line-height: 1.7; margin-bottom: 24px; }
.l7-kontakt-card__contact a { display: block; color: var(--l7-black); text-decoration: none; padding: 4px 0; }
.l7-kontakt-card__contact a:hover { color: var(--l7-teal-dark); }
.l7-kontakt-map iframe { width: 100%; border: 2px solid var(--l7-black); }
.l7-hours-table { width: 100%; max-width: 540px; border-collapse: collapse; font-size: 16px; }
.l7-hours-table td { padding: 12px 0; border-bottom: 1px solid var(--l7-gray-light); }
.l7-hours-table td:first-child { font-weight: 700; }
.l7-hours-table td:last-child { text-align: right; }
.l7-anfahrt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.l7-anfahrt-card { padding: 28px; background: var(--l7-cream); }
.l7-anfahrt-card h3 { font-size: 18px; margin-bottom: 12px; text-transform: uppercase; }

/* ---------- Forms ---------- */
.l7-form-wrap { max-width: 720px; }
.l7-form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.l7-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.l7-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.l7-form__full { grid-column: 1 / -1; }
.l7-form input[type=text], .l7-form input[type=email], .l7-form input[type=tel], .l7-form input[type=number], .l7-form input[type=date], .l7-form select, .l7-form textarea {
    padding: 14px 16px; background: var(--l7-white); border: 2px solid var(--l7-black); font-family: inherit; font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.l7-section--dark .l7-form input, .l7-section--dark .l7-form select, .l7-section--dark .l7-form textarea { background: var(--l7-charcoal); color: var(--l7-white); border-color: var(--l7-teal); }
.l7-form input:focus, .l7-form select:focus, .l7-form textarea:focus { outline: 3px solid var(--l7-teal); outline-offset: 2px; }
.l7-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Rueckmeldung des Formulars. Neu beim Umzug — im WordPress verliess der Absender die
   Seite, hier bleibt er stehen und braucht eine sichtbare Antwort. Die Farbe traegt die
   Aussage nicht allein: [data-art] steuert zusaetzlich das Zeichen davor, damit die
   Meldung auch bei Farbfehlsichtigkeit eindeutig bleibt. */
.l7-form__status { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.5; }
.l7-form__status::before { font-weight: 700; margin-right: .45rem; }
.l7-form__status[data-art="laeuft"]   { color: var(--l7-leise, #8A94A6); }
.l7-form__status[data-art="laeuft"]::before   { content: "…"; }
.l7-form__status[data-art="gut"]      { color: #04FFF7; }
.l7-form__status[data-art="gut"]::before      { content: "\2713"; }
.l7-form__status[data-art="schlecht"] { color: #FF6B8A; }
.l7-form__status[data-art="schlecht"]::before { content: "\26A0"; }
.l7-form__checkbox { flex-direction: row; align-items: flex-start; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.l7-form__checkbox input { margin-top: 4px; }
.l7-form button { align-self: flex-start; }

/* ---------- Final CTA ---------- */
.l7-final-cta__inner { text-align: center; padding: 32px 0; }
.l7-final-cta__inner p { font-size: clamp(17px, 1.7vw, 20px); margin-bottom: 24px; max-width: 540px; margin-left: auto; margin-right: auto; }

/* ---------- Crosspromo Duellbox ---------- */
/* Schwarz statt Magenta-Hintergrund — bessere Lesbarkeit. Magenta wird zur Akzentfarbe (Headline, Eyebrow). */
.l7-crosspromo { background: var(--l7-black); color: var(--l7-white); padding: 40px 0; position: relative; overflow: hidden; }
.l7-crosspromo::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    /* Durchgehend pink statt nach 40 % auslaufend (Jamie 14.09.2026, Vorlage: Stand der alten Seite). */
    background: var(--l7-magenta);
}
.l7-crosspromo__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.l7-crosspromo__logo { flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.l7-crosspromo__logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px rgba(255, 20, 147, 0.3)); }
.l7-crosspromo__text { flex: 1; min-width: 240px; }
.l7-crosspromo__headline {
    font-size: clamp(20px, 2.5vw, 28px);
    margin: 4px 0 0;
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--l7-magenta);
    font-weight: 800;
}
@media (max-width: 640px) {
    .l7-crosspromo { padding: 32px 0; }
    .l7-crosspromo__inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .l7-crosspromo__logo { width: 48px; height: 48px; }
}

/* ---------- Booking Container Placeholder ---------- */
.l7-booking-container { margin-top: 32px; min-height: 200px; background: var(--l7-charcoal); padding: 48px 24px; text-align: center; border: 2px dashed rgba(78,205,196,0.4); }
.l7-booking-placeholder { color: rgba(255,255,255,0.6); font-size: 15px; }
.l7-booking-placeholder .l7-eyebrow { margin-bottom: 8px; }

/* ---------- 404 ---------- */
.l7-404 { text-align: center; padding: 120px 0; }
.l7-404__inner { max-width: 720px; margin: 0 auto; }
.l7-404 .l7-hero__ctas { justify-content: center; }

/* ---------- Single ---------- */
.l7-single__image img { width: 100%; max-width: 1080px; margin: 0 auto; }
.l7-single { max-width: 800px; }
.l7-single h2, .l7-single h3 { text-transform: none; letter-spacing: -0.02em; font-size: 1.5em; margin-top: 1.5em; }

/* ---------- Special (Bar Happy Hour) ---------- */
.l7-special { text-align: center; padding: 32px 0; }

/* ---------- Page Head / Content ---------- */
.l7-page-head { padding: 64px 0 32px; }
.l7-content { max-width: 760px; }
.l7-content p { font-size: 17px; line-height: 1.7; }

/* ---------- Pagination ---------- */
.l7-pagination { margin-top: 48px; text-align: center; }
.l7-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 2px; font-weight: 700; text-decoration: none; color: var(--l7-black); border: 1px solid var(--l7-gray-light); }
.l7-pagination .current { background: var(--l7-black); color: var(--l7-white); border-color: var(--l7-black); }

/* ---------- Footer ---------- */
.l7-footer { background: var(--l7-black); color: rgba(255,255,255,0.7); padding: 64px 0 32px; border-top: 6px solid var(--l7-teal); }
.l7-footer h5 { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--l7-teal); margin-bottom: 16px; font-weight: 800; }
.l7-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.l7-footer__col--brand .l7-footer__logo { margin-bottom: 16px; }
.l7-footer__col--brand .l7-footer__logo svg { height: 40px; width: auto; }
.l7-footer__brand-name { color: var(--l7-white); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.05em; }
.l7-footer__tagline { color: var(--l7-teal); font-weight: 700; font-size: 14px; margin-bottom: 16px; }
.l7-footer__address { font-style: normal; font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.l7-footer__contact { display: block; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; padding: 2px 0; }
.l7-footer__contact:hover { color: var(--l7-teal); }
.l7-footer__hours { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.l7-footer__hours li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.l7-footer__list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.l7-footer__list li a { color: rgba(255,255,255,0.8); text-decoration: none; padding: 4px 0; display: block; }
.l7-footer__list li a:hover { color: var(--l7-teal); }
/* Social-Spalte: jetzt deutlich präsenter */
.l7-footer__social { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
.l7-footer__social-link {
    display: flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,0.85); text-decoration: none;
    padding: 11px 14px; /* 14.09.2026 QA: 42 -> 44 px Tippflaeche */
    background: rgba(255,255,255,0.05);
    border-left: 3px solid transparent;
    font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
    transition: background 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out, transform 0.18s ease-out;
}
.l7-footer__social-link svg { width: 22px; height: 22px; flex-shrink: 0; }
.l7-footer__social-link:hover {
    background: rgba(4, 255, 247, 0.08);
    border-left-color: var(--l7-teal);
    color: var(--l7-teal);
    transform: translateX(2px);
}
.l7-footer__social-label { font-size: 13px; letter-spacing: 0.04em; }

/* Footer-Bottom: zweispaltig, Copyright+Credit links, Rechtliches rechts */
.l7-footer__bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
    font-size: 12px; color: rgba(255,255,255,0.5);
}
.l7-footer__bottom-left { display: flex; flex-direction: column; gap: 4px; }
.l7-footer__copy { color: rgba(255,255,255,0.6); }
.l7-footer__credit a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.02em;
    transition: color 0.18s ease-out;
}
.l7-footer__credit a:hover { color: var(--l7-teal); }
.l7-footer__bottom-right { display: flex; }
.l7-footer__legal-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 24px; flex-wrap: wrap;
}
.l7-footer__legal-list li a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.18s ease-out;
}
.l7-footer__legal-list li a:hover { color: var(--l7-teal); }
.l7-footer__note { font-size: 12px; color: var(--l7-gray); margin-top: 12px; }

@media (max-width: 760px) {
    .l7-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
    .l7-footer__legal-list { gap: 16px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .l7-cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .l7-cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .l7-steps, .l7-steps--4 { grid-template-columns: repeat(2, 1fr); }
    .l7-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .l7-kontakt-grid { grid-template-columns: 1fr; }
    .l7-anfahrt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .l7-cards-grid--2,
    .l7-cards-grid--3,
    .l7-cards-grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .l7-header__nav, .l7-header__cta { display: none; }
    .l7-header__burger { display: block; }
    .l7-hero { padding: 64px 0 64px; }
    .l7-hero--home { padding: 80px 0 64px; }
    .l7-section { padding: 64px 0; }
    .l7-quickinfo__grid { grid-template-columns: 1fr; gap: 16px; }
    .l7-form__row { grid-template-columns: 1fr; }
    .l7-steps, .l7-steps--4 { grid-template-columns: 1fr; }
    .l7-footer__grid { grid-template-columns: 1fr; }
    .l7-news-grid, .l7-pakete-grid { grid-template-columns: 1fr; }
    h1 { font-size: 40px; }
}

/* ==========================================================================
   COUNTDOWN-SECTION (v2.4.0)
   ========================================================================== */
/* Textstufen (scroll-bowling.njk, 14.09.2026 QA): Bis dahin gab es fuer .l7-strike* keine
   einzige Regel — die Stufen klebten aneinander, und ein Countdown darin stand mit margin:auto
   zentriert neben linksbuendigem Text. Jetzt: Stufen mit Abstand, ein Countdown darin folgt
   dem Textfluss (links) statt der Mitte, der Knopf bekommt Luft. */
.l7-strike__beat + .l7-strike__beat { margin-top: 24px; }
.l7-strike__beat--countdown { margin-top: 40px; }
.l7-strike__beat--countdown .l7-countdown { margin-left: 0; }
.l7-strike__cd-cta { margin-top: 32px; }
.l7-countdown-section { text-align: center; }
.l7-countdown-section__inner { max-width: 720px; margin: 0 auto; }
.l7-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 560px; margin: 32px auto 0; }
.l7-countdown__cell { background: var(--l7-charcoal); border-top: 4px solid var(--l7-teal); padding: 24px 12px; text-align: center; }
.l7-section--default .l7-countdown__cell,
.l7-section--cream .l7-countdown__cell { background: var(--l7-white); border-top-color: var(--l7-teal-dark); }
.l7-section--teal .l7-countdown__cell { background: rgba(0,0,0,0.85); border-top-color: var(--l7-black); }
.l7-countdown__num {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--l7-teal);
}
.l7-section--default .l7-countdown__num,
.l7-section--cream .l7-countdown__num { color: var(--l7-teal-dark); }
.l7-section--teal .l7-countdown__num { color: var(--l7-teal); }
.l7-countdown__lbl { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 10px; font-weight: 700; }
.l7-section--default .l7-countdown__lbl,
.l7-section--cream .l7-countdown__lbl { color: rgba(0,0,0,0.55); }
.l7-section--teal .l7-countdown__lbl { color: rgba(255,255,255,0.7); }
.l7-countdown--done { grid-column: 1 / -1; background: var(--l7-teal); color: var(--l7-black); padding: 28px; font-weight: 900; font-size: clamp(20px, 2.5vw, 28px); text-transform: uppercase; letter-spacing: -0.01em; text-align: center; }

@media (max-width: 480px) {
    .l7-countdown { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ==========================================================================
   MARQUEE / LAUFSCHRIFT (v2.4.0)
   ========================================================================== */
.l7-marquee {
    overflow: hidden; white-space: nowrap; position: relative;
    padding: 18px 0;
    font-weight: 900; font-size: clamp(16px, 2vw, 22px);
    letter-spacing: 0.05em; text-transform: uppercase;
    will-change: transform;
}
.l7-marquee--teal { background: var(--l7-teal); color: var(--l7-black); }
.l7-marquee--dark { background: var(--l7-black); color: var(--l7-teal); }
.l7-marquee--magenta { background: var(--l7-magenta); color: var(--l7-black); }
/* Trenner (Jamie 14.09.2026): Folgt ein tuerkises Laufband direkt auf eine tuerkise Sektion,
   gingen beide ununterscheidbar ineinander ueber. Das Laufband bleibt tuerkis — nur ein weisser
   Streifen dazwischen, wie die pinke Linie darunter. */
.l7-section--teal + .l7-marquee--teal { border-top: 6px solid var(--l7-white); }
.l7-marquee__inner {
    display: inline-flex; align-items: center; gap: 28px;
    animation: l7-marquee-scroll var(--l7-marquee-speed, 30s) linear infinite;
}
.l7-marquee__word { display: inline-block; transform: skewX(-12deg); padding: 0 14px; }
.l7-marquee__bolt { display: inline-flex; align-items: center; height: 26px; flex-shrink: 0; }
.l7-marquee__bolt svg { height: 26px; width: auto; }
@keyframes l7-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .l7-marquee__inner { animation: none; }
}
@media (max-width: 640px) {
    .l7-marquee { padding: 14px 0; font-size: 14px; }
    .l7-marquee__inner { gap: 20px; }
    .l7-marquee__bolt { height: 20px; }
    .l7-marquee__bolt svg { height: 20px; }
}

/* ==========================================================================
   ANIMATION INITIAL-STATES (v2.1.0)
   Diese Klasse wird per Inline-Script im <head> gesetzt — und nur wenn
   prefers-reduced-motion NICHT aktiv ist. Damit gibt's keinen FOUC und
   gleichzeitig respektieren wir Accessibility-Settings.
   ========================================================================== */
.l7-anim-ready .l7-hero__eyebrow,
.l7-anim-ready .l7-hero__headline,
.l7-anim-ready .l7-hero__sub,
.l7-anim-ready .l7-hero__ctas .l7-btn {
    opacity: 0;
}

/* Buttons: präziser Cyan-Glow auf Hover (keine GSAP nötig — CSS reicht) */
.l7-btn { position: relative; transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.18s ease-out, background-color 0.18s ease-out, color 0.18s ease-out; }
.l7-btn:hover { transform: translateY(-2px); }
.l7-btn--primary:hover { box-shadow: 0 0 0 2px rgba(4, 255, 247, 0.4), 0 8px 24px rgba(4, 255, 247, 0.25); }
.l7-btn--outline:hover { box-shadow: 0 0 0 2px rgba(4, 255, 247, 0.5); }
.l7-btn__arrow { transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.2, 1); }
.l7-btn:hover .l7-btn__arrow { transform: translateX(3px); }

/* Reduced-Motion: alle Theme-Transitions abschalten */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Zwei Preisstufen (Tarife + Event-Pakete, v2.14.0) ---------- */
.l7-tarif-card__preise { margin-top: auto; padding-top: 14px; }
.l7-tarif-card__preis-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(136,136,136,0.25); }
.l7-tarif-card__preis-row:last-of-type { border-bottom: 0; }
.l7-tarif-card__preis-lbl { font-size: 13px; font-weight: 600; opacity: 0.75; }
.l7-tarif-card__preis-val { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--l7-teal-dark); white-space: nowrap; }
.l7-tarif-card--featured .l7-tarif-card__preis-val, .l7-paket-card--featured .l7-tarif-card__preis-val { color: var(--l7-teal); }
.l7-tarif-card__preise .l7-tarif-card__einheit { font-size: 12px; opacity: 0.65; margin-top: 8px; display: block; }
.l7-paket-card__addon { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--l7-teal-dark); }
.l7-paket-card--featured .l7-paket-card__addon { color: var(--l7-teal); }
.l7-paket-card__bedingungen { margin-top: 10px; font-size: 12px; line-height: 1.5; opacity: 0.7; }

/* ---------- Standorte-Sektion (Status-Karten, v2.14.0) ---------- */
.l7-standorte__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 32px; }
.l7-standort-card { background: var(--l7-black); border-top: 3px solid var(--l7-teal); padding: 24px; display: flex; flex-direction: column; }
.l7-section--cream .l7-standort-card, .l7-section--default .l7-standort-card { background: var(--l7-white); border: 1px solid var(--l7-gray-light); border-top: 3px solid var(--l7-teal); }
.l7-standort-card--geplant { border-top-color: var(--l7-gray); }
.l7-standort-card__status { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--l7-teal); margin-bottom: 12px; flex-wrap: wrap; }
.l7-standort-card--geplant .l7-standort-card__status { color: var(--l7-gray); }
.l7-standort-card__dot { width: 8px; height: 8px; background: currentColor; display: inline-block; }
.l7-standort-card__status-add { letter-spacing: 0.05em; opacity: 0.8; }
.l7-standort-card__name { margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; color: var(--l7-white); }
.l7-section--cream .l7-standort-card__name, .l7-section--default .l7-standort-card__name { color: var(--l7-black); }
.l7-standort-card__addr { font-size: 14px; color: rgba(255,255,255,0.7); }
.l7-standort-card__desc { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.7); margin: 10px 0 0; }
.l7-section--cream .l7-standort-card__addr, .l7-section--default .l7-standort-card__addr, .l7-section--cream .l7-standort-card__desc, .l7-section--default .l7-standort-card__desc { color: var(--l7-charcoal); }
.l7-standort-card__cta { margin-top: 18px; }

/* ---------- Event-Paket „Beliebt": schwarze Karte, weiße Schrift, Neon-Akzente (v2.14.4) ---------- */
.l7-paket-card--featured { background: var(--l7-black); color: var(--l7-white); }
.l7-paket-card--featured .l7-paket-card__title { color: var(--l7-white); }
.l7-paket-card--featured .l7-paket-card__desc { color: rgba(255,255,255,0.8); }
.l7-paket-card--featured .l7-paket-card__meta { color: rgba(255,255,255,0.65); }
.l7-paket-card--featured .l7-paket-card__leistungen { color: rgba(255,255,255,0.9); }
.l7-paket-card--featured .l7-paket-card__preis { border-top-color: rgba(255,255,255,0.2); }
.l7-paket-card--featured .l7-paket-card__preis strong { color: var(--l7-teal); }
.l7-paket-card--featured .l7-paket-card__preis span { color: rgba(255,255,255,0.65); }
.l7-paket-card--featured .l7-tarif-card__preis-row { border-bottom-color: rgba(255,255,255,0.2); }
.l7-paket-card--featured .l7-tarif-card__preis-lbl { color: rgba(255,255,255,0.85); }

/* ---------- Event-Paket-Karten: alle schwarz, „Beliebt" per Neon-Rahmen hervorgehoben (v2.14.5) ---------- */
.l7-paket-card { background: var(--l7-black); color: var(--l7-white); border: 1px solid #333; }
.l7-paket-card--featured { border: 2px solid var(--l7-teal); }
.l7-paket-card__title { color: var(--l7-white); }
.l7-paket-card__desc { color: rgba(255,255,255,0.8); }
.l7-paket-card__meta { color: rgba(255,255,255,0.65); }
.l7-paket-card__leistungen { color: rgba(255,255,255,0.9); }
.l7-paket-card__preis { border-top-color: rgba(255,255,255,0.2); }
.l7-paket-card__preis strong { color: var(--l7-teal); }
.l7-paket-card__preis span { color: rgba(255,255,255,0.65); }
.l7-paket-card .l7-tarif-card__preis-val { color: var(--l7-teal); }
.l7-paket-card .l7-tarif-card__preis-row { border-bottom-color: rgba(255,255,255,0.2); }
.l7-paket-card .l7-tarif-card__preis-lbl { color: rgba(255,255,255,0.85); }
.l7-paket-card__addon { color: var(--l7-teal); }
/* „Beliebt"-Karte zusätzlich etwas präsenter */
.l7-paket-card--featured .l7-paket-card__title { font-size: 26px; }

/* ---------- „Beliebt"-Paket deutlich hervorheben (v2.14.6) ---------- */
.l7-paket-card--featured { border: 1px solid #333; border-top: 6px solid var(--l7-teal); }
.l7-paket-card--featured .l7-paket-card__title { color: var(--l7-teal); font-size: 26px; }
.l7-paket-card--featured .l7-paket-card__body { padding: 32px 28px; }
.l7-paket-card__badge { background: var(--l7-teal); color: var(--l7-black); font-size: 11px; padding: 5px 12px; }

/* ---------- Paket-Bilder: optional, ohne Bild bleibt die Karte sauber ---------- */
.l7-paket-card__image { aspect-ratio: 16/10; overflow: hidden; border-bottom: 2px solid var(--l7-teal); background: var(--l7-charcoal); }
.l7-paket-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l7-paket-card--featured .l7-paket-card__image { border-bottom-color: var(--l7-teal); }

/* ---------- „Beliebt"-Badge über die Kartenkante setzen (v2.14.7) ---------- */
.l7-pakete-grid { padding-top: 16px; }
.l7-paket-card { position: relative; overflow: visible; }
.l7-paket-card__image { overflow: hidden; }
.l7-paket-card__badge {
  position: absolute;
  top: -14px;
  left: 24px;
  z-index: 3;
  margin: 0;
  width: auto;
  white-space: nowrap;
}

/* ---------- Badge sitzt jetzt als direktes Kind der Karte (v2.15.1) ---------- */
.l7-paket-card > .l7-paket-card__badge {
  position: absolute;
  top: 0;
  left: 24px;
  transform: translateY(-50%);
  z-index: 4;
  margin: 0;
  width: auto;
  display: inline-block;
  white-space: nowrap;
}

/* ---------- Speisekarte: Akkordeon, kompakter, optionale Bilder (v2.16.0) ---------- */
.l7-speisekarte__kategorie { margin-bottom: 12px; border-bottom: 1px solid var(--l7-gray-light); }
.l7-speisekarte__kategorie:last-child { margin-bottom: 0; }
.l7-speisekarte__kat-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  margin: 0; padding: 14px 0; border-bottom: 0;
  cursor: pointer; list-style: none; user-select: none;
}
.l7-speisekarte__kat-title::-webkit-details-marker { display: none; }
.l7-speisekarte__kat-title::after {
  content: ""; margin-left: auto; width: 9px; height: 9px;
  border-right: 2.5px solid var(--l7-teal-dark); border-bottom: 2.5px solid var(--l7-teal-dark);
  transform: rotate(45deg); transition: transform 0.18s; flex: none;
}
.l7-speisekarte__kategorie[open] > .l7-speisekarte__kat-title::after { transform: rotate(-135deg); }
.l7-speisekarte__kategorie[open] > .l7-speisekarte__kat-title { border-bottom: 3px solid var(--l7-teal); }
.l7-speisekarte__kat-count {
  font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none;
  background: var(--l7-gray-light); color: var(--l7-charcoal); padding: 2px 8px;
}
.l7-section--dark .l7-speisekarte__kat-count { background: var(--l7-charcoal); color: rgba(255,255,255,0.8); }
.l7-speisekarte__items { display: grid; gap: 0; padding: 6px 0 14px; }
.l7-speisekarte__item { padding: 9px 0; border-bottom: 1px solid rgba(136,136,136,0.18); }
.l7-speisekarte__item:last-child { border-bottom: 0; }
.l7-speisekarte__item-title { font-size: 16px; }
.l7-speisekarte__item-preis { font-size: 16px; }
.l7-speisekarte__item-desc { font-size: 13px; margin-top: 2px; line-height: 1.45; }
.l7-speisekarte__allergene { margin-top: 2px; }
/* Optionales Produktbild: nur sichtbar, wenn eins hinterlegt ist */
.l7-speisekarte__item--mit-bild { display: flex; gap: 14px; align-items: flex-start; }
.l7-speisekarte__item-bild { flex: none; width: 64px; height: 64px; overflow: hidden; background: var(--l7-gray-light); }
.l7-speisekarte__item-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l7-speisekarte__item-text { flex: 1; min-width: 0; }

/* ---------- Speisekarte: klar erkennbarer Aufklapp-Button (v2.16.1) ---------- */
.l7-speisekarte__kat-title { position: relative; padding-right: 52px; transition: color 0.15s; }
.l7-speisekarte__kat-title::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; background: var(--l7-teal); margin: 0; border: 0;
  transition: background 0.15s;
}
.l7-speisekarte__kat-title::before {
  content: ""; position: absolute; right: 12px; top: 50%; z-index: 1;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--l7-black); border-bottom: 2.5px solid var(--l7-black);
  transform: translateY(-75%) rotate(45deg); transition: transform 0.18s;
}
.l7-speisekarte__kategorie[open] > .l7-speisekarte__kat-title::before { transform: translateY(-25%) rotate(-135deg); }
.l7-speisekarte__kat-title:hover { color: var(--l7-teal-dark); }
.l7-speisekarte__kat-title:hover::after { background: var(--l7-teal-bright); }
.l7-speisekarte__kat-title:focus-visible { outline: 3px solid var(--l7-teal); outline-offset: 3px; }

/* ---------- Bild-Banner-Sektion (v2.17.0) ---------- */
.l7-bildbanner { position: relative; overflow: hidden; background: var(--l7-black); display: flex; align-items: center; }
.l7-bildbanner--small  { min-height: 260px; }
.l7-bildbanner--medium { min-height: 60vh; min-height: 60dvh; }
.l7-bildbanner--large  { min-height: 82vh; min-height: 82dvh; }
.l7-bildbanner__media { position: absolute; inset: 0; }
.l7-bildbanner__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l7-bildbanner--dim-light .l7-bildbanner__media::after,
.l7-bildbanner--dim-strong .l7-bildbanner__media::after { content: ""; position: absolute; inset: 0; }
.l7-bildbanner--dim-light .l7-bildbanner__media::after { background: rgba(10,10,10,0.35); }
.l7-bildbanner--dim-strong .l7-bildbanner__media::after { background: linear-gradient(90deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.25) 100%); }
.l7-bildbanner--pos-center.l7-bildbanner--dim-strong .l7-bildbanner__media::after { background: rgba(10,10,10,0.6); }
.l7-bildbanner--pos-right.l7-bildbanner--dim-strong .l7-bildbanner__media::after { background: linear-gradient(270deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.25) 100%); }
.l7-bildbanner__inner { position: relative; z-index: 2; width: 100%; padding: 64px 0; }
.l7-bildbanner--pos-center .l7-bildbanner__inner { text-align: center; }
.l7-bildbanner--pos-right .l7-bildbanner__inner { text-align: right; }
.l7-bildbanner__headline { color: var(--l7-white); font-size: clamp(30px, 6vw, 76px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; margin: 0 0 14px; max-width: 900px; }
.l7-bildbanner--pos-center .l7-bildbanner__headline { margin-left: auto; margin-right: auto; }
.l7-bildbanner--pos-right .l7-bildbanner__headline { margin-left: auto; }
.l7-bildbanner__sub { color: rgba(255,255,255,0.85); font-size: clamp(16px, 1.7vw, 21px); max-width: 620px; margin: 0 0 26px; }
.l7-bildbanner--pos-center .l7-bildbanner__sub { margin-left: auto; margin-right: auto; }
.l7-bildbanner--pos-right .l7-bildbanner__sub { margin-left: auto; }
@media ( max-width: 768px ) {
  .l7-bildbanner--dim-strong .l7-bildbanner__media::after { background: rgba(10,10,10,0.65) !important; }
  .l7-bildbanner__inner { padding: 48px 0; }
  .l7-bildbanner--pos-right .l7-bildbanner__inner, .l7-bildbanner--pos-right .l7-bildbanner__headline, .l7-bildbanner--pos-right .l7-bildbanner__sub { text-align: left; margin-left: 0; }
}

/* ---------- Modul-Grid-Karten mit optionalem Bild ---------- */
.l7-bigcard--mit-bild { padding: 0; overflow: hidden; }
.l7-bigcard__image { aspect-ratio: 16/10; overflow: hidden; }
.l7-bigcard__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* TEXTBLOCK UNTER DEM BILD (14.09.2026, Jamie: „haengt direkt unten am Kaestchen dran"):
   Der Untertitel hatte unten KEINEN Abstand (padding 0 32px) und war auf 240 px Breite
   gekappt — er klebte an der Unterkante und brach frueh um. Jetzt gleicher Abstand unten
   wie oben, volle Textbreite, etwas groessere Schrift. */
.l7-bigcard--mit-bild .l7-bigcard__title { padding: 28px 32px 0; margin-bottom: 8px; }
.l7-bigcard--mit-bild .l7-bigcard__sub { padding: 0 32px 32px; max-width: none; font-size: 16px; line-height: 1.5; }
.l7-bigcard--mit-bild .l7-bigcard__arrow { padding: 0 32px 24px; }

/* ---------- Buehne (14.09.2026): ein Bild ueber mehrere Sektionen, siehe seite.njk ---------- */
.l7-buehne { position: relative; background: var(--l7-black); isolation: isolate; }
/* VOLLE DECKKRAFT (14.09.2026 abends, Jamie: Bilder „neblig"): vorher opacity 0.5 auf Schwarz —
   derselbe milchige Schleier wie im Kopfbereich. Jetzt Bild voll, Lesbarkeit ueber einen
   dunklen Verlauf: unten (Countdown) und links (Ueberschrift) kraeftiger, Bildmitte frei.
   BETRIFFT AUCH COMING-SOON (abgenommen) — Beleg vorher/nachher in
   reports/2026-09-14-level7-bilder.md. Rueckweg: opacity 0.5 und den alten Verlauf
   (0.15 / 0.05 bei 40 % / 0.7) wieder einsetzen. */
.l7-buehne__bild { position: absolute; inset: 0; z-index: -2; background-size: cover; background-repeat: no-repeat; opacity: 1; }
.l7-buehne::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.2) 35%, rgba(10,10,10,0.35) 60%, rgba(10,10,10,0.85) 100%),
        linear-gradient(90deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.25) 45%, rgba(10,10,10,0) 75%); }
@media (max-width: 899px) {
    .l7-buehne::after { background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.45) 40%, rgba(10,10,10,0.9) 100%); }
}
.l7-buehne > .l7-hero, .l7-buehne > .l7-section { background: transparent; }
/* Die Schraegstreifen des Kopfbereichs laegen auf der Buehne nur ueber einem Teil des Bildes
   und brechen dann mitten im Motiv ab (Jamie 14.09.2026) — auf der Buehne deshalb aus. */
.l7-buehne .l7-hero__pattern { display: none; }
/* Handy (14.09.2026): Die Buehne ist dort hoch und schmal, das Hochformat wuerde seitlich
   beschnitten. Jamie: „auf dem Handy sieht man das ganze Bild direkt" — also dort wie vorher:
   Bild in voller Breite oben hinter dem Kopfbereich, der Countdown darunter auf Schwarz.
   !important, weil der Ausschnitt fuer breite Bildschirme als Inline-Style kommt. */
@media (max-width: 899px) {
    .l7-buehne__bild { background-size: 100% auto; background-position: center top !important; }
}

/* ---------- Warteliste (14.09.2026): Anmeldeformular auf der Coming-Soon-Seite ----------
   Ein Feld und ein Knopf in einer Zeile, auf schmalen Schirmen untereinander.
   Der Abschnitt liegt seit 14.09. abends auf SCHWARZ (Jamie: „schwarzer Hintergrund statt dem
   tuerkisen, die Schrift dann auf Tuerkis oder Weiss"): Beschriftung und Verweis tuerkis
   (#04FFF7 auf Schwarz 15,7:1 — auf Weiss nie), Einwilligungstext weiss mit 0,7 Deckkraft,
   Feld dunkel mit tuerkisem Rand (Regel .l7-section--dark .l7-form input; weisse Schrift auf
   #1C1C1C 15,5:1 — ein weisses Feld saehe auf Schwarz wie ein Fremdkoerper aus und der
   tuerkise Rand traegt die Marke), Knopf tuerkis mit schwarzer Schrift (l7-btn--primary).
   Die Rueckmeldungen (.l7-form__status: Tuerkis fuer „gut", Rosa fuer „schlecht") sind fuer
   Schwarz gemacht und bleiben. Die Regeln fuer die tuerkise Variante bleiben stehen, falls die
   Sektion zurueckwechselt. */
.l7-form--warteliste { gap: 12px; }
.l7-form__zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.l7-form__zeile input[type=email] { flex: 1 1 260px; min-width: 0; }
.l7-form__zeile .l7-btn { flex: 0 0 auto; align-self: stretch; display: inline-flex; align-items: center; }
.l7-form__einwilligung { margin: 4px 0 0; font-size: 13px; line-height: 1.5; max-width: 620px; }
.l7-form__einwilligung a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.l7-section--dark .l7-form--warteliste label { color: var(--l7-teal); }
.l7-section--dark .l7-form--warteliste input[type=email]::placeholder { color: rgba(255,255,255,0.45); }
.l7-section--dark .l7-form__einwilligung { color: rgba(255,255,255,0.7); }
.l7-section--dark .l7-form__einwilligung a { color: var(--l7-teal); }
.l7-section--teal .l7-form__status[data-art="gut"]      { color: var(--l7-black); }
.l7-section--teal .l7-form__status[data-art="laeuft"]   { color: rgba(10,10,10,0.7); }
.l7-section--teal .l7-form__status[data-art="schlecht"] { color: #8B0000; }
@media (max-width: 560px) {
    .l7-form__zeile .l7-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Einwilligung (14.09.2026, Etappe 0.1 — angehaengt an das uebernommene Theme-CSS) ──
   Banner unten, schwarz mit tuerkisem Rand, DREI GLEICH GROSSE Knoepfe (Grid 3x1fr),
   am Handy untereinander. Kein Overlay ueber der ganzen Seite: der Gast soll weiterlesen
   koennen, ohne zu waehlen. */
.l7-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500; padding: 16px; }
.l7-consent[hidden] { display: none; }
.l7-consent__box { max-width: 760px; margin: 0 auto; background: var(--l7-black); color: var(--l7-white); border: 2px solid var(--l7-teal); padding: 20px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.l7-consent__titel { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--l7-white); line-height: 1.3; }
.l7-consent__text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.85); }
.l7-consent__wahl { display: grid; gap: 8px; margin: 0 0 14px; font-size: 14px; }
.l7-consent__wahl[hidden] { display: none; }
.l7-consent__wahl label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.l7-consent__wahl input { margin-top: 3px; accent-color: var(--l7-teal); }
.l7-consent__knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.l7-consent__btn { padding: 12px 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; border: 2px solid var(--l7-white); background: transparent; color: var(--l7-white); cursor: pointer; font-family: inherit; }
.l7-consent__btn:hover { background: var(--l7-white); color: var(--l7-black); }
.l7-consent__btn--ja { background: var(--l7-teal); border-color: var(--l7-teal); color: var(--l7-black); }
.l7-consent__btn--ja:hover { background: var(--l7-teal-bright); border-color: var(--l7-teal-bright); color: var(--l7-black); }
.l7-consent__fuss { margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.7); }
.l7-consent__fuss a { color: var(--l7-teal); }
@media (max-width: 600px) { .l7-consent { padding: 8px; } .l7-consent__knoepfe { grid-template-columns: minmax(0, 1fr); } }
.l7-roller__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.l7-roller__knoepfe [hidden] { display: none; }
.l7-footer__cookie { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.l7-footer__cookie:hover { color: var(--l7-teal); }
/* Zweite Liste im Rechtsmenue (Cookie-Einstellungen) — Abstand zur ersten, sonst kleben AGB und Cookie-Einstellungen aneinander (gesehen 14.09.). */
.l7-footer__legal-list + .l7-footer__legal-list { margin-left: 18px; }
.l7-footer__legal-list li .l7-footer__cookie { color: rgba(255,255,255,0.6); font-size: 12px; transition: color 0.18s ease-out; }
/* Sonderoeffnungszeiten im Fuss (14.09.2026): gleiche Liste wie die Wochentage, leicht abgesetzt. */
.l7-footer__hours--sonder { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); }
/* Auf dem Telefon Tippflaechen von 44 px (14.09.2026, QA, steht am Dateiende, damit keine spaetere Regel display ueberschreibt): Kontakt-, Listen- und Rechtsverweise
   waren 15 bis 30 px hoch und lagen dicht untereinander. Nur der Abstand waechst, nicht die Schrift. */
@media (max-width: 700px) {
    .l7-footer__contact, .l7-footer__list li a { display: flex; align-items: center; min-height: 44px; padding: 0; }
    .l7-kontakt-card__contact a { display: flex; align-items: center; min-height: 44px; padding: 0; }
    .l7-footer__legal-list li a, .l7-footer__legal-list li .l7-footer__cookie, .l7-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Angebots-Karten (15.09.2026, Baustein angebotskarten, Mockup „Zwei Bahn-Typen") ----------
   Dunkle Karten auf Schwarz, Bild oben (16:10), Titel, Text, Preiszeile in Tuerkis.
   Hervorgehobene Karte: tuerkiser Rahmen ringsum UND als Linie zwischen Bild und Text.
   #04FFF7 nur auf Dunkel (Regel level7-bildwelt-und-teal); auf hellen Flaechen #00B8B2. */
.l7-angebote__heading { max-width: 11em; margin-bottom: 40px; text-wrap: balance; }
.l7-section--dark .l7-angebote__heading { color: var(--l7-white); }
/* auto-fit statt fester zwei Spalten (17.09.2026): Seit der Produkt-Uebersicht sind es drei
   Karten und nicht mehr zwei. Eine feste 2er-Regel haette die dritte allein in eine zweite
   Reihe gestellt. 240px als schmalste Spalte, damit auch bei 900px noch drei nebeneinander
   passen (3 x 240 + 2 x 20 = 760) und keine einzelne Waise entsteht. */
.l7-angebote__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.l7-angebot { display: flex; flex-direction: column; min-width: 0; background: #1A1A1A; border: 1px solid #2A2A2A; color: var(--l7-white); }
.l7-angebot--hervor { border: 2px solid var(--l7-teal); }
.l7-angebot__bild { aspect-ratio: 16 / 10; overflow: hidden; background: #141414; }
.l7-angebot--hervor .l7-angebot__bild { border-bottom: 2px solid var(--l7-teal); }
.l7-angebot__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l7-angebot__text { padding: 32px 32px 36px; display: flex; flex-direction: column; flex: 1; }
.l7-angebot__titel { font-size: clamp(20px, 2vw, 26px); letter-spacing: 0; margin: 0 0 12px; color: var(--l7-white); }
.l7-angebot__desc { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0 0 20px; }
/* Preis und Knopf stehen zusammen im Fuss der Karte. Das `margin-top: auto` sass frueher auf
   der Preiszeile; es gehoert jetzt auf den Fuss, sonst schiebt sich bei ungleich langen
   Texten der Preis nach unten und der Knopf darunter aus der Karte heraus. */
.l7-angebot__fuss { margin-top: auto; }
.l7-angebot__preis { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l7-teal); }
.l7-angebot__preis--fehlt { color: #FF6B6B; }
.l7-angebot__knopf { margin-top: 18px; }
.l7-angebot__knopf .l7-btn { width: 100%; justify-content: center; }
.l7-section--default .l7-angebot, .l7-section--cream .l7-angebot { background: var(--l7-white); color: var(--l7-black); border-color: var(--l7-gray-light); }
.l7-section--default .l7-angebot__titel, .l7-section--cream .l7-angebot__titel { color: var(--l7-black); }
.l7-section--default .l7-angebot__desc, .l7-section--cream .l7-angebot__desc { color: var(--l7-charcoal); }
.l7-section--default .l7-angebot__preis, .l7-section--cream .l7-angebot__preis { color: var(--l7-teal-dark); }
.l7-section--teal .l7-angebot--hervor, .l7-section--teal .l7-angebot--hervor .l7-angebot__bild { border-color: var(--l7-black); }
@media (max-width: 899px) {
    .l7-angebote__grid { grid-template-columns: minmax(0, 1fr); }
    .l7-angebot__text { padding: 24px 22px 28px; }
}

/* Neutrale Flaeche fuer ein noch fehlendes Bild — erscheint NUR im Vorschau-Bau (die Vorlagen
   lassen sie im Live-Bau weg). Schraege Streifen wie in Jamies Mockup, Text tuerkis. */
.l7-bildplatzhalter { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
    background: repeating-linear-gradient(135deg, #161616 0 22px, #1E1E1E 22px 44px); }
.l7-bildplatzhalter span { color: var(--l7-teal); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.7; }

/* ---------- Text mit Bild und Liste (15.09.2026, Baustein text-bild-liste, Mockup „Die Bahn spielt mit") ---------- */
.l7-tbl__oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; margin-bottom: 40px; }
.l7-tbl__oben--bild-links .l7-tbl__bild { order: -1; }
.l7-tbl__oben--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.l7-tbl__heading { max-width: 9em; text-wrap: balance; }
.l7-section--dark .l7-tbl__heading { color: var(--l7-white); }
.l7-tbl__absatz { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0; max-width: 620px; }
.l7-section--default .l7-tbl__absatz, .l7-section--cream .l7-tbl__absatz { color: var(--l7-charcoal); }
.l7-tbl__bild { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #2A2A2A; border-bottom: 2px solid var(--l7-teal); background: #141414; }
.l7-tbl__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l7-tbl__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.l7-tbl__punkt { background: #111; border-left: 3px solid var(--l7-teal); padding: 26px 28px; }
.l7-tbl__punkt-titel { font-size: 15px; letter-spacing: 0.06em; color: var(--l7-teal); margin: 0 0 6px; }
.l7-tbl__punkt-text { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0; }
.l7-section--default .l7-tbl__punkt, .l7-section--cream .l7-tbl__punkt { background: var(--l7-white); border-left-color: var(--l7-teal-dark); }
.l7-section--default .l7-tbl__punkt-titel, .l7-section--cream .l7-tbl__punkt-titel { color: var(--l7-black); }
.l7-section--default .l7-tbl__punkt-text, .l7-section--cream .l7-tbl__punkt-text { color: var(--l7-charcoal); }
@media (max-width: 899px) {
    .l7-tbl__oben { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .l7-tbl__punkt { padding: 22px 20px; }
}

/* ---------- Event-Paket-Karten: Fuss mit Buchen-Knopf (17.09.2026, ROLLER-Geburtstage) ----------
   Preis, Zusatz, Bedingungen und Knopf stehen jetzt in EINEM Fuss. Vorher trug der Preisblock
   selbst das margin-top:auto; sobald darunter ein Knopf steht, schiebt ein einzelnes auto nicht
   mehr den ganzen Fuss, und in Karten unterschiedlicher Laenge haengen die Knoepfe auf
   verschiedenen Hoehen.

   DIE TRENNLINIE SITZT AM FUSS UND NICHT AM PREIS. Das ist der Punkt, an dem eine Karte OHNE
   Preis nicht mehr kaputt aussieht: Sie bekommt dieselbe Linie und denselben Abstand wie jede
   andere Karte — es fehlt nur die Zahl. Haenge die Linie an den Preis, verschwindet sie mit ihm,
   und die Karte wirkt unten abgeschnitten.

   Die Karten sind seit v2.14.5 IMMER schwarz (.l7-paket-card), unabhaengig von der Farbflaeche
   der Sektion. Deshalb helles Weiss-Transparent fuer die Linie wie in den Zeilen darueber und
   keine Sonderregel je Sektionsvariante. */
.l7-paket-card__fuss { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.2); }
/* Die inneren Bloecke haben ihr eigenes auto/padding aus der Zeit vor dem Fuss — hier still-
   gelegt, sonst steht die Linie doppelt und der Abstand zweimal. */
.l7-paket-card__fuss .l7-paket-card__preis { margin-top: 0; padding-top: 0; border-top: 0; }
.l7-paket-card__fuss .l7-tarif-card__preise { margin-top: 0; padding-top: 0; }
.l7-paket-card__knopf { margin-top: 18px; }
.l7-paket-card__knopf .l7-btn { width: 100%; justify-content: center; }
/* Fehlender Wert — NUR im Vorschau-Bau sichtbar (event-pakete-grid.njk zeigt ihn nur dort).
   Gleiche Farbe wie .l7-angebot__preis--fehlt, damit „hier fehlt etwas" ueberall gleich aussieht. */
.l7-paket-card__fehlt { margin-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: #FF6B6B; }