/* ============================================================
   FoxArt Verlag, site.css
   Design-System für alle 5 Seiten der finalen Website
   Basis: demo-v2-foxart · Fixes: object-fit:cover, kein rotate
   ============================================================ */

/* TOKENS */
:root{
  --paper:#faf5ee; --paper-2:#f4ebdd; --paper-3:#efe3d2; --card:#fffdf9;
  --ink:#2c2620; --ink-soft:#5b5145; --ink-mute:#8a7d6d;
  --rose:#c2696e; --rose-deep:#9d434c; --gold:#b3893a; --gold-deep:#8c6a26;
  --blossom:#e7a7b1; --blossom-soft:#f3cdd3; --line:#e6d9c6;
  --serif:"Cambria","Hoefler Text","Palatino Linotype",Georgia,serif;
  --body:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 30px 60px -28px rgba(80,50,40,.55);
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.005em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* LAYOUT */
.wrap{max-width:1160px;margin:0 auto;padding:0 30px}

/* TYPOGRAPHY HELPERS */
.label{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.05em;
  padding:.82em 1.6em;
  border-radius:30px;
  border:1px solid var(--rose);
  color:#fff;
  background:var(--rose);
  transition:transform .35s, background .35s, box-shadow .35s;
  cursor:pointer;
}
.btn:hover{
  background:var(--rose-deep);
  border-color:var(--rose-deep);
  transform:translateY(-2px);
  box-shadow:0 14px 26px -14px var(--rose-deep);
}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);box-shadow:none}

/* ANIMATED BLOSSOM AURA (CSS only, no CDN) */
.aura{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(38vw 38vw at 12% 8%,rgba(231,167,177,.34),transparent 60%),
    radial-gradient(34vw 34vw at 88% 22%,rgba(179,137,58,.20),transparent 60%),
    radial-gradient(40vw 40vw at 70% 92%,rgba(194,105,110,.18),transparent 60%);
  filter:blur(8px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-2%,0) scale(1.08)}
  100%{transform:translate3d(-2%,2%,0) scale(1.04)}
}

/* PETALS */
.petal{
  position:fixed;top:-6vh;z-index:-1;
  width:16px;height:16px;
  background:radial-gradient(circle at 30% 30%,var(--blossom),var(--rose));
  border-radius:80% 0 80% 0;
  opacity:.5;
  animation:fall linear infinite;
}
@keyframes fall{to{transform:translateY(112vh) rotate(540deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.aura,.petal{animation:none!important}}

/* SCROLL PROGRESS */
.prog{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  transition:width .1s linear;
}

/* NAV */
nav{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 30px;
  transition:.4s;
}
nav.scrolled{
  background:rgba(250,245,238,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:13px 30px;
}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:1.18rem}
.logo .fox{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--rose),var(--gold-deep));
  display:grid;place-items:center;color:#fff;font-size:.95rem;
  box-shadow:0 6px 16px -6px var(--rose-deep);
  flex-shrink:0;
}
.logo small{display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep)}
nav ul{
  display:flex;gap:28px;list-style:none;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
}
nav ul a{color:var(--ink-soft);transition:.3s;position:relative}
nav ul a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--rose-deep);transition:.3s}
nav ul a:hover,nav ul a.active{color:var(--rose-deep)}
nav ul a:hover::after,nav ul a.active::after{width:100%}
@media(max-width:880px){nav ul{display:none}}

/* PREVIEW FLAG */
.modeflag{
  position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:60;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--rose);padding:.34em 1em;border-radius:0 0 6px 6px;
}

/* SECTION BASE */
section{padding:108px 0;position:relative}
.reveal{
  opacity:0;transform:translateY(32px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in{opacity:1;transform:none}
.head{text-align:center;max-width:660px;margin:0 auto 66px}
.head h2{font-size:clamp(2rem,4vw,3rem);margin:.3em 0}
.head p{color:var(--ink-soft)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:54px;
  align-items:center;min-height:100vh;padding:120px 0 80px;
  position:relative;
}
.hero .copy{opacity:0;transform:translateY(24px);animation:rise 1.2s .2s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.7rem);line-height:1.04;margin:.2em 0 .35em}
.hero h1 em{font-style:italic;color:var(--rose-deep)}
.hero p{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--ink-soft);max-width:530px;margin-bottom:2em}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .meta{margin-top:26px;font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;color:var(--ink-mute);display:flex;gap:18px;flex-wrap:wrap}
.hero .meta b{color:var(--gold-deep)}
.frame{
  position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 50px 90px -34px rgba(70,40,30,.6);border:1px solid var(--line);
  opacity:0;transform:translateY(30px) scale(.98);
  animation:rise 1.3s .45s cubic-bezier(.2,.7,.2,1) forwards;
  will-change:transform;
}
.frame video{width:100%;height:100%;object-fit:cover}
.frame .tag{
  position:absolute;left:18px;bottom:18px;
  background:rgba(250,245,238,.92);padding:.5em 1em;border-radius:30px;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
}
@keyframes rise{to{opacity:1;transform:none}}
@media(max-width:880px){
  .hero{grid-template-columns:1fr;gap:36px;text-align:center}
  .hero p{margin-inline:auto}
  .hero .cta,.hero .meta{justify-content:center}
  .frame{max-width:380px;margin:0 auto}
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.mani{
  background:var(--ink);color:var(--paper);
  text-align:center;padding:84px 0;
  position:relative;overflow:hidden;
}
.mani p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.6rem,4vw,2.9rem);line-height:1.3;
  max-width:860px;margin:0 auto;position:relative;z-index:2;
}
.mani p b{color:var(--blossom);font-weight:400}
.mani .label{color:var(--blossom);margin-bottom:18px;display:block;position:relative;z-index:2}

/* ============================================================
   WASSERFEUER-SEKTION FIX: kein rotate, nur translateY
   ============================================================ */
.flag{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:38px;box-shadow:var(--shadow);
}
/* FIX: war rotate(-1deg), jetzt NUR translateY */
.flag .cov{
  border-radius:8px;overflow:hidden;
  aspect-ratio:2/3;
  box-shadow:0 30px 56px -26px rgba(70,40,30,.7);
  transition:transform .6s;
}
.flag:hover .cov{transform:translateY(-6px)}
/* FIX: object-fit:cover statt contain, kein Letterboxing */
.flag .cov img{width:100%;height:100%;object-fit:cover;display:block}
.flag .badge{
  display:inline-flex;gap:8px;font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;background:var(--rose-deep);
  padding:.4em 1em;border-radius:30px;margin-bottom:14px;
}
.flag h3{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.1;margin-bottom:.3em}
.flag .ex{font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-size:1.18rem;margin-bottom:.7em}
.flag p{color:var(--ink-soft);margin-bottom:1.2em}
.flag .stars{font-family:var(--sans);font-size:.82rem;color:var(--gold-deep);margin-bottom:1.2em;letter-spacing:.02em}
.flag .cta{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:820px){
  .flag{grid-template-columns:1fr;gap:28px;padding:24px}
  .flag .cov{max-width:300px;margin:0 auto}
  .flag .cta{justify-content:center}
}

/* ============================================================
   KATALOG-GRID, FIX: object-fit:cover überall
   ============================================================ */
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:54px}
.book{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s,box-shadow .5s;
}
.book:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.book .cw{overflow:hidden;aspect-ratio:2/3;background:var(--paper-3)}
/* FIX: object-fit:cover, kein Letterboxing, kein contain */
.book .cw img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
/* FIX: NUR scale-Hover, kein rotate */
.book:hover .cw img{transform:scale(1.06)}
.book .b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.book .g{font-family:var(--sans);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:9px}
.book h3{font-size:1.32rem;line-height:1.18;margin-bottom:.45em}
.book .ex{font-family:var(--serif);font-style:italic;color:var(--gold-deep);font-size:.96rem;margin-bottom:.6em}
.book p{color:var(--ink-soft);font-size:.92rem;margin-bottom:1.1em;flex:1}
.book .lk{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.book .lk .btn{font-size:.72rem;padding:.6em 1.15em}
.book .en{font-family:var(--sans);font-size:.7rem;color:var(--ink-mute)}
.book .en a{color:var(--rose-deep);border-bottom:1px solid var(--blossom-soft)}
@media(max-width:900px){.cat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cat{grid-template-columns:1fr}}

/* ============================================================
   VIDEO SCENE (Interlude)
   ============================================================ */
.scene{position:relative;overflow:hidden;padding:0}
.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,38,32,.32),rgba(44,38,32,.55))}
.scene .inner{position:relative;z-index:2;text-align:center;padding:150px 30px}
.scene p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.3;
  max-width:800px;margin:0 auto;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.scene span{
  display:block;margin-top:18px;font-family:var(--sans);
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blossom-soft);
}

/* ============================================================
   WEITERE TITEL / MORE, FIX: object-fit:cover
   ============================================================ */
.more{
  display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:24px;
  margin-top:50px;justify-content:center;
}
.more a{
  display:block;border-radius:8px;overflow:hidden;
  box-shadow:0 16px 34px -22px rgba(70,40,30,.6);
  transition:.5s;position:relative;
  background:var(--card);border:1px solid var(--line);
}
.more a:hover{transform:translateY(-5px)}
.more .cw{aspect-ratio:2/3;overflow:hidden}
/* FIX: object-fit:cover */
.more img{width:100%;height:100%;object-fit:cover}
.more .cap{font-family:var(--sans);font-size:.72rem;text-align:center;padding:11px 8px;color:var(--ink-soft);line-height:1.4}
.more .cap b{display:block;color:var(--ink);font-size:.8rem;font-family:var(--serif)}
.more .soon{
  position:absolute;top:10px;right:10px;
  background:var(--gold-deep);color:#fff;
  font-family:var(--sans);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.3em .7em;border-radius:20px;
}
@media(max-width:820px){.more{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   VERLAG SEKTION
   ============================================================ */
.verlag-section{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.verlag-box{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:46px;display:grid;grid-template-columns:auto 1fr;gap:34px;
  align-items:center;box-shadow:var(--shadow);
}
.verlag-seal{
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--rose),var(--gold-deep));
  display:grid;place-items:center;color:#fff;font-size:2.2rem;
  box-shadow:0 14px 30px -12px var(--rose-deep);
  flex-shrink:0;
}
.verlag-box h3{font-size:1.7rem;margin-bottom:.3em}
.verlag-box p{color:var(--ink-soft);font-size:.96rem}
@media(max-width:680px){
  .verlag-box{grid-template-columns:1fr;text-align:center;padding:30px}
  .verlag-seal{margin:0 auto}
}

/* Zweiter Autor, Platzhalter Karte */
.author-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:38px;display:grid;grid-template-columns:auto 1fr;gap:28px;
  align-items:center;box-shadow:var(--shadow);
  border-left:3px solid var(--blossom);
}
.author-card .seal{
  width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--blossom),var(--blossom-soft));
  display:grid;place-items:center;color:var(--rose-deep);font-size:1.8rem;
  box-shadow:0 10px 22px -10px var(--blossom);
  flex-shrink:0;
}
.author-card h3{font-size:1.35rem;margin-bottom:.25em;color:var(--ink)}
.author-card .todo-note{
  font-family:var(--sans);font-size:.74rem;font-style:italic;
  color:var(--blossom);margin-bottom:.5em;
}
.author-card p{color:var(--ink-soft);font-size:.92rem;font-style:italic;margin-bottom:1em}
.author-card .voice-label{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);margin-top:.6em;
}
@media(max-width:680px){
  .author-card{grid-template-columns:1fr;text-align:center;padding:24px}
  .author-card .seal{margin:0 auto}
}

/* ============================================================
   AUTORIN SEKTION
   ============================================================ */
.author-section{background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.author-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:58px;align-items:center}
.author-portrait{
  aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,var(--blossom),var(--paper-3));
  display:grid;place-items:center;text-align:center;
  color:var(--ink-soft);font-family:var(--serif);font-style:italic;
  border:1px solid var(--line);padding:30px;
  max-width:360px;margin:0 auto;
  box-shadow:var(--shadow);
}
.author-section p{color:var(--ink-soft);margin-bottom:1.1em}
.sig{font-family:var(--serif);font-style:italic;font-size:1.9rem;color:var(--rose-deep);margin-top:.3em}
@media(max-width:820px){.author-grid{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{text-align:center}
.news .box{max-width:560px;margin:30px auto 0;display:flex;gap:10px;flex-wrap:wrap}
.news input{
  flex:1;min-width:200px;
  background:#fff;border:1px solid var(--line);border-radius:30px;
  color:var(--ink);font-family:var(--body);font-size:1rem;
  padding:.9em 1.35em;outline:none;transition:.3s;
}
.news input:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(194,105,110,.12)}
.news small{display:block;margin-top:14px;color:var(--ink-soft);font-size:.76rem}
.news small a{color:var(--rose-deep);border-bottom:1px solid var(--rose)}

/* ============================================================
   KONTAKT SEKTION
   ============================================================ */
.kontakt-box{
  max-width:660px;margin:0 auto;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:48px;box-shadow:var(--shadow);
}
.kontakt-box h3{font-size:1.5rem;margin-bottom:.4em}
.kontakt-box p{color:var(--ink-soft);margin-bottom:1em}
.kontakt-box a.mailto{
  display:inline-block;font-family:var(--sans);font-size:1rem;
  color:var(--rose-deep);border-bottom:2px solid var(--blossom);
  padding-bottom:.1em;transition:.3s;
}
.kontakt-box a.mailto:hover{color:var(--rose-deep);border-color:var(--rose-deep)}

/* IMPRESSUM */
.impressum{
  max-width:760px;margin:0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:48px;box-shadow:var(--shadow);
}
.impressum h2{font-size:2rem;margin-bottom:1em}
.impressum h3{font-size:1.25rem;margin:.8em 0 .3em;color:var(--ink)}
.impressum p{color:var(--ink-soft);font-size:.94rem;margin-bottom:.6em;line-height:1.7}
.impressum .todo{color:var(--blossom);font-style:italic}
.impressum a{color:var(--rose-deep);border-bottom:1px solid var(--blossom-soft)}
.impressum ul{margin:.4em 0 .8em 1.2em;color:var(--ink-soft);font-size:.94rem}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:var(--paper);padding:72px 0 34px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px}
footer h4{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blossom);margin-bottom:15px;
}
footer ul{list-style:none;font-size:.9rem;line-height:2.1}
footer ul a{color:#e8ddd0;opacity:.85}
footer ul a:hover{color:var(--blossom);opacity:1}
footer .lg{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:1.4rem;margin-bottom:10px}
footer .lg .fox{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--rose),var(--gold-deep));
  display:grid;place-items:center;color:#fff;font-size:.95rem;
  flex-shrink:0;
}
.imp{font-size:.8rem;color:#e0d4c6;line-height:1.8;opacity:.88}
.imp .todo{color:var(--blossom);font-style:italic}
.legal{
  margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.76rem;color:#b6a99a;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
footer .fn{margin-top:14px;font-size:.72rem;color:#9d9082}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:500px){.fcols{grid-template-columns:1fr}}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie{
  position:fixed;bottom:18px;left:18px;right:18px;z-index:90;
  max-width:520px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;box-shadow:0 30px 70px -20px rgba(60,40,30,.45);
  transform:translateY(150%);transition:.6s cubic-bezier(.2,.7,.2,1);
}
.cookie.show{transform:none}
.cookie h4{font-family:var(--serif);font-size:1.2rem;margin-bottom:8px;color:var(--ink)}
.cookie p{font-size:.84rem;color:var(--ink-soft);margin-bottom:16px}
.cookie p a{color:var(--rose-deep);border-bottom:1px solid var(--rose)}
.cookie .crow{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{font-size:.76rem;padding:.6em 1.1em}

/* ============================================================
   PAGE-HERO (Sub-Seiten ohne Video)
   ============================================================ */
.page-hero{
  min-height:38vh;display:flex;align-items:flex-end;
  padding:130px 0 58px;text-align:center;position:relative;
}
.page-hero .ph-inner{max-width:760px;margin:0 auto}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1;margin-bottom:.3em}
.page-hero p{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--ink-soft)}

/* ============================================================
   UTILITY
   ============================================================ */
.mt-l{margin-top:72px}
.mt-m{margin-top:44px}
.text-center{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:680px){.grid-2{grid-template-columns:1fr}}