/* ============================================================
   GeoGraSim Schulbuch — gemeinsames Stylesheet aller Kapitel
   (buch-<sim>.php). Drei Modi: Schüler:innen / Leichte Sprache /
   Lehrperson. Wird NACH design-system.css geladen.
   ============================================================ */

/* design-system.css sperrt body-Scroll (App-Layout) – Buch braucht Scroll */
html, body { overflow: auto !important; height: auto !important; }
body { background: #edeae0; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #2f3e46; }
.b-wrap { max-width: 880px; margin: 0 auto; padding: 18px 14px 80px; }
.b-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; }
.b-nav a { color: #4f7f5e; text-decoration: none; font-weight: 600; }
.b-nav .spacer { flex: 1; }
.b-mode { background: #fff; border: 1.5px solid #c9c2ae; border-radius: 999px; padding: 5px 14px; text-decoration: none; font-weight: 700; font-size: 13px; color: #2f3e46 !important; }
.b-mode.active { background: #4f7f5e; color: #fff !important; border-color: #4f7f5e; }

/* Schulbuch-Seite */
.b-seite { background: #fdfbf4; border-radius: 14px; box-shadow: 0 4px 18px rgba(47,62,70,.12); padding: 34px 40px; margin-bottom: 26px; position: relative; }
.b-seite .b-nr { position: absolute; top: 14px; right: 18px; font-size: 12px; color: #9a958a; font-weight: 700; letter-spacing: .08em; }
.b-kicker { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 800; color: #b3541e; margin: 0 0 4px; }
.b-seite h1 { font-size: 30px; margin: 0 0 6px; line-height: 1.2; }
.b-seite h2 { font-size: 22px; margin: 0 0 10px; }
.b-leitfrage { font-size: 17px; font-style: italic; color: #4a4f52; border-left: 4px solid #e8c547; padding: 6px 12px; margin: 14px 0; background: #fbf6e3; border-radius: 0 8px 8px 0; }
.b-seite p { line-height: 1.65; font-size: 15.5px; }
.b-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 700px) { .b-cols { grid-template-columns: 1fr; } .b-seite { padding: 22px 18px; } }

/* Kästen */
.b-box { border-radius: 10px; padding: 12px 15px; margin: 14px 0; font-size: 14.5px; line-height: 1.55; }
.b-merke { background: #eaf2ea; border-left: 4px solid #4f7f5e; }
.b-merke b:first-child { color: #2f6b46; }
.b-daten { background: #eef1f6; border-left: 4px solid #5b7ba0; }
.b-daten b:first-child { color: #3d5a80; }
.b-daten .q { color: #8a8a8a; font-size: 12px; }
.b-sim { background: #fdf1e6; border-left: 4px solid #e8892b; }
.b-sim b:first-child { color: #b3541e; }
.b-aufgaben { background: #fff; border: 1.5px dashed #c9c2ae; }
.b-aufgaben ol { margin: 6px 0 2px 18px; padding: 0; }
.b-aufgaben li { margin: 5px 0; }
.b-stufe { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; margin-right: 5px; vertical-align: 1px; }
.b-stufe.leicht { background: #dcead1; color: #2f6b46; }
.b-stufe.mittel { background: #fbe9c8; color: #a06a12; }
.b-stufe.schwer { background: #f3dcd6; color: #a33227; }
.b-lehrer { background: #f3eef9; border-left: 4px solid #7a5ba0; }
.b-lehrer b:first-child { color: #5d4380; }

.b-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.b-chip { background: #2f3e46; color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; }
.b-chip.soft { background: #e3ddc9; color: #4a4f52; }

.ggs-g { border-bottom: 1.5px dotted #4f7f5e; cursor: help; color: #2f6b46; font-weight: 600; }

/* Fotos */
.b-foto img { width: 100%; border-radius: 10px; display: block; }
.b-foto { margin: 0 0 6px; }
.b-foto figcaption { font-size: 12.5px; color: #7a756a; padding-top: 5px; }
.b-foto.b-klein { max-width: 50%; margin: 14px auto 6px; }
@media (max-width: 700px) { .b-foto.b-klein { max-width: 75%; } }
.b-foto-platzhalter { border: 2px dashed #c9c2ae; border-radius: 10px; padding: 22px 16px; text-align: center; color: #7a756a; background: #f6f3ea; }
.b-foto-platzhalter span { font-size: 30px; display: block; }
.b-foto-platzhalter b { display: block; margin: 4px 0 4px; }
.b-foto-platzhalter small { display: block; line-height: 1.5; }
.b-foto-platzhalter code { display: block; font-size: 10.5px; margin-top: 8px; color: #9a958a; }

.b-quellen { font-size: 12.5px; color: #6b6659; line-height: 1.7; }
.b-quellen a { color: #4f7f5e; }

table.b-tab { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0; }
.b-tab th, .b-tab td { border: 1px solid #ddd6c2; padding: 6px 9px; text-align: left; }
.b-tab th { background: #f0ecdd; }

/* ---------- Leichte Sprache ---------- */
body.mode-leicht .b-seite p { font-size: 17.5px; line-height: 1.95; }
body.mode-leicht .b-box { font-size: 16.5px; line-height: 1.85; }
body.mode-leicht .b-seite h1 { font-size: 28px; }
body.mode-leicht .b-seite h2 { font-size: 23px; }
body.mode-leicht .b-leitfrage { font-style: normal; font-size: 18px; line-height: 1.8; }
body.mode-leicht .b-cols { grid-template-columns: 1fr; }
body.mode-leicht .b-foto figcaption { font-size: 14px; line-height: 1.6; }
body.mode-leicht .b-aufgaben li { margin: 10px 0; }
.b-leicht-hinweis { background: #fbf6e3; border: 1.5px solid #e8c547; border-radius: 10px; padding: 10px 15px; font-size: 15px; margin-bottom: 14px; }

@media print {
  body { background: #fff; }
  .b-nav, .b-mode, .b-leicht-hinweis { display: none !important; }
  .b-seite { box-shadow: none; border: 1px solid #ddd; page-break-after: always; margin-bottom: 0; }
  .b-foto-platzhalter { display: none; }
}