/* ==========================================================================
   Niederländer GmbH | 1:1-Nachbau der bisherigen Joomla/Quix-Seite als HTML
   Werbeagentur Hoffmann
   Breakpoints wie im Original: 768 (sm), 992 (md), 1024 (Navi), 1200 (lg)
   ========================================================================== */

/* ---------- Schriften (lokal, wie im Original-Template) ---------- */
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/assistant-v18-latin-200.woff') format('woff'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/assistant-v18-latin-300.woff') format('woff'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/assistant-v18-latin-regular.woff') format('woff'); }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/assistant-v18-latin-700.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/open-sans-v34-latin-300.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/open-sans-v34-latin-600.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/open-sans-v34-latin-700.woff') format('woff'); }

/* ---------- Variablen ---------- */
:root {
  --c-teal: #139faa;
  --c-teal-tint: rgba(19, 159, 170, .09);
  --c-green: #99c61e;
  --c-text: #474747;
  --c-black: #000;
  --c-link: #1779ba;
  --c-link-hover: #1468a0;
  --c-grey: #efefef;
  --c-grey-2: #f1f1f1;
  --c-border: #ddd;
  --c-hero-btn: #cadbdd;
  --c-hero-btn-hover: #94c5cb;
  --c-overlay-box: rgba(107, 153, 158, .76);
  --f-base: 'Assistant', sans-serif;
  --f-nav: 'Open Sans', Arial, sans-serif;
  --f-legal: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  --gutter: 15px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  font-family: var(--f-base);
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--c-link); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus { color: var(--c-link-hover); }
p { margin: 0 0 16px; line-height: 1.6; }
strong, b { font-weight: 700; }
ul { margin: 0 0 16px 20px; padding: 0; list-style: disc; line-height: 32px; }
ul ul, ol ul, ul ol { margin-bottom: 0; }
li { line-height: 32px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-base); }
h1, .h1 {
  font-size: 30px; font-weight: 300; line-height: 42px;
  text-transform: uppercase; color: var(--c-black);
  margin: 0 0 25px; padding: 0 0 10px;
}
h2, .h2 {
  font-size: 30px; font-weight: 300; line-height: 42px;
  text-transform: uppercase; color: var(--c-teal);
  margin: 0 0 25px; padding: 15px 0;
}
h3, .h3 {
  font-size: 20px; font-weight: 400; line-height: 28px;
  text-transform: uppercase; color: var(--c-text);
  margin: 0 0 8px; padding: 50px 0 0;
}
h4 { font-family: var(--f-legal); font-size: 25px; font-weight: 400; line-height: 35px; color: var(--c-text); margin: 0 0 8px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 10px; top: -60px; z-index: 2000;
  background: var(--c-teal); color: #fff; padding: 10px 16px; font-size: 16px;
}
.skip-link:focus { top: 10px; color: #fff; }

/* ---------- Raster (Quix/Foundation-kompatibel) ---------- */
/* .wrap = Foundation-Zeile (max. 1200 inkl. 15px Innenabstand) */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; }
/* .qcontainer = Bootstrap-Container der vollbreiten Quix-Sektionen */
.qcontainer { width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
/* Mobil als Flex-Spalte (erlaubt Umsortieren), ab 768px Float-Raster wie Quix,
   damit sich Spalten unterschiedlicher Hoehe exakt wie im Original anordnen */
.row { display: flex; flex-direction: column; margin: 0 calc(var(--gutter) * -1); }
.col { position: relative; width: 100%; padding: 0 var(--gutter); min-height: 1px; }
@media (min-width: 768px) {
  .row { display: block; }
  .row::after { content: ''; display: table; clear: both; }
  .col { float: left; display: flow-root; }
}
@media (min-width: 640px) { .wrap { padding: 0 15px; } }
@media (min-width: 768px) {
  .qcontainer { width: 750px; }
  .col-sm-2 { width: 16.66666667%; } .col-sm-6 { width: 50%; } .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  .qcontainer { width: 970px; }
  .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; } .col-md-6 { width: 50%; }
  .col-md-8 { width: 66.66666667%; } .col-md-9 { width: 75%; } .col-md-12 { width: 100%; }
  .col-md-1 { width: 8.33333333%; }
}
@media (min-width: 1200px) {
  .qcontainer { width: 1170px; }
  .col-lg-12 { width: 100%; }
}

.section { position: relative; padding: 5vh 0; }
.section--pb { padding: 0 0 10vh; }
.section--pad-lg { padding: 10vh 0; }
.section--grey { background: var(--c-grey-2); }
.section--teal { background: var(--c-teal); }

/* Gruener Trennstrich unter Ueberschriften */
.divider {
  display: block; width: 112px; height: 30px; margin: 20px auto;
  border: 0; border-top: 2px solid var(--c-green); background: none;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; white-space: nowrap;
  font-family: var(--f-base); font-size: 25px; font-weight: 400; line-height: 1.42857143;
  text-transform: uppercase; text-align: center; text-decoration: none;
  padding: 10px 30px; border: 0; border-radius: 0;
  background: var(--c-teal); color: #fff;
  transition: all .1s ease-in-out; cursor: pointer;
}
.btn:hover, .btn:focus { color: #fff; }
.btn--light { background: var(--c-teal-tint); color: #000; }
.btn--light:hover, .btn--light:focus { color: #000; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { background: #fff; position: relative; z-index: 50; }
.site-header__top { padding: 10px 0; }
.site-header__brand { display: block; width: 345px; max-width: 100%; }
.site-header__brand img { display: block; width: 345px; max-width: 100%; height: auto; }
.site-header__logo-col { }
.site-header__info { margin-top: 25px; font-style: normal; }
.site-header__info p { margin: 0 0 16px; font-size: 20px; font-weight: 300; line-height: 32px; }
.site-header__info a { color: var(--c-teal); }
.site-header__info a:hover { color: var(--c-teal); }
.site-header__info--second { margin-top: 0; padding-top: 25px; }
.site-header__spacer { height: 1px; }
/* Mobil: Spalten untereinander, Trennlinien liegen ausserhalb des Sichtbereichs */
.site-header__info { padding-left: 1px; }

@media (min-width: 768px) {
  .site-header__grid { display: grid; grid-template-columns: 50% 50%; margin: 0 -15px; }
  .site-header__logo-col { padding: 0 15px; grid-row: 1 / span 3; }
  .site-header__spacer { grid-column: 2; }
  .site-header__info { grid-column: 2; border-left: 1px solid var(--c-border); padding: 0 15px; }
  .site-header__info--second { padding-top: 25px; }
}
@media (min-width: 992px) {
  .site-header__grid { grid-template-columns: 33.33333333% 8.33333333% 25% 33.33333333%; }
  .site-header__logo-col { grid-row: auto; grid-column: 1; }
  .site-header__spacer { grid-column: 2; }
  .site-header__info { grid-column: 3; align-self: start; }
  .site-header__info--second { grid-column: 4; }
}

/* ---------- Hauptnavigation ---------- */
.main-nav { background: var(--c-grey); padding-top: 10px; }
.main-nav__list { display: none; margin: 0; padding: 0; list-style: none; font-family: var(--f-nav); }
.main-nav__item { float: left; margin: 0; padding: 0; }
.main-nav__item--hidden { display: none; }
.main-nav__link {
  display: block; height: 50px; padding: 0 20px;
  font-family: var(--f-nav); font-size: 14px; font-weight: 400; line-height: 22.4px;
  color: #000; text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all .2s ease-out;
}
.main-nav__link span {
  display: block; height: 40px; line-height: 40px;
  font-size: 18px; font-weight: 300; text-transform: uppercase;
}
.main-nav__item:hover .main-nav__link,
.main-nav__link:focus,
.main-nav__link[aria-current="page"] { color: #000; border-bottom-color: var(--c-teal); background: rgba(255,255,255,0); }

.nav-toggle {
  display: inline-block; height: 42px; margin: 0; padding: 3px 8px 14px; box-sizing: border-box;
  font-family: var(--f-base); font-size: 25px; font-weight: 300; line-height: 1;
  color: #434343; background: transparent; border: 0; border-radius: 3px; cursor: pointer; text-align: center;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.nav-toggle:hover, .nav-toggle:focus { color: #e4e4e4; background: transparent; }
.nav-toggle__icon { display: inline-block; width: 21.4375px; height: 25px; vertical-align: -4px; fill: currentColor; }
.nav-toggle__label { margin-left: 12px; }
@media (min-width: 1024px) {
  .main-nav__list { display: block; }
  .main-nav__list::after { content: ''; display: table; clear: both; }
  .nav-toggle { display: none; }
}

/* ---------- Offcanvas (Mobilmenue, Push-Effekt wie DJ-MegaMenu) ---------- */
.page-pusher { position: relative; transition: transform .3s; background: #fff; overflow-x: clip; }
.offcanvas {
  position: fixed; top: 0; left: 0; z-index: 1000;
  width: 300px; height: 100%; overflow-y: auto;
  background: #f2f2f2; color: #444;
  transform: translateX(-100%); transition: transform .3s; visibility: hidden;
}
.offcanvas__top { height: 40px; background: #ebebeb; text-align: right; }
.offcanvas__close {
  display: inline-block; width: 40px; height: 40px; padding: 10px 12px;
  background: none; border: 0; color: #b8b8b8; cursor: pointer; font-size: 20px; line-height: 20px;
}
.offcanvas__close:hover { color: #888; }
.offcanvas__list { list-style: none; margin: 0; padding: 0; }
.offcanvas__list a {
  display: block; padding: 20px 15px; font-family: var(--f-base); font-size: 14px; font-weight: 300; line-height: 14px;
  color: #444; border-bottom: 1px solid #e2e2e2; transition: background-color .2s ease-out;
}
.offcanvas__list a:hover, .offcanvas__list a:focus, .offcanvas__list a[aria-current="page"] { background: #ebebeb; color: #444; }
.offcanvas-backdrop {
  position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
body.offcanvas-open { overflow: hidden; }
body.offcanvas-open .offcanvas { transform: translateX(0); visibility: visible; }
body.offcanvas-open .page-pusher { transform: translateX(300px); }
body.offcanvas-open .offcanvas-backdrop { opacity: 1; visibility: visible; }
@media (min-width: 1024px) {
  .offcanvas, .offcanvas-backdrop { display: none; }
}

/* ==========================================================================
   Hero (ehemals Smart Slider)
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: #fff; opacity: 0; animation: heroLoad .5s ease .1s forwards; }
.hero__bg { position: absolute; inset: 0; background: url('../images/Fotolia_258272890_M.jpeg') 50% 50% / cover no-repeat; }
.hero__inner {
  position: relative; display: flex; align-items: center;
  min-height: 75vw; padding: 70px 30px 30px 70px;
}
.hero__content { width: 100%; }
.hero__kicker, .hero__title { margin: 0; font-family: 'Assistant'; color: #fff; }
.hero__kicker { font-size: 27.2px; font-weight: 200; line-height: 40.8px; }
.hero__title { margin-top: 5px; font-size: 28px; font-weight: 700; line-height: 42px; }
.hero__btn {
  display: inline-block; margin-top: 25px; padding: 10px 30px;
  font-family: 'Assistant'; font-size: 12px; font-weight: 600; line-height: 18px; text-transform: uppercase;
  color: #000; background: var(--c-hero-btn); white-space: nowrap;
}
.hero__btn:hover, .hero__btn:focus { color: #fff; background: var(--c-hero-btn-hover); }
.hero__layer { opacity: 0; animation: layerIn .8s cubic-bezier(.215,.61,.355,1) forwards; }
.hero__layer--1 { animation-delay: .8s; }
.hero__layer--2 { animation-delay: 1.4s; }
.hero__layer--3 { animation-delay: 2.15s; }
@media (min-width: 440px) {
  .hero__inner { min-height: 41.6667vw; padding: 30px 30px 30px calc(52% + 58.79px); }
  .hero__kicker { font-size: 32px; line-height: 48px; }
  .hero__title { font-size: 56px; line-height: 84px; }
  .hero__btn { margin-top: 35px; font-size: 20px; line-height: 30px; }
}
@keyframes heroLoad { to { opacity: 1; } }
@keyframes layerIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Inhalt
   ========================================================================== */
.main { padding-top: 45px; }
.main--flush { padding-top: 0; }

/* Startseite: Vorteile */
.benefits { position: relative; }
.benefits__box { padding: 50px 20px; background: var(--c-teal-tint); }
.benefits__box .h1 { text-align: left; }
.benefits__media { margin-top: 50px; padding: 0 var(--gutter); text-align: center; }
.benefits__media img { width: 290px; max-width: none; }
@media (min-width: 768px) {
  .benefits__box { padding: 100px 100px 100px 50px; }
  .benefits__media { margin-top: 50px; }
  .benefits__media img { width: 632px; }
}
@media (min-width: 992px) {
  .benefits__box { padding: 100px 300px 100px 50px; }
  .benefits__media { margin: 50px 0 0 -250px; text-align: left; }
  .benefits__media img { width: 640px; }
}

/* Leistungs-Kacheln (Blurbs) */
.blurb { margin: 20px 0; text-align: center; transition: all .2s linear; }
.blurb__icon { display: block; width: 107px; height: 107px; margin: 0 auto; }
.blurb__fa { display: block; margin: 0 auto; color: var(--c-teal); font-size: 40px; line-height: 40px; height: 40px; }
.blurb h3 { margin: 0 0 8px; }
.blurb p { text-align: center; }
.blurb-row__btn { margin-top: 50px; text-align: center; }
.services-teaser .h1 { text-align: center; }

/* Kontakt-Aufruf */
.cta .h1 { margin-bottom: 0; text-align: left; }
.cta__action { margin-top: 50px; text-align: center; }

/* Ueber uns */
.team-photo { text-align: left; }
.team-photo img { display: block; }
.about-text h3 { margin-bottom: 25px; }
.claim { padding: 10vh 0; background: var(--c-teal); color: #fff; text-align: center; }
.claim p { font-size: 27px; color: #fff; }
.certificates__head { margin-bottom: 5vh; }
.certificates__head .h1 { text-align: center; }
.certificate { display: block; text-align: center; margin-bottom: 0; }
.certificate img { display: block; width: calc(100% - 0.015625px); }
.appointment {
  padding: 10vh 0; background: url('../images/Fotolia_239902063_M.jpg') center / cover no-repeat;
}
.appointment__box { padding: 50px; background: var(--c-overlay-box); color: #fff; }
.appointment__box h2 { color: #fff; text-align: left; }
.appointment__box p { color: #fff; }
.appointment__action { margin-top: 50px; text-align: right; }
.appointment { background-position: 50% 0; }

/* Leistungen */
.service-row { margin-bottom: 50px; }
.service-row--last { margin-top: 5vh; margin-bottom: 0; }
.service__icon { display: block; width: 107px; height: 107px; margin: 0; }
.service .h1 { margin: 25px 0 25px; text-align: left; }
.service ul { margin-bottom: 16px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px 2px 16px 3px; }
.gallery__item {
  position: relative; display: block; overflow: hidden; background: #000;
  aspect-ratio: 3 / 2;
}
.gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, opacity .35s ease; }
.gallery__item::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="7"/><path d="M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6"/></svg>') center / contain no-repeat;
  opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s ease;
}
.gallery__item:hover img, .gallery__item:focus img { transform: scale(1.08); opacity: .7; }
.gallery__item:hover::after, .gallery__item:focus::after { opacity: 1; transform: scale(1); }
.more-services { padding: 5vh 0; background: var(--c-grey-2); }
.more-services h2 { text-align: center; }
.partners { padding: 5vh 0 0; }
.partners .h1 { margin-bottom: 0; text-align: center; }
.partner { text-align: left; }
.partner img { display: block; }
.partner img { width: 237px; }
.offer { padding: 10vh 0; }
.offer h2 { text-align: left; }

/* Mobile Reihenfolge Leistungen: Text vor Galerie */
@media (max-width: 767px) {
  .service-row .service { order: 1; }
  .service-row .service-gallery { order: 2; }
}

/* Karriere */
.career-photo { margin-top: 50px; text-align: center; }
.career-photo img { border: 2px solid rgba(0,0,0,0); border-radius: 100px; }
.career-text h2 { margin: 0 0 8px; text-align: left; }
.career-text h3 { margin: 0 0 8px; }
.offers-head h2 { margin: 0 0 8px; text-align: center; }
.offers .blurb { text-align: center; }
.apply { text-align: center; }
.apply h2 { margin: 0 0 8px; }
@media (min-width: 768px) and (max-width: 991px) {
  .offers-head h2, .offers .blurb, .offers .blurb p { text-align: left; }
  .offers .blurb__fa { margin: 0; }
}
@media (max-width: 767px) {
  .offers-head h2, .offers .blurb, .offers .blurb p { text-align: left; }
  .offers .blurb__fa { margin: 0; }
}

/* Kontakt */
.map { position: relative; width: 100%; padding-bottom: 0; }
.map iframe { display: block; width: 100%; max-width: 570px; height: 450px; border: 0; }
.map__consent {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  width: 100%; max-width: 570px; height: 450px; padding: 30px; background: #e9eef0; color: var(--c-text);
}
.map__consent p { font-size: 16px; line-height: 24px; }
.map__consent .btn { font-size: 18px; line-height: 26px; }

/* Rechtstexte */
.legal h4 { margin-top: 0; }
.legal ul { margin-left: 20px; }
.legal li h4 { font-size: 25px; }
.legal a { word-break: break-word; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--c-grey); padding: 35px 0 0; }
.site-footer h2 { margin: 0 0 25px; padding: 15px 0; text-align: left; }
.site-footer a { color: var(--c-teal); }
.site-footer a:hover { color: var(--c-teal); }
.site-footer__copy { padding-bottom: 0; }
.site-footer__copy p span { display: inline; }
.partner-carousel { margin-top: 25px; background: #fff; overflow: hidden; }
.partner-carousel__viewport { position: relative; max-width: 1200px; height: 130px; margin: 0 auto; overflow: hidden; }
.partner-carousel__track { position: absolute; left: 0; top: 0; height: 130px; display: flex; will-change: transform; }
.partner-carousel__slide { flex: 0 0 270px; height: 130px; display: flex; align-items: center; }
.partner-carousel__slide img { display: block; width: 130px; height: auto; background: #fff; }
.agency-branding { text-align: center; padding: 20px; }
.agency-branding p { margin: 0; font-size: 13.3333px; line-height: 25px; }
.agency-branding .fa-heart { color: red; }
.agency-branding a { color: var(--c-teal); }

/* ==========================================================================
   Scroll-Animationen (Ersatz fuer WOW.js + animate.css, gleiche Werte)
   ========================================================================== */
.js [data-animate] { visibility: hidden; }
.js [data-animate].is-animated { visibility: visible; animation-duration: 1s; animation-fill-mode: both; }
.is-animated[data-animate="fadeInLeft"] { animation-name: fadeInLeft; }
.is-animated[data-animate="fadeInRight"] { animation-name: fadeInRight; }
.is-animated[data-animate="fadeInDown"] { animation-name: fadeInDown; }
.is-animated[data-animate="zoomIn"] { animation-name: zoomIn; }
.is-animated[data-delay="0.3"] { animation-delay: .3s; }
.is-animated[data-delay="0.4"] { animation-delay: .4s; }
.is-animated[data-delay="0.5"] { animation-delay: .5s; }
.is-animated[data-delay="0.6"] { animation-delay: .6s; }
.is-animated[data-delay="0.7"] { animation-delay: .7s; }
.is-animated[data-delay="0.8"] { animation-delay: .8s; }
.is-animated[data-delay="0.9"] { animation-delay: .9s; }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero, .hero__layer { animation: none; opacity: 1; }
  .js [data-animate] { visibility: visible; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 11, 11, .88); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: 90vw; max-height: 86vh; text-align: center; }
.lightbox__img { display: block; max-width: 90vw; max-height: 80vh; width: auto; height: auto; margin: 0 auto; box-shadow: 0 0 25px rgba(0,0,0,.4); background: #fff; }
.lightbox__count { margin-top: 10px; font-size: 14px; color: #ccc; }
.lightbox__btn {
  position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px;
  background: rgba(0,0,0,.35); border: 0; color: #fff; font-size: 30px; line-height: 48px; cursor: pointer; border-radius: 2px;
}
.lightbox__btn:hover { background: rgba(0,0,0,.6); }
.lightbox__btn--prev { left: 15px; }
.lightbox__btn--next { right: 15px; }
.lightbox__close { position: absolute; top: 15px; right: 15px; width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 36px; line-height: 44px; cursor: pointer; }

/* ==========================================================================
   Cookie-Hinweis
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500;
  background: rgba(51, 51, 51, .97); color: #fff;
  transform: translateY(110%); transition: transform .4s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: 1170px; margin: 0 auto; padding: 16px 15px; }
.cookie-banner__text { flex: 1 1 320px; margin: 0; font-size: 16px; line-height: 24px; color: #fff; }
.cookie-banner__text a { color: #8fd3d9; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; }
.cookie-banner .btn { font-size: 16px; line-height: 24px; padding: 10px 22px; min-height: 44px; }
.cookie-banner .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }

/* ==========================================================================
   404
   ========================================================================== */
.error-page { padding: 10vh 0; text-align: center; }
.error-page__code { font-size: 120px; line-height: 1; font-weight: 200; color: var(--c-teal); margin: 0 0 10px; }
.error-page h1 { text-align: center; }

/* ==========================================================================
   Kleine Bildschirme (Werte aus dem Original-Template)
   ========================================================================== */
@media (max-width: 500px) {
  h1, .h1 { font-size: 35px; line-height: 45px; padding-bottom: 10px; }
  h2, .h2 { font-size: 30px; line-height: 40px; padding-bottom: 15px; }
}
@media (max-width: 767px) {
  .partner img { width: 237px; }
  .appointment__action { text-align: right; }
  .main-nav { padding-top: 10px; }
}

/* ==========================================================================
   Feinabstimmung (aus dem Pixelvergleich)
   ========================================================================== */
.section-subtitle { margin: 0; }
.intro .section-subtitle, .partners .section-subtitle { text-align: center; }
.offer .section-subtitle { margin: 0 0 16px; }
.offer h2 { margin-bottom: 25px; }
.about-intro { padding-bottom: calc(5vh + 10vh + 1px); }
.about-intro .team-photo + .h2 { margin-top: 50px; margin-bottom: 0; text-align: center; }
.about-text { margin-top: 20px; }
.about-text .h3 { margin: 0 0 25px; }
.career__spacer { height: 52px; }
.service-row--flat { margin-bottom: 0; }
.service-row--last { margin-top: 5vh; }
.gallery { padding: 23px 2px 18px 3px; }
.gallery__item { aspect-ratio: 280 / 187; }
.site-footer__copy { margin-top: 1px; }
.site-footer__copy small { font-size: 13.3333px; }
.certificates__head .h1 { text-align: center; }
.partners .divider { margin-bottom: 20px; }
@media (min-width: 992px) {
  .site-header__logo-col, .site-header__spacer, .site-header__info, .site-header__info--second { grid-row: 1; }
}

address { font-style: normal; }

/* Wrapper ohne Margin-Collapsing (wie Quix-Zeilen) */
.certificates__head, .offers-head, .about-text, .apply, .site-footer__copy, .team-photo, .blurb-row__btn, .cta__action, .appointment__action, .legal__content { display: flow-root; }
.map { padding-bottom: 5px; }
/* Galerie unter 992px einspaltig, Bildbreite wie im Original (365 x 243) */
@media (max-width: 991px) {
  .gallery { grid-template-columns: minmax(0, 365px); }
  .gallery__item { aspect-ratio: 365 / 243; }
}
@media (max-width: 767px) {
  .service-gallery .gallery { padding-top: 7px; }
}

/* Nach Ende der Animation Ebene aufloesen (scharfe Kanten wie im Original) */
.js [data-animate].is-done { visibility: visible; animation: none; }
.hero__layer.is-done { animation: none; opacity: 1; }
.hero.is-done { animation: none; opacity: 1; }

/* Smart Slider rundet die Hoehe auf ganze Pixel ab */
@media (min-width: 440px) {
  @supports (height: round(down, 1vw, 1px)) {
    .hero__inner { min-height: round(down, 41.6667vw, 1px); }
  }
}

/* ==========================================================================
   Rechtstexte (Impressum, Datenschutz), modernisiert
   ========================================================================== */
.legal__intro { font-size: 22px; line-height: 1.6; margin-bottom: 40px; }
.imprint { display: grid; grid-template-columns: 1fr; gap: 30px; margin: 10px 0 50px; }
@media (min-width: 768px) { .imprint { grid-template-columns: 1fr 1fr; } }
.imprint__card {
  background: var(--c-grey-2); border-top: 3px solid var(--c-teal);
  padding: 28px 30px 14px;
}
.imprint__card h2, .legal__heading {
  margin: 0 0 15px; padding: 0;
  font-size: 22px; font-weight: 400; line-height: 30px; text-transform: uppercase; color: var(--c-teal);
}
.legal__block { display: flow-root; }
.legal__block + .legal__block, .legal__block .legal__heading:not(:first-child) { margin-top: 35px; }
.legal__block p:last-child { margin-bottom: 0; }
.legal__toc {
  margin: 0 0 45px; padding: 25px 30px; background: var(--c-grey-2); border-left: 3px solid var(--c-green);
}
.legal__toc-title { margin: 0 0 8px; font-weight: 400; text-transform: uppercase; color: var(--c-black); }
.legal__toc ol { margin: 0 0 0 22px; padding: 0; columns: 1; }
@media (min-width: 768px) { .legal__toc ol { columns: 2; column-gap: 40px; } }
.legal__toc li { break-inside: avoid; }
.legal__toc a { color: var(--c-text); }
.legal__toc a:hover, .legal__toc a:focus { color: var(--c-teal); }
.legal [id^="ds-"] { scroll-margin-top: 20px; }

/* ==========================================================================
   Joomla-Integration (wirkt auch in der statischen Fassung neutral)
   ========================================================================== */
button.skip-link { font: inherit; font-size: 16px; cursor: pointer; border: 0; }
em[class*="fa-"] { font-style: normal; }
.main--home { padding-top: 0; }
.home-main { padding-top: 45px; }
.spacer-16 { height: 16px; overflow: hidden; font-size: 0; line-height: 0; }
.career__spacer { overflow: hidden; font-size: 0; line-height: 0; }
.item-page, .com-content-article, .com-content-article__body, .content-item { margin: 0; padding: 0; }
.page-pusher .page-header,
.page-pusher .article-info,
.page-pusher .icons,
.page-pusher .pagenavigation,
.page-pusher .content_rating,
.page-pusher .article-index,
.page-pusher .tags { display: none; }
#system-message-container:empty { display: none; }

/* Leere Platzhalterspalten (in Joomla mit &nbsp; gefuellt) ohne Hoehe */
.col[aria-hidden="true"]{font-size:0;line-height:0}