/* ── Grundlagen (Font, Reset, Body) — für alle Seiten ── */

@font-face {
  font-family: 'Oxanium';
  src: url('fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'SyneMono';
  src: url('fonts/SyneMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Orbit';
  src: url('fonts/Orbit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'UbuntuMono';
  src: url('fonts/Ubuntu_Mono/UbuntuMono-Regular.woff2') format('woff2'),
       url('fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'UbuntuMono';
  src: url('fonts/Ubuntu_Mono/UbuntuMono-Bold.woff2') format('woff2'),
       url('fonts/Ubuntu_Mono/UbuntuMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'UbuntuMono';
  src: url('fonts/Ubuntu_Mono/UbuntuMono-Italic.woff2') format('woff2'),
       url('fonts/Ubuntu_Mono/UbuntuMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'UbuntuMono';
  src: url('fonts/Ubuntu_Mono/UbuntuMono-BoldItalic.woff2') format('woff2'),
       url('fonts/Ubuntu_Mono/UbuntuMono-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* Zentrale Schrift — zum Ausprobieren hier umschalten
   (z.B. 'Oxanium', 'Orbit' oder 'SyneMono' statt UbuntuMono). */
:root {
  --font: 'UbuntuMono', monospace;

  /* 3D-Leiste: weiß im Ruhezustand, faded beim Klick nach Schwarz */
  --leiste-hell: #ffffff;
  --leiste-hover: #f0eeea;
  --leiste-dunkel: #14120f;

  /* Farbe der aktiven „Fahrbahn"/Station in der Kategorien-Navigation.
     KEINE Akzentfarbe mehr — Noah 28.07.2026: „einfach mit schwarz grau, weiß
     tönen". Auf dem dunklen Seitenteil ist „erreicht/aktiv" also fast weiß;
     der weiße Seitenteil dreht das um und setzt sich seinen eigenen, fast
     schwarzen Wert (siehe `body.main-hell .subkat-item` in main.css).
     Verlauf der Entscheidungen: orange #e0912f → blau #3d7ac9 → gold #c9a227 →
     Blaugrau #5a83b6 → hell #97b6d8 → jetzt neutral.
     Beide Töne stehen NUR hier; --fahrbahn ist der jeweils geltende, die zwei
     Namen darunter sind die Vorräte zum Hin- und Herschalten. */
  --fahrbahn-auf-dunkel: #eae7e1;
  --fahrbahn-auf-hell: #14120f;
  --fahrbahn: var(--fahrbahn-auf-dunkel);

  /* Breite der Kategorien-Spalte. Steht als Variable, weil mehrere Stellen
     (eingeklappte Spalte, Rand des Bildbereichs) denselben Wert brauchen.
     30.07.2026 auf Wunsch von 234 auf 215px verschmälert — die Innenabstände
     (1.5rem links, 1.2rem rechts, 2.4rem Einzug bis zur Beschriftung) bleiben
     dabei unangetastet, es wird allein die Textspalte schmaler.
     215px IST DIE UNTERGRENZE, wenn kein Name dreizeilig werden soll:
     gemessen bricht „Photography of an unknown object" ab 205px auf drei
     gequetschte Zeilen um (bei 234px war nur dieser Name zweizeilig, ab 215
     zusätzlich „Ultrasonic Theremin"). Wer schmaler will, muss den Namen
     kürzen. */
  --sidebar-breite: 215px;

  /* Eingeklappte Kategorien-Spalte bei offenem 3D-Panel: nur die Fahrbahn mit
     ihren Stationsköpfen. 48px = 0.6rem Innenabstand + 38.4px bis zum Beginn
     der Beschriftung — die Namen liegen damit exakt außerhalb und werden vom
     overflow abgeschnitten, ohne dass Buchstabenreste stehen bleiben.
     Wer den Innenabstand ändert, muss diesen Wert nachziehen. */
  --rail-breite: 48px;
  /* Breite der aufgeklappten Leiste. MUSS den laengsten Stationsnamen in EINE
     Zeile lassen — sonst bricht er um, die Station wird zweizeilig und die
     ganze Formation rutscht beim Hovern sichtbar nach.
     „Photography of an unknown object" misst samt Einzug 318px; 360px passten
     exakt ohne Reserve, 380px geben 20px Luft. Wer einen laengeren Werktitel
     ergaenzt, prueft im Browser `el.scrollWidth > el.clientWidth` am
     .subkat-titel und zieht diesen Wert nach. */
  --rail-auf-breite: 380px;

  /* Breite der 3D-Leiste. Steht als Variable, weil main.css damit rechnen muss:
     der Bildbereich bekommt bei offenem CV-Panel genau die Breite gesetzt, die
     er als Flex-Kind hätte (siehe `body.cv-offen.dreid-offen .bildbereich`) —
     und dazu gehört die Leiste als Abzug. */
  --leiste-breite: 74px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background-color: black;
  color: white;
  font-family: var(--font);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── 3D-Leiste ──────────────────────────────────────────────────────────────
   Schmale dunkle Spalte am rechten Bildschirmrand, beschriftet mit „3D".
   Sitzt auf der Startseite (führt zu provider.html) und auf main.html
   (schiebt dort das 3D-Panel auf). Beide Seiten laden base.css, deshalb steht
   das Aussehen hier nur einmal. */

.dreid-leiste {
  flex-shrink: 0;
  width: var(--leiste-breite);
  height: 100%;
  /* Bezugsrahmen + Beschnitt für den Tropfen, der durch die Leiste läuft */
  position: relative;
  overflow: hidden;
  background-color: var(--leiste-hell);
  border-left: 1px solid #c9c6c0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  /* width/border gehören dazu, weil das CV-Panel die Leiste einklappt statt
     sie hart auszublenden (siehe `body.cv-offen .dreid-leiste` in main.css) —
     ohne die beiden Einträge spränge sie beim Schließen des CV zurück. */
  transition: background-color 0.4s ease,
              opacity 0.35s ease,
              width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              border-left-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

/* Beim Klick / offenem Panel weich nach Schwarz überblenden. Das Faden macht
   die 0,4s-Transition auf background-color oben, die Schrift zieht mit. */
.dreid-leiste:hover { background-color: var(--leiste-hover); }

.dreid-leiste:active,
body.dreid-offen .dreid-leiste {
  background-color: var(--leiste-dunkel);
  border-left-color: #2a2723;
}

.dreid-leiste:active .dreid-leiste-text,
body.dreid-offen .dreid-leiste-text { color: #d8d0c0; }

/* Sektionen ohne 3D-Material blenden die Leiste aus. Sie behält dabei ihren
   Platz im Layout (nur opacity/visibility) — würde sie ihn freigeben, spränge
   der Bildbereich bei jedem Scrollen über eine solche Sektion um 74px auf und
   die Bilder würden hüpfen. `display:none` wäre hier ohnehin wirkungslos:
   das display:flex oben ist spezifischer als das [hidden]-Attribut. */
.dreid-leiste[hidden] {
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.dreid-leiste-text {
  font-family: var(--font);
  font-weight: 200;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #4a4740;
  /* von unten nach oben gelesen — die Leiste ist schmaler als das Wort breit */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: color 0.4s ease;
}

.dreid-leiste:hover .dreid-leiste-text { color: #201e1a; }

/* ── Zeichen in der Leiste (seit 02.08.2026 statt der Schrift „3D & INFO") ──
   Die Leiste ist eine senkrechte Spalte, also stehen Würfel, i und Pfeil
   ÜBEREINANDER. Der Aufbau bleibt derselbe wie am Handy — dort nebeneinander,
   hier gekippt. (Seit 06.08.2026 nur noch EIN Pfeil, unter dem Paar; siehe
   main.html.) */
/* Der Abstand hier trennt den PFEIL vom Zeichenpaar (Noah 02.08.2026: „am
   Desktop weiterhin 2 Pfeile, aber mit mehr Abstand zu den Icons"). Er ist
   bewusst ein Vielfaches des Abstands INNERHALB des Paares (9px, siehe
   .leiste-paar) — erst dieses Verhältnis macht sichtbar, dass Würfel und i
   zusammengehören und die Pfeile etwas anderes sagen. Am Handy übernimmt
   dieselbe Trennung der feine Strich; hier in der hohen Leiste ist Platz genug,
   sie über den Abstand zu machen.

   30px, damit optisch 24 ankommen. Der Unterschied kommt von der Drehung: der
   Pfeil ist als Kasten 22×11 und wird um 90° gekippt, sein SICHTBARES Feld ist
   danach 11×22. `gap` rechnet aber mit dem ungedrehten Layout-Kasten, also
   ragen oben und unten je 5,5px in den Zwischenraum hinein. Wer den Wert
   ändert, sollte 5,5px dazurechnen — gemessen: 24px gap ergaben 19px Luft. */
.dreid-leiste-zeichen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  color: #4a4740;
  transition: color 0.4s ease;
}

/* Würfel und i gehören enger zusammen als zu den Pfeilen — sie sind EIN
   Gegenstand, die Pfeile nur seine Einladung. */
.leiste-paar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.leiste-paar svg {
  display: block;
  width: 21px;
  height: 21px;
}

/* Der Pfeil ist um 90° gekippt und zeigt damit WAAGERECHT nach links — in
   die Richtung, aus der das Panel aufzieht (Noah 02.08.2026: „nur eben
   waagerecht zeigend"). Das SVG bleibt also unverändert das flache Winkelchen
   vom Handy; nur seine Lage ist gedreht.

   `rotate(90deg)` an einem 24×12-Feld: nach der Drehung ist es 12 breit und
   24 hoch. Damit die Leiste ihm den richtigen Platz gibt, muss der Kasten die
   GEDREHTEN Maße tragen — sonst schneidet die Spalte den Pfeil ab. */
.dreid-leiste .leiste-pfeil {
  display: block;
  flex: none;
  width: 22px;
  height: 11px;
  transform: rotate(90deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Offen: er zeigt nach rechts = „wieder zuschieben". */
body.dreid-offen .dreid-leiste .leiste-pfeil { transform: rotate(-90deg); }

.dreid-leiste:hover .dreid-leiste-zeichen { color: #201e1a; }

/* Offen = helle Zeichen auf dunkler Leiste.
   Der erste Selektor sieht überflüssig aus, ist es aber NICHT: nach dem Klick
   steht der Mauszeiger noch auf der Leiste, also greift die :hover-Regel
   darüber weiter. Sie wiegt schwerer (drei Klassen) als „body.dreid-offen ...“
   (zwei Klassen + ein Element) und färbte die Zeichen auf #201e1a — fast
   Schwarz auf fast schwarzem Grund, gemessen rgb(32,30,26) auf rgb(20,18,15).
   Die Zeichen waren im offenen Zustand praktisch unsichtbar. Die zusätzliche
   Zeile hebt den Offen-Fall über das Hovern. */
body.dreid-offen .dreid-leiste:hover .dreid-leiste-zeichen,
.dreid-leiste:active .dreid-leiste-zeichen,
body.dreid-offen .dreid-leiste-zeichen { color: #d8d0c0; }

/* (ENTFALLEN 27.07.2026: `@keyframes leiste-welle` + `.dreid-leiste.bulb` —
   die zwei schnellen Wellen beim ersten Erscheinen der Leiste. Noah: „am
   Anfang kommen immer noch so 2 schnelle Wischer". Den Hinweis „hier gibt es
   3D" übernimmt jetzt allein der Tropfen weiter unten, der ruhiger läuft und
   nach dem ersten Klick ganz verstummt.) */

/* ── Tropfen/LUPE, die durch die Leiste läuft ──
   Beim Öffnen des Panels und im Ruhezustand alle paar Sekunden wandert eine
   linsenartige Wölbung durch die Leiste (nur auf dem seitlichen Knopf, nicht
   über dem Panel — Noahs Korrektur 27.07.2026).

   ZWEITER ANLAUF 27.07.2026. Vorher war der Tropfen nur ein `backdrop-filter`
   mit Weichzeichner: Noah dazu — „es wischt nur so drüber, das ist hässlich …
   er ist sehr trüb, das ist das Problem, und die Zoomstärke ist auch nicht
   wirklich da." Weichzeichnen ist eben KEINE Lupe; es nimmt Schärfe weg,
   statt zu vergrößern.

   Jetzt eine echte Linse, ohne WebGL und ohne Weichzeichner:
     · Der Tropfen ist DECKEND in der Farbe der Leiste (background-color:
       inherit) und verbirgt damit die echte Beschriftung darunter.
     · In ihm steckt eine zweite, identisch gesetzte Fassung derselben Schrift
       (.dreid-lupe-inhalt), die um --lupe vergrößert wird.
     · Damit sie an derselben Stelle sitzt wie das Original, verschiebt
       --tropfen-versatz sie um den Abstand zwischen Tropfenmitte und
       Schriftmitte. Beides rechnet main-3d.js Bild für Bild aus — mit reinem
       CSS ginge es nicht, weil `top` sich auf die Leiste, Prozentwerte im
       Inneren sich aber auf den Tropfen beziehen.
   Das Ergebnis ist eine wandernde Vergrößerung: Die Schrift wächst und wandert
   im Glas, wie unter einem Wassertropfen. */
.dreid-tropfen {
  position: absolute;
  left: 50%;
  /* Position der MITTE, in px vom oberen Rand der Leiste; setzt main-3d.js. */
  top: var(--tropfen-y, -50%);
  transform: translate(-50%, -50%);
  /* Breiter als die Leiste (74px), damit das Glas sie randlos ausfüllt */
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;          /* beschneidet den vergrößerten Inhalt zum Tropfen */
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  /* Deckend in der Farbe der Leiste — auch beim Umfärben auf Schwarz, weil der
     geerbte Wert der Übergangsanimation folgt. */
  background-color: inherit;
}

.dreid-leiste.tropft .dreid-tropfen { opacity: var(--tropfen-o, 1); }

/* Die Vergrößerung. transform-origin ist die Tropfenmitte, deshalb wandert der
   Inhalt beim Skalieren von der Mitte weg — genau das macht eine Linse. */
.dreid-lupe {
  position: absolute;
  inset: 0;
  transform: scale(var(--lupe, 1.6));
  transform-origin: 50% 50%;
}

.dreid-lupe-inhalt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--tropfen-versatz, 0px)));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Licht und Rand des Tropfens — LIEGEN ÜBER dem Glas, damit die Wölbung auch
   auf der vergrößerten Schrift zu sehen ist. Wie überall auf dieser Seite ohne
   eigenen Farbton: nur helle Kuppe, dunkle Flanke, ein Hauch Rand. */
.dreid-tropfen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    /* Kuppe (lichtzugewandt) — eng gehalten, sonst wirkt der Tropfen als
       grauer Fleck statt als Glas („er ist sehr trüb"). */
    radial-gradient(circle at 38% 28%,
      rgba(255, 255, 255, 0.50) 0 7%,
      rgba(255, 255, 255, 0.12) 28%,
      rgba(255, 255, 255, 0) 52%),
    /* Flanke (lichtabgewandt) */
    radial-gradient(circle at 62% 76%,
      rgba(0, 0, 0, 0.13) 0 10%,
      rgba(0, 0, 0, 0) 44%),
    /* Glasrand: innen ein feiner dunkler Saum, außen eine Lichtkante */
    radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, 0) 0 76%,
      rgba(0, 0, 0, 0.13) 88%,
      rgba(255, 255, 255, 0.30) 97%,
      rgba(255, 255, 255, 0) 100%);
}

/* Bei reduzierter Bewegung startet main-3d.js den Tropfen gar nicht erst —
   diese Regel ist nur die Rückversicherung, falls doch eine Klasse hängt. */
@media (prefers-reduced-motion: reduce) {
  .dreid-leiste.tropft .dreid-tropfen { opacity: 0; }
}

/* Am Handy ist die 3D-Ansicht seit 26.07.2026 wieder aktiv (auf Wunsch), aber
   schonend: geladen wird weiterhin erst beim Antippen der Leiste (Lazy Loading,
   Three.js + Modelle kommen nicht beim Seitenaufruf), und währenddessen läuft
   ein Ladebalken. Die Leiste verhält sich damit am Handy wie am Desktop —
   deshalb hier keine Sonderregel mehr. */

/* ── Copyright-/Info-Zeile am Seitenende (alle Seiten) ──
   Dezent, mittig, ganz unten im Scrollbereich. Grundfarbe hell (für die
   dunklen Seiten provider.html und den unteren, dunklen Teil der Works-Seite);
   auf hellem Grund setzt main.css die Farbe auf dunkel um. */
.seiten-fuss {
  text-align: center;
  /* Oben viel Luft (27.07.2026, Noah: „mehr Abstand zum letzten Bild") — die
     Zeile soll nicht wie eine Bildunterschrift des letzten Werks wirken,
     sondern als eigener Abschluss der Seite. */
  padding: 9rem 1.5rem 3.5rem;
  font-family: var(--font);
  font-weight: 200;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.4s ease;
}

/* Am Handy passt die Zeile mit 0.28em Sperrung nicht in eine Zeile — sie würde
   mitten im Namen umbrechen. Etwas kleiner und enger gesetzt bleibt sie
   einzeilig; der große Abstand nach oben bleibt (dort etwas weniger, weil der
   ganze Bildschirm kürzer ist). */
@media (max-width: 800px) {
  .seiten-fuss {
    padding: 6rem 1rem 2.5rem;
    /* Gemessen bei 390px: mit 0.66rem/0.16em brach die Zeile mitten im Satz um
       (385px Textbreite bei 358px Platz). 0.62rem/0.1em ergibt 333px. */
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
}