/* ---------------------------------------------------------------------------
   VEYCA – Grundlayout, Kopf, Sektionen, Fuss
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top hält jeden Ankersprung unterhalb der klebenden Kopfzeile.
   Ohne das landet die Überschrift des Ziels hinter dem Kopf - betrifft die
   Navigation ebenso wie die beiden Links in der Fusszeile. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  padding: var(--s-3) var(--s-5); background: var(--ink); color: #000;
  font-weight: 600; text-decoration: none; transition: top var(--dur-1) var(--ease);
}
.skip:focus { top: var(--s-4); }

/* --- Typografie ------------------------------------------------------------ */
/* Die Headlines nutzen die Breitenachse von Archivo, damit sie dem breit
   laufenden VEYCA-Schriftzug entsprechen, ohne ihn zu imitieren. */

h1, h2, .h-like {
  font-weight: 620;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: 600; font-stretch: 105%; line-height: 1.25; }

.eyebrow {
  font-size: var(--step-eyebrow);
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.lead { font-size: var(--step-lead); color: var(--ink-2); max-width: 46ch; }
.lead--tight { max-width: 54ch; }
p + p { margin-top: var(--s-4); }

/* Platzhalter sollen auffallen, aber die Seite nicht zerreissen. */
.tbd {
  color: var(--ink-3);
  border-bottom: 1px dashed var(--line-strong);
  font-variant-numeric: tabular-nums;
}


/* --- Container -------------------------------------------------------------- */
.wrap { width: min(var(--maxw), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { --maxw: 1720px; }

.section { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.section--alt { background: var(--bg-elev); }
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head h2 { margin-bottom: var(--s-5); }

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  --pad-y: 0.95rem; --pad-x: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--pad-y) var(--pad-x);
  font-size: var(--step-small);
  font-weight: 620; font-stretch: 106%;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: transparent; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.btn--sm { --pad-y: 0.6rem; --pad-x: 1.1rem; font-size: 0.74rem; }
.btn--solid { background: var(--ink); color: #000; border-color: var(--ink); }
.btn--solid:hover { background: #d7d8dc; border-color: #d7d8dc; }
.btn--ghost:hover { border-color: var(--line-bright); background: rgba(255,255,255,.06); }

/* --- Kopfzeile --------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.site-head.is-stuck {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--s-6);
  width: min(var(--maxw), 100%); margin-inline: auto;
  padding: var(--s-4) var(--gutter);
}
.site-head__logo { flex: none; }
.site-head__logo img { width: clamp(104px, 11vw, 148px); height: auto; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.site-nav a {
  font-size: var(--step-small); font-weight: 500; text-decoration: none;
  color: var(--ink-2); white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current='true'] { color: var(--ink); }

.site-head__burger { display: none; background: none; border: 0; padding: var(--s-2); cursor: pointer; }
.site-head__burger-box { display: grid; gap: 5px; width: 22px; }
.site-head__burger-box i { display: block; height: 1px; background: var(--ink); }

/* --- Hero -------------------------------------------------------------------- */
/* Kopie oben, Foto darunter. Der Hero füllt eine Bildschirmhöhe: die Kopie nimmt,
   was sie braucht, das Foto bekommt den Rest und wird oben beschnitten – dort ist
   ohnehin nur Hintergrund. So sind Text UND Gerät beim Laden gleichzeitig zu sehen. */

.hero {
  display: flex; flex-direction: column;
  /* max-height statt height: ist das Foto in seiner natürlichen Höhe kleiner als
     der Platz, entsteht unten keine leere Fläche; ist es grösser, schrumpft der
     Rahmen und beschneidet. */
  max-height: calc(100svh - 5.5rem);
  min-height: 30rem;
  overflow: hidden;
  padding-block: clamp(1.5rem, 3.5vw, 3rem) 0;
}
.hero__copy { flex: none; }
.hero__title {
  max-width: 26ch;
  font-size: clamp(2.15rem, 4.4vw, 3.9rem);
  margin-bottom: var(--s-4);
}
.hero .lead { max-width: 72ch; font-size: clamp(0.98rem, 1.15vw, 1.12rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.hero__frame {
  position: relative;
  width: min(1800px, 100%);
  margin: clamp(1rem, 2.2vw, 1.75rem) auto 0;
  aspect-ratio: 2400 / 784;      /* natürliche Höhe des Fotos */
  flex: 0 1 auto;                /* darf schrumpfen, aber nicht darüber hinauswachsen */
  min-height: 8rem;
  overflow: hidden;
}
/* Der sichtbare Streifen ist auf 52 % der Bildhöhe zentriert. Zu zeigen ist das
   Band von 16 % (Oberkante der Konsole) bis 89 % (tiefster Punkt der Kabel-
   schlaufe, danach läuft das Bild ohnehin in Schwarz aus); dessen Mitte liegt
   bei 52.5 %. Darüber steht nur Hintergrund, den der Beschnitt zuerst frisst. */
.hero__media {
  position: absolute; left: 0; top: 50%;
  width: 100%; aspect-ratio: 2400 / 784;
  transform: translateY(-52%);
}
.hero__photo { width: 100%; height: auto; }

.hero__hint {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-4); font-size: var(--step-small); color: var(--ink-3);
}
.hero__hint-mark {
  flex: none; width: 15px; height: 15px; border: 1px solid var(--line-bright);
  border-radius: 50%; position: relative;
}
.hero__hint-mark::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink);
}

/* Das Logo-Video wird als 1560x720-Fläche angelegt und per matrix3d (in JS
   berechnet) auf das perspektivische Viereck des Bildschirms abgebildet. */
.hero__screen {
  position: absolute; left: 0; top: 0; width: 1560px; height: 720px;
  transform-origin: 0 0; opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
  pointer-events: none;
}
.hero__screen.is-ready { opacity: 1; }
.hero__screen video, .hero__screen img { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Alles unterhalb eines sehr hohen Fensters: die Kopie wird kompakter, damit dem
   Foto genug Höhe bleibt. Erst ab dieser Grenze reicht der Streifen für das ganze
   Band 16 %–89 %, also für Konsole UND Kabelschlaufe. */
@media (min-width: 761px) and (max-height: 1000px) {
  .hero { padding-block: var(--s-4) 0; }
  .hero__title { font-size: clamp(1.9rem, 3.3vw, 2.7rem); margin-bottom: var(--s-3); }
  .hero .lead { font-size: 0.95rem; max-width: 84ch; }
  .hero__actions { margin-top: var(--s-4); }
  .hero__hint { margin-top: var(--s-3); }
  .hero__frame { margin-top: var(--s-4); }
  .eyebrow { margin-bottom: var(--s-2); }
}

/* --- Vorteile ----------------------------------------------------------------- */
.feature-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--line); border: 1px solid var(--line);
}
.feature { background: var(--bg); padding: clamp(1.6rem, 2.6vw, 2.4rem); }
.section--alt .feature { background: var(--bg-elev); }
.feature__n {
  font-size: var(--step-eyebrow); letter-spacing: var(--track-wide);
  color: var(--ink-4); font-variant-numeric: tabular-nums; display: block;
  margin-bottom: var(--s-5);
}
.feature h3 { margin-bottom: var(--s-3); }
.feature p { color: var(--ink-2); font-size: var(--step-small); line-height: 1.7; }

/* --- Anwendungsfälle ----------------------------------------------------------- */
.cases { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.case { border: 1px solid var(--line); padding: clamp(1.75rem, 3vw, 2.75rem); }
.case h3 { font-size: var(--step-h2); font-weight: 620; font-stretch: 112%; margin-bottom: var(--s-4); }
.case > p { color: var(--ink-2); margin-bottom: var(--s-6); }
.case ul { display: grid; gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.case li {
  display: grid; grid-template-columns: 14px 1fr; gap: var(--s-3);
  font-size: var(--step-small); color: var(--ink-2); line-height: 1.6;
}
.case li::before {
  content: ''; width: 9px; height: 9px; margin-top: .5em;
  border: 1px solid var(--line-bright); border-radius: 50%;
}

/* --- Impressum -------------------------------------------------------------------- */
/* Der Abschnitt ist eingeklappt und erscheint erst, wenn ihn jemand aufruft:
   über den Link in der Fusszeile, über einen Direktlink auf #impressum oder
   #datenschutz, oder aus einem Lesezeichen. Das genügt der Vorgabe, die
   Angaben müssten leicht erkennbar und direkt erreichbar sein – der Link in
   der Fusszeile ist immer sichtbar, und ein Klick zeigt den Abschnitt. Genau
   so verhält sich eine verlinkte eigene Seite auch.

   Ohne JavaScript gelöst, damit es auch dann funktioniert, wenn die Skripte
   nicht laufen. `:has(:target)` fängt den Sprung auf #datenschutz ab, der
   innerhalb des Abschnitts liegt. */
.legal { display: none; }
.legal:target,
.legal:has(:target) { display: block; }

/* Bewusst zurückhaltend: Pflichtangaben, keine Werbefläche. Kleiner Schriftgrad,
   zwei Spalten, damit der Block das Ende der Seite nicht dominiert. */
.legal__body {
  display: grid; gap: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: repeat(2, 1fr);
}
.legal__group {
  font-size: var(--step-eyebrow); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-strong);
  margin-bottom: var(--s-2);
}
.legal__list { display: grid; }
.legal__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4);
  padding-block: var(--s-3); border-bottom: 1px solid var(--line);
  font-size: var(--step-small); align-items: baseline;
}
.legal__row dt { color: var(--ink-3); }
.legal__row dd { text-align: right; }
.legal__body p {
  font-size: var(--step-small); color: var(--ink-2); padding-top: var(--s-3);
}
/* Zurück nach oben schliesst den Abschnitt wieder: #top trifft kein Ziel im
   Abschnitt, also greift weder :target noch :has(:target). */
.legal__close {
  grid-column: 1 / -1; justify-self: start;
  font-size: var(--step-small); color: var(--ink-3);
  text-decoration: none; border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px; transition: color var(--dur-1) var(--ease);
}
.legal__close:hover, .legal__close:focus-visible { color: var(--ink); }
/* Der Ankersprung selbst sitzt über scroll-padding-top an html. */

/* --- Kontakt --------------------------------------------------------------------- */
.contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.25fr 1fr; align-items: start; }
.contact__title { margin-bottom: var(--s-5); }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.contact__card {
  border: 1px solid var(--line); padding: clamp(1.75rem, 3vw, 2.5rem);
  font-style: normal; display: grid; gap: var(--s-5);
}
.contact__card dt {
  font-size: var(--step-eyebrow); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2);
}
.contact__card dd { font-size: var(--step-lead); }
.contact__card a { text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

/* --- Fusszeile --------------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); padding-block: var(--s-7); }
.site-foot__in { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.site-foot__mark { width: 34px; height: auto; opacity: .7; }
.site-foot__copy { font-size: var(--step-small); color: var(--ink-3); }
.site-foot__nav { margin-left: auto; }
.site-foot__nav ul { display: flex; gap: var(--s-5); }
.site-foot__nav a { font-size: var(--step-small); color: var(--ink-3); text-decoration: none; }
.site-foot__nav a:hover { color: var(--ink); }

/* --- Einblenden beim Scrollen -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Breakpoints ------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Auf dem Handy braucht der Hero keine feste Höhe – dort wird ohnehin gescrollt.
     Wichtig: height UND overflow zurücksetzen, sonst schneidet der Hero die Kopie ab. */
  .hero { max-height: none; min-height: 0; overflow: visible; }
  .hero__frame { flex: none; aspect-ratio: auto; height: auto; min-height: 0; }
  .hero__media { position: static; transform: none; }
  /* Bei mehreren Markierungen auf 390 px lägen die Fadenkreuze übereinander.
     Der Rahmen scrollt deshalb horizontal und zeigt das Foto in Originalgrösse. */
  .hero__frame {
    width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hero__frame::-webkit-scrollbar { display: none; }
  .hero__media { width: 900px; }
}
@media (max-width: 900px) {
  .legal__body { grid-template-columns: 1fr; }
  /* Einspaltig gäbe die Sektionsbreite eine unlesbar lange Zeile vor. */
  .legal__body p { max-width: 62ch; }
  .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-head__cta { display: none; }
  .site-head__burger { display: block; margin-left: auto; }
  .site-head.is-open .site-nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(0,0,0,.96); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); padding: var(--s-5) var(--gutter);
  }
  .site-head.is-open .site-nav ul { flex-direction: column; gap: var(--s-4); }
  .legal__row { grid-template-columns: 1fr; gap: var(--s-1); }
  .legal__row dd { text-align: left; }
}

@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .feature-grid { grid-template-columns: 1fr; } }