/* =========================================================
   meditationgongs.de · Fragen und Antworten (Layout Lea, 08.09.2026)
   Für die Textseite „Häufige Fragen" und für den Fragenblock der Markenseite.
   Grund Weiß. Ethos des Systems: Linie statt Schatten, Kante statt Glow.
   Kein neuer Farbwert, alles aus design.css.
   ========================================================= */

/* ---------- Breite der Lesespalte auf der Fragenseite ---------- */
/* Im Entwurf trug der Artikel die Klasse lesespalte--breit. Der Rumpf kommt
   aus der Datenbank und steht innerhalb des Artikels, er kann dessen Klasse
   also nicht setzen. Gemessen: ohne diese Regel steht die Fragenstrecke
   669 px breit statt 883 px, weil lesespalte auf 68ch begrenzt ist.
   Die Antworten selbst behalten ihr Lesemass von 68ch. */
.lesespalte:has(> .fragen){max-width:none}

/* ---------- Gruppe ---------- */
.fragen{display:grid;gap:clamp(34px,3.8vw,54px)}
.fragen__lede{max-width:56ch;margin-bottom:clamp(30px,3.4vw,44px)}
.fragen__gruppe{display:grid}
.fragen__titel{
  font-family:var(--f-display);font-weight:400;color:var(--wein);
  font-size:clamp(1.6rem,2vw,1.95rem);line-height:1.2;margin:0 0 6px;
}
.fragen__vor{font-size:var(--fs-small);color:var(--text);margin:0 0 18px;max-width:64ch}

/* ---------- Eine Frage ---------- */
/* details/summary statt Skript. Ohne JavaScript aufklappbar, mit Tastatur
   bedienbar, und der Text steht auch beim Drucken im Dokument. */
.frageblock{border-top:1px solid var(--linie)}
.fragen__gruppe > .frageblock:last-of-type{border-bottom:1px solid var(--linie)}
.frageblock > summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:400;color:var(--wein);
  font-size:clamp(1.375rem,1.7vw,1.625rem);line-height:1.25;
  transition:color .25s var(--ease);
}
.frageblock > summary::-webkit-details-marker{display:none}
.frageblock > summary:hover{color:var(--akzent)}
.frageblock > summary:focus-visible{outline:3px solid var(--akzent);outline-offset:4px;border-radius:3px}
/* Das Zeichen rechts: eine Kante, kein Icon-Satz. Waagerechter Strich bleibt,
   der senkrechte verschwindet beim Aufklappen. */
.frageblock__zeichen{
  position:relative;width:26px;height:26px;flex:none;margin-top:.28em;
  border:1px solid var(--linie);border-radius:999px;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.frageblock__zeichen::before,.frageblock__zeichen::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--wein);
  transform:translate(-50%,-50%);transition:opacity .25s var(--ease),background .25s var(--ease);
}
.frageblock__zeichen::before{width:11px;height:1.4px}
.frageblock__zeichen::after{width:1.4px;height:11px}
.frageblock[open] .frageblock__zeichen{border-color:var(--wein)}
.frageblock[open] .frageblock__zeichen::after{opacity:0}
.frageblock > summary:hover .frageblock__zeichen{border-color:var(--akzent)}
.frageblock > summary:hover .frageblock__zeichen::before,
.frageblock > summary:hover .frageblock__zeichen::after{background:var(--akzent)}

.frageblock__antwort{padding:0 0 28px;max-width:68ch}
.frageblock__antwort p{color:var(--text);font-size:var(--fs-body);line-height:1.65}
.frageblock__antwort p + p{margin-top:14px}
.frageblock__antwort ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.frageblock__antwort li{display:flex;gap:14px;align-items:flex-start;color:var(--dunkel);line-height:1.5}
.frageblock__antwort li b{color:var(--wein);font-weight:700}
.frageblock__antwort li .ring{color:var(--akzent);flex:none;width:1.05em;height:1.05em;margin-top:.35em}
.frageblock__antwort .nebenlink{display:inline-block;margin-top:16px}

/* ---------- Satzliste, zum Beispiel die Versandsätze ---------- */
.satzliste{margin:20px 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;max-width:52ch}
.satzliste dt,.satzliste dd{margin:0;padding:14px 0;border-top:1px solid var(--linie);font-size:var(--fs-small);line-height:1.4}
.satzliste dt{color:var(--dunkel);font-weight:600;padding-right:24px}
.satzliste dd{color:var(--dunkel);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.satzliste dt:last-of-type,.satzliste dd:last-of-type{border-bottom:1px solid var(--linie)}
.satzliste + .satzhinweis{margin-top:14px;font-size:var(--fs-small);color:var(--text)}

/* ---------- Auflockerung: ein Bild zwischen zwei Fragengruppen ---------- */
/* Steht als eigenes Kind in .fragen, damit der Gitterabstand der Gruppen den
   Abstand oben und unten setzt. Kein eigener Rand, kein Schatten, nur die
   Rundung des Systems.
   height:auto ist Pflicht und keine Kosmetik. Die Attribute width und height
   am img wirken als Praesentationshinweis, eine gesetzte Hoehe schlaegt
   aspect-ratio, und das Bild stand gemessen 1022 x 814 statt 1022 x 575.
   Mit height:auto behaelt es das Verhaeltnis der Datei (1448 / 814 = 1,779). */
.fragen__bild{margin:0;display:grid;gap:12px}
.fragen__bild img{width:100%;height:auto;border-radius:var(--radius-l)}
.fragen__bild figcaption{font-size:var(--fs-small);color:var(--text);line-height:1.45;max-width:56ch}

/* ---------- Platzhalter für Texter Tim ---------- */
/* Bewusst auffällig. Diese Stelle darf nicht unbemerkt live gehen. */
.tim{
  display:flex;gap:14px;align-items:flex-start;
  margin:0;padding:18px 20px;border:1.5px dashed var(--akzent);border-radius:var(--radius);
  background:var(--wein-10);color:var(--dunkel);font-size:var(--fs-small);line-height:1.5;
}
.tim b{color:var(--wein);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-kicker);flex:none}
.tim span{display:block}

/* ---------- Anschluss an den Beratungsblock ---------- */
/* Die Textseite bringt schon einen Sektorabstand mit, der Baustein .frage
   ebenfalls. Zusammen entstand ein Loch von rund 270 px. Hier zaehlt einer. */
.seite-fragen .textseite{padding-bottom:calc(var(--sec)*.45)}
.frage--fragen{margin-top:0}

/* ---------- Sprungleiste über den Gruppen ---------- */
.sprung{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(32px,3.6vw,48px)}
.sprung a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--dunkel-14);border-radius:999px;
  color:var(--dunkel);font-size:1.0625rem;font-weight:500;
  transition:background .25s,color .25s,border-color .25s;
}
.sprung a:hover{background:var(--wein);color:var(--creme);border-color:var(--wein);text-decoration:none}

/* ---------- Responsiv ---------- */
@media (max-width:560px){
  .frageblock > summary{gap:16px;padding:20px 0}
  .satzliste{max-width:none}
  .tim{flex-direction:column;gap:8px}
}