/* ==========================================================================
   FinLap — Konto & Abrechnung

   Setzt AUF finlap.css auf und wird immer NACH ihr geladen. Alle Farben,
   Radien, Abstände und Schatten kommen aus deren Tokens — hier steht kein
   einziger neuer Grundfarbwert. Was hier entsteht, sind ausschließlich die
   Bausteine, die eine Kontoseite braucht und eine Landingpage nicht hat:
   Statuskarten, Rechnungstabelle, Bestellzusammenfassung, Zustandsseiten.

   Warum überhaupt eine eigene Datei und nicht die App-Stylesheets aus
   static/entry_like_a_pro/: dort ist der Token-Block sechsmal wortgleich
   kopiert und der Akzent ist Türkis. Der Kaufweg beginnt aber auf der
   Landingpage in Signalblau — Landing → Preise → Checkout → Konto soll keine
   sichtbare Naht haben. Die App-Navigation (die Schublade) bleibt bewusst
   türkis: sie ist das eine Element, das sagt „das hier ist die App".

   Struktur-Klassen .page/.topbar/.content/.footer sind mit Absicht wortgleich
   zu den App-Seiten: entry_like_a_pro/_nav.html bringt sein CSS inline mit und
   greift auf `.page` und `.page > .topbar` zu (Anpinnen schiebt den Inhalt per
   `margin-left`). Andere Namen würden die Schublade hier still zerlegen.

   Kein Build-Step (Repo-Konvention): handgeschriebenes CSS, direkt verlinkt.
   ========================================================================== */

/* --- Werkzeug statt Schaufenster ----------------------------------------- */
/* Die Landingpage darf auffallen — sie hat drei Sekunden, um zu überzeugen.
   Konto und Kaufstrecke haben die umgekehrte Aufgabe: hier sitzt jemand, der
   schon zahlt oder gleich zahlt, und der will Zahlen lesen, keine Effekte
   sehen. Deshalb werden die Marken-Tokens für DIESE Seiten heruntergefahren:
   kleinere Radien, flachere Schatten, keine Leuchtkegel.

   Der Block steht bewusst in account.css und nicht in finlap.css: die
   Landingpage lädt account.css nicht und behält damit ihre Wirkung.

   Farbe bleibt hier ausschließlich Information — Grün heißt „bezahlt/aktiv",
   Rot heißt „hier stimmt etwas nicht", Blau ist die Marke und die Aktion.
   Dekoratives Grün gibt es nicht mehr. */
:root {
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --sh-md: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-lg: 0 8px 24px -12px rgba(0, 0, 0, .6);
}

/* Primäraktion: eine ruhige, satte Fläche statt des grünen Verlaufs der
   Landingpage. Ein Verlauf mit Leuchtschatten auf „Zahlungsart aktualisieren"
   liest sich wie Werbung, nicht wie eine Kontofunktion. */
.btn--primary {
  background: var(--brand);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover { background: #6d99ff; filter: none; }
.btn--primary.is-busy::after { color: #fff; }
.btn:hover { filter: none; }
.btn:active { transform: none; }
.btn--secondary:hover { background: rgba(255, 255, 255, .06); }

/* Auf den Kaufseiten wird landing.css mitgeladen; seine Plan-Karte bringt
   einen blauen Verlauf und einen Leuchtrand mit. Beides hier flach. */
.plan { border-radius: var(--r-xl); }
.plan--pro { background: var(--bg-2); border-color: rgba(91, 140, 255, .38); }

/* --- hidden schlägt alles ------------------------------------------------ */
/* Das `hidden`-Attribut ist nur eine UA-Regel `display:none` — jede
   Klassenregel mit einem eigenen `display` (und davon stehen hier viele:
   .acc-field ist grid, .acc-state__meta ist inline-flex) gewinnt dagegen
   allein durch Spezifität. Ohne diese Zeile blendet weder billing.js noch
   ein `hidden` im Markup irgendetwas aus; die Wartestand-Meldung und ihr
   „dauert länger als üblich"-Nachsatz standen dann gleichzeitig da. */
[hidden] { display: none !important; }

/* --- Seitengerüst -------------------------------------------------------- */

.page {
  /* Wie .auth-body weiter unten: 100vh ist auf dem Telefon die GROSSE
     Ansichtshöhe (Adresszeile eingefahren), die Seite damit rund eine
     Adresszeilenhöhe zu hoch — und .acc-foot, das durch flex:1 auf .content
     am unteren Rand hängt, steht unter dem Bildrand. Zwei Zeilen wie in
     notification_settings.css:106; die erste bleibt als Rückfallebene.
     display:flex und die Richtung sind tragend: sie halten die Fußzeile
     unten, und _nav.html hängt seine Schubladen-Verschiebung an .page. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Sticky, damit Titel und Zugangs-Stufe beim Scrollen durch eine lange
   Rechnungsliste sichtbar bleiben. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 13, 18, .92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
}
.topbar__brand img { width: 24px; height: 24px; }

.topbar__title {
  font-size: 1rem;
  font-weight: 640;
  letter-spacing: -.015em;
}
.topbar__subtitle {
  font-size: .8rem;
  color: var(--txt-3);
  margin-top: 1px;
}
.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.topbar .btn { min-height: 38px; padding: 8px 15px; font-size: .875rem; }

@media (max-width: 640px) {
  .topbar__subtitle { display: none; }
  /* Der einzige .btn--ghost hier ist „Abmelden" (_shell_account.html:79).
     Die Regel las sich bis zum 30.08.2026 wie ein Fehler, weil sie es auch
     war: ausgeblendet, und nirgendwo sonst erreichbar — auf dem Telefon kam
     man aus der App nicht mehr heraus. Seither steht Abmelden fest in der
     Schublade (entry_like_a_pro/_nav.html, .elap-drawer__signout), die auf
     JEDER Seite dieses Gerüsts über den Hamburger erreichbar ist. Erst damit
     gilt hier die Hausregel: eine Kopfzeilen-Aktion darf verschwinden, wenn
     ihr Ziel woanders steht. Wer den Punkt aus der Schublade entfernt, muss
     diese Zeile mitentfernen. */
  .topbar__right .btn--ghost { display: none; }
}

.content {
  flex: 1;
  width: 100%;
  max-width: calc(1060px + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--s-7) var(--gutter) var(--s-10);
}

/* Bewusst .acc-foot und nicht .footer: auf den öffentlichen Kaufseiten wird
   landing.css mitgeladen, die einen eigenen, viel größeren .footer besitzt.
   Zwei Definitionen desselben Namens hätten sich je nach Ladereihenfolge
   gegenseitig überschrieben. */
.acc-foot {
  border-top: 1px solid var(--line);
  /* viewport-fit=cover steht auch auf diesem Gerüst (_shell_account.html:43),
     also zeichnet die Seite unter den Gestenbalken. env() bewusst NICHT im
     Kurzschreib-padding: ein Browser ohne env() verwürfe sonst das ganze
     Polster statt nur die zweite Zeile. */
  padding: var(--s-5) var(--gutter);
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  color: var(--txt-4);
  font-size: .8125rem;
}
.acc-foot__inner {
  width: 100%;
  max-width: calc(1060px + var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
}
.acc-foot a { color: var(--txt-3); }
.acc-foot a:hover { color: var(--txt-2); text-decoration: underline; }
.acc-foot__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }

/* --- Unternavigation (Konto · Abrechnung · Benachrichtigungen) ------------ */
/* Segmentiert statt Tabs: es sind drei gleichrangige Seiten, keine Ebenen. */

.acc-nav {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .012);
}
.acc-nav__inner {
  width: 100%;
  max-width: calc(1060px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.acc-nav__inner::-webkit-scrollbar { display: none; }

.acc-nav__link {
  position: relative;
  padding: 13px 14px 12px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--txt-3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.acc-nav__link:hover { color: var(--txt-2); }
.acc-nav__link[aria-current="page"] {
  color: var(--txt);
  border-bottom-color: var(--brand);
}

/* --- Raster -------------------------------------------------------------- */

.acc-stack { display: flex; flex-direction: column; gap: var(--s-5); }

.acc-split { display: grid; gap: var(--s-5); align-items: start; }
.acc-split > * { min-width: 0; }
@media (min-width: 980px) {
  .acc-split { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-6); }
  /* Die rechte Spalte begleitet eine lange Rechnungsliste. */
  .acc-split__aside { position: sticky; top: calc(var(--s-10) + 24px); }
}

.acc-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-6);
}
.acc-pagehead h1 { font-size: 1.6rem; letter-spacing: -.03em; }
.acc-pagehead__sub { color: var(--txt-3); font-size: .9rem; margin-top: 6px; }
.acc-pagehead__actions { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
@media (max-width: 640px) {
  /* Kein rechtsbündiger Einzelbutton unter einer linksbündigen Überschrift. */
  .acc-pagehead__actions { margin-left: 0; width: 100%; }
  .acc-pagehead__actions .btn { flex: 1 1 auto; }
}

/* Zurückgenommene, aber lesbare Nebenaktion (Kündigen). --txt-4 wäre auf dem
   Kartengrund zu schwach — eine Aktion, die man sucht, muss man finden. */
.acc-quietaction { margin-left: auto; color: var(--txt-3); }
.acc-quietaction:hover { color: var(--txt-2); }
@media (max-width: 560px) { .acc-quietaction { margin-left: 0; } }

/* --- Karte --------------------------------------------------------------- */

.acc-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.acc-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-5) var(--s-6) 0;
}
.acc-card__title {
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -.018em;
}
.acc-card__sub { font-size: .84rem; color: var(--txt-3); margin-top: 3px; }
.acc-card__headright { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
.acc-card__body { padding: var(--s-5) var(--s-6) var(--s-6); }
.acc-card__head + .acc-card__body { padding-top: var(--s-4); }
.acc-card__foot {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.acc-card__foot .btn { min-height: 40px; padding: 9px 16px; font-size: .875rem; }
.acc-card__foot--end { justify-content: flex-end; }
.acc-card--quiet { background: rgba(255, 255, 255, .018); }

@media (max-width: 560px) {
  .acc-card__head { padding-inline: var(--s-5); }
  .acc-card__body { padding-inline: var(--s-5); }
  .acc-card__foot { padding-inline: var(--s-5); }
  /* Ein Teil der Aktionen steckt in einem <form> (POST auf Stripe-Routen) —
     dann ist das Formular das Flex-Kind, nicht der Button. Beide brauchen die
     volle Breite, sonst steht die Reihe auf dem Telefon ungleich. */
  .acc-card__foot .btn,
  .acc-card__foot form { flex: 1 1 100%; }
  .acc-card__foot form .btn { width: 100%; }
  .acc-card__foot .acc-quietaction { margin-left: 0; text-align: center; }
}

/* --- Zugangs-Karte (die eine Karte, die den Zustand trägt) ---------------- */
/* Der farbige Streifen links ist der schnellste Weg, „alles gut" von „hier
   musst du etwas tun" zu trennen, ohne die ganze Karte einzufärben. */

.acc-hero { position: relative; }
/* Der farbige Streifen markiert eine ABWEICHUNG — Kulanzfrist, Kündigung,
   fehlgeschlagene Zahlung. Im Normalfall bleibt die Karte unmarkiert: ein
   grüner Balken an einem Abo, das einfach läuft, ist Dekoration und stumpft
   die Farbe für den Fall ab, in dem sie etwas heißen soll. */
.acc-hero.tone--warn::before,
.acc-hero.tone--danger::before,
.acc-hero.tone--info::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--tone-color, var(--brand));
}
/* Der frühere Leuchtkegel hinter der Zugangskarte ist entfallen: er hat die
   halbe Karte grün eingefärbt und damit so ausgesehen, als sei „grün" eine
   Gestaltung und keine Aussage. Das Element bleibt als leerer Haken im
   Markup erlaubt, malt aber nichts mehr. */
.acc-hero__glow { display: none; }
.acc-hero__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.acc-hero__headline {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
  font-weight: 640;
  letter-spacing: -.028em;
  line-height: 1.2;
  text-wrap: balance;
}
.acc-hero__detail {
  color: var(--txt-2);
  font-size: .95rem;
  margin-top: var(--s-3);
  max-width: 62ch;
}
.acc-hero__price {
  margin-left: auto;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 620;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .acc-hero__price { margin-left: 0; text-align: left; }
}

/* Tonalitäten. Ein Wert steuert Streifen, Schein und Abzeichen — deshalb
   werden hier nur Variablen gesetzt, keine Eigenschaften. */
.tone--ok      { --tone-color: var(--ok);     --tone-soft: rgba(53, 201, 119, .40); --tone-bg: var(--ok-soft);     --tone-line: rgba(53, 201, 119, .32); --tone-txt: #8ee7b4; }
.tone--warn    { --tone-color: var(--warn);   --tone-soft: rgba(245, 181, 68, .34); --tone-bg: rgba(245, 181, 68, .12); --tone-line: rgba(245, 181, 68, .32); --tone-txt: #f7cd84; }
.tone--danger  { --tone-color: var(--danger); --tone-soft: rgba(242, 109, 120, .34); --tone-bg: var(--danger-soft); --tone-line: rgba(242, 109, 120, .32); --tone-txt: #f7a2a9; }
.tone--info    { --tone-color: var(--brand);  --tone-soft: rgba(91, 140, 255, .34); --tone-bg: var(--brand-soft);  --tone-line: rgba(91, 140, 255, .30); --tone-txt: var(--brand-txt); }
.tone--neutral { --tone-color: var(--txt-4);  --tone-soft: rgba(255, 255, 255, .05); --tone-bg: rgba(255, 255, 255, .045); --tone-line: var(--line-2); --tone-txt: var(--txt-2); }

/* --- Abzeichen ----------------------------------------------------------- */

.acc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: var(--tone-bg, rgba(255, 255, 255, .045));
  border: 1px solid var(--tone-line, var(--line-2));
  color: var(--tone-txt, var(--txt-2));
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.acc-badge__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--tone-color, var(--txt-3));
}
/* Die Stufe (FREE/PRO/…) — ruhiger als ein Status, deshalb ohne Punkt. */
.acc-tier {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  border: 1px solid rgba(91, 140, 255, .24);
  color: var(--brand-txt);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* --- Fortschritt --------------------------------------------------------- */

.acc-meter {
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  margin-top: var(--s-5);
}
.acc-meter__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--tone-color, var(--brand));
  transition: width .5s var(--ease-out);
}
.acc-meter__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: 7px;
  font-size: .78rem;
  color: var(--txt-4);
}

/* --- Beschreibungsliste (Plan · Preis · Zyklus · Nächste Abbuchung) ------- */

.acc-dl {
  display: grid;
  gap: var(--s-4) var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .acc-dl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .acc-dl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.acc-dl__k {
  font-size: .72rem;
  font-weight: 640;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--txt-4);
}
.acc-dl__v {
  margin-top: 4px;
  font-size: .95rem;
  color: var(--txt);
  font-weight: 560;
}
.acc-dl__v--muted { color: var(--txt-3); font-weight: 400; }
.acc-dl__note { display: block; margin-top: 3px; font-size: .8rem; color: var(--txt-4); font-weight: 400; }

/* --- Merkmalsliste ------------------------------------------------------- */

.acc-feats { display: flex; flex-direction: column; gap: 9px; }
.acc-feats li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--txt-2);
}
.acc-feats svg { flex: none; margin-top: 3px; width: 15px; height: 15px; color: var(--ok); }
.acc-feats li.is-off { color: var(--txt-4); }
.acc-feats li.is-off svg { color: var(--txt-4); }

/* --- Hinweisstreifen ----------------------------------------------------- */

.acc-note {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--tone-line, var(--line-2));
  background: var(--tone-bg, rgba(255, 255, 255, .03));
  color: var(--txt-2);
  font-size: .875rem;
}
.acc-note svg { flex: none; margin-top: 2px; width: 17px; height: 17px; color: var(--tone-color, var(--txt-3)); }
.acc-note strong { color: var(--txt); font-weight: 620; }
.acc-note__actions { margin-left: auto; display: flex; gap: var(--s-2); flex: none; }
.acc-note__actions .btn { min-height: 34px; padding: 6px 12px; font-size: .8rem; }
@media (max-width: 640px) {
  .acc-note { flex-wrap: wrap; }
  .acc-note__actions { margin-left: 0; width: 100%; }
}

/* --- Tabelle (Rechnungen · Erstattungen · Verlauf) ------------------------ */
/* Zahlenspalten rechtsbündig und tabellarisch — finlap.css setzt bereits
   font-variant-numeric: tabular-nums auf <body>, hier zählt nur die Ausrichtung. */

.acc-tablewrap { overflow-x: auto; margin-inline: calc(var(--s-6) * -1); padding-inline: var(--s-6); }
.acc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.acc-table th {
  text-align: left;
  font-size: .68rem;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-4);
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.acc-table td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  vertical-align: middle;
  color: var(--txt-2);
}
.acc-table tr:last-child td { border-bottom: 0; }
.acc-table th:last-child, .acc-table td:last-child { padding-right: 0; }
.acc-table .num { text-align: right; white-space: nowrap; }
.acc-table .acc-table__id { color: var(--txt); font-weight: 560; }
.acc-table__guid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--txt-4); }
.acc-table__links { display: flex; gap: var(--s-3); justify-content: flex-end; white-space: nowrap; }
.acc-table__links a { color: var(--brand-txt); font-weight: 560; font-size: .82rem; }
.acc-table__links a:hover { text-decoration: underline; }

/* Unter 720px wird die Tabelle zu Karten. Eine horizontal scrollende
   Rechnungstabelle auf dem Telefon ist der Klassiker, an dem niemand seine
   letzte Rechnung findet. */
@media (max-width: 719.98px) {
  .acc-tablewrap { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .acc-table, .acc-table tbody, .acc-table tr, .acc-table td { display: block; width: 100%; }
  .acc-table thead { display: none; }
  .acc-table tr {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: var(--s-3);
    background: rgba(0, 0, 0, .16);
  }
  .acc-table tr:last-child { margin-bottom: 0; }
  .acc-table td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2px var(--s-4);
    padding: 5px 0;
    border: 0;
    text-align: left;
  }
  /* Zusatzangaben („bezahlt am …") auf eine eigene Zeile, sonst quetschen sie
     sich neben die Rechnungsnummer und beide brechen mitten im Wort um. */
  .acc-table td .acc-dl__note { width: 100%; text-align: right; margin-top: 0; }
  .acc-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: .68rem;
    font-weight: 640;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-4);
  }
  .acc-table td:empty { display: none; }
  .acc-table .num { text-align: right; }
  .acc-table__links { justify-content: flex-end; }
}

/* --- Plan-Zeile (Tarifwechsel im Konto) ---------------------------------- */
/* Bewusst KEINE zweite Plan-Karte: die großen Karten stehen auf der
   Preisseite (landing.css .plan). Im Konto wechselt man zwischen zwei, drei
   bekannten Optionen — dafür ist eine Zeile schneller zu lesen als ein Raster. */

.acc-plans { display: flex; flex-direction: column; gap: var(--s-3); }

.acc-planrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .022);
  transition: border-color .16s ease, background-color .16s ease;
}
.acc-planrow:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .035); }
.acc-planrow--current {
  border-color: rgba(91, 140, 255, .34);
  background: linear-gradient(100deg, var(--brand-soft), rgba(255, 255, 255, .02));
}
.acc-planrow__main { min-width: 0; }
.acc-planrow__name { font-weight: 620; font-size: .98rem; }
.acc-planrow__meta { font-size: .82rem; color: var(--txt-3); margin-top: 2px; }
.acc-planrow__price { margin-left: auto; text-align: right; white-space: nowrap; }
.acc-planrow__amount { font-size: 1.15rem; font-weight: 640; letter-spacing: -.02em; }
.acc-planrow__per { font-size: .82rem; color: var(--txt-3); }
.acc-planrow__cta { flex: none; }
.acc-planrow__cta .btn { min-height: 40px; padding: 9px 18px; font-size: .875rem; }
@media (max-width: 560px) {
  .acc-planrow__price { margin-left: 0; text-align: left; }
  .acc-planrow__cta, .acc-planrow__cta .btn { width: 100%; }
}

/* --- Segmentierter Schalter (Monat / Jahr) ------------------------------- */

.acc-switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, .28);
  gap: 3px;
}
.acc-switch__opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--txt-3);
  padding: 8px 18px;
  border-radius: var(--r-full);
  font-size: .875rem;
  font-weight: 620;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.acc-switch__opt:hover { color: var(--txt-2); }
.acc-switch__opt[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-inset);
}
.acc-switch__save {
  margin-left: 7px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ok);
}
.acc-switch__opt[aria-pressed="true"] .acc-switch__save { color: #eafff3; }

/* --- Formularfelder ------------------------------------------------------ */

.acc-fields { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .acc-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.acc-field { display: grid; gap: 6px; min-width: 0; }
.acc-field__label {
  font-size: .78rem;
  font-weight: 620;
  color: var(--txt-2);
  letter-spacing: .01em;
}
.acc-field__optional { color: var(--txt-4); font-weight: 400; }

.acc-input,
.acc-select,
.acc-textarea {
  width: 100%;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 11px 13px;
  color: var(--txt);
  font-size: .95rem;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
  /* 16px auf Touch, sonst zoomt iOS beim Fokus in das Feld hinein. */
}
.acc-textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.acc-select {
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--txt-3) 50%),
    linear-gradient(135deg, var(--txt-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.acc-input::placeholder, .acc-textarea::placeholder { color: var(--txt-4); }
.acc-input:focus, .acc-select:focus, .acc-textarea:focus {
  border-color: rgba(91, 140, 255, .55);
  box-shadow: 0 0 0 4px rgba(91, 140, 255, .12);
}
.acc-input[aria-invalid="true"], .acc-textarea[aria-invalid="true"] {
  border-color: rgba(242, 109, 120, .55);
}
.acc-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(242, 109, 120, .12); }
.acc-input:disabled, .acc-select:disabled, .acc-textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
}
@media (pointer: coarse) {
  .acc-input, .acc-select, .acc-textarea { font-size: 16px; }
}

.acc-help { font-size: .8rem; color: var(--txt-4); }
.acc-fielderr { font-size: .8rem; color: var(--danger); }
.acc-fielderr:empty { display: none; }

/* Zustimmungen. Die Trefferfläche ist das ganze Feld, nicht nur die Box. */
.acc-checks { display: grid; gap: var(--s-2); }
.acc-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .16);
  cursor: pointer;
  font-size: .875rem;
  color: var(--txt-2);
  line-height: 1.5;
  transition: border-color .16s ease, background-color .16s ease;
}
.acc-check:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.acc-check input {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  accent-color: var(--brand);
  cursor: pointer;
}
.acc-check:has(input:checked) {
  border-color: rgba(91, 140, 255, .34);
  background: var(--brand-soft);
}
.acc-check:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.acc-check a { color: var(--brand-txt); text-decoration: underline; text-underline-offset: 2px; }
.acc-check__version { color: var(--txt-4); }
@media (pointer: coarse) {
  .acc-check input { width: 21px; height: 21px; }
}

/* --- Bestellzusammenfassung ---------------------------------------------- */

.acc-summary { display: flex; flex-direction: column; gap: var(--s-3); }
.acc-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: .9rem;
  color: var(--txt-2);
}
.acc-summary__row dt { min-width: 0; }
.acc-summary__row dd { margin: 0; text-align: right; white-space: nowrap; color: var(--txt); }
.acc-summary__row--discount dd { color: var(--ok); }
.acc-summary__rule { height: 1px; background: var(--line); margin: var(--s-2) 0; }
.acc-summary__row--total { font-size: 1.05rem; font-weight: 640; }
.acc-summary__row--total dt, .acc-summary__row--total dd { color: var(--txt); }
.acc-summary__fine { font-size: .78rem; color: var(--txt-4); line-height: 1.55; }

/* --- Zustandsseite (Erfolg · Abbruch · Fehler · Aktionsergebnis) ---------- */

.acc-state {
  max-width: 620px;
  margin: var(--s-9) auto;
  text-align: center;
}
.acc-state__icon {
  width: 62px; height: 62px;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--tone-bg, rgba(255, 255, 255, .05));
  border: 1px solid var(--tone-line, var(--line-2));
  color: var(--tone-color, var(--txt-2));
}
.acc-state__icon svg { width: 27px; height: 27px; }
.acc-state__title {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 640;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-wrap: balance;
}
.acc-state__text {
  margin-top: var(--s-4);
  color: var(--txt-2);
  font-size: 1rem;
  line-height: 1.6;
}
.acc-state__meta {
  margin-top: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: .82rem;
  color: var(--txt-4);
}
.acc-state__actions {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}
.acc-state__aside {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  text-align: left;
}
@media (max-width: 560px) {
  .acc-state__actions .btn { width: 100%; }
}

/* Der Puls markiert „wir warten noch auf Stripe" ohne Spinner-Kirmes. */
.acc-state__icon--waiting { animation: acc-pulse 2.2s ease-in-out infinite; }
@keyframes acc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--tone-soft, transparent); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}

/* Django-Standardausgabe (form.as_p) im neuen Gerüst lesbar machen. Nur dort
   eingesetzt, wo die Feldliste der View gehört und nicht der Vorlage — etwa
   beim Löschformular mit seinen Gründen. */
.auth-form p { margin-bottom: var(--s-4); display: grid; gap: 6px; }
.auth-form label { font-size: .85rem; color: var(--txt-2); }
.auth-form ul { display: grid; gap: 7px; }
.auth-form li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--txt-2); }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form textarea,
.auth-form select {
  width: 100%;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 11px 13px;
  color: var(--txt);
  font-size: .95rem;
}
.auth-form input[type="radio"],
.auth-form input[type="checkbox"] { accent-color: var(--brand); width: 16px; height: 16px; }
/* Gegenstück zu color-scheme:dark auf .auth-body. Die Häkchenfelder sind die
   einzigen unlackierten nativen Elemente hier: dunkel gezeichnet wird ein
   LEERES Kästchen zu rgb(59,59,59) auf rgb(14,17,26) — 1,68:1, also praktisch
   unsichtbar, und das trifft ausgerechnet die Pflicht-Zustimmung der
   Registrierung. Gesetzt bleibt das Häkchen ohnehin brandblau (accent-color). */
.acc-check input,
.auth-form input[type="checkbox"],
.auth-form input[type="radio"] { color-scheme: light; }
.auth-form .helptext { font-size: .78rem; color: var(--txt-4); }
.auth-form .errorlist { color: var(--danger); font-size: .8rem; display: grid; gap: 2px; }

/* --- Anmelden · Registrieren · Passwort ---------------------------------- */
/* Eine zentrierte Karte, optional mit Argument-Spalte daneben. Die
   Registrierung ist für kalten Traffic der erste Schritt der Kaufstrecke —
   sie bekommt deshalb als einzige die zweite Spalte. */

.auth-body {
  /* 100vh ist auf dem Telefon die GROSSE Ansichtshöhe (Adresszeile
     eingefahren). Mit sichtbarer Adresszeile ist die Seite dadurch rund eine
     Zeilenhöhe zu hoch und die Fußzeile steht unter dem Bildrand — genau
     der Grund, warum Impressum/Datenschutz auf dem Telefon nie zu sehen
     waren. Dieselbe Zwei-Zeilen-Form wie notification_settings.css:106:
     die erste Zeile bleibt als Rückfallebene stehen. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Die Anmeldeseiten gibt es nur in Dunkel. Ohne diese Angabe zeichnet
     Chrome die automatisch ausgefüllten Zugangsdaten in seiner HELLEN
     Variante — auf genau der Seite, auf der das Ausfüllen die Regel ist.
     ACHTUNG: die Angabe vererbt sich auf JEDES native Bedienelement. Die
     Häkchenfelder müssen deshalb weiter unten ausdrücklich wieder heraus. */
  color-scheme: dark;
  display: flex;
  flex-direction: column;
}
.auth-top {
  display: flex;
  align-items: center;
  /* Wie .topbar: ohne Umbruch-Erlaubnis kann eine zu enge Zeile nur noch
     INNERHALB der Kinder brechen — und genau das ist auf dem Telefon
     passiert (Beschriftung zweizeilig, Knopfbeschriftung zweizeilig,
     Kopfzeile 119px statt 69px hoch). */
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-5) var(--gutter);
}
/* Die Wortmarke darf nicht schrumpfen: als Flex-Kind wurde sie sonst unter
   ihre Textbreite gedrückt und "FinLap" lief in die Beschriftung daneben. */
.auth-top .topbar__brand { font-size: 1rem; flex: none; }
.auth-top__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); font-size: .875rem; color: var(--txt-3); white-space: nowrap; }
/* Kopfzeilen-Knopf, dieselben Werte wie .topbar .btn weiter oben: im Kopf
   gehört die kompakte Größe hin, nicht die des Seitenkörpers. NICHT
   über einen neuen .btn--sm lösen — den gibt es im FinLap-System nicht. */
.auth-top .btn { min-height: 38px; padding: 8px 15px; font-size: .875rem; }

@media (max-width: 640px) {
  /* Auf dem Telefon trägt der Knopf den Aufruf allein; die Frage davor
     ("Noch kein Konto?" / "Schon dabei?") steht ohnehin noch einmal im
     Kartenfuss. Sie ist deshalb in den Vorlagen als eigenes Element
     ausgezeichnet — ein bloßer Textknoten wäre per CSS nicht zu
     erreichen. Gleiches Muster wie .topbar__subtitle. */
  .auth-top { padding-block: 14px; gap: var(--s-3); }
  .auth-top__label { display: none; }
}

.auth-main {
  flex: 1;
  width: 100%;
  max-width: calc(440px + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--s-6) var(--gutter) var(--s-9);
  display: grid;
  gap: var(--s-6);
  align-content: start;
}
/* Kurze Karten (Anmeldung, Passwort, Bestätigung) saßen oben am Rand und
   liessen darunter ein Loch von 230px auf einem 412px-Telefon stehen. Sie
   stehen jetzt mittig im freien Platz. `safe` ist Pflicht: passt die Karte
   nicht mehr, fällt der Browser auf `start` zurück, statt sie oben
   abzuschneiden. Die Registrierung (--wide) bleibt bewusst oben — sie ist
   länger als der Bildschirm und beginnt am Anfang. Ab 900px unverändert. */
@media (max-width: 899.98px) {
  .auth-main:not(.auth-main--wide) { align-content: safe center; }
}

/* Zweispaltig nur dort, wo es auch eine zweite Spalte gibt. */
.auth-main--wide { max-width: calc(940px + var(--gutter) * 2); }
@media (min-width: 900px) {
  .auth-main--wide {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: var(--s-9);
    align-items: start;
    padding-top: var(--s-8);
  }
}

.auth-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}
.auth-card__head { margin-bottom: var(--s-5); }
.auth-card__title { font-size: 1.35rem; font-weight: 650; letter-spacing: -.028em; }
.auth-card__sub { margin-top: 6px; font-size: .9rem; color: var(--txt-3); line-height: 1.5; }
.auth-card__body { display: grid; gap: var(--s-4); }
.auth-messages { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }

/* Fußzeile der Karte: Wechsel zwischen Anmelden und Registrieren. */
.auth-alt {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--txt-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
}
.auth-alt a { color: var(--brand-txt); font-weight: 600; }
/* Die Links waren 17-23px hohe Trefferflächen. Das Polster hebt sie über die
   44px-Marke, ohne die Schriftgröße anzufassen — und der Zeilenabstand muss
   mitwachsen, weil die beiden Einträge auf dem Telefon untereinander brechen
   und 8px zwischen zwei Trefferflächen zu wenig sind. Dieselbe Gate wie bei
   .auth-foot a weiter unten: am Schreibtisch bleibt die Karte unverändert. */
@media (pointer: coarse) {
  .auth-alt { gap: var(--s-3) var(--s-4); }
  .auth-alt a { display: inline-block; padding-block: 11px; }
}
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Anbieter-Anmeldung */
.auth-social { display: grid; gap: var(--s-2); }
.auth-social__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  color: var(--txt);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.auth-social__btn:hover { background: rgba(255, 255, 255, .07); }
.auth-social__btn i { font-size: 1.05rem; }

.auth-or {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  /* --txt-4 auf --bg-2 sind 3,36:1 — unter der 4,5:1-Grenze für Text
     dieser Größe. --txt-3 kommt auf 5,84:1. Die Haarlinien links und
     rechts tragen die Trennung ohnehin, das Wort muss nur lesbar sein. */
  color: var(--txt-3);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Passwortfeld mit Sichtbarkeits-Umschalter */
.auth-pw { position: relative; }
.auth-pw .acc-input { padding-right: 44px; }
.toggle-password {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0;
  color: var(--txt-4);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.toggle-password:hover { color: var(--txt-2); }
/* Sichtbar bleiben die 34px, getroffen werden 44px: die Fläche wird nur
   nach aussen erweitert, das Feld daneben verschiebt sich dadurch nicht. */
.toggle-password::before { content: ""; position: absolute; inset: -5px; }

/* Argument-Spalte der Registrierung */
.auth-aside { display: grid; gap: var(--s-6); align-content: start; }
.auth-aside__title { font-size: 1.1rem; font-weight: 640; letter-spacing: -.02em; }
.auth-aside__lead { margin-top: 8px; color: var(--txt-2); font-size: .95rem; line-height: 1.6; }
.auth-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.auth-stats li { background: var(--bg-1); padding: var(--s-4); }
.auth-stats b { display: block; font-size: 1.25rem; font-weight: 660; letter-spacing: -.03em; }
.auth-stats span { display: block; margin-top: 2px; font-size: .78rem; color: var(--txt-3); line-height: 1.4; }
@media (max-width: 899.98px) {
  .auth-aside { display: none; }
}

.auth-foot {
  /* Das Gerüst setzt viewport-fit=cover, zeichnet also bis in die Ecken und
     unter den Gestenbalken. Ohne diesen Einzug liegen die Links darunter.
     Zwei Zeilen wie bei 100vh/100dvh oben, und aus demselben Grund: ein
     Browser ohne env() verwirft die ZWEITE Zeile — stünde env() im
     Kurzschreib-padding, verwürfe er das ganze Polster und die Links lägen
     auf der letzten Bildzeile. Der 0px-Rückfall hält den Schreibtisch gleich. */
  padding: var(--s-5) var(--gutter);
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: center;
  font-size: .8rem;
  color: var(--txt-4);
}
.auth-foot a { color: var(--txt-4); }
.auth-foot a:hover { color: var(--txt-2); text-decoration: underline; }
/* Impressum/Datenschutz/Risikohinweis waren 21px hohe Trefferflächen. Nur auf
   dem Touchgerät vergrößert — dieselbe Gate wie bei den 16px-Feldern weiter
   oben —, damit die Fußzeile am Schreibtisch ihre schlanke Höhe behält. Der
   Zeilenabstand fällt dabei weg: die Kästen bringen ihn selbst mit. */
@media (pointer: coarse) {
  .auth-foot { gap: 0 var(--s-4); }
  .auth-foot a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Verkaufsblock für Free und Testphase -------------------------------- */
/* Was das Abo freischaltet — mit Haken, nicht mit Schlössern. Eine Liste aus
   durchgestrichenen Sperren erzeugt Trotz; dieselben vier Punkte als „das
   bekommst du" lesen sich als Angebot. */

.acc-unlocks {
  display: grid;
  gap: 9px;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .acc-unlocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px var(--s-6); } }
.acc-unlocks li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: .875rem;
  color: var(--txt-2);
}
.acc-unlocks svg { flex: none; margin-top: 3px; width: 15px; height: 15px; color: var(--ok); }

/* Aktionszeile mit Preis und Zusicherung direkt am Knopf. */
.acc-card__foot--cta { align-items: center; gap: var(--s-4); }
.acc-cta-note {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: .8rem;
  color: var(--txt-4);
  line-height: 1.4;
}
.acc-cta-note b { color: var(--txt-2); font-weight: 620; font-size: .84rem; }
@media (max-width: 560px) {
  .acc-card__foot--cta { align-items: stretch; }
  .acc-cta-note { text-align: center; }
}

/* --- Upgrade-Angebot ----------------------------------------------------- */
/* Die einzige Stelle im Kontobereich, die etwas verkaufen darf — und auch nur
   dann, wenn es wirklich einen höheren Tarif gibt. Vorher stand hier ein
   „Tarife vergleichen"-Knopf, den auch ein Pro-Jahreskunde sah: eine
   Aufforderung ohne Ziel.

   Zurückhaltend gestaltet: ein blauer Rand und eine getönte Fläche, kein
   Verlauf und kein Leuchten. Das Argument steht im Text, nicht im Effekt. */

.acc-upsell {
  border: 1px solid rgba(91, 140, 255, .32);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(91, 140, 255, .07), rgba(91, 140, 255, .025));
  padding: var(--s-5) var(--s-6);
}
.acc-upsell__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.acc-upsell__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: rgba(91, 140, 255, .18);
  border: 1px solid rgba(91, 140, 255, .3);
  color: var(--brand-txt);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.acc-upsell__price { margin-left: auto; font-size: .9rem; color: var(--txt-2); white-space: nowrap; }
.acc-upsell__price b { color: var(--txt); font-weight: 640; }
.acc-upsell__headline {
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -.018em;
  line-height: 1.3;
  text-wrap: balance;
}
.acc-upsell__detail {
  margin-top: 6px;
  font-size: .875rem;
  color: var(--txt-2);
  line-height: 1.55;
  max-width: 60ch;
}
.acc-upsell__actions {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.acc-upsell__actions .btn { min-height: 40px; padding: 9px 18px; font-size: .875rem; }
.acc-upsell__second {
  font-size: .82rem;
  color: var(--txt-3);
}
.acc-upsell__second button {
  appearance: none; border: 0; background: none; padding: 0;
  color: var(--brand-txt); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.acc-upsell__second button:hover { color: var(--txt); }
@media (max-width: 560px) {
  .acc-upsell { padding: var(--s-5); }
  .acc-upsell__price { margin-left: 0; width: 100%; }
  .acc-upsell__actions .btn { width: 100%; }
}

/* Kompakte Variante für die Seitenspalte des Kontos. */
.acc-upsell--aside .acc-upsell__headline { font-size: .95rem; }
.acc-upsell--aside .acc-upsell__price { margin-left: 0; width: 100%; }
.acc-upsell--aside .acc-upsell__actions .btn { width: 100%; }

/* --- Ruhige Fußzeile der Kontoseite (Technik + Konto löschen) ------------- */
/* Die Löschfunktion war eine rote Karte in der Seitenspalte und damit eines
   der auffälligsten Elemente der Seite. Sie gehört ans Ende und leise: wer
   sie sucht, findet sie; wer sie nicht sucht, wird nicht daran erinnert. */
.acc-tail {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--txt-4);
}
.acc-tail__danger { color: var(--danger); font-weight: 560; }
.acc-tail__danger:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --- Leise Fußzeile der Abrechnung (Kündigen + Konto löschen) ------------- */
/* Dieselbe Haltung wie .acc-tail, nur zentriert unter dem Kartenstapel und
   ohne Rot im Ruhezustand. „Konto löschen" ist der letzte Ausweg, keine
   angebotene Aktion: rot und fett wäre es das Auffälligste am Seitenende und
   stünde damit lauter da als „Abo kündigen" — die Handlung, die fast jeder
   hier eigentlich sucht. Es erbt deshalb das Grau der Zeile und färbt sich
   erst bei Hover/Fokus auf --danger, wenn der Zeiger ohnehin schon dort ist.
   Der Trenner ist aria-hidden: Screenreader lesen zwei Links, kein Satzzeichen.

   Leise heisst nicht blass: der Link steht auf --txt-3, nicht auf dem --txt-4
   der Zeile. Auf dem Seitengrund kommt --txt-4 nur auf 3,7:1 und reisst damit
   als 13-px-Bedienelement die 4,5:1 aus WCAG AA; --txt-3 liegt bei 6,4:1.
   Dieselbe Abwaegung steht schon bei .acc-quietaction — eine Aktion, die man
   sucht, muss man finden. Zurueckgenommen bleibt sie trotzdem, weil daneben
   ein blauer, halbfetter .acc-inlinelink steht. --txt-4 traegt hier nur den
   Trenner, der nichts bedeutet. */
.acc-footlinks {
  margin-top: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--txt-4);
}
.acc-footlinks__sep { opacity: .45; user-select: none; }
.acc-footlinks__danger { color: var(--txt-3); transition: color .15s ease; }
.acc-footlinks__danger:hover,
.acc-footlinks__danger:focus-visible {
  color: var(--danger);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Nummerierte Schritte (nach dem Kauf) -------------------------------- */
/* Optisch identisch zu .steps in landing.css, aber unter eigenem Namen: die
   Erfolgsseite läuft im Konto-Gerüst, und das lädt landing.css bewusst NICHT.
   Ohne diese Regeln wäre die „So geht es weiter"-Liste ein nackter <ul>. */

.acc-steps {
  display: grid;
  gap: var(--s-3);
  margin: 0 auto;
  max-width: 640px;
}
@media (min-width: 720px) {
  .acc-steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
}
.acc-steps li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .022);
}
.acc-steps b {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-soft);
  border: 1px solid rgba(91, 140, 255, .3);
  color: var(--brand-txt);
  font-size: .78rem;
  font-weight: 660;
}
.acc-steps span { font-size: .88rem; color: var(--txt-2); line-height: 1.45; text-align: left; }

/* --- Leerzustand --------------------------------------------------------- */

.acc-empty {
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  background: rgba(0, 0, 0, .12);
}
.acc-empty__title { font-size: .95rem; font-weight: 620; color: var(--txt-2); }
.acc-empty__sub { margin-top: 6px; font-size: .85rem; color: var(--txt-4); max-width: 46ch; margin-inline: auto; }
.acc-empty__actions { margin-top: var(--s-5); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* --- Ladezustand auf Buttons --------------------------------------------- */
/* Jede Aktion hier fasst Stripe an. Ein zweiter Klick auf „Kündigen" oder
   „Weiter zu Stripe" ist teuer, deshalb sperrt billing.js den Button und
   diese Regeln machen die Sperre sichtbar. */

.btn.is-busy {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn.is-busy::after {
  content: "";
  position: absolute;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--txt);
  animation: acc-spin .6s linear infinite;
}
.btn--primary.is-busy::after { color: #04170d; }
@keyframes acc-spin { to { transform: rotate(360deg); } }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Verknüpfte Konten --------------------------------------------------- */

.acc-links { display: grid; gap: var(--s-2); }
.acc-linkrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .16);
  font-size: .9rem;
}
.acc-linkrow__icon {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05);
  color: var(--txt-2);
  font-size: .95rem;
}
.acc-linkrow__name { font-weight: 580; }
.acc-linkrow__state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--txt-3);
  white-space: nowrap;
}
.acc-linkrow__state svg { width: 14px; height: 14px; color: var(--ok); }
.acc-linkrow form { margin-left: auto; }
.acc-linkrow .btn { min-height: 34px; padding: 6px 14px; font-size: .82rem; }

/* --- Gefahrenzone -------------------------------------------------------- */

.acc-danger {
  border-color: rgba(242, 109, 120, .22);
  background: linear-gradient(100deg, rgba(242, 109, 120, .05), var(--bg-2) 60%);
}
.acc-danger .acc-card__title { color: var(--danger); }

/* --- Technische Details -------------------------------------------------- */

.acc-details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .16);
  overflow: hidden;
}
.acc-details > summary {
  padding: 11px 14px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--txt-3);
  font-weight: 560;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.acc-details > summary::-webkit-details-marker { display: none; }
.acc-details > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s var(--ease-out);
}
.acc-details[open] > summary::before { transform: rotate(90deg); }
.acc-details > summary:hover { color: var(--txt-2); }
.acc-details__body { padding: 0 14px 13px; }
.acc-details__body .acc-dl__v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; word-break: break-all; }

/* --- Rückfrage-Dialog (ersetzt window.confirm) --------------------------- */
/* Kündigung und Kontolöschung fragten bis zum 12.09.2026 über window.confirm
   zurück. Das ist ein graues Systemfenster: die nackte Hostadresse als Titel,
   „OK/Abbrechen" in der Browsersprache, kein Bezug zur Seite darunter, keine
   Möglichkeit zu sagen, WAS gleich passiert. Ausgerechnet an der Stelle, an
   der jemand über ein bezahltes Abo entscheidet, sah die Seite damit aus, als
   hätte sie einen Fehler.

   Diese Karte baut billing.js EINMAL und benutzt sie für jedes
   `form[data-confirm]` — Titel, Text, Knopfbeschriftung und Ton liefert das
   Formular als data-Attribute. Ohne Skript bleibt es wie bisher: das Formular
   sendet direkt, es geht nichts verloren.

   Die Form ist absichtlich aus .onb-modal (onboarding.css:343) übernommen,
   das seinerseits aus elap_help.css stammt: zentriert auf dem Desktop, unten
   angeschlagenes Blatt auf dem Telefon. Ein drittes Dialog-Idiom gewänne
   nichts. Farbe kommt vollständig aus den `tone--*`-Klassen weiter oben. */

.acc-modal {
  position: fixed;
  inset: 0;
  /* Über der Schublade aus _nav.html — die liegt auf 190 (Hintergrund),
     200 (Blatt) und 210 (ihr Knopf). Ein Dialog, über den der Schubladen-
     Knopf ragt, ist keiner. */
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
}

.acc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 10, .72);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.acc-modal__dialog {
  position: relative;
  width: min(460px, 100%);
  /* Zwei Zeilen wie bei .page: 100vh ist auf dem Telefon die GROSSE
     Ansichtshöhe, die erste bleibt nur als Rückfallebene. */
  max-height: calc(100vh - var(--s-9));
  max-height: calc(100dvh - var(--s-9));
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2xl);
  background: var(--bg-2);
  box-shadow: var(--sh-lg);
  animation: acc-modal-in .18s var(--ease-out) both;
}

.acc-modal__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tone-bg, rgba(255, 255, 255, .05));
  border: 1px solid var(--tone-line, var(--line-2));
  color: var(--tone-color, var(--txt-3));
}
.acc-modal__icon svg { width: 20px; height: 20px; display: block; }

.acc-modal__title {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: 650;
  color: var(--txt);
}

.acc-modal__body {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--txt-2);
}

/* Rechtsbündig und auf Textbreite, nicht zwei halbe Hälften: „Kündigung
   absenden" brach bei erzwungen gleicher Breite auf zwei Zeilen um, und ein
   umgebrochener Knopf neben einem einzeiligen sieht kaputt aus. Die
   Bestätigung steht rechts — dieselbe Seite, auf der sie im Systemfenster
   stand, das hier ersetzt wird. */
.acc-modal__actions {
  align-self: stretch;
  margin-top: var(--s-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
}
.acc-modal__actions .btn { min-height: 48px; }

/* Der Bestätigungsknopf trägt die Tonfarbe als Fläche — Rot für „unwider-
   ruflich", Bernstein für „endet zum Laufzeitende". Dunkler Text darauf und
   nicht Weiss: --danger (#f26d78) und --warn (#f5b544) sind beide zu hell.
   Dieselbe Wahl trifft .btn--primary auf der Landingpage (#04170d auf Grün).

   Eigener Name statt .btn--primary, weil account.css:52 die Primärfläche auf
   Markenblau festlegt — und Blau heisst hier „weiter", nicht „löschen". */
.acc-modal__go {
  background: var(--tone-color, var(--brand));
  border-color: rgba(255, 255, 255, .16);
  color: #0b0d12;
  box-shadow: none;
}
/* account.css:58 schaltet den Hover-Effekt der App-Buttons global ab; hier
   ist er die einzige Rückmeldung, die der Knopf hat. */
.acc-modal__go:hover { filter: brightness(1.08); }
.acc-modal__go.is-busy::after { color: #0b0d12; }

@keyframes acc-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
}
@keyframes acc-sheet-in {
  from { opacity: 0; transform: translateY(16px); }
}

/* Solange der Dialog steht, scrollt die Seite darunter nicht mit. Als Klasse
   und nicht als style.overflow: so bleibt eine fremde Inline-Regel heil. */
.acc-scrolllock, .acc-scrolllock body { overflow: hidden; }

@media (max-width: 640px) {
  /* Unten angeschlagen statt zentriert — die Form, die das Produkt für
     Dialoge schon benutzt. */
  .acc-modal { padding: 0; align-items: flex-end; }
  .acc-modal__dialog {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    padding: var(--s-5) var(--gutter);
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
    animation-name: acc-sheet-in;
  }
  /* Untereinander und über die volle Breite, und der Weg ZURÜCK unten: der
     Daumen liegt auf der unteren Kante, und dort gehört bei einer Kündigung
     nicht die Bestätigung hin. column-reverse dreht nur die Anzeige — die
     Tabulator-Reihenfolge bleibt Abbrechen → Bestätigen. */
  .acc-modal__actions { flex-direction: column-reverse; }
  .acc-modal__actions .btn { width: 100%; }
}

/* --- Kleinteiliges ------------------------------------------------------- */

.acc-inlinelink { color: var(--brand-txt); font-weight: 560; }
.acc-inlinelink:hover { text-decoration: underline; text-underline-offset: 2px; }

.acc-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: .8rem;
  color: var(--txt-4);
}
.acc-legal a { color: var(--txt-3); }
.acc-legal a:hover { color: var(--txt-2); text-decoration: underline; }

.acc-sronly {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .acc-state__icon--waiting { animation: none; }
  .acc-modal__dialog { animation: none; }
  .btn.is-busy::after { animation-duration: 1.6s; }
  .acc-meter__fill { transition: none; }
}