/* =============================================================
   Make It Film · Ratgeber
   Ruhiges Langtext-Layout auf Dunkel. Tokens kommen aus core.css,
   jede Verwendung hat einen Fallback, falls core.css fehlt.
   ============================================================= */

.rg{
  margin:0;
  background:var(--bg,#0B0B0C);
  color:var(--fg,#F3EFE8);
  font-family:var(--font,"Roboto",system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.rg *,.rg *::before,.rg *::after{box-sizing:border-box}
.rg img{max-width:100%;height:auto;display:block}
.rg a{color:inherit}

/* ---------- Meta-Zeilen ---------- */
.rg-meta{
  margin:0;
  font-size:var(--meta,.75rem);
  font-weight:500;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--fg-2,rgba(243,239,232,.6));
}

/* ---------- Kopfzeile ---------- */
.rg-hdr{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--hdr-h,72px);
  padding-inline:var(--gutter,clamp(16px,4vw,64px));
  background:rgba(11,11,12,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line,rgba(255,255,255,.08));
}
.rg-hdr__logo{display:block;flex:0 1 auto;min-width:0}
.rg-hdr__logo img{width:clamp(132px,14vw,190px)}
.rg-hdr__nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);flex:none}
.rg-hdr__link{
  font-size:.875rem;text-decoration:none;color:var(--fg-2,rgba(243,239,232,.6));
  transition:color .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
.rg-hdr__link:hover{color:var(--fg,#F3EFE8)}
.rg-hdr .btn{min-height:40px;padding:.55em 1.15em;font-size:.875rem}
/* Fallback-Button, falls core.css fehlt */
:where(.rg .btn){
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;text-decoration:none;font-weight:500;
  background:var(--btn-bg,var(--accent,#FF8900));color:var(--btn-fg,var(--bg,#0B0B0C));
}
:where(.rg .btn:not([class*="btn--"])){min-height:48px;padding:.8em 1.5em}
@media (max-width:420px){
  .rg-hdr__link{display:none}
}

/* ---------- Hauptbereich ---------- */
.rg-main{
  padding-inline:var(--gutter,clamp(16px,4vw,64px));
  padding-bottom:clamp(64px,10vw,140px);
}
.rg-article,
.rg-wide{width:100%;max-width:var(--maxw,1440px);margin-inline:auto}
.rg-article{max-width:68ch;padding-top:clamp(24px,4vw,56px)}

/* ---------- Brotkrumen ---------- */
.rg-crumbs ol{
  list-style:none;margin:0 0 clamp(32px,5vw,64px);padding:0;
  font-size:.8125rem;line-height:1.5;color:var(--fg-2,rgba(243,239,232,.6));
}
/* Fließtext statt Flex: Der Trenner hängt per geschütztem Leerzeichen am Eintrag davor
   und steht so nie allein am Zeilenanfang. Umbrochen wird nur nach dem Trenner oder im Titel. */
.rg-crumbs li{display:inline;overflow-wrap:anywhere}
.rg-crumbs li:not(:last-child)::after{content:"\00a0\00a0›";margin-right:.15em;opacity:.5}
.rg-crumbs a{text-decoration:none}
.rg-crumbs a:hover{color:var(--fg,#F3EFE8)}
.rg-crumbs [aria-current]{color:var(--fg-3,rgba(243,239,232,.38))}

/* ---------- Entwurfsvermerk ---------- */
.rg-draft{
  display:inline-block;margin:0 0 20px;
  padding:.35em .8em;border-radius:999px;
  border:1px solid var(--line-2,rgba(255,255,255,.14));
  font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2,rgba(243,239,232,.6));
}
.rg-draft--inline{margin:0;padding:.1em .6em;font-size:inherit;letter-spacing:inherit}

/* ---------- Titel ---------- */
.rg-h1{
  margin:.35em 0 .5em;
  font-size:clamp(2.1rem,5.2vw,4.4rem);
  font-weight:600;line-height:1.04;letter-spacing:-.03em;
  text-wrap:balance;hyphens:auto;overflow-wrap:break-word;
}
.rg-article__meta{display:flex;flex-wrap:wrap;gap:.4em 1.6em;overflow:hidden}
.rg-article__meta span{position:relative}
/* Punkt links vom Eintrag: am Zeilenanfang liegt er außerhalb und wird abgeschnitten */
.rg-article__meta span::before{content:"";position:absolute;left:calc(-.8em - 2px);top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--fg-3,rgba(243,239,232,.5))}

/* ---------- Kurz gesagt ---------- */
.rg-answer{
  margin:clamp(40px,6vw,72px) 0;
  padding:clamp(20px,3vw,32px) clamp(20px,3vw,36px);
  background:var(--bg-2,#131315);
  border-left:1px solid var(--accent,#FF8900);
}
.rg-answer .rg-meta{color:var(--accent,#FF8900);margin-bottom:.9em}
.rg-answer__text{
  margin:0;
  font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:400;line-height:1.5;letter-spacing:-.005em;
  color:var(--fg,#F3EFE8);text-wrap:pretty;
}

/* ---------- Inhaltsverzeichnis ---------- */
.rg-toc{margin:0 0 clamp(48px,7vw,88px);padding-top:20px;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.rg-toc ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:toc}
.rg-toc li{counter-increment:toc;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.rg-toc a{
  display:flex;gap:1.2em;padding:.75em 0;
  text-decoration:none;font-size:1rem;line-height:1.4;color:var(--fg-2,rgba(243,239,232,.6));
  transition:color .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
.rg-toc a::before{content:counter(toc,decimal-leading-zero);flex:none;font-variant-numeric:tabular-nums;color:var(--fg-3,rgba(243,239,232,.38))}
.rg-toc a:hover{color:var(--fg,#F3EFE8)}
.rg-toc a:hover::before{color:var(--accent,#FF8900)}

/* ---------- Fließtext ---------- */
.rg-body{font-size:1.15rem;line-height:1.7;color:rgba(243,239,232,.82);hyphens:auto;overflow-wrap:break-word}
.rg-body > *:first-child{margin-top:0}
.rg-body p,.rg-body ul,.rg-body ol,.rg-body blockquote{margin:0 0 1.25em}
.rg-body h2,.rg-faq h2{
  margin:2.4em 0 .7em;
  font-size:clamp(1.75rem,3.4vw,2.75rem);
  font-weight:600;line-height:1.1;letter-spacing:-.025em;
  color:var(--fg,#F3EFE8);text-wrap:balance;
  scroll-margin-top:calc(var(--hdr-h,72px) + 24px);
}
.rg-body h3{
  margin:1.8em 0 .5em;
  font-size:clamp(1.2rem,1.6vw,1.45rem);
  font-weight:400;line-height:1.3;letter-spacing:-.01em;color:var(--fg,#F3EFE8);
}
.rg-body strong{font-weight:500;color:var(--fg,#F3EFE8)}
.rg-body a{
  color:var(--fg,#F3EFE8);
  text-decoration:underline;text-decoration-color:var(--accent,#FF8900);
  text-decoration-thickness:1px;text-underline-offset:.22em;
  transition:color .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
.rg-body a:hover{color:var(--accent,#FF8900)}
.rg-body ul,.rg-body ol{padding-left:1.25em}
.rg-body li{margin-bottom:.6em;padding-left:.3em}
.rg-body ul li::marker{color:var(--accent,#FF8900)}
.rg-body ol li::marker{color:var(--fg-3,rgba(243,239,232,.38));font-variant-numeric:tabular-nums}
.rg-body blockquote{
  margin-left:0;padding-left:1.2em;border-left:1px solid var(--line-2,rgba(255,255,255,.14));
  font-size:1.25rem;font-weight:600;color:var(--fg,#F3EFE8);
}
.rg-body hr{border:0;border-top:1px solid var(--line,rgba(255,255,255,.08));margin:3em 0}

/* ---------- Fragen ---------- */
.rg-faq{margin-top:clamp(56px,8vw,104px)}
.rg-faq h2{margin-top:0}
.rg-faq__item{border-top:1px solid var(--line,rgba(255,255,255,.08))}
.rg-faq__item:last-child{border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.rg-faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:flex-start;gap:1.2em;
  padding:1.15em 0;
  font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:400;line-height:1.4;color:var(--fg,#F3EFE8);
}
.rg-faq__item summary::-webkit-details-marker{display:none}
.rg-faq__item summary::after{
  content:"+";flex:none;width:1em;text-align:center;
  font-weight:600;font-size:1.4em;line-height:1;color:var(--fg-2,rgba(243,239,232,.6));
  transition:transform .5s var(--ease,cubic-bezier(.16,1,.3,1)),color .3s;
}
.rg-faq__item[open] summary::after{transform:rotate(45deg);color:var(--accent,#FF8900)}
.rg-faq__item summary:hover::after{color:var(--accent,#FF8900)}
.rg-faq__item p{margin:0 0 1.4em;max-width:60ch;font-size:1.05rem;line-height:1.65;color:var(--fg-2,rgba(243,239,232,.6))}

/* ---------- Quellen ---------- */
.rg-sources{margin-top:clamp(48px,6vw,80px)}
.rg-sources__h,.rg-related__h{
  margin:0 0 1em;
  font-size:var(--meta,.75rem);font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:var(--fg-2,rgba(243,239,232,.6));
}
.rg-sources ol{margin:0;padding-left:1.4em;font-size:.9375rem;line-height:1.55;color:var(--fg-2,rgba(243,239,232,.6))}
.rg-sources li{margin-bottom:.55em;overflow-wrap:anywhere}
.rg-sources a{text-decoration:underline;text-decoration-color:var(--line-2,rgba(255,255,255,.14));text-underline-offset:.2em}
.rg-sources a:hover{color:var(--fg,#F3EFE8);text-decoration-color:var(--accent,#FF8900)}

/* ---------- Autor ---------- */
.rg-author{
  margin-top:clamp(48px,6vw,80px);
  padding-top:24px;
  border-top:1px solid var(--line,rgba(255,255,255,.08));
}
.rg-author__name{margin:.6em 0 .2em;font-size:1.35rem;font-weight:400;letter-spacing:-.01em}
.rg-author__role{margin:0;max-width:56ch;font-size:1rem;line-height:1.6;color:var(--fg-2,rgba(243,239,232,.6))}

/* ---------- Abschluss-CTA ---------- */
.rg-cta{
  width:100%;max-width:var(--maxw,1440px);
  margin:clamp(80px,12vw,160px) auto 0;
  padding:clamp(40px,6vw,88px) 0;
  border-top:1px solid var(--line,rgba(255,255,255,.08));
  border-bottom:1px solid var(--line,rgba(255,255,255,.08));
}
.rg-cta__h{
  margin:.4em 0 .4em;
  font-size:var(--h2,clamp(2rem,4.6vw,5rem));
  font-weight:600;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;
}
.rg-cta p:not(.rg-meta){max-width:52ch;margin:0 0 2em;font-size:1.15rem;line-height:1.6;color:var(--fg-2,rgba(243,239,232,.6))}

/* ---------- Weiterlesen ---------- */
.rg-related{width:100%;max-width:var(--maxw,1440px);margin:clamp(56px,8vw,104px) auto 0}
.rg-related ul{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.rg-related li{border-top:1px solid var(--line,rgba(255,255,255,.08))}
.rg-related a{display:flex;flex-direction:column;gap:.7em;padding:1.4em 1.4em 1.6em 0;text-decoration:none}
.rg-related__t{font-size:var(--h3,clamp(1.3rem,2vw,1.9rem));font-weight:600;line-height:1.2;letter-spacing:-.015em;text-wrap:balance;transition:color .3s}
.rg-related a:hover .rg-related__t{color:var(--accent,#FF8900)}

/* ---------- Übersicht ---------- */
.rg-index__head{padding-top:clamp(8px,2vw,24px);margin-bottom:clamp(48px,8vw,120px)}
.rg-index__h1{font-size:var(--display,clamp(2.6rem,7.2vw,8.5rem));line-height:.98;letter-spacing:-.035em;max-width:14ch}
.rg-index__lead{margin:0;max-width:46ch;font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:400;line-height:1.45;color:var(--fg-2,rgba(243,239,232,.6))}
.rg-list{list-style:none;margin:0 auto;padding:0;counter-reset:none}
.rg-list__item{border-top:1px solid var(--line,rgba(255,255,255,.08))}
.rg-list__item:last-child{border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.rg-list__link{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,4vw,72px);align-items:start;
  padding:clamp(28px,4vw,56px) 0;text-decoration:none;
}
.rg-list__nr{
  font-size:clamp(3rem,9vw,9rem);font-weight:500;line-height:.82;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--fg-3,rgba(243,239,232,.38));
  transition:color .5s var(--ease,cubic-bezier(.16,1,.3,1));
}
.rg-list__main{display:flex;flex-direction:column;gap:.8em;min-width:0}
.rg-list__t{
  font-size:clamp(1.5rem,3vw,2.75rem);font-weight:600;line-height:1.1;letter-spacing:-.025em;
  text-wrap:balance;hyphens:auto;overflow-wrap:break-word;transition:color .3s;
}
.rg-list__teaser{max-width:62ch;font-size:1.05rem;line-height:1.6;color:var(--fg-2,rgba(243,239,232,.6))}
.rg-list__link:hover .rg-list__nr{color:var(--accent,#FF8900)}
.rg-list__link:hover .rg-list__t{color:var(--fg,#F3EFE8)}
@media (max-width:600px){
  .rg-list__link{grid-template-columns:minmax(0,1fr);gap:12px}
  .rg-list__nr{font-size:3rem}
}

/* ---------- Fußzeile ---------- */
.rg-ftr{
  padding:clamp(48px,7vw,96px) var(--gutter,clamp(16px,4vw,64px)) 32px;
  border-top:1px solid var(--line,rgba(255,255,255,.08));
  background:var(--bg,#0B0B0C);
}
.rg-ftr__inner{
  max-width:var(--maxw,1440px);margin:0 auto;
  display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
}
.rg-ftr address{margin-top:1em;font-style:normal;font-size:.9375rem;line-height:1.7;color:var(--fg-2,rgba(243,239,232,.6))}
.rg-ftr a{text-decoration:none}
.rg-ftr a:hover{color:var(--fg,#F3EFE8)}
.rg-ftr__links{list-style:none;margin:1em 0 0;padding:0;font-size:.9375rem;line-height:2;color:var(--fg-2,rgba(243,239,232,.6))}
.rg-ftr__copy{max-width:var(--maxw,1440px);margin:48px auto 0;font-size:.8125rem;color:var(--fg-3,rgba(243,239,232,.38))}

/* ---------- Ohne core.css: Sprunglink verstecken ---------- */
:where(.rg .skip){position:absolute;left:16px;top:12px;transform:translateY(-200%)}
:where(.rg .skip:focus-visible){transform:none}

@media (prefers-reduced-motion:reduce){
  .rg *{transition:none!important}
}
.rg-crumbs.rg-wide{padding-top:clamp(24px,4vw,56px)}