/* ============================================================
   Kundenlogin (felogin) — Haus-Optik
   ============================================================
   Das Anmeldeformular sitzt im Inhaltsbereich der Seite 30. Die
   Seite bringt Kopf („Anmeldung") und Fuss schon mit; hier bekommt
   nur das Formular selbst die Hausform: eine ruhige Karte mit den
   Haus-Feldern (.cd-feld) und dem roten Knopf.

   Die Feldstile (.cd-feld, .cd-feld__label, .cd-feld__eingabe)
   stehen in komponenten.css und werden hier NICHT wiederholt —
   das Template vergibt die Klassen, und die Felder sehen aus wie
   im Kontaktformular.
   ============================================================ */

.cd-login {
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-block: var(--cd-a2);
  padding: clamp(24px, 4vw, 40px);
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  box-shadow: var(--cd-schatten-karte);
  margin: 5em auto;
}

.cd-login__form {
  display: grid;
  gap: var(--cd-a4);
}

/* Der Anmelden-Knopf ist ein <input type="submit"> — der Browser
   gibt ihm sonst seine eigene Fläche. appearance:none übergibt die
   Optik ganz an .cd-knopf--rot. Volle Breite: ein Login-Knopf ist
   das Ziel der Karte, kein beiläufiger Verweis. */
.cd-login__knopf {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 100%;
  justify-content: center;
  margin-block-start: var(--cd-a2);
}

.cd-login__aktion {
  margin-block-start: var(--cd-a1);
}

/* Häkchenzeile „Angemeldet bleiben": Kästchen und Beschriftung in
   einer Zeile, nicht untereinander wie die Textfelder. */
.cd-feld--check {
  display: flex;
  align-items: center;
  gap: var(--cd-a2);
}
.cd-feld--check label {
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
  cursor: pointer;
}
.cd-feld--check input[type="checkbox"] {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--cd-rot);
  cursor: pointer;
}

/* Hinweise (Fehler/Info). Fehler in Hausrot getönt, ruhig gerahmt. */
.cd-login__flashes { list-style: none; margin: 0 0 var(--cd-a4); padding: 0; display: grid; gap: var(--cd-a2); }
.cd-login__hinweis {
  display: grid;
  gap: 2px;
  margin-block-end: var(--cd-a4);
  padding: 12px 14px;
  border-radius: var(--cd-r-feld);
  font-size: var(--cd-gr-klein);
  line-height: 1.5;
}
.cd-login__hinweis--fehler {
  background: #FBEBEC;
  border: 1px solid #F0C9CC;
  color: #9E0C12;
}
/* Gelungene Abmeldung. Gruen getoent und nicht neutral: Der Kunde
   soll auf einen Blick sehen, dass etwas GESCHEHEN ist — sonst
   liest sich der Kasten wie ein beilaeufiger Hinweis.
   Kontrast des Textes auf der Flaeche: 7,3:1 (AAA). */
.cd-login__hinweis--erfolg {
  background: #EAF5EE;
  border: 1px solid #BFDEC9;
  color: #1B5E32;
}

.cd-login__hinweis--info {
  background: var(--cd-flaeche-2);
  border: 1px solid var(--cd-linie);
  color: var(--cd-text-2);
}
.cd-login__hinweis strong { font-weight: 600; }

.cd-login__vergessen {
  margin-block-start: var(--cd-a4);
  font-size: var(--cd-gr-klein);
}
.cd-login__vergessen a { color: var(--cd-text-3); }
.cd-login__vergessen a:hover { color: var(--cd-rot); }

/* Angemeldeter Zustand (Kunde ruft die Anmeldeseite auf): Begrüßung,
   Weg in den Kundenbereich, Abmelden. */
.cd-login--angemeldet { display: grid; gap: var(--cd-a5); }
.cd-login__status { color: var(--cd-text-2); }
.cd-login__wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-a3);
}
.cd-login__abmelden { margin: 0; }
.cd-login__abmelden .cd-knopf { appearance: none; -webkit-appearance: none; }

/* ---- Konto-Element in der oberen Leiste -------------------- */
/* Ein abgesetztes Aufklappmenue (<details>) statt lose Links: der
   Chip mit Personen-Icon + Name liest sich als "Ihr Konto"; das
   Menue darunter fuehrt in den Kundenbereich und zum Abmelden. */
.cd-konto {
  position: relative;
  display: inline-flex;
}

/* Die Leiste clippt normal ihren Inhalt (overflow:hidden fuer die
   Einfahr-Animation). Ist das Konto-Menue offen, darf es heraus. */
.cd-oberleiste:has(.cd-konto[open]) { overflow: visible; }

/* Der angemeldete Zustand soll AUFFALLEN: eine gefuellte rote Pille
   im dunklen Kopfband, sichtbar auf jeder Seite. So merkt man beim
   Klicken durch die Website, dass man eingeloggt ist. */
.cd-konto__knopf {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  cursor: pointer;
  list-style: none;
  transition: background var(--cd-zeit) ease;
}
.cd-konto__knopf::-webkit-details-marker { display: none; }
.cd-konto__knopf::marker { content: ""; }
.cd-konto__knopf:hover,
.cd-konto[open] .cd-konto__knopf { background: var(--cd-rot-hell); }
.cd-konto__knopf .cd-symbol { color: var(--cd-weiss); }
.cd-konto__name { font-weight: 600; }

/* „neue Nachrichten“-Badge am Chip + Zahl am Support-Punkt. */
.cd-konto__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 18px;
  block-size: 18px;
  padding: 0 5px;
  border-radius: 999px;
  /* Weiss auf der roten Pille — die Zahl der neuen Nachrichten sticht. */
  background: var(--cd-weiss);
  color: var(--cd-rot);
  font-family: var(--cd-schrift-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.cd-konto__punkt { justify-content: flex-start; }
.cd-konto__zahl {
  margin-inline-start: auto;
  min-inline-size: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* Kleiner Pfeil, dreht sich beim Oeffnen. */
.cd-konto__pfeil {
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  opacity: .7;
  transition: transform var(--cd-zeit) ease;
}
.cd-konto[open] .cd-konto__pfeil { transform: rotate(180deg); }

/* Das Menue: helles Feld unter dem Chip, rechtsbuendig. */
.cd-konto__menue {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: var(--cd-e-mega, 160);
  min-inline-size: 12rem;
  display: grid;
  padding: 6px;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-karte);
  box-shadow: var(--cd-schatten-karte);
  /* Die Leiste ist mono/Grossbuchstaben — das Menue nicht. */
  font-family: var(--cd-schrift-text);
  text-transform: none;
  letter-spacing: 0;
}
.cd-konto__punkt {
  display: inline-flex;
  align-items: center;
  gap: .6ch;
  padding: 9px 12px;
  border-radius: var(--cd-r-feld);
  color: var(--cd-tinte);
  font-size: var(--cd-gr-klein);
  text-decoration: none;
}
/* Die Quelldateien tragen historisch unterschiedliche width/height-
   Attribute (16 bzw. 24 px). Im Kontomenue bekommen deshalb alle
   Zeichen dieselbe feste Box; Text und Badges bleiben ausgerichtet. */
.cd-konto__punkt .cd-symbol {
  inline-size: 16px;
  block-size: 16px;
  color: var(--cd-text-3);
}
.cd-konto__punkt:hover { background: var(--cd-flaeche-2); }
/* „Abmelden“ ist der abschliessende Punkt: durch einen Strich vom
   Rest getrennt und mit eigenem (Abmelde-)Icon. */
.cd-konto__punkt--abmelden {
  color: var(--cd-text-2);
  margin-block-start: 5px;
  padding-block-start: 13px;
  border-block-start: 1px solid var(--cd-linie);
}
.cd-konto__punkt--abmelden:hover { background: #FBEBEC; color: var(--cd-rot); }
.cd-konto__punkt--abmelden:hover .cd-symbol { color: var(--cd-rot); }


/* ============================================================
   Anmeldung im Modalfenster
   ============================================================
   Das GLEICHE Inhaltselement, nur an einem anderen Ort. Auf der
   Anmeldeseite ist .cd-login eine freistehende Karte mit Rahmen,
   Schatten und viel Luft ringsum — in der Box waere das eine
   Karte in einer Karte, mit 5em Aussenabstand darin.

   Deshalb wird hier NUR die Karte zurueckgenommen, nicht das
   Formular: Felder, Knopf und Hinweise bleiben unveraendert. Was
   an einem Ort richtig aussieht, soll am anderen nicht neu
   erfunden werden.
   ============================================================ */

/* Schmaler als die Angebots-Box: Zwei Felder und ein Knopf
   brauchen keine 720 px. Eine Zeile, die viel breiter ist als ihr
   Inhalt, laesst das Fenster leer wirken. */
.cd-modal--schmal { inline-size: min(100% - 32px, 440px); }

.cd-modal__titel {
  margin: 0;
  padding: 28px 32px 0;
  font-size: var(--cd-gr-h3);
  line-height: 1.25;
}

/* Der Rahmen des Inhaltselements traegt in der Box keine eigene
   Flaeche mehr — der Kasten ist die Flaeche. */
.cd-modal__inhalt > .frame {
  margin: 0;
  padding: 0;
}

.cd-modal__inhalt .cd-login {
  max-inline-size: none;
  margin: 0;
  padding: 20px 32px 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Der Weg zur vollen Seite. Abgesetzt und leise: Er ist der
   Ausweg fuer den Sonderfall (Kennwort vergessen, Box verloren)
   und nicht das Ziel. */
.cd-modal__fussweg {
  margin: 0;
  padding: 16px 32px 24px;
  border-block-start: 1px solid var(--cd-linie);
  background: var(--cd-flaeche-2);
  border-end-start-radius: var(--cd-r-karte);
  border-end-end-radius: var(--cd-r-karte);
  font-size: var(--cd-gr-klein);
}
.cd-modal__fussweg a { color: var(--cd-text-3); }
.cd-modal__fussweg a:hover { color: var(--cd-rot); }

@media (max-width: 600px) {
  /* Am Handy wieder randlos wie jede andere Box. Ohne diese Zeile
     bliebe die schmale Fassung als eingerueckte Karte stehen —
     mit eckigen Ecken, weil .cd-modal__kasten in komponenten.css
     unter derselben Schwelle den Radius abraeumt. Halb umgestellt
     sieht schlechter aus als gar nicht. */
  .cd-modal--schmal { inline-size: 100%; }
  .cd-modal__titel { padding: 24px 20px 0; }
  .cd-modal__inhalt .cd-login { padding: 16px 20px 24px; }
  .cd-modal__fussweg { padding: 16px 20px 20px; border-radius: 0; }
}