/* Layout- und Zustandsregeln der Voigt-Website.
   Übernommen aus dem Prototyp (ui_kits/website/index.html) plus die Zustände,
   die vorher React gesetzt hat. */

html, body { margin: 0; background: var(--surface-page); }
button { font-family: var(--font-sans); }
input, select, textarea { font-family: var(--font-sans); }

select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c6beac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px !important;
  padding-right: 44px !important;
}
select.on-light {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233f4b49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
}

/* --- Kopfzeile: durchsichtig über dem Hero, nach dem Scrollen Waldgrün mit Weichzeichner.
   Die Werte stehen bewusst hier und nicht als Inline-Style am Element, sonst
   gewinnt der Ausgangszustand gegen die Zustandsregel. */
#site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-standard),
              backdrop-filter var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
#site-header.is-solid {
  background: rgba(36, 46, 45, .72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(255, 235, 200, .22);
}
#site-header.is-open { background: transparent; border-bottom-color: transparent; }

/* --- Burger-Menü */
.site-burger { display: none !important; }
#site-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
}
#site-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.site-menu-item {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              color var(--duration-fast) var(--ease-standard);
}
#site-menu.is-open .site-menu-item { opacity: 1; transform: translate3d(0, 0, 0); }
body.menu-open { overflow: hidden; }

@media (max-width: 1024px) {
  .site-nav { display: none !important; }
  .site-burger { display: flex !important; }
  /* Das Logo steht auf dem Desktop auf 44px, neben dem Burger wäre das zu groß. */
  .site-logo { height: 34px !important; }
}

/* --- Raster der Leistungskacheln */
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { .services-grid { grid-template-columns: minmax(0, 1fr) !important; } }

/* --- Fußzeile */
@media (max-width: 1200px) {
  .site-footer-grid { grid-template-columns: max-content max-content max-content !important; }
  .site-footer-grid > div:first-child { grid-column: 1 / -1; }
}

/* --- Zweispaltige Abschnitte und Seitenköpfe */
@media (max-width: 900px) {
  .decor-section { display: flex; flex-direction: column; }
  .decor-section > * { width: 100%; align-self: stretch; }
  .decor-safe { width: 100% !important; }
  .decor-section:not(.page-intro) { padding-bottom: 0 !important; }
  .page-intro { padding-bottom: calc(var(--space-section) + 50px) !important; }
  .decor-art { order: 2; position: relative !important; display: block; width: 324px !important; margin: var(--space-11) 0 0 auto; top: auto !important; right: auto !important; transform: scaleY(-1); }

  .split { grid-template-columns: minmax(0, 1fr) !important; }
  .split-media { order: 1 !important; }
  .split-media:not([style*="gap: 1px"]) { padding: 24px 0 !important; }
  .split-text { order: 2 !important; }
  .site-footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- Rauten auf dem Teamfoto (die React-Fassung hat diese Regel zur Laufzeit eingefügt) */
@keyframes vgt-hotspot-pulse {
  0%   { transform: rotate(45deg) scale(1);   opacity: .85; }
  70%  { transform: rotate(45deg) scale(2.6); opacity: 0; }
  100% { transform: rotate(45deg) scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .vgt-hotspot-ring { animation: none !important; } }

/* --- Zustände, die site.js setzt */
[data-stack-cards] figure[data-leaving] { transform: translate(160%, 6%) rotate(9deg) !important; z-index: 20 !important; }
.form-status { display: grid; gap: var(--space-5); justify-items: start; }

/* --- Ablauf-Zeitleiste: zwei Spalten mit Mittellinie, darunter einspaltig.
   Im Prototyp entschied JavaScript über die Spalten, hier macht es CSS. */
.process-timeline { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); column-gap: 0; }
.process-timeline .pt-spine { left: 50%; }

@media (max-width: 820px) {
  .process-timeline { grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--space-6); }
  .process-timeline .pt-spine { left: 7px; }
  .process-timeline .pt-marker { grid-column: 1 !important; }
  .process-timeline .pt-card { grid-column: 2 !important; text-align: left !important; justify-items: start !important; }
}

/* --- Scroll-Reveal nach den Motion-Vorgaben: Opacity und 12px, 720ms, kein Scale.
   Die Startwerte setzt site.js, damit ohne JavaScript alles sichtbar bleibt. */
.reveal-init { opacity: 0; transform: translate3d(0, 12px, 0); }
.reveal-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}

/* --- Die wegfliegende Bewertungskarte ragt bewusst über den Rand hinaus.
   Ohne Beschnitt wächst dadurch die Seitenbreite, die Seite wird seitlich
   scrollbar und die feste Kopfzeile rutscht aus dem Bild. `clip` schneidet ab,
   ohne einen Scrollbereich zu erzeugen — anders als `hidden`. */
main { overflow-x: clip; }

/* --- Nur für Screenreader: trägt die eine h1 der Karriereseite, deren
   sichtbare Überschrift (die Stelle) beim Umschalten wechselt. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Hero-Höhe auf dem iPhone: Safari rechnet `100vh` ohne die Adressleiste,
   der Hero wäre also höher als das Sichtfeld und die Buttons lägen darunter.
   `svh` ist die Höhe mit sichtbarer Leiste, `dvh` wäre falsch: die ändert sich
   beim Scrollen und das Hintergrundvideo würde dabei springen. Das inline
   gesetzte `100vh` bleibt Fallback für alles vor iOS 15.4. */
@supports (min-height: 100svh) {
  .hero { min-height: 100svh !important; }
}

/* --- Leistungen: Text und Raute fahren beim Einscrollen ein.
   Der Text kommt aus der Seite, auf der er steht: links sitzender Text von
   links, rechts sitzender von rechts. Die Raute schrumpft von 1.5 auf 1, die
   Maske zieht mit leichtem Versatz nach und gibt zum Schluss den 6px-Spalt zum
   Rahmen frei, das Foto fährt von 1.5 auf 1 heran. Die Skalierungen liegen
   ineinander und multiplizieren sich, das Foto steht am Anfang also bei gut 2.3.
   Deshalb reichen die 141.5%, die das gedrehte Quadrat exakt abdecken, nicht
   aus: 170% lassen Rand, sonst käme an den Ecken leere Fläche zum Vorschein.
   Die Drehung der Raute steckt in der eigenen `rotate`-Eigenschaft und kommt
   dem `transform` hier nicht in die Quere.

   Der Startzustand hängt an `.js-anim`, das ein Einzeiler im Seitenkopf setzt —
   also bevor das erste Bild gezeichnet wird. Deshalb dürfen auch Reihen
   mitlaufen, die beim Laden schon sichtbar sind: Es gibt kein Aufblitzen des
   Endzustands. Ohne JavaScript fehlt die Klasse und alles steht ruhig da. */
.vgt-text,
.vgt-dia,
.vgt-dia > div {
  transform-origin: 50% 50%;
  transition: transform var(--dia-dauer, 1100ms) var(--ease-out),
              opacity var(--dia-dauer, 1100ms) var(--ease-out);
}
.vgt-dia > div > img {
  width: 170% !important;
  height: 170% !important;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1) !important;
  transition: transform var(--dia-dauer, 1100ms) var(--ease-out);
}

/* Versatz: Maske und Foto ziehen der Raute leicht hinterher. */
.vgt-dia > div { transition-delay: 160ms; }
.vgt-dia > div > img { transition-delay: 80ms; }

/* Startzustand, solange die Reihe nicht freigegeben ist. */
.js-anim .vgt-row:not(.row-an) .vgt-text { opacity: 0; }
.js-anim .vgt-row:not(.row-an) .vgt-text.von-links { transform: translate3d(-64px, 0, 0); }
.js-anim .vgt-row:not(.row-an) .vgt-text.von-rechts { transform: translate3d(64px, 0, 0); }
.js-anim .vgt-row:not(.row-an) .vgt-dia { transform: scale(1.5); }
.js-anim .vgt-row:not(.row-an) .vgt-dia > div { transform: scale(1.06); }
.js-anim .vgt-row:not(.row-an) .vgt-dia > div > img {
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.5) !important;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .vgt-row:not(.row-an) .vgt-text,
  .js-anim .vgt-row:not(.row-an) .vgt-dia,
  .js-anim .vgt-row:not(.row-an) .vgt-dia > div,
  .js-anim .vgt-row:not(.row-an) .vgt-dia > div > img {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-anim .vgt-row:not(.row-an) .vgt-dia > div > img {
    transform: translate(-50%, -50%) rotate(-45deg) scale(1) !important;
  }
}