*{ margin:0; padding:0; box-sizing:border-box; }

  :root{
    --navy:#0d1b2c; --navy2:#122740; --yellow:#f6b400; --yellow-d:#e0a400;
    --ink:#101a26; --muted:#6b7684; --line:#e6e9ee; --bg:#f4f6f9;
    --pad-sec: clamp(34px, 3.4vw, 58px);
    --gut: clamp(18px, 3vw, 36px);
  }

  body{
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size:17px; line-height:1.6; color:var(--ink); background:#fff;
    -webkit-font-smoothing:antialiased;
  }
  img{ display:block; max-width:100%; }
  a{ text-decoration:none; color:inherit; }

  .wrap{ max-width:1200px; margin:0 auto; padding:0 var(--gut); }
  .sec{ padding:var(--pad-sec) 0; }

  /* inline icon helper */
  .ic{ display:inline-flex; flex:none; }
  .ic svg{ display:block; width:100%; height:100%; }

  /* ---------- shared typography ---------- */
  .eyebrow{
    display:inline-flex; align-items:center; gap:14px;
    font-size:12.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
    color:var(--muted); margin-bottom:14px;
  }
  .eyebrow::before{ content:""; width:34px; height:3px; background:var(--yellow); border-radius:2px; }
  .h2{
    font-size:clamp(23px, 2.4vw, 34px); line-height:1.12; letter-spacing:-.025em;
    font-weight:800; color:var(--navy); max-width:22ch;
  }
  .h2 em{ font-style:normal; color:var(--yellow); }
  .btn{
    display:inline-block; background:var(--yellow); color:var(--navy);
    font-size:14px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
    padding:15px 32px; border-radius:4px;
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .btn:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.2); }
  .btn.dark{ background:var(--navy); color:#fff; }
  .btn.dark:hover{ background:#000; color:#fff; }

  /* ---------- top bar ---------- */
  .topbar{ background:var(--navy); }
  .topbar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    gap:18px; min-height:44px; flex-wrap:wrap; padding-top:6px; padding-bottom:6px;
  }
  .topnav{ display:flex; gap:clamp(14px, 2.2vw, 34px); flex-wrap:wrap; }
  .topnav a{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:#9aaabc; padding:5px 0; transition:color .18s ease;
  }
  .topnav a .ic{ width:15px; height:15px; color:var(--yellow); }
  .topnav a:hover{ color:var(--yellow); }
  .topnote{
    display:inline-flex; align-items:center; gap:9px;
    font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#7d8fa3;
  }
  .topnote .ic{ width:15px; height:15px; color:var(--yellow); }

  /* ---------- header ---------- */
  .head{ background:#fff; border-bottom:1px solid var(--line); }
  .head .wrap{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap;
  }
  /* Logo in Originalgroesse (338x103) - niemals hochskalieren */
  .head .logo{ width:338px; height:auto; max-width:100%; }
  .head-claim{
    display:inline-flex; align-items:center; gap:11px;
    font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color:var(--muted); text-align:right;
  }
  .head-claim .ic{ width:22px; height:22px; color:var(--navy); }

  /* ---------- hero ----------
     Bild wird NIE skaliert: 1080x368 px, rechtsbuendig, 1:1.
     Links laeuft die Flaeche in #080a0c weiter - das ist exakt der
     Farbwert der linken Bildkante, dadurch ist der Uebergang unsichtbar. */
  .hero{ position:relative; background:#080a0c; overflow:hidden; }
  .hero-media{
    position:absolute; top:0; right:0; bottom:0; width:1080px;
    background-image:url("img/img01.png");
    background-repeat:no-repeat;
    background-size:auto 300px;
    background-position:right center;
  }
  .hero-rule{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--yellow); z-index:3; }
  .hero .wrap{
    position:relative; z-index:2;
    min-height:300px; display:flex; flex-direction:column;
    align-items:flex-start; justify-content:center;
    padding-top:26px; padding-bottom:26px;
  }
  .hero-kick{
    font-size:12px; font-weight:800; letter-spacing:.28em; text-transform:uppercase;
    color:var(--yellow); margin-bottom:14px;
  }
  .hero h1{
    font-size:clamp(27px, 3.1vw, 44px); line-height:1.05; letter-spacing:-.03em;
    font-weight:800; color:#fff; max-width:15ch;
  }
  .hero h1 em{ font-style:normal; display:block; color:var(--yellow); }
  .hero-sub{
    font-size:clamp(15.5px, 1.3vw, 18px); line-height:1.5; color:#bccadb;
    max-width:34ch; margin-top:12px;
  }
  .hero-tags{ display:flex; flex-wrap:wrap; gap:10px clamp(18px, 2.2vw, 34px); margin-top:16px; }
  .hero-tags span{
    display:inline-flex; align-items:center; gap:9px; color:#fff;
    font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  }
  .hero-tags .ic{ width:17px; height:17px; color:var(--yellow); }
  .hero .btn{ margin-top:22px; }

  /* ---------- claims strip ---------- */
  .claims{ background:#fff; border-bottom:1px solid var(--line); }
  .claims .wrap{ display:grid; grid-template-columns:repeat(4, 1fr); }
  .claim{
    display:flex; align-items:flex-start; gap:12px;
    padding:clamp(14px, 1.4vw, 20px) clamp(12px, 1.2vw, 18px); border-left:1px solid var(--line);
  }
  .claim:first-child{ border-left:0; padding-left:0; }
  .claim:last-child{ padding-right:0; }
  .claim .ic{ width:34px; height:34px; color:var(--navy); margin-top:2px; }
  .claim strong{
    display:block; font-size:clamp(16px, 1.3vw, 18.5px); font-weight:800;
    letter-spacing:-.01em; color:var(--navy); margin-bottom:5px;
  }
  .claim span{ display:block; font-size:14.5px; color:var(--muted); line-height:1.4; }

  /* ============================================================
     ARTIKELBESCHREIBUNG
     HTML bleibt 1:1 wie aus eBay - Gestaltung ausschliesslich hier.
     ============================================================ */
  .article{ background:var(--bg); }
  .desc-shell{
    background:#fff; border-radius:16px;
    padding:clamp(22px, 2.6vw, 44px) clamp(18px, 2.8vw, 48px);
    box-shadow:0 16px 44px rgba(13,27,44,.07);
  }

  /* Reset gegen die Inline-Styles aus dem eBay-Editor */
  .content-bg, .content-bg *{
    font-family:inherit !important;
    color:inherit !important;
    background:transparent !important;
    text-align:left !important;
    text-transform:none !important;
  }
  .content-bg{ color:#3d4956 !important; font-size:17px; line-height:1.65; }
  .content-bg div, .content-bg span, .content-bg font, .content-bg p{
    font-size:17px !important; line-height:1.65 !important; font-weight:400 !important;
  }
  .content-bg > div{ margin-bottom:11px; }
  .content-bg > div:last-child{ margin-bottom:0; }

  /* Produktname - wichtigstes Element der Seite */
  .content-bg h1{
    margin:0 0 18px !important; padding-bottom:16px;
    border-bottom:3px solid var(--yellow);
  }
  .content-bg h1, .content-bg h1 *{
    font-size:clamp(24px, 2.9vw, 40px) !important; line-height:1.1 !important;
    letter-spacing:-.03em !important; font-weight:800 !important; color:var(--navy) !important;
  }

  /* Bootstrap-Reste aus dem Editor entschaerfen */
  .content-bg .row, .content-bg [class*="col-"], .content-bg .content-info{
    display:block !important; width:100% !important; max-width:100% !important;
    margin:0 !important; padding:0 !important; float:none !important;
  }
  .content-bg .content-info{ margin-top:clamp(18px, 2vw, 30px) !important; }

  /* Zwischenueberschrift mit gelbem Punkt (EIGENSCHAFTEN: usw.) */
  .content-bg img[src*="y_dot"]{
    display:inline-block !important; width:11px !important; height:11px !important;
    vertical-align:middle; margin:0 11px 3px 0;
  }
  .content-bg img[src*="y_dot"] + span{
    font-size:13px !important; font-weight:800 !important; letter-spacing:.22em !important;
    text-transform:uppercase !important; color:var(--navy) !important;
  }

  /* Listen - der Haken kommt aus dem CSS, nicht aus dem Text. Dadurch
     bekommt eine im exio-Editor mit Enter erzeugte Zeile automatisch
     ihren Haken, und mitten in der Aufzaehlung entsteht keine
     Trennlinie mehr. */
  .content-bg ul{ list-style:none !important; margin:0 0 16px !important; padding:0 !important; }
  .content-bg li{
    position:relative; padding:6px 0 6px 30px !important;
    border-bottom:0 !important;
  }
  .content-bg li::before{
    content:"\2714"; position:absolute; left:0; top:6px;
    color:var(--yellow-d); font-weight:800;
  }
  .content-bg li span, .content-bg li font{ line-height:1.65 !important; }
  .content-bg strong, .content-bg b{ font-weight:800 !important; color:var(--navy) !important; }

  /* Formatierungen aus dem exio-Editor (Fett/Zentriert) duerfen die
     Neutralisierung oben ueberschreiben. */
  .content-bg span.text-modifier[style*="bolder"]{ font-weight:800 !important; }
  .content-bg span.text-modifier[style*="center"]{
    display:block !important; width:100% !important; text-align:center !important;
  }

  /* ---------- categories ---------- */
  .cats{ background:#fff; }
  .cat-grid{
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px; justify-items:center; margin-top:clamp(18px, 2vw, 28px);
  }
  /* Kacheln nie groesser als die Bilddatei (261x246) - sonst wird es unscharf */
  .cat{
    position:relative; width:100%; max-width:261px; border-radius:14px; overflow:hidden;
    background:var(--navy); aspect-ratio:261 / 246;
  }
  .cat img{ width:100%; height:100%; object-fit:cover; }
  .cat-ov{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,23,38,0) 38%, rgba(11,23,38,.55) 66%, rgba(11,23,38,.93) 100%);
  }
  .cat-cap{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px 18px; }
  .cat-cap h3{ color:#fff; font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.2; }
  .cat-cap .bar{ width:34px; height:3px; background:var(--yellow); border-radius:2px; margin-top:9px; }

  .cat-cta{
    grid-column:1 / -1; justify-self:stretch; border-radius:14px;
    background:var(--navy); color:#fff; padding:clamp(20px, 2.2vw, 30px);
    display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  }
  .cat-cta h3{ font-size:clamp(18px, 1.7vw, 23px); font-weight:800; letter-spacing:-.02em; line-height:1.2; }
  .cat-cta p{ font-size:15px; color:#9dafc2; margin-top:7px; max-width:52ch; line-height:1.55; }
  .cat-cta .btn{ flex:none; }

  /* ---------- why ---------- */
  .why{ background:var(--navy); color:#fff; }
  .why .eyebrow{ color:#8093a8; }
  .why .h2{ color:#fff; }
  .why-grid{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:clamp(20px, 2.2vw, 34px); margin-top:clamp(20px, 2.2vw, 30px);
  }
  .why-item{ border-top:2px solid rgba(255,255,255,.13); padding-top:15px; }
  .why-item .num{
    display:block; font-size:12px; font-weight:800; letter-spacing:.22em;
    color:var(--yellow); margin-bottom:8px;
  }
  .why-item h3{ font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.25; margin-bottom:7px; }
  .why-item p{ font-size:14.5px; line-height:1.55; color:#a7b8c9; }

  /* ---------- cta ---------- */
  .cta{ background:var(--yellow); color:var(--navy); }
  .cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .cta h2{ font-size:clamp(21px, 2.2vw, 31px); line-height:1.15; letter-spacing:-.025em; font-weight:800; max-width:20ch; }
  .cta p{ font-size:15.5px; line-height:1.55; max-width:46ch; margin-top:8px; color:rgba(13,27,44,.78); }
  .cta .btn{ flex:none; }

  /* ---------- footer ---------- */
  .foot{ background:#0a1521; color:#8fa0b2; padding:clamp(30px, 3.2vw, 48px) 0 0; }
  .foot-grid{
    display:grid; grid-template-columns:1fr auto;
    gap:clamp(22px, 2.6vw, 46px); padding-bottom:clamp(24px, 2.6vw, 38px);
  }
  .foot-logo{ display:inline-block; background:#fff; border-radius:10px; padding:11px 15px; }
  .foot-logo img{ width:190px; height:auto; }
  .foot-tag{ font-size:14.5px; line-height:1.55; margin-top:14px; max-width:32ch; }
  .foot h4{
    color:#fff; font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
    margin-bottom:14px;
  }
  .foot-col p{ display:block; font-size:14.5px; line-height:1.5; margin-bottom:9px; }
  .foot-col a{
    display:flex; align-items:center; gap:9px;
    font-size:14.5px; line-height:1.5; margin-bottom:9px; transition:color .18s ease;
  }
  .foot-col a .ic{ width:14px; height:14px; color:var(--yellow); }
  .foot-col a:hover{ color:var(--yellow); }

  .botbar{ border-top:1px solid #1a2836; }
  .botbar .wrap{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:12px 26px; padding-top:15px; padding-bottom:15px;
  }
  .botnav{ display:flex; flex-wrap:wrap; gap:10px clamp(16px, 2vw, 28px); }
  .botnav a{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7c8ea1; }
  .botnav a:hover{ color:var(--yellow); }
  .copy{ font-size:12px; letter-spacing:.06em; color:#748699; }

  /* ---------- responsive ---------- */
  @media (max-width:1020px){
    .claims .wrap{ grid-template-columns:1fr 1fr; }
    .claim{ padding-left:0; border-left:0; border-top:1px solid var(--line); }
    .claim:nth-child(-n+2){ border-top:0; }
    .claim:nth-child(even){ padding-left:clamp(16px, 2.6vw, 30px); border-left:1px solid var(--line); }
    .head-claim{ display:none; }
  }
  @media (max-width:900px){
    .hero-media{ background-position:72% center; }
    .why-grid{ grid-template-columns:1fr 1fr; }
    .cat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width:620px){
    body{ font-size:16px; }
    .claims .wrap{ grid-template-columns:1fr; }
    .claim{ padding-left:0 !important; border-left:0 !important; }
    .claim:nth-child(2){ border-top:1px solid var(--line); }
    .cat-grid{ grid-template-columns:minmax(0, 1fr); }
    .cat-cta{ display:block; }
    .cat-cta .btn{ margin-top:16px; }
    .why-grid, .foot-grid{ grid-template-columns:1fr; }
    .foot-grid{ gap:26px; }
    .cta .wrap{ display:block; }
    .cta .btn{ margin-top:18px; }
    .topnote{ display:none; }
    .botbar .wrap{ justify-content:center; text-align:center; }
  }
  /* ==========================================================
     POPRAWKI EXIO 2026-07-31
     ========================================================== */

  /* ---------- hero: grafika na pelna wysokosc + przyciemnienie pod tekstem ---------- */
  .hero-media{
    left:50%; right:auto; transform:translateX(-50%);
    width:min(1200px, 100%);
    background-size:auto 100%;
    background-position:right center;
  }
  /* przyciemnienie hero tylko na telefonie - na desktopie niepotrzebne */
  .hero .wrap{ min-height:clamp(300px, 24vw, 360px); }

  /* ---------- menu gorne: rozwijane na telefonie ---------- */
  .navtoggle{ display:none; }
  .navcheck{ display:none; }

  @media (max-width:820px){
    .topbar .wrap{ display:block; }
    .topnav{ display:block; }
    .navtoggle{
      display:inline-flex; align-items:center; gap:9px; cursor:pointer;
      font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
      color:#fff; padding:10px 0; user-select:none;
    }
    .navtoggle .ic{ width:16px; height:16px; color:var(--yellow); }
    .topnav > a{ display:none; }
    .navcheck:checked ~ a{
      display:flex; padding:10px 0; border-top:1px solid rgba(255,255,255,.10);
    }
    .topnote{ display:none; }
  }

  /* ---------- hero na telefonie: pelne tlo, tekst czytelny ---------- */
  @media (max-width:900px){
    .hero-media{
      width:100%; background-size:cover; background-position:70% center;
    }
    .hero-media::after{
      content:""; position:absolute; inset:0;
      background:linear-gradient(180deg,
        rgba(8,10,12,.58) 0%, rgba(8,10,12,.80) 46%, rgba(8,10,12,.94) 100%);
    }
    .hero .wrap{ min-height:340px; }
    .hero h1{ max-width:100%; }
  }

  /* ---------- ikony pod hero: karuzela zamiast 4 wierszy ---------- */
  @media (max-width:620px){
    .claims{ padding:16px 0; }
    .claims .wrap{
      position:relative; display:block !important;
      grid-template-columns:none !important; min-height:92px;
    }
    .claim{
      position:absolute; left:var(--gut); right:var(--gut); top:50%;
      padding:0 !important; border:0 !important;
      opacity:0; animation:afClaims 16s linear infinite;
    }
    .claim:nth-child(1){ animation-delay:0s; }
    .claim:nth-child(2){ animation-delay:4s; }
    .claim:nth-child(3){ animation-delay:8s; }
    .claim:nth-child(4){ animation-delay:12s; }
  }
  @keyframes afClaims{
    0%       { opacity:0; transform:translateY(-38%); }
    3%, 22%  { opacity:1; transform:translateY(-50%); }
    25%, 100%{ opacity:0; transform:translateY(-62%); }
  }
  @media (max-width:620px) and (prefers-reduced-motion:reduce){
    .claims .wrap{ min-height:0 !important; }
    .claim{
      position:static !important; animation:none !important;
      opacity:1 !important; transform:none !important; padding:12px 0 !important;
    }
  }