/* =========================================================
   SECTION MONSTERS – ShopBriefing-Landingpage
   css/shopbriefing.css

   Nutzt die Variablen aus style.css (dunkler Grund, Grün/Lila
   als Akzente). Keine eigenen Hex-Werte fuer Flaechen und Text
   — sonst driftet die Seite vom Rest der Landingpage weg.
   ========================================================= */

.sb-body { background: var(--bg); color: var(--text); }
.sb-main { max-width: 1080px; margin: 0 auto; padding: 0 20px 96px; }

/* ── Kopf ─────────────────────────────────────────────── */
/* Der Header liegt fixed ueber dem Inhalt (top 12px, Hoehe 52px). Ein fester
   Wert wuerde ihn beim naechsten Header-Umbau wieder ueberdecken — deshalb
   dieselbe Variable, die auch subpage.css und audit.css benutzen. */
.sb-intro { padding: calc(var(--header-h) + 56px) 0 48px; max-width: 640px;
            margin: 0 auto; text-align: center; }
.sb-eyebrow {
    font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--green); font-weight: 700; margin: 0 0 14px;
}
.sb-title { font-size: clamp(34px, 6vw, 52px); line-height: 1.08; margin: 0 0 18px; text-wrap: balance; }
.sb-grad {
    background: linear-gradient(100deg, var(--green-bright), var(--purple-bright));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sb-lead {
    font-size: 17px; line-height: 1.65; color: var(--muted);
    margin: 0 auto 36px; max-width: 60ch;
}

/* ── Formular ─────────────────────────────────────────── */
.sb-form {
    background: var(--panel); border: 1px solid var(--faint);
    border-radius: 18px; padding: 28px; text-align: left;
}
.sb-feld { margin-bottom: 18px; }
.sb-feld label {
    display: block; font-size: 13px; font-weight: 600;
    margin-bottom: 7px; color: var(--text);
}
.sb-opt { font-weight: 400; color: var(--muted); }

.sb-input {
    width: 100%; padding: 13px 15px; border-radius: 11px;
    border: 1px solid var(--faint); background: var(--panel-2);
    color: var(--text);
    /* 16px, sonst zoomt iOS beim Hineintippen die ganze Seite */
    font-size: 16px; font-family: inherit;
}
.sb-input::placeholder { color: var(--faint); }
.sb-input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }

.sb-inputwrap { display: flex; align-items: stretch; }
.sb-prefix {
    display: flex; align-items: center; padding: 0 12px;
    background: var(--panel-2); border: 1px solid var(--faint); border-right: none;
    border-radius: 11px 0 0 11px; color: var(--muted); font-size: 14px; white-space: nowrap;
}
.sb-input-url { border-radius: 0 11px 11px 0; }

.sb-hilfe { font-size: 12px; line-height: 1.55; color: var(--muted); margin: 7px 0 0; }

/* ── Zustimmungen ─────────────────────────────────────── */
.sb-check {
    display: flex; gap: 11px; align-items: flex-start;
    font-size: 13px; line-height: 1.6; color: var(--muted);
    margin-bottom: 14px; cursor: pointer;
}
.sb-check input {
    margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0;
    accent-color: var(--green); cursor: pointer;
}
/* Die Anruf-Zustimmung sichtbar abgesetzt: Sie ist eine EIGENE Entscheidung,
   und das soll man sehen — nicht nur im Kleingedruckten stehen haben. */
.sb-check-extra {
    background: var(--panel-2); border: 1px solid var(--faint);
    border-radius: 11px; padding: 13px 15px; margin-top: 4px;
}
.sb-check-extra strong { color: var(--text); }

.sb-submit {
    width: 100%; margin-top: 8px; padding: 15px 24px; border: none; border-radius: 12px;
    background: linear-gradient(100deg, var(--green), var(--green-deep));
    color: #08110a; font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.sb-submit:hover:not(:disabled) { filter: brightness(1.08); }
.sb-submit:disabled { opacity: .6; cursor: progress; }

.sb-recht { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 14px 0 0; }
.sb-recht a { color: var(--green); }

/* ── Rueckmeldung ─────────────────────────────────────── */
.sb-antwort {
    margin-top: 20px; padding: 18px 20px; border-radius: 13px;
    font-size: 15px; line-height: 1.65; text-align: left;
}
.sb-ok     { background: rgba(139, 214, 38, .10); border: 1px solid rgba(139, 214, 38, .35); color: var(--text); }
.sb-fehler { background: rgba(248, 113, 113, .10); border: 1px solid rgba(248, 113, 113, .35); color: var(--text); }
.sb-info   { background: var(--panel-2); border: 1px solid var(--faint); color: var(--muted); }

/* ── Beitraege ────────────────────────────────────────── */
.sb-block { padding: 56px 0 0; }
.sb-h2 { font-size: clamp(23px, 3.4vw, 30px); margin: 0 0 26px; text-align: center; text-wrap: balance; }
.sb-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.sb-laedt { color: var(--muted); font-size: 14px; text-align: center; grid-column: 1 / -1; }

.sb-post {
    display: block; text-decoration: none; color: inherit;
    background: var(--panel); border: 1px solid var(--faint);
    border-radius: 15px; overflow: hidden;
    transition: transform .18s ease, border-color .18s ease;
}
.sb-post:hover { transform: translateY(-3px); border-color: var(--green); }
.sb-post img { width: 100%; height: 158px; object-fit: cover; display: block; }
.sb-post-text { padding: 16px 18px 20px; }
.sb-post-kat {
    display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--green); font-weight: 700; margin-bottom: 8px;
}
.sb-post h3 { font-size: 16px; line-height: 1.35; margin: 0 0 8px; text-wrap: balance; }
.sb-post p  { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }

.sb-mehr { text-align: center; margin: 26px 0 0; }
.sb-mehr a { color: var(--green); text-decoration: none; font-weight: 600; font-size: 15px; }
.sb-mehr a:hover { text-decoration: underline; }

/* ── Erwartungen ──────────────────────────────────────── */
.sb-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.sb-spalten > div {
    background: var(--panel); border: 1px solid var(--faint);
    border-radius: 15px; padding: 22px 24px;
}
.sb-spalten h3 { font-size: 15px; margin: 0 0 14px; }
.sb-spalten ul { margin: 0; padding-left: 20px; }
.sb-spalten li { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 7px; }

@media (max-width: 600px) {
    .sb-intro { padding: calc(var(--header-h) + 34px) 0 36px; }
    .sb-form  { padding: 22px 18px; }
}

/* ══ Shop-Prüfung: Fortschritt und Shopify-Nachweis ══════════════
   Gehört bewusst hierher und nicht in vip.css: /vip UND /shopbriefing
   laden diese Datei, und die Prüfung ist auf beiden Seiten dieselbe.  */

.sb-antwort.sp-aktiv { background: var(--panel-2); border: 1px solid var(--faint); }

.sp-box { padding: 2px 0; }
.sp-kopf { display: flex; gap: 13px; align-items: center; margin-bottom: 14px; }
.sp-logo { flex-shrink: 0; animation: sp-atmen 1.8s ease-in-out infinite; }
.sp-titel { font-size: 15px; font-weight: 700; color: var(--text); }
.sp-lauftext { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Der Balken: Breite kommt aus dem Skript, die Transition glättet die
   Sprünge zwischen den 90-ms-Takten zu einer durchgehenden Bewegung. */
.sp-balken {
    height: 6px; border-radius: 99px; overflow: hidden;
    background: rgba(242, 244, 239, .09);
}
.sp-balken-fuell {
    height: 100%; width: 0%; border-radius: 99px;
    background: linear-gradient(90deg, var(--green-deep), var(--green), var(--green-bright));
    background-size: 200% 100%;
    transition: width .28s cubic-bezier(.4, 0, .2, 1);
    animation: sp-fliessen 2.2s linear infinite;
}

.sp-schritte { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 8px; }
.sp-schritt {
    display: flex; gap: 10px; align-items: center;
    font-size: 12.5px; color: rgba(242, 244, 239, .34);
    transition: color .3s ease;
}
.sp-punkt {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: rgba(242, 244, 239, .22); transition: background .3s ease, box-shadow .3s ease;
}
.sp-schritt.sp-laeuft { color: var(--text); }
.sp-schritt.sp-laeuft .sp-punkt {
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(139, 214, 38, .16);
    animation: sp-puls 1.3s ease-in-out infinite;
}
.sp-schritt.sp-fertig { color: var(--muted); }
.sp-schritt.sp-fertig .sp-punkt { background: var(--green-deep); box-shadow: none; animation: none; }

/* ── Ergebnis: Shopify bestätigt ── */
.sp-erkannt {
    display: flex; gap: 14px; align-items: flex-start;
    background: rgba(139, 214, 38, .07); border: 1px solid rgba(139, 214, 38, .28);
    border-radius: 12px; padding: 15px 17px; margin: 0 0 18px;
    animation: sp-auftauchen .45s cubic-bezier(.2, .7, .3, 1) both;
}
.sp-erkannt-logo { flex-shrink: 0; margin-top: 1px; }
.sp-erkannt-titel {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 7px;
}
.sp-haken {
    width: 17px; height: 17px; border-radius: 50%; background: var(--green);
    position: relative; flex-shrink: 0;
    animation: sp-haken-pop .4s cubic-bezier(.2, 1.4, .4, 1) .12s both;
}
.sp-haken::after {
    content: ""; position: absolute; left: 5px; top: 3px;
    width: 4px; height: 8px; border: solid #08110a;
    border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.sp-belege { margin: 0; padding: 0 0 0 16px; }
.sp-belege li { font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.sp-belege-leer { font-size: 12.5px; color: var(--muted); }

@keyframes sp-atmen   { 0%,100% { opacity: .55; transform: scale(.94); }
                        50%     { opacity: 1;   transform: scale(1); } }
@keyframes sp-puls    { 0%,100% { box-shadow: 0 0 0 4px rgba(139,214,38,.16); }
                        50%     { box-shadow: 0 0 0 7px rgba(139,214,38,.05); } }
@keyframes sp-fliessen{ from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes sp-auftauchen { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes sp-haken-pop  { from { transform: scale(0); } to { transform: scale(1); } }

/* Bewegung ist hier Beiwerk, nicht Information: Der Text sagt dasselbe.
   Alles abschalten, nur die Zustandsfarben bleiben. */
@media (prefers-reduced-motion: reduce) {
    .sp-logo, .sp-balken-fuell, .sp-schritt.sp-laeuft .sp-punkt,
    .sp-erkannt, .sp-haken { animation: none !important; }
    .sp-balken-fuell { transition: none; }
}

/* ══ Vorteile ═════════════════════════════════════════════════════
   Steht vor dem Formular: Wer erst das Eingabefeld sieht und die
   Begründung darunter, füllt es meistens nicht aus. Zweispaltig ab
   620px, damit die vier Punkte in einen Blick passen statt zu einer
   Liste zu werden, die man überscrollt. */
.sb-vorteile {
    list-style: none; margin: 26px 0 34px; padding: 0;
    display: grid; gap: 12px; text-align: left;
}
@media (min-width: 620px) { .sb-vorteile { grid-template-columns: 1fr 1fr; } }

.sb-vorteile li {
    background: var(--panel-2); border: 1px solid var(--faint);
    border-radius: 12px; padding: 15px 17px 16px;
    font-size: 13px; line-height: 1.6; color: var(--muted);
    position: relative; padding-left: 50px;
}
.sb-v-icon {
    position: absolute; left: 16px; top: 15px;
    font-size: 19px; line-height: 1.2;
}
.sb-vorteile strong {
    display: block; font-size: 14.5px; color: var(--text);
    margin-bottom: 4px; font-weight: 700;
}