/* Nektar – Seitenlayout. Alle Farben, Abstaende, Radien und Kurven aus
   tokens.css (Theme "nektar"). Mobil zuerst: Die Seite wird als 9:16-Reel
   abgefilmt, Desktop-Regeln stehen in den min-width-Bloecken. */

@font-face {
  font-family: "Fraunces Variable";
  src: url("../fonts/fraunces-latin-soft-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans Variable";
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Breite des Kolibri-Canvas (Frame 848 x 948 inkl. Glow-Rand) */
  --kolibri-b: 58vw;
  --kolibri-abend-b: 34vw;
  --bluete-b: min(96vw, 60svh);
  --soft: "SOFT" 100;
  /* Hoehe der Landschaften bei voller Breite (1672 x 941) */
  --bild-max-h: calc(var(--bild-max) * 941 / 1672);
}

html { background: var(--c-bg); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body { margin: 0; overflow-x: clip; }
img, canvas, svg { display: block; }
a { color: inherit; }
a:focus-visible, .knopf:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: var(--space-1);
}
h1, h2 { margin: 0; font-variation-settings: var(--soft); }
p { margin: 0; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kopf ---------- */
.kopf {
  position: absolute; inset: 0 0 auto 0; z-index: var(--z-sticky);
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5) var(--gutter);
}
.wortmarke {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-weight: var(--weight-semi); font-size: var(--type-lg);
  letter-spacing: var(--tracking-heading); text-decoration: none; color: var(--c-ink);
}
.kopf__link {
  display: inline-flex; align-items: center; min-height: var(--touch-min);
  font-size: var(--type-sm); font-weight: var(--weight-medium); text-decoration: none;
  color: var(--c-ink); letter-spacing: var(--tracking-label);
}
.kopf__link:hover { color: var(--c-accent); }

/* ---------- Bildflaeche: scharf bis 1672 px, daneben die weiche Randfassung ---------- */
.flaeche {
  position: relative; height: 100svh; overflow: hidden; background: var(--c-surface);
}
.flaeche__rand {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: none;
}
.flaeche__bild, .ebenen {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-inline: auto;
  width: min(100%, var(--bild-max)); height: 100%;
}
.flaeche__bild { object-fit: cover; object-position: var(--fokus, 50% 50%); }
/* ---------- 1 Morgen ----------
   Kein Text auf dem Foto: das Bild laeuft oben weich in den Travertin-Grund
   aus, die Ueberschrift steht auf der Flaeche (Verbot "Hero-Text zentriert
   ueber Vollbild-Foto mit dunklem Overlay"). */
.morgen { position: relative; background: var(--c-bg); --fokus: 62% 100%; }
.morgen .flaeche { background: transparent; }
.morgen .flaeche__rand { display: none; }
.morgen .flaeche__bild {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, rgb(0 0 0 / 0.5) 46%, #000 64%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, rgb(0 0 0 / 0.5) 46%, #000 64%);
}
.morgen__text {
  position: absolute; inset: 0 0 auto 0;
  padding: var(--space-9) var(--gutter) 0;
}
.morgen h1 {
  font-size: var(--type-3xl); font-weight: var(--weight-semi);
  max-width: 7ch; color: var(--c-ink);
}
.morgen__unter {
  margin-top: var(--space-5); max-width: 26ch;
  font-size: var(--type-md); line-height: var(--leading-snug); color: var(--c-ink);
}

/* ---------- Kolibri (feste Ebene) ---------- */
.kolibri {
  position: fixed; top: 0; left: 0; z-index: var(--z-base);
  width: var(--kolibri-b); aspect-ratio: 848 / 948;
  pointer-events: none; will-change: transform; visibility: hidden;
}
.kolibri.ist-bereit { visibility: visible; }
/* Ohne Bewegung gehoert der Vogel fest in den Morgen. */
.kolibri.ist-statisch { position: absolute; }

/* ---------- 2 Bluete (gepinnt) ---------- */
.bluete { position: relative; background: var(--c-bg); }
.bluete__buehne {
  position: relative; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; align-items: end; justify-items: center;
  padding: var(--space-10) var(--gutter) var(--space-6);
}
.bluete__text { justify-self: start; max-width: 30rem; }
.bluete h2 { font-size: var(--type-2xl); font-weight: var(--weight-semi); }
.bluete__text p {
  margin-top: var(--space-4); font-size: var(--type-base); color: var(--c-ink-soft); max-width: 26ch;
}
.bluete__canvas { width: var(--bluete-b); aspect-ratio: 1008 / 848; }

/* ---------- 3 Wasser ---------- */
.wasser { position: relative; background: var(--c-bg); --fokus: 47% 50%; }
.flaeche--wasser { height: 88svh; }
.ebene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fokus);
}
.ebene--hinten { will-change: transform; }
.wasser__text { padding: var(--section-y-tight) var(--gutter) var(--section-y); }
.wasser h2 { font-size: var(--type-2xl); font-weight: var(--weight-semi); max-width: 14ch; }
.leistungen { list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.leistungen li {
  display: grid; gap: var(--space-2);
  padding: var(--space-5) 0; border-top: var(--hairline);
}
.leistungen li:last-child { border-bottom: var(--hairline); }
.leistungen__wort {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: var(--type-xl); font-weight: var(--weight-medium);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--c-accent);
}
.leistungen__satz { color: var(--c-ink-soft); max-width: 40ch; }

/* ---------- 4 Durchblick ---------- */
.durchblick {
  position: relative; background: var(--c-ink); color: var(--c-bg);
  padding-block: var(--section-y-tight) var(--section-y);
}
.durchblick__maske { width: 100%; height: 86svh; }
.maske-text {
  font-family: var(--font-display); font-weight: 900;
  font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -0.01em;
}
.durchblick__text {
  margin-top: var(--space-6); padding-inline: var(--gutter); max-width: 24ch;
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: var(--type-lg); line-height: var(--leading-snug);
}

/* ---------- 5 Abend ----------
   Spiegelbild zum Morgen: das Bild laeuft unten ins dunkle Oliv aus, Text
   und Knopf stehen darunter auf der Flaeche, die nahtlos in den Fuss geht. */
.abend { position: relative; background: var(--c-ink); --fokus: 58% 40%; overflow: hidden; }
.abend .flaeche { background: transparent; }
.abend .flaeche__bild {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgb(0 0 0 / 0.45) 74%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgb(0 0 0 / 0.45) 74%, transparent 96%);
}
.abend__text {
  position: relative; z-index: 2;
  margin-top: -24svh; padding: 0 var(--gutter) var(--space-7);
}
.abend h2 {
  font-size: var(--type-2xl); font-weight: var(--weight-semi); max-width: 11ch; color: var(--c-bg);
}
.abend__text p {
  margin-top: var(--space-4); max-width: 30ch; color: var(--c-elevated);
  font-size: var(--type-base); line-height: var(--leading-snug);
}
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(var(--touch-min) + var(--space-2));
  margin-top: var(--space-6); padding: 0 var(--space-6);
  border-radius: var(--radius-button);
  background: var(--c-rubin); color: var(--c-surface);
  font-weight: var(--weight-semi); text-decoration: none;
  box-shadow: var(--shadow-2);
}
.knopf:hover { background: var(--c-rubin-hover); }
.knopf:active { transform: translateY(1px); }
.kolibri-abend {
  position: absolute; left: 0; top: 0; z-index: var(--z-base);
  width: var(--kolibri-abend-b); aspect-ratio: 848 / 948;
  pointer-events: none; will-change: transform;
}

/* ---------- Fuss ---------- */
.fuss {
  background: var(--c-ink); color: var(--c-bg);
  padding: var(--space-8) var(--gutter) var(--space-8);
}
.fuss__marke {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-weight: var(--weight-semi); font-size: var(--type-3xl);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--c-gold);
}
.fuss__claim { margin-top: var(--space-2); font-size: var(--type-md); }
.fuss__hinweis {
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--c-line);
  font-size: var(--type-sm); color: var(--c-elevated); max-width: 46ch;
}
.fuss__hinweis a:hover { color: var(--c-gold); }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root {
    --kolibri-b: min(26vw, 25rem);
    --kolibri-abend-b: min(15vw, 14rem);
    --bluete-b: min(46vw, 70svh);
  }
  .morgen { --fokus: 70% 50%; }
  .morgen .flaeche__bild {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, rgb(0 0 0 / 0.5) 34%, #000 54%);
            mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, rgb(0 0 0 / 0.5) 34%, #000 54%);
  }
  .morgen__text { padding-top: var(--space-11); }
  .morgen h1 { max-width: 7ch; }
  .morgen__unter { max-width: 24ch; }
  .bluete__buehne {
    grid-template-columns: 1fr 1.25fr; grid-template-rows: 1fr;
    align-items: center; padding-block: var(--space-9);
  }
  .flaeche--wasser { height: 100svh; }
  .wasser__text {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-9);
    max-width: var(--container-wide); margin-inline: auto;
  }
  .leistungen { margin-top: 0; }
  .leistungen li { grid-template-columns: 12rem 1fr; align-items: baseline; gap: var(--space-6); }
  .durchblick__maske { height: 92svh; }
  .durchblick__text { max-width: 30ch; margin-inline: auto; text-align: center; }
  .abend { --fokus: 50% 45%; }
  .abend__text { margin-top: -30svh; max-width: var(--container-wide); margin-inline: auto; }
}

/* ---------- Grosse Monitore ----------
   Die Landschaften sind 1672 x 941 px. Ab hier ist der Schirm breiter: das
   scharfe Bild bleibt in Originalgroesse (kein Hochrechnen), mittig, und
   laeuft an allen Kanten weich aus - in die weichgezeichnete Randfassung,
   bei Morgen und Abend in die einfarbige Flaeche. */
@media (min-width: 1700px) {
  /* Flaeche nie hoeher als das Bild: so bleibt es 1:1 und fuellt die Hoehe. */
  .flaeche, .flaeche--wasser { height: min(100svh, var(--bild-max-h)); }
  .flaeche__rand { display: block; }
  .morgen .flaeche__rand, .abend .flaeche__rand { display: none; }
  .flaeche__bild, .ebenen {
    -webkit-mask-image:
      linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
      linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
            mask-image:
      linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
      linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .morgen .flaeche__bild {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, transparent 12%, #000 42%, #000 91%, transparent),
      linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
            mask-image:
      linear-gradient(90deg, transparent 0%, transparent 12%, #000 42%, #000 91%, transparent),
      linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  }
  .abend .flaeche__bild {
    -webkit-mask-image:
      linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
      linear-gradient(180deg, transparent, #000 9%, #000 52%, rgb(0 0 0 / 0.45) 74%, transparent 96%);
            mask-image:
      linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
      linear-gradient(180deg, transparent, #000 9%, #000 52%, rgb(0 0 0 / 0.45) 74%, transparent 96%);
  }
}