/* ------------------------------ Seite /gedaechtnis-und-merkfaehigkeit (gmr-) */
/* Nur für landing/seiten/gedaechtnis-und-merkfaehigkeit.mjs. Farben über die
   Ratgeber-Variablen (--r-…, --akzent), damit der Dunkelmodus mitläuft. */

.r-band .gmr-mitte { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }

.r-band .gmr-bildtitel { display: block; margin: 0 0 14px; font: 700 12.5px/1.2 "Work Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--r-leise); }

/* Porträt des Beispielausweises (klein in Fragekarten, groß neben der Geschichte) */

/* Gewicht der KFF-Untertests */
.gmr-gewicht { margin: 30px 0 8px; padding: 26px 28px 20px; border-radius: 22px; background: var(--r-hell); }
.gmr-g-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.r-band .gmr-g-liste li { display: grid; grid-template-columns: 250px minmax(0, 1fr) 64px; align-items: center; gap: 16px; padding: 7px 0; font: 500 15.5px/1.35 "Work Sans", sans-serif; color: var(--r-kopf); }
.r-band .gmr-g-liste li.an { font-weight: 700; }
.gmr-g-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--r-kopf) 25%, transparent); text-underline-offset: 3px; }
.gmr-g-link:hover { color: var(--akzent-tief); text-decoration-color: currentColor; }
.gmr-g-bahn { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--r-kopf) 7%, transparent); overflow: hidden; }
.gmr-g-bahn i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--r-kopf) 26%, transparent); }
.gmr-g-liste li.an .gmr-g-bahn i { background: var(--akzent); }
.gmr-g-wert { text-align: right; font: 800 17px/1 "Manrope", sans-serif; letter-spacing: -0.02em; color: var(--r-kopf); font-variant-numeric: tabular-nums; }
.gmr-g-liste li.an .gmr-g-wert { color: var(--akzent); }

/* Zeitleiste Einprägen → Zahlenfolgen → Wortflüssigkeit → Abruf */
.gmr-zeit { margin: 34px 0 30px; }
.gmr-z-raster { display: grid; column-gap: 6px; row-gap: 10px; }
.gmr-z-klammer { grid-column: 2 / 4; grid-row: 1; text-align: center; font: 600 14px/1.3 "Work Sans", sans-serif; color: var(--r-leise); }
.gmr-z-klammer::after { content: ""; display: block; height: 10px; margin: 7px 3px 0; border: 1.5px solid color-mix(in srgb, var(--r-kopf) 30%, transparent); border-bottom: 0; border-radius: 8px 8px 0 0; }
.gmr-z-phase { grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.gmr-z-balken { display: block; height: 14px; border-radius: 7px; margin-bottom: 14px; background: color-mix(in srgb, var(--r-kopf) 15%, transparent); }
.gmr-z-phase.gm .gmr-z-balken { background: var(--akzent); }
.r-band .gmr-z-phase b { font: 800 28px/1 "Manrope", sans-serif; letter-spacing: -0.04em; color: var(--r-kopf); white-space: nowrap; }
.r-band .gmr-z-phase.gm b { color: var(--akzent); }
.r-band .gmr-z-phase strong { margin-top: 8px; font: 800 16px/1.25 "Manrope", sans-serif; letter-spacing: -0.01em; }
.gmr-z-text { margin-top: 2px; font: 300 14.5px/1.4 "Work Sans", sans-serif; color: var(--r-leise); }
.gmr-zeit figcaption { margin-top: 18px; font: 300 13.5px/1.5 "Work Sans", sans-serif; color: var(--r-leise); }

/* Aufbau eines Ausweises: Karte + Feldliste */
.gmr-aufbau { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin: 34px 0 30px; }
.gmr-aufbau .gmr-karte { width: 100%; max-width: 520px; justify-self: end; }
.gmr-felder { margin: 0; max-width: 460px; }
.gmr-felder div { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--r-linie); }
.gmr-felder div:first-child { border-top: 1px solid var(--r-linie); }
.gmr-felder dt { font: 700 15px/1.45 "Manrope", sans-serif; color: var(--r-kopf); hyphens: manual; }
.gmr-felder dd { margin: 0; font: 300 15.5px/1.5 "Work Sans", sans-serif; color: var(--r-text); }

/* Fragearten */

/* Merktechnik: drei Teile */

/* Merk-System: Ziffern, Blutgruppe, Monate */

/* Durchgespielt: Feld → Angabe → Bild */

/* Die Geschichte zum Beispiel */

/* Breite Bildschirme: die drei Teile der Merktechnik dürfen aus der Textspalte ragen */

@media (max-width: 760px) {
  .gmr-gewicht { padding: 20px 18px 16px; }
  .r-band .gmr-g-liste li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name wert" "bahn bahn"; gap: 6px 12px; padding: 8px 0; font-size: 15px; }
  .gmr-g-name { grid-area: name; }
  .gmr-g-wert { grid-area: wert; }
  .gmr-g-bahn { grid-area: bahn; height: 10px; }

  .gmr-aufbau { grid-template-columns: 1fr; gap: 26px; }
  .gmr-aufbau .gmr-karte { justify-self: center; }
  .gmr-felder { max-width: none; }
  .gmr-felder div { grid-template-columns: 122px minmax(0, 1fr); gap: 10px; }
  .gmr-felder dt { font-size: 14.5px; }
  .gmr-felder dd { font-size: 15px; }

  
  
  
  
  
  
  
  
}

@media (max-width: 600px) {
  .gmr-z-raster { grid-template-columns: 1fr !important; row-gap: 16px; }
  .gmr-z-klammer { grid-column: auto; grid-row: auto; order: 4; justify-self: start; padding: 7px 14px; border-radius: 999px; background: var(--r-weiss); font-size: 13.5px; }
  .gmr-z-klammer::after { display: none; }
  .gmr-z-phase { grid-row: auto; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .gmr-z-balken { grid-column: 1 / -1; grid-row: 1; width: calc(var(--min) * 5%); height: 10px; margin-bottom: 10px; }
  .r-band .gmr-z-phase b { grid-column: 1; grid-row: 2 / span 2; font-size: 24px; }
  .r-band .gmr-z-phase strong { grid-column: 2; grid-row: 2; margin-top: 0; }
  .gmr-z-text { grid-column: 2; grid-row: 3; }

  
  

  
  
  
  
  
  
  
}