/* ==========================================================================
   Treumedizin - shared stylesheet
   Single source of truth: edit this file directly. No CSS build step.

   01 Bootstrap basis (MIT)
   02 Design tokens, typography and shared controls
   03 Header and mobile navigation
   04 Content sections, catalogue, contact, team and footer
   05 Responsive adaptations
   06 Product mega menu and product search
   07 Contact dialog, product detail and contact CTAs
   08 Shared navigation refinements, service, partners, history, FAQ and map
   09 Careers and application form
   10 Homepage shortcuts and counters
   11 Site search

   Prose: --font-body (17px), --font-secondary (15px), --font-small (14px).
   Use matching --line-* tokens. Headings, search display and icons are separate.
   Preserve responsive/context rule order when editing the cascade.
   Icons: Hugeicons Free (MIT), images/icons/sprite.svg + features.svg.
   ========================================================================== */

/* ==========================================================================
   01. Bootstrap basis (MIT)
   ========================================================================== */

/*!

 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 *
* Custom Bootstrap Included:
 *
 *   - Grid (container, row, col-*)
 *   - Navbar (navbar, navbar-expand-lg, navbar-collapse, navbar-brand, nav-item, nav-link)
 *   - Accordion (accordion-*, collapse, collapsed) + collapse JS support
 *   - Forms (form-control only)
 *   - Utilities (mb-*, mt-*, text-white)
 *

 */:root,[data-bs-theme=light]{--bs-blue: #0d6efd;--bs-indigo: #6610f2;--bs-purple: #6f42c1;--bs-pink: #d63384;--bs-red: #dc3545;--bs-orange: #fd7e14;--bs-yellow: #ffc107;--bs-green: #198754;--bs-teal: #20c997;--bs-cyan: #0dcaf0;--bs-black: #000;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-gray-100: #f8f9fa;--bs-gray-200: #e9ecef;--bs-gray-300: #dee2e6;--bs-gray-400: #ced4da;--bs-gray-500: #adb5bd;--bs-gray-600: #6c757d;--bs-gray-700: #495057;--bs-gray-800: #343a40;--bs-gray-900: #212529;--bs-primary: #0d6efd;--bs-secondary: #6c757d;--bs-success: #198754;--bs-info: #0dcaf0;--bs-warning: #ffc107;--bs-danger: #dc3545;--bs-light: #f8f9fa;--bs-dark: #212529;--bs-primary-rgb: 13, 110, 253;--bs-secondary-rgb: 108, 117, 125;--bs-success-rgb: 25, 135, 84;--bs-info-rgb: 13, 202, 240;--bs-warning-rgb: 255, 193, 7;--bs-danger-rgb: 220, 53, 69;--bs-light-rgb: 248, 249, 250;--bs-dark-rgb: 33, 37, 41;--bs-primary-text-emphasis: rgb(5.2, 44, 101.2);--bs-secondary-text-emphasis: rgb(43.2, 46.8, 50);--bs-success-text-emphasis: rgb(10, 54, 33.6);--bs-info-text-emphasis: rgb(5.2, 80.8, 96);--bs-warning-text-emphasis: rgb(102, 77.2, 2.8);--bs-danger-text-emphasis: rgb(88, 21.2, 27.6);--bs-light-text-emphasis: #495057;--bs-dark-text-emphasis: #495057;--bs-primary-bg-subtle: rgb(206.6, 226, 254.6);--bs-secondary-bg-subtle: rgb(225.6, 227.4, 229);--bs-success-bg-subtle: rgb(209, 231, 220.8);--bs-info-bg-subtle: rgb(206.6, 244.4, 252);--bs-warning-bg-subtle: rgb(255, 242.6, 205.4);--bs-danger-bg-subtle: rgb(248, 214.6, 217.8);--bs-light-bg-subtle: rgb(251.5, 252, 252.5);--bs-dark-bg-subtle: #ced4da;--bs-primary-border-subtle: rgb(158.2, 197, 254.2);--bs-secondary-border-subtle: rgb(196.2, 199.8, 203);--bs-success-border-subtle: rgb(163, 207, 186.6);--bs-info-border-subtle: rgb(158.2, 233.8, 249);--bs-warning-border-subtle: rgb(255, 230.2, 155.8);--bs-danger-border-subtle: rgb(241, 174.2, 180.6);--bs-light-border-subtle: #e9ecef;--bs-dark-border-subtle: #adb5bd;--bs-white-rgb: 255, 255, 255;--bs-black-rgb: 0, 0, 0;--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family: var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight: 400;--bs-body-line-height: 1.5;--bs-body-color: #212529;--bs-body-color-rgb: 33, 37, 41;--bs-body-bg: #fff;--bs-body-bg-rgb: 255, 255, 255;--bs-emphasis-color: #000;--bs-emphasis-color-rgb: 0, 0, 0;--bs-secondary-color: rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb: 33, 37, 41;--bs-secondary-bg: #e9ecef;--bs-secondary-bg-rgb: 233, 236, 239;--bs-tertiary-color: rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb: 33, 37, 41;--bs-tertiary-bg: #f8f9fa;--bs-tertiary-bg-rgb: 248, 249, 250;--bs-heading-color: inherit;--bs-link-color: #0d6efd;--bs-link-color-rgb: 13, 110, 253;--bs-link-decoration: underline;--bs-link-hover-color: rgb(10.4, 88, 202.4);--bs-link-hover-color-rgb: 10, 88, 202;--bs-code-color: #d63384;--bs-highlight-color: #212529;--bs-highlight-bg: rgb(255, 242.6, 205.4);--bs-border-width: 1px;--bs-border-style: solid;--bs-border-color: #dee2e6;--bs-border-color-translucent: rgba(0, 0, 0, 0.175);--bs-border-radius: 0.375rem;--bs-border-radius-sm: 0.25rem;--bs-border-radius-lg: 0.5rem;--bs-border-radius-xl: 1rem;--bs-border-radius-xxl: 2rem;--bs-border-radius-2xl: var(--bs-border-radius-xxl);--bs-border-radius-pill: 50rem;--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width: 0.25rem;--bs-focus-ring-opacity: 0.25;--bs-focus-ring-color: rgba(13, 110, 253, 0.25);--bs-form-valid-color: #198754;--bs-form-valid-border-color: #198754;--bs-form-invalid-color: #dc3545;--bs-form-invalid-border-color: #dc3545}*,*::before,*::after{box-sizing:border-box}@media(prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}h4,h3,h2,h1{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media(min-width: 1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + 0.9vw)}@media(min-width: 1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + 0.6vw)}@media(min-width: 1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + 0.3vw)}@media(min-width: 1200px){h4{font-size:1.5rem}}p{margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}ol,ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}strong{font-weight:bolder}a{color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));text-decoration:underline}a:hover{--bs-link-color-rgb: var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}figure{margin:0 0 1rem}img,svg{vertical-align:middle}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none !important}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1)}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit;-webkit-appearance:button}[hidden]{display:none !important}.container{--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-right:auto;margin-left:auto}@media(min-width: 576px){.container{max-width:540px}}@media(min-width: 768px){.container{max-width:720px}}@media(min-width: 992px){.container{max-width:960px}}@media(min-width: 1200px){.container{max-width:1140px}}@media(min-width: 1400px){.container{max-width:1320px}}:root{--bs-breakpoint-xs: 0;--bs-breakpoint-sm: 576px;--bs-breakpoint-md: 768px;--bs-breakpoint-lg: 992px;--bs-breakpoint-xl: 1200px;--bs-breakpoint-xxl: 1400px}.row{--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1*var(--bs-gutter-y));margin-right:calc(-0.5*var(--bs-gutter-x));margin-left:calc(-0.5*var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-top:var(--bs-gutter-y)}.col-12{flex:0 0 auto;width:100%}.g-4{--bs-gutter-x: 1.5rem}.g-4{--bs-gutter-y: 1.5rem}.g-5{--bs-gutter-x: 3rem}.g-5{--bs-gutter-y: 3rem}@media(min-width: 768px){.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-6{flex:0 0 auto;width:50%}.col-md-12{flex:0 0 auto;width:100%}}@media(min-width: 992px){.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-1{margin-left:8.33333333%}}@media(min-width: 1200px){.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.offset-xl-1{margin-left:8.33333333%}}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:none;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media(prefers-reduced-motion: reduce){.nav-link{transition:none}}.nav-link:hover,.nav-link:focus{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar{--bs-navbar-padding-x: 0;--bs-navbar-padding-y: 0.5rem;--bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y: 0.3125rem;--bs-navbar-brand-margin-end: 1rem;--bs-navbar-brand-font-size: 1.25rem;--bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x: 0.5rem;--bs-navbar-toggler-padding-y: 0.25rem;--bs-navbar-toggler-padding-x: 0.75rem;--bs-navbar-toggler-font-size: 1.25rem;--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius: var(--bs-border-radius);--bs-navbar-toggler-focus-width: 0.25rem;--bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:hover,.navbar-brand:focus{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x: 0;--bs-nav-link-padding-y: 0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color: var(--bs-navbar-color);--bs-nav-link-hover-color: var(--bs-navbar-hover-color);--bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-grow:1;flex-basis:100%;align-items:center}@media(min-width: 992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-collapse{display:flex !important;flex-basis:auto}}.collapse:not(.show){display:none}.accordion{--bs-accordion-color: var(--bs-body-color);--bs-accordion-bg: var(--bs-body-bg);--bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;--bs-accordion-border-color: var(--bs-border-color);--bs-accordion-border-width: var(--bs-border-width);--bs-accordion-border-radius: var(--bs-border-radius);--bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-accordion-btn-padding-x: 1.25rem;--bs-accordion-btn-padding-y: 1rem;--bs-accordion-btn-color: var(--bs-body-color);--bs-accordion-btn-bg: var(--bs-accordion-bg);--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-icon-width: 1.25rem;--bs-accordion-btn-icon-transform: rotate(-180deg);--bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%285.2, 44, 101.2%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x: 1.25rem;--bs-accordion-body-padding-y: 1rem;--bs-accordion-active-color: var(--bs-primary-text-emphasis);--bs-accordion-active-bg: var(--bs-primary-bg-subtle)}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media(prefers-reduced-motion: reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1*var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media(prefers-reduced-motion: reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-header{margin-bottom:0}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}.accordion-item:first-of-type>.accordion-header .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type>.accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);appearance:none;background-color:var(--bs-body-bg);background-clip:padding-box;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:rgb(134,182.5,254);outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:var(--bs-secondary-color);opacity:1}.form-control:disabled{background-color:var(--bs-secondary-bg);opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-0.375rem -0.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--bs-secondary-bg)}textarea.form-control{min-height:calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2))}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.mb-4{margin-bottom:1.5rem !important}.text-white{color:#fff !important}

/* ==========================================================================
   02. Design tokens, typography and shared controls
   ========================================================================== */

@font-face {
  font-family: "Inter Tight Local";
  src: url("../fonts/inter-tight-v9-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Design tokens: square surfaces are controlled by --radius-scale: 0.
   Set it to 1 for the defined corner scale. Buttons and icon badges stay round. */

:root {
  /* Prose: exactly three sizes, each with a matching line height. */
  --font-body: 1.0625rem; /* 17px: ordinary copy */
  --font-secondary: 0.9375rem; /* 15px: secondary copy and controls */
  --font-small: 0.875rem; /* 14px: labels and metadata */
  --line-body: 1.6;
  --line-secondary: 1.5;
  --line-small: 1.5;
  /* Headings and deliberate display text are separate from prose. */
  --font-h1: clamp(1.95rem, 1.3rem + 2.2vw, 3.8rem);
  --font-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.7rem);
  --font-h3: clamp(1.375rem, 1.08rem + 1vw, 2.2rem);
  --font-h4: clamp(1.18rem, 1.02rem + 0.65vw, 1.7rem);
  --font-title: 1.25rem;
  --font-card-title: 1.5rem;
  --font-display-search: clamp(20px, 2.3vw, 32px);
  --font-display-counter: clamp(26px, 2.6vw, 36px);
  --font-display-avatar: 36cqw;

  --primary-color: #173A34;
  --action-arrow-size: 16px;
  --action-arrow: url("../images/icons/ui/arrow-right.svg");
  --secondary-color: #F3F7F2;
  --bg-color: #FFFFFF;
  --text-color: #42554F;
  --accent-color: #59BD47;
  --accent-dark-color: #348C38;
  --accent-soft-color: #E7F4E3;
  --surface-muted-color: #EEF5EF;
  --heading-color: var(--primary-color);
  --dark-color: var(--primary-color);
  --white-color: #FFFFFF;
  --divider-color: rgba(23, 58, 52, 0.14);
  --dark-divider-color: #FFFFFF1A;
  --error-color: rgb(230, 87, 87);
  --default-font: "Inter Tight Local", sans-serif;
  /*Border radius scale. Every rounded corner on the site comes from here:
	   set --radius-scale to 0 for a completely square layout.*/

  --radius-scale: 0;
  --radius-xs: calc(4px * var(--radius-scale));
  --radius-sm: calc(6px * var(--radius-scale));
  --radius-md: calc(10px * var(--radius-scale));
  --radius-lg: calc(12px * var(--radius-scale));
  --radius-xl: calc(14px * var(--radius-scale));
  --radius-2xl: calc(16px * var(--radius-scale));
  --radius-3xl: calc(18px * var(--radius-scale));
  --radius-4xl: calc(20px * var(--radius-scale));
  --radius-5xl: calc(24px * var(--radius-scale));
  --radius-6xl: calc(26px * var(--radius-scale));
  /*the default card/surface radius, used by most boxes on the site*/

  --radius-card: var(--radius-md);
  /*Bootstrap's own radius variables, mapped onto the same scale*/

  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-sm);
  --bs-border-radius-xl: var(--radius-2xl);
  --bs-border-radius-xxl: var(--radius-5xl);
  --bs-border-radius-pill: var(--radius-pill);
  --menu-surface: var(--white-color);
  --menu-text: var(--primary-color);
  --menu-text-muted: var(--text-color);
  --menu-accent: var(--accent-color);
  --menu-border: rgba(23, 58, 52, 0.10);
  --menu-hover-bg: rgba(89, 189, 71, 0.12);
  --radius-pill: 999px;
  --radius-circle: 50%;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /*Der feste Kopf darf Sprungziele nicht verdecken.*/

  scroll-padding-top: calc(var(--kopfhoehe, 80px) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--default-font);
  font-size: var(--font-body);
  font-weight: 400;
  color: var(--text-color);
  background: var(--bg-color);
  line-height: var(--line-body);
}

html.mobile-menu-open,
body.mobile-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/*html traegt overflow-x: clip, darum zaehlt sein eigenes overflow -
   eine Sperre allein auf body wuerde die Seite weiter scrollen lassen.*/

html.lightbox-open,
body.lightbox-open {
  overflow: hidden;
  overscroll-behavior: none;
}

::-webkit-scrollbar-track {
  background-color: var(--primary-color);
  border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar {
  width: 7px;
  background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-color);
}

::selection {
  color: var(--white-color);
  background-color: var(--primary-color);
}

p {
  line-height: inherit;
  margin-bottom: 1.5em;
  hyphens: auto;
}

h2 + p,
h3 + p {
  margin-top: 20px;
}

h1,
h2,
h3,
h4,
.h2,
.h3,
.h4 {
  font-weight: 600;
  line-height: 1.2em;
  color: var(--primary-color);
  margin: 0;
}

h1 {
  font-size: var(--font-h1);
  line-height: 1;
  font-weight: 700;
}

h2,
.h2 {
  font-size: var(--font-h2);
  line-height: 1.1;
  font-weight: 700;
  text-wrap: balance;
}

h3,
.h3 {
  font-size: var(--font-h3);
  line-height: 1.1;
  text-wrap: balance;
}

h4,
.h4 {
  font-size: var(--font-h4);
  line-height: 1.2;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
}

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

a:hover {
  text-decoration: none;
  outline: 0;
}

a:focus {
  text-decoration: none;
  outline: 0;
}

p a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s ease-in-out;
  text-decoration-color: var(--accent-color);
}

p a:hover {
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
}

.container {
  max-width: 1500px;
  padding-right: 15px;
  padding-left: 15px;
}

.image-anime {
  position: relative;
  overflow: hidden;
}

.image-anime:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255,255,255,.3);
  transform: translate(-50%,-50%) rotate(-45deg);
  z-index: 1;
}

.image-anime:hover:after {
  height: 250%;
  transition: height 600ms linear, background-color 600ms linear;
  background-color: transparent;
}

.reveal {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
}

.reveal img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transform-origin: left;
  transform-origin: left;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.row > * {
  padding-right: 15px;
  padding-left: 15px;
}

.btn-default {
  position: relative;
  display: inline-block;
  font-size: var(--font-secondary);
  font-weight: 700;
  background: var(--accent-color);
  color: var(--white-color);
  border-radius: var(--radius-pill);
  padding: 13px 50px 13px 20px;
  border: none;
  overflow: hidden;
  box-shadow: none;
  outline: none;
  transition: color 0.4s ease-in-out;
  z-index: 0;
  line-height: var(--line-secondary);
}

.btn-default:hover,
.btn-default:focus-visible {
  color: var(--white-color);
}

.btn-default::before {
  font-size: 14px;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 4px;
  width: 34px;
  height: 34px;
  background-color: var(--primary-color);
  color: var(--white-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  transform: translateY(-50%);
  content: "";
  background-image: url("../images/icons/ui/arrow-right--white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--action-arrow-size);
  transition: background-color 0.4s ease-in-out;
}

.btn-default:hover::before,
.btn-default:focus-visible::before {
  background-color: var(--white-color);
  color: var(--primary-color);
  background-image: url("../images/icons/ui/arrow-right--primary.svg");
}

.btn-default::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: var(--primary-color);
  z-index: -1;
  transition: width 0.4s ease-in-out;
}

.btn-default:hover::after,
.btn-default:focus-visible::after {
  right: auto;
  left: 0;
  width: 100%;
}

.btn-default.btn-phone::before {
  background-image: url("../images/icons/ui/call--white.svg");
}

.btn-default.btn-phone:hover::before,
.btn-default.btn-phone:focus-visible::before {
  background-image: url("../images/icons/ui/call--primary.svg");
}

.readmore-btn {
  position: relative;
  display: inline-block;
  font-weight: 600;
  line-height: 1.5em;
  color: var(--primary-color);
  padding-right: 34px;
  transition: color 0.4s ease-in-out;
}

.readmore-btn::before {
  font-size: 10px;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  height: 24px;
  width: 24px;
  background-color: var(--accent-color);
  border-radius: var(--radius-pill);
  color: var(--white-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease-in-out;
  content: "";
  background-image: url("../images/icons/ui/arrow-right--white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--action-arrow-size);
}

.bg-section {
  width: 100%;
  max-width: 1880px;
  background-color: var(--secondary-color);
  border-radius: var(--radius-card);
  margin: 0 auto;
}

.dark-section {
  background-color: var(--primary-color);
}

.section-padding {
  padding: 100px 0;
}

.site-footer.dark-section {
  background-image: radial-gradient(circle at center top, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0) 56%);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.section-row {
  margin-bottom: 80px;
}

.section-row .section-title {
  margin-bottom: 0;
}

.section-row .section-title.section-title-center {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  margin-bottom: 40px;
}

.section-title h3,
.section-title .section-kicker {
  position: relative;
  display: inline-block;
  font-size: var(--font-small);
  font-weight: 500;
  border: 1px solid var(--divider-color);
  border-radius: var(--radius-pill);
  padding: 7px 16px 7px 30px;
  margin-bottom: 15px;
  backdrop-filter: blur(10px);
  line-height: var(--line-small);
}

.section-title h3::before,
.section-title .section-kicker::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent-color);
  border-radius: var(--radius-circle);
  width: 5px;
  height: 5px;
}

.section-title p {
  margin-top: 20px;
  margin-bottom: 0;
}

.dark-section .section-title .section-kicker {
  border-color: var(--dark-divider-color);
}

.dark-section .section-title .section-kicker,
.dark-section .section-title h1,
.dark-section .section-title p {
  color: var(--white-color);
}

.help-block.with-errors ul {
  margin: 0;
  text-align: left;
}

.help-block.with-errors ul li {
  color: var(--error-color);
  font-weight: 500;
  font-size: var(--font-small);
  line-height: var(--line-small);
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-size: var(--font-small) !important;
  cursor: pointer;
  font-weight: 400;
  line-height: var(--line-small);
}

.contact-consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 0;
  flex: 0 0 20px;
  border: 1.5px solid rgba(34, 34, 34, 0.25);
  border-radius: var(--radius-sm);
  background: var(--white-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}

.contact-consent span {
  color: var(--primary-color);
  font-weight: 400;
}

.contact-consent a {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.contact-consent a:hover {
  color: var(--primary-color);
}

.contact-consent input:hover {
  border-color: var(--accent-color);
}

.contact-consent input:focus-visible {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.contact-consent input:checked {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.contact-consent input:checked::after {
  content: "";
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--white-color);
  border-bottom: 2px solid var(--white-color);
  transform: rotate(45deg) translate(-1px, -1px);
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.about-info-item-content h3,
.category-card-content h2,
.approach-item-box-title h3,
.approach-item-header-content h3,
.service__item-body h3,
.why-choose__item-body h3,
.why-choose__overlay-title h3,
.project-steps__item-list h3,
.info-card__heading h3,
.footer__links h3 {
  font-size: var(--font-title);
}

.contact-form-content h3,
.why-choose__counter-value .counter-value,
.hero__counter .counter-value {
  font-size: var(--font-display-counter);
}

.icon-box {
  position: relative;
  width: 50px;
  height: 50px;
  background: var(--accent-color);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  border-radius: var(--radius-circle);
  transform: scale(0);
  transition: transform 0.4s ease-in-out;
  z-index: 0;
}

.icon-box i {
  position: relative;
  z-index: 1;
  font-size: 22px;
  line-height: 1;
  color: var(--white-color);
  transition: color 0.4s ease-in-out;
}

/* Native small text follows the minimum readable prose size. */
small { font-size: var(--font-small); line-height: var(--line-small); }

/* ==========================================================================
   03. Header and mobile navigation
   ========================================================================== */

header.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

header.main-header .header-sticky {
  position: relative;
  top: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--dark-divider-color);
  overflow-x: clip;
  overflow-y: visible;
  z-index: 100;
}

header.main-header .header-sticky.active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(0);
  background: var(--primary-color);
  border-bottom: 1px solid var(--dark-divider-color);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.navbar {

  align-items: center;

  border-radius: inherit;
}

.navbar-brand {
  padding: 0;
  margin: 0;
}

.main-menu .nav-menu-wrapper {
  flex: 1;
  text-align: center;
  margin: 0 1.042vw;
}

.main-menu .nav-menu-wrapper > ul {
  align-items: center;
  display: inline-flex;
}

.main-menu ul li {
  margin: 0 10px;
  position: relative;
}

.main-menu ul li a {
  font-weight: 500;
  line-height: 1.2em;
  padding: 12px 10px !important;

  background: transparent;
  border-radius: 0px;
  transition: color 0.3s ease-in-out;
}

.main-menu ul li.submenu > a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.main-menu ul li.submenu > a:after {
  flex: none;
  font-size: 14px;
  margin-left: 8px;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/ui/chevron-down.svg") center / contain no-repeat;
  mask: url("../images/icons/ui/chevron-down.svg") center / contain no-repeat;
}

.main-menu ul ul {
  visibility: hidden;
  opacity: 0;
  transform: scale(1,0.8);
  transform-origin: top;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 235px;
  border-radius: var(--radius-card);
  position: absolute;
  left: 0;
  top: 100%;
  background: var(--accent-color);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  text-align: left;
}

.main-menu ul ul ul {
  left: 100%;
  top: 0;
  text-align: left;
}

.main-menu ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: scale(1,1);
  padding: 5px 0;
}

.main-menu ul ul li {
  margin: 0;
  padding: 0;
}

.main-menu ul ul li a {

  padding: 4px 12px !important;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.responsive-menu,
.navbar-toggle {
  display: none;
}

.responsive-menu {
  top: 0;
  position: relative;
}

.mobile-nav-toggle {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: var(--white-color);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: var(--radius-circle);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.mobile-nav-toggle.is-open {
  background: var(--white-color);
  border-color: var(--accent-dark-color);
  color: var(--primary-color);
}

.mobile-nav-toggle__icon {
  display: grid;
  /*1.5px Linie + 4.5px Abstand: identische Pixelphase fuer alle Linien.*/

  gap: 4.5px;
}

.mobile-nav-toggle__icon span {
  display: block;
  height: 1.5px;
  width: 17px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
}

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

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

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

.mobile-nav {
  position: fixed;
  top: var(--mobile-nav-offset, 92px);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - var(--mobile-nav-offset, 92px));
  height: calc(100dvh - var(--mobile-nav-offset, 92px));
  padding: 0;
  background: var(--menu-surface);
  z-index: 90;
  display: flex;
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav__list,
.mobile-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__list {
  width: 100%;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.mobile-nav__item {
  position: relative;
  width: 100%;
}

.mobile-nav__item--has-children > .mobile-nav__link {
  padding-right: 72px;
}

.mobile-nav__link {
  position: relative;
  display: block;
  width: 100%;
  font-size: var(--font-secondary);
  font-weight: 700;
  text-align: left;
  padding: 10px 0;
  color: var(--menu-text);
  margin: 0;
  border-radius: 0 !important;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  line-height: var(--line-secondary);
}

.mobile-nav__link:hover,
.mobile-nav__link:focus,
.mobile-nav__item.is-open > .mobile-nav__link {
  background-color: transparent;
  color: var(--menu-accent);
}

.mobile-nav__submenu {
  width: 100%;
  padding: 6px 0 2px 0;
}

.mobile-nav__submenu .mobile-nav__link {
  font-size: var(--font-secondary);
  font-weight: 600;
  padding: 8px 0;
  line-height: var(--line-secondary);
}

.mobile-nav__submenu-toggle {
  position: absolute;
  right: 0;
  top: 4px;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--menu-text);
  cursor: pointer;
  border-radius: var(--radius-circle);
  transition: color 0.3s ease-in-out;
}

.mobile-nav__submenu-toggle:hover,
.mobile-nav__submenu-toggle:focus {
  color: var(--menu-accent);
}

.mobile-nav-toggle:focus-visible,
.mobile-nav__submenu-toggle:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.mobile-nav__submenu-toggle span::after {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.3s ease-out, color 0.3s ease-out;
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/ui/chevron-down.svg") center / contain no-repeat;
  mask: url("../images/icons/ui/chevron-down.svg") center / contain no-repeat;
}

.mobile-nav__item.is-open > .mobile-nav__submenu-toggle span::after {
  transform: rotate(-180deg);
  color: var(--menu-accent);
}

.hero-content {
  align-content: center;
  margin-right: 50%;
}

.hero-content-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 30px;
}

.hero__partner-logos {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.hero__partner-logos img {
  display: block;
  width: auto;
  max-width: 130px;
  max-height: 34px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.hero__partner-logos img:first-child {
  max-height: 42px;
}

.hero__partner-logos img.hero__partner-logo--schiller {
  max-width: 180px;
  max-height: 34px;
}

.about-us {
  padding: 100px 0;
}

.about-us-image-box {
  height: 100%;
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.about-us-image {
  width: calc(55% - 15px);
}

.about-us-image figure {
  height: 100%;
  display: block;
  border-radius: var(--radius-card);
}

.about-us-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1.32;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.about-info-item-list {
  width: calc(45% - 15px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-info-item {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  background-color: var(--secondary-color);
  border-radius: var(--radius-card);
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.about-info-item.box-1::before {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 120px;
  line-height: 1;
  color: var(--accent-color);
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/ui/location.svg") center / contain no-repeat;
  mask: url("../images/icons/ui/location.svg") center / contain no-repeat;
}

.about-info-item-content h3 {
  color: var(--primary-color);
}

.about-info-item-content p {
  margin: 10px 0 0;
}

.about-info-item.box-2 {
  background: var(--primary-color);
  overflow: hidden;
}

.about-us-item-counter {
  border-bottom: 1px solid var(--dark-divider-color);
  padding-bottom: 20px;
}

.about-us-item-counter .about-counter-title {
  color: var(--white-color);
  margin: 0;
}

.about-us-item-counter .about-counter-title span {
  color: var(--accent-color);
}

.about-info-item.box-2 .about-info-item-content p {
  margin: 0;
  color: var(--white-color);
}

.section-footer-text {
  margin-top: 30px;
  text-align: center;
}

.section-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.section-footer-row .section-footer-text {
  margin-top: 0;
  text-align: left;
}

.section-footer-row .section-footer-btn {
  margin-left: auto;
}

.section-footer-text p {
  margin-bottom: 0;
}

.section-footer-text.section-satisfy-img {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.category-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  background-color: var(--white-color);
  border-radius: var(--radius-card);
  height: calc(100% - 30px);
  margin-bottom: 30px;
  padding: 10px;
}

.category-card-header {
  padding: 30px;
}

.category-card-content h2 a {
  color: inherit;
}

.category-card-content p {
  margin: 10px 0 0;
}

.category-card-btn {
  border-top: 1px solid var(--divider-color);
  margin-top: 20px;
  padding-top: 20px;
}

.category-card-image-box {
  position: relative;
}

.category-card-image a,
.category-card-image figure {
  cursor: pointer;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.category-card-image img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  transition: transform 0.6s ease-in-out;
}

.category-card-image img.product-world-image {
  aspect-ratio: 4 / 3;
  background: var(--secondary-color);
  object-fit: contain;
  padding: 18px;
}

.why-choose-us-image-box {
  position: relative;
  height: 100%;
}

.why-choose-us-image {
  height: 100%;
}

.why-choose-us-image figure {
  display: block;
  height: 100%;
  border-radius: var(--radius-card);
}

.why-choose-us-image figure img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1 / 1.227;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.why-choose-us-body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.why-choose-body-item {
  background: var(--secondary-color);
  border-radius: var(--radius-card);
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.why-choose-body-item:last-child {
  margin-bottom: 0;
}

.why-choose-body-item:hover .icon-box::before {
  transform: scale(1);
}

.why-choose-body-item .icon-box i {
  color: var(--white-color);
}

.why-choose-body-item-content {
  width: calc(100% - 65px);
}

.why-choose-body-item-content p {
  margin: 10px 0 0;
}

.faq-accordion .accordion-item {
  position: relative;
  background: var(--secondary-color);
  border-radius: var(--radius-card);
  margin-bottom: 16px;
  overflow: hidden;
}

.faq-accordion .accordion-item:last-child {
  margin-bottom: 0;
}

.faq-accordion .accordion-header .accordion-button {
  font-size: var(--font-body);
  font-weight: 600;
  background: transparent;
  color: var(--primary-color);
  padding: 18px 60px 18px 24px;
  transition: background-color 0.3s ease-in-out;
  line-height: var(--line-body);
}

.faq-accordion .accordion-item .accordion-button:not(.collapsed) {
  background-color: var(--accent-color);
  color: var(--white-color);
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--primary-color);
  transition: color 0.4s ease-in-out;
  content: "+";
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  background-image: none;
  width: auto;
  height: auto;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
  color: var(--white-color);
  content: "−";
}

.faq-accordion .accordion-item .accordion-body {
  background-color: transparent;
  padding: 18px 24px;
}

.faq-accordion .accordion-item .accordion-body p {
  margin: 0;
}

/*Unique rules for kontakt.html footer variant*/

.footer__hours {
  border-top: 1px solid var(--dark-divider-color);
  padding-top: 30px;
  margin-top: 30px;
}

.footer__hours ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__hours ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--white-color);
  line-height: 1.6em;
  margin-bottom: 15px;
}

.footer__hours ul li:last-child {
  margin-bottom: 0;
}

.page-header {
  --page-header-offset: 90px;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 45vh;
  padding: var(--page-header-offset) 0 0;
}

.page-header:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--primary-color);
  opacity: 50%;
  z-index: 1;
}

.page-header-box {
  position: relative;
  z-index: 2;
}

.page-header-box h1 {
  display: inline-block;
  color: var(--white-color);
  margin-bottom: 15px;
  cursor: default;
}

.page-header-box ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item {
  padding-left: 0.5rem;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  content: "/";
  color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item {
  font-size: var(--font-body);
  font-weight: 400;
  text-transform: capitalize;
  color: var(--white-color);
  line-height: var(--line-body);
}

.page-header-box ol li.breadcrumb-item a {
  color: inherit;
}

.page-header.page-header--flag {
  background-position: 70% top !important;
}

.page-header--flag:before {
  background: linear-gradient(90deg, rgba(7, 30, 56, 0.52) 0%, rgba(7, 30, 56, 0.24) 50%, rgba(7, 30, 56, 0.04) 100%);
  opacity: 1;
}

@media (max-width: 767px) {
  .page-header.page-header--flag {
    background-position: 77% center !important;
  }

  .page-header--flag:before {
    background: linear-gradient(90deg, rgba(7, 30, 56, 0.68) 0%, rgba(7, 30, 56, 0.42) 60%, rgba(7, 30, 56, 0.16) 100%);
  }

  .page-header--flag .page-header-box {
    max-width: 60%;
  }
}

.our-approach {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

.our-approach .container {
  position: relative;
  z-index: 2;
}

.our-approach-content-box {
  margin-right: 15px;
}

.our-approach-body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.approach-item-boxes {
  width: calc(44% - 15px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.approach-item-box {
  background-color: var(--white-color);
  border-radius: var(--radius-card);
  padding: 30px;
}

.approach-item-box-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.approach-item-box:hover .approach-item-box-header .icon-box::before {
  transform: scale(1);
}

.approach-item-box-title {
  width: calc(100% - 65px);
}

.approach-item-box-body {
  border-top: 1px solid var(--divider-color);
  margin-top: 20px;
  padding-top: 20px;
}

.approach-item-box-body p {
  margin-bottom: 0;
}

.approach-item {
  width: calc(56% - 15px);
  align-content: center;
}

.approach-item-body {
  border-top: 1px solid var(--divider-color);
  margin-top: 30px;
  padding-top: 30px;
}

.approach-item-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.approach-item-list ul li {
  position: relative;
  line-height: 1.5em;
  margin-bottom: 15px;
  padding-left: 25px;
}

.approach-item-list ul li:last-child {
  margin-bottom: 0;
}

.approach-item-list ul li::before {
  position: absolute;
  font-size: 18px;
  color: var(--accent-color);
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/ui/check-circle.svg") center / contain no-repeat;
  mask: url("../images/icons/ui/check-circle.svg") center / contain no-repeat;
}

.our-approach-image-box {
  height: 100%;
}

.our-approach-image-box figure {
  display: block;
  height: 100%;
  border-radius: var(--radius-card);
}

.our-approach-image-box img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1 / 1.16;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.page-resources {
  padding: 100px 0 70px;
}

.page-resources .category-card {
  background-color: var(--secondary-color);
}

.product-catalog {
  position: relative;
}

/*Die Leiste eroeffnet den Abschnitt - oben derselbe knappe Abstand wie
   unten, statt des vollen Abschnittsrandes.*/

.product-overview.section-padding {
  padding-top: 26px;
}

/*Ein Balken ueber die volle Breite - deckend, damit beim Andocken unter
   dem festen Kopf nichts durchscheint. Das Innenmass haelt den Inhalt in
   der Spalte der Karten.*/

.product-catalog__toolbar {
  position: sticky;
  top: var(--kopfhoehe, 80px);
  z-index: 10;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 26px;
  padding: 14px calc(50vw - 50%);
  background: var(--menu-surface);
  border-bottom: 1px solid var(--divider-color);
}

@media (min-width: 992px) {
  /*Angedockt setzt nur noch ein Schatten die Leiste vom Inhalt ab.*/

  .product-catalog__toolbar.is-stuck {
    box-shadow: 0 10px 24px rgba(23, 58, 52, 0.07);
  }
}

.product-catalog__toolbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 14px;
}

.product-catalog__search {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.product-catalog__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-color);
  line-height: var(--line-small);
}

/*Dieselbe Fassung wie die grosse Suche im Kopfbereich, nur kleiner.*/

.product-catalog__search-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  height: 48px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.product-catalog__search-wrap i {
  flex: none;
  color: var(--accent-dark-color);
  font-size: 20px;
}

.product-catalog__search-wrap input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--primary-color);
  padding: 0;
  line-height: var(--line-body);
}

.product-catalog__search-wrap input::-webkit-search-cancel-button,
.product-catalog__search-wrap input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.product-catalog__search-wrap input:focus {
  outline: none;
}

.product-catalog__search-wrap input::placeholder {
  color: rgba(66, 85, 79, 0.45);
  font-weight: 400;
}

.product-catalog__view-switch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.product-catalog__view-buttons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: #edf2f8;
  box-sizing: border-box;
}

.product-catalog__view-buttons button {
  border: none;
  border-radius: var(--radius-pill);
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--primary-color);
  font-weight: 600;
  transition: all 0.3s ease;
}

.product-catalog__view-buttons button i {
  font-size: 18px;
}

.product-catalog__view-buttons button.is-active,
.product-catalog__view-buttons button:hover,
.product-catalog__view-buttons button:focus-visible {
  background: var(--accent-color);
  color: var(--white-color);
  outline: none;
}

.product-catalog__filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-catalog__filter-group {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px 10px;
}

.product-catalog__filter-group button {
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 13px;
  white-space: nowrap;
  background: #e9eff6;
  color: var(--primary-color);
  font-size: var(--font-small);
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: none;
  line-height: var(--line-small);
}

.product-catalog__filter-group button.is-active,
.product-catalog__filter-group button:hover,
.product-catalog__filter-group button:focus-visible {
  background: var(--accent-color);
  color: var(--white-color);
  outline: none;
}

.product-catalog__filter-select-wrap {
  display: none;
  flex: 1 1 auto;
  width: 100%;
}

.product-catalog__filter-select {
  width: 100%;
  height: 52px;
  padding: 0 26px 0 0;
  border: none;
  border-bottom: 1px solid var(--divider-color);
  border-radius: 0;
  background: transparent;
  color: var(--primary-color);
  font-size: var(--font-body);
  font-weight: 600;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23173A34' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 2px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  transition: border-color 0.2s ease;
  line-height: var(--line-body);
}

.product-catalog__filter-select:focus {
  border-bottom-color: var(--accent-color);
  border-bottom-width: 2px;
}

@media (min-width: 992px) {
  /*Suchfeld, Filter und Ansichtsschalter stehen in einer Zeile.
	   display: contents loest die Zwischenhuelle auf, damit sich die drei
	   Gruppen frei anordnen lassen.*/

  .product-catalog__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .product-catalog__toolbar-main {
    display: contents;
  }

  .product-catalog__search {
    order: 1;
    flex: 0 1 320px;
  }

  .product-catalog__filter-row {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  .product-catalog__filter-group {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .product-catalog__view-switch {
    order: 3;
  }
}

.product-catalog__summary {
  padding: 0 4px 24px;
}

.product-catalog__summary p {
  margin: 0;
  color: var(--primary-color);
  opacity: 0.6;
}

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

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--white-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.09);
  border: 1px solid rgba(17, 24, 39, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.product-card:hover {
  box-shadow: 0 26px 60px rgba(17, 24, 39, 0.14);
}

.product-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 18px;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s ease;
}

.product-card:hover .product-card__media img {
  transform: scale(1.05);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.product-card__category {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--secondary-color);
  color: var(--primary-color);
  font-size: var(--font-small);
  font-weight: 500;
  overflow-wrap: anywhere;
  line-height: var(--line-small);
}

.product-card h3 {
  font-size: var(--font-card-title);
  line-height: 1.3;
  margin-bottom: 12px;
}

.product-card p {
  margin: 0;
  font-size: var(--font-secondary);
  color: var(--text-color);
  line-height: var(--line-secondary);
}

.product-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
}

.product-card__footer .readmore-btn {
  width: 100%;
  justify-content: space-between;
}

.product-card__footer .btn-default {
  padding: 12px 22px;
}

.product-catalog.is-list .product-catalog__grid {
  grid-template-columns: 1fr;
}

.product-catalog.is-list .product-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: stretch;
}

.product-catalog.is-list .product-card__media img {
  min-height: 0;
}

.product-catalog.is-list .product-card__media {
  aspect-ratio: auto;
  height: 100%;
}

.product-catalog.is-list .product-card__body {
  padding: 26px 28px;
}

.product-catalog__empty {
  margin-top: 24px;
  padding: 36px;
  text-align: center;
  border-radius: var(--radius-5xl);
  background: var(--white-color);
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.09);
}

.product-catalog__empty h3 {
  margin-bottom: 12px;
}

.product-catalog__empty p {
  max-width: 56ch;
  margin: 0 auto 20px;
}

.page-single-sidebar {
  position: sticky;
  top: calc(var(--kopfhoehe, 80px) + 30px);
  margin-right: 15px;
}

.page-category-list {
  background: var(--secondary-color);
  border-radius: var(--radius-card);
  margin-bottom: 60px;
  overflow: hidden;
}

.page-category-list h2 {
  font-size: var(--font-title);
  line-height: normal;
  background: var(--accent-color);
  color: var(--white-color);
  padding: 20px 40px;
}

.page-category-list ul {
  list-style: none;
  margin: 0;
  padding: 40px;
}

.page-category-list ul li {
  line-height: 1.5em;
  font-weight: 500;
  color: var(--primary-color);
  border-bottom: 1px solid var(--divider-color);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.page-category-list ul li:last-child {
  border-bottom: none;
  margin: 0;
  padding: 0;
}

.page-category-list ul li a {
  position: relative;
  display: block;
  color: inherit;
  padding-right: 24px;
  transition: color 0.4s ease-in-out;
}

.page-category-list ul li a:hover {
  color: var(--accent-color);
}

.page-category-list ul li a::before {
  font-size: 14px;
  line-height: 1;
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--action-arrow-size);
  height: var(--action-arrow-size);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  transition: color 0.4s ease-in-out;
  content: "";
  background-color: currentColor;
  -webkit-mask: var(--action-arrow) center / contain no-repeat;
  mask: var(--action-arrow) center / contain no-repeat;
}

.page-category-list ul li a:hover::before {
  color: var(--primary-color);
}

.legal-content {
  margin-bottom: 60px;
}

.legal-content p {
  margin-bottom: 20px;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content h3:last-child {
  margin-bottom: 0;
}

.legal-content ul {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 20px;
}

.legal-content ul li {
  line-height: 1.65em;
  margin-bottom: 10px;
}

.legal-copy ul li {
  line-height: 1.75em;
  margin-bottom: 4px;
}

.legal-copy ul {
  margin-bottom: 24px;
}

.legal-copy h3 {
  margin-top: 42px;
  margin-bottom: 16px;
}

.legal-copy h3:first-child {
  margin-top: 0;
}

.legal-copy h4 {
  margin-top: 28px;
  margin-bottom: 12px;
}

.legal-copy h3 + h4 {
  margin-top: 0;
}

.legal-copy p + h3 {
  margin-top: 48px;
}

.legal-content ul li:last-child {
  margin-bottom: 0;
}

.legal-content ul li::marker {
  color: var(--accent-color);
}

.page-contact-us {
  padding: 100px 0 100px;
}

.contact-info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  flex-direction: column;
}

.contact-info-item {
  position: relative;
  width: 100%;
  background-color: var(--secondary-color);
  border-radius: var(--radius-card);
  padding: 40px;
  overflow: hidden;
}

/*Zwischen 768 und 1024px griff bisher width: calc(50% - 15px), waehrend die
   Liste auf flex-direction: column stand - die Boxen waren halb so breit und
   standen trotzdem untereinander, die halbe Flaeche blieb leer.

   768-991px: die Seitenspalten stehen untereinander, die Liste hat die volle
   Breite - dort passen zwei Boxen nebeneinander.*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-info-list {
    flex-direction: row;
    align-content: start;
  }
}

.contact-info-item-header {
  position: relative;
  z-index: 1;
}

.contact-info-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--divider-color);
  padding-bottom: 16px;
}

.contact-info-item-header h3 {
  font-size: var(--font-title);
}

.contact-info-map-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.contact-info-map-link img {
  height: 20px;
  width: auto;
  display: block;
}

.contact-info-item-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
  z-index: 1;
}

/*Zwischenueberschriften im Rechtstext stehen auf eigener Zeile. Ohne das
   rutscht kurzer Text daneben, langer dagegen darunter - je nach Laenge.*/

.contact-info-item-body h4 {
  flex-basis: 100%;
  margin-bottom: 0;
}

.contact-address-line {
  margin: 0;
  font-size: var(--font-body);
  line-height: var(--line-body);
}

.contact-us-form {
  width: 100%;
  background-color: var(--secondary-color);
  border-radius: var(--radius-card);
  padding: 40px;
}

.contact-main-row {
  align-items: stretch;
}

.contact-main-row__column {
  display: flex;
}

.contact-main-row__column > .contact-us-form,
.contact-info-list--match-form {
  width: 100%;
  height: 100%;
}

.contact-info-list--match-form {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.contact-info-list--match-form .contact-info-item {
  height: 100%;
}

.contact-form-content {
  margin-bottom: 40px;
}

.contact-form-content p {
  margin: 25px 0 0;
}

.contact-us-form--dynamic.is-loading {
  min-height: 280px;
}

.contact-us-form--dynamic.is-error {
  padding: 28px;
  border-radius: var(--radius-5xl);
  background: var(--surface-muted-color);
}

.contact-form-success {
  text-align: center;
  padding: 48px 24px 32px;
}

.contact-form-success__icon {
  font-size: 52px;
  color: var(--accent-color);
  margin-bottom: 20px;
  line-height: 1;
}

.contact-form-success__title {
  font-size: var(--font-card-title);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--dark-color);
}

.contact-form-success__text {
  color: var(--text-color);
  font-size: var(--font-secondary);
  margin-bottom: 28px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--line-secondary);
}

.contact-form-success__cta {
  display: inline-block;
}

.contact-form-error {
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-left: 3px solid #ef4444;
  border-radius: var(--radius-xs);
  padding: 13px 16px;
  color: #b91c1c;
  font-size: var(--font-small);
  margin-top: 16px;
  line-height: var(--line-small);
}

.contact-form-error i {
  margin-right: 7px;
}

.contact-form label {
  font-size: var(--font-secondary);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 15px;
  line-height: var(--line-secondary);
}

.contact-form .form-control {
  font-size: var(--font-body);
  font-weight: 400;
  color: var(--primary-color);
  background: var(--white-color);
  border: none;
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: none;
  outline: none;
  line-height: var(--line-body);
}

.contact-form .form-control::placeholder {
  color: var(--text-color);
}

/*Legal / imprint cards*/

.legal-card-layout > h2 {
  margin-bottom: 28px;
}

.legal-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.legal-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.legal-detail-grid .contact-info-item h3 {
  font-size: var(--font-title);
}

.legal-detail-grid .contact-info-item h3 + p {
  margin-top: 14px;
}

.legal-detail-grid .contact-info-item p + h3 {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--divider-color);
}

.legal-notice-card {
  margin-top: 30px;
}

.section-title-text {
  height: 100%;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}

.section-title-text p {
  margin-top: 0;
}

.hero__service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  border-top: 0;
  padding: 0;
}

/*Kachel: Symbol oben, Bezeichnung darunter - gleich hohe Felder durch das Raster.*/

/*Hover ohne Bewegung: nur Farbe, keine Verschiebung.*/

/*Nur solange beide Karten nebeneinander stehen, fuellen die Kacheln die Hoehe
   aus - dann schliessen hell und dunkel buendig ab.*/

/*Beide Karten des Einstiegsblocks stehen enger - kleinere Ueberschrift,
   weniger Innenabstand, knapper gesetzte Zahlenreihe.*/

/*Die Zahlenreihe im dunklen Block steht enger und trennt keine Woerter.*/

.hero__counter p:not(.counter-value) {
  font-size: var(--font-small);
  line-height: var(--line-small);
}

.hero__counters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-divider-color);
}

.hero__counter {
  position: relative;
  width: calc(33.33% - 13.33px);
  text-align: center;
}

.hero__counter::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  background: var(--dark-divider-color);
  width: 1px;
  height: 100%;
}

.hero__counter:last-child:before,
.hero__counter:nth-child(3n + 3):before {
  display: none;
}

.hero__counter .counter-value {
  color: var(--accent-color);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.hero__counter p {
  hyphens: none;
  -webkit-hyphens: none;
  color: var(--white-color);
  margin: 6px 0 0;
  line-height: 1.2;
}

.services {
  position: relative;
  overflow: hidden;
}

.services .section-row {
  align-items: flex-end;
}

.services-intro-title {
  max-width: 720px;
  margin-bottom: 0;
}

.services-intro-title h2 {
  text-align: left;
}

.service__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  background-color: var(--white-color);
  border-radius: var(--radius-card);
  min-height: 450px;
  height: calc(100% - 30px);
  margin-bottom: 30px;
  padding: 30px;
  transition: transform 0.4s ease-in-out;
}

.service__item:hover {
  transform: translateY(-5px);
}

.service__item:hover .category-card-image img {
  transform: scale(1.06);
}

.service__item-body p {
  margin: 10px 0 0;
}

.service__item-body ul {
  list-style: disc;
  margin: 20px 0 0;
  padding: 0 0 0 20px;
}

.service__item-body ul li {
  line-height: 1.5em;
  margin-bottom: 10px;
}

.service__item-body ul li:last-child {
  margin-bottom: 0;
}

.service__item-body ul li::marker {
  color: var(--accent-color);
}

.service__item-btn {
  border-top: 1px solid var(--divider-color);
  padding-top: 30px;
  margin-top: 30px;
}

.why-choose__list {
  border-top: 1px solid var(--divider-color);
  padding-top: 40px;
}

.why-choose__item {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.why-choose__item:last-child {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.why-choose__item .icon-box {
  width: 60px;
  height: 60px;
}

.why-choose__item:hover .icon-box::before {
  transform: scale(1);
}

.why-choose__item .icon-box.clean-check i {
  position: relative;
  z-index: 1;
  font-size: 24px;
  line-height: 1;
  color: var(--white-color);
  transition: color 0.4s ease-in-out;
}

.why-choose__item:hover .icon-box.clean-check i {
  color: var(--white-color);
}

.why-choose__item-body {
  width: calc(100% - 75px);
}

.why-choose__item-body p {
  margin: 10px 0 0;
}

.why-choose__media {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 40px;
  margin-left: 10px;
}

.why-choose__img-wrap {
  position: relative;
  width: calc(60% - 20px);
  height: 100%;
}

.why-choose__img {
  height: 100%;
}

.why-choose__img figure {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.why-choose__img figure::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, transparent 18.48%, var(--primary-color) 82.14%);
  z-index: 1;
}

.why-choose__img img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1 / 1.33;
  object-fit: cover;
}

.why-choose__overlay {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  z-index: 1;
}

.why-choose__overlay-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.why-choose__overlay-title {
  width: calc(100% - 65px);
}

.why-choose__overlay-title h3 {
  color: var(--white-color);
  line-height: 1.4em;
}

.why-choose__overlay-body {
  border-top: 1px solid var(--dark-divider-color);
  padding-top: 20px;
  margin-top: 20px;
}

.why-choose__overlay-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-choose__overlay-body ul li {
  position: relative;
  color: var(--white-color);
  line-height: 1.5em;
  margin-bottom: 15px;
  padding-left: 25px;
}

.why-choose__overlay-body ul li:last-child {
  margin-bottom: 0;
}

.why-choose__overlay-body ul li::before {
  position: absolute;
  font-size: 18px;
  color: var(--accent-color);
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/ui/check-circle.svg") center / contain no-repeat;
  mask: url("../images/icons/ui/check-circle.svg") center / contain no-repeat;
}

.why-choose__counters {
  width: calc(40% - 20px);
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 30px;
  height: 100%;
}

.why-choose__counter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--secondary-color);
  border-radius: var(--radius-card);
  padding: 40px 30px;
  margin-bottom: 0;
}

.why-choose__counter:last-child {
  margin-bottom: 0;
}

.why-choose__counter-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.why-choose__counter:hover .icon-box::before {
  transform: scale(1);
}

.why-choose__counter:hover .icon-box i {
  color: var(--white-color);
}

.why-choose__counter-value {
  width: calc(100% - 65px);
}

.why-choose__counter-value .counter-value {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
}

.why-choose__counter-body p {
  margin-bottom: 0;
}

.project-steps {
  position: relative;
  overflow: hidden;
}

.project-steps__item {
  background-color: var(--white-color);
  border-radius: var(--radius-card);
  height: calc(100% - 30px);
  margin-bottom: 30px;
  padding: 30px;
  overflow: hidden;
}

.project-steps__item-header p {
  margin: 10px 0 0;
}

.project-steps__item-body {
  border-top: 1px solid var(--divider-color);
  padding-top: 30px;
  margin-top: 30px;
}

.project-steps__item-list ul {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}

.project-steps__item-list ul li {
  position: relative;
  line-height: 1.5em;
  margin-bottom: 20px;
  padding-left: 25px;
}

.project-steps__item-list ul li:last-child {
  margin-bottom: 0;
}

.project-steps__item-list ul li::before {
  position: absolute;
  font-size: 18px;
  color: var(--accent-color);
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/ui/check-circle.svg") center / contain no-repeat;
  mask: url("../images/icons/ui/check-circle.svg") center / contain no-repeat;
}

.project-steps__item.highlighted-box {
  background-color: var(--primary-color);
}

.project-steps__item.highlighted-box .project-steps__item-header h3,
.project-steps__item.highlighted-box .project-steps__item-header p,
.project-steps__item.highlighted-box .project-steps__item-list h3,
.project-steps__item.highlighted-box .project-steps__item-list ul li {
  color: var(--white-color);
}

.project-steps__item.highlighted-box .project-steps__item-body {
  border-color: var(--dark-divider-color);
}

.team__item {
  background-color: var(--secondary-color);
  border-radius: var(--radius-card);
  height: calc(100% - 30px);
  margin-bottom: 30px;
  padding: 20px;
}

.team__item-body {
  margin: 20px 0;
}

.team__item-body .team-name {
  font-size: var(--font-title);
  margin: 0;
}

.team__item-img {
  position: relative;
}

.team__item-img a {
  display: block;
  cursor: pointer;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.team__item-img a figure {
  display: block;
}

.team__item-img a img {
  width: 100%;
  object-fit: cover;
  object-position: top;
  aspect-ratio: 1 / 1.07;
  transition: transform 0.6s ease-in-out;
}

.team__item:hover .team__item-img a img {
  transform: scale(1.06);
}

.team__social-btn {
  position: absolute;
  top: -25px;
  right: 20px;
  border: 5px solid var(--secondary-color);
  border-radius: var(--radius-circle);
  z-index: 1;
}

.team__social-btn a {
  background: var(--accent-color);
  color: var(--white-color);
  height: 40px;
  width: 40px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.team__social-btn .team__vcard {
  width: 44px;
  height: 44px;
}

.team__vcard:hover {
  background-color: var(--accent-dark-color);
}

.team__vcard:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

.team__social-btn a i {
  font-size: 20px;
  color: inherit;
}

.team__socials {
  position: absolute;
  right: 25px;
  top: 60px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, top 0.4s ease-in-out;
  z-index: 1;
}

.team__item:hover .team__socials,
.team__item:focus-within .team__socials {
  opacity: 100%;
  visibility: visible;
  top: 40px;
}

.team__socials ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.team__socials ul li a {
  width: 40px;
  height: 40px;
  color: var(--primary-color);
  background: var(--white-color);
  border-radius: var(--radius-circle);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.4s ease-in-out;
}

.team__socials ul li a i {
  font-size: 18px;
}

.team__socials ul li a:hover {
  background: var(--accent-color);
}

.team-contact__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
  gap: 40px;
  align-items: start;
}

.team-contact__content .section-title {
  margin-bottom: 0;
}

.team-contact__content .section-title p {
  max-width: 640px;
  margin-bottom: 0;
}

.team-contact__cta {
  margin-top: 28px;
}

.team-contact__content .section-footer-text {
  margin-top: 28px;
  text-align: left;
}

.team-contact__content .section-footer-text.section-satisfy-img {
  justify-content: flex-start;
  gap: 10px 14px;
}

.team-contact__card-wrap {
  width: 100%;
  max-width: 360px;
  justify-self: end;
}

.team-contact__card-wrap--wide {
  max-width: 560px;
}

/*Gruppenfoto steht frei: ohne grauen Kasten und ohne Innenabstand.
   Das Seitenverhaeltnis folgt dem beschnittenen Foto, damit nichts abgeschnitten wird.*/

/*Company photo uses the shared team contact controls.*/

.team__item--company {
  height: auto;
  margin-bottom: 0;
  padding: 0;
  background-color: transparent;
}

/*4:5 passt zur Textspalte im Karriere-Einstieg; oben wird Himmel beschnitten.*/

.team__item--company.team__item--hoch .team__item-img a img {
  aspect-ratio: 4 / 5;
  object-position: center bottom;
}

.team__item--company .team__item-img a img {
  height: auto;
  aspect-ratio: 25 / 18;
  object-position: center;
}

/*Portrait variant for individual team members (Über uns).
   The card is a column so the photos line up even when titles wrap differently.*/

.about-team {
  padding-top: 0;
}

.team__item--portrait {
  display: flex;
  flex-direction: column;
}

.team__item--portrait .team__item-body {
  margin: 4px 0 24px;
}

.team__item--portrait .team__item-body p {
  margin: 6px 0 0;
  font-size: var(--font-secondary);
  line-height: var(--line-secondary);
}

/*Keep phone numbers available without hover on touch-capable devices.*/

.team__phone-touch {
  display: none;
}

@media (hover: none), (any-pointer: coarse) {
  .team__phone-touch {
    display: block;
  }

  .team__phone-touch a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    max-width: 100%;
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .team__phone-touch .hgi {
    flex-shrink: 0;
  }

  .team__phone-touch a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

.team__item--portrait .team__item-img {
  margin-top: auto;
}

.team__item--portrait .team__item-img a img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-position: center top;
}

/*Fotografische Kontur; das Fragezeichen bleibt echter Text in der Seitenschrift.*/
.team-vacancy-portrait {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  background: radial-gradient(ellipse at 52% 34%, #D9DBDB 0%, #C3C6C5 62%, #AEB1B0 100%);
}

.team-vacancy-portrait__silhouette {
  position: absolute;
  inset: 0;
  background: var(--primary-color);
  mask: var(--avatar-image) center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.team-vacancy-portrait__silhouette.is-active {
  opacity: 1;
}

.team-vacancy-portrait__silhouette--mann {
  --avatar-image: url("../images/ueber-uns/team/platzhalter-avatar.png");
}

.team-vacancy-portrait__silhouette--frau {
  --avatar-image: url("../images/ueber-uns/team/platzhalter-frau.png");
}

.team-vacancy-portrait__silhouette--hund {
  --avatar-image: url("../images/ueber-uns/team/platzhalter-hund.png");
  transform: translateX(-3%) scale(1.4);
  transform-origin: 50% 0;
}

@media (prefers-reduced-motion: reduce) {
  .team-vacancy-portrait__silhouette {
    transition: none;
  }
}

.team-vacancy-portrait__question {
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--default-font);
  font-size: var(--font-display-avatar);
  font-weight: 700;
  line-height: 1;
  color: var(--white-color);
  pointer-events: none;
}

/*Team slider (Über uns): native scroll-snap track, enhanced by initTeamSlider.
   Up to 5 cards per view on desktop; without JS the track still scrolls.*/

.team-slider {
  --team-per-view: 5;
  --team-gap: 24px;
  /*arrows and counter pill share one size at every breakpoint*/

  --team-control-size: 52px;
  position: relative;
}

.team-slider__track {
  display: flex;
  gap: var(--team-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /*room for the card hover effects, which the scroll box would otherwise clip*/

  padding-block: 30px 28px;
  margin-block: -30px -28px;
  border-radius: var(--radius-card);
  outline: none;
}

.team-slider__track::-webkit-scrollbar {
  display: none;
}

.team-slider__track:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft-color), 0 0 0 5px var(--accent-color);
}

.team-slider__track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.team-slider__track.is-dragging a {
  pointer-events: none;
}

.team-slider__slide {
  flex: 0 0 calc((100% - (var(--team-per-view) - 1) * var(--team-gap)) / var(--team-per-view));
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}

.team-slider__slide .team__item {
  width: 100%;
  height: auto;
  margin-bottom: 0;
  border: 0;
  transition: box-shadow 0.45s ease;
}

/*Keine Bewegung und kein Rahmen beim Hover - der Schatten reicht als Rueckmeldung.*/

.team-slider__slide .team__item:hover,
.team-slider__slide .team__item:focus-within {
  box-shadow: 0 18px 36px -22px rgba(23, 58, 52, 0.35);
}

.team-slider__slide .team__item-body .team-name {
  font-size: var(--font-title);
}

.team-slider__slide .team__item--portrait .team__item-body p {
  font-size: var(--font-small);
  line-height: var(--line-small);
}

.team-slider__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
}

.team-slider__progress {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  margin-right: 14px;
  border-radius: var(--radius-pill);
  background: var(--divider-color);
  overflow: hidden;
}

.team-slider__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--team-progress-size, 36%);
  border-radius: inherit;
  background: var(--accent-color);
  transform: translateX(var(--team-progress-offset, 0%));
  transition: transform 0.25s ease-out, width 0.25s ease-out;
}

.team-slider__nav {
  display: flex;
  gap: 10px;
}

.team-slider__btn {
  width: var(--team-control-size);
  height: var(--team-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--divider-color);
  border-radius: var(--radius-circle);
  background: var(--white-color);
  color: var(--primary-color);
  font-size: 22px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.team-slider__btn:hover:not(:disabled) {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--white-color);
}

.team-slider__arrow {
  display: block;
  width: var(--action-arrow-size);
  height: var(--action-arrow-size);
  background-color: currentColor;
  -webkit-mask: var(--action-arrow) center / contain no-repeat;
  mask: var(--action-arrow) center / contain no-repeat;
}

[data-team-slider-prev] .team-slider__arrow {
  transform: scaleX(-1);
}

.team-slider__btn:active:not(:disabled) {
  transform: scale(0.94);
}

.team-slider__btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.team-slider__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/*everything fits: no paging needed*/

.team-slider.is-static .team-slider__controls {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .team-slider__track {
    cursor: grab;
  }
}

@media (max-width: 1199px) {
  .team-slider {
    --team-per-view: 4;
  }
}

@media (max-width: 991px) {
  .team-slider {
    --team-per-view: 3;
    --team-gap: 20px;
  }
}

@media (max-width: 767px) {
  .team-slider {
    --team-per-view: 2;
    --team-gap: 16px;
  }

  .team-slider__controls {
    gap: 8px;
    margin-top: 28px;
  }

  .team-slider__progress {
    margin-right: 8px;
  }
}

/* On phones, display one complete card at a time. */

@media (max-width: 575px) {
  .team-slider {
    --team-per-view: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-slider__track {
    scroll-behavior: auto;
  }

  .team-slider__slide .team__item,
.team-slider__progress-bar {
    transition: none;
  }
}

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

.location-section .container {
  position: relative;
  z-index: 2;
}

.location-section__image-wrap {
  position: relative;
  padding: 0 60px 0 0;
  height: 100%;
  margin-right: 15px;
}

.location-section__image {
  height: 100%;
}

.location-section__image figure {
  height: 100%;
  display: block;
  border-radius: var(--radius-card);
}

.location-section__image img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1 / 1.24;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.location-section__content {
  height: 100%;
  align-content: center;
}

.location-section__body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: stretch;
}

.location-section__contact {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: calc(56% - 15px);
}

.location-card {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--white-color);
  border-radius: var(--radius-card);
  padding: 30px;
  height: 100%;
}

.location-card__body {
  width: 100%;
}

.location-card__body h3 {
  font-size: var(--font-title);
}

.location-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.location-card__title span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-area__link {
  display: inline-flex;
  align-items: center;
}

.service-area__link img {
  height: 1em;
  width: auto;
  display: block;
}

.location-card__body p {
  margin: 15px 0 0;
}

.location-card__body .location-card__contact-lines {
  border-top: 1px solid var(--divider-color);
  margin-top: 18px;
  padding-top: 18px;
}

.location-card__body .contact-vcard-download {
  border-top: 1px solid var(--divider-color);
  margin-top: 18px;
  padding-top: 18px;
}

.location-card__body .contact-vcard-download .product-download-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-xl);
  background: var(--secondary-color);
}

.location-card__body .contact-vcard-download .product-download-item strong {
  min-height: 40px;
  padding: 11px 18px;
}

.service-area {
  width: calc(44% - 15px);
  background: var(--primary-color);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 24px;
}

.service-area__card {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 395.047 / 448.967;
  margin: 0 auto;
}

.service-area__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  padding: 16px;
}

.service-area__image {
  opacity: 0.42;
  filter: brightness(0) invert(1);
}

.service-area__logo {
  opacity: 0.5;
  filter: brightness(0) invert(1);
}

.service-area__marker {
  color: var(--accent-color);
}

.service-area__dot {
  fill: currentColor;
}

.service-area__aura {
  fill: currentColor;
  opacity: 0.42;
  transform-box: fill-box;
  transform-origin: center;
  animation: service-area-pulse 2.8s ease-out infinite;
}

.service-area__aura--slow {
  opacity: 0.28;
  animation-delay: 1.1s;
}

@keyframes service-area-pulse {
  0% {
    transform: scale(1);
  }

  75%,
100% {
    opacity: 0;
    transform: scale(5.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-area__aura {
    animation: none;
    opacity: 0.34;
    transform: scale(3.4);
  }
}

.content-section__intro {
  margin-right: 15px;
}

.info-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/*Die Servicefakten stehen als eigenständige Karten untereinander.*/
.info-card-grid--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.info-card-grid--stacked .info-card {
  min-height: 0;
}

.info-card-grid--stacked .info-card__body p {
  font-weight: 400;
}

.info-card {
  min-height: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background-color: var(--secondary-color);
  border-radius: var(--radius-card);
  padding: 30px;
}

.info-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--divider-color);
  padding-bottom: 22px;
}

.info-card__rating ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-card__rating ul li i {
  color: var(--accent-color);
  font-size: 18px;
  line-height: 1;
}

.info-card__body {
  margin-top: 0;
  flex: 1 1 auto;
}

.info-card__body p {
  font-weight: 600;
  margin-bottom: 0;
}

.info-card__heading {
  width: auto;
  min-width: 0;
}

.info-card__heading p {
  margin: 0;
  font-size: var(--font-secondary);
  margin-top: 4px;
  line-height: var(--line-secondary);
}

.site-footer {
  padding: 100px 0 0;
}

.footer__about {
  max-width: 380px;
}

.footer__logo img {
  width: 100%;
  max-width: 170px;
  height: auto;
}

.footer__about-body {
  margin-top: 20px;
}

.footer__about-body p {
  color: var(--white-color);
  margin-bottom: 0;
}

.footer__links-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.footer__links {
  max-width: 34%;
}

.footer__links h3 {
  color: var(--white-color);
  margin-bottom: 25px;
}

.footer__links ul {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 20px;
}

.footer__links ul li {
  color: var(--white-color);
  line-height: 1.5em;
  margin-bottom: 20px;
}

.footer__links ul li:last-child {
  margin-bottom: 0;
}

.footer__links ul li::marker {
  color: var(--accent-color);
}

.footer__links ul li a {
  color: inherit;
  transition: color 0.3s ease-in-out;
}

.footer__links ul li a:hover {
  color: var(--accent-color);
}

.footer__links p {
  color: var(--white-color);
  margin-bottom: 30px;
}

.footer__newsletter {
  max-width: 43%;
}

.footer__newsletter .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--dark-divider-color);
  padding-bottom: 15px;
}

.footer__newsletter .form-group .form-control {
  width: calc(100% - 34px);
  font-size: var(--font-body);
  font-weight: 400;
  color: var(--white-color);
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  padding: 4px 20px 4px 8px;
  line-height: var(--line-body);
}

.footer__newsletter .form-group .form-control::placeholder {
  color: var(--white-color);
  opacity: 50%;
}

.footer__copyright {
  border-top: 1px solid var(--dark-divider-color);
  margin-top: 60px;
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}

.footer__copyright p {
  color: var(--white-color);
  margin-bottom: 0;
}

.footer__legal-links {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.footer__legal-links a {
  color: var(--white-color);
  transition: color 0.3s ease-in-out;
}

.footer__legal-links a:hover {
  color: var(--accent-color);
}

/* ==========================================================================
   04. Content sections, catalogue, contact, team and footer
   ========================================================================== */

.hero {
  position: relative;
  background-position: center center;
  padding: 190px 0 0 0;
  overflow: hidden;
  background-size: cover;
}

.hero__video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero--video .container {
  position: relative;
  z-index: 1;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 40%;
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero__info-box {
  position: relative;
  display: flex;

  gap: 30px;
  margin: 0 auto;
  background-color: var(--bg-color);

}

.hero__info-box::before,
.hero__info-box::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 20px;
  height: 20px;
  mask: url("../images/image-corner-bg-shape.svg");
  -webkit-mask: url("../images/image-corner-bg-shape.svg");
  background-color: var(--white-color);
  mask-repeat: no-repeat;
  mask-size: cover;
  transform: rotate(180deg);
  z-index: 1;
}

.hero__info-box::before {
  right: -20px;
  left: auto;
  transform: rotate(270deg);
}

/* ==========================================================================
   05. Responsive adaptations for the preceding components
   ========================================================================== */

@media only screen and (max-width: 1880px) {
  .bg-section {
    width: calc(100% - 40px);
  }
}

@media only screen and (max-width: 1440px) {
  :root {
    --mega-inner-max: 1300px;
  }

  .container {
    max-width: 1300px;
  }

  .hero-content {
    margin-right: 15px;
  }

  .about-us-image-box {
    margin-left: 0;
  }

  .about-info-item {
    --about-info-item-padding: 30px;
    padding: var(--about-info-item-padding);
  }

  .category-card-header {
    padding: 20px;
  }

  .why-choose-body-item {
    padding: 20px;
  }

  .approach-item-boxes {
    width: calc(40% - 15px);
  }

  .approach-item-box {
    padding: 20px;
  }

  .approach-item {
    width: calc(60% - 15px);
  }

  .page-category-list ul {
    padding: 30px;
  }

  .contact-info-item {
    padding: 30px;
  }

  .contact-us-form {
    padding: 40px;
  }

  .service__item {
    min-height: initial;
    padding: 30px 20px;
  }

  .why-choose__item {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .why-choose__counter {
    padding: 30px;
  }

  .project-steps__item {
    padding: 30px 25px;
  }

  .project-steps__item-list ul {
    margin-top: 20px;
  }

  .location-section__image-wrap {
    padding: 0 40px 0 0;
    margin-right: 0;
  }

  .location-card,
.service-area {
    padding: 20px;
  }

  .service-area__card {
    width: min(100%, 280px);
  }

  .info-card {
    padding: 20px;
  }

  .info-card__body {
    margin-top: 0;
  }

  .info-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media only screen and (max-width: 1024px) {
  .main-menu ul li {
    margin: 0;
  }

  .hero-content {
    height: auto;
    margin: 0 0 30px;
  }

  .hero-content .section-title p {
    max-width: 100%;
  }

  .about-us-content {
    margin-bottom: 30px;
  }

  .about-us-image img {
    aspect-ratio: 1 / 1.1;
  }

  .why-choose-us-image-box {
    height: auto;
    margin: 0px 0px 30px;
  }

  .why-choose-us-image,
.why-choose-us-image figure {
    height: auto;
  }

  .why-choose-us-image figure img {
    height: auto;
    aspect-ratio: 1 / 0.8;
  }

  .footer__hours {
    margin-top: 20px;
    padding-top: 20px;
  }

  .our-approach::after {
    width: 34px;
    height: 110px;
    opacity: 40%;
  }

  .our-approach::before {
    width: 100px;
    height: 105px;
    opacity: 40%;
  }

  .our-approach-content-box {
    margin: 0 0 30px;
  }

  .our-approach-image-box,
.our-approach-image-box figure {
    height: auto;
  }

  .our-approach-image-box img {
    aspect-ratio: 1 / 0.8;
  }

  .page-single-sidebar {
    margin-right: 0;
  }

  .page-category-list ul {
    padding: 20px;
  }

  .page-category-list ul li {
    margin-bottom: 15px;
    padding-bottom: 15px;
  }

  .legal-content {
    margin-bottom: 40px;
  }

  .contact-info-item {
    width: calc(50% - 15px);
  }

  .contact-us-form {
    width: 100%;
  }

  .hero {
    padding-bottom: 15px;
  }

  .hero__info-box {

    border-radius: var(--radius-card);

  }

  .hero__info-box::before,
.hero__info-box::after {
    display: none;
  }

  .services::after {
    width: 34px;
    height: 110px;
    opacity: 40%;
  }

  .services::before {
    width: 100px;
    height: 105px;
    opacity: 40%;
  }

  .why-choose__content {
    margin-bottom: 40px;
  }

  .why-choose__media {
    margin-left: 0;
  }

  .why-choose__img img {
    aspect-ratio: 1 / 0.9;
  }

  .project-steps::after {
    width: 34px;
    height: 110px;
    opacity: 40%;
  }

  .project-steps::before {
    width: 100px;
    height: 105px;
    opacity: 40%;
  }

  .location-section::before {
    width: 100px;
    height: 105px;
    opacity: 40%;
  }

  .location-section::after {
    width: 34px;
    height: 110px;
    opacity: 40%;
  }

  .location-section__image-wrap {
    height: auto;
    max-width: 800px;
    margin: 0 auto 30px;
  }

  .location-section__image,
.location-section__image figure,
.location-section__image img {
    height: auto;
  }

  .location-section__image img {
    aspect-ratio: 1 / 0.98;
  }

  .content-section__intro {
    margin: 0 0 30px;
  }

  .footer__about {
    margin: 0 0 30px 0;
    max-width: 100%;
    margin-bottom: 30px;
  }

  .footer__about-body {
    margin-top: 15px;
  }
}

@media only screen and (max-width: 991px) {
  .btn-default {
    padding: 12px 45px 12px 15px;
  }

  .btn-default::before {
    width: 31px;
    height: 31px;
  }

  .btn-default.btn-phone::before {
    background-size: 14px auto;
  }

  header.main-header {
    top: 0px;
  }

  header.main-header .header-sticky.active {
    width: 100%;
    border-radius: 0;
  }

  .navbar {

    border-radius: 0;
  }

  .responsive-menu,
.navbar-toggle {
    display: block;
  }

  .header-btn {
    display: none;
  }

  .bg-section {
    width: 100%;
    border-radius: 0;
    margin: 0;
  }

  .section-row {
    margin-bottom: 40px;
  }

  .section-title {
    margin-bottom: 30px;
  }

  .section-title h3,
.section-title .section-kicker {
    margin-bottom: 10px;
    padding: 6px 12px 6px 26px;
  }

  .section-title h3::before,
.section-title .section-kicker::before {
    left: 12px;
  }

  .section-title p {
    margin-top: 10px;
  }

  .section-footer-row {
    display: block;
  }

  .section-footer-row .section-footer-text {
    text-align: center;
  }

  .section-footer-row .section-footer-btn {
    margin-top: 20px;
    margin-left: 0;
    text-align: center;
  }

  .about-us {
    padding: 50px 0;
  }

  .section-footer-text {
    margin-top: 10px;
  }

  .category-card-header {
    padding: 10px;
  }

  .faq-accordion .accordion-item {
    margin-bottom: 20px;
  }

  .faq-accordion .accordion-header .accordion-button {
    padding: 15px 40px 15px 15px;
  }

  .faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
    font-size: 18px;
    right: 15px;
  }

  .faq-accordion .accordion-item .accordion-body {
    padding: 15px;
  }

  .footer__about-body {
    margin-top: 15px;
  }

  .footer__hours ul li {
    margin-bottom: 10px;
  }

  .page-header {
    margin-top: 0;

  }

  .page-header-box h1 {
    font-size: var(--font-h1);
    margin-bottom: 10px;
  }

  .our-approach {
    padding: 50px 0;
  }

  .approach-item-box-body {
    padding-top: 15px;
    margin-top: 15px;
  }

  .approach-item-body {
    margin-top: 20px;
    padding-top: 20px;
  }

  .approach-item-list ul li::before {
    font-size: 16px;
  }

  .page-resources {
    padding: 50px 0 20px;
  }

  .page-single-sidebar {
    position: initial;
  }

  .page-single-sidebar,
.page-category-list {
    margin-bottom: 30px;
  }

  .legal-content p {
    margin-bottom: 15px;
  }

  .legal-content h2 {
    font-size: var(--font-h2);
  }

  .contact-main-row__column {
    display: block;
  }

  .contact-main-row__column > .contact-us-form,
.contact-info-list--match-form,
.contact-info-list--match-form .contact-info-item {
    height: auto;
  }

  .contact-info-list--match-form {
    display: flex;
  }

  .page-contact-us {
    padding: 50px 0 25px;
  }

  .contact-info-item {
    padding: 20px;
  }

  .contact-info-item-body {
    gap: 10px;
    margin-top: 20px;
    padding-top: 0;
  }

  .contact-us-form {
    padding: 20px;
  }

  .contact-form-content {
    margin-bottom: 30px;
  }

  .contact-form-content p {
    margin: 15px 0 0;
  }

  .contact-form label {
    font-size: var(--font-secondary);
    margin-bottom: 10px;
    line-height: var(--line-secondary);
  }

  .contact-form .form-control {
    padding: 13px 15px;
  }

  .hero {
    margin-top: 0;
    padding-top: 140px;
  }

  .hero__service-grid {
    margin-top: 16px;
  }

  .hero__counters {
    padding-top: 20px;
  }

  .hero__counter p {
    margin-top: 5px;
  }

  .services {
    padding: 50px 0;
  }

  .service__item {
    min-height: initial;
    gap: 20px;
    padding: 20px;
  }

  .legal-card-list,
.legal-detail-grid {
    grid-template-columns: 1fr;
  }

  .service__item-btn {
    padding-top: 20px;
    margin-top: 20px;
  }

  .why-choose {
    padding: 50px 0;
  }

  .why-choose__list {
    padding-top: 30px;
  }

  .why-choose__item .icon-box {
    height: 50px;
    width: 50px;
  }

  .why-choose__item-body {
    width: calc(100% - 65px);
  }

  .why-choose__overlay {
    bottom: 20px;
    left: 20px;
    right: 20px;
  }

  .why-choose__overlay-body {
    margin-top: 20px;
    padding-top: 20px;
  }

  .why-choose__overlay-body ul li::before {
    font-size: 16px;
  }

  .why-choose__counter {
    padding: 20px;
  }

  .project-steps {
    padding: 50px 0;
  }

  .project-steps__item {
    padding: 20px;
  }

  .project-steps__item-body {
    padding-top: 20px;
    margin-top: 20px;
  }

  .project-steps__item-list ul li {
    margin-bottom: 15px;
  }

  .project-steps__item-list ul li::before {
    font-size: 16px;
  }

  .team {
    padding: 50px 0;
  }

  .team__item-body p {
    margin: 5px 0 0;
  }

  .location-section {
    padding: 50px 0;
  }

  .location-card__body {
    width: calc(100% - 120px);
  }

  .location-card__body h3 {
    font-size: var(--font-title);
  }

  .content-section {
    padding: 50px 0;
  }

  .info-card {
    min-height: initial;
  }

  .info-card__body {
    margin-top: 0;
  }

  .site-footer {
    padding: 50px 0 0;
    margin-bottom: 0px;
  }

  .footer__links h3 {
    margin-bottom: 15px;
  }

  .footer__links p {
    margin-bottom: 15px;
  }

  .footer__links ul li {
    margin-bottom: 10px;
  }

  .footer__copyright {
    margin-top: 30px;
    padding: 30px 0;
  }

  .section-padding {
    padding: 50px 0;
  }
}

@media only screen and (max-width: 767px) {
  .section-title h1 {
    font-size: var(--font-h1);
  }

  .section-title h2 {
    font-size: var(--font-h2);
  }

  .hero-content-body {
    gap: 15px;
  }

  .hero__partner-logos {
    gap: 18px;
  }

  .hero__partner-logos img {
    max-width: 112px;
    max-height: 28px;
  }

  .hero__partner-logos img:first-child {
    max-height: 34px;
  }

  .hero__partner-logos img.hero__partner-logo--schiller {
    max-width: 150px;
    max-height: 28px;
  }

  .about-us-image {
    width: 100%;
  }

  .about-info-item-list {
    height: auto;
    width: 100%;
  }

  .about-info-item {
    --about-info-item-padding: 20px;
    padding: var(--about-info-item-padding);
  }

  .about-us-item-counter {
    padding-bottom: 20px;
  }

  .about-us-item-counter .about-counter-title {
    font-size: var(--font-title);
  }

  .about-us-item-counter .about-counter-title span {
    font-size: var(--font-display-counter);
  }

  .why-choose-body-item {
    padding: 15px;
  }

  .why-choose-body-item-content p {
    margin: 5px 0 0;
  }

  .faq-accordion .accordion-header .accordion-button {
    padding: 12px 40px 12px 15px;
  }

  .faq-accordion .accordion-item .accordion-body {
    padding: 12px 15px;
  }

  .footer__links h3 {
    font-size: var(--font-title);
    margin-bottom: 15px;
  }

  .page-header-box h1 {
    font-size: var(--font-h1);
  }

  .approach-item-boxes {
    width: 100%;
    gap: 20px;
  }

  .approach-item {
    width: 100%;
  }

  .our-approach-image-box img {
    aspect-ratio: 1 / 1.16;
  }

  .legal-content h2 {
    font-size: var(--font-h2);
  }

  .legal-content h3 {
    font-size: var(--font-title);
  }

  .contact-info-item {
    width: 100%;
  }

  .contact-info-item-header h3 {
    font-size: var(--font-title);
  }

  .contact-form-content p {
    margin-top: 10px;
  }

  .hero__info-box {
    gap: 20px;
    margin-top: 30px;
    padding: 10px;
  }

  .hero__counter p {
    font-size: var(--font-small);
    line-height: var(--line-small);
  }

  .team-contact__shell {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .team-contact__card-wrap {
    max-width: 420px;
    justify-self: start;
  }

  .why-choose__counters,
.why-choose__img-wrap {
    width: 100%;
  }

  .why-choose__counters {
    grid-template-rows: auto;
    gap: 20px;
    height: auto;
  }

  .why-choose__img-wrap,
.why-choose__img,
.why-choose__img figure,
.why-choose__img img {
    height: auto;
  }

  .why-choose__img img {
    aspect-ratio: 1 / 1.2;
  }

  .why-choose__counter {
    margin-bottom: 20px;
  }

  .project-steps__item-list ul li {
    margin-bottom: 10px;
  }

  .location-section__image-wrap {
    padding: 0;
  }

  .location-section__contact {
    width: 100%;
    gap: 20px;
  }

  .location-card__body {
    width: 100%;
    text-align: center;
  }

  .location-card__body h3 {
    font-size: var(--font-title);
  }

  .service-area {
    width: 100%;
  }

  .info-card {
    gap: 20px;
  }

  .footer__links {
    max-width: 100%;
  }

  .footer__copyright {
    padding: 15px 0;
    justify-content: center;
  }
}

@media only screen and (max-width: 575px) {
  .hero__service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hero__chip-title {

    hyphens: auto;
    -webkit-hyphens: auto;

  }
}

/* ==========================================================================
   06. Product mega menu and product search
   ========================================================================== */

/*=========================================================
   Product mega menu
   - Uses the header container width
   - Hover/focus preview; links navigate, catalogue categories apply filters
   - No flicker (gap bridge)
   - Mobile: custom nav expands normally
   - Includes ALL inner .mega-* styling
=========================================================*/

:root {
  --mega-inner-max: 1500px;
}

/*Let the header frame act as the positioning anchor*/

.mega-nav-container {
  position: static;
}

/*---------------- DESKTOP (>= 992px) ----------------*/

@media (min-width: 992px) {
  /*keep LI static so panel positions relative to .header-sticky*/

  .main-menu ul li.mega-menu {
    position: static;
  }

  /*Panel width follows the header container, not the viewport*/

  .main-menu ul li.mega-menu > ul.mega-panel {
    display: none;
    margin: 0 !important;
    list-style: none;
    position: absolute;
    left: 50%;
    right: auto;
    top: 100%;
    width: min(calc(100% - var(--bs-gutter-x, 1.5rem)), calc(var(--mega-inner-max) + 36px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: translate(-50%, 10px) scale(1, 0.98);
    transform-origin: top;
    background: var(--menu-surface) !important;
    border: 1px solid var(--divider-color);
    border-radius: var(--radius-6xl);

    padding: 64px 24px;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    box-sizing: border-box;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .main-menu ul li.mega-menu.mega-menu--full > ul.mega-panel {
    left: 0;
    right: 0;
    width: auto !important;
    margin-left: 0 !important;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    transform: translate(0, 10px) scale(1, 0.98);
    border-radius: 0;
    padding: 64px 0;
  }

  .main-menu ul li.mega-menu > ul.mega-panel > li.mega-panel-shell {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-menu ul li.mega-menu .mega-panel-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }

  .main-menu ul li.mega-menu.mega-menu--full .mega-panel-inner {
    max-width: var(--mega-inner-max);
    margin: 0 auto;
  }

  /*Flicker fix: hover bridge fills the gap*/

  .main-menu ul li.mega-menu > ul.mega-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -35px;
    height: 35px;
    background: transparent;
    pointer-events: auto;
  }

  /*Open states*/

  .main-menu ul li.mega-menu:hover > ul.mega-panel,
.main-menu ul li.mega-menu:focus-within > ul.mega-panel,
.main-menu ul li.mega-menu.is-open > ul.mega-panel {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1, 1);
  }

  .main-menu ul li.mega-menu.is-dismissed > ul.mega-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .main-menu ul li.mega-menu.mega-menu--full:hover > ul.mega-panel,
.main-menu ul li.mega-menu.mega-menu--full:focus-within > ul.mega-panel,
.main-menu ul li.mega-menu.mega-menu--full.is-open > ul.mega-panel {
    transform: translate(0, 0) scale(1, 1);
  }
}

/*---------------- MOBILE (<= 991px) ----------------*/

@media (max-width: 991px) {
  /*With Bootstrap JS removed, explicitly swap menus*/

  .main-menu {
    display: none !important;
  }

  .responsive-menu {
    display: block !important;
  }

  .navbar-toggle {
    display: block !important;
  }

  /*Mobile nav: mega-panel becomes a normal nested list*/

  .mobile-nav ul.mega-panel {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-nav ul.mega-panel::before {
    display: none !important;
  }

  /*stack inner grid in mobile*/

  .mobile-nav .mega-panel-shell {
    margin: 0;
    padding: 0;
  }

  .mobile-nav .mega-panel-inner {
    display: grid;
    grid-template-columns: 1fr;

  }

  .mobile-nav .mega-tabs-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mobile-nav .mega-tab-list {
    gap: 0;
  }

  /*Gestapelt trennt eine Linie unten statt rechts.*/

  .mobile-nav .mega-tab-col {
    padding-right: 0;
    padding-bottom: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--divider-color);
  }

  .mobile-nav .mega-tab {
    min-height: 56px;
    padding: 10px 12px;
  }

  .mobile-nav .mega-product-columns {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /*Gestapelt trennt eine Linie oben statt links - sonst entsteht ein Einzug.*/

  .mobile-nav .mega-product-group {
    padding: 0;
  }

  .mobile-nav .mega-product-group + .mega-product-group {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--divider-color);
  }

  .mobile-nav .mega-product-image {
    aspect-ratio: 3 / 2;
  }
}

/*Desktop show/hide (explicit)*/

@media (min-width: 992px) {
  .main-menu {
    display: block !important;
  }

  .responsive-menu {
    display: none !important;
  }

  .navbar-toggle {
    display: none !important;
  }
}

/*=========================================================
   INNER MEGA MENU STYLES (your design, included)
=========================================================*/

/*Offenes Mega-Menue: der Seiteninhalt dahinter wird weichgezeichnet.
   z-index 90 liegt unter dem Header (100) - Navigationsleiste und Panel
   bleiben dadurch scharf. Keine Mausereignisse, damit Hover und Klicks
   im Menue unveraendert funktionieren.*/

body.has-mega-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(23, 58, 52, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.has-mega-open::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.mega-tabs-layout {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  gap: 38px;
  align-items: stretch;
}

/*Die Tabspalte traegt den Link 'Alle Produkte anzeigen' als Geschwister
   neben der Tabliste - ein Link gehoert nicht in eine role="tablist".*/

.mega-tab-col {
  display: grid;
  gap: 0;
  align-content: start;
  padding-right: 34px;
  border-right: 1px solid var(--divider-color);
}

.mega-tab-list {
  display: grid;
  gap: 0;
  align-content: start;
  padding: 0;
  background: transparent;
}

.mega-tab {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid var(--divider-color);
  border-radius: 0;
  background: transparent;
  color: var(--primary-color);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.2s ease-in-out;
}

/*Letzte Zeile der Spalte schliesst ohne Linie ab.*/

.mega-tab-col > .mega-tab-list:last-child > .mega-tab:last-child,
.mega-tab-col > .mega-tab:last-child {
  border-bottom: 0;
}

/*Der Link erbt sonst das Padding der allgemeinen Menuelinks und sitzt dadurch
   niedriger und eingerueckt als die Tab-Buttons daneben.*/

.main-menu ul li.mega-menu a.mega-tab--all,
.mobile-nav a.mega-tab--all {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 0;
  padding: 15px 2px !important;
  margin: 0 !important;
  border-radius: 0;
  color: var(--primary-color) !important;
  line-height: 1.2;
}

.mega-tab img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
  opacity: 0.9;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/*Erste Zeile der Spalte: fuehrt direkt zur Katalogseite.*/

.mega-tab--all .mega-tab-title {
  color: var(--primary-color);
}

.mega-tab-copy {
  display: grid;
  min-width: 0;
}

.mega-tab-title {
  display: block;
  color: var(--primary-color);
  font-size: var(--font-secondary);
  font-weight: 600;
  transition: color 0.2s ease-in-out;
  line-height: var(--line-secondary);
}

/*Keine Flaechen: der aktive Bereich wird ueber Farbe und Schriftschnitt
   markiert, Hover nur ueber die Farbe.*/

.mega-tab:hover,
.mega-tab:focus-visible {
  background: transparent;
  outline: 0;
}

.mega-tab:hover .mega-tab-title,
.mega-tab:focus-visible .mega-tab-title {
  color: var(--accent-color);
}

.mega-tab.is-active {
  background: transparent;
  outline: 0;
}

.mega-tab.is-active .mega-tab-title {
  color: var(--accent-color);
  font-weight: 800;
}

.mega-tab.is-active img,
.mega-tab:hover img,
.mega-tab:focus-visible img {
  opacity: 1;
  transform: translateY(-1px);
}

.mega-tab-panels {
  display: grid;
  min-width: 0;
}

.mega-tab-panel {
  display: grid;
  gap: 18px;
  height: 100%;
}

.mega-tab-panel[hidden] {
  display: none;
}

.mega-product-columns {
  display: grid;
  grid-template-columns: repeat(var(--mega-column-count, 4), minmax(0, 1fr));
  gap: 10px;
  height: 100%;
  min-height: 250px;
}

.mega-product-columns:has(> :nth-child(3):last-child) {
  --mega-column-count: 3;
}

.mega-product-columns:has(> :nth-child(2):last-child) {
  --mega-column-count: 2;
}

.mega-product-image {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  align-self: stretch;
}

/*Link fuellt die Figur und traegt nichts zur Hoehe bei*/

.main-menu ul li.mega-menu .mega-product-image__link,
.mobile-nav .mega-product-image__link {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0 !important;
  border-radius: inherit;
  overflow: hidden;
}

/*Nur das Produktbild selbst deckt die Flaeche, nicht das Logo in der Pill*/

.mega-product-image__link > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.mega-product-image__link:hover > img,
.mega-product-image__link:focus-visible > img {
  transform: scale(1.03);
}

/*Infobox im Pill-Design ueber dem Produktbild*/

.mega-image-pill {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--divider-color);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.25s ease;
}

.mega-product-image__link:hover .mega-image-pill,
.mega-product-image__link:focus-visible .mega-image-pill {
  background: var(--white-color);
}

.mega-image-pill__logo {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: 13px;
}

.mega-image-pill__name {
  min-width: 0;
  color: var(--primary-color);
  font-size: var(--font-small);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: var(--line-small);
}

.mega-image-pill__name::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 10px;
  background: var(--divider-color);
  vertical-align: -2px;
}

/*Spalten stehen frei: ohne Kasten und ohne Hintergrund. Getrennt wird ueber
   Abstand und eine feine Linie statt ueber Flaechen.*/

.mega-product-group {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 4px 26px 4px 0;
}

.mega-product-group + .mega-product-group {
  padding-left: 26px;
  border-left: 1px solid var(--divider-color);
}

.mega-product-group h3 {
  margin: 0 0 2px;
  min-height: 2.4em;
  color: var(--primary-color);
  font-size: var(--font-secondary);
  font-weight: 700;
  line-height: var(--line-secondary);
}

.mega-card-links {
  display: grid;
  gap: 7px;
  margin-top: auto;
}

.main-menu ul li.mega-menu .mega-card-links a,
.mobile-nav .mega-card-links a {
  display: block;
  width: 100%;
  padding: 4px 0 !important;
  color: var(--primary-color) !important;
  font-size: var(--font-secondary);
  font-weight: 600;
  text-decoration: none;
  line-height: var(--line-secondary);
}

.main-menu ul li.mega-menu .mega-card-links a:hover,
.main-menu ul li.mega-menu .mega-card-links a:focus,
.mobile-nav .mega-card-links a:hover,
.mobile-nav .mega-card-links a:focus {
  color: var(--accent-dark-color) !important;
}

.mega-search-row {
  margin-top: 8px;
}

/*Eingabe und Partnerlogos bilden eine gemeinsame, offen gerahmte Suchzeile.*/

.mega-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-block: 1px solid var(--divider-color);
}

.mega-search {
  color: var(--menu-text-muted);
}

/*Produkte mit direkt zugeordneten Dokumenten in einer gemeinsamen Liste.*/

.mega-search-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.mega-search-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mega-search-heading {
  flex: none;
  margin: 0 0 12px;
  font-size: var(--font-body);
  line-height: var(--line-body);
  color: var(--primary-color);
}

.mega-search-output .mega-search-results {
  /*Ohne das erbt die Liste die absolute Lage der Aufklappmenues.*/

  position: static;
  inset: auto;
  transform: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mega-search-output .mega-search-results,
.site-search__scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary-color) 20%, transparent) transparent;
}

.mega-search-output .mega-search-results:hover,
.site-search__scroll:hover {
  scrollbar-color: color-mix(in srgb, var(--primary-color) 32%, transparent) transparent;
}

.mega-search-output .suche-treffer {
  border-top: 1px solid var(--divider-color);
}

.mega-search-output .suche-treffer:first-child {
  border-top: 0;
}

.main-menu ul li.mega-menu .mega-search-results > li {
  margin: 0;
}

.main-menu ul li.mega-menu .mega-search-results a {
  /*Die allgemeinen Navigationslinks setzen ihr Padding mit !important.*/
  padding: 10px 0 !important;
  margin: 0;
}

.mega-search-field {
  min-width: 0;
}

/*Der Loeschknopf ist ein Flex-Element und schrumpfte sonst zum Oval.*/

.mega-search-clear {
  flex: none;
}

/*Partnerlogos rechts neben dem Suchfeld. Beide liegen als Graustufen-
   Silhouette vor - so traegt auch die weisse Schiller-Datei auf hellem Grund.*/

.mega-search-partner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  min-width: 0;
}

.mega-search-partner img {
  height: 22px;
  width: auto;
  filter: brightness(0);
  opacity: 0.34;
}

/*Die Trefferflaeche fuellt immer den Platz bis zum Bildschirmrand;
   laengere Listen scrollen innerhalb dieser Flaeche.*/

.mega-search-output {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  margin-top: 0;
  padding: 26px 0 24px;
  height: var(--mega-results-height, 320px);
  overflow: hidden;
}

.mega-search-output[hidden] {
  display: none;
}

@media (min-width: 992px) {
  .main-menu ul li.mega-menu > ul.mega-panel:has(.mega-search-output:not([hidden])) {
    padding-top: 24px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mega-panel:has(.mega-search-output:not([hidden])) .mega-tabs-layout {
    display: none;
  }
}

.mega-search-results {
  align-content: flex-start;
}

.mega-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 20px;
  border-radius: 0;
  background: var(--menu-surface);
  border: 1px solid var(--menu-border);
}

.mega-search-wrap i {
  opacity: 0.6;
}

.mega-search {
  width: 100%;
  border: 0;
  outline: none;
  font-size: var(--font-small);
  background: transparent;
  line-height: var(--line-small);
}

.mega-search-wrap--menu {
  margin-bottom: 0;
  padding: 0;
  gap: 16px;
  background: transparent;
  border: 0;
}

.mega-search-wrap--menu > i {
  flex: none;
  font-size: 24px;
  color: var(--accent-dark-color);
  opacity: 1;
}

.mega-search-wrap--menu .mega-search::placeholder {
  color: rgba(66, 85, 79, 0.45);
  font-weight: 400;
}

.mega-search-wrap--menu .mega-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
  font-family: inherit;
  font-size: var(--font-display-search);
  font-weight: 600;
  line-height: 1.25;
  color: var(--primary-color);
  appearance: none;
  -webkit-appearance: none;
}

.mega-search-wrap--menu .mega-search::-webkit-search-decoration,
.mega-search-wrap--menu .mega-search::-webkit-search-cancel-button,
.mega-search-wrap--menu .mega-search::-webkit-search-results-button,
.mega-search-wrap--menu .mega-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.mega-search-clear {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--surface-muted-color);
  color: var(--primary-color);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.mega-search-clear.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mega-search-clear:hover {
  background: var(--accent-soft-color);
}

.main-menu ul li.mega-menu > ul.mega-panel .mega-search-results {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.main-menu ul li.mega-menu > ul.mega-panel .mega-search-results a {
  visibility: visible !important;
  opacity: 1 !important;
}

/*Katalog-Button in der Mega-Suchzeile: die Menue-Link-Regeln
   (.main-menu ul li a) zuruecksetzen, damit der Standard-.btn-default greift*/

.mega-search-row .btn-default {
  justify-self: end;
  white-space: nowrap;
  padding: 13px 50px 13px 20px !important;
  color: var(--white-color) !important;
  background: var(--accent-color);
  border-radius: var(--radius-pill);
}

.mega-search-empty {
  padding: 12px 0;
  color: rgba(34,34,34,0.55);
  font-size: var(--font-small);
  line-height: var(--line-small);
}

@media (max-width: 991px) {
  .mobile-nav .mega-search-row {
    display: none !important;
  }

  /*Let links column breathe*/

  .mobile-nav .mega-panel-inner {
    gap: 0;
  }
}

body.lightbox-open {
  overflow: hidden;
}

/* ==========================================================================
   07. Contact dialog, product detail and shared contact CTAs
   ========================================================================== */

.contact-form-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(34, 34, 34, 0.84);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.contact-form-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.contact-form-modal__backdrop {
  position: absolute;
  inset: 0;
}

.contact-form-modal__dialog {
  position: relative;
  width: min(860px, 100%);
  max-height: min(88vh, 980px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--radius-5xl);
  overflow: hidden;
  background: var(--secondary-color);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.contact-form-modal__topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 16px 0;
}

.contact-form-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(34, 34, 34, 0.12);
  border-radius: var(--radius-circle);
  color: var(--primary-color);
  background: var(--white-color);
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.contact-form-modal__close i {
  font-size: 16px;
  line-height: 1;
}

.contact-form-modal__close:hover,
.contact-form-modal__close:focus-visible {
  background: var(--primary-color);
  color: var(--white-color);
  border-color: var(--primary-color);
}

.contact-form-modal__body {
  padding: 8px 32px 32px;
  overflow: auto;
}

.contact-form-modal__panel {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.contact-form-modal__loading,
.contact-form-modal__error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  border-radius: var(--radius-4xl);
  background: var(--secondary-color);
  text-align: center;
}

@media (max-width: 767px) {
  .contact-form-modal {
    padding: 16px;
  }

  .contact-form-modal__dialog {
    border-radius: var(--radius-3xl);
  }

  .contact-form-modal__topbar {
    padding: 12px 12px 0;
  }

  .contact-form-modal__body {
    padding: 6px 20px 20px;
  }

  .contact-form-modal__panel {
    padding: 0;
    border-radius: 0;
  }

  .team-contact__content .section-footer-text {
    margin-top: 24px;
  }
}

.product-data-card {
  height: 100%;
  padding: 34px;
  border-radius: var(--radius-5xl);
  background: var(--white-color);
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
}

.product-landing-hero {
  position: relative;
  padding: 150px 0 80px;
  background: var(--secondary-color);
}

.product-breadcrumb {
  margin-bottom: 28px;
}

.product-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-breadcrumb li {
  color: var(--primary-color);
  font-size: var(--font-small);
  line-height: var(--line-small);
}

.product-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: rgba(23, 58, 52, 0.35);
}

.product-breadcrumb a {
  color: var(--primary-color);
  transition: color 0.3s ease-in-out;
}

.product-breadcrumb a:hover,
.product-breadcrumb a:focus {
  color: var(--accent-dark-color);
}

.product-landing-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.product-landing-hero__media,
.product-landing-hero__content {
  min-width: 0;
  height: 100%;
}

.product-landing-hero__media {
  grid-column: 1 / span 5;
}

.product-hero-gallery {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  height: 100%;
}

.product-hero-gallery__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  min-height: 0;
  padding: 44px;
  border-radius: var(--radius-5xl);
  background: var(--white-color);
  border: 1px solid rgba(23, 58, 52, 0.10);
  overflow: hidden;
}

.product-landing-hero__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-hero-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.product-hero-gallery__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.15 / 1;
  padding: 12px;
  border: 1px solid rgba(23, 58, 52, 0.12);
  border-radius: var(--radius-xl);
  background: var(--white-color);
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.product-hero-gallery__thumb:hover,
.product-hero-gallery__thumb:focus-visible,
.product-hero-gallery__thumb.is-active {
  border-color: var(--accent-color);
  background: var(--white-color);
}

.product-hero-gallery__thumb:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
  outline-offset: 2px;
}

.product-hero-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/*Full-frame photos (a scene rather than a cut-out product) fill the stage.
   The stage padding stays visible as a clear white mount around them.*/

.product-landing-hero__image.is-full-frame,
.product-hero-gallery__thumb img.is-full-frame {
  object-fit: cover;
  border-radius: var(--radius-card);
}

.product-hero-gallery__thumb img.is-full-frame {
  border-radius: var(--radius-sm);
}

.product-landing-hero__content {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 0;
  background: transparent;
}

.product-landing-hero__content .section-title {
  margin-bottom: 28px;
}

.product-landing-hero__content .section-title p {
  max-width: 720px;
}

.product-detail .section-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: min(100%, 520px);
  white-space: normal;
  text-wrap: balance;
}

.product-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-width: none;
}

.product-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 0;
  padding: 24px 18px 22px;
  border-radius: var(--radius-2xl);
  background: var(--white-color);
  border: 1px solid rgba(23, 58, 52, 0.06);
  box-shadow: 0 18px 38px rgba(23, 58, 52, 0.08);
  text-align: center;
}

.product-feature-icon {
  display: block;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  color: var(--accent-color);
}

.product-feature-card span {
  color: var(--primary-color);
  font-size: var(--font-body);
  font-weight: 500;
  line-height: var(--line-body);
}

.product-download-list {
  display: grid;
  gap: 0;
  margin-top: 0;
}

.product-download-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--divider-color);
  color: var(--primary-color);
  transition: color 0.25s ease;
}

/*Letzte Zeile im Kasten braucht keine Trennlinie.*/

.product-spec-table > *:last-child .product-download-item:last-child,
.product-download-list .product-download-item:last-child {
  border-bottom: 0;
}

.product-download-item:hover,
.product-download-item:focus {
  background: var(--surface-muted-color);
  color: var(--primary-color);
}

.product-download-item:focus-visible,
.suche-treffer a.download-pill:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
  outline-offset: 2px;
}

.product-download-item span {
  min-width: 0;
  font-size: var(--font-body);
  overflow-wrap: anywhere;
  line-height: var(--line-body);
}

.product-download-item strong,
.suche-treffer a.download-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--white-color);
  font-size: var(--font-small);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.25s ease;
  line-height: var(--line-small);
}

.product-download-item:hover strong,
.product-download-item:focus strong {
  background: var(--accent-dark-color);
}

.product-download-item strong i {
  font-size: 13px;
  line-height: 1;
}

/*Hersteller, Kategorie, Produkt und Downloads sitzen in EINEM Kasten.
   Getrennt wird ueber feine Linien statt ueber einzelne Flaechen.*/

.product-spec-table {
  display: grid;
  gap: 0;
  padding: 4px 24px;
  border-radius: var(--radius-3xl);
  background: var(--surface-muted-color);
}

.product-spec-row {
  display: grid;
  grid-template-columns: minmax(78px, 0.58fr) minmax(0, 2.2fr);
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--divider-color);
}

.product-spec-row span {
  color: var(--primary-color);
  font-size: var(--font-body);
  min-width: 0;
  overflow-wrap: break-word;
  line-height: var(--line-body);
}

.product-spec-row strong {
  color: var(--accent-color);
  font-size: var(--font-body);
  text-align: right;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  line-height: var(--line-body);
}

.product-data-card h3 {
  font-size: var(--font-card-title);
  margin-bottom: 16px;
}

.product-intro-card {
  margin-bottom: 24px;
}

.product-intro-row {
  margin-bottom: 24px;
}

.product-intro-copy p {
  margin-bottom: 16px;
  color: var(--primary-color);
}

.product-intro-copy p:last-child {
  margin-bottom: 0;
}

.contact-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--divider-color);
}

.contact-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 560px;
}

/*Katalog-CTAs mit grossen Symbolen aus dem gemeinsamen Icon-Satz.*/

.contact-cta--boxed {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 24px;
  padding: 34px;
  border: 0;
  border-radius: 0;
  background-color: var(--secondary-color);
}

.contact-cta__icon {
  width: 76px;
  height: 76px;
  align-self: center;
  color: var(--accent-dark-color);
}

@media (max-width: 1199px) {
  .contact-cta--boxed {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .contact-cta--boxed .contact-cta__actions {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .contact-cta--boxed {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    padding: 24px;
  }

  .contact-cta__icon {
    width: 64px;
    height: 64px;
  }

  .contact-cta--boxed .contact-cta__actions {
    grid-column: 1 / -1;
  }
}

.contact-cta__copy strong,
.contact-cta--stacked > strong {
  color: var(--heading-color);
  font-size: var(--font-title);
  line-height: 1.25;
}

.contact-cta__copy span,
.contact-cta--stacked > span {
  color: var(--primary-color);
  font-size: var(--font-secondary);
  line-height: var(--line-secondary);
}

.contact-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-cta__actions .btn-default {
  display: inline-flex;
  align-items: center;
  min-width: 180px;
  justify-content: center;
  text-align: center;
}

.product-intro-specs .product-spec-row {
  grid-template-columns: minmax(0, 155px) minmax(0, 1fr);
}

.product-intro-specs .product-spec-row strong {
  text-align: left;
}

/*Spec table: label and value carry the same weight - the accent colour alone
   marks the value - and the whole right column shares one left edge, so the
   download buttons line up with the values above them.*/

.product-intro-specs .product-spec-row span,
.product-intro-specs .product-spec-row strong,
.product-intro-specs .product-download-item span,
.product-intro-specs .product-download-item strong {
  font-weight: 600;
}

/*Each row is its own grid, so the columns only line up if their widths do not
   depend on the text. A percentage resolves identically for every row.*/

.product-intro-specs .product-spec-row,
.product-intro-specs .product-download-item {
  grid-template-columns: 45% minmax(0, 1fr);
}

.product-intro-specs .product-download-item strong {
  justify-self: start;
}

/*RPM Selector*/

/*RPM Selector End*/

@media (max-width: 991px) {
  .product-landing-hero {
    padding: 120px 0 60px;
  }

  .product-landing-hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .product-landing-hero__media,
.product-landing-hero__content {
    grid-column: auto;
    height: auto;
  }

  .product-landing-hero__content {
    display: flex;
    flex-direction: column;
  }

  .product-feature-grid {
    height: auto;
    grid-template-rows: auto;
  }

  .product-feature-card {
    min-height: 150px;
  }

  .product-hero-gallery {
    grid-template-rows: auto auto;
  }

  .product-hero-gallery__stage {
    min-height: 340px;
  }

  .product-data-card {
    padding: 28px;
  }
}

@media (max-width: 767px) {
  .product-landing-hero {
    padding: 104px 0 48px;
  }

  .product-breadcrumb {
    margin-bottom: 18px;
  }

  .product-hero-gallery,
.product-landing-hero__content,
.product-hero-gallery__stage {
    border-radius: var(--radius-4xl);
  }

  .product-hero-gallery__stage {
    min-height: 260px;
    padding: 24px;
  }

  .product-hero-gallery__thumbs {
    grid-template-columns: repeat(4, minmax(64px, 1fr));
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .product-hero-gallery__thumb {
    min-width: 54px;
    padding: 8px;
    border-radius: var(--radius-lg);
  }

  .product-landing-hero__content {
    padding: 24px;
  }

  .product-feature-grid {
    grid-template-columns: 1fr;
  }

  .product-download-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .product-download-item strong {
    width: 100%;
  }

  .product-spec-row {
    grid-template-columns: 1fr;
  }

  .product-spec-row strong {
    text-align: left;
  }

  .product-data-card {
    padding: 24px;
    border-radius: var(--radius-4xl);
  }

  .product-intro-specs .product-spec-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .contact-cta {
    align-items: stretch;
  }

  .contact-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .contact-cta__actions .btn-default {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1199px) {
  .product-catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .product-overview {
    padding: 80px 0;
  }

  .product-catalog__toolbar {
    padding: 14px calc(50vw - 50%);
  }

  .product-catalog__toolbar-main {
    margin-bottom: 16px;
  }

  .product-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-catalog.is-list .product-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .product-overview {
    padding: 70px 0;
  }

  .product-card,
.product-catalog__empty {
    border-radius: var(--radius-xl);
  }

  .product-card p {
    font-size: var(--font-secondary);
    line-height: var(--line-secondary);
  }

  .product-catalog__toolbar {
    padding: 14px calc(50vw - 50%);
  }

  .product-catalog__toolbar-main {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
  }

  .product-catalog__search {
    flex-basis: 100%;
  }

  .product-catalog__view-switch {
    display: none;
  }

  .product-catalog__view-buttons {
    width: auto;
    justify-content: flex-start;
  }

  .product-catalog__view-buttons button {
    flex: 0 0 auto;
  }

  .product-catalog__filter-row {
    flex-direction: column;
  }

  .product-catalog__search-wrap input {
    font-size: var(--font-body);
    line-height: var(--line-body);
  }

  .product-catalog__filter-group {
    display: none;
  }

  .product-catalog__filter-select-wrap {
    display: block;
  }

  .product-catalog__filter-select {
    height: 48px;
    font-size: var(--font-body);
    line-height: var(--line-body);
  }

  .product-catalog__grid {
    grid-template-columns: 1fr;
  }

  .product-card__body {
    padding: 22px;
  }

  .product-card h3 {
    font-size: var(--font-title);
  }

  .product-card__footer {
    gap: 10px;
  }

  .product-catalog.is-list .product-card {
    grid-template-columns: 1fr;
  }
}

/*Scroll reveal (site.js initScrollReveal): one consistent fade-up.
   Uses the independent `translate` property so element transforms stay untouched,
   and the transition only applies while the reveal runs.*/

.reveal-pending {
  opacity: 0;
  translate: 0 24px;
}

.reveal-run {
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  transition-delay: var(--reveal-delay, 0s) !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-pending {
    opacity: 1;
    translate: none;
  }
}

/* ==========================================================================
   08. Shared navigation refinements, service, partners, history, FAQ and map
   ========================================================================== */

/*Treumedizin header: white navigation with green system colors.*/

header.main-header .header-sticky,
header.main-header .header-sticky.active {
  background: var(--menu-surface);
  border-bottom: 1px solid var(--divider-color);
  border-radius: 0;
  box-shadow: none;
}

.navbar {
  padding: 16px 0;
  backdrop-filter: none;
}

.navbar-brand img {
  width: auto;
  height: 38px;
  max-height: 38px;
}

.header-btn {
  flex: none;
}

.header-btn .btn-phone {
  white-space: nowrap;
}

/*Keep the desktop navigation on one line before switching to the mobile menu.*/
@media (min-width: 992px) and (max-width: 1399px) {
  .header-btn .btn-phone {
    width: 46px;
    height: 46px;
    padding: 0;
    vertical-align: middle;
  }

  .header-btn .btn-phone__label {
    display: none;
  }

  .header-btn .btn-phone::before {
    right: 6px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand img {
    width: 220px;
    height: auto;
  }
}

.main-menu ul li a {
  color: var(--menu-text);
}

.main-menu ul li a:hover,
.main-menu ul li a:focus {
  color: var(--accent-dark-color);
}

.main-menu ul ul {
  background: var(--menu-surface);
  border: 1px solid var(--menu-border);
  box-shadow: none;
}

.main-menu ul ul li a {
  color: var(--menu-text);
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus {
  color: var(--accent-dark-color);
}

.main-menu ul li.mega-menu > ul.mega-panel .mega-search-results {
  border: 0 !important;
  background: transparent !important;
}

@media (min-width: 992px) {
  .main-menu ul li.mega-menu > ul.mega-panel {
    box-shadow: none;
  }
}

@media only screen and (max-width: 991px) {
  header.main-header,
header.main-header .header-sticky.active {
    background: var(--menu-surface);
    --mobile-nav-offset: 60px;
  }

  .navbar {
    min-height: var(--mobile-nav-offset);
    padding: 13px 0;
  }

  .mega-nav-container {
    flex-wrap: nowrap;
  }

  .navbar-brand {
    flex: 0 1 auto;
    width: 208px;
    max-width: calc(100% - 114px);
    min-width: 0;
  }

  .navbar-brand img {
    width: 100%;
    height: auto;
    max-height: 26px;
    object-fit: contain;
    object-position: left center;
  }

  .navbar-toggle {
    flex: none;
  }

  .mobile-nav {
    top: var(--mobile-nav-offset);
    height: calc(100vh - var(--mobile-nav-offset));
    height: calc(100dvh - var(--mobile-nav-offset));
  }

  .page-header {
    --page-header-offset: 60px;
    min-height: 225px;
    padding: var(--page-header-offset) 0 0;
    background-position: center center !important;
  }
}

/*==========================================================
   SERVICE BENEFITS — 2×3 grid, icon right / headline left
==========================================================*/

.service-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}

.service-benefits-grid .why-choose-body-item {
  flex-direction: column;
  gap: 12px;
}

.service-benefits-grid .why-choose-body-item-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.service-benefits-grid .why-choose-body-item-heading .icon-box {
  order: 2;
  flex-shrink: 0;
}

.service-benefits-grid .why-choose-body-item-heading h3 {
  order: 1;
  margin: 0;
  font-size: var(--font-title);
}

.service-benefits-grid .why-choose-body-item-content {
  width: 100%;
}

.service-benefits-grid .why-choose-body-item-content p {
  margin: 0;
}

/* Additional certificate beside the service contact area. */
.service-certificate {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
}

.service-certificate > div {
  flex: 1 1 180px;
  min-width: 0;
}

.service-certificate h3 {
  margin: 0 0 8px;
  font-size: var(--font-title);
}

.service-certificate p {
  margin: 0 0 12px;
}

@media only screen and (max-width: 767px) {
  .service-benefits-grid {
    grid-template-columns: 1fr;
  }
}

/*==========================================================
   SERVICE MODULES — 2×3 grid, green headlines
==========================================================*/

.service-modules__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}

.service-modules__grid > div {
  display: flex;
  flex-direction: column;
}

.service-modules__grid .approach-item-box {
  flex: 1;
}

.service-modules__grid .approach-item-box-title h3 {
  color: var(--accent-color);
}

.service-modules .col-xl-7 {
  padding-right: 48px;
}

@media only screen and (max-width: 1199px) {
  .service-modules .col-xl-7 {
    padding-right: 15px;
  }
}

@media only screen and (max-width: 767px) {
  .service-modules__grid {
    grid-template-columns: 1fr;
  }
}

/*==========================================================
   PARTNER SUMMARY — manufacturer overview
==========================================================*/

.partner-summary .row {
  align-items: stretch;
}

.partner-summary .row > [class*="col-"] {
  display: flex;
}

.partner-summary .content-section__intro {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.partner-summary .content-section__intro .section-title {
  margin-bottom: 22px;
}

.partner-summary__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 0;
  flex: 0 0 auto;
  aspect-ratio: 21 / 9;
  min-height: 0;
}

.partner-summary__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

.partner-summary__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
  height: auto;
}

.partner-summary__card {
  background: var(--secondary-color);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/*Gold-Partner-Badge im Philips-Kasten: sitzt unter dem Text, linksbuendig.*/

.partner-summary__awards {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
}

.partner-summary__badge {
  width: 130px;
  height: 117px;
  overflow: hidden;
}

/*Vorschau des Philips-Fachhaendler-Zertifikats, verlinkt auf das PDF.*/

.partner-summary__certificate {
  display: block;
  flex: none;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-summary__certificate:hover,
.partner-summary__certificate:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.partner-summary__certificate img {
  display: block;
  width: 83px;
  height: 117px;
}

/*Crop the baked-in white border and shadow around the 260 x 239 source.*/

.partner-summary__badge img {
  display: block;
  width: 160px;
  max-width: none;
  height: auto;
  transform: translate(-15px, -15px);
}

.partner-summary__logo {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider-color);
}

.partner-summary__logo img {
  max-height: 44px;
  width: auto;
  display: block;
}

.partner-summary__card--schiller .partner-summary__logo img {
  max-width: 230px;
  filter: brightness(0);
}

.partner-summary__card h3 {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider-color);
}

@media only screen and (max-width: 1199px) {
  .partner-summary .row > [class*="col-"] {
    display: block;
  }

  .partner-summary .content-section__intro,
.partner-summary__grid,
.partner-summary__card {
    height: auto;
  }

  .partner-summary__grid {
    grid-template-rows: auto;
    margin-top: 24px;
  }
}

@media only screen and (max-width: 767px) {
  .partner-summary__image {
    aspect-ratio: 16 / 9;
  }

  .partner-summary__grid {
    grid-template-columns: 1fr;
  }
}

/*==========================================================
   ISO certifications
==========================================================*/

.about-certifications .our-approach-content-box {
  margin-right: 0;
}

.about-certifications .approach-item {
  width: 100%;
}

.about-certifications .approach-item-boxes {
  width: 100%;
  flex-direction: column;
}

.about-certifications .certification-card {
  width: 100%;
  box-sizing: border-box;
}

.certification-card .approach-item-box-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.certification-card .approach-item-box-body p {
  min-width: 0;
}

.certification-card .approach-item-box-body span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--secondary-color);
  color: var(--primary-color);
  font-size: var(--font-small);
  font-weight: 700;
  transition: background-color 0.25s ease, color 0.25s ease;
  line-height: var(--line-small);
}

.certification-card .approach-item-box-body span::before {
  font-size: 13px;
  line-height: 1;
  color: var(--accent-color);
  transition: color 0.25s ease;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/ui/pdf.svg") center / contain no-repeat;
  mask: url("../images/icons/ui/pdf.svg") center / contain no-repeat;
  vertical-align: -0.15em;
}

.certification-card:hover .approach-item-box-body span,
.certification-card:focus-visible .approach-item-box-body span {
  background: var(--accent-color);
  color: var(--white-color);
}

.certification-card:hover .approach-item-box-body span::before,
.certification-card:focus-visible .approach-item-box-body span::before {
  color: var(--white-color);
}

@media only screen and (max-width: 575px) {
  .certification-card .approach-item-box-body {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*==========================================================
   UEBER UNS — 16:9 image in "Wir arbeiten für Ihren Erfolg"
==========================================================*/

p + .why-choose-us-image-box--wide {
  margin-top: 24px;
}

.section-title p:has(+ .why-choose-us-image-box--wide) {
  margin-bottom: 24px;
}

.why-choose-us-image-box--wide .why-choose-us-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.why-choose-us-image-box--wide .why-choose-us-image figure {
  height: 100%;
  margin: 0;
}

.why-choose-us-image-box--wide .why-choose-us-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*Keep the location and service photographs in their intended portrait crop.*/

.site-photo--portrait,
.site-photo--portrait figure {
  height: auto;
}

.site-photo--portrait {
  width: 100%;
  align-self: center;
}

.site-photo--portrait img {
  height: auto;
  aspect-ratio: 3 / 4;
}

/*==========================================================
   HISTORY TIMELINE
==========================================================*/

.about-timeline {
  position: relative;
  padding-left: 32px;
}

.about-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: var(--accent-color);
  opacity: 0.25;
}

.about-timeline__item {
  position: relative;
  background: var(--secondary-color);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 12px;
}

.about-timeline__item:last-child {
  margin-bottom: 0;
}

.about-timeline__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  background: var(--accent-color);
  border: 2px solid var(--white-color);
  box-shadow: 0 0 0 2px var(--accent-color);
}

.about-timeline__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.about-timeline__year,
.about-timeline__header h3 {
  font-size: var(--font-title);
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.about-timeline__year {
  color: var(--accent-color);
  flex-shrink: 0;
}

.about-timeline__header h3 {
  color: var(--primary-color);
}

.about-timeline__item > p {
  margin: 0;
  font-size: var(--font-small);
  line-height: var(--line-small);
}

/*==========================================================
   SECTION INLINE CTA — buttons inline with separator
==========================================================*/

.section-inline-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  border-top: 1px solid var(--divider-color);
  padding-top: 32px;
  margin-top: 20px;
}

.section-inline-cta__button {
  flex-shrink: 0;
}

.section-inline-cta__contact {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-inline-cta__contact-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.section-inline-cta__contact-content p {
  margin: 0;
  line-height: 1.3;
}

@media only screen and (max-width: 575px) {
  .section-inline-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .section-inline-cta__contact {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }

  .section-inline-cta__contact::before {
    display: none;
  }
}

/*Sits below the intro card, so it needs room to breathe*/

.product-faq-row {
  margin-top: 72px;
}

/*Wide gutter so the copy column and the questions read as two separate blocks.
   This grid hard-codes 15px column padding, so the gutter is set directly
   rather than through --bs-gutter-x.*/

.product-faq-card > .row {
  margin-left: -40px;
  margin-right: -40px;
  align-items: stretch;
}

.product-faq-card > .row > [class*="col-"] {
  padding-left: 40px;
  padding-right: 40px;
}

.product-faq-col {
  display: flex;
  flex-direction: column;
}

.product-faq-card .faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-faq-card .faq-accordion .accordion-item {
  margin-bottom: 0;
}

.product-faq-card {
  padding: 46px;
}

.product-faq-card .section-title {
  margin-bottom: 20px;
}

.product-faq-card .product-faq-intro p:last-child {
  margin-bottom: 0;
}

.contact-cta--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  justify-content: flex-start;
}

.product-faq-card .product-faq-intro {
  margin-bottom: 28px;
}

.contact-cta--stacked .btn-default {
  margin-top: 6px;
}

/*Bootstrap setzt auf .accordion-item einen Rahmen - hier bewusst ohne.*/

.faq-accordion .accordion-item {
  border: 0;
}

.faq-accordion .accordion-header {
  margin: 0;
}

.faq-accordion .accordion-button {
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.faq-accordion .accordion-button:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: -2px;
}

.product-faq-card .faq-accordion .accordion-button::after,
.product-faq-card .faq-accordion .accordion-button.collapsed::after {
  content: "+";
  font-family: inherit;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--primary-color);
  /*Bootstrap paints its own chevron here as a background image*/

  background-image: none;
  width: auto;
  height: auto;
  transform: translateY(-50%);
}

.product-faq-card .faq-accordion .accordion-button:not(.collapsed)::after {
  content: "−";
  color: var(--white-color);
}

@media only screen and (max-width: 991px) {
  .product-faq-row {
    margin-top: 44px;
  }

  .product-faq-card > .row {
    margin-left: -15px;
    margin-right: -15px;
  }

  .product-faq-card > .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
  }

  .product-faq-card .faq-accordion {
    justify-content: flex-start;
    height: auto;
  }

  .product-faq-card {
    padding: 30px 24px;
  }

  .product-faq-card .section-title {
    margin-bottom: 14px;
  }

  .contact-cta--stacked {
    margin-top: 22px;
    padding-top: 22px;
  }
}

/*<i class="hgi"> wraps an inline <svg><use>; the <i> keeps the sizing and colour
   rules the site already had for icon elements.*/

.hgi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -0.125em;
  flex: none;
}

.hgi svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

svg.product-feature-icon {
  overflow: visible;
}

/*992-1024px: die Liste sitzt in einer halben Spalte, dort ist nur Platz fuer eine Box.
   Steht am Dateiende, weil die aeltere max-width-1024-Regel sonst gewinnt.*/

@media only screen and (min-width: 992px) and (max-width: 1024px) {
  .contact-info-item {
    width: 100%;
  }
}

/*=========================================================
   Lagekarte (Anfahrt) - Inline-SVG aus OpenStreetMap-Daten.
   Massstab: 2 SVG-Einheiten je Meter. Die Flaechen bleiben
   bewusst kuehl im Markengruen, keine warmen Kartentoene.
=========================================================*/

.lmap-section {
  padding-top: 0;
}

.lmap {
  position: relative;
  margin: 0;
}

.lmap__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--secondary-color);
  height: clamp(420px, 46vw, 660px);
}

.lmap__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.lmap__svg--top {
  pointer-events: none;
}

.lmap__svg--top .m-start {
  pointer-events: auto;
}

.lmap__svg :is(path,
use,
rect,
circle) {
  vector-effect: non-scaling-stroke;
}

/*--- Flaechen ---*/

.m-ground {
  fill: var(--secondary-color);
}

.m-green {
  fill: #E7EFE7;
}

.m-wood {
  fill: #DCE7DC;
}

.m-water {
  fill: #D9E3ED;
  stroke: #C3D2E0;
  stroke-width: 1.2;
  fill-rule: evenodd;
}

.m-river {
  fill: none;
  stroke: #D9E3ED;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.m-bldg {
  fill: #E3E9E4;
}

/*--- Strassen: erst Fuehrung, dann Fuellung ---*/

:is(.m-main-c,
.m-link-c,
.m-res-c,
.m-svc-c,
.m-ped-c) {
  fill: none;
  stroke: #D3DBD5;
  stroke-linejoin: round;
}

:is(.m-main,
.m-link,
.m-res,
.m-svc,
.m-ped) {
  fill: none;
  stroke: var(--white-color);
  stroke-linejoin: round;
}

.m-main-c {
  stroke-width: 11;
}

.m-main {
  stroke-width: 9;
}

.m-link-c {
  stroke-width: 8;
}

.m-link {
  stroke-width: 6.5;
}

.m-res-c {
  stroke-width: 6.5;
}

.m-res {
  stroke-width: 5;
}

.m-svc-c {
  stroke-width: 4;
}

.m-svc {
  stroke-width: 3;
}

.m-ped-c {
  stroke-width: 5;
}

.m-ped {
  stroke-width: 3.5;
}

.m-foot {
  fill: none;
  stroke: #CDD6D0;
  stroke-width: 1.3;
}

.m-rail {
  fill: none;
  stroke: #B6C0B9;
  stroke-width: 2.4;
  stroke-dasharray: 10 7;
}

/*--- Routen ---*/

.m-route {
  opacity: 0;
}

.m-route.is-playing {
  opacity: 1;
}

.m-route-c {
  fill: none;
  stroke: var(--white-color);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0.92;
}

.m-route-l {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.m-route.is-playing .m-route-l {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: lmapDraw 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lmapDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-route.is-playing .m-route-l {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/*--- Markierungen ---*/

.m-home {
  filter: drop-shadow(0 3px 5px rgb(22 64 41 / 12%));
}

.m-home__b {
  fill: var(--white-color);
  stroke: #D3DBD5;
  stroke-width: 1;
  stroke-linejoin: round;
}

.m-start {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.m-start__b {
  fill: var(--white-color);
  stroke: var(--primary-color);
  stroke-width: 2.4;
}

.m-start__t {
  fill: var(--primary-color);
  font-size: var(--font-body);
  font-weight: 700;
  text-anchor: middle;
  line-height: var(--line-body);
}

.m-start[aria-pressed="true"] .m-start__b {
  fill: var(--primary-color);
  stroke: var(--primary-color);
}

.m-start[aria-pressed="true"] .m-start__t {
  fill: var(--white-color);
}

.m-start:focus-visible .m-start__b {
  stroke: var(--accent-color);
  stroke-width: 4;
}

/*--- Bedienfeld ---*/

.lmap__panel {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  width: min(360px, 42%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--white-color);
  box-shadow: 0 18px 40px -26px rgba(23, 58, 52, 0.4);
}

.lmap__adr {
  margin: 0;
  font-style: normal;
  font-size: var(--font-body);
  color: var(--primary-color);
  line-height: var(--line-body);
}

.lmap__routes {
  display: grid;
  border-top: 1px solid var(--divider-color);
}

.lmap__btn {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--divider-color);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.lmap__btn i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--primary-color);
  border-radius: 0;
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-color);
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.lmap__btn b {
  display: block;
  font-size: var(--font-secondary);
  font-weight: 600;
  color: var(--primary-color);
  line-height: var(--line-secondary);
}

.lmap__btn small {
  display: block;
  font-size: var(--font-small);
  color: var(--primary-color);
  opacity: 0.68;
  line-height: var(--line-small);
}

.lmap__btn em {
  font-style: normal;
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--primary-color);
  line-height: var(--line-small);
}

.lmap__btn:is(:hover,
:focus-visible) b,
.lmap__btn:is(:hover,
:focus-visible) em {
  color: var(--accent-dark-color);
}

.lmap__btn[aria-pressed="true"] i {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: var(--white-color);
}

.lmap__ext {
  margin-top: 4px;
  justify-self: start;
}

/*--- Legende, Massstab, Quellenangabe ---*/

.lmap__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  margin-top: 18px;
}

.lmap__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-small);
  color: var(--primary-color);
  line-height: var(--line-small);
}

.lmap__legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lmap__legend i {
  width: 20px;
  height: 3px;
  border-radius: 2px;
}

.lmap__legend .lg-route {
  background: var(--accent-color);
}

.lmap__legend .lg-road {
  background: #D3DBD5;
}

.lmap__legend .lg-rail {
  height: 0;
  border-top: 2px dashed #B6C0B9;
}

.lmap__legend .lg-water {
  height: 11px;
  border-radius: 3px;
  background: #D9E3ED;
  border: 1px solid #C3D2E0;
}

.lmap__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: var(--font-small);
  color: var(--primary-color);
  line-height: var(--line-small);
}

.lmap__scale {
  position: relative;
  display: inline-block;
  flex: none;
  width: 120px;
  padding-bottom: 4px;
  border: 1px solid var(--primary-color);
  border-top: 0;
  font-size: var(--font-small);
  text-align: center;
  line-height: var(--line-small);
}

@media only screen and (max-width: 991px) {
  .lmap__frame {
    height: clamp(380px, 60vw, 520px);
  }

  .lmap__panel {
    position: static;
    width: 100%;
    margin-top: 16px;
    padding: 22px;
    box-shadow: none;
    background: var(--secondary-color);
  }

  .lmap__cap {
    margin-top: 14px;
  }
}

@media only screen and (max-width: 575px) {
  .lmap__frame {
    height: 340px;
  }

  .lmap__legend {
    gap: 6px 16px;
    font-size: var(--font-small);
    line-height: var(--line-small);
  }

  .lmap__meta {
    width: 100%;
  }
}

/* ==========================================================================
   09. Careers and application form
   ========================================================================== */

/*--- Hinweis: aktuell keine offenen Stellen ------------------------------*/

.karriere-status {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--surface-muted-color);
  border-left: 3px solid var(--accent-color);
  padding: 26px 30px;
  margin-top: 10px;
}

.karriere-status .icon-box {
  flex: none;
  margin-top: 2px;
}

.karriere-status__title {
  display: block;
  font-size: var(--font-title);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 6px;
}

.karriere-status p {
  margin: 0;
  font-size: var(--font-body);
  line-height: var(--line-body);
}

.karriere-status p + p {
  margin-top: 10px;
}

/*--- Teamreihe mit Avataren ----------------------------------------------*/

.team-row {
  text-align: center;
}

.team-row__strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: 18px 0 10px;
  margin: 0;
  list-style: none;
}

.team-row__item {
  position: relative;
  margin-left: clamp(-24px, -1.6vw, -14px);
}

.team-row__item:first-child {
  margin-left: 0;
}

.team-row__link {
  position: relative;
  display: block;
  width: clamp(40px, 5vw, 72px);
  height: clamp(40px, 5vw, 72px);
  border-radius: var(--radius-circle);
  background: var(--surface-muted-color);
  box-shadow: 0 0 0 3px var(--white-color);
  overflow: hidden;
  transition: box-shadow 0.35s ease-in-out;
}

.team-row__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-row__item:hover,
.team-row__item:focus-within {
  z-index: 3;
}

.team-row__link:hover,
.team-row__link:focus-visible {
  box-shadow: 0 0 0 3px var(--white-color), 0 0 0 6px var(--accent-color);
  outline: none;
}

/*Name und Rolle liegen ueber dem Bild - die Reihe bleibt beim Hover ruhig.*/

.team-row__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  min-width: 190px;
  max-width: 260px;
  background: var(--primary-color);
  color: var(--white-color);
  padding: 10px 14px;
  font-size: var(--font-small);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
  pointer-events: none;
  z-index: 4;
  line-height: var(--line-small);
}

.team-row__tip strong {
  display: block;
  font-weight: 600;
}

.team-row__tip span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--font-small);
  margin-top: 2px;
  line-height: var(--line-small);
}

.team-row__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--primary-color);
}

.team-row__item:hover .team-row__tip,
.team-row__item:focus-within .team-row__tip {
  opacity: 1;
  visibility: visible;
}

/*Der letzte Platz in der Reihe ist der freie Platz.*/

.team-row__item--join {
  margin-left: clamp(4px, 1vw, 14px);
}

.team-row__join {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 5vw, 72px);
  height: clamp(40px, 5vw, 72px);
  border-radius: var(--radius-circle);
  background: var(--accent-color);
  color: var(--white-color);
  box-shadow: 0 0 0 3px var(--white-color);
  font-size: var(--font-body);
  transition: background-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
  line-height: var(--line-body);
}

.team-row__join:hover,
.team-row__join:focus-visible {
  background: var(--primary-color);
  color: var(--white-color);
  box-shadow: 0 0 0 3px var(--white-color), 0 0 0 6px var(--accent-color);
  outline: none;
}

.team-row__count {
  display: block;
  font-size: var(--font-small);
  color: var(--text-color);
  margin-top: 18px;
  line-height: var(--line-small);
}

.team-row__cta {
  margin-top: 22px;
}

/*Ein gemeinsamer Kartenblock für die Initiativbewerbung.*/
.karriere-bewerbung-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 30px;
}

.karriere-bewerbung-grid .contact-info-item {
  width: 100%;
}

@media (max-width: 767px) {
  .karriere-bewerbung-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

/*Inhalte der Kontaktkarten*/

.contact-info-item-body-title {
  width: 100%;
}

.contact-info-item-body-title > p {
  margin: 0 0 14px;
}

.contact-info-item-body-title > p:last-child {
  margin-bottom: 0;
}

.contact-info-item-top .hgi {
  font-size: 22px;
  color: var(--accent-color);
  flex: none;
  margin-top: 2px;
}

.contact-info-item-body-title .btn-default {
  margin-top: 6px;
}

/*Kompakter Ablauf in der Bewerbungskarte*/

.karriere-ablauf {
  counter-reset: ablauf;
  list-style: none;
  margin: 0;
  padding: 0;
}

.karriere-ablauf li {
  counter-increment: ablauf;
  position: relative;
  padding: 0 0 18px 52px;
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: 18px;
}

.karriere-ablauf li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .karriere-ablauf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .karriere-ablauf li {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

.karriere-ablauf li::before {
  content: counter(ablauf);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  /*Gleiche Farbgebung wie die Symbolkreise der Vorteilskacheln.*/

  background: var(--accent-color);
  color: var(--white-color);
  font-size: var(--font-secondary);
  font-weight: 700;
  line-height: 34px;
  text-align: center;
}

.karriere-ablauf strong {
  display: block;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 3px;
  line-height: var(--line-body);
}

.karriere-ablauf span {
  display: block;
  font-size: var(--font-secondary);
  color: var(--text-color);
  line-height: var(--line-secondary);
}

/*Die Teamreihe sitzt im Desktop rechts neben der Ueberschrift. Links bleibt
   der Text knapp, damit beide Haelften zusammen eine Zeile ergeben.*/

.team-split .section-title p {
  max-width: 46ch;
}

@media only screen and (min-width: 992px) {
  .team-split .team-row {
    text-align: left;
  }

  .team-split .team-row__strip {
    justify-content: flex-start;
  }
}

/*Auf schmalen Geraeten zaehlt der weisse Ring der Avatare mit - sonst
   stossen der erste und der letzte an den Seitenrand.*/

@media only screen and (max-width: 575px) {
  .team-row__strip {
    padding-left: 4px;
    padding-right: 4px;
  }

  .team-row__link,
.team-row__join {
    width: clamp(28px, 8.4vw, 40px);
    height: clamp(28px, 8.4vw, 40px);
  }

  .team-row__item {
    margin-left: clamp(-13px, -2.8vw, -9px);
  }

  .team-row__join {
    font-size: var(--font-body);
    line-height: var(--line-body);
  }
}

/*--- Bewerbungsformular ---------------------------------------------------*/

/*Das Auswahlfeld uebernimmt die Flaeche von .contact-form .form-control und
   bekommt nur den fehlenden Pfeil.*/

.bewerbung-form select.form-control {
  appearance: none;
  background-image: url("../images/icons/ui/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
  padding-right: 48px;
  cursor: pointer;
}

.bewerbung-form textarea.form-control {
  resize: vertical;
}

.bewerbung-form__hint {
  display: block;
  font-size: var(--font-small);
  color: var(--text-color);
  margin-top: 7px;
  line-height: var(--line-small);
}

.bewerbung-form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*Ablagefeld fuer die Unterlagen*/

.bewerbung-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white-color);
  border: 2px dashed var(--divider-color);
  padding: 24px 26px;
  cursor: pointer;
  transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}

.bewerbung-drop:hover,
.bewerbung-drop.is-over,
.bewerbung-drop:focus-within {
  border-color: var(--accent-color);
  background: var(--accent-soft-color);
}

.bewerbung-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.bewerbung-drop__icon {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-circle);
  /*Helles Gruen mit dunklem Symbol - dasselbe Paar wie beim Hover der
	   Hero-Kacheln und bei den Mengenangaben.*/

  background: var(--accent-soft-color);
  color: var(--accent-dark-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}

.bewerbung-drop__copy strong {
  display: block;
  font-size: var(--font-card-title);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.bewerbung-drop__copy span {
  display: block;
  font-size: var(--font-small);
  color: var(--text-color);
  line-height: var(--line-small);
}

.bewerbung-dateien {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.bewerbung-dateien:empty {
  margin: 0;
}

.bewerbung-datei {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white-color);
  border-left: 3px solid var(--accent-color);
  padding: 12px 14px;
}

.bewerbung-datei + .bewerbung-datei {
  margin-top: 8px;
}

.bewerbung-datei__icon {
  flex: none;
  font-size: 19px;
  color: var(--accent-dark-color);
}

.bewerbung-datei__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-secondary);
  color: var(--primary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: var(--line-secondary);
}

.bewerbung-datei__size {
  flex: none;
  font-size: var(--font-small);
  color: var(--text-color);
  line-height: var(--line-small);
}

.bewerbung-datei__remove {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--surface-muted-color);
  color: var(--primary-color);
  font-size: var(--font-small);
  cursor: pointer;
  transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
  line-height: var(--line-small);
}

.bewerbung-datei__remove:hover,
.bewerbung-datei__remove:focus-visible {
  background: var(--primary-color);
  color: var(--white-color);
  outline: none;
}

/*Einwilligungen*/

.bewerbung-form .contact-consent + .contact-consent {
  margin-top: 14px;
}

.bewerbung-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 28px;
}

.bewerbung-form__secure {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-small);
  color: var(--text-color);
  max-width: 42ch;
  line-height: var(--line-small);
}

.bewerbung-form__secure .hgi {
  font-size: inherit;
  width: 3em;
  height: 3em;
  color: var(--accent-dark-color);
  flex: none;
}

/*Fortschritt waehrend der Uebertragung*/

.bewerbung-form__progress {
  display: none;
  width: 100%;
  height: 4px;
  background: var(--divider-color);
  margin-top: 22px;
  overflow: hidden;
}

.bewerbung-form.is-sending .bewerbung-form__progress {
  display: block;
}

.bewerbung-form__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent-color);
  transition: width 0.2s linear;
}

.bewerbung-form.is-sending button[type="submit"] {
  pointer-events: none;
  opacity: 0.6;
}

.bewerbung__status {
  margin-top: 20px;
}

.bewerbung__status:empty {
  margin-top: 0;
}

@media only screen and (max-width: 991px) {
  .karriere-status {
    padding: 22px;
    gap: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .team-row__tip {
    display: none;
  }

  .bewerbung-drop {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .bewerbung-form__footer {
    gap: 16px;
  }
}

/* ==========================================================================
   10. Homepage shortcuts and counters
   ========================================================================== */

/*Die Zahlenreihe steht jetzt im Hero unter dem Knopf.*/

.hero-content .hero__counters {
  max-width: 760px;
  margin-top: 34px;
  padding-top: 28px;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-content .hero__counter {
  width: calc(33.33% - 16px);
  text-align: left;
}

.hero-content .hero__counter::before {
  right: -12px;
  background: rgba(255, 255, 255, 0.22);
}

.hero-content .hero__counter .counter-value {
  font-size: var(--font-display-counter);
}

@media (min-width: 992px) {
  .hero-content .hero__counters {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.1fr) minmax(0, 1.25fr);
    max-width: 860px;
    gap: 32px;
  }

  .hero-content .hero__counter {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    min-width: 0;
  }

  .hero-content .hero__counter::before {
    right: -16px;
  }

  .hero-content .hero__counter .counter-value {
    flex: none;
    white-space: nowrap;
  }

  .hero-content .hero__counter p:not(.counter-value) {
    margin: 0;
    max-width: 145px;
  }
}

/*Die beiden Textspalten liegen frei auf dem Bild - keine Flaechen mehr.*/

.hero__info-box {
  flex-wrap: wrap;
  align-items: flex-start;
  background: transparent;
  border-radius: 0;
  margin-top: 70px;
  padding: 0;
  row-gap: 28px;
}

.hero__info-box::before,
.hero__info-box::after {
  display: none;
}

/*Sechs kompakte Kacheln in einer Reihe, frei auf dem Hintergrundbild.*/

.hero__info-box .hero__service-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
  margin-top: 6px;
  border-top: 0;
  padding: 0;
}

/*Unter den Kacheln bleibt Luft zum Abschluss des Heros.*/

.hero--video {
  padding-bottom: 80px;
}

@media only screen and (max-width: 1279px) {
  .hero__info-box .hero__service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 1024px) {
  .hero__info-box {
    margin-top: 60px;
    padding: 0;
  }
}

@media only screen and (max-width: 767px) {
  .hero-content .hero__counters {
    gap: 16px;
    margin-top: 26px;
    padding-top: 22px;
  }

  .hero-content .hero__counter {
    width: calc(33.33% - 11px);
  }
}

@media only screen and (max-width: 575px) {
  .hero__info-box .hero__service-grid {
    grid-auto-rows: 1fr;
    gap: 10px;
  }

  .hero--video {
    padding-bottom: 50px;
  }
}

/*--- Hero-Kacheln: Inhalt und Gestaltung ---*/

.hero__chip {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--white-color);
  color: var(--primary-color);
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/*Die SVG-Symbole nehmen als Maske die Akzentfarbe an.*/

.hero__chip-icon {
  width: 38px;
  height: 38px;
  flex: none;
  background-color: var(--accent-color);
  -webkit-mask: var(--chip-icon) center / contain no-repeat;
  mask: var(--chip-icon) center / contain no-repeat;
  transition: background-color 0.3s ease-in-out;
}

/*Die Symboldatei je Kachel. Der Pfad steht hier und nicht im Markup,
   weil relative URLs in Custom Properties gegen das Stylesheet aufloesen.*/

.hero__chip--patientenueberwachung .hero__chip-icon {
  --chip-icon: url("../images/icons/treumedizin/patientenueberwachung-line.svg");
}

.hero__chip--reanimation .hero__chip-icon {
  --chip-icon: url("../images/icons/treumedizin/reanimation-line.svg");
}

.hero__chip--geburtsueberwachung .hero__chip-icon {
  --chip-icon: url("../images/icons/treumedizin/geburtsueberwachung-line.svg");
}

.hero__chip--kardiologie .hero__chip-icon {
  --chip-icon: url("../images/icons/treumedizin/kardiologie-line.svg");
}

.hero__chip--service .hero__chip-icon {
  --chip-icon: url("../images/icons/treumedizin/service-line.svg?v=2");
}

.hero__chip--it-support .hero__chip-icon {
  --chip-icon: url("../images/icons/treumedizin/it-support-line.svg");
}

.hero__chip-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 11px;
  min-width: 0;
}

.hero__chip-title {
  display: block;
  font-size: var(--font-secondary);
  font-weight: 600;
  color: var(--primary-color);
  hyphens: auto;
  -webkit-hyphens: auto;
  line-height: var(--line-secondary);
}

.hero__chip-desc {
  display: block;
  font-size: var(--font-small);
  color: var(--text-color);
  line-height: var(--line-small);
}

.hero__chip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--divider-color);
}

.hero__chip-meta {
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-dark-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-small);
}

.hero__chip-arrow {
  width: var(--action-arrow-size);
  height: var(--action-arrow-size);
  flex: none;
  background-color: var(--accent-color);
  -webkit-mask: var(--action-arrow) center / contain no-repeat;
  mask: var(--action-arrow) center / contain no-repeat;
  transition: background-color 0.3s ease-in-out;
}

.hero__chip:hover,
.hero__chip:focus-visible {
  background: var(--accent-soft-color);
  border-color: var(--accent-color);
  outline: none;
}

.hero__chip:hover .hero__chip-icon {
  background-color: var(--accent-dark-color);
}

.hero__chip:hover .hero__chip-arrow,
.hero__chip:focus-visible .hero__chip-arrow {
  background-color: var(--accent-dark-color);
}

@media only screen and (max-width: 1279px) {
  /*Drei Spalten bedeuten deutlich groessere Quadrate - Symbol und Text
	   wachsen mit, damit die Kachel nicht leer wirkt.*/

  .hero__chip {
    padding: 28px;
  }

  .hero__chip-icon {
    width: 58px;
    height: 58px;
  }

  .hero__chip-text {
    margin-top: 16px;
    gap: 6px;
  }

  .hero__chip-title {
    font-size: var(--font-secondary);
    line-height: var(--line-secondary);
  }

  .hero__chip-desc {
    font-size: var(--font-secondary);
    line-height: var(--line-secondary);
  }

  .hero__chip-foot {
    padding-top: 12px;
  }

  .hero__chip-meta {
    font-size: var(--font-small);
    line-height: var(--line-small);
  }
}

/*Ab hier werden die Quadrate kleiner als die Tabletfassung vertraegt -
   Symbol und Text gehen eine Stufe zurueck.*/

@media only screen and (max-width: 991px) {
  .hero__chip {
    padding: 20px;
  }

  .hero__chip-icon {
    width: 44px;
    height: 44px;
  }

  .hero__chip-text {
    margin-top: 13px;
    gap: 5px;
  }

  .hero__chip-title {
    font-size: var(--font-secondary);
    line-height: var(--line-secondary);
  }

  .hero__chip-desc {
    font-size: var(--font-secondary);
    line-height: var(--line-secondary);
  }

  .hero__chip-foot {
    padding-top: 10px;
  }

  .hero__chip-meta {
    font-size: var(--font-small);
    line-height: var(--line-small);
  }
}

/*Unter 768 px waeren drei Spalten zu schmal fuer Symbol und Text.*/

@media only screen and (max-width: 767px) {
  .hero__info-box .hero__service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 575px) {
  .hero__chip {
    padding: 14px;
  }

  .hero__chip-icon {
    width: 32px;
    height: 32px;
  }

  .hero__chip-text {
    margin-top: 10px;
    gap: 3px;
  }

  .hero__chip-title {
    font-size: var(--font-small);
    line-height: var(--line-small);
  }

  .hero__chip-desc {
    font-size: var(--font-small);
    line-height: var(--line-small);
  }

  .hero__chip-foot {
    padding-top: 8px;
  }

  .hero__chip-meta {
    font-size: var(--font-small);
    letter-spacing: 0.4px;
    line-height: var(--line-small);
  }
}

/*Unter 420 px reicht die Quadratseite fuer den Text nicht mehr aus. Dort
   wachsen die Kacheln mit dem Inhalt und bleiben untereinander gleich hoch.*/

@media only screen and (max-width: 419px) {
  .hero__chip {
    aspect-ratio: auto;
  }
}

/*Kompakte Hero-Variante: Hoehe folgt dem Inhalt statt einem Quadrat.*/
.hero__chip--compact {
  aspect-ratio: auto;
  padding: 14px;
}

.hero__chip--compact .hero__chip-icon {
  width: 32px;
  height: 32px;
}

.hero__chip--compact .hero__chip-text {
  margin: 8px 0 12px;
  gap: 2px;
  overflow-wrap: anywhere;
}

.hero__chip--compact .hero__chip-desc {
  font-size: var(--font-small);
  line-height: var(--line-small);
}

.hero__chip--compact .hero__chip-foot {
  padding-top: 8px;
}

.hero__chip--compact .hero__chip-meta {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 575px) {
  .hero__chip--compact {
    padding: 12px;
  }

  .hero__chip--compact .hero__chip-icon {
    width: 28px;
    height: 28px;
  }

  .hero__chip--compact .hero__chip-text {
    margin: 6px 0;
  }

  .hero__chip--compact .hero__chip-foot {
    padding-top: 6px;
  }
}

/* ==========================================================================
   11. Site search overlay and search results
   ========================================================================== */

/*Verlinkte Vorschlaege bei einer Suche ohne Treffer.*/

.suche-chip {
  display: inline-block;
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--primary-color);
  background: var(--secondary-color);
  border: 1px solid var(--divider-color);
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;
  line-height: var(--line-small);
}

.suche-chip:hover,
.suche-chip:focus-visible {
  background: var(--accent-soft-color);
  border-color: var(--accent-color);
  color: var(--accent-dark-color);
  outline: none;
}

.suche-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.suche-treffer + .suche-treffer {
  border-top: 1px solid var(--divider-color);
}

.suche-treffer a {
  display: block;
  padding: 12px 0;
  margin: 0;
  text-decoration: none;
}

.suche-treffer > a:not(.download-pill):hover,
.suche-treffer > a:not(.download-pill):focus-visible {
  background: transparent;
  outline: none;
}

.suche-treffer > a:hover .suche-treffer__titel,
.suche-treffer > a:focus-visible .suche-treffer__titel {
  color: var(--accent-dark-color);
}

.suche-treffer > a:focus-visible .suche-treffer__titel {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.suche-treffer__art {
  display: block;
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-dark-color);
  margin-bottom: 6px;
  line-height: var(--line-small);
}

.suche-treffer__titel {
  display: block;
  font-size: var(--font-title);
  font-weight: 600;
  line-height: 1.25;
  color: var(--primary-color);
  margin-bottom: 7px;
  transition: color 0.25s ease-in-out;
}

.suche-treffer__text {
  display: block;
  font-size: var(--font-body);
  color: var(--text-color);
  line-height: var(--line-body);
}

/*Kompakte Varianten fuer Produktsuche und direkte PDF-Links.*/

.suche-treffer--compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 28px;
}

.suche-treffer__produkt {
  min-width: 0;
}

.suche-treffer__dokumente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
}

.suche-treffer a.download-pill--compact {
  min-height: 32px;
  padding: 5px 12px;
  gap: 6px;
  max-width: 100%;
  white-space: normal;
}

.suche-treffer a.download-pill {
  color: var(--white-color);
}

.suche-treffer a.download-pill:hover,
.suche-treffer a.download-pill:focus {
  background: var(--primary-color);
  color: var(--white-color);
}

.main-menu ul li.mega-menu .mega-search-results a.download-pill--compact {
  padding: 5px 12px !important;
}

.suche-dokument > span:first-child {
  overflow-wrap: anywhere;
}

.suche-treffer__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 3px;
}

.suche-treffer--compact .suche-treffer__titel {
  font-size: var(--font-body);
  line-height: var(--line-body);
  font-weight: 700;
  margin-bottom: 0;
}

.suche-treffer__kategorie {
  font-size: var(--font-small);
  line-height: var(--line-small);
  color: var(--text-color);
}

.suche-treffer--compact .suche-treffer__text {
  font-size: var(--font-secondary);
  line-height: var(--line-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.suche-treffer__format {
  font-size: var(--font-small);
  line-height: var(--line-small);
  flex: none;
  font-weight: 400;
}

.suche-leer {
  background: var(--surface-muted-color);
  border-left: 3px solid var(--accent-color);
  padding: 30px;
  margin-top: 10px;
}

.suche-leer h3 {
  font-size: var(--font-title);
  margin-bottom: 12px;
}

.suche-leer p {
  margin: 0 0 16px;
}

.suche-leer p:last-child {
  margin-bottom: 0;
}

.suche-leer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .suche-treffer--compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .suche-treffer__dokumente {
    padding-bottom: 8px;
  }

  .suche-treffer__titel {
    font-size: var(--font-title);
  }

  .suche-treffer__text {
    font-size: var(--font-secondary);
    line-height: var(--line-secondary);
  }

  .suche-leer {
    padding: 22px;
  }
}

.header-search {
  --search-button-size: 46px;
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 var(--search-button-size);
  width: var(--search-button-size);
  height: var(--search-button-size);
  margin-right: 14px;
  z-index: 2;
}

.header-search__trigger {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--search-button-size);
  height: var(--search-button-size);
  padding: 0;
  border: 1px solid var(--divider-color);
  border-radius: var(--radius-pill);
  background: var(--white-color);
  color: var(--primary-color);
  font-size: 19px;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.header-search__symbol {
  position: relative;
  flex: 0 0 calc(var(--search-button-size) - 2px);
  height: 100%;
}

.header-search__symbol .hgi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.18s ease, transform 0.25s ease;
}

.header-search__symbol .icon-times {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.header-search.is-open .header-search__trigger {
  background: var(--white-color);
  border-color: var(--accent-dark-color);
  color: var(--primary-color);
}

.header-search.is-open .icon-search {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.header-search.is-open .icon-times {
  opacity: 1;
  transform: translate(-50%, -50%);
}

body.has-site-search header.main-header {
  z-index: 1201;
}

.main-menu .nav-menu-wrapper {
  transition: opacity 0.16s ease;
}

body.has-site-search .main-menu .nav-menu-wrapper {
  opacity: 0.4;
  filter: grayscale(1);
  pointer-events: none;
}

.header-search__trigger:hover,
.header-search__trigger:focus-visible {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--white-color);
  outline: none;
}

/*Im dunklen Kopfbereich steht der Knopf hell.*/

.dark-section .header-search__trigger {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white-color);
}

/*Die Suchflaeche beginnt unterhalb des sichtbaren Headers.*/

.site-search {
  position: fixed;
  inset: var(--site-search-top, 80px) 0 0;
  z-index: 1200;
  background: var(--white-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease-in-out, visibility 0s linear 0.22s;
}

.site-search.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Beim Einstieg aus dem Mega-Menue ist die wandernde Suchzeile sofort sichtbar. */
.site-search--products.is-open {
  transition: none;
}

.site-search__form .mega-search-partner[hidden] {
  display: none;
}

.site-search__form .mega-search-partner {
  flex: none;
}

@media (max-width: 991px) {
  .site-search__form .mega-search-partner {
    display: none;
  }
}

.site-search__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/*Die Eingabezeile bleibt oben stehen, die Treffer scrollen darunter.*/

.site-search__bar {
  flex: none;
  border-bottom: 1px solid var(--divider-color);
  background: var(--white-color);
}

.site-search__form {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
}

.site-search__icon {
  flex: none;
  font-size: 24px;
  color: var(--accent-dark-color);
}

.site-search__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: var(--font-display-search);
  font-weight: 600;
  line-height: 1.25;
  color: var(--primary-color);
  background: transparent;
  border: 0;
  padding: 4px 0;
  outline: none;
}

/*Chromium blendet im Suchfeld ein eigenes Kreuz ein - das Overlay hat
   bereits eines im Header.*/

.site-search__input::-webkit-search-cancel-button,
.site-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.site-search__input::placeholder {
  color: rgba(66, 85, 79, 0.45);
  font-weight: 400;
}

.site-search__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 0 60px;
}

/*Die Vorschlagskacheln sind dieselben wie im Hero - nur das Raster steht
   hier fuer sich, weil die Heroregeln an .hero__info-box haengen.*/

.site-search__cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

/*Im Hero liegen die Kacheln auf einem Foto, hier auf Weiss - deshalb
   bekommen sie eine sichtbare Kante.*/

.site-search__cards .hero__chip {
  border-color: var(--divider-color);
}

@media only screen and (max-width: 1279px) {
  .site-search__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 767px) {
  .site-search__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-search__hint {
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-dark-color);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider-color);
  line-height: var(--line-small);
}

.site-search__zahl {
  font-size: var(--font-secondary);
  color: var(--text-color);
  margin: 0 0 18px;
  line-height: var(--line-secondary);
}

.site-search__zahl:empty {
  margin: 0;
}

.site-search__filter {
  justify-content: flex-start;
  margin-bottom: 22px;
}

/*Die Hauptsuche trennt Produkte mit PDF-Pillen von kompakten Seitentreffern.*/

.site-search__results {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.site-search__results.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.site-search__col {
  min-width: 0;
}

.site-search__results .suche-treffer--compact {
  grid-template-columns: minmax(0, 1fr);
}

.site-search__results .suche-treffer__dokumente {
  padding: 0 0 12px;
}

.site-search__results .site-search__hint {
  margin-bottom: 0;
}

.site-search__col[hidden] {
  display: none;
}

@media only screen and (max-width: 991px) {
  /*Hier klappt das Hauptmenue weg; das Skript haengt den Suchknopf neben
	   das Burgermenue, hier bekommt er seinen Platz am rechten Rand.*/

  .header-search--mobil {
    --search-button-size: 42px;
    margin-left: auto;
    margin-right: 14px;
  }

  .site-search__results {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .header-search__trigger {
    font-size: 17px;
  }

  .site-search__form {
    padding: 16px 0;
  }

  .site-search__scroll {
    padding: 20px 0 40px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-toggle,
.mobile-nav-toggle__icon span,
.header-search__trigger,
.header-search__symbol .hgi,
.main-menu .nav-menu-wrapper,
.site-search {
    transition: none !important;
  }
}