/* =========================================================
   Wolke Shopping — Global, Mobile-First Stylesheet
   ========================================================= */

/* ---- CSS Variables (theme) ---- */
:root{
  --brand:#0e457e;
  --brand-2:#0b1220;
  --text:#0b1220;
  --muted:#6b7280;
  --bg:#f7f9fb;
  --card:#ffffff;
  --ring:rgba(14,69,126,.2);
  --border:#eef2f7;
  --link:#1761bb;
}

/* ---- Reset & Base ---- */
*{ box-sizing:border-box }
html, body{ height:100% }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:#fff; color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  line-height:1.45; display:flex; flex-direction:column; min-height:100vh;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--link); text-decoration:none }
a:hover,a:focus{ text-decoration:underline }
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }

/* ---- Layout Helpers ---- */
.main-wrapper{ max-width:1140px; margin:0 auto; padding:0 16px 32px; width:100% }
.container{ padding-left:12px; padding-right:12px }
.container.wide{ max-width:1200px; margin:0 auto }
.hide{ display:none !important }
.w-100{ width:100% !important }
.center{ text-align:center }

/* =========================================================
   Header & Navigation (header.php uyumlu)
   ========================================================= */

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ position:fixed; left:12px; top:12px; width:auto; height:auto; background:var(--brand); color:#fff; padding:8px 10px; border-radius:8px; z-index:1000 }

/* Header shell */
.site-header{
  position:sticky; top:0; background:#ffffffd9; backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border); z-index:50;
}
.header-container{
  max-width:1140px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.logo img{ height:44px; width:auto }

/* Main nav (mobile off-canvas style) */
.main-nav{
  position:fixed; inset:60px 0 auto 0; background:#fff;
  transform:translateY(-110%); transition:transform .18s ease; border-bottom:1px solid var(--border);
}
.main-nav.open{ transform:translateY(0) }
.nav-list{
  list-style:none; margin:0; padding:12px 16px; display:flex; flex-direction:column; gap:10px;
}
.nav-list a{
  display:block; padding:10px 12px; border-radius:10px; font-weight:700; color:#204b85; white-space:nowrap;
}
.nav-list a:hover{ background:#f1f5f9; text-decoration:none }
.nav-list a.active{ background:#f1f5f9 }

/* Secondary actions inside opened mobile nav */
.nav-secondary{ display:flex; gap:8px; padding:0 16px 12px; align-items:center }
.nav-cta{ padding:8px 12px; border:1px solid #e5e7eb; border-radius:10px; font-weight:700 }
.nav-cta.cart{ display:flex; align-items:center; gap:6px }
.cart-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--brand); color:#fff; font-size:12px }

/* Right actions cluster */
.header-actions{ display:flex; align-items:center; gap:10px }

/* Language switcher */
.lang-wrap{ position:relative }
.lang-btn{ padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; font-weight:700; color:#1a2a44 }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px); min-width:160px; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; box-shadow:0 8px 24px rgba(2,6,23,.08); padding:6px; display:none; z-index:60;
}
.lang-menu.open{ display:block }
.lang-menu a{ display:block; padding:8px 10px; border-radius:8px; color:#13233e; text-decoration:none; font-weight:700 }
.lang-menu a.current{ background:#f1f5f9 }

/* Cart & WhatsApp mini buttons */
.cart-mini,.whats-mini{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; font-weight:800;
}
.cart-mini__count{
  position:absolute; right:-6px; top:-6px; min-width:18px; height:18px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:12px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px
}

/* Hamburger */
.hamburger{ width:44px; height:40px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:4px; flex-direction:column }
.hamburger span{ width:20px; height:2px; background:#0b1220; border-radius:2px; transition:transform .15s ease, opacity .15s ease }

/* Desktop overrides */
@media (min-width:960px){
  .main-nav{ position:static; transform:none; border:0 }
  .nav-list{ flex-direction:row; gap:12px; padding:0 }
  .nav-secondary{ display:none }
  .hamburger{ display:none }
}

/* (Legacy header selectors for backward compatibility) */
header{ background:#fff; box-shadow:0 1px 8px rgba(30,50,80,.08); width:100% }
.header-inner{ max-width:1140px; margin:0 auto; padding:10px 16px }
nav.hauptmenue ul{ display:flex; gap:14px; list-style:none; margin:0; padding:0; align-items:center }
nav.hauptmenue a{ display:block; color:#204b85; font-weight:700; font-size:.98rem; padding:8px 12px; border-radius:8px }
.menu-toggle{ display:none }
@media (max-width:768px){
  nav.hauptmenue ul{ position:absolute; top:100%; left:0; right:0; background:#fff; display:none; flex-direction:column; gap:0; box-shadow:0 10px 24px rgba(0,0,0,.1) }
  nav.hauptmenue ul.open{ display:block !important }
  nav.hauptmenue ul li{ width:100%; border-bottom:1px solid #eee }
  .menu-toggle{ display:flex }
}

/* =========================================================
   Hero / Promo
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 600px at 10% -10%, #1d6fb9 0, #0e457e 45%, #0b2a4a 100%);
  color:#fff; text-align:center; padding:48px 0 28px; isolation:isolate;
}
.hero h1{ font-size:clamp(1.25rem, 4vw, 2.2rem); line-height:1.15; margin:8px 0; font-weight:900 }
.hero p{ opacity:.96; font-size:1rem; max-width:780px; margin:0 auto }
.hero .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; font-weight:700; border:1px solid transparent; background:#fff; color:#0b1220 }
.hero .btn:hover{ transform:translateY(-1px) }
.hero .btn.btn-secondary{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.24) }
.hero-bullets{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:18px; font-size:.95rem }
.hero-bullets span{ display:flex; align-items:center; gap:8px; opacity:.95 }
.hero-bullets .dot{ width:8px; height:8px; border-radius:50%; background:#7bdcff; display:inline-block }

/* Sections */
.section{ padding:28px 0 }
.section-muted{ background:#f8fafc }

/* =========================================================
   Products Grid & Cards
   ========================================================= */
.produkte-title{ font-size:1.4rem; margin:0 0 12px; font-weight:800; color:#134a99 }
.produkte-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (min-width:720px){ .produkte-grid{ grid-template-columns:repeat(3,1fr); gap:16px } }
@media (min-width:1024px){ .produkte-grid{ grid-template-columns:repeat(4,1fr); gap:18px } }

.produkt-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 0 rgba(2,6,23,.04); transition:transform .12s, box-shadow .17s;
}
.produkt-card:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(38,55,95,.12) }

.produkt-img{ aspect-ratio:4/3; background:#f5f7fb; display:block }
.produkt-img img{ width:100%; height:100%; object-fit:contain; padding:10px }

.produkt-content{ padding:10px 12px 4px; text-align:left }
.produkt-content h3{ font-size:1rem; margin:.2rem 0 .35rem; line-height:1.25; color:#233243 }
.beschreibung{ color:var(--muted); font-size:.9rem; min-height:28px; max-height:44px; overflow:hidden; text-overflow:ellipsis }

.produkt-bottom{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px 12px; gap:10px }
.preis{ font-weight:800 }
.kaufen-btn{ background:var(--brand); color:#fff; padding:8px 12px; border-radius:10px; font-weight:700; border:0; cursor:pointer; min-height:44px; min-width:44px }
.kaufen-btn:hover{ filter:brightness(.95) }
.kaufen-btn[disabled]{ background:#cbd5e1; cursor:not-allowed }

/* Empty state */
.produkte-empty{ grid-column:1/-1; font-size:1rem; color:#a44; padding:30px 0; text-align:center }

/* =========================================================
   Index slider (marquee style used in index.php)
   ========================================================= */
.slider-section{ background:#f8f8f8; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:20px 0 }
.slider-container{ position:relative; overflow:hidden }
.slider-track{ display:flex; gap:14px; align-items:center; will-change:transform; animation:scrollSlider linear infinite }
.slider-track img{ height:90px; width:auto; object-fit:contain; border-radius:10px }
@keyframes scrollSlider{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (min-width:640px){ .slider-track img{ height:120px } }
@media (prefers-reduced-motion:reduce){ .slider-track{ animation:none } }

/* =========================================================
   Sticky CTA (index.php)
   ========================================================= */
.sticky-cta{ position:sticky; bottom:0; background:var(--brand-2); color:#fff; padding:10px 0; z-index:30 }
.sticky-cta .btn{ background:#fff; color:#0b1220; border:1px solid transparent; border-radius:10px; padding:10px 14px; font-weight:800 }
.sticky-cta .btn:last-child{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3) }

/* =========================================================
   Forms & Buttons (global)
   ========================================================= */
.form-group{ margin-bottom:14px }
.form-group label{ font-weight:700; display:block; margin-bottom:6px; font-size:.98rem; color:#223 }
.form-control,
input[type="text"],input[type="email"],input[type="password"],input[type="number"],textarea,select{
  width:100%; border-radius:10px; border:1.5px solid #b8c3d6; font-size:1rem; padding:10px 12px; background:#f7faff; min-height:38px
}
.form-control:focus,
input:focus,textarea:focus,select:focus{
  border-color:var(--link); box-shadow:0 0 0 .13rem #1761bb33; background:#fff; outline:none
}
.btn,.btn-primary{
  background:#1761bb; border:none; border-radius:10px; font-weight:800; font-size:1rem; box-shadow:0 2px 7px #0001; padding:10px 14px; color:#fff; cursor:pointer; min-height:44px; min-width:44px
}
.btn:hover,.btn:focus,.btn-primary:hover,.btn-primary:focus{ background:var(--brand) }

/* =========================================================
   Kontakt Page
   ========================================================= */
.kontakt-wrapper{
  max-width:600px; margin:26px auto; background:#fff; padding:22px 18px;
  border-radius:14px; box-shadow:0 2px 24px rgba(60,80,120,.09)
}
.kontakt-title{ color:#196cc1; font-size:1.3rem; font-weight:800; margin:0 0 12px }
.kontakt-info{ background:#f3f6ff; border-radius:10px; padding:12px; margin-bottom:16px; font-size:.98rem }
.kontakt-info a{ color:var(--link) }
.kontakt-alert{ padding:10px 12px; border-radius:10px; margin-bottom:12px; font-size:.96rem }
.kontakt-alert.ok{ background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9 }
.kontakt-alert.error{ background:#ffe3e3; color:#b12727; border:1px solid #ffb5b5 }
.kontakt-form textarea.form-control{ min-height:120px; resize:vertical }
@media (max-width:700px){ .kontakt-wrapper{ margin:20px 8px; padding:18px 14px } }

/* =========================================================
   FAQ Page
   ========================================================= */
.faq-header{ font-size:1.6rem; font-weight:800; margin:10px 0 16px; color:#2c3e50; text-align:center }
.faq-page .card{ border-radius:15px; box-shadow:0 2px 8px #00000015; border:none }
.faq-page .card-header{ background:#e9ecef; border-radius:15px 15px 0 0 }
.faq-page .btn-link{ color:#0066cc; font-weight:800; text-decoration:none; width:100%; text-align:left; padding-left:0; min-height:44px; display:flex; align-items:center }
.faq-page .btn-link:hover{ color:#003366; text-decoration:underline }
@media (max-width:768px){ .faq-header{ font-size:1.3rem } }

/* =========================================================
   Tables
   ========================================================= */
.table{ border-collapse:collapse; width:100%; margin-bottom:1.2rem }
.table th,.table td{ border:1px solid #e2e8f0; padding:.68em 1em; text-align:left; font-size:1rem }
.table th{ background:#f7fafe; color:#34495e; font-weight:800 }

/* =========================================================
   Footer
   ========================================================= */
footer{ flex-shrink:0; width:100%; text-align:center; color:#7a8599; font-size:.95rem; padding:24px 10px; background:none; margin-top:20px }

/* =========================================================
   Mobile Fine Tuning
   ========================================================= */
@media (max-width:500px){
  .produkt-img{ aspect-ratio:4/3 }
  .slider-track img{ height:90px }
  .hero .btn{ padding:10px 14px }
}

/* =========================================================
   Optional legacy slider (.ws-*) — retained for older pages
   ========================================================= */
.ws-slider{ position:relative; max-width:1200px; margin:12px auto 0; border-radius:16px; overflow:hidden; background:#0b1324 }
.ws-track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; transition:transform .5s ease }
.ws-slide{ position:relative; height:clamp(180px,30vw,360px); background:#0b1324; display:flex; align-items:center; justify-content:center }
.ws-slide img{ width:100%; height:100%; object-fit:cover }
.ws-caption{ position:absolute; left:14px; bottom:12px; background:rgba(0,0,0,.45); color:#fff; font-weight:800; padding:8px 12px; border-radius:10px; font-size:.95rem }
.ws-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.88); border:none; border-radius:999px; width:36px; height:36px; cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.2); min-height:44px; min-width:44px }
.ws-prev{ left:10px } .ws-next{ right:10px }
.ws-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; gap:8px; justify-content:center }
.ws-dot{ width:9px; height:9px; border-radius:999px; border:none; cursor:pointer; background:rgba(255,255,255,.55); min-height:44px; min-width:44px }
.ws-dot.active{ background:#fff }
@media (max-width:700px){
  .ws-slide{ height:clamp(160px,40vw,240px) }
  .ws-caption{ font-size:.9rem; padding:6px 10px }
  .ws-nav{ width:32px; height:32px; font-size:18px }
}
.flag-icon {
    width: 16px;
    height: 12px;
    display: block;
    border-radius: 2px;
}
.lang-item, .lang-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
}