/*
 * Designsystem „Schulheft + Marktplatz“ – Basis (Tokens, Schriften, Kopf, Fuß) für alle Seiten der Testseite und die Startseite.
 * Greift nur unter body.gsr-schulheft (gesetzt von 064-gsr-testshop-schulheft.php).
 * Inhalt, Überschriften und Links bleiben unverändert; hier ändert sich nur die Gestaltung.
 * !important steht nur dort, wo bestehende Regeln dieselbe Eigenschaft mit !important setzen.
 */

@font-face {
  font-family: "GSR Young Serif";
  src: url("fonts/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GSR Grundschrift";
  src: url("fonts/grundschrift-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

body.gsr-schulheft {
  --sh-ground: #f8f7f5;
  --sh-paper: #fffdfb;
  --sh-card: #ffffff;
  --sh-rose: #f8e8ed;
  --sh-rose-mid: #c77f97;
  --sh-action: #984c67;
  --sh-action-deep: #7f3e56;
  --sh-ink: #3f3436;
  --sh-ink-soft: #65575a;
  --sh-hair: rgba(63, 52, 54, .17);
  --sh-grid: rgba(152, 76, 103, .075);
  --sh-rule: rgba(152, 76, 103, .2);
  --sh-margin-line: rgba(199, 127, 151, .6);
  --sh-display: "GSR Young Serif", Georgia, "Times New Roman", serif;
  --sh-text: Inter, "GSR Inter Fallback", Arial, sans-serif;
  --sh-hand: "GSR Grundschrift", Inter, Arial, sans-serif;
  --sh-stroke: 1.5px;
  --sh-radius: 18px;
  --sh-ease: cubic-bezier(.16, 1, .3, 1);
  --sh-margin: 72px;
  background: var(--sh-ground) !important;
  color: var(--sh-ink);
}

/* Seitenfläche aller Familien (Hub, Produkt, Seite, Basis): derselbe Heftgrund wie auf der Startseite,
   auch wenn alte Regeln einzelner Seitentypen den Body stärker färben. Die Startseite nutzt die Regel oben. */
html body.gsr-schulheft:is(.gsr-sh-hub, .gsr-sh-produkt, .gsr-sh-seite, .gsr-sh-basis) {
  background: var(--sh-ground) !important;
}

html:has(body.gsr-schulheft) {
  scrollbar-color: #cdb8bf var(--sh-ground);
}

body.gsr-schulheft ::selection {
  background: #f1cfdb;
  color: var(--sh-ink);
}

body.gsr-schulheft :is(input, textarea) {
  caret-color: var(--sh-action);
}

body.gsr-schulheft :is(a, button, input, summary):focus-visible {
  outline: 3px solid var(--sh-action) !important;
  outline-offset: 3px !important;
}

/* ---------- Kopf ---------- */

body.gsr-schulheft .gsr-modern-site-topline {
  background: var(--sh-rose) !important;
  border-bottom: 1px solid var(--sh-hair) !important;
}

body.gsr-schulheft .gsr-modern-site-topline > span:first-child {
  color: var(--sh-ink) !important;
  font-family: var(--sh-hand) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.gsr-schulheft .gsr-modern-newsletter-strip__heart {
  background: url("motive/rose-bluete-s.webp") no-repeat 50% 50% / contain;
  color: transparent !important;
  display: inline-block !important;
  font-size: 0 !important;
  height: 16px;
  vertical-align: -3px;
  width: 16px;
}

body.gsr-schulheft .gsr-modern-newsletter-strip strong {
  color: var(--sh-action) !important;
}

html body.gsr-schulheft .gsr-modern-site-header {
  background: var(--sh-paper) !important;
  border-bottom: 1px solid var(--sh-hair) !important;
  box-shadow: none !important;
}

html body.gsr-schulheft .gsr-modern-site-categories > a,
html body.gsr-schulheft .gsr-modern-site-categories > details > summary {
  color: var(--sh-ink) !important;
}

html body.gsr-schulheft .gsr-modern-site-categories > a:hover,
html body.gsr-schulheft .gsr-modern-site-categories > details > summary:hover {
  color: var(--sh-action) !important;
}

html body.gsr-schulheft .gsr-modern-site-header .gsr-modern-site-search {
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  overflow: hidden;
  transition: box-shadow .18s var(--sh-ease);
}

html body.gsr-schulheft .gsr-modern-site-header .gsr-modern-site-search:focus-within {
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
}

html body.gsr-schulheft .gsr-modern-site-header .gsr-modern-site-search input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px 0 0 999px !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-size: 16px !important;
}

html body.gsr-schulheft .gsr-modern-site-header .gsr-modern-site-search input::placeholder {
  color: var(--sh-ink-soft);
  opacity: 1;
}

html body.gsr-schulheft .gsr-modern-site-header .gsr-modern-site-search input:focus-visible {
  outline: 0 !important;
}

html body.gsr-schulheft .gsr-modern-site-header .gsr-modern-site-search button {
  background: var(--sh-action) !important;
  border: 0 !important;
  border-left: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 0 999px 999px 0 !important;
  color: #fff !important;
}

html body.gsr-schulheft .gsr-modern-site-header .gsr-modern-site-search button:hover {
  background: var(--sh-action-deep) !important;
}

@media (min-width: 1280px) {
  html body.gsr-schulheft .gsr-modern-site-header .gsr-modern-site-head {
    grid-template-columns: auto minmax(0, 1fr) clamp(360px, 30vw, 480px) !important;
  }
}

/* ---------- Herbst-Einstieg: die aufgeschlagene Heftseite ---------- */

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-hero {
  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-size: 100% 100%, 24px 24px, 24px 24px !important;
  background-position: 0 0, 0 -1px, -1px 0 !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: none !important;
  column-gap: 48px !important;
  display: grid !important;
  grid-template-columns: var(--sh-margin) minmax(0, 1.12fr) minmax(0, .88fr) !important;
  grid-template-rows: auto auto 1fr auto !important;
  overflow: visible !important;
  padding: 64px 56px 44px 0 !important;
  position: relative;
  row-gap: 0 !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy {
  display: contents !important;
}

/* Die Randnotiz oben rechts steht dort, wo im Heft das Datum steht. */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy > .gsr-modern-eyebrow {
  background: url("motive/welle.svg") no-repeat 100% 100% / 86px 9px;
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  position: absolute;
  right: 44px;
  text-transform: none !important;
  top: 20px;
  transform: rotate(-2deg);
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy h1 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: clamp(2.25rem, 1.05rem + 3.9vw, 4.5rem) !important;
  font-weight: 400 !important;
  grid-column: 2;
  grid-row: 1;
  letter-spacing: -.012em !important;
  line-height: 1.04 !important;
  margin: 0 !important;
  max-width: 13ch !important;
  text-wrap: balance;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy h1 > span {
  color: var(--sh-ink) !important;
  display: block;
  isolation: isolate;
  position: relative;
  width: fit-content;
}

/* Signatur: Der Markerstrich zieht sich einmal unter „Herbstideen“, der Bleistift liegt am Ende. */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy h1 > span::before {
  animation: gsr-sh-marker .95s var(--sh-ease) .3s both;
  background: url("motive/markerstrich.webp") no-repeat 0 50% / 100% 100%;
  bottom: .02em;
  content: "";
  height: .52em;
  left: -.12em;
  opacity: .5;
  position: absolute;
  right: -.16em;
  z-index: -1;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy h1 > span::after {
  animation: gsr-sh-pencil .95s var(--sh-ease) .3s both;
  background: url("motive/bleistift-l.webp") no-repeat 50% 50% / contain;
  content: "";
  height: 1.3em;
  left: calc(100% + .06em);
  pointer-events: none;
  position: absolute;
  top: -.62em;
  width: 1.23em;
}

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

@keyframes gsr-sh-pencil {
  from { left: -.5em; }
  to { left: calc(100% + .06em); }
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy > p:not(.gsr-modern-eyebrow) {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 19px !important;
  grid-column: 2;
  grid-row: 2;
  line-height: 1.6 !important;
  margin: 22px 0 0 !important;
  max-width: 34em !important;
}

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

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-actions {
  align-items: center !important;
  align-self: start;
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px 28px !important;
  grid-column: 2;
  grid-row: 3;
  margin: 30px 0 0 !important;
}

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

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

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-actions > .gsr-modern-button:active {
  box-shadow: 1px 1px 0 var(--sh-ink) !important;
  transform: translate(2px, 2px);
}

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

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-actions > a:not(.gsr-modern-button):hover {
  color: var(--sh-action) !important;
  text-decoration-color: var(--sh-action) !important;
}

/* Klassen als Heftetiketten */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades {
  align-items: center;
  background: none !important;
  border: 0 !important;
  border-top: 1px dashed var(--sh-rule) !important;
  display: grid !important;
  gap: 16px 28px;
  grid-column: 2 / -1;
  grid-row: 4;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 40px 0 0 !important;
  padding: 28px 0 0 !important;
}

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

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades nav {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

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

/* Schreiblinie wie auf einem Heftschild */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades nav a::after {
  background: rgba(63, 52, 54, .28);
  bottom: 18px;
  content: "";
  height: 1px;
  left: 16%;
  position: absolute;
  right: 16%;
}

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

/* Das echte Cover liegt als loses Blatt auf der Heftseite */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-material-preview {
  align-items: center !important;
  align-self: center;
  background: none !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column;
  grid-column: 3;
  grid-row: 1 / 4;
  justify-content: center !important;
  margin: 8px 0 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: relative;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-images {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  position: relative;
  transform: rotate(-4deg);
  transition: transform .35s var(--sh-ease);
  width: 300px !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-images::before {
  background: var(--sh-rose);
  border: var(--sh-stroke) solid var(--sh-ink);
  border-radius: 6px;
  content: "";
  inset: 0;
  position: absolute;
  transform: rotate(7deg) translate(14px, 4px);
  transition: transform .35s var(--sh-ease);
  z-index: -1;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-images::after {
  background: url("motive/washi-uni.webp") no-repeat 50% 50% / 100% 100%;
  content: "";
  height: 30px;
  left: 50%;
  position: absolute;
  top: -15px;
  transform: translateX(-50%) rotate(-5deg);
  width: 104px;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-images:hover {
  transform: rotate(-2.5deg) translateY(-4px);
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-images:hover::before {
  transform: rotate(9deg) translate(20px, 6px);
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-images > p:empty {
  display: none !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-cover {
  aspect-ratio: auto !important;
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 100% !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-cover img {
  aspect-ratio: 520 / 751;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* Liveseite: zweites Beispielblatt neben dem Cover */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-detail {
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 6px !important;
  bottom: -18px;
  box-shadow: none !important;
  overflow: hidden;
  position: absolute !important;
  right: -46px;
  transform: rotate(8deg);
  width: 46% !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-caption {
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  margin: 34px 0 0 !important;
  max-width: 300px;
  padding: 0 0 0 64px;
  position: relative;
  text-align: left !important;
  transform: rotate(-3deg);
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-caption span {
  color: var(--sh-ink-soft) !important;
  display: block !important;
  font-family: var(--sh-hand) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  margin-top: 2px;
  text-transform: none !important;
  white-space: nowrap;
}

/* Füllerpfeil von der Notiz zum Cover */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-caption::before {
  background: url("motive/pfeil-bogen.svg") no-repeat 50% 50% / contain;
  content: "";
  height: 34px;
  left: 2px;
  position: absolute;
  top: -22px;
  transform: rotate(-38deg);
  width: 56px;
}

@media (min-width: 1200px) {
  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-material-preview {
    align-items: flex-end !important;
    padding-right: 18px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-images {
    width: 318px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-caption {
    bottom: 34px;
    left: -46px;
    margin: 0 !important;
    max-width: 200px;
    padding: 0 !important;
    position: absolute;
    transform: rotate(-5deg);
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-caption::before {
    height: 46px;
    left: auto;
    right: -64px;
    top: -52px;
    transform: rotate(-6deg);
    width: 82px;
  }
}

/* ---------- Marktplatz: Materialkacheln ---------- */

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials {
  column-gap: 20px;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 !important;
  padding: 88px 0 24px !important;
  row-gap: 22px;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > h2 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem) !important;
  font-weight: 400 !important;
  grid-column: 1 / -1;
  letter-spacing: -.012em !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > p:not(:has(.gsr-home-all-materials)) {
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 25px !important;
  grid-column: 1 / -1;
  justify-self: start;
  line-height: 1.2 !important;
  margin: -6px 0 12px 4px !important;
  transform: rotate(-1.5deg);
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > .gsr-modern-topic-grid {
  display: contents !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials p:empty {
  display: none !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card {
  background: var(--sh-card) !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  transition: transform .18s var(--sh-ease), box-shadow .18s var(--sh-ease), border-color .18s linear;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card:hover,
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card: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.home #wp--skip-link--target .gsr-home-curated-materials .gsr-home-material-link {
  color: var(--sh-ink) !important;
  text-decoration: none !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-home-material-link:focus-visible {
  outline-offset: -4px !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card__image {
  background: #f6f3f1 !important;
  border-bottom: 1px solid var(--sh-hair) !important;
  border-radius: 0 !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card__image img {
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card__body {
  background: var(--sh-card) !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card__body h3 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  box-sizing: content-box !important;
  margin-bottom: 5px !important;
  padding-bottom: 0 !important;
  color: var(--sh-ink) !important;
  display: -webkit-box !important;
  font-family: var(--sh-text) !important;
  font-size: 15.5px !important;
  font-weight: 620 !important;
  height: auto !important;
  letter-spacing: -.005em !important;
  line-height: 1.35 !important;
  max-height: 2.7em !important;
  min-height: 2.7em !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card__body p {
  color: var(--sh-ink-soft) !important;
  font-size: 13.5px !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card__body span {
  color: var(--sh-action) !important;
  font-weight: 650 !important;
}

/* „Alle Herbstmaterialien ansehen“ als letzte Kachel im Raster */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > p:has(.gsr-home-all-materials),
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > .gsr-home-all-materials {
  display: flex !important;
  margin: 0 !important;
  min-height: 0 !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-home-all-materials {
  align-items: flex-start;
  background: var(--sh-rose) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  display: flex !important;
  flex: 1;
  flex-direction: column;
  font-family: var(--sh-display) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  gap: 18px;
  hyphens: manual;
  justify-content: flex-end;
  line-height: 1.15 !important;
  min-height: 100%;
  min-width: 0;
  padding: 24px 22px 26px !important;
  text-decoration: none !important;
  transition: transform .18s var(--sh-ease), box-shadow .18s var(--sh-ease);
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-home-all-materials::before {
  align-self: center;
  background: url("motive/stilprobe-1/gouache/herbstlaub-l.webp") no-repeat 50% 50% / contain;
  content: "";
  flex: 1;
  max-height: 150px;
  min-height: 96px;
  width: 100%;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-home-all-materials:hover {
  box-shadow: 4px 4px 0 var(--sh-ink) !important;
  transform: translate(-3px, -3px);
}

/* ---------- Anlässe als Chips auf einem Rosé-Feld ---------- */

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-links {
  align-items: center !important;
  background: var(--sh-rose) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: var(--sh-radius) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 56px 0 0 !important;
  padding: 22px 28px !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-links > span {
  color: var(--sh-ink) !important;
  font-family: var(--sh-hand) !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  margin-right: 12px !important;
  text-transform: none !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-links > a {
  align-items: center;
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  color: var(--sh-ink) !important;
  display: inline-flex !important;
  font-family: var(--sh-text) !important;
  font-size: 16px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  text-decoration: none !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear, color .16s linear;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-links > a:hover {
  background: var(--sh-action) !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  color: #fff !important;
  transform: translate(-2px, -2px);
}

/* ---------- „Schön, dass du hier bist“: liniertes Heftblatt ---------- */

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about {
  --sh-line: 32px;
  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)),
    repeating-linear-gradient(transparent 0 22px, var(--sh-rule) 22px 23px, transparent 23px var(--sh-line)) !important;
  background-origin: padding-box, content-box !important; /* Lineatur-Regel: Periode beginnt am Inhalt, Linie bei 22 px */
  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;
  column-gap: 44px !important;
  display: grid !important;
  grid-template-columns: var(--sh-margin) 168px minmax(0, 1fr) !important;
  margin: 56px 0 96px !important;
  overflow: hidden;
  padding: 48px 180px 64px 0 !important;
  position: relative;
  row-gap: 0 !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about > div:first-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 0; /* Lineatur-Regel: das Porträt bestimmt keine Zeilenhöhe, es liegt nur auf dem Blatt */
  margin: 0 !important;
  text-align: center;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about > div:first-child img {
  background: var(--sh-card);
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  display: block;
  height: 150px !important;
  margin: 0 auto !important;
  padding: 5px;
  transform: rotate(-4deg);
  width: 150px !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about > div:last-child {
  display: contents !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about .gsr-modern-eyebrow {
  align-self: start;
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  grid-column: 2;
  grid-row: 3;
  letter-spacing: 0 !important;
  line-height: var(--sh-line) !important;
  margin: var(--sh-line) 0 0 !important;
  position: relative;
  text-align: center;
  text-transform: none !important;
  top: calc(6.25px - .299em); /* Lineatur-Regel: Grundschrift auf der Linie (Näherung ohne round()) */
  top: calc(22px - round(down, (32px - round(.899em, 1px) - round(.301em, 1px)) / 2, 1px) - round(.899em, 1px));
  transform: none;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about h2 {
  color: var(--sh-ink) !important;
  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;
  grid-column: 3;
  grid-row: 1;
  letter-spacing: -.012em !important;
  line-height: 64px !important;
  margin: 0 !important;
  position: relative;
  top: calc(22.25px - .34em); /* Lineatur-Regel, Näherung ohne round() */
  top: calc(54px - round(down, (64px - round(1.046em, 1px) - round(.366em, 1px)) / 2, 1px) - round(1.046em, 1px)); /* Young Serif, 64-px-Zeile */
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about h2 + p {
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-size: 18px !important;
  grid-column: 3;
  grid-row: 2;
  line-height: var(--sh-line) !important;
  margin: 0 !important;
  max-width: 40em !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about > div:last-child > :is(a, p:last-child) {
  grid-column: 3;
  grid-row: 3;
  line-height: var(--sh-line) !important;
  margin: var(--sh-line) 0 0 !important;
}

html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about > div:last-child a:not(.custom-logo-link) {
  color: var(--sh-action) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 6px;
}

/* Der rosa Füller liegt unten rechts auf dem Blatt */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about::after {
  background: url("motive/fueller-l.webp") no-repeat 50% 50% / contain;
  bottom: 30px;
  content: "";
  height: 124px;
  pointer-events: none;
  position: absolute;
  right: 36px;
  transform: rotate(-8deg);
  width: 144px;
}

/* ---------- Fuß ---------- */

html body.gsr-schulheft .gsr-modern-footer {
  background: var(--sh-ground) !important;
  border-top: var(--sh-stroke) solid var(--sh-ink) !important;
}

/* Gleich stark wie früher mit .home (0,3,4), gilt jetzt auf allen Schulheft-Seiten. */
html body.gsr-schulheft.gsr-rollout-20260909 .gsr-modern-footer nav h2 {
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.gsr-schulheft .gsr-modern-footer-wordmark strong {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-weight: 400 !important;
}

html body.gsr-schulheft .gsr-modern-footer-wordmark span {
  color: var(--sh-action) !important;
  font-family: var(--sh-hand) !important;
  font-size: 19px !important;
  font-style: normal !important;
}

html body.gsr-schulheft .gsr-modern-footer nav a {
  color: var(--sh-ink-soft) !important;
}

html body.gsr-schulheft .gsr-modern-footer nav a:hover {
  color: var(--sh-action) !important;
}

html body.gsr-schulheft .gsr-modern-footer__bottom {
  flex-wrap: wrap !important;
  gap: 8px 24px !important;
}

html body.gsr-schulheft .gsr-modern-footer__bottom .gsr-schulheft-credit {
  flex-basis: 100%;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

html body.gsr-schulheft .gsr-modern-footer__bottom .gsr-schulheft-credit a {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

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

@media (max-width: 1099px) {
  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > p:has(.gsr-home-all-materials),
  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > .gsr-home-all-materials {
    grid-column: span 2;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 959px) {
  body.gsr-schulheft {
    --sh-margin: 34px;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-hero {
    column-gap: 0 !important;
    grid-template-columns: var(--sh-margin) minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    padding: 40px 22px 34px 0 !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target :is(.gsr-home-season-copy h1, .gsr-home-season-copy > p:not(.gsr-modern-eyebrow), .gsr-home-season-actions, .gsr-home-grades, .gsr-home-material-preview) {
    grid-column: 2;
    grid-row: auto;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy > .gsr-modern-eyebrow {
    font-size: 22px !important;
    grid-column: 2;
    justify-self: end;
    margin: 36px 4px -8px 0 !important;
    order: 5;
    position: static;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-material-preview {
    order: 6;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy h1 {
    max-width: none !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-material-preview {
    margin: 44px 0 0 !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-preview-images {
    width: min(236px, 66vw) !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about {
    column-gap: 16px !important;
    grid-template-columns: var(--sh-margin) 104px minmax(0, 1fr) !important;
    margin-bottom: 64px !important;
    padding: 40px 22px 150px 0 !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about > div:first-child {
    grid-column: 2;
    grid-row: 1;
    height: 128px; /* Lineatur-Regel: vier Heftzeilen, das Porträt (117 px) passt hinein */
    justify-self: start;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about .gsr-modern-eyebrow {
    align-self: end; /* Lineatur-Regel: unten bündig in der 128-px-Zeile, also auf einer Heftlinie */
    grid-column: 3;
    grid-row: 1;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about h2 {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 32px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about h2 + p {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about > div:last-child > :is(a, p:last-child) {
    grid-column: 2 / -1;
    grid-row: 4;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about > div:first-child img {
    height: 104px !important;
    width: 104px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about .gsr-modern-eyebrow {
    margin: 0 !important;
    text-align: left;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about h2 {
    font-size: 29px !important;
    line-height: 32px !important;
    margin-bottom: 32px !important;
    top: calc(6.25px - .34em);
    top: calc(22px - round(down, (32px - round(1.046em, 1px) - round(.366em, 1px)) / 2, 1px) - round(1.046em, 1px));
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-about::after {
    bottom: 22px;
    height: 100px;
    right: 22px;
    width: 116px;
  }
}

@media (max-width: 639px) {
  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy > p:not(.gsr-modern-eyebrow) {
    font-size: 17px !important;
    margin-top: 18px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-actions {
    margin-top: 24px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades {
    margin-top: 32px !important;
    padding-top: 24px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades h2 {
    font-size: 21px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades nav {
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades nav a:first-child {
    grid-column: 1 / -1;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades nav a {
    font-size: 24px !important;
    min-height: 62px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-grades nav a::after {
    bottom: 14px;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials {
    column-gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 64px !important;
    row-gap: 14px;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > p:has(.gsr-home-all-materials),
  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials > .gsr-home-all-materials {
    grid-column: 1 / -1;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-modern-topic-card__body h3 {
    -webkit-line-clamp: 4 !important;
    font-size: 15px !important;
    max-height: 5.4em !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-home-all-materials {
    align-items: center;
    flex-direction: row;
    font-size: 21px !important;
    min-height: 96px;
    padding: 14px 18px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials .gsr-home-all-materials::before {
    flex: 0 0 72px;
    height: 64px;
    max-height: none;
    min-height: 0;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-links {
    padding: 18px 18px 20px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-links > span {
    flex-basis: 100%;
    font-size: 24px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-links > a {
    font-size: 15px !important;
    padding: 0 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy h1 > span::before,
  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-season-copy h1 > span::after {
    animation: none;
  }

  body.gsr-schulheft :is(.gsr-home-preview-images, .gsr-home-preview-images::before, .gsr-modern-topic-card, .gsr-home-grades nav a, .gsr-home-season-links > a, .gsr-home-season-actions > a, .gsr-home-all-materials) {
    transition: none !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target :is(.gsr-home-preview-images, .gsr-modern-topic-card, .gsr-home-grades nav a, .gsr-home-season-links > a, .gsr-home-season-actions > a, .gsr-home-all-materials):hover {
    transform: none !important;
  }
}

/* ---------- Nur live (Vorbereitung Live-Übernahme, 28.09.2026) ----------
   1. Live zeigt im Einstieg Cover UND Beispielblatt (.gsr-home-preview-detail, gibt es auf der Testseite nicht).
      Die zweite Notizzeile („Cover und Beispiel aus dem Material“) lief mit nowrap unter das Beispielblatt
      (Desktop) bzw. über den Blattrand (Handy). Mit Beispielblatt darf sie umbrechen.
   2. Live hat seit 27.09. fünf Startseitenkarten; mit der „Alle …“-Kachel wären das sechs Zellen und die Kachel
      stünde am Rechner allein in einer neuen Reihe. Geht die Kartenzahl in fünf Spalten auf, wird die Kachel
      dort zur flachen Leiste über die volle Breite. Auf der Testseite (vier Karten) greift beides nicht. */
html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-material-preview:has(.gsr-home-preview-detail) .gsr-home-preview-caption span {
  white-space: normal;
}

@media (min-width: 1100px) {
  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials:has(.gsr-modern-topic-card:nth-of-type(5n):last-of-type) > p:has(.gsr-home-all-materials) {
    grid-column: 1 / -1;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials:has(.gsr-modern-topic-card:nth-of-type(5n):last-of-type) .gsr-home-all-materials {
    align-items: center;
    flex-direction: row;
    gap: 22px;
    justify-content: flex-start;
    min-height: 0;
    padding: 14px 28px !important;
  }

  html body.gsr-schulheft.home #wp--skip-link--target .gsr-home-curated-materials:has(.gsr-modern-topic-card:nth-of-type(5n):last-of-type) .gsr-home-all-materials::before {
    flex: 0 0 76px;
    height: 68px;
    max-height: none;
    min-height: 0;
  }
}

/* ---------- Kachel-Untertitel (live, 29.09.2026) ----------
   gsr-modern-free-labels (modern-site-b.php) teilt Kacheltitel am „|“ und setzt den Rest als p.gsr-card-subtitle
   (einzeilig mit Auslassungspunkten). Ohne Breitenvorgabe zählte die ganze Zeile zur Mindestbreite der Kachel: Am Handy
   wurden Kacheln 190–310 px breit statt 175 px und schoben sich übereinander. width 0 + min-width 100 % füllt die
   Kachel, ohne sie zu verbreitern. */
html body.gsr-schulheft #wp--skip-link--target :is(.gsr-material-card, .gsr-modern-topic-card) .gsr-card-subtitle {
  box-sizing: border-box !important;
  min-width: 100% !important;
  width: 0 !important;
}