:root{
  --pad: clamp(14px, 2.2vw, 22px);
  --radius: 16px;
  --font: clamp(18px, 2.2vw, 26px);
  --fontBig: clamp(22px, 3vw, 34px);
  --bg: #0b0f14;
  --card: #111826;
  --line: rgba(255,255,255,.10);
  --muted: rgba(232,238,246,.75);
  --text: #e8eef6;
  --primary: #2f6bff;
  --danger: #e25858;
  --ok: #3bd27c;
}
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  background-color: var(--bg);
  background-image: url("/assets/media/bgimage.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; /* optional: bleibt beim Scrollen stehen */
  min-height: 100vh;
}

.wrap{ display:grid; place-items:center; padding:var(--pad); }
.card{
  width:min(980px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:calc(var(--pad)*1.2);
}
.top{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
h1{ font-size:var(--fontBig); margin:0; font-weight:800; letter-spacing:.2px; }
.sub{ margin:8px 0 0; color:var(--muted); font-size:var(--font); line-height:1.35; }
.row{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:18px; }
@media (min-width: 720px){ .row{ grid-template-columns: 1fr auto auto; align-items:stretch; } }
input{
  width:100%; box-sizing:border-box;
  font-size:var(--fontBig);
  padding:18px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:#0b1220;
  color:var(--text);
  outline:none;
  letter-spacing: .6px;
}
input:focus{ border-color: rgba(120,170,255,.85); box-shadow:0 0 0 4px rgba(120,170,255,.18); }
button{
  border:0; border-radius:var(--radius);
  padding:18px 18px;
  font-size:var(--font);
  font-weight:800;
  background:var(--primary);
  color:white;
  cursor:pointer;
  min-width: 180px;
  touch-action: manipulation;
  white-space: nowrap;
}
button.secondary{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
button:disabled{ opacity:.55; cursor:not-allowed; }
.status{ margin-top:14px; font-size:var(--font); color:var(--muted); min-height:1.4em; }
.status.ok{ color: rgba(59,210,124,.95); }
.status.bad{ color: rgba(226,88,88,.95); }




#pointsRow{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}


#pointsRow > button{
  width: 100% !important;     /* füllt jeweils seine Grid-Spalte */
  min-width: 0 !important;    /* verhindert Überlauf durch min-content */
  height: 64px;

  padding: 0 !important;      /* killt Browser/Framework padding-Overkill */
  margin: 0 !important;       /* falls global margins gesetzt sind */

  font-size: 34px;
  font-weight: 900;

  display: flex !important;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  box-sizing: border-box;
}





.modalBack{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: grid;
  place-items: center;
  z-index: 9999;
}

.modalCard{
  width: min(720px, calc(100vw - 40px));
  background: rgba(16,20,30,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}

.modalTitle{
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 12px;
}

.modalRow{
  display:flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  flex-wrap: wrap;
}

.modalRow label{
  min-width: 50%;
  color: rgba(232,238,246,.8);
}

.modalRow input{
  width: 220px;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #e8eef6;
  font-size: 16px;
}
/* Modal: modalInput soll für input/select/textarea gleich aussehen */
.modalRow .modalInput{
  width: 220px;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #e8eef6;
  font-size: 16px;
  outline: none;
}

/* Textarea im Modal hübsch + nutzbar */
.modalRow textarea.modalInput{
  width: 100%;
  min-height: 90px;
  resize: vertical;
  line-height: 1.35;
}

/* Select im Modal nicht riesig wie globales select */
.modalRow select.modalInput{
  width: 220px;
  padding: 6px 8px;
  font-size: 16px;
}

.modalRow select.modalInput option{
	color:black;
}

.modalHint{
  margin-top: 10px;
  color: rgba(232,238,246,.75);
}

.modalErr{
  margin-top: 10px;
  color: #ff6b6b;
  font-weight: 700;
}

.modalActions{
  display:flex;
  justify-content:flex-end;
  gap: 12px;
  margin-top: 18px;
}
.modalCard{
  max-height: calc(100vh - 40px);
  overflow: auto;
}



.result{
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:16px;
  display:none;
}
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:2px;
}
@media (min-width: 900px){
  .grid{ grid-template-columns: 1fr 1fr; gap:10px;}
	.v{ margin-bottom:3px !important; } 
}
.kv{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px 14px;
}
.k{ font-size: 14px; color: rgba(232,238,246,.72); margin-bottom: 3px; }
.v{ font-size: 18px; font-weight: 750; word-break: break-word; margin-bottom: 10px; }

.pill{
  display:inline-block; margin-top:12px;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size: 14px;
  color: rgba(232,238,246,.8);
}
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.95em; }

/* Login Overlay Styles */
#authOverlay{
  position:fixed; inset:0;
  display:grid;
  place-items:center;
  padding:var(--pad);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
}
#authOverlay .authCard{
  width:min(980px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:calc(var(--pad)*1.2);
}
.authTitle{ font-size:var(--fontBig); font-weight:900; }
.authSub{ margin-top:8px; color:var(--muted); font-size:var(--font); line-height:1.35; }
.authRow{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:18px; }
@media (min-width: 720px){ .authRow{ grid-template-columns: 1fr 1fr auto; align-items:stretch; } }
.authStatus{ margin-top:14px; font-size:var(--font); color:var(--muted); min-height:1.4em; }
.authStatus.ok{ color: rgba(59,210,124,.95); }
.authStatus.bad{ color: rgba(226,88,88,.95); }
.authBar{ margin-top:16px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.authMe{ color: rgba(232,238,246,.85); font-size: 16px; }
.adminPanel{
  margin-top:16px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.adminHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.adminTitle{ font-weight:900; font-size: 18px; }
.adminForm{ margin-top:12px; display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 900px){ .adminForm{ grid-template-columns: 1fr 1fr auto auto auto; } }
select{
  width:100%; box-sizing:border-box;
  font-size: 18px;
  padding:18px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:#0b1220;
  color:var(--text);
  outline:none;
}
.adminList{ margin-top:14px; display:grid; gap:10px; }
.adminItem{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px 14px;
}
.adminName{ font-size: 18px; font-weight: 850; }
.adminMeta{ font-size: 14px; color: rgba(232,238,246,.72); margin-top:4px; }

/* --- Passwort Eye Toggle: final --- */
.pwWrap{
  position: relative;
  width: 100%;
}

.pwWrap input{
  padding-right: 52px; /* Platz fürs Auge */
}

/* Auge sitzt IM Input, nicht als eigener Button-Klotz */
.pwToggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;

  display: none; /* erst sichtbar, wenn Passwort nicht leer */
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  color: rgba(232,238,246,.78);

  font-size: 18px;
  line-height: 1;
  min-width: unset;
  box-shadow: none;

  -webkit-tap-highlight-color: transparent;
}

.pwToggle.is-visible{
  display: flex;
}

.pwToggle:active{
  color: #fff;
  transform: translateY(-50%) scale(0.95);
}

.pwToggle:focus{
  outline: none;
}

.pwToggle::-moz-focus-inner{
  border: 0;
}




#globalLogout {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  align-items: right;
  justify-content: right;

  /*
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  */

  font-size: 20px;
  font-weight: 600;
  line-height: 1;

  color: #fff;
  cursor: pointer;

  opacity: 0.85;

  transition:
    background-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.15s ease;
}

/* Hover für Desktop */
#globalLogout:hover {
  opacity: 1;
  background-color: rgba(255,255,255,0.22);
  transform: scale(1.05);
}

/* Active für Touch */
#globalLogout:active {
  transform: scale(0.92);
  background-color: rgba(255,255,255,0.3);
}

/* Fokus für Tastatur-Nerds (die Guten) */
#globalLogout:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

/* Prämienbutton */
#globalbonusURL {
  position: fixed;
  top: 16px;
  right: 106px;
  z-index: 1000;
  display: flex;
  align-items: right;
  justify-content: right;

  /*
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  */

  font-size: 20px;
  font-weight: 600;
  line-height: 1;

  color: #fff;
  cursor: pointer;

  opacity: 0.85;

  transition:
    background-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.15s ease;
}

#globalbonusURL a{
 color: #fff;
  cursor: pointer;
  text-decoration:none;
}

/* Hover für Desktop */
#globalbonusURL a:hover {
  opacity: 1;
  background-color: rgba(255,255,255,0.22);
  transform: scale(1.05);
}


/* Roadmap */
#globalroadmapURL {
  position: fixed;
  top: 16px;
  right: 136px;
  z-index: 1000;
  display: flex;
  align-items: right;
  justify-content: right;

  /*
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  */

  font-size: 20px;
  font-weight: 600;
  line-height: 1;

  color: #fff;
  cursor: pointer;

  opacity: 0.85;

  transition:
    background-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.15s ease;
}

#globalroadmapURL a{
 color: #fff;
  cursor: pointer;
  text-decoration:none;
}

/* Hover für Desktop */
#globalroadmapURL a:hover {
  opacity: 1;
  background-color: rgba(255,255,255,0.22);
  transform: scale(1.05);
}


/* ===== Modal: Mobile scroll fix ===== */
.modalBack{
  /* statt starr center: allow scrolling */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;             /* Luft für Handy-Viewport */
  place-items: start center; /* oben anfangen, nicht mitten im Viewport */
}

.modalCard{
  /* Card darf nicht über den Bildschirm hinaus wachsen */
  max-height: calc(100dvh - 32px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Optional: Footer bleibt sichtbar, wenn du .modalActions nutzt */
.modalActions{
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: rgba(16,20,30,.96);
  border-top: 1px solid rgba(255,255,255,.10);
}
.img-wrap{
  /* kein Abstand */
  margin: 0;
  padding: 0;

  /* Zentrierung + unten bündig */
  display: flex;
  justify-content: center;   /* horizontal mittig */
  align-items: flex-end;     /* unten bündig */

  /* falls irgendwo eine Line-Height oder sonstiger Quatsch mitreinfunkt */
  line-height: 0;
}

.img-wrap img{
  display: block;  /* killt den typischen "inline img hat unten eine Lücke"-Mist */
  margin: 0;
  padding: 0;

  /* optional: falls das Bild nicht überlaufen soll */
  max-width: 100%;
  height: auto;
}