/*
 * Vorübergehender Reiter „Fragen“ — Gestaltung. Nur Klassen mit Präfix
 * fragen-; Farben und Schriften ausschließlich über die Variablen aus
 * portal/index.html (:root und html[data-schema="hell"]).
 *
 * INHALT
 *   Statusfarben   — --fragen-gruen/-bernstein/-gold für beide Schemata
 *   Grundgerüst    — Hülle, Kopf, Meldung, Filter, Raster, Inhaltsliste
 *   Gruppen/Karten — Gruppe, Karte, Etikett, Kästen, Tabelle, Beleg
 *   Eingaben       — Textfelder, Knöpfe, Statuszeile, eigene Punkte
 *   Schmale Fenster
 */

/* === SECTION: Statusfarben ===
   Gerechnet gegen Kartenfläche und Seitengrund (WCAG 2.2, 1.4.3):
   dunkel 7,8–9,0:1, hell 4,9–6,5:1 — alle über 4,5:1. */
:root {
  --fragen-gruen:     #8DB596;
  --fragen-bernstein: #D9A452;
  --fragen-gold:      #D4AF37;
}

html[data-schema="hell"] {
  --fragen-gruen:     #2F6A3E;
  --fragen-bernstein: #8A5410;
  --fragen-gold:      #7E5D30;
}

/* === SECTION: Grundgerüst === */

/* Eigene display-Werte (grid/flex) dürfen das hidden-Attribut nicht aushebeln. */
.fragen-huelle [hidden],
.fragen-huelle[hidden] { display: none !important; }

.fragen-huelle {
  margin: 0 auto;
  max-width: 1440px;
  padding: 40px 48px 96px;
}

.fragen-kopf {
  align-items: flex-start;
  border-bottom: 1px solid var(--haarlinie);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
  padding-bottom: 32px;
}

.fragen-kopf-text {
  flex: 1 1 520px;
  min-width: 0;
}

.fragen-titel {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 8px;
}

.fragen-stand {
  color: var(--gold);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: .3em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.fragen-hinweis {
  color: var(--warmgrau);
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
  max-width: 75ch;
}

.fragen-kopf-aktionen {
  align-items: flex-end;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 12px;
}

.fragen-zaehler {
  color: var(--warmgrau);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-align: right;
}

.fragen-meldung {
  border: 1px solid var(--siegel-text);
  color: var(--siegel-text);
  flex: 1 1 100%;
  font-size: 16px;
  margin: 0;
  padding: 12px 16px;
}

.fragen-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px 0 8px;
}

.fragen-filterknopf {
  background: none;
  border: 1px solid var(--haarlinie);
  color: var(--warmgrau);
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  letter-spacing: .04em;
  padding: 7px 16px;
}

.fragen-filterknopf:hover { border-color: var(--gold); color: var(--gold); }

.fragen-filterknopf[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--grund);
}

.fragen-raster { display: block; }

.fragen-spalte { min-width: 0; }

/* Die Inhaltsliste gibt es erst ab 1100 px; darunter fehlt ihr der Platz. */
.fragen-inhalt { display: none; }

@media (min-width: 1100px) {
  .fragen-raster {
    align-items: start;
    display: grid;
    gap: 56px;
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .fragen-inhalt {
    display: block;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-top: 32px;
    position: sticky;
    top: 0;
  }
}

.fragen-inhalt-titel {
  color: var(--gold);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: .3em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.fragen-inhalt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fragen-inhalt-punkt {
  align-items: baseline;
  border-bottom: 1px solid var(--haarlinie-zart);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 0;
}

.fragen-inhalt-verweis {
  color: var(--elfenbein);
  font-size: 15px;
  line-height: 1.45;
  text-decoration: none;
}

.fragen-inhalt-verweis:hover { color: var(--gold); }

.fragen-inhalt-zahl {
  color: var(--text-blass);
  flex: 0 0 auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* === SECTION: Gruppen/Karten === */

.fragen-gruppe { padding-top: 40px; }

.fragen-gruppe-titel {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 31px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 12px;
}

.fragen-einleitung {
  color: var(--warmgrau);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 20px;
  max-width: 75ch;
}

.fragen-leer {
  color: var(--warmgrau);
  padding: 40px 0;
}

.fragen-karte {
  background: var(--flaeche);
  border: 1px solid var(--haarlinie-zart);
  border-left: 3px solid transparent;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 20px;
  padding: 28px 32px;
}

/* Dezente Markierung: Karte mit gespeichertem Kommentar. */
.fragen-karte-kommentiert { border-left-color: var(--gold); }

@media (min-width: 900px) {
  .fragen-karte { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; }
  .fragen-karte.fragen-karte-eigen { grid-template-columns: minmax(0, 1fr); }
}

.fragen-karte-regel { min-width: 0; }

.fragen-karte-titel {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 10px;
}

.fragen-kennung {
  color: var(--gold);
  font-family: 'Cinzel', Georgia, serif;
  font-variant-numeric: tabular-nums;
  margin-right: 12px;
}

.fragen-etikett {
  border: 1px solid currentColor;
  display: inline-block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11.5px;
  letter-spacing: .14em;
  line-height: 1.4;
  margin: 0 0 14px;
  padding: 3px 10px;
  text-transform: uppercase;
}

.fragen-etikett-gruen     { color: var(--fragen-gruen); }
.fragen-etikett-bernstein { color: var(--fragen-bernstein); }
.fragen-etikett-gold      { color: var(--fragen-gold); }

.fragen-regeltext {
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 18px;
  max-width: 75ch;
  overflow-wrap: anywhere;
}

.fragen-beispiel,
.fragen-vorschlag {
  border-left: 2px solid var(--haarlinie);
  margin: 0 0 18px;
  max-width: 75ch;
  padding: 4px 0 4px 18px;
}

.fragen-vorschlag { border-left-color: var(--vorschlag); }

.fragen-kasten-titel {
  color: var(--warmgrau);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11.5px;
  letter-spacing: .2em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.fragen-kasten-text {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  overflow-wrap: anywhere;
}

.fragen-tabellenbox {
  margin: 0 0 18px;
  max-width: 100%;
  overflow-x: auto;
}

.fragen-tabelle {
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  min-width: 100%;
}

.fragen-tabelle th,
.fragen-tabelle td {
  border-bottom: 1px solid var(--haarlinie-zart);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.fragen-tabelle th {
  border-bottom-color: var(--haarlinie);
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
}

.fragen-tabelle tbody tr:nth-child(even) { background: var(--haarlinie-zart); }

.fragen-beleg {
  color: var(--warmgrau);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 75ch;
  overflow-wrap: anywhere;
}

.fragen-beleg-titel { color: var(--elfenbein); font-weight: 500; }

/* === SECTION: Eingaben === */

.fragen-karte-kommentar,
.fragen-eigen-felder,
.fragen-neu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.fragen-neu {
  border: 1px dashed var(--haarlinie);
  margin: 0 0 24px;
  padding: 24px 32px;
}

.fragen-feldtitel {
  color: var(--gold);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.fragen-textfeld,
.fragen-eingabe {
  background: var(--grund);
  border: 1px solid var(--haarlinie);
  color: var(--elfenbein);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  padding: 10px 12px;
  width: 100%;
}

.fragen-textfeld {
  min-height: 9.5em;
  overflow-y: auto;
  resize: vertical;
}

.fragen-textfeld:focus-visible,
.fragen-eingabe:focus-visible {
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.fragen-textfeld[readonly],
.fragen-eingabe[readonly] { opacity: .7; }

.fragen-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fragen-knopf {
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  cursor: pointer;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  letter-spacing: .16em;
  padding: 10px 20px;
  text-transform: uppercase;
}

.fragen-knopf:hover:not(:disabled) { background: var(--gold); color: var(--grund); }

.fragen-knopf:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.fragen-knopf-leise {
  border-color: var(--haarlinie);
  color: var(--warmgrau);
}

.fragen-knopf-leise:hover:not(:disabled) {
  background: none;
  border-color: var(--gold);
  color: var(--gold);
}

.fragen-knopf.fragen-knopf-warnung,
.fragen-knopf.fragen-knopf-warnung:hover:not(:disabled) {
  background: none;
  border-color: var(--siegel-text);
  color: var(--siegel-text);
}

.fragen-status {
  color: var(--text-blass);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  margin: 0;
  min-height: 1.5em;
}

.fragen-status-hinweis { color: var(--fragen-bernstein); }
.fragen-status-fehler  { color: var(--siegel-text); }

/* === SECTION: Schmale Fenster ===
   Ab 390 px kein waagrechtes Scrollen der Seite; nur Tabellen rollen in
   ihrer eigenen Box. */
@media (max-width: 900px) {
  .fragen-huelle { padding: 26px 20px 64px; }
  .fragen-titel { font-size: 32px; }
  .fragen-kopf-aktionen { align-items: flex-start; }
  .fragen-zaehler { text-align: left; }
  .fragen-karte { padding: 22px 18px; }
  .fragen-neu { padding: 20px 18px; }
  .fragen-gruppe-titel { font-size: 26px; }
}

@media (max-width: 480px) {
  .fragen-huelle { padding: 20px 16px 56px; }
  .fragen-karte { padding: 18px 14px; }
  .fragen-neu { padding: 16px 14px; }
}