/* ===== Basis ===== */
html, body { background:#ffffff; color:#333333; }

/* Container & Kopf */
.container { max-width: 880px; margin: 32px auto; padding: 0 16px; }

.container > h1 {
  font-size: 28px; letter-spacing:.2px;
  margin: 0 0 18px;
  text-align: center;
  color:#00567a;
}
.subtitle {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 1.2em;
  color: #555;
}
.container > .intro {
  text-align: center;
  margin: 0 auto 24px auto;
  line-height: 1.5;
  color: #333333;
}

/* ===== Fragekarten ===== */
.qcard{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 16px;
  margin: 18px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  background:#ffffff;
}
.qcard:nth-of-type(4n+1){ background-color: rgba(113,62,122,.10); } /* Violett */
.qcard:nth-of-type(4n+2){ background-color: rgba(80,152,66,.10); }  /* Grün */
.qcard:nth-of-type(4n+3){ background-color: rgba(0,86,122,.10); }  /* Blau */
.qcard:nth-of-type(4n+4){ background-color: rgba(242,141,51,.12); } /* Orange */

/* Kopf der Karte */
.qhead{ display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; }
.qnum{
  flex:0 0 auto;
  width:22px; height:22px; line-height:22px;
  text-align:center; border-radius:999px;
  color:#ffffff; background:#00567a;
  font-weight:700; font-size:.85rem;
}
.qtext{ font-weight:800; line-height:1.4; font-size:1.25rem; color:#00567a; }

/* ===== Antworten ===== */
.qopts{ display:flex; flex-direction:column; gap:0; margin-top:8px; }
.qopts .opt{
  display:flex; align-items:flex-start; gap:12px;
  padding:8px 0; margin:0; background:transparent; border:0; box-shadow:none; cursor:pointer;
}
.qopts .opt + .opt{ border-top:1px solid rgba(0,0,0,.12); }
.qopts .opt input[type="radio"]{
  appearance:auto; -webkit-appearance:auto; position: static !important; inset: auto !important;
  opacity: 1 !important; pointer-events: auto !important; width:20px; height:20px; margin-top:2px;
  background:none; border:none; box-shadow:none; accent-color: #f28d33;
}
.opt .bullet, .opt .custom-radio, .opt [aria-hidden="true"]{ display:none !important; }
.qopts .opt .txt, .qopts .opt span{
  flex:1 1 auto; min-width:0; font-size:1rem; line-height:1.35; margin:0; color:#333333; word-break:normal;
}
.qopts .opt:hover .txt{ color:#00567a; }
.qopts .opt input[type="radio"]:checked + .txt,
.qopts .opt input[type="radio"]:checked + span{ font-weight:600; color:#f28d33; }

/* ===== Responsiv ===== */
@media (max-width:640px){
  .qcard{ padding:14px; margin:14px 0; }
  .qnum{ width:20px; height:20px; line-height:20px; font-size:.8rem; }
  .qtext{ font-size:1.1rem; }
  .qopts .opt{ gap:10px; padding:6px 0; }
  .qopts .opt .txt, .qopts .opt span{ line-height:1.32; font-size:.98rem; }
}

/* ===== Lehrer-Login ===== */
.login-container{
  max-width: 420px; margin: 8vh auto; padding: 24px; background: #fff;
  border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.08); font-family: Arial, sans-serif;
}
@media (max-width: 640px){ .login-container{ margin: 6vh 16px; padding: 20px; } }
.login-container h1{ text-align: center; margin:0 0 16px; font-size: 22px; color: #00567a; letter-spacing: .2px; }
.login-container label{ display:block; margin:12px 0 6px; font-weight:600; }
.login-container input[type="email"], .login-container input[type="password"]{
  width:100%; padding:12px 14px; border:1px solid rgba(0,0,0,.12); border-radius:10px; outline:none; font-size:16px; box-sizing:border-box; background:#fff; color:#333333;
}
.login-btn{
  width:100%; margin-top:14px; padding:12px 16px; font-size:17px; background:#00567a; color:#fff; border:1px solid #004563; border-radius:8px; cursor:pointer; transition: transform .02s ease, background .15s ease;
}
.login-btn:hover{ background:#004563; }
.login-btn:active{ transform: translateY(1px); }
.login-alert{ background:#fff3cd; border:1px solid #ffe08a; padding:10px 12px; border-radius:8px; margin:10px 0 16px; color:#664d03; }

/* ===== Lehrer-Dashboard (Rahmen & Komponenten) ===== */
.dashboard-container{ max-width: 880px; margin: 6vh auto; padding: 0 16px; font-family: Arial, sans-serif; }
.dashboard-container h1{ text-align:center; margin:0 0 24px; font-size:26px; color:#00567a; }
.dashboard-form{
  background:#fff; padding:20px; border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.08); margin-bottom:24px;
}
.dashboard-form label{ display:block; margin:0 0 6px; font-weight:600; }
.dashboard-form input[type="text"]{
  width:100%; padding:12px 14px; border:1px solid rgba(0,0,0,.12); border-radius:10px; outline:none; font-size:16px; box-sizing:border-box;
}
.dashboard-btn{
  display:inline-block; margin-top:14px; padding:10px 16px; font-size:16px;
  background:#00567a; color:#fff; border:1px solid #004563; border-radius:8px; cursor:pointer; text-decoration:none; text-align:center;
}
.dashboard-btn:hover{ background:#004563; }
.dashboard-btn:active{ transform: translateY(1px); }
.dashboard-card{ background:#fff; padding:20px; border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.08); }
.dashboard-card h3{ margin-top:0; color:#00567a; }
.dashboard-alert{ background:#fff3cd; border:1px solid #ffe08a; padding:10px 12px; border-radius:8px; margin:10px 0 16px; color:#664d03; }
.dashboard-link{ color:#00567a; font-weight:bold; text-decoration:none; }
.dashboard-link:hover{ text-decoration: underline; }

/* ===== Lehrer-Dashboard (headerbar, toolbar, table) ===== */
.headerbar{
  display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap; margin:16px 0 10px;
}
.headerbar .left{ color:#333333; font-weight:700; letter-spacing:.2px; overflow-wrap:anywhere; }
.headerbar .right{ display:flex; gap:8px; }

/* Buttons im Dashboard */
.action-btn{
  display:inline-block; padding:9px 14px; border-radius:10px; text-decoration:none; font-size:14px; line-height:1;
  transition:transform .06s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  border:1px solid #00567a; background:#00567a; color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.action-btn:hover{ filter:brightness(0.95); transform:translateY(-1px); }
.action-btn:active{ transform:translateY(0); }
.action-btn.sm{ padding:7px 12px; font-size:13px; }

/* Ghost-Variante in der Kopfzeile */
.headerbar .action-btn{ background:#fff; color:#00567a; }
.headerbar .action-btn:hover{ border-color:#f28d33; }

/* Einleitungspanel nur im Dashboard */
.dashboard-container .intro{
  margin:10px 0 16px; padding:14px; background:#e9f3fa; border-radius:12px; color:#333333; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.dashboard-container .intro p{ margin:0 0 10px; }
.dashboard-container .intro p:last-child{ margin-bottom:0; }

/* Toolbar (Suche + ZIP) */
.toolbar{
  display:flex; gap:10px; align-items:center; justify-content:center; margin:12px 0; flex-wrap:wrap;
}
.toolbar input[type="text"]{
  flex:1; min-width:220px; max-width:340px; padding:10px 12px; border-radius:10px; border:1px solid #e6eef3; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06); color:#333333;
}
.toolbar input[type="text"]:focus{ outline:none; border-color:#f28d33; }
.toolbar button{
  padding:9px 14px; border:1px solid #00567a; background:#00567a; color:#fff; border-radius:10px; cursor:pointer; font-size:14px;
  transition:transform .06s ease, background-color .2s ease, border-color .2s ease; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.toolbar button:hover{ filter:brightness(0.95); transform:translateY(-1px); }

/* Tabelle der Teilnehmer */
table.table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
table.table th, table.table td{ border-bottom:1px solid #e6eef3; padding:12px; text-align:left; color:#333333; }
table.table th{ background:linear-gradient(#f6fbff,#eef6fb); color:#00567a; font-weight:700; }
table.table tr:last-child td{ border-bottom:none; }
table.table tbody tr:hover{ background:#f9fcff; }
#chkAll, .rowChk{ width:16px; height:16px; }

/* Responsive */
@media (max-width: 800px){
  .headerbar{ flex-direction:column; align-items:center; gap:8px; text-align:center; }
  .headerbar .left{ order:-1; }
  .headerbar .right{ justify-content:center; }
}

.container > .intro:first-of-type{
  background:#fff4e9;
  border-radius:12px;
  padding:14px;
}

/* Aktionen-Spalte als Flex-Row mit sauberem Abstand */
table.table td:nth-child(3){
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;           /* Abstand zwischen Buttons */
  flex-wrap: wrap;    /* darf umbrechen, ohne Einzug */
}

/* evtl. vorhandene Margins an Buttons neutralisieren */
table.table td:nth-child(3) .action-btn{ margin: 0; }

/* kompaktere Buttons (kannst du weglassen, wenn du sie normal groß willst) */
table.table .action-btn.sm{
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
}