/* ==========================================================================
   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; }

/* --- 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; }

/* --- 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; }
  .btn.is-busy::after { animation-duration: 1.6s; }
  .acc-meter__fill { transition: none; }
}