/* Pure scroll anchor — invisible, takes no space, parks at the section top. */
.anchor-only { position: absolute; top: 0; left: 0; width: 0; height: 0; visibility: hidden; }

/* Editor affordances overlaid on public pages for users with edit permission */

.edit-toolbar {
  position: sticky; top: 68px; z-index: 50;
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 10px 24px;
  background: rgba(8, 9, 13, 0.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff; font-size: 13px;
}
.edit-toolbar .badge {
  background: var(--blue-bright); color: #fff; padding: 4px 10px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.4px;
}

/* Editable areas are clickable at all times for users with edit permission.
   The dashed outline + corner pen icon make it obvious; hover upgrades to
   a solid blue outline and a light blue wash. */
.editable {
  position: relative;
  cursor: pointer;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 6px;
  outline: 1px dashed rgba(37, 99, 212, 0.4);
  outline-offset: 2px;
  transition: outline-color 0.15s ease, background 0.15s ease, outline-width 0.15s ease;
}
.editable:hover {
  outline-style: solid;
  outline-width: 2px;
  outline-color: var(--blue-bright);
  background: rgba(37, 99, 212, 0.06);
}
.editable::after {
  content: "✎";
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 13px;
  color: var(--blue-bright);
  opacity: 0.55;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.editable:hover::after { opacity: 1; }

.edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-bright); color: #fff;
  border: none; border-radius: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.edit-btn:hover { background: var(--blue); }
.edit-btn.secondary { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.edit-btn.danger    { background: #c0392b; }

.edit-form {
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(8, 9, 13, 0.05);
  padding: 16px; border-radius: 8px;
  margin: 8px 0;
}
/* Inline edit form on the public team page — compact, fits a staff card. */
.edit-form-inline {
  background: #fff;
  border: 1px solid var(--border-light);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  max-width: 380px;
  margin: 0;
}
.edit-form-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 1px;
  color: var(--blue);
  margin-bottom: 4px;
}
.edit-form label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.edit-form input[type="text"],
.edit-form input[type="email"],
.edit-form input[type="number"],
.edit-form input[type="time"],
.edit-form select,
.edit-form textarea {
  width: 100%;
  padding: 10px 12px; font: inherit;
  border: 1px solid var(--border-light); border-radius: 6px;
  background: #fff; color: var(--text);
}
.edit-form textarea { min-height: 120px; resize: vertical; }
.edit-form .row { display: flex; gap: 12px; align-items: center; }
.edit-form .row > * { flex: 1; }
.edit-form .actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Foto-Grid im News-Formular - vorhandene Fotos je mit Entfernen-Checkbox. */
.news-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.news-photo-thumb {
  border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden;
  background: #f4f6fa;
}
.news-photo-thumb img, .news-photo-thumb video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.news-photo-remove {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; font-size: 11.5px; color: var(--text);
  text-transform: none; letter-spacing: 0;
}

.training-row {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap;
  gap: 12px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.training-row .muted { color: var(--muted); font-size: 13px; }

/* Public login form */
.login-card {
  max-width: 420px; margin: 160px auto 80px;
  background: #fff; color: var(--text);
  padding: 40px 32px; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.login-card h1 { font-family: 'Bebas Neue', sans-serif; font-size: 40px; letter-spacing: 1px; margin-bottom: 24px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
/* Each label+input pair stacks vertically and takes the full card width. */
.login-card .field { display: flex; flex-direction: column; gap: 6px; }
.login-card .field label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.login-card .field input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font: inherit;
  border: 1px solid var(--border-light); border-radius: 6px;
  background: #fff; color: var(--text);
}
/* "Angemeldet bleiben" — inline checkbox + label with no border. */
.login-card .check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text);
}
.login-card .check input { width: auto; margin: 0; }
.login-card button[type="submit"] {
  padding: 12px; font: inherit; background: var(--blue-bright); color: #fff;
  border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.login-card .error { color: #c0392b; font-size: 14px; }

/* Team photo (replaces about-img on team pages) */
.team-photo {
  width: 100%; max-width: 900px; margin: 24px auto;
  aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--blue-dim) center/cover no-repeat;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Admin-Shell: feste Sidebar links + Inhalt rechts. Sidebar haengt unter der
   fixen Hauptnav (68px) und scrollt bei Bedarf unabhaengig mit. Auf Mobile
   faellt sie in den normalen Fluss zurueck (kein Overlay, keine Kollision
   mit den zentrierten Admin-Sections). */
.admin-shell {
  display: flex;
  align-items: flex-start;
  padding-top: 68px;
  min-height: 100vh;
}
.admin-sidebar {
  width: 232px;
  flex-shrink: 0;
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  padding: 24px 14px;
  background: rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-content { flex: 1; min-width: 0; }
.admin-sidebar-title {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 0.5px;
  color: #fff; text-decoration: none;
  padding: 8px 10px; border-radius: 6px;
  margin-bottom: 10px;
}
.admin-sidebar-title:hover, .admin-sidebar-title.active { background: rgba(37, 99, 212, 0.18); color: var(--blue-bright); }
.admin-nav-group { margin-bottom: 18px; }
.admin-nav-group-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  padding: 6px 10px 4px;
}
.admin-nav-link {
  display: block;
  font-size: 13.5px; color: rgba(255,255,255,0.75); text-decoration: none;
  padding: 7px 10px; border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-nav-link.active { background: rgba(37, 99, 212, 0.22); color: #fff; font-weight: 600; }
.admin-sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 2px;
}
.admin-sidebar-user {
  font-size: 12px; color: rgba(255,255,255,0.45);
  padding: 0 10px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-nav-logout {
  background: none; border: none; text-align: left; cursor: pointer;
  width: 100%; font: inherit;
}

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; padding-top: 0; }
  .admin-sidebar {
    position: static; width: auto; max-height: none; overflow: visible;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 84px 16px 12px;
  }
  .admin-nav-group { margin-bottom: 10px; }
}

/* Admin grid */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 24px; }
.admin-card { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.admin-card h3 { margin-bottom: 10px; }
.admin-card a { color: var(--blue-bright); text-decoration: none; }

/* Gruppenueberschriften ueber den Kachel-Reihen - dieselbe Kategorisierung
   wie im Sidebar-Menue (Mannschaften & Trainer / Inhalte / System). */
.admin-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin: 40px 24px 4px;
}
.admin-section-title:first-of-type { margin-top: 8px; }

/* Speicherplatz/Besucherzaehler: eigene, breitere Status-Panels statt
   normaler Kacheln - Speicherplatz braucht Platz fuer den Auslastungsbalken,
   der Besucherzaehler fuer die Kennzahlen-Reihe. */
.admin-status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px; padding: 24px 24px 0;
}
.admin-status-panel {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px;
}
.admin-status-panel h3 { margin-bottom: 14px; }
.admin-status-panel a { color: var(--blue-bright); text-decoration: none; }
.admin-usage-bar-track {
  background: rgba(255,255,255,0.08); border-radius: 6px; height: 12px; overflow: hidden;
}
.admin-usage-bar-fill { height: 100%; border-radius: 6px; transition: width 0.3s ease; }
.admin-usage-bar-fill.ok { background: var(--blue-bright); }
.admin-usage-bar-fill.warn { background: #d99a2b; }
.admin-usage-bar-fill.danger { background: #c0392b; }

.admin-visitor-stats { display: flex; flex-direction: column; gap: 10px; }
.admin-visitor-stats > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.avs-label { flex: 1; min-width: 90px; font-size: 13px; color: var(--muted); }
.avs-value { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.5px; color: #fff; }
.avs-unit { font-family: inherit; font-size: 11px; letter-spacing: 0; color: var(--muted); margin-left: 4px; text-transform: none; }
.avs-sub { font-size: 12px; color: var(--muted); }

/* ── /admin/besucherzaehler — eigene Seite statt Dashboard-Panel ── */
.bzs-hero {
  margin-top: 28px; padding: 32px; text-align: center; border-radius: 16px;
  background: linear-gradient(180deg, rgba(37,99,212,0.14), rgba(37,99,212,0.04));
  border: 1px solid rgba(37,99,212,0.30);
}
.bzs-hero-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.bzs-hero-value { font-family: 'Bebas Neue', sans-serif; font-size: 56px; letter-spacing: 0.5px; color: #fff; line-height: 1; }
.bzs-hero-unit { font-family: 'Outfit', sans-serif; font-size: 16px; letter-spacing: 0; color: var(--blue-bright); margin-left: 10px; text-transform: none; }
.bzs-hero-sub { font-size: 14px; color: var(--muted); margin-top: 8px; }

.bzs-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.bzs-status-badge { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.bzs-status-badge.is-active { color: #a6f3c0; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.35); }
.bzs-status-badge.is-paused { color: #ffe58a; background: rgba(255,193,7,0.12); border: 1px solid rgba(255,193,7,0.35); }
.bzs-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 8px; max-width: 640px; }

.bzs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-top: 20px; }
.bzs-card { padding: 20px; text-align: center; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.bzs-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.bzs-card-value { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: #fff; line-height: 1; }
.bzs-card-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }

.avs-toplists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.avs-toplist-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 8px; }
.avs-toplist ol { list-style: none; margin: 0; padding: 0; counter-reset: avs-rank; }
.avs-toplist li { counter-increment: avs-rank; display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; }
.avs-toplist li::before { content: counter(avs-rank) "."; color: var(--muted); flex-shrink: 0; width: 18px; }
.avs-toplist-path { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avs-toplist-count { color: var(--blue-bright); font-weight: 600; flex-shrink: 0; }

.avs-reset-reveal { margin-top: 16px; }
.avs-reset-summary { font-size: 12px; padding: 8px 14px; cursor: pointer; list-style: none; }
.avs-reset-summary::-webkit-details-marker { display: none; }
.avs-reset-warning {
  margin-top: 10px; padding: 14px 16px; border-radius: 10px;
  background: rgba(192,57,43,0.10); border: 1px solid rgba(192,57,43,0.35);
}
.avs-reset-warning p { font-size: 13px; color: #ffcfce; line-height: 1.6; margin: 0 0 12px; }
.avs-reset-warning p strong { color: #fff; }
.avs-reset-confirm {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: #ffcfce; margin-bottom: 12px; cursor: pointer;
}
.avs-reset-confirm input { margin-top: 2px; flex-shrink: 0; }

@media (max-width: 640px) {
  .admin-status-grid { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 0; }
  .admin-visitor-stats > div { justify-content: space-between; }
  .avs-label { min-width: 0; }
}

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 14px; }
.admin-table th { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; }

/* Logo preview cell inside admin tables — same look as the public p-card so
   admins see exactly the image the public page will resolve to. */
.admin-logo-cell {
  width: 72px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 6px;
  padding: 6px;
}
.admin-logo-cell img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.admin-logo-empty {
  font-size: 11px; color: #94a3b8;
  font-style: italic;
}

/* Live preview block on the sponsor edit page. */
.sponsor-preview {
  margin-top: 24px;
  padding: 20px;
  background: var(--dark);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.sponsor-preview-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--blue-bright); text-transform: uppercase;
}