:root{
  --maxw: 1120px;
  --pad: 28px;
  --pad-lg: 56px;
  --font-sans: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bp-phone: 640px;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  color:#111;
  background:#fff;
  font-family: var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{color:#111; text-decoration: underline; text-underline-offset: 2px;}
a:hover{opacity:.85}

.container{
  width:100%;
  max-width: var(--maxw);
  padding: 0 var(--pad);
  margin: 0 auto var(--pad-lg);
}

/* ================= Header ================= */
/* ================= Header ================= */
.site-header{
  padding: 18px var(--pad) 8px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top:0;
  background:#fff;
  z-index:10;
}
.header-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: auto 1fr auto; /* [Hamburger] [frei] [Brand/Auth] */
  align-items:center;
  gap: 12px;
}

/* Desktop-Navigation (links) */
.primary-nav{
  display:flex; gap:24px; justify-content:flex-start; align-items:center;
  font-family: var(--font-mono);
}
.primary-nav a{ text-decoration: none; border-bottom:1px solid #111; padding-bottom:2px; }
.primary-nav a:hover{ transform: translateY(-1px); }

.brand-right{display:flex; align-items:center; gap:12px}
.brand{
  display:inline-flex; width:136px; height:136px; align-items:center; justify-content:center;
  border:1px solid #111; border-radius:999px; text-decoration:none; font-weight:500;
}
.brand-right .auth{ text-decoration:none; font-family: var(--font-mono); }
.brand-right .sep{ display:inline-block; width:1px; height:18px; background:#e5e5e5; }

/* Hamburger: standardmäßig ausblenden (nur Desktop) */
.hamburger{ display:none; width:40px; height:40px; background:transparent; border:0; padding:10px; cursor:pointer; }
.hamburger span{display:block; height:2px; background:#111; margin:6px 0}

/* ===== Desktop-Regel (>= 641px) */
@media (min-width: 641px){
  .primary-nav{ display:flex; }
  .hamburger{ display:none; }
}

/* ===== Mobile-Regel (<= 640px) */
@media (max-width: 640px){
  .primary-nav{ display:none; }        /* horizontale Navigation ausblenden */
  .hamburger{ display:inline-block; }  /* Hamburger einblenden */

  /* Logo rechtsbündig */
  .brand-right{ justify-self:end; }

  /* Logo kompakter auf kleinen Screens */
  .brand{ width:40px; height:40px; font-size:.65rem; border-width:1px; }
}

/* ====== Mobile Backdrop + Panel (Top-Drop) ====== */
.mobile-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.2);
  opacity:0; visibility:hidden; transition: opacity .2s, visibility .2s; z-index:55;
}
.mobile-backdrop.is-open{ opacity:1; visibility:visible; }

.mobile-panel{
  position: fixed; top:0; left:0; right:0; background:#fff; border-bottom:1px solid #eee;
  transform: translateY(-110%); transition: transform .25s ease, box-shadow .25s ease; z-index:60;
}
.mobile-panel.is-open{ transform: translateY(0); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.mobile-panel-inner{ padding: 14px var(--pad) 18px; }
.mobile-nav{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.mobile-nav a{ text-decoration:none; border-bottom:1px solid #111; padding-bottom:4px; font-size:1.1rem; }

/* Panel nur auf Desktop verstecken */
@media (min-width: 641px){
  .mobile-backdrop, .mobile-panel{ display:none !important; }
}

/* Body-Scroll sperren, wenn Panel offen */
body.no-scroll{ overflow:hidden; }


/* ================= Footer ================= */
.site-footer{
  border-top:1px solid #eee;
  padding: 28px var(--pad);
}
.footer-inner{
  max-width: var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:18px; align-items:center;
}
.footer-links a{margin-left:16px}
.footer-social{ display:flex; gap:14px; font-size:1.1rem }
.footer-social a{ text-decoration:none }

/* ============== Author thumbnail grid ============== */
.author-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px){ .author-grid{ grid-template-columns: repeat(5, 1fr);} }
@media (max-width: 900px){ .author-grid{ grid-template-columns: repeat(4, 1fr);} }
@media (max-width: 700px){ .author-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 520px){ .author-grid{ grid-template-columns: repeat(2, 1fr);} }

.author-item{ display:flex; flex-direction:column; align-items:center; text-decoration:none; gap:6px; text-align:center }
.author-thumb{
  width:100%; aspect-ratio: 1/1; object-fit: cover; display:block;
  background:#f2f2f2; border:1px solid #eaeaea; border-radius: 6px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.author-item:hover .author-thumb{ transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.06); }
.author-thumb.placeholder{
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:1.25rem; color:#666;
}
.author-name{
  text-decoration:none;
  text-align:center;
  font-size:.95rem;
  line-height:1.3;
  min-height: calc(1.3em * 2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:#111;
}

/* ============== Title thumbnails grid ============== */
.title-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px){ .title-grid{ grid-template-columns: repeat(5, 1fr);} }
@media (max-width: 900px){ .title-grid{ grid-template-columns: repeat(4, 1fr);} }
@media (max-width: 700px){ .title-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 520px){ .title-grid{ grid-template-columns: repeat(2, 1fr);} }

.title-item{ display:flex; flex-direction:column; align-items:center; text-decoration:none; gap:6px; text-align:center }
.title-thumb.natural{
  width:100%;
  height:auto;
  object-fit: contain;
  background:#fff;
  border:1px solid #eaeaea;
  border-radius: 6px;
  display:block;
}
.title-thumb.placeholder{
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:1.1rem; color:#666;
  width:100%; aspect-ratio: 2/3; background:#f5f5f5; border:1px solid #eaeaea; border-radius:6px;
}
.title-name{
  text-decoration:none; color:#111;
  font-size:.95rem; line-height:1.3;
  min-height: calc(1.3em * 2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.title-item:hover .title-thumb.natural{
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* ================= Filter-Form ================= */
.filter-form { display: grid; gap: 12px; margin-bottom: 20px; }
.filter-form fieldset { border: 1px solid #ddd; padding: 10px; }
.filter-form legend { font-weight: bold; }
.filter-form label { display: block; margin-bottom: 4px; }

/* ================= Author Detail ================= */
.author-detail{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  margin-bottom:30px;
}
.author-photo{ flex: 0 0 500px; max-width:100%; }
.author-photo img{ width: 500px !important; max-width: 100%; height: auto !important; display:block; }
.author-info{ flex:1; min-width:280px; }
.author-bio{ margin-top:15px }

/* Bücherliste unter dem Autor */
.grid{ display:grid; gap:20px }
.grid-4{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tile{ text-align:center }
.tile-media{ display:block; width:100%; background:#f8f8f8; padding:5px; }
.tile-media img{ width:100% !important; height:auto !important; display:block; }
.author-books .tile-media{ display:flex; justify-content:center; }
.author-books .tile-media img{ width:300px !important; max-width:100%; height:auto !important; margin:0 auto; }
.author-books .cover-placeholder{ width:300px !important; max-width:100%; aspect-ratio: 2 / 3; background:#ddd; display:flex; align-items:center; justify-content:center; margin:0 auto; }

/* ================= Title Detail ================= */
.title-detail{ display:flex; flex-wrap:wrap; gap:30px; margin-bottom:30px; }
.title-cover{ flex: 0 0 500px; max-width:100%; }
.title-cover img{ width: 500px !important; max-width:100%; height: auto !important; display:block; }
.title-info{ flex:1; min-width:280px; }
.title-description{ margin-top:15px }

/* ================= Metadaten-Tabelle ================= */
.meta-table dl { display:grid; grid-template-columns: 1fr; gap:8px; margin-top:14px; }
.meta-table dt { font-weight:600; }
.meta-table dd { margin:0; color:#222; }
.meta-table div { display:grid; grid-template-columns: 160px 1fr; gap:8px; }
@media (max-width: 520px){ .meta-table div { grid-template-columns: 120px 1fr; } }

/* ================= Responsive Stack ================= */
@media (max-width: 900px){
  .author-detail,
  .title-detail{ flex-direction: column; }
  .author-photo,
  .title-cover{ flex: none; max-width: 100%; }
}

.title-grid-fixed { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.title-item-fixed { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.title-thumb-fixed { width: 180px; height: auto; background: #f5f5f5; border: 1px solid #eaeaea; border-radius: 6px; display: block; transition: transform .12s ease, box-shadow .12s ease; }
.title-item-fixed:hover .title-thumb-fixed { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,.06); }
.title-name-fixed { font-size: .95rem; line-height: 1.3; color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 180px; }

/* ==== Auth styles ==== */
.auth-wrap{ display:grid; place-items:center; min-height:50vh; }
.auth-card{ width:100%; max-width:420px; border:1px solid #eee; border-radius:10px; padding:22px 22px 18px; box-shadow: 0 10px 24px rgba(0,0,0,.04); background:#fff; }
.auth-title{ font-size:1.6rem; margin:0 0 14px; font-weight:500; }
.auth-alert{ background:#fff5f5; border:1px solid #ffd6d6; color:#9b2020; padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.auth-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.auth-field label{ font-family: var(--font-mono); font-size:.9rem; }
.auth-field input{ border:1px solid #ddd; border-radius:8px; padding:10px 12px; font-size:1rem; }
.auth-field input:focus{ outline:none; border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.auth-actions{ display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top:6px; }
.btn-primary{ background:#111; color:#fff; border:1px solid #111; border-radius:8px; padding:10px 14px; cursor:pointer; font-family: var(--font-mono); transition: background .2s ease, transform .1s ease; }
.btn-primary:hover{ background:#333; transform: translateY(-1px); }
.auth-link{ text-decoration: underline; text-underline-offset: 2px; }
.auth-note{ color:#666; font-size:.9rem; margin-top:14px; }

.voucher-box{
  border:1px solid #eee; border-radius:10px; padding:16px 18px; max-width:520px;
  box-shadow:0 10px 24px rgba(0,0,0,.04); background:#fff;
}