/*!
 * softwelop - moderne Design- & Animationsschicht
 * Wird NACH main.css geladen und verfeinert die bestehenden Komponenten
 * seitenübergreifend (Buttons, Navigation, Karten, Scroll-Animationen,
 * mobile CTA-Leiste). Alle Bewegungen respektieren prefers-reduced-motion.
 */

:root {
  --sw-navy: #21264e;
  --sw-blue: #194093;
  --sw-orange: #f18557;
  --sw-peach: #f7ae67;
  --sw-sky: #a3c7eb;
  --sw-red: #e36150;
  --sw-cream: #f6e9df;
  --sw-ink-soft: #21264e;
  --sw-surface: #fff;
  --sw-surface-2: #fbf6f2;
  --sw-radius: 16px;
  --sw-radius-s: 10px;
  --sw-ease: cubic-bezier(.22, 1, .36, 1);
  --sw-shadow-s: 0 4px 14px -6px rgba(33, 38, 78, .18);
  --sw-shadow: 0 18px 40px -18px rgba(33, 38, 78, .35);
  /* Offizielle Verläufe laut Brand Guide */
  --sw-grad-navy: linear-gradient(135deg, #21264e 0%, #194093 100%);
  --sw-grad: linear-gradient(90deg, #f18557 0%, #f7ae67 30%, #f6e9df 70%, #a3c7eb 100%);
  --sw-grad-warm: linear-gradient(135deg, #e36150 0%, #f7ae67 55%, #f6e9df 100%);
  --sw-grad-accent: linear-gradient(90deg, #f18557 0%, #f7ae67 50%, #a3c7eb 100%);
}

/* CI: Fließtext Montserrat Light, Textfarbe immer #21264E (nie Schwarz), 150-160 % Zeilenhöhe */
body { color: var(--sw-navy); line-height: 1.6; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
/* clip statt hidden: verhindert seitliches Wegscrollen durch überstehende Deko-Blobs */
/* Wichtig für die klebende Navigation: Body darf kein Scroll-Container sein
   (main.css setzt .body { overflow-x: hidden }, das bricht position: sticky) */
@supports (overflow: clip) { html, body, body[class] { overflow-x: clip !important; overflow-y: visible !important; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--sw-orange); color: #fff; }
img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--sw-orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ */
/* Typografie - fließende Größen statt harter Sprünge                  */
/* ------------------------------------------------------------------ */
.heading-jumbo-small {
  font-size: clamp(30px, 2.2vw + 18px, 48px);
  line-height: 1.18;
  letter-spacing: -.01em;
}
.section-heading { font-size: clamp(24px, 1.2vw + 16px, 32px); line-height: 1.25; }
.heading-2.section-header { position: relative; }
.section-heading-wrap .heading-2.section-header::after,
.container-6 > .heading-2.section-header::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 4px;
  background: var(--sw-grad-accent);
  transform-origin: 50% 50%;
  transition: transform 1s var(--sw-ease) .25s;
}
.sw-js .sw-reveal .heading-2.section-header::after,
.sw-js .heading-2.section-header.sw-reveal::after { transform: scaleX(0); }
.sw-js .sw-reveal.is-in .heading-2.section-header::after,
.sw-js .heading-2.section-header.sw-reveal.is-in::after { transform: scaleX(1); }

.sw-gradient-text {
  background: linear-gradient(100deg, var(--sw-blue) 0%, var(--sw-orange) 55%, var(--sw-peach) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sw-gradient-shift 8s ease-in-out infinite alternate;
}
@keyframes sw-gradient-shift { to { background-position: 100% 0; } }

/* ------------------------------------------------------------------ */
/* Scroll-Fortschritt                                                  */
/* ------------------------------------------------------------------ */
.sw-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  background: var(--sw-grad-accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--sw-p, 0));
}

/* ------------------------------------------------------------------ */
/* Navigation - Glas-Effekt beim Scrollen                              */
/* ------------------------------------------------------------------ */
.navigation {
  z-index: 999;
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s var(--sw-ease);
}
.navigation.is-scrolled {
  background-color: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 10px 30px -18px rgba(33, 38, 78, .45);
}

@media (min-width: 992px) {
  .navigation-item.w-nav-link:not(.w--current):not(.drop),
  .dropdown-toggle:not(.w--current) { position: relative; }
  .navigation-item.w-nav-link:not(.w--current):not(.drop)::after,
  .dropdown-toggle:not(.w--current)::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--sw-orange);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .35s var(--sw-ease);
  }
  .navigation-item.w-nav-link:not(.w--current):not(.drop):hover::after,
  .dropdown-toggle:not(.w--current):hover::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
  .w-dropdown-list.w--open { animation: sw-drop .28s var(--sw-ease); }
}
@keyframes sw-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.w-dropdown-list {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sw-shadow);
}


/* Nav-CTA mit pulsierendem „online“-Punkt */
.nav-cta { display: inline-flex; align-items: center; gap: 10px; }
.nav-cta::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sw-peach);
  box-shadow: 0 0 0 0 rgba(247, 174, 103, .7);
  animation: sw-ping 2s infinite;
  flex: none;
}
@keyframes sw-ping {
  0% { box-shadow: 0 0 0 0 rgba(247, 174, 103, .7); }
  70% { box-shadow: 0 0 0 9px rgba(247, 174, 103, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 174, 103, 0); }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.primary-button,
.secondary-button {
  border-radius: var(--sw-radius-s);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--sw-ease), box-shadow .35s var(--sw-ease),
              background-color .35s ease, color .35s ease;
}
.primary-button {
  box-shadow: 0 10px 22px -12px rgba(25, 64, 147, .75);
}
.primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--sw-orange), var(--sw-peach));
  opacity: 0;
  transition: opacity .35s ease;
}
.primary-button::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg) translateX(0);
  transition: transform .8s var(--sw-ease);
}
/* Der Nav-CTA nutzt ::before schon für den Online-Punkt */
.primary-button.nav-cta::before {
  position: static;
  width: 8px;
  transform: none;
  background: var(--sw-peach);
  transition: none;
}
.primary-button:hover {
  background-color: var(--sw-blue);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(241, 133, 87, .75);
}
.primary-button:hover::after { opacity: 1; }
.primary-button:not(.nav-cta):hover::before { transform: skewX(-20deg) translateX(420%); }
.primary-button:active { transform: translateY(0) scale(.98); background-color: var(--sw-blue); }

.sw-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 22px;
  border: 2px solid var(--sw-navy);
  border-radius: var(--sw-radius-s);
  color: var(--sw-navy);
  background: transparent;
  font-family: Gilmer_Own, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .35s var(--sw-ease), background-color .3s ease, color .3s ease, border-color .3s ease;
}
.sw-btn-ghost:hover { background: var(--sw-navy); color: #fff; transform: translateY(-2px); }
.sw-btn-ghost.is-light { border-color: rgba(255, 255, 255, .85); color: #fff; }
.sw-btn-ghost.is-light:hover { background: #fff; color: var(--sw-navy); }
.sw-btn-ghost svg, .primary-button svg { width: 18px; height: 18px; flex: none; }

/* Pulsierender Ring für wichtige CTAs */
.sw-pulse { animation: sw-pulse 2.6s var(--sw-ease) infinite; }
@keyframes sw-pulse {
  0%, 100% { box-shadow: 0 10px 22px -12px rgba(25, 64, 147, .75), 0 0 0 0 rgba(241, 133, 87, .55); }
  50% { box-shadow: 0 10px 22px -12px rgba(25, 64, 147, .75), 0 0 0 12px rgba(241, 133, 87, 0); }
}

/* ------------------------------------------------------------------ */
/* Karten: Hover-Lift, Spotlight & 3D-Tilt (JS setzt --mx/--my/--rx/--ry) */
/* ------------------------------------------------------------------ */
.header-card,
.div-block-2, .div-block-3, .div-block-4, .div-block-5,
.review-card,
.sw-card {
  position: relative;
  transition: transform .5s var(--sw-ease), box-shadow .5s var(--sw-ease);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  will-change: transform;
}
.header-card { box-shadow: var(--sw-shadow-s); overflow: hidden; }
.header-card::before,
.sw-card::before,
.div-block-2::before, .div-block-3::before, .div-block-4::before, .div-block-5::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(241, 133, 87, .16), transparent 45%);
  opacity: 0;
  transition: opacity .4s ease;
}
.link-block:hover .header-card,
.header-card:hover,
.sw-card:hover,
.review-card:hover,
.div-block-2:hover, .div-block-3:hover, .div-block-4:hover, .div-block-5:hover {
  --lift: -6px;
  box-shadow: var(--sw-shadow);
}
.link-block:hover .header-card::before,
.sw-card:hover::before,
.div-block-2:hover::before, .div-block-3:hover::before, .div-block-4:hover::before, .div-block-5:hover::before { opacity: 1; }
.header-card .arrow-embed { transition: transform .4s var(--sw-ease), color .3s ease; }
.link-block:hover .header-card .arrow-embed { transform: translateX(6px); color: var(--sw-orange); }
.header-card svg { transition: transform .5s var(--sw-ease); }
.link-block:hover .header-card .code-embed svg,
.link-block:hover .header-card .code-embed-2 svg,
.link-block:hover .header-card .code-embed-3 svg { transform: scale(1.08) rotate(-4deg); }

/* „Darum softwelop“-Kacheln als echte Karten */
.div-block-2, .div-block-3, .div-block-4, .div-block-5 {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(33, 38, 78, .07);
  border-radius: var(--sw-radius);
  padding: 28px 24px;
  box-shadow: var(--sw-shadow-s);
}
.service-icon { transition: transform .6s var(--sw-ease); }
.div-block-2:hover .service-icon, .div-block-3:hover .service-icon,
.div-block-4:hover .service-icon, .div-block-5:hover .service-icon {
  transform: translateY(-4px) rotate(-8deg) scale(1.1);
}

/* Bewertungen */
.review-card { border: 1px solid rgba(33, 38, 78, .06); border-radius: var(--sw-radius) !important; }

/* Inhaltsbilder */
.image-3, .image-4, .image-5 {
  border-radius: 20px;
  box-shadow: var(--sw-shadow);
  transition: transform .8s var(--sw-ease), box-shadow .8s var(--sw-ease);
}
.image-3:hover, .image-4:hover, .image-5:hover { transform: scale(1.02) rotate(-.4deg); }

.links-right { position: relative; text-decoration: none; }
.links-right::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--sw-orange);
  transform: scaleX(.25);
  transform-origin: 0 50%;
  transition: transform .4s var(--sw-ease);
}
.flex-block-2:hover .links-right::after { transform: scaleX(1); }
.flex-block-2 .arrow-embed { transition: transform .4s var(--sw-ease); }
.flex-block-2:hover .arrow-embed { transform: translateX(5px); }

/* ------------------------------------------------------------------ */
/* Deko-Blobs: langsames „Atmen“                                        */
/* ------------------------------------------------------------------ */
.header-budsen { animation: sw-float 18s ease-in-out infinite alternate; }
.header-budsen.two { animation-duration: 22s; animation-delay: -6s; }
.header-budsen.three { animation-duration: 26s; animation-delay: -12s; }
@keyframes sw-float {
  0% { translate: 0 0; scale: 1; }
  50% { translate: 30px -24px; scale: 1.04; }
  100% { translate: -20px 18px; scale: .98; }
}

/* ------------------------------------------------------------------ */
/* CTA-Bänder                                                          */
/* ------------------------------------------------------------------ */
.section-3 { position: relative; overflow: hidden; }
.section-3::after,
.section.cc-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: sw-sheen 7s ease-in-out infinite;
}
.section-3 > *, .section.cc-cta > * { position: relative; z-index: 1; }
.section.cc-cta { position: relative; overflow: hidden; }
@keyframes sw-sheen { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }

/* ------------------------------------------------------------------ */
/* Scroll-Reveal                                                       */
/* ------------------------------------------------------------------ */
.sw-js .sw-reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity .9s var(--sw-ease) var(--d, 0s), transform 1s var(--sw-ease) var(--d, 0s);
}
.sw-js .sw-reveal[data-reveal="left"]  { transform: translate3d(-48px, 0, 0); }
.sw-js .sw-reveal[data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.sw-js .sw-reveal[data-reveal="zoom"]  { transform: scale(.92); }
.sw-js .sw-reveal.is-in { opacity: 1 !important; transform: none; }

/* Hero-Überschrift Wort für Wort */
.sw-word { display: inline-block; white-space: pre; }
.sw-js .sw-split .sw-word {
  opacity: 0;
  transform: translateY(.6em) rotate(2deg);
  filter: blur(6px);
  transition: opacity .8s var(--sw-ease), transform .9s var(--sw-ease), filter .8s ease;
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.sw-js .sw-split.is-in .sw-word { opacity: 1; transform: none; filter: none; }
/* Verlauf über mehrere Wörter: Clip pro Wort */
.sw-gradient-text .sw-word {
  background: inherit;
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ------------------------------------------------------------------ */
/* Startseite: Hero-Erweiterungen                                       */
/* ------------------------------------------------------------------ */
.sw-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.sw-hero-ctas .primary-button { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.sw-trust {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.sw-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sw-navy);
}
.sw-trust li::before {
  content: "";
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--sw-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ------------------------------------------------------------------ */
/* Startseite: Ablauf („So einfach geht's“)                             */
/* ------------------------------------------------------------------ */
.sw-section { padding: 90px 20px; position: relative; }
.sw-section.is-tinted { background: linear-gradient(180deg, rgba(246, 233, 223, .6) 0%, rgba(163, 199, 235, .16) 100%); }
.sw-container { max-width: 1140px; margin: 0 auto; }
.sw-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sw-section-head .label { text-align: center; }
.sw-section-head p { color: var(--sw-ink-soft); margin: 14px 0 0; }

.sw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  position: relative;
  counter-reset: sw-step;
}
.sw-steps::before {
  content: "";
  position: absolute;
  top: 34px; left: 16%; right: 16%;
  height: 3px;
  border-radius: 3px;
  background: var(--sw-grad-accent);
  transform: scaleX(var(--sw-line, 0));
  transform-origin: 0 50%;
  transition: transform 1.6s var(--sw-ease) .2s;
  z-index: 0;
}
.sw-steps.is-in { --sw-line: 1; }
.sw-step {
  position: relative;
  z-index: 1;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(33, 38, 78, .07);
  border-radius: var(--sw-radius);
  padding: 76px 24px 28px;
  margin-top: 34px;
  box-shadow: var(--sw-shadow-s);
}
.sw-step-num {
  position: absolute;
  top: -34px; left: 50%;
  translate: -50% 0;
  width: 68px; height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sw-navy);
  color: #fff;
  font-family: Gilmer_Own, Arial, sans-serif;
  font-size: 26px;
  box-shadow: 0 0 0 8px var(--sw-surface-2), 0 14px 30px -12px rgba(33, 38, 78, .6);
  transition: background-color .4s ease, transform .5s var(--sw-ease);
}
.sw-step:hover .sw-step-num { background: var(--sw-orange); transform: scale(1.08) rotate(-6deg); }
.sw-step h3 {
  margin: 0 0 10px;
  font-family: Gilmer_Own, Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  color: var(--sw-navy);
  text-transform: uppercase;
}
.sw-step p { margin: 0; color: var(--sw-ink-soft); font-size: 15px; line-height: 25px; }
.sw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.sw-chip {
  font-size: 12px;
  line-height: 16px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--sw-cream);
  color: var(--sw-navy);
}

/* ------------------------------------------------------------------ */
/* FAQ                                                                 */
/* ------------------------------------------------------------------ */
.sw-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.sw-faq details {
  background: #fff;
  border: 1px solid rgba(33, 38, 78, .08);
  border-radius: 14px;
  box-shadow: var(--sw-shadow-s);
  transition: box-shadow .4s var(--sw-ease), border-color .3s ease;
  overflow: hidden;
}
.sw-faq details[open] { border-color: rgba(241, 133, 87, .45); box-shadow: var(--sw-shadow); }
.sw-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-family: Gilmer_Own, Arial, sans-serif;
  font-size: 17px;
  line-height: 24px;
  color: var(--sw-navy);
}
.sw-faq summary::-webkit-details-marker { display: none; }
.sw-faq summary::after {
  content: "";
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sw-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321264e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .45s var(--sw-ease), background-color .3s ease;
}
.sw-faq details[open] summary::after { transform: rotate(135deg); background-color: rgba(241, 133, 87, .18); }
.sw-faq .sw-faq-body { padding: 0 24px 22px; color: var(--sw-ink-soft); }
.sw-faq .sw-faq-body p { margin: 0; }
.sw-faq .sw-faq-body a { color: var(--sw-blue); }
.sw-faq details[open] .sw-faq-body { animation: sw-faq-in .45s var(--sw-ease); }
@keyframes sw-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ */
/* Abschluss-CTA mit mehreren Kontaktwegen                              */
/* ------------------------------------------------------------------ */
.sw-cta-sub {
  max-width: 640px;
  margin: -14px auto 28px;
  color: var(--sw-navy);
  font-size: 17px;
  line-height: 28px;
}
.sw-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sw-cta-actions .primary-button,
.sw-cta-actions .sw-btn-ghost { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.sw-cta-actions .sw-btn-ghost { background: rgba(255, 255, 255, .7); }
.sw-cta-actions .sw-btn-ghost:hover { background: var(--sw-navy); }

/* ------------------------------------------------------------------ */
/* Mobile CTA-Leiste                                                   */
/* ------------------------------------------------------------------ */
.sw-mobile-cta { display: none; }
@media (max-width: 767px) {
  .sw-mobile-cta {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 998;
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(33, 38, 78, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -12px rgba(33, 38, 78, .6);
    transform: translateY(140%);
    transition: transform .5s var(--sw-ease);
  }
  .sw-mobile-cta.is-visible { transform: none; }
  .sw-mobile-cta a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: 11px;
    color: #fff;
    text-decoration: none;
    font-family: Gilmer_Own, Arial, sans-serif;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: background-color .25s ease, transform .2s ease;
  }
  .sw-mobile-cta a:active { transform: scale(.96); }
  .sw-mobile-cta a svg { width: 20px; height: 20px; }
  .sw-mobile-cta .is-main { background: linear-gradient(120deg, var(--sw-orange), var(--sw-peach)); }
  .sw-nav-locked .sw-mobile-cta { transform: translateY(140%); }
}

/* ------------------------------------------------------------------ */
/* Responsiv                                                           */
/* ------------------------------------------------------------------ */
#reviews-container .review-card { width: auto !important; }
#reviews-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

@media (max-width: 991px) {
  .sw-steps { grid-template-columns: 1fr; gap: 18px; max-width: 520px; margin: 0 auto; }
  .sw-steps::before {
    top: 34px; bottom: 34px; left: 50%; right: auto;
    width: 3px; height: auto;
    transform: scaleY(var(--sw-line, 0));
    transform-origin: 50% 0;
  }
  .sw-section { padding: 70px 20px; }
}
@media (max-width: 767px) {
  .sw-hero-ctas { flex-direction: column; align-items: stretch; }
  .sw-hero-ctas .primary-button, .sw-hero-ctas .sw-btn-ghost { justify-content: center; }
  .sw-cta-actions { flex-direction: column; align-items: stretch; padding: 0 10px; }
  .sw-cta-actions .primary-button, .sw-cta-actions .sw-btn-ghost { justify-content: center; }
  .sw-section { padding: 56px 16px; }
  .sw-faq summary { padding: 16px 18px; font-size: 16px; }
  .sw-faq .sw-faq-body { padding: 0 18px 18px; }
  .div-block-2, .div-block-3, .div-block-4, .div-block-5 { padding: 22px 18px; }
}

/* Touch-Geräte: kein Tilt/Spotlight-Effekt */
@media (hover: none) {
  .header-card, .sw-card, .review-card,
  .div-block-2, .div-block-3, .div-block-4, .div-block-5 { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Weniger Bewegung gewünscht                                          */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .sw-js .sw-reveal, .sw-js .sw-split .sw-word { opacity: 1; transform: none; filter: none; }
}

/* ------------------------------------------------------------------ */
/* Barrierefreiheit: aktiver Menüpunkt (Orange) mit Deep-Trust-Schrift */
/* (Weiß auf #F18557 erreicht nur 2,6:1 Kontrast)                       */
/* ------------------------------------------------------------------ */
.navigation-item.w--current,
.navigation-item.w--current:hover,
.dropdown:has(a.w--current) .w-dropdown-toggle,
.dropdown:has(a.w--current) .w-dropdown-toggle .text-block-11,
html[data-theme="dark"] .navigation-item.w--current,
html[data-theme="dark"] .dropdown:has(a.w--current) .w-dropdown-toggle .text-block-11 {
  color: #21264e !important;
}
.dropdown-list .navigation-item.drop.w--current { color: #21264e !important; }

/* ================================================================== */
/* Footer                                                              */
/* ================================================================== */
.sw-footer {
  position: relative;
  padding: 64px 20px 28px;
  color: var(--sw-navy);
  background: linear-gradient(180deg, #fff 0%, rgba(246, 233, 223, .55) 100%);
  border-top: 1px solid rgba(33, 38, 78, .08);
}
.sw-footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 3px;
  background: var(--sw-grad-accent);
}
.sw-footer-inner { max-width: 1180px; margin: 0 auto; }
.sw-footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) 3fr;
  gap: 56px;
}
.sw-footer-logo img { width: 150px; height: auto; display: block; }
.sw-footer-brand p { margin: 16px 0 18px; max-width: 320px; font-size: 15px; line-height: 1.6; }
.sw-footer ul { list-style: none; margin: 0; padding: 0; }
.sw-footer-contact { display: grid; gap: 8px; }
.sw-footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sw-navy);
  text-decoration: none;
  font-size: 15px;
  transition: color .25s ease;
}
.sw-footer-contact a:hover { color: var(--sw-blue); }
.sw-footer-contact svg { width: 18px; height: 18px; flex: none; color: var(--sw-orange); }
.sw-footer-social { display: flex; gap: 10px; margin-top: 22px !important; }
.sw-footer-social a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--sw-navy);
  border: 1px solid rgba(33, 38, 78, .15);
  transition: transform .4s var(--sw-ease), background-color .3s ease, color .3s ease, border-color .3s ease;
}
.sw-footer-social a:hover { transform: translateY(-3px); background: #21264e; border-color: #21264e; color: #fff; }
.sw-footer-social svg { width: 20px; height: 20px; }

.sw-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sw-footer-heading {
  margin: 0 0 14px;
  font-family: Gilmer_Own, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sw-footer-col ul { display: grid; gap: 9px; }
.sw-footer-col a {
  position: relative;
  color: var(--sw-navy);
  text-decoration: none;
  font-size: 15px;
  line-height: 22px;
  transition: color .25s ease, padding-left .35s var(--sw-ease);
}
.sw-footer-col a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 2px;
  background: var(--sw-orange);
  transition: width .35s var(--sw-ease);
}
.sw-footer-col a:hover { padding-left: 14px; color: var(--sw-blue); }
.sw-footer-col a:hover::before { width: 8px; }
.sw-footer-col a.w--current { text-decoration: underline; text-decoration-color: var(--sw-orange); text-underline-offset: 4px; }

.sw-footer-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 44px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(33, 38, 78, .1);
}
.sw-footer-ways li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(33, 38, 78, .08);
  font-size: 13px;
  line-height: 18px;
}
.sw-footer-ways li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sw-orange);
  flex: none;
}
.sw-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  font-size: 13px;
  line-height: 20px;
}
.sw-footer-bottom p { margin: 0; }
.sw-footer .cookie-settings-link { font-size: 13px; color: var(--sw-navy); }

@media (max-width: 991px) {
  .sw-footer-top { grid-template-columns: 1fr; gap: 40px; }
  .sw-footer-brand p { max-width: 460px; }
}
@media (max-width: 767px) {
  .sw-footer { padding: 48px 20px 24px; }
  .sw-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .sw-footer-ways { justify-content: flex-start; margin-top: 36px !important; }
  .sw-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ================================================================== */
/* Kontaktseite: Service-Wege                                          */
/* ================================================================== */
.sw-ways {
  list-style: none;
  margin: 26px 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sw-way {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 16px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(33, 38, 78, .08);
  box-shadow: var(--sw-shadow-s);
  overflow: hidden;
  transition: transform .45s var(--sw-ease), box-shadow .45s var(--sw-ease), border-color .3s ease;
}
.sw-way::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--sw-grad-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--sw-ease);
}
.sw-way:hover { transform: translateY(-4px); box-shadow: var(--sw-shadow); border-color: rgba(241, 133, 87, .35); }
.sw-way:hover::after { transform: scaleX(1); }
.sw-way strong {
  margin-top: 12px;
  font-family: Gilmer_Own, Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
}
.sw-way > span:last-child { font-size: 13px; line-height: 18px; margin-top: 2px; }
.sw-way-icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--sw-cream);
  color: var(--sw-navy);
  transition: background-color .3s ease, transform .5s var(--sw-ease);
}
.sw-way-icon svg { width: 32px; height: 32px; overflow: visible; }
.sw-way:hover .sw-way-icon { background: rgba(241, 133, 87, .18); transform: rotate(-6deg) scale(1.06); }
/* Haus: Tür geht auf */
.sw-way-door { transform-origin: 20px 39px; transition: transform .5s var(--sw-ease); }
.sw-way:hover .sw-way-door { transform: scaleX(.35); }
/* Remote: Signal-Wellen */
.sw-way-wave { animation: sw-wave 2.4s ease-in-out infinite; }
.sw-way-wave--2 { animation-delay: .35s; }
@keyframes sw-wave { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* Paket: schwebt sanft */
.sw-way-icon--parcel svg { animation: sw-parcel 3.2s ease-in-out infinite; }
@keyframes sw-parcel { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }

.sw-ways-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 26px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(163, 199, 235, .2);
  font-size: 14px;
  line-height: 1.5;
}
.sw-ways-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--sw-blue); }

@media (max-width: 600px) {
  .sw-ways { grid-template-columns: 1fr; gap: 10px; }
  .sw-way { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 14px; }
  .sw-way-icon { grid-row: span 2; width: 48px; height: 48px; }
  .sw-way strong { margin-top: 0; align-self: end; }
  .sw-way > span:last-child { align-self: start; }
}

/* ================================================================== */
/* Mobile Navigation: animiertes Burger-Icon + Vollbild-Panel           */
/* ================================================================== */
.sw-nav-extra { display: none; }
.sw-burger { position: relative; display: block; width: 22px; height: 16px; }
.sw-burger span {
  position: absolute;
  left: 0;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .45s var(--sw-ease), top .35s var(--sw-ease) .1s, opacity .25s ease, width .35s var(--sw-ease);
}
.sw-burger span:nth-child(1) { top: 0; width: 100%; }
.sw-burger span:nth-child(2) { top: 6.75px; width: 65%; }
.sw-burger span:nth-child(3) { top: 13.5px; width: 100%; }
.w--open .sw-burger span { transition: top .3s var(--sw-ease), transform .45s var(--sw-ease) .15s, opacity .2s ease, width .3s ease; }
.w--open .sw-burger span:nth-child(1) { top: 6.75px; transform: rotate(45deg); }
.w--open .sw-burger span:nth-child(2) { opacity: 0; width: 0; }
.w--open .sw-burger span:nth-child(3) { top: 6.75px; transform: rotate(-45deg); }

html.sw-nav-locked { overflow: hidden !important; }

@media (max-width: 991px) {
  .navigation { padding: 12px 20px; }
  .logo-image { min-width: 0; width: 150px; }
  .menu { margin-right: 0; }

  .menu-button.w-nav-button {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-left: 0;
    padding: 0;
    border-radius: 12px;
    color: var(--sw-navy);
    background: rgba(33, 38, 78, .06);
    transition: background-color .35s ease, color .35s ease;
    cursor: pointer;
  }
  .menu-button.w-nav-button.w--open { background: var(--sw-orange); color: #fff; }

  /* Panel */
  .navigation.w-nav .w-nav-menu.navigation-items {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: var(--sw-nav-h, 68px);
    left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 12px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: none;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .55s var(--sw-ease), visibility 0s linear .55s;
    z-index: 998;
  }
  .navigation.w-nav.nav-open .w-nav-menu.navigation-items {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path .6s var(--sw-ease), visibility 0s;
  }

  /* Einträge gestaffelt einblenden */
  .navigation .w-nav-menu > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .4s var(--sw-ease);
  }
  .navigation.nav-open .w-nav-menu > * {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .6s var(--sw-ease);
    transition-delay: calc(var(--i, 0) * 45ms + 120ms);
  }

  /* Links */
  .navigation .w-nav-menu > .navigation-item,
  .navigation .w-nav-menu .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 8px;
    border-radius: 0;
    border-bottom: 1px solid rgba(33, 38, 78, .08);
    background: none;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: .5px;
    text-align: left;
  }
  .navigation .w-nav-menu > .navigation-item::after,
  .navigation .w-nav-menu .dropdown-toggle::after {
    content: "";
    position: static;
    width: 18px; height: 18px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .45;
    transition: transform .4s var(--sw-ease), opacity .3s ease;
  }
  .navigation .w-nav-menu .dropdown-toggle::after { transform: rotate(90deg); }
  .navigation .w-nav-menu .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-90deg); opacity: 1; }
  .navigation .w-nav-menu > .navigation-item:active::after { transform: translateX(4px); }

  /* Aktiver Eintrag: Akzentbalken statt Orange-Fläche */
  .navigation .w-nav-menu > .navigation-item.w--current,
  .navigation .w-nav-menu .dropdown:has(a.w--current) .dropdown-toggle {
    background: linear-gradient(90deg, rgba(241, 133, 87, .16), transparent 80%) !important;
    box-shadow: inset 4px 0 0 var(--sw-orange);
    padding-left: 16px;
  }

  /* Dropdown als Akkordeon */
  .navigation .w-nav-menu .w-dropdown { width: 100%; }
  .navigation .w-nav-menu .w-dropdown-list {
    display: block !important;
    position: static;
    max-height: 0;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    animation: none;
    transition: max-height .45s var(--sw-ease);
  }
  .navigation .w-nav-menu .w-dropdown-list.w--open { max-height: 420px; }
  .navigation .w-nav-menu .w-dropdown-list .navigation-item {
    display: block;
    padding: 11px 8px 11px 22px;
    font-size: 15px;
    line-height: 22px;
    text-align: left;
    background: none;
    border-bottom: 0;
  }
  .navigation .w-nav-menu .w-dropdown-list .navigation-item.drop-parent { border-bottom: 0; margin: 4px 0 0; }
  .navigation .w-nav-menu .w-dropdown-list .navigation-item.w--current { box-shadow: inset 3px 0 0 var(--sw-orange); background: none; }

  /* CTA + Kontakt im Menü */
  .navigation .w-nav-menu > .w-embed { margin-top: 24px; }
  .navigation .w-nav-menu .nav-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    margin: 0;
    font-size: 15px;
  }
  .navigation .w-nav-menu .sw-nav-extra {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(33, 38, 78, .08);
  }
  .sw-nav-extra-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sw-navy);
    text-decoration: none;
    font-size: 15px;
  }
  .sw-nav-extra-link svg { width: 20px; height: 20px; flex: none; color: var(--sw-orange); }
}

/* Mobile-Korrekturen: Burger mittig, Menü-Schriftgrößen, Kontaktformular zuerst */
@media (max-width: 991px) {
  .navigation .menu-button.w-nav-button { display: grid; }
  .navigation .w-nav-menu .dropdown-toggle .text-block-11 { font-size: inherit; line-height: inherit; }
  .navigation .w-nav-menu > .w-embed { width: 100%; }
  .navigation.w-nav .w-nav-menu.navigation-items { justify-content: flex-start; align-items: stretch; }
  .contact-form-grid .sw-ways, .contact-form-grid .sw-ways-note { text-align: left; }
  #w-node-_3f61509a-fac7-b0d5-3763-509be705858e-4f963d26 { grid-row: 1 / 2 !important; grid-column: 1 / 2 !important; }
  #w-node-_3f61509a-fac7-b0d5-3763-509be70585a6-4f963d26 { grid-row: 2 / 3 !important; grid-column: 1 / 2 !important; }
}
.sw-footer, .sw-footer a, .sw-footer p, .sw-footer li, .sw-footer button { font-family: Montserrat_Own, Arial, sans-serif; font-weight: 300; }
.sw-footer .sw-footer-heading { font-family: Gilmer_Own, Arial, sans-serif; font-weight: 700; }

/* Mobil kein backdrop-filter an der Navigation: er würde das fixierte
   Menü-Panel in die Navigationsleiste einsperren (Containing Block). */
@media (max-width: 991px) {
  .navigation.is-scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #fff;
  }
}