/* =============================================================================
   EVENTPLANUNG - Anlass-Übersicht mit Suche (Schritt 1) und Anlass-Seite (Schritt 2).
   Die Anlass-Seite bekommt ihre Gestaltung aus dem Admin: Stimmung (Klasse .stimmung--…, dazu .stimmung--dunkel),
   Akzent- und Grundfarbe sowie Überschriftenschrift als Variablen im <head> (--anlass-akzent, --anlass-grund,
   --anlass-schrift, --anlass-laufweite, --anlass-wortabstand, --anlass-grossschrift, --anlass-staerke).
   Ohne eigene Schrift gelten die Montserrat-Regeln der Website.
   ============================================================================= */

/* ---------- Anlass-Suche (Schritt 1): großes Suchfeld über den Karten, Vorschläge als Liste darunter ---------- */
.anlass-suche {
    position: relative;
    z-index: 30; /* über den Karten darunter (.reveal erzeugt eigene Stapel, deshalb hier am Behälter) */
    max-width: 640px;
    margin: 0 auto clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.anlass-suche__feld {
    position: relative;
    display: flex;
    align-items: center;
}

.anlass-suche__feld > svg {
    position: absolute;
    left: 22px;
    width: 20px;
    height: 20px;
    color: var(--farbe-rot);
    pointer-events: none;
}

.anlass-suche__feld input {
    width: 100%;
    height: 60px;
    padding: 0 56px 0 54px;
    font-size: var(--text-base);
    color: var(--farbe-grau);
    background: var(--farbe-weiss);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    box-shadow: var(--schatten-karte);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    -webkit-appearance: none;
    appearance: none;
}

.anlass-suche__feld input::-webkit-search-cancel-button { display: none; }
.anlass-suche__feld input::placeholder { color: var(--farbe-grau-gedaempft); }

.anlass-suche__feld input:focus {
    outline: none;
    border-color: var(--farbe-rot);
    box-shadow: var(--schatten-lg), 0 0 0 4px rgb(var(--farbe-rot-rgb) / 0.12);
}

.anlass-suche__feld input:focus-visible { box-shadow: var(--schatten-fokus); }

.anlass-suche__leeren { position: absolute; right: 12px; color: var(--farbe-grau-gedaempft); }

.anlass-suche__vorschlaege {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    right: 0;
    z-index: 20;
    padding: var(--space-sm);
    background: var(--farbe-weiss);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-lg);
}

.anlass-suche__vorschlaege a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.anlass-suche__vorschlaege a span { font-size: var(--text-sm); color: var(--farbe-grau-gedaempft); }
.anlass-suche__vorschlaege li:hover a,
.anlass-suche__vorschlaege li[aria-selected="true"] a { background: rgb(var(--farbe-rot-rgb) / 0.06); }
.anlass-suche__vorschlaege li:hover strong,
.anlass-suche__vorschlaege li[aria-selected="true"] strong { color: var(--farbe-rot); }

.anlass-suche__stand {
    min-height: 1.5em;
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    text-align: center;
    color: var(--farbe-grau-gedaempft);
}

.anlass-suche__leer { margin-top: var(--space-xl); }

@media (max-width: 48em) {
    .anlass-suche__feld input { height: 54px; font-size: var(--text-sm); padding-left: 48px; }
    .anlass-suche__feld > svg { left: 18px; }
}

@media (forced-colors: active) {
    .anlass-suche__vorschlaege li[aria-selected="true"] a { outline: 2px solid Highlight; }
}

/* ---------- Farbwelt je Stimmung (Akzent und Grund kommen aus dem Admin, der Rest leitet sich ab) ---------- */
.seite--anlass {
    --anlass-text: var(--farbe-grau);
    --anlass-text-2: var(--farbe-grau-gedaempft);
    --anlass-flaeche: var(--farbe-weiss);
    --anlass-linie: var(--farbe-linie);
    --anlass-radius: var(--radius-xl);
}

.stimmung--dunkel {
    --anlass-text: var(--farbe-weiss);
    --anlass-text-2: var(--farbe-weiss-gedaempft);
    --anlass-flaeche: rgb(255 255 255 / 0.06);
    --anlass-linie: var(--farbe-linie-hell);
}

.stimmung--edel { --anlass-staerke: 400; }
.stimmung--sachlich { --anlass-radius: var(--radius-sm); }

/* Überschriften auf der Anlass-Seite: Schrift, Laufweite und Großschreibung je Anlass; die Sektionsköpfe bleiben Website-Stil */
.seite--anlass .anlass-kopf__titel,
.seite--anlass .anlass-modul__name,
.seite--anlass .anlass-module .sektion__header h2 {
    font-family: var(--anlass-schrift, var(--schrift-headlines));
    font-weight: var(--anlass-staerke, var(--fw-headline));
    letter-spacing: var(--anlass-laufweite, var(--ls-headline));
    word-spacing: var(--anlass-wortabstand, var(--ws-headline));
    text-transform: var(--anlass-grossschrift, uppercase);
}

/* Die Sektionsüberschrift erbte das Dunkelgrau der Website - auf einem dunklen Anlass (Hochzeit, Weihnachtsfeier)
   war "Passende" damit fast unsichtbar, nur das Akzentwort blieb lesbar (Audit 2026-10-10). */
.seite--anlass .anlass-module .sektion__header h2 { color: var(--anlass-text); }

/* Akzentfarbe statt Rot: Verlaufstext, Knöpfe, Schritte, Icons - nur innerhalb der Anlass-Sektionen */
.anlass-kopf .text-akzent,
.anlass-module .text-akzent {
    background: none;
    -webkit-text-fill-color: var(--anlass-akzent);
    color: var(--anlass-akzent);
}

.anlass-module .sektion__icon {
    color: var(--anlass-akzent);
    background: color-mix(in srgb, var(--anlass-akzent) 10%, transparent);
}

.anlass-module .btn--primaer {
    background: var(--anlass-akzent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--anlass-akzent) 30%, transparent);
}

.anlass-module .btn--primaer:hover {
    background: color-mix(in srgb, var(--anlass-akzent) 85%, black);
}

/* ---------- Anlass-Kopf: Bild über die ganze Breite, Text unten links auf dunklem Verlauf ---------- */
.anlass-kopf {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(78vh, 760px);
    margin-top: calc(-1 * var(--header-hoehe)); /* unter den fixierten Header schieben, das Bild beginnt ganz oben */
    padding-top: var(--header-hoehe);
    color: var(--farbe-weiss);
    background: var(--anlass-grund);
    isolation: isolate;
    overflow: clip;
}

.anlass-kopf__bild {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anlass-kopf__schleier {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, transparent 35%),
        linear-gradient(0deg, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.45) 45%, transparent 75%);
}

.anlass-kopf--ohne-bild .anlass-kopf__schleier {
    background:
        radial-gradient(60% 70% at 15% 0%, color-mix(in srgb, var(--anlass-akzent) 45%, transparent), transparent 70%),
        linear-gradient(135deg, var(--farbe-nacht) 0%, color-mix(in srgb, var(--anlass-akzent) 35%, var(--farbe-nacht)) 100%);
}

.anlass-kopf__inhalt {
    padding-block: var(--space-2xl) var(--space-3xl);
}

.anlass-kopf__pfad {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
    color: var(--farbe-weiss-gedaempft);
}

.anlass-kopf a:not(.btn) { color: inherit; text-decoration: none; }
.anlass-kopf a:not(.btn):hover { color: var(--farbe-weiss); }
.anlass-kopf__pfad svg { width: 14px; height: 14px; }
.anlass-kopf__pfad span { color: var(--farbe-weiss); }

.anlass-kopf__titel {
    max-width: 14ch;
    margin-bottom: var(--space-lg);
    font-size: var(--text-5xl);
    color: var(--farbe-weiss);
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}

.anlass-kopf__text {
    max-width: 60ch;
    margin-bottom: var(--space-xl);
    font-size: var(--text-lg);
    line-height: var(--lh-loose);
    color: var(--farbe-weiss-gedaempft);
}

.anlass-kopf__text p + p { margin-top: var(--space-sm); }
.anlass-kopf .schritte-leiste { margin-bottom: var(--space-xl); }
.anlass-kopf .schritte-leiste__schritt--aktiv .schritte-leiste__nummer { background: var(--anlass-akzent); }
.anlass-kopf .schritte-leiste__schritt--fertig .schritte-leiste__nummer { border-color: var(--anlass-akzent); color: var(--anlass-akzent); }

/* ---------- Module: eine Spalte breiter Karten, Bild links, Beispiel-Ausstattung zum Aufklappen ---------- */
.anlass-module {
    color: var(--anlass-text);
    background: var(--anlass-grund);
}

.anlass-module .sektion__header p { color: var(--anlass-text-2); }

.anlass-module__liste {
    display: grid;
    gap: var(--space-xl);
}

.anlass-modul {
    --bild-rand: var(--anlass-linie);
    interpolate-size: allow-keywords;  /* damit die Stückliste von 0 auf auto ausfahren kann */
}

.anlass-modul__flaeche {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    background: var(--anlass-flaeche);
    border: 1px solid var(--anlass-linie);
    border-radius: var(--anlass-radius);
    overflow: hidden;
}

.anlass-modul__bild-container {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    background: color-mix(in srgb, var(--anlass-akzent) 12%, var(--anlass-grund));
}

.anlass-modul__bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    will-change: transform;
    transition: transform var(--transition-langsam);
}

.anlass-modul:hover .anlass-modul__bild { transform: scale(1.08); }

.anlass-modul__nummer {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: 4px 12px;
    font-family: var(--anlass-schrift, var(--schrift-headlines));
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    color: var(--farbe-weiss);
    background: rgb(0 0 0 / 0.55);
    border-radius: var(--radius-full);
}

.anlass-modul__inhalt {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
}

.anlass-modul__name {
    font-size: var(--text-2xl);
    color: var(--anlass-text);
}

/* Der Modulname ist ein Link ohne Klasse und bekam dadurch die Fliesstext-Unterstreichung aus
   base.css (a:not([class])). Überschriften tragen die nie - dieselbe Korrektur wie bei
   .produkt-karte__name a, die hier schlicht vergessen wurde (Mirko, 02.10.2026). */
/* Auch die Farbe: der Link erbte sonst das Rot aus base.css statt der Farbe des Anlasses (Audit 2026-10-10) */
.anlass-modul__name a { color: inherit; text-decoration: none; }
.anlass-modul__name a:hover { text-decoration: underline; }

.anlass-modul__text { color: var(--anlass-text-2); }
.anlass-modul__text p + p, .anlass-modul__text ul, .anlass-modul__text ol { margin-top: var(--space-sm); }
.anlass-modul__text ul, .anlass-modul__text ol { padding-left: 1.25rem; list-style: disc; }

.anlass-modul__anzahl {
    font-size: var(--text-sm);
    color: var(--anlass-text-2);
}

/* Aufklappbare Stückliste: natives details, Plus dreht sich wie im Akkordeon.
   Sie liegt als eigene Reihe unter Bild und Text über die ganze Kartenbreite - in der Textspalte
   wuchs beim Aufklappen die Zeile und das Bild daneben wurde mitgestreckt (Mirko, 02.10.2026). */
.anlass-modul__liste {
    grid-column: 1 / -1;
    border-top: 1px solid var(--anlass-linie);
}

.anlass-modul__auf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    list-style: none;
}

.anlass-modul__auf:hover { color: var(--anlass-akzent); }

.anlass-modul__auf-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--anlass-akzent);
    transition: transform var(--transition-normal);
}

.anlass-modul__liste[open] .anlass-modul__auf-icon { transform: rotate(45deg); }

/* Aus- und Einfahren wie im FAQ-Akkordeon (components.css): die Höhe von 0 auf auto, dazu blendet
   die Liste leicht von oben ein. Ältere Browser ohne ::details-content klappen weiterhin hart auf. */
@supports (interpolate-size: allow-keywords) {
    .anlass-modul__liste::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--transition-langsam), content-visibility var(--transition-langsam) allow-discrete;
    }

    .anlass-modul__liste[open]::details-content { block-size: auto; }

    .anlass-modul__liste .ausstattung {
        opacity: 0;
        translate: 0 -0.75rem;
        transition: opacity var(--transition-normal), translate var(--transition-normal);
    }

    .anlass-modul__liste[open] .ausstattung {
        opacity: 1;
        translate: 0 0;
        transition-delay: 60ms;
    }
}

/* Ein Artikel je Zeile über die ganze Kartenbreite. Nebeneinander in Spalten wurde es unruhig:
   jede Karte war anders hoch, Bilder und Preise standen auf verschiedenen Höhen (Mirko, 02.10.2026). */
.anlass-modul__liste .ausstattung {
    gap: 0;
    padding: 0 var(--space-xl) var(--space-lg);
}

.anlass-modul__liste .ausstattung__artikel { padding-block: var(--space-md); }

/* Die Breite bringt den Preis aus der Textspalte heraus: Name und Kurztext links, Preis rechts.
   Er geht über beide Textzeilen und steht mittig darin - so liegt er auf einer Höhe mit dem „1 ד
   und dem Plus daneben, die im ganzen Eintrag zentriert sind (Mirko, 02.10.2026). */
.anlass-modul__liste .ausstattung__text {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: min-content;
    column-gap: var(--space-2xl);
}

.anlass-modul__liste .ausstattung__name,
.anlass-modul__liste .ausstattung__info { grid-column: 1; }

.anlass-modul__liste .ausstattung__preis {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
}

/* Ohne Kurztext gibt es keine zweite Zeile - der Preis bliebe sonst über einer leeren Zeile hängen */
.anlass-modul__liste .ausstattung__text:not(:has(.ausstattung__info)) .ausstattung__preis {
    grid-row: 1;
}

.anlass-modul__liste .ausstattung__info {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}
.anlass-modul__leer { font-size: var(--text-sm); color: var(--anlass-text-2); }
.anlass-modul__aktionen { margin-top: auto; padding-top: var(--space-sm); }
.anlass-modul__anzahl a { color: var(--anlass-akzent); text-decoration: underline; text-underline-offset: 0.15em; }

/* Modulseite: Knopf und Hinweis im Kopf */
.anlass-kopf__aktionen { display: grid; gap: var(--space-xs); justify-items: start; }
.anlass-kopf__aktionen small { font-size: var(--text-xs); color: var(--farbe-weiss-gedaempft); }

/* Verspielt: leicht gekippte Karten im Wechsel */
.stimmung--verspielt .anlass-modul:nth-child(odd) { rotate: -0.6deg; }
.stimmung--verspielt .anlass-modul:nth-child(even) { rotate: 0.6deg; }
.stimmung--verspielt .anlass-modul:hover { rotate: 0deg; }

@media (max-width: 48em) {
    .anlass-kopf { min-height: 70vh; }
    .anlass-kopf__titel { font-size: var(--text-4xl); }
    .anlass-modul__flaeche { grid-template-columns: 1fr; }
    .anlass-modul__bild-container { min-height: 0; aspect-ratio: 16 / 9; }
    .anlass-modul__inhalt { padding: var(--space-lg); }
    .anlass-modul__auf { padding-inline: var(--space-lg); }
    .anlass-modul__liste .ausstattung { padding-inline: var(--space-lg); }
    /* Schmal ist für Name neben Preis kein Platz: der Preis rückt wieder unter den Kurztext */
    .anlass-modul__liste .ausstattung__text { grid-template-columns: minmax(0, 1fr); }
    .anlass-modul__liste .ausstattung__preis { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .stimmung--verspielt .anlass-modul { rotate: 0deg; }

    /* Kein Ausfahren, kein Versatz - die Liste ist sofort da */
    .anlass-modul__liste::details-content { transition: none; }
    .anlass-modul__liste .ausstattung { translate: none; transition: none; }
}