/*
 * Die Bauteile, die das Plugin selbst rendert.
 *
 * Zwei Stellen im Kaufweg kommen nicht aus Bricks und koennen es nicht:
 *
 *   1. Der Paketrechner auf der Produktseite. Er haengt in
 *      `woocommerce_before_add_to_cart_button`, also INNERHALB des
 *      Formulars, das Woo rendert. Er muss dort sein: Der Preis wird
 *      serverseitig gerechnet und geprueft, sonst rechnet der Browser den
 *      Preis, und das ist kein Preis, das ist ein Vorschlag.
 *   2. Die Seite „Schluessel" im Kundenkonto. Sie ist ein eigener
 *      Konto-Endpunkt mit Nonce-gesicherten Aktionen (Geraet abmelden). Ein
 *      Vorlagentyp `wc_account_schluessel` ist im Bricks-Handbuch nicht
 *      belegt, und einen zu raten hiesse, die Geraeteverwaltung an eine
 *      Vermutung zu haengen.
 *
 * Deshalb steht ihre Gestaltung hier. Die Werte kommen aus
 * `terrazzo.css`, und die wird aus `designsystem/tokens.json` erzeugt. Hier
 * steht kein einziger Farbwert, nur Namen: Sonst laufen die beiden Haelften
 * des Kaufwegs auseinander, und genau das war der Zustand, mit dem diese
 * Arbeit angefangen hat.
 *
 * Die Klassennamen sind deutsch und nach BEM, wie im ganzen Projekt, und
 * tragen das Praefix `jecky-`: Sie stehen in fremdem Markup, zwischen
 * WooCommerce und dem Theme.
 */

/* ══════════════════════════════════════════════ Der Paketrechner */

.jecky-pakete {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  color: var(--ink);
  font-family: var(--schrift-text);
}

/*
 * Kein eigener Rahmen, kein eigener Grund.
 *
 * Der Rechner steht immer in der Karte der Produktvorlage, und zwei Rahmen
 * ineinander sind ein Kasten im Kasten. Vorher hatte er beides, und in der
 * Vorschau war sofort zu sehen, warum das nicht geht. Die Karte traegt den
 * Rahmen, der Rechner den Inhalt.
 */

.jecky-pakete__frage {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.02em;
}

.jecky-pakete__erklaerung {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

/* Der Zaehler. Alle drei Ziele mindestens 44 px: Das ist die Regel des
   Systems, und hier wird mit dem Daumen getippt wie in der App. */
.jecky-pakete__zaehler {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.jecky-pakete__knopf {
  width: var(--ziel-komfort);
  height: var(--ziel-komfort);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--schrift-display);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.jecky-pakete__knopf:hover:not(:disabled) {
  background: var(--orange-soft);
  border-color: var(--orange);
}

.jecky-pakete__knopf:disabled { opacity: .45; cursor: default; }

.jecky-pakete__knopf:focus-visible,
.jecky-pakete__zahl:focus-visible,
.jecky-pakete__schluessel:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.jecky-pakete__zahl {
  width: 5.25rem;
  height: var(--ziel-komfort);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--schrift-display);
  font-size: var(--h3);
  font-weight: 700;
  /* Ziffern gleicher Breite: Ohne das springt die Zahl beim Zaehlen. */
  font-variant-numeric: tabular-nums;
}

/* Die Pfeilchen des Zahlenfeldes weg: Sie sind 12 px hoch, stehen neben
   zwei 56-px-Knoepfen, die dasselbe tun, und auf dem Telefon trifft sie
   niemand. */
.jecky-pakete__zahl { -moz-appearance: textfield; }
.jecky-pakete__zahl::-webkit-outer-spin-button,
.jecky-pakete__zahl::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.jecky-pakete__umfang {
  color: var(--ink-muted);
  font-size: var(--body-sm);
}

/* Die Laufzeit: zwei Karten, nicht zwei Radiobuttons in einer Zeile. Ein
   Verein entscheidet hier zwischen einem Jahr und drei, und das ist die
   zweitgroesste Entscheidung auf der Seite. */
.jecky-pakete__laufzeit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.jecky-pakete__wahl {
  flex: 1 1 15rem;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: var(--ziel-komfort);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.jecky-pakete__wahl:hover { border-color: var(--line-strong); }

/* Die gewaehlte Karte traegt die weiche Markenflaeche, nicht das volle
   Orange: Das gehoert dem Kaufknopf, und im System gibt es je Ansicht genau
   eine orange Flaeche. */
.jecky-pakete__wahl:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.jecky-pakete__wahl input { margin-top: .2rem; accent-color: var(--orange); }

.jecky-pakete__wahl b {
  font-family: var(--schrift-display);
  font-size: var(--label);
  font-weight: 700;
}

.jecky-pakete__wahl small {
  display: block;
  margin-top: .15rem;
  color: var(--ink-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

/* Der Preis. Die groesste Zahl auf der Seite, und eine, die sich aendert:
   tabular-nums, damit sie beim Zaehlen nicht wandert. */
.jecky-pakete__preis {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: var(--display-l);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.jecky-pakete__notiz {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* „Ich habe schon einen Schluessel": zugeklappt, weil es die Ausnahme ist. */
.jecky-pakete__bestand {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.jecky-pakete__bestand > summary {
  display: flex;
  align-items: center;
  min-height: var(--ziel-min);
  cursor: pointer;
  font-size: var(--label);
  font-weight: 600;
  color: var(--link);
}

.jecky-pakete__bestand > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.jecky-pakete__schluessel {
  width: 100%;
  max-width: 22rem;
  min-height: var(--ziel-komfort);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--body);
  letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
  .jecky-pakete__knopf, .jecky-pakete__wahl { transition: none; }
}

/* ══════════════════════════════════════════════ „Schluessel" im Konto */

.jecky-schluessel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.jecky-lizenz {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--schrift-text);
}

.jecky-lizenz__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
}

/* Der Schluessel selbst wird abgetippt, oft von jemand anderem als dem
   Kaeufer, oft vom Telefon. Deshalb Festbreitenschrift, weite Laufweite und
   Ziffern gleicher Breite. */
.jecky-lizenz__code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.jecky-lizenz__stand {
  font-size: var(--label);
  font-weight: 600;
  color: var(--teal-strong);
}

/* Abgelaufen oder gesperrt. Koralle als Schrift, nicht als Flaeche: Es ist
   ein Zustand und keine Warnung, und nichts ist weggenommen worden. */
.jecky-lizenz__stand--aus { color: var(--coral-strong); }

.jecky-lizenz__staende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.jecky-stand { flex: 1 1 13rem; display: flex; flex-direction: column;
  gap: var(--space-1); }

.jecky-stand__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.jecky-stand__name {
  font-family: var(--schrift-display);
  font-size: var(--label);
  font-weight: 700;
}

.jecky-stand__zahl {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jecky-stand__balken {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--stone);
  overflow: hidden;
}

.jecky-stand__fuellung {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--teal-strong);
}

/* Voll heisst nicht kaputt: Der Balken wird orange und nicht rot. Wer alle
   drei Geraete benutzt, hat das Paket ausgeschoepft und nichts falsch
   gemacht. Rot war hier die falsche Farbe. */
.jecky-stand__fuellung--voll { background: var(--orange); }

.jecky-stand__hinweis {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--body-sm);
  line-height: 1.5;
}

/* Die Geraeteliste. Auf dem Telefon wird aus jeder Zeile eine Karte: Vier
   Spalten auf 390 px sind vier unlesbare Spalten. */
.jecky-geraete { width: 100%; border-collapse: collapse; }

.jecky-geraete th {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--schrift-text);
  font-size: var(--caption);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.jecky-geraete td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--body-sm);
}

.jecky-geraete__name { font-weight: 600; }
.jecky-geraete__taenze { color: var(--ink-muted); font-weight: 400; }
.jecky-geraete__tat { text-align: right; }

.jecky-abmelden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ziel-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink);
  font-size: var(--body-sm);
  font-weight: 600;
  text-decoration: none;
}

.jecky-abmelden:hover { background: var(--stone); color: var(--ink); }

.jecky-abmelden:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.jecky-abmelden--alle {
  border-color: var(--coral-strong);
  color: var(--coral-strong);
}

.jecky-abmelden--alle:hover {
  background: var(--coral-soft);
  color: var(--coral-strong);
}

.jecky-lizenz__fuss {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

.jecky-lizenz__fuss a { color: var(--link); }

@media (max-width: 767px) {
  .jecky-geraete, .jecky-geraete tbody { display: block; }
  .jecky-geraete thead { display: none; }
  .jecky-geraete tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
  }
  .jecky-geraete td { display: block; padding: 0; border: 0; }
  .jecky-geraete__name { grid-column: 1; grid-row: 1; }
  .jecky-geraete__seit { grid-column: 1; grid-row: 2; color: var(--ink-muted); }
  .jecky-geraete__zuletzt { grid-column: 1; grid-row: 3; color: var(--ink-muted); }
  .jecky-geraete__tat { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  /* Auf dem Telefon sagt „abmelden" allein zu wenig, sobald die Kopfzeile
     der Tabelle weg ist. Woo macht dasselbe mit `data-title`. */
  .jecky-geraete__seit::before { content: "Freigeschaltet: "; }
  .jecky-geraete__zuletzt::before { content: "Zuletzt: "; }
}

/* ══════════════════════════════════════════════ Schlüssel nach dem Kauf */
/*
 * Der Block auf der Dankeseite und in der Bestellübersicht. Er stand vorher
 * als WooCommerce-Tabelle da, mit drei Spalten auf 390 px Breite. Jetzt ist
 * jeder Schlüssel eine Karte: Was man abtippt, gehört nicht in eine Zelle.
 */

.jecky-schluessel-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  font-family: var(--schrift-text);
  color: var(--ink);
}

.jecky-schluessel-liste__titel {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.02em;
}

/* Auf Orange, weil der Schlüssel hier die Handlung IST. Schrift darauf ist
   Navy und nicht Weiß: Weiß erreicht auf diesem Orange nicht einmal 3:1. */
.jecky-schluessel-karte {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--orange);
  color: var(--on-accent);
  text-align: center;
}


.jecky-schluessel-karte__code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.125rem, 4.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.jecky-schluessel-karte__umfang {
  font-size: var(--body-sm);
  line-height: 1.5;
}

.jecky-schluessel-liste__hinweis {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--body-sm);
  line-height: 1.6;
}

.jecky-schluessel-liste__hinweis a { color: var(--link); }

/* ══════════════════════════════════ Das Kundenkonto, ganz */

/*
 * Bisher war am Kundenkonto nur gestaltet, was Jecky selbst rendert: die
 * Seite „Schluessel" oben in dieser Datei. Alles andere kam von
 * WooCommerce und sah auch so aus: eine Liste ohne Form, Tabellen mit
 * Rahmen aus den Neunzigern, Formularfelder in Browser-Grau.
 *
 * Die Gestaltung der Navigation steht zusaetzlich als Element-Einstellung
 * an der Bricks-Vorlage. Das ist kein Widerspruch, sondern Absicht in zwei
 * Lagen:
 *
 *   * Bricks setzt seine Werte mit hoher Spezifitaet (ueber die Element-ID)
 *     und gewinnt dort, wo es etwas setzt.
 *   * Dieses Stilblatt haelt den Rest und greift auch dann, wenn die
 *     Vorlage gar nicht importiert ist. Genau das war der Zustand, in dem
 *     das Konto „ueberhaupt nicht gestaltet" aussah.
 *
 * Deshalb steht hier kein einziges `!important` und keine ID. Wer beides
 * uebereinanderlegt, bekommt die Bricks-Werte oben und diese darunter.
 */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;

  /*
   * Breite ausdruecklich, und das ist der ganze Trick.
   *
   * Auf der Website steht dieses Gitter als Kind IM Bricks-Element
   * `woocommerce-account-page`, und das ist ein Flex-Container in Reihe.
   * Ein Flex-Kind ohne eigene Breite schrumpft auf seinen Inhalt, und
   * weil `minmax(0, 1fr)` der zweiten Spalte erlaubt, bis null zu gehen,
   * schrumpfte sie auch: Der Schluessel stand danach senkrecht, ein
   * Zeichen je Zeile, und rechts war die halbe Seite leer.
   *
   * In der Vorschau fiel es nicht auf, weil das Gitter dort frei im
   * Fluss stand. Die Vorschau bildet den Flex-Container jetzt nach.
   */
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Auf dem Telefon untereinander, und die Navigation wird zur Zeile, die
   umbrechen darf. Eine Spalte von acht Punkten vor dem Inhalt waere auf
   einem schmalen Bildschirm eine Seite vor der Seite. */
@media (max-width: 991px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* ── Die Navigation ── */

/*
 * Breite und Schrumpfverhalten fuer BEIDE Faelle.
 *
 * Mit Bricks-Vorlage sind Navigation und Inhalt direkte Flex-Kinder des
 * Elements `woocommerce-account-page` (Einstellung „direction: row").
 * Ohne Vorlage stehen sie im Gitter weiter oben.
 *
 * Das `min-width: 0` am Inhalt ist im Gitter noetig, damit lange Zellen
 * umbrechen statt die Spalte aufzublasen. Als Flex-Kind heisst dieselbe
 * Zeile aber: „darf beliebig schmal werden" — und weil nichts sie wieder
 * wachsen liess, fiel der Inhalt auf die Breite seines kuerzesten Wortes
 * zusammen. Der Lizenzschluessel stand danach senkrecht, ein Zeichen je
 * Zeile. Das `flex: 1 1 0%` ist die fehlende Haelfte: erst darf sie
 * schrumpfen, dann soll sie den Rest der Reihe nehmen.
 */
.woocommerce-MyAccount-navigation { flex: 0 0 auto; width: 240px; max-width: 100%; }
.woocommerce-MyAccount-content { flex: 1 1 0%; min-width: 0; }

/* Umbrechen duerfen beide Anordnungen: das Gitter oben und das
   Flex-Element von Bricks. Darunter stapeln sich Navigation und Inhalt,
   statt sich 390 px zu teilen. */
.woocommerce-account .woocommerce,
.woocommerce-account .brxe-woocommerce-account-page { flex-wrap: wrap; }

@media (max-width: 991px) {
  .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-content { flex: 1 1 100%; width: 100%; }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@media (max-width: 991px) {
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: var(--ziel-min);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  color: var(--ink);
  font-family: var(--schrift-text);
  font-size: var(--label);
  font-weight: 600;
  line-height: 1.43;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--stone);
}

/*
 * Der laufende Punkt traegt die einzige orange Flaeche der Seite, und die
 * Schrift darauf ist das kraeftige Orange auf hellem Grund - nicht Weiss
 * auf Orange. Weiss auf Orange kommt auf 3,4:1 und faellt damit durch;
 * das steht so im Design System und gilt hier wie ueberall.
 */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--orange-soft);
  color: var(--orange-strong);
  font-weight: 700;
}

.woocommerce-MyAccount-navigation li a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Der Inhalt ── */

.woocommerce-MyAccount-content {
  color: var(--ink);
  font-family: var(--schrift-text);
  font-size: var(--body);
  line-height: 1.5;
}

.woocommerce-MyAccount-content > p {
  margin: 0 0 var(--space-4);
}

.woocommerce-MyAccount-content a {
  color: var(--link);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--schrift-display);
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.woocommerce-MyAccount-content > :first-child {
  margin-top: 0;
}

/* ── Tabellen: Bestellungen, Downloads, eine einzelne Bestellung ── */

/*
 * Als Karte und nicht als Gitter aus Linien. Woo liefert eine Tabelle mit
 * Rahmen an jeder Zelle; auf einem Telefon ergibt das acht Spalten in
 * einem Fenster, das vier vertraegt.
 */
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  margin: 0 0 var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface-raised);
  font-size: var(--body-sm);
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.woocommerce-MyAccount-content table.shop_table thead th {
  background: var(--stone);
  color: var(--ink-muted);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.woocommerce-MyAccount-content table.shop_table tr:last-child td {
  border-bottom: 0;
}

.woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-MyAccount-content table.shop_table tfoot td {
  background: var(--sand);
  font-weight: 700;
}

/*
 * Auf dem Telefon wird aus jeder Zeile eine Karte. Woo schreibt den
 * Spaltennamen in `data-title`, und der steht dann vor dem Wert - ohne
 * ihn waere eine Zelle mit „14,00 €" eine Zahl ohne Frage.
 */
@media (max-width: 767px) {
  .woocommerce-MyAccount-content table.shop_table thead { display: none; }
  .woocommerce-MyAccount-content table.shop_table tr {
    display: block;
    border-bottom: 1px solid var(--line);
  }
  .woocommerce-MyAccount-content table.shop_table tr:last-child { border-bottom: 0; }
  .woocommerce-MyAccount-content table.shop_table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 0;
    padding-block: var(--space-2);
  }
  .woocommerce-MyAccount-content table.shop_table td::before {
    content: attr(data-title);
    color: var(--ink-muted);
    font-size: var(--caption);
    font-weight: 600;
    flex-shrink: 0;
  }
  .woocommerce-MyAccount-content table.shop_table td:first-child { padding-top: var(--space-4); }
  .woocommerce-MyAccount-content table.shop_table td:last-child { padding-bottom: var(--space-4); }
}

/* ── Adressen ── */

.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin: 0;
}

.woocommerce-MyAccount-content .woocommerce-Address {
  width: auto;
  float: none;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

/* „Bearbeiten" in der Adresskarte ist ein Ziel fuer einen Daumen und kein
   Wort im Satz. Sichtbar bleibt es klein; gross ist die Flaeche darum. */
.woocommerce-MyAccount-content .woocommerce-Address-title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  padding-left: var(--space-3);
  font-size: var(--label);
  font-weight: 600;
}

.woocommerce-MyAccount-content .woocommerce-Address address {
  font-style: normal;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ── Formulare: Kontodaten, Adresse bearbeiten ── */

.woocommerce-MyAccount-content form .woocommerce-form-row,
.woocommerce-MyAccount-content form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
}

.woocommerce-MyAccount-content form label {
  color: var(--ink);
  font-size: var(--label);
  font-weight: 600;
  line-height: 1.43;
}

.woocommerce-MyAccount-content form .required { color: var(--coral-strong); }

.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea {
  width: 100%;
  min-height: var(--ziel-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--schrift-text);
  font-size: var(--body);
  line-height: 1.5;
}

.woocommerce-MyAccount-content form input:focus-visible,
.woocommerce-MyAccount-content form select:focus-visible,
.woocommerce-MyAccount-content form textarea:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: var(--focus-ring);
}

.woocommerce-MyAccount-content fieldset {
  margin: var(--space-6) 0 var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.woocommerce-MyAccount-content fieldset legend {
  padding: 0 var(--space-2);
  font-family: var(--schrift-display);
  font-size: var(--body);
  font-weight: 700;
  color: var(--ink);
}

/* ── Knoepfe: Pillen, wie ueberall ── */

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--ziel-min);
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--orange);
  color: var(--on-accent);
  font-family: var(--schrift-text);
  font-size: var(--label);
  font-weight: 700;
  line-height: 1.43;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover {
  background: var(--orange-hover);
}

/*
 * „Ansehen" in der Bestellliste ist kein Hauptweg. Stuende dort dieselbe
 * orange Pille wie unter dem Formular, haette eine Liste mit sechs
 * Bestellungen sechs Hauptwege.
 */
.woocommerce-MyAccount-content table.shop_table .button {
  min-height: var(--ziel-min);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-size: var(--caption);
}

.woocommerce-MyAccount-content table.shop_table .button:hover {
  background: var(--stone);
}

/* ── Meldungen ── */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--sand);
  color: var(--ink);
  font-size: var(--body-sm);
  list-style: none;
}

.woocommerce-account .woocommerce-message { border-color: var(--teal); background: var(--teal-soft); }
.woocommerce-account .woocommerce-error { border-color: var(--coral); background: var(--coral-soft); }

.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-error .button {
  margin-left: auto;
}

/* ── Blaetterwerk unter langen Listen ── */

.woocommerce-MyAccount-content .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.woocommerce-MyAccount-content .woocommerce-pagination li a,
.woocommerce-MyAccount-content .woocommerce-pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ziel-min);
  min-height: var(--ziel-min);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--label);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-MyAccount-content .woocommerce-pagination li span.current {
  background: var(--orange-soft);
  border-color: var(--orange-soft);
  color: var(--orange-strong);
}