/* Main-Padding entfernen — Sections gehen Edge-to-Edge */
/* Die alte Regel "main{padding:0}" ist am 23.09.2026 entfallen,
   der Seitenverlauf soll rundherum sichtbar bleiben. */
/* ===== LAYOUT ===== */
/* Breite und Polster kommen jetzt von der Tafel weiter unten. */
.sb-wrap { margin: 0 auto; }
.sb-back { display: inline-block; color: #00FFFF; text-decoration: none; font-size: 13px; margin-bottom: 24px; transition: opacity 0.2s; }
.sb-back:hover { opacity: 0.7; text-decoration: none; }

/* ===== SEKTION 1: PRODUKT-HEADER ===== */
.sb-grid { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; }
/* Cover */
.sb-cover-wrap { position: relative; flex-shrink: 0; }
.sb-cover-img {
  width: 150px; height: 212px; border-radius: 6px; object-fit: cover; display: block;
  filter: drop-shadow(0 8px 20px rgba(0,255,255,.25));
  animation: bookFloat 4s ease-in-out infinite;
}
@keyframes bookFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}
.sb-badge {
  position: absolute; top: -8px; right: -8px;
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 14px;
  text-transform: uppercase; letter-spacing: 1px; z-index: 2;
}
.sb-badge-neu { background: #f59e0b; color: #000; }
.sb-badge-bestseller { background: #00c853; color: #fff; box-shadow: 0 0 8px rgba(0,200,83,.6); }
/* Info rechts */
.sb-info { display: flex; flex-direction: column; }
.sb-series { font-size: 11px; color: #00FFFF; margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
.sb-title {
  font-size: 17px; font-weight: 700; color: #fff; line-height: 1.4; margin: 0 0 4px;
  text-transform: none; letter-spacing: 0; text-shadow: none;
}
.sb-author { font-size: 14px; color: #B6C4D4; margin-bottom: 10px; }
.sb-stars { font-size: 15px; color: #f5a623; margin-bottom: 14px; }
.sb-stars-num { font-size: 12px; color: rgba(255,255,255,.5); margin-left: 4px; }
/* Format Tabs */
.sb-format-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.sb-format-tab {
  flex: 1; text-align: center; padding: 10px 6px; border-radius: 8px; cursor: pointer;
  border: none; font-size: 12px; transition: all 0.25s; line-height: 1.3;
}
.sb-format-tab .sb-tab-fmt { display: block; font-weight: 600; margin-bottom: 2px; }
.sb-format-tab .sb-tab-price { display: block; font-size: 14px; font-weight: 700; }
.sb-format-tab.active { background: #00FFFF; color: #003d30; }
.sb-format-tab:not(.active) { background: #1f2937; color: #8195A9; }
.sb-format-tab:not(.active):hover { background: #283548; }
/* Preis */
.sb-price-block { margin-bottom: 6px; }
.sb-price-orig { font-size: 14px; color: #8195A9; text-decoration: line-through; }
.sb-price { font-size: 22px; font-weight: 700; color: #00FFFF; }
.sb-price-save { font-size: 12px; color: #00c853; margin-top: 1px; }
/* Metadaten Grid */
.sb-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px;
}
.sb-meta-cell {
  background: #1f2937; border-radius: 6px; padding: 8px; font-size: 12px;
}
.sb-meta-cell.full { grid-column: span 2; }
.sb-meta-label { color: #8195A9; display: block; margin-bottom: 2px; }
.sb-meta-val { color: #ddd; }
/* MwSt */
.sb-vat { color: #8195A9; font-size: 11px; margin-bottom: 8px; }
/* Warenkorb Button */
.sb-buy-btn {
  width: 100%; background: #00FFFF; color: #003d30; font-size: 15px; font-weight: 700;
  padding: 13px; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s;
  margin-top: 4px;
}
.sb-buy-btn:hover { background: #00bfa0; box-shadow: 0 0 14px rgba(0,255,255,.4); }

/* ===== SEKTION 2: BESCHREIBUNG ===== */
.sb-desc-section { margin-top: 48px; }
.sb-section-title {
  font-size: 18px; font-weight: 700; color: #fff;
  border-bottom: 1px solid #1f2937; padding-bottom: 12px; margin: 0 0 16px;
  text-transform: none; letter-spacing: 0; text-shadow: none;
}
.sb-desc-text { font-size: 15px; color: #bbb; line-height: 1.8; }
.sb-desc-text p { margin-bottom: 1rem; }

/* ===== SEKTION 3: REZENSIONEN ===== */
.sb-reviews-section { margin-top: 48px; }
.sb-reviews-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.sb-reviews-header h2 { font-size: 18px; font-weight: 700; color: #fff; margin: 0; text-transform: none; letter-spacing: 0; text-shadow: none; }
.sb-reviews-avg-inline { font-size: 14px; color: #f5a623; }
.sb-reviews-count-inline { font-size: 13px; color: #8195A9; }
/* Review Item */
.sb-review-item { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.sb-review-item:last-child { border-bottom: none; }
.sb-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sb-review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,255,255,.15); color: #00FFFF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.sb-review-meta { flex: 1; }
.sb-review-name { font-size: 14px; color: #fff; font-weight: 600; }
.sb-review-date { font-size: 12px; color: #8195A9; }
.sb-review-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; margin-bottom: 6px; }
.sb-review-text { font-size: 14px; color: #bbb; line-height: 1.7; }
.sb-reviews-empty { color: #8195A9; font-size: 14px; padding: 20px 0; }
/* Review Form */
.sb-review-form { margin-top: 32px; padding-top: 24px; border-top: 1px solid #1f2937; }
.sb-review-form h3 { font-size: 16px; color: #fff; margin: 0 0 16px; }
.sb-star-picker { display: flex; gap: 4px; margin-bottom: 12px; font-size: 24px; cursor: pointer; }
.sb-star-picker span { color: #444; transition: color 0.15s; }
.sb-star-picker span.active, .sb-star-picker span:hover, .sb-star-picker span:hover ~ span { color: #f5a623; }
.sb-review-textarea {
  width: 100%; min-height: 100px; background: #1f2937; border: 1px solid #333;
  border-radius: 8px; padding: 12px; color: #ddd; font-size: 14px; resize: vertical;
  font-family: inherit;
}
.sb-review-textarea:focus { border-color: #00FFFF; outline: none; }
.sb-char-count { font-size: 11px; color: #8195A9; text-align: right; margin-top: 4px; }
.sb-review-submit {
  background: #00FFFF; color: #003d30; font-size: 14px; font-weight: 700;
  padding: 10px 28px; border-radius: 8px; border: none; cursor: pointer;
  margin-top: 10px; transition: all 0.3s;
}
.sb-review-submit:hover { background: #00bfa0; }
.sb-review-login { font-size: 14px; color: #8195A9; margin-top: 16px; }
.sb-review-login a { color: #00FFFF; text-decoration: none; }
.sb-review-login a:hover { text-decoration: underline; }

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
  .sb-grid { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .sb-info { width: 100%; }
  .sb-cover-img { width: 130px; height: 184px; }
  .sb-title { font-size: 16px; }
  .sb-format-tabs { flex-wrap: wrap; }
}

/* =====================================================================
   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.sb-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;
}
.sb-wrap{
  /* 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){
  .sb-wrap{padding:22px 16px 28px;border-radius:16px}
}

/* =====================================================================
   Die Kategorieleiste oben, Buecher / Musik / Merchandise
   23.09.2026: Sie stand eingerueckt in der Seite, mit Luft nach oben
   zum Seitenkopf und ohne Luft nach unten zur Tafel. Jetzt geht sie
   ueber die volle Fensterbreite, schliesst oben direkt an den
   Seitenkopf an, und darunter kommt der Abstand zur Tafel.
   ===================================================================== */
/* main bekommt seitlich gar kein Polster mehr. Dann geht die Leiste
   von selbst ueber die volle Breite, ohne Rechnerei mit 100vw. Der
   Kniff mit 100vw hatte einen Haken: er zaehlt die Bildlaufleiste mit,
   und die Leiste war dadurch 15 Pixel zu breit und 7 Pixel verschoben.
   Die Luft an den Seiten holt sich stattdessen die Tafel selbst. */
main.sb-main{padding:0 0 clamp(28px,4vw,48px) !important}

main.sb-main > .shop-cat-nav{
  width:100%;max-width:none;margin:0;border-radius:0;
}

/* Abstand zwischen Leiste und Tafel, und Luft an den Seiten */
.sb-wrap{
  margin:clamp(18px,3vw,32px) auto 0;
  width:calc(100% - clamp(20px,4vw,40px));
  max-width:1280px;
}