/* ================= Konto-Bereich =================
 *
 * Registrierung, Login, Mein Konto, Passwort vergessen und Vergleichsliste
 * hatten kein eigenes Design: Kopf und Fuss waren unsere, dazwischen stand
 * rohes NOVA-Bootstrap - graue Felder, Montserrat und ein gelber Knopf
 * (#f8bf00), den es sonst nirgends im Shop gibt.
 *
 * Hier wird nur die Optik umgebaut, kein Template kopiert. An NOVAs
 * Formularen haengen Pflichtfeldpruefung, Fehlertexte, Adressabgleich und
 * die Anrede-Logik; ein Nachbau muesste all das mitbringen und bei jedem
 * Shop-Update nachgezogen werden. Dieselbe Entscheidung wie bei den
 * Kassenformularen, siehe kasse.css.
 *
 * Gescoped ueber [data-page] am <body> - das setzt NOVA selbst
 * (layout/header.tpl, Zeile 407), es braucht dafuer keine Template-Aenderung.
 * Nummern aus includes/defines_inc.php: 4 Mein Konto, 9 Login,
 * 10 Registrierung, 14 Passwort vergessen, 16 Wunschzettel,
 * 17 Vergleichsliste. Die Unterseiten von "Mein Konto" (Bestellungen,
 * Adressen, Daten aendern) laufen ebenfalls unter 4 und sind damit mit
 * abgedeckt.
 *
 * Die 16 kam am 07.09.2026 dazu. Der CI-Audit (project/bin/ci-audit.mjs,
 * Lauf mit --sitzung) hat den Wunschzettel als einzige komplett
 * uneingekleidete Seite des Shops gemeldet: h1 in Montserrat und #525252,
 * zwei Knoepfe mit Bootstraps 2px-Radius. Sie war schlicht nie in dieser
 * Liste - gefunden wurde sie erst, als der Audit die Seiten hinter der
 * Anmeldung mitnahm. Die Nummer ist im laufenden Shop am <body> gemessen,
 * nicht aus der Doku uebernommen.
 *
 * :is() haelt die Selektoren lesbar. Fuer die Spezifitaet zaehlt es wie sein
 * staerkstes Argument, also wie ein einzelnes [data-page="…"] - die Regeln
 * sind damit genauso stark wie eine ausgeschriebene Liste, nur kuerzer.
 */

/* ---- Rahmen und Typografie ---- */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main {
  font-family: var(--font-body);
  color: var(--color-text);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main > .container {
  padding-top: 8px;
  padding-bottom: 72px;
}

/* Ueberschrift in der Anmutung von .wtitle (Warenkorb). */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-ink);
  margin: 14px 0 6px;
}
/* :not(h1) ist noetig, nicht kosmetisch: NOVA gibt der Seitenueberschrift
   <h1 class="h2">. Ohne den Ausschluss gewinnt diese Regel ueber die Klasse
   gegen die h1-Regel darueber, und die Anton-Zeile faellt auf Fliesstext
   zurueck. */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(h2,h3,.h2,.h3):not(h1) {
  font: 800 18px/1.3 var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink);
  margin: 0 0 14px;
}
/* NOVA nutzt .h3 auch als leise Abschnittsbeschriftung links neben der
   Feldgruppe ("Name", "Rechnungsadresse", "Kontaktdaten"). */
body:is([data-page="4"],[data-page="10"]) main :is(.form-row,.row) > [class*="col-md-4"] .h3 {
  font: 700 14px/1.4 var(--font-body);
  color: var(--color-text-muted);
  padding-top: 12px;
}

/* ---- Felder. Werte absichtlich identisch zu .kpanel .form-control ---- */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.form-control,.custom-select) {
  font: 400 14.5px/1.4 var(--font-body);
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  box-sizing: border-box;
  width: 100%;
  height: auto;
  box-shadow: none;
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.form-control,.custom-select):hover { border-color: var(--navy-400) }
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.form-control,.custom-select):focus {
  outline: none;
  border-color: var(--sky-600);
  box-shadow: var(--focus-ring);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  .form-control::placeholder { color: #8b99ad }
[data-theme="dark"] body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  .form-control::placeholder { color: #7f93b3 }

/* PLZ und Ort haengen an typeahead.js. Das Skript schreibt dem Feld
   "background-color: transparent" als Inline-Stil und legt einen zweiten
   Geisterinput (.tt-hint) darunter - im dunklen Modus blieben deshalb genau
   diese beiden Felder weiss, waehrend alle anderen mitdunkelten. Inline
   schlaegt jede Klasse, hier hilft nur !important. */
body:is([data-page="4"],[data-page="10"],[data-page="14"]) main .tt-input {
  background-color: var(--color-surface) !important;
}
body:is([data-page="4"],[data-page="10"],[data-page="14"]) main .tt-hint {
  background-color: transparent !important;
  color: var(--color-text-muted);
}
body:is([data-page="4"],[data-page="10"],[data-page="14"]) main .twitter-typeahead {
  width: 100%;
  display: block !important;
}
body:is([data-page="4"],[data-page="10"],[data-page="14"]) main .tt-menu {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
}

/* ---- Labels ----
   NOVA legt das Label mit .label-slide auf die obere Feldkante, damit es den
   Rahmen sauber durchschneidet, und verdrahtet den Grund dort fest auf Weiss.
   Im dunklen Modus blieb davon eine helle Platte stehen. Der Selektor
   spiegelt NOVAs eigenen (clear.css: ".label-slide .form-group:not(...)
   :not(...) label"), sonst gewinnt der mit vier Klassen gegen unsere zwei. */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"]) main
  .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label,
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"]) main
  :is(.col-form-label,label) {
  font: 600 13px/1.3 var(--font-body);
  color: var(--color-text-muted);
  background: var(--color-surface);
}
/* Der Pflichtfeld-Stern ist ein label::after mit fest verdrahtetem weissem
   Grund und dunklem Rot - auf Navy stand davon ein weisser Klotz. */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"]) main
  .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label::after,
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"]) main
  label::after {
  background: var(--color-surface);
  color: var(--color-error);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"]) main
  .form-group { margin-bottom: 16px }

/* Fehlermeldungen und Pflichtfeld-Sterne */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"]) main
  :is(.invalid-feedback,.form-error-msg) {
  color: var(--color-error);
  font: 600 12.5px/1.5 var(--font-body);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"]) main
  :is(.form-control,.custom-select).is-invalid { border-color: var(--color-error) }
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"]) main
  :is(.text-danger,.required-star) { color: var(--color-error) }

/* ---- Knoepfe. Der gelbe .btn-primary ist NOVAs Theme-Farbe und gehoert
       nicht zu dieser Marke. Werte aus komponenten.css .btn/.btn-pri. ---- */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 700 15px/1 var(--font-body);
  border-radius: var(--radius-pill);
  padding: 16px 27px;
  cursor: pointer;
  border: 0;
  transition: all var(--transition-fast);
  text-decoration: none;
  letter-spacing: .01em;
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.btn-primary,.btn-secondary) {
  background: var(--color-cta);
  color: var(--color-cta-ink);
  box-shadow: 0 12px 26px -14px rgba(17,28,53,.4);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.btn-primary,.btn-secondary):hover {
  background: var(--color-cta-hover);
  color: var(--color-cta-ink);
}
/* Zweitrangige Aktionen - "Zurueck", "Abbrechen" - bleiben eine Kontur. */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.btn-outline-primary,.btn-outline-secondary,.btn-link) {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-border-strong);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.btn-outline-primary,.btn-outline-secondary,.btn-link):hover {
  border-color: var(--navy-400);
  color: var(--color-ink);
}

/* ---- Flaechen, Linien, Meldungen ---- */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main .card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main .card-header {
  background: var(--color-surface-2);
  border-bottom: 1.5px solid var(--color-border);
  font: 800 15px/1.3 var(--font-body);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main hr {
  border-color: var(--hair);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.text-muted,.info) { color: var(--color-text-muted) }
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  a:not(.btn) { color: var(--color-link) }
/* Meldungen. NOVAs Bootstrap-Varianten bringen feste helle Toene mit und
   blieben im dunklen Modus als weisse Baender stehen. Die Tokens haben fuer
   Erfolg, Warnung und Fehler je ein eigenes Paar in beiden Modi; alles
   Uebrige (info, secondary, der Hinweis "Sie sind nicht angemeldet") ist
   neutral und bekommt die erhoehte Flaeche. */
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main .alert {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: 400 14px/1.55 var(--font-body);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main
  :is(.alert-danger,.alert-error) {
  background: var(--color-error-surface);
  border-color: var(--color-error);
  color: var(--color-text);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main .alert-success {
  background: var(--color-success-surface);
  border-color: var(--color-success);
  color: var(--color-text);
}
body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main .alert-warning {
  background: var(--color-warning-surface);
  border-color: var(--color-warning);
  color: var(--color-text);
}

@media (max-width: 640px) {
  body:is([data-page="4"],[data-page="9"],[data-page="10"],[data-page="14"],[data-page="16"],[data-page="17"]) main h1 {
    font-size: 30px;
  }
}

/* ---- Bestellstatus / Bestelldetails ("Deine Bestellung") ----
 *
 * Die Seite laeuft ueber account/order_details.tpl und traegt dort
 * `tw tw-bestellung kpanel`. Die eigentliche Einkleidung - Felder, Karten,
 * Knoepfe - kommt damit aus kasse.css und steht hier bewusst NICHT nochmal.
 * Hier nur, was dort fehlt oder kollidiert.
 */
.tw-bestellung{padding:28px 0 96px}
/* Kollision: `.kpanel h1` (kasse.css) setzt Ueberschriften auf 18px
 * Fliesstext und ist spezifischer als `.wtitle`. Ohne diese Regel waere die
 * Anton-Ueberschrift wieder ein fetter Absatz. */
.tw-bestellung .wtitle{font:400 40px/1.12 var(--font-display);text-transform:uppercase;letter-spacing:.02em;color:var(--color-ink);margin:0 0 20px}
[data-theme="dark"] .tw-bestellung .wtitle{color:var(--color-text-inverse)}
/* Die Kopfzeile der Karte (Datum, Bestellnummer, Status) ist bei NOVA ein
 * graues Band. Als ruhige Leiste in Markenfarben lesbar machen. */
.tw-bestellung .card-header{background:var(--color-surface-2);border-bottom:1px solid var(--hair);font:600 14px/1.5 var(--font-body);color:var(--color-text-muted)}
.tw-bestellung .card-header b,.tw-bestellung .card-header strong{color:var(--color-ink)}
@media (max-width:640px){
.tw-bestellung{padding:20px 0 64px}
.tw-bestellung .wtitle{font-size:30px}
}
/* NOVA faerbt den Versandhinweis (`small.text-info.notice`) auf ein festes
 * #525252. Im Hellmodus ist das nur fremd, im Dunkelmodus steht es als
 * dunkelgrau auf Navy und ist praktisch unlesbar - dasselbe NOVA-Erbe, das
 * DESIGN_SYSTEM.md unter "keine hartkodierten Farben" beschreibt. */
.tw-bestellung .text-info,.tw-bestellung .notice{color:var(--color-text-muted)!important}
/* `!important` ist hier noetig und kein Faulheitsfehler: `.text-info` ist
 * eine Bootstrap-Utility-Klasse, und die tragen ihr eigenes !important.
 * Ohne Gegengewicht gewinnt NOVAs Grau, egal wie spezifisch der
 * Selektor davor ist. */