/* =====================================================================
   CartSoft Theme „Nordlicht“ – hell, luftig, modern
   Ergänzt das Basis-Stylesheet (wird danach geladen).
   Farben: Stahlblau #2b6cb0, Tiefblau #1c4370, Text #475569, Flächen #f8fafc
   Schrift: Inter (lokal, SIL OFL 1.1)
   ===================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff) format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff) format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff) format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/inter-700.woff) format("woff")}

:root{
  --primary:#2b6cb0;
  --primary-hover:#24599a;
  --primary-ink:#24599a;
  --primary-soft:#eef4fb;
  --primary-soft-2:#f5f9fd;
  --on-primary:#fff;
  --primary-deep:#1c4370;
  --primary-line:#c3d8ee;
  --primary-line-2:#dce8f5;
  --primary-glow:rgba(43,108,176,.28);
  --primary-ring:rgba(43,108,176,.2);
  --primary-tint:rgba(43,108,176,.1);
  --cart-btn:#2b6cb0;
  --cart-btn-hover:#24599a;
  --dark:#0f172a;
  --black:#0b1220;
  --text:#475569;
  --text-strong:#1e293b;
  --muted:#64748b;
  --line:#e2e8f0;
  --line-2:#eef2f7;
  --bg-alt:#f8fafc;
  --info-soft:#eef4fb;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 6px 18px rgba(15,23,42,.07);
  --shadow-lg:0 20px 44px rgba(15,23,42,.10);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --header-h:86px;
}
body{font-size:16px;line-height:1.65}
h1,h2,h3,h4{letter-spacing:-.025em;font-weight:700}
::selection{background:var(--primary);color:#fff}

/* Buttons: Pillenform */
.btn{border-radius:999px;font-weight:600}
.btn-primary{box-shadow:0 6px 16px -6px var(--primary-glow)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--dark)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary-ink);background:#fff}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=date],select,textarea{border-radius:12px;border-color:#cbd5e1}

/* Topbar */
.nl-topbar{background:var(--primary-soft);color:var(--primary-deep);border-bottom:0;box-shadow:inset 0 -1px 0 var(--primary-line)}
.nl-topbar .topbar-text{color:var(--primary-deep)}
.nl-topbar .topbar-text .icon,.nl-topbar .topbar-links .icon{color:var(--primary)}
.nl-topbar .topbar-links a{color:var(--primary-deep)}
.nl-topbar .topbar-links a:hover{color:var(--primary)}

/* Header */
.nl-header{box-shadow:none;border-bottom:1px solid var(--line)}
.nl-header .header-row{min-height:var(--header-h);padding-top:16px;padding-bottom:16px;gap:28px}
.nl-header.is-compact .header-row{min-height:70px;padding-top:10px;padding-bottom:10px}
.nl-header .logo img{max-height:52px;max-width:260px}
.nl-header.is-compact .logo img{max-height:44px}
.nl-header .logo-text{font-weight:800;color:var(--dark)}
.nl-header .search-form{max-width:620px;margin:0 auto}
.nl-header .search-form input{background:#fff;border:1.5px solid var(--line);min-height:50px}
.nl-header .search-form input:focus{border-color:var(--primary)}
.nl-header .search-btn{border-radius:999px;width:42px;height:42px}
.nl-header .header-actions{margin-left:0}
.nl-header .icon-btn:hover{background:var(--primary-soft);color:var(--primary-ink)}
.cart-count{box-shadow:0 0 0 2px #fff}

/* Hauptmenü: hell, Pillen-Hover */
.nl-header .main-nav{background:var(--primary);border-top:0}
.nl-header .menu{padding:0;flex-wrap:wrap;--nav-gap:28px}
.nl-header .menu-item>a{height:var(--bar-h);color:var(--on-primary);font-weight:600}
.nl-header .menu-item:hover>a,.nl-header .menu-item:focus-within>a,.nl-header .menu-item.is-active>a{color:var(--on-primary)}
.nl-header .menu-item>a .icon{color:currentColor}
.nl-header .menu-blog .icon{color:currentColor}
.mega{border-top:1px solid var(--line);border-radius:0 0 20px 20px}
.mega-cat:hover{background:var(--primary-soft-2)}
.mega-visual{background:var(--bg-alt);border-color:var(--line-2);border-radius:12px}
.mega-sub a{background:#fff;border:1px solid var(--line)}
.mega-sub a:hover{background:var(--primary);border-color:var(--primary);color:#fff}

/* Hero */
.nl-hero{background:radial-gradient(900px 420px at 85% 0%,#dce8f5 0%,transparent 60%),radial-gradient(700px 380px at 0% 100%,#eef3f9 0%,transparent 55%),#fff;border-bottom:1px solid var(--line-2)}
.nl-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(40px,6vw,88px)}
.nl-pill{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--primary-line);color:var(--primary-ink);font-size:.82rem;font-weight:600;box-shadow:var(--shadow-sm)}
.nl-hero h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 .45em;color:var(--dark)}
.nl-hero-sub{font-size:clamp(1.02rem,.96rem + .3vw,1.2rem);color:var(--text);max-width:560px;margin:0 0 1.8rem}
.nl-hero-checks{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:26px 0 0;padding:0;font-size:.9rem;color:var(--text-strong);font-weight:500}
.nl-hero-checks li{display:flex;align-items:center;gap:7px}
.nl-hero-checks .icon{color:#fff;background:var(--primary);border-radius:50%;padding:2px;width:18px;height:18px}
.nl-hero-photo{border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:5/4}
.nl-hero-photo img{width:100%;height:100%;object-fit:cover}
.nl-hero-visual .hero-photo{border-radius:28px;box-shadow:var(--shadow-lg);aspect-ratio:5/4;max-width:none}
.nl-collage{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nl-collage-item{position:relative;display:block;border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow);aspect-ratio:1/1;border:1px solid var(--line-2)}
.nl-collage-item:nth-child(2){transform:translateY(28px)}
.nl-collage-item:nth-child(4){transform:translateY(28px)}
.nl-collage-1{grid-template-columns:1fr;max-width:420px;margin-left:auto}
.nl-collage-1 .nl-collage-item,.nl-collage-3 .nl-collage-item:nth-child(3){transform:none}
.nl-collage-item img,.nl-collage-item .rf-pic img{width:100%;height:100%;object-fit:cover;display:block}
.nl-price-tag{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:999px;padding:6px 14px;box-shadow:var(--shadow);font-size:.9rem}
.nl-price-tag .price{font-size:1rem}

/* Sektionen */
.section-alt{background:var(--bg-alt)}
.section-head h2{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}
.link-arrow{color:var(--primary-ink)}

/* Kategorie-Kacheln: Bild links, Text rechts */
.nl-cat-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
.nl-cat-grid .cat-tile{flex-direction:row;align-items:stretch;border-radius:18px;box-shadow:none}
.nl-cat-grid .cat-visual{width:38%;flex-shrink:0;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line-2);background:var(--bg-alt);min-height:120px}
.nl-cat-grid .cat-body{padding:16px 18px}
.cat-tile{border-radius:18px}
.cat-tile:hover{border-color:var(--primary-line);box-shadow:var(--shadow)}
.cat-visual{background:var(--bg-alt)}
.cat-go{background:var(--primary-soft);color:var(--primary-ink)}

/* Produktkarten: weich, ohne harte Linien */
.product-card{border-radius:18px;border-color:var(--line-2);box-shadow:none}
.product-card:hover{border-color:var(--primary-line);box-shadow:var(--shadow)}
.pc-media{border-bottom:0;margin:10px 10px 0;border-radius:12px;background:var(--bg-alt)}
.pc-cat{color:var(--muted);letter-spacing:.04em}
.pc-title{font-weight:600}
.price{color:var(--dark)}
.badge-variants{background:#fff;color:var(--primary-deep)}
.badge-sale{background:#e11d48}

/* Vorteile */
.nl-benefits-wrap{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.nl-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.nl-benefits li{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.nl-benefits b{font-weight:600;color:var(--dark);font-size:.95rem;line-height:1.4}
.nl-benefit-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--primary-soft);color:var(--primary);flex-shrink:0}

/* Ratgeber-Karten */
.post-card{border-radius:18px}

/* Footer: hell */
.nl-footer{background:var(--bg-alt);color:var(--text);border-top:1px solid var(--line)}
.nl-footer-top{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:40px;padding:24px 28px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm)}
.nl-footer-help{display:flex;align-items:center;gap:16px}
.nl-footer-help h2{font-size:1.15rem;margin:0 0 2px}
.nl-footer-help p{margin:0}
.nl-footer-help-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:var(--primary-soft);color:var(--primary);flex-shrink:0}
.nl-footer-help-actions{display:flex;gap:10px;flex-wrap:wrap}
.nl-footer .footer-grid{padding-top:44px}
.nl-footer .footer-title{color:var(--dark)}
.nl-footer .footer-links a,.nl-footer .footer-contact a{color:var(--text)}
.nl-footer .footer-links a:hover,.nl-footer .footer-contact a:hover{color:var(--primary-ink)}
.nl-footer .footer-contact .icon{color:var(--primary)}
.nl-footer .footer-logo img{background:transparent;padding:0;max-height:44px}
.nl-footer .footer-logo .logo-text{color:var(--dark);font-weight:800}
.nl-footer .footer-bottom{border-top:1px solid var(--line);background:#fff}
.nl-footer .footer-bottom a,.nl-footer .footer-powered{color:var(--muted)}
.nl-footer .footer-bottom a{text-decoration-color:var(--line)}
.nl-footer .footer-bottom a:hover{color:var(--primary-ink)}

/* Mobil */
@media (max-width:991px){
  :root{--header-h:64px}
  .nl-header .header-row{gap:6px 8px;padding-top:10px;padding-bottom:10px}
  .nl-header .logo img{max-height:38px;max-width:180px}
  .nl-header .search-form{margin:4px 0 0}
  .nl-hero-inner{grid-template-columns:1fr;gap:28px}
  .nl-collage{max-width:460px}
}
@media (max-width:767px){
  .nl-hero-visual{display:none}
  .nl-hero h1{font-size:clamp(1.8rem,7vw,2.3rem)}
  .nl-cat-grid{grid-template-columns:1fr}
  .nl-cat-grid .cat-visual{width:34%;min-height:96px}
  .nl-footer-top{margin-top:28px;padding:18px}
  .nl-benefits{grid-template-columns:1fr 1fr}
  .nl-benefits li{flex-direction:column;align-items:flex-start;padding:14px;gap:10px}
}