/* ==========================================================
   Kapitelkreis – Leseecke am Abend
   Hafer & Latte als Grund, Kakao für Text und Buttons,
   Honig wie Lampenlicht für alles, was mit Fortschritt zu tun hat.
   ========================================================== */

:root {
    --oat: #f1e4d3;          /* Grund */
    --latte: #e7d3bb;        /* zweite Fläche, Regalhintergrund */
    --cream: #fbf4ea;        /* Karten, Eingabefelder */
    --cocoa: #4a3127;        /* Text */
    --cocoa-2: #806357;      /* Nebentext */
    --bean: #6b4433;         /* Buttons */
    --bean-deep: #553425;
    --honey: #e8a33d;        /* Lampenlicht: Fortschritt, Timer */
    --honey-soft: #f6dfb4;
    --sage: #74855a;
    --rose: #e9c3b6;
    --line: #e1cdb5;
    --wood: #a97a52;
    --wood-dark: #835a3a;
    --danger: #a8443a;
    --glow: rgba(255, 196, 110, .45);
    --shadow: 0 2px 4px rgba(90, 55, 35, .06), 0 10px 26px -10px rgba(90, 55, 35, .28);

    --display: "Caprasimo", "Cooper Black", Georgia, serif;
    --sans: "Nunito", "Segoe UI", system-ui, sans-serif;

    --r: 22px;
    --r-sm: 12px;
    color-scheme: light;
}

/* Abends: dunkles Kakaobraun mit warmem Licht */
@media (prefers-color-scheme: dark) {
    :root {
        --oat: #241a15;
        --latte: #30231c;
        --cream: #33261f;
        --cocoa: #f4e5d3;
        --cocoa-2: #c2a796;
        --bean: #f0b860;
        --bean-deep: #c98d3a;
        --honey: #f0b45a;
        --honey-soft: #4a3520;
        --sage: #a6b78a;
        --rose: #5a3d36;
        --line: #47362c;
        --wood: #6e4c33;
        --wood-dark: #4b3322;
        --danger: #f08a7c;
        --glow: rgba(240, 170, 80, .16);
        --shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 12px 28px -12px rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    color: var(--cocoa);
    font: 17px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    background-color: var(--oat);
}

/* Lampenlicht oben links */
body {
    background-image: radial-gradient(ellipse 900px 600px at 8% -10%, var(--glow), transparent 70%);
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
h2 { font-size: 1.4rem; }
a { color: var(--bean); }
p { margin: 0 0 .8em; }
b, strong { font-weight: 800; }
code { background: var(--latte); padding: .1em .4em; border-radius: 6px; font-size: .88em; }
input, textarea, select, button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.muted { color: var(--cocoa-2); }
.hint { color: var(--cocoa-2); font-size: .86rem; margin-top: .6em; }
.center { text-align: center; }
.count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; margin-left: .35rem;
         border-radius: 99px; background: var(--honey-soft); color: var(--cocoa); font: 800 .8rem var(--sans); vertical-align: middle; }
.ok { color: var(--sage); margin-left: .6em; font-weight: 700; }

/* ---------- Marke ---------- */
.brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-size: 1.45rem;
         color: var(--cocoa); text-decoration: none; }
.brand::before { content: ""; width: .85rem; height: 1.2rem; border-radius: 3px 3px 0 0;
                 background: linear-gradient(var(--honey) 0 26%, var(--bean) 26%);
                 clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }

/* ---------- Grundgerüst ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
          gap: 1rem; padding: .8rem max(16px, calc((100vw - 1040px) / 2));
          background: color-mix(in srgb, var(--oat) 85%, transparent); backdrop-filter: blur(12px); }
.topnav { display: flex; gap: .35rem; padding: .3rem; border-radius: 99px; background: var(--latte); }
.topnav a { color: var(--cocoa-2); text-decoration: none; padding: .4rem 1rem; border-radius: 99px; font-weight: 700; }
.topnav a:hover { color: var(--cocoa); }
.nav-badge { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; margin-left: .35rem;
             border-radius: 99px; background: var(--honey); color: #3a2414; font-size: .72rem; font-weight: 800; vertical-align: 1px; }
.tabbar a { position: relative; }
.tabbar .nav-badge { position: absolute; top: 2px; left: 56%; margin: 0; }
.admin-tasks { margin: .2rem 0 1rem; padding-left: 1.2rem; }
.admin-tasks li { margin: .2rem 0; }
.topnav a.active { background: var(--cream); color: var(--cocoa); box-shadow: 0 2px 6px rgba(90, 55, 35, .14); }
.content { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 1.4rem 16px 6.5rem; }

.tabbar { display: none; }
@media (max-width: 720px) {
    .topnav { display: none; }
    .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 10;
              left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
              background: var(--cream); border-radius: 26px; box-shadow: var(--shadow); padding: .3rem; }
    .tabbar a { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem 0 .4rem; border-radius: 20px;
                color: var(--cocoa-2); text-decoration: none; font-size: .72rem; font-weight: 800; }
    .tabbar a.active { color: var(--cocoa); background: var(--honey-soft); }
    .tab-icon { width: 22px; height: 22px; fill: currentColor; }
}

.page-intro { margin: .8rem 0 1.8rem; }
.page-intro h1 { margin-bottom: .25rem; }
.lede { font-size: 1.12rem; color: var(--cocoa-2); }
.lede b { color: var(--cocoa); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .8rem 0 1.4rem; }
.page-head h1 { margin: 0; }
section { margin-bottom: 2.6rem; }

/* ---------- Flächen ---------- */
.panel { background: var(--cream); border-radius: var(--r); padding: 1.5rem; box-shadow: var(--shadow); }
.panel-intro { background: linear-gradient(135deg, var(--honey-soft), var(--cream) 60%); }
.banner { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1.1rem; border-radius: var(--r-sm); margin: .6rem 0; }
.banner-error { background: color-mix(in srgb, var(--danger) 13%, var(--cream)); color: var(--danger); font-weight: 600; }
.banner-info { background: color-mix(in srgb, var(--sage) 16%, var(--cream)); }
.banner-close { background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: inherit; }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--cocoa-2); }
.empty-shelf { display: inline-flex; align-items: flex-end; gap: 4px; padding: 0 1rem; margin-bottom: 1rem;
               border-bottom: 8px solid var(--wood); border-radius: 0 0 4px 4px; }
.empty-shelf span { width: 22px; border-radius: 8px 8px 0 0; background: var(--line); }
.empty-shelf span:nth-child(1) { height: 60px; }
.empty-shelf span:nth-child(2) { height: 76px; width: 30px; }
.empty-shelf span:nth-child(3) { height: 52px; transform: rotate(12deg); transform-origin: bottom left; margin-left: 4px; }

.loading { display: flex; align-items: center; gap: .6rem; color: var(--cocoa-2); padding: 1.5rem 0; }
.spinner { width: 1.1rem; height: 1.1rem; border: 3px solid var(--line); border-top-color: var(--honey); border-radius: 50%;
           animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: .5rem; }

/* ---------- Buttons, Formulare ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.35rem; border-radius: 99px;
       border: 2px solid transparent; font-weight: 800; cursor: pointer; text-decoration: none;
       transition: transform .12s ease, background .15s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--bean); color: var(--cream); box-shadow: 0 4px 0 var(--bean-deep); }
.btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--bean-deep); }
@media (prefers-color-scheme: dark) { .btn-primary { color: #2a1c15; } }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--cocoa); }
.btn-ghost:hover:not(:disabled) { border-color: var(--bean); }
.btn-honey { background: var(--honey); color: #3a2414; box-shadow: 0 4px 0 #c07f22; }
.btn-honey:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #c07f22; }
.btn-soft { background: var(--cream); color: var(--cocoa); }
.btn-quiet { background: none; border: 0; color: var(--cocoa-2); cursor: pointer; padding: .3rem .4rem; font-size: .9rem; font-weight: 700;
             text-decoration: underline wavy color-mix(in srgb, var(--cocoa-2) 45%, transparent); text-underline-offset: 4px; }
.btn.btn-quiet { padding: .7rem .6rem; box-shadow: none; }
.btn-block { width: 100%; }

.form { display: grid; gap: 1rem; }
.form-grid { grid-template-columns: 1fr 1fr; }
.span-2 { grid-column: span 2; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } }
label { display: grid; gap: .3rem; font-weight: 800; font-size: .92rem; }
input:not([type=checkbox]), textarea, select {
    width: 100%; padding: .7rem .95rem; border: 2px solid var(--line); border-radius: 16px; background: var(--cream); font-weight: 600;
}
input::placeholder, textarea::placeholder { color: var(--cocoa-2); opacity: .75; font-weight: 600; }
input:focus, textarea:focus { border-color: var(--honey); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--honey) 25%, transparent); }
textarea { resize: vertical; }
.checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.checkbox input { width: 1.15rem; height: 1.15rem; accent-color: var(--bean); }
.inline-input { display: inline-block; width: 5rem !important; padding: .25rem .4rem !important; text-align: center; font-weight: 800 !important; }
.inline-label { display: block; font-weight: 600; margin-top: 1.2rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row-between { justify-content: space-between; }

.search { display: flex; gap: .6rem; margin-bottom: 1.8rem; }
.search input { flex: 1; border-radius: 99px; padding-left: 1.2rem; }

/* ---------- Login: gemütliche Leseecke ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 500px); }
.auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem;
             background: radial-gradient(ellipse 70% 60% at 70% 30%, rgba(255, 200, 120, .55), transparent 70%), var(--latte); }
.auth-claim { font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.15; max-width: 16ch; margin: 2rem 0; }
.auth-shelf { display: flex; align-items: flex-end; gap: 4px; padding: 0 .8rem; border-bottom: 14px solid var(--wood);
              border-radius: 0 0 6px 6px; box-shadow: 0 8px 0 -2px var(--wood-dark); }
.auth-shelf span { border-radius: 10px 10px 0 0; background: var(--cloth);
                   box-shadow: inset 4px 0 0 rgba(255, 255, 255, .14), inset -4px 0 0 rgba(0, 0, 0, .14);
                   background-image: linear-gradient(transparent 16%, rgba(255, 240, 210, .45) 16% 19%, transparent 19% 80%, rgba(255, 240, 210, .45) 80% 83%, transparent 83%); }
.auth-shelf span:nth-child(8) { transform: rotate(9deg); transform-origin: bottom left; margin-left: 10px; }
.auth-mug { width: 90px; height: 90px; margin-left: auto; align-self: flex-end; }
.auth-mug .mug { fill: var(--cream); stroke: var(--cocoa); stroke-width: 3; }
.auth-mug .mug-handle { fill: none; stroke: var(--cocoa); stroke-width: 3; stroke-linecap: round; }
.auth-mug .steam path { fill: none; stroke: var(--cocoa-2); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.auth-card { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem clamp(16px, 5vw, 3.5rem); background: var(--cream); }
.auth-card h1 { font-size: 2rem; margin-bottom: .3rem; }
.tagline { color: var(--cocoa-2); }
.steps { padding-left: 1.2rem; }
.steps li { margin-bottom: .4rem; }
@media (max-width: 760px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-side { padding: 1.4rem 16px 2.6rem; }
    .auth-claim { font-size: 1.55rem; margin: 1rem 0 1.4rem; }
    .auth-shelf { zoom: .62; }
    .auth-card { border-radius: 28px 28px 0 0; margin-top: -20px; position: relative; }
}

/* Einrichtungsseite ohne Seitenbild: Karte mittig */
.auth-page:not(:has(.auth-side)) { grid-template-columns: 1fr; place-items: center; padding: 16px; }
.auth-page:not(:has(.auth-side)) .auth-card { max-width: 560px; border-radius: var(--r); box-shadow: var(--shadow); }

.segmented { display: grid; grid-template-columns: 1fr 1fr; background: var(--latte); border-radius: 99px; padding: 5px; margin: 1.2rem 0 1.4rem; }
.segmented button { border: 0; background: none; padding: .55rem; border-radius: 99px; cursor: pointer; font-weight: 800; color: var(--cocoa-2); }
.segmented button.active { background: var(--cream); color: var(--cocoa); box-shadow: 0 2px 6px rgba(90, 55, 35, .15); }

/* ---------- Stoffeinbände ---------- */
.cover { --cloth: #7a5240; position: relative; flex: none; overflow: hidden; display: flex; flex-direction: column; align-items: center;
         text-align: center; gap: .5em; padding: 1.2em .8em; color: #fff6e8; border-radius: 6px 16px 16px 6px;
         background-color: var(--cloth);
         background-image:
             linear-gradient(90deg, rgba(0, 0, 0, .22) 0 6%, rgba(255, 255, 255, .12) 6% 8%, transparent 8%),
             radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .16), transparent 55%);
         box-shadow: 0 2px 3px rgba(60, 35, 20, .15), 0 12px 22px -10px rgba(60, 35, 20, .5); }
.cover::after { content: ""; position: absolute; inset: 9% 10% 9% 16%; border: 1.5px dashed rgba(255, 246, 232, .35); border-radius: 10px; pointer-events: none; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
             opacity: 0; transition: opacity .35s ease; }
.cover img.loaded { opacity: 1; }
.cover:has(img.loaded)::after { display: none; }
.cover-title { font-family: var(--display); line-height: 1.15; overflow: hidden; display: -webkit-box;
               -webkit-line-clamp: 4; -webkit-box-orient: vertical; margin-top: 18%; text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
               hyphens: auto; overflow-wrap: anywhere; max-width: 100%; }
.cover-rule { width: 1.2em; height: 1.2em; flex: none; background: currentColor; opacity: .7;
              clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: scale(.55); }
.cover-author { font-size: .7em; font-weight: 700; opacity: .9; }
.cover-ribbon { position: absolute; top: 0; right: 9%; width: 8%; min-width: 7px; height: 30%; background: var(--honey); z-index: 2;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.cover:has(.cover-ribbon) .cover-title { padding: 0 16%; }
.cover-sm { width: 52px; height: 76px; font-size: .45rem; }
.cover-md { width: 100%; aspect-ratio: 2 / 3; font-size: .95rem; }
.cover-lg { width: 190px; aspect-ratio: 2 / 3; font-size: 1.2rem; }

/* ---------- Regal ---------- */
.shelf { margin-bottom: 2.8rem; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.shelf-head h2 { margin: 0; }
.shelf-sum { color: var(--cocoa-2); font-size: .95rem; font-weight: 600; }
.shelf-row { display: flex; align-items: flex-end; gap: 18px; padding: 1.6rem 22px 0; overflow-x: auto; scrollbar-width: thin; min-height: 200px;
             background: linear-gradient(var(--latte), color-mix(in srgb, var(--latte) 70%, var(--wood))); border-radius: var(--r) var(--r) 0 0;
             box-shadow: inset 0 10px 20px -12px rgba(60, 35, 20, .35); }
.shelf-board { height: 16px; border-radius: 0 0 8px 8px; background: linear-gradient(var(--wood), var(--wood-dark));
               box-shadow: 0 12px 20px -10px rgba(60, 35, 20, .45); }

/* Bücher stehen mit dem Cover nach vorne im Regal */
.cover-shelf { width: 112px; aspect-ratio: 2 / 3; font-size: .72rem; }
.shelf-book { flex: none; position: relative; display: block; text-decoration: none; transition: transform .2s ease; }
.shelf-book .cover { box-shadow: 0 1px 2px rgba(40, 22, 12, .25), 4px 0 10px -4px rgba(40, 22, 12, .45), 0 10px 14px -10px rgba(40, 22, 12, .6); }
.shelf-book:hover, .shelf-book:focus-visible { transform: translateY(-8px) rotate(-1.5deg); }
.shelf-note { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: .1rem .5rem; border-radius: 99px;
              background: var(--honey); color: #3a2414; font-size: .66rem; font-weight: 800; white-space: nowrap; z-index: 2; }
.admin-edit { margin: 1.2rem 0 .4rem; padding: .7rem 1rem; border-radius: 16px; background: var(--cream); }
.admin-edit summary { cursor: pointer; font-weight: 800; color: var(--cocoa-2); }
.admin-edit .row { margin-top: .7rem; flex-wrap: wrap; align-items: center; }
.admin-edit select { padding: .45rem .7rem; border-radius: 12px; border: 2px solid var(--line); background: var(--oat); color: var(--cocoa); font: inherit; }
.shelf-kind { background: var(--cocoa); color: var(--oat, #f1e4d3); }
.shelf-stars { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: .1rem .5rem; border-radius: 99px;
               background: rgba(36, 22, 15, .78); color: #ffd98a; font-size: .72rem; letter-spacing: 1px; white-space: nowrap; z-index: 2; }
@media (max-width: 600px) {
    .cover-shelf { width: 88px; font-size: .6rem; }
    .shelf-row { gap: 12px; padding: 1.2rem 14px 0; min-height: 160px; }
}

.spine { --cloth: #7a5240; flex: none; position: relative; display: flex; flex-direction: column; align-items: center;
         justify-content: space-between; padding: 16px 0 12px; border-radius: 10px 10px 2px 2px; text-decoration: none; color: #fff6e8;
         background-color: var(--cloth);
         background-image:
             linear-gradient(transparent 8%, rgba(255, 240, 210, .4) 8% calc(8% + 3px), transparent calc(8% + 3px) calc(90% - 3px), rgba(255, 240, 210, .4) calc(90% - 3px) 90%, transparent 90%),
             linear-gradient(90deg, rgba(255, 255, 255, .16), transparent 35%, transparent 70%, rgba(0, 0, 0, .18));
         transition: transform .2s ease; transform-origin: bottom left; }
.spine:hover, .spine:focus-visible { transform: rotate(-4deg) translateY(-4px); }
.spine-title { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-size: .85rem;
               line-height: 1.1; max-height: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spine-stars { writing-mode: vertical-rl; font-size: .6rem; color: #ffd98a; letter-spacing: 1px; }

/* ---------- Lese ich gerade ---------- */
.now-reading { display: grid; gap: 1rem; }
.now-reading h2 { margin-bottom: .2rem; }
.now-card { display: grid; grid-template-columns: 100px 1fr; gap: 1.3rem; align-items: center; padding: 1.1rem 1.4rem 1.1rem 1.1rem;
            background: var(--cream); border-radius: var(--r); color: inherit; text-decoration: none; box-shadow: var(--shadow);
            transition: transform .15s ease; }
.now-card:hover { transform: translateY(-2px); }
.now-card .cover { font-size: .64rem; }
.now-card .cover:has(.cover-ribbon) .cover-title { padding: 0 10%; }
.now-title { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.now-author { color: var(--cocoa-2); font-weight: 600; margin-bottom: .8rem; }
.now-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; font-size: .92rem; color: var(--cocoa-2); font-weight: 600; }
.now-left { color: var(--cocoa); font-weight: 800; }

.progress { height: 12px; border-radius: 99px; background: var(--latte); overflow: hidden; box-shadow: inset 0 1px 2px rgba(60, 35, 20, .12); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f2c26b, var(--honey)); transition: width .4s; }

/* ---------- Büchersuche ---------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2rem 1.4rem; }
.book-tile { color: inherit; text-decoration: none; display: grid; gap: .15rem; align-content: start; min-width: 0; }
.book-title, .now-title, .topic-title, .review-title { overflow-wrap: anywhere; hyphens: auto; }
.book-tile .cover { margin-bottom: .7rem; transition: transform .2s ease; }
.book-tile:hover .cover { transform: rotate(-2deg) translateY(-4px); }
.book-title { font-family: var(--display); font-size: 1.05rem; line-height: 1.25; }
.book-author { color: var(--cocoa-2); font-size: .92rem; font-weight: 600; }
.book-meta { display: flex; flex-wrap: wrap; column-gap: .8rem; color: var(--cocoa-2); font-size: .84rem; margin-top: .2rem; }

.search-hint { margin: -1.1rem 0 1.8rem .4rem; }
.btn-small { padding: .45rem .9rem; font-size: .88rem; margin-top: .55rem; justify-self: start; max-width: 100%; white-space: normal; }
.btn-honey.btn-small { box-shadow: 0 3px 0 #c07f22; }
.candidate .cover { opacity: .95; }

/* ---------- Buchseite ---------- */
.book-hero { display: flex; gap: 2.4rem; align-items: flex-start; margin-top: .8rem; }
.book-hero-body { flex: 1; min-width: 0; padding-top: .3rem; }
.book-hero h1 { margin-bottom: .2rem; }
.book-author-large { font-size: 1.2rem; font-weight: 700; color: var(--cocoa-2); margin-bottom: 1.1rem; }
.facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.3rem; }
.facts > div { background: var(--cream); border-radius: 16px; padding: .5rem .95rem; box-shadow: 0 2px 6px rgba(90, 55, 35, .08); }
.facts dt { font-size: .78rem; font-weight: 700; color: var(--cocoa-2); }
.facts dd { margin: 0; font-weight: 800; font-size: 1.05rem; }
.description { margin-top: 1.2rem; white-space: pre-line; max-width: 62ch; }
@media (max-width: 600px) {
    .book-hero { flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
    .facts, .status-picker { justify-content: center; }
    .cover-lg { width: 160px; }
}

.status-picker { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { border: 2px solid var(--line); background: transparent; padding: .38rem 1rem; border-radius: 99px; cursor: pointer;
        font-size: .92rem; font-weight: 800; color: var(--cocoa-2); }
.chip:hover:not(:disabled) { border-color: var(--honey); color: var(--cocoa); }
.chip-active { background: var(--honey); border-color: var(--honey); color: #3a2414; }
.chip-active:hover:not(:disabled) { color: #3a2414; }
.chip-quiet { border-color: transparent; text-decoration: underline wavy color-mix(in srgb, var(--cocoa-2) 45%, transparent); text-underline-offset: 4px; }

.rating { margin-top: .8rem; }
.star { background: none; border: 0; font-size: 1.7rem; cursor: pointer; color: var(--line); padding: 0 .05rem; transition: transform .12s; }
.star.on, .star:hover { color: var(--honey); }
.star:hover { transform: scale(1.15) rotate(-6deg); }

.two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.3rem; margin: 2.6rem 0; align-items: stretch; }
.two-col > section { margin: 0; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

.remaining { display: grid; margin-bottom: 1rem; }
.remaining-value { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.1; }
.remaining-label { color: var(--cocoa-2); font-weight: 600; }
.panel .progress { margin-bottom: .5rem; }
.finish { margin-top: .5rem; }
.manual-page { margin-top: .8rem; }
summary { cursor: pointer; color: var(--cocoa-2); font-size: .92rem; font-weight: 700; }
details[open] summary { margin-bottom: .6rem; }

.speed-sentence { font-size: 1.12rem; line-height: 2.3; }
.speed-setup .btn { margin-top: .3rem; }

/* ---------- Tee-Timer ---------- */
.timer-panel { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.5rem; border-radius: var(--r);
               background: radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255, 200, 120, .45), transparent 70%), var(--latte);
               box-shadow: var(--shadow); }
.timer-panel h2 { align-self: flex-start; margin: 0; }
.teacup { display: grid; justify-items: center; }
.teacup svg { width: min(210px, 62vw); height: auto; overflow: visible; }
.teacup .cup { fill: var(--cream); stroke: var(--cocoa); stroke-width: 4; stroke-linejoin: round; }
.teacup .cup-handle { fill: none; stroke: var(--cocoa); stroke-width: 4; stroke-linecap: round; }
.teacup .cup-rim { stroke: var(--cocoa); stroke-width: 4; stroke-linecap: round; }
.teacup .saucer { fill: var(--rose); }
.teacup .tea { fill: #b9773a; transition: y 1s linear; }
@media (prefers-color-scheme: dark) { .teacup .tea { fill: #d08b45; } }
.teacup .steam path { fill: none; stroke: var(--cocoa-2); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.teacup.steaming .steam path { animation: steam 3s ease-in-out infinite; }
.teacup.steaming .steam path:nth-child(2) { animation-delay: .9s; }
.teacup.steaming .steam path:nth-child(3) { animation-delay: 1.8s; }
@keyframes steam {
    0% { opacity: 0; transform: translateY(8px); }
    40% { opacity: .55; }
    100% { opacity: 0; transform: translateY(-10px); }
}
.timer-clock { font-family: var(--display); font-size: 2.3rem; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: .4rem; }
.timer-goal { font-size: .88rem; font-weight: 700; color: var(--cocoa-2); }
.timer-note { color: var(--cocoa-2); font-weight: 600; margin: 0; }
.timer-panel label { width: 100%; }
.timer-panel .row { justify-content: center; }
.timer-saved { width: 100%; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--cream); font-size: .93rem; font-weight: 600; }

/* ---------- Diskussion ---------- */
.discussion { max-width: 760px; }
.posts, .replies { list-style: none; margin: 0; padding: 0; }
.posts > li { padding: 1.1rem 1.2rem; margin-bottom: .8rem; background: var(--cream); border-radius: var(--r); box-shadow: var(--shadow); }
.replies { margin: .8rem 0 0 .6rem; padding-left: 1rem; border-left: 3px dotted var(--line); }
.replies > li { padding-top: .7rem; }
.post-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .94rem; }
.post-head time { font-size: .8rem; }
.post-body { margin: .45rem 0 .2rem; white-space: pre-line; }
.post-actions { display: flex; gap: .4rem; }
.post-actions .btn-quiet { font-size: .84rem; padding-left: 0; }
.avatar { --cloth: #b5726d; width: 2rem; height: 2rem; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
          overflow: hidden; background: var(--cloth); color: #fff6e8; font-family: var(--display); font-size: .95rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-md { width: 3rem; height: 3rem; font-size: 1.3rem; }
.avatar-lg { width: 8.5rem; height: 8.5rem; font-size: 3.4rem;
             box-shadow: 0 0 0 5px var(--cream), 0 0 0 7px var(--honey), 0 14px 30px -12px rgba(40, 22, 12, .55); }
.post-author { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.post-author:hover b { text-decoration: underline wavy var(--honey); text-underline-offset: 4px; }

/* ---------- Sprache der Ausgabe ---------- */
.search-filter { display: inline-flex; align-items: center; gap: .6rem; margin: -1rem 0 1.2rem .4rem; font-size: .92rem; font-weight: 700; }
.search-filter select { padding: .4rem .7rem; border-radius: 12px; border: 2px solid var(--line); background: var(--oat); color: var(--cocoa); font: inherit; width: auto; }
.editions { margin: 1.2rem 0 .4rem; padding: .7rem 1rem; border-radius: 16px; background: var(--cream); }
.editions summary { cursor: pointer; font-weight: 800; color: var(--cocoa-2); }
.editions .row { margin-top: .6rem; flex-wrap: wrap; align-items: center; }
.editions select { padding: .45rem .7rem; border-radius: 12px; border: 2px solid var(--line); background: var(--oat); color: var(--cocoa); font: inherit; }
.edition-list { display: grid; gap: .7rem; margin-top: .9rem; }
.edition { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; }
.edition-body { display: grid; gap: .1rem; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .edition { grid-template-columns: auto 1fr; } .edition .btn { grid-column: 1 / -1; } }
.lang-tag { justify-self: start; margin-top: .2rem; }

/* ---------- Leser finden ---------- */
.reader-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.reader-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r); background: var(--cream);
               color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform .15s ease; min-width: 0; }
.reader-card:hover { transform: translateY(-2px); }
.reader-card-body { display: grid; gap: .25rem; min-width: 0; }
.reader-card-name { font-family: var(--display); font-size: 1.1rem; overflow-wrap: anywhere; }
.reader-card-handle { font-size: .86rem; font-weight: 700; }
.reader-card-genres { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .2rem; }
.reader-card-bio { margin: .3rem 0 0; font-size: .9rem; color: var(--cocoa-2); overflow-wrap: anywhere; }
a.msg-name { display: block; color: var(--cocoa-2); text-decoration: none; }
a.msg-name:hover { text-decoration: underline wavy var(--honey); text-underline-offset: 3px; }

.request-list { display: grid; gap: .8rem; }
.request { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; }
.request-actions { display: flex; flex-direction: column; gap: .4rem; }
@media (max-width: 560px) { .request { grid-template-columns: 1fr; } .request-actions { flex-direction: row; } }
.locked-panel p { margin: .3rem 0; }
.lock { font-size: .85rem; margin-left: .2rem; }
.follow-counts { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: .1rem 0 .5rem; color: var(--cocoa-2); }
.follow-counts b { color: var(--cocoa); }
.tag.tag-friend { background: var(--honey); color: #3a2414; }

/* ---------- Club: Leseziele, Einladungen ---------- */
.goals { margin-top: 1.4rem; }
.goal-form { margin: .8rem 0 1rem; }
.goal-list { display: grid; gap: .9rem; margin-top: .8rem; }
.goal { padding: .9rem 1rem; border-radius: 16px; background: var(--oat); box-shadow: inset 0 0 0 2px var(--line); }
.goal-done { box-shadow: inset 0 0 0 2px var(--honey); }
.goal-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.goal-title { font-family: var(--display); font-size: 1.15rem; }
.goal-meta { font-size: .88rem; }
.goal-readers { display: flex; gap: .2rem; margin-top: .4rem; }
.goal-readers .avatar { width: 1.6rem; height: 1.6rem; font-size: .75rem; }
.goal-actions { display: flex; gap: .4rem; align-items: center; }
.goal-actions .btn-small { margin-top: 0; }
.goal-locked { margin: .6rem 0 0; font-size: .9rem; color: var(--cocoa-2); }
.goal-chat { margin-top: .8rem; display: grid; gap: .6rem; }
.goal-msg { padding: .6rem .8rem; border-radius: 14px; background: var(--cream); }
.goal-msg p { margin: .3rem 0 0; white-space: pre-line; }
.goal-msg-time { font-size: .8rem; margin-left: .4rem; }
.pick-row.invite-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.invite-picker { display: grid; gap: .5rem; margin-top: .6rem; }
.invite-search { width: 100%; }
.invite-group-title { font-weight: 800; font-size: .92rem; margin-top: .4rem; }
.invite-group-title .muted { font-weight: 600; }
.invite-note { margin: .2rem 0; font-size: .9rem; }
/* Feste Höhe, eigener Scrollbereich – schiebt die Seite nicht endlos nach unten */
.invite-scroll { max-height: 18rem; overflow-y: auto; display: grid; gap: .1rem; padding: .3rem; border-radius: 14px;
                 background: var(--oat); box-shadow: inset 0 0 0 2px var(--line); scrollbar-width: thin; }
.invite-scroll-small { max-height: 11rem; }
.invite-person { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .35rem .5rem; border-radius: 10px; }
.invite-person:hover { background: var(--honey-soft); }
.invite-person .post-author { min-width: 0; }
.invite-person .post-author b { overflow-wrap: anywhere; }
.invite-person .btn-small { margin-top: 0; flex: none; }
.invites-title { font-size: 1rem; margin: 1rem 0 .4rem; }
.invite-card .row { margin-top: .4rem; }
.danger-zone summary { color: #b0413e; }

/* ---------- Abgleich ---------- */
.check-progress { max-width: 28rem; display: grid; gap: .4rem; margin: .6rem 0 1rem; }
.check-summary { margin: .9rem 0; }
.diff-list { margin: .4rem 0 0; padding-left: 1.1rem; }
.diff-list s { opacity: .65; }

/* ---------- Profil ---------- */
.stats { display: flex; flex-wrap: wrap; gap: .8rem; margin: .4rem 0 .8rem; }
.stat { min-width: 9rem; padding: .8rem 1.2rem; border-radius: 18px; background: var(--oat); box-shadow: inset 0 0 0 2px var(--line); }
.stat-value { font-family: var(--display); font-size: 2rem; line-height: 1.1; color: var(--cocoa); }
.stat-label { font-size: .86rem; font-weight: 700; color: var(--cocoa-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.profile-card { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem; align-items: start; }
.profile-photo { display: grid; justify-items: center; gap: .9rem; padding-top: .4rem; }
.photo-btn { position: relative; cursor: pointer; margin-top: .3rem; border: 2px solid var(--honey); background: transparent; color: var(--cocoa); }
.photo-btn:hover { background: var(--honey); color: #3a2414; }
.photo-remove { font-size: .84rem; }
.profile-form textarea { min-height: 6rem; }
.genre-picker, .genre-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.genre-list .chip { cursor: default; }
.check { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.check-hint { margin: -.6rem 0 .2rem 1.8rem; }
.privacy-choice { margin: .5rem 0 .4rem; max-width: 30rem; }
.privacy-hint { margin: 0; }
.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--honey); }
@media (max-width: 640px) {
    .profile-card { grid-template-columns: 1fr; }
}

.reader-hero { display: flex; align-items: center; gap: 2rem; margin: .6rem 0 1.8rem; }
.reader-hero h1 { margin: 0; }
.reader-hero-body { display: grid; gap: .25rem; justify-items: start; }
.reader-handle { font-weight: 700; margin: 0; }
.reader-bio p { white-space: pre-line; margin: 0; }
.reader-section { margin: 1.6rem 0; }
.favorite-book { display: inline-flex; align-items: center; gap: 1rem; padding: .7rem 1.2rem .7rem .7rem; border-radius: var(--r);
                 background: var(--cream); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
@media (max-width: 600px) {
    .reader-hero { flex-direction: column; text-align: center; gap: 1rem; }
    .reader-hero-body { justify-items: center; }
}
.spoiler { margin: .45rem 0; width: 100%; padding: .9rem; border: 2px dashed var(--line); border-radius: 16px; cursor: pointer;
           font-weight: 800; color: var(--cocoa-2); background: var(--oat); }
.spoiler::before { content: "🙈 "; }
.tag { font-size: .76rem; font-weight: 800; padding: .15em .65em; border-radius: 99px; background: var(--latte); color: var(--cocoa-2); }
.tag-warn { background: var(--honey-soft); color: #7a4f12; }
.tag-accent { background: color-mix(in srgb, var(--sage) 22%, var(--cream)); color: var(--cocoa); }
@media (prefers-color-scheme: dark) { .tag-warn { color: var(--honey); } }
.post-form { margin-top: 1.2rem; }
.replying { font-size: .9rem; color: var(--cocoa-2); font-weight: 600; }

/* ---------- Clubs ---------- */
.club-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.club-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.3rem;
             border-radius: var(--r); background: var(--cream); color: inherit; text-decoration: none; box-shadow: var(--shadow);
             transition: transform .15s ease; }
a.club-card:hover { transform: translateY(-2px); }
.club-card .btn { align-self: flex-start; }
.club-head { display: flex; gap: .95rem; align-items: flex-start; }
.club-badge { --cloth: #7a5240; flex: none; width: 3rem; height: 3rem; border-radius: 16px; display: grid; place-items: center;
              font-family: var(--display); font-size: 1.35rem; color: #fff6e8; background: var(--cloth); transform: rotate(-4deg);
              box-shadow: 0 4px 10px -4px rgba(60, 35, 20, .45); }
.club-name { font-family: var(--display); font-size: 1.2rem; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.club-name .tag { font-family: var(--sans); }
.club-desc { color: var(--cocoa-2); font-size: .95rem; }
.club-book { font-size: .93rem; margin-top: .35rem; }
.club-top .club-name { font-size: 1.7rem; }
.club-actions { margin-top: 1rem; }
.admin-tools { margin-top: 1rem; border-top: 2px dotted var(--line); padding-top: .8rem; }
.pick-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 12px; padding: .6rem .7rem; cursor: pointer; }
.pick-row:hover { background: var(--honey-soft); }

.chat { display: flex; flex-direction: column; }
.chat-log { height: min(55vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: .65rem;
            padding: 1rem; background: var(--oat); border-radius: 18px; margin-bottom: .9rem; }
.msg { max-width: 78%; align-self: flex-start; }
.msg-mine { align-self: flex-end; text-align: right; }
.msg-name { font-size: .8rem; font-weight: 800; color: var(--cocoa-2); margin: 0 .7rem .15rem; }
.msg-bubble { display: inline-block; text-align: left; padding: .6rem 1rem; border-radius: 20px 20px 20px 6px;
              background: var(--cream); white-space: pre-line; word-break: break-word; box-shadow: 0 2px 4px rgba(90, 55, 35, .08); }
.msg-mine .msg-bubble { background: var(--honey-soft); border-radius: 20px 20px 6px 20px; }
.msg-time { font-size: .7rem; color: var(--cocoa-2); margin: .15rem .7rem 0; }
.chat-input { display: flex; gap: .5rem; }
.chat-input input { flex: 1; border-radius: 99px; padding-left: 1.2rem; }

/* ---------- Lesecafé ---------- */
.cafe-filter { grid-template-columns: repeat(3, 1fr); max-width: 440px; margin: 0 0 1.4rem; }
.cafe-new { margin-bottom: 2rem; }
.cafe-book-pick { display: grid; gap: .4rem; }
.label-text { font-weight: 800; font-size: .92rem; }
.search-inline { margin: 0; }
.picked-book { display: flex; align-items: center; gap: .9rem; padding: .6rem; border-radius: 16px; background: var(--oat); }
.picked-book > div { flex: 1; }

.topic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.topic-card { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem .9rem .9rem; border-radius: var(--r);
              background: var(--cream); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .15s ease; }
.topic-card:hover { transform: translateY(-2px); }
.topic-icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px;
              background: var(--honey-soft); font-size: 1.5rem; }
.topic-body { flex: 1; min-width: 0; }
.topic-title { font-family: var(--display); font-size: 1.15rem; line-height: 1.25; }
.topic-meta { display: flex; flex-wrap: wrap; column-gap: .9rem; font-size: .86rem; font-weight: 600; color: var(--cocoa-2); margin-top: .2rem; }
.topic-count { flex: none; display: grid; justify-items: center; min-width: 4.2rem; padding: .35rem .5rem; border-radius: 14px; background: var(--oat); }
.topic-count b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; }
.topic-count small { font-size: .7rem; font-weight: 700; color: var(--cocoa-2); }
@media (max-width: 520px) { .topic-count { min-width: 3.2rem; } .topic-count small { display: none; } }

.back-link { display: inline-block; margin: .6rem 0 1rem; font-weight: 700; text-decoration: none; color: var(--cocoa-2); }
.back-link:hover { color: var(--cocoa); }
.thread-head { margin-bottom: 2rem; }
.thread-head h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.thread-book { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .5rem .9rem .5rem .5rem;
               border-radius: 16px; background: var(--oat); color: inherit; text-decoration: none; }
.thread-body { font-size: 1.05rem; }

/* ---------- Buchprüfung ---------- */
.number-type { grid-template-columns: repeat(3, 1fr); margin: .4rem 0 0; }
.input-ok { border-color: var(--sage) !important; }
.input-warn { border-color: var(--honey) !important; }
.number-hint { margin: -.4rem 0 0; font-size: .9rem; font-weight: 700; }
.ok-text { color: var(--sage); }
.warn-text { color: #a8661b; }
@media (prefers-color-scheme: dark) { .warn-text { color: var(--honey); } }
.banner-pending { background: var(--honey-soft); color: var(--cocoa); margin-bottom: 1.2rem; }
.book-tools { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.book-tools .btn-quiet { padding-left: 0; }
.report-form { width: 100%; max-width: 480px; display: grid; gap: .5rem; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 85%, black); }
@media (prefers-color-scheme: dark) { .btn-danger { color: #2a1c15; } }
.admin-box p { margin-bottom: 1rem; }
.pages-inline { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .55rem; min-width: 0; }
.pages-inline input { width: 5.5rem; min-width: 0; padding: .4rem .6rem; }
.pages-inline .btn-small { margin-top: 0; }
.candidate .hint { margin: .4rem 0 0; }
.found-card { display: flex; gap: .9rem; align-items: center; padding: .7rem .9rem; border-radius: 16px;
              background: color-mix(in srgb, var(--sage) 14%, var(--cream)); }
.exists-card { background: var(--honey-soft); }
.exists-card .btn-small { margin-top: .45rem; }
.inline-spinner { display: inline-block; width: .9rem; height: .9rem; vertical-align: -2px; margin-right: .35rem; }
input:disabled, textarea:disabled { background: var(--oat); color: var(--cocoa-2); border-style: dashed; cursor: not-allowed; opacity: 1; }
.pending-tag { justify-self: start; margin: .2rem 0; }

.review-list { display: grid; gap: 1rem; }
.review-card { display: grid; gap: .9rem; }
.review-main { display: flex; gap: 1rem; align-items: flex-start; }
.review-title { font-family: var(--display); font-size: 1.2rem; }
.review-title a { color: var(--cocoa); text-decoration: none; }
.review-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; font-size: .86rem; color: var(--cocoa-2); margin-top: .3rem; }
.review-links, .review-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.review-links .btn-small, .review-actions .btn-small { margin-top: 0; }
.review-actions input { flex: 1; min-width: 200px; }
.report-reasons { margin: 0; padding-left: 1.2rem; }
.report-reasons li { margin-bottom: .3rem; }

/* ---------- Blazor-Fehleranzeige ---------- */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding: .8rem 1.2rem;
                   background: var(--danger); color: #fff; }
#blazor-error-ui a { color: #fff; margin-left: 1rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* Seite nach dem Klick auf den Bestätigungslink */
.confirm-card { text-align: center; align-items: center; gap: .4rem; }
.confirm-card .tagline { max-width: 34rem; }
.confirm-card .btn { margin-top: 1rem; min-width: 16rem; }
.confirm-icon { font-size: 3.2rem; line-height: 1; margin-bottom: .6rem; }