/* ===== Oberfläche (7DS Modern) ===== */
:root {
  --bg: #0B0817; --card: #15102A; --glow: #2A1B4A; --gold: #F5C518; --gold-h: #FFD633;
  --tx: #FFFFFF; --tx2: #B8B3C8; --mut: #6B6480; --bd: rgba(245, 197, 24, .25);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--tx2);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 15px; line-height: 1.5;
  display: grid; grid-template-columns: 340px 1fr; min-height: 100vh;
}
.ui { padding: 20px 18px 40px; border-right: 1px solid rgba(255, 255, 255, .06); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.brand img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.brand h1 { margin: 0; color: var(--tx); font-size: 19px; line-height: 1.2; }
.brand p { margin: 2px 0 0; font-size: 13px; color: var(--tx2); }
.card { background: var(--card); border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; padding: 14px 14px 12px; margin-bottom: 12px; }
.card h2 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.row + .row { border-top: 1px solid rgba(255, 255, 255, .06); }
.row-l b { display: block; color: var(--tx); font-size: 15px; }
.row-l span { font-size: 12.5px; color: var(--tx2); }
.step { display: flex; align-items: center; gap: 4px; flex: none; }
.step button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bd); background: transparent; color: var(--gold); font-size: 20px; line-height: 1; cursor: pointer; }
.step button:hover { background: rgba(245, 197, 24, .12); }
.step output { width: 34px; text-align: center; color: var(--gold); font-weight: 700; font-size: 22px; }
.sum { margin: 8px 0 0; font-size: 13px; color: var(--tx2); }
.btn { display: block; width: 100%; padding: 12px 16px; border-radius: 999px; font-size: 15.5px; font-weight: 700; cursor: pointer; border: 0; font-family: inherit; }
.btn.gold { background: var(--gold); color: var(--bg); }
.btn.gold:hover { background: var(--gold-h); }
.btn.line { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); margin-top: 8px; }
.btn.line:hover { background: rgba(245, 197, 24, .12); }
.note { margin: 10px 2px 0; font-size: 12.5px; color: var(--tx2); }
.note b { color: var(--tx); }
.chk { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; color: var(--tx); cursor: pointer; font-size: 14px; }
.chk input { accent-color: var(--gold); width: 17px; height: 17px; margin: 2px 0 0; flex: none; }
details { border-top: 1px solid rgba(255, 255, 255, .06); padding: 8px 0 2px; margin-top: 8px; }
summary { cursor: pointer; color: var(--tx); font-weight: 600; font-size: 14.5px; }
summary span { color: var(--mut); font-weight: 400; font-size: 12.5px; margin-left: 4px; }
.types { padding: 6px 0 2px; }
.types .chk { font-size: 13.5px; color: var(--tx2); padding: 3px 0; }
.help p { margin: 4px 0; font-size: 13px; }
.help b { color: var(--gold); }

.stage { padding: 22px 16px 80px; min-width: 0; background: radial-gradient(900px 500px at 50% 0, rgba(42, 27, 74, .55), transparent 70%); }
.sheets { width: 210mm; margin: 0 auto; }
.wrap { margin: 0 0 30px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 15px; color: var(--tx); }
.bar b { color: var(--gold); }
.bar button { background: transparent; border: 1px solid var(--bd); color: var(--gold); border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; font-family: inherit; }
.bar button:hover { background: rgba(245, 197, 24, .12); }
.sheet { box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.sheet.flash { animation: flash .7s ease; }
@keyframes flash { 0% { outline: 5px solid var(--gold); outline-offset: 3px; } 100% { outline: 5px solid transparent; outline-offset: 3px; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--gold); color: var(--bg); font-weight: 700; padding: 11px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); max-width: 92vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  body { display: block; }
  .ui { position: static; height: auto; border-right: 0; }
  .sheets { margin: 0; }
}

/* ===== Arbeitsblatt (A4, schwarz-weiß) ===== */
.sheet {
  width: 210mm; height: 296.6mm; background: #fff; color: #000; padding: 7mm; overflow: hidden; position: relative;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.3;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.band { height: 100%; padding: 2mm; border: .5mm solid #000; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='d' width='5' height='5' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='2.5' cy='2.5' r='.85' fill='%23888'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23d)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.frame { height: 100%; background: #fff; border: .5mm solid #000; padding: 3.5mm 5mm 2.5mm; display: flex; flex-direction: column; }

.sh-head { display: flex; align-items: center; gap: 5mm; padding-bottom: 2mm; border-bottom: .5mm solid #000; margin-bottom: 3mm; flex: none; }
.sh-title { font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Segoe UI", sans-serif; font-weight: 700; font-size: 23pt; line-height: 1.05; color: #fff; -webkit-text-stroke: 1.5pt #000; paint-order: stroke fill; letter-spacing: .4pt; }
.sh-sub { font-size: 9.5pt; font-weight: 600; margin-top: .6mm; }
.sh-meta { margin-left: auto; font-size: 9.5pt; display: grid; gap: 2.6mm; }
.sh-meta div { display: flex; align-items: flex-end; gap: 1.5mm; }
.sh-meta i { display: inline-block; width: 44mm; border-bottom: .25mm solid #000; height: 4mm; }
.sh-star { width: 13mm; height: 13mm; flex: none; }

.body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3mm; }
.body > * { flex: none; }
.body.spread { justify-content: space-between; }
.sh-foot { flex: none; display: flex; justify-content: space-between; font-size: 7.5pt; color: #444; padding-top: 1.5mm; }

/* Merkkasten */
.rule { border: .4mm dashed #000; border-radius: 2mm; font-size: 10pt; }
.rule .r { display: flex; border-bottom: .3mm dotted #000; }
.rule .r:last-child { border-bottom: 0; }
.rule .c { flex: 1; padding: 1.5mm 3mm; border-right: .3mm dotted #000; }
.rule .c:last-child { border-right: 0; }
.rule .c.mid { text-align: center; }
.rule .c.nar { flex: 0 0 34%; }
.rule .big { font-weight: 700; font-size: 10.5pt; }
.rule .c.wide { flex: 1.45; }
.rule .sm { font-size: 8.5pt; color: #333; }

/* Übung */
.ex { border: .5mm solid #000; border-radius: 2.5mm; padding: 2mm 3.5mm 2.8mm; position: relative; }
.ex-h { display: flex; gap: 2.5mm; align-items: flex-start; margin-bottom: 1mm; }
.ex-n { flex: none; width: 6mm; height: 6mm; border-radius: 50%; background: #000; color: #fff; font-weight: 700; font-size: 10.5pt; display: flex; align-items: center; justify-content: center; }
.ex-t { font-weight: 700; font-size: 10.5pt; }
.ex-de { display: block; font-style: italic; font-size: 8.5pt; color: #333; }
.it { display: flex; gap: 2mm; line-height: 7.4mm; }
.it .k, .sl .k { flex: none; min-width: 5mm; font-weight: 600; }
.it .tx { flex: 1; min-width: 0; }
.gap { display: inline-block; min-width: 27mm; border-bottom: .25mm solid #000; height: 1em; vertical-align: baseline; margin: 0 .6mm; }
.hint { color: #222; font-style: italic; }
.wl { height: 8mm; border-bottom: .25mm solid #000; display: flex; align-items: flex-end; gap: 2mm; margin-left: 7mm; }
.wl .lab { flex: none; margin-left: -7mm; width: 5mm; padding-bottom: .5mm; font-weight: 600; font-size: 10pt; }
.wl .lab2 { flex: none; background: #fff; padding: 0 1.5mm .2mm 0; margin-bottom: -.5mm; position: relative; top: .6mm; }
.wl:has(.lab2) { margin-left: 0; height: 9mm; }
.grp { margin-bottom: .5mm; }
.grp .it { line-height: 7mm; }
.grp .wl { height: 7.6mm; }
.sym { display: inline-flex; width: 4.4mm; height: 4.4mm; border: .3mm solid #000; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: 9pt; line-height: 1; vertical-align: middle; }
.tip, .eg, .chain { border: .3mm dashed #000; border-radius: 2mm; padding: 1mm 3mm; font-size: 9.5pt; margin: .5mm 0 1mm; }
.chain { text-align: center; background: #f1f1f1; line-height: 1.5; }
.arr { font-weight: 700; padding: 0 .5mm; }
.tbl { width: 100%; border-collapse: collapse; margin-top: 1mm; }
.tbl th, .tbl td { border: .3mm solid #000; padding: 0 2.5mm; height: 8.6mm; width: 33.33%; text-align: left; font-size: 10.5pt; }
.tbl th { background: #eaeaea; height: 7mm; }
.ab { margin-bottom: .6mm; }
.ab .it { line-height: 6.6mm; }
.abo { display: flex; flex-wrap: wrap; gap: 0 8mm; margin-left: 7mm; line-height: 6.4mm; font-size: 10.5pt; }
.box { display: inline-block; width: 3.6mm; height: 3.6mm; border: .3mm solid #000; margin-right: 1.8mm; vertical-align: -0.5mm; }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; }
.match .it { line-height: 7.2mm; }
.match .k { font-weight: 700; }
.mrow { display: flex; gap: 6mm; margin: 1.5mm 0 0 7mm; font-weight: 700; }
.mbox .box { width: 6mm; height: 6mm; margin: 0 0 0 1.5mm; vertical-align: -1.6mm; }
.dl { display: flex; gap: 2mm; line-height: 8mm; }
.dl .who { flex: none; width: 13mm; font-style: italic; font-weight: 600; }
.dl .tx { flex: 1; }

/* Werkzeuge an der Übung (nur Bildschirm) */
.tools { position: absolute; top: -3.4mm; right: 4mm; display: flex; gap: 1.5mm; }
.tools button { width: 7.5mm; height: 7.5mm; border-radius: 50%; border: .4mm solid #000; background: #F5C518; color: #000; font-size: 11pt; line-height: 1; cursor: pointer; padding: 0; }
.tools button:hover { background: #FFD633; transform: scale(1.1); }

/* Lösungsblatt */
.sheet.sol .sh-title { font-size: 17pt; }
.sol-body { flex: 1; min-height: 0; overflow: hidden; column-count: 2; column-gap: 7mm; column-fill: auto; column-rule: .25mm dotted #000; font-size: 9pt; line-height: 1.35; }
.sx { break-inside: avoid; margin-bottom: 3mm; }
.sx-g { font-weight: 700; font-size: 10.5pt; background: #000; color: #fff; padding: .4mm 2mm; border-radius: 1mm; margin-bottom: 1.5mm; }
.sx-h { font-weight: 700; border-bottom: .25mm solid #000; margin-bottom: 1mm; display: flex; gap: 2mm; }
.sx-h .ex-n { width: 4.6mm; height: 4.6mm; font-size: 8.5pt; }
.sl > div { padding-left: 5.5mm; text-indent: -5.5mm; }
.sl .k { display: inline-block; text-indent: 0; }
.sol-body .sym { width: 3.4mm; height: 3.4mm; font-size: 7pt; text-indent: 0; }

/* ===== Druck ===== */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff !important; display: block; }
  .no-print, .bar { display: none !important; }
  .stage { padding: 0; background: none; }
  .sheets { zoom: 1 !important; width: 210mm; margin: 0; }
  .wrap { margin: 0; break-after: page; page-break-after: always; }
  .wrap:last-child { break-after: auto; page-break-after: auto; }
  .sheet { box-shadow: none; outline: 0 !important; animation: none; }
}