/* =====================================================
   MAGALI UND DER REISER — STYLESHEET v3
   Exakte Figma-Werte (Frame 15, 1440px).
   Alle Größen in vw: px / 1440 × 100
   Body = weiss (#fff). Smoke-Bilder (in Flow) bestimmen
   die Höhe der Dark Zones. Content absolut darüber.
   ===================================================== */

/* === DESIGN-TOKENS (aus Figma) ======================== */
:root {
  /* Figma-Farben */
  --cream:       #ccc0ab;   /* Headings auf dunklem Hintergrund */
  --heading-dk:  #040404;   /* Headings auf weissem Hintergrund */
  --subhead-dk:  #080415;   /* h3 / Links auf weiss */
  --white:       #ffffff;
  --black:       #000000;
  --input-bg:    rgba(4,4,4,0.55);
  --input-bd:    rgba(204,192,171,0.8);

  /* Schriften */
  --font-h: 'Asta Sans', sans-serif;
  --font-b: 'EB Garamond', Georgia, serif;
}

/* === RESET ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { background: #fff; overflow-x: hidden; font-family: var(--font-b); -webkit-font-smoothing: antialiased; }
img   { display: block; max-width: 100%; height: auto; }
a     { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; }

/* === CONTAINER ========================================
   Figma: Inhalt-Breite 1020px bei 1440px Frame.
   Seitenabstand: (1440 - 1020) / 2 = 210px = 14.58vw  */
.container {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 1.5rem; /* Kleiner Puffer auf schmaleren Screens */
}

/* === VIDEO-WRAPPER =====================================
   Figma: 1020 × 574px → 56.27% Seitenverhältnis        */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.27%;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ======================================================
   TYPOGRAFIE — Exakte Figma px → vw
   1px bei 1440px Breite = 0.06944vw
   ====================================================== */

/* ======================================================
   TYPOGRAFIE — clamp(min, vw, max)
   vw-Wert skaliert unter 1440px proportional mit dem Figma-Design.
   max-Wert = Figma-Pixelwert → friert die Grösse bei 1440px+ ein.
   ====================================================== */

/* h2 auf dunklem Hintergrund (Sektion 01)
   Figma: 128px = 8.89vw                                 */
.h2-dark {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(32px, 8.89vw, 128px);
  line-height: 1;
  color: var(--cream);
  text-transform: uppercase;
}

/* Kleinere h2 auf dunkel (Sektionen 02, 05)
   Figma: 96px = 6.67vw                                  */
.section-02 .h2-dark,
.section-05 .h2-dark {
  font-size: clamp(24px, 6.67vw, 96px);
}

/* h2 auf hellem Hintergrund (Sektionen 03, 04)
   Figma: 96px = 6.67vw                                  */
.h2-light {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(24px, 6.67vw, 96px);
  line-height: 1;
  color: var(--heading-dk);
  text-transform: uppercase;
}

/* h3 auf dunkel — Figma: 40px = 2.78vw                  */
.h3-dark {
  font-family: var(--font-h);
  font-weight: 300;
  font-size: clamp(16px, 2.78vw, 40px);
  line-height: 1.3;
  color: var(--cream);
}

/* h3 auf hell                                            */
.h3-light {
  font-family: var(--font-h);
  font-weight: 300;
  font-size: clamp(16px, 2.78vw, 40px);
  line-height: 1.3;
  color: var(--subhead-dk);
}

/* Sektion 02 h3 etwas transparenter (Figma: 80% opacity) */
.section-02 .h3-dark {
  color: rgba(204, 192, 171, 0.8);
}

/* p auf dunkel — Figma: 32px = 2.22vw                   */
.p-dark {
  font-family: var(--font-b);
  font-style: normal;
  font-size: clamp(14px, 2.22vw, 32px);
  line-height: 1.55;
  color: var(--white);
}

/* p auf hell — Figma: 32px = 2.22vw, schwarz            */
.p-light {
  font-family: var(--font-b);
  font-style: normal;
  font-size: clamp(14px, 2.22vw, 32px);
  line-height: 1.55;
  color: var(--black);
}

/* ======================================================
   HERO
   Figma: 1440 × 944px → height bei 1440px ≈ 65.56vw.
   Wir nehmen 100vh für beste UX.
   ====================================================== */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: #0a0a0f;
  z-index: 2; /* Liegt über dem Smoke der von Dark Zone 1 nach oben ragt */
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-video-bg iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: calc(100vw * 0.6545);
  min-height: 100vh;
  min-width: calc(100vh / 0.6545);
  transform: translate(-50%, -50%);
  border: 0;
}
/* Figma: Logo bei x=378, y=232, w=648, h=480
   → left=26.25vw, top=16.11vw, width=45vw            */
.hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.hero-logo img {
  width: clamp(300px, 60vw, 900px);
  height: auto;
  display: block;
}

/* ======================================================
   DARK ZONES — allgemeine Regeln (gelten für Zone 2)
   Smoke 01/02 (Lang) 02.webp: 1920 × 10536px → Ratio 5.4875
   Bei width: 100% ist height: 548.75vw
   ====================================================== */
.dark-zone {
  position: relative;
}

/* Smoke-Bild */
.dark-zone__smoke {
  display: block;
  width: 100%;
  height: auto;
}

/* Zone 2: 180° gedreht (im Bild selbst) — kein CSS-Transform nötig */
.dark-zone__smoke--flip {
  transform: none;
}

/* Content-Overlay: absolut über dem Smoke-Bild (Zone 1) */
.dark-zone__content {
  position: absolute;
  top: 0; left: 0; width: 100%;
}

/* Zone 2: Content im Flow → bestimmt die Höhe. Smoke absolut dahinter.
   overflow: hidden schneidet Smoke am Ende des Contents ab. */
.dark-zone--2 {
  overflow: hidden;
  pointer-events: none; /* Klicks durch den transparenten Smoke-Bereich durchlassen */
}
.dark-zone__content--2 a,
.dark-zone__content--2 button,
.dark-zone__content--2 input,
.dark-zone__content--2 textarea,
.dark-zone__content--2 label {
  pointer-events: auto; /* Nur interaktive Elemente in S05/Footer reaktivieren */
}
.dark-zone--2 .dark-zone__smoke {
  position: absolute;
  top: 0;
  left: 0;
}
.dark-zone__content--2 {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
}

/* ======================================================
   DARK ZONE 1 — Smoke am BODEN verankert
   Problem bisher: Smoke immer 277vw hoch → grosse Lücke
   nach 02-Video bei kleinen Screens.
   Lösung: Content im Flow (bestimmt Höhe), Smoke absolut
   am Boden → wächst nach OBEN, darf hinter Hero verschwinden.
   overflow: visible erlaubt das Rausragen nach oben.
   ====================================================== */
.dark-zone--1 {
  overflow: visible; /* Smoke darf nach oben ins Hero ragen */
}

/* Smoke 01 (Lang) 02: 1920 × 10536px → 548.75vw hoch bei 100vw Breite.
   Extension oben: 3837px dunkel. Fixpunkt 2 neu bei Zeile 9030 = 470.31vw ab Smoke-Oberkante.
   bottom = 548.75 − 470.31 = 78.44vw → Fixpunkt 2 bündig mit DZ1-Unterkante.
   Smoke ragt nach oben hinter das Hero-Video. Auf Mobile: kein Gap dank längerem Bild. */
.dark-zone--1 .dark-zone__smoke {
  position: absolute;
  bottom: -78.44vw;
  left: 0;
  z-index: 0; /* Smoke HINTER dem Content */
}

/* Content: im Flow → bestimmt die Höhe von Dark Zone 1 */
.dark-zone--1 .dark-zone__content {
  position: relative;  /* override: nicht mehr absolute */
  top: auto;
  left: auto;
  width: 100%;
  z-index: 1; /* vor dem Smoke */
}

/* ======================================================
   SEKTION 01 — ITEM
   Figma: h2 bei page-y=1213, zone-start=944 → offset=269px=18.68vw
   ====================================================== */
/* ======================================================
   SEKTION 01 — ITEM
   Figma Frame 15 (1440px):
   h2:  x=209, y=1213 → padding-top 18.68vw vom Zone-Start
   h3:  x=209, y=1392 → direkt unter h2
   p:   x=546, y=1569 → eingerückt: (546-209)/1440*100 = 23.40vw
   img: x=452, y=1915 → unter p, links: (452-209)/1440*100 = 16.88vw
        width=548 → 38.06vw, mix-blend-mode: difference
   ====================================================== */
.section-01 {
  padding-top: clamp(80px, 18.68vw, 269px);
}

.section-01 .h2-dark {
  margin-bottom: 0.3em;
}

.section-01 .h3-dark {
  margin-bottom: 1em;
}

/* p ist in Figma nach rechts eingerückt.
   Figma: p.x=546, Container-Content-Start=233 → 313px → 313/972 ≈ 32%
   % ist relativ zur Container-Content-Breite (972px) → skaliert NICHT mit Viewport */
.section-01 .p-dark {
  padding-left: 32%;
}

/* Bild kommt UNTER dem Text, leicht nach innen versetzt.
   Figma: img.x=452 → von Container-Content: 219px → 219/972 ≈ 22.5% */
.s01-image {
  margin-left: 22.5%;
  margin-top: clamp(16px, 3vw, 43px);
}
.s01-image img {
  width: clamp(120px, 38.06vw, 548px);
  mix-blend-mode: difference;
}

/* ======================================================
   SEKTION 02 — MEHR ZUM PROJEKT
   Figma: Einzelne Spalte. h2 → h3 → Video gestapelt.
   h2 bei page-y=2741, zone-start=944 → offset=1797px=124.79vw
   ====================================================== */
.section-02 {
  padding-top: clamp(20px, 4.17vw, 60px);
  padding-bottom: clamp(30px, 5vw, 72px);
}

.section-02 .h2-dark {
  margin-bottom: 0.5em;
}
.section-02 .h3-dark {
  max-width: 750px;
  margin-bottom: clamp(16px, 2.78vw, 40px);
}

/* ======================================================
   SEKTION 03 — MERCH WITH LOVE (weisse Zone)
   Figma: Einzelne Spalte.
   Reihenfolge: h2 → h3 → Video → p (rechts-eingerückt) → Button → Bilder
   Figma-Positionen:
     h2 at x=209 (linker Rand)
     Video at x=209, width=1020px
     p at x=534 → Einrückung vom Content-Rand: (534-209)/1440*100 = 22.57vw
   ====================================================== */
.section-03 {
  background: #ffffff;
  /* Figma: 03<h2> bei y=4413, DZ1-Start y=944 → 3469px vom DZ1-Start.
     S02-Video-Ende y≈3815, S02-padding-bottom≈60px → S03 padding-top ≈ 538px = 37.36vw */
  padding-top: max(110px, calc(37.36vw + 50px));   /* Desktop: 588px bei 1440px */
  padding-bottom: 5vw;
}

.section-03 .h2-light {
  margin-bottom: 0.5em;
}
.section-03 .h3-light {
  margin-bottom: clamp(12px, 2.08vw, 30px);
  font-style: italic;
}

.s03-video {
  margin-bottom: clamp(20px, 3.75vw, 54px);
}

/* p und Button: rechts eingerückt.
   Figma: x=534, Container-Content-Start=233 → 301px → 301/972 ≈ 31% */
.s03-text {
  padding-left: 31%;
  margin-bottom: clamp(20px, 4.17vw, 60px);
}
.s03-text .p-light {
  margin-bottom: clamp(12px, 2.08vw, 30px);
}

/* Button "zum Webshop" */
.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: clamp(6px, 0.69vw, 10px) clamp(10px, 1.39vw, 20px);
  background: rgba(204, 192, 171, 0.2);
  border: 2px solid var(--cream);
  border-radius: clamp(3px, 0.35vw, 5px);
  font-family: var(--font-h);
  font-weight: 400;
  font-size: clamp(14px, 2.22vw, 32px);
  color: var(--subhead-dk);
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover {
  background: rgba(204, 192, 171, 0.5);
}

/* Postkarten
   Figma: je ~406-407px × 565px, border #080415 0.5px */
.merch-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.67vw;  /* ca. 24px */
}
.merch-images img {
  width: 100%;
  height: auto;
  border: 0.5px solid var(--subhead-dk);
}

/* ======================================================
   SEKTION 04 — WERDE FAN
   Befindet sich am Anfang von Dark Zone 2.
   Die transparente Bergspitze (flipped smoke) = weisser Bereich.
   h2 und h3 in dunkler Farbe (#040404 / #080415).
   ====================================================== */
.section-04 {
  padding-top: 2vw;
  padding-bottom: clamp(16px, 2.78vw, 40px);
}

/* DZ2 hochziehen damit Smoke 02 hinter Section 04 beginnt */
.dark-zone--2 {
  margin-top: -40vw;
}

.section-04 .h2-light {
  margin-bottom: 0.5em;
}
.section-04 .h3-light {
  margin-bottom: 1em;
}
.section-04 .p-light {
  padding-left: 31%;
  max-width: 844px;
  margin-bottom: clamp(20px, 4.17vw, 60px);
}

/* Social Links — Figma: vertikale Buttons mit Linie + Punkt
   Figma-Positionen:
     Instagram:  x=474, y_zone=476px
     Youtube:    x=769, y_zone=425px
     Newsletter: x=1156, y_zone=425px
   Buttons: -rotate-90, border 2px #ccc0ab (Instagram/Newsletter)
             border rgba(204,192,171,0.8) (Youtube)
   Text: Asta Sans Regular 36px = 2.5vw, Farbe #080415   */
.social-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* Buttons rücken zusammen wenn kein Platz */
  gap: clamp(8px, 1.11vw, 16px);
}

.social-item {
  display: flex;
}

/* Horizontale Buttons — 90° im Uhrzeigersinn gedreht */
.social-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  writing-mode: horizontal-tb;
  transform: none;
  padding: clamp(6px, 0.69vw, 10px) clamp(10px, 1.39vw, 20px);
  border: 2px solid var(--cream);
  border-radius: clamp(3px, 0.35vw, 5px);
  font-family: var(--font-h);
  font-weight: 400;
  font-size: clamp(14px, 2.5vw, 36px);
  color: var(--subhead-dk);
  white-space: nowrap;
  cursor: pointer;
  background: rgba(204, 192, 171, 0.2);
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.social-label:hover {
  background: rgba(204, 192, 171, 0.5);
}

/* Youtube: leicht transparentere Border (Figma)         */
.social-item:nth-child(2) .social-label {
  border-color: rgba(204, 192, 171, 0.8);
}

/* ======================================================
   SEKTION 05 — KONTAKT
   Figma: h2 bei page-y=8178, zone2-start=7050
   Offset = (8178-7050)/1440*100 = 78.33vw von Zone-Start
   Aktuelle Struktur (normal flow): padding-top kumuliert von S04.
   S04 endet ca. bei zone-y = 4+4.17+22+4.17 ≈ 30vw → wir brauchen ~48vw Gap
   ====================================================== */
.section-05 {
  padding-top: 60vw;
  padding-bottom: 5vw;
}

/* S05 Text-Block links                                   */
.s05-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5.56vw, 80px);
  max-width: 1200px;
  align-items: start;
}

.s05-text .h2-dark {
  margin-bottom: 0.5em;
}
.s05-text .h3-dark {
  max-width: 52.08vw;  /* 750px / 1440 */
  margin-bottom: 1em;
}
.s05-text .p-dark {
  font-size: clamp(14px, 2.22vw, 32px);
}

/* Formular — Figma: Inputs mit dark semi-transparentem Bg,
   abgerundete Ecken, border rgba(204,192,171,0.8)
   Figma: input height 38px = 2.64vw, border-radius 5px    */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.08vw, 30px);
  margin-bottom: 0;
}

.form-group {
  margin-bottom: clamp(16px, 1.94vw, 28px);
}

.form-group label {
  display: block;
  font-family: var(--font-b);
  font-style: normal;
  font-size: clamp(14px, 1.39vw, 20px);
  color: var(--white);
  margin-bottom: 0.35vw;
}

.form-group input[type="text"],
.form-group input[type="email"] {
  width: 100%;
  height: clamp(38px, 2.64vw, 50px);
  background: var(--input-bg);
  border: 0.5px solid var(--input-bd);
  border-radius: 0.35vw; /* 5px */
  color: var(--white);
  font-family: var(--font-b);
  font-size: 1.39vw;
  padding: 0 0.69vw;
  outline: none;
  transition: border-color 0.2s;
}

.form-group textarea {
  width: 100%;
  height: 18.68vw;   /* 269px / 1440 */
  background: rgba(4,4,4,0.6);
  border: 0.5px solid var(--input-bd);
  border-radius: 0.35vw;
  color: var(--white);
  font-family: var(--font-b);
  font-size: 1.39vw;
  padding: 0.69vw;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--cream);
}

/* Checkbox + Label                                       */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.97vw, 14px);
  margin-bottom: clamp(16px, 1.67vw, 24px);
}

.form-checkbox input[type="checkbox"] {
  width: clamp(12px, 0.97vw, 14px);
  height: clamp(12px, 0.97vw, 14px);
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--input-bd);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.form-checkbox input:checked {
  background: var(--cream);
  border-color: var(--cream);
}

.form-checkbox label {
  margin: 0;
  color: var(--white);
  font-family: var(--font-b);
  font-size: clamp(14px, 1.39vw, 20px); /* gleich wie andere Form-Labels */
}

/* Button "Senden"
   Figma: border 2px #ccc0ab, rounded 5px, text white, 32px Asta Sans */
.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 0.69vw, 10px) clamp(10px, 1.39vw, 20px);
  border: 2px solid var(--cream);
  border-radius: clamp(3px, 0.35vw, 5px);
  font-family: var(--font-h);
  font-weight: 400;
  font-size: clamp(14px, 2.22vw, 36px); /* max = gleich wie Social-Buttons */
  color: var(--white);
  background: rgba(204, 192, 171, 0.1);
  cursor: pointer;
  transition: background 0.2s;
}
.btn-send:hover {
  background: rgba(204, 192, 171, 0.3);
}

.form-status {
  margin-top: 1rem;
  font-family: var(--font-h);
  font-size: 1rem;
  min-height: 1.4em;
}
.form-status.success { color: #7ecb8f; }
.form-status.error   { color: #e07070; }

/* ======================================================
   FOOTER
   Figma: Linie bei y=9574 (page), Copyright bei y=9630
   Linie: x=312 bis x=1139 (827px), border-top
   Copyright: EB Garamond 24px = 1.67vw, weiss, zentriert */
.footer {
  padding-top: 5vw;
  padding-bottom: 150px;
}

.footer-line {
  border: none;
  border-top: 1px solid rgba(204, 192, 171, 0.4);
  margin-bottom: 2.08vw;  /* 30px */
  /* Figma: Linie von x=312 bis x=1139 → aber wir lassen Container das steuern */
}

.footer-copyright {
  font-family: var(--font-b);
  font-style: normal;
  font-size: 1.67vw;   /* 24px / 1440 */
  color: var(--white);
  text-align: center;
}

/* ======================================================
   NEWSLETTER MODAL
   Figma: Frame 750 × 504px, dunkler Hintergrund
   Modal-Overlay: halbtransparent
   ====================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem; /* Mindestabstand zum Bildschirmrand */
}
.modal[hidden] { display: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.modal-content {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: clamp(2rem, 3.47vw, 50px);  /* 50px / 1440 */
  width: min(750px, calc(100vw - 3rem)); /* max 750px, 1.5rem Rand links+rechts */
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 2.8rem;
  color: rgba(0, 0, 0, 0.4);
  line-height: 1;
  transition: color 0.2s;
}
.modal-close:hover { color: #000000; }

/* Modal h2 */
.modal-heading {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(2rem, 6.67vw, 96px);
  color: #000000;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* Modal Form */
.modal-content .form-group label {
  color: #000000;
  font-family: var(--font-h);
  font-size: clamp(0.8rem, 1.39vw, 20px);
}
.modal-content .form-group input {
  background: #ffffff;
  border-color: #000000;
  color: #000000;
}
.modal-content .form-group input:focus {
  border-color: #000000;
  outline: none;
}

.btn-newsletter-submit {
  width: 100%;
  padding: clamp(6px, 0.69vw, 10px) clamp(10px, 1.39vw, 20px);
  min-height: clamp(38px, 2.64vw, 50px);
  border: 2px solid var(--cream);
  border-radius: clamp(3px, 0.35vw, 5px);
  color: var(--subhead-dk);
  background: rgba(204, 192, 171, 0.2);
  font-family: var(--font-h);
  font-weight: 400;
  font-size: clamp(14px, 2.5vw, 36px);
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.2s;
}
.btn-newsletter-submit:hover {
  background: rgba(204, 192, 171, 0.5);
}

/* ======================================================
   RESPONSIVE — WIDE (breiter als 1440px)
   S05: Form unter Text statt nebeneinander
   ====================================================== */
@media (min-width: 1441px) {
  .s05-layout {
    grid-template-columns: 1fr;
    max-width: 720px; /* Formular nicht übermässig breit */
  }
  .modal {
    padding: 14rem; /* mehr Abstand zum Rand ab 1441px */
  }
}

@media (min-width: 1921px) {
  .section-04 {
    padding-top: 0;
  }
  /* section-05 padding-top wird von base 70vw gesteuert — kein Override nötig */
}

/* ======================================================
   RESPONSIVE — MOBILE (768px und kleiner)
   ====================================================== */
@media (max-width: 1200px) {
  /* Alle vw-Werte werden kleiner mit dem Viewport,
     aber wir können hier Grenzwerte setzen             */
}

@media (max-width: 768px) {
  /* Hero — Figma: 390×256px */
  .hero-section { height: 256px; }
  .hero-logo img { width: 90vw; max-width: 460px; }

  /* Container — Figma: 20px Rand */
  .container { padding: 0 20px; }

  /* Typografie — Figma-Werte */
  .h2-dark                              { font-size: 64px; }  /* S01: ITEM, */
  .section-02 .h2-dark,
  .section-05 .h2-dark,
  .h2-light                             { font-size: 48px; }  /* S02-05 */
  .h3-dark, .h3-light                   { font-size: 24px; }
  .p-dark, .p-light                     { font-size: 16px; }

  /* Sektion 01 — Figma: padding-top 50px, kein p-Einzug, Bild zentriert */
  .section-01                           { padding-top: 50px; }
  .section-01 .p-dark                   { padding-left: 0; }
  .s01-image                            { margin-left: 0; text-align: center; }
  .s01-image img                        { width: 70%; max-width: 273px; margin: 0 auto; }

  /* Sektion 03 — Merch weiter unten, mehr Weissraum */
  .section-03                           { padding-top: 250px; padding-bottom: 120px; }
  .s03-text                             { padding-left: 0; margin-bottom: 48px; }
  .merch-images                         { gap: 8px; }

  /* Sektion 04 — kein p-Einzug, mehr Abstand unten → S05 tiefer im Dunklen */
  .section-04                           { padding-bottom: 160px; }
  .dark-zone--2                         { margin-top: -60vw; }
  .section-04 .p-light                  { padding-left: 0; max-width: 100%; }

  /* Social Links — mobil: vertikal, linksbündig */
  .social-links                         { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .social-label                         { font-size: 20px; padding: 6px 12px; }

  /* Buttons S03 + S05 gleich gross wie S04-Buttons */
  .btn-outline, .btn-send               { font-size: 20px; padding: 6px 12px; }

  /* S05 Checkbox — Grösse + Label-Schrift angleichen */
  .form-checkbox                        { gap: 10px; margin-bottom: 1rem; }
  .form-checkbox input[type="checkbox"] { width: 18px; height: 18px; }
  .form-checkbox label                  { font-size: 14px; }

  /* Sektion 05 — padding-top mobil, Form untereinander */
  .section-05                           { padding-top: 70vw; }
  .s05-layout                           { grid-template-columns: 1fr; gap: 2rem; }
  .form-row                             { grid-template-columns: 1fr; gap: 0; }
  .s05-text .h3-dark                    { max-width: 100%; }

  /* Footer — Figma: 14px, zentriert */
  .footer                               { padding-bottom: 80px; }
  .footer-copyright                     { font-size: 14px; text-align: center; }

  /* Modal */
  .modal                                { padding: 1.5rem; }
  .modal-content                        { padding: 1.5rem; }
  .modal-heading                        { font-size: 2rem; }
  .btn-newsletter-submit                { font-size: 20px; }
}

/* === SCREEN READER ONLY (SEO H1, versteckt) =========== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* === UTILITIES ======================================== */
:focus-visible {
  outline: 2px solid rgba(204, 192, 171, 0.7);
  outline-offset: 3px;
}
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: rgba(204,192,171,0.25); border-radius: 3px; }