/* ══════════════════════════════════════════════════════════════════════
   Kundenportal — nur was der Shop nicht schon hat.

   Die Marke steht in shop.css: Schriften, Farben, Abstände, .btn,
   .container, .brand, .iconbtn, .muted, .visually-hidden. Diese Datei
   ergänzt die Bausteine, die es nur hier gibt, und definiert KEINE Farbe
   und KEINE Schrift selbst — sonst gäbe es die Marke zweimal, und die
   zweite Fassung veraltet.

   Alle eigenen Klassen tragen "p-". Nicht aus Ordnungsliebe: .grid und
   .card heissen im Shop etwas anderes (.grid ist das Produktraster mit
   minmax(300px,1fr)), und die alte Portalfassung benutzte dieselben Namen
   für ein Definitionsraster. Ohne Präfix hätte das Portal beim Umstellen
   still das Produktraster bekommen.
   ══════════════════════════════════════════════════════════════════════ */

.p-shell { max-width: 68ch; margin: 0 auto; padding: var(--sp-6) 0 var(--sp-8); }

/* ── Kopfzeile des Portals ─────────────────────────────────────────── */

.p-head { margin-bottom: var(--sp-6); }

.p-head h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text-strong);
  margin: 0 0 var(--sp-2);
}

.p-head p { margin: 0; color: var(--text-muted); }

/* ── Karte ────────────────────────────────────────────────────────── */

.p-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}

@media (min-width: 600px) { .p-card { padding: var(--sp-5) var(--sp-6); } }

.p-card > h2 {
  font-size: 1.2rem;
  letter-spacing: -.015em;
  color: var(--text-strong);
  margin: 0 0 var(--sp-1);
}

.p-card > h2 + .p-mono { margin-top: 0; }

/* ── Angaben als Definitionsliste ──────────────────────────────────── */

.p-facts {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  grid-template-columns: max-content 1fr;
  margin: var(--sp-4) 0;
  font-size: .95rem;
}

.p-facts dt { color: var(--text-muted); }
.p-facts dd { margin: 0; }

/* Auf schmalen Geräten übereinander: zwei Spalten mit langen Domänennamen
   sprengen sonst die Zeile, und "max-content" kann nicht umbrechen. */
@media (max-width: 480px) {
  .p-facts { grid-template-columns: 1fr; gap: 0; }
  .p-facts dt { margin-top: var(--sp-3); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
  .p-facts dt:first-child { margin-top: 0; }
}

/* ── Zustandsmarken ───────────────────────────────────────────────── */

.p-pill {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}

.p-pill--ok   { color: var(--lime-ink); border-color: var(--lime); background: var(--bg-tint); }
.p-pill--warn { color: #8a5a11; border-color: #E3C489; background: #FBF3E3; }

/* Im Dunkelmodus tragen die hellen Flächen nicht. Beide Wege gesetzt: der
   Umschalter (data-theme) UND die Systemvorgabe, sonst bleibt eine der
   beiden Zustände auf heller Fläche mit hellem Text. */
:root[data-theme="dark"] .p-pill--ok   { color: var(--lime); background: rgba(161,202,59,.12); }
:root[data-theme="dark"] .p-pill--warn { color: #DCB968; border-color: #6A5526; background: rgba(220,185,104,.12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-pill--ok   { color: var(--lime); background: rgba(161,202,59,.12); }
  :root:not([data-theme="light"]) .p-pill--warn { color: #DCB968; border-color: #6A5526; background: rgba(220,185,104,.12); }
}

/* ── Meldungen ────────────────────────────────────────────────────── */

.p-note {
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: .95rem;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.p-note--ok  { border-color: var(--lime); background: var(--bg-tint); color: var(--text); }
.p-note--bad { border-color: #E0AFA9; background: #FBEFED; color: #8C2F28; }

:root[data-theme="dark"] .p-note--ok  { background: rgba(161,202,59,.10); }
:root[data-theme="dark"] .p-note--bad { border-color: #5A2E29; background: rgba(224,175,169,.10); color: #E8A79F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-note--ok  { background: rgba(161,202,59,.10); }
  :root:not([data-theme="light"]) .p-note--bad { border-color: #5A2E29; background: rgba(224,175,169,.10); color: #E8A79F; }
}

/* ── Kennungen und Schlüsselvorspann ──────────────────────────────── */

.p-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  letter-spacing: .02em;
}

/* ── Formulare ────────────────────────────────────────────────────── */

.p-inline {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.p-field {
  font: inherit;
  padding: .8rem 1rem;
  min-height: 52px;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.p-field::placeholder { color: var(--text-muted); }

.p-field:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(18,49,111,.18);
}

:root[data-theme="dark"] .p-field:focus-visible { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(161,202,59,.22); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-field:focus-visible { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(161,202,59,.22); }
}

.p-form { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 0; }
.p-form .btn { justify-self: start; }

/* Der Hinweis unter einem Feld gehört zum Feld, nicht zum Abstand darunter. */
.p-hint { margin: calc(var(--sp-2) * -1) 0 0; font-size: .88rem; color: var(--text-muted); }

/* ── Aufklappbares ────────────────────────────────────────────────── */

.p-more { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-4); }

.p-more > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text-strong);
  list-style: none;
}

.p-more > summary::-webkit-details-marker { display: none; }
.p-more > summary::before { content: "＋"; display: inline-block; width: 1.3em; color: var(--text-muted); font-weight: 400; }
.p-more[open] > summary::before { content: "－"; }
.p-more > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: var(--r-sm); }

:root[data-theme="dark"] .p-more > summary:focus-visible { outline-color: var(--lime); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-more > summary:focus-visible { outline-color: var(--lime); }
}

/* ── Art der Lizenz ───────────────────────────────────────────────── */

.p-art { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-2); }

/* Zwei Arten, zwei ruhige Farben - NICHT die Zustandsfarben. Grün für "aktiv"
   und grün für "Abo" nebeneinander wären zwei Aussagen in einer Farbe. */
.p-pill--abo    { color: var(--navy); border-color: var(--navy); background: var(--bg-soft); }
.p-pill--einmal { color: var(--text-muted); border-color: var(--border-strong); background: var(--surface-2); }

:root[data-theme="dark"] .p-pill--abo { color: #9DB6E8; border-color: #3B5590; background: rgba(157,182,232,.10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-pill--abo { color: #9DB6E8; border-color: #3B5590; background: rgba(157,182,232,.10); }
}

.p-was-passiert {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--border-strong);
  background: var(--bg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .91rem;
  line-height: 1.55;
  color: var(--text);
}

/* ── Lizenzschlüssel mit Auge ─────────────────────────────────────── */

.p-key {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
}

.p-key__wert {
  font-size: .9rem;
  letter-spacing: .04em;
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--text);
  /* Der Schlüssel ist lang. Umbrechen statt die Karte sprengen, und an den
     Trennstrichen — mitten in einer Gruppe umgebrochen liest ihn niemand ab. */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.p-key__wert--fehler { color: var(--weg, #8C2F28); border-color: #E0AFA9; background: #FBEFED; }

:root[data-theme="dark"] .p-key__wert--fehler { color: #E8A79F; border-color: #5A2E29; background: rgba(224,175,169,.10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-key__wert--fehler { color: #E8A79F; border-color: #5A2E29; background: rgba(224,175,169,.10); }
}

.p-key__auge {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.p-key__auge svg { width: 18px; height: 18px; }
.p-key__auge:hover { color: var(--text-strong); border-color: var(--navy); }
.p-key__auge:disabled { opacity: .5; cursor: progress; }

.p-key__auge:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
:root[data-theme="dark"] .p-key__auge:hover,
:root[data-theme="dark"] .p-key__auge:focus-visible { color: var(--lime); border-color: var(--lime); outline-color: var(--lime); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-key__auge:hover,
  :root:not([data-theme="light"]) .p-key__auge:focus-visible { color: var(--lime); border-color: var(--lime); outline-color: var(--lime); }
}

/* Offen = durchgestrichenes Auge, geschlossen = offenes Auge. Das Sinnbild
   zeigt, was der Druck TUT, nicht was gerade ist. */
.p-key__auge .i-zu { display: none; }
.p-key__auge[aria-pressed="true"] .i-auf { display: none; }
.p-key__auge[aria-pressed="true"] .i-zu { display: block; }

/* Fehlermeldung an einer Aktion — z.B. ein abgelaufener Update-Zeitraum beim
   Paket-Download. Kein Rot auf Rot: der Rahmen traegt die Warnung, der Text
   bleibt lesbar.

   Die Randfarbe kommt aus einem Merkmal, nicht als Literal: ein Literal haette
   nur in einem der beiden Erscheinungsbilder getragen. Die Werte sind dieselben
   wie bei .p-pill--warn, damit "Warnung" im Portal ueberall gleich aussieht. */
:root { --warn-line: #E3C489; }
:root[data-theme="dark"] { --warn-line: #6A5526; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --warn-line: #6A5526; }
}

.p-fehler {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--warn-line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;
}

/* Schlüsselmail erneut senden. Die Antwort steht neben dem Knopf und nicht
   darunter: sie ist eine Quittung, kein Absatz. */
.p-mail__antwort { margin-inline-start: var(--sp-3, .75rem); font-size: .9rem; color: var(--soft, #555); }
.p-mail__antwort--fehler { color: var(--danger, #b00020); }

/* Ein vergangenes Datum.

   Das Wort steht im Markup, nicht nur die Farbe: eine Farbe allein traegt
   keine Aussage -- nicht fuer jedes Auge und nicht auf Papier. Die Farbe ist
   die zweite Spur, nicht die einzige. Werte wie bei .p-pill--warn, damit
   "vorbei" und "Abgelaufen" im Portal dieselbe Sprache sprechen. */
.p-vorbei {
  margin-left: var(--sp-2);
  font-size: .8125rem;
  font-weight: 600;
  color: #8a5a11;
  white-space: nowrap;
}
:root[data-theme="dark"] .p-vorbei { color: #DCB968; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-vorbei { color: #DCB968; }
}

/* Der Weg nach vorn unter einer Karte. */
.p-weiter {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  margin: var(--sp-4) 0 0;
}
.p-weiter .muted { font-weight: 400; }

/* Der Dringlichkeitshinweis unter dem Verlängerungsknopf.
   Dieselbe Farbe wie .p-vorbei und .p-pill--warn -- im Portal soll "Achtung"
   überall gleich aussehen. */
.p-dringlich {
  margin: var(--sp-2) 0 0;
  font-size: .875rem;
  font-weight: 600;
  color: #8a5a11;
}
:root[data-theme="dark"] .p-dringlich { color: #DCB968; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-dringlich { color: #DCB968; }
}

/* Das Modulsymbol oben rechts auf der Lizenzkarte.

   Die Karte bekommt dafuer Platz auf der rechten Seite statt einer
   Positionierung im Fluss: `position:absolute` haette bei langen Modulnamen
   die Ueberschrift darunter geschoben. So weicht der Text aus, und das Bild
   steht immer an derselben Stelle.

   object-fit deckt den Fall ab, dass kein *-mark.png vorliegt und das
   640x360-Band einspringt -- es wird beschnitten statt verzerrt. */
.p-card--mitbild { position: relative; }
.p-card--mitbild > h2,
.p-card--mitbild > .p-art { padding-right: calc(72px + var(--sp-4)); }

.p-card__symbol {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  object-fit: cover;
  display: block;
}

@media (min-width: 600px) { .p-card--mitbild > .p-card__symbol { right: var(--sp-6); } }

/* Schmaler Bildschirm: kleiner, damit der Modulname nicht auf vier Zeilen
   umbricht. */
@media (max-width: 460px) {
  .p-card__symbol { width: 52px; height: 52px; }
  .p-card--mitbild > h2,
  .p-card--mitbild > .p-art { padding-right: calc(52px + var(--sp-3)); }
}

/* ---- Partnerprogramm ------------------------------------------------------
   Reiter zwischen Lizenzen und Partnerbereich, nur für Konten mit beiden
   Rollen. Beschriftete Felder und ein Häkchen für die Anmeldung. */
.p-tabs { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); border-bottom: 1px solid var(--border); }
.p-tabs a {
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.p-tabs a:hover { color: var(--text-strong); }
.p-tabs a[aria-current="page"] { color: var(--text-strong); border-bottom-color: var(--navy); font-weight: 600; }
.p-tabs a:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--r-sm); }

.p-label { display: grid; gap: var(--sp-1); font-weight: 600; }
.p-label .p-field, .p-label .muted { font-weight: 400; }
.p-check { display: flex; gap: var(--sp-2); align-items: flex-start; }
.p-check input { margin-top: .3em; flex: none; }
.p-list { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--sp-2); }

/* ---- Partnerbereich ---------------------------------------------------- */
.p-shell--breit { max-width: none; } /* bündig mit Kopf- und Fusszeile */
.p-subnav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.p-subnav a {
    padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--border);
    color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
.p-subnav a:hover { color: var(--text-strong); border-color: var(--border-strong); }
.p-subnav a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
:root[data-theme="dark"] .p-subnav a[aria-current="page"] { background: var(--lime); border-color: var(--lime); color: var(--navy-900); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .p-subnav a[aria-current="page"] { background: var(--lime); border-color: var(--lime); color: var(--navy-900); }
}

.p-zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.p-zeitraum .p-field { width: auto; }

.p-dash { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: var(--sp-4); }
.p-dash .p-card { margin: 0; }
.p-tile__titel { font-size: 1rem; margin: 0 0 var(--sp-2); }
.p-tile__zahl { font-size: 1.9rem; font-weight: 700; color: var(--text-strong); margin: 0; font-variant-numeric: tabular-nums; }
.p-tile__fuss { font-size: .85rem; color: var(--text-muted); margin: var(--sp-2) 0 0; }
.p-tile__paar { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.p-tile__paar dt { color: var(--text-muted); }
.p-tile__paar dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.p-tile__tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* Zahlenspalten gemittelt und mit Abstand: rechtsbündig klebten die Käufe
   an der Rate («3 0.8 %»). */
.p-tile__tabelle th, .p-tile__tabelle td { padding: 2px .3em; text-align: center; font-weight: 400; white-space: nowrap; }
.p-tile__tabelle th:first-child { text-align: left; padding-left: 0; color: var(--text-muted); }
.p-tile__tabelle thead th { font-size: .8rem; color: var(--text-muted); }
.p-tile__tabelle td { font-weight: 600; }

.p-fortschritt { height: 8px; border-radius: var(--r-pill); background: var(--bg-soft); border: 1px solid var(--border); overflow: hidden; margin-top: var(--sp-3); }
.p-fortschritt span { display: block; height: 100%; background: var(--p-chart); border-radius: var(--r-pill); }

/* Diagramme: eine Reihe je Diagramm, Farbe validiert gegen die Fläche
   (dataviz: hell #2A55B8 auf #FFFFFF, dunkel #6F961F auf #131D34). */
:root { --p-chart: #2A55B8; }
:root[data-theme="dark"] { --p-chart: #6F961F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p-chart: #6F961F; } }

.p-charts { display: grid; gap: var(--sp-5); }
.p-chart { margin: 0; }
.p-chart__titel { font-weight: 600; color: var(--text-strong); margin-bottom: var(--sp-2); }
.p-chart__rahmen { display: grid; grid-template-columns: 4.75rem 1fr; gap: var(--sp-2); }
.p-chart__y { display: flex; flex-direction: column; justify-content: space-between; height: 140px; font-size: .75rem; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.p-chart__flaeche { position: relative; min-width: 0; }
.p-chart svg { display: block; width: 100%; height: 140px; overflow: visible; }
.p-chart__raster { stroke: var(--border); stroke-width: 1; }
.p-chart__balken { fill: var(--p-chart); }
.p-chart__treffer { fill: transparent; }
.p-chart__spalte:hover .p-chart__treffer { fill: var(--bg-soft); }
.p-chart__x { position: relative; height: 1.4em; font-size: .75rem; color: var(--text-muted); }
.p-chart__x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.p-chart__leer { position: absolute; inset: 0 0 1.4em; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: .9rem; }

.p-tabelle-rahmen { overflow-x: auto; }
.p-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.p-tabelle th, .p-tabelle td { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.p-tabelle th { font-weight: 600; color: var(--text-muted); font-size: .82rem; }
.p-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }

.p-trichter { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0 0; border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.p-trichter dt { font-size: .78rem; color: var(--text-muted); }
.p-trichter dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-strong); }

.p-feldgruppe { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); margin: 0; }
.p-feldgruppe legend { font-weight: 600; padding: 0 var(--sp-1); }
.p-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.p-link .p-key__wert { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.p-kit { margin-top: var(--sp-3); }
.p-kit__liste { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.p-kit__stueck { display: flex; gap: var(--sp-3); align-items: flex-start; }
.p-kit__bild { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); flex: none; }
.p-kit__text { display: grid; gap: var(--sp-2); width: 100%; }
.p-kit__text textarea { resize: vertical; font-size: .9rem; }

/* ---- Verwaltung -------------------------------------------------------- */
.p-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.p-zeile:last-child { border-bottom: none; }
.p-knoepfe { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Kopfzeile im Portal: Zur Laden-Kopfzeile kommt die Abmeldung dazu. Auf
   schmalen Bildschirmen würde der Warenkorb-Knopf sonst rechts abgeschnitten.
   Die Adresse entfällt dort; wer angemeldet ist, sieht es am «Abmelden». */
/* Neben Logo, Menü, Sprachwahl, Hell/Dunkel und Warenkorb ist im 1200 px
   breiten Kopf kein Platz für eine Adresse: Sie drückte den Knopf nach
   unten oder den Warenkorb über den Rand. Sie steht deshalb nur als
   Tooltip auf «Abmelden» und für Vorleseprogramme im Text. */
.top__konto { flex-wrap: nowrap; }
.top__konto .p-mono { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
    .top__tools { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--sp-2); }
}

/* Kit in der Verwaltung: Vorschau und Bearbeiten */
.p-kitzeile { align-items: flex-start; }
.p-kitzeile__info { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; flex: 1 1 20rem; }
.p-kitzeile__form { flex-basis: 100%; margin-top: var(--sp-2); }
/* .p-form setzt display: grid und hebt damit das hidden-Attribut auf;
   ohne diese Zeile stünden alle Formulare von Anfang an offen. */
.p-kitzeile__form[hidden] { display: none; }
.p-vorschau { max-width: min(92vw, 1100px); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); background: var(--surface); color: var(--text); }
.p-vorschau::backdrop { background: rgba(12, 31, 71, .55); }
.p-vorschau__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.p-vorschau img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; background: var(--surface-2); }

/* Durchgehen des Partnerbereichs, 18.10.2026 */
/* Formulare in breiten Seiten: links bündig, aber nicht über die ganze Breite. */
.p-card--formular { max-width: 48rem; }

/* Module als Liste, 18.10.2026. Spalten: Modul · Link · drei Zahlen · Knopf.
   Die Kopfzeile trägt die Bezeichnungen; in den Zeilen stehen sie nur auf
   schmalen Bildschirmen, wo die Spalten untereinander rutschen. */
.p-modulliste { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.p-modulzeile { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.p-modulzeile__haupt { display: grid; grid-template-columns: minmax(17rem, 1fr) minmax(18rem, 2fr) 10rem 10.5rem; gap: var(--sp-3) var(--sp-4); align-items: center; }
.p-modulliste__kopf { padding: var(--sp-2) 0; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.p-modulliste__kopf .muted { font-weight: 400; }
.p-modulliste__kopf .p-modulzeile__zahlen span { white-space: nowrap; }
.p-modulzeile--aktiv .p-modulzeile__name::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; border-radius: 50%; background: var(--p-chart); vertical-align: .12em; }
.p-modulzeile__name { margin: 0; font-size: 1rem; }
.p-modulzeile__satz { margin: var(--sp-1) 0 0; font-size: .85rem; }
.p-modulzeile__link { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
/* Einzeilig; der Knopf daneben kopiert ohnehin den ganzen Link. Wird es zu
   eng, fallen die Auslassungspunkte VORNE an (rtl), damit Partner und
   Modulkürzel am Ende sichtbar bleiben. Der Link beginnt und endet mit
   Buchstaben, darum ordnet rtl nichts um. */
.p-modulzeile__link .p-key__wert { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; font-size: .78rem; }
.p-modulzeile__zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: 0; text-align: right; }
.p-modulzeile__zahlen dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p-modulzeile__zahlen dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.p-modulzeile__knopf { justify-self: end; }
.p-modulzeile__knopf .btn { white-space: nowrap; }
.p-modulzeile .p-kit { margin-top: var(--sp-2); padding-top: 0; border-top: none; }
/* In der breiten Zeile nebeneinander; Texte brauchen die ganze Breite. */
.p-modulzeile .p-kit__liste { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.p-modulzeile .p-kit__stueck:has(.p-kit__text) { grid-column: 1 / -1; }
@media (max-width: 960px) {
  .p-modulliste__kopf { display: none; }
  .p-modulzeile__haupt { grid-template-columns: 1fr auto; gap: var(--sp-3); }
  .p-modulzeile__link { grid-column: 1 / -1; grid-row: 2; }
  .p-modulzeile__link .p-key__wert { white-space: normal; overflow-wrap: anywhere; direction: ltr; }
  .p-modulzeile__zahlen { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .p-modulzeile__zahlen dt { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .78rem; color: var(--text-muted); }
  .p-modulzeile__knopf { grid-column: 2; grid-row: 1; align-self: start; }
}

/* Zusammensetzung des auszahlbaren Betrags in der Kachel. */
.p-zusammensetzung { margin-top: var(--sp-3); padding-top: var(--sp-3); }
.p-zusammensetzung .p-tabelle { margin-top: var(--sp-2); }

/* Verwaltung: Partnerliste mit aufklappbarer Statistik je Partner. */
.p-tabelle tr.p-partnerzeile td { border-bottom: none; }
.p-tabelle tr.p-partnermehr td { padding-top: 0; white-space: normal; }
.p-partnermehr .p-more { margin: 0; padding: 0; border-top: none; }
.p-partnerzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.p-partnerzahlen dt { font-size: .78rem; color: var(--text-muted); }
.p-partnerzahlen dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.p-partnermodule { max-width: 40rem; margin-bottom: var(--sp-3); }
.p-partnermehr__knopf { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-2); }

/* Ansicht als Partner: ein Band über dem Inhalt, solange sie läuft. */
.p-alspartner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: #12316F; color: #fff; }
.p-alspartner strong { color: #fff; }
.p-alspartner .btn { background: #fff; color: #12316F; border-color: #fff; }

/* Hub testen: links der Text, rechts das Formular, das beim Lesen stehen
   bleibt. Schmal untereinander, das Formular vor den Fragen. */
.p-hub { display: grid; gap: var(--sp-4); grid-template-areas: "text" "wie" "formular" "fragen"; }
.p-hub > .p-card { margin: 0; }
.p-hub__text { grid-area: text; }
.p-hub__wie { grid-area: wie; }
.p-hub__formular { grid-area: formular; }
.p-hub__fragen { grid-area: fragen; }
@media (min-width: 960px) {
  .p-hub {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "text formular" "wie formular" "fragen formular";
    align-items: start;
  }
  .p-hub__formular { position: sticky; top: var(--sp-4); }
}

/* Felder nebeneinander, gleich breit, sofern nicht anders gewichtet. */
.p-inline--felder { flex-wrap: nowrap; align-items: stretch; }
.p-inline--felder > .p-label { flex: 1 1 0; min-width: 0; }

/* Hub: Ringe und Verläufe (App\Support\Diagramm). Eine Farbe je Reihe:
   Markenblau, im Dunkeln Limette; Raster und Achsen zurückhaltend. */
.p-dia { --dia: var(--navy-600); --dia-spur: var(--border); }
:root[data-theme="dark"] .p-dia { --dia: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-dia { --dia: var(--lime); } }
.p-hub-oben { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); align-items: start; }
.p-ringe { display: flex; gap: var(--sp-4); }
.p-ring { margin: 0; text-align: center; width: 118px; }
.p-ring figcaption { display: flex; flex-direction: column; font-size: .82rem; line-height: 1.35; margin-top: var(--sp-1); }
.p-dia__ring { width: 104px; height: 104px; display: block; margin: 0 auto; }
.p-dia__spur { fill: none; stroke: var(--dia-spur); stroke-width: 10; }
.p-dia__wert { fill: none; stroke: var(--dia); stroke-width: 10; stroke-linecap: round; }
.p-dia__mitte { fill: var(--text-strong); font-size: 17px; font-weight: 600; }
.p-verlaeufe { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0 var(--sp-3); }
.p-verlaeufe figure { margin: 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md, 10px); background: var(--surface-2); }
.p-verlaeufe figcaption { font-size: .85rem; font-weight: 600; color: var(--text-strong); margin-bottom: var(--sp-2); }
.p-dia__flaeche-svg { width: 100%; height: auto; display: block; overflow: visible; }
.p-dia__raster { stroke: var(--border); stroke-width: 1; }
.p-dia__achse { fill: var(--text-muted); font-size: 11px; }
.p-dia__saeule { fill: var(--dia); }
.p-dia__linie { fill: none; stroke: var(--dia); stroke-width: 2; stroke-linejoin: round; }
.p-dia__flaeche { fill: var(--dia); opacity: .14; }
.p-dia__treffer { fill: transparent; }
.p-dia__treffer:hover { fill: var(--dia); opacity: .08; }
@media (max-width: 760px) {
  .p-hub-oben { grid-template-columns: 1fr; }
  .p-ringe { justify-content: space-between; gap: var(--sp-2); }
  .p-ring { width: auto; flex: 1; }
}

/* Hub: Statuszeile. Punkt UND Wort: der Zustand hängt nie an der Farbe allein. */
.p-hub-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.p-online { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--text-strong); }
.p-online .muted { font-weight: 400; }
.p-online__punkt { width: 9px; height: 9px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46,158,91,.18); }
.p-online--an .p-online__punkt { animation: p-puls 2.4s ease-in-out infinite; }
.p-online--aus .p-online__punkt { background: #C8372D; box-shadow: 0 0 0 3px rgba(200,55,45,.18); }
@keyframes p-puls { 50% { box-shadow: 0 0 0 6px rgba(46,158,91,0); } }
@media (prefers-reduced-motion: reduce) { .p-online--an .p-online__punkt { animation: none; } }

/* Hub-Verwaltung: Lagebild und Ampel. */
.v-lage { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.v-kachel { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); font-size: .85rem; }
.v-kachel--warn { border-color: #E3C489; }
.v-kachel__titel { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.v-kachel__wert { font-size: 1.6rem; font-weight: 600; color: var(--text-strong); line-height: 1.2; }
.v-zustaende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--sp-3); }
.v-zustaende strong { color: var(--text-strong); font-size: 1rem; }
.v-balken { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin: 4px 0; max-width: 140px; }
.v-balken > span { display: block; height: 100%; border-radius: 3px; background: var(--navy-600); }
:root[data-theme="dark"] .v-balken > span { background: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-balken > span { background: var(--lime); } }
.v-instanzen td { vertical-align: top; }
.v-ampel { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; margin: 0 .5rem 2px 0; white-space: nowrap; }
.v-ampel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.v-ampel--ok { color: #2E7D4F; }
.v-ampel--warn { color: #9A6512; }
.v-ampel--bad { color: #B3261E; }
.v-ampel--offen { color: var(--text-muted); font-weight: 400; }
:root[data-theme="dark"] .v-ampel--ok { color: #6FCF97; }
:root[data-theme="dark"] .v-ampel--warn { color: #DCB968; }
:root[data-theme="dark"] .v-ampel--bad { color: #F28B82; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v-ampel--ok { color: #6FCF97; }
  :root:not([data-theme="light"]) .v-ampel--warn { color: #DCB968; }
  :root:not([data-theme="light"]) .v-ampel--bad { color: #F28B82; }
}