/* landing.css — Anlassseiten (Hochzeit, Weihnachtsfeier, Firmenevent, Familienfeier)
   Wintergarten-Designsystem: Bogen, Haarlinie, Papier.
   Baut auf den Variablen aus styles.css auf. */

.lp {
    padding: calc(var(--space-2xl) + 2.5rem) var(--container-padding) var(--space-2xl);
    max-width: 1120px;
    margin: 0 auto;
}

/* ── Kopf ───────────────────────────────────────────────────────────── */

.lp-kopf { margin-bottom: var(--space-xl); }

.lp-kopf h1 { max-width: 16ch; }

.lp-kopf .lp-lead { max-width: 62ch; }

.lp-kopf h1 {
    font-family: var(--font-display);
    font-variation-settings: var(--fv-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 6.5vw, 4.8rem);
    line-height: 1;
    text-transform: none;
    letter-spacing: var(--letter-spacing-display);
    margin: var(--space-sm) 0 var(--space-md);
}

.lp-lead {
    font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
    line-height: 1.62;
    color: var(--color-text-secondary);
    font-family: var(--font-serif);
    font-variation-settings: var(--fv-text);
}

/* ── Faktenleiste: Register statt Kasten ────────────────────────────── */

.lp-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border: none;
    border-top: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-primary);
    margin-bottom: var(--space-xl);
}

.lp-fakt {
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
    border-right: 1px solid var(--color-border-primary);
}

.lp-fakt:last-child { border-right: 0; }

@media (max-width: 720px) {
    .lp-fakt { border-right: 0; border-bottom: 1px solid var(--color-border-primary); padding-right: 0; }
    .lp-fakt:last-child { border-bottom: 0; }
}

.lp-fakt-wert {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: var(--fv-display);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 0.9;
    color: var(--color-bg-inverse);
}

[data-theme="dark"] .lp-fakt-wert { color: var(--color-accent); }

.lp-fakt-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: var(--letter-spacing-mono);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-top: 0.5rem;
}

/* ── Abschnitte ─────────────────────────────────────────────────────── */

.lp-abschnitt {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-border-primary);
}

.lp-abschnitt:first-of-type { border-top: none; }

.lp-abschnitt h2 {
    font-family: var(--font-display);
    font-variation-settings: var(--fv-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.05;
    text-transform: none;
    letter-spacing: var(--letter-spacing-display);
    margin: 0 0 var(--space-md);
    max-width: 22ch;
}

.lp-abschnitt h3 {
    font-family: var(--font-display);
    font-variation-settings: var(--fv-mid);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 0;
    margin: var(--space-lg) 0 0.45rem;
}

.lp-abschnitt p,
.lp-abschnitt li {
    font-size: 1.0125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.lp-abschnitt p { margin: 0 0 1rem; }
.lp-abschnitt p:last-child { margin-bottom: 0; }

.lp-abschnitt a {
    color: var(--color-text-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-brass);
    padding-bottom: 1px;
    transition: border-color var(--transition-snap), color var(--transition-snap);
}

.lp-abschnitt a:hover { color: var(--color-accent-hover); border-color: var(--color-brass); }

.lp-liste {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lp-liste li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border-primary);
}

.lp-liste li:first-child { border-top: 1px solid var(--color-border-primary); }

.lp-liste li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-brass);
    transform: translateY(-2px);
}

.lp-liste + p { margin-top: var(--space-md); }

/* Zweispaltiger Abschnitt: Text neben Bild */
.lp-zwei {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* ── Bilder: hochformatig im Bogen, quer mit Haarlinie ──────────────── */

.lp-bild { margin: var(--space-lg) 0 0; }
.lp-bild:first-child { margin-top: 0; }

.lp-bild img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    border-radius: var(--radius-md);
}

.lp-bild-hoch img {
    border-radius: var(--arch);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.lp-zwei .lp-bild img {
    border-radius: var(--arch);
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
}

.lp-bild figcaption {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    margin-top: 0.7rem;
    line-height: 1.5;
    max-width: 60ch;
}

.lp-platzhalter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    aspect-ratio: 3 / 2;
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px dashed var(--color-border-brass);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}

.lp-platzhalter-nr {
    font-family: var(--font-display);
    font-variation-settings: var(--fv-display);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-border-brass);
}

.lp-platzhalter-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 44ch;
}

.lp-platzhalter-mass {
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: var(--letter-spacing-mono);
    text-transform: uppercase;
    opacity: 0.75;
}

.lp-bild-breit .lp-platzhalter { aspect-ratio: 21 / 9; }
.lp-bild-hoch .lp-platzhalter { aspect-ratio: 4 / 5; }

/* ── Preisblock ─────────────────────────────────────────────────────── */

.lp-preis {
    border: 1px solid var(--color-border-brass);
    border-radius: var(--radius-md);
    box-shadow: none;
    padding: var(--space-lg);
    margin: var(--space-lg) 0 0;
    max-width: 640px;
    background: var(--color-bg-secondary);
}

.lp-preis-wert {
    font-family: var(--font-display);
    font-variation-settings: var(--fv-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    line-height: 1;
    color: var(--color-bg-inverse);
}

[data-theme="dark"] .lp-preis-wert { color: var(--color-accent); }

.lp-preis-wert small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: var(--letter-spacing-mono);
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 0.5rem;
}

.lp-preis p { margin: var(--space-sm) 0 0; }

/* ── Fragen und Antworten ───────────────────────────────────────────── */

.lp-faq { margin-top: var(--space-md); }

.lp-faq details {
    border-top: 1px solid var(--color-border-primary);
    padding: var(--space-sm) 0;
}

.lp-faq details:last-child { border-bottom: 1px solid var(--color-border-primary); }

.lp-faq summary {
    font-family: var(--font-display);
    font-variation-settings: var(--fv-mid);
    font-weight: 400;
    font-size: 1.15rem;
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: baseline;
    transition: color var(--transition-snap);
}

.lp-faq summary:hover { color: var(--color-text-accent); }

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary::after {
    content: "+";
    font-family: var(--font-body);
    color: var(--color-brass);
    font-size: 1.15rem;
    line-height: 1;
}

.lp-faq details[open] summary::after { content: "–"; }

.lp-faq details p {
    margin: 0.65rem 0 0;
    color: var(--color-text-secondary);
}

/* ── Abschluss und Verweise ─────────────────────────────────────────── */

.lp-cta {
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    padding: clamp(2rem, 4vw, 3rem);
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-lg);
    align-items: center;
}

@media (max-width: 720px) {
    .lp-cta { grid-template-columns: 1fr; }
}

.lp-cta h2 {
    font-family: var(--font-display);
    font-variation-settings: var(--fv-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.05;
    text-transform: none;
    margin: 0 0 0.6rem;
    color: var(--color-text-inverse);
}

.lp-cta p {
    margin: 0;
    color: var(--color-text-inverse);
    opacity: 0.78;
    max-width: 52ch;
    line-height: 1.6;
}

.lp-cta-knoepfe {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 15rem;
}

.lp-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 1rem 1.8rem;
    text-decoration: none;
    border: 1px solid var(--color-accent-light);
    border-radius: var(--radius-pill);
    background: var(--color-accent-light);
    color:var(--color-text-primary);
    transition: background var(--transition-snap), color var(--transition-snap),
                border-color var(--transition-snap), transform var(--transition-snap);
}

.lp-knopf:hover {
    background: var(--color-bg-primary);
    border-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transform: translateY(var(--hover-lift));
}

.lp-knopf-leer {
    background: transparent;
    color: var(--color-text-inverse);
    border-color: rgba(216, 184, 118, 0.5);
}

.lp-knopf-leer:hover {
    background: rgba(216, 184, 118, 0.14);
    border-color: var(--color-accent-light);
    color: var(--color-text-inverse);
}

/* Verweise auf die anderen Anlassseiten */
.lp-weitere { margin-top: var(--space-xl); }

.lp-weitere h2 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: var(--letter-spacing-mono);
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin: 0 0 var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.lp-weitere h2::before {
    content: "";
    width: clamp(24px, 4vw, 54px);
    height: 1px;
    background: var(--color-brass);
    flex: none;
}

.lp-weitere-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--color-border-primary);
}

/* Zellen: Linie oben und rechts, Innenabstand rundum — die erste Zelle buendig mit dem Text darueber */
.lp-weitere-liste a {
    display: block;
    border: none;
    border-top: 1px solid var(--color-border-primary);
    border-right: 1px solid var(--color-border-primary);
    padding: var(--space-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color var(--transition-snap);
}

.lp-weitere-liste a:first-child { padding-left: 0; }
.lp-weitere-liste a:last-child { border-right: none; padding-right: 0; }

.lp-weitere-liste a:hover { background: rgba(22, 36, 28, .04); }
.lp-weitere-liste a:first-child:hover { background: linear-gradient(to right, transparent 0, rgba(22, 36, 28, .04) var(--space-md)); }
[data-theme="dark"] .lp-weitere-liste a:hover { background: rgba(216, 184, 118, .06); }

.lp-weitere-name {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: var(--fv-mid);
    font-size: 1.3rem;
    line-height: 1.15;
    text-transform: none;
}

.lp-weitere-hinweis {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    margin-top: 0.25rem;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .lp-weitere-liste a, .lp-weitere-liste a:first-child, .lp-weitere-liste a:last-child { border-right: none; padding-left: 0; padding-right: 0; }
    .lp-weitere-liste a:hover { background: transparent; }
}

/* ── Anlassleiste auf der Startseite ────────────────────────────────── */

.anlaesse-band {
    border-top: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
    padding: var(--space-2xl) var(--container-padding);
}

.anlaesse-inner { max-width: var(--container-max); margin: 0 auto; }

.anlaesse-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: var(--letter-spacing-mono);
    text-transform: uppercase;
    color: var(--color-text-accent);
    border: none;
    padding: 0;
    margin-bottom: var(--space-md);
}

.anlaesse-tag::before {
    content: "";
    width: clamp(24px, 4vw, 54px);
    height: 1px;
    background: var(--color-brass);
    flex: none;
}

.anlaesse-band h2 {
    font-family: var(--font-display);
    font-variation-settings: var(--fv-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    text-transform: none;
    letter-spacing: var(--letter-spacing-display);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
}

.anlaesse-text {
    font-size: 1.0125rem;
    line-height: 1.62;
    color: var(--color-text-secondary);
    max-width: 62ch;
    margin: 0 0 var(--space-lg);
}

/* ══════════════════════════════════════════════════════════════════
   Anlassseiten: Kopfbild und interaktive Bausteine
   ══════════════════════════════════════════════════════════════════ */

/* ── Kopfbild ──────────────────────────────────────────────────── */
.lp-hero{margin:var(--space-lg) 0 var(--space-xl);position:relative}
.lp-hero figure{margin:0;position:relative;overflow:hidden;
  border-radius:50% 50% 6px 6px / 22% 22% 0 0;background:var(--color-bg-tertiary);
  aspect-ratio:16/8.6}
.lp-hero img{width:100%;height:100%;object-fit:cover;display:block;
  animation:lp-hero-in 1.3s cubic-bezier(.16,1,.3,1) both}
@keyframes lp-hero-in{from{transform:scale(1.08)}to{transform:scale(1)}}
.lp-hero figcaption{position:absolute;left:1rem;bottom:1rem;
  background:color-mix(in srgb,var(--color-bg-primary) 88%,transparent);
  backdrop-filter:blur(10px);border:1px solid var(--color-border-brass);
  border-radius:999px;padding:.5rem 1rem;font-size:.78rem;
  display:inline-flex;align-items:center;gap:.5rem}
.lp-hero figcaption b{color:var(--color-text-accent);font-weight:500}
@media(max-width:720px){.lp-hero figure{aspect-ratio:4/3;border-radius:60% 60% 6px 6px / 14% 14% 0 0}}

/* ── Gemeinsames: Bedienleiste ─────────────────────────────────── */
.lp-seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--color-bg-secondary);
  border:1px solid var(--color-border-primary);border-radius:999px;padding:4px;margin-bottom:var(--space-md)}
.lp-seg button{font-family:var(--font-body);font-size:.82rem;font-weight:500;color:var(--color-text-secondary);
  background:transparent;border:0;border-radius:999px;padding:.55rem 1.05rem;cursor:pointer;
  transition:background-color .45s var(--transition-snap),color .45s var(--transition-snap)}
.lp-seg button[aria-pressed="true"]{background:var(--color-bg-inverse);color:var(--color-text-inverse)}

.lp-tool{margin-top:var(--space-md)}
.lp-tool-note{font-size:.86rem;color:var(--color-text-tertiary);margin-top:.7rem;min-height:2.6em}
.lp-tool-zahl{font-family:var(--font-display);font-variation-settings:var(--fv-display);
  font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:.95;color:var(--color-bg-inverse)}
[data-theme="dark"] .lp-tool-zahl{color:var(--color-accent)}
.lp-tool-zahl small{font-family:var(--font-body);font-size:.9rem;font-weight:500;
  color:var(--color-text-tertiary);margin-left:.4rem}

/* ── Grundriss ─────────────────────────────────────────────────── */
.lp-plan svg{width:100%;height:auto;display:block;border:1px solid var(--color-border-primary);
  border-radius:var(--radius-md);background:var(--color-bg-secondary)}
.lp-plan .wall{fill:none;stroke:var(--color-border-primary);stroke-width:2}
.lp-plan .aisle{fill:none;stroke:var(--color-border-primary);stroke-width:1;stroke-dasharray:5 6;opacity:.7}
.lp-plan .door{stroke:var(--color-brass);stroke-width:5}
.lp-plan .lbl{fill:var(--color-text-tertiary);font-family:var(--font-body);font-size:13px;letter-spacing:.14em}
.lp-plan .g-tab{fill:none;stroke:var(--color-border-brass);stroke-width:1.4;
  transition:opacity .5s var(--transition-snap),transform .7s cubic-bezier(.16,1,.3,1)}
.lp-plan .g-dot{fill:var(--color-bg-inverse);
  transition:transform .95s cubic-bezier(.16,1,.3,1),opacity .4s ease}
[data-theme="dark"] .lp-plan .g-dot{fill:var(--color-accent)}
.lp-plan .zone{fill:var(--color-brass);opacity:.07;transition:all .8s cubic-bezier(.16,1,.3,1)}

/* ── Ablauf ────────────────────────────────────────────────────── */
.lp-ablauf{list-style:none;margin:var(--space-md) 0 0;padding:0;position:relative}
.lp-ablauf::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;
  background:var(--color-border-primary)}
.lp-ablauf::after{content:"";position:absolute;left:7px;top:10px;width:1px;height:0;
  background:var(--color-brass);transition:height 1.4s cubic-bezier(.16,1,.3,1)}
.lp-ablauf.laeuft::after{height:calc(100% - 20px)}
.lp-ablauf li{position:relative;padding:0 0 var(--space-md) var(--space-lg);
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--transition-snap),transform .7s var(--transition-snap)}
.lp-ablauf li.sichtbar{opacity:1;transform:none}
.lp-ablauf li:last-child{padding-bottom:0}
.lp-ablauf li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;
  border-radius:50%;background:var(--color-bg-primary);border:1px solid var(--color-border-primary);
  transition:border-color .5s,background-color .5s,transform .5s}
.lp-ablauf li.sichtbar::before{border-color:var(--color-brass);background:var(--color-brass);transform:scale(.72)}
.lp-ablauf .zeit{display:block;font-size:.7rem;letter-spacing:var(--letter-spacing-mono);
  text-transform:uppercase;color:var(--color-text-accent);font-weight:500;margin-bottom:.2rem}
.lp-ablauf .was{font-size:1.0125rem;line-height:1.65;color:var(--color-text-secondary)}
.lp-ablauf .was b{color:var(--color-text-primary);font-weight:500;font-family:var(--font-display);
  font-variation-settings:var(--fv-text)}

/* ── Regler ────────────────────────────────────────────────────── */
.lp-regler{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.lp-regler input[type=range]{flex:1;accent-color:var(--color-bg-inverse);height:2px;cursor:pointer}
.lp-regler output{font-family:var(--font-display);font-variation-settings:var(--fv-text);
  font-size:1.2rem;min-width:5.5ch;text-align:right}
.lp-kosten{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:var(--space-md)}
.lp-kosten div{border-top:1px solid var(--color-border-primary);padding-top:.7rem}
.lp-kosten dt{font-size:.7rem;letter-spacing:var(--letter-spacing-mono);text-transform:uppercase;
  color:var(--color-text-tertiary);margin-bottom:.3rem}
.lp-kosten dd{font-family:var(--font-display);font-variation-settings:var(--fv-text);font-size:1.35rem}
.lp-kosten .guenstig dd{color:var(--color-bg-inverse)}
[data-theme="dark"] .lp-kosten .guenstig dd{color:var(--color-accent)}
.lp-kosten small{display:block;font-family:var(--font-body);font-size:.76rem;color:var(--color-text-tertiary);
  margin-top:.2rem;line-height:1.4}

/* ── Lichtstufen ───────────────────────────────────────────────── */
.lp-licht svg{width:100%;height:auto;display:block;border-radius:var(--radius-md);
  background:#0E1A14;border:1px solid var(--color-border-brass)}
.lp-licht .glas{stroke:rgba(255,255,255,.5);stroke-width:1.4;fill:none}
.lp-licht .sprosse{stroke:rgba(255,255,255,.28);stroke-width:.9;fill:none}
.lp-licht .halle{transition:fill 1.1s cubic-bezier(.16,1,.3,1)}
.lp-licht .schein{transition:opacity 1.1s ease,fill 1.1s ease}
.lp-licht .boden{fill:rgba(255,255,255,.06)}
.lp-licht .gast{fill:rgba(255,255,255,.42)}

/* Interaktive Bausteine bekommen die volle Breite des Abschnitts */
.lp-zwei > .lp-plan,
.lp-zwei > .lp-gaeste,
.lp-zwei > .lp-licht{grid-column:1/-1;max-width:none}
.lp-plan .lp-tool-zahl{margin-top:.2rem}
.lp-regler label{font-size:.7rem;letter-spacing:var(--letter-spacing-mono);text-transform:uppercase;
  color:var(--color-text-accent);font-weight:500;white-space:nowrap}
.lp-regler output::after{content:" Gäste";font-family:var(--font-body);font-size:.8rem;
  color:var(--color-text-tertiary)}
.lp-licht .strahl{transition:opacity 1.1s ease}
.lp-licht.party .strahl{opacity:.30}
.lp-licht.party .s1{animation:strahl1 7s ease-in-out infinite alternate}
.lp-licht.party .s2{animation:strahl2 9s ease-in-out infinite alternate}
@keyframes strahl1{from{transform:translateX(-60px) scaleY(.9)}to{transform:translateX(90px) scaleY(1.1)}}
@keyframes strahl2{from{transform:translateX(70px) scaleY(1.1)}to{transform:translateX(-80px) scaleY(.9)}}
@media(prefers-reduced-motion:reduce){.lp-licht.party .strahl{animation:none}}
.lp-licht .schein{filter:blur(42px)}
.lp-licht .strahl{filter:blur(34px)}