/* ============================================================
   Dubai Setup — dubaisetup.co
   Design tokens carried over from the Claude Design source.
   ============================================================ */

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

:root {
  --bg:          oklch(99% 0.003 255);
  --bg-alt:      oklch(97% 0.006 255);
  --bg-mid:      oklch(95% 0.010 255);
  --fg:          oklch(22% 0.038 260);
  --fg-muted:    oklch(42% 0.028 260);
  --fg-subtle:   oklch(58% 0.022 260);
  --accent:      #103C63;
  --accent-lt:   #6D9CC6;
  --accent-dim:  #0B2B49;
  --gold:        #F6D59F;
  --gold-dim:    #EFC98B;
  --border:      oklch(91% 0.007 255);
  --border-md:   oklch(83% 0.012 255);
  --sans:        'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif:       'Helvetica Neue', Helvetica, Arial, sans-serif;

  --nav-h:       68px;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm:   0 2px 12px oklch(0% 0 0 / 0.045);
  --shadow-md:   0 4px 24px rgba(16, 60, 99, 0.08);
  --shadow-lg:   0 24px 60px rgba(16, 60, 99, 0.16), 0 2px 8px rgba(16, 60, 99, 0.06);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
::selection { background: rgba(246, 213, 159, 0.55); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 300;
  background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 600; transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ── Layout primitives ─────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.section { padding: 96px 0; position: relative; }
.section--alt  { background: var(--bg-alt); }
.section--mid  { background: var(--bg-mid); }
.section--navy { background: var(--accent); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy .eyebrow { color: var(--gold); }
.section--navy .why-left p { color: oklch(88% 0.03 255); }
.section--navy .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.section--navy .btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: block;
}
.lede {
  font-size: 15px; color: var(--fg-muted); margin-top: 14px;
  font-weight: 400; max-width: 540px; line-height: 1.75;
}
.section--navy .lede { color: oklch(88% 0.03 255); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; }
h1 { font-size: clamp(40px, 5vw, 68px); }
h2 { font-size: clamp(32px, 3.5vw, 50px); }
h3 { font-size: clamp(20px, 2vw, 26px); }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 13px 26px; border: none; cursor: pointer; border-radius: 8px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dim); box-shadow: 0 10px 24px rgba(16, 60, 99, 0.24); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--fg); border: 1px solid var(--border-md); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); padding: 11px 22px; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--gold { background: var(--gold); color: var(--accent-dim); font-weight: 700; }
.btn--gold:hover { background: var(--gold-dim); box-shadow: 0 12px 30px rgba(246, 213, 159, 0.32); transform: translateY(-2px); }

/* Arrow nudge on link-style CTAs */
.arrow-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.arrow-link svg { width: 12px; height: 12px; transition: transform 0.25s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ── Navigation ────────────────────────────────────────────── */
.nav {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 100; height: var(--nav-h);
  width: min(1200px, calc(100% - 24px));
  display: flex; align-items: center;
  background: rgba(252, 253, 255, 0.94);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 24px rgba(16, 60, 99, 0.06);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease), top 0.3s var(--ease);
}
.nav.is-scrolled { box-shadow: 0 10px 40px rgba(16, 60, 99, 0.12); background: rgba(252, 253, 255, 0.98); }
.nav .container { width: 100%; }
.nav__inner { display: flex; align-items: center; gap: 24px; width: 100%; min-width: 0; }
.nav__logo { flex-shrink: 0; display: block; }
.nav__logo img { height: 32px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 24px; list-style: none; margin-left: 8px; flex-shrink: 0; }
.nav__links > li { position: static; }
.nav__links a { font-size: 13px; font-weight: 500; color: var(--fg-muted); transition: color 0.2s; white-space: nowrap; }
.nav__links a:hover { color: var(--fg); }
.nav__links a.active { color: var(--accent); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Mega menu */
.has-mega > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 26px 0; /* bridges the hover gap down to the panel */
}
.has-mega .chev { width: 12px; height: 12px; transition: transform 0.2s; }
.has-mega:hover .chev, .has-mega:focus-within .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: 68px; left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(960px, calc(100vw - 48px));
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 30px 34px 32px;
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 34px;
  text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.has-mega:hover .mega, .has-mega:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__links .mega a { white-space: normal; }
.mega__col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mega__col + .mega__col { border-left: 1px solid var(--border); padding-left: 34px; }
.mega__ttl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 14px;
}
.mega__list { list-style: none; width: 100%; }
.mega__list a {
  display: block; padding: 9px 0;
  font-size: 13.5px; font-weight: 500; color: var(--fg-muted); line-height: 1.4;
  border-bottom: 1px solid var(--border); transition: color 0.15s;
}
.mega__list li:last-child a { border-bottom: none; }
.mega__list a:hover { color: var(--accent); }
.mega__all { margin-top: 12px; }

.mega-card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.mega-card__thumb {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  position: relative; margin-bottom: 14px; background: var(--bg-mid);
}
.mega-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.mega-card:hover .mega-card__thumb img { transform: scale(1.06); }
.mega-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 60, 99, 0.28); transition: background 0.2s;
}
.mega-card:hover .mega-card__play { background: rgba(16, 60, 99, 0.42); }
.mega-card__play span {
  width: 42px; height: 42px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(16, 60, 99, 0.4);
}
.mega-card__play svg { width: 16px; height: 16px; color: #fff; margin-left: 2px; }
.mega-card__name { font-size: 15px; font-weight: 700; color: var(--fg); transition: color 0.15s; }
.mega-card:hover .mega-card__name { color: var(--accent); }
.mega-card__desc { font-size: 12.5px; color: var(--fg-muted); line-height: 1.6; margin: 6px 0 12px; }
.mega-card__link { margin-top: auto; }

.mega-intro { width: 100%; }
.mega-intro__ttl { font-size: 15px; font-weight: 700; color: var(--fg); margin-bottom: 6px; }
.mega-intro__desc { font-size: 12.5px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 14px; }
.mega-intro .btn { font-size: 11px; padding: 10px 16px; }
.mega-grp { width: 100%; }
.mega-intro + .mega-grp { margin-top: 26px; }
.mega-grp + .mega-grp { margin-top: 24px; }
.mega-grp__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mega-grp__hd svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.mega-grp__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.mega-grp__list { list-style: none; width: 100%; }
.mega-grp__list a { display: block; padding: 7px 0; font-size: 13.5px; font-weight: 500; color: var(--fg-muted); line-height: 1.4; transition: color 0.15s; }
.mega-grp__list a:hover { color: var(--accent); }

/* Social + language */
.nav__social { display: flex; align-items: center; gap: 2px; }
.nav__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; color: var(--fg-muted);
  transition: color 0.15s, background 0.15s;
}
.nav__social a:hover { color: var(--accent); background: rgba(16, 60, 99, 0.06); }
.nav__social svg { width: 15px; height: 15px; }

.langsel { position: relative; }
.langsel > button {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--fg-muted); background: none; border: 1px solid var(--border-md);
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.langsel > button:hover { color: var(--accent); border-color: var(--accent); }
.langsel .chev { width: 12px; height: 12px; transition: transform 0.2s; }
.langsel.is-open .chev { transform: rotate(180deg); }
.langsel__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 130px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 14px 40px rgba(16, 60, 99, 0.14); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  z-index: 210;
}
.langsel.is-open .langsel__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.langsel__menu a,
.langsel__menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--fg-muted); background: none; border: none; border-radius: 8px;
  padding: 8px 10px; cursor: pointer; text-align: left;
  transition: background 0.12s, color 0.12s;
}
.langsel__menu a:hover,
.langsel__menu button:hover { background: rgba(16, 60, 99, 0.06); color: var(--accent); }
.langsel__menu a.is-current,
.langsel__menu button.is-current { color: var(--accent); background: rgba(246, 213, 159, 0.30); }
.langsel__menu button span:first-child { flex: 1; }
.langsel__menu .code { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--fg-subtle); }

/* Burger + drawer */
.burger {
  display: none; width: 40px; height: 40px; border: 1px solid var(--border-md);
  background: none; border-radius: 8px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.burger span {
  display: block; width: 16px; height: 1.5px; background: var(--fg);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--bg);
  padding: calc(var(--nav-h) + 34px) 24px 48px;
  overflow-y: auto; opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__group + .drawer__group { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 26px; }
.drawer__ttl { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 12px; }
.drawer__list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.drawer__list a { display: block; padding: 10px 0; font-size: 16px; font-weight: 500; color: var(--fg-muted); }
.drawer__list a:hover { color: var(--accent); }
.drawer__cta { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  min-height: 100svh; background: var(--bg); display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.hero__orbs { position: absolute; inset: 0; pointer-events: none; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.hero__orb--a {
  width: 58vw; height: 58vw; max-width: 780px; max-height: 780px;
  right: -8%; top: -12%;
  background: radial-gradient(circle, oklch(88% 0.07 255 / 0.55) 0%, transparent 68%);
}
.hero__orb--b {
  width: 40vw; height: 40vw; max-width: 520px; max-height: 520px;
  left: -10%; bottom: -14%;
  background: radial-gradient(circle, rgba(246, 213, 159, 0.42) 0%, transparent 66%);
}
.hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
  position: relative; z-index: 1; padding: 116px 0 72px;
}
.hero__content { max-width: 560px; }
.hero__headline { color: var(--fg); margin-bottom: 22px; }
.hero__headline em {
  font-style: italic; color: var(--accent); position: relative;
  padding: 0 3px; display: inline-block;
}
.hero__headline em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.36em;
  background: rgba(246, 213, 159, 0.6); z-index: -1;
  transform-origin: left center; transform: scaleX(var(--hl, 1));
}
.hero__sub { font-size: 17px; color: var(--fg-muted); line-height: 1.72; margin-bottom: 36px; }
.hero__ctas { display: flex; align-items: center; gap: 14px; margin-bottom: 56px; flex-wrap: wrap; }
.hero__proof { display: flex; align-items: center; gap: 14px; padding-top: 28px; border-top: 1px solid var(--border); }
.hero__avatars { display: flex; }
.hero__av {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--bg);
  background: var(--bg-mid); margin-left: -9px; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; color: var(--fg-muted);
}
.hero__av:first-child { margin-left: 0; }
.hero__av { overflow: hidden; }
.hero__av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.hero__proof-text { font-size: 13px; color: var(--fg-subtle); line-height: 1.4; }
.hero__proof-text strong { display: block; color: var(--fg); font-weight: 600; }

.hero__visual { display: flex; flex-direction: column; gap: 12px; }
.stat-card {
  background: #fff; border: 1px solid var(--border); padding: 22px 26px;
  display: flex; align-items: center; gap: 18px; border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-card__icon {
  width: 42px; height: 42px; background: rgba(16, 60, 99, 0.08); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent);
}
.stat-card__icon svg { width: 22px; height: 22px; }
.stat-card__num { font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); line-height: 1; }
.stat-card__label { font-size: 12px; color: var(--fg-subtle); margin-top: 3px; }

.media-bar { background: #fff; border: 1px solid var(--border); padding: 18px 22px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.media-bar__label { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 14px; }
.media-bar__logos { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* max-height + max-width with both dimensions auto: the logo scales down
   uniformly to fit the box. A fixed height with a max-width would clamp the
   width alone and squash wide wordmarks like Ancova (5.3:1). */
.media-bar__logos img { max-height: 22px; max-width: 92px; width: auto; height: auto; opacity: 0.62; filter: grayscale(1); transition: opacity 0.25s, filter 0.25s; }
.media-bar__logos img:hover { opacity: 1; filter: none; }
.media-bar__logos img.is-tile, .partners__row img.is-tile { filter: none; opacity: 0.9; border-radius: 6px; }
.media-bar__logos img.is-tile { max-height: 24px; }
.partners__row img.is-tile { max-height: 30px; }
.partners__row img.is-tile:hover, .media-bar__logos img.is-tile:hover { opacity: 1; }

/* Scroll cue */
.hero__cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle);
  z-index: 1;
}
.hero__cue-line { width: 1px; height: 34px; background: linear-gradient(var(--border-md), transparent); position: relative; overflow: hidden; }
.hero__cue-line::after {
  content: ''; position: absolute; top: -34px; left: 0; width: 1px; height: 34px;
  background: linear-gradient(transparent, var(--accent));
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0% { transform: translateY(0); } 100% { transform: translateY(68px); } }

/* ── Media strip (marquee) ─────────────────────────────────── */
.media-strip {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 26px 0; background: #fff; overflow: hidden;
}
.media-strip__inner { display: flex; align-items: center; gap: 40px; }
.media-strip__label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); flex-shrink: 0; }
.marquee { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 44px; width: max-content; will-change: transform; }
.marquee__item { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--fg-subtle); letter-spacing: -0.01em; opacity: 0.72; white-space: nowrap; }

/* ── About ─────────────────────────────────────────────────── */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about__text h2 { margin-bottom: 18px; }
.about__text p { font-size: 16px; color: var(--fg-muted); line-height: 1.75; margin-bottom: 28px; }
.about__creds { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.about__cred { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--fg-muted); }
.about__cred-dot { width: 5px; height: 5px; background: var(--accent); flex-shrink: 0; }
.about__media { position: relative; }
.about__img { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--bg-mid); }
.about__img img { width: 100%; height: 118%; object-fit: cover; position: relative; top: -9%; will-change: transform; }
.about__badge {
  position: absolute; bottom: -18px; right: -18px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border); padding: 18px 22px;
  box-shadow: 0 12px 34px oklch(0% 0 0 / 0.12);
}
.about__badge-num { font-family: var(--serif); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.about__badge-text { font-size: 11px; color: var(--fg-subtle); margin-top: 4px; }

/* ── Services ──────────────────────────────────────────────── */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); margin-top: 52px;
  border-radius: 8px; overflow: hidden;
}
.svc-card {
  background: var(--bg-mid); padding: 36px 32px; position: relative;
  transition: background 0.3s var(--ease);
}
.svc-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.svc-card:hover { background: #fff; }
.svc-card:hover::before { transform: scaleY(1); }
.svc-card__icon { width: 36px; height: 36px; margin-bottom: 18px; color: var(--accent); transition: transform 0.4s var(--ease); }
.svc-card:hover .svc-card__icon { transform: translateY(-3px); }
.svc-card__icon svg { width: 28px; height: 28px; }
.svc-card__title { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 10px; line-height: 1.2; }
.svc-card__desc { font-size: 13px; color: var(--fg-muted); line-height: 1.65; }
.svc-card .arrow-link { margin-top: 18px; }

/* ── Audience ──────────────────────────────────────────────── */
.aud-tabs { display: flex; border: 1px solid var(--border); margin-bottom: 44px; overflow-x: auto; border-radius: 8px; position: relative; background: #fff; }
.aud-tabs::-webkit-scrollbar { display: none; }
.aud-tab {
  padding: 12px 22px; font-size: 13px; font-weight: 500; cursor: pointer;
  border: none; background: transparent; color: var(--fg-subtle);
  transition: color 0.25s var(--ease); white-space: nowrap;
  border-right: 1px solid var(--border); position: relative; z-index: 1; flex: 1;
}
.aud-tab:last-child { border-right: none; }
.aud-tab.is-active { color: var(--bg); }
.aud-tab:hover:not(.is-active) { color: var(--fg); }
.aud-tabs__thumb {
  position: absolute; top: 0; bottom: 0; left: 0; background: var(--fg);
  border-radius: 7px; z-index: 0; pointer-events: none;
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}
.aud-content { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.aud-panel {
  aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; position: relative;
  background: var(--accent); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 34px; color: #fff;
}
.aud-panel::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 10%, rgba(109, 156, 198, 0.55) 0%, transparent 62%),
    linear-gradient(160deg, var(--accent) 0%, var(--accent-dim) 100%);
}
.aud-panel__skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: url('../img/skyline.jpg') center bottom / cover;
  opacity: 0.22; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
  mask-image: linear-gradient(transparent, #000 55%);
}
.aud-panel__body { position: relative; z-index: 1; }
.aud-panel__num {
  font-family: var(--serif); font-size: 64px; font-weight: 700; letter-spacing: -0.04em;
  line-height: 1; color: rgba(246, 213, 159, 0.9); margin-bottom: 20px;
}
.aud-panel__label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.aud-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.aud-chip {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18);
}
.aud-text h3 { margin-bottom: 14px; }
.aud-text p { font-size: 15px; color: var(--fg-muted); line-height: 1.75; margin-bottom: 28px; }

/* ── Why us ────────────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; align-items: start; }
.why-left h2 { margin-bottom: 18px; }
.why-left p { font-size: 15px; line-height: 1.7; margin-bottom: 28px; }
.why-pillars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px; overflow: hidden;
}
.why-pillar { background: #fff; padding: 28px; transition: background 0.3s var(--ease); }
.why-pillar:hover { background: var(--bg-alt); }
.why-pillar__num { font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent-dim); line-height: 1; margin-bottom: 10px; }
.why-pillar__title { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 7px; }
.why-pillar__desc { font-size: 13px; color: var(--fg-muted); line-height: 1.6; }

/* ── Testimonials ──────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.testi-card {
  background: #fff; border: 1px solid var(--border); padding: 32px 28px;
  display: flex; flex-direction: column; border-radius: 8px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.testi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-md); }
.testi-stars { display: flex; gap: 2px; margin-bottom: 16px; color: oklch(72% 0.15 75); font-size: 13px; }
.testi-text { font-size: 14px; color: var(--fg-muted); line-height: 1.75; flex: 1; margin-bottom: 24px; }
.testi-author { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.testi-av { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-mid); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--fg-muted); flex-shrink: 0; }
.testi-av { overflow: hidden; }
.testi-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.testi-name { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--fg); line-height: 1.2; }
.testi-role { font-size: 11px; color: var(--fg-subtle); margin-top: 2px; }

/* ── Pricing ───────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; align-items: stretch; }
.price-card {
  border: 1px solid var(--border); display: flex; flex-direction: column; background: #fff;
  box-shadow: 0 2px 16px oklch(0% 0 0 / 0.05); position: relative; overflow: hidden; border-radius: 8px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(16, 60, 99, 0.14); }
.price-card--feat { border-color: var(--accent); box-shadow: 0 10px 40px rgba(16, 60, 99, 0.16); }
.price-card--feat::before {
  content: 'Beliebt'; position: absolute; top: 14px; right: -26px;
  background: var(--gold); color: var(--accent-dim); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 34px; transform: rotate(45deg); z-index: 1;
}
.price-card__hd { background: var(--bg-mid); padding: 32px 28px 24px; border-bottom: 1px solid var(--border); }
.price-card--feat .price-card__hd { background: oklch(94% 0.03 255); }
.price-card__name { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 10px; }
.price-card__price { display: flex; align-items: baseline; gap: 5px; }
.price-card__curr { font-size: 20px; font-weight: 400; color: var(--fg-muted); }
.price-card__amt { font-family: var(--serif); font-size: 52px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); line-height: 1; }
.price-card__period { font-size: 11px; color: var(--fg-subtle); margin-top: 5px; }
.price-card__body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.price-card__feats { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 28px; }
.price-card__feat { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--fg-muted); line-height: 1.4; }
.price-card__feat::before { content: ''; width: 4px; height: 4px; background: var(--accent-dim); flex-shrink: 0; margin-top: 6px; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-list { margin-top: 48px; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 22px 0; display: flex; justify-content: space-between; align-items: center;
  gap: 24px; cursor: pointer; font-family: var(--serif); font-size: 19px;
  font-weight: 700; letter-spacing: -0.01em; color: var(--fg); transition: color 0.2s;
}
.faq-q:hover { color: var(--accent); }
.faq-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--fg-subtle); transition: transform 0.35s var(--ease), color 0.2s; }
.faq-item.is-open .faq-q { color: var(--accent); }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-a { height: 0; overflow: hidden; }
.faq-a-inner { padding: 0 0 24px; font-size: 15px; color: var(--fg-muted); line-height: 1.75; max-width: 680px; }

/* ── Magazine ──────────────────────────────────────────────── */
.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
.art-card { display: flex; flex-direction: column; }
.art-card__img { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; margin-bottom: 16px; background: var(--bg-mid); }
.art-card__img--tile, .tile-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--accent) 0%, var(--accent-dim) 100%); color: var(--gold);
  overflow: hidden;
}
.tile-media--soft { background: linear-gradient(155deg, oklch(93% 0.02 255) 0%, oklch(88% 0.03 255) 100%); color: var(--accent); }
.tile-media--soft .art-tile__glow { opacity: 0.22; mix-blend-mode: multiply; }
.tile-media--soft .art-tile__tag { color: var(--fg-subtle); }
.art-tile__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 78% 8%, rgba(109, 156, 198, 0.6) 0%, transparent 62%),
    url('../img/skyline.jpg') center bottom / cover;
  opacity: 0.3; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(transparent 18%, #000 100%);
  mask-image: linear-gradient(transparent 18%, #000 100%);
}
.art-tile__ico { position: relative; width: 54px; height: 54px; opacity: 0.92; transition: transform 0.5s var(--ease); }
.art-card:hover .art-tile__ico,
.wart-card:hover .art-tile__ico { transform: translateY(-4px) scale(1.04); }
.art-tile__tag {
  position: absolute; left: 16px; bottom: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.art-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.art-card:hover .art-card__img img { transform: scale(1.05); }
.art-card__title { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); line-height: 1.3; margin-bottom: 10px; transition: color 0.2s; }
.art-card:hover .art-card__title { color: var(--accent); }
.art-card .arrow-link { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); width: 100%; }

/* ── Partners ──────────────────────────────────────────────── */
.partners { padding: 64px 0; border-top: 1px solid var(--border); }
.partners__label { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); }
/* eight logos: 52px gaps pushed the last one onto its own line */
/* Eight logos need logoSum + 7×gap. With max-width 128 the sum is 729 and a
   32px gap gives 953 — inside the 960px container a 1024px viewport yields, so
   the row holds one line down to 1024. Below that it wraps. */
.partners__row { display: flex; align-items: center; justify-content: center; gap: 26px 32px; flex-wrap: wrap; margin-top: 32px; }
.partners__row img { max-height: 38px; max-width: 128px; width: auto; height: auto; opacity: 0.55; filter: grayscale(1); transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), transform 0.3s var(--ease); }
.partners__row img:hover { opacity: 1; filter: none; transform: translateY(-2px); }
.partner-name { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--fg-subtle); letter-spacing: -0.01em; transition: color 0.2s; }
.partner-name:hover { color: var(--fg-muted); }

/* ── CTA band ──────────────────────────────────────────────── */
.cta-band { position: relative; padding: 96px 0; text-align: center; overflow: hidden; background: var(--accent); }
.cta-band__bg { position: absolute; inset: -12% 0; background: url('../img/skyline.jpg') center / cover; opacity: 0.5; will-change: transform; }
.cta-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(16, 60, 99, 0.72) 0%, rgba(11, 43, 73, 0.9) 100%); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 14px; font-size: clamp(28px, 3.4vw, 46px); }
.cta-band p { color: oklch(93% 0.04 255); font-size: 16px; margin-bottom: 32px; }
.cta-band__note { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-top: 22px; margin-bottom: 0; letter-spacing: 0.04em; }

/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--accent); color: oklch(93% 0.006 255); padding: 64px 0 36px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); margin-bottom: 28px; }
.footer__logo { margin-bottom: 16px; }
.footer__logo img { height: 34px; width: auto; }
.footer__tag { font-size: 13px; color: oklch(78% 0.03 255); line-height: 1.6; margin-bottom: 20px; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2); color: oklch(88% 0.02 255);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.footer__social a:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--gold); color: var(--gold); }
.footer__social svg { width: 15px; height: 15px; }
.footer__col-ttl { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(70% 0.04 255); margin-bottom: 14px; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer__links a { font-size: 13px; color: oklch(84% 0.02 255); transition: color 0.2s, transform 0.2s; display: inline-block; }
.footer__links a:hover { color: #fff; transform: translateX(3px); }
.footer__ci { font-size: 13px; color: oklch(84% 0.02 255); margin-bottom: 12px; }
.footer__ci strong { color: oklch(90% 0.02 255); font-weight: 600; display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.footer__ci a:hover { color: var(--gold); }
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer__copy { font-size: 11px; color: oklch(70% 0.03 255); }
.footer__legal { display: flex; gap: 18px; }
.footer__legal a,
.footer__legal-btn { font-size: 11px; color: oklch(70% 0.03 255); transition: color 0.2s; }
.footer__legal a:hover,
.footer__legal-btn:hover { color: var(--gold); }

/* ── Reveal states (GSAP takes over when available) ────────── */
.js .reveal, .js [data-anim], .js [data-hero], .js [data-hero-card] { opacity: 0; }
.js .reveal.is-in, .js [data-anim].is-in { opacity: 1; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .nav__social { display: none; }
}
@media (max-width: 1040px) {
  .nav__links { gap: 18px; }
  .about__grid { gap: 56px; }
  .why-grid { gap: 48px; }
  .container { padding: 0 32px; }
}
@media (max-width: 940px) {
  .nav__links, .langsel { display: none; }
  .burger { display: flex; }
  .mega { display: none; }
  .hero__grid, .about__grid, .aud-content, .why-grid { grid-template-columns: 1fr; }
  .hero__grid { padding: 118px 0 84px; gap: 40px; }
  .hero__visual { order: 2; }
  .hero__cue { display: none; }
  .svc-grid, .testi-grid, .price-grid, .mag-grid { grid-template-columns: 1fr; }
  .why-pillars { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 76px 0; }
  .about__media { max-width: 460px; }
  .aud-panel { aspect-ratio: 16 / 11; }
  .aud-tab { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .nav__actions > .btn { display: none; }
  .nav__logo img { height: 28px; }
  .nav__inner { gap: 12px; }
  .section { padding: 60px 0; }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .why-pillars, .footer__grid { grid-template-columns: 1fr; }
  .media-strip__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .marquee { width: 100%; }
  .partners__row { gap: 32px; }
  .about__badge { right: 12px; bottom: -14px; padding: 14px 18px; }
  .footer__bot { flex-direction: column; align-items: flex-start; }
}

/* ── Motion preferences ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal, .js [data-anim], .js [data-hero], .js [data-hero-card] { opacity: 1 !important; transform: none !important; }
}

/* ── Hero headline line masks (added by JS) ────────────────── */
.hero__headline .line, .page-head h1 .line { display: block; position: relative; z-index: 0; }
.js .line-mask { display: block; overflow: hidden; padding-bottom: 0.02em; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* ── Page header ───────────────────────────────────────────── */
.page-head { padding: 148px 0 64px; background: var(--bg); position: relative; overflow: hidden; }
.page-head__orbs { position: absolute; inset: 0; pointer-events: none; }
.page-head__inner { position: relative; z-index: 1; max-width: 760px; }
.page-head h1 { margin-bottom: 22px; color: var(--fg); }
.page-head h1 em {
  font-style: italic; color: var(--accent); position: relative;
  padding: 0 3px; display: inline-block; z-index: 0;
}
.page-head h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.36em;
  background: rgba(246, 213, 159, 0.6); z-index: -1;
  transform-origin: left center; transform: scaleX(var(--hl, 1));
}
.page-head__sub { font-size: 18px; color: var(--fg-muted); line-height: 1.7; max-width: 600px; }

.crumb {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 500; color: var(--fg-subtle); margin-bottom: 26px;
}
.crumb a { transition: color 0.2s; }
.crumb a:hover { color: var(--accent); }
.crumb span { color: var(--border-md); }

/* ── Layout ────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }

/* ── Form card ─────────────────────────────────────────────── */
.form-card {
  background: #fff; border: 1px solid var(--border); padding: 44px;
  border-radius: 8px; box-shadow: 0 2px 16px oklch(0% 0 0 / 0.04);
}
.form-card h3 { margin-bottom: 8px; }
.form-card__intro { font-size: 14px; color: var(--fg-muted); margin-bottom: 32px; line-height: 1.6; }
.form-card__intro .req { color: var(--accent); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; margin-bottom: 18px; }
.field label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 8px;
}
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 14px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border-md);
  padding: 12px 14px; width: 100%; border-radius: 8px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-subtle); opacity: 0.75; }
.field textarea { resize: vertical; min-height: 128px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(16, 60, 99, 0.15);
}
.field select {
  cursor: pointer; appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667089' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
/* Invalid state only after a submit attempt, never while typing */
.form-card.was-validated .field input:invalid,
.form-card.was-validated .field select:invalid,
.form-card.was-validated .field textarea:invalid {
  border-color: oklch(60% 0.17 25); background: oklch(98% 0.015 25);
}
.field__error { display: none; font-size: 11.5px; color: oklch(52% 0.18 25); margin-top: 6px; font-weight: 500; }
.form-card.was-validated .field:has(:invalid) .field__error { display: block; }

.form-consent { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 24px; }
.form-consent input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.form-consent label { font-size: 12px; color: var(--fg-subtle); line-height: 1.55; }
.form-consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.form-card.was-validated .form-consent:has(:invalid) label { color: oklch(52% 0.18 25); }
.form-card.was-validated .form-consent:has(:invalid) input { outline: 2px solid oklch(60% 0.17 25); outline-offset: 2px; }
.form-submit { width: 100%; }
.form-submit[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.form-note { font-size: 12px; color: var(--fg-subtle); margin-top: 16px; text-align: center; }
.form-note a { color: var(--accent); font-weight: 600; }

.form-status {
  display: none; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: 8px; margin-bottom: 24px;
  background: oklch(95% 0.03 150); border: 1px solid oklch(80% 0.06 150);
}
.form-status.is-shown { display: flex; }
.form-status svg { width: 22px; height: 22px; color: oklch(50% 0.12 150); flex-shrink: 0; margin-top: 1px; }
.form-status strong { display: block; font-size: 14px; color: oklch(35% 0.08 150); margin-bottom: 3px; }
.form-status p { font-size: 13px; color: oklch(42% 0.05 150); line-height: 1.5; }
.form-status p a { color: oklch(35% 0.09 150); font-weight: 600; text-decoration: underline; }
.form-status--error { background: oklch(97% 0.02 25); border-color: oklch(85% 0.06 25); }
.form-status--error svg { color: oklch(55% 0.17 25); }
.form-status--error strong { color: oklch(40% 0.13 25); }
.form-status--error p { color: oklch(46% 0.09 25); }

/* ── Info sidebar ──────────────────────────────────────────── */
.info-block {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  margin-bottom: 28px; border-radius: 8px; overflow: hidden;
}
.info-item { background: #fff; padding: 24px 26px; display: flex; gap: 18px; align-items: flex-start; transition: background 0.25s var(--ease); }
.info-item:hover { background: var(--bg-alt); }
.info-item__icon {
  width: 40px; height: 40px; background: rgba(16, 60, 99, 0.08); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent);
}
.info-item__icon svg { width: 20px; height: 20px; }
.info-item__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 6px; }
.info-item__val { font-size: 15px; color: var(--fg); line-height: 1.5; }
.info-item__val a { transition: color 0.2s; }
.info-item__val a:hover { color: var(--accent); }
.info-item__sub { font-size: 12px; color: var(--fg-subtle); margin-top: 3px; }

.hours-card { background: var(--accent); color: oklch(93% 0.006 255); padding: 28px 26px; border-radius: 8px; }
.hours-card__ttl { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 18px; color: var(--gold); }
.hours-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.hours-row:last-child { border-bottom: none; }
.hours-row span:first-child { color: oklch(78% 0.03 255); }
.hours-row span:last-child { color: oklch(92% 0.02 255); font-weight: 500; }
.hours-row__closed { color: oklch(66% 0.03 255) !important; }
.hours-card__note { font-size: 11.5px; color: oklch(74% 0.03 255); margin-top: 16px; line-height: 1.5; }

/* ── Map ───────────────────────────────────────────────────── */
.map {
  position: relative; aspect-ratio: 21 / 7; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-mid);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.35) contrast(1.02); }
.map__pill {
  position: absolute; left: 20px; bottom: 20px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px; box-shadow: var(--shadow-md);
  font-size: 12.5px; font-weight: 600; color: var(--fg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.map__pill:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16, 60, 99, 0.16); }
.map__pill svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* ── Channels ──────────────────────────────────────────────── */
.channels-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  margin-top: 52px; border-radius: 8px; overflow: hidden;
}
.channel-card { background: #fff; padding: 36px 32px; display: flex; flex-direction: column; position: relative; transition: background 0.3s var(--ease); }
.channel-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.channel-card:hover { background: var(--bg-alt); }
.channel-card:hover::before { transform: scaleY(1); }
.channel-card__icon { width: 38px; height: 38px; margin-bottom: 18px; color: var(--accent); transition: transform 0.4s var(--ease); }
.channel-card:hover .channel-card__icon { transform: translateY(-3px); }
.channel-card__icon svg { width: 28px; height: 28px; }
.channel-card__title { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 8px; }
.channel-card__desc { font-size: 13px; color: var(--fg-muted); line-height: 1.65; margin-bottom: 16px; flex: 1; }
.channel-card .arrow-link { margin-top: auto; }

/* ── Contact responsive ────────────────────────────────────── */
@media (max-width: 940px) {
  .page-head { padding: 124px 0 48px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .channels-grid { grid-template-columns: 1fr; }
  .map { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .form-card { padding: 26px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .map__pill { left: 12px; bottom: 12px; padding: 10px 13px; font-size: 12px; }
}

/* ============================================================
   WISSEN (knowledge hub)
   ============================================================ */
.art-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.art-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-dim); background: rgba(246, 213, 159, 0.45);
  padding: 5px 11px; border-radius: 8px;
}
.art-time { font-size: 12px; color: var(--fg-subtle); }

/* ── Featured article ──────────────────────────────────────── */
.feat-art {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; margin-bottom: 72px;
  transition: box-shadow 0.35s var(--ease);
}
.feat-art:hover { box-shadow: 0 18px 46px rgba(16, 60, 99, 0.13); }
.feat-art__img { min-height: 380px; position: relative; overflow: hidden; background: var(--bg-mid); }
.feat-art__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.feat-art:hover .feat-art__img img { transform: scale(1.04); }
.feat-art__body { padding: 46px 48px; display: flex; flex-direction: column; align-items: flex-start; }
.feat-art__body h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 16px 0 14px; }
.feat-art__ex { font-size: 15px; color: var(--fg-muted); line-height: 1.7; margin-bottom: 28px; }
.feat-art__body .btn { margin-top: auto; }

/* ── Filter bar ────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--fg-muted);
  background: #fff; border: 1px solid var(--border-md); border-radius: 8px;
  padding: 9px 18px; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip__count { opacity: 0.55; margin-left: 6px; font-variant-numeric: tabular-nums; }

.search { position: relative; flex: 0 1 300px; min-width: 220px; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--fg-subtle); pointer-events: none; }
.search input {
  width: 100%; font-family: var(--sans); font-size: 13px; color: var(--fg);
  background: #fff; border: 1px solid var(--border-md); border-radius: 8px;
  padding: 10px 14px 10px 38px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search input::placeholder { color: var(--fg-subtle); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16, 60, 99, 0.12); }

.no-results { display: none; padding: 56px 0; text-align: center; }
.no-results.is-shown { display: block; }
.no-results strong { display: block; font-family: var(--serif); font-size: 20px; color: var(--fg); margin-bottom: 8px; }
.no-results p { font-size: 14px; color: var(--fg-muted); }
.no-results button { margin-top: 18px; }

/* ── Article grid ──────────────────────────────────────────── */
.wart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wart-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s;
}
.wart-card:hover { box-shadow: 0 14px 34px rgba(16, 60, 99, 0.12); transform: translateY(-3px); border-color: var(--border-md); }
.wart-card[hidden] { display: none; }
.wart-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-mid); position: relative; }
.wart-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.wart-card:hover .wart-card__img img { transform: scale(1.05); }
.wart-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.wart-card__title { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); line-height: 1.3; margin: 14px 0 10px; transition: color 0.2s; }
.wart-card:hover .wart-card__title { color: var(--accent); }
.wart-card__ex { font-size: 13px; color: var(--fg-muted); line-height: 1.6; flex: 1; margin-bottom: 18px; }

/* Whole-card link overlay.
   .wart-card__link / .feat-art__link are empty anchors that stretch over the
   whole tile, so image, title and excerpt are all one click target. Without a
   rule they collapse to zero size and the card looks clickable but isn't. */
.wart-card, .feat-art { position: relative; }
.wart-card__link, .feat-art__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.wart-card__link:focus-visible, .feat-art__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Real controls inside a card must sit above the overlay to stay usable. */
.feat-art__body .btn { position: relative; z-index: 3; }

/* ── Community band ────────────────────────────────────────── */
.comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.comm-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.comm-card:hover { box-shadow: 0 16px 40px rgba(16, 60, 99, 0.12); transform: translateY(-3px); }
.comm-card__banner { aspect-ratio: 21 / 8; position: relative; overflow: hidden; background: var(--bg-mid); }
.comm-card__banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.comm-card:hover .comm-card__banner img { transform: scale(1.05); }
.comm-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16, 60, 99, 0.28); transition: background 0.25s; }
.comm-card:hover .comm-card__play { background: rgba(16, 60, 99, 0.4); }
.comm-card__play span {
  width: 58px; height: 58px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(16, 60, 99, 0.4); transition: transform 0.3s var(--ease);
}
.comm-card:hover .comm-card__play span { transform: scale(1.07); }
.comm-card__play svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }
.comm-card__body { padding: 32px 34px 36px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.comm-card__body h3 { margin: 12px 0 10px; }
.comm-card__desc { font-size: 14px; color: var(--fg-muted); line-height: 1.7; margin-bottom: 20px; }
.comm-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
.comm-feats li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--fg); }
.comm-feats svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.comm-card__body .btn { margin-top: auto; }

.sec-head--center { max-width: 620px; margin: 0 auto 52px; text-align: center; }
.sec-head--center p { font-size: 16px; color: var(--fg-muted); line-height: 1.7; margin-top: 14px; }

@media (max-width: 940px) {
  .feat-art { grid-template-columns: 1fr; margin-bottom: 48px; }
  .feat-art__img { min-height: 0; aspect-ratio: 16 / 9; }
  .feat-art__body { padding: 28px; }
  .wart-grid, .comm-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .search { flex: 1 1 auto; }
}

/* ============================================================
   ÜBER UNS (about)
   ============================================================ */
.story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center; }
.story-text h2 { margin-bottom: 20px; }
.story-text p { font-size: 16px; color: var(--fg-muted); line-height: 1.75; margin-bottom: 22px; }
.story-text p:last-child { margin-bottom: 0; }
.story-media { position: relative; }
.story-img { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--bg-mid); }
.story-img img { width: 100%; height: 118%; object-fit: cover; position: relative; top: -9%; will-change: transform; }
.story-badge {
  position: absolute; bottom: -18px; right: -18px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border); padding: 18px 22px;
  box-shadow: 0 12px 34px oklch(0% 0 0 / 0.12);
}
.story-badge__num { font-family: var(--serif); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.story-badge__text { font-size: 11px; color: var(--fg-subtle); margin-top: 4px; }

/* ── Stats band ────────────────────────────────────────────── */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px; overflow: hidden;
}
.stat-cell { background: var(--accent); padding: 40px 32px; text-align: center; }
.stat-cell__num { font-family: var(--serif); font-size: clamp(38px, 4vw, 54px); font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.stat-cell__plus { color: var(--gold); }
.stat-cell__label { font-size: 13px; color: oklch(82% 0.03 255); margin-top: 12px; }

/* ── Values ────────────────────────────────────────────────── */
.values-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; align-items: start; }
.values-left h2 { margin-bottom: 18px; }
.values-left p { font-size: 15px; color: var(--fg-muted); line-height: 1.7; margin-bottom: 28px; }
.values-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.value-pillar { background: #fff; padding: 30px 28px; transition: background 0.3s var(--ease); }
.value-pillar:hover { background: var(--bg-alt); }
.value-pillar__num { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--accent-dim); line-height: 1; margin-bottom: 12px; letter-spacing: -0.03em; }
.value-pillar__title { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 8px; }
.value-pillar__desc { font-size: 13px; color: var(--fg-muted); line-height: 1.65; }

/* ── Team ──────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 52px; }
.team-card { display: flex; flex-direction: column; }
.team-card__img { aspect-ratio: 3 / 4; margin-bottom: 16px; border-radius: 8px; overflow: hidden; position: relative; }
.team-card__mono {
  position: relative; font-family: var(--serif); font-size: 40px; font-weight: 700;
  letter-spacing: 0.02em; color: rgba(246, 213, 159, 0.9);
}
.team-card__role { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); line-height: 1.2; }
.team-card__area { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 4px; letter-spacing: 0.02em; }
.team-card__bio { font-size: 13px; color: var(--fg-muted); line-height: 1.6; margin-top: 10px; }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Founder block — the live site gives Clemens his own statement, so do we. */
.founder { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; }
.founder__img { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--bg-mid); }
.founder__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder__body h2 { margin: 10px 0 6px; }
.founder__role { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 18px; }
.founder__body p { font-size: 15.5px; color: var(--fg-muted); line-height: 1.8; margin: 0 0 16px; max-width: 62ch; }
.founder__body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .founder { grid-template-columns: 1fr; gap: 28px; }
  .founder__img { max-width: 260px; }
}

/* ── Process timeline ──────────────────────────────────────── */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 52px; border-radius: 8px; overflow: hidden; }
.tl-step { background: var(--bg-mid); padding: 34px 30px; position: relative; transition: background 0.3s var(--ease); }
.tl-step::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.tl-step:hover { background: #fff; }
.tl-step:hover::before { transform: scaleY(1); }
.tl-step__num { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 16px; }
.tl-step__title { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 10px; line-height: 1.2; }
.tl-step__desc { font-size: 13px; color: var(--fg-muted); line-height: 1.65; }

@media (max-width: 940px) {
  .story-grid, .values-grid { grid-template-columns: 1fr; gap: 44px; }
  .story-media { max-width: 460px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .values-pillars { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .values-pillars, .team-grid, .stats-row { grid-template-columns: 1fr; }
  .story-badge { right: 12px; bottom: -14px; padding: 14px 18px; }
  .feat-art__body { padding: 24px 20px; }
}

/* Screen-reader-only live region */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Tile media — declared last so it wins over the per-component
   card backgrounds (.wart-card__img, .team-card__img, …) that
   share the same specificity.
   ============================================================ */
.tile-media {
  background: linear-gradient(155deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: var(--gold);
}
.tile-media .art-tile__glow { opacity: 0.2; }
.tile-media .art-tile__ico { width: 46px; height: 46px; opacity: 1; }
.tile-media .art-tile__tag { color: rgba(255, 255, 255, 0.66); }
.wart-card__img.tile-media .art-tile__ico { width: 42px; height: 42px; }
.team-card__img.tile-media .art-tile__glow { opacity: 0.16; }
.comm-card__banner.tile-media .art-tile__ico { width: 40px; height: 40px; }

/* Keep the filter chips inside the viewport when they scroll horizontally */
@media (max-width: 940px) {
  .filter-bar > .chips { min-width: 0; max-width: 100%; }
}

/* ============================================================
   ARTICLE (Wissen detail pages)
   ============================================================ */
#progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold); width: 0; z-index: 300; will-change: width; }

.art-head { padding: 150px 0 56px; background: var(--bg); position: relative; overflow: hidden; }
.art-head__orbs { position: absolute; inset: 0; pointer-events: none; }
.art-head > .container { position: relative; z-index: 1; }
.art-head .crumb { margin-bottom: 36px; }
.art-meta-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.art-head h1 { max-width: 860px; margin-bottom: 18px; }
.art-head h1 em {
  font-style: italic; color: var(--accent); position: relative; z-index: 0;
  padding: 0 3px; display: inline-block;
}
.art-head h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.34em;
  background: rgba(246, 213, 159, 0.6); z-index: -1;
  transform-origin: left center; transform: scaleX(var(--hl, 1));
}
.art-lead { font-size: 17px; color: var(--fg-muted); line-height: 1.7; max-width: 760px; }

.art-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.art-byline__ava { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-mid); }
.art-byline__ava img { width: 100%; height: 100%; object-fit: cover; }
.art-byline__name { font-size: 14px; font-weight: 700; color: var(--fg); }
.art-byline__name a { transition: color 0.2s; }
.art-byline__name a:hover { color: var(--accent); }
.art-byline__sub { font-size: 12px; color: var(--fg-subtle); margin-top: 2px; }

.art-hero-img { aspect-ratio: 21 / 9; margin-top: 44px; border-radius: 10px; overflow: hidden; background: var(--bg-mid); }
.art-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.art-hero-img--contain { background: var(--accent-dim); display: flex; align-items: center; justify-content: center; }
.art-hero-img--contain img { height: 74%; width: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }

/* ── Layout + TOC ──────────────────────────────────────────── */
.art-layout { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
.toc { position: sticky; top: 100px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 22px 24px; }
.toc__ttl { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.toc a { display: block; padding: 7px 0; font-size: 13px; font-weight: 500; color: var(--fg-muted); border-bottom: 1px solid var(--border); transition: color 0.15s, padding-left 0.2s var(--ease); }
.toc a:last-child { border-bottom: none; padding-bottom: 0; }
.toc a:hover { color: var(--accent); }
.toc a.is-current { color: var(--accent); font-weight: 700; padding-left: 6px; }

/* ── Body copy ─────────────────────────────────────────────── */
.art-body { max-width: 720px; min-width: 0; }
.art-body section { scroll-margin-top: 96px; }
.art-body h2 { font-size: clamp(24px, 2.6vw, 28px); margin: 52px 0 18px; }
.art-body section:first-child h2 { margin-top: 0; }
.art-body h3 { font-size: 20px; margin: 34px 0 12px; }
.art-body h4 { font-size: 16px; margin: 26px 0 10px; color: var(--fg); font-family: var(--serif); font-weight: 700; }
.art-body p { font-size: 15.5px; color: var(--fg-muted); line-height: 1.8; margin: 0 0 18px; text-wrap: pretty; }
.art-body strong { color: var(--fg); }
/* .rel-card ausgenommen: die Karten unter «Weitere Artikel» liegen im
   Artikelkörper, sind aber Kacheln und keine Fließtextlinks — unterstrichen
   sahen Titel und «Weiterlesen» aus wie ein Verweis mitten im Satz. */
.art-body a:not(.btn):not(.arrow-link):not(.rel-card) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.2s; }
.art-body a:not(.btn):not(.arrow-link):hover { color: var(--accent-dim); }
.art-body ul.plain { margin: 0 0 18px; padding-left: 20px; }
.art-body ul.plain li { font-size: 15px; color: var(--fg-muted); line-height: 1.7; margin: 5px 0; }
.art-body ul.checks { list-style: none; margin: 0 0 20px; padding: 0; }
.art-body ul.checks li { display: flex; gap: 10px; padding: 8px 0; font-size: 15px; color: var(--fg-muted); line-height: 1.65; }
.art-body ul.checks svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }

.art-img { margin: 28px 0; }
.art-img img { width: 100%; height: auto; display: block; border-radius: 10px; }
.art-img figcaption { font-size: 11.5px; color: var(--fg-subtle); margin-top: 9px; }
.art-img figcaption a { color: var(--accent); }
.img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.img-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }

/* ── Key facts / callouts ──────────────────────────────────── */
.kf { background: rgba(246, 213, 159, 0.24); border: 1px solid rgba(230, 190, 130, 0.7); border-radius: 10px; padding: 24px 28px; margin: 30px 0; }
.kf__ttl { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a6119; margin-bottom: 12px; }
.kf__ttl svg { width: 16px; height: 16px; }
.kf ul { margin: 0; padding: 0; }
.kf li { font-size: 14.5px; color: var(--fg-muted); line-height: 1.7; padding: 7px 0; border-bottom: 1px dashed rgba(230, 190, 130, 0.7); list-style: none; }
.kf li:last-child { border-bottom: none; padding-bottom: 0; }
.kf a { color: var(--accent-dim); }

.box { border-radius: 8px; padding: 20px 24px; margin: 26px 0; }
.box__lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; display: block; }
.box p { margin: 0; font-size: 13px; line-height: 1.7; }
.box--tip { background: rgba(246, 213, 159, 0.28); border: 1px solid rgba(230, 190, 130, 0.7); }
.box--tip .box__lbl { color: #8a6119; }
.box--info { background: rgba(16, 60, 99, 0.05); border: 1px solid var(--border-md); }
.box--info .box__lbl { color: var(--accent); }
.box--warn { background: rgba(190, 70, 45, 0.06); border: 1px solid rgba(190, 70, 45, 0.28); }
.box--warn .box__lbl { color: #a8412a; }

/* ── Tables ────────────────────────────────────────────────── */
.at-wrap { overflow-x: auto; margin: 8px 0 20px; -webkit-overflow-scrolling: touch; }
.at { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 13px; background: #fff; min-width: 460px; }
.at th { background: rgba(16, 60, 99, 0.06); color: var(--fg); font-weight: 700; text-align: left; padding: 12px 14px; font-size: 12px; line-height: 1.4; }
.at td { padding: 12px 14px; border-top: 1px solid var(--border); color: var(--fg-muted); line-height: 1.55; vertical-align: top; }
.at td:first-child { color: var(--fg); font-weight: 600; }
.at small { display: block; color: var(--fg-subtle); font-size: 11px; margin-top: 2px; }
.at tr.sum td { background: rgba(246, 213, 159, 0.28); color: var(--fg); font-weight: 700; }
.at .cost-opt { display: inline-block; margin-left: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); border: 1px solid var(--border-md); border-radius: 99px; padding: 2px 7px; vertical-align: middle; }
.tbl-ttl { font-size: 15px; font-weight: 700; color: var(--fg); margin: 28px 0 8px; font-family: var(--serif); }
.tbl-note { font-size: 12.5px; color: var(--fg-subtle); line-height: 1.65; margin: 0 0 22px; }

/* ── FAQ accordions ────────────────────────────────────────── */
details.faq { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0 22px; margin-bottom: 12px; transition: border-color 0.2s; }
details.faq[open] { border-color: var(--border-md); }
details.faq summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--fg); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-size: 20px; color: var(--accent); font-weight: 400; flex-shrink: 0; }
details.faq[open] summary::after { content: '–'; }
details.faq summary:hover { color: var(--accent); }
details.faq p { font-size: 14px; padding-bottom: 18px; margin: 0; }

/* ── Author + lead capture + related ───────────────────────── */
.author-box { display: flex; gap: 20px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 26px 28px; margin-top: 52px; align-items: center; flex-wrap: wrap; }
.author-box__ava { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-mid); }
.author-box__ava img { width: 100%; height: 100%; object-fit: cover; }
.author-box__body { flex: 1; min-width: 220px; }
.author-box__name { font-size: 16px; font-weight: 700; color: var(--fg); font-family: var(--serif); }
.author-box__bio { font-size: 13px; color: var(--fg-muted); line-height: 1.6; margin-top: 4px; }

.lead-card { display: grid; grid-template-columns: 1fr 210px; gap: 30px; background: var(--accent-dim); border-radius: 12px; padding: 32px 34px; margin-top: 28px; align-items: center; }
.lead-card h3 { color: #fff; font-size: 22px; margin: 0 0 10px; }
.lead-card p { color: oklch(85% 0.03 255); font-size: 14px; line-height: 1.7; margin: 0 0 18px; }
.lead-form { display: flex; gap: 10px; flex-wrap: wrap; }
.lead-form input { flex: 1; min-width: 150px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 8px; padding: 12px 14px; color: #fff; font-size: 13px; font-family: inherit; }
.lead-form input::placeholder { color: oklch(75% 0.03 255); }
.lead-form input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.14); }
.lead-card__img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.4)); }
.lead-note { font-size: 11.5px; color: oklch(78% 0.03 255); margin: 12px 0 0; }
.lead-note a { color: var(--gold); }

.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rel-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.25s; }
.rel-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 60, 99, 0.1); }
.rel-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-mid); position: relative; display: flex; align-items: center; justify-content: center; }
.rel-card__media img { width: 100%; height: 100%; object-fit: cover; }
.rel-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rel-card__name { font-size: 13.5px; font-weight: 700; color: var(--fg); line-height: 1.45; flex: 1; }
.rel-card:hover .rel-card__name { color: var(--accent); }
.rel-card__more { font-size: 12px; font-weight: 700; color: var(--accent); }

@media (max-width: 940px) {
  .art-head { padding: 124px 0 44px; }
  .art-layout { grid-template-columns: 1fr; gap: 34px; }
  .toc { position: static; }
  .rel-grid { grid-template-columns: 1fr 1fr; }
  .art-hero-img { aspect-ratio: 16 / 9; margin-top: 32px; }
}
@media (max-width: 720px) {
  .lead-card { grid-template-columns: 1fr; padding: 26px 22px; }
  .lead-card__img { display: none; }
  .rel-grid { grid-template-columns: 1fr; }
  .img-grid { grid-template-columns: repeat(2, 1fr); }
  .author-box { padding: 22px; }
}

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.ov-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ov-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 24px 22px 22px; display: flex; flex-direction: column; align-items: flex-start;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s;
}
.ov-card:hover { border-color: var(--accent); box-shadow: 0 12px 32px rgba(16, 60, 99, 0.12); transform: translateY(-3px); }
.ov-card__icon {
  width: 42px; height: 42px; background: rgba(16, 60, 99, 0.08); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 16px;
  transition: transform 0.35s var(--ease);
}
.ov-card:hover .ov-card__icon { transform: translateY(-2px); }
.ov-card__icon svg { width: 20px; height: 20px; }
.ov-card__ttl { font-size: 15px; font-weight: 700; color: var(--fg); line-height: 1.25; font-family: var(--serif); }
.ov-card__count { font-size: 12px; color: var(--fg-subtle); margin: 5px 0 18px; }
.ov-card .arrow-link { margin-top: auto; }
.ov-card .arrow-link svg { transition: transform 0.25s var(--ease); }
.ov-card:hover .arrow-link svg { transform: translateY(3px); }

.svcd { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }
.svcd__head { position: sticky; top: 104px; }
.svcd__head h2 { margin: 0 0 14px; }
.svcd__head p { font-size: 15px; color: var(--fg-muted); line-height: 1.7; margin-bottom: 24px; }
.section--alt .svcd__head p { color: var(--fg-muted); }
.svcd__extra { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 18px; }
.svcd__extra svg { width: 13px; height: 13px; transition: transform 0.25s var(--ease); }
.svcd__extra:hover { text-decoration: underline; text-underline-offset: 3px; }
.svcd__extra:hover svg { transform: translateX(3px); }

.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sub-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 26px;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s;
}
.sub-card:hover { border-color: var(--accent); box-shadow: 0 12px 32px rgba(16, 60, 99, 0.1); transform: translateY(-3px); }
.sub-card__ttl { font-size: 17px; font-weight: 700; color: var(--fg); line-height: 1.3; font-family: var(--serif); transition: color 0.2s; }
.sub-card:hover .sub-card__ttl { color: var(--accent); }
.sub-card__desc { font-size: 13px; color: var(--fg-muted); line-height: 1.65; flex: 1; margin: 9px 0 20px; }

@media (max-width: 1060px) { .ov-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
@media (max-width: 940px) {
  .svcd { grid-template-columns: 1fr; gap: 32px; }
  .svcd__head { position: static; }
  .sub-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FREEZONE vs MAINLAND — comparison graphic
   ============================================================ */
.vs { --col-fz: #FBF4E7; --col-ml: #EEF2F6; --line: #E2DAD1; --cream: #F4EDE7;
  background: var(--cream); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(16, 60, 99, 0.16); margin-top: 8px;
}
.vs__mast { padding: 44px 48px 34px; }
.vs__mast .eyebrow::before {
  content: ''; display: inline-block; width: 26px; height: 2px;
  background: var(--gold-dim); vertical-align: middle; margin-right: 12px; margin-bottom: 3px;
}
.vs__mast h2 { font-size: clamp(34px, 4.6vw, 56px); color: var(--accent); margin-bottom: 16px; }
.vs__mast h2 em { font-style: normal; color: var(--gold-dim); }
.vs__mast p { font-size: 16.5px; line-height: 1.55; color: var(--fg-muted); max-width: 720px; }

.vs__grid { display: grid; grid-template-columns: 1.04fr 1fr 1fr; background: var(--line); gap: 1px; border-top: 1px solid var(--line); }
.vs__cell { background: var(--cream); padding: 18px 26px; display: flex; flex-direction: column; justify-content: center; }
.vs__grid .col-fz { background: var(--col-fz); }
.vs__grid .col-ml { background: var(--col-ml); }

.vs__hc { padding: 26px; }
.vs__hc--label { background: var(--cream); display: flex; flex-direction: column; justify-content: flex-end; }
.vs__hc--label .k { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); }
.vs__hc--fz { background: var(--gold); }
.vs__hc--ml { background: var(--accent); }
.vs__hc__icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.vs__hc--fz .vs__hc__icon { background: rgba(16, 60, 99, 0.1); color: var(--accent); }
.vs__hc--ml .vs__hc__icon { background: rgba(246, 213, 159, 0.18); color: var(--gold); }
.vs__hc__icon svg { width: 24px; height: 24px; }
.vs__hc__name { font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; line-height: 1.1; font-family: var(--serif); letter-spacing: -0.01em; }
.vs__hc--fz .vs__hc__name { color: var(--accent); }
.vs__hc--ml .vs__hc__name { color: #fff; }
.vs__hc__sub { font-size: 13px; margin-top: 5px; font-weight: 500; }
.vs__hc--fz .vs__hc__sub { color: var(--accent); opacity: 0.8; }
.vs__hc--ml .vs__hc__sub { color: var(--gold); }
.vs__hc__price { margin-top: 16px; padding-top: 14px; border-top: 1px solid; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vs__hc--fz .vs__hc__price { border-color: rgba(16, 60, 99, 0.18); }
.vs__hc--ml .vs__hc__price { border-color: rgba(255, 255, 255, 0.18); }
.vs__hc__price b { font-size: clamp(19px, 2.1vw, 26px); font-weight: 700; font-family: var(--serif); }
.vs__hc--fz .vs__hc__price b { color: var(--accent); }
.vs__hc--ml .vs__hc__price b { color: #fff; }
.vs__hc__price span { font-size: 11.5px; font-weight: 500; }
.vs__hc--fz .vs__hc__price span { color: var(--accent); opacity: 0.75; }
.vs__hc--ml .vs__hc__price span { color: rgba(246, 213, 159, 0.85); }

.vs__crit .lbl { font-size: 15px; font-weight: 700; color: var(--accent); font-family: var(--serif); }
.vs__crit .hint { font-size: 12px; color: var(--fg-subtle); margin-top: 3px; }
.vs__val { font-size: 14px; line-height: 1.45; color: var(--fg); font-weight: 500; display: flex; align-items: flex-start; gap: 10px; }
.vs__val .mk { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.vs__val .mk svg { width: 12px; height: 12px; }
.mk--yes { background: rgba(46, 125, 90, 0.14); color: #2E7D5A; }
.mk--no  { background: rgba(180, 90, 70, 0.13); color: #B45A46; }
.mk--neu { background: rgba(92, 107, 121, 0.12); color: var(--fg-subtle); }
.vs__val .num { font-weight: 700; }

.vs__fazit { background: var(--accent); color: #fff; padding: 40px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.vs__fazit h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.vs__fazit h3 .dot { width: 7px; height: 7px; background: var(--gold); border-radius: 50%; }
.vs__fazit p { font-size: 15.5px; line-height: 1.55; color: #D8E2EC; }
.vs__fazit p b { color: #fff; font-weight: 700; }
.vs__foot { background: var(--accent-dim); color: rgba(255, 255, 255, 0.62); padding: 18px 48px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 24px; flex-wrap: wrap; }
.vs__foot .site { font-weight: 700; color: var(--gold); white-space: nowrap; }

@media (max-width: 860px) {
  .vs__mast, .vs__fazit, .vs__foot { padding-left: 24px; padding-right: 24px; }
  .vs__fazit { grid-template-columns: 1fr; gap: 26px; }
  .vs__grid { grid-template-columns: 1fr; gap: 0; border-top: none; }
  .vs__cell, .vs__hc { border-top: 1px solid var(--line); }
  .vs__hc--label { display: none; }
  .vs__crit { background: var(--cream); padding-bottom: 4px; }
  .vs__cell.col-fz::before, .vs__cell.col-ml::before {
    content: attr(data-col); display: block; font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 7px;
  }
}

/* Booking row inside the contact info block */
.info-item--cta { position: relative; text-decoration: none; }
.info-item--cta:hover { background: rgba(16, 60, 99, 0.04); }
.info-item--cta .info-item__icon { background: var(--accent); color: var(--gold); }
.info-item--cta .info-item__val { color: var(--accent); font-weight: 600; }
.info-item__go {
  margin-left: auto; align-self: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 60, 99, 0.07); color: var(--accent);
  transition: transform 0.25s var(--ease), background 0.25s;
}
.info-item__go svg { width: 14px; height: 14px; }
.info-item--cta:hover .info-item__go { background: var(--accent); color: #fff; transform: translateX(3px); }

/* ============================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ============================================================ */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(22px, 2.4vw, 26px); margin: 48px 0 16px; }
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 15.5px; color: var(--fg-muted); line-height: 1.8; margin: 0 0 18px; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent-dim); }

.legal-dl { display: grid; grid-template-columns: 210px 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 0 0 26px; }
.legal-dl dt { background: var(--bg-alt); padding: 15px 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); display: flex; align-items: center; }
.legal-dl dd { background: #fff; padding: 15px 18px; font-size: 15px; color: var(--fg); line-height: 1.6; margin: 0; }
.legal-dl dd a { color: var(--fg); text-decoration: none; }
.legal-dl dd a:hover { color: var(--accent); }
.legal-dl dd .sub { display: block; font-size: 12px; color: var(--fg-subtle); margin-top: 3px; }

.legal-note { background: rgba(16, 60, 99, 0.05); border: 1px solid var(--border-md); border-radius: 8px; padding: 20px 24px; margin: 26px 0; }
.legal-note__lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; display: block; }
.legal-note p { margin: 0; font-size: 13.5px; line-height: 1.7; }

@media (max-width: 640px) {
  .legal-dl { grid-template-columns: 1fr; }
  .legal-dl dt { padding-bottom: 4px; }
  .legal-dl dd { padding-top: 8px; }
}

/* Legal link with no page behind it yet — visible, but not a promise of navigation */


/* ============================================================
   AUTHOR PAGE (/autor/…) — navy hero band, overlapping portrait,
   sticky sidebar beside a two-column article grid
   ============================================================ */
.ahero { background: var(--accent); color: #fff; padding: 150px 0 0; position: relative; overflow: hidden; }
.ahero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 90% 0%, rgba(246, 213, 159, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 0% 100%, rgba(255, 255, 255, 0.07) 0%, transparent 60%);
}
.ahero .container { position: relative; z-index: 1; }
.ahero .crumb { margin-bottom: 44px; color: oklch(78% 0.03 255); }
.ahero .crumb a { color: oklch(88% 0.02 255); }
.ahero .crumb a:hover { color: var(--gold); }
.ahero .crumb span { color: oklch(60% 0.04 255); }
.ahero .eyebrow { color: var(--gold); }
.ahero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: end; }
.ahero-copy { padding-bottom: 64px; }
.ahero h1 { color: #fff; margin-bottom: 10px; }
.ahero h1 em { font-style: italic; color: var(--gold); }
.ahero-role { font-size: 14px; font-weight: 700; color: oklch(84% 0.04 255); letter-spacing: 0.02em; margin-bottom: 24px; }
.ahero-copy p { font-size: 16px; color: oklch(88% 0.03 255); line-height: 1.75; max-width: 560px; margin: 0 0 18px; }

.ahero-stats { display: flex; margin-top: 34px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; overflow: hidden; max-width: 560px; }
.ahero-stat { flex: 1; padding: 18px 22px; }
.ahero-stat + .ahero-stat { border-left: 1px solid rgba(255, 255, 255, 0.22); }
.ahero-stat__num { font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.ahero-stat__num span { color: var(--gold); }
.ahero-stat__lbl { font-size: 11px; color: oklch(80% 0.03 255); margin-top: 6px; }

/* the portrait hangs down into the section below */
.ahero-photo {
  position: relative; z-index: 2; margin-bottom: -72px; aspect-ratio: 3 / 4;
  border-radius: 10px; overflow: hidden; background: var(--accent-dim);
  box-shadow: 0 24px 64px rgba(4, 18, 33, 0.35); border: 1px solid rgba(255, 255, 255, 0.25);
}
.ahero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

.abody { padding: 140px 0 100px; background: var(--bg-alt); }
.abody-grid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.aside-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 26px; }
.aside-card__ttl { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }

.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li { display: flex; gap: 10px; padding: 10px 0; font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; border-bottom: 1px solid var(--border); }
.svc-list li:first-child { padding-top: 0; }
.svc-list li:last-child { border-bottom: none; padding-bottom: 0; }
.svc-list__check { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }

.achan { display: flex; flex-direction: column; }
.achan a { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 13.5px; font-weight: 600; color: var(--fg); border-bottom: 1px solid var(--border); transition: color 0.15s; }
.achan a:first-child { padding-top: 0; }
.achan a:last-child { border-bottom: none; padding-bottom: 0; }
.achan a:hover { color: var(--accent); }
.achan svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.achan a span { flex: 1; }
.achan .arr { color: var(--fg-subtle); width: 13px; height: 13px; }

.aside-cta { background: var(--accent); border-color: var(--accent); }
.aside-cta .aside-card__ttl { color: var(--gold); }
.aside-cta p { font-size: 13px; color: oklch(88% 0.03 255); line-height: 1.65; margin: 0 0 18px; }
.aside-cta .btn { width: 100%; justify-content: center; }

.abody .sec-head { text-align: left; margin-bottom: 32px; }
.abody .sec-head p { margin: 12px 0 0; }
.wart-grid--author { grid-template-columns: 1fr 1fr; }
.wart-grid--author .wart-card__img { aspect-ratio: 16 / 9; }

@media (max-width: 1060px) { .ahero-grid { grid-template-columns: 1fr 320px; gap: 48px; } }
@media (max-width: 940px) {
  .ahero { padding-top: 120px; }
  .ahero-grid { grid-template-columns: 1fr; gap: 0; }
  .ahero-photo { max-width: 300px; margin-bottom: -60px; }
  .ahero-copy { padding-bottom: 48px; }
  .ahero-stats { flex-direction: column; }
  .ahero-stat + .ahero-stat { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.22); }
  .abody { padding-top: 120px; }
  .abody-grid { grid-template-columns: 1fr; gap: 40px; }
  .aside { position: static; }
  .wart-grid--author { grid-template-columns: 1fr; }
}


/* ============================================================
   MAINLAND vs FREE ZONE comparison card (client-supplied block)
   Scoped to #gs-ml-fz so it cannot leak into the article styles.
   The markup shipped with an inline <style>; it lives here instead so
   there is one stylesheet and no <style> tag inside <article>. The block
   asked for Helvetica; it uses --sans so it tracks the site font.
   ============================================================ */
#gs-ml-fz {
  --navy: #0A3C64; --text: #FFFFFF; --border: #F8F9FB;
  --hair: rgba(248, 249, 251, 0.14); --hair-2: rgba(248, 249, 251, 0.28);
  --muted: rgba(248, 249, 251, 0.66); --faint: rgba(248, 249, 251, 0.46);
  font-family: var(--sans);
  line-height: 1.4; color: var(--text);
  max-width: 820px; margin: 1.5rem auto; -webkit-font-smoothing: antialiased;
}
#gs-ml-fz * { box-sizing: border-box; margin: 0; padding: 0; }
#gs-ml-fz .gs-card { background: var(--navy); border: 1px solid var(--hair-2); border-radius: 14px; overflow: hidden; box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.55); }

#gs-ml-fz .gs-head { padding: 1.4rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
#gs-ml-fz .gs-brand { display: flex; align-items: center; gap: 0.7rem; }
#gs-ml-fz .gs-wordmark { font-weight: 700; letter-spacing: 0.18em; font-size: 1rem; text-transform: uppercase; color: #fff; }
#gs-ml-fz .gs-wordmark span { font-weight: 400; opacity: 0.85; }
#gs-ml-fz .gs-meta { text-align: right; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; font-weight: 700; }
#gs-ml-fz .gs-meta span { display: block; color: var(--faint); margin-top: 0.2rem; letter-spacing: 0.1em; font-weight: 600; }

#gs-ml-fz .gs-title { padding: 1.15rem 1.6rem 0.3rem; }
#gs-ml-fz .gs-title .gs-h { color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
#gs-ml-fz .gs-title p { color: var(--muted); font-size: 0.78rem; font-weight: 500; margin-top: 0.15rem; }

#gs-ml-fz .gs-wrap { padding: 0.6rem 1.6rem 1.2rem; overflow-x: auto; }
#gs-ml-fz table { width: 100%; border-collapse: collapse; background: transparent; margin: 0; table-layout: fixed; min-width: 560px; }
#gs-ml-fz col.c1 { width: 30%; } #gs-ml-fz col.c2 { width: 35%; } #gs-ml-fz col.c3 { width: 35%; }
#gs-ml-fz thead th { color: #fff; background: transparent; padding: 0.7rem 0.6rem; text-align: left; font-weight: 700; font-size: 0.95rem; border: 0; border-bottom: 1px solid var(--border); vertical-align: bottom; }
#gs-ml-fz thead th.gs-item { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
#gs-ml-fz thead th small { display: block; color: var(--faint); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-top: 0.22rem; }

#gs-ml-fz tbody th { color: #fff; background: transparent; padding: 0.6rem; text-align: left; vertical-align: top; font-weight: 500; font-size: 0.82rem; border: 0; border-bottom: 1px solid var(--hair); }
#gs-ml-fz tbody td { color: #fff; background: transparent; padding: 0.6rem; text-align: left; vertical-align: top; font-size: 0.82rem; line-height: 1.35; border: 0; border-bottom: 1px solid var(--hair); }
#gs-ml-fz td.gs-soft { color: var(--muted); }
#gs-ml-fz td.gs-yes { color: #fff; font-weight: 600; }

#gs-ml-fz .gs-grp td { color: var(--muted); padding: 0.9rem 0.6rem 0.3rem; text-align: left; border: 0; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
#gs-ml-fz .gs-grp.gs-first td { padding-top: 0.35rem; }

#gs-ml-fz .gs-total th { color: var(--muted); border: 0; border-top: 1px solid var(--border); padding: 0.8rem 0.6rem; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: top; }
#gs-ml-fz .gs-total td { color: #fff; border: 0; border-top: 1px solid var(--border); padding: 0.8rem 0.6rem; font-weight: 700; font-size: 0.82rem; line-height: 1.35; vertical-align: top; }

#gs-ml-fz .gs-foot { border-top: 1px solid var(--hair); padding: 0.85rem 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.66rem; color: var(--faint); letter-spacing: 0.02em; }
#gs-ml-fz .gs-foot b { color: var(--muted); font-weight: 700; }

@media (max-width: 560px) {
  #gs-ml-fz thead th, #gs-ml-fz tbody td, #gs-ml-fz tbody th { font-size: 0.78rem; }
  #gs-ml-fz .gs-head, #gs-ml-fz .gs-wrap, #gs-ml-fz .gs-title, #gs-ml-fz .gs-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ============================================================
   DUBAI EXPAT STEUERRECHNER (client-supplied widget)
   Scoped to .gs-tax-calc. The block shipped with two inline <style>
   tags, an @import and a Hanken Grotesk webfont; the rules live here
   instead so there is one stylesheet, and the widget inherits --sans
   rather than pulling in a third font family.
   ============================================================ */
.gs-tax-calc {
  /* Site font, not the widget's own webfont — embedded blocks inherit the
     brand identity. `all: initial` below does not reset custom properties,
     so --sans still resolves from :root. */
  --gs-font: var(--sans);
  --gs-bg: #0A3C64;
  --gs-surface: rgba(255, 255, 255, 0.045);
  --gs-surface-2: rgba(255, 255, 255, 0.085);
  --gs-text: #ffffff;
  --gs-muted: rgba(255, 255, 255, 0.72);
  --gs-faint: rgba(255, 255, 255, 0.5);
  --gs-line: #EEF3F7;
  --gs-line-soft: rgba(238, 243, 247, 0.16);
  --gs-accent: #ffffff;
  --gs-accent-soft: rgba(255, 255, 255, 0.12);
  --gs-on-accent: #0A3C64;
  --gs-radius: 12px;
  --gs-radius-sm: 9px;
  --gs-sticky-top: 110px;

  all: initial;
  display: block; box-sizing: border-box;
  font-family: var(--gs-font);
  font-size: 16px; color: var(--gs-text); line-height: 1.5;
  background: var(--gs-bg);
  background-image: radial-gradient(1000px 420px at 88% -14%, rgba(255, 255, 255, 0.08), transparent 60%);
  border: 1px solid var(--gs-line);
  border-radius: 16px;
  padding: clamp(20px, 3.4vw, 38px);
  max-width: 1000px; width: 100%; margin: 0 auto; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
.gs-tax-calc *, .gs-tax-calc *::before, .gs-tax-calc *::after { box-sizing: border-box; font-family: var(--gs-font); }
.gs-tax-calc h1, .gs-tax-calc h2, .gs-tax-calc h3, .gs-tax-calc h4, .gs-tax-calc h5, .gs-tax-calc h6 { color: #fff !important; }

.gs-tax-calc .gs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--gs-line-soft); }
.gs-tax-calc .gs-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gs-muted); font-weight: 600; margin: 0 0 11px; }
.gs-tax-calc .gs-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gs-line); display: inline-block; opacity: 0.6; }
.gs-tax-calc .gs-title { font-size: clamp(23px, 3.3vw, 33px); font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.08; color: #fff !important; }
.gs-tax-calc .gs-sub { color: var(--gs-muted); font-size: 14.5px; margin: 11px 0 0; max-width: 48ch; }

.gs-tax-calc .gs-nondom { display: flex; align-items: center; gap: 14px; background: var(--gs-surface); border: 1px solid var(--gs-line); border-radius: var(--gs-radius-sm); padding: 13px 16px; }
.gs-tax-calc .gs-nondom .gs-nd-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }
.gs-tax-calc .gs-nondom .gs-nd-hint { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gs-faint); }
.gs-tax-calc .gs-switch { position: relative; width: 48px; height: 27px; flex: 0 0 auto; cursor: pointer; }
.gs-tax-calc .gs-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gs-tax-calc .gs-switch .gs-track { position: absolute; inset: 0; background: var(--gs-surface-2); border: 1px solid var(--gs-faint); border-radius: 99px; transition: background 0.2s, border-color 0.2s; }
.gs-tax-calc .gs-switch .gs-thumb { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--gs-faint); transition: transform 0.2s, background 0.2s; }
.gs-tax-calc .gs-switch input:checked + .gs-track { background: var(--gs-accent-soft); border-color: var(--gs-line); }
.gs-tax-calc .gs-switch input:checked + .gs-track + .gs-thumb { transform: translateX(21px); background: var(--gs-accent); }
.gs-tax-calc .gs-switch input:focus-visible + .gs-track { outline: 2px solid var(--gs-accent); outline-offset: 2px; }

.gs-tax-calc .gs-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.gs-tax-calc .gs-grid > * { min-width: 0; }

.gs-tax-calc .gs-card { background: var(--gs-surface); border-radius: var(--gs-radius); padding: 20px 20px 8px; margin-bottom: 16px; transition: background 0.2s; }
.gs-tax-calc .gs-card:hover { background: var(--gs-surface-2); }
.gs-tax-calc .gs-card:last-child { margin-bottom: 0; }
.gs-tax-calc .gs-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 17px; }
.gs-tax-calc .gs-card-h .gs-kicker { font-size: 10px; letter-spacing: 0.14em; color: var(--gs-text); font-weight: 700; border: 1px solid var(--gs-line); border-radius: 5px; padding: 3px 6px; line-height: 1; }
.gs-tax-calc .gs-card-h .gs-card-title { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -0.01em; color: #fff !important; flex: 1 1 auto; min-width: 0; }
.gs-tax-calc .gs-rate-chip { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--gs-text); background: var(--gs-accent-soft); border: 1px solid var(--gs-line); padding: 4px 9px; border-radius: 99px; white-space: nowrap; }

.gs-tax-calc .gs-field { margin-bottom: 15px; }
.gs-tax-calc .gs-field > label { display: block; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gs-muted); margin-bottom: 7px; font-weight: 600; }
.gs-tax-calc .gs-input { position: relative; display: flex; align-items: center; }
.gs-tax-calc .gs-input .gs-cur { position: absolute; left: 14px; color: var(--gs-faint); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; }
.gs-tax-calc input[type=number] {
  width: 100%; font-size: 15px; color: var(--gs-text);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--gs-line); border-radius: var(--gs-radius-sm);
  padding: 12px 14px 12px 46px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  -moz-appearance: textfield; font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.gs-tax-calc input[type=number]::-webkit-outer-spin-button,
.gs-tax-calc input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gs-tax-calc input[type=number]:focus { border-color: var(--gs-accent); box-shadow: 0 0 0 3px var(--gs-accent-soft); background: rgba(255, 255, 255, 0.07); }
.gs-tax-calc input[type=number]::placeholder { color: rgba(255, 255, 255, 0.38); }

.gs-tax-calc .gs-seg { display: flex; width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--gs-line); border-radius: 99px; padding: 3px; gap: 2px; }
.gs-tax-calc .gs-seg button { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--gs-muted); background: transparent; border: none; border-radius: 99px; padding: 8px 10px; cursor: pointer; transition: color 0.15s, background 0.15s; }
.gs-tax-calc .gs-seg button[aria-pressed=true] { background: var(--gs-accent); color: var(--gs-on-accent); }
.gs-tax-calc .gs-seg button:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }

.gs-tax-calc .gs-check { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--gs-muted); cursor: pointer; padding: 4px 0 13px; }
.gs-tax-calc .gs-check input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 19px; height: 19px; border: 1px solid var(--gs-line); border-radius: 5px; background: rgba(255, 255, 255, 0.04); margin: 0; cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s; }
.gs-tax-calc .gs-check input:checked { background: var(--gs-accent); border-color: var(--gs-accent); }
.gs-tax-calc .gs-check input:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--gs-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gs-tax-calc .gs-check input:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
.gs-tax-calc .gs-check small { display: block; color: var(--gs-faint); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; font-weight: 600; }
.gs-tax-calc .gs-hint { font-size: 11.5px; color: var(--gs-faint); margin: -6px 0 13px; line-height: 1.55; }

.gs-tax-calc [data-show=false] { display: none; }

.gs-tax-calc .gs-result { background: var(--gs-surface); border: 1px solid var(--gs-line); border-radius: var(--gs-radius); overflow: hidden; }
.gs-tax-calc .gs-result::before { content: ""; display: block; height: 2px; background: linear-gradient(90deg, var(--gs-line), rgba(238, 243, 247, 0.25), transparent 75%); }
.gs-tax-calc .gs-result-top { padding: 22px 22px 20px; border-bottom: 1px solid var(--gs-line-soft); background: radial-gradient(560px 200px at 100% -25%, rgba(255, 255, 255, 0.10), transparent 70%); }
.gs-tax-calc .gs-eff-label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gs-faint); font-weight: 600; margin: 0 0 10px; }
.gs-tax-calc .gs-eff-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.gs-tax-calc .gs-eff-rate { white-space: nowrap; font-size: clamp(34px, 6vw, 52px); font-weight: 750; letter-spacing: -0.035em; line-height: 0.9; color: var(--gs-text); font-variant-numeric: tabular-nums; }
.gs-tax-calc .gs-eff-net { text-align: right; }
.gs-tax-calc .gs-eff-net .gs-en-k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gs-faint); display: block; margin-bottom: 3px; }
.gs-tax-calc .gs-eff-net .gs-en-v { white-space: nowrap; font-size: 19px; font-weight: 700; color: var(--gs-text); font-variant-numeric: tabular-nums; }
.gs-tax-calc .gs-meter { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); margin-top: 18px; overflow: hidden; border: 1px solid var(--gs-line-soft); }
.gs-tax-calc .gs-meter > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), var(--gs-text)); border-radius: 99px; transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gs-tax-calc .gs-meter-scale { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: 0.08em; color: var(--gs-faint); margin-top: 6px; }

.gs-tax-calc .gs-lines { padding: 8px 22px 4px; }
.gs-tax-calc .gs-line { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--gs-line-soft); font-size: 13.5px; }
.gs-tax-calc .gs-line:last-child { border-bottom: none; }
.gs-tax-calc .gs-line .gs-l-name { color: var(--gs-text); font-weight: 500; min-width: 0; }
.gs-tax-calc .gs-line .gs-l-name small { display: block; color: var(--gs-faint); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; font-weight: 600; }
.gs-tax-calc .gs-line .gs-l-val { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gs-text); }
.gs-tax-calc .gs-line.gs-zero .gs-l-val { color: var(--gs-muted); }
.gs-tax-calc .gs-line[data-show=false] { display: none; }

.gs-tax-calc .gs-total { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 18px 22px; background: rgba(255, 255, 255, 0.05); border-top: 1px solid var(--gs-line); }
.gs-tax-calc .gs-total .gs-t-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gs-muted); }
.gs-tax-calc .gs-total .gs-t-val { white-space: nowrap; font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.gs-tax-calc .gs-cta { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-on-accent); background: var(--gs-accent); margin: 18px 22px 22px; padding: 15px 18px; border-radius: var(--gs-radius-sm); transition: transform 0.12s, filter 0.15s, box-shadow 0.15s; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.55); }
.gs-tax-calc .gs-cta:hover { filter: brightness(0.96); transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6); }
.gs-tax-calc .gs-cta:focus-visible { outline: 2px solid var(--gs-text); outline-offset: 2px; }

.gs-tax-calc .gs-disc { font-size: 11px; color: var(--gs-faint); margin: 20px 2px 0; line-height: 1.65; }
.gs-tax-calc .gs-disc b { color: var(--gs-muted); font-weight: 600; }

.gs-tax-calc .gs-head-ctrl { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.gs-tax-calc .gs-curseg { display: flex; gap: 6px; }
.gs-tax-calc .gs-curseg button { flex: 1; }

/* Two-column only when the article column is genuinely wide enough.
   The widget's own 840px breakpoint is viewport-based, which would split a
   720px article column into two ~340px columns. */
@media (min-width: 1240px) {
  .gs-tax-calc .gs-grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
  .gs-tax-calc .gs-aside { position: sticky; top: var(--gs-sticky-top); align-self: start; }
}
@media (max-width: 520px) {
  .gs-tax-calc { padding: 18px 14px; }
  .gs-tax-calc .gs-card { padding: 18px 16px 6px; }
  .gs-tax-calc .gs-result-top, .gs-tax-calc .gs-lines, .gs-tax-calc .gs-total { padding-left: 16px; padding-right: 16px; }
  .gs-tax-calc .gs-cta { margin-left: 16px; margin-right: 16px; }
  .gs-tax-calc .gs-seg button { font-size: 11.5px; padding: 8px 6px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) { .gs-tax-calc * { transition: none !important; } }


/* ============================================================
   BANK COST TABLES (client-supplied block, Konto-Artikel)
   Scoped to .dsb-tbl. Shipped with an inline <style>; the rules
   live here so there is one stylesheet, and the font is var(--sans)
   rather than the block's own stack — embedded blocks inherit the
   brand identity.
   ============================================================ */
.dsb-tbl {
  --dsb-navy: #103C63; --dsb-accent: #c8a04a; --dsb-line: #e5e8ec;
  --dsb-zebra: #f7f9fb; --dsb-head: #0f2b46; --dsb-text: #243b53;
  font-family: var(--sans);
  color: var(--dsb-text); line-height: 1.5; margin: 0 0 2.5rem;
}
.dsb-tbl * { box-sizing: border-box; }
.dsb-tbl h3 { font-size: 1.15rem; color: var(--dsb-navy); margin: 0 0 0.75rem; font-weight: 700; }
.dsb-tbl h3 + .dsb-tbl__scroll { margin-top: 0; }
.dsb-tbl__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--dsb-line); border-radius: 10px; }
.dsb-tbl table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.94rem; }
.dsb-tbl thead th { background: var(--dsb-head); color: #fff; text-align: left; padding: 0.8rem 0.9rem; font-weight: 600; white-space: nowrap; }
.dsb-tbl thead th:first-child { border-top-left-radius: 10px; }
.dsb-tbl thead th:last-child { border-top-right-radius: 10px; }
.dsb-tbl tbody td { padding: 0.75rem 0.9rem; border-top: 1px solid var(--dsb-line); vertical-align: top; }
.dsb-tbl tbody tr:nth-child(even) { background: var(--dsb-zebra); }
.dsb-tbl tbody tr:hover { background: #eef3f8; }
.dsb-tbl .dsb-bank { font-weight: 700; color: var(--dsb-navy); white-space: nowrap; }
.dsb-tbl .dsb-free { color: #1a7f4b; font-weight: 600; }
.dsb-tbl .dsb-sub { display: block; font-size: 0.82rem; color: #61738a; margin-top: 0.15rem; }
.dsb-tbl__note { font-size: 0.8rem; color: #61738a; margin: 0.7rem 0.1rem 0; line-height: 1.6; }
.dsb-tbl__note strong { color: var(--dsb-text); }
.dsb-tbl__group { margin-top: 2rem; }
@media (max-width: 520px) {
  .dsb-tbl table { font-size: 0.88rem; }
  .dsb-tbl thead th, .dsb-tbl tbody td { padding: 0.6rem 0.65rem; }
}


/* ============================================================
   COST-OF-LIVING TABLE (client-supplied block, Kosten-Artikel)
   Shipped as inline styles on every element; lifted here and scoped
   to .dsl-cost. Font is var(--sans) per the embedded-block rule.
   ============================================================ */
.dsl-cost { font-family: var(--sans); max-width: 680px; margin: 1.5rem auto 2rem; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; }
.dsl-cost__head { background: #0E2E4E; padding: 18px 22px; }
.dsl-cost__ttl { color: #fff; font-size: 17px; font-weight: 500; letter-spacing: 0.2px; }
.dsl-cost__sub { color: #C9A24B; font-size: 13px; margin-top: 4px; }
.dsl-cost__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dsl-cost table { width: 100%; border-collapse: collapse; min-width: 480px; }
.dsl-cost thead tr { background: #EEF3F8; }
.dsl-cost thead th { padding: 11px 22px; font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; text-align: right; color: #0E2E4E; white-space: nowrap; }
.dsl-cost thead th:first-child { text-align: left; color: #5A6B7C; }
.dsl-cost thead th.is-family { color: #B8893B; }
.dsl-cost tbody tr { border-top: 1px solid #EDF1F5; }
.dsl-cost tbody td { padding: 11px 22px; font-size: 14px; color: #1a2b3c; }
.dsl-cost__hint { color: #94A2B0; font-size: 12px; }
.dsl-cost__val { position: relative; text-align: right; width: 31%; padding: 9px 22px; }
/* --w is a 0–1 factor; the width resolves against the track (cell minus both
   14px insets), so a full-scale bar ends flush instead of spilling out. */
.dsl-cost__bar { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); height: 22px;
  width: calc(var(--w) * (100% - 28px)); border-radius: 3px; background: rgba(14, 46, 78, 0.10); }
.dsl-cost__val.is-family .dsl-cost__bar { background: rgba(201, 162, 75, 0.20); }
.dsl-cost__num { position: relative; font-size: 14px; font-weight: 500; color: #0E2E4E; }
.dsl-cost__num.is-none { color: #94A2B0; font-weight: 500; }
.dsl-cost tbody tr.dsl-cost__total { background: #0E2E4E; border-top: none; }
/* needs to out-specify `.dsl-cost tbody td`, or the white text loses to the
   body cell colour and disappears against the navy row. */
.dsl-cost tbody tr.dsl-cost__total td { padding: 14px 22px; font-size: 14.5px; font-weight: 500; color: #fff; }
.dsl-cost tbody tr.dsl-cost__total td + td { text-align: right; font-size: 16px; }
.dsl-cost tbody tr.dsl-cost__total td.is-family { color: #E7C67C; }
.dsl-cost__note { padding: 12px 22px 16px; font-size: 11.5px; color: #94A2B0; line-height: 1.5; border-top: 1px solid #EDF1F5; margin: 0; }
@media (max-width: 520px) {
  .dsl-cost thead th, .dsl-cost tbody td, .dsl-cost__val, .dsl-cost__total td, .dsl-cost__note { padding-left: 14px; padding-right: 14px; }
  .dsl-cost__bar { left: 8px; }
}


/* ============================================================
   FREEZONE COMPARISON (IFZA article) — .fzc
   Six columns, so it always scrolls inside its own box; the IFZA
   column is highlighted and stays put while the rest scrolls.
   ============================================================ */
.fzc { font-family: var(--sans); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; margin: 1.5rem 0 2rem; }
.fzc__head { background: var(--accent); padding: 18px 22px; }
.fzc__ttl { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fzc__sub { color: var(--gold); font-size: 13px; margin-top: 4px; }
.fzc__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fzc table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13px; }
.fzc thead th { background: #EEF3F8; color: var(--accent); text-align: left; padding: 11px 14px; font-weight: 700; font-size: 12.5px; white-space: nowrap; vertical-align: bottom; }
.fzc thead th:first-child { color: #5A6B7C; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; }
.fzc tbody th { text-align: left; padding: 10px 14px; font-weight: 500; color: #1a2b3c; border-top: 1px solid #EDF1F5; vertical-align: top; white-space: nowrap; }
.fzc tbody td { padding: 10px 14px; border-top: 1px solid #EDF1F5; color: var(--fg-muted); vertical-align: top; line-height: 1.45; }
.fzc tbody tr:nth-child(even) th, .fzc tbody tr:nth-child(even) td { background: #F7F9FB; }

/* the recommended column, highlighted end to end */
.fzc .is-hl { background: rgba(246, 213, 159, 0.20) !important; color: var(--fg); font-weight: 500; }
.fzc thead th.is-hl { background: var(--gold) !important; color: var(--accent); }
.fzc__badge { display: inline-block; margin-left: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent); color: var(--gold); padding: 3px 7px; border-radius: 99px; vertical-align: middle; }

.fzc__price { display: block; font-weight: 600; color: var(--fg); white-space: nowrap; }
.fzc__eur { display: block; font-weight: 400; font-size: 11.5px; color: var(--fg-subtle); margin-top: 2px; }
.fzc__note { display: block; font-size: 11.5px; color: var(--fg-subtle); margin-top: 2px; }
.fzc__dots { letter-spacing: 2px; white-space: nowrap; color: var(--accent); font-size: 12px; }
.fzc__dots i { font-style: normal; color: var(--border-md, #cfd8e3); }
.fzc__foot { border-top: 1px solid var(--border); padding: 12px 22px 16px; font-size: 11.5px; color: var(--fg-subtle); line-height: 1.6; }
.fzc__foot p { margin: 0 0 6px; font-size: 11.5px; color: var(--fg-subtle); line-height: 1.6; }
.fzc__foot p:last-child { margin-bottom: 0; }
@media (max-width: 520px) {
  .fzc__head, .fzc__foot { padding-left: 16px; padding-right: 16px; }
}


/* ============================================================
   HERO BACKGROUND IMAGE (.hero--media)
   Dubai above the clouds behind a light-blue wash at 80 %. The wash
   is light, so the hero copy keeps its normal dark-on-light styling —
   only the photo layer is new.
   ============================================================ */
.hero--media { background: var(--bg); }
.hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero__media::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/img/skyline.jpg') center 32% / cover no-repeat;
}
/* Two layers. The flat scrim is deliberately lighter than before so the
   skyline reads on the right; the wash then drives the copy column to near
   solid white, where dark body text needs it.
   Measured: over the towers the subhead background was 4.27:1 against
   .hero__sub — under the 4.5:1 AA floor. That colour tops out at 5.99:1 on
   pure white, so the wash aims just under the ceiling. */
.hero__scrim { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.55); }
.hero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.93) 30%,
    rgba(255, 255, 255, 0.62) 52%,
    rgba(255, 255, 255, 0.12) 70%,
    rgba(255, 255, 255, 0) 82%);
}
@media (max-width: 940px) {
  /* one column: the copy spans the full width, so wash it evenly */
  .hero__wash { background: rgba(255, 255, 255, 0.82); }
}

/* the photo sits behind the orbs, so keep them from muddying it */
.hero--media .hero__orbs { opacity: 0.7; }
/* the right-hand cards gain a touch more lift over the photo */
.hero--media .stat-card, .hero--media .media-bar { box-shadow: 0 14px 34px rgba(16, 60, 99, 0.14); }


/* the cookie-settings re-opener sits with the legal links; size, colour and
   hover come from the shared rule above so it matches Impressum/Datenschutz */
.footer__legal-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-weight: inherit; line-height: inherit;
}

/* ============================================================
   FLOATING WHATSAPP BUTTON (client-supplied widget)
   z-index 90: above page content, below .drawer (99), .nav (100)
   and .skip-link (300). The drawer is opaque and covers the
   viewport, so an open mobile menu hides the button by itself.
   ============================================================ */
.whatsapp-float {
  position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px;
  background-color: #25d366; color: #fff; border-radius: 50px;
  text-align: center; font-size: 30px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 90; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s ease; text-decoration: none;
  opacity: 0; visibility: hidden; transform: scale(0.8);
}
.whatsapp-float.show { opacity: 1; visibility: visible; transform: scale(1); animation: whatsappSlideIn 0.5s ease-out forwards; }
.whatsapp-float:hover { background-color: #20ba5a; transform: scale(1.1); box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); }
.whatsapp-float:active { transform: scale(0.95); }
.whatsapp-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.whatsapp-icon { width: 35px; height: 35px; fill: #fff; }

@keyframes whatsappSlideIn {
  from { opacity: 0; transform: translateX(100px) scale(0.8); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* tooltip */
.whatsapp-float::before {
  content: 'Schreibe uns direkt auf WhatsApp';
  position: absolute; right: 70px;
  background-color: #fff; color: #333; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; white-space: nowrap; font-family: var(--sans);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none;
}
.whatsapp-float::after {
  content: ''; position: absolute; right: 60px;
  border-width: 8px; border-style: solid;
  border-color: transparent transparent transparent #fff;
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.whatsapp-float:hover::before, .whatsapp-float:hover::after,
.whatsapp-float:focus-visible::before, .whatsapp-float:focus-visible::after { opacity: 1; visibility: visible; }

@media screen and (max-width: 768px) {
  .whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; }
  .whatsapp-icon { width: 28px; height: 28px; }
  .whatsapp-float::before, .whatsapp-float::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
  .whatsapp-float.show { animation: none; }
  .whatsapp-float:hover { transform: none; }
}


/* ============================================================
   COOKIE BAR (.cbar)
   Bottom bar, not a modal — it never blocks the page. z-index 95:
   above content and above the WhatsApp float (90), below .drawer
   (99) and .nav (100), so an open mobile menu still wins.
   ============================================================ */
.cbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -8px 30px rgba(16, 60, 99, 0.10);
  transform: translateY(100%); transition: transform 0.35s var(--ease);
}
.cbar.is-in { transform: translateY(0); }
/* while the bar is up it would otherwise sit on top of the footer
   legal links — reserve its height at the foot of the page */
body.has-cbar { padding-bottom: var(--cbar-h, 0px); }
.cbar__inner {
  max-width: 1200px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap;
}
.cbar__text { flex: 1 1 420px; min-width: 0; font-size: 13px; line-height: 1.6; color: var(--fg-muted); margin: 0; }
.cbar__text strong { display: block; color: var(--fg); font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.cbar__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cbar__actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.cbar__actions .btn { padding: 11px 22px; font-size: 11px; }

@media (max-width: 640px) {
  .cbar__inner { padding: 16px 18px; gap: 14px; }
  .cbar__text { flex-basis: 100%; font-size: 12.5px; }
  .cbar__actions { width: 100%; }
  .cbar__actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cbar { transition: none; }
}

/* ══ SERVICE PAGES ═══════════════════════════════════════════════════════
   /leistungen/firmengruendung · /leistungen/freezone · /leistungen/mainland
   Everything reusable already exists (page-head, value-pillar, price-grid,
   testi-grid, faq-list, cta-band, partners, story-grid, svc-list). Only the
   pieces below are new. */

/* Buttons + proof under a page-head heading */
.page-head__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.trust-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.trust-row__stars { display: flex; gap: 3px; color: var(--gold); }
.trust-row__stars svg { width: 15px; height: 15px; }
.trust-row__txt { font-size: 12.5px; color: var(--fg-muted); }
.trust-row__txt strong { color: var(--fg); font-weight: 700; }
.trust-divider { width: 1px; align-self: stretch; min-height: 30px; background: var(--border-md); }

/* A numbered advantage that spans the full width of .values-pillars */
.value-pillar--wide { grid-column: 1 / -1; }

/* Vertical process rail — the Ablauf list, which is too long for .timeline */
.proc { max-width: 780px; margin: 52px auto 0; }
.proc-step { display: grid; grid-template-columns: 42px 1fr; gap: 22px; }
.proc-step__rail { display: flex; flex-direction: column; align-items: center; }
.proc-step__num { width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px; font-weight: 700;
  background: var(--accent); color: #fff; }
.proc-step__line { flex: 1; width: 2px; background: var(--border); margin: 8px 0; }
.proc-step:last-child .proc-step__line { display: none; }
.proc-step__body { padding-bottom: 34px; }
.proc-step:last-child .proc-step__body { padding-bottom: 0; }
.proc-step__tag { display: inline-block; border-radius: 6px; padding: 4px 10px;
  background: rgba(16, 60, 99, 0.07); color: var(--accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px; }
.proc-step__title { font-family: var(--serif); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg); margin-bottom: 8px; line-height: 1.25; }
.proc-step__desc { font-size: 14px; color: var(--fg-muted); line-height: 1.7; }

/* Freezone / Mainland: scope card + steps card, then sibling-service chips */
.sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.sv-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 32px; }
.sv-ttl { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px; }
.sv-step { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.sv-step:first-child { padding-top: 0; }
.sv-step:last-child { border-bottom: none; padding-bottom: 0; }
.sv-step__num { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 60, 99, 0.08); color: var(--accent); font-size: 13px; font-weight: 700; }
.sv-step__t { font-size: 14.5px; font-weight: 700; color: var(--fg); }
.sv-step__d { font-size: 13px; color: var(--fg-muted); line-height: 1.6; margin-top: 4px; }
.sv-rel { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-rel a { display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-md); border-radius: 8px; background: #fff;
  padding: 12px 17px; font-size: 13px; font-weight: 600; color: var(--fg);
  transition: border-color 0.15s, color 0.15s; }
.sv-rel a:hover { border-color: var(--accent); color: var(--accent); }
.sv-rel a.is-all { border-color: var(--accent); color: var(--accent); }

@media (max-width: 940px) {
  .sv-grid { grid-template-columns: 1fr; }
  .proc { margin-top: 40px; }
}
@media (max-width: 640px) {
  .proc-step { grid-template-columns: 34px 1fr; gap: 16px; }
  .proc-step__num { width: 34px; height: 34px; font-size: 14px; }
  .trust-row { gap: 16px; }
}

/* Current page inside a mega-menu group */
.mega-grp__list a.active { color: var(--accent); font-weight: 600; }

/* .sec-head is a two-column flex (heading pushed opposite the eyebrow), which
   only balances when there is enough on both sides. Short section headings
   read better stacked. */
.sec-head--left { display: block; margin-bottom: 30px; }
.sec-head--left p { font-size: 15px; color: var(--fg-muted); line-height: 1.7;
  margin-top: 12px; max-width: 620px; }

/* A mega-menu group headline that is itself a link to the group's own page.
   The arrow is the affordance — the label alone looks identical to the
   non-clickable headlines beside it. */
.mega-grp__hd--link { transition: opacity 0.15s; }
.mega-grp__hd--link:hover { opacity: 0.72; }
.mega-grp__hd-arr { width: 12px; height: 12px; color: var(--accent);
  opacity: 0; transform: translateX(-3px);
  transition: opacity 0.2s, transform 0.2s; }
.mega-grp__hd--link:hover .mega-grp__hd-arr,
.mega-grp__hd--link:focus-visible .mega-grp__hd-arr { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mega-grp__hd-arr { transition: none; }
}

/* Featured-article card in the Wissen mega menu: tag + reading time above the
   headline. .mega-card is a flex column, so the meta row needs its own line. */
.mega-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 9px; }
.mega-card__meta .art-tag { font-size: 9px; padding: 4px 9px; }
.mega-card__meta .art-time { font-size: 11px; }
.mega-card__name { line-height: 1.35; }

/* Photo behind an audience panel. The panel's number, label and chips sit at
   the bottom in white and gold, so the scrim has to be heaviest there. */
.aud-panel__media { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.45s var(--ease); }
.aud-panel__media.is-shown { opacity: 1; }
.aud-panel__media img { width: 100%; height: 100%; object-fit: cover;
  object-position: var(--aud-pos, 50% 28%); display: block; }
.aud-panel__media::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 43, 73, 0.30) 0%,
    rgba(11, 43, 73, 0.46) 38%,
    rgba(11, 43, 73, 0.80) 72%,
    rgba(11, 43, 73, 0.92) 100%); }
/* the decorative skyline strip would fight a real photo */
.aud-panel.has-img .aud-panel__skyline { opacity: 0; }
/* Below 940px the panel turns short and landscape, so the text fills most of
   it and a bottom-weighted scrim no longer covers where the text actually is.
   An even scrim keeps every label readable wherever it lands — a side-weighted
   one buried whichever subject stood on that side. Only the vertical crop
   matters here: a square source in a landscape box is cropped top and bottom,
   never left and right, so --aud-pos-sm tunes Y per photo. */
@media (max-width: 940px) {
  .aud-panel__media img { object-position: var(--aud-pos-sm, 50% 24%); }
  .aud-panel__media::after { background: linear-gradient(180deg,
    rgba(11, 43, 73, 0.82) 0%, rgba(11, 43, 73, 0.86) 55%,
    rgba(11, 43, 73, 0.90) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .aud-panel__media { transition: none; }
}

/* The phone info item names three channels, so WhatsApp and Telegram need to
   be reachable from it — the Telegram handle is not the phone number. */
.info-item__chans { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.info-item__chans a { font-size: 12.5px; font-weight: 600; color: var(--accent);
  transition: opacity 0.2s; }
.info-item__chans a:hover { opacity: 0.7; }

/* Contact page: the aside (info block + hours card) runs taller than the form,
   and `align-items: start` left the form floating short of it. Stretch the
   card to the row height and let the submit button take up the slack, so the
   extra space reads as deliberate rather than as a gap under the form. */
@media (min-width: 941px) {
  .contact-grid { align-items: stretch; }
  .contact-grid .form-card { display: flex; flex-direction: column; }
  .contact-grid .form-card > form { display: flex; flex-direction: column; flex: 1 1 auto; }
  .contact-grid .form-card .form-submit { margin-top: auto; }
}

/* Click-to-load gate over the map. The Google embed contacts Google and sets
   cookies, so it is only injected once the visitor asks for it. */
.map__consent { position: absolute; inset: 0; z-index: 2; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px; text-align: center; background: var(--bg-mid); }
.map__consent svg { width: 26px; height: 26px; color: var(--accent); }
.map__consent-ttl { font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: var(--fg); }
.map__consent-txt { font-size: 13px; color: var(--fg-muted); line-height: 1.6;
  max-width: 400px; margin: 0; }
.map__consent-txt a { color: var(--accent); text-decoration: underline;
  text-underline-offset: 2px; }
.map__consent .btn { margin-top: 6px; }
@media (max-width: 640px) {
  .map__consent { padding: 20px; gap: 8px; }
  .map__consent-txt { font-size: 12px; }
}

/* Press logos in the "Featured In" marquee. Both caps are max-* with auto
   width/height so each mark scales inside the box without ever distorting —
   a fixed height plus max-width would squash the wide wordmarks. */
.marquee__item img { max-height: 30px; max-width: 150px; width: auto; height: auto;
  display: block; opacity: 0.78; filter: grayscale(1);
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease); }
.marquee__item img:hover { opacity: 1; filter: none; }
@media (max-width: 640px) {
  .marquee__item img { max-height: 24px; max-width: 118px; }
}

/* Article video. The poster is served from our own domain and the YouTube
   iframe is only created on click, so nothing reaches Google until the
   visitor presses play. */
.artvid { margin: 30px 0; }
.artvid__shot { display: block; position: relative; width: 100%; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--bg-mid); cursor: pointer; aspect-ratio: 16 / 9; }
.artvid__shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--ease), filter 0.3s var(--ease); }
.artvid__shot:hover img { transform: scale(1.03); filter: brightness(0.92); }
.artvid__play { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; }
.artvid__play::before { content: ''; position: absolute; inset: 0;
  background: rgba(11, 43, 73, 0.22); transition: background 0.25s var(--ease); }
.artvid__shot:hover .artvid__play::before { background: rgba(11, 43, 73, 0.34); }
.artvid__play svg { position: relative; width: 22px; height: 22px; color: #fff;
  margin-left: 3px; }
.artvid__play::after { content: ''; position: absolute; width: 62px; height: 62px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 10px 30px rgba(16, 60, 99, 0.4);
  transition: transform 0.25s var(--ease); }
.artvid__shot:hover .artvid__play::after { transform: scale(1.07); }
.artvid__play svg { z-index: 1; }
.artvid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px;
  display: block; }
@media (prefers-reduced-motion: reduce) {
  .artvid__shot img, .artvid__play::after, .artvid__play::before { transition: none; }
  .artvid__shot:hover img { transform: none; }
}

/* Freezone / Mainland switch above the package grid.
   `.price-grid { display: grid }` outranks the browser's [hidden]{display:none},
   so the inactive grid stayed on screen and the switch only *looked* like it
   worked. This rule is what actually hides it. */
.price-grid[hidden] { display: none; }

.pkg-switch { position: relative; display: inline-flex; margin: 0; flex-shrink: 0;
  padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.pkg-switch__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px;
  border-radius: 6px; background: var(--accent); z-index: 0;
  transition: transform 0.35s var(--ease), width 0.35s var(--ease); }
.pkg-switch__btn { position: relative; z-index: 1; border: 0; background: none;
  cursor: pointer; padding: 10px 26px; font-family: var(--sans); font-size: 13px;
  font-weight: 600; color: var(--fg-subtle); transition: color 0.25s var(--ease);
  white-space: nowrap; }
.pkg-switch__btn:hover:not(.is-active) { color: var(--fg); }
.pkg-switch__btn.is-active { color: #fff; }
.price-card__price--ask { font-family: var(--serif); font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--fg); line-height: 1.15; }
.price-card--feat .price-card__price--ask { color: var(--accent); }
@media (max-width: 480px) {
  .pkg-switch { width: 100%; }
  .pkg-switch__btn { flex: 1; padding: 10px 12px; }
  .price-card__price--ask { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pkg-switch__thumb { transition: none; }
}

/* Heading left, Freezone/Mainland switch top right. A flex row rather than
   absolute positioning: no hardcoded offset to keep in sync with the
   container padding, and it wraps by itself on narrow screens. */
.pkg-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px 32px; flex-wrap: wrap; margin-bottom: 40px; }
.pkg-head > :first-child { margin-bottom: 0; }
.pkg-head .sec-head--center { margin-bottom: 0; }
/* "ab" in front of a from-price */
.price-card__from { font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--fg-subtle); margin-right: 6px; align-self: flex-end; }
.price-card--feat .price-card__from { color: var(--accent); }
@media (max-width: 760px) {
  .pkg-head { flex-direction: column; align-items: stretch; margin-bottom: 30px; }
  .pkg-switch { width: 100%; }
  .pkg-switch__btn { flex: 1; }
}

/* Sprachumschalter: nur Kürzel, keine ausgeschriebenen Namen mehr.
   Das Menü darf dadurch deutlich schmaler werden. Die Regeln oben zielten
   auf <button> — seit die Einträge echte Links sind, brauchen sie <a>. */
.langsel__menu { min-width: 0; }
.langsel__menu a { justify-content: center; letter-spacing: 0.1em;
  font-size: 11px; font-weight: 700; }
.langsel__menu a.is-current { font-weight: 700; }

/* ── Beratungs-CTA im Artikel ────────────────────────────────────────────
   Das Markup gab es schon, die Regeln dazu nicht: ohne Größenangabe rendert
   jedes Häkchen-SVG rund 400 px hoch und der Abschnitt läuft über mehrere
   Bildschirmhöhen. Aufbau und Farben folgen der .lead-card, damit beide
   Kästen im Artikel als eine Familie lesbar sind. */
.cta-card {
  background: var(--accent-dim); border-radius: 12px;
  padding: 32px 34px; margin: 44px 0; color: #fff;
}
.cta-card h3 { color: #fff; font-size: 21px; line-height: 1.3; margin: 0 0 14px; }
.cta-card p {
  color: oklch(85% 0.03 255); font-size: 14px; line-height: 1.7; margin: 0 0 20px;
}
.cta-card p:last-of-type { margin-bottom: 22px; }
.cta-card .btn { display: inline-flex; align-items: center; gap: 8px; }

.cta-badges {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 18px; padding: 0;
}
.cta-badges span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: oklch(88% 0.03 255);
}
/* Ohne flex-shrink:0 quetscht der Flexbox-Umbruch das Häkchen zu einem Strich. */
.cta-badges svg {
  width: 15px; height: 15px; flex: 0 0 15px; color: var(--gold);
}

@media (max-width: 720px) {
  .cta-card { padding: 26px 22px; margin: 34px 0; }
  .cta-card h3 { font-size: 19px; }
  .cta-badges { gap: 9px 16px; }
}