/* =====================================================================
   Krauss & Krauss – Stylesheet im 80s-/Synthwave-Look
   ---------------------------------------------------------------------
   - Keine externen Ressourcen: Schriften liegen im Ordner /fonts
   - Farben zentral unter :root änderbar
   ===================================================================== */

/* ---------- Schriften (SIL Open Font License, siehe /fonts) ---------- */
@font-face {
  font-family: "Boldonse";
  src: url("../fonts/boldonse.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Tektur";
  src: url("../fonts/tektur.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen.woff2") format("woff2");
  font-display: swap;
}

/* ---------- Farben & Grundwerte ---------- */
:root {
  --nacht: #0b0221;
  --magenta: #ff2bd6;
  --cyan: #22f3ff;
  --gelb: #ffd319;
  --text: #f5edff;
  --text-leise: #c9b8e8;
  --gitter-farbe: rgba(255, 56, 214, .85);
  --tunnel-takt: 2.7s;   /* Tempo des Tunnels: größer = langsamer */
  --farbe-ruhe: .7;      /* Farbsättigung, solange die Maus nicht über der Pyramide ist:
                            .7 = 30 % weniger (Filmlook), 1 = volle Farbe */

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-logo: "Boldonse", "Arial Black", Impact, system-ui, sans-serif;
  --schrift-tech: "Tektur", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --schrift-pixel: "Silkscreen", ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--nacht);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--nacht);
  color: var(--text);
  font: 400 1rem/1.65 var(--schrift);
  -webkit-font-smoothing: antialiased;
}

/* Röhrenbildschirm: feine Zeilen + dunkle Ecken (über allem, nicht klickbar) */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
body::before {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .5) 100%);
}
body::after {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .13) 0 1px, transparent 1px 3px);
}

a { color: var(--cyan); }
a:hover { color: #fff; }

:focus-visible {
  outline: 2px solid var(--gelb);
  outline-offset: 4px;
}

/* =====================================================================
   SZENE: Himmel, Sterne, Sonne, Gitterboden
   ===================================================================== */
.szene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.himmel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--horizont);
  background:
    radial-gradient(var(--sonne) calc(var(--sonne) * .7) at var(--scheibe-x, 50%) 100%, rgba(255, 60, 160, .45), transparent 70%),
    linear-gradient(180deg, #05010f 0%, #12043a 32%, #33095e 62%, #8e1580 88%, #ff3d8b 100%);
}

.sterne {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 68% 14%, #fff 50%, transparent 55%),
    radial-gradient(1.4px 1.4px at 38% 46%, #ffd6f5 50%, transparent 55%),
    radial-gradient(1px 1px at 84% 38%, #fff 50%, transparent 55%),
    radial-gradient(1.8px 1.8px at 52% 8%, #b8f9ff 50%, transparent 55%),
    radial-gradient(1px 1px at 26% 64%, #fff 50%, transparent 55%);
  background-size: 260px 210px, 330px 250px, 410px 290px, 190px 170px, 520px 330px, 230px 300px;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 85%);
}
@keyframes funkeln { to { opacity: .55; } }

/* Easter Egg: das Sternbild Orion mit Beteigeuze (aus echten Sternpositionen).
   Breitbild: im freien Himmel rechts neben der Sonne. */
.orion {
  --frei: calc((100% - var(--sonne)) / 2);    /* Himmel rechts neben der Sonne */
  --breite: max(64px, min(calc(var(--frei) * .55), calc((var(--horizont) - var(--kopf)) * .34)));
  display: block;
  position: absolute;
  top: calc(var(--kopf) + (var(--horizont) - var(--kopf)) * .1);
  /* mittig im freien Himmel – ist der zu schmal, rückt Orion oben in die rechte Ecke */
  left: min(calc(50% + var(--sonne) / 2 + var(--frei) / 2 - var(--breite) / 2), calc(100% - 3vw - var(--breite)));
  width: var(--breite);
}
.orion svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 2px rgba(190, 230, 255, .75));
}
.orion-linien {
  fill: none;
  stroke: #a8ecff;
  stroke-opacity: .3;
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Beteigeuze ist ein veränderlicher Stern: Ihr Schein pulsiert langsam */
.beteigeuze-schein {
  transform-box: fill-box;
  transform-origin: center;
  animation: beteigeuze 5s ease-in-out infinite alternate;
}
@keyframes beteigeuze {
  from { opacity: .5; transform: scale(.75); }
  to   { opacity: 1;  transform: scale(1.2); }
}
/* Hochformat: oben links im zusätzlichen Himmel über der Sonne */
@media (max-aspect-ratio: 4/5) {
  .orion {
    top: calc(var(--kopf) + var(--luft) * .04);
    left: 7vw;
    width: max(32px, calc(var(--luft) * .84 * .574));
  }
}

/* Die Retro-Sonne mit Streifen */
.sonne {
  /* Sichtbar ist nur die obere Hälfte (Mitte = Horizont). Darin unten die
     typischen Streifen, die zum Horizont hin breiter werden. */
  --streifen: linear-gradient(180deg,
    #000 0 30%,
    transparent 30% 31.8%,
    #000 31.8% 36%,
    transparent 36% 38.5%,
    #000 38.5% 42.5%,
    transparent 42.5% 45.8%,
    #000 45.8%);
  position: absolute;
  left: var(--scheibe-x, 50%);
  top: calc(var(--horizont) - var(--sonne) / 2);
  width: var(--sonne);
  height: var(--sonne);
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff27a 0%, #ffc43d 16.7%, #ff7a4d 32%, #ff2f8f 46.2%, #c21aa8 64%);
  -webkit-mask-image: var(--streifen);
  mask-image: var(--streifen);
}

/* Boden mit perspektivischem Neon-Gitter */
.boden {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizont);
  bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #2c0640 0%, #12021f 50%, var(--nacht) 100%);
  perspective: calc(var(--boden-h) * 1.1);
  perspective-origin: 50% calc(var(--boden-h) * .194);
}
/* Dunst am Horizont */
.boden::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #ff3d8b 0%, rgba(160, 22, 125, .9) 6%, rgba(70, 10, 90, .6) 18%, rgba(30, 4, 50, .3) 30%, transparent 46%);
}
/* Leuchtende Horizontlinie */
.boden::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, #ff7ad9 15%, #fff 50%, #ff7ad9 85%, transparent);
  box-shadow: 0 0 18px 4px rgba(255, 60, 190, .75);
}

.gitter {
  position: absolute;
  left: -260%;
  right: -260%;
  bottom: 0;
  height: calc(var(--boden-h) * 4.5);
  transform-origin: 50% 100%;
  transform: rotateX(80deg);
  background-image:
    linear-gradient(90deg, var(--gitter-farbe) 0 2px, rgba(255, 56, 214, .3) 2px 4px, transparent 4px),
    linear-gradient(0deg, var(--gitter-farbe) 0 2px, rgba(255, 56, 214, .3) 2px 4px, transparent 4px);
  background-size: 60px 60px;
  background-position: 50% 100%;
  /* Linien laufen zum Horizont hin weich aus (verhindert Flimmern) */
  -webkit-mask-image: linear-gradient(0deg, #000 22%, transparent 62%);
  mask-image: linear-gradient(0deg, #000 22%, transparent 62%);
}
/* Bewegung nur auf der Startseite (Unterseiten bleiben ruhig).
   Mit "Bewegung reduzieren" im Betriebssystem steht alles still. */
.seite-start .gitter { animation: gitter-lauf 1.6s linear infinite; }
.seite-start .sterne { animation: funkeln 4s ease-in-out infinite alternate; }

/* Schwebende Neon-Dreiecke im Himmel */
.deko {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--horizont);
  overflow: hidden;
}
.deko-dreieck {
  --g: 26px;
  --farbe: var(--cyan);
  --alpha: .6;
  --drehung: 220deg;
  position: absolute;
  bottom: -40px;
  width: var(--g);
  height: var(--g);
  fill: none;
  stroke: var(--farbe);
  stroke-width: 2.4;
  stroke-linejoin: round;
  opacity: 0;
  animation: aufsteigen 18s linear infinite;
}
.deko-dreieck:nth-child(1) { left: 6%;  --g: 30px; animation-duration: 21s; animation-delay: -3s; }
.deko-dreieck:nth-child(2) { left: 17%; --g: 18px; --farbe: var(--magenta); animation-duration: 16s; animation-delay: -11s; --drehung: -180deg; }
.deko-dreieck:nth-child(3) { left: 29%; --g: 24px; --farbe: var(--gelb); --alpha: .45; animation-duration: 24s; animation-delay: -7s; }
.deko-dreieck:nth-child(4) { left: 71%; --g: 34px; --farbe: var(--magenta); animation-duration: 19s; animation-delay: -15s; --drehung: -240deg; }
.deko-dreieck:nth-child(5) { left: 82%; --g: 20px; animation-duration: 23s; animation-delay: -1s; }
.deko-dreieck:nth-child(6) { left: 92%; --g: 26px; --farbe: var(--gelb); --alpha: .45; animation-duration: 17s; animation-delay: -9s; --drehung: 160deg; }
.deko-dreieck:nth-child(7) { left: 40%; --g: 16px; --farbe: var(--magenta); animation-duration: 26s; animation-delay: -19s; }
.deko-dreieck:nth-child(8) { left: 60%; --g: 22px; --alpha: .5; animation-duration: 20s; animation-delay: -5s; --drehung: -200deg; }
@media (max-width: 600px) {
  .deko-dreieck:nth-child(n+7) { display: none; }
}
@keyframes aufsteigen {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  12%  { opacity: var(--alpha); }
  70%  { opacity: var(--alpha); }
  100% { transform: translateY(calc(-1 * var(--horizont))) rotate(var(--drehung)); opacity: 0; }
}

@keyframes gitter-lauf {
  from { transform: rotateX(80deg) translateY(0); }
  to   { transform: rotateX(80deg) translateY(60px); }
}

/* =====================================================================
   KOPFZEILE (alle Seiten)
   ===================================================================== */
.kopf {
  position: relative;
  z-index: 3;
  height: var(--kopf, 64px);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 clamp(14px, 4vw, 40px);
  padding-top: env(safe-area-inset-top);
}

/* Text nur für Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  text-transform: none;
}

/* Sprachwahl oben rechts: EN | DE */
.sprache {
  display: flex;
  align-items: center;
  /* dunkles, weiches Polster: kein Stern blitzt zwischen den Buchstaben durch */
  background: rgba(5, 1, 15, .9);
  border-radius: 10px;
  box-shadow: 0 0 14px 8px rgba(5, 1, 15, .9);
}
.sprache a {
  position: relative;
  padding: 10px 12px 8px;
  font: 500 clamp(.8rem, 2.4vw, .95rem)/1 var(--schrift-tech);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border-bottom: 2px solid transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.sprache a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.1em;
  margin-top: -.55em;
  border-left: 1px solid rgba(255, 255, 255, .3);
}
.sprache a:hover { color: var(--cyan); }
.sprache a[aria-current="page"] {
  color: var(--cyan);
  border-bottom-color: var(--magenta);
  text-shadow: 0 0 8px rgba(34, 243, 255, .7);
}

/* =====================================================================
   FUSSZEILE (alle Seiten)
   ===================================================================== */
/* Fußzeile: "© Jahr Krauss & Krauss", darunter mittig Impressum & Datenschutz */
.fuss {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  font: 500 .72rem/1.3 var(--schrift-tech);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.fuss a {
  color: var(--text-leise);
  text-decoration: none;
}
.fuss a:hover { color: var(--cyan); }
@media (max-width: 440px) {
  .fuss { gap: 4px; font-size: .66rem; letter-spacing: .08em; }
}

/* =====================================================================
   STARTSEITE
   ===================================================================== */
.buehne {
  /* Alle Maße der Startseite hängen an diesen Werten */
  --kopf: 64px;
  --luft: 0px;      /* zusätzlicher Himmel über der Pyramide (nur im Hochformat) */
  /* Breite : Höhe der Scheibe – gleichseitiges Dreieck. Bleibt bei jeder
     Fenstergröße gleich; die Pyramide wird nur größer oder kleiner. */
  --form: 1.1547;
  --scheibe-h: min(calc(58vh - var(--kopf)), calc(86vw / var(--form)));
  --scheibe-w: calc(var(--scheibe-h) * var(--form));
  --scheibe-x: 50%;
  --horizont: calc(var(--kopf) + var(--luft) + var(--scheibe-h));
  --boden-h: calc(100vh - var(--horizont));
  /* Goldener Schnitt: Die Sonne ist φ-mal so breit wie die Pyramide (1,618 : 1) und
     sitzt als Halbkreis auf dem Horizont. Ihr Rand liegt bei 93,4 % der Pyramidenhöhe –
     die Spitze ragt heraus. Auf schmalen Handys höchstens so breit wie der Bildschirm. */
  --phi: 1.6180339887;
  --sonne: min(calc(var(--scheibe-w) * var(--phi)), 98vw);

  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@supports (height: 100svh) {
  .buehne {
    --scheibe-h: min(calc(58svh - var(--kopf)), calc(86vw / var(--form)));
    --boden-h: calc(100svh - var(--horizont));
    min-height: 100svh;
  }
}
/* Hochformat (Handy, Tablet): gleiche Pyramide, aber etwas mehr Himmel darüber */
@media (max-aspect-ratio: 4/5) {
  .buehne { --luft: max(0px, min(13vh, 112px, calc((100vh - 500px) * .5))); }
}

/* Ebenen: Szene (0) – Tunnel (1) – Scherben-Canvas (2) – Neon-Rahmen und Text (3) */
.glas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.start {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Die Glasscheibe mit dem Neon-Tunnel (SVG + CSS) ---------- */
.glasscheibe {
  position: relative;
  flex: none;
  width: var(--scheibe-w);
  height: var(--scheibe-h);
  margin-top: var(--luft);
}
.scheibe {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.js-glas .scheibe { cursor: crosshair; }

.tunnel {
  --t0: var(--cyan);
  --t1: var(--magenta);
  --t2: var(--gelb);
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Nach jedem Glasbruch rücken die Farben eins weiter */
.tunnel.p1 { --t0: var(--magenta); --t1: var(--gelb); --t2: var(--cyan); }
.tunnel.p2 { --t0: var(--gelb); --t1: var(--cyan); --t2: var(--magenta); }
.tunnel .f0 { stroke: var(--t0); }
.tunnel .f1 { stroke: var(--t1); }
.tunnel .f2 { stroke: var(--t2); }

/* Endloser Flug: Nach drei Ringen sieht der Tunnel exakt wieder gleich aus,
   deshalb springt die Schleife nahtlos zurück. Tempo: --tunnel-takt */
.tunnel-ringe {
  transform-box: view-box;
  transform-origin: 577.5px 620px;
  animation: tunnel-flug var(--tunnel-takt, 2.7s) linear infinite;
}
@keyframes tunnel-flug {
        0% { transform: rotate(0rad) scale(1.00000); }
    8.333% { transform: rotate(-0.0150rad) scale(1.05086); }
   16.667% { transform: rotate(-0.0300rad) scale(1.10432); }
       25% { transform: rotate(-0.0450rad) scale(1.16049); }
   33.333% { transform: rotate(-0.0600rad) scale(1.21951); }
   41.667% { transform: rotate(-0.0750rad) scale(1.28154); }
       50% { transform: rotate(-0.0900rad) scale(1.34673); }
   58.333% { transform: rotate(-0.1050rad) scale(1.41523); }
   66.667% { transform: rotate(-0.1200rad) scale(1.48721); }
       75% { transform: rotate(-0.1350rad) scale(1.56286); }
   83.333% { transform: rotate(-0.1500rad) scale(1.64235); }
   91.667% { transform: rotate(-0.1650rad) scale(1.72589); }
      100% { transform: rotate(-0.1800rad) scale(1.81367); }
}

/* Lichtreflexe auf dem Glas – als kleiner Hinweis, dass man die Scheibe anklicken kann.
   Zwei Reflexe mit verschiedenen Takten (11 s / 17 s), die hin und zurück wandern:
   Dadurch blitzt das Glas in unregelmäßigen Abständen auf, nie im gleichen Rhythmus. */
.lichtstreif {
  position: absolute;
  inset: 0;
}
.lichtstreif::before,
.lichtstreif::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  animation: glanz-a 11s ease-in-out -3.5s infinite alternate;
}
.lichtstreif::before {
  background: linear-gradient(105deg, transparent 39%, rgba(255, 255, 255, .26) 50%, transparent 61%);
}
.lichtstreif::after {
  background: linear-gradient(112deg, transparent 45%, rgba(190, 245, 255, .2) 50%, transparent 55%);
  animation: glanz-b 17s ease-in-out -6s infinite alternate;
}
@keyframes glanz-a {
  0%, 55%   { transform: translateX(-120%); }
  68%, 100% { transform: translateX(120%); }
}
@keyframes glanz-b {
  0%, 20%   { transform: translateX(-120%); }
  29%, 100% { transform: translateX(120%); }
}

/* Leuchtender Neon-Rahmen */
.rahmen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255, 43, 214, .9)) drop-shadow(0 0 16px rgba(255, 43, 214, .55)) saturate(var(--farbe-ruhe, .7));
}

/* Easter Egg: Bemaßung wie auf einem Bauplan – 230,33 m ist die Seitenlänge
   der Cheops-Pyramide (gleichseitiges Dreieck: jede Seite ist gleich lang) */
.mass {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(12, 2, 30, .95)) drop-shadow(0 0 5px rgba(34, 243, 255, .45)) saturate(var(--farbe-ruhe, .7));
}
.mass path {
  fill: none;
  stroke: #d9fdff;
  stroke-opacity: .8;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mass text {
  font-family: var(--schrift-tech);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 3px;
  fill: #f2feff;
}

/* ---------- Maus über der Pyramide ----------
   Nur die echte Dreiecksfläche reagiert (nicht die leeren Ecken daneben).
   Dann leuchten alle Dreiecke auf, Bemaßung und Sternbild treten hervor –
   sonst sind die beiden nur zart zu sehen. Mit JavaScript beschleunigt
   der Tunnel zusätzlich; ein Klick lässt die Scheibe zerspringen. */
.glasscheibe { pointer-events: none; }
.scheibe { pointer-events: auto; }
.tunnel { transition: filter .6s ease; }
.scheibe:hover .tunnel { filter: brightness(1.3) saturate(1.3); }
.rahmen { transition: filter .6s ease; }
.scheibe:hover ~ .rahmen {
  filter: drop-shadow(0 0 6px rgba(255, 43, 214, 1)) drop-shadow(0 0 26px rgba(255, 43, 214, .8)) saturate(1);
}
.mass { opacity: .3; transition: opacity .7s ease, filter .6s ease; }
.scheibe:hover ~ .mass {
  filter: drop-shadow(0 0 1.5px rgba(12, 2, 30, .95)) drop-shadow(0 0 5px rgba(34, 243, 255, .45)) saturate(1);
}
.mass text { pointer-events: auto; }
.scheibe:hover ~ .mass,
.mass:hover { opacity: 1; }
.orion { opacity: .3; transition: opacity .7s ease; pointer-events: auto; }
.orion:hover,
.buehne:has(.scheibe:hover) .orion { opacity: 1; }
.deko { transition: filter .5s ease; }
.buehne:has(.scheibe:hover) .deko { filter: brightness(1.9); }

/* ---------- Farbstimmung wie im Film ----------
   In Ruhe ist das Bild um 30 % entsättigt. Sobald die Maus über der Pyramide
   ist, kommt die volle Farbe. Logo, Schrift und Knöpfe bleiben immer farbecht.
   Der Scherben-Canvas bekommt genau dieselbe Farbstimmung wie der Tunnel,
   damit beim Glasbruch nichts heller oder dunkler springt. */
.szene,
.scheibe { filter: saturate(var(--farbe-ruhe, .7)); transition: filter .6s ease; }
.glas { filter: brightness(1) saturate(var(--farbe-ruhe, .7)); transition: filter .6s ease; }
.buehne:has(.scheibe:hover) .szene,
.scheibe:hover { filter: saturate(1); }
.buehne:has(.scheibe:hover) .glas { filter: brightness(1.3) saturate(1.3); }

/* Während des Glasbruchs zeigen die Scherben (Canvas) den Tunnel */
.zerbrochen .tunnel,
.zerbrochen .lichtstreif { visibility: hidden; }

.start-text {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(18px, 4.5vh, 52px) 16px 8px;
  text-align: center;
}

/* Chrom-Schriftzug */
.logo,
.titel {
  margin: 0;
  font-family: var(--schrift-logo);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #e3ecff;
  background: linear-gradient(180deg,
    #ffffff 0%, #dce8ff 22%, #93b2ff 44%, #2a1a5e 50%, #4a1f7c 53%,
    #ff9bd9 68%, #ffe3f6 84%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #3a0a5e) drop-shadow(0 0 14px rgba(255, 43, 214, .5));
}
/* Der Schriftzug tritt bewusst zurück: kleiner, gedämpftes Chrom, wenig Glühen.
   Die Pyramide ist der Star – nur das & bleibt in vollem Magenta. */
.logo {
  display: inline-block;
  font-size: clamp(1.15rem, min(5.4vw, 4.6vh), 3.5rem);
  letter-spacing: .05em;
  white-space: nowrap;
  background: linear-gradient(180deg,
    #d6deef 0%, #b8c5e4 24%, #7f8ec0 45%, #34265e 50%, #503577 54%,
    #c992bd 70%, #e6d8ec 86%, #f1ecf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(58, 10, 94, .75)) drop-shadow(0 0 6px rgba(255, 43, 214, .2));
  transform: skewX(-9deg);
}
.logo-und {
  -webkit-text-fill-color: var(--magenta);
  color: var(--magenta);
}

/* "– Film – Production – TV –" */
.claim {
  --sperrung: .32em;
  margin: .7em 0 0;
  padding-left: var(--sperrung);   /* gleicht den Buchstabenabstand nach dem letzten Zeichen aus */
  font: 500 clamp(.74rem, 2.4vw, 1.05rem)/1 var(--schrift-tech);
  letter-spacing: var(--sperrung);
  word-spacing: .12em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(34, 243, 255, .9), 0 0 18px rgba(34, 243, 255, .45);
}
.claim .strich {
  color: var(--magenta);
  text-shadow: 0 0 6px rgba(255, 43, 214, .9), 0 0 16px rgba(255, 43, 214, .5);
}
@media (max-width: 360px) {
  .claim { --sperrung: .2em; word-spacing: 0; }
}

/* ---------- Kontakt-Knopf mit Fenster: reines HTML5 (Popover-API) ----------
   Öffnen, Schließen per Klick/Tippen daneben und Escape macht der Browser selbst –
   ohne JavaScript. Das Fenster liegt in der obersten Ebene des Browsers und ist
   dadurch nie abgeschnitten oder verdeckt, auch nicht im Querformat. */
.kontakt {
  margin-top: clamp(16px, 3.4vh, 34px);
}
a.knopf { text-decoration: none; }
a.knopf:hover { color: #fff; }

.knopf {
  appearance: none;
  margin: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: 1.05em 1.7em;
  font: 500 clamp(.82rem, 2.3vw, 1rem)/1 var(--schrift-tech);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 43, 214, .22), rgba(34, 243, 255, .22));
  border: 2px solid var(--cyan);
  box-shadow: 0 0 14px rgba(34, 243, 255, .55), inset 0 0 14px rgba(34, 243, 255, .22);
  text-shadow: 0 0 6px rgba(255, 255, 255, .6);
  cursor: pointer;
  user-select: none;
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.kontakt:has(.kontakt-wahl:popover-open) > .knopf {
  background: linear-gradient(90deg, var(--magenta), #ff7a3d);
  border-color: #fff;
  box-shadow: 0 0 24px rgba(255, 43, 214, .8);
}
/* Hover-Farbe nur bei echter Maus: Auf Touchscreens (iPhone, Android) bleibt
   :hover nach dem Tippen hängen – der Knopf sähe nach dem Schließen weiter
   "offen" aus. */
@media (hover: hover) {
  .knopf:hover {
    background: linear-gradient(90deg, var(--magenta), #ff7a3d);
    border-color: #fff;
    box-shadow: 0 0 24px rgba(255, 43, 214, .8);
  }
}
.knopf-pfeil {
  width: .55em;
  height: .55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform .2s;
}
.kontakt:has(.kontakt-wahl:popover-open) .knopf-pfeil { transform: translateY(20%) rotate(-135deg); }

/* Das Fenster selbst. Wichtig: "display" nur im geöffneten Zustand setzen – sonst
   wäre das Fenster immer sichtbar (der Browser blendet es per display: none aus).
   Position: Browser-Standard für Popover = mittig im Bildschirm. */
.kontakt-wahl {
  width: min(92vw, 400px);
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: 10px 14px 14px;
  color: var(--text);
  text-align: left;
  background: #0d0328;
  border: 1px solid rgba(255, 43, 214, .65);
  box-shadow: 0 0 34px rgba(255, 43, 214, .35);
}
.kontakt-wahl:popover-open {
  display: grid;
  gap: 10px;
  animation: wahl-auf .22s ease-out;
}
.kontakt-wahl::backdrop { background: rgba(5, 1, 15, .55); }
@keyframes wahl-auf {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
}
.wahl-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 500 .8rem/1 var(--schrift-tech);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.kontakt-wahl .schliessen {
  appearance: none;
  position: static;
  width: 40px;
  height: 40px;
  margin: 0 -4px 0 0;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
}

/* Sehr alte Browser ohne Popover-API (iPhone vor iOS 17): Knopf ausblenden,
   beide Kontaktwege stehen direkt da – nichts geht verloren. */
@supports not selector(:popover-open) {
  .kontakt > .knopf,
  .kontakt-wahl .wahl-kopf { display: none; }
  .kontakt-wahl { display: grid; gap: 10px; width: min(92vw, 400px); margin: 0 auto; }
}

.wahl {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  background: rgba(34, 243, 255, .06);
  border: 1px solid rgba(34, 243, 255, .35);
  transition: background .15s, border-color .15s;
}
.wahl:focus-visible {
  color: var(--text);
  background: rgba(34, 243, 255, .16);
  border-color: var(--cyan);
}
@media (hover: hover) {
  .wahl:hover {
    color: var(--text);
    background: rgba(34, 243, 255, .16);
    border-color: var(--cyan);
  }
}
.wahl strong {
  display: block;
  font: 500 .92rem/1.2 var(--schrift-tech);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.wahl small {
  display: block;
  margin-top: 3px;
  font-size: .92rem;
  color: var(--text-leise);
  overflow-wrap: anywhere;
}
.icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--magenta);
  filter: drop-shadow(0 0 4px rgba(255, 43, 214, .7));
}

/* Fußzeile der Startseite liegt auf dem Gitter: leicht abdunkeln */
.seite-start .fuss {
  background: linear-gradient(180deg, transparent, rgba(11, 2, 33, .85) 45%);
}

/* Querformat mit wenig Höhe (Handy quer): Scheibe links, Text rechts */
@media (orientation: landscape) and (max-height: 540px) {
  .buehne {
    --kopf: 50px;
    --scheibe-h: min(calc(100vh - var(--kopf) - 64px), calc(44vw / var(--form)));
    --scheibe-x: 27%;
    --sonne: min(calc(var(--scheibe-w) * var(--phi)), 52vw);
  }
  @supports (height: 100svh) {
    .buehne { --scheibe-h: min(calc(100svh - var(--kopf) - 64px), calc(44vw / var(--form))); }
  }
  .start {
    flex-direction: row;
    align-items: flex-start;
  }
  .glasscheibe { margin-left: calc(var(--scheibe-x) - var(--scheibe-w) / 2); }
  .start-text {
    flex: 1;
    height: var(--scheibe-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2vw;
  }
  .logo { font-size: clamp(1rem, 3vw, 2rem); }
  .orion { display: none; }   /* rechts steht hier der Text */

  /* Kontakt-Fenster im Querformat: beide Wege nebeneinander, damit es flach bleibt */
  .kontakt-wahl { width: min(94vw, 640px); }
  .kontakt-wahl:popover-open { grid-template-columns: 1fr 1fr; }
  .wahl-kopf { grid-column: 1 / -1; }
}

/* =====================================================================
   UNTERSEITEN (Kontakt, Impressum)
   ===================================================================== */
.seite-unter .szene {
  position: fixed;
  --horizont: 70vh;
  --boden-h: 30vh;
  --sonne: min(90vmin, 800px);
}
.seite-unter .sonne { opacity: .85; }

/* Fußzeile bleibt auch bei wenig Inhalt unten */
body.seite-unter {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.seite-unter .inhalt { flex: 1 0 auto; }

.inhalt {
  position: relative;
  z-index: 2;
  width: min(100% - 28px, 860px);
  margin: 0 auto;
  padding: clamp(20px, 6vh, 64px) 0 40px;
}

.titel {
  display: block;
  width: fit-content;
  margin: 0 0 .5em;
  font-size: clamp(2rem, 8vw, 4.4rem);
  transform: skewX(-9deg);
  transform-origin: 0 100%;
}
/* Zweizeiliger Titel: mehr Zeilenabstand, Chrom-Verlauf wiederholt sich je Zeile */
.titel-lang {
  font-size: clamp(1.55rem, 6.2vw, 3.6rem);
  line-height: 1.3;
  background-size: 100% 1.3em;
}

.karte {
  --rand: clamp(20px, 4.5vw, 46px);
  position: relative;
  padding: var(--rand);
  background: rgba(9, 2, 28, .9);
  border: 1px solid rgba(255, 43, 214, .5);
  box-shadow: 0 0 0 1px rgba(34, 243, 255, .08), 0 0 40px rgba(255, 43, 214, .18);
}
/* Neon-Ecke oben links */
.karte::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 46px;
  height: 46px;
  border-left: 3px solid var(--cyan);
  border-top: 3px solid var(--cyan);
  filter: drop-shadow(0 0 6px var(--cyan));
}

.lead {
  margin: 0 0 1.4em;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.55;
}

/* Fließtext (Impressum/Datenschutz) */
/* Lange deutsche Wörter auf schmalen Handys sauber trennen statt überlaufen */
.text {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.text h2,
.text h3 {
  margin: 1.8em 0 .5em;
  font: 500 .95rem/1.3 var(--schrift-tech);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.text h3 { font-size: .9rem; color: #ff8ae6; }
.text > :first-child { margin-top: 0; }
/* Großer Abschnitt "Datenschutzerklärung" innerhalb derselben Seite */
.text h2.abschnitt {
  margin-top: 2.6em;
  padding-top: 1.6em;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 1.1rem;
  color: #fff;
  scroll-margin-top: 24px;
}
.hinweis {
  font-size: .9rem;
  color: var(--text-leise);
}
.zurueck { margin: 28px 0 0; }
.text p { margin: 0 0 1em; max-width: 68ch; }
.text a { overflow-wrap: anywhere; }
.stand {
  margin-top: 2em !important;
  font-size: .85rem;
  color: var(--text-leise);
}

.seite-unter .fuss { margin-top: 10px; }

/* ---------- Unterseiten verhalten sich wie ein Fenster ----------
   Zurück zur Startseite geht es über das X oben rechts in der Karte (bleibt beim
   Scrollen sichtbar), über einen Klick irgendwo neben die Karte und mit Escape.
   X und Klick daneben funktionieren ohne JavaScript: Die ganze Fläche hinter der
   Karte ist ein Link zur Startseite. */
.flaeche {
  position: fixed;
  inset: 0;
  z-index: 1;
}
/* Alles außer der Karte zählt als "daneben" – auch Überschrift, Kopf- und Fußzeile.
   Klickbar bleiben nur die Karte selbst, Knöpfe und Links. */
.seite-unter .inhalt,
.seite-unter .kopf,
.seite-unter .fuss { pointer-events: none; }
.seite-unter .inhalt :is(.karte, .knopf),
.seite-unter .sprache,
.seite-unter .fuss a { pointer-events: auto; }

.schliessen {
  position: sticky;
  top: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: calc(10px - var(--rand)) calc(10px - var(--rand)) calc(var(--rand) - 54px) auto;
  color: var(--cyan);
  background: rgba(9, 2, 28, .94);
  border: 1px solid rgba(34, 243, 255, .55);
  box-shadow: 0 0 12px rgba(34, 243, 255, .3);
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.schliessen::before,
.schliessen::after {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  transform: rotate(45deg);
}
.schliessen::after { transform: rotate(-45deg); }
.text > .schliessen + * { padding-right: 46px; }   /* erste Zeile läuft nicht unter das X */
.fehler .schliessen { margin-bottom: 4px; }          /* kurze Karte: X bekommt eine eigene Zeile */
.schliessen:hover,
.schliessen:focus-visible {
  color: #fff;
  border-color: var(--magenta);
  box-shadow: 0 0 18px rgba(255, 43, 214, .6);
}

/* ---------- Fehlerseite (404) ---------- */
.fehler { text-align: center; }
.fehler .titel {
  margin-left: auto;
  margin-right: auto;
  transform-origin: 50% 100%;
}
.fehler .karte { text-align: center; }
.fehler .lead { margin-left: auto; margin-right: auto; max-width: 34ch; }
.fehler .lead + .lead { margin-top: -.6em; color: var(--text-leise); }
.knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.fehler-code {
  margin: 0 0 .1em;
  font: 400 clamp(4.5rem, 20vw, 10rem)/1 var(--schrift-pixel);
  color: #fff;
  text-shadow: -4px 0 var(--cyan), 4px 0 var(--magenta), 0 0 24px rgba(255, 255, 255, .35);
}

/* =====================================================================
   BARRIEREFREIHEIT & DRUCK
   ===================================================================== */
/* Systemeinstellung „Bewegung reduzieren“ (Mac, iPhone, Windows, Android):
   Die Seite bleibt lebendig, aber ruhig. Was fliegt, läuft, zoomt oder wackelt,
   steht still. Licht darf weiter glimmen und aufblitzen. Ein Klick auf das Glas
   lässt Risse erscheinen und wechselt sanft die Farben (siehe js/glas.js). */
@media (prefers-reduced-motion: reduce) {
  /* Der Tunnel fliegt nicht – seine Farbringe glimmen nacheinander auf */
  .tunnel-ringe { animation: none; }
  .tunnel .f0,
  .tunnel .f1,
  .tunnel .f2 { animation: ring-glimmen 4.5s ease-in-out infinite; transition: stroke .9s ease; }
  .tunnel .f1 { animation-delay: -1.5s; }
  .tunnel .f2 { animation-delay: -3s; }

  /* Der Boden läuft nicht; die Dreiecke steigen nicht auf, sie stehen und glimmen */
  .seite-start .gitter { animation: none; }
  .deko-dreieck { animation: aufsteigen 18s linear infinite paused, deko-glimmen 18s ease-in-out infinite alternate; }

  /* Der Glanz wandert nicht über das Glas, er blitzt an Ort und Stelle auf */
  .lichtstreif::before,
  .lichtstreif::after { transform: none; animation: glanz-ruhig 11s ease-in-out -3.5s infinite; }
  .lichtstreif::after { animation-duration: 17s; animation-delay: -6s; }

  /* Beteigeuze pulsiert nur in der Helligkeit; das Kontakt-Fenster blendet nur ein */
  .beteigeuze-schein { animation-name: beteigeuze-ruhig; }
  .kontakt-wahl:popover-open { animation-name: wahl-auf-ruhig; }
  .knopf-pfeil { transition: none; }
}
@keyframes ring-glimmen { 50% { opacity: .35; } }
@keyframes deko-glimmen { from { opacity: 0; } to { opacity: var(--alpha); } }
@keyframes glanz-ruhig { 0%, 60%, 100% { opacity: 0; } 70% { opacity: 1; } }
@keyframes beteigeuze-ruhig { from { opacity: .5; } to { opacity: 1; } }
@keyframes wahl-auf-ruhig { from { opacity: 0; } }

@media print {
  .szene, .glas, .sprache, .zurueck, .schliessen, .flaeche, body::before, body::after { display: none !important; }
  html, body, .karte { background: #fff !important; color: #000 !important; }
  .karte { border: 0; box-shadow: none; padding: 0; }
  .titel { -webkit-text-fill-color: #000; filter: none; transform: none; }
  a { color: #000; }
}