/* Schriften werden selbst ausgeliefert und nicht von Google geladen.
   Der Grund ist nicht Geschwindigkeit, sondern dass beim Laden von
   fonts.googleapis.com die IP-Adresse jedes Besuchers an Google geht, bevor
   irgendjemand eingewilligt hat. Selbst ausgeliefert entfaellt die
   Uebertragung, und damit auch die Frage nach einem Einwilligungsbanner. */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-400-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#141A1F; --ink-soft:#4A5560; --ink-faint:#7C8791;
  --bg:#FBFAF8; --surface:#F2F0EC; --band:#EFEDE8;
  --dark:#141A1F; --on-dark:#F7F6F3; --on-dark-soft:#B8C2C4; --on-dark-faint:#7E8C8E;
  --accent:#0E6B5C; --accent-deep:#0A5145; --warm:#C98B3F;
  --rule:rgba(20,26,31,.12);
  --rule-strong:#141A1F;
  --accent-on-dark:#7FB3A3;
  --seal-accent:#0E6B5C;
  --seal-mark:#0E6B5C; --rule-soft:rgba(20,26,31,.06);
  --display:"Fraunces",Georgia,serif; --util:"Karla",system-ui,sans-serif;
  --wrap:1180px; --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--util);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:-.015em}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.masthead{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.logo{font-family:var(--display);font-size:23px;font-weight:500;letter-spacing:-.02em}
.logo em{font-style:normal;color:var(--accent)}
.nav{display:flex;align-items:center;gap:24px}
.nav a{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav .btn{background:var(--accent);color:#fff;padding:10px 18px;border-radius:3px;border:0;font-size:12px}
.nav .btn:hover{background:var(--accent-deep);color:#fff;border-bottom-color:transparent}
@media(max-width:900px){.nav a:not(.btn){display:none}}
.hero,.plate{position:relative;overflow:hidden;background:var(--dark);color:var(--on-dark)}
.hero{padding:clamp(60px,8vw,104px) 0 clamp(50px,6vw,76px)}
.plate{padding:clamp(48px,6vw,74px) 0}
.contour{position:absolute;inset:0;width:100%;height:100%;opacity:.42;pointer-events:none}
.contour path,.contour ellipse,.contour line,.contour circle{fill:none;stroke:#4C7F75;stroke-width:1;vector-effect:non-scaling-stroke}
.hero .wrap,.plate .wrap{position:relative;z-index:2}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:end}
@media(max-width:900px){.hgrid{grid-template-columns:1fr;gap:44px}}
.hero .eyebrow,.plate .eyebrow{color:var(--on-dark-faint)}
.hero h1{font-size:clamp(40px,6vw,72px);font-weight:300;margin:20px 0 22px;letter-spacing:-.03em}
.hero h1 em{font-style:italic;color:#7FB3A3}
.hlede{font-size:clamp(17px,1.6vw,19px);color:var(--on-dark-soft);max-width:44ch}
.hrule{width:64px;height:2px;background:var(--warm);margin-top:28px}
.plate .pno{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.plate .pno a{color:var(--warm)}
.plate h1{font-size:clamp(34px,5vw,56px);font-weight:300;margin:16px 0 18px}
.plate p{color:var(--on-dark-soft);max-width:60ch;line-height:1.68}
.gazetteer{border-top:1px solid rgba(150,150,150,.25)}
.gzh{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 12px;border-bottom:1px solid rgba(150,150,150,.15)}
.gzh .cnt{font-size:11px;color:var(--on-dark-faint);letter-spacing:.1em}
.gz{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(150,150,150,.1);transition:padding-left .25s,background .25s}
.gz:hover{padding-left:8px;background:rgba(150,150,150,.07)}
.gz .no{font-size:11px;font-weight:700;color:var(--on-dark-faint);letter-spacing:.08em}
.gz .nm{font-family:var(--display);font-size:19px;color:var(--on-dark)}
.gz:hover .nm{color:#7FB3A3}
.gz .wh{font-size:12px;color:var(--on-dark-faint)}
@media(max-width:560px){.gz .wh{display:none}}
.section{padding:clamp(56px,7vw,92px) 0}
.band{background:var(--band);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.shead{margin-bottom:38px;max-width:64ch}
.shead h2{font-size:clamp(26px,3.4vw,38px);margin-top:12px}
.books{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
@media(max-width:980px){.books{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.books{grid-template-columns:repeat(2,1fr)}}
.book .cover{aspect-ratio:2/3;border-radius:3px;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .28s,box-shadow .28s}
.book:hover .cover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(16,20,24,.18)}
.book .ct{font-family:var(--display);font-size:15px;line-height:1.22;color:#F2EFE9}
.book .ca{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,233,.6)}
.book .bt{font-family:var(--display);font-size:15px;line-height:1.3;margin-top:11px}
.book .bm{font-size:12px;color:var(--ink-faint);margin-top:2px}
.shelves{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
@media(max-width:760px){.shelves{grid-template-columns:1fr}}
.shelf{background:var(--surface);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:9px;min-height:160px;transition:background .25s}
.shelf:hover{background:#fff}
.stop{display:flex;justify-content:space-between;align-items:baseline}
.stop h3{font-size:23px}
.pno{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent)}
.shelf p{color:var(--ink-soft);font-size:15px;line-height:1.55}
.sby{margin-top:auto;font-size:12px;color:var(--ink-faint);letter-spacing:.04em}
.acard{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,30px);padding:clamp(24px,3vw,34px);background:var(--surface);border:1px solid var(--rule-soft);margin-bottom:10px}
@media(max-width:640px){.acard{grid-template-columns:1fr}}
.av{width:74px;height:74px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:25px}
.acard h3{font-size:25px;margin-bottom:3px}
.acard h3 a:hover{color:var(--accent)}
.role{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:13px}
.acard p{color:var(--ink-soft);font-size:15.5px;max-width:64ch}
.sblock{border-top:1px solid var(--rule);padding-top:32px;margin-top:42px}
.sblock h3{font-size:25px;margin:9px 0 20px}
.sblock h3 a:hover{color:var(--accent)}
.bookpage .crumb{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:20px}
.bookpage .crumb a{color:var(--accent)}
.bgrid{display:grid;grid-template-columns:290px 1fr;gap:clamp(30px,5vw,64px);align-items:start}
@media(max-width:820px){.bgrid{grid-template-columns:1fr;gap:34px}}
.bcov{aspect-ratio:2/3;border-radius:3px;padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 34px rgba(16,20,24,.2)}
.bct{font-family:var(--display);font-size:27px;line-height:1.16;color:#F2EFE9}
.bcs{font-size:11px;line-height:1.5;color:rgba(242,239,233,.7);margin-top:11px}
.bca{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,233,.6)}
.bgrid h1{font-size:clamp(30px,4.2vw,44px);margin-bottom:10px}
.bsub{font-family:var(--display);font-size:19px;color:var(--ink-soft);font-style:italic;margin-bottom:18px;max-width:52ch}
.bbody p{color:var(--ink-soft);margin-bottom:14px;max-width:62ch}
.byline{font-size:14px;color:var(--ink-faint);margin-bottom:6px}
.byline a{color:var(--accent);font-weight:600}
.buybox{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule)}
.buys{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 14px}
.buy{display:flex;flex-direction:column;gap:2px;border:1px solid var(--ink);padding:11px 20px;border-radius:3px;transition:background .2s,color .2s}
.buy .l{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.buy .p{font-size:12px;color:var(--ink-faint)}
.buy:hover{background:var(--ink);color:var(--bg)}
.buy:hover .p{color:rgba(247,246,243,.7)}
.buy.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.buy.primary .p{color:rgba(255,255,255,.75)}
.buy.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.disc{font-size:12.5px;color:var(--ink-faint);line-height:1.55;max-width:60ch}
.disc strong{color:var(--ink-soft);font-weight:600}
.news{background:var(--dark);color:var(--on-dark);padding:clamp(52px,6vw,80px) 0}
.ngrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center}
@media(max-width:860px){.ngrid{grid-template-columns:1fr;gap:32px}}
.news h2{font-size:clamp(26px,3.2vw,38px);font-weight:300;margin:12px 0 14px}
.news p{color:var(--on-dark-soft);max-width:46ch}
.form{display:flex;gap:10px;flex-wrap:wrap}
.form input{flex:1;min-width:210px;background:#fff;border:1px solid rgba(20,26,31,.30);color:var(--ink);padding:14px 16px;font-family:var(--util);font-size:15px;border-radius:3px}
.form input::placeholder{color:var(--ink-faint)}
.form input:focus{border-color:var(--warm);outline:none}
/* on the dark newsletter band, invert to light-on-dark */
.news .form input{background:rgba(255,255,255,.06);border-color:rgba(150,150,150,.35);color:var(--on-dark)}
.news .form input::placeholder{color:rgba(200,200,200,.6)}
.form button{background:var(--warm);color:#12181C;border:0;cursor:pointer;padding:14px 24px;border-radius:3px;font-family:var(--util);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.fine{font-size:12.5px;color:var(--on-dark-faint);margin-top:13px}
.fine a{color:var(--warm)}
.prose{max-width:68ch}
.prose h1{font-size:clamp(32px,4.4vw,46px);margin-bottom:18px}
.prose h2{font-size:26px;margin:36px 0 12px}
.prose h3{font-size:20px;margin:28px 0 8px}
.prose p{color:var(--ink-soft);margin-bottom:16px}
.prose strong{color:var(--ink)}
/* Links im Fliesstext. Der globale Stil setzt a auf color:inherit ohne
   Unterstreichung, was fuer Navigation richtig ist und fuer Fliesstext nicht.
   Der Kontrast zwischen Akzentfarbe und umgebendem Text betraegt 1,19 zu 1,
   Farbe allein macht einen Link hier also nicht erkennbar. Die Unterstreichung
   traegt die Kennzeichnung, die Farbe unterstuetzt sie. */
.prose p a, .prose li a, .prose .lead a, .cstext p a, .cstext li a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(14,107,92,.45)}
.prose p a:hover, .prose li a:hover, .prose .lead a:hover,
.cstext p a:hover, .cstext li a:hover{
  color:var(--accent-deep);
  text-decoration-thickness:2px;
  text-decoration-color:var(--accent-deep)}
.prose p a:focus-visible, .prose li a:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
/* Die kleingesetzten Hinweise stehen bereits in Ocker, dort genuegt die
   Unterstreichung ohne zusaetzlichen Farbwechsel. */
.fine a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lead{font-size:20px;color:var(--ink)!important}
.footer{background:var(--dark);color:var(--on-dark-faint);padding:52px 0 30px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-bottom:30px;border-bottom:1px solid rgba(150,150,150,.15)}
@media(max-width:760px){.fgrid{grid-template-columns:1fr;gap:24px}}
.fmark{font-family:var(--display);font-size:22px;color:var(--on-dark);margin-bottom:8px}
.fmark em{font-style:normal;color:#7FB3A3}
.footer h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:11px}
.footer a{display:block;margin-bottom:7px}
.footer a:hover{color:var(--on-dark)}
.legal{padding-top:20px;font-size:12.5px;line-height:1.6}
.legal strong{color:var(--on-dark-soft);font-weight:600}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* real cover images */
.cover.has-img,.bcov.has-img{padding:0;overflow:hidden;display:block}
.cover.has-img img,.bcov.has-img img{width:100%;height:100%;object-fit:cover;display:block}


/* ================= LOGO ================= */
.logo{display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo svg{flex:0 0 auto}
.logo span{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.02em}
.logo em{font-style:normal;color:var(--accent)}
.fmark{display:flex;align-items:center;gap:10px;color:var(--on-dark);--seal-mark:#7FB3A3}
.fmark span{font-family:var(--display);font-size:22px;font-weight:600}
.fmark em{font-style:normal;color:var(--accent-on-dark)}

/* ================= HERO CTA ================= */
.hcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn-p,.btn-s{display:inline-block;padding:13px 24px;border-radius:3px;font-size:13px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:all .2s ease}
.hero .btn-p{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.hero .btn-p:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.hero .btn-s{background:transparent;color:var(--on-dark);border:1px solid rgba(200,200,200,.4)}
.hero .btn-s:hover{border-color:var(--on-dark);background:rgba(255,255,255,.07)}
.authors-cta .btn-p{background:var(--accent);color:#fff;border:1px solid var(--accent);margin-top:24px}
.authors-cta .btn-p:hover{background:var(--accent-deep)}

/* ================= THE FINDER ================= */
.finder{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.chip{background:var(--bg);border:1px solid var(--rule);color:var(--ink-soft);font-family:var(--util);
  font-size:14.5px;padding:11px 18px;border-radius:100px;cursor:pointer;line-height:1.3;transition:all .2s ease}
.chip:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.fpanel{display:none}
.fpanel.on{display:block;animation:fin .35s ease both}
@keyframes fin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fempty{padding:30px 0 4px;color:var(--ink-faint);font-size:15px}
.fhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding:28px 0 24px;margin-top:26px;border-top:1px solid var(--rule);margin-bottom:26px}
.fhead h3{font-size:28px;margin:8px 0}
.fhead h3 a{color:var(--ink)}
.fhead h3 a:hover{color:var(--accent)}
.fhead p{color:var(--ink-soft);font-size:15px;max-width:62ch}
.fbtn{flex:0 0 auto;border:1px solid var(--ink);padding:11px 20px;border-radius:3px;font-size:12px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;transition:all .2s}
.fbtn:hover{background:var(--ink);color:var(--bg)}

/* ================= AUTHOR CTA ================= */
.authors-cta{background:var(--dark);color:var(--on-dark);--rule-strong:rgba(247,246,243,.8);--seal-accent:#7FB3A3}
.acta{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,5vw,70px);align-items:center}
.authors-cta .eyebrow{color:var(--on-dark-faint)}
.authors-cta h2{color:var(--on-dark);font-size:clamp(28px,3.6vw,40px);font-weight:300;margin:14px 0 18px;max-width:22ch}
.authors-cta p{color:var(--on-dark-soft);max-width:62ch;margin-bottom:14px}
.ahi{display:grid;gap:15px;margin:28px 0 6px;padding:24px 0;
  border-top:1px solid rgba(150,150,150,.2);border-bottom:1px solid rgba(150,150,150,.2)}
.ahi div{color:var(--on-dark-soft);font-size:15px;line-height:1.6}
.ahi strong{color:var(--accent-on-dark);font-weight:600}
.aseal{display:flex;align-items:center;justify-content:center;opacity:.92}
.aseal svg{width:100%;height:auto;max-width:230px}
@media(max-width:900px){
  .acta{grid-template-columns:1fr}
  .aseal{display:none}
}

/* ================= prose ================= */
.prose ul{margin:0 0 18px 22px;color:var(--ink-soft)}
.prose li{margin-bottom:9px}
.prose li strong{color:var(--ink)}
.submit-box{background:var(--surface);border-left:3px solid var(--accent);padding:20px 24px;margin:26px 0;font-size:16px}
.submit-box a{color:var(--accent);font-weight:600}
.submit-box .fine{font-size:13.5px;color:var(--ink-faint)}

/* ===== newsletter success message ===== */
.ml-wrap{width:100%}
.ml-done{padding:16px 18px;border-left:3px solid var(--accent);background:var(--surface);
  color:var(--ink);font-size:15px;line-height:1.55;border-radius:3px}
.ml-done strong{color:var(--accent)}
.news .ml-done{background:rgba(255,255,255,.06);border-left-color:var(--accent-on-dark);color:var(--on-dark)}
.news .ml-done strong{color:var(--accent-on-dark)}
[hidden]{display:none!important}

/* ===== signups paused notice ===== */
.ml-soon{padding:16px 18px;border-left:3px solid var(--warm);background:var(--surface);
  color:var(--ink);font-size:15px;line-height:1.55;border-radius:3px}
.ml-soon strong{color:var(--ink)}
.news .ml-soon{background:rgba(255,255,255,.06);border-left-color:var(--warm);color:var(--on-dark)}
.news .ml-soon strong{color:var(--on-dark)}

/* ===== featured carousel ===== */
.carousel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.carousel-nav{display:flex;gap:8px;flex:0 0 auto}
.cbtn{width:40px;height:40px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);
  border-radius:50%;cursor:pointer;font-size:17px;line-height:1;transition:all .2s ease;
  display:flex;align-items:center;justify-content:center}
.cbtn:hover{border-color:var(--accent);color:var(--accent)}
.cbtn:disabled{opacity:.3;cursor:default;border-color:var(--rule);color:var(--ink)}
.carousel{position:relative;margin:0 -4px}
.carousel-track{display:flex;gap:22px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding:4px 4px 14px;
  -ms-overflow-style:none;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track .book{flex:0 0 auto;width:180px;scroll-snap-align:start}
@media(max-width:560px){
  .carousel-track .book{width:150px}
  .carousel-nav{display:none}
}

/* Autorenanfrage. Mehr Felder als die Newsletteranmeldung, deshalb ein Raster
   statt einer Zeile. Auf schmalen Schirmen einspaltig. */
.aform{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.aform .full{grid-column:1/-1}
.aform label{display:block;font-family:var(--util);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.aform input,.aform select,.aform textarea{width:100%;box-sizing:border-box;background:#fff;
  border:1px solid rgba(20,26,31,.30);color:var(--ink);padding:13px 15px;
  font-family:var(--util);font-size:15px;border-radius:3px}
.aform textarea{min-height:120px;resize:vertical;line-height:1.5}
.aform input:focus,.aform select:focus,.aform textarea:focus{border-color:var(--warm);outline:none}
.aform .choice{display:flex;gap:22px;flex-wrap:wrap;padding:13px 0}
.aform .choice span{font-family:var(--util);font-size:15px;color:var(--ink);display:flex;
  align-items:center;gap:8px;white-space:nowrap}
.aform .choice input{width:auto;flex:none;margin:0}
.aform button{background:var(--warm);color:#12181C;border:0;cursor:pointer;padding:15px 26px;
  border-radius:3px;font-family:var(--util);font-weight:700;font-size:15px;justify-self:start}
.aform .fine{margin:0}
@media(max-width:640px){.aform{grid-template-columns:1fr}}