/* shop-brand.css – Re-Theming der drei öffentlichen Bestell-Seiten
   (shop.php, shop-bestellen.php, shop-bestaetigung.php) auf den Look von
   nextplus.de (Erik, 22.08.2026: "Design an nextplus.de anpassen"), damit der
   Sprung von pflege.php (Klick "Jetzt kaufen") zur Bestellseite nicht wie ein
   Wechsel in ein anderes, internes Tool wirkt.

   WICHTIG: Wird NACH inc/style.css geladen und überschreibt dort NUR die
   CSS-Variablen + ein paar gezielte Komponenten (Buttons, Kopf/Fuß) – die
   Struktur (.card/.fg/.f/.iv-grid/...) bleibt unverändert, damit das
   bestehende PHP/JS der drei Seiten unangetastet funktioniert. Nicht auf den
   internen, eingeloggten Verwaltung-Seiten einbinden – nur für die drei
   öffentlichen Shop-Seiten gedacht. Farben/Schrift 1:1 aus
   Webseiten/nextplus/styles.css übernommen (--np-* Variablen dort). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#ffffff;--sf:#ffffff;--sf2:#f4f4f5;--bd:#d4d4d8;
  --tx:#18181b;--tx2:#71717a;--tx3:#a1a1aa;
  --gn:#16a34a;--gn2:#15803d;--gnl:rgba(34,197,94,.12);
  --r:10px;
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.ct{font-family:'Inter',sans-serif}

/* Primärer Button: gleiche Optik wie .btn-primary auf nextplus.de (helles Grün, dunkler Text) */
.bp{background:#22c55e;color:#0a0a0a;border-color:#22c55e;font-weight:700}
.bp:hover{background:#4ade80;border-color:#4ade80}

/* ===== Marken-Kopf-/Fußzeile ===== */
.shop-brand-header{background:#0a0a0a;padding:16px 20px}
.shop-brand-header .inner{max-width:980px;margin:0 auto;display:flex;align-items:center}
.shop-brand-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.shop-brand-logo .mark{display:flex;align-items:center;gap:4px}
.shop-brand-logo .check{color:#22c55e;font-weight:900;font-size:20px;line-height:1}
.shop-brand-logo .text{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff}
.shop-brand-logo .plus{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;background:#22c55e;color:#0a0a0a;font-weight:900;font-size:16px;border-radius:4px}
.shop-brand-logo .suffix{color:#22c55e;font-weight:600;font-size:14px;margin-left:1px}

.shop-brand-sep{width:1px;height:34px;background:rgba(255,255,255,.15);margin:0 14px}
.shop-brand-insolight{display:inline-flex;align-items:center;background:#fff;border-radius:8px;padding:5px 10px;line-height:0}
.shop-brand-insolight img{display:block;height:42px;width:auto}

.shop-brand-footer{background:#0a0a0a;color:rgba(255,255,255,.6);padding:22px 20px;margin-top:40px;font-size:12.5px;text-align:center}
.shop-brand-footer a{color:rgba(255,255,255,.75);text-decoration:none}
.shop-brand-footer a:hover{color:#4ade80}
.shop-brand-footer .links{margin-top:8px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}