:root {
  --upto-h1: clamp(2rem, 5vw, 3.5rem);
  --upto-h2: clamp(1.5rem, 3vw, 2.25rem);
  --upto-h3: clamp(1.25rem, 2.4vw, 1.6rem);
  --upto-body: clamp(1rem, 1.2vw, 1.125rem);
  --upto-leading: 1.7;
  --upto-h1-global: clamp(1.85rem, 4.8vw, 3.2rem);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html.upto-is-navigating,
body.upto-is-navigating {
  overflow: hidden !important;
}

body.utm-legal-page {
  background: #ffffff;
}

body.utm-legal-page .utm-legal-main {
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: clamp(4.5rem, 8vw, 7rem) !important;
}

body.utm-legal-page .utm-legal-main > article {
  display: block !important;
  width: 100% !important;
}

body.utm-legal-page .utm-legal-main > article > section {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 2rem !important;
  text-align: left !important;
}

body.utm-legal-page .utm-legal-main > article > section:first-of-type {
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

body.utm-legal-page .utm-legal-main > article > section > * {
  text-align: left !important;
}

body.utm-legal-page .utm-legal-main > article > p {
  margin-top: 2.5rem !important;
}

body.utm-legal-page [data-utm-legal-hero="1"] {
  position: relative;
  overflow: hidden;
  min-height: clamp(22rem, 42vw, 34rem);
  display: flex;
  align-items: flex-end;
  padding: clamp(8rem, 13vw, 11rem) 1.5rem clamp(3.25rem, 6vw, 5rem);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.72) 58%, #050505 100%),
    url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body.utm-legal-page .utm-legal-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  margin: 0 auto;
  text-align: center;
}

body.utm-legal-page .utm-legal-hero__eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.26em;
  text-transform: uppercase !important;
}

body.utm-legal-page .utm-legal-hero__title {
  margin: 1rem auto 0;
  max-width: 12ch;
  color: #ffffff;
  font-size: clamp(2.7rem, 6vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 900;
}

body.utm-legal-page .utm-legal-hero__subtitle {
  margin: 1.35rem auto 0;
  max-width: 52rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  font-weight: 600;
}

body.utm-legal-page .static-seo-content {
  max-width: min(980px, calc(100% - 2rem)) !important;
}

body.utm-legal-page .static-seo-content > h1,
body.utm-legal-page .static-seo-content > p:first-of-type {
  text-align: center !important;
}

body.utm-legal-page #root .animate-fade-in-up > section:first-child .text-center.lg\:text-left,
body.utm-legal-page #root .animate-fade-in-up > section:first-child .text-center.lg\:text-left * {
  text-align: center !important;
}

body.utm-legal-page #root .animate-fade-in-up > section:first-child h1 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 12ch;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl {
  margin-top: clamp(3rem, 6vw, 5rem) !important;
}

body.utm-legal-page #root .animate-fade-in-up {
  padding-bottom: clamp(4.5rem, 8vw, 7rem) !important;
}

body.utm-legal-page #root .animate-fade-in-up > section:first-child {
  min-height: clamp(18rem, 34vw, 26rem) !important;
  padding-top: clamp(7rem, 10vw, 9rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  justify-content: flex-end !important;
}

body.utm-legal-page #root .animate-fade-in-up > section:first-child > .max-w-6xl,
body.utm-legal-page #root .animate-fade-in-up > section:first-child > .relative.z-20 {
  width: min(1100px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl {
  width: min(980px, calc(100% - 2rem)) !important;
  max-width: min(980px, calc(100% - 2rem)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl > div,
body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl .space-y-12,
body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl .space-y-6 {
  display: block !important;
  width: 100% !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl .space-y-12 > * + *,
body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl > div > * + * {
  margin-top: 2rem !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl .space-y-6 > * + * {
  margin-top: 1rem !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl h2,
body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl h3,
body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl p,
body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl li {
  text-align: left !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl h2 {
  font-size: clamp(1.65rem, 3vw, 2.2rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
  line-height: 1.25 !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl p,
body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl li {
  font-size: var(--upto-body) !important;
  line-height: var(--upto-leading) !important;
  color: #374151 !important;
}

body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl ul,
body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl ol {
  padding-left: 1.25rem !important;
}

@media (max-width: 767px) {
  body.utm-legal-page .utm-legal-main {
    max-width: 100% !important;
  }

  body.utm-legal-page .utm-legal-main > article > section {
    margin-bottom: 1.6rem !important;
  }

  body.utm-legal-page #root .animate-fade-in-up > section:first-child {
    min-height: 14.5rem !important;
    padding-top: 5.6rem !important;
    padding-bottom: 1.6rem !important;
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }

  body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl .space-y-12 > * + *,
  body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl > div > * + * {
    margin-top: 1.35rem !important;
  }

  body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl .space-y-6 > * + * {
    margin-top: 0.8rem !important;
  }

  body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl h2 {
    font-size: 1.4rem !important;
  }

  body.utm-legal-page #root .animate-fade-in-up > div.max-w-4xl h3 {
    font-size: 1.1rem !important;
  }

  body.utm-legal-page [data-utm-legal-hero="1"] {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.utm-legal-page .utm-legal-hero__title {
    max-width: 10ch;
  }
}

body.upto-is-navigating::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--upto-nav-exit-bg, #ffffff);
  pointer-events: all;
}

body,
p,
span,
a,
button,
li,
label,
small,
strong,
h1,
h2,
h3,
h1 *,
h2 *,
h3 * {
  text-transform: none !important;
}

@media (max-width: 767px) {
  #root .animate-fade-in-up > section:first-child > .relative.z-10,
  #root .animate-fade-in-up > section:first-child > .relative.z-10 * {
    text-align: center !important;
  }

  main > section:first-of-type,
  main > section:first-of-type * {
    text-align: center !important;
  }
}

*,
*::before,
*::after,
i,
em {
  font-style: normal !important;
}

.static-content h1,
.static-seo-content h1 {
  font-size: var(--upto-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.static-content h2,
.static-seo-content h2 {
  font-size: var(--upto-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.static-content h3,
.static-seo-content h3 {
  font-size: var(--upto-h3);
  line-height: 1.25;
}

.static-content p,
.static-content li,
.static-seo-content p,
.static-seo-content li {
  font-size: var(--upto-body);
  line-height: var(--upto-leading);
}

.static-content *,
.static-seo-content * {
  font-style: normal !important;
  text-transform: none !important;
}

.static-content i,
.static-content em,
.static-seo-content i,
.static-seo-content em {
  font-style: normal !important;
}

.utm-global-cta-wrap {
  background: #fff;
  padding: clamp(56px, 9vw, 120px) 24px clamp(36px, 7vw, 80px);
  border-top: 1px solid #f1f1f1;
}

.utm-global-cta-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 767px) {
  .utm-global-cta-inner {
    text-align: left;
  }
}

.utm-global-cta-icon {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: #000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 32px;
}

.utm-global-cta-title {
  font-size: clamp(1.5rem, 2.7vw, 1.98rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #000;
  margin: 0;
}

.utm-global-cta-text {
  margin: 34px auto 0;
  max-width: 760px;
  color: #6b7280;
  font-size: clamp(1rem, 0.94vw, 1.06rem);
  line-height: 1.25;
  font-weight: 700;
}

@media (max-width: 767px) {
  .utm-global-cta-text {
    margin-left: 0;
    margin-right: 0;
  }
}

.utm-global-cta-btn {
  margin-top: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(92vw, 760px);
  padding: 22px 34px;
  border-radius: 9999px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: clamp(1rem, 0.83vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.18);
}

.utm-global-cta-btn:hover {
  opacity: 0.92;
}

#root section a[href$="/contact.html"]:not([class*="w-16 h-16"]):not([class*="text-left"]),
#root section a[href*="/contact.html?"]:not([class*="w-16 h-16"]):not([class*="text-left"]),
#root section a[href="#agents"],
main section a[href$="/contact.html"]:not([class*="w-16 h-16"]):not([class*="text-left"]),
main section a[href*="/contact.html?"]:not([class*="w-16 h-16"]):not([class*="text-left"]),
main section a[href="#agents"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.9rem !important;
  min-height: 3.7rem !important;
  padding: 0.96rem 1.3rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  word-spacing: normal !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
}

#root section a[href$="/contact.html"]:not([class*="bg-white text-black"]):not([class*="bg-black text-white"]):not([class*="bg-accent text-white"]):not([class*="w-16 h-16"]),
#root section a[href*="/contact.html?"]:not([class*="bg-white text-black"]):not([class*="bg-black text-white"]):not([class*="bg-accent text-white"]):not([class*="w-16 h-16"]),
#root section a[href="#agents"]:not([class*="bg-white text-black"]):not([class*="bg-black text-white"]):not([class*="bg-accent text-white"]),
main section a[href$="/contact.html"]:not([class*="bg-white text-black"]):not([class*="bg-black text-white"]):not([class*="bg-accent text-white"]):not([class*="w-16 h-16"]),
main section a[href*="/contact.html?"]:not([class*="bg-white text-black"]):not([class*="bg-black text-white"]):not([class*="bg-accent text-white"]):not([class*="w-16 h-16"]),
main section a[href="#agents"]:not([class*="bg-white text-black"]):not([class*="bg-black text-white"]):not([class*="bg-accent text-white"]) {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

#root section a[href$="/contact.html"][class*="bg-white text-black"],
#root section a[href*="/contact.html?"][class*="bg-white text-black"],
#root section a[href$="/contact.html"][class*="bg-black text-white"],
#root section a[href*="/contact.html?"][class*="bg-black text-white"],
#root section a[href$="/contact.html"][class*="bg-accent text-white"],
#root section a[href*="/contact.html?"][class*="bg-accent text-white"],
main section a[href$="/contact.html"][class*="bg-white text-black"],
main section a[href*="/contact.html?"][class*="bg-white text-black"],
main section a[href$="/contact.html"][class*="bg-black text-white"],
main section a[href*="/contact.html?"][class*="bg-black text-white"],
main section a[href$="/contact.html"][class*="bg-accent text-white"],
main section a[href*="/contact.html?"][class*="bg-accent text-white"] {
  border-radius: 999px !important;
}

#root section a[href$="/contact.html"][class*="border-b"],
#root section a[href*="/contact.html?"][class*="border-b"],
main section a[href$="/contact.html"][class*="border-b"],
main section a[href*="/contact.html?"][class*="border-b"] {
  border-bottom: 0 !important;
  padding-bottom: 0.96rem !important;
}

#root section a[href$="/contact.html"] svg,
#root section a[href*="/contact.html?"] svg,
#root section a[href="#agents"] svg,
main section a[href$="/contact.html"] svg,
main section a[href*="/contact.html?"] svg,
main section a[href="#agents"] svg {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

#root section a[href$="/contact.html"]:hover,
#root section a[href*="/contact.html?"]:hover,
#root section a[href="#agents"]:hover,
main section a[href$="/contact.html"]:hover,
main section a[href*="/contact.html?"]:hover,
main section a[href="#agents"]:hover {
  transform: translateY(-1px) !important;
}

@media (max-width: 1023px) {
  #mobile-menu a[href$="contact.html"] span,
  div[class*="fixed inset-0"][class*="z-[110]"] a[href="/contact.html"] span,
  div[class*="fixed inset-0"][class*="z-[110]"] a[href="/it/contact.html"] span {
    color: #FF3B30 !important;
  }
}

/* Index-Hero-Referenz für Unterseiten (Desktop + Mobile) */
#root .animate-fade-in-up > section:first-child,
main > section:first-of-type {
  min-height: 90vh !important;
  padding-top: 6rem !important;
  padding-bottom: 3rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#root .animate-fade-in-up > section:first-child > .relative.z-10 > div,
main > section:first-of-type .hero-grid {
  align-items: center !important;
  gap: 2rem !important;
}

#root .animate-fade-in-up > section:first-child h1,
main > section:first-of-type h1 {
  font-size: clamp(2rem, 4.6vw, 3.8rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
}

header h1 {
  font-size: clamp(1.75rem, 3.9vw, 3rem) !important;
  line-height: 1 !important;
}

@media (max-width: 767px) {
  h1 {
    font-size: clamp(1.45rem, 6.4vw, 1.75rem) !important;
    line-height: 1.1 !important;
  }

  #root .animate-fade-in-up > section:first-child h1,
  main > section:first-of-type h1 {
    font-size: clamp(1.45rem, 6.2vw, 1.72rem) !important;
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  header h1 {
    font-size: clamp(1.35rem, 5.8vw, 1.65rem) !important;
  }

  #root .animate-fade-in-up > section:first-child .relative.z-10,
  main .animate-fade-in-up > section:first-child .relative.z-10,
  main > section:first-of-type .relative.z-10 {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #root .animate-fade-in-up > section:first-child .relative.z-10 *,
  main .animate-fade-in-up > section:first-child .relative.z-10 *,
  main > section:first-of-type .relative.z-10 * {
    text-align: center !important;
  }

  header > div,
  header > section,
  header > article {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  header > div .flex.items-center.gap-3,
  header > section .flex.items-center.gap-3,
  header > article .flex.items-center.gap-3 {
    justify-content: center !important;
  }

  header > div p,
  header > section p,
  header > article p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    line-height: 1.45;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] {
    padding-top: 0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] > div {
    padding: 0.5rem 0.75rem 0.5rem 0.85rem !important;
    border-radius: 1.35rem !important;
    position: relative !important;
    overflow: visible !important;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] div[class*="hidden md:flex bg-white/5 rounded-full p-1.5 border border-white/10"] {
    display: inline-flex !important;
    position: static !important;
    padding: 0.24rem !important;
    gap: 0.18rem !important;
    margin-right: 0.15rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) !important;
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] div[class*="hidden md:flex bg-white/5 rounded-full p-1.5 border border-white/10"] button,
  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] div[class*="hidden md:flex bg-white/5 rounded-full p-1.5 border border-white/10"] a {
    min-height: 2rem !important;
    padding: 0.45rem 0.72rem !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] > div > div:last-child {
    gap: 0.45rem !important;
    align-items: center !important;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] > div > div:last-child > button[class*="w-12 h-12"] {
    order: 2 !important;
    flex: 0 0 auto !important;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] a[class*="flex items-center gap-3"] span {
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] button[class*="w-12 h-12"],
  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] a[class*="bg-accent text-white"] {
    min-height: 2.8rem !important;
  }

  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] button[class*="w-12 h-12"] {
    width: 2.8rem !important;
    height: 2.8rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:first-child {
    padding: 1rem 1rem 0.25rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] {
    background: radial-gradient(circle at top right, rgba(255, 59, 48, 0.14), transparent 24%), #050505 !important;
  }

  #utm-fullscreen-menu .flex-grow > div,
  #mobile-menu .flex-grow > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:nth-child(2) > div {
    padding-bottom: 0 !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:first-child,
  div[class*="fixed inset-0"][class*="z-[110]"] > div:first-child {
    position: sticky !important;
    top: 0 !important;
    padding: 0.9rem 0.9rem 0.35rem !important;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.94), rgba(5, 5, 5, 0.78) 72%, transparent) !important;
    backdrop-filter: blur(20px) !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:first-child > div,
  div[class*="fixed inset-0"][class*="z-[110]"] > div:first-child > div {
    width: 100% !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:nth-child(2),
  div[class*="fixed inset-0"][class*="z-[110]"] > div:nth-child(2) {
    padding-top: 0.15rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:nth-child(2) > div,
  div[class*="fixed inset-0"][class*="z-[110]"] > div:nth-child(2) > div {
    min-height: calc(100vh - 5.2rem) !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="flex-grow flex flex-col justify-center"],
  div[class*="fixed inset-0"][class*="z-[110]"] [class*="flex-grow flex flex-col justify-center"] {
    justify-content: flex-start !important;
    padding: 0.5rem 0.9rem 1rem !important;
    gap: 0.8rem !important;
    width: 100% !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"],
  div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"],
  div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] {
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.95rem 1rem !important;
    min-height: 4.15rem !important;
    border-radius: 1.25rem !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.85) !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"]:active,
  #root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"]:active,
  div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"]:active,
  div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"]:active {
    transform: scale(0.99) !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"] > span:first-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] > span:first-child,
  div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"] > span:first-child,
  div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] > span:first-child {
    min-width: 2rem !important;
    font-size: 0.86rem !important;
    line-height: 1 !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] > div,
  div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] div[class*="overflow-hidden transition-all duration-500 ease-in-out pl-12"],
  div[class*="fixed inset-0"][class*="z-[110]"] div[class*="overflow-hidden transition-all duration-500 ease-in-out pl-12"] {
    padding-left: 0 !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] div[class*="border-l-2 border-white/10 pl-6"],
  div[class*="fixed inset-0"][class*="z-[110]"] div[class*="border-l-2 border-white/10 pl-6"] {
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-top: 0.1rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="text-lg md:text-2xl"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="text-lg md:text-3xl"],
  div[class*="fixed inset-0"][class*="z-[110]"] a[class*="text-lg md:text-2xl"],
  div[class*="fixed inset-0"][class*="z-[110]"] a[class*="text-lg md:text-3xl"] {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.96rem !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    font-style: normal !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"],
  div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] {
    margin-top: 0.2rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] {
    order: -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0.25rem 1rem 1rem !important;
    border-top: none !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1.2rem !important;
    padding: 1rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:last-child {
    grid-column: 1 / -1 !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] .flex.gap-3,
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] .flex.gap-4 {
    gap: 0.55rem !important;
    flex-wrap: wrap !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] button,
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] a[class*="w-16 h-16"] {
    border-radius: 1rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] button[class*="px-8 py-4"] {
    flex: 1 1 calc(50% - 0.28rem) !important;
    padding: 0.8rem 0.7rem !important;
    font-size: 0.72rem !important;
    line-height: 1.15 !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] .mobile-link,
  #root div[class*="fixed inset-0"][class*="z-[110]"] .utm-mobile-link {
    padding: 0.45rem 0.75rem !important;
    border-radius: 1rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px) !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] #services-panel > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #solutions-panel > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #utm-services-panel > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #utm-solutions-panel > div {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1rem !important;
    padding: 0.9rem !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"] span:last-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] span:last-child {
    font-size: clamp(1.55rem, 6.4vw, 2rem) !important;
    line-height: 0.98 !important;
  }

  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="text-lg md:text-2xl"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="text-lg md:text-3xl"],
  div[class*="fixed inset-0"][class*="z-[110]"] a[class*="text-lg md:text-2xl"],
  div[class*="fixed inset-0"][class*="z-[110]"] a[class*="text-lg md:text-3xl"] {
    font-size: 0.96rem !important;
    line-height: 1.25 !important;
  }

  #root .animate-fade-in-up > section:first-child,
  main > section:first-of-type {
    min-height: 78vh !important;
    padding-top: 5rem !important;
    padding-bottom: 1.75rem !important;
  }

  #root .animate-fade-in-up > section:first-child h1,
  main > section:first-of-type h1 {
    font-size: clamp(1.2rem, 5.3vw, 1.5rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #root .animate-fade-in-up > section:first-child p,
  main > section:first-of-type p {
    font-size: 0.95rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #root a[class*="bg-white text-black"],
  #root a[class*="bg-black text-white"],
  #root a[class*="bg-accent text-white"],
  #root button[class*="bg-black text-white"],
  #root button[class*="bg-white text-black"] {
    font-size: 0.89rem !important;
    line-height: 1.28 !important;
    padding-top: 0.82rem !important;
    padding-bottom: 0.82rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 1rem !important;
  }

  #root section a[href$="/contact.html"]:not([class*="w-16 h-16"]),
  #root section a[href*="/contact.html?"]:not([class*="w-16 h-16"]),
  #root section a[href="#agents"],
  main section a[href$="/contact.html"]:not([class*="w-16 h-16"]),
  main section a[href*="/contact.html?"]:not([class*="w-16 h-16"]),
  main section a[href="#agents"] {
    min-height: 3.2rem !important;
    padding-top: 0.82rem !important;
    padding-bottom: 0.82rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 999px !important;
    font-size: 0.89rem !important;
    line-height: 1.2 !important;
  }

  #root section {
    scroll-margin-top: 5rem;
  }

  #root section [class*="h-[400px]"],
  #root section [class*="min-h-[400px]"],
  #root section [class*="min-h-[350px]"] {
    height: auto !important;
    min-height: 280px !important;
  }

  #root section [class*="rounded-[2.5rem]"],
  #root section [class*="rounded-[3rem]"],
  #root section [class*="rounded-[3.5rem]"] {
    border-radius: 1.35rem !important;
  }

  #root section [class*="p-8"],
  #root section [class*="p-10"] {
    padding: 1rem !important;
  }

  #root section h2 {
    line-height: 1.02 !important;
  }

  #root .animate-fade-in-up > section:first-child > .relative.z-10 > div,
  main > section:first-of-type .hero-grid,
  #root .animate-fade-in-up > section:first-child [class*="md:max-w-sm"],
  main > section:first-of-type .hero-side {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  #root .animate-fade-in-up > section:first-child [class*="md:max-w-sm"] a,
  #root .animate-fade-in-up > section:first-child [class*="md:max-w-sm"] button,
  main > section:first-of-type .hero-side a,
  main > section:first-of-type .hero-side button {
    width: min(100%, 28rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: space-between !important;
    text-align: center !important;
    align-self: center !important;
  }

  #root .animate-fade-in-up > section:first-child [class*="md:max-w-sm"] a span,
  #root .animate-fade-in-up > section:first-child [class*="md:max-w-sm"] button span,
  main > section:first-of-type .hero-side a span,
  main > section:first-of-type .hero-side button span {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #root .animate-fade-in-up > section {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }

  #root .animate-fade-in-up > section.py-16,
  #root .animate-fade-in-up > section.py-24,
  #root .animate-fade-in-up > section.py-12 {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
  }

  #root .animate-fade-in-up > section h2[class*="text-[clamp"],
  #root .animate-fade-in-up > section h2[class*="text-4xl"],
  #root .animate-fade-in-up > section h2[class*="text-3xl"] {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.03em !important;
  }

  #root .animate-fade-in-up > section p[class*="text-lg"],
  #root .animate-fade-in-up > section p[class*="text-base"],
  #root .animate-fade-in-up > section p[class*="text-sm"] {
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
  }

  #root .animate-fade-in-up > section .grid.grid-cols-2 {
    gap: 0.75rem !important;
  }

  #root .animate-fade-in-up > section [class*="min-w-[75vw]"],
  #root .animate-fade-in-up > section [class*="min-w-[85vw]"] {
    min-width: 82vw !important;
  }

  #root .animate-fade-in-up > section [class*="h-[400px] md:h-[500px]"] {
    min-height: 250px !important;
  }

  #root .animate-fade-in-up > section [class*="rounded-[2rem]"],
  #root .animate-fade-in-up > section [class*="rounded-3xl"] {
    border-radius: 1.2rem !important;
  }

  #root .animate-fade-in-up > section [class*="rounded"][class*="border"],
  #root .animate-fade-in-up > section [class*="rounded"][class*="bg-gray-50"],
  #root .animate-fade-in-up > section [class*="rounded"][class*="bg-[#111]"],
  #root .animate-fade-in-up > section [class*="rounded"][class*="bg-surfaceDark"] {
    box-shadow: none !important;
    background-image: none !important;
    background-color: transparent !important;
  }

  #root .animate-fade-in-up > section [class*="border border-gray-100"],
  #root .animate-fade-in-up > section [class*="border border-white/10"] {
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  #root .animate-fade-in-up > section [class*="w-20 h-20"] {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 1rem !important;
  }

  #root .animate-fade-in-up > section [class*="text-[10px]"],
  #root .animate-fade-in-up > section [class*="text-xs"] {
    letter-spacing: 0.16em !important;
  }

  footer,
  footer[data-utm-unified-footer="1"] {
    padding-top: 3rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1.5rem !important;
  }

  footer h2,
  footer[data-utm-unified-footer="1"] h2 {
    font-size: 2rem !important;
    margin-bottom: 1.25rem !important;
  }

  footer .grid,
  footer[data-utm-unified-footer="1"] .grid {
    gap: 1.25rem !important;
  }

  footer p,
  footer a,
  footer span,
  footer[data-utm-unified-footer="1"] p,
  footer[data-utm-unified-footer="1"] a,
  footer[data-utm-unified-footer="1"] span {
    line-height: 1.4 !important;
  }
}

#root .animate-fade-in-up > section:first-child [class*="md:max-w-sm"],
main > section:first-of-type .hero-side {
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 0 !important;
  gap: 1rem !important;
}

@media (min-width: 768px) {
  #root .animate-fade-in-up > section:first-child,
  main > section:first-of-type {
    padding-top: 0 !important;
    padding-bottom: 6rem !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    justify-content: flex-end !important;
  }

  #root .animate-fade-in-up > section:first-child > .relative.z-10,
  #root .animate-fade-in-up > section:first-child > .relative.z-10 > div {
    text-align: left !important;
  }

  #root .animate-fade-in-up > section:first-child > .relative.z-10 > div,
  main > section:first-of-type .hero-grid {
    align-items: flex-end !important;
    gap: 3rem !important;
  }

  #root .animate-fade-in-up > section:first-child [class*="md:max-w-sm"],
  main > section:first-of-type .hero-side {
    max-width: 24rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.5rem !important;
    gap: 1.5rem !important;
  }
}

/* webdev-ads: Bottom-CTA optisch an Index angleichen */
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:last-child {
  background: #fff !important;
  color: #000 !important;
  padding-top: 6rem !important;
  padding-bottom: 8rem !important;
}

body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:last-child > div.absolute {
  display: none !important;
}

body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:last-child h2 {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  color: #000 !important;
}

body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:last-child h2 span {
  color: #6b7280 !important;
}

body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:last-child a[href="/contact.html"] {
  background: #000 !important;
  color: #fff !important;
  border-radius: 2rem !important;
  padding: 1.25rem 2.5rem !important;
}

body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:last-child .w-20.h-20 {
  background: #000 !important;
  color: #fff !important;
}

/* Service pages: overgroße CTA-Buttons und rote Problemkarten zentral entschärfen */
body:has(script[src*="automation-"]) #root .animate-fade-in-up,
body:has(script[src*="software-"]) #root .animate-fade-in-up,
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up,
body:has(script[src*="consulting-"]) #root .animate-fade-in-up,
body:has(script[src*="craft-"]) #root .animate-fade-in-up,
body:has(script[src*="hotel-"]) #root .animate-fade-in-up,
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up {
  --utm-problem-bg: #f6f3ee;
  --utm-problem-card: #fbf8f3;
  --utm-problem-border: rgba(15, 23, 42, 0.08);
  --utm-problem-text: #111827;
  --utm-problem-muted: #6b7280;
}

body:has(script[src*="automation-"]) #root .animate-fade-in-up > section a[href="/contact.html"],
body:has(script[src*="software-"]) #root .animate-fade-in-up > section a[href="/contact.html"],
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section a[href="/contact.html"],
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section a[href="/contact.html"],
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section a[href="/contact.html"],
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section a[href="/contact.html"],
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section a[href="/contact.html"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  width: auto !important;
  max-width: min(100%, 20rem) !important;
  min-height: 3.25rem !important;
  padding: 0.95rem 1.4rem !important;
  border-radius: 999px !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  white-space: normal !important;
  text-align: center !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12) !important;
}

body:has(script[src*="automation-"]) #root .animate-fade-in-up > section:first-child a[href="/contact.html"],
body:has(script[src*="software-"]) #root .animate-fade-in-up > section:first-child a[href="/contact.html"],
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section:first-child a[href="/contact.html"],
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section:first-child a[href="/contact.html"],
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section:first-child a[href="/contact.html"],
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section:first-child a[href="/contact.html"],
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:first-child a[href="/contact.html"] {
  width: 100% !important;
  max-width: 22rem !important;
}

body:has(script[src*="automation-"]) #root .animate-fade-in-up > section:nth-of-type(3),
body:has(script[src*="software-"]) #root .animate-fade-in-up > section:nth-of-type(3),
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section:nth-of-type(3),
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section:nth-of-type(3),
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section:nth-of-type(3),
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section:nth-of-type(3),
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:nth-of-type(3) {
  background: var(--utm-problem-bg) !important;
  color: var(--utm-problem-text) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

body:has(script[src*="automation-"]) #root .animate-fade-in-up > section:nth-of-type(3) h2,
body:has(script[src*="automation-"]) #root .animate-fade-in-up > section:nth-of-type(3) h3,
body:has(script[src*="software-"]) #root .animate-fade-in-up > section:nth-of-type(3) h2,
body:has(script[src*="software-"]) #root .animate-fade-in-up > section:nth-of-type(3) h3,
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section:nth-of-type(3) h2,
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section:nth-of-type(3) h3,
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section:nth-of-type(3) h2,
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section:nth-of-type(3) h3,
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section:nth-of-type(3) h2,
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section:nth-of-type(3) h3,
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section:nth-of-type(3) h2,
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section:nth-of-type(3) h3,
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:nth-of-type(3) h2,
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:nth-of-type(3) h3 {
  color: var(--utm-problem-text) !important;
}

body:has(script[src*="automation-"]) #root .animate-fade-in-up > section:nth-of-type(3) p,
body:has(script[src*="software-"]) #root .animate-fade-in-up > section:nth-of-type(3) p,
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section:nth-of-type(3) p,
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section:nth-of-type(3) p,
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section:nth-of-type(3) p,
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section:nth-of-type(3) p,
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:nth-of-type(3) p {
  color: var(--utm-problem-muted) !important;
}

body:has(script[src*="automation-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div,
body:has(script[src*="software-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div,
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div,
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div,
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div,
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div,
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div {
  background: var(--utm-problem-card) !important;
  border: 1px solid var(--utm-problem-border) !important;
  border-radius: 1.5rem !important;
  box-shadow: none !important;
}

body:has(script[src*="automation-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg),
body:has(script[src*="software-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg),
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg),
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg),
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg),
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg),
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg) {
  width: 0.65rem !important;
  height: 0.65rem !important;
  min-width: 0.65rem !important;
  min-height: 0.65rem !important;
  padding: 0 !important;
  margin-bottom: 1rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(17, 24, 39, 0.18) !important;
  color: transparent !important;
  box-shadow: none !important;
}

body:has(script[src*="automation-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg) svg,
body:has(script[src*="software-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg) svg,
body:has(script[src*="infrastructure-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg) svg,
body:has(script[src*="consulting-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg) svg,
body:has(script[src*="craft-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg) svg,
body:has(script[src*="hotel-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg) svg,
body:has(script[src*="webdev-ads-"]) #root .animate-fade-in-up > section:nth-of-type(3) .grid > div > div:has(> svg) svg {
  display: none !important;
}

@media (max-width: 767px) {
  #utm-site-nav-shell nav > div,
  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] > div {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #utm-fullscreen-menu,
  #root div[class*="fixed inset-0"][class*="z-[110]"] {
    background: #111111 !important;
  }

  #utm-fullscreen-menu > div:first-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:first-child {
    position: sticky !important;
    top: 0 !important;
    padding: 0.85rem 1rem 0.5rem !important;
    background: #111111 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
  }

  #utm-fullscreen-menu > div:first-child > div:first-child span,
  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:first-child > div:first-child span {
    display: none !important;
  }

  #utm-fullscreen-menu > div:nth-child(2) > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] > div:nth-child(2) > div {
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
  }

  #utm-fullscreen-menu [class*="flex-grow flex flex-col justify-center"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="flex-grow flex flex-col justify-center"] {
    justify-content: flex-start !important;
    gap: 0.25rem !important;
    padding: 0.75rem 1rem 1rem !important;
  }

  #utm-fullscreen-menu a[class*="group flex items-baseline"],
  #utm-fullscreen-menu button[class*="group flex items-baseline"],
  #utm-fullscreen-menu .utm-mobile-link,
  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] .mobile-link,
  #root div[class*="fixed inset-0"][class*="z-[110]"] .utm-mobile-link {
    min-height: 0 !important;
    padding: 0.8rem 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  #utm-fullscreen-menu a[class*="group flex items-baseline"] > span:first-child,
  #utm-fullscreen-menu button[class*="group flex items-baseline"] > span:first-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"] > span:first-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] > span:first-child {
    min-width: 1.5rem !important;
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.34) !important;
  }

  #utm-fullscreen-menu a[class*="group flex items-baseline"] span:last-child,
  #utm-fullscreen-menu button[class*="group flex items-baseline"] span:last-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"] span:last-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] span:last-child {
    font-size: clamp(1.18rem, 6.2vw, 1.45rem) !important;
    line-height: 1.08 !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  #utm-fullscreen-menu [class*="overflow-hidden transition-all duration-500 ease-in-out pl-12"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="overflow-hidden transition-all duration-500 ease-in-out pl-12"] {
    padding-left: 0 !important;
  }

  #utm-fullscreen-menu [class*="border-l-2 border-white/10 pl-6"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="border-l-2 border-white/10 pl-6"] {
    border-left: 0 !important;
    padding: 0.15rem 0 0.4rem !important;
    gap: 0.15rem !important;
  }

  #utm-fullscreen-menu #utm-services-panel a,
  #utm-fullscreen-menu #utm-solutions-panel a,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #services-panel a,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #solutions-panel a,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #utm-services-panel a,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #utm-solutions-panel a {
    padding: 0.55rem 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.92rem !important;
    line-height: 1.3 !important;
  }

  #utm-fullscreen-menu #utm-services-panel > div,
  #utm-fullscreen-menu #utm-solutions-panel > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #services-panel > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #solutions-panel > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #utm-services-panel > div,
  #root div[class*="fixed inset-0"][class*="z-[110]"] #utm-solutions-panel > div {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.15rem 0 0.4rem !important;
    box-shadow: none !important;
  }

  #utm-fullscreen-menu .hidden.lg\:block.w-px,
  #root div[class*="fixed inset-0"][class*="z-[110]"] .hidden.lg\:block.w-px {
    display: none !important;
  }

  #utm-fullscreen-menu [class*="lg:w-1/3"],
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] {
    order: -1 !important;
    display: block !important;
    padding: 0.25rem 1rem 0.9rem !important;
    border-top: 0 !important;
    margin-top: 0 !important;
  }

  #utm-fullscreen-menu [class*="lg:w-1/3"] > div:first-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:first-child {
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  #utm-fullscreen-menu [class*="lg:w-1/3"] > div:first-child > div:first-child,
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:first-child > div:first-child {
    margin-bottom: 0.45rem !important;
    color: rgba(255, 255, 255, 0.42) !important;
  }

  #utm-fullscreen-menu [class*="lg:w-1/3"] > div:first-child .flex,
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:first-child .flex {
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }

  #utm-fullscreen-menu [class*="lg:w-1/3"] > div:first-child button,
  #mobile-menu [class*="lg:w-1/3"] > div:first-child button,
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:first-child button {
    width: 70% !important;
    min-height: 2.7rem !important;
    padding: 0.65rem 0.7rem !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    justify-self: center !important;
  }

  #utm-fullscreen-menu [class*="lg:w-1/3"] > div:not(:first-child),
  #root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:not(:first-child) {
    display: none !important;
  }
}


/* Zentrale manuelle Overrides */


@media (max-width: 767px) {
	#utm-fullscreen-menu,
	#mobile-menu,
	#root div[class*="fixed inset-0"][class*="z-[110]"] {
		background: #101010 !important;
	}

	#utm-fullscreen-menu > div:first-child,
	#mobile-menu > div:first-child,
	#root div[class*="fixed inset-0"][class*="z-[110]"] > div:first-child {
		padding: 0.8rem 1rem 0.45rem !important;
		background: #101010 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
	}

	#utm-fullscreen-menu > div:nth-child(2) > div,
	#mobile-menu > div:nth-child(2) > div,
	#root div[class*="fixed inset-0"][class*="z-[110]"] > div:nth-child(2) > div {
		padding: 0 !important;
		max-width: none !important;
	}

	#utm-fullscreen-menu [class*="flex-grow flex flex-col justify-center"],
	#mobile-menu [class*="flex-grow flex flex-col justify-center"],
	#root div[class*="fixed inset-0"][class*="z-[110]"] [class*="flex-grow flex flex-col justify-center"] {
		gap: 0 !important;
		padding: 0.65rem 1rem 1rem !important;
	}

	#utm-fullscreen-menu a[class*="group flex items-baseline"],
	#utm-fullscreen-menu button[class*="group flex items-baseline"],
	#utm-fullscreen-menu .utm-mobile-link,
	#mobile-menu a[class*="group flex items-baseline"],
	#mobile-menu button[class*="group flex items-baseline"],
	#mobile-menu .mobile-link,
	#root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"],
	#root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"],
	#root div[class*="fixed inset-0"][class*="z-[110]"] .mobile-link,
	#root div[class*="fixed inset-0"][class*="z-[110]"] .utm-mobile-link,
	#utm-fullscreen-menu #utm-services-panel a,
	#utm-fullscreen-menu #utm-solutions-panel a,
	#mobile-menu #services-panel a,
	#mobile-menu #solutions-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #services-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #solutions-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-services-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-solutions-panel a {
		display: flex !important;
		align-items: center !important;
		min-height: 3.1rem !important;
		padding: 0.78rem 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		text-decoration: none !important;
	}

	#utm-fullscreen-menu a[class*="group flex items-baseline"] + a[class*="group flex items-baseline"],
	#utm-fullscreen-menu button[class*="group flex items-baseline"] + a,
	#utm-fullscreen-menu button[class*="group flex items-baseline"] + button,
	#mobile-menu a[class*="group flex items-baseline"] + a[class*="group flex items-baseline"],
	#mobile-menu button[class*="group flex items-baseline"] + a,
	#mobile-menu button[class*="group flex items-baseline"] + button,
	#root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"] + a[class*="group flex items-baseline"],
	#root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] + a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] + button {
		border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	}

	#utm-fullscreen-menu a[class*="group flex items-baseline"] > span:first-child,
	#utm-fullscreen-menu button[class*="group flex items-baseline"] > span:first-child,
	#mobile-menu a[class*="group flex items-baseline"] > span:first-child,
	#mobile-menu button[class*="group flex items-baseline"] > span:first-child,
	#root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"] > span:first-child,
	#root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] > span:first-child {
		display: none !important;
	}

	#utm-fullscreen-menu a[class*="group flex items-baseline"] span:last-child,
	#utm-fullscreen-menu button[class*="group flex items-baseline"] span:last-child,
	#utm-fullscreen-menu #utm-services-panel a,
	#utm-fullscreen-menu #utm-solutions-panel a,
	#mobile-menu a[class*="group flex items-baseline"] span:last-child,
	#mobile-menu button[class*="group flex items-baseline"] span:last-child,
	#mobile-menu #services-panel a,
	#mobile-menu #solutions-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] a[class*="group flex items-baseline"] span:last-child,
	#root div[class*="fixed inset-0"][class*="z-[110]"] button[class*="group flex items-baseline"] span:last-child,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #services-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #solutions-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-services-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-solutions-panel a {
		font-size: clamp(1rem, 4.7vw, 1.05rem) !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		letter-spacing: -0.01em !important;
		color: #ffffff !important;
		-webkit-text-fill-color: currentColor !important;
	}

	#utm-fullscreen-menu [class*="overflow-hidden transition-all duration-500 ease-in-out pl-12"],
	#mobile-menu [class*="overflow-hidden transition-all duration-500 ease-in-out pl-12"],
	#root div[class*="fixed inset-0"][class*="z-[110]"] [class*="overflow-hidden transition-all duration-500 ease-in-out pl-12"] {
		padding-left: 0 !important;
	}

	#utm-fullscreen-menu [class*="border-l-2 border-white/10 pl-6"],
	#mobile-menu [class*="border-l-2 border-white/10 pl-6"],
	#root div[class*="fixed inset-0"][class*="z-[110]"] [class*="border-l-2 border-white/10 pl-6"] {
		border-left: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		gap: 0 !important;
	}

	#utm-fullscreen-menu #utm-services-panel > div,
	#utm-fullscreen-menu #utm-solutions-panel > div,
	#mobile-menu #services-panel > div,
	#mobile-menu #solutions-panel > div,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #services-panel > div,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #solutions-panel > div,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-services-panel > div,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-solutions-panel > div {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 0 0.2rem !important;
	}

	#utm-fullscreen-menu #utm-services-panel a,
	#utm-fullscreen-menu #utm-solutions-panel a,
	#mobile-menu #services-panel a,
	#mobile-menu #solutions-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #services-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #solutions-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-services-panel a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-solutions-panel a {
		opacity: 0.92 !important;
	}

	#utm-fullscreen-menu #utm-services-panel a + a,
	#utm-fullscreen-menu #utm-solutions-panel a + a,
	#mobile-menu #services-panel a + a,
	#mobile-menu #solutions-panel a + a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #services-panel a + a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #solutions-panel a + a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-services-panel a + a,
	#root div[class*="fixed inset-0"][class*="z-[110]"] #utm-solutions-panel a + a {
		border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	}

	#utm-fullscreen-menu [class*="lg:w-1/3"],
	#mobile-menu [class*="lg:w-1/3"],
	#root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] {
		padding: 0.4rem 1rem 0.95rem !important;
		border-top: 0 !important;
		margin-top: 0 !important;
	}

	#utm-fullscreen-menu [class*="lg:w-1/3"] > div:first-child,
	#mobile-menu [class*="lg:w-1/3"] > div:first-child,
	#root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:first-child {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	#utm-fullscreen-menu [class*="lg:w-1/3"] > div:first-child .flex,
	#mobile-menu [class*="lg:w-1/3"] > div:first-child .flex,
	#root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:first-child .flex {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.5rem !important;
	}

	#utm-fullscreen-menu [class*="lg:w-1/3"] > div:first-child button,
	#mobile-menu [class*="lg:w-1/3"] > div:first-child button,
	#root div[class*="fixed inset-0"][class*="z-[110]"] [class*="lg:w-1/3"] > div:first-child button {
    width: 70% !important;
		min-height: 2.7rem !important;
		padding: 0.65rem 0.7rem !important;
		border-radius: 999px !important;
		box-shadow: none !important;
    justify-self: center !important;
	}
}

body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 .max-w-4xl,
body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose,
body > div.max-w-5xl.mx-auto.px-6.mb-16,
body > div.max-w-5xl.mx-auto.px-6.mb-16 + div.max-w-5xl.mx-auto.px-6.mb-16 {
  max-width: 72rem !important;
}

body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 {
  padding-top: 8rem !important;
  padding-bottom: 3rem !important;
}

body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 .flex.items-center.gap-3.mb-6 {
  margin-bottom: 1.5rem !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 h1 {
  font-size: clamp(2.35rem, 5.8vw, 4.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1.5rem !important;
  text-transform: none !important;
}

body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 p.text-xl,
body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 p.text-xl.md\:text-2xl {
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  line-height: 1.6 !important;
  max-width: 52rem !important;
  color: #4b5563 !important;
}

body > div.max-w-5xl.mx-auto.px-6.mb-16 img {
  width: 100% !important;
  height: clamp(19rem, 42vw, 31rem) !important;
  object-fit: cover !important;
  border-radius: 1.75rem !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.16) !important;
}

body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose {
  font-size: 1.06rem !important;
  line-height: 1.8 !important;
  color: #374151 !important;
}

body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose h2 {
  font-size: clamp(1.55rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  margin-top: 3rem !important;
  margin-bottom: 1.25rem !important;
  text-transform: none !important;
  color: #111827 !important;
}

body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.9rem !important;
  text-transform: none !important;
  color: #111827 !important;
}

body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose p,
body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose li {
  font-size: 1.04rem !important;
  line-height: 1.85 !important;
  color: #4b5563 !important;
  text-transform: none !important;
}

body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose ul,
body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose ol {
  padding-left: 1.4rem !important;
  margin-bottom: 1.5rem !important;
}

body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose li {
  margin-bottom: 0.7rem !important;
}

body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose .stat-card,
body > div.max-w-5xl.mx-auto.px-6.mb-16 .stat-card,
body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose .process-step,
body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose .tech-card {
  background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 1.25rem !important;
  box-shadow: none !important;
}

body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose .highlight-box,
body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose .success-box,
body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose .warning-box {
  border-radius: 1rem !important;
  padding: 1.25rem 1.4rem !important;
}

body.utm-blog-article {
  background:
    radial-gradient(circle at top left, rgba(255, 59, 48, 0.07), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfc 42%, #f5f6f8 100%) !important;
}

body.utm-blog-article .grain::after,
body.utm-blog-article.grain::after {
  opacity: 0.02 !important;
}

body.utm-blog-article .utm-blog-article-hero {
  padding-top: clamp(8rem, 12vw, 11rem) !important;
  padding-bottom: clamp(2.8rem, 5vw, 4.5rem) !important;
}

body.utm-blog-article .utm-blog-article-hero__inner {
  max-width: min(980px, 100%) !important;
}

body.utm-blog-article .utm-blog-article-hero .flex.items-center.gap-3.mb-6 {
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
}

body.utm-blog-article .utm-blog-article-hero .bg-accent\/10.text-accent {
  padding: 0.55rem 0.9rem !important;
  border: 1px solid rgba(255, 59, 48, 0.14) !important;
  background: rgba(255, 59, 48, 0.08) !important;
  color: #c6261c !important;
  border-radius: 999px !important;
}

body.utm-blog-article .utm-blog-article-hero h1 {
  max-width: 14ch !important;
  font-size: clamp(2.55rem, 5vw, 4.8rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.05em !important;
  color: #111827 !important;
  margin-bottom: 1rem !important;
}

body.utm-blog-article .utm-blog-article-hero p.text-xl,
body.utm-blog-article .utm-blog-article-hero p.text-xl.md\:text-2xl {
  max-width: 46rem !important;
  font-size: clamp(1.08rem, 1.8vw, 1.42rem) !important;
  line-height: 1.62 !important;
  color: #4b5563 !important;
}

body.utm-blog-article .utm-blog-feature-media,
body.utm-blog-article .utm-blog-stat-grid,
body.utm-blog-article .utm-blog-article-main,
body.utm-blog-article .utm-blog-engagement {
  width: min(1100px, calc(100% - 2rem)) !important;
  max-width: min(1100px, calc(100% - 2rem)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.utm-blog-article .utm-blog-feature-media {
  margin-bottom: 1.75rem !important;
}

body.utm-blog-article .utm-blog-feature-media img {
  width: 100% !important;
  height: clamp(18rem, 42vw, 31rem) !important;
  object-fit: cover !important;
  border-radius: 2rem !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12) !important;
}

body.utm-blog-article .utm-blog-stat-grid {
  margin-bottom: 2.5rem !important;
}

body.utm-blog-article .utm-blog-stat-grid .grid {
  gap: 1rem !important;
}

body.utm-blog-article .utm-blog-stat-grid .stat-card {
  min-height: 100% !important;
  padding: 1.3rem 1rem !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.98)) !important;
  border-radius: 1.35rem !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.05) !important;
}

body.utm-blog-article .utm-blog-stat-grid .stat-card .text-4xl {
  font-size: clamp(1.9rem, 3vw, 2.5rem) !important;
  letter-spacing: -0.04em !important;
}

body.utm-blog-article .utm-blog-article-main {
  margin-top: 0 !important;
  padding-bottom: 3.5rem !important;
}

body.utm-blog-article .utm-blog-article-prose {
  max-width: 100% !important;
  width: min(780px, 100%) !important;
  margin: 0 auto !important;
  font-size: 1.08rem !important;
  line-height: 1.82 !important;
}

body.utm-blog-article .utm-blog-article-prose > :first-child {
  margin-top: 0 !important;
}

body.utm-blog-article .utm-blog-article-prose p,
body.utm-blog-article .utm-blog-article-prose li {
  color: #4b5563 !important;
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
}

body.utm-blog-article .utm-blog-article-prose p.text-xl.leading-relaxed {
  font-size: 1.22rem !important;
  line-height: 1.78 !important;
  color: #1f2937 !important;
}

body.utm-blog-article .utm-blog-article-prose h2 {
  font-size: clamp(1.65rem, 3vw, 2.2rem) !important;
  line-height: 1.14 !important;
  margin-top: 3.25rem !important;
  margin-bottom: 1rem !important;
  color: #111827 !important;
}

body.utm-blog-article .utm-blog-article-prose h3 {
  font-size: clamp(1.15rem, 2vw, 1.42rem) !important;
  line-height: 1.3 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.85rem !important;
  color: #111827 !important;
}

body.utm-blog-article .utm-blog-article-prose table {
  width: 100% !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 1rem !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

body.utm-blog-article .utm-blog-article-prose th,
body.utm-blog-article .utm-blog-article-prose td {
  padding: 0.9rem 1rem !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  text-align: left !important;
}

body.utm-blog-article .utm-blog-article-prose tr:last-child td {
  border-bottom: none !important;
}

body.utm-blog-article .utm-blog-article-prose .highlight-box,
body.utm-blog-article .utm-blog-article-prose .success-box,
body.utm-blog-article .utm-blog-article-prose .warning-box,
body.utm-blog-article .utm-blog-article-prose .process-step,
body.utm-blog-article .utm-blog-article-prose .tech-card {
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06) !important;
}

body.utm-blog-article .utm-blog-article-prose .warning-box {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.18) !important;
}

body.utm-blog-article .utm-blog-article-prose .highlight-box {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.16) !important;
}

body.utm-blog-article .utm-blog-article-prose .success-box {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.16) !important;
}

body.utm-blog-article .utm-blog-article-prose .process-step {
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
  padding: 1rem 1.15rem !important;
}

body.utm-blog-article .utm-blog-article-prose .step-number {
  flex: 0 0 2.4rem !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111827 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

body.utm-blog-article .utm-blog-article-prose > div.bg-black.text-white.rounded-3xl,
body.utm-blog-article .utm-blog-article-prose > div[class*="bg-black"][class*="rounded-3xl"] {
  border-radius: 1.6rem !important;
  padding: 1.75rem !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12) !important;
}

body.utm-blog-article .utm-blog-article-prose > div.border-t.border-gray-200 {
  margin-top: 3rem !important;
  padding-top: 2rem !important;
}

@media (max-width: 767px) {
  body.utm-blog-article .utm-blog-article-hero {
    padding-top: 6.8rem !important;
    padding-bottom: 1.8rem !important;
  }

  body.utm-blog-article .utm-blog-article-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 9vw, 2.85rem) !important;
  }

  body.utm-blog-article .utm-blog-article-hero p.text-xl,
  body.utm-blog-article .utm-blog-article-hero p.text-xl.md\:text-2xl {
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  body.utm-blog-article .utm-blog-feature-media,
  body.utm-blog-article .utm-blog-stat-grid,
  body.utm-blog-article .utm-blog-article-main,
  body.utm-blog-article .utm-blog-engagement {
    width: min(100%, calc(100% - 1rem)) !important;
    max-width: min(100%, calc(100% - 1rem)) !important;
  }

  body.utm-blog-article .utm-blog-feature-media img {
    height: 15.5rem !important;
    border-radius: 1.35rem !important;
  }

  body.utm-blog-article .utm-blog-stat-grid .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  body.utm-blog-article .utm-blog-stat-grid .stat-card {
    padding: 1rem 0.8rem !important;
    border-radius: 1.1rem !important;
  }

  body.utm-blog-article .utm-blog-article-main {
    padding-bottom: 2.4rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose,
  body.utm-blog-article .utm-blog-article-prose p,
  body.utm-blog-article .utm-blog-article-prose li {
    font-size: 1rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose p.text-xl.leading-relaxed {
    font-size: 1.08rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose h2 {
    font-size: 1.45rem !important;
    margin-top: 2.5rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose h3 {
    font-size: 1.08rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose table,
  body.utm-blog-article .utm-blog-article-prose thead,
  body.utm-blog-article .utm-blog-article-prose tbody,
  body.utm-blog-article .utm-blog-article-prose tr,
  body.utm-blog-article .utm-blog-article-prose th,
  body.utm-blog-article .utm-blog-article-prose td {
    display: block !important;
    width: 100% !important;
  }

  body.utm-blog-article .utm-blog-article-prose th {
    padding-bottom: 0.3rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose td {
    padding-top: 0.25rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose .process-step {
    gap: 0.8rem !important;
    padding: 0.95rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose .step-number {
    flex-basis: 2.1rem !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
  }

  body.utm-blog-article .utm-blog-article-prose > div.bg-black.text-white.rounded-3xl,
  body.utm-blog-article .utm-blog-article-prose > div[class*="bg-black"][class*="rounded-3xl"] {
    padding: 1.15rem !important;
    border-radius: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 {
    padding-top: 7rem !important;
    padding-bottom: 2rem !important;
  }

  body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
  }

  body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 p.text-xl,
  body > header.pt-32.pb-12.md\:pt-40.md\:pb-20.px-6 p.text-xl.md\:text-2xl {
    font-size: 1.05rem !important;
  }

  body > div.max-w-5xl.mx-auto.px-6.mb-16 img {
    height: 15rem !important;
    border-radius: 1.35rem !important;
  }

  body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose,
  body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose p,
  body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose li {
    font-size: 1rem !important;
  }

  body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose h2 {
    font-size: 1.45rem !important;
    margin-top: 2.4rem !important;
  }

  body > main.max-w-4xl.mx-auto.px-6.pb-20 article.prose h3 {
    font-size: 1.1rem !important;
  }

  body > div.max-w-5xl.mx-auto.px-6.mb-16 .grid.md\:grid-cols-4.gap-4,
  body > div.max-w-5xl.mx-auto.px-6.mb-16 .grid.md\:grid-cols-3.gap-4,
  body > div.max-w-5xl.mx-auto.px-6.mb-16 .grid.md\:grid-cols-4.gap-6 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
[class*="shadow-"] {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: none !important;
}

#root .animate-fade-in-up > section.max-w-\[1440px\].mx-auto.px-6.md\:px-12.lg\:px-24.py-16.md\:py-48 .space-y-10.md\:space-y-12 > .group.flex.gap-6.md\:gap-8:last-child {
  display: none !important;
}

#root .animate-fade-in-up > div.w-full.px-2.md\:px-6.pb-16.md\:pb-32.mt-16.md\:mt-32 {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   767px — Card internals & grid fallbacks
   Catches bare grid-cols-N and large h3 in React pages
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Bare 3-col/4-col grids (no responsive prefix) → 2-col */
  #root .animate-fade-in-up .grid.grid-cols-3,
  #root .animate-fade-in-up .grid.grid-cols-4,
  #root .animate-fade-in-up .grid.grid-cols-5,
  #root .animate-fade-in-up .grid.grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Large h3 headings within content sections → cap at readable size */
  #root .animate-fade-in-up > section h3[class*="text-3xl"],
  #root .animate-fade-in-up > section h3[class*="text-4xl"],
  #root .animate-fade-in-up > section h3[class*="text-5xl"] {
    font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
    line-height: 1.18 !important;
  }

  /* Reduce large vertical spacing inside sections */
  #root .animate-fade-in-up > section .space-y-8 > * + *,
  #root .animate-fade-in-up > section .space-y-10 > * + *,
  #root .animate-fade-in-up > section .space-y-12 > * + *,
  #root .animate-fade-in-up > section .gap-y-8,
  #root .animate-fade-in-up > section .gap-y-10,
  #root .animate-fade-in-up > section .gap-y-12 {
    margin-top: 1.25rem !important;
  }

  /* Static page nav padding tighter on tablet */
  nav.fixed .max-w-\[1600px\] > div {
    padding: 0.4rem 0.8rem 0.4rem 1.1rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   480px — Extra-small mobile overrides
   Targets both static pages and React bundle pages
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* ── Nav pill: tighter on very small screens ── */
  #utm-site-nav-shell nav > div,
  #root div[class*="fixed top-0 left-0 right-0"][class*="z-[100]"] > div {
    padding: 0.4rem 0.6rem 0.4rem 0.85rem !important;
    border-radius: 999px !important;
  }

  /* ── Static page nav (webdev-ads, automation) ── */
  nav.fixed .max-w-\[1600px\] > div {
    padding: 0.4rem 0.6rem 0.4rem 0.85rem !important;
  }

  /* ── Hero typography for React pages ── */
  #root .animate-fade-in-up > section:first-child h1,
  #root .animate-fade-in-up > section:first-of-type h1 {
    font-size: clamp(2rem, 11vw, 2.65rem) !important;
    line-height: 1.06 !important;
  }

  /* ── Section side padding: reduce to 1rem ── */
  #root .animate-fade-in-up > section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── 4-col stat grids → 2-col on React pages ── */
  #root .animate-fade-in-up .grid.grid-cols-4,
  #root .animate-fade-in-up .grid.md\:grid-cols-4,
  #root .animate-fade-in-up .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ── 3-col grids → 2-col on React pages ── */
  #root .animate-fade-in-up .grid.md\:grid-cols-3,
  #root .animate-fade-in-up .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ── Pricing / feature 2-col → single col ── */
  #root .animate-fade-in-up .grid.md\:grid-cols-2:not(.grid-cols-2),
  #root .animate-fade-in-up .grid.lg\:grid-cols-2:not(.grid-cols-2) {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* ── CTA buttons: full-width stacking ── */
  #root .animate-fade-in-up .flex.flex-wrap.gap-4 > a,
  #root .animate-fade-in-up .flex.flex-wrap.gap-4 > button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Footer bottom bar ── */
  #root div[class*="border-t"][class*="font-mono"],
  footer .border-t.pt-8 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }

  /* ── Floating CTA: slightly smaller ── */
  .floating-cta {
    bottom: 14px !important;
    right: 14px !important;
    gap: 8px !important;
  }
  .floating-cta a {
    width: 48px !important;
    height: 48px !important;
  }

  /* ── Blog article: tables go block at 480px too ── */
  body.utm-blog-article .utm-blog-article-prose table,
  body.utm-blog-article .utm-blog-article-prose thead,
  body.utm-blog-article .utm-blog-article-prose tbody,
  body.utm-blog-article .utm-blog-article-prose tr,
  body.utm-blog-article .utm-blog-article-prose th,
  body.utm-blog-article .utm-blog-article-prose td {
    display: block !important;
    width: 100% !important;
  }

  /* ── Reduce h2 section headings for React pages ── */
  #root .animate-fade-in-up > section h2 {
    font-size: clamp(1.8rem, 9vw, 2.4rem) !important;
    line-height: 1.05 !important;
  }

  /* ── Bare 3-col/4-col grids → 1-col at 480px ── */
  #root .animate-fade-in-up .grid.grid-cols-3,
  #root .animate-fade-in-up .grid.grid-cols-4,
  #root .animate-fade-in-up .grid.grid-cols-5,
  #root .animate-fade-in-up .grid.grid-cols-6 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* ── Card padding p-6 → tighter at 480px ── */
  #root section [class*="p-6"] {
    padding: 0.85rem !important;
  }

  /* ── Horizontal overflow guard: constrain any wide element ── */
  #root .animate-fade-in-up > section > * {
    max-width: 100% !important;
  }
}