/* ===== Theme-Variablen ===== */

:root {
  --nav-xpad: 30px;
  --nav-ypad: 10px;
  --nav-xpad-mobile: 24px;
  --nav-bg: #0066cc;
  --nav-bg-dark: #0052a3;
  --nav-text: #ffffff;
  --btn-bg: var(--nav-bg);
  --btn-bg-hover: var(--nav-bg-dark);
  --btn-text: #ffffff;
}

/* ===== Navbar Links: mehr Platz + Trapez + Hover/Active ===== */

.navbar-nav .nav-item {
  margin: 0 2px;
  position: relative;
}

.navbar-nav .nav-link {
  background-color: var(--nav-bg);
  color: var(--nav-text);
  padding: var(--nav-ypad) var(--nav-xpad);
  position: relative;
  transform: perspective(10px) rotateY(-1deg);
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
  transition: all 0.3s ease;
  margin: 0 5px;
  font-weight: 500;
  border: none;
  overflow: hidden;
  text-decoration: none;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus, .navbar-nav .nav-link.active {
  background-color: var(--nav-bg-dark);
  color: var(--nav-text);
  filter: brightness(0.8);
  outline: none;
}

/* Dropdown dem Stil anpassen */

.navbar-nav .dropdown-menu {
  background-color: var(--nav-bg);
  border: none;
  border-radius: 0;
  margin-top: 0;
}

.navbar-nav .dropdown-item {
  color: var(--nav-text);
  padding: var(--nav-ypad) var(--nav-xpad);
  transition: background-color 0.3s ease, filter 0.3s ease;
}

.navbar-nav .dropdown-item:hover, .navbar-nav .dropdown-item:focus {
  background-color: var(--nav-bg-dark);
  filter: brightness(0.8);
  outline: none;
}

/* ===== Buttons: gesamter Seite im gleichen Stil (ohne HTML-Änderungen) ===== */

.btn:not(.btn-link) {
  position: relative;
  overflow: hidden;
  border: none;
  font-weight: 500;
  padding: var(--nav-ypad) var(--nav-xpad);
  transition: all 0.3s ease;
  background-color: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
  transform: perspective(10px) rotateY(-1deg);
}

/* Hover/Focus */

.btn:not(.btn-link):hover, .btn:not(.btn-link):focus {
  background-color: var(--btn-bg-hover);
  color: var(--btn-text);
  filter: brightness(0.8);
  outline: none;
}

/* Optional: Farb-Mapping für Bootstrap-Varianten */

.btn-primary {
  --btn-bg: #0d6efd;
  --btn-bg-hover: #0b5ed7;
}

.btn-secondary {
  --btn-bg: #6c757d;
  --btn-bg-hover: #5c636a;
}

.btn-success {
  --btn-bg: #198754;
  --btn-bg-hover: #157347;
}

.btn-danger {
  --btn-bg: #dc3545;
  --btn-bg-hover: #bb2d3b;
}

.btn-warning {
  --btn-bg: #ffc107;
  --btn-bg-hover: #ffb300;
  color: #000;
  --btn-text: #000;
}

.btn-info {
  --btn-bg: #0dcaf0;
  --btn-bg-hover: #31d2f2;
  color: #000;
  --btn-text: #000;
}

.btn-light {
  --btn-bg: #f8f9fa;
  --btn-bg-hover: #e9ecef;
  color: #000;
  --btn-text: #000;
}

.btn-dark {
  --btn-bg: #212529;
  --btn-bg-hover: #1c1f23;
}

/* Ripple-Span (JS injiziert <span class="ripple">) */

.navbar-nav .nav-link .ripple, .btn:not(.btn-link) .ripple, .navbar-nav .dropdown-item .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 0;
  height: 0;
  animation: ripple-animation 0.6s ease-out forwards;
}

/* Schatten beim Scrollen */

.navbar-scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Bessere Lesbarkeit bei Tastatur-Navigation */

.navbar-nav .nav-link:focus-visible, .btn:not(.btn-link):focus-visible, .navbar-nav .dropdown-item:focus-visible {
  outline: 2px dashed rgba(255,255,255,0.85);
  outline-offset: 2px;
}

/* Toggler-Optik (optional) */

.navbar .navbar-toggler {
  border: none;
  box-shadow: none !important;
}

.navbar .navbar-toggler:focus {
  outline: 2px dashed rgba(0,0,0,0.4);
  outline-offset: 2px;
}

/* ===== Mobile: Trapez beibehalten, full-width, gute Tap-Targets ===== */

/* Collapse soll sauber wachsen, keine abgeschnittenen Ripples */

@media (max-width: 991px) {
  .navbar .navbar-collapse {
    width: 100%;
    overflow: visible;
  }
}

@media (max-width: 991px) {
  .navbar-nav {
    width: 100%;
    gap: 8px;
    padding: 8px 0;
  }
}

@media (max-width: 991px) {
  .navbar-nav .nav-item {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 991px) {
  .navbar-nav .nav-link {
    display: block;
    width: 100%;
    margin: 0;
    clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
    transform: none;
    padding: calc(var(--nav-ypad) + 2px) var(--nav-xpad-mobile);
    text-align: left;
  }
}

/* Dropdown im mobilen Menü: gleicher Trapez-Look, full-width */

@media (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    display: block;
    background-color: transparent;
    box-shadow: none;
    margin: 4px 0 0;
    padding: 0;
  }
}

@media (max-width: 991px) {
  .navbar-nav .dropdown-item {
    display: block;
    width: 100%;
    margin: 6px 0;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    padding: calc(var(--nav-ypad) + 2px) var(--nav-xpad-mobile);
    clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
    transition: background-color 0.3s ease, filter 0.3s ease;
  }
}

/* Buttons global im Mobile ebenfalls ruhiger + vollflächig bedienbar */

@media (max-width: 991px) {
  .navbar .btn, .btn {
    clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
    transform: none;
    padding: calc(var(--nav-ypad) + 2px) var(--nav-xpad-mobile);
  }
}

/* Keyframes (Fallback, falls JS die nicht setzt) */

@keyframes ripple-animation {
  to {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}