
/* =====================================================================
   Buecherseite, Stil "Label-Katalog", wie die Musikseite.
   Dort die Plattenhuelle, hier der Buchruecken: Cover, Bandnummer,
   Titel, Daten, Preis. Eine Schrift, drei Farben, keine Kaesten.

   Leser sind zwischen 45 und 85 Jahre alt: Grundschrift 18 px,
   hoher Kontrast, nichts unter 0.85 rem, grosse Klickflaechen.

   Zwei feste Regeln:
   1. Das Tuerkis gehoert dem Verkauf. Preis und Kaufen-Knopf, sonst
      nirgends. Darum sieht man es.
   2. Die Sterne sind die einzige Ausnahme davon. Gold, weil jeder
      sofort weiss was gemeint ist, und weil sie nichts verkaufen,
      sondern etwas melden.

   WICHTIG: Kein <header>, <footer> oder <nav> innerhalb der Seite.
   Die globale style.css klebt jedes dieser Elemente mit position
   sticky oben fest und legt es ueber das Aufklappmenue im Kopf.
   ===================================================================== */

/* Die alte Regel "main{padding:0}" ist am 23.09.2026 entfallen.
   Der Seitenverlauf soll rundherum sichtbar bleiben. */
.buecher-page{
  --grund:transparent;
  --text:var(--tf-text,#FFFFFF);
  --leise:var(--tf-leise,#B6C4D4);
  --linie:var(--tf-linie,rgba(255,255,255,.12));
  --kasse:var(--tf-kasse,#00FFFF);
  --stern:var(--tf-gold,#FFD700);
  font-family:var(--tf-schrift,'Poppins',Arial,sans-serif);
  color:var(--text);
  background:var(--grund);
  font-size:18px;
  line-height:1.65;
  text-align:left;
  letter-spacing:normal;
}
.buecher-page *{letter-spacing:normal;box-sizing:border-box;text-align:inherit}
.buecher-page{text-align:left}
.buecher-page h1,.buecher-page h2,.buecher-page h3,.buecher-page h4{
  font-family:inherit !important;text-transform:none !important;text-shadow:none !important;
  animation:none !important;background:none !important;
  -webkit-text-fill-color:currentColor !important;letter-spacing:-.01em !important;
}
/* Sicherheitsnetz, falls doch ein Kopfelement hineingeraet */
.buecher-page header,.buecher-page footer,.buecher-page nav{
  position:static !important;z-index:auto !important;top:auto !important;
}

/* ====================== Aufmacher ====================== */
.featured-hero{
  position:relative;width:100%;
  min-height:clamp(420px,58vh,620px);
  display:flex;align-items:flex-end;
  border-bottom:1px solid var(--linie);
  overflow:hidden;
}
/* Das Hintergrundbild wird gedaempft, so wie in der alten Fassung.
   Ohne das steht die Ueberschrift auf einem Gesicht, und Aufkleber
   im Bild ("Band 10 der MAX-SAGA") draengeln sich in den Text. */
.featured-hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  filter:brightness(.38) saturate(1.15);
}
/* Zwei Schleier uebereinander: einer von links, damit der Text traegt,
   einer nach unten, damit die Kante zum Regal nicht abgehackt wirkt. */
.featured-hero-gradient{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,15,.35) 0%,rgba(11,11,15,0) 30%,rgba(11,11,15,.85) 88%,var(--grund) 100%),
    linear-gradient(90deg,rgba(11,11,15,.9) 0%,rgba(11,11,15,.6) 55%,rgba(11,11,15,.35) 100%);
}
/* Die Funken aus der alten Fassung bleiben im Markup, sind aber aus */
.featured-hero-particles{display:none !important}

.featured-hero-inner{
  position:relative;z-index:2;
  /* Dieselbe Breite wie das Regal darunter, damit Cover, Ueberschrift,
     "Romane" und die Buchkarten auf einer Flucht stehen. Begrenzt wird
     der ganze Block, nicht der Text darin, sonst haengt rechts Leere. */
  width:100%;max-width:1040px;margin:0 auto;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(16px,4vw,32px);
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3rem);align-items:center;
}
.featured-hero-cover img{
  width:100%;height:auto;display:block;
  border:1px solid var(--linie);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));
}
.featured-hero-info{min-width:0}
.featured-hero-badge{
  display:inline-block;margin:0 0 1rem;
  padding:.3rem .7rem;border-radius:0 !important;
  font-size:.74rem;font-weight:600;
  letter-spacing:.14em !important;text-transform:uppercase;
}
.featured-hero-info h2{
  margin:0;font-size:clamp(2.1rem,5vw,3.6rem);font-weight:500;line-height:1.05;
}
.featured-hero-teaser{
  margin:1.1rem 0 0;font-size:1.08rem;color:#DCE6F2;line-height:1.65;
}
.featured-hero-features{
  list-style:none;margin:1.4rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  font-size:1rem;color:var(--leise);
}
.featured-hero-features li{position:relative;padding-left:1.1rem}
.featured-hero-features li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:.55rem;height:1px;background:var(--leise);
}
.featured-hero-cta{margin:1.3rem 0 0;font-size:1.05rem;color:var(--text)}
.featured-hero-buttons{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.hero-btn-primary{
  font-size:1.02rem;font-weight:500;text-decoration:none;
  background:var(--kasse);color:#07131A;border:1px solid var(--kasse);border-radius:0;
  padding:.68rem 1.8rem;transition:background .2s,color .2s;
}
.hero-btn-primary:hover{background:transparent;color:var(--kasse)}
.hero-btn-secondary{
  font-size:1.02rem;text-decoration:none;
  background:transparent;color:var(--text);
  border:1px solid var(--linie);border-radius:0;padding:.68rem 1.6rem;
  transition:border-color .2s;
}
.hero-btn-secondary:hover{border-color:var(--text)}

@media (max-width:820px){
  .featured-hero{min-height:0;align-items:stretch}
  .featured-hero-inner{grid-template-columns:1fr;gap:1.8rem;align-items:start}
  .featured-hero-cover{max-width:180px}
  .featured-hero-gradient{background:linear-gradient(180deg,rgba(11,11,15,.55) 0%,rgba(11,11,15,.95) 55%,rgba(11,11,15,.98) 100%)}
}

/* ====================== Abschnittstitel ====================== */
.buecher-page .section-heading{
  max-width:1040px;margin:clamp(2.6rem,5vw,4rem) auto clamp(1.4rem,3vw,2rem);
  padding:0 clamp(16px,4vw,32px) 1.2rem;
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:500;line-height:1.1;
  color:var(--text);text-align:left;
}
.buecher-page .section-heading::after{
  content:"";display:block;height:1px;background:var(--linie);
  margin-top:1.2rem;
}

/* ====================== Das Regal ====================== */
/* Eine Spalte, wie in der alten Fassung. Ein Buch ist kein Song,
   es braucht Breite fuer Titel, Daten und die Rezension darunter. */
.books-grid{
  max-width:1040px;margin:0 auto;
  padding:0 clamp(16px,4vw,32px);
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.4rem,3vw,2rem);
}

/* ---------- Ein Eintrag ---------- */
/* Die Karte kommt aus der alten Fassung zurueck: leicht aufgehellter
   Grund, tuerkiser Rahmen, runde Ecken, Leuchten beim Ueberfahren.
   Neu ist nur, was darin steht: Schrift, Ordnung, Bandnummer. */
.book-tile,.artbook-tile{
  position:relative;min-width:0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(0,255,255,.18);
  border-radius:12px;
  box-shadow:none;
  padding:clamp(1.3rem,3vw,1.9rem);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.book-tile:hover,.artbook-tile:hover{
  border-color:rgba(0,255,255,.5);
  box-shadow:0 4px 24px rgba(0,255,255,.12);
}

/* Die Bandnummer ist die Katalognummer der Buecher, genau wie MX-014
   bei der Musik. Sie sagt in zwei Woertern, dass es eine Reihe gibt. */
.band-nr{
  margin:0 0 1rem;font-size:.78rem;font-weight:600;
  letter-spacing:.16em !important;text-transform:uppercase;color:var(--leise);
  font-variant-numeric:tabular-nums;
}

/* Sprachwahl oben rechts */
.lang-flag-group{display:flex;gap:.5rem;position:absolute;top:clamp(1.3rem,3vw,1.9rem);right:clamp(1.3rem,3vw,1.9rem);z-index:2}
.lang-flag{position:absolute;top:clamp(1.3rem,3vw,1.9rem);right:clamp(1.3rem,3vw,1.9rem);font-size:1.05rem;opacity:.75}
.lang-flag .fi,.lang-flag-btn .fi{
  display:inline-block;width:1.5em;height:1.1em;border-radius:0;vertical-align:middle;
}
.lang-flag-btn{
  font:inherit;font-size:1.05rem;line-height:1;
  background:transparent;border:0;border-bottom:2px solid transparent;
  border-radius:0;padding:.15rem .1rem;cursor:pointer;opacity:.5;
  transition:opacity .2s,border-color .2s;
}
.lang-flag-btn:hover{opacity:.85}
.lang-flag-btn.active{opacity:1;border-bottom-color:var(--text)}
.lang-flag-btn:focus-visible{outline:2px solid var(--kasse);outline-offset:3px}

/* Sprachtafeln */
.ab-lang-panel{display:none}
.ab-lang-panel.active{display:block}
.ab-lang-tabs{display:flex;gap:1.2rem;margin-bottom:1.2rem}
.ab-lang-tab{
  font:inherit;font-size:.95rem;background:none;border:0;border-bottom:2px solid transparent;
  padding:.2rem 0;cursor:pointer;color:var(--leise);transition:color .2s,border-color .2s;
}
.ab-lang-tab.active{color:var(--text);border-bottom-color:var(--text)}

/* ---------- Cover und Daten ---------- */
.book-top{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);align-items:start;
}
.book-cover{min-width:0}
.book-cover img{
  width:100%;height:auto;display:block;
  border:0;border-radius:6px;background:#131A26;
  box-shadow:0 6px 24px rgba(0,255,255,.18);
}
.book-meta{min-width:0}
.book-title{
  margin:0;font-size:1.35rem;font-weight:500;line-height:1.3;color:var(--text);
}
.book-author{
  margin:.35rem 0 0;font-size:.82rem;font-weight:600;
  letter-spacing:.14em !important;text-transform:uppercase;color:var(--leise);
}

/* Die Datenzeile. Wie das Kleingedruckte auf einer Plattenhuelle:
   Beschriftung klein und leise, Wert daneben in Normalschrift. */
.meta-grid{
  margin-top:1.1rem;display:grid;gap:.5rem 1.4rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:560px){
  /* Auf dem Handy steht das Cover ueber den Daten, sonst quetscht sich
     der Titel in eine Spalte von zwei Woertern Breite. */
  .book-top{grid-template-columns:1fr;gap:1.2rem}
  .book-cover{max-width:150px}
  .meta-grid{grid-template-columns:1fr}
}
.meta-item{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.meta-label{
  font-size:.72rem;font-weight:600;
  letter-spacing:.14em !important;text-transform:uppercase;color:#8195A9;
}
.meta-value{
  font-size:.98rem;color:var(--text);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.meta-value.price{
  font-size:1.6rem;font-weight:500;color:var(--kasse);line-height:1.2;
}

.book-description{
  margin-top:1.3rem;font-size:1rem;color:#B6C4D4;line-height:1.7;
}

/* ---------- Kasse ---------- */
.tile-footer{
  display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;
  margin-top:1.4rem;
}
.btn-buy{
  font:inherit;font-size:1rem;font-weight:500;text-decoration:none;
  border-radius:0;padding:.62rem 1.5rem;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-buy.in-stock{
  background:var(--kasse);color:#07131A;border:1px solid var(--kasse);
}
.btn-buy.in-stock:hover{background:transparent;color:var(--kasse)}
.btn-buy.external{
  background:transparent;color:var(--text);
  border:1px solid var(--linie);
}
.btn-buy.external:hover{border-color:var(--text)}
.btn-buy:focus-visible{outline:2px solid var(--kasse);outline-offset:3px}

/* ====================== Rezensionen ====================== */
.reviews-section,.review-section{
  margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--linie);
}
.reviews-top-row{
  display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;
  align-items:center;justify-content:space-between;
}
.reviews-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.stars,.review-stars,.stars-display,.avg-stars{color:var(--stern);letter-spacing:.06em !important}
.stars-empty{color:#8195A9;letter-spacing:.06em !important}
.rating-number{font-size:1.05rem;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.rating-count{font-size:.95rem;color:var(--leise)}
.btn-rate{
  font:inherit;font-size:.98rem;background:none;border:0;
  border-bottom:1px solid var(--linie);border-radius:0;
  padding:.4rem 0;cursor:pointer;color:var(--text);
  transition:border-color .2s;
}
.btn-rate:hover{border-bottom-color:var(--text)}
.btn-rate:focus-visible{outline:2px solid var(--kasse);outline-offset:3px}

.review-card{
  margin-top:1.2rem;padding:1.1rem 0 0;border-top:1px solid var(--linie);
  background:transparent;border-radius:0;box-shadow:none;
}
.review-header{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.review-avatar{
  width:34px;height:34px;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linie);border-radius:0;
  background:transparent;color:var(--leise);
  font-size:.95rem;font-weight:500;
}
.review-name{font-size:.98rem;color:var(--text)}
.review-date{font-size:.85rem;color:#8195A9;font-variant-numeric:tabular-nums}
.review-header .review-stars{margin-left:auto}
.review-text{
  margin-top:.8rem;font-size:1rem;color:#B6C4D4;line-height:1.7;
}
.no-reviews-hint{margin-top:1rem;font-size:.98rem;color:var(--leise)}
.reviews-more{
  font:inherit;font-size:.98rem;background:none;border:0;
  border-bottom:1px solid var(--linie);border-radius:0;
  padding:.4rem 0;cursor:pointer;color:var(--text);transition:border-color .2s;
}
.reviews-more:hover{border-bottom-color:var(--text)}

/* Uebersetzen */
.translate-wrap{position:relative;margin-top:.8rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.translate-btn,.translate-original{
  font:inherit;font-size:.88rem;background:none;border:0;
  border-bottom:1px solid var(--linie);border-radius:0;
  padding:.25rem 0;cursor:pointer;color:var(--leise);transition:color .2s,border-color .2s;
}
.translate-btn:hover,.translate-original:hover{color:var(--text);border-bottom-color:var(--text)}
.translate-original{display:none}
.translate-dropdown{
  display:none;position:absolute;top:100%;left:0;z-index:20;
  margin-top:.4rem;min-width:190px;max-height:280px;overflow:auto;
  background:#131A26;border:1px solid var(--linie);border-radius:0;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.translate-dropdown.open{display:block}
.translate-dropdown button{
  display:block;width:100%;text-align:left;font:inherit;font-size:.95rem;
  background:none;border:0;border-radius:0;padding:.55rem .9rem;cursor:pointer;color:var(--text);
}
.translate-dropdown button:hover{background:#1F1F27;color:var(--kasse)}

/* ====================== Fenster ====================== */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;display:none;
  align-items:center;justify-content:center;padding:1rem;
  background:rgba(6,6,9,.9);
}
/* Das JavaScript schaltet die Klasse 'open'. 'active' bleibt als
   zweiter Name stehen, falls irgendwo noch der alte Weg genutzt wird. */
.modal-overlay.open,.modal-overlay.active{display:flex}
.modal{
  position:relative;width:100%;max-width:640px;max-height:88vh;overflow:auto;
  background:#131A26;color:var(--text);
  border:1px solid var(--linie);border-radius:0;box-shadow:0 30px 70px rgba(0,0,0,.7);
  padding:clamp(1.6rem,4vw,2.6rem);
}
.modal h2,.modal h3{margin:0 0 .8rem;font-weight:500;line-height:1.25}
.modal p{line-height:1.7}
.modal-close{
  position:absolute;top:.6rem;right:.6rem;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:1.5rem;line-height:1;
  background:transparent;border:1px solid var(--linie);border-radius:0;
  color:var(--text);cursor:pointer;transition:border-color .2s,color .2s;
}
.modal-close:hover{border-color:var(--text);color:var(--kasse)}
.modal-book-ref{font-size:.95rem;color:var(--leise);margin:0 0 1.2rem}
.modal-loading,.modal-success,.modal-already-reviewed,.modal-login-prompt{text-align:left}
.spinner{
  width:26px;height:26px;margin:1.4rem 0;
  border:2px solid var(--linie);border-top-color:var(--kasse);border-radius:50%;
  animation:buecherDreh .8s linear infinite;
}
@keyframes buecherDreh{to{transform:rotate(360deg)}}
.success-icon,.warning-icon,.info-icon{font-size:1.9rem;line-height:1;margin-bottom:.7rem}

/* Sternwahl im Bewertungsfenster */
.star-picker{display:flex;gap:.5rem;margin:1rem 0 .4rem}
.star-picker .star{
  font-size:2.3rem;line-height:1;cursor:pointer;color:#8195A9;
  transition:color .15s,transform .15s;background:none;border:0;padding:0;
}
.star-picker .star.active,.star-picker .star:hover{color:var(--stern)}
.star-picker .star:hover{transform:scale(1.08)}
.star-label,.star-hint{font-size:.95rem;color:var(--leise);min-height:1.5em}
.stars-given-text{font-size:1rem;color:var(--text);margin:.6rem 0}
.optional-label{font-size:.9rem;color:var(--leise)}
.char-hint{font-size:.85rem;color:#8195A9;margin-top:.4rem}

.modal textarea,.modal input[type="text"]{
  width:100%;font:inherit;font-size:1rem;color:var(--text);
  background:transparent;border:1px solid var(--linie);border-radius:0;
  padding:.7rem .8rem;margin-top:.6rem;resize:vertical;
}
.modal textarea:focus,.modal input[type="text"]:focus{outline:none;border-color:var(--kasse)}

.btn-submit,.btn-login{
  font:inherit;font-size:1rem;font-weight:500;
  background:var(--kasse);color:#07131A;border:1px solid var(--kasse);border-radius:0;
  padding:.62rem 1.6rem;cursor:pointer;margin-top:1.1rem;
  transition:background .2s,color .2s;text-decoration:none;display:inline-block;
}
.btn-submit:hover,.btn-login:hover{background:transparent;color:var(--kasse)}
.btn-submit:disabled{opacity:.5;cursor:default}
.btn-stay,.btn-load-more{
  font:inherit;font-size:1rem;background:transparent;color:var(--text);
  border:1px solid var(--linie);border-radius:0;padding:.62rem 1.6rem;cursor:pointer;
  transition:border-color .2s;text-decoration:none;display:inline-block;
}
.btn-stay:hover,.btn-load-more:hover{border-color:var(--text)}

/* Fenster: Weiterleitung nach aussen */
.external-modal-body{text-align:left}
.external-modal-buttons{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}
.external-affiliate-hint{
  margin-top:1.2rem;padding:.8rem .9rem;
  border:1px solid var(--linie);
  font-size:.88rem;color:var(--leise);line-height:1.6;font-style:italic;
}

/* Fenster: alle Rezensionen */
.reviews-modal-box{max-width:760px}
.reviews-modal-summary{
  display:flex;flex-wrap:wrap;gap:1.6rem;align-items:flex-start;
  padding-bottom:1.3rem;margin-bottom:1.3rem;border-bottom:1px solid var(--linie);
}
.reviews-modal-avg-box{min-width:120px}
.avg-big{font-size:2.6rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.avg-based{font-size:.9rem;color:var(--leise);margin-top:.35rem}
.reviews-modal-bars{flex:1 1 240px;min-width:0;display:grid;gap:.35rem}
.reviews-modal-bars .bar{
  display:grid;grid-template-columns:2.6rem 1fr 2.6rem;gap:.6rem;align-items:center;
  font-size:.88rem;color:var(--leise);font-variant-numeric:tabular-nums;
}
.reviews-modal-bars .bar .track{height:6px;background:#26262F}
.reviews-modal-bars .bar .fill{height:100%;background:var(--stern)}
.reviews-modal-list{display:grid;gap:1.3rem}
.review-display{padding-top:1.1rem;border-top:1px solid var(--linie)}
.review-display-label{font-size:.82rem;color:#8195A9}
.review-display-text{font-size:1rem;color:#B6C4D4;line-height:1.7}
.divider{height:1px;background:var(--linie);border:0;margin:1.2rem 0}

@media (prefers-reduced-motion:reduce){
  .buecher-page *{transition:none !important;animation:none !important}
}

/* =====================================================================
   Am 23.09.2026 auf die Tafel umgestellt, Grundlage assets/css/tafel.css.
   Der blaue Seitenverlauf bleibt sichtbar, der Inhalt sitzt auf einer
   dunklen Tafel, Poppins als Schrift, Farbe ist erlaubt. Der Aufbau
   der Seite ist unveraendert geblieben.
   ===================================================================== */
main.buecher-main{
  padding:clamp(10px,2vw,22px) clamp(10px,2vw,20px) clamp(28px,4vw,48px) !important;
  align-items:stretch !important;max-width:100% !important;text-align:left !important;
}
.buecher-page{
  /* box-sizing ist hier noetig: ohne das rechnet der Browser das
     Polster auf die 100 Prozent Breite drauf und die Tafel laeuft
     rechts aus dem Fenster. Gefunden am 23.09.2026. */
  box-sizing:border-box;
  width:100%;max-width:1280px;margin:0 auto;
  padding:clamp(26px,4vw,48px) clamp(18px,3vw,44px) clamp(30px,5vw,52px);
  background:linear-gradient(180deg, var(--tf-tafel-1,rgba(10,16,28,.72)) 0%, var(--tf-tafel-2,rgba(6,10,18,.82)) 100%);
  border:1px solid var(--tf-rand,rgba(0,255,255,.16));
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  font-size:17px;line-height:1.7;
}
@media (max-width:600px){
  .buecher-page{padding:22px 16px 28px;border-radius:16px}
}
