/* ============================================================
   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; }