/* ==========================================================================
   Bitcoin einfach erklaert -- Reader-Website
   Design: warmes Papier-Licht / warmes Kohle-Dunkel
   Headings: Fraunces (Display-Serif) | Text/UI: Source Serif 4
   ========================================================================== */

:root{
  --bg:#F7F4EC;
  --surface:#FFFFFF;
  --surface-2:#F0EAD9;
  --ink:#211E1A;
  --muted:#726B5C;
  --accent:#AD5F1C;
  --accent-ink:#FFFDF8;
  --border:#E4DECC;
  --highlight:#F4D9A0;
  --highlight-ink:#3A2A0A;
  --danger:#A3402C;
  --shadow: 0 8px 24px rgba(33,30,26,0.10);
  --radius: 3px;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --header-h: 64px;
  --progress-h: 3px;
  color-scheme: light;
}

html[data-theme="dark"]{
  --bg:#18160F;
  --surface:#211D14;
  --surface-2:#2A251A;
  --ink:#EDE6D6;
  --muted:#A69C86;
  --accent:#E2924A;
  --accent-ink:#1A1410;
  --border:#38321F;
  --highlight:#4E3A16;
  --highlight-ink:#F4D9A0;
  --shadow: 0 8px 28px rgba(0,0,0,0.45);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:auto; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.15; color:var(--ink); }
button{ font-family:var(--font-body); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* skip link */
.skip-link{
  position:absolute; left:8px; top:-48px; background:var(--accent); color:var(--accent-ink);
  padding:.6em 1em; border-radius:var(--radius); z-index:200; transition:top .15s ease;
}
.skip-link:focus{ top:8px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:.6rem;
  height:var(--header-h);
  padding:0 .75rem;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:none;
  background:transparent; border:1px solid transparent; border-radius:50%;
  color:var(--ink); cursor:pointer;
}
.icon-btn:hover{ background:var(--surface-2); }
.icon-btn svg{ width:20px; height:20px; }

.brand{
  display:flex; align-items:center; gap:.55rem; min-width:0;
  text-decoration:none; color:var(--ink); flex:none;
}
.brand__title{
  font-family:var(--font-display); font-size:.98rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:34vw;
}

.buy-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:999px; padding:.5rem .9rem;
  font-size:.82rem; font-weight:600; text-decoration:none; white-space:nowrap;
  flex:none;
}
.buy-btn:hover{ filter:brightness(1.08); }
.buy-btn .buy-full{ display:inline; }
.buy-btn .buy-short{ display:none; }

@media (max-width:640px){
  .brand__title{ display:none; }
  .buy-btn .buy-full{ display:none; }
  .buy-btn .buy-short{ display:inline; }
}

/* Search needs at least 40ch — on narrow screens it can't share the row with the
   other header icons, so it wraps onto its own full-width row underneath. */
@media (max-width:720px){
  .site-header{ flex-wrap:wrap; height:auto; padding-bottom:.6rem; }
  .header-search{ order:3; flex-basis:auto; width:100%; max-width:50ch; margin-top:.55rem; margin-left:auto; }
}

/* reading progress bar */
.progress-track{ height:var(--progress-h); background:transparent; }
.progress-bar{ height:100%; width:0%; background:var(--accent); transition:width .1s linear; }

/* ---------- Drawer / TOC menu ---------- */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(10,8,4,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:150;
}
.drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; left:0; bottom:0; width:min(360px,86vw);
  background:var(--surface); border-right:1px solid var(--border);
  transform:translateX(-100%); transition:transform .25s ease;
  z-index:160; display:flex; flex-direction:column;
}
.drawer.is-open{ transform:translateX(0); }
.drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1rem .75rem; border-bottom:1px solid var(--border);
}
.drawer__header h2{ font-size:1rem; margin:0; }
.drawer__list{ list-style:none; margin:0; padding:.4rem 0; overflow-y:auto; flex:1; }
.drawer__list a{
  display:flex; gap:.6rem; align-items:baseline;
  padding:.62rem 1rem; text-decoration:none; color:var(--ink);
  font-size:.92rem; border-left:3px solid transparent;
}
.drawer__list a:hover{ background:var(--surface-2); }
.drawer__list a.is-current{
  border-left-color:var(--accent); background:var(--surface-2); font-weight:600;
}
.drawer__num{ color:var(--muted); font-variant-numeric:tabular-nums; font-size:.82rem; flex:none; width:1.6em; }
.drawer__foot{
  border-top:1px solid var(--border); padding:.75rem 1rem 1rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.drawer__foot a{ font-size:.85rem; color:var(--muted); text-decoration:none; }
.drawer__foot a:hover{ color:var(--accent); }

/* ---------- Theme toggle + font-size cycle (header, icon-only) ---------- */
.theme-icon{ display:none; }
.theme-icon svg{ width:20px; height:20px; }
.theme-icon--moon{ display:inline-flex; }
html[data-theme="dark"] .theme-icon--sun{ display:inline-flex; }
html[data-theme="dark"] .theme-icon--moon{ display:none; }

.fontsize-icon{
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  line-height:1; color:var(--ink);
}

/* ---------- Inline header search ---------- */
.header-search{
  position:relative; flex:0 1 auto; width:50ch; max-width:50ch; min-width:0;
  margin-left:auto;
  display:flex; align-items:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:0 .7rem; height:38px;
  transition:border-color .15s ease, background .15s ease;
}
.header-search:focus-within{ border-color:var(--accent); background:var(--surface); }
.header-search__icon{ display:flex; flex:none; color:var(--muted); }
.header-search__icon svg{ width:16px; height:16px; }
.header-search__input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  box-shadow:none;
  font-family:var(--font-body); font-size:.85rem; color:var(--ink);
  padding:0 0 0 .45rem;
}
.header-search__input:focus, .header-search__input:focus-visible{ outline:none; box-shadow:none; }
.header-search__input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.header-search__input::placeholder{ color:var(--muted); }
.header-search__results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; width:100%;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  box-shadow:var(--shadow); max-height:70vh; overflow-y:auto;
  display:none; z-index:120;
}
.header-search__results.is-open{ display:block; }
.search-result{ display:block; padding:.7rem .9rem; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--border); }
.search-result:last-child{ border-bottom:none; }
.search-result:hover{ background:var(--surface-2); }
.search-result__title{ font-family:var(--font-display); font-weight:600; font-size:.9rem; margin-bottom:.15rem; }
.search-result__snippet{ font-size:.82rem; color:var(--muted); }
.search-result mark, .search-hit{ background:var(--highlight); color:var(--highlight-ink); border-radius:2px; }
.search-empty{ padding:1.2rem .9rem; color:var(--muted); font-size:.85rem; text-align:center; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:220;
  background:var(--surface); border-top:1px solid var(--border); box-shadow:var(--shadow);
  padding:1rem 1.1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ flex:1 1 260px; margin:0; font-size:.85rem; color:var(--muted); }
.cookie-banner p a{ color:var(--accent); }
.cookie-banner__actions{ display:flex; gap:.6rem; flex:none; }
.cookie-banner .btn{ padding:.55rem 1rem; font-size:.85rem; }


/* ---------- Layout / content ---------- */
main{ display:block; }
.container{ max-width:680px; margin:0 auto; padding:0 1.1rem; }

.hero{ padding:2.4rem 0 1.5rem; }
.hero__cover{ width:150px; margin:0 auto 1.4rem; box-shadow:var(--shadow); border-radius:3px; }
.hero__title{ font-size:2rem; text-align:center; margin:.2rem 0 .3rem; }
.hero__author{ text-align:center; color:var(--muted); font-size:.95rem; margin:0 0 1.4rem; }
.hero__tagline{ text-align:center; color:var(--muted); font-size:1.05rem; max-width:44ch; margin:0 auto 1.6rem; }
.hero__ctas{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-bottom:.5rem; }
.btn{
  display:inline-flex; align-items:center; gap:.45rem; padding:.7rem 1.3rem;
  border-radius:999px; font-size:.95rem; font-weight:600; text-decoration:none;
  border:1px solid var(--border); cursor:pointer;
}
.btn--primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn--primary:hover{ filter:brightness(1.08); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--surface-2); }

.toc-heading{ font-size:1.15rem; margin:2.4rem 0 .9rem; }
.toc-list{ list-style:none; margin:0 0 3rem; padding:0; border-top:1px solid var(--border); }
.toc-list li{ border-bottom:1px solid var(--border); }
.toc-list a{
  display:flex; align-items:baseline; gap:.7rem; padding:.85rem .1rem;
  text-decoration:none; color:var(--ink);
}
.toc-list a:hover .toc-list__title{ color:var(--accent); }
.toc-num{ color:var(--muted); font-variant-numeric:tabular-nums; font-size:.85rem; width:1.8em; flex:none; }
.toc-list__title{ font-family:var(--font-display); font-weight:500; flex:1; }
.toc-list__meta{ color:var(--muted); font-size:.78rem; flex:none; }

/* ---------- Article / chapter page ---------- */
.chapter-meta{
  display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.82rem;
  margin:1.6rem 0 .3rem; text-transform:none;
}
.chapter-meta__dot::before{ content:"\00b7"; margin:0 .1em; }
article.chapter{ padding-bottom:5rem; }
article.chapter h1{ font-size:1.9rem; margin:.2rem 0 .5rem; }
h2.chapter-subtitle, article.chapter h2.chapter-subtitle{
  font-family:var(--font-body); font-style:italic; font-weight:400;
  color:var(--muted); font-size:1.15rem; line-height:1.4;
  margin:0 0 1.3rem;
}
article.chapter h2{ font-size:1.28rem; margin:2.1rem 0 .8rem; }
article.chapter p{ margin:0 0 1.1rem; }
article.chapter img{ margin:1.4rem auto; border-radius:4px; }
article.chapter ul, article.chapter ol{ margin:0 0 1.1rem; padding-left:1.3rem; }
article.chapter li{ margin-bottom:.4rem; }
article.chapter blockquote{
  margin:1.4rem 0; padding:.2rem 1rem; border-left:3px solid var(--accent);
  color:var(--muted); font-style:italic;
}
article.chapter strong{ color:var(--ink); }
article.chapter table{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.92rem; }
article.chapter th, article.chapter td{ border:1px solid var(--border); padding:.5rem .6rem; text-align:left; }
article.chapter mark{ background:var(--highlight); color:var(--highlight-ink); border-radius:2px; padding:0 .1em; }

.chapter-tools{ display:flex; gap:.5rem; margin:1.4rem 0 .4rem; }
.tool-btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:999px; font-size:.82rem; cursor:pointer;
}
.tool-btn:hover{ background:var(--surface-2); }
.tool-btn svg{ width:15px; height:15px; }

/* share popover */
.share-pop{
  position:absolute; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; box-shadow:var(--shadow); padding:.4rem; display:none; z-index:50;
  flex-direction:column; min-width:190px;
}
.share-pop.is-open{ display:flex; }
.share-pop a, .share-pop button{
  display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:6px;
  text-decoration:none; color:var(--ink); background:none; border:none; font-size:.85rem;
  text-align:left; cursor:pointer; font-family:var(--font-body);
}
.share-pop a:hover, .share-pop button:hover{ background:var(--surface-2); }

/* prev/next page-turn bar */
.pager{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(8px);
}
.pager__btn{
  flex:1; display:flex; align-items:center; gap:.5rem; padding:.85rem 1rem;
  text-decoration:none; color:var(--ink); min-width:0;
}
.pager__btn svg{ width:18px; height:18px; flex:none; }
.pager__btn:hover{ background:var(--surface-2); }
.pager__btn--next{ justify-content:flex-end; text-align:right; }
.pager__btn--disabled{ visibility:hidden; }
.pager__label{ font-size:.72rem; color:var(--muted); display:block; }
.pager__title{ font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.pager__divider{ width:1px; background:var(--border); }

/* keep content clear of fixed pager */
body.has-pager{ padding-bottom:64px; }

/* ---------- Simple pages (Impressum/Datenschutz) ---------- */
.prose{ padding:2rem 0 4rem; }
.prose h1{ font-size:1.8rem; margin-bottom:1.2rem; }
.prose h2{ font-size:1.15rem; margin:1.8rem 0 .6rem; }
.prose p{ margin:0 0 1rem; color:var(--ink); }
.prose a{ color:var(--accent); }

footer.site-footer{
  border-top:1px solid var(--border); padding:2rem 1.1rem 6rem;
  text-align:center; color:var(--muted); font-size:.8rem;
}
footer.site-footer a{ color:var(--muted); }
footer.site-footer nav{ display:flex; gap:1rem; justify-content:center; margin-bottom:.6rem; flex-wrap:wrap; }

/* font-size variants applied to <html> via data attribute, read by JS */
html[data-fontsize="sm"] article.chapter{ font-size:.95rem; }
html[data-fontsize="md"] article.chapter{ font-size:1.08rem; }
html[data-fontsize="lg"] article.chapter{ font-size:1.22rem; }

/* Startseite: nur das Inhaltsverzeichnis skaliert mit, Hero-Bereich bleibt unberührt */
html[data-fontsize="sm"] .toc-list{ font-size:.9rem; }
html[data-fontsize="md"] .toc-list{ font-size:1rem; }
html[data-fontsize="lg"] .toc-list{ font-size:1.15rem; }

/* Impressum & Datenschutzerklärung */
html[data-fontsize="sm"] .prose{ font-size:.95rem; }
html[data-fontsize="md"] .prose{ font-size:1.08rem; }
html[data-fontsize="lg"] .prose{ font-size:1.22rem; }

/* ---------- Print styles (per-chapter PDF export via window.print) ---------- */
@media print{
  .site-header, .drawer, .drawer-backdrop, .header-search__results, .cookie-banner, .pager,
  .chapter-tools, .progress-track, footer.site-footer, .skip-link{ display:none !important; }
  body{ background:#fff; color:#111; padding:0; }
  .container{ max-width:100%; }
  article.chapter{ padding-bottom:0; }
  a{ color:#111; text-decoration:none; }
  .print-heading{ display:block !important; margin-bottom:1.2rem; font-family:var(--font-display); }
}
.print-heading{ display:none; }

@media (min-width:760px){
  body{ font-size:18px; }
  .hero__title{ font-size:2.4rem; }
}