/* ======================================================
   THEME VARIABLEN
   ====================================================== */
:root{
  --primary:#3a6ea5;
  --secondary:#004e98;
  --accent:#ff6b6b;

  --bg:#f0f2f5;
  --card:#ffffff;
  --card-soft:#f7f9fc;
  --text:#2b2f33;
  --muted:#5b6570;
  --border:#d9dfe6;

  --radius:12px;
  --shadow:0 6px 14px rgba(0,0,0,.08);

  /* Animation */
  --ease: cubic-bezier(.2,.8,.2,1);
  --fast: 120ms;
  --normal: 220ms;
}

body.dark{
  --bg:#0f141a;
  --card:#161e27;
  --card-soft:#1b2633;
  --text:#e6edf3;
  --muted:#9fb0c3;
  --border:#253544;
  --primary:#4b8bd6;
  --secondary:#2c6bb6;
  --accent:#ff7b7b;
  --shadow:0 6px 16px rgba(0,0,0,.55);
}

/* ======================================================
   GLOBAL
   ====================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ======================================================
   HAMBURGER + DRAWER
   ====================================================== */
.hamburger{
  position:fixed;
  top:14px;left:14px;
  z-index:1100;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast);
}
.hamburger:active{ transform:scale(.96) }
body.dark .hamburger,
body.dark .hamburger i{ color:#fff }

.drawer{
  position:fixed;
  top:0;left:0;
  height:100vh;
  width:320px;
  max-width:86vw;
  background:var(--card);
  border-right:1px solid var(--border);
  box-shadow:var(--shadow);
  transform:translateX(-100%);
  transition:transform var(--normal) var(--ease);
  z-index:1200;
}
.drawer.open{ transform:translateX(0) }

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--normal);
  z-index:1190;
}
.drawer-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.drawer-header,
.drawer-content{
  padding-left:22px;
  padding-right:18px;
}

.drawer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}

/* ======================================================
   HEADER
   ====================================================== */
.site-header{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  padding:18px 0;
  box-shadow:var(--shadow);
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px;
}

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

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  height:56px;
  background:#fff;
  padding:6px;
  border-radius:8px;
}

/* ======================================================
   SUCHE
   ====================================================== */
.search-bar{
  display:flex;
  gap:10px;
  margin:18px 0;
}
.search-bar input{
  flex:1;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
}
.search-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:12px 18px;
  cursor:pointer;
  transition:transform var(--fast), box-shadow var(--fast);
}
.search-btn:active{ transform:scale(.97) }

/* ======================================================
   FILTER + SORTIERUNG (CHIPS)
   ====================================================== */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

/* Dropdown */
.dropdown{ position:relative }
.dropdown-toggle{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 16px;
  cursor:pointer;
  transition:background var(--fast), transform var(--fast);
}
.dropdown-toggle:active{ transform:scale(.97) }
body.dark .dropdown-toggle{ color:#fff }

.dropdown-menu{
  position:absolute;
  top:48px;left:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:12px;
  min-width:260px;
  z-index:1300;

  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity var(--normal), transform var(--normal);
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Chips */
.dd-item,
.range-btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--card-soft);
  color:var(--text);
  border-radius:999px;
  padding:6px 14px;
  font-size:.85rem;
  cursor:pointer;
  margin:4px 4px 0 0;

  transition:
    background var(--fast),
    color var(--fast),
    transform var(--fast),
    box-shadow var(--fast);
}

/* Hover (nur Desktop sinnvoll) */
@media (hover:hover){
  .dd-item:hover,
  .range-btn:hover{
    background:var(--primary);
    color:#fff;
    transform:translateY(-1px);
  }
}

/* Active / Selected */
.dd-item:active,
.range-btn:active,
.dd-item.active,
.range-btn.active{
  background:var(--primary);
  color:#fff;
  box-shadow:0 0 0 2px rgba(58,110,165,.35);
  transform:scale(.96);
}

body.dark .dd-item,
body.dark .range-btn{
  background:#1a2430;
}

/* ======================================================
   JAHRESFILTER
   ====================================================== */
.year-range{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.year-range input{
  width:90px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:.85rem;
}

/* Anwenden = Primary Chip */
#applyYears{
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:8px 16px;
  font-weight:600;
  cursor:pointer;
  transition:transform var(--fast), background var(--fast);
}
#applyYears:active{ transform:scale(.96) }
#applyYears:hover{ background:var(--secondary) }

/* ======================================================
   OBJEKTE
   ====================================================== */
#objekte-container.list-view{display:block}
#objekte-container.grid-view{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:18px;
}

.objekt-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  margin:18px auto;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:transform var(--normal), box-shadow var(--normal);
}

/* leichte Lift-Animation (Desktop only) */
@media (hover:hover){
  .objekt-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.12);
  }
}

.objekt-card h2{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  margin:0 0 10px 0;
}

/* ======================================================
   PDF PREVIEW
   ====================================================== */
.pdf-preview{
  width:110px;
  text-align:center;
  cursor:pointer;
  transition:transform var(--fast);
}
@media (hover:hover){
  .pdf-preview:hover{ transform:scale(1.04) }
}

.pdf-thumbnail{
  width:110px;
  height:130px;
  border-radius:12px;
  background:var(--card-soft);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}

.pdf-title{
  font-size:.75rem;
  margin-top:6px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ======================================================
   PDF VIEWER (SANFTES AUFKLAPPEN)
   ====================================================== */
.pdf-viewer{
  margin-top:12px;
  background:var(--card);
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;

  animation:viewerIn var(--normal) var(--ease);
}

@keyframes viewerIn{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.pdf-viewer iframe{
  width:100%;
  height:720px;
  border:0;
  background:#fff;
}

/* ======================================================
   LOGIN OVERLAY
   ====================================================== */
.login-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,30,.85);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
body.locked{overflow:hidden}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width:768px){
  .search-bar{flex-direction:column}
  .pdf-viewer iframe{height:65vh}
  .hamburger{top:8px;left:8px}
  .brand{padding-top:36px}
  .logo{height:48px}
}

/* ======================================================
   ACCESSIBILITY: REDUCED MOTION
   ====================================================== */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}
/* ======================================================
   FINAL POLISH: Alle eckigen Buttons abrunden
   ====================================================== */

/* Drawer: Reset-Button & Links wie Chips */
.drawer .reset-btn,
.drawer .link,
.drawer button{
  border-radius: 999px !important;
  padding: 8px 14px;
}

/* Drawer-Reset explizit als Chip */
.drawer .reset-btn{
  background: var(--card-soft);
  border: 1px solid var(--border);
  transition: background var(--fast), transform var(--fast);
}

.drawer .reset-btn:active{
  transform: scale(.96);
}

/* Close-Button (X) im Drawer */
.drawer-header .icon-btn{
  border-radius: 999px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Header-Iconbuttons (Listen-/Grid-/Darkmode) einheitlich rund */
.header-actions .icon-btn{
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Darkmode: Kontrast sichern */
body.dark .drawer .reset-btn,
body.dark .drawer .icon-btn{
  color: #fff;
}

/* Mobile: Touch-Ziele minimal größer */
@media (max-width: 768px){
  .drawer .reset-btn,
  .drawer-header .icon-btn{
    min-height: 40px;
    min-width: 40px;
  }
}
/* ======================================================
   HARD OVERRIDE: Drawer Buttons wirklich rund
   ====================================================== */

/* ALLE klickbaren Elemente im Drawer */
#drawer button,
#drawer a,
#drawer .icon-btn,
#drawer .reset-btn,
#drawer .link{
  border-radius: 999px !important;
  padding: 8px 14px !important;
  box-shadow: var(--shadow);
}

/* Links wie Buttons darstellen */
#drawer a.link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  background: var(--card-soft);
  border: 1px solid var(--border);
  color: var(--text);
  margin-bottom: 8px;
}

/* Hover / Active */
#drawer a.link:hover,
#drawer button:hover{
  background: var(--primary);
  color: #fff;
}

#drawer a.link:active,
#drawer button:active{
  transform: scale(.96);
}

/* Close-Button (X) */
#drawer .drawer-header .icon-btn{
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
}

/* Darkmode Absicherung */
body.dark #drawer a.link,
body.dark #drawer button{
  color: #fff;
}

/* Mobile: bessere Touch-Ziele */
@media (max-width: 768px){
  #drawer a.link,
  #drawer button{
    min-height: 42px;
  }
}
/* ======================================================
   HARD FIX: Reset-Button als Chip
   ====================================================== */

#resetFilters,
#drawerReset{
  background: var(--card-soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: .85rem;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 120ms ease, transform 120ms ease;
}

#resetFilters:hover,
#drawerReset:hover{
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}

#resetFilters:active,
#drawerReset:active{
  transform: scale(.96);
}

/* Darkmode */
body.dark #resetFilters,
body.dark #drawerReset{
  background: #1a2430 !important;
  color: #fff !important;
}
/* ======================================================
   HARD FIX: Header-Ansichtsbuttons
   ====================================================== */

.header-actions{
  display: flex !important;
  flex-direction: row !important;
  gap: 8px;
}

/* Einzelne Icon-Buttons */
.header-actions .icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px !important;
  border: none !important;
  background: rgba(255,255,255,0.15);
  color: #fff;
  box-shadow: none !important;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background 120ms ease, transform 120ms ease;
}

.header-actions .icon-btn:hover{
  background: rgba(255,255,255,0.25);
}

.header-actions .icon-btn:active{
  transform: scale(.94);
}

/* Aktiver Zustand (z. B. List/Grid) */
.header-actions .icon-btn.active{
  background: #fff;
  color: var(--primary);
}

/* Mobile: NICHT umbrechen */
@media (max-width: 768px){
  .header-actions{
    flex-wrap: nowrap !important;
  }
}
/* ======================================================
   PDF PLATZHALTER – MOBILE (STABIL & PERFORMANT)
   ====================================================== */

/* Auf Mobile keine pdf.js-Canvas anzeigen */
@media (max-width: 768px){

  /* Canvas ausblenden */
  .pdf-thumb{
    display: none !important;
  }

  /* Einheitliche PDF-Kachel */
  .pdf-thumbnail{
    width: 96px;
    height: 120px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    position: relative;
    border: none;
    box-shadow: var(--shadow);
  }

  /* PDF-Label */
  .pdf-thumbnail::after{
    content: "PDF";
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .08em;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Kleine Unterzeile (optional, wirkt hochwertig) */
  .pdf-thumbnail::before{
    content: "Tippen zum Öffnen";
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .6rem;
    opacity: .85;
    color: #fff;
  }

  /* Touch-Feedback */
  .pdf-preview{
    transition: transform 120ms ease;
  }
  .pdf-preview:active{
    transform: scale(.96);
  }

  /* Titel unter der Kachel sauber umbrechen */
  .pdf-title{
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* ======================================================
   META-INFOS MIT ICONS – SAFE VARIANTE
   ====================================================== */

.objekt-card .meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
}

.objekt-card .meta::before{
  font-size: 1rem;
  opacity: .85;
}

/* Reihenfolge basiert auf deinem HTML */
.objekt-card .meta:nth-of-type(1)::before{ content: "🏷️"; }
.objekt-card .meta:nth-of-type(2)::before{ content: "📅"; }
.objekt-card .meta:nth-of-type(3)::before{ content: "📦"; }

/* Beschreibung */
.objekt-card .desc{
  position: relative;
  padding-left: 26px;
}
.objekt-card .desc::before{
  content: "📝";
  position: absolute;
  left: 0;
  top: 0;
}
/* ======================================================
   MOBILE: PDF ÖFFNEN BUTTON
   ====================================================== */

.pdf-open-mobile{
  display: none;
}

/* Mobile Ansicht */
@media (max-width: 768px){

  /* Dateiname ausblenden */
  .pdf-title{
    display: none;
  }

  /* PDF-Öffnen Button anzeigen */
  .pdf-open-mobile{
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--shadow);
    user-select: none;
  }

  .pdf-preview:active .pdf-open-mobile{
    background: var(--secondary);
  }
}
/* ======================================================
   HEADER ACTIONS – FINAL
   ====================================================== */

.header-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Einheitliche Icon-Buttons */
.header-actions .icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.header-actions .icon-btn:hover{
  background: rgba(255,255,255,0.25);
}

.header-actions .icon-btn:active{
  transform: scale(.94);
}

.header-actions .icon-btn.active{
  background: #fff;
  color: var(--primary);
}

/* ======================================================
   INFO BUTTON (IM HEADER)
   ====================================================== */

.header-actions .info-btn{
  position: relative;
  font-weight: 700;
  user-select: none;
}

/* Tooltip direkt unter dem Button */
.header-actions .info-tooltip{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  background: #1f2933;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .8rem;
  line-height: 1.4;
  max-width: 260px;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 5000;
}

/* Sichtbar */
.header-actions .info-btn:hover .info-tooltip,
.header-actions .info-btn:focus .info-tooltip{
  opacity: 1;
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px){
  .header-actions{
    margin-top: 12px;
    flex-wrap: nowrap;
  }

  .header-actions .info-tooltip{
    right: 50%;
    transform: translate(50%, 6px);
    text-align: center;
  }

  .header-actions .info-btn:hover .info-tooltip,
  .header-actions .info-btn:focus .info-tooltip{
    transform: translate(50%, 0);
  }
}

/* ======================================================
   SCROLL TO TOP – FINAL
   ====================================================== */

.to-top-btn{
  position: fixed;
  right: 18px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  z-index: 4000;

  display: none;
  align-items: center;
  justify-content: center;

  box-shadow: var(--shadow);
  transition: transform 120ms ease;
}

.to-top-btn:active{
  transform: scale(.95);
}
/* ======================================================
   LIST / GRID VIEW – FUNKTIONAL
   ====================================================== */

/* Listenansicht */
#objekte-container.list-view{
  display: block;
}

/* Rasteransicht */
#objekte-container.grid-view{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

/* Karten in Grid nicht volle Breite */
#objekte-container.grid-view .objekt-card{
  margin: 0;
}
/* ======================================================
   FILTER & RESET – CHIP DESIGN (WIEDERHERGESTELLT)
   ====================================================== */

/* Reset-Buttons */
#resetFilters,
#drawerReset{
  background: var(--card-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .85rem;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, color 120ms ease;
}

#resetFilters:hover,
#drawerReset:hover{
  background: var(--primary);
  color: #fff;
}

#resetFilters:active,
#drawerReset:active{
  transform: scale(.96);
}

/* Anwenden-Button (Jahre) */
#applyYears{
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

#applyYears:hover{
  background: var(--secondary);
}

#applyYears:active{
  transform: scale(.96);
}

/* Vorgefertigte Jahresbereiche */
.range-btn{
  background: var(--card-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  cursor: pointer;
  margin: 4px 4px 0 0;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

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

.range-btn.active{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(58,110,165,.35);
}
/* ======================================================
   LOGIN / MAINTENANCE SEITE
   ====================================================== */

body{
  background:
    radial-gradient(1200px 600px at top right, rgba(58,110,165,.18), transparent 60%),
    radial-gradient(800px 500px at bottom left, rgba(0,78,152,.18), transparent 60%),
    var(--bg);
}

/* Login Card */
.login-card{
  background: var(--card);
  border-radius: 20px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;

  box-shadow: var(--shadow);
  border: 1px solid var(--border);

  animation: loginIn 320ms var(--ease);
}

/* Sanftes Einblenden */
@keyframes loginIn{
  from{
    opacity: 0;
    transform: translateY(12px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo */
.login-logo{
  width: 72px;
  height: auto;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
}

/* Titel */
.login-card h1{
  margin: 8px 0 4px;
  font-size: 1.35rem;
}

.login-card .subtitle{
  margin: 0 0 20px;
  color: var(--muted);
  font-size: .9rem;
}

/* Formular */
.login-card form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Passwortfeld */
.login-card input[type="password"]{
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-soft);
  font-size: .95rem;
  outline: none;
  transition: border 120ms ease, box-shadow 120ms ease;
}

.login-card input[type="password"]:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(58,110,165,.25);
}

/* Button */
.login-card button{
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: transform 120ms ease, box-shadow 120ms ease;
}

.login-card button:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.login-card button:active{
  transform: scale(.97);
}

/* Fehlermeldung */
.login-error{
  margin-top: 14px;
  font-size: .85rem;
  color: var(--accent);
}

/* Darkmode Feinjustierung */
body.dark .login-logo{
  background: #fff;
}

/* Mobile */
@media (max-width: 480px){
  .login-card{
    padding: 30px 22px;
    border-radius: 18px;
  }
}
/* ======================================================
   ADMIN LOGIN
   ====================================================== */

.admin-login-body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(900px 500px at top right, rgba(58,110,165,.18), transparent 60%),
    radial-gradient(700px 400px at bottom left, rgba(0,78,152,.18), transparent 60%),
    var(--bg);
}

/* Card */
.admin-login-card{
  background: var(--card);
  border-radius: 20px;
  padding: 38px 34px;
  width: 100%;
  max-width: 420px;
  text-align: center;

  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  animation: adminIn 300ms var(--ease);
}

@keyframes adminIn{
  from{
    opacity: 0;
    transform: translateY(14px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo */
.admin-login-logo{
  width: 72px;
  padding: 6px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 14px;
}

/* Titel */
.admin-login-card h1{
  margin: 6px 0 0;
  font-size: 1.5rem;
}

.admin-subtitle{
  margin: 4px 0 22px;
  font-size: .9rem;
  color: var(--muted);
}

/* Formular */
.admin-login-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Input-Felder */
.admin-field{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
}

.admin-field i{
  color: var(--muted);
}

.admin-field input{
  border: none;
  background: transparent;
  flex: 1;
  font-size: .95rem;
  outline: none;
  color: var(--text);
}

/* Button */
.admin-login-btn{
  margin-top: 10px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: transform 120ms ease, box-shadow 120ms ease;
}

.admin-login-btn:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

.admin-login-btn:active{
  transform: scale(.96);
}

/* Fehler */
.admin-login-error{
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,107,107,.12);
  color: var(--accent);
  font-size: .85rem;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Zurück-Link */
.admin-back-link{
  display: inline-block;
  margin-top: 18px;
  font-size: .85rem;
  color: var(--muted);
  text-decoration: none;
}

.admin-back-link:hover{
  color: var(--primary);
}

/* Mobile */
@media (max-width: 480px){
  .admin-login-card{
    padding: 30px 22px;
  }
}
/* ======================================================
   ADMIN DASHBOARD
   ====================================================== */

.admin-dashboard-body{
  background: var(--bg);
  min-height: 100vh;
}

/* Header */
.admin-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: var(--shadow);
}

.admin-header h1{
  margin: 0;
  font-size: 1.4rem;
}

.admin-logout{
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .9;
}
.admin-logout:hover{
  opacity: 1;
}

/* Layout */
.admin-dashboard{
  max-width: 900px;
  margin: 28px auto;
  padding: 0 18px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Cards */
.admin-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.admin-card h2{
  margin-top: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Status */
.admin-status{
  margin: 14px 0;
  font-size: .95rem;
}
.admin-status.on{
  color: var(--accent);
}
.admin-status.off{
  color: var(--muted);
}

/* Buttons */
.admin-btn{
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .9rem;
  cursor: pointer;
}

.admin-btn.primary{
  background: var(--primary);
  color: #fff;
}

.admin-btn.danger{
  background: var(--accent);
  color: #fff;
}

.admin-btn:active{
  transform: scale(.97);
}

/* Formular */
.admin-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-form label{
  font-size: .85rem;
  color: var(--muted);
}

.admin-form input{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-soft);
}

/* Meldungen */
.admin-msg{
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .85rem;
}

.admin-msg.success{
  background: rgba(58,110,165,.15);
  color: var(--primary);
}

.admin-msg.error{
  background: rgba(255,107,107,.15);
  color: var(--accent);
}

/* Mobile */
@media (max-width: 480px){
  .admin-header{
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
.admin-status.on{ color: var(--accent); }
.admin-status.off{ color: var(--muted); }
/* ======================================================
   FOOTER
   ====================================================== */

.site-footer{
  margin-top: 60px;
  background: var(--card);
  border-top: 1px solid var(--border);
  color: var(--text);
}

.footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 18px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.footer-col h4{
  margin: 0 0 10px;
  font-size: .95rem;
}

.footer-col p{
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.5;
}

.footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li{
  font-size: .85rem;
  margin-bottom: 6px;
}

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

.footer-col a:hover{
  color: var(--primary);
}

/* Untere Leiste */
.footer-bottom{
  text-align: center;
  padding: 14px 18px;
  font-size: .8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* Darkmode */
body.dark .site-footer{
  background: var(--card);
}

/* Mobile */
@media (max-width: 480px){
  .footer-inner{
    padding: 28px 18px;
  }
}
/* ======================================================
   DARKMODE: Suchfeld Text & Cursor
   ====================================================== */

body.dark .search-bar input{
  color: #ffffff;              /* eingegebener Text */
  caret-color: #ffffff;        /* Cursor */
}

body.dark .search-bar input::placeholder{
  color: rgba(255,255,255,0.6); /* Platzhalter */
}
/* ======================================================
   DARKMODE: Jahresfilter (Number Inputs)
   ====================================================== */

body.dark .year-range input{
  color: #ffffff;                /* eingegebener Text */
  caret-color: #ffffff;          /* Cursor */
  background: var(--card);       /* sauberer Kontrast */
}

body.dark .year-range input::placeholder{
  color: rgba(255,255,255,0.6);  /* Platzhalter */
}
/* ======================================================
   ADMIN STATISTIK
   ====================================================== */

.admin-stats{
  display: flex;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.stat-box{
  flex: 1;
  min-width: 120px;
  background: var(--card-soft);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border);
}

.stat-number{
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}

.stat-label{
  display: block;
  font-size: .8rem;
  color: var(--muted);
}
.site-footer{
  background: linear-gradient(
    to bottom,
    var(--card),
    var(--card-soft)
  );
}