html {
	  scrollbar-gutter: stable both-edges;
}
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
@font-face {
    font-family: 'Lobster';
    src: url('/static/fonts/Lobster-Regular.eot'); /* IE9 Compat Modes */
    src: url('/static/fonts/Lobster-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/fonts/Lobster-Regular.woff') format('woff'), /* Modern Browsers */
         url('/static/fonts/Lobster-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/static/fonts/Lobster-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
    :root {
      --petrol:#006a6c;
      --petrol-900:#005254;
      --orange:#ff7a00;
      --nav-h:72px;
      --footer-h:80px;
    }

    /* --- Grundlayout --- */
    .logotype {
	    font-family: "Lobster";
    }
    body {
      background-color: #fff;
      min-height: 100vh;
      padding-bottom: var(--footer-h);
      padding-top: var(--nav-h);
      position: relative;
    }

    /* Wasserzeichen fixiert */
    body::before {
      content: "";
      position: fixed;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      background: url("/static/images/wasserzeichen.svg") center center no-repeat;
      background-size: 40%;
      opacity: 0.3;
      z-index: -1;
    }

    /* --- Kopfzeile mit Verjüngung nach unten --- */
.navbar{
  height: var(--nav-h);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  color: #fff;
  /* WICHTIG: Container selbst hat KEINEN clip-path mehr und keinen direkten Hintergrund */
  background: transparent;
  padding: 0 4% 0 4%;
}

/* Trapez-Hintergrund als Pseudo-Element – clippt NICHT die Dropdowns */
.navbar::after{
  content: "";
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  background: linear-gradient(to bottom, var(--petrol) 0%, var(--petrol-900) 85%, rgba(0,0,0,0) 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  z-index: 0;             /* liegt hinter dem Inhalt der Navbar */
}
/* Navbar-Inhalt über das Pseudo-Element heben */
.navbar > .container-fluid{ position: relative; z-index: 1; }

/* ── NEU: Petrol-Hintergrund im Dropdown ─────────────────────── */
.navbar .dropdown-menu{
  /* Vollflächiger petrolfarbener Hintergrund fürs aufgeklappte Menü */
  background: linear-gradient(180deg, var(--petrol) 0%, var(--petrol-900) 100%) !important;
  color: #fff;
  border: 0;
}
.navbar .dropdown-menu .list-group-item{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.06);
}
.navbar .dropdown-menu .list-group-item:hover,
.navbar .dropdown-menu .list-group-item:focus{
  background: rgba(255,255,255,0.07);
  color: #fff;
}

 @media (min-width: 992px){
  .navbar .dropdown-menu{
    position: absolute !important;
    left: 0;
    right: auto;
    top: 100%;
    margin-top: 0;
    display: none;              /* Grundzustand */
    z-index: 1050;              /* über Header-Hintergrund */
  }
  /* HOVER-Fallback (falls JS aus ist) */
  .navbar .dropdown:hover > .dropdown-menu{
    display: block;
  }
  /* Wenn wir per JS/Bootstrap .show setzen, soll’s auch sicher sichtbar sein */
  .navbar .dropdown-menu.show{
    display: block !important;
  }
}

/* ────────────────────────────────
   Mobile-Navigation (≤991.98px)
   ──────────────────────────────── */
@media (max-width: 991.98px){
  /* Gesamter Collapsing-Bereich petrolfarben hinterlegt */
  .navbar .navbar-collapse{
    background: linear-gradient(180deg, var(--petrol) 0%, var(--petrol-900) 100%);
    margin: 0 -4%;
    padding: .75rem 4% 1rem 4%;
  }

  /* Kategorie-Überschriften (Toggles) petrolfarbener Hintergrund + helle Schrift */
  .navbar .nav-link.dropdown-toggle{
    background-color: var(--petrol-900);
    color: #fff !important;
    border-radius: .25rem;
    padding: .5rem .75rem;
    margin-bottom: .25rem;
  }

  /* Hover / Fokus leicht heller */
  .navbar .nav-link.dropdown-toggle:hover,
  .navbar .nav-link.dropdown-toggle:focus{
    background-color: var(--petrol);
    color: #fff;
  }

  /* UNTERMENÜ: standardmäßig ZU (wichtig: vorher stand hier display:block) */
  .navbar .dropdown-menu{
    position: static !important;
    display: none;               /* ← nun zugeklappt */
    background: var(--petrol);
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0 .25rem;
  }

  /* Sichtbar, wenn Bootstrap .show am Eltern-Element setzt */
  .navbar .dropdown.show > .dropdown-menu,
  .navbar .dropdown-menu.show{
    display: block;
  }

  .navbar .list-group-item{
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.1);
  }

  .navbar .list-group-item:hover{
    background: rgba(255,255,255,0.1);
  }

}
/* Einheitliches Padding/Look für Menüeinträge */
.navbar .dropdown-menu .menu-link {
  padding: .65rem .9rem;
  background: transparent;
  color: #fff;                 /* im Desktop petrolfarbenen Menü: weißer T/ */
  border: 0;                   /* keine Bootstrap-Ränder */
  display: block;
}
.navbar .dropdown-menu .menu-link:hover,
.navbar .dropdown-menu .menu-link:focus{
  background: rgba(255,255,255,0.07);
  color: #fff;
}

/* Mobile: bleibt petrolfarben, Text weiß */
@media (max-width: 991.98px){
  .navbar .dropdown-menu .menu-link{
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .navbar .dropdown-menu .menu-link:last-child{
    border-bottom: 0;
  }
}

    .brand {
      font-weight: 800;
      font-size: clamp(1.875rem, 0.2505rem + 2.6201vw, 2.625rem);
      color: #fff;
      text-decoration: none;
      white-space: nowrap;
    }
    .brand .accent { color: var(--orange); }
    .accent { color: var(--orange); }
    h1 .accent { color: var(--orange); }
    span .accent { color: var(--orange); }
    /* --- Fußzeile mit Verjüngung nach oben --- */
    footer {
  position: fixed;
  
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 1020;
  color: #fff;
  background:
    linear-gradient(to top, var(--petrol) 0%, var(--petrol-900) 85%, rgba(0,0,0,0) 100%);
  /* Trapez: top inset 15%/85%, bottom full width */
  -webkit-clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  box-shadow: 0 -2px 6px rgba(0,0,0,.25);
  padding: 0 5%  0 5%;
}

    a { color: var(--petrol);}
    footer img {
      height: 48px;
      opacity: 0.95;
    }
    footer .footer-text {
      flex: 1;
      text-align: right;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.8);
    }