[data-faq-2l]{
  font-family: var(--wbs-font-sans);

  /* Local tokens (FAQ block) → mapped to global WBS tokens */
  --faq-magenta: var(--wbs-magenta);
  --faq-text: var(--wbs-text);

  /* answers: slightly darker, but not pure black */
  --faq-answer-text: var(--wbs-ink-a86);
  --faq-muted: var(--wbs-muted);

  --faq-stroke: var(--wbs-black-a10);

  --faq-open-bg: var(--wbs-magenta-a04);
  --faq-hover-bg: var(--wbs-magenta-a03);
  --faq-answer-bg: var(--wbs-black-a02);

  /* keep the original shadow tone used in this block */
  --faq-shadow: 0 var(--wbs-space-4-5) 45px rgba(2,6,23,.08);
  --faq-shadow-hover: 0 var(--wbs-space-5-5) 60px rgba(2,6,23,.10);

  --faq-radius: var(--wbs-radius-md);

  /* used by “Mehr anzeigen” button */
  --faq-magenta-soft: var(--wbs-magenta-a90);
}
[data-faq-2l] *, [data-faq-2l] *::before, [data-faq-2l] *::after{ box-sizing:border-box; }

[data-faq-2l] .section{ padding: var(--wbs-section-pad) 0; }
    [data-faq-2l] .container{ width:var(--wbs-wrap); margin:0 auto; }

    [data-faq-2l] h2{
      margin:0 0 .6rem;
      font-family:var(--wbs-font-serif);
      font-weight:400;
      font-size: var(--wbs-type-h2);
      line-height:1.18;
      letter-spacing:-0.005em;
    }
    [data-faq-2l] .sub{
      margin:0 0 1.4rem;
      color:var(--faq-muted);
      max-width:78ch;
      font-size: var(--wbs-type-body);
      line-height: var(--wbs-leading-body);
  font-weight: 400;
}

    [data-faq-2l] .card{
      border:1px solid var(--faq-stroke);
      border-radius:var(--faq-radius);
      background:rgba(255,255,255,.92);
      box-shadow:var(--faq-shadow);
      overflow:hidden;
    }
    [data-faq-2l] .card:hover{ box-shadow:var(--faq-shadow-hover); }

    /* OUTER */
    [data-faq-2l] .outer-item + .outer-item{ border-top:1px solid var(--faq-stroke); }
    [data-faq-2l] .outer-q{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1.05rem 1.1rem;
      background:transparent;
      border:0;
      text-align:left;
      cursor:pointer;
      font-size:1.02rem;
      line-height:1.35;
      transition:background .18s ease;
      color:var(--faq-text);
    }
    [data-faq-2l] .outer-q:hover{ background:var(--faq-hover-bg); }
    [data-faq-2l] .outer-q:focus-visible{
      outline:3px solid var(--wbs-magenta-a18);
      outline-offset:4px;
      border-radius: var(--wbs-radius-sm);
    }
    [data-faq-2l] .outer-title{ display:flex; align-items:center; gap:.75rem; min-width:0; }
    [data-faq-2l] .dot{ width:10px; height:10px; border-radius: var(--wbs-radius-pill); background:var(--wbs-magenta-a28); flex:0 0 10px; }
    [data-faq-2l] .chev{
      width:36px; height:36px; border-radius: var(--wbs-radius-pill);
      display:grid; place-items:center; flex:0 0 36px;
      transition:background .18s ease; color:var(--faq-magenta);
    }
    [data-faq-2l] .chev svg{ width:var(--wbs-space-4-5); height:var(--wbs-space-4-5); transition:transform .18s ease; }

    [data-faq-2l] .outer-a{
      overflow:hidden; max-height:0;
      transition:max-height .26s ease;
      background:transparent;
    }
    [data-faq-2l] .outer-a > div{ padding:.2rem 1.1rem 1.1rem 1.1rem; }

    [data-faq-2l] .outer-item.is-open .outer-q{ background:var(--faq-open-bg); }
    [data-faq-2l] .outer-item.is-open .chev{ background:var(--wbs-magenta-a08); }
    [data-faq-2l] .outer-item.is-open .chev svg{ transform:rotate(180deg); }

    /* INNER */
    [data-faq-2l] .inner{
      border:1px solid var(--faq-stroke);
      border-radius: var(--wbs-radius-sm);
      overflow:hidden;
      background:#fff;
    }
    [data-faq-2l] .inner-item + .inner-item{ border-top:1px solid var(--faq-stroke); }
    [data-faq-2l] .inner-q{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:.95rem 1rem;
      border:0;
      background:transparent;
      cursor:pointer;
      text-align:left;
      font-size:.98rem;
      line-height:1.35;
      color:var(--faq-text);
    }
    [data-faq-2l] .inner-q:hover{ background:rgba(0,0,0,.015); }

    [data-faq-2l] .plus{
      width:34px; height:34px; border-radius: var(--wbs-radius-pill);
      display:grid; place-items:center; flex:0 0 34px;
      color:var(--faq-magenta);
      background:var(--wbs-magenta-a06);
      transition:transform .18s ease, background .18s ease;
      position:relative;
    }
    [data-faq-2l] .plus::before, [data-faq-2l] .plus::after{
      content:""; position:absolute; width:14px; height:2px;
      background:currentColor; border-radius:2px;
    }
    [data-faq-2l] .plus::after{ transform:rotate(90deg); }

    [data-faq-2l] .inner-a{
      overflow:hidden; max-height:0;
      transition:max-height .22s ease;
      background:var(--faq-answer-bg);
    }
    [data-faq-2l] .inner-a > div{
      padding:.85rem 1rem .95rem 1rem;
      color:var(--faq-answer-text);
      line-height:1.75;
      font-size:.96rem;
      max-width:92ch;
    }
    [data-faq-2l] .inner-item.is-open .inner-q{ background:var(--wbs-magenta-a02); }
    [data-faq-2l] .inner-item.is-open .plus{ background:var(--wbs-magenta-a10); }
    [data-faq-2l] .inner-item.is-open .plus::after{ transform:rotate(0deg); opacity:0; }

    /* Progressive "show more" */
    [data-faq-2l] .more-row{
      padding:.85rem 1rem;
      background:rgba(0,0,0,.01);
      border-top:1px solid var(--faq-stroke);
    }
    [data-faq-2l] .more-btn{
      width:100%;
      border:1px solid var(--faq-stroke);
      background:var(--wbs-magenta-a03);
      color:var(--faq-magenta-soft);
      border-radius: var(--wbs-space-3);
      padding:.85rem 1rem;
      cursor:pointer;
      font-weight:500;
      display:flex; align-items:center; justify-content:center; gap:.6rem;
    }
    [data-faq-2l] .more-btn:hover{ background:var(--wbs-magenta-a04); }
    [data-faq-2l] .more-btn:focus-visible{ outline:3px solid var(--wbs-magenta-a18); outline-offset:4px; }
    [data-faq-2l] .more-btn .down{
      width:10px; height:10px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:rotate(45deg);
      margin-top:-2px;
    }
    [data-faq-2l] .is-hidden{ display:none; }

    @media (max-width:640px){
      [data-faq-2l] .container{ width:var(--wbs-wrap); }
      [data-faq-2l] .outer-q{ padding:.95rem; font-size:.98rem; }
      [data-faq-2l] .outer-a > div{ padding:.15rem .95rem .95rem .95rem; }
      [data-faq-2l] .inner-q{ padding:.9rem; }
      [data-faq-2l] .inner-a > div{ padding:.8rem .9rem .9rem .9rem; }
      [data-faq-2l] .chev{ width:34px; height:34px; flex-basis:34px; }
      [data-faq-2l] .more-row{ padding:.75rem .9rem; }
    }

/* v26: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-faq-2l] *{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}

/* v30: typography consistency */
[data-faq-2l] h2{
  font-family: var(--wbs-font-serif);
  font-weight: 400;
}



/* Common typography uplift (v34 variants) */
[data-faq-2l] .outer-q{ font-size: 1.10rem; font-weight: 600; }
[data-faq-2l] .inner-q{ font-size: 1.04rem; }
[data-faq-2l] .inner-a{ font-size: 1.00rem; }
[data-faq-2l] .outer-title span{ line-height: 1.2; }


[data-faq-2l] .outer-a{ position: relative; padding-left: var(--wbs-space-4-5); }
[data-faq-2l] .outer-a::before{
  content:"";
  position:absolute;
  left: var(--wbs-space-2);
  top: var(--wbs-space-4);
  bottom: var(--wbs-space-4);
  width: 1px;
  background: var(--wbs-black-a10);
}
[data-faq-2l] .inner-item{ position: relative; }
[data-faq-2l] .inner-item::before{
  content:"";
  position:absolute;
  left: -10px;
  top: 1.25rem;
  width: var(--wbs-space-3);
  height: 1px;
  background: var(--wbs-black-a10);
}
[data-faq-2l] .outer-item.is-open > .outer-q{ box-shadow: inset 0 -1px 0 var(--wbs-black-a08); }


/* v35B — Tree layout refined */

[data-faq-2l] .outer-a {
  position: relative;
  padding-left: 0;
}

[data-faq-2l] .outer-a::before {
  content: "";
  position: absolute;
  left: var(--wbs-space-4-5);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--wbs-black-a10);
}

[data-faq-2l] .inner {
  padding-left: 36px;
}

[data-faq-2l] .inner-item {
  position: relative;
}

[data-faq-2l] .inner-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--wbs-space-4-5));
  top: 1.25rem;
  width: var(--wbs-space-3);
  height: 1px;
  background: var(--wbs-black-a10);
}

[data-faq-2l] .outer-item.is-open > .outer-q {
  box-shadow: inset 0 -1px 0 var(--wbs-black-a08);
}


/* v36B — hierarchy + spacing refinements (tree line unchanged) */

/* 1) Outer category typography: less heavy, slightly larger */
[data-faq-2l] .outer-q{
  font-size: 1.12rem;
  font-weight: 500; /* was 600 */
}

/* 2) Inner question typography: a bit smaller than outer, but clearer */
[data-faq-2l] .inner-q{
  font-size: 1.06rem;
  font-weight: 500;
}

/* 3) Answers: slightly smaller than questions, but larger than before */
[data-faq-2l] .inner-a{
  font-size: 1.02rem;
}

/* 4) Fix “line merges with inner container border”
   - move the whole inner container slightly right (without pushing text too far)
   - reduce inner left padding so text starts closer, as on your screenshot */
[data-faq-2l] .outer-a::before{
  left: var(--wbs-space-4-5); /* keep tree line position */
}

[data-faq-2l] .inner{
  /* shift container right a few px so line doesn’t glue to its border */
  margin-left: 10px;
  /* keep space for the tree line but not too wide */
  padding-left: 28px; /* was 36px */
}

/* 5) Make the inner “card” read cleaner (subtle border separation) */
[data-faq-2l] .inner{
  border: 1px solid var(--wbs-black-a10);
  background: #fff;
}

/* 6) Mini-tree elbow for opened answer (visual cue that this is a third level) */
[data-faq-2l] .inner-item.is-open .inner-a{
  position: relative;
  padding-left: var(--wbs-space-4-5);
}

[data-faq-2l] .inner-item.is-open .inner-a::before{
  content:"";
  position:absolute;
  left: var(--wbs-space-2);
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--wbs-black-a10);
}

[data-faq-2l] .inner-item.is-open .inner-a::after{
  content:"";
  position:absolute;
  left: var(--wbs-space-2);
  top: 14px;
  width: 10px;
  height: 1px;
  background: var(--wbs-black-a10);
}


/* v37B — fixes per review */

/* 2nd level questions: closer to left, same size as outer but not bold */
[data-faq-2l] .inner-q{
  font-size: 1.12rem;   /* match outer size */
  font-weight: 400;     /* not bold */
  padding-left: .75rem; /* pull text left a bit */
}

/* Keep outer as-is (user said ok); ensure outer stays slightly stronger */
[data-faq-2l] .outer-q{ font-weight: 500; }

/* Answers (3rd level): same size as 2nd level */
[data-faq-2l] .inner-a{
  font-size: 1.12rem;
}

/* Reduce excessive left offset for inner container but keep tree line breathing room */
[data-faq-2l] .inner{
  padding-left: var(--wbs-space-6);   /* was 28px */
}

/* 3rd level: L-shaped connector */
[data-faq-2l] .inner-item.is-open .inner-a{
  position: relative;
  padding-left: var(--wbs-space-5-5);   /* room for L */
}
[data-faq-2l] .inner-item.is-open .inner-a::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 14px;
  width: var(--wbs-space-3);
  height: var(--wbs-space-3);
  border-left: 1px solid var(--wbs-black-a14);
  border-bottom: 1px solid var(--wbs-black-a14);
}
/* remove previous mini-tree if present by overriding */
[data-faq-2l] .inner-item.is-open .inner-a::after{ content:none; }


/* v38B — L-shape fix + tighter left text */
[data-faq-2l] .inner-q{
  padding-left: var(--wbs-space-2); /* 6–10px from container edge */
}

[data-faq-2l] .inner-item.is-open .inner-a{
  position: relative;
  padding-left: var(--wbs-space-5-5);
}

[data-faq-2l] .inner-item.is-open .inner-a::before{
  content:"";
  position:absolute;
  left: var(--wbs-space-2);
  top: 14px;
  width: var(--wbs-space-3);
  height: var(--wbs-space-3);
  background:
    linear-gradient(var(--wbs-black-a14), var(--wbs-black-a14)) left top / 1px 100% no-repeat,
    linear-gradient(var(--wbs-black-a14), var(--wbs-black-a14)) left bottom / 100% 1px no-repeat;
}


/* v39B — stronger 3rd level readability */

[data-faq-2l] .inner-a {
  font-size: 1.12rem;      /* same as 2nd level */
  font-weight: 400;
  color: #1a1a1a;          /* darker, higher contrast */
  line-height: 1.55;
}

[data-faq-2l] .inner-item.is-open .inner-a {
  background: var(--wbs-black-a02);  /* subtle separation */
  border-radius: 10px;
  padding-top: var(--wbs-space-3);
  padding-bottom: var(--wbs-space-3);
}


/* v40B — 3rd level exact match with 2nd level */

[data-faq-2l] .inner-q {
  font-size: 1.12rem !important;
}

[data-faq-2l] .inner-a {
  font-size: 1.12rem !important;   /* exact same size */
  font-weight: 400;
  color: #000000 !important;       /* pure black */
  line-height: 1.55;
  letter-spacing: 0;               /* prevent optical shrink */
}

[data-faq-2l] .inner-a div {
  font-size: inherit !important;   /* ensure nested div doesn't shrink */
}


/* v41B — reduce letter-spacing (optical balance) */

[data-faq-2l] .inner-a {
  letter-spacing: -0.01em !important;  /* subtle tightening */
}

[data-faq-2l] .inner-q {
  letter-spacing: -0.005em !important;
}


/* v42B — fine optical tuning */

[data-faq-2l] .inner-a {
  font-size: 1.10rem !important;
  letter-spacing: -0.007em !important;
}

[data-faq-2l] .inner-q {
  letter-spacing: -0.007em !important;
}


/* v43B — align L marker like FAQ (centered + softer) */
[data-faq-2l] .inner-item.is-open .inner-a{
  padding-left: var(--wbs-space-5-5);
  position: relative;
}
[data-faq-2l] .inner-item.is-open .inner-a::before{
  left: 1.05rem;
  top: 1.05rem;
  opacity: .35;
}


/* v44B — restore visible L + tighter answer padding */
[data-faq-2l] .inner-item.is-open .inner-a{
  padding-top: var(--wbs-space-2) !important;
  padding-bottom: var(--wbs-space-2) !important;
}

/* Restore L using gradients (visible, no square) */
[data-faq-2l] .inner-item.is-open .inner-a::before{
  opacity: .55 !important;
  left: var(--wbs-space-2) !important;
  top: 14px !important;
  width: var(--wbs-space-3) !important;
  height: var(--wbs-space-3) !important;
  background:
    linear-gradient(var(--wbs-black-a14), var(--wbs-black-a14)) left top / 1px 100% no-repeat,
    linear-gradient(var(--wbs-black-a14), var(--wbs-black-a14)) left bottom / 100% 1px no-repeat !important;
}


/* v45B — fix L visibility + vertical alignment */

[data-faq-2l] .inner-item.is-open .inner-a::before{
  background:
    linear-gradient(#000,#000) left top / 1px 100% no-repeat,
    linear-gradient(#000,#000) left bottom / 100% 1px no-repeat !important;
  opacity: .5 !important;
  left: 10px !important;
  top: 1rem !important;
}

[data-faq-2l] .inner-item.is-open .inner-a{
  margin-top: -4px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* v46B — unify L with FAQ */

[data-faq-2l] .inner-item.is-open .inner-a{
  padding-left: 2.6rem !important;
  margin-top: 6px;
}

[data-faq-2l] .inner-item.is-open .inner-a::before{
  left: 1.05rem !important;
  top: 1.15rem !important;
  opacity: .42 !important;
}


/* v47 — FAQ_2L fully synced with FAQ_v30 L styling */

[data-faq-2l] .inner-item.is-open .inner-a{
  padding-left: 2.6rem !important;
  margin-top: 6px !important;
}

[data-faq-2l] .inner-item.is-open .inner-a::before{
  left: 1.05rem !important;
  top: 1.15rem !important;
  opacity: .42 !important;
}


/* v48B — make 3rd-level answer look 1:1 like linear FAQ */

/* Remove any extra padding/background on the answer container */
[data-faq-2l] .inner-item.is-open .inner-a{
  padding: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Apply spacing to the inner div exactly like linear FAQ */
[data-faq-2l] .inner-a > div{
  position: relative;
  padding: 0 1.1rem 1.05rem 2.6rem !important; /* same left as FAQ_v30 */
  margin-top: 6px !important;
  color: #000 !important;
  line-height: 1.65;
}

/* L marker on the inner div (same logic as FAQ) */
[data-faq-2l] .inner-a > div::before{
  content:"";
  position:absolute;
  left: 1.05rem;
  top: 1.15rem;
  width: var(--wbs-space-3);
  height: var(--wbs-space-3);
  background:
    linear-gradient(#000,#000) left top / 1px 100% no-repeat,
    linear-gradient(#000,#000) left bottom / 100% 1px no-repeat;
  opacity: .42;
}

/* Disable older L implementation on .inner-a itself if present */
[data-faq-2l] .inner-a::before{
  content: none !important;
}