/* ============================================================
   SELMA — v3 additions on top of the v1 stylesheet.
   Festival laurels under the pictogram / description column.
   ============================================================ */

.laurels {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* left column is right-aligned in v1 */
  gap: 2px 8px;
  margin-top: 22px;
}

.laurel {
  display: block;
  width: 94px;          /* so passen drei nebeneinander in die 300er-Spalte */
  color: var(--black);
}
.laurel svg { width: 100%; height: auto; display: block; }

/* feed rows: keep laurels subtle until the row is hovered */
.feed .row .laurels { opacity: 0.8; transition: opacity 0.3s ease; }
.feed .row:hover .laurels { opacity: 1; }

/* project sidebar */
.p-side .laurels { margin-top: 26px; }
.p-side .laurel { width: 106px; }

@media (max-width: 900px) {
  /* left column is left-aligned on small screens */
  .laurels { justify-content: flex-start; }
  .row-info .laurels { grid-column: 1 / -1; margin-top: 8px; }
  .laurel { width: 104px; }
}

/* ============================================================
   Festival selections — Selmas Liste aus der Mail vom 17.06.2026
   ============================================================ */

.p-text .festivals { margin: 26px 0; }
.p-text .festivals h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.p-text .festivals ul { list-style: none; margin: 0; padding: 0; }
.p-text .festivals li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  line-height: 1.35;
}
.p-text .festivals li:last-child { border-bottom: 0; }
.p-text .festivals .fs-name { flex: 1 1 60%; }
.p-text .festivals .fs-name a { color: inherit; text-decoration: none; }
.p-text .festivals .fs-name a:hover { text-decoration: underline; }
.p-text .festivals .fs-note {
  flex: 0 1 auto;
  color: var(--gray);
  font-size: 12px;
  white-space: nowrap;
}
.p-text .festivals .fs-tail {
  color: var(--gray);
  font-size: 12px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .p-text .festivals .fs-note { white-space: normal; }
}

/* ============================================================
   Feed: zwei Kraenze plus Zaehler (Variante E)
   ============================================================ */

.laurel-more {
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gray);
  padding-left: 2px;
}
.feed .row:hover .laurel-more { color: var(--black); }

/* offizielle Laurel-Grafiken statt der generierten Kraenze */
.laurel-img img { width: 100%; height: auto; display: block; }

/* ============================================================
   Intro: vier Varianten, zufaellig gewaehlt (siehe main.js)
   ============================================================ */

.shutter .intro-fig { color: var(--white); opacity: 0; transition: opacity 0.45s ease; }
body.intro .shutter .intro-fig { opacity: 1; }
body.ready .shutter .intro-fig { opacity: 0; }
.shutter template { display: none; }

/* Name */
.intro-name { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.intro-name svg { width: 180px; height: auto; display: block; }
.intro-name span {
  font-size: 12px; font-weight: 500; letter-spacing: 0.42em; text-indent: 0.42em;
}

/* Academy-Leader */
.intro-leader { position: relative; width: 200px; height: 200px; }
.shutter .intro-leader svg { width: 200px; height: 200px; opacity: 1; overflow: visible; }
.intro-leader .ring  { fill: none; stroke: var(--white); stroke-width: 1.6; }
.intro-leader .thin  { stroke-width: 1; }
.intro-leader .cross { stroke: var(--white); stroke-width: 1; }
.intro-leader .wipe  { fill: var(--white); opacity: 0.16; }
.intro-leader .num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 78px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Timecode */
.intro-tc {
  font: 500 34px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}

/* Irisblende */
.shutter .intro-iris svg { width: 200px; height: 200px; opacity: 1; overflow: visible; }
.intro-iris .rim    { fill: none; stroke: var(--white); stroke-width: 1.2; opacity: 0.5; }
.intro-iris .disc   { fill: #d9d9d9; }
.intro-iris .hole   { fill: var(--black); }
.intro-iris .blades path { fill: none; stroke: var(--black); stroke-width: 2.2; stroke-linecap: round; }

/* offizielle Laurels (assets/img/laurels): gleiche Grundflaeche wie die
   generierten Kraenze, damit Hochformate nicht aus der Reihe springen */
.laurel-img {
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.laurel-img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ============================================================
   Menuezeichen: Burger wechselt bei Hover in die Blende
   ============================================================ */

.brand .brand-iris {
  position: absolute;
  /* mittig auf dem Hamburger: der ist 34px breit und sitzt links,
     die Blende teilt sich seinen Mittelpunkt */
  left: 0;
  top: 50%;
  width: 34px; height: 34px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.35s ease;
  color: var(--black);
}
.brand .brand-iris svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand .brand-iris .disc   { fill: currentColor; }
.brand .brand-iris .hole   { fill: var(--white); }
.brand .brand-iris .blades path {
  fill: none;
  stroke: var(--white);
  stroke-width: 5;
  stroke-linecap: round;
}
.brand:hover .brand-iris,
body.nav-open .brand .brand-iris { opacity: 1; }

/* waehrend der Vorhang zu ist, ist der Kopf hell auf schwarz */
body.intro .brand .brand-iris { color: var(--white); }
body.intro .brand .brand-iris .hole { fill: var(--black); }
body.intro .brand .brand-iris .blades path { stroke: var(--black); }

/* ============================================================
   Vorschaubild im Feed nur beim Ueberfahren des Bildes wechseln
   (style.css loest ueber der ganzen Zeile aus, auch ueber der Schrift)
   ============================================================ */

.feed .row:hover .row-media .alt { opacity: 0; }
.feed .row .row-media:hover .alt { opacity: 1; }

/* ============================================================
   Showreel als erste Zeile der Werkliste
   ============================================================ */

.feed .row.reel { margin-bottom: 72px; }
.feed .row.reel .row-media { background: var(--black); }
.reel-video { width: 100%; height: auto; display: block; }
.reel-link { margin-top: 14px; }
.reel-link a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
}
.reel-link a:hover { color: var(--black); }
@media (max-width: 900px) {
  .feed .row.reel .row-info { grid-column: 1 / -1; }
}

/* Showreel-Seite: breiteres Raster als die Textseiten */
.page.page-wide { grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); max-width: 1500px; }
.reel-full { width: 100%; height: auto; display: block; background: var(--black); margin-bottom: 16px; }

/* ============================================================
   Kopfbereich ueber Menue und Scrim
   .site-header ist position:fixed mit z-index 40 und bildet damit einen
   eigenen Stapelkontext -- das z-index:45 der Marke galt nur darin, und
   Menue (42) sowie Scrim (41) lagen darueber.
   ============================================================ */

.site-header { z-index: 46; }

/* ============================================================
   Laurels im Feed: weiss im Vorschaubild statt schwarz daneben
   ============================================================ */

.feed .row-media { position: relative; }
.feed .row-media .laurels {
  position: absolute;
  left: 18px; right: 18px; bottom: 14px;
  z-index: 2;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 2px 12px;
  margin: 0;
  pointer-events: none;
}
.feed .row-media .laurel {
  width: 78px;
  color: var(--white);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
/* die offiziellen Dateien liegen schwarz vor -- hier weiss einfaerben */
.feed .row-media .laurel-img img { filter: brightness(0) invert(1); }

@media (max-width: 900px) {
  .feed .row-media .laurels { left: 10px; right: 10px; bottom: 8px; gap: 2px 8px; }
  .feed .row-media .laurel { width: 58px; }
}

/* ============================================================
   Sprachumschalter: senkrecht unter dem Filter, oben rechts
   ============================================================ */

.lang-switch {
  position: fixed;
  top: 58px; right: var(--pad);
  z-index: 45;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: auto;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; line-height: 1;
}
.lang-switch a { color: var(--gray); text-decoration: none; border: 0; padding: 2px 0; }
.lang-switch a:hover { color: var(--black); }
.lang-switch a.on { color: var(--black); }
/* waehrend der Vorhang zu ist, ist der Kopf hell auf schwarz */
body.intro .lang-switch a { color: rgba(255, 255, 255, 0.55); }
body.intro .lang-switch a.on { color: var(--white); }

/* ============================================================
   Mobil: das Raster der linken Spalte stammt aus v1 und reserviert
   48 px fuer das Piktogramm. Ohne Piktogramm landete der Titel in
   dieser schmalen Spalte und brach Wort fuer Wort um.
   ============================================================ */

@media (max-width: 900px) {
  /* Titel links, Meta rechtsbuendig, beide an der Unterkante ausgerichtet */
  .row-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6px 16px;
  }
  .row-info .row-title { margin: 0; flex: 1 1 auto; }
  /* margin-left:auto haelt die Meta auch dann rechts, wenn ein langer
     Titel sie in die naechste Zeile drueckt */
  .row-info .row-meta  { flex: 0 0 auto; margin-left: auto; text-align: right; white-space: nowrap; padding-bottom: 2px; }
  .row-info .reel-link { flex: 0 0 100%; margin-top: 0; }
  /* Platz fuer die 68px hohe Kopfleiste */
  .feed { padding-top: 88px; }
}

/* ============================================================
   Mobil: Kopfleiste (Menue, Filter, Sprachumschalter) mit weissem
   Hintergrund, damit beim Scrollen nichts durchscheint
   ============================================================ */

@media (max-width: 900px) {
  .site-header {
    height: 68px;
    background: var(--white);
  }
  /* bei offenem Menue oder Filter liegt deren Flaeche darunter -- dann
     keine weisse Leiste, sonst verdeckt sie die ersten Eintraege */
  body.nav-open .site-header,
  body.filter-open .site-header { background: transparent; }
}

/* Mobil: alle Seitentypen unterhalb der 100px hohen Kopfleiste beginnen
   (style.css setzt .page auf 90px und .project auf 80px) */
@media (max-width: 900px) {
  .page    { padding-top: 96px; }
  .project { padding-top: 96px; }
}


/* ============================================================
   Sprachumschalter: ohne Filter (alle Seiten ausser der Werkliste)
   oben buendig mit dem Menuezeichen; mobil mit Filter oben mittig
   ============================================================ */

/* Seiten ohne Filter: der Umschalter rueckt in die obere Reihe */
.site-header > .lang-switch:first-of-type,
.brand + .lang-switch { top: 20px; }

@media (max-width: 900px) {
  /* Werkliste: Filter rechts, Umschalter mittig in der oberen Reihe */
  .filter-toggle + .lang-switch {
    top: 20px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
  }
}

/* ============================================================
   Intro: Willkommensvorhang waehrend des SSIFF
   ============================================================ */

.intro-ssiff {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 24px;
  opacity: 0;                              /* alles zusammen einblenden ... */
  transition: opacity 0.5s ease;
}
.intro-ssiff.da { opacity: 1; }            /* ... sobald das Laurel da ist */
.intro-ssiff .ssiff-laurel {
  width: 150px; height: auto; margin-bottom: 26px;
  filter: brightness(0) invert(1);           /* Laurel liegt schwarz vor */
}
.intro-ssiff .ssiff-top {
  font-size: 11px; font-weight: 500; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; opacity: 0.7; margin-bottom: 14px;
}
.intro-ssiff .ssiff-title { font-size: 30px; font-weight: 500; line-height: 1.1; margin-bottom: 12px; }
.intro-ssiff .ssiff-sub {
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7;
  max-width: 34em; line-height: 1.6;
}
@media (max-width: 900px) {
  .intro-ssiff .ssiff-laurel { width: 120px; }
  .intro-ssiff .ssiff-title { font-size: 24px; }
}

/* Waehrend des Intros faengt der Vorhang Klicks und Beruehrungen ab, damit
   ein ungeduldiger Tipp nicht den Link darunter ausloest */
body.intro .shutter { pointer-events: auto; cursor: pointer; }

/* Willkommensvorhang: Premierenzeile und Gruss */
.intro-ssiff .ssiff-premiere {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1.6; max-width: 34em;
}
.intro-ssiff .ssiff-gruss { margin-top: 14px; font-size: 19px; font-weight: 400; }
@media (max-width: 900px) { .intro-ssiff .ssiff-gruss { font-size: 17px; } }


/* Willkommensvorhang: Schrift groesser, kraeftiger, reinweiss (Selmas Wunsch 18.09.) */
.intro-ssiff { color: #fff; }
.intro-ssiff .ssiff-laurel { width: 180px; margin-bottom: 30px; }
.intro-ssiff .ssiff-top { font-size: 14px; font-weight: 600; opacity: 1; margin-bottom: 16px; }
.intro-ssiff .ssiff-title { font-size: 44px; font-weight: 600; margin-bottom: 16px; }
.intro-ssiff .ssiff-sub { font-size: 14px; font-weight: 600; opacity: 1; letter-spacing: 0.1em; }
.intro-ssiff .ssiff-premiere {
  font-size: 16px; font-weight: 600; letter-spacing: 0.08em;
  border-top-color: rgba(255, 255, 255, 0.5); margin-top: 30px; padding-top: 22px;
}
.intro-ssiff .ssiff-gruss { font-size: 26px; font-weight: 600; margin-top: 18px; }
@media (max-width: 900px) {
  .intro-ssiff .ssiff-laurel { width: 140px; }
  .intro-ssiff .ssiff-top { font-size: 12px; }
  .intro-ssiff .ssiff-title { font-size: 32px; }
  .intro-ssiff .ssiff-sub { font-size: 12px; }
  .intro-ssiff .ssiff-premiere { font-size: 13px; }
  .intro-ssiff .ssiff-gruss { font-size: 21px; }
}

/* Willkommensvorhang nach der Premiere: Dank, darunter die Resttermine */
.intro-ssiff .ssiff-dank { margin-top: 26px; }
.intro-ssiff .ssiff-termin {
  display: block; margin-top: 8px;
  font-weight: 500; letter-spacing: 0.06em;
}
.intro-ssiff .ssiff-termin:first-of-type { margin-top: 14px; }

/* ============================================================
   News-Seite: Instagram-Verweis und Eintraege
   ============================================================ */

.insta {
  padding: 0 0 40px; margin-bottom: 48px; border-bottom: 1px solid var(--gray-light);
}
.insta-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 32px;
  margin-bottom: 20px;
}
.insta-kopf h2 { margin: 0; }
/* fuenf Posts als Reihe, wie die Stills im Feed nur hochkant (4:5 wie auf Instagram) */
.insta-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.page-body .insta-post, .page-body .insta-post:hover { display: block; border: 0; }
.insta-post img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #f4f4f4;
  transition: opacity 0.25s;
}
.insta-post:hover img { opacity: 0.8; }
.insta-post .insta-datum {
  display: block; margin-top: 8px;
  color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
}
.insta-btn {
  display: inline-block; margin-top: 6px; padding: 10px 16px;
  border: 1px solid var(--black) !important; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.06em; font-weight: 600;
}
.insta-btn:hover { background: var(--black); color: var(--white); }

.news-item {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start;
  padding: 40px 0; border-bottom: 1px solid var(--gray-light);
}
.news-item:last-child { border-bottom: 0; }
.news-bild img { width: 100%; height: auto; display: block; background: #f4f4f4; }
.news-datum {
  color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; margin-bottom: 8px;
}
.news-text h2 { margin: 0 0 12px; text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 500; line-height: 1.2; }
.news-text p { max-width: 62em; }
.news-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.news-links a { color: var(--gray); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; border: 0; }
.news-links a:hover { color: var(--black); }

@media (max-width: 900px) {
  .news-item { grid-template-columns: 1fr; gap: 16px; }
  .insta-kopf { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Posts als seitlich wischbare Reihe, zweieinhalb Kacheln sichtbar */
  .insta-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -20px; padding: 0 20px;   /* .page hat auf dem Handy 20px Rand */
  }
  .insta-grid::-webkit-scrollbar { display: none; }
  .insta-post { flex: 0 0 40%; scroll-snap-align: start; }
}

/* page-wide steht nach der Mobil-Regel von style.css und wuerde sie sonst
   ueberstimmen -- Showreel- und News-Seite blieben zweispaltig */
@media (max-width: 900px) {
  .page.page-wide { grid-template-columns: 1fr; }
}

/* ============================================================
   Laurels einheitlich (Selma, 23./24.09.2026): nur offizielle Grafiken,
   alle gleich hoch.  Im Vorschaubild so gross und so platziert wie die
   eingebrannten Logos bei Schwesterherz: oben links, ~5,4 % der
   Bildbreite hoch (46 px bei 844 px).
   ============================================================ */

.laurel.laurel-img { width: auto; aspect-ratio: auto; display: block; }
.laurel-img img { width: auto; max-width: none; max-height: none; }

/* Projektseite: feste Hoehe statt fester Breite -- hohe Logos wie SSIFF
   ragen nicht mehr in die naechste Reihe */
.p-side .laurels { gap: 14px 16px; align-items: center; }
.p-side .laurel-img img { height: 58px; }
@media (max-width: 900px) {
  .p-side .laurel-img img { height: 50px; }
}

/* Vorschaubild */
.feed .row-media { container-type: inline-size; }
.feed .row-media .laurels {
  top: 0; bottom: auto; left: 2.7%; right: 2.7%;
  margin-top: 4.3%;             /* Prozent von der Breite, wie bei Schwesterherz */
  align-items: center;
  gap: 1cqw 2.2cqw;
}
.feed .row-media .laurel { width: auto; }
.feed .row-media .laurel-img img { height: 5.4cqw; }
@media (max-width: 900px) {
  .feed .row-media .laurels { left: 2.7%; right: 2.7%; bottom: auto; gap: 1cqw 2.2cqw; }
  .feed .row-media .laurel { width: auto; }
}

/* About: Portraet links unter Name und Untertitel */
.page-head .portrait { width: 100%; max-width: 280px; margin: 28px 0 0 auto; }
.page-head .portrait img { display: block; width: 100%; height: auto; }
.page-head .portrait figcaption {
  margin-top: 6px; color: var(--gray); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
}
@media (max-width: 900px) {
  .page-head .portrait { margin: 20px 0 0; max-width: 240px; }
}

/* fast quadratische Logos etwas groesser (Selma, 24.09.2026) */
.feed .row-media .laurel-hoch img { height: 7.2cqw; }
.p-side .laurel-hoch img { height: 72px; }
@media (max-width: 900px) {
  .p-side .laurel-hoch img { height: 62px; }
}

/* ============================================================
   Kontakt: Hintergrundbild der alten Seite (Unterwasser, Haende) --
   Selma, Mail 24.09.2026.  Schrift und Kopf hell auf dem Bild.
   Fester Hintergrund ueber ein Pseudo-Element, weil iOS
   background-attachment: fixed nicht kann.
   ============================================================ */

/* Farbe auf html, nicht body -- sonst deckt die body-Flaeche das Bild
   (z-index -1) wieder zu */
html:has(body.bild-hintergrund) { background: #1d2a26; }
body.bild-hintergrund { background: transparent; color: var(--white); }
body.bild-hintergrund::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: #1d2a26 center / cover no-repeat;   /* Bild setzt contact.html */
}
body.bild-hintergrund .page,
body.bild-hintergrund .page a,
body.bild-hintergrund .page h1,
body.bild-hintergrund .page h2 { color: var(--white); }
body.bild-hintergrund .page-head .sub,
body.bild-hintergrund .site-footer,
body.bild-hintergrund .site-footer a { color: rgba(255, 255, 255, 0.7); }
body.bild-hintergrund .page a { border-color: rgba(255, 255, 255, 0.45); }
body.bild-hintergrund .page a:hover,
body.bild-hintergrund .site-footer a:hover { color: rgba(255, 255, 255, 0.7); }

/* Kopf wie waehrend des Vorhangs: hell */
body.bild-hintergrund .brand .burger span { background: var(--white); }
body.bild-hintergrund .brand .brand-iris { color: var(--white); }
body.bild-hintergrund .brand .brand-iris .hole { fill: #1d2a26; }
body.bild-hintergrund .brand .brand-iris .blades path { stroke: #1d2a26; }
body.bild-hintergrund .lang-switch a { color: rgba(255, 255, 255, 0.55); }
body.bild-hintergrund .lang-switch a.on,
body.bild-hintergrund .lang-switch a:hover { color: var(--white); }
@media (max-width: 900px) {
  body.bild-hintergrund .site-header { background: transparent; }
}

/* offenes Menue ist weiss -- dann der normale dunkle Kopf */
body.bild-hintergrund.nav-open .brand .brand-iris { color: var(--black); }
body.bild-hintergrund.nav-open .brand .brand-iris .hole { fill: var(--white); }
body.bild-hintergrund.nav-open .brand .brand-iris .blades path { stroke: var(--white); }

/* das Menue bleibt weiss mit schwarzer Schrift -- sonst erben die Links
   das Weiss der Kontaktseite und verschwinden */
body.bild-hintergrund .nav { color: var(--black); }

/* ============================================================
   Hell / dunkel (Selmas Wunsch, Sept. 2026 -- Probebetrieb per
   Umschalter, Voreinstellung hell).  Fast alles haengt an --black
   (Tinte) und --white (Papier); im Dunkeln werden die getauscht.
   Wo echtes Schwarz/Weiss gemeint ist, wird es unten zurueckgeholt.
   ============================================================ */

.theme-toggle {
  margin-top: 6px; padding: 2px 0; border: 0; background: none; cursor: pointer;
  color: var(--gray); line-height: 0;
}
.theme-toggle svg { width: 13px; height: 13px; display: block; }
.theme-toggle:hover { color: var(--black); }
body.intro .theme-toggle { color: rgba(255, 255, 255, 0.55); }
body.bild-hintergrund .theme-toggle { color: rgba(255, 255, 255, 0.55); }
body.bild-hintergrund .theme-toggle:hover { color: #fff; }

html[data-theme="dark"] {
  --black: #ececec;
  --white: #111;
  --gray: #8a8a8a;
  --gray-light: #2b2b2b;
  color-scheme: dark;
}
html[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }

/* Vorhang, Kontaktseite mit Bild: bleiben wie sie sind */
html[data-theme="dark"] .shutter,
html[data-theme="dark"] body.bild-hintergrund { --black: #000; --white: #fff; --gray: #999; }
/* Kopf waehrend des Vorhangs: hell auf Schwarz wie immer */
html[data-theme="dark"] body.intro .brand .burger span,
html[data-theme="dark"] body.intro .filter-toggle i { background: #fff; }
html[data-theme="dark"] body.intro .brand .brand-iris { color: #fff; }
html[data-theme="dark"] body.intro .brand .brand-iris .hole { fill: #000; }
html[data-theme="dark"] body.intro .brand .brand-iris .blades path { stroke: #000; }
html[data-theme="dark"] body.intro .lang-switch a.on { color: #fff; }

/* Video und Platzhalter */
html[data-theme="dark"] .feed .row.reel .row-media,
html[data-theme="dark"] .reel-full { background: #000; }
html[data-theme="dark"] .insta-post img,
html[data-theme="dark"] .news-bild img { background: #1c1c1c; }
html[data-theme="dark"] .p-text .festivals li { border-bottom-color: rgba(255, 255, 255, 0.09); }

/* offizielle Laurels liegen schwarz vor -- auf den Detailseiten hell */
html[data-theme="dark"] .p-side .laurel-img img { filter: invert(1); }

/* Mobil: EN · DE · Hell/Dunkel auf jeder Seite nebeneinander mittig in der
   Kopfleiste, auf Hoehe des Menuezeichens (Lorenz, 25.09.2026 -- vorher je
   nach Seite mittig oder rechts, und senkrecht zu hoch fuer die Leiste) */
@media (max-width: 900px) {
  .site-header .lang-switch,
  .site-header .filter-toggle + .lang-switch,
  .site-header > .lang-switch:first-of-type,
  .brand + .lang-switch {
    top: 20px; height: 24px;
    right: auto; left: 50%;
    transform: translateX(-50%);
    flex-direction: row; align-items: center; gap: 14px;
  }
  .lang-switch .theme-toggle { margin-top: 0; }
}

/* Work: die Streifen zwischen den Stills sind durchsichtig und zeigen die
   Flaeche dahinter -- im Dunkeln sehr dunkles Grau statt #f4f4f4 */
html[data-theme="dark"] .row-media { background: #1e1e1e; }

/* SPIT, Body of Glass: Laurels sitzen auf dem grossen Still in der Mitte.
   Beim Ueberfahren (neues Still ueber die ganze Flaeche) gleiten sie im
   Takt der Ueberblendung in die rechte obere Ecke (Lorenz, 25.09.2026) */
.feed .row-media .laurels.wandern {
  left: var(--links); right: auto; width: max-content;
  transition: left 0.45s ease, transform 0.45s ease, opacity 0.3s ease;
}
@media (hover: hover) {
  .feed .row .row-media:hover .laurels.wandern {
    left: 100%;
    transform: translateX(calc(-100% - 2.7cqw));
  }
  /* rechts oben kann das neue Still hell sein (Fenster bei Body of Glass) --
     dort ein weicher, etwas kraeftigerer Schatten */
  .feed .row .row-media:hover .laurels.wandern .laurel {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  }
}
@media (max-width: 900px) {
  .feed .row-media .laurels.wandern { left: var(--links); right: auto; }
}

/* Vorhang nach dem Kutxabank-New Directors Award (26.09.2026) */
.intro-ssiff .ssiff-preis {
  font-size: 22px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 14px;
}
@media (max-width: 900px) { .intro-ssiff .ssiff-preis { font-size: 18px; } }

/* Pressezitat oben in der Textspalte der Projektseite */
.p-text .zitat { margin: 0 0 26px; }
.p-text .zitat p { font-size: 19px; font-weight: 500; line-height: 1.3; margin-bottom: 8px; }
.p-text .zitat cite {
  font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray);
}
.p-text .zitat cite a { color: inherit; }
.p-text .zitat cite a:hover { color: var(--black); }

/* lange Festival-Notizen (z. B. "Weltpremiere / Kutxabank-New Directors
   Award") duerfen umbrechen statt ueber den Spaltenrand zu laufen */
.p-text .festivals .fs-note { white-space: normal; max-width: 100%; }

/* Instagram-Highlights als Kreise ueber den Posts (Sept. 2026) */
.insta-highlights { display: flex; gap: 22px; margin: 0 0 22px; flex-wrap: wrap; }
.page-body .insta-hl, .page-body .insta-hl:hover {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 78px; border: 0;
}
.insta-hl-ring {
  display: block; width: 72px; height: 72px; border-radius: 50%;
  padding: 3px; border: 1px solid var(--gray-light);
  transition: border-color 0.25s;
}
.insta-hl:hover .insta-hl-ring { border-color: var(--black); }
.insta-hl-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.insta-hl-titel {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray);
  text-align: center; line-height: 1.25;
}
.insta-hl:hover .insta-hl-titel { color: var(--black); }
@media (max-width: 900px) {
  .insta-highlights { gap: 16px; }
  .insta-hl-ring { width: 64px; height: 64px; }
  .page-body .insta-hl { width: 70px; }
}

/* offizielles Gewinner-Laurel (breiter als das New-Directors-Logo) */
.intro-ssiff .ssiff-laurel.ssiff-winner { width: 300px; margin-bottom: 34px; }
@media (max-width: 900px) { .intro-ssiff .ssiff-laurel.ssiff-winner { width: 230px; } }