/* ==========================================================================
   LIA'S KITCHEN – nur /angebot/ (lädt nach css/stil.css, gleiche ?v=)
   Seite «Angebot» (Lia 14.10.2026), dunkel / hell im Wechsel:
     1 Seiten-Kopf (dunkel)       Überzeile «Mein Angebot», Leitsatz als Titel, daneben (Computer) bzw. darunter
                                  (Handy) das Video vom Buffet im Garten (wie auf der Startseite, css/stil.css 5)
     2 Für wen, alle Formen (hell) die zwei Karten und die Liste der 12 Formen (Stil in css/stil.css 5); jede führt zu
                                  /kontakt/?anlass=… und wählt dort vor (die Firmenkunden standen bis ?v=63 als Zeile
                                  zwischen beiden, seit ?v=64 als Aufklapper auf der Startseite, css/stil.css 4)
     3 Meine Küche (dunkel)       Lias Sätze zur Küche, dazu die Getränke aus Zürich
     4 Eigene Events (dunkel)     «Nicht nur Catering» (seit ?v=64, vorher auf Über mich): vier eigene Anlässe, Instagram
     5 Aufruf (hell)              «Ein Anlass in Planung?» (css/stil.css 4 «Aufruf»)
   Bewegung wie überall: Einblenden über [data-zeigen], das Video über js/seite.js «clip» (README «Video»).
   ========================================================================== */

/* --- 1 Seiten-Kopf: Text und Video --- */

.angebot-seite-raster { display: grid; gap: 28px; }

/* Der Titel ist ein ganzer Satz: kleiner als die Ein-Wort-Titel der anderen Seiten */
.angebot-seite-kopf h1 { max-width: 16em; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.1; letter-spacing: -.02em; }

/* Computer: Text oben, auf Höhe des Videos, wie «Mein Angebot» auf der Startseite (Lia 14.10.2026: oben statt mittig) */
@media (min-width: 900px) {
  .angebot-seite-raster {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 25vw, 360px); align-items: start; gap: clamp(48px, 6vw, 112px);
  }
}

/* --- 2 Für wen und alle Formen: die Zwischentitel sind hier Überschriften (h2), aussehen wie auf der Startseite --- */

.hell h2.angebot-titel { color: var(--gold-dunkel); }

/* --- 3 Meine Küche (dunkel): Titel links, die Sätze rechts als ruhige Liste mit Goldpunkt --- */

.angebot-kueche-raster { display: grid; gap: 28px; }
.angebot-kueche .abschnitt-kopf { margin-bottom: 0; }
.kueche-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }

.kueche-liste li {
  position: relative; padding: 16px 0 16px 26px; border-bottom: 1px solid var(--linie); color: var(--text);
  font-size: 17px; line-height: 1.6;
}

.kueche-liste li::before {
  content: ""; position: absolute; top: calc(16px + .8em - 3px); left: 2px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}

.kueche-text .textlink { margin-top: 16px; }

@media (min-width: 900px) {
  .angebot-kueche-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(48px, 6vw, 112px); }
  .kueche-liste li { padding-block: 18px; font-size: 18px; }
  .kueche-liste li::before { top: calc(18px + .8em - 3px); }
}

@media (prefers-reduced-motion: no-preference) {
  .kueche-liste > :nth-child(2) { --verz: 80ms; }
  .kueche-liste > :nth-child(3) { --verz: 160ms; }
  .kueche-liste > :nth-child(4) { --verz: 240ms; }
}


/* --- 4 Eigene Events (dunkel; Lia 15.10.2026: «sagen, das lias kitchen nicht nur caterer ist, sondern auch
       veranstalterin»; seit ?v=64 hier statt auf Über mich, Lia «nicht nur ein catering doch bei angebot ausführen»,
       «1a») ---
   Gestaltung wie vorher auf Über mich (von css/ueber-mich.css hierher gezogen): Kopf wie jeder Abschnitt, darunter die
   vier Anlässe mit feiner Linie oben und einem kurzen Goldstrich darauf, Name in Merriweather; ab 900 px zwei Spalten.
   Danach der Schluss über einer feinen Linie: «… und weitere besondere Anlässe.» kursiv, darunter die Einladung mit
   Instagram im Ton der Texte. Kein eigener Knopf: der Aufruf «Ein Anlass in Planung?» folgt direkt. Ein ruhiger
   Goldschein links beim Kopf, nur Dekor; anders als auf Über mich (dort an der Kartenkante, oben links in der Ecke)
   liegt seine Mitte etwas tiefer und er ist an der Oberkante ganz ausgeblendet, sonst stünde dort, wo «Meine Küche»
   ohne Kante übergeht, eine sichtbare Stufe. Kompakt (Lia: wenig leere Fläche): direkt nach «Meine Küche»
   stehen zwei dunkle Abschnitte ohne Kante nacheinander, darum oben nur ein Rest Luft und «Meine Küche» unten etwas
   weniger (dieselbe Formel wie Bildband, Ablauf und Stimmen in css/stil.css 4); unten an der Kartenkante des Aufrufs
   0,7 × --abstand (css/stil.css 4). Keine Bewegung ausser dem Einblenden ([data-zeigen]). */

.lia-events {
  background: radial-gradient(70% 45% at 0% 35%, rgba(212,175,55,.07), rgba(212,175,55,0) 70%), var(--grund);
}

.angebot-kueche + .lia-events { padding-top: calc(var(--abstand) * .4); }

@media (min-width: 900px) {
  .angebot-kueche:has(+ .lia-events) { padding-bottom: calc(var(--abstand) * .7); }
}

.lia-events .einleitung { color: var(--text); }

.lia-events-liste { display: grid; gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.lia-events-liste > li { position: relative; padding: 20px 0 24px; border-top: 1px solid var(--linie); }

.lia-events-liste > li::before { /* kurzer Goldstrich auf der Linie */
  content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--gold);
}

.lia-events-liste hgroup { margin: 0; }
.lia-events-liste h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.2; }

.lia-event-zusatz {
  margin-top: 8px; color: var(--gold); font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: .2em;
  text-transform: uppercase;
}

.lia-events-liste li > p { max-width: 34em; margin-top: 12px; }

/* Schluss: die erste Zeile kursiv wie bisher, darunter die Einladung (Lia 15.10.2026) im Ton der Texte */
.lia-events-schluss { padding-top: 20px; border-top: 1px solid var(--linie); }

.lia-events-schluss > p:first-child {
  color: var(--text); font-family: var(--serif); font-optical-sizing: auto; font-size: 18px; font-style: italic;
  font-weight: 300; line-height: 1.6;
}

.lia-events-mehr { max-width: 34em; margin-top: 8px; text-wrap: balance; } /* nie «Instagram.» allein in einer Zeile */

/* Instagram im Satz: Gold, fein unterstrichen wie .textlink. Die Tippfläche reicht über das Wort hinaus (Polster an
   einem Inline-Element verschiebt oben und unten nichts, seitlich gleicht der negative Rand es aus), so ist sie auch auf
   dem Handy mindestens 44 px hoch; der Fokusrahmen liegt nach innen gerückt eng ums Wort */
.lia-events-instagram {
  margin-inline: -10px; padding: 12px 10px; border-radius: 6px; color: var(--gold-hell); text-decoration-line: underline;
  text-decoration-color: var(--linie-gold); text-decoration-thickness: 1px; text-underline-offset: .3em;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

@media (hover: hover) {
  .lia-events-instagram:hover { color: var(--gold); text-decoration-color: currentColor; }
}

.lia-events-instagram:focus-visible { outline-offset: -8px; box-shadow: none; }

@media (min-width: 900px) {
  .lia-events-liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lia-events-schluss > p:first-child { font-size: 19px; }
}

@media (prefers-reduced-motion: no-preference) {
  .lia-events-liste > :nth-child(2n) { --verz: 120ms; }
}