@layer reset, base, layout, components, utilities;

/* ============================================================
   Design-Tokens — abgemessen aus den Screenshots
   ============================================================ */
@layer reset {
  /* html braucht echte Spezifität, sonst überschreibt die :where()-Regel
     darunter den Startwert und alles fällt auf content-box zurück. */
  html {
    box-sizing: border-box;
  }

  /* Spezifität 0, damit einzelne Komponenten das jederzeit umstellen können. */
  :where(*, *::before, *::after) {
    box-sizing: inherit;
  }
}

@layer base {
  :root {
    color-scheme: dark;

    /* Tier 1 — Rohwerte */
    --black: #000000;
    --grey-900: #141416;
    --grey-850: #1b1b1d;
    --grey-800: #232325;
    --grey-750: #2b2b2e;
    --grey-700: #3a3a3d;
    --grey-400: #9a9aa0;
    --grey-300: #b6b6bb;
    --white: #ffffff;

    /* Tier 2 — semantisch (per Einstellungen überschreibbar) */
    --accent: #6b71f5;
    --positive: #35c98a;
    --negative: var(--white);

    /* Kursentwicklung — immer zusammen mit einem Vorzeichen benutzt,
       damit die Aussage nicht allein an der Farbe hängt. */
    --up: #35c98a;
    --down: #ff5f6d;

    /* Tier 3 — Oberflächen */
    --bg: var(--black);
    --surface: var(--grey-850);
    --surface-raised: var(--grey-750);
    --surface-pill: var(--grey-800);
    --text: var(--white);
    --text-muted: var(--grey-400);
    --hairline: rgb(255 255 255 / 0.07);

    /* Maße */
    --app-width: 27.5rem;      /* 440px — Breite der App-Spalte */
    --radius-card: 1.5rem;     /* 24px */
    --radius-pill: 999px;
    --row-icon: 3rem;          /* 48px Merchant-Kreis */
    --gutter: 1.25rem;
    --nav-height: 4.5rem;

    /* Gradient-Interpolation nur wenn unterstützt */
    --in-oklab: ;
  }

  @supports (background: linear-gradient(in oklab, white, black)) {
    :root { --in-oklab: in oklab; }
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-block-size: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI Variable Display", "Segoe UI", -apple-system,
      BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, p, figure {
    margin: 0;
  }

  button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
  }

  a {
    color: var(--accent);
    text-decoration: none;
  }

  img {
    max-inline-size: 100%;
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

/* ============================================================
   Grundgerüst: zentrierte App-Spalte auf schwarzem Grund
   ============================================================ */
@layer layout {
  .app {
    position: relative;
    inline-size: min(100%, var(--app-width));
    margin-inline: auto;
    min-block-size: 100dvh;
    padding-inline: var(--gutter);
    padding-block-end: calc(var(--nav-height) + 2.5rem + env(safe-area-inset-bottom));
    isolation: isolate;
  }

  /* Das diffuse Leuchten, das im Original schräg von oben rechts
     über den Kopfbereich bis in die Transaktionsliste läuft. */
  .app::before {
    content: "";
    /* absolut statt fixed: bleibt so auf die App-Spalte begrenzt und
       leuchtet auf breiten Fenstern nicht über den ganzen Bildschirm */
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 100dvh;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(55% 32% at 90% 1% var(--in-oklab),
        rgb(255 255 255 / 0.26), transparent 68%),
      radial-gradient(70% 42% at 58% 10% var(--in-oklab),
        rgb(255 255 255 / 0.11), transparent 72%),
      radial-gradient(95% 55% at 8% 26% var(--in-oklab),
        rgb(255 255 255 / 0.05), transparent 76%);
    /* nach allen Seiten weich ins Schwarz auslaufen, damit auf breiten
       Fenstern keine sichtbare Kante an der Spalte entsteht */
    /* Radius genau auf die Elementbreite: am Rand ist die Maske bei 0,
       sonst zeichnet sich auf breiten Fenstern eine Kante ab. */
    mask-image: radial-gradient(100% 62% at 50% 0% var(--in-oklab),
      #000 25%, transparent 100%);
  }

  .topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem 0.5rem;
  }

  .stack {
    display: grid;
    gap: 0.75rem;
  }
}

/* ============================================================
   Komponenten
   ============================================================ */
@layer components {

  /* ---------- Kopfzeile ---------- */
  .avatar {
    inline-size: 2.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg var(--in-oklab), #c9a37a, #8c6a4a);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--white);
  }

  .avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Ein Logo wird nicht beschnitten wie ein Profilfoto, sondern
     vollständig und mit etwas Luft im Kreis gezeigt. */
  .avatar img.is-logo {
    object-fit: contain;
    padding: 22%;
  }

  .avatar:has(img.is-logo) {
    background: var(--grey-800);
  }

  .search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 2.75rem;
    padding-inline: 1rem;
    border-radius: var(--radius-pill);
    background: var(--grey-800);
    color: var(--text-muted);
    font-size: 1.0625rem;
  }

  .search svg {
    inline-size: 1.25rem;
    flex: none;
  }

  .icon-btn {
    inline-size: 2.75rem;
    aspect-ratio: 1;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grey-800);
    color: var(--text);
    transition: background 0.15s ease;
  }

  .icon-btn:hover:not(:disabled) {
    background: var(--grey-750);
  }

  .icon-btn svg {
    inline-size: 1.375rem;
  }

  /* ---------- Kontostand ---------- */
  .balance {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding-block: 5.5rem 0;
    text-align: center;
  }

  .balance__label {
    font-size: 1.0625rem;
    color: var(--grey-300);
  }

  .balance__amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    font-size: clamp(3rem, 2rem + 8vw, 4.25rem);
  }

  .balance__cents {
    font-size: 0.5em;
    letter-spacing: -0.01em;
    align-self: flex-end;
    padding-block-end: 0.12em;
  }

  .balance__pill {
    margin-block-start: 1.75rem;
    min-block-size: 2.5rem;
    padding-inline: 1.5rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.14);
    font-size: 1.0625rem;
    font-weight: 500;
    transition: background 0.15s ease;
  }

  .balance__pill:hover {
    background: rgb(255 255 255 / 0.2);
  }

  /* ---------- Aktionsknöpfe ---------- */
  .actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding-block: 2.25rem 1.5rem;
  }

  .action {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);   /* auch wenn die Aktion ein Link ist */
  }

  .action__circle {
    inline-size: 3.5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    transition: background 0.15s ease, scale 0.15s ease;
  }

  .action:hover .action__circle {
    background: rgb(255 255 255 / 0.24);
  }

  .action:active .action__circle {
    scale: 0.94;
  }

  .action__circle svg {
    inline-size: 1.5rem;
  }

  /* ---------- Karten-Gruppe (Transaktionen, Einstellungen) ---------- */
  .card {
    border-radius: var(--radius-card);
    background: var(--surface);
    overflow: clip;
  }

  .card--glass {
    background: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(20px);
  }

  .card__footer {
    display: block;
    inline-size: 100%;
    padding-block: 1.125rem;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--text);
    transition: background 0.15s ease;
  }

  .card__footer:hover {
    background: rgb(255 255 255 / 0.04);
  }

  /* ---------- Transaktionszeile ---------- */
  .tx {
    display: grid;
    grid-template-columns: var(--row-icon) 1fr auto;
    align-items: center;
    gap: 1rem;
    inline-size: 100%;
    padding: 0.875rem 1.125rem;
    text-align: start;
    transition: background 0.15s ease;
  }

  .tx:hover {
    background: rgb(255 255 255 / 0.045);
  }

  .tx__logo {
    inline-size: var(--row-icon);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--grey-800);
    display: grid;
    place-items: center;
  }

  .tx__logo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .tx__logo img.is-inverted {
    filter: invert(1);
  }

  .tx__logo--letter {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
  }

  /* Mittlere Spalte darf schrumpfen, damit lange Namen umbrechen */
  .tx > span {
    min-inline-size: 0;
  }

  .tx__name {
    display: block;
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
  }

  .tx__meta {
    display: block;
    margin-block-start: 0.125rem;
    font-size: 1rem;
    color: var(--text-muted);
  }

  .tx__amount {
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .tx__amount.is-positive {
    color: var(--positive);
  }

  /* Hervorgehobene Zeile (anstehende Zahlung) */
  .tx--pending {
    background: rgb(255 255 255 / 0.09);
    border-radius: var(--radius-card);
  }

  /* ---------- Datums-Kopfzeile in der Liste ---------- */
  .daygroup {
    display: grid;
    gap: 0.625rem;
  }

  .daygroup__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 0.25rem;
    padding-block-start: 1.5rem;
  }

  .daygroup__date {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .daygroup__sum {
    font-size: 1.0625rem;
    color: var(--text-muted);
  }

  /* ---------- Navigation: unten als Leiste (mobil) ---------- */
  .nav {
    position: fixed;
    inset-block-end: calc(0.75rem + env(safe-area-inset-bottom));
    inset-inline: 0;
    z-index: 20;
    inline-size: min(100% - 1.5rem, calc(var(--app-width) - 0.5rem));
    margin-inline: auto;
    padding: 0.5rem;
    border-radius: var(--radius-pill);
    background: rgb(30 30 32 / 0.82);
    backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.5);
  }

  .nav__items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
  }

  /* Marke und Fußbereich gehören zur Seitenspalte */
  .nav__brand,
  .nav__foot {
    display: none;
  }

  .nav__item {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    padding-block: 0.5rem 0.375rem;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    min-block-size: 2.75rem;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .nav__item svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  /* Das eigene Logo an Stelle des Home-Zeichens */
  .nav__logo {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    display: grid;
    place-items: center;
  }

  .nav__logo img {
    /* Die Symbole daneben lassen im 24er-Feld ringsum Luft. Ein randloses
       Logo wirkt sonst deutlich größer — deshalb auf knapp drei Viertel. */
    max-inline-size: 72%;
    max-block-size: 72%;
    object-fit: contain;
    /* außerhalb der aktiven Seite genauso zurückgenommen wie die Symbole */
    opacity: 0.55;
    transition: opacity 0.15s ease;
  }

  .nav__item[aria-current="page"] .nav__logo img,
  .nav__item:hover .nav__logo img {
    opacity: 1;
  }

  .nav__item:hover {
    color: var(--grey-300);
  }

  /* Die aktive Seite hebt sich allein über Schrift und Symbol ab —
     kein Hintergrund, die übrigen bleiben ausgegraut. */
  .nav__item[aria-current="page"] {
    color: var(--white);
  }

  .nav__item[aria-current="page"] svg {
    /* etwas kräftigere Linien, damit das Symbol genauso deutlich wirkt
       wie die Beschriftung */
    stroke-width: 2.2;
  }

  .nav__label {
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- Detail-Sheet ---------- */
  .sheet {
    inline-size: min(100%, var(--app-width));
    max-inline-size: none;
    /* Oben ein Spalt frei, damit die runden Ecken sichtbar bleiben — und
       mindestens so viel Abstand, dass Statusleiste bzw. Dynamic Island
       den Schließen-Knopf nicht überdecken. */
    --sheet-top: max(0.5rem, env(safe-area-inset-top));
    block-size: calc(100dvh - var(--sheet-top));
    max-block-size: none;
    margin: var(--sheet-top) auto 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden auto;
    scrollbar-width: none;

    /* Ausgangs-/Endzustand für die Animation */
    opacity: 0;
    translate: 0 2rem;
    transition-property: opacity, translate, display, overlay;
    transition-duration: 0.28s;
    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
    transition-behavior: allow-discrete;
  }

  .sheet::-webkit-scrollbar {
    display: none;
  }

  /* Das Sheet wird beim Öffnen selbst fokussiert (tabindex="-1"), damit der
     Fokus im Dialog liegt, ohne dass der Schließen-Knopf einen Ring bekommt.
     Sichtbaren Fokus behalten alle Bedienelemente darin. */
  .sheet:focus {
    outline: none;
  }

  .sheet[open] {
    opacity: 1;
    translate: 0 0;

    @starting-style {
      opacity: 0;
      translate: 0 2rem;
    }
  }

  .sheet::backdrop {
    background: rgb(0 0 0 / 0);
    transition:
      display 0.28s allow-discrete,
      overlay 0.28s allow-discrete,
      background-color 0.28s ease;
  }

  .sheet[open]::backdrop {
    background: rgb(0 0 0 / 0.6);
    backdrop-filter: blur(2px);

    @starting-style {
      background: rgb(0 0 0 / 0);
    }
  }

  /* Sheet ohne Marken-Verlauf, z. B. Einzahlen oder Bestätigen */
  .sheet--compact {
    block-size: auto;
    max-block-size: min(90dvh, 44rem);
    margin-block: auto;
    border-radius: var(--radius-card);
  }

  .sheet__bar--plain {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding: 0.875rem var(--gutter);
    background: var(--bg);
  }

  .sheet__title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* Platzhalter, damit der Titel mittig bleibt */
  .icon-btn.is-ghost {
    background: none;
    pointer-events: none;
  }

  /* Kopf des Sheets mit Marken-Verlauf */
  .sheet__head {
    position: relative;
    padding: 1rem var(--gutter) 1.75rem;
    border-end-start-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
    background:
      radial-gradient(120% 90% at 50% -10% var(--in-oklab),
        var(--brand, var(--grey-700)), transparent 72%),
      linear-gradient(to bottom var(--in-oklab),
        color-mix(in oklab, var(--brand, var(--grey-700)) 55%, black),
        var(--bg));
  }

  .sheet__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sheet__bar .icon-btn {
    background: rgb(0 0 0 / 0.42);
    backdrop-filter: blur(8px);
  }

  .sheet__brand {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    padding-block-start: 1.75rem;
    text-align: center;
  }

  .sheet__logo {
    inline-size: 5.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--grey-800);
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 600;
  }

  .sheet__logo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .sheet__logo img.is-inverted {
    filter: invert(1);
  }

  .sheet__merchant {
    font-size: 1.0625rem;
    color: var(--white);
  }

  .sheet__amount {
    font-size: clamp(2.5rem, 1.75rem + 5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  .sheet__date {
    font-size: 1rem;
    color: var(--grey-300);
  }

  .sheet__body {
    display: grid;
    gap: 0.75rem;
    padding: 1rem var(--gutter) calc(3rem + env(safe-area-inset-bottom));
  }

  /* Aktions-Pills unter dem Betrag */
  .pillrow {
    display: flex;
    gap: 0.75rem;
    padding-block-start: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    /* am Rand ausbluten lassen wie in der App */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  .pillrow::-webkit-scrollbar {
    display: none;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    flex: none;
    min-block-size: 3rem;
    padding-inline: 1.25rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.16);
    font-size: 1.0625rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease;
  }

  .pill:hover {
    background: rgb(255 255 255 / 0.24);
  }

  .pill svg {
    inline-size: 1.25rem;
    flex: none;
  }

  /* ---------- Zeile Label / Wert (Detail + Einstellungen) ---------- */
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    inline-size: 100%;
    min-block-size: 3.5rem;
    padding: 0.875rem 1.125rem;
    text-align: start;
  }

  button.row,
  label.row,
  a.row {
    cursor: pointer;
    color: var(--text);   /* Zeilen-Links bleiben weiß, nicht akzentfarbig */
    transition: background 0.15s ease;
  }

  button.row:hover,
  label.row:hover,
  a.row:hover {
    background: rgb(255 255 255 / 0.045);
  }

  .card > .row:not(:last-child) {
    border-block-end: 1px solid var(--hairline);
  }

  .row__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    color: var(--text-muted);
  }

  .row__label svg {
    inline-size: 1.0625rem;
    flex: none;
    color: var(--text-muted);
  }

  .row__value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    text-align: end;
  }

  .row__value svg {
    inline-size: 1.125rem;
    flex: none;
  }

  .row__value--accent {
    color: var(--accent);
  }

  .row__value--muted {
    color: var(--text-muted);
  }

  .row__chevron {
    inline-size: 0.75rem;
    color: var(--text-muted);
  }

  .row--stacked {
    display: grid;
    justify-items: start;
    gap: 0.25rem;
  }

  /* Punkte-Wabe */
  .hex {
    inline-size: 1.25rem;
    color: var(--accent);
  }

  /* ---------- Schalter ---------- */
  .switch {
    appearance: none;
    inline-size: 3.25rem;
    block-size: 1.9375rem;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--grey-700);
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .switch::after {
    content: "";
    position: absolute;
    inset-block-start: 0.125rem;
    inset-inline-start: 0.125rem;
    inline-size: 1.6875rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
    transition: translate 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .switch:checked {
    background: var(--accent);
  }

  .switch:checked::after {
    translate: 1.3125rem 0;
  }

  /* ---------- Formularfelder (Einstellungen) ---------- */
  .field {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.125rem;
  }

  .card > .field:not(:last-child) {
    border-block-end: 1px solid var(--hairline);
  }

  .field__label {
    font-size: 0.9375rem;
    color: var(--text-muted);
  }

  .field input[type="text"],
  .field input[type="number"],
  .field input[type="password"],
  .field input[type="email"],
  .field input[type="date"],
  .field input[type="time"],
  .field select {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--hairline);
    border-radius: 0.875rem;
    background: var(--grey-800);
    color: var(--text);
    font: inherit;
    font-size: 1.0625rem;
  }

  .field input:focus-visible,
  .field select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  /* Logo-Ablage */
  .dropzone {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .dropzone:hover,
  .dropzone.is-dragover {
    background: rgb(255 255 255 / 0.05);
  }

  .dropzone input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .dropzone__preview {
    inline-size: 4.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--grey-800);
    border: 1px dashed var(--grey-700);
    display: grid;
    place-items: center;
    color: var(--text-muted);
  }

  .dropzone__preview img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .dropzone__preview:has(img) {
    border-style: solid;
    border-color: transparent;
  }

  .dropzone__title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 500;
  }

  .dropzone__hint {
    display: block;
    margin-block-start: 0.25rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    text-wrap: pretty;
  }

  /* Farbwahl */
  .swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
  }

  .swatch {
    inline-size: 2.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.12);
    transition: scale 0.15s ease;
  }

  .swatch[aria-pressed="true"] {
    box-shadow:
      inset 0 0 0 2px var(--bg),
      0 0 0 2px var(--swatch);
  }

  .swatch:hover {
    scale: 1.08;
  }

  .swatch--custom {
    position: relative;
    overflow: hidden;
    background: conic-gradient(
      from 0deg,
      #f5515f, #f7b733, #35c98a, #6b71f5, #b06bf5, #f5515f
    );
  }

  .swatch--custom input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    inline-size: 100%;
    block-size: 100%;
  }

  /* ---------- Vorschau auf der Einstellungsseite ---------- */
  .preview {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    padding: 1.25rem 1.25rem 1.75rem;
    text-align: center;
    background:
      radial-gradient(85% 60% at 70% 0% var(--in-oklab),
        rgb(255 255 255 / 0.13), transparent 70%),
      var(--surface);
  }

  .preview__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: start;
    margin-block-end: 1rem;
  }

  .preview__name {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .preview__label {
    font-size: 0.9375rem;
    color: var(--grey-300);
  }

  .preview__amount {
    display: flex;
    align-items: baseline;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .preview__cents {
    font-size: 0.5em;
    align-self: flex-end;
    padding-block-end: 0.12em;
  }

  .preview__pill {
    margin-block-start: 0.875rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.14);
    font-size: 0.9375rem;
    font-weight: 500;
  }

  /* ---------- Sekundäre Schaltflächen ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: 3.25rem;
    padding-inline: 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--grey-800);
    font-size: 1.0625rem;
    font-weight: 500;
    transition: background 0.15s ease;
  }

  .btn:hover {
    background: var(--grey-750);
  }

  .btn svg {
    inline-size: 1.25rem;
    flex: none;
  }

  .btn--primary {
    background: var(--accent);
    color: var(--white);
  }

  .btn--primary:hover {
    background: color-mix(in oklab, var(--accent) 85%, white);
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn--danger {
    color: #ff6b6b;
  }

  /* ---------- Seitentitel ---------- */
  .page-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-block: 0.75rem 1.5rem;
  }

  .page-head h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .section-title {
    padding: 1.5rem 0.25rem 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
  }

  /* ---------- Kurzmeldung ---------- */
  .toast {
    position: fixed;
    inset-block-end: calc(var(--nav-height) + 1.5rem + env(safe-area-inset-bottom));
    inset-inline: 0;
    z-index: 40;
    inline-size: fit-content;
    max-inline-size: calc(var(--app-width) - 3rem);
    margin-inline: auto;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-pill);
    background: rgb(240 240 245 / 0.95);
    color: #111;
    font-size: 0.9375rem;
    font-weight: 500;
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.45);
    opacity: 0;
    translate: 0 0.75rem;
    pointer-events: none;
    transition: opacity 0.2s ease, translate 0.2s ease;
  }

  .toast.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}

/* ============================================================
   Anmeldung und Einrichtung
   ============================================================ */
@layer components {
  /* Der Anmeldeschirm ist wie ein Detail-Sheet der App aufgebaut:
     Kopfbereich mit Marken-Verlauf, darunter die gewohnten Karten. */
  .auth {
    position: relative;
    display: grid;
    align-content: start;
    min-block-size: 100dvh;
    inline-size: min(100%, var(--app-width));
    margin-inline: auto;
  }

  /* Der Schein liegt über der ganzen Fensterbreite und läuft nach allen
     Seiten aus — sonst bricht er auf dem Desktop an der Spalte ab. */
  .auth::before {
    content: "";
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 65dvh;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(42% 100% at 50% 0% var(--in-oklab),
        color-mix(in oklab, var(--accent) 42%, transparent), transparent 72%),
      radial-gradient(70% 60% at 50% 0% var(--in-oklab),
        rgb(255 255 255 / 0.05), transparent 75%);
    mask-image: radial-gradient(65% 100% at 50% 0% var(--in-oklab),
      #000 25%, transparent 100%);
  }

  .auth__head {
    display: grid;
    justify-items: center;
    gap: 0.875rem;
    padding: calc(3.5rem + env(safe-area-inset-top)) var(--gutter) 2.25rem;
    text-align: center;
  }

  /* Kreis wie die Händler-Zeichen in der App, mit weichem Schein */
  .auth__mark {
    inline-size: 4rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--grey-850);
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: 0 0 0 6px rgb(255 255 255 / 0.05);
  }

  .auth__mark img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: 22%;
  }

  .auth__app {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--grey-300);
  }

  .auth h1 {
    font-size: clamp(1.75rem, 1.2rem + 3.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-wrap: balance;
  }

  .auth__body {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
  }

  .auth__hint {
    padding-inline: 0.25rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    text-wrap: pretty;
  }

  .auth form {
    display: grid;
    gap: 0.75rem;
  }

  .auth__error {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: 1rem;
    background: color-mix(in oklab, var(--down) 22%, transparent);
    color: #ffd7da;
    font-size: 0.9375rem;
    text-wrap: pretty;
  }

  .auth__foot {
    padding-block-start: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-wrap: pretty;
  }

  /* Feld im Karten-Stil, mit Platz für eine Schaltfläche am Ende */
  .authfield {
    display: grid;
    gap: 0.125rem;
    padding: 0.75rem 1.125rem 0.625rem;
  }

  .card > .authfield:not(:last-child) {
    border-block-end: 1px solid var(--hairline);
  }

  .authfield__label {
    font-size: 0.875rem;
    color: var(--text-muted);
  }

  .authfield__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .authfield input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
  }

  .authfield input:focus {
    outline: none;   /* die Karte zeigt den Fokus über die Umrandung */
  }

  .authfield input::placeholder {
    color: var(--grey-400);
  }

  .authfield:focus-within .authfield__label {
    color: var(--accent);
  }

  /* Passwort ein- und ausblenden */
  .authfield__toggle {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: color 0.15s ease, background 0.15s ease;
  }

  .authfield__toggle:hover {
    color: var(--text);
    background: rgb(255 255 255 / 0.07);
  }

  .authfield__toggle svg {
    inline-size: 1.25rem;
  }
}

/* ============================================================
   Kursverläufe
   ============================================================ */
@layer components {
  .spark {
    display: block;
    flex: none;
    inline-size: 4.75rem;
    block-size: 1.875rem;
  }

  /* Auf dem Handy schmaler, damit der Name der Position nicht
     vorzeitig gekürzt werden muss. */
  @media (max-width: 30rem) {
    .spark {
      inline-size: 3.25rem;
    }
  }

  .spark.is-up { color: var(--up); }
  .spark.is-down { color: var(--down); }

  .trend {
    margin: 0;
    display: grid;
    gap: 0.5rem;
  }

  .trend.is-up { color: var(--up); }
  .trend.is-down { color: var(--down); }

  .trend svg {
    inline-size: 100%;
    block-size: 9rem;
    display: block;
    touch-action: pan-y;   /* senkrecht scrollen bleibt möglich */
    cursor: crosshair;
  }

  .trend__readout {
    min-block-size: 1.25rem;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* Wertzeile mit Symbol, Verlauf und Kurs */
  .asset {
    display: grid;
    grid-template-columns: var(--row-icon) 1fr auto auto;
    align-items: center;
    gap: 0.875rem;
    inline-size: 100%;
    padding: 0.875rem 1.125rem;
    text-align: start;
    color: var(--text);
    transition: background 0.15s ease;
  }

  .asset:hover {
    background: rgb(255 255 255 / 0.045);
  }

  .asset > .asset__text {
    min-inline-size: 0;
  }

  .asset__name {
    display: block;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .asset__meta {
    display: block;
    margin-block-start: 0.125rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    /* einzeilig halten — sonst wird die Zeile doppelt so hoch */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .asset__figures {
    text-align: end;
  }

  .asset__value {
    display: block;
    font-size: 1.0625rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .asset__change {
    display: block;
    margin-block-start: 0.125rem;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
  }

  .asset__change.is-up { color: var(--up); }
  .asset__change.is-down { color: var(--down); }

  /* Kennzahl über einer Liste */
  .stat {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    padding-block: 2.5rem 1.25rem;
    text-align: center;
  }

  .stat__label {
    font-size: 1.0625rem;
    color: var(--grey-300);
  }

  .stat__value {
    display: flex;
    align-items: baseline;
    font-size: clamp(2.5rem, 1.6rem + 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .stat__cents {
    font-size: 0.5em;
    align-self: flex-end;
    padding-block-end: 0.12em;
  }

  .stat__change {
    margin-block-start: 0.5rem;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }

  .stat__change.is-up { color: var(--up); }
  .stat__change.is-down { color: var(--down); }
}

/* ============================================================
   Formulare, Fortschritt, Karten
   ============================================================ */
@layer components {
  .form-card {
    display: grid;
    gap: 0;
  }

  .field textarea {
    inline-size: 100%;
    min-block-size: 4.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--hairline);
    border-radius: 0.875rem;
    background: var(--grey-800);
    color: var(--text);
    font: inherit;
    font-size: 1.0625rem;
    resize: vertical;
  }

  .field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  .field__error {
    font-size: 0.875rem;
    color: var(--down);
  }

  /* Zwei Felder nebeneinander, auf schmalen Geräten untereinander */
  .field--split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
  }

  .field--split > span {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  /* Umschalter mit zwei bis drei Möglichkeiten */
  .segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--grey-800);
  }

  .segmented__option {
    min-block-size: 2.5rem;
    padding-inline: 0.75rem;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .segmented__option[aria-pressed="true"] {
    background: var(--grey-700);
    color: var(--text);
  }

  /* Kleiner Hinweis neben einem Namen */
  .badge {
    display: inline-block;
    margin-inline-start: 0.375rem;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.14);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: 0.08em;
  }

  /* Erklärender Satz unter einer Feldgruppe */
  .field__note {
    margin: 0;
    padding-block-start: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: pretty;
  }

  .field input:user-invalid {
    border-color: var(--down);
  }

  /* Empfänger-Schnellwahl */
  .chips {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 0.25rem;
  }

  .chips::-webkit-scrollbar { display: none; }

  .chip {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    flex: none;
    inline-size: 4.5rem;
    color: var(--text);
    font-size: 0.8125rem;
    text-align: center;
  }

  .chip__circle {
    inline-size: 3.25rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grey-800);
    font-size: 1.125rem;
    font-weight: 600;
    transition: background 0.15s ease;
  }

  .chip:hover .chip__circle {
    background: var(--grey-750);
  }

  .chip__name {
    inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
  }

  .chip--add .chip__circle {
    background: rgb(255 255 255 / 0.16);
  }

  /* Schnellbeträge: Raster statt scrollender Leiste, damit auf schmalen
     Geräten nichts über den Rand hinausragt. */
  .quick-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
    gap: 0.625rem;
  }

  .quick-amounts .pill {
    justify-content: center;
    padding-inline: 0.5rem;
    min-block-size: 2.75rem;
    font-size: 1rem;
  }

  /* Fortschritt zur nächsten Stufe */
  .progress {
    display: grid;
    gap: 0.625rem;
    padding: 1.125rem;
  }

  .progress__bar {
    block-size: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--grey-750);
    overflow: hidden;
  }

  .progress__fill {
    block-size: 100%;
    border-radius: inherit;
    background: var(--accent);
    inline-size: var(--value, 0%);
  }

  .progress__legend {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
  }

  /* Zahlungskarte */
  .plastic {
    position: relative;
    display: grid;
    align-content: space-between;
    gap: 1.5rem;
    min-block-size: 11rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background:
      radial-gradient(80% 60% at 85% 5% var(--in-oklab),
        rgb(255 255 255 / 0.16), transparent 70%),
      var(--plastic, var(--grey-750));
    overflow: hidden;
  }

  .plastic.is-frozen {
    filter: saturate(0.25);
  }

  .plastic__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
    color: rgb(255 255 255 / 0.75);
  }

  .plastic__number {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
  }

  .plastic__label {
    font-size: 1.0625rem;
    font-weight: 600;
  }

  /* Prämie */
  .reward {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto;
    align-items: center;
    gap: 1rem;
    inline-size: 100%;
    padding: 1rem 1.125rem;
    text-align: start;
    color: var(--text);
    transition: background 0.15s ease;
  }

  .reward:hover:not(:disabled) {
    background: rgb(255 255 255 / 0.045);
  }

  .reward:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .reward__icon {
    inline-size: 2.75rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in oklab, var(--accent) 24%, transparent);
    color: var(--accent);
  }

  .reward__icon svg { inline-size: 1.375rem; }

  .reward__name {
    display: block;
    font-size: 1.0625rem;
    font-weight: 500;
  }

  .reward__hint {
    display: block;
    margin-block-start: 0.125rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    text-wrap: pretty;
  }

  .reward__cost {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--accent);
    white-space: nowrap;
  }

  .reward__cost svg { inline-size: 1.125rem; }

  /* leerer Zustand */
  .empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
    text-wrap: pretty;
  }
}

/* ============================================================
   Hilfsklassen
   ============================================================ */
@layer utilities {
  /* Muss in dieser Layer stehen: sonst gewinnt z. B. `.row { display: flex }`
     gegen das UA-Stylesheet und ausgeblendete Zeilen bleiben sichtbar. */
  [hidden] {
    display: none;
  }

  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .is-masked {
    filter: blur(9px);
    user-select: none;
  }
}

/* ============================================================
   Handy: Kopfzeile bleibt beim Scrollen oben stehen
   ============================================================ */
@media (max-width: 59.99rem) {
  .topbar,
  .page-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 15;
    /* über die Seitenränder hinaus, damit der Weichzeichner
       die volle Breite abdeckt */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
  }

  /* Erst beim Scrollen eine Trennlinie zeigen */
  .topbar::after,
  .page-head::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 1px;
    background: var(--hairline);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .is-scrolled .topbar::after,
  .is-scrolled .page-head::after {
    opacity: 1;
  }
}

/* ============================================================
   Schmale Geräte — unter 360 px wird es sonst eng
   ============================================================ */
@media (max-width: 22.5rem) {
  :root {
    --gutter: 1rem;
    --row-icon: 2.75rem;
  }

  .topbar {
    gap: 0.5rem;
  }

  /* Die zweite Kopfzeilen-Schaltfläche weicht, damit die Suche nutzbar bleibt */
  .topbar > .icon-btn:last-child {
    display: none;
  }

  .action__circle {
    inline-size: 3.125rem;
  }

  .action {
    font-size: 0.875rem;
  }

  .nav__item {
    font-size: 0.6875rem;
  }

  .tx {
    padding-inline: 0.875rem;
    gap: 0.75rem;
  }

  .asset {
    grid-template-columns: var(--row-icon) 1fr auto;
    gap: 0.75rem;
  }

  /* Auf sehr schmalen Geräten hat der Mini-Verlauf keinen Platz */
  .asset .spark {
    display: none;
  }
}

/* ============================================================
   Ab Tablet-Breite: Navigation als Seitenspalte
   ============================================================ */
@media (min-width: 60rem) {
  :root {
    --sidebar: 15.5rem;
  }

  /* Anmeldung und Einrichtung sitzen mittig statt am oberen Rand */
  .auth {
    align-content: center;
    padding-block: 3rem;
  }

  .auth__head {
    padding-block-start: 0;
  }

  /* Schafft Platz für die Seitenspalte; .app zentriert sich im Rest.
     Nur auf Seiten mit App-Spalte — Anmeldung und Einrichtung haben
     keine Navigation und bleiben mittig. */
  body:has(.app) {
    padding-inline-start: var(--sidebar);
  }

  .app {
    inline-size: min(100%, 44rem);
    padding-inline: 2rem;
    padding-block-end: 4rem;
  }

  .nav {
    inset-block: 0;
    inset-inline: 0 auto;
    inline-size: var(--sidebar);
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem 0.875rem;
    border-radius: 0;
    background: rgb(16 16 18 / 0.9);
    backdrop-filter: blur(20px);
    border-inline-end: 1px solid var(--hairline);
    box-shadow: none;
    overflow-y: auto;
  }

  .nav__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem 1.5rem;
    color: var(--text);
  }

  .nav__mark {
    inline-size: 2.25rem;
    aspect-ratio: 1;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--accent);
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
  }

  .nav__mark img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .nav__brandname {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav__items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .nav__foot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--hairline);
  }

  /* Waagerecht statt gestapelt */
  .nav__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    inline-size: 100%;
    padding: 0.75rem 0.625rem;
    border-radius: 0.875rem;
    font-size: 0.9375rem;
    text-align: start;
  }

  .nav__item svg {
    inline-size: 1.375rem;
    block-size: 1.375rem;
    flex: none;
  }

  .nav__label {
    max-inline-size: none;
  }

  /* Zurück-Pfeile führen auf dem Desktop ins Leere — die Seitenspalte
     zeigt ja, wo man ist. */
  .page-head > .icon-btn {
    display: none;
  }

  .page-head {
    padding-block: 2rem 1.5rem;
  }

  .page-head h1 {
    font-size: 2rem;
  }

  .balance {
    padding-block: 3.5rem 0;
  }

  .stat {
    padding-block: 2rem 1.25rem;
  }

  /* Sheets werden zu zentrierten Fenstern */
  .sheet {
    block-size: auto;
    max-block-size: min(88dvh, 52rem);
    margin: auto;
    border-radius: var(--radius-card);
    box-shadow: 0 24px 80px rgb(0 0 0 / 0.6);
  }

  .sheet__head {
    border-start-start-radius: var(--radius-card);
    border-start-end-radius: var(--radius-card);
  }

  .toast {
    inset-block-end: 2rem;
    inset-inline-start: var(--sidebar);
  }

  .trend svg {
    block-size: 11rem;
  }
}

/* ============================================================
   Breite Bildschirme: Startseite zweispaltig
   ============================================================ */
@media (min-width: 80rem) {
  .app--home {
    inline-size: min(100%, 64rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Die letzte Zeile schluckt die Resthöhe der Buchungsliste, damit
       Kontostand und Aktionen oben zusammenbleiben. */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 3rem;
    align-items: start;
  }

  .app--home > .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .app--home > .balance {
    grid-column: 1;
    grid-row: 2;
    padding-block-start: 2.5rem;
  }

  .app--home > .actions {
    grid-column: 1;
    grid-row: 3;
  }

  /* Buchungen laufen rechts neben Kontostand und Aktionen */
  .app--home > .feed-section {
    grid-column: 2;
    grid-row: 2 / -1;
    padding-block-start: 2.5rem;
  }
}

/* ============================================================
   Bewegung reduzieren
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sheet {
    translate: none;
    transition-duration: 0.1s;
  }

  @starting-style {
    .sheet[open] { translate: none; }
  }

  .action:active .action__circle,
  .swatch:hover {
    scale: none;
  }
}

/* ============================================================
   Größere Zeigegeräte: Treffflächen bleiben groß genug
   ============================================================ */
@media (pointer: coarse) {
  .nav__item {
    min-block-size: 3rem;
  }
}

/* ============================================================
   Hoher Kontrast
   ============================================================ */
@media (forced-colors: active) {
  .card,
  .nav,
  .pill,
  .btn {
    border: 1px solid CanvasText;
  }

  .switch {
    border: 1px solid CanvasText;
  }
}