/* ==========================================================================
   LIA'S KITCHEN – nur /fragen/ «Häufige Fragen» (lädt nach css/stil.css, gleiche ?v=)
   Seite seit 15.10.2026 (Lia: «unten bei datenschutz und impressum», verlinkt im Fuss, nicht im Menü):
     1 Seiten-Kopf (dunkel)   Überzeile, Titel «Häufige Fragen», kleine Sprungleiste zu den vier Gruppen
     2 Fragen (hell)          27 Fragen in vier Gruppen, jede ein natives <details> mit <summary> (ohne Skript, mit
                              Tastatur, Vorleser hören «zugeklappt/aufgeklappt»); goldenes Plus, offen ein Minus.
                              Ab 900 px Titel der Gruppe links (bleibt beim Lesen stehen), Fragen rechts.
     3 Aufruf (hell)          «Ein Anlass in Planung?» (css/stil.css 4 «Aufruf»)
   Bewegung: nur transform und opacity (Antwort blendet ein, Plus dreht sich zum Minus), nie bei «Bewegung reduzieren».
   Gold auf Creme nur als Linie oder Fläche, nie als Schrift (css/stil.css «Farben»): der Kreis ist eine Goldlinie,
   die Striche darin Gold-dunkel (5,4:1), offen Tinte auf Goldfläche.
   ========================================================================== */

/* --- Gemeinsame Breite für Seiten-Kopf und Karte: Titel, Sprungleiste und Fragen beginnen auf derselben Linie --- */

.fragen-huelle { max-width: calc(62rem + 2 * var(--rand)); }


/* --- 1 Seiten-Kopf --- */

.fragen-kopf { padding-bottom: clamp(28px, 4vw, 48px); }
.fragen-kopf h1 { font-size: clamp(40px, 6.4vw, 76px); }

/* Sprungleiste: die vier Gruppen als kleine Pillen (umbrechen auf dem Handy, nie seitlich scrollen) */
.fragen-sprung ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }

.fragen-sprung a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--linie-gold);
  border-radius: 999px; color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}

@media (hover: hover) {
  .fragen-sprung a:hover { border-color: var(--gold); color: var(--gold); }
}

@media (hover: none) {
  .fragen-sprung a:active { border-color: var(--gold-hell); color: var(--gold); }
}


/* --- 2 Fragen --- */

.fragen-gruppe + .fragen-gruppe { margin-top: clamp(40px, 5vw, 64px); }
.hell .fragen-gruppe h2 { margin: 0 0 8px; font-size: clamp(26px, 7vw, 32px); line-height: 1.2; letter-spacing: -.01em; }

.fragen-liste { border-bottom: 1px solid var(--linie-hell); }
.frage { border-top: 1px solid var(--linie-hell); }

/* Die Frage: ganze Zeile antippbar (mindestens 56 px hoch), Plus rechts */
.frage > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0;
  color: var(--tinte); font-family: var(--serif); font-optical-sizing: auto; font-size: 18px; font-weight: 400;
  line-height: 1.4; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.frage > summary::-webkit-details-marker { display: none; }
.frage > summary:focus-visible { border-radius: 8px; }
.frage-text { text-wrap: pretty; }

/* Plus und Minus: Goldkreis, zwei Striche; offen dreht sich der senkrechte Strich flach (Minus), der Kreis wird Gold */
.frage-zeichen {
  position: relative; flex: none; width: 30px; height: 30px; border: 1.5px solid var(--gold); border-radius: 50%;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.frage-zeichen::before, .frage-zeichen::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 1px; background: var(--gold-dunkel);
}

.frage-zeichen::after { transform: rotate(90deg); }
.frage[open] .frage-zeichen { background: var(--gold); }
.frage[open] .frage-zeichen::before, .frage[open] .frage-zeichen::after { background: var(--tinte); }
.frage[open] .frage-zeichen::after { transform: rotate(0deg); }

@media (hover: hover) {
  .frage > summary:hover .frage-text { text-decoration-line: underline; text-decoration-color: var(--linie-hell); text-decoration-thickness: 1px; text-underline-offset: .25em; }
  .frage > summary:hover .frage-zeichen { border-color: var(--gold-dunkel); }
}

/* Die Antwort: gut lesbar, etwa 65 Zeichen je Zeile */
.antwort { max-width: 34em; padding: 0 0 22px; color: var(--tinte); font-size: 16px; line-height: 1.7; }
.antwort a { color: var(--gold-dunkel); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .2em; }

@media (hover: hover) {
  .antwort a:hover { color: var(--tinte); }
}

@media (min-width: 600px) {
  .frage > summary { font-size: 19px; }
  .antwort { font-size: 17px; }
}

/* Computer: Titel der Gruppe links (bleibt beim Lesen der Gruppe stehen), Fragen rechts.
   Der stehende Titel hält genau auf der Höhe von scroll-padding-top (css/stil.css «html», 96 px + Band): nach einem
   Sprung über die Sprungleiste landet die Gruppe dort, Titel und erste Frage bleiben auf einer Grundlinie (mit 112 px
   wie sonst auf der Website stand der Titel nach dem Sprung 16 px zu tief). Der Abstand zwischen den Gruppen ist
   mindestens so gross: nach dem Sprung ist die vorige Gruppe samt ihrem stehenden Titel ganz oben aus dem Bild (sonst
   blieb ein Rest des Titels beim kleinen Logo stehen). werkzeuge/pruefen.py prüft beides. */
@media (min-width: 900px) {
  .fragen-gruppe {
    display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 46rem); column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }

  .fragen-gruppe + .fragen-gruppe { margin-top: calc(96px + var(--band)); }

  .hell .fragen-gruppe h2 {
    position: sticky; top: calc(96px + var(--band)); margin: 0; padding-top: 14px; font-size: 1.625rem;
  }

  .frage > summary { padding-block: 16px; }
}


/* --- Bewegung (nie bei «Bewegung reduzieren»; css/stil.css 12 schaltet dann ohnehin alles ab) --- */

@media (prefers-reduced-motion: no-preference) {
  .frage-zeichen::after { transition: transform 300ms var(--aus); }
  .frage[open] > .antwort { animation: lk-antwort 450ms var(--aus); }
}

@keyframes lk-antwort { from { opacity: 0; transform: translate3d(0, -6px, 0); } }


/* --- Druck: alle Antworten auf dem Papier (js/seite.js «fragenDrucken» öffnet bei «beforeprint» die zugeklappten
       Fragen und schliesst sie bei «afterprint» wieder), ohne Einblenden; Titel der Gruppen nicht stehend --- */

@media print {
  .fragen-sprung { display: none; }
  .hell .fragen-gruppe h2 { position: static; }
  .frage[open] > .antwort { animation: none; }
}