/* ==========================================================================
   HeimatSnack – Basis-Stylesheet (Phase 4)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Roboto Condensed lokal eingebunden (woff2). Die Pfade sind relativ zu
   diesem Stylesheet, also vom Ordner css/ aus.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../assets/fonts/roboto-condensed-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../assets/fonts/roboto-condensed-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../assets/fonts/roboto-condensed-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  /* Farben */
  --color-bg: #2D2D2C;
  --color-surface: #3D3D3A;
  --color-accent: #7F1F27;
  --color-text: #F1ECE3;

  /* Layout */
  --container-max: 1320px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);
  --section-space: clamp(2.125rem, 1.6rem + 1.6vw, 3.125rem);
  --nav-height: 76px;

  /* Finale Bürsttextur: 500-px-Kachel, wird von body und .site-header
     gemeinsam genutzt – identische Frequenzen, Seeds und Deckkräfte. */
  --brushed-texture: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Cfilter%20id='b'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.014%200.75'%20numOctaves='2'%20seed='19'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='500'%20height='500'%20filter='url%28%23g%29'%20opacity='0.055'/%3E%3Crect%20width='500'%20height='500'%20filter='url%28%23b%29'%20opacity='0.05'/%3E%3C/svg%3E");

  /* Typografie – Roboto Condensed wird oben lokal per @font-face geladen,
     die weiteren Einträge dienen als Fallback. */
  --font-primary: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   Global
   Hintergrund: #2D2D2C bleibt die dominante Grundfarbe. Die Struktur kommt
   aus einem einzigen eingebetteten SVG (feTurbulence, kein externer Request)
   mit genau zwei Durchgängen:
   1. feinkörniges isotropes Rauschen (baseFrequency 0.9) für die matte
      Rauheit;
   2. anisotropes Rauschen (0.014 waagerecht zu 0.75 senkrecht) für die
      dezente horizontale Bürstung.
   Beide sind über stitchTiles nahtlos in einer 500-px-Kachel: bei 500 px
   ergeben alle drei Frequenzen ganzzahlige Wellenzahlen (0.9 -> 450,
   0.014 -> 7, 0.75 -> 375), sodass an den Kachelgrenzen nichts
   gerundet werden muss.
   Bewusst nichts weiter: keine Gradienten, keine niederfrequente
   Grobstruktur, kein Bild, keine Vignette, kein Glow. Jede großflächige
   Variation würde als Flecken oder Ellipsen sichtbar werden.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: var(--brushed-texture);
  background-size: 500px 500px;
}

/* --------------------------------------------------------------------------
   Typography
   Fließende Größen über clamp(): der Mittelwert wächst mit der Viewport-
   Breite, Minimum und Maximum begrenzen ihn nach unten und oben.
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* ca. 38 px mobil bis 58 px auf großen Bildschirmen */
h1 {
  font-size: clamp(2.375rem, 1.86rem + 2.2vw, 3.625rem);
  line-height: 1.1;
}

/* ca. 30 px mobil bis 40 px auf großen Bildschirmen */
h2 {
  font-size: clamp(1.875rem, 1.62rem + 1.1vw, 2.5rem);
  line-height: 1.2;
}

/* ca. 22 px mobil bis 28 px auf großen Bildschirmen */
h3 {
  font-size: clamp(1.375rem, 1.22rem + 0.66vw, 1.75rem);
  line-height: 1.3;
}

/* ca. 17 px mobil bis 18 px auf großen Bildschirmen */
p {
  font-size: clamp(1.0625rem, 1.04rem + 0.11vw, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* Zentrierter Inhaltsbereich mit fließenden Seitenabständen. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Bleibt für Screenreader lesbar, ist visuell aber nicht vorhanden.
   Bewusst kein display: none, das würde den Text auch für Screenreader
   entfernen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* Sticky Kopfbereich; liegt über allen Sektionsinhalten. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-surface);
  background-image: var(--brushed-texture);
  background-size: 500px 500px;
}

/* Drei Spalten. Die beiden Außenspalten sind minmax(0, 1fr) und damit immer
   exakt gleich breit – unabhängig davon, wie viel Text in ihnen steht.
   Die mittlere auto-Spalte liegt dadurch geometrisch in der Mitte.
   minmax(0, 1fr) statt 1fr, weil 1fr sonst auf die Mindestbreite seines
   Inhalts aufgeht und die Mitte verschieben würde. */
.site-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: var(--nav-height);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Beide Gruppen rücken an das Logo heran: die linke endet an der Mitte,
   die rechte beginnt dort. Die Spaltenbreiten bleiben davon unberührt,
   die Logo-Mitte verschiebt sich also nicht. */
.nav-group--left {
  justify-content: flex-end;
}

.nav-group--right {
  justify-content: flex-start;
}

.nav-link {
  display: inline-block;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease;
}

/* Minimale Vergrößerung beim Hover – keine Fläche, keine Farbe, kein Strich.
   Nur für Geräte mit echtem Hover und präzisem Zeiger, damit der Zustand auf
   Touch-Geräten nach einem Tap nicht stehen bleibt. */
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover {
    transform: scale(1.06);
  }
}

/* Vorläufiger Logo-Platzhalter: etwas größer und fetter, ohne Hover-Effekt. */
.nav-logo {
  color: var(--color-text);
  font-size: 1.375rem;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

/* Sprungziele so weit nach unten versetzen, dass die Überschrift nicht
   hinter der Sticky-Navigation landet. */
.section {
  scroll-margin-top: var(--nav-height);
}

/* Unter 1180 px wird die Navigation nicht weiter zusammengedrückt, sondern
   zu einer einzeiligen, horizontal scrollbaren Leiste. Das Grid entfällt,
   die HTML-Reihenfolge (linke Gruppe, Logo, rechte Gruppe) bleibt erhalten. */
@media (max-width: 1180px) {
  .site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    justify-content: safe center;
    gap: 0.875rem;
    max-width: none;
    padding-inline: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    /* Scrollbar ausblenden, Scrollfunktion bleibt vollständig erhalten. */
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-group {
    flex: 0 0 auto;
    gap: 1rem;
  }

  .nav-logo {
    flex: 0 0 auto;
    font-size: 1.125rem;
  }

  .nav-link {
    font-size: 0.9375rem;
    /* Größere Trefferfläche für den Finger, ohne sichtbare Fläche und ohne
       die Headerhöhe von 76 px zu verändern. */
    padding-block: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

/* Einheitlicher vertikaler Rhythmus: ca. 34 px mobil, ca. 50 px auf Desktop –
   oberhalb und unterhalb des Inhalts, die Kerbenlinie liegt dazwischen. */
.section {
  position: relative;
  padding-block: var(--section-space);
}

/* Sektionsüberschriften – der Hero ist ausgenommen. */
.section:not(#hero) h2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

/* Kerbenlinie am oberen Rand jeder Section außer dem Hero. Die 3 px erzeugen
   die Tiefe: dunkle obere Kante, dunkelster Kern in der Mitte, darunter eine
   sehr feine helle Unterkante als Lichtbruch.
   Breite und Lage folgen dem Container. */
.section:not(#hero)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--container-padding) - var(--container-padding));
  max-width: calc(
    var(--container-max) - var(--container-padding) - var(--container-padding)
  );
  height: 3px;
  background-image: linear-gradient(
    to bottom,
    rgba(20, 20, 19, 0.55) 0px,
    rgba(20, 20, 19, 0.55) 1px,
    rgba(20, 20, 19, 0.85) 1px,
    rgba(20, 20, 19, 0.85) 2px,
    rgba(241, 236, 227, 0.16) 2px,
    rgba(241, 236, 227, 0.16) 3px
  );
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

#hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Das Logo steht frei auf dem gebürsteten Hintergrund – keine Box, kein
   Schatten. height: auto hält das Original-Seitenverhältnis, max-width
   fängt sehr schmale Geräte ab. */
.hero-logo {
  width: clamp(290px, 42vw, 640px);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.hero-claim {
  margin-top: 1rem;
  font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* Button-Gruppe: nebeneinander, mittig, bricht bei wenig Platz um. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Wiederverwendbarer Button.
   position + z-index: 0 machen den Button zum eigenen Stacking-Kontext.
   Dadurch liegt die Füllung (::before, z-index: -1) über der Grundfläche,
   aber unter dem Text – ganz ohne zusätzliches Markup um die Beschriftung. */
.btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding-inline: 1.75rem;
  border: 2px solid var(--color-accent);
  border-radius: 5px;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

/* Weinrote Füllung: liegt deckungsgleich über der Fläche und wird aus der
   Mitte heraus aufgezogen. scaleX statt width, weil die Transformation auf
   der Compositor-Ebene läuft und bei Browser-Zoom keine Subpixel-Kante
   stehen lässt; inset: -1px schließt zusätzlich die Innenkante des Rahmens. */
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms ease;
}

.btn:hover::before {
  transform: scaleX(1);
}

/* Tastaturfokus – nutzt die vorhandene Textfarbe, keine neue Markenfarbe. */
.btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}