/* HAHN & VO — home page */

/* ---------- preloader: watch face + flyback seconds hand ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 2000; background: var(--petrol-deep);
  display: grid; place-items: center; align-content: center; gap: 28px;
  color: var(--creme);
}
.preloader.is-done { pointer-events: none; }
.pre-watch { position: relative; width: clamp(200px, 26vw, 270px); aspect-ratio: 1; opacity: 0; }
.pre-watch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pre-ring .pre-tick { stroke: var(--creme); opacity: 0; }
.pre-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.pre-mark svg { position: static; width: 42%; height: auto; }
.pre-handsvg { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); }
.ph-needle, .ph-cap { fill: var(--creme); stroke: var(--petrol-deep); stroke-width: 0.7; }
.ph-weight { fill: none; stroke: var(--creme); stroke-width: 2.4; paint-order: stroke; }
.ph-capdot { fill: var(--petrol-deep); }
.pre-word { opacity: 0; color: var(--creme-60); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; background: var(--petrol-deep); color: var(--creme);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.52; filter: saturate(0.85);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(8,30,48,0) 0%, rgba(8,30,48,0.55) 78%),
    linear-gradient(to bottom, rgba(8,30,48,0.55) 0%, rgba(8,30,48,0.05) 30%, rgba(8,30,48,0.1) 70%, rgba(8,30,48,0.82) 100%);
}
.hero-inner {
  position: relative; z-index: 2; text-align: center; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--header-h) + 3vh);
}
/* aspect-ratio = Seitenverhältnis des HV-Zeichens (viewBox 408.7 × 406.6):
   Das SVG wird per JS eingesetzt — ohne reservierte Höhe rückt der ganze
   Hero beim Einsetzen um 120 px (Layout-Shift, gemessen 04.09.). */
.hero-mark { width: clamp(120px, 17vw, 210px); aspect-ratio: 408.7 / 406.6; margin-bottom: clamp(20px, 3.5vh, 44px); opacity: 0; will-change: transform; }
.hero-mark svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 60px rgba(0,0,0,0.45)); }
.hero-title { margin: 0; }
/* slot-machine letter roll */
.roll { display: inline-flex; }
.roll .rl { display: inline-block; position: relative; overflow: hidden; }
.roll .rl > i { display: block; font-style: normal; }
.roll .rl > i + i { position: absolute; left: 0; top: 0; transform: translateY(-115%); }
.hero-sub {
  margin-top: clamp(16px, 2.4vh, 26px); font-size: clamp(0.98rem, 1.4vw, 1.18rem);
  line-height: 1.65; color: var(--creme-60); max-width: 58ch;
}
.hero-ctas { display: flex; gap: 14px; margin-top: clamp(24px, 3.6vh, 40px); flex-wrap: wrap; justify-content: center; }
.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 26px; color: var(--creme-60);
}
.hero-scrollcue { display: flex; align-items: center; gap: 12px; }
.cue-line { display: block; width: 1px; height: 34px; background: var(--creme-line); position: relative; overflow: hidden; }
.cue-line::after {
  content: ''; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--creme); animation: cuedrop 1.8s var(--ease-inout) infinite;
}
@keyframes cuedrop { 0% { top: -50%; } 60%, 100% { top: 110%; } }
@media (max-width: 640px) {
  .hero-foot { justify-content: center; }
  .hero-foot > :first-child, .hero-foot > :last-child { display: none; }
}

/* ---------- marquee on creme ---------- */
.marquee { background: var(--creme); }

/* ---------- new in / flagship ---------- */
.flagship {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 72px);
  align-items: center; margin-bottom: clamp(48px, 6vw, 88px);
}
.flagship-media { height: clamp(380px, 58vh, 640px); background: #050607; }
.flagship-media video { width: 100%; height: 100%; object-fit: cover; }
.flagship-body { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.flagship-desc { color: var(--ink-60); max-width: 52ch; font-size: 15.5px; line-height: 1.65; }
.flagship-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.flagship-meta .spec {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line); background: var(--white); padding: 8px 14px; border-radius: 2px;
}
.flagship-price { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 650; letter-spacing: -0.02em; }
.flagship-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 900px) { .flagship { grid-template-columns: 1fr; } .flagship-media { height: clamp(300px, 44vh, 460px); } }

/* rail */
.rail-wrap { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; cursor: grab; }
.rail-wrap::-webkit-scrollbar { display: none; }
.rail-wrap.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail {
  display: flex; gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-left: var(--gutter); padding-right: var(--gutter); width: max-content;
}
.rail .product-card { width: clamp(280px, 24vw, 350px); flex: none; scroll-snap-align: start; }

/* ---------- services ---------- */
.services { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(30px, 4vw, 54px); }
.service { position: relative; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.service-num { font-size: clamp(4rem, 7vw, 6.5rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.service-num em { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); }
.service h3 { font-size: 1.15rem; font-weight: 620; margin: 18px 0 10px; letter-spacing: -0.01em; }
.service p { color: var(--ink-60); font-size: 14.5px; line-height: 1.65; max-width: 38ch; }
@media (max-width: 820px) { .services-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- Kundenstimmen: gepinnte Bühne, vom Scrollen geblättert ----------
   Ein Foto, ein Zitat, ein Zähler. Beim Scrollen schiebt sich das nächste
   Foto wie ein Vorhang von unten herauf (das Bild darin läuft gegenläufig
   mit, Parallaxe), das alte Zitat steigt zeilenweise aus der Maske, das
   neue steigt hinein. Alles nur transform/opacity — flüssig auch auf dem
   Telefon. Ohne Bewegung (prefers-reduced-motion, sehr flache Bildschirme)
   wird daraus das blätterbare Kartendeck (.st-deck). */
.stimmen { background: var(--petrol-deep); color: var(--creme); position: relative; overflow: hidden; padding-bottom: 0; }
.stimmen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 64% at 28% 48%, rgba(22, 64, 95, 0.55), transparent 72%);
}
.st-head { position: relative; align-items: flex-end; }
.st-lead { max-width: 30ch; color: var(--creme-60); font-size: 15px; line-height: 1.6; padding-bottom: 6px; }

.st-pin {
  position: relative; height: 100vh; height: 100svh;
  padding: calc(var(--header-h) + 4px) 0 clamp(44px, 6vh, 64px);
}
.st-inner { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(14px, 2.4vh, 28px); }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.st-count { display: inline-flex; align-items: baseline; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--creme-60); }
.st-count b { color: var(--creme); font-weight: 620; font-size: 13px; }
.st-nav { display: flex; gap: 10px; }
.st-btn {
  width: 48px; height: 48px; border: 1px solid var(--creme-line); border-radius: 50%;
  color: var(--creme); font-size: 17px; display: grid; place-items: center;
  transition: background .3s, color .3s, transform .35s var(--ease-out), border-color .3s;
}
.st-btn:hover { background: var(--creme); color: var(--petrol); border-color: var(--creme); transform: scale(1.06); }
.st-btn:active { transform: scale(0.96); }

.st-body {
  display: grid; grid-template-columns: minmax(0, 44fr) 1px minmax(0, 56fr);
  gap: clamp(28px, 4.2vw, 84px); align-items: stretch; min-height: 0;
}

/* Bühne — die Fotos liegen übereinander, jedes ein Vorhang */
.st-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 100%;
  justify-self: end; overflow: hidden; border: 1px solid var(--creme-line); background: var(--petrol);
}
/* Ausgangslage (Vorhang unten, Zeilen in der Maske) setzt allein GSAP —
   ein CSS-Transform dazu wuerde sich addieren. */
.st-fig { position: absolute; inset: 0; margin: 0; overflow: hidden; will-change: transform; }
/* Bilder fangen keine Zeigerereignisse — sonst startet ein Wisch das
   native Bild-Ziehen, und die Geste geht verloren. */
.st-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.st-stage, .st-quote { user-select: none; -webkit-user-select: none; }
.st-shade { position: absolute; inset: 0; background: var(--petrol-deep); opacity: 0; pointer-events: none; }

/* Leiste zwischen Bühne und Zitat */
.st-rail { position: relative; align-self: center; height: 58%; width: 1px; background: var(--creme-line); }
.st-tick {
  position: absolute; left: 50%; top: var(--p); width: 22px; height: 18px; transform: translate(-50%, -50%);
  display: grid; place-items: center; opacity: 0.45; transition: opacity .3s;
}
.st-tick::before { content: ''; width: 9px; height: 1px; background: var(--creme); }
.st-tick.is-on, .st-tick:hover { opacity: 1; }
.st-marker {
  position: absolute; left: 50%; top: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--creme); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(255, 250, 231, 0.12);
}

/* Zitat — alle sechs liegen übereinander, sichtbar ist nur, was aus der Maske ragt */
.st-quote { position: relative; min-height: 0; }
.st-ghost {
  position: absolute; left: -0.06em; top: -0.34em; font-family: var(--font-brand);
  font-size: clamp(11rem, 24vw, 26rem); line-height: 1; color: var(--creme); opacity: 0.045;
  pointer-events: none; user-select: none; will-change: transform;
}
.st-q { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.st-q blockquote {
  font-family: var(--font-brand); font-size: clamp(1.25rem, 2.05vw, 2rem);
  line-height: 1.32; letter-spacing: -0.004em; text-wrap: pretty;
}
.st-line { display: block; overflow: hidden; padding: 0.06em 0 0.1em; margin: -0.06em 0 -0.1em; }
.st-line > span { display: block; will-change: transform; }
.st-meta { margin-top: clamp(18px, 2.6vh, 32px); display: grid; gap: 4px; }
.st-name { font-weight: 620; font-size: 14px; }
.st-watch { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--creme-60); }

/* Hinweis unten, nur solange nicht geblättert wurde */
.st-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--creme-60); pointer-events: none;
}
.st-hint i { position: relative; width: 1px; height: 26px; background: var(--creme-line); overflow: hidden; }
.st-hint i::after { content: ''; position: absolute; inset: 0; background: var(--creme); transform: translateY(-100%); animation: st-hint 1.9s var(--ease-inout) infinite; }
@keyframes st-hint { to { transform: translateY(100%); } }

/* Telefon: Foto oben, Leiste quer, Zitat darunter */
@media (max-width: 900px) {
  .st-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .st-lead { padding-bottom: 0; }
  .st-pin { padding-top: calc(var(--header-h) - 12px); padding-bottom: 52px; }
  .st-body { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: 18px; }
  .st-stage { aspect-ratio: auto; height: 38svh; height: 38dvh; max-height: 340px; justify-self: stretch; }
  .st-rail { width: 100%; height: 1px; align-self: auto; }
  /* 28 px Tippfläche (Mindestmaß 24) — der sichtbare Strich bleibt 9 × 1 px */
  .st-tick { top: 50%; left: var(--p); width: 28px; height: 28px; }
  .st-tick::before { width: 1px; height: 9px; }
  .st-marker { top: 50%; left: 0; }
  .st-ghost { display: none; }
  .st-q { justify-content: flex-start; }
  .st-q blockquote { font-size: clamp(1.02rem, 2.55svh, 1.22rem); line-height: 1.36; }
  .st-meta { margin-top: 14px; }
  .st-btn { width: 42px; height: 42px; font-size: 15px; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .st-stage { height: 32svh; height: 32dvh; }
  .st-q blockquote { font-size: 1rem; line-height: 1.32; }
}

/* Touch: nicht gepinnt, im Fluss — Wischen oder Tippen blättert */
.st-pin.is-frei { height: auto; padding-bottom: clamp(56px, 8vw, 96px); }
.st-pin.is-frei .st-inner { height: auto; }
.st-pin.is-frei .st-body { touch-action: pan-y; }
.st-pin.is-frei .st-stage { aspect-ratio: 4 / 5; height: auto; max-height: 480px; justify-self: stretch; }
.st-q.is-measure { position: relative; visibility: hidden; }
.st-pin.is-frei .st-hint {
  position: static; transform: none; display: flex; justify-content: center; margin-top: 22px;
}
.st-pin.is-frei .st-hint i { width: 28px; height: 1px; }
.st-pin.is-frei .st-hint i::after { transform: translateX(-100%); animation: st-hint-x 1.9s var(--ease-inout) infinite; }
@keyframes st-hint-x { to { transform: translateX(100%); } }
@media (min-width: 901px) {
  .st-pin.is-frei .st-body { grid-template-columns: minmax(0, 44fr) 1px minmax(0, 56fr); }
  .st-pin.is-frei .st-stage { max-height: 62vh; justify-self: end; }
}

/* Mehrere Stimmen nebeneinander, rechts wird geblättert (Desktop und ohne
   Bewegung). --st-n ist die Anzahl pro Seite; home.js schiebt immer um genau
   eine Fensterbreite weiter. */
.st-deck {
  --st-gap: clamp(18px, 2vw, 28px);
  padding: 0 var(--gutter) clamp(72px, 9vw, 150px); max-width: 1680px; margin: 0 auto;
  /* Über den Lichtschleier des Abschnitts (.stimmen::before) heben — sonst
     legt er sich als milchiger Film über die linken Kartenfotos. */
  position: relative; z-index: 1;
}
.st-deck-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 2.2vw, 30px); }
.st-deck-top[hidden] { display: none; }
.st-deck .st-btn:disabled { opacity: 0.3; pointer-events: none; }
.st-spur {
  display: flex; gap: var(--st-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.st-spur::-webkit-scrollbar { display: none; }
/* Kartenbreite als feste Bruchteile — kein Teilen durch eine Variable,
   das rechnen ältere Browser nicht zuverlässig. */
.st-karte {
  flex: 0 0 calc(33.3333% - 0.6667 * var(--st-gap));
  scroll-snap-align: start; margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--creme-line); background: rgba(255, 250, 231, 0.04); overflow: hidden;
}
/* Quadrat: die Rezensionsfotos liegen fast alle als 1:1 vor (900x900,
   1400x1400). Ein flacherer Rahmen wuerde nur Uhr und Handgelenk
   abschneiden — im Quadrat steht das Bild so da, wie es aufgenommen wurde. */
.st-karte img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.st-karte-text { flex: 1; padding: clamp(18px, 1.8vw, 26px); display: grid; grid-template-rows: 1fr auto; gap: 16px; }
/* Alle Karten einer Reihe sind gleich hoch. Kurze Zitate stehen deshalb
   mittig statt oben — sonst klafft unten eine Lücke. */
.st-karte blockquote { align-self: center; font-family: var(--font-brand); font-size: clamp(1rem, 0.82vw, 1.1rem); line-height: 1.5; text-wrap: pretty; }
.st-karte figcaption { display: grid; gap: 3px; }
@media (min-width: 1600px) { .st-karte { flex-basis: calc(25% - 0.75 * var(--st-gap)); } }
@media (max-width: 1100px) { .st-karte { flex-basis: calc(50% - 0.5 * var(--st-gap)); } }
@media (max-width: 760px) { .st-karte { flex-basis: 100%; } }

/* ---------- ways (3er block) ---------- */
.ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(30px, 4vw, 54px); }
.way { display: block; position: relative; }
.way-media { height: clamp(260px, 34vh, 400px); }
.way-media img { transition: transform 1.2s var(--ease-out); }
.way:hover .way-media img { transform: scale(1.05); }
.way-body { padding: 22px 4px 0; }
.way-body h3 { margin-bottom: 12px; }
.way-body p { color: var(--ink-60); font-size: 14.5px; line-height: 1.6; max-width: 40ch; }
.way-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; transition: gap .3s var(--ease-out); }
.way:hover .way-cta { gap: 14px; }
@media (max-width: 900px) { .ways-grid { grid-template-columns: 1fr; } .way-media { height: clamp(220px, 30vh, 320px); } }

/* ---------- faq ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 5vw, 90px); align-items: start; }
.faq-aside { color: var(--ink-60); font-size: 15px; line-height: 1.65; margin-top: 22px; max-width: 34ch; }
.faq-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; align-items: flex-start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- about teaser ---------- */
.about-teaser { background: var(--white); border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 90px); align-items: center; }
.about-media { height: clamp(380px, 62vh, 640px); }
.about-media img { height: 110%; }
.about-body { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.about-body p { color: var(--ink-60); font-size: 15.5px; line-height: 1.7; max-width: 52ch; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-media { height: clamp(280px, 42vh, 440px); } }

/* ---------- instagram ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ig-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--white); display: block; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ig-tile:hover img { transform: scale(1.06); }
.ig-tile::after {
  content: '↗'; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(14, 51, 79, 0.55); color: var(--creme); font-size: 26px;
  opacity: 0; transition: opacity .35s;
}
.ig-tile:hover::after { opacity: 1; }
.ig-reel {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(14, 51, 79, 0.55); color: var(--creme);
  backdrop-filter: blur(3px); transition: opacity .3s;
}
.ig-reel svg { width: 12px; height: 12px; margin-left: 1px; }
.ig-tile:hover .ig-reel { opacity: 0; }
@media (max-width: 700px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* critique fixes */
.faq-aside { margin-top: 30px; }

/* referenz-checker teaser band */
.rc-band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc-mini { display: flex; gap: 10px; width: min(560px, 100%); margin-top: 6px; }
.rc-mini input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 17px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--creme); border: 1px solid var(--line-strong); border-radius: 2px;
  padding: 16px 18px; transition: border-color .25s;
}
.rc-mini input:focus { outline: none; border-color: var(--petrol); }
.rc-mini input::placeholder { color: var(--ink-40); font-weight: 480; text-transform: none; letter-spacing: 0; }
@media (max-width: 560px) { .rc-mini { flex-direction: column; } }

/* ============ Kundenfeedback-Runde 11.08. ============ */

/* wordmark hero */
.hero-word {
  font-family: var(--font-brand);
  font-size: clamp(2.5rem, 7vw, 6.2rem);
  font-weight: 400; letter-spacing: 0.1em; line-height: 1.08;
  text-transform: uppercase;
}
.hero-word .rl { margin-right: 0.09em; }
.hero-rule { width: clamp(60px, 8vw, 110px); height: 1px; background: var(--creme-line); margin-top: clamp(18px, 2.6vh, 28px); }

/* marquee brands are links now */
.marquee-item { transition: opacity .25s, color .25s; }
a.marquee-item:hover { opacity: 1; color: var(--petrol); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* new-in grid replaces the rail */
.newin-grid-zone { margin-top: clamp(8px, 1vw, 16px); }
/* 4 x 2 = die acht Neuzugaenge, keine Leerfelder */
.newin-grid-zone .product-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .newin-grid-zone .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .newin-grid-zone .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .newin-grid-zone .product-grid { grid-template-columns: 1fr; }
  /* auf dem Handy nur vier Neuzugaenge, der Rest steckt hinter "Alle Uhren" */
  .newin-grid-zone .product-card:nth-child(n+5) { display: none; }
}

/* Versprechen headline */
.services .section-head { margin-bottom: 0; }


/* contact tiles (FAQ column) */

/* social hub */
.ig .ig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.ig-lead { display: grid; gap: 14px; }
.ig-id { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.ig-id h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1; }
.ig-glyph {
  width: clamp(52px, 6vw, 78px); height: clamp(52px, 6vw, 78px); flex: none;
  border-radius: 22%; background: var(--petrol); color: var(--creme);
  display: grid; place-items: center;
}
.ig-glyph svg { width: 55%; height: 55%; }
.ig-sub { color: var(--ink-60); font-size: 14.5px; margin-top: 0; max-width: 56ch; line-height: 1.65; }
.social-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 52px); align-items: center; }
.social-row .sr-label {
  width: 100%; font-size: clamp(15px, 1.5vw, 19px); font-weight: 620;
  letter-spacing: -0.01em; text-transform: none; color: var(--ink);
  margin: 0 0 4px;
}
.social-chip {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); background: var(--white); border-radius: 2px;
  padding: 16px 26px; font-size: 13.5px; font-weight: 620; letter-spacing: 0.06em;
  transition: border-color .25s, transform .25s var(--ease-out), box-shadow .25s;
}
.social-chip:hover { border-color: var(--petrol); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(14, 51, 79, 0.09); }
.social-chip svg { width: 19px; height: 19px; }
@media (max-width: 520px) { .social-chip { flex: 1 1 100%; justify-content: center; } }
@media (max-width: 700px) { .ig .ig-head { flex-direction: column; align-items: flex-start; } }

/* ============ flagship showcase rotation ============ */
.flagship-media { position: relative; }
.fs-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.fs-layer.is-active { opacity: 1; visibility: visible; }
.fs-layer video, .fs-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-layer img { will-change: transform; }
.fs-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; }
.fs-count { color: var(--ink-40); letter-spacing: 0.18em; }
.fs-progress { width: 100%; height: 2px; background: var(--line); margin-top: 10px; position: relative; overflow: hidden; }
.fs-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--petrol); }

/* ============ Feedback-Runde 15.08. ============ */
/* Über-uns-Teaser: Vollbreiten-Gründerfoto (2:1) + Dreispalter */
.about-photo { position: relative; width: 100%; aspect-ratio: 2 / 1; max-height: 640px; overflow: hidden; }
.about-photo img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 30%; }
.about-text { margin-top: clamp(28px, 4vw, 48px); }
.about-text p {
  color: var(--ink-60); max-width: 74ch;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.8;
}
@media (max-width: 820px) {
  .about-photo { aspect-ratio: 3 / 2; }
}

/* ---------- WhatsApp-Kanal ---------- */
.wa-band { background: var(--white); border-top: 1px solid var(--line); }
.wa-inner { display: grid; justify-items: center; text-align: center; gap: 0; }
.wa-glyph {
  width: clamp(58px, 6vw, 76px); height: clamp(58px, 6vw, 76px);
  border-radius: 50%; background: var(--petrol); color: var(--creme);
  display: grid; place-items: center; margin: 6px 0 clamp(20px, 2.4vw, 30px);
}
.wa-glyph svg { width: 56%; height: 56%; }
.wa-inner h2 { max-width: 30ch; letter-spacing: -0.02em; }
.wa-text {
  color: var(--ink-60); max-width: 62ch; line-height: 1.75;
  font-size: clamp(15px, 1.15vw, 17px); margin-top: clamp(18px, 2vw, 26px);
}
.wa-cta { margin-top: clamp(24px, 3vw, 36px); }
.wa-cta .wa-kurz { display: none; }
@media (max-width: 620px) {
  .wa-br { display: none; }
  .wa-cta { max-width: 100%; padding-left: 22px; padding-right: 22px; }
  .wa-cta .wa-lang { display: none; }
  .wa-cta .wa-kurz { display: inline; }
}