/* Nur für den Artikel „Kinotrailer mit KI“. Alles hängt an .trl, damit
   kein anderer Seitenbereich verändert wird. Grundfarben kommen aus design.css. */

.trl {
  --gold: #e9c27a;
  --gold-hell: #f6e2b4;
  --gold-tief: #a8763a;
  --tuerkis: #6fd0c8;
  --paper: #f6f0e6;
  --ink-dunkel: #0b0d10;
  --serif: "Didot", "Bodoni 72", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.trl .article-content { width: 100%; max-width: none; }
.trl { overflow-x: clip; }
.trl .kicker { color: var(--gold); }

/* ---------- Kopf ---------- */
.trl .p-hero {
  position: relative; isolation: isolate; display: grid;
  gap: clamp(1.4rem, 3.5vw, 2.4rem) clamp(2rem, 5vw, 4rem);
  padding: clamp(7rem, 13vw, 9.5rem) 0 clamp(1.5rem, 3vw, 2.2rem);
}
.trl .p-hero::before {
  content: ""; position: absolute; z-index: -1; top: -10%; height: 100%;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(30% 50% at 12% 30%, rgba(233, 194, 122, .17), transparent 72%),
    radial-gradient(30% 45% at 90% 25%, rgba(111, 208, 200, .10), transparent 72%);
  pointer-events: none;
}
@media (min-width: 1040px) {
  .trl .p-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; }
  .trl .p-screen { grid-column: 1 / -1; }
}
@media (max-width: 1039px) {
  .trl .p-screen { order: 2; margin-top: 0; }
  .trl .p-hero-side { order: 3; }
}
.trl .p-hero-copy { display: grid; gap: 1.1rem; justify-items: start; }
.trl .p-hero h1 {
  font-size: clamp(2.8rem, 8vw, 7rem); line-height: .9; letter-spacing: -.05em;
  overflow-wrap: normal; hyphens: none; margin: 0; text-transform: none;
}
.trl .p-hero h1 .ink {
  color: transparent; display: inline-block; padding-right: .05em;
  background: linear-gradient(95deg, var(--gold-tief) 0%, var(--gold) 35%, var(--gold-hell) 70%, var(--paper) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 30px rgba(233, 194, 122, .3));
}
.trl .p-hero-side { display: grid; gap: 1.1rem; }
.trl .p-lead { font-size: clamp(1.04rem, 1.8vw, 1.22rem); color: var(--ink); margin: 0; max-width: 50ch; }
.trl .p-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.trl .p-chips li {
  display: flex; align-items: baseline; gap: .45rem; margin: 0;
  padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(20, 22, 28, .7); font-size: .8rem; color: var(--muted);
}
.trl .p-chips strong { font-family: var(--display); font-size: 1.2rem; color: var(--gold); }
.trl .p-hero .article-meta-row { margin: 0; }
.trl .p-screen { position: relative; margin-top: clamp(.5rem, 2vw, 1.5rem); }
.trl .p-screen-cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem;
  margin: .9rem .2rem 0; font-size: .78rem; letter-spacing: .04em; color: var(--muted);
}

/* ---------- Kinosaal: Leinwand und Szenen-Spur ---------- */
.trl .saal {
  position: relative; padding: clamp(.6rem, 1.6vw, 1.1rem); border-radius: 20px;
  background: linear-gradient(180deg, #0a0b0e, #050608);
  border: 1px solid var(--line-strong);
  box-shadow: 0 50px 140px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03);
}
/* Lichtkegel des Projektors hinter der Leinwand */
.trl .saal::before {
  content: ""; position: absolute; inset: -8% 4% 30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 194, 122, .35), transparent);
  filter: blur(60px); opacity: .55; transition: opacity 1.2s ease;
}
.trl .saal.laeuft::before { opacity: .9; }
.trl .leinwand { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.trl .leinwand video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
  margin: 0; border: 0; border-radius: 0; max-width: none; background: #000;
}
.trl .vorhang {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 1rem;
  border: 0; padding: 0; cursor: pointer; color: var(--paper); font: inherit;
  background: radial-gradient(60% 70% at 50% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55));
  transition: opacity .6s ease, visibility .6s;
}
.trl .vorhang-titel {
  font-family: var(--serif); font-size: clamp(1.6rem, 5.5vw, 4rem); letter-spacing: .32em; text-indent: .32em;
  text-transform: uppercase; color: transparent;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold-tief)); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .8));
}
.trl .vorhang-play {
  width: clamp(64px, 9vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(246, 240, 230, .12); border: 1px solid rgba(246, 226, 180, .6); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 0 rgba(233, 194, 122, .45); animation: puls 2.6s ease-out infinite;
  transition: transform .3s var(--ease), background .3s;
}
.trl .vorhang-play svg { width: 42%; fill: var(--gold-hell); margin-left: 8%; }
.trl .vorhang:hover .vorhang-play, .trl .vorhang:focus-visible .vorhang-play { transform: scale(1.08); background: rgba(233, 194, 122, .25); }
.trl .vorhang:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }
.trl .vorhang-hint { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(246, 240, 230, .8); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(233, 194, 122, .45); } 70% { box-shadow: 0 0 0 26px rgba(233, 194, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(233, 194, 122, 0); } }
.trl .saal.gestartet .vorhang { opacity: 0; visibility: hidden; }

.trl .spur { margin-top: clamp(.6rem, 1.4vw, .9rem); }
.trl .spur-bahn { position: relative; display: flex; gap: 3px; }
.trl .spur-szene {
  flex: var(--w) 1 0; min-width: 0; position: relative; height: clamp(44px, 6.5vw, 70px);
  padding: 0; border: 0; border-radius: 5px; overflow: hidden; cursor: pointer; background: #111;
  opacity: .5; filter: saturate(.6); transition: opacity .35s, filter .35s, transform .35s var(--ease);
}
.trl .spur-szene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; max-width: none; }
.trl .spur-szene span {
  position: absolute; left: .4rem; bottom: .3rem; right: .3rem; text-align: left; font-size: .66rem; letter-spacing: .08em;
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trl .spur-szene span b { color: var(--gold); margin-right: .35rem; font-family: var(--display); }
.trl .spur-szene:hover, .trl .spur-szene.ist-dran { opacity: 1; filter: none; }
.trl .spur-szene.ist-dran { box-shadow: inset 0 0 0 2px var(--gold); }
.trl .spur-szene:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; opacity: 1; }
.trl .spur-kopf {
  position: absolute; top: -4px; bottom: -4px; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px;
  background: var(--gold-hell); box-shadow: 0 0 12px var(--gold); pointer-events: none; border-radius: 2px;
}
.trl .spur-takt { position: relative; height: 12px; margin-top: 5px; }
.trl .spur-takt i {
  position: absolute; top: 0; left: calc(var(--t) / 30 * 100%); width: 2px; height: 6px; margin-left: -1px;
  background: rgba(233, 194, 122, .55); border-radius: 1px; transition: transform .15s, background .15s;
}
.trl .spur-takt i.gross { height: 11px; background: var(--gold); }
.trl .spur-takt i.blitz { transform: scaleY(1.8); background: var(--gold-hell); }

/* ---------- Kurzfazit, Fließtext, Kapitel ---------- */
.trl .p-takeaway {
  margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3.5vw, 2.4rem); padding: 1.2rem 1.4rem;
  border: 1px solid var(--line-strong); border-left: 4px solid var(--gold); border-radius: 12px;
  background: rgba(233, 194, 122, .06);
}
.trl .p-takeaway p { margin: 0; max-width: 78ch; }
.trl .p-prose { max-width: 72ch; }
.trl .p-prose p { margin: 0 0 1.1rem; }
.trl .jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: clamp(1.2rem, 3vw, 2rem) 0 0; padding: 0; }
.trl .jump a {
  display: inline-flex; align-items: baseline; gap: .5rem; padding: .5rem .9rem;
  border: 1px solid var(--line-strong); border-radius: 999px; font-size: .82rem; color: var(--ink);
  background: rgba(20, 22, 28, .7); text-decoration: none; transition: border-color .2s;
}
.trl .jump a b { font-family: var(--display); color: var(--gold); font-size: .72rem; letter-spacing: .1em; }
.trl .jump a:hover { border-color: var(--gold); }
.trl .p-section { margin-top: clamp(3rem, 7vw, 5.5rem); scroll-margin-top: 90px; }
.trl .p-h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem); letter-spacing: -.04em; line-height: 1; margin: .3rem 0 1rem;
  text-transform: none; max-width: 22ch;
}
.trl .p-intro { max-width: 70ch; color: var(--muted); margin: 0 0 1.6rem; }
.trl .p-intro em { color: var(--ink); font-style: normal; }

/* ---------- Szenen ---------- */
.trl .szenen { display: grid; gap: clamp(2.4rem, 6vw, 4.2rem); }
.trl .szene { display: grid; gap: 1.2rem 2.4rem; scroll-margin-top: 90px; }
@media (min-width: 960px) {
  .trl .szene { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
  .trl .szene:nth-child(even) .szene-bild { order: 2; }
}
.trl .szene-bild {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000;
  border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.trl .szene-bild img, .trl .szene-bild video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  margin: 0; border: 0; border-radius: 0; max-width: none; transition: opacity .6s ease;
}
.trl .szene-bild video { opacity: 0; }
.trl .szene-bild[data-mode="clip"] video { opacity: 1; }
.trl .szene-bild[data-mode="clip"] img { opacity: 0; }
.trl .szene-schalter {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 2; display: flex; padding: 3px; gap: 2px;
  border-radius: 999px; background: rgba(7, 9, 12, .78); backdrop-filter: blur(8px); border: 1px solid var(--line-strong);
}
.trl .szene-schalter button {
  padding: .4rem .85rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: .74rem; letter-spacing: .06em; cursor: pointer; transition: background .25s, color .25s;
}
.trl .szene-schalter button[aria-pressed="true"] { background: var(--gold); color: var(--ink-dunkel); font-weight: 600; }
.trl .szene-schalter button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.trl .szene-n { margin: 0 0 .3rem; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.trl .szene-n span { display: block; margin-top: .6rem; font-family: inherit; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; -webkit-text-stroke: 0; color: var(--muted); }
.trl .szene-text h3 { margin: 0 0 .7rem; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.03em; text-transform: none; }
.trl .szene-text > p { margin: 0 0 1rem; max-width: 58ch; }
.trl .szene-fakten { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.trl .szene-fakten div { padding: .45rem .8rem; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(20, 22, 28, .7); }
.trl .szene-fakten dt { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.trl .szene-fakten dd { margin: 0; font-size: .88rem; }
.trl .szene-prompt { border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(20, 22, 28, .6); }
.trl .szene-prompt summary { cursor: pointer; padding: .75rem 1rem; font-size: .86rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.trl .szene-prompt summary::-webkit-details-marker { display: none; }
.trl .szene-prompt summary::after { content: "+"; color: var(--gold); }
.trl .szene-prompt[open] summary::after { content: "–"; }
.trl .szene-prompt .prompt-box { padding: 0 1rem 1rem; }

/* ---------- Prompt-Kasten ---------- */
.trl .prompt-box .mono, .trl .mono { font-family: var(--mono); font-size: clamp(.8rem, 1.3vw, .88rem); line-height: 1.65; }
.trl .prompt-box .mono { margin: 0 0 .9rem; color: var(--muted); }
.trl .k-btn {
  display: inline-flex; align-items: center; padding: .55rem 1.1rem; border-radius: 999px; border: 0; font: inherit; font-size: .84rem;
  font-weight: 600; cursor: pointer; background: var(--gold); color: var(--ink-dunkel); text-decoration: none; transition: transform .2s, background .2s;
}
.trl .k-btn:hover { transform: translateY(-1px); }
.trl .k-btn.ok { background: #8fb58a; }
.trl .k-btn:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 2px; }

/* ---------- Baukasten ---------- */
.trl .bau { display: grid; gap: 1.4rem 2.2rem; }
@media (min-width: 1000px) { .trl .bau { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
.trl .bau-liste { display: grid; gap: .6rem; }
.trl .bau-btn {
  text-align: left; width: 100%; display: grid; gap: .3rem; padding: .85rem 1rem;
  border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(20, 22, 28, .6);
  color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, background .2s;
}
.trl .bau-btn .t { display: flex; gap: .7rem; align-items: baseline; font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.trl .bau-btn .t b { color: var(--gold); font-size: .72rem; letter-spacing: .12em; }
.trl .bau-btn .d { display: none; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.trl .bau-btn[aria-pressed="true"] { border-color: var(--gold); background: rgba(233, 194, 122, .09); }
.trl .bau-btn[aria-pressed="true"] .d { display: block; }
.trl .bau-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 1000px) { .trl .bau-prompt { position: sticky; top: 90px; } }
.trl .prompt-box.gross {
  padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: 14px; border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, rgba(20, 22, 28, .95), rgba(10, 11, 14, .95)); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.trl .prompt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.trl .prompt-box.gross .mono { color: var(--ink); font-size: clamp(.86rem, 1.5vw, .98rem); margin: 0; }
.trl #bau-text span { border-radius: 4px; padding: .05em .1em; transition: background .35s, color .35s, opacity .35s; }
.trl #bau-text.hat-auswahl span { opacity: .35; }
.trl #bau-text.hat-auswahl span.an { opacity: 1; background: rgba(233, 194, 122, .2); color: var(--gold-hell); box-shadow: 0 0 0 1px rgba(233, 194, 122, .45); }
.trl .recipe-badge { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: .3rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--gold); }
.trl .einstellungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0 0; }
.trl .einstellungen div { padding: .55rem .75rem; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(20, 22, 28, .6); }
.trl .einstellungen dt { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.trl .einstellungen dd { margin: .1rem 0 0; font-family: var(--display); font-weight: 600; font-size: .95rem; }

/* ---------- Wellenform ---------- */
.trl .welle-wrap { margin: 0 0 2rem; }
.trl .welle {
  position: relative; height: clamp(110px, 16vw, 170px); padding: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, #0c0d11, #07080a);
}
.trl .welle svg { position: absolute; inset: 10px 8px; width: calc(100% - 16px); height: calc(100% - 20px); }
.trl .welle rect.bar { fill: rgba(246, 240, 230, .16); }
.trl .welle rect.bar.drin { fill: var(--gold); }
.trl .welle rect.zone { fill: rgba(233, 194, 122, .09); stroke: rgba(233, 194, 122, .5); stroke-width: 1; }
.trl .welle-marken { position: relative; height: 3.4rem; margin-top: .4rem; }
.trl .marke {
  position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-12px);
  display: grid; justify-items: start; gap: .1rem; padding: .3rem .55rem .3rem 1.1rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; font-size: .74rem; cursor: pointer; white-space: nowrap; text-align: left;
}
.trl .marke::before { content: ""; position: absolute; left: 11px; top: -.4rem; width: 1px; height: 1rem; background: var(--gold); }
.trl .marke b { color: var(--gold-hell); font-family: var(--display); font-size: .82rem; }
.trl .marke:hover, .trl .marke:focus-visible { color: var(--ink); background: rgba(233, 194, 122, .1); outline: none; }
.trl .marke.rechts { transform: translateX(calc(-100% + 12px)); padding: .3rem 1.1rem .3rem .55rem; justify-items: end; text-align: right; }
.trl .marke.rechts::before { left: auto; right: 11px; }
/* Zwei Marken liegen dicht beieinander: die zweite eine Zeile tiefer */
.trl .welle-marken:has(.tief) { height: 5.6rem; }
.trl .marke.tief { top: 2.4rem; }
.trl .marke.tief::before { top: -2.8rem; height: 3.4rem; }
.trl .welle-wrap figcaption { margin: .5rem .2rem 0; font-size: .82rem; color: var(--muted); max-width: 80ch; }
@media (max-width: 700px) {
  .trl .welle-marken { height: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
  .trl .marke, .trl .marke.rechts { position: static; transform: none; padding: .4rem .7rem; border: 1px solid var(--line-strong); justify-items: start; text-align: left; }
  .trl .marke::before { display: none; }
  .trl .welle-marken:has(.tief) { height: auto; }
  .trl .marke.tief { top: auto; }
}

/* ---------- Rezept (Suno) ---------- */
.trl .recipe {
  border-radius: 8px; background: var(--paper); color: var(--ink-dunkel);
  border: 1px solid #86704f; box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 0 0 6px var(--paper), inset 0 0 0 7px #86704f;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.trl .recipe .recipe-badge { color: var(--ink-dunkel); border-color: #86704f; }
.trl .recipe-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.trl .recipe-top.zwei { margin-top: 1.4rem; margin-bottom: .5rem; }
.trl .recipe-label { margin: 0 0 .4rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #6b5532; }
.trl .recipe-top .recipe-label { margin: 0; }
.trl .recipe-text p { margin: 0; color: var(--ink-dunkel); }
.trl .recipe .k-btn { background: var(--ink-dunkel); color: var(--paper); }
.trl .recipe .k-btn.ok { background: #3d6b3a; }
.trl .mix-note { margin: 1rem .1rem 0; font-size: .86rem; color: var(--muted); max-width: 74ch; }

/* ---------- Karten, Rechnung ---------- */
.trl .truths { display: grid; gap: 1rem; }
@media (min-width: 800px) { .trl .truths { grid-template-columns: repeat(2, 1fr); } }
.trl .truth { padding: 1.2rem 1.3rem; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(20, 22, 28, .7); }
.trl .truth .k { margin: 0 0 .3rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.trl .truth h3 { margin: 0 0 .5rem; font-size: 1.15rem; text-transform: none; letter-spacing: -.02em; }
.trl .truth p { margin: 0; color: var(--muted); font-size: .96rem; }
.trl .truths.vier .truth { border-top: 3px solid var(--gold); }
.trl .rechnung {
  margin-top: 1.6rem; max-width: 760px; padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: 14px;
  border: 1px solid var(--line-strong); background: linear-gradient(160deg, rgba(233, 194, 122, .08), rgba(20, 22, 28, .7));
}
.trl .rechnung-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
.trl .rechnung-kopf .kicker { margin: 0; }
.trl .rechnung-summe { margin: 0; font-family: var(--display); font-size: 1rem; color: var(--muted); }
.trl .rechnung-summe b { font-size: clamp(2.2rem, 5vw, 3rem); color: var(--gold); letter-spacing: -.04em; margin-right: .3rem; }
.trl .rechnung ul { list-style: none; margin: 1rem 0; padding: 0; display: grid; }
.trl .rechnung li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--line-strong); margin: 0; }
.trl .rechnung li span { color: var(--muted); }
.trl .rechnung li b { font-family: var(--display); white-space: nowrap; }
.trl .rechnung-note { margin: 0; font-size: .86rem; color: var(--muted); }

/* ---------- Schritte, Tipp, Fragen, Fazit ---------- */
.trl .steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 76ch; }
.trl .steps li { position: relative; padding: .2rem 0 .2rem 3.6rem; margin: 0; }
.trl .steps li::before {
  content: attr(data-n); position: absolute; left: 0; top: 0; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 50%; font-family: var(--display); font-weight: 700; color: var(--gold);
}
.trl .steps h3 { margin: 0 0 .15rem; font-size: 1.05rem; text-transform: none; letter-spacing: -.01em; }
.trl .steps p { margin: 0; color: var(--muted); }
.trl .p-tip { margin-top: 1.4rem; padding: 1.1rem 1.3rem; border: 1px dashed var(--line-strong); border-radius: 12px; max-width: 78ch; }
.trl .p-tip p { margin: 0 0 .7rem; color: var(--muted); }
.trl .p-tip p:last-child { margin: 0; }
.trl .p-tip strong { color: var(--ink); }
.trl .faq { display: grid; gap: .6rem; max-width: 84ch; }
.trl .faq details { border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(20, 22, 28, .7); padding: 0 1.1rem; }
.trl .faq summary { cursor: pointer; padding: 1rem 0; font-family: var(--display); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.trl .faq summary::-webkit-details-marker { display: none; }
.trl .faq summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; line-height: 1; }
.trl .faq details[open] summary::after { content: "–"; }
.trl .faq p { margin: 0 0 1rem; color: var(--muted); }
.trl .p-outro { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(1.6rem, 4vw, 2.6rem); border-top: 1px solid var(--line-strong); }
.trl .p-outro h2 { text-transform: none; font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -.04em; line-height: 1; margin: .3rem 0 1rem; max-width: 24ch; }
.trl .p-outro p { max-width: 68ch; color: var(--muted); }
.trl .p-outro .big { margin: 1.6rem 0 0; font-family: var(--serif); font-weight: 400; letter-spacing: .02em; font-size: clamp(1.7rem, 4.4vw, 2.8rem); color: var(--ink); }
.trl .p-outro .big span { color: var(--gold); }
.trl .article-related { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ---------- Einblenden beim Scrollen ---------- */
.trl .pre { opacity: 0; transform: translateY(26px); }
.trl .pre.in { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s var(--ease); }

@media (max-width: 560px) {
  .trl .vorhang { gap: .55rem; }
  .trl .vorhang-titel { font-size: 1.05rem; letter-spacing: .22em; text-indent: .22em; white-space: nowrap; }
  .trl .vorhang-play { width: 54px; }
  .trl .vorhang-hint { font-size: .6rem; }
  .trl .einstellungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trl .spur-szene span { font-size: 0; }
  .trl .spur-szene span b { font-size: .66rem; margin: 0; }
  .trl .rechnung li { flex-direction: column; gap: .1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .trl .vorhang-play { animation: none; }
  .trl .szene-bild img, .trl .szene-bild video, .trl .pre.in { transition: none; }
}