/*
 * Grundlage: Rücksetzen, Seite, Rahmen der App (Kopf, Inhalt, Leiste).
 * Farben und Maße nur über var(--…) aus tokens.css. Bausteine stehen in components.css.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-ground);
  color: var(--color-ink);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd {
  margin: 0;
}

/* Auch gegen display aus einer Klasse, z. B. ein verstecktes .field */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprung zum Inhalt: erstes Element der Seite, nur sichtbar, wenn er den Fokus hat */

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
  transform: none;
}

/* Rahmen */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app__main {
  flex-grow: 1;
  width: 100%;
  padding: 8px var(--space-page) 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
}

/* Am Handy löst sich der Rahmen um Gruppenkopf, Leiste und „Mein Zugang“ auf: Kopf oben, Leiste unten
 * (order), „Mein Zugang“ oben rechts im Kopf (beides in components.css). */
.app__sidebar {
  display: contents;
}

/*
 * Desktop ab 900 px (--breakpoint-desktop). Dieselben Elemente wie am Handy, nur anders angeordnet:
 * Gruppenkopf und Leiste werden zur weißen Leiste links, der Inhalt eine zentrierte Spalte,
 * 480 px breit, mit .app--wide (Kasse, Matrix) bis 720 px. Darunter bleibt alles wie oben.
 */
@media (min-width: 900px) {
  .app--sidebar {
    display: grid;
    grid-template-columns: var(--width-sidebar) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  /* Drei Zeilen: Kopf (Marke und Gruppenwechsel), Navigation, „Mein Zugang“ ganz unten. */
  .app__sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    padding: 24px 16px;
    background: var(--color-card);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    row-gap: 24px;
  }

  .app__sidebar > .app-header {
    height: auto;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
  }

  /* order: 0 hebt das Umstellen der Leiste nach unten (Handy) wieder auf */
  .app__sidebar > .tab-bar {
    order: 0;
  }

  .app__sidebar > .account-link {
    align-self: end;
  }

  .app--sidebar > .page-header,
  .app--sidebar > .app__main {
    grid-column: 2;
  }

  .app--sidebar > .page-header {
    grid-row: 1;
  }

  .app--sidebar > .app__main {
    grid-row: 2;
  }

  /* Die Spalte: Seitenkopf und Inhalt gleich breit, zentriert. */
  .app--sidebar > .page-header,
  .app--sidebar > .app__main {
    width: 100%;
    max-width: calc(var(--width-column) + 2 * var(--space-desktop));
    margin-inline: auto;
  }

  .app--wide > .page-header,
  .app--wide > .app__main {
    max-width: calc(var(--width-column-wide) + 2 * var(--space-desktop));
  }

  .app--sidebar > .app__main {
    padding: 32px var(--space-desktop);
  }

  .app--sidebar > .page-header {
    height: auto;
    padding: 32px calc(var(--space-desktop) + 4px) 6px;
  }

  .app--sidebar > .page-header + .app__main {
    padding-top: var(--space-stack);
  }

  .app--sidebar .page-header__title {
    font-size: 26px;
    letter-spacing: -0.02em;
  }

  /* Seiten ohne Leiste (Formulare, Login, Einladung, Mein Zugang, Gruppenauswahl): die Handy-Ansicht als
   * zentrierte Spalte. */
  .app:not(.app--sidebar) {
    max-width: calc(var(--width-column) + 2 * var(--space-page));
    margin-inline: auto;
    padding-top: 16px;
  }
}

/* Teile, die es nur am Handy oder nur ab 900 px gibt, etwa die Spalten 7 bis 12 der Matrix. display: none
 * nimmt sie auch Screenreadern weg, es zählt also immer nur eine der beiden Fassungen. */
@media (min-width: 900px) {
  .only-narrow {
    display: none !important;
  }
}

@media (max-width: 899.98px) {
  .only-wide {
    display: none !important;
  }
}