/* ==========================================================================
   Vista City — Höhenlinien als Flächenmuster
   ---------------------------------------------------------------------------
   Die SVGs liegen als Maske vor, nicht als Bild: dadurch kommt die Farbe aus
   CSS und passt sich Theme und Seitenakzent an, statt fest im Bild zu stecken.

   Zwei Masken werden verschnitten: die Konturlinien und ein Verlauf, der sie
   zum Rand hin auslaufen lässt. Ohne diesen zweiten Schritt endet das Muster
   an einer harten Kante mitten in der Fläche.

   Die Linien sind ein eigenes Element, kein Pseudo-Element. Grund: Kacheln
   nutzen ::before für die Akzentkante und ::after für ihr Foto — ein
   drittes Muster hätte eines davon überschrieben.

   Die Pfade stehen bewusst hier: relative URLs in Custom Properties werden
   gegen das Stylesheet aufgelöst, nicht gegen das Dokument.
   ========================================================================== */

.topo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--topo-color, var(--line-hi));
  opacity: var(--topo-opacity, 1);
  transition: opacity var(--dur-mid) linear;

  --topo-fade: radial-gradient(115% 95% at var(--topo-anchor, 50% 50%),
    #000 0%, #000 42%, transparent 88%);

  -webkit-mask-image: var(--topo-src), var(--topo-fade);
  mask-image: var(--topo-src), var(--topo-fade);
  -webkit-mask-size: var(--topo-size, cover), 100% 100%;
  mask-size: var(--topo-size, cover), 100% 100%;
  -webkit-mask-position: var(--topo-pos, center), center;
  mask-position: var(--topo-pos, center), center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --- Varianten ------------------------------------------------------------
   Kompakt für Kacheln, breit für Bänder, hoch für Spalten.
   -------------------------------------------------------------------------- */

.topo--card { --topo-src: url('../img/pattern/topo-card.svg'); }
.topo--wide { --topo-src: url('../img/pattern/topo-wide.svg'); }
.topo--tall { --topo-src: url('../img/pattern/topo-tall.svg'); }

/* --- Ausschnitt -----------------------------------------------------------
   Deutlich größer als die Fläche und über die Kante hinausgeschoben.
   Dadurch sieht man einen Ausschnitt einer großen Karte statt einer
   mittig platzierten Grafik — und die Linien bleiben fein, weil das SVG
   nicht hochskaliert wird.
   -------------------------------------------------------------------------- */

.topo--bleed {
  inset: -60% -35% -45% 5%;
  --topo-anchor: 30% 60%;
}
.topo--corner {
  inset: -30% -45% -55% 30%;
  --topo-anchor: 72% 78%;
}
.topo--edge {
  inset: -45% 45% -45% -35%;
  --topo-anchor: 30% 50%;
}
.topo--top {
  inset: -75% -20% 35% -20%;
  --topo-anchor: 50% 72%;
}

/* --- Stärke --------------------------------------------------------------
   Deutlich zurückgenommen: das Muster soll die Fläche tragen, nicht mit
   dem Text konkurrieren.
   -------------------------------------------------------------------------- */

.topo--faint  { --topo-color: var(--ink); --topo-opacity: 0.14; }
.topo--accent { --topo-color: var(--accent); --topo-opacity: 0.22; }

/* Auf Fotos: helle Linien, unabhängig vom Theme. */
.topo--onmedia { --topo-color: oklch(100% 0 0); --topo-opacity: 0.17; }

/* Beim Zeigen treten die Linien hervor — eine Reaktion, die nicht nach
   Anheben und Leuchten aussieht. */
.tile:hover > .topo,
.card--link:hover > .topo,
.compare__col:hover > .topo { opacity: calc(var(--topo-opacity, 1) * 1.9); }

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

/* ==========================================================================
   Kleine Verzierungen im Seitenhintergrund
   ---------------------------------------------------------------------------
   Bewusst technisch statt dekorativ: ein feines Punktfeld, Schnittmarken an
   den Ecken und schmale Randziffern. Das gibt der Fläche Struktur, ohne
   eine weitere Farbe oder Form ins Spiel zu bringen.
   ========================================================================== */

/* --- Punktfeld -------------------------------------------------------------
   Liegt hinter der ganzen Seite statt nur unter einzelnen Abschnitten, sonst
   bricht das Raster mitten im Scrollen ab. Die Dichte schwankt über eine
   Maske aus mehreren weichen Feldern: an manchen Stellen deutlich, an
   anderen kaum — gleichmäßig über die volle Höhe wäre es Tapete.
   ---------------------------------------------------------------------------- */

.dotfield::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px,
    color-mix(in oklab, var(--ink) 30%, transparent) 1px, transparent 0);
  background-size: 2.5rem 2.5rem;

  /* Vier überlagerte Felder erzeugen ein unregelmäßiges Auf und Ab. */
  mask-image:
    radial-gradient(70% 26% at 12% 8%,  #000, transparent 70%),
    radial-gradient(55% 20% at 88% 30%, #000, transparent 72%),
    radial-gradient(80% 24% at 30% 58%, #000, transparent 70%),
    radial-gradient(60% 22% at 75% 86%, #000, transparent 72%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
}

/* Auf dem Seitenkörper: läuft durch, wird aber von Abschnitten mit eigenem
   Hintergrund (Hero, Schlussblock, Fußzeile) überdeckt. */
.dotfield { position: relative; }

body.dotfield::before { position: fixed; }

/* --- Lichtschein -----------------------------------------------------------
   Liegt im Seitenhintergrund selbst, nicht als Element in einzelnen
   Abschnitten. Zwei Gründe: platziert man ihn in einem Abschnitt mit
   overflow:hidden, schneidet dessen Kante den weichen Rand zu einem
   sichtbaren Rechteck ab — und ohne position:relative am Abschnitt bezieht
   er sich auf den body und verlängert die Seite nach unten.

   Die Felder sind sehr groß und sehr weich und sitzen an den Rändern:
   das liest sich als Licht aus einer Richtung, nicht als Farbfleck.
   ---------------------------------------------------------------------------- */

.dotfield::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(48rem 34rem at 88% 6%,
      color-mix(in oklab, var(--accent) var(--glow-a, 20%), transparent), transparent 68%),
    radial-gradient(42rem 30rem at 6% 26%,
      color-mix(in oklab, var(--accent-2) var(--glow-b, 16%), transparent), transparent 70%),
    radial-gradient(52rem 36rem at 78% 52%,
      color-mix(in oklab, var(--accent) var(--glow-c, 14%), transparent), transparent 70%),
    radial-gradient(44rem 32rem at 14% 74%,
      color-mix(in oklab, var(--accent-2) var(--glow-d, 17%), transparent), transparent 70%),
    radial-gradient(50rem 34rem at 70% 96%,
      color-mix(in oklab, var(--accent) var(--glow-e, 18%), transparent), transparent 70%);
}

/* Auf hellem Grund trägt weniger: derselbe Wert würde dort zur Wolke. */
:root[data-theme='light'] .dotfield::after {
  --glow-a: 11%; --glow-b: 9%; --glow-c: 8%; --glow-d: 10%; --glow-e: 10%;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .dotfield::after {
    --glow-a: 11%; --glow-b: 9%; --glow-c: 8%; --glow-d: 10%; --glow-e: 10%;
  }
}

/* --- Schnittmarke ---------------------------------------------------------
   Zwei gekreuzte Haarlinien, wie eine Passermarke im Druck.
   -------------------------------------------------------------------------- */

.mark {
  position: absolute;
  z-index: -1;
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
  opacity: 0.55;
}
.mark::before,
.mark::after {
  content: '';
  position: absolute;
  background: var(--mark-color, var(--line-hi));
}
.mark::before { inset-inline: 0; top: 50%; height: 1px; }
.mark::after  { inset-block: 0; left: 50%; width: 1px; }

.mark--accent { --mark-color: var(--accent); opacity: 0.7; }

/* --- Randziffer -----------------------------------------------------------
   Winzige Monospace-Marke am Rand, wie eine Blattnummer.
   -------------------------------------------------------------------------- */

.edgenote {
  position: absolute;
  z-index: -1;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.5;
  pointer-events: none;
  white-space: nowrap;
}
.edgenote--rotate {
  writing-mode: vertical-rl;
  letter-spacing: 0.3em;
}

@media (max-width: 56rem) {
  .mark, .edgenote { display: none; }
}