/*
  landing.css — Landing Page (Version 17)
  Eigenständige, sehr kleine Seite VOR der eigentlichen 5-Szenen-Seite
  (site.html): ein einzelner, zentrierter Button, dessen Optik in einem
  durchgehenden 4s-Takt zwischen den auf der Seite verfügbaren Themes
  hindurchblendet ("Letterista" ↔ "Arcade" ↔ "Atelier", wie eine
  filmische Überblendung) — ein Klick öffnet site.html direkt mit dem
  gerade sichtbaren Theme (siehe js/landing.js). Bewusst NICHT auf
  base.css aufgesetzt: die Landing Page teilt sich keine Szenen-/Nav-
  Mechanik mit der Hauptseite, ein schlankes eigenes Stylesheet hält sie
  unabhängig wartbar.

  Button-Farben/-Schrift sind exakt aus den echten Theme-Variablen (siehe
  css/themes/letterista.css, arcade.css bzw. atelier.css) sowie deren
  tatsächlichem Hero-Button-/Stempel-Styling abgeleitet, damit die
  Landing Page ehrlich vorwegnimmt, was auf der Seite wartet — nicht neu
  erfundene Farben. Der Button selbst ist bewusst IMMER ein vollständiger
  Kreis (kein Pille/scharfe-Kante-Formwechsel mehr) — nur Farbe/Schrift/
  Schatten blenden durch.

  Wortmarke "Telltale" bleibt bewusst konstant, unabhängig vom gerade
  durchblendenden Look, als ruhiger, feststehender Anker über dem Button.
  "Create" und "Vision" blenden dagegen SEIT Version 17 als echte Kinder
  des Buttons mit durch (siehe unten).

  Version 12: "VISION" füllt jetzt fast die volle Kreisbreite (größere
  Schrift, engerer Innenabstand) und ist damit klar die Hauptaussage des
  Buttons. "Create" ist im Gegenzug von der Band/Ribbon-Diagonale, die
  vorher mittig über den Button lief, zu einer kleinen, gedrehten
  Signatur in der linken oberen Ecke der Kreisfläche gewandert — dezent,
  transparent, stört "Vision" nicht mehr. Dazu ist mit Atelier ein
  dritter Look in den Wechsel-Zyklus aufgenommen.

  Version 16: "Create" blieb laut Feedback weiterhin schwer lesbar/zu
  klein — jetzt deutlich größer, dazu mit einer sehr transparenten
  Kreisfläche + feinem Ring hinterlegt, damit es wie ein echtes
  Stempel-Siegel wirkt statt nur kleiner Randtext. "Telltale" ist ebenfalls
  größer. Die feste Marken-Schrift Bricolage Grotesque ist für beide
  Elemente durch die Schriften des Atelier-Themes ("gelbes Design")
  ersetzt: Caveat (große Handschrift) für "Telltale", Work Sans (klare
  Groteske, groß/uppercase) für "Create" — bewusst zwei unterschiedliche
  Charaktere wie Signatur und Stempel-Abdruck auf einem echten Siegel. Der
  Button selbst hat jetzt zusätzlich eine helle Kante oben + dunkle Kante
  unten + weichen Streuschatten (in allen drei Looks strukturell gleich),
  damit er gewölbt/drückbar statt flach wirkt.

  Version 17: "Create" wandert vom Stempel-Siegel in der Ecke IN den
  Button hinein — als kleine Zeile über "Vision" gestapelt, deutlich
  kleiner, in dessen Versalien. Beide Wörter zusammen ("Create Vision")
  bilden mit der (jetzt nochmals größeren) Wortmarke "Telltale" darüber
  den vollständigen Seitentitel: "Telltale — Create Vision". Da beide
  Wörter jetzt echte Kinder von .landing__btn sind, blenden sie mit dem
  Button selbst durch (Farbe/Schrift je Look) statt wie zuvor als
  eigenständiges, fest stehendes Element zu stehen.

  Der Look-Wechsel läuft komplett EINHEITLICH (eine gemeinsame Dauer für
  Button, Hintergrund und Glow, kein versetztes Timing mehr) und LINEAR
  (konstante Geschwindigkeit statt Ease-Kurve) in einem langsamen,
  durchgehenden 4s-Takt — INTERVAL_MS in js/landing.js ist bewusst exakt
  --lp-duration: die nächste Blende startet immer genau dann, wenn die
  vorherige fertig ist, ohne Stillstand dazwischen. Das ergibt einen
  ruhigen, sehr weichen Dauer-Crossfade statt der vorherigen hektischeren,
  schnelleren, uneinheitlich getakteten Version.
*/

* { box-sizing: border-box; }

:root {
  --lp-duration: 4s;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: #0a0a14;
  transition: background-color var(--lp-duration) linear;
}

body[data-look="letterista"] { background: #17254a; }
body[data-look="arcade"] { background: #07061a; }
body[data-look="atelier"] { background: #f6c63c; }
body[data-look="kreis"] { background: #0b0b10; }
body[data-look="raster"] { background: #0a0a0c; }
/* Version 92: sechs weitere Looks ergänzt (vorhang/glas/werkbank/terminal/
   kino/zine) — vorher tauchten die neueren, zuletzt entworfenen Themes nie
   als erster Eindruck auf der Landing Page auf, weil BASE_LOOKS in
   js/landing.js seit deren Einführung nicht mehr erweitert wurde. Farben/
   Schriften hier sind 1:1 aus den echten Theme-Variablen der jeweiligen
   css/themes/<name>.css übernommen, exakt nach demselben Prinzip wie bei
   den ersten fünf Looks oben. */
body[data-look="vorhang"] { background: #0a0302; }
body[data-look="glas"] { background: #06070d; }
body[data-look="werkbank"] { background: #d7d5d0; }
body[data-look="terminal"] { background: #04070a; }
body[data-look="kino"] { background: #07070a; }
body[data-look="zine"] { background: #e8e2d3; }

/* Dezenter Branding-Hinweis unten rechts — blendet farblich/typografisch
   im selben Takt (--lp-duration) mit dem Look durch wie Button/Hintergrund,
   statt eine einzelne, auf allen drei Hintergründen (dunkles Navy, Fast-
   Schwarz, helles Senfgelb) gleich gut lesbare Farbe zu suchen. */
.branding-badge {
  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 2;
  margin: 0;
  font-size: .95rem;
  opacity: .8;
  pointer-events: none;
  white-space: nowrap;
  transition: color var(--lp-duration) linear;
}
body[data-look="letterista"] .branding-badge {
  font-family: "Caveat", cursive;
  font-size: 1.25rem;
  color: #e8b13c;
  transform: rotate(-3deg);
}
body[data-look="arcade"] .branding-badge {
  font-family: "VT323", monospace;
  font-size: 1.15rem;
  color: #45f0a6;
  text-shadow: 0 0 6px rgba(69, 240, 166, .5);
}
body[data-look="arcade"] .branding-badge::before {
  content: "// ";
}
body[data-look="atelier"] .branding-badge {
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  color: #b01c3e;
  transform: rotate(2deg);
}
body[data-look="kreis"] .branding-badge {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  color: #f4f4f6;
  opacity: .6;
}
body[data-look="raster"] .branding-badge {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #c3fffc;
  opacity: .85;
}
body[data-look="vorhang"] .branding-badge {
  font-family: "Fragment Mono", monospace;
  color: #e85a2a;
  text-transform: uppercase;
  letter-spacing: .06em;
}
body[data-look="glas"] .branding-badge {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  color: #8fb8ff;
  opacity: .75;
}
body[data-look="werkbank"] .branding-badge {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #1a44c4;
}
body[data-look="terminal"] .branding-badge {
  font-family: "JetBrains Mono", monospace;
  color: #3dff86;
  text-shadow: 0 0 6px rgba(61, 255, 134, .5);
}
body[data-look="terminal"] .branding-badge::before {
  content: "$ ";
}
body[data-look="kino"] .branding-badge {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: #e7b64b;
}
body[data-look="zine"] .branding-badge {
  font-family: "Permanent Marker", cursive;
  font-size: 1.2rem;
  color: #ff2e63;
  transform: rotate(-2deg);
}

@media (max-width: 40rem) {
  .branding-badge { font-size: .8rem; }
  body[data-look="letterista"] .branding-badge,
  body[data-look="atelier"] .branding-badge { font-size: 1rem; }
  body[data-look="arcade"] .branding-badge { font-size: .95rem; }
  body[data-look="kreis"] .branding-badge,
  body[data-look="raster"] .branding-badge { font-size: .78rem; }
  body[data-look="kino"] .branding-badge,
  body[data-look="zine"] .branding-badge { font-size: .95rem; }
}

/* Weiches Glow-Blob mittig hinter dem Button — atmet leicht, Farbton folgt
   dem aktuellen Look. Rein dekorativ, blockiert keine Klicks. */
.landing__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 54%, var(--lp-glow-color, rgba(215, 168, 63, .28)) 0%, transparent 62%);
  transition: background-color var(--lp-duration) linear;
  animation: landing-breathe 6.5s ease-in-out infinite;
}
body[data-look="letterista"] .landing__glow { --lp-glow-color: rgba(232, 177, 60, .3); }
body[data-look="arcade"] .landing__glow { --lp-glow-color: rgba(33, 230, 255, .28); }
body[data-look="atelier"] .landing__glow { --lp-glow-color: rgba(176, 28, 62, .3); }
body[data-look="kreis"] .landing__glow { --lp-glow-color: rgba(163, 230, 53, .26); }
body[data-look="raster"] .landing__glow { --lp-glow-color: rgba(195, 255, 252, .22); }
body[data-look="vorhang"] .landing__glow { --lp-glow-color: rgba(232, 90, 42, .3); }
body[data-look="glas"] .landing__glow { --lp-glow-color: rgba(143, 184, 255, .26); }
body[data-look="werkbank"] .landing__glow { --lp-glow-color: rgba(26, 68, 196, .18); }
body[data-look="terminal"] .landing__glow { --lp-glow-color: rgba(61, 255, 134, .26); }
body[data-look="kino"] .landing__glow { --lp-glow-color: rgba(231, 182, 75, .28); }
body[data-look="zine"] .landing__glow { --lp-glow-color: rgba(255, 46, 99, .22); }

@keyframes landing-breathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Sehr feines Punktraster im Hintergrund -- Default/Fallback, falls ein
   Look unten keine eigene Signatur bekommt. */
.landing__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Version 99, Nutzer-Feedback: die Landing Page sollte klarer vermitteln,
   dass hinter jedem Look ein WIRKLICH eigenständiges Design steckt, nicht
   nur eine andere Farbe. Jedes der elf Muster unten ist 1:1 aus dem
   tatsächlichen Hintergrund-/Textur-Vokabular des jeweiligen echten
   Themes übernommen (siehe css/themes/<name>.css), nur in Deckkraft/
   Skalierung fürs kleine Landing-Canvas angepasst -- reines CSS
   (Gradients bzw. dieselbe bereits im Atelier-Theme verwendete Inline-
   SVG-Rauschtextur als data:-URI), also keine zusätzlichen Assets/
   Requests. Da background-image nicht überblendbar ist, wechselt das
   Muster pro Blätter-Schritt hart -- gewollt: gerade dieser harte Schnitt
   macht "das ist jetzt ein ANDERER Entwurf" nebenbei nochmal deutlicher,
   während Button und Hintergrundfarbe weiter weich überblenden. */
body[data-look="letterista"] .landing__grid {
  opacity: .7;
  background-image: radial-gradient(rgba(232, 177, 60, .22) 1.6px, transparent 1.6px);
  background-size: 22px 22px;
}
body[data-look="arcade"] .landing__grid {
  opacity: .8;
  background-image:
    linear-gradient(rgba(33, 230, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 230, 255, .09) 1px, transparent 1px);
  background-size: 32px 32px;
}
body[data-look="atelier"] .landing__grid {
  opacity: .55;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC43IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCUyM24pIiBvcGFjaXR5PSIwLjM1Ii8+PC9zdmc+"),
    radial-gradient(rgba(176, 28, 62, .18) 1.5px, transparent 1.5px);
  background-size: 180px 180px, 22px 22px;
}
body[data-look="kreis"] .landing__grid {
  opacity: .6;
  background-image: radial-gradient(rgba(163, 230, 53, .2) 1.6px, transparent 1.6px);
  background-size: 30px 30px;
}
body[data-look="raster"] .landing__grid {
  opacity: .8;
  background-image:
    repeating-linear-gradient(0deg, rgba(195, 255, 252, .09) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(195, 255, 252, .09) 0 1px, transparent 1px 40px);
  background-size: auto;
}
body[data-look="vorhang"] .landing__grid {
  opacity: .55;
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 34px, transparent 34px 68px);
}
body[data-look="glas"] .landing__grid {
  opacity: .6;
  background-image: linear-gradient(115deg, rgba(143, 184, 255, .09) 0%, transparent 35%, transparent 65%, rgba(143, 184, 255, .09) 100%);
  background-size: 100% 100%;
}
body[data-look="werkbank"] .landing__grid {
  opacity: .8;
  background-image:
    linear-gradient(to right, rgba(26, 68, 196, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 68, 196, .09) 1px, transparent 1px);
  background-size: 36px 36px;
}
body[data-look="terminal"] .landing__grid {
  opacity: .8;
  background-image: repeating-linear-gradient(to bottom, rgba(61, 255, 134, .09) 0 1px, transparent 1px 3px);
}
body[data-look="kino"] .landing__grid {
  opacity: .6;
  background-image: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(240, 236, 226, .07) 13px 15px, transparent 15px 42px);
}
body[data-look="zine"] .landing__grid {
  opacity: .8;
  background-image:
    radial-gradient(rgba(22, 19, 14, .1) 1px, transparent 1.4px),
    repeating-linear-gradient(94deg, rgba(22, 19, 14, .04) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(6deg, rgba(22, 19, 14, .03) 0 3px, transparent 3px 9px);
  background-size: 5px 5px, auto, auto;
}

.landing {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 3rem);
  padding: 1.5rem;
  text-align: center;
}

/* "Telltale" — Wortmarke über dem Button. Version 16: statt der festen
   Bricolage-Grotesque-Markenschrift jetzt die Schrift des Atelier-Themes
   ("gelbes Design") — die große, lockere Handschrift Caveat, wie ein
   Signatur-Schriftzug. Bewusst konstant (keine Look-Abhängigkeit): ein
   ruhiger Fixpunkt über dem durchblendenden Button, jetzt spürbar größer. */
.landing__wordmark {
  margin: 0;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(3.7rem, 11.5vw, 7.1rem);
  line-height: .9;
  letter-spacing: 0;
  text-transform: none;
  color: #f4ecd8;
  text-shadow: 0 .12em .35em rgba(0, 0, 0, .4), 0 0 1.6rem rgba(215, 168, 63, .24);
}

.landing__stage {
  position: relative;
}

/* Version 17: "Create" ist keine separate Stempel-Ecke mehr, sondern Teil
   des Buttons selbst — als kleine Zeile ÜBER "Vision" gestapelt. Beide
   Wörter zusammen ("Create Vision") ergeben mit der Wortmarke "Telltale"
   darüber den vollständigen Titel der Seite: "Telltale — Create Vision".
   "Create" bleibt bewusst klar kleiner (eigenes clamp() statt reiner
   em-Relation zu "Vision", damit es bei Arcades Pixelfont trotzdem lesbar
   bleibt) und in Versalien als ruhige Unterzeile; "Vision" bleibt die
   große Hauptaussage des Buttons. Beide morphen jetzt WIE der Button
   selbst mit dem Look mit (Farbe/Schrift), da sie echte Kinder von
   .landing__btn sind statt eines eigenständigen, fest stehenden Elements. */
/* Version 20: "Create" ist die leise Zwischenzeile, "Vision" der zweite
   Teil des Titels. Deshalb steht "Vision" jetzt IMMER in derselben
   Schrift wie die Wortmarke "Telltale" darüber (Caveat) — unabhängig
   vom gerade durchblendenden Look — und ist deutlich größer. Zusammen
   lesen sich Wortmarke und Button dadurch als EIN zusammenhängender
   Titel ("Telltale · Vision"), zwischen dessen beiden Hälften "Create"
   nur noch als dezente, gesperrte Verbindungszeile sitzt. */
.landing__btn-create {
  display: block;
  font-family: "Work Sans", sans-serif;
  font-size: clamp(.5rem, 1.35vw, .64rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .34em;
  /* schiebt die optische Mitte des gesperrten Worts zurück in die
     Kreismitte — sonst zieht das Spacing es nach rechts */
  text-indent: .34em;
  line-height: 1;
  opacity: .6;
  margin-bottom: .34em;
}
.landing__btn-vision {
  display: block;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(3rem, 8.2vw, 4.1rem);
  letter-spacing: 0;
  text-transform: none;
  line-height: .92;
}

.landing__btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(11.5rem, 24vw, 15.5rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 0 .6rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline-offset: 4px;
  transition:
    background-color var(--lp-duration) linear,
    color var(--lp-duration) linear,
    box-shadow var(--lp-duration) linear,
    border-radius var(--lp-duration) linear,
    transform .25s ease;
  /* Ganz leichtes, dauerhaftes Atmen/Pulsieren — macht auf den ersten
     Blick klarer, dass es sich um einen klickbaren Button handelt und
     nicht nur um ein dekoratives Element. Bewusst sehr dezent (±1.5%
     Skalierung), damit der Look-Wechsel-Übergang nicht gestört wird. */
  animation: landing-pulse 3.4s ease-in-out infinite;
}
@keyframes landing-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* Lichtsaum + Wölbung (Nutzer-Wunsch): der Button soll sich klarer als
   greifbares Objekt vom Hintergrund abheben statt als reine Farbfläche zu
   wirken. Zwei Ergänzungen, beide bewusst dezent und theme-unabhängig
   (reines Weiß/Transparenz), damit sie über alle drei Looks hinweg
   gleich funktionieren, ohne die Look-spezifischen Schatten/Farben aus
   Version 16 unten zu verändern:
   - ::before: ein schmaler Ring (per mask-composite:exclude aus einer
     gefüllten Kreisfläche ausgeschnitten), gefüllt mit einem
     conic-gradient-Lichtstreifen, der per rotate() endlos am Rand
     entlangläuft.
   - ::after: eine weiche, leicht außermittige radiale Aufhellung
     (soft-light) für einen dezenten glasigen/gewölbten Glanz obenauf —
     zusammen mit dem bestehenden 5-Schatten-Set (Ring/Versatz/Hell-Kante/
     Dunkel-Kante/Streuschatten) ergibt das die gewünschte leicht
     räumliche Wirkung.
   Die Textzeilen bekommen weiter unten z-index, damit sie über beiden
   Pseudo-Elementen lesbar bleiben. */
.landing__btn::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, .95) 16deg,
    transparent 52deg,
    transparent 180deg,
    rgba(255, 255, 255, .55) 196deg,
    transparent 232deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .8;
  filter: blur(.5px);
  animation: landing-rim-spin 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.landing__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), transparent 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}
.landing__btn-create, .landing__btn-vision {
  position: relative;
  z-index: 2;
}
@keyframes landing-rim-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .landing__btn::before { animation: none; }
}
.landing__btn:hover, .landing__btn:focus-visible {
  animation-play-state: paused;
  transform: translateY(-.15rem) scale(1.03);
}
.landing__btn:active {
  animation-play-state: paused;
  transform: translateY(0) scale(.99);
  filter: brightness(.96);
}

/* Version 16: jeder Look bekommt zusätzlich zu seinem farbigen Ring/
   Versatz-Schatten eine helle Kante oben (wirkt wie Licht von oben) und
   einen dunklen Schatten unten (Tiefe) plus einen weichen Streuschatten
   unter dem ganzen Button — macht aus der bisher eher flachen Fläche
   einen spürbar gewölbten, "drückbaren" Button statt eines reinen
   Farbkreises. Alle drei Looks nutzen dieselbe 5-Schatten-Struktur
   (Ring, Versatz, Hell-Kante, Dunkel-Kante, Streuschatten), damit die
   Überblendung zwischen den Looks sauber durchläuft. */
body[data-look="letterista"] .landing__btn {
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  background: #e1622b;
  color: #17254a;
  box-shadow:
    0 0 0 4px var(--lp-ring, #17254a),
    .35rem .35rem 0 0 #e8b13c,
    inset 0 .14em .3em rgba(255, 255, 255, .38),
    inset 0 -.18em .32em rgba(0, 0, 0, .3),
    0 .65em 1.5em rgba(0, 0, 0, .38);
}
body[data-look="arcade"] .landing__btn {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(.82rem, 2.5vw, 1.15rem);
  letter-spacing: 0;
  text-transform: uppercase;
  background: #21e6ff;
  color: #07061a;
  box-shadow:
    0 0 0 3px #07061a,
    .3rem .3rem 0 0 #ff3d8b,
    inset 0 .14em .3em rgba(255, 255, 255, .45),
    inset 0 -.18em .32em rgba(0, 0, 0, .35),
    0 .65em 1.5em rgba(0, 0, 0, .4), 0 0 32px rgba(33, 230, 255, .5);
}
/* Atelier: cremefarbener Kreis mit handschriftlichem Schriftzug (Caveat) in
   Bordeaux — dasselbe warme Rezeptkarten-Vokabular wie im Theme selbst. */
body[data-look="atelier"] .landing__btn {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(2.3rem, 6.6vw, 3.15rem);
  letter-spacing: 0;
  text-transform: none;
  background: #fefcf3;
  color: #b01c3e;
  box-shadow:
    0 0 0 4px var(--lp-ring, #3c280e),
    .35rem .35rem 0 0 #f6c63c,
    inset 0 .14em .3em rgba(255, 255, 255, .55),
    inset 0 -.18em .32em rgba(60, 40, 14, .16),
    0 .65em 1.5em rgba(60, 40, 14, .35);
}
/* Kreis: flacher, kräftig grüner Kreis statt Stempel-Optik — ruhiger
   Farbblock, wie die "Join"-Fläche im Vorbild, keine Versatz-Schatten. */
body[data-look="kreis"] .landing__btn {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  letter-spacing: -.01em;
  text-transform: none;
  background: #a3e635;
  color: #0b0b10;
  box-shadow:
    0 0 0 4px var(--lp-ring, #0b0b10),
    0 .9em 2em rgba(163, 230, 53, .28);
}
/* Raster: scharf-eckiger Zyan-Button (kein Kreis) mit monospace-Schriftzug
   in Großbuchstaben — dasselbe technisch/redaktionelle Vokabular wie der
   Kontakt-CTA im Theme selbst (siehe raster.css: career-cv-btn/contact-form
   button, ebenfalls eckig statt rund/gestempelt). */
body[data-look="raster"] .landing__btn {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 6px;
  background: #c3fffc;
  color: #0a0a0c;
  box-shadow:
    0 0 0 4px var(--lp-ring, #0a0a0c),
    0 .9em 2em rgba(195, 255, 252, .22);
}

/* Vorhang: warmes Theaterrot/Orange auf tiefem Bühnen-Schwarz, Fragment
   Mono als gesperrte Unterzeile — dasselbe Vorhang-Vokabular wie im Theme
   selbst (Instrument Serif für Headlines, Fragment Mono für Meta-Text). */
body[data-look="vorhang"] .landing__btn {
  font-family: "Fragment Mono", monospace;
  font-weight: 700;
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  background: #e85a2a;
  color: #0a0302;
  box-shadow:
    0 0 0 4px var(--lp-ring, #0a0302),
    .35rem .35rem 0 0 #8a2018,
    inset 0 .14em .3em rgba(255, 255, 255, .3),
    inset 0 -.18em .32em rgba(0, 0, 0, .35),
    0 .65em 1.5em rgba(0, 0, 0, .4);
}
/* Glas: helles, kühles Blau auf fast-schwarzem Grund, Sora wie im Theme —
   ruhiger Farbblock statt Stempel-Optik, passend zum "kühlen Glas"-Look. */
body[data-look="glas"] .landing__btn {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 3.8vw, 1.8rem);
  letter-spacing: -.005em;
  text-transform: none;
  background: #8fb8ff;
  color: #06070d;
  box-shadow:
    0 0 0 4px var(--lp-ring, #06070d),
    0 .9em 2em rgba(143, 184, 255, .3);
}
/* Werkbank: Signalblau auf Beton-Creme, Oswald in Versalien — dasselbe
   Werkstatt-Vokabular wie die Theme-Buttons selbst. */
body[data-look="werkbank"] .landing__btn {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  background: #1a44c4;
  color: #f2f1ee;
  box-shadow:
    0 0 0 4px var(--lp-ring, #14161a),
    .35rem .35rem 0 0 #6d7278,
    inset 0 .14em .3em rgba(255, 255, 255, .2),
    inset 0 -.18em .32em rgba(0, 0, 0, .3),
    0 .65em 1.5em rgba(0, 0, 0, .3);
}
/* Terminal: Phosphor-Grün auf CRT-Schwarz, JetBrains Mono — Leuchtschrift-
   Optik wie das eigentliche Theme. */
body[data-look="terminal"] .landing__btn {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  background: #04070a;
  color: #3dff86;
  box-shadow:
    0 0 0 3px #3dff86,
    inset 0 .14em .3em rgba(61, 255, 134, .12),
    0 .65em 1.5em rgba(0, 0, 0, .5), 0 0 32px rgba(61, 255, 134, .35);
}
/* Kino: Lampenlicht-Gelb auf Vorführraum-Schwarz, Bebas Neue — dasselbe
   Kino-Vokabular wie die Klappe/Rolle im Theme. */
body[data-look="kino"] .landing__btn {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 4.8vw, 2.3rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  background: #e7b64b;
  color: #07070a;
  box-shadow:
    0 0 0 4px var(--lp-ring, #07070a),
    .35rem .35rem 0 0 #c8452f,
    inset 0 .14em .3em rgba(255, 255, 255, .35),
    inset 0 -.18em .32em rgba(0, 0, 0, .3),
    0 .65em 1.5em rgba(0, 0, 0, .4);
}
/* Zine: Risopink auf Zeitungspapier, Archivo Black — dasselbe Risograph-
   Vokabular wie das Theme selbst. */
body[data-look="zine"] .landing__btn {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 3.2vw, 1.5rem);
  letter-spacing: 0;
  text-transform: uppercase;
  background: #ff2e63;
  color: #e8e2d3;
  box-shadow:
    0 0 0 4px var(--lp-ring, #16130e),
    .3rem .3rem 0 0 #2b5bd7,
    inset 0 .14em .3em rgba(255, 255, 255, .18),
    inset 0 -.18em .32em rgba(0, 0, 0, .25),
    0 .65em 1.5em rgba(0, 0, 0, .35);
}

/* Der Ring um den Button soll wie ein Sticker gegen die Seite abgesetzt
   wirken — Farbe folgt der jeweils aktiven Hintergrundfarbe. */
body[data-look="letterista"] .landing__btn { --lp-ring: #17254a; }
body[data-look="arcade"] .landing__btn { --lp-ring: #07061a; }
body[data-look="atelier"] .landing__btn { --lp-ring: #3c280e; }
body[data-look="kreis"] .landing__btn { --lp-ring: #0b0b10; }
body[data-look="raster"] .landing__btn { --lp-ring: #0a0a0c; }
body[data-look="vorhang"] .landing__btn { --lp-ring: #0a0302; }
body[data-look="glas"] .landing__btn { --lp-ring: #06070d; }
body[data-look="werkbank"] .landing__btn { --lp-ring: #14161a; }
body[data-look="kino"] .landing__btn { --lp-ring: #07070a; }
body[data-look="zine"] .landing__btn { --lp-ring: #16130e; }

/* Version 101: Sichtbarer Tastaturfokus. Die Landing Page baut bewusst
   nicht auf base.css auf (siehe Dateikopf) — die dort in Version 101
   ergänzte :focus-visible-Grundregel greift hier also nicht, und der
   Button blieb als einziges Bedienelement der Seite ohne erkennbaren
   Fokus. Farbe bewusst weiß statt Akzentfarbe: der Akzent wechselt hier
   im 4-Sekunden-Takt mit dem Look, ein mitwandernder Fokusring wäre
   unruhig und auf hellen Looks (Atelier, Werkbank, Zine) zeitweise kaum
   zu sehen. */
.landing__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
}
body[data-look="atelier"] .landing__btn:focus-visible,
body[data-look="werkbank"] .landing__btn:focus-visible,
body[data-look="zine"] .landing__btn:focus-visible {
  outline-color: #16130e; /* auf den drei hellen Looks umgekehrt */
}

@media (prefers-reduced-motion: reduce) {
  .landing__glow, .landing__btn { animation: none; }
  .landing__btn, .landing__wordmark, .landing__glow, body {
    transition-duration: .01ms !important;
  }
}