/*
 * Designsystem „Schulheft + Marktplatz“ – Blogbeiträge (body.gsr-sh-beitrag, dazu Familie „seite“).
 * Eingebunden von gsr-restseiten.php nach gsr-schulheft-seiten.css (29.09.2026, Auftrag Alex „alle das neue Layout“).
 * Präfix wie in seiten.css: doppelte ID gegen alte Regeln aus modern-site-b.php und gsr-wm-article-style.php,
 * !important nur, wo die alten Regeln es selbst tragen. Raster, Seitenleiste und Kartenaufbau bleiben dort;
 * hier nur Heftblatt, Tinte, Schriften, Kästen und Knöpfe.
 */

/* ---------- Kopf: Heftseite wie .gsr-sh-kopf, Beitragsbild eingeklebt ---------- */

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero {
  align-items: center !important;
  background: var(--sh-randlinie), var(--sh-karo), var(--sh-paper) !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: 48px !important;
  padding: 76px 48px 48px var(--sh-inset) !important;
  position: relative !important;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero__copy {
  position: static !important;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero .gsr-modern-eyebrow {
  background: url("motive/welle.svg") no-repeat 100% 100% / 86px 9px !important;
  font-size: 25px !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 0 10px !important;
  position: absolute;
  right: 44px;
  top: 20px;
  transform: rotate(-2deg);
  white-space: nowrap;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero h1 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.012em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  hyphens: manual !important;
  max-width: 22ch !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero__lead {
  color: var(--sh-ink-soft) !important;
  font-family: var(--sh-text) !important;
  font-size: 19px !important;
  line-height: 1.6 !important;
  margin: 20px 0 0 !important;
  max-width: 40em !important;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero__visual {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero__visual img {
  background: var(--sh-card) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 10px !important;
  box-shadow: 6px 6px 0 var(--sh-rose) !important;
  transform: rotate(1.5deg);
}

/* ---------- Beitragstext auf dem geknitterten Blankoblatt (wie Produktseiten, Alex 29.09.2026) ---------- */

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-editorial-body {
  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(rgba(255, 253, 251, .8), rgba(255, 253, 251, .8)),
    url("motive/papier-knitter.webp") !important;
  background-position: 0 0, 0 0, -40px -24px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-size: 100% 100%, 100% 100%, 1200px 800px !important;
  background-blend-mode: normal, normal, multiply !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;
  margin-top: 28px !important;
  overflow: visible !important;
  padding: 56px 48px 56px var(--sh-inset) !important;
  position: relative !important;
}

/* Ringheft: Drahtschlaufe außen, hinter dem Blatt verdeckt, im Loch wieder sichtbar (Alex 29.09.2026: „3D-mäßig hinter dem Blatt“).
   Die Blattkante liegt im 40×30-Motiv bei x = 20 (left: -20px; Handy 0,8-fach, left: -16px). */
.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-editorial-body::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='30' viewBox='0 0 40 30'%3E%3Cdefs%3E%3CclipPath id='l'%3E%3Ccircle cx='28' cy='15' r='3.6'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M20 23.5C9 24 3.5 19.5 4 15S10 7 20 7.5' fill='none' stroke='rgba(63,52,54,.2)' stroke-width='2.6' transform='translate(1.2 1.6)'/%3E%3Cpath d='M20 23.5C9 24 3.5 19.5 4 15S10 7 20 7.5' fill='none' stroke='%2365575a' stroke-width='2.4'/%3E%3Cpath d='M18.5 22.2C10 22.5 5.3 19 5.5 15' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='.8' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='15' r='3.6' fill='%23e6dfd9' stroke='%233f3436' stroke-width='1.2'/%3E%3Cpath d='M23.5 15.9Q26 15.4 28.6 15.1' fill='none' stroke='%2365575a' stroke-width='2.4' stroke-linecap='round' clip-path='url(%23l)'/%3E%3Cpath d='M25.2 13.2a3.6 3.6 0 0 1 3.4-1.8' fill='none' stroke='rgba(63,52,54,.35)' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 40px 30px repeat-y;
  bottom: 22px;
  content: "";
  left: -20px;
  pointer-events: none;
  position: absolute;
  top: 22px;
  width: 40px;
}

/* Cover nicht aufs Knitterpapier: Materialkarten liegen auf einem glatten, karierten Einlegeblatt wie in den Hubs */
.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-wm-material-grid {
  background: var(--sh-karo), var(--sh-paper) !important;
  background-position: 0 -1px, -1px 0, 0 0 !important;
  background-size: 24px 24px, 24px 24px, auto !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  padding: 20px !important;
}

/* ---------- Text: Tinte, Inter, Überschriften in Young Serif ---------- */

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-editorial-body :is(p, li):is(:not([class]), .wp-block-paragraph) {
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-editorial-body h2 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-size: clamp(1.75rem, 1.25rem + 1.3vw, 2.4rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-editorial-body h3 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-text) !important;
  font-size: 20px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* Textlinks: Tinte mit Marker-Rosé-Unterstreichung (wie seiten.css) */
.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :where(.gsr-editorial-body, .gsr-modern-article-hero__lead) :is(p, li) a:not([class*="button"]) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--sh-rose-mid) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :where(.gsr-editorial-body, .gsr-modern-article-hero__lead) :is(p, li) a:not([class*="button"]):hover {
  color: var(--sh-action) !important;
  text-decoration-color: var(--sh-action) !important;
}

/* ---------- Kästen: Rosé-Feld mit Tintenrand ---------- */

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :where(.gsr-wm-package-note, .gsr-feriengruesse-affiliate) {
  background: var(--sh-rose) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: none !important;
}

/* Kleine Notiz in der Karte: leiser, Haarlinie statt Tinte */
.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-feriengruesse-gift-note {
  background: var(--sh-rose) !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* ---------- Knöpfe: Aktionsrosé, Tintenrand, harter Versatz beim Hover ---------- */

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :where(.gsr-wm-article-button, .gsr-wm-material-button, .gsr-teacher-gift-download-button, .gsr-modern-rose-button) {
  background: var(--sh-action) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--sh-text) !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  min-height: 46px;
  text-decoration: none !important;
  text-transform: none !important;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), background-color .16s linear;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :where(.gsr-wm-article-button, .gsr-wm-material-button, .gsr-teacher-gift-download-button, .gsr-modern-rose-button):is(:hover, :focus-visible) {
  background: var(--sh-action-deep) !important;
  box-shadow: 3px 3px 0 var(--sh-ink) !important;
  transform: translate(-2px, -2px);
}

/* ---------- Materialkarten: flach weiß, Haarlinie, 8-px-Ecken; Hover mit Tintenversatz (wie Hubs) ---------- */

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :where(.gsr-wm-material-card, .gsr-feriengruesse-card) {
  background: var(--sh-card) !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: transform .18s var(--sh-ease), box-shadow .18s var(--sh-ease), border-color .18s linear;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :where(.gsr-wm-material-card, .gsr-feriengruesse-card):is(:hover, :focus-within) {
  border-color: var(--sh-ink) !important;
  box-shadow: 4px 4px 0 var(--sh-ink) !important;
  transform: translate(-3px, -3px);
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-wm-material-cover {
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* ---------- Reaktion und Seitenleiste: Heftpapier mit Tintenrand ---------- */

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :where(.gsr-modern-article-reaction, .gsr-wm-article-sidebar) {
  background: var(--sh-paper) !important;
  border: var(--sh-stroke) solid var(--sh-ink) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: none !important;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-wm-article-sidebar > h2 {
  color: var(--sh-ink) !important;
  font-family: var(--sh-display) !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-wm-article-sidebar-link {
  background: var(--sh-card) !important;
  border: 1px solid var(--sh-hair) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--sh-ink) !important;
  transition: transform .18s var(--sh-ease), box-shadow .18s var(--sh-ease), border-color .18s linear;
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-wm-article-sidebar-link:is(:hover, :focus-visible) {
  border-color: var(--sh-ink) !important;
  box-shadow: 4px 4px 0 var(--sh-ink) !important;
  transform: translate(-3px, -3px);
}

.gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target hr.wp-block-separator {
  border-color: var(--sh-hair) !important;
  color: var(--sh-hair) !important;
}

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

@media (max-width: 959px) {
  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero {
    padding: 40px 22px 34px var(--sh-inset) !important;
    row-gap: 28px !important;
  }

  /* Handy: kleinere Ringe, Randlinie rechts neben die Lochung */
  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-editorial-body {
    --sh-margin: 44px;
    padding: 32px 14px 36px 52px !important;
  }

  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-editorial-body::before {
    background-size: 32px 24px;
    left: -16px;
    width: 32px;
  }

  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-wm-material-grid {
    padding: 12px !important;
  }

  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero__copy {
    display: flex !important;
    flex-direction: column;
  }

  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero h1 {
    font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.4rem) !important;
  }

  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero__lead {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  /* Randnotiz ans Ende der Heftseite wie auf den übrigen Seiten */
  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target .gsr-modern-article-hero .gsr-modern-eyebrow {
    align-self: flex-end;
    font-size: 22px !important;
    margin: 24px 2px 0 0 !important;
    order: 9;
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gsr-sh-beitrag #wp--skip-link--target#wp--skip-link--target :is(.gsr-wm-material-card, .gsr-feriengruesse-card, .gsr-wm-article-sidebar-link, .gsr-wm-article-button, .gsr-wm-material-button, .gsr-teacher-gift-download-button, .gsr-modern-rose-button) {
    transition: none;
  }
}