/* ------------------------------------------- Gedächtnis und Merkfähigkeit (gm-) */
/* Allergieausweis-Karte aus landing/aufgaben/gedaechtnis.mjs.
   Fläche und Farben kommen vom Trainer (.trainer: --t-flaeche, --t-ink …). */

.gm { scroll-margin-top: 124px; padding-bottom: 6px; text-align: left; }
/* .trainer hat overflow: hidden — das macht die Karte zum Scroll-Container, und
   die Leiste unten klebt dann nie. clip schneidet die Ecken genauso ab, ohne
   das Kleben zu verhindern (ältere Browser bleiben einfach bei hidden). */
.trainer.gm { overflow: clip; }
/* Globales „section { padding; text-align: center }“ der Landingpage aufheben */
.trainer.gm > section { padding: 0; text-align: left; }
.gm [hidden] { display: none !important; }

.trainer.gm p, .trainer.gm li { font-family: "Work Sans", sans-serif; color: var(--t-ink); }
.gm button { font-family: "Work Sans", sans-serif; }

.gm .t-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }

/* Kopf */

/* Segment-Schalter (Schwarzweiß/Farbig, Minuten) */

/* Rückfrage (statt Dialog) */

/* Leiste unten. Klebt nur in der Abrufphase („Weiter“ bei jeder der 25 Fragen,
   auch wenn Porträt und Antworten länger als der Bildschirm sind). Beim
   Einprägen steht der Knopf wie in der App am Ende der Liste und liegt nicht
   über den Ausweisen; Start und Auswertung brauchen ihn nicht klebend. */

/* Sprungziele für den Fokus (Kopf, Fragetext) — kein Rahmen um Text. */
.gm [tabindex="-1"]:focus { outline: none; }

/* Start */
.trainer.gm > .gm-start { padding-top: 10px; }

/* Ausweise */

.gm-k-huelle { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; }
.gm-k-huelle > .gm-karte { flex: 1; }

/* Der Ausweis — Maße relativ zur Kartenbreite (Vorlage 933 × 592) */
.gm-karte { position: relative; display: flex; flex-direction: column; background: #fff; color: #111; border: max(1px, 0.15cqi) solid #c9c9c9; border-radius: 10.7cqi; overflow: hidden; box-shadow: 0.4cqi 0.5cqi 1.4cqi rgba(0, 0, 0, 0.16); font-family: "Times New Roman", Times, "Liberation Serif", "Noto Serif", serif; font-variant-numeric: lining-nums; text-align: left; transition: filter 0.2s; }
.gm-k-kopf { position: relative; height: 13.2cqi; flex: none; }
.gm-k-titel { position: absolute; left: 8.1cqi; top: 4.2cqi; font: 700 5.1cqi/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.015em; color: #565656; text-shadow: 0.25cqi 0.25cqi 0.3cqi rgba(110, 110, 110, 0.45); white-space: nowrap; }
.gm-k-kreuz { position: absolute; right: 7.4cqi; top: 2.9cqi; width: 7cqi; height: auto; }
.gm-k-feld { flex: 1; display: grid; grid-template-columns: 22.2cqi minmax(0, 1fr); column-gap: 5.6cqi; align-items: stretch; padding: 2.3cqi 3.6cqi 2.3cqi 3.4cqi; min-height: 41.4cqi; border-top: max(1.5px, 0.26cqi) solid #c4321c; border-bottom: max(1.5px, 0.26cqi) solid #c4321c; background: linear-gradient(96deg, #f1f1f1 0%, #e3e3e3 36%, #c9c9c9 72%, #b9b9b9 100%); }
.gm-k-foto { align-self: start; width: 22.2cqi; aspect-ratio: 207 / 329; background: #ddd; }
.gm-k-foto svg { display: block; width: 100%; height: 100%; }
.gm-k-daten { margin: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 0.2em; font-size: clamp(11.5px, 3.4cqi, 17.5px); line-height: 1.3; color: #111; }
.gm-k-daten div { margin: 0; }
.gm-k-daten dt { display: inline; font-weight: 700; }
.gm-k-daten dd { display: inline; margin: 0; }
.gm-k-fuss { height: 8.9cqi; flex: none; }

/* Fragen */

.gm .a-option { font-size: 16.5px; }
.gm .a-option.gewaehlt .a-buchstabe { background: var(--akzent); color: #fff; }

/* Merkzeit */

/* Auswertung */

.gm .ok { --ton: #3f7d4c; --hauch: #e5f0e6; }
.gm .nein { --ton: #c0392b; --hauch: #f8e6e3; }
.gm .offen { --ton: var(--t-muted); --hauch: var(--t-flaeche2); }
@media (prefers-color-scheme: dark) {
  .gm .ok { --ton: #86c093; --hauch: #23382a; }
  .gm .nein { --ton: #ec8a7d; --hauch: #43231f; }
}

@keyframes gm-blink { from { box-shadow: 0 0 0 3px var(--akzent); } }