/* includes/custom.css */

/* ==========================================================================
   Basis / Variablen
   ========================================================================== */
:root{
  --container-max: 1280px;
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --shadow-1: 0 2px 5px rgba(0,0,0,.2);
  --header-h: 300px;
  --nav-h: 56px;
  --brand-green: #80df81;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Kopfbereich – scrollt normal mit
   ========================================================================== */
.header-wrapper,
header[role="banner"]{
  position: relative;
  width: 100%;
  min-height: var(--header-h);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-1);
}

.header-content{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-2);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.header-logo img{ width: 100px; height: auto; }
.header-user img{ max-height: 50px; width: auto; }

.header-title{
  flex-grow: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title-image{
  max-height: 220px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 576px){
  :root{ --header-h: 200px; }
  .header-logo img{ width: 72px; }
  .header-title-image{ max-height: 160px; }
}

/* ==========================================================================
   Navigation – einziges sticky Element
   ========================================================================== */
nav.navbar.fixed-menu{
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1050;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

nav.navbar.fixed-menu .container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}

/* ⛔ KEIN Body-Offset mehr */
body{
  padding-top: 0;
}

/* ==========================================================================
   Main Content
   ========================================================================== */
.main-content{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2rem 1rem;
  background-color: #fff;
  min-height: 400px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-wrapper{
  width: 100%;
  color: #000;
  padding: .67rem 1rem;
}

.footer-content{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: .67rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.footer-content > div{
  flex: 1 1 100%;
  text-align: center;
}

@media (min-width: 768px){
  .footer-content > div{ flex: 1; }
}

/* ==========================================================================
   (Rest unverändert – Admin, Tabellen, Tabs, etc.)
   ========================================================================== */
/* … dein restlicher CSS-Code bleibt exakt wie zuvor … */