/*
  Gesunde Kost Rein – Projektspezifische Styles
  -------------------------------------------------
  Bearbeite ausschließlich diese Datei für Layout/Design-Anpassungen.
  Bootstrap (bootstrap-4.4.1.css) bleibt unangetastet als Vendor.

  Struktur
  1) Variablen (Farben, Abstände)
  2) Navbar
  3) Carousel
  4) Typografie & Sektionen
  5) Responsive Breakpoints (Mobile → Tablet → Desktop)
*/

/* 1) Variablen */
:root {
  --brand-green: #28a745;
  --brand-orange: #e94e1a;
  --text-dark: #343a40;
}

/* 2) Navbar */
.navbar {
  transition: all 0.3s ease;
}

.navbar-scrolled {
  background-color: rgba(65, 63, 63, 0.95) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.navbar-scrolled .navbar-brand,
.navbar-scrolled .nav-link {
  color: var(--brand-green) !important;
}

.navbar-scrolled .navbar-brand:hover,
.navbar-scrolled .nav-link:hover {
  color: var(--brand-green) !important;
}

/* Logo-Abstand */
.navbar-brand-logo { margin-right: 10px; }
@media (max-width: 576px) {
  .navbar-brand-logo { margin-right: 5px; }
}

/* 3) Carousel */
/* Bildgrößen & Zentrierung */
.carousel-inner img {
  max-width: 80%;
  width: auto;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  display: block;
}

/* Indikatoren */
.carousel-indicators {
  background: none !important;
  padding: 0;
  border-radius: 0;
}
.carousel-indicators li { border: none; }
.carousel-indicators .active { background-color: var(--brand-green); }

/* Captions */
.carousel-caption {
  background: none !important;
  padding: 1rem;
  bottom: 20px;
  border-radius: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.carousel-caption h4,
.carousel-caption p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  color: #fff;
}

/* Smoother slide */
.carousel-item { transition: transform 0.6s ease-in-out; }

/* 4) Typografie & Sektionen */
.opening-hours { text-align: center; }

/* 5) Responsive */
/* Smartphones */
@media (max-width: 576px) {
  /* Carousel */
  .carousel-inner img { max-width: 90%; max-height: 250px; }
  .carousel-caption { bottom: 10px; padding: 0.5rem; }
  .carousel-caption h4 { font-size: 0.9rem; margin-bottom: 0.25rem; }
  .carousel-caption p  { font-size: 0.75rem; margin-bottom: 0; }
  .carousel-indicators { bottom: -40px; }
  .carousel-indicators li { width: 8px; height: 8px; border-radius: 50%; margin: 0 2px; }

  /* Navigation */
  .navbar-brand { font-size: 1.1rem; }
  .navbar-brand-logo img { width: 40px; }

  /* Header/Masthead */
  .masthead h1 { font-size: 1.8rem; }
  .masthead h2 { font-size: 1.2rem; }
  .masthead h3 { font-size: 1rem; }
  .masthead .opening-hours h4 { font-size: 1.1rem; }
  .masthead .opening-hours p  { font-size: 0.9rem; }

  /* Inhalt/Spacing */
  .page-section { padding: 2rem 0; }
  .container { padding-left: 15px; padding-right: 15px; }
  .divider { margin: 1.5rem auto !important; }
  .mb-4 { margin-bottom: 1rem !important; }
  .mb-5 { margin-bottom: 1.5rem !important; }

  /* Buttons/Modals */
  .btn-xl { padding: 0.75rem 1.5rem; font-size: 1rem; }
  .modal-lg { max-width: 90%; }
}

/* Tablets */
@media (min-width: 577px) and (max-width: 768px) {
  .carousel-inner img { max-width: 85%; max-height: 350px; }
  .carousel-caption { bottom: 15px; padding: 0.75rem; }
  .carousel-caption h4 { font-size: 1rem; }
  .carousel-caption p  { font-size: 0.85rem; }
  .navbar-brand-logo img { width: 50px; }
}

/* Tablets & kleine Laptops: größere Indikatoren */
@media (min-width: 577px) and (max-width: 992px) {
  .carousel { touch-action: pan-y pinch-zoom; }
  .carousel-indicators li {
    width: 12px; height: 12px; margin: 0 3px; cursor: pointer;
    background-color: rgba(255, 255, 255, 0.6);
  }
  .carousel-control-prev, .carousel-control-next { width: 15%; opacity: 0.8; }
  .carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .carousel, .carousel-item { transition: none; }
}

/* High DPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .carousel-inner img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Mobile Landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .carousel-inner img { max-height: 200px; }
  .masthead { padding: 2rem 0; }
  .masthead h1 { font-size: 1.5rem; }
  .masthead h2, .masthead .h2 { font-size: 1rem; }
}