/* Whiskymax Haendler-Shop - Login, Passwort vergessen, Neues Passwort
   Layout nach .dev/1-proof/order-login.html (Admin-Center-Stil, Whiskymax-Farben). */
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 300; src: url('/order/font/noto-sans-v38-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: url('/order/font/noto-sans-v38-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; src: url('/order/font/noto-sans-v38-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 800; src: url('/order/font/noto-sans-v38-latin-800.woff2') format('woff2'); }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: 'Noto Sans', sans-serif; color: #fff; background: #0b0b0b url(/order/whiskymax-the-world-of-whisky.jpg) no-repeat center center fixed; background-size: cover; }
/* Verlauf: links dunkel (hinter der Karte), rechts offen, damit das Glas im Bild sichtbar bleibt; unten etwas dunkler fuer den Fuss */
body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.25) 100%), linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%); }

.logos { position: fixed; top: 26px; left: 30px; z-index: 5; }
.logos img { max-width: 220px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }

/* Karte links ueber dem Fassholz ab 1100 px Breite; darunter zentriert */
.login { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 380px; max-width: 92vw; z-index: 5; }
@media (min-width: 1100px) { .login { left: clamp(60px, 10vw, 200px); transform: translateY(-50%); } }
.karte { background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 28px 28px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.6); margin: 0; }
.hdl { font-size: 24px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin: 0; text-shadow: 0 0 10px rgba(0,0,0,.4); color: #fff; }
.hdl_sub { font-size: 15px; font-weight: 300; color: #ddd; margin: 2px 0 20px; }
.hdl_sub b { color: #e38d2f; font-weight: 700; }

/* Kontaktleiste - Optik der alten contact.gif (oranger Verlauf, Telefon-Symbol, Zeilen mit Label) */
.kontakt { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 10px 14px; border-radius: 5px; background: linear-gradient(to bottom, #f0a048, #cc7618); border: 1px solid #a85f10; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.4); color: #fff; }
.kontakt-icon { width: 34px; height: 34px; flex: 0 0 34px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.kontakt table { border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.kontakt td { padding: 0 8px 0 0; vertical-align: top; text-shadow: 0 1px 1px rgba(0,0,0,.3); white-space: nowrap; }
.kontakt td:first-child { color: rgba(255,255,255,.85); width: 62px; }
.kontakt a { color: #fff; text-decoration: none; }
.kontakt a:hover { text-decoration: underline; }
.kontakt .klein { font-size: 11.5px; color: rgba(255,255,255,.85); padding-top: 3px; white-space: normal; }

label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #bbb; margin: 0 0 4px 2px; }
.feld { font-family: 'Noto Sans', sans-serif; width: 100%; margin-bottom: 14px; background: rgba(0,0,0,.45); border: 1px solid #444; outline: none; padding: 11px 12px; font-size: 14px; color: #fff; border-radius: 4px; box-shadow: inset 0 -5px 45px rgba(100,100,100,.2), 0 1px 1px rgba(255,255,255,.2); transition: box-shadow .5s ease, border-color .3s; }
.feld::placeholder { color: rgba(255,255,255,.55); }
.feld:focus { border-color: #e38d2f; box-shadow: inset 0 1px 4px rgba(255,200,140,.5), 0 0 10px 2px rgba(204,118,24,.7); background: #000; }

.btn-login { display: block; width: 100%; padding: 11px 14px; font-size: 15px; font-weight: 700; color: #fff; text-align: center; border-radius: 5px; cursor: pointer; border: 1px solid #a85f10; background: linear-gradient(to bottom, #e38d2f, #cc7618); text-shadow: 1px 1px 1px rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.5); letter-spacing: .5px; text-decoration: none; font-family: 'Noto Sans', sans-serif; }
.btn-login:hover { background: linear-gradient(to bottom, #f0a048, #b86810); color: #fff; text-decoration: none; }
.zeile { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12.5px; gap: 10px; }
.zeile a { color: #e38d2f; text-decoration: none; }
.zeile a:hover { text-decoration: underline; }
.zeile label { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: #ccc; display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.zeile input[type=checkbox] { width: auto; margin: 0; }

.meldung { padding: 9px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 16px; line-height: 1.4; }
.meldung.fehler { background: rgba(192,57,43,.25); border: 1px solid rgba(255,90,70,.7); color: #ffd6d0; }
.meldung.ok { background: rgba(17,124,4,.25); border: 1px solid rgba(80,200,60,.7); color: #d6ffd0; }
.meldung.sperre { background: rgba(255,170,0,.2); border: 1px solid rgba(255,190,60,.8); color: #ffe9b8; }
.text { font-size: 13.5px; line-height: 1.55; color: #e6e6e6; margin: 0 0 16px; }
.text b { color: #fff; }

.neu { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #bbb; text-align: center; line-height: 1.5; }
.neu a { color: #fff; }

.fuss { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 11px; color: rgba(255,255,255,.55); z-index: 5; }
.fuss a { color: rgba(255,255,255,.75); margin: 0 6px; }

.animate .karte { animation: fadeInUp .9s both; animation-delay: .35s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .logos { position: static; text-align: center; padding: 18px 0 0; }
  .logos img { max-width: 170px; }
  .login { position: static; transform: none; margin: 24px auto 70px; }
  .karte { padding: 22px 18px 18px; }
  .fuss { position: static; padding-bottom: 16px; }
}