/* Mosel Glanz – Nachbau von mosel-glanz.de (vorher Wix)
   Quelle: src/style.css. build_website.py schreibt daraus css/style.css.
   Werte wie bei Wix linear zur Fensterbreite, jeweils aus zwei Messbreiten des Originals:
     D(a,b) = Desktop:  a px bei 1100 px Breite, b px bei 1440 px (darüber und darunter linear weiter)
     T(a,b) = Tablet:   a px bei  768 px Breite, b px bei 1000 px
     M(a,b) = Handy:    a px bei  320 px Breite, b px bei  500 px
     Zahlen ohne Klammer bleiben fest.
   Layouts wie bei Wix: Desktop ab 1001 px, Tablet 751–1000 px, Handy bis 750 px */

/* ---------- Schriften (lokal, alle frei lizenziert, OFL) ----------
   Poppins und Work Sans wie im Original. Für die Wix-Schriften (außerhalb von Wix nicht lizenziert):
   Madefor Display Bold -> DM Sans 700, Madefor Text -> Albert Sans, Helvetica Light -> Outfit 600
   (jeweils die freie Schrift mit der kleinsten Breitenabweichung, gemessen am Original) */
@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("../assets/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 400; font-display: swap; src: url("../assets/fonts/work-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 600 700; font-display: swap; src: url("../assets/fonts/work-sans-700.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../assets/fonts/dm-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 400; font-display: swap; src: url("../assets/fonts/albert-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 600; font-display: swap; src: url("../assets/fonts/albert-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 700; font-display: swap; src: url("../assets/fonts/albert-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("../assets/fonts/outfit-600.woff2") format("woff2"); }

:root {
  --blue: #1476b2;
  --blue-light: #1fafeb;
  --blue-card: #54ade7;
  --field: rgba(31, 175, 235, .41);
  --field-job: rgba(31, 175, 235, .2);
  --line: rgba(31, 175, 235, .41);
  --ink: #171200;
  --grey: #7d7d7d;
  --cream: #fffeed;
  --poppins: "Poppins", Arial, sans-serif;
  --work: "Work Sans", Arial, sans-serif;
  --display: "DM Sans", Arial, sans-serif;
  --text: "Albert Sans", Arial, sans-serif;
  --legal-head: "Outfit", Arial, sans-serif;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--ink); font: 400 13px/1.3 var(--work); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }
[id] { scroll-margin-top: 20px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.accent { color: var(--blue); }

/* ---------- Buttons (Farben und Hover wie im Original gemessen) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; cursor: pointer; text-decoration: none; }
.btn--dark { background: var(--blue); color: #fff; font-family: var(--work); font-weight: 700; transition: background-color .4s; }
.btn--dark:hover { background: var(--blue-light); }
.btn--hero { width: 261px; height: 57px; font-size: 21px; border-radius: 7.73px; }
.btn--light { width: 226px; height: 28px; border-radius: 10px; background: var(--blue-light); color: #fff; font: 700 16px var(--poppins); text-transform: uppercase; transition: background-color .2s, color .2s; }
.btn--light:hover { background: var(--blue); color: var(--cream); }
.btn--pill { height: 41px; border-radius: 100px; background: var(--blue); color: #fff; font: 400 16px var(--work); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transition: background-color .2s; }
.btn--pill:hover { background: rgba(20, 118, 178, .7); }
.btn--black { height: 41px; border-radius: 100px; background: #000; color: #fff; font: 400 16px var(--work); text-transform: uppercase; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transition: background-color .2s; }
.btn--black:hover { background: rgba(0, 0, 0, .7); }
.btn__icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- Kopfbereich ---------- */
.site-header { position: absolute; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; }
.page-jobs .site-header, .page-impressum .site-header, .page-datenschutz .site-header, .page-404 .site-header { background: #fff; }
.site-header__logo img { width: 100%; }
.main-nav { display: flex; }
.nav-link { font: 500 16px/25px var(--poppins); text-transform: uppercase; color: var(--blue); text-decoration: none; padding: 10px; }
.site-header__cta { padding: 0; }
.nav-toggle, .nav-close { display: none; padding: 0; border: 0; background: none; cursor: pointer; }
.nav-toggle svg, .nav-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--cream); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .55) 9%, rgba(255, 255, 255, 0) 21%); }
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { font-family: var(--poppins); font-weight: 700; line-height: 1.2; }
.hero__sub { display: flex; align-items: flex-start; font-family: var(--poppins); font-weight: 500; line-height: 1.2; }
.hero__sub img { flex: 0 0 auto; }

/* ---------- Über uns ---------- */
.about { display: grid; align-items: start; }
.eyebrow { font-family: var(--poppins); font-weight: 400; line-height: 1.4; }
.about__title { font-family: var(--work); font-weight: 700; line-height: 1.1; }
.about__text p:not(.eyebrow) { line-height: 1.3; }
.about__text p.tight { margin-top: 0 !important; }

/* ---------- Leistungen ---------- */
.services { position: relative; }
.services__head { background: #fff; }
.services__title { font-family: var(--poppins); font-weight: 700; line-height: 1.2; }
.services__intro p { font-family: var(--poppins); font-weight: 500; line-height: 1.6; }
.service-card { display: grid; align-items: center; }
.service-card img { width: 100%; object-fit: cover; }
.service-card--blue img { aspect-ratio: 436 / 302; }
.service-card--white img { aspect-ratio: 4 / 3; box-shadow: 0 0 18px rgba(31, 175, 235, .5); }
.service-card--black img { aspect-ratio: 432 / 295; box-shadow: 0 0 18px rgba(255, 255, 255, .55); }
.service-card h3 { font-family: var(--poppins); font-weight: 500; line-height: 1.2; }
.service-card ul { list-style: disc; font-family: var(--poppins); font-weight: 500; line-height: 1.6; }
.service-card--blue { background: var(--blue-card); color: #000; }
.service-card--white { background: #fff; color: #000; }
.service-card--black { background: #000; color: #fff; }

/* ---------- Das unterscheidet uns ---------- */
.compare__title { font-family: var(--poppins); font-weight: 500; line-height: 1.1; text-align: center; margin-left: auto; margin-right: auto; }
.compare__card { background: #fff; margin-left: auto; margin-right: auto; }
.compare__col h3 { font-family: var(--poppins); font-weight: 500; line-height: 1.1; text-align: center; }
.compare__logo { display: flex; justify-content: center; }
.compare__list li { font-family: var(--poppins); font-weight: 500; }
.compare__list--bad li::before { content: "❌ "; }
.compare__list--good li::before { content: "✔ "; }

/* ---------- Projekte ---------- */
.projects__title { font-family: var(--poppins); font-weight: 500; line-height: 1.2; }
.eyebrow--bold { font-weight: 700; }

/* ---------- Galerien (Über uns, Projekte): Pfeile, Wischen, endlos wie bei Wix ---------- */
.carousel { position: relative; }
.carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel.is-moving .carousel__track { scroll-snap-type: none; }
.carousel__item { flex: 0 0 auto; scroll-snap-align: start; }
.carousel__item img { width: 100%; height: 100%; object-fit: cover; }
.carousel__btn { position: absolute; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; opacity: .9; }
.carousel__btn[hidden] { display: none; }
.carousel__btn svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.carousel--about { overflow: hidden; }
.carousel--about .carousel__item { width: 100%; overflow: hidden; }
.carousel--about .carousel__btn { top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--blue-light); }
.carousel--about .carousel__btn svg { width: 10px; height: 17px; stroke: #fff; stroke-width: 2; }
.carousel--about .carousel__btn--prev { left: 23px; }
.carousel--about .carousel__btn--next { right: 23px; }
.carousel--projects .carousel__item img { height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
.carousel--projects .carousel__btn { width: 40px; height: 26px; background: none; }
.carousel--projects .carousel__btn svg { width: 40px; height: 26px; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .45)); }
.carousel--projects .carousel__btn--prev { left: 23px; }
.carousel--projects .carousel__btn--next { right: 23px; }
.carousel__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.carousel__zoom::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(0, 0, 0, 0); transition: background-color .3s; }
.carousel__zoom:hover::after { background: rgba(0, 0, 0, .15); }

/* ---------- Kontakt ---------- */
.contact { position: relative; display: grid; align-items: start; }
.contact__info { position: relative; }
.contact__drop { position: absolute; z-index: -1; opacity: .3; }
.contact__title { font-family: var(--poppins); font-weight: 700; color: var(--blue); line-height: 1; }
.contact__lines li { display: flex; align-items: flex-start; }
.contact__lines img { flex: 0 0 auto; }
.contact__lines a { font-family: var(--poppins); line-height: 1.4; color: var(--blue); text-decoration: none; }
.form { display: grid; background: #fff; border-radius: 16px; padding: 24px; }
.field { display: grid; gap: 8px; }
.field label, .field__label { font: 700 14px/17px var(--work); }
.field input, .field select, .field textarea { width: 100%; height: 36px; border: 0; border-radius: 6px; background: var(--field); padding: 6px 12px; font: 400 16px var(--work); color: var(--ink); }
.field textarea { height: 92px; resize: vertical; }
.field select { appearance: none; padding-right: 40px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231476b2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.contact .form { gap: 24px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font: 400 16px/24px var(--work); cursor: pointer; }
.consent input { width: 16px; height: 16px; flex: 0 0 16px; margin: 4px 0 0; accent-color: var(--blue); }
.consent a { color: inherit; }
.consent--bold { font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; padding: 12px 14px; border-radius: 8px; font: 500 14px/1.5 var(--poppins); }
.form-status.is-active { display: block; }
.form-status.is-ok { background: #e3f4fc; color: var(--blue); }
.form-status.is-error { background: #fdecec; color: #9b1c1c; }
.form button[type="submit"] { justify-self: start; }

/* ---------- FAQ ---------- */
.faq__title { font-family: var(--poppins); font-weight: 400; line-height: 1.2; }
.faq__item { border-bottom: 1px solid #000; }
.faq__item:last-child { border-bottom: 0; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.faq__item summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: 4px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .25s; }
.faq__item[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.faq__item summary:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 4px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h3 { font: 700 20px/24px var(--work); }
.faq__answer { margin-top: 24px; }
.faq__answer p { font: 400 16px/24px var(--work); max-width: 760px; }
.faq__answer a { color: var(--blue); }

/* ---------- Fußbereich ---------- */
.site-footer { position: relative; background: linear-gradient(180deg, #fff 55%, #eef6fc 100%); }
.site-footer__top { display: grid; align-items: start; }
.site-footer h2 { font: 700 20px/26px var(--work); text-transform: uppercase; color: var(--blue); }
.site-footer address { font-style: normal; }
.site-footer address a { display: inline-block; }
.site-footer__col a { font-family: var(--poppins); font-weight: 400; color: #000; text-decoration: none; }
.site-footer__legal a { font-family: var(--poppins); font-weight: 500; color: #000; }
.site-footer__copy { font-family: var(--poppins); font-weight: 300; text-align: right; }
.site-footer__copy a { font-weight: 700; color: #000; text-decoration: none; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: flex-start; }

/* ---------- Jobs ---------- */
.jobs-intro { display: grid; align-items: start; }
.jobs-intro__title { font-family: var(--work); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.jobs-intro__text p:not(.eyebrow):not(.jobs-intro__title) { line-height: 1.3; }
.jobs-intro__text p.tight { margin-top: 0 !important; }
.jobs-intro__img { width: 100%; object-fit: cover; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.job { display: grid; align-items: start; }
.job__img { width: 100%; object-fit: cover; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.job__text h2 { font-family: var(--display); font-weight: 700; line-height: 1; }
.job__text p, .job__text ul, .job__text h3 { font-family: var(--work); line-height: 1.6; }
.job__text strong { font-weight: 600; }
.job__text h3 { font-weight: 700; }
.job__text ul { list-style: disc; }
.form--job { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 0; }
.form--job .field input { background: var(--field-job); height: 40px; }
.form--job .field--tel input { padding-left: 50px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='1' fill='%23000'/%3E%3Crect y='1' width='5' height='1' fill='%23d00'/%3E%3Crect y='2' width='5' height='1' fill='%23ffce00'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 20px 12px; background-position: 14px center; }
.form--job .field, .form--job .consent, .form--job > div { margin-top: 24px; }
.form--job > .field:first-child { margin-top: 0; }
.field--full { grid-column: 1 / -1; }
.upload { display: flex; align-items: center; gap: 16px; cursor: pointer; flex-wrap: wrap; }
.upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload__btn { flex: 0 0 185px; display: inline-flex; align-items: center; justify-content: center; height: 40px; background: #000; color: #fff; font: 400 16px var(--work); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.upload input:focus-visible + .upload__btn { outline: 3px solid var(--blue-light); outline-offset: 2px; }
.upload__name { font-size: 12px; color: #555; }

/* ---------- Impressum, Datenschutz, 404 ---------- */
.legal { display: grid; align-items: start; }
.legal__logo { width: 100%; }
.legal h1 { font-family: var(--legal-head); font-weight: 600; line-height: 1.25; }
.legal__text { font-family: var(--work); line-height: 1.4; overflow-wrap: break-word; min-width: 0; }
.legal__text h2 { font-family: var(--poppins); font-weight: 600; font-size: 1em; line-height: 1.4; margin-top: 1.4em; }
.legal__text p { margin-top: 1.4em; }
.legal__text h2 + p { margin-top: 0; }
.legal__text a { color: var(--blue); }
.notfound__links { display: flex; flex-wrap: wrap; gap: 14px; }
.notfound__links .btn { color: #fff; height: 44px; padding: 0 22px; border-radius: 6px; }

/* =====================================================================
   DESKTOP ab 1001 px
   ===================================================================== */
@media (min-width: 1001px) {
  .site-header { height: 111px; padding: 0 50px; }
  .site-header__logo { width: calc(127px + (100vw - 1100px) * 0.12647); margin-top: calc(36px + (100vw - 1100px) * -0.02059); }
  .main-nav { margin-left: auto; margin-top: 35px; gap: 8px; }
  .site-header__cta { margin-left: calc(30px + (100vw - 1100px) * 0.02941); margin-top: 33px; width: calc(145px + (100vw - 1100px) * 0.13235); height: calc(29px + (100vw - 1100px) * 0.02647); font-size: calc(11.1px + (100vw - 1100px) * 0.01000); border-radius: calc(4.3px + (100vw - 1100px) * 0.00382); }

  .hero { min-height: 91.9vh; }
  .hero__inner { padding: calc(228px + (100vw - 1100px) * 0.20882) 0 60px calc(70px + (100vw - 1100px) * 0.06471); }
  .hero h1 { font-size: calc(30px + (100vw - 1100px) * 0.02735); }
  .hero__sub { margin-top: calc(22px + (100vw - 1100px) * 0.02059); gap: calc(11px + (100vw - 1100px) * 0.00882); width: calc(510px + (100vw - 1100px) * 0.46471); font-size: 20px; }
  .hero__sub img { width: calc(32px + (100vw - 1100px) * 0.02941); }
  .btn--hero { margin-top: calc(13px + (100vw - 1100px) * 0.02353); }
  .hero__google { margin-top: calc(4px + (100vw - 1100px) * 0.00294); margin-left: calc(31px + (100vw - 1100px) * 0.02647); width: calc(83px + (100vw - 1100px) * 0.07647); }

  .about { grid-template-columns: calc(350px + (100vw - 1100px) * 0.35000) calc(474px + (100vw - 1100px) * 0.47353); column-gap: calc(88px + (100vw - 1100px) * 0.09118); padding-left: calc(125px + (100vw - 1100px) * 0.07353); height: calc(537px + (100vw - 1100px) * 0.39706); }
  .about__text { padding-top: calc(79px + (100vw - 1100px) * 0.12059); }
  .about .eyebrow { font-size: 12px; }
  .about__title { margin-top: calc(15px + (100vw - 1100px) * 0.01471); font-size: calc(25.6px + (100vw - 1100px) * 0.02324); width: calc(321px + (100vw - 1100px) * 0.32059); }
  .about__text p:not(.eyebrow) { font-size: max(12px, calc(12px + (100vw - 1100px) * 0.00324)); width: calc(256px + (100vw - 1100px) * 0.25588); }
  .about__text p:nth-of-type(2) { margin-top: calc(17px + (100vw - 1100px) * 0.01471); }
  .about__text p:nth-of-type(3) { margin-top: calc(16px + (100vw - 1100px) * 0.00294); }
  .about__text p:nth-of-type(5) { margin-top: calc(15px + (100vw - 1100px) * 0.00882); }
  .about__text .btn { margin-top: calc(20.6px + (100vw - 1100px) * 0.02059); }
  .carousel--about { margin-top: calc(90.6px + (100vw - 1100px) * 0.02059); border-radius: 40px; }
  .carousel--about .carousel__item { aspect-ratio: 4 / 3; border-radius: 40px; }
  .carousel--about .carousel__track { gap: calc(18px + (100vw - 1100px) * 0.01765); }

  .services { padding-bottom: calc(62px + (100vw - 1100px) * 0.05588); }
  .services__head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: calc(468px + (100vw - 1100px) * 0.42647) calc(420px + (100vw - 1100px) * 0.37941); padding: calc(43px + (100vw - 1100px) * 0.03824) 0 calc(67px + (100vw - 1100px) * 0.05882) calc(107px + (100vw - 1100px) * 0.09412); }
  .services__title { font-size: calc(38.9px + (100vw - 1100px) * 0.03529); white-space: nowrap; }
  .services__intro p { font-size: max(12px, calc(12px + (100vw - 1100px) * 0.00324)); }
  .services__intro p + p { margin-top: calc(19px + (100vw - 1100px) * 0.00588); }
  .service-cards { padding: 0 calc(43px + (100vw - 1100px) * 0.03824); }
  .service-card { position: sticky; top: calc(153px + (100vw - 1100px) * 0.13824); z-index: 2; grid-template-columns: calc(333px + (100vw - 1100px) * 0.30294) 1fr; column-gap: calc(171px + (100vw - 1100px) * 0.15588); padding: calc(34px + (100vw - 1100px) * 0.03235) calc(25px + (100vw - 1100px) * 0.02353) calc(34px + (100vw - 1100px) * 0.03235) calc(89px + (100vw - 1100px) * 0.08235); border-radius: calc(18px + (100vw - 1100px) * 0.01765); }
  .service-card--black { grid-template-columns: calc(330px + (100vw - 1100px) * 0.30000) 1fr; padding-left: calc(90px + (100vw - 1100px) * 0.08529); }
  .service-card--blue { margin-bottom: calc(208px + (100vw - 1100px) * 0.28824); }
  .service-card--white { margin-bottom: calc(265px + (100vw - 1100px) * 0.23529); border: 1px solid var(--line); }
  .service-card img { border-radius: 20px; }
  .service-card h3 { font-size: calc(27.8px + (100vw - 1100px) * 0.02529); }
  .service-card ul { margin-top: calc(18px + (100vw - 1100px) * 0.01471); font-size: max(12px, calc(12px + (100vw - 1100px) * 0.00324)); padding-left: calc(22px + (100vw - 1100px) * 0.00294); width: calc(356px + (100vw - 1100px) * 0.32059); }

  .compare { padding: calc(41px + (100vw - 1100px) * 0.03824) 0 55px; }
  .compare__title { font-size: calc(27.5px + (100vw - 1100px) * 0.02500); width: calc(415px + (100vw - 1100px) * 0.37647); }
  .compare__card { display: grid; grid-template-columns: calc(389px + (100vw - 1100px) * 0.35294) calc(351px + (100vw - 1100px) * 0.32059); column-gap: calc(84px + (100vw - 1100px) * 0.07647); width: calc(933px + (100vw - 1100px) * 0.85000); margin-top: calc(23px + (100vw - 1100px) * 0.06765); padding: 53px 0 calc(7px + (100vw - 1100px) * 0.05588) calc(54px + (100vw - 1100px) * 0.05294); border-radius: calc(17.2px + (100vw - 1100px) * 0.01559); box-shadow: calc(5.19px + (100vw - 1100px) * 0.00471) calc(4.51px + (100vw - 1100px) * 0.00409) calc(18.56px + (100vw - 1100px) * 0.01688) rgba(31, 175, 235, .6); }
  .compare__col h3 { font-size: calc(22px + (100vw - 1100px) * 0.01471); height: calc(24px + (100vw - 1100px) * 0.01765); display: flex; align-items: center; justify-content: center; }
  .compare__logo img { width: calc(147px + (100vw - 1100px) * 0.13529); max-width: none; }
  .compare__list { margin-top: calc(46px + (100vw - 1100px) * 0.04118); }
  .compare__list li { font-size: 20px; line-height: 32px; }
  .compare__list li + li { margin-top: 32px; }

  .projects__head { min-height: calc(183px + (100vw - 1100px) * 0.09412); padding: calc(106px + (100vw - 1100px) * 0.02941) 0 0 calc(191px + (100vw - 1100px) * 0.02647); }
  .projects .eyebrow { font-size: 16px; line-height: 22px; }
  .projects__title { margin-top: 4px; font-size: calc(33.3px + (100vw - 1100px) * 0.03029); }
  .carousel--projects { height: calc(330px + (100vw - 1100px) * 0.30000); margin-left: 214px; }
  .carousel--projects .carousel__track { gap: calc(23px + (100vw - 1100px) * 0.02059); }
  .carousel--projects .carousel__item { width: calc(338px + (100vw - 1100px) * 0.40294); }
  .carousel--projects .carousel__btn { top: calc(calc(253px + (100vw - 1100px) * 0.30294) / 2 - 13px); }

  .contact { grid-template-columns: calc(446px + (100vw - 1100px) * 0.40588) calc(411px + (100vw - 1100px) * 0.37353); padding-left: calc(124px + (100vw - 1100px) * 0.11176); min-height: calc(695px + (100vw - 1100px) * 0.12353); }
  .contact__info { padding-top: calc(182px + (100vw - 1100px) * 0.16471); }
  .contact__drop { left: calc(243px + (100vw - 1100px) * 0.22353); top: calc(68px + (100vw - 1100px) * 0.06176); width: calc(147px + (100vw - 1100px) * 0.13235); }
  .contact__title { font-size: calc(55.6px + (100vw - 1100px) * 0.05029); }
  .contact__lines { margin-top: calc(25px + (100vw - 1100px) * 0.02353); padding-left: calc(57px + (100vw - 1100px) * 0.05294); }
  .contact__lines li { gap: calc(12px + (100vw - 1100px) * 0.01176); }
  .contact__lines li + li { margin-top: calc(12px + (100vw - 1100px) * 0.01471); }
  .contact__lines li:last-child { margin-top: calc(12px + (100vw - 1100px) * 0.01765); }
  .contact__lines img { width: calc(26px + (100vw - 1100px) * 0.02059); }
  .contact__lines a { font-size: max(12px, calc(12px + (100vw - 1100px) * 0.00324)); font-weight: 700; }
  .contact .form { margin-top: calc(137.7px + (100vw - 1100px) * 0.12441); }
  .contact .form .btn--pill { width: calc(169px + (100vw - 1100px) * 0.18824); }

  .faq { padding: 32px 32px 46px; max-width: 1600px; margin: 0 auto; }
  .faq__title { font-size: 32px; }
  .faq__item { padding: 24px 0 19px; }

  .site-footer { padding: 0 calc(42px + (100vw - 1100px) * 0.03824); min-height: calc(495px + (100vw - 1100px) * 0.04706); }
  .site-footer__top { grid-template-columns: calc(331px + (100vw - 1100px) * 0.25294) calc(302px + (100vw - 1100px) * 0.23235) calc(235px + (100vw - 1100px) * 0.16765) 1fr; padding-top: calc(85px + (100vw - 1100px) * 0.01471); padding-left: calc(53px - calc(42px + (100vw - 1100px) * 0.03824)); }
  .site-footer__logo { display: block; width: calc(193px + (100vw - 1100px) * 0.17353); margin-top: calc(15px + (100vw - 1100px) * 0.01176); }
  .site-footer h2 { margin-bottom: 24px; }
  .site-footer__col a { font-size: 18px; line-height: 25px; }
  .site-footer address .gap { display: block; height: 24px; }
  .site-footer__col li + li { margin-top: 16px; }
  .site-footer__col li a { display: inline-block; max-width: calc(150px + (100vw - 1100px) * 0.14706); }
  .site-footer__bottom { position: absolute; left: calc(42px + (100vw - 1100px) * 0.03824); right: calc(42px + (100vw - 1100px) * 0.03824); top: calc(401px + (100vw - 1100px) * 0.01471); }
  .site-footer__bottom::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; border-top: 1px solid #c7d0d7; }
  .site-footer__legal { display: flex; gap: 20px; margin-top: 16px; }
  .site-footer__legal a { font-size: 16px; line-height: 23px; }
  .site-footer__copy { font-size: 18px; line-height: 29px; }

  .page-jobs main, .page-impressum main, .page-datenschutz main, .page-404 main { padding-top: 111px; }
  .jobs-intro { grid-template-columns: calc(484px + (100vw - 1100px) * 0.48235) calc(261px + (100vw - 1100px) * 0.26176); padding: calc(87px + (100vw - 1100px) * 0.20588) 0 0 calc(177px + (100vw - 1100px) * 0.12647); min-height: calc(537px + (100vw - 1100px) * 0.39706); }
  .jobs-intro__img { margin-top: calc(3px + (100vw - 1100px) * -0.17059); border-radius: calc(27.8px + (100vw - 1100px) * 0.02529); aspect-ratio: 350 / 485; }
  .jobs-intro .eyebrow { font-size: 12px; width: calc(418px + (100vw - 1100px) * 0.41765); }
  .jobs-intro__title { margin-top: calc(12px + (100vw - 1100px) * 0.01176); font-size: calc(22.2px + (100vw - 1100px) * 0.02029); width: calc(255px + (100vw - 1100px) * 0.25294); }
  .jobs-intro__text p:not(.eyebrow):not(.jobs-intro__title) { font-size: max(12px, calc(12px + (100vw - 1100px) * 0.00324)); width: calc(364px + (100vw - 1100px) * 0.36176); margin-top: calc(15px + (100vw - 1100px) * 0.00588); }
  .jobs-intro__text p:nth-of-type(3) { margin-top: calc(16px + (100vw - 1100px) * 0.01471) !important; }
  .jobs-intro__text .btn { margin-top: calc(15px + (100vw - 1100px) * 0.01471); }
  .job { grid-template-columns: calc(496px + (100vw - 1100px) * 0.46765) calc(435px + (100vw - 1100px) * 0.40882); column-gap: calc(101px + (100vw - 1100px) * 0.05588); padding: calc(34px + (100vw - 1100px) * 0.03235); }
  .job__img { height: 993px; border-radius: 50px; }
  .job__text { padding-top: calc(17px + (100vw - 1100px) * 0.01471); }
  .job__text h2 { font-size: calc(35.8px + (100vw - 1100px) * 0.03235); width: calc(416px + (100vw - 1100px) * 0.39118); }
  .job__text h2 + p { margin-top: calc(20px + (100vw - 1100px) * 0.01765); }
  .job__text p, .job__text ul, .job__text h3 { font-size: max(12px, calc(12px + (100vw - 1100px) * 0.00176)); }
  .job__text p + p, .job__text ul + h3, .job__text p + h3 { margin-top: 1.6em; }
  .job__text ul { padding-left: calc(22px + (100vw - 1100px) * 0.00294); }
  .form--job { margin: calc(9px + (100vw - 1100px) * 0.00882) 0 0 -9px; width: calc(435px + (100vw - 1100px) * 0.40882); }

  .legal { grid-template-columns: calc(155px + (100vw - 1100px) * 0.14118) calc(516px + (100vw - 1100px) * 0.46765); column-gap: calc(146px + (100vw - 1100px) * 0.12941); padding: calc(123px + (100vw - 1100px) * 0.11176) 0 calc(133px + (100vw - 1100px) * 0.10294) calc(146px + (100vw - 1100px) * 0.13529); }
  .legal h1 { font-size: calc(34.4px + (100vw - 1100px) * 0.03118); }
  .legal__text { font-size: calc(16px + (100vw - 1100px) * 0.00265); }
  .legal h1 + * { margin-top: calc(22px + (100vw - 1100px) * 0.02059); }
}
@media (min-width: 1001px) and (max-width: 1063px) {
  /* das FAQ-Element des Originals schaltet unter 1000 px eigener Breite auf seine kompakte Darstellung */
  .faq { padding-left: 16px; padding-right: 16px; }
  .faq__title { font-size: 24px; }
}

/* =====================================================================
   TABLET 751–1000 px
   ===================================================================== */
@media (min-width: 751px) and (max-width: 1000px) {
  .site-header { height: 86px; padding: 0 30px; }
  .site-header__logo { width: calc(90px + (100vw - 768px) * 0.12500); margin-top: calc(29px + (100vw - 768px) * -0.01724); }
  .site-header__cta { margin-left: auto; margin-top: calc(31px + (100vw - 768px) * -0.00862); width: calc(138px + (100vw - 768px) * 0.18103); height: calc(28px + (100vw - 768px) * 0.03448); font-size: calc(12px + (100vw - 768px) * 0.01552); border-radius: calc(3px + (100vw - 768px) * 0.00388); }
  .nav-toggle { display: block; width: 32px; height: 30px; margin-left: 27px; margin-top: calc(31px + (100vw - 768px) * -0.00862); color: #000; }

  .hero { min-height: 93.75vh; }
  .hero__inner { padding: calc(454px + (100vw - 768px) * 0.59483) 0 calc(29px + (100vw - 768px) * -0.07328) calc(44px + (100vw - 768px) * 0.05603); }
  .hero h1 { font-size: calc(35px + (100vw - 768px) * 0.04569); }
  .hero__sub { margin-top: calc(26px + (100vw - 768px) * 0.03448); gap: calc(7px + (100vw - 768px) * 0.01293); width: calc(537px + (100vw - 768px) * 0.69828); font-size: calc(16px + (100vw - 768px) * 0.02069); line-height: calc(19.2px + (100vw - 768px) * 0.03362); }
  .hero__sub img { width: calc(41px + (100vw - 768px) * 0.05172); margin-top: calc(-5px + (100vw - 768px) * -0.01293); margin-bottom: calc(-12px + (100vw - 768px) * 0.00431); }
  .btn--hero { margin-top: calc(15px + (100vw - 768px) * 0.01293); width: 268px; height: 51px; font-size: 17px; }
  .hero__google { margin-top: calc(4px + (100vw - 768px) * 0.00431); margin-left: calc(67px + (100vw - 768px) * 0.08621); width: calc(174px + (100vw - 768px) * 0.22414); }

  .about { grid-template-columns: calc(285px + (100vw - 768px) * 0.40517) calc(335px + (100vw - 768px) * 0.47414); column-gap: calc(78px + (100vw - 768px) * 0.10776); padding: 0 0 calc(98px + (100vw - 768px) * -0.07759) 30px; }
  .about__text { padding-top: 60px; }
  .about .eyebrow { font-size: calc(14px + (100vw - 768px) * 0.00862); }
  .about__title { margin-top: calc(19px + (100vw - 768px) * 0.03017); font-size: calc(24px + (100vw - 768px) * 0.03147); }
  .about__text p:not(.eyebrow) { font-size: 12px; }
  .about__text p:nth-of-type(2) { margin-top: calc(19px + (100vw - 768px) * 0.02586); }
  .about__text p:nth-of-type(3) { margin-top: calc(15px + (100vw - 768px) * 0.00431); }
  .about__text p:nth-of-type(5) { margin-top: calc(15px + (100vw - 768px) * 0.00431); }
  .about__text .btn { margin-top: calc(23px + (100vw - 768px) * 0.12500); width: 203px; height: 43px; font-weight: 400; }
  .carousel--about { margin-top: calc(132px + (100vw - 768px) * -0.18534); border-radius: 40px; }
  .carousel--about .carousel__item { aspect-ratio: 4 / 3; border-radius: 40px; }
  .carousel--about .carousel__track { gap: 24px; }

  .services { padding-bottom: calc(48px + (100vw - 768px) * 0.06897); }
  .services__head { position: sticky; top: 0; z-index: 1; padding: calc(65px + (100vw - 768px) * 0.08190) calc(92px + (100vw - 768px) * 0.11638) 0; }
  .services__title { font-size: calc(44px + (100vw - 768px) * 0.05733); }
  .services__intro { margin-top: calc(156px + (100vw - 768px) * 0.20690); padding-bottom: calc(16px + (100vw - 768px) * 0.00862); }
  .services__intro p { font-size: calc(18px + (100vw - 768px) * 0.02328); }
  .services__intro p + p { margin-top: calc(28px + (100vw - 768px) * 0.03879); }
  .service-cards { padding: 0 calc(48px + (100vw - 768px) * 0.06250); }
  .service-card { position: sticky; top: calc(150px + (100vw - 768px) * 0.19828); z-index: 2; grid-template-columns: calc(290px + (100vw - 768px) * 0.37931) 1fr; column-gap: calc(28px + (100vw - 768px) * 0.03448); padding: calc(40px + (100vw - 768px) * 0.05172) calc(27px + (100vw - 768px) * 0.03233); border-radius: calc(16px + (100vw - 768px) * 0.02155); }
  .service-card--white { grid-template-columns: calc(282px + (100vw - 768px) * 0.36638) 1fr; column-gap: calc(58px + (100vw - 768px) * 0.08190); border: 1px solid var(--line); }
  .service-card--white img { aspect-ratio: 282 / 211; }
  .service-card--black { grid-template-columns: calc(281px + (100vw - 768px) * 0.36638) 1fr; column-gap: calc(47px + (100vw - 768px) * 0.06466); }
  .service-card--black img { aspect-ratio: 281 / 192; }
  .service-card--blue { margin-bottom: calc(391px + (100vw - 768px) * 0.50862); }
  .service-card--white { margin-bottom: calc(455px + (100vw - 768px) * 0.59052); }
  .service-card img { border-radius: 20px; }
  .service-card h3 { font-size: calc(25px + (100vw - 768px) * 0.03276); }
  .service-card ul { margin-top: calc(12px + (100vw - 768px) * 0.02155); font-size: calc(14px + (100vw - 768px) * 0.01810); padding-left: calc(25px + (100vw - 768px) * 0.03448); }

  .compare { padding: calc(29px + (100vw - 768px) * 0.03448) 0 calc(40px + (100vw - 768px) * 0.04310); }
  .compare__title { font-size: calc(26px + (100vw - 768px) * 0.02284); width: calc(290px + (100vw - 768px) * 0.37500); }
  .compare__card { display: grid; grid-template-columns: calc(272px + (100vw - 768px) * 0.35345) calc(245px + (100vw - 768px) * 0.31897); column-gap: calc(58px + (100vw - 768px) * 0.07759); width: calc(652px + (100vw - 768px) * 0.84914); margin-top: calc(14px + (100vw - 768px) * 0.03017); padding: calc(42px + (100vw - 768px) * 0.04310) 0 calc(0px + (100vw - 768px) * 0.00862) calc(39px + (100vw - 768px) * 0.04741); border-radius: calc(12px + (100vw - 768px) * 0.01552); box-shadow: calc(3.62px + (100vw - 768px) * 0.00474) calc(3.15px + (100vw - 768px) * 0.00409) calc(12.96px + (100vw - 768px) * 0.01690) rgba(31, 175, 235, .6); }
  .compare__col h3 { font-size: calc(24px + (100vw - 768px) * 0.03147); min-height: calc(53px + (100vw - 768px) * 0.06897); display: flex; align-items: center; justify-content: center; }
  .compare__logo img { width: calc(152px + (100vw - 768px) * 0.19397); }
  .compare__list { margin-top: calc(32px + (100vw - 768px) * 0.03879); }
  .compare__list li { font-size: calc(20px + (100vw - 768px) * 0.02586); line-height: 1.6; }
  .compare__list li + li { margin-top: 1.6em; }
  .compare__list--good li { color: var(--grey); font-weight: 400; }

  .projects__head { min-height: calc(188px + (100vw - 768px) * 0.16810); padding: calc(57px + (100vw - 768px) * -0.00862) 0 0 30px; }
  .projects .eyebrow { font-size: calc(14px + (100vw - 768px) * 0.01810); }
  .projects__title { margin-top: calc(19px + (100vw - 768px) * 0.00431); font-size: calc(23.3px + (100vw - 768px) * 0.03017); }
  .carousel--projects { height: calc(496px + (100vw - 768px) * 0.56897); padding-top: 60px; margin-left: 30px; }
  .carousel--projects .carousel__track { gap: calc(23px + (100vw - 768px) * 0.03017); }
  .carousel--projects .carousel__item { width: calc(480px + (100vw - 768px) * 0.75862); }
  .carousel--projects .carousel__btn { top: calc(60px + calc(360px + (100vw - 768px) * 0.56897) / 2 - 13px); }

  .contact { grid-template-columns: calc(341px + (100vw - 768px) * 0.45690) calc(320px + (100vw - 768px) * 0.40517); padding-left: calc(57px + (100vw - 768px) * 0.06897); min-height: calc(726px + (100vw - 768px) * -0.00862); }
  .contact__info { padding-top: calc(286px + (100vw - 768px) * -0.04741); }
  .contact__drop { left: calc(169px + (100vw - 768px) * 0.22845); top: calc(209px + (100vw - 768px) * -0.14655); width: calc(103px + (100vw - 768px) * 0.13362); }
  .contact__title { font-size: calc(40px + (100vw - 768px) * 0.05216); }
  .contact__lines { margin-top: calc(18px + (100vw - 768px) * 0.02155); padding-left: calc(39px + (100vw - 768px) * 0.05603); }
  .contact__lines li { gap: calc(8px + (100vw - 768px) * 0.01293); }
  .contact__lines li + li { margin-top: calc(10px + (100vw - 768px) * 0.01293); }
  .contact__lines li:last-child { margin-top: calc(6px + (100vw - 768px) * 0.00862); }
  .contact__lines img { width: calc(18px + (100vw - 768px) * 0.02155); margin-top: 2px; }
  .contact__lines a { font-size: 15px; font-weight: 400; }
  .contact__lines li:nth-child(2) a { font-weight: 700; }
  .contact .form { margin-top: calc(96px + (100vw - 768px) * 0.12500); }
  .contact .form .btn--pill { width: calc(124px + (100vw - 768px) * 0.20259); }

  .faq { padding: 32px 32px 46px; }
  .faq__title { font-size: 32px; }
  .faq__item { padding: 24px 0 19px; }

  .site-footer { min-height: calc(553px + (100vw - 768px) * 0.01724); padding: 0 calc(29px + (100vw - 768px) * 0.03879); }
  .site-footer__top { grid-template-columns: calc(224px + (100vw - 768px) * 0.28879) calc(217px + (100vw - 768px) * 0.28879) calc(161px + (100vw - 768px) * 0.20259) 1fr; padding-top: calc(39px + (100vw - 768px) * 0.05172); }
  .site-footer__logo { display: block; width: calc(135px + (100vw - 768px) * 0.17241); margin-top: calc(21px + (100vw - 768px) * 0.02155); }
  .site-footer h2 { margin-bottom: 24px; }
  .site-footer__col a { font-size: 18px; line-height: 25px; }
  .site-footer address a { font-size: 15px; line-height: 21px; }
  .site-footer address a[href^="tel"] { font-weight: 700; }
  .site-footer address .gap { display: block; height: 24px; }
  .site-footer__col li + li { margin-top: 16px; }
  .site-footer__bottom { position: absolute; left: calc(29px + (100vw - 768px) * 0.03879); right: calc(29px + (100vw - 768px) * 0.03879); top: calc(428px + (100vw - 768px) * -0.02586); }
  .site-footer__bottom::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; border-top: 2px solid #5ab6e6; }
  .site-footer__legal { display: grid; gap: 10px; }
  .site-footer__legal a { font-size: 16px; line-height: 23px; }
  .site-footer__copy { margin-top: calc(37px + (100vw - 768px) * 0.00431); font-size: 18px; line-height: 29px; }

  .page-jobs main, .page-impressum main, .page-datenschutz main, .page-404 main { padding-top: 86px; }
  .jobs-intro { grid-template-columns: 1fr; padding: calc(83px + (100vw - 768px) * 0.18966) calc(99px + (100vw - 768px) * 0.09483) 40px; min-height: calc(1199px + (100vw - 768px) * 1.37500); }
  .jobs-intro .eyebrow { font-size: calc(14px + (100vw - 768px) * 0.00862); margin: 0 calc(-35px + (100vw - 768px) * -0.04741); }
  .jobs-intro__title { margin-top: calc(39px + (100vw - 768px) * 0.05603); font-size: calc(24px + (100vw - 768px) * 0.03103); }
  .jobs-intro__text p:not(.eyebrow):not(.jobs-intro__title) { font-size: 12px; margin-top: 16px; }
  .jobs-intro__text p:nth-of-type(3) { margin-top: calc(39px + (100vw - 768px) * 0.05603) !important; }
  .jobs-intro__text .btn { display: flex; margin: calc(34px + (100vw - 768px) * 0.05172) auto 0; width: 229px; height: 50px; font-weight: 400; }
  .jobs-intro__img { width: calc(459px + (100vw - 768px) * 0.64655); justify-self: center; margin-top: calc(50px + (100vw - 768px) * 0.15517); border-radius: calc(19.4px + (100vw - 768px) * 0.02543); aspect-ratio: 459 / 637; }
  .job { grid-template-columns: 1fr; padding: calc(40px + (100vw - 768px) * 0.05172) calc(64px + (100vw - 768px) * 0.09914) calc(40px + (100vw - 768px) * 0.05172) calc(104px + (100vw - 768px) * 0.13362); }
  .job__img { width: 450px; height: 623px; border-radius: 19px; justify-self: center; margin-left: calc(-61px + (100vw - 768px) * -0.11207); margin-right: calc(-64px + (100vw - 768px) * -0.09914); }
  #reinigungskraft .job__img { border-radius: 50px; }
  .job__text { margin-top: calc(88px + (100vw - 768px) * 0.01724); }
  .job__text h2 { font-size: calc(25.5px + (100vw - 768px) * 0.03319); }
  .job__text h2 + p { margin-top: calc(14px + (100vw - 768px) * 0.02155); }
  .job__text p, .job__text ul, .job__text h3 { font-size: 12px; }
  .job__text p + p, .job__text ul + h3, .job__text p + h3 { margin-top: 1.6em; }
  .job__text ul { padding-left: calc(21px + (100vw - 768px) * 0.00431); }
  .form--job { margin: 7px 0 0 -7px; width: calc(603px + (100vw - 768px) * 0.78448); }

  .legal { grid-template-columns: calc(79px + (100vw - 768px) * 0.10345) calc(385px + (100vw - 768px) * 0.50431); column-gap: calc(111px + (100vw - 768px) * 0.14655); padding: calc(162px + (100vw - 768px) * 0.20690) 0 120px calc(87px + (100vw - 768px) * 0.11207); }
  .legal__logo { margin-top: -15px; }
  .legal h1 { font-size: calc(40px + (100vw - 768px) * 0.05216); }
  .legal__text { font-size: 16px; }
  .legal h1 + * { margin-top: calc(29px + (100vw - 768px) * 0.03879); }
}

/* =====================================================================
   HANDY bis 750 px
   ===================================================================== */
@media (max-width: 750px) {
  .site-header { height: 80px; padding: 0 20px; }
  .site-header__logo { width: calc(114px + (100vw - 320px) * 0.40556); margin-top: calc(23px + (100vw - 320px) * -0.06111); }
  .site-header__cta { margin-left: auto; margin-top: calc(29px + (100vw - 320px) * -0.01111); width: calc(101px + (100vw - 320px) * 0.31111); height: calc(20px + (100vw - 320px) * 0.06667); font-size: calc(7.9px + (100vw - 320px) * 0.02500); border-radius: calc(1.25px + (100vw - 320px) * 0.00389); }
  .nav-toggle { display: block; width: 27px; height: 25px; margin-left: 12px; margin-top: calc(29px + (100vw - 320px) * -0.01111); color: #000; }

  .hero { min-height: 156vw; }
  .hero__inner { padding: 326px calc(4px + (100vw - 320px) * 0.08333) 60px calc(30px + (100vw - 320px) * 0.02222); }
  .hero h1 { font-size: 20px; }
  /* Der Tropfen ist im Original auf dem Handy ausgeblendet, hier sichtbar gelassen (siehe Bericht) */
  .hero__sub { margin-top: 14px; gap: 8px; font-size: 14px; }
  .hero__sub img { width: 24px; }
  .btn--hero { margin-top: 12px; width: 209px; height: 47px; font-size: 16px; }
  .hero__google { margin-top: 6px; width: 115px; }

  .about { grid-template-columns: 1fr; padding: max(60px, calc(60px + (100vw - 375px) * .28)) 8vw calc(102px + (100vw - 320px) * 0.19444); }
  .about .eyebrow { font-size: 16px; }
  .about__title { margin-top: 21px; font-size: 26px; }
  .about__text p:not(.eyebrow) { font-size: 16px; }
  .about__text p:nth-of-type(2) { margin-top: 20px; }
  .about__text p:nth-of-type(3) { margin-top: 21px; }
  .about__text p:nth-of-type(5) { margin-top: 21px; }
  .about__text .btn { margin-top: 20px; width: 217px; font-weight: 400; }
  .carousel--about { margin-top: max(calc(73px + (100vw - 320px) * .0909), calc(78px + (100vw - 375px) * .336)); border-radius: 40px; }
  .carousel--about .carousel__item { aspect-ratio: 16 / 9; border-radius: 40px; }
  .carousel--about .carousel__track { gap: 16px; }
  .carousel--about .carousel__btn { width: 50px; height: 50px; background: #fff; }
  .carousel--about .carousel__btn svg { stroke: var(--blue); }

  .services { padding-bottom: calc(81px + (100vw - 320px) * 0.34444); }
  .services__head { padding: calc(80px + (100vw - 320px) * 0.04444) calc(26px + (100vw - 320px) * 0.08333) 41px; }
  .services__title { font-size: calc(26.3px + (100vw - 320px) * 0.08167); }
  .services__intro { margin-top: calc(19px + (100vw - 320px) * 0.00556); }
  .services__intro p { font-size: calc(13.1px + (100vw - 320px) * 0.04111); }
  .services__intro p + p { margin-top: calc(21px + (100vw - 320px) * 0.06667); }
  .service-cards { padding: 0 calc(25px + (100vw - 320px) * 0.08333); }
  .service-card { grid-template-columns: 1fr; padding: calc(13px + (100vw - 320px) * 0.03889) calc(4px + (100vw - 320px) * 0.01667) calc(40px + (100vw - 320px) * 0.12222) calc(13px + (100vw - 320px) * 0.03889); border-radius: calc(10px + (100vw - 320px) * 0.03333); }
  .service-card img { width: calc(100% - calc(9px + (100vw - 320px) * 0.02222)); }
  .service-card--white { padding: 0; }
  .service-card--white .service-card__text { padding: 0 calc(13px + (100vw - 320px) * 0.03889); }
  .service-card--white img { aspect-ratio: 4 / 3; }
  .service-card--black { padding: calc(12px + (100vw - 320px) * 0.03889) calc(12px + (100vw - 320px) * 0.03889) calc(40px + (100vw - 320px) * 0.12222); }
  .service-card--black img { aspect-ratio: 4 / 3; }
  .service-card--blue { margin-bottom: calc(48px + (100vw - 320px) * -0.02778); }
  .service-card--white { margin-bottom: calc(119px + (100vw - 320px) * 0.31111); }
  .service-card img { border-radius: calc(16.4px + (100vw - 320px) * 0.05111); }
  .service-card h3 { margin-top: calc(19px + (100vw - 320px) * 0.06111); font-size: calc(21.3px + (100vw - 320px) * 0.06667); }
  .service-card ul { margin-top: 20px; font-size: calc(13.1px + (100vw - 320px) * 0.04111); padding-left: calc(11px + (100vw - 320px) * 0.02778); }
  .service-card--black ul { font-size: calc(11.5px + (100vw - 320px) * 0.03556); padding-left: calc(21px + (100vw - 320px) * 0.06667); }

  .compare { padding: 60px calc(25px + (100vw - 320px) * 0.07778) 60px; }
  .compare__title { font-size: 26px; }
  .compare__card { margin-top: 30px; padding: 30px calc(6px + (100vw - 320px) * 0.01667) 40px; border-radius: 8px; text-align: center; box-shadow: 2px 2px 9px rgba(31, 175, 235, .6); }
  .compare__col + .compare__col { margin-top: 60px; }
  .compare__col h3 { font-size: 22px; }
  .compare__logo img { width: calc(108px + (100vw - 320px) * 0.33889); }
  .compare__list { margin-top: 20px; }
  .compare__list li { font-size: 15px; line-height: 24px; }
  .compare__list li + li { margin-top: 24px; }
  .compare__list--bad li::before { content: "❌"; }
  .compare__list--good li { color: var(--grey); font-weight: 400; }

  .projects__head { min-height: calc(192px + (100vw - 320px) * 0.03333); padding: 50px 20px 0; }
  .projects .eyebrow { font-size: calc(11.5px + (100vw - 320px) * 0.03556); }
  .projects__title { margin-top: 10px; font-size: calc(21.3px + (100vw - 320px) * 0.06667); line-height: 1.4; }
  .carousel--projects { height: 401px; padding-top: 20px; margin-left: 20px; }
  .carousel--projects .carousel__track { gap: 16px; }
  .carousel--projects .carousel__item { width: 407px; }
  .carousel--projects .carousel__btn { top: calc(20px + 305px / 2 - 13px); }
  .carousel--projects .carousel__btn--prev { left: 14px; }
  .carousel--projects .carousel__btn--next { right: 14px; }

  .contact { grid-template-columns: 1fr; padding: calc(77px + (100vw - 320px) * 0.05000) calc(25px + (100vw - 320px) * 0.08333) calc(61px + (100vw - 320px) * 0.03889); }
  .contact__info { padding-left: calc(14px + (100vw - 320px) * -0.00556); }
  /* Der Tropfen ist im Original auf dem Handy ausgeblendet, hier sichtbar gelassen (siehe Bericht) */
  .contact__drop { left: 58%; top: -50px; width: 24vw; }
  .contact__title { font-size: calc(32.8px + (100vw - 320px) * 0.10278); }
  .contact__lines { margin-top: 18px; }
  .contact__lines li { gap: calc(3px + (100vw - 320px) * 0.01667); }
  .contact__lines li + li { margin-top: calc(20px + (100vw - 320px) * 0.00556); }
  .contact__lines li:last-child { margin-top: 19px; }
  .contact__lines img { width: calc(33px + (100vw - 320px) * 0.10000); }
  .contact__lines a { font-size: calc(13.1px + (100vw - 320px) * 0.04111); font-weight: 400; }
  .contact__lines li:nth-child(2) a { font-weight: 700; }
  .contact .form { margin-top: 36px; }
  .contact .form .btn--pill { width: 100%; justify-self: stretch; }

  .faq { margin: 0 calc(25px + (100vw - 320px) * 0.07222) 0 calc(16px + (100vw - 320px) * 0.05556); padding: 32px 16px 46px; }
  .faq__title { font-size: 24px; }
  .faq__item { padding: 19px 0 20px; }

  .site-footer { min-height: 756px; padding: 0; }
  .site-footer__top { grid-template-columns: 1fr; padding: calc(26px + (100vw - 320px) * 0.07778) 20px 0 calc(28px + (100vw - 320px) * 0.72778); }
  .site-footer__logo { display: block; width: calc(177px + (100vw - 320px) * 0.55556); margin-left: calc(32px + (100vw - 320px) * -0.53889); }
  .site-footer__col:first-of-type { margin-top: calc(33px + (100vw - 320px) * 0.10556); }
  .site-footer__col + .site-footer__col { margin-top: 26px; }
  .site-footer h2 { margin-bottom: 9px; }
  .site-footer__col a { font-size: 14px; line-height: 20px; }
  .site-footer address .gap { display: block; height: 12px; }
  .site-footer__col li + li { margin-top: 12px; }
  .site-footer__bottom { position: absolute; left: calc(12px + (100vw - 320px) * 0.03889); right: calc(20px + (100vw - 320px) * 0.06667); top: calc(629px + (100vw - 320px) * 0.12778); gap: 10px; }
  .site-footer__bottom::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; border-top: 2px solid #5ab6e6; }
  .site-footer__legal { display: grid; gap: 2px; }
  .site-footer__legal a, .site-footer__copy { font-size: 14px; line-height: 20px; }
  .site-footer__copy { white-space: nowrap; }
  .site-footer__legal { min-width: 0; }
  .site-footer__copy { line-height: 22px; }

  .page-jobs main, .page-impressum main, .page-datenschutz main, .page-404 main { padding-top: 80px; }
  .jobs-intro { grid-template-columns: 1fr; padding: 34px 8vw 40px; }
  .jobs-intro .eyebrow { font-size: 16px; }
  .jobs-intro__title { margin-top: 20px; font-size: 20px; }
  .jobs-intro__text p:not(.eyebrow):not(.jobs-intro__title) { font-size: 16px; margin-top: 20px; }
  .jobs-intro__text p:nth-of-type(3) { margin-top: 20px !important; }
  .jobs-intro__text .btn { display: flex; width: 218px; margin: 20px auto 0; font-weight: 400; }
  .jobs-intro__img { margin-top: 50px; border-radius: calc(8.1px + (100vw - 320px) * 0.02500); aspect-ratio: 269 / 374; }
  .job { grid-template-columns: 1fr; padding: 40px calc(25px + (100vw - 320px) * 0.08333) 60px; }
  .job__img { width: 313px; height: 437px; border-radius: 19px; justify-self: center; }
  #reinigungskraft .job__img { width: 314px; border-radius: 50px; justify-self: start; }
  .job__text { margin-top: 31px; }
  .job__text h2 { font-size: 30px; }
  .job__text h2 + p { margin-top: 20px; }
  .job__text p, .job__text ul, .job__text h3 { font-family: var(--text); font-size: 16px; }
  .job__text p + p, .job__text ul + h3, .job__text p + h3 { margin-top: 1.6em; }
  .job__text ul { padding-left: 29px; }
  .form--job { grid-template-columns: 1fr; margin: 0; }

  .legal { grid-template-columns: 1fr; padding: calc(55px + (100vw - 320px) * 0.16667) calc(53px + (100vw - 320px) * 0.17222) 80px calc(42px + (100vw - 320px) * 0.12778); }
  /* Das Logo ist im Original auf dem Handy ausgeblendet, hier sichtbar gelassen (siehe Bericht) */
  .legal__logo { width: 120px; margin-bottom: 24px; }
  .legal h1 { font-size: max(32px, 8.2vw); }
  .legal__text { font-size: 16px; }
  .legal h1 + * { margin-top: calc(17px + (100vw - 320px) * 0.05556); }
}

/* ---------- Menü auf Tablet und Handy (wie Wix: Handy Vollbild weiß, Tablet Panel rechts) ---------- */
@media (max-width: 1000px) {
  .main-nav { position: fixed; z-index: 200; top: 0; right: 0; bottom: 0; flex-direction: column; align-items: center; gap: 28px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
  .nav-open .main-nav { visibility: visible; opacity: 1; }
  .nav-link { font: 700 16px/20px var(--text); padding: 0; }
  .nav-close { display: block; position: absolute; top: 40px; right: 40px; width: 20px; height: 20px; color: var(--blue); }
  .nav-open .nav-toggle { visibility: hidden; }
}
@media (min-width: 751px) and (max-width: 1000px) {
  .main-nav { width: 300px; background: rgba(23, 18, 0, .72); padding-top: 114px; }
  .main-nav::before { content: ""; position: fixed; inset: 0 300px 0 0; background: rgba(0, 0, 0, .45); }
  .nav-close { color: #fff; }
}
@media (max-width: 750px) {
  .main-nav { left: 0; background: #fff; padding-top: 130px; }
  .nav-close { top: 41px; right: 41px; }
}

/* ---------- Großansicht Projektbilder ---------- */
.lightbox { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .97); padding: 60px 90px; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__close, .lightbox__nav { position: absolute; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.lightbox__close { top: 20px; right: 20px; width: 44px; height: 44px; }
.lightbox__close svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.lightbox__nav svg { width: 40px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
@media (max-width: 750px) { .lightbox { padding: 60px 12px; } .lightbox__nav { top: auto; bottom: 14px; transform: none; } }

/* ---------- Einblenden beim Scrollen (wie Wix: fadeIn 1,2 s, revealIn 0,8 s) ---------- */
.js-anim [data-anim] { opacity: 0; }
.js-anim [data-anim="fade"].is-in { animation: mg-fade 1.2s cubic-bezier(.445, .05, .55, .95) var(--anim-delay, 0ms) both; }
.js-anim [data-anim="reveal"].is-in { animation: mg-reveal .8s cubic-bezier(.645, .045, .355, 1) var(--anim-delay, 0ms) both; }
@keyframes mg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mg-reveal {
  0% { opacity: 0; }
  0.0001% { opacity: 1; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) { .js-anim [data-anim] { opacity: 1; animation: none !important; } }

/* ---------- Datenschutz-Fenster (bohr.media-Aufbau Stand 07.11.2026, Farben Mosel Glanz) ----------
   Klassen ohne "cookie" im Namen, damit Werbeblocker das Fenster nicht ausblenden */
.priv-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; }
.priv-modal.is-visible { display: flex; }
.priv-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 30, 50, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.priv-modal__card { position: relative; display: flex; flex-direction: column; width: min(600px, 100%); max-height: calc(100vh - 32px); overflow: hidden; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); font-family: var(--poppins); }
.priv-modal__card:focus { outline: none; }
.priv-head { display: flex; align-items: center; justify-content: center; margin: 0 32px; padding: 26px 0 20px; border-bottom: 1px solid #e3e8ec; flex: none; }
.priv-h { font: 700 24px/1.3 var(--poppins); color: var(--ink); }
.priv-panel { display: none; }
.priv-panel.is-active { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 20px 32px 24px; }
.priv-scroll { overflow: auto; font-size: 15px; line-height: 1.6; padding-right: 6px; min-height: 0; }
.priv-scroll p + p { margin-top: .8em; }
.priv-scroll a { color: var(--blue); text-decoration: underline; }
.priv-cats { display: grid; }
.priv-cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid #e3e8ec; font-size: 13.5px; line-height: 1.55; color: #5b6570; cursor: pointer; position: relative; }
.priv-cat:first-child { padding-top: 0; }
.priv-cat b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.priv-cat input { position: absolute; opacity: 0; }
.priv-cat i { position: relative; flex: none; width: 46px; height: 26px; margin-top: 2px; border-radius: 26px; background: #cfd6dc; transition: background-color .2s; }
.priv-cat i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.priv-cat input:checked + i { background: var(--blue); }
.priv-cat input:checked + i::after { transform: translateX(20px); }
.priv-cat input:disabled + i { opacity: .6; }
.priv-cat input:focus-visible + i { outline: 3px solid rgba(20, 118, 178, .4); outline-offset: 2px; }
.priv-actions { display: grid; gap: 12px; margin-top: 22px; flex: none; }
/* "Alles akzeptieren" und "Ablehnen" gleich auffällig: gleiche Größe, Farbe und Schrift */
.priv-btn { background: var(--blue); color: #fff; border: 0; border-radius: 100px; padding: 15px 20px; font: 600 16px var(--poppins); cursor: pointer; transition: background-color .2s; }
.priv-btn:hover { background: #0f5f90; }
.priv-btn:focus-visible { outline: 3px solid rgba(20, 118, 178, .45); outline-offset: 2px; }
.priv-btn--rahmen { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.priv-btn--rahmen:hover { background: #eef6fc; color: #0f5f90; }
.priv-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 36px; padding: 16px 24px; background: #f1f3f5; font-size: 14px; flex: none; }
.priv-foot a, .priv-foot button { color: #5b6570; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.priv-foot a:hover, .priv-foot button:hover { color: var(--ink); text-decoration: underline; }
.priv-foot [hidden] { display: none; }
@media (max-width: 750px) {
  .priv-modal { align-items: flex-end; padding: 0; }
  .priv-modal__card { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .priv-head { margin: 0 18px; padding: 18px 0 14px; }
  .priv-h { font-size: 19px; }
  .priv-panel.is-active { padding: 14px 18px 16px; }
  .priv-scroll { font-size: 14px; line-height: 1.55; }
  .priv-actions { gap: 8px; margin-top: 14px; }
  .priv-btn { padding: 13px 16px; font-size: 15px; }
  .priv-foot { gap: 6px 24px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); font-size: 13px; }
}