/* ═══════════════════════════════════════════════════════════════════════
   layout.css — Spalte, Hero-Monitor, Blöcke, Fuß

   Die Seite ist mobil gedacht: eine einzige Spalte, die auf dem Desktop
   nicht breiter wird, sondern nur mittig steht. Der fallende Code füllt
   den Rest des Bildschirms, statt dass die Karten auseinandergezogen
   werden. Ein Linktree ist ein Daumen-Objekt.
   ═══════════════════════════════════════════════════════════════════════ */

.shell {
  position: relative;
  z-index: 4;
  width: min(100%, var(--col));
  margin-inline: auto;
  padding: 0 var(--gutter) 3rem;
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
}

.block { margin-top: 2.4rem; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { padding-top: max(1.1rem, env(safe-area-inset-top)); }

/* Der Monitor: ein Bildschirm im Bildschirm, mit Eckwinkeln statt Rahmen. */
.monitor {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  background: var(--void-2);
  box-shadow:
    0 0 0 1px var(--line),
    0 0 34px rgba(53, 240, 122, 0.09),
    0 26px 60px -26px rgba(0, 0, 0, 0.95);
}

.monitor__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 32%;
  filter: contrast(1.05) saturate(0.96) brightness(1.14);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease);
}
.monitor:hover .monitor__img { transform: scale(1.05); }

/* Der Bildinhalt läuft nach unten in die Seite aus, damit die Wortmarke
   nicht auf einer Kante klebt. */
.monitor__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 11, 7, 0.62) 0%, rgba(5, 11, 7, 0) 26%),
    linear-gradient(0deg, var(--void) 2%, rgba(5, 11, 7, 0.78) 22%, rgba(5, 11, 7, 0) 52%);
}

/* Der Lichtbalken, der einmal langsam über die Röhre wandert. */
.monitor__sweep {
  position: absolute; left: 0; right: 0; height: 42%;
  top: -42%;
  background: linear-gradient(180deg,
    rgba(53, 240, 122, 0) 0%,
    rgba(53, 240, 122, 0.07) 48%,
    rgba(216, 255, 230, 0.13) 52%,
    rgba(53, 240, 122, 0) 100%);
  animation: sweep 7.5s var(--ease) infinite;
  animation-delay: 1.2s;
}
@keyframes sweep {
  0%       { transform: translateY(0); opacity: 0; }
  8%       { opacity: 1; }
  55%, 100% { transform: translateY(340%); opacity: 0; }
}

.monitor__meta {
  position: absolute;
  top: 0.85rem; right: 0.9rem;
  display: flex; align-items: center; gap: 0.42rem;
  font-size: 0.56rem; letter-spacing: 0.2em;
  color: var(--code);
  opacity: 0.7;
}
.monitor__meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blood);
  box-shadow: 0 0 8px var(--blood);
  animation: rec 2.2s steps(1) infinite;
}
@keyframes rec { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } }

.monitor__label {
  position: absolute;
  left: 1.05rem; right: 1.05rem; bottom: 1rem;
}

.wordmark {
  margin: 0.42rem 0 0.3rem;
  /* Solange die Wortmarke umbricht, sind zwei Zeilen reserviert: sonst
     schiebt der Entschlüsselungs-Effekt die Handle-Zeile hoch und runter.
     Ab der vollen Spaltenbreite passt sie in eine Zeile, dann weg damit. */
  min-height: 1.92em;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 10.4vw, 2.5rem);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  background: linear-gradient(178deg, var(--gold-lit) 4%, var(--gold) 52%, #8d7340 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 22px rgba(53, 240, 122, 0.14));
  cursor: pointer;
}

.handle {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--dim);
}

/* ── Leitspruch ───────────────────────────────────────────────────────── */

.creed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.15rem;
  font-family: var(--f-serif);
  font-size: 1.02rem;
  font-style: italic;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.creed__eye {
  width: 40px; height: 18px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
}
.creed__eye .pupil { fill: var(--gold); stroke: none; }

/* ── Aktionsleiste ────────────────────────────────────────────────────── */

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.15rem;
}

/* ── Fuß ──────────────────────────────────────────────────────────────── */

.foot {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* Das Logo liegt als weisses PNG mit Alphakanal vor. mix-blend-mode ginge
   hier nicht: .shell bildet einen eigenen Stapelkontext, in dem screen den
   schwarzen Grund stehen lassen würde. */
.foot__logo {
  width: 148px;
  margin: 0 auto 1.2rem;
  opacity: 0.72;
}

.foot__mail { margin-top: 0.4rem; }
.foot__mail a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.foot__mail a:hover { color: var(--code); border-color: var(--line-lit); }

.foot__sig {
  margin-top: 1.4rem;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* ── Ab Tablet: die Spalte bekommt Luft, der Regen bleibt sichtbar ────── */

@media (min-width: 30rem) {
  .wordmark { min-height: 0; }
}

@media (min-width: 46rem) {
  :root { --gutter: 1.5rem; }
  .shell { padding-top: 1.5rem; }
  .monitor__img { aspect-ratio: 4 / 5; }
}

/* Auf breiten Schirmen bekommt die Spalte zwei Haarlinien als Schienen.
   Ohne sie sieht die zentrierte Spalte aus wie eine gedehnte Handy-Ansicht,
   mit ihnen wie ein Terminalfenster, das absichtlich so schmal ist. */
@media (min-width: 64rem) {
  .shell {
    border-inline: 1px solid var(--line);
    padding-inline: 2rem;
    width: min(100%, calc(var(--col) + 2rem));
  }
}