/* Buchladen und Produktseiten. Ergänzt tools.css, ersetzt es nicht.

   Die Namen der Farbvariablen stammen aus tools.css und sind dort für hell
   und dunkel gesetzt. Beim ersten Anlauf standen hier erfundene Namen mit
   hellen Rückfallwerten, und in der dunklen Fassung stand dann heller Text
   auf hellem Kasten. Deshalb: nur Namen benutzen, die es wirklich gibt. */

.laden{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
       gap:18px;margin:22px 0}
.ladenkachel{display:block;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius,12px);overflow:hidden;
  background:var(--surface);transition:border-color .12s ease}
.ladenkachel:hover{border-color:var(--ink-3)}
.ladenkachel img{display:block;width:100%;height:auto}
.ladenkachel b{display:block;padding:12px 14px 2px;font-size:1rem;line-height:1.3;
  color:var(--ink)}
.ladenkachel span{display:block;padding:0 14px 4px;font-size:.88rem;
  color:var(--ink-2);line-height:1.45}
.ladenkachel .p{padding:4px 14px 14px;font-weight:700;color:var(--ink)}

.buch-kopf{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:28px;align-items:start;margin:20px 0 8px}
.buch-cover{width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.buch-text h1{margin:0 0 6px}
.buch-text .unter{color:var(--ink-3);font-size:1.05rem;margin:0 0 14px}
.fakten{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:14px 0 0}
.fakten li{font-size:.92rem;color:var(--ink-2)}
.fakten b{font-size:1.15rem;color:var(--ink);margin-right:4px}

.kaufkasten{border:1px solid var(--line);border-radius:var(--radius,12px);
  padding:18px 20px;margin:22px 0 0;background:var(--surface);color:var(--ink)}
/* Der Preis ist die Zeile, an der eine Kaufentscheidung hängt. Sie stand in
   --ink-3, dem schwaechsten Ton fuer Fliesstext, und war dadurch heller als
   der Fliesstext daneben. Jetzt --ink, also der staerkste Ton, in hell wie
   in dunkel. */
.preis{font-size:1.7rem;font-weight:700;margin:0 0 12px;letter-spacing:-.02em;
  color:var(--ink)}
.preis span{display:block;font-size:.9rem;font-weight:600;color:var(--ink);
  letter-spacing:0;margin-top:5px}
.kaufknopf{display:inline-block;width:100%;text-align:center;
  padding:14px 20px;border:0;border-radius:9px;cursor:pointer;
  font:inherit;font-weight:700;font-size:1.02rem;
  background:var(--hit);color:#FFFFFF;text-decoration:none}
/* In der dunklen Fassung ist --hit ein helles Orange. Weiß darauf wäre zu
   schwach, deshalb dort dunkle Schrift, genau wie tools.css es bei
   button.primary macht. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kaufknopf{
  color:#0E1016}}
.kaufknopf:hover{filter:brightness(1.06)}
.kaufknopf[disabled]{opacity:.55;cursor:progress}
.kaufkasten .klein{font-size:.87rem;color:var(--ink-2);margin:12px 0 0}
.status{margin:10px 0 0;font-size:.9rem;min-height:1.2em;color:var(--ink-3)}
.status.fehler{color:var(--hit);font-weight:700}

.proben{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;margin:14px 0 0}
.proben figure{margin:0}
.proben img{width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.proben figcaption{font-size:.86rem;color:var(--ink-2);margin-top:7px}

/* Fragen und Antworten. Sichtbar auf der Seite, nicht nur im
   Auszeichnungscode, denn eine Antwort, die nur eine Suchmaschine sieht,
   ist eine Taeuschung und nuetzt niemandem. */
.fragen{margin:12px 0 0}
.fragen h3{margin:18px 0 6px;font-size:1.02rem;line-height:1.35}
.fragen h3:first-child{margin-top:0}
.fragen p{margin:0;color:var(--ink-2);line-height:1.6}

@media (max-width:640px){
  .buch-kopf{grid-template-columns:1fr;gap:18px}
  .buch-cover{max-width:230px}
}

.regalnav{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}
.regalnav a{display:inline-block;padding:6px 12px;border:1px solid var(--line);
  border-radius:999px;color:var(--ink);text-decoration:none;font-size:.9rem}
.regalnav a:hover{border-color:var(--ink-3)}
.regal{margin-top:30px;scroll-margin-top:16px}
.regal h2{margin:0 0 4px;font-size:1.2rem;line-height:1.3}
.regal-satz{margin:0 0 14px;color:var(--ink-2)}
.alle-buecher{margin:14px 0 0}
.startbuecher{margin:34px 0 8px}
.startbuecher h2{margin:0 0 4px}
.startbuecher > p{margin:0 0 14px;color:var(--ink-2)}