/* Startseite -- Auswahl zwischen CS2 und League of Legends.

   Zwei Haelften ueber den ganzen Bildschirm, schraeger Schnitt in der Mitte.
   Beide Haelften liegen deckungsgleich uebereinander und werden per clip-path
   beschnitten: --m ist die Lage des Schnitts, --s seine halbe Schraege. Wer
   eine Haelfte ansteuert, schiebt --m um ein Stueck zur anderen Seite.

   clip-path beschneidet auch die Klickflaeche -- die schraege Kante ist also
   genau dort, wo man sie sieht. */

/* Seit 22.09.2026 in der Marker-Welt der CS2-Seite: Namen in Handschrift,
   der Schnitt ein gezeichneter Markerstrich (start.js), Filme bleiben. */
:root {
  --ink:    #0b0c0e;
  --text:   #f1eee6;
  --dim:    #c2bdb2;
  --marker: #f6f3ea;
  --cs2:    #e5ac44;   /* T-Amber wie auf der CS2-Seite */
  --lol:    #c8aa6e;   /* Gold der LoL-Oberflaeche */
  --hand:   "Permanent Marker", "Segoe Print", cursive;
  --sans:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:   "Archivo Schmal", "Archivo", "Segoe UI", sans-serif;
  caret-color: transparent;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.tabular { font-variant-numeric: tabular-nums; }

.unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.wahl {
  --m: 50%;
  --s: 4vw;
  position: fixed;
  inset: 0;
  /* Die Kurve schiesst ueber das Ziel hinaus und federt zurueck: die Haelfte
     unter dem Mauszeiger wird kurz groesser als sie bleibt. */
  --feder: cubic-bezier(.3, 2.4, .45, 1);
  transition: --m .55s var(--feder);
}

/* Damit --m weich wandert statt zu springen, muss der Browser wissen, dass es
   eine Laenge ist. Ohne @property (aeltere Firefox) springt der Schnitt --
   bedienbar bleibt es trotzdem. */
@property --m {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 50%;
}

.wahl:has(.haelfte--cs2:hover),
.wahl:has(.haelfte--cs2:focus-visible) { --m: 58%; }
.wahl:has(.haelfte--lol:hover),
.wahl:has(.haelfte--lol:focus-visible) { --m: 42%; }

/* Die Schnittkante selbst: ein schmaler heller Streifen entlang der Schraege. */
.wahl::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--marker);
  opacity: .9;                   /* Rueckfall ohne start.js; mit Skript zeichnet .schnitt */
  clip-path: polygon(
    calc(var(--m) + var(--s) - 1.5px) 0, calc(var(--m) + var(--s) + 1.5px) 0,
    calc(var(--m) - var(--s) + 1.5px) 100%, calc(var(--m) - var(--s) - 1.5px) 100%);
}

.haelfte {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.haelfte--cs2 {
  --akzent: var(--cs2);
  clip-path: polygon(0 0, calc(var(--m) + var(--s)) 0, calc(var(--m) - var(--s)) 100%, 0 100%);
}

.haelfte--lol {
  --akzent: var(--lol);
  clip-path: polygon(calc(var(--m) + var(--s)) 0, 100% 0, 100% 100%, calc(var(--m) - var(--s)) 100%);
}

/* Der Film ist breiter als die Haelfte in Ruhe (72 % statt 50 %): so muss er
   beim Verschieben des Schnitts nicht neu skaliert werden. Die Reserve deckt
   auch den Ausschlag der Feder und die obere Spitze der Schraege (+4vw). */
.haelfte__film {
  position: absolute;
  top: 0;
  width: 72%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.62);
  transform-origin: center;
  transition: filter .45s ease, transform .55s var(--feder);
  pointer-events: none;
}

.haelfte--cs2 .haelfte__film { left: 0; }
.haelfte--lol .haelfte__film { right: 0; }

/* Abdunklung nach unten und zur Mitte, damit die Schrift auf jedem Bild steht. */
.haelfte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(8, 11, 15, .15), rgba(8, 11, 15, .72) 85%),
    linear-gradient(180deg, rgba(8, 11, 15, .35), transparent 30%, transparent 60%, rgba(8, 11, 15, .8));
  transition: opacity .45s ease;
}

.haelfte:hover .haelfte__film,
.haelfte:focus-visible .haelfte__film { filter: saturate(1.05) brightness(.9); transform: scale(1.05); }

.wahl:has(.haelfte:hover) .haelfte:not(:hover) .haelfte__film { filter: saturate(.4) brightness(.35); }

.haelfte__text {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 50%;
  padding: 0 clamp(1rem, 4vw, 3rem);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .75);
  transition: transform .55s var(--feder);
}

.haelfte:hover .haelfte__text,
.haelfte:focus-visible .haelfte__text { transform: translateY(-50%) scale(1.07); }

.haelfte--cs2 .haelfte__text { left: 0; }
.haelfte--lol .haelfte__text { right: 0; }

.haelfte__kurz {
  position: relative;
  z-index: 0;
  font: 400 clamp(4.8rem, 15vw, 13.5rem)/.9 var(--hand);
  letter-spacing: -.01em;
  color: var(--marker);
  /* Schreibt sich von links nach rechts, einmal beim Laden. */
  animation: schreiben .9s cubic-bezier(.35, .7, .2, 1) .15s both;
}
.haelfte--lol .haelfte__kurz { animation-delay: .5s; }
@keyframes schreiben { from { clip-path: inset(-10% 100% -10% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }

/* Textmarker in der Farbe des Spiels, schraeg hinter dem Namen. */
.haelfte__kurz::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .5em -.12em .04em -.1em;
  background: var(--akzent);
  opacity: .72;
  -webkit-mask: url("cs2/striche/band-1.svg") center / 100% 100% no-repeat;
          mask: url("cs2/striche/band-1.svg") center / 100% 100% no-repeat;
  transform: rotate(-2deg);
}

.haelfte__lang {
  font: 600 clamp(1rem, 1.6vw, 1.4rem)/1.2 var(--cond);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--marker);
  padding-left: .28em;           /* gleicht die Sperrung nach dem letzten Buchstaben aus */
}

.haelfte__zahl {
  min-height: 1.4em;             /* kein Springen, wenn die Zahl nachgeladen ist */
  margin-top: .5rem;
  color: var(--marker);
  font: 400 clamp(1.1rem, 1.6vw, 1.45rem)/1.2 var(--hand);
}

.haelfte__los .ic {
  display: inline-block;
  width: 1.1em; height: 1.1em;
  margin-left: .35em;
  vertical-align: -.2em;
  background: currentColor;
  -webkit-mask: url("cs2/striche/pfeil-r.svg") center / contain no-repeat;
          mask: url("cs2/striche/pfeil-r.svg") center / contain no-repeat;
}
.haelfte__los {
  margin-top: 1.1rem;
  padding: .7rem 1.5rem;
  border: 1.5px solid rgb(246 243 234 / .6);
  border-radius: 3px;
  font: 600 1.05rem/1 var(--cond);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgb(11 12 14 / .5);
  text-shadow: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.haelfte:hover .haelfte__los,
.haelfte:focus-visible .haelfte__los { background: var(--marker); border-color: var(--marker); color: var(--ink); }

/* Der gezeichnete Schnitt (start.js) -- liegt ueber beiden Haelften. */
.wahl.mit-strich::after { opacity: 0; }
.schnitt {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--marker);
}
.schnitt path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: strich-ziehen .8s cubic-bezier(.35, .7, .2, 1) .05s forwards;
}
@keyframes strich-ziehen { to { stroke-dashoffset: 0; } }

/* Der Fokusring laege auf der beschnittenen Kante und waere halb unsichtbar --
   deshalb zeigt ihn der Knopf in der Haelfte. */
.haelfte:focus-visible { outline: none; }
.haelfte:focus-visible .haelfte__los { outline: 2px solid #fff; outline-offset: 3px; }

.filmknopf {
  position: absolute;
  z-index: 4;
  right: max(.9rem, env(safe-area-inset-right));
  bottom: max(.9rem, env(safe-area-inset-bottom));
  padding: .4rem .8rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 3px;
  background: rgba(8, 11, 15, .6);
  color: var(--dim);
  font: 600 .85rem/1 var(--cond);
  letter-spacing: .03em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.filmknopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .6); }
.filmknopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Klick-Rueckmeldung: ein Aufleuchten, keine Bewegung -- bleibt deshalb auch
   bei reduzierter Bewegung. */
@keyframes aufleuchten { from { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); } to { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0); } }
.filmknopf.geklickt,
.haelfte.geklickt .haelfte__los { animation: aufleuchten .45s ease-out; }

/* ---------- Hochkant: oben und unten statt links und rechts --------------- */

@media (max-aspect-ratio: 4/5) {
  .wahl { --s: 5vh; }
  .wahl:has(.haelfte--cs2:hover), .wahl:has(.haelfte--cs2:focus-visible),
  .wahl:has(.haelfte--lol:hover), .wahl:has(.haelfte--lol:focus-visible) { --m: 50%; }

  .wahl::after {
    background: linear-gradient(90deg, var(--cs2), #fff 50%, var(--lol));
    clip-path: polygon(
      0 calc(var(--m) + var(--s) - 1.5px), 100% calc(var(--m) - var(--s) - 1.5px),
      100% calc(var(--m) - var(--s) + 1.5px), 0 calc(var(--m) + var(--s) + 1.5px));
  }
  .haelfte--cs2 { clip-path: polygon(0 0, 100% 0, 100% calc(var(--m) - var(--s)), 0 calc(var(--m) + var(--s))); }
  .haelfte--lol { clip-path: polygon(0 calc(var(--m) + var(--s)), 100% calc(var(--m) - var(--s)), 100% 100%, 0 100%); }

  .haelfte__film { width: 100%; height: 58%; }
  .haelfte--cs2 .haelfte__film { top: 0; }
  .haelfte--lol .haelfte__film { top: auto; bottom: 0; }

  .haelfte__text { width: 100%; top: 25%; }
  .haelfte--lol .haelfte__text { top: 75%; }
  .haelfte__kurz { font-size: clamp(3.5rem, 22vw, 7rem); }
  .haelfte__los { margin-top: .6rem; }
  .filmknopf { bottom: auto; top: max(.7rem, env(safe-area-inset-top)); }
}

/* Bewusst KEIN Block fuer prefers-reduced-motion: Davids Windows meldet es
   dauerhaft (Animationseffekte aus), und die Startseite soll sich trotzdem
   bewegen -- Entscheidung vom 20.09.2026. Anhalten: Knopf unten rechts. */

/* ---------- Was der Browser mitbringt ------------------------------------
   Textauswahl und Rollleiste kommen sonst in Systemfarben - helles Blau und
   ein breiter grauer Balken mitten im dunklen Bild. Sie gehoeren zur Seite
   wie alles andere; unter /cs2/ steht derselbe Block. */

::selection { background: var(--marker); color: var(--ink); }

html { scrollbar-width: thin; scrollbar-color: #232c38 var(--ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: #232c38;
  border: 3px solid var(--ink);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #35414f; }