/* ============================================================================
   DATEI: css/layout.css  –  Seitenaufbau: Kopfzeile, Titelbild, Raster, Fußzeile
   ============================================================================
   HÄUFIGE ÄNDERUNGEN:
     Titelbild der Startseite         -> .hero-startseite::before (background-image)
     Titelbild der anderen Seiten     -> .hero::before (background-image)
     Höhe des Titelbilds              -> .hero (min-height) / .hero-startseite
     Wie dunkel das Bild abgedeckt ist -> .hero::after (linear-gradient)
     Gerichte pro Zeile (Desktop)     -> .produkt-raster (repeat(4, …))
     Größe der Hauptüberschrift       -> .hero h1 (font-size)

   FLEXBOX vs. GRID:
     display: flex  -> Elemente in EINER Reihe (oder Spalte), z. B. Menü
     display: grid  -> Elemente in einem RASTER mit Spalten, z. B. Gerichtskarten
   ============================================================================ */

/* ---------- KOPFZEILE ---------- */
.site-header {
  position: sticky;      /* klebt beim Scrollen oben. WENN "static": scrollt mit weg */
  top: 0;
  z-index: 100;          /* liegt über allem anderen (höhere Zahl = weiter vorne) */
  background: rgba(10, 10, 11, 0.94);   /* 0.94 = leicht durchscheinend */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);          /* Milchglas-Effekt hinter der Kopfzeile */
}

/* Logo links, Menü Mitte, Standort-Knopf rechts.
   justify-content: space-between verteilt die drei auf die ganze Breite. */
.header-inhalt {
  min-height: 86px;
  display: flex;
  align-items: center;             /* senkrecht mittig */
  justify-content: space-between;
  gap: 26px;
}

.logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; }

/* Hauptmenü: Links nebeneinander. clamp: Abstand wächst mit der Fensterbreite. */
.hauptnavigation { display: flex; align-items: center; gap: clamp(14px, 3vw, 45px); }
.hauptnavigation a { position: relative; padding: 10px 0; font-size: 15px; font-weight: 600; }
.hauptnavigation a:hover { color: var(--farbe-gold); }

/* Roter Strich unter der aktuellen Seite (aria-current="page" im HTML).
   ::after erzeugt ein "unsichtbares Zusatzelement", hier ein 3px hoher Balken.
   WENN DU height: 3px auf 0 setzt, verschwindet die Markierung. */
.hauptnavigation a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--farbe-rot);
}

/* Menü-Knopf ist auf großen Bildschirmen versteckt (display: none).
   In responsive.css wird er auf dem Handy eingeblendet. */
.menuknopf {
  display: none;
  border: 1px solid var(--farbe-linie);
  background: transparent; color: white;
  padding: 9px 13px; border-radius: 8px;
}

/* ---------- HERO (großes Titelbild oben auf jeder Seite) ---------- */
/* Das Bild liegt in ::before, die dunkle Abdeckung in ::after, der Text darüber.
   isolation: isolate sorgt dafür, dass die negativen z-index-Werte nur
   innerhalb des Hero-Bereichs gelten. */
.hero { position: relative; isolation: isolate; min-height: 325px; display: flex; align-items: center; overflow: hidden; }

.hero::before {
  content: "";
  position: absolute; inset: 0;   /* inset: 0 = füllt den ganzen Bereich */
  z-index: -2;                    /* ganz hinten */
  /* WENN DU ein anderes Bild willst: Datei in bilder/ legen und Namen hier ändern.
     ../ heißt "ein Ordner nach oben" (von css/ zum Projektordner). */
  background-image: url('../bilder/doener-hero.webp');
  background-position: right center;   /* welcher Bildteil sichtbar bleibt */
  background-repeat: no-repeat;
  background-size: cover;              /* Bild füllt alles, Ränder werden abgeschnitten */
}

/* Verlauf von links (fast schwarz) nach rechts (fast durchsichtig), damit der
   weiße Text gut lesbar ist. Die letzte Zahl in rgba ist die Deckkraft.
   WENN DU .97 auf .6 senkst, wird das Bild links heller (Text schlechter lesbar). */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.14) 100%);
}

.hero-inhalt { padding-block: 46px; }   /* padding-block = oben UND unten */
.hero-kicker { color: var(--farbe-gold); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.hero h1 {
  font-size: clamp(38px, 5.4vw, 72px);   /* Handy 38px, großer Bildschirm bis 72px */
  line-height: 1.08;
  letter-spacing: -.035em;               /* Buchstaben etwas enger */
  margin: 13px 0 16px;
  max-width: 750px;
}
.hero h1 span { color: var(--farbe-gold); }   /* goldenes Wort in der Überschrift */
.hero p { max-width: 560px; color: #e2e2e2; font-size: clamp(16px, 1.7vw, 20px); margin: 0; }

/* Die Startseite hat ein höheres Titelbild mit eigenem Foto. */
.hero-startseite { min-height: 485px; }
.hero-startseite::before { background-image: url('../bilder/startseite-hero.webp'); background-position: center; }
.hero-startseite::after { background: linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.75) 55%, rgba(0,0,0,.28)); }

/* Knöpfe im Titelbild nebeneinander, auf schmalen Geräten untereinander (wrap). */
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 29px; }

/* ---------- RASTER FÜR KARTEN ---------- */
/* repeat(4, minmax(0,1fr)) = 4 gleich breite Spalten.
   WENN DU 3 statt 4 schreibst, werden die Gerichtskarten auf dem Desktop größer.
   Auf Tablet/Handy gelten die Werte aus responsive.css bzw. mobil-und-logo.css. */
.produkt-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 26px 0 46px; }

.sektion-titel { font-size: clamp(25px, 3vw, 36px); margin: 38px 0 4px; }
.sektion-untertitel { color: var(--farbe-gedimmt); margin: 0; }

/* Textbereich der "Über uns"-Seite: max-width begrenzt die Zeilenlänge (besser lesbar). */
.info-bereich { padding: 52px 0 75px; }
.info-bereich p { color: var(--farbe-gedimmt); max-width: 780px; }

/* ---------- FUSSZEILE ---------- */
.site-footer {
  margin-top: 65px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 30px 0;
  color: var(--farbe-gedimmt);
  font-size: 14px;
}
.footer-inhalt { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: var(--farbe-gold); }
.footer-links a:hover, .footer-links a[aria-current="page"] { text-decoration: underline; }