/* ---------- Weltbild Werkstatt ---------- */
.kp-wb { display: block; }

.kp-wb-flash {
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  border: 1px solid var(--gold-deep); border-left-width: 2px; background: var(--gold-soft);
  color: var(--fg-1); padding: 11px 16px; border-radius: var(--r-sm); margin-bottom: 18px;
}
.kp-wb-flash.is-err { border-color: #8d3a2a; background: rgba(141,58,42,.14); }

.kp-wb-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--ink-line); }
.kp-wb-nav-ohnelinie { padding-bottom: 0; border-bottom: 0; }
.kp-wb-tab {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .24s;
  border: 1px solid var(--ink-line); background: transparent; color: var(--fg-2);
}
.kp-wb-tab:hover { border-color: var(--gold-deep); color: var(--gold); }
.kp-wb-tab.is-on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.kp-wb-pille { margin-left: auto; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }

.kp-wb-head { margin-bottom: 22px; }
.kp-wb-h { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.15; color: var(--fg-1); margin: 0 0 8px; }
.kp-wb-intro { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 68ch; }
.kp-wb-klein { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--fg-3); margin: 6px 0 0; }
.kp-wb-leer { font-family: var(--font-body); font-style: italic; font-size: 15px; color: var(--fg-3); padding: 22px 0; margin: 0; }
.kp-wb-hinweis { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--fg-3); margin: 10px 0 0; max-width: 52ch; }
.kp-wb-link { background: none; border: 0; padding: 0; font: inherit; color: var(--gold); cursor: pointer; text-decoration: underline; }

.kp-wb-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.kp-wb-suche, .kp-wb-filter select, .kp-wb-thema, .kp-wb-form input, .kp-wb-form select, .kp-wb-notiz, .kp-wb-paste {
  font-family: var(--font-body); font-size: 14px; color: var(--fg-1);
  background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-sm); padding: 9px 12px;
}
.kp-wb-suche { flex: 1 1 200px; min-width: 0; }
.kp-wb-suche:focus, .kp-wb-filter select:focus, .kp-wb-thema:focus, .kp-wb-notiz:focus, .kp-wb-paste:focus,
.kp-wb-form input:focus, .kp-wb-form select:focus { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.kp-wb-zaehler { margin-left: auto; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }

.kp-wb-entry { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--ink-line); }
.kp-wb-entry.is-ja { box-shadow: inset 2px 0 0 var(--gold); padding-left: 14px; }
.kp-wb-entry.is-nein { opacity: .55; }
.kp-wb-code { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--gold); white-space: nowrap; padding-top: 3px; }
.kp-wb-body { display: grid; gap: 7px; min-width: 0; }
.kp-wb-aussage { font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: var(--fg-1); }
.kp-wb-eigen { font-family: var(--font-body); font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.kp-wb-notiz { width: 100%; font-size: 13px; }
.kp-wb-side { display: grid; gap: 7px; justify-items: end; }
.kp-wb-stance { display: inline-flex; gap: 5px; }
.kp-wb-sbtn {
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--ink-line); background: transparent; color: var(--fg-3);
  border-radius: var(--r-sm); cursor: pointer; transition: all .2s;
}
.kp-wb-sbtn:hover { border-color: var(--gold-deep); color: var(--gold); }
.kp-wb-sbtn--zustimmung.is-on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.kp-wb-sbtn--ablehnung.is-on { border-color: #8d3a2a; background: rgba(141,58,42,.18); color: #d08a76; }
.kp-wb-sbtn--unentschieden.is-on { border-color: var(--fg-3); color: var(--fg-2); }
.kp-wb-del { background: none; border: 0; padding: 0; font-family: var(--font-body); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); cursor: pointer; }
.kp-wb-del:hover { color: #d08a76; }

.kp-wb-fc { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.kp-wb-fc-typ, .kp-wb-fc-b, .kp-wb-fc-k {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--ink-line); color: var(--fg-3);
}
.kp-wb-fc-b--gestuetzt { border-color: #3f6b4f; color: #7fae8b; }
.kp-wb-fc-b--widerlegt { border-color: #8d3a2a; color: #d08a76; }
.kp-wb-fc-b--umstritten { border-color: var(--gold-deep); color: var(--gold); }
.kp-wb-fc-grund { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.kp-wb-fc-grund em { color: var(--fg-3); }

.kp-wb-mehr { padding: 20px 0; text-align: center; }
.kp-wb-gruppe { margin-top: 30px; }
.kp-wb-gh { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ink-line); }
.kp-wb-gh span { color: var(--fg-3); }
.kp-wb-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kp-wb-form input[name="aussage"] { flex: 1 1 260px; min-width: 0; }

.kp-wb-start { padding: 26px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.kp-wb-fortschritt { height: 3px; background: var(--charcoal); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.kp-wb-fbar { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left center; transition: transform .4s var(--ease); }
.kp-wb-fmeta { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 22px; }
.kp-wb-duell { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 640px) { .kp-wb-duell { grid-template-columns: 1fr; } }
.kp-wb-seite {
  display: grid; gap: 10px; align-content: start; text-align: left; cursor: pointer;
  background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-md);
  padding: 22px 20px; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--fg-1);
  transition: all .24s;
}
.kp-wb-seite:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.kp-wb-seite.is-on { border-color: var(--gold); background: var(--gold-soft); }
.kp-wb-vs { align-self: center; font-family: var(--font-body); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.kp-wb-duellnote { font-family: var(--font-body); font-style: italic; font-size: 14px; line-height: 1.6; color: var(--fg-3); margin: 18px 0 0; }
.kp-wb-ivctl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.kp-wb-ivwahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kp-wb-ivwahl .is-on { border-color: var(--gold); color: var(--gold); }
.kp-wb-duell--solo { grid-template-columns: 1fr; }
.kp-wb-seite.is-static { cursor: default; }
.kp-wb-seite.is-static:hover { border-color: var(--ink-line); transform: none; }

.kp-wb-konst { border: 1px solid var(--ink-line); border-radius: var(--r-md); background: var(--ink-2); padding: 12px; margin-bottom: 24px; }
.kp-wb-konst svg { display: block; width: 100%; height: auto; }
.kp-wb-edge { stroke: var(--ink-line); stroke-width: 1; }
.kp-wb-edge--contra { stroke: #8d3a2a; stroke-width: 1.6; }
.kp-wb-node { fill: var(--gold); }
.kp-wb-nlabel { font-family: var(--font-body); font-size: 9px; letter-spacing: .1em; fill: var(--fg-3); }
.kp-wb-svgleer { font-family: var(--font-body); font-size: 14px; fill: var(--fg-3); font-style: italic; }

.kp-wb-spann { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ink-line); }
.kp-wb-spann-paar { display: flex; gap: 7px; align-items: center; }
.kp-wb-x { color: #d08a76; font-size: 11px; }
.kp-wb-spann-txt p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0 0 5px; }
.kp-wb-spann-grund { font-style: italic; color: var(--fg-3) !important; font-size: 13px !important; }

.kp-wb-profil { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.kp-wb-siegel { flex: none; width: 116px; }
.kp-wb-siegel svg { display: block; width: 100%; height: auto; }
.kp-wb-seal-bg { stroke: var(--ink-line); stroke-width: 5; }
.kp-wb-seal-fg { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.kp-wb-seal-num { font-family: var(--font-display); font-size: 30px; font-weight: 600; fill: var(--fg-1); }
.kp-wb-seal-cap { font-family: var(--font-body); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; fill: var(--fg-3); }
.kp-wb-peyebrow { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.kp-wb-pname { font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.2; color: var(--fg-1); margin: 0 0 8px; }
.kp-wb-pmeta { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .06em; color: var(--fg-3); margin: 0; }
.kp-wb-radar { max-width: 420px; margin: 0 auto 26px; }
.kp-wb-radar svg { display: block; width: 100%; height: auto; }
.kp-wb-ring { fill: none; stroke: var(--ink-line); stroke-width: .8; }
.kp-wb-axis { stroke: var(--ink-line); stroke-width: .8; }
.kp-wb-fill { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.6; }
.kp-wb-rlabel { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .1em; fill: var(--fg-3); }

.kp-wb-manifest { border-top: 1px solid var(--ink-line); padding-top: 24px; margin-top: 8px; }
.kp-wb-manifest h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--fg-1); margin: 0 0 12px; }
.kp-wb-manifest h4 { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 24px 0 10px; }
.kp-wb-manifest p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.7; color: var(--fg-2); margin: 0 0 12px; }
.kp-wb-manifest ul { margin: 0 0 12px; padding-left: 20px; }
.kp-wb-manifest li { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--fg-3); }
.kp-wb-manifest hr { border: 0; border-top: 1px solid var(--ink-line); margin: 22px 0; }

.kp-wb-tabs2 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.kp-wb-tab2 {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 16px; border: 1px solid var(--ink-line); background: transparent; color: var(--fg-2);
  border-radius: var(--r-sm); cursor: pointer; transition: all .24s;
}
.kp-wb-tab2:hover { border-color: var(--gold-deep); color: var(--gold); }
.kp-wb-tab2.is-on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }

.kp-wb-schritte { display: grid; gap: 14px; margin-bottom: 26px; }
.kp-wb-schritt { display: flex; gap: 16px; align-items: flex-start; background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-md); padding: 18px 20px; }
.kp-wb-schritt > div { flex: 1; min-width: 0; }
.kp-wb-schritt strong { font-family: var(--font-body); font-size: 14.5px; color: var(--fg-1); }
.kp-wb-num { flex: none; width: 26px; font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--gold); }
.kp-wb-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.kp-wb-paste { width: 100%; margin-top: 12px; font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.55; resize: vertical; }
.kp-wb-thema { width: 100%; margin-top: 10px; }

.kp-wb-pick { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ink-line); cursor: pointer; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.kp-wb-pick input { accent-color: var(--gold); }
.kp-wb-schon { font-family: var(--font-body); font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

.kp-wb-fragen { margin: 0; padding-left: 20px; }
.kp-wb-fragen li { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--fg-1); margin-bottom: 10px; }
.kp-wb-sug { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--ink-line); }
.kp-wb-sug.is-drin { opacity: .5; }
.kp-wb-sugtext { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--fg-1); }

.kp-wb-karten { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px;margin-bottom: 22px; }
.kp-wb-karte { background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-md); padding: 22px 24px; }

@media (max-width: 640px) {
  .kp-wb-entry { grid-template-columns: auto 1fr; }
  .kp-wb-side { grid-column: 1 / -1; justify-items: start; }
  .kp-wb-pick { grid-template-columns: auto 1fr; }
}

/* ---------- Endstation ---------- */
/* Farben hier fest verdrahtet statt ueber --fg-*: die Buehne ist immer dunkel,
   die Kabinett-Seite ist hell. Sonst stand dunkelbraune Schrift auf Schwarz. */

.kp-es-spiel { display: grid; grid-template-columns: minmax(0,682px) minmax(230px,1fr); gap: 24px; align-items: start; }
/* [hidden] hat als Attributselektor dieselbe Gewichtung wie eine Klasse und
   verliert deshalb gegen jedes .kp-es-* mit display-Angabe — der Schaffner
   stand dadurch schon im Abteil in der Seitenspalte. Hier explizit gewinnen. */
.kp-es-spiel [hidden] { display: none; }
.kp-es-spiel > .kp-es-ende { grid-column: 1 / -1; }

/* 682px = exakt das Doppelte der Quellbreite (341px), damit die Pixel quadratisch bleiben. */
.kp-es-buehne {
  position: relative; aspect-ratio: 341 / 192; overflow: hidden; background: #0d0b06;
  border: 1px solid var(--gold-deep); border-radius: var(--r-sm); cursor: pointer; user-select: none;
}
.kp-es-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated;
  opacity: 0; transition: opacity .3s var(--ease);
}
.kp-es-bg.ist-oben { opacity: 1; }
.ist-blende .kp-es-figur, .ist-blende .kp-es-npc, .ist-blende .kp-es-schatten,
.ist-blende .kp-es-bg, .ist-blende .kp-es-lichter, .ist-blende .kp-es-regenfeld {
  opacity: 0; transition: opacity .25s var(--ease);
}

/* Lichtflecken ueber den gemalten Lampen. screen-Blend addiert Helligkeit,
   statt die Szene mit einer grauen Scheibe zu ueberdecken. */
.kp-es-lichter { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.kp-es-licht { position: absolute; height: 0; transform: translate(-50%,-50%); border-radius: 50%; }
.kp-es-licht.flackert { animation: kp-es-flackern 5.5s ease-in-out infinite; }
@keyframes kp-es-flackern {
  0%, 100% { opacity: 1; } 41% { opacity: .84; } 47% { opacity: 1.06; }
  63% { opacity: .9; } 71% { opacity: 1.02; }
}

/* Regen nur im Fensterausschnitt: senkrechtes Streifenmuster, leicht gekippt.
   Der Versatz je Durchlauf entspricht genau einer Streifenperiode, dadurch
   laeuft die Schleife ohne sichtbaren Sprung. */
.kp-es-regenfeld { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s var(--ease); }
/* Offenes Fenster: der Regen kommt herein statt nur draussen zu haengen. */
.kp-es-buehne.ist-nass .kp-es-regenfeld { opacity: 1.6; }
/* Zugezogener Vorhang: der Kronleuchter verschwindet, der Salon wird dunkler. */
.kp-es-buehne.ist-dunkel .kp-es-licht--wandlinks { opacity: .08; }
/* Abspann: Schwarzblende mit Schriftzug, damit klar ist, dass hier Schluss ist. */
.kp-es-fortsetzung {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  background: #060503; opacity: 0; transition: opacity 1.1s var(--ease); pointer-events: none;
}
.kp-es-fortsetzung.ist-da { opacity: 1; }
.kp-es-fortsetzung span {
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .38em; text-transform: uppercase;
  color: #C9BCA0; opacity: 0; animation: kp-es-auftauchen 1.4s var(--ease) .7s forwards;
}
@keyframes kp-es-auftauchen { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .38em; } }
.kp-es-buehne.ist-nass .kp-es-lichter { opacity: .55; }
.kp-es-regen { display: block; position: absolute; overflow: hidden; pointer-events: none; opacity: .5; mix-blend-mode: screen; }
/* Drei Lagen kurzer, senkrechter Tropfenstriche. Die Kachelmasse sind teilerfremd
   (34/47/26), dadurch ueberlagern sie sich nie gleich und das Muster wirkt
   unregelmaessig. Jede Lage wandert je Durchlauf ein ganzzahliges Vielfaches
   ihrer Kachelhoehe, damit die Schleife nicht springt. Vorher waren es
   durchgehende Balken quer ueber die Scheibe — das sah nach Kratzern aus. */
.kp-es-regen::before {
  content: ''; position: absolute; inset: -35% -15%; transform: rotate(8deg);
  background-image:
    radial-gradient(1px 8px at 50% 50%, rgba(206,230,245,.55), rgba(206,230,245,0)),
    radial-gradient(1px 11px at 50% 50%, rgba(206,230,245,.36), rgba(206,230,245,0)),
    radial-gradient(1px 6px at 50% 50%, rgba(206,230,245,.28), rgba(206,230,245,0));
  background-size: 13px 34px, 19px 47px, 27px 26px;
  animation: kp-es-regen 1.05s linear infinite;
}
@keyframes kp-es-regen {
  from { background-position: 0 0, 7px 0, 15px 0; }
  to   { background-position: 0 102px, 7px 141px, 15px 104px; }
}

/* Figuren: left/bottom bleiben auf 0, bewegt wird per transform — das laeuft auf
   der GPU und ruckelt nicht, weil kein Layout neu gerechnet wird. */
.kp-es-figur, .kp-es-npc {
  position: absolute; left: 0; bottom: 0; transform-origin: bottom center; pointer-events: none;
}
.kp-es-figur { will-change: transform; z-index: 3; }
.kp-es-npc { z-index: 2; }
.kp-es-figur img, .kp-es-npc img { display: block; height: 100%; width: auto; image-rendering: pixelated; }
.kp-es-figur .kp-es-b { position: absolute; inset: 0; }
.kp-es-schatten {
  position: absolute; left: 0; bottom: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
}

/* Anklickbares bleibt unsichtbar — kein Rahmen ums Objekt. Die Statuszeile sagt,
   was unter dem Zeiger liegt; der Punkt erscheint nur bei Tastaturfokus. */
.kp-es-hotspots { position: absolute; inset: 0; }
.kp-es-hotspot { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; }
.kp-es-punkt {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--gold); opacity: 0; transition: opacity .25s;
  box-shadow: 0 0 8px rgba(216,179,61,.9);
}
.kp-es-hotspot:focus-visible .kp-es-punkt { opacity: .95; }

.kp-es-status {
  position: absolute; left: 0; top: 0; margin: 0; padding: 6px 12px; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: #EFD175;
  background: rgba(9,7,4,.7); border-bottom-right-radius: var(--r-sm);
}
.kp-es-status:empty { display: none; }

/* Gesprochenes steht ueber der Figur, mit hartem Rand statt Sprechblase —
   so bleibt die Szene sichtbar (die Kastenloesung davor hat sie zugedeckt). */
.kp-es-blase {
  position: absolute; z-index: 4; margin: 0; max-width: 46%; transform: translate(-50%,-100%);
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.45; text-align: center;
  pointer-events: none; white-space: pre-wrap; text-wrap: balance;
  text-shadow: 0 0 4px #06050333, 1px 1px 0 #060503, -1px 1px 0 #060503, 1px -1px 0 #060503,
    -1px -1px 0 #060503, 0 2px 0 #060503, 0 -2px 0 #060503, 2px 0 0 #060503, -2px 0 0 #060503;
}
.kp-es-blase.ist-t { color: #F3E9D2; }
.kp-es-blase.ist-s { color: #A8CDEC; }

.kp-es-unterschrift {
  position: absolute; z-index: 4; left: 6%; right: 6%; bottom: 14px; margin: 0;
  font-family: var(--font-mono); font-style: italic; font-size: 12.5px; line-height: 1.5;
  text-align: center; color: #CBBB96; pointer-events: none; white-space: pre-wrap;
  text-shadow: 1px 1px 0 #060503, -1px 1px 0 #060503, 1px -1px 0 #060503, -1px -1px 0 #060503,
    0 2px 4px rgba(6,5,3,.9);
}

/* Seitenspalte: Ort, Inventar, Gespraechsthemen. */
.kp-es-seite { display: grid; gap: 16px; align-content: start; }
.kp-es-ort { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #EFD175; margin: 0; }
.kp-es-tipp { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: .06em; color: #8A7F66; margin: 0; }
.kp-es-inventar { display: grid; grid-template-columns: repeat(auto-fill,minmax(88px,1fr)); gap: 8px; }
.kp-es-ding {
  display: grid; gap: 5px; justify-items: center; padding: 8px 6px; cursor: pointer; min-width: 0;
  border: 1px solid var(--ink-line); border-radius: var(--r-sm); background: rgba(243,236,221,.04);
  transition: border-color .2s, background .2s;
}
.kp-es-ding img { width: 40px; height: 40px; image-rendering: pixelated; }
/* Lange Komposita wie "Fuellfederhalter" sind breiter als die Kachel. Sie muessen
   umbrechen duerfen, sonst laufen sie ueber den Rand in die Nachbarkachel. */
.kp-es-ding b {
  font-family: var(--font-mono); font-size: 9px; font-weight: 400; letter-spacing: .04em;
  line-height: 1.35; text-align: center; color: #C9BCA0;
  max-width: 100%; overflow-wrap: anywhere; hyphens: auto;
}
.kp-es-ding:hover { border-color: var(--gold-deep); background: rgba(216,179,61,.08); }
.kp-es-ding.ist-gewaehlt { border-color: var(--gold); background: rgba(216,179,61,.16); }
.kp-es-ding.ist-gewaehlt b { color: var(--gold); }

.kp-es-gegenueber { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; }
.kp-es-gegenueber > img {
  width: 54px; height: 54px; image-rendering: pixelated; border: 1px solid var(--ink-line);
  border-radius: var(--r-sm); background: #16120A;
}
.kp-es-themen { display: grid; gap: 7px; }
.kp-es-thema {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; text-align: left; padding: 9px 13px;
  border: 1px solid var(--gold-deep); border-radius: var(--r-sm); background: transparent; color: var(--gold);
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.kp-es-thema:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-bright); }

/* Die sechs Wagen hinter der Tuer — abgedunkelt, Hover hebt den Vorhang. */
.kp-es-ende { display: grid; gap: 18px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--ink-line); }
.kp-es-wagen { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; }
.kp-es-wagen figure { margin: 0; overflow: hidden; background: #0d0b06; border: 1px solid var(--ink-line); border-radius: var(--r-sm); }
.kp-es-wagen img {
  display: block; width: 100%; height: auto; image-rendering: pixelated;
  filter: grayscale(.6) brightness(.4); transition: filter .3s;
}
.kp-es-wagen figure:hover img, .kp-es-wagen figure:focus-within img { filter: none; }
.kp-es-wagen figcaption {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #C9BCA0; padding: 7px 9px; border-top: 1px solid var(--ink-line);
}
.kp-es-schluss { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: #C9BCA0; margin: 0; }

@media (max-width: 900px) {
  .kp-es-spiel { grid-template-columns: 1fr; gap: 18px; }
  .kp-es-blase { font-size: 12px; max-width: 60%; }
  .kp-es-unterschrift { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-es-bg, .kp-es-punkt { transition: none; }
  .kp-es-licht.flackert, .kp-es-regen::before { animation: none; }
}

/* ---------- Kompendium-Karte ---------- */
.kp-karte-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.kp-karte-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.kp-karte-layout .kp-karte-frame { flex: 1 1 560px; min-width: 0; }
.kp-karte-layout #kp-karte-detail:empty { display: none; }
.kp-karte-frame { border: 1px solid var(--ink-line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.kp-karte-svg { display: block; width: 100%; height: auto; }
.kp-karte-pin { cursor: pointer; transition: transform .18s; }
.kp-karte-pin:hover, .kp-karte-pin:focus { transform: scale(1.15); }
.kp-karte-pin:focus { outline: none; }
.kp-karte-status { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.kp-karte-status.ist-offen { color: var(--forest); }
.kp-karte-status.ist-geschlossen { color: var(--fg-3); }
.kp-karte-event { font-family: var(--font-body); font-size: 13px; color: var(--gold); margin: 0; }
.kp-karte-event.ist-vorbei { opacity: .55; }
/* Auszeichnung: dasselbe Siegel wie in der Videothek (.kp-film-siegel). */
/* Detail-Panel: Schliessen-Zeile, Meta-Zeile (Kategorie + Status), Titel mit Siegel. */
.kp-karte-kopf { align-self: stretch; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
/* Kategorie-Chip teilt sich die Zeile mit dem Schliessen-Knopf, darum etwas schmaler. */
.kp-karte-kopf .kp-tag { font-size: 10px; padding: 5px 10px; letter-spacing: .1em; }
.kp-karte-meta { align-self: stretch; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.kp-karte-titel { align-self: stretch; box-sizing: border-box; max-width: 100%; margin: 0; padding-right: 66px; }
/* Siegel haengt fest am Panel, damit es unabhaengig von Textlaenge und
   Status-Zeile immer an derselben Stelle und in derselben Groesse sitzt. */
.kp-karte-panel { position: relative; }
.kp-karte-siegel { position: absolute; top: 74px; right: 24px; width: 54px; height: 54px;
  object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }

@keyframes kp-karte-pin-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kp-karte-pin-pop { animation: kp-karte-pin-pop .3s ease-out; }

@keyframes kp-karte-popup-in { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.kp-karte-pop-in { animation: kp-karte-popup-in .3s ease-out; }

@keyframes kp-karte-puls { 0% { r: 10; opacity: .9; stroke-width: 2; } 100% { r: 22; opacity: 0; stroke-width: .5; } }
.kp-karte-pulse { animation: kp-karte-puls 1.6s ease-out infinite; }

@keyframes kp-karte-schiff-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-1.5deg); } }
.kp-karte-schiff { animation: kp-karte-schiff-bob 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .kp-karte-pin-pop, .kp-karte-pop-in, .kp-karte-pulse, .kp-karte-schiff {
    animation: none;
  }
}

/* ---------- Kochwerk ---------- */
.kp-courses { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 24px; margin-bottom: 26px; }
.kp-course-label { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.kp-course-hinweis { font-weight: 400; letter-spacing: .08em; color: var(--fg-3); text-transform: none; }
.kp-course-items { display: grid; gap: 10px; }
.kp-course-item {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px; border-radius: var(--r-sm);
  cursor: pointer; transition: all .24s; border: 1px solid var(--ink-line); background: transparent; width: 100%;
}
.kp-course-item.is-on { border-color: var(--gold); background: var(--gold-soft); }
.kp-course-item-name { font-family: var(--font-display); font-size: 19px; line-height: 1.15; color: var(--fg-1); }
.kp-course-item.is-on .kp-course-item-name { color: var(--gold); }
.kp-course-item-tag { font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.kp-menu-result { border-top: 1px solid var(--ink-line); padding-top: 24px; text-align: center; }
.kp-menu-result-label { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 14px; }
.kp-menu-line { font-family: var(--font-display); font-size: clamp(1.3rem,2.6vw,2rem); line-height: 1.3; color: var(--fg-1); margin: 0; }
.kp-menu-portionen { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.kp-menu-portionen .kp-tile-label { margin: 0; }

/* Kochwerk — Rezepte, Einkaufsliste, gespeicherte Menüs */
.kp-course-item.is-leer { opacity: .62; }
.kp-menu-akt { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

/* Web-Rezeptkarte: dieselbe Palette wie die Druckkarte (farbschema "kompendium"
   in rezept_render.py), fest verdrahtet statt ueber --gold — die Seite kann
   hell oder dunkel sein, die Karte soll trotzdem immer gleich aussehen. */
.kp-rz {
  --rk-zutat: #EFE7D5; --rk-linie: #9D7C20; --rk-aktion: #D8B33D;
  --rk-aktion-text: #16120A; --rk-text: #4A4231;
}
.kp-rz-block { display: grid; gap: 56px; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--ink-line); }
.kp-rz-titel { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.06; text-align: right; color: var(--fg-1); margin: 0; }
.kp-rz-regel { width: 15mm; height: 3px; margin: 10px 0 0 auto; background: var(--rk-linie); opacity: .85; }
.kp-rz-untertitel { font-family: var(--font-body); font-style: italic; font-size: 16px; text-align: right; color: var(--fg-3); margin: 10px 0 0; }
.kp-rz-tiles { margin: 24px 0 30px; }
.kp-rz-tiles.kp-tiles { grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); }

.kp-portion-stepper { display: flex; align-items: center; gap: 8px; }
.kp-portion-btn {
  width: 24px; height: 24px; flex: 0 0 auto; padding: 0; border: 1px solid var(--ink-line); border-radius: var(--r-sm);
  background: none; color: var(--fg-1); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.kp-portion-btn:hover { border-color: var(--gold-deep); color: var(--gold); }
.kp-portion-input {
  width: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--ink-line); background: none;
  color: var(--fg-1); font-family: var(--font-display); font-size: 24px; text-align: center; -moz-appearance: textfield;
}
.kp-portion-input::-webkit-outer-spin-button, .kp-portion-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kp-portion-input:focus { outline: none; border-bottom-color: var(--gold-deep); }

.kp-rz-abschnitt { margin-bottom: 20px; }
.kp-rz-abschnitt-titel { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.kp-rz-tabelle { width: 100%; border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; }
.kp-rz-tabelle td { padding: 10px 14px; vertical-align: middle; font-family: var(--font-body); font-size: 15.5px; color: var(--rk-text); }
.kp-rz-menge { width: 26%; background: var(--rk-zutat); border-left: 3px solid var(--rk-linie); color: var(--rk-text); }
.kp-rz-zutat { width: 41%; background: var(--rk-zutat); font-weight: 700; color: #1B160E; }
.kp-rz-aktion { background: var(--rk-aktion); color: var(--rk-aktion-text); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.kp-rz-aktion-inhalt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kp-rz-aktion-wort { display: block; font-weight: 600; }
.kp-rz-aktion .pk { flex: 0 0 auto; width: 26px; height: 26px; opacity: .85; }
.kp-rz-hinweis { font-family: var(--font-body); font-size: 13px; line-height: 1.4; margin-top: 4px; opacity: .82; display: block; color: var(--fg-2); }
.kp-rz .kp-rz-hinweis { color: inherit; } /* in der Rezeptkarte gilt deren eigene Farbwelt (--rk-*) */
.kp-rz-hinweis a { color: var(--gold); }
@media (max-width: 560px) {
  .kp-rz-tabelle, .kp-rz-tabelle tbody, .kp-rz-tabelle tr { display: block; width: 100%; }
  .kp-rz-menge, .kp-rz-zutat, .kp-rz-aktion { display: block; width: 100%; border-left: 0; }
  .kp-rz-menge { border-top: 3px solid var(--rk-linie); }
}
.kp-rz-quelle { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.kp-rz-notiz { margin: 22px 0 0; }
.kp-rz-notiz-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; font-style: normal; }
.kp-rz-akt { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.kp-rz-fehlt { opacity: .75; }
.kp-liste .kp-ing-amount { color: var(--gold); }

.kp-menu-karte { border: 1px solid var(--ink-line); border-radius: var(--r-md); padding: 26px 28px; margin-bottom: 20px; }
.kp-menu-karte-kopf { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.kp-menu-gaenge { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 22px; }
.kp-menu-gang { display: grid; gap: 6px; align-content: start; }
.kp-menu-gang-name { display: block; font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--fg-1); }
@media (max-width: 640px) { .kp-menu-gaenge { grid-template-columns: repeat(2,1fr); } }
.kp-menu-liste { margin-top: 22px; }

.kp-kueche-block { margin-top: 56px; }
.kp-kueche-block:first-of-type { margin-top: 0; }
.kp-kueche-block:not(:first-of-type)::before { content: ''; display: block; width: 1px; height: 36px; margin: 0 auto 34px; background: var(--ink-line); }
.kp-kueche-block-kopf { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.kp-kueche-block-kopf[hidden] { display: none; }
.kp-kochbuch { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 48px; align-items: start; }

.kp-rz-filter { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.kp-rz-filter-gang { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-rz-suche {
  flex: 0 1 260px; min-width: 180px; font-family: var(--font-body); font-size: 13px; color: var(--fg-1);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-line); padding: 6px 2px;
}
.kp-rz-suche::placeholder { color: var(--fg-3); }
.kp-rz-suche:focus { outline: none; border-bottom-color: var(--gold-deep); }

@media print {
  .kp-header, .kp-footer, .kp-mod-backbar, .kp-rz-akt, .kp-menu-akt, .kp-courses { display: none !important; }
  .kp-rz-block { border-top: 0; }
  .kp-kueche-block::before { display: none; }
  .kp-rz { break-inside: avoid; }
  .kp-portion-btn { display: none; }
  .kp-portion-input { border-bottom: 0; }
  @page { margin: 12mm; }

  /* Einzelrezept-Druck ueber den Drucken-Knopf (Klassen setzt Kochwerk.wireDrucken):
     alles ausblenden ausser dem Zielrezept, kompakt und ohne Foto/Flaechenfarben,
     damit es meist auf eine Seite passt. Tabellenspalten (Menge/Zutat/Zubereitung)
     bleiben wie gehabt, nur ohne Farbfuellung. */
  body.kp-druck-einzeln { background: #fff; }
  body.kp-druck-einzeln * { visibility: hidden; }
  body.kp-druck-einzeln .kp-druck-ziel,
  body.kp-druck-einzeln .kp-druck-ziel * { visibility: visible; }
  body.kp-druck-einzeln .kp-druck-ziel { position: absolute; left: 0; top: 0; width: 100%; }

  body.kp-druck-einzeln .kp-rz-bild { display: none !important; }
  body.kp-druck-einzeln .kp-rz-titel { font-size: 22px; text-align: left; }
  body.kp-druck-einzeln .kp-rz-regel { display: none; }
  body.kp-druck-einzeln .kp-rz-untertitel { font-size: 11px; margin-top: 4px; text-align: left; }
  body.kp-druck-einzeln .kp-card-eyebrow { color: #000; font-size: 8px; }
  body.kp-druck-einzeln .kp-rz-tiles { margin: 10px 0 14px; }
  body.kp-druck-einzeln .kp-tiles { background: none; border: 1px solid #999; }
  body.kp-druck-einzeln .kp-tile { background: none; padding: 6px 8px; }
  body.kp-druck-einzeln .kp-tile-label, body.kp-druck-einzeln .kp-tile-value { color: #000; }
  body.kp-druck-einzeln .kp-tile-value { font-size: 16px; }
  body.kp-druck-einzeln .kp-rz-abschnitt { margin-bottom: 10px; border: 1px solid #999; padding: 8px 10px; }
  body.kp-druck-einzeln .kp-rz-abschnitt-titel { font-size: 9px; color: #000; }
  body.kp-druck-einzeln .kp-rz-tabelle { border-spacing: 0; }
  body.kp-druck-einzeln .kp-rz-tabelle td {
    padding: 3px 6px; font-size: 10.5px; background: none !important; color: #000; border: 1px solid #ccc;
  }
  body.kp-druck-einzeln .kp-rz-menge { border-left: 0; }
  body.kp-druck-einzeln .kp-rz-aktion { border-radius: 0; }
  body.kp-druck-einzeln .kp-pull-quote.kp-rz-notiz { padding: 2px 0 2px 10px; margin-top: 10px; }
  body.kp-druck-einzeln .kp-pull-quote p { font-size: 11px; color: #000; }
}

/* Kochwerk — Konflikte zwischen Gerichten */
.kp-course-item.is-konflikt { border-color: var(--wine); }
.kp-course-item.is-konflikt .kp-course-item-name { color: var(--wine); }
.kp-menu-konflikt { font-family: var(--font-body); font-size: 13px; font-style: italic; color: var(--wine); margin: 10px 0 0; }

/* Rezept-Detailseite — Foto */
.kp-rz-bild { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow-md); margin-bottom: 26px; display: block; }

/* ---------- Charakterspiegel ---------- */
.kp-cs-fortschritt { height: 3px; background: var(--charcoal); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.kp-cs-fbar { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left center; transition: transform .4s var(--ease); }
.kp-cs-fmeta { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 20px; }
/* Das Bild steht unter den Antworten, nicht darueber: nur 31 der 120 Fragen
   haben eines, und ein wechselnder Bildblock oben wuerde Frage und Antworten
   bei jedem Weiterklicken verschieben. */
.kp-cs-bild { height: 320px; background: #0d0b06; border-radius: var(--r-md); margin: 26px 0 0; box-shadow: inset 0 0 34px rgba(0,0,0,.5); }
.kp-cs-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Feste Hoehen fuer Frage und Antwortknoepfe: laengster Fragetext braucht auf
   Desktop zwei Zeilen, auf Schmalformat vier — reserviert, damit die Knoepfe
   von Frage zu Frage nicht springen. */
.kp-cs-frage { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--fg-1); margin: 0 0 22px; min-height: 2.6em; }
.kp-terminal-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.kp-terminal-opt {
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--fg-1);
  background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-sm);
  padding: 14px 18px; cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.kp-terminal-opt:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); }
.kp-terminal-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kp-cs-opts { flex-direction: column; }
.kp-cs-opt { text-align: left; width: 100%; min-height: 51px; display: flex; align-items: center; }
@media (max-width: 760px) {
  .kp-cs-frage { min-height: 3.9em; }
  .kp-cs-opt { min-height: 74px; }
}
@media (max-width: 560px) {
  .kp-cs-bild { height: 220px; }
  .kp-cs-frage { min-height: 6.5em; }
  .kp-cs-opt { min-height: 96px; }
}

/* ---------- Videothek ---------- */
.kp-film-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 24px; }
.kp-film-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* Genre-Zeile: zweite, optionale Achse ueber den Zeichentrick/Realfilm-Chips —
   eigene Reihe statt gemischt in dieselbe Chip-Leiste, weil beide Achsen
   unabhaengig filtern (Medium x Genre) statt sich gegenseitig auszuschliessen. */
.kp-film-chips--genre { margin-bottom: 14px; opacity: .9; }
.kp-film-chips--genre .kp-chip { font-size: 10px; padding: 7px 12px; }
.kp-film-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.kp-film-sort select { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg-1); background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; }
.kp-film-sort select:focus { outline: none; border-color: var(--gold-deep); }

.kp-film-pdrop { position: relative; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.kp-film-pdrop summary {
  display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-sm);
  padding: 8px 12px; color: var(--fg-1); font-size: 13px; letter-spacing: 0; text-transform: none;
}
.kp-film-pdrop summary::-webkit-details-marker { display: none; }
.kp-film-pdrop summary::after { content: '▾'; margin-left: 2px; color: var(--fg-3); }
.kp-film-pdrop[open] summary::after { content: '▴'; }
.kp-film-pdrop:focus-within summary,
.kp-film-pdrop summary:hover { border-color: var(--gold-deep); }
#kp-film-pdrop-label { color: var(--gold); font-weight: 700; }
.kp-film-pdrop-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 240px; max-height: 320px;
  overflow-y: auto; background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.kp-film-pdrop-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-xs);
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg-1); cursor: pointer;
}
.kp-film-pdrop-item:hover { background: rgba(255,255,255,.05); }
.kp-film-pdrop-item--all { border-bottom: 1px solid var(--ink-line); margin-bottom: 4px; padding-bottom: 9px; font-weight: 700; }
.kp-film-pdrop-item input { accent-color: var(--gold); flex: none; }

.kp-film-regal { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr)); gap: 22px; }
.kp-film {
  display: flex; flex-direction: column; padding: 16px 16px 14px;
  background: linear-gradient(165deg,var(--charcoal),var(--ink-2));
  border: 1px solid var(--ink-line); border-radius: var(--r-md); box-shadow: var(--shadow-md);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.kp-film:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kp-film-deck { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; color: var(--gold); }
.kp-film[data-kat="realfilm"] .kp-film-deck { color: var(--fg-2); }
.kp-film-kassette { flex: none; width: 92px; }
.kp-film-kassette svg { display: block; width: 100%; height: auto; }
.kp-film-reel { transform-box: fill-box; transform-origin: center; }
.kp-film:hover .kp-film-reel { animation: kp-film-spin 3s linear infinite; }
.kp-film:hover .kp-film-reel + .kp-film-reel { animation-duration: 4.2s; }
@keyframes kp-film-spin { to { transform: rotate(360deg); } }
.kp-film-code { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--fg-3); }

.kp-film-label { position: relative; flex: 1; display: flex; flex-direction: column; background: var(--parchment); color: var(--ink-1); border-radius: var(--r-xs); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); }
.kp-film-siegel { position: absolute; top: -14px; right: -12px; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
.kp-film-meta { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sepia); margin: 0 0 10px; padding-right: 26px; }
.kp-film-titel { font-family: var(--font-display); font-weight: 600; font-size: 23px; line-height: 1.14; color: var(--ink-1); margin: 0 0 4px; }
.kp-film-orig { font-family: var(--font-body); font-style: italic; font-size: 13.5px; color: var(--sepia); margin: 0; }
.kp-film-notiz { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ink-2-fg); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--paper-line); }
.kp-film-teile-label { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sepia); margin: 12px 0 6px; padding-top: 12px; border-top: 1px solid var(--paper-line); }
.kp-film-teile { list-style: none; margin: 0; padding: 0; font-family: var(--font-body); font-size: 13px; color: var(--ink-2-fg); display: flex; flex-direction: column; gap: 3px; }
.kp-film-teile li::before { content: '·'; margin-right: 6px; color: var(--sepia); }
.kp-film-teile span { color: var(--sepia); }
.kp-film-teile li.is-ausgezeichnet { color: var(--ink-1); font-weight: 600; }
.kp-film-teil-siegel { margin-left: 6px; color: var(--gold-deep) !important; font-size: 11px; }
.kp-film-alter { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sepia); margin: 14px 0 0; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--paper-line); }
.kp-film-alter b { color: var(--ink-1); }

.kp-film-leer { grid-column: 1 / -1; padding: 44px 24px; text-align: center; font-family: var(--font-body); font-style: italic; font-size: 17px; color: var(--fg-3); border: 1px dashed var(--ink-line); border-radius: var(--r-md); }
.kp-film-fuss { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; color: var(--fg-3); margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--ink-line); max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
  .kp-film:hover { transform: none; }
  .kp-film:hover .kp-film-reel { animation: none; }
}