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