/* ============================================
   VINELLY.CH — Design System
   Inspired by pesocol.com aesthetic:
   clean lines, premium whitespace, warm neutrals
   ============================================ */

/* Ziffern 0-9 site-weit in Arial (Vorgabe 15.07.2026):
   unicode-range-Override ersetzt NUR den Zahlenbereich der geladenen
   Webfonts — Buchstaben bleiben unverändert. Greift dadurch auch in
   Inline-Styles mit hartkodierter Schriftfamilie. */
@font-face { font-family: 'Cormorant Garamond'; src: local('Arial'), local('Helvetica'), local('Roboto'); font-weight: 400; unicode-range: U+0030-0039; }
@font-face { font-family: 'Cormorant Garamond'; src: local('Arial'), local('Helvetica'), local('Roboto'); font-weight: 500; unicode-range: U+0030-0039; }
@font-face { font-family: 'Cormorant Garamond'; src: local('Arial'), local('Helvetica'), local('Roboto'); font-weight: 600; unicode-range: U+0030-0039; }
@font-face { font-family: 'Cormorant Garamond'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); font-weight: 700; unicode-range: U+0030-0039; }
@font-face { font-family: 'Jost'; src: local('Arial'), local('Helvetica'), local('Roboto'); font-weight: 300; unicode-range: U+0030-0039; }
@font-face { font-family: 'Jost'; src: local('Arial'), local('Helvetica'), local('Roboto'); font-weight: 400; unicode-range: U+0030-0039; }
@font-face { font-family: 'Jost'; src: local('Arial'), local('Helvetica'), local('Roboto'); font-weight: 500; unicode-range: U+0030-0039; }
@font-face { font-family: 'Jost'; src: local('Arial'), local('Helvetica'), local('Roboto'); font-weight: 600; unicode-range: U+0030-0039; }
@font-face { font-family: 'Jost'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); font-weight: 700; unicode-range: U+0030-0039; }
@font-face { font-family: 'Roboto'; src: local('Arial'), local('Helvetica'); font-weight: 400; unicode-range: U+0030-0039; }
@font-face { font-family: 'Roboto'; src: local('Arial'), local('Helvetica'); font-weight: 500; unicode-range: U+0030-0039; }
@font-face { font-family: 'Roboto'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'); font-weight: 700; unicode-range: U+0030-0039; }

/* Schrift-Regel 22.07.2026: Fliesstext & kleine Texte site-weit Arial,
   grosse Titel bleiben in der Serifenschrift (var(--font-serif)).
   Basis-Schrift = Arial (body → --font-sans); Titel setzen explizit var(--font-serif).
   Hartkodierte Google-Review-Schriften ebenfalls auf Arial ziehen. */
.g-review, .g-review * { font-family: Arial, Helvetica, sans-serif !important; }

:root {
  --cream:      #FFFFFF;
  --warm-white: #FFFFFF;
  --sand:       #E8E0D5;
  --taupe:      #C4B5A5;
  --brown:      #8B7355;
  --dark:       #2C2416;
  --charcoal:   #3D3530;
  --accent:     #B8956A;
  --accent-dark:#9A7A52;
  --text:       #1A1410;
  --text-light: #1A1410;
  --border:     #DDD5C8;

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  Arial, Helvetica, sans-serif;

  --max-width: 1280px;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* Zweizeiliger Header: Reihe 1 (Logo + CTA) + Reihe 2 (Produkt-Nav) */
  --nav-row1-h: 64px;
  --nav-h: 120px;
  --ticker-h: 50px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 17px; }

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--dark);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  -webkit-hyphens: none;
}
h1 em, h2 em, h3 em, h4 em,
h1 i, h2 i, h3 i, h4 i { font-style: italic; font-weight: 400; }
h1 { font-size: clamp(3rem, 7vw, 6rem); font-weight: 400; }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.8rem); }
h3 { font-size: clamp(1.5rem, 2.8vw, 2.3rem); }
h4 { font-size: 1.35rem; }

p { color: var(--text); font-weight: 400; letter-spacing: 0.01em; }

a { color: inherit; text-decoration: none; }

/* ---- LAYOUT UTILITIES ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: clamp(4rem, 8vw, 8rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 4rem) 0; }
.section--dark { background: var(--dark); color: var(--cream); }
.section--warm { background: var(--warm-white); }
/* Reassurance-Section: Weissraum oben/unten kompakter — NUR Desktop */
@media (min-width: 769px) {
  section:has(.reassurance-head) { padding-top: 4rem; padding-bottom: 4rem; }
  .reassurance-head { padding-top: 0; margin-bottom: 5.75rem !important; }
}
.section--sand { background: #FAFAFA; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-block;
  padding: 1rem 2.6rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--dark);
  color: var(--cream);
}
.btn--primary:hover { background: var(--accent); box-shadow: 0 12px 28px rgba(184,149,106,0.32); }

.btn--outline {
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--dark);
}
.btn--outline:hover {
  background: var(--dark);
  color: var(--cream);
}

.btn--light {
  background: var(--cream);
  color: var(--dark);
}
.btn--light:hover { background: var(--accent); color: var(--cream); }

/* Konfigurator-CTA — premium Akzent-Button mit Icon, Shine & Pfeil */
.btn--config {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.15rem 2.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  border-radius: 4px;
  border-top: 1px solid rgba(255,255,255,0.35);
  text-shadow: 0 1px 2px rgba(44,36,22,0.28);
  box-shadow: 0 12px 34px rgba(154,122,82,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  overflow: hidden;
}
.btn--config::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-22deg);
  transition: left 0.75s ease;
}
.btn--config:hover {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  box-shadow: 0 18px 46px rgba(154,122,82,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn--config:hover::before { left: 130%; }
.btn--config__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.btn--config__arrow {
  display: inline-block;
  transition: transform 0.35s ease;
}
.btn--config:hover .btn--config__arrow { transform: translateX(5px); }
/* Helle Variante des Konfigurator-Buttons (auf dunklem Grund) */
.btn--config.btn--config-light {
  background: var(--cream);
  color: var(--dark);
  box-shadow: 0 10px 30px rgba(44,36,22,0.18);
}
.btn--config.btn--config-light:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--cream);
}
/* Button über volle Breite (mehr Klicks) */
.btn--block { display: flex; width: 100%; justify-content: center; text-align: center; }

/* ---- PFLEGE & ALLTAG (praktische Vertrauens-Infos) ---- */
.care-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5px; background: var(--border); border: 1px solid var(--border); }
.care-card { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--cream); padding: 1.9rem 1.85rem; }
.care-card__icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.care-card h4 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; color: var(--dark); margin-bottom: 0.45rem; }
.care-card p { font-size: 0.95rem; line-height: 1.65; color: var(--text); }
.care-tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5px; background: var(--border); border: 1px solid var(--border); }
.care-tip { background: var(--cream); padding: 1.9rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.care-tip__icon { font-size: 1.8rem; line-height: 1; margin-bottom: 0.3rem; }
.care-tip strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; color: var(--dark); }
.care-tip span { font-size: 0.92rem; line-height: 1.6; color: var(--text); }
@media (max-width: 700px) { .care-grid { grid-template-columns: 1fr; } .care-tips { grid-template-columns: repeat(2, 1fr); } }

/* ---- MODELL-GRUPPEN (Produkt-Linien mit Karten) ---- */
.model-group + .model-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.model-group__head { margin-bottom: 2rem; }
.model-group__head h3 { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 400; color: var(--dark); }
.model-group__head p { font-size: 1rem; line-height: 1.7; color: var(--text); max-width: 640px; margin-top: 0.5rem; }

/* ---- NUTZEN-LISTE (Vorteile auf einen Blick) ---- */
.benefit-list { list-style: none; margin: 1.75rem 0 2rem; }
.benefit-list li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.benefit-list li:first-child { padding-top: 0; }
.benefit-list li::before { content: '✓'; flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: var(--cream); font-size: 0.72rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 0.15rem; }
.benefit-list strong { display: block; color: var(--dark); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.1rem; }
.benefit-list span { font-size: 0.92rem; line-height: 1.55; color: var(--text); }

/* 'Für jeden Raum'-Raster: bei ungerader Kartenzahl die letzte (Waise) mittig
   zentrieren statt links mit Lücke rechts — saubere Struktur ohne Info-Verlust */
.rollo-types > .rollo-type:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.75px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .rollo-types > .rollo-type:last-child:nth-child(odd) { max-width: none; }
}

/* ---- NAVIGATION ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(250,248,245,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}

.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: var(--nav-row1-h) auto;
  grid-template-areas:
    "logo  secondary  actions"
    "products products products";
  align-items: center;
  column-gap: 1.5rem;
  max-width: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.nav__logo {
  grid-area: logo;
  justify-self: start;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--dark);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nav__logo span { color: var(--accent); }
.nav__flag {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.nav__links {
  display: contents;
}
.nav__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__row--products {
  grid-area: products;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
}
.nav__row--secondary {
  grid-area: secondary;
  gap: 1.8rem;
}
.nav__row--secondary a { color: var(--text-soft, var(--text)); }
.nav__links .nav__row--secondary a { font-family: var(--font-serif); font-size: 16px; font-weight: 500; letter-spacing: 0.12em; }
.nav__links .nav__row--products a { font-family: Arial, sans-serif; font-size: 16px; letter-spacing: 0.14em; font-weight: 500; }
.nav__links a {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.25s ease;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0; right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav__links a:hover::after,
.nav__links a.active::after { transform: scaleX(1); }
.nav__links a:hover,
.nav__links a.active { color: var(--accent); }

/* Nav dropdown (weitere Produkte) */
.nav__has-dropdown { position: relative; }
.nav__dropdown-toggle {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s;
}
.nav__has-dropdown:hover .nav__dropdown-toggle,
.nav__has-dropdown.active .nav__dropdown-toggle { color: var(--accent); }
.nav__dropdown-toggle::after { content: '⌄'; font-size: 0.9em; line-height: 1; transform: translateY(-2px); }
.nav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 215px;
  background: var(--cream);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(44,36,22,0.14);
  padding: 0.5rem 0;
  z-index: 60;
  list-style: none;
}
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  height: 1rem;
}
.nav__has-dropdown:hover .nav__dropdown,
.nav__has-dropdown:focus-within .nav__dropdown { display: block; }
.nav__dropdown li { display: block; }
.nav__dropdown a {
  display: block;
  padding: 0.6rem 1.4rem;
  white-space: nowrap;
  font-size: 0.8rem;
  font-family: var(--font-serif);
  letter-spacing: 0.16em;
}
.nav__dropdown a::after { display: none; }
.nav__dropdown a:hover,
.nav__dropdown a.active { background: var(--sand); color: var(--accent); }

/* Verschachteltes Untermenü (Zubehör → Gleiter / Vorhangstange) */
.nav__sub { position: relative; }
.nav__sub > .nav__sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.nav__sub > .nav__sub-toggle::after {
  content: '›';
  display: inline-block !important;
  font-size: 1.1em;
  line-height: 1;
  color: var(--accent);
}
.nav__sub-menu {
  display: none;
  position: absolute;
  top: -0.5rem;
  left: 100%;
  min-width: 200px;
  background: var(--cream);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(44,36,22,0.14);
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  z-index: 70;
}
.nav__sub:hover > .nav__sub-menu,
.nav__sub:focus-within > .nav__sub-menu { display: block; }
.nav__sub-menu li { display: block; }
.nav__sub-menu a {
  display: block;
  padding: 0.6rem 1.4rem;
  white-space: nowrap;
  font-size: 0.8rem;
  font-family: var(--font-serif);
  letter-spacing: 0.16em;
}
.nav__sub-menu a::after { display: none; }
.nav__sub-menu a:hover,
.nav__sub-menu a.active { background: var(--sand); color: var(--accent); }

.nav__cta {
  grid-area: actions;
  justify-self: end;
  align-self: center;
  margin-right: -1.4rem;
  font-size: 0.75rem;
  padding: 0.7rem 1.7rem;
  border-radius: 12px;
  white-space: nowrap;
  background: linear-gradient(135deg, #2e7d4f 0%, #1f5d3a 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(31,93,58,0.30);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.nav__cta:hover {
  background: linear-gradient(135deg, #1f5d3a 0%, #2e7d4f 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(31,93,58,0.40);
}

/* Konfigurator — auffälliger Direkteinstieg, gross oben im Menü */
.nav__links .nav__row--secondary a.nav__config {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.15rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(184,149,106,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.nav__links .nav__row--secondary a.nav__config::after { display: none; }
.nav__links .nav__row--secondary a.nav__config:hover,
.nav__links .nav__row--secondary a.nav__config.active {
  color: var(--cream);
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(184,149,106,0.36);
}

/* Gratis Muster — auffälliger Direkteinstieg neben dem Konfigurator */
.nav__links .nav__row--secondary a.nav__muster {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.15rem;
  background: linear-gradient(135deg, #2e7d4f 0%, #1f5d3a 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(46,125,79,0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.nav__links .nav__row--secondary a.nav__muster::before {
  content: '✦';
  font-size: 0.9rem;
  line-height: 1;
}
.nav__links .nav__row--secondary a.nav__muster::after { display: none; }
.nav__links .nav__row--secondary a.nav__muster:hover,
.nav__links .nav__row--secondary a.nav__muster.active {
  color: #fff;
  background: linear-gradient(135deg, #1f5d3a 0%, #2e7d4f 100%);
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(46,125,79,0.42);
}

.nav__hamburger {
  grid-area: actions;
  justify-self: end;
  align-self: center;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  /* Vollwertiges Tap-Ziel (≥44px) für die Handy-Bedienung */
  width: 44px;
  height: 44px;
  margin-right: -8px;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--dark);
  transition: all 0.3s ease;
}

/* ---- HERO ---- */
.hero {
  padding-top: var(--nav-h);
  min-height: calc(100vh - var(--ticker-h));
  height: calc(100vh - var(--ticker-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem var(--gutter) 1.25rem calc(var(--gutter) + max(0px, (100vw - var(--max-width)) / 2));
  max-width: calc(var(--max-width) / 2 + var(--gutter));
}

.hero__title {
  font-size: clamp(2.3rem, 3.9vw, 3.6rem);
  line-height: 1.03;
}

.hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero__title { margin-bottom: 1.25rem; }
.hero__title em {
  font-style: italic;
  color: var(--accent);
}

.hero__sub {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: 1.75rem;
}

.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__trust {
  margin-top: 1.5rem;
  display: flex;
  gap: 2.5rem;
}
.hero__trust-item { text-align: left; }
.hero__trust-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--dark);
  line-height: 1;
}
.hero__trust-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.25rem;
}

.hero__badges {
  list-style: none;
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.hero__badges li {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero__badges li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hero__visual {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}

.hero__image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__image-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--sand) 0%, var(--taupe) 50%, var(--brown) 100%);
}

.hero__badge {
  position: absolute;
  bottom: 2.5rem;
  left: 2rem;
  background: rgba(250,248,245,0.95);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero__badge-icon {
  color: var(--accent);
  flex-shrink: 0;
}
.hero__badge-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.hero__badge-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dark);
}
.hero__badge-sub {
  font-size: 0.7rem;
  color: var(--text-light);
  font-weight: 400;
}

/* ---- TICKER / ANNOUNCEMENT ---- */
.ticker {
  background: var(--dark);
  color: var(--cream);
  padding: 0.75rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker__track {
  display: inline-flex;
  gap: 4rem;
  animation: ticker 25s linear infinite;
}
.ticker__item {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ticker__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- USP STRIP ---- */
.usps {
  background: var(--warm-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.usps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.usps__item {
  padding: 2.5rem 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border-right: 1px solid var(--border);
}
.usps__item:first-child { padding-left: 0; }
.usps__item:last-child { padding-right: 0; border-right: none; }

.usps__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--accent);
}
.usps__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}
.usps__title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 0.35rem;
}
.usps__desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-light);
}
/* Handy: USP-Leiste einspaltig, kompakt (verhindert horizontales Scrollen) */
@media (max-width: 600px) {
  .usps__grid { grid-template-columns: 1fr !important; }
  .usps__item { padding: 1.4rem 0 !important; border-right: none !important; border-bottom: 1px solid var(--border); }
  .usps__item:last-child { border-bottom: none; }
}

/* ---- PRODUCTS SECTION ---- */
.products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.products__header-left .eyebrow { margin-bottom: 0.75rem; }

.eyebrow {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.eyebrow--pin::before { display: none; }
.eyebrow__pin {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--accent);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.product-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--sand);
  aspect-ratio: 4/3;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.product-card:hover .product-card__image { transform: scale(1.04); }

.product-card__image-bg {
  width: 100%;
  height: 100%;
  background: var(--sand);
  transition: transform 0.6s ease;
}

.product-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,16,10,0.78) 0%, rgba(20,16,10,0.35) 18%, transparent 32%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem 1.5rem;
}
.product-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.product-card__link {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.92;
  transition: gap 0.25s ease;
}
.product-card__link::after {
  content: '→';
  transition: transform 0.2s;
}
.product-card:hover .product-card__link { gap: 0.75rem; }
.product-card:hover .product-card__link::after { transform: translateX(4px); }

/* ---- PROCESS / HOW IT WORKS ---- */
.process__cta {
  text-align: center;
  margin-top: 3.5rem;
}
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process__steps::before {
  content: '';
  position: absolute;
  top: 2rem;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--border);
}

.process__step {
  padding: 0 2rem;
  text-align: center;
  position: relative;
}
.process__number {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--accent);
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 1;
}
.process__title {
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--font-serif);
  color: var(--dark);
  margin-bottom: 0.6rem;
}
.process__desc {
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ---- ABOUT TEASER ---- */
.about-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 500px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .35s ease;
}
.about-teaser:hover {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.about-teaser__image {
  background: linear-gradient(145deg, var(--taupe) 0%, var(--brown) 100%);
  position: relative;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.about-teaser:hover .about-teaser__image {
  transform: scale(1.04);
}
.about-teaser__cta {
  align-self: flex-start;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.about-teaser__cta span {
  display: inline-block;
  transition: transform .25s ease;
}
.about-teaser:hover .about-teaser__cta span {
  transform: translateX(4px);
}
.about-teaser__content {
  background: var(--dark);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem);
}
.about-teaser__content .eyebrow { color: var(--accent); }
.about-teaser__content .eyebrow::before { background: var(--accent); }
.about-teaser__content h2 { color: var(--cream); margin: 1rem 0 1.5rem; }
.about-teaser__content p { color: rgba(245,241,236,0.92); margin-bottom: 2rem; }

/* ---- RISIKO-REDUKTION / REASSURANCE ---- */
.reassurance__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.reassurance__item {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.reassurance__icon { color: var(--accent); margin-bottom: 1.25rem; }
.reassurance__icon svg { width: 30px; height: 30px; display: block; }
.reassurance__item h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.reassurance__item p { font-size: 0.85rem; line-height: 1.7; }
.reassurance__link {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.reassurance__link:hover { color: var(--dark); }
@media (max-width: 920px) {
  .reassurance__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .reassurance__grid { grid-template-columns: 1fr; }
}

/* ---- SERVICE / LEISTUNGEN ---- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.service-card {
  padding: 2.75rem 2.25rem;
  background: var(--cream);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.service-card__icon { color: var(--accent); margin-bottom: 1.5rem; }
.service-card__icon svg { width: 32px; height: 32px; display: block; }
.service-card h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.service-card p { font-size: 0.88rem; line-height: 1.7; }
@media (max-width: 768px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ---- TESTIMONIALS ---- */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.testimonial {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 2.5rem;
}
.testimonial__stars {
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: 0.2em;
  margin-bottom: 1.25rem;
}
.testimonial__text {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--dark);
  margin-bottom: 1.5rem;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--brown);
}
.testimonial__name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
}
.testimonial__location {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* ---- GOOGLE-REVIEW-KARTEN ---- */
.g-reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; text-align:left; }
.g-review { background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:1.5rem; font-family:'Roboto','Jost',-apple-system,sans-serif; box-shadow:0 1px 2px rgba(0,0,0,0.04); display:flex; flex-direction:column; }
.g-review__head { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:0.5rem; }
.g-review__avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Roboto','Jost',sans-serif; font-size:1rem; font-weight:500; }
.g-review__who { flex:1; min-width:0; }
.g-review__name { display:flex; align-items:center; gap:0.4rem; font-family:'Roboto','Jost',sans-serif; font-size:0.9rem; font-weight:500; color:#202124; line-height:1.25; }
.g-review__g { width:14px; height:14px; flex-shrink:0; }
.g-review__meta { font-size:0.75rem; color:#5f6368; margin-top:2px; line-height:1.3; }
.g-review__rating { display:flex; align-items:center; gap:0.5rem; margin:0.35rem 0 0.65rem; }
.g-review__stars { color:#fbbc04; letter-spacing:1px; font-size:0.85rem; }
.g-review__stars .off { color:#dadce0; }
.g-review__date { font-size:0.78rem; color:#5f6368; }
.g-review__text { font-family:'Roboto','Jost',sans-serif; font-size:0.88rem; font-style:normal; line-height:1.5; color:#202124; margin:0 0 0.85rem; font-weight:400; }
.g-review__foot { display:flex; align-items:center; gap:0.4rem; margin-top:auto; padding-top:0.5rem; border-top:1px solid #f0f0f0; }
.g-review__helpful { display:inline-flex; align-items:center; gap:0.4rem; background:transparent; border:none; color:#1a73e8; font-size:0.78rem; font-family:inherit; cursor:default; padding:0.25rem 0.5rem; border-radius:4px; }
.g-review__helpful svg { width:14px; height:14px; }
.g-review__count { font-size:0.75rem; color:#5f6368; margin-left:auto; }
@media (max-width: 900px) {
  .g-reviews { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; }
  .g-reviews .g-review:first-child { grid-column:1/-1; grid-row:2; }
  .g-review { padding:0.6rem; min-width:0; }
  .g-review__text, .g-review__meta, .g-review__name { overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
  .g-review__head { gap:0.4rem; margin-bottom:0.35rem; }
  .g-review__avatar { width:26px; height:26px; font-size:0.75rem; }
  .g-review__name { font-size:0.72rem; gap:0.25rem; }
  .g-review__g { width:11px; height:11px; }
  .g-review__meta { font-size:0.6rem; }
  .g-review__rating { gap:0.35rem; margin:0.2rem 0 0.45rem; }
  .g-review__stars { font-size:0.68rem; letter-spacing:0.5px; }
  .g-review__date { font-size:0.62rem; }
  .g-review__text { font-size:0.68rem; line-height:1.45; margin:0 0 0.5rem; }
  .g-review__foot { padding-top:0.35rem; }
  .g-review__helpful { font-size:0.62rem; padding:0.15rem 0.25rem; gap:0.25rem; }
  .g-review__helpful svg { width:11px; height:11px; }
  .g-review__count { font-size:0.6rem; }
}

/* ---- GOOGLE-BEWERTUNGS-BADGE ---- */
.review-badge {
  display:inline-flex; align-items:center; gap:1.1rem; margin:0 auto;
  background:var(--cream); border:1px solid var(--sand); border-radius:999px;
  padding:0.85rem 1.6rem; box-shadow:0 6px 24px rgba(0,0,0,0.06);
}
.review-badge__g { width:30px; height:30px; flex:none; }
.review-badge__score { font-family:var(--font-serif); font-size:1.5rem; line-height:1; color:var(--dark); }
.review-badge__stars { color:#FBBC04; letter-spacing:0.12em; font-size:0.95rem; }
.review-badge__meta { font-size:0.72rem; letter-spacing:0.04em; color:var(--text-light); margin-top:0.15rem; }
.review-badge__divider { width:1px; align-self:stretch; background:var(--sand); }
@media (max-width: 600px) {
  .review-badge { flex-wrap:wrap; justify-content:center; text-align:center; }
}

/* ---- PERSÖNLICHE SIGNATUR ---- */
.signature {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 0;
}
.signature__mark {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--accent);
}
.signature__caption {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}
.signature--light .signature__caption { color: rgba(245,241,236,0.88); }

/* ---- PERSÖNLICHE BERATUNG (Produktseiten) ---- */
.berater {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.berater__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--taupe) 0%, var(--brown) 100%);
}
.berater__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Platzhalter, solange das echte Foto fehlt */
.berater__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245,241,236,0.92);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.berater__badge {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  background: rgba(36,28,18,0.55);
  backdrop-filter: blur(2px);
  padding: 0.7rem 1.1rem;
}
.berater__badge strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.1;
}
.berater__badge span {
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(184,149,106,0.95);
}
.berater__content h2 { margin: 1rem 0 1.25rem; }
.berater__content p {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.berater__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
@media (max-width: 768px) {
  .berater { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---- AUFMASS & MONTAGE (Rundum-Service) ---- */
.service-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.service-band__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--taupe) 0%, var(--brown) 100%);
}
.service-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-band__steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.service-band__step { display: flex; gap: 1rem; align-items: flex-start; }
.service-band__icon {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.service-band__icon svg { width: 1.4rem; height: 1.4rem; }
.service-band__step h3 {
  font-family: var(--font-serif);
  font-weight: 400; font-size: 1.2rem;
  color: var(--dark);
  margin-bottom: 0.25rem;
}
.service-band__step p { font-size: 1rem; line-height: 1.7; color: var(--text); margin: 0; }
@media (max-width: 768px) {
  .service-band { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---- SYMMETRIE-FIX: Bild = Texthöhe auf Produktseiten (Desktop only) ---- */
@media (min-width: 769px) {
  .berater,
  .service-band,
  .plissee-info { align-items: stretch; }
  .berater__media,
  .service-band__media { aspect-ratio: auto; height: auto; min-height: 420px; position: relative; }
  .berater__media img,
  .service-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .plissee-info__visual { height: auto; min-height: 100%; }
  .berater__content,
  .service-band__content,
  .plissee-info__content { display: flex; flex-direction: column; justify-content: center; }
}

/* ---- CTA BANNER ---- */
.cta-banner {
  background: var(--accent-dark);
  padding: 5rem 0;
  text-align: center;
}
.cta-banner h2 { color: var(--cream); margin-bottom: 1rem; }
.cta-banner p { color: rgba(255,255,255,0.92); margin-bottom: 2rem; font-size: 1.05rem; }

/* ---- FOOTER ---- */
.footer {
  background: var(--dark);
  color: var(--cream);
  padding: 4rem 0 2rem;
  font-family: Arial, Helvetica, sans-serif;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2.25rem;
  margin-bottom: 3rem;
}
.footer__logo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.footer__tagline { font-family: Arial, Helvetica, sans-serif; font-style: italic; font-size: 1.15rem; color: rgba(245,241,236,0.95); margin-bottom: 1.5rem; line-height: 1.5; }
.footer__address { font-family: Arial, Helvetica, sans-serif; font-size: 1.02rem; color: rgba(245,241,236,0.92); line-height: 1.9; letter-spacing: 0.01em; }

.footer__social { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(245,241,236,0.08);
  color: rgba(245,241,236,0.92);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.footer__social a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }

.footer__col-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 0.55rem; }
.footer__col a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: rgba(245,241,236,0.95);
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--cream); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer__copyright { font-size: 0.75rem; color: rgba(245,241,236,0.88); }
.footer__legal { display: flex; gap: 2rem; }
.footer__legal a { font-size: 0.75rem; color: rgba(245,241,236,0.88); transition: color 0.2s; }
.footer__legal a:hover { color: var(--cream); }

/* ---- PAYMENT STRIP ---- */
.footer__pay {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  padding: 1.75rem 0 .25rem;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__pay-label {
  width: 100%;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245,241,236,0.55);
  margin-bottom: .55rem;
}
.pay-chip {
  background: #fff;
  border-radius: 6px;
  height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pay-chip img { height: 20px; width: auto; display: block; }
.pay-chip--twint { background: #000; padding: 0 9px; }
.pay-chip--twint img { height: 22px; }
.pay-chip--mc img { height: 25px; }
/* Mobile: sauberes 3+2-Raster mit gleich breiten Chips */
@media (max-width: 560px) {
  .footer__pay {
    gap: 8px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.4rem;
  }
  .footer__pay-label { margin-bottom: .7rem; }
  .footer__pay .pay-chip {
    flex: 0 0 calc((100% - 16px) / 3);
    height: 40px;
    padding: 0;
  }
  .footer__pay .pay-chip img { height: 19px; }
  .footer__pay .pay-chip--mc img { height: 24px; }
  .footer__pay .pay-chip--twint img { height: 20px; }
}

/* ---- PAGE HEADER ---- */
.page-header {
  padding-top: var(--nav-h);
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
}
.page-header__inner {
  padding: 4rem 0 3rem;
}
.page-header__inner .eyebrow { margin-bottom: 1rem; font-size: 30px; }
.page-header__inner h1 { margin-bottom: 1rem; }
.page-header__inner p { font-size: 1.1rem; max-width: 560px; }
.page-header__inner p.hero-tagline { font-size: 30px; }

/* Hero-Variante: grosses Hintergrundbild mit Text-Overlay */
.page-header--image {
  position: relative;
  border-bottom: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-header--image::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(28,22,14,0.82) 0%, rgba(28,22,14,0.5) 45%, rgba(28,22,14,0.15) 100%);
}
.page-header--image .page-header__inner {
  position: relative; z-index: 1;
  /* Hero füllt am Desktop die volle Fensterhöhe (kein weisser Streifen unten);
     Handy hat weiter unten seinen eigenen @media-Block */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem 0;
}
.page-header--image h1 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4); }
.page-header--image p { color: rgba(255,255,255,0.92); text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.page-header--image .eyebrow { color: var(--accent); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.page-header--image .eyebrow::before { background: var(--accent); }
@media (max-width: 700px) {
  /* Hero-Hintergrund am Handy heller — Foto bleibt sichtbar, Text noch lesbar */
  .page-header--image::before { background: linear-gradient(to top, rgba(28,22,14,0.55), rgba(28,22,14,0.18)); }
  .page-header--image .page-header__inner {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    padding: 4.5rem 0;
  }
  .page-header--image h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 1.05; }
  /* "Standort · Zürich" in Weiß statt Gold, damit auf hellem Foto noch lesbar */
  .page-header--image .eyebrow,
  .page-header--image .eyebrow--pin { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,0.65), 0 0 16px rgba(0,0,0,0.35); }
  .page-header--image .eyebrow__pin { color: #fff !important; }
}

/* Garantie-Badge im Seitenkopf */
.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  width: fit-content;
}
.guarantee-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  text-shadow: none;
}

/* ---- PRODUCT DETAIL GRID ---- */
.product-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* Feste Spaltenzahl je Modell-Anzahl → Reihen immer sauber gefüllt/aufgereiht */
.product-detail.cols-2 { grid-template-columns: repeat(2, 1fr); }
.product-detail.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-detail.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .product-detail.cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .product-detail.cols-3, .product-detail.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .product-detail.cols-2 { grid-template-columns: 1fr; } }
.product-item {
  background: var(--warm-white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}
.product-item:hover { box-shadow: 0 12px 40px rgba(44,36,22,0.12); }
.product-item__image {
  height: 260px;
  transition: transform 0.5s ease;
}
.product-item:hover .product-item__image { transform: scale(1.03); }
.product-item__info { padding: 1.5rem; }
.product-item__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 0.4rem;
}
.product-item__desc { font-size: 0.82rem; margin-bottom: 1rem; }
.product-item__price {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.product-item__price span { color: var(--text-light); font-weight: 400; }

/* ---- KONFIGURATOR TEASER ---- */
.konfig-teaser {
  background: var(--dark);
  border-radius: 0;
  padding: 4rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  margin-top: 4rem;
}
.konfig-teaser h3 { color: var(--cream); margin-bottom: 0.75rem; }
.konfig-teaser p { color: rgba(245,241,236,0.92); }

/* ---- FERTIGUNGSVIDEOS ---- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 2.5rem;
}
.video-grid--single { grid-template-columns: 1fr; max-width: 900px; }
/* links grosses Querformat-Video, rechts schmales Hochformat */
.video-grid--split { grid-template-columns: 3fr 1fr; align-items: start; }
.video-card__player.video-card__player--portrait { padding-top: 177.78%; }   /* 9:16 Hochformat */
@media (max-width: 768px) {
  .video-grid--split { grid-template-columns: 1fr; }
  .video-card__player.video-card__player--portrait { max-width: 62%; margin: 0 auto; }
}
.video-card { display: flex; flex-direction: column; }
.video-card__player {
  position: relative;
  width: 100%;
  padding-top: 56.25%;          /* 16:9 */
  background: var(--dark);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(44, 36, 22, 0.12);
}
.video-card__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card__caption {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 1rem;
}
.video-card__caption span {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.video-card__caption h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--dark);
}
.video-card__credit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(44, 36, 22, 0.12);
}
.video-card__credit-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.video-card__credit-label {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.video-card__credit-logo {
  height: 26px;
  width: auto;
  color: var(--dark);
}
.video-card__credit-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--dark);
}
.video-card__credit-sep {
  width: 1px;
  height: 24px;
  background: rgba(44, 36, 22, 0.18);
}

/* Mobiles Hero-Titelbild: Desktop unberührt (ausgeblendet) */
body.home-page .hero__photo-mobile { display: none; }

/* ---- MOBILE ---- */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  body.home-page .hero__visual { display: none; }
  .hero__visual { height: 50vw; min-height: 320px; }
  .hero__content { padding: 3rem var(--gutter); }
  /* Titelbild oben im Hero — nur Handy/Tablet */
  body.home-page .hero__photo-mobile {
    display: block;
    width: 100%;
    height: 48vw;
    min-height: 260px;
    max-height: 380px;
    background: var(--sand) url('../images/vorhang-hero.jpg') center 35% / cover no-repeat;
  }
  body.home-page .hero__photo-mobile + .hero__content { padding-top: 2rem; }
  .products__grid { grid-template-columns: 1fr 1fr; }
  .about-teaser { grid-template-columns: 1fr; }
  .usps__grid { grid-template-columns: 1fr 1fr; }
  .usps__item:nth-child(2) { border-right: none; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .process__steps { grid-template-columns: 1fr 1fr; }
  .process__steps::before { display: none; }
}

/* Nav kollabiert ins Mobile-Menü, sobald die zweite Reihe zu eng wird */
/* Heimberatung mittig in der Navi — nur Mobile */
.nav__heimberatung-mobile {
  display: none;
  /* In der Logo-Zeile zentriert (zwischen Logo und Menü-Icon) statt eigener Zeile darunter */
  grid-area: secondary;
  justify-self: center;
  align-self: center;
  /* Prominenter, gut tippbarer CTA-Pill statt schwacher Textlink */
  margin: 0;
  padding: 0.6rem 1.4rem;
  min-height: 40px;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(154,122,82,0.32);
  text-decoration: none;
}
.nav__heimberatung-mobile::before {
  content: '+';
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0.95;
}

@media (max-width: 960px) {
  :root { --nav-h: var(--nav-row1-h); }
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__cta { display: none; }
  .nav__heimberatung-mobile { display: inline-flex; }
}

/* Sehr schmale Geräte (z.B. iPhone SE, 320px): Button kompakter, damit er
   in der Logo-Zeile nicht mit Logo/Menü-Icon kollidiert */
@media (max-width: 360px) {
  .nav__heimberatung-mobile {
    padding: 0.55rem 0.9rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    gap: 0.3rem;
  }
}

/* Handy: Eingabefelder ≥16px, damit iOS beim Fokus NICHT hineinzoomt
   (Zahlen-Stepper im Konfigurator bewusst ausgenommen — die sind grösser) */
@media (max-width: 768px) {
  input:not([type="number"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }
}

@media (max-width: 768px) {
  /* Dropdown im Mobile-Menü: per Tippen auf den Pfeil auf-/zuklappen */
  .nav__dropdown {
    position: static;
    transform: none;
    border: none;
    box-shadow: none;
    min-width: 0;
    padding: 0.25rem 0 0.25rem 1rem;
  }
  /* Standardmässig zu — auch wenn Touch ein "Hover" auslöst */
  .nav__has-dropdown:hover .nav__dropdown,
  .nav__has-dropdown:focus-within .nav__dropdown { display: none; }
  /* Offen nur, wenn der Nutzer auf den Pfeil getippt hat */
  .nav__has-dropdown.open .nav__dropdown { display: block; }
  .nav__dropdown a { padding: 0.5rem 0; }
  .nav__dropdown-toggle {
    cursor: pointer;
    width: 100%;
    justify-content: space-between;
  }
  /* Pfeil dreht sich beim Öffnen */
  .nav__dropdown-toggle::after { transition: transform 0.2s; }
  .nav__has-dropdown.open .nav__dropdown-toggle::after {
    transform: translateY(-2px) rotate(180deg);
  }
  .hero { grid-template-columns: 1fr; }
  .products__grid { grid-template-columns: 1fr; }
  .usps__grid { grid-template-columns: 1fr; }
  .usps__item { border-right: none; border-bottom: 1px solid var(--border); }
  .testimonials__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .konfig-teaser { grid-template-columns: 1fr; }
  .hero__trust { gap: 1.5rem; flex-wrap: wrap; }
}

/* ---- SHARED UTILITIES (zuvor in jeder Seite dupliziert) ---- */
/* Fade-in beim Scrollen deaktiviert — Inhalte sofort sichtbar, kein Swipe-Effekt */
.fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
.fade-in.visible { opacity: 1; transform: none; }
.nav--scrolled { box-shadow: 0 2px 20px rgba(44,36,22,0.08); }

/* ── Mobile-Menü v3 — ruhig, einspaltig, gross ────────────────
   Vollbild-Overlay in tiefem Cream-Ton. Produkte als grosse Serif-
   Liste mit feinen Trennern, CTAs (Konfigurator + Heimberatung)
   oben gut sichtbar als Pills, danach Stoffe & Über uns als
   ruhige Unterlisten. Kein Grid, keine 2-Spalten. */
@media (max-width: 960px) {
  body.nav-open { overflow: hidden; }
  body.nav-open .nav__heimberatung-mobile { display: none; }
  body.nav-open .nav__hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav__hamburger span:nth-child(2) { opacity: 0; }
  body.nav-open .nav__hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav__links--open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: var(--nav-row1-h); left: 0; right: 0;
    height: calc(100dvh - var(--nav-row1-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #F5EDE0;
    background-image: radial-gradient(ellipse at top, rgba(184,149,106,0.10), transparent 60%);
    padding: 1.4rem 1.5rem 3rem;
    gap: 0;
    z-index: 90;
    animation: navSlideDown 0.28s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes navSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  /* Secondary auflösen — seine LIs werden direkte Flex-Kinder, damit
     CTAs oben, Produkte mittig, Stoffe/Über-uns/Kontakt unten möglich */
  .nav__links--open .nav__row--secondary { display: contents; }
  .nav__links--open .nav__row--secondary > li { width: 100%; display: block; }
  .nav__links--open .nav__row--secondary > li:has(> a.nav__config) { order: 1; margin-bottom: 0.5rem; }
  .nav__links--open .nav__row--secondary > li:has(> a.nav__muster) { order: 1; margin-bottom: 0.65rem; }
  .nav__links--open .nav__row--secondary > li:has(> a[href$="heimberatung.html"]) { order: 2; margin-bottom: 0.6rem; }
  .nav__links--open .nav__row--products { order: 3; }
  .nav__links--open .nav__row--secondary > li.nav__has-dropdown { order: 4; }
  .nav__links--open .nav__row--secondary > li:last-child { order: 5; }

  .nav__links--open .nav__row--secondary a.nav__config {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.25rem !important;
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--dark, #2C2416);
    color: var(--cream, #F5EDE0);
    border-radius: 4px;
    border: none;
  }
  .nav__links--open .nav__row--secondary a.nav__muster {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem !important;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #2e7d4f 0%, #1f5d3a 100%);
    color: #fff;
    border-radius: 4px;
    border: none;
    box-shadow: 0 6px 16px rgba(46,125,79,0.32);
  }
  .nav__links--open .nav__row--secondary a[href$="heimberatung.html"] {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.25rem !important;
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dark, #2C2416) !important;
    background: transparent;
    border: 1px solid var(--dark, #2C2416);
    border-radius: 4px;
    font-weight: 500 !important;
  }

  /* PRODUKTE — grosse Serif-Liste */
  .nav__links--open .nav__row--products {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(44,36,22,0.12);
  }
  .nav__links--open .nav__row--products::before {
    content: 'Produkte';
    display: block;
    font-family: var(--font-sans, inherit);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent, #B8956A);
    padding: 1.1rem 0 0.6rem;
  }
  .nav__links--open .nav__row--products li { width: 100%; }
  .nav__links--open .nav__row--products a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--dark, #2C2416);
    border-bottom: 1px solid rgba(44,36,22,0.08);
  }
  .nav__links--open .nav__row--products a::after {
    content: '→';
    display: inline-block;
    font-family: var(--font-sans, inherit);
    font-size: 0.95rem;
    color: var(--accent, #B8956A);
    opacity: 0.6;
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav__links--open .nav__row--products a:hover::after,
  .nav__links--open .nav__row--products a:active::after {
    transform: translateX(4px);
    opacity: 1;
  }

  /* STOFFE & ÜBER UNS — ruhige Unterlisten */
  .nav__links--open .nav__has-dropdown {
    border-top: 1px solid rgba(44,36,22,0.12);
    padding-top: 0.6rem;
    margin-top: 0.4rem;
  }
  .nav__links--open .nav__dropdown-toggle {
    display: block !important;
    pointer-events: none;
    padding: 0.6rem 0 0.5rem !important;
    font-family: var(--font-sans, inherit) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase;
    color: var(--accent, #B8956A) !important;
    border: none !important;
    cursor: default;
  }
  .nav__links--open .nav__dropdown-toggle::after { display: none !important; }
  .nav__links--open .nav__has-dropdown .nav__dropdown {
    display: block !important;
    position: static;
    padding: 0;
    margin: 0 0 0.6rem;
    background: transparent;
    box-shadow: none;
    border: none;
  }
  .nav__links--open .nav__dropdown li { width: 100%; }
  .nav__links--open .nav__dropdown a {
    display: block;
    padding: 0.6rem 0 !important;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--dark, #2C2416);
    border-bottom: 1px solid rgba(44,36,22,0.06);
  }

  /* Zubehör-Untermenü mobil: statisch & eingerückt */
  .nav__links--open .nav__sub-menu {
    display: block !important;
    position: static;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 1rem;
    margin: 0;
  }
  .nav__links--open .nav__sub > .nav__sub-toggle::after { display: none !important; }
  .nav__links--open .nav__sub-menu a { font-size: 0.95rem; opacity: 0.85; }

  /* Gratis Muster — als Highlight innerhalb der Stoffe-Liste */
  .nav__links--open .nav__dropdown a[href$="muster.html"] {
    margin-top: 0.5rem;
    padding: 0.7rem 1.1rem !important;
    background: var(--accent, #B8956A);
    color: #fff !important;
    font-size: 0.95rem !important;
    text-align: center;
    letter-spacing: 0.1em;
    border-radius: 4px;
    border: none;
    font-weight: 500;
  }

  /* Kontakt-Eintrag (letztes <li> in secondary) — wie Produkt-Stil */
  .nav__links--open .nav__row--secondary > li:last-child {
    border-top: 1px solid rgba(44,36,22,0.12);
    padding-top: 0.6rem;
    margin-top: 0.4rem;
  }
  .nav__links--open .nav__row--secondary > li:last-child a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0 !important;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--dark, #2C2416);
    border-bottom: none;
    background: transparent;
    text-transform: none;
    letter-spacing: 0.02em;
  }
  .nav__links--open .nav__row--secondary > li:last-child a::after {
    content: '→';
    color: var(--accent, #B8956A);
    opacity: 0.6;
  }
}

@media (max-width: 380px) {
  .nav__links--open { padding: 1.1rem 1.2rem 2.5rem; }
  .nav__links--open .nav__row--products a { font-size: 1.2rem; padding: 0.75rem 0; }
  .nav__links--open .nav__dropdown a { font-size: 0.98rem; }
  .nav__links--open .nav__row--secondary a.nav__config,
  .nav__links--open .nav__row--secondary a.nav__muster,
  .nav__links--open .nav__row--secondary a[href$="heimberatung.html"] {
    font-size: 0.9rem;
    padding: 0.9rem 1rem !important;
  }
}

/* ── Weiter entdecken / verwandte Produkte ───────────────────── */
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.related__card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  padding: 0 0 1.35rem;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.related__card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.related__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.1rem;
}
.related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.related__card:hover .related__media img { transform: scale(1.04); }
.related__label,
.related__title,
.related__arrow { padding-left: 1.5rem; padding-right: 1.5rem; }
.related__label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.related__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--dark);
}
.related__arrow {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-light);
}
.related__card:hover .related__arrow { color: var(--accent); }
@media (max-width: 900px) {
  .related__grid { grid-template-columns: 1fr; }
}

/* WhatsApp floating button */
.wa-float {
  position: fixed;
  right: 12px;
  bottom: 90px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(0,0,0,.32);
}
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
.wa-float__label {
  position: absolute;
  right: 70px;
  white-space: nowrap;
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.wa-float:hover .wa-float__label {
  opacity: 1;
  transform: translateX(0);
}

/* Portrait-Variante: Foto + Name fix sichtbar */
@keyframes wa-float-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wa-float-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
/* Kleinere Ring-Variante fuer Buttons innerhalb der Berater-Karte (Karte hat overflow:hidden) */
@keyframes wa-btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.9); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.wa-float--portrait {
  background: #FFFFFF;
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 8px 22px 8px 8px;
  gap: 14px;
  text-decoration: none;
  border: 1px solid rgba(184, 149, 106, 0.18);
  box-shadow:
    0 1px 2px rgba(44, 36, 22, 0.06),
    0 8px 24px rgba(44, 36, 22, 0.12);
  animation: wa-float-in .55s cubic-bezier(.2,.7,.2,1) .2s both;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wa-float--portrait:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow:
    0 2px 4px rgba(44, 36, 22, 0.08),
    0 14px 32px rgba(44, 36, 22, 0.18);
}
.wa-float__avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #fff, 0 1px 4px rgba(44, 36, 22, 0.18);
}
.wa-float__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.wa-float__initials {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--brown) 100%);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 1px;
}
.wa-float__avatar--fallback .wa-float__initials { display: flex; }
.wa-float__badge {
  position: absolute;
  z-index: 2; /* über dem Avatar-Foto (img hat z-index:1) */
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cream);
  animation: wa-float-pulse 1.5s ease-out .4s infinite;
}
.wa-float--portrait:hover .wa-float__badge { border-color: #fff; }
.wa-float__badge svg { width: 12px; height: 12px; fill: #fff; }
.wa-float--portrait .wa-float__label {
  position: static;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  padding: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  white-space: nowrap;
}
.wa-float__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--dark);
  letter-spacing: 0.2px;
}
.wa-float__sub {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--brown);
  margin-top: 3px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .wa-float { width: 52px; height: 52px; right: 22px; bottom: 145px; }
  body.home-page .wa-float { bottom: 200px; }
  /* Hochformat-Kundenvideos: am Handy auf Content-Breite ziehen */
  [style*="aspect-ratio:9 / 16"] { width: calc(100vw - 3rem) !important; max-width: 360px !important; }
  .wa-float svg { width: 28px; height: 28px; }
  .wa-float__label { display: none; }
  /* Mobile: nur das runde Portrait, ohne Text */
  .wa-float--portrait {
    width: 56px;
    height: 56px;
    padding: 0;
    background: transparent;
  }
  .wa-float--portrait .wa-float__label { display: none; }
  .wa-float__avatar { width: 56px; height: 56px; }
}

/* ============================================================
   VORHER / NACHHER + REFERENZVIDEO (Produktseiten)
   ============================================================ */

/* --- Vorher / Nachher Slider --- */
.ba-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem; }
.ba {
  position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden;
  border-radius:2px; user-select:none; touch-action:none; cursor:ew-resize;
  background:var(--warm-white);
}
.ba__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after  { z-index:1; }
.ba__before { z-index:2; clip-path: inset(0 50% 0 0); }
.ba__handle {
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--cream);
  z-index:3; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,0.12);
}
.ba__handle::after {
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--cream);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B7355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3Cpolyline points='9 6 15 12 9 18' transform='translate(6 0)'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.ba__tag {
  position:absolute; bottom:1rem; z-index:4; font-size:0.62rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--cream); background:rgba(36,28,18,0.6);
  padding:0.35rem 0.8rem; backdrop-filter:blur(2px);
}
.ba__tag--before { left:1rem; }
.ba__tag--after  { right:1rem; }
.ba__caption { margin-top:1rem; font-size:0.9rem; line-height:1.7; color:var(--text-light); }
.ba__caption strong { color:var(--dark); font-weight:500; }
.ba__placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem; color:var(--text-light); font-size:0.8rem; line-height:1.6;
  background:repeating-linear-gradient(45deg,var(--warm-white),var(--warm-white) 12px,var(--sand) 12px,var(--sand) 24px);
}

/* Video-Vorher/Nachher (Hochformat, Handy-Look) */
.ba-video-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:2.5rem; margin-bottom:3.5rem; }
.ba-video-wrap { max-width:360px; margin:0 auto 3.5rem; }
.ba-video-row .ba-video-wrap { margin:0; flex:0 1 360px; }
.ba--video { aspect-ratio:9 / 16; background:#000; }
.ba--video video.ba__img { background:#000; }
.ba-video-wrap .ba__caption { text-align:center; }

/* --- Referenzvideo (Hochformat + Quadrat) --- */
.refvid-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem 2.5rem;
  align-items:start; margin:0;
}
.refvid { display:flex; flex-direction:column; }
.refvid--wide { grid-column:1 / -1; }
.refvid__frame {
  position:relative; width:100%; overflow:hidden; border-radius:2px;
  background:linear-gradient(145deg,#5a4a35,#3d3025);
}
.refvid__frame--landscape { aspect-ratio:16 / 9; }
.refvid__frame--portrait { aspect-ratio:9 / 16; }
.refvid__frame--square   { aspect-ratio:1 / 1; }
.refvid__frame video, .refvid__frame iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}
.refvid__ph {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; text-align:center; padding:1.5rem;
}
.refvid__play {
  width:64px; height:64px; border-radius:50%; background:rgba(250,248,245,0.92);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.25); transition:transform .3s;
}
.refvid__frame:hover .refvid__play { transform:scale(1.08); }
.refvid__play svg { margin-left:4px; }
.refvid__label {
  margin-top:1rem; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-light); text-align:center;
}

@media (max-width:768px) {
  .ba-grid { grid-template-columns:1fr; }
  .refvid-grid { grid-template-columns:1fr 1fr; max-width:none; gap:0.9rem; }
  /* Vorher/Nachher-Sektion: ganze Sektion gleich breit, nur wenig Rand */
  .section--edge .container { padding-left:0.9rem; padding-right:0.9rem; }
}

/* ============================================================
   HANDY — kompakter & übersichtlicher (≤540px)
   Ziel: schneller erfassbar · kleinere Bilder · zwei
   nebeneinander statt riesig gestapelt · enger · kürzer
   ============================================================ */
@media (max-width: 540px) {
  /* Engere Abschnitte – deutlich weniger Scrollen */
  .section { padding: 2.6rem 0; }
  .section--tight { padding: 1.75rem 0; }
  .cta-banner { padding: 3rem 0; }

  /* Kompaktere Überschriften / Texte */
  h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.3rem; }
  .page-header__inner { padding: 2.25rem 0 1.75rem; }
  .page-header__inner p { font-size: 1rem; }

  /* Bilder nicht zu gross / Hero flacher */
  .hero__visual { min-height: 230px; height: 56vw; }
  .hero__content { padding: 2.25rem var(--gutter); }
  .about-teaser__image { min-height: 210px; }
  .page-header--image .page-header__inner {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    padding: 3.5rem 0;
  }
  /* Volle-Breite-Inhaltsbilder kappen, damit gestapelte Sektionen ~1 Screen bleiben */
  .berater__media { aspect-ratio: auto; height: 210px; }
  .service-band__media { aspect-ratio: auto; height: 200px; }

  /* Start-Produktkacheln: zwei nebeneinander, CTA sichtbar (kein Hover am Handy) */
  .products__grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .product-card__overlay { padding: 1rem; }
  .product-card__title { font-size: 1.05rem; margin-bottom: 0.5rem; }
  .product-card__meta { font-size: 0.66rem; margin-bottom: 0.6rem; }
  .product-card__link { opacity: 1; transform: none; font-size: 0.62rem; }

  /* Produkt-/Varianten-Karten: zwei nebeneinander, kleinere Bilder, kürzer */
  .product-detail { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .product-item__image { height: 150px; }
  .product-item__info { padding: 0.85rem; }
  .product-item__name { font-size: 1.02rem; margin-bottom: 0.3rem; }
  /* Kurztext am Handy sichtbar lassen (max 3 Zeilen), damit Karten nicht zu kahl sind */
  .product-item__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.76rem; line-height: 1.45; margin-bottom: 0; }

  /* Verwandte Produkte: zwei nebeneinander, max. 2 am Handy */
  .related__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .related__grid > .related__card:nth-child(n+3) { display: none; }
  .related__card { padding: 0 0 1rem; }
  .related__media { margin-bottom: 0.75rem; }
  .related__label,
  .related__title,
  .related__arrow { padding-left: 1rem; padding-right: 1rem; }
  .related__title { font-size: 1.02rem; }

  /* Vorteile / Prozess / Reassurance: zwei nebeneinander statt gestapelt */
  .usps__grid { grid-template-columns: 1fr 1fr; }
  .usps__item { border-right: none; border-bottom: 1px solid var(--border); padding: 1.5rem; }
  .reassurance__grid { grid-template-columns: 1fr 1fr; }
  .process__steps { grid-template-columns: 1fr 1fr; gap: 1.25rem; }

  /* Service-/Konfigurator-Karten enger */
  .service-card { padding: 1.75rem 1.5rem; }
  .service-card h3 { font-size: 1.25rem; }
  .konfig-teaser { padding: 2rem 1.5rem; }

  /* Vorher/Nachher + Video: flacher, weniger dominant */
  .ba { aspect-ratio: 3 / 2; }
  .ba-grid { gap: 1.5rem; }
  .refvid-grid { gap: 1.25rem; }
}

/* Generische Handy-Kurztexte: Desktop zeigt .mobile-full, .mobile-short ist ausgeblendet */
.mobile-short { display: none; }
@media (max-width: 768px) {
  .mobile-full { display: none; }
  .mobile-short { display: block; }
}

/* ============================================
   SPRACHUMSCHALTER (Google Translate)
   ============================================ */
/* Actions-Bereich oben rechts: Sprach-Button + CTA + Hamburger */
.nav__actions {
  grid-area: actions;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.nav__actions .nav__cta { grid-area: auto; justify-self: auto; }
.nav__actions .nav__hamburger { grid-area: auto; justify-self: auto; }

.lang-switch { position: relative; display: inline-flex; align-items: center; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.7rem; cursor: pointer; color: var(--text);
  font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.06em;
  transition: border-color 0.2s, color 0.2s;
}
.lang-switch__btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-switch__flag { font-size: 1rem; line-height: 1; }
.lang-switch__code { font-weight: 600; }
.lang-switch__caret { font-size: 0.7rem; opacity: 0.6; transition: transform 0.2s; }
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 170px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(44,36,22,0.14); padding: 0.4rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s; z-index: 1200;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-switch__item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  padding: 0.55rem 0.7rem; text-align: left; color: var(--text);
  font-family: var(--font-sans); font-size: 0.9rem;
}
.lang-switch__item:hover { background: var(--warm-white); color: var(--accent); }
.lang-switch__item.is-active { background: var(--sand); color: var(--accent); font-weight: 600; }

/* Google-Translate-Oberfläche (Banner/Tooltip) ausblenden */
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; position: static !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

@media (max-width: 900px) {
  /* Sprach-Code am Handy ausblenden, nur Flagge + Pfeil zeigen (spart Platz) */
  .lang-switch__code { display: none; }
  .nav__actions { gap: 0.55rem; }
}
/* Handy: der Warenkorb ist ein fix positionierter Button (right:48/56px) und lag
   sonst GENAU ueber dem Sprachumschalter. Platz freihalten, damit Sprache | Korb |
   Menue sauber NEBENEINANDER stehen. */
@media (max-width: 760px) {
  .lang-switch { margin-right: 52px; }
}
@media (max-width: 380px) {
  .lang-switch { margin-right: 46px; }
}

/* Solange noch kein echtes Video da ist, ganze Section ausblenden statt leerem Platzhalter. Sobald .video-placeholder aus dem HTML gelöscht ist, taucht die Section automatisch wieder auf. */
section:has(.video-placeholder) { display: none; }

/* ============================================================
   KONFIGURATOR-SEITEN: nichts ablenken — nur konfigurieren.
   Footer, Aktionsbanner, Beschreibungstext, Breadcrumb weg.
   Header möglichst klein, Konfigurator fokussiert.
   ============================================================ */
body.konfig-page .footer,
body.konfig-page .offer-banner {
  display: none !important;
}
/* Vorhang-Konfig hat den Banner als nacktes <div> direkt unter dem Header */
body.konfig-page > div[style*="background:var(--cream)"][style*="border-bottom"] {
  display: none !important;
}
body.konfig-page .page-header { padding: 0; border-bottom: 1px solid var(--border); }
body.konfig-page .page-header__inner { padding: 0.55rem 0 0.5rem; }
body.konfig-page .page-header__inner .eyebrow { display: none; }
body.konfig-page .page-header__inner h1 {
  margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.2;
}
body.konfig-page .page-header__inner p { display: none; }

/* Section direkt an Header andocken */
body.konfig-page .section { padding-top: 0.6rem; padding-bottom: 1rem; }

@media (max-width: 900px) {
  body.konfig-page .page-header__inner { padding: 0.45rem 0 0.4rem; }
  body.konfig-page .page-header__inner h1 { font-size: 1rem; }
  body.konfig-page .section { padding-top: 0.4rem; padding-bottom: 0.6rem; }
}

/* === Marken-Logo-Reihe (global, ab 2026-06-17) === */
.brand-logos {
  display: flex; flex-wrap: nowrap;
  justify-content: space-between; align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  width: 100%;
}
.brand-logos__item {
  flex: 0 1 auto;
  display: flex; align-items: center; justify-content: center;
  height: 56px;
}
.brand-logos__item img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.brand-logos__item--text {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dark); line-height: 1;
}
@media (max-width: 720px) {
  .brand-logos { gap: 0.5rem; padding: 0.5rem 0; }
  .brand-logos__item { height: 26px; }
  .brand-logos__item--text { font-size: 0.85rem; }
}
@media (max-width: 380px) {
  .brand-logos { gap: 0.4rem; }
  .brand-logos__item { height: 22px; }
}

/* === HERO CTA-Reihe + Tagline (Plissee-Master, global ab 2026-06-17) === */
.page-header--image h1 { margin-bottom: 0.3rem; }
.hero-tagline {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
  letter-spacing: 0.005em;
  line-height: 1.45;
}
.hero-tagline__sep { color: var(--accent); margin: 0 0.3rem; font-style: normal; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.2rem;
  align-self: flex-start;
  max-width: 100%;
}
@media (max-width: 540px) {
  .hero-tagline { font-size: 1rem; line-height: 1.4; max-width: 320px; }
}
.btn--hero-primary,
.btn--hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.3rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.btn--hero-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 14px 32px rgba(0,0,0,0.32);
}
.btn--hero-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.btn--hero-ghost {
  background: rgba(20,16,12,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.btn--hero-ghost:hover {
  background: rgba(20,16,12,0.65);
  border-color: rgba(255,255,255,0.7);
  transform: translateY(-2px);
}
.btn--hero__icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn--hero__arrow {
  display: inline-block;
  margin-left: 0.15rem;
  color: var(--accent);
  transition: transform 0.3s ease;
}
.btn--hero-primary:hover .btn--hero__arrow { transform: translateX(4px); }

/* === HERO TRUST + BRANDS (global, eingebaut 2026-06-17) =========== */
.hero-trust {
  list-style: none;
  margin: 0;
  padding: 1rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  width: fit-content;
  max-width: 100%;
  background: rgba(20,16,12,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 1rem; white-space: nowrap; }
/* Wenn der Badge-Inhalt in einen Link verpackt ist, denselben Icon-Text-Abstand erzwingen */
.hero-trust li > a { display: inline-flex; align-items: center; gap: 1rem; color: inherit; }
.hero-trust strong { font-weight: 600; }
.hero-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  flex-shrink: 0;
  font-weight: 700;
}
.hero-brands {
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  opacity: 0.75;
}
.hero-brands__logo {
  height: 14px;
  width: auto;
  color: #fff;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.hero-brands__logo--leha      { height: 26px; margin-left: 0.5rem; }
.hero-brands__logo--jab       { height: 28px; }
.hero-brands__logo--chivasso  { height: 34px; }
.hero-brands__logo--stardecor { height: 32px; }
/* Trust + Brands an den unteren Hero-Rand pinnen (1cm Luft) */
.page-header--image .page-header__inner { padding-bottom: calc(1cm + 110px); }
.page-header--image .hero-trust {
  position: absolute;
  left: 0;
  bottom: calc(1cm + 52px);
  margin: 0;
}
.page-header--image .hero-brands {
  position: absolute;
  left: 0;
  bottom: 1cm;
  margin: 0;
}
@media (max-width: 700px) {
  .page-header--image .page-header__inner { padding-bottom: calc(0.6cm + 90px); }
  .page-header--image .hero-trust { bottom: calc(0.6cm + 42px); }
  .page-header--image .hero-brands { bottom: 0.6cm; }
  .hero-trust {
    gap: 0.45rem 1.1rem;
    padding: 0.9rem 1rem;
    font-size: 0.82rem;
  }
  .hero-trust__icon { width: 1.15rem; height: 1.15rem; font-size: 0.65rem; }
  .hero-brands { gap: 0.9rem; margin-top: 0.7rem; }
  .hero-brands__logo { height: 20px; }
  .hero-brands__logo--leha      { height: 20px; margin-left: 0.35rem; }
  .hero-brands__logo--jab       { height: 22px; }
  .hero-brands__logo--chivasso  { height: 26px; }
  .hero-brands__logo--stardecor { height: 26px; }
}

/* ============================================================
   2026-06-18 — AUDIT-FIXES (Pkt 1–8 aus Verbesserungsliste)
   ============================================================ */

/* --- Pkt 1+2 · Desktop-Nav: KONTAKT-Orphan + Pill-Overlap verhindern --- */
@media (min-width: 961px) {
  .nav__row--secondary {
    flex-wrap: nowrap;
    gap: 1.1rem;
    min-width: 0;
  }
  .nav__row--secondary > li { flex: 0 0 auto; }
  .nav__links .nav__row--secondary a { font-size: 16px; letter-spacing: 0.1em; }
  .nav__links .nav__row--secondary a.nav__config,
  .nav__links .nav__row--secondary a.nav__muster {
    padding: 0.45rem 0.95rem;
    font-size: 16px;
  }
}
@media (min-width: 1100px) {
  .nav__row--secondary { gap: 1.5rem; }
  .nav__links .nav__row--secondary a { font-size: 16px; }
}

/* --- Pkt 3+4 · Mobile-Header: Hamburger + Sprachwahl müssen sichtbar bleiben --- */
@media (max-width: 600px) {
  .nav__heimberatung-mobile {
    padding: 0.5rem 0.8rem;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    max-width: 44vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Sprachwahl bleibt sichtbar — kompakt (nur Flagge + Pfeil) */
  .lang-switch__btn { padding: 0.25rem 0.5rem; gap: 0.3rem; }
  .nav__actions { gap: 0.45rem; }
}
@media (max-width: 380px) {
  .nav__heimberatung-mobile { max-width: 38vw; padding: 0.45rem 0.65rem; font-size: 0.56rem; }
  .lang-switch__btn { padding: 0.22rem 0.42rem; }
}

/* --- Pkt 5–7 · Stoff-Feed-FAB darf Hero-CTAs / Trust-Badges nicht überdecken --- */
.vinelly-feed-fab { transition: opacity 0.35s ease, transform 0.35s ease; }
.vinelly-feed-fab.is-hero { opacity: 0 !important; pointer-events: none !important; transform: translateY(28px) !important; visibility: hidden !important; transition: none !important; }
/* Auf Rechtsseiten ganz weg (kein Conversion-Kontext) */
body.legal-page .vinelly-feed-fab { display: none !important; }

/* --- Pkt 8 · WhatsApp-Bubble: nicht über Hero-CTA, etwas weiter unten --- */
.wa-float { bottom: 32px; }
@media (max-width: 600px) {
  .wa-float { bottom: 24px; right: 18px; }
  body.home-page .wa-float { bottom: 90px; }
}

/* --- Pkt 14 · index.html: Slideshow-Slide-Untertitel darf Haupt-Hero nicht überlagern --- */
body.home-page .hero-slideshow__slide-content,
body.home-page .hero-slideshow__caption,
body.home-page .slideshow__caption { opacity: 0 !important; }

/* --- Pkt 16 · index.html: 3. Hero-CTA (Stoff-Feed) deutlicher abheben --- */
body.home-page .hero__actions .btn[href*="stoff-feed"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* --- Pkt 38 · kontakt.html: Hero braucht Bild-Background --- */
body.kontakt-page .hero,
body.kontakt-page .page-header,
.kontakt-hero {
  background-image: linear-gradient(rgba(44,36,22,0.62), rgba(44,36,22,0.62)), url('../images/vorhang/wohnzimmer-tag-nacht.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 380px;
  display: flex;
  align-items: center;
}
body.kontakt-page .page-header .eyebrow,
body.kontakt-page .page-header h1,
body.kontakt-page .page-header p,
body.kontakt-page .hero h1,
body.kontakt-page .hero p,
.kontakt-hero h1,
.kontakt-hero p { color: #fff; }

/* --- mobile-short Hilfsklassen (für alle nachgerüsteten Seiten)
   display: revert respektiert das HTML-Element: <span> bleibt inline,
   <p>/<div> bleibt block. Vermeidet kollabierte Blöcke, deren Border
   sonst als Striche quer durch den Text gerendert wurden. --- */
.mobile-full { display: revert; }
.mobile-short { display: none; }
@media (max-width: 600px) {
  .mobile-full { display: none; }
  .mobile-short { display: revert; }
}

/* --- Pkt 56 · Rechtsseiten: Lese-Komfort am Handy
       Juristische Texte dürfen nicht gekürzt werden, aber Schriftgrösse,
       Zeilenhöhe und Section-Abstände dürfen auf Mobile reduziert werden. --- */
@media (max-width: 600px) {
  body.legal-page .legal { font-size: 0.88rem; line-height: 1.7; }
  body.legal-page .legal h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
  body.legal-page .legal p { margin-bottom: 0.75rem; }
  body.legal-page .legal-hero h1 { font-size: 1.7rem; }
}

/* ============================================================
   GLOBALER MOBILE-FIX 2026-06-19 — nur Handy, Desktop bleibt 1:1
   Regel: alle Änderungen STRIKT in @media-Blöcken.
   ============================================================ */

/* --- Page nie horizontal scrollbar am Handy --- */
@media (max-width: 900px) {
  html { overflow-x: hidden; }
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  img, video, iframe, svg { max-width: 100%; height: auto; }
  .container { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  /* Saubere Tap-Highlights für Touch */
  a, button, [role="button"], .otile, .typetab {
    -webkit-tap-highlight-color: rgba(184,149,106,0.18);
  }
}

/* --- Nav-Bar schlanker am Handy: Logo, Heimberatung-Button, Sprach-Wähler, Hamburger --- */
@media (max-width: 768px) {
  /* Logo kleiner */
  .nav__logo { font-size: 1.3rem; gap: 0.4rem; letter-spacing: 0.03em; }
  .nav__flag { width: 1.15rem; height: 1.15rem; }

  /* Heimberatung-Pill kompakter — sitzt mittig zwischen Logo und Hamburger */
  .nav__heimberatung-mobile {
    padding: 0.5rem 0.95rem;
    min-height: 36px;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    gap: 0.3rem;
    box-shadow: 0 4px 12px rgba(154,122,82,0.28);
  }
  .nav__heimberatung-mobile::before { font-size: 0.88rem; }

  /* Sprach-Wähler kompakt */
  .lang-switch__btn { padding: 0.32rem 0.55rem; font-size: 0.72rem; gap: 0.3rem; }
  .lang-switch__flag { font-size: 0.85rem; }
  .lang-switch__caret { font-size: 0.6rem; }

  /* Hamburger leichter ins Auge, aber nicht riesig */
  .nav__hamburger { width: 40px; height: 40px; gap: 4px; }
  .nav__hamburger span { width: 22px; height: 2px; }

  /* Nav-Inner: weniger Spalten-Abstand, weniger Side-Padding */
  .nav__inner { column-gap: 0.6rem; padding: 0 0.8rem; }
}

/* iPhone SE & ähnlich schmale Geräte */
@media (max-width: 380px) {
  .nav__logo { font-size: 1.15rem; }
  .nav__flag { width: 1rem; height: 1rem; }
  .nav__heimberatung-mobile {
    padding: 0.42rem 0.7rem;
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    min-height: 32px;
  }
  .nav__heimberatung-mobile::before { font-size: 0.75rem; }
  .lang-switch__btn { padding: 0.28rem 0.45rem; }
  .nav__inner { column-gap: 0.4rem; padding: 0 0.55rem; }
}

/* --- Hero-Sections am Handy: schlanker, lesbar --- */
@media (max-width: 768px) {
  .hero h1, .page-header h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    line-height: 1.15;
  }
  .hero p, .page-header p {
    font-size: 0.92rem;
    line-height: 1.5;
  }
}

/* --- Footer am Handy: einspaltig, kompakter --- */
@media (max-width: 768px) {
  .footer { padding: 2rem 0 1.5rem; }
  .footer__grid { gap: 1.5rem; }
  .footer__col-title { font-size: 0.85rem; margin-bottom: 0.6rem; }
  .footer__col ul { gap: 0.4rem; }
  .footer__col a { font-size: 0.88rem; }
  .footer__address { font-size: 0.88rem; line-height: 1.55; }
}

/* --- Sections: weniger Padding am Handy --- */
@media (max-width: 768px) {
  .section { padding: 2rem 0; }
  .section--tight { padding: 1.5rem 0; }
}

/* --- Eingabe-Felder nie über Viewport am Handy --- */
@media (max-width: 768px) {
  input, select, textarea { max-width: 100%; box-sizing: border-box; }
}

/* --- Konfigurator-Mobile-Fixes für BEIDE Konfiguratoren (vorhang + plissee) --- */
@media (max-width: 900px) {
  body.konfig-page .wa-float,
  body.konfig-page .wa-float--portrait { display: none !important; }

  /* Live-Preis Box am Handy komplett weg (User-Wunsch) */
  body.konfig-page .mprice { display: none !important; }

  /* Produkt-Tabs: deutlich erkennbar dass mehr scrollbar */
  body.konfig-page .typetabs {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 50px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 50px), transparent 100%);
    padding-right: 1.5rem;
    scroll-behavior: smooth;
  }
  /* Step-Head mit Nummer + Titel im Wizard-Modus IMMER sichtbar (auch am Handy) */
  body.wizard-on .konfig-step__head { display: flex !important; align-items: center; gap: 0.9rem; margin-bottom: 0.7rem; }
  body.wizard-on .konfig-step__num {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 36px !important; height: 36px !important;
    border-radius: 50%; background: var(--dark); color: var(--cream);
    font-family: var(--font-serif); font-size: 1rem !important; font-weight: 600;
    flex-shrink: 0;
  }
  body.wizard-on .konfig-step__title {
    font-family: var(--font-serif);
    font-size: 1.3rem !important;
    font-weight: 500;
    color: var(--dark);
    margin: 0;
  }

  /* "wischen →" Pill direkt ÜBER den Tabs (immer mit den Tabs sichtbar) */
  body.konfig-page .typetabs-wrap { position: relative; }
  body.konfig-page .typetabs-swipe-pill {
    position: absolute;
    top: -0.5rem; right: 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--accent);
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(184,149,106,0.4);
    pointer-events: none;
    z-index: 2;
    animation: swipeHint 1.8s ease-in-out infinite;
  }
  /* Wenn die Produkt-Tabs ausgeblendet sind (Wizard ab Schritt 2), Pill ebenfalls ausblenden */
  body.konfig-page .typetabs.wiz-hide + .typetabs-swipe-pill,
  body.konfig-page .typetabs[hidden] + .typetabs-swipe-pill { display: none; }
  @keyframes swipeHint {
    0%, 100% { transform: translateX(0); opacity: 0.9; }
    50% { transform: translateX(4px); opacity: 1; }
  }
  /* alte Pseudo-Pill auf der Label nicht mehr anzeigen */
  body.konfig-page .typetabs-label::after { content: none !important; }

  /* Schritt-Hint nicht eingerückt */
  body.konfig-page .konfig-step__hint { padding-left: 0 !important; padding-right: 0.1rem; }

  /* "Lieber alles auf einer Seite anzeigen" am Handy weg */
  body.konfig-page #wizardToggleWrap { display: none !important; }

  /* "Unverbindlich anfragen" Hinweis-Text + Button weg — QR + PDF reichen */
  body.konfig-page .price-card__order-note { display: none !important; }
  body.konfig-page .btn-anfrage { display: none !important; }

  /* QR-Karte immer sichtbar (auch ohne fertige Konfig) */
  body.konfig-page #qrPreview,
  body.konfig-page #qrPreview[hidden] { display: block !important; margin-top: 0.5rem; }

  /* PDF-Button + Hinweise in Arial */
  body.konfig-page .invoice-card__btn,
  body.konfig-page .invoice-card__lead,
  body.konfig-page .invoice-card__amount,
  body.konfig-page .invoice-card__note { font-family: Arial, Helvetica, sans-serif; }

  /* Pay-flow rot statt gold (wichtig, klar erkennbar) */
  body.konfig-page .pay-flow {
    font-size: 0.88rem; line-height: 1.55; padding: 0.95rem 1.05rem;
    color: rgba(255,236,230,0.92);
    background: rgba(214,90,58,0.14) !important;
    border: 1.5px solid rgba(214,90,58,0.55) !important;
    border-left: 4px solid #d65a3a !important;
    border-radius: 10px;
  }
  body.konfig-page .pay-flow__hl { display: block; font-weight: 700; color: #ff8a65; font-size: 0.98rem; line-height: 1.3; margin: 0; }

  /* Body-Texte in der Preis-Karte in Arial (Titel bleiben Serif) */
  body.konfig-page .price-card,
  body.konfig-page .price-card__label,
  body.konfig-page .price-card__note,
  body.konfig-page .price-card__statusline,
  body.konfig-page .pay-flow,
  body.konfig-page .price-card__reassure span,
  body.konfig-page .price-card__help-sub,
  body.konfig-page .price-card__help-list span,
  body.konfig-page .price-card__help-list a {
    font-family: Arial, Helvetica, sans-serif !important;
  }
}

/* --- Einheitliche Schriftgrössen auf allen Produktseiten am Handy (3 Hierarchie-Stufen) --- */
@media (max-width: 768px) {
  /* Sparte 1 — Haupt-Section-Titel (h2) */
  .section h2 {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    margin: 0 0 1rem !important;
  }
  /* Sparte 2 — Unterüberschriften (h3, h4, .reassurance-card h4) */
  .section h3,
  .section h4,
  .reassurance-card h3,
  .reassurance-card h4 {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    margin: 0 0 0.55rem !important;
  }
  /* Sparte 3 — Body-Text (p) */
  .section p,
  .reassurance-card p,
  .feature-list li,
  .benefit-list li {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }
  /* Eyebrows einheitlich klein */
  .section .eyebrow {
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.5rem !important;
  }
}

/* --- ALLE Karten mit Icon+Titel+Text: zentriert auf jeder Seite am Handy --- */
@media (max-width: 768px) {
  .reassurance-card,
  .warranty-card,
  .feature-card,
  .service-card,
  .usp-card,
  .usps__item,
  .process-step,
  .process__step,
  .hb2-step { text-align: center !important; padding: 1rem 0 !important; }

  .reassurance-card__icon,
  .warranty-card__icon,
  .feature-card__icon,
  .service-card__icon,
  .usps__icon,
  .process-step__icon,
  .hb2-step__num {
    margin: 0 auto 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .reassurance-card__icon { width: 92px !important; height: 92px !important; }
  .reassurance-card__icon svg {
    width: 54px !important;
    height: 54px !important;
    stroke-width: 1.4;
    margin: 0 auto;
    display: block;
  }
  .reassurance-card h3,
  .reassurance-card h4,
  .reassurance-card p,
  .warranty-card h3, .warranty-card h4, .warranty-card p,
  .feature-card h3, .feature-card h4, .feature-card p,
  .service-card h3, .service-card h4, .service-card p,
  .usps__item h3, .usps__item h4, .usps__item p,
  .process-step h3, .process-step h4, .process-step p,
  .hb2-step h3, .hb2-step h4, .hb2-step p { text-align: center !important; width: 100% !important; }

  .plissee-info__content { padding: 0 !important; }
  .plissee-info__content h2, .plissee-info__content p { padding: 0 !important; }
  /* Alle Beschreibungs-Absätze zwischen Titel und ✓-Liste am Handy weglassen */
  .plissee-info__content > p:not(.eyebrow) { display: none !important; }
  .plissee-info__content > h2 { margin-bottom: 1.2rem !important; }
}

/* --- Hersteller-Logos am Handy korrekt skaliert, JAB nicht abgeschnitten --- */
@media (max-width: 720px) {
  /* brand-logos Section — Logos grösser */
  .brand-logos { gap: 1.4rem 2.2rem !important; padding: 0.6rem 0; justify-content: center; align-items: center; }
  .brand-logos__item {
    height: auto !important;
    flex: 0 0 auto;
    overflow: visible;
  }
  .brand-logos__item img {
    height: 40px !important;
    max-height: 44px;
    max-width: 150px;
    width: auto !important;
    object-fit: contain !important;
    display: block;
  }
  .brand-logos__item img[src$="jab.png"],
  .brand-logos__item img[src*="jab.png"] { max-width: 56px !important; height: 46px !important; }
  .brand-logos__item img[src*="chivasso"] { max-width: 130px !important; height: 38px !important; }
  .brand-logos__item img[src*="stardecor"] { max-width: 140px !important; height: 38px !important; }
  .brand-logos__item--text { font-size: 1rem !important; letter-spacing: 0.12em !important; }

  /* Bei 4+ Items: alle Logos KLEINER damit sie in EINE Reihe passen */
  .brand-logos:has(.brand-logos__item:nth-child(4)) { gap: 0.8rem 1.2rem !important; }
  .brand-logos:has(.brand-logos__item:nth-child(4)) .brand-logos__item img {
    height: 26px !important; max-height: 28px !important; max-width: 80px !important;
  }
  .brand-logos:has(.brand-logos__item:nth-child(4)) .brand-logos__item img[src*="jab"] {
    height: 30px !important; max-width: 36px !important;
  }
  .brand-logos:has(.brand-logos__item:nth-child(4)) .brand-logos__item--text {
    font-size: 0.78rem !important;
  }

  /* hero-brands (im Hero unten) — JAB-Anstoetz nicht abgeschnitten */
  .hero-brands { gap: 0.9rem 1.4rem !important; flex-wrap: wrap !important; justify-content: flex-start; }
  .hero-brands__logo {
    height: 20px !important; max-height: 22px;
    max-width: 100px;
    width: auto !important;
    object-fit: contain !important;
    display: inline-block;
  }
  .hero-brands__logo--jab { max-width: 40px !important; height: 32px !important; }
  .hero-brands__logo--chivasso { max-width: 90px !important; height: 22px !important; }
  .hero-brands__logo--stardecor { max-width: 95px !important; height: 22px !important; }
  .hero-brands__logo--leha { max-width: 70px !important; height: 18px !important; margin-left: 0 !important; }
}

@media (max-width: 380px) {
  .brand-logos { gap: 0.9rem 1.5rem !important; }
  .brand-logos__item img { height: 34px !important; max-width: 120px; }
  .brand-logos__item img[src*="jab.png"] { max-width: 50px !important; height: 42px !important; }
  .brand-logos__item img[src*="chivasso"] { max-width: 110px !important; height: 34px !important; }
  .brand-logos__item img[src*="stardecor"] { max-width: 120px !important; height: 34px !important; }
  .hero-brands { gap: 0.7rem 1rem !important; }
  .hero-brands__logo { height: 18px !important; max-width: 80px; }
  .hero-brands__logo--jab { max-width: 36px !important; height: 28px !important; }
}

/* --- Hero Mobile: ALLES auf 1 Bildschirm — Flexbox-Layout, kein Überlappen --- */
@media (max-width: 768px) {
  .page-header--image .page-header__inner {
    min-height: calc(100svh - var(--nav-h, 64px)) !important;
    max-height: calc(100svh - var(--nav-h, 64px)) !important;
    height: calc(100svh - var(--nav-h, 64px)) !important;
    padding: 1.2rem 1rem 2.4rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Titel-Block (Eyebrow + H1 + Buttons) etwas höher — obere Hälfte des Heros */
  .page-header--image .page-header__inner { padding-top: 12vh !important; }
  /* Trust + Brands aus absolute Position rausnehmen — normaler Flow */
  .page-header--image .hero-trust,
  .page-header--image .hero-brands {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
  }
  /* Trust pusht sich nach unten, Brands direkt darunter */
  .page-header--image .hero-trust {
    margin-top: 1.5rem !important;
    margin-bottom: 0.7rem !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.72rem !important;
    gap: 0.2rem 0.65rem !important;
    align-self: stretch;
  }
  /* Min-Abstand zwischen Buttons und Trust-Badge */
  .page-header--image .hero-actions { margin-bottom: 1.2rem !important; }
  .page-header--image .hero-trust__icon { width: 0.95rem !important; height: 0.95rem !important; font-size: 0.55rem !important; }
  .page-header--image .hero-brands {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Hero-actions kompakter */
  .page-header--image .hero-actions { margin-top: 1.2rem !important; gap: 0.5rem !important; }
  /* Background statisch — kein "Zoom" beim Scrollen */
  .page-header--image {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    will-change: auto;
  }
  /* Keine kostspielige backdrop-filter Effekte unterwegs (verursacht Stocken) */
  .btn--hero-ghost { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* --- Hero-Bereich am Handy: GROSSER Titel, Tagline direkt anschliessend --- */
@media (max-width: 768px) {
  .page-header--image h1 {
    font-size: clamp(2.4rem, 10vw, 3.4rem) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    text-shadow: 0 3px 18px rgba(0,0,0,0.7), 0 1px 6px rgba(0,0,0,0.55) !important;
    letter-spacing: -0.01em;
  }
  /* Tagline-Inline IM H1 — kleiner als "Mass", gleiche Linie/Baseline */
  .page-header--image h1 .hero-tagline-inline {
    font-size: 0.42em !important;
    font-style: italic;
    font-weight: 400;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0;
    margin-left: 0.45rem;
    vertical-align: baseline;
    white-space: nowrap;
    display: inline;
  }
  /* Original-Tagline-P weg, weil ins H1 verschoben */
  .page-header--image .hero-tagline--moved,
  .page-header--image .hero-tagline { display: none !important; }
  /* Hero-actions klar abgesetzt nach dem Titel-Block */
  .page-header--image .hero-actions { margin-top: 1.6rem !important; }
  .page-header--image .eyebrow {
    font-size: 0.78rem !important;
    letter-spacing: 0.18em !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5) !important;
    margin-bottom: 0.6rem !important;
  }
  /* Stärkeres Overlay nur über dem Text-Bereich für besseren Kontrast */
  .page-header--image::before {
    background: linear-gradient(to top, rgba(15,12,8,0.78) 0%, rgba(15,12,8,0.42) 55%, rgba(15,12,8,0.2) 100%) !important;
  }
  /* Buttons schlanker und kompakter */
  .btn--hero-primary,
  .btn--hero-ghost {
    padding: 0.7rem 1rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    gap: 0.5rem;
  }
  .btn--hero__icon { width: 15px !important; height: 15px !important; }
  .hero-actions { gap: 0.55rem !important; }
}

@media (max-width: 480px) {
  .page-header--image h1 {
    font-size: clamp(2.8rem, 14.5vw, 4rem) !important;
  }
  .hero-tagline {
    font-size: 1.15rem !important;
  }
  .btn--hero-primary,
  .btn--hero-ghost {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
  }
  .btn--hero__icon { width: 14px !important; height: 14px !important; }
}

/* --- Reassurance/USPs/Process: auf echten Handys (≤480px) wieder einspaltig --- */
@media (max-width: 480px) {
  .reassurance__grid,
  .usps__grid,
  .process__steps,
  .warranty-cards,
  .feature-grid,
  .partner-grid,
  .group-grid,
  .group-grid--three,
  .use-list,
  .how-grid,
  .rollo-types,
  .usp-row,
  .konfig-teaser,
  .products__grid,
  .testimonials__grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .reassurance__item, .warranty-card, .feature-card { padding: 1.5rem 1.25rem; }
}

/* --- video-card__credit: Hersteller + Händler auf EINER Linie am Handy --- */
@media (max-width: 768px) {
  .video-card__credit {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 0 0;
  }
  .video-card__credit-item {
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.4rem;
  }
  .video-card__credit-logo {
    height: 24px !important;
    max-width: 95px;
    max-height: 28px;
    object-fit: contain;
    width: auto;
  }
  .video-card__credit-logo--vinelly { max-width: 80px; height: 22px !important; }
  .video-card__credit-sep {
    display: block;
    height: 24px;
    flex: 0 0 1px;
  }
  .video-card__credit-label {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}

/* Sehr enge Geräte: Labels weglassen, nur Logos — aber Logos grösser */
@media (max-width: 380px) {
  .video-card__credit-label { display: none; }
  .video-card__credit-logo { max-width: 110px; height: 26px !important; }
  .video-card__credit-logo--vinelly { max-width: 90px; height: 24px !important; }
}

/* === Positions-Status (Cross-Konfigurator-Banner) === kompakt, einzeilig === */
.positions-status {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 47;
  background: var(--accent); color: #fff;
  padding: 0.4rem 0.8rem calc(0.4rem + env(safe-area-inset-bottom));
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem; line-height: 1.25; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}
.positions-status.is-visible { display: block; }
.positions-status strong { font-weight: 700; }
body.has-positions { padding-bottom: 38px; }
body.has-positions.wizard-on .wizard-nav { bottom: 38px !important; }

/* Mobile-only: Lieferzeit im Start-/Hero-Bereich NICHT anzeigen.
   Desktop bleibt 1:1 unberuehrt. Betrifft die schwebende Lieferzeit-Pille
   (js/lieferzeit-pille.js) und die Hero-Trust-Zeile "Aktuelle Lieferzeit". */
@media (max-width: 768px) {
  .vinelly-lz-pille { display: none !important; }
  .hero-trust__lz { display: none !important; }
}

/* === Mobile-Fix 2026-07-08: Produkt-Header (Startseite) — Überschrift lief
   in den "Alle Produkte"-Knopf. Am Handy untereinander. Desktop unberührt. */
@media (max-width: 768px) {
  .products__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    margin-bottom: 2rem;
  }
}

/* === Mobile-Fix 2026-07-08: Vorher/Nachher-VIDEO-Karte (plissee/vorhaenge/referenzen)
   war am Handy klein & flach (240x160) — jetzt gleiche Breite/Höhe wie die
   Hochformat-Kundenvideos (9:16, Content-Breite). Desktop unberührt. */
@media (max-width: 600px) {
  .ba--video { aspect-ratio: 9 / 16 !important; }
  /* Wrapper der Karte (nacktes width:240px gibt es nur dort) auf Video-Breite */
  [style="width:240px"] { width: calc(100vw - 3rem) !important; max-width: 360px !important; }
}

/* === Mobile-Fix 2026-07-08: "Nach Ihren Wünschen"-Tagline im Hero der 7
   Produktseiten am Handy ausblenden (Wunsch Maiko). Desktop unberührt. */
@media (max-width: 768px) {
  .hero-tagline--wunsch { display: none !important; }
}

/* === Mobile-Fix 2026-07-08: Lieferzeit-Pille am Handy sichtbar, rechts unten
   UNTER dem WhatsApp-Knopf (Maiko rückt dafür etwas hoch). Nur auf Seiten
   mit Lieferzeit-Pille; Desktop unberührt (dort links unten wie bisher). */
@media (max-width: 768px) {
  .vinelly-lz-pille {
    display: flex !important;
    left: auto !important;
    right: 18px;
    bottom: 24px;
  }
  body:has(.vinelly-lz-pille) .wa-float { bottom: 100px; }
}

/* === Desktop-Fix 2026-07-08: Lieferzeit-Pille auch am Computer rechts unten
   UNTER dem WhatsApp-Knopf (Maiko rückt dafür hoch) — gleiche Logik wie der
   Mobile-Fix darüber; die Pille-Position selbst setzt js/lieferzeit-pille.js. */
@media (min-width: 769px) {
  body:has(.vinelly-lz-pille) .wa-float { bottom: 96px; }
}

/* === Mobile-Fix 2026-07-08: "Worauf Sie sich verlassen können"-Karten am Handy
   als 2x2-Raster (statt 1 Spalte) mit kleineren Symbolen/Texten — auf allen
   Produkt-/Standortseiten mit .reassurance-grid. Desktop unberührt. */
@media (max-width: 768px) {
  .reassurance-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1rem !important; }
  .reassurance-card { padding: 0 !important; }
  .reassurance-card__icon { width: 56px !important; height: 56px !important; margin: 0 auto 0.7rem !important; }
  .reassurance-card__icon svg { width: 30px !important; height: 30px !important; }
  .reassurance-card h3,
  .reassurance-card h4 { font-size: 0.92rem !important; margin-bottom: 0.4rem !important; }
  .reassurance-card p { font-size: 0.78rem !important; line-height: 1.5 !important; }
}

/* === Mobile-Fix 2026-07-08: Handy-Menü — Referenzen + Über uns direkt UNTER
   dem Heimberatung-Knopf einordnen (standen vorher ganz oben). Desktop unberührt. */
@media (max-width: 1024px) {
  .nav__links--open .nav__row--secondary > li:has(> a[href$="referenzen.html"]),
  .nav__links--open .nav__row--secondary > li:has(> a[href$="ueber-uns.html"]) { order: 3; }
  .nav__links--open .nav__row--products { order: 4; }
  .nav__links--open .nav__row--secondary > li.nav__has-dropdown { order: 5; }
  .nav__links--open .nav__row--secondary > li:last-child { order: 6; }
}

/* === Mobile-Fix 2026-07-08: Häkchen-Liste (benefit-list) auf Produkt-/Standortseiten
   am Handy: "Massgefertigt · Garantie" zuoberst über volle Breite, die übrigen
   Punkte als 2x2-Raster darunter, kompakter. Desktop unberührt. */
@media (max-width: 768px) {
  .benefit-list { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .benefit-list > li:last-child { order: -1; grid-column: 1 / -1; }
  .benefit-list li { flex-direction: column; gap: 0.45rem; padding: 0.75rem 0 !important; }
  .benefit-list > li:last-child { flex-direction: row; align-items: center; }
  .benefit-list li::before { margin-top: 0; }
  .benefit-list strong { font-size: 0.85rem !important; }
  .benefit-list span { font-size: 0.76rem !important; line-height: 1.5 !important; }
}

/* === Mobile-Fix 2026-07-08: Unterschrift einzeilig ("Maiko Reiner  GESCHÄFTSFÜHRER"),
   kein Umbruch mehr; Kurztext kommt aus main.js. Desktop unberührt. */
@media (max-width: 768px) {
  .signature { flex-wrap: nowrap; }
  .signature__mark, .signature__caption { white-space: nowrap; }
}

/* === Mobile-Fix 2026-07-08: Handy-Menü — Referenzen + Über uns luftiger &
   im Stil der Produkte-Liste (Serif, Trennlinien, Pfeil). Desktop unberührt. */
@media (max-width: 1024px) {
  .nav__links--open .nav__row--secondary > li:has(> a[href$="referenzen.html"]) {
    margin-top: 1rem;
    border-top: 1px solid rgba(44,36,22,0.12);
    padding-top: 0.35rem;
  }
  .nav__links--open .nav__row--secondary > li:has(> a[href$="referenzen.html"]) > a,
  .nav__links--open .nav__row--secondary > li:has(> a[href$="ueber-uns.html"]) > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--dark, #2C2416);
    border-bottom: 1px solid rgba(44,36,22,0.08);
  }
  .nav__links--open .nav__row--secondary > li:has(> a[href$="referenzen.html"]) > a::after,
  .nav__links--open .nav__row--secondary > li:has(> a[href$="ueber-uns.html"]) > a::after {
    content: '→';
    position: static;
    width: auto; height: auto;
    background: none;
    transform: none;
    display: inline-block;
    font-family: var(--font-sans, inherit);
    font-size: 0.95rem;
    color: var(--accent, #B8956A);
    opacity: 0.6;
  }
}

/* === Mobile-Fix 2026-07-08: Handy-Menü — goldener "Gratis Muster"-Knopf unten raus
   (oben gibt es schon den grünen); stattdessen KONTAKT als grosser Gold-Knopf. */
@media (max-width: 1024px) {
  .nav__links--open .nav__dropdown li:has(> a[href$="muster.html"]) { display: none; }
  .nav__links--open .nav__row--secondary > li:last-child { border-top: none; }
  .nav__links--open .nav__row--secondary > li:last-child a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.25rem !important;
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--accent, #B8956A);
    color: #fff !important;
    border-radius: 4px;
    border: none;
  }
  .nav__links--open .nav__row--secondary > li:last-child a::after { display: none; }
}

/* === Mobile-Fix 2026-07-08: Häkchen-Liste — beim obersten Punkt (Massgefertigt/
   Garantie) den Haken entfernen, Text beginnt an derselben linken Linie. */
@media (max-width: 768px) {
  .benefit-list > li:last-child::before { display: none; }
}

/* === Mobile-Fix 2026-07-08: oberster Punkt der Häkchen-Liste (Massgefertigt/
   Garantie) etwas grössere Schrift als die 2x2-Punkte darunter. */
@media (max-width: 768px) {
  .benefit-list > li:last-child strong { font-size: 1.02rem !important; }
  .benefit-list > li:last-child span { font-size: 0.88rem !important; line-height: 1.55 !important; }
}

/* === Mobile-Fix 2026-07-08: Beschreibungstext unter den Modell-Gruppen-Titeln
   ("Das klassische Faltstore…" usw.) am Handy ausblenden. Desktop unberührt. */
@media (max-width: 768px) {
  .model-group__head p { display: none !important; }
}

/* === Mobile-Fix 2026-07-08: Inspirations-Kacheln (insp-grid) am Handy als
   2x2-Raster statt 1 Spalte; Beschriftungen kompakter. Desktop unberührt. */
@media (max-width: 768px) {
  .insp-grid { grid-template-columns: 1fr 1fr !important; gap: 0.7rem !important; }
  .insp-grid__caption { padding: 1.3rem 0.7rem 0.65rem !important; gap: 0.4rem !important; }
  .insp-grid__caption-eyebrow { font-size: 0.56rem !important; letter-spacing: 0.12em !important; margin-bottom: 0.25rem !important; gap: 0.35rem !important; }
  .insp-grid__caption-eyebrow::before { width: 12px !important; }
  .insp-grid__caption-title { font-size: 0.92rem !important; }
  .insp-grid__num { font-size: 0.95rem !important; }
}

/* === Mobile-Fix 2026-07-08: "Unser Versprechen"-Karten (promises) ragten
   rechts aus dem Bildschirm — am Handy kompakter, 2x2 passend. Desktop unberührt. */
@media (max-width: 768px) {
  .promises { grid-template-columns: 1fr 1fr !important; }
  .promise { padding: 1.4rem 0.75rem !important; min-width: 0 !important; }
  .promise__icon { width: 44px !important; height: 44px !important; margin-bottom: 0.8rem !important; }
  .promise__icon svg { width: 20px; height: 20px; }
  .promise__title { font-size: 0.95rem !important; overflow-wrap: anywhere; }
  .promise__text { font-size: 0.76rem !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
}

/* === Mobile-Fix 2026-07-08: "10.- CHF zurück"-Abzeichen (referenzen) grösser,
   klarer, mit mehr Abstand zur Überschrift. Desktop unberührt. */
@media (max-width: 768px) {
  .photoreview__badge {
    font-size: 0.92rem !important;
    padding: 0.7rem 1.25rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.9rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .photoreview__intro h2 { margin-top: 0.6rem !important; }
}

/* === Mobile-Fix 2026-07-08: Anwendungs-Karten (area-grid, Schwerentflammbar/
   Akustik) — Spalten ZWINGEND gleich breit, nichts läuft mehr über den Rand.
   minmax(0,1fr) verhindert, dass lange Wörter die Spalte aufblähen. */
@media (max-width: 768px) {
  .area-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 0.8rem !important; }
  .area-card { min-width: 0 !important; padding: 1.1rem 0.85rem !important; }
  .area-card__icon { width: 30px !important; height: 30px !important; margin-bottom: 0.6rem !important; }
  .area-card__title { font-size: 1rem !important; overflow-wrap: anywhere; }
  .area-card__desc { font-size: 0.76rem !important; line-height: 1.55 !important; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
}

/* === Mobile-Fix 2026-07-08: Über-uns-Fotos — Text-Felder dezenter (weniger
   Deckung, kein Weichzeichner, kompakter), Verlauf schwächer: Bild besser
   sichtbar. Desktop unberührt. */
@media (max-width: 768px) {
  .img-cap {
    background: rgba(36,28,18,0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0.45rem 0.75rem !important;
    left: 0.9rem !important;
    bottom: 0.9rem !important;
  }
  .img-cap p:first-child { font-size: 1.05rem !important; }
  .img-cap p:last-child { font-size: 0.55rem !important; }
  .img-veil { opacity: 0.5; }
}

/* === Mobile-Fix 2026-07-08 (v2): Inspirations-Kacheln (insp-grid + flv-grid) —
   2x2-Raster UND Beschriftung UNTER dem Bild statt darüber (Bild voll sichtbar).
   Desktop unberührt (dort weiterhin Overlay auf dem Bild). */
@media (max-width: 768px) {
  .insp-grid, .flv-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.1rem 0.7rem !important; }
  .insp-grid__tile, .flv-grid__tile {
    aspect-ratio: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    background: none !important;
  }
  .insp-grid__tile img, .flv-grid__tile img {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
  }
  .insp-grid__caption, .flv-grid__caption {
    position: static !important;
    background: none !important;
    padding: 0.45rem 0.1rem 0 !important;
  }
  .insp-grid__caption-eyebrow, .flv-grid__caption-eyebrow {
    color: var(--accent) !important;
    text-shadow: none !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 0.2rem !important;
    gap: 0.35rem !important;
  }
  .insp-grid__caption-eyebrow::before { width: 12px !important; background: var(--accent) !important; }
  .insp-grid__caption-title, .flv-grid__caption-title {
    color: var(--dark) !important;
    font-size: 0.92rem !important;
    text-shadow: none !important;
  }
  .insp-grid__caption-title em, .flv-grid__caption-title em { color: var(--accent) !important; }
  .insp-grid__num, .flv-grid__num { display: none !important; }
}

/* --- USP-Leiste am Handy: Icon + Text linksbündig, gleicher Abstand zum Rand --- */
@media (max-width: 768px) {
  .usps__item {
    display: flex !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 1.1rem;
  }
  .usps__icon { margin: 0.15rem 0 0 !important; }
  .usps__title, .usps__desc { text-align: left !important; }
}

/* ============================================================
   HERO ENTSCHLACKT AM HANDY (2026-07-08) — Desktop 1:1 unberührt
   1) Header-Pill "+ Heimberatung" ausgeblendet (Hamburger reicht,
      Hero hat den gleichen Button bereits)
   2) Hero: nur noch 1 CTA (Gratis Heimberatung) — der braune
      Konfigurator-Button rutscht unter den Hero und erscheint
      erst beim Scrollen (.hero-config-mobile, pro Seite im HTML)
   3) Hero-Titel eine Stufe kleiner
   4) Trust-Box: nur noch die Garantie-Zeile über den Marken-Logos
   ============================================================ */
.hero-config-mobile { display: none; }

@media (max-width: 960px) {
  .nav__heimberatung-mobile { display: none !important; }
}

@media (max-width: 768px) {
  /* 2) nur 1 CTA im Hero */
  .page-header .hero-actions .btn--hero-ghost { display: none !important; }

  /* 3) Titel kleiner */
  .page-header--image h1 { font-size: clamp(2rem, 8.5vw, 2.8rem) !important; }

  /* 4) Trust-Box: nur 1. Zeile (Garantie), Rest weg */
  .page-header .hero-trust li { display: none !important; }
  .page-header .hero-trust li:first-child { display: inline-flex !important; }

  /* 2) Konfigurator-CTA unterhalb des Heros */
  .hero-config-mobile {
    display: flex;
    justify-content: center;
    padding: 1.15rem var(--gutter, 1.25rem) 0.35rem;
  }
  .hero-config-mobile .btn--hero-primary {
    width: 100%;
    max-width: 420px;
    justify-content: center;
  }
}

/* ===== Sprachwahl DE/FR/IT/RM (2026-07-08) =====
   Pille oben rechts im .nav__actions-Bereich — nutzt das bestehende
   .lang-switch-Design (Button + Menü) weiter oben in dieser Datei. */
.lang-switch__globe { width: 15px; height: 15px; flex: 0 0 auto; }
.lang-switch__item { text-decoration: none; }
.lang-switch__item::after { display: none; }

/* Sicherheitsnetz mittlere Fensterbreiten: statt dass sich Menüpunkte,
   Logo und CTA überlappen, darf die Menüzeile sauber umbrechen. */
@media (min-width: 961px) and (max-width: 1500px) {
  .nav__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(var(--nav-row1-h), auto) auto;
  }
  .nav__row--secondary {
    flex-wrap: wrap;
    row-gap: 0.1rem;
    padding: 0.4rem 0;
    justify-content: center;
  }
  /* Sprachseiten: Zeile bricht wegen längerer Labels früher um → Platz einrechnen */
  html:not([lang="de-CH"]) { --nav-h: 148px; }
}

/* Sprachversionen (fr/it/rm): längere Nav-Labels — Desktop-Nav kompakter.
   DE-Seiten (lang="de-CH") bleiben 1:1 unberührt. */
@media (min-width: 769px) {
  html:not([lang="de-CH"]) .nav__row--secondary { gap: 1.05rem; }
  html:not([lang="de-CH"]) .nav__links .nav__row--secondary a,
  html:not([lang="de-CH"]) .nav__links .nav__dropdown-toggle { font-size: 14px; letter-spacing: 0.05em; }
  html:not([lang="de-CH"]) .nav__row--products { gap: 1.35rem; }
  html:not([lang="de-CH"]) .nav__row--products a { letter-spacing: 0.08em; }
}

/* === Handy-Feinschliff 2026-07-13 (nur Handy, Desktop unberührt) === */
@media (max-width: 600px) {
  /* Doppelten Preis-CTA vermeiden: Banner aus, der „Preis berechnen"-Button unter dem Hero bleibt (1×) — gilt für alle Produktseiten */
  .usp-band { display: none !important; }
  /* Inspirations-Kacheln: langer Titel aus, kurzer Titel sichtbar (Desktop behält den vollen) */
  .insp-grid__caption-title.mobile-full { display: none !important; }
  .insp-grid__caption-title.mobile-short { display: block !important; }
  /* Zahlungs-Logos: Label auf eigene Zeile, dann 5 kleine Chips in EINER Reihe */
  .footer__pay { flex-wrap: wrap !important; row-gap: 0.75rem !important; column-gap: 6px !important; justify-content: center !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; }
  .footer__pay-label { flex: 0 0 100% !important; text-align: center !important; margin-bottom: 0 !important; }
  .footer__pay .pay-chip { flex: 1 1 0 !important; height: 30px !important; padding: 0 4px !important; min-width: 0 !important; }
  .footer__pay .pay-chip img { height: 15px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; }
  .footer__pay .pay-chip--twint img { height: 16px !important; }
  .footer__pay .pay-chip--mc img { height: 20px !important; }
  /* Kundenstimmen: alle untereinander, volle Breite (statt gequetschter 2-Spalten) */
  .g-reviews { grid-template-columns: 1fr !important; gap: 0.9rem !important; }
  .g-reviews .g-review:first-child { grid-column: auto !important; grid-row: auto !important; }
  /* Feature-/Vorteils-Liste: eine ruhige Spalte statt 2-Spalten-✓-Raster (weniger Template-/Fake-Look) */
  .benefit-list { display: block !important; }
  .benefit-list li { flex-direction: row !important; align-items: flex-start !important; gap: 0.8rem !important; padding: 0.9rem 0 !important; }
  .benefit-list > li:last-child { grid-column: auto !important; order: 0 !important; }
}

/* === Hero-CTAs Handy 2026-07-13: 2 Buttons im Hero (Heimberatung + Konfigurator), ohne Icon, neue Farben === */
@media (max-width: 768px) {
  /* Konfigurator-Button zurück in den Hero (2. CTA sichtbar) */
  .page-header .hero-actions .btn--hero-ghost { display: inline-flex !important; }
  /* Buttons gestapelt, volle Breite */
  .page-header .hero-actions { flex-direction: column !important; align-items: stretch !important; gap: 0.6rem !important; }
  .page-header .hero-actions .btn--hero-primary,
  .page-header .hero-actions .btn--hero-ghost { width: 100% !important; justify-content: center !important; }
  /* Haupt-CTA: ein voller dunkler Button (andere Farbe als vorher) */
  .page-header .hero-actions .btn--hero-primary { background: var(--dark) !important; border: 1.5px solid var(--dark) !important; color: #fff !important; }
  /* Zweit-CTA: feiner Umriss (transparent) — Hierarchie statt zweitem Farbblock, wirkt wie EIN Design */
  .page-header .hero-actions .btn--hero-ghost { background: rgba(0,0,0,0.18) !important; border: 1.5px solid rgba(255,255,255,0.8) !important; color: #fff !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; }
  /* Symbole (Haus-/Schieber-Icon) entfernen */
  .page-header .hero-actions .btn--hero__icon { display: none !important; }
  /* doppelten Konfig-Button unter dem Hero ausblenden (ist jetzt im Hero) */
  .hero-config-mobile { display: none !important; }
  /* grünen Status-Punkt der Lieferzeit-Pille ins Marken-Gold — passt zum Look */
  .vinelly-lz-pille__dot { background: var(--accent) !important; }
  /* grünes WhatsApp-Badge (am Maiko-Foto) ins Marken-Gold — kein Grün mehr im Look */
  .wa-float__badge { background: var(--accent) !important; }
  /* Häkchen-Symbol neben „5 Jahre Garantie" entfernen (sauberer, kein Haken) */
  .page-header .hero-trust__icon { display: none !important; }
}

/* ============================================================
   SCHWEBENDE BERATER-KARTE (Foto · Ausmess-CTA · Garantie · Kontakt)
   ============================================================ */
.wa-float--card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: min(248px, calc(100vw - 24px));
  height: auto;
  padding: 0;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(184, 149, 106, 0.20);
  box-shadow: 0 2px 6px rgba(44, 36, 22, 0.08), 0 16px 40px rgba(44, 36, 22, 0.16);
  overflow: hidden;
  animation: wa-float-in .55s cubic-bezier(.2,.7,.2,1) .2s both;
}
.wa-float--card:hover { transform: none; box-shadow: 0 3px 8px rgba(44,36,22,0.10), 0 20px 46px rgba(44,36,22,0.20); }
.wa-float--card .wa-card__launch { display: none; }
.wa-float--card .wa-card__panel { position: relative; display: flex; flex-direction: column; padding: 16px 16px 14px; }

.wa-card__main { display: block; text-decoration: none; color: var(--dark); }
.wa-card__head { display: flex; align-items: center; gap: 12px; }
.wa-card__head .wa-float__avatar { width: 46px; height: 46px; }
.wa-card__id { display: flex; flex-direction: column; line-height: 1.2; }
.wa-float--card .wa-float__name { font-size: 15px; }
.wa-float--card .wa-float__sub { text-transform: none; letter-spacing: 0.2px; font-size: 12px; margin-top: 2px; }

.wa-card__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 11px 14px; border-radius: 13px;
  background: linear-gradient(135deg, #2e7d4f 0%, #1f5d3a 100%);
  color: #fff; text-decoration: none; transition: filter .2s ease;
}
.wa-card__cta:hover { filter: brightness(1.07); }
.wa-card__cta-txt { display: flex; flex-direction: column; line-height: 1.25; }
.wa-card__cta-txt strong { font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; }
.wa-card__cta-txt small { font-size: 13.5px; font-weight: 700; opacity: 1; margin-top: 3px; white-space: nowrap; }

.wa-card__local { margin-top: 12px; padding-left: 20px; font-family: var(--font-sans); font-size: 12.5px; color: var(--dark); }
/* Pfeil entfernt: der weisse "→" ragte ueber den Button-Rand auf den weissen
   Kartenhintergrund und wirkte abgeschnitten (der "weisse Strich"). */
.wa-card__cta-arrow { display: none; }

.wa-card__trust { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wa-card__trust li { position: relative; padding-left: 20px; font-family: var(--font-sans); font-size: 12.5px; color: var(--dark); }
.wa-card__trust li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #2e7d4f; font-weight: 700; }

.wa-card__actions { display: flex; gap: 8px; margin-top: 11px; }
.wa-card__btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1; text-decoration: none; padding: 8px 10px; border-radius: 9px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .2px;
  background: #fff; border: 1px solid rgba(44, 36, 22, 0.16); color: var(--dark);
  transition: background .2s ease, border-color .2s ease;
}
.wa-card__btn:hover { background: rgba(44, 36, 22, 0.04); border-color: rgba(44, 36, 22, 0.28); }
.wa-card__btn .wa-card__btn-ic { width: 14px; height: 14px; flex-shrink: 0; fill: var(--brown); }
.wa-card__btn .wa-card__btn-ic--wa { fill: #25D366; }
/* Aufmerksamkeits-Signal wie am Handy: das grosse gruene Feld "Ausmessen & Beratung"
   pulsiert (v.a. Desktop, wo die Karte offen ist). Ring bleibt klein genug, damit die
   Karte (overflow:hidden) ihn nicht abschneidet. */
.wa-card__cta { animation: wa-btn-pulse 1.5s ease-out .4s infinite; }
.wa-card__cta:hover { animation: none; }

.wa-card__launch { position: relative; border: none; background: transparent; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.wa-card__launch-badge { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; animation: wa-float-pulse 1.5s ease-out .4s infinite; }
.wa-card__launch-badge svg { width: 12px; height: 12px; fill: #fff; }
.wa-card__close { display: none; }

/* Gesamte Berater-Karte in Arial */
.wa-float--card, .wa-float--card * { font-family: Arial, Helvetica, sans-serif !important; }

@media (max-width: 600px) {
  .wa-float--card:not(.is-collapsed) { width: min(300px, calc(100vw - 24px)); left: 12px; right: auto; }
  /* eingeklappt: nur runde Foto-Bubble — deckt am Handy nichts zu */
  .wa-float--card.is-collapsed { width: 56px; height: 56px; padding: 0; border-radius: 50%; background: transparent; border: none; box-shadow: none; overflow: visible; }
  .wa-float--card.is-collapsed .wa-card__panel { display: none; }
  .wa-float--card.is-collapsed .wa-card__launch { display: block; width: 56px; height: 56px; }
  .wa-float--card.is-collapsed .wa-float__avatar { width: 56px; height: 56px; box-shadow: inset 0 0 0 2px #fff, 0 4px 14px rgba(44, 36, 22, 0.30); }
  /* WhatsApp-Abzeichen sauber auf den Kreisrand (haengt nicht Richtung Lieferzeit-Pille) */
  .wa-float--card.is-collapsed .wa-card__launch-badge { right: 1px; bottom: 1px; }
  .wa-float--card .wa-card__close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
    border: none; background: rgba(44, 36, 22, 0.08); color: var(--dark); font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
  }
}

/* ============================================================
   WhatsApp-/Berater-Bubble am Handy IMMER auf die LINKE Seite
   (2026-07-22). Steht bewusst ganz am Dateiende — nach allen
   frueheren .wa-float-Positionsregeln (Pkt 8, Lieferzeit-Pille),
   damit sie zuverlaessig greift. Rechts unten sitzt ggf. die
   Lieferzeit-Pille; links unten der grosse Feed-Button (~176px hoch).
   ============================================================ */
@media (max-width: 600px) {
  .wa-float,
  body.home-page .wa-float,
  body:has(.vinelly-lz-pille) .wa-float {
    left: 16px;
    right: auto;
    bottom: 24px;
  }
  /* Ausnahme: Seiten mit dem grossen Feed-Button (links unten, ~160px hoch)
     wuerden sich sonst ueberlappen — dort bleibt die Bubble rechts wie bisher,
     ueber der Lieferzeit-Pille. */
  body:has(.vinelly-feed-fab) .wa-float {
    left: auto;
    right: 18px;
    bottom: 100px;
  }
}