/* ============================================================
   HEFT-LOOK: Karoheft wie im Matheunterricht.
   Gilt nur, wenn <html data-heft="on"> gesetzt ist (Umschalter in der Kopfzeile).
   Farben der Stifte ändern: Variablen direkt unten.
   ============================================================ */
html[data-heft="on"]{
  --paper:#fdfdfb;           /* Heftpapier */
  --grid:#cfd9e8;            /* Kästchenlinien (hellblau-grau) */
  --grid-strong:#b9c6da;     /* jede 5. Linie etwas kräftiger */
  --margin-line:#b7bfcc;     /* Randlinie (grau, nicht rot) */
  --pen:#1f2f94;             /* blauer Kugelschreiber */
  --pen-soft:#44508f;
  --pen-red:#c4161c;         /* roter Stift: Wichtig */
  --pen-green:#1f8a45;       /* grüner Stift: Unterstreichung, Hinweise */
  --pen-black:#2a2a2e;       /* Lineal-/Tabellenstrich */
  --marker:rgba(255,224,60,.55);
  --font:'Patrick Hand','Segoe Print','Comic Sans MS',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --cell:20px;
}
html[data-heft="on"][data-theme="dark"]{
  --paper:#171b26; --grid:#252d3f; --grid-strong:#313b52; --margin-line:#3b4560;
  --pen:#9fb4ff; --pen-soft:#8e9ed6; --pen-red:#ff8f8f; --pen-green:#6fd394; --pen-black:#d6dbe8;
  --marker:rgba(255,214,10,.28);
}

/* ---------- Papier ---------- */
html[data-heft="on"] body{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
  background-position:-1px -1px;
  color:var(--pen);
  font-size-adjust:.5;
}
/* Randlinie wie im Heft (grau, schmal, links) */
html[data-heft="on"] body::before{
  content:""; position:fixed; top:0; bottom:0; left:12px; width:0; z-index:0; pointer-events:none;
  border-left:1.5px solid var(--margin-line); border-right:1.5px solid var(--margin-line);
  box-shadow:3px 0 0 transparent; width:3px;
}
@media (max-width:420px){ html[data-heft="on"] body::before{ left:6px; } }
html[data-heft="on"] .top, html[data-heft="on"] header.top{ background:var(--paper); background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:var(--cell) var(--cell); border-bottom:2px solid var(--pen); backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-heft="on"] main{ position:relative; z-index:1; }
html[data-heft="on"] .overlay, html[data-heft="on"] .overlay-head{ background-color:var(--paper); background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:var(--cell) var(--cell); }
html[data-heft="on"] .overlay-head{ border-bottom:2px solid var(--pen); }

/* ---------- Schrift & Tinte ---------- */
html[data-heft="on"] h1, html[data-heft="on"] h2, html[data-heft="on"] h3{ font-weight:400; letter-spacing:0; color:var(--pen); }
html[data-heft="on"] .brand h1{ font-size:26px; }
html[data-heft="on"] .brand h1 span{ color:var(--pen-green); }
html[data-heft="on"] .overlay-body h2{ font-size:32px; line-height:1.15; text-decoration:underline double var(--pen-green); text-decoration-thickness:2px; text-underline-offset:6px; }
html[data-heft="on"] .rule-card h3{ font-size:21px; line-height:1.25; text-decoration:underline double var(--pen-green); text-decoration-thickness:1.5px; text-underline-offset:4px; }
html[data-heft="on"] p, html[data-heft="on"] li, html[data-heft="on"] .prose-line, html[data-heft="on"] .bullet-list li, html[data-heft="on"] .step{ color:var(--pen); font-size:19px; line-height:1.55; }
html[data-heft="on"] .rule-card p{ font-size:17.5px; color:var(--pen-soft); }
html[data-heft="on"] b, html[data-heft="on"] strong{ font-weight:400; background:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%); padding:0 1px; }
html[data-heft="on"] .subhead{ font-size:20px; font-weight:400; color:var(--pen-green); text-decoration:underline double var(--pen-green); text-decoration-thickness:1.5px; text-underline-offset:4px; margin-top:22px; }
html[data-heft="on"] .bullet-list li::before{ background:var(--pen); }
html[data-heft="on"] .step .n{ background:transparent; color:var(--pen); border:2px solid var(--pen); font-size:15px; font-weight:400; }
html[data-heft="on"] mark{ background:var(--marker); color:inherit; border-radius:2px; }

/* ---------- Regelkarten: Einträge direkt auf dem Karopapier ---------- */
html[data-heft="on"] .list{ gap:0; padding:6px 16px 36px 26px; }
html[data-heft="on"] .rule-card{
  background:transparent; border:none; border-bottom:2px solid var(--grid-strong); border-radius:0; box-shadow:none; padding:14px 6px 12px;
  transition:background .15s;
}
html[data-heft="on"] .rule-card:hover, html[data-heft="on"] .rule-card:active{ background:var(--marker); border-color:var(--pen); transform:none; box-shadow:none; }
html[data-heft="on"] .cat-pill{ background:transparent; color:var(--pen-red); border:1.5px solid var(--pen-red); border-radius:255px 14px 225px 14px/14px 225px 14px 255px; font-size:14px; font-weight:400; padding:1px 10px; }
html[data-heft="on"] .chip{ background:transparent; color:var(--pen); border:1.5px dashed var(--pen-soft); font-size:16px; font-weight:400; box-shadow:none; border-radius:255px 14px 225px 14px/14px 225px 14px 255px; }
html[data-heft="on"] .chip.active{ background:var(--marker); color:var(--pen); border:1.5px solid var(--pen); box-shadow:none; }

/* ---------- Formeln: mit Stift eingerahmt ---------- */
html[data-heft="on"] .formula-block{
  background:transparent; color:var(--pen); border:2px solid var(--pen); padding:8px 18px;
  border-radius:255px 18px 225px 18px/18px 225px 18px 255px;
}
html[data-heft="on"] .fl{ color:var(--pen); }
html[data-heft="on"] .fl + .fl{ border-top:1px dashed var(--grid-strong); }
html[data-heft="on"] .fl-note{ font-family:var(--font); font-size:16px; color:var(--pen-green); }
html[data-heft="on"] .sqrt .radicand{ border-top-color:var(--pen); }
html[data-heft="on"] .pre{ background:transparent; border:1.5px solid var(--pen-black); color:var(--pen); font-family:var(--font); font-size:18px; border-radius:6px; }

/* ---------- „Wichtig“ in Rot, Hinweise in Grün ---------- */
html[data-heft="on"] .callout{
  background:transparent; color:var(--pen-red); border:2px solid var(--pen-red); border-left-width:2px;
  border-radius:255px 14px 225px 14px/14px 225px 14px 255px; font-size:19px; line-height:1.5;
}
html[data-heft="on"] .callout b{ background:none; }

/* ---------- Tabellen: schwarze Lineal-Striche wie im Heft ---------- */
html[data-heft="on"] .tbl-wrap{ background:var(--paper); border:2px solid var(--pen-black); border-radius:2px; }
html[data-heft="on"] .tbl{ font-size:18px; }
html[data-heft="on"] .tbl th{ background:transparent; color:var(--pen); font-weight:400; text-decoration:underline double var(--pen-green); text-decoration-thickness:1.5px; text-underline-offset:4px; }
html[data-heft="on"] .tbl th, html[data-heft="on"] .tbl td{ border-color:var(--pen-black); color:var(--pen); }

/* ---------- Zeichnungen: wie mit Bleistift auf dem Papier ---------- */
html[data-heft="on"] .diagram-frame{ background:var(--paper); border:2px solid var(--pen-black); border-radius:2px; }
html[data-heft="on"] .diagram-section .label{ font-size:16px; color:var(--pen-green); font-weight:400; }

/* ---------- Bedienelemente ---------- */
html[data-heft="on"] .searchwrap input{ background:var(--paper); border:2px solid var(--pen); border-radius:10px; font-size:19px; color:var(--pen); }
html[data-heft="on"] .searchwrap input:focus{ background:var(--paper); border-color:var(--pen-green); box-shadow:none; }
html[data-heft="on"] .searchwrap input::placeholder{ color:var(--pen-soft); opacity:.8; }
html[data-heft="on"] .sq-btn, html[data-heft="on"] .overlay-head .back, html[data-heft="on"] .icon-btn{ background:transparent; border:2px solid var(--pen); color:var(--pen); box-shadow:none; border-radius:12px; }
html[data-heft="on"] .nav-buttons button{ background:transparent; border:2px solid var(--pen); color:var(--pen); font-size:18px; font-weight:400; border-radius:12px; }
html[data-heft="on"] .nav-buttons button:not(:disabled){ border-color:var(--pen); color:var(--pen); }
html[data-heft="on"] .overlay-head .headcat{ background:transparent; color:var(--pen-red); border:1.5px solid var(--pen-red); font-weight:400; font-size:16px; }
html[data-heft="on"] .acct-btn, html[data-heft="on"] .ai-btn, html[data-heft="on"] .news-card button{ background:var(--pen); color:var(--paper); box-shadow:none; font-weight:400; font-size:17px; }
html[data-heft="on"] .ai-open{ background:transparent; color:var(--pen); border:2px solid var(--pen); box-shadow:none; font-weight:400; }
html[data-heft="on"] .ai-open div span{ color:var(--pen-soft); }
html[data-heft="on"] .news-card, html[data-heft="on"] .auth-card, html[data-heft="on"] .acct-menu{ background:var(--paper); border:2px solid var(--pen); box-shadow:none; }
html[data-heft="on"] .note-box textarea, html[data-heft="on"] textarea{ background:var(--paper); color:var(--pen); font-size:18px; border:1.5px solid var(--pen-soft); }
html[data-heft="on"] .meta-row, html[data-heft="on"] .meta-row *{ font-size:16px; color:var(--pen-soft); }
html[data-heft="on"] footer{ background:var(--paper); border-top:2px solid var(--pen); position:relative; z-index:1; }

/* ---------- Heft-Umschalter in der Kopfzeile ---------- */
.heft-btn{ width:40px; height:40px; border:none; background:transparent; border-radius:12px; color:var(--ink-soft); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.heft-btn:hover{ background:var(--bg-soft); color:var(--ink); }
.heft-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
html[data-heft="on"] .heft-btn{ color:var(--pen); }
html[data-heft="on"] .heft-btn:hover{ background:var(--marker); }

/* ---------- Feinschliff ---------- */
html[data-heft="on"] .brand h1{ font-size:23px; }
html[data-heft="on"] .acct-btn, html[data-heft="on"] .acct-avatar, html[data-heft="on"] .acct-menu a, html[data-heft="on"] .acct-menu button, html[data-heft="on"] .mini, html[data-heft="on"] .auth-tabs button, html[data-heft="on"] .auth-in{ font-family:var(--font); }
html[data-heft="on"] .acct-btn{ background:transparent; color:var(--pen); border:2px solid var(--pen); }
html[data-heft="on"] .meta-row b, html[data-heft="on"] .count{ background:none; font-weight:400; color:var(--pen); font-size:18px; }
html[data-heft="on"] .acct-link{ font-family:var(--font); font-weight:400; font-size:18px; color:var(--pen); background:transparent; border:2px solid var(--pen); border-radius:12px; box-shadow:none; }

/* ============================================================
   ZEILENRASTER: Schrift steht auf den Linien, nicht dazwischen.
   Ein Kästchen = --cell (24px). Jede Textzeile ist genau ein Kästchen hoch,
   alle Abstände sind Vielfache davon. Die Rasterlinie liegt auf der Schriftlinie (--gy).
   ============================================================ */
html[data-heft="on"]{ --cell:24px; --gy:20px; --gridbg:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px); }
html[data-heft="on"] body,
html[data-heft="on"] .top, html[data-heft="on"] .searchbar, html[data-heft="on"] .chips, html[data-heft="on"] .meta-row,
html[data-heft="on"] .list, html[data-heft="on"] .overlay, html[data-heft="on"] .overlay-head, html[data-heft="on"] .overlay-body{
  background-color:var(--paper); background-image:var(--gridbg); background-size:var(--cell) var(--cell); background-position:-1px var(--gy);
}
html[data-heft="on"] .top{ box-sizing:border-box; height:72px; padding:0 18px; display:flex; flex-direction:column; justify-content:center; border-bottom:2px solid var(--pen); }
html[data-heft="on"] .toprow{ min-height:0; }
html[data-heft="on"] .searchbar{ box-sizing:border-box; height:72px; padding:0 14px; align-items:center; border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-heft="on"] .chips{ box-sizing:border-box; height:72px; padding:0 18px; margin:0; align-items:center; }
html[data-heft="on"] .meta-row{ box-sizing:border-box; height:48px; padding:0 20px; align-items:center; }
html[data-heft="on"] .overlay-head{ box-sizing:border-box; height:72px; padding:0 16px; border-bottom:2px solid var(--pen); backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-heft="on"] .overlay{ background-image:none; }

/* Inhalt in voller Breite (damit das Raster überall gleich läuft), Text bleibt zentriert */
html[data-heft="on"] .list{ max-width:none; padding:0 max(16px, calc((100% - 720px) / 2)) 96px max(26px, calc((100% - 720px) / 2 + 10px)); gap:0; }
html[data-heft="on"] .overlay-body{ max-width:none; margin:0; padding:24px max(18px, calc((100% - 680px) / 2)) 72px; }

/* Textzeilen: 1 Kästchen */
html[data-heft="on"] p, html[data-heft="on"] li, html[data-heft="on"] .prose-line, html[data-heft="on"] .bullet-list li, html[data-heft="on"] .step{ line-height:var(--cell); }
html[data-heft="on"] .prose-line{ margin:0; font-size:20px; }
html[data-heft="on"] .body-block{ margin:0 0 var(--cell); }
html[data-heft="on"] .bullet-list{ margin:0; }
html[data-heft="on"] .bullet-list li{ margin:0; font-size:20px; }
html[data-heft="on"] .bullet-list li::before{ top:10px; }
html[data-heft="on"] .step{ margin:0; font-size:20px; align-items:flex-start; }
html[data-heft="on"] .step .n{ flex:0 0 24px; height:24px; width:24px; margin-top:0; font-size:15px; }
html[data-heft="on"] .overlay-body h2{ font-size:30px; line-height:calc(var(--cell) * 2); margin:0 0 var(--cell); }
html[data-heft="on"] .subhead{ font-size:21px; line-height:var(--cell); margin:var(--cell) 0 0; }
html[data-heft="on"] .formula-block{ margin:0 0 var(--cell); padding:0 18px; border:0; box-shadow:inset 0 0 0 2px var(--pen); box-sizing:border-box; }
html[data-heft="on"] .fl{ padding:0; line-height:var(--cell); box-sizing:border-box; align-items:center; font-size:20px; }
html[data-heft="on"] .callout{ margin:0 0 var(--cell); padding:0 16px; border:0; box-shadow:inset 0 0 0 2px var(--pen-red); line-height:var(--cell); box-sizing:border-box; }
html[data-heft="on"] .tbl-wrap{ margin:0 0 var(--cell); box-sizing:border-box; }
html[data-heft="on"] .tbl th, html[data-heft="on"] .tbl td{ padding:0 12px; line-height:var(--cell); }
html[data-heft="on"] .pre{ margin:0 0 var(--cell); padding:0 16px; line-height:var(--cell); box-sizing:border-box; }
html[data-heft="on"] .diagram-section{ margin:0 0 var(--cell); }
html[data-heft="on"] .diagram-section .label{ line-height:var(--cell); margin:0; }
html[data-heft="on"] .diagram-frame{ box-sizing:border-box; padding:12px; }
html[data-heft="on"] .nav-buttons{ margin-top:var(--cell); }
html[data-heft="on"] .nav-buttons button{ height:48px; padding:0; }

/* Regelkarten als Heft-Einträge: Marke (1 Zeile), Titel, Text (max. 2 Zeilen), eine Leerzeile dazwischen */
html[data-heft="on"] .rule-card{ box-sizing:border-box; padding:var(--cell) 6px 0; border:0; border-bottom:0; background:transparent; }
html[data-heft="on"] .rule-card .row-top{ margin:0; height:var(--cell); }
html[data-heft="on"] .cat-pill{ height:var(--cell); box-sizing:border-box; display:inline-flex; align-items:center; line-height:1; padding:0 10px; font-size:15px; }
html[data-heft="on"] .rule-card h3{ margin:0; font-size:22px; line-height:var(--cell); }
html[data-heft="on"] .rule-card p{ margin:0; font-size:19px; line-height:var(--cell); }
html[data-heft="on"] .rule-card .fav-star{ margin:-8px -10px -8px 0; }
html[data-heft="on"] .rule-card:hover, html[data-heft="on"] .rule-card:active{ border-color:transparent; }

html[data-heft="on"] .overlay-body h2{ position:relative; top:8px; }
html[data-heft="on"] .formula-block, html[data-heft="on"] .callout{ display:flex; flex-direction:column; justify-content:center; }
html[data-heft="on"] .subhead, html[data-heft="on"] .rule-card h3, html[data-heft="on"] .overlay-body h2{ text-underline-offset:3px; }
html[data-heft="on"] .toprow{ width:100%; box-sizing:border-box; }

/* ---------- Übersicht beruhigen (Version 2) ---------- */
html[data-heft="on"]{ --grid:#e3e9f3; --grid-strong:#c6d1e3; --paper-glass:rgba(253,253,251,.9); }
html[data-heft="on"][data-theme="dark"]{ --grid:#212838; --grid-strong:#313b52; --paper-glass:rgba(23,27,38,.9); }
/* nur EINE schmale Randlinie */
html[data-heft="on"] body::before{ width:0; left:10px; border-right:none; border-left:1.5px solid var(--margin-line); }
/* Kopfzeile + Suchleiste ruhig auf glattem Papier */
html[data-heft="on"] .top, html[data-heft="on"] header.top{ background:var(--paper); background-image:none; border-bottom:1.5px solid var(--pen-soft); }
html[data-heft="on"] .searchbar{ background:var(--paper); padding-bottom:10px; }
html[data-heft="on"] .searchwrap input{ border:1.5px solid var(--pen-soft); border-radius:12px; font-size:18px; }
html[data-heft="on"] .sq-btn{ border:1.5px solid var(--pen-soft); border-radius:12px; width:46px; }
html[data-heft="on"] .sq-btn .sq-tx{ display:none; }
html[data-heft="on"] .acct-link{ border-width:1.5px; border-color:var(--pen-soft); font-size:17px; }
/* Filter: ruhig, einzeilig scrollbar, glatter Hintergrund */
html[data-heft="on"] .chips{ background:var(--paper); padding:10px 16px 12px; margin-bottom:0; border-bottom:1px solid var(--grid-strong); }
html[data-heft="on"] .chip{ border:1.5px solid var(--grid-strong); border-radius:999px; background:var(--paper); color:var(--pen-soft); font-size:16px; padding:6px 14px; }
html[data-heft="on"] .chip.active{ background:var(--marker); color:var(--pen); border-color:var(--pen-soft); }
html[data-heft="on"] .meta-row{ padding:12px 22px 4px; }
/* Karten: Text auf ruhigem Grund, Raster nur am Rand sichtbar */
html[data-heft="on"] .list{ padding:4px 14px 36px 22px; gap:8px; }
html[data-heft="on"] .rule-card{ background:var(--paper-glass); border:1px solid var(--grid-strong); border-bottom-width:2px; border-radius:10px; padding:12px 14px 12px; }
html[data-heft="on"] .rule-card:hover, html[data-heft="on"] .rule-card:active{ background:var(--marker); border-color:var(--pen-soft); }
html[data-heft="on"] .rule-card h3{ font-size:20px; text-decoration:none; background:linear-gradient(transparent 88%, var(--pen-green) 88%, var(--pen-green) 94%, transparent 94%) 0 0/100% 100% no-repeat; display:inline; }
html[data-heft="on"] .rule-card .row-top{ margin-bottom:6px; }
html[data-heft="on"] .cat-pill{ border:none; padding:0; color:var(--pen-red); font-size:14px; text-transform:none; background:none; border-radius:0; }
html[data-heft="on"] .rule-card p{ font-size:16.5px; line-height:1.4; margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html[data-heft="on"] .brand h1{ font-size:20px; white-space:nowrap; }
html[data-heft="on"] .top-actions{ gap:0; }
html[data-heft="on"] .heft-btn, html[data-heft="on"] .theme-btn{ width:36px; }
@media (max-width:360px){ html[data-heft="on"] .brand h1 span{ display:none; } }

html[data-heft="on"] .pro-list li.tier-h{ font-size:22px; font-weight:400; color:var(--pen-green); text-decoration:underline double var(--pen-green); text-decoration-thickness:1.5px; text-underline-offset:4px; text-decoration-skip-ink:none; }
html[data-heft="on"] .pro-list li.tier-h small{ font-size:16px; color:var(--pen-soft); text-decoration:none; }
html[data-heft="on"] .pro-list li.no, html[data-heft="on"] .pro-list li.no svg{ color:var(--pen-soft); }
html[data-heft="on"] .plan-group{ font-size:20px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--pen-green); }
html[data-heft="on"] .plan{ background:var(--paper-glass,var(--paper)); border:1.5px solid var(--grid-strong); box-shadow:none; }
html[data-heft="on"] .plan.on{ border-color:var(--pen); background:var(--marker); box-shadow:none; }
html[data-heft="on"] .plan-name, html[data-heft="on"] .plan-price{ font-weight:400; color:var(--pen); }
html[data-heft="on"] .plan-price small, html[data-heft="on"] .plan-sub{ color:var(--pen-soft); font-size:16px; }
html[data-heft="on"] .plan-badge{ font-weight:400; font-size:15px; }