/* ================================================================
   Taxi Wesner — Custom Design  (final)
   Prefix tw-  |  Canvas-safe  |  Mobile-first
================================================================ */

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --y:     #FFD120;
  --yd:    #e6bc00;
  --yr:    255,209,32;
  --k:     #0d0d0d;
  --k2:    #161616;
  --g1:    #f7f7f7;
  --g2:    #ebebeb;
  --g3:    #cfcfcf;
  --tx:    #1a1a1a;
  --txm:   #666;
  --w:     #fff;
  --r:     14px;
  --rs:    8px;
  --sh:    0 2px 18px rgba(0,0,0,.07);
  --shm:   0 8px 40px rgba(0,0,0,.13);
  --shl:   0 20px 80px rgba(0,0,0,.20);
  --ease:  cubic-bezier(.4,0,.2,1);
  --font:  'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ══ CRITICAL LAYOUT FIXES ═══════════════════════════════════ */
/* 1. Kill position:fixed on slider-parallax-inner */
.slider-parallax-inner { position: relative !important; }
/* 2. #content must cover slider */
#content {
  position: relative !important; z-index: 10 !important;
  background: var(--w) !important; overflow: hidden !important;
}
/* 3. Kill translateY(-50%) on .slider-feature */
.slider-feature {
  transform: none !important; position: relative !important;
  z-index: 10 !important; padding: 0 !important; margin: 0 !important;
}
/* 4. All custom sections need opaque bg */
.tw-s { position: relative; z-index: 10; background: var(--w); }

/* ══ BASE ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font) !important;
  color: var(--tx) !important;
  background: var(--w) !important;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--k); text-decoration: none; }
a:hover { color: var(--yd); }

/* ══ ANNOUNCEMENT BAR ════════════════════════════════════════ */
.tw-bar {
  background: var(--k); color: rgba(255,255,255,.65);
  font-size: 12.5px; font-weight: 500; letter-spacing: .3px;
  text-align: center; padding: 9px 16px;
  position: relative; z-index: 10001;
}
.tw-bar a {
  color: var(--y); font-weight: 700; margin: 0 4px;
  transition: color .2s;
}
.tw-bar a:hover { color: #fff; text-decoration: underline; }

/* ══ HEADER ══════════════════════════════════════════════════ */
#header, #header-wrap {
  background: var(--w) !important;
  border-bottom: 3px solid var(--y) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.06) !important;
}
/* ── Desktop: logo & nav vertically centered ── */
@media (min-width: 992px) {
  #header-wrap > .container {
    display: flex !important; align-items: center !important;
    flex-wrap: nowrap !important;
  }
  #logo {
    display: flex !important; align-items: center !important;
    float: none !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
  }
  #logo img { height: 44px !important; width: auto !important; display: block !important; }
  #primary-menu {
    display: flex !important; align-items: center !important;
    flex: 1 !important; float: none !important; margin: 0 !important;
  }
  #primary-menu > ul { display: flex !important; align-items: center !important; float: none !important; }
  #primary-menu ul.align-self-start,
  #primary-menu ul.align-self-end { align-self: center !important; }
  #primary-menu ul > li { display: flex !important; align-items: center !important; }
  #primary-menu ul > li > a {
    display: flex !important; align-items: center !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
  }
}

/* ── Mobile nav (≤ 991px) — respect Canvas JS, style only ── */
@media (max-width: 991px) {
  /* 1. Header: fixed 64px bar, white, yellow border stays */
  #header { position: relative !important; }
  #header-wrap {
    height: 64px !important;
    display: flex !important; align-items: center !important;
    padding: 0 !important;
  }
  #header-wrap > .container {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    height: 64px !important;
  }

  /* 2. Logo: left, single, vertically centered */
  #logo {
    position: static !important;
    float: none !important;
    height: 64px !important;           /* match header height */
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    margin: 0 !important;
    display: flex !important; align-items: center !important;
  }
  /* Only show standard-logo; retina-logo is a duplicate — hide it */
  #logo a.standard-logo {
    display: flex !important; align-items: center !important;
  }
  #logo a.retina-logo { display: none !important; }
  #logo img { height: 36px !important; width: auto !important; }

  /* 3. Burger button: right-aligned, clean pill */
  #primary-menu-trigger {
    position: static !important;
    float: none !important;
    order: 2;
    flex-shrink: 0;
    width: 44px !important; height: 44px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: var(--k) !important;
    border-radius: var(--rs) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    top: auto !important; left: auto !important;
    margin: 0 !important;
    cursor: pointer;
  }
  #primary-menu-trigger i {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    top: 0 !important;
  }

  /* 4. Nav panel: full-width below header, Canvas JS handles show/hide */
  #primary-menu {
    display: block !important;
    position: absolute !important;
    top: 64px !important; left: 0 !important; right: 0 !important;
    width: 100% !important;
    background: var(--w) !important;
    border-top: 3px solid var(--y) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.14) !important;
    z-index: 9999 !important;
    float: none !important;
    margin: 0 !important; padding: 0 !important;
  }
  /* Canvas JS sets display:block on ul when open */
  #primary-menu > ul {
    float: none !important;
    width: 100% !important;
    padding: 6px 0 16px !important;
    margin: 0 !important;
    border: 0 !important;
  }
  #primary-menu > ul > li {
    float: none !important;
    margin: 0 !important;
    border-top: 1px solid var(--g2) !important;
  }
  #primary-menu > ul > li:first-child { border-top: 0 !important; }
  /* Hide the empty span.menu-bg row */
  #primary-menu > ul > li:has(> span.menu-bg) { display: none !important; }

  #primary-menu > ul > li > a,
  #primary-menu > ul > li > a > div {
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: var(--k) !important;
    padding: 15px 20px !important;
    border: 0 !important;
    display: block !important;
    line-height: 1.4 !important;
  }
  #primary-menu > ul > li > a:hover,
  #primary-menu > ul > li > a:hover > div {
    color: var(--yd) !important;
    background: var(--g1) !important;
  }

  /* 5. CTA phone in mobile menu — yellow full-width */
  .tw-nav-cta {
    display: block !important; width: 100% !important;
    padding: 12px 16px 4px !important;
    border-top: 1px solid var(--g2) !important;
    margin-top: 4px !important;
  }
  .tw-nav-cta a,
  .tw-nav-cta a > div {
    display: flex !important; justify-content: center !important; align-items: center !important;
    background: var(--y) !important; color: var(--k) !important;
    border-radius: var(--rs) !important;
    padding: 13px 20px !important;
    font-weight: 800 !important; font-size: 15px !important;
    width: 100% !important; text-align: center !important;
    box-shadow: 0 3px 14px rgba(var(--yr),.4) !important;
  }

  /* Announcement bar compact */
  .tw-bar { font-size: 11px !important; padding: 7px 12px !important; }
}

@media (min-width: 992px) {
  #primary-menu ul > li > a {
    font-family: var(--font) !important;
    font-weight: 600 !important; font-size: 12px !important;
    letter-spacing: 1px !important; text-transform: uppercase !important;
    color: var(--k) !important; transition: color .2s !important;
  }
  #primary-menu ul > li > a:hover,
  #primary-menu ul > li > a.active { color: var(--yd) !important; }
  #primary-menu ul li > a > div:after { display: none !important; }

  .tw-nav-cta a {
    background: var(--y) !important; color: var(--k) !important;
    border-radius: 50px !important; padding: 9px 22px !important;
    font-weight: 700 !important; font-size: 13px !important;
    white-space: nowrap; box-shadow: 0 3px 14px rgba(var(--yr),.45);
    transition: all .25s var(--ease); border-top: 0 !important;
  }
  .tw-nav-cta a:hover {
    background: var(--k) !important; color: var(--w) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.2); transform: translateY(-1px);
  }
  #header .menu-bg, #header .menu-bg:after { background: var(--w) !important; }
  #header .menu-bg:before { border-bottom-color: var(--w) !important; }
}

/* Retina override: responsive.css hides standard-logo on hi-dpi — we always show it */
@media only screen and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2),
       only screen and (max-width: 991px) and (min-resolution: 192dpi),
       only screen and (max-width: 991px) and (min-resolution: 2dppx) {
  #logo a.standard-logo { display: flex !important; }
  #logo a.retina-logo   { display: none  !important; }
}

/* ══ HERO ════════════════════════════════════════════════════ */
#slider .slider-caption { max-width: 680px; }
#slider .slider-caption h1,
#slider .slider-caption h2,
#slider .slider-caption h3 {
  font-family: var(--font) !important;
  font-weight: 800 !important; line-height: 1.1 !important;
  color: #fff !important;
  text-shadow: 0 3px 24px rgba(0,0,0,.55) !important;
  font-size: clamp(1.9rem,4.5vw,3.6rem) !important;
  margin: 0 !important; letter-spacing: -1.5px;
}
.tw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--y); color: var(--k);
  font-size: 10.5px; font-weight: 700;
  padding: 5px 14px; border-radius: 20px;
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px rgba(var(--yr),.5);
}
.tw-hero-sub {
  font-size: 17px; color: rgba(255,255,255,.82);
  margin-top: 12px; font-weight: 400;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.tw-hero-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--y) !important; color: var(--k) !important;
  border-radius: 50px !important;
  padding: 15px 36px !important;
  font-family: var(--font) !important;
  font-weight: 700 !important; font-size: 16px !important;
  text-decoration: none !important;
  transition: all .28s var(--ease);
  box-shadow: 0 4px 28px rgba(var(--yr),.55);
  margin-top: 28px !important;
}
.tw-hero-btn:hover {
  background: rgba(255,255,255,.95) !important; color: var(--k) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
/* Arrow nav */
.slider-arrow-left, .slider-arrow-right { border-color: rgba(255,255,255,.6) !important; }
.slider-arrow-left i, .slider-arrow-right i { color: #fff !important; }

/* ══ QUICK ACTION BAR ════════════════════════════════════════ */
.tw-quick {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background: var(--w);
  box-shadow: 0 4px 32px rgba(0,0,0,.1);
}
.tw-qc {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 28px 12px;
  text-decoration: none !important;
  color: var(--tx) !important;
  font-family: var(--font);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  border-right: 1px solid var(--g2);
  transition: background .22s; position: relative;
}
.tw-qc:last-child { border-right: none; }
.tw-qc::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; height: 3px; width: 0;
  background: var(--y); transition: width .28s var(--ease);
}
.tw-qc:hover::after { width: 100%; }
.tw-qc:hover { background: var(--g1); color: var(--k) !important; }
.tw-qc i {
  font-size: 26px; color: var(--yd) !important;
  top: 0 !important; padding: 0 !important; display: block;
  transition: transform .25s var(--ease);
}
.tw-qc:hover i { transform: translateY(-3px); }

/* ══ SECTION UTILITIES ═══════════════════════════════════════ */
.tw-pad   { padding: 96px 0; }
.tw-pad-s { padding: 64px 0; }
.tw-white  { background: var(--w) !important; }
.tw-light  { background: var(--g1) !important; }
.tw-dark   { background: var(--k2) !important; }
.tw-darker { background: var(--k) !important; }

.tw-eye {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--yd); background: rgba(230,188,0,.12);
  padding: 4px 14px; border-radius: 20px; margin-bottom: 14px;
}
.tw-eye.inv { color: var(--y); background: rgba(255,209,32,.18); }
.tw-h {
  font-family: var(--font) !important;
  font-size: clamp(1.75rem,2.8vw,2.5rem) !important;
  font-weight: 800 !important; line-height: 1.15 !important;
  letter-spacing: -.5px; color: var(--k) !important;
  margin-bottom: 14px !important;
}
.tw-h.inv { color: var(--w) !important; }
.tw-lead { font-size: 16px; line-height: 1.8; color: var(--txm); max-width: 580px; margin: 0 auto 48px; }
.tw-lead.inv { color: rgba(255,255,255,.58); }

/* ══ NUMBERS ROW ═════════════════════════════════════════════ */
.tw-numbers {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shm);
}
.tw-nc {
  background: var(--y); padding: 44px 20px; text-align: center;
  border-right: 1px solid rgba(0,0,0,.08);
}
.tw-nc:last-child { border-right: none; }
.tw-nc:nth-child(even) { background: var(--yd); }
.tw-nc-big {
  font-size: clamp(2.2rem,3.5vw,3rem); font-weight: 900;
  color: var(--k); line-height: 1; letter-spacing: -2px;
}
.tw-nc-lbl { font-size: 11px; font-weight: 600; color: rgba(0,0,0,.6); text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }

/* ══ SPLIT LAYOUT (Über uns) ═════════════════════════════════ */
.tw-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
}
.tw-split-img {
  position: relative; border-radius: 20px;
  overflow: hidden; box-shadow: var(--shl);
}
.tw-split-img img {
  width: 100%; height: 520px; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.tw-split-img:hover img { transform: scale(1.03); }
.tw-split-img::before {
  content: ''; position: absolute;
  top: -10px; right: -10px; width: 100px; height: 100px;
  background: var(--y); border-radius: 18px; z-index: -1;
}
.tw-split-img::after {
  content: ''; position: absolute;
  bottom: -10px; left: -10px; width: 70px; height: 70px;
  background: var(--k); border-radius: 12px; z-index: -1;
}
.tw-photo-badge {
  position: absolute; bottom: 24px; left: 24px;
  background: var(--y); color: var(--k);
  border-radius: var(--r); padding: 16px 22px; line-height: 1.25;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.tw-photo-badge strong { display: block; font-size: 34px; font-weight: 900; letter-spacing: -1px; }
.tw-photo-badge span { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }

.tw-about-body p { font-size: 15.5px; line-height: 1.88; color: var(--tx); margin-bottom: 14px; }

.tw-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.tw-stat {
  flex: 1 1 110px; background: var(--w); border-radius: var(--rs);
  box-shadow: var(--sh); padding: 20px 14px; text-align: center;
  border-top: 4px solid var(--y);
}
.tw-stat b { display: block; font-size: 1.9rem; font-weight: 900; color: var(--k); line-height: 1; }
.tw-stat small { font-size: 10.5px; font-weight: 600; color: var(--txm); text-transform: uppercase; letter-spacing: .7px; margin-top: 5px; display: block; }
.tw-pays { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.tw-pay { background: var(--g2); border: 1px solid var(--g3); border-radius: var(--rs); padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--tx); }

/* ══ SERVICE CARDS ═══════════════════════════════════════════ */
.tw-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.tw-sc {
  background: var(--w); border-radius: var(--r);
  padding: 32px 26px; box-shadow: var(--sh);
  border: 2px solid transparent;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .28s var(--ease), box-shadow .28s, border-color .28s;
  position: relative; overflow: hidden;
}
.tw-sc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--y); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.tw-sc:hover::before { transform: scaleX(1); }
.tw-sc:hover { transform: translateY(-6px); box-shadow: var(--shl); border-color: var(--g2); }
.tw-sc-ico {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(var(--yr),.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; transition: background .25s;
}
.tw-sc-ico img { width: 38px; height: 38px; object-fit: contain; }
.tw-sc:hover .tw-sc-ico { background: var(--y); }
.tw-sc h3 { font-size: 16px !important; font-weight: 700 !important; color: var(--k) !important; margin: 0 !important; }
.tw-sc p, .tw-sc ul { font-size: 14px; color: var(--txm); line-height: 1.78; margin: 0; }
.tw-sc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tw-sc ul li { display: flex; align-items: flex-start; gap: 6px; }
.tw-sc ul li::before { content: "✓"; color: var(--yd); font-weight: 700; flex-shrink: 0; }

/* Krankenhaus image card */
.tw-kranken-card {
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shm); position: relative;
}
.tw-kranken-card img { width: 100%; display: block; object-fit: cover; }
.tw-kranken-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 100%);
  padding: 32px 28px 24px;
}
.tw-kranken-overlay h3 { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.tw-kranken-overlay p { color: rgba(255,255,255,.7); font-size: 14px; margin: 0 0 14px; }
.tw-kranken-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--y); color: var(--k) !important;
  border-radius: 50px; padding: 10px 22px;
  font-weight: 700; font-size: 14px;
  text-decoration: none !important;
  transition: all .25s var(--ease);
}
.tw-kranken-btn:hover { background: #fff; transform: translateY(-2px); }

/* ══ USP CARDS ═══════════════════════════════════════════════ */
.tw-usps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tw-usp-card {
  background: var(--w);
  border: 2px solid var(--g2);
  border-radius: 14px;
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--sh);
  transition: box-shadow .25s, transform .25s;
}
.tw-usp-card:hover {
  box-shadow: var(--shm);
  transform: translateY(-4px);
}
.tw-usp-ico {
  width: 52px; height: 52px; border-radius: 13px; background: var(--y);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  flex-shrink: 0;
}
.tw-usp-text { display: flex; flex-direction: column; gap: 6px; }
.tw-usp-card h4 {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--k) !important; margin: 0 !important;
}
.tw-usp-card p { font-size: 13.5px; color: var(--txm); margin: 0; line-height: 1.65; }

/* ══ REVIEW CARDS ════════════════════════════════════════════ */
.tw-reviews { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.tw-rv {
  background: var(--w); border-radius: var(--r);
  padding: 28px 24px; box-shadow: var(--sh);
  border: 1px solid var(--g2);
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  transition: box-shadow .25s, transform .25s;
}
.tw-rv:hover { box-shadow: var(--shm); transform: translateY(-3px); }
.tw-stars { color: #f5c000; font-size: 14px; letter-spacing: 3px; }
.tw-rv-text { font-size: 14.5px; line-height: 1.78; color: var(--tx); font-style: italic; flex: 1; }
.tw-rvr { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tw-av { width: 42px; height: 42px; border-radius: 50%; background: var(--y); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--k); flex-shrink: 0; }
.tw-rn { font-weight: 700; font-size: 14px; color: var(--k); }
.tw-rm { font-size: 12px; color: var(--txm); }

/* ══ FAQ ═════════════════════════════════════════════════════ */
.tw-faq-wrap { max-width: 740px; margin: 0 auto; }
.tw-faq { border: 1px solid var(--g3); border-radius: var(--rs); overflow: hidden; margin-bottom: 10px; transition: box-shadow .2s; }
.tw-faq:hover { box-shadow: var(--sh); }
.tw-fq {
  width: 100%; background: var(--w); border: none; padding: 18px 24px;
  text-align: left; font-size: 14.5px; font-weight: 600; color: var(--k);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: background .22s; font-family: var(--font); line-height: 1.4;
}
.tw-fq:hover, .tw-faq.open .tw-fq { background: var(--y); }
.tw-fi { font-size: 22px; font-weight: 700; flex-shrink: 0; transition: transform .25s var(--ease); line-height: 1; }
.tw-faq.open .tw-fi { transform: rotate(45deg); }
.tw-fa { display: none; padding: 16px 24px 20px; font-size: 14px; color: var(--txm); line-height: 1.78; background: var(--g1); border-top: 1px solid var(--g3); }
.tw-faq.open .tw-fa { display: block; }

/* ══ CTA BANNER ══════════════════════════════════════════════ */
.tw-cta {
  background: var(--y); border-radius: 20px;
  padding: 64px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.tw-cta::before { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(0,0,0,.05); top: -100px; right: -100px; pointer-events: none; }
.tw-cta::after  { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(0,0,0,.04); bottom: -70px; left: -70px; pointer-events: none; }
.tw-cta h2 { font-size: clamp(1.8rem,3.2vw,2.4rem) !important; font-weight: 800 !important; color: var(--k) !important; margin-bottom: 10px !important; position: relative; z-index: 1; letter-spacing: -.5px; }
.tw-cta p { color: rgba(0,0,0,.55); font-size: 16px; margin-bottom: 32px; position: relative; z-index: 1; }
.tw-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; z-index: 1; }
.tw-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--k); color: var(--w) !important;
  padding: 18px 44px; border-radius: 50px;
  font-size: 21px; font-weight: 900; text-decoration: none !important;
  letter-spacing: -.3px; box-shadow: 0 4px 28px rgba(0,0,0,.3);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.tw-cta-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 48px rgba(0,0,0,.38); color: var(--w) !important; }
.tw-cta-email {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.12); color: var(--k) !important;
  padding: 18px 32px; border-radius: 50px;
  font-size: 15px; font-weight: 700; text-decoration: none !important;
  border: 2px solid rgba(0,0,0,.2);
  transition: background .25s;
}
.tw-cta-email:hover { background: rgba(0,0,0,.2); color: var(--k) !important; }

/* ══ KONTAKT ═════════════════════════════════════════════════ */
.tw-contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.tw-map { width: 100%; height: 380px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shm); }
.tw-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.tw-info { background: var(--w); border-radius: var(--r); box-shadow: var(--shm); overflow: hidden; }
.tw-info-hd { background: var(--k); padding: 22px 26px; display: flex; align-items: center; gap: 14px; }
.tw-info-hd img { height: 34px; filter: brightness(0) invert(1); }
.tw-info-hd-t { font-size: 13.5px; font-weight: 700; color: var(--w); }
.tw-info-hd-s { font-size: 11.5px; color: rgba(255,255,255,.45); margin-top: 2px; }
.tw-info-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 26px; border-bottom: 1px solid var(--g2); }
.tw-info-row:last-of-type { border-bottom: none; }
.tw-info-ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--yr),.14); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--yd); flex-shrink: 0; }
.tw-info-lbl { font-size: 10.5px; font-weight: 700; color: var(--txm); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 2px; }
.tw-info-val { font-size: 14.5px; font-weight: 600; color: var(--k); }
.tw-info-val a { color: var(--k); transition: color .2s; }
.tw-info-val a:hover { color: var(--yd); }
.tw-socials { display: flex; gap: 8px; }
.tw-socials a { width: 38px; height: 38px; border-radius: 9px; background: var(--g2); display: flex !important; align-items: center; justify-content: center; color: var(--tx) !important; font-size: 15px !important; line-height: 1 !important; transition: background .2s, color .2s; }
.tw-socials a:hover { background: var(--y); color: var(--k) !important; }

/* ══ FOOTER ══════════════════════════════════════════════════ */
.tw-footer { background: var(--k) !important; color: var(--w); padding: 76px 0 0; position: relative; z-index: 10; }
.tw-fg { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; }
.tw-fl img { height: 40px; filter: brightness(0) invert(1); margin-bottom: 18px; display: block; }
.tw-footer p, .tw-footer address { font-size: 14px; color: rgba(255,255,255,.48); line-height: 1.88; font-style: normal; }
.tw-footer h5 { font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 2px; color: var(--y) !important; margin-bottom: 22px !important; }
.tw-footer ul { list-style: none; padding: 0; margin: 0; }
.tw-footer ul li a { font-size: 14px; color: rgba(255,255,255,.48); display: block; padding: 4px 0; transition: color .2s; }
.tw-footer ul li a:hover { color: var(--y); }
.tw-cl { color: rgba(255,255,255,.48) !important; font-size: 14px; display: block; line-height: 2.1; transition: color .2s; }
.tw-cl:hover { color: var(--y) !important; }
.tw-ftr-socials { display: flex; gap: 9px; margin-top: 22px; }
.tw-ftr-socials a { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.08); display: flex !important; align-items: center; justify-content: center; color: rgba(255,255,255,.6) !important; font-size: 15px !important; line-height: 1 !important; transition: background .2s, color .2s; }
.tw-ftr-socials a:hover { background: var(--y); color: var(--k) !important; }
.tw-fbar { background: rgba(0,0,0,.45); margin-top: 56px; padding: 18px 0; font-size: 12.5px; color: rgba(255,255,255,.3); }
.tw-fbar a { color: rgba(255,255,255,.48); transition: color .2s; }
.tw-fbar a:hover { color: var(--y); }

/* ══ FLOATING BUTTONS ════════════════════════════════════════ */
#telefonButton, #messageButton {
  position: fixed !important; right: 22px !important;
  width: 54px !important; height: 54px !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 19px !important; z-index: 9999 !important;
  text-decoration: none !important;
  transition: transform .25s var(--ease), box-shadow .25s !important;
}
#telefonButton { bottom: 90px !important; background: var(--y) !important; color: var(--k) !important; box-shadow: 0 4px 20px rgba(var(--yr),.6) !important; }
#messageButton { bottom: 26px !important; background: var(--k2) !important; color: var(--w) !important; box-shadow: 0 4px 20px rgba(0,0,0,.3) !important; }
#telefonButton:hover, #messageButton:hover { transform: scale(1.12) translateY(-2px) !important; }
#gotoTop { display: none !important; }

/* ══ SCROLL POPUP ════════════════════════════════════════════ */
.tw-popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 99998; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
  padding: 20px;
}
.tw-popup-overlay.tw-visible { opacity: 1; pointer-events: all; }

.tw-popup {
  background: var(--w); border-radius: 20px;
  max-width: 500px; width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  overflow: hidden;
  transform: translateY(30px) scale(.96);
  transition: transform .35s var(--ease);
  position: relative;
}
.tw-popup-overlay.tw-visible .tw-popup { transform: translateY(0) scale(1); }

.tw-popup-head {
  background: var(--y);
  padding: 28px 28px 20px;
  text-align: center; position: relative;
}
.tw-popup-head h3 { font-size: 22px; font-weight: 800; color: var(--k); margin: 0 0 6px; }
.tw-popup-head p { font-size: 14px; color: rgba(0,0,0,.6); margin: 0; }
.tw-popup-close {
  position: absolute; top: 14px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.12); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--k);
  transition: background .2s;
}
.tw-popup-close:hover { background: rgba(0,0,0,.22); }
.tw-popup-body { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.tw-popup-phone {
  display: flex; align-items: center; gap: 14px;
  background: var(--k); color: var(--w) !important;
  border-radius: var(--r); padding: 18px 24px;
  text-decoration: none !important;
  transition: background .25s, transform .25s;
}
.tw-popup-phone:hover { background: var(--k2); transform: scale(1.02); color: var(--w) !important; }
.tw-popup-phone-ico { font-size: 28px; flex-shrink: 0; }
.tw-popup-phone-num { font-size: 22px; font-weight: 900; line-height: 1; }
.tw-popup-phone-lbl { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.tw-popup-or { text-align: center; font-size: 12px; color: var(--txm); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.tw-popup-email {
  display: flex; align-items: center; gap: 12px;
  background: var(--g1); border: 1px solid var(--g3);
  color: var(--k) !important; border-radius: var(--r);
  padding: 14px 20px; text-decoration: none !important;
  font-weight: 600; font-size: 14px;
  transition: background .2s;
}
.tw-popup-email:hover { background: var(--g2); color: var(--k) !important; }
.tw-popup-dismiss { background: none; border: none; cursor: pointer; font-size: 12.5px; color: var(--txm); text-align: center; padding: 4px; font-family: var(--font); transition: color .2s; }
.tw-popup-dismiss:hover { color: var(--k); }

/* ══ MOBILE RESPONSIVE ═══════════════════════════════════════ */
@media (max-width: 991px) {
  .tw-pad   { padding: 64px 0; }
  .tw-pad-s { padding: 44px 0; }
  .tw-split { grid-template-columns: 1fr; gap: 40px; }
  .tw-split-img { order: -1; }
  .tw-split-img img { height: 340px; }
  .tw-services { grid-template-columns: repeat(2,1fr); }
  .tw-usps { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .tw-reviews { grid-template-columns: 1fr; }
  .tw-numbers { grid-template-columns: repeat(2,1fr); }
  .tw-contact-wrap { grid-template-columns: 1fr; }
  .tw-fg { grid-template-columns: 1fr; gap: 36px; }
  .tw-cta { padding: 48px 28px; }
}

@media (max-width: 767px) {
  .tw-bar { font-size: 11.5px; }

  /* USP: 1 Spalte, Karte horizontal — Icon links, Text-Block rechts */
  .tw-usps { grid-template-columns: 1fr; gap: 10px; }
  .tw-usp-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 18px 16px;
  }
  .tw-usp-ico { width: 44px; height: 44px; font-size: 20px; flex-shrink: 0; }
  .tw-usp-text { gap: 3px; }
  .tw-usp-card h4 { font-size: 14px !important; margin: 0 !important; }
  .tw-usp-card p { font-size: 12.5px; line-height: 1.5; }

  .tw-quick { grid-template-columns: repeat(2,1fr); }
  .tw-qc { padding: 22px 10px; font-size: 10px; }
  .tw-qc i { font-size: 22px; }
  .tw-services { grid-template-columns: 1fr; }
  .tw-cta { padding: 40px 20px; }
  .tw-cta-btn { font-size: 18px; padding: 15px 28px; }
  .tw-hero-btn { font-size: 14px !important; padding: 13px 26px !important; }
  .tw-map { height: 280px; }
  #slider .slider-caption h1,
  #slider .slider-caption h2,
  #slider .slider-caption h3 { font-size: clamp(1.7rem,6vw,2.4rem) !important; letter-spacing: -.5px; }
  .tw-hero-sub { font-size: 14px; }
  .tw-popup-phone-num { font-size: 18px; }
  .tw-split-img::before, .tw-split-img::after { display: none; }
}

@media (max-width: 479px) {
  .tw-numbers { grid-template-columns: repeat(2,1fr); }
  .tw-nc { padding: 30px 14px; }
  .tw-quick { grid-template-columns: repeat(2,1fr); }
}

/* ══ SUBPAGE HERO ════════════════════════════════════════════ */
.tw-subpage-hero {
  background: linear-gradient(135deg, var(--k) 0%, #1a1a1a 100%);
  padding: 80px 0 60px;
  position: relative; z-index: 10;
  border-bottom: 4px solid var(--y);
}
.tw-subpage-hero .tw-chip { margin-bottom: 14px; }
.tw-subpage-hero h1 {
  font-family: var(--font) !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
  letter-spacing: -1px;
}
.tw-subpage-hero p {
  color: rgba(255,255,255,.6);
  font-size: 16px; margin: 0;
}

/* ══ LEGAL CONTENT ═══════════════════════════════════════════ */
.tw-legal-wrap {
  max-width: 860px; margin: 0 auto;
}
.tw-legal-card {
  background: var(--g1);
  border-radius: var(--r);
  padding: 28px 32px;
  margin-bottom: 20px;
  border-left: 4px solid var(--y);
}
.tw-legal-card h2 {
  font-family: var(--font) !important;
  font-size: 17px !important; font-weight: 700 !important;
  color: var(--k) !important; margin: 0 0 12px !important;
}
.tw-legal-card p { margin: 0; color: var(--tx); line-height: 1.75; }
.tw-legal-card a { color: var(--k); font-weight: 600; text-decoration: underline; }

/* Prose variant for Datenschutz (longer text) */
.tw-legal-prose { max-width: 860px; margin: 0 auto; }
.tw-legal-prose h2 {
  font-family: var(--font) !important;
  font-size: 20px !important; font-weight: 800 !important;
  color: var(--k) !important;
  margin: 44px 0 16px !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--g2);
}
.tw-legal-prose h2:first-child { margin-top: 0 !important; }
.tw-legal-prose h3 {
  font-family: var(--font) !important;
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--k) !important; margin: 28px 0 8px !important;
}
.tw-legal-prose h4 {
  font-family: var(--font) !important;
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--txm) !important; text-transform: uppercase;
  letter-spacing: .6px; margin: 20px 0 6px !important;
}
.tw-legal-prose p { color: var(--tx); line-height: 1.8; margin-bottom: 14px; }
.tw-legal-prose a { color: var(--k); font-weight: 600; text-decoration: underline; }
.tw-legal-prose ul { padding-left: 20px; margin-bottom: 14px; }
.tw-legal-prose ul li { color: var(--tx); line-height: 1.8; margin-bottom: 6px; }