/* Wer bringt was? – Grundlayout und sieben Event-Designs */

/* ---------- Farben je Design ---------- */
:root, .design-neutral, .design-admin {
  --grund: #EEF2F5; --karte: #FFFFFF; --text: #1E2730; --leise: #5B7083; --linie: #C9D3DC;
  --akzent: #2A8C82; --akzent-text: #FFFFFF; --akzent-hell: #D6EEEB;
  --buehne: linear-gradient(135deg, #0A1A26, #10303F); --buehne-text: #FFFFFF;
  --muster: none;
}
.design-geburtstag {
  --grund: #FFF4F8; --akzent: #D6336C; --akzent-hell: #FFD8E6; --linie: #F5C2D5;
  --buehne: linear-gradient(135deg, #FF6FA3, #9B5DE5);
  --muster: radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 3px, transparent 4px),
            radial-gradient(circle at 70% 60%, rgba(255,230,109,.6) 0 3px, transparent 4px),
            radial-gradient(circle at 45% 80%, rgba(0,245,212,.45) 0 3px, transparent 4px);
}
.design-basketball {
  --grund: #FFF6EF; --akzent: #E8590C; --akzent-hell: #FFE3CF; --linie: #F2C7A8;
  --buehne: linear-gradient(135deg, #F76707, #7A2E0B);
  --muster: radial-gradient(circle at 50% 120%, transparent 0 38%, rgba(255,255,255,.18) 38.5% 39.5%, transparent 40%),
            linear-gradient(90deg, transparent 49.6%, rgba(255,255,255,.18) 49.6% 50.4%, transparent 50.4%);
}
.design-fussball {
  --grund: #F1FAF3; --akzent: #1E8E3E; --akzent-hell: #D3F0DB; --linie: #B5DEC0;
  --buehne: repeating-linear-gradient(90deg, #2BA84A 0 48px, #249A42 48px 96px);
  --muster: radial-gradient(circle at 50% 50%, transparent 0 23%, rgba(255,255,255,.35) 23.5% 24.5%, transparent 25%),
            linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.35) 49.7% 50.3%, transparent 50.3%);
}
.design-schule {
  --grund: #F3F7FC; --akzent: #2B6CB0; --akzent-hell: #DCE9F7; --linie: #BCD2EA;
  --buehne: linear-gradient(135deg, #2B6CB0, #1A4A7A);
  --muster: repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,.14) 27px 28px),
            linear-gradient(90deg, transparent 8%, rgba(246,195,67,.55) 8% 8.4%, transparent 8.4%);
}
.design-weihnachten {
  --grund: #FBF6F1; --akzent: #B42318; --akzent-hell: #F8DCD8; --linie: #E7C9C3;
  --buehne: linear-gradient(135deg, #1E6B3A, #0F3D22);
  --muster: radial-gradient(circle at 15% 25%, rgba(255,255,255,.7) 0 2px, transparent 3px),
            radial-gradient(circle at 65% 15%, rgba(255,255,255,.55) 0 3px, transparent 4px),
            radial-gradient(circle at 85% 70%, rgba(255,255,255,.6) 0 2px, transparent 3px),
            radial-gradient(circle at 35% 75%, rgba(255,255,255,.45) 0 3px, transparent 4px);
}
.design-silvester {
  --grund: #F4F2FA; --akzent: #6B3FA0; --akzent-hell: #E6DDF5; --linie: #D2C6E8;
  --buehne: linear-gradient(135deg, #12122B, #2D1B4E);
  --muster: radial-gradient(circle at 20% 30%, #F5C542 0 1.5px, transparent 2.5px),
            radial-gradient(circle at 75% 20%, #FFFFFF 0 1px, transparent 2px),
            radial-gradient(circle at 60% 70%, #F5C542 0 2px, transparent 3px),
            radial-gradient(circle at 30% 80%, #FF6FA3 0 1.5px, transparent 2.5px);
}
.design-grillen {
  --grund: #FBF5F0; --akzent: #C2410C; --akzent-hell: #FBDDCB; --linie: #EBC7B2;
  --buehne: linear-gradient(160deg, #3A2A22, #1F1612);
  --muster: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.07) 22px 26px),
            radial-gradient(ellipse at 50% 130%, rgba(255,120,40,.65), transparent 60%);
}

.design-halloween {
  --grund: #FBF4EC; --akzent: #E8590C; --akzent-hell: #FFE1C7; --linie: #EDC9A8;
  --buehne: linear-gradient(160deg, #2B1240, #120A1C);
  --muster: radial-gradient(circle at 85% 28%, #FFD27A 0 26px, rgba(255,210,122,.22) 27px 36px, transparent 37px),
            radial-gradient(circle at 15% 70%, rgba(255,140,40,.55) 0 2px, transparent 3px),
            radial-gradient(circle at 40% 30%, rgba(180,120,255,.5) 0 2px, transparent 3px),
            radial-gradient(circle at 60% 85%, rgba(255,140,40,.45) 0 2px, transparent 3px);
}
.design-halloween .buehne { background-size: 100% 100%, 140px 140px, 140px 140px, 140px 140px, auto;
  background-repeat: no-repeat, repeat, repeat, repeat, no-repeat; }
.design-halloween .buehne h1 { color: #FF9A3C; }

/* ---------- Grundlayout ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .6em; }
a { color: var(--akzent); }
.leise { color: var(--leise); }
.klein-text { font-size: .85rem; }

.inhalt { width: 100%; max-width: 720px; margin: 0 auto; padding: 16px; }
.mitte { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 16px; margin: 0 0 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.karte.schmal { max-width: 420px; width: 100%; text-align: center; }
.karte.text { max-width: 680px; }
.gross-symbol { font-size: 3rem; line-height: 1; margin-bottom: .3em; }

/* Kopfbereich eines Events */
.buehne {
  background: var(--muster), var(--buehne); background-size: 140px 140px, auto;
  color: var(--buehne-text); text-align: center; padding: 36px 16px 32px;
}
.design-fussball .buehne, .design-basketball .buehne { background-size: 100% 100%, auto; }
.buehne-inhalt { max-width: 720px; margin: 0 auto; }
.buehne .symbol { font-size: 3.2rem; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.buehne h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.buehne .wann { font-size: 1.1rem; font-weight: 600; margin: 0; }
.buehne .wo { margin: 4px 0 0; opacity: .95; }
.design-silvester .buehne h1 { color: #F5C542; }

.beschreibung { white-space: pre-line; }
.meldung { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--akzent-hell); }
.meldung.gut { background: #D3F0DB; }
.meldung.warn { background: #FFE8C2; }

/* Knöpfe */
.knopf, button {
  font: inherit; cursor: pointer; border: 0; border-radius: 10px;
  background: var(--akzent); color: var(--akzent-text); padding: 10px 16px;
  font-weight: 600; text-decoration: none; display: inline-block;
}
.knopf.zweit { background: var(--karte); color: var(--akzent); border: 1px solid var(--linie); }
.knopf.gefahr { background: #B42318; }
button.klein { padding: 5px 10px; font-size: .85rem; font-weight: 500; }
.leise-knopf { background: transparent; color: var(--leise); border: 1px solid var(--linie); }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.aktionen form { margin: 0; }

/* Positionen */
.rubrik { margin-top: 20px; }
.position { border-left: 6px solid #E5484D; }
.position.teilweise { border-left-color: #F5A524; }
.position.voll { border-left-color: #30A46C; }
.pos-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pos-kopf h3 { margin: 0; }
.zaehler { text-align: right; white-space: nowrap; }
.zaehler .zahl { display: block; font-size: 1.3rem; font-weight: 700; }
.zaehler .status { font-size: .8rem; color: var(--leise); }
.voll .zaehler .status { color: #1E7A4E; font-weight: 600; }
.balken { height: 6px; background: var(--akzent-hell); border-radius: 3px; margin: 10px 0; overflow: hidden; }
.balken span { display: block; height: 100%; background: var(--akzent); border-radius: 3px; }
.voll .balken span { background: #30A46C; }
.eintraege { list-style: none; margin: 0 0 8px; padding: 0; }
.eintraege li { padding: 4px 0; border-bottom: 1px dashed var(--linie); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.eintraege li:last-child { border-bottom: 0; }
.person { font-weight: 600; }
.notiz { color: var(--leise); }
form.inline { display: inline; margin-left: auto; }

details.eintragen > summary { list-style: none; width: 100%; text-align: center; }
details.eintragen > summary::-webkit-details-marker { display: none; }
details.eintragen[open] > summary { display: none; }
details.eintragen form { display: grid; gap: 10px; margin-top: 4px; }

/* Formulare */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
input, textarea, select {
  font: inherit; width: 100%; margin-top: 4px; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: 10px; background: #fff; color: var(--text);
}
input:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Admin */
.admin-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  max-width: 720px; margin: 0 auto; padding: 16px 16px 0; }
.admin-kopf h1 { font-size: 1.2rem; margin: 0; }
.admin-kopf form { margin: 0; }
.zurueck { text-decoration: none; font-weight: 600; }
.event-zeile { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-top: 12px; }
.event-zeile .symbol { font-size: 1.8rem; }
.event-zeile .was { flex: 1; display: flex; flex-direction: column; }
.event-zeile.vergangen { opacity: .55; }
.zahlen { font-size: .85rem; white-space: nowrap; }
.link-box input { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.admin-position { border-top: 1px solid var(--linie); padding: 10px 0; }
.admin-position:first-of-type { border-top: 0; }
.zeile { display: grid; grid-template-columns: 1fr 70px 1fr auto; gap: 8px; align-items: center; margin: 0; }
.zeile input { margin: 0; }
.zeile.neu { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--akzent-hell); }
.admin-position > form:nth-of-type(2) { margin: 6px 0 0; }
.design-wahl { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.design-wahl legend { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.design-option { margin: 0; font-weight: 500; }
.design-option input { position: absolute; opacity: 0; }
.design-option span {
  display: inline-block; padding: 8px 12px; border-radius: 999px; color: #fff;
  background: var(--buehne); border: 3px solid transparent; cursor: pointer;
}
.design-option input:checked + span { border-color: var(--text); box-shadow: 0 0 0 2px #fff inset; }
.design-option input:focus-visible + span { outline: 2px solid var(--text); }

.fuss { text-align: center; padding: 20px 16px 28px; font-size: .85rem; }
.fuss a { color: var(--leise); }

@media (max-width: 560px) {
  .zeile { grid-template-columns: 1fr 64px; }
  .zeile input[name="hinweis"] { grid-column: 1 / -1; }
  .zeile button { grid-column: 1 / -1; }
  .zwei-spalten { grid-template-columns: 1fr; gap: 0; }
}

/* Druckansicht (Pinnwand) */
@media print { .nicht-drucken, .fuss, .aktionen { display: none !important; } body { background: #fff; }
  .karte { box-shadow: none; break-inside: avoid; } .buehne { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.druck .nicht-drucken, .druck .aktionen { display: none !important; }

/* Umschalter Eintragen / Übersicht */
.umschalter { display: flex; background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.umschalter a { flex: 1; text-align: center; padding: 8px; border-radius: 9px; text-decoration: none; color: var(--leise); font-weight: 600; }
.umschalter a.aktiv { background: var(--akzent); color: var(--akzent-text); }

/* Tabellen-Übersicht */
.zusammenfassung .summe { padding: 6px 0; }
.zusammenfassung .summe + .summe { border-top: 1px dashed var(--linie); }
.fehlt-liste { margin-top: 6px; color: var(--leise); font-size: .9rem; }
.fehlt-chip { display: inline-block; margin: 3px 4px 0 0; padding: 2px 10px; border-radius: 999px; background: #FDE2E1; color: #9B1C1C; font-weight: 600; font-size: .85rem; }
.alles-da { margin-left: 6px; color: #1E7A4E; font-weight: 600; }
.tabelle-karte { padding: 0; overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
.tabelle tr.gruppe th { background: var(--akzent-hell); color: var(--text); font-size: .95rem; }
.tabelle td:first-child { border-left: 5px solid #E5484D; }
.tabelle tr.teilweise td:first-child { border-left-color: #F5A524; }
.tabelle tr.voll td:first-child { border-left-color: #30A46C; }
.tabelle .rechts { text-align: right; white-space: nowrap; }
.tabelle .stand { font-weight: 700; }
.tabelle tr.voll .stand { color: #1E7A4E; }
.tabelle .frei { color: #9B1C1C; font-size: .85rem; font-weight: 600; }
@media print { .tabelle-karte { overflow: visible; } .tabelle td:first-child, .fehlt-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Austragen-Link nach dem Eintragen */
.link-zeile { display: flex; gap: 6px; align-items: center; }
.link-zeile input { margin: 0; font-size: .8rem; font-family: ui-monospace, Menlo, monospace; background: #fff; }
.tabelle form.inline { margin-left: 6px; }
.klein-buehne { padding: 24px 16px 20px; }
.klein-buehne .symbol { font-size: 2.4rem; }
.meine-liste li { justify-content: space-between; flex-wrap: nowrap; }
.meine-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px;
  background: var(--akzent-hell); border: 2px solid var(--akzent); border-radius: 14px; padding: 12px 16px;
  margin-bottom: 12px; color: var(--text); text-decoration: none; }
.meine-box-aktion { font-weight: 700; color: var(--akzent); white-space: nowrap; }