/* =======================================================================
   style.css — modern, strukturiert, performancefreundlich
   ======================================================================= */

/* -------------------------------
   Farb-Variablen (einheitlich)
   ------------------------------- */
:root {
  --sx-bg:       #f6f7f9;
  --sx-bg2:      #eceff1;
  --sx-teal:     #00a6a6;
  --sx-yellow:   #ffcb4c;
  --sx-text:     #20262d;

  --sx-admin:    #4d78a0;  /* blau für Adminbereich */
  --sx-auswertung: #a3d2ca; /* Grau für Auswertung */

  /* Verlauf-Hintergrund */
  --bg-grad-1: #ffffff;  /* oben */
  --bg-grad-2: #f6fbfb;  /* mitte */
  --bg-grad-3: #e8f9f7;  /* unten */
}

/* -------------------------------
   Reset & Basis
   ------------------------------- */
html { overflow-y: scroll; }
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 0.95em;
  line-height: 1.45;
  color: var(--sx-text);
  min-height: 100%;
}

/* Hintergrund-Layer (edler Verlauf, immer sichtbar) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--bg-grad-1) 0%,
    var(--bg-grad-2) 50%,
    var(--bg-grad-3) 100%
  );
}

/* -------------------------------
   Wrapper/Layout
   ------------------------------- */
.wrapper {
  width: 950px;
  max-width: 95vw;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}

/* -------------------------------
   Header & Varianten
   ------------------------------- */
header,
.auswertung,
.scoring {
  padding: 28px 10px;
  text-align: center;
}

header { 
  background: var(--sx-yellow); 
}

header.admin { 
  background: var(--sx-admin);   /* Blau */
  text-align: center;
  padding: 28px 10px;
  color: #fff;
  font-size: 1.6rem;
}
header.admin h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.auswertung { 
  background: var(--sx-auswertung);
  color: #fff; 
}

.scoring { 
  background: var(--sx-auswertung);
  color: #fff; 
}
header.scoring h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #333 !important;
  letter-spacing: .5px;
}

header h1 {
  margin: 0;
  font-size: 1.6rem;
  color: #222;
}

/* -------------------------------
   Navigation
   ------------------------------- */

/* NAV 1 (Hauptnavigation) */
nav, .nav0 {
  padding: 0;
  background: var(--sx-teal);
}
nav ul, .nav0 ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 10px;
  margin: 0;
  padding: 8px;
}
nav ul li a, .nav0 ul li a {
  font-size: .95em;
  padding: 6px 12px;
  display: inline-block;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  background: #fff;
  color: #0f766e;
  border: none;
}
nav ul li a:hover, .nav0 ul li a:hover {
  background: var(--sx-yellow);
  color: #111;
}

/* NAV 2 (Unter-Navigation) */
.nav2 {
  background:#f0f0f0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.nav2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.nav2 ul li a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: #fff;
  border: none;
  font-weight: 700;
  font-size: .95em;
  color: #111827;
  text-decoration: none;
}
.nav2 ul li a:hover {
  background: #f3f4f6;
  color: #0f172a;
}

/* Mobile Hamburger für Hauptnav */
@media (max-width:900px) {
  #main-nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #main-nav > .nav-toggle {
    display: inline-block !important;
    margin: 8px 0 8px 8px;
    background: #fff;
    color: #0f766e;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    order: 2;
  }
  #main-nav > ul#main-nav-list {
    order: 3;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    margin: 0;
  }
  #main-nav.open > ul#main-nav-list { display: flex; }
  #main-nav > ul#main-nav-list li a { width: 100%; text-align: center; }
}

/* -------------------------------
   Content
   ------------------------------- */
.main-content {
  flex-grow: 1;
  background: #fff;
  padding: 12px 12px 20px;
}

.container-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px;
}
.box {
  background: #f9fafb;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #eef2f7;
}
.box.wide { flex: 1 1 100%; }

.onlinedaten-einzeln_1 { font-size: .98em; color: #222; }
.onlinedaten-einzeln_2 { font-size: .86em; color: #6b7280; padding-left: 8px; }

.seitenheadline {
  display: block;
  max-width: 960px;
  margin: 16px auto 12px;
  padding: 10px 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  color: #0f172a;
  background: #f3f4f6;
}
.seitenheadline + * { margin-top: 12px; }

/* -------------------------------
   Links & Interaktivität
   ------------------------------- */
a { color: #0f766e; font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus { outline: 2px solid #0f766e; outline-offset: 2px; }

/* Klicks nie blockieren */
a, a * { pointer-events: auto !important; }
button, [role="button"] { pointer-events: auto !important; }

/* -------------------------------
   Formulare & Buttons
   ------------------------------- */

/* Teilnehmer- & Anmeldestand */
.teilnehmerstand-box,
.anmeldung-box {
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  text-align: center;
  border-radius: 10px;
}

/* Anmelde-Button flach */
a.anmeldung-button,
.anmeldung-button {
  display: inline-block;
  width: 530px;
  max-width: 90%;
  padding: 12px 16px;
  margin-top: 10px;
  background: var(--sx-teal);
  color: #fff !important;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
  border: none;
  box-shadow: none;
}
a.anmeldung-button:hover {
  background: #0e8792;
}

/* Aktionsbuttons */
.action-btn {
  display: inline-block;
  padding: 12px 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  background: #17BEBB;
  color: #fff;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  transition: background-color .2s ease, filter .2s ease;
}
.action-btn:hover { filter: brightness(0.96); }
.action-btn:active { transform: none; }
.btn-yellow   { background: #FFCC33; color: #223; }
.btn-turquoise{ background: #17BEBB; color: #fff; }
.btn-grey   { background: #666; color: #FFF; }
.action-btn.is-closed { background: #b35000; color: #fff; }

.section-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 18px;
}

/* -------------------------------
   Tabellen
   ------------------------------- */
.tabellenkopf { font-weight: 700; }
.mr1,.mr2,.mscore { text-align: center; background: #ffe7ad; }

/* -------------------------------
   Utility
   ------------------------------- */
.text-center { text-align: center; }
.hidden { display: none !important; }

/* -------------------------------
   Responsiv
   ------------------------------- */
@media (max-width:950px) {
  .wrapper { width: 100%; border-radius: 0; }
  .container-grid { flex-direction: column; margin: 10px; gap: 10px; }
  .box { flex: 1 1 100%; }
}
@media (max-width:1100px) {
  #main-nav ul { flex-wrap: wrap; }
}

/* -------------------------------
   Druck
   ------------------------------- */
@media print {
  body { background: #fff !important; }
}

/* Klickbare Score-Zahlen als kompakte Pill-Buttons — ROT */
.teilnehmertabelle a.score-link{
  display:inline-block;
  min-width:2.4em;
  padding:4px 10px;
  border-radius:999px;
  line-height:1.1;
  text-decoration:none;
  font-weight:800;
  text-align:center;
  border:none;
  background:#ff5733;   /* kräftiges Rot */
  color:#fff;           /* weiße Schrift */
  transition:filter .15s ease, transform .02s ease, background .15s ease;
}
.teilnehmertabelle a.score-link:hover,
.teilnehmertabelle a.score-link:focus{
  filter:brightness(.95);
  outline:2px solid rgba(255,87,51,.35);
  outline-offset:2px;
}

/* Volle Button-Variante für vorhandene Werte — ebenfalls ROT */
.teilnehmertabelle a.score-link--btn{
  background:#ff5733;
  color:#fff;
  border-color:transparent;
}
.teilnehmertabelle a.score-link--btn:hover,
.teilnehmertabelle a.score-link--btn:focus{
  filter:brightness(.94);
}

/* Optional: “–” etwas entschärfen */
.teilnehmertabelle a.score-link:not(.score-link--btn){
  opacity:.9;
}

/* ==== Scoring-Form: Inputs + Button ================================== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.teilnehmertabelle input[type="number"] {
  width: 6ch;
  padding: 6px 10px;
  text-align: center;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
}
.teilnehmertabelle td:nth-child(6) input[type="number"] { width: 9ch; }

.teilnehmertabelle button {
  background: #00a6a6;
  color: #fff;
  border: none;
  border-radius: 999px;
  height: 34px;
  min-width: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: filter .15s ease, transform .02s ease;
}
.teilnehmertabelle button:hover { filter: brightness(.96); }
.teilnehmertabelle button:active { transform: translateY(0); }

/* =======================================================================
   Spezielle Styles: Teilnehmer-Aktivierung (nur in dieser Ansicht)
   ======================================================================= */
.teilnehmertabelle form input[type="submit"],
.teilnehmertabelle form button {
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: filter .15s ease;
  margin: 2px 2px;
}
.teilnehmertabelle form input[type="submit"] {
  background: var(--sx-teal);
  color: #fff;
}
.teilnehmertabelle form input[type="submit"]:hover { filter: brightness(.95); }

.teilnehmertabelle form button[name="aktion"][value="deaktivieren"] {
  background: #e0e0e0;
  color: #444;
  font-size: 0.78rem;
  padding: 4px 10px;
}
.teilnehmertabelle form button[name="aktion"][value="deaktivieren"]:hover {
  background: #ff5733;
  color: #fff;
}