/* MAX LEAN — Konto und Bestellungen
   Eigene Datei statt Anbau an main.css: an main.css arbeiten regelmaessig andere
   Sitzungen gleichzeitig, und ein Zusammenfuehren von zwei Haenden in derselben
   1.500-Zeilen-Datei ist die teuerste Art, Zeit zu verlieren.
   Farben und Schrift kommen ausschliesslich aus den Variablen in main.css. */

.konto-wrap{max-width:560px;margin:0 auto;padding:120px var(--s4,24px) var(--s8,96px)}
.konto-wrap.is-weit{max-width:880px}

.konto-eyebrow{font:600 11px/1 var(--fb);letter-spacing:.22em;text-transform:uppercase;
  color:var(--chrome);margin-bottom:var(--s3,16px)}
.konto-titel{font:800 clamp(30px,5vw,44px)/1.05 var(--fd);letter-spacing:-.01em;
  text-transform:uppercase;color:var(--paper);margin-bottom:var(--s4,24px)}
.konto-text{font:400 15px/1.65 var(--fb);color:var(--chrome);margin-bottom:var(--s5,32px)}

/* ---- Reiter Anmelden / Registrieren ---- */
.konto-tabs{display:flex;gap:2px;margin-bottom:var(--s5,32px);border-bottom:1px solid var(--line-dark)}
.konto-tab{flex:1;background:none;border:0;cursor:pointer;padding:14px 8px;
  font:700 12px/1 var(--fd);letter-spacing:.12em;text-transform:uppercase;
  color:var(--chrome);border-bottom:2px solid transparent;transition:color .25s ease,border-color .25s ease}
.konto-tab[aria-selected="true"]{color:var(--paper);border-bottom-color:var(--violet-chrome)}
.konto-tab:hover{color:var(--paper)}

/* ---- Formular ---- */
.konto-feld{margin-bottom:var(--s4,24px)}
.konto-feld label{display:block;font:600 11px/1 var(--fb);letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome);margin-bottom:8px}
.konto-feld input{width:100%;background:#0E0E11;border:1px solid var(--line-dark);
  color:var(--paper);font:400 15px/1.4 var(--fb);padding:14px 16px;transition:border-color .25s ease}
.konto-feld input:focus{outline:none;border-color:var(--violet-chrome)}
.konto-feld input[aria-invalid="true"]{border-color:#C0392B}
.konto-hinweis{font:400 12px/1.5 var(--fb);color:var(--chrome);margin-top:6px}

.konto-knopf{width:100%;background:var(--grad-signature);color:var(--paper);border:0;cursor:pointer;
  font:700 13px/1 var(--fd);letter-spacing:.12em;text-transform:uppercase;padding:18px 30px;
  transition:filter .3s ease}
.konto-knopf:hover:not(:disabled){filter:brightness(1.14)}
.konto-knopf:disabled{opacity:.5;cursor:default}

.konto-neben{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:var(--s4,24px)}
.konto-link{background:none;border:0;padding:0;cursor:pointer;font:600 11px/1 var(--fb);
  letter-spacing:.12em;text-transform:uppercase;color:var(--chrome);
  border-bottom:1px solid rgba(168,172,176,.5);padding-bottom:4px}
.konto-link:hover{color:var(--paper)}

/* ---- Konto löschen ---- */
/* Der Gefahr-Knopf ist bewusst NICHT rot-grell, sondern nur klar abgesetzt: ein greller
   Knopf wird reflexhaft gedrückt oder reflexhaft gemieden. Hier soll man vorher lesen. */
.konto-knopf.is-gefahr{background:none;border:1px solid #C0392B;color:#E8A49C}
.konto-knopf.is-gefahr:hover:not(:disabled){background:rgba(192,57,43,.12);filter:none}

.konto-loesch-info{border-left:2px solid var(--line-dark);padding-left:var(--s4,24px);
  margin-bottom:var(--s5,32px)}
.konto-loesch-info p{font:400 14px/1.65 var(--fb);color:var(--chrome);margin:0 0 14px}
.konto-loesch-info p:last-child{margin-bottom:0}
.konto-loesch-info strong{color:var(--paper);font-weight:600}
.konto-loesch-info a{color:var(--violet-chrome);border-bottom:1px solid var(--violet-chrome)}

/* ---- Meldungen ---- */
.konto-meldung{padding:14px 16px;font:400 14px/1.5 var(--fb);margin-bottom:var(--s4,24px);
  border-left:2px solid}
.konto-meldung[data-art="fehler"]{background:rgba(192,57,43,.10);border-color:#C0392B;color:#E8A49C}
.konto-meldung[data-art="gut"]{background:rgba(155,79,194,.10);border-color:var(--violet-chrome);color:var(--paper)}
.konto-meldung[hidden]{display:none}

/* ---- Bestellliste ---- */
.best-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:var(--s5,32px)}
.best-karte{border:1px solid var(--line-dark);background:#0E0E11;padding:var(--s4,24px);
  margin-bottom:var(--s3,16px)}
.best-zeile1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  flex-wrap:wrap;margin-bottom:var(--s3,16px)}
.best-nummer{font:800 16px/1 var(--fd);letter-spacing:.04em;color:var(--paper)}
.best-datum{font:400 12px/1 var(--fb);color:var(--chrome)}

/* Der Status ist der einzige farbige Punkt auf der Karte — deshalb traegt er auch die
   ganze Information. Kein Zierstreifen, gleiche Lehre wie bei der Dashboard-Leadkarte. */
.best-status{display:inline-block;font:700 10px/1 var(--fd);letter-spacing:.14em;
  text-transform:uppercase;padding:7px 11px;border:1px solid}
.best-status[data-s="bezahlt"]{color:#C7C2B8;border-color:rgba(199,194,184,.45)}
.best-status[data-s="gepackt"]{color:#C7C2B8;border-color:rgba(199,194,184,.45)}
.best-status[data-s="versandt"]{color:#CD9FE2;border-color:var(--violet-chrome)}
.best-status[data-s="zugestellt"]{color:#CD9FE2;border-color:var(--violet-chrome);
  background:rgba(155,79,194,.12)}
.best-status[data-s="storniert"],.best-status[data-s="erstattet"]{color:#E8A49C;border-color:#C0392B}

.best-posten{list-style:none;margin:0 0 var(--s3,16px);padding:0}
.best-posten li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-dark);font:400 14px/1.4 var(--fb);color:var(--paper)}
.best-posten li:last-child{border-bottom:0}
.best-posten .best-menge{color:var(--chrome);white-space:nowrap}

.best-fuss{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  flex-wrap:wrap;padding-top:var(--s3,16px);border-top:1px solid var(--line-dark)}
.best-adresse{font:400 12px/1.6 var(--fb);color:var(--chrome)}
.best-summe{font:800 18px/1 var(--fd);color:var(--paper);white-space:nowrap}
.best-tracking{display:inline-block;margin-top:10px;font:600 11px/1 var(--fb);
  letter-spacing:.12em;text-transform:uppercase;color:var(--violet-chrome);
  border-bottom:1px solid var(--violet-chrome);padding-bottom:4px}
.best-tracking:hover{color:var(--paper);border-color:var(--paper)}

.best-leer{border:1px dashed var(--line-dark);padding:var(--s6,48px) var(--s4,24px);
  text-align:center;font:400 15px/1.6 var(--fb);color:var(--chrome)}

/* Ladezustand: ein ruhiger Platzhalter statt eines springenden Spinners. */
.best-skelett{height:150px;border:1px solid var(--line-dark);background:
  linear-gradient(90deg,#0E0E11 0%,#141419 50%,#0E0E11 100%);background-size:200% 100%;
  animation:best-schimmer 1.4s ease-in-out infinite;margin-bottom:var(--s3,16px)}
@keyframes best-schimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  .best-skelett{animation:none}
}

@media (max-width:640px){
  .konto-wrap{padding-top:96px}
  .best-fuss{flex-direction:column;align-items:flex-start}
}