@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --primary: #0b5ed7;
  --primary-2: #1d4ed8;
  --accent: #d62828;
  --bg: #eff4ff;
  --panel: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --border: #d0d6e4;
  /* NEU: Standard-Randfarbe */
  --radius: 14px;
  --shadow: 0 10px 28px rgba(2, 15, 46, .10);

  /*
    Einige der Administrationsseiten und Komponenten verwenden die CSS‑Variablen
    --card und --card-bg. Diese waren bislang nirgendwo gesetzt und fielen
    deshalb im Light‑Mode auf die dunkel definierte Fallback‑Farbe zurück.
    Um sicherzustellen, dass alle Panels und Karten im hellen Design
    korrekt dargestellt werden, setzen wir sowohl --card als auch
    --card-bg auf denselben Wert wie das Standard‑Panel. Im Dark‑Mode
    überschreibt der Body (Klasse .dark) diese Werte automatisch. */
  --card: var(--panel);
  --card-bg: var(--panel);
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1000px 360px at 15% -10%, rgba(13, 110, 253, .25), transparent 60%),
    radial-gradient(800px 360px at 85% -20%, rgba(214, 40, 40, .22), transparent 60%),
    linear-gradient(180deg, #f6f9ff 0%, var(--bg) 100%);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px
}

/* Header */
.site-header {
  background: var(--panel);
  border-bottom: 3px solid var(--primary);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit
}

.brand img {
  height: 52px
}

.brand-text strong {
  letter-spacing: .02em
}

.brand-text span {
  font-weight: 600;
  color: var(--primary);
  margin-left: 6px;
  display: inline-block;
}

/* Navigation mit Untermenüs */
.nav {
  display: block;
  /* Container für die Liste */
}

.nav>ul {
  display: flex;
  gap: 20px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  position: relative;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  padding: 6px 2px;
  display: block;
}

/* Hover-Linie (nur Level 1) */
.nav>ul>li>a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--primary);
  transition: width .25s ease;
}

.nav a:hover,
.nav li:focus-within>a {
  color: var(--primary);
}

.nav>ul>li>a:hover::after,
.nav>ul>li:focus-within>a::after {
  width: 100%;
}

/* --- Dropdown (Level 2) --- */
.nav ul ul {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--panel);
  min-width: 220px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
  border: 1px solid var(--border);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.25s ease;
}

/* Anzeigen bei Hover / Focus */
.nav li:hover>ul,
.nav li:focus-within>ul,
.nav li.is-open>ul {
  opacity: 1;
  max-height: 70vh;
  pointer-events: auto;
  transform: translateY(0);
}

/* Dropdown Links */
.nav ul ul a {
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.95rem;
}

.nav ul ul a:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--primary);
}

.nav ul ul a::after {
  display: none;
  /* Keine Linie im Dropdown */
}

.nav a.subnav-toggle {
  padding-right: 18px;
}

.nav a.subnav-toggle::before {
  display: none;
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  transition: transform 0.2s ease;
}

.nav li.is-open > a.subnav-toggle::before {
  transform: translateY(-35%) rotate(225deg);
}

.nav ul.nav-generated-subpages {
  display: none;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer
}

.hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  background: #1f2937;
  border-radius: 2px
}

/* Hero */
.hero {
  color: #fff;
  background: linear-gradient(120deg, #0b5ed7 0%, #2563eb 55%, #a21caf 110%);
  padding: 72px 0;
  box-shadow: inset 0 -2px 0 var(--primary);
}

.hero .container {
  text-align: center
}

.hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  margin: 0 0 6px
}

.hero p {
  opacity: .95;
  margin: 0
}

/* Hauptinhalt */
#main-content {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
  margin-top: -34px;
  /* überlappt hero leicht */
  line-height: 1.65;
  min-height: 260px;
  position: relative;
}

#main-content[contenteditable="true"] {
  outline: 2px dashed var(--primary);
  background: linear-gradient(180deg, #eef5ff, #ffffff);
}

#main-content:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

/* Toolbar + FAB */
.toolbar {
  display: none;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0
}

.toolbar button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 700;
  cursor: pointer
}

.toolbar .secondary {
  background: #c9d2e8;
  color: #102040
}

.draft-indicator {
  margin-left: 8px;
  color: var(--muted);
  font-size: .9rem
}

.fab {
  position: sticky;
  top: 20px;
  left: calc(100% - 68px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(13, 94, 215, .35);
  display: none;
  font-size: 20px;
  align-items: center;
  justify-content: center;
}

.fab:hover {
  background: var(--primary-2)
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 28px 0 6px
}

.cards--home {
  grid-template-columns: repeat(2, minmax(280px, 420px));
  justify-content: center;
}

.card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px
}

.card h3 {
  color: var(--primary);
  margin: 0 0 10px
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  align-items: center;
  justify-content: center;
  z-index: 60
}

.modal-content {
  width: 320px;
  background: var(--panel);
  padding: 26px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  text-align: center
}

.modal-content input {
  width: 100%;
  padding: 10px;
  border: 1px solid #d0d6e4;
  border-radius: 10px;
  margin: 8px 0
}

.modal-content button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  margin-top: 8px;
  cursor: pointer
}

.modal-content .secondary {
  background: #e5e7eb;
  color: #111827
}

#login-error {
  color: var(--accent);
  margin-top: 8px
}

/* Footer */
footer {
  margin-top: 36px;
  background: var(--panel);
  border-top: 2px solid var(--primary)
}

.foot {
  text-align: center;
  padding: 20px 0;
  color: #4b5563
}

footer a {
  color: var(--primary);
  text-decoration: none
}

footer a:hover {
  text-decoration: underline
}

.small {
  font-size: .86rem;
  color: #6b7280;
  margin-top: 6px
}

/* Social Media Icons in Footer */
.footer-social {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.footer-social a {
  display: inline-block;
  width: 28px;
  height: 28px;
}

.footer-social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(0) brightness(0.8);
  transition: filter .2s;
}

.footer-social a:hover img {
  filter: grayscale(0) brightness(1);
}

/* Sponsor‑Button in Navigation */
.nav .sponsor-btn {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  margin-left: 6px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
}

.nav .sponsor-btn:hover {
  background: var(--primary-2);
  color: #fff;
}

.nav .sponsor-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.35);
  transform: skewX(-20deg);
  animation: sponsor-shimmer 3s infinite;
}

@keyframes sponsor-shimmer {
  from {
    left: -100%;
  }

  to {
    left: 100%;
  }
}

/* --- Responsive --- */
@media (max-width: 980px) {
  .cards {
    grid-template-columns: repeat(2, 1fr)
  }

  .cards--home {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .nav ul.nav-generated-subpages {
    display: flex;
  }

  .nav a.subnav-toggle::before {
    display: block;
  }

  .nav {
    position: fixed;
    inset: 60px 0 auto 0;
    background: var(--panel);
    box-shadow: 0 12px 20px rgba(2, 12, 46, .12);
    padding: 14px 20px;
    display: none;
    max-height: 80vh;
    overflow-y: auto;
  }

  .nav>ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  /* Mobile Dropdowns: Statisch & Eingerückt */
  .nav ul ul {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: 16px;
    border-left: 2px solid var(--border);
    background: transparent;
    margin: 4px 0 8px;
    min-width: auto;
    opacity: 0;
    max-height: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }

  .nav li:focus-within>ul,
  .nav li:hover>ul {
    opacity: 0;
    max-height: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }

  .nav li.is-open>ul {
    opacity: 1;
    max-height: 70vh;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav a {
    padding: 10px 4px;
    display: block;
  }

  .hamburger {
    display: flex
  }

  .cards {
    grid-template-columns: 1fr
  }

  .cards--home {
    grid-template-columns: minmax(260px, 520px);
    justify-content: center;
  }

  .fab {
    left: auto;
    right: 14px
  }

  #main-content {
    padding: 22px
  }
}

/* ===== Override Dark Mode Styles for Admin Panels ===== */
/* Viele Admin-Seiten nutzen lokale Styles mit statischen Farben oder @media dark. Um den Dark‑Mode
   unseres Themes konsistent zu halten, überschreiben wir die wichtigsten Komponenten hier. */
body.dark .panel {
  background: var(--panel);
  border-color: var(--border);
}

body.dark .btn {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--border);
}

body.dark .btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

body.dark .btn.danger {
  background: #40282a;
  color: #fff;
  border-color: #6b2a32;
}

body.dark .list-item:hover,
body.dark .item:hover {
  background: #293240;
}

body.dark .list-item.active,
body.dark .item.active {
  background: #323b4a;
}

/* ===== Cookie Banner (Fußball-Style) ===== */
.cookie-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  width: calc(100% - 40px);
  max-width: 560px;
  background: var(--panel);
  border: 2px solid var(--primary);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  text-align: center;
}

.cookie-banner p {
  margin: 0;
}

.cookie-banner a {
  color: var(--primary);
  text-decoration: underline;
}

.cookie-banner button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 600;
  cursor: pointer;
}

.cookie-banner button:hover {
  background: var(--primary-2);
}

body.dark .cookie-banner {
  background: var(--panel);
  border-color: var(--primary);
}

.nav.open {
  display: flex
}


/* ====== Bildbearbeitung mit Overlay ====== */
#main-content img.selected-img {
  outline: 3px solid #0b5ed7;
  box-shadow: 0 0 10px rgba(11, 94, 215, 0.4);
  cursor: move;
}

#img-panel {
  display: none;
  gap: 6px;
  background: white;
  border: 2px solid #0b5ed7;
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  align-items: center;
  z-index: 9999;
}

#img-panel button {
  border: none;
  background: #0b5ed7;
  color: white;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  width: 28px;
  height: 28px;
}

#img-panel input {
  width: 50px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 3px;
}


/* Container: Positionierung erlaubt Drag im Rahmen */
#main-content {
  position: relative;
  /* wichtig für Begrenzung */
  overflow: hidden;
  /* verhindert, dass Bilder herausragen */
}


/* ====== Modernes Bild-Toolbar-Design ====== */
#main-content img.selected-img {
  outline: 3px solid #0b5ed7;
  box-shadow: 0 0 10px rgba(11, 94, 215, 0.3);
  cursor: move;
}

#img-toolbar {
  display: none;
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(11, 94, 215, 0.2);
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  padding: 6px 10px;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn .15s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#img-toolbar .toolbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

#img-toolbar button {
  border: none;
  background: #0b5ed7;
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  font-size: 16px;
  transition: 0.2s;
}

#img-toolbar button:hover {
  background: #0847a3;
}

#img-toolbar .size-control {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f2f6ff;
  border-radius: 8px;
  padding: 3px 8px;
}

#img-toolbar input {
  width: 50px;
  text-align: center;
  border: 1px solid #cdd7ee;
  border-radius: 6px;
  padding: 3px;
  font-weight: 600;
  color: #0b5ed7;
  background: #fff;
}


/* ===== Textfluss-Buttons ===== */
#img-toolbar .flow-control {
  display: flex;
  gap: 4px;
  background: #f2f6ff;
  border-radius: 8px;
  padding: 3px 6px;
}

#img-toolbar .flow-control button {
  border: none;
  background: #e8edfd;
  color: #0b5ed7;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  font-size: 15px;
  transition: 0.2s;
}

#img-toolbar .flow-control button:hover {
  background: #c8d6ff;
}


/* === Dark Mode Styling === */
:root {
  --bg: #f5f6fa;
  --panel: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
}

body {
  background: var(--bg);
  color: var(--ink);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Dark Mode */
body.dark {
  --bg: #0f172a;
  --panel: #1e293b;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --border: #334155;
  /* NEU */
}

body.dark header,
body.dark footer {
  background: var(--panel);
  border-color: #334155;
}

body.dark .card {
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

body.dark .hero {
  background: linear-gradient(135deg, #1e3a8a, #0ea5e9);
}

/* Toggle Button */
.theme-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 8px;
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.theme-btn:hover {
  transform: rotate(18deg) scale(1.15);
  background: rgba(0, 0, 0, 0.05);
}

body.dark .theme-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}


/* --- Footer Layout --- */
footer {
  background: var(--panel);
  padding: 22px 0 18px;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  transition: background 0.3s ease;
}

.footer-top {
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.footer-top a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-top a:hover {
  color: #2563eb;
}

/* --- Untere Reihe: Admin + Theme Toggle --- */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.footer-admin {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-admin:hover {
  color: #2563eb;
}

/* --- Dark-Mode-Button --- */
.theme-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.3s ease, color 0.3s ease;
}

.theme-btn:hover {
  transform: rotate(18deg) scale(1.15);
  color: #2563eb;
}

/* --- Dark Mode Farben --- */
body.dark footer {
  background: var(--panel);
  border-color: #334155;
}

body.dark .footer-top a:hover,
body.dark .footer-admin:hover {
  color: #38bdf8;
}


/* === NEWS PAGE === */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 25px;
  padding: 50px 0;
}

.news-card {
  background: var(--panel);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.news-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.news-content {
  padding: 18px 20px 25px;
}

.news-content h3 {
  margin-bottom: 10px;
  color: #0f172a;
  font-size: 1.2rem;
}

.news-content p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.news-readmore {
  margin-top: 10px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.news-readmore:hover {
  background: #1e40af;
}

/* --- Dark Mode Anpassung --- */
body.dark .news-card {
  background: #1e293b;
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.05);
}

body.dark .news-content h3 {
  color: #f1f5f9;
}

body.dark .news-content p {
  color: #94a3b8;
}



/* === ADMIN DASHBOARD === */
.admin-main {
  padding: 60px 0 80px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 25px;
}

.admin-card {
  background: var(--panel);
  border-radius: 14px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}

.admin-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.admin-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #2563eb;
}

.admin-card p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.admin-card button {
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}

.admin-card button:hover {
  background: #1d4ed8;
}

.admin-card.logout {
  background: #fef2f2;
  border: 1px solid #fee2e2;
}

.admin-card.logout h3 {
  color: #b91c1c;
}

.admin-card.logout button {
  background: #b91c1c;
}

.admin-card.logout button:hover {
  background: #7f1d1d;
}

/* Dark Mode Anpassung */
body.dark .admin-card {
  background: #1e293b;
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.05);
}

body.dark .admin-card h3 {
  color: #60a5fa;
}

body.dark .admin-card p {
  color: #94a3b8;
}

body.dark .admin-card.logout {
  background: #451717;
  border-color: #5e2a2a;
}

/* ===== ADMIN LOGIN STYLES ===== */
.admin-login-box {
  max-width: 380px;
  margin: 80px auto;
  padding: 2.5rem 2rem;
  background: var(--card-bg, #fff);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.admin-login-box h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary, #111);
}

.admin-login-box input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-login-box input:focus {
  border-color: #007bff;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.2);
}

.admin-login-box button {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #007bff, #0056d2);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s ease;
}

.admin-login-box button:hover {
  background: linear-gradient(135deg, #0056d2, #003c99);
}

.admin-login-box .error {
  color: #d9534f;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Dark mode Anpassung */
body.dark .admin-login-box {
  background: #1e1e1e;
  color: #ddd;
}

body.dark .admin-login-box input {
  background: #2a2a2a;
  border: 1px solid #555;
  color: #eee;
}

body.dark .admin-login-box button {
  background: linear-gradient(135deg, #289bff, #1a6ed2);
}


/* Edit-Mode Kontrast in Light & Dark */
#main-content[contenteditable="true"] {
  background: rgba(255, 255, 255, .06);
  outline: 2px dashed rgba(255, 255, 255, .25);
  outline-offset: 4px;
}

body.dark #main-content[contenteditable="true"] {
  color: #fff;
}

body:not(.dark) #main-content[contenteditable="true"] {
  background: rgba(0, 0, 0, .06);
  outline: 2px dashed rgba(0, 0, 0, .25);
  color: #111;
}


/* ---- Toolbar-Buttons: klare Farben je Theme ---- */

/* Light-Mode (Standard) */
.toolbar button {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid #d0d0d0;
}

.toolbar button:hover {
  background: #f4f4f4 !important;
}

.toolbar button:active {
  background: #eaeaea !important;
}

.toolbar button.secondary {
  opacity: .9;
}

/* Dark/Night-Mode (wenn deine Seite body.dark oder body.night setzt) */
body.dark .toolbar button,
body.night .toolbar button {
  background: #1f2630 !important;
  /* dunkles Grau/Blau */
  color: #fff !important;
  border: 1px solid #3a424f;
}

body.dark .toolbar button:hover,
body.night .toolbar button:hover {
  background: #293240 !important;
}

body.dark .toolbar button:active,
body.night .toolbar button:active {
  background: #323b4a !important;
}

/* Falls du KEINE Klassen setzt, fallback auf System-Darkmode: */
@media (prefers-color-scheme: dark) {
  body:not(.dark):not(.night) .toolbar button {
    background: #1f2630 !important;
    color: #fff !important;
    border-color: #3a424f;
  }

  body:not(.dark):not(.night) .toolbar button:hover {
    background: #293240 !important;
  }
}

/* --- Startseiten-News (Mini-Liste) --- */
.news-mini {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.news-mini-item {
  display: block;
}

.news-mini .mini-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
}

.news-mini .mini-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 54px;
}

.news-mini .mini-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.news-mini .mini-title {
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-mini .mini-date {
  font-size: .9rem;
  opacity: .75;
}


@media (prefers-color-scheme: dark) {
  .news-mini .mini-link {
    background: #1f2630;
    border-color: #3a424f;
    color: #fff;
  }
}

/* ===============================
   NEWS – Accordion (news.html)
   =============================== */
.news-list {
  display: grid;
  gap: 14px;
}

.news-item {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}

.news-title {
  font-weight: 700;
  color: var(--ink);
}

.news-meta {
  font-size: .9rem;
  color: var(--muted);
}

.news-teaser {
  font-size: .95rem;
  color: var(--muted);
  margin-top: 4px;
}

.news-item .chev {
  color: var(--muted);
  transition: transform .15s ease;
}

.news-item.open .chev {
  transform: rotate(90deg);
}

.news-body {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px dashed var(--border);
  animation: slide .15s ease;
  color: var(--ink);
}

.news-item.open .news-body {
  display: block;
}

.news-cover {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
  margin: 10px 0;
}

.news-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ===============================
   TERMINE – Accordion (events.html)
   =============================== */
.events {
  display: grid;
  gap: 12px;
}

.ev {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ev-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}

.ev-title {
  font-weight: 700;
  color: var(--ink);
}

.ev-meta {
  font-size: .9rem;
  color: var(--muted);
}

.ev .chev {
  color: var(--muted);
  transition: transform .15s ease;
}

.ev.open .chev {
  transform: rotate(90deg);
}

.ev-b {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px dashed var(--border);
  color: var(--ink);
}

.ev.open .ev-b {
  display: block;
}

/* ===============================
   Startseite – Mini-Listen Finetuning
   =============================== */
.card a {
  color: var(--primary);
}

.card a:hover {
  color: var(--primary-2);
}

.news-mini .mini-link {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body.dark .news-mini .mini-link {
  background: var(--panel);
  border-color: var(--border);
  color: var(--ink);
}

.news-mini .mini-title {
  color: var(--ink);
}

.news-mini .mini-date {
  color: var(--muted);
}

/* kleine Slide-Animation für Bodies */
@keyframes slide {
  from {
    opacity: .4;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== Öffentliche Inhalte: Bild-Umfluss ===== */
#main-content .ed-imgwrap,
.general-content .ed-imgwrap,
.news-body .ed-imgwrap,
.ev-b .ed-imgwrap {
  display: inline-block;
  max-width: 100%;
}

#main-content .ed-imgwrap img,
.general-content .ed-imgwrap img,
.news-body .ed-imgwrap img,
.ev-b .ed-imgwrap img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Textumfluss */
#main-content .ed-align-left,
.general-content .ed-align-left,
.news-body .ed-align-left,
.ev-b .ed-align-left {
  float: left;
  margin: 0 14px 10px 0;
}

#main-content .ed-align-right,
.general-content .ed-align-right,
.news-body .ed-align-right,
.ev-b .ed-align-right {
  float: right;
  margin: 0 0 10px 14px;
}

#main-content .ed-align-center,
.general-content .ed-align-center,
.news-body .ed-align-center,
.ev-b .ed-align-center {
  float: none;
  display: block;
  margin: 10px auto;
  text-align: center;
}

/* Container räumen, damit Floats den Abschnitt nicht „aufreißen“ */
#main-content::after,
.general-content::after,
.news-body::after,
.ev-b::after {
  content: "";
  display: block;
  clear: both;
}

/* Mobile: Floats deaktivieren, Bilder vollbreit */
@media (max-width: 720px) {

  #main-content .ed-align-left,
  #main-content .ed-align-right,
  .general-content .ed-align-left,
  .general-content .ed-align-right,
  .news-body .ed-align-left,
  .news-body .ed-align-right,
  .ev-b .ed-align-left,
  .ev-b .ed-align-right {
    float: none;
    display: block;
    margin: 10px auto;
  }
}

/* Allgemein/Startseite: Bilder & Tabellen responsiv */
#main-content img,
.general-content img {
  max-width: 100%;
  height: auto;
}

.general-layout > * {
  min-width: 0;
}

#main-content,
.general-content {
  overflow-wrap: break-word;
  word-break: break-word;
}

#main-content,
.general-content,
.news-body,
.ev-b {
  min-width: 0;
}

#main-content > *,
.general-content > *,
.news-body > *,
.ev-b > * {
  max-width: 100%;
}

#main-content p,
#main-content li,
#main-content blockquote,
#main-content div,
#main-content span,
#main-content a,
.general-content p,
.general-content li,
.general-content blockquote,
.general-content div,
.general-content span,
.general-content a,
.news-body p,
.news-body li,
.news-body blockquote,
.news-body div,
.news-body span,
.news-body a,
.ev-b p,
.ev-b li,
.ev-b blockquote,
.ev-b div,
.ev-b span,
.ev-b a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#main-content pre,
#main-content code,
.general-content pre,
.general-content code,
.news-body pre,
.news-body code,
.ev-b pre,
.ev-b code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#main-content table,
.general-content table,
.news-body table,
.ev-b table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#main-content th,
#main-content td,
.general-content th,
.general-content td,
.news-body th,
.news-body td,
.ev-b th,
.ev-b td {
  word-break: break-word;
}

/* Allgemein-Seiten: Mobile Layout */
@media (max-width: 900px) {
  .general-layout {
    flex-direction: column;
  }

  .general-sidebar {
    width: 100%;
  }

  .general-content {
    width: 100%;
  }
}

/* Allgemein-Seiten: mobiles Menü + Iframe-Fix */
.general-sidebar-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-align: center;
}

.general-sidebar-backdrop {
  display: none;
}

.nav ul.mod-mobile-subpages {
  display: none !important;
}

@media (max-width: 900px) {
  .general-sidebar {
    display: block;
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    top: auto;
    max-height: none;
    overflow-y: visible;
    z-index: auto;
  }

  .general-sidebar.is-open {
    display: block;
  }

  .general-sidebar-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 50;
  }

  .general-sidebar-toggle {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .general-sidebar {
    display: none;
  }

  .nav ul.mod-mobile-subpages {
    position: static;
    display: flex !important;
    box-shadow: none;
    border: none;
    padding-left: 16px;
    border-left: 2px solid var(--border);
    opacity: 1;
    transform: none;
    background: transparent;
    margin: 4px 0 8px;
    min-width: auto;
    flex-direction: column;
    gap: 2px;
  }

  .nav ul.mod-mobile-subpages a {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 4px 8px 10px;
  }

  .nav ul.mod-mobile-subpages a.active {
    color: var(--primary);
  }
}

#main-content iframe,
.general-content iframe,
.news-body iframe,
.ev-b iframe {
  max-width: 100%;
  width: 100% !important;
  display: block;
  border: 0;
}


/* ===== Editor: Bild-Umfluss mit shape-outside ===== */
.ed-editor .ed-imgwrap {
  display: inline-block;
  max-width: 100%;
}

.ed-editor .ed-imgwrap img {
  display: block;
  height: auto;
}

/* Ausrichtung (Float) wie gehabt */
.ed-editor .ed-align-left {
  float: left;
  margin: 0 14px 10px 0;
}

.ed-editor .ed-align-right {
  float: right;
  margin: 0 0 10px 14px;
}

.ed-editor .ed-align-center {
  float: none;
  display: block;
  margin: 10px auto;
  text-align: center;
}

/* Enger Umfluss: Rund / Abgerundet */
.ed-editor .ed-shape-circle {
  /* Radius via --shape-r (30–60%), Default 50% */
  --shape-r: 50%;
  shape-outside: circle(var(--shape-r) at 50% 50%);
  shape-margin: 12px;
}

.ed-editor .ed-shape-rounded {
  /* Abgerundetes Rechteck */
  --shape-r: 18%;
  shape-outside: inset(0 round var(--shape-r));
  shape-margin: 12px;
}

/* Floats räumen */
.ed-editor::after {
  content: "";
  display: block;
  clear: both;
}

/* Toolbar-Kleinkram */
.ed-imgbar {
  user-select: none;
}

.ed-imgbar * {
  user-select: none;
}

.ed-label {
  font-size: .9rem;
  opacity: .8;
  margin-right: 6px;
}

.ed-group {
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
  margin: 0 8px;
}

.ed-small {
  font-size: .9rem;
  opacity: .9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ed-shape-range {
  vertical-align: middle;
  width: 120px;
}

/* Mobil: Floats & Shapes abschalten → Bild vollbreit */
@media (max-width: 720px) {

  .ed-editor .ed-align-left,
  .ed-editor .ed-align-right {
    float: none;
    display: block;
    margin: 10px auto;
  }

  .ed-editor .ed-imgwrap {
    shape-outside: none;
  }

  .ed-editor .ed-imgwrap img {
    width: 100% !important;
  }
}


/* ===== Öffentliche Inhalte: shape-outside für Umfluss ===== */
#main-content .ed-imgwrap,
.news-body .ed-imgwrap,
.ev-b .ed-imgwrap {
  display: inline-block;
  max-width: 100%;
}

#main-content .ed-imgwrap img,
.news-body .ed-imgwrap img,
.ev-b .ed-imgwrap img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Float-Ausrichtung */
#main-content .ed-align-left,
.news-body .ed-align-left,
.ev-b .ed-align-left {
  float: left;
  margin: 0 14px 10px 0;
}

#main-content .ed-align-right,
.news-body .ed-align-right,
.ev-b .ed-align-right {
  float: right;
  margin: 0 0 10px 14px;
}

#main-content .ed-align-center,
.news-body .ed-align-center,
.ev-b .ed-align-center {
  float: none;
  display: block;
  margin: 10px auto;
  text-align: center;
}

/* Enger Umfluss */
#main-content .ed-shape-circle,
.news-body .ed-shape-circle,
.ev-b .ed-shape-circle {
  --shape-r: 50%;
  shape-outside: circle(var(--shape-r) at 50% 50%);
  shape-margin: 12px;
}

#main-content .ed-shape-rounded,
.news-body .ed-shape-rounded,
.ev-b .ed-shape-rounded {
  --shape-r: 18%;
  shape-outside: inset(0 round var(--shape-r));
  shape-margin: 12px;
}

/* Container räumen */
#main-content::after,
.news-body::after,
.ev-b::after {
  content: "";
  display: block;
  clear: both;
}

/* Mobil: Shapes aus */
@media (max-width: 720px) {

  #main-content .ed-align-left,
  #main-content .ed-align-right,
  .news-body .ed-align-left,
  .news-body .ed-align-right,
  .ev-b .ed-align-left,
  .ev-b .ed-align-right {
    float: none;
    display: block;
    margin: 10px auto;
  }

  #main-content .ed-imgwrap,
  .news-body .ed-imgwrap,
  .ev-b .ed-imgwrap {
    shape-outside: none;
  }
}

/* Widget Container - Frontend */
.ed-widget {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 15px 0;
}

.ed-widget iframe,
.ed-widget img {
  max-width: 100%;
}

/* Editor Hilfselemente im Frontend verstecken */
/* Editor Hilfselemente im Frontend verstecken */
.ed-widget-remove {
  display: none !important;
}

/* FuPa Widget: Doppelte Anzeige verhindern (bei Re-Hydration) */
div[id^="fp-widget_root-"]>article:not(:last-of-type) {
  display: none !important;
}

/* Easter Egg: SVN Champions (Konfetti) */
.svn-easter-active main,
.svn-easter-active footer,
.svn-easter-active .hero,
.svn-easter-active .site-header {
  filter: blur(2px) brightness(0.78);
  transition: filter 0.35s ease;
}

body.svn-victory-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at 20% 10%, rgba(115, 189, 255, 0.18), transparent 48%),
              radial-gradient(circle at 78% 85%, rgba(255, 255, 255, 0.12), transparent 42%);
}

.svn-victory-marker {
  position: fixed;
  right: 12px;
  top: 78px;
  z-index: 9996;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fcff, #dceeff);
  color: #09305b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  border: 1px solid rgba(99, 169, 255, 0.45);
  box-shadow: 0 8px 22px rgba(8, 46, 87, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.svn-victory-marker span {
  text-transform: uppercase;
}

.svn-victory-open {
  border: 1px solid rgba(11, 45, 87, 0.22);
  background: #ffffff;
  color: #09305b;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.svn-victory-open:hover {
  background: #eef6ff;
}

.svn-easter-prep {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(circle at center, rgba(186, 221, 255, 0.2), rgba(5, 20, 44, 0.8));
  color: #ecf6ff;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  pointer-events: none;
}

.svn-easter-prep p {
  margin: 0;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 600;
  opacity: 0.92;
}

.svn-easter-prep strong {
  margin-top: 10px;
  font-size: clamp(56px, 12vw, 120px);
  line-height: 1;
  text-shadow: 0 10px 35px rgba(130, 200, 255, 0.65);
}

.svn-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
}

.svn-champions-badge {
  position: fixed;
  left: 50%;
  top: 14%;
  transform: translateX(-50%) scale(0.86);
  padding: 18px 34px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(214, 236, 255, 0.97));
  color: #0b2d57;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  box-shadow: 0 20px 54px rgba(4, 33, 74, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  min-width: min(88vw, 520px);
  text-align: center;
  border: 1px solid rgba(96, 170, 255, 0.35);
}

.svn-champions-badge strong {
  display: block;
  font-size: clamp(22px, 4vw, 44px);
  line-height: 1.05;
}

.svn-champions-badge span {
  display: block;
  margin-top: 6px;
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: 1.8px;
  opacity: 0.82;
}

.svn-champions-badge.is-visible {
  animation: champions-pop 4.2s ease forwards;
}

@keyframes champions-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.86); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  72% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.96); }
}