/* ==========================================================================
   Allianz Malerei GmbH & Co. KG — Innsbruck
   Stylesheet
   --------------------------------------------------------------------------
   Aufbau:
   01 Tokens        02 Basis        03 Typografie     04 Buttons
   05 Navigation    06 Hero         07 Trustbar       08 Leistungen
   09 Projekte      10 Vorher/Nachher   11 Ueber uns  12 Farbwelt
   13 Bewertungen   14 Partner      15 Kontakt        16 Responsive
   ========================================================================== */

/* == 01 Tokens ============================================================ */
:root {
  /* Marke (aus dem Original-Logo abgenommen) */
  --green:        #7cc043;
  --green-bright: #8cd062;
  --green-soft:   #a9cf8c;
  --green-pale:   #e4f0d9;
  --green-ink:    #3f6a1c;   /* Gruen fuer Text auf hellem Grund */

  /* Dunkelgruen: traegt Hero, Projekte, Kontakt */
  --forest:  #14271d;
  --forest2: #1d3628;
  --forest3: #2a4735;

  /* Papier / Putz */
  --paper:  #f4f1ea;
  --paper2: #ebe6db;
  --sage:   #dee5da;
  --white:  #fff;

  --ink:   #131814;
  --ink2:  #2c322e;
  --muted: #5f665f;
  --line:  rgba(18, 24, 20, .12);
  --line2: rgba(255, 255, 255, .14);

  --shadow:    0 22px 60px rgba(20, 25, 22, .10);
  --shadow-lg: 0 34px 90px rgba(16, 24, 18, .18);

  /* Desktop-Hero: diese vier Werte steuern Video und Putzkante manuell. */
  --hero-video-width: 48vw;
  --hero-video-focus-x: 50%;
  --hero-video-zoom: 1;

  --max: 1460px;
  --gut: 56px;

  --font:  Archivo, "Arial Narrow", sans-serif;
  --body:  Archivo, "Helvetica Neue", Arial, sans-serif;
  /* Kleintext und Labels: dieselbe Grundschrift, nur gesperrt und
     halbfett. Eine Monospace wirkt hier technisch statt handwerklich. */
  --mono:  Archivo, "Helvetica Neue", Arial, sans-serif;
  /* Breite der Archivo je Rolle: Ueberschriften schmal und kompakt,
     gesperrte Labels breit wie Baustellenbeschriftung. */
  --stretch-head:  84%;
  --stretch-label: 112%;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* == 02 Basis ============================================================= */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

section[id] { scroll-margin-top: 100px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.wrap { width: min(var(--max), calc(100% - var(--gut))); margin-inline: auto; }
.section { padding: 110px 0; }

.island-wrap { padding: 0 0 110px; }
.island {
  width: min(1540px, calc(100% - 26px));
  margin: 0 auto;
  border-radius: 44px;
  overflow: hidden;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 14px 20px; background: var(--forest); color: #fff;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Echte Putzoberflaechen aus den fuer das Projekt erzeugten Motiven. */
.plaster {
  position: relative;
  /* Die Putzoberflaeche steckt jetzt in den Hintergrundebenen des Abschnitts
     selbst. Vorher lag sie als ::before mit mix-blend-mode darueber: das
     zwang Chrome pro Abschnitt zu einer eigenen Render-Surface und liess beim
     Scrollen jede neu sichtbare Kachel gegen den Hintergrund neu mischen.
     background-blend-mode mischt innerhalb einer Ebene, ohne Surface und ohne
     Ruecklesen des Hintergrunds.
     --plaster-base ist die Abschnittsfarbe als RGB-Tripel, --plaster-veil das
     Gegenstueck zur frueheren Deckkraft (veil = 1 - opacity). */
  --plaster-base: 244, 241, 234; /* = --paper */
  --plaster-veil: .42;           /* entspricht opacity: .58 */
  background-color: rgb(var(--plaster-base));
  background-image:
    linear-gradient(rgba(var(--plaster-base), var(--plaster-veil)),
                    rgba(var(--plaster-base), var(--plaster-veil))),
    var(--surface-image, url("../img/surface-01.webp"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, multiply;
}
.plaster > * { position: relative; z-index: 1; }

/* Die Oberflaechen wechseln abschnittsweise, bleiben aber bewusst ruhig. */
.trust, .about, .live-area, .area { --surface-image: url("../img/surface-01.webp"); }
.services { --surface-image: url("../img/services-plaster-a.webp"); }
.process, .reviews { --surface-image: url("../img/surface-02.webp"); }
.audience, .ba, .partners-area { --surface-image: url("../img/surface-03.webp"); }

/* Farb-Rhythmus der Seite: hell -> salbei -> dunkel -> hell -> mineralisch. */
.audience { background-color: #e1e8dc; --plaster-base: 225, 232, 220; --plaster-veil: .56; }
.process  { background-color: #e8dfd3; --plaster-base: 232, 223, 211; --plaster-veil: .56; }
.services {
  background-color: #f2efe8;
  --plaster-base: 242, 239, 232;
  --plaster-veil: .46;
  background-position: center top;
}
.live-area { --plaster-veil: .66; }

/* == 03 Typografie ======================================================== */
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #66736a;
}

.display, .h2, .h3, .brand-word, .big-num, .metric strong {
  font-family: var(--font);
  font-stretch: var(--stretch-head);
  font-weight: 900;
}

.display {
  margin: 0;
  font-size: clamp(54px, 7.6vw, 108px);
  line-height: .85;
  letter-spacing: -.026em;
  text-transform: uppercase;
}
.h2 {
  margin: 0;
  font-size: clamp(36px, 4.3vw, 64px);
  line-height: .92;
  letter-spacing: -.026em;
  text-transform: uppercase;
}
/* Enger Buchstabenabstand frisst sonst die Wortabstaende ("EINMALERBETRIEB"). */
.display, .h2, .h3, .drawer-links a, .preview-title, .project-carousel-head h3 { word-spacing: .14em; }
/* Fuer lange Ueberschriften, die sonst vier Zeilen brauchen */
.h2.is-long { font-size: clamp(30px, 3.4vw, 50px); line-height: .96; letter-spacing: -.02em; }

.h3 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: .93;
  letter-spacing: -.023em;
  text-transform: uppercase;
}
.lead {
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.58;
  color: var(--muted);
}

.section-head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 58px;
}
.section-head .lead { justify-self: end; max-width: 540px; margin: 0; }

/* Archivo-Breite je Rolle (siehe Tokens). */
.drawer-links a, .hero-proof strong, .preview-title, .project-carousel-head h3,
.reference-card-body strong, .step-no, .live-panel h3,
.aud-body h3, .service-card h4, .service-group-head h3, .contact-card .big { font-stretch: var(--stretch-head); }
.eyebrow, .btn, .hero-proof small, .service-group-head span, .service-card .label,
.service-card .goto, .project-jump, .ba-tag, .about-media figcaption, .quote small,
.partner-mark small, .quickbar a, .reference-card-body small, .skip-link { font-stretch: var(--stretch-label); }

/* == 04 Buttons =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  background: var(--forest);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn.light { background: #fff; color: var(--forest); }
.btn.light:hover { background: var(--green); color: var(--forest); }
.btn.line { background: transparent; border-color: currentColor; }
.btn.line:hover { background: rgba(255, 255, 255, .12); }
.btn.green { background: var(--green); color: var(--forest); }
.btn.green:hover { background: var(--forest); color: #fff; }

/* == 05 Navigation ======================================================== */
.nav {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 60;
  padding: 14px 0;
  /* Ohne backdrop-filter: die Unschärfe hinter der fixen Leiste kostete beim Scrollen spürbar Leistung. */
  background: rgba(15, 30, 22, .95);
  transition: background .3s var(--ease), padding .3s var(--ease),
              box-shadow .3s var(--ease);
}
.nav.is-stuck {
  padding: 10px 0;
  background: rgba(15, 30, 22, .98);
  box-shadow: 0 10px 40px rgba(10, 18, 13, .28);
}

.navin {
  width: min(1520px, calc(100% - var(--gut)));
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 18px; color: #fff; }
.brand img { height: 76px; width: auto; transition: height .3s var(--ease); }
.nav.is-stuck .brand img { height: 56px; }

.navlinks {
  display: flex;
  gap: 28px;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
}
.navlinks a { position: relative; padding: 4px 0; }
.navlinks a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--green);
  transition: width .24s var(--ease);
}
.navlinks a:hover::after, .navlinks a.is-current::after { width: 100%; }

.navright { display: flex; align-items: center; gap: 14px; }

.menu-btn {
  width: 48px; height: 48px;
  display: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.menu-btn:hover { background: rgba(255, 255, 255, .18); }
.menu-btn span {
  grid-area: 1 / 1;
  display: block;
  width: 17px; height: 1.5px;
  background: #fff;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.menu-btn span:nth-child(1) { transform: translateY(-5px); }
.menu-btn span:nth-child(3) { transform: translateY(5px); }
body.menu-open .menu-btn span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { transform: rotate(-45deg); }

/* Mobile-Panel */
.drawer {
  position: fixed; inset: 0;
  z-index: 55;
  background: var(--forest);
  padding: 132px var(--gut) 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .44s var(--ease), visibility .44s;
}
body.menu-open .drawer { transform: translateY(0); visibility: visible; }
body.menu-open { overflow: hidden; }

.drawer-links { display: grid; gap: 4px; }
.drawer-links a {
  font-family: var(--font);
  font-size: clamp(30px, 8vw, 54px);
  line-height: 1.12;
  letter-spacing: -.023em;
  text-transform: uppercase;
  color: #fff;
}
.drawer-links a:hover { color: var(--green-soft); }
.drawer-foot {
  display: grid;
  gap: 8px;
  padding-top: 26px;
  border-top: 1px solid var(--line2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* == 06 Hero ============================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.hero-panels {
  position: absolute; inset: 0;
  display: block;
}
.hero-left {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-right { position: absolute; inset: 0; overflow: hidden; background: #16281e; }

@media (min-width: 1181px) {
  /* Text bleibt links der Putzkante (52vw) */
  .hero .hero-copy { align-self: center; max-width: min(720px, calc(52vw - 40px)); padding-top: 40px; }

  /* Putz links, Video rechts: das originale Putzbild mit seinen langen
     Pinselspitzen, unverzerrt und so hoch wie der Hero. Die deckende Kante
     (Bildspalte 1679 von 2040) sitzt immer genau am Videorand, die Spitzen
     reichen gut 300 px ins Video. Links ist das Bild um 600 px gespiegelt
     verlaengert, damit es auch in sehr breiten, flachen Fenstern bis an den
     Rand reicht. Unten laeuft der Putz leicht in den Ton der Leistungen aus;
     die Maske haelt diesen Verlauf auf den deckenden Stellen. */
  .hero-left::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - var(--hero-video-width));
    aspect-ratio: 2040 / 941;
    background:
      linear-gradient(180deg, rgba(228, 224, 214, 0), rgba(228, 224, 214, .7)) center bottom / 100% 120px no-repeat,
      url("../img/hero-plaster-edge-green-wide.webp") center / 100% 100% no-repeat;
    -webkit-mask: url("../img/hero-plaster-edge-green-wide.webp") center / 100% 100% no-repeat;
    mask: url("../img/hero-plaster-edge-green-wide.webp") center / 100% 100% no-repeat;
    transform: translateX(-82.3%);
  }

  .hero-right {
    inset: 0 0 0 auto;
    width: var(--hero-video-width);
  }

  .hero-slide img,
  .hero-slide video {
    object-position: var(--hero-video-focus-x) center;
    transform: scale(var(--hero-video-zoom));
    transform-origin: center;
  }
}

/* Slides */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero-slide.is-on { opacity: 1; }
.hero-slide img,
.hero-slide video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% center;
}
.hero-slide video { opacity: 0; transition: opacity .6s var(--ease); }
.hero-slide video.is-ready { opacity: 1; }

@media (min-width: 1181px) {
  .hero-right .hero-slide img,
  .hero-right .hero-slide video {
    object-position: var(--hero-video-focus-x) center;
  }
}

.hero-right::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 20, 15, .10), transparent 30%, transparent 55%,
    rgba(10, 20, 15, .55));
}

.hero-grid {
  position: relative;
  z-index: 5;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: end;
  padding: 158px 0 54px;
}

.hero-copy { max-width: 680px; }
.hero .display {
  max-width: 720px;
  font-size: clamp(58px, 6.4vw, 94px);
  line-height: .93;
}
.hero .eyebrow { color: #647067; }
.hero .display .hl {
  display: inline-block;
  color: var(--green-ink);
}
.hero .lead {
  max-width: 530px;
  margin: 22px 0 30px;
  color: var(--muted);
}
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; }
.hero-actions .btn.light { background: var(--forest); color: #fff; }
.hero-actions .btn.light:hover { background: var(--green); color: var(--forest); }
.hero-actions .btn.line { color: var(--forest); border-color: rgba(20, 39, 29, .42); }
.hero-actions .btn.line:hover { background: rgba(20, 39, 29, .08); }

/* Kennzahlen und Guetesiegel unter den Buttons */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px clamp(22px, 2.6vw, 44px);
  margin: 46px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(18, 24, 20, .16);
  list-style: none;
}
.hero-proof strong {
  display: block;
  font-family: var(--font);
  font-size: 44px;
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.023em;
}
.hero-proof strong span { color: var(--green-ink); }
.hero-proof small {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #4c554e;
}
.hero-proof-seal { display: flex; align-items: center; gap: 14px; }
.hero-proof-seal img { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.hero-proof-seal strong {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.005em;
}
.hero-proof-seal small { margin-top: 0; }

/* Rechte Spalte: Projekt-Card auf dem Video */
.hero-side {
  justify-self: end;
  align-self: stretch;
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 8px;
  color: #fff;
}

.hero-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: auto;
  padding: 14px;
  background: rgba(14, 30, 21, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .25s var(--ease);
}
.hero-card:hover { background: rgba(14, 30, 21, .92); }
.hero-card img { width: 96px; height: 76px; object-fit: cover; }
.hero-card .eyebrow { margin: 0 0 8px; color: rgba(255, 255, 255, .6); }
.hero-card b { display: block; font-size: 16px; line-height: 1.2; }
.hero-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.hero-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.hero-dots { display: flex; gap: 9px; }
.hero-dots button {
  width: 9px; height: 9px;
  box-shadow: 0 1px 8px rgba(8, 16, 11, .5);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.hero-dots button.is-on { background: #fff; transform: scale(1.18); }

.hero-arrows { display: flex; gap: 9px; }
.hero-arrows button {
  width: 44px; height: 44px;
  box-shadow: 0 2px 16px rgba(8, 16, 11, .35);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.hero-arrows button:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.hero-arrows svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* == 08 Leistungen ======================================================== */
.services { padding-bottom: 56px; }
.showcase {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 48px;
  align-items: start;
}

.preview {
  position: sticky;
  top: 96px;
  overflow: hidden;
  background: #e6e1d8;
  box-shadow: var(--shadow);
  min-height: 660px;
}
.preview-media { position: absolute; inset: 0; background: #1b2c22; }
.preview-poster, .preview-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.preview-poster { opacity: 1; transition: opacity .7s var(--ease); }
.preview-poster.is-under { opacity: 0; }
.preview-video { opacity: 0; transition: opacity .4s var(--ease); }
.preview-video.is-ready { opacity: 1; }
.preview-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 12, .10) 22%, rgba(10, 16, 12, .58) 62%,
              rgba(10, 16, 12, .90));
}

/* Absolut statt relativ: die Kachel hat nur eine Mindesthoehe, deshalb
   loest height:100% nicht auf und der Text bliebe oben kleben. */
.preview-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  color: #fff;
}
.preview-top .eyebrow { color: rgba(255, 255, 255, .74); }
.preview-title {
  margin: 10px 0;
  font-family: var(--font);
  font-size: clamp(27px, 2.9vw, 44px);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: none;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.preview-desc {
  max-width: 430px;
  color: rgba(255, 255, 255, .88);
  font-size: 14.5px;
  line-height: 1.6;
}

.preview-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.preview-state { display: flex; align-items: center; gap: 11px; }
.play-dot {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  flex: 0 0 auto;
}
.play-dot svg { width: 11px; height: 11px; fill: #fff; }
.preview-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .15);
}

.service-groups { display: grid; gap: 34px; }
.service-group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 10px;
}
.service-group-head h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.009em; }
.service-group-head span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a908b;
}
.service-list { border-top: 1px solid var(--line); }

.service-card {
  position: relative;
  width: 100%;
  padding: 18px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: start;
  transition: padding .18s var(--ease), background .18s var(--ease);
}
.service-card:hover, .service-card:focus-within {
  padding-left: 8px;
  background: rgba(255, 255, 255, .42);
}
.service-card.is-active { color: var(--forest); }
.service-card.is-active::before {
  content: "";
  position: absolute;
  left: -14px; top: 18px; bottom: 18px;
  width: 3px;
  background: var(--green);
}
.service-card .label {
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7c847d;
}
.service-card h4 {
  margin: 0 0 7px;
  font-size: 21px;
  line-height: 1.06;
  letter-spacing: -.014em;
}
.service-card p {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.service-card .goto {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #677268;
  white-space: nowrap;
}
.service-card.is-active .goto { color: var(--green-ink); }

.more {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: baseline;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.more b { font-size: 15px; }
.more p { margin: 0; max-width: 780px; color: var(--muted); font-size: 14px; line-height: 1.7; }


/* Karteninhalte gibt es nur in der schmalen Ansicht */
.sc-media, .sc-dots, .sc-play, .service-group-intro { display: none; }

/* Schmale Ansicht: jede Leistung ist eine eigene Bildkarte.
   Die grosse Vorschau entfaellt — sonst muesste man nach jedem
   Tippen wieder nach oben scrollen. */
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 0; }
  .preview { display: none; }

  .service-groups { gap: 44px; }
  .service-group-head { display: block; margin-bottom: 6px; }
  .service-group-head h3 {
    font-size: clamp(27px, 7.4vw, 36px);
    font-weight: 700;
    letter-spacing: -.016em;
  }
  .service-group-head span { display: none; }
  .service-group-intro {
    display: block;
    margin: 0 0 18px;
    max-width: 30em;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--muted);
  }

  .service-list { border-top: 0; display: grid; gap: 14px; }

  .service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
    padding: 0 20px 44px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--forest3);
    min-height: clamp(260px, 72vw, 320px);
    text-align: left;
    color: #fff;
  }
  .service-card:hover, .service-card:focus-within { padding-left: 20px; background: var(--forest3); }
  .service-card.is-active::before { display: none; }

  .sc-media { display: block; position: absolute; inset: 0; z-index: -1; }
  .sc-img, .sc-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .sc-img { opacity: 1; transition: opacity .8s var(--ease); }
  .sc-img.is-under { opacity: 0; }
  .sc-video { opacity: 0; transition: opacity .4s var(--ease); }
  .service-card.is-playing .sc-video { opacity: 1; }
  .sc-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,18,13,.10) 30%, rgba(10,18,13,.78) 78%, rgba(10,18,13,.90));
  }

  /* Abspielen nur bei Videokarten */
  .sc-play {
    position: absolute;
    left: 50%; top: 38%;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 11px;
    z-index: 2;
  }
  .service-card.is-playing .sc-play { display: none; }
  .sc-play-dot {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border: 1.5px solid rgba(255,255,255,.72);
    border-radius: 50%;
    background: rgba(18,32,24,.56);
  }
  .sc-play-dot svg { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
  .sc-play b {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
  }

  /* Textkasten unten auf dem Bild */
  .service-card .label {
    margin-bottom: 8px;
    padding: 0;
    color: rgba(255,255,255,.78);
  }
  .service-card h4 {
    margin: 0 0 6px;
    font-size: clamp(23px, 6.2vw, 30px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.013em;
    color: #fff;
  }
  .service-card p {
    margin: 0;
    max-width: none;
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255,255,255,.86);
  }
  .service-card .goto { display: none; }

  .sc-dots {
    display: flex;
    gap: 7px;
    position: absolute;
    left: 20px; bottom: 19px;
    z-index: 2;
  }
  .sc-dots i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.42);
    transition: background .25s var(--ease);
  }
  .sc-dots i.is-on { background: #fff; }

  .more { grid-template-columns: 1fr; gap: 8px; margin-top: 34px; }
}

/* == 09 Kundengruppen ===================================================== */
.audience {
  padding: 64px 0 78px;
  border-top: 1px solid rgba(20, 39, 29, .08);
}
.audience .section-head { margin-bottom: 42px; }
.audience .h2.is-long {
  max-width: 760px;
  font-size: clamp(39px, 3.25vw, 52px);
  letter-spacing: -.019em;
  word-spacing: .14em;
}
.audience-grid {
  display: grid;
  grid-template-columns: 1.16fr .92fr .92fr;
  grid-template-rows: repeat(2, minmax(245px, 21vw));
  gap: 12px;
}
.aud {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--forest3);
  box-shadow: 0 16px 34px -28px rgba(13, 32, 21, .82);
}
.aud:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.aud:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }
.aud:nth-child(3) { grid-column: 2; grid-row: 2; }
.aud:nth-child(4) { grid-column: 3; grid-row: 2; }
.aud-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--forest3);
}
.aud-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}
.aud-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 18, 11, .04) 24%, rgba(7, 18, 11, .84) 100%),
    linear-gradient(90deg, rgba(7, 18, 11, .18), transparent 48%);
}
.aud:hover .aud-img img { transform: scale(1.035); }
.aud-body {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 24px 26px 26px;
  color: #fff;
}
.aud-body::before {
  display: block;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--green-soft);
}
.aud-body h3 {
  margin: 0 0 9px;
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.08;
  letter-spacing: -.013em;
}
.aud-body p {
  margin: 0;
  max-width: 440px;
  color: rgba(255, 255, 255, .76);
  font-size: 13.5px;
  line-height: 1.52;
}

/* == 10 Projekte ========================================================== */
.projects-area {
  --surface-image: url("../img/section-03-plaster.webp");
  padding: 0 0 38px;
  overflow: hidden;
  background-color: var(--paper);
  border-top: 1px solid rgba(20, 39, 29, .16);
  box-shadow: inset 0 18px 34px -30px rgba(20, 39, 29, .78);
}
.projects-area.plaster {
  /* Textur nur im oberen Bereich, nach unten auslaufend. Der Auslauf kam
     vorher von mask-image; eine Maske erzwingt wie der Blendmodus eine eigene
     Render-Surface. Jetzt uebernimmt ihn ein Verlauf in der Abschnittsfarbe
     innerhalb derselben Hintergrundebenen. */
  --plaster-h: clamp(760px, 56.3vw, 1080px);
  background-image:
    linear-gradient(to bottom, rgba(var(--plaster-base), 0) 58%,
                               rgb(var(--plaster-base)) 100%),
    var(--surface-image);
  background-position: center top;
  background-size: 100% var(--plaster-h), auto var(--plaster-h);
  background-repeat: no-repeat;
  background-blend-mode: normal, multiply;
}
.projects {
  width: 100%;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 92px 0 64px;
}
.projects .eyebrow { color: var(--green-ink); }
.projects-head {
  display: grid;
  grid-template-columns: 1fr .86fr;
  gap: 42px;
  align-items: end;
  margin-bottom: 36px;
}
.projects-head .h2 { color: var(--forest); }
.projects-head .lead {
  justify-self: end;
  max-width: 500px;
  margin: 0;
  padding: 16px 0 16px 22px;
  border-left: 2px solid var(--green-ink);
  color: #4f5851;
}

.project-carousel-block {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(20, 39, 29, .18);
}
.project-carousel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.project-carousel-head h3 {
  margin: 0;
  color: var(--forest);
  font-family: var(--font);
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.project-carousel-head p:not(.eyebrow) {
  max-width: 610px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.project-carousel-tools { display: grid; justify-items: end; gap: 10px; min-width: 250px; margin-left: auto; }
.project-jump { display: grid; gap: 6px; width: 100%; color: var(--green-ink); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-jump select { width: 100%; min-height: 44px; padding: 8px 32px 8px 12px; border: 1px solid rgba(20,39,29,.5); border-radius: 0; background: #f7f5ec; color: var(--forest); font: 600 13px/1.3 var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.project-carousel-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.project-carousel-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--forest);
  background: transparent;
  color: var(--forest);
  font: 700 13px/1 var(--font);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.project-carousel-controls button:first-child,
.project-carousel-controls button:nth-child(2) { font-size: 20px; }
.project-carousel-controls button:hover,
.project-carousel-controls button[aria-pressed="true"] { background: var(--forest); color: #fff; }
.project-carousel-controls button:focus-visible,
.project-jump select:focus-visible,
.reference-card:focus-visible { outline: 3px solid #b1007d; outline-offset: 3px; }
.project-carousel {
  position: relative;
  display: flex;
  gap: 16px;
  margin-top: 28px;
  padding-bottom: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--green-ink) transparent;
}
.reference-card {
  position: relative;
  flex: 0 0 clamp(250px, 29vw, 410px);
  aspect-ratio: 4 / 5;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 39, 29, .16);
  background: var(--forest);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 20px 36px -28px rgba(11, 27, 18, .75);
}
.reference-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,17,11,.25), transparent 35%, rgba(7,17,11,.86)); pointer-events: none; }
.reference-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.reference-card:hover img { transform: scale(1.045); }
.reference-card-credit { position: absolute; z-index: 1; top: 14px; right: 14px; max-width: calc(100% - 28px); padding: 6px 8px; background: rgba(9,24,15,.75); color: #fff; font-size: 11px; line-height: 1.2; text-align: right; }
.reference-card-body { position: absolute; z-index: 1; inset: auto 22px 22px; display: grid; gap: 8px; }
.reference-card-body small { color: #d5e6cb; font: 700 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.reference-card-body strong { color: #fff; font: 900 clamp(24px,2.3vw,34px)/1.02 var(--font); letter-spacing: -.016em; }
.reference-card-body em { margin-top: 5px; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.project-carousel-hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

.project-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 42px;
}
.project-foot p { margin: 0; max-width: 580px; color: #59615b; font-size: 13px; }
.projects .project-foot .btn.light {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.projects .project-foot .btn.light:hover {
  background: var(--green-ink);
  border-color: var(--green-ink);
}

/* == 11 Vorher / Nachher ================================================== */
.ba { padding: 56px 0 92px; }
.ba-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: center; }
.ba-copy .lead { max-width: 460px; margin: 18px 0 28px; }

.ba-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #d9d3c8;
  box-shadow: var(--shadow);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.ba-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-after { clip-path: inset(0 0 0 var(--split, 50%)); }

.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  pointer-events: none;
}
.ba-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 26px rgba(12, 18, 14, .3);
}
.ba-knob svg { width: 20px; height: 20px; stroke: var(--forest); fill: none; stroke-width: 1.6; }

.ba-tag {
  position: absolute;
  bottom: 16px;
  z-index: 3;
  padding: 9px 13px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(12, 22, 16, .78);
  pointer-events: none;
}
.ba-tag.left { left: 16px; }
.ba-tag.right { right: 16px; }

/* == 12 Ueber uns ========================================================= */
.about { padding: 0 0 56px; }
.about.plaster {
  /* Oben laeuft die Textur ueber 180px ein (frueher mask-image). */
  background-image:
    linear-gradient(to bottom, rgb(var(--plaster-base)) 0,
                               rgba(var(--plaster-base), 0) 180px),
    linear-gradient(rgba(var(--plaster-base), var(--plaster-veil)),
                    rgba(var(--plaster-base), var(--plaster-veil))),
    var(--surface-image);
  background-position: center top, center, center;
  background-size: 100% 180px, cover, cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, multiply;
}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about-copy {
  background: var(--sage);
  padding: 46px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-copy .lead { max-width: 500px; }
.about-points {
  display: grid;
  gap: 2px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.about-points li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid rgba(18, 24, 20, .14);
  font-size: 14.5px;
  line-height: 1.5;
}
.about-points li::before {
  content: "";
  width: 9px; height: 9px;
  margin-top: 7px;
  background: var(--green);
}
.about-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.35fr 1fr;
  gap: 14px;
  height: 620px;
}
.about-media .wide { grid-column: span 2; }
.about-media figure { position: relative; margin: 0; min-height: 0; overflow: hidden; background: var(--forest3); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media figcaption {
  position: absolute;
  left: 16px; bottom: 14px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(12, 22, 16, .74);
}

/* == 13 Ablauf ============================================================ */
.process { padding: 56px 0; }
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.steps li {
  min-width: 0;
  padding: 30px 28px 32px;
  border-right: 1px solid var(--line);
}
.steps li:last-child { border-right: 0; }
.step-no {
  display: block;
  margin-bottom: 46px;
  font-family: var(--font);
  font-size: 34px;
  line-height: 1;
  color: var(--green-ink);
}
.steps h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.011em;
}
.steps p {
  margin: 0;
  max-width: 250px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* == 14 Farbwelt ========================================================== */
.live-area { padding: 18px 0 110px; }
.live {
  --live-bg: #14271d;
  --live-fg: #fff;
  --live-muted: rgba(255, 255, 255, .78);
  --live-eyebrow: #b6c7b8;
  --live-cta-bg: var(--green);
  --live-cta-fg: var(--forest);
  position: relative;
  isolation: isolate;
  padding: 78px 0;
  color: var(--live-fg);
  background-color: var(--live-bg);
  transition: background-color .55s var(--ease), color .35s var(--ease);
}
/* Die 6%-Textur lag als eigene gemischte Ebene ueber dem ganzen Abschnitt.
   Sie steckt jetzt in den Hintergrundebenen von .live selbst; der Schleier in
   der aktuellen Wandfarbe ersetzt die frueheren 6% Deckkraft. */
.live {
  background-image:
    linear-gradient(color-mix(in srgb, var(--live-bg) 94%, transparent),
                    color-mix(in srgb, var(--live-bg) 94%, transparent)),
    url("../img/surface-03.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, multiply;
}
.live.live-is-light {
  --live-fg: #14271d;
  --live-muted: #293e30;
  --live-eyebrow: #31553a;
  --live-cta-bg: #14271d;
  --live-cta-fg: #fff;
}
.live .eyebrow { color: var(--live-eyebrow); }
.live-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 46px; align-items: center; }
.live-copy .lead {
  max-width: 510px;
  margin: 18px 0 28px;
  color: var(--live-muted);
}
.live-copy .btn.green { background: var(--live-cta-bg); color: var(--live-cta-fg); }
.live-copy .btn.green:hover { background: var(--live-cta-bg); color: var(--live-cta-fg); filter: brightness(.9); }

.live-wall {
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #f4f0e8;
}
.live-room {
  background: #ded9d0;
  overflow: hidden;
}
.live-room svg {
  display: block;
  width: 100%;
  height: auto;
  isolation: isolate;
}
.live-room-tint {
  fill: var(--room-color, #fff);
  opacity: var(--room-opacity, 0);
  mix-blend-mode: multiply;
  transition: fill .4s var(--ease), opacity .4s var(--ease);
}
.live-panel { padding: 23px 26px 24px; color: var(--forest); }
.live-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 19px;
}
.live-panel .eyebrow { margin-bottom: 5px; color: #647568; }
.live-panel h3 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.05;
  letter-spacing: -.016em;
}
.live-current {
  margin: 0 0 2px;
  color: #56645a;
  font-size: 12px;
  white-space: nowrap;
}
.live-current strong { color: var(--forest); }
.ral-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ral-swatch {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 57px;
  padding: 8px 9px;
  border: 1px solid #d7d9d1;
  background: #fff;
  color: var(--forest);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.ral-swatch:hover { transform: translateY(-2px); border-color: #75957d; }
.ral-swatch.is-on { border-color: var(--forest); background: #e4eee2; box-shadow: inset 0 0 0 1px var(--forest); }
.ral-chip {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border: 1px solid rgba(20, 39, 29, .18);
  border-radius: 50%;
  background: var(--chip);
}
.ral-chip.original { background: linear-gradient(135deg, #dcd9d4 10%, #9a9690 90%); }
.ral-swatch strong, .ral-swatch small { display: block; overflow-wrap: anywhere; }
.ral-swatch strong { font-size: 12px; line-height: 1.2; }
.ral-swatch small { margin-top: 2px; color: #5e6a60; font-size: 11px; line-height: 1.15; }
.live-auto {
  margin: 15px 0 0;
  color: #315f37;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.live-note {
  margin: 10px 0 0;
  color: #59675d;
  font-size: 11px;
  line-height: 1.5;
}
.live-source {
  display: inline-block;
  margin-top: 9px;
  color: var(--forest);
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* == 15 Bewertungen ======================================================= */
.reviews { padding: 88px 0 110px; }
.reviewgrid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 50px; align-items: start; }
.ratingblock { position: sticky; top: 100px; }
.big-num { font-size: clamp(88px, 10.5vw, 158px); line-height: .78; letter-spacing: -.034em; }
.stars { margin-top: 18px; font-size: 20px; letter-spacing: .14em; color: var(--green-ink); }
.ratingblock p { max-width: 330px; color: var(--muted); line-height: 1.55; }

.quotelist { border-top: 1px solid var(--line); }
.quote {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.avatar {
  position: relative;
  overflow: hidden;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--av, var(--green-ink));
  color: #fff;
  font-weight: 700;
}
.quote b { display: block; margin-bottom: 8px; }
.quote p { margin: 0; color: #4f554f; line-height: 1.58; }
.quote small { font-family: var(--mono); font-size: 9px; color: #858b85; }

/* == 16 Partner =========================================================== */
.partners-area { padding: 88px 0; }
.partners { background: var(--sage); padding: 78px 0; }
.partner-head {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 44px;
  align-items: end;
  margin-bottom: 36px;
}
.partner-head .lead { justify-self: end; max-width: 520px; margin: 0; }

/* Die Reiter erscheinen erst, wenn das Skript die Karten umschalten kann.
   Ohne JavaScript stehen alle Partnerkarten untereinander. */
.partner-tabs { display: none; gap: 10px; margin-bottom: 12px; }
.partner-switch.is-enhanced .partner-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
.partner-tab {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(20, 24, 21, .08);
  box-shadow: inset 0 -3px 0 transparent;
  cursor: pointer;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.partner-tab:hover { background: rgba(255, 255, 255, .9); }
.partner-tab.is-on { background: #fff; box-shadow: inset 0 -3px 0 var(--green); }
.partner-tab.is-featured { border-color: rgba(124, 192, 67, .85); }
.partner-tab.is-featured::after {
  content: "Projektpartner";
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--green-ink);
  font: 700 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.partner-tab:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.partner-tab img {
  height: var(--lh, 28px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: filter .2s var(--ease), opacity .2s var(--ease);
}
.partner-tab.is-on img, .partner-tab:hover img { filter: none; opacity: 1; }
/* Name nur fuer Screenreader: das Logo traegt den Reiter. */
.partner-tab-name {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.partner-panel {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  background: var(--forest);
  color: #fff;
  overflow: hidden;
}
.partner-panel.is-featured { box-shadow: inset 5px 0 0 var(--green); }
.partner-panel[hidden] { display: none; }
.partner-panel + .partner-panel { margin-top: 10px; }
.partner-switch.is-enhanced .partner-panel {
  margin-top: 0;
  animation: partner-in .34s var(--ease) both;
}
@keyframes partner-in { from { opacity: 0; transform: translateY(8px); } }

/* Logoseite durchgehend weiss: die Logos sind fuer hellen Grund gestaltet,
   so steht kein zweiter Farbton als Kasten hinter dem Logo. */
.partner-mark {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 24px;
  min-height: 320px;
  padding: 36px;
  background: #fff;
}
.partner-logo { height: var(--lh, 80px); width: auto; max-width: 100%; object-fit: contain; }
.partner-mark small {
  justify-self: start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f877f;
}
.partner-copy { padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.partner-copy p { margin: 0; max-width: 620px; color: rgba(255, 255, 255, .72); line-height: 1.55; }
.partner-copy .btn { align-self: flex-start; }

.supplier-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 32px 0 14px;
}
.supplier-head b { font-size: 18px; }
.supplier-head span { max-width: 540px; font-size: 12.5px; color: var(--muted); }
.supplier-head { align-items: center; }
.supplier-head span { margin-left: auto; text-align: right; }
.pause-btn {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(20, 24, 21, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  color: var(--forest);
  cursor: pointer;
}
.pause-btn[hidden] { display: none; }
.pause-btn:hover { background: #fff; }
.pause-btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.pause-btn svg { width: 12px; height: 12px; fill: currentColor; }
.pause-btn .i-play, .pause-btn[aria-pressed="true"] .i-pause { display: none; }
.pause-btn[aria-pressed="true"] .i-play { display: block; }
/* Logoband: drei gleiche Reihen laufen gemeinsam um eine Reihenbreite nach links,
   dann beginnt die Animation nahtlos von vorn. Nur transform, kein Layout. */
.supplier-band {
  position: relative;
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.supplier-band::before,
.supplier-band::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;
  width: 56px;
  pointer-events: none;
}
.supplier-band::before { left: 0; background: linear-gradient(90deg, var(--sage), transparent); }
.supplier-band::after { right: 0; background: linear-gradient(270deg, var(--sage), transparent); }
.supplier-track {
  flex: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: supplier-lauf 40s linear infinite;
}
.supplier-band:hover .supplier-track,
.supplier-band.is-paused .supplier-track { animation-play-state: paused; }
@keyframes supplier-lauf { to { transform: translateX(calc(-100% - 10px)); } }
.supplier {
  flex: none;
  width: 200px;
  min-height: 84px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(20, 24, 21, .08);
}
.supplier img { height: var(--lh, 32px); width: auto; max-width: 150px; object-fit: contain; }

/* == 17 Einsatzgebiet ===================================================== */
.area { padding: 88px 0 110px; }
.area-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 72px;
  align-items: start;
}
.area .lead { max-width: 570px; margin: 20px 0 28px; }
.places {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.places li {
  position: relative;
  padding: 17px 18px 17px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.009em;
}
.places li:nth-child(odd) { border-right: 1px solid var(--line); }
.places li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  background: var(--green);
}

/* == 18 Kontakt =========================================================== */
.contact { background: var(--forest); color: #fff; padding: 94px 0 28px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line2);
}
.contact .lead { color: rgba(255, 255, 255, .72); max-width: 520px; margin: 26px 0 0; }
.contact-card { margin-top: 40px; padding: 22px 0 0; border-top: 1px solid var(--line2); }
.contact-card a.big { display: flex; align-items: center; min-height: 44px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; }
.contact-card a.big:hover { color: var(--green-soft); }
.contact-card address {
  margin: 14px 0 0;
  font-style: normal;
  color: rgba(255, 255, 255, .66);
  line-height: 1.55;
}

/* Anfrageformular: helle Karte auf Waldgruen, kantig wie die Buttons. */
.anfrage {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--paper);
  color: var(--ink);
}
.anfrage-title { margin: 0 0 4px; font: 800 clamp(24px, 2vw, 30px)/1 var(--font); font-stretch: var(--stretch-head); text-transform: uppercase; color: var(--forest); }
.anfrage-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.anfrage .field { display: grid; gap: 7px; align-content: start; }
.anfrage label { font-size: 13px; font-weight: 600; color: var(--ink2); }
.anfrage label span { color: var(--green-ink); }
.anfrage input[type="text"], .anfrage input[type="email"], .anfrage input[type="tel"], .anfrage select, .anfrage textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(19, 24, 20, .28);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 400 16px/1.4 var(--body);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.anfrage textarea { min-height: 128px; resize: vertical; }
.anfrage select { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314271d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 15px center / 12px; }
.anfrage ::placeholder { color: #7d837d; }
.anfrage input:focus, .anfrage select:focus, .anfrage textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(124, 192, 67, .45); }
.anfrage [aria-invalid="true"] { border-color: #a3341f; }
.field-error { margin: 0; min-height: 0; color: #a3341f; font-size: 13px; }
.field-error:empty { display: none; }
.anfrage .check { grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; }
.anfrage .check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--forest); }
.anfrage .check label { font-weight: 400; line-height: 1.5; color: var(--muted); }
.anfrage .check label a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.anfrage .check .field-error { grid-column: 2; }
.anfrage-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 4px; }
.anfrage-foot .btn { min-width: 210px; }
.anfrage-foot .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.anfrage-status { margin: 0; flex: 1 1 240px; font-size: 14px; line-height: 1.5; color: var(--forest); font-weight: 600; }
.anfrage-status.is-error { color: #a3341f; }
.anfrage.is-sent .anfrage-row, .anfrage.is-sent .field, .anfrage.is-sent .anfrage-foot .btn { display: none; }
.anfrage.is-sent .anfrage-status { font-size: 18px; }
.anfrage-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-links a { color: rgba(255, 255, 255, .64); }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, .64);
}
.footer a:hover { color: var(--green-soft); }

/* == 19 Responsive ======================================================== */
@media (max-width: 1180px) {
  .navlinks { display: none; }
  .menu-btn { display: grid; }

  .hero { background: var(--forest); color: #fff; }
  .hero-panels { display: block; }
  .hero-left { display: none; }
  .hero-right { position: absolute; inset: 0; }
  .hero-right::after {
    background:
      linear-gradient(90deg, rgba(10, 20, 15, .66), rgba(10, 20, 15, .18) 72%),
      linear-gradient(180deg, rgba(10, 20, 15, .12), rgba(10, 20, 15, .72) 100%);
  }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-copy { max-width: none; }
  .hero .eyebrow { color: #b6c9b8; }
  .hero .display .hl { color: var(--green-soft); }
  .hero .lead { color: #d6ddd7; }
  .hero-actions .btn.light { background: #fff; color: var(--forest); }
  .hero-actions .btn.line { color: #fff; border-color: currentColor; }
  .hero-actions .btn.line:hover { background: rgba(255, 255, 255, .12); }
  .hero-proof { border-top-color: rgba(255, 255, 255, .22); }
  .hero-proof strong span { color: var(--green-soft); }
  .hero-proof small { color: rgba(255, 255, 255, .74); }
  .hero-side {
    justify-self: stretch;
    width: 100%;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }
  .hero-card { margin-top: 0; width: min(340px, 48vw); }
  .hero-controls { margin-top: 0; flex-direction: column; align-items: flex-end; }

  .section-head, .showcase, .projects-head, .ba-grid, .about-grid,
  .live-grid, .reviewgrid, .partner-head, .partner-panel, .contact-grid {
    grid-template-columns: 1fr;
  }
  .section-head .lead, .projects-head .lead, .partner-head .lead { justify-self: start; }
  .preview, .ratingblock { position: relative; top: auto; }
  .preview { min-height: 520px; }
  .about-media { grid-template-rows: 1.2fr 1fr; grid-template-columns: 1fr 1fr; height: 440px; }
  .audience-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, minmax(280px, 34vw));
  }
  .aud:nth-child(n) { grid-column: auto; grid-row: auto; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(2) { border-right: 0; }
  .steps li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .area-grid { grid-template-columns: 1fr; gap: 30px; }
  .partner-mark { min-height: 220px; }

}

@media (max-width: 760px) {
  :root { --gut: 28px; }
  .section { padding: 72px 0; }
  .section-head { gap: 22px; margin-bottom: 32px; }
  .section-head .lead { font-size: 16px; }
  .island-wrap { padding-bottom: 72px; }
  .island { width: calc(100% - 16px); border-radius: 26px; }

  .nav { padding: 14px 0; }
  .brand img { height: 54px; }
  .navright .btn { display: none; }
  .drawer { padding: 116px var(--gut) 40px; }

  .hero-panels { display: block; }
  .hero-left { display: none; }
  .hero-right { position: absolute; inset: 0; }
  .hero-slide img, .hero-slide video { object-position: 58% center; }
  .hero-right::after {
    background: linear-gradient(180deg, rgba(10, 20, 15, .30) 0%, rgba(10, 20, 15, .42) 34%,
                rgba(10, 20, 15, .84) 62%, rgba(10, 20, 15, .96) 100%);
  }
  .hero-grid { padding: 110px 0 22px; gap: 26px; }
  .hero .display { font-size: clamp(36px, 11.4vw, 58px); }
  .hero .lead { font-size: 15px; max-width: 340px; margin: 16px 0 22px; }
  .hero-actions { display: grid; }
  .hero-actions .btn { width: 100%; }

  /* Am Handy nur Kernaussage und Buttons; Zaehler und Projekt-Card entfallen. */
  .hero-side { display: none; }
  .hero .eyebrow { color: rgba(255, 255, 255, .78); }

  /* Kennzahlen in drei schmalen Spalten; das Siegel steht fuer Meisterbetrieb */
  .hero-proof {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    align-items: end;
    gap: 0 14px;
    margin-top: 24px;
    padding-top: 18px;
  }
  .hero-proof strong { font-size: clamp(26px, 7.6vw, 32px); }
  .hero-proof small { margin-top: 8px; white-space: normal; letter-spacing: .08em; }
  .hero-proof-seal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-proof-seal img { width: 40px; height: 40px; }
  .hero-proof-seal strong { display: none; }

  .services { padding-bottom: 36px; }
  .showcase { gap: 26px; }
  .preview { min-height: 400px; }
  .preview-content { padding: 20px; }
  .preview-title { font-size: clamp(23px, 6.8vw, 36px); }
  .preview-desc { font-size: 13.5px; max-width: 340px; }
  .preview-meta { font-size: 9px; }
  .play-dot { width: 30px; height: 30px; }
  .service-groups { gap: 28px; }
  .more { grid-template-columns: 1fr; gap: 8px; margin-top: 32px; }

  .plaster { --plaster-veil: .54; }
  .audience, .process { --plaster-veil: .56; }
  .services { --plaster-veil: .46; }
  .live-area { --plaster-veil: .66; }

  .projects-area { padding-bottom: 24px; }
  .projects-area.plaster {
    --plaster-h: 620px;
    background-image:
      linear-gradient(to bottom, rgba(var(--plaster-base), 0) 42%,
                                 rgb(var(--plaster-base)) 100%),
      var(--surface-image);
    background-position: center top, 15% top;
    background-size: 100% var(--plaster-h), auto var(--plaster-h);
  }
  .projects { padding: 68px 0 56px; }
  .project-carousel-block { margin-top: 36px; padding-top: 28px; }
  .project-carousel-head { display: block; }
  .project-carousel-tools { justify-items: stretch; margin-top: 22px; }
  .project-carousel-controls { justify-content: flex-start; }
  .project-carousel { gap: 12px; margin-top: 22px; }
  .reference-card { flex-basis: min(76vw, 330px); }
  .about.plaster {
    background-image:
      linear-gradient(to bottom, rgb(var(--plaster-base)) 0,
                                 rgba(var(--plaster-base), 0) 130px),
      linear-gradient(rgba(var(--plaster-base), var(--plaster-veil)),
                      rgba(var(--plaster-base), var(--plaster-veil))),
      var(--surface-image);
    background-size: 100% 130px, cover, cover;
  }
  .project-foot { flex-direction: column; align-items: flex-start; }

  .ba { padding: 36px 0 56px; }
  .ba-grid { gap: 26px; }
  .ba-knob { width: 44px; height: 44px; }

  .about { padding-bottom: 36px; }
  .about-copy { padding: 26px; min-height: 0; }
  .about-media { grid-template-columns: 1fr 1fr; grid-template-rows: 1.2fr 1fr; height: 330px; gap: 10px; }
  .audience { padding: 52px 0 72px; }
  .audience .section-head { margin-bottom: 30px; }
  .audience .h2.is-long { font-size: clamp(34px, 9vw, 40px); }
  .audience-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 218px;
    gap: 9px;
  }
  .aud { min-height: 218px; box-shadow: none; }
  .aud-body { padding: 18px 19px 20px; }
  .aud-body h3 { font-size: 19px; }
  .process { padding: 36px 0; }
  .steps { grid-template-columns: 1fr; }
  .steps li { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps li:last-child { border-bottom: 0; }
  .steps li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .step-no { margin-bottom: 10px; font-size: 28px; }
  .steps p { max-width: none; }
  .area { padding: 56px 0 72px; }
  .places li { font-size: 15px; padding: 13px 8px 13px 24px; }

  .live-area { padding: 16px 0 72px; }
  .live { padding: 62px 0; }
  .live-grid { gap: 28px; }
  .live-panel { padding: 20px; }
  .live-panel-head { display: block; }
  .live-current { margin-top: 10px; white-space: normal; }
  .ral-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .reviews { padding: 56px 0 72px; }
  .reviewgrid { gap: 24px; }
  .big-num { font-size: 100px; }
  .quote { grid-template-columns: 44px 1fr; gap: 12px; }
  .quote small { grid-column: 2; }

  .partners-area { padding: 48px 0 56px; }
  .partners { padding: 62px 0; }
  .partner-head { gap: 22px; margin-bottom: 26px; }
  .partner-mark, .partner-copy { padding: 24px; }
  .partner-mark { min-height: 190px; }
  .partner-switch.is-enhanced .partner-tabs { gap: 6px; grid-template-columns: repeat(2, 1fr); }
  .partner-tab { min-height: 58px; padding: 10px 8px; }
  .partner-tab img { height: calc(var(--lh, 28px) * .78); }
  .supplier-head { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .supplier-head span { grid-column: 1; margin-left: 0; text-align: left; }
  .pause-btn { grid-column: 2; grid-row: 1 / span 2; }
  .supplier { width: 150px; min-height: 70px; }
  .supplier img { max-width: 116px; height: calc(var(--lh, 32px) * .85); }

  .contact { padding-top: 70px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .anfrage-row { grid-template-columns: 1fr; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reference-card:hover img { transform: none; }
}

/* == 20 Schnellkontakt am Handy ============================================ */
/* Anruf-Button im Hero und Leiste unten, sobald der Hero aus dem Bild ist.
   Ein-/Ausblenden: initQuickbar() in app.js, Markup: landing/schnellkontakt.php. */
.hero-actions .hero-call { display: none; }
.quickbar { display: none; }

@media (max-width: 760px) {
  .hero-actions .hero-call { display: inline-flex; }
  .hero-actions .hero-anfrage { display: none; }

  .quickbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 8px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 30, 22, .97);
    box-shadow: 0 -12px 30px rgba(10, 18, 13, .22);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .quickbar.is-on {
    transform: none;
    visibility: visible;
    transition: transform .3s var(--ease);
  }
  body.menu-open .quickbar { transform: translateY(110%); visibility: hidden; }
  .quickbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .quickbar-call { background: var(--green); color: var(--forest); }
  .quickbar-mail { border: 1px solid rgba(255, 255, 255, .34); color: #fff; }
  /* Umbau-Hinweis ueber die Leiste heben */
  body.quickbar-on .am-hinweis { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* == 21 Leistungskarten: Titel-Knopf und Wischreihe am Handy ================ */
/* Jede Karte ist ein Artikel mit echter Ueberschrift; der Knopf im Titel deckt
   per ::after die ganze Karte ab (Klick, Fokus, Hover wie bisher). */
.sc-hit {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.sc-hit::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.sc-hit:focus-visible { outline: none; }
.sc-hit:focus-visible::after { outline: 2px solid var(--green); outline-offset: -2px; }

/* Am Handy eine Wischreihe pro Gruppe statt elf Karten untereinander.
   Alle Karten bleiben im HTML und im Layout, nichts ist versteckt (SEO). */
/* Grid-Elemente sind sonst mindestens so breit wie ihr Inhalt; die Wischreihe
   wuerde die Seite seitlich verschiebbar machen. */
.service-groups, .service-group { min-width: 0; }

@media (max-width: 760px) {
  .service-groups { gap: 40px; }
  .service-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .service-group-head span { display: inline; font-size: 12px; white-space: nowrap; }
  .service-group-intro { margin-bottom: 14px; }
  .service-list {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 10px;
    margin-inline: calc(var(--gut) / -2);
    padding: 0 calc(var(--gut) / 2) 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--gut) / 2);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .service-list::-webkit-scrollbar { display: none; }
  .service-card { scroll-snap-align: start; min-height: 300px; }
}

/* == 22 Handy: Abstandsraster, Mindestschrift, Referenzen ================== */
@media (max-width: 760px) {
  /* Einheitliches Raster: 64 px Luft am Rand jedes Abschnitts,
     Inseln (Referenzen, Farbwelt, Partner) mit 40 px Abstand */
  .services, .audience, .about, .process, .ba, .reviews, .area { padding-top: 64px; padding-bottom: 64px; }
  .projects-area, .live-area, .partners-area { padding-top: 40px; padding-bottom: 40px; }
  .contact { padding-top: 64px; }
  .about-grid { gap: 24px; }

  /* Lange Ueberschriften frei umbrechen statt erzwungener Zeilenwechsel */
  .h2.is-long br { display: none; }

  /* Mindestschriftgroesse 12 px */
  .eyebrow, .btn, .hero-proof small, .service-card .label, .sc-play b,
  .reference-card-credit, .reference-card-body small, .about-media figcaption, .ba-tag,
  .ral-swatch strong, .ral-swatch small, .live-auto, .live-note, .live-source,
  .quote small, .partner-mark small { font-size: 12px; }

  /* Referenzen: wischen statt Steuerleiste, ohne Eigenlauf (app.js) */
  .project-carousel-tools { display: none; }
  .project-carousel-block { margin-top: 28px; padding-top: 0; border-top: 0; }
  .project-carousel { margin-top: 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .project-carousel::-webkit-scrollbar { display: none; }
  .reference-card { scroll-snap-align: start; }
}

@media (max-width: 760px) {
  /* Solange der Umbau-Hinweis unten steht, Hero-Buttons darueber halten */
  body:has(.am-hinweis:not([hidden])) .hero-grid { padding-bottom: 84px; }
  /* Bildunterschriften im Team-Raster passen sonst nicht in die kleinen Fotos */
  .about-media figcaption { left: 10px; bottom: 10px; padding: 7px 10px; letter-spacing: .08em; }
  /* Textlinks mit ausreichender Tippflaeche */
  .footer a, .live-source { display: inline-block; padding: 12px 0; }
}

/* == 23 Feinschliff: Menue-Kontakt, Button-Reihenfolge, ruhige Uebergaenge == */
.drawer-foot .drawer-call { margin-bottom: 10px; }
.drawer-foot .drawer-mail {
  padding: 8px 0;
  font-family: var(--body);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.drawer-foot span { font-size: 12px; }

@media (max-width: 760px) {
  /* Button nach Bild bzw. Werkzeug statt davor */
  .ba-grid, .live-grid, .area-grid { gap: 0; }
  .ba-copy, .live-copy, .area-grid > div:first-child { display: contents; }
  .ba-stage, .live-wall, .places { order: 1; }
  .ba-copy > .btn, .live-copy > .btn, .area-grid > div:first-child > .btn { order: 2; margin-top: 24px; }

  /* Ein Putzmotiv fuer alle Abschnitte: die Farbbaender bleiben, die Bildnaehte verschwinden */
  .plaster { --surface-image: url("../img/surface-01.webp"); }
  .projects-area { border-top: 0; box-shadow: none; }

  /* Video-Karten: nur das Play-Symbol, hoeher gesetzt, damit es die Kategorie-Zeile nicht trifft */
  .sc-play { top: 30%; }
  .sc-play b { display: none; }
}

/* == 24 Logoband bei reduzierter Bewegung ================================ */

@media (prefers-reduced-motion: reduce) {
  .supplier-track { flex: 1 1 100%; flex-wrap: wrap; animation: none; }
  .supplier-track[aria-hidden="true"], .supplier-band::before, .supplier-band::after, .pause-btn { display: none; }
}

/* == 25 Bewertungen: Links zum Google-Profil, Quellenangabe ================ */
.rating-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.rating-links a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 600;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quote b a { color: inherit; text-decoration: none; }
.quote b a:hover { text-decoration: underline; }
.quote-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.quote-source { margin: 0; font-size: 12px; color: var(--muted); }

/* Avatare: Initiale auf einem Ton aus der Malerpalette (der Reihe nach vergeben),
   darueber auf Wunsch das Google-Profilbild. Alle Toene tragen weisse Schrift. */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ton-0 { --av: #3f6a1c; }
.ton-1 { --av: #8a3b2e; }
.ton-2 { --av: #2f5d7c; }
.ton-3 { --av: #8a5a1f; }
.ton-4 { --av: #1f6f66; }
.ton-5 { --av: #5b4a7a; }
.ton-6 { --av: #a2482a; }
.ton-7 { --av: #4a5560; }

/* Laufband von oben nach unten (app.js → initReviewFeed): sichtbar sind --feed-rows
   Rezensionen, die Hoehe setzt das Skript fest, damit darunter nichts springt.
   Die hinausgeschobene Rezension blendet unten weich aus. Ohne Skript oder bei
   reduzierter Bewegung bleibt es eine normale Liste. */
.quote-feed { --feed-rows: 3; }
.quote-feed.is-on {
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent);
}
.quote-track.is-moving { transition: transform .9s var(--ease); }
.quote.is-new { animation: quote-ein .9s var(--ease) both; }
@keyframes quote-ein { from { opacity: 0; } }

@media (max-width: 760px) {
  .quote-feed { --feed-rows: 2; }
}

/* == 26 UX-Rhythmus und mobile Verdichtung ===============================
   SEO-Inhalte bleiben vollstaendig im HTML. Die Regeln reduzieren nur
   Wiederholung, Flaechenhoehe und visuelle Konkurrenz. */

/* Ruhige Flaechen zwischen den markanten Putz- und Bildmomenten. */
.process,
.reviews,
.area {
  background-image: none;
  background-blend-mode: normal;
}
.reviews,
.area { background-color: var(--paper); }

/* Sekundaere Kapitel erhalten eine bewusst kleinere Hierarchiestufe. */
.audience .h2,
.process .h2,
.area .h2 {
  font-size: clamp(38px, 3.5vw, 50px);
  line-height: .96;
  letter-spacing: -.02em;
}

/* Wiederholte Kategorien bleiben fuer Screenreader und Suchmaschinen erhalten,
   treten visuell aber hinter die selbsterklaerenden Ueberschriften zurueck. */
.audience .eyebrow,
.process .eyebrow,
.ba-copy .eyebrow,
.ratingblock .eyebrow,
.area .eyebrow {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.audience { padding: 82px 0; }
.audience .section-head {
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 42px;
}
.audience .section-head .lead {
  justify-self: start;
  max-width: 690px;
}

.services { padding-top: 92px; }
.service-groups { gap: 24px; }
.service-card { padding-block: 14px; }
.service-card.is-active::before { top: 14px; bottom: 14px; }
.service-card h4 { font-size: 19px; }
.more { margin-top: 34px; }

.process { padding: 72px 0; }
.steps li { padding: 24px 26px 26px; }
.step-no { margin-bottom: 28px; }

.live-area { padding-bottom: 74px; }
.live { padding-block: 64px; }

.reviews { padding: 78px 0 84px; }
.quote-feed { --feed-rows: 2; }

.partners-area { padding: 64px 0; }
.partners { padding: 64px 0; }
.partner-mark { min-height: 250px; padding: 30px; }
.partner-copy { padding: 30px; }

.area { padding: 72px 0 78px; }
.project-carousel-controls button:focus-visible,
.project-jump select:focus-visible,
.reference-card:focus-visible {
  outline-color: var(--green-ink);
}

@media (max-width: 760px) {
  .nav { padding-block: 10px; }
  .brand img { height: 50px; }
  .nav.is-stuck .brand img { height: 48px; }

  .services {
    padding-top: 56px;
    padding-bottom: 42px;
  }
  .service-groups { gap: 28px; }
  .service-list { grid-auto-columns: 82%; }
  .service-card { min-height: 248px; }
  .service-group-intro {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.5;
  }
  .more { margin-top: 26px; padding-top: 18px; }

  /* Vier Zielgruppen bleiben komplett vorhanden, werden aber als eine
     wischbare, bewusst kompakte Ebene statt als vier Bildschirmhoehen gezeigt. */
  .audience { padding: 56px 0 62px; }
  .audience .section-head { gap: 18px; margin-bottom: 26px; }
  .audience .h2.is-long {
    font-size: 32px;
    line-height: .96;
  }
  .audience-grid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-auto-rows: none;
    gap: 10px;
    margin-inline: calc(var(--gut) / -2);
    padding: 0 calc(var(--gut) / 2) 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--gut) / 2);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .audience-grid::-webkit-scrollbar { display: none; }
  .aud {
    min-height: 278px;
    height: 278px;
    scroll-snap-align: start;
  }

  .process { padding: 54px 0; }
  .process .h2,
  .area .h2 { font-size: 32px; }
  .steps li { padding: 17px 0 19px; }
  .step-no { margin-bottom: 8px; font-size: 26px; }
  .steps p { line-height: 1.48; }

  .live-area { padding: 24px 0 56px; }
  .live { padding: 48px 0; }
  .live-grid { gap: 24px; }
  .live-panel { padding: 18px; }
  .ral-swatch { min-height: 52px; }

  .reviews { padding: 54px 0 60px; }
  .reviewgrid { gap: 18px; }
  .quote-feed { --feed-rows: 1; }
  .big-num { font-size: 92px; }

  .partners-area { padding: 40px 0; }
  .partners { padding: 48px 0; }
  .partner-head { margin-bottom: 24px; }
  .partner-mark { min-height: 160px; padding: 22px; }
  .partner-copy { padding: 22px; gap: 14px; }
  .partner-copy .h3 { font-size: 31px; }

  .area { padding: 50px 0 56px; }
  .area .lead { margin-block: 16px 22px; }
  .contact { padding-top: 56px; }
}

/* == 27 Mobile Werkzeug- und Vertrauensmodule ============================ */
@media (max-width: 760px) {
  .about { padding-top: 32px; }

  /* Die RAL-Auswahl bleibt vollstaendig bedienbar, benoetigt aber nicht mehr
     sechs Kartenzeilen. Zwei Reihen werden horizontal gewischt. */
  .ral-palette {
    grid-template-columns: none;
    grid-template-rows: repeat(2, 52px);
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    gap: 8px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ral-palette::-webkit-scrollbar { display: none; }
  .ral-swatch {
    min-height: 52px;
    scroll-snap-align: start;
  }

  .partner-head .lead { font-size: 15px; line-height: 1.5; }
  .partner-mark { min-height: 138px; padding: 18px; }
  .partner-copy { padding: 18px; gap: 12px; }
  .partner-copy .h3 { font-size: 28px; }
  .partner-copy p { font-size: 14px; line-height: 1.5; }
  .supplier-head { margin-top: 24px; }
  .supplier { min-height: 60px; }
}

/* == 28 MCE Baukonzepte – bereitgestelltes Markenlogo ==================== */
.partner-tab.is-featured,
.partner-tab.is-featured:hover,
.partner-tab.is-featured.is-on {
  background: #a9a393;
}
.partner-tab.is-featured img {
  content: url("../img/partner/mce-baukonzepte.webp");
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 48px;
  filter: none;
  opacity: 1;
}
.partner-panel.is-featured .partner-mark {
  background: #a9a393;
}
.partner-panel.is-featured .partner-logo {
  content: url("../img/partner/mce-baukonzepte.webp");
  width: min(100%, 520px);
  height: auto;
  max-height: none;
}
.partner-panel.is-featured .partner-mark small {
  color: rgba(255, 255, 255, .82);
}

@media (max-width: 760px) {
  .partner-tab.is-featured img {
    max-width: 82%;
    max-height: 38px;
  }
}

/* == 29 Bewegung =========================================================
   Nur mit Klasse .js-motion auf <html> (document-head.php setzt sie, wenn
   keine reduzierte Bewegung gewuenscht ist; app.js → initMotion()).
   Animiert werden nur transform, opacity und clip-path. */
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln-i { display: block; }

.js-motion .display:not(.is-split),
.js-motion .h2:not(.is-split) { visibility: hidden; }

.js-motion .is-split .ln-i {
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 60ms);
}
.js-motion .is-split.is-in .ln-i { transform: none; }

.js-motion .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0ms);
}
.js-motion .rv.is-in { opacity: 1; transform: none; }

/* Bilder oeffnen sich wie frisch abgezogenes Abdeckband: von unten nach oben. */
.js-motion .aud.rv, .js-motion .about-media figure.rv, .js-motion .ba-stage.rv,
.js-motion .reference-card.rv, .js-motion .live-wall.rv, .js-motion .preview.rv,
.js-motion .lp-hero-media.rv, .js-motion .lp-text-media.rv, .js-motion .lp-shot.rv {
  opacity: 1; transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1);
  transition-delay: var(--d, 0ms);
}
.js-motion .aud.rv img, .js-motion .about-media figure.rv img,
.js-motion .reference-card.rv img, .js-motion .preview.rv .preview-media {
  transform: scale(1.12);
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0ms);
}
.js-motion .rv.is-in, .js-motion .about-media figure.rv.is-in { clip-path: inset(0 0 0 0); }
.js-motion .aud.rv.is-in img, .js-motion .about-media figure.rv.is-in img,
.js-motion .reference-card.rv.is-in img, .js-motion .preview.rv.is-in .preview-media { transform: none; }

/* Hero: Video zieht beim Laden langsam auf. */
.js-motion .hero-right .hero-slide { animation: am-hero-in 2.2s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes am-hero-in { from { transform: scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }

/* Gruener Strich unter der Hervorhebung im Hero */
.hero .display .hl { position: relative; display: inline-block; }
.js-motion .hero .display .hl::after {
  content: ""; position: absolute; left: .02em; right: .04em; bottom: .02em; height: .07em;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.65, 0, .35, 1) .9s;
}
.js-motion .hero .display.is-in .hl::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .rv, .js-motion .is-split .ln-i { opacity: 1; transform: none; clip-path: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Link zur Leistungsseite in der Vorschau und auf den Karten */
.preview-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px;
  color: #fff; font-size: 13px; font-weight: 700; font-stretch: var(--stretch-label);
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.preview-link:hover { color: var(--green-soft); border-color: currentColor; }
/* Desktop: Link sitzt in der Vorschau. Mobil: ganze Karte fuehrt zur Leistungsseite. */
.service-card a.goto { display: none; }
@media (max-width: 900px) {
  .service-card a.goto { display: block; position: absolute; inset: 0; z-index: 4; }
  .service-card a.goto:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
}

/* == 30 Leistungsseiten (single-leistung.php) ============================= */
.leistung-page .crumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.leistung-page .crumb li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .6; }
.leistung-page .crumb a { text-decoration: underline; text-underline-offset: 3px; }
.leistung-page .crumb a:hover { color: var(--forest); }

.lp-hero { padding: clamp(130px, 14vw, 180px) 0 clamp(70px, 8vw, 120px); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.display.is-page { font-size: clamp(34px, 4.1vw, 64px); line-height: .94; color: var(--forest); overflow-wrap: break-word; text-wrap: balance; }
.lp-hero .lead { max-width: 600px; margin: 28px 0 34px; }
.lp-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.line.dark { color: var(--forest); border-color: rgba(20, 39, 29, .45); }
.btn.line.dark:hover { background: var(--forest); color: #fff; }

/* Bild bricht nach rechts aus dem Raster, zweites Bild ueberlappt die Kante. */
.lp-hero-media { position: relative; margin-right: calc((100vw - min(var(--max), 100vw - var(--gut))) / -2); }
.lp-hero-main { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 78vh; object-fit: cover; }
.lp-hero-inset {
  position: absolute; left: -12%; bottom: -9%; width: 38%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: 8px solid var(--paper); box-shadow: var(--shadow);
}

.lp-scope { padding: clamp(80px, 9vw, 130px) 0; background: var(--forest); color: #fff; }
.lp-scope-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lp-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--line2); }
.lp-points li {
  position: relative; padding: 20px 0 20px 26px; border-bottom: 1px solid var(--line2);
  font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, .9);
}
.lp-points li::before { content: ""; position: absolute; left: 0; top: 27px; width: 9px; height: 9px; background: var(--green); }

.lp-text { padding: clamp(80px, 9vw, 130px) 0 0; }
.lp-text:last-of-type { padding-bottom: 0; }
.lp-text-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(36px, 7vw, 120px); align-items: center; }
.lp-text.is-flip .lp-text-copy { order: 2; }
.lp-text.no-media .lp-text-grid { grid-template-columns: minmax(0, 760px); }
.lp-text-copy .h3 { color: var(--forest); font-size: clamp(30px, 3.2vw, 48px); line-height: .98; margin-bottom: 28px; }
.lp-text-copy p { max-width: 62ch; margin: 0 0 18px; font-size: 18px; line-height: 1.65; color: var(--ink2); }
.lp-text-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; }

.lp-gallery-wrap { padding: clamp(80px, 9vw, 130px) 0 0; }
.lp-gallery-wrap .h2 { margin-bottom: 40px; color: var(--forest); }
.lp-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 22%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.lp-shot { margin: 0; scroll-snap-align: start; }
.lp-shot img, .lp-shot video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--forest2); }
.lp-shot.is-video { grid-column: span 2; }
.lp-shot.is-video video { aspect-ratio: 8 / 5; height: 100%; }

.lp-faq { margin-top: clamp(80px, 9vw, 130px); padding: clamp(80px, 9vw, 130px) 0; }
.lp-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lp-faq .h2 { color: var(--forest); }
.lp-faq-list { border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary {
  position: relative; display: block; padding: 24px 48px 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 650; line-height: 1.35; color: var(--forest);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--forest), var(--forest)) center / 14px 2px no-repeat, linear-gradient(var(--forest), var(--forest)) center / 2px 14px no-repeat;
  transition: transform .3s var(--ease);
}
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { max-width: 62ch; margin: -6px 0 26px; font-size: 17px; line-height: 1.65; color: var(--ink2); }

.lp-refs { padding: clamp(80px, 9vw, 130px) 0 0; }
.lp-refs .h2 { margin-bottom: 40px; color: var(--forest); }
.lp-ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-ref { display: grid; gap: 14px; }
.lp-ref img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease); }
.lp-ref:hover img { transform: scale(1.03); }
.lp-ref span { font-size: 18px; font-weight: 700; color: var(--forest); }
.lp-ref b { color: var(--green-ink); }

.lp-more-wrap { padding: clamp(80px, 9vw, 130px) 0 clamp(80px, 9vw, 120px); }
.lp-more-title { margin: 0 0 22px; font-size: 13px; font-weight: 700; font-stretch: var(--stretch-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lp-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--line); }
.lp-more a {
  display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line);
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 650; font-stretch: var(--stretch-head); color: var(--forest);
  transition: padding .2s var(--ease), color .2s var(--ease);
}
.lp-more a:hover { padding-left: 8px; color: var(--green-ink); }

@media (max-width: 900px) {
  .lp-hero-grid, .lp-scope-grid, .lp-text-grid, .lp-faq-grid { grid-template-columns: 1fr; }
  .lp-hero-media { margin-right: 0; }
  .lp-hero-main { aspect-ratio: 4 / 3; }
  .lp-text-media img { aspect-ratio: 4 / 3; max-height: none; }
  .lp-hero-inset { display: none; }
  .lp-text.is-flip .lp-text-copy { order: 0; }
  .lp-points, .lp-more { grid-template-columns: 1fr; }
  .lp-ref-grid { grid-template-columns: 1fr; }
  .lp-gallery { grid-auto-columns: 72%; }
  .lp-shot.is-video { grid-column: span 1; }
  .lp-shot.is-video video { aspect-ratio: 4 / 5; }
}
@media (max-width: 760px) {
  .lp-hero { padding-top: 112px; }
  .display.is-page { font-size: clamp(32px, 9vw, 46px); }
  .lp-text-copy p, .lp-points li { font-size: 16px; }
}

/* == 31 Mobile Verdichtung ================================================ */
@media (max-width: 760px) {
  .sc-dots { top: 18px; right: 18px; left: auto; bottom: auto; }
  main > section.plaster:not(.lp-hero):not(.lp-faq) { padding-top: 44px; padding-bottom: 44px; }
  .lp-scope, .lp-faq { padding: 56px 0; }
  .lp-text, .lp-gallery-wrap, .lp-refs { padding-top: 56px; }
  .lp-faq { margin-top: 56px; }
  .lp-more-wrap { padding: 56px 0; }
  .lp-gallery-wrap .h2, .lp-refs .h2 { margin-bottom: 24px; }
}

/* == 32 Mobiler Hero: Bild oben frei, Text darunter auf ruhigem Grund ===== */
@media (max-width: 760px) {
  .hero { min-height: 0; display: flex; flex-direction: column; background: var(--forest); }
  .hero-panels { position: relative; inset: auto; height: min(56svh, 470px); min-height: 330px; }
  .hero-right::after {
    background: linear-gradient(180deg, rgba(10, 20, 15, .38) 0%, rgba(10, 20, 15, 0) 26%,
                rgba(10, 20, 15, 0) 70%, var(--forest) 100%);
  }
  .hero-grid { min-height: 0; padding: 4px 0 40px; gap: 0; margin-top: -34px; }
  .hero .eyebrow { display: none; }
  .hero .display { font-size: clamp(38px, 11.6vw, 54px); line-height: .9; }
  .hero .lead { font-size: 16px; line-height: 1.55; max-width: 36ch; margin: 16px 0 26px; color: rgba(255, 255, 255, .8); }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { min-height: 52px; }
  .hero-proof { margin-top: 30px; padding-top: 20px; }
  .hero-proof small { font-size: 10.5px; }
  body:has(.am-hinweis:not([hidden])) .hero-grid { padding-bottom: 40px; }
}

/* == 33 Audit: ruhigeres Mobil, einheitlicher Rhythmus ===================== */
.hero .display .hl::after { display: none; }
.project-carousel-controls button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (min-width: 1181px) {
  .live-grid { align-items: start; }
  .live-copy { position: sticky; top: 120px; }
  .navlinks a { padding-block: 12px; }
}
@media (max-width: 760px) {
  :root { --gut: 40px; }
  .nav { padding-block: 8px; }
  .home .nav:not(.is-stuck) { background: transparent; box-shadow: none; }
  .brand img, .nav.is-stuck .brand img { height: 42px; }
  .menu-btn { width: 44px; height: 44px; }

  .hero-panels { height: 52svh; min-height: 300px; max-height: 440px; }
  .hero-slide img, .hero-slide video { object-position: 50% 18%; }
  .hero-right::after { background: linear-gradient(180deg, rgba(10,20,15,.55) 0, rgba(10,20,15,0) 22%, rgba(10,20,15,0) 62%, var(--forest) 100%); }
  .hero-grid { margin-top: -24px; padding: 0 0 36px; }
  .hero .display { font-size: clamp(36px, 10.6vw, 46px); line-height: .95; }
  .hero .lead { margin: 14px 0 24px; max-width: 32ch; }
  .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .hero-actions .btn.line { min-height: 44px; border: 0; padding: 0; justify-content: flex-start;
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .hero-proof { display: none; }

  .services, .audience, .about, .ba, .process, .area,
  main > section.plaster:not(.lp-hero):not(.lp-faq) { padding-top: 56px; padding-bottom: 56px; }
  .reviews { padding: 48px 0; }
  .services { padding-bottom: 48px; }
  .projects-area, .live-area, .partners-area { padding: 0; }
  .island, .projects.island { width: 100%; border-radius: 0; }
  .live, .partners, .projects { padding: 56px 0; }
  .contact { padding-top: 56px; }
  .section-head, .audience .section-head, .partner-head { gap: 14px; margin-bottom: 24px; }
  .h2 { font-size: clamp(30px, 8.6vw, 36px); }

  .service-group-head span, .service-card .label, .sc-dots, .service-group-intro { display: none; }
  .service-groups { gap: 32px; }
  .service-group-head { margin-bottom: 12px; }
  .service-card { min-height: 0; aspect-ratio: 4 / 3; }

  .projects .eyebrow, .partners .eyebrow, .live-panel-head .eyebrow, .partner-mark small { display: none; }
  .projects-head { gap: 14px; margin-bottom: 0; }
  .projects-head .lead { padding: 0; border: 0; font-size: 16px; }
  .project-carousel { margin-inline: calc(var(--gut) / -2); padding-inline: calc(var(--gut) / 2); scroll-padding-inline: calc(var(--gut) / 2); }
  .reference-card { flex-basis: 78%; aspect-ratio: 4 / 5; }
  .reference-card-credit { top: 10px; right: 10px; padding: 0; background: none; font-size: 10px; opacity: .8; max-width: 70%; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
  .partner-tab.is-featured::after { display: none; }
  .reference-card-body em { display: none; }
  .reference-card-body small { text-transform: none; letter-spacing: .02em; font-size: 13px; }
  .project-foot, .ba-copy > .btn, .live-copy > .btn { display: none; }

  .about-copy { background: transparent; padding: 0; }
  .about-media figure:not(:first-child) figcaption { display: none; }

  .steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 16px 0; }
  .step-no { grid-row: 1 / span 2; margin: 0; font-size: 22px; line-height: 1.1; }
  .steps p, .process .lead { font-size: 15px; color: var(--ink2); }

  .live-auto { display: none; }
  .live-grid { gap: 28px; }
  .ratingblock { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .big-num { font-size: 64px; grid-row: 1 / span 2; }
  .quote small { color: #6b716c; }

  .drawer { padding: 96px 20px 32px; }
  .drawer-links a { display: block; padding: 8px 0; }
  .btn { font-size: 13px; }
  .anfrage { padding: 20px; }
  .anfrage .btn { width: 100%; }
  .anfrage .check input { width: 24px; height: 24px; }
  .anfrage label { font-size: 14px; }
  .footer a { display: inline-block; padding: 12px 0; }
}

/* == 34 Ruhige Bewegung ==================================================
   Weniger ist mehr: nur die Hero-Ueberschrift baut sich beim Laden auf.
   Beim Scrollen blenden Inhalte nur sanft ein, ohne Versatz, Maske,
   Zoom oder Staffelung. Ueberschriften stehen sofort. */
.js-motion .display:not(.is-split),
.js-motion .h2:not(.is-split) { visibility: visible; }
html.js-motion body .rv.rv {
  opacity: 0; transform: none; clip-path: none;
  transition: opacity .7s ease; transition-delay: 0s;
}
html.js-motion body .rv.rv.is-in { opacity: 1; }
html.js-motion .rv img, html.js-motion .rv .preview-media { transform: none !important; transition: none !important; }