/* ===========================
   Basis & Variablen
=========================== */
*{box-sizing:border-box}
html{
  --ink:#111;
  --bg:#fff;
  --line:#e5e7eb;
  --muted:#6b7280;
  --ghost:#f9fafb;
  --accent:#ff6a00;      /* Standard-Button */
  --accent-ink:#fff;
  --brand:#002c6d;       /* Blau für aktive Nav / Back-Button */
  --radius:14px;
  --shadow:0 6px 20px rgba(0,0,0,.08);
}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--ink);background:var(--bg)
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1100px,92vw);margin-inline:auto}

/* ===========================
   Header / Navigation (Desktop)
=========================== */
.site-header{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:#fff; z-index:10;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:24px}
.brand span{font-weight:700; letter-spacing:.2px; font-size:1.25rem}

.nav{display:flex; align-items:center; gap:14px}
.nav a{
  padding:6px 8px; border-radius:0; text-decoration:none;
  font-size:.95rem; line-height:1; border-bottom:3px solid transparent;
}
.nav a[aria-current="page"]{ border-bottom:3px solid var(--brand); background:none }

/* optional: Header schrumpfen beim Scrollen */
.site-header.shrink .wrap{padding:4px 0}
.site-header.shrink .brand img{height:20px}
.site-header.shrink .nav a{padding:4px 6px}

/* ===========================
   Dropdown "Info" (details/summary)
=========================== */
.dropdown{ position:relative }             /* <details> */
.dropbtn{                                  /* <summary> */
  list-style:none; cursor:pointer; padding:6px 8px; margin:0;
  border:0; background:none; font:inherit; line-height:1;
  border-bottom:3px solid transparent;
}
.dropbtn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
.dropbtn[aria-current="page"]{ border-bottom-color:var(--brand) }

.dropdown[open] .dropbtn{ border-bottom-color:var(--brand) }

.dropdown-menu{                            /* Panel */
  position:absolute; top:100%; right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:6px 0; z-index:20;
}
.dropdown-menu a{
  display:block; padding:10px 14px; text-decoration:none;
  border-bottom:1px solid var(--line);
}
.dropdown-menu a:last-child{ border-bottom:none }
.dropdown-menu a:hover{ background:var(--ghost) }

/* ===========================
   Hero
=========================== */
.hero{padding:40px 0 24px}
.hero h1{font-size:clamp(32px,5vw,46px);margin:0 0 6px}
.hero p{margin:.4rem 0}
.hero .cta-row{display:flex;gap:10px;margin-top:20px}


/* ===========================
   Karten / Bücherliste
=========================== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:22px 0 10px}
.card{border:2px solid var(--accent);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.cover{display:flex;align-items:center;justify-content:center;background:#f6f7f9;height:280px;padding:12px;} /* einheitliche Höhe */
.cover img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.card-body{padding:14px;display:flex;flex-direction:column;min-height:240px}
.card .title{font-size:1.1rem;margin:.2rem 0}
.card .meta{color:var(--muted);font-size:.95rem;margin:.1rem 0 .4rem}
.card .desc{margin:0 0 .6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.price{font-weight:700}

/* ===========================
   Buch-Detail
=========================== */
.book{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:26px 0}
.book .media{align-self:start}
.book .info h1{margin-top:0}
.book .meta{color:var(--muted)}
.details{padding-left:18px}
.details li{margin:.2rem 0}
.price{margin:.5rem 0 0}

/* Aktionen oberhalb Bestellung (Leseprobe etc.) */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}

/* Hinweise / Notizboxen */
.note{background:var(--ghost);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:14px 0}

/* ===========================
   Formulare
=========================== */
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.form .row.full{grid-template-columns:1fr}
.form label{display:flex;flex-direction:column;gap:6px}
.form input,
.form textarea{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  font-family:inherit;
}
.form textarea{resize:vertical;width:100%}
.form button.btn{margin-top:10px}
.small{font-size:.92rem}
.muted{color:var(--muted)}

/* ===========================
   Warenkorb
=========================== */
.cart-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cart-table th,.cart-table td{padding:10px;border-bottom:1px solid var(--line)}
.cart-table thead th{background:var(--ghost);text-align:center}
.cart-table td:first-child{width:40%}
.cart-table input.q{width:48px;text-align:center;border:1px solid var(--line);border-radius:8px;padding:6px}
.cart-table button.qty,
.cart-table button.remove{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.cart-table button.remove{padding:6px 8px}

.cart-sum{margin:14px 0;display:grid;gap:6px;max-width:460px;margin-left:auto}
.cart-sum div{display:flex;align-items:center;justify-content:space-between}
.cart-sum .total{font-size:1.1rem}

/* ===========================
   Prosa / generische Inhalte
=========================== */
.prose{padding:26px 0}

/* ===========================
   Footer
=========================== */
.site-footer{border-top:1px solid var(--line);margin-top:24px}
.site-footer .foot{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.foot-nav{display:flex;gap:14px}

/* ===========================
   Responsive
=========================== */
@media (max-width: 880px){
  .book{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .hero .cta-row{flex-direction:column;align-items:flex-start}
}

/* ===========================
   Smartphone-Header: Logo oben, Menü mittig
   (ohne Hamburger, Info-Dropdown touchfreundlich)
=========================== */
@media (max-width: 820px){
  .site-header .wrap{
    display:flex; flex-direction:column; align-items:center;
    gap:10px; padding:10px 0;
  }
  .brand{ gap:8px }
  .brand img{ height:22px }
  .brand span{ font-size:1.1rem }

  .nav{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:10px 12px;
  }
  .nav a, .dropbtn{
    padding:6px 6px; font-size:.95rem; border-bottom-width:2px;
  }

  /* Info-Dropdown auf Mobile als Block unter Summary */
  .dropdown{ width:auto; display:flex; flex-direction:column; align-items:center }
  .dropdown-menu{
    position:static; min-width:unset; width:auto;
    border:1px solid var(--line); border-radius:10px; margin-top:4px;
    box-shadow:none;
  }
  .dropdown-menu a{ text-align:center }
}
/* === Einheitliche Buttons (global niedrig + mit Rand) === */
/* Grundhöhe vereinheitlichen */
.btn{
  padding:8px 12px;                /* niedriger */
  border:1px solid var(--line);    /* überall feiner Rand */
  border-radius:10px;
  line-height:1.1;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  text-decoration:none; font-weight:700;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:var(--shadow);
  cursor:pointer;
  vertical-align:middle;
}
.btn:hover{ opacity:.95 }

/* Varianten behalten Rand, aber farblich passend */
.btn.back{ background:var(--brand); color:#fff; border-color:var(--brand) }
.btn.ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none }

/* Klein-Variante bleibt schlank */
.btn.small{ padding:6px 10px; border-radius:10px; font-weight:600 }

/* Deaktiviert/Klicktot wie gehabt */
.btn.noclick{ pointer-events:none; cursor:default }
.btn:disabled{ opacity:.6; cursor:not-allowed }

/* === Ausnahme: Buttons in Buch-Karten (Index) hoch + randlos === */
.card .btn{
  padding:12px 14px;               /* höher */
  border:none;                      /* randlos wie gewünscht */
  box-shadow:var(--shadow);
}
/* Ghost in Karten ebenfalls randlos */
.card .btn.ghost{ border:none }

/* Optional: in den Karten den „Kaufen/Details“-Look etwas kräftiger */
.card .price-row .btn{ font-weight:700 }

/* ==== tde: Vollbreites Band hinter dem Brand, +25% oben/unten ==== */
html{
  --band-bg:#1a243d;          /* CMYK M40/C60/Y0/K80 ≈ #1a243d */
  --band-text-white:#ffffff;
  --band-text-gray:#d1d5db;   /* für "editions" */
  --brand-size:clamp(1.1rem, 2.5vw, 1.5rem);
}

/* Wrap darf umbrechen: 1) Brand im Band  2) Nav darunter */
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

/* Das Band: volle Breite, 25% der Schriftgröße als Innenabstand oben/unten */
.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:var(--band-bg);
  padding-block:0.25em;            /* = +25% oben & unten */
  text-decoration:none;            /* Link-Styling neutralisieren */
}

/* Schrift im Band: weiß (Basis) */
.site-header .brand span{
  font-size:var(--brand-size);
  font-weight:800;
  color:var(--band-text-white);
}

/* Optional: Logo invertieren, falls dein SVG dunkel ist */
.site-header .brand img{
  height:24px;
  /* falls dein Logo bereits hell ist, diese Zeile entfernen */
  filter: invert(1) brightness(1);
}

/* Nav bleibt darunter */
.site-header .nav{
  width:100%;
  display:flex;
  gap:18px;
  margin-top:8px;
}

/* Für zweifarbige Wortmarke (nur wenn du "editions" umspannt hast) */
.site-header .brand span .editions{
  color:var(--band-text-gray);
  font-weight:600;
}
/* === Nach-oben-Button (Orange) === */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);   /* dein Orange */
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: none; /* Startzustand: unsichtbar */
  
  /* Zentrierung des Pfeils */
  align-items: center;
  justify-content: center;
}
.to-top:hover {
  filter: brightness(1.1);
}
/* Autoren-/Künstler-Karten */
.grid.people .cover { height: 220px; }           /* etwas niedriger als Buchcover */
.person .title { font-size: 1.1rem; margin: 0 0 4px; }
.person .role { color: var(--muted); margin: 0 0 10px; }
.person .works { margin: 8px 0 14px; padding-left: 18px; }
.person .works li { margin: 2px 0; }

.person .actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Ghost-Button-Variante passend zu deinem System */
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.ghost:hover { opacity: .92; }

/* Mikro-Feinschliff für den Prosa-Text im Head-Bereich */
.prose { max-width: 70ch; }

/* Bücher-anzeigen-Buttons vorerst verstecken */
.btn.ghost {
  display: none;
}