/* Marx Tiefbau GmbH – Nachbau der bisherigen Wix-Seite als statische Seite */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/figtree-latin-800-normal.woff2") format("woff2"); }

:root { --u: 1px; }
@media (min-width: 1001px) { :root { --u: calc(100vw / 1440); } }
:root {
  --orange: #ff9a00;
  --dark: #2d2727;
  --dark-2: #3a3333;
  --grey: #817b7b;
  --grey-light: #aba5a5;
  --line: #d9d6d6;
  --white: #fff;
  --radius: 14px;
  --gutter: clamp(16px, 3vw, 43px);
  --header-h: 101px;
  --font: "Figtree", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 500;
  background: var(--white); color: #116dff; padding: 8px 14px; border-radius: 4px;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: none; margin: 0 auto; padding: 0 var(--gutter); }
.kicker { display: block; color: var(--orange); font-weight: 700; letter-spacing: .02em; }
.text-orange { color: var(--orange); }
.can__item .text-orange { font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange); color: var(--white);
  text-decoration: none; font-weight: 500; font-size: calc(15 * var(--u));
  padding: calc(11 * var(--u)) calc(28 * var(--u)); min-width: calc(158 * var(--u)); min-height: calc(45 * var(--u));
  border: 0; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.btn:hover { background: #ffad33; }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.btn--pill { border-radius: calc(100 * var(--u)); color: #000; font-weight: 700; font-size: calc(17 * var(--u)); min-width: calc(170 * var(--u)); min-height: calc(64 * var(--u)); }

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 100;
  height: var(--header-h);
  background: var(--white);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header__inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--u));
  max-width: none; margin: 0 auto; padding: 0 5%;
}
.site-header__logo img { width: calc(101 * var(--u)); height: auto; }
.site-header__inner { align-items: flex-start; }
.site-header__logo { padding-top: calc(18 * var(--u)); }
.main-nav { margin-top: calc(23 * var(--u)); }
.page--home .site-header { position: fixed; left: 0; right: 0; background: transparent; }
.page--home .site-header.is-scrolled { background: var(--white); box-shadow: 0 2px 14px rgba(0,0,0,.08); }
/* Startseite wie Wix: Kopf blendet beim Herunterscrollen aus und beim Hochscrollen wieder ein */
.page--home .site-header { transition: background-color .3s, opacity .3s cubic-bezier(.5, 0, .75, 0), visibility .3s; }
.page--home .site-header.is-hidden { opacity: 0; visibility: hidden; }

.main-nav { background: var(--white); }
.main-nav ul { display: flex; }
.main-nav a {
  display: block; padding: calc(10 * var(--u)) calc(28 * var(--u));
  font-size: calc(16 * var(--u)); font-weight: 700; text-transform: uppercase; text-decoration: none;
  color: var(--dark); transition: color .2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--orange); }

.nav-toggle {
  display: none; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border: 0; background: transparent;
  cursor: pointer; position: relative; margin-right: -8px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  position: absolute; right: calc(8 * var(--u)); height: calc(3 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--dark); content: ""; transition: transform .2s ease, width .2s ease, background .2s ease;
}
.nav-toggle span { top: calc(21 * var(--u)); width: calc(24 * var(--u)); }
.nav-toggle span::before { top: -8px; right: 0; width: calc(30 * var(--u)); }
.nav-toggle span::after { top: calc(8 * var(--u)); right: 0; width: calc(18 * var(--u)); }
.nav-open .nav-toggle span { background: transparent !important; box-shadow: none !important; }
.nav-open .nav-toggle span::before { width: calc(28 * var(--u)); transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span::after { width: calc(28 * var(--u)); transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero (Unterseiten) ---------- */
.page-hero {
  position: relative; min-height: calc(672 * var(--u)); display: flex; align-items: center;
  color: var(--white); overflow: hidden; background: var(--dark);
}
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: rgba(20, 16, 16, .55); }
.page-hero__content { position: relative; z-index: 1; padding: 0 var(--gutter) 0 calc(91 * var(--u)); max-width: calc(760 * var(--u)); }
.page-hero__title { font-size: calc(60 * var(--u)); font-weight: 400; line-height: 1.3; }
.page-hero .kicker { font-size: calc(21 * var(--u)); line-height: 1.2; }
.page-hero .kicker--sm { font-size: calc(17.4 * var(--u)); }
.page-hero__logo { width: calc(244 * var(--u)); height: auto; }

/* ---------- Startseite ---------- */
.home-hero { position: relative; height: 100vh; min-height: calc(560 * var(--u)); max-height: 1100px; background: var(--dark); overflow: hidden; }
.home-hero video, .home-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

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

.intro { padding: calc(100 * var(--u)) 0 0; }
.intro__inner { padding-left: 15.3%; max-width: calc(1100 * var(--u)); }
.intro .kicker { font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); margin-bottom: 0; }
.intro h1 { font-size: calc(31.5 * var(--u)); line-height: 1.6; font-weight: 500; margin-bottom: calc(17 * var(--u)); }
.intro p { color: var(--grey-light); font-size: calc(19 * var(--u)); line-height: calc(34 * var(--u)); max-width: calc(640 * var(--u)); }
.intro .btn { margin-top: calc(22 * var(--u)); }

.stats { padding: calc(103 * var(--u)) 0 calc(108 * var(--u)); }
.stats__row { display: grid; grid-template-columns: 322fr 312fr 429fr; background: var(--white); color: var(--dark); width: 73.8%; }
.stat { text-align: center; padding: calc(59 * var(--u)) calc(16 * var(--u)) calc(67 * var(--u)); border-right: 1px solid var(--grey-light); }
.stat:last-child { border-right: 0; }
.stat__pre, .stat__label { display: block; font-size: calc(16 * var(--u)); line-height: calc(29 * var(--u)); }
.stat__num { display: block; font-size: calc(56 * var(--u)); font-weight: 700; color: var(--orange); line-height: calc(63 * var(--u)); }

.services { padding: calc(51 * var(--u)) 0 calc(41 * var(--u)); }
.services__grid { display: grid; grid-template-columns: 1fr 64.15%; gap: 0; align-items: start; padding: 0 5.9% 0 3.26%; max-width: none; margin: 0 auto; }
.services h2 { font-size: calc(31.5 * var(--u)); line-height: calc(50 * var(--u)); color: var(--orange); font-weight: 500; margin: 0 0 calc(23 * var(--u)); }
.services h3 { font-size: calc(20.2 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 700; color: var(--orange); margin: 0 0 calc(8 * var(--u)); }
.services h3.small { font-size: calc(17.8 * var(--u)); line-height: calc(23 * var(--u)); margin: calc(22 * var(--u)) 0 0; padding-left: calc(7 * var(--u)); }
.services ul { padding-left: calc(7 * var(--u)); }
.services li { color: var(--grey); font-weight: 700; font-size: calc(17.8 * var(--u)); line-height: 1.27; }
.services .btn { margin: calc(22 * var(--u)) 0 calc(25 * var(--u)) calc(15 * var(--u)); }
.services .btn:last-child { margin-bottom: 0; }
.services__img { margin-top: calc(16 * var(--u)); }
.services__img img { width: 100%; height: auto; aspect-ratio: 839 / 559; object-fit: cover; }

.about { padding: calc(41 * var(--u)) 0 calc(40 * var(--u)); background: var(--white); }
/* Wie Wix: Bild links, "Marx" steht weiß auf dem Bildrand, "Tief- und Leitungsbau" beginnt direkt dahinter */
.about__grid { display: grid; grid-template-columns: 2.99% 53.47% 1fr; align-items: start; max-width: none; margin: 0 auto; padding: 0; }
.about__img { grid-column: 2; }
.about__img img { width: 100%; height: auto; aspect-ratio: 770 / 595; object-fit: cover; }
.about__text { padding-top: calc(84 * var(--u)); position: relative; }
.about__text h2 { position: relative; font-size: calc(29 * var(--u)); line-height: calc(41 * var(--u)); font-weight: 800; color: var(--orange); margin: 0 0 calc(26 * var(--u)); }
.about__text h2 a { text-decoration: none; }
.about__text h2 .light { position: absolute; right: 100%; margin-right: .35em; white-space: nowrap; color: var(--white); }
.about__text p { font-size: calc(18 * var(--u)); line-height: 1.6; margin-bottom: calc(29 * var(--u)); padding-left: calc(42 * var(--u)); max-width: calc(calc(539 * var(--u)) + calc(42 * var(--u))); }
.about__text .btn { margin: calc(2 * var(--u)) 0 0 calc(17 * var(--u)); }

/* ---------- News-Slider ---------- */
.news-slider { padding: calc(76 * var(--u)) 0 calc(59 * var(--u)); }
.news-slider--light { background: var(--white); }
.news-slider__head { display: flex; align-items: center; gap: 0; margin-bottom: calc(30 * var(--u)); }
.news-slider__head h2 { font-size: calc(29 * var(--u)); line-height: calc(38 * var(--u)); font-weight: 700; color: var(--orange); }
.news-slider__head h2 a { text-decoration: none; }
.news-slider__head img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.news-slider__wrap { position: relative; }
.news-slider__track {
  display: flex; gap: calc(32 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: calc(4 * var(--u));
}
.news-slider__track::-webkit-scrollbar { display: none; }
.news-card {
  position: relative; flex: 0 0 calc(285 * var(--u)); height: calc(380 * var(--u)); border-radius: calc(14 * var(--u)); overflow: hidden;
  scroll-snap-align: start; text-decoration: none; color: var(--white); background: var(--dark-2);
}
.news-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,0) 100%); }
.news-card:hover img { transform: scale(1.05); }
.news-card h3 { position: absolute; top: calc(26 * var(--u)); left: calc(28 * var(--u)); right: calc(24 * var(--u)); z-index: 1; font-size: calc(24 * var(--u)); font-weight: 500; line-height: 1.2; }
.news-card h3, .news-item h2 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.news-slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--dark); display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.news-slider__btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.news-slider__btn--prev { left: -12px; }
.news-slider__btn--next { right: -12px; }
.news-slider__btn[hidden] { display: none; }

/* ---------- Leistungsseiten ---------- */
.feature { padding: calc(101 * var(--u)) 0 calc(51 * var(--u)); }
.feature__grid { display: grid; grid-template-columns: 1fr 52.6%; gap: 0; align-items: center; max-width: none; margin: 0 auto; padding: 0 4.6% 0 5.7%; }
.feature__grid > div:first-child { margin-bottom: calc(16 * var(--u)); }
.feature__title { font-size: calc(26.5 * var(--u)); line-height: calc(42 * var(--u)); color: var(--orange); font-weight: 500; }
.feature__sub { font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 700; margin: 0 0 calc(29 * var(--u)); }
.feature__list { padding-left: calc(11 * var(--u)); }
.feature__list li { color: var(--grey); font-weight: 700; font-size: calc(17.8 * var(--u)); margin-bottom: calc(20 * var(--u)); line-height: calc(25 * var(--u)); }
.feature__list--wide li { font-size: calc(20 * var(--u)); margin-bottom: calc(25 * var(--u)); }
.feature__img img { width: 100%; height: auto; aspect-ratio: 680 / 454; object-fit: cover; border-radius: var(--radius); }

.can { padding: calc(78 * var(--u)) 0 calc(39 * var(--u)); background: var(--white); }
.can__grid { display: grid; grid-template-columns: 36.1% 35.8% 1fr; gap: 0; align-items: start; max-width: none; margin: 0 auto; padding: 0 3.7%; }
.can .kicker { font-size: calc(15.2 * var(--u)); line-height: calc(21 * var(--u)); }
.can__title { font-size: calc(38 * var(--u)); font-weight: 400; line-height: calc(49 * var(--u)); margin-top: -5px; }
.can__item { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; font-size: calc(22.2 * var(--u)); line-height: 1.3; padding-right: calc(24 * var(--u)); }
.can__item img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); flex: 0 0 auto; object-fit: contain; }
.can__item img[src*="icon-gewaehrleistung"] { width: calc(70 * var(--u)); height: calc(70 * var(--u)); }
.can__item img[src*="icon-oberflaechen"] { width: calc(60 * var(--u)); height: calc(60 * var(--u)); margin-top: calc(5 * var(--u)); }
.can__item img[src*="icon-bohrlaenge"] { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
.can__item img[src*="icon-durchmesser"] { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.can__item p { font-size: inherit; font-weight: 400; }

.wide-img { padding: 0 3.7%; max-width: none; margin: 0 auto 0; }
.wide-img img { width: 100%; height: auto; aspect-ratio: 1333 / 504; object-fit: cover; border-radius: var(--radius); }
.wide-img--full { padding: 0; max-width: none; }
.wide-img--full img { border-radius: 0; aspect-ratio: 1440 / 489; }
.wide-img--top { background: var(--white); padding-bottom: calc(70 * var(--u)); }

.service-list { padding: calc(68 * var(--u)) 0 calc(54 * var(--u)); }
.service-list__grid { display: grid; grid-template-columns: 44% 1fr; gap: 0; max-width: none; margin: 0 auto; padding: 0 3.8%; }
.service-list .kicker { font-size: calc(15.2 * var(--u)); line-height: calc(21 * var(--u)); }
.service-list__title { font-size: calc(38 * var(--u)); line-height: calc(49 * var(--u)); font-weight: 400; }
.service-list__title .kicker { margin-bottom: -6px; }
.icon-grid { display: grid; grid-template-columns: minmax(0, calc(313 * var(--u))) minmax(0, calc(300 * var(--u))); gap: calc(22 * var(--u)) 0; }
.icon-grid li { display: flex; align-items: center; gap: calc(17 * var(--u)); color: var(--orange); font-size: calc(22.2 * var(--u)); line-height: calc(29 * var(--u)); }
.icon-grid img { width: calc(58 * var(--u)); height: calc(58 * var(--u)); object-fit: contain; flex: 0 0 auto; }
.icon-grid li:nth-child(5), .icon-grid li:nth-child(6) { margin-top: calc(18 * var(--u)); }

.steps { display: grid; gap: calc(44 * var(--u)); }
.step { display: grid; grid-template-columns: calc(56 * var(--u)) 1fr; gap: 0 calc(22 * var(--u)); align-items: start; }
.step img { grid-row: 1 / span 2; }
.step img { width: calc(56 * var(--u)); height: calc(56 * var(--u)); object-fit: contain; }
.step h3 { font-size: calc(20 * var(--u)); color: var(--orange); font-weight: 400; text-transform: none; margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); }
.step ul { grid-column: 2; padding-left: calc(22 * var(--u)); list-style: disc; }
.step li { font-size: calc(15.2 * var(--u)); line-height: 1.6; margin-bottom: calc(6 * var(--u)); }

.video-band { position: relative; height: calc(526 * var(--u)); overflow: hidden; background: var(--dark); }
.video-band video, .video-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Galerie ---------- */
.gallery { padding: 0 0 calc(60 * var(--u)); background: var(--white); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); }
.gallery__grid a { display: block; overflow: hidden; background: #eee; }
.gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s ease; }
.gallery__grid a:hover img { transform: scale(1.04); }
.gallery--masonry .gallery__grid { display: block; columns: 4; column-gap: calc(10 * var(--u)); }
.gallery--masonry .gallery__grid a { margin-bottom: calc(10 * var(--u)); break-inside: avoid; }
.gallery--masonry .gallery__grid img { height: auto; }
.gallery--rows .gallery__grid img { aspect-ratio: 3 / 2; }
.gallery--top { padding-top: calc(46 * var(--u)); }
/* Collage wie bei Wix: volle Breite, Positionen aus dem Original */
.gallery--collage .container { max-width: none; padding: 0; }
.gallery--collage .gallery__grid { display: block; position: relative; height: 0; padding-top: var(--ratio); }
.gallery--collage .gallery__grid a { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); }
.gallery--collage .gallery__grid img { height: 100%; aspect-ratio: auto; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400; background: rgba(15,12,12,.94);
  display: none; align-items: center; justify-content: center; padding: calc(60 * var(--u)) calc(70 * var(--u));
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button {
  position: absolute; border: 0; background: transparent; color: var(--white); cursor: pointer;
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255,255,255,.12); }
.lightbox svg { width: 28px; height: 28px; }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- Über uns ---------- */
.history { padding: calc(90 * var(--u)) 0 calc(80 * var(--u)); }
.history__grid { display: grid; grid-template-columns: 29% 1fr; max-width: none; margin: 0 auto; padding: 0 4.9%; }
.history__head { position: sticky; top: calc(var(--header-h) + calc(40 * var(--u))); align-self: start; }
.history__head .kicker { font-size: calc(20 * var(--u)); }
.history__head h2 { font-size: calc(38 * var(--u)); font-weight: 400; }
.timeline { position: relative; padding: 0; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: calc(2 * var(--u)); background: #9a9494; transform: translateX(-1px); }
.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(70 * var(--u)) minmax(0, 1fr); align-items: start; margin-bottom: calc(70 * var(--u)); }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { grid-column: 2; justify-self: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); background: var(--white); position: relative; z-index: 1; }
.tl-year { font-size: calc(20 * var(--u)); font-weight: 700; line-height: calc(26 * var(--u)); }
.tl-item--right .tl-year { grid-column: 1; grid-row: 1; justify-self: end; padding-right: calc(6 * var(--u)); }
.tl-item--right .tl-body { grid-column: 3; grid-row: 1; }
.tl-item--left .tl-year { grid-column: 3; grid-row: 1; padding-left: calc(6 * var(--u)); }
.tl-item--left .tl-body { grid-column: 1; grid-row: 1; justify-self: end; text-align: left; }
.tl-item .tl-dot { grid-row: 1; }
.tl-body { display: flex; flex-direction: column; gap: calc(10 * var(--u)); align-items: flex-start; }
.tl-item--left .tl-body { align-items: flex-end; }
.tl-tag { background: #d98b2b; color: var(--white); font-size: calc(14 * var(--u)); padding: calc(5 * var(--u)) calc(14 * var(--u)); border-radius: calc(3 * var(--u)); min-width: calc(240 * var(--u)); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.tl-tag--light { background: #ece9e9; color: var(--dark); font-size: calc(12.5 * var(--u)); min-width: 0; }
.tl-tag--white { background: var(--white); color: var(--dark); font-size: calc(12.5 * var(--u)); min-width: 0; }
.tl-body .tl-sub { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding-left: calc(22 * var(--u)); align-items: flex-start; }
.tl-item--left .tl-sub { padding-left: 0; padding-right: calc(22 * var(--u)); align-items: center; }

.text-block { padding: calc(50 * var(--u)) 0 calc(40 * var(--u)); background: var(--white); }
.text-block__inner { max-width: none; margin: 0 auto; padding: 0 10%; }
.text-block h2 { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(29 * var(--u)); font-weight: 400; color: var(--orange); margin-bottom: calc(16 * var(--u)); }
.text-block h2 img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); opacity: .1; }
.text-block p { font-size: calc(15 * var(--u)); line-height: 1.75; max-width: calc(900 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.text-block--values p { font-size: calc(18 * var(--u)); max-width: calc(630 * var(--u)); }
.text-block--values h2 img { opacity: .12; }

/* ---------- News-Übersicht ---------- */
.news-head { padding: calc(64 * var(--u)) 0 calc(40 * var(--u)); }
.news-head__inner { display: flex; gap: calc(24 * var(--u)); align-items: flex-start; }
.news-head img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); margin-top: calc(8 * var(--u)); }
.news-head h1 { font-size: calc(29 * var(--u)); font-weight: 400; color: var(--orange); }
.news-head p { font-family: var(--font); font-size: calc(24 * var(--u)); font-weight: 800; letter-spacing: .01em; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(50 * var(--u)) calc(23 * var(--u)); padding-bottom: calc(90 * var(--u)); }
.news-grid .news-item:last-child:nth-child(3n + 1) { grid-column: 2; }
.news-item { display: flex; flex-direction: column; }
.news-item__img { display: block; overflow: hidden; }
.news-item__img img { width: 100%; height: auto; aspect-ratio: 436 / 292; object-fit: cover; transition: transform .5s ease; }
.news-item__img:hover img { transform: scale(1.04); }
.news-item h2 { font-size: calc(21 * var(--u)); font-weight: 400; margin: calc(34 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u)); }
.news-item h2 a { text-decoration: none; }
.news-item p { margin: 0 calc(7 * var(--u)) calc(18 * var(--u)); }
.news-item__more { margin: auto calc(7 * var(--u)) 0; color: var(--orange); font-weight: 700; text-decoration: none; }
.news-item__more:hover { text-decoration: underline; }

.post { padding: calc(41 * var(--u)) 0 calc(70 * var(--u)); }
.post > .container { padding: 0 5%; max-width: none; }
.post h1 { font-size: calc(25.5 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 400; margin-bottom: calc(23 * var(--u)); }
.post__lead { line-height: calc(26 * var(--u)); margin-bottom: calc(33 * var(--u)); }
.post .gallery { padding: 0; }
.post .gallery .container { max-width: none; padding: 0; }
.post .gallery__grid { grid-template-columns: repeat(4, 1fr); gap: calc(20 * var(--u)); }
.post .gallery__grid img { aspect-ratio: 345 / 259; }
.post__back { display: inline-block; margin-top: calc(40 * var(--u)); color: var(--orange); font-weight: 700; text-decoration: none; }
.post__back:hover { text-decoration: underline; }

/* ---------- Kontakt ---------- */
.contact { padding: calc(70 * var(--u)) 0 calc(90 * var(--u)); }
.contact .kicker { font-size: calc(17 * var(--u)); font-weight: 600; }
.contact h1 { font-size: calc(46 * var(--u)); font-weight: 500; margin-bottom: calc(60 * var(--u)); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: calc(60 * var(--u)); align-items: start; }
.contact__info dt { color: var(--orange); font-weight: 700; font-size: calc(20 * var(--u)); }
.contact__info dd { margin: 0 0 calc(30 * var(--u)); font-size: calc(20 * var(--u)); }
.contact__info a { text-decoration: none; }
.contact__info a:hover { color: var(--orange); }
.contact-form { background: var(--dark-2); border-radius: calc(12 * var(--u)); padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(34 * var(--u)); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; margin-bottom: 6px; color: #e9e6e6; }
.field input, .field textarea {
  width: 100%; border: 1px solid transparent; border-radius: 4px; background: var(--white); color: var(--dark);
  font: inherit; font-size: 15px; padding: 10px 12px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--orange); outline-offset: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #e9e6e6; margin: 4px 0 20px; }
.check input { margin-top: 4px; accent-color: var(--orange); width: 16px; height: 16px; }
.check a { color: var(--white); }
.contact-form .btn { width: 100%; min-height: calc(46 * var(--u)); font-size: calc(15 * var(--u)); border-radius: calc(100 * var(--u)); color: var(--white); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: none; margin-top: 16px; padding: 12px 14px; border-radius: 6px; background: #e8f5e9; color: #1b5e20; font-size: 15px; }
.form-success.is-active { display: block; }
.form-success.is-error { background: #fff3e0; color: #8a4b00; }

.map { position: relative; height: 450px; background: #f1efef; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 16px; }
.map-consent p { font-size: 15px; max-width: 420px; }
.map.is-loaded .map-consent { display: none; }

/* ---------- Rechtliches ---------- */
.legal { padding: calc(60 * var(--u)) 0 calc(90 * var(--u)); }
.legal__inner { max-width: 900px; }
.legal h1 { font-size: 36px; font-weight: 700; margin-bottom: 30px; }
.legal h2 { font-size: 22px; font-weight: 700; margin: 34px 0 12px; }
.legal h1, .legal h2, .legal h3, .legal p { overflow-wrap: anywhere; hyphens: auto; }
.legal h3 { font-size: 18px; font-weight: 700; margin: 22px 0 8px; }
.legal p { margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 1.3em; margin: 0 0 12px; }
.legal li { margin-bottom: 4px; }
.legal a { color: #c46f00; }

/* ---------- 404 ---------- */
.notfound { padding: calc(120 * var(--u)) 0 calc(140 * var(--u)); text-align: center; }
.notfound .kicker { font-size: 18px; margin-bottom: 12px; }
.notfound h1 { font-size: clamp(30px, 3.5vw, 46px); margin-bottom: 20px; }
.notfound p { color: var(--grey-light); max-width: 560px; margin: 0 auto 36px; font-size: 18px; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--white); padding: calc(25 * var(--u)) var(--gutter) calc(30 * var(--u)); }
.footer-box { max-width: calc(1354 * var(--u)); margin: 0 auto; background: var(--dark); color: var(--white); border-radius: calc(20 * var(--u)); padding: calc(56 * var(--u)) 0 calc(40 * var(--u)) 5.6%; }
.footer-grid { display: grid; grid-template-columns: 22.6% 23.7% calc(1 * var(--u)) 28.2% 1fr; align-items: start; gap: 0; }
.footer-contact a { white-space: nowrap; }
.footer-brand { align-self: start; margin-top: calc(64 * var(--u)); }
.footer-brand img { width: calc(154 * var(--u)); height: auto; }
.footer-title { color: var(--orange); font-size: calc(23 * var(--u)); font-weight: 700; margin-bottom: calc(14 * var(--u)); }
.footer-nav li { margin: 0 0 calc(19 * var(--u)) calc(4 * var(--u)); }
.footer-nav a { font-size: calc(16 * var(--u)); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { color: var(--orange); }
.footer-divider { width: calc(1 * var(--u)); align-self: stretch; background: rgba(255,255,255,.35); margin-top: calc(46 * var(--u)); }
.footer-legal { padding-left: calc(15 * var(--u)); }
.footer-legal .footer-title { margin-left: 0; }
.footer-legal ul { margin-top: calc(18 * var(--u)); }
.footer-legal li { margin-bottom: calc(19 * var(--u)); }
.footer-legal a, .footer-legal button { font-size: calc(16 * var(--u)); font-weight: 700; text-transform: uppercase; text-decoration: none; background: none; border: 0; color: inherit; padding: 0; cursor: pointer; text-align: left; font-family: inherit; }
.footer-legal a:hover, .footer-legal button:hover { color: var(--orange); }
.footer-contact { padding-left: 0; }
.footer-contact li { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.footer-contact img { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.footer-contact a { font-size: calc(17 * var(--u)); font-weight: 700; text-decoration: none; }
.footer-contact a:hover { color: var(--orange); }
.footer-bottom { text-align: center; color: var(--grey-light); font-size: calc(15 * var(--u)); font-weight: 600; margin-top: calc(30 * var(--u)); }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--orange); }

/* ---------- Datenschutz-Fenster (Aufbau wie bohr.media, Stand 07.11.2026; Farben Marx) ----------
   Klassen bewusst ohne „cookie“: Werbeblocker blenden solche Container sonst aus. */
.priv-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: calc(16 * var(--u)); }
.priv-modal.is-visible { display: flex; }
.priv-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 16, .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(--dark); box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); }
.priv-modal__card:focus { outline: none; }
.priv-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 32px; padding: 26px 0 20px; border-bottom: 1px solid #e6e2e2; flex: none; }
.priv-head img { width: 96px; height: auto; }
.priv-h { font-size: 24px; font-weight: 700; color: var(--dark); }
.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: #b36b00; 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 #e6e2e2; font-size: 13.5px; line-height: 1.55; color: #6b6464; cursor: pointer; position: relative; }
.priv-cat:first-child { padding-top: 0; }
.priv-cat b { display: block; font-size: 15px; font-weight: 600; color: var(--dark); 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: #d8d3d3; 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 2px rgba(0,0,0,.15); transition: transform .2s; }
.priv-cat input:checked + i { background: var(--orange); }
.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(255, 154, 0, .5); outline-offset: 2px; }
.priv-actions { display: grid; gap: 12px; margin-top: 22px; flex: none; }
/* „Alles akzeptieren“ und „Ablehnen“ gleich auffällig; dunkle Schrift auf Orange für ausreichenden Kontrast */
.priv-btn { background: var(--orange); color: var(--dark); border: 0; border-radius: calc(999 * var(--u)); padding: calc(15 * var(--u)) calc(20 * var(--u)); font: inherit; font-weight: 700; font-size: calc(16 * var(--u)); cursor: pointer; transition: background-color .2s; }
.priv-btn:hover { background: #ffad33; }
.priv-btn:focus-visible { outline: 3px solid rgba(45, 39, 39, .5); outline-offset: 2px; }
.priv-btn--rahmen { background: #fff; color: var(--dark); box-shadow: inset 0 0 0 2px var(--orange); }
.priv-btn--rahmen:hover { background: #fff4e3; }
.priv-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 36px; padding: 16px 24px; background: #f4f2f2; font-size: 14px; flex: none; }
.priv-foot a, .priv-foot button { color: #6b6464; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.priv-foot a:hover, .priv-foot button:hover { color: var(--dark); text-decoration: underline; }
.priv-foot [hidden] { display: none; }


/* ---------- Einblend-Effekte wie bei Wix (Werte aus der Originalseite ausgelesen) ---------- */
/* Ohne JavaScript bleibt alles sichtbar; erst mit .anim-ready am <html> wird ausgeblendet */
.anim-ready [data-anim]:not(.is-in) { opacity: 0; }
[data-anim].is-in { animation-duration: var(--anim-dur, 1200ms); animation-delay: var(--anim-delay, 0ms); animation-fill-mode: both; }
[data-anim="slide"].is-in  { animation-name: mxSlide, mxFade; animation-timing-function: cubic-bezier(.645,.045,.355,1), linear; }
[data-anim="glide"].is-in  { animation-name: mxGlide; animation-timing-function: cubic-bezier(.645,.045,.355,1); }
[data-anim="grow"].is-in   { animation-name: mxGrow, mxFade; animation-timing-function: cubic-bezier(.645,.045,.355,1), linear; animation-duration: var(--anim-dur, 1500ms), 1200ms; }
[data-anim="float"].is-in  { animation-name: mxFloat; animation-timing-function: cubic-bezier(.445,.05,.55,.95); }
[data-anim="drop"].is-in   { animation-name: mxDrop, mxFade; animation-timing-function: cubic-bezier(.645,.045,.355,1), linear; animation-duration: 1200ms, 960ms; }
[data-anim="expand"].is-in { animation-name: mxExpand, mxFade; animation-timing-function: cubic-bezier(.645,.045,.355,1), linear; }
[data-anim="fade"].is-in   { animation-name: mxFade; animation-timing-function: linear; }
@keyframes mxFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mxSlide  { from { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); transform: translate(0, 100%); } to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: none; } }
@keyframes mxGlide  { from { transform: translate(-100%, 0); } to { transform: none; } }
@keyframes mxGrow   { from { transform: translate(0, 20%) scale(.8); } to { transform: none; } }
@keyframes mxFloat  { from { opacity: 0; transform: translate(0, 60px); } to { opacity: 1; transform: none; } }
@keyframes mxDrop   { from { scale: 1.2; } to { scale: 1; } }
@keyframes mxExpand { from { transform: scale(.8); } to { transform: none; } }
/* Abschnitte mit Gleit-Effekt nicht seitlich scrollen lassen */
.services, .feature, .service-list, .history { overflow-x: clip; }


/* ---------- Spülbohrung: Maße aus dem Original (weicht von Tiefbau ab) ---------- */
@media (min-width: 1001px) {
  .page--spuel .page-hero { min-height: calc(683 * var(--u)); }
  .page--spuel .page-hero .kicker { line-height: calc(29 * var(--u)); margin-bottom: -6px; }
  .page--spuel .o-feature { padding-top: calc(82 * var(--u)); }
  .page--spuel .can { padding-top: calc(104 * var(--u)); padding-bottom: calc(63 * var(--u)); }
  .page--spuel .feature__grid > div:first-child { margin: calc(26 * var(--u)) 0 0; }
  .page--spuel .can__grid { grid-template-columns: 38% 31.6% 1fr; }
  .page--spuel .can__item { font-size: calc(24 * var(--u)); line-height: calc(31 * var(--u)); gap: calc(21 * var(--u)); }
  .page--spuel .can__item:last-child { gap: calc(14 * var(--u)); }
  .page--spuel .o-recycling { padding-top: calc(44 * var(--u)); }
  .page--spuel .service-list { padding: calc(48 * var(--u)) 0 calc(160 * var(--u)); }
  .page--spuel .service-list__grid { grid-template-columns: 38.5% 1fr; }
  .page--spuel .service-list .kicker { font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
  .page--spuel .steps { gap: calc(64 * var(--u)) 0; margin-top: calc(21 * var(--u)); }
  .page--spuel .step:nth-child(3) { margin-top: calc(58 * var(--u)); }
  .page--spuel .step li { line-height: calc(19.5 * var(--u)); margin-bottom: 0; }
  .page--spuel .step h3 { line-height: calc(26 * var(--u)); margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }
}


/* ---------- Über uns: Maße aus dem Original ---------- */
@media (min-width: 1001px) {
  .page--about .page-hero { min-height: calc(691 * var(--u)); }
  .page--about .history { padding: calc(106 * var(--u)) 0 calc(91 * var(--u)); }
  .page--about .timeline { margin-top: calc(33 * var(--u)); }
  .page--about .history__grid { grid-template-columns: 32.8% 54.3% 1fr; padding: 0 0 0 4.86%; }
  .page--about .tl-item { margin-bottom: 0; min-height: calc(var(--tl-h, 0) * calc(1 * var(--u))); }
  .page--about .tl-tag { font-size: calc(15.3 * var(--u)); line-height: calc(21 * var(--u)); padding: calc(5 * var(--u)) calc(14 * var(--u)); }
  .page--about .tl-tag--light, .page--about .tl-tag--white { font-size: calc(13.1 * var(--u)); line-height: calc(18 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); }
  .page--about .tl-body { gap: calc(17 * var(--u)); }
  .page--about .tl-body .tl-sub { gap: calc(17 * var(--u)); padding-left: calc(8 * var(--u)); }
  .page--about .tl-item--right .tl-body { margin-left: calc(16 * var(--u)); }
  .page--about .tl-item--left .tl-body { margin-right: calc(31 * var(--u)); }
  .page--about .tl-item--left .tl-year { padding-left: calc(43 * var(--u)); }
  .page--about .tl-item--right .tl-year { padding-right: calc(85 * var(--u)); }
  .page--about .text-block { padding: calc(64 * var(--u)) 0 calc(76 * var(--u)); }
  .page--about .text-block p { font-size: calc(13.1 * var(--u)); line-height: calc(23.6 * var(--u)); margin-bottom: 0; }
  .page--about .text-block h2 { margin-bottom: calc(7 * var(--u)); line-height: calc(38 * var(--u)); }
  .page--about .text-block--values { padding: calc(76 * var(--u)) 0 0; }
  .page--about .text-block--values .text-block__inner { padding-left: 10.5%; }
  .page--about .text-block--values p { font-size: calc(18 * var(--u)); line-height: calc(27 * var(--u)); max-width: calc(626 * var(--u)); }
  .page--about .news-slider { padding: calc(126 * var(--u)) 0 calc(50 * var(--u)); }
  .page--about .news-slider .container { padding-left: 10.4%; max-width: none; }
  .page--about .news-slider__head { margin-bottom: calc(33 * var(--u)); }
  .page--about .news-card { flex-basis: calc(380 * var(--u)); height: calc(380 * var(--u)); }
  .page--about .news-card h3 { font-size: calc(22 * var(--u)); top: calc(29 * var(--u)); left: calc(30 * var(--u)); }
}


/* ---------- News-Übersicht: Maße aus dem Original ---------- */
@media (min-width: 1001px) {
  .news-head { padding: calc(64 * var(--u)) 0 calc(63 * var(--u)); }
  .news-head__inner { padding-left: calc(56 * var(--u)); }
  .news-head h1 { line-height: calc(38 * var(--u)); }
  .news-head p { line-height: calc(31 * var(--u)); margin-top: calc(6 * var(--u)); }
  .news-grid { row-gap: calc(109 * var(--u)); }
}


/* ---------- Kontakt: Maße aus dem Original ---------- */
.contact__company { font-size: calc(29.2 * var(--u)); line-height: calc(41 * var(--u)); margin-bottom: calc(57 * var(--u));  font-weight: 700; }
@media (min-width: 1001px) {
  .page--kontakt { --header-h: 132px; }
  .page--kontakt .site-header__inner { padding-left: calc(60 * var(--u)); }
  .page--kontakt .site-header__logo { padding-top: calc(34 * var(--u)); }
  .page--kontakt .site-header__logo img { width: calc(128 * var(--u)); }
  .contact { padding: calc(102 * var(--u)) 0 calc(37 * var(--u)); }
  .contact .container { padding: 0 3.96% 0 3.82%; }
  .contact .kicker { font-size: calc(19.8 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 700; }
  .contact h1 { font-size: calc(60 * var(--u)); line-height: calc(78 * var(--u)); font-weight: 400; margin-bottom: calc(145 * var(--u)); }
  .contact__grid { grid-template-columns: 46.2% 1fr; gap: 0; }
  .contact__left { padding-top: calc(81 * var(--u)); }
  .contact__info dt, .contact__info dd { font-size: calc(23 * var(--u)); line-height: calc(32 * var(--u)); }
  .contact__info dd { margin-bottom: calc(32 * var(--u)); }
  .contact-form { padding: calc(24 * var(--u)) calc(25 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); border-radius: calc(10 * var(--u)); }
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }
  .field { margin-bottom: 16px; }
  .field label { font-size: 14px; line-height: 20px; }
  .field input { height: 49px; }
  .field textarea { min-height: 94px; height: 94px; }
  .field:has(textarea) { margin-bottom: 24px; }
  .check { font-size: 16px; line-height: 24px; margin: 0 0 24px; }
  .contact-form .btn { display: flex; width: calc(321 * var(--u)); min-height: calc(41 * var(--u)); height: calc(41 * var(--u)); padding: 0 calc(20 * var(--u)); margin-left: auto; font-size: calc(16 * var(--u)); }
  .map { height: 563px; }
}

/* ---------- Responsiv (Breakpoints wie bei Wix: Tablet bis 1000 px, Handy bis 750 px) ---------- */

/* Handy-Slider für Galerien: Pfeile nur, wenn die Galerie zur Wischleiste wird */
.gallery__btn { display: none; }

@media (max-width: 1000px) {
  :root { --header-h: 100px; --gutter: 25px; }

  /* Kopf: Burger-Menü, Kopf scrollt mit (wie Wix) */
  .site-header { position: relative; }
  .page--home .site-header { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; }
  .page--home .site-header.is-scrolled { background: var(--white); }
  .site-header__inner { padding: 0 var(--gutter); align-items: center; }
  .site-header__logo { padding-top: 0; }
  .main-nav { margin-top: 0; }
  .site-header__logo img { width: 120px; }
  .nav-toggle { display: block; z-index: 2; }
  .page--home .nav-toggle span, .page--home .nav-toggle span::before, .page--home .nav-toggle span::after { background: var(--dark); }
  .page--home:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span, .page--home:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span::before, .page--home:not(.nav-open) .site-header:not(.is-scrolled) .nav-toggle span::after { background: var(--white); box-shadow: 0 0 6px rgba(0,0,0,.35); }
  .main-nav {
    position: fixed; inset: 0; padding-top: var(--header-h); background: var(--white);
    transform: translateX(100%); transition: transform .3s ease; overflow-y: auto;
  }
  .nav-open .site-header, .page--home.nav-open .site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--white); }
  .nav-open .site-header__logo { position: relative; z-index: 2; }
  .nav-open .main-nav { transform: none; }
  .main-nav ul { flex-direction: column; padding: 20px var(--gutter); }
  .main-nav a { padding: 16px 0; font-size: 20px; border-bottom: 1px solid #eee; }
  .nav-open { overflow: hidden; }

  /* Startseite */
  .intro { padding-top: 70px; }
  .intro__inner { padding-left: 0; }
  .intro .kicker { font-size: 15px; }
  .intro h1 { font-size: 31px; margin-bottom: 18px; }
  .intro p { font-size: 15px; line-height: 1.8; max-width: none; }
  .intro .btn { margin-top: 30px; }
  .stats { padding: 50px 0 0; }
  .stats__row { grid-template-columns: 1fr; width: 100%; }
  .stat { text-align: left; border-right: 0; border-top: 1px solid var(--grey-light); padding: 22px var(--gutter) 26px; }
  .stat:first-child { border-top: 0; }
  .stat__pre, .stat__label { display: block; font-size: 13px; }
  .stat__num { font-size: 48px; }
  .services { padding-top: 60px; }
  .services__grid { grid-template-columns: 1fr 260px; gap: 30px; padding: 0 var(--gutter); }
  .services h2 { margin-top: 0; font-size: 31px; }
  .services li { font-size: 15px; }
  .services__img img { aspect-ratio: 2 / 3; }
  .about { padding: 30px 0; }
  .about__grid { grid-template-columns: 52% 1fr; padding: 0 var(--gutter) 0 2%; align-items: center; }
  .about__img { grid-column: auto; }
  .about__text { padding-top: 0; }
  .about__text h2 { font-size: 24px; }
  .about__text p { font-size: 14px; }
  .news-card { flex-basis: 190px; height: 250px; }
  .news-card h3 { font-size: 18px; top: 20px; left: 20px; }
  .news-slider__track { gap: 20px; }

  /* Leistungsseiten */
  .page-hero { min-height: 460px; }
  .page-hero__content { padding: 0 var(--gutter); }
  .feature { padding-top: 70px; }
  .feature__grid { grid-template-columns: 1fr 48%; padding: 0 var(--gutter); }
  .feature__list li, .feature__list--wide li { font-size: 16px; margin-bottom: 14px; }
  .can__grid { grid-template-columns: 1fr 1fr; padding: 0 var(--gutter); gap: 24px 30px; }
  .can__grid > div:first-child { grid-column: 1 / -1; }
  .can__item { font-size: 19px; }
  .wide-img { padding: 0 var(--gutter); }
  .wide-img--full { padding: 0; }
  .service-list__grid { grid-template-columns: 34% 1fr; padding: 0 var(--gutter); }
  .icon-grid { grid-template-columns: 1fr 1fr; }
  .icon-grid li:nth-child(5), .icon-grid li:nth-child(6) { margin-top: 0; }
  .feature__grid > div:first-child { margin-bottom: 0; }
  .icon-grid li { font-size: 18px; }
  .video-band { height: 340px; }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery--masonry .gallery__grid { columns: 3; }

  /* Über uns */
  .history__grid { grid-template-columns: 220px 1fr; padding: 0 var(--gutter); }
  .tl-tag { min-width: 0; }
  .text-block__inner { padding: 0 var(--gutter); }

  /* News, Kontakt */
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid .news-item:last-child:nth-child(3n + 1) { grid-column: auto; }
  .contact__grid { grid-template-columns: 1fr 1.5fr; gap: 30px; }

  /* Fuß: ohne Spaltentitel bei Navigation und Rechtlichem (wie Wix) */
  .footer-box { padding: 40px 28px 30px; }
  .footer-legal { padding-left: 0; }
  .footer-contact { padding-left: 0; }
  .footer-grid { grid-template-columns: 1.1fr 1fr 1px 1fr 1.2fr; gap: 0 22px; }
  .footer-brand { padding-left: 0; margin-top: 0; align-self: center; }
  .footer-brand img { width: 130px; }
  .footer-nav .footer-title, .footer-legal .footer-title { display: none; }
  .footer-legal { margin-left: 0; align-self: center; }
  .footer-legal ul { margin-top: 0; }
  .footer-divider { margin-top: 0; }
  .footer-nav a, .footer-legal a, .footer-legal button { font-size: 14px; }
  .footer-nav li { margin-bottom: 16px; }
  .footer-title { font-size: 19px; }
  .footer-contact a { font-size: 14px; }
}

@media (max-width: 750px) {
  :root { --header-h: 70px; --gutter: 22px; }
  .page--kontakt { --header-h: 106px; }
  .page--kontakt .site-header__inner { padding-left: 37px; }
  .page--kontakt .site-header__logo img { width: 121px; }
  body { font-size: 15px; }
  .site-header__logo img { width: 82px; }

  /* Startseite */
  .home-hero { height: 350px; min-height: 0; }
  .intro { padding-top: 60px; }
  .intro .kicker { font-size: 14px; }
  .intro h1 { font-size: 24px; }
  .intro p { font-size: 14px; line-height: 1.8; }
  .intro .btn { min-height: 46px; min-width: 146px; font-size: 16px; }
  .stats { padding-top: 40px; }
  .stat__num { font-size: 50px; }
  .stat__pre, .stat__label { display: block; font-size: 16px; line-height: 29px; }
  .services { padding: 50px 0 0; }
  .services__grid { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .services__grid > div:first-child { padding: 0 var(--gutter) 40px; }
  .services h2 { font-size: 29px; }
  .services h3 { font-size: 19px; }
  .services li { font-size: 14.5px; }
  .services__img { background: var(--white); }
  .services__img img { aspect-ratio: 3 / 2; }
  .about { padding: 20px 0 36px; }
  .about__grid { grid-template-columns: 1fr; padding: 0 var(--gutter); }
  .about__text { padding: 0; text-align: left; }
  .about__text h2 { margin: 0 0 18px; font-size: 24px; }
  .about__text h2 .light { position: static; margin: 0; color: var(--orange); text-shadow: none; }
  .about__text p { padding: 0; font-size: 15px; line-height: 1.6; }
  .about__text .btn { display: flex; width: max-content; margin: 26px auto 34px; }
  .about__img { order: 2; padding: 0 8px; }
  .about__img img { aspect-ratio: 315 / 192; }
  .news-slider { padding: 34px 0 40px; }
  .news-slider__head { justify-content: space-between; margin-bottom: 26px; }
  .news-slider__head h2 { font-size: 24px; line-height: 1.5; max-width: 220px; }
  .news-slider__head img { width: 45px; height: 45px; }
  .news-card { flex-basis: 208px; height: 280px; }
  .news-card h3 { font-size: 22px; font-weight: 700; top: 26px; left: 24px; }
  .news-slider__track { gap: 24px; }
  .news-slider__btn { display: grid; width: 38px; height: 38px; right: -6px; }
  .news-slider__btn--prev { left: -6px; }

  /* Leistungsseiten */
  .page-hero { min-height: 226px; }
  .page-hero__title { font-size: 40px; }
  .page-hero .kicker { font-size: 14px; }
  .page-hero__logo { width: 115px; }
  .page--about .page-hero { min-height: 147px; }
  .feature { padding: 50px 0 40px; }
  .feature__grid { grid-template-columns: 1fr; gap: 30px; }
  .feature__title { font-size: 24px; }
  .feature__sub { font-size: 18px; margin-bottom: 18px; }
  .feature__list li, .feature__list--wide li { font-size: 15px; margin-bottom: 12px; }
  .feature__img--small { width: 76%; margin: 0 auto; }
  .can { padding: 30px 0 36px; }
  .can__grid { grid-template-columns: 1fr; gap: 26px; }
  .can .kicker { font-size: 13px; }
  .can__title { font-size: 28px; margin-bottom: 8px; }
  .can__item { flex-direction: row-reverse; justify-content: space-between; font-size: 17px; gap: 20px; }
  .can__item img { width: 44px; height: 44px; }
  .wide-img { padding: 0; }
  .wide-img img { border-radius: 0; aspect-ratio: 375 / 170; }
  .wide-img--top { background: var(--white); }
  .wide-img--full img { aspect-ratio: 375 / 200; }
  .service-list { padding: 40px 0; }
  .service-list__grid { grid-template-columns: 1fr; gap: 24px; }
  .service-list__title { font-size: 28px; }
  .icon-grid { grid-template-columns: 1fr; gap: 16px; padding-left: 8px; }
  .icon-grid li { font-size: 19px; }
  .icon-grid img { width: 40px; height: 40px; }
  .steps { gap: 30px; }
  .step { grid-template-columns: 44px 1fr; gap: 0 14px; }
  .step img { width: 44px; height: 44px; }
  .step img { grid-row: auto; }
  .step ul { grid-column: 1 / -1; margin-top: 8px; }
  .step li { font-size: 14px; }
  .video-band { height: 241px; }

  /* Spülbohrung: Reihenfolge der Abschnitte wie auf der Wix-Handyansicht */
  .page--spuel main { display: flex; flex-direction: column; }
  .page--spuel .o-hero { order: 0; }
  .page--spuel .o-feature { order: 1; }
  .page--spuel .o-recycling { order: 2; }
  .page--spuel .o-wide { order: 3; }
  .page--spuel .o-can { order: 4; }
  .page--spuel .o-steps { order: 5; }
  .page--spuel .o-video { order: 6; }
  .page--spuel .o-gallery { order: 7; }

  /* Galerien werden zur Wischleiste mit Pfeil */
  .gallery { padding: 24px 0 40px; }
  .gallery--top { padding-top: 24px; }
  .gallery .container { position: relative; padding: 0; }
  .gallery__grid, .gallery--masonry .gallery__grid {
    display: flex; gap: 10px; columns: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding: 0 var(--gutter);
  }
  .gallery__grid::-webkit-scrollbar { display: none; }
  .gallery--collage .gallery__grid { height: auto; padding-top: 0; position: static; }
  .gallery--collage .gallery__grid a { position: relative; left: auto; top: auto; width: auto; }
  .gallery__grid a, .gallery--masonry .gallery__grid a, .gallery--collage .gallery__grid a { flex: 0 0 80%; height: 205px; margin: 0; scroll-snap-align: center; }
  .gallery__grid img, .gallery--masonry .gallery__grid img, .gallery--rows .gallery__grid img, .post .gallery__grid img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .gallery__btn {
    display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.92); color: var(--dark); box-shadow: 0 2px 10px rgba(0,0,0,.2);
  }
  .gallery__btn svg { width: 18px; height: 18px; }
  .gallery__btn--prev { left: 8px; }
  .gallery__btn--next { right: 8px; }
  .gallery__btn[hidden] { display: none; }

  /* Über uns */
  .history { padding: 50px 0; }
  .history__grid { grid-template-columns: 1fr; gap: 34px; }
  .history__head { position: static; }
  .timeline::before { left: 13px; }
  .tl-item, .tl-item--left, .tl-item--right { grid-template-columns: 26px 1fr; gap: 6px 16px; margin-bottom: 36px; }
  .tl-item .tl-dot { grid-column: 1; grid-row: 1 / span 2; }
  .tl-item--left .tl-year, .tl-item--right .tl-year { grid-column: 2; grid-row: 1; justify-self: start; padding: 0; }
  .tl-item--left .tl-body, .tl-item--right .tl-body { grid-column: 2; grid-row: 2; justify-self: start; align-items: flex-start; }
  .tl-item--left .tl-sub, .tl-body .tl-sub { padding: 0 0 0 16px; align-items: flex-start; }
  .text-block { padding: 34px 0 30px; }
  .text-block h2 { font-size: 26px; }
  .text-block h2 img { width: 52px; height: 52px; opacity: .55; }
  .text-block--values h2 img { opacity: .7; }
  .text-block p, .text-block--values p { font-size: 15px; line-height: 1.85; }

  /* News */
  .news-head { padding: 40px 0 30px; }
  .news-head__inner { gap: 14px; }
  .news-head img { width: 36px; height: 36px; margin-top: 4px; }
  .news-head h1 { font-size: 20px; }
  .news-head p { font-size: 17px; }
  .news-grid { grid-template-columns: 1fr; gap: 44px; padding: 0 8px 60px; }
  .news-item h2 { font-size: 17px; margin: 24px 5px 10px; }
  .news-item p { font-size: 16px; margin: 0 5px 14px; }
  .news-item__more { margin-left: 5px; }
  .post { padding: 11px 0 50px; }
  .post > .container { padding: 0 19px; }
  .post h1 { font-size: 19.2px; line-height: 25px; margin-bottom: 5px; }
  .post__lead { font-size: 16px; line-height: 25.5px; margin-bottom: 11px; }
  .post .gallery .container { position: static; }
  .post .gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; overflow: visible; padding: 0; }
  .post .gallery__grid a { height: auto; flex: none; }
  .post .gallery__grid img { height: auto; aspect-ratio: 79 / 59; }
  .post .gallery__btn { display: none !important; }
  .page--tief .can { padding-bottom: 0; }
  .icon-grid { gap: 11px; }
  .icon-grid img { width: 40px; height: 40px; }

  /* Kontakt */
  .contact { padding: 40px 0 50px; }
  .contact .kicker { font-size: 14px; }
  .contact h1 { font-size: 24px; margin-bottom: 36px; }
  .contact__grid { grid-template-columns: 1fr; gap: 30px; }
  .contact__info dt, .contact__info dd { font-size: 17px; }
  .contact__info dd { margin-bottom: 20px; }
  .contact-form { padding: 26px 18px; }
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }
  .map { height: 330px; }

  .legal { padding: 40px 0 60px; }
  .legal h1 { font-size: 28px; }
  .legal h2 { font-size: 19px; }

  /* Fuß: Logo oben mittig, darunter Navigation | Rechtliches */
  .site-footer { padding: 25px 22px 30px; }
  .footer-box { padding: 0; border-radius: 20px; overflow: hidden; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .footer-brand { grid-column: 1 / -1; text-align: center; padding: 40px 0 26px; border-top: 1px solid rgba(255,255,255,.18); margin-top: 28px; border-bottom: 1px solid rgba(255,255,255,.18); }
  .footer-brand img { width: 219px; margin: 0 auto; }
  .footer-divider { display: none; }
  .footer-nav { padding: 18px 0 18px 33px; }
  .footer-nav li { margin: 0 0 18px; }
  .footer-nav a { font-size: 16px; font-weight: 500; }
  .footer-legal { border-left: 1px solid rgba(255,255,255,.35); padding: 18px 0 18px 10px; align-self: stretch; display: flex; align-items: flex-end; }
  .footer-legal ul { margin: 0 0 6px; }
  .footer-legal li { margin-bottom: 18px; }
  .footer-legal a, .footer-legal button { font-size: 13px; font-weight: 500; }
  .footer-contact { grid-column: 1 / -1; padding: 20px 33px 4px; border-top: 1px solid rgba(255,255,255,.18); }
  .footer-contact a { font-size: 15px; }
  .footer-bottom { margin: 16px 0 0; padding: 18px 24px 22px; border-top: 1px solid rgba(255,255,255,.18); font-size: 15px; line-height: 1.4; }

  .lightbox { padding: 60px 12px; }
  .priv-modal { align-items: flex-end; padding: 0; }
  .priv-modal__card { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .priv-head { margin: 0 18px; padding: 18px 0 14px; gap: 12px; }
  .priv-head img { width: 72px; }
  .priv-h { font-size: 20px; }
  .priv-panel.is-active { padding: 16px 18px 18px; }
  .priv-foot { gap: 8px 24px; padding: 14px 18px; }
}


/* ================= Tablet 751–1000 px: Maße aus dem Original bei 1000 px, in vw umgerechnet (1 vw = 10 px) ================= */
@media (min-width: 751px) and (max-width: 1000px) {
  :root { --header-h: 12.1vw; }
  .site-header__inner { padding: 0 4.2vw 0 5.4vw; align-items: flex-start; }
  .site-header__logo { padding-top: 2.5vw; }
  .site-header__logo img { width: 15.3vw; }
  .nav-toggle { margin-top: 3.7vw; }
  .main-nav { padding-top: var(--header-h); }

  /* Startseite */
  .intro { padding-top: 12.6vw; }
  .intro .container { padding: 0 3vw; }
  .intro .kicker { font-size: 2.08vw; line-height: 2.9vw; }
  .intro h1 { font-size: 5vw; line-height: 7vw; margin-bottom: 1.6vw; }
  .intro p { font-size: 1.9vw; line-height: 3.4vw; max-width: 87vw; }
  .intro .btn { margin-top: 4.2vw; }
  .stats { padding: 2.5vw 0 0; }
  .stats__row { width: 100%; }
  .stat { padding: 3.5vw 2.9vw; }
  .stat:nth-child(2) { order: 3; }
  .stat__pre, .stat__label { font-size: 1.6vw; line-height: 2.9vw; }
  .stat__num { font-size: 5vw; line-height: 6.3vw; }
  .services { padding: 6.2vw 0 4.3vw; }
  .services__grid { grid-template-columns: 1fr 32vw; gap: 0; padding: 0 4.2vw 0 4.1vw; }
  .services h2 { font-size: 5vw; line-height: 7vw; margin: 0 0 1.6vw; }
  .services h3 { font-size: 2.5vw; line-height: 3.5vw; padding-left: 4.3vw; margin: 0 0 .5vw; }
  .services h3.small { font-size: 1.95vw; line-height: 2.45vw; padding-left: 6.1vw; margin-top: 2.4vw; }
  .services ul { padding-left: 6.1vw; }
  .services li { font-size: 1.95vw; line-height: 2.45vw; }
  .services .btn { margin: 2.4vw 0 2.6vw 6.1vw; }
  .services__img { margin-top: 3.6vw; }
  .services__img img { aspect-ratio: 320 / 634; }
  .about { padding: 0; }
  .about__grid { grid-template-columns: 5vw 40vw 1fr; padding: 0; align-items: start; }
  .about__img { grid-column: 2; }
  .about__img img { aspect-ratio: 400 / 459; }
  .about__text { padding-top: 2.6vw; }
  .about__text h2 { font-size: 3.26vw; line-height: 4.6vw; margin-bottom: 2.6vw; }
  .about__text h2 .light { position: absolute; right: 100%; margin-right: .35em; color: var(--white); }
  .about__text p { font-size: 1.5vw; line-height: 2.4vw; padding-left: 2.1vw; max-width: 49.4vw; margin-bottom: 2.4vw; }
  .about__text .btn { margin-left: 2.1vw; }
  .news-slider { padding: 6.8vw 0 5vw; }
  .news-slider .container { padding: 0 0 0 3.6vw; max-width: none; }
  .news-slider__head { margin-bottom: 6.9vw; }
  .news-slider__head h2 { font-size: 2.6vw; line-height: 3.4vw; }
  .news-slider__track { gap: 3.2vw; }
  .news-card { flex-basis: 18.5vw; height: 24.6vw; }
  .news-card h3 { font-size: 2.4vw; top: 3vw; left: 3.5vw; right: 2vw; }
  .news-slider { overflow-x: clip; }
  .news-slider__btn--next { right: 1.5vw; }

  /* Leistungsseiten: einspaltig wie im Original */
  .page-hero { min-height: 46.6vw; }
  .page--spuel .page-hero { min-height: 47.4vw; }
  .page-hero__content { padding: 0 3vw 0 6.3vw; }
  .page--spuel .page-hero__content { padding-left: 5.9vw; }
  .page-hero__title { font-size: 5.34vw; line-height: 6.9vw; }
  .page-hero .kicker, .page-hero .kicker--sm { font-size: 1.4vw; }
  .page--spuel .page-hero .kicker { font-size: 1.46vw; }
  .feature { padding: 14.6vw 0 0; }
  .page--spuel .o-feature { padding-top: 8.9vw; }
  .page--spuel .o-recycling { padding-top: 9.2vw; }
  .feature__grid { grid-template-columns: 1fr; gap: 0; padding: 0 5.3vw 0 5vw; }
  .page--tief .feature__grid { padding: 0 7.3vw 0 7.1vw; }
  .feature__grid > div:first-child { padding-left: 3.7vw; margin: 0; }
  .page--tief .feature__grid > div:first-child { padding-left: 2vw; }
  .feature__img, .feature__img--small { order: 2; width: 100%; margin: 11.9vw 0 0; }
  .page--tief .feature__img { margin-top: 8.9vw; }
  .page--tief .wide-img--top { display: none; }
  .feature__img img { aspect-ratio: 897 / 598; border-radius: var(--radius); }
  .feature__title { font-size: 5vw; line-height: 7vw; }
  .feature__sub { font-size: 2.5vw; line-height: 3.5vw; margin-bottom: 4vw; }
  .page--tief .feature__sub { font-size: 2vw; line-height: 2.8vw; margin-bottom: 4vw; }
  .feature__list { padding-left: 1.9vw; }
  .feature__list li { font-size: 2.6vw; line-height: 3.3vw; margin-bottom: 3.2vw; }
  .feature__list--wide li { font-size: 2vw; line-height: 2.5vw; margin-bottom: 2.5vw; }
  .wide-img { padding: 0; width: 100%; }
  .wide-img--top { padding-bottom: 0; overflow: hidden; }
  .page--spuel .o-wide { padding-top: 5.8vw; }
  .wide-img--top img { width: 101.8vw; max-width: none; margin-left: -.5vw; border-radius: 0; aspect-ratio: 1018 / 437; }
  .can { padding: 8.8vw 0 6vw; }
  .page--spuel .can { padding-top: 6.3vw; }
  .can__grid { grid-template-columns: 1fr; gap: 0; padding: 0 3.6vw; }
  .can .kicker { font-size: 3.26vw; line-height: 4.6vw; }
  .page--spuel .can .kicker { font-size: 1.82vw; line-height: 2.6vw; }
  .can__title { font-size: 5.86vw; line-height: 7.6vw; margin: 0 0 5vw; }
  .page--spuel .can__title { margin-bottom: 8.1vw; }
  .page--spuel .can__item { margin-bottom: 9.4vw; }
  .can__item { justify-content: space-between; align-items: center; font-size: 3.91vw; line-height: 5.1vw; padding: 0; margin-bottom: 8vw; gap: 3vw; }
  .can__item p { max-width: 61vw; }
  .can__item img { order: 2; margin-right: 11.8vw; }
  .can__item img[src*="icon-gewaehrleistung"] { width: 9.9vw; height: 9.9vw; }
  .can__item img[src*="icon-oberflaechen"] { width: 12.7vw; height: 12.7vw; margin-top: 0; }
  .can__item img[src*="icon-bohrlaenge"] { width: 9.9vw; height: 9.9vw; }
  .can__item img[src*="icon-durchmesser"] { width: 9.4vw; height: 9.4vw; }
  .page--spuel .can__item { order: 2; }
  .page--spuel .can__grid > .can__item:nth-child(2) { order: 3; }
  .video-band { height: 36.5vw; }
  .gallery--collage .gallery__grid { padding-top: var(--ratio-t, var(--ratio)); }
  .gallery--collage .gallery__grid a { left: var(--lt, var(--l)); top: var(--tt, var(--t)); width: var(--wt, var(--w)); height: var(--ht, var(--h)); }
  .gallery--top { padding-top: 3.4vw; }

  /* Spülbohrung und Über uns: Reihenfolge wie im Original */
  .page--spuel main, .page--about main { display: flex; flex-direction: column; }
  .page--spuel .o-hero { order: 0; } .page--spuel .o-feature { order: 1; } .page--spuel .o-recycling { order: 2; }
  .page--spuel .o-wide { order: 3; } .page--spuel .o-can { order: 4; } .page--spuel .o-steps { order: 5; }
  .page--spuel .o-video { order: 6; } .page--spuel .o-gallery { order: 7; }
  .page--about .o-hero { order: 0; } .page--about .o-text { order: 1; } .page--about .o-wide { order: 2; }
  .page--about .o-history { order: 3; } .page--about .o-values { order: 4; } .page--about .o-news { order: 5; }

  /* Über uns: Zeitleiste = Desktop-Version, verkleinert */
  .page--about .page-hero { min-height: 48vw; }
  .page--about .page-hero__content { padding-left: 6.7vw; }
  .page-hero__logo { width: 16.9vw; }
  .page--about .text-block.o-text { padding: 0 0 1.9vw; }
  .page--about .o-text .text-block__inner { padding: 0 10.1vw; }
  .page--about .o-text h2 { font-size: 5.21vw; line-height: 6.8vw; margin: 0 0 .7vw; }
  .page--about .o-text h2 img { width: 5.2vw; height: 5.2vw; }
  .page--about .o-text p { font-size: 1.2vw; line-height: 2.87vw; max-width: 78.6vw; margin: 0; }
  .page--about .history { padding: 5.7vw 0 5vw; }
  .page--about .history__grid { grid-template-columns: 32.8% 54.3% 1fr; padding: 0 0 0 4.86%; gap: 0; }
  .page--about .history__head { position: sticky; top: 2vw; }
  .page--about .history__head .kicker { font-size: 2vw; line-height: 2.8vw; }
  .page--about .history__head h2 { font-size: 2.6vw; line-height: 3.4vw; }
  .page--about .timeline { margin-top: 2.3vw; }
  .page--about .tl-item { margin-bottom: 0; min-height: calc(var(--tl-h, 0) * 100vw / 1440); grid-template-columns: minmax(0, 1fr) 4.86vw minmax(0, 1fr); }
  .page--about .tl-dot { width: 1.8vw; height: 1.8vw; }
  .page--about .tl-year { font-size: 2vw; line-height: 2.5vw; }
  .page--about .tl-item--left .tl-year { padding-left: 5.5vw; }
  .page--about .tl-item--right .tl-year { padding-right: 4.7vw; }
  .page--about .tl-tag { font-size: 1.06vw; line-height: 1.46vw; padding: 0 1.11vw; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--orange); color: var(--white); box-shadow: none; border-radius: .39vw; min-height: 2.92vw; min-width: 0; }
  .page--about .tl-item--right .tl-body > .tl-tag { width: 26.7vw; }
  .page--about .tl-item--left .tl-body > .tl-tag { width: 23.3vw; }
  .page--about .tl-tag--light, .page--about .tl-tag--white { font-size: .91vw; line-height: 1.25vw; padding: 0 1.67vw; background: var(--white); color: var(--dark); min-height: 2.36vw; min-width: 18.2vw; }
  .page--about .tl-body, .page--about .tl-body .tl-sub { gap: .9vw; }
  .page--about .tl-body { margin-top: -1.1vw; }
  .page--about .tl-item--right .tl-body .tl-sub { padding-left: 0; }
  .page--about .tl-tag--white { white-space: nowrap; }
  .page--about .tl-item--left .tl-sub { align-items: flex-end; padding-right: 0; }
  .page--about .tl-item--right .tl-body { margin-left: 1.1vw; }
  .page--about .tl-item--left .tl-body { margin-right: 2.2vw; }
  .page--about .news-slider .container { padding-left: 12.1vw; }
  .page--about .news-card { flex-basis: 20.3vw; height: 20.3vw; }
  .page--about .news-card h3 { font-size: 2.2vw; top: 3vw; left: 3vw; }

  .post { padding-top: 2.8vw; }
  .post h1 { font-size: 1.77vw; line-height: 2.3vw; margin-bottom: 1.6vw; }
  .post__lead { margin-bottom: 2.3vw; }
  .news-head { padding-top: 11vw; }
  .news-head .container.news-head__inner { padding-left: 8.9vw; }
  .news-head img { display: none; }
  .news-head h1 { max-width: 52.2vw; }
  /* News-Übersicht: zwei Spalten */
  .news-grid { grid-template-columns: 1fr 1fr; gap: 10.6vw 1.6vw; padding: 0 5vw 9vw; }
  .news-head .container, .news-grid.container { padding-left: 5vw; padding-right: 5vw; }
  .news-head h1 { font-size: 3.91vw; line-height: 5.1vw; }
  .news-head p { font-size: 3.91vw; line-height: 5.1vw; }
  .news-head img { width: 5.4vw; height: 5.4vw; }
  .news-item__img img { aspect-ratio: 442 / 297; }
  .news-item h2 { font-size: 1.7vw; line-height: 2vw; margin: 3.7vw .7vw 1.1vw; }
  .news-item p { font-size: 1.6vw; line-height: 2.55vw; margin: 0 .7vw 3.1vw; }
  .news-item__more { font-size: 1.5vw; margin-left: 2.4vw; }
  .news-grid .news-item:last-child:nth-child(odd) { grid-column: 1 / -1; width: 44.2vw; justify-self: center; }

  /* Kontakt: eigener Kopf wie im Original (116 px, Logo 129 px) */
  .page--kontakt { --header-h: 11.6vw; }
  .page--kontakt .site-header__inner { padding-left: 6.1vw; }
  .page--kontakt .site-header__logo { padding-top: 2.6vw; }
  .page--kontakt .site-header__logo img { width: 12.9vw; }
  .contact { padding: 6vw 0 6vw; }
  .contact .container { padding: 0 3vw; }
  .contact .kicker { font-size: 1.4vw; line-height: 2vw; }
  .contact h1 { font-size: 5.34vw; line-height: 6.9vw; margin-bottom: 12.7vw; }
  .contact__left { padding-left: 3.2vw; }
  .contact__company { font-size: 2.03vw; line-height: 2.8vw; margin-bottom: 2.2vw; }
  .contact__info dt, .contact__info dd { font-size: 1.59vw; line-height: 2.2vw; }
  .contact__info dd { margin-bottom: 2.3vw; }
}


/* ================= Handy bis 750 px: Maße aus dem Original bei 375 px ================= */
@media (max-width: 750px) {
  .site-header__inner { padding-left: 37px; }
  .site-header__logo { position: relative; top: 7px; }
  .page--kontakt .site-header__logo { top: 4px; }

  /* Startseite */
  .intro h1 { line-height: 36px; margin-bottom: 7px; }
  .services h3.small { font-size: 14.4px; line-height: 18px; padding-left: 13px; }
  .services__grid > div:first-child { padding-bottom: 18px; }
  .about__text h2 { display: none; }
  .news-slider__head { justify-content: flex-start; gap: 40px; }
  .news-slider__head h2 { max-width: 215px; }
  .news-slider__track { padding-left: 5px; }
  .news-card { flex-basis: 210px; height: 280px; }
  .news-card h3 { font-size: 24px; top: 30px; left: 30px; }

  /* Leistungsseiten */
  .page-hero__title { font-size: 25px; line-height: 38px; }
  .page-hero .kicker, .page-hero .kicker--sm { font-size: 14px; line-height: 20px; }
  .page--tief .page-hero { min-height: 175px; }
  .page--tief .page-hero__content { display: flex; flex-direction: column; }
  .page--tief .page-hero .kicker--sm { order: -1; line-height: 14px; margin-bottom: 10px; }
  .feature { padding: 70px 0 0; }
  .page--tief .feature { padding-top: 75px; }
  .page--spuel .o-recycling { padding: 90px 0 51px; }
  .page--tief .feature { padding-bottom: 110px; }
  .feature__grid { padding: 0 30px; gap: 32px; }
  .feature__grid > div:first-child { margin: 0; padding: 0; }
  .feature__title { font-size: 22px; line-height: 33px; }
  .feature__sub, .page--tief .feature__sub { font-size: 20px; line-height: 28px; margin-bottom: 20px; }
  .feature__list { padding-left: 0; }
  .feature__list li, .feature__list--wide li { font-size: 20px; line-height: 25px; margin-bottom: 25px; }
  .feature__img, .feature__img--small { order: 2; width: 100%; margin: 0; }
  .feature__img img { aspect-ratio: 315 / 210; }
  .wide-img--top img { width: 382px; max-width: none; margin-left: -2px; aspect-ratio: 382 / 164; }
  .wide-img--top { overflow: hidden; width: 100%; }
  .page--tief .wide-img--top { display: none; }
  .can { padding: 23px 0 59px; }
  .page--tief .can { padding-top: 0; }
  .can__grid { padding: 0 12px; gap: 0; }
  .page--tief .can__grid { padding: 0 30px; }
  .can .kicker { font-size: 14px; line-height: 20px; }
  .page--tief .can .kicker { font-size: 18px; line-height: 25px; }
  .can__title { font-size: 25px; line-height: 38px; margin: 2px 0 19px; }
  .page--tief .can__title { font-size: 26px; line-height: 39px; margin: 5px 0 39px; }
  .can__item { font-size: 20px; line-height: 30px; margin-bottom: 40px; padding: 0; align-items: center; }
  .can__item p { max-width: 262px; }
  .can__item img { margin-right: 20px; }
  .can__item img[src*="icon-durchmesser"] { width: 44px; height: 44px; }
  .can__item img[src*="icon-bohrlaenge"] { width: 48px; height: 48px; }
  .can__item img[src*="icon-gewaehrleistung"], .can__item img[src*="icon-oberflaechen"] { width: 40px; height: 40px; margin: 0; }
  .page--spuel .can__item { order: 2; }
  .page--spuel .can__grid > .can__item:nth-child(2) { order: 3; }
  .service-list { padding: 112px 0 40px; }
  .service-list__grid { padding: 0 30px; }
  .service-list .kicker { font-size: 18px; line-height: 25px; }
  .service-list__title { font-size: 26px; line-height: 39px; }
  .page--tief .can__item:last-child { margin-bottom: 0; }
  .page--tief .service-list { padding-top: 76px; }
  .icon-grid { gap: 18px; padding-left: 0; }
  .icon-grid li { font-size: 22px; line-height: 33px; gap: 22px; }
  .icon-grid img { width: 40px; height: 40px; }

  /* Über uns: Reihenfolge wie im Original (Text direkt nach dem Startbild) */
  .page--about main { display: flex; flex-direction: column; }
  .page--about .o-hero { order: 0; } .page--about .o-text { order: 1; } .page--about .o-wide { order: 2; }
  .page--about .o-values { order: 3; } .page--about .o-history { order: 4; } .page--about .o-news { order: 5; }
  .page--about .page-hero__content { width: 100%; display: flex; justify-content: center; padding: 0; }
  .page-hero__logo { width: 137px; }
  .page--about .text-block.o-text { padding: 40px 0 60px; }
  .page--about .o-text .text-block__inner { padding: 0 30px; }
  .page--about .text-block h2 { font-size: 24px; line-height: 36px; margin-bottom: 12px; }
  .page--about .o-text p { font-size: 16px; line-height: 28.8px; margin: 0; }
  .page--about .text-block--values { padding: 31px 0 15px; }
  .page--about .o-values .text-block__inner { padding: 0 22px; }
  .page--about .text-block--values p { font-size: 18px; line-height: 27px; }
  .page--about .news-slider { padding-top: 30px; }
  .page--about .news-slider .container { padding-left: 30px; }
  .page--about .news-card { flex-basis: 215px; height: 215px; }
  .page--about .news-card h3 { font-size: 22px; top: 30px; left: 30px; }

  /* News */
  .news-head { padding: 24px 0 25px; }
  .news-head__inner { padding: 0 30px; gap: 14px; }
  .news-head img { width: 54px; height: 54px; margin-top: 0; }
  .news-head h1 { font-size: 18.3px; line-height: 24px; }
  .news-head p { font-size: 18px; line-height: 27px; margin-top: 3px; }
  .news-grid { padding: 0 30px 60px; gap: 80px; }
  .news-item h2 { margin: 27px 5px 11px; }
  .news-item__more { margin-left: 21px; font-size: 15px; }

  /* Kontakt */
  .contact { padding: 40px 0 50px; }
  .contact .container { padding: 0 20px; }
  .contact h1 { font-size: 25px; line-height: 38px; margin-bottom: 77px; }
  .contact__left { padding-left: 6px; }
  .contact__company { font-size: 24px; line-height: 34px; margin-bottom: 12px; }
  .contact__info dt, .contact__info dd { font-size: 23px; line-height: 32px; }
  .contact__info dd { margin-bottom: 32px; }
}


/* ---------- Desktop über 1440 px: diese Elemente bleiben im Original fest ---------- */
@media (min-width: 1001px) {
  :root { --header-h: 101px; }
  .page--kontakt { --header-h: calc(132 * var(--u)); }
  .main-nav a { padding: 10px clamp(14px, 1.95vw, 28px); font-size: 16px; }
  .intro p { font-size: 19px; line-height: 34px; }
  .stat__pre, .stat__label { font-size: 16px; line-height: 29px; }
  .about__text p { font-size: clamp(14px, 1.3vw, 19px); line-height: 1.55; }
  .page--home .news-slider__track, .page--about .news-slider__track { gap: 32px; }
  .page--home .news-card { flex-basis: 285px; height: 380px; }
  .page--about .news-card { flex-basis: 380px; height: 380px; }
  .news-card h3 { font-size: 24px; top: 30px; left: 30px; }
  .page--about .news-card h3 { font-size: 22px; }
  .text-block--values p, .page--about .text-block--values p { font-size: 18px; line-height: 27px; }
  .news-item h2 { font-size: 21px; }
  .news-item p { font-size: 16px; }
  .news-item__more { font-size: 15px; }
  .page-hero__title { font-size: 60px; line-height: 78px; }
  .page-hero .kicker { font-size: calc(16px + 5 * var(--u)); }
  .page-hero .kicker--sm { font-size: calc(.6px + 16.8 * var(--u)); }
  .contact .kicker { font-size: 20px; }
  .contact h1 { font-size: 60px; line-height: 78px; }
  .contact__info dt, .contact__info dd { font-size: calc(12.2px + 10.8 * var(--u)); line-height: 1.4; }
  .contact__company { font-size: calc(26.8px + 2.4 * var(--u)); }
  .post__lead { font-size: 16px; }
  .page--about .tl-item { min-height: calc(var(--tl-h, 0) * var(--u)); }
  /* Zeitleiste wie Original: reines Orange, feste Breiten, Text mittig, weiße Unterpunkte, ohne Schatten */
  .page--about .tl-tag { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--orange); color: var(--white); box-shadow: none; border-radius: calc(5.6 * var(--u)); min-height: calc(42 * var(--u)); padding: 0 calc(16 * var(--u)); min-width: 0; }
  .page--about .tl-item--right .tl-body > .tl-tag { width: calc(385 * var(--u)); }
  .page--about .tl-item--left .tl-body > .tl-tag { width: calc(335 * var(--u)); }
  .page--about .tl-tag--light, .page--about .tl-tag--white { background: var(--white); color: var(--dark); min-height: calc(30 * var(--u)); min-width: calc(262 * var(--u)); padding: 0 calc(24 * var(--u)); }
  /* Abstände wie im Original: Unterpunkte 40 px Raster, links bündig an der rechten Kante des Hauptkastens */
  .page--about .tl-body { gap: calc(9 * var(--u)); margin-top: calc(-11 * var(--u)); }
  .page--about .tl-body .tl-sub { gap: calc(9.5 * var(--u)); }
  .page--about .tl-item--right .tl-body .tl-sub { margin-top: calc(4 * var(--u)); }
  .page--about .tl-item--left .tl-body { margin-right: calc(11 * var(--u)); }
  .page--about .tl-item--left .tl-sub { align-items: flex-end; padding-right: 0; }
  .page--about .tl-item--right .tl-body .tl-sub { padding-left: 0; }
  .page--about .tl-tag--white { white-space: nowrap; }
  /* Elemente, die bei Wix schwächer mitwachsen (gemessen bei 1440 und 1920 px) */
  .intro .kicker { font-size: calc(20px + 15 * (var(--u) - 1px)); line-height: 1.4; }
  .intro h1, .services h2 { font-size: calc(31.5px + 25.5 * (var(--u) - 1px)); }
  .intro__inner { padding-left: calc(177 * var(--u)); }
  .stat__num { font-size: calc(56px + 27 * (var(--u) - 1px)); line-height: 1.26; }
  /* Buttons haben bei Wix auf jeder Desktop-Breite feste Maße */
  .btn { min-width: 158px; min-height: 45px; padding: 11px 28px; font-size: 15px; }
  .btn--pill { min-width: 170px; min-height: 64px; font-size: 17px; }
  .contact-form .btn { min-height: 41px; height: 41px; font-size: 16px; }
  /* Fuß: bei Wix wachsen nur Breite und Logo mit, Schrift und Abstände bleiben fest */
  .site-footer { padding: 25px var(--gutter) 30px; }
  .footer-box { padding: 56px 0 40px 5.6%; border-radius: 20px; }
  .footer-brand { margin-top: 64px; }
  .footer-title { font-size: 23px; margin-bottom: 14px; }
  .footer-nav li { margin: 0 0 19px 4px; }
  .footer-nav a, .footer-legal a, .footer-legal button { font-size: 16px; }
  .footer-divider { margin-top: 46px; }
  .footer-legal { padding-left: 15px; }
  .footer-legal ul { margin-top: 18px; }
  .footer-legal li { margin-bottom: 19px; }
  .footer-contact li { gap: 10px; margin-bottom: 8px; }
  .footer-contact img { width: 21px; height: 21px; }
  .footer-contact a { font-size: 17px; }
  .footer-bottom { font-size: 15px; margin-top: 30px; }
  .services h3 { font-size: calc(20.2px + 14.4 * (var(--u) - 1px)); }
  .stats { padding-top: calc(103px + -51 * (var(--u) - 1px)); padding-bottom: calc(108px + 3 * (var(--u) - 1px)); }
  .page--spuel .can__item { font-size: calc(24px + 3.9 * (var(--u) - 1px)); line-height: 1.3; }
  .page--spuel .service-list .kicker { font-size: calc(20px + 9.6 * (var(--u) - 1px)); }
  .feature__list--wide li { font-size: calc(20px + 11.1 * (var(--u) - 1px)); line-height: calc(25px + 15 * (var(--u) - 1px)); margin-bottom: calc(25px + 15 * (var(--u) - 1px)); }
  .page--about .tl-year { font-size: calc(20px + 12.6 * (var(--u) - 1px)); }
  .page--about .history__head .kicker { font-size: calc(20px + 6.9 * (var(--u) - 1px)); }
  .news-head { padding-top: calc(64px + -72 * (var(--u) - 1px)); padding-bottom: calc(63px + -69 * (var(--u) - 1px)); }
  .page--kontakt { --header-h: 132px; }
  .contact { padding-top: 102px; }
  .contact h1 { margin-bottom: 145px; }
  .contact__left { padding-top: calc(81 * var(--u)); }
  .contact .container { padding-right: calc(57px + 105 * (var(--u) - 1px)); }
  .contact__grid { grid-template-columns: minmax(0, 1fr) calc(715px + 300 * (var(--u) - 1px)); }
  .contact__company { margin-bottom: calc(57px + -168 * (var(--u) - 1px)); }
}

/* Zeitleiste Handy: gleiche Optik wie Desktop (Orange, weiße Unterpunkte, ohne Schatten) */
@media (max-width: 750px) {
  .page--about .tl-tag { background: var(--orange); color: var(--white); box-shadow: none; border-radius: 5px; }
  .page--about .tl-tag--light, .page--about .tl-tag--white { background: var(--white); color: var(--dark); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { opacity: 1 !important; animation: none !important; }
  * { animation: none !important; }
}