/* =====================================================================
   BÜCHER NEST — gemeinsames Stylesheet (alle Seiten)
   Reduziert-modernes Bauhaus-Design. Bücher/Kategorien: siehe nest.js
   ===================================================================== */
:root{
  --bg:#f4f1ea;
  --ink:#161616;
  --muted:#5c5a54;
  --card:#fbfaf6;
  --hair:#d9d4c7;
  /* Bauhaus-Akzente */
  --red:#cc3b2e;
  --blue:#1f4e9c;
  --yellow:#e7b21c;
  --teal:#13656b;
  --green:#3f7d4e;
  --plum:#7a3b6b;
  --orange:#d2742b;
  --slate:#2f3a45;
  --accent:var(--ink);   /* wird auf Kategorieseiten per JS gesetzt */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,"Inter",system-ui,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:200;background:var(--bg);
  border-bottom:3px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;padding:14px 28px;
}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;}
.brand .mark{flex-shrink:0;}
.brand .word{font-weight:800;letter-spacing:5px;font-size:21px;text-transform:uppercase;line-height:1;}
.brand .word small{display:block;font-size:9.5px;letter-spacing:3px;font-weight:600;color:var(--muted);margin-top:5px;}
.topnav{display:flex;gap:6px;flex-wrap:wrap;}
.topnav a{
  text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  padding:7px 11px;border:1.5px solid transparent;transition:border-color .15s,background .15s;
}
.topnav a:hover{border-color:var(--ink);}
.topnav a.current{border-color:var(--ink);background:var(--ink);color:var(--bg);}
.burger{
  display:none;background:none;border:2.5px solid var(--ink);width:46px;height:42px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span,.burger span::before,.burger span::after{
  content:"";display:block;width:22px;height:2.5px;background:var(--ink);position:relative;
  transition:transform .2s,opacity .2s;
}
.burger span::before{position:absolute;top:-7px;}
.burger span::after{position:absolute;top:7px;}
.burger.open span{background:transparent;}
.burger.open span::before{transform:translateY(7px) rotate(45deg);}
.burger.open span::after{transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{padding:62px 28px 46px;max-width:1180px;margin:0 auto;position:relative;overflow:hidden;}
.hero h1{font-size:clamp(38px,8vw,82px);font-weight:800;letter-spacing:1px;line-height:.96;margin:0 0 18px;text-transform:uppercase;}
.hero h1 .a{color:var(--red);}
.hero p{max-width:640px;font-size:17px;color:var(--muted);margin:0 0 4px;line-height:1.65;}
.hero .rule{height:6px;background:var(--ink);margin:30px 0 0;}
.hero .geo{position:absolute;top:0;right:24px;opacity:.9;pointer-events:none;}
@media(max-width:760px){.hero .geo{display:none;}}

/* Kategorie-Hero */
.cat-hero .kicker{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:12px;}
.cat-hero .kicker .dot{width:16px;height:16px;background:var(--accent);}
.cat-hero h1{color:var(--accent);}
.back{display:inline-block;margin-top:22px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:3px;}
.back:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- Grid + Karten ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px 80px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;}
.card{
  display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);
  text-decoration:none;position:relative;transition:transform .14s,box-shadow .14s;min-height:178px;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink);}
.card .bar{height:8px;width:100%;}
.card .body{padding:18px 18px 16px;display:flex;flex-direction:column;flex:1;}
.card .author{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.card .title{font-size:21px;font-weight:800;line-height:1.12;margin:0 0 6px;letter-spacing:.2px;}
.card .sub{font-size:13.5px;color:var(--muted);line-height:1.4;margin-bottom:14px;}
.card .meta{margin-top:auto;font-size:11.5px;color:var(--muted);letter-spacing:.3px;display:flex;flex-wrap:wrap;gap:4px 12px;}
.card .go{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;}
.card .go .arr{transition:transform .15s;}
.card:hover .go .arr{transform:translateX(4px);}

/* ---------- Sachgebiet-Kacheln (Übersicht) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
.tile{
  display:flex;flex-direction:column;text-decoration:none;background:var(--card);
  border:2px solid var(--ink);transition:transform .14s,box-shadow .14s;min-height:210px;
}
.tile:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink);}
.tile .top{height:96px;border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:center;background:var(--bg);}
.tile .tbody{padding:18px;display:flex;flex-direction:column;flex:1;}
.tile .kick{font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.tile h3{font-size:23px;font-weight:800;margin:0 0 8px;letter-spacing:.3px;}
.tile .cnt{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.5px;}
.tile .go{margin-top:auto;padding-top:14px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;}
.tile .go .arr{transition:transform .15s;}
.tile:hover .go .arr{transform:translateX(4px);}

/* ---------- Footer ---------- */
footer{border-top:3px solid var(--ink);background:var(--ink);color:#e9e6dd;padding:38px 28px 46px;}
footer .fwrap{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px 60px;justify-content:space-between;align-items:flex-start;}
footer .fmark{font-weight:800;letter-spacing:4px;font-size:16px;text-transform:uppercase;}
footer .fmark small{display:block;font-size:10px;letter-spacing:2px;color:#a8a499;margin-top:6px;font-weight:600;}
footer .imp{font-size:12.5px;line-height:1.7;color:#bdb9ae;max-width:420px;}
footer .imp a{color:#fff;}
footer .legal{font-size:11px;color:#8c887e;margin-top:18px;letter-spacing:.4px;}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .topbar{padding:12px 18px;}
  .brand .word{font-size:17px;letter-spacing:3px;}
  .burger{display:flex;}
  .topnav{
    position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;background:var(--bg);
    border-left:3px solid var(--ink);flex-direction:column;gap:0;padding:84px 0 30px;
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;box-shadow:-10px 0 30px rgba(0,0,0,.15);
  }
  .topnav.open{transform:translateX(0);}
  .topnav a{border:none;border-bottom:1px solid var(--hair);padding:16px 26px;font-size:14px;}
  .topnav a.current{background:var(--ink);color:var(--bg);}
  .topnav a:hover{border-color:var(--hair);background:rgba(0,0,0,.04);}
  .hero{padding:40px 20px 30px;}
  .wrap{padding:0 18px 64px;}
  .grid,.tiles{grid-template-columns:1fr;gap:15px;}
  .scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:150;}
  .scrim.show{display:block;}
}
@media(min-width:761px){.scrim{display:none;}}