/* Familienleiste und breites Raster. Dieselbe Datei liegt in grit/, myo/, kept/, plated/ und apps/.
   Eine Änderung gehört in alle fünf (Test: tests/test_familie.py). Farben kommen aus dem Stil der Seite.
   Links die App-Icons, sie führen in den Baum auf apps.linusfritz.com. Rechts die Schalter, immer
   in derselben Reihenfolge: Plattform, Sprache, Anmelden. Anmelden steht ganz rechts (R1.2). */
.familie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  max-width: 42rem; margin: 0 auto; padding: 8px 0;
  border-bottom: 1px solid var(--linie);
}
.familie > a { margin: 0; line-height: normal; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 12px; }
.familie img { display: block; width: 32px; height: 32px; border-radius: 8px; }
.familie a.hier img { outline: 2px solid var(--akzent-text); outline-offset: 2px; }
.familie .alle { padding: 0 8px; color: var(--nebentext); font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.familie .alle:hover { color: var(--text); }
.leiste-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Schalter in der Leiste: Umschalter nach R3.4.6, Wahl 44 hoch. */
.familie .umschalter { display: inline-flex; gap: 2px; padding: 2px; background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; }
.familie .umschalter button {
  min-height: 40px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text); font: inherit; font-size: 0.9375rem; cursor: pointer;
}
.familie .umschalter button[aria-pressed="true"] { background: var(--text); color: var(--grund); font-weight: 600; }

/* Anmelde-Leiste in der Familienleiste: Farben der Familie, Tippziel 44 (R1.3). */
.familie .sso-leiste.sso-eingebettet { color: var(--nebentext); font-size: 0.8125rem; }
.familie .sso-leiste button {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--text); font-size: 0.9375rem;
}
.familie .sso-leiste button:hover { background: var(--karte); filter: brightness(0.97); }
.familie .sso-leiste button:focus-visible { outline: 2px solid var(--akzent-text); }

/* Handy: Schalter immer in der zweiten Zeile rechts, auf jeder Seite gleich. */
@media (max-width: 600px) {
  .leiste-rechts { flex-basis: 100%; justify-content: flex-end; }
}

/* Großer Bildschirm: Spalten statt Breite (R1.6). Links der Kopf mit Store-Knopf,
   rechts die Abschnitte als Karten in so vielen Spalten, wie Platz ist. Zeilen bleiben unter 42 rem. */
@media (min-width: 1024px) {
  .familie { max-width: none; width: 100%; margin: 0; padding: 8px 0; }
  body:not(.mit-leiste):has(> main.raster) {
    display: grid; grid-template-columns: 18rem minmax(0, 1fr); column-gap: 48px;
    align-items: start; padding: 0 32px 48px;
  }
  body:has(> main.raster) > .familie { grid-column: 1 / -1; }
  body:has(> main.raster) > header { grid-column: 1; position: sticky; top: 24px; max-width: none; margin: 0; padding-top: 32px; }
  body:has(> main.raster) > header nav a { display: flex; align-items: center; margin: 0; }
  body:has(> main.raster) > .sehne { display: none; }
  body:has(> main.raster) > footer { grid-column: 2; max-width: none; margin: 0; }
  main.raster {
    grid-column: 2; max-width: none; margin: 0; padding-top: 32px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 24px; align-items: start;
  }
  main.raster > .abschnitt { background: var(--karte); border-radius: 16px; padding: 24px; }
  main.raster > .abschnitt > :first-child { margin-top: 0; }
  main.raster > .abschnitt > :last-child { margin-bottom: 0; }
  main.raster > .abschnitt .karte { background: var(--grund); margin: 16px 0; }
  main.raster > .abschnitt.voll { grid-column: 1 / -1; }
  main.raster p, main.raster li { max-width: 42rem; }

  /* Grit: Seitenleiste links, Abschnitte rechts als Karten. Anker bleiben, der App Store zeigt darauf. */
  body.mit-leiste { padding: 0 32px; }
  body.mit-leiste .layout { max-width: none; grid-template-columns: 13rem minmax(0, 1fr); justify-content: stretch; }
  body.mit-leiste .layout main { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 24px; align-items: start; }
  body.mit-leiste .layout main > .sehne { display: none; }
  body.mit-leiste .layout main > section { background: var(--karte); border-radius: 16px; padding: 24px; }
  body.mit-leiste .layout main > section .karte { background: var(--grund); }
  body.mit-leiste .layout main > #start, body.mit-leiste .layout main > footer { grid-column: 1 / -1; }
  body.mit-leiste .layout main > #start { background: transparent; padding: 0; }
}