/* ===========================================================
   amkostiuk.de — app.css
   Единая дизайн-система нового сайта (Anna-Mariia Kostiuk)
   Стиль: тёплый пергамент + золото + роза, dark-academia / modern.
   Один файл на все страницы. Мобильный = app-вид (нижнее меню),
   десктоп = современный сайт (верхнее меню).
   =========================================================== */
:root{
  --rose:#a85565;--rose-l:#c07a87;--rose-bg:#f6e9ea;
  --gold:#b8943e;--gold-l:#d4b05a;--gold-p:#e8d08a;
  --wood:#3a2a1c;--ink:#140d08;
  --bg:#faf3e8;--cream:#fdf8ee;--parch:#f3e7d3;
  --text:#2a1e14;--text-m:#5a4a3a;--text-d:#8a7a68;--text-f:#a89888;
  --border:#e6d8c4;--border-h:#d8c4a8;
  --fancy:'Cinzel Decorative',serif;--disp:'Cinzel',serif;
  --serif:'Cormorant',Georgia,serif;--body:'EB Garamond',Georgia,serif;
  --tab-h:64px;
  --safe:env(safe-area-inset-bottom,0px);
  --tabbar-h:58px;
  --tabbar-gap:10px;
  color-scheme:only light;            /* фиксируем светлый вид: тёмный режим телефона НЕ перекрашивает */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:72px;font-size:106.25%;background:#faf3e8}
/* фон — ГРАДИЕНТОМ (для браузера это «изображение»): авто-тёмный режим его НЕ перекрашивает */
body{font-family:var(--body);background:#faf3e8 linear-gradient(180deg,#fdf8ee 0,#faf3e8 38%);color:var(--text);line-height:1.5;min-height:100dvh;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto ist Pflicht: die width/height-Attribute dienen nur der Platzreservierung
   (gegen Springen beim Nachladen). Ohne height:auto nimmt der Browser die Attribut-Höhe
   wörtlich und verzerrt jedes Bild, dem CSS eine eigene Breite gibt. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.rdr{max-width:1120px;margin:0 auto;padding:0 18px}
/* Artikel: Bilder dürfen breit sein, Fließtext bleibt lesbar (~720px) */
.rdr .art-top,
.rdr .art-body>p,.rdr .art-body>h2,.rdr .art-body>h3,.rdr .art-body>ul,.rdr .art-body>ol,
.rdr .art-body>blockquote,.rdr .art-nav{max-width:720px;margin-left:auto;margin-right:auto}
.rdr .art-body>figure{max-width:100%}
/* Artikel-Galerie: zwei Bilder nebeneinander, Bilder immer zentriert */
.art-gal{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1084px;margin:0 auto 22px}
.art-gal figure,.art-lead{margin:0}
.art-body figure img{max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.32)}
.art-body figure figcaption{margin-top:9px;font-family:var(--serif);font-style:italic;font-size:.95rem;line-height:1.4;color:var(--text-d);text-align:center}
.art-lead{max-width:1084px;margin:0 auto 26px}
/* Hochformat-Fotos dürfen nie höher als der Bildschirm werden */
.art-body .art-lead img{width:auto;max-height:78vh;max-height:78svh}
.art-body .art-gal figure img{width:auto;max-height:62vh;max-height:62svh}
@media(max-width:760px){.art-lead img{max-height:70vh;max-height:70svh}.art-gal figure img{max-height:64vh;max-height:64svh}}
.art-body>blockquote{font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.65;color:var(--text-m);border-left:2px solid var(--gold);padding-left:18px;margin:0 auto 20px}
@media(max-width:760px){.art-gal{grid-template-columns:1fr;gap:14px}}

.rdr .art-body>figure figcaption{max-width:720px;margin-left:auto;margin-right:auto}

/* ===== Header ===== */
/* Floating-Pill-Header (iOS-Stil): transparente Leiste, Name + Menü als
   schwebende „Inseln". Mobil eine Pille (Name+Zeile), am Desktop zwei. */
.hd{position:sticky;top:0;z-index:40;background:transparent;border:0;padding:10px 12px 4px}
.hd .in{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px;padding:0}
.hd .nm,.hd nav{background:rgba(253,248,238,.74);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border:1px solid rgba(58,42,28,.10);box-shadow:0 8px 26px rgba(58,42,28,.14);border-radius:999px}
.hd .lg{width:38px;height:38px;border-radius:50%;background:#0e0a07;flex:0 0 auto}
.hd .lg img{width:100%;height:100%;border-radius:50%}
.hd .nm{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 26px;font-family:var(--serif);font-size:1.12rem;font-weight:500;color:var(--text);line-height:1.1}
.hd .nm b{color:var(--rose);font-weight:600}
.hd .nm-sub{font-family:var(--disp);font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-top:3px}
/* Kompakt-Pille (JS setzt .scrolled): oben kleiner Name, beim Scrollen wachsen
   Schrift + Kennzeile, die Pille bläht sich auf. Gilt auf allen Seiten. */
.hd .nm{transition:padding .4s ease}
.hd .nm-name{transition:font-size .45s ease}
.hd .nm-sub{max-height:1.4em;overflow:hidden;transition:max-height .45s ease,opacity .4s ease,font-size .45s ease,margin-top .45s ease}
.hd:not(.scrolled) .nm{padding:5px 15px}
.hd:not(.scrolled) .nm-name{font-size:.72rem;line-height:1.25}
.hd:not(.scrolled) .nm-sub{max-height:0;opacity:0;font-size:0;letter-spacing:0;margin-top:0}
.hd nav{display:flex;gap:20px;align-items:center;padding:12px 26px}
@media(min-width:761px),(pointer:fine){.hd .in{justify-content:space-between;max-width:none;padding:0}.hd{padding-left:32px;padding-right:32px}.hd .nm{align-items:flex-start;text-align:left}}
.hd nav a{font-family:var(--disp);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-d);white-space:nowrap;transition:max-width .4s ease,opacity .35s ease,font-size .35s ease,color .2s}
.hd nav a:hover{color:var(--rose)}
/* Rechte Menü-Pille: kompakt = Kreis mit ☰; bei Hover (oder wenn die Namens-Pille
   wächst = .scrolled) klappt das volle Menü auf. Nur Desktop (nav sichtbar). */
.hd nav{transition:padding .4s ease,gap .4s ease}
.hd nav::before{content:'☰';order:-1;font-size:0;line-height:1;color:var(--gold);transition:font-size .35s ease;pointer-events:none}
.hd.moved nav{gap:0;padding:11px 13px;cursor:pointer}
.hd.moved nav::before{font-size:1.05rem}
.hd.moved nav a{max-width:0;opacity:0;font-size:0;overflow:hidden}
.hd.moved nav:hover{gap:20px;padding:12px 26px}
.hd.moved nav:hover::before{font-size:0}
.hd.moved nav:hover a{max-width:130px;opacity:1;font-size:.66rem}
.hd .nl{font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--gold);border-radius:7px;padding:.5rem .95rem}
@media(max-width:760px) and (pointer:coarse){.hd nav{display:none}.hd .in{justify-content:center}.hd .nm{align-items:center;text-align:center}}
/* Unterseiten am Handy: Namens-Leiste ganz weg (mehr Platz), Hero rückt nach oben.
   Navigation läuft über die Tabbar unten. Desktop bleibt unverändert. */
@media(max-width:760px) and (pointer:coarse){
  .subpage .hd{display:none}
  .subpage .hero:not(#start),.subpage .sj-hero,.subpage .sh-hero{margin-top:0;padding-top:24px}
}

/* ===== Buttons / dividers ===== */
.btn{display:inline-block;font-family:var(--disp);font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  border-radius:9px;padding:.85rem 1.5rem;transition:transform .25s,box-shadow .25s;cursor:pointer;border:none}
.btn.g{color:#fff;background:linear-gradient(135deg,var(--gold-l),var(--gold));box-shadow:0 6px 18px rgba(184,148,62,.28)}
.btn.o{color:var(--text);background:transparent;border:1px solid var(--border-h)}
.btn:hover{transform:translateY(-2px)}
.divider{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0}
.divider i{height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--border-h))}
.divider i+i{background:linear-gradient(90deg,var(--border-h),transparent)}
.divider b{width:5px;height:5px;border-radius:50%;background:var(--gold-l)}

/* ===== Hero (Startseite) ===== */
.hero{position:relative;overflow:hidden;text-align:center;padding:46px 18px 30px}
/* Hero unter die schwebende Leiste ziehen (kein dunkler Streifen oben). Über
   app.css (versioniert) statt inline — sonst hält Firefox das alte HTML im Cache.
   Startseite (#start) ausgenommen: die hat ihr eigenes Foto-Layout. */
.hero:not(#start),.sj-hero,.sh-hero{margin-top:-66px;padding-top:82px}
/* Handy: weniger Kopfabstand und Inhalt oben statt zentriert — sonst rutscht
   z.B. das Buchcover in die Mitte eines hohen Heros nach unten. */
@media(max-width:820px){
  .hero:not(#start),.sj-hero,.sh-hero{padding-top:56px}
  .hero-cols{align-items:start}
}
/* Katalog im Namenlos-Modus: das Gassen-Foto (.wlt-hero) zieht unter die
   schwebende Leiste (kein schwarzer Streifen oben); „Zurück" liegt als
   Overlay oben auf dem Foto. Nur Desktop — am Handy ist die Leiste ohnehin aus. */
@media(min-width:761px),(pointer:fine){
  .kt-wrap:has(.wlt-hero:not([hidden])){margin-top:-66px}
  .kt-wrap:has(.wlt-hero:not([hidden])) .kt-hero{position:absolute;top:0;left:0;right:0;z-index:6;padding-top:78px;pointer-events:none}
  .kt-wrap:has(.wlt-hero:not([hidden])) .kt-hero a{pointer-events:auto}
}
.hero .bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,#fff7e6,transparent 60%);z-index:0}
#parts{position:absolute;inset:0;z-index:1;pointer-events:none}
#parts span{position:absolute;border-radius:50%;background:var(--gold-l);opacity:.4;animation:fl linear infinite}
@keyframes fl{0%{transform:translateY(0)}100%{transform:translateY(-120px)}}
.hero .ct{position:relative;z-index:2;max-width:640px;margin:0 auto}
.hero .portrait{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 20px;border:3px solid var(--cream);box-shadow:0 10px 30px rgba(58,42,28,.18)}
.hero .lbl{font-family:var(--disp);font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.hero h1{font-family:var(--fancy);font-size:clamp(2rem,7vw,2.9rem);line-height:1.08;margin-bottom:14px;background:linear-gradient(135deg,#3a2a1c 30%,#a8763a);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero .sub{font-family:var(--serif);font-size:clamp(1.05rem,3.4vw,1.3rem);font-style:italic;color:var(--text-m);margin-bottom:24px}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===== Section frame ===== */
.sec{padding:38px 0 8px}
.sec .head{text-align:center;margin-bottom:24px}
.sec .lab{font-family:var(--disp);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.sec .tt{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--text)}

/* ===== Featured ===== */
.feat{display:flex;gap:20px;background:linear-gradient(135deg,var(--cream),#f7eedd);border:1px solid var(--border);border-radius:20px;overflow:hidden;padding:18px;align-items:center;box-shadow:0 14px 40px rgba(58,42,28,.08)}
.feat .cov{width:122px;flex:0 0 auto;height:auto;border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.42)}
.feat .bd{flex:1;min-width:0}
.feat .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.feat .btns .btn{margin:0}
@media(max-width:700px){.feat .btns{justify-content:center}}
.feat .nw{font-family:var(--disp);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-bottom:7px}
.feat h3{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--text);margin-bottom:6px}
.feat p{font-family:var(--body);font-size:1rem;color:var(--text-m);margin-bottom:12px}
.feat .pr{font-family:var(--disp);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
@media(max-width:560px){.feat{flex-direction:column;text-align:center}.feat .cov{width:175px}}

/* ===== Bücher grid ===== */
.books{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -18px;padding:2px 18px 12px}
.books::-webkit-scrollbar{display:none}
.book{scroll-snap-align:start;flex:0 0 60%}
@media(min-width:680px){.book{flex-basis:31%}}
.book{background:var(--cream);border:1px solid var(--border);border-radius:15px;overflow:hidden;transition:transform .25s,box-shadow .25s;display:block}
.book:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(58,42,28,.1)}
.book .c{aspect-ratio:2/3;background:#140d08 center/cover;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}
.book .badge{font-family:var(--disp);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.9}
.book .i{padding:13px 13px 16px}
.book .ct{font-family:var(--disp);font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-d);margin-bottom:5px}
.book h4{font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--text);margin-bottom:6px;line-height:1.2}
.book .st{font-family:var(--disp);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;border-radius:20px;padding:.2rem .6rem;display:inline-block}
.st.live{color:#fff;background:var(--gold)}.st.soon{color:var(--gold);border:1px solid var(--gold-l)}.st.price{color:var(--rose);border:1px solid var(--rose-l)}

/* ===== Aktuelles feed ===== */
.feed{display:flex;flex-direction:column;gap:11px}
.fcard{display:flex;gap:14px;align-items:center;background:var(--cream);border:1px solid var(--border);border-radius:14px;padding:11px;transition:transform .2s}
.fcard:hover{transform:translateX(3px)}
.fcard .th{width:74px;height:74px;border-radius:10px;flex:0 0 auto;background:#ddd center/cover}
.fcard .x{flex:1;min-width:0}
.fcard .dt{font-family:var(--disp);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.fcard h4{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--text);line-height:1.3}

/* ===== Medien ===== */
.media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.media{grid-template-columns:1fr}}
.mcard{border-radius:18px;overflow:hidden;color:#f0e6d4;padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end}
.mcard.film{background:linear-gradient(160deg,#241a10,#0c0805)}
.mcard.song{background:linear-gradient(160deg,#1c2438,#0a0d16)}
.mcard .k{font-family:var(--disp);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-p);margin-bottom:8px}
.mcard h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin-bottom:6px}
.mcard p{font-family:var(--body);font-size:.96rem;color:#cdbfa8;margin-bottom:14px}
.mcard .ml{font-family:var(--disp);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid rgba(232,208,138,.5);border-radius:30px;padding:.45rem 1rem;align-self:flex-start}

/* ===== Über ===== */
.about{max-width:680px;margin:0 auto}
.about p{font-family:var(--body);font-size:1.04rem;font-style:italic;color:var(--text-m);line-height:1.85;margin-bottom:14px}
.about .fam{width:100%;border-radius:16px;margin:8px 0 6px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.about .cap{text-align:center;font-size:.82rem;color:var(--text-d);font-style:italic;margin-bottom:10px}

/* ===== Panels (Newsletter/Kontakt) ===== */
.panel{max-width:520px;margin:0 auto;text-align:center}
.fin{width:100%;font-family:var(--body);font-size:1rem;border:1px solid var(--border-h);border-radius:10px;background:var(--cream);padding:.85rem .95rem;color:var(--text);margin-bottom:10px}
textarea.fin{min-height:120px;resize:vertical}
.row2{display:flex;gap:10px}@media(max-width:480px){.row2{flex-direction:column}}

/* ===== Artikel (Presse/Blog) ===== */
.art-top{text-align:center;padding:34px 0 20px}
.art-top .cat{font-family:var(--disp);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.art-top h1{font-family:var(--serif);font-size:clamp(1.7rem,5vw,2.3rem);font-weight:600;line-height:1.2;color:var(--text);margin-bottom:12px}
.art-top .meta{font-family:var(--disp);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-d)}
.art-hero{width:100%;border-radius:16px;margin:0 0 26px;box-shadow:0 12px 36px rgba(58,42,28,.14)}
.art-body{font-family:var(--body)}
.art-body p{font-size:1.08rem;line-height:1.85;color:var(--text);margin-bottom:17px}
.art-body p.lead{font-size:1.22rem;line-height:1.7;color:var(--text-m)}

.art-body h2{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--text);margin:28px 0 10px}
.art-body .quote{font-family:var(--serif);font-size:1.35rem;font-style:italic;color:var(--rose);
  border-left:3px solid var(--gold-l);padding:6px 0 6px 18px;margin:22px 0}
.art-body a.inl{color:var(--rose);border-bottom:1px solid var(--rose-l)}
.art-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0 6px;
  border-top:1px solid var(--border);padding-top:18px}
.art-nav a{font-family:var(--disp);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-d)}
.art-nav a:hover{color:var(--rose)}

/* ===== Footer ===== */
.ft{background:#241a12;color:#cdbfa8;text-align:center;padding:34px 18px;margin-top:30px}
.ft .fl{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.ft .fl a{font-family:var(--disp);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#bfae8e}
.ft .so{display:flex;gap:10px;justify-content:center;margin:14px 0}
.ft .so a{width:36px;height:36px;border-radius:50%;border:1px solid #4a3a28;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:.6rem;color:#cdbfa8}
.ft .cp{font-size:.82rem;color:#8f7e62;margin-top:8px}
@media(max-width:760px) and (pointer:coarse){body{padding-bottom:calc(var(--safe) + var(--tabbar-gap) + var(--tabbar-h) + 18px)}}

/* ===== Bottom Tab Bar (mobile) ===== */
.tabbar{position:fixed;left:12px;right:12px;bottom:calc(var(--safe) + var(--tabbar-gap));z-index:50;display:flex;justify-content:space-around;align-items:center;height:var(--tabbar-h);background:rgba(253,248,238,.72);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border:1px solid rgba(255,255,255,.55);box-shadow:0 6px 20px rgba(58,42,28,.14);border-radius:22px;padding:0 6px;transform:translateX(165%);opacity:0;pointer-events:none}
@media(max-width:760px) and (pointer:coarse){.tabbar{transform:translateX(0);opacity:1;pointer-events:auto}}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 0;color:var(--text-d);transition:color .25s}
.tab.on{color:var(--gold)}
.tab span{font-family:var(--disp);font-size:.5rem;letter-spacing:.05em;text-transform:uppercase}
.tab svg{transition:transform .25s}.tab.on svg{transform:translateY(-2px) scale(1.06)}

/* ===== Совместимость: контент старых статей (.article-body) в новом виде ===== */
.article-body{font-family:var(--body)}
.article-body>p:first-of-type{font-size:1.16rem;color:var(--text-m)}
.article-body p{font-size:1.08rem;line-height:1.85;color:var(--text);margin-bottom:17px}
.article-body h2{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--text);margin:28px 0 10px}
.article-body h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--text);margin:22px 0 8px}
.article-body img{border-radius:14px;margin:18px 0;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.article-body a{color:var(--rose);border-bottom:1px solid var(--rose-l)}
.article-body ul,.article-body ol{margin:0 0 17px 1.25em}
.article-body li{font-size:1.06rem;line-height:1.7;margin-bottom:6px}
.article-body blockquote{font-family:var(--serif);font-size:1.3rem;font-style:italic;color:var(--rose);border-left:3px solid var(--gold-l);padding-left:18px;margin:22px 0}


/* ===== Меню сверху-справа (бургер) — для привычной верхней навигации ===== */
.hd .burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:34px;height:34px;border:none;background:transparent;cursor:pointer;flex:0 0 auto;padding:0}
.hd .burger span{display:block;width:22px;height:2px;background:var(--text-d);transition:.3s;border-radius:2px}
.hd .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hd .burger.open span:nth-child(2){opacity:0}
.hd .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:760px) and (pointer:coarse){.hd .burger{display:flex}}
.hd-menu{position:absolute;top:100%;left:0;right:0;z-index:210;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1);background:rgba(253,248,238,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 16px 32px rgba(58,42,28,.16)}
.hd-menu.open{max-height:360px;border-bottom:1px solid var(--border)}
.hd-menu a{display:block;padding:14px 22px;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-m);border-top:1px solid var(--border);text-decoration:none}
.hd-menu a:first-child{border-top:none}
@media(min-width:761px),(pointer:fine){.hd-menu{display:none}}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hd{background:rgba(253,248,238,.97)}.hd-menu{background:rgba(253,248,238,.98)}.tabbar{background:rgba(253,248,238,.97)}}
html{scroll-behavior:smooth}

/* ============================================================
   ТЁМНАЯ ТЕМА (весь сайт) — class="theme-dark" на <html>
   ============================================================ */
html.theme-dark{background:#100d09;color-scheme:dark}
.theme-dark body{background:#100d09 radial-gradient(130% 70% at 50% 0%,#1d1710 0%,#100d09 52%);color:#ece3d2}
/* Header */
.theme-dark .hd{background:transparent;border:0}
.theme-dark .hd .nm,.theme-dark .hd nav{background:rgba(18,14,9,.66);border:1px solid rgba(232,208,138,.16);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.theme-dark .hd .nm{color:#f0e6d4}
.theme-dark .hd .nm b{color:var(--rose-l)}
.theme-dark .hd .nm-sub{color:var(--gold-p)}
.theme-dark .hd nav a{color:rgba(240,230,212,.8)}
.theme-dark .hd nav::before{color:var(--gold-p)}
.theme-dark .hd nav a:hover{color:var(--gold-p)}
.theme-dark .hd .nl{background:rgba(232,208,138,.16);color:#f0e6d4;border:1px solid rgba(232,208,138,.35)}
.theme-dark .hd .burger span{background:#f0e6d4}
.theme-dark .hd-menu{background:rgba(16,12,8,.94);box-shadow:0 16px 32px rgba(0,0,0,.5)}
.theme-dark .hd-menu a{color:rgba(240,230,212,.85);border-top-color:rgba(232,208,138,.1)}
/* Tabbar */
.theme-dark .tabbar{background:rgba(18,14,9,.72);border:1px solid rgba(232,208,138,.14);box-shadow:0 6px 20px rgba(0,0,0,.28)}
.theme-dark .tab{color:#a89a82}
.theme-dark .tab.on{color:var(--gold-p)}
/* Footer */
.theme-dark .ft{background:#0b0906;border-top:1px solid rgba(232,208,138,.08)}
/* Buttons / divider */
.theme-dark .btn.o{color:#ece3d2;border-color:rgba(232,208,138,.3)}
.theme-dark .divider i{background:linear-gradient(90deg,transparent,rgba(232,208,138,.3))}
.theme-dark .divider i+i{background:linear-gradient(90deg,rgba(232,208,138,.3),transparent)}
/* Hero (Startseite) */
.theme-dark .hero .bg{background:radial-gradient(circle at 50% 16%,rgba(184,148,62,.18),transparent 60%)}
.theme-dark .hero .portrait{border-color:rgba(232,208,138,.25);box-shadow:0 10px 34px rgba(0,0,0,.5)}
.theme-dark .hero .lbl{color:var(--gold-p)}
.theme-dark .hero h1{background:linear-gradient(135deg,#f2e2aa,#cf94a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.theme-dark .hero .sub{color:#cabd9f}
/* Section */
.theme-dark .sec .lab{color:var(--gold-p)}
.theme-dark .sec .tt{color:#f0e6d4}
/* Featured */
.theme-dark .feat{background:linear-gradient(135deg,#1a1510,#14100b);border:1px solid rgba(232,208,138,.14);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.theme-dark .feat h3{color:#f0e6d4}
.theme-dark .feat p{color:#c2b59c}
.theme-dark .feat .nw{color:var(--rose-l)}
.theme-dark .feat .pr{color:var(--gold-p)}
/* Bücher grid */
.theme-dark .book{background:rgba(255,255,255,.04);border:1px solid rgba(232,208,138,.13)}
.theme-dark .book:hover{box-shadow:0 14px 30px rgba(0,0,0,.5)}
.theme-dark .book .ct{color:#a89a82}
.theme-dark .book h4{color:#f0e6d4}
.theme-dark .st.soon{color:var(--gold-p);border-color:rgba(212,176,90,.5)}
.theme-dark .st.price{color:var(--rose-l);border-color:rgba(192,122,135,.5)}
/* Feed */
.theme-dark .fcard{background:rgba(255,255,255,.04);border:1px solid rgba(232,208,138,.13)}
.theme-dark .fcard:hover{transform:translateX(3px)}
.theme-dark .fcard .dt{color:var(--gold-p)}
.theme-dark .fcard h4{color:#f0e6d4}
/* About */
.theme-dark .about p{color:#cabd9f}
.theme-dark .about .cap{color:#9a8c74}
/* Panels */
.theme-dark .fin{background:rgba(255,255,255,.06);border:1px solid rgba(232,208,138,.25);color:#fff}
.theme-dark .fin::placeholder{color:#9a8c74}
/* Artikel */
.theme-dark .art-top .cat{color:var(--gold-p)}
.theme-dark .art-top h1{color:#f0e6d4}
.theme-dark .art-top .meta{color:#a89a82}
.theme-dark .art-hero{box-shadow:0 16px 44px rgba(0,0,0,.5)}
.theme-dark .art-body p{color:#d8ccb4}
.theme-dark .art-body p.lead{color:#cabd9f}
.theme-dark .art-body h2{color:#f0e6d4}
.theme-dark .art-body .quote{color:var(--rose-l);border-left-color:var(--gold-l)}
.theme-dark .art-body a.inl{color:var(--gold-p);border-bottom-color:rgba(232,208,138,.4)}
.theme-dark .art-nav{border-top-color:rgba(232,208,138,.12)}
.theme-dark .art-nav a{color:#a89a82}
.theme-dark .art-nav a:hover{color:var(--gold-p)}

/* ============ Cookie-Consent (DSGVO) ============ */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:300;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.cc-in{max-width:680px;margin:0 auto;background:rgba(20,15,10,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(232,208,138,.22);border-radius:18px;padding:18px 20px;box-shadow:0 16px 44px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:14px}
@media(min-width:640px){.cc-in{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}}
.cc-txt{font-family:var(--body);font-size:.92rem;line-height:1.5;color:#cabd9f;margin:0}
.cc-txt a{color:var(--gold-p);text-decoration:underline}
.cc-btns{display:flex;gap:9px;flex-shrink:0}
.cc-no{background:transparent;border:1px solid rgba(232,208,138,.3);color:#cdbf9c;font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.72rem 1.1rem;border-radius:30px;cursor:pointer;transition:.2s;white-space:nowrap}
.cc-no:hover{background:rgba(232,208,138,.08)}
.cc-yes{background:linear-gradient(135deg,var(--gold-l),var(--gold));border:none;color:#16110d;font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.72rem 1.3rem;border-radius:30px;cursor:pointer;transition:.2s;white-space:nowrap}
.cc-yes:hover{transform:translateY(-1px)}

/* ============ Fix: .article-body (старые статьи) в тёмной теме ============ */
.theme-dark .article-body p{color:#d8ccb4}
.theme-dark .article-body>p:first-of-type{color:#cabd9f}
.theme-dark .article-body h2{color:#f0e6d4}
.theme-dark .article-body h3{color:#ecdcb8}
.theme-dark .article-body h4{color:#e4d4b0}
.theme-dark .article-body li{color:#cdc0a4}
.theme-dark .article-body strong,.theme-dark .article-body b{color:#f0e6d4}
.theme-dark .article-body a{color:var(--gold-p);border-bottom-color:rgba(232,208,138,.4)}
.theme-dark .article-body a:hover{color:var(--gold-l)}
.theme-dark .article-body blockquote{color:var(--rose-l);border-left-color:var(--gold-l)}
.theme-dark .article-body hr{border-color:rgba(232,208,138,.14)}
.theme-dark .article-body table{border-color:rgba(232,208,138,.16)}
.theme-dark .article-body th,.theme-dark .article-body td{border-color:rgba(232,208,138,.12);color:#d8ccb4}

/* ===== App-like: бургер скрыт на мобиле, Mehr = bottom-sheet ===== */
.hd .burger{display:none!important}
.more-sheet{position:fixed;inset:0;z-index:2500;display:none}
.more-sheet.open{display:block}
.more-backdrop{position:absolute;inset:0;background:rgba(8,6,4,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.more-panel{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#1c1711,#13100b);border-top:1px solid rgba(232,208,138,.2);border-radius:22px 22px 0 0;padding:12px 0 calc(28px + env(safe-area-inset-bottom));box-shadow:0 -12px 44px rgba(0,0,0,.6);animation:moreUp .46s cubic-bezier(.32,.72,0,1)}
@keyframes moreUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.more-handle{width:42px;height:4px;background:rgba(232,208,138,.3);border-radius:2px;margin:0 auto 12px}
.more-panel a{display:flex;align-items:center;gap:13px;padding:17px 30px;color:#ece3d2;font-family:var(--disp);font-size:.92rem;letter-spacing:.05em;text-decoration:none;border-bottom:1px solid rgba(232,208,138,.07)}
.more-panel a:last-child{border-bottom:none}
.more-panel a:active{background:rgba(232,208,138,.09)}
.more-panel a svg{flex:0 0 auto;opacity:.65}
@media(min-width:761px),(pointer:fine){.more-sheet{display:none!important}}


/* ===== Плавные переходы между страницами ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ===== Плавное появление модальных окон ===== */
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:translateY(0)}}
.about-modal.open .about-backdrop,.st-modal.open .st-backdrop{animation:modalFade .42s ease}
.about-modal.open .about-dialog,.st-modal.open .st-dialog{animation:modalPop .5s cubic-bezier(.32,.72,0,1)}
@media(prefers-reduced-motion:reduce){.about-modal.open .about-dialog,.st-modal.open .st-dialog,.about-modal.open .about-backdrop,.st-modal.open .st-backdrop{animation:none}}


/* language switcher (added 2026-07-06) */
.hd .lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;flex:0 0 auto;margin-left:2px}
.hd .lang a{color:var(--text-d);opacity:.55;transition:opacity .2s,color .2s;cursor:pointer;text-decoration:none}
.hd .lang a:hover{color:var(--rose);opacity:1}
.hd .lang a.on{color:var(--gold);opacity:1;pointer-events:none}
.hd .lang i{display:inline-block;width:1px;height:10px;background:var(--text-d);opacity:.28}
.theme-dark .hd .lang a{color:rgba(240,230,212,.72)}
.theme-dark .hd .lang a:hover{color:var(--gold-p)}
.theme-dark .hd .lang a.on{color:var(--gold-p)}
.theme-dark .hd .lang i{background:rgba(240,230,212,.42)}
@media(max-width:760px) and (pointer:coarse){.hd .lang{display:inline-flex;font-size:.72rem;gap:8px;margin:0 2px 0 0}.hd .lang a{padding:6px 3px}.hd .lang i{height:12px}}


/* ============================================================
   WELTEN-KARTEN (Startseite) — Name + Beschreibung auf dem Bild
   ============================================================ */
.welten{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.welt{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:18px;overflow:hidden;background:var(--cream);border:1px solid var(--border);transition:transform .25s,box-shadow .25s,border-color .25s}
.welt:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(58,42,28,.16)}

.welt-img{grid-area:1/1;position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#100d09}
.welt-img img{width:100%;height:100%;object-fit:cover;display:block}
.welt-cap{grid-area:1/1;align-self:end;z-index:2;padding:0 26px 18px;text-align:center}
.welt-img::after{content:'';position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(180deg,rgba(8,6,4,0),rgba(8,6,4,.55) 45%,rgba(8,6,4,.93));z-index:1;pointer-events:none}
.welt-t{margin:0 0 5px;font-family:var(--fancy);font-size:1.9rem;line-height:1.04;color:#f7edd7;text-shadow:0 2px 16px rgba(0,0,0,.92)}
.welt-d{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.36;color:#dccfb8;text-shadow:0 1px 12px rgba(0,0,0,.95)}
.welt-18{position:absolute;top:12px;right:12px;z-index:3;font-style:normal;font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.1em;padding:3px 9px;border-radius:20px;background:rgba(12,8,6,.72);border:1px solid rgba(220,150,170,.6);color:#e9b6c3}

.welt-b{grid-area:2/1;padding:14px 18px 16px;display:flex;flex-direction:column;gap:12px;flex:1 1 0;min-width:0}
.welt-mini{display:flex;gap:10px}
.welt-mini .wm{flex:1 1 0;min-width:0;max-width:110px;aspect-ratio:2/3;border-radius:8px;background:#140d08 center/cover;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(0,0,0,.32)}
.welt-mini .wm-ph svg{width:46%;height:auto;display:block;opacity:.9}
.welt-cta{margin-top:auto;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.welt-cta b{font-weight:400;transition:transform .25s;display:inline-block}
.welt:hover .welt-cta b{transform:translateX(4px)}

/* Handy: Bild oben über die volle Breite — sonst passt die Beschreibung nicht aufs Bild */
@media(max-width:760px){
  .welten{grid-template-columns:1fr;gap:14px}
  /* Bild links; Name AUF dem Bild, Beschreibung rechts — spart Platz für größere Cover */
  .welt{grid-template-columns:28% 1fr;grid-template-rows:auto auto 1fr}
  /* min-height:100% erzeugte eine Zirkel-Abhängigkeit (Bildhöhe ↔ Kartenhöhe) —
     nach dem Drehen des Handys löste Safari sie falsch auf. Stretch reicht völlig. */
  .welt-img{grid-area:1/1/4/2;aspect-ratio:auto;min-height:0;align-self:stretch}
  .welt-img::after{display:none}
  .welt-cap{display:contents;text-align:left}
  .welt-t{grid-area:1/2;align-self:end;margin:0;padding:12px 13px 0;text-align:left;
          font-size:1.22rem;line-height:1.1;text-shadow:none;color:var(--text)}
  .welt-d{grid-area:2/2;align-self:start;margin:0;padding:4px 13px 0;text-align:left;
          font-size:.86rem;line-height:1.34;color:var(--text-m);text-shadow:none}
  .welt-b{grid-area:3/2;padding:9px 13px 13px;gap:9px}
  .welt-mini{gap:7px}
  .welt-mini .wm{max-width:none}
  .welt:hover{transform:none}
}
@media(max-width:760px){.theme-dark .welt-t{color:#f0e6d4}.theme-dark .welt-d{color:#b0a48f}}
/* Unter 1068px passen 4×110px nicht mehr nebeneinander. Statt zu schrumpfen
   wird die Reihe seitlich scrollbar: feste Cover-Größe, das nächste lugt am
   Kartenrand hervor — das zeigt, dass da noch mehr ist. */
@media(min-width:761px) and (max-width:1067px){
  .welt-mini{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
             scrollbar-width:none;-ms-overflow-style:none;
             margin-right:-18px;padding-right:18px}
  .welt-mini::-webkit-scrollbar{width:0;height:0}
  .welt-mini .wm{flex:0 0 110px;max-width:110px}
}
/* Am Handy ebenfalls scrollbar. Die Breite ist prozentual gerechnet, damit auf
   jedem Gerät genau 2,5 Cover zu sehen sind — das halbe dritte zeigt: da geht's weiter.
   Sichtbar ist die Innenbreite + die 13px, in die der Streifen hineinragt:
   2,5·w + 14px = 100% + 13px  →  w = 40% − 0,4px */
@media(max-width:760px){
  .welt-mini{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
             scrollbar-width:none;-ms-overflow-style:none;
             margin-right:-13px;padding-right:13px}
  .welt-mini::-webkit-scrollbar{width:0;height:0}
  .welt-mini .wm{flex:0 0 calc(40% - 0.4px);max-width:110px}
}

/* Tёмная тема */
.theme-dark .welt{background:rgba(255,255,255,.04);border-color:rgba(232,208,138,.13)}
.theme-dark .welt:hover{box-shadow:0 18px 44px rgba(0,0,0,.5);border-color:rgba(232,208,138,.3)}
.theme-dark .welt-cta{color:var(--gold-p)}
.theme-dark .welt-mini .wm{border-color:rgba(232,208,138,.16)}


/* ============================================================
   Welten-Karten: Cover verlinken direkt aufs Buch, der Rest (Bild, Titel,
   Beschreibung, CTA) auf den Katalog. Umgesetzt als „stretched link“:
   .welt-fill liegt unsichtbar über der ganzen Karte (z-index 1), die Cover
   liegen darüber (z-index 2) und fangen ihre eigenen Klicks ab.
   ============================================================ */
.welt{position:relative}
.welt-fill{position:absolute;inset:0;z-index:1;border-radius:inherit}
.welt-mini{position:relative;z-index:2}
/* Rückmeldung ohne Anheben: translateY würde von overflow:hidden der Karte oben
   abgeschnitten. Stattdessen Glanz + goldener Rahmen — bleibt innerhalb der Karte. */
.welt-mini .wm{text-decoration:none;transition:box-shadow .2s,border-color .2s,filter .2s}
.welt-mini .wm:hover,.welt-mini .wm:active,.welt-mini .wm:focus-visible{
  border-color:rgba(232,208,138,.75);
  box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 0 2px rgba(232,208,138,.55);
  filter:brightness(1.07);outline:none}

/* PC-Startseite: Name + Menü scroll-gekoppelt (gleichzeitig, stufenlos).
   JS setzt --p (0 oben → 1 eingeklappt); hier wird alles zusammen interpoliert. */
.hd.deskprog .nm{transition:padding .28s ease-out}
.hd.deskprog .nm-name{transition:font-size .28s ease-out}
.hd.deskprog .nm-sub{transition:max-height .28s ease-out,opacity .28s ease-out,font-size .28s ease-out,margin-top .28s ease-out}
.hd.deskprog nav{transition:gap .28s ease-out,padding .28s ease-out}
.hd.deskprog nav a{transition:max-width .28s ease-out,opacity .24s ease-out,font-size .24s ease-out}
.hd.deskprog nav::before{transition:font-size .24s ease-out}
.hd.deskprog .nm{padding:calc((8 - 3*var(--p))*1px) calc((26 - 11*var(--p))*1px)}
.hd.deskprog .nm-name{font-size:calc((1.12 - 0.40*var(--p))*1rem)}
.hd.deskprog .nm-sub{max-height:calc((1.4 - 1.4*var(--p))*1em);opacity:calc(1 - var(--p));font-size:calc((0.52 - 0.52*var(--p))*1rem);letter-spacing:calc(0.22em - 0.22em*var(--p));margin-top:calc((3 - 3*var(--p))*1px)}
.hd.deskprog nav{gap:calc((20 - 20*var(--p))*1px);padding:calc((12 - 1*var(--p))*1px) calc((26 - 13*var(--p))*1px)}
.hd.deskprog nav a{max-width:calc((130 - 130*var(--p))*1px);opacity:calc(1 - var(--p));font-size:calc((0.66 - 0.66*var(--p))*1rem);overflow:hidden}
.hd.deskprog nav::before{font-size:calc(1.05*var(--p)*1rem)}
.hd.deskprog nav:hover{gap:20px;padding:12px 26px}
.hd.deskprog nav:hover a{max-width:130px;opacity:1;font-size:.66rem}
.hd.deskprog nav:hover::before{font-size:0}