/* ============================================================
   SARAH MIRO FISCHER — Writer, Director
   Richtung 3 „Drehbuch, reduziert“:
   weißes Blatt, Name gestapelt in der linken Spalte, Text zuerst.
   Courier nur für Szenenköpfe, Metadaten und blaue Revisionsstreifen.
   Filmseiten öffnen mit dem Still im echten Kinoformat über die ganze Breite.
   ============================================================ */

:root {
  --paper:   #fbfbf9;
  --ink:     #161616;
  --pencil:  #6f706d;
  --rule:    #e4e4df;
  --rev:     #dbe6f2;   /* blaue Revisionsseite */
  --rev-ink: #22405e;
  --still:   #0f1011;   /* Hintergrund hinter Stills */

  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;

  --fs:      15px;
  --fs-lead: clamp(19px, 1.2rem + 0.6vw, 25px);
  --side:    200px;
  --gutter:  clamp(16px, 3.2vw, 44px);
  --gap:     clamp(40px, 6vw, 88px);
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #121314;
    --ink:     #e9e9e6;
    --pencil:  #93958f;
    --rule:    #2a2c2d;
    --rev:     #1b2a39;
    --rev-ink: #b9d0ea;
    --still:   #050505;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar, 0px) + 12px); }
html.lang-pending [data-de] { visibility: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--pencil); }
img { display: block; max-width: 100%; height: auto; }
em, i { font-style: italic; }
strong, b { font-weight: 600; }
::selection { background: var(--rev); color: var(--rev-ink); }
:focus-visible { outline: 2px solid var(--rev-ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: 12px; z-index: 50; background: var(--paper); padding: 6px 10px; }

/* ---------- Gerüst ---------- */

.page {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  grid-template-areas: "side main" "side foot";
  column-gap: var(--gutter);
  padding-inline: var(--gutter);
  min-height: 100vh;
}

.side {
  grid-area: side;
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  gap: 30px;
  padding-block: 34px 24px;
}

.name {
  font: 600 19px/1.12 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
}

.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nav a { color: var(--pencil); text-decoration: none; font-size: 14px; }
.nav a:hover, .nav .on a { color: var(--ink); }
.nav .on a { text-decoration: underline; text-decoration-color: var(--rule); }

.lang { display: flex; gap: 4px; align-items: baseline; font: 12px/1 var(--mono); color: var(--pencil); }
.lang-btn {
  background: none; border: 0; padding: 2px 0; margin: 0;
  font: inherit; color: var(--pencil); cursor: pointer;
}
.lang-btn.active { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }

.main {
  grid-area: main;
  min-width: 0;
  padding-block: 34px var(--gap);
  display: grid;
  gap: var(--gap);
  align-content: start;
}

.foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding-block: 20px 36px;
  border-top: 1px solid var(--rule);
  font: 12px/1.4 var(--mono);
  color: var(--pencil);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* Menü-Hülle: auf dem Desktop unsichtbar (display: contents), Kinder liegen direkt im Spaltenraster */
.menu { display: contents; }
.side > .lang { order: 3; }
.menu-btn, .menu-foot, .nav .no { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mobil: feste Kopfzeile, Hamburger links, Name mittig, Vollbild-Menü ---------- */
@media (max-width: 760px) {
  :root { --side: auto; --bar: 56px; }
  body { padding-top: calc(var(--bar) + env(safe-area-inset-top, 0px)); }
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "foot";
  }
  .side {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: calc(var(--bar) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
    display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .name { grid-column: 2; justify-self: center; font-size: 16px; white-space: nowrap; }
  .name br { display: none; }

  .menu-btn {
    display: grid; place-items: center; grid-column: 1; grid-row: 1;
    width: 44px; height: 44px; margin-left: -10px;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
    position: relative; z-index: 2;
  }
  .menu-lines, .menu-lines::before, .menu-lines::after {
    display: block; width: 22px; height: 1.5px; background: currentColor; position: relative;
  }
  .menu-lines { background: transparent; }
  .menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; transition: transform .35s var(--ease); }
  .menu-lines::before { transform: translateY(-4px); }
  .menu-lines::after  { transform: translateY(4px); }
  .menu-open .menu-lines::before { transform: rotate(45deg); }
  .menu-open .menu-lines::after  { transform: rotate(-45deg); }

  /* Ohne JavaScript: Navigation einfach offen unter der Kopfzeile, kein Hamburger */
  html:not(.js) .menu-btn { display: none; }
  html:not(.js) .side { position: static; height: auto; grid-template-columns: 1fr auto; padding-block: 12px; }
  html:not(.js) body { padding-top: 0; }
  html:not(.js) .name { grid-column: 1; justify-self: start; }
  html:not(.js) .menu { display: block; grid-column: 1 / -1; padding: 8px 0 0; }
  html:not(.js) .nav ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  html:not(.js) .nav a { font-size: 15px; }
  html:not(.js) .nav .no, html:not(.js) .menu-foot { display: none; }

  /* Vollbild-Menü: Szenenliste */
  html.js .menu {
    display: grid; grid-template-rows: auto 1fr;
    position: fixed; inset: 0; z-index: 1;
    padding: calc(var(--bar) + env(safe-area-inset-top, 0px) + 28px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    visibility: hidden; opacity: 0;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  html.js .menu-open .menu { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
  .menu-open .name { position: relative; z-index: 2; }
  .nav ul { display: grid; gap: 6px; }
  .nav li { display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; }
  .nav .no { display: block; font: 13px var(--mono); color: var(--pencil); }
  .nav a { font: 500 clamp(34px, 11vw, 46px)/1.15 var(--sans); letter-spacing: -0.015em; color: var(--ink); }
  .nav li:not(.on) a { color: var(--pencil); }
  .nav .on a { text-decoration: none; }
  .side > .lang { grid-column: 3; grid-row: 1; justify-self: end; order: 0; position: relative; z-index: 2; font-size: 12px; }
  .menu-foot { display: block; margin: 16px 0 0; font: 12.5px/1.55 var(--mono); color: var(--pencil); }
  @media (prefers-reduced-motion: no-preference) {
    .menu-open .nav li { animation: menu-in .45s var(--ease) both; }
    .menu-open .nav li:nth-child(2) { animation-delay: .04s; }
    .menu-open .nav li:nth-child(3) { animation-delay: .08s; }
    .menu-open .nav li:nth-child(4) { animation-delay: .12s; }
    @keyframes menu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  }
  html.menu-lock, html.menu-lock body { overflow: hidden; }

  .main { padding-top: 26px; }
  .film-top { margin-top: 0; }
  body.ed-toolbar-active .side { top: 38px; }
}

/* ---------- Typografie-Bausteine ---------- */

.lead {
  font-size: var(--fs-lead);
  line-height: 1.38;
  letter-spacing: -0.006em;
  max-width: 32ch;
  margin: 0;
  text-wrap: balance;
}
.lead i, .lead em { font-style: italic; }

.label {
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0;
}

.slug {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 18px;
  font: 700 14px/1.4 var(--mono);
  text-transform: uppercase;
  margin: 0;
}
.slug .t a { text-decoration: none; }
.slug .t a:hover { text-decoration: underline; }
.slug .m { font-weight: 400; color: var(--pencil); text-transform: none; font-size: 13px; }
.slug .alt { font-weight: 400; color: var(--pencil); }

.rev {
  justify-self: start;
  display: inline-block;
  background: var(--rev);
  color: var(--rev-ink);
  font: 400 12.5px/1.45 var(--mono);
  padding: 5px 9px;
  margin: 0;
  max-width: 100%;
}

.prose { max-width: 62ch; }
.prose > * { margin: 0 0 1em; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2, .prose h3 { font: 700 14px/1.4 var(--mono); text-transform: uppercase; margin-top: 2em; }
.prose img { margin-block: 1.4em; width: 100%; }
.prose figure { margin: 1.4em 0; }
.prose figcaption { font: 12px/1.4 var(--mono); color: var(--pencil); margin-top: 6px; }
.prose blockquote { margin: 1.6em 0; padding-left: 18px; border-left: 2px solid var(--rev); }
.prose blockquote .ed-quote-author { font: 12px var(--mono); color: var(--pencil); }

/* ---------- Startseite ---------- */

.intro { display: grid; gap: 14px; }

.works { display: grid; gap: clamp(48px, 7vw, 96px); }

.work { display: grid; gap: 12px; }
.work .frame {
  display: block;
  background: var(--still);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.work .frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), opacity .4s;
}
.work a.frame:hover img { transform: scale(1.012); }
.work .logline { margin: 0; max-width: 60ch; color: var(--pencil); }
.work.is-draft, .row.is-draft { opacity: 0.55; }
.work.is-draft .slug::after, .row.is-draft .t::after {
  content: "Entwurf"; margin-left: 10px; font: 400 11px var(--mono);
  background: #b07b1a; color: #fff; padding: 2px 6px; text-transform: none;
}

.index { display: grid; gap: 12px; }
.index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 4.2em minmax(0, 1fr) auto;
  gap: 4px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.row .y { font: 13px/1.5 var(--mono); color: var(--pencil); }
.row .t { font-weight: 500; }
.row .t a { text-decoration: none; }
.row .t a:hover { text-decoration: underline; }
.row .d { display: block; font-weight: 400; color: var(--pencil); font-size: 14px; margin-top: 2px; }
.row .f { font: 12.5px/1.5 var(--mono); color: var(--pencil); text-align: right; white-space: nowrap; }
.row .d { max-width: 60ch; }
.row .rev-line { display: inline-block; margin-top: 8px; background: var(--rev); color: var(--rev-ink); font: 12px/1.45 var(--mono); padding: 3px 7px; }
@media (max-width: 560px) {
  .row { grid-template-columns: 3.4em minmax(0, 1fr); }
  .row .f { grid-column: 2; text-align: left; white-space: normal; }
}

/* ---------- Filmseite ---------- */

.film-hero {
  margin: 0 calc(-1 * var(--gutter));
  background: var(--still);
  aspect-ratio: 2.39 / 1;
  max-height: 86vh;
  overflow: hidden;
  position: relative;
}
.film-hero[data-ratio="2.00"] { aspect-ratio: 2 / 1; }
.film-hero[data-ratio="1.85"] { aspect-ratio: 1.85 / 1; }
.film-hero[data-ratio="1.66"] { aspect-ratio: 1.66 / 1; }
.film-hero[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.film-hero img { width: 100%; height: 100%; object-fit: cover; }
.film-hero .ratio {
  position: absolute; right: 12px; bottom: 9px;
  font: 11px/1 var(--mono); color: #fff; opacity: .7;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.film-hero--empty { display: grid; place-content: center; color: #888; font: 13px var(--mono); }

/* Das Kinoformat-Still steht über der ganzen Seite, oberhalb des Spaltenrasters */
.film-top { padding-inline: var(--gutter); }
.film-top .film-hero { margin: 0 calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); }
@media (prefers-reduced-motion: no-preference) {
  .film-hero img { animation: reveal 1.1s var(--ease) both; }
  @keyframes reveal { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
}

.film-head { display: grid; gap: 16px; }
.film-head .slug { font-size: clamp(15px, 1.3vw, 18px); }
.film-head .role { font: 13px var(--mono); color: var(--pencil); margin: 0; }

.film-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 1000px) { .film-body { grid-template-columns: minmax(0, 1fr); } }

.credits { font: 12.5px/1.6 var(--mono); color: var(--pencil); }
.credits > * { margin: 0 0 0.9em; }
.credits b, .credits strong { color: var(--ink); font-weight: 400; text-transform: uppercase; }
.credits p { margin: 0 0 0.6em; }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gallery img { width: 100%; aspect-ratio: 1.85 / 1; object-fit: cover; background: var(--still); }
.gallery figure { margin: 0; position: relative; min-width: 0; }
.gallery figure:first-child { grid-column: 1 / -1; }
.gallery figure:first-child img { aspect-ratio: auto; }
@media (max-width: 560px) { .gallery { grid-template-columns: minmax(0, 1fr); } }

.trailer a { font: 13px var(--mono); }

.pager {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 14px;
  font: 13px var(--mono);
}
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }

/* ---------- About ---------- */

.portrait { position: relative; margin: 0; max-width: 560px; }
.portrait img { width: 100%; background: var(--still); }
/* Der eine Untertitel-Moment: Sarahs Satz steht einmal wie ein Filmuntertitel über dem Porträt */
.subtitle {
  position: absolute; left: 6%; right: 6%; bottom: 7%;
  margin: 0; text-align: center;
  font: 600 clamp(14px, 1.9vw, 19px)/1.35 var(--sans);
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000;
  text-wrap: balance;
}
@media (prefers-reduced-motion: no-preference) {
  .subtitle { animation: sub 0.01s linear 1.2s both; }
  @keyframes sub { from { visibility: hidden; } to { visibility: visible; } }
}
.portrait figcaption { font: 11px/1.4 var(--mono); color: var(--pencil); padding-top: 6px; background: var(--paper); }

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- News ---------- */

.insta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.insta > * { margin: 0; min-width: 0; }
.insta img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--still); }
.insta a { display: block; }
.insta figcaption { font: 11px/1.35 var(--mono); color: var(--pencil); margin-top: 5px; }
@media (max-width: 760px) {
  .insta {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .insta > * { scroll-snap-align: start; }
}
.follow { font: 12.5px var(--mono); color: var(--pencil); margin: 0; }
.follow a { color: var(--ink); }

.news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.news > li {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 4px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.news > li > * { margin: 0; }
.news time, .news .when { font: 13px/1.55 var(--mono); color: var(--pencil); font-variant-numeric: tabular-nums; }
.news b, .news strong { font-weight: 600; }
@media (max-width: 560px) { .news > li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kontakt / Rechtliches ---------- */

.contact { display: grid; gap: 28px; }
.contact dl { margin: 0; display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 10px 18px; }
.contact dt { font: 12px/1.6 var(--mono); text-transform: uppercase; color: var(--pencil); }
.contact dd { margin: 0; }
@media (max-width: 560px) { .contact dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .contact dd { margin-bottom: 12px; } }

.todo { background: #fff3c4; color: #5b4500; padding: 0 4px; font: 13px var(--mono); }
@media (prefers-color-scheme: dark) { .todo { background: #4a3b00; color: #ffe38a; } }

.notfound { display: grid; gap: 14px; }

/* ============================================================
   Effekte: Titelseite · CUT TO: · Kasch
   Alle drei entfallen bei „Bewegung reduzieren“ und im Editor.
   ============================================================ */

/* 1 · Titelseite — einmal pro Besuch das Deckblatt eines Drehbuchs */
.titlepage-sheet { display: none; }
html.titlepage .titlepage-sheet {
  display: block !important;
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper); color: var(--ink);
  font-family: var(--mono);
  cursor: pointer;
}
html.titlepage body { overflow: hidden; }
/* Titel in derselben Schrift wie der Seitentitel (.name), nur größer — so landet er ohne Sprung */
.tp-title {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font: 600 clamp(30px, 4.2vw, 54px)/1.12 var(--sans); letter-spacing: -0.005em;
  white-space: nowrap;
}
.tp-title .w, .name .w { display: inline-block; }
.tp-title .w { transform-origin: 0 0; }
.tp-by {
  position: absolute; left: 50%; top: calc(38% + clamp(30px, 4.2vw, 54px) * 0.9 + 18px); transform: translateX(-50%);
  font-size: 14px; color: var(--pencil); white-space: nowrap;
}
.tp-contact, .tp-date { position: absolute; bottom: clamp(28px, 7vh, 64px); font-size: 12.5px; line-height: 1.55; color: var(--pencil); }
.tp-contact { left: clamp(20px, 8vw, 110px); }
.tp-date { right: clamp(20px, 8vw, 110px); }
/* Rückzug: Deckblatt wird durchsichtig, der Titel wandert in den Seitentitel, die Seite blendet darunter ein */
.titlepage-sheet { transition: background-color 1.2s ease .2s; }
.tp-title .w { transition: transform 1.5s cubic-bezier(0.65, 0, 0.25, 1), opacity .25s linear 1.45s; }
.tp-by, .tp-contact, .tp-date { transition: opacity .45s ease; }
html.titlepage.titlepage-out .titlepage-sheet { background-color: transparent; pointer-events: none; }
html.titlepage.titlepage-out .tp-by,
html.titlepage.titlepage-out .tp-contact,
html.titlepage.titlepage-out .tp-date { opacity: 0; }
html.titlepage.titlepage-out .tp-title .w { opacity: 0; }
/* Seite liegt während des Deckblatts unsichtbar darunter und kommt weich, statt reinzuploppen */
html.titlepage .main, html.titlepage .film-top, html.titlepage .foot,
html.titlepage .side .nav, html.titlepage .side .lang, html.titlepage .menu-btn { opacity: 0; }
html.titlepage .side .name { opacity: 0; }
html.titlepage.titlepage-out .main, html.titlepage.titlepage-out .film-top, html.titlepage.titlepage-out .foot,
html.titlepage.titlepage-out .side .nav, html.titlepage.titlepage-out .side .lang, html.titlepage.titlepage-out .menu-btn { opacity: 1; transition: opacity 1.3s ease .25s; }
html.titlepage.titlepage-out .side .name { opacity: 1; transition: opacity .25s linear 1.45s; }

/* 2 · CUT TO: — beim Klick auf einen Link wird die Seite leer, unten rechts steht die Übergangszeile */
.cutto { display: none; }
body.cutting .cutto {
  display: block !important;
  position: fixed; right: clamp(20px, 6vw, 80px); bottom: clamp(24px, 6vh, 56px); z-index: 95;
  font: 400 14px/1 var(--mono); color: var(--ink); letter-spacing: 0.02em;
}
.cutto span { display: none; }
body.cutting .cutto .to-cut { display: inline; }
body.cutting.fading .cutto .to-cut { display: none; }
body.cutting.fading .cutto .to-fade { display: inline; }
body.cutting .page, body.cutting .film-top { visibility: hidden; }

/* 4 · Kasch — beim Überfahren schiebt sich die Maske auf das echte Kinoformat */
.kasch { position: relative; }
.kasch::before, .kasch::after {
  content: ""; position: absolute; z-index: 1; background: #000; pointer-events: none;
  transition: transform .55s var(--ease);
}
/* Balken oben/unten (breiter als 2:1) — Größe über --kasch-y */
.kasch::before { left: 0; right: 0; top: 0; height: var(--kasch-y, 0%); transform: translateY(-100%); }
.kasch::after  { left: 0; right: 0; bottom: 0; height: var(--kasch-y, 0%); transform: translateY(100%); }
/* Formate schmaler als 2:1 bekommen seitliche Balken — über box-shadow innen */
.kasch img { transition: transform 1.2s var(--ease), box-shadow .55s var(--ease); }
.work a.kasch:hover::before, .work a.kasch:hover::after,
.work:hover a.kasch::before, .work:hover a.kasch::after { transform: none; }
.work:hover a.kasch img { transform: none; }
.kasch-side { position: absolute; top: 0; bottom: 0; width: var(--kasch-x, 0%); background: #000; z-index: 1; pointer-events: none; transition: transform .55s var(--ease); }
.kasch-side.l { left: 0; transform: translateX(-100%); }
.kasch-side.r { right: 0; transform: translateX(100%); }
.work:hover .kasch-side { transform: none; }
.kasch-label {
  position: absolute; right: 10px; bottom: 8px; z-index: 2;
  font: 11px/1 var(--mono); color: #fff; opacity: 0; transition: opacity .3s .25s;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.work:hover .kasch-label { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  html.titlepage .titlepage-sheet { display: none !important; }
  html.titlepage .main, html.titlepage .film-top, html.titlepage .foot,
  html.titlepage .side .name, html.titlepage .side .nav, html.titlepage .side .lang, html.titlepage .menu-btn { opacity: 1 !important; }
  html.titlepage body { overflow: auto; }
  .kasch::before, .kasch::after, .kasch-side, .kasch-label { display: none; }
}
@media (hover: none) {
  .kasch::before, .kasch::after, .kasch-side, .kasch-label { display: none; }
}

/* ---------- Eingefügte Bilder aus dem Editor (auch öffentlich sichtbar) ----------
   Größe S/M/L/Voll und Ausrichtung setzt Sarah im Bild-Popover; ohne diese Regeln
   sähen Besucher die Einstellungen nicht. Übernommen aus Nanas Vorlage. */
.prose img.ed-image { margin-block: 1.2em; }
.prose .ed-image-s    { width: auto; max-width: min(200px, 100%); }
.prose .ed-image-m    { width: auto; max-width: min(400px, 100%); }
.prose .ed-image-l    { width: auto; max-width: min(700px, 100%); }
.prose .ed-image-full { width: 100%; max-width: 100%; }
.prose .ed-image-align-left   { float: left;  margin: 0.3em 1.2em 0.8em 0; }
.prose .ed-image-align-right  { float: right; margin: 0.3em 0 0.8em 1.2em; }
.prose .ed-image-align-center { float: none; margin-inline: auto; }
.prose::after { content: ""; display: block; clear: both; }
@media (max-width: 560px) {
  .prose .ed-image-align-left, .prose .ed-image-align-right { float: none; margin-inline: 0; max-width: 100%; }
}