/* Formulare und Kontoseiten. Baut auf legal.css auf — dieselbe Farbwelt,
   dieselben Schriften. Wird immer NACH legal.css eingebunden. */

body.auth {
    max-width: 480px;
    padding-top: 56px;
}
/* Die Kontoseite hat neun Karten in vier Gruppen -- braucht mehr Breite als
   ein einzelnes Formular, damit die Karten im Grid nebeneinander passen
   statt alle einzeln untereinander (siehe .panel-grid weiter unten). */
body.auth.wide { max-width: 900px; }

.auth-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 32px 28px;
}

.auth-card h1 { font-size: 1.6rem; margin-bottom: 6px; }
.auth-lead { margin-bottom: 26px; font-size: 0.96rem; }

label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    color: var(--text-light);
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    transition: border-color 0.15s ease;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

/* Die Auswahlliste erbt im Browser sonst helle Systemfarben. */
select { appearance: none; cursor: pointer; padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent-cyan) 50%),
                      linear-gradient(135deg, var(--accent-cyan) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
select option { background: #0B0B14; color: var(--text-light); }
input[aria-invalid="true"] { border-color: #FF6B6B; }

textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
/* Das Kalendersymbol kommt im dunklen Layout sonst schwarz auf schwarz. */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.6); cursor: pointer; }

.field { margin-bottom: 20px; }

/* Zustimmungen vor dem Kauf (Widerrufsverzicht, AGB) und die Bestaetigung im
   Kuendigungsformular. Mehrzeilig, deshalb oben ausgerichtet statt mittig. */
.field-checkbox.consent { align-items: flex-start; margin-bottom: 14px; }
.field-checkbox.consent input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.field-checkbox.consent label { font-size: 0.86rem; line-height: 1.55; color: var(--text-dim); }

/* Pflichtangaben unmittelbar ueber der Bestellschaltflaeche (§ 312j Abs. 2 BGB).
   Muss sichtbar zum Knopf gehoeren, nicht irgendwo auf der Seite stehen. */
.order-summary {
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0 14px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 0.88rem;
    line-height: 1.6;
}
.order-summary h3 { margin: 0 0 8px; font-size: 0.95rem; }
.order-summary ul { margin: 0; padding-left: 18px; }
.order-summary li { margin-bottom: 4px; }

/* Beleg nach der Kuendigung -- der Verbraucher soll ihn ausdrucken oder
   kopieren koennen (§ 312k Abs. 4 BGB). */
.receipt {
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 18px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.9rem;
    line-height: 1.7;
}
.receipt dt { color: var(--text-dim); font-size: 0.82rem; }
.receipt dd { margin: 0 0 10px; }
.receipt .reference { font-family: monospace; font-size: 1.1rem; color: var(--accent-cyan); }
.field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.field-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent-cyan);
    cursor: pointer;
}
.field-checkbox label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-light);
    cursor: pointer;
}
.hint { font-size: 0.82rem; color: var(--text-dim); margin: 0; }

button {
    width: 100%;
    padding: 13px 18px;
    margin-top: 6px;
    background: var(--accent-cyan);
    color: #05050A;
    border: none;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}
button:hover:not(:disabled) { filter: brightness(1.12); }
button:disabled { opacity: 0.5; cursor: progress; }

button.secondary {
    background: transparent;
    color: var(--accent-cyan);
    border: 1px solid var(--border-glass);
}
button.danger { background: transparent; color: #FF6B6B; border: 1px solid rgba(255,107,107,0.4); }

.msg {
    display: none;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.92rem;
    line-height: 1.55;
}
.msg.show { display: block; }
.msg.error   { background: rgba(255, 107, 107, 0.10); border: 1px solid rgba(255, 107, 107, 0.35); color: #FFB4B4; }
.msg.ok      { background: rgba(0, 229, 255, 0.08);   border: 1px solid rgba(0, 229, 255, 0.30);  color: #9BEEFB; }
.msg.working { background: var(--bg-glass); border: 1px solid var(--border-glass); }

.alt-links {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-glass);
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

details.optional { margin-bottom: 20px; }
details.optional summary {
    cursor: pointer;
    color: var(--accent-cyan);
    font-size: 0.9rem;
    margin-bottom: 12px;
}
details.optional summary::-webkit-details-marker { color: var(--accent-cyan); }

.kv { width: 100%; font-size: 0.94rem; }
.kv th { width: 42%; font-weight: 500; color: var(--text-dim); font-family: 'Roboto', sans-serif; }
.kv td { color: var(--text-light); }

section.panel {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
}
section.panel h2 { margin-top: 0; font-size: 1.05rem; }

.row-2 { display: flex; gap: 12px; flex-wrap: wrap; }
.row-2 > * { flex: 1 1 200px; }

@media (max-width: 600px) {
    body.auth { padding-top: 32px; }
    .auth-card { padding: 24px 20px; }
}

/* Zugangs-Key-Abschnitt (Konto-Seite) */
.key-box {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0;
    color: var(--text-light);
}
.key-box code { flex: 1 1 auto; font-size: 0.9rem; letter-spacing: 0.02em; word-break: break-all; background: none; }
.key-box button { width: auto; margin: 0; padding: 8px 14px; font-size: 0.82rem; flex-shrink: 0; }

.license-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.license-actions button { flex: 1 1 200px; margin-top: 0; }

/* ----------------------------------------------------- Kontoseiten-Layout
   Vorher lagen alle Karten einzeln untereinander in einer schmalen Spalte --
   bei neun Abschnitten viel Scrollen, kaum Uebersicht. Jetzt: eine kurze
   Sprungnavigation oben, und die Karten sitzen gruppiert in einem Grid, das
   sich je nach Platz von selbst auf 1-2 Spalten einstellt (keine feste
   Spaltenzahl noetig -- auto-fit erledigt das). Karten mit viel Inhalt
   (Zwei-Faktor-Auth) bekommen ueber .span-2 die volle Breite. */

.account-jumpnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: -8px 0 30px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-glass);
    font-family: 'Poppins', sans-serif;
    font-size: 0.86rem;
}
.account-jumpnav a {
    color: var(--text-dim);
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.account-jumpnav a:hover,
.account-jumpnav a:focus-visible { color: var(--accent-cyan); border-color: var(--accent-cyan); }

.panel-group { margin-bottom: 30px; }
.panel-group:last-child { margin-bottom: 0; }
.panel-group-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 14px 2px;
}

/* Erster Versuch war ein Karten-Grid, das Karten zeilenweise nebeneinander
   gesetzt hat (auto-fit) -- sah aber "gewuerfelt" aus: mal zwei Karten
   nebeneinander mit unterschiedlicher Hoehe, mal eine einzelne Karte, die
   ganz allein auf volle Breite gestreckt wurde, obwohl sie kaum Inhalt hatte
   (z. B. Subscription mit nur einem Satz Text auf 900px Breite). Jetzt
   stattdessen zwei feste, unabhaengige Spalten: links alles Informative
   ("Account"), rechts alles rund um Zugangsdaten ("Security"). Jede Spalte
   stapelt ihre eigenen Karten in normaler Breite -- kein Zeilen-Pairing
   mehr, das zufaellig ungleich hohe oder halbleere Karten nebeneinander
   setzen koennte. Konto loeschen bleibt bewusst als einzelne, volle Zeile
   ganz unten abgesetzt (siehe .panel-danger).*/
.account-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 30px;
}
.account-col .panel { margin-bottom: 20px; }
.account-col .panel:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
    .account-columns { grid-template-columns: 1fr; }
}

/* Konto-loeschen sticht bewusst farblich heraus, statt wie jede andere
   Einstellung auszusehen. */
.panel.panel-danger { border-color: rgba(255, 107, 107, 0.30); }
.panel.panel-danger h2 { color: #FFB4B4; }

@media (max-width: 600px) {
    .account-jumpnav { gap: 6px 16px; margin-bottom: 24px; padding-bottom: 14px; }
}