/*
 * Designsystem „Schulheft + Marktplatz“ – Familie: Material-Übersichten (body.gsr-sh-hub; dazu .gsr-sh-liniert oder .gsr-sh-kariert).
 * Wird von 064-gsr-testshop-schulheft.php nach gsr-schulheft.css eingebunden (Tokens --sh-…, Schriften, Kopf, Fuß kommen von dort).
 * 065-gsr-testshop-schulheft-hubs.php fasst ein Wort der H1 in <span class="gsr-sh-mark"> (Text bleibt gleich).
 * Selektor-Muster: html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target + mindestens zwei Komponentenklassen,
 * weil gsr-home-page-tokens.css und Inline-Stile danach laden (bis Spezifität 1,3,2 mit !important).
 * Teil „Hubs“ (Nacht 28./29.09.2026), siehe output/website-updates/20260928-schulheft-marktplatz/AUFTRAG-hauptseiten.md.
 */

/* ---------- Seitenrhythmus ---------- */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target > .entry-content {
  padding-bottom: 96px !important;
}

/* Unterseiten: .entry-content hat dort schon Seitenbreite, die Blöcke füllen sie. */
html body.gsr-schulheft.gsr-sh-hub.gsr-modern-context-page #wp--skip-link--target .entry-content > :is(.gsr-modern-hub-hero, .gsr-modern-jump-nav, .gsr-topic-links, .gsr-modern-topic-shelf, .gsr-page-faq) {
  width: 100% !important;
}

/* ---------- Einstieg: die Heftseite (kariert = Mathe-Heft, liniert = Deutsch-Heft) ---------- */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro {
  align-items: start !important;
  background-color: var(--sh-paper) !important;
  background-image:
    var(--sh-hauch-fach, none),
    var(--sh-hauch-saison, none),
    linear-gradient(90deg, transparent calc(var(--sh-margin) - 14px), var(--sh-margin-line) calc(var(--sh-margin) - 14px), var(--sh-margin-line) calc(var(--sh-margin) - 12px), transparent calc(var(--sh-margin) - 12px)),
    linear-gradient(var(--sh-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px) !important;
  background-position: var(--sh-hauch-fach-pos, left 12px bottom 14px), var(--sh-hauch-saison-pos, left 10px top 12px), 0 0, 0 -1px, -1px 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat !important;
  background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 100% 100%, 24px 24px, 24px 24px !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: none !important;
  column-gap: 48px !important;
  display: grid !important;
  grid-template-areas: none !important;
  grid-template-columns: var(--sh-margin) minmax(0, 1fr) minmax(0, .9fr) !important;
  grid-template-rows: auto !important;
  margin: 24px auto 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 72px 56px 52px 0 !important;
  position: relative !important;
  row-gap: 0 !important;
  width: var(--gsr-standard-page-width) !important;
}

/* Deutsch-Heft: 32-px-Lineatur, Text steht auf den Linien. Oben liegt eine Klasse-1-Schreibzeile (siehe Randnotiz). */
html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro {
  background-image:
    var(--sh-hauch-fach, none),
    var(--sh-hauch-saison, none),
    linear-gradient(90deg, transparent calc(var(--sh-margin) - 14px), var(--sh-margin-line) calc(var(--sh-margin) - 14px), var(--sh-margin-line) calc(var(--sh-margin) - 12px), transparent calc(var(--sh-margin) - 12px)),
    repeating-linear-gradient(transparent 0 22px, var(--sh-rule) 22px 23px, transparent 23px 32px) !important;
  background-origin: padding-box, padding-box, padding-box, content-box !important; /* Lineatur-Regel: Periode beginnt am Inhalt */
  background-position: var(--sh-hauch-fach-pos, left 12px bottom 14px), var(--sh-hauch-saison-pos, left 10px top 12px), 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
  background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 100% 100%, 100% 32px !important;
  padding-top: 96px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-copy {
  align-items: flex-start;
  align-self: center;
  display: flex !important;
  flex-direction: column;
  grid-area: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  position: static !important;
}

html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-copy {
  align-self: start;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-hub-title {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.25rem) !important;
  font-weight: 400 !important;
  hyphens: manual;
  letter-spacing: -.012em !important;
  line-height: 1.06 !important;
  margin: 0 !important;
  max-width: 18ch !important;
  text-wrap: balance;
}

/* Auf der Lineatur: zwei Linien je Zeile; der Versatz setzt die Grundlinie auf die Heftlinie (Young Serif: Grundlinie bei 32 px + .34 em).
   Höchstens 40 px, damit Versalien (0,75 em) und Oberlängen (0,8 em) unter der nächsten Linie bleiben. */
html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-hub-title {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.5rem) !important;
  line-height: 64px !important;
  max-width: 22ch !important;
  position: relative;
  top: calc(22.25px - .34em); /* Lineatur-Regel, Näherung ohne round() */
  top: calc(54px - round(down, (64px - round(1.046em, 1px) - round(.366em, 1px)) / 2, 1px) - round(1.046em, 1px)); /* Young Serif, 64-px-Zeile: Grundlinie exakt auf der Linie */
}

/* Der eine Moment: ein Markerstrich zieht sich einmal unter das erste Themenwort. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-title > .gsr-sh-mark {
  color: inherit !important;
  display: inline-block;
  isolation: isolate;
  max-width: 100%;
  position: relative;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-title > .gsr-sh-mark::before {
  animation: gsr-sh-hub-marker .95s var(--sh-ease) .35s both;
  background: url("motive/markerstrich.webp") no-repeat 0 50% / 100% 100%;
  bottom: .03em;
  content: "";
  height: .5em;
  left: -.1em;
  opacity: .5;
  position: absolute;
  right: -.12em;
  z-index: -1;
}

@keyframes gsr-sh-hub-marker {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > :is(.gsr-modern-hub-lead, .seo-eyebrow) {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
  margin: 22px 0 0 !important;
  max-width: 34em !important;
  text-transform: none !important;
}

html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > :is(.gsr-modern-hub-lead, .seo-eyebrow) {
  color: var(--sh-ink) !important;
  font-size: 18px !important;
  line-height: 32px !important;
  margin-top: 32px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > p a:not(.gsr-modern-button) {
  color: var(--sh-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--sh-rose-mid) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > p a:not(.gsr-modern-button):hover {
  color: var(--sh-action) !important;
  text-decoration-color: var(--sh-action) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > p:has(> .gsr-modern-button) {
  margin: 32px 0 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy .gsr-modern-button--primary {
  align-items: center !important;
  background: var(--sh-action) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  color: #fff !important;
  display: inline-flex !important;
  font-family: var(--sh-text) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  gap: 8px;
  line-height: 1.2 !important;
  margin: 0 !important;
  min-height: 54px !important;
  padding: 0 28px !important;
  text-decoration: none !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy .gsr-modern-button--primary:hover {
  background: var(--sh-action-deep) !important;
  box-shadow: 5px 5px 0 var(--sh-ink) !important;
  transform: translate(-2px, -2px);
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy .gsr-modern-button--primary:active {
  box-shadow: 1px 1px 0 var(--sh-ink) !important;
  transform: translate(2px, 2px);
}

/* Randnotiz an der Stelle des Heft-Datums (oben rechts), nie als Kicker über der H1. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-eyebrow {
  background: url("motive/welle.svg") no-repeat 100% 100% / 86px 9px;
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 52%;
  padding: 0 0 10px !important;
  position: absolute;
  right: 44px;
  text-align: right;
  text-transform: none !important;
  top: 20px;
  transform: rotate(-2deg);
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-eyebrow a {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: var(--sh-rose-mid) !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px;
}

/* Deutsch-Heft: Die Randnotiz steht in einer eigenen kurzen Klasse-1-Schreibzeile („Häuschen“) an der Stelle des
   Heft-Datums oben rechts, so breit wie die Notiz – kein Band über die Blattbreite, keine Dachzeile über der H1.
   Die Linien sind aus den Maßen der Grundschrift berechnet: Grundlinie bei (40 px − 1,2 em) / 2 + 0,899 em,
   Dach = Versalhöhe 0,807 em, Erdgeschoss = x-Höhe 0,43 em (zart rosé), Keller = Unterlänge 0,272 em.
   Bricht die Notiz um, wiederholt sich die Zeile je 40 px. */
html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-eyebrow {
  --sh-hb: calc((40px - 1.2em) / 2 + .899em);
  background:
    linear-gradient(transparent calc(var(--sh-hb) - .807em - .5px), var(--sh-rule) calc(var(--sh-hb) - .807em - .5px) calc(var(--sh-hb) - .807em + .5px), transparent calc(var(--sh-hb) - .807em + .5px) calc(var(--sh-hb) - .43em - .5px), var(--sh-rule) calc(var(--sh-hb) - .43em - .5px) calc(var(--sh-hb) - .43em + .5px), var(--sh-rose) calc(var(--sh-hb) - .43em + .5px) var(--sh-hb), rgba(152, 76, 103, .34) var(--sh-hb) calc(var(--sh-hb) + 1px), transparent calc(var(--sh-hb) + 1px) calc(var(--sh-hb) + .272em - .5px), var(--sh-rule) calc(var(--sh-hb) + .272em - .5px) calc(var(--sh-hb) + .272em + .5px), transparent calc(var(--sh-hb) + .272em + .5px)) 0 0 / 100% 40px repeat-y,
    var(--sh-paper) !important;
  box-sizing: border-box;
  font-size: 25px !important;
  left: auto;
  line-height: 40px !important;
  max-width: 40%;
  padding: 0 18px !important;
  right: 44px;
  text-align: left;
  top: 22px;
  transform: none;
  width: max-content;
}

/* Lineatur-Regel: Grundlinie der Häuschen-Zeile exakt so gerundet wie die Schrift im Browser (ganze Pixel für
   Ober- und Unterlänge, halber Durchschuss abgerundet); ohne round() gilt die Näherung oben. */
@supports (top: round(1px, 1px)) {
  html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-eyebrow {
    --sh-hb: calc(round(down, (40px - round(.899em, 1px) - round(.301em, 1px)) / 2, 1px) + round(.899em, 1px));
  }
}

/* Die Einstiegscover liegen als lose Blätter auf der Seite: ganz sichtbar, leicht verschieden gedreht, eins mit Washi-Tape. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers {
  align-items: flex-start !important;
  align-self: center;
  display: flex !important;
  gap: 22px !important;
  grid-area: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-content: center;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 26px 6px 18px !important;
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover {
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  display: block !important;
  flex: 0 1 190px;
  inset: auto !important;
  margin: 0 !important;
  min-width: 0;
  overflow: visible !important;
  position: relative !important;
  transform: rotate(-3deg) translateY(12px) !important;
  transition: transform .3s var(--sh-ease) !important;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover--2 {
  transform: rotate(2.2deg) translateY(-8px) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover--3 {
  transform: rotate(-1.4deg) translateY(20px) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover:hover {
  transform: rotate(0deg) translateY(-6px) !important;
}

/* Washi-Tape (Alex, 29.09.2026): jedes lose Blatt ist gleich befestigt – ein Streifen oben mittig, wie Startseite
   und Produktseite. Oben mittig liegt auf den Covern nur Rand; Fach-/Klassenschild (links) und Logo (rechts) bleiben
   frei. Länge und Drehung wechseln leicht, damit es nicht gestempelt wirkt. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover::after {
  background: url("motive/washi-uni.webp") no-repeat 50% 50% / 100% 100%;
  content: "";
  height: 24px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: -12px;
  transform: translateX(-50%) rotate(-4deg);
  width: 80px;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover--1:not(:only-child)::after {
  transform: translateX(-54%) rotate(3deg);
  width: 74px;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover--2::after {
  width: 84px;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover--3::after {
  transform: translateX(-46%) rotate(-1.5deg);
  width: 76px;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover img {
  aspect-ratio: 520 / 751 !important;
  background: var(--sh-card) !important;
  border: 0 !important;
  border-radius: 4.5px !important;
  box-shadow: none !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro--no-covers {
  grid-template-columns: var(--sh-margin) minmax(0, 1fr) !important;
}

/* ---------- Blanko-Blätter: Sachunterricht (zerknüllt, glattgestrichen) und Kunst (Zeichenblatt mit Klecksen) ----------
   Papier, Randlinie und Tintenrand wie bei Karo und Lineatur, nur ohne Linien. Das Material liegt als ::before
   hinter dem Inhalt (isolation am Blatt, z-index −1), vom Blatt abgeschnitten, per multiply wie Farbe auf Papier.
   Keine Bewegung. Herstellung (prozedural, reproduzierbar):
   output/website-updates/20260928-schulheft-marktplatz/motive/papier/knitter.py und kleckse.py.
   - Sachunterricht: Knitter-Karte (kachelbar 1200 × 800) 5-fach verstärkt gespeichert, Deckkraft .2 holt die echte
     Stärke zurück: Papierhelligkeit 94–100 %, Schrift unverändert.
   - Kunst: gemalte Kleckse nur in Randflächen, in denen nie Text oder Cover stehen: Ecke links oben (Randspalte +
     72-px-Kopfrand), Unterkante und Ecke rechts unten (≤ 46 bzw. 42 px hoch, das Blatt hat 52 px Fußrand).
     Unter 960 px nur ein kleiner Klecks rechts oben (≤ 36 px hoch, Kopfrand 40 px). */

html body.gsr-schulheft.gsr-sh-hub:is(.gsr-sh-blanko, .gsr-sh-kunst, .gsr-sh-vorschule) #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro {
  background-image:
    var(--sh-hauch-fach, none),
    var(--sh-hauch-saison, none),
    linear-gradient(90deg, transparent calc(var(--sh-margin) - 14px), var(--sh-margin-line) calc(var(--sh-margin) - 14px), var(--sh-margin-line) calc(var(--sh-margin) - 12px), transparent calc(var(--sh-margin) - 12px)) !important;
  background-position: var(--sh-hauch-fach-pos, left 12px bottom 14px), var(--sh-hauch-saison-pos, left 10px top 12px), 0 0 !important;
  background-repeat: no-repeat !important;
  background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 100% 100% !important;
  isolation: isolate;
}

html body.gsr-schulheft.gsr-sh-hub:is(.gsr-sh-blanko, .gsr-sh-kunst, .gsr-sh-vorschule) #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::before,
html body.gsr-schulheft.gsr-sh-hub.gsr-sh-vorschule #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::after {
  border-radius: calc(var(--sh-radius) - var(--sh-stroke));
  content: "";
  display: block !important; /* gsr-home-page-tokens.css blendet :before/:after der Hub-Einstiege mit !important aus */
  height: auto;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  width: auto;
  z-index: -1;
}

html body.gsr-schulheft.gsr-sh-hub.gsr-sh-blanko #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::before {
  background: url("motive/papier-knitter.webp") -40px -24px / 1200px 800px repeat;
  opacity: .2;
}

html body.gsr-schulheft.gsr-sh-hub.gsr-sh-kunst #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::before {
  background:
    url("motive/klecks-rose.webp") 0 0 / 230px 150px no-repeat,
    url("motive/klecks-ocker.webp") 44% 100% / 190px 50px no-repeat,
    url("motive/klecks-gruen.webp") 100% 100% / 140px 54px no-repeat;
}

@media (max-width: 959px) {
  html body.gsr-schulheft.gsr-sh-hub.gsr-sh-kunst #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::before {
    background: url("motive/klecks-rose-s.webp") 100% 0 / 128px 38px no-repeat;
  }
}

/* ---------- Fach- und Saison-Hauch (Alex, 29.09.2026) ----------
   Je ein gemalter Gegenstand (L, 96–120 px) in der Randspalte des Einstiegsblatts: Fach unten links, Saison oben links
   (Kunst/Vorschule: Saison unter den Klecksen). Höchstens zwei je Blatt; nie über Text, Knopf oder Cover (Randspalte +
   Spaltenabstand = 120 px, Text beginnt bei 120 px). Unter 960 px aus. Keine Bewegung. Die Lagen stehen in allen drei
   Blatt-Regeln (Karo, Lineatur, Blanko) vorn und bleiben leer (none), bis die Variable gesetzt ist.
   Vorhanden: Füller (Deutsch), Herbstlaub (Herbst). Weitere: Datei motive/fach-<fach>-l.webp bzw. motive/saison-<saison>-l.webp
   ablegen und die Zeile einkommentieren (Codex-Auftrag „Fach- und Saison-Hauch“). */
html body.gsr-schulheft.gsr-sh-hub.gsr-sh-fach-deutsch { --sh-hauch-fach: url("motive/fueller-l.webp"); }
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-fach-mathematik { --sh-hauch-fach: url("motive/fach-mathematik-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-fach-sachunterricht { --sh-hauch-fach: url("motive/fach-sachunterricht-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-fach-kunst { --sh-hauch-fach: url("motive/fach-kunst-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-fach-sport { --sh-hauch-fach: url("motive/fach-sport-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-fach-lernspiele { --sh-hauch-fach: url("motive/fach-lernspiele-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-fach-classroommanagement { --sh-hauch-fach: url("motive/fach-classroom-l.webp"); } */
html body.gsr-schulheft.gsr-sh-hub.gsr-sh-saison-herbst { --sh-hauch-saison: url("motive/stilprobe-1/gouache/herbstlaub-l.webp"); }
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-saison-halloween { --sh-hauch-saison: url("motive/saison-halloween-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-saison-sanktmartin { --sh-hauch-saison: url("motive/saison-sanktmartin-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-saison-advent { --sh-hauch-saison: url("motive/saison-advent-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-saison-weihnachten { --sh-hauch-saison: url("motive/saison-weihnachten-l.webp"); } */
/* html body.gsr-schulheft.gsr-sh-hub.gsr-sh-saison-winter { --sh-hauch-saison: url("motive/saison-winter-l.webp"); } */

/* Vorschule: die Bastelecke hat ihre eigenen Gegenstände (Schere, Klebestift); Kunst/Vorschule: Saison unter den Klecksen. */
html body.gsr-schulheft.gsr-sh-hub.gsr-sh-vorschule { --sh-hauch-fach: none; }
html body.gsr-schulheft.gsr-sh-hub:is(.gsr-sh-kunst, .gsr-sh-vorschule) { --sh-hauch-saison-pos: left 10px top 150px; }

@media (max-width: 959px) {
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro {
    --sh-hauch-fach: none;
    --sh-hauch-saison: none;
  }
}

/* ---------- Vorschule: Zeichenblatt mit Bastelecke (Alex, 29.09.2026: „Schere, Kleber und Kleckse“) ----------
   Blatt wie Kunst (glatt, blanko), in den Rändern eine ruhige Bastel-Komposition. Zwei Lagen, beide hinter dem Inhalt:
   ::before  Farbe (multiply, wie Kunst): Rosé-Klecks in der Ecke links oben, grüner Klecks in der Ecke rechts unten.
   ::after   Papier (deckend, normal): geschnittener Ocker-Streifen im Kopfrand, der teils auf dem Rosé-Klecks liegt;
             links unten in der Randspalte ein gerissenes Rosé-Stück mit einem grünen Wimpel-Dreieck darauf.
   Freie Flächen ab 960 px: Kopfrand 72 px (Randnotiz steht rechts), Randspalte + Spaltenabstand 120 px (Text und
   Knopf beginnen bei 120 px), Fußrand 52 px. Alles liegt darin, nie über Text, Knopf oder Cover.
   Unter 960 px nur Kopfrand (40 px): kleiner Rosé-Klecks rechts oben und der Streifen verkleinert links oben.
   Schnipsel: motive/schnipsel-{ocker,rose,gruen}.webp (1,9 / 3,5 / 1,0 KB), prozedural aus
   output/website-updates/20260928-schulheft-marktplatz/motive/papier/schnipsel.py.

   Schere und Klebestift (Codex, Welle Vorschule/Basteln, siehe 00_Uebergaben/auftrag-codex-gemalte-website-motive-2026-09-28.md):
   Die Plätze sind schon da (erste zwei Lagen von ::after), bleiben aber leer (none), solange die Variable fehlt.
   Einbau: Datei nach motive/ legen und die passende Zeile unten einkommentieren. Nichts sonst ändern.
   - schere-m.webp: liegend, 64 × höchstens 40 CSS-px (Datei 128 × ≤ 80), im Kopfrand rechts neben dem Streifen.
   - klebestift-m.webp: liegend, 64 × höchstens 20 CSS-px (Datei 128 × ≤ 40), im Fußrand neben dem Rosé-Stück. */

html body.gsr-schulheft.gsr-sh-hub.gsr-sh-vorschule {
  /* --sh-vs-schere: url("motive/schere-m.webp"); */
  /* --sh-vs-klebestift: url("motive/klebestift-m.webp"); */
}

html body.gsr-schulheft.gsr-sh-hub.gsr-sh-vorschule #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::before {
  background:
    url("motive/klecks-rose.webp") 0 0 / 230px 150px no-repeat,
    url("motive/klecks-gruen.webp") 100% 100% / 140px 54px no-repeat;
}

html body.gsr-schulheft.gsr-sh-hub.gsr-sh-vorschule #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::after {
  background-image:
    var(--sh-vs-schere, none),
    var(--sh-vs-klebestift, none),
    url("motive/schnipsel-gruen.webp"),
    url("motive/schnipsel-rose.webp"),
    url("motive/schnipsel-ocker.webp");
  background-position:
    left 158px top 14px,
    left 116px bottom 16px,
    left 66px bottom 60px,
    left 6px bottom 14px,
    left 30px top 16px;
  background-repeat: no-repeat;
  background-size: 64px auto, 64px auto, 44px 44px, 90px 65px, 122px 38px;
  mix-blend-mode: normal;
}

@media (max-width: 959px) {
  html body.gsr-schulheft.gsr-sh-hub.gsr-sh-vorschule #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::before {
    background: url("motive/klecks-rose-s.webp") 100% 0 / 128px 38px no-repeat;
  }

  html body.gsr-schulheft.gsr-sh-hub.gsr-sh-vorschule #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro::after {
    background: url("motive/schnipsel-ocker.webp") left 8px top 6px / 92px 29px no-repeat;
  }
}

/* ---------- Themenlinks: Grundschrift-Etikett (27 px, Handy 24 px) + Chips ---------- */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf.gsr-topic-links {
  align-items: center !important;
  background: none !important;
  border: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 16px !important;
  margin: 32px auto 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-topic-links > .gsr-modern-topic-shelf__head {
  display: block !important;
  margin: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf.gsr-topic-links > .gsr-modern-topic-shelf__head h2 {
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  margin: 0 8px 0 4px !important;
  text-transform: none !important;
  transform: rotate(-1.5deg);
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-topic-links > .gsr-modern-topic-grid {
  display: flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 10px !important;
  grid-template-columns: none !important;
}

/* Chips überall gleich (Vorgabe C): Themenlinks, „Auf dieser Seite“ (aufgeklappt), Vorschule-Sprungmarken, „Weiter entdecken“.
   Inter 620, 16 px, 1,5 px Tintenrand, Pille; Hover/Fokus wie Startseite: Aktionsrosé, weiße Schrift, 3 px Tintenversatz. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-topic-links > .gsr-modern-topic-grid > .gsr-modern-button,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav > nav > a,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-formats > a,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-related > a {
  align-items: center !important;
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  display: inline-flex !important;
  font-family: var(--sh-text) !important;
  font-size: 16px !important;
  font-weight: 620 !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  min-height: 46px !important;
  padding: 6px 18px !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear, color .16s linear;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-topic-links > .gsr-modern-topic-grid > .gsr-modern-button {
  white-space: nowrap !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-topic-links > .gsr-modern-topic-grid > .gsr-modern-button > span {
  overflow-wrap: normal !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-topic-links > .gsr-modern-topic-grid > .gsr-modern-button:is(:hover, :focus-visible),
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav > nav > a:is(:hover, :focus-visible),
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-formats > a:is(:hover, :focus-visible),
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-related > a:is(:hover, :focus-visible) {
  background: var(--sh-action) !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  color: #fff !important;
  transform: translate(-2px, -2px);
}

/* ---------- „Auf dieser Seite“: Steuerelement, keine Randnotiz (Vorgabe C) ---------- */

/* Geschlossen ein Inter-Chip mit Tintenrand auf Papier; aufgeklappt liegen die Chips darunter, ohne Rosé-Feld. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 32px auto 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: var(--gsr-standard-page-width) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav > summary {
  align-items: center !important;
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: var(--sh-ink) !important;
  cursor: pointer;
  display: flex !important;
  font-family: var(--sh-text) !important;
  font-size: 16px !important;
  font-weight: 620 !important;
  gap: 12px;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  list-style: none !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  text-transform: none !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear;
  width: fit-content !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav > summary:hover {
  background: var(--sh-rose) !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  transform: translate(-2px, -2px);
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav[open] > summary {
  background: var(--sh-rose) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav > summary::-webkit-details-marker {
  display: none;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav > summary::after {
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  content: "" !important;
  display: block !important;
  flex: 0 0 auto;
  height: 7px;
  margin: -4px 0 0;
  transform: rotate(45deg);
  transition: transform .2s var(--sh-ease);
  width: 7px;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav[open] > summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav[open] > nav {
  background: none !important;
  border: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  grid-template-columns: none !important;
  height: auto !important;
  margin: 14px 0 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* ---------- Materialreihen (Haupt-Hubs) ---------- */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf:not(.gsr-topic-links) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 72px auto 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf:not(.gsr-topic-links) > .gsr-modern-topic-shelf__head {
  align-items: end;
  display: grid !important;
  gap: 14px 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 60ch);
  margin: 0 0 28px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf__head > div:first-child {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}

/* Reihen-Kicker als Randnotiz unter der Überschrift, nicht darüber */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf__head > div:first-child > .gsr-modern-eyebrow {
  align-self: flex-start;
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 8px 0 0 4px !important;
  order: 2;
  text-transform: none !important;
  transform: rotate(-1.5deg);
}

/* Vorgabe D: Die wiederholte Notiz „Eine Auswahl aus diesem Bereich“ steht nur im ersten Regal der Seite in
   Grundschrift. Jedes spätere Regal (auch nach Zwischenabschnitten; Vorschule: je Regal eine .gsr-vorschule-row)
   zeigt sie leise in Inter am selben Platz unter der Überschrift. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf:has(> .gsr-modern-topic-shelf__head .gsr-modern-eyebrow) ~ .gsr-modern-topic-shelf, .gsr-vorschule-row:has(.gsr-modern-topic-shelf__head .gsr-modern-eyebrow) ~ .gsr-vorschule-row) .gsr-modern-topic-shelf__head > div:first-child > .gsr-modern-eyebrow {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 10px 0 0 !important;
  transform: none;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf:not(.gsr-topic-links) > .gsr-modern-topic-shelf__head h2,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf:not(:has(.gsr-modern-topic-grid)) > h2,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-materialien-panel .gsr-materialien-intro > h2,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-modern-topic-shelf__head h2 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.012em !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  max-width: 24ch;
  text-transform: none !important;
  text-wrap: balance;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf__head > div:last-child {
  margin: 0 !important;
  max-width: 60ch !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf__head > div:last-child p, .gsr-materialien-panel .gsr-materialien-intro > p) {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 16.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 60ch !important;
}

/* Ruhiger Fließtext (Textregal, Einleitung der Saisonseiten, Leitfaden): Maß um 68 Zeichen */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf:not(:has(.gsr-modern-topic-grid)) > p, .seo-page > p, .seo-page .gsr-page-nav-section > p) {
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  margin: 0 0 16px !important;
  max-width: 68ch !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf:not(:has(.gsr-modern-topic-grid)) > h2 {
  margin: 0 0 18px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .seo-page .gsr-page-nav-section > h2 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.012em !important;
  line-height: 1.08 !important;
  margin: 0 0 16px !important;
  max-width: 30ch;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-hub-hero ~ .seo-page {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .seo-page .gsr-page-nav-section {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 64px 0 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .seo-page > p:first-child {
  margin-top: 64px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(:is(.gsr-modern-topic-shelf, .seo-page) p a:not([class*="button"]), .gsr-modern-topic-shelf__head p a) {
  color: var(--sh-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--sh-rose-mid) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf, .seo-page) p a:not([class*="button"]):hover {
  color: var(--sh-action) !important;
  text-decoration-color: var(--sh-action) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target > .entry-content > .gsr-modern-hub-guide {
  border: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ---------- Kacheln: flach weiß, Haarlinie, 8 px; Hover mit hartem Tintenversatz ---------- */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf:not(.gsr-topic-links) > .gsr-modern-topic-grid, .gsr-materialien-panel .gsr-materialien-grid) {
  display: grid !important;
  gap: 22px 20px !important;
  grid-auto-columns: auto !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-grid > .gsr-modern-topic-card, .gsr-materialien-grid > .gsr-material-card) {
  background: var(--sh-card) !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  transition: transform .18s var(--sh-ease), box-shadow .18s var(--sh-ease), border-color .18s linear !important;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-grid > .gsr-modern-topic-card:is(:hover, :focus-within), .gsr-materialien-grid > .gsr-material-card:is(:hover, :focus-within)) {
  border-color: var(--sh-ink) !important;
  box-shadow: 4px 4px 0 var(--sh-ink) !important;
  transform: translate(-3px, -3px) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card > .gsr-modern-topic-card__image, .gsr-material-card > .gsr-material-card-link > :is(img, picture)) {
  aspect-ratio: 520 / 751 !important;
  background: #f6f3f1 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sh-hair) !important;
  border-radius: 0 !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  overflow: hidden;
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card > .gsr-modern-topic-card__image img, .gsr-material-card > .gsr-material-card-link > picture > img) {
  aspect-ratio: 520 / 751 !important;
  background: #f6f3f1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  filter: none !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card > .gsr-material-card-link {
  color: var(--sh-ink) !important;
  display: flex !important;
  flex: 0 0 auto;
  flex-direction: column !important;
  text-decoration: none !important;
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-material-card > .gsr-material-card-link:focus-visible, .gsr-modern-topic-card > .gsr-modern-topic-card__image:focus-visible) {
  outline-offset: -4px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card > .gsr-modern-topic-card__body {
  background: var(--sh-card) !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  padding: 0 !important;
}

/* Titel: genau zwei Zeilen (Handy bis vier). Alte Regeln setzen 16/16/5 px Innenabstand bei border-box – hier content-box. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card__body > h3, .gsr-material-card > .gsr-material-card-link > .gsr-material-card-title) {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  background: none !important;
  box-sizing: content-box !important;
  color: var(--sh-ink) !important;
  display: -webkit-box !important;
  font-family: var(--sh-text) !important;
  font-size: 15.5px !important;
  font-weight: 620 !important;
  height: auto !important;
  letter-spacing: -.005em !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
  max-height: 2.7em !important;
  min-height: 2.7em !important;
  overflow: hidden !important;
  padding: 12px 14px 0 !important;
  hyphens: auto;
  overflow-wrap: break-word !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > h3 a {
  color: var(--sh-ink) !important;
  text-decoration: none !important;
}

/* Kachel-Fußzeile (Vorgabe A, gleich in Hubs, Seiten und Produkt): Preis Inter 650 15 px in Tinte, Streichpreis
   13,5 px weiche Tinte, %-Plakette als kleine Rosé-Pille, Aktionslink dunkles Heftrosé (unterstrichen erst bei
   Hover/Fokus der Kachel), Warenkorb/Merken 36 px rund. Rosé ist nur für Aktionen. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar, .gsr-materialien-grid > .gsr-material-card > .gsr-material-card-toolbar) {
  align-items: flex-end !important;
  background: none !important;
  border: 0 !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 4px 10px !important;
  height: auto !important;
  justify-content: space-between !important;
  margin: auto 0 0 !important;
  min-height: 0 !important;
  padding: 6px 14px 13px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card__toolbar > span, .gsr-material-card-toolbar > .gsr-material-card-toolbar-price) {
  align-items: baseline;
  color: var(--sh-ink) !important;
  column-gap: 6px;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap;
  font-family: var(--sh-text) !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: visible !important;
  row-gap: 3px;
  white-space: normal !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card__toolbar > span > *, .gsr-material-card-toolbar-price > *) {
  white-space: nowrap;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card__toolbar > span > b, .gsr-material-card-toolbar-price > ins, .gsr-material-card-toolbar-price .woocommerce-Price-amount) {
  background: none !important;
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card__toolbar > span > s, .gsr-material-card-toolbar-price > del) {
  color: var(--sh-ink-soft) !important;
  font-size: 13.5px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  text-decoration: line-through !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar-price > del .woocommerce-Price-amount {
  color: inherit !important;
  font: inherit !important;
}

/* Reihenfolge wie auf den Themenkacheln: aktueller Preis zuerst, Streichpreis danach (WooCommerce liefert del vor ins). */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar-price > ins {
  order: -1;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__toolbar > span > em {
  align-self: center;
  background: var(--sh-rose) !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 999px !important;
  color: var(--sh-ink) !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  padding: 1px 7px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__toolbar > .gsr-modern-topic-card__more {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--sh-action) !important;
  flex: 0 0 auto;
  font-family: var(--sh-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 2px 0 !important;
  text-decoration: none !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-grid > .gsr-modern-topic-card:is(:hover, :focus-within) .gsr-modern-topic-card__toolbar > .gsr-modern-topic-card__more {
  text-decoration: none !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 2px !important;
}

/* „Bald auch hier kaufen“ (deaktiviert): leiser Hinweis ohne Fläche und ohne Rahmen, einzeilig */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-material-card-shop-preview {
  margin: -4px 0 0 !important;
  padding: 0 14px 12px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-shop-preview > .gsr-material-card-coming-soon {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sh-ink-soft) !important;
  cursor: default;
  display: block !important;
  font-family: var(--sh-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  height: auto !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
  opacity: 1 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  height: auto !important;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > :is(a, button).gsr-material-card-icon-button:not(.gsr-material-card-eduki, .gsr-freebie-card-download) {
  align-items: center !important;
  background: var(--sh-paper) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  display: inline-flex !important;
  flex: 0 0 36px !important;
  height: 36px !important;
  justify-content: center !important;
  max-height: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  transition: background-color .16s linear, color .16s linear;
  width: 36px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > :is(a, button).gsr-material-card-icon-button:not(.gsr-material-card-eduki, .gsr-freebie-card-download):hover {
  background: var(--sh-rose) !important;
  color: var(--sh-ink) !important;
}

/* Gemerkt (Zustand, keine Deko): bleibt gefüllt, damit man es erkennt. */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > button.gsr-material-card-wishlist[aria-pressed="true"] {
  background: var(--sh-action) !important;
  color: #fff !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > :is(a, button).gsr-material-card-icon-button:not(.gsr-material-card-eduki, .gsr-freebie-card-download) svg {
  height: 19px !important;
  max-height: 19px !important;
  max-width: 19px !important;
  width: 19px !important;
}

/* „Alle aus diesem Bereich →“ und „Alle Materialien zu … anzeigen“ als Pillenknopf */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf > .gsr-modern-topic-shelf__footer, .gsr-materialien-panel > .gsr-seo-material-preview-link) {
  background: none !important;
  border: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf__footer > .gsr-modern-topic-shelf__all, .gsr-materialien-panel > .gsr-seo-material-preview-link > a) {
  align-items: center !important;
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  display: inline-flex !important;
  font-family: var(--sh-text) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  gap: 8px !important;
  height: auto !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-height: 50px !important;
  padding: 8px 24px !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear, color .16s linear;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf__footer > .gsr-modern-topic-shelf__all:hover, .gsr-materialien-panel > .gsr-seo-material-preview-link > a:hover) {
  background: var(--sh-action) !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  color: #fff !important;
  transform: translate(-2px, -2px);
}

/* ---------- Materialpanels der Unterseiten ---------- */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .seo-page > .gsr-materialien-shortcode {
  margin: 72px 0 0 !important;
  max-width: none !important;
  padding: 0 !important;
  transform: none !important;
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-materialien-shortcode > .gsr-materialien-panel {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-materialien-panel > .gsr-materialien-panel-head {
  background: none !important;
  border: 0 !important;
  display: block !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-materialien-panel-head > .gsr-materialien-intro {
  align-items: end;
  display: grid !important;
  gap: 14px 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 60ch);
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-materialien-panel .gsr-materialien-intro > p:empty {
  display: none !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-materialien-panel > .gsr-materialsuche-shell, .gsr-materialsuche-shell > .gsr-materialsuche-main, .gsr-materialsuche-main > .gsr-materialsuche-results) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ---------- Fragen: liniertes Blatt mit Randlinie, Text auf den 32-px-Linien ---------- */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-page-faq.gsr-topic-faq,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .seo-page .gsr-page-faq,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-faq {
  background-color: var(--sh-paper) !important;
  background-image:
    linear-gradient(90deg, transparent calc(var(--sh-margin) - 14px), var(--sh-margin-line) calc(var(--sh-margin) - 14px), var(--sh-margin-line) calc(var(--sh-margin) - 12px), transparent calc(var(--sh-margin) - 12px)),
    repeating-linear-gradient(transparent 0 22px, var(--sh-rule) 22px 23px, transparent 23px 32px) !important;
  background-origin: padding-box, content-box !important; /* Lineatur-Regel: Periode beginnt am Inhalt */
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 100% 32px !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  column-gap: 28px !important;
  display: grid !important;
  grid-template-columns: var(--sh-margin) minmax(0, 1fr) !important;
  margin: 88px auto 0 !important;
  max-width: none !important;
  padding: 48px 56px 56px 0 !important;
  row-gap: 0 !important;
  width: var(--gsr-standard-page-width) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .seo-page .gsr-page-faq,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-faq {
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq, .gsr-vorschule-faq) > :is(h2, .gsr-page-faq-list, details, .gsr-page-faq-eyebrow) {
  grid-column: 2;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-page-faq > .gsr-page-faq-eyebrow {
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 32px !important;
  margin: 0 !important;
  order: 2;
  position: relative;
  text-transform: none !important;
  top: calc(6.25px - .299em); /* Lineatur-Regel, Näherung ohne round() */
  top: calc(22px - round(down, (32px - round(.899em, 1px) - round(.301em, 1px)) / 2, 1px) - round(.899em, 1px)); /* Grundschrift, 32-px-Zeile */
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq, .gsr-vorschule-faq) > h2 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: clamp(2rem, 1.3rem + 1.9vw, 2.5rem) !important; /* Lineatur-Regel: Oberlänge 0,8 em ≤ 32 px, Buchstaben stoßen höchstens an die nächste Linie */
  font-weight: 400 !important;
  letter-spacing: -.012em !important;
  line-height: 64px !important;
  margin: 0 !important;
  position: relative;
  text-transform: none !important;
  top: calc(22.25px - .34em); /* Lineatur-Regel, Näherung ohne round() */
  top: calc(54px - round(down, (64px - round(1.046em, 1px) - round(.366em, 1px)) / 2, 1px) - round(1.046em, 1px));
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-page-faq > .gsr-page-faq-list {
  background: none !important;
  border: 0 !important;
  display: block !important;
  margin: 0 !important;
  max-width: 72ch;
  order: 3;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  max-width: 72ch;
  padding: 0 !important;
}

/* Jede Frage beginnt nach einer freien Heftzeile und steht auf der Linie (Young Serif 21 px: Grundlinie bei 23 px). */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details > summary {
  background: none !important;
  border: 0 !important;
  color: var(--sh-ink) !important;
  cursor: pointer;
  display: block !important;
  font-family: var(--sh-display) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 32px !important;
  list-style: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 32px 44px 0 0 !important;
  position: relative;
  top: calc(6.25px - .34em); /* Lineatur-Regel, Näherung ohne round() */
  top: calc(22px - round(down, (32px - round(1.046em, 1px) - round(.366em, 1px)) / 2, 1px) - round(1.046em, 1px)); /* Young Serif, 32-px-Zeile */
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details > summary::-webkit-details-marker {
  display: none;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details > summary::before {
  display: none !important;
}

/* Plus/Minus aus zwei Tintenstrichen statt Glyphe */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details > summary::after {
  background:
    linear-gradient(var(--sh-ink), var(--sh-ink)) 50% 50% / 14px 2px no-repeat,
    linear-gradient(var(--sh-ink), var(--sh-ink)) 50% 50% / 2px 14px no-repeat !important;
  border: 0 !important;
  content: "" !important;
  height: 16px !important;
  position: absolute !important;
  right: 6px !important;
  top: 40px !important;
  transform: none !important;
  transition: background-size .2s var(--sh-ease);
  width: 16px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details[open] > summary::after {
  background-size: 14px 2px, 2px 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details > summary:hover {
  color: var(--sh-action) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-page-faq-list > details > div {
  margin: 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list > details > div > p, .gsr-vorschule-faq > details > p) {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 18px !important;
  line-height: 32px !important;
  margin: 0 !important;
  max-width: 68ch !important;
  padding: 0 !important; /* Lineatur-Regel: alte 20 px unten verschoben jede folgende Frage */
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-page-faq-list > details > div > p + p {
  margin-top: 32px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details p a {
  color: var(--sh-action) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px;
}

/* ---------- Vorschule (#gsr-vorschule-hub): Sonderaufbau im selben Heft ---------- */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(#gsr-vorschule-hub .gsr-modern-hub-hero.gsr-material-intro, #gsr-vorschule-hub .gsr-modern-topic-shelf:not(.gsr-topic-links)) {
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-modern-topic-shelf:not(.gsr-topic-links) {
  margin: 72px 0 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-modern-topic-shelf:not(.gsr-topic-links) > .gsr-modern-topic-grid {
  gap: 22px 20px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-text-link {
  margin: 24px 0 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-text-link > a {
  align-items: center;
  color: var(--sh-ink) !important;
  display: inline-flex;
  font-family: var(--sh-text) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  min-height: 44px;
  text-decoration: underline !important;
  text-decoration-color: var(--sh-rose-mid) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 6px;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-text-link > a:hover {
  color: var(--sh-action) !important;
  text-decoration-color: var(--sh-action) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-formats {
  align-items: center !important;
  background: none !important;
  border: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(#gsr-vorschule-hub > .gsr-vorschule-formats > span, #gsr-vorschule-hub > .gsr-vorschule-related > strong) {
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  margin: 0 10px 0 4px !important;
  text-transform: none !important;
  transform: rotate(-1.5deg);
}

/* „Was möchtest du üben?“ wie die Klassenetiketten der Startseite */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-topics {
  align-items: center;
  background: none !important;
  border: 0 !important;
  border-top: 1px dashed var(--sh-rule) !important;
  display: grid !important;
  gap: 16px 28px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 48px 0 0 !important;
  padding: 28px 0 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-topics > h2 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 11em;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topics > .gsr-vorschule-topic-grid {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topic-grid > .gsr-vorschule-topic {
  align-items: center !important;
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 5px var(--sh-card), inset 0 0 0 6.5px rgba(152, 76, 103, .42) !important;
  color: var(--sh-ink) !important;
  display: flex !important;
  font-family: var(--sh-hand) !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  min-height: 74px !important;
  padding: 0 14px 10px !important;
  position: relative;
  text-align: center;
  text-decoration: none !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topic-grid > .gsr-vorschule-topic::after {
  background: rgba(63, 52, 54, .28);
  bottom: 18px;
  content: "";
  height: 1px;
  left: 16%;
  position: absolute;
  right: 16%;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topic-grid > .gsr-vorschule-topic > span[aria-hidden="true"] {
  display: none !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topic-grid > .gsr-vorschule-topic > span:not([aria-hidden]) {
  color: inherit !important;
  font: inherit !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topic-grid > .gsr-vorschule-topic:hover {
  background: var(--sh-rose) !important;
  box-shadow: inset 0 0 0 5px var(--sh-rose), inset 0 0 0 6.5px rgba(152, 76, 103, .55), 4px 4px 0 var(--sh-ink) !important;
  transform: translate(-2px, -2px);
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-row {
  margin: 0 !important;
  padding: 0 !important;
  scroll-margin-top: 96px;
}

/* „Weiter entdecken“ als Rosé-Feld mit Chips (wie „Schon weiter planen?“ auf der Startseite) */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-related {
  align-items: center !important;
  background: var(--sh-rose) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin: 72px 0 0 !important;
  padding: 22px 28px !important;
}

/* ---------- Tablet ---------- */

@media (max-width: 1099px) {
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf:not(.gsr-topic-links) > .gsr-modern-topic-grid, .gsr-materialien-panel .gsr-materialien-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf:not(.gsr-topic-links) > .gsr-modern-topic-shelf__head, .gsr-materialien-panel-head > .gsr-materialien-intro) {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-topics {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 959px) {
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro {
    column-gap: 0 !important;
    grid-template-columns: var(--sh-margin) minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    padding: 40px 22px 32px 0 !important;
  }

  html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-modern-hub-hero.gsr-material-intro {
    padding-top: 32px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-hub-title {
    hyphens: auto;
    max-width: none !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-copy {
    align-self: start;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-topic-links > .gsr-modern-topic-grid > .gsr-modern-button {
    white-space: normal !important;
  }

  html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-hub-title {
    font-size: 30px !important;
    line-height: 32px !important;
    top: calc(6.25px - .34em);
    top: calc(22px - round(down, (32px - round(1.046em, 1px) - round(.366em, 1px)) / 2, 1px) - round(1.046em, 1px));
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-eyebrow {
    font-size: 24px !important;
    align-self: flex-end;
    margin: 36px 4px 0 0 !important;
    max-width: 100%;
    order: 5;
    position: static;
  }

  html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > .gsr-modern-eyebrow {
    font-size: 24px !important;
    align-self: flex-end;
    margin: 32px 0 0 !important;
    max-width: 100%;
    padding: 0 14px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers {
    align-self: start;
    gap: 14px !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 30px 2px 20px !important;
  }
}

/* ---------- Handy ---------- */

@media (max-width: 639px) {
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > :is(.gsr-modern-hub-lead, .seo-eyebrow) {
    font-size: 17px !important;
    margin-top: 18px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub.gsr-sh-liniert #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > :is(.gsr-modern-hub-lead, .seo-eyebrow) {
    line-height: 32px !important;
    margin-top: 32px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-copy > p:has(> .gsr-modern-button) {
    margin-top: 28px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover::after {
    height: 17px;
    top: -8px;
    width: 54px;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > :is(.gsr-modern-hub-cover--1:not(:only-child), .gsr-modern-hub-cover--2, .gsr-modern-hub-cover--3)::after {
    width: 52px;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf:not(.gsr-topic-links),
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .seo-page > .gsr-materialien-shortcode,
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-modern-topic-shelf:not(.gsr-topic-links) {
    margin-top: 56px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf:not(.gsr-topic-links) > .gsr-modern-topic-grid, .gsr-materialien-panel .gsr-materialien-grid) {
    gap: 14px 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf__head > div:last-child p, .gsr-materialien-panel .gsr-materialien-intro > p) {
    font-size: 16px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card__body > h3, .gsr-material-card > .gsr-material-card-link > .gsr-material-card-title) {
    -webkit-line-clamp: 4 !important;
    font-size: 15px !important;
    max-height: 5.4em !important;
    padding: 10px 11px 0 !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar, .gsr-materialien-grid > .gsr-material-card > .gsr-material-card-toolbar) {
    padding: 6px 11px 11px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-material-card-shop-preview {
    padding: 0 11px 11px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav > summary {
    min-height: 44px !important;
    padding: 0 18px !important;
  }

  /* Grundschrift auf dem Handy: Etiketten 24 px, Randnotizen 24 px. Getrennte Regeln, damit die Spezifität
     der Etiketten (ID) nicht die Inter-Notiz der späteren Regale (Vorgabe D) überstimmt. */
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf.gsr-topic-links > .gsr-modern-topic-shelf__head h2, #gsr-vorschule-hub > .gsr-vorschule-formats > span, #gsr-vorschule-hub > .gsr-vorschule-related > strong) {
    font-size: 24px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-shelf__head > div:first-child > .gsr-modern-eyebrow,
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-page-faq > .gsr-page-faq-eyebrow {
    font-size: 24px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-topic-links > .gsr-modern-topic-grid > .gsr-modern-button,
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target details.gsr-modern-jump-nav > nav > a,
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-formats > a,
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-related > a {
    min-height: 44px !important;
    padding: 6px 15px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-page-faq.gsr-topic-faq,
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .seo-page .gsr-page-faq,
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-faq {
    background-position: 0 0, 0 0 !important;
    column-gap: 16px !important;
    margin-top: 64px !important;
    padding: 32px 20px 40px 0 !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq, .gsr-vorschule-faq) > h2 {
    line-height: 32px !important;
    top: calc(6.25px - .34em);
    top: calc(22px - round(down, (32px - round(1.046em, 1px) - round(.366em, 1px)) / 2, 1px) - round(1.046em, 1px));
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details > summary {
    font-size: 19px !important;
    padding-right: 34px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list, .gsr-vorschule-faq) > details > summary::after {
    right: 0 !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-page-faq-list > details > div > p, .gsr-vorschule-faq > details > p) {
    font-size: 17px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-shelf:not(:has(.gsr-modern-topic-grid)) > p, .seo-page > p, .seo-page .gsr-page-nav-section > p) {
    font-size: 17px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topics > .gsr-vorschule-topic-grid {
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topic-grid > .gsr-vorschule-topic {
    font-size: 24px !important;
    min-height: 62px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub .gsr-vorschule-topic-grid > .gsr-vorschule-topic::after {
    bottom: 14px;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-related {
    padding: 18px 16px 20px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target #gsr-vorschule-hub > .gsr-vorschule-related > strong {
    flex-basis: 100%;
  }
}

/* ---------- Ruhe bei reduzierter Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro .gsr-modern-hub-title > .gsr-sh-mark::before {
    animation: none;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-hub-cover, .gsr-modern-topic-card, .gsr-material-card, .gsr-modern-button, .gsr-modern-topic-shelf__all, .gsr-vorschule-topic, details > summary, details > nav > a, .gsr-vorschule-formats > a, .gsr-vorschule-related > a, .gsr-seo-material-preview-link > a),
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(details > summary)::after {
    transition: none !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-modern-topic-card, .gsr-material-card, .gsr-modern-button, .gsr-modern-topic-shelf__all, .gsr-vorschule-topic, details > summary, details > nav > a, .gsr-vorschule-formats > a, .gsr-vorschule-related > a, .gsr-seo-material-preview-link > a):is(:hover, :focus-within) {
    transform: none !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover:hover {
    transform: rotate(-3deg) translateY(12px) !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover--2:hover {
    transform: rotate(2.2deg) translateY(-8px) !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-intro > .gsr-modern-hub-covers > .gsr-modern-hub-cover--3:hover {
    transform: rotate(-1.4deg) translateY(20px) !important;
  }
}

/* ---------- Kachel-Aktion als Pille (Alex, 29.09.2026: „Ansehen … bitte einen modernen Stil passend zu unserem Shop“) ----------
   Hubs: live macht gsr-modern-free-labels (modern-site-b.php) aus dem Warenkorb-Symbol den Textlink „Ansehen“
   (.gsr-material-card-eduki) und entfernt „Merken“; Themenkacheln haben „Details“, Gratis-Kacheln „Download“.
   Kleine Umriss-Pille: 32 px hoch (Trefferfläche 44 px über ::before), 1,5-px-Tintenrand, Papierfläche, Inter 13,5/650 in
   Tinte, einzeilig; Pfeil als SVG-Maske (Download: Pfeil nach unten). Überfahren/Fokus der Kachel oder des Links:
   Aktionsrosé, weiße Schrift, 2 px Tintenversatz. Runde 36-px-Knöpfe bleiben den echten Symbolknöpfen (Warenkorb/Merken). */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-material-card-eduki,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-freebie-card-download,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-modern-topic-card__more,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-freebie-card-download {
  align-items: center !important;
  align-self: auto !important;
  background: var(--sh-paper) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: var(--sh-ink) !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-family: var(--sh-text) !important;
  font-size: 13.5px !important;
  font-style: normal !important;
  font-weight: 650 !important;
  gap: 6px !important;
  height: 32px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  max-height: 32px !important;
  max-width: none !important;
  min-height: 32px !important;
  min-width: 0 !important;
  padding: 0 11px 0 13px !important;
  position: relative !important;
  text-decoration: none !important;
  text-transform: none !important;
  transform: none;
  transition: background-color .16s linear, color .16s linear, box-shadow .16s var(--sh-ease), transform .16s var(--sh-ease) !important;
  white-space: nowrap !important;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-material-card-eduki::before,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-freebie-card-download::before,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-modern-topic-card__more::before,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-freebie-card-download::before {
  content: "" !important;
  display: block !important;
  inset: -7px -4px !important;
  position: absolute !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-material-card-eduki::after,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-freebie-card-download::after,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-modern-topic-card__more::after,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-freebie-card-download::after {
  background: currentColor !important;
  content: "" !important;
  display: block !important;
  flex: 0 0 auto !important;
  height: 10px !important;
  margin: 0 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5h9.2M6.6 1.4 10.2 5 6.6 8.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5h9.2M6.6 1.4 10.2 5 6.6 8.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  position: static !important;
  width: 12px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-freebie-card-download::after,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-freebie-card-download::after {
  height: 12px !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 1v9M1.6 6.8 5 10.2l3.4-3.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 1v9M1.6 6.8 5 10.2l3.4-3.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 10px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card:is(:hover, :focus-within) > .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button:is(.gsr-material-card-eduki, .gsr-freebie-card-download),
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button:is(.gsr-material-card-eduki, .gsr-freebie-card-download):focus-visible,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card:is(:hover, :focus-within) > .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a:is(.gsr-modern-topic-card__more, .gsr-freebie-card-download),
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a:is(.gsr-modern-topic-card__more, .gsr-freebie-card-download):focus-visible {
  background: var(--sh-action) !important;
  box-shadow: 2px 2px 0 var(--sh-ink) !important;
  color: #fff !important;
  transform: translate(-1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card:is(:hover, :focus-within) > .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button:is(.gsr-material-card-eduki, .gsr-freebie-card-download),
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button:is(.gsr-material-card-eduki, .gsr-freebie-card-download):focus-visible,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card:is(:hover, :focus-within) > .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a:is(.gsr-modern-topic-card__more, .gsr-freebie-card-download),
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a:is(.gsr-modern-topic-card__more, .gsr-freebie-card-download):focus-visible {
    transform: none;
  }
}

/* Preis und Pille auf derselben Grundlinie */
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-materialien-grid > .gsr-material-card > .gsr-material-card-toolbar.is-compact-eduki-toolbar, .gsr-materialien-grid > .gsr-material-card > .gsr-material-card-toolbar:has(> .gsr-material-card-toolbar-actions > .gsr-freebie-card-download), .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar) {
  align-items: baseline !important;
}

@media (max-width: 639px) {
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-material-card-eduki, .gsr-material-card-toolbar > .gsr-material-card-toolbar-actions > a.gsr-material-card-icon-button.gsr-freebie-card-download, .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-modern-topic-card__more, .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar > a.gsr-freebie-card-download) {
    font-size: 13px !important;
    gap: 4px !important;
    padding: 0 8px 0 10px !important;
  }
  /* Schmale Kacheln: passt die Pille nicht neben den Preis, rückt sie in eine eigene Zeile (rechts), statt überzustehen. */
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-materialien-grid > .gsr-material-card > .gsr-material-card-toolbar.is-compact-eduki-toolbar, .gsr-materialien-grid > .gsr-material-card > .gsr-material-card-toolbar:has(> .gsr-material-card-toolbar-actions > .gsr-freebie-card-download), .gsr-modern-topic-card__body > .gsr-modern-topic-card__toolbar) {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.gsr-material-card-toolbar > .gsr-material-card-toolbar-actions:has(> :is(.gsr-material-card-eduki, .gsr-freebie-card-download)), .gsr-modern-topic-card__toolbar > a:is(.gsr-modern-topic-card__more, .gsr-freebie-card-download)) {
    margin-left: auto !important;
  }
}

/* ---------- Nur live (Vorbereitung Live-Übernahme, 28.09.2026) ----------
   Beim Live-Schalten ans Ende von gsr-schulheft-hubs.css anhängen (erst, wenn der Papier-Agent fertig ist).
   Die drei Bausteine gibt es nur im Live-Inhalt (die Datenbank der Testseite ist älter); auf der Testseite greift
   keine dieser Regeln.
   1. nav.gsr-related-hubs „Weitere Themen“ (/deutsch/, /sachunterricht/, /mathematik/rechenmalblaetter/): ungestaltete
      Liste ohne Seitenrand (x = 0) mit Manrope-Überschrift. Jetzt Seitenbreite, Grundschrift-Etikett und dieselben
      Pillenknöpfe wie die Themenlinks im Einstieg (Vorgabe C).
   2. .gsr-seasonal-topic-links „Saisonale Themen …“ (/mathematik/, /deutsch/, /sachunterricht/, /kunst/): alte
      Textkarten mit Rosé-Rand und Pfeil -> dieselben Pillenknöpfe.
   3. a.gsr-freebie-card-download „Download“ auf Gratis-Kacheln (18 Seiten, u. a. /kostenlose-materialien/…, /herbst/,
      /halloween/, /sanktmartin/): in Materialkarten lief das Wort über den 36-px-Symbolkreis hinaus; in den
      Themenkarten von /kostenlose-materialien/ stand es als Rosé-Kasten. Jetzt kleine Textpille bzw. Textlink wie
      „Details“. */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .entry-content > nav.gsr-related-hubs {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 16px !important;
  margin: 56px auto 0 !important;
  padding: 0 !important;
  width: min(var(--gsr-standard-page-width, 100%), calc(100% - 28px)) !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .entry-content > nav.gsr-related-hubs > h2 {
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  margin: 0 8px 0 4px !important;
  text-transform: none !important;
  transform: rotate(-1.5deg);
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .entry-content > nav.gsr-related-hubs > ul,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-seasonal-topic-links > .gsr-overview-link-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  grid-template-columns: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-seasonal-topic-links > .gsr-overview-link-grid {
  margin-top: 16px !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .entry-content > nav.gsr-related-hubs > ul > li {
  margin: 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .entry-content > nav.gsr-related-hubs > ul > li::marker {
  content: none;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .entry-content > nav.gsr-related-hubs > ul > li > a,
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-seasonal-topic-links > .gsr-overview-link-grid > a.gsr-overview-link-card {
  align-items: center !important;
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  display: inline-flex !important;
  font-family: var(--sh-text) !important;
  font-size: 16px !important;
  font-weight: 620 !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  min-height: 46px !important;
  padding: 6px 18px !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear, color .16s linear;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-seasonal-topic-links > .gsr-overview-link-grid > a.gsr-overview-link-card::after {
  content: none !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-seasonal-topic-links .gsr-overview-link-card-title {
  color: inherit !important;
  font: inherit !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .entry-content > nav.gsr-related-hubs > ul > li > a:is(:hover, :focus-visible),
html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-seasonal-topic-links > .gsr-overview-link-grid > a.gsr-overview-link-card:is(:hover, :focus-visible) {
  background: var(--sh-action) !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  color: #fff !important;
  transform: translate(-2px, -2px) !important;
}

/* 3. „Download“ auf Gratis-Kacheln: jetzt Kachel-Aktion als Pille (Abschnitt unten). */

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-card__toolbar > a.gsr-freebie-card-download {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--sh-action) !important;
  flex: 0 0 auto !important;
  font-family: var(--sh-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 2px 0 !important;
  text-decoration: none !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target .gsr-modern-topic-grid > .gsr-modern-topic-card:is(:hover, :focus-within) .gsr-modern-topic-card__toolbar > a.gsr-freebie-card-download {
  text-decoration: underline !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.gsr-schulheft.gsr-sh-hub #wp--skip-link--target :is(.entry-content > nav.gsr-related-hubs > ul > li > a, .gsr-seasonal-topic-links > .gsr-overview-link-grid > a.gsr-overview-link-card) {
    transform: none !important;
    transition: none !important;
  }
}