/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: FRAGEN AN DIE BIBEL
   Übersicht (Aufklapper nach Thema) und Detailseite teilen diese Schicht.
   =========================================================================== */

@layer seite {

  .fragen__pfad { color: var(--text-3); font-size: var(--txt-etikett); padding-block-start: var(--raum-6); }
  .fragen__pfad a { color: inherit; }

  .fragen__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); padding-block: var(--raum-4) var(--raum-5); }
  .fragen__unter { color: var(--text-2); font-size: var(--txt-gross); max-inline-size: min(58ch, 100%); }

  /* Haltung der Seite — steht bewusst vor der ersten Frage */
  .haltung { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .haltung__text { color: var(--text-2); font-size: var(--txt-klein); max-inline-size: min(58ch, 100%); }
  .haltung__legende { display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: center; }
  .haltung__paar { display: flex; align-items: center; gap: var(--raum-2); font-size: var(--txt-etikett); color: var(--text-3); }

  .fragen__werkzeug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-3);
    padding-block: var(--raum-5) var(--raum-4);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .fragen__werkzeug form { flex: 1 1 18rem; max-inline-size: min(26rem, 100%); }
  .fragen__anzahl { color: var(--text-2); font-size: var(--txt-klein); margin-inline-start: auto; }
  .fragen__anzahl strong { color: var(--text); }

  /* Sprungmarken zu den Themengruppen */
  .fragen__themen { padding-block: var(--raum-4) var(--raum-2); }

  /* --- Themengruppe ------------------------------------------------------ */
  .thema-gruppe { margin-block-start: var(--raum-7); }
  .thema-gruppe__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-3);
    margin-block-end: var(--raum-3);
  }
  .thema-gruppe__kopf h2 { font-size: var(--txt-t4); letter-spacing: -0.01em; }
  .thema-gruppe__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  /* --- Frage: nur das Seitenspezifische; der Aufklapper steht in
         komponenten.css, weil ihn auch die Spendenseite nutzt --------------- */
  .frage__antwort { color: var(--text-2); }
  .frage__quelle { color: var(--text-3); font-size: var(--txt-etikett); }

  /* --- Beteiligte Stellen ----------------------------------------------- */
  .stellenpaar { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center; }
  .stellenpaar__gegen { color: var(--text-3); font-size: var(--txt-etikett); }

  /* --- Frage einsenden --------------------------------------------------- */
  .einsenden { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); margin-block-start: var(--raum-8); }
  .einsenden__text { color: var(--text-2); font-size: var(--txt-klein); max-inline-size: min(54ch, 100%); }
  .einsenden__paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
  .einsenden textarea { min-block-size: 7rem; resize: vertical; }
  .einsenden__hinweis { color: var(--text-3); font-size: var(--txt-etikett); }

  /* =====================================================================
     DETAILSEITE
     ===================================================================== */

  .antwort__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); padding-block: var(--raum-4) var(--raum-5); }
  .antwort__titel { max-inline-size: 34ch; }
  .antwort__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3) var(--raum-4); }

  .antwort__spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    gap: var(--raum-7);
    align-items: start;
    padding-block-end: var(--raum-6);
  }

  /* Der Befund: die beteiligten Stellen nebeneinander */
  .befund {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--raum-4);
  }
  .befund__seite {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-3);
    align-content: start;
    padding: var(--raum-4);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    border-block-start: 3px solid var(--linie-stark);
  }
  .befund__stelle { font-family: var(--schrift-mono); font-size: var(--txt-etikett); font-weight: var(--gewicht-halb); color: var(--marke); }
  .befund__stelle a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    color: inherit;
    text-decoration: none;
  }
  .befund__stelle a:hover { text-decoration: underline; }
  .befund__text { color: var(--text-2); font-size: var(--txt-klein); }

  .antwort__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); max-inline-size: var(--lese-max); color: var(--text-2); }
  .antwort__text h3 { font-size: var(--txt-gross); color: var(--text); margin-block-start: var(--raum-3); }

  /* Deutungen nebeneinander stellen, ohne zu entscheiden */
  .deutung {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-2);
    padding: var(--raum-4);
    background: var(--flaeche-3);
    border-radius: var(--radius-m);
  }
  .deutung__name { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); color: var(--text); }
  .deutung__wer { color: var(--text-3); font-size: var(--txt-etikett); }

  @media (max-width: 60rem) {
    .antwort__spalten { grid-template-columns: 1fr; gap: var(--raum-6); }
  }

  @media (max-width: 34rem) {
    .frage__inhalt { padding-inline-start: 0; }
    .einsenden__paar { grid-template-columns: 1fr; }
  }
}