:root {
    --bg:        #F5F5F7;
    --panel:     #FFFFFF;
    --line:      #E5E5EA;
    --ink:       #1D1D1F;
    --muted:     #6E6E73;
    --faint:     #AEAEB2;

    --red:        #E63946;
    --green:      #28A060;
    --yellow:     #C89E00;
    --blue:       #2C72D4;
    --white-r:    #8A9BAD;
    --copper:     #B8692E;
    --cyan:       #0A7EA4;
    --steel:      #6B7280;

    --sen-crimson:#9B1C2E;
    --sen-navy:   #1E3358;
    --sen-olive:  #4E5A1E;
    --sen-sand:   #9A7A3A;
    --sen-silver: #5A6270;
    --sen-indigo: #4A35A0;

    --purple:     #6B3FA0;
    --fell:       #4A1D6E;
    --gold-accent:#8a6d1f;

    --radius: 10px;
    --sidebar: 260px;

    --shadow-card: 0 1px 2px rgba(20,20,30,.04);
    --shadow-hover: 0 10px 30px -12px rgba(20,20,30,.18);
  }

  html.dark {
    --bg:        #0B0C10;
    --panel:     #16171D;
    --line:      #2A2C34;
    --ink:       #F1F1F3;
    --muted:     #A3A3AC;
    --faint:     #6F707A;

    --red:        #FF5D6C;
    --green:      #3ED690;
    --yellow:     #E8C441;
    --blue:       #5B9BFF;
    --white-r:    #B7C2CE;
    --copper:     #E0955A;
    --cyan:       #35D2E8;
    --steel:      #9AA1AE;

    --sen-crimson:#F0596E;
    --sen-navy:   #6E93DE;
    --sen-olive:  #A6C24A;
    --sen-sand:   #D9B679;
    --sen-silver: #AEB6C4;
    --sen-indigo: #9C87F0;

    --purple:     #A683DE;
    --fell:       #C77DFF;
    --gold-accent:#E4BE5C;

    --shadow-card: 0 1px 2px rgba(0,0,0,.5);
    --shadow-hover: 0 16px 40px -14px rgba(0,0,0,.6);

    color-scheme: dark;
  }

  * , *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 20px; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background-color .25s ease, color .25s ease;
  }
  a { color: var(--cyan); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* ---------- layout ---------- */
  .shell { display: flex; align-items: flex-start; }

  .sidebar {
    width: var(--sidebar); flex: none;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 26px 20px 40px;
    transition: background-color .25s ease, border-color .25s ease;
  }
  .sidebar .brand { margin-bottom: 24px; }
  .brand-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .sidebar .brand .logo {
    font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--ink); line-height: 1.1;
  }
  .sidebar .brand .sub {
    font-size: 10px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--faint); margin-top: 4px;
  }
  .theme-toggle {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 15px; line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
  }
  .theme-toggle:hover { transform: scale(1.08); border-color: var(--cyan); }
  .nav-group { margin-bottom: 4px; }
  .nav-group > a {
    display: block; padding: 7px 10px; border-radius: 7px;
    color: var(--ink); font-weight: 600; font-size: .92rem;
  }
  .nav-group > a:hover { background: var(--bg); text-decoration: none; }
  .nav-sub { margin: 2px 0 8px 10px; padding-left: 10px; border-left: 1px solid var(--line); }
  .nav-sub a {
    display: block; padding: 4px 10px; border-radius: 6px;
    color: var(--muted); font-size: .84rem;
  }
  .nav-sub a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }

  .content {
    flex: 1 1 auto; min-width: 0;
    max-width: 860px; margin: 0 auto;
    padding: 40px 40px 80px;
  }

  /* mobile nav toggle */
  .topbar { display: none; }

  @media(max-width: 900px) {
    .sidebar {
      position: fixed; z-index: 50; left: 0; top: 0;
      transform: translateX(-100%); transition: transform .2s ease;
      box-shadow: 0 0 40px rgba(0,0,0,.15);
    }
    .sidebar.open { transform: translateX(0); }
    .topbar {
      display: flex; align-items: center; gap: 14px;
      position: sticky; top: 0; z-index: 40;
      background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
      padding: 12px 18px;
    }
    html.dark .topbar { background: rgba(11,12,16,.85); }
    .topbar .menu-btn {
      font-size: 1.3rem; background: none; border: none; cursor: pointer; color: var(--ink);
      line-height: 1;
    }
    .topbar .t-title { font-weight: 700; font-size: 1rem; }
    .content { padding: 24px 20px 70px; }
    .scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 45; }

    /* lightbox */
    .lightbox {
      display:none; position:fixed; inset:0; z-index:200;
      background:rgba(20,20,22,.92);
      align-items:center; justify-content:center;
      padding:32px;
    }
    .lightbox.open { display:flex; }
    .lightbox img {
      max-width:min(92vw, 720px); max-height:88vh;
      width:auto; height:auto;
      border-radius:10px;
      box-shadow:0 20px 60px rgba(0,0,0,.5);
    }
    .lightbox .lb-close {
      position:fixed; top:18px; right:22px;
      width:36px; height:36px; border-radius:50%;
      background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
      color:#fff; font-size:18px; line-height:1;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
    }
    .lightbox .lb-close:hover { background:rgba(255,255,255,.22); }
    .rimg, .imgslider img { cursor:zoom-in; }
    .scrim.open { display: block; }
  }

  /* ---------- typography ---------- */
  .page-hero { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 34px; transition: border-color .25s ease; }
  .page-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700;
    letter-spacing: -.03em; margin: 0 0 10px; line-height: 1;
    color: var(--ink);
    background: linear-gradient(100deg, var(--ink) 30%, var(--cyan) 78%, var(--copper) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .page-hero .tagline { color: var(--muted); font-size: 1.05rem; max-width: 640px; margin: 0; }

  .hero-quickref { margin-top: 18px; }
  .qr-group { margin-bottom: 16px; }
  .qr-group:last-child { margin-bottom: 0; }
  .qr-group > .eyebrow { margin-bottom: 8px; }
  .ranger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }

  .rchip {
    position: relative; overflow: hidden;
    display: block; border-radius: 10px; padding: 9px 11px 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--panel)), var(--panel) 65%);
    border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line));
    text-decoration: none;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .rchip::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, white));
  }
  .rchip::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--c) 22%, transparent) 48%, transparent 66%);
    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events: none;
  }
  .rchip:hover { transform: translateY(-3px); border-color: var(--c); text-decoration: none; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--c) 60%, transparent); }
  .rchip:hover::after { transform: translateX(120%); }
  .rchip .rc-name { display: block; font-weight: 700; font-size: .9rem; color: var(--c); margin-bottom: 3px; letter-spacing: -.01em; }
  .rchip .rc-meta { display: block; font-size: .72rem; color: var(--muted); line-height: 1.35; }

  .cat { padding-top: 8px; margin-bottom: 46px; }
  .cat > h2 {
    font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em;
    margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--ink);
  }
  .cat > .cat-intro { color: var(--muted); font-size: .95rem; margin: 12px 0 24px; }

  h3.sub {
    font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
    margin: 34px 0 6px; padding-top: 6px;
  }
  h4.subsub { font-size: .98rem; font-weight: 700; margin: 20px 0 4px; }
  p { margin: 0 0 14px; }
  .eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); display: block;
  }
  .lead { font-size: 1rem; }
  .muted { color: var(--muted); }
  b, strong { font-weight: 600; }

  /* ---------- components ---------- */
  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px; margin: 0 0 14px;
    box-shadow: var(--shadow-card);
    transition: background-color .25s ease, border-color .25s ease, box-shadow .2s ease, transform .2s ease;
  }
  .card.accent { border-left: 4px solid var(--c, var(--cyan)); }
  .card.accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }

  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media(max-width:620px){ .grid2 { grid-template-columns: 1fr; } }

  .callout {
    border-left: 3px solid var(--c, var(--cyan));
    background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0;
    padding: 14px 18px; margin: 0 0 16px;
    box-shadow: var(--shadow-card);
    transition: background-color .25s ease, border-color .25s ease;
  }
  .callout .eyebrow { margin-bottom: 6px; color: var(--c, var(--cyan)); }

  table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 6px 0 18px; }
  table.wrap-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: background-color .25s ease, border-color .25s ease; }
  th {
    text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--faint);
    padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg);
  }
  td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
  tr:last-child td { border-bottom: none; }
  .tbl-scroll { overflow-x: auto; }

  ul.clean { margin: 0 0 16px; padding-left: 0; list-style: none; }
  ul.clean li { padding-left: 18px; position: relative; margin-bottom: 7px; color: var(--muted); }
  ul.clean li::before { content: "–"; position: absolute; left: 0; color: var(--faint); }
  ul.clean li b { color: var(--ink); }

  ol.steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; }
  ol.steps li {
    counter-increment: s; padding-left: 34px; position: relative; margin-bottom: 12px; color: var(--muted);
  }
  ol.steps li::before {
    content: counter(s); position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--c, var(--cyan)); color: #fff;
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  ol.steps li b { color: var(--ink); }

  .pill {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 4px; vertical-align: middle;
  }
  .pill.ph { color: #7A5C00; background: #FFF0B0; }
  .pill.wip { color: #8a5a00; background: #FFE4C0; }

  .dot {
    display: inline-block; width: 11px; height: 11px; border-radius: 50%;
    background: var(--c); vertical-align: middle; margin-right: 5px;
  }

  .swatch-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
  .chip {
    font-size: 11px; font-weight: 600; border: 1px solid var(--line);
    border-radius: 20px; padding: 3px 10px; color: var(--muted);
  }

  /* prompt disclosure */
  .prompt-box { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-card); transition: background-color .25s ease, border-color .25s ease; }
  .prompt-box summary {
    list-style: none; cursor: pointer; padding: 13px 16px;
    display: flex; align-items: center; gap: 10px;
    font-size: .9rem; font-weight: 600; user-select: none;
  }
  .prompt-box summary::-webkit-details-marker { display: none; }
  .prompt-box summary::before { content: "▸"; color: var(--cyan); transition: transform .15s ease; }
  .prompt-box[open] summary::before { transform: rotate(90deg); }
  .prompt-box summary .tag { margin-left: auto; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
  .prompt-body { border-top: 1px solid var(--line); padding: 14px 16px; }
  .copy-btn {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    color: #fff; background: var(--cyan); border: none; border-radius: 6px;
    padding: 7px 14px; cursor: pointer; margin-bottom: 12px; font-family: inherit;
  }
  .copy-btn:hover { background: #096a8a; }
  .copy-btn.copied { background: var(--green); }
  .prompt-body pre {
    margin: 0; padding: 14px; background: var(--bg); border: 1px solid var(--line);
    border-radius: 8px; font-family: "SF Mono","Fira Code",monospace; font-size: 12px;
    line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; max-height: 320px; overflow-y: auto;
  }

  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  .logo-banner{ display:block; width:100%; max-width:720px; height:auto; border-radius:var(--radius); margin:0 0 24px; border:1px solid var(--line); }

  .rcard{ display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:start; }
  @media(max-width:560px){ .rcard{ grid-template-columns:110px 1fr; gap:14px; } }
  .rcard .rimg{ width:100%; border-radius:8px; border:1px solid var(--line); background:#fbfbfd; display:block; box-shadow:var(--shadow-card); transition: border-color .25s ease, box-shadow .2s ease; }
  .rimg-wrap{ display:flex; flex-direction:column; gap:6px; }
  .rimg-link{
    display:inline-flex; align-items:center; gap:4px;
    font-size:11px; font-weight:600; color:var(--muted);
    cursor:pointer; user-select:none; width:fit-content;
  }
  .rimg-link:hover{ color:var(--cyan); text-decoration:underline; }
  .bginfo{ display:inline-block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; color:var(--fell); background:color-mix(in srgb, var(--fell) 12%, var(--panel)); border:1px solid color-mix(in srgb, var(--fell) 30%, var(--line)); border-radius:4px; padding:1px 6px; margin:0 2px; white-space:nowrap; }

  /* ---------- Story im Detail: Staffel-Blöcke & Episoden-Akkordeon ---------- */
  .season-block{
    border-radius:16px; padding:22px 24px 20px; margin-bottom:30px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--sc, var(--red)) 10%, var(--panel)), var(--panel) 65%);
    border:1px solid color-mix(in srgb, var(--sc, var(--red)) 28%, var(--line));
    transition: background-color .25s ease, border-color .25s ease;
  }
  .season-block .season-eyebrow{
    font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
    color: var(--sc, var(--red));
  }
  .season-block h4{
    margin:6px 0 4px; font-size:1.3rem; letter-spacing:-.01em;
    background: linear-gradient(95deg, var(--ink) 25%, var(--sc, var(--red)) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .season-block .season-premise{ color:var(--muted); font-size:.92rem; margin:0 0 16px; max-width:760px; }

  .ep-list{ display:flex; flex-direction:column; gap:9px; }
  .ep-item{
    border-radius:12px; overflow:hidden;
    background: var(--panel); border:1px solid var(--line);
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .ep-item:hover{ border-color: color-mix(in srgb, var(--sc, var(--red)) 45%, var(--line)); }
  .ep-item[open]{ box-shadow: var(--shadow-hover); }
  .ep-item summary{
    cursor:pointer; list-style:none; padding:11px 14px;
    display:flex; align-items:center; gap:11px; flex-wrap:wrap;
    -webkit-tap-highlight-color:transparent;
  }
  .ep-item summary::-webkit-details-marker{ display:none; }
  .ep-item summary::marker{ content:""; }
  .ep-num{
    font-weight:800; font-size:.72rem; color:#fff; letter-spacing:.02em;
    background: var(--sc, var(--red)); border-radius:6px; padding:3px 8px; white-space:nowrap; flex:none;
  }
  .ep-title{ font-weight:700; font-size:.92rem; flex:1 1 160px; min-width:120px; }
  .ep-chevron{ color:var(--faint); font-size:.7rem; transition: transform .2s ease; flex:none; margin-left:auto; }
  .ep-item[open] .ep-chevron{ transform: rotate(180deg); }
  .ep-tags{ display:flex; gap:5px; flex-wrap:wrap; width:100%; order:5; margin-top:2px; }
  .ep-tag{
    font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap;
    background: color-mix(in srgb, var(--tc) 15%, var(--panel));
    border:1px solid color-mix(in srgb, var(--tc) 45%, var(--line));
    color: color-mix(in srgb, var(--tc) 78%, var(--ink));
  }
  .ep-body{
    padding:0 14px 14px 14px; margin-top:-2px;
    border-top:1px solid var(--line);
  }
  .ep-body p{ margin:12px 0 0; font-size:.88rem; line-height:1.65; }

  /* image slider */
  .imgslider{ position:relative; width:100%; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#fbfbfd; box-shadow:var(--shadow-card); transition: border-color .25s ease; }
  .imgslider .slides{ position:relative; width:100%; }
  .imgslider img{ width:100%; display:block; }
  .imgslider img.slide-b{ position:absolute; top:0; left:0; opacity:0; pointer-events:none; transition:opacity .6s ease; }
  .imgslider img.slide-a{ opacity:1; transition:opacity .6s ease; }
  .imgslider.show-b img.slide-a{ opacity:0; pointer-events:none; }
  .imgslider.show-b img.slide-b{ opacity:1; pointer-events:auto; }
  .slider-controls{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; }
  .slider-controls .playbtn{
    width:24px; height:24px; border-radius:50%;
    background:var(--panel); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:10px; color:var(--ink); padding:0; line-height:1;
  }
  .slider-controls .playbtn:hover{ background:var(--bg); }
  .slider-controls .dots{ display:flex; gap:5px; }
  .slider-controls .dots span{ width:5px; height:5px; border-radius:50%; background:var(--line); display:block; }
  .imgslider.show-b + .slider-controls .dots span:first-child{ background:var(--faint); }
  .imgslider:not(.show-b) + .slider-controls .dots span:last-child{ background:var(--faint); }