/* main.css – Basismodul Stylesheet
   Farben: dezentes Grau-Schema mit ruhigem Blau-Akzent
   Responsive: > 1272px landscape (sidebar), darunter portrait (header)
   ================================================================ */

/* ── Variablen ─────────────────────────────────────────────── */
:root {
  --sidebar-w:   230px;
  --topbar-h:     48px;
  --mob-header-h: 48px;
  --break:       1272px;

  /* Grautöne */
  --c-white:   #ffffff;
  --c-gray-50: #f7f7f5;
  --c-gray-100:#efefed;
  --c-gray-200:#e0dfdc;
  --c-gray-300:#c8c7c3;
  --c-gray-400:#a5a49f;
  --c-gray-500:#7e7d78;
  --c-gray-600:#5c5b57;
  --c-gray-700:#3e3e3b;
  --c-gray-800:#272725;

  /* Akzent (ruhiges Stahlblau) */
  --c-accent:       #4a7fa5;
  --c-accent-light: #e6f1fb;
  --c-accent-dark:  #2e5f80;

  /* Typografie */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-size-base: 14px;
  --line-height:    1.65;

  /* Layout */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 12px;

  /* Abstände */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--font-size-base); scroll-behavior: smooth; }

body {
  font-family:  var(--font-sans);
  font-size:    var(--font-size-base);
  line-height:  var(--line-height);
  color:        var(--c-gray-700);
  background:   var(--c-gray-50);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--c-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img {
  max-width: 100%;
  height: auto;
  /* Bilderrechte: Auswahl unterbinden */
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* verhindert Drag */
}

/* Bilder in content-Bereichen: Rechtsklick-Overlay */
.protected-img {
  position: relative;
  display: inline-block;
}
.protected-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Layout-Grundstruktur ──────────────────────────────────── */
.layout {
  display: flex;
  min-height: 100vh;
}

.layout__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--sidebar-w); /* Platz für fixed Sidebar */
}

.layout__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);   /* rundum gleich breiter Rand */
}

/* ── Sidebar (landscape) ───────────────────────────────────── */
.sidebar {
  width:    var(--sidebar-w);
  position: fixed;
  top:    0;
  left:   0;
  bottom: 0;
  display:        flex;
  flex-direction: column;
  background: var(--c-white);
  border-right: 1px solid var(--c-gray-200);
  z-index: 100;
  overflow-y: auto;
}

.sidebar__logo {
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--c-gray-200);
  flex-shrink: 0;
}
.sidebar__logo-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
}
.sidebar__logo-icon {
  width:  34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--c-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}
.sidebar__logo-icon--sm {
  width: 26px; height: 26px; font-size: 12px;
}
.sidebar__logo-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-gray-800);
}

.sidebar__nav {
  flex: 1;
  padding: var(--sp-3) 0;
  overflow-y: auto;
}

/* Navigation */
.nav-group { margin-bottom: var(--sp-1); }

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-2) var(--sp-4);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-gray-700);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  transition: background .12s, color .12s;
}
.nav-item:hover {
  background: var(--c-gray-50);
  color: var(--c-gray-800);
}
.nav-item.is-active { color: var(--c-accent); }

.nav-item__arrow {
  flex-shrink: 0;
  transition: transform .2s;
  color: var(--c-gray-400);
}
.nav-item[aria-expanded="true"] .nav-item__arrow {
  transform: rotate(180deg);
}

.nav-sub {
  list-style: none;
  margin: 0 0 var(--sp-2) calc(var(--sp-4) + 10px);
  padding-left: var(--sp-3);
  border-left: 1.5px solid var(--c-gray-200);
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.nav-sub.is-open { max-height: 300px; }

.nav-sub__item {
  display: block;
  padding: 5px var(--sp-2);
  font-size: 13px;
  color: var(--c-gray-500);
  transition: color .12s;
}
.nav-sub__item:hover { color: var(--c-gray-800); text-decoration: none; }
.nav-sub__item.is-active { color: var(--c-accent); font-weight: 500; }

.sidebar__footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-gray-200);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.sidebar__footer-link {
  font-size: 12px;
  color: var(--c-gray-400);
  padding: var(--sp-1) 0;
}
.sidebar__footer-link:hover { color: var(--c-gray-600); text-decoration: none; }
.sidebar__footer-copy {
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-gray-100);
  font-size: 11px;
  color: var(--c-gray-400);
}

/* ── Topbar (desktop, landscape) ──────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-200);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--sp-5);
  gap: var(--sp-3);
  flex-shrink: 0;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px var(--sp-3);
  font-size: 13px;
  color: var(--c-gray-600);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  text-decoration: none;
}
.topbar__btn:hover {
  background: var(--c-gray-50);
  color: var(--c-gray-800);
  text-decoration: none;
}
.topbar__btn--primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.topbar__btn--primary:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: #fff;
}

/* Sprache */
.lang-switch {
  display: flex;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lang-switch__opt {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--c-gray-500);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.lang-switch__opt:hover { background: var(--c-gray-50); color: var(--c-gray-800); text-decoration: none; }
.lang-switch__opt.is-active {
  background: var(--c-gray-100);
  color: var(--c-gray-800);
  font-weight: 500;
}
.lang-switch--sm .lang-switch__opt { padding: 3px 8px; font-size: 11.5px; }

/* ── Mobile Header ────────────────────────────────────────── */
.mob-header {
  display: none; /* nur < 1272px sichtbar */
  height: var(--mob-header-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-200);
  padding: 0 var(--sp-4);
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 200;
}
.mob-header__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
}
.mob-header__menu-btn {
  margin-left: auto;
  width:  34px;
  height: 34px;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray-600);
  transition: background .12s;
}
.mob-header__menu-btn:hover { background: var(--c-gray-50); }

/* Mobile Nav Dropdown – nur unterhalb des Breakpoints und nur geöffnet sichtbar.
   Standardmäßig ausgeblendet, damit ein offenes Menü beim Vergrößern des
   Fensters (Desktop) nicht über dem Content stehen bleibt. */
.mob-nav {
  display: none;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-200);
  padding: var(--sp-3) var(--sp-4);
}
.mob-nav__group { margin-bottom: var(--sp-3); }
.mob-nav__parent {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gray-400);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--sp-1);
}
.mob-nav__item {
  display: block;
  padding: 6px var(--sp-2);
  font-size: 13.5px;
  color: var(--c-gray-600);
  border-radius: var(--radius-md);
}
.mob-nav__item:hover { background: var(--c-gray-50); color: var(--c-gray-800); text-decoration: none; }

.mob-nav__actions {
  display: flex;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-gray-200);
  margin-bottom: var(--sp-3);
}
.mob-nav__action-btn {
  flex: 1;
  padding: 11px var(--sp-3);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-md);
  color: var(--c-gray-700);
  background: var(--c-gray-50);
  text-decoration: none;
}
.mob-nav__action-btn:hover { background: var(--c-gray-100); color: var(--c-gray-800); }
.mob-nav__action-btn--primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.mob-nav__action-btn--primary:hover { background: var(--c-accent-dark); color: #fff; }

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  /* Desktop: ausgeblendet – Copyright + Impressum/Datenschutz stehen im
     Sidebar-Fuß. Unter dem Breakpoint (Sidebar verborgen) wieder eingeblendet. */
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-gray-200);
  background: var(--c-white);
  font-size: 12px;
  color: var(--c-gray-400);
  flex-shrink: 0;
}
.footer__links {
  display: flex;
  gap: var(--sp-4);
}
.footer__links a { color: var(--c-gray-400); font-size: 12px; }
.footer__links a:hover { color: var(--c-gray-600); text-decoration: none; }

/* ── Cookie-Bar ────────────────────────────────────────────── */
.cookie-bar {
  position: fixed;
  bottom: var(--sp-4);
  left: calc(var(--sidebar-w) + var(--sp-5));
  right: var(--sp-5);
  background: var(--c-white);
  color: var(--c-gray-700);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(39, 39, 37, .15);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  z-index: 999;
  font-size: 13px;
}
.cookie-bar__text { flex: 1; }
.cookie-bar__link { color: var(--c-accent); text-decoration: underline; }
.cookie-bar__btn {
  padding: 8px 20px;
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.cookie-bar__btn:hover { background: var(--c-accent-dark); }

/* Solange die Bar sichtbar ist, unten Platz reservieren, damit der Footer
   (Legal Notice / Privacy) nicht verdeckt wird. */
body.cookie-visible .layout__main { padding-bottom: 84px; }

/* ── Content-Bereich ───────────────────────────────────────── */
.content-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

/* Karte füllt die gesamte Inhaltsfläche (gleich breiter Rand rundum) */
.content-card--fill {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.content-card--fill .placeholder-block { flex: 1; }

/* Textseiten innerhalb einer Inhaltskarte (Impressum, Datenschutz, Konto …) */
.content-card h1 { font-size: 20px; color: var(--c-gray-800); margin-bottom: var(--sp-4); }
.content-card h2 { font-size: 16px; color: var(--c-gray-700); margin: var(--sp-5) 0 6px; }
.content-card p  { margin-bottom: var(--sp-3); }
.content-card p:last-child { margin-bottom: 0; }

/* Rechtsseiten (Impressum/Terms/Datenschutz/Urheberrecht) */
.legal-imprint-head { color: var(--c-gray-600); margin-bottom: var(--sp-4); }
.legal-text ul {
  list-style: disc;
  padding-left: 1.4em;          /* globaler Reset entfernt das Standard-Padding */
  margin: 0 0 var(--sp-3);
}
.legal-text ul ul { margin: 0; }
.legal-text li { margin-bottom: 1px; line-height: 1.2; }
.legal-text a { color: var(--c-accent); }
/* kleiner Zusatz-Link neben einer Überschrift (z. B. Cookies · Detailbeschreibung) */
.legal-h2-aside { font-size: 13px; font-weight: 400; color: var(--c-gray-500); }
.legal-h2-aside a { color: var(--c-accent); }

/* Schlüssel/Wert-Liste (z. B. Konto-Übersicht) */
.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-5);
  font-size: 14px;
  margin: var(--sp-4) 0;
}
.detail-list dt { color: var(--c-gray-500); }
.detail-list dd { color: var(--c-gray-800); }

.placeholder-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  text-align: center;
  gap: var(--sp-3);
}
.placeholder-block img {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius-md);
}
.placeholder-block figcaption {
  font-size: 13px;
  color: var(--c-gray-400);
  font-style: italic;
}

/* Wartungs-Meldung (im Content, bei aktivem Wartungsmodus) */
.maintenance-notice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6);
  gap: var(--sp-2);
}
.maintenance-notice h1 { font-size: 22px; color: var(--c-gray-800); margin: 0; }
.maintenance-notice p  { color: var(--c-gray-500); margin: 0; max-width: 32rem; }

/* ── Formulare ─────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-4); }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gray-700);
  margin-bottom: var(--sp-1);
}
.form-input {
  width: 100%;
  padding: 8px var(--sp-3);
  font-size: 14px;
  color: var(--c-gray-800);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-md);
  background: var(--c-white);
  transition: border-color .12s, box-shadow .12s;
  outline: none;
}
.form-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(74, 127, 165, .15);
}
.form-error {
  font-size: 12px;
  color: #c0392b;
  margin-top: var(--sp-1);
}
.form-success {
  font-size: 13px;
  color: #27ae60;
  padding: var(--sp-3);
  background: #eafaf1;
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px var(--sp-5);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  text-decoration: none;
}
.btn--primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.btn--primary:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }
.btn--secondary {
  background: transparent;
  color: var(--c-gray-700);
  border-color: var(--c-gray-300);
}
.btn--secondary:hover { background: var(--c-gray-50); }
.btn--full { width: 100%; justify-content: center; }

/* ── Auth-Formularseiten (login / register / logout) ──────── */
.form-page { max-width: 460px; margin: var(--sp-6) auto; }
.form-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.form-card h1 {
  font-size: 20px;
  color: var(--c-gray-800);
  margin-bottom: var(--sp-5);
}

/* Labels & Eingabefelder innerhalb einer .form-group (ohne Extra-Klassen) */
.form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gray-700);
  margin-bottom: var(--sp-1);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px var(--sp-3);
  font-size: 14px;
  color: var(--c-gray-800);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-md);
  background: var(--c-white);
  transition: border-color .12s, box-shadow .12s;
  outline: none;
}
.form-group textarea { min-height: 90px; resize: vertical; font-family: var(--font-sans); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(74, 127, 165, .15);
}
.form-hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: 12px;
  color: var(--c-gray-400);
}
.form-group--checkbox .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--c-gray-600);
}
.form-group--checkbox input { margin-top: 3px; }

.form-actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-5);
}
.form-links {
  margin-top: var(--sp-4);
  font-size: 13px;
  color: var(--c-gray-500);
}
.form-links--small { font-size: 12px; }

/* Sektions-Kopf mit Titel links und Aktion (z. B. „Benutzer anlegen") rechts */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }

/* Untertitel innerhalb einer Admin-Sektion (z. B. Development → Debug-Modus) */
.admin-subhead {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gray-600);
  margin: var(--sp-2) 0 var(--sp-3);
}

/* Gesperrte (deaktivierte) Felder sichtbar ausgrauen */
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background: var(--c-gray-100);
  color: var(--c-gray-400);
  border-color: var(--c-gray-200);
  cursor: not-allowed;
}
.form-group--locked > label { color: var(--c-gray-400); }

/* Zweispaltiges Formular: Label (+ DB-Hinweis darunter) links, Eingabe rechts.
   Mobil (unter 600px) stapelt sich alles in DOM-Reihenfolge: Label, Hinweis, Feld. */
@media (min-width: 600px) {
  .form--two-col .form-group {
    display: grid;
    grid-template-columns: 12rem 1fr;
    align-items: start;
    column-gap: var(--sp-4);
    margin-bottom: var(--sp-3);
  }
  .form--two-col .form-group > label { grid-column: 1; margin-bottom: 0; padding-top: 7px; }
  .form--two-col .form-group > .form-hint { grid-column: 1; margin-top: 1px; }
  /* das Steuerelement (alles außer Label/Hinweis) in Spalte 2, oben/links */
  .form--two-col .form-group > :not(label):not(.form-hint) {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: start;
  }
}
/* Eingabefelder nicht über die ganze Spalte – Maxbreite nach Datentyp */
.form--two-col .form-group input[type="text"],
.form--two-col .form-group input[type="email"],
.form--two-col .form-group input[type="password"],
.form--two-col .form-group select { width: 100%; max-width: 24rem; }
.form--two-col .form-group input[type="number"] { width: 100%; max-width: 8rem; }
.form-divider { border: none; border-top: 1px solid var(--c-gray-200); margin: var(--sp-5) 0; }
.form-subtitle { font-size: 15px; color: var(--c-gray-800); margin-bottom: var(--sp-4); }

/* ── Meldungsboxen ─────────────────────────────────────────── */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: var(--sp-4);
  border: 1px solid transparent;
}
.alert--error   { background: #fdecea; color: #a83228; border-color: #f4c7c1; }
.alert--success { background: #eafaf1; color: #1e8449; border-color: #c3ebd4; }
.alert--info    { background: var(--c-accent-light); color: var(--c-accent-dark); border-color: #cfe3f3; }

/* ── Admin-Bereich ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.page-header h1 { font-size: 20px; color: var(--c-gray-800); }
.page-header__sub { font-size: 13px; color: var(--c-gray-400); }
.page-header__right { display: flex; align-items: center; gap: var(--sp-3); }

/* Admin-Sub-Navigation (Knopfleiste) */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.admin-nav__item {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-gray-600);
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.admin-nav__item:hover { background: var(--c-gray-50); color: var(--c-gray-800); text-decoration: none; }
.admin-nav__item.is-active {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
/* Zähler-Badge (z. B. offene Freigaben) */
.admin-nav__badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: #c0392b;
  border-radius: 999px;
}
.admin-nav__item.is-active .admin-nav__badge { background: #fff; color: var(--c-accent); }

.admin-section { margin-bottom: var(--sp-6); }
.admin-section > h2 {
  font-size: 15px;
  color: var(--c-gray-700);
  margin-bottom: var(--sp-3);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-gray-200);
  vertical-align: middle;
}
.data-table th {
  font-weight: 600;
  color: var(--c-gray-500);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.data-table tbody tr:hover { background: var(--c-gray-50); }
.data-table__empty { color: var(--c-gray-400); font-style: italic; padding: var(--sp-4) var(--sp-3); }
/* Sortierbarer Spaltenkopf: wie Header-Text, aber klickbar; Pfeil zeigt aktive Sortierung */
.data-table__sort { color: inherit; text-decoration: none; white-space: nowrap; }
.data-table__sort:hover { color: var(--c-accent); text-decoration: underline; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
  line-height: 1.5;
}
.badge--pending   { background: #fef3cd; color: #8a6d1a; }
.badge--active    { background: #eafaf1; color: #1e8449; }
.badge--suspended { background: #fdecea; color: #a83228; }
.badge--deleted   { background: var(--c-gray-100); color: var(--c-gray-500); }

.actions-inline { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.actions-inline form { display: inline; }

/* Kleine / farbige Button-Varianten (für Tabellen-Aktionen) */
.btn--sm { padding: 4px var(--sp-3); font-size: 12.5px; }
.btn--success { background: #1e8449; color: #fff; border-color: #1e8449; }
.btn--success:hover { background: #186a3a; border-color: #186a3a; }
.btn--danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn--danger:hover { background: #a13125; border-color: #a13125; }

.table-wrap { overflow-x: auto; }

/* Suchzeile + Paginierung */
.admin-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.admin-search input[type="text"] {
  flex: 1 1 220px;
  padding: 6px var(--sp-3);
  font-size: 14px;
  color: var(--c-gray-800);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-md);
  outline: none;
}
.admin-search input[type="text"]:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(74, 127, 165, .15);
}
.pager {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.pager__info { font-size: 13px; color: var(--c-gray-500); }

/* ── Responsive Breakpoint ─────────────────────────────────── */
@media (max-width: 1272px) {
  .sidebar       { display: none; }        /* Sidebar ausblenden */
  .topbar        { display: none; }        /* Desktop-Topbar ausblenden */
  .layout__main  { margin-left: 0; }
  .mob-header    { display: flex; }        /* Mobile Header einblenden */
  .mob-nav:not([hidden]) { display: block; } /* Menü nur hier zeigen, wenn geöffnet */
  .footer        { display: flex; }        /* Footer nur hier (Sidebar verborgen) */

  .layout__content { padding: var(--sp-4); }

  .cookie-bar {
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: var(--sp-4);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .cookie-bar__btn { align-self: flex-end; }
  body.cookie-visible .layout__main { padding-bottom: 168px; }
}

@media (max-width: 480px) {
  .layout__content { padding: var(--sp-3); }
  .footer { flex-direction: column; gap: var(--sp-2); text-align: center; }
}