/* ==========================================================================
   VORLIEK — Segelmacherei
   Tokens und Geometrie stammen aus art-direction.md; die Hero-Masse sind am
   freigegebenen Mockup gemessen (§7), nicht geschaetzt.
   ========================================================================== */

:root {
  /* Palette — §2, alle Kontraste durchgerechnet */
  --grund:    #F6F1E9;   /* Papier                                        */
  --tinte:    #1B3940;   /* 10,95:1 auf Grund                             */
  --grau:     #46606B;   /*  5,94:1 auf Grund — Fliesstext                */
  --nebel:    #8F9AA0;   /*  2,8:1 — NIE Fliesstext, nur Hairlines/Deko   */
  --sand:     #DBC7BC;   /*  Trennkanten, Chip-Raender                    */
  --akzent:   #B84319;   /*  4,84:1 auf Grund, 5,45:1 mit Weiss           */

  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Source Sans 3", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Hero-Geometrie, gemessen an hero-final.png.
     Zwei Werte weichen bewusst vom Mockup ab, weil dort das L vollstaendig
     hinter dem Segel verschwand — auf dem Schirm stand VORIEK. Gemessen mit
     tools/word-legibility.mjs; die Flaechenmetrik hatte das nicht gefunden,
     weil 83,7 % der Tinte sichtbar waren. Wort hoch und Segel nach rechts
     loesen es, ohne das Motiv zu verkleinern. */
  --wort-size:   min(17vw, 30vh);   /* 6 Buchstaben + Segel-Slot passen in ~92 vw */
  --wort-top:    53vh;                /* Wortmitte; die Segelspitze ragt darueber */
  --segel-h:     1.85em;              /* Vielfaches der Schriftgroesse — skaliert mit */
  --segel-tief:  0.02em;              /* wie weit das Unterliek unter die Grundlinie faellt */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--grau);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--tinte); font-weight: 400; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

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

.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.6vh clamp(1.25rem, 3.4vw, 3.4rem) 0;
}

.nav__mark {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.35vw, 1.4rem);
  letter-spacing: 0.14em;
  color: var(--tinte);
  text-decoration: none;
  padding: 0.5rem 0;
}

.nav__links {
  display: flex; gap: clamp(1.1rem, 2.4vw, 2.6rem);
  list-style: none; margin: 0; padding: 0;
}

.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
  text-decoration: none;
  padding: 0.6rem 0;              /* Tap-Target */
  display: inline-block;
  transition: color 0.35s ease;
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--tinte); }

/* --- Hero: das z-Sandwich ------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* Back-Ebene. Wird in Phase 6 durch das <video> ersetzt, gleiche Klasse. */
.layer-back {
  position: absolute; inset: 0;
  width: 100%; height: 112%;
  object-fit: cover; object-position: center center;
  z-index: 0;
  will-change: transform;
}

/* Zentrierung liegt im CSS, GSAP bewegt nur — sonst rechnet GSAP yPercent
   vor document.fonts.ready gegen die Fallback-Breite und der Versatz bleibt
   stehen (Fallstrick aus dem Nachbarprojekt). */
.layer-title-wrap {
  position: absolute; z-index: 1;
  top: var(--wort-top, 50.05vh);   /* Wortmitte aus dem Mockup */
  left: 50.3%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  pointer-events: none;
}

/* inline-block ist Pflicht, nicht Kosmetik: heroContract() misst die Box des
   Wortes. Als Block waere sie 100 vw breit, und die Sichtbarkeit rechnete
   gegen die Leinwand statt gegen die Glyphen. */
.layer-title {
  display: inline-block;
  font-size: var(--wort-size);
  line-height: 1;
  letter-spacing: var(--wort-track, 0);
  color: var(--tinte);
  white-space: nowrap;
  margin: 0;
}

/* Der Segel-Slot: eine Luecke im Wort in exakt der Breite des Segels. Das Bild
   haengt an der GRUNDLINIE (Inline-Block mit vertical-align: baseline) —
   Unterliek und Buchstabenfuesse stehen damit auf derselben Linie, und das
   Segel waechst nach OBEN aus der Zeile heraus. Weil dort nichts abgeschnitten
   werden darf, begrenzt --segel-h die Hoehe: sie ist so gewaehlt, dass die
   Kopfspitze unterhalb der Chipzeile bleibt (Nachweis: tools/check-sail.mjs). */
.sail-slot {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  width: calc(var(--segel-h) * 1647 / 2049);
  height: 0;
}

.layer-front {
  position: absolute;
  bottom: calc(var(--segel-tief) * -1);   /* leicht unter die Grundlinie gesetzt */
  left: 50%;
  transform: translateX(-50%);
  height: var(--segel-h);
  width: auto;
  max-width: none;
  will-change: transform;
  pointer-events: none;
}

/* Das L als Klassenzeichen auf dem Tuch. Drei Dinge lassen es aufgemalt statt
   aufgeklebt wirken: multiply laesst Naehte, Falten und Schattierung des Tuchs
   durchscheinen; die leichte Drehung und Scherung folgen der Woelbung; und es
   sitzt nicht in der geometrischen Mitte, sondern dort, wo auf einem echten
   Vorsegel das Klassenzeichen steht — im unteren Drittel, leicht nach Achtern
   versetzt, weil das Tuch dort am breitesten ist. */
.sail-mark {
  position: absolute;
  left: 56%;
  bottom: 15%;
  transform: translateX(-50%) rotate(-3.5deg) skewY(2deg);
  transform-origin: 50% 100%;
  font-size: 1em;                  /* dieselbe Versalhoehe wie VOR und IEK */
  line-height: 1;
  color: var(--tinte);
  mix-blend-mode: multiply;
  opacity: 0.9;
  pointer-events: none;
}

/* --- Chips --------------------------------------------------------------- */

.chip {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: 0.45em 0.95em;
  background: transparent;
}
.chip--tl { top: 10.5vh; left: clamp(1.25rem, 3.4vw, 3.4rem); }
.chip--tr { top: 10.5vh; right: clamp(1.25rem, 3.4vw, 3.4rem); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); }

/* --- Hero-Content: eigene Zone unterhalb des Segels ---------------------- */

.hero-content {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  top: 82vh;
  width: min(46rem, 88vw);
  text-align: center;
}

.hero-lede {
  font-family: var(--font-display);
  color: var(--tinte);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.hero-sub {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  color: var(--grau);
  margin-bottom: 1.15rem;
}

/* Der Scroll-Hinweis erscheint nur, wenn unter dem CTA wirklich Platz ist.
   Bei 720 px Viewporthoehe endet der Button rechnerisch bei ~710 px und lag
   im ersten Bau direkt auf dem Hinweis. */
.hero-scroll { display: none; }

@media (min-height: 820px) {
  .hero-scroll {
    display: block;
    position: absolute; z-index: 4;
    bottom: 2.2vh; left: 50%; transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--nebel);
  }
}

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

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grund);
  background: var(--tinte);        /* 10,95:1 — der Akzent bleibt Signal */
  padding: 1.05em 2.1em;
  border: 1px solid var(--tinte);
  border-radius: 999px;
  transition: background 0.4s ease, color 0.4s ease;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--tinte); }

.btn--ghost {
  background: transparent;
  color: var(--tinte);
  border-color: var(--sand);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }

/* --- Sektionen ----------------------------------------------------------- */

.section {
  padding: clamp(7rem, 16vh, 13rem) clamp(1.25rem, 5vw, 5rem);
  max-width: 88rem;
  margin: 0 auto;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.feature-row.reverse > :first-child { order: 2; }

/* Keine Card-Fills, keine Strokes — nur Medium und Text (design-rules.md). */
.feature-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }

/* Signatur-Moment: das Tuch wird beim Scrollen aufgezogen, wie im Loft
   ausgerollt. Startzustand steht im CSS, damit nichts aufblitzt, bevor GSAP
   uebernimmt; bei reduced-motion bleibt es einfach offen. */
.feature-media--unroll img { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .feature-media--unroll img { clip-path: inset(0 100% 0 0); }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 1.1rem;
}

.feature-text h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.feature-text p { margin-bottom: 1.8rem; max-width: 34rem; }

/* Masked Line Reveal braucht einen Maskenrahmen je Zeile */
/* Die Maske schneidet die Zeile beim Reveal ab — und ohne Zugabe schneidet sie
   auch die UNTERLAENGEN ab: g, j, p, q, y standen fusslos da. Das Polster gibt
   der Maske Raum fuer den Descender, der negative Aussenabstand nimmt ihn dem
   Zeilenfluss wieder weg, damit die Zeilenabstaende unveraendert bleiben. */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

.section__title {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: clamp(3rem, 7vh, 5rem);
  max-width: 22ch;
}

/* --- Pflichtstueck 1: full-bleed Szene ----------------------------------- */

/* Die Szene scrollt mit, sie klebt nicht mehr. Der fruehere Curtain hielt sie
   ueber 165 svh fest, waehrend der Typo-Moment sich darueberschob — auf dem
   Schirm las sich das nicht als Pause, sondern als haengender Scroll. Die
   Wirkung tragen jetzt Anschnitt und Parallax, nicht die Standzeit.

   Kein eigener Aussenabstand: die Sektion darueber polstert mit 16vh, der
   Typo-Moment darunter mit 14vh — die Bahn steht damit von selbst in ihrer
   Luft. Der Curtain-Abstand summierte sich auf 256 px und riss sie aus dem
   Rhythmus.

   Der Text steht oben links, nicht unten mittig. Gemessen am Bild: unten in der
   Mitte liegt die unruhigste Stelle — dort kreuzen die Panelnaehte die
   Buchstaben, und der Kontrast faellt auf 5,7:1. Oben links ist das Tuch ruhig
   und hell (10,7:1). Beides ist AA-konform, aber nur das eine liest sich auch
   gut. */
.scene {
  position: relative;
  height: 80svh;
  min-height: 26rem;
  display: grid;
  place-items: start start;
  overflow: hidden;
}

.scene__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Breite NICHT in ch: die Einheit rechnet gegen die eigene Schriftgroesse
   (16 px), nicht gegen die grosse Zeile darin — 28ch ergaben 224 px statt der
   erwarteten ~750, und overflow: hidden schnitt die Woerter ab. */
.scene__copy {
  position: relative;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.25rem, 5vw, 5rem) 0;
  width: min(46rem, 62vw);
  text-align: left;
  will-change: transform;
}

/* Kein Scrim: Der Grund ist hell, die Tinte traegt von selbst (design-rules). */
.scene__line {
  font-family: var(--font-display);
  color: var(--tinte);
  font-size: clamp(1.75rem, 4.2vw, 3.6rem);
  line-height: 1.1;
}

/* --- Pflichtstueck 2: der Typo-Moment ------------------------------------ */

.typo-moment {
  padding: clamp(6rem, 14vh, 11rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
}
.typo-moment > * { max-width: 88rem; margin-left: auto; margin-right: auto; }

/* Outline statt Flaeche: das Wort ist Bildbestandteil, nicht Ueberschrift. */
/* 10 Zeichen statt der 7 des Heroes: bei dessen Groesse liefe das Wort auf
   rund 130 vw hinaus und wuerde rechts hart abgeschnitten. 14,5vw ergibt
   ~92 vw Breite — voll im Bild, aber immer noch randfuellend. */
.ghost-word {
  font-family: var(--font-display);
  font-size: min(14.5vw, 26vh);
  line-height: 0.85;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--sand);
  margin: 0;
  will-change: transform;
  user-select: none;
}

/* Rechts unter dem Ghost-Wort, nicht zentriert hinein: sonst liest es sich als
   Textblock IM Wort statt als Zeile darunter. */
.typo-moment__copy {
  position: relative;
  width: min(34rem, 100%);
  margin-left: auto;
  margin-right: 0;
  padding-top: 2.5rem;
}
.typo-moment__copy p { margin-bottom: 1.8rem; }

/* --- Leistungen ---------------------------------------------------------- */

.triade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.triade__item { margin: 0; }          /* keine Karten, keine Fuellung */
.triade__index {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--akzent);
  margin-bottom: 1rem;
}
.triade__item h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  margin-bottom: 0.7rem;
}

/* --- Stimmen ------------------------------------------------------------- */

.voices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.voices blockquote { margin: 0; }
.voices blockquote p {
  font-family: var(--font-display);
  color: var(--tinte);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.3;
  margin-bottom: 1.1rem;
}
.voices cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nebel);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  padding: clamp(7rem, 16vh, 13rem) clamp(1.25rem, 5vw, 5rem) 4rem;
  text-align: center;
}

.footer__cta-title {
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  line-height: 1.08;
  margin-bottom: 1.2rem;
}
.footer__cta-text { max-width: 34rem; margin: 0 auto 2.2rem; }

.footer__mark {
  font-family: var(--font-display);
  color: var(--tinte);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.08em;
  margin-top: clamp(5rem, 11vh, 8rem);
  margin-bottom: 0.8rem;
}

.footer__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
                text-transform: uppercase; color: var(--grau); }

.footer__links {
  display: flex; justify-content: center; gap: 1.8rem;
  list-style: none; margin: 1.6rem 0 0; padding: 0;
}
.footer__links a {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grau); text-decoration: none;
  padding: 0.5rem 0; display: inline-block;
}
.footer__links a:hover, .footer__links a:focus-visible { color: var(--tinte); }

.footer__demo { margin-top: 2.5rem; font-size: 0.8rem; color: var(--nebel); max-width: 42rem;
                margin-left: auto; margin-right: auto; }

/* Sichtbarer Fokus statt Browser-Default (Detail-Finish). */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Mobile — der Hero wird NEU komponiert, nicht skaliert (motionsites-look.md)
   ========================================================================== */

@media (max-width: 768px) {
  /* Der Hero wird hier NEU komponiert. Zwei Zwaenge treffen aufeinander:
     Ein 7-Buchstaben-Wort auf 375 px Breite ist bei 26vw 108 vw breit und
     liefe seitlich aus dem Bild — erlaubt sind hoechstens ~92 vw, also
     22vw font-size. Ein Segel, das die oberen ~50 svh fuellt, verdeckt davon
     aber mehr als 40 %, und die 60-%-Huerde waere unerreichbar.
     motionsites-look.md sieht dafuer die zweite K1-Variante vor: mobil rueckt
     das Wort UEBER das Motiv. Der Parallax-Reveal entfaellt damit auf Mobile —
     bewusst, er ist ein Desktop-Effekt. */
  :root {
    --wort-size:  15vw;      /* kleinere Buchstaben, dafuer ein hoeheres Segel */
    --wort-top:   44svh;
    --segel-h:    3em;       /* mobil staerker ueberhoeht, sonst wirkt das Motiv zierlich */
  }

  .nav__links { display: none; }

  .chip--tl, .chip--tr { top: auto; bottom: 15svh; font-size: 0.6rem; }
  .chip--tl { left: 50%; transform: translateX(-50%); }
  .chip--tr { display: none; }

  .layer-title-wrap { left: 50%; }

  .hero-content { top: 63svh; width: 90vw; }
  .hero-lede { font-size: 1.5rem; }

  .feature-row { grid-template-columns: 1fr; }
  .feature-row.reverse > :first-child { order: 0; }

  .triade, .voices { grid-template-columns: 1fr; }
  .scene { height: 68svh; min-height: 22rem; }
  /* NICHT groesser als auf Desktop: 10 Zeichen bei 21vw ergaeben 133 vw und
     liefen rechts aus dem Bild. Die Breitenbindung gilt auf jedem Viewport. */
  .ghost-word { font-size: 15vw; }
  .typo-moment__copy { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* Platzhalter fuer die deutschen Pflichtseiten — sichtbar, aber zurueckhaltend:
   ein toter Anker waere in einer Demo, die man herumzeigt, ein echter Mangel. */
.rechtliches {
  margin: 3.5rem auto 0;
  max-width: 42rem;
  font-size: 0.8rem;
  color: var(--nebel);
  scroll-margin-top: 30vh;
}

/* --- Kopier-Knopf ---------------------------------------------------------
   Kein mailto:, auch nicht in einer Demo mit erfundener Adresse: Ein Klick
   darf nicht das Mailprogramm des Besuchers aufreissen. Die Adresse ist die
   Beschriftung des Knopfes, ein Klick legt sie in die Zwischenablage.
   Der Knopf traegt .btn und zieht hier nur nach, was ein <button> gegenueber
   einem <a> nicht erbt — und nimmt die Versalien zurueck, weil eine
   E-Mail-Adresse in Grossbuchstaben nicht mehr die Adresse ist. */

button.btn {
  font-family: var(--font-mono);
  cursor: pointer;
}

.kopier {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
}

.kopier__zeichen {
  /* Feste Laufweite. ⧉ und ✓ sind unterschiedlich breit, und es wechselt die
     Glyphe, nicht die Breite des Knopfes. */
  flex: 0 0 1.1em;
  text-align: center;
  opacity: 0.75;
}

.kopier.ist-kopiert .kopier__zeichen { opacity: 1; }

.sr-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}