/*##############################################################################################################*/
body { font-family: Arial, Helvetica, sans-serif; background:#f7f7f7; color:#222; padding:20px; }
header { margin-bottom:18px; }
nav a { color:#1a73e8; text-decoration:none; margin-right:8px; }
h1 { margin:0 0 8px 0; }
table.teilnehmer-tabelle { width:100%; border-collapse:collapse; margin-bottom:16px; background:#fff; }
table.teilnehmer-tabelle th, table.teilnehmer-tabelle td { border:2px solid #ddd; padding:8px; text-align:center; }
table.teilnehmer-tabelle th { background:#eee; }

input[type="text"], input[type="number"], select { padding:6px; border:1px solid #ccc; border-radius:4px; }
button { padding:8px 12px; background:#2c7; color:#fff; border:none; border-radius:4px; cursor:pointer; }
button.secondary { background:#4a90e2; }
.feedback { margin:8px 0; padding:8px; border-radius:4px; }
.ok { background:#e6ffea; color:#1b6d2b; }
.err { background:#ffe6e6; color:#8a1b1b; }
.small { font-size:0.9em; color:#666; }
.punkte-td { font-weight:700; }
.row-played { background:#f0fff4; }
.form-inline { display:inline-block; margin-right:8px; }

/* Breiteres, aber nie größer als der verfügbare Platz */
input[name="neu_name"] {
  width: 35rem;        /* etwas breiter */
  max-width: 100%;     
  box-sizing: border-box;
  padding: .75rem;     /* mehr Innenabstand */
  font-size: 1.4rem;   /* größere Schrift */
}
/* Wrapper um die Tabelle - sorgt für Zentrierung und max. Breite */
.table-wrapper {
  width: 100%;
  display: flex;
  justify-content: left; /* zentriert die Tabelle horizontal */
  padding: 1rem 0;         /* optional: Abstand oben/unten */
  box-sizing: border-box;
}

/* Eigentliche Tabelle: begrenzte Breite, responsive */
.teilnehmer-tabelle {
  width: 100%;
  max-width: 900px;        /* gewünschte Maximalbreite (anpassen) */
  border-collapse: collapse;
  table-layout: auto;
  box-shadow: none;        /* optional: entfernt optische Effekte */
}

/* Optional: macht die Tabelle kompakter */
.teilnehmer-tabelle th,
.teilnehmer-tabelle td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #e6e6e6;
}

/* Auf kleinen Bildschirmen: Container scrollbar statt dass die Tabelle quetscht */
@media (max-width: 640px) {
  .table-wrapper {
    padding: .5rem;
  }
  .teilnehmer-tabelle {
    min-width: 640px; /* sorgt für horizontale Scroll-Leiste im Wrapper */
  }
}



/* Hover: ganze Zeile hervorheben */
.teilnehmer-tabelle tbody tr:hover {
  background-color: #e9f7ec;
}

/* Kleine Bildschirme: erzwinge Scroll statt Quetschen */
@media (max-width: 640px) {
  .teilnehmer-tabelle {
    min-width: 640px;
  }
}

/* Optik: Zellen, Rahmen und Hover-Effekt */
.teilnehmer-tabelle th,
.teilnehmer-tabelle td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: top;
}

/* Hover: gesamte Zeile grün hinterlegen (dezenter Farbton) */
.teilnehmer-tabelle tbody tr:hover {
  background-color: #e6f8ea; /* helles Grün */
}

/* Alternativ: Hover nur auf Name-Zelle, stärkerer Grünton 
.teilnehmer-tabelle tbody tr:hover td:nth-child(2) {
  background-color: #d4f0c9; /* etwas kräftigeres Grün nur für Name */
}
*/
/* Optional: Übergang für sanften Effekt */
.teilnehmer-tabelle td {
  transition: background-color 120ms ease-in-out;
}


/* Header-Hintergrund beibehalten, Schrift weiß */
header {
  background: #333; /* falls du die Hintergrundfarbe ändern willst, anpassen */
  color: #fff;
  padding: 12px 16px;
}

/* Überschriften im Header weiß */
header h1,
header h2,
header h3 {
  color: #fff;
  margin: 0;
}

/* Navigation: Links weiß, mit leicht hellerer Hover-Farbe */
header nav a {
  color: #ffffff;
  text-decoration: none;
  margin-right: 10px;
  transition: color 0.15s ease;
}

header nav a:hover,
header nav a:focus {
  color: #ffd; /* leichtes Gelb/Creme, optional: #ddd oder #ffeb99 */
  text-decoration: underline;
}

/* Falls Links im Header durchstellt oder kleiner sind (Kontrast verbessern) */
header a:visited { color: #ffffff; }

.btn { display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid transparent; background:#f3f4f6; cursor:pointer; font-size:0.9rem; }
.btn.small { padding:6px 8px; font-size:0.85rem; border-radius:6px; margin-left:6px; }
.btn.primary {
  background:linear-gradient(90deg,#2563eb,#3b82f6);
  color:#fff;
  font-size: 1.5rem;   /* Schriftgröße erhöhen */
  font-weight: 600;    /* optional: etwas fetter */
}
.btn.danger {
	background:linear-gradient(90deg,#ff6b6b,#ff5252); 
	color:#fff; 
	font-size: 1.5rem;   /* Schriftgröße erhöhen */
    font-weight: 600;    /* optional: etwas fetter */
	}

/*Anzeige Semifinale unten*/
.final-results { margin-top:18px; display:block; max-width:720px; }
.final-results .final {
  background: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(59,130,246,0.06));
  border-left:4px solid #1e40af;
  padding:10px 10px;
  margin-bottom:10px;
  border-radius:10px;
  font-weight:700;
  color:#0f172a;
  box-shadow:0 6px 18px rgba(10,20,40,0.04);
  font-size:1.8rem;
}
.final-results .final.final-1 { border-left-color:#1e40af; }
.final-results .final.final-2 { border-left-color:#2563eb; }

.final-results .smallfinal {
  background: linear-gradient(90deg, rgba(255,215,0,0.25), rgba(255,223,0,0.15));
  border-left:4px solid #f59e0b;
  padding:10px 10px;
  margin-bottom:10px;
  border-radius:10px;
  color:#1f2937;
  font-weight:600;
  font-size:1.8rem;
}

.result-input {
  width: 3rem;          /* breiteres Feld */
  max-width: 100%;
  padding: 1px 1px;     /* mehr Innenabstand, dadurch auch höher */
  text-align: center;
  font-size: 1.5rem;    /* größere Schrift */
  box-sizing: border-box;
}
@media (max-width:420px) {
  .result-input {
    width: 2.4rem;      /* etwas kleiner, aber immer noch größer als vorher */
    padding: 1px 1px;
    font-size: 1.5rem;
  }
}


@media (max-width:420px) {
  .final-results .final, .final-results .smallfinal { font-size:1.5rem; padding:4px 4px; }
}


/* Responsive Bilder und Container (mobilfreundlich) */
*, *::before, *::after { box-sizing: border-box; }

html, body { width: 100%; overflow-x: hidden; }

/* Alle Bilder nie breiter als ihr Container */
img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

/* Spezifische Targets: Inhalt/Wrappers */
article, .container, .container-fluid, .table-wrapper, main, figure {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Falls alte Regeln min-width setzen (z. B. Tabellen) -> aufheben */
.teilnehmer-tabelle, table.teilnehmer-tabelle {
  min-width: 0 !important;
  width: 100% !important;
}

/* Kleinere Geräte: etwas Innenabstand statt großer Body-Margins */
@media (max-width: 880px) {
  body { margin: 0; padding-left: 12px; padding-right: 12px; }
  img { max-width: 100%; }
}

/* Sehr kleine Geräte: noch enger limitieren */
@media (max-width: 420px) {
  img { max-width: 95%; }
}
/* Nur horizontales Scrollen aktivieren */
.table-wrapper {
  display: block;                 /* sicherstellen, dass overflow-x wirkt */
  overflow-x: auto;               /* horizontales Scrollen erlauben */
  -webkit-overflow-scrolling: touch;
}

/* Falls irgendwo global overflow-x: hidden gesetzt ist, überschreiben */
html, body {
  overflow-x: visible !important;
}