/* Schrift "Outfit" (SIL Open Font License, siehe fonts/OFL.txt) – selbst gehostet, keine Verbindung zu Google */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/outfit.woff") format("woff"); }
:root {
  --green-900: #071a4a;
  --green-800: #0a3a8c;
  --green-700: #1254c4;
  --green-600: #1a6be0;
  --green-500: #4ea2ff;
  --cream: #f7f4ee;
  --cream-2: #efe8da;
  --gold: #d4af37;
  --gold-soft: #f3e0a8;
  --ink: #0b1630;
  --muted: #5a6478;
  --card: rgba(255,255,255,.88);
  --line: rgba(255,255,255,.55);
  --yes: #148f4a;
  --no: #c62828;
  --maybe: #c07800;
  --shadow: 0 18px 50px rgba(4, 16, 40, .28);
  --glass: saturate(1.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Outfit, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  letter-spacing: -.01em;
  background-color: #1c4a22;
  background-image:
    radial-gradient(1200px 500px at 50% -80px, rgba(18,70,180,.28), transparent 60%),
    linear-gradient(180deg, rgba(6,18,12,.25), rgba(6,12,8,.45)),
    url("../img/rasen.webp");
  background-size: auto, auto, cover;
  background-attachment: fixed;
  background-position: center;
}

.topbar {
  background: linear-gradient(105deg, rgba(7,26,74,.92), rgba(18,84,196,.78));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  padding: 14px 18px;
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
}
.head-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.theme-btn {
  width: 46px; height: 46px; border: 0; border-radius: 12px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.15rem;
  cursor: pointer;
}
.theme-btn:hover { background: rgba(255,255,255,.22); }
.brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.crest {
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  transition: transform .25s ease;
}
.brand:hover .crest { transform: rotate(-8deg) scale(1.06); }
.brand h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.brand p { margin: 0; font-size: .82rem; opacity: .85; }

.menu-btn {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 0;
}
.menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-panel {
  position: absolute;
  right: 12px;
  top: 68px;
  width: min(280px, calc(100% - 24px));
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  padding: 8px;
  display: grid;
  gap: 4px;
}
.menu-panel[hidden] { display: none !important; }
.menu-panel button {
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 650;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--green-900);
}
.menu-panel button:hover { background: var(--cream-2); }
.menu-panel button.active {
  background: var(--green-700);
  color: #fff;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 18px 14px 80px; }

.who {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.who label { font-weight: 700; color: var(--green-800); }
.who select, .who input, textarea, select, input[type="text"], input[type="date"], input[type="time"] {
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid #cfc6b6;
  border-radius: 10px;
  background: #fff;
  min-height: 46px;
}
.who select { min-width: 220px; flex: 1; }

.hero, .card {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 20px 20px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.65);
  animation: rise .45s ease;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.kicker {
  display: inline-block;
  background: var(--green-600);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.kicker.social { background: #9a3412; }
.kicker.done { background: #475569; }
.hero h2 { margin: 8px 0 4px; font-size: 1.6rem; }
.meta { color: var(--muted); margin: 0 0 12px; }

.counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.count {
  background: linear-gradient(180deg, #fff, #f3f6ff);
  border-radius: 16px;
  text-align: center;
  padding: 12px 6px;
  border: 1px solid rgba(18,84,196,.08);
}
.count b { display: block; font-size: 1.6rem; color: var(--green-700); }
.count span { font-size: .8rem; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.btn {
  border: 0;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 52px;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-yes { background: var(--yes); color: #fff; }
.btn-no { background: var(--no); color: #fff; }
.btn-maybe { background: var(--maybe); color: #fff; }
.btn-ghost { background: var(--cream-2); color: var(--ink); }
.btn-gold {
  background: linear-gradient(180deg, #f0d36a, var(--gold));
  color: #1a1404;
  box-shadow: 0 8px 18px rgba(212,175,55,.35);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.full { width: 100%; }

.status-banner {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
}
.status-banner.yes { background: #dcfce7; color: #14532d; }
.status-banner.no { background: #fee2e2; color: #7f1d1d; }
.status-banner.maybe { background: #ffedd5; color: #7c2d12; }

.lists { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.list-box h3 { margin: 0 0 8px; font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--cream-2);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .9rem;
}
.chip.guest { background: #fde68a; }
.chip.you { outline: 2px solid var(--green-600); }

.event-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s ease;
}
.event-row:hover { background: var(--cream); }
.event-row:last-child { border-bottom: 0; }
.event-row small { color: var(--muted); }

.note {
  background: #fff8e7;
  border-left: 4px solid var(--gold);
  padding: 12px 14px;
  border-radius: 0 12px 12px 0;
  margin: 12px 0;
}

.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team { background: var(--cream); border-radius: 12px; padding: 12px; }
.team h3 { margin: 0 0 8px; }
.score {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--green-800);
  margin: 8px 0 14px;
}
.score small { display: block; font-size: .9rem; font-weight: 600; color: var(--muted); }

table.stats {
  width: 100%;
  border-collapse: collapse;
  font-size: .98rem;
}
table.stats th, table.stats td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}
table.stats th { background: var(--green-800); color: #fff; }
table.stats tr:nth-child(even) { background: #f7f3ea; }
table.stats .pct {
  height: 8px;
  background: #ddd4c4;
  border-radius: 99px;
  overflow: hidden;
  min-width: 80px;
}
table.stats .pct i {
  display: block;
  height: 100%;
  background: var(--green-500);
}

.form-grid { display: grid; gap: 10px; }
.form-grid label { font-weight: 650; font-size: .92rem; }
.guest-box {
  background: var(--cream);
  padding: 12px;
  border-radius: 12px;
  margin-top: 10px;
}
.hidden { display: none !important; }
.hint { font-size: .88rem; color: var(--muted); }

.splash {
  position: relative;
  overflow: visible;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(135deg, #071a4a 0%, #1254c4 70%) !important;
  color: #fff;
  border: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
}
.splash img {
  width: 110px;
  height: 110px;
  max-width: 110px;
  padding: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  filter: none;
  animation: none;
  image-rendering: auto;
}
.splash h2 { margin: 0 0 6px; font-size: 1.45rem; font-weight: 800; letter-spacing: 0; color: #fff; }
.splash p { margin: 0; opacity: 1; color: #e8eefc; }
.splash .tag {
  display: inline-block;
  margin-top: 10px;
  background: rgba(212,160,23,.2);
  border: 1px solid #d4a017;
  color: #f0d78c;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.count { transition: transform .15s ease; }
.count:hover { transform: scale(1.04); }
.chip { transition: transform .15s ease; }
.chip:hover { transform: scale(1.05); }
.sitefoot {
  text-align: center;
  padding: 28px 16px 40px;
  color: rgba(255,255,255,.82);
  font-size: .88rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.about-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
}
.about-grid img {
  width: 220px;
  height: 220px;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.contact-card a { color: var(--green-700); font-weight: 700; }
@media (max-width: 760px) {
  .lists, .teams, .counts, .splash, .about-grid { grid-template-columns: 1fr; }
  .brand h1 { font-size: 1.02rem; }
  .splash { text-align: left; grid-template-columns: 96px 1fr; gap: 12px; }
  .splash img { width: 96px; height: 96px; max-width: 96px; margin: 0; }
  .splash h2 { font-size: 1.25rem; }
  .about-grid img { margin: 0 auto; }
}

.news-media { width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; margin: 8px 0; }


.weather { background: linear-gradient(120deg,#eef4ff,#fff8e7); border:1px solid rgba(18,84,196,.12); border-radius:16px; padding:12px 14px; margin:10px 0 4px; font-size:.95rem; }


.btn-hz3 { background: #5b4b9a; color: #fff; }
.status-banner.hz3 { background: #ede9fe; color: #4c1d95; }
.counts-3, .counts-4 { grid-template-columns: repeat(3, 1fr); }
.counts-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
  .counts-4 { grid-template-columns: 1fr 1fr; }
}

.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.kpi { background:#f4f7f2; border-radius:12px; padding:14px 12px; text-align:center; }
.kpi b { display:block; font-size:1.6rem; color:var(--green-700); }
.kpi span { font-size:.8rem; color:#5b6658; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.legend { list-style:none; padding:0; margin:10px 0 0; }
.legend li { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:.9rem; }
.legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.pie { display:block; margin:0 auto; }
.bars { display:flex; flex-direction:column; gap:8px; }
.bar-row { display:grid; grid-template-columns:90px 1fr 42px; gap:8px; align-items:center; font-size:.9rem; }
.bar-track { background:#e6ebe4; border-radius:999px; height:10px; overflow:hidden; }
.bar-track i { display:block; height:100%; border-radius:999px; }
.facts { padding-left:18px; line-height:1.7; }
@media (max-width: 760px) {
  .kpi-grid, .dash-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .dash-grid { grid-template-columns:1fr; }
}
.bday-list { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; }
.bday-chip {
  width:72px; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:0;
  color:inherit; font:inherit;
}
.bday-ava {
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(160deg,#0d47a1,#42a5f5);
  color:#fff; font-weight:800; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.bday-ava img { width:100%; height:100%; object-fit:cover; }
.bday-chip strong { font-size:.72rem; font-weight:700; text-align:center; line-height:1.15; max-width:72px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bday-chip em { font-style:normal; font-size:.68rem; font-weight:700; color:#0d47a1; }
html[data-theme="dark"] .bday-chip em { color:#7eb6ff; }

.who { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.cloud-status {
  width: 12px; height: 12px; padding: 0; border-radius: 50%;
  display: inline-block; flex-shrink: 0; border: 2px solid rgba(0,0,0,.12);
  font-size: 0; line-height: 0; overflow: hidden;
}
.cloud-status.local { background: #9aa3b2; }
.cloud-status.wait { background: #e6b800; box-shadow: 0 0 0 3px rgba(230,184,0,.28); }
.cloud-status.ok { background: #22a34a; }
.cloud-status.err { background: #d32f2f; }

.chip small { display:block; font-weight:600; font-size:.68rem; opacity:.75; margin-top:2px; }


.pin-box { background:#fff8e7; border:1px solid #e0c56a; border-radius:12px; padding:12px; margin:10px 0; }
.pin-box input { width:100%; margin:8px 0; font-size:1.1rem; letter-spacing:3px; }

.brand-sub { margin:2px 0 0; font-size:.78rem; letter-spacing:.04em; font-weight:800; color:#f3e6a8; }
.brand-sub-light { font-weight:800; letter-spacing:.03em; }
.brand h1 { font-size:1.05rem; line-height:1.15; }
.brand p { margin:0; }
.tip-opts { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.sponsor-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.sponsor-chip { background:#f4f7f2; border-radius:10px; padding:8px 12px; display:flex; align-items:center; gap:8px; }
.sponsor-chip img, .sponsor-logo { width:56px; height:56px; object-fit:contain; border-radius:8px; }
.sponsor-card { display:flex; gap:16px; align-items:flex-start; }
@media (max-width:520px){ .sponsor-card { flex-direction:column; } }
.team-rot { background:#fde8e8; border-left:4px solid #c62828; }
.team-schwarz { background:#ececec; border-left:4px solid #111; }
.assign-list { display:flex; flex-direction:column; gap:8px; margin:10px 0 16px; }
.assign-row { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.assign-btns { display:flex; gap:6px; }
.abtn { border:0; border-radius:999px; padding:6px 10px; font-weight:700; cursor:pointer; opacity:.55; }
.abtn.on { opacity:1; outline:2px solid #14331c; }
.abtn.rot { background:#c62828; color:#fff; }
.abtn.schwarz { background:#111; color:#fff; }
.abtn.hz { background:#c9a227; color:#14331c; }

.beer-wrap { text-align:center; margin:8px 0 22px; }
.beer-btn { display:inline-block; font-size:.82rem; color:#14331c; background:rgba(255,255,255,.72); border:1px solid rgba(20,51,28,.18); border-radius:999px; padding:6px 14px; text-decoration:none; font-weight:600; }
.beer-btn:hover { background:#fff; }

.poll-opt { margin:10px 0; }
.poll-results { margin-top:8px; }

.auth-bar { background:rgba(255,255,255,.78); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.55); border-radius:18px; padding:8px 12px; margin:8px 0 14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.auth-bar .cloud-status { margin-left:auto; }
.auth-quiet { font-size:.9rem; color:var(--muted); font-weight:600; }
.who-locked { display:none !important; }

.auth-bar input, .auth-bar select { min-width:180px; }
.auth-ok { font-weight:700; color:#1b5e20; }


.beer-like {
  border: 1px solid var(--line);
  background: #fff8e7;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 1.05rem;
}
.beer-like.on { background: #c9a227; outline: 2px solid #0d47a1; }
.beer-like:disabled { opacity: .4; cursor: not-allowed; }
.beer-meta { display: block; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-chart .bar-row { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; font-size: .88rem; }

.notice-banner { background: linear-gradient(180deg,#fff8e1,#fff); border: 2px solid var(--gold) !important; }
.notice-banner h2 { color: var(--green-800); }

html[data-theme="dark"] {
  --cream: #1a2233;
  --cream-2: #243044;
  --ink: #eef3ff;
  --muted: #a9b4c8;
  --card: rgba(16,22,36,.78);
  --line: rgba(255,255,255,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}
html[data-theme="dark"] body {
  color: var(--ink);
  background-image:
    radial-gradient(1200px 500px at 50% -80px, rgba(10,30,80,.45), transparent 60%),
    linear-gradient(180deg, rgba(2,6,14,.62), rgba(2,6,12,.78)),
    url("../img/rasen.webp");
}
html[data-theme="dark"] .who,
html[data-theme="dark"] .auth-bar,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .card {
  background: linear-gradient(180deg, rgba(22,30,48,.88), rgba(12,18,32,.82));
  border-color: rgba(255,255,255,.1);
  color: var(--ink);
}
html[data-theme="dark"] .who label,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 { color: #eaf0ff; }
html[data-theme="dark"] .count,
html[data-theme="dark"] .kpi {
  background: #121a2c !important;
  border: 1px solid rgba(255,255,255,.14);
}
html[data-theme="dark"] .count b,
html[data-theme="dark"] .kpi b {
  color: #7eb6ff !important;
}
html[data-theme="dark"] .count span,
html[data-theme="dark"] .kpi span {
  color: #c5d0e6 !important;
}
html[data-theme="dark"] table.stats {
  color: #eaf0ff;
  background: #121a2c;
}
html[data-theme="dark"] table.stats tr:nth-child(even) { background: #1a2438; }
html[data-theme="dark"] table.stats tr:nth-child(odd) { background: #121a2c; }
html[data-theme="dark"] table.stats td { color: #eaf0ff; }
html[data-theme="dark"] .weather {
  background: linear-gradient(120deg,#18233a,#2a2418);
  border-color: rgba(255,255,255,.1);
  color: #e8eefc;
}
html[data-theme="dark"] .chip,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .list-box,
html[data-theme="dark"] .team {
  background: #1c2740;
  color: #eaf0ff;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #121826;
  color: #eaf0ff;
  border-color: #33405a;
}
html[data-theme="dark"] .menu-panel { background:#151b2b; color:#eaf0ff; }
html[data-theme="dark"] .menu-panel button { color:#dce6ff; }
html[data-theme="dark"] .menu-panel button:hover { background:#243044; }
html[data-theme="dark"] table.stats th { background:#0d47a1; }
html[data-theme="dark"] table.stats td { border-color:#2a354c; }
html[data-theme="dark"] .sitefoot { color: rgba(255,255,255,.7); }
html[data-theme="dark"] .hint { color:#9aa6bc; }
html[data-theme="dark"] .notice-banner { background: linear-gradient(180deg,#3a3014,#241e12); }

.who-locked label, .who-locked select { display:none !important; }
.who-locked { justify-content:flex-end; padding:8px 12px; }

html[data-theme="dark"] .splash,
html[data-theme="dark"] .splash.card,
html[data-theme="dark"] .splash.hero {
  background: linear-gradient(135deg, #071a4a 0%, #1254c4 70%) !important;
  backdrop-filter: none !important;
  color: #fff;
}
html[data-theme="dark"] .splash h2,
html[data-theme="dark"] .splash p { color: #fff; }

.fresh-banner {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: linear-gradient(180deg,#fff8e1,#fff);
  border:1px solid #e0c36a; border-radius:16px; padding:10px 12px; margin:10px 0;
}
.fresh-banner b { display:block; font-size:.95rem; }
html[data-theme="dark"] .fresh-banner { background:#2a2414; border-color:#8a6d1a; color:#fff8e1; }

.claim-warn {
  background:#fff3cd; color:#5c4300; border:1px solid #e0b84a;
  border-radius:12px; padding:10px 12px; margin:6px 0; font-size:.92rem; width:100%;
}
.claim-warn h3 { color:#5c4300; }
html[data-theme="dark"] .claim-warn { background:#3a3014; color:#ffe7a3; border-color:#8a6d1a; }
html[data-theme="dark"] .claim-warn h3 { color:#ffe7a3; }

.btn-google {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#3c4043; border:1px solid #dadce0; border-radius:10px;
  font-weight:600; padding:10px 16px; box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.btn-google:hover { background:#f8f9fa; }
.g-logo { display:inline-flex; width:18px; height:18px; }
html[data-theme="dark"] .btn-google { background:#fff; color:#3c4043; }

.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-top:10px; }
.photo-item { position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:10px; background:#0002; }
.photo-item img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.photo-item .photo-del { position:absolute; left:6px; right:6px; bottom:6px; padding:4px 6px; font-size:.8rem; opacity:.92; }
.admin-sec summary { cursor:pointer; font-weight:700; font-size:1.05rem; }
.admin-sec[open] summary { margin-bottom:10px; }
.photo-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:80; display:flex; align-items:center; justify-content:center; }
.photo-lightbox img { max-width:94vw; max-height:90vh; border-radius:8px; }
.photo-lightbox .nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:0; font-size:36px; width:44px; height:64px; cursor:pointer; }
.photo-lightbox .prev { left:8px; }
.photo-lightbox .next { right:8px; }
.odds { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:10px 0; }
.odds div { text-align:center; background:var(--card-2,#f4f1ea); border-radius:12px; padding:8px 4px; }
.odds b { display:block; font-size:1.25rem; color:var(--blue,#0d47a1); }
.odds span { font-size:.75rem; opacity:.75; }

/* ---------- Vereinsgeschichte (Zeitleiste) ---------- */
.tl-page { padding-bottom: 90px; }
.tl-title { margin: 6px 0 12px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.tl-admin, .tl-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.tl-yearbar { position:sticky; top:80px; z-index:20; display:flex; gap:6px; overflow-x:auto; padding:8px 10px; margin:0 -4px 14px;
  background:var(--card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:14px; box-shadow:0 4px 18px rgba(0,0,0,.14); scrollbar-width:thin; }
.tl-yearbar button { flex:0 0 auto; border:0; border-radius:999px; padding:7px 13px; font:inherit; font-weight:700; cursor:pointer; background:var(--cream-2); color:var(--ink); }
.tl-yearbar button.on { background:linear-gradient(180deg,#f0d36a,var(--gold)); color:#1a1a1a; }
.tl-yearbar .tl-order { margin-left:auto; font-weight:600; opacity:.85; }
.tl-line { position:relative; margin-left:14px; padding-left:22px; border-left:4px solid var(--gold); }
.tl-year { position:relative; padding-bottom:18px; scroll-margin-top:150px; }
.tl-dot { position:absolute; left:-36px; top:8px; width:20px; height:20px; border-radius:50%; background:var(--gold); border:4px solid #fff; box-shadow:0 0 0 2px var(--gold); }
.tl-yearlabel { margin:0 0 10px; font-size:2rem; line-height:1.1; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.tl-yearlabel.tl-small { font-size:1.3rem; }
.tl-ms { border-left:6px solid var(--gold); }
.tl-ms p { margin:6px 0 0; }
.tl-group h3 { margin:0 0 8px; }
.tl-plain { margin:8px 0; }
.tl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px; }
.tl-ph { position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:10px; background:#0002; padding:0; border:0; cursor:pointer; display:block; }
.tl-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.tl-curate .tl-ph { outline:3px solid transparent; }
.tl-curate .tl-ph.on { outline-color:var(--gold); }
.tl-curate .tl-ph.pub::after { content:""; position:absolute; left:8px; top:32px; width:12px; height:12px; border-radius:50%; background:#22a559; box-shadow:0 0 0 2px #fff; }
.tl-badge { position:absolute; left:4px; top:4px; background:rgba(0,0,0,.62); color:#fff; font-size:.72rem; font-weight:700; padding:2px 6px; border-radius:6px; }
.tl-badge b { color:#ffd54a; margin-left:2px; }
.tl-titlebadge { position:absolute; left:4px; right:40px; bottom:4px; background:rgba(0,0,0,.62); color:#fff; font-size:.68rem; padding:2px 5px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-check { position:absolute; right:4px; top:4px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.85); color:transparent; text-align:center; line-height:24px; font-weight:800; }
.tl-ph.on .tl-check { background:var(--gold); color:#1a1a1a; }
.tl-zoom { position:absolute; right:4px; bottom:4px; width:30px; height:30px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:.9rem; }
.tl-bar { position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--card); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:8px 14px; box-shadow:0 -6px 24px rgba(0,0,0,.25); max-height:40vh; overflow:auto; }
.tl-bar[hidden] { display:none; }
.tl-bar .tl-row { margin:4px 0; }
.tl-more summary { cursor:pointer; font-weight:600; padding:4px 0; }
.tl-bar input[type=text], .tl-bar input[type=number], .tl-bar input[type=date] { padding:8px; border-radius:8px; border:1px solid #0003; font:inherit; max-width:150px; }
.tl-bar input[type=text] { max-width:210px; }
.tl-meter { height:12px; border-radius:6px; background:#0002; overflow:hidden; margin:12px 0 6px; }
.tl-meter div { height:100%; background:linear-gradient(90deg,#f0d36a,var(--gold)); transition:width .2s; }
.tl-msform label { display:block; margin:8px 0; font-weight:600; }
.tl-msform input, .tl-msform textarea { display:block; width:100%; padding:8px; margin-top:4px; border-radius:8px; border:1px solid #0003; font:inherit; box-sizing:border-box; }
.tl-note { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.65); margin:0 0 10px; }
.tl-prop { border-top:1px solid #0002; padding-top:8px; margin-top:8px; }
.tl-page .card label:not(.btn) { display:block; margin:8px 0; font-weight:600; }
.tl-page .card label:not(.btn) input[type=text], .tl-page .card label:not(.btn) input[type=number] { display:block; width:100%; padding:8px; margin-top:4px; border-radius:8px; border:1px solid #0003; font:inherit; box-sizing:border-box; }

/* Lightbox: Schliessen-Knopf rechts oben */
.photo-lightbox .close { position:absolute; top:calc(10px + env(safe-area-inset-top, 0px)); right:10px; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.35); font-size:28px; line-height:1; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; padding:0; }

/* YouTube-Einbettung */
.yt-box { aspect-ratio:16/9; border-radius:12px; overflow:hidden; margin:10px 0; background:#0b1b3f; }
.yt-play { width:100%; height:100%; border:0; cursor:pointer; color:#fff; background:linear-gradient(135deg,#0b2a6b,#1a4fb8); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font:inherit; padding:12px; }
.yt-ico { font-size:44px; line-height:1; width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.yt-txt { font-weight:700; font-size:18px; }
.yt-play small { opacity:.8; font-size:13px; }
.yt-frame { width:100%; height:100%; border:0; display:block; }
.stor-bar { height:14px; border-radius:8px; background:rgba(120,130,160,.25); overflow:hidden; margin:6px 0 2px; }
.stor-bar > i { display:block; height:100%; background:#1a8f4a; }
.stor-bar.warn > i { background:#d98a00; }
.stor-bar.crit > i { background:#c0392b; }

/* Admin: rote Markierung am Menueknopf, wenn etwas wartet */
.menu-btn { position: relative; }
.menu-btn.has-pending::after { content:""; position:absolute; top:6px; right:6px; width:14px; height:14px; border-radius:50%; background:#e53935; border:2px solid #fff; box-sizing:border-box; }

/* Datenschutz & Impressum */
.legal h4 { margin:18px 0 6px; }
.legal ul { padding-left:20px; }
.legal li { margin:6px 0; }
.sitefoot a { color:inherit; text-decoration:underline; }

.auth-code { margin-top:10px; display:grid; gap:6px; }
.auth-code input { text-align:center; letter-spacing:.2em; }