/* ==================================================
   BELLA WILDHERZ – NOTIZBUCH
   Ausgelagert aus Notizbuch.html. Die alte style.css bleibt als Backup erhalten.
================================================== */

:root {
  --leather:       #5c3d2e;
  --leather-dark:  #3b2214;
  --leather-light: #8b5e3c;
  --leather-hi:    #a0714f;
  --accent:        #c17f24;
  --accent-light:  #e8a84a;
  --sidebar-w:     270px;
  --dur:           460ms;
  --ease:          cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#110c06; font-family:'Lora', Georgia, serif; }

body::before {
  content:''; position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, #251508 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 70%, #0d0804 0%, transparent 60%),
    repeating-linear-gradient(92deg, transparent 0 18px, rgba(255,255,255,.012) 18px 19px),
    repeating-linear-gradient(180deg, transparent 0 40px, rgba(0,0,0,.07) 40px 41px);
  background-color:#1c1006;
}

/* ── Gemeinsame Top-Navigation ── */
#site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 260;
  font-family: 'Nunito', sans-serif;
}
#site-nav nav {
  background: rgba(250,244,232,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(59,94,50,.11);
}
#site-nav .nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 16px;
}
#site-nav .nav-brand {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 900;
  color: #3b5e32;
  text-decoration: none;
  white-space: nowrap;
}
#site-nav ul { list-style: none; display: flex; gap: 2px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
#site-nav a {
  text-decoration: none;
  color: #243320;
  font-weight: 700;
  font-size: .86rem;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background .2s, color .2s;
}
#site-nav a:hover,
#site-nav a.active { background: rgba(59,94,50,.1); color: #3b5e32; }
#site-nav .nav-cta { background: #3b5e32 !important; color: #fff !important; }
#site-nav .nav-cta:hover { background: #243320 !important; color: #fff !important; }

#toggle-btn {
  position:fixed; top:78px; right:20px; z-index:200; width:46px; height:46px;
  background:linear-gradient(135deg,var(--leather-dark),var(--leather));
  border:1px solid var(--accent); border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  box-shadow:0 4px 18px rgba(0,0,0,.6); transition:background .2s, transform .15s; outline:none;
}
#toggle-btn:hover { background:linear-gradient(135deg,var(--leather),var(--leather-hi)); transform:translateY(-1px); }
.bar { display:block; width:18px; height:2px; background:var(--accent-light); border-radius:2px; transition:transform .3s, opacity .3s, width .3s; }
#toggle-btn.open .bar:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
#toggle-btn.open .bar:nth-child(2){ opacity:0; width:0; }
#toggle-btn.open .bar:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

#sidebar {
  position:fixed; left:0; top:60px; width:var(--sidebar-w); height:calc(100vh - 60px); z-index:150;
  background:linear-gradient(200deg,var(--leather-dark) 0%,var(--leather) 55%,var(--leather-light) 100%);
  transform:translateX(calc(-1 * var(--sidebar-w))); transition:transform var(--dur) var(--ease);
  display:flex; flex-direction:column; border-right:2px solid var(--leather-hi); box-shadow:6px 0 40px rgba(0,0,0,.7);
}
#sidebar::before { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(0,0,0,.04) 4px 5px); }
#sidebar.open { transform:translateX(0); }
.sb-header { padding:32px 22px 18px; border-bottom:1px solid rgba(255,255,255,.1); position:relative; }
.sb-header::after { content:''; position:absolute; bottom:-1px; left:22px; right:22px; height:1px; background:linear-gradient(to right,transparent,var(--accent),transparent); }
.sb-header h1 { font-family:'Caveat',cursive; font-size:1.65rem; font-weight:700; color:var(--accent-light); letter-spacing:1px; }
.sb-header p { margin-top:4px; font-size:.72rem; color:rgba(255,255,255,.38); font-style:italic; }
.chapter-list { flex:1; overflow-y:auto; padding:10px 0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent; }
.chapter-list::-webkit-scrollbar { width:4px; }
.chapter-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; }
.ch-item { display:block; padding:13px 22px 13px 20px; cursor:pointer; border-left:3px solid transparent; transition:background .18s, border-color .18s; text-decoration:none; }
.ch-item:hover { background:rgba(255,255,255,.06); border-left-color:rgba(193,127,36,.5); }
.ch-item.active { background:rgba(255,255,255,.1); border-left-color:var(--accent); }
.ch-num { display:block; font-family:'Caveat',cursive; font-size:.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:2px; }
.ch-title { display:block; font-size:.9rem; font-weight:500; color:rgba(255,240,210,.82); }
.ch-page  { display:block; font-size:.68rem; color:rgba(255,255,255,.3); font-style:italic; margin-top:2px; }
#chapter-seo-box { padding:16px 22px 18px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,240,210,.78); font-size:.76rem; line-height:1.55; max-height:32vh; overflow-y:auto; position:relative; z-index:2; }
#chapter-seo-box h2 { font-family:'Caveat',cursive; color:var(--accent-light); font-size:1.24rem; line-height:1.1; margin-bottom:6px; }
#chapter-seo-box em { color:var(--accent-light); }
#chapter-seo-box p + p { margin-top:8px; }
#chapter-seo-box a { color:var(--accent-light); text-decoration:none; font-weight:600; }
#chapter-seo-box a:hover { text-decoration:underline; }
.sb-footer { padding:14px 22px; border-top:1px solid rgba(255,255,255,.08); font-family:'Caveat',cursive; font-size:.78rem; color:rgba(255,255,255,.2); text-align:center; }
.sb-page-counter { font-size:.82rem; color:rgba(255,255,255,.35); text-align:center; margin-bottom:6px; font-family:'Caveat',cursive; letter-spacing:1px; }
#sb-current { color:var(--accent-light); font-weight:600; }

#stage { position:fixed; left:0; right:0; top:60px; bottom:0; z-index:10; display:flex; align-items:center; justify-content:center; }
#book-wrap { position:relative; width:1190px; height:842px; transform-origin:center center; }
#book-wrap::before {
  content:''; position:absolute; inset:-10px -8px;
  background:linear-gradient(135deg,var(--leather-dark) 0%,var(--leather) 40%,var(--leather-hi) 100%);
  border-radius:4px 16px 16px 4px; z-index:-1;
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 30px 90px rgba(0,0,0,.9), 0 70px 140px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
#book-wrap::after { content:''; position:absolute; inset:-10px -8px; border-radius:4px 16px 16px 4px; z-index:-1; background:repeating-linear-gradient(125deg,transparent 0 6px,rgba(0,0,0,.05) 6px 7px); }
#spine { position:absolute; left:50%; top:0; transform:translateX(-50%); width:22px; height:100%; z-index:60; background:linear-gradient(to right,#1a0d05,#3a2010,#5c3520,#3a2010,#1a0d05); box-shadow:2px 0 10px rgba(0,0,0,.5), -2px 0 10px rgba(0,0,0,.5); }
#spine::before { content:''; position:absolute; left:50%; top:6%; transform:translateX(-50%); width:2px; height:88%; background:linear-gradient(to bottom,transparent,rgba(232,168,74,.6) 20%,rgba(232,168,74,.8) 50%,rgba(232,168,74,.6) 80%,transparent); }
#pages { position:absolute; inset:0; display:flex; }
.half { position:relative; width:50%; height:100%; overflow:hidden; background:#faf6ee; }
.half.left  { border-radius:3px 0 0 3px; }
.half.right { border-radius:0 3px 3px 0; }
.half.left::after { content:''; position:absolute; top:0; right:0; width:50px; height:100%; background:linear-gradient(to left,rgba(0,0,0,.22) 0%,transparent 100%); pointer-events:none; z-index:5; }
.half.right::after { content:''; position:absolute; top:0; left:0; width:50px; height:100%; background:linear-gradient(to right,rgba(0,0,0,.22) 0%,transparent 100%); pointer-events:none; z-index:5; }
.half::before { content:''; position:absolute; inset:0; z-index:4; pointer-events:none; box-shadow:inset 0 8px 20px rgba(0,0,0,.08), inset 0 -8px 20px rgba(0,0,0,.08); }
.page-slot { position:absolute; inset:0; display:flex; align-items:stretch; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); will-change:opacity, transform; }
.page-slot img { width:100%; height:100%; display:block; object-fit:fill; }
.ps-visible { opacity:1; transform:translateX(0); }
.ps-hidden  { opacity:0; pointer-events:none; }
.ps-exit-l  { opacity:0; transform:translateX(-24px); }
.ps-exit-r  { opacity:0; transform:translateX(24px); }
.ps-enter-r { opacity:0; transform:translateX(24px); }
.ps-enter-l { opacity:0; transform:translateX(-24px); }
.cover-blank { width:100%; height:100%; background:linear-gradient(135deg,#3a2410,#5c3520 50%,#4a2c15); display:flex; align-items:center; justify-content:center; }
.cover-blank::after { content:''; display:block; width:70px; height:70px; border:2px solid rgba(193,127,36,.2); border-radius:50%; background:radial-gradient(circle,rgba(193,127,36,.07),transparent); }
#sweep { position:absolute; inset:0; z-index:70; pointer-events:none; opacity:0; background:linear-gradient(105deg,transparent 0% 35%,rgba(255,255,255,.1) 50%,transparent 65% 100%); }
#sweep.run { animation:sweep-anim .55s ease-out forwards; }
@keyframes sweep-anim { 0% { opacity:0; background-position:-200px center; } 20% { opacity:1; } 100% { opacity:0; background-position:1400px center; } }
.nav-btn { position:fixed; top:calc(50% + 30px); z-index:80; transform:translateY(-50%); width:52px; height:140px; background:linear-gradient(to bottom,rgba(30,14,4,0) 0%,rgba(30,14,4,.55) 30%,rgba(30,14,4,.55) 70%,rgba(30,14,4,0) 100%); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, opacity .25s; outline:none; color:var(--accent-light); opacity:.55; }
.nav-btn:hover { opacity:1; }
.nav-btn:disabled { opacity:.1; cursor:default; pointer-events:none; }
.nav-btn svg { width:28px; height:28px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
#btn-prev { left:0; border-radius:0 8px 8px 0; }
#btn-next { right:0; border-radius:8px 0 0 8px; }
#page-info { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-family:'Caveat',cursive; font-size:1rem; letter-spacing:2px; color:rgba(255,255,255,.28); white-space:nowrap; pointer-events:none; z-index:80; }
#hints { position:fixed; bottom:18px; left:70px; z-index:20; display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-family:'Caveat',cursive; font-size:.78rem; letter-spacing:1px; color:rgba(255,255,255,.22); pointer-events:none; }
.hint-divider { display:none; }

#search-overlay { position:fixed; inset:0; z-index:300; background:rgba(10,6,3,.72); backdrop-filter:blur(8px); display:none; align-items:flex-start; justify-content:center; padding:90px 18px 18px; }
#search-overlay.open { display:flex; }
.search-box { width:min(620px,100%); background:linear-gradient(160deg,#f8eed8,#e8d1a8); border:2px solid rgba(193,127,36,.45); border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.65); overflow:hidden; }
.search-head { padding:16px 18px 10px; border-bottom:1px solid rgba(92,61,46,.18); }
.search-head strong { display:block; font-family:'Caveat',cursive; font-size:1.55rem; color:var(--leather-dark); }
.search-head span { display:block; margin-top:2px; font-size:.78rem; color:rgba(59,34,20,.62); }
#notebook-search { width:100%; border:none; outline:none; background:rgba(255,255,255,.55); border-top:1px solid rgba(92,61,46,.12); border-bottom:1px solid rgba(92,61,46,.12); padding:14px 18px; font-family:'Lora',Georgia,serif; font-size:1rem; color:var(--leather-dark); }
#notebook-search::placeholder { color:rgba(59,34,20,.45); }
#search-results { max-height:45vh; overflow-y:auto; padding:8px; }
.search-result { display:block; width:100%; text-align:left; border:none; background:transparent; padding:12px; border-radius:12px; cursor:pointer; font-family:'Lora',Georgia,serif; color:var(--leather-dark); }
.search-result:hover, .search-result.active { background:rgba(193,127,36,.18); }
.search-result strong { display:block; font-size:.95rem; margin-bottom:2px; }
.search-result em { font-size:.78rem; color:rgba(59,34,20,.62); }
.search-result p { margin-top:5px; font-size:.76rem; line-height:1.45; color:rgba(59,34,20,.72); }
.search-empty { padding:18px; color:rgba(59,34,20,.62); font-size:.86rem; line-height:1.5; }
.search-foot { padding:10px 16px 14px; font-size:.72rem; color:rgba(59,34,20,.48); border-top:1px solid rgba(92,61,46,.12); }

#seo-content { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ==================================================
   FIX: Kapitelübersicht lesbarer + kein Mondsichel-Hover
   Diese Regeln überschreiben die globalen nav-a-Regeln aus /css/gemeinsam.css
   nur innerhalb der Notizbuch-Seitenleiste.
================================================== */

#sidebar .chapter-list {
  padding: 10px 10px;
}

#sidebar .chapter-list .ch-item,
#sidebar .chapter-list .ch-item:visited {
  display: block;
  width: 100%;
  padding: 12px 12px 12px 14px;
  border-left: 3px solid transparent;
  border-radius: 14px;
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none;
}

#sidebar .chapter-list .ch-item:hover,
#sidebar .chapter-list .ch-item.active {
  background: rgba(250,244,232,.88) !important;
  border-left-color: var(--accent);
  color: var(--leather-dark) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}

#sidebar .chapter-list .ch-item:hover .ch-num,
#sidebar .chapter-list .ch-item.active .ch-num {
  color: #8a5215;
}

#sidebar .chapter-list .ch-item:hover .ch-title,
#sidebar .chapter-list .ch-item.active .ch-title {
  color: #2f1b10;
}

#sidebar .chapter-list .ch-item:hover .ch-page,
#sidebar .chapter-list .ch-item.active .ch-page {
  color: #6b4a31;
}

#sidebar .chapter-list .ch-title {
  color: rgba(255,240,210,.9);
}

#sidebar .chapter-list .ch-page {
  color: rgba(255,230,190,.62);
}