/* ============================================================
   MyKiosk · Monochromes iPad-Theme on top of Shoelace
   ============================================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter/InterVariable.woff2") format("woff2-variations"),
         url("/assets/fonts/inter/InterVariable.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter/InterVariable-Italic.woff2") format("woff2-variations"),
         url("/assets/fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

/* ── Shoelace-Variablen für monochrome iPad-Optik ─────────────────────── */
:root,
.sl-theme-light {
    /* Primary = SCHWARZ (kein Akzentblau) */
    --sl-color-primary-50:  #f5f5f7;
    --sl-color-primary-100: #e8e8ea;
    --sl-color-primary-200: #d2d2d7;
    --sl-color-primary-300: #aeaeb2;
    --sl-color-primary-400: #8e8e93;
    --sl-color-primary-500: #1d1d1f;
    --sl-color-primary-600: #1d1d1f;
    --sl-color-primary-700: #161618;
    --sl-color-primary-800: #0f0f10;
    --sl-color-primary-900: #000000;
    --sl-color-primary-950: #000000;
    --sl-color-primary-text: #ffffff;

    /* Success / Warning / Danger — auch nur grau-getönt */
    --sl-color-success-500: #1d1d1f;
    --sl-color-success-600: #1d1d1f;
    --sl-color-success-700: #161618;
    --sl-color-warning-500: #8e8e93;
    --sl-color-warning-600: #6e6e73;
    --sl-color-warning-700: #48484a;
    --sl-color-danger-500:  #1d1d1f;
    --sl-color-danger-600:  #1d1d1f;
    --sl-color-danger-700:  #161618;

    /* Neutrale Skala — Apple-Light */
    --sl-color-neutral-0:    #ffffff;
    --sl-color-neutral-50:   #fbfbfd;
    --sl-color-neutral-100:  #f5f5f7;
    --sl-color-neutral-200:  #e8e8ea;
    --sl-color-neutral-300:  #d2d2d7;
    --sl-color-neutral-400:  #aeaeb2;
    --sl-color-neutral-500:  #8e8e93;
    --sl-color-neutral-600:  #6e6e73;
    --sl-color-neutral-700:  #48484a;
    --sl-color-neutral-800:  #2c2c2e;
    --sl-color-neutral-900:  #1d1d1f;
    --sl-color-neutral-950:  #000000;

    /* Radien — iOS-style, durchgängig rund */
    --sl-border-radius-small:    8px;
    --sl-border-radius-medium:  12px;
    --sl-border-radius-large:   18px;
    --sl-border-radius-x-large: 24px;
    --sl-border-radius-pill:   9999px;
    --sl-border-radius-circle: 50%;

    /* Typografie */
    --sl-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
                    "Segoe UI", Roboto, system-ui, sans-serif;
    --sl-font-serif: var(--sl-font-sans);
    --sl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    --sl-font-weight-light:    400;
    --sl-font-weight-normal:   450;
    --sl-font-weight-semibold: 600;
    --sl-font-weight-bold:     700;
    --sl-letter-spacing-dense: -0.012em;

    /* Schatten — sehr dezent, iPad-mäßig */
    --sl-shadow-x-small: 0 1px 2px rgba(0,0,0,.04);
    --sl-shadow-small:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sl-shadow-medium:  0 4px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
    --sl-shadow-large:   0 12px 32px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.05);
    --sl-shadow-x-large: 0 24px 56px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);

    /* Spacing — etwas großzügiger */
    --sl-spacing-2x-small: 0.25rem;
    --sl-spacing-x-small:  0.5rem;
    --sl-spacing-small:    0.75rem;
    --sl-spacing-medium:   1.125rem;
    --sl-spacing-large:    1.5rem;
    --sl-spacing-x-large:  2.25rem;
    --sl-spacing-2x-large: 3.5rem;

    /* Focus-Ring schwarz statt blau */
    --sl-focus-ring-color: rgba(0,0,0,0.30);
    --sl-focus-ring-width: 3px;
}

/* ── Body & Reset ───────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* FOUC-Schutz: Shoelace-Elemente bleiben unsichtbar bis sie definiert sind.
   Verhindert „nackten" Anzeige-Flicker beim Page-Load oder Modul-Reload. */
sl-button:not(:defined),
sl-input:not(:defined),
sl-icon:not(:defined),
sl-tag:not(:defined),
sl-card:not(:defined),
sl-alert:not(:defined),
sl-spinner:not(:defined),
sl-progress-bar:not(:defined),
sl-breadcrumb:not(:defined),
sl-breadcrumb-item:not(:defined),
sl-details:not(:defined),
sl-tooltip:not(:defined),
sl-dialog:not(:defined),
sl-divider:not(:defined) {
    visibility: hidden;
}
body {
    background: #fbfbfd;
    color: #1d1d1f;
    font-family: var(--sl-font-sans);
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a { color: #1d1d1f; text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }
.muted { color: #6e6e73; }
.text-grey { color: #6e6e73; }
.text-grey-light { color: #8e8e93; }
code, kbd, samp {
    font-family: var(--sl-font-mono);
    font-size: .9em;
    background: #f5f5f7;
    padding: 1px 6px;
    border-radius: 5px;
    color: #1d1d1f;
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Container & Layout ─────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 640px; }
.section { padding: 1.5rem 0 3rem; }
.center-pane {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1rem;
}

/* ── Frosted Navbar (iPadOS-Style) ──────────────────────────────────── */
.app-nav {
    position: sticky; top: 0; z-index: 30;
    background: rgba(251,251,253,.78);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    /* iOS safe-area: bei "black-translucent" status-bar liegt Inhalt unter Notch */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.app-nav__inner {
    max-width: 1280px; margin: 0 auto; padding: 12px 1.5rem;
    display: flex; align-items: center; gap: 1rem; min-height: 52px;
}
.app-nav__brand {
    font-weight: 700; font-size: 17px; letter-spacing: -0.014em;
    color: #1d1d1f; text-decoration: none;
}
.app-nav__brand:hover { color: #000; text-decoration: none; }
.app-nav__items { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.app-nav__spacer { flex: 1; }
.app-nav__link {
    padding: 6px 12px; border-radius: 9999px;
    color: #6e6e73; font-weight: 500; font-size: 14px;
    text-decoration: none; letter-spacing: -0.005em;
    transition: background .15s ease, color .15s ease;
}
.app-nav__link:hover { color: #1d1d1f; background: rgba(0,0,0,.04); text-decoration: none; }
.app-nav__link.is-active {
    background: #1d1d1f; color: #fff;
}
.app-nav__link.is-active:hover { color: #fff; background: #000; }
.app-nav__link.is-muted { color: #8e8e93; }

/* ── Headings ────────────────────────────────────────────────────────── */
.page-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.022em;
    margin: 0 0 1.25rem;
    color: #1d1d1f;
}
.page-subtitle { color: #6e6e73; font-size: 15px; margin: -0.5rem 0 1.5rem; }
.section-title { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; margin: 0 0 .75rem; }

/* ── Cards / Panels ─────────────────────────────────────────────────── */
.panel {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: var(--sl-shadow-x-small);
    margin-bottom: 1.5rem;
}
.panel__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem; gap: 1rem;
}

/* Kiosk-Card (Magazin/Issue Cover) */
.kiosk-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.05);
    display: flex; flex-direction: column; height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
    box-shadow: var(--sl-shadow-x-small);
    position: relative; /* damit .fav-toggle (position:absolute) korrekt liegt */
}
.kiosk-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sl-shadow-large);
    border-color: rgba(0,0,0,.10);
}
.kiosk-card[data-card-href] { cursor: pointer; }

/* hidden-Attribut respektieren (CSS display:flex/grid würde es sonst überschreiben) */
.kiosk-card[hidden],
.fav-page-section[hidden],
#favorites-empty[hidden] { display: none !important; }

/* Favoriten-Page: Sektionen mit Abstand */
.fav-page-section { margin-bottom: 2.5rem; }
.fav-page-section .section-title {
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: #6e6e73; margin: 0 0 1rem;
}
.kiosk-card__cover {
    display: block; aspect-ratio: 2/3;
    background: #f5f5f7; overflow: hidden;
    position: relative;
}

/* ── Favoriten-Sektion ─────────────────────────────────────────────────── */
.favorites-section { margin: 0 0 2rem; }
.favorites-section[hidden] { display: none; }
.favorites-section__head {
    display: flex; align-items: center; gap: 1rem;
    margin: 0 0 .75rem;
    flex-wrap: wrap;
}
.favorites-section__head h2 {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: #6e6e73; margin: 0;
    display: inline-flex; align-items: center; gap: .35rem;
}
.favorites-section__head h2 svg { width: 14px; height: 14px; }
.favorites-section__sort { margin-left: auto; }
.favorites-divider {
    border: 0; height: 1px;
    background: rgba(0,0,0,.06);
    margin: 2.5rem 0; /* gleicher Abstand oben + unten */
}

/* ── Favoriten-Toggle (Stern auf Card-Cover) ───────────────────────────── */
.fav-toggle {
    position: absolute;
    top: 8px; right: 8px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);
    border: 0;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease;
    z-index: 5;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.fav-toggle:hover  { background: rgba(0,0,0,.74); transform: scale(1.08); }
.fav-toggle:active { transform: scale(.92); }
.fav-toggle svg { width: 17px; height: 17px; pointer-events: none; }
.fav-toggle .fav-toggle__fill    { display: none; }
.fav-toggle .fav-toggle__outline { display: block; }
.fav-toggle.is-fav {
    background: #ffffff;
    color: #1d1d1f;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.fav-toggle.is-fav .fav-toggle__fill    { display: block; }
.fav-toggle.is-fav .fav-toggle__outline { display: none; }
.fav-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.65);
}
.kiosk-card__cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.kiosk-card:hover .kiosk-card__cover img { transform: scale(1.03); }
.kiosk-card__cover--empty {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #e8e8ea, #d2d2d7);
    display: flex; align-items: center; justify-content: center;
    color: #aeaeb2;
}
.kiosk-card__body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.kiosk-card__title {
    font-size: 15px; font-weight: 600; letter-spacing: -0.012em;
    line-height: 1.3; color: #1d1d1f; margin: 0;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kiosk-card__sub { font-size: 12.5px; color: #6e6e73; margin: 0; letter-spacing: -0.005em; }
.kiosk-card__actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: auto; padding-top: 4px; }
.kiosk-card__actions sl-button::part(base) { width: 100%; }

/* Plain-HTML Buttons in Cards (Klon-safe, kein Custom Element) */
.card-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    font: 600 13px var(--sl-font-sans, -apple-system, sans-serif);
    letter-spacing: -0.005em;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.card-btn:active { transform: scale(.97); }
.card-btn svg { flex-shrink: 0; }
.card-btn--primary {
    background: #1d1d1f; color: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.card-btn--primary:hover { background: #000; color: #ffffff; text-decoration: none; }
.card-btn--ghost {
    background: #ffffff; color: #1d1d1f;
    border-color: rgba(0,0,0,.10);
}
.card-btn--ghost:hover { background: #f5f5f7; color: #1d1d1f; text-decoration: none; border-color: rgba(0,0,0,.15); }

.kiosk-card-link {
    display: block; color: inherit; text-decoration: none; height: 100%;
}
.kiosk-card-link:hover { color: inherit; text-decoration: none; }

/* ── Galerie-Grid ──────────────────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}
@media (min-width: 1200px) {
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.75rem; }
}

/* ── Toolbar ────────────────────────────────────────────────────────── */
.gallery-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin: 0.5rem 0 1.5rem;
}
.gallery-toolbar__count {
    font-size: 14px; color: #6e6e73; letter-spacing: -0.005em;
}
.gallery-toolbar__count strong { color: #1d1d1f; font-weight: 600; }

/* ── Tables (Shoelace hat keine native Table-Komponente) ────────────── */
.kiosk-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 14px;
}
.kiosk-table th, .kiosk-table td {
    text-align: left; padding: 10px 12px;
    border-bottom: 1px solid #e8e8ea; vertical-align: middle;
}
.kiosk-table th {
    font-size: 12px; font-weight: 600; color: #6e6e73;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: #fbfbfd;
}
.kiosk-table tr:last-child td { border-bottom: 0; }
.kiosk-table tr:hover td { background: #fbfbfd; }
.kiosk-table--bordered {
    border: 1px solid #e8e8ea; border-radius: 14px; overflow: hidden;
}
.kiosk-table .center  { text-align: center; }
.kiosk-table .right   { text-align: right; }
.kiosk-table .actions { white-space: nowrap; }
.kiosk-table .truncate {
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kiosk-table sl-input::part(base) { font-size: 13px; min-height: 30px; }

/* Stats-Grid (Admin Dashboard) */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.stat-card {
    background: #fff; padding: 1.25rem 1.5rem; border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
}
.stat-card__value {
    font-size: 32px; font-weight: 700; letter-spacing: -0.022em; color: #1d1d1f;
    line-height: 1.1;
}
.stat-card__label { color: #6e6e73; font-size: 12.5px; margin-top: 4px; }

/* Code / Pre / Cron-Output */
.kiosk-pre {
    background: #0f0f10; color: #d2d2d7;
    padding: 14px 16px; border-radius: 12px;
    font-family: var(--sl-font-mono); font-size: 13px;
    line-height: 1.6; white-space: pre-wrap; word-break: break-word;
    overflow-x: auto;
}
.stream-line.ok   { color: #aeeeb2; }
.stream-line.err  { color: #ff8a8a; }
.stream-line.warn { color: #ffd16a; }
.stream-line.skip { color: #8e8e93; }

/* ── Sort-Pills Wrapper (zwei Segmented-Controls nebeneinander) ─────── */
.sort-pills { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Sort Segmented-Control (eigene Pill) ───────────────────────────── */
.sort-segmented {
    display: inline-flex; align-items: center; gap: 3px;
    background: #f5f5f7;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 9999px;
    padding: 3px;
}
.sort-segmented__btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
    color: #6e6e73; background: transparent;
    text-decoration: none;
    transition: all .15s ease;
}
.sort-segmented__btn:hover { color: #1d1d1f; text-decoration: none; }
.sort-segmented__btn.is-active {
    background: #fff; color: #1d1d1f;
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,.04),
        0 1px 3px rgba(0,0,0,.08),
        0 1px 2px rgba(0,0,0,.04);
    font-weight: 600;
}
.sort-segmented__btn svg { width: 14px; height: 14px; }

/* ── View-Page (PDF Loader) ─────────────────────────────────────────── */
.view-page {
    margin: 0;
    background: radial-gradient(circle at 50% 30%, #2c2c2e 0%, #161618 70%);
    color: #f5f5f7;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.view-loader {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 2rem 1.5rem;
    max-width: 440px; width: 100%;
}
.view-loader__spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(255,255,255,.12);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kiosk-spin 0.9s linear infinite;
    margin-bottom: 1.5rem;
}
@keyframes kiosk-spin { to { transform: rotate(360deg); } }
.view-loader__magazine {
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.08em; color: #aeaeb2;
    margin: 0 0 .25rem; font-weight: 600;
}
.view-loader__title {
    font-size: 22px; font-weight: 600; letter-spacing: -0.018em;
    line-height: 1.25; margin: 0 0 .5rem; color: #f5f5f7;
}
.view-loader__subtitle { font-size: 14px; color: #aeaeb2; margin: 0 0 1.5rem; min-height: 1.4em; }
.view-loader .kiosk-progress {
    width: 280px; max-width: 100%; margin-bottom: 0.75rem;
}
.view-loader .kiosk-progress {
    /* dunkler Loader-Hintergrund → helle Bar */
    --kiosk-progress-track: rgba(255,255,255,.12);
    --kiosk-progress-fill:  #ffffff;
}
.view-loader__bytes {
    font-size: 13px; color: #aeaeb2; margin: 0 0 1rem;
    font-variant-numeric: tabular-nums;
}
.view-loader__hint { font-size: 12px; color: #8e8e93; margin: 0; }

/* ── Login-Box ──────────────────────────────────────────────────────── */
.login-box {
    background: #fff;
    border-radius: 18px;
    padding: 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--sl-shadow-large);
    border: 1px solid rgba(0,0,0,.05);
}
.login-box__title {
    font-size: 26px; font-weight: 700; letter-spacing: -0.022em;
    text-align: center; margin: 0 0 .25rem;
}
.login-box__sub { color: #6e6e73; font-size: 14px; text-align: center; margin: 0 0 1.5rem; }

/* ── Buttons & Misc Overrides ───────────────────────────────────────── */
sl-button::part(base) {
    font-weight: 500;
    letter-spacing: -0.005em;
}
sl-button[variant="primary"]::part(base) {
    background: #1d1d1f;
    border-color: #1d1d1f;
    color: #fff;
}
sl-button[variant="primary"]::part(base):hover {
    background: #000;
    border-color: #000;
}
sl-button[size="small"]::part(base) { font-size: 13px; }

sl-tag[variant="success"]::part(base) {
    background: #e8e8ea; border-color: transparent; color: #1d1d1f;
}
sl-tag[variant="warning"]::part(base) {
    background: #f5f5f7; border-color: transparent; color: #6e6e73;
}
sl-tag[variant="danger"]::part(base) {
    background: #1d1d1f; border-color: transparent; color: #fff;
}
sl-tag[variant="neutral"]::part(base) {
    background: #f5f5f7; border-color: transparent; color: #6e6e73;
}

sl-alert::part(base) { border-radius: 14px; }

sl-card::part(base) {
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--sl-shadow-x-small);
}

/* Footer */
.app-footer {
    border-top: 1px solid rgba(0,0,0,.06);
    background: #fff;
    padding: 1.25rem 1.5rem;
    /* iOS safe-area bottom (Home-Indicator-Strich) */
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    text-align: center;
    color: #8e8e93;
    font-size: 12.5px;
    margin-top: 3rem;
}

/* ── Bottom-Tab-Bar (iOS-Style) ─────────────────────────────────────── */
body.has-bottom-nav {
    /* Inhalt nicht von Bar überdeckt */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-top: 1px solid rgba(0,0,0,.06);
    display: flex; justify-content: space-around;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 30;
}
.bottom-nav__item {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px 14px;
    color: #8e8e93; text-decoration: none;
    font: 500 10.5px var(--sl-font-sans);
    letter-spacing: 0.01em;
    border-radius: 12px;
    transition: color .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
    min-width: 64px;
}
.bottom-nav__item:hover { color: #1d1d1f; text-decoration: none; }
.bottom-nav__item.is-active { color: #1d1d1f; }
.bottom-nav__icon { display: flex; }
.bottom-nav__icon svg { width: 22px; height: 22px; display: block; }
.bottom-nav__label { letter-spacing: 0.005em; }

/* ── PWA Standalone-Mode Adjustments ────────────────────────────────── */
@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        /* Verhindert iOS-Bounce-Scrolling am App-Rand */
        overscroll-behavior-y: contain;
    }
    /* Etwas größere Tap-Targets im App-Modus */
    .app-nav__link { padding: 8px 14px; }
    /* Footer-Link "Abmelden" / "Galerie" kommt dem Home-Indicator zu nah —
       zusätzliche Bottom-Padding bei .section */
    .section { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
}

/* Flow-Utility */
.stack > * + * { margin-top: 1rem; }
.stack--sm > * + * { margin-top: .5rem; }
.stack--lg > * + * { margin-top: 1.5rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ════════════════════════════════════════════════════════════════════════
   Plain-HTML Ersatzkomponenten (Shoelace aus Public-Pages entfernt)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.crumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: #8e8e93;
    margin: 0 0 1rem;
}
.crumb a { color: #6e6e73; text-decoration: none; }
.crumb a:hover { color: #1d1d1f; text-decoration: underline; }
.crumb__sep { color: #c5c5cc; }
.crumb__current { color: #1d1d1f; font-weight: 500; }

/* ── Input ──────────────────────────────────────────────────────────────── */
.kiosk-input {
    width: 100%;
    box-sizing: border-box;
    font: 400 16px var(--sl-font-sans, -apple-system, sans-serif);
    color: #1d1d1f;
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.kiosk-input::placeholder { color: #aeaeb2; }
.kiosk-input:focus {
    outline: none;
    border-color: #1d1d1f;
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.kiosk-input--lg { padding: 14px 16px; font-size: 17px; border-radius: 14px; }

/* ── Alert ──────────────────────────────────────────────────────────────── */
.kiosk-alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid transparent;
}
.kiosk-alert--danger  { background: #1d1d1f; color: #ffffff; }
.kiosk-alert--warning { background: #f5f5f7; color: #6e6e73; border-color: #e8e8ea; }
.kiosk-alert--success { background: #e8e8ea; color: #1d1d1f; }
.kiosk-alert code { background: rgba(0,0,0,.10); }

/* ── Progress-Bar (natives <progress> gestylt) ──────────────────────────── */
.kiosk-progress {
    --kiosk-progress-track: #e8e8ea;
    --kiosk-progress-fill:  #1d1d1f;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--kiosk-progress-track);
}
.kiosk-progress::-webkit-progress-bar {
    background: var(--kiosk-progress-track);
    border-radius: 999px;
}
.kiosk-progress::-webkit-progress-value {
    background: var(--kiosk-progress-fill);
    border-radius: 999px;
    transition: width .25s ease;
}
.kiosk-progress::-moz-progress-bar {
    background: var(--kiosk-progress-fill);
    border-radius: 999px;
}

/* ── View Transitions API (sanfte Page-Übergänge, iPad Safari 18+) ──────── */
@view-transition { navigation: auto; }

/* Navbar + Bottom-Nav bleiben über den Übergang stabil stehen */
.app-nav   { view-transition-name: app-nav; }
.bottom-nav { view-transition-name: bottom-nav; }
::view-transition-group(app-nav),
::view-transition-group(bottom-nav) { animation-duration: 0s; }

/* Cross-fade als Default-Übergang, etwas schneller als Browser-Default */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   App-Feeling — Touch-Verhalten, Tap-Feedback, Offline-Downloads
   ════════════════════════════════════════════════════════════════════════ */

/* ── Native-App Touch-Verhalten ─────────────────────────────────────────── */
html, body {
    /* kein Gummiband-Scrollen am Seitenrand (iPadOS) */
    overscroll-behavior-y: none;
}
* {
    /* kein grauer Tap-Blitz beim Antippen */
    -webkit-tap-highlight-color: transparent;
}
/* Kein versehentliches Text-Markieren / iOS-Callout auf der App-Oberfläche */
body.has-bottom-nav, body.view-page, body.reader-body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* Eingabefelder bleiben normal nutzbar */
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}
/* Schnelle Taps (kein 300ms-Delay), kein Doppeltipp-Zoom auf Bedienelementen */
a, button, .kiosk-card, .card-btn, .fav-toggle,
.bottom-nav__item, .app-nav__link, .sort-segmented__btn {
    touch-action: manipulation;
}

/* ── Tap-Feedback (sofortige Reaktion wie in nativen Apps) ──────────────── */
.kiosk-card { transition: transform .22s ease, box-shadow .22s ease,
              border-color .2s ease, opacity .15s ease; }
.kiosk-card[data-issue-id]:active,
.kiosk-card[data-card-href]:active {
    transform: scale(.975);
    transition-duration: .07s;
}
.kiosk-card.is-downloading:active { transform: none; }
.bottom-nav__item:active   { transform: scale(.92); opacity: .55; }
.app-nav__link:active      { opacity: .5; }
.sort-segmented__btn:active { opacity: .5; }
.card-btn:active           { transform: scale(.95); opacity: .85; }
.fav-toggle:active         { transform: scale(.86); }

/* Touch-Geräte: keine „klebenden" Hover-Effekte ───────────────────────── */
@media (hover: none) {
    .kiosk-card:hover {
        transform: none;
        box-shadow: var(--sl-shadow-x-small);
        border-color: rgba(0,0,0,.05);
    }
    .kiosk-card:hover .kiosk-card__cover img { transform: none; }
    .card-btn--primary:hover { background: #1d1d1f; }
    .card-btn--ghost:hover   { background: #fff; border-color: rgba(0,0,0,.10); }
    .fav-toggle:hover        { background: rgba(0,0,0,.55); transform: none; }
    .fav-toggle.is-fav:hover { background: #fff; transform: none; }
}

/* ── Issue-Card: „Ansehen" + Download/Löschen-Icon ─────────────────────── */
.card-btn {
    -webkit-appearance: none;
    appearance: none;
}
.card-btn--icon {
    padding: 8px 12px;
}
.card-btn--icon svg { width: 15px; height: 15px; }
.card-btn--danger {
    background: #1d1d1f; color: #fff; border-color: #1d1d1f;
}
.card-btn--danger:hover  { background: #000; color: #fff; }
.card-btn--danger:active { background: #000; }
.card-btn[disabled] { opacity: .6; cursor: default; }
.card-btn[disabled]:active { transform: none; opacity: .6; }

/* Spinner im Download-Button während des Ladens */
.card-btn__spin {
    width: 14px; height: 14px;
    border: 2px solid rgba(0,0,0,.18);
    border-top-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: kiosk-spin .8s linear infinite;
}
/* Busy-Zustand: drehender Ring + statisches Stopp-Quadrat (= antippen zum Abbrechen) */
.card-btn__busy {
    position: relative;
    display: inline-block;
    width: 14px; height: 14px;
}
.card-btn__busy .card-btn__spin { display: block; }
.card-btn__busy::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: currentColor;
    border-radius: 1px;
}

/* Download/Löschen nur in der installierten App (PWA) anbieten */
html:not(.is-standalone) [data-issue-dl] { display: none; }
html:not(.is-standalone) .kiosk-card__actions { grid-template-columns: 1fr; }
/* Downloads-Tab in der Bottom-Nav nur in der installierten PWA zeigen */
html:not(.is-standalone) .bottom-nav__item--downloads { display: none; }

/* Fortschrittsbalken über dem Cover beim Download */
.kiosk-card__progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: 4px;
    -webkit-appearance: none; appearance: none;
    border: 0; display: block;
    background: rgba(0,0,0,.14);
    z-index: 4;
}
.kiosk-card__progress::-webkit-progress-bar   { background: rgba(0,0,0,.14); }
.kiosk-card__progress::-webkit-progress-value { background: #1d1d1f; transition: width .2s ease; }
.kiosk-card__progress::-moz-progress-bar      { background: #1d1d1f; }
.kiosk-card.is-downloading .kiosk-card__cover::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,.4);
    z-index: 3;
}

/* ════════════════════════════════════════════════════════════════════════
   PDF-Reader (eigener Viewer auf PDF.js-Basis)
   ════════════════════════════════════════════════════════════════════════ */
.reader-body {
    margin: 0;
    background: #1c1c1e;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    color: #f5f5f7;
}
.reader-bar[hidden],
.reader-doc[hidden],
.reader-loader[hidden] { display: none !important; }

/* ── Lade-/Fehler-Overlay ──────────────────────────────────────────────── */
.reader-loader {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 32%, #2c2c2e 0%, #161618 70%);
    padding: calc(2rem + env(safe-area-inset-top)) 1.5rem
             calc(2rem + env(safe-area-inset-bottom));
}
.reader-loader__box {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; max-width: 420px; width: 100%;
}
.reader-loader__spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(255,255,255,.14);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kiosk-spin .9s linear infinite;
    margin-bottom: 1.5rem;
}
.reader-loader__mag {
    font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
    color: #aeaeb2; font-weight: 600; margin: 0 0 .25rem;
}
.reader-loader__title {
    font-size: 20px; font-weight: 600; letter-spacing: -.018em;
    line-height: 1.3; margin: 0 0 .75rem; color: #f5f5f7;
}
.reader-loader__status {
    font-size: 14px; color: #aeaeb2; margin: 0 0 1.25rem; min-height: 1.3em;
}
.reader-loader .kiosk-progress {
    width: 260px; max-width: 78vw;
    --kiosk-progress-track: rgba(255,255,255,.14);
    --kiosk-progress-fill: #ffffff;
}
.reader-loader__btn {
    margin-top: 1rem;
    -webkit-appearance: none; appearance: none;
    border: 0; cursor: pointer;
    background: #f5f5f7; color: #1d1d1f;
    font: 600 14px var(--sl-font-sans, -apple-system, sans-serif);
    padding: 11px 22px; border-radius: 9999px;
}
.reader-loader__btn:active { transform: scale(.96); }

/* ── Bedienleiste ──────────────────────────────────────────────────────── */
.reader-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; gap: 6px;
    height: calc(50px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(6px, env(safe-area-inset-right)) 0
             max(6px, env(safe-area-inset-left));
    background: rgba(28,28,30,.82);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.reader-bar__btn {
    flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    -webkit-appearance: none; appearance: none;
    border: 0; background: transparent; color: #f5f5f7;
    border-radius: 9999px; cursor: pointer;
}
.reader-bar__btn:active { background: rgba(255,255,255,.16); transform: scale(.92); }
.reader-bar__title {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    line-height: 1.25;
}
.reader-bar__name {
    max-width: 100%;
    font-size: 13px; font-weight: 600; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-bar__page {
    font-size: 11px; font-weight: 500; color: #9b9b9f;
    font-variant-numeric: tabular-nums;
}

/* ── Dokument-Bereich ──────────────────────────────────────────────────── */
.reader-doc {
    position: fixed; left: 0; right: 0;
    top: calc(50px + env(safe-area-inset-top));
    bottom: var(--rd-thumbs-h, 0px);
    background: #1c1c1e;
    overscroll-behavior: contain;
    transition: top .58s cubic-bezier(.32, .72, 0, 1),
                bottom .58s cubic-bezier(.32, .72, 0, 1);
    will-change: top, bottom;
    /* Bewusst KEIN `-webkit-overflow-scrolling: touch` — auf manchen
       iOS-Versionen koalesziert das die scroll-Events während des Wischens,
       sodass die Seitenanzeige nicht mitläuft. Modernes iOS hat
       Momentum-Scroll ohnehin als Default. */
}

/* Seitenslots vom Reflow-Cascade isolieren — verhindert dass das Resize
   während des Chrome-Hides ALLE ~100 Seiten neu layoutet (das ruckelt). */
.reader-page { contain: layout; }

/* Blätter-Modus: horizontale Snap-Spuren */
.reader--flip .reader-doc {
    display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
}
.reader--flip .reader-page {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    display: flex; align-items: center; justify-content: center;
}
@media (orientation: landscape) {
    .reader--flip .reader-page { flex-basis: 50%; }
}

/* Scroll-Modus: Seiten untereinander */
.reader--scroll .reader-doc {
    display: block;
    overflow-x: hidden; overflow-y: auto;
    text-align: center;
    padding: 12px 0 calc(20px + env(safe-area-inset-bottom));
}
.reader--scroll .reader-page {
    display: block; width: 100%;
    margin: 0 auto 12px;
}
.reader--scroll .reader-page:last-child { margin-bottom: 0; }

/* Seite + Canvas */
.reader-page { position: relative; }
.reader-page:empty::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border: 2.5px solid rgba(255,255,255,.14);
    border-top-color: rgba(255,255,255,.7);
    border-radius: 50%;
    animation: kiosk-spin .9s linear infinite;
}
.reader-canvas {
    display: block;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,.55);
}
.reader--scroll .reader-canvas {
    width: 100%; height: auto; margin: 0 auto;
    box-shadow: 0 4px 18px rgba(0,0,0,.5);
}

/* ── Thumbnail-Sprung-Leiste (für lange Magazine) ─────────────────────── */
.reader-thumbs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    display: flex; flex-direction: row;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(28,28,30,.86);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-top: 1px solid rgba(255,255,255,.09);
    scroll-snap-type: x proximity;
    overscroll-behavior: contain;
}
.reader-thumb {
    flex: 0 0 auto;
    width: 60px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    cursor: pointer;
    scroll-snap-align: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.reader-thumb__box {
    position: relative;
    width: 60px; height: 84px;
    background: #2c2c2e;
    border: 1.5px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .12s ease, transform .08s ease, background .12s ease;
}
.reader-thumb:active .reader-thumb__box { transform: scale(.92); }
.reader-thumb.is-active .reader-thumb__box {
    border-color: #ffffff;
    background: #3a3a3c;
}
.reader-thumb__num {
    font-size: 10px;
    font-weight: 500;
    color: #9b9b9f;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.reader-thumb.is-active .reader-thumb__num {
    color: #f5f5f7;
    font-weight: 600;
}
.reader-thumb__canvas {
    display: block;
    width: 100%; height: 100%;
    background: #fff;
}
/* Spinner solange ein Thumb noch nicht gerendert wurde */
.reader-thumb__box:empty::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: rgba(255,255,255,.7);
    border-radius: 50%;
    animation: kiosk-spin .9s linear infinite;
}

/* ── Immersive Mode: Chrome verschwindet beim Lesen ─────────────────────── */
.reader-bar,
.reader-thumbs {
    transition: transform .58s cubic-bezier(.32, .72, 0, 1),
                opacity   .42s cubic-bezier(.32, .72, 0, 1);
    will-change: transform, opacity;
}
body.reader--chrome-hidden .reader-bar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
body.reader--chrome-hidden .reader-thumbs {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
/* Doc füllt im Immersive Mode die gesamte Höhe — höhere Spezifität als
   die Standard-Regeln auf .reader-doc */
body.reader--chrome-hidden .reader-doc {
    top: 0;
    bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   Lese-Status (Reading / Read) — Marker auf der Issue-Card + Long-Press-Menü
   ════════════════════════════════════════════════════════════════════════ */

/* Badge oben links auf dem Cover (gegenüber dem Favoriten-Stern) */
.kiosk-card__read-badge {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 5;
    border-radius: 50%;
    background: #1d1d1f;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.kiosk-card__read-badge[data-state="reading"] {
    width: 12px; height: 12px;
    border: 2px solid #fff;
}
.kiosk-card__read-badge[data-state="read"] {
    width: 26px; height: 26px;
}

/* Gelesene Ausgaben: Cover gedämpft, damit sie auf einen Blick erkennbar sind */
.kiosk-card.is-read .kiosk-card__cover img,
.kiosk-card.is-read .kiosk-card__cover .kiosk-card__cover--empty {
    opacity: 0.45;
    transition: opacity .25s ease;
}

/* ── Long-Press Bottom-Sheet zum manuellen Setzen des Lese-Status ─────── */
.rs-menu-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,.42);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    -webkit-user-select: none; user-select: none;
}
.rs-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }
.rs-menu {
    width: 100%; max-width: 460px;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    transform: translateY(24px);
    opacity: 0;
    transition: transform .36s cubic-bezier(.32, .72, 0, 1), opacity .25s ease;
    box-shadow: 0 -8px 32px rgba(0,0,0,.25);
}
.rs-menu-backdrop.is-open .rs-menu {
    transform: translateY(0);
    opacity: 1;
}
.rs-menu__title {
    padding: 14px 18px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #6e6e73;
    letter-spacing: -.005em;
    border-bottom: 1px solid #e8e8ea;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rs-menu__btn {
    display: block;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    background: transparent;
    font: 500 16px var(--sl-font-sans, -apple-system, sans-serif);
    color: #1d1d1f;
    text-align: left;
    border-bottom: 1px solid #e8e8ea;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    touch-action: manipulation;
}
.rs-menu__btn:last-child { border-bottom: 0; }
.rs-menu__btn:active { background: #f5f5f7; }
.rs-menu__btn.is-current {
    font-weight: 600;
    background: #f5f5f7;
}
.rs-menu__btn--cancel {
    color: #6e6e73;
    font-weight: 500;
}