/* =========================================================
   produkte.css — Produktübersicht (Light + Dark)
   ========================================================= */

/* Reset (kompakt) */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; border-radius: 12px; }
button,input,select,textarea { font: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Farben (Light) */
:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --text:#111315;
  --muted:#5e6572;
  --border:#e6e8ec;
  --ok:#16a34a;
  --warn:#ea580c;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --accent:#0ea5e9;
  --star:#f59e0b;
}

/* Farben (Dark – systembasiert) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c10;
    --surface:#111827;
    --text:#e5e7eb;
    --muted:#9aa0aa;
    --border:#1f2937;
    --ok:#34d399;
    --warn:#fb923c;
    --shadow:0 10px 30px rgba(0,0,0,.55);
    --accent:#38bdf8;
    --star:#fbbf24;
  }
}

/* Basis */
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
.container{ width:min(1180px,92vw); margin:0 auto; }

/* Header */
header{
  background:var(--surface);
  position:sticky; top:0; z-index:20;
  box-shadow:0 1px 0 var(--border);
}
.bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; gap:10px; align-items:center; }
.brand-logo{
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9);
  box-shadow:0 6px 16px rgba(34,211,238,.35);
}
.brand strong{ font-size:16px; }

.toolbar{ display:flex; gap:10px; align-items:center; }
.select{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
}

/* Kopf der Liste */
.page{ padding:22px 0 32px; }
.list-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; gap:12px; flex-wrap:wrap;
}
.count{ color:var(--muted); }
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer;
}
.chip[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,165,233,.15); }

/* Produkt-Gitter */
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

@media (max-width:1100px){ .product-grid{ grid-template-columns: repeat(8, 1fr); } }
@media (max-width:780px){  .product-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (max-width:560px){  .product-grid{ grid-template-columns: repeat(4, 1fr); } }

.product-card{
  grid-column: span 3; /* 4 Spalten pro Reihe auf Desktop */
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (max-width:1100px){ .product-card{ grid-column: span 4; } } /* 3 pro Reihe */
@media (max-width:780px){  .product-card{ grid-column: span 6; } }  /* 2 pro Reihe */
@media (max-width:560px){  .product-card{ grid-column: span 4; } }  /* 1 pro Reihe */

.product-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.10); }

.media{ position:relative; aspect-ratio: 3/5; background:#eef2f7; }
.media img{ 
    width:100%; 
    height:100%; 
    object-fit:cover; 
}

.ribbon{
  position:absolute; 
  top:12px; left:12px;
  background:#ef4444; 
  color:#fff; 
  font-weight:700;
  font-size:12px; 
  padding:6px 10px; 
  border-radius:999px;
}

.title{
  font-size:14px; line-height:1.3; margin:0; padding:0 8px;
}

/* Titel nicht fett */
.title,
.title a {
  font-weight: normal;
}

.title a:hover{ text-decoration:underline; }

.rating{
  display:flex; gap:6px; align-items:center; margin-top:-2px; padding:0 12px;
}
.stars{ letter-spacing:2px; color:var(--star); font-size:14px; }
.note{ color:var(--muted); font-size:12px; }

.price-line{
  display:flex; align-items:baseline; gap:6px; padding:0 8px 8px;
}
.from{ color:var(--muted); font-size:12px; }
.price{ font-size:16px; font-weight:800; }

/* Pagination */
.pager{ display:flex; gap:10px; justify-content:center; margin:22px 0 0; }
.btn{
  appearance:none;
  background:#ffffff;
  color:#111111;
  border:1.5px solid #111111;
  padding:12px 14px;
  font-weight:700; font-size:14px; line-height:1;
  cursor:pointer; border-radius:0;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:inset 0 0 0 2px rgba(0,0,0,.10); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Footer */
.footer{ margin:34px 0 26px; color:var(--muted); font-size:13px; }

/* Utilities */
.muted{ color:var(--muted); }

/* Focus */
:focus-visible{ outline:3px solid rgba(56,189,248,.55); outline-offset:2px; }

/* Link über die ganze Karte klickbar und block-level */
.product-card .card-link { display:block; height:100%; color:inherit; text-decoration:none; }

/* === Compact Overrides (add at end) ====================== */

/* Grid kompakter + sicherstellen, dass es ein Grid ist */
.product-grid{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr); /* max. 4 Spalten */
  gap: 14px !important;
  align-items: start;
}

/* Karten automatisch einpassen + gleiche Höhe */
.product-card{
  grid-column: auto !important;
  gap: 8px;
  border-radius: 12px;
  transition: transform .12s ease, box-shadow .12s ease;
  height: 400px; /* Feste Gesamthöhe – anpassen nach Bedarf */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Hover-Effekt beibehalten */
.product-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Bildbereich fixieren */
.media{
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
}

/* Textbereich mit fester Höhe */
.title{
  font-size: 14px;
  line-height: 1.25;
  padding: 0 8px;
  margin-top: 4px;
  min-height: 34px; /* Platz für 2 Zeilen */
}

.title a{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rating{
  padding: 0 8px;
  gap: 4px;
  margin-top: -2px;
}

.stars{ font-size: 12px; letter-spacing: 1px; }
.note{ font-size: 11px; }

/* Preiszeile immer am unteren Rand */
.price-line{
  padding: 0 8px 8px;
  gap: 6px;
  margin-top: auto;
}

.from{ font-size: 11px; }
.price{ font-size: 15px; font-weight: 800; }

/* Ribbon dezenter/kleiner */
.ribbon{
  top: 8px; left: 8px;
  font-size: 11px; padding: 4px 8px;
  z-index: 10;
}

/* Paginierung etwas dichter */
.pager{ gap: 8px; margin-top: 16px; }
.btn{ padding: 10px 12px; font-size: 13px; }

/* === Responsive fixed-size cards ========================= */

/* Desktop (≥ 1100px) – kompakt, gleich hohe Karten */
.product-card{ height: 340px; }
.media{ aspect-ratio: 3 / 4; }
.title{ min-height: 34px; }          /* 2 Zeilen Titel */

/* Tablet (780–1099px) – etwas niedriger, dichter */
@media (max-width: 1099.98px){
  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
  .product-card{ height: 320px; }
  .media{ aspect-ratio: 3 / 4; }
  .title{ font-size: 13.5px; min-height: 32px; }
  .stars{ font-size: 11.5px; }
  .note, .from{ font-size: 10.5px; }
  .price{ font-size: 14.5px; }
}

/* Phablet (560–779px) – zwei pro Reihe, noch kompakter */
@media (max-width: 779.98px){
  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 12px !important; }
  .product-card{ height: 300px; }
  .media{ aspect-ratio: 3 / 4; }
  .title{ font-size: 13px; min-height: 30px; }
  .price-line{ padding: 0 8px 6px; }
}

/* Mobile (≤ 559px) – schmale Karten, gleich hoch */
@media (max-width: 559.98px){
  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px !important; }
  .product-card{ height: 280px; }
  .media{ aspect-ratio: 3 / 4; }
  .title{ font-size: 12.5px; min-height: 28px; }
  .stars{ font-size: 11px; letter-spacing: .5px; }
  .note, .from{ font-size: 10px; }
  .price{ font-size: 14px; }
  .ribbon{ top: 6px; left: 6px; font-size: 10px; padding: 3px 6px; }
}

/* Fallback: extrem schmale Geräte – eine Karte pro Reihe */
@media (max-width: 380px){
  .product-grid{ grid-template-columns: 1fr !important; }
}

/* ===== Fixed-size Cards – NON-DESTRUCTIVE OVERLAY (append at end) ===== */

/* Steuer-Variablen */
:root{
  --card-h-desktop: 340px;
  --card-h-tablet: 320px;
  --card-h-phablet: 300px;
  --card-h-mobile: 280px;

  --thumb-h-desktop: 200px;
  --thumb-h-tablet: 188px;
  --thumb-h-phablet: 176px;
  --thumb-h-mobile: 164px;
}

/* Sicherstellen, dass das Grid aktiv ist (falls oben vergessen) */
.product-grid{ display:grid; }

/* Einheitliche Kartenhöhe + automatische Spaltenbreite */
.product-card{
  /* überschreibt frühere span-Definitionen, ohne sie zu löschen */
  grid-column: auto;
  height: var(--card-h-desktop);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* vorhandene Optik bleibt erhalten */
  position: relative; /* wichtig, damit Ribbon relativ zur Karte positioniert */

}

/* Fester Bildbereich oben (unabhängig vom Cover-Whitespace) */
.media{
  height: var(--thumb-h-desktop);
  aspect-ratio: auto;     /* Höhe hat Vorrang */
  overflow: hidden;
}
.media img{
  width:100%; height:100%; object-fit:cover;
}

/* Titel: max. 2 Zeilen, kompakt */
.title{
  min-height: 34px;       /* Platz für 2 Zeilen */
  padding: 0 8px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.25;
}
.title a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Bewertung & Preis etwas dichter – bleibt kompatibel */
.rating{ padding:0 8px; gap:4px; margin-top:-2px; }
.stars{ font-size:12px; letter-spacing:1px; }
.note{ font-size:11px; }

/* Preiszeile steht immer unten */
.price-line{
  margin-top:auto;
  padding:0 8px 8px;
  gap:6px;
}
.from{ font-size:11px; }
.price{ font-size:15px; font-weight:800; }

/* Ribbon leicht kompakter (optional) */
.ribbon{ top:8px; left:8px; font-size:11px; padding:4px 8px; }

/* ===== Responsiveness über Variablen ===== */

/* Tablet (≤ 1099px) */
@media (max-width:1099.98px){
  .product-card{ height: var(--card-h-tablet); }
  .media{ height: var(--thumb-h-tablet); }
  .title{ font-size:13.5px; min-height:32px; }
  .stars{ font-size:11.5px; }
  .note, .from{ font-size:10.5px; }
  .price{ font-size:14.5px; }
}

/* Phablet (≤ 779px) */
@media (max-width:779.98px){
  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
  .product-card{ height: var(--card-h-phablet); }
  .media{ height: var(--thumb-h-phablet); }
  .title{ font-size:13px; min-height:30px; }
  .price-line{ padding:0 8px 6px; }
}

/* Mobile (≤ 559px) */
@media (max-width:559.98px){
  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .product-card{ height: var(--card-h-mobile); }
  .media{ height: var(--thumb-h-mobile); }
  .title{ font-size:12.5px; min-height:28px; }
  .stars{ font-size:11px; letter-spacing:.5px; }
  .note, .from{ font-size:10px; }
  .price{ font-size:14px; }
  .ribbon{ top:6px; left:6px; font-size:10px; padding:3px 6px; }
}

/* Extra schmal: 1 Karte pro Reihe */
@media (max-width:380px){
  .product-grid{ grid-template-columns: 1fr; }
}
/* Container für Divider + Testimonials: mittig, transparent, Text links */
.container .testimonial-section{
  background: transparent;
  text-align: left;
  padding: 0 8px;        /* leichter Innenabstand */
  margin: 0 auto;        /* falls überschrieben, trotzdem zentrieren */
  max-width: 95%;
}

/* Überschrift explizit links (falls vorher zentriert) */
.container .testimonial-section > h2{
  text-align: left;
  margin: 0 0 14px;
}

/* Divider im Container: auf Containerbreite, mittig */
.container > .divider{
  width: 95%;
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

/* Pfeil-Wrapper sauber positionieren */
.container .testimonial-carousel-wrapper{
  position: relative;
  margin: 0 auto;
}
/* === Testimonials: breiter, niedriger, light/dark ===================== */
:root{
  --t-card-w: 340px;     /* Kartendicke Desktop */
  --t-pad: 16px;         /* Innenabstand */
  --t-gap: 16px;         /* Abstand zwischen Cards */
  --t-radius: 14px;      /* Rundung */
}

/* Sektion */
.testimonial-section{ padding: 8px 0 0; text-align:left; }
.testimonial-section > h2{ margin: 0 0 18px; }

/* Bühne & Container */
.testimonial-carousel{ overflow: hidden; }
.testimonial-carousel-wrapper{ position: relative; }
.testimonial-container{
  display: flex;
  gap: var(--t-gap);
  will-change: transform;
}

/* Karte */
.testimonial-card{
  flex: 0 0 var(--t-card-w);           /* breiter als vorher */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--t-radius);
  box-shadow: var(--shadow);
  padding: var(--t-pad);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Kopfzeile */
.testimonial-card h3{
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

/* Text kompakt (nicht so hoch) */
.testimonial-card p{
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 6;         /* max ~6 Zeilen -> verhindert hohe Karten */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sterne */
.testimonial-card .stars{
  color: var(--star);
  letter-spacing: 1px;
  font-size: 12px;
}

/* Avatare einheitlich */
.avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700;
  margin: -4px 0 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.avatar.red{    background: linear-gradient(135deg,#ef4444,#f97316); }
.avatar.orange{ background: linear-gradient(135deg,#f59e0b,#ef4444); }
.avatar.green{  background: linear-gradient(135deg,#10b981,#22c55e); }
.avatar.blue{   background: linear-gradient(135deg,#3b82f6,#06b6d4); }
.avatar.purple{ background: linear-gradient(135deg,#8b5cf6,#ec4899); }
.avatar.brown{  background: linear-gradient(135deg,#9a6b4f,#b45309); }
.avatar.teal{   background: linear-gradient(135deg,#14b8a6,#06b6d4); }

/* Pfeile */
.nav-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  cursor: pointer; user-select: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.left-arrow{ left: -18px; }
.right-arrow{ right: -18px; }
.nav-arrow:hover{ transform: translateY(-50%) translateY(-1px); }

/* Dark-Mode Feinheiten (nutzt trotzdem deine Variablen) */
@media (prefers-color-scheme: dark){
  .nav-arrow{ background: var(--surface); border-color: var(--border); }
  .avatar{ box-shadow: 0 10px 24px rgba(0,0,0,.45); }
}

/* Responsive: etwas schmalere Karten auf kleineren Screens */
@media (max-width: 1024px){
  :root{ --t-card-w: 320px; }
}
@media (max-width: 768px){
  :root{ --t-card-w: 300px; --t-gap: 14px; }
  .left-arrow{ left: 6px; } .right-arrow{ right: 6px; }
}
@media (max-width: 560px){
  :root{ --t-card-w: 260px; --t-gap: 12px; --t-pad: 14px; }
}
.lernblock {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 1rem;
  font-family: system-ui, sans-serif;
}

.content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.image {
  flex: 0 0 50%; /* feste Spaltenbreite */
  max-width: 500px; /* optional: maximale Breite setzen */
}
.image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.text h1 {
  font-size: 1.8rem;
  margin-top: 0;
}

.text p {
  line-height: 1.6;
}

button#toggleText {
  margin-top: 0.5rem;
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-weight: bold;
}

.hidden {
  display: none;
}

/* Mobile Layout */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }
}

/* Farben Light */
:root {
  --link: #1d4ed8;
  --text: #111;
  --bg: #fff;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --link: #93c5fd;
    --text: #e5e7eb;
    --bg: #0b0c10;
  }
  .lernblock {
    color: var(--text);
    background: var(--bg);
  }
}


.book-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
}

.book-list li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.book-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #16a34a; /* Grün */
  font-weight: bold;
}