/* ==========================================================================
   Shopify-SEO-Check (Run 11), asynchron geladen, nur auf /shopify-seo-check.
   Nur Tokens aus tokens.css. Status nie nur über Farbe: jedes Signal hat Icon + Text.
     gut        → --positive, Kreis mit Haken
     verbessern → --text, Dreieck mit Ausrufezeichen (es gibt kein Warn-Token; neutral statt erfundener Farbe)
     kritisch   → --signal-ink, Achteck mit Kreuz
     info       → --text-2, Kreis mit i
   Ohne dieses CSS bleibt alles benutzbar (Formular aus components.css: .field, .input, .btn, .notice).
   ========================================================================== */

.sc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.sc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sc [hidden]:not(.sc-s):not(.sc-k) { display: none; }

/* ---------- Formular ---------- */
.sc-form { display: grid; gap: var(--space-5); padding: var(--space-6) var(--space-5); background: var(--bg); border: var(--border); border-radius: var(--r-3); }
@media (min-width: 48rem) { .sc-form { padding: var(--space-7) var(--space-7) var(--space-6); } }

.sc-modes { display: inline-flex; justify-self: start; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--r-2); min-width: 0; }
.sc-mode { position: relative; display: flex; }
.sc-mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sc-mode span { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--r-1); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.sc-mode:hover span { color: var(--text); }
.sc-mode input:checked + span { background: var(--raised); color: var(--text); box-shadow: inset 0 -2px 0 var(--signal); }
.sc-mode input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Beschriftung je Modus ohne JavaScript umschalten */
.sc-form:has(input[value="kollektion"]:checked) .sc-s { display: none; }
.sc-form:has(input[value="kollektion"]:checked) .sc-k { display: inline; }
.sc-form:has(input[value="shop"]:checked) .sc-k { display: none; }
.sc-form:has(input[value="shop"]:checked) .sc-s { display: inline; }

.sc-inputrow { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sc-input { flex: 1 1 18rem; min-height: 56px; font-size: var(--fs-md); }
.sc-submit { flex: 0 0 auto; }
@media (max-width: 30rem) { .sc-submit { width: 100%; } }
.sc-privacy { max-width: 70ch; }

/* ---------- Fortschritt ---------- */
.sc-progress { padding: var(--space-5); background: var(--bg); border: var(--border); border-radius: var(--r-3); }
.sc-progress__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--space-4); }
.sc-progress__time { font-weight: 400; align-self: center; }
.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.sc-step { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 2.25rem; border-top: var(--border); padding-top: var(--space-2); }
.sc-step:first-child { border-top: 0; padding-top: 0; }
.sc-step__dot { width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--text-3); }
.sc-step__text { color: var(--text-2); }
.sc-step.is-laeuft .sc-step__text, .sc-step.is-fertig .sc-step__text { color: var(--text); }
.sc-step.is-laeuft .sc-step__dot { border-color: var(--signal); border-right-color: transparent; animation: sc-spin .9s linear infinite; }
.sc-step.is-fertig .sc-step__dot { border-color: var(--positive); background: var(--positive); }
.sc-step.is-fehler .sc-step__dot { border-color: var(--signal); background: var(--signal); }
.sc-step.is-fehler .sc-step__state { color: var(--signal-ink); }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-step.is-laeuft .sc-step__dot { animation: none; border-right-color: var(--signal); } }

/* ---------- Status-Badge ---------- */
.sc-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; }
.sc-badge svg, .sc-note .sc-ico { width: 1.375rem; height: 1.375rem; flex: none; }
.sc-badge.sc-st--gut { color: var(--positive); }
.sc-badge.sc-st--verbessern { color: var(--text); }
.sc-badge.sc-st--kritisch { color: var(--signal-ink); }
.sc-badge.sc-st--info { color: var(--text-2); }

/* ---------- Ergebnis ---------- */
.sc-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); outline: none; scroll-margin-top: var(--space-8); }
.sc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: var(--border); }
.sc-head__copy { min-width: 0; flex: 1 1 24rem; }
.sc-head__title { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.sc-head__meta { margin-top: var(--space-2); overflow-wrap: anywhere; }
.sc-note { margin: 0; }
.sc-note .notice__icon { color: var(--text-2); }
.sc-sub { font-size: var(--fs-lg); margin-top: var(--space-4); }

/* Die 3 wichtigsten Baustellen: Rangfolge, deshalb nummeriert */
.sc-top { list-style: none; margin: 0; padding: 0; counter-reset: sc; }  /* Raster: .grid.grid--3 (volle letzte Reihe) */
.sc-top__item { counter-increment: sc; position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 2.25rem); background: var(--bg); border: var(--border); border-left: 3px solid var(--line-strong); border-radius: var(--r-3); }
.sc-top__item::before { content: counter(sc); position: absolute; left: var(--space-5); top: var(--space-5); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-lg); line-height: 1.2; color: var(--text-2); }
.sc-top__item.sc-st--kritisch { border-left-color: var(--signal); }
.sc-top__item.sc-st--gut { border-left-color: var(--positive); }
.sc-top__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em; }
.sc-text { color: var(--text-2); max-width: 70ch; }
.sc-fix { font-size: var(--fs-sm); max-width: 70ch; padding-top: var(--space-2); }
.sc-fix strong { font-family: var(--font-display); font-weight: 700; }

/* Bereiche im Überblick (Raster aus base.css: .grid--3 mit voller letzter Reihe) */
.sc-areas { list-style: none; margin: 0; padding: 0; }
.sc-area { display: flex; }
.sc-area__link { flex: 1; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--bg); border: var(--border); border-top: 3px solid var(--line-strong); border-radius: var(--r-3); color: var(--text); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out); }
.sc-area__link:hover { border-color: var(--line-strong); text-decoration: none; }
.sc-area.sc-st--kritisch .sc-area__link { border-top-color: var(--signal); }
.sc-area.sc-st--gut .sc-area__link { border-top-color: var(--positive); }
.sc-area__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em; }

/* Bereiche im Detail */
.sc-group { scroll-margin-top: var(--space-8); }
.sc-group__title { font-size: var(--fs-lg); margin: var(--space-4) 0 var(--space-2); }
.sc-list { list-style: none; margin: 0; padding: 0; }
.sc-row { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: var(--border); }
@media (min-width: 48rem) { .sc-row { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-5); } .sc-row > .sc-badge { align-self: start; padding-top: .1em; } }
.sc-row__body { display: grid; gap: var(--space-1); min-width: 0; }
.sc-row__title { font-family: var(--font-display); font-weight: 700; }
.sc-quote { justify-self: start; max-width: 100%; margin-top: var(--space-1); padding: var(--space-1) var(--space-3); background: var(--raised); border-radius: var(--r-1); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text); overflow-wrap: anywhere; }
.sc-mini { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }

/* Abschluss: CTA und Einordnung */
.sc-cta { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--bg); border: var(--border); border-left: 3px solid var(--signal); border-radius: var(--r-3); }
@media (min-width: 48rem) { .sc-cta { padding: var(--space-6) var(--space-7); } }
.sc-cta__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: var(--track-head); line-height: var(--lh-head); text-wrap: balance; }
.sc-cta__text { color: var(--text-2); max-width: 60ch; }
.sc-cta .actions { margin-top: var(--space-2); }
.sc-disclaimer { max-width: 80ch; }

/* ---------- Druckansicht / „Als PDF speichern“: nur das Ergebnis, schwarz auf weiß ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  .site-header, .site-footer, .mcta, .skip-link, .sc-form, .sc-progress, .sc-print, .sc-error { display: none !important; }
  main:has(.sc-result:not([hidden])) > :not(:has(.sc-result)) { display: none !important; }
  main:has(.sc-result:not([hidden])) .section:has(.sc-result) .section__head { display: none !important; }
  html, body, main, .section, .sc, .sc-result, .sc-top__item, .sc-area__link, .sc-quote, .notice { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .section { padding: 0 !important; }
  .sc-result *, .sc-badge, .sc-text, .sc-mini, .source { color: #000 !important; }
  .sc-top__item, .sc-area__link, .sc-row, .notice { border-color: #999 !important; break-inside: avoid; }
  .sc-top__item.sc-st--kritisch, .sc-area.sc-st--kritisch .sc-area__link { border-left-color: #000 !important; border-top-color: #000 !important; }
  .sc-areas { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sc-areas > * { grid-column: auto !important; }
  .sc-quote { border: 1px solid #999; }
  .sc-result a[href^="/"]::after, .sc-result a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--font-mono); font-size: .8em; overflow-wrap: anywhere; }
  .sc-area__link::after { content: none !important; }
  .sc-cta, .sc-cta * { background: #fff !important; color: #000 !important; }
  .sc-cta { border: 1px solid #999 !important; }
  .sc-cta .btn { white-space: normal; height: auto; min-height: 0; padding: var(--space-2) var(--space-3); border: 1px solid #000; display: block; text-align: left; }
  .sc-group { break-inside: auto; }
  .sc-group__title { break-after: avoid; }
}