/* Handy und Tablet teilen dieselbe Schale: keine Seitenleiste, Navigation
   unten. Die Grenze liegt bei 1024px — vorher lag sie bei 721px und der
   Uebergang halbierte die nutzbare Inhaltsbreite von 688px auf 441px, weil die
   Seitenleiste genau dort erschien, wo der Platz am knappsten ist. */
@media (max-width: 1023px) {
  .sidebar { display: none; }
  /* Ausnahme von der Abstandsskala: kein Rhythmuswert, sondern ein gemessener
     Freiraum. 74px reichten für die reine Leiste. Gemessen: die Leiste ist 71px
     hoch, der schwebende Knopf endet 81px über dem Rand — ohne diese Erhöhung
     läge die letzte Zeile darunter. */
  .workspace { margin-left: 0; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .mobile-nav {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    display: grid;
    /* Vier Ziele plus der 56px-Knopf in der Mitte. Gemessen bei 320px:
       304px Innenbreite − 56px = 248px für vier Ziele = 62,0px je Ziel.
       Mit fünf Zielen blieben 49,6px — die Beschriftung "Buchungen" misst
       57,2px und wäre gekürzt worden. "Mehr" steht deshalb in der Kopfzeile. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) 56px repeat(2, minmax(0, 1fr));
    align-items: center;
    padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(18px);
    pointer-events: auto;
    touch-action: manipulation;
  }
  .mobile-nav a {
    display: flex;
    min-height: 51px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    position: relative;
    z-index: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mobile-nav svg { width: 21px; height: 21px; }
  .mobile-nav a[aria-current="page"] { color: var(--accent-ink); }
  /* Beschriftung darf nicht in die Nachbarspalte laufen: bei 320px ist eine
     Zelle 62,0px breit, die längste Beschriftung "Buchungen" misst 57,2px.
     Was darüber hinausginge, wird gekürzt statt umgebrochen. */
  .mobile-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 56px rund, mittig, optisch erhoben: gemessen ragt der Knopf 10px über die
     71px hohe Leiste hinaus, damit er nicht als fünfter Navigationseintrag
     gelesen wird. */
  .mobile-fab {
    display: grid;
    width: 56px;
    height: 56px;
    justify-self: center;
    place-items: center;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-float);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    cursor: pointer;
    transform: translateY(-18px);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .topbar-add-expense { display: none; }
  /* Dasselbe Zahnrad wie in der Seitenleiste am Desktop. Vorher standen hier
     drei Punkte — ein Zeichen, das „mehr Optionen" bedeuten soll und in der
     Praxis niemandem sagt, dass dahinter die Einstellungen liegen. */
  .topbar-more { display: inline-flex; }
  /* Abmelden zieht in die Liste unter „Mehr". Mit vier 44px-Zielen plus
     Synchronisierungsabzeichen blieben dem Seitentitel bei 320px gemessene
     29px — mit dreien sind es 81px. */
  #sign-out { display: none; }
  /* Über der Leiste liegen Toast (z-index 80) und Update-Hinweis (85), beide
     also über dem Knopf (im Fluss der Leiste, z-index 30). Gemessen endet die
     Knopf-Oberkante 81px über dem Bildschirmrand; 78px wie bisher hätten den
     Toast quer über den Knopf gelegt. */
  .toast-region { right: 14px; bottom: calc(96px + env(safe-area-inset-bottom)); left: 14px; }
  .update-prompt {
    right: 14px;
    bottom: calc(102px + env(safe-area-inset-bottom));
    left: 14px;
    justify-content: space-between;
  }
}

/* Tablet: die Breite ist da, also zwei Spalten statt einer. Zwischen 721px und
   1020px gab es bisher gar keine Behandlung — die Seite lief mit den
   Desktop-Rastern auf einer halbierten Breite. */
@media (min-width: 721px) and (max-width: 1023px) {
  /* Der Seitenabstand waechst mit der Breite, startet aber beim Handywert:
     bei 721px blieben mit festen 32px nur 657px nutzbar — weniger als die 688px
     bei 720px. Mit dieser Kurve sind es 689px und danach mehr. */
  #app-content { padding: 0 clamp(var(--space-4), 2vw, var(--space-6)) var(--space-7); }
  .topbar { padding: calc(var(--space-6) + env(safe-area-inset-top)) clamp(var(--space-4), 2vw, var(--space-6)) var(--space-5); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .household-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .topbar { padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--space-4) var(--space-4); }
  /* Der Seitentitel gibt in der Kopfzeile als Erstes nach. Gemessen bei 320px
     mit sichtbarem Synchronisierungsabzeichen waren es 81px, und bei 2rem stand
     dort "Buc…". Mit kleinerem Abzeichen (89,6px Platz) und 1,05rem misst
     "Buchungen" 86,3px und passt vollständig. */
  .topbar h1 { font-size: var(--text-md); }
  .sync-badge { max-width: 30vw; padding: var(--space-2) var(--space-2); font-size: var(--text-xs); }
  #app-content { padding: 0 var(--space-4) var(--space-5); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .metric-card { min-height: 124px; }
  .metric-label { margin-bottom: var(--space-4); font-size: var(--text-xs); }
  .metric-value { font-size: var(--text-lg); }
  .section-heading { align-items: center; margin-bottom: var(--space-4); }
  .section-heading p { display: none; }
  /* Eine Begriffserklaerung ist kein Beiwerk: sie bleibt auch schmal stehen. */
  .section-heading p.section-definition { display: block; }
  .empty-state { min-height: 190px; padding: var(--space-5) var(--space-4); }
  .welcome-card {
    min-height: 390px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: var(--space-6) var(--space-5);
  }
  .welcome-card h2 { font-size: clamp(var(--text-2xl), 12vw, var(--text-3xl)); }
  .welcome-card .primary-button { width: 100%; margin-top: var(--space-1); }
  .welcome-icon { margin-bottom: var(--space-7); }
  .quick-action-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .quick-action { min-height: 88px; padding: var(--space-4); }
  .household-summary { min-height: 150px; padding: var(--space-5) var(--space-4); }
  .household-grid { grid-template-columns: minmax(0, 1fr); }
  /* Der frühere Überstand von -2px war auf 14px Seitenabstand abgestimmt. Mit
     16px aus der Abstandsskala fluchtet die Reiterleiste ohne Überstand mit den
     Karten darüber und darunter. */
  .transaction-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-2) 0; }
  .transaction-amount { grid-column: 3; grid-row: 1; }
  /* Nur die Buchungszeile: ungebunden traf die Regel jedes .row-actions in
     einem Grid-Elternteil und gab u. a. der .goal-card eine dritte Spalte
     (min-content 359px). */
  .transaction-row .row-actions { grid-column: 2 / 4; justify-content: flex-end; }
  .goal-card .row-actions { justify-content: flex-end; }
  /* Eine Stufe schmaler auf kleinen Bildschirmen — aber fuer ALLE Kaesten
     gleich, nicht nur fuer diesen einen. */
  .card,
  .cashflow-toolbar { padding: var(--space-4); }
  .cashflow-toolbar { align-items: stretch; flex-direction: column; }
  /* Auf dem Telefon steht jedes Filterfeld allein in seiner Zeile. Punkt.
     Zweimal habe ich hier eine Schwelle geraten (9rem, dann 10rem) und beide
     Male passten auf Alex' iPhone rechnerisch zwei Spalten nebeneinander,
     waehrend das native Monatsfeld breiter war als seine Spalte und sich
     ueber das Nachbarfeld schob. Der Grund ist nicht die Schwelle, sondern
     dass ich die Mindestbreite des nativen Bedienelements nicht kenne: iOS
     schreibt „August 2026", Chrome schreibt „2026-08", und gemessen wird bei
     mir in Chrome. Eine Schwelle, die ich nicht messen kann, darf nicht
     ueber das Layout entscheiden — deshalb eine feste Spalte bis 720px. */
  .filter-row,
  .cashflow-filters,
  /* Gleiche Spezifitaet wie die Desktop-Regel in app.css, sonst gewinnt die
     dort trotz Media Query. */
  .expenses-filters .filter-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); max-width: none; }
  .filter-row .month-field,
  .cashflow-filters .month-field { width: 100%; min-width: 0; }
  .filter-row label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Der Monatsname ist die Überschrift der Seite und darf nicht mit dem
     Auswahlfeld um Platz ringen. */
  .cashflow-toolbar h2 { font-size: var(--text-xl); }
  .toolbar-heading { margin-bottom: var(--space-1); }
  .expenses-toolbar { display: block; padding: var(--space-5) var(--space-4); }
  .expenses-toolbar > div:first-child { min-width: 0; }
  .expenses-toolbar h1 { font-size: var(--text-2xl); white-space: nowrap; }
  .expenses-toolbar .muted { max-width: 30ch; }
  /* Filter über die volle Breite, darunter die beiden Erfassungsknöpfe
     nebeneinander — gemessen 122,0px je Knopf bei 320px. */
  .expenses-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
  .expenses-actions select { min-width: 0; width: 100%; grid-column: 1 / -1; }
  .expenses-actions .primary-button, .expenses-actions .secondary-button { white-space: nowrap; }
  .month-field { width: 100%; }
  .asset-total-card { min-height: 230px; align-items: stretch; flex-direction: column; justify-content: flex-end; }
  .asset-total-card .primary-button { width: 100%; }
  .asset-grid { grid-template-columns: minmax(0, 1fr); }
  .closing-summary { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .goal-card dl, .checkbox-grid { grid-template-columns: minmax(0, 1fr); }
  .planner-task { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .planner-task .row-actions { grid-column: 2; justify-content: flex-start; }
  .dashboard-toolbar { align-items: stretch; flex-direction: column; }
  .dashboard-toolbar p { display: none; }
  .dashboard-toolbar .secondary-button { width: 100%; }
  .donut-chart { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .donut-chart figcaption { width: 100%; }
  .line-chart svg { height: 180px; }
  .toast { text-align: center; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal {
    width: 100%;
    max-height: min(86vh, 760px);
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

@media (max-width: 390px) {
  .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-card { min-height: 108px; }
}