/* Header immer EINZEILIG */
  .wsmainwp {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:nowrap;          /* kein Umbruch */
    min-height:72px;
  }

  /* Logo links: kompakt, zentriert in der Zeile */
  .desktoplogo { 
    flex:0 0 auto; 
    display:flex; 
    align-items:center;
  }
  .desktoplogo .logo-white { margin-top:0 !important; }   /* dein inline margin-top weg */

  /* Navigation nimmt restliche Breite, darf schrumpfen */
  .wsmenu { 
    flex:1 1 auto; 
    min-width:0;              /* wichtig, sonst schiebt das Logo nach oben */
  }

  /* UL als Flex in einer Zeile */
  .wsmenu-list {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;                 /* statt inline margin-right */
    flex-wrap:nowrap;         /* nicht umbrechen */
    margin:0; padding:0; list-style:none;
  }
  /* Inline-Margins der <li> neutralisieren, wenn du gap nutzt */
  .wsmenu-list .nl-simple { margin-right:0 !important; }

  /* Menülinks kompakter & ohne Umbruch */
  .wsmenu-list .menu-link {
    display:inline-block;
    white-space:nowrap;
    font-size:.95rem;
    padding:.25rem .35rem;
    color:#fff;               /* falls du weißen Text willst */
  }

  /* Dein CTA im LI: etwas schlanker vertikal, bricht nicht um */
  .wsmenu-list .nl-simple > a[href*="switchcheck.de/vergleich"] {
    display:inline-flex; align-items:center; justify-content:center;
    white-space:nowrap;
    background:#d11a7d; color:#fff; font-weight:700; text-decoration:none;
    padding:.32rem .9rem;     /* schmaler oben/unten */
    min-height:34px;          /* statt 44px */
    line-height:1;
    border-radius:999px;
    font-size:.93rem;
  }

  /* Sicherheitsnetz: bevor irgendwas umbrechen würde, leicht komprimieren */
  @media (max-width: 1140px) {
    .wsmenu-list { gap:12px; }
    .wsmenu-list .menu-link { font-size:.92rem; }
    .wsmenu-list .nl-simple > a[href*="switchcheck.de/vergleich"] { padding:.3rem .8rem; font-size:.9rem; }
  }

  /* Tablet: wenn’s wirklich eng wird, darf der Header untereinander gehen */
  @media (max-width: 960px) {
    .wsmainwp { flex-wrap:wrap; }
    .wsmenu { order:2; flex:1 1 100%; }
  }

/* Hamburger (44×44) + Icon */
  .wsnavtoggle{
    -webkit-appearance:none; appearance:none;
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; border:0; background:transparent;
    border-radius:.5rem; cursor:pointer;
  }
  .wsnavtoggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(31,42,68,.25); }
  .wsnavtoggle .bars,
  .wsnavtoggle .bars::before,
  .wsnavtoggle .bars::after{
    content:""; display:block; width:24px; height:2px; border-radius:2px; background:#1f2a44;
    transition:transform .25s ease, opacity .2s ease, background-color .2s ease;
  }
  .wsnavtoggle .bars{ position:relative; }
  .wsnavtoggle .bars::before{ position:absolute; left:0; transform:translateY(-7px); }
  .wsnavtoggle .bars::after { position:absolute; left:0; transform:translateY( 7px); }
  .wsnavtoggle[aria-expanded="true"] .bars{ background:transparent; }
  .wsnavtoggle[aria-expanded="true"] .bars::before{ transform:translateY(0) rotate(45deg); }
  .wsnavtoggle[aria-expanded="true"] .bars::after { transform:translateY(0) rotate(-45deg); }

  /* ⭐ Mobile Panel: standardmäßig ZU, bei .nav-open AUF */
  @media (max-width: 991px){
    #header{ position:relative; z-index:100; }
    .wsmainfull{ position:relative; }

    /* Menü zu */
    #main-menu{
      display:none !important;           /* ggf. Theme überstimmen */
      position:absolute; left:0; right:0; top:100%;
      background:#fff; border-top:1px solid #e9eef7;
      box-shadow:0 10px 24px rgba(31,42,68,.08);
      padding:.5rem 1rem; z-index:1000;
      max-height:calc(100vh - 72px); overflow:auto;
      pointer-events:auto;
    }

    /* Menü auf */
    #header.nav-open #main-menu,
    html.nav-open #header #main-menu{
      display:block !important;
    }

    /* Vertikale Liste + große Touch-Ziele */
    .wsmenu-list{ display:flex; flex-direction:column; gap:.25rem; margin:0; padding:0; list-style:none; }
    .wsmenu-list > li > a{ display:block; padding:.9rem 0; text-decoration:none; }
    .wsmenu-list .btn, .wsmenu-list .btn-cta2{
      display:block; text-align:center; padding:.9rem 1rem; border-radius:.5rem;
    }

    /* Scroll-Lock optional */
    html.nav-open{ overflow:hidden; }
  }

:root{
      --brand-navy:#0e1630;          /* Banner-Linkfarbe */ 
      --brand-lila:#5a3c95;          /* Lila / Heading */ 
      --brand-magenta:#b00061;       /* CTA-Magenta */
      --brand-gold:#ffc84e;          /* Gold-Akzent */
      --shadow-soft:0 6px 14px rgba(15,23,42,.08);
    }

    /* Sieger-H2: Gold-Badge + gold-lila Unterstreichung */
    .champion-title{
      margin:0 0 8px;
      font:800 clamp(1.6rem,3.2vw,2.2rem)/1.2 system-ui,-apple-system,'Segoe UI',Sora,Inter,Arial,sans-serif;
      letter-spacing:-.01em; color:#111827;
    }
    .champion-title .ribbon{
      background:linear-gradient(180deg,transparent 58%, rgba(159,63,191,.22) 0); /* zarter Lila-Underline */
      -webkit-box-decoration-break:clone; box-decoration-break:clone;
      padding:0 .12em; border-radius:.15em;
      position:relative;
    }
    .champion-title .badge{
      display:inline-flex; align-items:center; gap:.5ch;
      margin-left:.5ch; vertical-align:middle;
      padding:.22em .66em; border-radius:999px;
      font:700 .9em/1 system-ui,-apple-system,'Segoe UI',Sora,Inter,Arial,sans-serif;
      color:#111827; position:relative; isolation:isolate;
      background:linear-gradient(90deg,var(--brand-gold),#ffd978 40%, #ffedb0);
      box-shadow:var(--shadow-soft), 0 0 0 1px rgba(0,0,0,.04);
      will-change:transform;
    }
    .badge .shine{
      content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden;
    }
    .badge .shine::after{
      content:""; position:absolute; top:0; bottom:0; width:45%; left:-75%;
      background:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
      filter:blur(1px); transform:skewX(-20deg);
      animation: shineSweep 2.8s ease-in-out 2 both;
    }
    @keyframes shineSweep{0%{left:-75%}60%{left:125%}100%{left:125%}}
    @media (prefers-reduced-motion: reduce){
      .badge .shine::after{animation:none}
    }
    .badge svg{width:14px;height:14px;flex:0 0 auto}

    /* Lead-Zeile – nimmt Banner-Farben auf */
    .lead-strap{
      margin:0 0 14px;
      font:600 clamp(1rem,2vw,1.125rem)/1.35 system-ui,-apple-system,'Segoe UI',Sora,Inter,Arial,sans-serif;
      color:#111827;
    }
    .lead-strap .bubble{
      background:linear-gradient(180deg,transparent 62%, rgba(255,229,143,.65) 0);
      -webkit-box-decoration-break:clone; box-decoration-break:clone;
      padding:0 .18em; border-radius:.15em;
    }

    /* Sichtbarkeit: Desktop = SVG | Mobile = Scroll-Tabelle */
    .desktop-figure{display:none}
    .mobile-scroll{display:block;max-width:1114px;margin:0 auto;text-align:left}
    @media (min-width:900px){
      .desktop-figure{display:block}
      .mobile-scroll{display:none}
    }

    /* Scroll-Table (mobil) */
    .scroll-wrap{
      position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch;
      border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.06)
    }
    .scroll-wrap::before,.scroll-wrap::after{
      content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; transition:opacity .3s ease;
    }
    .scroll-wrap::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
    .scroll-wrap::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
    .scroll-wrap.scrolled-start::before{opacity:0}
    .scroll-wrap.scrolled-end::after{opacity:0}
    @media (prefers-reduced-motion: reduce){ .scroll-wrap::before,.scroll-wrap::after{transition:none} }

    .scroll-hint{
      position:absolute; right:10px; bottom:10px; z-index:4;
      display:flex; align-items:center; gap:8px;
      padding:.45rem .6rem; border-radius:999px;
      font:600 13px/1 system-ui,-apple-system,'Segoe UI',Sora,Inter,Arial,sans-serif;
      color:var(--brand-navy);
      background:rgba(255,255,255,.95); border:1px solid #e5e7eb;
      box-shadow:0 2px 6px rgba(0,0,0,.06);
      animation: hintPulse 2.2s ease-in-out 2 both;
    }
    .scroll-hint svg{width:16px;height:16px}
    @keyframes hintPulse{0%{transform:translateX(0);opacity:0}10%{opacity:1}50%{transform:translateX(-8px)}100%{transform:translateX(0);opacity:1}}
    @media (prefers-reduced-motion: reduce){ .scroll-hint{animation:none} }
    .scroll-wrap.hide-hint .scroll-hint{display:none}

    /* Tabelle */
    table.compare{
      border-collapse:separate; border-spacing:0; min-width:720px; width:100%;
      font:500 15px/1.35 system-ui,-apple-system,"Segoe UI",Sora,Inter,Arial,sans-serif; color:#111827
    }
    .compare caption{padding:10px 12px; font-weight:700; text-align:left; color:#374151}
    .compare th,.compare td{padding:12px 14px; border-bottom:1px solid #e5e7eb; background:#fff}
    .compare thead th{position:sticky; top:0; z-index:2; background:#f9fafb; font-weight:700; white-space:nowrap}
    .compare tbody tr:nth-child(odd) td{background:#fbfbfc}

    /* Sticky erste Spalte */
    .sticky-col{position:sticky; left:0; z-index:1; background:#fff; box-shadow:1px 0 0 #e5e7eb; min-width:260px}
    thead .sticky-col{background:#f9fafb; z-index:3}

    /* Status & Chips – greifen Brand */
    .ok{color:#10b981;font-weight:700}
    .mid{color:#f59e0b;font-weight:700}
    .no{color:#ef4444;font-weight:700}
    .chip{display:inline-block;padding:.25em .6em;border-radius:999px;font-weight:700;font-size:.9rem;line-height:1;background:#e5e7eb;color:#111827;white-space:nowrap}
    .chip--grad{background:linear-gradient(90deg,var(--brand-magenta),var(--brand-lila));color:#fff}

/* ——— LCP/CLS & apple-ish minimal ——— */
    #reviews-4 { content-visibility: auto; contain-intrinsic-size: 740px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Sora,Inter,Arial,sans-serif; }
    #reviews-4 .container { max-width: 960px; margin-inline: auto; padding: clamp(10px,2.2vw,16px); }
    #reviews-4 .section-title { text-align: center; margin: 0 0 clamp(10px,2vw,14px); }
    /* Headline Größe wie Vorlage */
    #reviews-4 h2 { margin: 0; font-weight: 700; letter-spacing: -.015em; font-size: clamp(1.5rem,2.5vw,2rem); }
    /* große, realistische Sterne direkt darunter */
    #reviews-4 .stars-lg { display:inline-flex; gap:6px; margin-top:6px; }
    #reviews-4 .stars-lg svg { width: clamp(24px,2.6vw,30px); height:auto; fill:#f59e0b; }
    #reviews-4 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

    /* ——— Carousel: Seiten à 3 Karten (Desktop), 1 Karte (Mobile) ——— */
    #reviews-4 .viewport { position:relative; overflow:hidden; border-radius:12px; background:#fff; border:1px solid #e5e7eb; }
    #reviews-4 .track { display:flex; transition: transform .45s ease; will-change: transform; }
    #reviews-4 .page { min-width:100%; padding: clamp(8px,2vw,12px); }
    #reviews-4 .grid { display:grid; gap: clamp(8px,2vw,12px); grid-template-columns: 1fr; }
    @media (min-width: 980px){ #reviews-4 .grid { grid-template-columns: repeat(3,1fr); } } /* Desktop: 3 nebeneinander */

    /* ——— Karten kompakt & gleich hoch (kein CLS) ——— */
    #reviews-4 .card{
      background:#fff; border:1px solid #eceff3; border-radius:12px;
      padding:12px; min-height:126px; max-height:168px;
      display:flex; flex-direction:column; justify-content:space-between;
    }
    #reviews-4 blockquote{ margin:0 0 8px; font-size:.98rem; line-height:1.34; color:#111827; }
    #reviews-4 .meta{ display:flex; align-items:center; gap:8px; font-size:.9rem; color:#6b7280; }
    #reviews-4 .stars-sm{ display:inline-flex; gap:2px; }
    #reviews-4 .stars-sm svg{ width:15px; height:auto; fill:#f59e0b; }

    /* Verified / Trust */
    #reviews-4 .verify{ display:flex; align-items:center; gap:6px; font-size:.85rem; color:#047857; margin-top:4px; }
    #reviews-4 .verify svg{ width:16px; height:16px; }

    /* gelbe Keyword-Highlights */
    #reviews-4 .txt-highlight{ background: linear-gradient(transparent 60%, #ffe58f 60%); padding:0 .06em; border-radius:2px; }

    /* Dots + Meta unten super knapp */
    #reviews-4 .dots{ display:flex; justify-content:center; gap:8px; margin-top:8px; }
    #reviews-4 .dot{ width:9px; height:9px; border-radius:999px; background:#d1d5db; border:0; cursor:pointer; }
    #reviews-4 .dot.is-active{ background:#111827; }

    #reviews-4 .meta-wrap{ text-align:center; margin-top:6px; }
    #reviews-4 .contact{ margin:0; font-size:.95rem; color:#4b5563; }
    #reviews-4 .contact a{ color:#0f766e; text-decoration:underline; text-underline-offset:3px; }
    #reviews-4 .summary{ margin:2px 0 0; font-size:.92rem; color:#374151; }

    @media (prefers-reduced-motion: reduce){ #reviews-4 .track{ transition:none; } }