/* Kindheit 90 – Buch-Leser */

.k90-hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-4);
}

@media (max-width: 600px) {
    .k90-hero {
        padding-top: var(--space-6);
        padding-bottom: var(--space-3);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-hero {
        padding-top: var(--space-6);
        padding-bottom: var(--space-3);
    }
}

.k90-reader-section {
    padding: var(--space-4) var(--space-4) var(--space-16);
    background: linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
}

@media (max-width: 600px) {
    .k90-reader-section {
        padding: var(--space-3) var(--space-3) var(--space-10);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-reader-section {
        padding: var(--space-3) var(--space-4) var(--space-12);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-reader-section {
        padding: var(--space-3) var(--space-4) var(--space-12);
    }
}

.k90-book-shell {
    max-width: min(1400px, 96vw);
    margin: 0 auto;
}

@media (max-width: 600px) {
    .k90-book-shell {
        max-width: min(100%, 98vw);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-book-shell {
        max-width: min(1000px, 94vw);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-book-shell {
        max-width: min(1100px, 92vw);
    }
}

.k90-book-viewport {
    width: 100%;
    margin: 0 auto;
}

.k90-book {
    margin: 0 auto;
    width: 100%;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm);
    background: #f4ead5;
}

.k90-flip-page {
    background: #fffef8;
    border: 1px solid #e8dcc0;
    overflow: hidden;
}

.k90-page {
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.k90-page-inner {
    height: 100%;
    padding: clamp(1rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .k90-page-inner,
    .k90-page-combined-body,
    .k90-page--story-text .k90-page-prose,
    .k90-page--story-text .k90-page-text {
        touch-action: pan-y;
    }
}

@media (max-width: 600px) {
    .k90-page-inner {
        padding: clamp(0.75rem, 3vw, 1.25rem);
        gap: var(--space-2);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-page-inner {
        padding: clamp(0.9rem, 2.5vw, 1.6rem);
        gap: var(--space-2);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-page-inner {
        padding: clamp(0.85rem, 2vw, 1.5rem);
        gap: var(--space-2);
    }
}

.k90-page-inner--compact {
    justify-content: flex-start;
    padding-top: clamp(1.25rem, 3vw, 2rem);
}

.k90-page--cover {
    background: linear-gradient(145deg, #fff9e6 0%, #ffeaa0 100%);
    text-align: center;
}

.k90-page--cover .k90-page-inner {
    align-items: center;
    justify-content: center;
}

.k90-page--back {
    background: linear-gradient(145deg, #f3e8ff 0%, #fff9e6 100%);
}

.k90-page-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 700;
}

.k90-page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--color-primary-dark);
    line-height: 1.15;
}

@media (max-width: 600px) {
    .k90-page-title {
        font-size: clamp(1.375rem, 5vw, 1.875rem);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-page-title {
        font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-page-title {
        font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    }
}

.k90-page-lead {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    max-width: 28ch;
}

@media (max-width: 900px) {
    .k90-page-lead {
        font-size: var(--text-base);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-page-lead {
        font-size: var(--text-base);
    }
}

.k90-page-hint {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.k90-page--section {
    background: var(--color-surface-alt);
}

.k90-page--section h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-primary-dark);
}

@media (max-width: 600px) {
    .k90-page--section h2 {
        font-size: clamp(1.25rem, 4vw, 1.625rem);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-page--section h2 {
        font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-page--section h2 {
        font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    }
}

.k90-page--character-text h2,
.k90-page--story-text h2 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    flex-shrink: 0;
}

/* Geschichten & Charaktere: Bild links (eigene Seite), Text rechts (eigene Seite) */
.k90-page--story-media,
.k90-page--character-media {
    background: var(--color-surface-alt);
}

.k90-page-inner--story-media {
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
    padding: clamp(0.15rem, 0.4vw, 0.35rem);
}

.k90-page-inner--story-text {
    justify-content: flex-start;
    overflow: hidden;
    min-height: 0;
    gap: var(--space-2);
    padding: clamp(0.75rem, 2vw, 1.25rem);
}

@media (max-width: 600px) {
    .k90-page-inner--story-text {
        padding: clamp(0.625rem, 2.5vw, 0.875rem);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-page-inner--story-text {
        padding: clamp(0.7rem, 1.8vw, 1.1rem);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-page-inner--story-text {
        padding: clamp(0.65rem, 1.6vw, 1rem);
    }
}

.k90-page--story-text h2 {
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
    line-height: 1.25;
    margin: 0;
}

@media (max-width: 600px) {
    .k90-page--story-text h2 {
        font-size: clamp(0.9375rem, 3vw, 1.125rem);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-page--story-text h2 {
        font-size: clamp(1rem, 2vw, 1.25rem);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-page--story-text h2 {
        font-size: clamp(1rem, 1.8vw, 1.3rem);
    }
}

.k90-page-figure--story {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.k90-page-figure--story img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

.k90-page--story-text .k90-page-prose,
.k90-page--story-text .k90-page-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 600px) {
    .k90-page--story-text .k90-page-prose,
    .k90-page--story-text .k90-page-text {
        font-size: clamp(0.8125rem, 2.5vw, 0.875rem);
        line-height: 1.55;
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-page--story-text .k90-page-prose,
    .k90-page--story-text .k90-page-text {
        font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
        line-height: 1.575;
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-page--story-text .k90-page-prose,
    .k90-page--story-text .k90-page-text {
        font-size: clamp(0.8125rem, 1.4vw, 0.9rem);
        line-height: 1.55;
    }
}

.k90-page--story-text-only .k90-page-inner--story-text {
    justify-content: center;
}

/* Mobile: Bild und Text auf einer Seite */
.k90-page--combined {
    background: #fffef8;
}

.k90-page-inner--combined {
    justify-content: flex-start;
    overflow: hidden;
    min-height: 0;
    gap: var(--space-2);
    padding: clamp(0.75rem, 2vw, 1rem);
}

.k90-page-figure--combined {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    flex: 0 0 auto;
    max-height: min(44vh, 340px);
}

.k90-page-figure--combined img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(44vh, 340px);
    object-fit: contain;
}

.k90-page-combined-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.k90-page-combined-body h2 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    font-size: clamp(1.125rem, 4.5vw, 1.375rem);
    line-height: 1.25;
    margin: 0;
    flex-shrink: 0;
}

.k90-page-combined-body .k90-page-prose,
.k90-page-combined-body .k90-page-text {
    font-size: clamp(0.875rem, 3.6vw, 1rem);
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.k90-page--spacer {
    background: #fffef8;
}

.k90-page-figure {
    margin: 0;
    text-align: center;
    flex-shrink: 0;
}

.k90-page-text,
.k90-page-prose {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text);
}

.k90-page-prose img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.k90-page-prose p,
.k90-page-prose ul,
.k90-page-prose ol {
    margin-bottom: var(--space-3);
}

.k90-page-prose h2,
.k90-page-prose h3 {
    font-family: var(--font-heading);
    margin: var(--space-4) 0 var(--space-2);
}

.k90-book-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

@media (max-width: 600px) {
    .k90-book-controls {
        gap: var(--space-2);
        margin-top: var(--space-4);
    }
}

@media (min-width: 601px) and (max-width: 900px) {
    .k90-book-controls {
        gap: var(--space-2);
        margin-top: var(--space-5);
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .k90-book-controls {
        gap: var(--space-2);
        margin-top: var(--space-5);
    }
}

.k90-page-info {
    min-width: 140px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.k90-nav-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.k90-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 50vh;
    overflow: auto;
}

.k90-toc-link {
    width: 100%;
    text-align: left;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font: inherit;
    color: var(--color-text);
    transition: background var(--transition), border-color var(--transition);
}

.k90-toc-link:hover,
.k90-toc-link.is-current {
    background: var(--color-success-bg);
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}

.k90-toc-modal-body {
    margin-bottom: var(--space-4);
}

.k90-empty {
    padding-bottom: var(--space-16);
}

/* Vollbild-Lesemodus */
.k90-reader-section:fullscreen,
.k90-reader-section:-webkit-full-screen,
.k90-reader-section.is-fullscreen-fallback {
    position: fixed;
    inset: 0;
    z-index: 9999;
    margin: 0;
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, #2a2218 0%, #1a1410 45%, #120e0a 100%);
    overflow: hidden;
    box-sizing: border-box;
}

.k90-reader-section:fullscreen .k90-book-shell,
.k90-reader-section:-webkit-full-screen .k90-book-shell,
.k90-reader-section.is-fullscreen-fallback .k90-book-shell {
    max-width: min(1600px, 98vw);
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: var(--space-4);
    min-height: 0;
    position: relative;
    isolation: isolate;
}

.k90-reader-section:fullscreen .k90-book-viewport,
.k90-reader-section:-webkit-full-screen .k90-book-viewport,
.k90-reader-section.is-fullscreen-fallback .k90-book-viewport {
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.k90-reader-section:fullscreen .k90-book,
.k90-reader-section:-webkit-full-screen .k90-book,
.k90-reader-section.is-fullscreen-fallback .k90-book {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
    pointer-events: auto;
}

/* Page-Flip erzeugt grosse Klickflächen – im Vollbild auf den Buchbereich begrenzen */
.k90-reader-section:fullscreen .k90-book :is(.stf__parent, .stf__wrapper, .stf__block),
.k90-reader-section:-webkit-full-screen .k90-book :is(.stf__parent, .stf__wrapper, .stf__block),
.k90-reader-section.is-fullscreen-fallback .k90-book :is(.stf__parent, .stf__wrapper, .stf__block) {
    max-height: 100% !important;
}

.k90-reader-section:fullscreen .k90-book-controls,
.k90-reader-section:-webkit-full-screen .k90-book-controls,
.k90-reader-section.is-fullscreen-fallback .k90-book-controls {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    margin-top: 0;
    pointer-events: auto;
}

/* Modal im Vollbild-Container: nur sichtbar wenn geöffnet */
.k90-reader-section:fullscreen > .app-modal[hidden],
.k90-reader-section:-webkit-full-screen > .app-modal[hidden],
.k90-reader-section.is-fullscreen-fallback > .app-modal[hidden] {
    display: none !important;
    pointer-events: none !important;
}

.k90-reader-section:fullscreen .k90-page-info,
.k90-reader-section:-webkit-full-screen .k90-page-info,
.k90-reader-section.is-fullscreen-fallback .k90-page-info {
    color: rgba(255, 255, 255, 0.75);
}

.k90-reader-section:fullscreen .k90-page-inner--story-media,
.k90-reader-section:-webkit-full-screen .k90-page-inner--story-media,
.k90-reader-section.is-fullscreen-fallback .k90-page-inner--story-media {
    padding: 0.1rem;
}

body.k90-fullscreen-active {
    overflow: hidden;
}

@media (max-width: 768px) {
    .k90-book-controls {
        gap: var(--space-2);
    }

    .k90-nav-btn {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .k90-page-info {
        flex: 1 1 100%;
        order: -1;
    }
}