/* Gemeinsame Gestaltung für Konto, Bibliothek und Lesen (Werte wie home.html) */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/poppins-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/montserrat-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/montserrat-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/montserrat-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{
  color-scheme:light dark;
  --surface:#FFF8EA; --ink:#3B2A20; --muted:#6b5d4a; --paper:#ffffff;
  --gold:#E0A526; --on-gold:#3B2A20;
  --red:#CB2C27; --green:#4C8B2F; --green-deep:#3A7022; --violet:#5B3A8C;
  --red-t:#CB2C27; --green-t:#3A7022; --violet-t:#5B3A8C;
  --red-tint:#FCE6DF; --violet-tint:#EDE5F6; --green-tint:#E6F0DA; --gold-tint:#FBEBC0;
  --bar-bg:#3B2A20; --bar-ink:#FFF8EA;
  --r-md:10px; --r-lg:18px; --r-pill:999px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:72px;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --surface:#231c14; --ink:#f4ead7; --muted:#cdbfa6; --paper:#2f261a;
    --red-t:#FF8F85; --green-t:#9FD67C; --violet-t:#C9B0F5;
    --red-tint:#3d2321; --violet-tint:#2f2746; --green-tint:#25351e; --gold-tint:#2e2616;
    --bar-bg:#f4ead7; --bar-ink:#231c14;
  }
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.65}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
::selection{background:var(--gold);color:var(--on-gold)}
:focus-visible{outline:3px solid var(--violet-t);outline-offset:3px;border-radius:4px}
.wrap{width:min(1168px,100%);padding-inline:var(--s3);margin-inline:auto}
.nb{white-space:nowrap}
.hidden{display:none!important}
.stage{background:var(--bar-bg);color:var(--bar-ink);text-align:center;font-size:.85rem;padding:6px var(--s2)}

.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(6px);border-bottom:3px solid var(--gold)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-block:6px}
.mark{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:1.5rem;letter-spacing:.02em;text-decoration:none}
.mark b{color:var(--red-t);font-weight:700}
/* Wortbildmarke CHI-ME: Lila wie die Latzhose, Bindestrich Orange wie der Stern (Canon #77358A / #EA8700) */
:root{--wm-lila:#77358A;--wm-orange:#EA8700}@media (prefers-color-scheme:dark){:root{--wm-lila:#B98BCF}}.mark{color:var(--wm-lila)}.mark b{color:var(--wm-orange)}
.nav{display:flex;align-items:center;gap:var(--s3)}
.nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:not(.btn):hover,.nav a[aria-current]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
@media (max-width:560px){.nav{gap:var(--s2)}.nav a.opt{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;text-decoration:none;font:inherit;font-weight:700;font-size:1rem;padding:.6rem 1.5rem;border-radius:var(--r-pill);border:2px solid var(--ink);background:var(--gold);color:var(--on-gold);line-height:1.3;text-align:center;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--surface)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--sm{padding:.45rem 1.1rem;font-size:.95rem;min-height:40px}
.btn:disabled{opacity:.5;cursor:wait}

main{padding-block:var(--s4) var(--s5)}
.h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;color:var(--green-t)}
.sub{margin-top:var(--s1);color:var(--muted);max-width:52ch}
.card{background:var(--paper);border:3px solid var(--gold);border-radius:var(--r-lg);padding:var(--s3);margin-top:var(--s3)}
.card h2{font-size:1.35rem;margin-bottom:var(--s1)}
.row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.field{flex:1 1 16rem;min-height:48px;padding:.6rem 1rem;border-radius:var(--r-pill);border:2px solid var(--ink);background:var(--surface);color:var(--ink);font:inherit}
.muted{color:var(--muted);font-size:.95rem}
.msg{margin-top:var(--s2);padding:.7rem 1rem;border-radius:var(--r-md);font-weight:600}
.msg:empty{display:none}
.msg.ok{background:var(--green-tint);color:var(--green-t)}
.msg.err{background:var(--red-tint);color:var(--red-t)}

.tierbadge{display:inline-block;padding:.15rem .9rem;border-radius:var(--r-pill);font-weight:700;color:#fff;background:var(--red)}
.tierbadge.paid{background:var(--violet)}
.tierbadge.premium{background:var(--green-deep)}

footer{padding-block:var(--s4);font-size:.92rem;color:var(--muted);border-top:1px solid color-mix(in srgb,var(--muted) 30%,transparent)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between}
footer nav{display:flex;gap:var(--s2)}
footer nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s1)}