/* start.css: vorgeschaltete Startseite mit drei Kacheln („Schwarzweiß“, Andrés Wahl vom 29.10.2026).
   Monochrom, kein Farbakzent: in Ruhe gleich helle Schwarzweiß-Standbilder, beim Überfahren Farbe und ein stummer Film.
   Zwei Fassungen über CSS-Variablen: dunkel (Standard) und hell (html[data-theme="hell"]).
   Das Layout ist in beiden Fassungen identisch, damit beim Umschalten nichts springt. */
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Light.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Regular.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../stile/assets/fonts/Montserrat-Bold.woff2") format("woff2"), url("../stile/assets/fonts/Montserrat-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #0E0E0F;
  --flaeche: #161618;
  --flaeche-hover: #1F2023;
  --linie: #2A2B2F;
  --linie-hover: #3A3B40;
  --text: #F4F4F5;
  --text-2: #A1A4AB;
  --text-3: #6B6E76;
  --markierung: #A1A4AB;            /* Unterstrich und Fokus: grau, kein Farbakzent */
  --bild-rahmen: #161618;           /* dunkel: unsichtbar */
  --bild-hell: .9;                  /* Helligkeit der Schwarzweiß-Standbilder (mal --angleich je Kachel) */
  --bild-hell-hover: .92;           /* Helligkeit in Farbe beim Überfahren */
  --schatten: none;
  --schatten-hover: none;
  --fuss-bg: transparent;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rand: clamp(20px, 4vw, 56px);
  --dauer: .3s;
}
html[data-theme="hell"] {
  --bg: #F4F4F5;
  --flaeche: #FFFFFF;
  --flaeche-hover: #FFFFFF;
  --linie: #E4E5E8;
  --linie-hover: #D5D7DC;
  --text: #0E0E0F;
  --text-2: #3A3B40;
  --text-3: #6B6E76;
  --markierung: #3A3B40;
  --bild-rahmen: #1F2023;           /* feiner Rahmen, damit die dunklen Bilder auf Weiß nicht ausfransen */
  --bild-hell: 1;
  --bild-hell-hover: 1;
  --schatten: 0 1px 2px rgba(14, 14, 15, .04), 0 8px 24px rgba(14, 14, 15, .05);
  --schatten-hover: 0 1px 2px rgba(14, 14, 15, .05), 0 12px 32px rgba(14, 14, 15, .08);
  --fuss-bg: #FFFFFF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 400; line-height: 1.5;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* weicher Wechsel zwischen den Fassungen */
body, .kachel, .bild, .fuss, .fuss a, .platte, .schnur, .perle, .tuer, h1, .einleitung, .titel, .beschreibung, .mono {
  transition: background-color var(--dauer) ease, color var(--dauer) ease, border-color var(--dauer) ease, box-shadow var(--dauer) ease;
}
html.ohne-uebergang *, html.ohne-uebergang *::before, html.ohne-uebergang *::after { transition: none !important; }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }

/* Kopf */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px var(--rand) 0; }
.logo { position: relative; display: inline-block; line-height: 0; }
.logo img { width: 112px; height: auto; transition: opacity var(--dauer) ease; }
.logo .logo-hell { position: absolute; left: 0; top: 0; opacity: 0; }
html[data-theme="hell"] .logo .logo-dunkel { opacity: 0; }
html[data-theme="hell"] .logo .logo-hell { opacity: 1; }
.kopf-rechts { display: flex; align-items: center; gap: 20px; }
.kopf-label { margin: 0; text-align: right; }
.kopf-knoepfe { display: flex; align-items: center; gap: 14px; }
.tuer { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); text-decoration: none;
  padding: 7px 0; border-bottom: 1px solid transparent; }
.tuer:hover { color: var(--text); border-bottom-color: var(--markierung); }
.tuer:focus { outline: none; }
.tuer:focus-visible { outline: 2px solid var(--markierung); outline-offset: 3px; }

/* Inhalt */
.inhalt { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--rand) 24px; }
h1 { margin: 0; font-size: clamp(28px, 3.6vw, 48px); font-weight: 300; letter-spacing: -.01em; line-height: 1.15; }
.einleitung { margin: 14px 0 0; max-width: 54ch; color: var(--text-2); font-weight: 300; font-size: clamp(15px, 1.2vw, 17px); }

.kacheln { list-style: none; margin: clamp(32px, 6vh, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kacheln li { display: flex; }

.kachel {
  position: relative; display: flex; flex-direction: column; width: 100%;
  text-decoration: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; overflow: hidden;
  box-shadow: var(--schatten);
}
.bild { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; padding: 1px; background: var(--bild-rahmen); }
/* Ruhe: Schwarzweiß, je Kachel gleich hell (--angleich aus der mittleren Helligkeit des ersten Filmbilds: .93 / .82;
   die Evolutionsreihe links ist Linienzeichnung auf Schwarz und bleibt bei 1) */
.bild img, .clip { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; }
.bild img { filter: grayscale(1) brightness(calc(var(--angleich, 1) * var(--bild-hell))); transition: filter .5s ease; }
.clip { opacity: 0; transition: opacity .5s ease; }
.text { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.nr { color: var(--text-3); }
.soon { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: lowercase; color: var(--text-3);
  border: 1px solid var(--linie-hover); border-radius: 2px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.titel { margin-top: 8px; font-size: 22px; font-weight: 300; letter-spacing: .01em; }
.beschreibung { margin-top: 6px; color: var(--text-2); font-weight: 300; font-size: 15px; flex: 1; }
.groesse { margin-top: 10px; font-size: 10px; letter-spacing: .12em; color: var(--text-3); }   /* Ladegröße Parcours, gemessen 29.10.2026: ~22 MB */

/* Überfahren: Farbe kehrt zurück, der Film läuft */
.kachel:hover { background: var(--flaeche-hover); border-color: var(--linie-hover); box-shadow: var(--schatten-hover); }
.kachel:hover .bild img, .kachel:focus-visible .bild img { filter: grayscale(0) brightness(var(--bild-hell-hover)); }
.kachel.laeuft .clip { opacity: 1; }

.kachel:focus { outline: none; }
.kachel:focus-visible { outline: 1px solid var(--markierung); outline-offset: 4px; border-color: var(--linie-hover); }

/* Wasser: WebGL-Fläche über der Seite, lässt alle Klicks durch. Über den Kacheln ist sie durchsichtig:
   Bilder und Filme zeigt die Seite selbst, ruhig und scharf (seit 29.10.2026). */
.wasser { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; display: block; }

/* Fuß */
.fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 22px var(--rand) 28px; border-top: 1px solid var(--linie); background: var(--fuss-bg); color: var(--text-3); font-size: 13px;
}
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 24px; }
.fuss a { color: var(--text-2); text-decoration: none; border-bottom: 1px solid transparent; }
.fuss a:hover { color: var(--text); border-bottom-color: var(--markierung); }
.fuss a:focus-visible, .logo:focus-visible { outline: 2px solid var(--markierung); outline-offset: 3px; }

/* Lichtschalter. Kippschalter (Standard): kleine Wandplatte am rechten Seitenrand, auf Höhe der Kacheln.
   Wippe oben gedrückt = Licht aus (dunkel), unten gedrückt = Licht an (hell). Zugschnur (?schalter=schnur): hängt von oben. */
.lichtschalter { position: fixed; right: 12px; top: 58vh; z-index: 6; padding: 8px; margin: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-2); -webkit-tap-highlight-color: transparent; }
.lichtschalter:focus { outline: none; }
.lichtschalter:focus-visible { outline: 1px solid var(--markierung); outline-offset: 2px; border-radius: 4px; }
.platte { position: relative; display: block; width: 26px; height: 42px; border: 1px solid var(--linie-hover); border-radius: 4px; background: var(--flaeche); }
.platte::before, .platte::after { content: ""; position: absolute; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--linie-hover); }
.platte::before { top: 3px; } .platte::after { bottom: 3px; }   /* zwei Schrauben */
.kipp { position: absolute; left: 50%; top: 50%; width: 10px; height: 20px; margin: -10px 0 0 -5px; border-radius: 2px;
  border: 1px solid var(--linie-hover); background: linear-gradient(to bottom, var(--text-3) 0 50%, var(--flaeche-hover) 50% 100%);
  transform: perspective(60px) rotateX(22deg); transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), background .2s ease; }
html[data-theme="hell"] .kipp { background: linear-gradient(to bottom, var(--flaeche-hover) 0 50%, var(--text-3) 50% 100%); transform: perspective(60px) rotateX(-22deg); }
.lichtschalter:hover .platte { border-color: var(--markierung); }
.lichtschalter.klick .platte { animation: lichtschalter-klick .22s ease; }
@keyframes lichtschalter-klick { 40% { transform: scale(.93); } 100% { transform: scale(1); } }
.schnur { display: none; }

html[data-schalter="schnur"] .lichtschalter { top: 0; right: 30px; padding: 0 10px 10px; }
html[data-schalter="schnur"] .platte { display: none; }
html[data-schalter="schnur"] .schnur { position: relative; display: block; width: 1px; height: 34vh; margin: 0 auto; background: var(--text-3); transform-origin: 50% 0; }
.perle { position: absolute; left: -5px; bottom: -14px; width: 11px; height: 15px; border-radius: 45% 45% 50% 50%; border: 1px solid var(--text-2); background: var(--flaeche); }
html[data-schalter="schnur"] .lichtschalter:hover .perle { border-color: var(--text); }
html[data-schalter="schnur"] .lichtschalter.klick .schnur { animation: lichtschalter-zug .55s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes lichtschalter-zug { 0% { transform: translateY(0); } 30% { transform: translateY(16px); } 100% { transform: translateY(0); } }

/* Handy: Kacheln untereinander */
@media (max-width: 860px) {
  .kacheln { grid-template-columns: 1fr; gap: 16px; }
  .logo img { width: 84px; }
  .kopf { align-items: flex-start; }
  .kopf-rechts { flex-direction: column; align-items: flex-end; gap: 10px; }
  .kopf-label { font-size: 10px; letter-spacing: .06em; }
  .tuer { font-size: 10px; letter-spacing: .06em; }
  /* Lichtschalter in der Fußzeile, immer als Kippschalter */
  .lichtschalter, html[data-schalter="schnur"] .lichtschalter { position: static; padding: 4px; }
  html[data-schalter="schnur"] .platte { display: block; }
  html[data-schalter="schnur"] .schnur { display: none; }
}

/* Reduzierte Bewegung: keine Übergänge */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}