/*
Theme Name: Arcadia Bay
Theme URI: https://example.com
Description: Fotografie-Child-Theme, angelehnt an die visuelle Sprache von "Life is Strange" — Polaroid-Pinnwand, Kapitel-Navigation, Rewind-Ästhetik. Basiert auf GeneratePress.
Author: Wiebke
Template: generatepress
Version: 0.1.0
Text Domain: arcadia-bay
*/

:root{
  --paper: #e9e3d4;
  --paper-dark: #ded5bf;
  --ink: #2b2a26;
  --ink-soft: #57544c;
  --teal: #3a6b68;
  --rust: #b4623a;
  --purple: #7a6485;
  --polaroid: #faf7ef;
  --tape: #d7cdb0;
}

body.arcadia-bay{
  background:
    radial-gradient(ellipse at top left, rgba(122,100,133,0.06), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(58,107,104,0.07), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: 'Crimson Pro', serif;
  -webkit-font-smoothing: antialiased;
}

body.arcadia-bay::before{
  content:"";
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Seiten-Textur: liniertes Notizbuchpapier ---- */
body.arcadia-bay{
  background-image:
    radial-gradient(ellipse at top left, rgba(122,100,133,0.06), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(58,107,104,0.07), transparent 55%),
    repeating-linear-gradient(
      to bottom,
      transparent, transparent 35px,
      rgba(58,107,104,.10) 35px, rgba(58,107,104,.10) 36px
    );
}
body.arcadia-bay::after{
  content:"";
  position:fixed; top:0; bottom:0; left:64px; width:1.5px; z-index:1;
  background: rgba(180,98,58,.28); pointer-events:none;
}

/* ---- Kapitel-Navigation als Register einer Ringbindung ---- */
.ab-chapters{
  position: fixed; top: 130px; right: 0; z-index: 50;
  display:flex; flex-direction:column; gap:1.1rem;
  list-style:none; margin:0; padding:0;
}
.ab-chapters li{
  position:relative;
  background: var(--polaroid);
  color: var(--ink-soft);
  font-family:'Space Mono', monospace; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.08em;
  padding: .75rem .9rem .75rem 1.3rem;
  min-width: 128px;
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
  box-shadow: -3px 3px 8px rgba(43,42,38,.28);
  transform: translateX(58px) rotate(-1deg);
  transition: transform .25s ease, background .25s ease;
}
.ab-chapters li a{ color:inherit; text-decoration:none; display:block; }
.ab-chapters li::before{
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(43,42,38,.3);
}
.ab-chapters li:nth-child(3n+1){ border-top:3px solid var(--teal); }
.ab-chapters li:nth-child(3n+2){ border-top:3px solid var(--rust); }
.ab-chapters li:nth-child(3n+3){ border-top:3px solid var(--purple); }
.ab-chapters li:nth-child(even){ transform: translateX(58px) rotate(1deg); }
.ab-chapters li:hover{ transform: translateX(10px) rotate(0deg); }
.ab-chapters li.active{
  color: var(--ink);
  background: var(--paper);
  transform: translateX(0) rotate(0deg);
  font-weight:600;
  box-shadow: -4px 4px 10px rgba(43,42,38,.32);
}
.ab-chapters .ep{
  display:block; color: var(--purple); font-family:'Caveat', cursive;
  font-size:1rem; text-transform:none; letter-spacing:0; margin-bottom:2px;
}
.ab-chapters .ab-empty-tab{
  font-family:'Caveat', cursive; font-size:1rem; clip-path:none;
  padding:.9rem 1rem; text-align:right;
}

@media (max-width: 900px){
  .ab-chapters{ position:static; flex-direction:row; flex-wrap:wrap; margin: 1rem 6vw 0; }
  .ab-chapters li{ transform:none !important; clip-path:none; border-radius:3px; min-width:auto; }
  body.arcadia-bay::after{ display:none; }
}

/* ---- Hero ---- */
.ab-hero{
  padding: 5vw 6vw 4vw; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:4vw; align-items:center;
}
.ab-hero-eyebrow{
  font-family:'Space Mono', monospace; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color: var(--purple); margin-bottom:1rem;
}
.ab-hero h1{
  font-family:'Crimson Pro', serif; font-weight:300; font-size:clamp(2.4rem, 5vw, 4.4rem);
  line-height:1.05; margin:0 0 1.2rem; color: var(--ink);
}
.ab-hero h1 em{ font-style:italic; font-weight:500; color: var(--teal); }
.ab-hero p{ color: var(--ink-soft); font-size:1.15rem; max-width:36ch; line-height:1.6; }
.ab-hero .ab-tag{
  display:inline-block; margin-top:1.6rem; font-family:'Caveat',cursive; font-size:1.3rem;
  color: var(--rust); border-bottom:1.5px dashed var(--rust); padding-bottom:2px;
}
.ab-hero-photo{ position:relative; height:420px; }

/* ---- Polaroid (hero + pinboard share this look) ---- */
.ab-polaroid{
  background: var(--polaroid); padding:14px 14px 46px;
  box-shadow: 0 12px 26px -8px rgba(43,42,38,.35), 0 2px 4px rgba(43,42,38,.15);
  border-radius:2px;
}
.ab-polaroid .ab-frame{
  width:100%; aspect-ratio:1/1; overflow:hidden; position:relative;
  filter: grayscale(60%) blur(1.5px) brightness(.85) contrast(1.05);
  transition: filter 1.1s ease;
}
.ab-polaroid:hover .ab-frame,
.ab-pin:hover .ab-frame{ filter: grayscale(0%) blur(0) brightness(1) contrast(1.08); }
.ab-polaroid .ab-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.ab-polaroid figcaption{
  font-family:'Caveat', cursive; font-size:1.15rem; color: var(--ink-soft);
  margin-top:8px;
}
.ab-hero-photo .ab-polaroid{ position:absolute; width:260px; }
.ab-p1{ top:0; left:20px; transform:rotate(-6deg); z-index:2; }
.ab-p2{ top:70px; left:190px; transform:rotate(4deg); z-index:1; }
.ab-tape{
  position:absolute; width:70px; height:26px; background: var(--tape);
  opacity:.75; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* ---- Pinnwand / Galerie ---- */
.ab-board{ padding: 3vw 6vw 6vw; }
.ab-board-head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2.5rem;
  border-bottom:1px solid rgba(43,42,38,.15); padding-bottom:1rem; flex-wrap:wrap; gap:.5rem;
}
.ab-board-head h2{ font-weight:300; font-size:1.8rem; margin:0; }
.ab-board-head span{
  font-family:'Space Mono', monospace; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--ink-soft);
}
.ab-cork{
  position:relative;
  background: var(--polaroid);
  border:1px solid rgba(43,42,38,.12);
  border-radius:4px;
  padding: 4rem 3rem;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 1.5rem;
}
.ab-pin{
  position:relative; background: var(--polaroid); padding:10px 10px 12px;
  box-shadow: 0 8px 16px -6px rgba(43,42,38,.4);
  transition: transform .25s ease;
  list-style:none;
}
.ab-pin:hover{ transform: translateY(-6px) rotate(0deg) !important; z-index:5; }
.ab-pin:nth-child(4n+1){ transform: rotate(-4deg); }
.ab-pin:nth-child(4n+2){ transform: rotate(3deg); margin-top:1.2rem; }
.ab-pin:nth-child(4n+3){ transform: rotate(-2deg); }
.ab-pin:nth-child(4n+4){ transform: rotate(5deg); margin-top:.6rem; }
.ab-pin .ab-frame{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  filter: grayscale(65%) blur(1px) brightness(.82);
  transition: filter .9s ease;
}
.ab-pin .ab-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.ab-pin figcaption{
  margin-top:8px;
  font-family:'Caveat', cursive; font-size:1.05rem; color: var(--ink-soft);
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
}
.ab-episodes{
  margin-top:5px; display:flex; flex-wrap:wrap; gap:4px;
}
.ab-episode-chip{
  font-family:'Space Mono', monospace; font-size:.6rem; letter-spacing:.03em;
  color: var(--teal); background: rgba(58,107,104,.1);
  border:1px solid rgba(58,107,104,.25); border-radius: 10px;
  padding: .15rem .5rem;
}
.ab-pin figcaption span:first-child{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:75%;
}
.ab-pin figcaption .ab-no{ font-family:'Space Mono', monospace; font-size:.62rem; color: var(--purple); }
.ab-pin .ab-thread{ position:absolute; top:-22px; left:50%; width:2px; height:22px; background: rgba(180,98,58,.4); }
.ab-pin .ab-pinhead{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%;
  background: var(--rust); box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ab-empty{
  font-family:'Caveat', cursive; font-size:1.3rem; color: var(--ink-soft); grid-column:1/-1; text-align:center;
}

/* ---- Rewind ---- */
.ab-rewind{ margin: 3rem auto 0; max-width:520px; text-align:center; }
.ab-rewind-label{
  font-family:'Space Mono', monospace; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--ink-soft); margin-bottom:.8rem;
}
.ab-rewind-track{ height:3px; background:rgba(43,42,38,.15); border-radius:3px; position:relative; }
.ab-rewind-fill{ position:absolute; left:0; top:0; bottom:0; width:34%; background: var(--purple); border-radius:3px; }
.ab-rewind-knob{
  position:absolute; left:34%; top:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%; background: var(--polaroid);
  border:2px solid var(--purple); box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.ab-rewind-caption{ font-family:'Caveat', cursive; font-size:1.1rem; color: var(--rust); margin-top:1rem; }

@media (max-width: 900px){
  .ab-hero{ grid-template-columns:1fr; }
  .ab-cork{ grid-template-columns: repeat(2,1fr); padding:2.5rem 1.5rem; }
  .ab-hero-photo{ height:340px; }
}

/* ==================================================================
   Hauptmenü als horizontale Notizbuch-Tabs
   Zielt auf GeneratePress' Standard-Menümarkup (.main-navigation).
   Falls deine GP-Version leicht andere Klassen nutzt, greifen die
   allgemeineren Selektoren trotzdem.
   ================================================================== */
body.arcadia-bay .main-navigation{
  background: transparent;
  box-shadow: none;
  border: none;
}
body.arcadia-bay .main-navigation .inside-navigation{ padding-bottom: 0; }
body.arcadia-bay .main-navigation ul.menu,
body.arcadia-bay .main-navigation ul#primary-menu{
  display:flex; align-items:flex-end; gap:2px; list-style:none;
}
body.arcadia-bay .main-navigation ul.menu > li,
body.arcadia-bay .main-navigation ul#primary-menu > li{
  position:relative;
  background: var(--polaroid);
  border-radius: 10px 10px 0 0;
  border-top: 3px solid var(--teal);
  box-shadow: 0 -4px 10px rgba(43,42,38,.16), 1px 0 0 rgba(43,42,38,.06);
  transform: translateY(10px) rotate(-1.5deg);
  transform-origin: bottom center;
  transition: transform .2s ease, background .2s ease;
}
body.arcadia-bay .main-navigation ul.menu > li:nth-child(2),
body.arcadia-bay .main-navigation ul#primary-menu > li:nth-child(2){
  border-top-color: var(--rust); transform: translateY(10px) rotate(1deg);
}
body.arcadia-bay .main-navigation ul.menu > li:nth-child(3),
body.arcadia-bay .main-navigation ul#primary-menu > li:nth-child(3){
  border-top-color: var(--purple); transform: translateY(10px) rotate(-1deg);
}
body.arcadia-bay .main-navigation ul.menu > li:nth-child(4),
body.arcadia-bay .main-navigation ul#primary-menu > li:nth-child(4){
  border-top-color: var(--teal); transform: translateY(10px) rotate(1.5deg);
}
body.arcadia-bay .main-navigation ul.menu > li:hover,
body.arcadia-bay .main-navigation ul#primary-menu > li:hover{
  transform: translateY(4px) rotate(0deg);
  z-index: 2;
}
body.arcadia-bay .main-navigation ul.menu > li.current-menu-item,
body.arcadia-bay .main-navigation ul#primary-menu > li.current-menu-item{
  background: var(--paper);
  transform: translateY(0) rotate(0deg);
  box-shadow: 0 -6px 14px rgba(43,42,38,.2);
  z-index: 3;
}
body.arcadia-bay .main-navigation ul.menu > li > a,
body.arcadia-bay .main-navigation ul#primary-menu > li > a{
  font-family:'Caveat', cursive !important; font-size:1.2rem !important;
  font-weight: 600;
  color: var(--ink-soft) !important;
  padding: .55rem 1.5rem .5rem !important;
  display:block;
}
body.arcadia-bay .main-navigation ul.menu > li.current-menu-item > a,
body.arcadia-bay .main-navigation ul#primary-menu > li.current-menu-item > a{
  color: var(--rust) !important;
}

/* ==================================================================
   Einzelbeitrag als Notizbuchseite (single-aufnahme.php)
   ================================================================== */
.ab-single{
  max-width: 980px; margin: 3vw auto 6rem; padding: 3vw 4vw;
  background: var(--paper);
  box-shadow: 0 20px 50px -20px rgba(43,42,38,.35);
  position:relative;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:3rem;
}
.ab-single-photo{ position:relative; }
.ab-single-photo .ab-polaroid-big{
  background: var(--polaroid); padding:16px 16px 50px;
  box-shadow: 0 16px 30px -10px rgba(43,42,38,.4);
  transform: rotate(-2deg);
}
.ab-single-photo .ab-frame-big{ width:100%; aspect-ratio: 4/5; overflow:hidden; }
.ab-single-photo .ab-frame-big img{ width:100%; height:100%; object-fit:cover; display:block; }
.ab-single-photo figcaption{
  font-family:'Caveat', cursive; font-size:1.3rem; color:var(--ink-soft); margin-top:10px;
}
.ab-single-photo .ab-tape-big{
  position:absolute; width:80px; height:28px; background: var(--tape); opacity:.8;
  top:-14px; left:38%; transform:rotate(-4deg); box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.ab-single-notes .ab-single-date{
  font-family:'Space Mono', monospace; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--purple); margin-bottom:.6rem;
}
.ab-single-notes h1{
  font-family:'Crimson Pro', serif; font-weight:400; font-style:italic;
  font-size:2rem; margin:0 0 1rem; color:var(--ink); line-height:1.2;
}
.ab-single-content{
  font-family:'Caveat', cursive; font-size:1.35rem; line-height:1.5;
  color: var(--ink-soft); margin-bottom:1.6rem;
}
.ab-single-content p{ margin:0 0 .8rem; }

.ab-meta-card{
  background: var(--polaroid);
  border-left: 3px solid var(--rust);
  padding: 1.1rem 1.3rem;
  box-shadow: 0 6px 14px -8px rgba(43,42,38,.3);
  transform: rotate(1deg);
  margin-bottom:1.4rem;
}
.ab-meta-card h3{
  font-family:'Space Mono', monospace; font-size:.65rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 .7rem;
}
.ab-meta-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:.5rem 1rem;
  font-family:'Space Mono', monospace; font-size:.72rem; color:var(--ink);
}
.ab-meta-grid dt{ color:var(--ink-soft); margin:0; }
.ab-meta-grid dd{ margin:0; }

.ab-chip-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem; }
.ab-kapitel-badge{
  font-family:'Space Mono', monospace; font-size:.65rem; letter-spacing:.06em;
  background: var(--teal); color: var(--polaroid);
  padding:.25rem .7rem; border-radius:2px;
}

@media (max-width: 800px){
  .ab-single{ grid-template-columns: 1fr; }
}

/* ==================================================================
   FINALES NOTIZBUCH-DESIGN (Startseite + Kapitel-Archiv)
   Ersetzt die frühere Kork-Pinnwand-Optik.
   ================================================================== */

.ab-journal-wrap{
  padding: 3vw 6vw 6vw; display:flex; flex-direction:column; align-items:center;
}

.ab-notebook{
  position:relative;
  display:flex; align-items:flex-start;
  margin-top: 56px;
  max-width: 990px;
  width: 100%;
}
.ab-journal-page{ order:1; flex: 1 1 auto; min-width:0; }
.ab-notebook .ab-chapters{
  order:2; flex-shrink:0; position:relative; margin-left: -42px; z-index:1;
  display:flex; flex-direction:column; gap:1.3rem; list-style:none; padding:0;
}

/* ---- Menü-Tabs: hinter die obere Papierkante geklebt (Text bleibt sichtbar) ---- */
.ab-tabs-top{
  position:absolute; top:0; left:90px; transform: translateY(calc(-100% + 22px));
  display:flex; align-items:flex-end; gap:2px; list-style:none; margin:0; padding:0; z-index:1;
}
.ab-tabs-top li{
  background: var(--polaroid); font-family:'Caveat', cursive; font-size:1.3rem; font-weight:600;
  border-radius:12px 12px 0 0;
  transform: rotate(-1.5deg); color:var(--ink-soft);
  list-style:none;
  transition: transform .2s ease;
}
.ab-tabs-top li:nth-child(2){ transform: rotate(1deg); }
.ab-tabs-top li:nth-child(3){ transform: rotate(-1deg); }
.ab-tabs-top li:nth-child(4){ transform: rotate(1.5deg); }
.ab-tabs-top li:hover{ transform: translateY(-14px) rotate(0deg); }
.ab-tabs-top li a{
  display:block; padding: .65rem 1.6rem 1.2rem; color:inherit; text-decoration:none;
}
.ab-tabs-top li.current-menu-item{ color:var(--rust); transform: translateY(-14px) rotate(0deg); }

/* Echtes Header-Menü auf der Startseite ausblenden, da die Tabs oben
   eine eigene Kopie davon zeigen (identischer Inhalt, andere Optik). */
body.ab-notebook-page .main-navigation{ display:none; }

/* ---- Kapitel-Register: verspielt, an der rechten Papierkante ---- */
.ab-notebook .ab-chapters li{
  position:relative; background: var(--paper-dark); color: #1f1d19;
  font-family:'Caveat', cursive; font-size:1.1rem; font-weight:700; line-height:1.2;
  padding:.7rem 1.4rem .65rem 2.6rem; width:190px;
  white-space:normal; word-break:break-word;
  clip-path: polygon(0 6%, 90% 0, 100% 18%, 97% 52%, 100% 86%, 88% 100%, 0 94%);
  box-shadow: 3px 4px 9px rgba(43,42,38,.3); transform: rotate(-3deg);
  transition: transform .2s ease;
}
.ab-notebook .ab-chapters li:nth-child(4n+1){ background: #ddc9a3; transform: rotate(-3deg); }
.ab-notebook .ab-chapters li:nth-child(4n+2){ background: #d9c9ae; transform: rotate(2.5deg); margin-left: -8px; }
.ab-notebook .ab-chapters li:nth-child(4n+3){ background: #e0cfa8; transform: rotate(-2deg); margin-left: 6px; }
.ab-notebook .ab-chapters li:nth-child(4n+4){ background: #d5c39c; transform: rotate(3.5deg); margin-left: -14px; }
.ab-notebook .ab-chapters li:hover{
  transform: translateX(18px) rotate(-0.5deg);
}
.ab-notebook .ab-chapters li.active{
  transform: translateX(18px) rotate(-0.5deg) !important;
}
.ab-notebook .ab-chapters li a{ color:inherit; text-decoration:none; display:block; }
.ab-notebook .ab-chapters .ep{
  display:block; font-family:'Space Mono', monospace; text-transform:uppercase; letter-spacing:.08em;
  font-size:.6rem; color:var(--purple); margin-bottom:2px;
}
.ab-notebook .ab-empty-tab{ font-family:'Caveat', cursive; font-size:1rem; text-align:right; padding:.6rem 0; }

/* ---- Die Seite selbst ---- */
.ab-journal-page{
  position:relative; z-index:2;
  background:
    repeating-linear-gradient(to bottom, transparent, transparent 34px, rgba(58,107,104,.14) 34px, rgba(58,107,104,.14) 35px),
    var(--polaroid);
  border-radius: 0 3px 3px 3px;
  padding: 4rem 3.5rem 2.5rem 5.5rem;
}
.ab-journal-page::before{
  content:""; position:absolute; top:0; bottom:0; left:70px; width:1.5px; background: rgba(180,98,58,.35);
}
.ab-spiral{
  position:absolute; left:16px; top:0; bottom:0; width:24px;
  display:flex; flex-direction:column; justify-content:space-evenly; align-items:center;
}
.ab-spiral span{
  width:16px; height:16px; border-radius:50%; border:3px solid rgba(43,42,38,.25);
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--polaroid);
}

/* ---- Fotos: 2×2, angeklebt statt angepinnt ---- */
.ab-scrap-grid{
  display:grid; grid-template-columns: repeat(2, 340px); justify-content:center; gap: 3.2rem 4rem;
  list-style:none; margin:0; padding:0;
}
.ab-scrap{
  position:relative; background: var(--polaroid); padding:12px 12px 40px;
  box-shadow: 0 10px 24px -8px rgba(43,42,38,.4);
  margin:0;
}
.ab-scrap .ab-frame{ width:100%; aspect-ratio:1/1; overflow:hidden; }
.ab-scrap .ab-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.ab-scrap .ab-frame-placeholder{ width:100%; height:100%; background: linear-gradient(150deg,var(--teal),var(--purple)); }
.ab-scrap figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin-top:6px;
  font-family:'Caveat', cursive; font-size:1.4rem; color: var(--ink-soft);
}
.ab-scrap figcaption span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:75%; }
.ab-scrap figcaption .ab-no{ font-family:'Space Mono', monospace; font-size:.65rem; color: var(--purple); }
.ab-scrap:nth-child(4n+1){ transform: rotate(-2.5deg); }
.ab-scrap:nth-child(4n+2){ transform: rotate(2deg); margin-top:1.2rem; }
.ab-scrap:nth-child(4n+3){ transform: rotate(1.5deg); }
.ab-scrap:nth-child(4n+4){ transform: rotate(-2deg); margin-top:.8rem; }
.ab-tape-c{
  position:absolute; width:54px; height:26px; background: var(--tape); opacity:.78;
  box-shadow:0 1px 3px rgba(0,0,0,.15); top:-10px; left:36%; transform:rotate(-3deg);
}
.ab-scrap:nth-child(even) .ab-tape-c{ transform:rotate(4deg); }

/* ---- Seiten-Navigation ---- */
.ab-page-nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px dashed rgba(43,42,38,.2);
}
.ab-page-nav a{
  font-family:'Caveat', cursive; font-size:1.3rem; color: var(--rust); text-decoration:none;
}
.ab-page-nav a.ab-disabled{ color: rgba(87,84,76,.35); pointer-events:none; }
.ab-page-numbers{ display:flex; gap:.5rem; font-family:'Space Mono', monospace; font-size:.72rem; }
.ab-page-numbers span, .ab-page-numbers a{
  text-decoration:none; color:var(--ink-soft); width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.ab-page-numbers .ab-current{ background: var(--rust); color: var(--polaroid); font-weight:600; }

@media (max-width: 900px){
  .ab-notebook{ flex-direction:column; }
  .ab-notebook .ab-chapters{
    margin: 1rem 0 0; flex-direction:row; flex-wrap:wrap;
  }
  .ab-notebook .ab-chapters li{ transform:none !important; clip-path:none; margin-left:0 !important; }
  .ab-tabs-top{ position:static; transform:none; margin-bottom:1rem; }
  .ab-tabs-top li{ transform:none !important; }
  .ab-scrap-grid{ grid-template-columns: 1fr; }
  .ab-journal-page{ padding: 2.5rem 1.5rem 2rem 3rem; }
}