/* =========================================================
   KUKA REINIGUNGSDIENST
   style.css
   Desktop / Basis Design
   ========================================================= */

:root {
  --navy: #05204c;
  --navy-2: #092b63;
  --blue: #0c5da5;
  --sky: #eaf6ff;
  --mint: #eaf8f1;
  --green: #15803d;
  --green-2: #1fa463;
  --yellow: #f7c948;
  --yellow-soft: #fff4cb;
  --cream: #fffaf0;
  --page: #f5f8fb;
  --white: #ffffff;
  --text: #13213a;
  --muted: #63708a;
  --line: rgba(5, 32, 76, 0.12);
  --line-strong: rgba(5, 32, 76, 0.18);
  --shadow: 0 24px 70px rgba(5, 32, 76, 0.13);
  --shadow-soft: 0 14px 40px rgba(5, 32, 76, 0.09);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --container: min(1120px, calc(100% - 48px));
  --wide: min(1360px, calc(100% - 64px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 118px;
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--text);
  background: var(--page);
  line-height: 1.55;
  overflow-x: hidden;
}

body::selection {
  color: var(--navy);
  background: var(--yellow-soft);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.container-wide {
  width: var(--wide);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   Topbar
   --------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 40;
  min-height: 42px;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(90deg, var(--navy), var(--navy-2));
}

.topbar-inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 0.9rem;
  font-weight: 650;
}

.topbar a {
  color: #ffffff;
  font-weight: 800;
}

.topbar-desktop-text {
  color: rgba(255, 255, 255, 0.74);
  text-align: right;
}

.topbar-mobile-actions {
  display: none;
}

.topbar-icon-link svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}

/* ---------------------------------------------------------
   Header / Navigation
   --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 35;
  background: rgba(255, 255, 255, 0.93);
  border-bottom: 1px solid rgba(5, 32, 76, 0.08);
  box-shadow: 0 12px 34px rgba(5, 32, 76, 0.06);
  backdrop-filter: blur(18px);
}

.nav {
  min-height: 96px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  min-width: 220px;
}

.logo-img {
  width: 218px;
  height: 82px;
  object-fit: contain;
  object-position: left center;
}

.logo-fallback {
  display: none;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font-weight: 950;
  letter-spacing: -0.04em;
  font-size: 1.55rem;
}

.logo-fallback small {
  display: block;
  color: var(--green);
  font-size: 0.64rem;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.nav-menu {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(5, 32, 76, 0.08);
  border-radius: 999px;
  background: rgba(245, 248, 251, 0.86);
}

.nav-menu a {
  padding: 10px 13px;
  border-radius: 999px;
  color: #223250;
  font-size: 0.9rem;
  font-weight: 750;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-menu a:hover {
  color: var(--navy);
  background: #ffffff;
  transform: translateY(-1px);
}

.nav-action {
  justify-self: end;
}

.nav-toggle {
  display: none;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 1px solid rgba(5, 32, 76, 0.12);
  border-radius: 16px;
  color: var(--navy);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(5, 32, 76, 0.08);
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu {
  display: none;
}

/* ---------------------------------------------------------
   Buttons / Basics
   --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  color: var(--navy);
  background: #ffffff;
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 16px 36px rgba(5, 32, 76, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(5, 32, 76, 0.17);
}

.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--green), var(--green-2));
}

.btn-light {
  color: var(--navy);
  background: #ffffff;
}

.btn-green {
  width: 100%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--green), var(--green-2));
}

.eyebrow,
.badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--green);
  background: rgba(21, 128, 61, 0.1);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--navy);
  letter-spacing: -0.055em;
}

h1 {
  margin-bottom: 22px;
  font-size: clamp(4.2rem, 7.2vw, 7.9rem);
  line-height: 0.88;
  font-weight: 950;
}

h1 span,
h2 span {
  color: var(--green);
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2.65rem, 4.8vw, 5.2rem);
  line-height: 0.94;
  font-weight: 950;
}

h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
  line-height: 1.08;
  font-weight: 900;
}

p {
  color: var(--muted);
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero-fullbleed {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 58vw, 760px);
  overflow: hidden;
  background: #ffffff;
}

.hero-fullbleed picture,
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg {
  object-fit: cover;
  object-position: center center;
}

.hero-fullbleed::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(245, 248, 251, 0), var(--page));
  pointer-events: none;
}

.hero-message {
  position: relative;
  z-index: 2;
  margin-top: -92px;
  padding: 0 0 76px;
  background: linear-gradient(180deg, rgba(245, 248, 251, 0), var(--page) 34%);
}

.hero-message-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  gap: 42px;
  align-items: center;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(247, 201, 72, 0.48);
  border-radius: 38px;
  background:
    radial-gradient(circle at 15% 0%, rgba(247, 201, 72, 0.32), transparent 36%),
    linear-gradient(135deg, rgba(255, 250, 240, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: var(--shadow);
}

.hero-kicker {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.hero-kicker span {
  display: none;
}

.hero-kicker::before {
  content: "";
  display: block;
  width: 190px;
  height: 76px;
  background: url("../img/kuka-logo.png") left center / contain no-repeat;
}

.hero-text {
  max-width: 790px;
  margin-bottom: 0;
  color: #41506d;
  font-size: 1.14rem;
  line-height: 1.75;
}

.hero-list,
.check-list {
  display: grid;
  gap: 13px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.hero-list li,
.check-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #243451;
  font-weight: 720;
}

.check {
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--green);
  font-size: 0.88rem;
  font-weight: 900;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------
   Proof Bar
   --------------------------------------------------------- */

.proof-bar {
  color: #ffffff;
  background: linear-gradient(90deg, var(--navy), var(--blue));
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proof-item {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.proof-item:first-child {
  border-left: 0;
}

.proof-item strong {
  color: #ffffff;
  font-size: 1.08rem;
}

.proof-item small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 650;
}

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */

.section,
.health-section,
.dentist-section,
.detail-section {
  padding: 96px 0;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.62fr);
  gap: 46px;
  align-items: end;
  margin-bottom: 42px;
}

.section-copy {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   Über uns
   --------------------------------------------------------- */

.about-section {
  background: var(--page);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 0.84fr);
  gap: 34px;
  align-items: start;
}

.about-copy {
  padding: 44px;
  border: 1px solid rgba(5, 32, 76, 0.08);
  border-radius: var(--radius-xl);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.about-copy p {
  font-size: 1.02rem;
  line-height: 1.8;
}

.about-slogan {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--yellow-soft);
  font-weight: 900;
}

.about-side {
  display: grid;
  gap: 22px;
}

.about-image {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #dcecf6;
  box-shadow: var(--shadow-soft);
}

.about-image img {
  width: 100%;
  height: 100%;
  min-height: 590px;
  object-fit: cover;
  object-position: center center;
}

.about-floating {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 40px rgba(5, 32, 76, 0.13);
  backdrop-filter: blur(16px);
}

.about-floating strong {
  display: block;
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1.2;
}

.about-floating small {
  color: #536079;
  font-weight: 650;
}

.about-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.mini-list {
  padding: 26px;
  border: 1px solid rgba(5, 32, 76, 0.08);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.mini-list ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 650;
}

/* ---------------------------------------------------------
   Leistungen
   --------------------------------------------------------- */

.services-section {
  background:
    radial-gradient(circle at top left, rgba(234, 246, 255, 0.9), transparent 38%),
    #ffffff;
}

.services-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.service-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid rgba(5, 32, 76, 0.1);
  border-radius: 999px;
  color: var(--navy);
  background: #ffffff;
  font-size: 0.9rem;
  font-weight: 850;
  box-shadow: 0 10px 25px rgba(5, 32, 76, 0.06);
}

.service-pill:first-child {
  color: #ffffff;
  background: var(--green);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.service-card {
  overflow: hidden;
  border: 1px solid rgba(5, 32, 76, 0.08);
  border-radius: var(--radius-xl);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.service-card-image {
  height: 285px;
  overflow: hidden;
  background: #dcecf6;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.service-card:hover .service-card-image img {
  transform: scale(1.04);
}

.service-card-body {
  padding: 27px;
}

.service-card-body span {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.service-card-body p {
  margin-bottom: 0;
  line-height: 1.68;
}

/* ---------------------------------------------------------
   Nachhaltigkeit / Gesundheit
   --------------------------------------------------------- */

.health-section {
  background: var(--page);
}

.health-layout-fixed {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.72fr);
  grid-template-areas:
    "text poster"
    "family family";
  gap: 24px;
}

.health-text-card {
  grid-area: text;
  padding: 44px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(21, 128, 61, 0.12), transparent 38%),
    #ffffff;
  box-shadow: var(--shadow-soft);
}

.health-text-card h3 {
  margin-top: 18px;
  font-size: clamp(2.15rem, 3.4vw, 3.6rem);
  line-height: 0.98;
}

.health-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.health-values div {
  padding: 18px;
  border: 1px solid rgba(21, 128, 61, 0.12);
  border-radius: 20px;
  background: rgba(234, 248, 241, 0.72);
}

.health-values strong {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
}

.health-values small {
  color: var(--muted);
  line-height: 1.45;
}

.health-slogan {
  display: inline-flex;
  margin-top: 24px;
  padding: 13px 17px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--yellow-soft);
  font-weight: 900;
}

.health-poster-card {
  grid-area: poster;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #dcecf6;
  box-shadow: var(--shadow-soft);
}

.health-poster-card img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  object-position: center center;
}

.family-wide-card {
  grid-area: family;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.7fr);
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--navy);
  box-shadow: var(--shadow);
}

.family-wide-image {
  min-height: 380px;
  overflow: hidden;
}

.family-wide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-wide-content {
  display: grid;
  align-content: center;
  padding: 44px;
}

.family-wide-content h3 {
  color: #ffffff;
  font-size: clamp(2.1rem, 3.8vw, 4.1rem);
}

.family-wide-content p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.04rem;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   Divider
   --------------------------------------------------------- */

.section-divider {
  display: flex;
  justify-content: center;
  padding: 0;
  background: var(--page);
}

.section-divider span {
  width: min(820px, calc(100% - 48px));
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
}

/* ---------------------------------------------------------
   Praxisreinigung
   --------------------------------------------------------- */

.dentist-section {
  background: #ffffff;
}

.dentist-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 0.74fr);
  gap: 30px;
  align-items: stretch;
}

.dentist-copy,
.dentist-card {
  padding: 44px;
  border-radius: var(--radius-xl);
  background: var(--page);
}

.dentist-copy p {
  font-size: 1.02rem;
  line-height: 1.78;
}

.dentist-highlight {
  margin: 24px 0;
  padding: 22px;
  border-left: 5px solid var(--green);
  border-radius: 0 22px 22px 0;
  background: #ffffff;
}

.dentist-highlight strong,
.dentist-highlight small {
  display: block;
}

.dentist-highlight strong {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 1.08rem;
}

.dentist-highlight small {
  color: var(--muted);
  line-height: 1.65;
}

.dentist-gallery {
  display: grid;
  gap: 20px;
}

.dentist-image {
  min-height: 385px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #dcecf6;
  box-shadow: var(--shadow-soft);
}

.dentist-image img {
  width: 100%;
  height: 100%;
  min-height: 385px;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Detail Section
   --------------------------------------------------------- */

.detail-section {
  background: var(--page);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.55fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.detail-copy {
  padding: 38px;
  border-radius: var(--radius-xl);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.detail-card {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.detail-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(5, 32, 76, 0.62));
}

.detail-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-card span {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  padding: 13px 16px;
  border-radius: 999px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.92);
  font-weight: 900;
  text-align: center;
}

/* ---------------------------------------------------------
   Offer / Ablauf
   --------------------------------------------------------- */

.offer-band {
  padding: 38px 0 96px;
  background: var(--page);
}

.offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 44px;
  border-radius: var(--radius-xl);
  color: #ffffff;
  background:
    radial-gradient(circle at 0% 0%, rgba(247, 201, 72, 0.34), transparent 32%),
    linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: var(--shadow);
}

.offer-card h2 {
  color: #ffffff;
  margin-bottom: 10px;
}

.offer-card p {
  max-width: 760px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.75);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.process-card {
  position: relative;
  padding: 32px;
  border: 1px solid rgba(5, 32, 76, 0.08);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.process-card::before {
  content: "";
  display: block;
  width: 48px;
  height: 6px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--yellow);
}

.process-card p {
  margin-bottom: 0;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   Kontakt
   --------------------------------------------------------- */

.contact-section {
  padding: 96px 0;
  color: #ffffff;
  background:
    radial-gradient(circle at 14% 10%, rgba(247, 201, 72, 0.24), transparent 26%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 0.72fr);
  gap: 34px;
  align-items: start;
}

.contact-copy {
  padding: 44px;
}

.contact-copy .eyebrow {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.contact-copy h2 {
  color: #ffffff;
}

.contact-copy p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.05rem;
}

.contact-options {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.contact-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 850;
  backdrop-filter: blur(10px);
}

.contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--navy);
  background: #ffffff;
}

.contact-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.25;
}

.quote-card {
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.field label {
  color: var(--navy);
  font-weight: 850;
  font-size: 0.9rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid rgba(5, 32, 76, 0.13);
  border-radius: 18px;
  outline: none;
  color: var(--text);
  background: #ffffff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field textarea {
  min-height: 138px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(21, 128, 61, 0.55);
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.1);
}

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------------------------------------------------------
   Cookie Banner
   --------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  max-width: 1040px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(5, 32, 76, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 70px rgba(5, 32, 76, 0.24);
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 24px;
}

.cookie-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cookie-text h3 {
  margin-bottom: 6px;
  font-size: 1.28rem;
}

.cookie-text p {
  margin-bottom: 0;
  font-size: 0.94rem;
}

.cookie-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cookie-btn {
  position: relative;
  z-index: 4;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid rgba(5, 32, 76, 0.12);
  border-radius: 999px;
  color: var(--navy);
  background: #ffffff;
  font-size: 0.88rem;
  font-weight: 850;
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.cookie-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(5, 32, 76, 0.12);
}

.cookie-btn.accept {
  color: #ffffff;
  border-color: transparent;
  background: var(--green);
}

.cookie-btn.necessary {
  background: var(--yellow-soft);
}

.cookie-settings-panel {
  position: relative;
  z-index: 2;
  display: none;
  padding: 0 24px 24px;
}

.cookie-settings-panel.is-open {
  display: block;
}

.cookie-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cookie-option {
  padding: 16px;
  border: 1px solid rgba(5, 32, 76, 0.1);
  border-radius: 18px;
  background: var(--page);
}

.cookie-option strong,
.cookie-option small,
.cookie-toggle {
  display: block;
}

.cookie-option small {
  margin: 5px 0 10px;
  color: var(--muted);
  line-height: 1.45;
}

.cookie-toggle {
  color: var(--navy);
  font-weight: 800;
}

/* ---------------------------------------------------------
   Footer / Scroll top
   --------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 1;
  padding: 64px 0 30px;
  color: rgba(255, 255, 255, 0.74);
  background:
    radial-gradient(circle at 92% 0%, rgba(34, 197, 94, 0.18), transparent 30%),
    linear-gradient(135deg, #031735 0%, #061f46 58%, #04142e 100%);
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1.25fr) repeat(3, minmax(170px, 0.55fr));
  gap: 34px;
  align-items: start;
}

.footer-brand-box {
  max-width: 520px;
}

.footer-brand-box p {
  max-width: 460px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.7;
}

.footer-brand-logo {
  display: inline-grid;
  gap: 3px;
  min-width: 230px;
  max-width: 100%;
  padding: 16px 18px 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 44px rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
}

.footer-brand-name {
  display: block;
  color: #ffffff;
  font-size: 2.35rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 0.92;
}

.footer-brand-service {
  display: block;
  color: #7dd3fc;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.footer-brand-slogan {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,0.72);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.footer-column h4 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-column a,
.footer-column span {
  display: block;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.footer-column a:hover {
  color: #ffffff;
  transform: translateX(2px);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255,255,255,0.62);
  font-size: 0.9rem;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.72);
}

.footer-bottom-links a:hover {
  color: #ffffff;
}

.scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: var(--green);
  box-shadow: 0 18px 40px rgba(5, 32, 76, 0.25);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

/* =========================================================
   V3 KORREKTUREN
   - Navigation ohne Pillen-Leiste
   - Hero-Karte flacher und rein weiß
   - Footer weiß statt dunkel
   - Cookie Banner sicher klickbar
   ========================================================= */

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(5, 32, 76, 0.08);
  box-shadow: 0 10px 28px rgba(5, 32, 76, 0.055);
}

.nav {
  min-height: 88px;
}

.nav-menu {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(14px, 1.7vw, 28px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.nav-menu a {
  padding: 8px 0;
  border-radius: 0;
  color: #1d2a44;
  font-size: 0.92rem;
  font-weight: 850;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.nav-menu a:hover {
  color: var(--green);
  background: transparent;
  border-bottom-color: var(--green);
  transform: none;
}

.hero-message {
  margin-top: -70px;
  padding: 0 0 62px;
  background: linear-gradient(180deg, rgba(245, 248, 251, 0), var(--page) 32%);
}

.hero-message-card {
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.72fr);
  gap: 32px;
  align-items: center;
  padding: clamp(24px, 3vw, 38px) clamp(28px, 4vw, 48px);
  border: 1px solid rgba(5, 32, 76, 0.09);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(5, 32, 76, 0.10);
}

.hero-kicker {
  margin-bottom: 12px;
}

.hero-kicker::before {
  width: 150px;
  height: 60px;
}

.hero-message-card h1 {
  margin-bottom: 18px;
  font-size: clamp(3.25rem, 5.3vw, 6.2rem);
  line-height: 0.9;
}

.hero-text {
  font-size: 1.05rem;
  line-height: 1.65;
}

.hero-list,
.check-list {
  gap: 10px;
  margin-bottom: 22px;
}

.hero-actions {
  gap: 10px;
}

.footer {
  padding: 58px 0 28px;
  color: var(--text);
  background: #ffffff;
  border-top: 1px solid rgba(5, 32, 76, 0.09);
  overflow: visible;
}

.footer::before {
  display: none;
}

.footer-grid {
  grid-template-columns: minmax(300px, 1.15fr) repeat(3, minmax(150px, 0.55fr));
  gap: 36px;
}

.footer-brand-box p {
  margin: 18px 0 0;
  color: var(--muted);
}

.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  max-width: 190px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.footer-logo-img {
  width: 180px;
  height: auto;
  object-fit: contain;
}

.footer-brand-name,
.footer-brand-service,
.footer-brand-slogan {
  display: none;
}

.footer-column h4 {
  color: var(--navy);
}

.footer-column a,
.footer-column span {
  color: var(--muted);
}

.footer-column a:hover {
  color: var(--green);
}

.footer-bottom {
  border-top: 1px solid rgba(5, 32, 76, 0.09);
  color: var(--muted);
}

.footer-bottom-links a {
  color: var(--muted);
}

.footer-bottom-links a:hover {
  color: var(--green);
}

.cookie-banner {
  z-index: 2147483000;
  pointer-events: auto;
}

.cookie-banner::before,
.cookie-banner::after {
  pointer-events: none;
}

.cookie-banner.is-visible,
.cookie-banner.is-visible * {
  pointer-events: auto;
}

.cookie-btn {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== KUKA HEALTH TOP ROW FIX V4 START ===== */

/*
|--------------------------------------------------------------------------
| Nur oberer Bereich im Nachhaltigkeits-Block
|--------------------------------------------------------------------------
| Ziel:
| - linke Karte deutlich entschlacken
| - Bild rechts spürbar größer
| - Familienblock unten NICHT anfassen
|--------------------------------------------------------------------------
*/

@media (min-width: 741px) {

  .health-layout-fixed {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.72fr) minmax(560px, 1.28fr) !important;
    grid-template-areas:
      "text poster"
      "family family" !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .health-text-card {
    padding: 20px 20px 18px !important;
    border-radius: 28px !important;
    align-self: start !important;
  }

  .health-text-card h3 {
    margin: 0 0 14px !important;
    max-width: 8.4ch !important;
    line-height: 0.97 !important;
    letter-spacing: -0.06em !important;
    font-size: clamp(2.5rem, 3.25vw, 4rem) !important;
  }

  /*
   * Zweiten Absatz ausblenden = weniger Text links
   */
  .health-text-card p + p {
    display: none !important;
  }

  /*
   * Die 3 kleinen Karten links entfernen,
   * damit oben rechts mehr wirken kann
   */
  .health-values {
    display: none !important;
  }

  /*
   * CTA kompakter
   */
  .health-text-card .btn,
  .health-text-card .service-pill,
  .health-text-card a.btn {
    margin-top: 10px !important;
  }

  .health-poster-card {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    align-self: start !important;
  }

  .health-poster-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #ffffff !important;
    border-radius: 30px !important;
  }

}

/*
|--------------------------------------------------------------------------
| Mittlere Desktop-/Tablet-Breiten
|--------------------------------------------------------------------------
*/

@media (min-width: 741px) and (max-width: 1100px) {

  .health-layout-fixed {
    grid-template-columns: minmax(240px, 0.66fr) minmax(440px, 1.34fr) !important;
    gap: 18px !important;
  }

  .health-text-card {
    padding: 18px 18px 16px !important;
  }

  .health-text-card h3 {
    font-size: clamp(2.1rem, 3.4vw, 3.2rem) !important;
    max-width: 8.1ch !important;
  }

  .health-text-card p {
    font-size: 0.93rem !important;
    line-height: 1.5 !important;
  }
}

/* ===== KUKA HEALTH TOP ROW FIX V4 END ===== */

/* ===== KUKA PRICING CLEAN V3 START ===== */

.kuka-pricing {
  padding: 48px 0 30px;
}

.kuka-pricing-shell {
  overflow: hidden;
  padding: 38px 42px;
  border: 1px solid rgba(5,32,76,.08);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(5,32,76,.06);
}


.kuka-pricing-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: 42px;

  padding-bottom: 30px;
  border-bottom: 1px solid rgba(5,32,76,.09);
}

.kuka-pricing-intro h2 {
  margin: 8px 0 0;

  font-size: clamp(2.6rem,4vw,4.2rem);
  line-height: .94;
  letter-spacing: -.065em;
  color: var(--navy);
}

.kuka-pricing-intro h2 span {
  color: var(--green);
}

.kuka-pricing-intro > p {
  margin: 0;
  max-width: 48ch;

  color: var(--muted);
  line-height: 1.7;
}


/* PREISLISTE */

.kuka-price-list {
  display: grid;
}

.kuka-price-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 30px;

  min-height: 126px;
  padding: 22px 4px;

  border-bottom: 1px solid rgba(5,32,76,.08);
}

.kuka-price-name {
  display: flex;
  align-items: center;
  gap: 20px;
}

.kuka-price-name > span {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: var(--mint);
  color: var(--green);

  font-size: .78rem;
  font-weight: 900;
}

.kuka-price-name strong {
  display: block;

  margin-bottom: 5px;

  color: var(--navy);
  font-size: 1.28rem;
  letter-spacing: -.025em;
}

.kuka-price-name small {
  display: block;

  color: var(--muted);
  font-size: .91rem;
  line-height: 1.45;
}


.kuka-price-amount {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;

  white-space: nowrap;
}

.kuka-price-amount > span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.kuka-price-amount strong {
  color: var(--navy);

  font-size: clamp(2rem,3vw,3rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.kuka-price-amount small {
  color: var(--muted);
  font-size: .86rem;
}


/* ZAHLUNGSINFOS */

.kuka-pricing-meta {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;

  padding-top: 24px;
}

.kuka-meta-item {
  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 72px;

  padding: 13px 15px;

  border-radius: 18px;
  background: #f6faf8;
}

.kuka-meta-item > span {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 38px;
  height: 38px;

  border-radius: 12px;

  background: #e3f3e9;
  color: var(--green);

  font-size: .8rem;
  font-weight: 900;
}

.kuka-meta-item strong {
  display: block;

  color: var(--navy);
  font-size: .87rem;
}

.kuka-meta-item small {
  display: block;

  margin-top: 2px;

  color: var(--muted);
  font-size: .75rem;
}


.kuka-pricing-footnote {
  margin-top: 18px;

  color: #7a879b;
  font-size: .78rem;
  line-height: 1.55;
}


/* TABLET */

@media (max-width: 980px) {

  .kuka-pricing-intro {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .kuka-pricing-meta {
    grid-template-columns: 1fr;
  }

}


/* MOBILE */

@media (max-width: 740px) {

  .kuka-pricing {
    padding: 32px 0 18px;
  }

  .kuka-pricing-shell {
    padding: 24px 20px;
    border-radius: 26px;
  }

  .kuka-pricing-intro {
    padding-bottom: 22px;
  }

  .kuka-pricing-intro h2 {
    font-size: clamp(2.15rem,10vw,3rem);
  }

  .kuka-pricing-intro > p {
    font-size: .94rem;
    line-height: 1.6;
  }


  .kuka-price-row {
    grid-template-columns: 1fr;
    gap: 14px;

    min-height: 0;
    padding: 22px 0;
  }

  .kuka-price-name {
    align-items: flex-start;
    gap: 13px;
  }

  .kuka-price-name > span {
    width: 36px;
    height: 36px;
  }

  .kuka-price-name strong {
    font-size: 1.08rem;
  }

  .kuka-price-name small {
    font-size: .82rem;
  }

  .kuka-price-amount {
    justify-content: flex-start;

    padding-left: 49px;
  }

  .kuka-price-amount strong {
    font-size: 2.2rem;
  }


  .kuka-pricing-meta {
    padding-top: 20px;
    gap: 8px;
  }

  .kuka-meta-item {
    min-height: 64px;
    border-radius: 16px;
  }

}

/* ===== KUKA PRICING CLEAN V3 END ===== */

/* ===== KUKA DETAIL REDESIGN V1 START ===== */

/*
|--------------------------------------------------------------------------
| Detail-Bereich: Glas / Böden / Arbeitsflächen
|--------------------------------------------------------------------------
*/

@media (min-width: 1050px) {

  .detail-section .detail-grid {
    display: grid !important;

    /*
     * Text bekommt endlich genug Breite.
     * Bilder bleiben trotzdem klar der visuelle Schwerpunkt.
     */
    grid-template-columns: minmax(360px, .88fr) minmax(650px, 1.55fr) !important;

    gap: 26px !important;
    align-items: stretch !important;
  }


  /* -------------------------------------------------------
     LINKE TEXTKARTE
  ------------------------------------------------------- */

  .detail-section .detail-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-height: 430px !important;

    padding: 36px 34px !important;

    border-radius: 30px !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(31, 146, 70, .06),
        transparent 34%
      ),
      #ffffff !important;

    box-shadow: 0 18px 45px rgba(5,32,76,.07) !important;
  }


  .detail-section .detail-copy .eyebrow {
    margin-bottom: 14px !important;
  }


  .detail-section .detail-copy h2,
  .detail-section .detail-copy h3 {
    max-width: 10.5ch !important;

    margin: 0 0 20px !important;

    /*
     * Wesentlich ruhiger als vorher.
     */
    font-size: clamp(2.9rem, 3.7vw, 4.6rem) !important;
    line-height: .96 !important;
    letter-spacing: -.065em !important;

    text-wrap: balance !important;
  }


  .detail-section .detail-copy p {
    max-width: 38ch !important;

    margin: 0 !important;

    font-size: .98rem !important;
    line-height: 1.62 !important;

    color: var(--muted) !important;
  }


  /* -------------------------------------------------------
     RECHTE BILDER
  ------------------------------------------------------- */

  .detail-section .detail-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 16px !important;

    align-items: stretch !important;
  }


  .detail-section .detail-card {
    position: relative !important;

    min-height: 430px !important;
    height: 430px !important;

    border-radius: 30px !important;

    overflow: hidden !important;

    box-shadow: 0 18px 42px rgba(5,32,76,.10) !important;

    transform: none !important;
  }


  .detail-section .detail-card img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    transition: transform .35s ease !important;
  }


  .detail-section .detail-card:hover img {
    transform: scale(1.025) !important;
  }


  /*
   * Beschriftung unten etwas eleganter:
   * nicht ganz so breit wie bisher.
   */
  .detail-section .detail-card span {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;

    width: auto !important;

    padding: 13px 15px !important;

    border-radius: 999px !important;

    background: rgba(255,255,255,.94) !important;

    backdrop-filter: blur(10px) !important;

    font-size: .88rem !important;
    font-weight: 800 !important;

    text-align: center !important;

    box-shadow: 0 8px 20px rgba(5,32,76,.10) !important;
  }

}


/*
|--------------------------------------------------------------------------
| Kleine Desktop-/Tablet-Breite
|--------------------------------------------------------------------------
*/

@media (min-width: 741px) and (max-width: 1049px) {

  .detail-section .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .detail-section .detail-copy {
    padding: 30px !important;
  }

  .detail-section .detail-copy h2,
  .detail-section .detail-copy h3 {
    max-width: 14ch !important;
    font-size: clamp(2.7rem, 6vw, 4rem) !important;
    line-height: .98 !important;
  }

  .detail-section .detail-gallery {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 14px !important;
  }

  .detail-section .detail-card {
    min-height: 340px !important;
    height: 340px !important;
  }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 740px) {

  .detail-section .detail-copy {
    padding: 22px !important;
  }

  .detail-section .detail-copy h2,
  .detail-section .detail-copy h3 {
    max-width: 12ch !important;

    font-size: clamp(2.2rem, 10vw, 3.1rem) !important;
    line-height: .98 !important;

    text-wrap: balance !important;
  }

  .detail-section .detail-gallery {
    gap: 14px !important;
  }

  .detail-section .detail-card {
    min-height: 290px !important;
    height: 290px !important;
  }

}

/* ===== KUKA DETAIL REDESIGN V1 END ===== */

/* ===== KUKA DETAIL OVERFLOW HOTFIX V2 START ===== */

/*
|--------------------------------------------------------------------------
| Fix: Überschrift läuft aus der linken Detail-Karte
|--------------------------------------------------------------------------
*/

@media (min-width: 1050px) {

  .detail-section .detail-copy {
    overflow: hidden !important;
  }

  .detail-section .detail-copy h2,
  .detail-section .detail-copy h3 {
    max-width: 8.2ch !important;

    font-size: clamp(2.35rem, 3vw, 3.75rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;

    text-wrap: balance !important;
  }

  .detail-section .detail-copy p {
    max-width: 34ch !important;
  }
}


@media (min-width: 741px) and (max-width: 1049px) {

  .detail-section .detail-copy h2,
  .detail-section .detail-copy h3 {
    max-width: 9.5ch !important;

    font-size: clamp(2.2rem, 4.4vw, 3.2rem) !important;
    line-height: 0.98 !important;

    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}


@media (max-width: 740px) {

  .detail-section .detail-copy h2,
  .detail-section .detail-copy h3 {
    max-width: 10ch !important;

    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}

/* ===== KUKA DETAIL OVERFLOW HOTFIX V2 END ===== */

/* ===== KUKA DETAIL TEXT FLOW V3 START ===== */

@media (min-width: 1050px) {

  .detail-section .detail-grid {
    grid-template-columns:
      minmax(395px, .95fr)
      minmax(640px, 1.5fr) !important;
  }

  .detail-section .detail-copy h2,
  .detail-section .detail-copy h3 {
    max-width: 100% !important;

    font-size: clamp(2.55rem, 3.05vw, 3.85rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;

    text-wrap: balance !important;
  }

  .detail-section .detail-copy p {
    max-width: 39ch !important;
  }
}

/* ===== KUKA DETAIL TEXT FLOW V3 END ===== */

/* ===== KUKA CONTACT MODERN V1 START ===== */

/*
|--------------------------------------------------------------------------
| Kontaktbereich modernisieren
|--------------------------------------------------------------------------
*/

.contact-section {
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.08), transparent 25%),
    radial-gradient(circle at 88% 75%, rgba(31,146,70,.10), transparent 24%);

  pointer-events: none;
}


/* ---------------------------------------------------------
   FORM CARD
--------------------------------------------------------- */

.quote-card {
  position: relative;

  padding: 30px !important;

  border-radius: 30px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(248,251,255,.98)
    ) !important;

  border: 1px solid rgba(255,255,255,.65) !important;

  box-shadow:
    0 26px 70px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.8) !important;

  backdrop-filter: blur(16px);
}


/* ---------------------------------------------------------
   LABELS
--------------------------------------------------------- */

.quote-card .field {
  margin-bottom: 18px;
}

.quote-card label {
  display: block;

  margin-bottom: 8px;

  color: var(--navy);

  font-size: .82rem;
  font-weight: 800;

  letter-spacing: .01em;
}


/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */

.quote-card input,
.quote-card textarea,
.quote-card select {
  width: 100%;

  border: 1px solid rgba(5,32,76,.10) !important;

  background: #ffffff !important;

  color: var(--text) !important;

  box-shadow:
    0 5px 18px rgba(5,32,76,.04) !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


.quote-card input,
.quote-card select {
  min-height: 54px !important;

  padding: 0 16px !important;

  border-radius: 17px !important;
}


.quote-card textarea {
  min-height: 145px !important;

  padding: 15px 16px !important;

  border-radius: 18px !important;

  resize: vertical;
}


.quote-card input:focus,
.quote-card textarea:focus,
.quote-card select:focus {
  outline: none !important;

  border-color: rgba(31,146,70,.55) !important;

  box-shadow:
    0 0 0 4px rgba(31,146,70,.10),
    0 10px 24px rgba(5,32,76,.06) !important;
}


/* ---------------------------------------------------------
   MODERN SELECT
--------------------------------------------------------- */

.modern-select-wrap {
  position: relative;
}


.modern-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;

  padding-right: 52px !important;
}


/*
 * eigener Pfeil
 */

.modern-select-arrow {
  position: absolute;

  top: 50%;
  right: 17px;

  width: 11px;
  height: 11px;

  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);

  transform:
    translateY(-68%)
    rotate(45deg);

  pointer-events: none;

  opacity: .72;
}


/*
 * Moderne Select-Optionen
 *
 * Hinweis:
 * Die geöffnete Optionsliste selbst wird teilweise
 * vom Betriebssystem/Browser gerendert.
 */

.modern-select-wrap select option {
  background: #ffffff;
  color: var(--navy);

  font-size: 1rem;
}


/* ---------------------------------------------------------
   FORM ROW
--------------------------------------------------------- */

.quote-card .form-row {
  gap: 14px !important;
}


/* ---------------------------------------------------------
   SUBMIT
--------------------------------------------------------- */

.quote-card button[type="submit"] {
  position: relative;

  width: 100%;

  min-height: 54px !important;

  margin-top: 4px;

  border: 0 !important;
  border-radius: 17px !important;

  background:
    linear-gradient(135deg, #11883f, #21a75f) !important;

  color: #ffffff !important;

  font-weight: 800;

  box-shadow:
    0 12px 24px rgba(21,128,61,.22) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.quote-card button[type="submit"]:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 28px rgba(21,128,61,.28) !important;
}


/* ---------------------------------------------------------
   NOTE
--------------------------------------------------------- */

.quote-card .form-note {
  margin: 14px auto 0 !important;

  max-width: 38ch;

  color: #7a879b !important;

  font-size: .82rem !important;
  line-height: 1.5 !important;

  text-align: center !important;
}


/* ---------------------------------------------------------
   CONTACT OPTIONS LINKS
--------------------------------------------------------- */

.contact-options {
  gap: 11px !important;
}


.contact-option {
  position: relative;

  border: 1px solid rgba(255,255,255,.12) !important;

  background:
    rgba(255,255,255,.07) !important;

  backdrop-filter: blur(8px);

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.contact-option:hover {
  transform: translateX(4px);

  background:
    rgba(255,255,255,.12) !important;

  border-color:
    rgba(255,255,255,.2) !important;
}


.contact-icon {
  background: #ffffff !important;

  color: var(--navy) !important;

  box-shadow:
    0 7px 18px rgba(0,0,0,.10);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 740px) {

  .quote-card {
    padding: 21px !important;

    border-radius: 24px !important;
  }


  .quote-card .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }


  .quote-card input,
  .quote-card select {
    min-height: 52px !important;

    border-radius: 15px !important;
  }


  .quote-card textarea {
    min-height: 125px !important;

    border-radius: 16px !important;
  }


  .quote-card button[type="submit"] {
    min-height: 52px !important;

    border-radius: 15px !important;
  }


  .modern-select-arrow {
    right: 16px;
  }

}

/* ===== KUKA CONTACT MODERN V1 END ===== */

/* ===== KUKA CUSTOM SERVICE DROPDOWN V1 START ===== */

/*
|--------------------------------------------------------------------------
| Custom Dropdown für "Gewünschte Leistung"
|--------------------------------------------------------------------------
*/

.modern-select-wrap {
  position: relative;
}

.modern-select-wrap .modern-select-arrow {
  display: none !important;
}

/* natives select unsichtbar, aber weiterhin im Formular vorhanden */
.modern-select-wrap select {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* custom dropdown basis */
.service-dropdown {
  position: relative;
}

.service-dropdown-trigger {
  width: 100%;
  min-height: 54px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 0 16px;

  border: 1px solid rgba(5,32,76,.10);
  border-radius: 17px;

  background: #ffffff;
  color: var(--text);

  box-shadow: 0 5px 18px rgba(5,32,76,.04);

  cursor: pointer;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.service-dropdown-trigger:hover {
  border-color: rgba(5,32,76,.16);
}

.service-dropdown.is-open .service-dropdown-trigger,
.service-dropdown-trigger:focus {
  outline: none;
  border-color: rgba(31,146,70,.55);
  box-shadow:
    0 0 0 4px rgba(31,146,70,.10),
    0 10px 24px rgba(5,32,76,.06);
}

.service-dropdown-value {
  flex: 1 1 auto;
  text-align: left;
  line-height: 1.4;
}

.service-dropdown-value.is-placeholder {
  color: #7f8792;
}

.service-dropdown-icon {
  flex: 0 0 auto;

  width: 12px;
  height: 12px;

  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);

  transform: rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
  opacity: .72;
}

.service-dropdown.is-open .service-dropdown-icon {
  transform: rotate(-135deg) translateY(-2px);
  opacity: 1;
}

/* popup */
.service-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 50;

  display: none;
  overflow: hidden;

  border: 1px solid rgba(5,32,76,.10);
  border-radius: 20px;

  background: rgba(255,255,255,.98);
  backdrop-filter: blur(12px);

  box-shadow:
    0 22px 48px rgba(5,32,76,.14),
    0 8px 18px rgba(5,32,76,.08);
}

.service-dropdown.is-open .service-dropdown-panel {
  display: block;
}

.service-dropdown-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
}

/* option */
.service-dropdown-option {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 14px;

  border: 0;
  border-radius: 14px;
  background: transparent;

  color: var(--navy);
  text-align: left;
  font: inherit;

  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.service-dropdown-option:hover,
.service-dropdown-option:focus {
  outline: none;
  background: #eef7f0;
  color: var(--navy);
}

.service-dropdown-option.is-selected {
  background: #e9f6ee;
  color: #0f6f35;
  font-weight: 700;
}

.service-dropdown-option-check {
  opacity: 0;
  color: #11883f;
  font-size: .92rem;
  font-weight: 900;
}

.service-dropdown-option.is-selected .service-dropdown-option-check {
  opacity: 1;
}

/* invalid */
.service-dropdown.is-invalid .service-dropdown-trigger {
  border-color: rgba(204, 34, 34, .45) !important;
  box-shadow:
    0 0 0 4px rgba(204,34,34,.08),
    0 10px 24px rgba(5,32,76,.06) !important;
}

.service-dropdown-error {
  display: none;
  margin-top: 8px;
  color: #b42318;
  font-size: .82rem;
  line-height: 1.4;
}

.service-dropdown.is-invalid .service-dropdown-error {
  display: block;
}

/* mobile */
@media (max-width: 740px) {
  .service-dropdown-trigger {
    min-height: 52px;
    border-radius: 15px;
  }

  .service-dropdown-panel {
    border-radius: 18px;
  }

  .service-dropdown-list {
    max-height: 240px;
  }

  .service-dropdown-option {
    padding: 11px 13px;
    border-radius: 12px;
  }
}

/* ===== KUKA CUSTOM SERVICE DROPDOWN V1 END ===== */

/* ===== KUKA TOPBAR HERO TURQUOISE V5 START ===== */

/*
|--------------------------------------------------------------------------
| Topbar: Schürzen-Ton + weiße Schrift
|--------------------------------------------------------------------------
*/

.topbar {
  background:
    linear-gradient(
      90deg,
      #53c2d8 0%,
      #3eb3cd 48%,
      #2aa5c4 100%
    ) !important;

  border-bottom: 1px solid rgba(8, 37, 83, 0.10) !important;
}

.topbar,
.topbar * {
  color: #ffffff !important;
}

.topbar a,
.topbar span,
.topbar p,
.topbar strong {
  color: #ffffff !important;
}

.topbar svg,
.topbar path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.topbar-icon-link {
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

.topbar-icon-link:hover {
  background: rgba(255,255,255,0.26) !important;
}

/* ===== KUKA TOPBAR HERO TURQUOISE V5 END ===== */


/* ===== KUKA HEADER SIZE V1 START ===== */

/*
|--------------------------------------------------------------------------
| Navigation etwas größer / luftiger
| Logo sichtbar größer
|--------------------------------------------------------------------------
*/

@media (min-width: 981px) {

  .site-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .site-header .container,
  .topbar .container {
    max-width: 1360px !important;
  }

  .site-header .logo img,
  .site-header a.logo img,
  .site-header .site-logo img,
  .site-header .brand img {
    height: 76px !important;
    width: auto !important;
    max-height: none !important;
  }

  .site-header nav a,
  .site-header .nav a,
  .site-header .menu a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .site-header .btn,
  .site-header .cta-button,
  .site-header .header-cta {
    min-height: 46px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 999px !important;
  }
}

@media (min-width: 741px) and (max-width: 980px) {
  .site-header .logo img,
  .site-header a.logo img,
  .site-header .site-logo img,
  .site-header .brand img {
    height: 66px !important;
    width: auto !important;
  }
}

@media (max-width: 740px) {
  .site-header .logo img,
  .site-header a.logo img,
  .site-header .site-logo img,
  .site-header .brand img {
    height: 54px !important;
    width: auto !important;
  }
}

/* ===== KUKA HEADER SIZE V1 END ===== */

/* ===== KUKA TOPBAR CONTACT ICONS V3 START ===== */

.topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

.topbar-desktop-contact {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.topbar-contact-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  min-height: 34px !important;
  padding: 6px 12px !important;

  border-radius: 999px !important;

  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;

  color: #ffffff !important;
  text-decoration: none !important;

  white-space: nowrap !important;
}

.topbar-contact-item-static {
  cursor: default !important;
}

.topbar-contact-item:hover {
  background: rgba(255,255,255,0.22) !important;
}

.topbar-contact-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 20px !important;
  height: 20px !important;

  color: #ffffff !important;
  flex: 0 0 auto !important;
}

.topbar-contact-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  fill: currentColor !important;
}

.topbar-contact-value {
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.topbar-desktop-text {
  margin-left: auto !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Etwas kompakter bei kleineren Desktops */
@media (max-width: 1360px) {
  .topbar-desktop-contact {
    gap: 8px !important;
  }

  .topbar-contact-item {
    padding: 5px 10px !important;
  }

  .topbar-contact-value {
    font-size: 0.77rem !important;
  }

  .topbar-desktop-text {
    font-size: 0.77rem !important;
  }
}

/* Ab Tablet Topbar Kontakte lieber ausblenden, wenn zu eng */
@media (max-width: 1100px) {
  .topbar-desktop-contact {
    gap: 6px !important;
  }

  .topbar-contact-item {
    padding: 5px 9px !important;
  }

  .topbar-contact-value {
    font-size: 0.73rem !important;
  }

  .topbar-desktop-text {
    font-size: 0.73rem !important;
  }
}

@media (max-width: 980px) {
  .topbar-desktop-contact,
  .topbar-desktop-text {
    display: none !important;
  }
}

/* ===== KUKA TOPBAR CONTACT ICONS V3 END ===== */

/* ===== KUKA TOPBAR LEFT ALIGN V1 START ===== */

@media (min-width: 981px) {

  .topbar .container {
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .topbar-inner {
    justify-content: flex-start !important;
    gap: 18px !important;
  }

  .topbar-desktop-contact {
    flex: 0 0 auto !important;
    margin-right: 10px !important;
  }

  .topbar-desktop-text {
    margin-left: 18px !important;
    flex: 0 1 auto !important;
  }
}

/* ===== KUKA TOPBAR LEFT ALIGN V1 END ===== */

/* ===== KUKA CONTACT BABY BLUE V1 START ===== */

/*
|--------------------------------------------------------------------------
| Kontaktbereich in Baby-/Türkisblau
|--------------------------------------------------------------------------
*/

.contact-section {
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.28), transparent 24%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(135deg, #58c7dc 0%, #41bad3 48%, #2eacc8 100%) !important;

  color: #0b2f67 !important;
}

/* Linke Textspalte */
.contact-section .contact-copy,
.contact-section .contact-info,
.contact-section .contact-content-left {
  color: #0b2f67 !important;
}

.contact-section .contact-copy h1,
.contact-section .contact-copy h2,
.contact-section .contact-copy h3,
.contact-section .contact-info h1,
.contact-section .contact-info h2,
.contact-section .contact-info h3,
.contact-section .contact-content-left h1,
.contact-section .contact-content-left h2,
.contact-section .contact-content-left h3 {
  color: #0b2f67 !important;
}

.contact-section .contact-copy p,
.contact-section .contact-info p,
.contact-section .contact-content-left p {
  color: rgba(11,47,103,.88) !important;
}

.contact-section .eyebrow,
.contact-section .section-eyebrow {
  background: rgba(255,255,255,.22) !important;
  color: #0b2f67 !important;
  border: 1px solid rgba(255,255,255,.30) !important;
}

/* Kontakt-Buttons links */
.contact-section .contact-option {
  background: rgba(11,47,103,.10) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 10px 26px rgba(11,47,103,.08) !important;
}

.contact-section .contact-option:hover {
  background: rgba(11,47,103,.16) !important;
}

.contact-section .contact-option,
.contact-section .contact-option * {
  color: #ffffff !important;
}

.contact-section .contact-icon {
  background: #ffffff !important;
  color: #0b2f67 !important;
  box-shadow: 0 8px 18px rgba(11,47,103,.12) !important;
}

/* Formular-Karte rechts etwas klarer absetzen */
.contact-section .quote-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,253,.97)) !important;
  box-shadow:
    0 22px 55px rgba(11,47,103,.18),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* Falls irgendwo noch weiße Grundschrift im Kontaktblock erzwungen wird */
.contact-section .contact-copy,
.contact-section .contact-copy *:not(.contact-option):not(.contact-option *) {
  color: inherit;
}

@media (max-width: 740px) {
  .contact-section {
    background:
      radial-gradient(circle at 12% 10%, rgba(255,255,255,.22), transparent 22%),
      linear-gradient(135deg, #62cbde 0%, #49bdd4 50%, #31aec8 100%) !important;
  }
}

/* ===== KUKA CONTACT BABY BLUE V1 END ===== */

/* ===== KUKA CONTACT ICON FIX V2 START ===== */

.contact-section .contact-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

  border-radius: 13px !important;

  background: #ffffff !important;
  color: #0b2f67 !important;

  box-shadow:
    0 7px 18px rgba(11,47,103,.12) !important;
}

.contact-section .contact-icon svg {
  display: block !important;

  width: 21px !important;
  height: 21px !important;

  color: #0b2f67 !important;

  fill: none !important;
  stroke: #0b2f67 !important;
  stroke-width: 2 !important;
}

.contact-section .contact-icon svg path,
.contact-section .contact-icon svg circle,
.contact-section .contact-icon svg line,
.contact-section .contact-icon svg polyline {
  fill: none !important;
  stroke: #0b2f67 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/*
 * Text der Kontaktkarten bleibt weiß.
 */
.contact-section .contact-option {
  color: #ffffff !important;
}

.contact-section .contact-option > span:not(.contact-icon),
.contact-section .contact-option > strong {
  color: #ffffff !important;
}

/* ===== KUKA CONTACT ICON FIX V2 END ===== */

/* ===== KUKA CONTACT BUBBLES V1 START ===== */

/*
|--------------------------------------------------------------------------
| Dekorative Seifenblasen im Kontaktbereich
|--------------------------------------------------------------------------
*/

.contact-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.contact-section > :not(.contact-bubbles) {
  position: relative;
  z-index: 2;
}

.contact-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.contact-bubbles .bubble {
  position: absolute;
  display: block;
  border-radius: 50%;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), rgba(255,255,255,.12) 42%, rgba(255,255,255,.04) 62%, rgba(255,255,255,0) 76%);

  border: 1px solid rgba(255,255,255,.38);

  box-shadow:
    inset -6px -8px 14px rgba(255,255,255,.08),
    inset 6px 8px 18px rgba(255,255,255,.20),
    0 10px 28px rgba(90, 190, 220, .10);

  opacity: .72;
  animation: kukaBubbleFloat 10s ease-in-out infinite;
}

.contact-bubbles .bubble::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 20%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  filter: blur(1px);
}

.contact-bubbles .bubble::after {
  content: "";
  position: absolute;
  inset: 8%;

  border-radius: 50%;
  border-top: 1px solid rgba(255,255,255,.38);
  border-left: 1px solid rgba(255,255,255,.18);
  opacity: .7;
}

/* Positionen und Größen */
.contact-bubbles .bubble-1 {
  width: 84px;
  height: 84px;
  top: 9%;
  left: 4%;
  animation-duration: 11s;
}

.contact-bubbles .bubble-2 {
  width: 38px;
  height: 38px;
  top: 28%;
  left: 12%;
  animation-duration: 8.5s;
  animation-delay: -2s;
}

.contact-bubbles .bubble-3 {
  width: 58px;
  height: 58px;
  top: 56%;
  left: 8%;
  animation-duration: 12s;
  animation-delay: -1.2s;
}

.contact-bubbles .bubble-4 {
  width: 30px;
  height: 30px;
  top: 73%;
  left: 21%;
  animation-duration: 7.8s;
  animation-delay: -3.4s;
}

.contact-bubbles .bubble-5 {
  width: 72px;
  height: 72px;
  top: 18%;
  right: 12%;
  animation-duration: 10.8s;
  animation-delay: -1.6s;
}

.contact-bubbles .bubble-6 {
  width: 42px;
  height: 42px;
  top: 48%;
  right: 5%;
  animation-duration: 9.2s;
  animation-delay: -4.1s;
}

.contact-bubbles .bubble-7 {
  width: 94px;
  height: 94px;
  bottom: 10%;
  right: 7%;
  animation-duration: 13s;
  animation-delay: -2.8s;
}

.contact-bubbles .bubble-8 {
  width: 26px;
  height: 26px;
  bottom: 24%;
  right: 28%;
  animation-duration: 7.2s;
  animation-delay: -1s;
}

@keyframes kukaBubbleFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(8px, -10px, 0) scale(1.03);
  }
  50% {
    transform: translate3d(-6px, -22px, 0) scale(.98);
  }
  75% {
    transform: translate3d(10px, -8px, 0) scale(1.04);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 980px) {
  .contact-bubbles .bubble-5,
  .contact-bubbles .bubble-7,
  .contact-bubbles .bubble-8 {
    display: none;
  }
}

@media (max-width: 740px) {
  .contact-bubbles .bubble {
    opacity: .45;
  }

  .contact-bubbles .bubble-1 {
    width: 58px;
    height: 58px;
    top: 8%;
    left: 3%;
  }

  .contact-bubbles .bubble-2 {
    width: 28px;
    height: 28px;
  }

  .contact-bubbles .bubble-3 {
    width: 42px;
    height: 42px;
  }

  .contact-bubbles .bubble-4,
  .contact-bubbles .bubble-6 {
    width: 24px;
    height: 24px;
  }
}

/* ===== KUKA CONTACT BUBBLES V1 END ===== */

/* ===== KUKA CONTACT BUBBLES SIZE V3 START ===== */

/*
|--------------------------------------------------------------------------
| Noch größere Seifenblasen
|--------------------------------------------------------------------------
*/

.contact-bubbles .bubble {
  opacity: .80 !important;
}

.contact-bubbles .bubble-1 {
  width: 165px !important;
  height: 165px !important;
  top: 6% !important;
  left: 2% !important;
}

.contact-bubbles .bubble-2 {
  width: 68px !important;
  height: 68px !important;
  top: 22% !important;
  left: 13% !important;
}

.contact-bubbles .bubble-3 {
  width: 112px !important;
  height: 112px !important;
  top: 52% !important;
  left: 6% !important;
}

.contact-bubbles .bubble-4 {
  width: 56px !important;
  height: 56px !important;
  top: 72% !important;
  left: 20% !important;
}

.contact-bubbles .bubble-5 {
  width: 132px !important;
  height: 132px !important;
  top: 3% !important;
  right: 10% !important;
}

.contact-bubbles .bubble-6 {
  width: 74px !important;
  height: 74px !important;
  top: 42% !important;
  right: 3% !important;
}

.contact-bubbles .bubble-7 {
  width: 152px !important;
  height: 152px !important;
  bottom: 8% !important;
  right: 5% !important;
}

.contact-bubbles .bubble-8 {
  width: 52px !important;
  height: 52px !important;
  bottom: 25% !important;
  right: 28% !important;
}

@media (max-width: 740px) {
  .contact-bubbles .bubble-1 {
    width: 98px !important;
    height: 98px !important;
  }

  .contact-bubbles .bubble-2 {
    width: 44px !important;
    height: 44px !important;
  }

  .contact-bubbles .bubble-3 {
    width: 74px !important;
    height: 74px !important;
  }

  .contact-bubbles .bubble-4,
  .contact-bubbles .bubble-6,
  .contact-bubbles .bubble-8 {
    width: 36px !important;
    height: 36px !important;
  }

  .contact-bubbles .bubble-5 {
    width: 88px !important;
    height: 88px !important;
  }

  .contact-bubbles .bubble-7 {
    width: 96px !important;
    height: 96px !important;
  }
}

/* ===== KUKA CONTACT BUBBLES SIZE V3 END ===== */

/* ===== KUKA OFFER FINAL V4 START ===== */

/*
|--------------------------------------------------------------------------
| ÄUSSERER BEREICH = Babyblau
|--------------------------------------------------------------------------
*/

.offer-band {
  position: relative !important;
  overflow: hidden !important;

  padding: 58px 0 72px !important;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(255,255,255,.25),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #58c7dc 0%,
      #41bad3 48%,
      #2eacc8 100%
    ) !important;
}


/*
|--------------------------------------------------------------------------
| INNERER DUNKLER KASTEN KOMPLETT WEG
|--------------------------------------------------------------------------
*/

.offer-card {
  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;

  border-radius: 0 !important;

  color: #0b2f67 !important;

  padding: 32px 38px !important;
}


/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.offer-card h2 {
  color: #0b2f67 !important;
}

.offer-card p {
  color: rgba(11,47,103,.86) !important;
}


/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.offer-card .btn {
  background: #ffffff !important;
  color: #0b2f67 !important;

  border: 1px solid rgba(255,255,255,.8) !important;

  box-shadow:
    0 10px 24px rgba(11,47,103,.12) !important;
}

.offer-card .btn:hover {
  background: #f7fdff !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 14px 30px rgba(11,47,103,.16) !important;
}


/*
|--------------------------------------------------------------------------
| Große dezente Seifenblasen im Außenbereich
|--------------------------------------------------------------------------
*/

.offer-band::before {
  content: "" !important;

  position: absolute !important;

  width: 170px !important;
  height: 170px !important;

  left: -45px !important;
  top: 20px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 30% 28%,
      rgba(255,255,255,.48),
      rgba(255,255,255,.12) 44%,
      rgba(255,255,255,.03) 68%,
      transparent 76%
    ) !important;

  border: 1px solid rgba(255,255,255,.34) !important;

  opacity: .58 !important;

  pointer-events: none !important;
}


.offer-band::after {
  content: "" !important;

  position: absolute !important;

  width: 135px !important;
  height: 135px !important;

  right: 4% !important;
  bottom: -24px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 30% 28%,
      rgba(255,255,255,.48),
      rgba(255,255,255,.12) 44%,
      rgba(255,255,255,.03) 68%,
      transparent 76%
    ) !important;

  border: 1px solid rgba(255,255,255,.32) !important;

  opacity: .52 !important;

  pointer-events: none !important;
}


.offer-band .container-wide,
.offer-card {
  position: relative !important;
  z-index: 2 !important;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 740px) {

  .offer-band {
    padding: 38px 0 46px !important;
  }

  .offer-card {
    grid-template-columns: 1fr !important;
    gap: 22px !important;

    padding: 22px 20px !important;
  }

  .offer-card .btn {
    width: 100% !important;
    text-align: center !important;
  }

}

/* ===== KUKA OFFER FINAL V4 END ===== */

/* ===== KUKA OFFER BATH DECO V1 START ===== */

/*
|--------------------------------------------------------------------------
| Angebotsbereich: Seifenblasen + Badeente
|--------------------------------------------------------------------------
*/

.offer-band {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.offer-band .container-wide {
  position: relative !important;
  z-index: 3 !important;
}


/*
|--------------------------------------------------------------------------
| Dekorations-Layer
|--------------------------------------------------------------------------
*/

.offer-bath-deco {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;
  overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Seifenblasen
|--------------------------------------------------------------------------
*/

.offer-bubble {
  position: absolute;

  display: block;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.38);

  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.28) 11%,
      rgba(255,255,255,.10) 38%,
      rgba(255,255,255,.035) 62%,
      transparent 74%
    );

  box-shadow:
    inset 8px 10px 18px rgba(255,255,255,.17),
    inset -8px -10px 18px rgba(62,167,200,.08),
    0 10px 28px rgba(25,118,150,.08);

  opacity: .68;

  animation:
    offerBubbleFloat 9s ease-in-out infinite;
}


/* kleiner Lichtreflex */

.offer-bubble::before {
  content: "";

  position: absolute;

  width: 20%;
  height: 20%;

  top: 18%;
  left: 21%;

  border-radius: 50%;

  background: rgba(255,255,255,.65);

  filter: blur(.5px);
}


/*
|--------------------------------------------------------------------------
| Positionen — Mix aus groß und klein
|--------------------------------------------------------------------------
*/

.ob-1 {
  width: 185px;
  height: 185px;

  left: -55px;
  top: 18px;

  animation-duration: 12s;
}


.ob-2 {
  width: 82px;
  height: 82px;

  left: 13%;
  top: 16%;

  animation-duration: 9s;
  animation-delay: -3s;
}


.ob-3 {
  width: 38px;
  height: 38px;

  left: 22%;
  top: 64%;

  animation-duration: 7s;
  animation-delay: -1s;
}


.ob-4 {
  width: 112px;
  height: 112px;

  left: 35%;
  bottom: -25px;

  animation-duration: 11s;
  animation-delay: -5s;
}


.ob-5 {
  width: 52px;
  height: 52px;

  left: 47%;
  top: 12%;

  animation-duration: 8s;
  animation-delay: -2s;
}


.ob-6 {
  width: 28px;
  height: 28px;

  left: 55%;
  bottom: 25%;

  animation-duration: 6s;
  animation-delay: -4s;
}


.ob-7 {
  width: 148px;
  height: 148px;

  right: 28%;
  top: -45px;

  animation-duration: 13s;
  animation-delay: -6s;
}


.ob-8 {
  width: 64px;
  height: 64px;

  right: 20%;
  top: 40%;

  animation-duration: 8.5s;
  animation-delay: -2.5s;
}


.ob-9 {
  width: 34px;
  height: 34px;

  right: 14%;
  top: 17%;

  animation-duration: 6.8s;
}


.ob-10 {
  width: 170px;
  height: 170px;

  right: -36px;
  bottom: -34px;

  animation-duration: 12.5s;
  animation-delay: -4s;
}


.ob-11 {
  width: 74px;
  height: 74px;

  right: 8%;
  bottom: 48%;

  animation-duration: 9.5s;
  animation-delay: -6s;
}


.ob-12 {
  width: 24px;
  height: 24px;

  right: 38%;
  bottom: 14%;

  opacity: .8;

  animation-duration: 6.5s;
  animation-delay: -3s;
}


/*
|--------------------------------------------------------------------------
| Floating Bewegung
|--------------------------------------------------------------------------
*/

@keyframes offerBubbleFloat {

  0% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  25% {
    transform:
      translate3d(7px,-9px,0)
      scale(1.035);
  }

  50% {
    transform:
      translate3d(-5px,-19px,0)
      scale(.985);
  }

  75% {
    transform:
      translate3d(9px,-7px,0)
      scale(1.025);
  }

  100% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

}


/*
|--------------------------------------------------------------------------
| Gelbe Badeente
|--------------------------------------------------------------------------
*/

.offer-duck {
  position: absolute;

  right: 8%;
  bottom: 20px;

  width: 115px;
  height: 92px;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;

  animation:
    offerDuckFloat 4.2s ease-in-out infinite;
}


/*
 * Emoji wird groß genug dargestellt, damit es
 * wie eine dekorative Badeente wirkt.
 */

.duck-body {
  position: relative;

  z-index: 2;

  display: block;

  font-size: 76px;
  line-height: 1;

  filter:
    drop-shadow(0 9px 9px rgba(11,47,103,.13));

  transform: rotate(-4deg);
}


/*
 * kleine Wasser-/Schaumlinie unter der Ente
 */

.duck-ripple {
  position: absolute;

  left: 4px;
  right: 4px;
  bottom: 4px;

  height: 16px;

  border-radius: 50%;

  border-top:
    3px solid rgba(255,255,255,.54);

  opacity: .8;
}


@keyframes offerDuckFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-7px)
      rotate(2deg);
  }

}


/*
|--------------------------------------------------------------------------
| Damit die Ente den CTA-Button nicht stört
|--------------------------------------------------------------------------
*/

.offer-card {
  position: relative !important;
  z-index: 4 !important;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

  .offer-duck {
    right: 3%;
    bottom: 8px;

    transform: scale(.82);
  }

  .ob-7,
  .ob-11 {
    display: none;
  }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 740px) {

  .offer-bubble {
    opacity: .48;
  }


  .ob-1 {
    width: 110px;
    height: 110px;
  }


  .ob-2 {
    width: 54px;
    height: 54px;
  }


  .ob-3 {
    width: 30px;
    height: 30px;
  }


  .ob-4 {
    width: 76px;
    height: 76px;
  }


  .ob-5 {
    width: 40px;
    height: 40px;
  }


  .ob-6,
  .ob-8,
  .ob-9,
  .ob-12 {
    width: 28px;
    height: 28px;
  }


  .ob-7,
  .ob-11 {
    display: none;
  }


  .ob-10 {
    width: 100px;
    height: 100px;
  }


  .offer-duck {
    right: 8px;
    bottom: 5px;

    width: 78px;
    height: 62px;
  }


  .duck-body {
    font-size: 52px;
  }

}


/*
|--------------------------------------------------------------------------
| Reduce motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

  .offer-bubble,
  .offer-duck {
    animation: none !important;
  }

}

/* ===== KUKA OFFER BATH DECO V1 END ===== */

/* ===== KUKA PROOF BABY BLUE V1 START ===== */

/*
|--------------------------------------------------------------------------
| Proof-Bar in gleichem Baby-/Türkisblau
|--------------------------------------------------------------------------
*/

.proof-bar {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.18), transparent 20%),
    radial-gradient(circle at 86% 68%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(
      90deg,
      #58c7dc 0%,
      #41bad3 48%,
      #2eacc8 100%
    ) !important;

  border-top: 1px solid rgba(11,47,103,.08) !important;
  border-bottom: 1px solid rgba(11,47,103,.08) !important;
}

/*
|--------------------------------------------------------------------------
| Inhalte über Deko
|--------------------------------------------------------------------------
*/

.proof-bar .proof-grid {
  position: relative !important;
  z-index: 2 !important;
}


/*
|--------------------------------------------------------------------------
| Texte dunkelblau
|--------------------------------------------------------------------------
*/

.proof-bar .proof-item strong {
  color: #0b2f67 !important;
}

.proof-bar .proof-item small {
  color: rgba(11,47,103,.80) !important;
}


/*
|--------------------------------------------------------------------------
| Trennlinien subtiler
|--------------------------------------------------------------------------
*/

.proof-bar .proof-item {
  border-color: rgba(255,255,255,.20) !important;
}


/*
|--------------------------------------------------------------------------
| Kleine Blasen über Pseudo-Elemente
|--------------------------------------------------------------------------
*/

.proof-bar::before {
  content: "" !important;

  position: absolute !important;

  width: 54px !important;
  height: 54px !important;

  left: 7% !important;
  top: 18% !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 30% 28%,
      rgba(255,255,255,.52),
      rgba(255,255,255,.12) 44%,
      transparent 72%
    ) !important;

  border: 1px solid rgba(255,255,255,.35) !important;

  opacity: .60 !important;

  pointer-events: none !important;
}

.proof-bar::after {
  content: "" !important;

  position: absolute !important;

  width: 34px !important;
  height: 34px !important;

  right: 9% !important;
  bottom: 14% !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 30% 28%,
      rgba(255,255,255,.52),
      rgba(255,255,255,.12) 44%,
      transparent 72%
    ) !important;

  border: 1px solid rgba(255,255,255,.32) !important;

  opacity: .56 !important;

  pointer-events: none !important;
}


/*
|--------------------------------------------------------------------------
| Zusätzliche kleine Bubble-Optik je Item
|--------------------------------------------------------------------------
*/

.proof-bar .proof-item:nth-child(2)::after,
.proof-bar .proof-item:nth-child(4)::after {
  content: "" !important;

  position: absolute !important;

  width: 22px !important;
  height: 22px !important;

  right: 14px !important;
  top: 12px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,.48),
      rgba(255,255,255,.08) 55%,
      transparent 72%
    ) !important;

  border: 1px solid rgba(255,255,255,.26) !important;

  opacity: .50 !important;

  pointer-events: none !important;
}

.proof-bar .proof-item {
  position: relative !important;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 740px) {

  .proof-bar {
    background:
      linear-gradient(
        90deg,
        #62cbde 0%,
        #49bdd4 52%,
        #31aec8 100%
      ) !important;
  }

  .proof-bar::before {
    width: 40px !important;
    height: 40px !important;
  }

  .proof-bar::after {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ===== KUKA PROOF BABY BLUE V1 END ===== */

/* ===== KUKA OCEAN ACCENT V1 START ===== */

/*
|--------------------------------------------------------------------------
| Neue Akzentfarbe statt Grün
|--------------------------------------------------------------------------
|
| Hauptfarbe:  #087EA4
| Hover:       #066783
| Hell:        #DDF3F8
|
|--------------------------------------------------------------------------
*/

:root {
  --green: #087EA4 !important;
  --green-dark: #066783 !important;
  --mint: #DDF3F8 !important;
}


/*
|--------------------------------------------------------------------------
| Primäre Buttons
|--------------------------------------------------------------------------
*/

.btn-primary,
.nav-action .btn,
.mobile-menu-cta,
.quote-card button[type="submit"] {
  background: #087EA4 !important;
  color: #ffffff !important;

  border-color: #087EA4 !important;

  box-shadow:
    0 11px 25px rgba(8,126,164,.20) !important;
}

.btn-primary:hover,
.nav-action .btn:hover,
.mobile-menu-cta:hover,
.quote-card button[type="submit"]:hover {
  background: #066783 !important;

  border-color: #066783 !important;

  box-shadow:
    0 15px 30px rgba(8,126,164,.25) !important;
}


/*
|--------------------------------------------------------------------------
| Hero "Zufall"
|--------------------------------------------------------------------------
*/

.hero-message-card h1 span {
  color: #087EA4 !important;
}


/*
|--------------------------------------------------------------------------
| Checkmarks
|--------------------------------------------------------------------------
*/

.check,
.hero-list .check {
  background: #087EA4 !important;
  color: #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| Eyebrows / kleine Labels
|--------------------------------------------------------------------------
*/

.eyebrow,
.badge,
.pricing-mini-label,
.price-label {
  color: #087EA4 !important;
}

.eyebrow {
  background: #DDF3F8 !important;
}


/*
|--------------------------------------------------------------------------
| Kleine Akzent-Elemente
|--------------------------------------------------------------------------
*/

.about-slogan,
.health-text-card .badge,
.dentist-copy .badge {
  color: #087EA4 !important;
}


/*
|--------------------------------------------------------------------------
| Kontaktbutton
|--------------------------------------------------------------------------
*/

.contact-section .quote-card button[type="submit"] {
  background:
    linear-gradient(
      135deg,
      #087EA4,
      #0B96BB
    ) !important;
}

.contact-section .quote-card button[type="submit"]:hover {
  background:
    linear-gradient(
      135deg,
      #066783,
      #087EA4
    ) !important;
}


/*
|--------------------------------------------------------------------------
| Scroll-to-top
|--------------------------------------------------------------------------
*/

.scroll-top,
#scrollTopBtn {
  background: #087EA4 !important;
  color: #ffffff !important;
}

.scroll-top:hover,
#scrollTopBtn:hover {
  background: #066783 !important;
}

/* ===== KUKA OCEAN ACCENT V1 END ===== */


/* ===== KUKA PROOF OCEAN TEXT V1 START ===== */

/*
|--------------------------------------------------------------------------
| Proof-Bar Schrift in Ocean Blue
|--------------------------------------------------------------------------
*/

.proof-bar .proof-item strong {
  color: #087EA4 !important;
}

.proof-bar .proof-item small {
  color: #066783 !important;
}

/* ===== KUKA PROOF OCEAN TEXT V1 END ===== */

/* ===== KUKA TOPBAR CLEAN V1 START ===== */

/*
|--------------------------------------------------------------------------
| Dünne obere Topbar sauber und übersichtlich
|--------------------------------------------------------------------------
*/

.topbar {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: linear-gradient(90deg, #61cde7 0%, #46bbd7 100%) !important;
  min-height: 40px !important;
  padding: 6px 0 !important;
}

.topbar > * {
  position: relative !important;
  z-index: 2 !important;
}

/*
|--------------------------------------------------------------------------
| Blasen bewusst dezenter
|--------------------------------------------------------------------------
*/

.topbar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 3% 50%, rgba(255,255,255,.30) 0 10px, rgba(255,255,255,.08) 11px, transparent 14px),
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.20) 0 5px, rgba(255,255,255,.07) 6px, transparent 8px),
    radial-gradient(circle at 36% 72%, rgba(255,255,255,.16) 0 4px, rgba(255,255,255,.06) 5px, transparent 7px),
    radial-gradient(circle at 67% 24%, rgba(255,255,255,.16) 0 4px, rgba(255,255,255,.06) 5px, transparent 7px),
    radial-gradient(circle at 88% 62%, rgba(255,255,255,.22) 0 6px, rgba(255,255,255,.07) 7px, transparent 9px),
    radial-gradient(circle at 97% 22%, rgba(255,255,255,.28) 0 9px, rgba(255,255,255,.08) 10px, transparent 13px) !important;
  opacity: .85 !important;
}

.topbar::after {
  content: none !important;
}

/*
|--------------------------------------------------------------------------
| Layout: links Kontakt-Pills, rechts Text
|--------------------------------------------------------------------------
*/

.topbar .container,
.topbar .container-wide,
.topbar .topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  position: relative !important;
  z-index: 2 !important;
}

.topbar .topbar-left,
.topbar .topbar-contact,
.topbar .topbar-contact-list {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/*
|--------------------------------------------------------------------------
| Kontakt-Elemente
|--------------------------------------------------------------------------
*/

.topbar .topbar-contact-item,
.topbar .topbar-contact-link,
.topbar .topbar-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;

  padding: 6px 14px !important;
  min-height: 30px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.topbar .topbar-contact-item:hover,
.topbar .topbar-contact-link:hover,
.topbar .topbar-pill:hover {
  background: rgba(255,255,255,.28) !important;
}

/*
|--------------------------------------------------------------------------
| Schrift / Icons in Ocean Blue
|--------------------------------------------------------------------------
*/

.topbar,
.topbar a,
.topbar span,
.topbar strong,
.topbar p,
.topbar .topbar-contact-item,
.topbar .topbar-contact-value,
.topbar .topbar-desktop-text {
  color: #087EA4 !important;
}

.topbar .topbar-contact-item,
.topbar .topbar-contact-link,
.topbar .topbar-pill {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.topbar .topbar-contact-icon,
.topbar .topbar-contact-icon svg {
  color: #087EA4 !important;
  fill: currentColor !important;
}

.topbar .topbar-contact-icon svg path,
.topbar .topbar-contact-icon svg circle,
.topbar .topbar-contact-icon svg line,
.topbar .topbar-contact-icon svg polyline {
  stroke: #087EA4 !important;
}

/*
|--------------------------------------------------------------------------
| Rechter Text ruhiger
|--------------------------------------------------------------------------
*/

.topbar .topbar-desktop-text,
.topbar .topbar-right,
.topbar .topbar-note {
  color: #066783 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-align: right !important;
  margin-left: auto !important;
}

/*
|--------------------------------------------------------------------------
| Falls zu wenig Platz -> rechter Text etwas flexibler
|--------------------------------------------------------------------------
*/

.topbar .topbar-right,
.topbar .topbar-desktop-text {
  max-width: 42% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {
  .topbar .container,
  .topbar .container-wide,
  .topbar .topbar-inner {
    gap: 12px !important;
  }

  .topbar .topbar-contact-item,
  .topbar .topbar-contact-link,
  .topbar .topbar-pill {
    padding: 5px 11px !important;
    font-size: 13px !important;
  }

  .topbar .topbar-desktop-text,
  .topbar .topbar-right,
  .topbar .topbar-note {
    font-size: 13px !important;
    max-width: 36% !important;
  }
}

@media (max-width: 900px) {
  .topbar .topbar-desktop-text,
  .topbar .topbar-right,
  .topbar .topbar-note {
    display: none !important;
  }

  .topbar .topbar-left,
  .topbar .topbar-contact,
  .topbar .topbar-contact-list {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 740px) {
  .topbar {
    min-height: auto !important;
    padding: 6px 0 !important;
  }

  .topbar .topbar-contact-item,
  .topbar .topbar-contact-link,
  .topbar .topbar-pill {
    font-size: 12px !important;
    padding: 5px 10px !important;
  }

  .topbar::before {
    background:
      radial-gradient(circle at 4% 50%, rgba(255,255,255,.22) 0 7px, rgba(255,255,255,.06) 8px, transparent 10px),
      radial-gradient(circle at 92% 50%, rgba(255,255,255,.22) 0 7px, rgba(255,255,255,.06) 8px, transparent 10px) !important;
  }
}

/* ===== KUKA TOPBAR CLEAN V1 END ===== */

/* ===== KUKA TOPBAR NO PILLS V1 START ===== */

/*
|--------------------------------------------------------------------------
| Telefon / E-Mail / Adresse ohne Umrandung
|--------------------------------------------------------------------------
*/

.topbar .topbar-contact-item,
.topbar .topbar-contact-link,
.topbar .topbar-pill {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: 4px 8px !important;
  border-radius: 0 !important;
}

.topbar .topbar-contact-item:hover,
.topbar .topbar-contact-link:hover,
.topbar .topbar-pill:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
|--------------------------------------------------------------------------
| Etwas mehr Abstand zwischen den drei Angaben
|--------------------------------------------------------------------------
*/

.topbar .topbar-contact,
.topbar .topbar-contact-list,
.topbar .topbar-desktop-contact {
  gap: 18px !important;
}

/*
|--------------------------------------------------------------------------
| Icons klar sichtbar
|--------------------------------------------------------------------------
*/

.topbar .topbar-contact-icon {
  color: #087EA4 !important;
  opacity: .95 !important;
}

.topbar .topbar-contact-value {
  color: #087EA4 !important;
  font-weight: 800 !important;
}

/* ===== KUKA TOPBAR NO PILLS V1 END ===== */

/* ===== KUKA CLEANING DECO V2 START ===== */

/*
|--------------------------------------------------------------------------
| Alte Ente sicher aus
|--------------------------------------------------------------------------
*/

.offer-duck {
  display: none !important;
}


/*
|--------------------------------------------------------------------------
| Eimer + Fensterabzieher
|--------------------------------------------------------------------------
*/

.offer-cleaning-deco {
  position: absolute;

  right: 5%;
  bottom: 8px;

  width: 145px;
  height: 135px;

  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;

  animation: cleaningFloat 5s ease-in-out infinite;
}


.cleaning-bucket {
  position: relative;
  z-index: 2;

  width: 135px;
  height: auto;

  filter:
    drop-shadow(0 12px 12px rgba(11,47,103,.13));
}


/*
|--------------------------------------------------------------------------
| leichte Wasserlinie
|--------------------------------------------------------------------------
*/

.cleaning-ripple {
  position: absolute;

  left: 15px;
  right: 12px;
  bottom: 1px;

  height: 14px;

  border-top: 3px solid rgba(255,255,255,.55);
  border-radius: 50%;

  opacity: .75;
}


@keyframes cleaningFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-6px) rotate(1deg);
  }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

  .offer-cleaning-deco {
    right: 2%;
    width: 115px;
    height: 110px;
  }

  .cleaning-bucket {
    width: 110px;
  }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 740px) {

  .offer-cleaning-deco {
    right: 5px;
    bottom: 3px;

    width: 82px;
    height: 78px;

    opacity: .88;
  }

  .cleaning-bucket {
    width: 78px;
  }

  .cleaning-ripple {
    left: 8px;
    right: 6px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .offer-cleaning-deco {
    animation: none !important;
  }

}

/* ===== KUKA CLEANING DECO V2 END ===== */


/* ===== KUKA CONTACT SKYLINE V7 START ===== */

/*
|--------------------------------------------------------------------------
| Gütersloh Zeichnung
|--------------------------------------------------------------------------
*/

.contact-section::after {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    transform: translateX(-50%) !important;

    width: min(1500px, 96vw) !important;
    height: 500px !important;

    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201500%20520%22%3E%0A%0A%20%20%3C%21--%20%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%0A%20%20%20%20%20%20%20STADTZEICHNUNG%0A%20%20%20%20%20%20%20gr%C3%B6%C3%9Fer%20%2B%20h%C3%B6her%0A%20%20%20%20%20%20%20%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20--%3E%0A%20%20%3Cg%20id%3D%22skyline-city%22%0A%20%20%20%20%20transform%3D%22translate%28750%20250%29%20scale%281.22%29%20translate%28-750%20-250%29%20translate%280%20-58%29%22%0A%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20stroke%3D%22%23075f83%22%0A%20%20%20%20%20stroke-width%3D%224%22%0A%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20stroke-linejoin%3D%22round%22%3E%0A%0A%20%20%20%20%3C%21--%20lange%20Bodenlinie%20nur%20f%C3%BCr%20Geb%C3%A4ude%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M85%20350%20H1415%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20Altstadt%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M115%20350%20V292%20H202%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M115%20292%20L158%20255%20L202%20292%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20314%20H187%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M145%20292%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M174%20292%20V350%22%2F%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M218%20350%20V280%20H305%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M218%20280%20L261%20244%20L305%20280%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M237%20301%20H286%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M237%20322%20H286%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20markanter%20Kirchturm%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M338%20350%20V214%20H410%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M353%20214%20V165%20H395%20V214%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M374%20165%20V102%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M357%20149%20L374%20102%20L391%20149%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M356%20238%20H392%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M356%20267%20H392%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M356%20298%20H392%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22374%22%20cy%3D%22194%22%20r%3D%227%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20Innenstadt%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M438%20350%20V265%20H560%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M438%20265%20H560%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M458%20286%20H540%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M458%20309%20H540%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M458%20331%20H540%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20Wasserturm%20als%20dominantes%20Merkmal%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M628%20350%20V215%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M612%20215%20V180%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M600%20180%20Q628%20135%20656%20180%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M608%20180%20H648%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M606%20205%20H650%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M612%20235%20H644%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M612%20265%20H644%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M612%20295%20H644%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M612%20325%20H644%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20kleines%20Baum-%2FParkelement%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M690%20350%20V306%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M666%20307%20Q690%20265%20714%20307%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M658%20320%20Q690%20280%20722%20320%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20Theater%20%2F%20moderner%20Kulturbau%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M760%20350%20V260%20H885%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M760%20260%20L823%20222%20L885%20260%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M785%20284%20H860%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M785%20309%20H860%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M785%20333%20H860%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20Rathaus%20%2F%20City%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M925%20350%20V205%20H1000%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M943%20228%20H982%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M943%20258%20H982%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M943%20288%20H982%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M943%20318%20H982%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20gr%C3%B6%C3%9Fere%20moderne%20Bebauung%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1010%20350%20V252%20H1125%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1028%20276%20H1107%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1028%20301%20H1107%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1028%20327%20H1107%22%2F%3E%0A%0A%20%20%20%20%3C%21--%20Stadtblock%20rechts%20--%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1145%20350%20V282%20H1245%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1162%20303%20H1228%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1162%20326%20H1228%22%2F%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M1265%20350%20V292%20H1370%20V350%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1282%20312%20H1353%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1282%20333%20H1353%22%2F%3E%0A%0A%20%20%3C%2Fg%3E%0A%0A%0A%20%20%3C%21--%20%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%0A%20%20%20%20%20%20%20STADTNAME%0A%20%20%20%20%20%20%20BLEIBT%20UNTEN%0A%20%20%20%20%20%20%20%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20--%3E%0A%0A%20%20%3Ctext%0A%20%20%20%20x%3D%22750%22%0A%20%20%20%20y%3D%22430%22%0A%20%20%20%20text-anchor%3D%22middle%22%0A%20%20%20%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%0A%20%20%20%20font-size%3D%2262%22%0A%20%20%20%20font-weight%3D%22800%22%0A%20%20%20%20letter-spacing%3D%228%22%0A%20%20%20%20fill%3D%22%23075f83%22%3E%0A%20%20%20%20G%C3%9CTERSLOH%0A%20%20%3C%2Ftext%3E%0A%0A%20%20%3Ctext%0A%20%20%20%20x%3D%22750%22%0A%20%20%20%20y%3D%22470%22%0A%20%20%20%20text-anchor%3D%22middle%22%0A%20%20%20%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%0A%20%20%20%20font-size%3D%2220%22%0A%20%20%20%20font-weight%3D%22700%22%0A%20%20%20%20letter-spacing%3D%222%22%0A%20%20%20%20fill%3D%22%23075f83%22%0A%20%20%20%20opacity%3D%22.72%22%3E%0A%20%20%20%20SAUBER%20IN%20DER%20GANZEN%20STADT%0A%20%20%3C%2Ftext%3E%0A%0A%3C%2Fsvg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: contain !important;

    opacity: .18 !important;

    pointer-events: none !important;

    z-index: 1 !important;
}


/*
|--------------------------------------------------------------------------
| Blasen weiterhin darüber
|--------------------------------------------------------------------------
*/

.contact-bubbles {
    z-index: 2 !important;
}


/*
|--------------------------------------------------------------------------
| Kontaktinhalt im Vordergrund
|--------------------------------------------------------------------------
*/

.contact-section > .container,
.contact-section > .container-wide,
.contact-section .contact-grid {
    position: relative !important;
    z-index: 4 !important;
}


/*
|--------------------------------------------------------------------------
| Große Desktopansicht
|--------------------------------------------------------------------------
*/

@media (min-width: 1400px) {

    .contact-section::after {
        width: 1580px !important;
        height: 520px !important;
        bottom: 0 !important;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 740px) {

    .contact-section::after {
        width: 170% !important;
        height: 335px !important;

        left: 52% !important;
        bottom: 0 !important;

        opacity: .12 !important;
    }

}

/* ===== KUKA CONTACT SKYLINE V7 END ===== */

/* ===== KUKA CONTACT LAYOUT V8 START ===== */

/*
|--------------------------------------------------------------------------
| Gesamter Kontaktbereich
|--------------------------------------------------------------------------
*/

.contact-section {
  min-height: 790px !important;

  padding-top: 70px !important;
  padding-bottom: 185px !important;

  position: relative !important;
  overflow: hidden !important;
}


/*
|--------------------------------------------------------------------------
| Hauptgrid neu organisieren
|--------------------------------------------------------------------------
*/

.contact-section .contact-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(430px, .82fr) !important;

  gap: 70px !important;

  align-items: start !important;

  max-width: 1120px !important;
  margin: 0 auto !important;

  position: relative !important;
  z-index: 5 !important;
}


/*
|--------------------------------------------------------------------------
| Linke Seite
|--------------------------------------------------------------------------
*/

.contact-section .contact-copy {
  max-width: 570px !important;
}

.contact-section .contact-copy h2,
.contact-section .contact-copy h1 {
  max-width: 540px !important;

  font-size: clamp(4rem, 5.2vw, 5.8rem) !important;
  line-height: .91 !important;
  letter-spacing: -.055em !important;

  margin-bottom: 22px !important;
}

.contact-section .contact-copy > p {
  max-width: 500px !important;

  font-size: 1.03rem !important;
  line-height: 1.55 !important;

  margin-bottom: 28px !important;
}


/*
|--------------------------------------------------------------------------
| Kontaktmöglichkeiten 2x2 statt vier untereinander
|--------------------------------------------------------------------------
*/

.contact-section .contact-options {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;

  max-width: 560px !important;
}


.contact-section .contact-option {
  min-height: 74px !important;

  padding: 12px 14px !important;

  border-radius: 18px !important;

  display: flex !important;
  align-items: center !important;

  gap: 12px !important;

  background:
    rgba(255,255,255,.10) !important;

  border:
    1px solid rgba(255,255,255,.26) !important;

  backdrop-filter: blur(6px) !important;

  box-shadow:
    0 9px 24px rgba(7,74,109,.06) !important;
}


.contact-section .contact-option:hover {
  background:
    rgba(255,255,255,.18) !important;

  transform: translateY(-2px) !important;
}


.contact-section .contact-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

  border-radius: 13px !important;
}


/*
|--------------------------------------------------------------------------
| Adresse darf zweizeilig bleiben
|--------------------------------------------------------------------------
*/

.contact-section .contact-option span:not(.contact-icon),
.contact-section .contact-option strong {
  line-height: 1.28 !important;
}


/*
|--------------------------------------------------------------------------
| Formular rechts
|--------------------------------------------------------------------------
*/

.contact-section .quote-card {
  width: 100% !important;
  max-width: 470px !important;

  margin-left: auto !important;

  padding: 28px !important;

  border-radius: 26px !important;

  box-shadow:
    0 24px 60px rgba(7,74,109,.14) !important;
}


/*
|--------------------------------------------------------------------------
| Formularfelder etwas kompakter
|--------------------------------------------------------------------------
*/

.contact-section .quote-card .field {
  margin-bottom: 15px !important;
}

.contact-section .quote-card input,
.contact-section .quote-card select {
  min-height: 50px !important;
}

.contact-section .quote-card textarea {
  min-height: 118px !important;
}


/*
|--------------------------------------------------------------------------
| Skyline als eigener Hintergrundbereich UNTEN
|--------------------------------------------------------------------------
*/

.contact-section::after {
  width: min(1450px, 94vw) !important;
  height: 340px !important;

  bottom: -12px !important;

  background-position:
    center bottom !important;

  opacity: .15 !important;

  z-index: 1 !important;
}


/*
|--------------------------------------------------------------------------
| Blasen stärker an die Ränder
|--------------------------------------------------------------------------
*/

.contact-bubbles {
  z-index: 2 !important;
}

.contact-bubbles .bubble-1 {
  left: -35px !important;
  top: 4% !important;
}

.contact-bubbles .bubble-2 {
  left: 12% !important;
  top: 18% !important;
}

.contact-bubbles .bubble-3 {
  left: 5% !important;
  top: 55% !important;
}

.contact-bubbles .bubble-4 {
  left: 21% !important;
  top: 79% !important;
}

.contact-bubbles .bubble-5 {
  right: 8% !important;
  top: 4% !important;
}

.contact-bubbles .bubble-6 {
  right: 1% !important;
  top: 42% !important;
}

.contact-bubbles .bubble-7 {
  right: 3% !important;
  bottom: 1% !important;
}

.contact-bubbles .bubble-8 {
  right: 28% !important;
  bottom: 13% !important;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

  .contact-section {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .contact-section .contact-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(390px, .88fr) !important;

    gap: 38px !important;
  }

  .contact-section .contact-copy h2,
  .contact-section .contact-copy h1 {
    font-size: clamp(3.5rem, 6vw, 4.6rem) !important;
  }

}


/*
|--------------------------------------------------------------------------
| Mobile / kleine Tablets
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {

  .contact-section {
    padding-top: 48px !important;
    padding-bottom: 170px !important;
  }

  .contact-section .contact-grid {
    grid-template-columns: 1fr !important;

    gap: 34px !important;

    max-width: 620px !important;
  }

  .contact-section .contact-copy,
  .contact-section .quote-card {
    max-width: 100% !important;
  }

  .contact-section .quote-card {
    margin: 0 !important;
  }

  .contact-section .contact-options {
    max-width: 100% !important;
  }

  .contact-section::after {
    width: 150% !important;
    height: 280px !important;
    opacity: .11 !important;
  }

}


/*
|--------------------------------------------------------------------------
| Smartphone
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {

  .contact-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .contact-section .contact-copy h2,
  .contact-section .contact-copy h1 {
    font-size: clamp(3.2rem, 15vw, 4rem) !important;
  }

  .contact-section .contact-options {
    grid-template-columns: 1fr !important;
  }

  .contact-section .contact-option {
    min-height: 64px !important;
  }

  .contact-section .quote-card {
    padding: 20px !important;
  }

}

/* ===== KUKA CONTACT LAYOUT V8 END ===== */

/* ===== KUKA CONTACT LAYOUT V9 START ===== */

/* ---------------------------------------------------------
   Gesamtbereich
--------------------------------------------------------- */

.contact-section {
  min-height: 780px !important;
  padding: 58px 0 155px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------------
   Hauptaufteilung
--------------------------------------------------------- */

.contact-section .contact-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 440px !important;
  gap: 78px !important;

  max-width: 1080px !important;
  margin: 0 auto !important;

  align-items: start !important;
  position: relative !important;
  z-index: 5 !important;
}

/* ---------------------------------------------------------
   Linke Seite kompakter
--------------------------------------------------------- */

.contact-section .contact-copy {
  max-width: 520px !important;
  padding-top: 18px !important;
}

.contact-section .contact-copy h1,
.contact-section .contact-copy h2 {
  max-width: 500px !important;

  font-size: clamp(3.7rem, 4.7vw, 5.15rem) !important;
  line-height: .93 !important;
  letter-spacing: -.055em !important;

  margin-bottom: 20px !important;
}

.contact-section .contact-copy > p {
  max-width: 455px !important;
  margin-bottom: 26px !important;

  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* ---------------------------------------------------------
   Kontaktinfos wieder untereinander
--------------------------------------------------------- */

.contact-section .contact-options {
  display: flex !important;
  flex-direction: column !important;

  gap: 9px !important;

  width: 100% !important;
  max-width: 455px !important;
}

.contact-section .contact-option {
  width: 100% !important;
  min-height: 58px !important;

  padding: 9px 13px !important;

  border-radius: 16px !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  background: rgba(255,255,255,.105) !important;
  border: 1px solid rgba(255,255,255,.22) !important;

  backdrop-filter: blur(5px) !important;

  box-shadow: none !important;

  transition:
    background .18s ease,
    transform .18s ease !important;
}

.contact-section .contact-option:hover {
  background: rgba(255,255,255,.17) !important;
  transform: translateX(4px) !important;
}

.contact-section .contact-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;

  border-radius: 12px !important;
}

.contact-section .contact-option span:not(.contact-icon),
.contact-section .contact-option strong {
  line-height: 1.25 !important;
}

/* ---------------------------------------------------------
   Formular
--------------------------------------------------------- */

.contact-section .quote-card {
  width: 440px !important;
  max-width: 100% !important;

  margin: 0 !important;

  padding: 27px !important;

  border-radius: 26px !important;

  box-shadow:
    0 24px 55px rgba(6,75,105,.13) !important;
}

.contact-section .quote-card .field {
  margin-bottom: 14px !important;
}

.contact-section .quote-card input,
.contact-section .quote-card select {
  min-height: 50px !important;
}

.contact-section .quote-card textarea {
  min-height: 115px !important;
}

/* ---------------------------------------------------------
   Skyline stärker als Wasserzeichen
--------------------------------------------------------- */

.contact-section::after {
  width: min(1560px, 102vw) !important;
  height: 400px !important;

  left: 50% !important;
  bottom: -18px !important;

  transform: translateX(-50%) !important;

  background-position: center bottom !important;
  background-size: contain !important;

  opacity: .13 !important;

  z-index: 1 !important;
}

/* ---------------------------------------------------------
   Blasen nur außen
--------------------------------------------------------- */

.contact-bubbles .bubble-1 {
  left: -55px !important;
  top: 2% !important;
}

.contact-bubbles .bubble-2 {
  left: 10% !important;
  top: 15% !important;
}

.contact-bubbles .bubble-3 {
  left: 4% !important;
  top: 50% !important;
}

.contact-bubbles .bubble-4 {
  left: 18% !important;
  top: 82% !important;
}

.contact-bubbles .bubble-5 {
  right: 8% !important;
  top: 1% !important;
}

.contact-bubbles .bubble-6 {
  right: 1% !important;
  top: 42% !important;
}

.contact-bubbles .bubble-7 {
  right: 2% !important;
  bottom: 0 !important;
}

.contact-bubbles .bubble-8 {
  right: 27% !important;
  bottom: 12% !important;
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .contact-section {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .contact-section .contact-grid {
    grid-template-columns: minmax(0,1fr) 400px !important;
    gap: 40px !important;
  }

  .contact-section .contact-copy h1,
  .contact-section .contact-copy h2 {
    font-size: clamp(3.4rem, 5vw, 4.4rem) !important;
  }
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 820px) {

  .contact-section {
    padding: 44px 24px 150px !important;
  }

  .contact-section .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    max-width: 610px !important;
  }

  .contact-section .contact-copy,
  .contact-section .contact-options,
  .contact-section .quote-card {
    max-width: 100% !important;
    width: 100% !important;
  }

  .contact-section::after {
    width: 150% !important;
    height: 300px !important;
    opacity: .10 !important;
  }
}

@media (max-width: 560px) {

  .contact-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .contact-section .contact-copy h1,
  .contact-section .contact-copy h2 {
    font-size: clamp(3.1rem, 14vw, 3.9rem) !important;
  }

  .contact-section .quote-card {
    padding: 20px !important;
  }
}

/* ===== KUKA CONTACT LAYOUT V9 END ===== */



/* =========================================================
   KUKA – Persönliches Statement / Besforta Kuka
   ========================================================= */

.owner-statement {
  padding: 90px 0;
  background: #f7f9f8;
}

.owner-statement-wrap {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  gap: 70px;
  align-items: center;
}

.owner-photo-wrap {
  position: relative;
}

.owner-photo-placeholder {
  position: relative;
  min-height: 520px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(145deg, #eef3f0 0%, #dfe8e3 100%);
  border: 1px solid rgba(20, 60, 45, 0.08);
  box-shadow: 0 24px 60px rgba(17, 45, 34, 0.10);
}

.owner-photo-placeholder::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  right: -70px;
  bottom: -70px;
  background: rgba(43, 122, 83, 0.08);
}

.owner-photo-placeholder-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #708078;
  text-align: center;
  padding: 30px;
}

.owner-photo-placeholder-inner svg {
  width: 82px;
  height: 82px;
  fill: currentColor;
  opacity: 0.35;
}

.owner-photo-placeholder-inner span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.owner-statement-content {
  max-width: 700px;
}

.owner-eyebrow {
  margin-bottom: 18px;
  color: #287a53;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.owner-statement-content blockquote {
  position: relative;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #15231d;
}

.owner-statement-content p {
  margin: 0 0 16px;
  max-width: 650px;
  color: #53615b;
  font-size: 17px;
  line-height: 1.8;
}

.owner-signature {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.signature-placeholder {
  margin-bottom: 8px;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 38px;
  line-height: 1;
  color: #287a53;
  transform: rotate(-3deg);
}

.owner-signature strong {
  margin-top: 7px;
  color: #17251f;
  font-size: 16px;
  font-weight: 800;
}

.owner-signature span {
  margin-top: 3px;
  color: #7a8781;
  font-size: 13px;
}

@media (max-width: 900px) {
  .owner-statement {
    padding: 65px 0;
  }

  .owner-statement-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .owner-photo-placeholder {
    min-height: 440px;
    max-width: 620px;
  }
}

@media (max-width: 600px) {
  .owner-statement {
    padding: 50px 0;
  }

  .owner-statement-wrap {
    gap: 32px;
  }

  .owner-photo-placeholder {
    min-height: 390px;
    border-radius: 20px;
  }

  .owner-statement-content blockquote {
    font-size: 29px;
  }

  .owner-statement-content p {
    font-size: 16px;
    line-height: 1.7;
  }

  .signature-placeholder {
    font-size: 34px;
  }
}

/* =========================================================
   MOBILE FIX – Nachhaltigkeitsbild vollständig anzeigen
   ========================================================= */
@media (max-width: 740px) {

  #nachhaltig img,
  .health-section img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }

  #nachhaltig picture,
  .health-section picture {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  #nachhaltig .container,
  #nachhaltig .container-wide {
    overflow: visible !important;
  }
}

/* =========================================================
   MOBILE FIX – Nachhaltigkeitsbild natürliche volle Höhe
   ========================================================= */
@media (max-width: 740px) {

  /* Bild komplett und proportional */
  #nachhaltig img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  /* Picture darf keine feste Höhe behalten */
  #nachhaltig picture {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: block !important;
    overflow: hidden !important;
  }

  /* Direkter Bild-Container muss sich der Bildhöhe anpassen */
  #nachhaltig *:has(> img),
  #nachhaltig *:has(> picture) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
}

/* =========================================================
   DETAIL-BEREICH – Bilder breiter
   ========================================================= */
@media (min-width: 1000px) {

  /* Gesamten Bereich mit Text + Galerie besser verteilen */
  #ablauf .container-wide:has(.detail-gallery) {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.75fr) minmax(760px, 1.55fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  /* Galerie nimmt mehr Platz ein */
  #ablauf .detail-gallery {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* einzelne Bildkarten */
  #ablauf .detail-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  #ablauf .detail-card img {
    width: 100% !important;
    height: 370px !important;
    object-fit: cover !important;
  }
}

/* =========================================================
   DETAIL-BEREICH – ein großes Bodenarten-Bild
   ========================================================= */

#ablauf .detail-gallery.detail-gallery-single {
  display: block !important;
  width: 100% !important;
}

#ablauf .detail-gallery-single .floor-types-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 45px rgba(11, 40, 75, 0.10);
}

@media (min-width: 1000px) {
  #ablauf .container-wide:has(.detail-gallery-single) {
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.7fr) !important;
    gap: 22px !important;
  }
}

@media (max-width: 999px) {
  #ablauf .detail-gallery-single .floor-types-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 18px !important;
  }
}

/* =========================================================
   FINAL FIX – Bodenarten-Banner volle Breite
   ========================================================= */

@media (min-width: 1000px) {

  .detail-section .container-wide {
    display: grid !important;
    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  .detail-section .detail-gallery-single {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .detail-section .detail-gallery-single .floor-types-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 24px !important;
  }
}


/* Tablet */
@media (min-width: 741px) and (max-width: 999px) {

  .detail-section .container-wide {
    display: block !important;
  }

  .detail-section .detail-gallery-single {
    width: 100% !important;
    margin-top: 28px !important;
  }

  .detail-section .floor-types-image {
    width: 100% !important;
    height: auto !important;
  }
}


/* Mobile */
@media (max-width: 740px) {

  .detail-section .container-wide {
    display: block !important;
  }

  .detail-section .detail-gallery-single {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
  }

  .detail-section .floor-types-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 18px !important;
  }
}

/* =========================================================
   FLOOR CARE – 5 EINZELKARTEN
   ========================================================= */

.detail-section .floor-care-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

.floor-care-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(9, 38, 70, .10);
  min-width: 0;
}

.floor-care-card img {
  width: 100% !important;
  height: 315px !important;
  object-fit: cover !important;
  display: block !important;
}

.floor-care-info {
  padding: 16px 12px 18px;
  text-align: center;
  background: #fff;
}

.floor-care-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  border: 2px solid #0796c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0796c8;
  font-size: 22px;
  font-weight: 700;
}

.floor-care-info strong {
  display: block;
  color: #0796c8;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
}

.floor-care-info span {
  display: block;
  margin-top: 7px;
  color: #456176;
  font-size: 13px;
  line-height: 1.4;
}

@media (min-width: 1000px) {
  .detail-section .container-wide {
    display: grid !important;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
  }
}

@media (max-width: 1150px) {
  .detail-section .floor-care-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 800px) {
  .detail-section .container-wide {
    display: block !important;
  }

  .detail-section .floor-care-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 28px;
  }

  .floor-care-card img {
    height: 260px !important;
  }
}

@media (max-width: 520px) {
  .detail-section .floor-care-grid {
    grid-template-columns: 1fr !important;
  }

  .floor-care-card img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
  }
}

/* =========================================================
   FINAL – 5 BODENARTEN
   PNG enthält bereits Bild + Icon + Text
   ========================================================= */

.detail-section .floor-care-final {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    align-items: start !important;
}

.detail-section .floor-care-final .floor-care-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.detail-section .floor-care-final .floor-care-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
}

/* Desktop: Text links + 5 Bilder rechts */
@media (min-width: 1100px) {

    .detail-section .detail-grid {
        display: grid !important;
        grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: center !important;
    }

    .detail-section .floor-care-final {
        min-width: 0 !important;
    }
}

/* Tablet */
@media (min-width: 741px) and (max-width: 1099px) {

    .detail-section .detail-grid {
        grid-template-columns: 1fr !important;
    }

    .detail-section .floor-care-final {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

/* Smartphone */
@media (max-width: 740px) {

    .detail-section .detail-grid {
        display: block !important;
    }

    .detail-section .floor-care-final {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 28px !important;
    }

    .detail-section .floor-care-final .floor-care-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 5px) !important;
        justify-self: center !important;
    }
}


/* =========================================================
   FLOOR CARDS – alle exakt gleich hoch
   ========================================================= */

.detail-section .floor-care-final {
  align-items: stretch !important;
}

.detail-section .floor-care-final .floor-care-card {
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
}

.detail-section .floor-care-final .floor-care-card img {
  width: 100% !important;
  height: 100% !important;
  max-height: 520px !important;
  object-fit: contain !important;
  object-position: top center !important;
}

/* Desktop */
@media (min-width: 1100px) {
  .detail-section .floor-care-final .floor-care-card {
    height: 520px !important;
  }

  .detail-section .floor-care-final .floor-care-card img {
    height: 520px !important;
  }
}

/* Tablet */
@media (min-width: 741px) and (max-width: 1099px) {
  .detail-section .floor-care-final .floor-care-card {
    height: 500px !important;
  }

  .detail-section .floor-care-final .floor-care-card img {
    height: 500px !important;
  }
}

/* Mobile */
@media (max-width: 740px) {
  .detail-section .floor-care-final .floor-care-card {
    height: auto !important;
  }

  .detail-section .floor-care-final .floor-care-card img {
    height: auto !important;
    max-height: none !important;
  }
}

/* Eingangsbereiche exakt mit den anderen Karten ausrichten */
@media (min-width: 741px) {
  .detail-section .floor-care-final .floor-care-card:last-child {
    transform: translateY(-8px) !important;
  }
}

/* =========================================================
   PARKETT – gleiche sichtbare Größe wie die anderen Karten
   ========================================================= */

@media (min-width: 741px) {

  .detail-section .floor-care-final .floor-care-card:first-child {
    height: 520px !important;
    overflow: hidden !important;
  }

  .detail-section .floor-care-final .floor-care-card:first-child img {
    width: 100% !important;
    height: 520px !important;
    max-width: none !important;
    max-height: none !important;

    /* wichtig: füllt die schmale Karte wie die anderen */
    object-fit: cover !important;
    object-position: center top !important;

    margin: 0 !important;
    transform: none !important;
  }
}