/* =========================================================
   GL Maler mit Amore — Design System
   Editorial-craftsman aesthetic. Warm paper + ink + one
   signature clay accent, drawn from the paint swatch itself.
   ========================================================= */

/* ---------- Schriften, lokal ausgeliefert ----------
   Cormorant Garamond und Manrope liegen unter /assets/fonts statt bei Google.
   Das spart zwei fremde DNS- und TLS-Verbindungen vor dem ersten Textbild und
   es verlaesst keine IP-Adresse mehr den Server. Beide sind Variable Fonts:
   eine Datei deckt den ganzen Gewichtsbereich 400 bis 700 ab.
   Der Bereich ist bewusst auf die tatsaechlich genutzten Gewichte begrenzt.
   font-display: swap haelt den Text sofort lesbar, wie zuvor bei Google. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Surfaces */
  --paper: #f8f4eb;
  --paper-2: #f1eadc;
  --paper-3: #e8ddc8;
  --ink: #1d1d1a;
  --ink-2: #2d2c28;
  --ink-soft: #66625b;

  /* Signature accent, aged brass gold, pulled from the brand's actual paint work */
  --clay: #b58a2f;
  --clay-dark: #8b671f;
  --clay-light: #d8b96d;
  --clay-wash: #f3e7c8;

  --line: rgba(29, 29, 26, 0.12);
  --line-on-dark: rgba(248, 244, 235, 0.17);

  --shadow-sm: 0 1px 2px rgba(33, 22, 14, 0.06), 0 1px 1px rgba(33, 22, 14, 0.04);
  --shadow-md: 0 12px 28px -12px rgba(33, 22, 14, 0.28);
  --shadow-lg: 0 30px 60px -20px rgba(33, 22, 14, 0.35);

  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 14px;

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* Type scale — one weight per role, kept deliberately narrow.
     Display headlines sit at 500: Cormorant reads editorial at medium and
     turns blunt at 600 once it is set large. 600 stays reserved for the small
     display details (numerals, badges) that need the extra body. */
  --w-body: 400;
  --w-display: 500;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;

  --container: 1264px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;

  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, video, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--w-body);
  line-height: 1.65;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fixed grain overlay for tactile depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s);
  z-index: 999;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

/* ---------- Typography ---------- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: 1.08;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--font-body);
  font-weight: var(--w-semi);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
em { font-style: italic; font-weight: inherit; color: var(--clay); }
h1 em, h2 em, .display-1 em, .display-2 em, .display-3 em { font-family: var(--font-display); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: var(--w-semi);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clay-dark);
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--clay);
  transform: rotate(45deg);
  flex-shrink: 0;
}
[data-dark] .eyebrow { color: var(--clay-light); }

.display-1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw + 0.5rem, 6.1rem);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.display-2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.9vw + 0.5rem, 4rem);
  font-weight: var(--w-display);
  line-height: 1.09;
  letter-spacing: -0.011em;
}
.display-3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.7vw + 1rem, 2.4rem);
  font-weight: var(--w-display);
  line-height: 1.15;
  letter-spacing: -0.008em;
}
.lede {
  font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.16rem);
  color: var(--ink-soft);
  max-width: 42ch;
  line-height: 1.7;
}
p { max-width: 62ch; line-height: 1.7; }
.tabular { font-variant-numeric: tabular-nums; }

/* Cormorant defaults to old-style figures — force lining figures wherever
   numerals carry meaning (stats, ratings, counts), otherwise "15+" reads as "I5+". */
.hero-stats div strong,
.rating-card strong,
.reviews-summary__score strong,
.about-facts strong,
.about-media .badge strong,
.step-num,
.trust-item__num,
.awards-score strong,
.hero-proof strong,
.google-reviews__summary > strong,
.google-rating-panel__score strong,
.review-slide blockquote,
.google-review-card blockquote,
.project-head h3,
.room-meta strong,
h1, h2,
.display-1, .display-2, .display-3,
.quote-card p.q,
.awards-copy h3,
.tabular {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}


/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: var(--w-semi);
  letter-spacing: 0;
  border-radius: 999px;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(128%) rotate(2deg) scale(1.3);
  transition: transform var(--dur) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0) rotate(0) scale(1); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--clay);
  color: var(--paper);
}
.btn-primary::before { background: var(--paper); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--clay-dark); }
.btn-primary:hover { box-shadow: inset 0 0 0 1px rgba(169,130,47,0.35); }

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--paper); border-color: var(--ink); }

[data-dark] .btn-ghost { border-color: var(--line-on-dark); color: var(--paper); }
[data-dark] .btn-ghost::before { background: var(--paper); }
[data-dark] .btn-ghost:hover { color: var(--ink); }

.btn-icon {
  width: 1.4em;
  height: 1.4em;
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn-icon { transform: translate(2px, -2px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  font-size: 0.95rem;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ease);
}
.text-link:hover { background-size: 100% 1px; }
.text-link svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: 0.85rem 0;
  background: rgba(246, 241, 231, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-header.is-solid {
  padding: 0.65rem 0;
  box-shadow: 0 4px 24px -10px rgba(33, 29, 26, 0.22);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.brand img { width: 38px; height: 38px; }
.brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.22rem);
  font-weight: var(--w-semi);
  letter-spacing: 0.005em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
}
.brand-name span {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 400;
  color: var(--clay-dark);
  letter-spacing: 0.02em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.28rem;
  border-radius: 999px;
  background: rgba(29, 29, 26, 0.05);
  border: 1px solid rgba(29, 29, 26, 0.05);
}
.main-nav a {
  padding: 0.48rem clamp(0.75rem, 1.1vw, 1.05rem);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: var(--w-medium);
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.main-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.62); }
.main-nav a[aria-current='true'] {
  background: var(--paper);
  color: var(--clay-dark);
  box-shadow: var(--shadow-sm);
}

.header-actions { display: flex; align-items: center; gap: 1.1rem; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.header-phone svg { width: 15px; height: 15px; color: var(--clay); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(7.5rem, 8vw + 4rem, 11rem);
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
  background: var(--ink);
  color: var(--paper);
}
.hero-visual { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-visual picture { display: block; width: 100%; height: 100%; }
.hero-visual img {
  position: relative;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  animation: hero-zoom 12s var(--ease) forwards;
}
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-visual img { animation: none; transform: none; } }
.hero-visual::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(33,29,26,0.97) 0%,
    rgba(33,29,26,0.94) 22%,
    rgba(33,29,26,0.86) 38%,
    rgba(33,29,26,0.62) 52%,
    rgba(33,29,26,0.32) 68%,
    rgba(33,29,26,0.08) 86%,
    rgba(33,29,26,0) 100%);
}
.hero-visual::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(33,29,26,0.24) 0%, rgba(33,29,26,0.04) 40%, rgba(33,29,26,0.3) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

/* ---------- Soft scrim behind hero copy (smooth transparency fade) ---------- */
/* ---------- Hero copy sits left, no local scrim (handled by the visual gradient) ---------- */
.hero .wrap { max-width: 1720px; }
.hero-copy-col { position: relative; }
.hero h1 { text-shadow: 0 2px 24px rgba(33,29,26,0.5); }
.hero h1 {
  font-size: clamp(2.5rem, 3.2vw + 1.3rem, 4.6rem);
  letter-spacing: -0.015em;
  color: var(--paper);
}
.hero h1 .line { display: block; }
.hero h1 em { color: var(--clay-light); }
.hero-lead { color: rgba(246,241,231,0.76); font-size: 1.08rem; margin-top: 1.5rem; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.hero-cta .btn-ghost {
  border-color: rgba(246,241,231,0.45);
  background: rgba(33,29,26,0.28);
  backdrop-filter: blur(4px);
}
.hero-cta .btn-ghost:hover { background: transparent; }
.hero-stats {
  display: flex;
  gap: 0;
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
}
.hero-stats > div {
  padding-right: clamp(1.8rem, 3vw, 3rem);
  margin-right: clamp(1.8rem, 3vw, 3rem);
  border-right: 1px solid var(--line-on-dark);
}
.hero-stats > div:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.hero-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: clamp(1.85rem, 1.2vw + 1.4rem, 2.5rem);
  line-height: 1;
  color: var(--clay-light);
  margin-bottom: 0.4rem;
}
.hero-stats div span {
  display: block;
  font-size: 0.72rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246,241,231,0.55);
}

.hero-chip {
  position: absolute;
  left: clamp(1.2rem, 3vw, 2.5rem);
  bottom: clamp(1.2rem, 3vw, 2.5rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: rgba(33,29,26,0.55);
  border: 1px solid rgba(246,241,231,0.18);
  backdrop-filter: blur(8px);
  color: rgba(246,241,231,0.88);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hero-chip .chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clay-light);
  box-shadow: 0 0 0 0 rgba(211,171,95,0.6);
  animation: chip-pulse 2.4s ease-out infinite;
}
@keyframes chip-pulse {
  0% { box-shadow: 0 0 0 0 rgba(211,171,95,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(211,171,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(211,171,95,0); }
}
@media (max-width: 860px) { .hero-chip { display: none; } }

.rating-card {
  position: absolute;
  right: clamp(1.2rem, 3vw, 2.5rem);
  bottom: clamp(1.2rem, 3vw, 2.5rem);
  z-index: 2;
  background: var(--paper);
  color: var(--ink);
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.rating-card strong { font-family: var(--font-display); font-weight: var(--w-semi); font-size: 2.15rem; color: var(--clay-dark); }
.rating-card .stars { color: var(--clay); letter-spacing: 1px; font-size: 0.85rem; }
.rating-card small { display: block; color: var(--ink-soft); font-size: 0.72rem; max-width: 12ch; }

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.trust-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-track {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  width: max-content;
  animation: trust-scroll 60s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem clamp(1.5rem, 2.8vw, 2.6rem);
  white-space: nowrap;
  flex-shrink: 0;
}
.trust-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.12);
}
.trust-item__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  flex-shrink: 0;
}
.trust-item__icon svg { width: 17px; height: 17px; }
.trust-item__seal {
  width: 34px; height: 34px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  object-fit: contain;
  flex-shrink: 0;
}
.trust-item__num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--clay-light);
  flex-shrink: 0;
}
.trust-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.2;
}
.trust-item__body b {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--paper);
}
.trust-item__body small {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 244, 0.5);
}
.trust-stars {
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 1px;
  color: var(--clay-light);
}
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
  .trust-marquee {
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: auto;
  }
}

/* ---------- Section headers ---------- */
.section-pad { padding-block: clamp(3.8rem, 6.5vw, 6.4rem); }
.section-head {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2.1rem, 3.8vw, 3.5rem);
}
.section-head .eyebrow { margin-bottom: 1rem; }

/* ---------- Intro / Philosophy ---------- */
.intro { background: var(--paper); }
.intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.intro-lead p { margin-top: 1.6rem; }
.pillars { display: flex; flex-direction: column; position: relative; }
.paint-track[data-reveal] { opacity: 1; transform: none; }
.paint-stroke {
  position: absolute;
  top: 0.4rem;
  /* An SVG is a replaced element: with top and bottom both set the browser
     ignores bottom and takes the height from the viewBox ratio instead.
     An explicit height is needed so the stroke really spans the track. */
  height: calc(100% - 0.2rem);
  left: 0.2rem;
  width: 3rem;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  clip-path: inset(0 0 100% 0);
}
.ps-body { fill: var(--clay); opacity: 0.18; }
.ps-bristle {
  fill: none;
  stroke: var(--clay-dark);
  stroke-width: 1.6;
  opacity: 0.16;
  stroke-linecap: round;
}
.paint-track.is-visible .paint-stroke {
  animation: brush-paint 1.9s cubic-bezier(.55,.05,.35,1) forwards;
}
@keyframes brush-paint {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 -2% 0); }
}

/* ---------- Paint roller that draws the stroke ---------- */
.paint-roller {
  position: absolute;
  top: 0.4rem;
  left: 1.7rem;
  width: 0; height: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
.paint-roller img {
  position: absolute;
  left: 0; top: 0;
  width: 150px;
  max-width: none;
  height: auto;
  /* anchor the roller cylinder exactly on the stroke */
  transform: translate(-83.75%, -50.33%);
  filter: drop-shadow(0 8px 14px rgba(33,29,26,0.22));
}
.paint-track.is-visible .paint-roller {
  animation: roller-run 1.9s cubic-bezier(.55,.05,.35,1) forwards;
}
.paint-track.is-visible .paint-roller img {
  animation: roller-wobble 0.42s ease-in-out 6;
}
@keyframes roller-run {
  0%   { opacity: 0; transform: translateY(-6px); }
  7%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--tip-end, 360px)); }
}
@keyframes roller-wobble {
  0%, 100% { transform: translate(-83.75%, -50.33%) rotate(-0.8deg); }
  50%      { transform: translate(-83.75%, -50.33%) rotate(0.8deg); }
}

.paint-tip {
  position: absolute;
  top: 0.4rem;
  left: calc(0.2rem + 1.5rem);
  width: 16px; height: 11px;
  border-radius: 50%;
  background: var(--clay);
  opacity: 0;
  transform: translate(-50%, 0);
  filter: blur(0.6px);
  z-index: 1;
}
.paint-track.is-visible .paint-tip {
  animation: brush-tip 1.9s cubic-bezier(.55,.05,.35,1) forwards;
}
@keyframes brush-tip {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  8% { opacity: 0.85; transform: translate(-50%, 8%) scale(1); }
  88% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-50%, var(--tip-end, 340px)) scale(0.85); }
}
/* the roller replaces the paint dot wherever there is room for it */
/* below 1081px the intro grid stacks and the handle would hit the page edge */
@media (min-width: 1081px) {
  .paint-tip { display: none; }
}
@media (max-width: 1080px) {
  .paint-roller { display: none; }
}

.pillar {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.pillars[data-reveal-group] > .pillar { transition-delay: calc(0.45s + var(--i, 0) * 0.45s); }
.pillar .pillar-num { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.pillar.is-visible .pillar-num { animation: badge-pop 0.6s var(--ease) both; }
@keyframes badge-pop {
  0% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(211,171,95,0.5); }
  60% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(211,171,95,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(211,171,95,0); }
}
@media (prefers-reduced-motion: reduce) {
  .paint-track.is-visible .paint-stroke { animation: none; clip-path: none; }
  .paint-track.is-visible .paint-tip { animation: none; opacity: 0; }
  .paint-track.is-visible .paint-roller { animation: none; opacity: 0; }
  .paint-track.is-visible .paint-roller img { animation: none; }
  .pillar.is-visible .pillar-num { animation: none; }
  .pillars[data-reveal-group] > .pillar { transition-delay: 0s; }
}
.pillars .pillar:last-child { border-bottom: 1px solid var(--line); }
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--clay-wash);
  color: var(--clay-dark);
  flex-shrink: 0;
}
.icon-badge svg { width: 1.3rem; height: 1.3rem; }
.icon-badge.on-dark { background: rgba(211,171,95,0.16); color: var(--clay-light); }
.pillar-num { width: 3rem; height: 3rem; }
.pillar h3 { font-size: 1.06rem; margin-bottom: 0.35rem; font-weight: var(--w-semi); font-family: var(--font-body); letter-spacing: -0.005em; }
.pillar p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Services ---------- */
.services { background: var(--paper-2); }
.service-row {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row.flip { grid-template-columns: 1.05fr 0.95fr; }
.service-row.flip .service-media { order: 2; }
.service-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-l);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-md);
}
.service-media picture { display: block; width: 100%; height: 100%; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.service-row:hover .service-media img { transform: scale(1.05); }
.service-index {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.service-index .icon-badge { width: 2.3rem; height: 2.3rem; }
.service-index .icon-badge svg { width: 1.1rem; height: 1.1rem; }
.service-copy h3 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.1rem); margin-bottom: 1rem; }
.service-copy p { color: var(--ink-soft); margin-bottom: 1.3rem; }
.service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.service-cta { margin-top: 0.4rem; }
.service-cta svg { width: 1em; height: 1em; }
select.is-prefilled {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(211,171,95,0.25);
  animation: field-pulse 1.4s var(--ease) 2;
}
@keyframes field-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(211,171,95,0.25); }
  50% { box-shadow: 0 0 0 7px rgba(211,171,95,0.05); }
}
.service-tags > span:not(.sweep-lane) {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
}

/* ---------- Color consult ---------- */
.consult {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.consult-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.consult-copy .eyebrow { margin-bottom: 1.1rem; }
.consult h2 {
  font-size: clamp(2.2rem, 3vw + 0.5rem, 3.2rem);
  line-height: 1.06;
  margin: 0 0 1.3rem;
}
.consult-lede {
  max-width: 42ch;
  margin: 0 0 2rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(246,241,231,0.7);
}

.consult-points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-on-dark);
}
.consult-points li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.consult-points h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--w-semi);
  letter-spacing: 0.005em;
  color: var(--paper);
}
.consult-points p {
  margin: 0.3rem 0 0;
  max-width: 44ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(246,241,231,0.58);
}

.consult-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-top: 2.4rem;
}
.consult-note {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(246,241,231,0.45);
}

/* ---------- Room preview: swatch tints the real wall ---------- */
.consult-visual { min-width: 0; }
.room-preview {
  position: relative;
  margin: 0;
  aspect-ratio: 1291 / 968;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--ink-2, #2a2823);
  border: 1px solid var(--line-on-dark);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.65);
}
.room-layer {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
}
.room-layer picture { display: block; height: 100%; }
.room-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-layer.is-current { clip-path: inset(0 0 0 0); z-index: 1; }
.room-layer.is-entering {
  z-index: 2;
  animation: coat-wipe var(--paint-dur, 950ms) cubic-bezier(.42,.03,.32,1) forwards;
}
@keyframes coat-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.room-roller {
  position: absolute;
  top: 46%;
  left: 0;
  width: 26%;
  max-width: none;
  height: auto;
  opacity: 0;
  z-index: 3;
  transform: translate(-9.42%, -49.86%);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  pointer-events: none;
}
.room-preview.is-painting .room-roller {
  animation: roller-across var(--paint-dur, 950ms) cubic-bezier(.42,.03,.32,1) forwards;
}
.room-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 2.4rem 1.1rem 0.85rem;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(246,241,231,0.85);
  background: linear-gradient(to top, rgba(12,11,10,0.72), transparent);
}

.swatch-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.4rem;
}
.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.swatch {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.35s var(--ease);
}
.swatch-chip {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sw);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  transition: box-shadow 0.35s var(--ease);
}
.swatch:hover { transform: translateY(-3px); }
.swatch:hover .swatch-chip { box-shadow: inset 0 0 0 1px rgba(246,241,231,0.35); }
.swatch[aria-pressed='true'] .swatch-chip {
  box-shadow: inset 0 0 0 1px rgba(246,241,231,0.45), 0 0 0 2px var(--ink), 0 0 0 3px var(--clay-light);
}
.swatch-tip {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  white-space: nowrap;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-s);
  background: rgba(20,18,16,0.92);
  border: 1px solid var(--line-on-dark);
  color: var(--paper);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 4;
}
.swatch:hover .swatch-tip, .swatch:focus-visible .swatch-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes roller-across {
  0%   { opacity: 0; left: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; left: 100%; }
}

.room-meta { margin: 0; max-width: none; text-align: right; }
.room-meta strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: 1.3rem;
  color: var(--paper);
  line-height: 1.2;
}
.room-meta span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(246,241,231,0.6);
}
.room-meta.is-swapping strong,
.room-meta.is-swapping span { opacity: 0; }
.room-meta strong,
.room-meta span { transition: opacity 0.25s var(--ease); }

@media (max-width: 620px) {
  .swatch-bar { display: block; }
  .swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
  .swatch { width: 100%; height: auto; aspect-ratio: 1; }
  .swatch-tip { display: none; }
  .room-meta { text-align: left; margin-top: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .room-layer.is-entering,
  .room-preview.is-painting .room-roller { animation: none; }
  .room-roller { display: none; }
}

/* ---------- Video showcase ---------- */
.video-section { background: var(--paper-2); overflow: hidden; }
.video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 396px);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.video-copy { max-width: 34rem; }
.video-copy h2 { font-size: clamp(2.3rem, 3.4vw + 0.5rem, 3.6rem); margin-bottom: 1.2rem; }
.video-copy h2 em { color: var(--clay-dark); font-style: italic; }
.video-copy p { color: var(--ink-soft); margin-bottom: 1.7rem; max-width: 44ch; }

/* ul[class] resets the margin, so this needs the element to win on specificity */
ul.video-tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
/* the roller sweeps over the row and the tags appear in its wake,
   same choreography as the service rows on Leistungen */
.video-tags li:not(.sweep-lane) { opacity: 0; transform: translateY(4px); }
.video-tags.is-swept li:not(.sweep-lane) { animation: tag-appear 0.45s var(--ease) forwards; }
.video-tags.is-swept li:nth-of-type(1) { animation-delay: 0.30s; }
.video-tags.is-swept li:nth-of-type(2) { animation-delay: 0.52s; }
.video-tags.is-swept li:nth-of-type(3) { animation-delay: 0.74s; }
.video-tags .sweep-lane {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  opacity: 1;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  contain: layout;
}
.video-tags.is-swept .sweep-roller { animation: lane-sweep 1.35s cubic-bezier(.42,.04,.32,1) forwards; }
@media (prefers-reduced-motion: reduce) {
  .video-tags .sweep-lane { display: none; }
  .video-tags li:not(.sweep-lane) { opacity: 1; transform: none; animation: none; }
}

.video-tags li {
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(29,29,26,0.11);
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.3;
}

.video-social {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.25rem 0.7rem 0.7rem;
  border: 1px solid rgba(29,29,26,0.11);
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  color: var(--ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.video-social:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(181,138,47,0.4); }
.video-social__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--clay-wash);
  color: var(--clay-dark);
}
.video-social__icon svg { width: 20px; height: 20px; }
.video-social__text strong { display: block; font-size: 0.9rem; font-weight: var(--w-semi); line-height: 1.2; }
.video-social__text small { display: block; margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.75rem; }
.video-social__arrow { width: 16px; height: 16px; flex-shrink: 0; color: var(--clay-dark); transition: transform 0.3s var(--ease); }
.video-social:hover .video-social__arrow { transform: translate(2px, -2px); }

.video-stage { position: relative; justify-self: center; width: 100%; max-width: 356px; }

/* ---------- iPhone mockup that holds the reel ---------- */
.phone {
  position: relative;
  width: 100%;
  padding: 11px;
  border-radius: 54px;
  /* titanium rail: light catches the left and right edges */
  background: linear-gradient(150deg, #6d6a63 0%, #2a2926 18%, #4a4842 50%, #24231f 82%, #6d6a63 100%);
  box-shadow: var(--shadow-lg), 0 2px 3px rgba(255,255,255,0.22) inset, 0 -2px 3px rgba(0,0,0,0.5) inset;
}
.phone__screen {
  position: relative;
  border-radius: 44px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 2px #121211;
}
.phone__island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: 26px;
  border-radius: 999px;
  background: #08080a;
  z-index: 3;
  pointer-events: none;
}
.phone__btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #5c5a54, #2c2b27);
  pointer-events: none;
}
.phone__btn--silent { left: -3px; top: 17%; height: 30px; }
.phone__btn--up     { left: -3px; top: 25%; height: 52px; }
.phone__btn--down   { left: -3px; top: 36%; height: 52px; }
.phone__btn--power  { right: -3px; top: 30%; height: 78px; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/19.5;
  overflow: hidden;
  background: #000;
}
.video-caption {
  position: relative;
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-align: center;
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-frame__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  border: 0; background: rgba(0,0,0,0.28);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.video-frame__play:hover { background: rgba(0,0,0,0.14); }
.video-frame__play span {
  display: grid; width: 60px; height: 60px; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  transition: transform 0.3s var(--ease);
}
.video-frame__play:hover span { transform: scale(1.08); }
.video-frame__play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--ink); }
.video-frame.is-playing .video-frame__play { display: none; }
@media (max-width: 860px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-copy { max-width: none; }
  .video-stage { max-width: 320px; margin-top: 2rem; }
}

/* ---------- Before / After ---------- */
.ba { background: var(--paper-2); }
.ba-frame {
  position: relative;
  aspect-ratio: 1200/899;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: 900px;
  margin-inline: auto;
  user-select: none;
  touch-action: pan-y;
  background: var(--ink);
}
.ba-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.ba-after-picture { position: absolute; inset: 0; z-index: 1; }
.ba-after-picture picture,
.ba-before-wrap picture { display: block; width: 100%; height: 100%; }
.ba-after { z-index: 1; }
.ba-before-wrap {
  position: absolute; inset: 0;
  width: 55%;
  overflow: hidden;
  z-index: 2;
}
.ba-before-wrap img { width: var(--ba-w, 900px); height: 100%; max-width: none; object-fit: contain; }
.ba-tag { position: absolute; top: 1rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.68rem; font-weight: var(--w-semi); letter-spacing: 0.09em; text-transform: uppercase; z-index: 3; }
.ba-tag.before { left: 1rem; background: rgba(33,29,26,0.75); color: var(--paper); }
.ba-tag.after { right: 1rem; background: var(--clay); color: var(--paper); }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 55%;
  width: 2px;
  background: linear-gradient(180deg, rgba(246,241,231,0.95), rgba(246,241,231,0.55) 50%, rgba(246,241,231,0.95));
  z-index: 4;
  cursor: ew-resize;
  transform: translateX(-50%);
  touch-action: none;
}
.ba-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--clay);
  box-shadow: 0 6px 22px -6px rgba(33,22,14,0.55), 0 0 0 6px rgba(246,241,231,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay-dark);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ba-knob svg { width: 22px; height: 22px; }
.ba-handle:hover .ba-knob,
.ba-handle:focus-visible .ba-knob {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 8px 26px -6px rgba(33,22,14,0.6), 0 0 0 9px rgba(211,171,95,0.22);
}
.ba-handle:active { cursor: grabbing; }

.ba-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.ba-tab {
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all 0.3s var(--ease);
}
.ba-tab:hover { border-color: var(--clay); color: var(--clay-dark); }
.ba-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-md);
}

.ba-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.7rem auto 0;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.3s var(--ease);
}
.ba-caption.is-switching { opacity: 0; }
.ba-caption-mark { color: var(--clay); font-size: 0.5rem; flex-shrink: 0; }
@media (max-width: 620px) {
  .ba-caption { border-radius: var(--radius-m); padding: 0.7rem 1rem; font-size: 0.8rem; }
}

/* ---------- Testimonials ---------- */
.wall { background: var(--paper-2); }
.wall-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.quote-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 2.5vw, 2.2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(169,130,47,0.3);
}
.quote-card.large { grid-column: span 4; }
.quote-card.small { grid-column: span 2; }
.quote-card.full { grid-column: span 6; }
.quote-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.quote-stars { color: var(--clay); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 0; }
.quote-mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--clay);
  opacity: 0.22;
  user-select: none;
}
.quote-card p.q { font-family: var(--font-display); font-size: clamp(1.22rem, 0.7vw + 1rem, 1.62rem); font-weight: var(--w-medium); line-height: 1.4; margin-bottom: 1.5rem; max-width: none; }
.quote-card.small p.q { font-size: 1rem; }
.quote-meta { display: flex; align-items: center; gap: 0.8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.quote-avatar {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--clay-wash);
  color: var(--clay-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--w-semi); font-size: 1.05rem;
  flex-shrink: 0;
}
.quote-meta strong { display: block; font-size: 0.9rem; }
.quote-meta span { font-size: 0.78rem; color: var(--ink-soft); }
.quote-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--clay-dark);
}
.quote-verified svg { width: 13px; height: 13px; flex-shrink: 0; }
.quote-verified:hover { color: var(--clay); }

/* Google rating summary strip */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
  flex-wrap: wrap;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
  padding: 1.1rem clamp(1.2rem, 2.5vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  width: fit-content;
  max-width: 100%;
}
.reviews-summary__score { display: flex; align-items: center; gap: 0.85rem; }
.reviews-summary__score strong { font-family: var(--font-display); font-weight: var(--w-semi); font-size: 2.4rem; color: var(--clay-dark); line-height: 1; }
.reviews-summary__score .stars { color: var(--clay); letter-spacing: 2px; font-size: 0.9rem; }
.reviews-summary__score small { display: block; color: var(--ink-soft); font-size: 0.76rem; margin-top: 0.15rem; }
.reviews-summary__divider { width: 1px; align-self: stretch; background: var(--line); }
.reviews-summary__note { font-size: 0.82rem; color: var(--ink-soft); max-width: 34ch; }
.reviews-summary__link {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--clay-dark);
  font-weight: var(--w-semi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.reviews-summary__link:hover { color: var(--clay); }
@media (max-width: 620px) {
  .reviews-summary__divider { display: none; }
}

/* ---------- Google review carousel ---------- */
.reviews-showcase {
  display: grid;
  grid-template-columns: minmax(245px, 0.72fr) minmax(0, 1.65fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-l) + 4px);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.google-rating-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.6rem, 3.2vw, 2.7rem);
  border-right: 1px solid var(--line);
  background: linear-gradient(145deg, #fffdf8 0%, var(--clay-wash) 140%);
}
.google-rating-panel__brand { display: flex; align-items: center; gap: 0.65rem; font-weight: var(--w-semi); font-size: 0.88rem; }
.google-rating-panel__brand img { width: 24px; height: 24px; }
.google-rating-panel__score { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1.35rem; }
.google-rating-panel__score strong { font-family: var(--font-display); font-size: clamp(3.4rem, 5vw, 4.8rem); font-weight: var(--w-semi); line-height: 0.85; color: var(--ink); }
.google-rating-panel__score span { color: var(--ink-soft); font-size: 0.8rem; }
.google-rating-panel__stars,
.review-slide__stars { color: #e2a529; letter-spacing: 0.13em; }
.google-rating-panel__stars { margin-top: 0.7rem; font-size: 1rem; }
.google-rating-panel p { margin-top: 0.85rem; color: var(--ink-soft); font-size: 0.82rem; }
.google-rating-panel .text-link { margin-top: 1.3rem; width: fit-content; font-size: 0.83rem; }
.google-rating-panel small { display: block; margin-top: 1rem; color: var(--ink-soft); font-size: 0.67rem; }
.reviews-carousel { min-width: 0; display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2.2rem); }
.reviews-carousel__viewport { min-width: 0; overflow: hidden; border-radius: var(--radius-m); touch-action: pan-y; }
.reviews-carousel__viewport:focus-visible { outline-offset: 4px; }
.reviews-carousel__track { display: flex; transition: transform 0.7s var(--ease); will-change: transform; }
.review-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; padding: clamp(0.5rem, 1.5vw, 1rem); }
.review-slide__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-slide__stars { font-size: 0.88rem; }
.review-slide__source { padding: 0.28rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 0.67rem; font-weight: var(--w-semi); }
.review-slide blockquote { margin: clamp(1.5rem, 3vw, 2.2rem) 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: var(--w-medium); line-height: 1.2; max-width: 25ch; }
.review-author { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.review-author__avatar { width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--clay-wash); color: var(--clay-dark); font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--w-semi); }
.review-author strong,
.review-author span { display: block; }
.review-author strong { font-size: 0.88rem; }
.review-author div > span { margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.72rem; }
.review-original { width: fit-content; margin-top: 1rem; color: var(--clay-dark); font-size: 0.74rem; font-weight: var(--w-semi); text-decoration: underline; text-underline-offset: 3px; }
.review-original:hover { color: var(--clay); }
.reviews-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.reviews-carousel__arrows { display: flex; gap: 0.55rem; }
.reviews-carousel__arrows button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.reviews-carousel__arrows button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.reviews-carousel__dots { display: flex; align-items: center; gap: 0.45rem; }
.reviews-carousel__dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: rgba(33,29,26,0.2); transition: width 0.3s var(--ease), border-radius 0.3s var(--ease), background 0.3s var(--ease); }
.reviews-carousel__dots button[aria-current="true"] { width: 24px; border-radius: 999px; background: var(--clay); }
.reviews-project-link { margin-top: 1.5rem; }

@media (max-width: 760px) {
  .reviews-showcase { grid-template-columns: 1fr; }
  .google-rating-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .google-rating-panel__score strong { font-size: 3.3rem; }
  .review-slide blockquote { font-size: clamp(1.55rem, 7vw, 2rem); }
}

/* ---------- About ---------- */
.about { background: var(--paper); }
.about-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.about-media { position: relative; }
.about-media .frame {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}
.about-media .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.about-media .frame picture { display: block; width: 100%; height: 100%; }
.about-media .badge {
  position: absolute;
  bottom: -1.4rem; left: -1.4rem;
  background: var(--clay);
  color: var(--paper);
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
  max-width: 190px;
}
.about-media .badge strong { display: block; font-family: var(--font-display); font-weight: var(--w-semi); font-size: 1.95rem; }
.about-media .badge span { font-size: 0.78rem; opacity: 0.85; }
.about-copy p { color: var(--ink-soft); margin-bottom: 1.2rem; }
.about-signature { font-family: var(--font-display); font-style: italic; font-weight: var(--w-medium); font-size: 1.65rem; margin-top: 1.6rem; color: var(--ink); }
.about-signature span { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.3rem; }
.about-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 2rem; padding-top: 1.7rem; border-top: 1px solid var(--line); }
.about-facts > div { padding: 0 clamp(1.3rem, 2.4vw, 2.2rem); border-right: 1px solid var(--line); }
.about-facts > div:first-child { padding-left: 0; }
.about-facts > div:last-child { border-right: 0; padding-right: 0; }
.about-facts strong { display: block; font-family: var(--font-display); font-weight: var(--w-semi); font-size: clamp(1.9rem, 1.2vw + 1.5rem, 2.6rem); line-height: 1; color: var(--clay-dark); margin-bottom: 0.45rem; }
.about-facts span { display: block; font-size: 0.72rem; font-weight: var(--w-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Process ---------- */
.process { background: var(--paper); }
/* The services block above is a row of icon cards, so the process is drawn as
   one rail running under the four headings, filling with paint from left to
   right. The section shows the job progressing instead of listing it, and it
   shares no shape with the block above: no boxes, no icons, no numbers. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: clamp(2.2rem, 3.4vw, 3rem);
  margin-top: clamp(2rem, 3.4vw, 3.4rem);
}
.step {
  display: grid;
  /* headline block flexes so every rail lands on the same line */
  grid-template-rows: 1fr auto auto;
}
/* the columns carry no gap, the rail has to run unbroken across the row, so the
   text carries its own right-hand inset instead */
.step-top, .step-body { padding-right: clamp(1.4rem, 3.2vw, 3.2rem); }
.step-top { display: flex; align-items: flex-end; padding-bottom: 1.1rem; }
.step h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(1.35rem, 1vw + 0.95rem, 1.85rem);
  line-height: 1.1;
  margin: 0;
}

.step-rail {
  position: relative;
  height: 4px;
  background: var(--seg);
  transition: background 0.45s var(--ease);
}
.steps > .step:first-child .step-rail { border-radius: 2px 0 0 2px; }
.steps > .step:last-child .step-rail { border-radius: 0 2px 2px 0; }
/* marker sitting on the rail where each step begins */
.step-rail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 4px solid var(--dot);
  border-radius: 50%;
  background: var(--paper);
  transform: translateY(-50%);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.step:hover .step-rail { background: var(--clay); }
.step:hover .step-rail::after { border-color: var(--clay-dark); transform: translateY(-50%) scale(1.2); }

.step-body { padding-top: 1.5rem; }
.step-meta {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.66rem;
  font-weight: var(--w-semi);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay-dark);
}
.step p { color: var(--ink-soft); font-size: 0.89rem; line-height: 1.6; }

/* the paint fills in as the steps progress */
.steps > .step:nth-of-type(1) { --i: 0; --seg: rgba(181, 138, 47, 0.18); --dot: rgba(181, 138, 47, 0.34); }
.steps > .step:nth-of-type(2) { --i: 1; --seg: rgba(181, 138, 47, 0.38); --dot: rgba(181, 138, 47, 0.56); }
.steps > .step:nth-of-type(3) { --i: 2; --seg: rgba(181, 138, 47, 0.62); --dot: rgba(181, 138, 47, 0.8); }
.steps > .step:nth-of-type(4) { --i: 3; --seg: var(--clay); --dot: var(--clay-dark); }
.steps[data-reveal-group] > .step { transition-delay: calc(0.15s + var(--i, 0) * 0.12s); }

@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two rails per row now, so the caps have to move to the row edges */
  .steps > .step:nth-of-type(3) .step-rail { border-radius: 2px 0 0 2px; }
  .steps > .step:nth-of-type(2) .step-rail { border-radius: 0 2px 2px 0; }
}
@media (max-width: 620px) {
  /* Untereinander gestapelt haengen die vier Balken zusammenhanglos in der Luft:
     jeder ist nur noch ein Strich ueber seinem Absatz und der Weg von der
     Anfrage bis zur Abnahme geht verloren. Als Karussell wird daraus wieder
     eine Strecke. Pro Wisch ein Schritt, der Balken laeuft ueber die volle
     Kartenbreite und wird von Schritt zu Schritt kraeftiger. Die angeschnittene
     naechste Karte zeigt ohne Hinweistext, dass es weitergeht. */
  .steps {
    display: flex;
    grid-template-columns: none;
    /* kein Abstand zwischen den Karten, sonst reisst die Schiene an jeder
       Kartenkante ab. Den Abstand traegt der Text selbst, wie auf dem Desktop. */
    gap: 0;
    /* aus dem Wrap ausbrechen, damit die Karten am Bildrand angeschnitten
       werden statt im Nichts zu enden */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step {
    flex: 0 0 78%;
    scroll-snap-align: start;
    /* Die Titelzeile bestimmt jetzt die Hoehe der Schiene, den Rest schluckt
       der Fliesstext darunter. So liegt jede Schiene auf derselben Linie,
       auch wenn die Beschreibungen unterschiedlich lang sind. */
    grid-template-rows: auto auto 1fr;
  }
  /* Die Karten 2 bis 4 stehen seitlich ausserhalb des Bildes und loesen den
     Reveal-Observer nie aus. Im Karussell zeigt sie deshalb der Wisch, nicht
     das Scrollen, und sie starten sichtbar. */
  .steps > .step[data-reveal] { opacity: 1; transform: none; }
  .step-top { align-items: flex-start; padding-bottom: 0.9rem; }
  .step-top, .step-body { padding-right: 1.35rem; }
  /* Nur der erste und der letzte Schritt bekommen eine runde Kappe, dazwischen
     stossen die Segmente stumpf aneinander und ergeben eine durchgehende Linie.
     Die Kappen aus dem Zweispalter darueber muessen dafuer wieder weg. */
  .steps > .step:nth-of-type(2) .step-rail,
  .steps > .step:nth-of-type(3) .step-rail { border-radius: 0; }
  .step-body { padding-top: 1.2rem; }
}

/* ---------- Roller sweeps across the tag row and reveals the tags ---------- */
.service-row { position: relative; }
.service-tags { position: relative; min-height: 2.1rem; }

/* tags wait for the roller to pass over them */
.service-row .service-tags > span:not(.sweep-lane) {
  opacity: 0;
  transform: translateY(4px);
}
.service-row.is-swept .service-tags > span:not(.sweep-lane) {
  animation: tag-appear 0.45s var(--ease) forwards;
}
.service-row.is-swept .service-tags > span:nth-of-type(1) { animation-delay: 0.30s; }
.service-row.is-swept .service-tags > span:nth-of-type(2) { animation-delay: 0.52s; }
.service-row.is-swept .service-tags > span:nth-of-type(3) { animation-delay: 0.74s; }
.service-row.is-swept .service-tags > span:nth-of-type(4) { animation-delay: 0.96s; }
/* flipped rows are painted from the right, so the tags appear in reverse */
.service-row.flip.is-swept .service-tags > span:nth-of-type(1) { animation-delay: 0.96s; }
.service-row.flip.is-swept .service-tags > span:nth-of-type(2) { animation-delay: 0.74s; }
.service-row.flip.is-swept .service-tags > span:nth-of-type(3) { animation-delay: 0.52s; }
.service-row.flip.is-swept .service-tags > span:nth-of-type(4) { animation-delay: 0.30s; }
@keyframes tag-appear { to { opacity: 1; transform: translateY(0); } }

.sweep-lane {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 0;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  contain: layout;
}
.service-copy { overflow-x: clip; }
/* Only the roller is shown, the painted line it used to draw is removed */
.sweep-wash { display: none; }
.sweep-roller {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  max-width: none;
  height: auto;
  opacity: 0;
  /* the cylinder (9.42% / 49.86% of the artwork) rides on the tag row */
  transform: translate(-9.42%, -49.86%);
  filter: drop-shadow(0 6px 12px rgba(33,29,26,0.25));
}
.service-row.is-swept .sweep-roller { animation: lane-sweep 1.35s cubic-bezier(.42,.04,.32,1) forwards; }
.service-row.flip.is-swept .sweep-roller { animation-name: lane-sweep-back; }

@keyframes lane-sweep {
  0%   { opacity: 0; left: 0; transform: translate(-9.42%, -49.86%); }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; left: 100%; transform: translate(-9.42%, -49.86%); }
}
@keyframes lane-sweep-back {
  0%   { opacity: 0; left: 100%; transform: translate(-9.42%, -49.86%) scaleX(-1); }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; left: 0; transform: translate(-9.42%, -49.86%) scaleX(-1); }
}
@media (max-width: 620px) { .sweep-roller { width: 74px; } }
@media (prefers-reduced-motion: reduce) {
  .sweep-lane { display: none; }
  .service-row .service-tags > span:not(.sweep-lane) { opacity: 1; transform: none; animation: none; }
}

/* ---------- Credentials (Diplome) ---------- */
.credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.2vw, 1.5rem); margin-top: 2rem; }
.credential-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.credential-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.credential-card__image { height: 260px; padding: 1.2rem; background: var(--paper-2); }
.credential-card__image picture { display: block; width: 100%; height: 100%; }
.credential-card__image img { width: 100%; height: 100%; object-fit: contain; }
.credential-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem; }
.credential-card__body > span { color: var(--clay-dark); font-size: 0.7rem; font-weight: var(--w-semi); letter-spacing: 0.08em; text-transform: uppercase; }
.credential-card__body h3 { margin: 0.6rem 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
.credential-card__body p { color: var(--ink-soft); font-size: 0.86rem; margin: 0; }
.credential-card__body b { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.76rem; font-weight: 600; color: var(--ink); }

/* ---------- Compact trust seals inside the about block ---------- */
.about-seals {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.about-seals__badges { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.about-seals__badges img {
  width: 64px;
  height: auto;
  display: block;
  transition: transform 0.4s var(--ease);
}
.about-seals:hover .about-seals__badges img { transform: translateY(-2px); }
.about-seals:hover .about-seals__badges img:last-child { transition-delay: 0.06s; }
.about-seals p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 40ch;
}
@media (max-width: 520px) {
  .about-seals { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

/* ---------- Ofri awards ---------- */
.awards {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
  padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.6rem, 3vw, 2.6rem);
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.awards-badges { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; padding: 0.2rem; }
.awards-badges img {
  width: clamp(90px, 8vw, 108px);
  height: auto;
  display: block;
  transition: transform 0.4s var(--ease);
}
.awards:hover .awards-badges img { transform: translateY(-3px); }
.awards:hover .awards-badges img:last-child { transition-delay: 0.06s; }
.awards-copy { min-width: 0; }
.awards-label {
  display: block;
  color: var(--clay-dark);
  font-size: 0.7rem;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.45rem;
}
.awards-copy h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1vw + 1rem, 1.75rem); font-weight: var(--w-display); line-height: 1.2; margin-bottom: 0.5rem; }
.awards-copy h3 em { color: var(--clay-dark); font-style: italic; }
.awards-copy p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; max-width: 56ch; }
.awards-score {
  text-align: center;
  padding-left: clamp(1.4rem, 3vw, 2.4rem);
  border-left: 1px solid var(--line);
  flex-shrink: 0;
}
.awards-score strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--clay-dark);
  font-variant-numeric: lining-nums;
}
.awards-score .stars { display: block; color: var(--clay); letter-spacing: 2px; font-size: 0.82rem; margin-top: 0.4rem; }
.awards-score small { display: block; margin-top: 0.35rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 900px) {
  .awards { grid-template-columns: auto 1fr; }
  .awards-score { grid-column: 1 / -1; text-align: left; padding-left: 0; padding-top: 1.2rem; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  /* Auf dem schmalen Bild kleben Siegel, Text und Note sonst alle am linken
     Rand und die Karte kippt optisch nach links. Auf einer Mittelachse steht
     sie ruhig und die beiden Siegel wirken als Paar statt als Anhaengsel. */
  .awards { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .awards-badges { justify-content: center; }
  .awards-copy p { max-width: 42ch; margin-inline: auto; }
  .awards-score { width: 100%; text-align: center; }
}

/* ---------- Community / Sponsoring ---------- */
.community { background: var(--paper); }
.community-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 1.6rem); }
.sponsor-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--paper-2);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.sponsor-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--clay), var(--clay-light));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.sponsor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(169,130,47,0.35);
}
.sponsor-card:hover::before { opacity: 1; }
.sponsor-logo {
  flex-shrink: 0;
  width: 84px; height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 6px solid #fff;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-md);
}
.sponsor-logo img,
.sponsor-card > img { width: 100%; height: 100%; object-fit: contain; padding: 0.4rem; }
.sponsor-card > img { width: 84px; height: 84px; flex-shrink: 0; background: var(--paper); border: 6px solid #fff; border-radius: var(--radius-s); box-shadow: var(--shadow-md); }
.sponsor-card span:not(.sponsor-logo) { display: block; color: var(--clay-dark); font-size: 0.7rem; font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: 0.08em; }
.sponsor-card h3 { font-size: 1.12rem; margin: 0.3rem 0 0.3rem; }
.sponsor-card p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 1080px) {
  .credentials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .sponsor-card { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- Contact ---------- */
.contact { background: var(--paper-2); }
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.contact-info h2 { margin-bottom: 1.2rem; }
.contact-info > p { color: var(--ink-soft); margin-bottom: 2rem; }
.contact-list { display: flex; flex-direction: column; gap: 1.3rem; margin-bottom: 2.2rem; }
.contact-list a, .contact-list address { display: flex; gap: 0.9rem; align-items: flex-start; font-style: normal; font-size: 0.96rem; }
.contact-list svg { width: 18px; height: 18px; color: var(--clay); margin-top: 2px; flex-shrink: 0; }
.social-row { display: flex; gap: 0.7rem; }
.social-row a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-row a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.social-row svg { width: 18px; height: 18px; }

.form-card {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-l);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
/* Honigtopf: liegt im Quelltext wie ein normales Feld, steht aber ausserhalb
   des sichtbaren Bereichs. Wer es ausfuellt, war kein Mensch. */
.form-trap {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-2); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  /* etwas flacher als zuvor, aber mit 46 px weiterhin klar ueber der
     44-px-Marke fuer eine bequeme Trefferflaeche auf dem Telefon */
  padding: 0.62em 1em;
  background: var(--paper);
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--clay);
  outline: none;
  box-shadow: 0 0 0 3px var(--clay-wash);
}
/* ---------- Leistungsart-Auswahl ----------
   Ohne appearance: none zeichnet jedes System sein eigenes Feld: macOS eine
   hohe Kapsel mit doppeltem Pfeil, Windows einen grauen Kasten. Damit passt
   das Feld nirgends zum Rest des Formulars. Hier bekommt es denselben Rahmen
   wie die Textfelder und einen eigenen, schlanken Pfeil.
   Die aufgeklappte Liste selbst zeichnet das Betriebssystem, an die kommt CSS
   nicht heran. Die Angaben zu option wirken deshalb nur dort, wo der Browser
   sie beachtet, sonst werden sie schlicht ignoriert. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  /* dieselbe Zeilenhoehe wie die Textfelder, sonst steht das Feld im Raster
     daneben sieben Pixel niedriger */
  padding-inline: 1em 2.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2366625b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 12px 8px;
  line-height: 1.65;
  cursor: pointer;
}
.field select option { font-size: 0.95rem; }
.field select option[value=""] { color: var(--ink-soft); }

.field textarea { resize: vertical; min-height: 110px; }
.field-error { font-size: 0.78rem; color: var(--clay-dark); min-height: 1.1em; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--clay-dark); }
.form-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.6rem; }
.form-status {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-m);
  font-size: 0.88rem;
  background: var(--clay-wash);
  color: var(--clay-dark);
  display: none;
}
.form-status.is-visible { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(246,241,231,0.85); }
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line-on-dark);
}
.footer-brand .brand-name { color: var(--paper); }
.footer-brand p { margin-top: 1rem; color: rgba(246,241,231,0.6); font-size: 0.9rem; max-width: 32ch; }
.footer-col h4 { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,241,231,0.5); margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { font-size: 0.92rem; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--clay-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.5rem;
  font-size: 0.8rem;
  color: rgba(246,241,231,0.45);
}
.footer-bottom .legal { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
/* Die Fusszeilen-Links sassen bei 21 px Hoehe und damit unter der 24-px-Marke
   aus WCAG 2.5.8. Der Text bleibt gleich gross, nur die Trefferflaeche waechst. */
.footer-bottom .legal a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-credit { color: rgba(246,241,231,0.4); transition: color var(--dur) var(--ease); }
.footer-credit:hover { color: var(--clay-light); }

/* WhatsApp entry in the contact list keeps the brand colour of the service */
.contact-list .contact-whatsapp svg { color: #25D366; }

/* ---------- WhatsApp-Schnellkontakt, nur auf dem Telefon ----------
   Auf dem Handy ist WhatsApp der kuerzeste Weg zu einer Anfrage, der Knopf
   liegt darum dauerhaft im Daumenbereich unten rechts. Auf dem Desktop bleibt
   er aus: dort gibt es keine WhatsApp-App und die Kontaktzeile reicht. */
.wa-fab { display: none; }
@media (max-width: 760px) {
  .wa-fab {
    position: fixed;
    right: var(--gutter);
    bottom: 1.1rem;
    /* ueber dem Seiteninhalt, aber unter dem Menue-Overlay und dem Cookie-Hinweis */
    z-index: 150;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s var(--ease);
  }
  .wa-fab svg { width: 29px; height: 29px; }
  .wa-fab:active { transform: scale(0.94); }
  /* Solange der Datenschutzhinweis unten liegt, rueckt der Knopf darueber,
     sonst verdeckt der eine den anderen. */
  body:has(.cookie-notice) .wa-fab { bottom: 9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
}

/* ---------- Reveal animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Simple page header (legal pages) ---------- */
.page-hero { background: var(--ink); color: var(--paper); padding-top: 10rem; padding-bottom: 4rem; }
.legal-body { padding-block: 4rem; }
.legal-body h2 { font-size: 1.5rem; margin-top: 2.4rem; margin-bottom: 0.8rem; }
.legal-body p, .legal-body li { color: var(--ink-soft); margin-bottom: 0.9rem; font-size: 0.96rem; }
.legal-body ul { padding-left: 1.3rem; list-style: disc; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .intro-grid, .consult-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 380px; }
  .section-head { grid-template-columns: 1fr; }
  .service-row, .service-row.flip { grid-template-columns: 1fr; }
  .service-row.flip .service-media { order: 0; }
  .quote-card.large, .quote-card.small, .quote-card.full { grid-column: span 6; }
  .community-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .main-nav, .header-phone { display: none; }
  .nav-toggle { display: flex; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .about-facts { grid-template-columns: 1fr 1fr; }
  .rating-card { position: relative; z-index: 2; right: auto; display: inline-flex; margin: 1.8rem var(--gutter) 0; }
  .hero-stats { flex-wrap: wrap; row-gap: 1.2rem; }
  .hero-visual img { object-position: center 45%; }
  .hero-visual::before {
    background: linear-gradient(180deg, rgba(33,29,26,0.9) 0%, rgba(33,29,26,0.8) 40%, rgba(33,29,26,0.72) 70%, rgba(33,29,26,0.66) 100%);
  }

  /* Swipeable card rows on small screens */
  .wall-grid, .credentials-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.4rem;
  }
  .wall-grid::-webkit-scrollbar, .credentials-grid::-webkit-scrollbar { display: none; }
  .quote-card, .credential-card { scroll-snap-align: start; scroll-snap-stop: always; }
  .quote-card.large, .quote-card.small, .quote-card.full { grid-column: auto; }
}

/* ---------- Subhero (interior page header) ---------- */
.subhero {
  position: relative;
  padding-top: clamp(8.5rem, 11vw, 11rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.subhero-media { position: absolute; inset: 0; opacity: 0.3; }
.subhero-media picture { display: block; width: 100%; height: 100%; }
.subhero-media img { width: 100%; height: 100%; object-fit: cover; }
.subhero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,29,26,0.55) 0%, rgba(33,29,26,0.72) 55%, var(--ink) 96%);
}
.subhero .wrap { position: relative; z-index: 1; max-width: 720px; }
.subhero-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(246,241,231,0.6);
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  margin-left: -0.7rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
  border-radius: 999px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.subhero-back svg { transition: transform var(--dur) var(--ease); }
.subhero-back:hover { color: var(--paper); background: rgba(246,241,231,0.08); }
.subhero-back:hover svg { transform: translateX(-2px); }
.subhero .eyebrow { display: block; margin-bottom: 1rem; }
.subhero h1 {
  font-size: clamp(2.4rem, 3.2vw + 1.2rem, 4.2rem);
  line-height: 1.04;
  color: var(--paper);
  max-width: 18ch;
}
.subhero p { color: rgba(246,241,231,0.72); margin-top: 1.4rem; font-size: 1.06rem; line-height: 1.65; max-width: 54ch; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 50%; right: clamp(-4rem, -2vw, -1rem);
  width: clamp(280px, 30vw, 420px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211,171,95,0.16), transparent 70%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem); max-width: 20ch; color: var(--paper); }
.cta-band h2 em { color: var(--clay-light); font-style: italic; }
.cta-copy { display: flex; align-items: center; gap: 1.5rem; flex: 1 1 420px; min-width: 0; }
.cta-avatar {
  width: 74px; height: 74px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 3px solid var(--clay);
  box-shadow: 0 0 0 5px rgba(211,171,95,0.15), var(--shadow-md);
  flex-shrink: 0;
}
.cta-copy p { margin-top: 0.6rem; color: rgba(246,241,231,0.68); font-size: 0.94rem; max-width: 42ch; }
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .cta-actions { margin-left: 0; justify-content: flex-start; }
}
@media (max-width: 620px) {
  .cta-copy { flex-direction: column; align-items: flex-start; }
}

/* ---------- Services teaser (home) ---------- */
.services-teaser-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.service-tile {
  background: var(--paper);
  padding: clamp(1.6rem, 2.5vw, 2.1rem) clamp(1.4rem, 2vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: background var(--dur) var(--ease);
}
.service-tile:hover { background: var(--paper-2); }
.service-tile .service-index { margin-bottom: 0.2rem; }
.service-tile .service-index .icon-badge { width: 2.4rem; height: 2.4rem; }
.service-tile h3 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-body); }
.service-tile p { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
.service-tile .text-link { margin-top: auto; font-size: 0.83rem; }

/* ---------- About preview (home) ---------- */
.about-preview-cta { margin-top: 1.8rem; }

/* ---------- Gallery grid (Referenzen) ---------- */
.project-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(3.2rem, 5.5vw, 5rem);
}
.project-block {
  padding-top: clamp(1.35rem, 2.4vw, 2rem);
  border-top: 1px solid var(--line);
}
.references-gallery.section-pad { padding-block: clamp(3.8rem, 6vw, 5.8rem); }
.project-head {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
.project-head > div { position: relative; }
.project-head h3 {
  position: relative;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.8rem);
  font-weight: var(--w-medium);
  line-height: 1;
}
.project-head p {
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(0.94rem, 1vw, 1.06rem);
}
.project-gallery {
  display: grid;
  gap: clamp(0.8rem, 1.5vw, 1.15rem);
}
.project-gallery--house {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, clamp(180px, 22vw, 285px));
}
.project-gallery--house .project-photo--lead { grid-column: 1 / 8; grid-row: 1 / 3; }
.project-gallery--house .project-photo:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.project-gallery--house .project-photo:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
.project-gallery--house .project-photo:nth-child(4) { grid-column: 1 / 7; grid-row: 3; }
.project-gallery--house .project-photo:nth-child(5) { grid-column: 7 / 13; grid-row: 3; }
.project-gallery--duo { grid-template-columns: repeat(2, 1fr); }
.project-gallery--duo .project-photo { aspect-ratio: 4 / 5; }
.project-photo {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.project-photo__button,
.project-photo picture { width: 100%; height: 100%; display: block; }
.project-photo__button { position: absolute; inset: 0; cursor: zoom-in; text-align: left; }
.project-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.project-photo:hover img { transform: scale(1.035); }
.project-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,17,14,0.66) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}
.project-photo figcaption {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0.9rem;
  z-index: 2;
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: var(--w-semi);
  pointer-events: none;
}
.project-photo__zoom {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 999px;
  background: rgba(33,29,26,0.62);
  backdrop-filter: blur(6px);
  color: var(--paper);
  font-size: 0.68rem;
  font-weight: var(--w-semi);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.project-photo:hover .project-photo__zoom,
.project-photo__button:focus-visible .project-photo__zoom { opacity: 1; transform: none; }
.project-action { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.project-inquiry { color: var(--clay-dark); font-size: 0.86rem; }

/* ---------- Fullscreen project gallery ---------- */
.project-lightbox {
  width: 100dvw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(20,17,14,0.97);
  color: var(--paper);
}
.project-lightbox::backdrop { background: rgba(20,17,14,0.82); backdrop-filter: blur(7px); }
.project-lightbox__inner { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 72px minmax(0,1fr) 72px; grid-template-rows: minmax(0,1fr) auto; align-items: center; padding: clamp(1rem, 3vw, 2.5rem); }
.project-lightbox__stage { min-width: 0; min-height: 0; width: 100%; height: 100%; display: grid; place-items: center; touch-action: pan-y; }
.project-lightbox__stage picture { display: contents; }
.project-lightbox__stage img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; border-radius: var(--radius-m); box-shadow: 0 24px 80px rgba(0,0,0,0.45); }
.project-lightbox__close,
.project-lightbox__nav { display: grid; place-items: center; border: 1px solid rgba(246,241,231,0.24); background: rgba(246,241,231,0.08); color: var(--paper); transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.project-lightbox__close:hover,
.project-lightbox__nav:hover { background: rgba(246,241,231,0.18); border-color: rgba(246,241,231,0.5); }
.project-lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 44px; height: 44px; border-radius: 50%; font-size: 1.55rem; line-height: 1; }
.project-lightbox__nav { width: 50px; height: 50px; justify-self: center; border-radius: 50%; font-size: 1.25rem; }
.project-lightbox__nav--prev { grid-column: 1; grid-row: 1; }
.project-lightbox__stage { grid-column: 2; grid-row: 1; }
.project-lightbox__nav--next { grid-column: 3; grid-row: 1; }
.project-lightbox__footer { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.9rem; color: rgba(246,241,231,0.78); font-size: 0.82rem; }
.project-lightbox__footer p { max-width: none; }
.project-lightbox__footer span { color: var(--clay-light); font-variant-numeric: tabular-nums; }
.cta-avatar-picture { display: block; width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.cta-avatar-picture .cta-avatar { width: 100%; height: 100%; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 2vw, 1.2rem);
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-sm);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,17,14,0.66) 0%, transparent 55%);
}
.gallery-item span {
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: 0.9rem;
  z-index: 1;
  color: var(--paper);
  font-size: 0.84rem;
  font-weight: 600;
}

/* ---------- Values grid (Über uns) ---------- */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 2rem; }
.value-card {
  position: relative;
  padding: 1.8rem 1.6rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.value-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.value-card:hover { background: var(--paper); transform: translateY(-3px); }
.value-card:hover::before { transform: scaleX(1); }
.value-card .icon-badge { transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.value-card:hover .icon-badge { background: var(--clay); color: var(--paper); }
.value-card .icon-badge { width: 2.6rem; height: 2.6rem; }
.value-card h3 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.1rem; }
.value-card p { font-size: 0.86rem; color: var(--ink-soft); }

@media (max-width: 1080px) {
  .services-teaser-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .services-teaser-grid, .gallery-grid, .values-grid { grid-template-columns: 1fr; }
  .project-head { grid-template-columns: 1fr; gap: 1rem; }
  .project-gallery--house {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .project-gallery--house .project-photo,
  .project-gallery--house .project-photo--lead {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .project-gallery--duo {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.4rem;
  }
  .project-gallery--duo::-webkit-scrollbar { display: none; }
  .project-gallery--duo .project-photo { scroll-snap-align: start; scroll-snap-stop: always; }
  .project-photo__zoom { opacity: 1; transform: none; }
  .project-action { justify-content: flex-start; margin-top: 1rem; }
  .project-lightbox__inner { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr) auto auto; gap: 0.75rem; padding: 3.8rem 1rem 1rem; }
  .project-lightbox__stage { grid-column: 1 / 3; grid-row: 1; }
  .project-lightbox__nav--prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .project-lightbox__nav--next { grid-column: 2; grid-row: 2; justify-self: end; }
  .project-lightbox__footer { grid-column: 1 / 3; grid-row: 3; }
  .project-lightbox__stage img { max-height: calc(100dvh - 11rem); }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mobile nav drawer ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 1.3rem var(--gutter) 2.5rem;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.mobile-nav-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.mobile-nav-close svg { width: 22px; height: 22px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.3rem; }
.mobile-nav a { font-family: var(--font-display); font-weight: var(--w-display); font-size: 2.4rem; line-height: 1.25; letter-spacing: -0.008em; padding: 0.45rem 0; display: block; }
.mobile-nav-foot { margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--line-on-dark); }
.mobile-nav-foot a { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.6rem; display: block; }

/* ---------- Mobile refinement ---------- */
.header-cta-label--short { display: none; }

@media (max-width: 620px) {
  :root { --gutter: 1.1rem; }

  body { font-size: 15px; }
  .section-pad { padding-block: 3.4rem; }
  .section-head { gap: 1rem; margin-bottom: 2rem; }
  .display-1 { font-size: clamp(2.5rem, 13vw, 3.25rem); }
  .display-2 { font-size: clamp(2.15rem, 10.5vw, 2.8rem); }
  .display-3 { font-size: clamp(1.6rem, 7.5vw, 2rem); }
  .lede { font-size: 0.98rem; line-height: 1.65; }

  .site-header { padding-block: 0.55rem; }
  .site-header.is-solid { padding-block: 0.45rem; }
  .site-header .wrap { gap: 0.55rem; padding-inline: 1rem; }
  .brand { gap: 0.45rem; min-width: 0; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: 0.96rem; }
  .brand-name span { font-size: 0.68rem; }
  .header-actions { gap: 0.4rem; margin-left: auto; }
  .header-actions .btn {
    min-height: 42px;
    padding: 0.7rem 0.85rem;
    gap: 0.35rem;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
  }
  .header-actions .btn-icon { width: 1.05rem; height: 1.05rem; }
  .header-cta-label--full { display: none; }
  .header-cta-label--short { display: inline; }
  .nav-toggle { width: 44px; height: 44px; flex-shrink: 0; }
  .nav-toggle svg { width: 24px; height: 24px; }

  .btn { min-height: 44px; max-width: 100%; justify-content: center; text-align: center; line-height: 1.2; }
  .hero { padding-top: 7rem; padding-bottom: 3.6rem; }
  .hero h1 { font-size: clamp(2.55rem, 12vw, 3.3rem); }
  .hero-lead { margin-top: 1.15rem; font-size: 0.98rem; }
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-top: 1.6rem; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; padding-top: 1.2rem; gap: 1rem; }
  .hero-stats > div { min-width: 0; margin: 0; padding: 0 0.8rem 0 0; border-right: 1px solid var(--line-on-dark); }
  .hero-stats > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .hero-stats div strong { font-size: 1.75rem; }
  .hero-stats div span { font-size: 0.6rem; }
  .rating-card { margin: 1.25rem var(--gutter) 0; padding: 0.9rem 1rem; }
  .trust-item { padding: 0.8rem 1.1rem; gap: 0.6rem; }
  .trust-item::after { height: 24px; }
  .trust-item__icon { width: 26px; height: 26px; }
  .trust-item__icon svg { width: 14px; height: 14px; }
  .trust-item__seal { width: 26px; height: 26px; padding: 2px; }
  .trust-item__num { font-size: 1.25rem; }
  .trust-item__body b { font-size: 0.78rem; }
  .trust-item__body small { font-size: 0.58rem; letter-spacing: 0.05em; }
  .trust-stars { font-size: 0.66rem; }

  .intro-grid { gap: 2rem; }
  .pillars { padding-top: 2.4rem; }
  .pillar { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.85rem; padding: 1.35rem 0; }
  .pillar p { font-size: 0.9rem; }
  .paint-tip { display: none; }
  .paint-roller {
    display: block;
    left: 1.7rem;
    right: auto;
    top: 0.4rem;
    width: 0;
    height: 0;
    opacity: 0;
    transform: none;
  }
  .paint-roller img {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: auto;
    transform: translate(-83.75%, -50.33%) rotate(-2deg);
    animation: none;
  }
  .paint-track.is-visible .paint-roller {
    animation: roller-run 1.9s cubic-bezier(.55,.05,.35,1) forwards;
  }
  .paint-track.is-visible .paint-roller img {
    animation: roller-wobble 0.42s ease-in-out 6;
  }

  .service-row { gap: 1.5rem; padding-block: 2.2rem; }
  .service-media { aspect-ratio: 4 / 3; }
  .service-tags { gap: 0.4rem; }
  .service-tags > span:not(.sweep-lane) { font-size: 0.72rem; }

  .subhero { padding-top: 7.4rem; padding-bottom: 3.8rem; }
  .subhero-back { margin-bottom: 1.35rem; }
  /* 11.3vw keeps the longest German compound ("Handwerksbereiche,") on one line at 390px */
  .subhero h1 { font-size: clamp(2.35rem, 11.3vw, 3.1rem); }
  .subhero p { margin-top: 1rem; font-size: 0.96rem; }

  .references-gallery.section-pad { padding-block: 3.4rem; }
  .project-stack { gap: 3.2rem; }
  .project-block { padding-top: 1.15rem; }
  .project-head { gap: 0.8rem; margin-bottom: 1.35rem; }
  .project-head h3 { margin-top: 0.25rem; font-size: clamp(2.25rem, 11vw, 2.8rem); }
  .project-head p { font-size: 0.94rem; line-height: 1.65; }
  .project-gallery { gap: 0.9rem; width: 100%; }
  .project-gallery--house {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-rows: auto;
  }
  .project-gallery--house .project-photo:nth-child(n),
  .project-gallery--house .project-photo--lead {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .project-gallery--duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0.9rem;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .project-gallery--duo .project-photo { width: 100%; aspect-ratio: 4 / 5; }
  .project-photo { border-radius: 12px; }
  .project-photo__zoom { top: 0.65rem; right: 0.65rem; padding: 0.35rem 0.55rem; font-size: 0.64rem; }
  .project-photo figcaption { left: 0.85rem; right: 0.85rem; bottom: 0.7rem; font-size: 0.76rem; }
  .project-action { margin-top: 0.9rem; }
  .project-inquiry {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(124,94,33,0.28);
    border-radius: 999px;
    background-image: none;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .reviews-showcase { border-radius: 14px; }
  .google-rating-panel { padding: 1.35rem; }
  .reviews-carousel { padding: 1.15rem; }
  .review-slide { padding: 0.35rem; }
  .review-slide blockquote { margin: 1.2rem 0; font-size: clamp(1.5rem, 8vw, 1.9rem); }
  .reviews-carousel__controls { gap: 0.7rem; }
  .reviews-carousel__arrows button { width: 44px; height: 44px; }

  .about-media .badge {
    left: 0.8rem;
    bottom: -1.1rem;
    max-width: 168px;
    padding: 0.95rem 1.05rem;
  }
  .about-media .badge strong { font-size: 1.75rem; }
  .about-media .badge span { font-size: 0.72rem; }
  .about-facts { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .about-facts > div { padding: 0 0.75rem; text-align: center; }
  .about-facts > div:first-child { padding-left: 0.75rem; }
  .about-facts > div:nth-child(2) { border-right: 0; }
  .about-facts > div:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    border-right: 0;
  }
  .form-card { padding: 1.25rem; }
  .form-card .btn { width: 100%; }
  .cta-band { padding-block: 2.5rem; }
  .cta-band .wrap { gap: 1.25rem; }
  .cta-copy { flex: 0 1 auto; width: 100%; gap: 0.85rem; }
  .cta-copy p { margin-top: 0.45rem; }
  .cta-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 0.65rem; }
  .cta-actions .btn { width: 100%; }
  .footer-top { padding-block: 3rem; gap: 2rem; }
  .footer-bottom .legal { flex-wrap: wrap; gap: 0.75rem 1.1rem; }
  .mobile-nav { padding-top: 1rem; }
  .mobile-nav a { font-size: 2rem; }
}

@media (max-width: 360px) {
  :root { --gutter: 0.95rem; }
  .site-header .wrap { padding-inline: 0.8rem; }
  .brand img { width: 30px; height: 30px; }
  .brand-name { font-size: 0.88rem; }
  .brand-name span { font-size: 0.62rem; }
  .header-actions .btn { padding-inline: 0.65rem; font-size: 0.74rem; }
  .nav-toggle { width: 44px; height: 44px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats > div { border-right: 0; border-bottom: 1px solid var(--line-on-dark); padding-bottom: 0.8rem; }
  .hero-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .project-inquiry { font-size: 0.76rem; }
}

/* =========================================================
   Final showcase refresh · August 2026
   ========================================================= */

/* ---------- Editorial home hero ---------- */
.hero.hero-showcase {
  min-height: 0;
  padding: clamp(2.5rem, 4vw, 4.5rem) 0;
  background: linear-gradient(135deg, #fffefa 0%, #f5eedf 100%);
  color: var(--ink);
}
.hero-showcase .hero-inner {
  width: min(calc(100% - (2 * var(--gutter))), var(--container));
  max-width: var(--container);
  min-height: 680px;
  margin-inline: auto;
  padding: 0;
}
.hero-showcase__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(430px, 0.86fr) minmax(0, 1.14fr);
  gap: 0;
  align-items: center;
}
.hero-showcase .hero-copy-col {
  position: relative;
  z-index: 3;
  width: auto;
  margin: 0 -4.5rem 0 0;
  padding: clamp(2.8rem, 4vw, 4.5rem);
  border-top: 5px solid var(--clay);
  background: rgba(255, 253, 247, 0.94);
  box-shadow: 0 32px 80px -42px rgba(33,29,26,0.6);
  backdrop-filter: blur(10px);
}
.hero-showcase h1 {
  color: var(--ink);
  font-size: clamp(3.8rem, 5.25vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-shadow: none;
}
.hero-showcase h1 .line + .line { margin-top: 0.12em; }
.hero-showcase h1 em { color: var(--clay-dark); }
.hero-showcase .hero-lead {
  max-width: 45ch;
  margin-top: 1.45rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1vw, 1.1rem);
}
.hero-showcase .hero-cta { margin-top: 1.8rem; }
.hero-showcase .hero-cta .btn-ghost {
  border-color: rgba(33,29,26,0.16);
  background: rgba(255,255,255,0.58);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero-showcase .hero-cta .btn-ghost::before { background: var(--ink); }
.hero-showcase .hero-cta .btn-ghost:hover { color: var(--paper); background: transparent; }
.hero-showcase .hero-stats {
  margin-top: clamp(2rem, 3vw, 2.6rem);
  padding-top: 1.25rem;
  border-top-color: var(--line);
}
.hero-showcase .hero-stats > div { border-right-color: var(--line); }
.hero-showcase .hero-stats div strong { color: var(--clay-dark); font-size: clamp(1.55rem, 1.4vw, 2rem); }
.hero-showcase .hero-stats div span { color: var(--ink-soft); font-size: 0.62rem; }

.hero-gallery {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.hero-gallery figure {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
  background: var(--ink);
  border: 7px solid rgba(255,255,255,0.88);
  border-radius: 18px;
  box-shadow: 0 34px 74px -34px rgba(54,37,15,0.48);
}
.hero-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1s var(--ease);
}
.hero-gallery figure:hover img { transform: scale(1.035); }
.hero-gallery__main {
  width: 100%;
  height: 100%;
}
.hero-gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,17,14,0.1), transparent 38%, rgba(20,17,14,0.05));
  pointer-events: none;
}
.hero-gallery figcaption {
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  left: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 600;
}
.hero-gallery figcaption span {
  color: var(--clay-light);
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.hero-proof {
  position: absolute;
  right: -1.2rem;
  bottom: -1.4rem;
  left: auto;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  min-width: 210px;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(33,29,26,0.1);
  border-radius: 14px;
  background: rgba(255,253,248,0.94);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.hero-proof:hover { transform: translateY(-3px); box-shadow: 0 34px 70px -25px rgba(33,22,14,0.45); }
.hero-proof__stars { grid-column: 1 / -1; color: #e2a529; font-size: 0.74rem; letter-spacing: 0.12em; }
.hero-proof strong { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--clay-dark); }
.hero-proof small { max-width: 10ch; color: var(--ink-soft); font-size: 0.68rem; line-height: 1.35; }

/* ---------- Regional field showcase ---------- */
.field-showcase { overflow: hidden; background: var(--paper); }
.field-showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, 0.94fr);
  gap: 0;
  min-height: 590px;
  padding: 10px;
  overflow: visible;
  border: 1px solid rgba(33,29,26,0.12);
  border-radius: 30px;
  background: #fffdf8;
  box-shadow: 0 32px 72px -34px rgba(71,48,17,0.46);
}
.field-showcase__media { position: relative; min-height: 100%; overflow: hidden; border-radius: 20px; }
.field-showcase__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 65%, rgba(33,29,26,0.3) 100%);
  pointer-events: none;
}
.field-showcase__van {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}
.field-showcase__copy {
  position: relative;
  z-index: 1;
  margin: 1rem 0.7rem 1rem -2.8rem;
  padding: clamp(2.2rem, 3vw, 3rem);
  border: 1px solid rgba(117,86,34,0.16);
  border-radius: 24px;
  background: rgba(238, 228, 209, 0.975);
  box-shadow: -24px 24px 56px -34px rgba(66,43,12,0.48);
  color: var(--ink);
}
.field-showcase__copy .eyebrow { color: var(--clay-dark); }
.field-showcase__copy h2 { margin-top: 0.75rem; color: var(--ink); font-size: clamp(2.55rem, 3.05vw, 3.7rem); }
.field-showcase__copy h2 em { color: var(--clay-dark); }
.field-showcase__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 0.8fr); align-items: center; gap: 1rem; margin-top: 1.15rem; }
.field-showcase__intro > p { color: var(--ink-soft); font-size: 0.9rem; }
.field-showcase__person { display: flex; align-items: center; gap: 0.75rem; width: 100%; margin: 0; padding: 0.5rem 0.8rem 0.5rem 0.5rem; border: 1px solid rgba(33,29,26,0.1); border-radius: 16px; background: rgba(255,255,255,0.58); }
.field-showcase__person img { width: 62px; height: 62px; flex-shrink: 0; border: 2px solid var(--clay); border-radius: 50%; object-fit: cover; object-position: center 24%; }
.field-showcase__person p { line-height: 1.35; }
.field-showcase__person strong,
.field-showcase__person span { display: block; }
.field-showcase__person strong { font-size: 0.88rem; }
.field-showcase__person span { margin-top: 0.18rem; color: var(--ink-soft); font-size: 0.68rem; }
.field-showcase__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin: 1rem 0; padding: 0; list-style: none; }
.field-showcase__facts li { display: grid; align-content: start; gap: 0.55rem; min-height: 112px; padding: 0.75rem; border: 1px solid rgba(33,29,26,0.09); border-radius: 14px; background: rgba(255,255,255,0.48); }
.field-showcase__fact-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(169,124,37,0.12); color: var(--clay-dark); }
.field-showcase__fact-icon svg { width: 17px; height: 17px; }
.field-showcase__facts li > span:last-child { color: var(--ink-soft); font-size: 0.75rem; line-height: 1.45; }
.field-showcase__phone { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; width: 100%; min-height: 58px; padding: 0.55rem 0.7rem 0.55rem 1.1rem; border-radius: 999px; background: var(--clay); color: var(--ink); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); }
.field-showcase__phone span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.field-showcase__phone strong { justify-self: center; font-size: 1.02rem; }
.field-showcase__phone svg { width: 40px; height: 40px; padding: 0.7rem; border-radius: 50%; background: var(--paper); }
.field-showcase__phone:hover { transform: translateY(-2px); background: var(--clay-light); box-shadow: 0 16px 30px -20px rgba(0,0,0,0.7); }

/* ---------- Static Google proof wall ---------- */
.google-reviews {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.google-reviews__summary {
  display: grid;
  grid-template-columns: auto auto auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.4rem);
  padding: clamp(1.25rem, 2.4vw, 1.8rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, #fffdf8, var(--clay-wash));
}
.google-reviews__label {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #4285f4;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  box-shadow: var(--shadow-sm);
}
.google-reviews__summary > strong { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--clay-dark); }
.google-reviews__stars,
.google-review-card__stars { color: #e2a529; letter-spacing: 0.12em; }
.google-reviews__stars { font-size: 0.86rem; }
.google-reviews__summary p { line-height: 1.3; }
.google-reviews__summary p b,
.google-reviews__summary p small { display: block; }
.google-reviews__summary p b { font-size: 0.84rem; }
.google-reviews__summary p small { margin-top: 0.2rem; color: var(--ink-soft); font-size: 0.68rem; }
.google-reviews__summary .btn { min-height: 44px; padding: 0.8rem 1.15rem; font-size: 0.78rem; }
.google-reviews__grid { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; }
.google-review-card {
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: clamp(1.5rem, 2.7vw, 2.2rem);
  border-right: 1px solid var(--line);
  background: var(--paper);
}
.google-review-card:last-child { border-right: 0; }
.google-review-card--featured { background: var(--ink); color: var(--paper); }
.google-review-card__stars { font-size: 0.78rem; }
.google-review-card blockquote {
  margin: 1.35rem 0 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.28;
}
.google-review-card--featured blockquote { color: var(--paper); font-size: clamp(1.55rem, 2.3vw, 2rem); }
.google-review-card footer { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.google-review-card footer strong,
.google-review-card footer small { display: block; }
.google-review-card footer strong { font-size: 0.82rem; }
.google-review-card footer small { margin-top: 0.15rem; color: var(--ink-soft); font-size: 0.68rem; }
.google-review-card--featured footer small { color: rgba(246,241,231,0.6); }
.google-review-card--featured .review-author__avatar { background: rgba(211,171,95,0.16); color: var(--clay-light); }

/* ---------- New reference layouts ---------- */
.project-gallery--single { grid-template-columns: 1fr; }
.project-gallery--single .project-photo { aspect-ratio: 16 / 9; }
.project-gallery--single .project-photo img { object-position: center 48%; }
.project-gallery--landscape .project-photo { aspect-ratio: 4 / 3; }

@media (max-width: 1100px) {
  .hero-showcase__grid { gap: 0; }
  .hero-showcase .hero-copy-col { width: auto; margin-right: -3.5rem; }
  .hero-showcase h1 { font-size: clamp(3.25rem, 5vw, 4.6rem); }
  .field-showcase__grid { gap: 0; }
  .field-showcase__copy { margin-left: -2rem; }
}

@media (max-width: 900px) {
  .hero.hero-showcase { padding-block: 2.5rem; }
  .hero-showcase .hero-inner { min-height: 0; }
  .hero-showcase__grid { grid-template-columns: 1fr; }
  .hero-showcase .hero-copy-col { grid-area: 1 / 1; align-self: center; width: min(620px, 76%); max-width: none; margin: 0 0 0 1.2rem; }
  .hero-gallery { grid-area: 1 / 1; inset: auto; width: 100%; min-height: 0; }
  .hero-proof { right: 0.8rem; left: auto; }
  .field-showcase__grid { grid-template-columns: 1fr; min-height: 0; padding: 8px; }
  .field-showcase__media { min-height: 500px; }
  .field-showcase__copy { margin: -3.5rem 1.1rem 1rem; }
  .google-reviews__summary { grid-template-columns: auto auto auto 1fr; }
  .google-reviews__summary .btn { grid-column: 1 / -1; width: fit-content; }
  .google-reviews__grid { grid-template-columns: 1fr 1fr; }
  .google-review-card--featured { grid-column: 1 / -1; min-height: 260px; }
  .google-review-card:nth-child(2) { border-top: 1px solid var(--line); }
  .google-review-card:nth-child(3) { border-top: 1px solid var(--line); border-right: 0; }
}

@media (max-width: 620px) {
  .hero.hero-showcase { min-height: 0; padding: 1.5rem 0 3.4rem; }
  .hero-showcase .hero-inner { min-height: 0; padding: 0; }
  .hero-showcase__grid { display: flex; flex-direction: column; }
  .hero-showcase .hero-copy-col { width: 100%; margin: 0; padding: 1.8rem 1.35rem; }
  .hero-showcase h1 { font-size: clamp(2.8rem, 14vw, 3.7rem); line-height: 0.96; }
  .hero-showcase .hero-lead { color: var(--ink-soft); }
  .hero-showcase .hero-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
  .hero-showcase .hero-stats > div { padding-right: 0.55rem; border-right-color: var(--line); border-bottom: 0; }
  .hero-showcase .hero-stats > div:nth-child(2n) { padding-right: 0.55rem; border-right: 1px solid var(--line); }
  .hero-showcase .hero-stats > div:last-child { padding-right: 0; border-right: 0; }
  .hero-showcase .hero-stats div strong { font-size: 1.6rem; }
  .hero-showcase .hero-stats div span { color: var(--ink-soft); font-size: 0.54rem; }
  .hero-gallery { display: block; inset: auto; width: 100%; min-height: 0; margin-top: -1.2rem; }
  .hero-gallery__main { position: absolute !important; inset: 0; width: 100%; height: 100%; border-radius: 14px; }
  .hero-gallery figcaption { display: none; }
  .hero-proof { right: 0.6rem; bottom: -1rem; left: auto; min-width: 185px; padding: 0.8rem 0.9rem; }
  .hero-proof strong { font-size: 1.9rem; }
  .field-showcase__grid { padding: 6px; border-radius: 18px; }
  .field-showcase__media { min-height: 390px; padding: 0; border-radius: 13px; }
  .field-showcase__van { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
  .field-showcase__copy { margin: -2rem 0.5rem 0.5rem; padding: 1.55rem 1.15rem 1.25rem; border-radius: 18px; }
  .field-showcase__copy h2 { font-size: clamp(2.4rem, 12vw, 3rem); }
  .field-showcase__intro { grid-template-columns: 1fr; }
  .field-showcase__person { width: 100%; gap: 0.75rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; }
  .field-showcase__person img { width: 58px; height: 58px; }
  .field-showcase__person span { font-size: 0.65rem; }
  .field-showcase__facts { grid-template-columns: 1fr; }
  .field-showcase__facts li { grid-template-columns: 2.2rem 1fr; align-items: center; min-height: 0; }
  .field-showcase__facts li { padding-right: 0.5rem; }
  .field-showcase__phone { gap: 0.55rem; padding-left: 0.8rem; }
  .field-showcase__phone strong { font-size: 0.92rem; }
  .google-reviews__summary { grid-template-columns: auto auto 1fr; gap: 0.65rem; }
  .google-reviews__label { width: 44px; height: 44px; }
  .google-reviews__summary > strong { font-size: 2.6rem; }
  .google-reviews__stars { grid-column: 2 / 4; }
  .google-reviews__summary p { grid-column: 2 / 4; }
  .google-reviews__summary .btn { width: 100%; }
  .google-reviews__grid { grid-template-columns: 1fr; }
  .google-review-card,
  .google-review-card--featured { grid-column: auto; min-height: 255px; border-right: 0; border-top: 1px solid var(--line); }
  .google-review-card:first-child { border-top: 0; }
  .project-gallery--single .project-photo { aspect-ratio: 4 / 3; }
}

/* =========================================================
   Final homepage composition · August 2026
   ========================================================= */

.hero.hero-showcase {
  position: relative;
  min-height: clamp(720px, calc(100svh - 88px), 880px);
  padding: 0;
  overflow: hidden;
  background: #171714;
  color: var(--paper);
}
.hero-showcase .hero-inner {
  width: 100%;
  max-width: none;
  min-height: inherit;
  margin: 0;
  padding: 0;
}
.hero-showcase__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-showcase .hero-copy-col {
  position: relative;
  z-index: 3;
  /* the headline scales with the viewport, so the column has to grow with it,
     otherwise "Räume, die sich" breaks apart on wide monitors */
  width: min(clamp(650px, 44vw, 900px), calc(100% - (2 * var(--gutter))));
  margin: 0 0 0 clamp(1.25rem, 7vw, 8.5rem);
  padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid rgba(255,255,255,0.17);
  border-top: 3px solid var(--clay-light);
  border-radius: 2px;
  background: rgba(244,246,244,0.075);
  box-shadow: 0 36px 90px -46px rgba(0,0,0,0.85);
  backdrop-filter: blur(9px);
}
.hero-showcase h1 {
  color: #fff;
  font-size: clamp(4rem, 5.6vw, 6.8rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 28px rgba(0,0,0,0.28);
}
.hero-showcase h1 .line + .line { margin-top: 0.13em; }
.hero-showcase h1 em { color: var(--clay-light); }
.hero-showcase .hero-lead {
  max-width: 48ch;
  margin-top: 1.65rem;
  color: rgba(244,246,244,0.78);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
}
.hero-showcase .hero-cta { margin-top: 2rem; }
.hero-showcase .hero-cta .btn-primary { background: var(--clay-light); color: var(--ink); }
.hero-showcase .hero-cta .btn-primary::before { background: #fff; }
.hero-showcase .hero-cta .btn-ghost {
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.035);
  color: #fff;
  box-shadow: none;
}
.hero-showcase .hero-cta .btn-ghost::before { background: rgba(255,255,255,0.96); }
.hero-showcase .hero-cta .btn-ghost:hover { color: var(--ink); }
.hero-showcase .hero-stats {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  margin-top: clamp(2rem, 3vw, 2.8rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-showcase .hero-stats > div { padding-right: 1rem; border-right: 1px solid rgba(255,255,255,0.16); }
.hero-showcase .hero-stats > div:last-child { padding-right: 0; border-right: 0; }
.hero-showcase .hero-stats div strong { color: #fff; font-size: clamp(1.5rem, 1.65vw, 2.15rem); }
.hero-showcase .hero-stats div span { color: rgba(244,246,244,0.61); font-size: 0.59rem; }
.hero-gallery {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  margin: 0;
}
.hero-gallery figure,
.hero-gallery__main {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-gallery figure picture { display: block; width: 100%; height: 100%; }
.hero-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.hero-gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,15,13,0.95) 0%, rgba(10,15,13,0.82) 24%, rgba(10,15,13,0.42) 52%, rgba(10,15,13,0.08) 78%),
    linear-gradient(0deg, rgba(10,15,13,0.38), transparent 48%);
}
.hero-gallery figcaption { display: none; }
.hero-proof {
  right: clamp(1.25rem, 4vw, 4rem);
  bottom: clamp(1.25rem, 3.2vw, 3rem);
  left: auto;
  min-width: 224px;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 18px;
  background: rgba(249,251,249,0.94);
  box-shadow: 0 24px 54px -26px rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
}
.hero-proof strong { color: var(--clay-dark); }
.hero-proof small { max-width: 12ch; color: var(--ink-soft); }

.trust-bar { border-color: rgba(255,255,255,0.08); background: #1d1d1a; color: var(--paper); }

.field-showcase { background: var(--paper); }
.field-showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: 0;
  min-height: 590px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.field-showcase__media { min-height: 590px; border-radius: 22px; box-shadow: var(--shadow-md); }
.field-showcase__media::after { background: linear-gradient(90deg, transparent 64%, rgba(29,29,26,0.24) 100%); }
.field-showcase__van { object-position: center 42%; }
.field-showcase__copy {
  align-self: center;
  margin: 2rem 0 2rem -3.8rem;
  padding: clamp(2.1rem, 3vw, 3.2rem);
  border: 1px solid rgba(29,29,26,0.11);
  border-radius: 22px;
  background: rgba(241,234,220,0.97);
  box-shadow: -24px 30px 70px -40px rgba(29,29,26,0.5);
  color: var(--ink);
  backdrop-filter: blur(12px);
}
.field-showcase__copy h2 { margin: 0; font-size: clamp(2.35rem, 2.8vw, 3.25rem); line-height: 1.1; }
.field-showcase__intro { grid-template-columns: minmax(0,1fr); gap: 1.5rem; margin-top: 1.6rem; }
.field-showcase__intro > p { max-width: 46ch; font-size: 1.02rem; line-height: 1.72; }
.field-showcase__person { width: 100%; min-width: 0; gap: 1rem; padding: 0.85rem 1.25rem 0.85rem 0.85rem; border-color: rgba(29,29,26,0.1); border-radius: 18px; background: rgba(255,255,255,0.62); }
.field-showcase__person img { width: 58px; height: 58px; border-color: var(--clay-dark); }
.field-showcase__person strong { font-size: 0.95rem; }
.field-showcase__person span { font-size: 0.78rem; }
ul.field-showcase__facts {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  gap: 0.6rem;
  margin: 1.5rem 0;
}
.field-showcase__facts li {
  display: block;
  min-height: 0;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(29,29,26,0.1);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.3;
}
.field-showcase__phone { min-height: 64px; padding: 0.6rem 1.4rem; }
.field-showcase__phone strong { font-size: 1.12rem; }
.field-showcase__phone { background: var(--ink); color: #fff; }
.field-showcase__phone svg { background: var(--clay-light); color: var(--ink); transition: transform 0.28s var(--ease); }
.field-showcase__phone:hover { background: var(--clay-dark); box-shadow: 0 18px 34px -20px rgba(29,29,26,0.8); }
.field-showcase__phone:hover svg { transform: rotate(45deg); }

.wall { background: var(--paper-2); }
.google-reviews {
  overflow: hidden;
  border: 1px solid rgba(29,29,26,0.11);
  border-radius: 24px;
  background: rgba(255,255,255,0.52);
  box-shadow: 0 28px 64px -42px rgba(29,29,26,0.42);
}
.google-reviews__summary {
  grid-template-columns: auto auto minmax(180px,1fr) auto;
  gap: clamp(0.8rem,2vw,1.5rem);
  padding: clamp(1.2rem,2.4vw,2rem);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.6);
}
.google-reviews__label { width: 58px; height: 58px; color: inherit; }
.google-reviews__label svg { width: 30px; height: 30px; }
.google-reviews__summary > strong { color: var(--ink); }
.google-reviews__score { display: grid; gap: 0.18rem; }
.google-reviews__score p { line-height: 1.25; }
.google-reviews__score p b,
.google-reviews__score p small { display: block; }
.google-reviews__score p b { font-size: 0.82rem; }
.google-reviews__score p small { margin-top: 0.16rem; color: var(--ink-soft); font-size: 0.66rem; }
.google-reviews__summary .btn { white-space: nowrap; }
.google-reviews__viewport {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem,2.2vw,1.8rem) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.google-reviews__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding-left: 1rem;
  animation: review-marquee 55s linear infinite;
}
.google-reviews__viewport:hover .google-reviews__track { animation-play-state: paused; }
.google-review-card,
.google-review-card--featured {
  flex: 0 0 clamp(286px, 30vw, 390px);
  min-height: 270px;
  padding: clamp(1.35rem,2.3vw,2rem);
  border: 1px solid rgba(29,29,26,0.1);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.google-review-card blockquote,
.google-review-card--featured blockquote {
  margin: 1.15rem 0 1.8rem;
  color: var(--ink);
  font-size: clamp(1.35rem,1.7vw,1.75rem);
}
.google-review-card footer small,
.google-review-card--featured footer small { color: var(--ink-soft); }
.google-review-card .review-author__avatar,
.google-review-card--featured .review-author__avatar { background: var(--clay-wash); color: var(--clay-dark); }
@keyframes review-marquee { to { transform: translateX(calc(-50% - 0.5rem)); } }

@media (max-width: 900px) {
  .hero.hero-showcase { min-height: 760px; padding: 0; }
  .hero-showcase .hero-inner { min-height: inherit; padding: 0; }
  .hero-showcase__grid { display: grid; grid-template-columns: 1fr; }
  .hero-showcase .hero-copy-col { grid-area: 1 / 1; width: min(620px, calc(100% - 3rem)); margin: 0 0 0 1.5rem; padding: 2.5rem; }
  .hero-gallery { grid-area: 1 / 1; min-height: 100%; margin: 0; }
  .hero-proof { right: 1.2rem; bottom: 1.2rem; }
  .field-showcase__grid { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .field-showcase__media { min-height: 520px; }
  .field-showcase__copy { margin: -3.8rem 1.2rem 0; }
  .google-reviews__summary { grid-template-columns: auto auto 1fr; }
  .google-reviews__summary .btn { grid-column: 1 / -1; width: fit-content; }
}

@media (max-width: 620px) {
  .hero.hero-showcase { min-height: 720px; padding: 0; }
  .hero-showcase .hero-inner { min-height: inherit; }
  .hero-showcase__grid { display: grid; }
  .hero-showcase .hero-copy-col { width: calc(100% - 2rem); margin: 0 1rem; padding: 1.55rem 1.25rem; }
  .hero-showcase h1 { font-size: clamp(3.05rem,14vw,4.2rem); }
  .hero-showcase .hero-lead { color: rgba(244,246,244,0.78); font-size: 0.91rem; }
  .hero-showcase .hero-cta { display: grid; grid-template-columns: 1fr; gap: 0.65rem; }
  .hero-showcase .hero-cta .btn { width: 100%; }
  .hero-showcase .hero-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero-showcase .hero-stats > div,
  .hero-showcase .hero-stats > div:nth-child(2n) { padding: 0 0.45rem; border-right: 1px solid rgba(255,255,255,0.16); border-bottom: 0; }
  .hero-showcase .hero-stats > div:first-child { padding-left: 0; }
  .hero-showcase .hero-stats > div:last-child { padding-right: 0; border-right: 0; }
  .hero-showcase .hero-stats div strong { font-size: 1.45rem; }
  .hero-showcase .hero-stats div span { color: rgba(244,246,244,0.58); font-size: 0.5rem; }
  .hero-gallery { display: block; width: 100%; min-height: 100%; margin: 0; }
  .hero-gallery figure img { object-position: 59% center; }
  .hero-gallery figure::after { background: linear-gradient(90deg, rgba(10,15,13,0.92), rgba(10,15,13,0.47) 74%, rgba(10,15,13,0.18)); }
  .hero-proof { right: 1rem; bottom: 0.85rem; min-width: 178px; padding: 0.75rem 0.85rem; }
  .hero-proof strong { font-size: 1.8rem; }
  .field-showcase__grid { padding: 0; border-radius: 0; }
  .field-showcase__media { min-height: 420px; border-radius: 16px; }
  .field-showcase__copy { margin: -2.5rem 0.7rem 0; padding: 1.55rem 1.15rem 1.25rem; }
  .field-showcase__copy h2 { font-size: clamp(1.95rem,8.6vw,2.4rem); }
  .field-showcase__intro { gap: 1.15rem; margin-top: 1.2rem; }
  .field-showcase__intro > p { font-size: 0.95rem; }
  .field-showcase__person { padding: 0.7rem 0.9rem 0.7rem 0.7rem; }
  .field-showcase__person strong { font-size: 0.88rem; }
  .field-showcase__person span { font-size: 0.72rem; }
  ul.field-showcase__facts { display: flex; grid-template-columns: none; margin: 1.15rem 0; }
  .field-showcase__facts li { display: block; min-height: 0; padding: 0.5rem 0.85rem; font-size: 0.74rem; }
  .field-showcase__phone { min-height: 58px; padding: 0.55rem 1.1rem; }
  .google-reviews__summary { grid-template-columns: auto auto 1fr; }
  .google-reviews__label { width: 44px; height: 44px; }
  .google-reviews__summary > strong { font-size: 2.55rem; }
  .google-reviews__score { grid-column: 2 / 4; }
  .google-reviews__summary .btn { width: 100%; }
  .google-review-card,
  .google-review-card--featured { min-height: 245px; border: 1px solid rgba(29,29,26,0.1); }
}

/* =========================================================
   Final detail refinements
   ========================================================= */

.hero-showcase .hero-copy-col {
  align-self: center;
  background: rgba(19, 21, 18, 0.16);
  border-color: rgba(255, 255, 255, 0.13);
  border-top-color: var(--clay-light);
  backdrop-filter: blur(5px);
}

.hero-gallery figure::after {
  background:
    linear-gradient(90deg, rgba(10,15,13,0.78) 0%, rgba(10,15,13,0.64) 24%, rgba(10,15,13,0.30) 52%, rgba(10,15,13,0.05) 78%),
    linear-gradient(0deg, rgba(10,15,13,0.28), transparent 48%);
}

.hero-proof__google {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 24px;
  height: 24px;
}

.hero-proof__google svg { width: 100%; height: 100%; }

.about-story {
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 55%, var(--paper-2) 100%);
}

/* No hairline between these two: the tone already carries the eye across,
   a gold rule on top of it only reads as a seam. */
.values.values-flow {
  position: relative;
  padding-top: clamp(3.5rem, 6vw, 6rem);
  padding-bottom: clamp(2.8rem, 4.5vw, 4rem);
  background: linear-gradient(180deg, var(--paper-2) 0%, #eee3cf 100%);
}

.credentials.credentials-flow {
  padding-top: clamp(2.2rem, 4vw, 3.6rem);
  background: linear-gradient(180deg, #eee3cf 0%, var(--paper) 22%);
}

/* Rein dekorative CTA Pfeile entfallen bewusst. */
.btn-arrow,
.service-cta > svg { display: none !important; }
.field-showcase__phone { grid-template-columns: auto 1fr; }
.field-showcase__phone > svg { display: none; }
.field-showcase__phone strong { justify-self: end; }

@media (max-width: 760px) {
  .hero.hero-showcase { min-height: 0; }
  .hero-showcase .hero-inner { min-height: 0; }
  .hero-showcase .hero-copy-col {
    width: calc(100% - 2rem);
    margin: 0 1rem;
    padding: clamp(6.2rem, 18vw, 7.2rem) 1.25rem 1.55rem;
  }
  .hero-proof {
    top: 1rem;
    right: 1rem;
    bottom: auto;
    min-width: 148px;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    grid-template-columns: auto 1fr;
    gap: 0.1rem 0.5rem;
  }
  .hero-proof__google { top: 0.65rem; right: 0.7rem; width: 20px; height: 20px; }
  .hero-proof__stars { padding-right: 1.7rem; font-size: 0.62rem; }
  .hero-proof strong { font-size: 1.7rem; }
  .hero-proof small { max-width: 10ch; font-size: 0.58rem; }
  .hero-showcase .hero-stats { width: 100%; }
  .hero-showcase .hero-stats > div,
  .hero-showcase .hero-stats > div:nth-child(2n) {
    min-width: 0;
    padding: 0 0.35rem;
    text-align: center;
  }
  .hero-showcase .hero-stats > div:first-child { padding-left: 0; }
  .hero-showcase .hero-stats > div:last-child { padding-right: 0; }
  .hero-showcase .hero-stats div strong { font-size: clamp(1.25rem, 6vw, 1.55rem); white-space: nowrap; }
  .hero-showcase .hero-stats div span {
    max-width: 100%;
    font-size: 0.47rem;
    line-height: 1.35;
    letter-spacing: 0.035em;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 620px) {
  .hero-showcase .hero-copy-col {
    background: rgba(19, 21, 18, 0.24);
    backdrop-filter: blur(4px);
  }
  .hero-gallery figure::after {
    background: linear-gradient(90deg, rgba(10,15,13,0.82), rgba(10,15,13,0.42) 74%, rgba(10,15,13,0.12));
  }
  .hero-proof__google { top: 0.65rem; right: 0.7rem; width: 20px; height: 20px; }
}

/* ---------- Section colour transitions ----------
   Neighbouring light sections used to butt against each other on a hard line.
   Each one now carries the next section's tone through its last stretch, the
   same drift the About page already uses. The :has() guard means a section
   sitting above a dark block or above the footer keeps its clean edge. */
section:is(.intro, .process, .field-showcase, .about, .community):has(
  + section:is(.services, .wall, .ba, .video-section, .contact)) {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 62%, var(--paper-2) 100%);
}
section:is(.services, .wall, .ba, .video-section, .contact):has(
  + section:is(.intro, .process, .field-showcase, .about, .community)) {
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-2) 62%, var(--paper) 100%);
}

/* Light -> dark stays a hard cut. Paper and ink are too far apart for a blend:
   every version of it read as haze sitting over the page rather than as a
   transition. The clean edge is the better call, so there is no rule here. */

/* ---------- Cookie- und Datenschutzhinweis ----------
   Bewusst klein und unten links statt als Vollbild-Overlay: die Seite setzt
   kein Tracking ein, der Hinweis muss also nichts blockieren. Er informiert,
   laesst sich wegklicken und stoert den ersten Eindruck nicht. */
.cookie-notice {
  position: fixed;
  left: var(--gutter);
  bottom: 1.25rem;
  z-index: var(--z-toast);
  max-width: 25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0.9rem 0.85rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.cookie-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-notice__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.cookie-notice__link {
  color: var(--ink);
  font-weight: var(--w-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 0.3s var(--ease);
}
.cookie-notice__link:hover { text-decoration-color: var(--clay); }

.cookie-notice__btn {
  flex: none;
  padding: 0.6em 1.2em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: var(--w-semi);
  color: var(--paper);
  background: var(--clay);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.2s var(--ease);
}
.cookie-notice__btn:hover { background: var(--clay-dark); }
.cookie-notice__btn:active { transform: scale(0.97); }

@media (max-width: 620px) {
  .cookie-notice {
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.85rem;
    max-width: none;
  }
  /* Auf dem Telefon braucht der Button eine daumenfreundliche Trefferflaeche. */
  .cookie-notice__btn { min-height: 44px; padding-inline: 1.35em; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice { transition: opacity 0.01ms; transform: none; }
  .cookie-notice.is-visible { transform: none; }
}