:root{
  --brand:#FF9900; --brand-600:#ff8a00; --brand-700:#ef7f00;
  --text:#101010; --muted:#6b7280; --bg:#f9fafb; --card:#ffffff; --border:#ececec;
  --radius:16px; --shadow:0 10px 20px rgba(0,0,0,.06);

  --field-bg:#F2F4F7; --field-border:#D7DCE1; --field-text:#111111; --placeholder:#697180;

  /* Gewinner-Logo-Größe (responsiv) */
  --winner-icon:18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --text:#f5f5f5; --muted:#a0a8b3; --bg:#0f1115; --card:#151821; --border:#222633;
    --shadow:0 10px 24px rgba(0,0,0,.35);
    --field-bg:#F2F4F7; --field-border:#D7DCE1; --field-text:#111111; --placeholder:#5d6573;
  }
}
/* ab sm */
@media (min-width:640px){
  :root{ --winner-icon:20px; }
}
/* ab lg/desktop */
@media (min-width:980px){
  :root{ --winner-icon:22px; }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
  background: radial-gradient(1200px 800px at 10% -10%, rgba(255,153,0,.08), transparent), var(--bg);
  color: var(--text); line-height:1.5;
  overflow-x:hidden;
}

.container{max-width:1100px;margin:32px auto;padding:0 16px}
.header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.brand-dot{width:14px;height:14px;border-radius:9999px;background:var(--brand);
  box-shadow:0 0 0 6px rgba(255,153,0,.18), 0 0 0 12px rgba(255,153,0,.08); cursor:pointer;}
h1{margin:0;font-size:clamp(22px, 3vw, 32px);letter-spacing:.2px}
.subtle{color:var(--muted);font-size:14px}

.grid{display:grid;gap:18px}
@media(min-width:980px){.grid{grid-template-columns:1.1fr .9fr}}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
.card h2{margin:0 0 12px;font-size:20px}

/* ---------- Formularfelder ---------- */
label{display:block;font-weight:650;margin:10px 0 6px}
input[type=text], input[type=number]{
  width:100%; padding:12px 14px; border-radius:14px; min-height:48px;
  background:var(--field-bg); color:var(--field-text);
  border:1px solid var(--field-border); outline:none;
  transition:border .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
input::placeholder{color:var(--placeholder)}
input[type=text]:focus, input[type=number]:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,153,0,.18); }

/* iOS/Android Autofill */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--field-text);
  box-shadow: 0 0 0px 1000px var(--field-bg) inset;
  transition: background-color 9999s ease-out 0s;
}

/* Buttons */
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:12px 16px; border-radius:9999px; font-weight:700;
  background:linear-gradient(180deg, var(--brand), var(--brand-700));
  color:#fff; box-shadow:0 6px 16px rgba(255,153,0,.35);
  transition: transform .05s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.btn-secondary{
  appearance:none; border:1px solid var(--field-border); background:#fff; color:#111;
  border-radius:12px; padding:8px 10px; cursor:pointer; font-weight:700;
}
.btn-danger{
  appearance:none; border:1px solid #f59e0b44; background:#fff; color:#b91c1c;
  border-radius:12px; padding:8px 10px; cursor:pointer; font-weight:800;
}

/* Chips */
.quick-amounts{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  appearance:none; border:1px solid var(--field-border); background:#fff; color:#111;
  border-radius:9999px; padding:8px 12px; font-weight:700; cursor:pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
@media (prefers-color-scheme: dark){ .chip{ background:#fff; color:#111; } }
.chip:hover{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,153,0,.18) }
.chip:active{ transform:translateY(1px) }
.chip.active{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,153,0,.22) }

/* Tabelle */
.table{width:100%; border-collapse:collapse; table-layout:auto}
.table th, .table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.table th{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.team-icon{width:28px; height:28px; border-radius:50%; background:#fff; border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto;}
.team-icon img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block}
.team-cell{display:flex;align-items:center;gap:10px}
.note{color:var(--muted);font-size:13px}
.kicker{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--muted)}
.kicker .dot{width:8px;height:8px;border-radius:9999px;background:var(--brand)}
.hero{background:linear-gradient(120deg, rgba(255,153,0,.12), rgba(255,153,0,.04));
  border:1px dashed rgba(255,153,0,.35); padding:12px 14px;border-radius:14px;margin:8px 0 14px;color:#b45309;}
.footer-space{height:24px}

/* Dropdowns (on-page) */
.dd{position:relative}
.dd-wrap{
  display:flex; align-items:center; gap:8px;
  background:var(--field-bg); border:1px solid var(--field-border); border-radius:14px;
  padding:0 6px 0 12px; min-height:48px; color:var(--field-text);
}
.dd-sel{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
.dd-sel b{color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dd-btn{
  width:36px; height:36px; border-radius:10px;
  background:#fff; border:1px solid var(--field-border); color:#111;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  flex:0 0 auto; margin-right:6px;
}
@media (prefers-color-scheme: dark){
  .dd-btn{ background:#fff; color:#111; border-color:var(--field-border); }
}
.dd-menu{
  position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0;
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  max-height:340px; overflow:auto; padding:6px;
}
.dd-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; cursor:pointer;
  color: var(--text); min-height:48px; line-height:1.2;
}
.dd-item:hover{background:rgba(255,153,0,.08)}
.dd-wrap:focus-within{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,153,0,.18)}

/* Combo (Namensfeld) */
.combo{position:relative}
.combo-wrap{
  display:flex; align-items:center; gap:8px;
  background:var(--field-bg); border:1px solid var(--field-border); border-radius:14px;
  padding:0 6px 0 0; min-height:48px;
}
.combo input[type=text]{ background:transparent; border:none; outline:none; flex:1; padding:12px 14px; min-height:48px; color:var(--field-text); }
.combo input::placeholder{color:var(--placeholder)}
.combo-btn{
  width:36px; height:36px; border-radius:10px; background:#fff; border:1px solid var(--field-border); color:#111;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; margin-right:6px;
}
@media (prefers-color-scheme: dark){ .combo-btn{ background:#fff; color:#111; border-color:var(--field-border); } }
.combo-menu{
  position:absolute; z-index:35; top:calc(100% + 6px); left:0; right:0;
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  max-height:300px; overflow:auto; padding:6px;
}
.combo-item{ padding:12px 14px; border-radius:10px; cursor:pointer; color:var(--text); min-height:48px; line-height:1.2; }
.combo-item:hover, .combo-item.active{background:rgba(255,153,0,.08)}

/* Accordion */
.accordion{display:flex; flex-direction:column; gap:10px}
.acc{
  border:1px solid var(--border);
  border-radius:14px; background:var(--card); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.acc-h{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:auto 1fr auto auto; /* title | center | meta | btn */
  padding:12px 14px; cursor:pointer; user-select:none;
}
.acc-h .title{font-weight:800; min-width:0}
.acc-h .meta{color:var(--muted); font-size:13px; justify-self:end}
.acc-btn{ width:36px; height:36px; border-radius:10px; background:#fff; border:1px solid var(--field-border); color:#111; display:flex; align-items:center; justify-content:center; cursor:pointer; }
@media (prefers-color-scheme: dark){ .acc-btn{ background:#fff; color:#111; border-color:var(--field-border); } }
.acc-btn .chev{display:inline-block; transition:transform .15s ease}
.acc[aria-expanded="true"] .acc-btn .chev{transform:rotate(180deg)}
.acc-c{display:none; padding:0 14px 12px}
.acc[aria-expanded="true"] .acc-c{display:block}

/* Winner block zentriert – kleines rundes Logo */
.winner-stack{
  grid-column:2;
  justify-self:center; text-align:center; line-height:1.2; min-width:0;
  max-width:90%;
}
.winner-stack .label{
  font-size:11px; letter-spacing:.3px; text-transform:uppercase;
  color:#b45309; font-weight:800;
}
.winner-stack .line{
  display:inline-flex; align-items:center; gap:8px; justify-content:center; flex-wrap:nowrap;
}
.winner-stack .team-icon--winner{
  width:var(--winner-icon); height:var(--winner-icon);
  border-radius:50%; background:#fff; border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto;
}
.winner-stack .team-icon--winner img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
}
.winner-stack .name{
  font-weight:800; font-size:13px; color:#b45309; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Tabellen auch mobil klassisch */
@media(max-width:680px){
  .table{display:table;width:100%}
  .table thead{display:table-header-group}
  .table tr{display:table-row}
  .table th, .table td{display:table-cell;padding:10px}
  .table td::before{content:none !important}
}

/* Toast */
.toast{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  background:rgba(16,185,129,1); color:#fff; font-weight:800;
  padding:10px 14px; border-radius:9999px; box-shadow:var(--shadow); z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ---------- Admin: Modal + Table ---------- */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none;
  align-items:flex-start; justify-content:center; z-index:1500;
  padding: env(safe-area-inset-top) 16px 16px;
}
.modal .box{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px;
  width:min(520px, 92vw); box-shadow:var(--shadow);
  margin-top: 10vh;
}
@supports (height: 1dvh){
  .modal .box{ margin-top: 10dvh; }
}
.modal h3{margin:0 0 10px}
.modal .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.modal input[type=password]{flex:1}

/* Admin: Inline-Edit */
.inline-edit input{
  width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--field-border); background:var(--field-bg); color:var(--field-text);
}

/* ---------- Leichtes Konfetti ---------- */
.confetti{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.confetti i{
  position:absolute; width:6px; height:10px; border-radius:2px; opacity:0; animation:fall 1100ms ease-out forwards;
}
@keyframes fall{
  0%{ transform:translateY(-12px) rotate(0deg); opacity:0 }
  10%{ opacity:1 }
  100%{ transform:translateY(60px) rotate(240deg); opacity:0 }
}