/* ============================================================
   SBV Transport — landing
   Tokens, type, layout. No framework.
   Palette inspired by the SBV Transport logo: chrome silver, charcoal, steel blue.
   ============================================================ */

:root{
  /* cool industrial palette — silver + charcoal + steel */
  --bg:          #F1F2F4;   /* cool off-white background */
  --bg-2:        #E8EAED;   /* lighter panel */
  --bg-3:        #D6D9DD;   /* divider */
  --ink:         #14171D;   /* primary text — deep charcoal, like logo wordmark */
  --ink-2:       #2C313A;   /* secondary text */
  --ink-3:       #5C616B;   /* muted, labels */
  --steel:       #2A5D9A;   /* brand accent — steel blue */
  --steel-dark:  #1B4474;
  --silver:      #B8BCC2;   /* metallic silver */
  --silver-2:    #8E939B;
  --night:       #14171D;   /* dark sections */
  --night-2:     #1C2028;

  /* type — sans only, no decorative serif */
  --f-sans:   "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:   "Manrope", system-ui, sans-serif;

  /* layout */
  --maxw: 1320px;
  --pad-x: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 9vw, 140px);
  --radius: 14px;
}

/* reset-ish */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}

/* selection */
::selection{background: var(--steel); color: #fff}

/* ---------- typography ---------- */
.display{
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-size: clamp(2.6rem, 7.5vw, 6.2rem);
  margin: 0 0 .6em;
  color: var(--ink);
}
.display em{
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--steel);
}
.display--md{font-size: clamp(2.1rem, 5vw, 4.2rem);}
.display--lg{font-size: clamp(2.8rem, 7vw, 5.6rem);}

.h-lg{
  font-family: var(--f-sans);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 600;
  margin: 0 0 .55em;
  color: var(--ink);
}
.h-lg em{
  font-style: italic;
  font-weight: 400;
  color: var(--steel);
}

.lede{
  font-family: var(--f-body);
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  color: var(--ink-2);
  max-width: 52ch;
  line-height: 1.55;
}

.kicker{
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.kicker--accent{color: var(--steel)}
.kicker--light{color: rgba(241,242,244,.7)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family: var(--f-sans);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 28px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--bg-3);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}
.eyebrow__dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--steel);
  box-shadow: 0 0 0 4px rgba(42,93,154,.18);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(42,93,154,.18)}
  50%{box-shadow:0 0 0 7px rgba(42,93,154,.0)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: .96rem;
  padding: 12px 20px;
  border-radius: 8px;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn--solid{
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(20,23,29,.45);
}
.btn--solid:hover{background: var(--steel); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(42,93,154,.5)}
.btn--ghost{
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn--ghost:hover{background: var(--ink); color: #fff}
.btn--lg{padding: 16px 26px; font-size: 1rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.link-arrow:hover{gap: 14px; color: var(--steel); border-color: var(--steel)}

/* ---------- ticker (top bar) ---------- */
.ticker{
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ticker__track{
  display:flex;align-items:center;gap:28px;
  white-space: nowrap;
  padding: 9px 0;
  animation: tickerScroll 48s linear infinite;
  font-family: var(--f-sans);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(241,242,244,.78);
  font-weight: 500;
}
.ticker__track span{padding-left: 28px}
.ticker__track i{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--steel);
}
@keyframes tickerScroll{
  from{transform: translateX(0)}
  to  {transform: translateX(-50%)}
}

/* ---------- nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  display:flex;align-items:center;justify-content:space-between;
  gap: 24px;
  padding: 14px var(--pad-x);
  background: rgba(241,242,244, .85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.logo{
  display:inline-flex;align-items:center;
  line-height: 1;
}
.logo img{
  height: 64px;
  width: auto;
  display: block;
}

.nav__links{display:flex;gap: 28px}
.nav__links a{
  font-family: var(--f-sans);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: -.005em;
  position:relative;
  color: var(--ink);
  padding: 6px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom: -4px;
  height: 2px; background: var(--steel);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover::after{transform: scaleX(1)}

.nav__cta{display:flex;gap:10px}

.burger{
  display:none;
  width:42px;height:42px;border-radius:8px;
  border:1px solid var(--ink);
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.burger span{width:16px;height:1.5px;background:var(--ink);transition:transform .3s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

.mob-menu{
  position:fixed;inset:auto 12px 12px 12px; top: 90px; z-index: 60;
  display:flex;flex-direction:column;gap:18px;
  padding: 24px;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.4);
}
.mob-menu[hidden]{display:none}
.mob-menu a{font-family: var(--f-sans); font-size: 1.2rem; letter-spacing:-.01em; font-weight: 500}
.mob-menu .btn--solid{background: var(--steel); color: #fff; align-self: flex-start}

/* ---------- hero ---------- */
.hero{
  padding: clamp(36px, 6vw, 72px) var(--pad-x) clamp(36px, 6vw, 72px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
.hero__copy{padding-bottom: 12px}
.hero__actions{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-top: clamp(22px, 3vw, 36px);
}

.hero__chips{
  display:flex;flex-wrap:wrap;gap: 28px 40px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--bg-3);
}
.hero__chips li{display:flex;flex-direction:column;gap:4px}
.hero__chips strong{
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
}
.hero__chips span{font-size: .82rem; color: var(--ink-3); letter-spacing: .04em}

.hero__art{
  margin:0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--ink);
  box-shadow: 0 30px 60px -28px rgba(20,23,29,.45);
}
.hero__art img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform: scale(1.04);
  transition: transform 1.2s ease;
}
.hero__art:hover img{transform: scale(1.08)}
.hero__art figcaption{
  position:absolute;left:18px;right:18px;bottom:18px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family: var(--f-sans);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}
.hero__tag{
  background: var(--steel); color: #fff;
  padding: 7px 13px; border-radius: 6px;
}
.hero__route{
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  padding: 7px 13px; border-radius: 6px;
  color: #fff;
}

/* ---------- marquee ---------- */
.marquee{
  background: var(--ink);
  color: #fff;
  padding: clamp(18px, 2vw, 28px) 0;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.marquee__track{
  display:flex;align-items:center;gap: 38px;
  white-space:nowrap;
  animation: tickerScroll 38s linear infinite;
}
.marquee__track span{
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: -.03em;
  padding-left: 38px;
}
.marquee__track b{color: var(--steel); font-weight: 400; font-size: 1.2rem}

/* ---------- section heads ---------- */
.section-head{
  max-width: 880px;
  padding: var(--section-y) var(--pad-x) clamp(36px, 5vw, 64px);
  margin: 0 auto;
}
.section-head__lede{
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: -.4em;
}

/* ---------- LEISTUNGEN ---------- */
.leistungen{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) var(--section-y);
}
.service{
  display:grid;
  grid-template-columns: 64px 1.1fr 1fr;
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
  padding: clamp(44px, 5vw, 80px) 0;
  border-top: 1px solid var(--bg-3);
}
.service:last-of-type{border-bottom: 1px solid var(--bg-3)}
.service__num{
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2rem, 3vw, 2.8rem);
  color: var(--steel);
  line-height: 1;
  letter-spacing: -.04em;
}
.service--02{grid-template-columns: 64px 1fr 1.1fr}
.service--02 .service__img{order:3}
.service--02 .service__body{order:2}
.service--02 .service__num{order:1}
@media (min-width: 880px){
  .service--02 .service__img{order:1}
}

.service__img{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/3;
  background: var(--bg-2);
  box-shadow: 0 18px 40px -24px rgba(20,23,29,.35);
}
.service__img img{width:100%;height:100%;object-fit:cover; transition: transform 1s ease}
.service:hover .service__img img{transform: scale(1.04)}
.service__body p{color: var(--ink-2); max-width: 56ch; margin: 0 0 1em}
.service__list{
  margin: 1.2em 0 1.6em;
  display:grid;gap:8px;
}
.service__list li{
  position: relative; padding-left: 22px;
  font-family: var(--f-sans);
  font-weight: 500;
  letter-spacing: -.005em;
  font-size: .98rem;
  color: var(--ink);
}
.service__list li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:10px;height:2px;background: var(--steel);
}

/* ---------- BAND (why us) ---------- */
.band{
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--night);
}
.band__img{position:absolute;inset:0; z-index:0}
.band__img img{width:100%;height:100%;object-fit:cover;opacity:.42; filter: grayscale(.4) contrast(1.05)}
.band__img::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,23,29,.55), rgba(20,23,29,.95));
}
.band__copy{
  position: relative; z-index:1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(80px, 9vw, 140px) var(--pad-x);
}
.band__h{margin: .2em 0 1em; color: #fff}
.band__h em{color: var(--silver); font-style: italic; font-weight: 400}
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 38px;
}
.stats > div{display:flex;flex-direction:column;gap:6px}
.stats b{
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
}
.stats span{font-size: .9rem; color: rgba(241,242,244,.7); max-width: 22ch}

/* ---------- ABLAUF ---------- */
.ablauf{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) var(--section-y);
}
.ablauf__steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  counter-reset: ablauf;
}
.ablauf__steps li{
  position: relative;
  padding: 36px 32px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--bg-3);
  box-shadow: 0 12px 30px -22px rgba(20,23,29,.18);
}
.step__num{
  font-family: var(--f-sans);
  font-style: italic;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -.04em;
  color: var(--steel);
  line-height: 1;
  display:block;
  margin-bottom: 22px;
}
.ablauf__steps h4{
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -.025em;
  margin: 0 0 .4em;
}
.ablauf__steps p{margin: 0; color: var(--ink-2)}

/* ---------- ÜBER ---------- */
.ueber{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) var(--section-y);
}
.ueber__grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.ueber__copy p{color: var(--ink-2); max-width: 58ch}
.signature{
  margin-top: 28px;
  font-family: var(--f-sans);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--steel);
  letter-spacing: -.01em;
}
.ueber__card{
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 32px;
  position: sticky;
  top: 100px;
  box-shadow: 0 30px 60px -28px rgba(20,23,29,.4);
}
.ueber__card .kicker{color: var(--silver); margin-bottom: 22px; display:block}
.ueber__card dl{margin:0;display:grid;gap: 18px}
.ueber__card dl > div{display:grid;grid-template-columns: 1fr 1.4fr; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08)}
.ueber__card dl > div:last-child{border:0;padding-bottom:0}
.ueber__card dt{
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(241,242,244,.55);
}
.ueber__card dd{margin:0; font-size: .98rem; line-height:1.4}

/* ---------- KONTAKT ---------- */
.kontakt{
  background: var(--ink);
  color: #fff;
}
.kontakt__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.kontakt__copy h2{color: #fff; margin-bottom: .35em}
.kontakt__copy h2 em{color: var(--silver); font-style: italic; font-weight: 400}
.kontakt__lede{color: rgba(241,242,244,.78); max-width: 46ch}

.kontakt__cards{display:grid;gap:14px}
.kcard{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label arrow"
    "value value"
    "hint hint";
  gap: 6px 12px;
  padding: 26px 28px;
  background: var(--night-2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.kcard:hover:not(.kcard--static){
  background: var(--steel);
  border-color: var(--steel);
  transform: translateY(-2px);
}
.kcard:hover:not(.kcard--static) .kcard__hint{color: rgba(255,255,255,.85)}
.kcard__label{grid-area: label; font-family: var(--f-sans); font-weight: 600; font-size: .76rem; letter-spacing:.16em; text-transform: uppercase; color: rgba(241,242,244,.55)}
.kcard__value{grid-area: value; font-family: var(--f-sans); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.025em; line-height: 1.15}
.kcard__hint{grid-area: hint; font-size: .92rem; color: rgba(241,242,244,.55)}
.kcard:not(.kcard--static)::after{
  content:"→";
  grid-area: arrow;
  font-family: var(--f-sans);
  font-size: 1.1rem;
  align-self: start;
  color: rgba(241,242,244,.45);
  transition: transform .3s ease;
}
.kcard:hover:not(.kcard--static)::after{transform: translateX(4px); color: #fff}

/* ---------- FOOTER ---------- */
.foot{
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--bg-3);
}
.foot__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--pad-x) 36px;
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
}
.foot__brand p{margin: 18px 0 0; color: var(--ink-3); max-width: 38ch}
.logo--foot img{height: 72px}
.foot__col h5{
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.foot__col a{
  display:block;padding:6px 0;
  font-family: var(--f-sans);
  font-weight: 500;
  color: var(--ink);
  transition: color .25s ease;
}
.foot__col a:hover{color: var(--steel)}
.foot__base{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad-x) 36px;
  display:flex;justify-content:space-between;align-items:center;
  border-top: 1px solid var(--bg-3);
  font-family: var(--f-sans);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .nav__links, .nav__cta{display:none}
  .burger{display:inline-flex}

  .hero__grid{grid-template-columns: 1fr; gap: 40px}
  .hero__art{aspect-ratio: 16/10}
  .hero__art figcaption{
    top: 14px; bottom: auto;
    left: 14px; right: 14px;
    font-size: .62rem;
    letter-spacing: .14em;
  }
  .hero__tag, .hero__route{
    padding: 5px 10px;
  }

  .service{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 48px 0;
  }
  .service__num{font-size: 2.2rem}
  .service--02 .service__img{order:0}
  .service--02 .service__body{order:0}
  .service__img{aspect-ratio: 16/10}

  .stats{grid-template-columns: repeat(2, 1fr); gap: 24px}

  .ablauf__steps{grid-template-columns: 1fr; gap: 18px}

  .ueber__grid{grid-template-columns: 1fr; gap: 30px}
  .ueber__card{position: static}

  .kontakt__grid{grid-template-columns: 1fr; gap: 40px}

  .foot__grid{grid-template-columns: 1fr 1fr; row-gap: 40px}
  .foot__brand{grid-column: 1 / -1}
}

@media (max-width: 520px){
  .logo img{height: 54px}
  .hero__chips{gap: 18px 22px}
  .marquee__track span{font-size: 1.4rem}
  .stats{grid-template-columns: 1fr 1fr; gap: 18px}
  .stats b{font-size: 1.8rem}
  .foot__base{flex-direction: column; align-items: flex-start; gap: 6px}
  .foot__grid{grid-template-columns: 1fr}
  .ueber__card{padding: 26px}
  .kcard{padding: 22px}
  .ablauf__steps li{padding: 28px 26px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto}
}

/* WhatsApp FAB */
.wa-fab{
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: #25D366;
  color: #0b1d12;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: .01em;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.45), 0 4px 10px -2px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.wa-fab:hover,
.wa-fab:focus-visible{
  background: #1ebe5b;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(0,0,0,.5), 0 6px 14px -3px rgba(0,0,0,.3);
  outline: none;
}
.wa-fab:focus-visible{ box-shadow: 0 0 0 3px rgba(37,211,102,.45), 0 14px 30px -10px rgba(0,0,0,.45) }
.wa-fab__icon{
  display: block;
  flex-shrink: 0;
}
.wa-fab__label{ white-space: nowrap }

@media (max-width: 520px){
  .wa-fab{
    padding: 12px;
    border-radius: 50%;
  }
  .wa-fab__label{
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

/* Legal pages (Impressum / Datenschutz) */
.legal{
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) clamp(20px, 5vw, 40px) clamp(80px, 10vw, 140px);
  color: var(--ink, #14171D);
  font-family: 'Manrope', system-ui, sans-serif;
}
.legal__kicker{
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 14px;
}
.legal h1{
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: #14171D;
}
.legal h1 em{ font-style: italic; color: #6b7280; font-weight: 500 }
.legal__lede{
  font-size: 1.1rem;
  color: #4b5563;
  margin: 0 0 40px;
  max-width: 60ch;
}
.legal h2{
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  margin: 40px 0 12px;
  letter-spacing: -.005em;
  color: #14171D;
}
.legal h3{
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 24px 0 8px;
  color: #14171D;
}
.legal p,
.legal li{
  font-size: 1rem;
  line-height: 1.65;
  color: #374151;
}
.legal p{ margin: 0 0 14px }
.legal ul{ padding-left: 1.2em; margin: 0 0 18px }
.legal li{ margin-bottom: 6px }
.legal a{ color: #14171D; text-decoration: underline; text-underline-offset: 3px }
.legal a:hover{ color: #6b7280 }
.legal__meta{
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(20,23,29,.08);
  color: #6b7280;
  font-size: .9rem;
}
.legal address{
  font-style: normal;
  line-height: 1.65;
}