/*
 * Entry stylesheet of all pages: ONE file instead of eleven render-blocking <link>s.
 * Order = cascade (fonts, tokens, components, project). App\Asset\CssBundleCompiler inlines the @import lines
 * when the asset is compiled; new project stylesheets are added here, not in assets/app.js.
 */
/* ./design/fonts.css */
/*
 * Lokal ausgelieferte Webfonts (Poppins, Lora – SIL Open Font License 1.1).
 * Ersetzt das Laden von fonts.googleapis.com (keine IP-Übertragung an Google).
 */
/* Lora 400 italic – latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-400-italic-latin-ext-G2qDviE.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 400 italic – latin */
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-400-italic-latin-2IlCPRF.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora 400 normal – latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-400-latin-ext-xqeT-_n.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 400 normal – latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lora-400-latin-_BuAxlw.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora 500 normal – latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/lora-500-latin-ext-xqeT-_n.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 500 normal – latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/lora-500-latin-_BuAxlw.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora 700 normal – latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lora-700-latin-ext-xqeT-_n.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 700 normal – latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lora-700-latin-_BuAxlw.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 300 normal – latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/poppins-300-latin-ext-RSe1OiX.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 300 normal – latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/poppins-300-latin-ZrVH2EM.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 400 normal – latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-latin-ext-zc30_cW.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 400 normal – latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-latin-heQdAz3.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 500 normal – latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-latin-ext-UEujKhQ.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 500 normal – latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-latin-AuPgurU.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 600 normal – latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-latin-ext-yqhVVzG.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 600 normal – latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-latin-RV1hfMj.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 700 normal – latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-latin-ext-c8zWSwk.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 700 normal – latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-latin-5ePuYxR.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 800 normal – latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/poppins-800-latin-ext-Eo0-KAA.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 800 normal – latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/poppins-800-latin-5P7KlTU.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Genre-Schriften der Theme-Varianten (Oswald, Playfair Display, Fredoka, JetBrains Mono – SIL Open Font License 1.1),
 * einmalig von Google Fonts geladen und lokal ausgeliefert. Variable Fonts: eine Datei je Stil und Zeichensatz.
 */
/* Fredoka 500-700 – latin-ext */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/fredoka-500-700-latin-ext-4MyKwOB.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fredoka 500-700 – latin */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/fredoka-500-700-latin-tp8Uwyw.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 400-500 – latin-ext */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-400-500-latin-ext-c8h-btv.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 400-500 – latin */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-400-500-latin-AcnlIJe.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Oswald 500-700 – latin-ext */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/oswald-500-700-latin-ext-Swb1Iq_.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Oswald 500-700 – latin */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/oswald-500-700-latin-ujm345x.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display 500-600 italic – latin-ext */
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 500 600;
    font-display: swap;
    src: url("../fonts/playfair-display-500-600-italic-latin-ext-jNr8qja.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display 500-600 italic – latin */
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 500 600;
    font-display: swap;
    src: url("../fonts/playfair-display-500-600-italic-latin-7xINxBd.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display 600 – latin-ext */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/playfair-display-600-latin-ext-4V8MfZz.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display 600 – latin */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/playfair-display-600-latin-l_vgLHY.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ./design/tokens.css */
/*
 * BooksOnline Design-Tokens – erzeugt aus docs/design-system/tokens.json mit bin/build-design-system.
 * Nicht von Hand ändern: tokens.json ändern und neu erzeugen.
 */
:root,
[data-theme="light"] {
    --brand-navy: #314685;
    --brand-teal: #3facb1;
    --night-100: #161c2c;
    --night-200: #1e2538;
    --on-night: #ffffff;
    --on-night-body: #9aa3b5;
    --surface-100: #fbf9f5;
    --surface-200: #f3efe7;
    --surface-300: #e8e2d6;
    --ink: #141a2b;
    --ink-body: #474e60;
    --ink-muted: #5c6374;
    --primary: #314685;
    --primary-strong: #243463;
    --on-primary: #ffffff;
    --on-primary-accent: #9fe0e3;
    --accent: #3facb1;
    --accent-ink: #1b7277;
    --link-on-night: #4fc3c8;
    --highlight: #e9a23b;
    --on-highlight: #161c2c;
    --highlight-ink: #8a4f00;
    --trend-up: var(--accent-ink);
    --trend-down: #a8480c;
    --border: #e2dccf;
    --border-strong: #8c8678;
    --success: #2e7d4f;
    --danger: #b3261e;
    --shadow-cover: 0 1px 2px rgba(20,26,43,0.16), 0 10px 24px -6px rgba(20,26,43,0.28);
    --shadow-pop: 4px 4px 0 #1d2340;
}

[data-theme="dark"] {
    --brand-navy: #314685;
    --brand-teal: #3facb1;
    --night-100: #161c2c;
    --night-200: #1e2538;
    --on-night: #ffffff;
    --on-night-body: #9aa3b5;
    --surface-100: #161c2c;
    --surface-200: #1e2538;
    --surface-300: #2a3350;
    --ink: #ffffff;
    --ink-body: #a3abbd;
    --ink-muted: #8e97ab;
    --primary: #3450a6;
    --primary-strong: #3f5fc2;
    --on-primary: #ffffff;
    --on-primary-accent: #9fe0e3;
    --accent: #3facb1;
    --accent-ink: #4fc3c8;
    --link-on-night: #4fc3c8;
    --highlight: #e9a23b;
    --on-highlight: #161c2c;
    --highlight-ink: #f0b65c;
    --trend-up: var(--accent-ink);
    --trend-down: #f29a5e;
    --border: #2a3350;
    --border-strong: #66748f;
    --success: #6fcf97;
    --danger: #f2867e;
    --shadow-cover: 0 1px 2px rgba(0,0,0,0.4), 0 12px 28px -6px rgba(0,0,0,0.6);
}

[data-theme="krimi"] {
    --night-100: #0b0c0f;
    --night-200: #15171c;
    --on-night-body: #a8a49b;
    --surface-100: #121418;
    --surface-200: #1b1e24;
    --surface-300: #262a32;
    --ink: #f4f1ea;
    --ink-body: #b4b0a7;
    --ink-muted: #9a968d;
    --primary: #b3261e;
    --primary-strong: #8f1d17;
    --on-primary-accent: #ffc2b8;
    --accent: #d9452f;
    --accent-ink: #ff7a66;
    --link-on-night: #ff7a66;
    --highlight-ink: #f0b65c;
    --trend-up: #5cc8b4;
    --trend-down: #f29a5e;
    --border: #2a2e36;
    --border-strong: #6b707b;
    --success: #6fcf97;
    --danger: #f2867e;
}

[data-theme="romance"] {
    --night-100: #2b1622;
    --night-200: #3a1f2e;
    --on-night-body: #c9adb7;
    --surface-100: #fbf5f3;
    --surface-200: #f5e8e4;
    --surface-300: #ecd7d1;
    --ink: #2a1418;
    --ink-body: #5a4247;
    --ink-muted: #6e555a;
    --primary: #9c2f55;
    --primary-strong: #7a2242;
    --on-primary-accent: #ffd3e0;
    --accent: #e38aa5;
    --accent-ink: #9c2f55;
    --link-on-night: #f5a3bd;
    --trend-up: #1b7277;
    --border: #ead8d2;
    --border-strong: #9a7f85;
}

[data-theme="sachbuch"] {
    --surface-100: #f7f8fa;
    --surface-200: #eef1f5;
    --surface-300: #e1e6ee;
    --trend-up: var(--accent-ink);
    --border: #dfe3ea;
    --border-strong: #848b99;
}

[data-theme="kinder"] {
    --night-100: #1d2340;
    --night-200: #283057;
    --on-night-body: #c3c8e0;
    --surface-100: #fffaf0;
    --surface-200: #fff0cc;
    --surface-300: #ffe39a;
    --ink: #1d2340;
    --ink-body: #3f4566;
    --ink-muted: #555b7a;
    --primary: #2f5bd8;
    --primary-strong: #2147b0;
    --on-primary-accent: #ffe08a;
    --accent: #ff8a3d;
    --accent-ink: #b4470a;
    --link-on-night: #ffcf3d;
    --highlight: #ffcf3d;
    --on-highlight: #1d2340;
    --trend-up: #1b7a52;
    --trend-down: #b4470a;
    --border: #f0e2bd;
    --border-strong: #8a8466;
    --shadow-pop: 4px 4px 0 #1d2340;
}

[data-theme="mini"] {
    --night-100: #1c3330;
    --night-200: #26443f;
    --on-night-body: #bdd6d1;
    --surface-100: #f6fbf7;
    --surface-200: #e2f3ea;
    --surface-300: #c4e7d6;
    --ink: #1c3330;
    --ink-body: #3b524e;
    --ink-muted: #4f6762;
    --primary: #1a6b5e;
    --primary-strong: #134f45;
    --on-primary-accent: #ffdcad;
    --accent: #f2706b;
    --accent-ink: #a8352f;
    --link-on-night: #ffc46b;
    --highlight: #ffc46b;
    --on-highlight: #1c3330;
    --trend-up: #1b7a52;
    --trend-down: #a8352f;
    --border: #d3eadf;
    --border-strong: #6f8a80;
    --shadow-pop: 4px 4px 0 #1c3330;
}

:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 48px;
    --space-6: 96px;
    --radius-none: 0;
    --radius-cover: 2px;
    --radius-round: 50%;
    --radius-pill: 999px;
    --radius-soft: 16px;
    --font-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: Lora, Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
    --font-krimi: Oswald, "Arial Narrow", sans-serif;
    --font-romance: "Playfair Display", Lora, Georgia, serif;
    --font-kinder: Fredoka, Poppins, system-ui, sans-serif;
}
/* ./design/components.css */
/*
 * BooksOnline Komponenten – Kopie von docs/design-system/components/bundle.css (bin/build-design-system).
 * Nicht von Hand ändern: bundle.css ändern und neu erzeugen. Projekt-Ergänzungen in assets/styles/app.css.
 */
/* Schriften kommen lokal aus assets/styles/design/fonts.css (kein Google-Fonts-Import, keine externen Ressourcen). */
/* BookOnline — Schwester-System von BagsData. Klassen mit Präfix bo-, Wrapper .bo. Eckig (radius-none), nur Cover mit radius-cover. */
.bo, .bo *{box-sizing:border-box}
.bo{font-family:var(--font-sans);font-size:15px;line-height:24px;color:var(--ink-body);background:var(--surface-100);-webkit-font-smoothing:antialiased}
.bo :where(h1,h2,h3,h4,h5){font-family:var(--font-sans);color:var(--ink);margin:0}
.bo :where(p,ul,ol){margin:0;padding:0}
.bo :where(a){color:var(--accent-ink);text-decoration:none}
.bo :where(a,button,input):focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.bo-container{max-width:1240px;margin:0 auto;padding:0 24px}
.bo-section{padding:var(--space-6) 0}
.bo-section--alt{background:var(--surface-200)}
.bo-night{background:var(--night-100);color:var(--on-night-body)}
.bo-night :where(h1,h2,h3,h4,h5){color:var(--on-night)}
.bo-night :where(a){color:var(--link-on-night)}
.bo-night :where(a,button,input):focus-visible{outline-color:var(--link-on-night)}

/* Zickzack-Titel (wie BagsData) */
.bo-zigzag{display:block;width:40px;height:12px;margin-bottom:10px;color:var(--accent)}
.bo-zigzag path{fill:none;stroke:currentColor;stroke-width:2.5}
.bo-title{font-size:36px;line-height:40px;font-weight:700;letter-spacing:-1.8px;color:var(--ink)}
.bo-lead{font-family:var(--font-serif);font-size:20px;line-height:32px;font-weight:500;color:var(--ink-body);margin-top:16px;max-width:640px}
.bo-stand{font-family:var(--font-serif);font-size:13px;line-height:20px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-muted)}
.bo-sectionhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}

/* Buttons */
.bo-btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-sans);font-size:15px;line-height:24px;font-weight:600;padding:13px 24px;border:3px solid var(--primary);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.bo-btn:hover{background:var(--primary);color:var(--on-primary)}
.bo-btn__arrow{width:18px;height:12px;flex:none}
.bo-btn__arrow path{fill:none;stroke:currentColor;stroke-width:2}
.bo-btn--solid{background:var(--primary);color:var(--on-primary)}
.bo-btn--solid:hover{background:var(--primary-strong);border-color:var(--primary-strong)}
.bo-btn--link{padding:0;border:0;color:var(--accent-ink);font-weight:700}
.bo-btn--link:hover{background:none;color:var(--ink)}
.bo-btn--sm{padding:7px 14px;font-size:14px;border-width:2px}
.bo-night .bo-btn:not(.bo-btn--solid):not(.bo-btn--link){border-color:var(--accent);color:var(--on-night)}
.bo-night .bo-btn:not(.bo-btn--solid):not(.bo-btn--link):hover{background:var(--accent);color:var(--night-100)}
.bo-night .bo-btn--link{color:var(--link-on-night)}
.bo-night .bo-btn--link:hover{color:var(--on-night)}

/* Badges */
.bo-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;padding:3px 8px;border-radius:0;background:var(--surface-300);color:var(--ink)}
.bo-badge--top{background:var(--highlight);color:var(--on-highlight)}
.bo-badge--new{background:var(--primary);color:var(--on-primary)}
.bo-badge--outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border-strong);color:var(--ink-muted)}
.bo-night .bo-badge:not(.bo-badge--top):not(.bo-badge--new){background:var(--night-200);color:var(--on-night)}

/* Trend */
.bo-trend{display:inline-flex;align-items:center;gap:3px;font-size:13px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums}
.bo-trend svg{width:10px;height:10px}
.bo-trend--up{color:var(--trend-up)}
.bo-trend--down{color:var(--trend-down)}
.bo-trend--same{color:var(--ink-muted)}
.bo-trend--new{color:var(--highlight-ink)}

/* Buchcover */
.bo-cover{position:relative;display:block;width:120px;aspect-ratio:2/3;border-radius:var(--radius-cover);overflow:hidden;box-shadow:var(--shadow-cover);background:var(--surface-300);flex:none}
.bo-cover img{display:block;width:100%;height:100%;object-fit:cover}
/* Mit Bild: das Cover liegt über dem Platzhalter (der beim Laden oder ohne Bild sichtbar bleibt), die Rückenlinie darüber */
.bo-cover img{position:absolute;inset:0;z-index:1}
.bo-cover::after{z-index:2}
.bo-cover::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;background:rgba(0,0,0,.16)}
.bo-cover--xs{width:44px}
.bo-cover--sm{width:72px}
.bo-cover--lg{width:200px}
/* Platzhalter ohne Bild: Titel und Autor:in auf Markenfarbe */
.bo-cover__ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12% 12% 14% 16%;color:#ffffff}
.bo-cover__ph b{font-family:var(--font-serif);font-weight:700;font-size:1em;line-height:1.15}
.bo-cover__ph i{font-style:normal;font-family:var(--font-sans);font-size:.62em;line-height:1.3;font-weight:500;opacity:.85}
.bo-cover__ph::before{content:"";position:absolute;left:16%;bottom:34%;width:22%;height:2px;background:var(--on-primary-accent)}
.bo-cover--navy{background:var(--brand-navy)}
.bo-cover--teal{background:#1f6f73}
.bo-cover--night{background:var(--night-200)}
.bo-cover--amber{background:var(--highlight)}
.bo-cover--amber .bo-cover__ph{color:var(--on-highlight)}
.bo-cover--amber .bo-cover__ph::before{background:var(--night-100)}
.bo-cover{font-size:15px}
.bo-cover--xs{font-size:0}
.bo-cover--sm{font-size:10px}
.bo-cover--lg{font-size:22px}
/* Gestaltetes Cover für Ausgaben ohne Bild: Gattung oben, Titel und Autor:in, Verlag unten */
.bo-cover--edition .bo-cover__ph{justify-content:flex-start;gap:.45em}
.bo-cover--edition .bo-cover__ph::before{content:none}
.bo-cover__kicker{font-family:var(--font-sans);font-size:.5em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;opacity:.8;padding-bottom:.6em;border-bottom:1px solid currentColor}
.bo-cover--edition .bo-cover__ph b{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;margin-top:.3em;overflow-wrap:anywhere;hyphens:auto}
.bo-cover__imprint{margin-top:auto;font-family:var(--font-sans);font-size:.48em;font-weight:500;line-height:1.3;opacity:.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bo-cover__imprint::before{content:"";display:block;width:2.6em;height:2px;margin-bottom:.7em;background:var(--on-primary-accent)}
.bo-cover--amber .bo-cover__imprint::before{background:var(--night-100)}
.bo-cover__kicker,.bo-cover--edition .bo-cover__ph i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bo-cover--edition .bo-cover__ph i{-webkit-line-clamp:3}
/* Klein (Listen): nur Gattung und Titel – Autor:in und Verlag stehen daneben */
.bo-cover--edition.bo-cover--sm .bo-cover__ph i,.bo-cover--edition.bo-cover--sm .bo-cover__imprint{display:none}
.bo-cover--edition.bo-cover--sm .bo-cover__ph b{-webkit-line-clamp:5}

/* Buch-Karte */
.bo-book{display:flex;flex-direction:column;gap:16px;color:inherit;text-decoration:none}
.bo-book__cover{position:relative;align-self:flex-start}
.bo-book__cover .bo-badge{position:absolute;left:-6px;top:10px;z-index:1}
.bo-book__title{font-family:var(--font-serif);font-size:19px;line-height:25px;font-weight:700;color:var(--ink);transition:color .2s}
.bo-book__author{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted);margin-top:4px}
.bo-book__meta{display:flex;align-items:center;gap:8px;font-size:13px;line-height:20px;color:var(--ink-muted);margin-top:8px}
.bo-book:hover .bo-book__title{color:var(--accent-ink)}
.bo-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:48px 24px}
.bo-shelf .bo-book__cover{align-self:stretch}
.bo-shelf .bo-cover{width:100%}

/* Bestsellerliste */
.bo-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.bo-row{display:grid;grid-template-columns:64px 44px 1fr auto;align-items:center;gap:24px;padding:16px;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;transition:background-color .2s}
.bo-row:hover{background:var(--surface-200)}
.bo-row__rank{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.bo-row__rank strong{font-size:40px;line-height:40px;font-weight:800;letter-spacing:-2px;color:var(--ink);font-variant-numeric:tabular-nums}
.bo-row--top .bo-row__rank strong{color:var(--highlight-ink)}
.bo-row__title{font-family:var(--font-serif);font-size:19px;line-height:25px;font-weight:700;color:var(--ink)}
.bo-row__author{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted);margin-top:2px}
.bo-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;font-size:13px;line-height:20px;color:var(--ink-muted)}
.bo-row:hover .bo-row__title{color:var(--accent-ink)}
.bo-source{font-size:13px;line-height:20px;color:var(--ink-muted);margin-top:16px}

/* Listen-Tabs */
.bo-tabs{display:flex;flex-wrap:wrap;gap:8px}
.bo-tab{font-family:var(--font-sans);font-size:15px;line-height:24px;font-weight:600;padding:8px 16px;border:2px solid var(--border-strong);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.bo-tab:hover{border-color:var(--primary)}
.bo-tab[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}

/* Suche */
.bo-search{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--surface-100);border:2px solid var(--border-strong);border-radius:0;min-width:260px}
.bo-search svg{width:18px;height:18px;flex:none;color:var(--ink-muted)}
.bo-search svg *{fill:none;stroke:currentColor;stroke-width:2}
.bo-search input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--font-sans);font-size:15px;color:var(--ink);outline:none}
.bo-search input::placeholder{color:var(--ink-muted);opacity:1}
.bo-search:focus-within{border-color:var(--accent-ink);outline:1px solid var(--accent-ink)}
.bo-night .bo-search{background:var(--night-200);border-color:#66748f}
.bo-night .bo-search svg{color:var(--on-night-body)}
.bo-night .bo-search input{color:var(--on-night)}
.bo-night .bo-search input::placeholder{color:var(--on-night-body)}
.bo-night .bo-search:focus-within{border-color:var(--link-on-night);outline-color:var(--link-on-night)}

/* Header */
.bo-header{background:var(--night-100);color:var(--on-night-body)}
.bo-header .bo-container{display:flex;align-items:center;gap:32px;height:88px}
.bo-wordmark{display:inline-flex;align-items:center;gap:0;white-space:nowrap;font-family:var(--font-sans);font-size:24px;line-height:24px;font-weight:800;letter-spacing:-1.2px;color:var(--on-night) !important;text-decoration:none}
.bo-wordmark span{color:var(--link-on-night)}
.bo-wordmark svg{width:26px;height:20px;margin-right:10px;color:var(--accent)}
.bo-wordmark svg path{fill:none;stroke:currentColor;stroke-width:3}
.bo-wordmark__symbol{width:36px;height:36px;margin-right:10px;flex-shrink:0;object-fit:contain}
.bo-wordmark--ink{color:var(--ink) !important}
.bo-wordmark--ink span{color:var(--accent-ink)}
.bo-nav{display:flex;gap:4px;margin-right:auto}
.bo-nav a{font-size:15px;line-height:24px;font-weight:600;letter-spacing:-.5px;color:var(--on-night) !important;padding:6px 12px;transition:color .2s}
.bo-nav a:hover,.bo-nav a[aria-current="page"]{color:var(--link-on-night) !important}
.bo-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent)}

/* Hero: Buch der Woche */
.bo-hero{position:relative;overflow:hidden;background:var(--night-100);color:var(--on-night-body);padding:72px 0 120px}
.bo-hero .bo-container{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center}
.bo-hero__kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bo-hero h1{font-size:48px;line-height:54px;font-weight:800;letter-spacing:-2.4px;color:var(--on-night);margin:0 0 24px;max-width:640px}
.bo-hero h1 em{font-style:normal;color:var(--link-on-night)}
.bo-hero__book{font-family:var(--font-serif);font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.5px;color:var(--on-night)}
.bo-hero__author{font-size:15px;color:var(--on-night-body);margin:4px 0 16px}
.bo-hero__blurb{font-family:var(--font-serif);font-size:17px;line-height:28px;max-width:560px;margin-bottom:32px}
.bo-hero__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.bo-hero__stage{position:relative;padding:24px 40px 0 0}
.bo-hero__stage::before{content:"";position:absolute;right:0;top:0;width:200px;height:260px;background:var(--primary)}
.bo-hero__stage .bo-cover{position:relative}
.bo-hero__angle{position:absolute;left:-5%;right:-5%;bottom:-56px;height:100px;background:var(--surface-100);transform:rotate(-2deg);z-index:3}
.bo-circle{position:absolute;z-index:2;border-radius:50%;pointer-events:none}
.bo-circle--1{width:33px;height:33px;background:var(--accent)}
.bo-circle--2{width:14px;height:14px;background:var(--highlight)}

/* Footer */
.bo-footer{background:var(--night-200);color:var(--on-night-body);padding:72px 0 40px;font-size:13px;line-height:20px}
.bo-footer__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.bo-footer p{font-size:15px;line-height:24px;max-width:380px;margin-top:16px}
.bo-footer h5{font-size:15px;line-height:24px;font-weight:700;color:var(--on-night);margin-bottom:12px}
.bo-footer ul{list-style:none}
.bo-footer li{margin-bottom:8px}
.bo-footer li a{color:var(--on-night-body) !important;font-size:14px}
.bo-footer li a:hover{color:var(--link-on-night) !important}
.bo-footer__bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid #2a3350;margin-top:48px;padding-top:24px}

/* Hero mit Bild (Lummi-Motiv): Bild rechts, links mit night-100 abgedunkelt */
.bo-hero--image{background:var(--night-100) var(--bo-img) right center/cover no-repeat}
.bo-hero--image::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--night-100) 0%,var(--night-100) 34%,rgba(0,0,0,0) 78%)}
.bo-hero--image::after{content:"";position:absolute;inset:0;z-index:1;background:var(--night-100);opacity:.62}
.bo-hero--image .bo-hero__stage::before{display:none}
/* Genre-Teaser mit Bild */
.bo-genres{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bo-genre{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;padding:24px;overflow:hidden;background:var(--night-200) var(--bo-img) center/cover no-repeat;color:var(--on-night) !important;text-decoration:none}
/* Ohne --bo-img ist die Kurzschreibweise oben ungültig (transparent): die Fläche bleibt dann night-200 */
.bo-genre{background-color:var(--night-200)}
.bo-hero{background-color:var(--night-100)}
.bo-genre::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--night-100) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.1) 100%);transition:opacity .3s}
.bo-genre > *{position:relative}
.bo-genre b{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.8px}
.bo-genre span{font-size:14px;color:var(--on-night-body)}
.bo-genre:hover::before{opacity:.85}

/* ===== Domains: Genre-Regeln. Gelten unter data-theme="<genre>" (auf <html> der Domain oder einem Wrapper). ===== */
/* Krimi – größter Abstand: Noir, Rot, Oswald in Versalien, harte Kanten, steile Schräge */
[data-theme="krimi"] .bo-title,[data-theme="krimi"] .bo-hero h1,[data-theme="krimi"] .bo-genre b{font-family:var(--font-krimi);text-transform:uppercase;letter-spacing:0;font-weight:700}
[data-theme="krimi"] .bo-hero h1{font-size:56px;line-height:56px}
[data-theme="krimi"] .bo-row__rank strong{font-family:var(--font-krimi);letter-spacing:0}
[data-theme="krimi"] .bo-zigzag{height:6px;width:56px;background:var(--accent)}
[data-theme="krimi"] .bo-zigzag path{display:none}
[data-theme="krimi"] .bo-hero__angle{transform:rotate(-4deg);bottom:-70px}
[data-theme="krimi"] .bo-cover{border-radius:0;filter:saturate(.7) contrast(1.1)}
[data-theme="krimi"] .bo-wordmark span{color:var(--link-on-night)}
/* Romance – mittlerer Abstand: Rosé, Playfair kursiv, Pillen statt Ecken */
[data-theme="romance"] .bo-title,[data-theme="romance"] .bo-hero h1,[data-theme="romance"] .bo-genre b{font-family:var(--font-romance);font-style:italic;font-weight:600;letter-spacing:0}
[data-theme="romance"] .bo-btn,[data-theme="romance"] .bo-tab,[data-theme="romance"] .bo-badge,[data-theme="romance"] .bo-search{border-radius:var(--radius-pill)}
[data-theme="romance"] .bo-cover{border-radius:4px}
[data-theme="romance"] .bo-hero__angle{transform:none;height:80px;bottom:-40px;border-radius:50% 50% 0 0 / 100% 100% 0 0;left:-10%;right:-10%}
[data-theme="romance"] .bo-hero__stage::before{border-radius:999px 999px 0 0}
/* Sachbuch – kleinster Abstand: Grundfarben, kühles Papier, Mono-Labels, Linien statt Flächen */
[data-theme="sachbuch"] .bo-stand,[data-theme="sachbuch"] .bo-badge,[data-theme="sachbuch"] .bo-row__side{font-family:var(--font-mono);letter-spacing:.8px}
[data-theme="sachbuch"] .bo-row__rank strong{font-family:var(--font-mono);font-weight:500;font-size:32px;letter-spacing:-1px}
[data-theme="sachbuch"] .bo-badge:not(.bo-badge--top):not(.bo-badge--new){background:transparent;box-shadow:inset 0 0 0 1.5px var(--border-strong);color:var(--ink)}
[data-theme="sachbuch"] .bo-zigzag{height:2px;width:40px;background:var(--accent)}
[data-theme="sachbuch"] .bo-zigzag path{display:none}
[data-theme="sachbuch"] .bo-hero__angle{transform:none;height:0}
/* Kinderbuch – großer Abstand: Gelb/Blau, Fredoka, runde Formen, Versatz-Schatten */
:is([data-theme="kinder"],[data-theme="mini"]) .bo-title,:is([data-theme="kinder"],[data-theme="mini"]) .bo-hero h1,:is([data-theme="kinder"],[data-theme="mini"]) .bo-genre b,:is([data-theme="kinder"],[data-theme="mini"]) .bo-wordmark{font-family:var(--font-kinder);letter-spacing:-.5px}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-btn,:is([data-theme="kinder"],[data-theme="mini"]) .bo-tab,:is([data-theme="kinder"],[data-theme="mini"]) .bo-badge{border-radius:var(--radius-pill)}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-btn--solid,:is([data-theme="kinder"],[data-theme="mini"]) .bo-tab[aria-selected="true"]{box-shadow:var(--shadow-pop)}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-search,:is([data-theme="kinder"],[data-theme="mini"]) .bo-genre,:is([data-theme="kinder"],[data-theme="mini"]) .bo-hero__stage::before{border-radius:var(--radius-soft)}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-cover{border-radius:10px;box-shadow:var(--shadow-pop)}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-cover::after{display:none}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-zigzag{color:var(--accent);width:56px;height:16px}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-zigzag path{stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-hero__angle{transform:none;height:60px;bottom:-30px;border-radius:50%;left:-20%;right:-20%}
:is([data-theme="kinder"],[data-theme="mini"]) .bo-row:hover{background:var(--surface-200);border-radius:var(--radius-soft)}

/* Responsiv */
@media (max-width:760px){
  .bo-genres{grid-template-columns:1fr 1fr}
  .bo-hero .bo-container{grid-template-columns:1fr}
  .bo-hero h1{font-size:36px;line-height:40px;letter-spacing:-1.8px}
  .bo-row{grid-template-columns:44px 44px 1fr;gap:16px;padding:12px 0}
  .bo-row__side{display:none}
  .bo-footer__top{grid-template-columns:1fr 1fr}
  .bo-nav{display:none}
  .bo-section{padding:var(--space-5) 0}
}
@media (prefers-reduced-motion:reduce){.bo *{transition:none !important}}

/* ===== Listen-Darstellungen je Domain (Site::listLayout): list = .bo-list, shelf = .bo-shelfpick, carousel = .bo-carousel ===== */

/* Buch-Details: Panel zum ausgewählten Buch in Regal und Karussell */
.bo-detail{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:32px;background:var(--surface-200)}
.bo-detail[hidden]{display:none}
.bo-detail__rank{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.bo-detail__title{font-family:var(--font-serif);font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.5px;color:var(--ink)}
.bo-detail__author{font-size:15px;line-height:24px;font-weight:500;color:var(--ink-muted);margin-top:4px}
.bo-detail__facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:13px;line-height:20px;color:var(--ink-muted)}
.bo-detail__facts strong{display:block;font-size:22px;line-height:28px;font-weight:700;color:var(--ink)}
.bo-detail__rating strong{color:var(--highlight-ink)}

/* Buchregal: Cover stehen auf einem Brett; ein Klick wählt ein Buch, das Panel darunter zeigt es */
.bo-shelfpick__shelf{list-style:none;margin:0;padding:0 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,104px));justify-content:center;align-items:end;gap:16px}
.bo-shelfpick__book{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;transition:transform .25s}
.bo-shelfpick__book .bo-cover{width:100%;font-size:11px}
.bo-shelfpick__book:hover{transform:translateY(-6px)}
.bo-shelfpick__book[aria-expanded="true"]{transform:translateY(-14px)}
.bo-shelfpick__book[aria-expanded="true"] .bo-cover{outline:3px solid var(--accent);outline-offset:3px}
.bo-shelfpick__book .bo-badge{position:absolute;left:-6px;top:8px;z-index:1}
.bo-shelfpick__board{height:12px;margin:0 0 32px;background:var(--ink);box-shadow:0 6px 0 var(--surface-300)}
.bo-shelfpick__details{display:grid;gap:16px}
.bo-shelfpick.is-enhanced .bo-shelfpick__details{gap:0}

/* Karussell: Cover auf einem drehbaren Ring; ohne JavaScript eine wischbare Reihe */
.bo-carousel__stage{position:relative;outline:none}
.bo-carousel__ring{list-style:none;margin:0;padding:8px 0 24px;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory}
.bo-carousel__item{flex:none;scroll-snap-align:center}
.bo-carousel__item .bo-cover{width:140px;font-size:13px}
.bo-carousel__controls{display:flex;align-items:center;justify-content:center;gap:24px;margin:8px 0 32px}
.bo-carousel__status{min-width:160px;text-align:center;font-size:13px;line-height:20px;color:var(--ink-muted)}
.bo-carousel__details{display:grid;gap:16px}
.bo-carousel:not(.is-enhanced) .bo-carousel__controls{display:none}
/* Mit JavaScript: echter Ring in 3D. --n Bücher, --i Platz im Ring, --turn aktuelles Buch, --radius vom Controller */
.bo-carousel.is-enhanced .bo-carousel__stage{height:300px;perspective:1100px;overflow:hidden}
.bo-carousel.is-enhanced .bo-carousel__ring{position:absolute;left:50%;top:24px;width:140px;height:210px;margin-left:-70px;padding:0;overflow:visible;transform-style:preserve-3d;transform:translateZ(calc(var(--radius) * -1)) rotateY(calc(var(--turn) * -360deg / var(--n)));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bo-carousel.is-enhanced .bo-carousel__item{position:absolute;inset:0;transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--radius));transition:opacity .4s;opacity:.45;cursor:pointer}
.bo-carousel.is-enhanced .bo-carousel__item.is-current{opacity:1;cursor:default}
.bo-carousel.is-enhanced .bo-carousel__details{gap:0}

@media (max-width:760px){
  .bo-detail{grid-template-columns:1fr;padding:24px}
  .bo-detail .bo-cover--lg{width:120px;font-size:15px}
  .bo-shelfpick__shelf{display:flex;justify-content:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-top:20px;margin-top:-20px}
  .bo-shelfpick__shelf > li{flex:0 0 76px;scroll-snap-align:start}
  .bo-carousel.is-enhanced .bo-carousel__stage{perspective:800px}
  .bo-carousel__controls{gap:12px}
  .bo-carousel__status{min-width:0;flex:1}
}
@media (prefers-reduced-motion:reduce){.bo-carousel.is-enhanced .bo-carousel__ring,.bo-shelfpick__book{transition:none}}
/* Karussell mit three.js (Klasse is-webgl vom Controller): das Canvas ersetzt den CSS-Ring; Screenreader bekommen das Buch über Statuszeile und Info-Panel */
.bo-carousel__canvas{display:none}
.bo-carousel.is-webgl .bo-carousel__canvas{display:block;position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.bo-carousel.is-webgl .bo-carousel__ring{visibility:hidden}

/* Genre-Seiten: Genre-Navigation als Links (ListTabs-Klassen, aktive Seite über aria-current) */
.bo-tab[aria-current="page"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
a.bo-tab{display:inline-block;text-decoration:none}
.bo-genre-nav{margin-top:48px}

/* Kauf-Link (Amazon-Partnerlink, als Werbung mit * gekennzeichnet) */
.bo-buy{display:inline-block;margin-top:4px;font-size:13px;line-height:20px;font-weight:600;color:var(--accent-ink)}
.bo-buy:hover{color:var(--ink)}
.bo-detail__buy{margin-top:24px}
.bo-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bo-detail__original{font-family:var(--font-serif);font-style:italic;font-size:14px;line-height:20px;color:var(--ink-muted);margin-top:4px}
/* ./app.css */
/* Projektweite Ergänzungen zum BooksOnline-Design (Tokens und bo-Komponenten liegen unter styles/design/). */
html {
    background: var(--surface-100);
}

body {
    margin: 0;
}

/* The page wrapper lets the ambient layer (z-index -1, behind the content) show through; html carries the colour. */
body > .bo {
    background: transparent;
}

.bo-skip-link {
    position: absolute;
    left: -9999px;
}

.bo-skip-link:focus {
    left: var(--space-3);
    top: var(--space-3);
    z-index: 10;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-200);
    color: var(--ink);
    outline: 3px solid var(--accent-ink);
}

/* Die Vorschauen des Design-Systems setzen diese Werte inline. */
.bo-row__author {
    display: block;
}

.bo-night .bo-stand {
    color: var(--on-night-body);
}

.bo-hero .bo-circle--1 {
    left: 46%;
    top: 56px;
}

.bo-hero .bo-circle--2 {
    left: 52%;
    top: 300px;
}

/* Die Navigation trägt alle Listen einer Domain und darf umbrechen. */
.bo-header .bo-nav {
    flex-wrap: wrap;
}

/*
 * Der Seitenkopf bleibt beim Scrollen oben stehen. Über den Inhalten (Hero-Deko bis z-index 4, Container 1),
 * unter dem Sprunglink (10). Anker und der Sprung zu #main landen unterhalb des Kopfes.
 */
html {
    scroll-padding-top: var(--bo-header-height, 88px);
}

.bo-header {
    position: sticky;
    top: 0;
    z-index: 8;
}

/*
 * Menü: auf breiten Bildschirmen ist die Navigation die Leiste im Kopf. Sie ist zugleich ein Popover für die
 * mobile Liste, deshalb werden hier die Standardstile des Popovers (fest, zentriert, Rahmen) zurückgesetzt.
 */
.bo-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: calc(-1 * var(--space-2));
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--on-night);
    cursor: pointer;
}

.bo-menu:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.bo-menu__close,
.bo-header:has(.bo-nav:popover-open) .bo-menu__open {
    display: none;
}

.bo-header:has(.bo-nav:popover-open) .bo-menu__close {
    display: block;
}

@media (min-width: 761px) {
    .bo-header .bo-nav[popover] {
        position: static;
        inset: auto;
        display: flex;
        width: auto;
        height: auto;
        margin: 0 auto 0 0;
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        color: inherit;
    }
}

/* Hinweis, solange eine Liste noch keinen Import hat. */
.bo-empty {
    padding: var(--space-3) 0;
    color: var(--ink-muted);
}

/* Längere Site-Namen als „BookOnline“ passen mobil nicht in die halbe Footer-Spalte des Systems. */
@media (max-width: 480px) {
    .bo-footer__top {
        grid-template-columns: 1fr;
    }
}

/* Zehn Genre-Kacheln: etwas niedriger als die 280 px des Systems, damit die Übersicht kompakt bleibt. */
.bo-genres .bo-genre {
    min-height: 220px;
}

/* Rechtstexte (Impressum, Datenschutz): linksbündig unter dem Seitenkopf, Zeilen höchstens 760 px. */
.bo-legal > * {
    max-width: 760px;
}

.bo-legal h2 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.8px;
    margin: var(--space-5) 0 var(--space-3);
}

.bo-legal p,
.bo-legal li {
    font-size: 16px;
    line-height: 26px;
    margin: 0 0 var(--space-3);
}

.bo-legal__list {
    padding-left: var(--space-4);
}

.bo-legal__contact {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font-size: 16px;
    line-height: 26px;
}

.bo-legal__contact dt {
    color: var(--ink-muted);
}

.bo-legal__contact dd {
    margin: 0;
}

/* Tipp der Woche im Hero der Startseite: der Verlagsnachweis klein unter den Buttons, auch auf dunklem Grund lesbar. */
.bo-hero__credit {
    margin: var(--space-3) 0 0;
    color: inherit;
    opacity: .75;
}

/* Admin-Bereich (/admin auf lesealarm.de): schlichte Tabellen, auf dem Handy waagerecht scrollbar. */
.bo-admin h2 {
    font-size: 22px;
    line-height: 28px;
    margin: var(--space-5) 0 var(--space-3);
}

.bo-admin table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 22px;
}

.bo-admin th,
.bo-admin td {
    padding: var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.bo-admin th {
    color: var(--ink-muted);
    font-weight: 600;
}

.bo-admin h3 {
    font-size: 16px;
    margin: var(--space-3) 0 var(--space-1);
}

.bo-admin__author {
    margin: var(--space-2) 0;
}

.bo-admin__author summary {
    cursor: pointer;
    font-weight: 600;
}

.bo-admin__count,
.bo-admin__hidden {
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 400;
}

.bo-admin__error {
    color: var(--danger);
}

.bo-admin__cover {
    width: 56px;
}

/* Erlaubnis vorhanden (Cover und Klappentext dürfen gezeigt werden): grün, in jedem Theme lesbar. */
.bo-admin .bo-badge--allowed {
    background: var(--success);
    color: var(--surface-100);
}

.bo-admin__notice {
    margin: 0 0 var(--space-3);
    font-weight: 600;
}

/* Kleine Formulare: ISBN-Korrektur (/admin/bestseller), Erneut/Löschen (/admin/jobs) */
.bo-admin__isbn,
.bo-admin__form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.bo-admin__isbn input,
.bo-admin__isbn button,
.bo-admin__form input,
.bo-admin__form select,
.bo-admin__form button {
    font: inherit;
    padding: 2px var(--space-1);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--ink);
}

.bo-admin__isbn input[aria-invalid="true"] {
    border-color: var(--danger);
}

.bo-admin__isbn button,
.bo-admin__form button {
    cursor: pointer;
}

.bo-admin__params {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-2);
    margin: var(--space-1) 0;
    font-size: 14px;
}

.bo-admin__params dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.bo-admin__trace {
    max-width: 60ch;
    max-height: 20em;
    overflow: auto;
    font-size: 12px;
    white-space: pre-wrap;
}

.bo-admin__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ===== Mobil (≤ 760 px): nichts darf die Seite verbreitern, alles in Daumenreichweite ===== */
@media (max-width: 760px) {
    /* Kopf einer Liste: „Ganze Top 10“ rutscht unter den Titel statt über den Rand. */
    .bo-sectionhead {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .bo-title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -1px;
    }

    .bo-lead {
        font-size: 17px;
        line-height: 27px;
    }

    /* Mobil: Wortmarke und Menü-Knopf in einer Zeile, die Listen öffnen sich darunter (siehe „Menü“ oben). */
    html {
        --bo-header-height: 64px;
    }

    .bo-header .bo-container {
        justify-content: space-between;
        gap: var(--space-3);
        height: var(--bo-header-height);
    }

    .bo-menu {
        display: inline-flex;
    }

    .bo-header .bo-nav:popover-open {
        position: fixed;
        inset: var(--bo-header-height) 0 auto;
        display: flex;
        flex-direction: column;
        width: auto;
        max-height: calc(100dvh - var(--bo-header-height));
        margin: 0;
        padding: var(--space-2) var(--space-4) var(--space-4);
        overflow-y: auto;
        border: 0;
        border-top: 1px solid color-mix(in srgb, var(--on-night) 18%, transparent);
        background: var(--night-100);
        color: var(--on-night);
    }

    .bo-header .bo-nav::backdrop {
        inset: var(--bo-header-height) 0 0;
        background: color-mix(in srgb, var(--night-100) 55%, transparent);
    }

    .bo-header .bo-nav a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 var(--space-2);
        border-bottom: 1px solid color-mix(in srgb, var(--on-night) 12%, transparent);
        font-size: 17px;
    }

    .bo-header .bo-nav a:last-child {
        border-bottom: 0;
    }

    .bo-header .bo-nav a[aria-current="page"] {
        box-shadow: none;
        color: var(--accent) !important;
    }

    /* Hero kompakt: Text und kleines Cover passen in einen Bildschirm. */
    .bo-hero {
        padding: var(--space-4) 0 72px;
    }

    .bo-hero .bo-container {
        gap: var(--space-4);
    }

    .bo-hero__book {
        font-size: 24px;
        line-height: 30px;
    }

    .bo-hero__stage {
        order: -1;
        padding: 0;
    }

    .bo-hero__stage .bo-cover--lg {
        width: 120px;
        font-size: 14px;
    }

    .bo-hero__actions {
        gap: var(--space-2) var(--space-3);
    }

    .bo-hero__actions .bo-btn:not(.bo-btn--link) {
        min-height: 48px;
    }

    .bo-hero .bo-circle {
        display: none;
    }

    /* Karussell: feste seitliche Buttons mit ausreichenden Touchflächen. */
    .bo-carousel__controls {
        gap: var(--space-2);
    }

    .bo-carousel__controls .bo-btn {
        min-height: 44px;
        padding: 0 var(--space-3);
    }

    .bo-carousel.is-enhanced .bo-carousel__stage {
        height: 260px;
        touch-action: pan-y;
    }

    .bo-detail__title {
        font-size: 26px;
        line-height: 32px;
    }

    .bo-buy {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
}

/* ===== Seitenkopf für Unterseiten (Liste, Genre, Genre-Übersicht): templates/_pagehead.html.twig ===== */
.bo-pagehead {
    position: relative;
    overflow: hidden;
    padding: 56px 0 48px;
    background:
        radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
        linear-gradient(180deg, var(--surface-200), var(--surface-100));
    border-bottom: 1px solid var(--border);
}

.bo-pagehead .bo-container {
    position: relative;
    z-index: 1;
}

/* Genre-Bild der Domain blendet von rechts ein. */
.bo-pagehead--image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(55%, 680px);
    background: var(--bo-img) center / cover no-repeat;
    mask-image: linear-gradient(90deg, transparent 0%, black 60%);
    opacity: 1;
    transform: none;
    transition:
        opacity 400ms cubic-bezier(.23, 1, .32, 1),
        transform 400ms cubic-bezier(.23, 1, .32, 1);

    @starting-style {
        opacity: 0;
        transform: translateX(24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-pagehead--image::after {
        transform: none;

        @starting-style {
            opacity: 0;
            transform: none;
        }
    }
}

.bo-pagehead .bo-lead {
    max-width: 560px;
}

/* Druck-Feedback: Knöpfe und Tabs geben beim Drücken kurz nach (Farbübergänge bleiben erhalten). */
.bo-btn,
.bo-tab,
.bo-buy {
    transition:
        background-color .2s,
        color .2s,
        border-color .2s,
        transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.bo-btn:active,
.bo-tab:active,
.bo-buy:active,
.bo-release-tabs a:active,
.bo-carousel__controls .bo-btn:active {
    transform: scale(.97);
}

.bo-pagehead__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-muted);
}

.bo-pagehead__crumbs a {
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: none;
}

.bo-pagehead__crumbs a:hover {
    text-decoration: underline;
}

.bo-pagehead__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.bo-pagehead__facts li {
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-100) 70%, transparent);
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-body);
}

.bo-section--tight {
    padding-top: var(--space-5);
}

/* ===== Genre-Kacheln: Form je Theme, Anheben beim Zeigen; Teaser auf der Startseite ===== */
.bo-genre {
    border-radius: var(--bo-radius);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}

@media (hover: hover) and (pointer: fine) {
    .bo-genre:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 36px -22px color-mix(in srgb, var(--ink) 80%, transparent);
    }
}

.bo-genres--teaser {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.bo-genres--teaser .bo-genre {
    min-height: 190px;
    padding: 18px;
}

.bo-genres--teaser .bo-genre b {
    font-size: 19px;
    line-height: 24px;
}

.bo-genres--teaser .bo-genre span {
    font-size: 13px;
    line-height: 18px;
}

@media (max-width: 1080px) and (min-width: 761px) {
    .bo-genres--teaser {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .bo-pagehead {
        padding: var(--space-4) 0 var(--space-4);
    }

    .bo-pagehead--image::after {
        width: 100%;
        opacity: .28;
        mask-image: linear-gradient(180deg, black 0%, transparent 100%);
    }

    /* Teaser: wischbare Reihe statt Raster. */
    .bo-genres--teaser {
        display: flex;
        gap: 12px;
        margin: 0 calc(-1 * var(--space-4));
        padding: 0 var(--space-4) var(--space-2);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .bo-genres--teaser .bo-genre {
        flex: 0 0 68%;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-genre {
        transition: none;
    }

    .bo-genre:hover {
        transform: none;
    }
}

/* Lange deutsche Wörter (Datenschutzerklärung) im Seitenkopf trennen statt überlaufen. */
.bo-pagehead .bo-title {
    hyphens: auto;
}

/* Helle Domains: Kachelbild nur unten abdunkeln, damit die Motive leuchten; Schrift bleibt lesbar. */
[data-theme="light"] .bo-genre::before,
:is([data-theme="kinder"],[data-theme="mini"]) .bo-genre::before,
[data-theme="romance"] .bo-genre::before,
[data-theme="sachbuch"] .bo-genre::before {
    background: linear-gradient(0deg,
        color-mix(in srgb, var(--night-100) 90%, transparent) 0%,
        color-mix(in srgb, var(--night-100) 45%, transparent) 38%,
        transparent 68%);
}

.bo-genre b,
.bo-genre span {
    text-shadow: 0 1px 8px color-mix(in srgb, var(--night-100) 70%, transparent);
}

/* ===== Reihen (handgepflegte Listen, z. B. Kinder): Karte mit aufgefächerten Covern ===== */
.bo-series {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
    gap: var(--space-4);
}

.bo-series__card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--bo-radius);
    background: var(--surface-100);
    color: inherit;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}

@media (hover: hover) and (pointer: fine) {
    .bo-series__card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 36px -24px color-mix(in srgb, var(--ink) 75%, transparent);
    }
}

/* Drei Bände wie ein aufgefächerter Stapel */
.bo-series__covers {
    position: relative;
    display: block;
    width: 170px;
    height: 170px;
}

.bo-series__covers .bo-cover {
    position: absolute;
    bottom: 0;
    width: 96px;
    font-size: 10px;
}

.bo-series__covers .bo-cover:nth-child(1) {
    left: 0;
    z-index: 3;
    transform: rotate(-6deg);
}

.bo-series__covers .bo-cover:nth-child(2) {
    left: 37px;
    z-index: 2;
    transform: rotate(2deg) translateY(-6px);
}

.bo-series__covers .bo-cover:nth-child(3) {
    left: 74px;
    z-index: 1;
    transform: rotate(9deg) translateY(-10px);
}

.bo-series__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-series__text b {
    font-family: var(--font-serif);
    font-size: 24px;
    line-height: 30px;
    color: var(--ink);
}

.bo-series__meta {
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    color: var(--accent-ink);
}

/* Only locally (app.curated.show_hidden): a hidden list awaiting the publisher's permission. */
.bo-series__hidden {
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink);
}

.bo-series__lead {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 23px;
    color: var(--ink-body);
}

@media (max-width: 760px) {
    .bo-series__card {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-series__card {
        transition: none;
    }

    .bo-series__card:hover {
        transform: none;
    }
}

/* Error pages (templates/bundles/TwigBundle/Exception): a large status code above the page head. */
.bo-error__code {
    margin: 0 0 var(--space-2);
    font-family: var(--font-serif);
    font-size: clamp(72px, 14vw, 160px);
    font-weight: 700;
    line-height: 1;
    color: var(--accent-ink);
}

.bo-error__status {
    margin: var(--space-2) 0 0;
    font-size: 13px;
    color: var(--ink-muted);
}

.bo-error__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

/* ===== Etiketten (App\Label): Chips mit Symbol und Text ===== */
.bo-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-1);
}

.bo-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-200);
    color: var(--highlight-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.bo-label svg {
    width: 14px;
    height: 14px;
    flex: none;
    fill: currentColor;
}

.bo-label--series {
    color: var(--accent-ink);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .bo-label svg {
        transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
    }

    .bo-row:hover .bo-label svg,
    .bo-release:hover .bo-label svg {
        transform: scale(1.15) rotate(-6deg);
    }
}
/* ./daily-quote.css */
/* Daily reading pause: each domain follows its existing theme and typography. */
.bo-dailyquote {
    padding: clamp(32px, 5vw, 64px) 0;
    border-top: 1px solid var(--surface-300);
    background: var(--surface-200);
    color: var(--ink);
}

.bo-dailyquote__label {
    margin: 0 0 var(--space-3);
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bo-dailyquote__figure {
    min-width: 0;
    max-width: 850px;
    margin: 0;
}

.bo-dailyquote blockquote {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.bo-dailyquote blockquote p {
    margin: 0;
}

.bo-dailyquote figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
    color: var(--ink-body);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.bo-dailyquote__author {
    font-weight: 600;
}

.bo-dailyquote cite {
    min-width: 0;
    font-style: normal;
}

.bo-dailyquote a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}

.bo-dailyquote a:hover {
    text-decoration-thickness: 2px;
}

.bo-dailyquote a:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 4px;
}

.bo-dailyquote ::selection {
    background: var(--accent-ink);
    color: var(--surface-100);
}

/* BuchUno: a quiet book page, with the heading set in the margin. */
[data-theme="light"] .bo-dailyquote__layout {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--space-5);
}

[data-theme="light"] .bo-dailyquote__label {
    padding-top: var(--space-2);
}

[data-theme="light"] .bo-dailyquote__figure {
    padding-left: var(--space-4);
    border-left: 1px solid var(--border-strong);
}

/* BuchTicker: a compact bulletin, echoing the domain's ticker typography. */
[data-theme="dark"] .bo-dailyquote__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
}

[data-theme="dark"] .bo-dailyquote__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-strong);
}

[data-theme="dark"] .bo-dailyquote__figure {
    max-width: 960px;
}

[data-theme="dark"] .bo-dailyquote blockquote {
    font-family: var(--font-sans);
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 500;
    line-height: 1.6;
}

[data-theme="dark"] .bo-dailyquote figcaption {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

/* LeseAlarm: condensed lettering and the red rule of an editorial dossier. */
[data-theme="krimi"] .bo-dailyquote {
    border-top: 3px solid var(--accent);
    background: var(--surface-100);
}

[data-theme="krimi"] .bo-dailyquote__label {
    font-family: var(--font-krimi);
    font-size: 16px;
    letter-spacing: .12em;
}

[data-theme="krimi"] .bo-dailyquote blockquote {
    font-family: var(--font-krimi);
    font-size: clamp(26px, 3.5vw, 40px);
    line-height: 1.35;
}

[data-theme="krimi"] .bo-dailyquote figcaption {
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-strong);
}

/* LeseTicker: centered, italic literary type on the established rose paper. */
[data-theme="romance"] .bo-dailyquote__layout {
    max-width: 940px;
    text-align: center;
}

[data-theme="romance"] .bo-dailyquote__label {
    letter-spacing: .16em;
}

[data-theme="romance"] .bo-dailyquote__figure {
    max-width: none;
    padding-block: var(--space-4);
    border-block: 3px double var(--border-strong);
}

[data-theme="romance"] .bo-dailyquote blockquote {
    font-family: var(--font-romance);
    font-style: italic;
    font-size: clamp(24px, 3vw, 36px);
}

[data-theme="romance"] .bo-dailyquote figcaption {
    justify-content: center;
}

/* LeseCharts: a clear editorial column with the domain's measured metadata. */
[data-theme="sachbuch"] .bo-dailyquote {
    background: var(--surface-100);
}

[data-theme="sachbuch"] .bo-dailyquote__layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-5);
}

[data-theme="sachbuch"] .bo-dailyquote__label {
    padding-top: var(--space-3);
    border-top: 2px solid var(--primary);
    font-family: var(--font-mono);
    letter-spacing: 0;
}

[data-theme="sachbuch"] .bo-dailyquote__figure {
    padding-block: var(--space-3);
    border-block: 1px solid var(--border-strong);
}

[data-theme="sachbuch"] .bo-dailyquote blockquote {
    font-family: var(--font-sans);
    font-size: clamp(22px, 2.5vw, 28px);
    line-height: 1.6;
}

[data-theme="sachbuch"] .bo-dailyquote figcaption {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* BuchHero: a reading speech bubble, using its comic type and pop shadow. */
:is([data-theme="kinder"],[data-theme="mini"]) .bo-dailyquote__label {
    color: var(--ink);
    font-family: var(--font-kinder);
    font-size: 22px;
    letter-spacing: 0;
    text-transform: none;
}

:is([data-theme="kinder"],[data-theme="mini"]) .bo-dailyquote__figure {
    position: relative;
    padding: clamp(20px, 3vw, 32px);
    margin-bottom: var(--space-3);
    border: 2px solid var(--ink);
    border-radius: var(--radius-soft);
    background: var(--surface-100);
    box-shadow: var(--shadow-pop);
}

:is([data-theme="kinder"],[data-theme="mini"]) .bo-dailyquote__figure::after {
    content: "";
    position: absolute;
    left: 36px;
    bottom: -10px;
    width: 16px;
    height: 16px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: var(--surface-100);
    transform: rotate(45deg);
}

:is([data-theme="kinder"],[data-theme="mini"]) .bo-dailyquote blockquote {
    font-family: var(--font-kinder);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.4;
}

@media (max-width: 760px) {
    [data-theme="light"] .bo-dailyquote__layout,
    [data-theme="sachbuch"] .bo-dailyquote__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    [data-theme="light"] .bo-dailyquote__label,
    [data-theme="sachbuch"] .bo-dailyquote__label {
        margin-bottom: 0;
    }

    [data-theme="light"] .bo-dailyquote__figure {
        padding-left: var(--space-3);
    }

    [data-theme="romance"] .bo-dailyquote__figure {
        padding-block: var(--space-3);
    }
}
/* ./releases.css */
.bo-release-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.bo-release-tabs [aria-current="page"] {
    background: var(--primary);
    color: var(--on-primary);
}

.bo-releases {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bo-release {
    display: grid;
    grid-template-columns: 140px 84px minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.bo-release__date {
    padding-top: 4px;
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.bo-release h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.4;
}

.bo-release h3 a {
    color: var(--ink);
    text-decoration: none;
}

.bo-release h3 a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.bo-release__text {
    overflow-wrap: anywhere;
}

.bo-release__text p {
    margin: 0 0 var(--space-1);
    color: var(--ink-body);
    line-height: 1.6;
}

.bo-release__text .bo-release__isbn {
    color: var(--ink-muted);
    font-size: 13px;
}

.bo-release__text .bo-release__subtitle {
    margin-top: calc(-1 * var(--space-1));
    color: var(--ink-muted);
    font-style: italic;
}

.bo-release__text .bo-release__facts {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.bo-description-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 65ch;
    margin: var(--space-2) 0;
    color: var(--ink-body);
    font-size: 14px;
    line-height: 1.6;
}

.bo-synopsis {
    max-width: 70ch;
    margin-bottom: var(--space-5);
}

.bo-synopsis__text {
    color: var(--ink-body);
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.bo-synopsis__text p {
    white-space: pre-line;
}

.bo-release__cover {
    align-self: start;
}

.bo-release__cover .bo-cover {
    width: 84px;
    height: 126px;
    font-size: 12px;
}

.bo-release-detail {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--space-5);
}

.bo-release-detail__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bo-release-detail__text .bo-synopsis {
    margin-top: var(--space-5);
}

.bo-release-detail__text .bo-bookhero__facts {
    margin-top: 0;
}

@media (max-width: 760px) {
    .bo-release {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: var(--space-2);
    }

    .bo-release__date {
        grid-column: 1 / -1;
    }

    .bo-release__cover .bo-cover {
        width: 64px;
        height: 96px;
        font-size: 10px;
    }

    .bo-release-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }
}
/* ./domains.css */
/*
 * Eigenart je Domain: Hero-Varianten der Startseite (templates/book_list/home.html.twig), je Theme eine.
 * Nur Tokens, keine festen Farben. Bewegung: assets/controllers/hero_controller.js (GSAP) und die
 * CSS-Animationen unten – alle aus bei „Bewegung reduzieren“. Ohne JavaScript ist alles sichtbar.
 * Dokumentation: docs/design-system/components/Hero/README.md, Abschnitt „Varianten je Domain“.
 */

/* ===== Gemeinsam: helle Heroes (alle außer dark und krimi) ===== */
.bo-hero--home:not(.bo-night) {
    color: var(--ink-body);
}

.bo-hero--home:not(.bo-night) h1,
.bo-hero--home:not(.bo-night) .bo-hero__book {
    color: var(--ink);
}

.bo-hero--home:not(.bo-night) h1 em {
    color: var(--accent-ink);
}

.bo-hero--home:not(.bo-night) .bo-hero__author,
.bo-hero--home:not(.bo-night) .bo-stand {
    color: var(--ink-muted);
}

.bo-hero--home:not(.bo-night) .bo-btn--link {
    color: var(--accent-ink);
}

.bo-hero--home .bo-hero__text {
    position: relative;
    z-index: 2;
}

.bo-hero--home .bo-hero__stage {
    z-index: 2;
}

.bo-hero--home .bo-hero__stage .bo-cover {
    z-index: 2;
}

/* ===== BuchHero (kinder): Sonne, Sprechblase, Comic-Sterne ===== */
.bo-hero--kinder {
    background: linear-gradient(160deg, var(--surface-300) 0%, var(--surface-200) 55%, var(--surface-100) 100%);
}

.bo-hero--kinder .bo-hero__stage::before {
    width: 320px;
    height: 320px;
    right: -50px;
    top: -40px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--highlight) 0 58%, color-mix(in srgb, var(--highlight) 35%, transparent) 59% 70%, transparent 71%);
}

.bo-hero--kinder .bo-hero__stage .bo-cover {
    transform: rotate(3deg);
}

.bo-hero__bubble {
    position: absolute;
    left: -64px;
    top: 0;
    z-index: 3;
    padding: 10px 18px;
    font-family: var(--font-kinder);
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface-100);
    border: 3px solid var(--ink);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-pop);
    transform: rotate(-7deg);
    white-space: nowrap;
}

.bo-hero__bubble::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: -14px;
    width: 18px;
    height: 18px;
    background: var(--surface-100);
    border-right: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    transform: rotate(45deg) skew(10deg, 10deg);
}

.bo-hero__stars {
    position: absolute;
    left: 2%;
    top: 12px;
    width: 120px;
    height: 120px;
    fill: var(--accent);
    z-index: 1;
}

/* ===== BuchTicker (dark): Laufband, Live-Punkt ===== */
.bo-hero--dark {
    padding-bottom: 72px;
}

.bo-hero--dark .bo-hero__angle {
    display: none;
}

.bo-live {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger);
    flex: none;
}

.bo-live::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--danger);
    animation: bo-pulse 1.6s ease-out infinite;
}

@keyframes bo-pulse {
    from { transform: scale(.5); opacity: 1; }
    to { transform: scale(1.6); opacity: 0; }
}

.bo-ticker {
    display: flex;
    overflow: hidden;
    background: var(--night-200);
    border-block: 1px solid color-mix(in srgb, var(--link-on-night) 30%, transparent);
    color: var(--on-night);
}

.bo-ticker__track {
    flex: none;
    display: flex;
    gap: var(--space-5);
    margin: 0;
    padding: 14px var(--space-4);
    list-style: none;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    animation: bo-ticker 38s linear infinite;
}

.bo-ticker__track strong {
    margin-right: 6px;
    font-family: var(--font-mono);
    color: var(--link-on-night);
}

.bo-ticker__track span {
    margin-left: 6px;
    font-weight: 400;
    color: var(--on-night-body);
}

.bo-ticker:hover .bo-ticker__track,
.bo-ticker:focus-within .bo-ticker__track {
    animation-play-state: paused;
}

@keyframes bo-ticker {
    to { transform: translateX(-100%); }
}

/* ===== BuchUno (light): Papier, riesige Eins, Holzbrett ===== */
.bo-hero--light {
    background: linear-gradient(180deg, var(--surface-200), var(--surface-100));
}

.bo-hero--light .bo-hero__stage {
    padding: 24px 56px 0;
}

.bo-hero--light .bo-hero__stage::before {
    display: none;
}

.bo-hero__numeral {
    position: absolute;
    left: -150px;
    bottom: -40px;
    z-index: 1;
    font-family: var(--font-serif);
    font-size: 380px;
    line-height: 1;
    font-weight: 700;
    color: color-mix(in srgb, var(--primary) 22%, transparent);
    pointer-events: none;
    user-select: none;
}

.bo-hero__board {
    position: relative;
    z-index: 2;
    display: block;
    height: 14px;
    margin: 0 -56px;
    border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--highlight-ink) 80%, var(--surface-100)), var(--highlight-ink));
    box-shadow: 0 10px 18px -8px color-mix(in srgb, var(--ink) 45%, transparent);
}

/* ===== LeseAlarm (krimi): Suchscheinwerfer, Absperrband ===== */
.bo-hero--krimi .bo-hero__angle {
    background: var(--surface-100);
}

.bo-hero__spot {
    position: absolute;
    z-index: 1;
    top: -10%;
    right: 6%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--on-night) 22%, transparent) 0%, transparent 62%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.bo-tape {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 64px;
    z-index: 4;
    overflow: hidden;
    padding: 8px 0;
    background: var(--highlight);
    color: var(--on-highlight);
    font-family: var(--font-krimi);
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-4deg);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--night-100) 60%, transparent);
}

.bo-tape span {
    display: inline-block;
    animation: bo-tape 30s linear infinite;
}

@keyframes bo-tape {
    to { transform: translateX(-50%); }
}

.bo-hero--krimi {
    padding-bottom: 160px;
}

/* ===== LeseCharts (sachbuch): Millimeterpapier, Säulendiagramm ===== */
.bo-hero--sachbuch {
    background: var(--surface-200);
}

.bo-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(90deg, transparent 0%, black 45%);
}

.bo-hero__chart {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 18px;
    height: 340px;
    margin: 0;
    padding: 0 8px;
    list-style: none;
    border-bottom: 2px solid var(--ink);
}

.bo-hero__chart li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: 100%;
}

.bo-hero__chart .bo-cover {
    width: 52px;
    font-size: 7px;
}

.bo-hero__bar {
    display: flex;
    justify-content: center;
    width: 60px;
    height: calc(var(--share) * 230px);
    padding-top: 8px;
    background: var(--primary);
    transform-origin: bottom;
}

.bo-hero__chart li:first-child .bo-hero__bar {
    background: var(--highlight);
}

.bo-hero__bar strong {
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    color: var(--on-primary);
}

.bo-hero__chart li:first-child .bo-hero__bar strong {
    color: var(--on-highlight);
}

/* ===== LeseTicker (romance): Rosé-Verlauf, Lesezeichen, Herz ===== */
.bo-hero--romance {
    background:
        radial-gradient(ellipse at 85% 20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%),
        linear-gradient(135deg, var(--surface-100), var(--surface-300));
}

.bo-hero__ribbon {
    position: absolute;
    right: 64px;
    top: 18px;
    z-index: 3;
    width: 22px;
    height: 96px;
    background: var(--primary);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    transform-origin: top center;
}

.bo-hero__heart {
    position: absolute;
    left: -28px;
    bottom: 28px;
    z-index: 3;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-100);
    color: var(--primary);
    font-family: var(--font-romance);
    font-style: italic;
    font-size: 17px;
    line-height: 22px;
    box-shadow: var(--shadow-cover);
    white-space: nowrap;
}

/* ===== Mobil ===== */
@media (max-width: 760px) {
    .bo-hero__bubble {
        left: 132px;
        top: 24px;
        font-size: 16px;
        padding: 6px 12px;
    }

    .bo-hero--kinder .bo-hero__stage::before {
        width: 180px;
        height: 180px;
        right: auto;
        left: -30px;
        top: -24px;
    }

    .bo-hero__stars {
        left: auto;
        right: 8px;
        width: 80px;
        height: 80px;
    }

    .bo-hero--light .bo-hero__stage {
        padding: 0 0 0 8px;
        justify-self: start;
    }

    .bo-hero__numeral {
        font-size: 200px;
        right: auto;
        left: 120px;
        bottom: -24px;
    }

    .bo-hero__board {
        margin: 0 -24px 0 -16px;
    }

    .bo-hero__spot {
        width: 300px;
        height: 300px;
        right: -60px;
        top: -40px;
    }

    .bo-hero--krimi {
        padding-bottom: 120px;
    }

    .bo-tape {
        bottom: 48px;
        font-size: 14px;
    }

    .bo-hero__chart {
        order: -1;
        height: 200px;
        gap: 10px;
        justify-content: space-between;
    }

    .bo-hero__chart .bo-cover {
        width: 40px;
    }

    .bo-hero__bar {
        width: 44px;
        height: calc(var(--share) * 120px);
    }

    .bo-hero--romance .bo-hero__stage::before {
        display: none;
    }

    .bo-hero__ribbon {
        right: auto;
        left: 88px;
    }

    .bo-hero__heart {
        left: 92px;
        bottom: 12px;
        font-size: 15px;
    }

    .bo-ticker__track {
        font-size: 13px;
        gap: var(--space-4);
    }
}

/* ===== Bewegung reduzieren: Laufbänder stehen und lassen sich wischen ===== */
@media (prefers-reduced-motion: reduce) {
    .bo-live::after,
    .bo-tape span {
        animation: none;
    }

    .bo-ticker {
        overflow-x: auto;
    }

    .bo-ticker__track {
        animation: none;
    }

    .bo-ticker__track[aria-hidden="true"] {
        display: none;
    }
}
/* ./rankings.css */
/*
 * Listen-Darstellungen (Site::listLayout) – Feinschliff über den Systemkomponenten:
 * Liste als Karten-Zeilen, Regal mit echtem Brett und Buchrücken, Karussell mit Boden und Licht,
 * Info-Panel als Karte. Form je Theme über --bo-radius. Nur Tokens, keine festen Farben.
 * Erscheinen beim Scrollen rein per CSS (animation-timeline), sonst sofort sichtbar.
 */
.bo {
    --bo-radius: 14px;
}

[data-theme="dark"] .bo {
    --bo-radius: 10px;
}

[data-theme="krimi"] .bo {
    --bo-radius: 0;
}

[data-theme="sachbuch"] .bo {
    --bo-radius: 6px;
}

:is([data-theme="kinder"],[data-theme="mini"]) .bo {
    --bo-radius: 20px;
}

[data-theme="romance"] .bo {
    --bo-radius: 24px;
}

/* ===== Liste: Karten-Zeilen ===== */
.bo-list {
    display: grid;
    gap: 10px;
    border-top: 0;
}

.bo-list .bo-row {
    /* minmax(0, …): long titles and labels wrap instead of widening the row (and the page on phones). */
    grid-template-columns: 72px 56px minmax(0, 1fr) auto;
    padding: 14px 24px 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--bo-radius);
    background: var(--surface-100);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}

@media (hover: hover) and (pointer: fine) {
    .bo-list .bo-row:hover {
        transform: translateY(-2px);
        border-color: var(--border-strong);
        box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--ink) 55%, transparent);
    }
}

.bo-list .bo-row .bo-cover {
    width: 56px;
    font-size: 8px;
    transition: transform .25s;
}

@media (hover: hover) and (pointer: fine) {
    .bo-list .bo-row:hover .bo-cover {
        transform: rotate(-3deg) scale(1.06);
    }
}

.bo-list .bo-row__rank {
    align-items: center;
}

.bo-list .bo-row__rank strong {
    font-size: 44px;
    line-height: 44px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink-muted);
}

.bo-list .bo-row--top {
    border-color: color-mix(in srgb, var(--highlight) 70%, transparent);
    background: linear-gradient(100deg, color-mix(in srgb, var(--highlight) 22%, var(--surface-100)) 0%, var(--surface-100) 55%);
}

.bo-list .bo-row--top .bo-row__rank strong {
    color: var(--highlight-ink);
    -webkit-text-stroke: 0;
}

.bo-row__meter {
    display: block;
    width: 84px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--highlight) calc(var(--rating) * 100%), var(--surface-300) 0);
}

/* BuchTicker: Börsen-Look – Mono-Zahlen, Leuchtkante an Platz 1 */
[data-theme="dark"] .bo-list .bo-row {
    background: var(--surface-200);
}

[data-theme="dark"] .bo-list .bo-row__rank strong,
[data-theme="dark"] .bo-row__side {
    font-family: var(--font-mono);
}

[data-theme="dark"] .bo-list .bo-row--top {
    box-shadow: 0 0 0 1px var(--link-on-night), 0 0 32px -8px color-mix(in srgb, var(--link-on-night) 55%, transparent);
}

/* LeseCharts: Balken statt Kartenfläche, Rang in Mono */
[data-theme="sachbuch"] .bo-list .bo-row__rank strong {
    color: var(--ink);
    -webkit-text-stroke: 0;
}

[data-theme="sachbuch"] .bo-row__meter {
    width: 120px;
    height: 8px;
    border-radius: 0;
    background: linear-gradient(90deg, var(--primary) calc(var(--rating) * 100%), var(--surface-300) 0);
}

/* ===== Regal: Wand, Buchrücken, Holzbrett ===== */
.bo-shelfpick {
    position: relative;
}

.bo-shelfpick__shelf {
    grid-template-columns: repeat(auto-fit, minmax(96px, 136px));
    gap: 22px;
    padding: 36px 24px 0;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ink) 6%, transparent) 100%);
    perspective: 900px;
}

.bo-shelfpick__book {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.bo-shelfpick__book .bo-cover {
    font-size: 13px;
    box-shadow: inset 6px 0 8px -4px color-mix(in srgb, var(--night-100) 55%, transparent), 0 10px 18px -10px color-mix(in srgb, var(--ink) 70%, transparent);
    transition: box-shadow .35s;
}

@media (hover: hover) and (pointer: fine) {
    .bo-shelfpick__book:hover {
        transform: translateY(-8px) rotateY(-10deg);
    }
}

.bo-shelfpick__book[aria-expanded="true"] .bo-cover {
    outline: 0;
    box-shadow: 0 0 0 3px var(--accent), 0 26px 30px -14px color-mix(in srgb, var(--ink) 75%, transparent);
}

.bo-shelfpick__book .bo-badge {
    left: -10px;
    top: -10px;
    min-width: 30px;
    height: 30px;
    justify-content: center;
    padding: 0 6px;
    border-radius: 15px;
    font-size: 13px;
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--ink) 60%, transparent);
}

.bo-shelfpick__board {
    position: relative;
    height: 20px;
    margin: 0 0 40px;
    border-radius: 3px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--highlight-ink) 65%, var(--surface-100)) 0%,
        var(--highlight-ink) 45%,
        color-mix(in srgb, var(--highlight-ink) 70%, var(--night-100)) 100%);
    box-shadow: 0 18px 26px -14px color-mix(in srgb, var(--ink) 70%, transparent);
}

.bo-shelfpick__board::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: color-mix(in srgb, var(--surface-100) 45%, transparent);
}

/* Regalmöbel: so breit wie seine Bücher (eine Reihe, --count aus dem Template), Seitenwände und
   Deckbrett aus demselben Holz wie das Brett. */
.bo-shelfpick__case {
    --book: 136px;
    --wall: 14px;
    position: relative;
    width: min(100%, calc(var(--count) * var(--book) + (var(--count) - 1) * 22px + 48px + 2 * var(--wall)));
    margin: 0 auto 40px;
    padding: 0 var(--wall);
}

.bo-shelfpick__case::before,
.bo-shelfpick__case::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--wall);
    border-radius: 3px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--highlight-ink) 70%, var(--night-100)),
        var(--highlight-ink) 50%,
        color-mix(in srgb, var(--highlight-ink) 65%, var(--surface-100)));
    box-shadow: 0 18px 26px -14px color-mix(in srgb, var(--ink) 70%, transparent);
}

.bo-shelfpick__case::before {
    left: 0;
}

.bo-shelfpick__case::after {
    right: 0;
}

.bo-shelfpick__case .bo-shelfpick__shelf {
    grid-template-columns: repeat(var(--count), minmax(0, 1fr));
    border-top: 10px solid var(--highlight-ink);
}

.bo-shelfpick__case .bo-shelfpick__board {
    margin: 0;
    border-radius: 0 0 3px 3px;
}

[data-theme="krimi"] .bo-shelfpick__case::before,
[data-theme="krimi"] .bo-shelfpick__case::after {
    border-radius: 0;
    background: linear-gradient(90deg, var(--night-100), var(--surface-300) 50%, var(--night-100));
}

[data-theme="krimi"] .bo-shelfpick__case .bo-shelfpick__shelf {
    border-top-color: var(--surface-300);
}

/* Der orange Punkt wandert mit der Auswahl: das gewählte Buch trägt ihn, Platz 1 sonst nicht. */
.bo-shelfpick .bo-shelfpick__book[aria-expanded="false"] .bo-badge.bo-badge--top {
    background: var(--surface-300);
    color: var(--ink);
}

.bo-shelfpick .bo-shelfpick__book[aria-expanded="true"] .bo-badge.bo-badge {
    background: var(--highlight);
    color: var(--on-highlight);
    box-shadow: 0 0 0 3px var(--surface-100), 0 6px 14px -4px color-mix(in srgb, var(--ink) 60%, transparent);
    transform: scale(1.12);
}

.bo-shelfpick__book .bo-badge {
    transition: background-color .25s, color .25s, transform .25s;
}

/* LeseAlarm: Stahlregal mit roter Kante */
[data-theme="krimi"] .bo-shelfpick__board {
    border-radius: 0;
    background: linear-gradient(180deg, var(--surface-300), var(--night-100));
    box-shadow: inset 0 3px 0 var(--primary), 0 18px 26px -14px var(--night-100);
}

[data-theme="krimi"] .bo-shelfpick__board::after {
    display: none;
}

[data-theme="krimi"] .bo-shelfpick__shelf {
    background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%);
}

/* ===== Info-Panel: Karte mit gekipptem Cover ===== */
.bo-detail {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--bo-radius);
    background: linear-gradient(135deg, var(--surface-200) 0%, var(--surface-100) 100%);
    box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--ink) 60%, transparent);
}

.bo-detail::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    pointer-events: none;
}

.bo-detail > .bo-cover {
    transform: rotate(-3deg);
    box-shadow: 0 22px 34px -16px color-mix(in srgb, var(--ink) 70%, transparent);
}

.bo-detail > div {
    position: relative;
}

/* ===== Karussell: Bühne mit Licht und Boden ===== */
.bo-carousel.is-enhanced .bo-carousel__stage {
    height: 380px;
}

.bo-carousel__stage::before,
.bo-carousel__stage::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
}

/* Lichtkegel hinter dem vorderen Buch */
.bo-carousel.is-enhanced .bo-carousel__stage::before {
    top: 0;
    width: 420px;
    height: 340px;
    margin-left: -210px;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--highlight) 30%, transparent), transparent 65%);
}

/* Boden: weicher Schatten unter dem Ring */
.bo-carousel.is-enhanced .bo-carousel__stage::after {
    bottom: 22px;
    width: 70%;
    height: 56px;
    margin-left: -35%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 26%, transparent), transparent 70%);
}

/* Beide Buttons bleiben an den Kanten des Inhaltsrahmens, unabhängig vom Buchtitel. */
.bo-carousel__controls {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    justify-content: stretch;
}

.bo-carousel__status {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bo-carousel__controls .bo-btn[data-action$="#previous"]::before {
    content: "←" / "";
}

.bo-carousel__controls .bo-btn[data-action$="#next"]::after {
    content: "→" / "";
}

/* ===== Erscheinen beim Scrollen (nur wo der Browser es kann, nie bei reduzierter Bewegung) ===== */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bo-list > li,
        .bo-shelfpick__shelf > li,
        .bo-genre,
        .bo-release {
            animation: bo-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}

@keyframes bo-rise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
}

/* A title without spaces (a long compound, a URL-like name) still breaks inside the row. */
.bo-row__title {
    overflow-wrap: anywhere;
}

/* ===== Mobil ===== */
@media (max-width: 760px) {
    .bo-list .bo-row {
        grid-template-columns: 40px 48px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .bo-list .bo-row .bo-cover {
        width: 48px;
    }

    .bo-list .bo-row__rank strong {
        font-size: 32px;
        line-height: 32px;
    }

    .bo-shelfpick__shelf {
        padding: 28px 16px 0;
        gap: 14px;
    }

    .bo-shelfpick__case {
        --wall: 8px;
    }

    .bo-shelfpick__shelf {
        scrollbar-width: none;
    }

    .bo-shelfpick__shelf::-webkit-scrollbar {
        display: none;
    }

    .bo-shelfpick__shelf > li {
        flex: 0 0 96px;
    }

    .bo-shelfpick__book:hover {
        transform: none;
    }

    .bo-detail > .bo-cover {
        transform: rotate(-2deg);
    }

    .bo-carousel.is-enhanced .bo-carousel__stage {
        height: 300px;
    }

    .bo-carousel.is-enhanced .bo-carousel__stage::before {
        width: 300px;
        margin-left: -150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-shelfpick__book .bo-badge,
    .bo-list .bo-row,
    .bo-list .bo-row .bo-cover,
    .bo-shelfpick__book,
    .bo-shelfpick__book .bo-cover {
        transition: none;
    }

    .bo-list .bo-row:hover,
    .bo-list .bo-row:hover .bo-cover,
    .bo-shelfpick__book:hover {
        transform: none;
    }
}

/* Autorenporträts bei den Promi-Büchern: unbeschnitten, mit individuellem Bildnachweis. */
.bo-portraits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-3) 0;
}

.bo-portrait {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    max-width: 100%;
}

.bo-portrait img {
    width: 96px;
    height: auto;
    flex: none;
}

.bo-portrait figcaption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    font-size: 13px;
    line-height: 20px;
    overflow-wrap: anywhere;
    color: var(--ink-body);
}

.bo-portrait figcaption strong {
    color: var(--ink);
}

.bo-portrait figcaption a {
    color: var(--accent-ink);
    text-underline-offset: 3px;
}

@media (max-width: 480px) {
    .bo-portrait img {
        width: 72px;
    }
}

/* Zufällig sortierte Auswahl ohne Rangspalte. */
.bo-list--unnumbered .bo-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
}

@media (max-width: 760px) {
    .bo-list--unnumbered .bo-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }
}

/* ===== Reihen: Lesereihenfolge als Weg, Bände wie aus dem Regal =====
 * Listen mit series: true (Makro ranking(), Klasse .bo-series). Der Weg ist eine SVG-Linie durch die Bände
 * in Reihenfolge; beim Scrollen zeichnet sie sich (stroke-dashoffset), ohne Unterstützung steht sie fertig
 * da. Die Bandnummern leuchten kurz auf, wenn sie in den Blick kommen; die Bände erscheinen gestaffelt
 * (--i, 40 ms je Band). Nur opacity, transform, translate, scale und stroke-dashoffset werden animiert. */
.bo-series {
    position: relative;
}

.bo-trail {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

.bo-trail path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    opacity: .55;
}

.bo-trail--v {
    left: 49px;
    top: 0;
    bottom: 0;
    width: 6px;
    height: 100%;
}

.bo-series .bo-list > li {
    position: relative;
    z-index: 1;
}

.bo-trail--h {
    left: calc(var(--wall) + 24px);
    top: 50px;
    width: calc(100% - 2 * var(--wall) - 48px);
    height: 6px;
}

.bo-series--shelf .bo-shelfpick__shelf {
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .bo-series--shelf .bo-shelfpick__shelf > li,
    .bo-series--list .bo-list > li {
        transition: translate .3s cubic-bezier(.23, 1, .32, 1);
    }

    .bo-series--shelf .bo-shelfpick__shelf > li:hover {
        translate: 0 -6px;
    }

    .bo-series--list .bo-list > li:hover {
        translate: 0 -3px;
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bo-trail {
            view-timeline: --bo-trail block;
        }

        .bo-trail path {
            animation: bo-trail linear both;
            animation-timeline: --bo-trail;
            animation-range: cover 5% cover 55%;
        }

        .bo-series .bo-row__rank strong,
        .bo-series .bo-shelfpick__book .bo-badge,
        .bo-series .bo-detail__rank .bo-badge {
            animation: bo-number linear both;
            animation-timeline: view();
            animation-range: entry 20% entry 55%;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Bände nacheinander (40 ms je Band, höchstens 12 Stufen): ersetzt das Erscheinen beim Scrollen. */
    .bo-series--list .bo-list > li,
    .bo-series--shelf .bo-shelfpick__shelf > li {
        animation: bo-volume .5s cubic-bezier(.23, 1, .32, 1) both;
        animation-delay: calc(min(var(--i, 0), 12) * 40ms);
        animation-timeline: auto;
        animation-range: normal;
    }
}

@keyframes bo-trail {
    from { stroke-dashoffset: 1; }
}

@keyframes bo-number {
    from { opacity: .35; scale: .92; }
    60% { opacity: 1; scale: 1.08; }
    to { opacity: 1; scale: 1; }
}

@keyframes bo-volume {
    from { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 760px) {
    .bo-trail--v { left: 29px; }
}
/* ./book.css */
/*
 * Detailseite eines Buchs (templates/book/show.html.twig) und die Links dorthin.
 * Hintergrund: das eigene Cover, stark weichgezeichnet – keine fremde Quelle, nur Tokens.
 */

/* Titel-Links in Liste, Info-Panel und Hero sehen aus wie zuvor die Titel. */
.bo-row__title,
.bo-detail__title a,
.bo-hero__book {
    display: block;
    color: inherit;
    text-decoration: none;
}

.bo-row__title:hover,
.bo-detail__title a:hover,
.bo-hero__book:hover {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.bo-night .bo-hero__book:hover {
    color: var(--link-on-night);
}

.bo-detail__buy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ===== Buch-Hero ===== */
.bo-bookhero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 64px;
    background: linear-gradient(180deg, var(--surface-200), var(--surface-100));
    border-bottom: 1px solid var(--border);
}

.bo-bookhero::before {
    content: "";
    position: absolute;
    inset: -60px;
    background: var(--bo-img, none) center / cover no-repeat;
    filter: blur(48px) saturate(1.2);
    opacity: .32;
    transform: scale(1.1);
}

.bo-bookhero .bo-container {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 64px;
    align-items: center;
}

.bo-bookhero__cover .bo-cover {
    width: 240px;
    font-size: 26px;
    transform: rotate(-3deg);
    box-shadow: 0 34px 50px -24px color-mix(in srgb, var(--ink) 75%, transparent);
}

.bo-bookhero__badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}

.bo-bookhero__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 44px;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--ink);
    hyphens: auto;
}

[data-theme="krimi"] .bo-bookhero__title {
    font-family: var(--font-krimi);
    text-transform: uppercase;
    letter-spacing: 0;
}

[data-theme="romance"] .bo-bookhero__title {
    font-family: var(--font-romance);
    font-style: italic;
}

:is([data-theme="kinder"],[data-theme="mini"]) .bo-bookhero__title {
    font-family: var(--font-kinder);
}

.bo-bookhero__author {
    margin: 8px 0 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--ink-body);
}

.bo-bookhero__unavailable {
    margin: var(--space-3) 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--ink-body);
}

.bo-bookhero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin: var(--space-4) 0 0;
}

.bo-bookhero__facts dt {
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-muted);
}

.bo-bookhero__facts dd {
    margin: 0;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--ink);
}

.bo-bookhero__facts > div {
    display: flex;
    flex-direction: column-reverse;
}

.bo-bookhero__rating dd {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--highlight-ink);
}

.bo-bookhero__buy {
    margin: var(--space-4) 0 0;
}

/* Kauflinks je Format (Makro buy): als Paar, mobil umbrechend. */
.bo-buy-formats {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    vertical-align: top;
}

/* ===== Platzierungen ===== */
.bo-title--sm {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -1px;
    margin: 0 0 var(--space-4);
}

.bo-placements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.bo-placement {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--bo-radius);
    background: var(--surface-100);
}

.bo-placement.is-current {
    border-color: color-mix(in srgb, var(--highlight) 70%, transparent);
    background: linear-gradient(100deg, color-mix(in srgb, var(--highlight) 18%, var(--surface-100)), var(--surface-100) 70%);
}

.bo-placement__rank {
    flex: none;
    min-width: 48px;
    font-size: 36px;
    line-height: 40px;
    font-weight: 800;
    letter-spacing: -1.5px;
    text-align: center;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.bo-placement.is-current .bo-placement__rank {
    color: var(--highlight-ink);
}

.bo-placement__text {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-muted);
}

.bo-placement__text a {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.bo-placement__text a:hover {
    color: var(--accent-ink);
}

/* ===== Mehr aus diesen Listen ===== */
.bo-neighbours {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bo-neighbours a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.bo-neighbours .bo-cover {
    width: 100%;
    font-size: 13px;
    margin-bottom: 6px;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}

@media (hover: hover) and (pointer: fine) {
    .bo-neighbours a:hover .bo-cover {
        transform: translateY(-6px) rotate(-2deg);
        box-shadow: 0 22px 30px -16px color-mix(in srgb, var(--ink) 70%, transparent);
    }
}

.bo-neighbours b {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 20px;
    color: var(--ink);
}

.bo-neighbours span {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}

@media (max-width: 760px) {
    .bo-bookhero {
        padding: var(--space-4) 0 var(--space-5);
    }

    .bo-bookhero .bo-container {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .bo-bookhero__cover .bo-cover {
        width: 150px;
        font-size: 17px;
    }

    .bo-bookhero__title {
        font-size: 32px;
        line-height: 38px;
    }

    .bo-neighbours {
        display: flex;
        gap: 14px;
        margin: 0 calc(-1 * var(--space-4));
        padding: 0 var(--space-4) var(--space-2);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .bo-neighbours li {
        flex: 0 0 120px;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-neighbours .bo-cover {
        transition: none;
    }

    .bo-neighbours a:hover .bo-cover {
        transform: none;
    }
}

/* A book the operator marks as questionable (DisputedBooks): reason and source, above the facts. */
.bo-disputed {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    max-width: 640px;
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-soft);
    background: var(--surface-200);
    color: var(--ink-body);
    font-size: 15px;
    line-height: 22px;
}

.bo-disputed p {
    margin: 0;
}

.bo-disputed__title {
    font-weight: 700;
}

.bo-disputed p + p {
    margin-top: var(--space-1);
}

.bo-disputed .bo-disputed__source {
    margin-top: var(--space-2);
    color: var(--ink-muted);
    font-size: 14px;
}
/* ./mini.css */
/* MiniBuchTipps: a sunny reading corner. All rules stay inside the mini theme. */
[data-theme="mini"] {
    --surface-100: #fffdf7;
    --surface-200: #fff1d4;
    --surface-300: #ffe5ae;
    --ink: #203b44;
    --ink-body: #354e56;
    --ink-muted: #506169;
    --primary: #176d68;
    --primary-strong: #10544f;
    --accent: #e9674c;
    --accent-ink: #a93423;
    --highlight: #ffd05b;
    --on-highlight: #203b44;
    --border: #e5ded0;
    --border-strong: #687d80;
    --shadow-pop: 0 8px 18px rgb(32 59 68 / 15%);
    --mini-peach: #ffe9df;
    --mini-mint: #e5f3ed;
    --mini-lilac: #eeecfa;
}

[data-theme="mini"] ::selection {
    color: var(--ink);
    background: var(--highlight);
}

[data-theme="mini"] :is(a, button):focus-visible {
    outline: 3px solid var(--accent-ink);
    outline-offset: 5px;
}

/* The shared navigation uses these tokens in !important color rules. */
[data-theme="mini"] :is(.bo-header, .bo-footer) {
    --on-night: var(--ink);
    --on-night-body: var(--ink-body);
    --link-on-night: var(--primary-strong);
}

[data-theme="mini"] .bo-header {
    background: var(--surface-100);
    color: var(--ink);
    border-bottom: 2px solid var(--border);
    padding-block: 20px;
}

[data-theme="mini"] .bo-header .bo-wordmark {
    color: var(--ink);
    font-size: 27px;
}

[data-theme="mini"] .bo-wordmark span {
    color: var(--accent-ink);
}

[data-theme="mini"] .bo-header .bo-nav {
    gap: 8px 12px;
}

[data-theme="mini"] .bo-header .bo-nav a {
    color: var(--ink);
    font-family: var(--font-kinder);
    font-size: 17px;
    line-height: 24px;
    padding: 10px 12px;
    border-radius: 18px;
}

[data-theme="mini"] .bo-header .bo-nav a:is(:hover, [aria-current="page"]) {
    color: var(--primary-strong);
    background: var(--mini-mint);
}

[data-theme="mini"] .bo-hero--home {
    background: var(--surface-200);
    padding-block: clamp(48px, 7vw, 88px);
    overflow: hidden;
}

[data-theme="mini"] .bo-hero--home h1 {
    font-size: clamp(38px, 5.2vw, 66px);
    line-height: 1.08;
    max-width: 13ch;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

[data-theme="mini"] .bo-hero--home h1 em {
    color: var(--accent-ink);
    font-style: normal;
}

[data-theme="mini"] .bo-hero__book {
    font-family: var(--font-kinder);
    font-size: clamp(23px, 2.7vw, 32px);
    line-height: 1.25;
}

[data-theme="mini"] .bo-mini-sun {
    position: absolute;
    width: clamp(100px, 13vw, 166px);
    height: auto;
    right: 34%;
    top: 34px;
    pointer-events: none;
}

[data-theme="mini"] .bo-hero__stage::before {
    background: var(--highlight);
    border-radius: 47% 53% 43% 57% / 54% 42% 58% 46%;
    box-shadow: none;
}

[data-theme="mini"] .bo-hero__bubble {
    color: var(--ink);
    background: var(--surface-100);
    border-color: var(--ink);
    box-shadow: var(--shadow-pop);
}

[data-theme="mini"] .bo-btn {
    min-height: 44px;
    padding: 10px 18px;
    font-weight: 600;
}

[data-theme="mini"] .bo-btn--link {
    min-height: auto;
    padding: 8px 0;
}

[data-theme="mini"] .bo-section--series {
    background: var(--surface-100);
    padding-block: clamp(40px, 6vw, 72px);
}

[data-theme="mini"] :is(.bo-title, .bo-pagehead h1, .bo-detail h2, .bo-bookhero h1, .bo-series__text b) {
    font-family: var(--font-kinder);
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

[data-theme="mini"] .bo-title {
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.15;
}

[data-theme="mini"] .bo-series {
    gap: 22px;
}

[data-theme="mini"] .bo-series__card {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--surface-200);
    gap: 24px;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

[data-theme="mini"] .bo-series__card:nth-child(4n + 2) {
    background: var(--mini-mint);
}

[data-theme="mini"] .bo-series__card:nth-child(4n + 3) {
    background: var(--mini-peach);
}

[data-theme="mini"] .bo-series__card:nth-child(4n + 4) {
    background: var(--mini-lilac);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    [data-theme="mini"] .bo-series__card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgb(32 59 68 / 12%);
    }
}

[data-theme="mini"] .bo-series__text b {
    font-size: 25px;
    line-height: 1.2;
}

[data-theme="mini"] .bo-series__meta {
    color: var(--ink-body);
    margin-top: 8px;
    font-size: 13px;
}

[data-theme="mini"] .bo-series__lead {
    color: var(--ink-body);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.65;
}

[data-theme="mini"] .bo-pagehead {
    background: var(--surface-200);
    border-bottom-color: var(--border);
}

[data-theme="mini"] :is(.bo-detail, .bo-bookhero) {
    background: var(--mini-mint);
    border-color: var(--border);
    border-radius: 28px;
}

[data-theme="mini"] .bo-detail h2 {
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.2;
}

[data-theme="mini"] .bo-portrait img {
    border-radius: 18px;
    background: var(--surface-100);
}

[data-theme="mini"] .bo-badge {
    font-weight: 600;
    padding: 6px 12px;
}

[data-theme="mini"] .bo-dailyquote {
    background: var(--surface-200);
}

[data-theme="mini"] .bo-footer {
    background: var(--mini-mint);
    color: var(--ink-body);
    border-top: 2px solid var(--border);
}

[data-theme="mini"] .bo-footer :is(a, h3, .bo-wordmark, .bo-footer__label) {
    color: var(--ink);
}

[data-theme="mini"] .bo-footer p {
    color: var(--ink-body);
}

@media (max-width: 760px) {
    /* The shared navigation uses these tokens in !important color rules. */
[data-theme="mini"] :is(.bo-header, .bo-footer) {
    --on-night: var(--ink);
    --on-night-body: var(--ink-body);
    --link-on-night: var(--primary-strong);
}

[data-theme="mini"] .bo-header {
        padding-block: 0;
    }

    /* The menu list (app.css) opens on the light header surface. */
    [data-theme="mini"] .bo-header .bo-nav:popover-open {
        gap: 2px;
        background: var(--surface-100);
        border-top-color: var(--border);
        border-bottom: 2px solid var(--border);
    }

    [data-theme="mini"] .bo-header .bo-nav::backdrop {
        background: color-mix(in srgb, var(--ink) 25%, transparent);
    }

    [data-theme="mini"] .bo-header .bo-nav a {
        padding: 10px 12px;
        border-bottom: 0;
        font-size: 17px;
    }

    [data-theme="mini"] .bo-mini-sun {
        right: 22px;
        top: 22px;
        width: 72px;
    }

    [data-theme="mini"] .bo-hero--home .bo-hero__text {
        padding-top: 52px;
    }

    [data-theme="mini"] .bo-series__card {
        padding: 20px;
        gap: 20px;
        border-radius: 22px;
    }

    [data-theme="mini"] .bo-series__text b {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="mini"] .bo-series__card {
        transition: none;
    }
}

/* Temporary book spread; the original link and cover remain untouched underneath. */
[data-theme="mini"] .bo-book-opening {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    perspective: 1200px;
}

[data-theme="mini"] .bo-book-opening__backdrop {
    position: absolute;
    inset: 0;
    background: var(--surface-200);
    opacity: 0;
}

[data-theme="mini"] .bo-book-opening__book {
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform;
}

[data-theme="mini"] :is(.bo-book-opening__paper, .bo-book-opening__flap, .bo-book-opening__front, .bo-book-opening__back) {
    position: absolute;
    inset: 0;
    border-radius: 3px 10px 10px 3px;
}

[data-theme="mini"] .bo-book-opening__paper {
    background: var(--surface-100);
    box-shadow: inset 8px 0 16px rgb(32 59 68 / 10%), 0 12px 30px rgb(32 59 68 / 16%);
}

[data-theme="mini"] .bo-book-opening__flap {
    transform-origin: left center;
    transform-style: preserve-3d;
    will-change: transform;
}

[data-theme="mini"] :is(.bo-book-opening__front, .bo-book-opening__back) {
    backface-visibility: hidden;
}

[data-theme="mini"] .bo-book-opening__front .bo-cover {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
}

[data-theme="mini"] .bo-book-opening__back {
    transform: rotateY(180deg);
    background: var(--surface-100);
    box-shadow: inset -8px 0 16px rgb(32 59 68 / 10%);
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="mini"] .bo-book-opening {
        display: none;
    }
}
/* ./ambient.css */
/*
 * Ambient-Ebene (App\Twig\AmbientExtension, templates/_ambient.html.twig): ruhige, rein dekorative Figuren
 * hinter dem Inhalt, je Look, Bereich und Saison. Nur transform und opacity werden animiert, keine
 * Pointer-Events, kein JavaScript. Bei „Bewegung reduzieren“ stehen die Figuren still. Der Schalter
 * „Bewegung anhalten“ im Footer (#ambient-pause, ohne Speicherung) pausiert die Ebene.
 */

/*
 * Layering: the figures fly above the coloured surfaces of the sections (hero, bo-section) but below the content.
 * With z-index -1 they sat behind those opaque surfaces and were never seen; now every content container lifts
 * itself above the layer (the hero's container already does, at 2).
 */
.bo-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    color: var(--ink-muted);
}

.bo-container {
    position: relative;
    z-index: 1;
}

.bo-ambient svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bo-ambient--dark { color: var(--on-night-body); }

/* ===== BuchTicker (Look dark) außerhalb der Saison: Drachen, UFO, Sternschnuppen, Funken, Sterne =====
 * Freundliche Figuren (kein Grusel), geringe Deckkraft, lange Zyklen mit langen Pausen: der Auftritt
 * füllt nur einen Teil des Zyklus, den Rest wartet die Figur außerhalb des Bildes. */
.bo-am-glow { fill: var(--highlight); }
.bo-am-dome { fill: var(--accent); opacity: .55; }
.bo-am-light { fill: var(--highlight); }

.bo-ambient__dragon,
.bo-ambient__ufo {
    position: absolute;
    left: 0;
    color: var(--ink-body);
    transform: translateX(-30vw);
}

.bo-ambient__dragon svg { position: absolute; inset: 0; }

.bo-ambient__dragon {
    width: 150px;
    height: 75px;
    opacity: .28;
    animation: am-glide-right 48s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__dragon--1 { top: 14vh; animation-delay: -6s; }
.bo-ambient__dragon--2 {
    top: 46vh;
    width: 100px;
    height: 50px;
    opacity: .18;
    animation-name: am-glide-left;
    animation-duration: 60s;
    animation-delay: -36s;
}

.bo-ambient__dragon--2 svg { scale: -1 1; }

/* Der Flügel schlägt um seine Wurzel am Rücken. */
.bo-ambient__wing {
    transform-origin: 50% 56%;
    animation: am-wingbeat 1.4s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.bo-ambient__ufo {
    width: 96px;
    height: 48px;
    opacity: .3;
    animation: am-glide-right 52s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__ufo--1 { top: 18vh; animation-delay: -4s; }
.bo-ambient__ufo--2 { top: 36vh; animation-delay: -26s; }

.bo-ambient__ufo svg {
    position: relative;
    animation: am-hover 6s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

/* Kurzer Lichtkegel mitten im Flug (gleicher Zyklus wie das UFO). */
.bo-ambient__beam {
    position: absolute;
    top: 70%;
    left: 22%;
    width: 56%;
    height: 200%;
    background: linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent), transparent);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
    transform-origin: 50% 0;
    opacity: 0;
    animation: am-beam 52s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__ufo--1 .bo-ambient__beam { animation-delay: -4s; }
.bo-ambient__ufo--2 .bo-ambient__beam { animation-delay: -26s; }

/* Der Auftritt dauert etwa ein Drittel des Zyklus, danach lange Pause außerhalb des Bildes. */
@keyframes am-glide-right {
    0% { transform: translateX(-30vw) translateY(0); }
    36%, 100% { transform: translateX(115vw) translateY(-5vh); }
}

@keyframes am-glide-left {
    0% { transform: translateX(115vw) translateY(0); }
    36%, 100% { transform: translateX(-30vw) translateY(4vh); }
}

@keyframes am-wingbeat {
    from { transform: scaleY(1); }
    to { transform: scaleY(-.55); }
}

@keyframes am-hover {
    from { transform: translateY(-4px) rotate(-3deg); }
    to { transform: translateY(4px) rotate(3deg); }
}

@keyframes am-beam {
    0%, 10%, 24%, 100% { opacity: 0; transform: scaleY(.3); }
    17% { opacity: .8; transform: scaleY(1); }
}

/* Sternschnuppen: ein kurzer Streifen etwa alle 40 bis 55 Sekunden. */
.bo-ambient__meteor {
    position: absolute;
    width: 120px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--on-night));
    opacity: 0;
    rotate: 24deg;
    animation: am-meteor 44s cubic-bezier(.23, 1, .32, 1) infinite;
}

.bo-ambient__meteor--1 { top: 9vh; left: 24vw; animation-delay: -10s; }
.bo-ambient__meteor--2 { top: 5vh; left: 62vw; animation-delay: -31s; animation-duration: 56s; }
.bo-ambient__meteor--3 { top: 12vh; left: 48vw; animation-delay: -20s; animation-duration: 52s; }

@keyframes am-meteor {
    0%, 90% { opacity: 0; transform: translateX(-24vw); }
    92% { opacity: .5; }
    97%, 100% { opacity: 0; transform: translateX(8vw); }
}

/* Funkeln: wenige Punkte, die langsam heller und dunkler werden. */
.bo-ambient__stars,
.bo-ambient__stars::after {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, var(--on-night), transparent),
        radial-gradient(1px 1px at 34% 62%, var(--on-night), transparent),
        radial-gradient(1.5px 1.5px at 58% 28%, var(--on-night), transparent),
        radial-gradient(1px 1px at 82% 74%, var(--on-night), transparent);
    background-size: 420px 380px;
    opacity: .1;
    animation: am-twinkle 22s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.bo-ambient__stars::after {
    content: "";
    background-size: 560px 500px;
    background-position: 150px 110px;
    animation-delay: -11s;
}

@keyframes am-twinkle {
    from { opacity: .06; }
    to { opacity: .26; }
}

/* Zauberfunken steigen langsam auf. */
.bo-ambient__spark {
    position: absolute;
    bottom: -12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--highlight-ink), color-mix(in srgb, var(--highlight) 0%, transparent) 70%);
    opacity: 0;
    animation: am-rise var(--am-time, 26s) linear infinite;
}

.bo-ambient__spark--1 { left: 8%; --am-time: 24s; }
.bo-ambient__spark--2 { left: 22%; --am-time: 30s; animation-delay: -12s; }
.bo-ambient__spark--3 { left: 35%; --am-time: 27s; animation-delay: -5s; }
.bo-ambient__spark--4 { left: 50%; --am-time: 34s; animation-delay: -18s; }
.bo-ambient__spark--5 { left: 63%; --am-time: 25s; animation-delay: -9s; }
.bo-ambient__spark--6 { left: 75%; --am-time: 32s; animation-delay: -21s; }
.bo-ambient__spark--7 { left: 87%; --am-time: 28s; animation-delay: -2s; }
.bo-ambient__spark--8 { left: 94%; --am-time: 36s; animation-delay: -15s; }

@keyframes am-rise {
    0% { opacity: 0; transform: translate(0, 0); }
    12% { opacity: .5; }
    50% { transform: translate(16px, -50vh); }
    88% { opacity: .3; }
    100% { opacity: 0; transform: translate(-12px, -100vh); }
}

/* ===== Gemeinsame Bewegungen: Aufsteigen und Herabsinken =====
 * Der Auftritt dauert gut ein Drittel des Zyklus (Länge --t), danach wartet die Figur außerhalb des
 * Bildes. Verzögerung --d (negativ = schon unterwegs), Spitzen-Deckkraft --am-o. Das seitliche
 * Wiegen läuft getrennt über die Eigenschaft translate, das Neigen über rotate. */
@keyframes am-ascend {
    0% { opacity: 0; transform: translateY(0); }
    4%, 32% { opacity: var(--am-o, .3); }
    37%, 100% { opacity: 0; transform: translateY(-118vh); }
}

@keyframes am-descend {
    0% { opacity: 0; transform: translateY(0); }
    4%, 32% { opacity: var(--am-o, .3); }
    37%, 100% { opacity: 0; transform: translateY(124vh); }
}

@keyframes am-sway {
    from { translate: -16px 0; }
    to { translate: 16px 0; }
}

@keyframes am-tilt {
    from { rotate: -35deg; }
    to { rotate: 45deg; }
}

/* ===== LeseTicker (Look romance): schwebende Herzen, fallende Rosenblätter ===== */
.bo-ambient__heart,
.bo-ambient__petal {
    position: absolute;
    left: var(--x);
    width: var(--w);
    height: var(--w);
    opacity: 0;
}

.bo-ambient__heart {
    top: 100vh;
    color: var(--accent);
    --am-o: .3;
    animation:
        am-ascend var(--t) linear var(--d) infinite,
        am-sway 7s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__petal {
    top: -8vh;
    color: var(--accent-ink);
    --am-o: .22;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 6s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate,
        am-tilt 9s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__heart--1 { --x: 8%; --w: 28px; --t: 58s; --d: -6s; }
.bo-ambient__heart--2 { --x: 78%; --w: 20px; --t: 66s; --d: -30s; }
.bo-ambient__heart--3 { --x: 30%; --w: 22px; --t: 52s; --d: -22s; }
.bo-ambient__heart--4 { --x: 90%; --w: 30px; --t: 62s; --d: -44s; }
.bo-ambient__heart--5 { --x: 55%; --w: 18px; --t: 70s; --d: -12s; }
.bo-ambient__heart--6 { --x: 18%; --w: 24px; --t: 60s; --d: -50s; }

.bo-ambient__petal--1 { --x: 12%; --w: 18px; --t: 50s; --d: -4s; }
.bo-ambient__petal--2 { --x: 40%; --w: 16px; --t: 58s; --d: -20s; }
.bo-ambient__petal--3 { --x: 66%; --w: 20px; --t: 46s; --d: -33s; }
.bo-ambient__petal--4 { --x: 85%; --w: 15px; --t: 62s; --d: -9s; }
.bo-ambient__petal--5 { --x: 52%; --w: 17px; --t: 54s; --d: -41s; }

@media (max-width: 640px) {
    .bo-ambient__heart--2,
    .bo-ambient__heart--4,
    .bo-ambient__heart--6,
    .bo-ambient__petal--2,
    .bo-ambient__petal--4,
    .bo-ambient--sparse .bo-ambient__petal {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__heart,
    .bo-ambient__petal {
        display: none;
    }
}

/* ===== LeseCharts (Look sachbuch): leuchtende Glühbirnen, sich zeichnende Diagrammlinien, Pfeile nach oben ===== */
.bo-ambient__bulb {
    position: absolute;
    width: 22px;
    height: 38px;
    color: var(--ink-muted);
    opacity: .3;
}

.bo-ambient__bulb--1 { top: 12%; left: 14%; --d: -4s; --t: 38s; }
.bo-ambient__bulb--2 { top: 40%; right: 9%; --d: -20s; --t: 44s; }
.bo-ambient__bulb--3 { top: 72%; left: 62%; --d: -33s; --t: 50s; }

/* Das Leuchten: etwa ein Drittel des Zyklus an, sonst aus. */
.bo-ambient__glow {
    position: absolute;
    inset: -42px;
    display: grid;
    place-items: center;
    color: var(--highlight);
    background: radial-gradient(circle, color-mix(in srgb, var(--highlight) 38%, transparent), transparent 62%);
    opacity: 0;
    animation: am-glow var(--t) cubic-bezier(.45, 0, .55, 1) var(--d) infinite;
}

.bo-ambient__glow svg {
    width: 22px;
    height: 38px;
}

@keyframes am-glow {
    0%, 6% { opacity: 0; }
    13%, 32% { opacity: 1; }
    40%, 100% { opacity: 0; }
}

.bo-ambient__chart {
    position: absolute;
    width: 190px;
    height: 95px;
    color: var(--ink-muted);
    opacity: 0;
    --am-o: .3;
    animation: am-chart 42s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__chart--1 { top: 18%; left: 5%; animation-delay: -6s; }
.bo-ambient__chart--2 { top: 60%; right: 5%; animation-delay: -27s; }

.bo-ambient__chart path {
    fill: none;
    stroke-width: 1.600;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bo-ambient__axis { stroke: currentcolor; }

.bo-ambient__line {
    stroke: var(--accent-ink);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: am-draw 42s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__chart--1 .bo-ambient__line { animation-delay: -6s; }
.bo-ambient__chart--2 .bo-ambient__line { animation-delay: -27s; }

@keyframes am-chart {
    0% { opacity: 0; }
    3%, 28% { opacity: var(--am-o); }
    36%, 100% { opacity: 0; }
}

@keyframes am-draw {
    0%, 2% { stroke-dashoffset: 1; }
    16%, 100% { stroke-dashoffset: 0; }
}

.bo-ambient__arrow {
    position: absolute;
    width: 14px;
    height: 19px;
    color: var(--trend-up);
    opacity: 0;
    --am-o: .28;
    animation: am-lift 30s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__arrow--1 { left: 24%; top: 78vh; animation-delay: -3s; }
.bo-ambient__arrow--2 { left: 46%; top: 86vh; animation-delay: -12s; animation-duration: 34s; }
.bo-ambient__arrow--3 { left: 72%; top: 70vh; animation-delay: -21s; }
.bo-ambient__arrow--4 { left: 90%; top: 58vh; animation-delay: -27s; animation-duration: 38s; }

@keyframes am-lift {
    0% { opacity: 0; transform: translateY(0); }
    8%, 28% { opacity: var(--am-o); }
    36%, 100% { opacity: 0; transform: translateY(-30vh); }
}

@media (max-width: 640px) {
    .bo-ambient__bulb--2,
    .bo-ambient__bulb--3,
    .bo-ambient__chart--2,
    .bo-ambient__arrow--2,
    .bo-ambient__arrow--4,
    .bo-ambient--sparse .bo-ambient__arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__chart,
    .bo-ambient__arrow {
        display: none;
    }

    .bo-ambient__glow { animation: none; }
}

/* ===== BuchHero (Look kinder): Papierflieger, Ballons, funkelnde Sterne =====
 * Fröhliche Farben aus dem Theme, aber ruhige Zyklen: Flieger und Ballons treten nur ein Drittel
 * des Zyklus auf, die Sterne atmen langsam. */
.bo-ambient__plane {
    position: absolute;
    left: 0;
    width: 54px;
    height: 36px;
    color: var(--primary);
    opacity: .3;
    rotate: -10deg;
    transform: translateX(-20vw);
    animation: am-plane 46s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__plane--1 { top: 20vh; animation-delay: -9s; }
.bo-ambient__plane--2 {
    top: 52vh;
    width: 40px;
    height: 27px;
    color: var(--accent);
    opacity: .26;
    scale: -1 1;
    animation-name: am-plane-left;
    animation-duration: 58s;
    animation-delay: -34s;
}

.bo-ambient__plane svg { animation: am-hover 5s cubic-bezier(.45, 0, .55, 1) infinite alternate; }

@keyframes am-plane {
    0% { transform: translateX(-20vw) translateY(8vh); }
    36%, 100% { transform: translateX(115vw) translateY(-14vh); }
}

@keyframes am-plane-left {
    0% { transform: translateX(115vw) translateY(-6vh); }
    36%, 100% { transform: translateX(-20vw) translateY(12vh); }
}

.bo-ambient__balloon {
    position: absolute;
    top: 100vh;
    left: var(--x);
    width: 28px;
    height: 46px;
    opacity: 0;
    --am-o: .3;
    animation:
        am-ascend var(--t) linear var(--d) infinite,
        am-sway 8s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__balloon--1 { --x: 10%; --t: 64s; --d: -8s; color: var(--accent); }
.bo-ambient__balloon--2 { --x: 84%; --t: 72s; --d: -40s; color: var(--primary); }
.bo-ambient__balloon--3 { --x: 52%; --t: 58s; --d: -26s; color: var(--highlight); }

.bo-ambient__sparkle {
    position: absolute;
    width: 18px;
    height: 18px;
    color: var(--highlight);
    opacity: .1;
    --am-o: .45;
    animation: am-sparkle 9s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.bo-ambient__sparkle--1 { top: 22%; left: 14%; animation-delay: -2s; }
.bo-ambient__sparkle--2 { top: 14%; left: 88%; width: 14px; height: 14px; animation-duration: 11s; animation-delay: -7s; }
.bo-ambient__sparkle--3 { top: 40%; left: 70%; width: 22px; height: 22px; animation-duration: 10s; animation-delay: -4s; }
.bo-ambient__sparkle--4 { top: 66%; left: 6%; width: 15px; height: 15px; animation-duration: 12s; animation-delay: -9s; }
.bo-ambient__sparkle--5 { top: 86%; left: 46%; animation-duration: 8s; animation-delay: -5s; }

@keyframes am-sparkle {
    from { opacity: .08; transform: scale(.55) rotate(-12deg); }
    to { opacity: var(--am-o); transform: scale(1) rotate(12deg); }
}

@media (max-width: 640px) {
    .bo-ambient__plane--2,
    .bo-ambient__balloon--2,
    .bo-ambient__balloon--3,
    .bo-ambient__sparkle--2,
    .bo-ambient__sparkle--4,
    .bo-ambient--sparse .bo-ambient__sparkle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__plane,
    .bo-ambient__balloon {
        display: none;
    }

    .bo-ambient__sparkle { animation: none; }
}

/* ===== MiniBuchTipps (Look mini, Formen von kinder): Schmetterlinge, Seifenblasen =====
 * Farben aus dem Theme mini (Korall, Honig, Grün); Schmetterlinge ziehen in einem Drittel des Zyklus durchs Bild,
 * Seifenblasen steigen sanft auf. */
.bo-ambient__butterfly {
    position: absolute;
    left: 0;
    width: 44px;
    height: 33px;
    opacity: .3;
    transform: translateX(-20vw);
    animation: am-flutter-right 54s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__butterfly svg { position: absolute; inset: 0; }

.bo-ambient__butterfly--1 { top: 30vh; color: var(--accent); animation-delay: -10s; }
.bo-ambient__butterfly--2 {
    top: 62vh;
    width: 34px;
    height: 26px;
    color: var(--primary);
    opacity: .26;
    animation-name: am-flutter-left;
    animation-duration: 66s;
    animation-delay: -42s;
}

/* Die Flügel schlagen um die Körperachse. */
.bo-ambient__wings {
    transform-origin: 50% 50%;
    animation: am-flap .9s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes am-flap {
    from { transform: scaleX(1); }
    to { transform: scaleX(.35); }
}

@keyframes am-flutter-right {
    0% { transform: translateX(-20vw) translateY(0); }
    9% { transform: translateX(8vw) translateY(-5vh); }
    18% { transform: translateX(36vw) translateY(4vh); }
    27% { transform: translateX(70vw) translateY(-6vh); }
    36%, 100% { transform: translateX(112vw) translateY(2vh); }
}

@keyframes am-flutter-left {
    0% { transform: translateX(112vw) translateY(0); }
    9% { transform: translateX(86vw) translateY(5vh); }
    18% { transform: translateX(55vw) translateY(-4vh); }
    27% { transform: translateX(22vw) translateY(6vh); }
    36%, 100% { transform: translateX(-20vw) translateY(-2vh); }
}

.bo-ambient__bubble {
    position: absolute;
    top: 100vh;
    left: var(--x);
    width: var(--w);
    height: var(--w);
    border: 1.500px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--highlight) 50%, transparent) 0 12%, color-mix(in srgb, var(--primary) 8%, transparent) 58%, transparent 74%);
    opacity: 0;
    --am-o: .35;
    animation:
        am-ascend var(--t) linear var(--d) infinite,
        am-sway 8s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__bubble--1 { --x: 12%; --w: 40px; --t: 54s; --d: -10s; }
.bo-ambient__bubble--2 { --x: 70%; --w: 24px; --t: 62s; --d: -36s; }
.bo-ambient__bubble--3 { --x: 38%; --w: 32px; --t: 48s; --d: -22s; }
.bo-ambient__bubble--4 { --x: 88%; --w: 52px; --t: 70s; --d: -50s; }
.bo-ambient__bubble--5 { --x: 56%; --w: 20px; --t: 58s; --d: -3s; }

@media (max-width: 640px) {
    .bo-ambient__butterfly--2,
    .bo-ambient__bubble--2,
    .bo-ambient__bubble--3,
    .bo-ambient__bubble--4 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__butterfly,
    .bo-ambient__bubble {
        display: none;
    }
}

/* ===== BuchUno (Look light): umblätternde Seite, fallendes Lesezeichen, Staub im Licht =====
 * Ein schräger Lichtschacht von rechts oben, darin wenige Staubkörner; die Seite blättert und das
 * Lesezeichen fällt je nur in einem Drittel des Zyklus. */
.bo-ambient__shaft {
    position: absolute;
    top: -10vh;
    right: -4vw;
    width: 30vw;
    height: 130vh;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--highlight) 24%, transparent), transparent 85%);
    clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
    transform-origin: 100% 0;
    rotate: 14deg;
    opacity: .6;
    animation: am-breathe 20s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes am-breathe {
    from { opacity: .45; }
    to { opacity: 1; }
}

.bo-ambient__dust {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--highlight);
    opacity: .1;
    --am-o: .5;
    animation: am-dust var(--t) cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__dust--1 { top: 12%; left: 82%; --t: 18s; --d: -3s; }
.bo-ambient__dust--2 { top: 24%; left: 70%; --t: 22s; --d: -9s; }
.bo-ambient__dust--3 { top: 36%; left: 88%; --t: 16s; --d: -12s; }
.bo-ambient__dust--4 { top: 46%; left: 66%; --t: 24s; --d: -6s; }
.bo-ambient__dust--5 { top: 18%; left: 92%; --t: 20s; --d: -15s; }
.bo-ambient__dust--6 { top: 58%; left: 80%; --t: 19s; --d: -1s; }

@keyframes am-dust {
    from { opacity: .1; transform: translate(0, 0); }
    to { opacity: var(--am-o); transform: translate(-18px, 26px); }
}

/* Eine Seite wird umgeschlagen (um den Rücken am linken Rand), dann bleibt es lange still. */
.bo-ambient__flip {
    position: absolute;
    right: 7vw;
    bottom: 12vh;
    width: 84px;
    height: 112px;
    border: 1px solid color-mix(in srgb, var(--ink-muted) 60%, transparent);
    border-radius: 2px 6px 6px 2px;
    background:
        repeating-linear-gradient(transparent 0 11px, color-mix(in srgb, var(--ink-muted) 35%, transparent) 11px 12px),
        var(--surface-200);
    transform-origin: 0 50%;
    opacity: 0;
    --am-o: .5;
    animation: am-flip 40s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: -4s;
}

@keyframes am-flip {
    0% { opacity: 0; transform: perspective(700px) rotateY(0); }
    5% { opacity: var(--am-o); transform: perspective(700px) rotateY(0); }
    22% { opacity: var(--am-o); transform: perspective(700px) rotateY(-178deg); }
    30%, 100% { opacity: 0; transform: perspective(700px) rotateY(-178deg); }
}

.bo-ambient__bookmark {
    position: absolute;
    top: -8vh;
    left: var(--x);
    width: 22px;
    height: 36px;
    opacity: 0;
    --am-o: .28;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 7s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate,
        am-tilt 6s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__bookmark--1 { --x: 22%; --t: 56s; --d: -10s; color: var(--accent-ink); }
.bo-ambient__bookmark--2 { --x: 60%; --t: 68s; --d: -44s; color: var(--primary); }

@media (max-width: 640px) {
    .bo-ambient__flip,
    .bo-ambient__bookmark--2,
    .bo-ambient__dust--2,
    .bo-ambient__dust--4,
    .bo-ambient__dust--6,
    .bo-ambient--sparse .bo-ambient__dust--5 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__flip,
    .bo-ambient__bookmark {
        display: none;
    }

    .bo-ambient__shaft,
    .bo-ambient__dust { animation: none; }
}

/* ===== LeseAlarm (Look krimi): ziehender Nebel, Taschenlampen-Kegel, Fußspuren =====
 * Ein Auftritt füllt nur einen Teil des Zyklus (Nebel gut ein Drittel, Kegel ein Drittel, Spuren ein
 * Viertel), den Rest ruht die Szene unsichtbar. */
.bo-ambient__fog {
    position: absolute;
    left: 0;
    width: 80vw;
    height: 34vh;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 34%, transparent), transparent 68%);
    opacity: 0;
    transform: translateX(-90vw);
    animation: am-fog 64s linear infinite;
    --am-o: .22;
}

.bo-ambient__fog--1 { top: 56vh; animation-delay: -8s; }
.bo-ambient__fog--2 {
    top: 22vh;
    width: 60vw;
    height: 28vh;
    animation-duration: 52s;
    animation-delay: -30s;
}

@keyframes am-fog {
    0% { opacity: 0; transform: translateX(-90vw); }
    6%, 34% { opacity: var(--am-o); }
    40%, 100% { opacity: 0; transform: translateX(110vw); }
}

/* Der Kegel schwenkt von einem Boden-Punkt aus langsam von links nach rechts. */
.bo-ambient__torch {
    position: absolute;
    left: 6vw;
    bottom: -4vh;
    width: 46vw;
    height: 78vh;
    background: linear-gradient(to top, color-mix(in srgb, var(--highlight-ink) 60%, transparent), transparent 85%);
    clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0);
    transform-origin: 50% 100%;
    opacity: 0;
    animation: am-torch 46s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: -5s;
    --am-o: .2;
}

@keyframes am-torch {
    0% { opacity: 0; transform: rotate(-34deg); }
    6% { opacity: var(--am-o); }
    22% { transform: rotate(10deg); }
    33% { opacity: var(--am-o); }
    38%, 100% { opacity: 0; transform: rotate(34deg); }
}

/* Fußspuren: schräger Weg nach rechts oben, ein Abdruck nach dem anderen (Abstand 1,6 s), dann verblassen alle. */
.bo-ambient__step {
    position: absolute;
    left: calc(8% + var(--n) * 9%);
    top: calc(84% - var(--n) * 7%);
    width: 18px;
    height: 36px;
    color: var(--ink-body);
    rotate: 52deg;
    translate: calc(var(--s) * 7px) calc(var(--s) * -5px);
    opacity: 0;
    animation: am-step 42s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: calc(var(--n) * 1.6s);
    --am-o: .3;
}

.bo-ambient__step--1 { --n: 0; --s: 1; }
.bo-ambient__step--2 { --n: 1; --s: -1; }
.bo-ambient__step--3 { --n: 2; --s: 1; }
.bo-ambient__step--4 { --n: 3; --s: -1; }
.bo-ambient__step--5 { --n: 4; --s: 1; }
.bo-ambient__step--6 { --n: 5; --s: -1; }

@keyframes am-step {
    0% { opacity: 0; }
    3%, 20% { opacity: var(--am-o); }
    30%, 100% { opacity: 0; }
}

/* Mobil höchstens die halbe Besetzung. */
@media (max-width: 640px) {
    .bo-ambient__dragon--2,
    .bo-ambient__meteor--2,
    .bo-ambient--home .bo-ambient__meteor,
    .bo-ambient--home .bo-ambient__spark--3,
    .bo-ambient--home .bo-ambient__spark--7,
    .bo-ambient--page .bo-ambient__spark--4,
    .bo-ambient--fantasy .bo-ambient__spark--2,
    .bo-ambient--fantasy .bo-ambient__spark--4,
    .bo-ambient--fantasy .bo-ambient__spark--6,
    .bo-ambient--fantasy .bo-ambient__spark--8,
    .bo-ambient__fog--2,
    .bo-ambient__step--4,
    .bo-ambient__step--5,
    .bo-ambient__step--6,
    .bo-ambient--sparse .bo-ambient__torch {
        display: none;
    }

    .bo-ambient__dragon { width: 100px; height: 50px; }
}

/* Bewegung anhalten (WCAG 2.2.2): Schalter im Footer. */
:root:has(#ambient-pause:checked) .bo-ambient *,
:root:has(#ambient-pause:checked) .bo-ambient,
:root:has(#ambient-pause:checked) .bo-ambient {
    animation-play-state: paused;
}

.bo-pause {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--on-night-body);
}

.bo-pause input {
    accent-color: var(--accent);
}

.bo-pause input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    /* Figuren, die sich bewegen, entfallen; der Sternenhimmel steht still. */
    .bo-ambient__dragon,
    .bo-ambient__ufo,
    .bo-ambient__meteor,
    .bo-ambient__spark,
    .bo-ambient__fog,
    .bo-ambient__torch,
    .bo-ambient__step {
        display: none;
    }

    .bo-ambient__stars,
    .bo-ambient__stars::after {
        animation: none;
    }
}

/* ===== Reihen-Seiten (Bereich series:<slug>, AmbientExtension::SERIES_CASTS): eigene Figuren je Reihe =====
 * Drachenmeister: Drachen und Funken (oben). Dog Man: Sprechblasen. Chronik der Unsterblichen: Schwerter und
 * ein Blutmond. Eule Eva: Eulen und Federn. Notizbuch des Grauens: Notizbuchseiten und Tintenkleckse.
 * Amulett: leuchtendes Amulett und Funken. Gemeinsame Keyframes am-ascend/am-descend/am-sway/am-tilt. */
.bo-ambient__speech,
.bo-ambient__sword,
.bo-ambient__feather,
.bo-ambient__leaf {
    position: absolute;
    left: var(--x);
    width: var(--w);
    opacity: 0;
}

.bo-ambient__speech {
    top: 100vh;
    height: calc(var(--w) * .85);
    color: var(--accent);
    --am-o: .26;
    animation:
        am-ascend var(--t) linear var(--d) infinite,
        am-sway 6s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__speech--1 { --x: 10%; --w: 44px; --t: 48s; --d: -4s; }
.bo-ambient__speech--2 { --x: 72%; --w: 34px; --t: 56s; --d: -26s; }
.bo-ambient__speech--3 { --x: 38%; --w: 52px; --t: 62s; --d: -40s; }
.bo-ambient__speech--4 { --x: 88%; --w: 38px; --t: 52s; --d: -14s; }
.bo-ambient__speech--5 { --x: 56%; --w: 30px; --t: 44s; --d: -34s; }

.bo-ambient__sword {
    top: -14vh;
    height: calc(var(--w) * 3);
    color: var(--ink-muted);
    rotate: var(--r);
    --am-o: .2;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 9s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__sword--1 { --x: 14%; --w: 16px; --r: 24deg; --t: 64s; --d: -8s; }
.bo-ambient__sword--2 { --x: 80%; --w: 13px; --r: -30deg; --t: 72s; --d: -40s; }
.bo-ambient__sword--3 { --x: 46%; --w: 18px; --r: -16deg; --t: 68s; --d: -24s; }
.bo-ambient__sword--4 { --x: 92%; --w: 12px; --r: 38deg; --t: 60s; --d: -52s; }

/* Blutmond: dezent, kein Blut – eine rote Scheibe, die langsam heller und dunkler wird. */
.bo-ambient__moon {
    position: absolute;
    right: 9vw;
    top: 9vh;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--danger) 55%, var(--highlight)), var(--danger) 72%);
    box-shadow: 0 0 44px 8px color-mix(in srgb, var(--danger) 30%, transparent);
    opacity: .22;
    animation: am-moon 16s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes am-moon {
    from { opacity: .12; transform: scale(1); }
    to { opacity: .3; transform: scale(1.05); }
}

.bo-ambient__owl {
    position: absolute;
    left: 0;
    top: var(--y);
    width: 46px;
    height: 46px;
    color: var(--ink-body);
    opacity: .26;
    transform: translateX(-30vw);
    animation: am-glide-right var(--t) cubic-bezier(.45, 0, .55, 1) var(--d) infinite;
}

.bo-ambient__owl svg { animation: am-hover 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; }

.bo-ambient__owl--1 { --y: 16vh; --t: 54s; --d: -8s; }
.bo-ambient__owl--2 { --y: 50vh; --t: 66s; --d: -42s; width: 34px; height: 34px; opacity: .18; animation-name: am-glide-left; }

.bo-ambient__feather {
    height: calc(var(--w) * 2.5);
    color: var(--accent-ink);
    top: -8vh;
    --am-o: .24;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 8s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate,
        am-tilt 11s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__feather--1 { --x: 6%; --w: 13px; --t: 50s; --d: -6s; }
.bo-ambient__feather--2 { --x: 30%; --w: 11px; --t: 58s; --d: -22s; }
.bo-ambient__feather--3 { --x: 58%; --w: 14px; --t: 46s; --d: -34s; }
.bo-ambient__feather--4 { --x: 78%; --w: 12px; --t: 62s; --d: -12s; }
.bo-ambient__feather--5 { --x: 92%; --w: 10px; --t: 54s; --d: -44s; }

.bo-ambient__leaf {
    height: calc(var(--w) * 1.25);
    color: var(--ink-muted);
    top: -8vh;
    --am-o: .2;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 9s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate,
        am-tilt 13s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__leaf--1 { --x: 12%; --w: 26px; --t: 56s; --d: -10s; }
.bo-ambient__leaf--2 { --x: 40%; --w: 22px; --t: 64s; --d: -30s; }
.bo-ambient__leaf--3 { --x: 68%; --w: 28px; --t: 52s; --d: -4s; }
.bo-ambient__leaf--4 { --x: 88%; --w: 20px; --t: 60s; --d: -46s; }

/* Tintenkleckse: wachsen kurz auf und verschwinden wieder (kindgerecht gruselig). */
.bo-ambient__ink {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: calc(var(--w) * .82);
    border-radius: 56% 44% 52% 48% / 48% 56% 44% 52%;
    background: var(--ink-muted);
    opacity: 0;
    --am-o: .2;
    animation: am-blot var(--t) cubic-bezier(.23, 1, .32, 1) var(--d) infinite;
}

.bo-ambient__ink::after {
    content: "";
    position: absolute;
    right: -30%;
    bottom: -18%;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: inherit;
}

.bo-ambient__ink--1 { --x: 8%; --y: 62vh; --w: 54px; --t: 34s; --d: -6s; }
.bo-ambient__ink--2 { --x: 84%; --y: 30vh; --w: 40px; --t: 40s; --d: -22s; }
.bo-ambient__ink--3 { --x: 60%; --y: 78vh; --w: 62px; --t: 46s; --d: -34s; }
.bo-ambient__ink--4 { --x: 26%; --y: 18vh; --w: 36px; --t: 38s; --d: -14s; }

@keyframes am-blot {
    0% { opacity: 0; transform: scale(.3); }
    5%, 26% { opacity: var(--am-o); transform: scale(1); }
    34%, 100% { opacity: 0; transform: scale(1.06); }
}

.bo-ambient__amulet {
    position: absolute;
    left: 84%;
    top: 16vh;
    width: 38px;
    height: 54px;
    color: var(--highlight-ink);
    opacity: .4;
    transform-origin: 50% 0;
    animation: am-swing 7s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.bo-ambient__aura {
    position: absolute;
    inset: -34px;
    top: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--highlight) 75%, transparent), transparent 66%);
    opacity: 0;
    animation: am-aura 5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes am-swing {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}

@keyframes am-aura {
    from { opacity: .1; transform: scale(.8); }
    to { opacity: .7; transform: scale(1.1); }
}

/* Mobil höchstens die halbe Besetzung. */
@media (max-width: 640px) {
    .bo-ambient--series .bo-ambient__spark--2,
    .bo-ambient--series .bo-ambient__spark--4,
    .bo-ambient--series .bo-ambient__spark--6,
    .bo-ambient--series .bo-ambient__spark--8,
    .bo-ambient__speech--2,
    .bo-ambient__speech--4,
    .bo-ambient__sword--2,
    .bo-ambient__sword--4,
    .bo-ambient__owl--2,
    .bo-ambient__feather--2,
    .bo-ambient__feather--4,
    .bo-ambient__leaf--2,
    .bo-ambient__leaf--4,
    .bo-ambient__ink--2,
    .bo-ambient__ink--4 {
        display: none;
    }

    .bo-ambient__moon { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Bewegte Figuren entfallen; Mond und Amulett stehen still. */
    .bo-ambient__speech,
    .bo-ambient__sword,
    .bo-ambient__owl,
    .bo-ambient__feather,
    .bo-ambient__leaf,
    .bo-ambient__ink,
    .bo-ambient__aura {
        display: none;
    }

    .bo-ambient__moon,
    .bo-ambient__amulet {
        animation: none;
    }
}