/* ---------- Basics ---------- */
:root {
  --tinte: #0d0a12;
  --hell: #f6efe2;
  --akzent: #f0c35a;        /* stage gold */
  --serif: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--hell);
  background: #07060c;
}

h1, h2 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.35em;
}

h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin-top: 2.6rem;
}

a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- Header (always visible, normal navigation) ---------- */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
  background: linear-gradient(rgba(13, 10, 18, 0.9), rgba(13, 10, 18, 0.55));
  backdrop-filter: blur(10px);
}

.logo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  text-decoration: none;
  white-space: nowrap;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem 0.3rem;
}

nav a {
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
nav a:hover { background: rgba(255, 255, 255, 0.14); }
nav a.aktiv { background: var(--akzent); color: var(--tinte); }

/* ---------- Places: one colour scheme each ---------- */
@property --akzent {
  syntax: "<color>";
  inherits: true;
  initial-value: #f0c35a;
}
body {
  --wasch: 170, 30, 45;                 /* colour of the light in this place */
  transition: --akzent 1.6s;
}
body[data-ort="about"]           { --akzent: #ffcf70; --wasch: 170, 30, 45; }
body[data-ort="welcome"]         { --akzent: #ffe0a3; --wasch: 150, 80, 40; }
body[data-ort="works"]           { --akzent: #dcb0ff; --wasch: 130, 60, 200; }
body[data-ort="teaching"]        { --akzent: #86f0a8; --wasch: 20, 150, 70; }
body[data-ort="instrumentalist"] { --akzent: #93c8ff; --wasch: 30, 90, 210; }
body[data-ort="photography"]     { --akzent: #ffb768; --wasch: 210, 120, 30; }
body[data-ort="contact"]         { --akzent: #ffabcb; --wasch: 210, 70, 120; }

/* ---------- The theatre: one big picture behind everything ---------- */
.kulisse {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #07060c;
}
/* The camera: moved by raum.js to the spot of the current place */
.kamera {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  transform: translate3d(var(--kx, 0px), var(--ky, 0px), 0);
  transition: transform 2.4s cubic-bezier(0.65, 0.02, 0.25, 1);
}
/* During a flight the camera pulls back a little and comes in again */
.flug { transform-origin: var(--ox, 50%) var(--oy, 50%); }
.flug.unterwegs { animation: flug 2.4s cubic-bezier(0.5, 0, 0.5, 1); }
@keyframes flug {
  50% { transform: scale(0.9); }
}
/* While standing still the room keeps drifting very slowly */
.schweben {
  display: flex;
  width: calc(var(--w, 240vw) * 3);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  animation: schweben 26s ease-in-out infinite alternate;
}
@keyframes schweben {
  from { transform: translate3d(-18px, 8px, 0) scale(1); }
  to   { transform: translate3d(18px, -10px, 0) scale(1.04); }
}
/* The picture three times side by side, the outer ones mirrored,
   so the room never ends at the edges */
.schweben img {
  display: block;
  flex: none;
  width: var(--w, 240vw);
  height: calc(var(--w, 240vw) / 2);
  -webkit-user-drag: none;
}
.schweben .spiegel { transform: scaleX(-1); }

/* Veil between picture and text: darkens, tints, and carries moving light */
.schleier {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* softens the picture: more blur, a little less colour, a thin black layer */
  -webkit-backdrop-filter: blur(3.5px) saturate(0.8);
  backdrop-filter: blur(3.5px) saturate(0.8);
  background:
    linear-gradient(rgba(7, 6, 12, 0.2), rgba(7, 6, 12, 0.2)),
    radial-gradient(ellipse 80% 75% at 50% 50%, rgba(7, 6, 12, 0.42), rgba(7, 6, 12, 0.18) 75%, rgba(7, 6, 12, 0.4)),
    linear-gradient(rgba(7, 6, 12, 0.55), transparent 24%, transparent 74%, rgba(7, 6, 12, 0.6));
}
.schleier::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(var(--wasch));
  opacity: 0.14;
  transition: background-color 2s;
}
.licht {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  background-color: rgba(var(--wasch), 0.42);
  -webkit-mask: radial-gradient(circle, #000, transparent 68%);
  mask: radial-gradient(circle, #000, transparent 68%);
  transition: background-color 2s;
  animation: wandern 30s ease-in-out infinite alternate;
}
.licht.l1 { left: -18vmax; top: -22vmax; }
.licht.l2 { right: -20vmax; bottom: -26vmax; animation-duration: 38s; animation-direction: alternate-reverse; }
@keyframes wandern {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vmax, 8vmax, 0) scale(1.25); }
}
/* Dust in the spotlights */
.staub {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 244, 220, 0.8);
  box-shadow: 0 0 8px 2px rgba(255, 232, 190, 0.5);
  opacity: 0;
  animation: staub linear infinite;
}
@keyframes staub {
  15%  { opacity: 0.8; }
  85%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), -40vh, 0); }
}

.buehne { position: relative; z-index: 1; }

/* ---------- Places (sections) ---------- */
.wand {
  position: relative;
  min-height: 100svh;
  display: flex;
  padding: 7rem clamp(1.6rem, 8vw, 6rem) 5rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* The text sits on a soft dark cloud, so it stays readable on any part of the picture */
.inhalt {
  position: relative;
  width: min(100%, 780px);
  margin: auto;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: rgba(7, 6, 12, 0.6);
  border-radius: 30px;
  box-shadow: 0 0 60px 46px rgba(7, 6, 12, 0.6);
}
.inhalt.breit { width: min(100%, 1180px); }
.w-werke { padding-inline: clamp(1.6rem, 5vw, 4.5rem); }

.schild {
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent);
}

.lead {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 500;
  max-width: 44ch;
  margin-bottom: 0.6rem;
}

.inhalt > p + p { margin-top: 0.9rem; }

blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.25;
  color: var(--akzent);
  margin-bottom: 1.2rem;
}

/* ---------- Frames on the wall ---------- */
.rahmen-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.1rem;
  margin-top: 1.6rem;
}

.rahmen {
  display: block;
  padding: 1.2rem 1.15rem;
  text-decoration: none;
  border-radius: 22px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--akzent) 16%, transparent), transparent 55%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, background 0.2s;
}
a.rahmen:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--akzent) 60%, transparent); }
.rahmen span {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.rahmen small { display: block; font-size: 0.88rem; line-height: 1.45; opacity: 0.85; }

/* ---------- Works: filter and cards ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 1.4rem;
}
.filter button {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(246, 239, 226, 0.5);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter button:hover { background: rgba(255, 255, 255, 0.16); }
.filter button[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--tinte);
}

.werke {
  display: grid;
  gap: 1.6rem;
}

/* One project = one wide row: big picture on one side, text on the other */
.werk {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(246, 239, 226, 0.22);
  border-top: 4px solid var(--kat, var(--akzent));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.werk:nth-child(even) .werk-bild { order: 2; }

.werk-bild {
  position: relative;
  display: block;
  min-height: 19rem;
  overflow: hidden;
  background: #000;
}
.werk-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 0.5s, filter 0.3s;
}
a.werk-bild:hover img { transform: scale(1.04); filter: brightness(1.1); }
/* Own pictures: keep faces in view when the row crops them */
.werk-bild img:not(.yt) { object-position: center 25%; }
/* YouTube preview pictures carry black bars top and bottom: zoom them away */
.werk-bild img.yt { transform: scale(1.35); }
a.werk-bild:hover img.yt { transform: scale(1.4); }
.werk-bild.leer {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 5rem;
  color: var(--kat, var(--akzent));
  background: linear-gradient(135deg, color-mix(in srgb, var(--kat, #f0c35a) 38%, #000), #0d0a12);
}
.abspielen {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding-left: 0.2rem;
  color: var(--tinte);
  background: var(--akzent);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.werk-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1.6rem clamp(1.2rem, 3vw, 2.4rem);
}
.werk-text small {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kat, var(--akzent));
}
.werk-text h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}
.werk-text em { opacity: 0.8; }
.werk-text p { font-size: 0.95rem; }
.werk-text .knopf { margin-top: 0.7rem; }

.werk[data-kat="0"] { --kat: #f0c35a; }
.werk[data-kat="1"] { --kat: #ff8fa3; }
.werk[data-kat="2"] { --kat: #7fd6c9; }
.werk[data-kat="3"] { --kat: #b9a5ff; }
.werk[data-kat="4"] { --kat: #ffa45c; }
.werk[data-kat="5"] { --kat: #9be37a; }

/* DELULU keeps the look of its own world */
.werk.thema-delulu {
  border: 1px solid #f2a98c;
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 106, 26, 0.5), transparent 45%),
    radial-gradient(circle at 60% 90%, rgba(27, 59, 255, 0.6), transparent 55%),
    #05060d;
}
.thema-delulu .werk-text small { color: #f6b9a0; }
.thema-delulu .werk-text h3 {
  font-family: "Arial Rounded MT Bold", ui-rounded, "Varela Round", system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 34px rgba(120, 160, 255, 0.8);
}
.thema-delulu .knopf { background: #f6b9a0; border-color: #f6b9a0; border-radius: 999px; }

/* ---------- Photography gallery (placeholders) ---------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 1.8rem;
}
.galerie div {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #b9ae98, #8d826c);
  border: 8px solid #fff;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5);
}

/* ---------- Buttons ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

.knopf {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinte);
  background: var(--akzent);
  border: 1px solid var(--akzent);
  border-radius: 999px;
  transition: transform 0.15s, background 0.2s;
}
.knopf:hover { transform: translateY(-2px); filter: brightness(1.12); }
.knopf.hell { background: transparent; color: var(--hell); }
.knopf.hell:hover { background: rgba(255, 255, 255, 0.12); filter: none; }

/* ---------- Arrows & hint: room mode only ---------- */
.pfeil, .hinweis { display: none; }

/* =====================================================
   ROOM MODE (switched on by raum.js on large screens):
   one place at a time, the camera flies between them
   ===================================================== */
.drei-d body { overflow: hidden; height: 100vh; }

.drei-d .buehne {
  height: 100vh;
  overflow: hidden;
  touch-action: pan-y;
}

.drei-d .raum {
  position: relative;
  height: 100%;
}

/* Only the place you are at is shown; the others wait out of sight */
.drei-d .wand {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  opacity: 0;
  visibility: hidden;
}
/* Arriving: the text drifts in from the direction of flight */
.drei-d .wand.aktiv {
  visibility: visible;
  animation: herein 1.5s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Leaving: it is left behind */
.drei-d .wand.geht {
  visibility: visible;
  pointer-events: none;
  animation: hinaus 0.7s cubic-bezier(0.5, 0, 0.8, 0.4) both;
}
@keyframes herein {
  from { opacity: 0; transform: translate3d(calc(var(--richtung, 0) * 9vw), 0, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes hinaus {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(calc(var(--richtung, 0) * -12vw), 0, 0) scale(0.97); }
}

.drei-d .pfeil {
  display: grid;
  place-items: center;
  position: fixed;
  top: 50%;
  z-index: 15;
  width: 2.8rem;
  height: 2.8rem;
  translate: 0 -50%;
  font-size: 1.9rem;
  line-height: 1;
  padding-bottom: 0.15em;
  color: var(--akzent);
  background: rgba(13, 10, 18, 0.7);
  border: 1px solid var(--akzent);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.drei-d .pfeil:hover { background: var(--akzent); color: var(--tinte); }
.drei-d .pfeil.links { left: 0.9rem; }
.drei-d .pfeil.rechts { right: 0.9rem; }

.drei-d .hinweis {
  display: block;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  z-index: 15;
  translate: -50% 0;
  padding: 0.3rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: rgba(13, 10, 18, 0.75);
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.6s;
}
.drei-d .hinweis.weg { opacity: 0; }

/* ---------- Phone / simple version: walls stacked ---------- */
@media (max-width: 760px) {
  .kopf { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  nav { justify-content: flex-start; }
  nav a { font-size: 0.7rem; padding: 0.15rem 0.5rem; }
  .wand { padding-top: 9rem; padding-inline: 1.3rem; }
  .inhalt { box-shadow: 0 0 40px 26px rgba(7, 6, 12, 0.6); }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .werk { grid-template-columns: 1fr; }
  .werk-bild { min-height: 0; aspect-ratio: 16 / 9; }
  .werk:nth-child(even) .werk-bild { order: 0; }
  .werk-text { padding: 1.1rem 1.1rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .schweben, .flug, .licht, .staub, .wand { animation: none !important; }
  .drei-d .wand.aktiv { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ---------- About wall: box labels, text, prizes ---------- */
.etikett {
  display: block;
  margin-bottom: 0.7rem;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent);
}

.ueber { margin-top: 3.2rem; }
.ueber p + p { margin-top: 0.9rem; }

.preise {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.preise li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.preise svg {
  width: 4.6rem;
  height: 4.6rem;
  flex-shrink: 0;
  color: var(--akzent);
  font-family: var(--serif);
  font-weight: 700;
}
.preise strong { display: block; font-family: var(--serif); font-size: 1.2rem; }
.preise span { font-size: 0.95rem; opacity: 0.85; }

/* ---------- About: keywords instead of a long sentence ---------- */
.schlagworte {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.4rem;
}
.schlagworte li {
  padding: 0.4rem 1rem;
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--akzent) 60%, transparent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
}
.motto {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--akzent);
}

/* ---------- About: intro with portrait, jump links, chapters ---------- */
.vorstellung {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}
/* the photo has no hard edge: it fades into the room */
.portraet {
  width: clamp(170px, 22vw, 260px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 45% 30%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
}
.sprung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  margin-top: 1.5rem;
}
.sprung a {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--akzent);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  transition: border-color 0.2s;
}
.sprung a::after { content: " ↓"; }
.sprung a:hover { border-bottom-color: var(--akzent); }
.kapitel { margin-top: 3.4rem; scroll-margin-top: 5.5rem; }
.kapitel h3 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 0.8rem;
}
.kapitel p + p { margin-top: 0.9rem; }
.kapitel blockquote { margin-bottom: 0.9rem; }
.textlink {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--akzent);
  text-underline-offset: 0.25em;
}
@media (max-width: 620px) {
  .vorstellung { grid-template-columns: 1fr; }
  .portraet { order: -1; width: 180px; }
}
#about .inhalt { width: min(100%, 900px); }
#about h1 { white-space: nowrap; }
.sprung { justify-content: flex-start; flex-direction: row; }
.sprung a, .sprung a:hover { padding: 0 0 0.2rem; border-radius: 0; background: none; }
.kapitel .textlink { margin-top: 0; }
.kontaktbild {
  display: block;
  width: 100%;
  margin-top: 2.2rem;
  border-radius: 22px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4);
}
.preise-titel { margin-top: 3.4rem; }
@media (min-width: 761px) {
  .preise { grid-template-columns: 1fr 1fr; gap: 1.3rem 2rem; }
}
.preise svg { width: 3.8rem; height: 3.8rem; }
.preise strong { font-size: 1.08rem; line-height: 1.25; }
.preise span { display: block; font-size: 0.9rem; }

/* ---------- Welcome ---------- */
.rolle {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wege {
  list-style: none;
  margin-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.wege a {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0.2rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transition: padding 0.25s, color 0.2s;
}
.wege a::after { content: "→"; color: var(--akzent); }
.wege strong { font-family: var(--serif); font-size: 1.35rem; }
.wege span { opacity: 0.85; }
.wege a:hover { padding-left: 0.9rem; color: var(--akzent); }
@media (max-width: 620px) {
  .wege a { grid-template-columns: 1fr auto; }
  .wege span { grid-column: 1; }
}

/* ---------- Works: open rows instead of boxes ---------- */
.werke { gap: clamp(3.5rem, 7vw, 6rem); margin-top: 2.5rem; }
.werk, .werk.thema-delulu {
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.werk-bild { border-radius: 20px; min-height: 22rem; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); }
.werk-text { padding: 0; gap: 0.6rem; }
.werk-text p { font-size: 1rem; }
.mehr-links { margin-top: 4rem; }
.mehr-links a { color: var(--akzent); font-weight: 700; text-underline-offset: 0.25em; }

/* ---------- Teaching / Instrumentalist: a picture beside a short text ---------- */
.projekt {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  margin-top: 2.4rem;
}
.projekt img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.projekt h4 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 0.5rem; }
.projekt h4 small { font-family: var(--sans, inherit); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--akzent); margin-left: 0.4rem; }
.projekt p + p { margin-top: 0.7rem; }
.projekt .textlink { margin-top: 0.8rem; }
.kapitel p a { color: var(--akzent); text-underline-offset: 0.2em; }
.video-link { position: relative; display: block; border-radius: 18px; overflow: hidden; }
.video-link img { aspect-ratio: 16 / 9; transform: scale(1.35); }
@media (max-width: 620px) {
  .projekt { grid-template-columns: 1fr; }
}

/* ---------- Works: several buttons per work ---------- */
.werk-text .knoepfe { margin-top: 0.7rem; gap: 0.6rem; }
.werk-text .knoepfe .knopf { margin-top: 0; }

/* ---------- Instrumentalist: a row of videos ---------- */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.videos .video-link { text-decoration: none; overflow: visible; border-radius: 0; }
.video-bild { position: relative; display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; }
.video-bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transition: transform 0.4s; }
.video-link:hover .video-bild img { transform: scale(1.42); }
.videos strong { display: block; margin-top: 0.6rem; font-family: var(--serif); font-size: 1.1rem; }
.klein { margin-top: 0.9rem; font-size: 0.85rem; opacity: 0.75; }

/* ---------- Photography: one block per shoot ---------- */
.shoot { margin-top: 3.2rem; }
.shoot h3 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0 0 1rem;
}
.fotos { columns: 3 260px; column-gap: 1rem; }
.fotos a { display: block; margin-bottom: 1rem; break-inside: avoid; border-radius: 14px; overflow: hidden; }
.fotos img { display: block; width: 100%; height: auto; transition: transform 0.5s; }
.fotos a:hover img { transform: scale(1.03); }
.foto-knopf { margin-top: 2.5rem; }
.breitbild { display: block; width: 100%; margin-top: 1.6rem; border-radius: 18px; }
#welcome .portraet { object-position: 47% 35%; }
#welcome .inhalt { width: min(100%, 900px); }

/* Buttons that lead to a video on YouTube are red */
.knopf.video, .thema-delulu .knopf.video {
  color: #fff;
  background: #d81f26;
  border-color: #d81f26;
}
.knopf.video:hover { background: #f0323a; border-color: #f0323a; filter: none; }

/* Photography: even rows – every picture in a row has the same height */
.fotos { columns: auto; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.fotos a {
  flex: var(--r, 1) 1 calc(var(--r, 1) * 250px);
  max-width: calc(var(--r, 1) * 430px);
  aspect-ratio: var(--r, 1);
  margin: 0;
}
.fotos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) {
  .fotos a { flex-basis: calc(var(--r, 1) * 150px); }
}
/* one closed row per shoot on wide screens */
@media (min-width: 761px) {
  .fotos a { flex-basis: calc(var(--r, 1) * 130px); }
}

/* video buttons: a calmer, slightly see-through red */
.knopf.video, .thema-delulu .knopf.video { background: rgba(168, 26, 34, 0.78); border-color: rgba(168, 26, 34, 0.9); }
.knopf.video:hover { background: rgba(190, 34, 42, 0.92); border-color: rgba(190, 34, 42, 1); }

/* ---------- Welcome, second design: centred, the six places as coloured doors ---------- */
#welcome .inhalt { width: min(100%, 980px); text-align: center; }
#welcome .vorstellung { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
#welcome .portraet {
  order: -1;
  width: clamp(130px, 15vw, 190px);
  aspect-ratio: 1;
  object-position: 47% 30%;
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%);
  mask-image: radial-gradient(circle, #000 52%, transparent 71%);
  margin-bottom: 0.4rem;
}
#welcome h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 1; margin: 0.2rem 0 0.6rem; }
#welcome .schild { margin-bottom: 0.3rem; }
#welcome .rolle { margin-top: 0; }
#welcome .motto { margin-top: 0.7rem; max-width: 34rem; margin-inline: auto; }
#welcome .wege {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.4rem 1rem;
  margin-top: 2.6rem;
  border-top: 0;
}
#welcome .wege a {
  display: block;
  padding: 0.9rem 0.2rem 0;
  border-bottom: 0;
  border-top: 2px solid var(--f);
  text-align: center;
  transition: transform 0.25s, border-color 0.25s;
}
#welcome .wege a::after { content: none; }
#welcome .wege strong { display: block; font-size: 1.15rem; color: var(--f); }
#welcome .wege span { display: block; margin-top: 0.3rem; font-size: 0.82rem; line-height: 1.35; opacity: 0.8; }
#welcome .wege a:hover { padding-left: 0.2rem; transform: translateY(-5px); color: inherit; }
#welcome .wege a:hover strong { text-shadow: 0 0 18px var(--f); }
@media (max-width: 900px) {
  #welcome .wege { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  #welcome .wege { grid-template-columns: repeat(2, 1fr); }
}

/* The dark cloud behind the text fades out evenly on all sides – no visible edge */
.inhalt { background: none; box-shadow: none; isolation: isolate; }
.inhalt::before {
  content: "";
  position: absolute;
  inset: -90px;
  z-index: -1;
  background: rgba(7, 6, 12, 0.62);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 150px, #000 calc(100% - 150px), transparent),
    linear-gradient(to bottom, transparent, #000 150px, #000 calc(100% - 150px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 150px, #000 calc(100% - 150px), transparent),
    linear-gradient(to bottom, transparent, #000 150px, #000 calc(100% - 150px), transparent);
  mask-composite: intersect;
  pointer-events: none;
}
.foto-knopf { margin-top: 1.2rem; }

/* ---------- Photo viewer ---------- */
.schau {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 3.5rem 4rem;
  background: rgba(5, 4, 9, 0.93);
}
.schau[hidden] { display: none; }
.schau img { max-width: 100%; max-height: calc(100svh - 7rem); border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.schau button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
}
.schau button:hover { background: rgba(255, 255, 255, 0.25); }
.schau .zu { top: 1rem; right: 1rem; }
.schau .vor { left: 0.8rem; top: 50%; translate: 0 -50%; }
.schau .weiter { right: 0.8rem; top: 50%; translate: 0 -50%; }
@media (max-width: 620px) { .schau { padding: 3.5rem 0.6rem; } }

/* ---------- Large screens: text and columns grow with the window ---------- */
@media (min-width: 1400px) {
  html { font-size: clamp(16px, 0.5vw + 9px, 23px); }
}
.inhalt { width: min(100%, 49rem); }
.inhalt.breit { width: min(100%, 74rem); }
#about .inhalt { width: min(100%, 56rem); }
#welcome .inhalt { width: min(100%, 61rem); }
.fotos a { max-width: calc(var(--r, 1) * 27rem); }