/* =================================================================
   qwhat?? – Programmporträts der qteach-Familie
   -----------------------------------------------------------------
   Ergänzt anleitung.css (wird danach geladen). Eine qwhat??-Seite
   erklärt nicht die Bedienung, sondern was ein Programm ist und warum
   es sich lohnt – Inhalt, Ziel, Didaktik, Technik, zwei Bilder.
   Gedruckt genau eine A4-Seite; das Gesamtdokument qwhat.html reiht
   die Seiten mit Seitenumbruch aneinander.
   ================================================================= */

:root {
  --q-amber: #f59e0b;
  --q-amber-dunkel: #b4690e;
  --q-flaeche: #fdf6e9;
}

/* ----- Wortmarke ----------------------------------------------------- */
.qmarke {
  display: flex; align-items: flex-end; gap: .55rem;
  margin-bottom: 1.4rem; line-height: 1;
}
.qmarke .wort {
  display: inline-flex; align-items: flex-end; gap: .08em;
  font-weight: 800; font-size: 1.5em; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.qmarke .wort img { height: 1.3em; width: auto; margin-bottom: -.42em; }
.qmarke .wort i { font-style: normal; color: var(--q-amber); }
.qmarke .prog { font-weight: 400; color: var(--ink-soft); font-size: 1em; }

/* ----- Programmsymbole (bilder/symbole/*.svg) ---------------------------- */
.sym {
  display: inline-block; height: 1.05em; width: auto; vertical-align: -.16em;
  margin-right: .3em; border-radius: .24em;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ----- Titel ----------------------------------------------------------- */
.qwhat h1 { font-size: 2.1em; margin-bottom: .1em; }
.qwhat h1 .sub { font-size: .54em; color: var(--ink); font-weight: 600; margin-top: .25em; }

/* ----- Steckbrief ---------------------------------------------------- */
.steckbrief {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 1.1rem 0 1.3rem; border: 2px solid var(--ink); border-radius: 8px;
  overflow: hidden; break-inside: avoid;
}
.steckbrief > div { padding: .45rem .6rem; border-left: 1px solid var(--line); font-size: .9em; line-height: 1.35; }
.steckbrief > div:first-child { border-left: 0; }
/* Langer Text im zweiten Feld (qquiz „Einsatz“): Spaltenbreiten nach Inhalt */
.steckbrief.zweite-breit { grid-template-columns: .55fr 1.9fr .8fr 1fr 1.35fr; }
.steckbrief .label,
.qfeld .label {
  display: block; font-size: .76em; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--q-amber-dunkel); margin-bottom: .15rem;
}

/* ----- Die vier Felder ------------------------------------------------ */
.qfelder { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.4rem; margin: 0 0 1rem; }
.qfeld { break-inside: avoid; }
.qfeld.breit { grid-column: 1 / -1; }
.qfeld h2 {
  font-size: 1.1em; margin: 0 0 .35rem; padding: 0 0 .2rem;
  border-bottom: 2px solid var(--q-amber);
}
.qfeld p { margin: 0 0 .45rem; }
.qfeld ul { margin: 0; padding-left: 1.1rem; }
.qfeld li { margin: 0 0 .3rem; }
.qfeld li::marker { color: var(--q-amber-dunkel); }
.qfeld li strong { font-weight: 700; }

/* ----- Bilder: breites Beamerbild + schmales Handybild ---------------- */
/* --hoch = Breitenanteil des zweiten Bilds, damit beide gleich hoch werden:
   (Breite/Höhe Bild 2) / (Breite/Höhe Bild 1), z. B. Handy 0,676 / Beamer 1,30 = .52fr.
   Je Seite per style="--hoch: …fr" setzen. */
.qbilder {
  --hoch: .52fr;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--hoch));
  gap: 1rem; align-items: start; margin: .3rem 0 1.1rem; break-inside: avoid;
}
.qbilder.drei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 24%); }
.qbilder figure { margin: 0; }
.qbilder img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 6px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.qbilder figcaption { font-size: .82em; color: var(--ink-soft); margin-top: .3rem; line-height: 1.3; }

/* ----- Fuss: weiter geht's ---------------------------------------------- */
.qweiter {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline;
  background: var(--q-flaeche); border-radius: 8px; padding: .55rem .8rem;
  font-size: .95em; break-inside: avoid;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.qweiter strong { color: var(--q-amber-dunkel); }
.qweiter .stand { margin-left: auto; color: var(--ink-soft); font-size: .88em; }

/* ----- Übersicht qwhat.html ------------------------------------------ */
.qtitel { margin: 0 0 1.2rem; }
.qtitel .wort {
  display: inline-flex; align-items: flex-end; gap: .06em;
  font-weight: 800; font-size: 3.2em; letter-spacing: -.03em; line-height: 1;
  margin-bottom: .35em;
}
.qtitel .wort img { height: 1.3em; width: auto; margin-bottom: -.42em; }
.qtitel .wort i { font-style: normal; color: var(--q-amber); }
.qtitel h1 { font-size: 1.7em; }
.qtitel h1 .sub { font-size: .62em; font-weight: 400; color: var(--ink-soft); }

.qwarum {
  background: var(--q-flaeche); border-left: 4px solid var(--q-amber);
  border-radius: 6px; padding: .7rem .9rem; margin: 0 0 1.2rem; break-inside: avoid;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.qwarum p { margin: 0 0 .4rem; }
.qwarum p:last-child { margin-bottom: 0; }

.qgruppe h2 { border-bottom-color: var(--q-amber); }
.qkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .9rem; margin: 0 0 1rem; }
.qkarte {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; break-inside: avoid;
}
.qkarte:hover, .qkarte:focus-visible { border-color: var(--q-amber); }
.qkarte > img {
  display: block; width: 100%; height: 7.5rem; object-fit: cover; object-position: top center;
  border-bottom: 1px solid var(--line);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.qkarte .name  { font-weight: 800; font-size: 1.05em; padding: .55rem .75rem 0; }
.qkarte .claim { padding: .15rem .75rem 0; }
.qkarte .kurz  { margin-top: auto; padding: .4rem .75rem .6rem; font-size: .85em; color: var(--ink-soft); }
.qfolgt { color: var(--ink-soft); font-size: .92em; margin: .2rem 0 1rem; }

@media (max-width: 36rem) {
  .steckbrief, .steckbrief.zweite-breit { grid-template-columns: 1fr 1fr; }
  .steckbrief > div { border-left: 0; border-top: 1px solid var(--line); }
  .qfelder { grid-template-columns: 1fr; }
  .qbilder, .qbilder.drei { grid-template-columns: 1fr 1fr; }
}

/* ----- Druck: genau eine Seite je Programm -------------------------- */
@media print {
  body.qwhat { font-size: 10pt; line-height: 1.38; }
  .qwhat h1 { font-size: 20pt; }
  .qwhat .qmarke { margin-bottom: .7rem; }
  .qwhat .steckbrief { margin: .6rem 0 .8rem; }
  .qwhat .qfelder { gap: .6rem 1.1rem; margin-bottom: .6rem; }
  /* Linke Spalte mit langem Text breiter, damit die Seite auf ein Blatt passt (qMem). */
  .qwhat .qfelder.links-breit { grid-template-columns: 1.22fr .78fr; }
  .qwhat .qbilder { margin: 0 auto .7rem; max-width: 122mm; }
  /* Zwei Querformate nebeneinander werden sonst zu klein. */
  .qwhat .qbilder.quer { max-width: 160mm; }
  .qwhat .qbilder figcaption { font-size: 8pt; }
  .qwhat .fuss { margin-top: .7rem; }
  .qwhat a[href^="http"]::after { content: none; }
  .qseite + .qseite { break-before: page; page-break-before: always; }

  /* Übersicht: vier Karten je Zeile, damit sie auf ein Blatt passt. */
  .qtitel { margin-bottom: .6rem; }
  .qtitel .wort { font-size: 2.1em; margin-bottom: .25em; }
  .qtitel h1 { font-size: 17pt; }
  .qwarum { margin-bottom: .4rem; padding: .4rem .7rem; font-size: .95em; }
  .qgruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .qgruppe.breit { grid-column: 1 / -1; }
  .qgruppe h2 { margin: .7rem 0 .4rem; }
  .qkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .2rem; }
  .qgruppe.breit .qkarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qkarte > img { height: 15mm; }
  .qkarte { font-size: .9em; }
  .qkarte .name { padding: .35rem .5rem 0; }
  .qkarte .claim { padding: .1rem .5rem 0; }
  .qkarte .kurz { display: none; }
  .qkarte .claim { padding-bottom: .35rem; }
}