/* ============================================================
   account-page.css — Kundenkonto (account.html)
   Werte aus style.css (:root). Karten wie im Brand Kit: Grund #0e0909,
   Linie #1c1010, Radius 4px, Feuer nur auf der einen Aktion pro Kauf.
   ============================================================ */

.konto { padding: 0 0 120px; }
.konto .container { max-width: 880px; }

.konto__demo {
  margin-bottom: 20px; padding: 10px 14px; border-left: 2px solid var(--amber);
  background: var(--amber-dim); color: var(--text); font: 500 13px/1.5 var(--font-body);
}
.konto__laden { color: var(--text-2); font: 500 14px/1.6 var(--font-body); padding: 24px 0; }

.konto__karte {
  background: var(--bg-card); border: 1px solid var(--border); border-top: 2px solid var(--fire);
  border-radius: var(--radius-card); padding: 32px;
}
.konto__anmelden { max-width: 620px; }

.konto__label {
  display: block; margin-bottom: 10px; color: var(--text-2);
  font: 600 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
}
.konto__zeile { display: flex; gap: 12px; flex-wrap: wrap; }
.konto__feld {
  flex: 1 1 240px; min-width: 0; height: 52px; padding: 0 16px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font: 400 16px/1 var(--font-body);
}
.konto__feld:focus { outline: none; border-color: var(--fire); box-shadow: 0 0 0 3px var(--fire-glow); }
.konto__feld--code {
  flex: 0 1 280px; font: 600 24px/1 var(--font-display); letter-spacing: .24em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.konto__zeile .btn { height: 52px; }
.konto__klein { margin: 14px 0 0; color: var(--text-2); font: 400 13px/1.6 var(--font-body); }
.konto__gesendet { margin: 0 0 22px; color: #B8A9A3; font: 400 15px/1.65 var(--font-body); }
.konto__gesendet b { color: var(--text); font-weight: 600; }
.konto__link {
  background: none; border: 0; padding: 0; color: var(--text); cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-hot);
}
.konto__link:hover { text-decoration-color: var(--fire); }
.konto__meldung { min-height: 1em; margin: 16px 0 0; color: var(--amber); font: 500 14px/1.6 var(--font-body); }
.konto__meldung:empty { display: none; }

/* Angemeldet */
.konto__kopf {
  display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.konto__mail { font: 600 20px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--text); word-break: break-all; }
.konto__liste { display: grid; gap: 16px; }
.konto__hilfe { margin-top: 32px; max-width: 60ch; }

.kauf {
  display: grid; grid-template-columns: 112px 1fr; gap: 24px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px;
}
.kauf__cover {
  width: 112px; height: 112px; border-radius: var(--radius); border: 1px solid var(--border);
  object-fit: cover; background: var(--bg-surface); display: grid; place-items: center;
  font: 700 36px/1 var(--font-display); color: var(--text-3);
}
.kauf__inhalt { display: grid; gap: 16px; min-width: 0; }
.kauf__kopf { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
.kauf__name { margin: 0; font: 600 24px/1.15 var(--font-display); letter-spacing: -0.03em; color: var(--text); }
.kauf__meta { margin-top: 6px; color: var(--text-2); font: 500 12px/1.4 var(--font-display); letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
/* Widerrufsfunktion je Kauf (§ 356a BGB: hervorgehoben) */
.kauf__widerruf { color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-hot); }
.kauf__widerruf:hover { text-decoration-color: var(--fire); }
.kauf__tag {
  display: inline-block; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius);
  font: 600 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.kauf__aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.lizenz { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.schluessel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 10px 10px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.schluessel__wert {
  min-width: 0; flex: 1 1 auto; color: var(--text-2);
  font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;
  transition: color .16s ease;
}
/* Aufgedeckt: Schluessel ueber die volle Breite, Knoepfe darunter */
.schluessel__wert.offen { flex-basis: 100%; white-space: normal; word-break: break-all; color: var(--text); letter-spacing: 0; user-select: all; }
.lizenz__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.klein-knopf {
  background: none; border: 1px solid var(--border-hot); border-radius: var(--radius); color: var(--text);
  padding: 9px 14px; cursor: pointer; font: 600 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.klein-knopf:hover { border-color: var(--fire); }
.klein-knopf:active { transform: scale(.97); transition: transform 100ms ease-out; }

/* Download: kompakt, nebeneinander, Rueckmeldung schon beim Druecken */
.dl-knopf {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  background: var(--fire); color: #0b0707; border: 0; border-radius: var(--radius); cursor: pointer;
  font: 600 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .16s ease, transform .1s ease-out;
}
.dl-knopf:hover { background: var(--fire-hover); }
.dl-knopf:active { transform: scale(.97); }
.dl-knopf:disabled { opacity: .5; cursor: progress; }
.dl-knopf:focus-visible, .klein-knopf:focus-visible { outline: 2px solid var(--fire); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dl-knopf, .klein-knopf { transition: none; } .dl-knopf:active, .klein-knopf:active { transform: none; } }
.klein-knopf:disabled { opacity: .45; cursor: default; }
.klein-knopf.ok { border-color: #4FC677; color: #4FC677; }

.geraete { display: grid; gap: 0; margin-top: 6px; }
.geraet {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.geraet b { font: 600 15px/1.3 var(--font-body); color: var(--text); }
.geraet small { display: block; margin-top: 2px; color: var(--text-2); font: 400 12.5px/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.geraete__leer { padding: 12px 0; border-top: 1px solid var(--border); color: var(--text-2); font: 400 13px/1.5 var(--font-body); }

.konto__leer { color: #B8A9A3; font: 400 15px/1.65 var(--font-body); }
.konto__leer a { color: var(--text); }

.konto button:focus-visible, .konto a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

@media (max-width: 600px) {
  .konto__karte { padding: 22px 18px; }
  .kauf { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .kauf__cover { width: 88px; height: 88px; }
  .konto__zeile .btn { width: 100%; }
}