/* Mitarbeiter-Login als Markenkarte (24.10.2026, Vorbild: Anmeldekarte der Website-Verwaltung).
   Nur Aussehen: Felder, Ids und Anmeldelogik bleiben unverändert in index.html (loginKlick).
   Alles gilt nur, solange das Fenster #fach das Anmeldeformular #loginForm enthält. */
dialog#fach:has(#loginForm) {
  box-sizing:border-box; width:min(420px, calc(100vw - 24px)); overflow-x:hidden; border-radius:22px; background:#fff; color:#363534;
  box-shadow:0 40px 80px -30px rgba(30,20,10,.6), 0 0 0 1px rgba(54,53,52,.06);
  animation:lkAuf .28s cubic-bezier(.2,.9,.3,1.1);
}
dialog#fach:has(#loginForm)::backdrop {
  background:radial-gradient(circle at 50% 35%, rgba(70,46,24,.42), rgba(20,14,8,.74));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* feine Flammenlinie oben (Rot → Orange, nur als Linie) */
dialog#fach:has(#loginForm)::before { content:""; display:block; height:4px; background:linear-gradient(90deg, #ED2939, #FF5800); }
@keyframes lkAuf { from { opacity:0; transform:translateY(12px) scale(.98); } }
@media (prefers-reduced-motion:reduce) { dialog#fach:has(#loginForm) { animation:none; } }

/* Kopf: Logo auf Weiß, darunter der Titel */
dialog#fach:has(#loginForm) .dk { position:relative; flex-direction:column; gap:0; padding:34px 32px 2px; border:0; text-align:center; }
dialog#fach:has(#loginForm) .dk::before { content:""; width:200px; height:75px; margin-bottom:24px; background:url(img/logo-kerstens-kamine.png) center / contain no-repeat; }
dialog#fach:has(#loginForm) .dk h2 { flex:none; font-size:23px; font-weight:800; letter-spacing:-.01em; color:#363534; }
dialog#fach:has(#loginForm) .zu { position:absolute; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center; padding:0; border-radius:50%; font-size:24px; line-height:1; color:#8a847c; transition:background .2s, color .2s; }
dialog#fach:has(#loginForm) .zu:hover { background:#f3efeb; color:#363534; }

/* Formular */
#fach #loginForm { display:flex; flex-direction:column; gap:14px; padding:6px 32px 22px; }
#fach #loginForm > * { margin:0; }
#fach #loginForm > p.hinweis { text-align:center; font-size:14px; color:#77716a; margin-bottom:6px; }
#fach #loginForm label { font-size:13px; font-weight:600; color:#57524c; }
#fach #loginForm input:not([type="checkbox"]) {
  box-sizing:border-box; width:100%; min-height:50px; margin-top:7px; padding:12px 15px; border:1px solid #e3ded6; border-radius:13px; background:#faf8f5;
  font-size:16px; color:#363534; transition:border-color .2s, box-shadow .2s, background .2s;
}
#fach #loginForm input:not([type="checkbox"]):hover { border-color:#cfc8bd; }
#fach #loginForm input:not([type="checkbox"]):focus { outline:none; border-color:#363534; background:#fff; box-shadow:0 0 0 4px rgba(54,53,52,.1); }
#fach #loginForm label > .pw-feld { margin-top:7px; }
#fach #loginForm .pw-auge { right:7px; height:36px; padding:0 11px; border-radius:10px; border-color:#e3ded6; background:#fff; color:#57524c; }
#fach #loginForm .pw-auge:hover { background:#f3efeb; color:#363534; }
#fach #loginForm label.merken { gap:10px; margin-top:2px; font-size:14px; font-weight:500; color:#363534; }
#fach #loginForm label.merken input { width:18px; height:18px; accent-color:#ED2939; }
#fach #loginForm .fehler { text-align:center; font-weight:600; }
#fach #loginForm .fehler:empty { display:none; }

/* schwarzer Knopf wie in der Website-Verwaltung, beim Überfahren Kerstens Rot */
#fach #loginForm .btn {
  display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin-top:6px; border-radius:999px;
  background:#363534; color:#fff; font-size:16px; font-weight:700; letter-spacing:.01em;
  transition:background .25s, transform .25s, box-shadow .25s;
}
#fach #loginForm .btn:hover { filter:none; background:#ED2939; transform:translateY(-1px); box-shadow:0 14px 24px -14px rgba(237,41,57,.9); }
#fach #loginForm .btn:active { transform:none; box-shadow:none; }
#fach #loginForm .btn:focus-visible { outline:3px solid rgba(54,53,52,.35); outline-offset:3px; }
#fach #loginForm > a.hinweis { align-self:center; font-size:13.5px; color:#77716a; text-decoration:underline; text-underline-offset:3px; }
#fach #loginForm > a.hinweis:hover { color:#363534; }
#fach #loginForm::after { content:"Interner Bereich – nur für Mitarbeiter"; margin-top:6px; padding-top:16px; border-top:1px solid #efebe5; text-align:center; font-size:12px; color:#9a948b; }

/* Handy */
@media (max-width:520px) {
  dialog#fach:has(#loginForm) { width:calc(100vw - 20px); border-radius:18px; }
  dialog#fach:has(#loginForm) .dk { padding:30px 22px 2px; }
  dialog#fach:has(#loginForm) .dk::before { width:172px; height:64px; margin-bottom:20px; }
  dialog#fach:has(#loginForm) .dk h2 { font-size:21px; }
  #fach #loginForm { padding:6px 22px 18px; gap:12px; }
}