/* App-Shell: Kopfleiste, Inhaltsbereich, Tab-Leiste. Sicherheitsabstände über --safe-area-inset-* (Capacitor SystemBars). */
:root {
  --inset-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --inset-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --inset-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --inset-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}

.app {
  min-height: 100dvh;
  padding-left: var(--inset-left);
  padding-right: var(--inset-right);
}

/* Kopfleiste: Glas wie die Topbar der Website, kompakt */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: var(--inset-top);
  background: var(--c-bar-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}
.appbar-inner {
  max-width: var(--size-max-content);
  margin: 0 auto;
  min-height: var(--size-appbar);
  padding: 0 var(--space-2) 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.appbar-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  display: grid;
  place-items: center;
  color: var(--c-on-primary);
  box-shadow: var(--shadow-sm);
}
.appbar[data-depth="0"] .back {
  display: none;
}
/* Suche über alles (ADR-0038): Symbol in der Kopfzeile; ausgeblendet auf dem Suchbildschirm selbst und in Prüfungen */
.appbar[data-screen="search"] .search,
.appbar[data-screen="learnExam"] .search {
  display: none;
}

.view {
  max-width: var(--size-max-content);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--size-tabbar) + var(--inset-bottom) + var(--space-7));
  outline: none;
}
.view-enter {
  animation: view-in var(--motion-slow) var(--motion-easing) both;
}
@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Tab-Leiste: eigene Gestaltung (keine Material-Navigation) */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: var(--space-2) calc(var(--space-3) + var(--inset-right)) calc(var(--space-2) + var(--inset-bottom)) calc(var(--space-3) + var(--inset-left));
  background: var(--c-bar-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
}
.tabbar-inner {
  max-width: var(--size-max-content);
  margin: 0 auto;
  display: grid;
  /* fünf Bereiche seit dem Begleitersystem; Spalten aus der Zahl der Tabs */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
}
.tab {
  position: relative;
  min-height: var(--size-touch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--c-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab svg {
  width: var(--size-icon);
  height: var(--size-icon);
}
.tab:active {
  transform: scale(var(--motion-press));
}
.tab[aria-current="page"] {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}
.tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 28px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
}

@media (min-width: 600px) {
  .view {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .tab {
    flex-direction: row;
    gap: var(--space-2);
    font-size: 0.875rem;
  }
}

/* fünf Tabs auf schmalen Telefonen: Beschriftung etwas kleiner, damit „Einstellungen“ ganz lesbar bleibt */
@media (max-width: 440px) {
  .tab {
    padding-inline: 0;
    font-size: 0.625rem;
    letter-spacing: -0.02em;
  }
}