.items-end { background-color: rgba(6, 34, 71, 0); }
.gap-3.grid.grid-cols-6.h-full.p-6.w-full { background-color: rgba(8, 39, 78, 0); }
.bg-body { background: url("../images/b.svg") 0% 0% / cover no-repeat; }
.back { background: url("../images/webdesign-agentur.webp") 0% 0% / cover no-repeat; }
.logo { width: 85px; }
.logo img { display: block; width: 85px !important; max-width: none !important; height: auto; }
#projekte article.group { position: relative; overflow: hidden; will-change: auto; }
#projekte article.group h2 { font-weight: 700; padding-left: 0.45rem; letter-spacing: 0.01em; font-size: 1.32rem !important; }
#projekte article.group > div:first-child { position: relative; }
.service-card-white { display: block; will-change: transform; transform: translate3d(0px, 0px, 0px); transition: transform 0.32s, box-shadow 0.32s, border-color 0.32s !important; }
.service-card-white:hover { transform: translate3d(0px, -6px, 0px) !important; box-shadow: rgba(15, 23, 42, 0.06) 0px 10px 22px !important; }
.right { width: 35%; object-fit: cover; transform: scale(1.3); bottom: 0px; right: -6%; }
.marketing2 { padding: 10px 200px 10px 50px; }
.block { display: block; }
.big { padding: 0px 50px; }
.rounded-xl { border-radius: 1.75rem; }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.marketing { padding: 15px; background: url("../images/marketing.webp") right bottom / 32% no-repeat rgb(255, 255, 255); }
.center { text-align: center; }
.veo-menu-toggle:hover { cursor: pointer; }
.veo-menu-toggle svg { width: 1.9rem; height: 1.9rem; flex-shrink: 0; }
.veo-nav-dropdown { position: relative; z-index: 99998; overflow: visible; }
.veo-nav-dropdown::after { content: ""; position: absolute; left: 0px; top: 100%; width: 100%; height: 1rem; }
.veo-nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.menu > a, .menu > .veo-nav-dropdown > .veo-nav-dropdown-toggle { position: relative; color: inherit !important; }
.menu > a::before, .menu > .veo-nav-dropdown > .veo-nav-dropdown-toggle::before { content: ""; position: absolute; left: 0px; bottom: -0.2rem; width: 100%; height: 1.5px; background: rgb(0, 0, 0); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s; }
.menu > a:hover::before, .menu > a:focus-visible::before, .menu > .veo-nav-dropdown:hover > .veo-nav-dropdown-toggle::before, .menu > .veo-nav-dropdown:focus-within > .veo-nav-dropdown-toggle::before, .menu > .veo-nav-dropdown > .veo-nav-dropdown-toggle:hover::before, .menu > .veo-nav-dropdown > .veo-nav-dropdown-toggle:focus-visible::before { transform: scaleX(1); }
.menu > a:hover, .menu > a:focus-visible, .menu > .veo-nav-dropdown:hover > .veo-nav-dropdown-toggle, .menu > .veo-nav-dropdown:focus-within > .veo-nav-dropdown-toggle, .menu > .veo-nav-dropdown > .veo-nav-dropdown-toggle:hover, .menu > .veo-nav-dropdown > .veo-nav-dropdown-toggle:focus-visible { color: inherit !important; }
.veo-nav-dropdown-toggle::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-1px); transition: transform 0.22s; }
.veo-nav-dropdown-menu { position: absolute; left: 0px; min-width: 15rem; padding: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1.25rem; background: rgba(15, 23, 42, 0.88); box-shadow: rgba(15, 23, 42, 0.22) 0px 22px 48px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.22s, transform 0.22s, visibility 0.22s; z-index: 99999; }
.veo-nav-dropdown-menu::before { content: ""; position: absolute; top: -0.6rem; left: 1.1rem; width: 0; height: 0; border-left: 0.6rem solid transparent; border-right: 0.6rem solid transparent; border-bottom: 0.6rem solid rgba(15, 23, 42, 0.88); visibility: visible; transform: none; filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.12)); }
.veo-nav-dropdown:hover .veo-nav-dropdown-toggle::after, .veo-nav-dropdown-menu:hover ~ .veo-nav-dropdown-toggle::after, .veo-nav-dropdown:focus-within .veo-nav-dropdown-toggle::after { transform: rotate(225deg) translateY(-1px); }
.veo-nav-dropdown-menu a { display: block; padding: 0.7rem 0.85rem; border-radius: 0.95rem; color: rgba(255, 255, 255, 0.92); transition: background-color 0.22s, color 0.22s, transform 0.22s; }
.veo-nav-dropdown-menu a:hover, .veo-nav-dropdown-menu a:focus-visible { background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); transform: none; }
.veo-mobile-submenu { margin-top: -0.25rem; margin-left: 0.9rem; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.veo-mobile-accordion { margin: 0px; }
.veo-mobile-accordion summary { list-style: none; }
.veo-mobile-accordion summary::-webkit-details-marker { display: none; }
.veo-mobile-accordion-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; cursor: pointer; color: rgb(255, 255, 255); }
.veo-mobile-accordion-toggle::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); transition: transform 0.22s; flex-shrink: 0; }
.veo-mobile-accordion[open] .veo-mobile-accordion-toggle::after { transform: rotate(225deg) translateY(-1px); }
.veo-mobile-accordion .veo-mobile-submenu { margin-top: 0.5rem; }
.veo-mobile-submenu a { display: block; padding: 0.2rem 0px; color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; font-weight: 600; transition: color 0.2s, transform 0.2s; }
.veo-mobile-submenu a:hover { color: rgb(255, 255, 255); transform: translateX(2px); }
nav[aria-label="Hauptnavigation"], nav[aria-label="Hauptnavigation"] > div, nav[aria-label="Hauptnavigation"] .menu, .index-hero-shell, .rounded-\[2rem\], .menuu, .headerr { overflow: visible !important; }
nav[aria-label="Hauptnavigation"] { position: relative; z-index: 99999; }
nav[aria-label="Hauptnavigation"] .menu { position: relative; z-index: 99999; }
@media (min-width: 56rem) {
  .md\:grid-cols-\[1fr_220px\] { grid-template-columns: 1fr 278px; }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-\[1\.1fr_0\.9fr\] { grid-template-columns: 1.1fr 1.3fr; }
}
@media (max-width: 76rem) {
  .hidden { display: none !important; }
}
@media (max-width: 1600px) {
  .marketing2 { padding: 10px 100px 10px 50px; }
}
@media (max-width: 1300px) {
  .marketing { background: rgb(255, 255, 255); }
  .right { transform: scale(2); margin: 0px auto; text-align: center; }
  .big { padding: 0px 15px; }
}
@media (max-width: 1215px) {
  .to { justify-content: end; top: 11px; right: 22px; position: absolute; display: flex !important; flex-direction: inherit !important; place-self: flex-end !important; }
  .marketing2 { padding: 5px; }
  .bg-body { background: url("../images/bg.svg") right bottom / cover no-repeat; }
  .right { position: relative; top: -140px; margin-top: 0px; width: 36%; margin-left: auto; margin-right: auto; }
  .back { background: url("../images/webdesign-agentur-mobile.webp") 0% 0% / cover no-repeat; }
}
@media (max-width: 1195px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(1, minmax(0px, 1fr)); }
}
.text-3xl { font-size: 1.375rem !important; }
#projekte article.group h2.text-3xl { font-size: 1.22rem !important; }
.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-200%); border-radius: 999px; background: rgb(17, 19, 23); color: rgb(255, 255, 255); padding: 0.8rem 1.1rem; font-weight: 700; transition: transform 0.2s; }
.skip-link:focus, .skip-link:focus-visible { transform: translateY(0px); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: rgb(124, 58, 237) solid 3px; outline-offset: 3px; }
#main-content:focus { outline: none; }
.defer-render { content-visibility: auto; contain-intrinsic-size: 1px 900px; }
.text-slate-500 { color: rgb(71, 85, 105) !important; }
.text-slate-400 { color: rgb(148, 163, 184) !important; }
.text-slate-300 { color: rgb(203, 213, 225) !important; }
.text-white\/50 { color: rgba(255, 255, 255, 0.82) !important; }
.text-white\/70 { color: rgba(255, 255, 255, 0.88) !important; }
.text-white\/75 { color: rgba(255, 255, 255, 0.92) !important; }
@media (min-width: 48rem) {
  .md\:text-5xl { font-size: 25px; line-height: 28px; }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
}
@media (min-width: 80rem) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; }
}
.marketing-copy-wrap { padding: 15px; }
.marketing-copy-link { padding-left: 50px; }
.service-intro-title { color: oklch(0.208 0.042 265.755); font-size: 20px; background-color: transparent; }
.service-intro-text { color: oklch(0.208 0.042 265.755); font-size: 16px; background-color: transparent; }
.service-card-white { background: rgb(255, 255, 255); }
body { overflow-x: hidden; }
::selection { background: rgb(96, 165, 250); color: rgb(255, 255, 255); }
@keyframes faq-answer-rise { 
  0% { opacity: 0; transform: translate3d(0px, 24px, 0px); }
  100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
.text-slate-950 a { background: rgb(255, 255, 255) !important; }
:root { --page-shell-gutter: 50px; }
body > .big { padding-inline: var(--page-shell-gutter); }
body > .big > section[class*="px-4"], body > .big > section[class*="sm:px-6"], body > .big > section[class*="md:px-8"], body > .big > section[class*="lg:px-8"], body > .big > section[class*="lg:px-10"], body > .big > section[class*="lg:px-12"] { padding-inline: 0px !important; }
@media (max-width: 1300px) {
  :root { --page-shell-gutter: 15px; }
}
.logo-reference-grid article .flex.aspect-square { padding: 2.6rem; }
.logo-reference-grid img { display: block; margin: 0px auto; object-fit: contain; filter: grayscale(1) saturate(0) contrast(1.08); width: 82% !important; max-width: 82% !important; max-height: 82% !important; }
.logo-reference-grid--checker > article, .logo-reference-grid--checker > article.bg-white { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; --checker-card-bg: #ffffff; --checker-shell-bg: transparent; --checker-logo-bg: transparent; --checker-img-filter: none; transition: background 0.32s; --checker---checker-logo-background: var(--checker-card-bg) !important; background: var(--checker-shell-bg) !important; }
.logo-reference-grid--checker > article .flex.aspect-square { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; transition: background 0.32s, box-shadow 0.32s; box-shadow: none; background: var(--checker-logo-bg) !important; }
.logo-reference-grid--checker > article img { filter: var(--checker-img-filter); }
.logo-reference-grid--checker > article:nth-child(2n+1) { --checker-card-bg: rgba(255,255,255,0.6); --checker-shell-bg: transparent; --checker-logo-bg: transparent; --checker-img-filter: none; --checker---checker-logo-box-shadow: 0 18px 45px rgba(15,23,42,0.08); }
.logo-reference-grid--checker > article:nth-child(2n) { --checker-card-bg: #5b21b6; --checker-shell-bg: transparent; --checker-logo-bg: #5b21b6; --checker-img-filter: none; --checker---checker-logo-box-shadow: 0 22px 50px rgba(11,33,66,0.24); }
@media (min-width: 40rem) {
  .logo-reference-grid--checker > article:nth-child(4n+1), .logo-reference-grid--checker > article:nth-child(4n+4) { --checker-card-bg: rgba(255,255,255,0.6); --checker-shell-bg: transparent; --checker-logo-bg: transparent; --checker-img-filter: none; --checker---checker-logo-box-shadow: 0 18px 45px rgba(15,23,42,0.08); }
  .logo-reference-grid--checker > article:nth-child(4n+2), .logo-reference-grid--checker > article:nth-child(4n+3) { --checker-card-bg: #5b21b6; --checker-shell-bg: transparent; --checker-logo-bg: #5b21b6; --checker-img-filter: none; --checker---checker-logo-box-shadow: 0 22px 50px rgba(11,33,66,0.24); }
}
@media (min-width: 80rem) {
  .logo-reference-grid--checker > article:nth-child(8n+1), .logo-reference-grid--checker > article:nth-child(8n+3), .logo-reference-grid--checker > article:nth-child(8n+6), .logo-reference-grid--checker > article:nth-child(8n+8) { --checker-card-bg: rgba(255,255,255,0.6); --checker-shell-bg: transparent; --checker-logo-bg: transparent; --checker-img-filter: none; --checker---checker-logo-box-shadow: 0 18px 45px rgba(15,23,42,0.08); }
  .logo-reference-grid--checker > article:nth-child(8n+2), .logo-reference-grid--checker > article:nth-child(8n+4), .logo-reference-grid--checker > article:nth-child(8n+5), .logo-reference-grid--checker > article:nth-child(8n+7) { --checker-card-bg: #5b21b6; --checker-shell-bg: transparent; --checker-logo-bg: #5b21b6; --checker-img-filter: none; --checker---checker-logo-box-shadow: 0 22px 50px rgba(11,33,66,0.24); }
}
.logo-reference-grid--checker > article, .logo-reference-grid--checker > article.bg-white { --checker-card-bg: #0f172a; --checker-shell-bg: transparent; --checker-logo-bg: #0f172a; --checker-img-filter: none; --checker---checker-logo-box-shadow: 0 22px 50px rgba(2,6,23,0.24); }
img.rounded-\[2rem\], video.rounded-\[2rem\], canvas.rounded-\[2rem\] { overflow: hidden !important; }
:root { --motion-ease: cubic-bezier(0.22,1,0.36,1); }
body.motion-ready .motion-reveal { --motion-translate-x: 0px; --motion-translate-y: 32px; --motion-scale: 1; --motion-filter: blur(10px); opacity: 0; transform: translate3d(var(--motion-translate-x),var(--motion-translate-y),0) scale(var(--motion-scale)); filter: var(--motion-filter); transition-property: ; transition-duration: ; transition-timing-function: ; transition-behavior: ; transition-delay: calc(var(--motion-delay-index,0) * 85ms); will-change: opacity, transform, filter; }
body.motion-ready .motion-reveal[data-motion="up"] { --motion-translate-y: 32px; }
body.motion-ready .motion-reveal[data-motion="left"] { --motion-translate-x: -42px; --motion-translate-y: 0px; }
body.motion-ready .motion-reveal[data-motion="right"] { --motion-translate-x: 42px; --motion-translate-y: 0px; }
body.motion-ready .motion-reveal[data-motion="zoom"] { --motion-translate-y: 24px; --motion-scale: 0.94; }
body.motion-ready .motion-reveal[data-motion-surface="glass"] { --motion-filter: none; }
body.motion-ready .motion-reveal.is-visible { opacity: 1; transform: translate3d(0px, 0px, 0px) scale(1); filter: blur(0px); will-change: auto; }
body.motion-ready .motion-reveal[data-motion-surface="glass"].is-visible { filter: none; }
.veo-nav-dropdown-menu { top: calc(100% + 0.9rem); }
.veo-nav-dropdown-menu::before { top: -0.56rem; }
#projekte .project-card-featured-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.8rem; padding: 1.05rem 0.35rem 0.9rem; }
body.webdesign-references-page #projekte article.group:not(.project-card-featured), body.flyer-references-page #projekte article.group:not(.project-card-featured) { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(168, 85, 247, 0.38); background: radial-gradient(circle at right top, rgba(168, 85, 247, 0.24), transparent 30%), linear-gradient(rgb(248, 253, 255) 0%, rgb(255, 255, 255) 34%, rgb(239, 246, 255) 100%); box-shadow: rgba(139, 92, 246, 0.12) 0px 26px 58px; }
body.webdesign-references-page #projekte article.group:not(.project-card-featured)::before, body.flyer-references-page #projekte article.group:not(.project-card-featured)::before { content: ""; position: absolute; inset: auto -4rem -4rem auto; width: 13rem; height: 13rem; border-radius: 999px; background: rgba(124, 58, 237, 0.12); filter: blur(10px); }
body.webdesign-references-page #projekte article.group:not(.project-card-featured) > *, body.flyer-references-page #projekte article.group:not(.project-card-featured) > * { position: relative; z-index: 1; }
body.webdesign-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media > img, body.flyer-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media > img { width: 100%; height: clamp(12.5rem, 18vw, 14.5rem); object-fit: cover; }
body.webdesign-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media::before, body.flyer-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media::before { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(15, 23, 42, 0.82); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.8) 0px 16px 30px; flex: 1 1 auto; flex-direction: column; gap: 0.8rem; padding: 1.05rem 0.35rem 0.9rem; }
body.webdesign-references-page #projekte article.group:not(.project-card-featured) > .pt-4 > .mt-2.flex.items-end.justify-between.gap-3, body.flyer-references-page #projekte article.group:not(.project-card-featured) > .pt-4 > .mt-2.flex.items-end.justify-between.gap-3 { display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 0.85rem; margin-top: 0px; }
body.webdesign-references-page #projekte article.group:not(.project-card-featured) h2, body.flyer-references-page #projekte article.group:not(.project-card-featured) h2 { margin: 0px; min-width: 0px; width: 100%; line-height: 1.02; text-align: left; padding-left: 0px !important; font-family: Manrope, sans-serif !important; font-size: clamp(1.02rem, 0.9vw, 1.28rem) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
body.webdesign-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-copy, body.flyer-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-copy { flex: 1 1 auto; margin: 0.05rem 0px 0px; max-width: none; font-size: 0.95rem; line-height: 1.7; color: rgb(71, 85, 105); }
body.webdesign-references-page #projekte article.group:not(.project-card-featured) .pt-4 a.inline-flex, body.flyer-references-page #projekte article.group:not(.project-card-featured) .pt-4 a.inline-flex { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; width: auto; height: auto; margin-top: auto; margin-left: auto; border-radius: 1.2rem; background: rgb(2, 6, 23); padding: 0.8rem 1.05rem; font-size: 0.84rem; font-weight: 700; color: rgb(255, 255, 255); box-shadow: rgba(2, 6, 23, 0.18) 0px 18px 36px; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s; }
body.webdesign-references-page #projekte article.group:not(.project-card-featured) .pt-4 a.inline-flex::before { content: "Live ansehen"; }
body.flyer-references-page #projekte article.group:not(.project-card-featured) .pt-4 a.inline-flex::before { content: "Design ansehen"; }
@media (max-width: 48rem) {
  body.webdesign-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media > img, body.flyer-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media > img { height: clamp(12.75rem, 58vw, 14.75rem); }
}
.service-visual-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1.4rem 1.4rem 1.5rem; background: linear-gradient(rgba(248, 248, 248, 0.5), rgba(248, 248, 248, 0.5)); }
@media (max-width: 48rem) {
  .service-visual-body { padding: 1.2rem 1.2rem 1.3rem; }
}
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo, footer .footer-panel .logo { width: auto; align-items: flex-start; gap: 1rem; }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo img, footer .footer-panel .logo img { width: 73px; max-width: none; filter: drop-shadow(rgba(139, 92, 246, 0.16) 0px 10px 24px); }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div, footer .footer-panel .logo > div { display: flex; flex-direction: column; justify-content: center; min-height: 86px; }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div::before, footer .footer-panel .logo > div::before { content: "weeo"; display: block; font-family: Anton, sans-serif; font-size: 1.95rem; line-height: 0.95; letter-spacing: 0.04em; color: rgb(255, 255, 255); }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div::after, footer .footer-panel .logo > div::after { content: "SEO, Webdesign und Markenauftritte aus Frankfurt."; display: block; max-width: 19ch; margin-top: 0.7rem; font-size: 0.98rem; line-height: 1.65; color: rgba(226, 232, 240, 0.84); }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo, .footer-panel .logo { align-items: flex-start !important; gap: 1rem !important; width: auto !important; }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo img, .footer-panel .logo img { width: 79px !important; filter: drop-shadow(rgba(139, 92, 246, 0.16) 0px 14px 34px) !important; }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div, .footer-panel .logo > div { display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 92px !important; }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div::before, .footer-panel .logo > div::before { content: "weeo"; display: block; font-family: Anton, sans-serif; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 0.92; letter-spacing: 0.05em; color: rgb(255, 255, 255); }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div::after, .footer-panel .logo > div::after { content: "SEO, Webdesign und Markenauftritte aus Frankfurt."; display: block; max-width: 22ch; margin-top: 0.85rem; font-size: 1rem; line-height: 1.72; color: rgba(226, 232, 240, 0.84); }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div, .footer-panel .logo > div { display: none !important; min-height: 0px !important; }
.big > nav[aria-label="Hauptnavigation"] { padding-top: 1.35rem !important; padding-bottom: 1rem !important; }
.big > nav[aria-label="Hauptnavigation"] > .mx-auto.max-w-7xl { position: relative; }
.big > nav[aria-label="Hauptnavigation"] > .mx-auto.max-w-7xl > div:first-child { position: absolute; inset: -20% auto auto 54%; width: 22rem; height: 22rem; pointer-events: none; overflow: visible !important; border: 1px solid rgba(148, 163, 184, 0.2) !important; border-radius: 2.2rem !important; background: radial-gradient(circle at right top, rgba(168, 85, 247, 0.2), transparent 26%), linear-gradient(135deg, rgb(11, 33, 66) 0%, rgb(91, 33, 182) 52%, rgb(14, 31, 56) 100%) !important; box-shadow: rgba(2, 6, 23, 0.22) 0px 28px 70px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important; }
.big > nav[aria-label="Hauptnavigation"] > .mx-auto.max-w-7xl > div:first-child::after { content: ""; position: absolute; inset: auto -3rem -3.5rem auto; width: 18rem; height: 10rem; border-radius: 999px; border: 1px solid rgba(221, 214, 254, 0.14); transform: rotate(-14deg); opacity: 0.8; pointer-events: none; }
.big > nav[aria-label="Hauptnavigation"] > .mx-auto.max-w-7xl > div:first-child > div { position: relative; z-index: 1; gap: 1.25rem !important; padding: 1rem 1.35rem !important; }
.big > nav[aria-label="Hauptnavigation"] .logo2 { position: relative; z-index: 1; align-self: flex-start; width: auto !important; min-width: 0px !important; margin-left: 0px !important; transform: none !important; gap: 0px !important; }
.big > nav[aria-label="Hauptnavigation"] .logo2 img { filter: drop-shadow(rgba(168, 85, 247, 0.18) 0px 14px 28px); width: 62px !important; max-width: none !important; }
.big > nav[aria-label="Hauptnavigation"] .logo2 > div { display: none !important; }
.big > nav[aria-label="Hauptnavigation"] .menu, .index-hero-shell nav[aria-label="Hauptnavigation"] .menu { gap: 0.95rem !important; color: rgb(255, 255, 255) !important; font-family: Manrope, sans-serif !important; font-size: 0.96rem !important; font-weight: 700 !important; letter-spacing: 0.01em !important; }
.big > nav[aria-label="Hauptnavigation"] .menu > a::before, .big > nav[aria-label="Hauptnavigation"] .menu > .veo-nav-dropdown > .veo-nav-dropdown-toggle::before, .index-hero-shell nav[aria-label="Hauptnavigation"] .menu > a::before, .index-hero-shell nav[aria-label="Hauptnavigation"] .menu > .veo-nav-dropdown > .veo-nav-dropdown-toggle::before { height: 2px !important; background: #fff !important; }
.big > nav[aria-label="Hauptnavigation"] .menu > a:hover, .big > nav[aria-label="Hauptnavigation"] .menu > a:focus-visible, .big > nav[aria-label="Hauptnavigation"] .menu > .veo-nav-dropdown:hover > .veo-nav-dropdown-toggle, .big > nav[aria-label="Hauptnavigation"] .menu > .veo-nav-dropdown:focus-within > .veo-nav-dropdown-toggle { color: rgb(255, 255, 255) !important; }
.big > nav[aria-label="Hauptnavigation"] .veo-nav-dropdown-toggle::after { border-right-color: rgba(226, 232, 240, 0.9) !important; border-bottom-color: rgba(226, 232, 240, 0.9) !important; }
.big > nav[aria-label="Hauptnavigation"] .veo-nav-dropdown-menu { background: rgb(15, 23, 42) !important; }
@media (max-width: 1215px) {
  .big > nav[aria-label="Hauptnavigation"] .to { top: 50% !important; transform: translateY(-50%) !important; }
  .big > nav[aria-label="Hauptnavigation"] .to, .big > nav[aria-label="Hauptnavigation"] .veo-menu-toggle { z-index: 3; }
}
.big > nav[aria-label="Hauptnavigation"] .veo-nav-dropdown-menu::before { border-bottom-color: rgb(15, 23, 42) !important; }
.veo-nav-dropdown-menu { width: 18.5rem !important; min-width: 18.5rem !important; max-width: calc(-2rem + 100vw) !important; box-sizing: border-box !important; }
.veo-nav-dropdown-menu a { border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 0px !important; position: relative !important; white-space: nowrap !important; }
.veo-nav-dropdown-menu a + a { margin-top: 0px !important; border-top-width: medium !important; border-top-style: none !important; border-top-color: currentcolor !important; }
.veo-nav-dropdown-menu a + a::after { content: "" !important; position: absolute !important; top: 0px !important; left: 0.75rem !important; right: 0.75rem !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; pointer-events: none !important; }
.veo-nav-dropdown-menu a:hover, .veo-nav-dropdown-menu a:focus-visible { border-radius: 0.45rem !important; }
.big > nav[aria-label="Hauptnavigation"] .menu .hidden.md\:flex a[href*="wa.me"], .index-hero-shell nav[aria-label="Hauptnavigation"] .menu .hidden.md\:flex a[href*="wa.me"] { min-height: 3.3rem !important; padding: 0.88rem 1.25rem !important; border: 1px solid rgba(34, 197, 94, 0.5) !important; background: rgb(34, 197, 94) !important; box-shadow: rgba(0, 199, 88, 0.3) 0px 10px 15px -3px, rgba(0, 199, 88, 0.3) 0px 4px 6px -4px !important; }
.big > nav[aria-label="Hauptnavigation"] .menu .hidden.md\:flex a[href*="wa.me"]:hover, .index-hero-shell nav[aria-label="Hauptnavigation"] .menu .hidden.md\:flex a[href*="wa.me"]:hover { background: rgb(22, 163, 74) !important; }
.big > nav[aria-label="Hauptnavigation"] .veo-menu-toggle, .big > nav[aria-label="Hauptnavigation"] .veo-menu-toggle--inverted { filter: none !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important; color: rgb(255, 255, 255) !important; }
.big > nav[aria-label="Hauptnavigation"] #mobile-menu { overflow: hidden; border: 1px solid rgba(196, 181, 253, 0.16); background: radial-gradient(circle at right top, rgba(168, 85, 247, 0.18), transparent 34%), linear-gradient(rgba(7, 21, 38, 0.98), rgba(11, 33, 66, 0.96)) !important; box-shadow: rgba(2, 6, 23, 0.3) 0px 24px 48px !important; }
.big > nav[aria-label="Hauptnavigation"] #mobile-menu a, .big > nav[aria-label="Hauptnavigation"] #mobile-menu .veo-mobile-accordion-toggle { color: rgba(241, 245, 249, 0.96) !important; }
.big > nav[aria-label="Hauptnavigation"] #mobile-menu .veo-mobile-submenu { border-left-color: rgba(196, 181, 253, 0.24) !important; }
@media (max-width: 47.99rem) {
  .big > nav[aria-label="Hauptnavigation"] { padding-top: 1rem !important; padding-bottom: 0.8rem !important; }
  .big > nav[aria-label="Hauptnavigation"] > .mx-auto.max-w-7xl > div:first-child { border-radius: 1.65rem !important; }
  .big > nav[aria-label="Hauptnavigation"] > .mx-auto.max-w-7xl > div:first-child > div { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; padding: 1rem 1rem 1.15rem !important; }
  .big > nav[aria-label="Hauptnavigation"] .logo2 img { width: 53px !important; }
  .big > nav[aria-label="Hauptnavigation"] .to { position: static !important; top: auto !important; right: auto !important; transform: none !important; place-self: center auto !important; margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; z-index: 3 !important; }
  .big > nav[aria-label="Hauptnavigation"] .veo-menu-toggle, .big > nav[aria-label="Hauptnavigation"] .veo-menu-toggle--inverted, .index-hero-shell nav[aria-label="Hauptnavigation"] .veo-menu-toggle, .index-hero-shell nav[aria-label="Hauptnavigation"] .veo-menu-toggle--inverted { position: relative !important; z-index: 4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
}
@media (max-width: 1215px) {
  .bg-body { background-size: auto !important; background-repeat: repeat !important; background-position: left top !important; }
}
@media (max-width: 47.99rem) {
  html, body { overflow-x: clip; }
  footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo, .footer-panel .logo { display: grid !important; grid-template-columns: 1fr !important; gap: 0.85rem !important; }
  footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div, .footer-panel .logo > div { min-height: 0px !important; min-width: 0px !important; }
  footer .rounded-\[2\.5rem\].bg-\[\#111317\] .logo > div::after, .footer-panel .logo > div::after { max-width: 100% !important; }
}
#main-content > .mx-auto.max-w-7xl > .mb-10.rounded-\[2\.5rem\].bg-white\/75, #main-content > .mx-auto.max-w-7xl > .rounded-\[2\.5rem\].border.border-white\/70.bg-white\/70.px-8.py-14.backdrop-blur-xl { position: relative; overflow: hidden; isolation: isolate; box-shadow: none !important; --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),rgba(255,255,255,0.6) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position)) !important; }
.via-white { --tw-gradient-via: rgba(255,255,255,0.5) !important; --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),rgba(255,255,255,0.5) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position) !important; }
.to-sky-50 { --tw-gradient-to: rgba(240,249,255,0.45) !important; }
.to-emerald-50 { --tw-gradient-to: rgba(236,253,245,0.45) !important; }
.to-amber-50 { --tw-gradient-to: rgba(255,251,235,0.45) !important; }
#main-content > .mx-auto.max-w-7xl > .mb-10.rounded-\[2\.5rem\].bg-white\/75::before, #main-content > .mx-auto.max-w-7xl > .rounded-\[2\.5rem\].border.border-white\/70.bg-white\/70.px-8.py-14.backdrop-blur-xl::before { content: ""; position: absolute; inset: 0px; background: none; pointer-events: none; z-index: 0; }
#main-content > .mx-auto.max-w-7xl > .mb-10.rounded-\[2\.5rem\].bg-white\/75 > *, #main-content > .mx-auto.max-w-7xl > .rounded-\[2\.5rem\].border.border-white\/70.bg-white\/70.px-8.py-14.backdrop-blur-xl > * { position: relative; z-index: 1; }
#main-content nav[aria-label="Breadcrumb"] ol { align-items: center; justify-content: center; padding: 0.78rem 1.15rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: rgba(15, 23, 42, 0.08) 0px 14px 34px, rgba(255, 255, 255, 0.4) 0px 1px 0px inset; contain: none; margin-bottom: 1.35rem !important; }
body.motion-ready .defer-render-static.motion-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; will-change: auto !important; }
section:is(div, article, details)[class*="rounded"][class*="border"] { border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }
#projekte .project-hero-header, #projekte article.group, #projekte article.group:hover, #projekte .project-card-featured, #projekte .project-card-featured-badge, #projekte .project-card-featured-domain, #projekte .project-card-featured-link, #projekte .project-card-featured-link:hover, body.webdesign-references-page #projekte article.group:not(.project-card-featured), body.flyer-references-page #projekte article.group:not(.project-card-featured), body.webdesign-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media::before, body.flyer-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media::before, body.webdesign-references-page #projekte article.group:not(.project-card-featured) .pt-4 a.inline-flex, body.flyer-references-page #projekte article.group:not(.project-card-featured) .pt-4 a.inline-flex, body.webdesign-references-page #projekte article.group:not(.project-card-featured) .pt-4 a.inline-flex:hover, body.flyer-references-page #projekte article.group:not(.project-card-featured) .pt-4 a.inline-flex:hover { box-shadow: none !important; }
.group { border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; --tw-ring-offset-shadow: 0 0 #0000 !important; --tw-ring-shadow: 0 0 #0000 !important; --tw-ring-color: transparent !important; }
.bg-body, body.bg-body, body.index-page-bg { background-image: url("../images/bg.svg") !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center top !important; }
.portfolio-gradient-text { display: inline-block; background: none !important; color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }
body.webdesign-references-page .portfolio-shell h1.font-heading.text-slate-950 { color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }
body.webdesign-references-page .portfolio-shell nav[aria-label="Breadcrumb"] ol, body.webdesign-references-page .portfolio-shell nav[aria-label="Breadcrumb"] li, body.webdesign-references-page .portfolio-shell nav[aria-label="Breadcrumb"] a { color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }
footer .rounded-\[2\.5rem\].bg-\[\#111317\] > .grid.gap-8.md\:grid-cols-5 > div:nth-child(5) a.block.transition, .footer-panel > .grid.gap-8.md\:grid-cols-5 > div:nth-child(5) a.block.transition { padding: 0.42rem 15px !important; }
body > .big > nav > .mx-auto, body > .big > nav > .mx-auto > .rounded-\[2rem\], body > .big > nav .menu, body > .big > nav .veo-nav-dropdown { position: relative; z-index: 100001 !important; overflow: visible !important; }
body > .big > nav .veo-nav-dropdown-menu { z-index: 100002 !important; }
body > .big > #main-content { position: relative; z-index: 1; }
footer .rounded-\[2\.5rem\].bg-\[\#111317\], .footer-panel { background: none rgb(0, 0, 0) !important; }
body, .bg-body, body.bg-body, body.index-page-bg { background: none rgb(242, 242, 242) !important; }
body.flyer-references-page #projekte article.group .gallery-image { display: block; transform-origin: center center; backface-visibility: hidden; will-change: transform, filter; transform: translateZ(0px) scale(1) !important; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s !important; }
body.flyer-references-page #projekte article.group:hover .gallery-image { transform: translateZ(0px) scale(1.12) !important; filter: saturate(1.08) contrast(1.04) brightness(1.02) !important; }
.home-stats-section { }
.home-stats-line { width: 2rem; height: 1px; background: rgb(168, 85, 247); }
.home-stats-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(76, 29, 149) !important; }
.home-stats-grid { display: grid; gap: 1rem; }
.home-stat-card { position: relative; overflow: hidden; padding: 1.5rem 1.45rem; border-radius: 1.5rem; transition: transform 0.28s, background-color 0.28s; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; background: rgb(242, 242, 242) !important; color: rgb(0, 0, 0) !important; }
.home-stat-card:hover { transform: translateY(-4px); background: rgb(242, 242, 242) !important; }
.home-stat-card * { color: rgb(0, 0, 0) !important; }
.home-stat-accent { width: 2rem; height: 0.25rem; border-radius: 999px; background: rgb(168, 85, 247); margin-bottom: 1rem; transition: width 0.28s; }
.home-stat-card:hover .home-stat-accent { width: 3rem; }
.home-stat-value { font-family: Anton, sans-serif; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; color: rgb(0, 0, 0) !important; }
.home-stat-unit { font-family: Anton, sans-serif; font-size: 1.15rem; color: rgb(0, 0, 0) !important; }
.home-stat-label { margin-top: 0.35rem; font-size: 0.95rem; font-weight: 600; color: rgb(0, 0, 0) !important; }
.home-stat-copy { margin-top: 0.7rem; font-size: 0.82rem; line-height: 1.7; color: rgb(0, 0, 0) !important; }
.home-why-intro { max-width: 42rem; margin-bottom: 2.5rem; }
.home-why-intro-copy { margin-top: 1.2rem; font-size: 1.08rem; line-height: 1.85; color: rgb(71, 85, 105); }
.home-why-grid--cards { grid-template-columns: 1fr !important; }
.home-why-item--feature { display: flex; flex-direction: column; gap: 1.2rem; position: relative; overflow: hidden; padding: 1.55rem; border-radius: 1.6rem; transition: transform 0.32s, box-shadow 0.32s; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; background: rgb(242, 242, 242) !important; box-shadow: none !important; }
.home-why-item--feature::before, .home-why-item--feature::after { content: none !important; display: none !important; }
.home-why-item--feature:hover { transform: translateY(-6px); box-shadow: none !important; }
.home-why-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem; background: rgb(11, 33, 66); color: rgb(168, 85, 247); box-shadow: rgba(11, 33, 66, 0.2) 0px 16px 32px; }
.home-why-icon svg { width: 1.5rem; height: 1.5rem; }
.home-why-meta { display: flex; flex-direction: column; }
.home-why-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(124, 58, 237); }
.home-why-points { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: auto; }
.home-why-points span { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(139, 92, 246, 0.16); background: rgb(242, 242, 242); padding: 0.68rem 0.92rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(15, 23, 42); }
.service-visual-icon img { width: 1.55rem; height: 1.55rem; filter: invert(1); }
@media (min-width: 48rem) {
  .home-stats-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .home-why-grid--cards { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
}
@media (min-width: 80rem) {
  .home-stats-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
}
@media (max-width: 48rem) {
  .home-stat-card { padding: 1.25rem; }
  .home-why-intro-copy { font-size: 1rem; line-height: 1.72; }
  .home-why-item--feature { padding: 1.25rem; }
  .home-why-points span { width: 100%; justify-content: center; }
}
.home-reviews-section { background: rgb(255, 255, 255); }
.home-workflow-section { background: rgb(242, 242, 242); }
.home-reviews-shell, .home-workflow-shell { background: rgb(255, 255, 255); }
.home-reviews-head { display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; }
.home-reviews-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(124, 58, 237); }
.home-reviews-summary { display: flex; align-items: center; gap: 1rem; align-self: flex-start; padding: 1rem 1.15rem; border-radius: 1.4rem; background: rgb(11, 33, 66); color: rgb(255, 255, 255); }
.home-reviews-score { font-family: Anton, sans-serif; font-size: 2.6rem; line-height: 1; }
.home-reviews-summary-label { font-size: 0.95rem; font-weight: 700; color: rgb(255, 255, 255); }
.home-reviews-intro { max-width: 52rem; margin-top: 1.35rem; font-size: 1rem; line-height: 1.85; color: rgb(71, 85, 105); }
.home-reviews-slider { margin-top: 2.5rem; }
.home-reviews-slider-top { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-bottom: 1.25rem; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; }
.home-reviews-stars { font-size: 1rem; font-weight: 800; letter-spacing: 0.18em; color: rgb(245, 158, 11); }
.home-reviews-stage { display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: center; gap: 0.9rem; }
.home-reviews-nav-button { display: inline-flex; align-items: center; justify-content: center; width: 3.35rem; height: 3.35rem; padding: 0px; border: 1px solid rgb(219, 228, 239); border-radius: 999px; background: rgb(255, 255, 255); color: rgb(11, 33, 66); font-size: 1.15rem; font-weight: 800; cursor: pointer; box-shadow: rgba(11, 33, 66, 0.1) 0px 14px 30px; transition: opacity 0.24s, transform 0.24s, box-shadow 0.24s, border-color 0.24s, background 0.24s, color 0.24s; }
.home-reviews-nav-button svg { width: 1.15rem; height: 1.15rem; display: block; }
.home-reviews-nav-button:hover { transform: translateY(-2px); border-color: rgb(168, 85, 247); box-shadow: rgba(11, 33, 66, 0.16) 0px 18px 38px; background: rgb(11, 33, 66); color: rgb(255, 255, 255); }
.home-reviews-nav-button:active { transform: translateY(0px); }
.home-reviews-nav-button:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
.home-reviews-viewport { overflow: hidden; cursor: grab; user-select: none; }
.home-reviews-viewport:hover { cursor: grab; }
.home-reviews-slider.is-dragging .home-reviews-viewport { cursor: grabbing; }
.home-reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1rem; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); user-select: none; }
.home-review-slide { height: 100%; user-select: none; }
.home-review-slide * { user-select: none; }
.review-card-avatar-initial { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid rgb(219, 228, 239); padding: 0px; }
.review-card-avatar-initial svg { display: block; width: 1.72rem; height: 1.72rem; margin: auto; }
.home-workflow-shell .Designfreak_solutions_inner { max-width: 100%; }
@media (max-width: 47.99rem) {
  .home-reviews-stage { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .home-reviews-viewport { grid-column: 1 / -1; order: 3; }
  .home-reviews-nav-button--prev { justify-self: start; }
  .home-reviews-nav-button--next { justify-self: end; }
}
@media (min-width: 48rem) {
  .home-reviews-head { flex-direction: row; align-items: end; }
  .home-reviews-track { grid-auto-columns: calc(50% - 0.5rem); }
}
@media (min-width: 64rem) {
  .home-reviews-track { grid-auto-columns: calc(33.3333% - 0.666667rem); }
}
.home-workflow-layout { position: relative; }
.home-workflow-grid { display: grid; gap: 1.5rem; }
.home-workflow-sidebar { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; border-radius: 2rem; background: linear-gradient(rgb(248, 251, 255) 0%, rgb(238, 245, 255) 100%); }
.home-workflow-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(124, 58, 237); }
.home-workflow-title { max-width: 12ch; }
.home-workflow-copy { max-width: 34rem; font-size: 1rem; line-height: 1.8; color: rgb(71, 85, 105); }
.home-workflow-points { display: grid; gap: 0.75rem; }
.home-workflow-point { display: grid; gap: 0.2rem; padding: 1rem 1.1rem; border-radius: 1.25rem; background: rgb(255, 255, 255); }
.home-workflow-point strong { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(15, 23, 42); }
.home-workflow-point span { font-size: 0.92rem; line-height: 1.6; color: rgb(71, 85, 105); }
.home-workflow-steps { display: grid; gap: 0.7rem; margin-top: 0.25rem; }
.home-workflow-step { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-radius: 1.2rem; background: rgb(226, 232, 240); color: rgb(15, 23, 42); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background-color 0.24s, color 0.24s, transform 0.24s; }
.home-workflow-step.selected { background: rgb(11, 33, 66); color: rgb(255, 255, 255); transform: translateX(0.15rem); }
.home-workflow-stage { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-radius: 2rem; background: radial-gradient(circle at right top, rgba(168, 85, 247, 0.18), transparent 24%), linear-gradient(135deg, rgb(8, 23, 45) 0%, rgb(11, 33, 66) 58%, rgb(109, 40, 217) 100%); }
.home-workflow-stage-head { display: flex; flex-direction: column; gap: 1rem; }
.home-workflow-badge { display: inline-flex; align-self: flex-start; padding: 0.7rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255, 255, 255); }
.home-workflow-mini-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.home-workflow-mini-stats span { display: inline-flex; padding: 0.62rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); }
.home-workflow-card { display: grid; gap: 1rem; padding: 0px; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; background: transparent !important; box-shadow: none !important; }
.home-workflow-media { overflow: hidden; border-radius: 1.6rem; aspect-ratio: 16 / 10; background: rgb(15, 23, 42); }
.home-workflow-card-body { display: grid; gap: 1rem; padding: 1.35rem; border-radius: 1.6rem; background: rgb(255, 255, 255); }
.home-workflow-card-top { display: grid; gap: 0.5rem; }
.home-workflow-card-index { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(124, 58, 237); }
.home-workflow-card-title { font-size: clamp(1.6rem, 2vw, 2.3rem); line-height: 1; color: rgb(15, 23, 42); }
.home-workflow-tags { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.home-workflow-tags span { display: inline-flex; padding: 0.62rem 0.85rem; border-radius: 999px; background: rgb(239, 246, 255); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(15, 23, 42); }
.home-workflow-bottom { display: grid; gap: 0.75rem; }
.home-workflow-bottom-card { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; border-radius: 1.3rem; background: rgba(255, 255, 255, 0.12); }
.home-workflow-bottom-card strong { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255, 255, 255); }
.home-workflow-bottom-card span { font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.home-workflow-shell .Designfreak_solutions_tabs_contents { height: auto !important; }
.home-workflow-shell .workflow-slide { display: none; }
.home-workflow-shell .workflow-slide.selected { display: grid; }
@media (min-width: 64rem) {
  .home-workflow-grid { grid-template-columns: minmax(20rem, 0.9fr) minmax(0px, 1.1fr); }
  .home-workflow-sidebar { padding: 2rem; }
  .home-workflow-stage { padding: 1.6rem; }
}
.big > nav[aria-label="Hauptnavigation"] { padding-top: 0.3rem !important; padding-bottom: 1rem !important; }
.faq-item.stack-up-item.rounded-\[1\.75rem\].border.border-slate-200.bg-white.p-5.shadow-sm { background: none rgb(242, 242, 242) !important; }
.faq-question { font-family: Anton, sans-serif !important; }
.faq-solution.mt-4.bg-slate-50.p-4.ring-1.ring-slate-200 { background: none rgb(255, 255, 255) !important; }
.home-workflow-shell { background: rgb(255, 255, 255) !important; }
.home-workflow-flow { display: grid; gap: 2rem; }
.home-workflow-flow-head { max-width: 43rem; }
.home-workflow-flow-title { max-width: 12ch; }
.home-workflow-flow-copy { margin-top: 1.2rem; max-width: 42rem; font-size: 1rem; line-height: 1.85; color: rgb(71, 85, 105); }
.home-workflow-flow-grid { display: grid; gap: 1rem; }
.home-workflow-flow-card { position: relative; }
.home-workflow-flow-connector { display: none; }
.home-workflow-flow-card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: 1.5rem; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 1.5rem; background: rgb(255, 255, 255); transition: box-shadow 0.24s, transform 0.24s; }
.home-workflow-flow-card:hover .home-workflow-flow-card-inner { box-shadow: rgba(15, 23, 42, 0.08) 0px 18px 50px; transform: translateY(-2px); }
.home-workflow-flow-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home-workflow-flow-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.35rem; height: 3.35rem; border-radius: 1rem; background: rgb(255, 255, 255); color: rgb(11, 33, 66); flex-shrink: 0; }
.home-workflow-flow-icon svg { width: 1.35rem; height: 1.35rem; }
.home-workflow-flow-step { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.75rem; border-radius: 999px; background: rgb(224, 242, 254); color: rgb(15, 23, 42); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; }
.home-workflow-flow-card-title { font-size: 1.45rem; line-height: 1.1; color: rgb(15, 23, 42); }
.home-workflow-flow-card-copy { font-size: 0.98rem; line-height: 1.8; color: rgb(71, 85, 105); }
@media (min-width: 48rem) {
  .home-workflow-flow-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1.25rem; }
  .home-workflow-flow-card-inner { padding: 1.65rem; }
}
@media (min-width: 64rem) {
  .home-workflow-flow { gap: 2.5rem; }
  .home-workflow-flow-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 1.5rem; }
  .home-workflow-flow-card { min-height: 100%; }
  .home-workflow-flow-connector { display: block; position: absolute; top: 2.1rem; left: calc(100% + 0.75rem); width: calc(100% - 1.5rem); height: 1px; background: rgb(219, 228, 239); }
  .home-workflow-flow-card:last-child .home-workflow-flow-connector { display: none; }
  .home-workflow-flow-card-inner { padding: 1.75rem; min-height: 100%; }
}
.veo-services-grid-shell { max-width: 1600px; }
.veo-services-grid-section { padding-top: 100px; padding-bottom: 130px; }
.veo-services-grid { width: 100%; }
.veo-services-grid-head { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
.veo-services-grid-head-main { min-width: 0px; }
.veo-services-grid-kicker { margin: 0px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(10, 143, 138); }
.veo-services-grid-title { margin: 1.15rem 0px 0px; font-family: inherit; font-size: clamp(1.85rem, 2.8vw, 2.9rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; color: rgb(17, 19, 23); text-transform: none; }
.veo-services-grid-cards { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgb(216, 222, 231); border-radius: 1.6rem; background: rgb(216, 222, 231); }
.veo-services-grid-card { display: flex; min-height: 500px; flex-direction: column; background: rgb(242, 242, 242); padding: 1.25rem; color: rgb(17, 19, 23); text-decoration: none; transition: background-color 0.28s, color 0.28s; }
.veo-services-grid-card:hover { background: rgb(248, 251, 251); }
.veo-services-grid-media { position: relative; height: 14rem; overflow: hidden; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 1rem; box-shadow: rgb(216, 222, 231) 0px 0px 0px 1px inset; }
.veo-services-grid-media--mint { background: rgb(221, 253, 252); }
.veo-services-grid-media--white { background: rgb(255, 255, 255); }
.veo-services-grid-media--slate { background: rgb(237, 241, 245); }
.veo-services-grid-media img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center center; transition: transform 0.7s; }
.veo-services-grid-card:hover .veo-services-grid-media img { transform: scale(1.05); }
.veo-services-grid-body { padding-top: 2rem; }
.veo-services-grid-index { margin: 0px; font-size: 0.88rem; font-weight: 900; color: rgb(10, 143, 138); }
.veo-services-grid-card-title { margin: 1rem 0px 0px; font-family: inherit; font-size: clamp(2rem, 2.7vw, 2rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.03em; color: rgb(17, 19, 23); }
.veo-services-grid-highlight { max-width: 18rem; margin: 1.2rem 0px 0px; font-family: var(--font-heading); font-size: 1.32rem; font-weight: 400; line-height: 1.45; color: rgb(17, 19, 23); }
.veo-services-grid-copy { margin: 1rem 0px 0px; line-height: 1.75; color: rgb(70, 82, 96); }
.veo-services-grid-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 2rem; font-size: 0.88rem; font-weight: 900; color: rgb(17, 19, 23); }
.veo-services-grid-link svg { width: 1rem; height: 1rem; transition: transform 0.28s; }
.veo-services-grid-card:hover .veo-services-grid-link svg { transform: translateX(0.5rem); }
@media (min-width: 64rem) {
  .veo-services-grid-head { grid-template-columns: minmax(0px, 2fr) minmax(18rem, 1fr); align-items: end; }
  .veo-services-grid-cards { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (min-width: 80rem) {
  .veo-services-grid-cards { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
}
@media (min-width: 40rem) {
  .veo-services-grid-card { padding: 1.75rem; }
  .veo-services-grid-media { height: 14.5rem; }
}
@media (max-width: 48rem) {
  .veo-services-grid-head { margin-bottom: 2rem; }
  .veo-services-grid-title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .veo-services-grid-card { min-height: auto; padding: 1.25rem; }
  .veo-services-grid-media { height: 13rem; }
  .veo-services-grid-body { padding-top: 1.6rem; }
  .veo-services-grid-highlight { font-size: 1.14rem; line-height: 1.5; }
  .veo-services-grid-copy { font-size: 0.98rem; line-height: 1.7; }
  .veo-services-grid-link { padding-top: 1.6rem; }
}
@font-face { font-family: Anton; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Anton; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --font-heading: "Anton" !important; }
.font-heading { letter-spacing: 0.01em; font-family: Anton, sans-serif !important; font-weight: 400 !important; }
.home-trust-value { font-family: Anton, sans-serif !important; }
.font-heading.text-5xl { font-size: clamp(2.45rem, 4.5vw, 4.15rem) !important; line-height: 0.95 !important; }
.font-heading.text-4xl { font-size: clamp(1.9rem, 3.3vw, 2.9rem) !important; line-height: 1.02 !important; }
.font-heading.text-3xl { font-size: clamp(1.45rem, 2.2vw, 1.5rem) !important; line-height: 1.06 !important; }
.font-heading.text-2xl { font-size: clamp(1.2rem, 1.7vw, 1.55rem) !important; line-height: 1.08 !important; }
#lightbox { z-index: 200000 !important; }
.veo-services-grid-title { font-size: clamp(1.65rem, 2.35vw, 2.45rem) !important; }
.home-workflow-flow-title { font-size: clamp(1.9rem, 3vw, 2.8rem) !important; line-height: 1.02 !important; }
.project-hero-title { font-size: clamp(1.9rem, 3vw, 2.8rem) !important; line-height: 1.02 !important; }
@media (max-width: 48rem) {
  .veo-services-grid-title { font-size: clamp(1.8rem, 8.4vw, 2.45rem) !important; }
  .home-workflow-flow-title, .project-hero-title { font-size: clamp(1.85rem, 8.2vw, 2.45rem) !important; }
}
:root { --container-7xl: 1550px !important; }
.mx-auto.max-w-7xl, .section-shell.mx-auto.max-w-7xl, [class*="max-w-7xl"] { max-width: 1550px !important; }
@media (max-width: 1600px) {
  :root { --container-7xl: 1350px !important; }
  .mx-auto.max-w-7xl, .section-shell.mx-auto.max-w-7xl, [class*="max-w-7xl"] { max-width: 1350px !important; }
}
section.meddienst-hero-section > .menuu.index-hero-shell.meddienst-home-hero, section.meddienst-hero-section > .index-hero-shell[data-hero-slider] { max-width: none !important; width: 100% !important; background: transparent !important; }

section.meddienst-hero-section > .menuu.index-hero-shell.meddienst-home-hero { margin-left: 0px !important; margin-right: 0px !important; }
section.meddienst-hero-section .meddienst-hero-inner.max-w-7xl { max-width: 1550px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 1600px) {
  section.meddienst-hero-section .meddienst-hero-inner.max-w-7xl { max-width: 1350px !important; }
}
.seo-hero-actions { justify-content: flex-start !important; }
#projekte .project-hero-header { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; display: grid !important; grid-template-columns: minmax(0px, 1fr) !important; gap: 1.5rem !important; margin-bottom: 2.5rem !important; padding: 0px !important; overflow: visible !important; border-radius: 0px !important; background: none !important; box-shadow: none !important; filter: none !important; }
#projekte .project-hero-header::before, #projekte .project-hero-header::after { content: none !important; display: none !important; }
#projekte .project-hero-inner { position: relative !important; z-index: 2 !important; display: block !important; }
#projekte .project-card-featured-media::before, body.webdesign-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media::before, body.flyer-references-page #projekte article.group:not(.project-card-featured) .project-card-featured-media::before { content: none !important; display: none !important; }
#projekte .project-card-featured-meta { position: absolute; inset: 1rem auto auto 1rem; z-index: 3; }
#projekte .project-card-featured-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.8rem; padding: 1.05rem 0.35rem 0.9rem; }
#projekte .project-card-featured-row, #projekte .project-card-featured-row > div { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; }
@media (min-width: 64rem) {
  #projekte .project-hero-header { grid-template-columns: minmax(0px, 1fr) auto !important; align-items: end !important; gap: 2rem !important; }
}
@media (max-width: 1500px) {
  section.meddienst-hero-section .meddienst-hero-copy { margin-left: 50px !important; }
}
@media (max-width: 800px) {
  section.meddienst-hero-section .meddienst-hero-copy { margin-left: 0px !important; }
}

/* niceweb nav background reset */
nav[aria-label="Hauptnavigation"] > .mx-auto,
nav[aria-label="Hauptnavigation"] > .mx-auto > div:first-child,
.big > nav[aria-label="Hauptnavigation"] > .mx-auto.max-w-7xl > div:first-child {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
body.webdesign-references-page #projekte .portfolio-card-screen,
#projekte .projects-portfolio-grid .portfolio-card-screen {
  overflow: hidden !important;
}

body.webdesign-references-page #projekte .portfolio-card-screen img,
#projekte .projects-portfolio-grid .portfolio-card-screen img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: unset !important;
  object-position: center top !important;
  transform: translate3d(0, 0, 0) !important;
  transform-origin: center top !important;
  transition: transform 7.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}

body.webdesign-references-page #projekte .portfolio-card:hover .portfolio-card-screen img,
#projekte .projects-portfolio-grid .portfolio-card:hover .portfolio-card-screen img {
  transform: translate3d(0, 0, 0) !important;
}