/*
 * Designsystem „Schulheft + Marktplatz“ – Familie Produktseiten (body.gsr-sh-produkt), Teil „Produkt“ (Nacht 28./29.09.2026).
 * Eingebunden von 064-gsr-testshop-schulheft.php nach gsr-schulheft.css (Tokens, Schriften, Kopf, Fuß).
 * Aufbau: 1. karierte Heftseite (.wp-block-columns: Brotkrumen, Cover als loses Blatt, Kaufspalte, „Blick ins Material“),
 * 2. liniertes Blatt (.gsr-product-below-fold), 3. Marktplatz (.gsr-related-materials-section, außerhalb von main).
 * Selektoren: Das Präfix mit #wp--skip-link--target schlägt alle alten Regeln ohne ID. Überschriften in der Kaufspalte
 * brauchen mehr, weil alte Regeln dort (1,6,4) mit !important erreichen. !important nur gegen alte !important-Regeln
 * und Inline-Stile (geprüft in Chrome bei 1440/1024/800/390 px).
 */

/* ---------- Seitenrahmen ---------- */

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 32px auto 0 !important;
  padding: 0 !important;
}

/* ---------- 1. Karierte Heftseite ---------- */

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  align-items: start !important;
  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)),
    linear-gradient(var(--sh-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px) !important;
  background-position: 0 0, 0 -1px, -1px 0 !important;
  background-size: 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;
  box-sizing: border-box !important;
  column-gap: 56px !important;
  display: grid !important;
  grid-template-areas: none !important;
  grid-template-columns: var(--sh-margin) minmax(0, .92fr) minmax(0, 1.08fr) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  margin: 0 !important;
  max-width: 100% !important;
  padding: 26px 56px 52px 0 !important;
  row-gap: 0 !important;
  width: 100% !important;
}

/* ---------- Fach-Papier, gemischtes Blatt, Fach- und Saison-Hauch (Alex, 29.09.2026) ----------
   „Bei Kunst-Sachen den Kunst-Hintergrund aus dem Fach-Hub“ – „Alles mit den Hub-Sachen bitte, und die gemischten
   Materialien haben ein gemischtes Blatt.“ 064 setzt nach den Fach-Kategorien (Reihenfolge des Etiketts „Fach“):
   - ein Papier: gsr-sh-liniert (Deutsch), -blanko (Sachunterricht), -kunst, -vorschule, -kariert (Mathe, Classroom, Sport,
     ohne Fach). Gleich wie im Fach-Hub.
   - zwei verschiedene Papiere: gsr-sh-gemischt gsr-sh-links-<papier> gsr-sh-rechts-<papier>: aufgeschlagenes Heft. Rechner:
     linke Seite (Cover) Papier 1, rechte Seite (Brotkrumen, Titel, Etiketten, Preis) Papier 2, dazwischen die Falz (zwei
     Haarlinien, schmales flaches Band, kein Schatten), rosa Randlinie je am Außenrand. Handy: oben Papier 1 (Brotkrumen,
     Cover), darunter Papier 2, waagerechte Falz.
   - gsr-sh-fach-<fach>, gsr-sh-saison-<saison>: höchstens zwei gemalte Gegenstände je Blatt (Fach-Hauch, Saison-Hauch) in
     freien Ecken der Randspalte; am Handy aus.
   Technik: Papier einer Seite = Hintergrundlagen des Blatts. Die zweite Seite des gemischten Blatts ist ein Pseudo-Element
   hinter dem Inhalt (z-index −1). Dafür ist das Blatt selbst Stapelkontext (position relative, z-index 1: die fixierte
   Kaufleiste darin bleibt über dem folgenden Inhalt) und schneidet am Handy ab (overflow: clip). Liegt die Lineatur unter
   Text, gelten die Rhythmus-Regeln (DESIGN.md, Lineatur-Rhythmus): 32-px-Zeilen, Young Serif/Inter-Versatz, Abstände als
   Vielfache von 32; Etiketten, Knöpfe und Cover sind aufgeklebte Gegenstände mit auf 32 px gerundeter Höhe.
   Freie Flächen ab 960 px: Kopfrand 26 px, Randspalte + Spaltenabstand 128 px, Fußrand 52 px, rechter Rand 56 px.
   Unter 960 px: Kopfrand 22 px, Randspalte 34 px, Fußrand 34 px. Gemessen mit tools/deko_check.py und lineatur_check.py. */

/* Fach- und Saison-Hauch: je ein gemalter Gegenstand (L, 96–120 px) in einer freien Ecke der Randspalte, höchstens zwei
   je Blatt (Fach unten links, Saison oben links). Vorhanden: Füller (Deutsch), Herbstlaub (Herbst). Übrige Plätze sind
   vorbereitet: Datei motive/fach-<fach>-l.webp bzw. motive/saison-<saison>-l.webp ablegen und die Zeile einkommentieren. */

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-fach-deutsch { --sh-hauch-fach: url("motive/fueller-l.webp"); }

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-fach-mathematik { --sh-hauch-fach: url("motive/fach-mathematik-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-fach-sachunterricht { --sh-hauch-fach: url("motive/fach-sachunterricht-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-fach-kunst { --sh-hauch-fach: url("motive/fach-kunst-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-fach-sport { --sh-hauch-fach: url("motive/fach-sport-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-fach-vorschule { --sh-hauch-fach: url("motive/fach-vorschule-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-fach-classroommanagement { --sh-hauch-fach: url("motive/fach-classroom-l.webp"); } */

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-saison-herbst { --sh-hauch-saison: url("motive/stilprobe-1/gouache/herbstlaub-l.webp"); }

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-saison-halloween { --sh-hauch-saison: url("motive/saison-halloween-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-saison-sanktmartin { --sh-hauch-saison: url("motive/saison-sanktmartin-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-saison-advent { --sh-hauch-saison: url("motive/saison-advent-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-saison-weihnachten { --sh-hauch-saison: url("motive/saison-weihnachten-l.webp"); } */

/* html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-saison-winter { --sh-hauch-saison: url("motive/saison-winter-l.webp"); } */

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 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;
  background-blend-mode: normal, normal, normal, normal, normal !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-liniert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  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-position: var(--sh-hauch-fach-pos, left 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 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;
  background-blend-mode: normal, normal, normal, normal !important;
  background-origin: padding-box, padding-box, padding-box, content-box !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-kunst #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  background-image:
    var(--sh-hauch-fach, none),
    var(--sh-hauch-saison, none),
    url("motive/klecks-rose.webp"),
    url("motive/klecks-ocker.webp"),
    url("motive/klecks-gruen.webp"),
    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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 0 -36px, 40% 100%, 100% 100%, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 230px 150px, 190px 50px, 140px 54px, 100% 100% !important;
  background-blend-mode: normal, normal, multiply, multiply, multiply, normal !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-blanko #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  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(rgba(255, 253, 251, .8), rgba(255, 253, 251, .8)),
    url("motive/papier-knitter.webp") !important;
  background-position: var(--sh-hauch-fach-pos, left 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 0 0, 0 0, -40px -24px !important;
  background-repeat: no-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% 100%, 1200px 800px !important;
  background-blend-mode: normal, normal, normal, normal, multiply !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-vorschule {
  /* --sh-vs-schere: url("motive/schere-m.webp"); */
  /* --sh-vs-klebestift: url("motive/klebestift-m.webp"); */
  --sh-hauch-fach: none; /* Fach-Gegenstand der Bastelecke ist die Schere */
  --sh-hauch-saison-pos: left 12px top 110px;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-vorschule[class*="gsr-sh-saison-"] #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  --sh-vs-klebestift: none; /* höchstens zwei Gegenstände: Schere + Saison */
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-vorschule #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  background-image:
    var(--sh-hauch-fach, none),
    var(--sh-hauch-saison, none),
    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"),
    url("motive/klecks-rose.webp"),
    url("motive/klecks-gruen.webp"),
    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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), left 30px bottom 124px, left 124px bottom 16px, left 66px bottom 60px, left 6px bottom 14px, left 18px top -3px, 0 -36px, 100% 100%, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 64px auto, 64px auto, 44px 44px, 90px 65px, 122px 38px, 230px 150px, 140px 54px, 100% 100% !important;
  background-blend-mode: normal, normal, normal, normal, normal, normal, normal, multiply, multiply, normal !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-kunst {
  --sh-hauch-saison-pos: left 12px top 120px;
}

/* Gemischtes Blatt, Rechner: linke Seite (Cover) als Hintergrund des Blatts, rechte Seite als ::after ab der Falz.
   Falz x = Mitte des Spaltenabstands = 45,6 px + 46 % der Blattbreite (Raster 72 | 56 | .92fr | 56 | 1.08fr, rechts 56). */

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  isolation: auto;
  position: relative !important;
  z-index: 1;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-links-kariert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 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;
  background-blend-mode: normal, normal, normal, normal, normal !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-links-liniert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  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-position: var(--sh-hauch-fach-pos, left 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 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;
  background-blend-mode: normal, normal, normal, normal !important;
  background-origin: padding-box, padding-box, padding-box, content-box !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-links-blanko #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  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(rgba(255, 253, 251, .8), rgba(255, 253, 251, .8)),
    url("motive/papier-knitter.webp") !important;
  background-position: var(--sh-hauch-fach-pos, left 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 0 0, 0 0, -40px -24px !important;
  background-repeat: no-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% 100%, 1200px 800px !important;
  background-blend-mode: normal, normal, normal, normal, multiply !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-links-kunst #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  background-image:
    var(--sh-hauch-fach, none),
    var(--sh-hauch-saison, none),
    url("motive/klecks-rose.webp"),
    url("motive/klecks-ocker.webp"),
    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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 0 -36px, left 150px bottom 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 230px 150px, 190px 50px, 100% 100% !important;
  background-blend-mode: normal, normal, multiply, multiply, normal !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-links-vorschule #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
  background-image:
    var(--sh-hauch-fach, none),
    var(--sh-hauch-saison, none),
    url("motive/schnipsel-gruen.webp"),
    url("motive/schnipsel-rose.webp"),
    url("motive/schnipsel-ocker.webp"),
    url("motive/klecks-rose.webp"),
    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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), left 66px bottom 60px, left 6px bottom 14px, left 18px top -3px, 0 -36px, 0 0 !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 44px 44px, 90px 65px, 122px 38px, 230px 150px, 100% 100% !important;
  background-blend-mode: normal, normal, normal, normal, normal, multiply, normal !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-links-kunst {
  --sh-hauch-saison-pos: left 12px top 120px;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-links-vorschule {
  --sh-hauch-fach-pos: left 14px top 48%;
  --sh-hauch-saison-pos: left 12px top 110px;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns::after {
  background-color: var(--sh-paper);
  border-radius: 0 calc(var(--sh-radius) - var(--sh-stroke)) calc(var(--sh-radius) - var(--sh-stroke)) 0;
  bottom: 0;
  content: "";
  display: block;
  left: calc(46% + 45.6px);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-rechts-kariert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns::after {
  background-image:
    linear-gradient(90deg, var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
    linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
    linear-gradient(90deg, transparent calc(100% - 42px), var(--sh-margin-line) calc(100% - 42px), var(--sh-margin-line) calc(100% - 40px), transparent calc(100% - 40px)),
    linear-gradient(var(--sh-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px);
  background-position: 0 0, 0 0, 0 0, 0 -1px, -1px 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: 4px 100%, 9px 100%, 100% 100%, 24px 24px, 24px 24px;
  background-blend-mode: normal, normal, normal, normal, normal;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-rechts-liniert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns::after {
  background-image:
    linear-gradient(90deg, var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
    linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
    linear-gradient(90deg, transparent calc(100% - 42px), var(--sh-margin-line) calc(100% - 42px), var(--sh-margin-line) calc(100% - 40px), transparent calc(100% - 40px)),
    repeating-linear-gradient(transparent 0 22px, var(--sh-rule) 22px 23px, transparent 23px 32px);
  background-position: 0 0, 0 0, 0 0, 0 26px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 4px 100%, 9px 100%, 100% 100%, 100% 32px;
  background-blend-mode: normal, normal, normal, normal;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-rechts-blanko #wp--skip-link--target .gsr-product-main-card > .wp-block-columns::after {
  background-image:
    linear-gradient(90deg, var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
    linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
    linear-gradient(90deg, transparent calc(100% - 42px), var(--sh-margin-line) calc(100% - 42px), var(--sh-margin-line) calc(100% - 40px), transparent calc(100% - 40px)),
    linear-gradient(rgba(255, 253, 251, .8), rgba(255, 253, 251, .8)),
    url("motive/papier-knitter.webp");
  background-position: 0 0, 0 0, 0 0, 0 0, -40px -24px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: 4px 100%, 9px 100%, 100% 100%, 100% 100%, 1200px 800px;
  background-blend-mode: normal, normal, normal, normal, multiply;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-rechts-kunst #wp--skip-link--target .gsr-product-main-card > .wp-block-columns::after {
  background-image:
    url("motive/klecks-rose-s.webp"),
    url("motive/klecks-ocker.webp"),
    url("motive/klecks-gruen.webp"),
    linear-gradient(90deg, var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
    linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
    linear-gradient(90deg, transparent calc(100% - 42px), var(--sh-margin-line) calc(100% - 42px), var(--sh-margin-line) calc(100% - 40px), transparent calc(100% - 40px));
  background-position: 100% -10px, 70% 100%, 100% 100%, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 128px 38px, 190px 50px, 140px 54px, 4px 100%, 9px 100%, 100% 100%;
  background-blend-mode: multiply, multiply, multiply, normal, normal, normal;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-rechts-vorschule #wp--skip-link--target .gsr-product-main-card > .wp-block-columns::after {
  background-image:
    url("motive/schnipsel-rose.webp"),
    url("motive/klecks-rose-s.webp"),
    url("motive/klecks-gruen.webp"),
    linear-gradient(90deg, var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
    linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
    linear-gradient(90deg, transparent calc(100% - 42px), var(--sh-margin-line) calc(100% - 42px), var(--sh-margin-line) calc(100% - 40px), transparent calc(100% - 40px));
  background-position: right 150px bottom 6px, 100% -10px, 100% 100%, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 63px 45px, 128px 38px, 140px 54px, 4px 100%, 9px 100%, 100% 100%;
  background-blend-mode: normal, multiply, multiply, normal, normal, normal;
}

@media (min-width: 960px) {
  /* Brotkrumen und „Blick ins Material“ stehen auf der rechten (Text-)Seite, nicht über der Falz */
  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt #wp--skip-link--target :is(.gsr-product-breadcrumb, .wp-block-column > section:not([class])) {
    grid-column: 3 !important;
  }
}

@media (max-width: 959px) {
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
    --sh-hauch-fach: none;
    --sh-hauch-saison: none;
  }

  html body.gsr-schulheft.gsr-sh-produkt:is(.gsr-sh-liniert, .gsr-sh-gemischt) #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
    overflow: clip !important;
    position: relative !important;
    z-index: 1;
}

  html body.gsr-schulheft.gsr-sh-produkt:is(.gsr-sh-liniert, .gsr-sh-gemischt) #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type {
    position: relative !important;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns::after {
    display: none;
}

  /* Handy Kunst: nur der kleine Rosé-Klecks rechts oben (unten liegt der Knopf zu nah an der Blattkante) */

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-kunst #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
    background-image:
      var(--sh-hauch-fach, none),
      var(--sh-hauch-saison, none),
      url("motive/klecks-rose-s.webp"),
      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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 100% -10px, 0 0 !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 128px 38px, 100% 100% !important;
    background-blend-mode: normal, normal, multiply, normal !important;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-vorschule #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
    background-image:
      var(--sh-hauch-fach, none),
      var(--sh-hauch-saison, none),
      url("motive/schnipsel-ocker.webp"),
      url("motive/klecks-rose-s.webp"),
      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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), left 4px top 0, 100% -10px, 0 0 !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 80px 25px, 128px 38px, 100% 100% !important;
    background-blend-mode: normal, normal, normal, multiply, normal !important;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-liniert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
    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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 0 0 !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 100% 100% !important;
    background-blend-mode: normal, normal, normal !important;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt:is(.gsr-sh-links-kunst, .gsr-sh-links-vorschule) #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
    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 14px bottom 16px), var(--sh-hauch-saison-pos, left 12px top 20px), 0 0 !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: var(--sh-hauch-fach-size, 96px auto), var(--sh-hauch-saison-size, 100px auto), 100% 100% !important;
    background-blend-mode: normal, normal, normal !important;
}

  html body.gsr-schulheft.gsr-sh-produkt:is(.gsr-sh-liniert, .gsr-sh-gemischt) #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type::after {
    background-color: var(--sh-paper);
    content: "";
    display: block;
    height: 24000px; /* bis zum Blattende, das Blatt schneidet ab */
    left: calc(-1 * var(--sh-margin));
    pointer-events: none;
    position: absolute;
    right: -48px;
    top: 100%;
    z-index: -1;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-liniert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type::after {
    background-image:
      linear-gradient(90deg, transparent calc(34px - 14px), var(--sh-margin-line) calc(34px - 14px), var(--sh-margin-line) calc(34px - 12px), transparent calc(34px - 12px)),
      repeating-linear-gradient(transparent 0 22px, var(--sh-rule) 22px 23px, transparent 23px 32px);
    background-position: 0 0, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 100% 32px;
    background-blend-mode: normal, normal;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-rechts-liniert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type::after {
    background-image:
      linear-gradient(var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
      linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
      linear-gradient(90deg, transparent calc(34px - 14px), var(--sh-margin-line) calc(34px - 14px), var(--sh-margin-line) calc(34px - 12px), transparent calc(34px - 12px)),
      repeating-linear-gradient(transparent 0 22px, var(--sh-rule) 22px 23px, transparent 23px 32px);
    background-position: 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size: 100% 4px, 100% 9px, 100% 100%, 100% 32px;
    background-blend-mode: normal, normal, normal, normal;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-rechts-kariert #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type::after {
    background-image:
      linear-gradient(var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
      linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
      linear-gradient(90deg, transparent calc(34px - 14px), var(--sh-margin-line) calc(34px - 14px), var(--sh-margin-line) calc(34px - 12px), transparent calc(34px - 12px)),
      linear-gradient(var(--sh-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px);
    background-position: 0 0, 0 0, 0 0, 0 -1px, -1px 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    background-size: 100% 4px, 100% 9px, 100% 100%, 24px 24px, 24px 24px;
    background-blend-mode: normal, normal, normal, normal, normal;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt.gsr-sh-rechts-blanko #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type::after {
    background-image:
      linear-gradient(var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
      linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
      linear-gradient(90deg, transparent calc(34px - 14px), var(--sh-margin-line) calc(34px - 14px), var(--sh-margin-line) calc(34px - 12px), transparent calc(34px - 12px)),
      linear-gradient(rgba(255, 253, 251, .8), rgba(255, 253, 251, .8)),
      url("motive/papier-knitter.webp");
    background-position: 0 0, 0 0, 0 0, 0 0, -40px -24px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size: 100% 4px, 100% 9px, 100% 100%, 100% 100%, 1200px 800px;
    background-blend-mode: normal, normal, normal, normal, multiply;
}

  html body.gsr-schulheft.gsr-sh-produkt.gsr-sh-gemischt:is(.gsr-sh-rechts-kunst, .gsr-sh-rechts-vorschule) #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type::after {
    background-image:
      linear-gradient(var(--sh-hair) 0 1px, transparent 1px 3px, var(--sh-hair) 3px 4px, transparent 4px),
      linear-gradient(rgba(63, 52, 54, .028), rgba(63, 52, 54, .028)),
      linear-gradient(90deg, transparent calc(34px - 14px), var(--sh-margin-line) calc(34px - 14px), var(--sh-margin-line) calc(34px - 12px), transparent calc(34px - 12px));
    background-position: 0 0, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% 4px, 100% 9px, 100% 100%;
    background-blend-mode: normal, normal, normal;
}
}

/* Lineatur-Rhythmus im Produktkopf (Textseite liniert: Deutsch bzw. rechte Seite eines gemischten Blatts).
   Text steht auf den Linien (32-px-Takt ab Inhaltsbeginn), Etiketten/Knöpfe/Cover liegen als Gegenstände darauf und
   haben auf 32 px gerundete Höhen: Etikett 60 + 4 px Abstand, Knopf 54 + 10 px. Preis und Hinweis stehen untereinander
   (Preis 64-px-Zeile, Hinweis 32-px-Zeile), statt mit Grundlinien-Ausrichtung nebeneinander. Gestrichelte Trenner
   entfallen (die Heftlinien trennen). „Passt gut dazu“ (Testseite) rückt ans Ende, „Blick ins Material“ (Testseite)
   liegt als eingeklebte Karte auf dem Blatt. */

html body.gsr-schulheft.gsr-sh-produkt:is(.gsr-sh-liniert, .gsr-sh-links-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-breadcrumb {
  line-height: 32px !important;
  margin: 0 0 32px !important;
}

html body.gsr-schulheft.gsr-sh-produkt:is(.gsr-sh-liniert, .gsr-sh-links-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-breadcrumb :is(ol, li) {
  line-height: 32px !important;
  row-gap: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt:is(.gsr-sh-liniert, .gsr-sh-links-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-breadcrumb ol {
  position: relative;
  top: 1px; /* Inter 13,5–15 px auf 32 px: Grundlinie 21 -> 22 */
  top: calc(22px - round(down, (32px - round(.969em, 1px) - round(.242em, 1px)) / 2, 1px) - round(.969em, 1px));
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-main-card > .wp-block-columns h1.wp-block-post-title {
  line-height: 64px !important;
  margin: 0 !important;
  position: relative;
  top: calc(22.25px - .34em); /* 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-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-meta-chips {
  align-items: flex-start !important;
  margin: 32px 0 0 !important;
  padding: 0 0 4px !important;
  row-gap: 4px !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-meta-chip {
  box-sizing: border-box !important;
  height: 60px !important;
  max-width: 100%;
  min-height: 60px !important;
  overflow: hidden;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-meta-chip strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-summary-shell {
  gap: 32px !important;
  margin: 32px 0 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-catalog-product-excerpt {
  line-height: 32px !important;
  margin: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target :is(.gsr-product-price-line, .gsr-product-cta-row > p) {
  border-top: 0 !important;
  display: block !important;
  line-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target :is(.gsr-product-price-line > strong, .gsr-product-cta-row > p > span:first-child) {
  display: block !important;
  line-height: 64px !important;
  position: relative;
  top: 10px; /* Inter 34 px auf 64 px: Grundlinie 44 -> 54 */
  top: calc(54px - round(down, (64px - round(.969em, 1px) - round(.242em, 1px)) / 2, 1px) - round(.969em, 1px));
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target :is(.gsr-product-price-line > span, .gsr-product-cta-row > p > span:not(:first-child)) {
  display: block !important;
  line-height: 32px !important;
  position: relative;
  top: 1px; /* Inter 13,5–15 px auf 32 px: Grundlinie 21 -> 22 */
  top: calc(22px - round(down, (32px - round(.969em, 1px) - round(.242em, 1px)) / 2, 1px) - round(.969em, 1px));
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-cta-row {
  align-items: flex-start !important;
  border-top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  row-gap: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-cta-row > a {
  box-sizing: border-box !important;
  height: 54px !important;
  margin: 0 0 10px !important;
  min-height: 54px !important;
  white-space: nowrap !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-price-line + .gsr-product-cta-row {
  margin-top: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-ups-product {
  margin: 0 !important;
  order: 20;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .wp-block-column > section:not([class]) {
  background: var(--sh-card) !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 8px !important;
  margin-top: 32px !important;
  padding: 22px 24px 24px !important;
}

@media (max-width: 959px) {
  html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-main-card > .wp-block-columns h1.wp-block-post-title {
    font-size: 29px !important;
    line-height: 32px !important;
    margin: 32px 0 0 !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-produkt.gsr-rollout-20260909.single-product:is(.gsr-sh-liniert, .gsr-sh-rechts-liniert) #wp--skip-link--target .gsr-product-meta-chip {
    height: 60px !important;
    min-height: 60px !important;
}
}

/* Brotkrumen als Kopfzeile des Blatts */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-breadcrumb {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 14px !important;
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  line-height: 1.4 !important;
  margin: 0 0 30px !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-breadcrumb ol {
  gap: 10px !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-breadcrumb li {
  gap: 10px !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-breadcrumb li:not(:last-child)::after {
  color: var(--sh-rose-mid);
  content: "/" !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-breadcrumb a {
  color: var(--sh-ink);
  text-decoration: underline !important;
  text-decoration-color: var(--sh-rose-mid) !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px;
}

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

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-breadcrumb [aria-current="page"] {
  color: var(--sh-ink-soft);
}

/* Linke Spalte: das Cover. Die Spalte reicht über die ganze Kaufspalte, damit das Blatt mitlaufen kann. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type {
  align-self: stretch !important;
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 / 5 !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 18px 0 0 !important;
  width: auto !important;
}

/* Rechte Spalte löst sich auf, damit „Blick ins Material“ unten über die volle Blattbreite laufen kann. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:last-of-type {
  display: contents !important;
}

/* ---------- Das Cover als loses Blatt ---------- */

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery {
  background: none !important;
  border-radius: 0 !important;
  isolation: isolate;
  margin: 0 auto !important;
  max-width: 100% !important;
  position: relative;
  width: min(100%, 440px) !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery--cover-only {
  transform: rotate(-2deg);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery--cover-only .gsr-product-gallery-track {
  display: block;
  overflow: visible;
  position: relative;
}

/* Rosé-Unterblatt und Washi-Tape */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery--cover-only::before {
  background: var(--sh-rose);
  border: var(--sh-stroke) solid var(--sh-ink);
  border-radius: 6px;
  content: "";
  inset: 0;
  position: absolute;
  transform: rotate(4.5deg) translate(12px, 6px);
  z-index: -1;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery::after {
  background: url("motive/washi-uni.webp") no-repeat 50% 50% / 100% 100%;
  content: "";
  height: 32px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: -16px;
  transform: translateX(-50%) rotate(-4deg);
  width: 112px;
  z-index: 2;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery-slide {
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink);
  border-radius: 6px;
  box-shadow: none;
  margin: 0;
  overflow: hidden;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery--cover-only .gsr-product-gallery-slide {
  width: 100%;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery-image {
  aspect-ratio: 520 / 751;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: top center !important;
  width: 100% !important;
}

/* Kostenlose Materialien: ein gemalter Geschenkanhänger hängt am Blatt. */
html body.gsr-schulheft.gsr-sh-produkt.product_cat-freebies #wp--skip-link--target .gsr-product-cta-row::after {
  background: url("motive/geschenkanhaenger-m.webp") no-repeat 50% 50% / contain;
  content: "";
  height: 56px;
  pointer-events: none;
  position: absolute;
  right: 6px;
  top: -28px;
  transform: rotate(14deg);
  width: 56px;
}

/* Signatur: Das Blatt legt sich beim Laden einmal ab, das Unterblatt schiebt sich darunter hervor.
   Nur transform, das Cover ist von Anfang an sichtbar (LCP bleibt unberührt). */
@media (prefers-reduced-motion: no-preference) {
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery--cover-only {
    animation: gsr-shp-ablegen .9s var(--sh-ease) .12s both;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery--cover-only::before {
    animation: gsr-shp-unterblatt .9s var(--sh-ease) .12s both;
  }
}

@keyframes gsr-shp-ablegen {
  from { transform: translateY(-12px) rotate(-5.5deg); }
  to { transform: rotate(-2deg); }
}

@keyframes gsr-shp-unterblatt {
  from { transform: rotate(0deg) translate(0, 0); }
  to { transform: rotate(4.5deg) translate(12px, 6px); }
}

/* ---------- Kaufspalte ---------- */

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product #wp--skip-link--target .gsr-product-main-card > .wp-block-columns h1.wp-block-post-title {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  /* Skala: Headline Heftblatt (DESIGN.md), hier höchstens die untere Stufe 2.25rem, damit lange Paket-Titel
     nicht 6 Zeilen füllen und Fakten/Kaufknopf nach unten schieben; Handy 29 px. 32ch = dieselbe Zeilenbreite
     wie vorher 26ch bei 44 px (sonst schrumpft mit der Schrift auch das Maß und die Zeilenzahl bleibt gleich). */
  font-size: clamp(2rem, 1.35rem + 1.6vw, 2.25rem) !important;
  font-weight: 400 !important;
  grid-column: 3 !important;
  grid-row: 2 !important;
  letter-spacing: -.012em !important;
  line-height: 1.12 !important;
  margin: 8px 0 0 !important;
  max-width: 32ch !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
}

/* Keine Dachzeile über dem Titel (Randnotiz-Regel) */
html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product #wp--skip-link--target .gsr-product-main-card > .wp-block-columns h1.wp-block-post-title::before {
  content: none !important;
  display: none !important;
}

/* Fakten als kleine Heftetiketten: Bezeichnung in Inter, Eintrag in der Grundschrift */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  grid-column: 3 !important;
  grid-row: 3 !important;
  margin: 24px 0 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chip {
  align-items: flex-start !important;
  display: inline-flex;
  max-width: 100%;
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 3px var(--sh-card), inset 0 0 0 4px rgba(152, 76, 103, .36) !important;
  color: var(--sh-ink);
  flex: 0 1 auto;
  flex-direction: column;
  gap: 2px !important;
  justify-content: center;
  min-height: 60px !important;
  padding: 7px 15px 9px !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chip span {
  color: var(--sh-ink-soft);
  font-family: var(--sh-text) !important;
  font-size: 12.5px !important;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chip strong {
  color: var(--sh-ink);
  font-family: var(--sh-hand) !important;
  font-size: 27px !important;
  font-weight: 400;
  line-height: 1.05 !important;
  white-space: normal !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chip:hover {
  background: var(--sh-rose) !important;
  box-shadow: inset 0 0 0 3px var(--sh-rose), inset 0 0 0 4px rgba(152, 76, 103, .5), 3px 3px 0 var(--sh-ink) !important;
  transform: translate(-2px, -2px);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-summary-shell {
  border: 0 !important;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 26px !important;
  min-width: 0;
  grid-column: 3 !important;
  grid-row: 4 !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-catalog-product-excerpt {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  max-width: 36em;
}

/* Preis und Knöpfe */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row {
  align-items: center !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  position: relative;
  background: none !important;
  border: 0 !important;
  border-top: 1px dashed var(--sh-rule) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 16px !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > p {
  column-gap: 12px !important;
  flex: 1 0 100%;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > p > span:first-child {
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-size: 34px !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.1;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > p > span:not(:first-child) {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text);
  font-size: 14.5px !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > 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;
  box-sizing: border-box !important;
  color: var(--sh-ink) !important;
  display: inline-flex !important;
  flex: 0 1 auto;
  font-family: var(--sh-text) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0;
  min-height: 50px !important;
  padding: 0 24px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > a:hover {
  background: var(--sh-rose) !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  transform: translate(-2px, -2px);
}

/* Der erste Hauptknopf (Warenkorb, Eduki oder Gratis-Download) liegt als einziger mit Versatz auf. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > :is(a.gsr-product-primary-cta, a[data-gsr-freebie-open]):not(:is(a.gsr-product-primary-cta, a[data-gsr-freebie-open]) ~ a) {
  background: var(--sh-action) !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  color: #fff !important;
  font-size: 17px !important;
  min-height: 54px !important;
  min-width: min(100%, 290px) !important;
  padding: 0 30px !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > :is(a.gsr-product-primary-cta, a[data-gsr-freebie-open]):not(:is(a.gsr-product-primary-cta, a[data-gsr-freebie-open]) ~ a):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-produkt #wp--skip-link--target .gsr-product-cta-row > a:active {
  box-shadow: 1px 1px 0 var(--sh-ink) !important;
  transform: translate(2px, 2px);
}

/* ---------- „Passt gut dazu“ und Staffelpreise (061) ---------- */
/* Die Vorschaubilder tragen width/height 750×1083; die alte Regel setzt nur die Breite (52 px), ohne height:auto
   wurden sie 1083 px hohe Streifen. */

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-product {
  display: grid;
  gap: 22px;
  margin: 8px 0 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-box {
  background: var(--sh-card);
  border: 1px solid var(--sh-hair);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--sh-ink);
  margin: 0;
  padding: 20px 22px 22px;
  position: relative;
}

/* Eine rosa Büroklammer greift über die obere Kante des Zettels (Alex, 29.09.2026): gut ein Drittel ragt darüber
   hinaus und ist ganz sichtbar; auf dem Zettel sieht man nur den vorderen, kürzeren Bügel bis zu seinem Bogen, das
   Ende des hinteren Bügels liegt hinter dem Papier. Technik: Klammer um 125° gedreht (geschlossenes Ende oben,
   10° schräg), clip-path im eigenen Koordinatensystem senkrecht zur Klammerachse direkt hinter dem Bogen des
   inneren Bügels (Achse bei 50,5 von 66 px der 56-px-Quelle; Kante bei 22 px). */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-pair::before {
  background: url("motive/bueroklammer-s.webp") no-repeat 50% 50% / contain;
  clip-path: polygon(0 0, 14.2px 0, 34px 18.6px, 34px 34px, 0 34px);
  content: "";
  height: 34px;
  pointer-events: none;
  position: absolute;
  right: 26px;
  top: -10.5px;
  transform: rotate(125deg);
  width: 34px;
  z-index: 1;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product #wp--skip-link--target .gsr-product-main-card > .wp-block-columns .gsr-ups-box h3 {
  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 0 6px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-hint {
  color: var(--sh-ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-hint b {
  color: var(--sh-ink);
  font-weight: 650;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-item {
  align-items: center;
  background: var(--sh-paper);
  border: 1px solid var(--sh-hair);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  padding: 8px 14px 8px 12px;
  transition: border-color .16s linear, background-color .16s linear;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target label.gsr-ups-item:hover {
  border-color: var(--sh-ink);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-item:has(input:checked) {
  background: var(--sh-rose);
  border-color: var(--sh-ink);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-item input[type="checkbox"] {
  accent-color: var(--sh-action);
  flex: 0 0 auto;
  height: 20px;
  margin: 0;
  width: 20px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-thumb {
  flex: 0 0 44px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(.gsr-ups-thumb img, .gsr-ups-thumb-empty) {
  aspect-ratio: 520 / 751;
  background: #f6f3f1;
  border: 1px solid var(--sh-hair);
  border-radius: 3px;
  box-sizing: border-box;
  display: block;
  height: auto;
  max-width: none;
  object-fit: cover;
  object-position: top;
  width: 44px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-copy a {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--sh-ink) !important;
  display: -webkit-box;
  font-size: 14.5px;
  font-weight: 620;
  line-height: 1.35;
  overflow: hidden;
  text-decoration: none !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-copy a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--sh-rose-mid) !important;
  text-underline-offset: 3px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-price {
  color: var(--sh-ink);
  font-family: var(--sh-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Kachel-Fußzeile (Vorgabe A): Preis in Tinte, alter Preis weich durchgestrichen – Rosé nur für Aktionen */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-price s {
  color: var(--sh-ink-soft);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: line-through;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-price b {
  color: var(--sh-ink);
  font-weight: 650;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-btn {
  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;
  cursor: pointer;
  font-family: var(--sh-text) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  margin: 16px 0 0 !important;
  min-height: 50px !important;
  padding: 10px 22px !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear;
  width: 100%;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-btn: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-produkt #wp--skip-link--target .gsr-ups-chips {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0 12px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-chip {
  background: var(--sh-paper);
  border: 1px solid var(--sh-hair);
  border-radius: 8px;
  color: var(--sh-ink-soft);
  font-size: 13.5px;
  line-height: 1.35;
  padding: 10px 6px 11px;
  text-align: center;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-chip b {
  color: var(--sh-ink);
  display: inline-block;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  margin-top: 2px;
}

/* ---------- „Blick ins Material“ (060, Inline-Stile ohne Klasse) ---------- */

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) {
  align-items: baseline;
  border-top: 1px dashed var(--sh-rule);
  column-gap: 20px;
  display: grid;
  grid-column: 2 / -1 !important;
  grid-row: 5 !important;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 52px 0 0 !important;
  min-width: 0;
  padding: 34px 0 0;
}

html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column > section:not([class]) > h2 {
  font-family: var(--sh-display) !important;
  font-size: clamp(2rem, 1.35rem + 1.6vw, 2.75rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.012em !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > p {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text);
  line-height: 1.5;
  margin: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div {
  gap: 20px 16px !important;
  grid-column: 1 / -1;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  margin: 24px 0 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) figure {
  background: var(--sh-card) !important;
  border: 1px solid rgba(63, 52, 54, .3) !important;
  border-radius: 4px !important;
  min-width: 0;
}

/* Ohne width/height (vor 066) als Hochformat; mit den Maßen aus 066 gilt das echte Seitenverhältnis (Querformat). */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) figure img:not([width]) {
  aspect-ratio: 750 / 1083;
  object-fit: cover;
  object-position: top;
}

/* ---------- 2. „Das steckt im Material“: liniertes Blatt ---------- */

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-below-fold {
  --sh-line: 32px;
  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 var(--sh-line)) !important;
  background-origin: padding-box, content-box !important;
  background-position: 0 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 100% var(--sh-line) !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: 44px !important;
  display: grid !important;
  grid-template-columns: var(--sh-margin) minmax(0, 1fr) !important;
  margin: 56px 0 0 !important;
  max-width: 100% !important;
  padding: 48px 56px 64px 0 !important;
  width: 100% !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-below-fold > * {
  grid-column: 2 !important;
  min-width: 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-section {
  max-width: none !important;
  padding: 0 !important;
}

/* Überschrift links wie eine Randspalte, Text rechts davon im Lesemaß */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(.gsr-product-description-open, .gsr-product-description-accordion) {
  background: none !important;
  border: 0 !important;
  column-gap: 56px;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 40em);
  margin: 0 !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(#gsr-product-description-title, .gsr-product-description-accordion > summary) {
  font-family: var(--sh-display) !important;
  font-size: clamp(2rem, 1.35rem + 1.6vw, 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;
  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 */
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content {
  color: var(--sh-ink);
  font-family: var(--sh-text) !important;
  font-size: 18px !important;
  line-height: var(--sh-line) !important;
  max-width: 40em !important;
  padding: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content > * {
  font-size: 18px !important;
  margin: 0;
  line-height: var(--sh-line) !important;
}

/* Lineatur-Rhythmus für beliebigen Beschreibungsinhalt (Absätze, h2–h6, strong-Zwischenzeilen, Listen, Links, br, em,
   Zitate, Tabellen): jede Zeile 32 px, jeder Abstand ein Vielfaches von 32 px, keine senkrechten Innenabstände/Ränder. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, blockquote, figure, figcaption, table, caption, tr, td, th, pre, details, summary, div, section, address, hr) {
  border-bottom-width: 0 !important;
  border-top-width: 0 !important;
  line-height: var(--sh-line) !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Zwischen zwei Blöcken genau eine freie Heftzeile; nach Überschriften und zwischen Listenpunkten keine. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, figure, table, pre, details, div, hr) + :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, figure, table, pre, details, div, hr) {
  margin-top: var(--sh-line) !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, dl, blockquote, figure, table, pre, details, div, hr) {
  margin-top: 0 !important;
}

/* Inline-Teile vergrößern die Zeile nie (andere Schriftgröße, hoch/tief gestellt) */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(strong, b, em, i, u, s, small, sub, sup, code, kbd, samp, mark, abbr, cite, q, time, a:not([class]), span:not([class])) {
  line-height: 0 !important;
  vertical-align: baseline;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(h5, h6) {
  font-family: var(--sh-text) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content hr {
  background: none !important;
  border: 0 !important;
  height: 0 !important;
}

/* Bilder und Einbettungen: feste Höhe als Vielfaches der Zeile, Breite folgt dem Seitenverhältnis */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(img:not(.emoji, .wp-smiley), video) {
  display: block;
  height: calc(8 * var(--sh-line)) !important;
  max-width: 100%;
  object-fit: contain;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(iframe, embed, object) {
  border: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  height: calc(9 * var(--sh-line)) !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
}

/* Verschachtelte Textblöcke (Absatz im Listenpunkt, im Zitat, in der Tabelle) in derselben Größe wie der Fließtext */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(p, li, ul, ol, dl, dt, dd, blockquote, figcaption, caption, td, th, pre, address, details, summary, div) {
  font-size: inherit !important;
}

/* Tabellen: Zellen oben bündig, kein Zellabstand, keine waagerechten Linien – die Heftlinien sind die Zeilen */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(td, th) {
  vertical-align: top !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(ul, ol) {
  padding-left: 1.25em;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content li {
  font-size: inherit !important;
  padding-left: .2em;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content li::marker {
  color: var(--sh-action);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(h1, h2, h3, h4) {
  font-family: var(--sh-display) !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !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-produkt #wp--skip-link--target .gsr-product-description-content strong {
  font-weight: 650;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content a {
  color: var(--sh-ink);
  text-decoration: underline;
  text-decoration-color: var(--sh-rose-mid);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content a:hover {
  color: var(--sh-action);
  text-decoration-color: var(--sh-action);
}

/* Themenlinks „Mehr Material“ (nur wenn passende Fach-/Klassenseiten existieren): Chips wie überall (Vorgabe C).
   Die Trenner „ · “ sind Textknoten; Schriftgröße 0 am Absatz blendet sie aus. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-class-hubs {
  grid-column: -2 / -1;
  margin: 32px 0 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-class-hubs p {
  align-items: flex-start; /* Etikett oben bündig auf der Linie, Chips 32 px hoch daneben */
  display: flex;
  flex-wrap: wrap;
  font-size: 0 !important;
  gap: 12px;
  margin: 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-class-hubs strong {
  color: var(--sh-ink);
  font-family: var(--sh-text);
  font-size: 16px;
  font-weight: 650;
  line-height: 32px; /* Lineatur-Regel: das Etikett steht auf der Heftlinie (Inter 16 px, Grundlinie 22 px) */
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-class-hubs a {
  align-items: center;
  background: var(--sh-card);
  border: var(--sh-stroke) solid var(--sh-ink);
  border-radius: 999px;
  color: var(--sh-ink);
  display: inline-flex;
  font-family: var(--sh-text);
  font-size: 16px;
  font-weight: 620;
  line-height: 1.2;
  margin-top: -6px; /* 44-px-Chip mittig auf der 32-px-Zeile des Etiketts: Chip-Text und Etikett auf einer Grundlinie */
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-class-hubs 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);
}

/* ---------- 3. Marktplatz: ähnliche Materialien (außerhalb von main) ---------- */

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 88px auto 96px !important;
  max-width: var(--gsr-standard-page-width) !important;
  padding: 0 !important;
  width: var(--gsr-standard-page-width) !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-slider-header {
  display: block;
  margin: 0 0 26px;
}

/* Überschrift zuerst, der Hinweis „Passend zu diesem Material“ steht als Randnotiz darunter. */
html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-slider-header > div {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-slider-title {
  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;
  order: 1;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-slider-eyebrow {
  font-family: var(--sh-hand);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 6px 0 0 4px;
  order: 2;
  text-transform: none;
  transform: rotate(-1.5deg);
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-slider-copy {
  color: var(--sh-ink-soft);
  font-family: var(--sh-text);
  font-size: 15px;
  margin: 10px 0 0;
  max-width: 60ch;
  order: 3;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-grid {
  display: grid;
  gap: 22px 20px;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: visible;
  padding: 0;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card {
  background: var(--sh-card);
  border: 1px solid var(--sh-hair);
  border-radius: 8px;
  box-shadow: none;
  transition: transform .18s var(--sh-ease), box-shadow .18s var(--sh-ease), border-color .18s linear;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-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-produkt .gsr-related-materials-section .gsr-related-card-link {
  color: var(--sh-ink);
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card-link:focus-visible {
  outline-offset: -4px !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card-image-wrap {
  aspect-ratio: 520 / 751;
  background: #f6f3f1;
  border: 0;
  border-bottom: 1px solid var(--sh-hair);
  border-radius: 0;
  flex: 0 0 auto;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card-image {
  border-radius: 0 !important;
  padding: 0 !important;
  filter: none;
  max-height: none !important;
  object-fit: cover !important;
  object-position: top center !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card-content {
  background: var(--sh-card);
  min-height: 0 !important;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}

/* Falle: alte Regeln geben Kacheltiteln Innenabstand bei border-box – hier ausdrücklich 0. */
html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-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;
  hyphens: auto;
  letter-spacing: -.005em !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-height: 2.7em !important;
  min-height: 2.7em !important;
  order: 1;
  overflow: hidden !important;
  overflow-wrap: break-word;
  padding: 0 !important;
  white-space: normal !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card-match {
  min-height: 0 !important;
  background: none;
  color: var(--sh-ink-soft);
  font-family: var(--sh-text);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  order: 2;
  padding: 0;
}

/* Kachel-Fußzeile (Vorgabe A, gleich in Hubs, Seiten und Produkt): Aktionslink Inter 650 / 14 px in Heftrosé,
   erst beim Überfahren oder Fokus der Kachel unterstrichen. */
html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card-cta {
  color: var(--sh-action);
  font-family: var(--sh-text);
  font-size: 14px;
  line-height: 1.3;
  margin: auto 0 0;
  order: 3;
  font-weight: 650;
  min-height: 0;
  padding: 6px 0 0;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card:is(:hover, :focus-within) .gsr-related-card-cta {
  text-decoration: none;
}

/* ---------- Kachel-Aktion als Pille (Alex, 29.09.2026: „Ansehen … bitte einen modernen Stil passend zu unserem Shop“) ----------
   Produkt, „Ähnliche Materialien“: „Details ansehen“ steht als Span in der Kachel (die ganze Kachel ist der Link).
   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-produkt .gsr-related-materials-section .gsr-related-card .gsr-related-card-cta {
  align-items: center !important;
  align-self: flex-start !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-produkt .gsr-related-materials-section .gsr-related-card .gsr-related-card-cta::before {
  content: "" !important;
  display: block !important;
  inset: -7px -4px !important;
  position: absolute !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card .gsr-related-card-cta::after {
  content: none !important; /* der Text bringt seinen Pfeil schon mit („Details ansehen →“) */
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card:is(:hover, :focus-within) .gsr-related-card-cta {
  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-produkt .gsr-related-materials-section .gsr-related-card:is(:hover, :focus-within) .gsr-related-card-cta {
    transform: none;
  }
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card .gsr-related-card-cta {
  margin-top: auto !important;
}

/* Preiszeilen und %-Plaketten, die Aktions-Plugins per JS in Kacheln setzen (Paketpreis, Ferienheft, Gutscheine):
   keine eigene Box, Preis in Tinte, alter Preis weich durchgestrichen, Prozent als kleine Rosé-Pille. */
html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card {
  display: flex;
  flex-direction: column;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card > .gsr-related-card-link {
  flex: 1 1 auto;
  height: auto;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-card :is(.gsr-eduki-package-price-line, .gsr-ferienheft-sale-line) {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--sh-ink) !important;
  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;
  padding: 0 14px 14px !important;
  text-align: left !important;
  width: auto !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-card :is(.gsr-eduki-package-price, .gsr-eduki-package-price__offer, .gsr-ferienheft-sale-line strong) {
  color: var(--sh-ink) !important;
  font-weight: 650 !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-card :is(.gsr-eduki-package-price__value, .gsr-ferienheft-sale-line del) {
  color: var(--sh-ink-soft) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: line-through;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-related-card :is(.gsr-eduki-package-price__discount, .gsr-ferienheft-cover-badge, .gsr-ferienpaket-card-percent, .gsr-schulstart-cover-badge) {
  background: var(--sh-rose) !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 3px 9px !important;
  text-decoration: none !important;
  width: auto !important;
}

/* ---------- Fokus: alter Ring mit weichem Schatten raus, Tintenring und Versatz wie beim Überfahren ---------- */

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(a, button, input, summary):focus-visible {
  box-shadow: none !important;
  outline: 3px solid var(--sh-action) !important;
  outline-offset: 3px !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chip:focus-visible {
  box-shadow: inset 0 0 0 3px var(--sh-card), inset 0 0 0 4px rgba(152, 76, 103, .36), 3px 3px 0 var(--sh-ink) !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > a:first-of-type:focus-visible {
  box-shadow: 5px 5px 0 var(--sh-ink) !important;
}

/* WooCommerce legt die PhotoSwipe-Hülle an, lädt ihr CSS aber nicht (Galerie-Zoom ist aus): sonst stehen
   ihre Knöpfe als leere Pillen über dem Fuß. */
html body.gsr-schulheft.gsr-sh-produkt .pswp:not(.pswp--open) {
  display: none;
}

/* ---------- Mobile Kaufleiste (erscheint per JS nur auf dem Handy) ---------- */

html body.gsr-schulheft.gsr-sh-produkt .gsr-product-sticky-bar {
  background: var(--sh-paper) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-product-sticky-bar .gsr-product-sticky-price {
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 650 !important;
}

html body.gsr-schulheft.gsr-sh-produkt .gsr-product-sticky-bar .gsr-product-primary-cta--sticky {
  background: var(--sh-action) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--sh-ink) !important;
  color: #fff !important;
  font-weight: 650 !important;
}

/* ---------- Tablet und Handy ---------- */

@media (min-width: 960px) and (min-height: 760px) {
  /* Das Cover läuft neben der langen Kaufspalte mit, solange es ganz in das Fenster passt. */
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery {
    position: sticky;
    top: 40px;
  }
}

@media (max-width: 1099px) {
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(.gsr-product-description-open, .gsr-product-description-accordion) {
    grid-template-columns: minmax(0, 1fr);
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(#gsr-product-description-title, .gsr-product-description-accordion > summary) {
    margin-bottom: 32px !important;
  }
}

@media (max-width: 959px) {
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card {
    margin-top: 16px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
    column-gap: 0 !important;
    grid-template-columns: var(--sh-margin) minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    padding: 22px 20px 34px 0 !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-breadcrumb {
    font-size: 13.5px !important;
    margin-bottom: 22px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column:first-of-type {
    grid-row: 2 !important;
    padding: 16px 0 0 !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery {
    width: min(330px, 76%) !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns :is(.gsr-product-meta-chips, .gsr-product-summary-shell),
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) {
    grid-column: 2 !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product #wp--skip-link--target .gsr-product-main-card > .wp-block-columns h1.wp-block-post-title {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin-top: 36px !important;
    max-width: none !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chips {
    grid-row: 4 !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-summary-shell {
    grid-row: 5 !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) {
    grid-row: 6 !important;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px !important;
    padding-top: 28px;
    row-gap: 6px;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-below-fold {
    column-gap: 0 !important;
    margin-top: 32px !important;
    padding: 40px 20px 40px 0 !important;
  }

  /* Headline Heftblatt, Handy-Stufe 29/32 px (DESIGN.md) für beide Blatt-Überschriften */
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(#gsr-product-description-title, .gsr-product-description-accordion > summary),
  html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product #wp--skip-link--target .gsr-product-main-card > .wp-block-columns > .wp-block-column > section:not([class]) > h2 {
    font-size: 29px !important;
    line-height: 32px !important;
  }

  /* Lineatur-Regel: Young Serif auf 32 px, Grundlinie auf der Linie */
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(#gsr-product-description-title, .gsr-product-description-accordion > summary) {
    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-produkt #wp--skip-link--target .gsr-product-description-content :is(img:not(.emoji, .wp-smiley), video) {
    height: calc(6 * var(--sh-line)) !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content :is(iframe, embed, object) {
    height: calc(6 * var(--sh-line)) !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section {
    margin: 64px auto 72px !important;
  }
}

@media (max-width: 639px) {
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns {
    padding: 20px 16px 30px 0 !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery {
    width: min(260px, 82%) !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt.gsr-rollout-20260909.single-product #wp--skip-link--target .gsr-product-main-card > .wp-block-columns h1.wp-block-post-title {
    font-size: 29px !important;
    margin-top: 32px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chips {
    gap: 8px !important;
    margin-top: 20px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chip {
    min-height: 54px !important;
    padding: 6px 12px 8px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-meta-chip strong {
    font-size: 24px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-summary-shell {
    gap: 22px !important;
    margin-top: 22px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-catalog-product-excerpt {
    font-size: 16px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-cta-row > a {
    flex: 1 1 100% !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-box {
    padding: 18px 14px 18px;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-item {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 8px 10px;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-chips {
    gap: 6px;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-chip b {
    font-size: 15px;
    hyphens: auto;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-ups-chip {
    font-size: 12px;
    padding: 8px 4px 9px;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div {
    gap: 12px 10px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-below-fold {
    padding: 40px 16px 40px 0 !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content,
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-description-content > * {
    font-size: 17px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-grid {
    gap: 14px 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card-title {
    -webkit-line-clamp: 4 !important;
    font-size: 15px !important;
    max-height: 5.4em !important;
  }

  /* Bei ungerader Zahl liegt die letzte Kachel quer über beide Spalten statt allein. */
  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card:last-child:nth-child(odd) .gsr-related-card-link {
    flex-direction: row !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card:last-child:nth-child(odd) .gsr-related-card-image-wrap {
    border-bottom: 0 !important;
    border-right: 1px solid var(--sh-hair) !important;
    width: 36% !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card:last-child:nth-child(odd) .gsr-related-card-content {
    padding: 14px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.gsr-schulheft.gsr-sh-produkt :is(.gsr-product-meta-chip, .gsr-product-cta-row > a, .gsr-ups-btn, .gsr-related-card, .gsr-product-class-hubs a) {
    transition: none !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-class-hubs a:is(:hover, :focus-visible) {
    transform: none;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-main-card > .wp-block-columns :is(.gsr-product-meta-chip, .gsr-product-cta-row > a, .gsr-ups-btn):is(:hover, :active),
  html body.gsr-schulheft.gsr-sh-produkt .gsr-related-materials-section .gsr-related-card.gsr-related-card:is(:hover, :focus-within) {
    transform: none !important;
  }
}

/* ---------- Nur live (Vorbereitung Live-Übernahme, 28.09.2026) ----------
   Live-Produkte sind extern (Eduki). Dort steht der Preis nicht in .gsr-product-cta-row, sondern davor in
   p.gsr-product-price-line (<strong>Preis</strong> <span>Kauf und Download über Eduki</span>). Die Klasse gibt es
   auf der Testseite nicht; diese Regeln ändern dort nichts. Preis wie auf der Testseite, gestrichelte Linie
   wandert vom Knopfbereich über den Preis, damit Preis und Knopf wie im Test eine Gruppe bilden. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-price-line {
  align-items: baseline;
  border-top: 1px dashed var(--sh-rule);
  column-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 24px 0 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-price-line strong {
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-size: 34px !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 650 !important;
  letter-spacing: -.02em;
  line-height: 1.1 !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-price-line :is(span, s) {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 14.5px !important;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-price-line + .gsr-product-cta-row {
  border-top: 0 !important;
  margin-top: -8px !important;
  padding-top: 0 !important;
}

/* ---------- Blättern: Stapel am Cover, „Blick ins Material“ als Reihe (066 + gsr-schulheft-produkt.js, 29.09.2026) ----------
   Das Skript legt die Vorschauseiten aus „Blick ins Material“ als Blätter auf das Cover (.gsr-shp-blatt), Knöpfe und
   Zähler stehen darunter (.gsr-shp-blaettern). Den Platz hält html.gsr-shp-js frei (066 setzt die Klasse im Kopf nur
   auf Produktseiten mit Vorschauseiten), damit nichts springt. Ohne JS bleibt das Cover wie bisher. „Blick ins Material“
   ist auch ohne JS eine Reihe; Pfeile, Randverlauf und „Seite groß zeigen“ kommen per Skript. */

html.gsr-shp-js body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery--cover-only {
  margin-bottom: 88px !important;
  scroll-margin: 104px 0 112px;
}

/* Cover und aufgelegte Blätter gleich breit (sonst ragt das Cover 1,5 px je Seite unter dem Blatt hervor). */
html.gsr-shp-js body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-product-gallery--cover-only .gsr-product-gallery-slide {
  box-sizing: border-box;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .gsr-product-gallery-track {
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .gsr-product-gallery-track img {
  -webkit-user-drag: none;
}

/* Ein weißes Blatt zwischen Cover und Rosé-Unterblatt zeigt: Hier liegen weitere Seiten. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .gsr-product-gallery-track::before {
  background: var(--sh-card);
  border: var(--sh-stroke) solid var(--sh-ink);
  border-radius: 6px;
  content: "";
  inset: 0;
  position: absolute;
  transform: rotate(2.2deg) translate(6px, 3px);
  z-index: -1;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .gsr-product-gallery-slide {
  position: relative;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-blatt {
  background: var(--sh-card);
  border: var(--sh-stroke) solid var(--sh-ink);
  border-radius: 6px;
  inset: 0;
  margin: 0;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

/* Querformat-Seiten liegen ganz auf dem Blatt, nichts wird abgeschnitten. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-blatt img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel :is(.is-ab, .is-vor) {
  z-index: 2;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel :is(.is-auf, .is-weg) {
  z-index: 3;
}

/* Knöpfe und Zähler unter dem Blatt; das Blatt liegt bei −2°, die Zeile steht gerade. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-blaettern {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(100% + 30px);
  transform: rotate(2deg);
  z-index: 3;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-zahl {
  color: var(--sh-ink);
  font: 500 15px/1.2 var(--sh-text);
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 8.6em;
  text-align: center;
}

/* Runde Pfeilknöpfe (Stapel und Reihe): Kachelweiß, Tintenkontur wie die Chips, gezeichneter Winkel statt Zeichen */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-pfeil {
  align-items: center;
  background: var(--sh-card);
  border: var(--sh-stroke) solid var(--sh-ink);
  border-radius: 50%;
  box-shadow: none;
  color: var(--sh-ink);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 44px;
  justify-content: center;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
  width: 44px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-pfeil::before {
  border-bottom: 1.75px solid currentColor;
  border-left: 1.75px solid currentColor;
  content: "";
  height: 9px;
  transform: translateX(2px) rotate(45deg);
  width: 9px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-pfeil[data-d="1"]::before {
  transform: translateX(-2px) rotate(-135deg);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-pfeil:hover:not([aria-disabled="true"]) {
  background: var(--sh-rose);
  box-shadow: 3px 3px 0 var(--sh-ink);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-pfeil:active:not([aria-disabled="true"]) {
  box-shadow: 1px 1px 0 var(--sh-ink);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-pfeil[aria-disabled="true"] {
  cursor: default;
  opacity: .35;
}

/* „Blick ins Material“: eine Reihe mit fester Bildhöhe; width/height der Bilder (066) halten das Seitenverhältnis. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) {
  --gsr-shp-rand: 48px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div {
  display: flex !important;
  gap: 16px !important;
  margin: 18px -6px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 6px 6px 14px;
  scroll-padding-inline: var(--gsr-shp-rand);
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(152, 76, 103, .4) transparent;
  scrollbar-width: thin;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div > figure {
  flex: none;
  height: 248px;
  scroll-snap-align: start;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) figure img {
  height: 100% !important;
  width: auto !important;
}

/* Randverlauf nur auf der Seite, auf der es weitergeht (Klassen setzt das Skript) */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div:is(.is-links, .is-rechts) {
  -webkit-mask-image: linear-gradient(90deg, var(--gsr-shp-l, #000), #000 var(--gsr-shp-rand), #000 calc(100% - var(--gsr-shp-rand)), var(--gsr-shp-r, #000));
  mask-image: linear-gradient(90deg, var(--gsr-shp-l, #000), #000 var(--gsr-shp-rand), #000 calc(100% - var(--gsr-shp-rand)), var(--gsr-shp-r, #000));
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div.is-links {
  --gsr-shp-l: transparent;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div.is-rechts {
  --gsr-shp-r: transparent;
}

/* Jede Seite ist ein Knopf: legt sie oben auf den Stapel. */
html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) .gsr-shp-seite {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: block;
  height: 100%;
  margin: 0;
  min-height: 0;
  padding: 0;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div > figure:has(> .gsr-shp-seite:hover) {
  border-color: var(--sh-ink) !important;
  box-shadow: 3px 3px 0 var(--sh-ink);
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div > figure:has(> [aria-current="true"]) {
  outline: var(--sh-stroke) solid var(--sh-ink);
  outline-offset: 3px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div > figure:has(> :focus-visible) {
  outline: 3px solid var(--sh-action);
  outline-offset: 2px;
}

html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > .gsr-shp-reihe {
  display: none;
}

@media (min-width: 960px) {
  html.gsr-shp-js body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) {
    grid-template-columns: auto minmax(0, 1fr) 98px;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > .gsr-shp-reihe {
    align-self: center;
    display: flex;
    gap: 10px;
  }
}

@media (max-width: 959px) {
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div > figure {
    height: 220px;
  }
}

@media (max-width: 639px) {
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) {
    --gsr-shp-rand: 28px;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div {
    gap: 12px !important;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div > figure {
    height: 196px;
  }
}

/* Bewegung: Die neue Seite legt sich in 0,3 s auf (ease-out), die alte rutscht an die Stelle des weißen Blatts darunter;
   rückwärts hebt sich die obere ab und die vorige kommt hervor. Bei reduzierter Bewegung wechselt das Skript ohne Klassen. */
@media (prefers-reduced-motion: no-preference) {
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .is-auf {
    animation: gsr-shp-hinlegen .3s var(--sh-ease) both;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .is-ab {
    animation: gsr-shp-darunter .3s var(--sh-ease) both;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .is-vor {
    animation: gsr-shp-hervor .3s var(--sh-ease) both;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .is-weg {
    animation: gsr-shp-abheben .3s var(--sh-ease) both;
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .gsr-product-gallery-track::before {
    transition: transform .2s var(--sh-ease);
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-stapel .gsr-product-gallery-track:hover::before {
    transform: rotate(3.4deg) translate(9px, 5px);
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target :is(.gsr-shp-pfeil, .wp-block-column > section:not([class]) > div > figure) {
    transition: background-color .16s var(--sh-ease), border-color .16s var(--sh-ease), box-shadow .16s var(--sh-ease), transform .16s var(--sh-ease);
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-pfeil:hover:not([aria-disabled="true"]),
  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div > figure:has(> .gsr-shp-seite:hover) {
    transform: translate(-2px, -2px);
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .gsr-shp-pfeil:active:not([aria-disabled="true"]) {
    transform: translate(1px, 1px);
  }

  html body.gsr-schulheft.gsr-sh-produkt #wp--skip-link--target .wp-block-column > section:not([class]) > div {
    scroll-behavior: smooth;
  }
}

@keyframes gsr-shp-hinlegen {
  from { opacity: 0; transform: translate(18px, -16px) rotate(3deg); }
  40% { opacity: 1; }
}

@keyframes gsr-shp-abheben {
  50% { opacity: 1; }
  to { opacity: 0; transform: translate(18px, -16px) rotate(3deg); }
}

@keyframes gsr-shp-darunter {
  60% { opacity: 1; }
  to { opacity: 0; transform: rotate(2.2deg) translate(6px, 3px); }
}

@keyframes gsr-shp-hervor {
  from { opacity: 0; transform: rotate(2.2deg) translate(6px, 3px); }
  40% { opacity: 1; }
}