html { scroll-behavior: smooth; scroll-padding-top: 105px; }
.site-header a, .hero-action { transition: background .2s, color .2s; }
.site-header a:hover { color: #2576a8; }
.hero-action:hover { background: #77bae3; }
.site-header a:focus-visible, .hero-action:focus-visible, .product-selector button:focus-visible { outline: 2px solid #053146; outline-offset: 5px; }
.hero-visual { mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.04) 6%, rgba(0,0,0,.16) 14%, rgba(0,0,0,.38) 23%, rgba(0,0,0,.68) 32%, rgba(0,0,0,.9) 41%, #000 49%, #000 58%, rgba(0,0,0,.94) 66%, rgba(0,0,0,.75) 75%, rgba(0,0,0,.45) 84%, rgba(0,0,0,.16) 93%, transparent 100%); }
.product-selector { isolation: isolate; position: fixed !important; left: 50% !important; bottom: env(safe-area-inset-bottom, 0px) !important; transform: translateX(-50%); width: min(672px, calc(100vw - 32px)) !important; z-index: 50 !important; }
#product-selector-slot { min-height: 0 !important; margin-top: 0 !important; }
.product-selector.is-floating { position: fixed !important; left: 50% !important; bottom: env(safe-area-inset-bottom, 0px) !important; transform: translateX(-50%); width: min(672px, calc(100vw - 32px)) !important; z-index: 50 !important; }
.product-selector.is-inactive { background: #eef2f4 !important; }
.product-selector.is-inactive .product-controls { opacity: .42; }
.product-selector button { -webkit-tap-highlight-color: transparent; }
.product-selector button:disabled { cursor: not-allowed; }
.product-group { position: relative; }
.product-variants { display: none !important; position: absolute; bottom: calc(100% + 26px); left: 0; min-width: 180px; padding: 8px; background: white; border: 1px solid #d7e6ef; border-radius: 18px; box-shadow: 0 12px 35px #05314624; }
.product-group:last-child .product-variants { left: auto; right: 0; }
.product-group.is-open .product-variants { display: grid !important; gap: 4px; }
.product-choice:hover, .product-choice[aria-pressed="true"] { background: #e4f3fc !important; }
.product-group.is-selected > button { box-shadow: none; }
.product-trigger { position: relative; }
.product-region { scroll-margin-top: 100px; }
.product-visual { transition: opacity .2s; }
@media (max-width: 767px) {
  .site-header { row-gap: 12px; }
  .hero-visual { mask-image: linear-gradient(to bottom, transparent, #000 45%); }
  .product-selector.is-floating { bottom: env(safe-area-inset-bottom, 0px) !important; }
  .product-variants { bottom: calc(100% + 20px); }
  .product-controls { column-gap: 8px !important; }
  .product-group > button { flex-direction: column; row-gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

#start h1[data-animated] { white-space: normal; }
.hero-title-line { display: block; }

.product-selector { border-radius: 24px 24px 0 0 !important; }

.site-header { position: sticky !important; top: 0; }
/* Additional homepage sections. */
#produkte :is(button, a) { transition: transform .35s ease, opacity .35s ease; }
#produkte :is(button, a):hover, #produkte :is(button, a):focus-visible { transform: scale(1.15); }
#produkte :is(button, a):focus-visible { outline: 2px solid #53a8db; outline-offset: 6px; }
#kontakt label { display: flex; align-items: center; gap: 24px; font-size: 16px; }
#kontakt input { flex: 1; min-width: 0; border: 0; background: #fff; padding: 12px; border-radius: 4px; color: #053146; }
#kontakt input:focus-visible { outline: 2px solid #53a8db; }
@media (max-width: 767px) {
  main > section:nth-child(2) > div { grid-template-columns: 1fr !important; row-gap: 28px; }
  #produkte > div > div:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 20px; }
  #anwendungen > div > div:last-child { aspect-ratio: 1.25 !important; }
  #anwendungen > div > div:last-child > div { flex-wrap: wrap; justify-content: center !important; gap: 16px !important; }
  #referenzen > div:nth-child(2) { grid-template-columns: 1fr !important; gap: 12px; }
  #kontakt > div { width: 80vw !important; }
  #kontakt label { align-items: stretch; flex-direction: column; gap: 10px; }
}
@media (max-width: 767px) {
  .site-header nav { flex-wrap: wrap; justify-content: center !important; gap: 12px !important; }
  .site-header nav a { font-size: 14px !important; }
  .site-header nav > div { margin-left: 0 !important; }
  #product-selector [class^="swatch-"] { width: 32px !important; height: 32px !important; }
  #product-selector [class^="product-swatches"] { column-gap: 4px !important; height: 32px !important; }
  #product-selector .product-controls { column-gap: 4px !important; }
  #product-selector > p:first-child { font-size: 15px !important; }
}

@media (max-width: 767px) { #produkte > div > div:first-child { width: 100% !important; } }
#benefit-panels { display: grid; gap: 50px; }
#benefit-panels.is-scroll-animated { gap: 0; }
#benefit-panels.is-scroll-animated > div { grid-area: 1 / 1; }
#sonte-vorteile { min-height: 100vh !important; box-sizing: border-box; }
@media (max-width: 767px) {
  #sonte-vorteile p { white-space: normal !important; }
}

#sonte-vorteile h2 { white-space: normal; }
.benefit-title-line { display: block; }

/* One aligned row of individually interactive colour dots. */
#product-selector .product-choice { background: transparent !important; }
#product-selector .product-choice > div { transition: transform .22s ease; }
#product-selector .product-choice:hover > div,
#product-selector .product-choice:focus-visible > div { transform: scale(1.12); }
@media (max-width: 767px) {
 #product-selector .product-choice > div { width: 32px !important; height: 32px !important; }
 #product-selector .product-controls { column-gap: 4px !important; }
}

#produkte { overflow-x: clip; }
#produkte .scroll-entering { transition: none; }

/* Wide horizontal hero toolbar, matching the supplied reference. */
#product-selector.product-selector {
 width: min(1600px, calc(100vw - 56px)) !important;
 display: grid; grid-template-columns: minmax(280px, 1fr) auto;
 grid-template-rows: auto auto; column-gap: 40px; row-gap: 8px;
 align-items: center; padding: clamp(28px, 4.5vw, 72px) clamp(28px, 4.5vw, 72px) !important;
 border-radius: 30px 30px 0 0 !important;
 background: #f8f8f8 !important;
}
#product-selector > p:first-child {
 grid-column: 1; grid-row: 1; text-align: left !important;
 margin: 0 !important; color: #53a8db !important;
 font-size: clamp(20px, 2.8vw, 44px) !important; font-weight: 700;
}
#product-status {
 grid-column: 1; grid-row: 2; text-align: left !important;
 margin: 0 !important; font-size: clamp(16px, 2.1vw, 34px) !important;
 color: #111 !important; line-height: 1.3 !important;
}
#product-selector .product-controls {
 grid-column: 2; grid-row: 1 / 3; display: flex !important;
 flex-wrap: nowrap; column-gap: clamp(10px, 1.3vw, 22px) !important; align-items: center;
}
#product-selector .product-choice { padding: 4px !important; flex-shrink: 0; }
#product-selector .product-choice > div {
 width: clamp(44px, 5.4vw, 90px) !important; height: clamp(44px, 5.4vw, 90px) !important; border: 0 !important;
}
@media (max-width: 900px) {
 #product-selector.product-selector { padding: 24px !important; column-gap: 20px; grid-template-columns: minmax(0, 1fr) auto; }
 #product-selector .product-controls { column-gap: 6px !important; }
 #product-selector .product-choice > div { width: 40px !important; height: 40px !important; }
}
@media (max-width: 600px) {
 #product-selector.product-selector { width: calc(100vw - 24px) !important; padding: 20px !important; grid-template-columns: 1fr; row-gap: 6px; }
 #product-selector .product-controls { grid-column: 1; grid-row: 3; justify-content: space-between !important; margin-top: 12px; }
 #product-selector > p:first-child { font-size: 20px !important; }
 #product-selector .product-choice > div { width: 36px !important; height: 36px !important; }
}

#start { height: calc(100svh - var(--sonte-header-height, 90px)) !important; min-height: calc(100svh - var(--sonte-header-height, 90px)) !important; }

/* Reduce the desktop toolbar and its contents by 25%. */
@media (min-width: 901px) {
 #product-selector.product-selector { width: min(1020px, calc(63.75vw - 35.7px)) !important; padding: clamp(17.85px, 2.86875vw, 45.9px) !important; column-gap: 25.5px; grid-template-columns: minmax(0, 1fr) auto; }
 #product-selector > p:first-child { font-size: clamp(12.75px, 1.785vw, 28.05px) !important; }
 #product-status { font-size: clamp(10.2px, 1.33875vw, 21.675px) !important; }
 #product-selector .product-controls { column-gap: clamp(6.375px, .82875vw, 14.025px) !important; }
 #product-selector .product-choice > div { width: clamp(28.05px, 3.4425vw, 57.375px) !important; height: clamp(28.05px, 3.4425vw, 57.375px) !important; }
 #product-selector .product-choice { padding: 2.55px !important; }
}
@media (max-width: 600px) {
 #product-selector .product-choice { padding: 2px !important; }
 #product-selector .product-choice > div { width: 32px !important; height: 32px !important; }
 #product-selector .product-controls { column-gap: 2px !important; }
}

.site-header nav a {
 transition: transform .22s ease, color .22s ease;
}
.site-header nav a:hover,
.site-header nav a:focus-visible {
 transform: translateY(-3px);
 color: #53a8db !important;
}

@media (max-width: 900px) {
 #product-selector.product-selector { width: calc(85vw - 20.4px) !important; padding: 17px !important; column-gap: 17px; }
 #product-selector > p:first-child { font-size: 17px !important; }
 #product-status { font-size: 13.6px !important; }
 #product-selector .product-choice { padding: 1.7px !important; }
 #product-selector .product-choice > div { width: 27.2px !important; height: 27.2px !important; }
}

#hero-sidebars { position: absolute; right: 0; top: 47%; width: min(620px, 39vw); z-index: 3; pointer-events: none; }
#hero-sidebars > div { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px 32px 28px 20px; background: #f8f8f8; border-radius: 20px 0 0 20px; visibility: hidden; opacity: 0; }
#hero-sidebars > div > img { height: 245px !important; margin-top: -65px; margin-bottom: -10px; }
#hero-sidebars h3 { color: #53a8db; font-size: clamp(18px, 1.5vw, 26px); font-weight: 700; margin: 0 0 14px; line-height: 1.25; }
#hero-sidebars p { color: #053146; font-size: clamp(16px, 1.25vw, 22px); line-height: 1.35; margin: 0; }
@media (max-width: 1100px) { #hero-sidebars { top: 48%; width: 40vw; } #hero-sidebars > div { grid-template-columns: 75px minmax(0, 1fr); gap: 12px; padding: 20px; } #hero-sidebars > div > img { height: 190px !important; margin-top: -40px; } }
@media (max-width: 767px) { #hero-sidebars { display: none; } }
@media (prefers-reduced-motion: reduce) { #hero-sidebars { display: none; } }

/* Large product artwork extends beyond the sidebar card. */
#hero-sidebars > div {
 grid-template-columns: 155px minmax(0, 1fr);
 column-gap: 22px; min-height: 220px;
 padding: 30px 32px 30px 20px; overflow: visible;
}
#hero-sidebars > div > img {
 width: 190px !important; max-width: none !important;
 height: 340px !important; justify-self: center; align-self: center;
 margin: -90px 0 -30px !important; object-fit: contain;
}
@media (max-width: 1100px) {
 #hero-sidebars > div { grid-template-columns: 105px minmax(0, 1fr); column-gap: 16px; min-height: 200px; padding: 24px 22px 24px 14px; }
 #hero-sidebars > div > img { width: 140px !important; height: 280px !important; margin: -70px 0 -20px !important; }
}

#hero-sidebars { top: calc(50% - 140px); }

/* Compact sidebar cards and lower the product within each card. */
#hero-sidebars { width: min(465px, 29.25vw); top: calc(50% - 105px); }
#hero-sidebars > div {
 grid-template-columns: 116.25px minmax(0, 1fr); column-gap: 16.5px;
 min-height: 165px; padding: 22.5px 24px 22.5px 15px;
 border-radius: 15px 0 0 15px;
}
#hero-sidebars > div > img {
 width: 142.5px !important; height: 255px !important;
 margin: -67.5px 0 -22.5px !important; transform: translateY(6px);
}
#hero-sidebars h3 { font-size: clamp(13.5px, 1.125vw, 19.5px); margin-bottom: 10.5px; }
#hero-sidebars p { font-size: clamp(12px, .9375vw, 16.5px); }
@media (max-width: 1100px) {
 #hero-sidebars { width: 30vw; }
 #hero-sidebars > div { grid-template-columns: 78.75px minmax(0, 1fr); column-gap: 12px; min-height: 150px; padding: 18px 16.5px 18px 10.5px; }
 #hero-sidebars > div > img { width: 105px !important; height: 210px !important; margin: -52.5px 0 -15px !important; }
}

.hero-visual { height: 100vh !important; }

/* Sidebar slider: 15% larger, 190px lower. */
#hero-sidebars { width: min(534.75px, 33.6375vw); top: calc(50% + 85px); }
#hero-sidebars > div { grid-template-columns: 133.6875px minmax(0, 1fr); column-gap: 18.975px; min-height: 189.75px; padding: 25.875px 27.6px 25.875px 17.25px; border-radius: 17.25px 0 0 17.25px; }
#hero-sidebars > div > img { width: 163.875px !important; height: 293.25px !important; margin: -77.625px 0 -25.875px !important; }
#hero-sidebars h3 { font-size: clamp(15.525px, 1.29375vw, 22.425px); margin-bottom: 12.075px; }
#hero-sidebars p { font-size: clamp(13.8px, 1.078125vw, 18.975px); }
@media (max-width: 1100px) {
 #hero-sidebars { width: 34.5vw; }
 #hero-sidebars > div { grid-template-columns: 90.5625px minmax(0, 1fr); column-gap: 13.8px; min-height: 172.5px; padding: 20.7px 18.975px 20.7px 12.075px; }
 #hero-sidebars > div > img { width: 120.75px !important; height: 241.5px !important; margin: -60.375px 0 -17.25px !important; }
}

.site-header > a img { transition: transform .25s ease; transform-origin: center; }
.site-header > a:hover img, .site-header > a:focus-visible img { transform: scale(1.1); }

/* Hero dock travels with its section; application dock fades in at mid-viewport. */
#product-selector.product-selector { position: absolute !important; bottom: 0 !important; }
#product-selector.product-selector.is-floating { position: fixed !important; bottom: env(safe-area-inset-bottom, 0px) !important; }
#product-selector .product-choice[hidden] { display: none !important; }
#product-selector.application-toolbar { width: min(1020px, calc(63.75vw - 35.7px)) !important; }
#product-selector.application-toolbar > p:first-child { font-size: clamp(17px, 1.55vw, 24px) !important; }
#product-selector.application-toolbar #product-status { font-size: clamp(14px, 1.1vw, 18px) !important; }
@media (max-width: 900px) { #product-selector.application-toolbar { width: calc(85vw - 20.4px) !important; } }
@media (max-width: 600px) { #product-selector.application-toolbar { width: calc(85vw - 20.4px) !important; } }
#anwendungen > div > div:last-child > div { display: none; }
.section-title-line { display: block; }

/* Contact field follows the toolbar width and status typography. */
#kontakt > div { width: min(1020px, calc(63.75vw - 35.7px)) !important; }
#kontakt label {
 display: flex; flex-direction: row !important; align-items: center !important;
 gap: 24px; font-family: inherit; font-weight: 400;
 font-size: clamp(10.2px, 1.33875vw, 21.675px) !important;
 color: #111 !important; line-height: 1.3 !important;
}
#kontakt label > span { flex-shrink: 0; white-space: nowrap; }
#kontakt input { flex: 1; min-width: 0; width: 100%; }
@media (max-width: 900px) {
 #kontakt > div { width: calc(85vw - 20.4px) !important; }
 #kontakt label { font-size: 13.6px !important; gap: 16px; }
}
@media (max-width: 600px) {
 #kontakt > div > :last-child { padding-left: 16px !important; padding-right: 16px !important; }
 #kontakt label { gap: 12px; }
}

#site-footer a { transition: opacity .2s ease, transform .2s ease; }
#site-footer a:hover { opacity: .8; transform: translateY(-2px); }
#site-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media (max-width: 1000px) { #site-footer > div > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) {
 #site-footer > div > div:first-child { grid-template-columns: 1fr !important; }
 #site-footer > div > div:last-child { gap: 20px; flex-wrap: wrap; }
}

/* Field exporter renders label and input as siblings inside .p-field. */
#kontakt > div > :last-child { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 20px; align-items: center; }
#kontakt .p-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; }
#kontakt .p-field .p-label { margin: 0 !important; white-space: nowrap; }
#kontakt .p-field .p-input { margin: 0 !important; width: 100%; min-width: 0; box-sizing: border-box; }
#kontakt > div > :last-child > svg { width: 24px !important; height: 24px !important; color: #053146; }
@media (max-width: 600px) {
 #kontakt > div > :last-child { gap: 12px; }
 #kontakt .p-field { gap: 12px; }
}

/* Responsive audit: prevent animation/hover conflicts and reserve content space. */
.site-header.header-entering a, .site-header.header-entering svg { transition: none !important; }
#product-selector { backdrop-filter: none !important; box-shadow: 0 8px 28px #05314614 !important; }
#product-status { min-height: 1.3em; }
#hero-sidebars { top: min(calc(50% + 85px), calc(100% - 260px)); }
#hero-sidebars > div { will-change: transform, opacity; }
#sonte-vorteile > div { min-width: 0; }
#benefit-panels p { white-space: normal !important; }
#produkte > div > div:first-child { padding-top: 55px; padding-bottom: 0; }
#showcase-product-title { min-height: 1.3em; }
#showcase-product-description { min-height: 2.6em; color: #53a8db; }
#site-footer a { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
 .site-header { grid-template-columns: 1fr auto 1fr !important; column-gap: 18px !important; }
 .site-header nav { gap: 12px !important; flex-wrap: wrap; }
 .site-header nav a { font-size: 15px !important; }
 .site-header > a img { width: 175px !important; }
 .site-header nav > div { margin-left: 0 !important; }
 #hero-sidebars { width: 39vw; }
 #hero-sidebars > div { grid-template-columns: 84px minmax(0, 1fr); }
 #start h1 { font-size: clamp(21.6px, 2.916vw, 32.4px) !important; }
}
@media (max-width: 900px) {
 #sonte-vorteile > div { grid-template-columns: 1fr !important; row-gap: 36px !important; }
 #benefit-panels { gap: 36px; }
 #product-selector.product-selector { width: calc(100vw - 40px) !important; }
 #product-selector .product-controls { gap: 5px !important; }
 #product-selector .product-choice > div { width: 32px !important; height: 32px !important; }
 #kontakt > div { width: calc(100vw - 40px) !important; }
 #product-selector.application-toolbar { width: calc(100vw - 40px) !important; }
}
@media (max-width: 767px) {
 .site-header { grid-template-columns: 1fr !important; padding-top: 16px !important; padding-bottom: 16px !important; row-gap: 8px !important; }
 .site-header > a img { width: 160px !important; }
 .site-header nav { gap: 10px !important; }
 .site-header nav a { font-size: 13px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
 .site-header nav > div { gap: 10px !important; }
 .site-header nav svg { width: 18px !important; height: 18px !important; }
 #start { height: auto !important; min-height: calc(100svh - var(--sonte-header-height, 150px)) !important; padding: 28px 0 170px !important; align-items: flex-start !important; }
 #start > div:first-of-type { width: calc(100% - 40px) !important; }
 #start h1 { width: 100% !important; font-size: clamp(17.28px, 4.428vw, 27px) !important; line-height: 1.1 !important; letter-spacing: -.04em !important; text-wrap: initial !important; }
 #start h1 + p { font-size: 20px !important; margin-top: 20px !important; }
 .hero-action { margin-top: 24px !important; padding: 16px 22px !important; font-size: 16px !important; }
 .hero-visual { opacity: .35; object-position: center; mask-image: linear-gradient(to bottom, transparent 0%, #000 65%); }
 #product-selector.product-selector { width: calc(100% - 32px) !important; padding: 18px !important; grid-template-columns: 1fr !important; row-gap: 6px; }
 #product-selector .product-controls { grid-column: 1; grid-row: 3; margin-top: 10px; justify-content: space-between !important; }
 #product-selector > p:first-child { font-size: 18px !important; }
 #product-status { font-size: 14px !important; }
 #product-selector .product-choice { padding: 3px !important; }
 #product-selector .product-choice > div { width: 30px !important; height: 30px !important; }
 #product-selector.application-toolbar { width: calc(100vw - 32px) !important; }
 #kontakt > div { width: calc(100vw - 32px) !important; }
 #produkte > div { width: calc(100% - 48px) !important; }
 #produkte > div > div:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 70px !important; padding-top: 30px; padding-bottom: 0; }
 #produkte :is(button, a) img { height: clamp(150px, 40vw, 240px) !important; }
 #showcase-product-title { font-size: 22px !important; margin-top: 32px !important; }
 #showcase-product-description { font-size: 18px !important; }
 #site-footer > div { width: calc(100% - 40px) !important; }
 #kontakt { padding-top: 64px !important; padding-bottom: 80px !important; }
}
@media (max-width: 360px) {
 #product-selector.product-selector { padding: 14px !important; }
 #product-selector .product-controls { gap: 2px !important; }
 #product-selector .product-choice { padding: 2px !important; }
 #product-selector .product-choice > div { width: 27px !important; height: 27px !important; }
 #kontakt .p-field { gap: 8px; }
 #kontakt .p-label { font-size: 12px !important; }
 #kontakt > div > :last-child { padding-left: 12px !important; padding-right: 12px !important; gap: 8px; }
}
@media (hover: none) {
 #produkte :is(button, a):is(:hover, :focus-visible) { transform: none; }
 #product-selector .product-choice:hover > div { transform: none; }
 .site-header nav a:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
 .site-header a, .site-header img, .hero-action, #produkte :is(button, a), #product-selector .product-choice > div, #site-footer a { transition: none !important; }
}

@media (min-width: 768px) {
 #start { padding-bottom: calc(var(--sonte-toolbar-height, 150px) + 48px) !important; }
 #hero-sidebars { top: min(calc(50% + 85px), calc(100% - var(--sonte-toolbar-height, 150px) - var(--sonte-sidebar-height, 250px) - 24px)); }
}
@media (max-height: 650px) and (min-width: 768px) {
 #start { height: auto !important; min-height: calc(100svh - var(--sonte-header-height, 90px)) !important; padding-top: 32px !important; }
 #start h1 { font-size: clamp(18.36px, 2.376vw, 34.56px) !important; }
 #start h1 + p { margin-top: 18px !important; font-size: 22px !important; }
 .hero-action { margin-top: 24px !important; padding-top: 12.8px !important; padding-bottom: 12.8px !important; }
}

@media (max-width: 767px) { #produkte > div > div:first-child > :is(button, a):last-child { grid-column: 2; } }

@media (min-width: 768px) and (max-width: 900px) {
 .site-header { grid-template-columns: 1fr !important; row-gap: 8px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
 .site-header > a { grid-column: 1 !important; grid-row: 1 !important; }
 .site-header nav:first-child { grid-column: 1 !important; grid-row: 2 !important; }
 .site-header nav:last-child { grid-column: 1 !important; grid-row: 3 !important; }
 .site-header nav { justify-content: center !important; flex-wrap: nowrap; }
 .site-header nav a { padding-top: 6px !important; padding-bottom: 6px !important; }
}

#hero-sidebars > div > img { margin-top: -117.625px !important; position: relative; top: 7px; }
@media (max-width: 1100px) { #hero-sidebars > div > img { margin-top: -100.375px !important; } }

#mobile-menu-toggle { display: none; }
/* Keep section headings below the returning fixed header when following anchors. */
:is(#produkte, #anwendungen, #referenzen, #kontakt) { scroll-margin-top: calc(var(--sonte-header-height, 90px) + 24px); }
@media (max-width: 767px) {
 .site-header { grid-template-columns: 1fr auto !important; row-gap: 0 !important; width: calc(100% - 32px) !important; padding: 12px 0 !important; }
 .site-header > a { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; }
 .site-header > a img { width: 145px !important; }
 #mobile-menu-toggle { display: flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
 #mobile-menu-toggle svg { width: 26px !important; height: 26px !important; }
 .site-header nav { display: none !important; position: absolute; left: -16px; right: -16px; background: #fff; z-index: 60; margin: 0; }
 .site-header.mobile-menu-open nav { display: flex !important; }
 #mobile-main-navigation { top: 100%; height: 180px; padding: 18px 24px !important; flex-direction: column; align-items: stretch; justify-content: center !important; gap: 4px !important; }
 #mobile-main-navigation a { font-size: 18px !important; justify-content: flex-start; padding: 10px 0 !important; }
 #mobile-contact-navigation { top: calc(100% + 180px); padding: 16px 24px 24px !important; justify-content: flex-start !important; gap: 16px !important; box-shadow: 0 16px 24px #05314618; }
 #mobile-contact-navigation a { font-size: 15px !important; }
 #mobile-menu-toggle:focus-visible { outline: 2px solid #53a8db; outline-offset: 2px; }
 #start { display: flex !important; align-items: flex-end !important; padding: 28px 0 calc(var(--sonte-toolbar-height, 140px) + 24px) !important; }
 #start h1 { font-size: clamp(14.58px, 3.888vw, 19.44px) !important; line-height: 1.1 !important; }
 #start h1 + p { font-size: 17px !important; line-height: 1.35 !important; margin-top: 16px !important; }
 .hero-action { font-size: 15px !important; padding: 14px 18px !important; margin-top: 18px !important; }
}

/* Prevent a visible first frame before GSAP applies entrance states. */
html.sonte-motion-pending .site-header a,
html.sonte-motion-pending .site-header svg,
html.sonte-motion-pending #start > .hero-visual,
html.sonte-motion-pending #hero-copy-card,
html.sonte-motion-pending #foil-test-hint,
html.sonte-motion-pending #hero-tagline,
html.sonte-motion-pending #start h1,
html.sonte-motion-pending #start h1 + p,
html.sonte-motion-pending .hero-action,
html.sonte-motion-pending #product-selector { opacity: 0; visibility: hidden; }
html.sonte-motion-pending #start { background: #eaf2f7 !important; }



/* Avoid fractional-pixel tiling and image-edge residue on circular swatches. */
#product-selector .product-choice > div {
 background-repeat: no-repeat !important;
 background-size: 106% 106% !important;
 background-position: center !important;
 clip-path: circle(50% at 50% 50%);
 overflow: hidden;
}

#footer-back-to-top svg { width: 40px !important; height: 40px !important; }

#site-footer > div > div:last-child > a,
#site-footer > div > div:last-child > span { font-size: 18px !important; }

@media (min-width: 1400px) {
 #site-footer > div > div:first-child { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr) minmax(0, .9fr) !important; }
 #site-footer > div > div:first-child > div:nth-child(2) { transform: translateX(min(350px, 10vw)); }
 #site-footer > div > div:first-child > div:last-child { justify-self: end; }
}

@media (min-width: 2000px) {
 #site-footer > div > div:first-child > div:nth-child(2) { transform: translateX(350px); max-width: 400px; }
}

#cookie-settings { font-size: 18px !important; line-height: 1.5; }
#cookie-settings:hover { opacity: .8; }
#cookie-settings:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.cookie-settings-dialog { width: min(520px, calc(100vw - 40px)); padding: 32px; border: 0; border-radius: 20px; color: #053146; }
.cookie-settings-dialog::backdrop { background: #05314666; }
.cookie-settings-dialog h2 { font-size: 26px; margin: 0 0 18px; }
.cookie-settings-dialog p { font-size: 18px; line-height: 1.5; margin-bottom: 24px; }
.cookie-settings-dialog button { border: 0; border-radius: 999px; background: #53a8db; color: #fff; padding: 12px 24px; font: inherit; cursor: pointer; }

/* Three footer columns: 50/25/25, with contact and social links together. */
#site-footer > div { width: 90vw !important; }
#site-footer > div > div:first-child { grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 3fr)) !important; gap: 32px !important; align-items: start; }
#site-footer > div > div:first-child > div { transform: none !important; max-width: none !important; justify-self: stretch !important; min-width: 0; }
#site-footer p, #site-footer a, #site-footer span, #cookie-settings { line-height: 1.5 !important; }
#site-footer > div > div:first-child > div:not(:first-child) { gap: 0 !important; }
#footer-social-icons { margin-top: 14px !important; }
@media (max-width: 1199px) { #site-footer > div > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 40px !important; } #site-footer > div > div:first-child > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { #site-footer > div { width: calc(100% - 40px) !important; } #site-footer > div > div:first-child { grid-template-columns: 1fr !important; } }

@media (min-width: 1200px) {
 #site-footer > div > div:first-child > div:not(:first-child) { padding-top: var(--footer-copy-offset, 85px); }
}

#site-footer > div > div:first-child > div:last-child { container-type: inline-size; }
#footer-social-icons { display: grid !important; grid-template-columns: repeat(4, 22px); gap: 12px !important; width: max-content; }
#footer-social-icons a { width: 22px; height: 22px; border: 0; border-radius: 0; }
#footer-social-icons svg { width: 22px; height: 22px; color: inherit; }
@container (max-width: 123px) { #footer-social-icons { grid-template-columns: repeat(2, 22px); } }
@media (max-width: 767px) {
 #footer-social-icons { grid-template-columns: repeat(4, 44px); gap: 4px !important; }
 #footer-social-icons a { width: 44px; height: 44px; }
}

#kontakt .p-field { display: block; }
#kontakt .p-field .p-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#kontakt .p-field .p-input { font-size: 28px !important; }
#kontakt .p-input::placeholder { font-size: 28px; color: #053146; opacity: 1; }

#kontakt .p-field .p-input { background: transparent !important; }

#kontakt .p-input:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }

#kontakt .p-input:focus, #kontakt .p-input:focus-visible { outline: none !important; box-shadow: none !important; }

/* Full-viewport footer divider above the legal row. */
#site-footer > div > div:last-child { position: relative; }
#site-footer > div > div:last-child::before {
 content: ''; position: absolute; top: 0; left: 50%;
 width: 100vw; height: 1px; background: #fff; transform: translateX(-50%);
}
/* Next arrow in the contact field. */
#kontakt > div > :last-child { grid-template-columns: minmax(0, 1fr) 52px; }
#kontakt > div > :last-child > svg {
 width: 52px !important; height: 52px !important;
 padding: 14px; box-sizing: border-box; border-radius: 50%;
 background: #53a8db; color: #fff !important;
}

#site-footer > div > div:last-child::before { height: 1px; }
#kontakt > div > :last-child > svg { transition: background-color .2s ease; cursor: pointer; }
#kontakt > div > :last-child > svg use { transition: transform .2s ease; }
#kontakt > div > :last-child > svg:hover { background-color: #77bae3; }
#kontakt > div > :last-child > svg:hover use { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { #kontakt > div > :last-child > svg, #kontakt > div > :last-child > svg use { transition: none; } }

/* Conversational contact form. */
#kontakt > div > :last-child { display: block; }
.sonte-contact-form { width: 100%; }
.sonte-contact-screen { display: grid; gap: 22px; align-items: center; }
#kontakt .sonte-contact-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 20px; align-items: center; }
#kontakt .sonte-contact-input-row input, #kontakt .sonte-contact-input-row textarea {
 width: 100%; min-width: 0; box-sizing: border-box; border: 0; padding: 12px 0;
 background: transparent; color: #053146; font: inherit; font-size: 28px; outline: none; box-shadow: none;
}
#kontakt textarea { min-height: 120px; resize: vertical; }
#kontakt input::placeholder, #kontakt textarea::placeholder { color: #053146; opacity: 1; }
.sonte-contact-prompt { margin: 0; font-size: 28px; line-height: 1.4; color: #053146; overflow-wrap: anywhere; }
.sonte-contact-next { width: 52px; height: 52px; display: grid; place-items: center; padding: 14px; border: 0; border-radius: 50%; background: #53a8db; color: #fff; cursor: pointer; transition: background-color .2s; }
.sonte-contact-next svg { width: 24px !important; height: 24px !important; color: #fff; overflow: visible; }
.sonte-contact-next svg use { transition: transform .2s; }
.sonte-contact-next:hover { background: #77bae3; }
.sonte-contact-next:hover svg use { transform: translateX(3px); }
.sonte-contact-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.sonte-contact-choices button { padding: 12px 22px; border: 0; border-radius: 30px; color: #fff; background: #53a8db; font: inherit; font-size: 20px; cursor: pointer; }
.sonte-contact-choices button:hover { background: #77bae3; }
.sonte-contact-form button:focus-visible { outline: 2px solid #053146; outline-offset: 4px; }
.sonte-contact-form button:disabled { opacity: .6; cursor: wait; }
.sonte-contact-status { color: #053146; font-size: 17px; margin: 16px 0 0; }
.sonte-contact-status:empty { display: none; }
@media (max-width: 767px) {
 #kontakt .sonte-contact-input-row { gap: 12px; }
 #kontakt .sonte-contact-input-row input, #kontakt .sonte-contact-input-row textarea, #kontakt .sonte-contact-input-row input::placeholder, #kontakt .sonte-contact-input-row textarea::placeholder, .sonte-contact-prompt { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .sonte-contact-next, .sonte-contact-next svg use { transition: none; } }

/* Keep every contact step in the same-sized field. */
.sonte-contact-screen { height: 160px; align-content: center; }
.sonte-contact-status, .sonte-contact-status:empty { display: block; min-height: 24px; margin-top: 12px; }
.sonte-newsletter-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 360px); justify-self: start; }
.sonte-newsletter-choices button { width: 100%; padding-left: 12px; padding-right: 12px; }
@media (max-width: 767px) { .sonte-contact-screen { height: 240px; } }

/* One 120px field shell for inputs, replies and choices. */
#kontakt > div > :last-child {
 position: relative; box-sizing: border-box; height: 120px;
 padding-top: 10px !important; padding-bottom: 10px !important;
}
.sonte-contact-screen { height: 100px; min-height: 0; gap: 12px; }
#kontakt .sonte-contact-input-row { height: 100px; min-height: 0; }
#kontakt .sonte-contact-input-row textarea { height: 100px; min-height: 0; resize: none; border: 0; border-radius: 0; }
.sonte-contact-status, .sonte-contact-status:empty {
 position: absolute; top: 100%; left: 0; right: 0; min-height: 0; margin: 8px 0 0;
}
@media (max-width: 767px) {
 .sonte-contact-screen { height: 100px; }
 .sonte-contact-prompt { font-size: 18px; line-height: 1.3; }
 .sonte-contact-choices { gap: 8px; }
 .sonte-contact-choices button { font-size: 16px; padding: 10px 14px; }
}

/* Center each conversational step; only the message field may grow. */
.sonte-contact-screen { justify-items: center; text-align: center; }
#kontakt .sonte-contact-input-row { width: 100%; }
#kontakt .sonte-contact-input-row input, #kontakt .sonte-contact-input-row textarea { text-align: center; }
.sonte-contact-choices { justify-content: center; }
.sonte-newsletter-choices { justify-self: center; }
#kontakt > div > :last-child.sonte-contact-message { height: calc(var(--message-height, 100px) + 20px); }
.sonte-contact-message .sonte-contact-screen, #kontakt .sonte-contact-message .sonte-contact-input-row { height: var(--message-height, 100px); }
#kontakt .sonte-contact-input-row textarea { line-height: 1.4; overflow-y: auto; }

/* Left-align the contact flow while retaining the expanding message field. */
.sonte-contact-screen { justify-items: stretch; text-align: left; }
#kontakt .sonte-contact-input-row input, #kontakt .sonte-contact-input-row textarea { text-align: left; }
.sonte-contact-choices { justify-content: flex-start; }
.sonte-newsletter-choices { justify-self: start; }

/* Match the empty message placeholder to the other vertically centered inputs. */
#kontakt .sonte-contact-input-row textarea.sonte-message-empty {
 padding-top: calc((100px - 1.4em) / 2);
 padding-bottom: 0;
}

/* Reposition the hero copy as one group, preserving its entrance animations. */
@media (min-width: 768px) {
 #start > div:first-of-type { left: -70px; top: 70px; }
}

/* SONTE uses upright type throughout the frontend. */
body, body * { font-style: normal !important; }

/* Keep the three interest choices inside the 120px shell on narrow phones. */
@media (max-width: 480px) {
 .sonte-interest-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: 100%; }
 .sonte-interest-choices button { font-size: 15px; line-height: 20px; padding: 5px 12px; text-align: left; }
}

/* Compact colour-only hero dock; application context stays available on scroll. */
#product-selector.product-selector:not(.application-toolbar) {
 width: max-content !important; max-width: calc(100% - 40px) !important;
 display: flex !important; padding: 12px 18px !important;
 border-radius: 20px 20px 0 0 !important; overflow: visible !important;
}
#product-selector:not(.application-toolbar) > p { display: none !important; }
#product-selector:not(.application-toolbar) .product-controls {
 margin: 0 !important; gap: clamp(6px, 1vw, 14px) !important;
 justify-content: center !important;
}
#product-selector:not(.application-toolbar)::before {
 content: ''; position: absolute; left: -15px; width: 15px;
 top: -1px; bottom: -1px; box-sizing: border-box;
 background: inherit; border-top: 1px solid #d8e6ed; border-bottom: 1px solid #d8e6ed;
 pointer-events: none;
}
#product-selector:not(.application-toolbar) .product-choice {
 display: grid; place-items: center; padding: 6px !important;
 min-width: 44px; min-height: 44px;
}
#product-selector:not(.application-toolbar) .product-choice > div {
 width: clamp(32px, 3.44vw, 48px) !important;
 height: clamp(32px, 3.44vw, 48px) !important;
}
.product-name-tooltip {
 position: fixed; z-index: 1000; width: max-content;
 max-width: min(310px, calc(100vw - 32px)); box-sizing: border-box;
 padding: 10px 13px; background: #111; color: #fff;
 border: 0; border-radius: 8px;
 box-shadow: 0 5px 16px #05314626;
 font-size: clamp(11px, 1vw, 15px); font-weight: 700;
 line-height: 1.3; text-align: center; overflow-wrap: anywhere;
 pointer-events: none;
}
.product-name-tooltip[hidden] { display: none !important; }
.product-name-tooltip::after {
 content: ''; position: absolute; left: -3px; top: var(--tooltip-arrow, 50%);
 width: 6px; height: 6px; background: #111;
 transform: translateY(-50%) rotate(45deg);
}
.product-name-tooltip[data-side="left"]::after { left: auto; right: -3px; }
@media (max-width: 600px) {
 #product-selector.product-selector:not(.application-toolbar) {
  max-width: calc(100% - 40px) !important; padding: 10px !important;
 }
 #product-selector:not(.application-toolbar) .product-controls { gap: 0 !important; }
 #product-selector:not(.application-toolbar) .product-choice { padding: 6px !important; }
 #product-selector:not(.application-toolbar) .product-choice > div { width: 32px !important; height: 32px !important; }
 .product-name-tooltip { padding: 9px 10px; font-size: 11px; }
}
@media (max-width: 360px) {
 #product-selector.product-selector:not(.application-toolbar) { max-width: calc(100% - 24px) !important; padding: 8px !important; }
 #product-selector:not(.application-toolbar) .product-choice { min-width: 40px; min-height: 44px; padding: 4px !important; }
}

/* Keep the hero copy together in a compact white card. */
#hero-copy-card {
 display: flex; flex-direction: column; justify-content: center;
 width: max-content; min-width: 0; max-width: 100%;
 padding: 40px; box-sizing: border-box;
 background: #53a8db; color: #fff; border-radius: 28px;
 box-shadow: 0 12px 32px #05314624;
}
#start #hero-layout {
 display: flex; align-items: stretch; gap: 48px;
 width: max-content !important; max-width: 80vw !important;
 padding: 0; background: transparent; border-radius: 0;
}
#start h1 { width: auto !important; letter-spacing: normal !important; line-height: 1.2 !important; }
#hero-copy-card h1 { color: #fff; }
#hero-tagline { position: relative; top: 10px; padding-top: 20px; }
#hero-tagline::before {
 content: ''; position: absolute; top: -10px; left: -40px; right: -40px;
 height: 1px; background: #ffffff66;
}
#start .hero-action { max-width: 100%; box-sizing: border-box; }
@media (min-width: 768px) {
 #start > div:first-of-type { margin-left: calc(10vw - clamp(24px, 6vw, 96px)) !important; margin-right: 0 !important; }
}
@media (max-width: 767px) {
 #start #hero-layout {
  width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important;
  margin-left: 0 !important; margin-right: 20px !important;
  gap: 47px;
 }
 #hero-copy-card { flex: 1; padding: 28px; border-radius: 22px; }
 #start .hero-action { font-size: 13.6px !important; padding: 11.2px 14.4px !important; }
 #hero-tagline { font-size: 13.6px !important; margin-top: 18px !important; padding-top: 16px; }
 #hero-tagline::before { left: -28px; right: -28px; }
}

/* Vertical colour rail stretches to the card height; the application dock stays horizontal. */
#product-selector { transform: none; }
#product-selector.application-toolbar { translate: -50% 0 !important; }
#product-selector-slot {
 position: relative; left: 15px;
 display: flex; align-items: stretch; flex: 0 0 64px;
 width: 64px; max-width: 100% !important;
 height: auto; margin-top: 0 !important;
}

/* Vertical test prompt above the colour rail. */
#foil-test-hint {
 position: absolute; left: 4px; bottom: calc(100% + 12px);
 width: 56px; height: 156px; padding: 14px 6px; box-sizing: border-box;
 display: flex; flex-direction: column; align-items: center;
 border-radius: 999px; background: #53a8db; color: #fff;
}
#foil-test-hint > span {
 flex: 1; min-height: 0; writing-mode: vertical-rl; transform: rotate(180deg);
 font-family: 'Satoshi', sans-serif; font-size: 12px; line-height: 1.2; font-weight: 900; letter-spacing: .03em;
 text-align: center; white-space: nowrap;
}
#foil-test-arrow {
 width: 20px; height: 20px; flex-shrink: 0; margin-top: 8px;
 animation: foil-arrow-bounce 1.4s ease-in-out infinite;
}
@keyframes foil-arrow-bounce {
 0%, 100% { transform: translateY(-3px); }
 50% { transform: translateY(5px); }
}
@media (max-width: 767px) {
 #foil-test-hint { left: 2px; width: 40px; height: 140px; padding: 14px 4px; }
 #foil-test-hint > span { font-size: 10px; }
 #foil-test-arrow { width: 18px; height: 18px; margin-top: 6px; }
}
@media (min-width: 768px) and (max-height: 700px) {
 #start { height: auto !important; padding-top: 208px !important; }
}
@media (prefers-reduced-motion: reduce) {
 #foil-test-arrow { animation: none; }
}
#hero-foil-cursor {
 position: fixed; left: 0; top: 0; z-index: 1001;
 width: 190px; height: 56px; border-radius: 999px;
 display: grid; place-items: center; background: #53a8db; color: #fff;
 pointer-events: none; visibility: hidden;
 box-shadow: 0 8px 24px #05314624;
}
#hero-foil-cursor.is-visible { visibility: visible; }
#hero-foil-cursor > span {
 writing-mode: horizontal-tb;
 font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 15px;
 letter-spacing: .03em; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
 #start.has-foil-cursor > .hero-visual { cursor: none; }
}
@media (hover: none), (pointer: coarse) {
 #hero-foil-cursor { display: none; }
}
#product-selector.product-selector:not(.application-toolbar) {
 position: relative !important; left: auto !important; bottom: auto !important;
 width: 100% !important; max-width: 100% !important;
 height: auto; min-height: 0; flex: 1;
 box-sizing: border-box; padding: 8px !important;
 border: 1px solid #d8e6ed; border-left: 0; border-radius: 0 28px 28px 0 !important;
 background: #fff; box-shadow: 0 12px 32px #05314624 !important; backdrop-filter: none; translate: none;
 align-items: stretch; justify-content: center;
}
#product-selector:not(.application-toolbar) .product-controls {
 flex: 1; width: 100%; flex-direction: column; gap: 0 !important;
 justify-content: space-between !important; align-items: center;
}
#product-selector:not(.application-toolbar) .product-choice { padding: 2px !important; min-width: 44px; min-height: 44px; }
#product-selector:not(.application-toolbar) .product-choice > div { width: 40px !important; height: 40px !important; }
#product-selector #choose-transparent > div {
 border: 1px solid #d8e6ed !important; box-sizing: border-box;
}
#start { padding-bottom: 48px !important; }
#hero-sidebars { --sonte-toolbar-height: 64px; }
#hero-sidebars > div { box-shadow: 0 12px 32px #05314624; }
.hero-visual {
 display: block !important; width: 100% !important; max-width: none !important; height: 100% !important;
 left: 0; top: 0; object-fit: cover; object-position: center; opacity: 1; mask-image: none;
}
#start { background: #fff !important; }
@media (min-width: 768px) {
 #start > .hero-visual {
  width: 110% !important; height: 110% !important;
  left: -5%; top: -5%;
  object-position: center !important; transform-origin: center !important;
 }
 #start { align-items: flex-end !important; padding-left: 0 !important; padding-bottom: 90px !important; }
 #start #hero-layout {
  left: 0; top: 0; margin: 0 !important;
  max-width: min(80vw, calc(100vw - min(534.75px, 33.6375vw) - 80px)) !important;
 }
 #hero-sidebars { top: auto; bottom: 90px; height: var(--sonte-sidebar-height, 250px); }
 #hero-sidebars > div { inset: auto 0 0; }
}
@media (min-width: 768px) and (max-width: 1100px) {
 #start #hero-layout { max-width: calc(61vw - 80px) !important; }
}
@media (max-width: 767px) {
 #start { padding-bottom: 74px !important; }
 #product-selector-slot { width: 44px; flex-basis: 44px; }
 #product-selector.product-selector:not(.application-toolbar) { padding: 6px 4px !important; }
 #product-selector:not(.application-toolbar) .product-choice { min-width: 0; min-height: 36px; width: 36px; padding: 0 !important; }
 #product-selector:not(.application-toolbar) .product-choice > div { width: 32px !important; height: 32px !important; }
}

/* Shared section edges follow the header's inner content, including its padding. */
:root {
 --sonte-header-width: 90vw;
 --sonte-header-padding: clamp(24px, 4vw, 64px);
 --sonte-content-width: calc(var(--sonte-header-width) - var(--sonte-header-padding) - var(--sonte-header-padding));
}
.site-header {
 width: var(--sonte-header-width) !important; max-width: var(--sonte-header-width) !important;
 padding-left: var(--sonte-header-padding) !important; padding-right: var(--sonte-header-padding) !important;
}
:is(#sonte-vorteile, #produkte, #sonte-usps, #anwendungen, #kontakt, #site-footer) > div,
#referenzen > div:not(:last-child), .lp-container {
 width: var(--sonte-content-width) !important; max-width: var(--sonte-content-width) !important;
 margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
}
@media (max-width: 767px) {
 :root { --sonte-header-width: min(90vw, calc(100vw - 32px)); --sonte-header-padding: 0px; }
}

.site-header #header-socials .header-social-link {
 display: inline-flex; align-items: center; justify-content: center;
 width: 22px; height: 22px; padding: 0 !important; flex-shrink: 0;
 color: #053146; text-decoration: none; transition: color .22s ease, transform .22s ease;
}
.site-header #header-socials .header-social-link svg { color: inherit; }
.site-header #header-socials .header-social-link:hover,
.site-header #header-socials .header-social-link:focus-visible { color: #53a8db !important; transform: translateY(-3px); }
@media (max-width: 767px) {
 .site-header #header-socials { margin-left: 0 !important; gap: 4px !important; }
 .site-header #header-socials .header-social-link { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
 .site-header #header-socials .header-social-link { transition: none; }
}