/*
  site-polish-v14.css
  Purpose: mobile-first polish + stable (predictable) white/ultra-soft rhythm.

  v14 changes:
  - Keep the established ‘lemonade-clean’ rhythm, but add a subtle Hero fog (smoke) overlay.
  - Hide ALL slider/carousel arrows (kept in DOM; dots remain).
  - Keep the 3-profile illustration system as SSOT, but tune Hero ink slightly softer.
  - Add extra inline documentation for future maintenance.
*/
:root{
  /* Ultra-soft background (closer to white, no harsh alternation) */
  --wbs-bg-soft: #fdfdff;

  /* Hero fog (0..1): higher = more ‘smoke’ over hero illustrations */
  --wbs-hero-fog: .55;

  /* -----------------------------------------------------
     Global rhythm
     NOTE: blocks use padding-block: var(--wbs-section-pad)
     → the *visible* gap between blocks is roughly 2×.
     We keep the page “lemonade-clean”: airy but not huge.
     ----------------------------------------------------- */

  /* Half-gap per section (effective gap ≈ 2×) */
  --wbs-section-pad: clamp(30px, 4vh, 46px);

  /* Tighter end padding (Block 12 ↔ Footer) */
  --wbs-end-pad: clamp(18px, 3vh, 26px);

  /* Calm H2 */
  --wbs-type-h2: clamp(1.45rem, 2.0vw, 2.15rem);

  /* Softer shadows */
  --wbs-shadow-soft: 0 10px 26px var(--wbs-ink-a06);
  --wbs-shadow-stage: 0 26px 64px var(--wbs-slate-shadow-a14);
  --wbs-shadow-card: 0 16px 40px var(--wbs-slate-shadow-a10);

  /* -----------------------------------------------------
     Illustration profiles (3 profiles)
     - INK: hero-like line art / "main" illustrations
     - WASH: background illustrations (very soft presence)
     - GHOST: secondary / alpha illustrations (visible but not "poster")
     ----------------------------------------------------- */

  /* v98: tuned for "white → transparent" assets (no sticker look) */
  --illu-ink-opacity: .94;
  --illu-ink-contrast: 0.99;
  --illu-ink-brightness: 1.04;

  --illu-wash-opacity: .80;
  --illu-wash-contrast: 1.00;
  --illu-wash-brightness: 1.06;

  --illu-ghost-opacity: .82;
  --illu-ghost-contrast: 1.08;
  --illu-ghost-brightness: 1.04;

  /* Defaults (INK) */
  --wbs-illu-opacity: var(--illu-ink-opacity);
  --wbs-illu-contrast: var(--illu-ink-contrast);
  --wbs-illu-brightness: var(--illu-ink-brightness);
  --wbs-illu-bg: transparent;

}

/* Global: tighten the final gap (Block 12 → Footer) across ALL breakpoints */
#block12_v3{ padding-bottom: var(--wbs-end-pad) !important; }
#footer_v2_2{ padding-top: var(--wbs-end-pad) !important; }

/* Footer: reduce the perceived gap above the footer content (especially visible after Block 12) */
#footer_v2_2 .footer__topline{ margin-bottom: var(--wbs-space-4-5) !important; }
#footer_v2_2 .footer__brandWrap{ margin-top: var(--wbs-space-6) !important; }

/* Mid screens (e.g. 1100px wide): section rhythm should be tighter than desktop */
@media (max-width: 1200px){
  :root{
    --wbs-section-pad: clamp(26px, 3.6vh, 40px);
    --wbs-end-pad: clamp(16px, 2.8vh, 24px);
  }
}

/* Consistent focus ring */
:where(a, button, [role="button"], input, textarea, select):focus-visible{
  outline: 3px solid var(--wbs-magenta-a18);
  outline-offset: 4px;
}

/* Prevent accidental horizontal scroll on mobile (e.g. transforms) */
html, body{ overflow-x: hidden; }

/* ---------------------------------------------------------
   Section background rhythm (predictable alternation)
   --------------------------------------------------------- */

[data-hero].hero{
  /*
    Hero: keep the main illustration readable but not ‘poster-like’.
    This works together with hero-v21.18 fog overlay (see --wbs-hero-fog).
  */
  --wbs-illu-opacity: .92;
  --wbs-illu-contrast: 0.98;
  --wbs-illu-brightness: 1.05;
  --wbs-hero-fog: var(--wbs-hero-fog);

  background: var(--wbs-bg);
  border-bottom: none;
}

/* Micro 1 = continuation of Hero */
[data-block-id="m1.verlaess.v3"]{
  background: var(--wbs-bg) !important;
  border: none !important;
  box-shadow: none !important;
  padding: clamp(22px, 5.2vh, 44px) 0 !important;
}

[data-block-id="m1.verlaess.v3"] .mb-line{
  color: var(--wbs-ink-a70) !important;
  font-weight: 400 !important;
  font-size: clamp(1.22rem, 1.85vw, 1.56rem) !important;
}

/* Alternation: white / ultra-soft */
#block2_trust_v5{ background: var(--wbs-bg-soft) !important; }
#block4_service_premium_v1{ background: var(--wbs-bg) !important; }
[data-block-id="b5.proof.ultrarefined.v1.2"]{ background: var(--wbs-bg-soft) !important; }
#block6_v13{ --b6-bg: var(--wbs-bg); }
[data-block-id="m2.no-open-office.v2"]{ background: var(--wbs-bg-soft) !important; }
#block9{ background: var(--wbs-bg) !important; }
[data-faq-2l]{ background: var(--wbs-bg-soft) !important; }
#block12_v3{ background: var(--wbs-bg) !important; }

/* No section borders */
#block2_trust_v5,
#block4_service_premium_v1,
[data-block-id="b5.proof.ultrarefined.v1.2"],
#block6_v13,
[data-block-id="m2.no-open-office.v2"],
#block9,
[data-faq-2l],
#block12_v3{
  border: none !important;
}

/* ---------------------------------------------------------
   Cards: keep them borderless (shadow only)
   --------------------------------------------------------- */

#block4_service_premium_v1 .b3-step{ border: none !important; }
#block4_service_premium_v1 .b3-step:hover{ border: none !important; }

#block6_v13 .stage{ border: none !important; }
#block6_v13 .card{ border: none !important; }

/* ---------------------------------------------------------
   CTA style: Block 9 "Abschluss" — keep it secondary
   --------------------------------------------------------- */

#block9 .ctaRow .btn{
  background: transparent !important;
  color: var(--wbs-magenta-soft) !important;
  border: 1px solid var(--wbs-magenta-soft) !important;
  box-shadow: none !important;
}

#block9 .ctaRow .btn:hover{
  background: var(--wbs-magenta-soft-a06) !important;
  border-color: var(--wbs-magenta-soft) !important;
}

/* ---------------------------------------------------------
   Hero consistency
   --------------------------------------------------------- */

[data-hero]{
  /* Slide 2/3 titles should be closer to Slide 1 (visual unity) */
  --heroH2: clamp(1.62rem, 2.3vw, 2.42rem);
}

[data-hero] h2{
  font-family: var(--wbs-font-serif) !important;
  font-weight: 400 !important;
}

/* ---------------------------------------------------------
   Process steps: soften roman markers (match card icon "fog")
   --------------------------------------------------------- */

#block4_service_premium_v1 .b3-roman{
  border-color: var(--wbs-ink-a08) !important;
  background: var(--wbs-magenta-soft-a06) !important;
  box-shadow: inset 0 0 0 999px rgba(var(--wbs-white-rgb), .38) !important;
  color: var(--wbs-ink-a62) !important;
}

/* ---------------------------------------------------------
   Illustration profiles (standardized)
   --------------------------------------------------------- */

/* Profile assignment per block */
[data-hero]{
  --wbs-illu-opacity: var(--illu-ink-opacity);
  --wbs-illu-contrast: var(--illu-ink-contrast);
  --wbs-illu-brightness: var(--illu-ink-brightness);
  --wbs-illu-bg: var(--wbs-bg);
}

#block2_trust_v5{
  --wbs-illu-opacity: var(--illu-wash-opacity);
  --wbs-illu-contrast: var(--illu-wash-contrast);
  --wbs-illu-brightness: var(--illu-wash-brightness);
  --wbs-illu-bg: var(--wbs-bg-soft);
}

#block6_v13{
  --wbs-illu-opacity: var(--illu-ghost-opacity);
  --wbs-illu-contrast: var(--illu-ghost-contrast);
  --wbs-illu-brightness: var(--illu-ghost-brightness);
  --wbs-illu-bg: var(--wbs-bg);
}

#block12_v3{
  --wbs-illu-opacity: var(--illu-ghost-opacity);
  --wbs-illu-contrast: var(--illu-ghost-contrast);
  --wbs-illu-brightness: var(--illu-ghost-brightness);
  --wbs-illu-bg: var(--wbs-bg);
}

/* Apply profile to actual illustration surfaces */
[data-hero] .media{
  opacity: var(--wbs-illu-opacity);
  filter: contrast(var(--wbs-illu-contrast)) brightness(var(--wbs-illu-brightness));
}

#block2_trust_v5 .image-box::before,
#block12_v3 .image-placeholder::before{
  opacity: var(--wbs-illu-opacity) !important;
  filter: contrast(var(--wbs-illu-contrast)) brightness(var(--wbs-illu-brightness)) !important;

  /* v98: illustrations are exported with transparency; keep clean overlay */
}

/* ---------------------------------------------------------
   Mobile polish
   --------------------------------------------------------- */

@media (max-width: 720px){
  :root{
    --wbs-section-pad: clamp(20px, 3.2vh, 30px);
    --wbs-end-pad: clamp(14px, 2.4vh, 20px);
  }

  /* Hero: reduce side padding, gives copy + buttons more width */
  [data-hero] .slider-wrap{
    padding-inline: 0;
  }

  /* Tighten card paddings slightly */
  #block2_trust_v5 .card{ padding: 26px var(--wbs-space-5-5); }
  [data-block-id="b5.proof.ultrarefined.v1.2"] .b4-item{ padding: 24px var(--wbs-space-5-5); }
  #block6_v13 .stage-inner{ padding: var(--wbs-space-6); }

  /* Extra tightening for mobile footer area */
  #footer_v2_2 .footer__container{ padding-bottom: 28px !important; }
}

@media (max-width: 1399px){
  /* Hero: keep navigation visible, but move it below (next to dots) on <1400px.
     Prevents arrows from blending into illustrations (lemonade-clean). */

  [data-hero] .swiper-button-prev,
  [data-hero] .swiper-button-next{
    display: flex;
    top: auto;
    bottom: var(--wbs-space-4-5);

    width: 36px;
    height: 36px;
    border-radius: 999px;

    background: rgba(255,255,255,.92);
    border: 1px solid var(--wbs-magenta-a18);
    box-shadow: 0 10px 24px var(--wbs-ink-a06);
    backdrop-filter: blur(6px);

    color: var(--wbs-magenta) !important;
    opacity: 1;
  }

  [data-hero] .swiper-button-prev::after,
  [data-hero] .swiper-button-next::after{
    font-size: 16px;
    font-weight: 800;
  }

  /* Align arrows with the bullet row (same line) */
  [data-hero] .swiper-pagination{ bottom: var(--wbs-space-4-5); }

  [data-hero] .swiper-button-prev{
    left: 50%;
    right: auto;
    transform: translateX(calc(-100% - 56px));
  }

  [data-hero] .swiper-button-next{
    left: 50%;
    right: auto;
    transform: translateX(56px);
  }
}

@media (max-width: 920px){
  /* Avoid clipping on small screens: do NOT lock Swiper height */
  [data-hero] .swiper{
    height: auto !important;
    min-height: 520px;
  }
  [data-hero] .swiper-slide{ height: auto !important; }

  /* Extra bottom room for the navigation row (prevents overlap with the illustration) */
  [data-hero] .slide-grid{
    padding-bottom: 62px !important;
  }

  /* Slightly smaller media height → less scroll on mobile */
  [data-hero] .media{ min-height: 220px; }
}


@media (max-width: 360px){
  /* Very small screens: make buttons full-width (cleaner) */
  [data-hero] .actions{
    flex-direction: column;
    align-items: stretch;
    gap: .6em;
  }

  /* Give the CTA area a bit more room so it never “cuts” behind the nav */
  [data-hero] .slide-grid{ padding-bottom: 78px !important; }

  /* On 320px devices every pixel matters */
  [data-hero] .slider-wrap{ padding-inline: 0 !important; }

  [data-hero] .actions .btn{
    /* IMPORTANT: global .btn is inline-flex → text can overflow on 320px.
       Block layout makes wrapping deterministic on very small screens. */
    display: block;
    text-align: center;
    width: 100%;
    line-height: 1.15;
    padding: .82em 1.05em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Slightly smaller controls, but keep them usable */
  [data-hero] .swiper-button-prev,
  [data-hero] .swiper-button-next{
    width: 32px;
    height: 32px;
  }

  [data-hero] .swiper-button-prev{ transform: translateX(calc(-100% - 44px)); }
  [data-hero] .swiper-button-next{ transform: translateX(44px); }
}

@media (max-width: 340px){
  /* 320px edge-case: prevent any CTA clipping */
  [data-hero] .actions{ gap: .55em; }
  [data-hero] .actions .btn{
    font-size: .88rem;
    padding: .78em .95em;
  }

  [data-hero] .slide-grid{ padding-bottom: 86px !important; }

  [data-hero] .swiper-button-prev,
  [data-hero] .swiper-button-next{
    width: 30px;
    height: 30px;
  }

  [data-hero] .swiper-button-prev{ transform: translateX(calc(-100% - 40px)); }
  [data-hero] .swiper-button-next{ transform: translateX(40px); }
}


/* ---------------------------------------------------------
   HIDE ALL ARROWS (requested)
   - We keep the markup + JS intact (easy to re-enable later).
   - We disable pointer events to avoid invisible click targets.
   --------------------------------------------------------- */
:where(
  [data-hero] .swiper-button-prev,
  [data-hero] .swiper-button-next,
  #block6_v13 .navBtn
){
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   Translation note badge (non-DE languages)
   --------------------------------------------------------- */
.translationNote{
  width: 100% !important;
  box-sizing: border-box;
  padding: 10px 16px 0 !important;
  margin: 0 auto 8px !important;
  display: flex !important;
  justify-content: center !important;
}

.translationNote__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(980px, calc(100% - 32px));
  margin: 0 auto !important;
  padding: .42em .9em;
  font-family: var(--wbs-font-sans);
  font-size: .82rem;
  line-height: 1.25;
  color: var(--wbs-magenta);
  background: var(--wbs-magenta-a06);
  border: 1px solid var(--wbs-magenta-a18);
  border-radius: var(--wbs-radius-pill);
  text-align: center;
}

@media (max-width: 480px){
  .translationNote{ padding-top: 8px !important; margin-bottom: 6px !important; }
  .translationNote__badge{ font-size: .78rem; padding: .5em .85em; }
}
/* ---------------------------------------------------------
   Header brand polish (match Hero typography, non-clickable)
   --------------------------------------------------------- */
.siteHeader__brand{ cursor: default; }
.siteHeader__name{
  font-family: var(--wbs-font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------
   Header language switch
   - Summary shows ONLY a small flag (or "RU" on Russian page)
   - Full language names stay visible inside the dropdown menu
   --------------------------------------------------------- */
.langSwitch__label{ display:none; }
html[lang="ru"] .langSwitch__label{ display:inline; font-weight:600; }


/* ---------------------------------------------------------
   Active FAQ highlight (magenta underline)
   Note: avoid relying on text-decoration-color alone (Safari quirks).
   --------------------------------------------------------- */
[data-faq-2l] .inner-q[aria-expanded="true"] > span:first-child{
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
  text-decoration: none;
}

[data-faq-2l] .inner-q[aria-expanded="true"] > span:first-child::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--wbs-magenta);
  border-radius: 1px;
}


/* ---------------------------------------------------------
   Language flags (tiny, subtle)
   - Shown for DE / EN / UA / TR / VI / DARI
   - RU intentionally has NO flag
   --------------------------------------------------------- */
.langFlag{
  width: 14px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px var(--wbs-black-a06);
}

.langFlag--de{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMgMiI+PHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2ZmY2UwMCIvPjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjEuMzMzIiBmaWxsPSIjZGQwMDAwIi8+PHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMC42NjYiIGZpbGw9IiMwMDAiLz48L3N2Zz4="); }
.langFlag--en{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScxNicgdmlld0JveD0nMCAwIDI0IDE2Jz48Zz48cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTInIGhlaWdodD0nMTYnIGZpbGw9JyNmZmYnLz48cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMTInIGhlaWdodD0nMicgZmlsbD0nI2IyMjIzNCcvPjxyZWN0IHg9JzAnIHk9JzQnIHdpZHRoPScxMicgaGVpZ2h0PScyJyBmaWxsPScjYjIyMjM0Jy8+PHJlY3QgeD0nMCcgeT0nOCcgd2lkdGg9JzEyJyBoZWlnaHQ9JzInIGZpbGw9JyNiMjIyMzQnLz48cmVjdCB4PScwJyB5PScxMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzInIGZpbGw9JyNiMjIyMzQnLz48cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nNicgaGVpZ2h0PSc4JyBmaWxsPScjM2MzYjZlJy8+PGNpcmNsZSBjeD0nMicgY3k9JzInIHI9JzAuNicgZmlsbD0nI2ZmZicvPjxjaXJjbGUgY3g9JzQnIGN5PSczLjUnIHI9JzAuNicgZmlsbD0nI2ZmZicvPjxjaXJjbGUgY3g9JzInIGN5PSc1JyByPScwLjYnIGZpbGw9JyNmZmYnLz48Y2lyY2xlIGN4PSc0JyBjeT0nNi41JyByPScwLjYnIGZpbGw9JyNmZmYnLz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTIsMCknPjxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMicgaGVpZ2h0PScxNicgZmlsbD0nIzAxMjE2OScvPjxwYXRoIGQ9J00wLDAgTDEyLDggTTEyLDAgTDAsOCcgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzMnLz48cGF0aCBkPSdNMCwwIEwxMiw4IE0xMiwwIEwwLDgnIHN0cm9rZT0nI0M4MTAyRScgc3Ryb2tlLXdpZHRoPScxLjYnLz48cGF0aCBkPSdNNiwwIFYxNiBNMCw4IEgxMicgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzQnLz48cGF0aCBkPSdNNiwwIFYxNiBNMCw4IEgxMicgc3Ryb2tlPScjQzgxMDJFJyBzdHJva2Utd2lkdGg9JzIuNCcvPjwvZz48L3N2Zz4="); }
.langFlag--uk{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMgMiI+PHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2ZmZDUwMCIvPjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiMwMDViYmIiLz48L3N2Zz4="); }


.langFlag--tr{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Crect width='160' height='120' fill='%23E30A17'/%3E%3Ccircle cx='68' cy='60' r='28' fill='%23fff'/%3E%3Ccircle cx='76' cy='60' r='22' fill='%23E30A17'/%3E%3Cpolygon points='104,60 114,63 110,72 118,65 128,68 120,60 128,52 118,55 110,48 114,57' fill='%23fff'/%3E%3C/svg%3E");
}

.langFlag--vi{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Crect width='160' height='120' fill='%23DA251D'/%3E%3Cpolygon points='80,26 88,52 116,52 93,68 102,94 80,78 58,94 67,68 44,52 72,52' fill='%23FFDD00'/%3E%3C/svg%3E");
}

.langFlag--dari{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Crect width='180' height='120' fill='%23000000'/%3E%3Crect x='60' width='60' height='120' fill='%23D32011'/%3E%3Crect x='120' width='60' height='120' fill='%23007A36'/%3E%3C/svg%3E");
}
/* Menu layout: code + name */
.langSwitch__menu{ min-width: 190px; }
.langSwitch__menu a{
  display: flex;
  align-items: center;
  gap: 10px;
}
.langOpt__code{ display:none !important; }

.langOpt__code{
  width: 34px;
  font-weight: 600;
  letter-spacing: .02em;
}
.langOpt__name{
  font-weight: 500;
}