/* ============================================================
   augenrucksack.de — Ex Luce et Fumo
   Hand-written, build-free, mobile-first.
   ============================================================ */

:root {
  --bg: #050507;
  --bg-2: #0c0c10;
  --bg-3: #14141a;
  --line: #1e1e26;
  --text: #e8e8ea;
  --text-muted: #7a7a82;
  --text-faint: #4a4a52;

  --accent: #d4a373;
  --accent-2: #c08552;

  --v0: #4d6a8a;
  --v2: #6a9c3e;
  --v3: #c89243;
  --v4: #d4a373;
  --v5: #b9a98c;
  --v6: #6498b3;
  --v8: #5e6955;

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}
a:hover { opacity: 0.75; }

button {
  font-family: inherit;
  cursor: pointer;
}

::selection { background: var(--accent); color: var(--bg); }

img[loading="lazy"] { background: var(--bg-2); }

/* Type system */
h1 { font-family: 'Fraunces', 'Times New Roman', serif; font-weight: 600; letter-spacing: -0.04em; line-height: 0.92; }
h2 { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -0.025em; line-height: 1; }
h3 { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Layout helpers */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   HERO — Logo dominant. Blurred V8 as background atmosphere.
   H1 ("Augenrucksäcke") in markup for SEO, visually hidden.
   ============================================================ */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 6vh, 5rem) var(--gutter);
  position: relative;
  overflow: hidden;
}

/* Blurred oversized V8 as atmospheric background.
   Becomes a soft colored glow without revealing the subject. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px) brightness(0.5) saturate(1.5);
  opacity: 0.75;
  transform: scale(1.12); /* hide blurred edges */
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Linear gradient that's fully opaque at the bottom edge.
     Hides any visible V8 image edge line once scrolling starts.
     Stays transparent on top so the glow remains prominent under the logo. */
  background:
    linear-gradient(to bottom,
      rgba(5, 5, 7, 0) 0%,
      rgba(5, 5, 7, 0) 45%,
      rgba(5, 5, 7, 0.4) 75%,
      rgba(5, 5, 7, 1) 100%),
    radial-gradient(ellipse 110% 90% at 50% 25%,
      rgba(5, 5, 7, 0) 35%,
      rgba(5, 5, 7, 0.4) 75%,
      rgba(5, 5, 7, 0.85) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  max-width: 800px;
}

.hero__logo {
  display: block;
  width: clamp(380px, 55vw, 920px);
  height: auto;
  /* SVG is transparent BG now (black rect removed). Just the drop-shadows. */
  filter: drop-shadow(0 0 100px rgba(212, 163, 115, 0.32))
          drop-shadow(0 12px 48px rgba(0, 0, 0, 0.55));
  margin-bottom: 1rem;
}

/* H1 — visible keyword "Augenrucksack" in small caps.
   Same font / color / size as the motto below it, so the two read as a
   coherent two-liner. The first capital A stays at cap-height, the rest
   is rendered as small caps (Kapitälchen) for a classical look. */
.hero__brand {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  color: var(--accent);
  letter-spacing: 0.08em;
  font-variant: small-caps;
  margin: 0;
}

.hero__motto {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0;
}

.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--text-faint);
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}
.hero__scroll-cue::after {
  content: "";
  width: 1px;
  height: 2rem;
  background: linear-gradient(to bottom, var(--text-faint), transparent);
}

/* ============================================================
   PROLOG
   ============================================================ */

.prolog {
  text-align: center;
  padding-block: clamp(8rem, 20vh, 18rem);
}
.prolog__quote {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(1.625rem, 4.5vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto;
  color: var(--text);
}
.prolog__quote em {
  color: var(--accent);
  font-style: italic;
}
.prolog__meta {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   V sections
   ============================================================ */

.v {
  padding-block: clamp(7rem, 18vh, 14rem);
  position: relative;
}

.v__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

@media (min-width: 880px) {
  .v__grid {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(3rem, 8vw, 7rem);
  }
  .v--reverse .v__grid { grid-template-columns: 1fr 1.05fr; }
  .v--reverse .v__media { order: 2; }
  .v--reverse .v__text  { order: 1; }
}

.v__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.v__media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* Old CSS-veil placeholder — superseded by the real veiled photo in
     .v__media--christo. Kept only so non-Christo .v__media (none right now)
     would still get a CSS-only fallback. No-op on all current sections. */
  opacity: 0;
}

/* Christo-style veil: a draped white cloth over the image until revealed.
   ::after is the veil, sitting above the image but below interactive layers. */
.v__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(165deg,
      rgba(245, 240, 230, 0.85) 0%,
      rgba(245, 240, 230, 0.55) 50%,
      rgba(245, 240, 230, 0.92) 100%);
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.v__media.is-revealed::after {
  opacity: 0;
}

.v__media img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 28px var(--tint)) blur(2px);
  transform: scale(1.06);
  transition:
    filter 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.v__media.is-revealed img {
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 28px var(--tint));
  transform: scale(1.0);
}

/* V4 only — Christo mode.
   The veil is a real photograph, not a CSS overlay. The two images
   are stacked and crossfade as the section enters/leaves the viewport.
   The CSS ::after veil and the img blur/scale transition are suppressed. */
.v__media--christo {
  aspect-ratio: 3 / 4;
  display: block;
}
.v__media--christo::after { display: none; }

.v__media--christo .v__media-veil,
.v__media--christo .v__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  transform: none;
  border-radius: 8px;
  /* Only the depth shadow stays on the image — the colored tint glow lives
     on .v__halo below, where we can control spread and blur separately. */
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.65));
  /* Short linear transition smooths the gap between JS frames so the
     scroll-driven reveal feels continuous, not stepped. */
  transition: opacity 0.15s linear;
  will-change: opacity;
}
/* Opacities driven by the scroll-position --reveal (0..1) set by JS.
   veil = 1 - reveal, img = reveal. Default 0 (fully veiled) until JS runs. */
.v__media--christo .v__media-veil { opacity: calc(1 - var(--reveal, 0)); }
.v__media--christo .v__media-img  { opacity: var(--reveal, 0); }

/* Halo — the colored tint glow that intensifies when a V is revealed.
   Box-shadow with constant blur; opacity driven by --reveal so the halo
   fades smoothly with the veil between 0.4 (veiled) and 0.7 (revealed). */
.v__media--christo .v__halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: 8px;
  box-shadow: 0 0 10px 1px var(--tint);                       /* default: thin 1px glow */
  opacity: calc(0.4 + 0.3 * var(--reveal, 0));               /* 0.4 → 0.7 */
  transition:
    box-shadow 0.3s linear,
    opacity 0.15s linear;
}
.v__media--christo.is-revealed .v__halo {
  /* Revealed-state spread — kept as snap fallback if --reveal is missing. */
  box-shadow: 0 0 10px 6px var(--tint);
  opacity: 0.7;
}

.v--v0 { --tint: var(--v0); }
.v--v2 { --tint: var(--v2); }
.v--v3 { --tint: var(--v3); }
.v--v4 { --tint: var(--v4); }
.v--v5 { --tint: var(--v5); }
.v--v6 { --tint: var(--v6); }
.v--v8 { --tint: var(--v8); }

/* Reduced motion: disable transitions; opacities follow --reveal as set by JS. */
@media (prefers-reduced-motion: reduce) {
  .v__media::before,
  .v__media::after,
  .v__media img,
  .v__media--christo .v__halo {
    transition: none !important;
  }
  .v__media::after { opacity: 0; }
  .v__media img {
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.65));
    transform: none;
  }
}

.v__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  letter-spacing: 0.32em;
  color: var(--tint, var(--text-muted));
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.v__num::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.v__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
}

.v__latin {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  color: var(--text-muted);
  margin-top: 0.5rem;
  letter-spacing: 0.005em;
}

.v__copy {
  margin-top: 1.5rem;
  max-width: 38rem;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--text);
  line-height: 1.7;
  opacity: 0.9;
}
.v__copy + .v__copy { margin-top: 1rem; }

.v__features {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
}
.v__features li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.015);
}

.v--v8 {
  display: flex;
  align-items: center;
}
.v--v8 .v__media img {
  max-width: min(82vw, 920px);
}

/* ============================================================
   VIDEOS — small cards, autoplay muted, click opens modal
   ============================================================ */

/* ============================================================
   GALLERY — real-life photos, in the wild
   ============================================================ */

.gallery {
  padding-block: clamp(7rem, 18vh, 14rem);
}

.gallery__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.gallery__eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.gallery__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 3rem;
  max-width: 32ch;
}

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 600px) {
  .gallery__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (min-width: 880px) {
  .gallery__grid { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
}

.gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.2s ease;
  aspect-ratio: 1 / 1;
}
.gallery__item:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery__item:hover img {
  transform: scale(1.04);
}

.videos {
  padding-block: clamp(8rem, 18vh, 14rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
}

.videos__title {
  text-align: center;
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 2.5rem;
  color: var(--text);
}

.videos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
@media (min-width: 760px) {
  .videos__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.videos__item {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-3);
  display: block;
  cursor: pointer;
  padding: 0;
  width: 100%;
}

.videos__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.videos__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1rem;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* ============================================================
   VIDEO MODAL — fullscreen overlay on click
   ============================================================ */

.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.96);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem);
  animation: vm-fade-in 0.18s ease;
}
.video-modal.is-open { display: flex; }

@keyframes vm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.video-modal__player {
  max-width: 95vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  outline: none;
}

.video-modal__close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(20, 20, 26, 0.7);
  color: var(--text);
  font-size: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}
.video-modal__close:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(20, 20, 26, 0.95);
}

/* ============================================================
   GALLERY LIGHTBOX — fullscreen image overlay on click
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.96);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem);
  animation: lb-fade-in 0.18s ease;
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }

@keyframes lb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox__img {
  max-width: 96vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 4px;
  cursor: default;
}

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(20, 20, 26, 0.7);
  color: var(--text);
  font-size: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(20, 20, 26, 0.95);
}

/* ============================================================
   AKTUELL — social media call-out
   ============================================================ */

.aktuell {
  padding-block: clamp(8rem, 18vh, 14rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.aktuell__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-top: 1rem;
  margin-bottom: 3rem;
}

.aktuell__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  max-width: var(--maxw);
}

@media (min-width: 880px) {
  .aktuell__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

.aktuell__copy {
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text);
  opacity: 0.9;
  max-width: 38rem;
}
.aktuell__copy + .aktuell__copy { margin-top: 1rem; }

.aktuell__cta {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 26rem;
}

.aktuell__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.015);
}
.aktuell__link:hover {
  border-color: var(--accent);
  background: rgba(212, 163, 115, 0.04);
  transform: translateX(4px);
  opacity: 1;
}

.aktuell__cta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  grid-column: 1 / -1;
  margin-bottom: -0.4rem;
}

.aktuell__cta-handle {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  color: var(--text);
  letter-spacing: -0.01em;
}

.aktuell__cta-arrow {
  font-size: 1.25rem;
  color: var(--accent);
  font-weight: 600;
  transition: transform 0.2s ease;
}
.aktuell__link:hover .aktuell__cta-arrow { transform: translateX(4px); }

.aktuell__visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.aktuell__card {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
  transition: transform 0.25s ease, border-color 0.2s ease;
}
.aktuell__card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  opacity: 1;
}
.aktuell__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(1.05);
}
.aktuell__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
}
.aktuell__card-icon {
  align-self: flex-end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  padding-left: 3px;
}
.aktuell__card-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.aktuell__card-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
.aktuell__card-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.15;
}
.aktuell__card-handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.2rem;
}

/* ============================================================
   MANIFESTO
   ============================================================ */

.manifesto {
  text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 163, 115, 0.06) 0%, transparent 60%),
    var(--bg);
  padding-block: clamp(8rem, 22vh, 16rem);
}

.manifesto__question {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.75rem);
  color: var(--accent);
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 28ch;
  margin: 0 auto 1rem;
}

.manifesto__answer {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 3.8vw, 2.4rem);
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 2.5rem;
}

.manifesto__body {
  max-width: 38rem;
  margin: 0 auto;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  color: var(--text);
  line-height: 1.75;
  opacity: 0.9;
}
.manifesto__body p + p { margin-top: 1rem; }
.manifesto__body strong { color: var(--text); font-weight: 600; }

.manifesto__socials {
  margin-top: 2.5rem;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.manifesto__socials a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
}
.manifesto__socials a:hover { color: var(--accent); border-bottom-color: var(--accent); opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem 4rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.footer__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
    gap: 3rem;
  }
}

.footer h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.footer__col p { line-height: 1.6; margin-bottom: 0.5rem; opacity: 0.85; }
.footer a:hover { color: var(--accent); opacity: 1; }

.footer__counter { margin-top: 1.5rem; }
.footer__counter img {
  display: inline-block;
  max-width: 280px;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-2);
}

.footer__brand img {
  max-width: 200px;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

/* ============================================================
   Reveal animation
   ============================================================ */

.reveal--pending {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal--pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal--pending { opacity: 1; transform: none; }
}

/* ============================================================
   Page layouts (Datenschutz)
   ============================================================ */

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(4rem, 10vh, 8rem) var(--gutter);
}
.page h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
  color: var(--text);
}
.page h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--text);
}
.page p, .page li {
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 0.75rem;
  opacity: 0.85;
}
.page ul { padding-left: 1.25rem; }
.page__back {
  display: inline-block;
  margin-bottom: 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   Mobile tweaks
   ============================================================ */

@media (max-width: 879px) {
  .v--reverse .v__media { order: 0; }
  .v--reverse .v__text  { order: 1; }
  .v__features { justify-content: flex-start; }
  .aktuell__grid { gap: 2.5rem; }
  .aktuell__cta { max-width: none; }
}

/* ============================================================
   Language switcher (fixed top-right)
   ============================================================ */

.lang-switch {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top, 0));
  right: max(0.75rem, env(safe-area-inset-right, 0));
  z-index: 100;
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  background: rgba(12, 12, 16, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  border-radius: 2px;
  opacity: 0.55;
  transition: opacity 0.18s ease, outline-color 0.18s ease;
  outline: 1px solid transparent;
  outline-offset: 1px;
}

.lang-switch__item svg {
  display: block;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.lang-switch__item:hover,
.lang-switch__item:focus-visible {
  opacity: 1;
  outline-color: var(--accent);
}

.lang-switch__item.is-active {
  opacity: 1;
  outline-color: var(--accent);
}

@media (max-width: 879px) {
  .lang-switch {
    top: max(0.5rem, env(safe-area-inset-top, 0));
    right: max(0.5rem, env(safe-area-inset-right, 0));
    padding: 0.35rem 0.4rem;
    gap: 0.3rem;
  }
  .lang-switch__item { width: 22px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch__item { transition: none; }
}