/* ================================================================
   Zeltwerk – Landing Page
   Mobile-first, reines CSS (kein Framework).
   Aufbau:
     1. Schrift (@font-face: Inter, lokal gehostet)
     2. Design-Tokens (Variablen)
     3. Reset / Basis
     4. Typografie (eine Schrift: Inter, Hierarchie über Größe + Gewicht)
     5. Layout-Helfer (Inhalts-Sektionen als weiße Karten)
     6. Komponenten (Header, Hero, Galerie, Button, Kontakt, Footer)
     7. Responsive (Breakpoints für größere Screens)
   ================================================================ */

/* ----------------------------------------------------------------
   1. SCHRIFT – Inter, lokal aus assets/fonts/ (kein externer Request)
   Variable Font: ein @font-face deckt den ganzen Gewichtsbereich ab.
   ---------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;            /* Variable Font: voller Gewichtsbereich */
  font-display: swap;
  src: url("assets/fonts/Inter-latin.woff2") format("woff2"),
       url("assets/fonts/Inter-latin-ext.woff2") format("woff2");
}

/* ----------------------------------------------------------------
   2. DESIGN-TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Farben */
  --color-bg: #f6f7f9;             /* Off-White – Seitenhintergrund */
  --color-surface: #ffffff;        /* echtes Weiß – Inhalts-Karten */
  --color-text: #111111;           /* nahezu schwarz – Fließtext/Headlines */
  --ink: #0a0a0a;                  /* Schwarz – Text direkt auf dem Grau */
  --color-muted: #555c66;          /* gedämpfter Text (optional) */
  --color-border: #e2e4e8;         /* feine Borders + Header-/Footer-Linie */
  --color-accent: #0066ff;         /* Electric Blue – nur als Akzent */
  --color-placeholder: #e6e8ec;    /* Grau für Bild-Platzhalter */
  --color-placeholder-text: #98a0ad;

  /* Schrift – eine einzige Familie für die ganze Seite */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Maße */
  --max-width: 1100px;             /* maximale Inhaltsbreite */
  --space: 1.5rem;                 /* Basis-Abstand (auch Seiten-Gutter) */
  --space-card: 2.5rem;            /* Innenabstand der Karten */
  --space-section: 4.5rem;         /* vertikaler Abstand zwischen Sektionen */
  --radius: 12px;                  /* sanfte Rundung der Karten */
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
            0 4px 12px rgba(16, 24, 40, 0.05); /* dezenter Schatten */
}

/* ----------------------------------------------------------------
   3. RESET / BASIS
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;                /* Fließtext in Inter Regular */
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-accent); /* Links als Akzentfarbe */
}

/* ----------------------------------------------------------------
   4. TYPOGRAFIE – eine Schrift, Hierarchie über Größe + Gewicht
   ---------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font);
  line-height: 1.15;
  margin-top: 0;
  letter-spacing: -0.02em;
}

h1 { font-size: 2.5rem;  font-weight: 800; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

p {
  margin: 0 0 1rem;
}
p:last-child {
  margin-bottom: 0;
}

/* Lead-Absatz (Einleitung) – größer, schwarz, ruhig */
.lead {
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ----------------------------------------------------------------
   5. LAYOUT-HELFER
   width: min(...) sorgt für Seiten-Gutter auf kleinen Screens und
   begrenzt zugleich auf eine zentrierte Content-Breite (kein full-bleed).
   --space-section gibt allen Sektionen denselben vertikalen Abstand.
   ---------------------------------------------------------------- */

/* Zentrierte Inhaltsbreite (kein full-bleed) – auf dem grauen Grund. */
.section,
.intro,
.gallery {
  width: min(var(--max-width), 100% - 2 * var(--space));
  margin: var(--space-section) auto;
}

/* Card-Optik: weiß, feine Border, Radius, dezenter Schatten.
   .section = rechtliche Unterseiten; .card = CTA + Visitenkarte. */
.section,
.card {
  padding: var(--space-card) var(--space);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ----------------------------------------------------------------
   6. KOMPONENTEN
   ---------------------------------------------------------------- */

/* 6.1 Header – Logo + Wortmarke linksbündig ---------------------
   Volle Breite, damit die untere Trennlinie durchgehend ist.
   Seitenabstand über das übliche Padding (var(--space)).         */
.header {
  display: flex;
  justify-content: flex-start;   /* linksbündig am linken Rand */
  padding: var(--space);
  border-bottom: 1px solid var(--color-border); /* durchgezogene 1px-Linie */
}

.brand {
  display: flex;
  align-items: center;           /* Logo + Wortmarke vertikal mittig */
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-text);      /* Wortmarke schwarz, nicht als Akzent */
}

.brand__logo {
  height: 88px;
  width: auto;
}

.brand__name {
  font-family: var(--font);
  font-weight: 800;              /* Wortmarke kräftig */
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* 6.2 Hero – eingerahmtes Bild ----------------------------------
   Nicht mehr full-bleed: kleiner und horizontal zentriert, mit
   Seitenabstand. Das Bild behält sein natürliches Seitenverhältnis
   (kein Beschnitt) – nur verkleinert. Abgerundete Ecken wie die Cards,
   Abstand oben (Header) und unten (Text).                            */
.hero {
  width: min(720px, 100% - 2 * var(--space));  /* kleinerer, zentrierter Rahmen */
  margin: var(--space) auto var(--space-section);
}

.hero__img {
  width: 100%;
  height: auto;                  /* volle Höhe, kein Beschnitt */
  border-radius: var(--radius);  /* abgerundete Ecken wie die Cards */
  display: block;
}

/* 6.3 Einleitung – zentrierter Text auf dem grauen Hintergrund --- */
.intro {
  text-align: center;
}

.intro .lead {
  max-width: 46rem;              /* angenehme Lesebreite */
  margin-inline: auto;
}

/* 6.4 Galerie – mobil gestapelt, ab Tablet nebeneinander --------- */
.gallery {
  display: grid;
  grid-template-columns: 1fr;    /* mobile-first: eine Spalte = untereinander */
  gap: var(--space);
}

.gallery__item {
  /* grauer Platzhalter mit zentriertem Label "Bild" */
  background-color: var(--color-placeholder);
  color: var(--color-placeholder-text);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.1rem;
}

/* 6.5 Konfigurator – eigene, abgegrenzte Zone -------------------
   Full-bleed: die Sektion spannt von Kante zu Kante und hebt sich
   durch den hellblauen Hintergrund vom grauen Seitengrund ab.
   Oberer Abschluss schräg (Pultdach-Neigung wie im Logo: hoch links,
   fallend nach rechts). Großzügiges vertikales Padding gibt Luft.

   --cta-slope = Höhenversatz der Schräge. In vw -> konstanter Winkel
   über alle Breiten (mobile-responsive). Cap, damit es auf sehr breiten
   Screens nicht zu hoch wird.                                        */
.cta {
  --cta-slope: min(70px, 7vw);
  position: relative;
  width: 100%;
  padding-block: calc(var(--space-section) * 1.25);
}

/* Blaue Fläche als gleichmäßig schräges Band: obere UND untere Kante
   parallel (gleicher Winkel + Richtung, hoch links -> fallend rechts).
   Liegt in ::before (nicht auf der Sektion selbst), damit die Trennlinien
   als Kinder NICHT vom clip-path beschnitten werden. Über/unter den
   Schrägen scheint der graue Seitengrund durch. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #dce7ff;       /* etwas kräftigeres helles Blau */
  clip-path: polygon(
    0 0,
    100% var(--cta-slope),
    100% 100%,
    0 calc(100% - var(--cta-slope))
  );
}

/* Trennlinien exakt auf den Schräg-Kanten – volle Breite, nicht beschnitten.
   Geometrie deckt sich mit dem clip-path: (0,0) -> (100%, --cta-slope). */
.cta__divider {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: var(--cta-slope);
  overflow: visible;               /* halbe Strichstärke an den Ecken zeigen */
}

.cta__divider--top {
  top: 0;
}

/* Untere Schräge: liegt am unteren Rand und deckt sich mit dem clip-path
   (0, 100% - --cta-slope) -> (100%, 100%). */
.cta__divider--bottom {
  bottom: 0;
}

/* Inhalt der Zone: zentriert auf Content-Breite, untereinander.
   Reihenfolge: Überschrift, Hinweissatz, Button. Über der Fläche (z-index). */
.cta__inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-width), 100% - 2 * var(--space));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space);
}

/* Überschrift der Zone – kräftig, etwas größer */
.cta__title {
  margin: 0;
  font-size: 2rem;
}

/* Hinweissatz – schwarze Schrift, zentriert */
.cta__note {
  max-width: 28rem;
  margin: 0;
  color: var(--ink);
}

.button {
  display: inline-block;
  background-color: var(--color-accent);
  color: #ffffff;                /* weiße Schrift */
  text-decoration: none;
  padding: 0.9rem 2rem;
  border-radius: 10px;
  font-family: var(--font);
  font-weight: 700;
  transition: opacity 0.15s ease;
}

.button:hover {
  opacity: 0.9;
}

/* 6.6 Kontakt – Visitenkarte: Kopf (Logo + Wortmarke), Trennlinie,
   darunter die Kontaktzeilen. Begrenzte Breite, horizontal zentriert.
   width: min(...) -> max. 420px, auf Mobile volle Breite mit Seitenrand. */
.contact {
  width: min(420px, 100% - 2 * var(--space));  /* einzelne Card, max. 420px */
  margin: var(--space-section) auto;            /* horizontal zentriert */
  text-align: left;
  color: var(--ink);
}

/* Kopf: Logo + Wortmarke nebeneinander, linksbündig */
.contact__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  /* negative Ränder -> Trennlinie geht über die volle Card-Breite */
  margin: 0 calc(-1 * var(--space)) var(--space);
  padding: 0 var(--space) var(--space);
  border-bottom: 1px solid var(--color-border);
}

.contact__logo {
  height: 46px;
  width: auto;
}

.contact__brand {
  font-family: var(--font);
  font-weight: 800;              /* kräftig wie im Header */
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.contact__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact__list li {
  margin-bottom: 0.5rem;
}

/* Name als Zeile etwas größer + fett, mit etwas Abstand darunter */
.contact__name {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

/* 6.7 Zurück-Button (rechtliche Seiten) -------------------------
   Kleiner, dezenter runder Icon-Button mit Links-Pfeil. Sitzt über der
   Card auf dem grauen Grund; .back-wrap teilt die Card-Breite und ist
   zentriert, sodass der Button linksbündig zur Card-Kante steht.      */
.back-wrap {
  width: min(var(--max-width), 100% - 2 * var(--space));
  margin: var(--space-section) auto var(--space);  /* Abstand nach unten zur Card */
}

/* Die folgende Card braucht keinen eigenen oberen Abstand mehr. */
.back-wrap + .section {
  margin-top: 0;
}

.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;            /* runder Button */
  color: var(--color-text);      /* schwarzes Icon (currentColor) */
  background-color: var(--color-surface);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.back:hover {
  background-color: var(--color-bg);
  border-color: var(--color-placeholder-text);
}

.back__icon {
  display: block;
}

/* 6.8 Footer – volle Breite, obere Trennlinie -------------------- */
.footer {
  padding: var(--space);
  margin-top: var(--space);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

/* ----------------------------------------------------------------
   7. RESPONSIVE – ab 768px (Tablet/Desktop)
   Galerie dreispaltig.
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}