/* ==========================================================
   STYLE.CSS
   Hier steckt das komplette Aussehen der Seite.
   Alle HTML-Dateien laden diese eine Datei.

   Das Wichtigste zum Ändern steht in Abschnitt 2 ("Stellschrauben"):
   Farben, Schrift und alle Schriftgrößen. Wert ändern, speichern,
   Live Server lädt die Seite neu, fertig.

   Wie CSS funktioniert, in einem Satz:
     .name { font-size: 20px; }
     ^^^^^   ^^^^^^^^^  ^^^^
     WAS     WELCHE      WELCHER
     (Klasse  Eigenschaft Wert
     im HTML)

   ".name" meint alle Elemente mit class="name" im HTML.
   "var(--irgendwas)" holt einen Wert aus Abschnitt 2.
   ========================================================== */


/* ----------------------------------------------------------
   1. Schrift: Familjen Grotesk (frei nutzbar, SIL Open Font License)
   Die Dateien liegen in assets/fonts/ und werden von deinem eigenen
   Webspace geladen, nicht von einem fremden Server.

   Später mit gekaufter Lizenz auf z. B. Neue Montreal wechseln:
   Schriftdateien in assets/fonts/ ablegen, einen @font-face-Block
   nach dem Muster unten ergänzen und bei --schrift den Namen tauschen.
   ---------------------------------------------------------- */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/familjen-grotesk-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ----------------------------------------------------------
   2. STELLSCHRAUBEN
   Alles, was du am häufigsten ändern wirst, steht hier an einem Ort.
   Der Rest der Datei holt sich die Werte mit var(--name).

   Einheiten:
     rem   = Vielfaches der Grundschrift des Browsers (1rem = 16 px).
     vw    = Prozent der Fensterbreite (12vw = 12 % der Breite).
     clamp(KLEINSTE, WUNSCH, GRÖSSTE)
           = wächst mit dem Fenster mit (WUNSCH), wird aber nie
             kleiner als KLEINSTE und nie größer als GRÖSSTE.

   Tipp: In VS Code erscheint vor jeder Farbe ein kleines Farbfeld.
   Klickst du darauf, öffnet sich ein Farbwähler.
   ---------------------------------------------------------- */
:root {
  /* Farben, heller Modus */
  --farbe-text: #111111;          /* Schrift, aktive Menüpunkte und Projekte */
  --farbe-leise: #c2c2c2;         /* nicht aktive Menüpunkte und Projekte (das helle Grau) */
  --farbe-grau: #7a7a7a;          /* kleine Beschriftungen, englische Texte */
  --farbe-linie: #e6e6e6;         /* feine Linie unter dem Kopf */
  --farbe-hintergrund: #ffffff;

  /* Schrift */
  --schrift: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fett: 600;                    /* Stärke der großen Schrift: 400 normal, 600 halbfett, 700 fett */

  /* Schriftgrößen */
  --groesse-riesig: clamp(3.2rem, 11.5vw, 14rem);    /* Startseite: Menü und Name */
  --groesse-gross: clamp(2.4rem, 4.6vw, 5rem);       /* Projekttitel, Seitentitel links */
  --groesse-liste: clamp(1.4rem, min(2.9vw, 5.4vh), 3rem);  /* Projekte-Liste, E-Mail auf Kontakt (passt sich auch der Fensterhöhe an) */
  --groesse-mittel: clamp(1.15rem, min(1.65vw, 2.1vh), 1.65rem);  /* Info-Text (passt sich auch der Fensterhöhe an) */
  --groesse-kopf: 1.05rem;                           /* Name und Menü oben */
  --groesse-text: 0.95rem;                           /* Fließtext */
  --groesse-klein: 0.72rem;                          /* Beschriftungen, Fuß */

  /* Abstände */
  /* Abstand zum Fensterrand. Bei iPhones quer nie kleiner als die Kamera-Aussparung (env). */
  --rand: max(clamp(0.9rem, 1.6vw, 1.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --luecke: 0.4rem;                /* Abstand zwischen den Bildern auf Projektseiten */
  --zeiger-groesse: 14px;          /* Kreis, der der Maus folgt */
}

/* Dunkler Modus: gilt, wenn jemand unten auf "Dunkel" klickt (assets/js/modus.js) */
:root[data-modus="dunkel"] {
  --farbe-text: #f0f0f0;
  --farbe-leise: #4d4d4d;
  --farbe-grau: #9a9a9a;
  --farbe-linie: #262626;
  --farbe-hintergrund: #0e0e0e;
  color-scheme: dark;
}

/* Am Handy (bis 800 px Breite) gelten diese Werte statt der oberen */
@media (max-width: 800px) {
  :root {
    --groesse-kopf: 1.6rem;
    --groesse-gross: clamp(2.3rem, 11vw, 3.4rem);
    --groesse-liste: clamp(1.8rem, 8.5vw, 2.4rem);
    --groesse-mittel: 1.2rem;
    --groesse-text: 1rem;
    --groesse-klein: 0.78rem;
  }
}


/* ----------------------------------------------------------
   3. Grundlagen
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  hyphens: auto;  /* lange deutsche Wörter dürfen getrennt werden */
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--groesse-text);
  line-height: 1.4;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s, opacity 0.12s;
}

a:hover {
  color: var(--farbe-grau);
}

h1,
h2,
p,
ul,
dl,
dd {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

/* Knöpfe sehen aus wie normaler Text */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

/* Große Schrift: halbfett, eng gesetzt */
.gross {
  font-weight: var(--fett);
  letter-spacing: -0.035em;
  line-height: 0.98;
}


/* ----------------------------------------------------------
   4. Zweisprachigkeit
   Deutsch steht zuerst in Schwarz, Englisch darunter in Grau.
   Mit "en" auf der Startseite (sprache.js) dreht sich das um:
   Englisch oben in Schwarz, Deutsch darunter in Grau. Das gilt für
   alle Bereiche mit class="zweisprachig" (Info, Kontakt, Projektseiten).
   ---------------------------------------------------------- */
.englisch,
.en {
  color: var(--farbe-grau);
}

.englisch {
  margin-top: 2rem;
}

[data-sprache="en"] .zweisprachig {
  display: flex;
  flex-direction: column;
}

[data-sprache="en"] .zweisprachig > .projekt-daten {
  order: -2;
}

[data-sprache="en"] .zweisprachig > [lang="en"] {
  order: -1;
  margin-top: 0;
  color: var(--farbe-text);
}

[data-sprache="en"] .zweisprachig > [lang="de"] {
  margin-top: var(--sprach-abstand, 2rem);
  color: var(--farbe-grau);
}


/* ----------------------------------------------------------
   5. Seitenrahmen: Kopf oben, Inhalt, Fuß unten
   ---------------------------------------------------------- */
.seite {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--rand);
}

main {
  flex: 1;
}

/* Kopf: Name links, Menü ab der Seitenmitte, feine Linie darunter.
   Bleibt beim Scrollen oben stehen. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--rand);
  align-items: baseline;
  margin: 0 calc(-1 * var(--rand));
  padding: 0.8rem var(--rand);
  padding-top: max(0.8rem, env(safe-area-inset-top, 0px));
  background: var(--farbe-hintergrund);
  border-bottom: 1px solid var(--farbe-linie);
  font-size: var(--groesse-kopf);
  font-weight: var(--fett);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Der Name ist nur so breit wie sein Text, damit man nur dort klickt */
.kopf-name {
  justify-self: start;
}

/* Der Name wird beim Drüberfahren nicht grau, es erscheint nur das Oval (zeiger.js) */
.kopf-name:hover {
  color: inherit;
}

/* Menü als Wortliste: "Projekte, Info, Kontakt". Aktuelle Seite schwarz, der Rest grau.
   Feiner als der Name (font-weight 400), Abstand zwischen den Wörtern: column-gap. */
.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6em;
  font-weight: 400;
}

.navigation a {
  color: var(--farbe-leise);
}

.navigation a:not(:last-of-type)::after {
  content: ",";
}

.navigation a[aria-current="page"],
.navigation a:hover {
  color: var(--farbe-text);
}

/* Hell/Dunkel: am Computer oben rechts in der Ecke, so groß wie das Menü.
   Beim Drüberfahren wird der Mauskreis zu einem Oval um das Wort (zeiger.js).
   Am Handy steht der Schalter stattdessen im Fuß (.modus-unten, Abschnitt 13). */
.modus-oben {
  margin-left: auto;
  color: var(--farbe-leise);
}

.modus-oben:hover {
  color: var(--farbe-text);
}

.modus-unten {
  display: none;
}

/* Fuß: kleine Zeile mit Instagram, Impressum, Datenschutz und Hell/Dunkel */
.fuss {
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
}

/* Textseiten (Info, Kontakt, Impressum, Datenschutz) am Computer: der Fuß bleibt
   immer unten im Fenster sichtbar. Längerer Text scrollt darunter durch. */
@media (min-width: 801px) {
  .seite:has(.spalten) .fuss {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: 2rem;
    padding-top: 0.9rem;
    background: var(--farbe-hintergrund);
  }

  /* auf der Malfläche ohne weiße Fläche */
  .kontakt .seite:has(.spalten) .fuss {
    background: none;
  }
}

/* Der große Name im Fuß erscheint nur auf der Startseite (Abschnitt 7) */
.fuss .name {
  display: none;
}

.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: var(--groesse-klein);
  color: var(--farbe-grau);
}

.fuss-zeile a:hover,
.fuss-zeile button:hover {
  color: var(--farbe-text);
}

/* Sprachwahl im Fuß: ganz rechts */
.fuss-zeile .sprach-knopf {
  margin-left: auto;
}


/* ----------------------------------------------------------
   6. Slideshow (nur noch Startseite)
   Die Bilder liegen übereinander, nur das aktive ist sichtbar.
   assets/js/slideshow.js schaltet um. Linke Bildhälfte: zurück, rechte: weiter.
   ---------------------------------------------------------- */
.slideshow {
  position: relative;
  overflow: hidden;
}

.slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;  /* Dauer der Überblendung */
}

.slide.aktiv {
  opacity: 1;
}

.slide-knopf {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 50%;
}

.slide-zurueck {
  left: 0;
}

.slide-weiter {
  right: 0;
}

.slide-knopf:focus,
.slide-knopf:focus-visible {
  outline: none;
}


/* ----------------------------------------------------------
   7. Startseite: Fotos im Vollbild, darüber riesige Schrift
   Oben das Menü, unten dein Name, beides in --groesse-riesig.
   ---------------------------------------------------------- */
.start {
  --farbe-text: #ffffff;
  --farbe-grau: rgb(255 255 255 / 0.75);
  color: #ffffff;
  background: #000000;
}

/* Die Fotos sind so hoch wie der ganze Bildschirm (100lvh), nicht nur der sichtbare
   Bereich zwischen den Leisten. So reichen sie am iPhone auch unter die Leiste von Safari.
   Absolut statt fixiert: Fixierte Flächen stoppt Safari (iOS 26) an den Leisten. */
.start .slideshow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
}

.start .slide {
  object-position: center 40%;  /* welcher Bildausschnitt sichtbar bleibt */
}

/* Leichter Schatten oben und unten, damit die weiße Schrift auch auf hellen Fotos lesbar bleibt */
.start .slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.25) 0%, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0) 60%, rgb(0 0 0 / 0.4) 100%);
  pointer-events: none;
}

/* Die Seite liegt über den Fotos. Nur Links und Knöpfe sind anklickbar,
   alles andere lässt Klicks zu den Fotos durch (Bild vor/zurück). */
.start .seite {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  pointer-events: none;
}

.start .seite a,
.start .seite button {
  pointer-events: auto;
}

.start .kopf,
.start .fuss {
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.25);
}

.start .seite {
  padding: 0 calc(var(--rand) * 0.6);  /* etwas näher am linken Rand als die Unterseiten */
}

.start .kopf {
  position: static;
  display: block;
  margin-inline: 0;   /* ohne die seitliche Überbreite der Unterseiten, sonst lässt sich */
  padding-inline: 0;  /* die Startseite am Handy ein Stück zur Seite wischen */
  background: none;
  border: 0;
  padding-top: max(0.6rem, env(safe-area-inset-top, 0px));
}

/* Startseite: nichts zum Scrollen, auch kein Nachfedern beim Wischen */
html:has(body.start) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Oben der Name klein brauchen wir hier nicht, er steht unten riesig */
.start .kopf-name {
  display: none;
}

.start .navigation {
  margin-left: -0.04em;  /* optischer Ausgleich: große Buchstaben stehen sonst eingerückt */
  column-gap: 0.25em;
  font-weight: var(--fett);
  font-size: var(--groesse-riesig);
  letter-spacing: -0.045em;
  line-height: 0.92;
}

.start .navigation a {
  color: #ffffff;
}

/* Kein Komma auf der Startseite, stattdessen Schrägstriche (im HTML als <span class="trenner">).
   Sie sind nicht klickbar und ändern sich beim Drüberfahren nicht. */
.start .navigation a:not(:last-of-type)::after {
  content: none;
}

.start .trenner {
  color: rgb(255 255 255 / 0.45);
}

.start a:hover {
  color: rgb(255 255 255 / 0.6);
}

.start .fuss {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: auto;
}

/* Der Name: Abstand nach unten = margin (zweiter Wert unten). Größer = Name steht höher. */
.start .fuss .name {
  display: block;
  margin: 0 0 0.12em -0.04em;
  font-size: min(var(--groesse-riesig), 11.4vw);  /* passt immer in eine Zeile */
  font-weight: var(--fett);
  letter-spacing: -0.045em;
  line-height: 0.92;
  white-space: nowrap;
}

/* Sprachwahl "en" / "de" rechts neben dem Namen, kleiner.
   Abstand zum rechten Rand: margin-right. */
.start .sprach-knopf {
  margin-left: auto;
  margin-right: 0.5em;
  font-size: var(--groesse-liste);
  font-weight: var(--fett);
  letter-spacing: -0.02em;
  line-height: 1;
}


/* ----------------------------------------------------------
   8. Seiten mit Titel links und Inhalt rechts
   (Info, Kontakt, Impressum, Datenschutz)
   Die rechte Spalte beginnt genau dort, wo oben das Menü beginnt.
   ---------------------------------------------------------- */
.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--rand);
  align-content: start;
  padding-top: 2.5rem;
}

.seitentitel {
  font-size: var(--groesse-gross);
  font-weight: var(--fett);
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.fliesstext {
  max-width: 38rem;
}

.fliesstext p + p {
  margin-top: 1em;
}

.fliesstext h2 {
  margin: 2em 0 0.4em;
  font-size: var(--groesse-klein);
  font-weight: 400;
  color: var(--farbe-grau);
}

.fliesstext h2:first-child {
  margin-top: 0;
}

.fliesstext a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* Info: der obere Text groß (Deutsch, bzw. Englisch nach Klick auf "en"), der andere normal */
:root:not([data-sprache="en"]) .einleitung [lang="de"],
[data-sprache="en"] .einleitung [lang="en"] {
  font-size: var(--groesse-mittel);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Impressum und Datenschutz: am Computer kleiner und über die ganze rechte Spalte,
   damit alles ohne Scrollen ins Fenster passt. Die Schrift richtet sich nach der
   Fensterhöhe (1.45vh), nie kleiner als 0.65rem, nie größer als 0.8rem. */
@media (min-width: 801px) {
  .rechtliches {
    max-width: none;
    font-size: clamp(0.65rem, 1.45vh, 0.8rem);
    line-height: 1.35;
  }

  .rechtliches h2 {
    margin: 1em 0 0.2em;
    font-size: inherit;
  }

  .rechtliches p + p {
    margin-top: 0.6em;
  }
}

/* Kontakt: Der Text sitzt etwa fünf Zeilen tiefer, damit die Seite nicht oben klebt.
   Mehr oder weniger: die 5 ändern. */
.kontakt .spalten-inhalt {
  padding-top: calc(5 * 1.1 * var(--groesse-liste));
}

/* Kontakt: Deutsch und Englisch stehen dicht untereinander */
.kontakt .zweisprachig {
  --sprach-abstand: 1em;
}

/* Kontakt: E-Mail und Instagram groß */
.kontakt-links {
  margin-top: 2.5rem;
  font-size: var(--groesse-liste);
  font-weight: var(--fett);
  letter-spacing: -0.03em;
  line-height: 1.1;
  hyphens: none;
}

.fliesstext .kontakt-links a {
  text-decoration: none;
}


/* ----------------------------------------------------------
   9. Projekte-Übersicht (projekte.html)
   Links die Titel groß: das gewählte Projekt schwarz, die anderen grau.
   Rechts die Bilder des gewählten Projekts untereinander (uebersicht.js).
   ---------------------------------------------------------- */
.uebersicht {
  position: relative;
  padding-top: 2.5rem;
}

/* Der Titel "Projekte" steht schon oben im Menü, hier nur für Screenreader */
.uebersicht .seitentitel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.projekt-liste {
  width: calc(50% - var(--rand) / 2);
  font-size: var(--groesse-liste);
  font-weight: var(--fett);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.projekt-liste a {
  display: inline-block;
  padding: 0.03em 0;
  color: var(--farbe-leise);
}

.projekt-liste li.aktiv a,
.projekt-liste a:hover {
  color: var(--farbe-text);
}

/* Jahr klein und hochgestellt, nur beim gewählten Projekt */
.projekt-liste .jahr {
  display: inline-block;
  margin-left: 0.35em;
  vertical-align: top;
  font-size: var(--groesse-klein);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  visibility: hidden;
}

.projekt-liste li.aktiv .jahr {
  visibility: visible;
}

/* Die Bilder rechts: Spalte, die für sich scrollt (ohne sichtbaren Balken) */
.vorschau-bilder {
  display: none;
  position: absolute;
  top: 2.5rem;
  bottom: 0;
  left: calc(50% + var(--rand) / 2);
  right: 0;
  flex-direction: column;
  gap: var(--luecke);
  overflow-y: auto;
  padding-bottom: 2rem;
  scrollbar-width: none;
}

.vorschau-bilder::-webkit-scrollbar {
  display: none;
}

.projekt-liste li.aktiv .vorschau-bilder {
  display: flex;
}

.vorschau-bilder img {
  width: 100%;
  height: auto;
}

/* Am Computer passt die Übersicht genau ins Fenster, nur die Bilder rechts scrollen */
@media (min-width: 801px) {
  .uebersichtseite {
    overflow: hidden;
  }

  .uebersichtseite .seite {
    height: 100vh;
    height: 100dvh;
  }

  .uebersichtseite .uebersicht {
    min-height: 0;
  }

  .uebersichtseite .fuss {
    margin-top: 1.5rem;
  }
}


/* ----------------------------------------------------------
   10. Projektseite (wie ein Magazin)
   Oben links der große Titel, rechts kleine Infos und der Text.
   Darunter alle Bilder, immer zwei nebeneinander und gleich hoch
   (projekt.js teilt sie in Paare und rechnet die Breiten aus).
   ---------------------------------------------------------- */
.projekt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  column-gap: var(--rand);
  row-gap: 4rem;
  padding-top: 2.5rem;
}

/* Pfeil über dem Titel: führt zurück zur Projektübersicht.
   Beim Drüberfahren legt sich der Mauskreis groß um den Pfeil (zeiger.js). */
.projekt-zurueck {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--farbe-text);
}

.projekt-zurueck:hover {
  color: var(--farbe-text);
}

.projekt-pfeil {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.projekt-titel {
  max-width: 11em;
  font-size: var(--groesse-gross);
  font-weight: var(--fett);
  letter-spacing: -0.035em;
  line-height: 0.98;
  hyphens: manual;
}

/* Kleine Infos: graue Beschriftung, darunter der Wert, zwei Spalten */
.projekt-daten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem var(--rand);
  margin: calc(1.5rem + 1.25rem) 0 2.5rem;  /* steht auf Höhe des Titels */
}

.projekt-daten dt,
.text-de::before,
.text-en::before {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--groesse-klein);
  color: var(--farbe-grau);
}

.text-de::before {
  content: "Beschreibung";
}

.text-en::before {
  content: "Description";
}

.projekt-daten .video {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.projekt-infos p,
.projekt-infos h2 {
  max-width: 36rem;
}

.projekt-infos p + p {
  margin-top: 0.9em;
}

.projekt-infos h2 {
  margin: 1.5em 0 0.3em;
  font-size: inherit;
  font-weight: var(--fett);
}

/* Bilder: über die ganze Breite, fast bis an den Rand */
.projekt-bilder {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--luecke);
  margin: 0 calc(var(--luecke) - var(--rand));
}

.projektseite .fuss {
  margin-top: 0.9rem;  /* gleich viel Abstand über und unter der Fußzeile */
}

.bilder-reihe {
  display: flex;
  gap: var(--luecke);
}

/* Jedes Bild wächst im Verhältnis seiner Breite zur Höhe, dadurch gleich hoch */
.bilder-reihe img,
.bilder-reihe video {
  flex: var(--verhaeltnis, 1) 1 0%;
  min-width: 0;
  height: auto;
}

/* Videos füllen ihren Rahmen ganz aus, ohne schwarze Ränder.
   aspect-ratio hält Safari davon ab, das Video höher als das Bild zu machen. */
.projekt-bilder video {
  aspect-ratio: var(--verhaeltnis, 1.5);
  object-fit: cover;
  background: var(--farbe-hintergrund);
}

/* Bleibt am Ende ein Bild allein: quer über die ganze Breite, hoch nur halb so breit */
.bilder-reihe.einzeln img,
.bilder-reihe.einzeln video {
  flex: none;
  width: 100%;
}

.bilder-reihe.einzeln img.hoch,
.bilder-reihe.einzeln video.hoch,
.bilder-reihe.einzeln .klein {
  width: calc(50% - var(--luecke) / 2);
}

/* "1 / 9" unter den Bildern gibt es nur am Handy (Abschnitt 13) */
.bilder-zaehler {
  display: none;
}

/* Hinweis, falls die Textdateien nicht geladen werden konnten */
.hinweis {
  padding: 1rem;
  border: 1px solid currentColor;
}


/* ----------------------------------------------------------
   11. Kontakt: Malfläche (assets/js/verlauf.js)
   Mit der Maus malt man weiche, helle Farbspuren, die nach einigen
   Sekunden verblassen. Farben, Dauer, Größe usw. stehen oben in verlauf.js.
   Wer es schlicht will: <div class="farbfelder"> in kontakt.html löschen.
   ---------------------------------------------------------- */
.kontakt .seite {
  position: relative;
  z-index: 1;
}

.kontakt .kopf {
  background: none;
}

.farbfelder {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.farbfelder canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Oben bleibt es etwas heller, damit das Menü ruhig steht.
   70% = wie stark aufgehellt wird, 35% = wie weit nach unten das reicht. */
.farbfelder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--farbe-hintergrund) 70%, transparent) 0%, transparent 35%);
}


/* ----------------------------------------------------------
   12. Mauszeiger: der normale Zeiger ist ausgeblendet. Stattdessen folgt
   ein kleiner Kreis der Maus (assets/js/zeiger.js). Er invertiert sich
   selbst: auf Weiß schwarz, auf dunklen Fotos weiß.
   Größe: --zeiger-groesse in Abschnitt 2. Auf Touchgeräten gibt es keinen Kreis.
   ---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  *,
  *::before,
  *::after {
    cursor: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0, none !important;
  }
}

.zeiger {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: var(--zeiger-groesse);
  height: var(--zeiger-groesse);
  border-radius: 999px;  /* rund, als Oval: Kapselform */
  background: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, width 0.5s ease, height 0.5s ease;
  will-change: transform;
}

/* Über Kopf und Sprachwahl: der Kreis wird zum Oval um das Wort (Maße setzt zeiger.js).
   Er wächst von der Stelle aus, an der die Maus das Wort erreicht.
   Dauer der Bewegung: die Sekunden bei width, height und transform. */
.zeiger.oval {
  transition: opacity 0.15s, width 0.5s ease, height 0.5s ease, transform 0.5s ease;
}

.kontakt .zeiger:not(.oval) {
  /* auf der Malfläche ohne Überblendung (schont die Leistung) */
  mix-blend-mode: normal;
  background: var(--farbe-text);
}

.zeiger.sichtbar {
  opacity: 1;
}


/* ----------------------------------------------------------
   13. Handy und kleine Fenster (bis 800 px Breite)
   Alles hier drin gilt nur auf schmalen Bildschirmen und
   überschreibt die Regeln weiter oben.
   ---------------------------------------------------------- */
@media (max-width: 800px) {

  /* --- Kopf: Name links, rechts die Menüpunkte untereinander ---
     Bleibt beim Scrollen oben stehen, darunter scrollt der Inhalt.
     Größe: --groesse-kopf im Handy-Block von Abschnitt 2. */
  .kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-block: 0.85rem;
    padding-top: max(0.85rem, env(safe-area-inset-top, 0px));
  }

  .kopf-name {
    white-space: nowrap;
  }

  .navigation {
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
  }

  .navigation a:not(:last-of-type)::after {
    content: none;
  }

  /* Kontakt: Die Farben reichen bis in den Kopf. Die Seite steht still,
     damit sie sich beim Malen mit dem Finger nicht mitbewegt. */
  html:has(body.kontakt) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  html:has(body.kontakt),
  body.kontakt {
    touch-action: none;
  }

  /* Malfläche läuft oben und unten weich aus, damit an der Uhrzeit-Leiste und an der
     Adressleiste von Safari keine Farbkante entsteht. 14% = wie weit der Verlauf reicht. */
  .farbfelder canvas {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }

  /* Hell/Dunkel am Handy im Fuß statt oben */
  .modus-oben {
    display: none;
  }

  .modus-unten {
    display: inline;
  }

  /* Projektseiten: kein Kopf, oben stehen nur Pfeil und Projektname */
  .projektseite .kopf {
    display: none;
  }

  /* Kontakt: Text nur ein wenig tiefer, E-Mail-Adresse passt immer in eine Zeile */
  .kontakt .spalten-inhalt {
    padding-top: 2rem;
  }

  .kontakt-links {
    font-size: min(var(--groesse-liste), 6.2vw);
    overflow-wrap: anywhere;
  }

  /* Startseite: Menü riesig nebeneinander, "en" auf einer Linie mit dem Namen */
  .start .navigation {
    flex-direction: row;
    align-items: baseline;
  }

  /* "en"/"de" am Handy: auf halber Höhe des Namens, als halbtransparenter Knopf */
  .start .fuss {
    align-items: center;
  }

  .start .sprach-knopf {
    margin-right: 0.4rem;   /* größer = Knopf weiter links */
    margin-bottom: -0.1rem;  /* größer = Knopf sitzt höher */
    padding: 0.06em 0.6em 0.34em;  /* oben weniger als unten: so sitzt "en" optisch mittig */
    border-radius: 999px;
    background: rgb(255 255 255 / 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 1.1rem;
    text-shadow: none;
  }

  /* Seitentitel "Projekte", "Info", "Kontakt" braucht es am Handy nicht
     (für Screenreader bleibt er unsichtbar erhalten) */
  .nur-web {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .spalten {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
    padding-top: 1.5rem;
  }

  .fuss {
    margin-top: 3rem;
  }

  /* Fußzeile etwas näher an den unteren Rand (Startseite ausgenommen) */
  body:not(.start) .fuss {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Kontakt: E-Mail und Instagram etwas tiefer */
  .kontakt-links {
    margin-top: 4rem;
  }

  /* Projektseiten: Abstand zwischen Text und Fußzeile */
  .projektseite .fuss {
    margin-top: 2.1rem;
  }

  .fuss-zeile {
    justify-content: center;
    gap: 0.4rem 1rem;
    font-size: 0.7rem;
  }

  /* Sprachwahl gibt es am Handy im Fuß nicht (die Seiten zeigen ohnehin beide Sprachen) */
  .fuss-zeile .sprach-knopf {
    display: none;
  }

  /* --- Projekte am Handy: große Titel, rechts ein kleines Bild, feine Linien dazwischen ---
     Breite der Bilder: width bei .vorschau-bilder. */
  .uebersicht {
    padding-top: 0.5rem;
  }

  .projekt-liste {
    width: auto;
    hyphens: manual;
  }

  .projekt-liste li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--farbe-linie);
  }

  .projekt-liste a,
  .projekt-liste li.aktiv a,
  .projekt-liste a:hover {
    flex: 1;
    padding: 0;
    color: var(--farbe-text);
  }

  /* die ganze Zeile ist antippbar, auch das Bild */
  .projekt-liste a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .projekt-liste .jahr {
    visibility: visible;
    color: var(--farbe-grau);
  }

  .vorschau-bilder,
  .projekt-liste li.aktiv .vorschau-bilder {
    display: block;
    position: static;
    flex: none;
    width: 4.2rem;
    padding: 0;
    overflow: visible;
  }

  .vorschau-bilder img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* am Handy nur das erste Bild jedes Projekts */
  .vorschau-bilder img:not(:first-child) {
    display: none;
  }

  /* --- Projektseite: Titel, dann die Bilder als Wischstreifen (wie bei Instagram),
     darunter "1 / 9", dann Infos und Text ---
     Form der Bilder: aspect-ratio (1 / 1 = quadratisch, 4 / 5 = etwas höher). */
  .projekt {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
    padding-top: 1.25rem;
  }

  .projekt-kopf {
    order: 1;
  }

  .projekt-bilder,
  .bilder-zaehler {
    order: 2;
  }

  .projekt-infos {
    order: 3;
    margin-top: 1rem;
  }

  .projekt {
    padding-top: 0;
  }

  /* Pfeil und Titel bleiben beim Scrollen oben stehen, die Bilder laufen darunter durch */
  .projekt-kopf {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 calc(-1 * var(--rand));
    padding: max(1rem, env(safe-area-inset-top, 0px)) var(--rand) 0.75rem;
    background: var(--farbe-hintergrund);
  }

  .projekt-zurueck {
    margin: 0;
  }

  .projekt-pfeil {
    width: 1.4rem;
    height: 1.4rem;
  }

  .projekt-daten {
    margin-top: 0;
  }

  .projekt-bilder {
    flex-direction: row;
    gap: 0;
    margin: 0 calc(-1 * var(--rand));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .projekt-bilder::-webkit-scrollbar {
    display: none;
  }

  .bilder-reihe {
    display: contents;
  }

  .bilder-reihe img,
  .bilder-reihe video,
  .bilder-reihe.einzeln img,
  .bilder-reihe.einzeln img.hoch {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    scroll-snap-align: start;
  }

  .bilder-zaehler {
    display: block;
    margin-top: -0.6rem;
    font-size: var(--groesse-klein);
    color: var(--farbe-grau);
  }
}


/* Wer Bewegung am Rechner abgeschaltet hat, bekommt keine Überblendung */
@media (prefers-reduced-motion: reduce) {
  .slide,
  a,
  .navigation {
    transition: none !important;
  }
}