@font-face{font-family:'Coterie';src:url('../fonts/coterie.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('../fonts/eb-garamond-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Quicksand';src:url('../fonts/quicksand-400.woff2') format('woff2');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'Quicksand';src:url('../fonts/quicksand-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Quicksand';src:url('../fonts/quicksand-600.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}

body{margin:0;background:#FAF7F2;color:#111111;font-family:'Quicksand',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
input,textarea,button{font-family:'Quicksand',system-ui,sans-serif}
html{scroll-behavior:smooth}

/* Menü-Links: Linie wächst aus der Mitte */
.nl{position:relative;padding:10px 0}
.nl::after{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:1px;background:currentColor;transition:left .35s ease,right .35s ease}
.nl:hover::after{left:0;right:0}

/* Buttons: Farbe fließt von unten hinein, Pfeil rutscht */
.btn{position:relative;overflow:hidden;isolation:isolate;cursor:pointer;transition:color .45s ease,border-color .45s ease}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);border-radius:inherit;transform:translateY(101%);transition:transform .55s cubic-bezier(.7,0,.2,1)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--on-fill) !important;border-color:var(--fill) !important}
.btn .arr{display:inline-block;transition:transform .45s ease}
.btn:hover .arr{transform:translateX(6px)}

/* Pfeil-Buttons: Kreis füllt sich, Pfeil fliegt raus und kommt neu rein, Klick federt */
.ab{position:relative;overflow:hidden;isolation:isolate;width:56px;height:56px;padding:0;border-radius:50%;border:1px solid #FAF7F2;background:transparent;color:#FAF7F2;cursor:pointer;transition:color .4s ease,transform .2s ease}
.ab::before{content:"";position:absolute;inset:0;border-radius:50%;background:#FAF7F2;transform:scale(0);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.ab:hover::before{transform:scale(1)}
.ab:hover{color:#2B2420}
.ab:active{transform:scale(.88)}
.ab-i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.ab .ab-b{transform:translateX(-130%)}
.ab:hover .ab-a{transform:translateX(130%)}
.ab:hover .ab-b{transform:none}
.ab.ab-prev .ab-b{transform:translateX(130%)}
.ab.ab-prev:hover .ab-a{transform:translateX(-130%)}
.ab.ab-prev:hover .ab-b{transform:none}

/* Zitatwechsel */
@keyframes q-in{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes q-in2{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.qa{display:block;animation:q-in .7s cubic-bezier(.2,.7,.2,1) both}
.qb{display:block;animation:q-in2 .7s cubic-bezier(.2,.7,.2,1) both}

/* Karten wachsen beim Drüberfahren */
.lift{transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease}
.lift:hover{transform:translateY(-8px) scale(1.025);box-shadow:0 28px 60px rgba(43,36,32,0.16)}
.cov{max-width:none;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.lift:hover .cov{transform:scale(1.12)}

/* Gleicher Effekt für Karten mit Scroll-Animation (translate/scale statt transform) */
.lift2{transition:translate .55s cubic-bezier(.2,.7,.2,1),scale .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease}
.lift2:hover{translate:0 -8px;scale:1.025;box-shadow:0 28px 60px rgba(43,36,32,0.14)}

/* Header: bleibt nebeneinander; erst auf dem Handy steht das Foto oben und der Text darunter */
@media (max-width: 680px){
.hx{flex-direction:column-reverse !important;min-height:0 !important}
.hero-img{flex:none !important;height:68svh;min-height:440px !important;max-height:640px}
.hero-img img{object-position:center 22% !important}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#FAF7F2 0%,#FAF7F2 4%,rgba(250,247,242,.92) 10%,rgba(250,247,242,.62) 18%,rgba(250,247,242,.26) 30%,rgba(250,247,242,0) 42%),linear-gradient(to bottom,rgba(250,247,242,.55) 0%,rgba(250,247,242,0) 18%)}
.hero-grad{display:none}
.hero-txt{flex:none !important;margin-top:-64px;padding:0 24px 72px !important}
.hx > .hx-fade[aria-hidden]{display:none !important}
}

/* Aufklapp-Bereich "Die Welt hinter dem Buch" */
.tgl{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;padding:0;background:none;border:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#2B2420;cursor:pointer}
.tgl .pl{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid #D4C5A9;font-size:16px;transition:transform .45s cubic-bezier(.7,0,.2,1),background .35s ease,border-color .35s ease}
.tgl:hover .pl{transform:rotate(90deg);background:#2B2420;border-color:#2B2420;color:#FAF7F2}
@keyframes w-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.wopen{animation:w-in .5s cubic-bezier(.2,.7,.2,1) both}

/* Leseprobe-Fenster */
@keyframes ov-in{from{opacity:0}to{opacity:1}}
@keyframes dlg-in{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
.ov{animation:ov-in .35s ease both}
.dlg{animation:dlg-in .55s cubic-bezier(.2,.7,.2,1) both}
.who{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:64px;padding:0 24px;border-radius:16px;border:1px solid #D4C5A9;background:#FFFFFF;color:#111111;font-size:16px;font-weight:500;text-align:left;cursor:pointer;transition:border-color .3s ease,background .3s ease,translate .3s ease}
.who:hover{border-color:#2B2420;background:#F3EDE3;translate:4px 0}
.who .arr{transition:transform .35s ease}
.who:hover .arr{transform:translateX(6px)}
.x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid #D4C5A9;background:transparent;color:#111111;font-size:20px;cursor:pointer;transition:transform .4s ease,background .3s ease}
.x:hover{transform:rotate(90deg);background:#EDE5D8}
.fld{border:1px solid #D4C5A9;border-radius:12px;background:#FFFFFF;padding:13px 16px;font-size:16px;color:#111111;outline:none;width:100%;box-sizing:border-box}
.fld:focus{border-color:#6E7059}

/* Textlinks */
.tl{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .45s ease}
.tl:hover{background-size:100% 1px}

/* Bewegung */
@keyframes ar-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{animation:ar-marquee 55s linear infinite;cursor:default}
.marquee:hover{animation-play-state:paused}
.mq-t{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:19px;color:#6E675D}
.mq-b{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#2B2420}
.mq-l{width:24px;height:1px;background:#D4C5A9;flex:none}
@keyframes ar-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ar-img{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes ar-scrollline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ld1{animation:ar-in 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
.ld2{animation:ar-in 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
.ld3{animation:ar-in 1.1s cubic-bezier(.2,.7,.2,1) .55s both}
.ldimg{animation:ar-img 1.6s cubic-bezier(.2,.7,.2,1) both}
.sline{animation:ar-scrollline 2.2s ease-in-out infinite}
@keyframes sc-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes sc-arch{from{clip-path:inset(30% 0 0 0 round 999px 999px 0 0)}to{clip-path:inset(0 0 0 0 round 999px 999px 0 0)}}
@keyframes sc-drift{from{transform:translateY(-6%) scale(1.12)}to{transform:translateY(6%) scale(1.12)}}
@keyframes sc-soft{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes sc-settle{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes hx-fade{to{opacity:0;transform:translateY(-40px)}}
@keyframes hx-par{to{transform:translateY(12%)}}
@supports (animation-timeline: view()){
.rv{animation:sc-up linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
.rv2{animation:sc-up linear both;animation-timeline:view();animation-range:entry 15% entry 80%}
.arch{animation:sc-arch linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
.drift{animation:sc-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.soft{animation:sc-soft linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
.settle{transform-origin:center top;animation:sc-settle linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
.hx{view-timeline-name:--hero}
.hx-fade{animation:hx-fade linear both;animation-timeline:--hero;animation-range:exit 0% exit 60%}
.hx-par{animation:hx-par linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ---------- Website-Ergänzungen ---------- */
[hidden]{display:none !important}
html{scroll-padding-top:96px}
img{max-width:100%}
:focus-visible{outline:2px solid #6E7059;outline-offset:3px}

/* Menü: oben transparent, beim Runterscrollen weg, beim Hochscrollen wieder da */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(to bottom,rgba(250,247,242,.85),rgba(250,247,242,0));border-bottom:1px solid transparent;transition:transform .5s ease,background .5s ease,border-color .5s ease}
.site-nav.is-solid,.site-nav.is-open{background:rgba(250,247,242,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom-color:rgba(212,197,169,.5)}
.site-nav.is-hidden{transform:translateY(-110%)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:0 10px;border:none;background:none;cursor:pointer}
.nav-toggle span{display:block;height:1px;background:#111111;transition:transform .35s ease}
.site-nav.is-open .nav-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
.site-nav.is-open .nav-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width: 860px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none !important}
  .site-nav.is-open .nav-links{display:flex !important;flex-direction:column;align-items:flex-start !important;width:100%;gap:2px !important;padding:8px 0 20px;font-size:15px !important}
  .site-nav.is-open .nav-links .btn{margin-top:10px}
}

/* Handy-Feinschliff */
a[href^="mailto"]{overflow-wrap:anywhere}
.subpage h1{overflow-wrap:break-word;hyphens:manual}
@media (max-width: 480px){
  #contact a[href^="mailto"]{font-size:19px !important}
  .subpage h1{font-size:36px !important}
}

/* Zitat-Punkte */
.dot{width:28px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dot span{display:block;width:10px;height:10px;border-radius:50%;border:1px solid #FAF7F2;box-sizing:border-box;transition:background .3s ease,transform .3s ease}
.dot[aria-current="true"] span{background:#FAF7F2}
.dot:hover span{transform:scale(1.25)}

/* Manuskript-Auswahl */
.pill{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #D4C5A9;background:#FFFFFF;color:#111111;font-size:14px;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease}
.pill:hover{border-color:#2B2420}
.pill.is-on{background:#2B2420;border-color:#2B2420;color:#FAF7F2}

/* Formulare */
.is-sending{opacity:.6;pointer-events:none}
.fld:invalid:not(:placeholder-shown){border-color:#c99a8c}
body.lp-open{overflow:hidden}

/* Unterseiten */
@keyframes sub-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.subpage .ld{animation:sub-in .9s cubic-bezier(.2,.7,.2,1) both}
.subpage > div{min-height:100vh}