/*
 * Hub /shopify/ (Briefing SEO 19.10., Neugestaltung 19.10. nach Marcus:
 * „mehr Gestaltung“). Baut auf dem Landing-Kit auf (--pl-*); Shopify-Grün
 * nur als zweiter Akzent neben unserem Orange, keine Shopify-Logos.
 */
:root {
  --sh-green: #008060;
  --sh-green-text: #006B4F;
  --sh-green-soft: #E1F2EA;
  --sh-ink: #10191D;
  --sh-ink-2: #18252A;
  --sh-ink-line: #2A3A41;
  --sh-ink-text: #E9EEF0;
  --sh-ink-muted: #A5B3B8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sh-green-text: #5CC79B;
    --sh-green-soft: rgba(0, 128, 96, .2);
    --sh-ink: #0E171B;
    --sh-ink-2: #142026;
    --sh-ink-line: #26353C;
  }
}

/* ---------- Hero ---------- */
.sh-hero { position: relative; isolation: isolate; }
.sh-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 92% 10%, color-mix(in srgb, var(--sh-green) 16%, transparent), transparent 70%),
    radial-gradient(50% 60% at 70% 95%, color-mix(in srgb, var(--pl-accent) 14%, transparent), transparent 70%);
}
.sh-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--sh-green-soft); color: var(--sh-green-text); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sh-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--sh-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sh-green) 25%, transparent); }
.sh-lead { margin: 0; max-width: 36em; font-size: 18px; line-height: 1.6; color: var(--pl-muted); }
.sh-lead b { color: var(--pl-text); }

/* Bühne: Shopify-Bestellung + TaskMonkey-Chat (Beispieldaten) */
.sh-stage { position: relative; border-radius: 20px; background: var(--pl-surface); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow); overflow: hidden; }
.sh-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--pl-sunken); border-bottom: 1px solid var(--pl-border); font-size: 13px; color: var(--pl-muted); }
.sh-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--pl-border); }
.sh-bar span { margin-left: 8px; }
.sh-bar em { margin-left: auto; font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--pl-border); }
.sh-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sh-order { padding: 18px; border-right: 1px solid var(--pl-border); display: grid; align-content: start; gap: 12px; font-size: 14px; }
.sh-order-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.sh-order-h b { width: 22px; height: 22px; border-radius: 6px; background: var(--sh-green); display: grid; place-items: center; color: #fff; font-size: 12px; }
.sh-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-tag { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--pl-sunken); color: var(--pl-muted); }
.sh-tag-ok { background: var(--sh-green-soft); color: var(--sh-green-text); }
.sh-tag-new { background: var(--pl-accent-soft); color: var(--pl-accent-text); }
.sh-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sh-item i { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #7DBF8E, #2F7D53); }
.sh-item small { display: block; color: var(--pl-muted); }
.sh-track { padding: 10px 12px; border-radius: 10px; background: var(--pl-sunken); font-size: 13px; }
.sh-track b { display: block; font-size: 14px; }
.sh-sum { display: grid; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--pl-border); }
.sh-sum p { display: flex; justify-content: space-between; margin: 0; }
.sh-sum .sh-refund { color: var(--sh-green-text); font-weight: 700; }

.sh-chat { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 380px; background: color-mix(in srgb, var(--pl-sunken) 45%, var(--pl-surface)); }
.sh-msg { max-width: 92%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.sh-msg small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.sh-in { align-self: flex-start; background: var(--pl-surface); border: 1px solid var(--pl-border); border-bottom-left-radius: 4px; }
.sh-out { align-self: flex-end; background: var(--pl-frame); color: #fff; border-bottom-right-radius: 4px; }
.sh-bot { align-self: flex-start; background: var(--pl-accent-soft); border-bottom-left-radius: 4px; }
.sh-auto { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--sh-green-text); }
.sh-ok-card { align-self: stretch; padding: 14px; border-radius: 14px; background: var(--pl-surface); border: 2px solid var(--pl-accent); box-shadow: 0 16px 30px -20px rgba(237, 106, 61, .9); font-size: 14px; }
.sh-ok-card .sh-wait { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-accent-text); }
.sh-ok-card .sh-wait i { width: 9px; height: 9px; border-radius: 50%; background: var(--pl-accent); animation: sh-pulse 1.4s ease-in-out infinite; }
.sh-ok-card p { margin: 6px 0 10px; font-weight: 700; }
.sh-acts { display: flex; gap: 8px; }
.sh-acts span { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.sh-acts .sh-go { background: var(--sh-green); color: #fff; }
.sh-acts .sh-edit { box-shadow: inset 0 0 0 1.5px var(--pl-border); }
.sh-done { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--sh-green-soft); color: var(--sh-green-text); font-size: 13px; font-weight: 700; }
.sh-stage-note { margin: 10px 4px 0; font-size: 13px; color: var(--pl-muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sh-replay { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--pl-accent-text); cursor: pointer; }
.sh-replay[hidden] { display: none; }
.sh-ok-card.is-done { border-color: var(--sh-green); box-shadow: none; }
.sh-ok-card.is-done .sh-wait { color: var(--sh-green-text); }
.sh-ok-card.is-done .sh-wait i { background: var(--sh-green); animation: none; }

/* Ablauf: ohne JS bzw. bei reduzierter Bewegung steht alles sofort da */
.sh-anim [data-step] { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.sh-anim [data-step].is-on { opacity: 1; transform: none; }
.sh-anim .sh-sum [data-step] { transform: none; }
.sh-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--pl-accent-soft); }
.sh-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--pl-accent-text); animation: sh-dot 1s infinite; }
.sh-typing i:nth-child(2) { animation-delay: .15s; }
.sh-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sh-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes sh-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pl-accent) 25%, transparent); } }

/* ---------- Dunkle Kontrast-Sektion: System-Map ---------- */
.sh-dark { background: var(--sh-ink); color: var(--sh-ink-text); }
.sh-dark .pl-eyebrow { color: #F59A78; }
.sh-dark .pl-lead { color: var(--sh-ink-muted); }
@media (prefers-color-scheme: dark) { .sh-dark { border-block: 1px solid var(--sh-ink-line); } }
.sh-map-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sh-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.sh-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; color: var(--sh-ink-muted); }
.sh-points b { color: var(--sh-ink-text); }
.sh-points svg { color: #5CC79B; margin-top: 2px; }
.sh-map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 34px 18px; padding: 8px; }
.sh-map svg.sh-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.sh-lines line { stroke: var(--sh-ink-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sh-lines line.sh-flow { stroke: #F59A78; stroke-dasharray: 4 10; animation: sh-dash 1.6s linear infinite; opacity: .9; }
.sh-lines line.sh-flow-g { stroke: #5CC79B; }
@keyframes sh-dash { to { stroke-dashoffset: -28; } }
.sh-node { position: relative; z-index: 1; display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--sh-ink-2); border: 1px solid var(--sh-ink-line); font-size: 13px; color: var(--sh-ink-muted); }
.sh-node b { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--sh-ink-text); }
.sh-node b::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--dot, #5D7680); }
.sh-node-shop { --dot: #5CC79B; border-color: color-mix(in srgb, var(--sh-green) 70%, var(--sh-ink-line)); }
.sh-core { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; gap: 6px; padding: 20px 12px; border-radius: 20px; background: #FFFFFF; color: #19272C; border: 2px solid var(--pl-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--pl-accent) 22%, transparent), 0 24px 50px -18px rgba(237, 106, 61, .8); }
.sh-core img { width: 44px; height: 44px; }
.sh-core b { font-size: 17px; }
.sh-core span { font-size: 12px; font-weight: 600; color: #A8411B; }
.sh-m-tl { grid-area: 1 / 1; } .sh-m-tc { grid-area: 1 / 2; } .sh-m-tr { grid-area: 1 / 3; }
.sh-m-ml { grid-area: 2 / 1; } .sh-m-c { grid-area: 2 / 2; } .sh-m-mr { grid-area: 2 / 3; }
.sh-m-bl { grid-area: 3 / 1; } .sh-m-bc { grid-area: 3 / 2; } .sh-m-br { grid-area: 3 / 3; }

/* ---------- Was sich automatisieren lässt ---------- */
.sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-grid-gap); margin: 30px 0 0; padding: 0; list-style: none; }
.sh-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; background: var(--pl-surface); border: 1px solid var(--pl-border); transition: transform .2s, box-shadow .2s, border-color .2s; }
.sh-card:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow); border-color: color-mix(in srgb, var(--ic, var(--pl-accent)) 55%, var(--pl-border)); }
.sh-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--ic) 15%, transparent); color: var(--ic); }
.sh-card:nth-child(odd) { --ic: var(--sh-green); }
.sh-card:nth-child(even) { --ic: var(--pl-accent); }
@media (prefers-color-scheme: dark) { .sh-card:nth-child(odd) .sh-ic { color: #5CC79B; } .sh-card:nth-child(even) .sh-ic { color: #F59A78; } }
.sh-card h3 { margin: 4px 0 0; font-size: 19px; line-height: 1.3; }
.sh-card p { margin: 0; font-size: 15px; color: var(--pl-muted); }
.sh-quote { margin-top: auto !important; padding: 9px 12px; border-radius: 10px; background: var(--pl-sunken); color: var(--pl-text) !important; font-size: 14px !important; font-style: italic; }

/* ---------- Vergleich ---------- */
.sh-vs-wrap { margin-top: 30px; border-radius: 20px; background: var(--pl-surface); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow); overflow: hidden; }
.sh-vs { width: 100%; border-collapse: collapse; font-size: 15px; }
.sh-vs th, .sh-vs td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--pl-border); }
.sh-vs tr:last-child th, .sh-vs tr:last-child td { border-bottom: 0; }
.sh-vs thead th { font-size: 16px; padding-block: 18px; background: var(--pl-sunken); }
.sh-vs thead th small { display: block; font-size: 12px; font-weight: 600; color: var(--pl-muted); }
.sh-vs tbody th { text-align: left; font-weight: 600; }
.sh-vs .sh-us { background: color-mix(in srgb, var(--pl-accent) 9%, transparent); }
.sh-vs thead .sh-us { background: var(--pl-accent); color: #1A0F0A; }
.sh-vs thead .sh-us small { color: #3A1E12; }
.sh-y, .sh-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.sh-y { background: var(--sh-green-soft); color: var(--sh-green-text); }
.sh-n { background: var(--pl-sunken); color: var(--pl-muted); }
.sh-vs td small { display: block; margin-top: 4px; font-size: 12px; color: var(--pl-muted); }
.sh-vs-note { margin: 14px 0 0; font-size: 14px; color: var(--pl-muted); }

/* ---------- Kleine Shops: farbiges Band ---------- */
.sh-band { background: linear-gradient(135deg, var(--sh-green-soft), color-mix(in srgb, var(--pl-accent-soft) 80%, transparent)); }
.sh-niche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pl-grid-gap); margin: 30px 0 0; padding: 0; list-style: none; }
.sh-niche li { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 18px; background: var(--pl-surface); box-shadow: var(--pl-shadow); }
.sh-niche .sh-ic { --ic: var(--sh-green); }
@media (prefers-color-scheme: dark) { .sh-niche .sh-ic { color: #5CC79B; } }
.sh-niche b { font-size: 19px; }
.sh-niche span { font-size: 15px; color: var(--pl-muted); }

/* ---------- Ratgeber: Artikel mit Bild ---------- */
/* Flex statt Grid: 3 je Zeile, unvollständige letzte Zeile zentriert (5 = 3+2, 7 = 3+3+1),
   neue Artikel brauchen nur ein weiteres <li> (SEO, Takt dienstags) */
.sh-reads { --cols: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pl-grid-gap); margin: 30px 0 0; padding: 0; list-style: none; }
.sh-reads > .sh-read { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--pl-grid-gap)) / var(--cols)); min-width: 0; }
.sh-read a { display: flex; flex-direction: column; height: 100%; border-radius: 18px; overflow: hidden; background: var(--pl-surface); border: 1px solid var(--pl-border); color: var(--pl-text); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.sh-read a:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow); }
.sh-read img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--pl-sunken); }
.sh-read div { display: grid; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.sh-read small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-green-text); }
.sh-read b { font-size: 17px; line-height: 1.3; }
.sh-read span { margin-top: auto; padding-top: 4px; font-weight: 700; color: var(--pl-accent-text); }
.sh-soon { margin: 16px 0 0; font-size: 14px; color: var(--pl-muted); }

/* ---------- Abschluss-CTA ---------- */
.sh-final { text-align: center; }
.sh-final .pl-h2 { color: var(--sh-ink-text); max-width: 20em; margin-inline: auto; }
.sh-final .pl-lead { margin-inline: auto; }
.sh-final .pl-cta-row { justify-content: center; }
.sh-final .pl-btn-outline { color: var(--sh-ink-text); box-shadow: inset 0 0 0 2px var(--sh-ink-line); }

/* ---------- FAQ ---------- */
.sh-faq { max-width: 820px; margin-top: 18px; display: grid; gap: 10px; }
.sh-faq details { padding: 14px 18px; border-radius: 12px; background: var(--pl-surface); border: 1px solid var(--pl-border); }
.sh-faq details[open] { border-color: color-mix(in srgb, var(--pl-accent) 50%, var(--pl-border)); }
.sh-faq summary { cursor: pointer; font-weight: 700; }
.sh-faq p { margin: 10px 0 0; color: var(--pl-muted); }

/* ---------- Responsiv ---------- */
@media (max-width: 1080px) { .sh-reads { --cols: 2; } }
@media (max-width: 900px) {
  .sh-map-grid, .sh-grid, .sh-niche { grid-template-columns: minmax(0, 1fr); }
  .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sh-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-reads { --cols: 1; }
  .sh-split { grid-template-columns: minmax(0, 1fr); }
  .sh-order { border-right: 0; border-bottom: 1px solid var(--pl-border); padding: 14px 16px; gap: 10px; }
  .sh-order .sh-item { display: none; }
  .sh-chat { min-height: 0; }
  /* Map als Liste: Kern oben, Systeme zweispaltig darunter */
  .sh-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sh-map svg.sh-lines { display: none; }
  .sh-map > * { grid-area: auto !important; }
  .sh-core { grid-column: 1 / -1 !important; grid-template-columns: auto minmax(0, 1fr); text-align: left; justify-items: start; padding: 16px; }
  .sh-core img { grid-row: span 2; width: 38px; height: 38px; }
  .sh-vs { font-size: 14px; }
  .sh-vs th, .sh-vs td { padding: 12px 6px; }
  .sh-vs tbody th { padding-left: 12px; }
  .sh-vs td small { display: none; }
}
@media (max-width: 520px) { .pl-hero .tm-hf-cta { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .sh-lines line.sh-flow, .sh-ok-card .sh-wait i, .sh-typing i { animation: none; }
  .sh-card, .sh-read a { transition: none; }
  .sh-card:hover, .sh-read a:hover { transform: none; }
}
/* Freigabe-Karte: Endzustand (ohne JS sichtbar) vs. Wartezustand */
.sh-ok-card .sh-w-done, .sh-ok-card.is-done .sh-w-wait, .sh-ok-card.is-done .sh-acts { display: none; }
.sh-ok-card.is-done .sh-w-done { display: inline; }
.sh-stage, .sh-order-h, .sh-chat .sh-msg { margin: 0; }
.sh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }