/* =========================================================================
   Seitenrahmen: Kopfleiste, About-Me-Einstieg, Process-Bereich, Fußzeile.
   Gleiche Gestaltung wie die 3D-Artist-Sektion — dunkler Grund, feines
   Raster, dünne helle Kanten, Mono-Labels.
   ========================================================================= */

:root {
  --site-bg: #07070a;
  --site-fg: #ffffff;
  --site-muted: rgba(255, 255, 255, 0.55);
  --site-line: rgba(255, 255, 255, 0.16);
  --site-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --site-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --site-pad: clamp(18px, 4vw, 54px);
  --site-head: 58px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--site-font);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ Kopfleiste */
.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--site-head);
  padding: 0 var(--site-pad);
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(7, 7, 10, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

/* Beim Herunterscrollen nach oben weggefahren — siehe autoHideHeader()
   in js/site.js. Die Leiste liegt fest ueber der Seite und nimmt sonst
   dauerhaft Hoehe weg. */
.site-head.is-tucked {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

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

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-fg);
  text-decoration: none;
}

.site-logo__mark {
  width: 26px;
  height: 26px;
  border: 1px solid var(--site-line);
  border-radius: 7px;
  object-fit: cover;
  background: #101015;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vw, 30px);
}

.site-nav a {
  position: relative;
  padding: 6px 2px;
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--site-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-nav a:hover { color: var(--site-fg); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.is-current { color: var(--site-fg); }
.site-nav a.is-current::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- About */
.about {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--site-head) + clamp(40px, 8vh, 96px)) var(--site-pad)
           clamp(60px, 12vh, 130px);
  overflow: hidden;
  isolation: isolate;
}

/* gleiches Raster wie hinter dem Bilderkreis */
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #060608;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255, 255, 255, 0.022) 25%, transparent 25%,
                    transparent 75%, rgba(255, 255, 255, 0.022) 75%);
  background-size: 46px 46px, 46px 46px, 92px 92px;
}

.about::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 65% at 50% 32%, rgba(140, 156, 196, 0.16), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 24%,
                    transparent 62%, rgba(0, 0, 0, 0.92));
}

.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3.5vh, 38px);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about__eyebrow {
  margin: 0;
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--site-muted);
}

.about__heading {
  margin: 0;
  font-size: clamp(38px, 8vw, 92px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ------------------------------------------------------------ About-Logo
   Gekauftes Markenlogo, freigestellt in eigenem Rahmen — dieselbe Behandlung
   wie die Bilder im Process-Bereich weiter unten, damit die Seite zusammenhält.
   Der Schein dahinter nimmt die Farben des Logos auf. */
.about__logo {
  display: block;
  width: clamp(150px, 21vw, 232px);
  height: auto;
  margin: clamp(4px, 1.5vh, 14px) 0 clamp(6px, 2vh, 18px);
  border-radius: 22px;
  border: 1px solid var(--site-line);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6),
              0 0 60px rgba(196, 122, 128, 0.3);
}

.about__name {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.about__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.about__tag {
  padding: 5px 12px;
  border: 1px solid var(--site-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--site-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
}

.about__text {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ Scroll-Cue */
.about__cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(6px, 2vh, 18px);
  font-family: var(--site-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  transition: color 0.25s ease;
}

.about__cue:hover { color: var(--site-fg); }

.about__cue-mouse {
  position: relative;
  width: 20px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 11px;
}

.about__cue-mouse::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #fff;
  animation: site-scroll 2s ease-in-out infinite;
}

@keyframes site-scroll {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(11px); opacity: 1; }
}

/* --------------------------------------------------------------- Process
   Der Weg vom Entwurf zum fertigen Skin. Die Schritte stehen untereinander
   und wechseln die Seite, verbunden durch eine dünne Linie in der Mitte —
   so liest man den Ablauf als Weg und nicht als Liste. Auf dem Handy fällt
   der Wechsel weg und alles steht untereinander. */
.process {
  position: relative;
  padding: clamp(80px, 16vh, 150px) var(--site-pad) clamp(70px, 13vh, 120px);
  background: #060608;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.process::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255, 255, 255, 0.022) 25%, transparent 25%,
                    transparent 75%, rgba(255, 255, 255, 0.022) 75%);
  background-size: 46px 46px, 46px 46px, 92px 92px;
}

.process::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 50% at 50% 16%, rgba(140, 160, 210, 0.16), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 22%,
                    transparent 74%, rgba(0, 0, 0, 0.85));
}

.process__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.6vh, 26px);
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.process__eyebrow {
  margin: 0;
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--site-muted);
}

.process__heading {
  margin: 0;
  font-size: clamp(30px, 5.2vw, 62px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.process__lead {
  max-width: 56ch;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ Die Schritte */
.process__steps {
  position: relative;
  width: 100%;
  margin: clamp(26px, 6vh, 58px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 7vh, 72px);
}

/* die durchgehende Linie hinter den Nummern */
.process__steps::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(to bottom, transparent,
              rgba(170, 190, 240, 0.34) 6%, rgba(170, 190, 240, 0.34) 94%, transparent);
}

.process__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}

/* jeder zweite Schritt spiegelt sich: Bild und Text tauschen die Seite */
.process__step:nth-child(even) .process__shot { grid-column: 3; }
.process__step:nth-child(even) .process__body { grid-column: 1; grid-row: 1; text-align: right; }

.process__num {
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--site-line);
  background: #0a0a0e;
  font-family: var(--site-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 6px #060608, 0 8px 22px rgba(0, 0, 0, 0.6);
}

.process__shot {
  position: relative;
  grid-column: 1;
  margin: 0;
  isolation: isolate;
}

/* Farbschimmer hinter dem Bild, in dessen eigener Farbe — js/site.js liest
   sie aus einer winzigen Kopie des Bildes und setzt sie als --shot-glow. */
.process__shot::before {
  content: '';
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              var(--shot-glow, rgba(150, 170, 220, 0.8)), transparent 72%);
  opacity: 0;
  filter: blur(38px);
  transform: scale(0.9);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.process__step.is-in .process__shot::before { opacity: 0.7; transform: scale(1); }

.process__shot img,
.process__shot video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--site-line);
  background: #0d0d11;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
}

.process__body {
  grid-column: 3;
  text-align: left;
}

.process__title {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.process__text {
  max-width: 42ch;
  margin: 0;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
  text-wrap: pretty;
}

.process__step:nth-child(even) .process__text { margin-left: auto; }

/* ------------------------------------------------------------------ Aufruf */
.process__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(30px, 6vh, 62px);
  padding: 13px 26px;
  border: 1px solid var(--site-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, transform 0.25s ease;
}

.process__cta:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}

.process__cta-arrow { font-size: 12px; opacity: 0.55; transition: opacity 0.25s ease, transform 0.25s ease; }
.process__cta:hover .process__cta-arrow { opacity: 1; transform: translate(2px, -2px); }

/* ------------------------------------------------- Fußzeile mit Rechtstexten */
.site-foot {
  position: relative;
  padding: clamp(44px, 8vh, 74px) var(--site-pad) calc(clamp(34px, 6vh, 56px) + env(safe-area-inset-bottom, 0px));
  background: #030304;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-foot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vh, 26px);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.site-foot__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.site-foot__mark {
  width: 24px;
  height: 24px;
  border: 1px solid var(--site-line);
  border-radius: 7px;
  object-fit: cover;
  background: #101015;
}

.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(14px, 2.4vw, 28px);
}

/* Die Rechtstexte stehen in Weiss — sie sollen auffallen, nicht im
   Hintergrund verschwinden. Beim Ueberfahren kommt nur eine feine Linie
   dazu; der Hintergrund bleibt ruhig und dunkel. */
.site-foot__links a {
  position: relative;
  font-family: var(--site-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-fg);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.site-foot__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-foot__links a:hover::after { transform: scaleX(1); }

/* Beim Ueberfahren treten die uebrigen Links zurueck, statt dass der
   angesteuerte aufleuchtet — das bleibt deutlich ruhiger. */
.site-foot__links:hover a { opacity: 0.45; }
.site-foot__links a:hover { opacity: 1; }

/* ------------------------------------------------------- Besuchszähler
   Kleiner Glasring, dahinter die Zahl.
   Die Lichter laufen als Kegelverläufe um den Ring herum statt über eine
   Fläche zu streichen — Licht verhält sich auf einem Ring so, und das
   unterscheidet Glas von einem gezeichneten Kreis. Wichtig ist das gerade
   hier, wo der Grund fast schwarz ist und es nichts zu brechen gibt. */
.visits {
  --ring-size: 34px;
  --ring-thick: 8px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
}

/* Muss nach der display-Regel stehen: ein eigenes display schlaegt sonst
   das eingebaute [hidden] und der leere Ring bliebe stehen, wenn der
   Zaehler nicht erreichbar ist. */
.visits[hidden] { display: none; }

.visits__ring {
  flex: none;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  /* Die Mitte wird ausgestanzt — übrig bleibt der Steg. */
  --hole: calc(50% - var(--ring-thick));
  -webkit-mask: radial-gradient(closest-side, transparent var(--hole),
                                #000 calc(var(--hole) + 1px));
  mask: radial-gradient(closest-side, transparent var(--hole),
                        #000 calc(var(--hole) + 1px));
  background:
    /* Glanzbogen oben links */
    conic-gradient(from 188deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.95) 34deg,
      rgba(255, 255, 255, 0.28) 62deg,
      transparent 84deg),
    /* Gegenlicht unten rechts */
    conic-gradient(from 20deg,
      transparent 0deg,
      rgba(198, 222, 255, 0.85) 26deg,
      transparent 52deg),
    /* scharfer Innensaum */
    radial-gradient(closest-side, transparent 54%, rgba(255, 255, 255, 0.95) 60%,
                    rgba(255, 255, 255, 0.14) 68%, transparent 72%),
    /* scharfer Außensaum */
    radial-gradient(closest-side, transparent 88%, rgba(255, 255, 255, 0.88) 96%,
                    transparent 100%),
    rgba(150, 180, 255, 0.05);
  backdrop-filter: blur(3px) saturate(1.7) brightness(1.15);
  -webkit-backdrop-filter: blur(3px) saturate(1.7) brightness(1.15);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 12px rgba(150, 180, 255, 0.35));
}

.visits__value {
  font-family: var(--site-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(8, 14, 32, 0.9);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.visits__label {
  font-family: var(--site-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.site-foot__note {
  max-width: 68ch;
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.3);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- Einblenden */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .about__cue-mouse::after { animation: none; }
}

@media (max-width: 640px) {
  :root { --site-head: 52px; }
  .site-logo { font-size: 13px; letter-spacing: 0.14em; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 10px; letter-spacing: 0.12em; }

  /* Auf dem Handy untereinander: Nummer, Bild, Text. Der Seitenwechsel und
     die Mittellinie ergeben bei dieser Breite keinen Sinn mehr. */
  .process__steps::before { display: none; }
  .process__steps { gap: 40px; }
  .process__step { grid-template-columns: 1fr; gap: 14px; justify-items: start; }
  .process__shot,
  .process__body,
  .process__num,
  .process__step:nth-child(even) .process__shot,
  .process__step:nth-child(even) .process__body {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
  .process__step:nth-child(even) .process__text { margin-left: 0; }
  .process__num { width: 38px; height: 38px; box-shadow: none; }
  .process__cta { padding: 11px 18px; font-size: 10px; letter-spacing: 0.14em; }

  .site-foot__links a { font-size: 10px; }
  .site-foot__links:hover a { opacity: 1; }
  .visits { --ring-size: 30px; --ring-thick: 7px; }
  .visits__value { font-size: 15px; }
}