/*
  styles.css
  Enthält das Grundlayout und Design der Website.  Die CSS‑Klassen sind klar
  benannt und modular aufgebaut, sodass Farben, Abstände und Typografie
  zentral anpassbar sind.  Media Queries sorgen für ein responsives Layout.
*/

/* Grundlegende Variablen */
:root {
  --primary-color: #125b55;
  --secondary-color: #d4a54f;
  --text-color: #333;
  --background-color: #fff;
  --accent-color: #f5f5f5;
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Navigation */
.site-header {
  background: var(--background-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-color);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
}

/* Hamburger Icon (hidden by default) */
.hamburger {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--primary-color);
}

.nav-links li {
  position: relative;
}

.nav-links a {
  padding: 0.5rem 0.8rem;
  color: var(--primary-color);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--secondary-color);
}

/* Hero Section */
.hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-block;
  background: var(--secondary-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s;
}

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

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Positioniert Buttons in den Service‑Karten unten, sodass alle auf einer Linie stehen */
.service-item .btn {
  margin-top: auto;
  align-self: center;
}

/* Cocktail‑Konfigurator Styles */
.cocktail-form .form-group {
  margin-bottom: 1rem;
}

.cocktail-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.cocktail-form select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  background-color: #fff;
}

.cocktail-results {
  display: grid;
  gap: 1rem;
}

.cocktail-card {
  background: var(--accent-color);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cocktail-card h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.cocktail-card .cocktail-tags {
  font-size: 0.875rem;
  color: #555;
}

/* Beta‑Hinweis */
.beta-notice {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

/* Button‑Reihe im Cocktail‑Konfigurator */
.button-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.btn.btn-secondary {
  background: #e8e8e8;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

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

/* Farbgestaltung der Cocktail‑Seite: Wir setzen die Texte und Labels auf die
   primäre Farbe, um sie an den Rest der Website anzupassen. */
.cocktail-page main,
.cocktail-page label,
.cocktail-page h1,
.cocktail-page p,
.cocktail-page select,
.cocktail-page option {
  color: var(--primary-color);
}

/* Sections */
section {
  padding: 4rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--primary-color);
}

/* Services */
.services .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/*
  Die Service‑Karten werden als Flex‑Container dargestellt.  Dadurch können
  die Inhalte (Bild, Überschrift, Text und Button) so verteilt werden,
  dass der Button immer am unteren Rand steht.  Jede Karte hat die gleiche Höhe,
  wodurch alle Call‑to‑Action‑Buttons auf einer Linie erscheinen.
*/
.service-item {
  background: var(--accent-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.service-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.service-item h3 {
  margin: 1rem 0 0.5rem;
}

.service-item p {
  padding: 0 1rem;
  margin-bottom: 1rem;
  /* Lässt den Textbereich flexibel wachsen, damit der Button nach unten geschoben wird */
  flex-grow: 1;
}

/* Offers */
.offers-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.offer-item {
  background: var(--accent-color);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.offer-item h3 {
  margin-bottom: 0.5rem;
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.about-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* Instagram */
.instagram-embed {
  background: var(--accent-color);
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: flex-start;
}

.contact-form-wrapper {
  background: var(--accent-color);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.contact-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.checkbox input {
  margin-right: 0.5rem;
}

.contact-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  margin-top: 2rem;
}

/* Footer */
.site-footer {
  background: var(--primary-color);
  color: #fff;
  padding: 2rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.footer-section h4 {
  margin-bottom: 0.5rem;
}

.footer-section ul {
  list-style: none;
}

.footer-section li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: #fff;
  transition: color 0.2s;
}

.footer-section a:hover {
  color: var(--secondary-color);
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.875rem;
}

/* Responsives Verhalten */
@media (max-width: 768px) {
  /* Navigation: mobile layout */
  .hamburger {
    display: block;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--background-color);
    width: 100%;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 999;
  }
  .nav-links.nav-open {
    display: flex;
  }
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}