/* Stammklub – gemeinsames Aussehen für Login, Panel, Verwaltung und Kundenseiten */
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/unbounded-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --nacht: #120E24; --nacht2: #1A1533; --tinte: #4B2EDB; --tinte-hell: #7A63FF; --glut: #FF6A3D; --flieder: #CDBFFF; --papier: #F7F5FC;
  --weiss: #FFFFFF; --text: #171329; --grau: #615B7A; --linie: #E3DEF2; --flaeche: #EEEAFA; --gut: #18794E; --gut-bg: #E3F5EC; --warn: #9A5B00; --warn-bg: #FFF1D6; --schlecht: #B4233C; --schlecht-bg: #FCE8EC;
  --anzeige: "Unbounded", "Arial Black", sans-serif; --schrift: "Manrope", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font: 500 16px/1.5 var(--schrift); }
h1, h2, h3 { font-family: var(--anzeige); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(26px, 5vw, 34px); } h2 { font-size: 20px; } h3 { font-size: 15px; letter-spacing: -0.02em; }
p { margin: 0; } a { color: var(--tinte); }
.grau { color: var(--grau); } .klein { font-size: 13.5px; }
.marke { display: inline-flex; align-items: center; gap: 10px; font-family: var(--anzeige); font-weight: 600; font-size: 20px; letter-spacing: -0.045em; color: inherit; text-decoration: none; }
.marke svg { width: 30px; height: 30px; flex: none; }

button, .knopf { font: 700 15px/1 var(--schrift); border: 0; border-radius: 12px; padding: 13px 18px; cursor: pointer; background: var(--tinte); color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
button:hover, .knopf:hover { background: #3F25C4; }
button:focus-visible, .knopf:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--tinte-hell); outline-offset: 2px; }
button.leise, .knopf.leise { background: var(--flaeche); color: var(--text); } button.leise:hover, .knopf.leise:hover { background: #E2DCF6; }
button.gefahr { background: var(--schlecht-bg); color: var(--schlecht); } button.gefahr:hover { background: #F8D5DC; }
button.klein { padding: 8px 12px; min-height: 36px; font-size: 13.5px; border-radius: 10px; }
button:disabled { opacity: .5; cursor: default; }
label { display: grid; gap: 6px; font-weight: 700; font-size: 14.5px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], textarea, select {
  font: 500 16px/1.4 var(--schrift); padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: 12px; background: #fff; color: var(--text); width: 100%; min-height: 46px; }
textarea { resize: vertical; min-height: 96px; }
.box { background: var(--weiss); border: 1px solid var(--linie); border-radius: 18px; padding: 20px; min-width: 0; }
.meldung { border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 14.5px; }
.meldung.gut { background: var(--gut-bg); color: var(--gut); } .meldung.warn { background: var(--warn-bg); color: var(--warn); } .meldung.schlecht { background: var(--schlecht-bg); color: var(--schlecht); }
[hidden] { display: none !important; }

/* Login */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse 90% 60% at 50% 30%, #2A1E78 0%, var(--nacht) 70%); color: var(--papier); }
.login form { width: min(400px, 100%); background: var(--weiss); color: var(--text); border-radius: 22px; padding: 28px; display: grid; gap: 16px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); }
.login .marke { justify-self: center; margin-bottom: 22px; font-size: 26px; } .login .marke svg { width: 40px; height: 40px; }

/* Kundenseiten (Karte holen, Stempeln) */
.kunde { min-height: 100vh; min-height: 100dvh; display: grid; align-content: start; justify-items: center; padding: 26px 16px 40px; }
.kunde main { width: min(440px, 100%); display: grid; gap: 20px; }
.pass { border-radius: 22px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 30px 60px -30px rgba(18,14,36,.55); }
.pass .logo { max-height: 44px; max-width: 170px; display: block; }
.pass small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.pass b { font-family: var(--anzeige); font-weight: 600; font-size: 22px; letter-spacing: -0.04em; }
.pass .kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.dots i { aspect-ratio: 1; border-radius: 50%; border: 2.5px solid currentColor; opacity: .55; }
.dots i.voll { background: currentColor; opacity: 1; }
.haken { grid-template-columns: 26px 1fr; gap: 10px; font-weight: 500; font-size: 14.5px; align-items: start; }
.haken input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tinte); }
.wallet { background: #000; color: #fff; border-radius: 14px; padding: 16px; font-size: 16px; width: 100%; }
.wallet:hover { background: #222; }
.fuss { text-align: center; font-size: 12.5px; color: var(--grau); }
.fuss a { color: inherit; }