/* ======================================= */
/* GLOBALE VARIABLEN */
/* ======================================= */
:root {
  --color-bg-cream: #fefcf7;
  --color-bg-sage: #e9f3e4;
  --color-bg-white: #ffffff;
  --color-bg-vanilla: #fdf8e3;
  --color-text-dark: #222;
  --color-text-darker: #070707;
  --color-border-light: rgba(0, 0, 0, 0.04);
  --shadow-light: 0 0 10px rgba(255, 255, 255, 0.829);
  --shadow-hover: 0 6px 15px rgb(51, 51, 51);
  --transition-default: 0.25s ease;
}

/* ======================================= */
/* INDEX: spezifische Anpassungen */
/* ======================================= */
.index .hero { 
  filter: saturate(105%); 
  position: relative;
  min-height: 90vh;
}



/* ======================================= */
/* HERO-LAYOUT: Responsive Textsteuerung */
/* ======================================= */

.hero-wrapper {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end; 
  padding: 20px; 
}

.hero-content {
  max-width: 500px; 
  text-align: left; 
  background: rgba(255, 255, 255, 0.85);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- MODIFIKATOREN: Steuerung der Textposition --- */

.hero.text-left .hero-wrapper {
  justify-content: flex-start;
}

.hero.text-center .hero-wrapper {
  justify-content: center;
}
.hero.text-center .hero-content {
  text-align: center;
}

/* ======================================= */
/* FEATURE SEKTIONEN (Bild/Text Wechsel) */
/* ======================================= */

.feature-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "image content";
  gap: 00px;
  align-items: center;
  margin: 0px 0;
  padding: 0px;
}

.feature-section .feature-image {
  grid-area: image;
}
.feature-section .feature-content {
  grid-area: content;
}

/* Layout-Wechsel: Text links, Bild rechts */
.feature-section.text-right {
  grid-template-areas: "content image";
}

.feature-image img {
  width: 100%;
  height: auto;
}

.feature-content h2 {
  color: #000;
  margin-top: 5px;
  margin-left: 15px;
  font-size: 1.8rem;
}

.feature-content p {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-left: 15px;
}

.feature-wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 80px;
}

/* --- Responsive Anpassungen für Mobilgeräte --- */

@media (max-width: 768px) {
  .feature-section,
  .feature-section.text-right {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "content";
  }

  .feature-section.text-right .feature-image,
  .feature-section.text-right .feature-content {
    grid-area: auto;
  }
}

/* ======================================= */
/* RESPONSIVITÄT (Mobile-Anpassung) */
/* ======================================= */

@media (max-width: 768px) {
  .hero-wrapper {
    justify-content: center;
  }

  .hero-content {
    max-width: 90%;
    text-align: center;
    padding: 15px;
  }
}

/* ======================================= */
/* Begrüßung direkt unter Header */
/* ======================================= */

.welcome-section {
  text-align: center;
  padding: 2.0rem 1rem 2.5rem;
  background: #fff;
  border-bottom: 3px solid #ff9900;
  color: var(--color-text-dark);
  line-height: 1.3;
}

.welcome-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.welcome-section h1 {
  font-size: 2.0rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 0.8rem;
  text-transform: lowercase;
}

.welcome-section p { /*text unter herzlich willkommwn*/
  font-size: 1.3rem;
  font-weight: 400;
  color: #444;
}

@media (max-width: 700px) {
  .welcome-section {
    padding: 2.5rem 1rem 1.5rem;
  }
  .welcome-section h1 {
    font-size: 1.8rem;
  }
  .welcome-section p {
    font-size: 1rem;
  }
}

/* ======================================= */
/* 2x2 Bilderraster */
/* ======================================= */

.image-grid-section {
  padding: 1.25rem 1rem 2rem;
  background: transparent;
}

.image-grid {
  max-width: 830px;
  height: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

.grid-item {
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1; 
}

.grid-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;

}

@media (max-width: 700px) {
  .image-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .image-grid .grid-item {
    aspect-ratio: 16 / 9; 
  }
}
/* ======================================= */
/* CARDS - Startseite Layout & Effekte     */
/* ======================================= */
/*cards farben teilweise in base.css zeile 186*/
.card-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  display: flex;
  justify-content: center;
}

.cards {
  display: grid;
  gap: 30px;
  width: 100%;
}

/* 3 kleine Cards */
.cards:not(.two-cols) {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 2 große Cards */
.cards.two-cols {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.index .card {
  box-shadow: var(--shadow-light);
  cursor: pointer;
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.index .card:hover {
  transform: scale(1.00);
  box-shadow: var(--shadow-hover);
}
/* === Card Grid Layout === */

.cards-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 10rem;
}

/* Responsivität für das Padding der Card-Sektion */
@media (max-width: 1200px) {
    .cards-section {
        padding: 2rem 4rem;
    }
}

@media (max-width: 768px) {
    .cards-section {
        padding: 2rem 1.5rem;
    }
}

/* Kleine Cards Layout */
.small-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* Allgemeine Card-Eigenschaften */
/* --- OPTION 2: Bild-Header --- */

.card {
    background: #fff; /* Karte an sich ist weiß */
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    overflow: hidden;
}

.card-header {
    /* Hier definieren wir den Platz für das Bild */
    height: 150px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff; /* Weisser Text auf Bild */
    position: relative;
    border-top: none;
    background-size: cover;
    background-position: center;
    /* Ein Overlay, damit man den Text lesen kann */
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.4); 
}

.card-header h3 {
    font-size: 1.8rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 2;
}

.card-header .subtext {
    color: #f0f0f0;
    z-index: 2;
}

/* Damit das funktioniert, musst du im HTML den Cards Klassen geben oder hier nth-child nutzen: */

/* Bild für 1. Card (Öffnungszeiten) */
.small-cards .card:nth-child(1) .card-header {
    background-image: url('../images/lattung_theke.png'); 
}

/* Bild für 2. Card (Buchungen) */
.small-cards .card:nth-child(2) .card-header {
    background-image: url('../images/tischplatte2.png');
}

/* Bild für 3. Card (Menü) */
.small-cards .card:nth-child(3) .card-header {
    background-image: url('../images/lattung_theke.png');
}

.card-divider {
    border: none;
    height: 3px;
    background-color: #c6d638; /*farbe der trennstriche*/
    margin: 8px 0;
}

/* Bilder */
.card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Inhalt (aufklappbar) - Standard (ausgeblendet) */
.card-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 1.0s ease;
    padding: 0 1.4rem;
}

/* Inhalt (aufgeklappt) */
.card.open .card-content {
    max-height: 2000px;
    opacity: 1;
    /* Verbesserte Lesbarkeit: Mehr Padding im geöffneten Zustand */
    padding: 1rem 1.4rem; 
}

/* Spezifische kleine Cards */
.card.small {
    text-align: center;
}

/*
 * STYLING DES TRENNERS (HR)
 * Diese Regel greift für alle <hr class="card-divider">
 */
.card-content .card-divider {
    border: none;
    height: 3px;
    background-color: #f90; /*trennstriche der offenen cards*/
    margin: 8px 0;
}

/*
 * STYLING DES KONTAKT-TEXTES
 */
.card-content .contact-info {
    margin-top: 15px; /* Abstand über dem Kontakt-Link */
    padding-top: 0;
}


/* === Große Cards Layout und Stil === */
.large-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.card.large {
    background: #f1f1ef94;
    border-radius: 6px;
    /* ACHTUNG: Der Box-Shadow ist hier sehr dominant und dunkel */
    box-shadow: 0 2px 18px rgb(81, 80, 80); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
}

.card.large:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px #666666;
}

.card.large .card-header { /*innere farbe der gr. cards*/
    padding: 2rem 1rem;
    background-image: url('../images/tischplatte2a.png');
    /*background-color: #accb57;*/
}

.card.large h3 {
    margin: 0;
    font-size: 1.4rem;
}

.card.large p {
    color: #666666;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.card.large img {
    border-bottom: 1px solid #000000;
}

/* === Popup (Modal) === */
.popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

.popup-content {
    background-color: #fff5c6;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 9px;
    max-width: 420px;
    text-align: center;
    position: relative;
    animation: fadeIn 2.0s ease;
}

.popup-content img {
    width: 80%;
    height: auto;
    border-radius: 9px;
    margin-bottom: 1rem;
}

.popup-content h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.popup-content p {
    line-height: 1.6;
}

.popup-close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: color 0.2s ease;
}

.popup-close:hover {
    color: #000;
}

@keyframes fadeIn {
    from {opacity: 0; transform: scale(0.95);}
    to {opacity: 1; transform: scale(1);}
}