/* Lucia Vonrhein – Gestaltung
   Eine Schrift. Der Grund ist die Farbe des Nebels, in den sich das Startbild auflöst. */

/* GT Planar Medium (Grilli Type), vorerst der einzige Schnitt für alle Texte.
   ACHTUNG: aus der Desktop-Datei (OTF) umgewandelt; vor Veröffentlichung durch die
   Datei aus einer Web-Lizenz ersetzen (siehe LIESMICH.txt).
   Der Gewichtsbereich 100 900 sorgt dafür, dass der Browser für alle Gewichte
   (400, 480, 500) diesen Schnitt nimmt und nichts künstlich fetter rechnet. */
@font-face {
  font-family: "GT Planar";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schrift/GT-Planar-Medium.woff2") format("woff2");
}
/* GT Planar Italic 15 Black: nur für das "hallo" im roten Kreis der Startseite.
   Ebenfalls aus der Desktop-Datei umgewandelt, Web-Lizenz nötig. */
@font-face {
  font-family: "GT Planar";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("schrift/GT-Planar-Italic-15-Black.woff2") format("woff2");
}

:root {
  --nebel: #eceeed;      /* Grund und Nebelfarbe */
  --tinte: #000;         /* Schrift: Schwarz; nur Name und Untertitel auf dem Startbild sind weiß */
  --hell: #fff;
  --rand: clamp(16px, 2.4vw, 36px);
  --gross: clamp(1.75rem, 4.2vw, 3.4rem);
  --gross-gewicht: 480;  /* alle großen Schriften (--gross) etwas fetter als der Text */
  --schrift: "GT Planar", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --name-gewicht: 500;   /* Name etwas fetter als der übrige Text (400) */
  --zusatz-gewicht: 460; /* Untertitel etwas kräftiger als der Text */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nebel);
  color: var(--tinte);
  font-family: var(--schrift);
  font-weight: 400;
  font-size: clamp(15px, 0.9rem + 0.2vw, 17px);
  line-height: 1.4;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, p, dl, dd, ol, figure { margin: 0; padding: 0; }
h1 { font-weight: 400; font-size: inherit; }
ol { list-style: none; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

img { display: block; max-width: 100%; height: auto; }

/* ---------- Kopf- und Fußleiste ---------- */

.leiste {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: var(--rand);
  padding-bottom: 0;
}
.leiste-name,
.fuss-name { font-weight: var(--name-gewicht); color: var(--tinte); }

.fuss {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.5em;
  row-gap: .3em;
  padding: calc(var(--rand) * 4) var(--rand) var(--rand);
  position: relative;
  z-index: 1;
}

/* ---------- Startseite: Bühne ---------- */

/* Scrollweg bis zur vollständigen Auflösung, als Anteil der Fensterhöhe (liest nebel.js) */
.buehne {
  --strecke: .7;
  position: absolute;   /* ohne JavaScript scrollt das Bild einfach weg */
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100lvh;
  z-index: 2;           /* liegt über der Liste und gibt sie beim Auflösen frei */
  overflow: hidden;
  color: var(--tinte);
}
/* Desktop: Bild bleibt stehen, während es sich auflöst. */
.js .buehne { position: fixed; }

/* Touch-Geräte: Bild liegt im Seitenfluss und scrollt mit.
   Safari ab iOS 26 schneidet fixierte Elemente an der Adressleiste ab;
   nur Inhalt im Seitenfluss wird bis an den unteren Rand gezeichnet. */
@media (hover: none) and (pointer: coarse) {
  .buehne { --strecke: .55; }
  .js .buehne { position: absolute; }
}
/* Tippen aufs Bild wechselt es (nebel.js): kein Markieren des Titels, kein Aufblitzen */
.buehne { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

.buehne-bild,
.buehne-nebel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.buehne-bild { object-fit: cover; object-position: 50% 0; max-width: none; }   /* nur unten anschneiden */
.buehne-nebel { opacity: 0; }
.buehne.gl-bereit .buehne-nebel { opacity: 1; }
.buehne.gl-bereit .buehne-bild { visibility: hidden; }

/* Name und Untertitel: weiß, oben links auf dem Startbild. Liegen in .buehne,
   lösen sich mit dem Bild auf (Ausblenden und Unschärfe, nebel.js) und scrollen auf
   Touch-Geräten mit ihm. Klicks gehen durch aufs Bild (Bildwechsel per Tipp). */
.buehne-titel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: var(--rand);
  color: var(--hell);
  pointer-events: none;
}
/* Name wie die Stücktitel, Untertitel optisch wie die Jahreszahlen der Werkliste.
   Gleiche Strichstärken wie die Liste (--gross-gewicht bzw. 400). Der Untertitel ist
   etwas größer gesetzt, weil Ziffern Versalhöhe haben (72 %), Kleinbuchstaben nur 49 %:
   bei gleicher Schriftgröße wirkte er sonst kleiner als die Jahreszahlen. */
.buehne-titel h1 {
  font-size: var(--gross);
  font-weight: var(--gross-gewicht);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.buehne-titel p {
  margin-top: .25rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}
/* Abstand bis zur Liste. Mit JavaScript liegt die Liste schon unter dem Bild
   und wird freigegeben, während es sich auflöst (siehe nebel.js). */
.buehne-abstand {
  height: 100vh;
  height: 100svh;
}
.js .buehne-abstand {
  height: 72vh;
  height: 72svh;
}
@media (hover: none) and (pointer: coarse) {
  .js .buehne-abstand { height: 58vh; height: 58svh; }
}

/* ---------- Inhalt ---------- */

.inhalt {
  position: relative;
  z-index: 1;
  min-height: 60vh;
}
.start .inhalt { min-height: 100svh; }


.hinweis {
  padding: calc(var(--rand) * 2) var(--rand);
  max-width: 38em;
}
.hinweis a { color: var(--tinte); }

/* Liste der Stücke */

.werkliste {
  padding: calc(var(--rand) * 3) var(--rand) 0;
  font-size: var(--gross);
  font-weight: var(--gross-gewicht);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.werkliste li + li { margin-top: .55em; }
.werkliste a { display: block; }
.werk-titel { display: block; }
.werk-jahr {
  display: block;
  margin-top: .25rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.werkliste a:hover { text-decoration: none; }
.werkliste a:hover .werk-titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }


/* Unterseite eines Stücks */

.stueck-kopf {
  padding: calc(var(--rand) * 3) var(--rand) calc(var(--rand) * 2.5);
  max-width: 64rem;
}
.stueck-kopf h1 {
  font-size: var(--gross);
  font-weight: var(--gross-gewicht);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: .9em;
}
.angaben > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  column-gap: 1em;
}
.angaben a { border-bottom: 1px solid currentColor; }
.stueck-text {
  margin-top: 1.6em;
  max-width: 34em;
}
.stueck-text p + p { margin-top: .8em; }
.stueck-text a { border-bottom: 1px solid currentColor; }

@media (max-width: 480px) {
  .angaben > div { grid-template-columns: 1fr; }
  .angaben > div + div { margin-top: .5em; }
}

/* Bilder: jedes Bild passt ganz in den Bildschirm, linksbündig an der Textkante */

.bilder {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 5vw, 72px);
  padding: 0 var(--rand);
}
.bilder img {
  /* --r = Seitenverhältnis (Breite/Höhe), wird pro Bild gesetzt */
  width: min(100%, calc((100vh - 2 * var(--rand)) * var(--r, 1.5)));
  width: min(100%, calc((100svh - 2 * var(--rand)) * var(--r, 1.5)));
  height: auto;
  background: #e2e4e3;
}
@media (max-width: 700px) {
  .bilder { padding: 0; gap: 12px; }
}

.stueck-weiter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em 2.5em;
  padding: calc(var(--rand) * 3) var(--rand) 0;
}

/* Impressum, Datenschutz */

.textseite {
  padding: calc(var(--rand) * 3) var(--rand) 0;
  max-width: 40em;
}
.textseite h1 {
  font-size: var(--gross);
  font-weight: var(--gross-gewicht);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: .9em;
}
.textseite p + p { margin-top: .9em; }
.textseite a { border-bottom: 1px solid currentColor; }