/* Maler Vetsch GmbH – Stylesheet
   Desktop (>= 1200px): 1440px-Raster wie das Original, skaliert über --u.
   Darunter: responsives Layout im normalen Fluss. */

/* Rufina Bold deckt alle Überschriften ab (das Original wirkt halbfett) */
@font-face { font-family: "Rufina"; src: url("../fonts/rufina-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Fallback mit angepasster Breite, damit beim Nachladen von Rufina nichts verspringt (CLS) */
@font-face { font-family: "Rufina Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); font-weight: 400 700; size-adjust: 91.4%; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); font-weight: 300 700; size-adjust: 111.5%; }
@font-face { font-family: "Yellowtail"; src: url("../fonts/yellowtail-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Nur Ziffern (Rufina hat Mediävalziffern, das Original Versalziffern) */
@font-face { font-family: "Digits"; src: url("../fonts/gelasio-700-digits.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+20, U+25, U+27, U+2B, U+30-39; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/fira-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --bg: #737373;
  --red: #821225;
  --brown: #503d3b;
  --beige: #cbb79e;
  --beige-grey: #cbc5b2;
  --cream: #eeecde;
  --rust: #9b4e42;
  --serif: "Rufina", "Rufina Fallback", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Montserrat Fallback", "Segoe UI", Arial, sans-serif;
  --script: "Yellowtail", "Brush Script MT", cursive;
  --header-h: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--brown);
  font-family: var(--sans);
  font-weight: 350;
  line-height: 1.5;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, address { margin: 0; }
address { font-style: normal; }
a { color: inherit; }
ul { padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: #fff; color: #000; padding: 8px 12px; text-decoration: none;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--bg);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 16px;
}
.brand { display: none; }
.nav-toggle { display: none; }
.site-nav ul { list-style: none; display: flex; gap: 32px; margin: 0; }
.site-nav a {
  font: 700 15px/16px var(--sans);
  color: #fff; text-decoration: none; white-space: nowrap;
}
.site-nav a:hover { text-decoration: underline; }
[id] { scroll-margin-top: var(--header-h); }

/* ---------- Seite / Streifen ---------- */
.page { position: relative; container-type: inline-size; overflow-x: clip; }

/* ========== Desktop-Raster ========== */
@media (min-width: 1200px) {
  .page { --u: min(1px, 100cqw / 1440); }
  .stripe {
    position: absolute; top: calc(-1 * var(--header-h)); bottom: 0; z-index: 0;
    left: calc(50% + (1029 - 720) * var(--u));
    width: calc(66 * var(--u));
    background: linear-gradient(90deg, var(--beige-grey) 0 calc(47 * var(--u)), transparent 0 calc(50 * var(--u)), var(--beige-grey) 0);
    pointer-events: none;
  }
  .cv {
    position: relative; z-index: 1;
    width: calc(1440 * var(--u)); margin-inline: auto;
    height: calc(var(--h) * var(--u));
    overflow: clip;
  }
  .a {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
  }
  img.a, .band, .member, .stat, .partner, .stars { height: calc(var(--h) * var(--u)); }
  .stars img { width: 100%; height: 100%; }
  .deco { opacity: var(--o, 1); pointer-events: none; }
  .topo { opacity: .035; pointer-events: none; }

  /* S1 Hero */
  .kicker { font: 400 calc(53.5 * var(--u))/calc(48 * var(--u)) var(--serif); letter-spacing: calc(-1.07 * var(--u)); color: var(--red); white-space: nowrap; }
  .h1 { font: 400 calc(106.7 * var(--u))/calc(96 * var(--u)) var(--serif); letter-spacing: calc(-1.4 * var(--u)); color: var(--red); white-space: nowrap; }
  .tagline { font: 400 calc(18.3 * var(--u))/calc(25 * var(--u)) "Fira Sans", var(--sans); color: var(--beige-grey); text-align: center; text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(70, 64, 50, .7); }

  /* S2 Band */
  .band { background: var(--red); border-radius: calc(8 * var(--u)); }

  /* Überschriften zentriert */
  .h2c { font: 400 calc(56 * var(--u))/calc(50 * var(--u)) var(--serif); letter-spacing: calc(-1.12 * var(--u)); color: var(--brown); text-align: center; white-space: nowrap; }
  .h2-s6 { font-size: calc(51.8 * var(--u)); line-height: calc(46.2 * var(--u)); letter-spacing: calc(-1.04 * var(--u)); }

  /* S3 Werte */
  .werte h2 { font: 400 calc(47.7 * var(--u))/calc(42.6 * var(--u)) var(--serif); letter-spacing: calc(-.95 * var(--u)); }
  .werte h3 { font: 400 calc(22.8 * var(--u))/calc(20.4 * var(--u)) var(--serif); letter-spacing: calc(-.46 * var(--u)); margin-top: calc(27 * var(--u)); }
  .werte h2 + h3 { margin-top: calc(36.4 * var(--u)); }
  .werte p, .werte li { font-size: calc(14.1 * var(--u)); line-height: calc(21.1 * var(--u)); letter-spacing: calc(-.4 * var(--u)); }
  .werte h3 + p, .werte h3 + ul { margin-top: calc(3 * var(--u)); }
  .werte ul { padding-left: calc(24 * var(--u)); }
  .werte p + h3 { margin-top: calc(28 * var(--u)); }
  .werte .werte__cta { margin-top: calc(21 * var(--u)); }

  /* S4 Team */
  .team { list-style: none; margin: 0; }
  .member img { width: 100%; height: 100%; }
  .member__name {
    position: absolute;
    left: calc(var(--nx) * var(--u)); top: calc(var(--ny) * var(--u));
    transform: translate(-50%, -50%) rotate(-19deg);
    font: 400 calc(70 * var(--u))/1 var(--script);
    color: var(--beige);
    -webkit-text-stroke: calc(4 * var(--u)) #1e1a19;
    paint-order: stroke fill;
    white-space: nowrap;
  }

  /* S5 Zahlen */
  .stats { list-style: none; margin: 0; }
  .stat { background: var(--cream); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); border-radius: calc(2 * var(--u)); }
  .stat__icon { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--it) * var(--u)); width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); }
  .stat__num { position: absolute; left: 0; right: 0; top: calc(160 * var(--u)); text-align: center; font: 700 calc(46 * var(--u))/calc(43 * var(--u)) "Digits", var(--serif); letter-spacing: calc(-.96 * var(--u)); color: var(--red); }
  .stat__label { position: absolute; left: 0; right: 0; top: calc(216 * var(--u)); text-align: center; font: 300 calc(16 * var(--u))/calc(24 * var(--u)) var(--sans); letter-spacing: calc(-.4 * var(--u)); color: var(--red); }
  .stat__label--rust { color: var(--rust); }

  /* S6 Dienstleistungen */
  .service img { width: calc(216 * var(--u)); height: calc(216 * var(--u)); border-radius: calc(18 * var(--u)); }
  .service h3 { margin-top: calc(20 * var(--u)); font: 400 calc(27.1 * var(--u))/calc(24 * var(--u)) var(--serif); letter-spacing: calc(-.54 * var(--u)); color: var(--red); }
  .service p { font-size: calc(14.8 * var(--u)); line-height: calc(22.2 * var(--u)); letter-spacing: calc(-.6 * var(--u)); }
  .service h3 + p { margin-top: calc(14 * var(--u)); }

  /* S7 Partner */
  .partners { list-style: none; margin: 0; }
  .partner::before { content: ""; position: absolute; inset: 0; border: calc(7 * var(--u)) solid var(--red); border-radius: 50%; }
  .partner a::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
  .partner img { position: absolute; max-width: none; left: calc(var(--lx) * var(--u)); top: calc(var(--ly) * var(--u)); width: calc(var(--lw) * var(--u)); height: calc(var(--lh) * var(--u)); pointer-events: none; }

  /* S8 Kontakt / Footer */
  .h-contact { font: 400 calc(48 * var(--u))/calc(66 * var(--u)) var(--serif); letter-spacing: calc(-.96 * var(--u)); color: var(--red); white-space: nowrap; }
  .contact__line { display: block; font: 300 calc(21.3 * var(--u))/calc(42 * var(--u)) var(--sans); letter-spacing: calc(-.6 * var(--u)); color: var(--red); text-decoration: none; }
  .contact__line.u, .legal a { text-decoration: underline; text-underline-offset: calc(3 * var(--u)); }
  .h-hours { font: 400 calc(29.3 * var(--u))/calc(26 * var(--u)) var(--serif); letter-spacing: calc(-.59 * var(--u)); color: var(--red); }
  .hours { font: 300 calc(21.4 * var(--u))/calc(31 * var(--u)) var(--sans); letter-spacing: calc(-.6 * var(--u)); color: var(--red); }
  .legal { display: flex; gap: calc(26 * var(--u)); }
  .legal a { font: 300 calc(21.4 * var(--u))/calc(31 * var(--u)) var(--sans); letter-spacing: calc(-.6 * var(--u)); color: var(--red); }
  .contact a:hover, .legal a:hover { color: #5c0c1a; }

  /* Unterseiten */
  .sub-page { min-height: calc(100vh - var(--header-h)); }
  .legal-text { position: relative; z-index: 1; color: var(--brown); font-size: calc(29.3 * var(--u)); line-height: calc(43 * var(--u)); letter-spacing: calc(-1.0 * var(--u)); }
  .legal-text h1 { font: 400 calc(47.7 * var(--u))/calc(42.6 * var(--u)) var(--serif); letter-spacing: calc(-.95 * var(--u)); }
  .impressum dl { margin-top: calc(75 * var(--u)); }
  .impressum dl > div { display: block; }
  .impressum dt, .impressum dd { display: inline; }
  .impressum dt { font-weight: 700; }
  .impressum .credit { margin-top: calc(47 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(47 * var(--u)); }
  .legal-text a.plain { text-decoration: none; }
  .sub-page--flow { position: relative; z-index: 1; width: calc(1440 * var(--u)); margin-inline: auto; padding: calc(43 * var(--u)) 0 calc(120 * var(--u)) calc(177 * var(--u)); }
  .datenschutz { width: calc(1060 * var(--u)); }
  .datenschutz h2 { font: inherit; margin-top: calc(43 * var(--u)); }
  .datenschutz h1 + h2 { margin-top: calc(46 * var(--u)); }
  .datenschutz ul { padding-left: calc(50 * var(--u)); }
  .ds-sil { position: absolute; left: calc(1144 * var(--u)); top: calc(906 * var(--u)); width: calc(163 * var(--u)); opacity: .27; }
  .site-footer--sub { display: none; }
}

/* ========== Responsiv (< 1200px) ========== */
@media (max-width: 1199.98px) {
  .stripe, .topo, .deco, .icon { display: none; }
  .site-header { justify-content: space-between; }
  .brand {
    display: block; color: #fff; text-decoration: none;
    font: 400 22px/1 var(--serif); letter-spacing: -.3px;
  }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px;
    background: none; border: 0; cursor: pointer; color: #fff;
  }
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
    display: block; width: 24px; height: 2px; background: currentColor; position: relative;
    transition: transform .2s, background-color .2s;
  }
  .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bar::before { top: -7px; }
  .nav-toggle__bar::after { top: 7px; }
  .nav-open .nav-toggle__bar { background: transparent; }
  .nav-open .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--bg); border-top: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
    display: none;
  }
  .nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 8px 0; }
  .site-nav a { display: block; padding: 12px 20px; font-size: 17px; line-height: 20px; }

  .cv, .sub-page { width: 100%; max-width: 1000px; margin-inline: auto; padding: 48px 20px; }
  .a { position: relative; }

  /* Typografie */
  .kicker { font: 400 clamp(30px, 7vw, 48px)/1.1 var(--serif); color: var(--red); text-align: center; }
  .h1 { font: 400 clamp(40px, 10vw, 84px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--red); text-align: center; margin-top: 24px; }
  .h2c, .werte h2 { font: 400 clamp(32px, 7.5vw, 48px)/1.1 var(--serif); letter-spacing: -.02em; color: var(--brown); text-align: center; }
  .werte h2 { text-align: left; }
  h3 { font-family: var(--serif); font-weight: 400; }
  p, li, dd, dt { font-size: 17px; line-height: 1.6; }

  /* S1 */
  .s1 { display: flex; flex-direction: column; align-items: center; padding-bottom: 32px; }
  .logo-hero { width: min(100%, 460px); margin-top: 24px; }
  .tagline { font: 400 16px/1.4 "Fira Sans", var(--sans); color: var(--beige-grey); text-align: center; text-shadow: 0 1px 2px rgba(70, 64, 50, .7); margin-top: 6px; }
  .s8 .tagline { justify-self: center; }
  .s1 .stars { order: 3; margin-top: 16px; width: 105px; }
  .s1 .h1 { order: 4; }

  /* S2 */
  .s2 { padding-top: 0; }
  .band { position: absolute; inset: 0 20px 48px; top: 64px; background: var(--red); border-radius: 8px; z-index: -1; }
  .s2 { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 72px; }
  .van { width: min(90%, 480px); }
  .badge { width: min(70%, 300px); }

  /* S3 */
  .werte { max-width: 680px; margin-inline: auto; }
  .werte h3 { font-size: 26px; line-height: 1.2; margin-top: 28px; }
  .werte h2 + h3 { margin-top: 24px; }
  .werte ul { padding-left: 22px; margin-top: 4px; }
  .werte h3 + p { margin-top: 4px; }
  .werte__cta { margin-top: 20px; }

  /* S4 Team */
  .team { list-style: none; display: grid; gap: 56px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 32px; justify-items: center; }
  .member { width: min(260px, 70vw); aspect-ratio: 1; }
  .member img { width: 100%; height: 100%; }
  .member__name {
    position: absolute; left: 50%; bottom: -14px;
    transform: translateX(-50%) rotate(-15deg);
    font: 400 52px/1 var(--script); color: var(--beige);
    -webkit-text-stroke: 4px #1e1a19; paint-order: stroke fill; white-space: nowrap;
  }

  /* S5 Zahlen */
  .stats { list-style: none; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 32px; }
  .stat { background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; min-height: 240px; text-align: center; }
  .stat__icon { width: auto; height: 56px; }
  .stat__num { font: 700 44px/1.1 "Digits", var(--serif); color: var(--red); margin-top: 24px; align-self: stretch; display: block; }
  .stat__label { font-size: 17px; color: var(--red); margin-top: 6px; }
  .stat__label--rust { color: var(--rust); }

  /* S6 Dienstleistungen */
  .services { display: grid; gap: 40px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 32px; }
  .service img { width: 100%; max-width: 360px; aspect-ratio: 1; border-radius: 18px; }
  .service h3 { margin-top: 16px; font-size: 28px; line-height: 1.1; color: var(--red); }
  .service h3 br { display: none; }
  .service h3 + p { margin-top: 10px; }

  /* S7 Partner */
  .partners { list-style: none; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-items: center; margin-top: 32px; }
  .partner { width: 220px; aspect-ratio: 1; border: 6px solid var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .partner a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
  .partner img { width: 78%; height: auto; }
  .partner:nth-child(2) img { width: 135%; max-width: none; }

  /* S8 Kontakt */
  .s8 { display: grid; gap: 12px; justify-items: start; }
  .logo-foot { width: min(100%, 420px); justify-self: center; }
  .s8 .stars { justify-self: center; width: 105px; }
  .h-contact { font: 400 clamp(32px, 7.5vw, 44px)/1.1 var(--serif); color: var(--red); margin-top: 16px; }
  .contact { display: grid; gap: 4px; }
  .contact__line { font-size: 19px; line-height: 1.9; color: var(--red); text-decoration: none; padding-left: 40px; background: no-repeat left center / 26px auto; }
  .contact__line--pin { background-image: url("../img/icon-pin.webp"); background-size: 22px auto; }
  .contact__line--phone { background-image: url("../img/icon-phone.webp"); }
  .contact__line--mail { background-image: url("../img/icon-mail.webp"); }
  .contact__line.u { text-decoration: underline; }
  .h-hours { font: 400 28px/1.2 var(--serif); color: var(--red); margin-top: 16px; }
  .hours { color: var(--red); font-size: 19px; }
  .legal { display: flex; gap: 24px; margin-top: 24px; }
  .legal a { color: var(--red); font-size: 18px; }

  /* Unterseiten */
  .legal-text { color: var(--brown); font-size: 18px; line-height: 1.6; max-width: 760px; }
  .legal-text h1 { font: 400 clamp(32px, 8vw, 44px)/1.1 var(--serif); margin-bottom: 28px; overflow-wrap: anywhere; }
  .impressum dl > div { margin-bottom: 6px; }
  .impressum dt { font-weight: 700; display: inline; }
  .impressum dd { display: inline; }
  .impressum dd.nw { white-space: nowrap; }
  .impressum .credit { margin-top: 28px; }
  .legal-text a.plain { text-decoration: none; }
  .datenschutz h2 { font: 600 19px/1.4 var(--sans); margin-top: 28px; }
  .datenschutz ul { padding-left: 24px; }
  .site-footer--sub { padding: 0 20px 40px; max-width: 1000px; margin-inline: auto; }
  .site-footer--sub nav { display: flex; gap: 20px; flex-wrap: wrap; }
  .site-footer--sub a { color: var(--brown); font-size: 16px; }
}

@media (max-width: 480px) {
  .team { gap: 64px; }
}

/* ========== Fahrzeug (freigestellt) ========== */
.van { filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .35)); object-fit: contain; }
@media (max-width: 1199.98px) {
  .s2 .band { top: 0; }
  .s2 .van { margin-top: 32px; height: auto; aspect-ratio: 1126 / 712; }
}

/* ========== Animationen ========== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hero-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-slide { from { transform: translateY(18px); } to { transform: none; } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes roll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }

/* "Since 2002" dreht sich langsam */
.badge { animation: spin 30s linear infinite; will-change: transform; }
.stat__num { font-variant-numeric: tabular-nums; }

/* Hero beim Laden; Logo und H1 nur mit Bewegung (sonst verzögert sich LCP) */
.s1 .kicker { animation: hero-up .8s ease-out both; }
.s1 .h1, .s1 .logo-hero { animation: hero-slide .9s ease-out both; }
.s1 .tagline { animation: hero-up .8s .25s ease-out both; }
.s1 .stars { animation: hero-up .8s .4s ease-out both; }
.s1 .deco { animation: hero-fade 1.2s .2s ease-out both; }
.s1 .deco.sway { animation: hero-fade 1.2s .2s ease-out both, sway 7s 1.4s ease-in-out infinite; transform-origin: 70% 100%; }
.s5 .deco.roll { animation: roll 6s ease-in-out infinite; }

/* Hover-Übergänge (vor .reveal, damit die Einblendung Vorrang hat) */
.service img, .partner, .member img { transition: transform .35s ease; }

/* Scroll-Einblendung (Klasse .reveal wird nur per JS gesetzt und danach wieder entfernt) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease-out var(--d, 0s), transform .8s ease-out var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* Hover */
.service:hover img { transform: scale(1.04); }
.partner:hover, .partner:focus-within { transform: scale(1.04); }
.member:hover img { transform: scale(1.03); }
.site-nav a, .contact a, .legal a, .legal-text a, .site-footer--sub a { transition: color .25s ease, opacity .25s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--beige); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}
/* ========== QR-Code (digitale Visitenkarte) ========== */
.qr { display: block; transition: transform .3s ease; }
.qr picture, .qr img { display: block; width: 100%; height: auto; }
.qr:hover, .qr:focus-visible { transform: scale(1.04); }
.qr img { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
@media (max-width: 1199.98px) {
  .qr--band { width: 170px; }
}
@media (max-width: 599.98px) {
  .qr--band { display: none; }
  .qr--foot { width: 180px; justify-self: center; margin-top: 8px; }
}

/* ========== Sterne mit Krone: Glanz + Puls, Einladung zum Bewerten ========== */
.stars { cursor: pointer; animation: star-pulse 3.2s ease-in-out infinite; }
.s1 .stars { animation: hero-up .8s .4s ease-out both, star-pulse 3.2s 1.4s ease-in-out infinite; }
.stars img { animation: star-glow 3.2s ease-in-out infinite; }
.stars::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 105 / 42; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  -webkit-mask: url("../img/stars.webp") center / 100% 100% no-repeat;
  mask: url("../img/stars.webp") center / 100% 100% no-repeat;
  animation: glint 3.2s ease-in-out infinite;
}
.stars:hover, .stars:focus-visible { animation: none; transform: scale(1.15); transition: transform .25s ease; }
.stars__hint {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px);
  white-space: nowrap; font: 600 12px/1 var(--sans); letter-spacing: .02em; color: #fff;
  background: var(--red); padding: 6px 10px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.stars:hover .stars__hint, .stars:focus-visible .stars__hint { opacity: 1; transform: translate(-50%, 9px); }
@keyframes star-pulse { 0%, 62%, 100% { transform: scale(1); } 74% { transform: scale(1.14); } 86% { transform: scale(.98); } }
@keyframes star-glow { 0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(255, 214, 120, 0)); } 74% { filter: drop-shadow(0 0 7px rgba(255, 214, 120, .95)); } }
@keyframes glint { 0%, 40% { background-position: 170% 0; } 72%, 100% { background-position: -70% 0; } }
@media (max-width: 1199.98px) {
  .s1 .stars, .s8 .stars { position: relative; width: auto; display: flex; flex-direction: column; align-items: center; }
  .stars img { width: 105px; }
  .stars::after { left: 50%; width: 105px; margin-left: -52.5px; }
  .stars__hint { position: static; opacity: 1; transform: none; margin-top: 8px; }
  .stars:hover .stars__hint { transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  .stars__hint { opacity: 1; }
}
/* ========== Buttons ========== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 var(--sans); letter-spacing: .02em; text-decoration: none; border-radius: 999px; padding: 15px 26px; border: 0; cursor: pointer; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.btn--primary:hover, .btn--primary:focus-visible { background: #9c1a2e; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }
@media (min-width: 1200px) {
  .btn--hero, .btn--contact { font-size: calc(15 * var(--u)); padding: calc(15 * var(--u)) calc(26 * var(--u)); width: auto !important; }
  .s1 .btn--hero { animation: hero-up .8s .55s ease-out both; }
}
@media (max-width: 1199.98px) {
  .s1 .btn--hero { order: 5; margin-top: 24px; }
  .s8 .btn--contact { margin-top: 12px; }
}

/* ========== Navigation: Dropdown Leistungen + Offerte ========== */
.site-nav .has-sub { position: relative; }
.site-nav .sub { list-style: none; margin: 0; padding: 8px 0; }
.site-nav .nav-cta { background: var(--red); padding: 8px 14px; border-radius: 999px; }
.site-nav .nav-cta:hover { background: #9c1a2e; color: #fff; }
@media (min-width: 1200px) {
  .site-nav ul { align-items: center; }
  .site-nav .sub { display: none; position: absolute; right: -16px; top: 100%; margin-top: 10px; min-width: 260px; background: #5f5f5f; border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); flex-direction: column; gap: 0; }
  .site-nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .site-nav .has-sub:hover .sub, .site-nav .has-sub:focus-within .sub { display: flex; }
  .site-nav .sub a { display: block; padding: 10px 18px; font-weight: 600; }
  .site-nav .sub a:hover { background: rgba(255, 255, 255, .08); }
}
@media (max-width: 1199.98px) {
  .site-nav { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .site-nav .sub { padding: 0 0 6px 16px; }
  .site-nav .sub a { font-weight: 500; font-size: 15px; padding: 9px 20px; }
  .site-nav .nav-cta { display: inline-block; margin: 8px 20px; }
}

/* ========== Leistungslinks in den Spalten ========== */
.more { display: inline-block; margin-top: 10px; color: var(--red); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.more:hover { color: #5c0c1a; }
@media (min-width: 1200px) { .service .more { font-size: calc(14 * var(--u)); margin-top: calc(10 * var(--u)); } }

/* ========== Offerten-Formular ========== */
.offerte { position: relative; z-index: 1; padding: 72px 20px 88px; }
.offerte__inner { max-width: 860px; margin: 0 auto; background: var(--cream); border-radius: 18px; padding: 48px 56px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); color: var(--brown); }
.offerte__title { font: 400 44px/1.1 var(--serif); color: var(--red); margin: 0 0 12px; }
.offerte__lead { font-size: 17px; line-height: 1.6; margin: 0 0 28px; }
.offerte__lead a { color: var(--red); font-weight: 600; }
.offerte__form { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 15px; color: var(--brown); }
.field input[type=text], .field input[type=tel], .field input[type=email], .field textarea, .field input[type=file] {
  font: 400 16px/1.4 var(--sans); color: #2b2220; background: #fff; border: 1.5px solid #cfc7b4; border-radius: 10px; padding: 12px 14px; width: 100%;
}
.field input[type=file] { padding: 10px; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(130, 18, 37, .18); }
.field [aria-invalid=true] { border-color: #b3261e; }
.field__error { color: #b3261e; font-size: 14px; font-weight: 600; margin: 0; }
.field--checks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.field--checks legend { width: 100%; margin-bottom: 8px; padding: 0; }
.check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 16px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--red); margin: 1px 0 0; flex: none; }
.check--consent a { color: var(--red); }
.req { color: var(--red); }
.opt { font-weight: 400; color: #6d5f5c; font-size: 14px; }
.form-hint { font-size: 14px; color: #6d5f5c; margin: 0; }
.offerte__form .btn { justify-self: start; font-size: 16px; padding: 16px 32px; }
.form-msg { border-radius: 12px; padding: 16px 18px; margin-bottom: 22px; font-size: 16px; line-height: 1.5; }
.form-msg--ok { background: #e6f2e6; color: #1e5a26; border: 1.5px solid #8cc08f; }
.form-msg--error { background: #fbe9e7; color: #8a1c14; border: 1.5px solid #e3a59f; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 700px) {
  .offerte { padding: 48px 12px 64px; }
  .offerte__inner { padding: 28px 20px; border-radius: 14px; }
  .offerte__title { font-size: 34px; }
  .form-grid { grid-template-columns: 1fr; }
  .offerte__form .btn { width: 100%; justify-self: stretch; }
}

/* ========== Leistungs- und Ortsseiten ========== */
.cp { position: relative; z-index: 1; padding: 28px 20px 80px; color: var(--brown); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 24px; font-size: 14px; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #cbc5b2; }
.breadcrumb a { color: #fff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: #e7e2d4; }
.cp__kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 700; color: var(--beige); margin: 0 0 8px; }
.cp__h1 { font: 400 clamp(34px, 5vw, 56px)/1.08 var(--serif); color: var(--red); margin: 0 0 18px; }
.cp__intro p, .cp__section p, .cp__section li { font-size: 17px; line-height: 1.7; }
.cp__intro { margin-bottom: 22px; }
.cp__section { margin-top: 40px; }
.cp__section h2, .cp__cta h2 { font: 400 clamp(26px, 3vw, 34px)/1.15 var(--serif); color: var(--red); margin: 0 0 12px; }
.cp__section h3 { font: 400 22px/1.2 var(--serif); color: var(--red); margin: 22px 0 6px; }
.cp__section ul, .cp__section ol { padding-left: 22px; }
.cp__section li { margin-bottom: 8px; }
.cp__section a, .cp__intro a { color: var(--red); font-weight: 600; }
.cp__faq details { background: var(--cream); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.cp__faq summary { cursor: pointer; font-weight: 700; font-size: 17px; color: var(--brown); }
.cp__faq details p { margin: 10px 0 0; }
.cp__cta { margin-top: 44px; background: var(--red); color: #fff; border-radius: 16px; padding: 28px 30px; }
.cp__cta h2 { color: #fff; }
.cp__cta p { font-size: 17px; line-height: 1.6; }
.cp__cta a:not(.btn) { color: #fff; font-weight: 700; }
.cp__cta .btn { background: var(--cream); color: var(--red); margin-top: 6px; }
.cp__img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 26px rgba(0, 0, 0, .3); }
.cp__box { background: var(--cream); border-radius: 14px; padding: 18px 20px; margin-top: 20px; font-size: 15px; line-height: 1.6; }
.cp__box p { margin: 0 0 8px; }
.cp__box a { color: var(--red); font-weight: 600; }
.cp__box-title { font: 400 20px/1.2 var(--serif); color: var(--red); }
.cp__links ul { list-style: none; padding: 0; margin: 0; }
.cp__links li { margin: 4px 0; }
@media (min-width: 1200px) {
  .cp { width: calc(1440 * var(--u)); margin-inline: auto; padding: calc(32 * var(--u)) 0 calc(100 * var(--u)) calc(177 * var(--u)); }
  .cp__grid { display: grid; grid-template-columns: calc(783 * var(--u)) calc(300 * var(--u)); column-gap: calc(140 * var(--u)); align-items: start; }
  .cp__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (max-width: 1199.98px) {
  .cp { max-width: 820px; margin: 0 auto; }
  .cp__aside { margin-top: 40px; }
  .cp__img { max-width: 420px; }
}

/* ========== Link-Leiste unten ========== */
.linkbar { position: relative; z-index: 1; background: #5e5e5e; color: #f1ede3; }
.linkbar__inner { max-width: 1100px; margin: 0 auto; padding: 32px 20px 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.linkbar__col { display: grid; gap: 8px; align-content: start; }
.linkbar__title { font: 400 20px/1.2 var(--serif); color: var(--beige); margin: 0 0 4px; }
.linkbar a { color: #fff; text-decoration: none; font-size: 15px; }
.linkbar a:hover { text-decoration: underline; }
@media (max-width: 700px) { .linkbar__inner { grid-template-columns: 1fr; } }

/* ========== Kontakt-Leiste am Handy + WhatsApp-Button ========== */
.contactbar { display: none; }
@media (max-width: 767.98px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .contactbar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(70, 70, 70, .97); box-shadow: 0 -6px 18px rgba(0, 0, 0, .3); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 8px; transition: transform .25s ease; }
  .contactbar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; border-radius: 12px; color: #fff; text-decoration: none; font: 700 13px/1 var(--sans); background: rgba(255, 255, 255, .08); }
  .contactbar__btn svg { width: 22px; height: 22px; fill: currentColor; }
  .contactbar__btn--cta { background: var(--red); }
  .kb-open .contactbar { transform: translateY(110%); }
  .wa-float { display: none; }
}
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 54px; height: 54px; border-radius: 50%; background: #2f8f5b; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); opacity: .9; transition: transform .25s ease, opacity .25s ease; }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }
.wa-float:hover, .wa-float:focus-visible { opacity: 1; transform: scale(1.08); }
/* Inhaltsseiten: Haupttext auf Creme-Karte (Lesbarkeit/Kontrast) */
.cp__main { background: var(--cream); border-radius: 18px; padding: 40px 48px 44px; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.cp__kicker { color: var(--rust); }
.cp__intro p, .cp__section p, .cp__section li { color: #3f302e; }
.cp__faq details { background: #fff; border: 1px solid #e0dacb; }
@media (max-width: 700px) { .cp__main { padding: 26px 20px 30px; border-radius: 14px; } }@media (max-width: 767.98px) { .wa-float { display: none; } }
.cp__h1 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 700px) { .cp__h1 { font-size: clamp(28px, 8.4vw, 40px); } }

/* ===================================================================
   Anpassungen von Ramon (live bis 31.10.2026, 13:18 UTC) – bleiben zuletzt,
   damit sie Vorrang haben.
   =================================================================== */
/* ========== Livit pulsiert dauerhaft ========== */
.partner--pulse { animation: partner-pulse 2s ease-in-out infinite; }
.partner--pulse::before { animation: ring-glow 2s ease-in-out infinite; }
@keyframes partner-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ring-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(130, 18, 37, 0); } 50% { box-shadow: 0 0 24px 6px rgba(130, 18, 37, .6); } }
@media (max-width: 1199.98px) {
  .partner--pulse { animation: partner-pulse 2s ease-in-out infinite, ring-glow 2s ease-in-out infinite; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .stars__hint { opacity: 1; }
}

/* Roter Balken und Livit-Schriftzug */
.s2 .qr--band { display: none; }
.partner--pulse, .partner--pulse::before { animation: none; }
.partner--pulse:hover, .partner--pulse:focus-within { transform: none; }
.partner--pulse img { animation: partner-pulse 2s ease-in-out infinite; }
@media (min-width: 1200px) {
  .s2 .van { --x: 260 !important; }
  .s2 .badge { --x: 900 !important; --y: 178 !important; --w: 238 !important; --h: 225.4 !important; }
}
@media (max-width: 1199.98px) {
  .s2 .badge { width: min(49%, 210px); }
}
@media (prefers-reduced-motion: reduce) {
  .partner--pulse img { animation: none; }
}

/* Fahrzeug im Fokus, Stempel dezent schwenken */
@keyframes badge-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.s2 .badge { animation: badge-sway 4s ease-in-out infinite; }
@media (min-width: 1200px) {
  .s2 .van { --x: 205 !important; --y: 110 !important; --w: 570 !important; --h: 361 !important; }
  .s2 .badge { --x: 905 !important; --y: 178 !important; }
}
@media (max-width: 1199.98px) {
  .s2 .van { width: min(95%, 540px); }
  .s2 .badge { width: min(42%, 190px); }
}
@media (prefers-reduced-motion: reduce) {
  .s2 .badge { animation: none; }
}

/* Fahrzeug und Stempel als gemeinsame Komposition */
@media (min-width: 1200px) {
  .s2 .band { --x: 220 !important; --w: 1000 !important; }
  .s2 .van { --x: 290 !important; }
  .s2 .badge { --x: 868 !important; --y: 155 !important; }
}
@media (max-width: 1199.98px) {
  .s2 { flex-direction: row; justify-content: center; gap: 0; }
  .s2 .van { flex: 0 0 auto; width: min(70%, 540px); }
  .s2 .badge { flex: 0 0 auto; width: min(28%, 190px); margin-top: 32px; margin-left: -2%; }
}

/* Desktop: Balken auf die Hauptüberschrift ausrichten */
@media (min-width: 1200px) {
  .s2 .band { --x: 175 !important; --w: 1100 !important; }
  .s2 .van { --x: 355 !important; z-index: 2; }
  .s2 .badge { --x: 900 !important; --y: 134 !important; z-index: 1; }
}

/* Stempel fest ausrichten und näher am Fahrzeug platzieren */
.s2 .badge { animation: none; transform: rotate(40deg); z-index: 1; }
.s2 .van { z-index: 2; }
@media (min-width: 1200px) {
  .s2 .band { --x: 175 !important; --w: 1000 !important; }
  .s2 .van { --x: 295 !important; }
  .s2 .badge { --x: 842 !important; --y: 140 !important; }
}

/* Fahrzeug-Komposition mit ruhiger roter Fläche */
.s2 .band { background: linear-gradient(110deg, #74101f, #8e192b); box-shadow: 0 14px 30px rgba(40, 20, 20, .18); }
@media (min-width: 1200px) {
  .s2 .band { --x: 175 !important; --y: 145 !important; --w: 1000 !important; --h: 340 !important; border-radius: 20px; }
  .s2 .van { --x: 255 !important; --y: 70 !important; --w: 640 !important; --h: 405 !important; }
  .s2 .badge { --x: 850 !important; --y: 200 !important; }
}
@media (max-width: 1199.98px) {
  .s2 .band { border-radius: 16px; }
}

/* Desktop-Menü mittig ausrichten; mobiles Menü bleibt unverändert. */
@media (min-width: 1200px) {
  .site-header { justify-content: center; }
}


/* Farbkanten an den Malerfiguren, nur auf der Startseite. */
@media (min-width: 1200px) {
  .page:has(#home) > .stripe {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%205383%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H66V5383H0Z%20M0%20102%20C8%2099%2011%20105%2018%20102%20S30%20106%2038%20103%20S55%20107%2066%20102%20L66%20130%20C57%20133%2054%20126%2045%20130%20S32%20126%2024%20131%20S9%20127%200%20132Z%20M0%204135%20C8%204132%2012%204138%2020%204135%20S31%204139%2040%204135%20S56%204140%2066%204136%20L66%204167%20C58%204164%2053%204170%2044%204166%20S31%204170%2024%204165%20S9%204171%200%204167Z%20M0%202842%20Q5%202839%208%202844%20L7%202855%20Q4%202852%200%202858Z%20M3%202864%20Q7%202860%2011%202865%20L10%202875%20Q7%202877%205%202872Z%20M14%202835%20Q19%202831%2022%202837%20L20%202856%20Q17%202853%2015%202860Z%20M21%202871%20Q24%202867%2028%202871%20L27%202885%20Q24%202888%2022%202882Z%20M29%202845%20Q33%202840%2037%202844%20L36%202862%20Q32%202860%2030%202868Z%20M40%202829%20Q43%202827%2046%202832%20L44%202848%20Q41%202851%2040%202847Z%20M39%202868%20Q43%202864%2047%202869%20L45%202881%20Q42%202883%2039%202879Z%20M55%202848%20Q59%202845%2062%202849%20L60%202862%20Q57%202865%2055%202861Z%20M0%205139%20Q4%205136%208%205140%20L7%205155%20Q3%205153%200%205159Z%20M5%205166%20Q8%205163%2012%205167%20L10%205180%20Q7%205182%205%205177Z%20M14%205129%20Q18%205126%2022%205131%20L20%205148%20Q17%205145%2015%205154Z%20M22%205160%20Q25%205156%2029%205160%20L28%205181%20Q25%205184%2023%205178Z%20M32%205139%20Q36%205135%2039%205140%20L38%205159%20Q34%205156%2033%205164Z%20M41%205166%20Q45%205162%2048%205167%20L46%205181%20Q43%205183%2041%205179Z%20M55%205142%20Q59%205139%2062%205144%20L60%205159%20Q57%205162%2055%205158Z%22%2F%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M4%20106h3v16H4z%20M12%20109h2v15h-2z%20M20%20104h4v20h-4z%20M32%20110h2v14h-2z%20M41%20106h3v18h-3z%20M56%20109h3v16h-3z%20M5%204139h3v20H5z%20M13%204143h2v15h-2z%20M23%204139h3v20h-3z%20M34%204145h2v14h-2z%20M43%204140h4v20h-4z%20M56%204143h3v16h-3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%205383%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H66V5383H0Z%20M0%20102%20C8%2099%2011%20105%2018%20102%20S30%20106%2038%20103%20S55%20107%2066%20102%20L66%20130%20C57%20133%2054%20126%2045%20130%20S32%20126%2024%20131%20S9%20127%200%20132Z%20M0%204135%20C8%204132%2012%204138%2020%204135%20S31%204139%2040%204135%20S56%204140%2066%204136%20L66%204167%20C58%204164%2053%204170%2044%204166%20S31%204170%2024%204165%20S9%204171%200%204167Z%20M0%202842%20Q5%202839%208%202844%20L7%202855%20Q4%202852%200%202858Z%20M3%202864%20Q7%202860%2011%202865%20L10%202875%20Q7%202877%205%202872Z%20M14%202835%20Q19%202831%2022%202837%20L20%202856%20Q17%202853%2015%202860Z%20M21%202871%20Q24%202867%2028%202871%20L27%202885%20Q24%202888%2022%202882Z%20M29%202845%20Q33%202840%2037%202844%20L36%202862%20Q32%202860%2030%202868Z%20M40%202829%20Q43%202827%2046%202832%20L44%202848%20Q41%202851%2040%202847Z%20M39%202868%20Q43%202864%2047%202869%20L45%202881%20Q42%202883%2039%202879Z%20M55%202848%20Q59%202845%2062%202849%20L60%202862%20Q57%202865%2055%202861Z%20M0%205139%20Q4%205136%208%205140%20L7%205155%20Q3%205153%200%205159Z%20M5%205166%20Q8%205163%2012%205167%20L10%205180%20Q7%205182%205%205177Z%20M14%205129%20Q18%205126%2022%205131%20L20%205148%20Q17%205145%2015%205154Z%20M22%205160%20Q25%205156%2029%205160%20L28%205181%20Q25%205184%2023%205178Z%20M32%205139%20Q36%205135%2039%205140%20L38%205159%20Q34%205156%2033%205164Z%20M41%205166%20Q45%205162%2048%205167%20L46%205181%20Q43%205183%2041%205179Z%20M55%205142%20Q59%205139%2062%205144%20L60%205159%20Q57%205162%2055%205158Z%22%2F%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M4%20106h3v16H4z%20M12%20109h2v15h-2z%20M20%20104h4v20h-4z%20M32%20110h2v14h-2z%20M41%20106h3v18h-3z%20M56%20109h3v16h-3z%20M5%204139h3v20H5z%20M13%204143h2v15h-2z%20M23%204139h3v20h-3z%20M34%204145h2v14h-2z%20M43%204140h4v20h-4z%20M56%204143h3v16h-3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}


/* Ruhige Farbunterbrechungen; unten nur im schmalen Streifen. */
@media (min-width: 1200px) {
  .page:has(#home) > .stripe {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%205383%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H66V5383H0Z%20M0%20102%20C8%2099%2011%20105%2018%20102%20S30%20106%2038%20103%20S55%20107%2066%20102%20L66%20130%20C57%20133%2054%20126%2045%20130%20S32%20126%2024%20131%20S9%20127%200%20132Z%20M0%202839%20C8%202836%2011%202842%2018%202839%20S30%202843%2038%202840%20S55%202844%2066%202839%20L66%202868%20C57%202871%2054%202864%2045%202868%20S32%202864%2024%202869%20S9%202865%200%202870Z%20M0%204135%20C8%204132%2012%204138%2020%204135%20S31%204139%2040%204135%20S56%204140%2066%204136%20L66%204167%20C58%204164%2053%204170%2044%204166%20S31%204170%2024%204165%20S9%204171%200%204167Z%20M0%205014%20C10%205010%2018%205018%2028%205015%20S52%205011%2066%205015%20L66%205070%20C54%205074%2047%205067%2035%205071%20S12%205067%200%205072Z%20M50%205139%20Q54%205137%2057%205140%20T66%205140%20L66%205170%20Q61%205173%2058%205170%20T50%205171Z%22%2F%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M4%20106h3v16H4z%20M12%20109h2v15h-2z%20M20%20104h4v20h-4z%20M32%20110h2v14h-2z%20M41%20106h3v18h-3z%20M56%20109h3v16h-3z%20M4%202843h3v16H4z%20M12%202846h2v15h-2z%20M20%202841h4v20h-4z%20M32%202847h2v14h-2z%20M41%202843h3v18h-3z%20M56%202846h3v16h-3z%20M5%204139h3v20H5z%20M13%204143h2v15h-2z%20M23%204139h3v20h-3z%20M34%204145h2v14h-2z%20M43%204140h4v20h-4z%20M56%204143h3v16h-3z%20M52%205144h2v18h-2z%20M60%205146h2v17h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%205383%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H66V5383H0Z%20M0%20102%20C8%2099%2011%20105%2018%20102%20S30%20106%2038%20103%20S55%20107%2066%20102%20L66%20130%20C57%20133%2054%20126%2045%20130%20S32%20126%2024%20131%20S9%20127%200%20132Z%20M0%202839%20C8%202836%2011%202842%2018%202839%20S30%202843%2038%202840%20S55%202844%2066%202839%20L66%202868%20C57%202871%2054%202864%2045%202868%20S32%202864%2024%202869%20S9%202865%200%202870Z%20M0%204135%20C8%204132%2012%204138%2020%204135%20S31%204139%2040%204135%20S56%204140%2066%204136%20L66%204167%20C58%204164%2053%204170%2044%204166%20S31%204170%2024%204165%20S9%204171%200%204167Z%20M0%205014%20C10%205010%2018%205018%2028%205015%20S52%205011%2066%205015%20L66%205070%20C54%205074%2047%205067%2035%205071%20S12%205067%200%205072Z%20M50%205139%20Q54%205137%2057%205140%20T66%205140%20L66%205170%20Q61%205173%2058%205170%20T50%205171Z%22%2F%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M4%20106h3v16H4z%20M12%20109h2v15h-2z%20M20%20104h4v20h-4z%20M32%20110h2v14h-2z%20M41%20106h3v18h-3z%20M56%20109h3v16h-3z%20M4%202843h3v16H4z%20M12%202846h2v15h-2z%20M20%202841h4v20h-4z%20M32%202847h2v14h-2z%20M41%202843h3v18h-3z%20M56%202846h3v16h-3z%20M5%204139h3v20H5z%20M13%204143h2v15h-2z%20M23%204139h3v20h-3z%20M34%204145h2v14h-2z%20M43%204140h4v20h-4z%20M56%204143h3v16h-3z%20M52%205144h2v18h-2z%20M60%205146h2v17h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
}


/* Unterschiedlich lange offene Stellen, schmaler Streifen unten noch ungestrichen. */
@media (min-width: 1200px) {
  .page:has(#home) > .stripe {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%205383%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H66V5383H0Z%20M0%20102%20C8%2099%2011%20105%2018%20102%20S30%20106%2038%20103%20S55%20107%2066%20102%20L66%20130%20C57%20133%2054%20126%2045%20130%20S32%20126%2024%20131%20S9%20127%200%20132Z%20M0%202839%20C8%202836%2011%202842%2018%202839%20S30%202843%2038%202840%20S55%202844%2066%202839%20L66%202907%20C57%202910%2054%202903%2045%202907%20S32%202903%2024%202908%20S9%202904%200%202909Z%20M0%204135%20C8%204132%2012%204138%2020%204135%20S31%204139%2040%204135%20S56%204140%2066%204136%20L66%204185%20C58%204182%2053%204188%2044%204184%20S31%204188%2024%204183%20S9%204189%200%204185Z%20M0%205014%20C10%205010%2018%205018%2028%205015%20S52%205011%2066%205015%20L66%205070%20C54%205074%2047%205067%2035%205071%20S12%205067%200%205072Z%20M50%205139%20Q54%205137%2057%205140%20T66%205140%20V5383%20H50Z%22%2F%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M4%20106h3v16H4z%20M12%20109h2v15h-2z%20M20%20104h4v20h-4z%20M32%20110h2v14h-2z%20M41%20106h3v18h-3z%20M56%20109h3v16h-3z%20M4%202843h3v18H4z%20M12%202846h2v15h-2z%20M20%202841h4v21h-4z%20M32%202847h2v14h-2z%20M41%202843h3v18h-3z%20M56%202846h3v16h-3z%20M5%204139h3v20H5z%20M13%204143h2v15h-2z%20M23%204139h3v20h-3z%20M34%204145h2v14h-2z%20M43%204140h4v20h-4z%20M56%204143h3v16h-3z%20M52%205144h2v15h-2z%20M60%205146h2v13h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%205383%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H66V5383H0Z%20M0%20102%20C8%2099%2011%20105%2018%20102%20S30%20106%2038%20103%20S55%20107%2066%20102%20L66%20130%20C57%20133%2054%20126%2045%20130%20S32%20126%2024%20131%20S9%20127%200%20132Z%20M0%202839%20C8%202836%2011%202842%2018%202839%20S30%202843%2038%202840%20S55%202844%2066%202839%20L66%202907%20C57%202910%2054%202903%2045%202907%20S32%202903%2024%202908%20S9%202904%200%202909Z%20M0%204135%20C8%204132%2012%204138%2020%204135%20S31%204139%2040%204135%20S56%204140%2066%204136%20L66%204185%20C58%204182%2053%204188%2044%204184%20S31%204188%2024%204183%20S9%204189%200%204185Z%20M0%205014%20C10%205010%2018%205018%2028%205015%20S52%205011%2066%205015%20L66%205070%20C54%205074%2047%205067%2035%205071%20S12%205067%200%205072Z%20M50%205139%20Q54%205137%2057%205140%20T66%205140%20V5383%20H50Z%22%2F%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M4%20106h3v16H4z%20M12%20109h2v15h-2z%20M20%20104h4v20h-4z%20M32%20110h2v14h-2z%20M41%20106h3v18h-3z%20M56%20109h3v16h-3z%20M4%202843h3v18H4z%20M12%202846h2v15h-2z%20M20%202841h4v21h-4z%20M32%202847h2v14h-2z%20M41%202843h3v18h-3z%20M56%202846h3v16h-3z%20M5%204139h3v20H5z%20M13%204143h2v15h-2z%20M23%204139h3v20h-3z%20M34%204145h2v14h-2z%20M43%204140h4v20h-4z%20M56%204143h3v16h-3z%20M52%205144h2v15h-2z%20M60%205146h2v13h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
}

/* Ergänzung zu Ramons Farbkanten: Die Startseite hat jetzt zusätzlich das Offerten-Formular
   und die Link-Leiste. Damit die Farbkanten weiterhin genau bei den Malerfiguren sitzen,
   wird die Maske im ursprünglichen Massstab (Header + 8 Abschnitte = 48px + 5335u) verwendet:
   - Hauptstreifen: Abschnitte 1–7
   - Formular-Abschnitt: eigener, schlichter Streifen
   - Kontakt-Abschnitt: eigener Streifen mit dem passenden Teil der Maske */
@media (min-width: 1200px) {
  .page:has(#home) > .stripe {
    bottom: auto;
    height: calc(var(--header-h) + 4652 * var(--u));
    -webkit-mask-size: 100% calc(var(--header-h) + 5335 * var(--u)); mask-size: 100% calc(var(--header-h) + 5335 * var(--u));
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
  .stripe--seg { top: 0; bottom: 0; }
  .offerte > .stripe--seg { left: calc(50% + (1029 - 720) * var(--u)); }
  .offerte__inner { position: relative; z-index: 1; }
  .s8 > .stripe--seg {
    left: calc(1029 * var(--u));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%205383%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H66V5383H0Z%20M0%20102%20C8%2099%2011%20105%2018%20102%20S30%20106%2038%20103%20S55%20107%2066%20102%20L66%20130%20C57%20133%2054%20126%2045%20130%20S32%20126%2024%20131%20S9%20127%200%20132Z%20M0%202839%20C8%202836%2011%202842%2018%202839%20S30%202843%2038%202840%20S55%202844%2066%202839%20L66%202907%20C57%202910%2054%202903%2045%202907%20S32%202903%2024%202908%20S9%202904%200%202909Z%20M0%204135%20C8%204132%2012%204138%2020%204135%20S31%204139%2040%204135%20S56%204140%2066%204136%20L66%204185%20C58%204182%2053%204188%2044%204184%20S31%204188%2024%204183%20S9%204189%200%204185Z%20M0%205014%20C10%205010%2018%205018%2028%205015%20S52%205011%2066%205015%20L66%205070%20C54%205074%2047%205067%2035%205071%20S12%205067%200%205072Z%20M50%205139%20Q54%205137%2057%205140%20T66%205140%20V5383%20H50Z%22%2F%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M4%20106h3v16H4z%20M12%20109h2v15h-2z%20M20%20104h4v20h-4z%20M32%20110h2v14h-2z%20M41%20106h3v18h-3z%20M56%20109h3v16h-3z%20M4%202843h3v18H4z%20M12%202846h2v15h-2z%20M20%202841h4v21h-4z%20M32%202847h2v14h-2z%20M41%202843h3v18h-3z%20M56%202846h3v16h-3z%20M5%204139h3v20H5z%20M13%204143h2v15h-2z%20M23%204139h3v20h-3z%20M34%204145h2v14h-2z%20M43%204140h4v20h-4z%20M56%204143h3v16h-3z%20M52%205144h2v15h-2z%20M60%205146h2v13h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2066%205383%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H66V5383H0Z%20M0%20102%20C8%2099%2011%20105%2018%20102%20S30%20106%2038%20103%20S55%20107%2066%20102%20L66%20130%20C57%20133%2054%20126%2045%20130%20S32%20126%2024%20131%20S9%20127%200%20132Z%20M0%202839%20C8%202836%2011%202842%2018%202839%20S30%202843%2038%202840%20S55%202844%2066%202839%20L66%202907%20C57%202910%2054%202903%2045%202907%20S32%202903%2024%202908%20S9%202904%200%202909Z%20M0%204135%20C8%204132%2012%204138%2020%204135%20S31%204139%2040%204135%20S56%204140%2066%204136%20L66%204185%20C58%204182%2053%204188%2044%204184%20S31%204188%2024%204183%20S9%204189%200%204185Z%20M0%205014%20C10%205010%2018%205018%2028%205015%20S52%205011%2066%205015%20L66%205070%20C54%205074%2047%205067%2035%205071%20S12%205067%200%205072Z%20M50%205139%20Q54%205137%2057%205140%20T66%205140%20V5383%20H50Z%22%2F%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.36%22%3E%3Cpath%20d%3D%22M4%20106h3v16H4z%20M12%20109h2v15h-2z%20M20%20104h4v20h-4z%20M32%20110h2v14h-2z%20M41%20106h3v18h-3z%20M56%20109h3v16h-3z%20M4%202843h3v18H4z%20M12%202846h2v15h-2z%20M20%202841h4v21h-4z%20M32%202847h2v14h-2z%20M41%202843h3v18h-3z%20M56%202846h3v16h-3z%20M5%204139h3v20H5z%20M13%204143h2v15h-2z%20M23%204139h3v20h-3z%20M34%204145h2v14h-2z%20M43%204140h4v20h-4z%20M56%204143h3v16h-3z%20M52%205144h2v15h-2z%20M60%205146h2v13h-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% calc(var(--header-h) + 5335 * var(--u)); mask-size: 100% calc(var(--header-h) + 5335 * var(--u));
    -webkit-mask-position: 0 calc(-1 * (var(--header-h) + 4652 * var(--u))); mask-position: 0 calc(-1 * (var(--header-h) + 4652 * var(--u)));
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}

/* Brotkrumen immer einzeilig (verhindert Layout-Sprung beim Nachladen der Schrift) */
.breadcrumb ol { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.breadcrumb li { flex: none; }
.breadcrumb li[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ========== Seite /offerte ========== */
.btn--secondary { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .85); box-shadow: none; padding: 13px 24px; }
.btn--secondary:hover, .btn--secondary:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
.offerte__inner .btn--secondary { color: var(--red); border-color: var(--red); }
.offerte__inner .btn--secondary:hover, .offerte__inner .btn--secondary:focus-visible { background: rgba(130, 18, 37, .08); color: var(--red); }
.btn--back { margin: 0 0 22px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cp--offerte .offerte__inner { position: relative; z-index: 1; }
@media (min-width: 1200px) {
  .cp--offerte { padding-right: calc(177 * var(--u)); }
  .cp--offerte .offerte__inner { max-width: calc(860 * var(--u)); margin: 0; }
}
@media (max-width: 700px) {
  .form-actions .btn { width: 100%; }
}

/* ========== Erfolgsmeldung (Toast) ========== */
.toast { position: fixed; z-index: 70; left: 50%; top: calc(var(--header-h) + 16px); transform: translateX(-50%);
  width: min(620px, calc(100% - 32px)); display: flex; align-items: flex-start; gap: 14px;
  background: var(--cream); color: var(--brown); border-left: 6px solid var(--red); border-radius: 14px;
  padding: 18px 18px 18px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: toast-in .4s ease-out both;
  transition: opacity .35s ease, transform .35s ease; }
.toast__text { margin: 0; font-size: 17px; line-height: 1.5; }
.toast__text strong { color: var(--red); }
.toast__close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--red); color: #fff; font: 700 22px/1 var(--sans); cursor: pointer; }
.toast__close:hover { background: #9c1a2e; }
.toast--hide { opacity: 0; transform: translate(-50%, -12px); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Bessere Lesbarkeit auf dem grauen Hintergrund */
#werte .werte h2,
#werte .werte h3,
#werte .werte p,
#werte .werte li,
#dienstleistungen .service p {
  color: #fffdf4;
}

/* Bereichstitel in hellem Beige */
#h-team, #h-zahlen, #h-dienst, #h-ref { color: #fffdf4; }

/* Titel und Kontaktangaben */
#h-team, #h-zahlen, #h-dienst, #h-ref { color: var(--cream); }
.cp__faq summary, .cp__box-title { color: var(--red); }


/* Bilder und Titel der Leistungen als Links */
.service__link { display: block; color: inherit; text-decoration: none; }
.service__link:hover h3 { text-decoration: underline; text-underline-offset: .12em; }
.service__link:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
@media (min-width: 1200px) { .service__link + p { margin-top: calc(14 * var(--u)); } }
@media (max-width: 1199px) { .service__link + p { margin-top: 10px; } }

/* Beigefarbene Schrift im Farbton der beiden Linien */
#werte .werte h2, #werte .werte h3, #werte .werte p, #werte .werte li,
#dienstleistungen .service p, #h-team, #h-zahlen, #h-dienst, #h-ref,
.member__name, .linkbar__title { color: var(--beige-grey); }

/* Überschriften in Rot */
#werte .werte h2, #werte .werte h3, #h-team, #h-zahlen, #h-dienst, #h-ref { color: var(--red); }

/* QR-Code neben den Kontaktangaben */
@media (max-width: 1199px) {
  .s8 {
    grid-template-columns: minmax(0, 1fr) clamp(72px, 25vw, 110px);
    grid-template-areas: "logo logo" "tagline tagline" "stars stars" "heading heading" "contact qr" "hourstitle hourstitle" "hours hours" "button button";
    column-gap: 10px;
  }
  .s8 .logo-foot { grid-area: logo; }
  .s8 .tagline { grid-area: tagline; }
  .s8 .stars { grid-area: stars; }
  .s8 .h-contact { grid-area: heading; }
  .s8 .contact { grid-area: contact; min-width: 0; }
  .s8 .qr--foot { grid-area: qr; width: 100%; max-width: 110px; margin: 0; align-self: start; }
  .s8 .h-hours { grid-area: hourstitle; }
  .s8 .hours { grid-area: hours; }
  .s8 .btn--contact { grid-area: button; }
}

@media (max-width: 600px) { .s8 .contact__line { font-size: 17px; } }

/* QR-Code auf kleinen Bildschirmen an die Kontaktdaten anpassen */
@media (max-width: 600px) {
  .s8 { grid-template-columns: minmax(0, 1fr) clamp(96px, 30vw, 130px); }
  .s8 .qr--foot { max-width: 130px; }
}
@media (max-width: 360px) {
  .s8 .contact__line { font-size: 15px; padding-left: 25px; background-size: 19px auto; }
  .s8 .contact__line--pin { background-size: 18px auto; }
}

@media (max-width: 600px) { .s8 .contact__line { padding-left: 25px; background-size: 19px auto; } .s8 .contact__line--pin { background-size: 18px auto; } }

/* Direkter E-Mail-Kontakt am Desktop */
.mail-float { position: fixed; right: 22px; bottom: 88px; z-index: 60; width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); opacity: .95; transition: transform .25s ease, opacity .25s ease; }
.mail-float svg { width: 27px; height: 27px; fill: currentColor; }
.mail-float:hover, .mail-float:focus-visible { opacity: 1; transform: scale(1.08); }
@media (max-width: 767.98px) { .mail-float { display: none; } }