/* startwahl.css — die Auswahl beim Start.
   Nimmt ausschliesslich die Farbvariablen aus style.css, damit sie in
   allen drei Ansichten stimmt. Im Pergament-Modus darf hier nichts
   dunkel bleiben, das war schon einmal der Fehler. */

.startwahl {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--schleier);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  overflow: auto;
}
.startwahl[hidden] { display: none; }

.sw-tafel {
  width: min(1180px, 100%);
  border: 1px solid var(--line); border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  padding: 26px 26px 18px;
}

.sw-titel { text-align: center; margin-bottom: 20px; }
.sw-titel h1 {
  margin: 0; font-size: 34px; letter-spacing: .18em; color: var(--txt);
  font-weight: 800;
}
.sw-titel h1 span { color: var(--cyan); }
.sw-titel p { margin: 6px 0 0; color: var(--mut); font-size: 14px; }

.sw-gitter {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.sw-karte {
  border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--panel2) 82%, transparent);
  padding: 14px 15px 12px;
  cursor: pointer; outline: none;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.sw-karte:hover, .sw-karte:focus {
  border-color: var(--cyan); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}

.sw-kopf { display: flex; align-items: center; gap: 11px; }
.sw-icon { font-size: 27px; line-height: 1; }
.sw-kopf b { display: block; color: var(--txt); font-size: 16px; letter-spacing: .02em; }
.sw-kopf i {
  display: block; font-style: normal; font-size: 11px;
  color: var(--cyan); letter-spacing: .09em; text-transform: uppercase;
}

.sw-kurz { margin: 0; color: var(--les); font-size: 13.5px; line-height: 1.45; }
.sw-lang { margin: 0; color: var(--mut); font-size: 12px; line-height: 1.5; }

.sw-los {
  margin-top: auto; align-self: flex-start;
  color: var(--cyan); font-size: 12px; letter-spacing: .1em;
  opacity: .65; transition: opacity .14s ease;
}
.sw-karte:hover .sw-los, .sw-karte:focus .sw-los { opacity: 1; }

.sw-knoepfe { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.sw-klein {
  border: 1px solid var(--line); border-radius: 8px;
  background: color-mix(in srgb, var(--panel3) 80%, transparent);
  color: var(--txt); font: inherit; font-size: 12px;
  padding: 6px 10px; cursor: pointer;
}
.sw-klein:hover { border-color: var(--cyan); color: var(--cyan); }

.sw-fuss {
  margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sw-haken {
  display: flex; align-items: center; gap: 7px;
  color: var(--mut); font-size: 12px; cursor: pointer;
}
.sw-hinweis { color: var(--dim); font-size: 12px; flex: 1 1 240px; }
.sw-weg {
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--mut);
  font: inherit; font-size: 12px; padding: 7px 13px; cursor: pointer;
}
.sw-weg:hover { border-color: var(--cyan); color: var(--cyan); }

@media (max-width: 720px) {
  .startwahl { padding: 12px; align-items: flex-start; }
  .sw-tafel { padding: 18px 14px 12px; }
  .sw-titel h1 { font-size: 26px; }
  .sw-lang { display: none; }       /* auf dem Telefon zaehlt der Einzeiler */
}