:root{
  --base-size:16px;
  --bg:#0b0b0c;--fg:#eaeaea;--muted:#a6a6a6;
  --link:#7cc6ff;--accent:#8ad4c1;
  --card:#141416;--shadow:rgba(0,0,0,.4);
}
.light{
  --bg:#f8f9fb;--fg:#111216;--muted:#5b6069;
  --link:#0066cc;--accent:#0aaa84;
  --card:#ffffff;--shadow:rgba(0,0,0,.08);
}
html{scroll-behavior:smooth}
body{
  margin:0;padding:2.5rem 1.25rem 6rem;
  font:var(--base-size)/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  background:var(--bg);color:var(--fg);
  transition:background .25s,color .25s
}
main{max-width:820px;margin:0 auto}
h1{text-align:center;font-weight:650;letter-spacing:.2px;margin:4rem 0 2rem}
h2{font-size:1.35rem;margin:2rem 0 .6rem;text-align:left;position:relative}
h2 .permalink{opacity:.6;margin-left:.5rem;font-size:.95rem;text-decoration:none;user-select:none}
h2 .permalink:hover{opacity:1}
p{margin:.65rem 0}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
blockquote{
  margin:1rem 0;padding:.75rem 1rem;border-left:3px solid var(--accent);
  background:color-mix(in oklab,var(--card) 92%,var(--bg));color:var(--fg);border-radius:.5rem
}
section{
  position:relative;background:var(--card);
  padding:1.1rem 1.1rem 1.2rem;border-radius:14px;box-shadow:0 8px 22px var(--shadow);
  margin:1.1rem 0;opacity:0;transform:translateY(10px);
  transition:opacity .5s,transform .5s;break-inside:avoid-page
}
section.reveal{opacity:1;transform:translateY(0)}
.no-js section,.no-js #tocWrap{opacity:1!important;transform:none!important}
.no-js .controls{display:none!important}

/* Intro */
.intro{
  background:linear-gradient(135deg,color-mix(in oklab,var(--card) 88%,var(--bg)),var(--card));
  padding:1.25rem 1.1rem;border-radius:16px;box-shadow:0 10px 26px var(--shadow);
  margin-top:2rem;margin-bottom:1.25rem;position:relative;overflow:hidden;
  opacity:0;transform:translateY(6px) scale(.995);transition:opacity .5s,transform .5s;
  animation:introFade .6s ease both
}
.intro.shown{opacity:1;transform:none}
.intro::before,.intro::after{
  content:"“";position:absolute;font-size:clamp(56px,12vw,120px);line-height:1;
  color:color-mix(in oklab,var(--fg) 14%, transparent);pointer-events:none;user-select:none
}
.intro::before{content:"„";left:.6rem;top:.3rem;transform:translateY(-5%)}
.intro::after{content:"“";right:.6rem;bottom:-.2rem;transform:translateY(5%) rotate(180deg);opacity:.9}
@keyframes introFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* TOC */
#tocWrap{background:var(--card);padding:1rem;border-radius:14px;box-shadow:0 8px 22px var(--shadow);margin:1.1rem 0 1.4rem}
#tocWrap h2{margin-top:.4rem}
#toc{margin:.6rem 0 0;padding-left:1rem;line-height:1.4}
#toc li{margin:.25rem 0;display:flex;align-items:center;gap:.5rem}
#toc li a{flex:1 1 auto;display:block;padding:.15rem .35rem;border-radius:8px}
#toc li a:hover{background:color-mix(in oklab,var(--fg) 8%, transparent);text-decoration:none}
#toc li.active a{
  background:color-mix(in oklab,var(--accent) 22%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 45%, var(--bg))
}
#toc li .copylink{
  font-size:.85rem;opacity:.7;border:1px solid color-mix(in oklab,var(--fg) 18%, var(--bg));
  background:var(--card);color:var(--fg);border-radius:8px;padding:.05rem .4rem;cursor:pointer
}
#toc li .copylink:hover{opacity:1}
#tocToggle{margin-top:.4rem}
#tocSearch{width:100%;margin:.6rem 0 .3rem;padding:.55rem .7rem;border-radius:10px;
  border:1px solid color-mix(in oklab,var(--fg) 18%, var(--bg));background:var(--bg);color:var(--fg)}
#indexAZ{background:var(--card);padding:.7rem 1rem .9rem;border-radius:12px;box-shadow:0 8px 22px var(--shadow);margin:.8rem 0 1.2rem}
#indexAZ .letters{display:flex;flex-wrap:wrap;gap:.35rem .45rem}
#indexAZ .letters button{
  border:1px solid color-mix(in oklab,var(--fg) 18%, var(--bg));background:var(--card);color:var(--fg);
  padding:.25rem .45rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:.95rem
}
#indexAZ .letters button.dim{opacity:.45}
#indexAZ .letters button.active{outline:2px solid var(--accent)}

/* Controls */
.controls{
  position:fixed;right:.85rem;top:.65rem;display:flex;flex-wrap:wrap;gap:.35rem;z-index:9999;
  backdrop-filter:blur(8px);
  background:color-mix(in oklab,var(--card) 65%, transparent);
  border:1px solid color-mix(in oklab,var(--fg) 10%, var(--bg));
  border-radius:14px;padding:.3rem .4rem;box-shadow:0 8px 24px var(--shadow)
}
.btn{
  appearance:none;border:1px solid color-mix(in oklab,var(--fg) 18%, var(--bg));
  background:var(--card);color:var(--fg);padding:.38rem .55rem;border-radius:12px;
  font-weight:600;cursor:pointer;box-shadow:0 6px 14px var(--shadow);
  transition:transform .06s, background .2s, border-color .2s
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn span{font-size:1rem;vertical-align:middle}
.hint{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.5rem}

/* per-Section Mini-Controls */
.sec-ctrl{position:absolute;top:.6rem;right:.6rem;display:flex;gap:.4rem;opacity:.75}
.sec-ctrl button{
  border:1px solid color-mix(in oklab,var(--fg) 18%, var(--bg));
  background:var(--card);color:var(--fg);padding:.2rem .45rem;border-radius:8px;font-size:.85rem;cursor:pointer
}
.sec-ctrl button:hover{opacity:1}

/* Back-to-top */
#backTop{position:fixed;left:.85rem;bottom:.85rem;z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s}
#backTop.show{opacity:1;pointer-events:auto}

/* Print */
@media print{
  :root,.light{--bg:#fff;--fg:#000;--card:#fff;--muted:#333;--link:#000}
  body{background:#fff;color:#000}
  .controls,#backTop{display:none!important}
  section,.intro,#tocWrap{box-shadow:none;border:1px solid #ddd}
  a[href^="http"]:after{content:" <" attr(href) ">";font-size:.9em;color:#555}
  .hide-mansagt p[data-mansagt]{display:block!important}
  h2 .permalink{display:none!important}
  section{break-inside:avoid}
}

/* Light-Preference Fallback */
@media (prefers-color-scheme: light){
  :root:not(.dark-set):not(.light-set){color-scheme:light}
  :root:not(.dark-set):not(.light-set) body{background:#f8f9fb;color:#111216}
}

/* Mobile */
@media (max-width:520px){
  h1{font-size:1.9rem;line-height:1.15}
  .controls{right:0;left:0;top:.6rem;margin:0 auto;padding:0 .5rem;justify-content:center;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .controls::-webkit-scrollbar{display:none}
  .btn{padding:.42rem .52rem;border-radius:10px;box-shadow:0 4px 12px var(--shadow);font-size:.95rem}
  section.intro{padding:1rem .9rem}
  section{padding:.95rem .9rem 1rem;border-radius:12px}
  blockquote{padding:.6rem .8rem;border-left-width:3px}
  #tocWrap{padding:.8rem}
}
/* ==== Feinheiten aus index.html (vormals inline) ==== */
.controls{ top:.65rem; }

.intro{
  max-width:45rem;
  margin:4rem auto 2rem;
  font-style:italic;
  line-height:1.6;
  opacity:.9;
}
.intro .closing{ margin-top:1.5em; font-weight:500; }

.outro{
  text-align:center;
  margin:5rem auto 2rem;
  opacity:.9;
  font-style:italic;
}
.outro footer{
  margin-top:2rem;
  font-size:.9em;
  letter-spacing:.05em;
  opacity:.6;
}
.outro p.closing{
  font-size:1.5em;
  margin:2rem 0 0;
}
/* Offset für Anker-/scrollIntoView wegen fixer Top-Controls */
:root { --scroll-offset: 88px; } /* Fallback */
section, h2 { scroll-margin-top: var(--scroll-offset); }
/* optional – zusätzlich zu scroll-margin-top */
h2:target::before {
  content: "";
  display: block;
  height: var(--scroll-offset);
  margin-top: calc(-1 * var(--scroll-offset));
}